/* Tagesschule FLOW – Variante 16 «Lichtung»
   Bildstark nach dem Vorbild mini-roots.ch, warme Naturtoene,
   zwei Stufen: Gesamtschule (Kindergarten bis 6. Klasse) und Oberstufe. */

:root{
  --tanne:#1F4A42;      /* Hauptfarbe: dunkles Tannengruen */
  --tanne-d:#153630;
  --moos:#3D6B5E;
  --sand:#FAF7F0;       /* Seitenhintergrund */
  --sand-d:#F1EADC;
  --terra:#C4703F;      /* warmer Akzent */
  --terra-h:#A85B2E;
  --ink:#22302C;
  --mut:#5F7269;
  --line:#E4DDD0;
  --weiss:#fff;
  --r:18px;
  --kopfhoehe:84px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);
  font-family:Inter,'Helvetica Neue',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.72;font-weight:350;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--tanne);text-decoration:none}
a:hover{text-decoration:underline}
/* Verweise im Fliesstext muessen als Verweise erkennbar sein. Vorher
   waren sie farbgleich mit dem Text und ohne Unterstreichung - ein Link
   auf die Preisseite sah aus wie gewoehnlicher Text. Ausgenommen sind
   Knoepfe, Kopfzeile, Fusszeile und Bildkacheln. */
section p a, section li a, .fa a, .lead a, .dublock p a, .stufenkarte p a,
.stufenkarte li a, .zitat a, .note a, .stimme p a, .step p a{
  color:var(--terra);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
section p a:hover, section li a:hover, .fa a:hover, .lead a:hover,
.dublock p a:hover, .stufenkarte p a:hover, .stufenkarte li a:hover{
  color:var(--terra-h);text-decoration-thickness:2px}
section.dunkel p a, section.dunkel li a, .dublock p a, .hero .lead a,
.pagehead .lead a{color:#F0C39C}
section.dunkel p a:hover, .dublock p a:hover{color:#fff}
a.btn, a.btn:hover, a.kopf-cta, a.logo, .bildband a, footer a{text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}
.eng{max-width:820px}

h1,h2,h3,h4{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  font-weight:500;line-height:1.16;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2.sec{font-size:clamp(1.6rem,3vw,2.35rem);margin-bottom:14px}
h3{font-size:1.24rem;margin-bottom:8px}
p{margin:0 0 16px}
.lead{font-size:1.16rem;color:var(--mut);max-width:74ch}
.kicker{font-family:Inter,sans-serif;font-size:.74rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--terra);font-weight:600;margin-bottom:12px;display:block}

/* ---------- Kopfzeile ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(250,247,240,.96);
  border-bottom:1px solid var(--line);transition:opacity .24s ease,transform .24s ease}
header.kopf-versteckt{opacity:0;pointer-events:none;transform:translateY(-14px)}
header .wrap{max-width:1500px;display:flex;align-items:center;gap:18px;
  min-height:84px;padding:0 26px}
.logo{display:block;flex:none}
.logo16{height:50px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:16px}
header .wrap>.kopf-cta{order:9;margin-left:18px}
.nav ul{list-style:none;display:flex;align-items:center;gap:0;margin:0;padding:0;flex-wrap:nowrap}
.nav a.nl{display:block;padding:8px 15px;font-size:1rem;color:var(--tanne);
  font-weight:400;white-space:nowrap;text-decoration:none}
.nav a.nl:hover{color:var(--terra)}
.nav a.nl.on{font-weight:600}
.nav ul li+li::before{content:'';display:block;width:1px;height:15px;
  background:var(--tanne);opacity:.26;flex:none}
.kopf-cta{display:inline-block;padding:10px 20px;border-radius:999px;
  border:1.5px solid var(--terra);color:var(--terra);font-size:.97rem;font-weight:600;
  white-space:nowrap;text-decoration:none}
.kopf-cta:hover{background:var(--terra);color:#fff;text-decoration:none}
#mtog,.burger{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:13px 26px;border-radius:999px;background:var(--tanne);
  color:#fff;font-weight:600;font-size:1rem;text-decoration:none;border:1.5px solid var(--tanne)}
.btn:hover{background:var(--tanne-d);border-color:var(--tanne-d);color:#fff;text-decoration:none}
.btn.big{padding:15px 32px;font-size:1.04rem}
.btn.hell{background:#fff;color:var(--tanne);border-color:#fff}
.btn.hell:hover{background:var(--sand-d);color:var(--tanne);border-color:var(--sand-d)}
.btn.rand{background:transparent;color:var(--tanne)}
.btn.rand:hover{background:var(--tanne);color:#fff}

/* ---------- FLOW-Zeile ----------
   Eine einzige Zeile: F Freie Entfaltung · L Leichtes Lernen · …
   Jedes Paar fliegt nacheinander von rechts nach links ein. */
.wordcycle{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
  align-items:baseline;gap:.15em 1.5em;width:100%;max-width:none;margin:0 auto 30px;
  text-align:center;font-family:'Iowan Old Style',Palatino,Georgia,serif;
  overflow:hidden}
.wordcycle span{display:inline-flex;align-items:baseline;gap:.3em;
  font-size:1.02rem;color:var(--ink);white-space:nowrap;opacity:0}
.wordcycle b{font-weight:500;font-size:1.85em;color:var(--terra);line-height:1}
.wordcycle i{font-style:normal;letter-spacing:.01em}
html.anim .wordcycle span{animation:wcfly .72s cubic-bezier(.16,.8,.3,1) forwards}
html.anim .hero .wordcycle span,html.anim .pagehead .wordcycle span{animation-play-state:paused}
html.anim .wordcycle.los span{animation-play-state:running}
.wordcycle span:nth-child(1){animation-delay:.05s}
.wordcycle span:nth-child(2){animation-delay:.30s}
.wordcycle span:nth-child(3){animation-delay:.55s}
.wordcycle span:nth-child(4){animation-delay:.80s}
@keyframes wcfly{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:none}}
html:not(.anim) .wordcycle span{opacity:1}
.pagehead .wordcycle{justify-content:flex-start;margin-left:0;margin-bottom:22px;
  text-shadow:0 1px 12px rgba(10,30,26,.6)}
.hero .wordcycle{justify-content:center}
@media (max-width:900px){
  .wordcycle{gap:.15em 1.1em}
  .wordcycle span{font-size:.92rem}
}
@media (max-width:560px){
  .wordcycle{gap:.1em .9em}
  .wordcycle span{font-size:.82rem}
  .wordcycle b{font-size:1.7em}
}

/* ---------- Intro mit Kugel ---------- */
.intro{position:relative;min-height:calc(100vh - var(--kopfhoehe,84px));min-height:calc(100svh - var(--kopfhoehe,84px));background:var(--tanne);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;text-align:center}
#kugel{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-inhalt{position:relative;z-index:2;padding:0 24px;pointer-events:none}
/* Die dunkle Wolke sitzt eng um den Textblock, statt die halbe Kugel
   abzudunkeln. Im Kern etwas kraeftiger, dafuer laeuft sie frueher aus -
   die Gesichter auf der mittleren Reihe bleiben hell. */
.intro-inhalt::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112%;height:185%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(11,32,28,.74) 0%,rgba(11,32,28,.46) 46%,rgba(11,32,28,0) 71%)}
.intro h1{color:#fff;font-size:clamp(2.2rem,5.4vw,4.1rem);
  text-shadow:0 2px 26px rgba(0,0,0,.5)}
