/* =========================================================
   Polysport – Basis-Styles (Schriften, Farben, Grundbausteine)
   Alle Seiten laden zuerst diese Datei, danach ihre eigene CSS.
   Farben/Abstände hier zentral ändern – sie gelten überall.
   ========================================================= */

/* ---------- Schriften (lokal, keine Google-Verbindung nötig) ---------- */
@font-face{font-family:'Archivo';font-style:italic;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-italic-latin.woff2) format('woff2-variations'),url(../fonts/archivo-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:italic;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-italic-latin-ext.woff2) format('woff2-variations'),url(../fonts/archivo-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/montserrat-latin.woff2) format('woff2-variations'),url(../fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/montserrat-latin-ext.woff2) format('woff2-variations'),url(../fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Allison';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/allison-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Allison';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/allison-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Design-Tokens ---------- */
:root{
  /* Grund & Text */
  --cream:#FFF9F1;        /* Seitengrund */
  --white:#FFFFFF;        /* Sektionen, Karten */
  --line:#ECE6DC;         /* Trennlinien, Kartenrand */
  --ink:#1B1F3B;          /* Haupttext, dunkle Flächen, Footer */
  --muted:#4A4F6A;        /* Zweittext */
  --admin-bg:#F6F4EF;     /* Grund im Adminbereich */

  /* Markenfarben (gleichwertig – Mädchen & Knaben) */
  --yellow:#FFC83D;       /* Sonnengelb: Pillen, Preis-Karte, Markierung */
  --coral:#FF6B57;        /* Koralle: Flächen, Icons */
  --coral-text:#C9372A;   /* Koralle für Text & Hauptbutton (weisser Text) */
  --coral-dark:#B42E1F;
  --teal:#1FB5A8;         /* Türkis: Flächen, Häkchen */
  --teal-text:#0B766C;
  --teal-dark:#0B6B62;
  --lilac:#7B61FF;        /* Lila */
  --lilac-text:#5A3DE6;
  --sky:#3BA4F5;          /* Himmelblau */
  --sky-text:#1B6CC4;
  --gold-text:#8F5B00;    /* Gelb als Textfarbe (Kontrast) */

  /* Pastell-Kacheln */
  --tint-coral:#FFF1EE; --tint-yellow:#FFF7DE; --tint-teal:#E6F8F5; --tint-lilac:#F1EDFF; --tint-sky:#E6F3FF;
  --tint-coral-2:#FFE3DE; --tint-teal-2:#D5F4EF;

  /* Status */
  --ok:#2BB24C; --ok-text:#1B7A35; --warn:#F59E0B; --danger:#C9372A;

  /* Schriften */
  --font-display:'Archivo','Arial Black',sans-serif;   /* kursiv, breit (125 %), Versalien */
  --font-text:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-script:'Allison','Brush Script MT',cursive;   /* Handschrift, nur auf Fotos */

  /* Abstände (4er-/8er-Raster) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:96px;

  /* Radien */
  --r-sm:16px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  /* Schatten */
  --shadow-card:0 16px 40px rgba(27,31,59,.07);
  --shadow-float:0 20px 40px rgba(27,31,59,.18);

  /* Layout */
  --container:1248px;      /* Inhaltsbreite Desktop (1440 − 2×96) */
  --gutter:96px;           /* Seitenrand Desktop */
}
@media (max-width:1100px){:root{--gutter:40px}}
@media (max-width:640px){:root{--gutter:20px}}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-text);font-size:16px;line-height:1.55;color:var(--ink);background:var(--cream)}
img{max-width:100%;display:block}
a{color:var(--ink)}
a:hover{color:var(--coral-text)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Typografie-Bausteine ---------- */
.disp{font-family:var(--font-display);font-stretch:125%;font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.pop{color:var(--ink);text-shadow:3px 3px 0 var(--yellow),5px 5px 0 rgba(27,31,59,.12)}
.pop-accent{color:var(--coral-text);text-shadow:3px 3px 0 var(--ink)}
.script{font-family:var(--font-script);font-weight:400}
.overline{font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}

/* ---------- Hintergründe & Deko ---------- */
.hero-bg{background:radial-gradient(circle at 8% 18%,rgba(255,200,61,.45),rgba(255,200,61,0) 28%),radial-gradient(circle at 92% 12%,rgba(123,97,255,.22),rgba(123,97,255,0) 30%),radial-gradient(circle at 78% 92%,rgba(31,181,168,.28),rgba(31,181,168,0) 32%),radial-gradient(circle at 30% 100%,rgba(255,107,87,.22),rgba(255,107,87,0) 30%),var(--cream)}
.cta-bg{background:linear-gradient(120deg,#9BE7DD 0%,#BFE3FF 55%,#D9D0FF 100%)}
.dots{background-image:radial-gradient(circle,rgba(27,31,59,.14) 0 1.5px,transparent 2px);background-size:18px 18px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 28px;border-radius:var(--r-pill);font-family:var(--font-text);font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--coral-text);color:#fff;box-shadow:0 10px 24px rgba(201,55,42,.3)}
.btn-primary:hover{color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{color:#fff}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-outline{background:#fff;border-color:var(--ink);color:var(--ink)}

/* ---------- Foto-Platz (Platzhalter, im Admin ersetzen) ---------- */
.photo-slot{background:linear-gradient(135deg,#FFE3DE 0%,#F1EDFF 50%,#D5F4EF 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;overflow:hidden}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot .slot-name{font-size:13px;font-weight:700;color:var(--muted)}
.photo-slot .slot-hint{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--lilac-text)}

/* ---------- FAQ (natives Akkordeon, ohne JavaScript) ---------- */
.faq{border-radius:var(--r-md);background:var(--cream);border:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:64px;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex-shrink:0;width:34px;height:34px;border-radius:999px;background:var(--tint-teal-2);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.faq[open] summary::after{content:'−'}
.faq .faq-body{padding:0 24px 20px;font-size:15px;line-height:1.6;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- Navigation (alle Seiten) ---------- */
.site-nav{position:relative;z-index:20}
.site-nav .nav-inner{height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-name{font-family:var(--font-display);font-stretch:125%;font-style:italic;font-weight:900;text-transform:uppercase;font-size:20px;line-height:1}
.brand-name small{display:block;font-size:11px;letter-spacing:.08em;color:var(--coral-text)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{text-decoration:none;font-size:15px;font-weight:600}
.nav-links a[aria-current="page"]{color:var(--coral-text)}
.nav-links .btn{min-height:46px;padding:0 24px;font-size:14px}
.nav-toggle{display:none;width:48px;height:48px;border-radius:999px;border:2px solid var(--ink);background:#fff;cursor:pointer;align-items:center;justify-content:center}
@media (max-width:980px){
  .site-nav .nav-inner{height:76px}
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:76px;flex-direction:column;align-items:stretch;gap:4px;padding:16px;border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-float)}
  .nav-links a{padding:12px 8px;min-height:44px}
  .nav-links .btn{margin-top:8px}
  .site-nav.is-open .nav-links{display:flex}
}

/* ---------- Footer (alle Seiten) ---------- */
.site-footer{background:var(--ink);color:#fff;padding:56px 0 40px;margin-top:72px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--yellow)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:48px}
.footer-col{display:flex;flex-direction:column;gap:12px;font-size:15px}
.footer-col h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.3em;color:var(--yellow)}
.footer-about p{margin:0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.75)}
.footer-domain{font-size:14px;font-weight:700;color:var(--yellow)}
.footer-offer{display:flex;align-items:center;gap:12px}
.footer-offer img,.footer-offer .logo-slot{width:40px;height:35px;object-fit:contain}
.footer-offer .logo-slot{border-radius:8px;border:1px dashed rgba(255,255,255,.4);font-size:11px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.65)}
.footer-bottom nav{display:flex;gap:24px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}