:root{
  --grund:#F1F4EE; --flaeche:#FFFFFF; --tinte:#15241D; --tinte-2:#3F5149; --linie:#D5DDD3;
  --wald:#24493B; --moos:#3D6E58; --himmel:#3F82B8; --himmel-hell:#D9E8F4; --frei:#2E7D4F; --knapp:#B7791F;
  --schatten:0 1px 2px rgba(21,36,29,.06),0 8px 24px rgba(21,36,29,.06);
  --display:"Philosopher","Bricolage Grotesque",Georgia,serif;
  --text:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--grund:#0F1915;--flaeche:#16231D;--tinte:#E6EEE8;--tinte-2:#A9B9B0;--linie:#2A3A32;
        --wald:#9BC9B2;--moos:#7FB59A;--himmel:#7DB4E2;--himmel-hell:#1C3346;--frei:#6BC28F;--knapp:#E0A94A;
        --schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);color-scheme:dark}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--grund);color:var(--tinte);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--himmel)}
a:focus-visible,button:focus-visible{outline:3px solid var(--himmel);outline-offset:3px;border-radius:6px}
.rahmen{max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700;letter-spacing:0}
h3{font-size:1.2rem;font-weight:700}
.marke{font:500 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--moos)}
.zahl{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Kopf */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--grund) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf .rahmen{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinte);font:800 1.25rem/1 var(--display)}
.logo svg{width:30px;height:30px}
.nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--tinte-2);text-decoration:none;font-weight:700;font-size:.95rem}
.nav a:hover{color:var(--tinte)}
.knopf{display:inline-flex;align-items:center;gap:8px;background:var(--wald);color:#fff;border-radius:999px;padding:11px 20px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem}
@media (prefers-color-scheme:dark){.knopf{color:#0F1915}}
.knopf.leise{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 2px var(--linie)}
@media (max-width:760px){.nav{display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;background:#0d1a14;color:#fff}
.hero img.bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 55%;opacity:.92;transform:scaleX(-1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,20,10,.80) 0%,rgba(32,20,10,.45) 45%,rgba(32,20,10,0) 75%)}
.hero .rahmen{position:relative;z-index:1;padding-block:clamp(64px,10vw,120px);display:grid;gap:22px;max-width:1120px}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.2rem);font-weight:700;max-width:11ch;letter-spacing:0}
.hero h1 em{font-style:normal;color:#FFD9A0}
.hero p{max-width:34rem;font-size:1.12rem;color:#E3ECE6;margin:0}
.hero .marke{color:#BFE0D0}
.hero .knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.hero .knopf{background:#fff;color:#15241D}
.hero .knopf.leise{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);background:transparent}
.leine{position:absolute;z-index:1;pointer-events:none;inset:0;width:100%;height:100%}
.leine path{fill:none;stroke:#A9D3F2;stroke-width:2.2;stroke-dasharray:2 9;stroke-linecap:round;opacity:.9}
.fakten{display:flex;gap:28px;flex-wrap:wrap;margin-top:8px;color:#D6E3DB;font-size:.95rem}
.fakten b{display:block;font:800 1.5rem/1.1 var(--display);color:#fff}

/* Abschnitte */
section{padding-block:clamp(56px,8vw,96px)}
.kopfzeile{display:grid;gap:10px;margin-bottom:32px;max-width:44rem}
.kopfzeile p{margin:0;color:var(--tinte-2)}
.trenner{display:block;width:120px;height:14px;margin-bottom:14px}
.trenner path{fill:none;stroke:var(--himmel);stroke-width:2;stroke-dasharray:2 8;stroke-linecap:round}

/* Kursplan */
.woche{display:grid;gap:12px}
.termin{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;background:var(--flaeche);border-radius:16px;padding:16px 20px;box-shadow:var(--schatten)}
.termin .tag{display:grid;line-height:1.15}
.termin .tag b{font:800 1.05rem var(--display)}
.termin .tag span{font:500 .82rem var(--mono);color:var(--tinte-2)}
.termin h3{font-size:1.08rem}
.termin .meta{color:var(--tinte-2);font-size:.92rem;display:flex;gap:14px;flex-wrap:wrap;margin-top:2px}
.plaetze{font:500 .82rem var(--mono);padding:6px 10px;border-radius:999px;white-space:nowrap}
.plaetze.frei{background:color-mix(in srgb,var(--frei) 14%,transparent);color:var(--frei)}
.plaetze.knapp{background:color-mix(in srgb,var(--knapp) 16%,transparent);color:var(--knapp)}
.plaetze.voll{background:var(--linie);color:var(--tinte-2)}
.plaetze.kursmarke{background:color-mix(in srgb,var(--moos) 14%,transparent);color:var(--moos)}
.hinweis{font-size:.88rem;color:var(--tinte-2);margin-top:14px}
@media (max-width:620px){.termin{grid-template-columns:1fr auto}.termin .tag{grid-column:1/-1;display:flex;gap:10px;align-items:baseline}}

/* Kurse */
.familien{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.familie{background:var(--flaeche);border-radius:18px;overflow:hidden;box-shadow:var(--schatten);display:flex;flex-direction:column}
.familie img{aspect-ratio:16/9;object-fit:cover;width:100%}
.familie .innen{padding:18px 20px 22px;display:grid;gap:10px}
.familie p{margin:0;color:var(--tinte-2);font-size:.97rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.85rem;padding:4px 10px;border-radius:999px;background:var(--himmel-hell);color:var(--tinte)}

/* So läuft's */
.ablauf{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:s}
.schritt{border-top:2px dashed var(--himmel);padding-top:16px;display:grid;gap:6px}
.schritt::before{counter-increment:s;content:counter(s);font:800 2rem/1 var(--display);color:var(--himmel)}
.schritt p{margin:0;color:var(--tinte-2)}
.kasten{margin-top:28px;background:var(--flaeche);border-radius:16px;padding:20px 22px;box-shadow:var(--schatten);display:grid;gap:6px}
.kasten p{margin:0}

/* Orte */
.orte{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.ort{background:var(--flaeche);border-radius:16px;padding:20px 22px;box-shadow:var(--schatten);display:grid;gap:8px;align-content:start}
.ort p{margin:0;color:var(--tinte-2)}
.ort .zahl{font-size:.85rem;color:var(--moos)}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.galerie img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:12px}
.app-hinweis{margin-top:16px;display:flex;gap:12px;align-items:center;color:var(--tinte-2);font-size:.95rem}

/* Über uns + Kontakt */
.zwei{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:820px){.zwei{grid-template-columns:1fr}}
.zitat{font:700 clamp(1.3rem,2.4vw,1.7rem)/1.3 var(--display);margin:0 0 18px}
.kontakt{background:var(--wald);color:#fff;border-radius:20px;padding:26px;display:grid;gap:14px}
@media (prefers-color-scheme:dark){.kontakt{background:#1D3A2E}}
.kontakt .zeile{display:grid;gap:2px}
.kontakt small{color:#BFD6CA;font-size:.85rem}
.kontakt .wert{font:500 1.15rem var(--mono);user-select:all}
.kontakt a{color:#fff}

footer{border-top:1px solid var(--linie);padding-block:28px;color:var(--tinte-2);font-size:.92rem}
footer .rahmen{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--tinte-2)}
.entwurf{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:14px;z-index:30;background:#B7791F;color:#fff;font:500 .78rem var(--mono);padding:6px 10px;border-radius:8px;letter-spacing:.06em}

/* Logo */
.logo img{height:38px;width:auto;display:block}
.logo .hell{display:none}
@media (prefers-color-scheme:dark){.logo .dunkel{display:none}.logo .hell{display:block}}
.hero-logo{width:min(360px,70vw);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}

/* ── Farb-Varianten zum Vergleichen (16.10.2026, nur Entwurf) ─────────────
   Umschalten: Leiste unten links oder index.html?farbe=a|b|c.
   Gilt auch bei dunklem System (Tims Rechner): eine gewaehlte Variante ist immer hell. */
html[data-farbe]{color-scheme:light}
html[data-farbe] .knopf{color:#fff}
html[data-farbe] .hero .knopf{color:#15241D}
html[data-farbe] .hero .knopf.leise{color:#fff}
html[data-farbe=a] .logo .dunkel,html[data-farbe=c] .logo .dunkel{display:block}
html[data-farbe=a] .logo .hell,html[data-farbe=c] .logo .hell{display:none}
@media all{
  /* A · Sand: warm wie das Abendbild, Espresso statt Grün, Leine mit gepunkteter Linie */
  html[data-farbe=a]{--grund:#F6F0E6;--flaeche:#FFFCF7;--tinte:#2A211A;--tinte-2:#5E5045;--linie:#E4D8C6;
    --wald:#3A2A1E;--moos:#A0592A;--himmel:#B4562A;--himmel-hell:#F3E2D2}
  html[data-farbe=a] .hero h1 em{color:#fff;text-decoration:underline dotted #F0A066;text-decoration-thickness:5px;text-underline-offset:10px}
  html[data-farbe=a] .hero .marke{color:#F3D3B5}
  html[data-farbe=a] .leine path{stroke:#F0A066}

  /* B · Nacht: dunkle Kopfzeile in Nachtblau, Leine im Blau der gestrichelten Linie */
  html[data-farbe=b]{--grund:#F3F5F7;--flaeche:#FFFFFF;--tinte:#14202B;--tinte-2:#46525E;--linie:#D8DEE4;
    --wald:#1D3A52;--moos:#3F6E91;--himmel:#2F6FA3;--himmel-hell:#DCE9F4}
  html[data-farbe=b] .kopf{background:#14202B;border-bottom-color:#14202B}
  html[data-farbe=b] .kopf .nav a{color:#C9D6E2}
  html[data-farbe=b] .kopf .nav a:hover{color:#fff}
  html[data-farbe=b] .kopf .knopf{background:#A9D3F2;color:#14202B}
  html[data-farbe=b] .logo .dunkel{display:none}
  html[data-farbe=b] .logo .hell{display:block}
  html[data-farbe=b] .hero h1 em{color:#A9D3F2}
  html[data-farbe=b] .hero .marke{color:#C9DDEE}
  html[data-farbe=b] .hero::after{background:linear-gradient(90deg,rgba(14,22,32,.78) 0%,rgba(14,22,32,.42) 45%,rgba(14,22,32,0) 75%)}

  /* C · Klar: weiß und ruhig, schwarze Knöpfe, ein einziger warmer Akzent */
  html[data-farbe=c]{--grund:#FAFAF8;--flaeche:#FFFFFF;--tinte:#1D1D1B;--tinte-2:#55554F;--linie:#E6E6E1;
    --wald:#1D1D1B;--moos:#C2622D;--himmel:#C2622D;--himmel-hell:#F6E6DA}
  html[data-farbe=c] .kopf{background:rgba(255,255,255,.92)}
  html[data-farbe=c] .hero h1 em{color:#fff;font-style:italic}
  html[data-farbe=c] .hero .marke{color:#F2C9A8}
  html[data-farbe=c] .leine path{stroke:#F2C9A8}
}
.farbwahl{position:fixed;left:12px;bottom:12px;z-index:50;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  background:rgba(20,20,20,.86);color:#fff;border-radius:999px;padding:6px 8px 6px 14px;font:600 .82rem/1 var(--text);max-width:calc(100vw - 24px)}
.farbwahl button{border:0;border-radius:999px;padding:7px 11px;background:transparent;color:#ddd;font:inherit;cursor:pointer}
.farbwahl button[aria-pressed=true]{background:#fff;color:#111}

/* „Hunger?!" — Link zu Mirals in der Kopfzeile (16.10.2026, Tims Idee) */
.hunger{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--tinte);font:700 .95rem/1 var(--display);
  padding:6px 12px 6px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--linie);white-space:nowrap}
.hunger img{height:26px;width:auto}
.hunger:hover{box-shadow:inset 0 0 0 1px #C9A24A;color:#9A6B12}
html[data-farbe=b] .hunger{color:#E6EDF3;box-shadow:inset 0 0 0 1px #33475A}
@media (max-width:760px){.hunger span{display:none}.hunger{padding:4px}}
@media (max-width:420px){.kopf .knopf{padding:9px 14px;font-size:.9rem}}
@media (max-width:420px){.kopf .knopf .lang{display:none}}