.intro p.sub{color:rgba(255,255,255,.93);font-size:1.1rem;margin-top:14px;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.intro .weiterknopf{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);text-shadow:0 1px 12px rgba(0,0,0,.75);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;
  color:#fff;font-size:.88rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;font-weight:500}
.intro .weiterknopf:hover{text-decoration:none;color:var(--sand-d)}
.intro .weiterknopf span.pfeil{font-size:1.5rem;line-height:1;animation:huepf 1.9s ease-in-out infinite}
@keyframes huepf{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.intro-logo{display:none} /* Logo steht in der Kopfzeile */
.intro-logo svg{height:52px;width:auto;display:block;filter:drop-shadow(0 1px 10px rgba(0,0,0,.55))}

/* ---------- Hero und Seitenkopf ----------
   Der Text liegt auf dem Foto. Damit er lesbar bleibt, ohne dass das Bild
   dunkel wirkt, gehen zwei Dinge in die Gegenrichtung:
   1. Das Foto wird per Filter aufgehellt (brightness ueber 1).
   2. Hinter dem Textblock liegt eine schwarze Wolke, die eng am Text sitzt
      und nach aussen weich auslaeuft - sie deckt nicht die ganze Flaeche ab. */
.hero{position:relative;padding:150px 0 104px;background:var(--tanne);
  border-bottom:1px solid var(--line);text-align:center;overflow:hidden}
.herobild{position:absolute;inset:0;background-size:cover;background-position:50% 42%;
  filter:brightness(1.26) saturate(1.04) contrast(.95)}
.hero .wrap{position:relative;z-index:2}
.hero h1,.hero h2.sec{max-width:20ch;margin:0 auto;color:#fff}
.hero p.lead{margin:18px auto 0;text-align:center;color:rgba(255,255,255,.95);max-width:52ch}
.hero .btn{margin-top:28px}
.hero .wordcycle{justify-content:center;margin:0 auto 26px}
.hero .wordcycle span{color:#fff}
.hero .wordcycle b{color:#F0C49A}

/* Seitenkopf: gleiches Prinzip, Text linksbuendig, Wolke sitzt links. */
.pagehead{position:relative;padding:118px 0 108px;background:var(--tanne);overflow:hidden}
.pagehead .bg{position:absolute;inset:0;background-size:cover;background-position:50% 40%;
  opacity:1;filter:brightness(1.24) saturate(1.03) contrast(.95)}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{color:#fff;max-width:24ch}
.pagehead p.lead{color:rgba(255,255,255,.95);margin-top:16px;max-width:48ch}
.pagehead .btn{margin-top:24px}
.pagehead .wordcycle{justify-content:flex-start;margin-left:0;margin-bottom:22px}
.pagehead .wordcycle span{color:#fff}
.pagehead .wordcycle b{color:#F0C49A}

@media (max-width:900px){
  .hero{padding:104px 0 74px}
  .pagehead{padding:84px 0 76px}
    }


/* ---------- Textwolke ----------
   Die dunkle Flaeche liegt nicht mehr als eine grosse Ellipse ueber dem
   ganzen Block, sondern folgt dem Text: Jede Zeile bekommt ueber
   box-decoration-break ihren eigenen Hintergrund, der weiche Rand kommt
   vom box-shadow. Dort, wo keine Buchstaben stehen, bleibt das Foto frei. */
.tw{-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:rgba(0,0,0,.58);box-shadow:0 0 22px 16px rgba(0,0,0,.58);
  padding:.02em .12em;border-radius:2px}
.hero p.lead .tw,.pagehead p.lead .tw{background:rgba(0,0,0,.52);
  box-shadow:0 0 18px 13px rgba(0,0,0,.52)}
.hero .wordcycle span,.pagehead .wordcycle span{
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:rgba(0,0,0,.60);box-shadow:0 0 17px 12px rgba(0,0,0,.60);
  padding:.06em .22em;border-radius:3px}
/* Zeilen etwas luftiger, damit sich die Wolken nicht zu einem Block schliessen */
.hero h1,.hero h2.sec,.pagehead h1{line-height:1.32}
.hero p.lead,.pagehead p.lead{line-height:1.85}

/* ---------- Abschnitte ---------- */
section{padding:72px 0}
section.eng-pad{padding:56px 0}
/* Zwei Abschnitte hintereinander ergaben 72 + 72 px Luft, gemessen
   178 px zwischen letztem Satz und naechster Ueberschrift. Das ist zu
   viel; zusammen genommen bleiben jetzt rund 92 px. */
section + section{padding-top:46px}
section:has(+ section){padding-bottom:46px}
section.hell{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.dunkel{background:var(--tanne);color:#fff}
section.dunkel h2.sec,section.dunkel h3{color:#fff}
section.dunkel .lead,section.dunkel p{color:rgba(255,255,255,.9)}
section.dunkel .kicker{color:#E7B58C}

/* ---------- Raster ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- Bildkarten (Kern des bildstarken Stils) ---------- */
.bk{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column}
.bk img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.bk .txt{padding:22px 24px 26px}
.bk h3{margin-bottom:6px}
.bk p{font-size:.98rem;color:var(--mut);margin:0}
.bk .more{display:inline-block;margin-top:14px;font-weight:600;font-size:.96rem;color:var(--terra)}

/* grosse Stufenkarte */
/* Bild oben, Text darunter in einem eigenen weissen Container.
   Bewusst KEIN Grid-Overlay und KEIN height:100% am Bild – damit kann der
   Text auf keiner Breite und in keinem Browser auf dem Foto landen. */
.stufenkarte{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column}
.stufenkarte img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;flex:none}
.stufenkarte .txt{padding:32px 32px 36px;background:#fff;flex:1 1 auto;
  display:flex;flex-direction:column;align-items:flex-start}
.stufenkarte .txt .btn{margin-top:auto}
.stufenkarte ul{margin:14px 0 0;padding-left:20px}
.stufenkarte li{margin-bottom:7px;font-size:.99rem}

/* Bild mit Legende */
figure{margin:0}
figure img{width:100%;height:auto;display:block;border-radius:var(--r)}
figcaption{font-size:.85rem;color:var(--mut);margin-top:9px;line-height:1.5}

/* Bildband ueber die ganze Breite */
.bildband{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bildband img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block}
.bildband.drei{grid-template-columns:repeat(3,1fr)}
.bildband.drei img{aspect-ratio:4/3}

/* Text-Bild-Wechsel */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.duo.umgekehrt .dbild{order:2}
.duo img{border-radius:var(--r)}

/* Zahlenband */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.zahlen .z b{display:block;font-family:'Iowan Old Style',Palatino,Georgia,serif;
  font-size:2.5rem;color:var(--terra);line-height:1.1;font-weight:500}
.zahlen .z span{font-size:.93rem;color:var(--mut)}
section.dunkel .zahlen .z span{color:rgba(255,255,255,.82)}
section.dunkel .zahlen .z b{color:#E7B58C}

/* Zitat */
.zitat{background:#fff;border-left:4px solid var(--terra);border-radius:0 var(--r) var(--r) 0;
  padding:30px 34px;max-width:76ch}
.zitat p{font-family:'Iowan Old Style',Palatino,Georgia,serif;font-size:1.24rem;
  line-height:1.6;margin:0 0 10px}
.zitat cite{font-style:normal;font-size:.92rem;color:var(--mut)}

/* Frage-Antwort (GEO: Antwort zuerst) */
.fa{border-top:1px solid var(--line);padding:24px 0}
.fa:last-child{border-bottom:1px solid var(--line)}
.fa h3{font-size:1.14rem;margin-bottom:8px}
.fa p{margin:0;color:var(--mut)}
.fa p strong{color:var(--ink);font-weight:600}

/* Tabelle */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.98rem}
th{background:var(--sand-d);font-weight:600;font-family:Inter,sans-serif}
tr:last-child td{border-bottom:0}
td.zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Schritte */
.steps{counter-reset:s;display:grid;gap:18px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px 24px 74px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:24px;top:22px;
  width:34px;height:34px;border-radius:50%;background:var(--terra);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}
.step h3{margin-bottom:5px}
.step p{margin:0;font-size:.98rem;color:var(--mut)}

/* Du-Ansprache-Block Oberstufe */
.dublock{position:relative;color:#fff;border-radius:var(--r);padding:44px 46px;overflow:hidden;
  background:var(--tanne)}
/* Wie bei den Heros: Das Foto bleibt hell (brightness ueber 1, nur noch
   ein zarter Verlauf) - lesbar wird die Schrift durch den Schatten, der
   direkt an den Buchstaben sitzt, nicht durch Abdunkeln der Flaeche. */
.dublock .dubild{position:absolute;inset:0;background-size:cover;background-position:50% 42%;
  z-index:0;filter:brightness(1.14) saturate(1.02)}
.dublock .dubild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,42,37,.52) 0%,rgba(16,42,37,.32) 45%,rgba(16,42,37,.10) 100%)}
.dublock>*{position:relative;z-index:1}
.dublock h2,.dublock p,.dublock li{
  text-shadow:0 1px 3px rgba(10,26,22,.9), 0 2px 16px rgba(10,26,22,.75)}
.dublock h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:18px}
.dublock ul{list-style:none;margin:0;padding:0}
.dublock li{position:relative;padding-left:30px;margin-bottom:12px;font-size:1.06rem;
  color:rgba(255,255,255,.97)}
.dublock li::before{content:'';position:absolute;left:0;top:.62em;width:13px;height:2px;
  background:#E7B58C}

/* Stimmen */
.stimme{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.stimme p{font-family:'Iowan Old Style',Palatino,Georgia,serif;font-size:1.08rem;margin:0 0 12px}
.stimme span{font-size:.9rem;color:var(--mut)}

/* Hinweis / Platzhalter */
.note{background:var(--sand-d);border:1px dashed var(--moos);border-radius:var(--r);
  padding:22px 26px;font-size:.97rem;color:var(--tanne)}
.note b{color:var(--tanne)}

/* CTA-Band */
.cta-band{background:var(--tanne);color:#fff;text-align:center;padding:74px 26px}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.9);max-width:58ch;margin:0 auto 24px}

/* Footer */
footer{background:var(--tanne-d);color:rgba(255,255,255,.86);padding:62px 0 30px;font-size:.96rem}
footer h4{color:#fff;font-size:1.04rem;margin-bottom:12px}
footer a{color:rgba(255,255,255,.86)}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:7px}
.fineprint{border-top:1px solid rgba(255,255,255,.17);margin-top:38px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem;
  color:rgba(255,255,255,.66)}
.stand{font-size:.84rem;color:var(--mut);margin-top:38px;padding-top:14px;
  border-top:1px solid var(--line)}


/* ---------- Porträts (Team) ----------
   Rund, ohne farbigen Ring, mit leichtem Schatten.
   Der Ring nimmt die Farben dieser Variante auf (Tannengrün statt Teal),
   damit die Porträts zum übrigen Design passen.
   Der Filter ist bewusst stärker entsättigt als im Profil, damit die
   sehr unterschiedlich belichteten Aufnahmen ruhig und einheitlich wirken. */
.tcard .txt{align-items:center;text-align:center}
.tcard h3,.tcard p{text-align:center}
.imgwrap{width:158px;height:158px;border-radius:50%;padding:0;
  background:var(--sand-d);box-shadow:0 6px 18px rgba(31,74,66,.16); /* ohne farbigen Ring (Wunsch Camille, Okt. 2026) */
  flex:none;margin:0 auto 16px;overflow:hidden}
.imgwrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  filter:none} /* Porträts in vollen Farben (Wunsch Camille, Okt. 2026) */
.imgwrap-leer{display:flex;align-items:center;justify-content:center;
  background:var(--sand-d);border:2px dashed var(--moos);box-shadow:none}
.imgwrap-leer span{font-family:'Iowan Old Style',Palatino,Georgia,serif;
  font-size:2.1rem;color:var(--moos);letter-spacing:.04em}
@media (max-width:960px){ .imgwrap{width:132px;height:132px} }


/* ---------- Lange Texte klemmen ----------
   Sichtbar sind hoechstens sechs Zeilen, der Rest wird aufgeklappt.
   Der Text steht vollstaendig im Quelltext - Suchmaschinen und
   KI-Assistenten sehen ihn weiterhin ganz. */
.klemm{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;position:relative;margin-bottom:0}
.klemm.offen{display:block;-webkit-line-clamp:unset}
/* Der Knopf schliesst unmittelbar an den geklemmten Text an und steht
   an derselben linken Kante - sonst wirkt er wie ein eigener Absatz. */
.mehr{display:inline-flex;align-items:center;gap:.4em;margin:5px 0 16px;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.93rem;font-weight:600;color:var(--terra);line-height:1.4;
  text-align:left}
li.klemm + .mehr{margin-left:0}
.mehr:hover{color:var(--terra-h);text-decoration:underline}
.mehr::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease}
.mehr[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
section.dunkel .mehr,.dublock .mehr{color:#E7B58C}
section.dunkel .mehr:hover,.dublock .mehr:hover{color:#fff}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:no-preference){
  html.anim .rv{opacity:0;transform:translateY(16px)}
  html.anim .rv.in{opacity:1;transform:none;transition:opacity .62s ease,transform .62s ease}
}

/* ---------- Schmalere Schirme ---------- */
@media (max-width:1400px){ .nav a.nl{padding:8px 12px;font-size:.96rem} }
@media (max-width:1560px){ .nav a.nl{padding:7px 10px;font-size:.9rem}
  .kopf-cta{padding:9px 16px;font-size:.9rem} .logo16{height:44px} }
@media (max-width:1050px){ .nav a.nl{padding:6px 8px;font-size:.85rem} }
/* Kopfzeile klappt frueher als das uebrige Layout auf das Burger-Menue um:
   ab hier passen Menuepunkte und Schnuppertermin-Pille nicht mehr nebeneinander. */
@media (max-width:760px){
  header .wrap{min-height:70px;flex-wrap:wrap}
  .burger{display:block;order:3;margin-left:0;font-size:1.7rem;cursor:pointer;
    color:var(--tanne);line-height:1;padding:6px 8px}
  header .wrap>.kopf-cta{order:2;margin-left:auto;margin-right:12px;
    padding:8px 15px;font-size:.88rem}
  .nav{order:4;width:100%;margin-left:0}
  .nav ul{display:none;flex-direction:column;align-items:stretch;width:100%;
    padding:8px 0 14px;border-top:1px solid var(--line)}
  .nav ul li+li::before{display:none}
  .nav a.nl{padding:11px 4px;font-size:1.02rem}
  #mtog:checked ~ .nav ul{display:flex}
  :root{--kopfhoehe:70px}
}

@media (max-width:960px){
  .g3,.g4,.g2{grid-template-columns:1fr}
  .stufenkarte .txt{padding:26px 22px 30px}
  .stufenkarte h3{font-size:1.42rem!important}
  .duo{grid-template-columns:1fr;gap:26px}
  .duo.umgekehrt .dbild{order:0}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .bildband{grid-template-columns:repeat(2,1fr)}
  .bildband.drei{grid-template-columns:repeat(2,1fr)}
  section{padding:52px 0}
  .dublock{padding:30px 26px}
}
@media (max-width:520px){
  .zahlen{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  header .wrap{padding:0 18px}
}

/* ================================================================
   Geteilte Koepfe (Variante 17) - Ueberschreibt die Kopf-Regeln oben.
   Der Text steht links auf ruhigem Sandgrund ohne Wolken und ohne
   Schatten; das Foto fuellt rechts die volle Kopfhoehe, unverdunkelt,
   mit leichter Schraege. Die FLOW-Zeile sitzt oben und fliegt sehr
   gemaechlich Paar fuer Paar von rechts ein (5,4 s je Paar).
   Nur CSS: das HTML der Seiten samt data-cms-Marken bleibt unberuehrt.
   ================================================================ */

/* ---------- Kopfzeile in Moosgruen: hebt sich ab, ohne schwer zu wirken ---------- */
header{background:var(--moos);border-bottom:1px solid rgba(255,255,255,.16)}
.nav a.nl{color:rgba(255,255,255,.92)}
.nav a.nl:hover{color:#F0C49A}
.nav a.nl.on{color:#F0C49A}
.nav ul li+li::before{background:#fff;opacity:.28}
.kopf-cta{border-color:#E7B58C;color:#F0C49A}
.kopf-cta:hover{background:var(--terra);border-color:var(--terra);color:#fff}
.burger{color:#fff}
@media (max-width:760px){ .burger{color:#fff} .nav ul{border-top-color:rgba(255,255,255,.2)} }
header svg.logo16 path{stroke:#fff}
header svg.logo16 path:first-of-type{stroke:#E7B58C}
header svg.logo16 text{fill:#fff}

/* ---------- Seitenkopf: zweigeteilt ---------- */
.pagehead{display:grid;grid-template-columns:minmax(360px,44%) 1fr;
  min-height:420px;padding:0;background:var(--sand);overflow:hidden}
.pagehead .bg{position:static;grid-column:2;grid-row:1;inset:auto;
  filter:brightness(1.06) saturate(1.02);
  clip-path:polygon(7% 0,100% 0,100% 100%,0 100%)}
.pagehead .wrap{grid-column:1;grid-row:1;position:relative;z-index:2;
  max-width:640px;width:100%;margin:0 0 0 auto;box-sizing:border-box;
  padding:30px 48px 42px 26px;display:flex;flex-direction:column}
.pagehead h1{color:var(--tanne);margin-top:auto}
.pagehead p.lead{color:var(--mut)}
.pagehead .btn{align-self:flex-start;margin-bottom:auto}
.pagehead .btn.hell{background:var(--tanne);color:#fff;border-color:var(--tanne)}
.pagehead .btn.hell:hover{background:var(--tanne-d);border-color:var(--tanne-d);color:#fff}

/* ---------- Start-Hero der Startseite: gleiches Prinzip ---------- */
.hero{display:grid;grid-template-columns:minmax(360px,44%) 1fr;
  min-height:440px;padding:0;background:var(--sand);text-align:left;overflow:hidden}
.herobild{position:static;grid-column:2;grid-row:1;inset:auto;
  filter:brightness(1.06) saturate(1.02);
  clip-path:polygon(7% 0,100% 0,100% 100%,0 100%)}
.hero .wrap{grid-column:1;grid-row:1;max-width:640px;width:100%;margin:0 0 0 auto;
  box-sizing:border-box;padding:30px 48px 42px 26px;display:flex;flex-direction:column}
.hero h1,.hero h2.sec{color:var(--tanne);max-width:22ch;margin:auto 0 0 0;text-align:left}
.hero p.lead{color:var(--mut);margin:16px 0 0;text-align:left;max-width:46ch}
.hero .btn{align-self:flex-start;margin-top:26px;margin-bottom:auto}
.hero .btn.hell{background:var(--tanne);color:#fff;border-color:var(--tanne)}
.hero .btn.hell:hover{background:var(--tanne-d);border-color:var(--tanne-d);color:#fff}

/* ---------- Textwolken im Kopf abschalten ---------- */
.hero .tw,.pagehead .tw,.hero p.lead .tw,.pagehead p.lead .tw{
  background:none;box-shadow:none;padding:0;border-radius:0;color:inherit}

/* ---------- FLOW-Zeile: einzeilig, oben, sehr gemaechlich ---------- */
.hero .wordcycle,.pagehead .wordcycle{justify-content:flex-start;text-shadow:none;
  margin:0 0 26px;flex-wrap:wrap;gap:.25em .95em;
  overflow:hidden;max-width:100%}
.hero .wordcycle span,.pagehead .wordcycle span{color:var(--ink);font-size:.8rem;
  background:none;box-shadow:none;padding:0;border-radius:0;text-shadow:none}
.hero .wordcycle b,.pagehead .wordcycle b{color:var(--terra);font-size:1.65em}
html.anim .wordcycle span{animation-duration:5.4s;
  animation-timing-function:cubic-bezier(.22,.7,.3,1)}
.wordcycle span:nth-child(1){animation-delay:.3s}
.wordcycle span:nth-child(2){animation-delay:3.9s}
.wordcycle span:nth-child(3){animation-delay:7.5s}
.wordcycle span:nth-child(4){animation-delay:11.1s}
@keyframes wcfly{from{opacity:0;transform:translateX(150px)}to{opacity:1;transform:none}}
@media (max-width:1150px){
  .hero .wordcycle span,.pagehead .wordcycle span{font-size:.72rem}}

/* ---------- Schmale Schirme: Bild oben, Text darunter ---------- */
@media (max-width:900px){
  .pagehead,.hero{grid-template-columns:minmax(0,1fr);min-height:0;padding:0}
  .pagehead .bg,.herobild{grid-column:1;grid-row:1;height:230px;
    clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
  .pagehead .wrap,.hero .wrap{grid-column:1;grid-row:2;margin:0;
    padding:20px 26px 36px}
  .pagehead h1,.hero h2.sec{margin-top:12px}
}

/* ---------- Du-Block: Bild oben, Text darunter (Lesbarkeit) ----------
   Der Text lag auf dem Foto und war trotz Schatten schlecht lesbar.
   Neu: Foto als Kopf des Blocks, Text auf weissem Grund darunter,
   ganz ohne Schatten. */
.dublock{display:block;padding:0;background:#fff;color:var(--ink);
  border:1px solid var(--line)}
.dublock .dubild{position:static;height:300px;filter:brightness(1.04) saturate(1.02)}
.dublock .dubild::after{display:none}
.dublock>*:not(.dubild){position:static;padding-left:46px;padding-right:46px}
.dublock h2{color:var(--tanne);margin-top:28px}
.dublock h2,.dublock p,.dublock li{text-shadow:none}
.dublock p{color:var(--ink)}
.dublock li{color:var(--ink)}
.dublock li::before{background:var(--terra)}
.dublock p a{color:var(--terra)}
.dublock p a:hover{color:var(--terra-h)}
.dublock .mehr{color:var(--terra)}
.dublock .mehr:hover{color:var(--terra-h)}
.dublock .btn{margin:4px 46px 34px;text-shadow:none;box-shadow:none}
.dublock .btn.hell{background:var(--tanne);color:#fff;border-color:var(--tanne)}
.dublock .btn.hell:hover{background:var(--tanne-d);border-color:var(--tanne-d)}
@media (max-width:900px){
  .dublock .dubild{height:210px}
  .dublock>*:not(.dubild){padding-left:24px;padding-right:24px}
  .dublock .btn{margin:4px 24px 28px}
}

/* ---------- Knoepfe: nirgends Schatten ---------- */
.btn,.kopf-cta,.mehr{box-shadow:none;text-shadow:none}

/* Statements der Lehrpersonen auf der Teamseite.
   Die Anführungszeichen setzt das CSS, damit sie im Redaktionsbereich
   nicht mitgetippt werden müssen. Ein leeres Feld bleibt unsichtbar. */
.tstatement{font-family:'Iowan Old Style',Palatino,Georgia,serif;font-style:italic;
  font-size:1rem;line-height:1.55;color:var(--ink);margin:16px auto 0;padding-top:14px;
  border-top:1px solid var(--line);max-width:34ch}
.tstatement::before{content:'«';color:var(--terra)}
.tstatement::after{content:'»';color:var(--terra)}
.tstatement:empty{display:none}

/* Konzeptseite: Baum «Starke Wurzeln, sicherer Stamm, offen fürs Lernen».
   Der Baum ist Bild, Titel, Einleitung und Haltungsliste sind echter Text:
   auf dem Handy lesbar, für Suchmaschinen und KI-Assistenten auswertbar
   und im Redaktionsbereich bearbeitbar. */
.baum-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:48px;
  grid-template-areas:"bild text";align-items:center}
.baum-bild{grid-area:bild}
.baum-text{grid-area:text}
.baum-bild img{border-radius:var(--r);box-shadow:0 10px 30px rgba(31,74,66,.10)}
.baum-bild figcaption{text-align:right}
.baum-text h2.sec{max-width:16ch;text-wrap:balance}
@media (max-width:960px){
  .baum-raster{grid-template-columns:1fr;grid-template-areas:"text" "bild";row-gap:22px}
}
/* Menü: Trennstrich neben statt über dem Menüpunkt. */
@media (min-width:761px){ .nav ul li{display:flex;align-items:center} }

/* Stundenplan auf den Stufenseiten: eine kleine Tabelle pro Klassengruppe. */
.plan-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;align-items:start}
.plan h3{font-size:1.15rem;margin:0 0 10px}
.plan td:first-child{white-space:nowrap;font-weight:500;width:1%}
@media (max-width:600px){ .plan td:first-child{white-space:normal} }

/* Google-Karten erst auf Klick laden: keine Drittanbieter-Cookies ohne Zustimmung. */
.kartenwahl{min-height:300px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:26px 28px;background:var(--sand-d);border:1px solid var(--line);border-radius:var(--r)}
.kartenwahl p{margin:0 0 8px;max-width:52ch}
.kartenwahl button.btn{cursor:pointer;font-family:inherit;font-size:inherit}
.plan-raster:has(> .plan:only-child){max-width:640px}

/* Terminliste auf der Seite Veranstaltungen. Leere Felder (z. B. ohne
   Uhrzeit) bleiben unsichtbar. */
.termine{margin-bottom:38px}
.terminliste{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.termin{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:6px 28px;padding:18px 0;border-bottom:1px solid var(--line)}
.termin-wann{display:flex;flex-direction:column;gap:2px}
.termin-datum{font-weight:600;color:var(--tanne)}
.termin-zeit{color:var(--mut);font-size:.95rem}
.termin-was h3{margin:0 0 4px;font-size:1.15rem}
.termin-was p{margin:0}
.termin-zeit:empty,.termin-was p:empty{display:none}
@media (max-width:700px){ .termin{grid-template-columns:1fr} }

/* Laptop und Tablet: zweizeilige Kopfzeile statt Burger-Menü.
   Oben Logo und «Kennenlernen», darunter alle Menüpunkte. */
@media (min-width:761px) and (max-width:1399px){
  header .wrap{flex-wrap:wrap;min-height:0;padding:10px 26px 8px;row-gap:6px}
  header .wrap>.kopf-cta{order:2;margin-left:auto}
  .nav{order:3;width:100%;margin-left:0;justify-content:center}
  .nav ul{flex-wrap:wrap;justify-content:center;row-gap:2px}
  .nav a.nl{padding:6px 11px;font-size:.95rem}
  :root{--kopfhoehe:108px}
}
/* Handy: aufgeklapptes Menü in zwei Spalten, alle Punkte auf einen Blick. */
@media (max-width:760px){
  #mtog:checked ~ .nav ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .nav ul li{border-bottom:1px solid rgba(255,255,255,.14)}
  .nav a.nl{padding:12px 4px;font-size:1rem}
}
/* Schmalere Laptops und Tablets: zwei zentrierte Reihen à sechs Menüpunkte.
   Der unsichtbare Listenpunkt «umbruch» nach «Oberstufe» erzwingt den Umbruch. */
.nav ul li.umbruch{display:none}
@media (min-width:761px) and (max-width:1199px){
  .nav ul li.umbruch{display:block;flex-basis:100%;height:0}
  .nav ul li.umbruch::before,.nav ul li.umbruch+li::before{display:none}
}
/* Handy: Logo, «Kennenlernen» und Menü-Knopf in einer Zeile. */
@media (max-width:760px){
  header .wrap{padding:0 14px;gap:10px}
  .logo16{height:36px}
  header .wrap>.kopf-cta{margin-right:2px;padding:7px 13px;font-size:.85rem}
}
@media (max-width:380px){
  header .wrap{gap:6px}
  .logo16{height:32px}
  header .wrap>.kopf-cta{padding:6px 10px;font-size:.8rem}
  .burger{padding:4px}
}
@media (min-width:761px) and (max-width:1199px){ :root{--kopfhoehe:150px} }

/* Wochen-Stundenpläne (Primar- und Oberstufenseite).
   Unterricht in Tannengrün, Betreuung in Sandtönen, Spezialfächer und Wald
   hervorgehoben. Auf schmalen Schirmen seitlich scrollbar, die Zeitspalte
   bleibt dabei stehen. */
.wochenplan{margin-top:8px}
.wochenplan h3{font-size:1.25rem;margin:0 0 12px}
.wp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);
  border:1px solid var(--line);background:#fff}
.wp-scroll:focus{outline:2px solid var(--terra);outline-offset:2px}
.wp-tabelle{min-width:720px;border-collapse:separate;border-spacing:3px;background:#fff;border-radius:0}
.wp-tabelle th,.wp-tabelle td{border:0;border-radius:8px;padding:8px 10px;font-size:.88rem;
  line-height:1.35;text-align:center;vertical-align:middle}
.wp-tabelle thead th{background:var(--sand-d);color:var(--tanne);font-weight:600;font-size:.92rem}
.wp-tabelle th.wp-zeit{background:var(--sand);color:var(--mut);font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right;position:sticky;left:0;z-index:1;width:1%}
.wp-tabelle thead th.wp-zeit{background:var(--sand-d)}
.wp-u{background:var(--tanne);color:#fff;font-weight:500}
.wp-b{background:var(--sand-d);color:var(--ink)}
.wp-b2{background:#F6F1E7;color:var(--ink)}
.wp-p{background:repeating-linear-gradient(135deg,var(--sand) 0 6px,var(--sand-d) 6px 12px);padding:3px 10px}
.wp-pause-zeile th,.wp-pause-zeile td{padding-top:3px;padding-bottom:3px;font-size:.8rem}
.wp-s{background:#F3D9C4;color:var(--ink)}
.wp-w{background:var(--moos);color:#fff}
.wp-leer{background:transparent}
.wp-total th,.wp-total td{background:#FBF3E2;font-weight:600;color:var(--ink)}
.wp-legende{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:12px 0 0;padding:0;
  font-size:.88rem;color:var(--mut)}
.wp-legende li{display:flex;align-items:center;gap:8px}
.wp-punkt{width:16px;height:16px;border-radius:4px;flex:none}
@media (max-width:760px){ .wp-legende{font-size:.84rem} }
.wp-tabelle{table-layout:fixed;width:100%}
.wp-tabelle th.wp-zeit{width:124px}
.wp-hinweis{display:none;margin:0 0 8px;font-size:.85rem;color:var(--mut)}
@media (max-width:760px){ .wp-hinweis{display:block} }
/* Leere Terminplätze (für neue Anlässe im Admin) und vergangene Termine ausblenden. */
.termin:has(.termin-datum:empty),.termin.vorbei{display:none}

/* Intro: die nächsten vier Anlässe.
   Breite Bildschirme (quer, ab 900 px): unten rechts; kugel.js verkleinert die Kugel nur so weit,
   dass sie die Box nicht berührt. Handy und Tablet hochkant: Box unter der Kugel, die Seite scrollt.
   Erscheint erst, wenn anlaesse.js Termine gefunden hat. */
.intro h1{text-wrap:balance}
.intro-anlaesse{position:absolute;right:24px;bottom:24px;z-index:3;width:280px;box-sizing:border-box;text-align:left;
  background:rgba(11,32,28,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:14px 16px 12px;color:#fff}
.intro-anlaesse[hidden]{display:none}
.intro-anlaesse h2{font-size:1.05rem;margin:0 0 6px;color:#F0C49A;font-weight:600}
.intro-anlaesse ul{list-style:none;margin:0;padding:0}
.intro-anlaesse li{border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;line-height:1.35}
.intro-anlaesse li>a{display:grid;grid-template-columns:5.6em 1fr;column-gap:10px;padding:6px 6px;margin:0 -6px;
  border-radius:6px;color:inherit;text-decoration:none}
.intro-anlaesse li>a:hover,.intro-anlaesse li>a:focus-visible{background:rgba(255,255,255,.1);text-decoration:none}
.intro-anlaesse li>a:hover .ia-titel{text-decoration:underline}
.intro-anlaesse li:first-child{border-top:0}
.ia-datum{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff}
.ia-titel{color:rgba(255,255,255,.95)}
.ia-zeit{grid-column:2;color:rgba(255,255,255,.7);font-size:.8rem;display:none}
.ia-alle{display:inline-block;margin-top:6px;color:#F0C49A;font-size:.88rem;font-weight:600}
.ia-alle:hover{color:#fff;text-decoration:none}
/* Breite Bildschirme: Kugel, Titel und Weiter-Knopf rücken um die halbe Box-Breite nach links,
   so kann die Kugel gross bleiben. */
@media (min-width:900px) and (orientation:landscape){
  .intro.mit-anlaessen{--seite:304px}
  .intro.mit-anlaessen #kugel{right:var(--seite);width:auto}
  .intro.mit-anlaessen .intro-inhalt{margin-right:var(--seite)}
  .intro.mit-anlaessen .weiterknopf{left:calc((100% - var(--seite)) / 2)}
}
@media (min-width:900px) and (max-width:1199px) and (orientation:landscape){ .intro.mit-anlaessen{--seite:274px} }
/* Uhrzeiten nur, wo genug Höhe da ist */
/* Kleinere Querformate: Box schmaler, damit die Kugel grösser bleiben kann */
@media (max-width:1199px) and (orientation:landscape){ .intro-anlaesse{width:250px;padding:12px 14px 10px}
  .intro-anlaesse li{font-size:.82rem} .intro-anlaesse li>a{grid-template-columns:5.4em 1fr;padding:5px 6px} .intro-anlaesse h2{font-size:.98rem} }
@media (min-width:1400px) and (min-height:860px){ .ia-zeit{display:block} .intro-anlaesse{width:300px} .intro.mit-anlaessen{--seite:324px} }
@media (max-width:899px), (orientation:portrait){
  .intro.mit-anlaessen{justify-content:flex-start;--zone:max(340px,min(100vw,calc(100svh - var(--kopfhoehe,70px) - 120px)))}
  .intro.mit-anlaessen #kugel{inset:auto;top:0;left:0;right:0;height:var(--zone)}
  .intro.mit-anlaessen .intro-inhalt{min-height:var(--zone);width:100%;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center}
  .intro.mit-anlaessen .intro-anlaesse{position:relative;right:auto;bottom:auto;width:calc(100% - 32px);max-width:520px;margin:4px auto 0}
  .intro.mit-anlaessen .weiterknopf{position:relative;left:auto;bottom:auto;transform:none;margin:22px auto 30px}
}
@media (orientation:portrait) and (min-width:700px){ .intro.mit-anlaessen .ia-zeit{display:block} }
/* Einzeilige Kopfzeile ab 1400 px: kompaktere Menüpunkte, damit alle 13 Punkte
   und «Kennenlernen» nebeneinander Platz haben. */
@media (min-width:1400px){ .nav a.nl{padding:6px 8px;font-size:.92rem} header .wrap{gap:14px} }
/* Startseite «Ein Tag bei FLOW»: 12 Bilder = drei volle Reihen am Laptop.
   Auf dem Handy nur die ersten 8, sonst wird das Band zu lang. */
/* Alle 12 Bilder auch am Handy zeigen (sonst sieht man ausgetauschte Bilder 9–12 in der schmalen Admin-Vorschau nicht) */

/* Anlässe-Seite: Termin, der von der Startseite aus angesprungen wird */
.termin{scroll-margin-top:calc(var(--kopfhoehe,84px) + 20px)}
.termin:target{outline:3px solid var(--sand-d,#C4703F);outline-offset:6px;border-radius:var(--r)}

/* Konzeptseite: Coachinggespräche – Text links, Bild rechts (Gegenstück zum Baum) */
.coaching-raster{grid-template-areas:"text bild";grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.coaching-raster .baum-text p:not(.lead){margin-top:14px}
@media (max-width:960px){ .coaching-raster{grid-template-columns:1fr;grid-template-areas:"text" "bild"} }

/* ---------- Kontaktformular ---------- */
.kform{display:grid;gap:16px;margin-top:8px}
.kform label{display:grid;gap:6px;font-weight:600;font-size:.95rem;color:var(--tanne)}
.kform input,.kform select,.kform textarea{font:inherit;font-weight:400;color:var(--ink);
  padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%;box-sizing:border-box}
.kform input:focus,.kform select:focus,.kform textarea:focus{outline:2px solid var(--terra);outline-offset:1px}
.kform .kf-ungueltig{border-color:#B3261E;background:#FFF6F5}
.kf-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.kf-reihe{grid-template-columns:1fr}}
.pfl{color:var(--terra);margin-left:2px}
.kf-fehler{margin:0;color:#B3261E;font-weight:600}
.kform .btn{justify-self:start}
.kf-hinweis{margin:0;font-size:.88rem;color:var(--mut)}
.step .more{display:inline-block;margin-top:10px;font-weight:600;font-size:.95rem;color:var(--terra)}
#termine{scroll-margin-top:100px}

/* Anmeldung zu Anlässen mit Zeitfenstern (Seite «Anlässe», buchung.js) */
.kform [hidden],.buchung [hidden]{display:none!important}
.buchung{margin:44px 0 10px;padding-top:34px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--kopfhoehe,84px) + 20px)}
.bu-anlass{margin:22px 0 8px}
.bu-anlass h3{margin:0 0 2px}
.bu-wann{color:var(--mut);margin:0 0 6px}
.bu-text{color:var(--mut);margin:4px 0 10px}
.bu-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:10px;margin-top:12px}
.bu-slot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 14px;border-radius:12px;
  border:1.5px solid var(--moos,#1F4A42);background:#fff;color:var(--moos,#1F4A42);font:inherit;cursor:pointer;text-align:left}
.bu-slot:hover{background:rgba(31,74,66,.06)}
.bu-slot.an{background:var(--moos,#1F4A42);color:#fff}
.bu-slot .bu-zeit{font-weight:600;font-variant-numeric:tabular-nums}
.bu-slot .bu-frei{font-size:.82rem;opacity:.85}
.bu-slot.voll{border-color:var(--line);background:#F3EFE7;color:#9A9285;cursor:not-allowed}
.bu-slot.voll .bu-zeit{text-decoration:line-through}
.bu-form{margin-top:22px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.bu-auswahl{margin:0 0 14px}
.bu-danke{margin-top:18px;padding:14px 18px;border-radius:12px;background:#E6F0EA;color:#1F4A42;font-weight:500}
.bu-honig{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.kf-infotag{margin:14px 0 4px;padding:14px 18px;border-radius:12px;background:#E6F0EA;color:#1F4A42}
.kf-infotag a{font-weight:600}
#kf-rest{display:grid;gap:16px}
/* Startseite: Knöpfe der Stufenkarten immer auf gleicher Höhe (unten bündig) */
.stufenkarte .txt>p:last-child{margin-top:auto!important;padding-top:18px}

/* Blogbeiträge (übernommen von der alten Webseite) */
.blog-beitrag p{font-size:1.08rem}
.blog-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:26px}
.blog-galerie figure{margin:0}
.blog-galerie img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);display:block}
.blog-galerie a:hover img{opacity:.92}
.blog-liste .bk a.ganz{color:inherit;text-decoration:none}
.blog-liste .datum{display:block;font-size:.82rem;color:var(--mut);margin-bottom:4px}

/* Bilder vergrössern (lightbox.js) */
img.lb-zoom{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(12,24,21,.92);padding:56px 64px}
.lb.an{display:flex}
html.lb-offen{overflow:hidden}
.lb-figur{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  max-width:100%;max-height:100%;width:100%;height:100%}
.lb-figur img{width:auto;height:auto;max-width:100%;max-height:calc(100% - 40px);object-fit:contain;border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}
.lb-figur figcaption{color:#fff;margin-top:12px;font-size:.95rem;text-align:center}
.lb-zu{position:absolute;top:14px;right:16px;width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb-zu:hover,.lb-pfeil:hover{background:rgba(255,255,255,.28)}
.lb-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:12px;
  background:rgba(255,255,255,.12);color:#fff;font-size:40px;line-height:1;cursor:pointer}
.lb-zurueck{left:10px}.lb-weiter{right:10px}
.lb [hidden]{display:none}
@media (max-width:700px){ .lb{padding:56px 10px 20px} .lb-pfeil{top:auto;bottom:14px;transform:none;width:56px;height:48px}
  .lb-zurueck{left:calc(50% - 64px)} .lb-weiter{right:calc(50% - 64px)} .lb-figur img{max-height:calc(100% - 90px)} }