/*
Theme Name: Sprossen
Theme URI: https://www.sprossen.net/
Author: Sprossen e.V.
Description: Block-Theme fuer den Sprossen e.V., Kleinkindbetreuung in Mannheim-Lindenhof. Aus dem freigegebenen Entwurf gebaut.
Version: 0.11.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sprossen
Tags: block-theme, one-column, custom-colors, custom-logo, accessibility-ready
*/

/* ==========================================================================
   Uebernommen aus dem freigegebenen Entwurf (quellen/template.html).
   Bei Aenderungen: dort UND hier anpassen, sonst laufen die beiden
   Fassungen auseinander.
   ========================================================================== */


:root{
  color-scheme:light only;
  --ground:#FFFFFF; --band:#FDF6EB; --surface:#FFFFFF;
  --ink:#242A26; --ink-soft:#5C6660; --ink-faint:#8A938D;
  --line:#EAE4D9; --line-soft:#F3EFE7;
  --logo-red:#ED1C24; --logo-orange:#F7911E;
  --red:#D4161D; --red-soft:#FCE7E5;
  --orange:#F7911E; --orange-deep:#B96D08; --orange-soft:#FDF0DB;
  --green:#5A8F4B; --green-deep:#426E36; --green-soft:#E9F1E1;
  --on-accent:#FFFFFF;
  --r:16px; --r-lg:24px;
  --maxw:1160px; --measure:64ch;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Karla,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;font-weight:700;line-height:1.14;text-wrap:balance;margin:0;letter-spacing:-.012em}
h1{font-size:clamp(1.95rem,4.3vw,3rem);font-weight:800}
h2{font-size:clamp(1.5rem,2.9vw,2.15rem)}
h3{font-size:clamp(1.08rem,1.7vw,1.3rem)}
h4{font-size:1.02rem;font-weight:600}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px}.g44{gap:44px}
.measure{max-width:var(--measure)}
.lead{font-size:clamp(1.04rem,1.55vw,1.17rem);line-height:1.66;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.small{font-size:.93rem}
.prose{color:var(--ink-soft)}
.prose p + p{margin-top:14px}
.prose b{color:var(--ink)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}

.band{padding:clamp(50px,6vw,88px) 0;position:relative;overflow:hidden}
.band.tight{padding:clamp(36px,4.4vw,58px) 0}
.band.tight + .band.tight{padding-top:0}
.band-2{background:var(--band)}
.band-edge{border-top:1px solid var(--line-soft)}

/* ---------- FIGUREN ---------- */
.fig{display:block;color:var(--orange)}
.fig.red{color:var(--red)}
.fig.green{color:var(--green)}
/* große, blasse Figuren hinter dem Text */
.deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.deco .fig{position:absolute;opacity:.16}
.deco .fig.soft{opacity:.11}
@media (max-width:760px){.deco .fig{opacity:.09}}
/* kräftige Figuren im Vordergrund
   Die Figuren stehen an prozentualen Positionen, waren aber in festen
   Pixelhoehen angelegt. Auf dem Telefon blieben sie dadurch gross,
   waehrend der Kasten schmal wurde - sie schoben sich uebereinander und
   die aeusserste lief aus dem Bild. Deshalb skalieren die Hoehen jetzt
   mit der Breite des Kastens (Bezugsgroesse: 490px, so breit ist er auf
   dem Laptop). Groesser als urspruenglich werden sie nie - min() deckelt
   nach oben. Die Hoehe steht als --h an jeder Figur. */
.troupe{position:relative;min-height:360px;z-index:2}
.troupe .fig{position:absolute;height:calc(var(--h, 200) * 1px)}
@supports (container-type: inline-size){
  .troupe{container-type:inline-size}
  .troupe .fig{height:min(calc(var(--h, 200) * 1px), calc(var(--h, 200) * 100cqw / 490))}
}
@media (max-width:920px){.troupe{min-height:250px}}
@media (max-width:920px){
  /* Unterhalb von 920px wird der Kasten flach (250px statt 360px), die
     beiden oben angesetzten Figuren stossen dann in die untere Reihe.
     Sie sind rein schmueckend (aria-hidden) und entfallen deshalb hier -
     die Gruppe wirkt dadurch luftiger statt gedraengt. */
  .troupe .fig:nth-child(5),.troupe .fig:nth-child(6){display:none}
}

/* ---------- LOGO / HEADER ---------- */
.logo-svg{display:block;height:2.7rem;width:auto}
footer .logo-svg{height:2.4rem;margin-bottom:12px}
.site-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 93%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line-soft)}
.hbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:14px 0}
.brand{text-decoration:none;flex:none;display:flex;align-items:center}
.nav-main{display:flex;flex-wrap:wrap;gap:2px;margin-left:auto;align-items:center;justify-content:flex-end}
.nav-main a{text-decoration:none;font-size:.93rem;font-weight:600;padding:8px 11px;border-radius:9px;color:var(--ink-soft);transition:background .16s,color .16s;white-space:nowrap}
.nav-main a:not(.btn):hover{background:var(--band);color:var(--ink)}
.nav-main a.on:not(.btn){color:var(--red);background:var(--red-soft)}
.nav-main a.btn-pri{color:var(--on-accent);background:var(--red);margin-left:6px}
.hbar-rechts{display:none}
.nav-knopf{display:none}

/* --- Klappmenue auf schmalen Bildschirmen ---------------------------------
   Bis 900px wird aus der Linkleiste ein Klappmenue. Ohne JavaScript bleibt
   das Menue offen stehen (die Regeln unter .js-nav greifen dann nicht) -
   die Navigation haengt nie an einem Skript. */
@media (max-width:900px){
  .hbar{flex-wrap:nowrap;justify-content:space-between;gap:12px}
  .hbar-rechts{display:flex;align-items:center;gap:8px;margin-left:auto}
  .cta-leiste .btn{white-space:nowrap}

  /* Der Knopf erscheint nur, wenn das Skript laeuft - sonst steht die
     Navigation ohnehin offen da und ein Knopf ohne Wirkung waere irrefuehrend. */
  .nav-knopf{display:none;align-items:center;justify-content:center;
    width:46px;height:46px;flex:none;padding:0;border:1.5px solid var(--line);
    border-radius:12px;background:var(--ground);color:var(--ink);cursor:pointer}
  .nav-knopf:hover{border-color:var(--red);color:var(--red)}
  /* Der Balken ist zugleich der mittlere Strich; die beiden aeusseren
     entstehen als ::before und ::after. Beim Oeffnen wird daraus ein Kreuz. */
  .nav-balken,.nav-balken::before,.nav-balken::after{display:block;width:20px;height:2px;
    border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .12s ease}
  .nav-balken{position:relative}
  .nav-balken::before,.nav-balken::after{content:"";position:absolute;left:0}
  .nav-balken::before{top:-6px}
  .nav-balken::after{top:6px}
  .nav-knopf[aria-expanded="true"] .nav-balken{background:transparent}
  .nav-knopf[aria-expanded="true"] .nav-balken::before{transform:translateY(6px) rotate(45deg)}
  .nav-knopf[aria-expanded="true"] .nav-balken::after{transform:translateY(-6px) rotate(-45deg)}

  .nav-main{position:absolute;left:0;right:0;top:100%;margin:0;width:auto;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:10px 24px 16px;background:var(--ground);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(36,42,38,.10);
    max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain}
  /* Grosse, gut treffbare Flaechen statt der gedraengten Leiste. */
  .nav-main a{font-size:1.02rem;padding:13px 14px;border-radius:11px;
    min-height:48px;display:flex;align-items:center;color:var(--ink)}
  .nav-main a + a{border-top:1px solid var(--line-soft)}
  .nav-main a.on:not(.btn){color:var(--red);background:var(--red-soft);border-top-color:transparent}
  /* Der rote Knopf steht auf schmalen Schirmen oben in der Leiste,
     im Klappmenue waere er doppelt. */
  .nav-main .btn-pri{display:none}

  .js-nav .nav-knopf{display:inline-flex}
  .js-nav .nav-main{display:none}
  .js-nav .nav-main.offen{display:flex}
}
@media (max-width:420px){
  .logo-svg{height:2.1rem}
  .cta-leiste .btn-sm{padding:9px 12px;font-size:.88rem}
  .nav-main{padding-left:20px;padding-right:20px}
}
@media (max-width:340px){
  /* Auf sehr schmalen Geraeten hat der rote Knopf keinen Platz mehr
     neben Logo und Menue - er steht dann im Klappmenue. */
  .cta-leiste{display:none}
  .nav-main .btn-pri{display:flex;order:-1;margin:0 0 8px;justify-content:center}
  .nav-main .btn-pri + a{border-top:none}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:Karla,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:1rem;
  padding:13px 22px;border-radius:12px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:filter .16s,border-color .16s,color .16s}
.btn-pri{background:var(--red);color:var(--on-accent)}
.btn-pri:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-sm{padding:9px 15px;font-size:.92rem;border-radius:10px}

/* ---------- HERO ---------- */
.hero{padding:clamp(30px,4vw,56px) 0 clamp(38px,4.6vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,3.6vw,48px);align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;gap:28px}}
.hero h1{margin-bottom:2px}
.claim{font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--orange-deep);line-height:1.28}
.pill{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:var(--green-soft);color:var(--green-deep);
  padding:8px 16px;border-radius:999px;font-weight:700;font-size:.87rem}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.pill.warte{background:var(--band);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line)}
.pill.warte i{background:var(--ink-faint)}
.platz-stand{font-size:12.5px;color:var(--ink-faint);margin-top:-8px;align-self:flex-start}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:6px;font-size:.92rem;color:var(--ink-soft);font-weight:500}

/* ---------- LEITSATZ ---------- */
.motto{position:relative;overflow:hidden;background:var(--band);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:clamp(44px,5.5vw,78px) 0;text-align:center}
.motto q{quotes:none;display:block;font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;font-weight:800;letter-spacing:-.015em;
  font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.16;color:var(--red);max-width:18ch;margin:0 auto}
.motto .sub{margin-top:14px;color:var(--ink-soft);font-size:.98rem}

/* ---------- FOTOFLÄCHEN ---------- */
.ph{position:relative;overflow:hidden;background-size:cover;background-position:center;
  border:1px solid var(--line);box-shadow:0 2px 4px rgba(36,42,38,.05),0 14px 34px rgba(36,42,38,.07)}
.ph .tagline{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.9);
  border-radius:12px;padding:9px 13px;font-size:.83rem;line-height:1.4;color:var(--ink);text-align:left}
.ph .tagline b{display:block;font-size:.63rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:2px}
.ph-arch{border-radius:280px 280px 24px 24px;aspect-ratio:3/4}
.ph-blob{border-radius:60% 40% 46% 54%/48% 42% 58% 52%;aspect-ratio:1/1}
.ph-blob2{border-radius:44% 56% 62% 38%/56% 46% 54% 44%;aspect-ratio:1/1}
.ph-circle{border-radius:50%;aspect-ratio:1/1}
.ph-circle .tagline{left:13%;right:13%;bottom:11%}
.ph-blob .tagline,.ph-blob2 .tagline{left:15%;right:15%;bottom:15%}
.ph-leaf{border-radius:80px 12px 80px 12px;aspect-ratio:4/3}
.ph-soft{border-radius:26px;aspect-ratio:4/3}

/* ---------- RASTER / KARTEN ---------- */
.grid{display:grid;gap:20px;align-items:stretch}
/* Ueberall minmax(0,1fr) statt 1fr. "1fr" bedeutet minmax(auto,1fr): eine
   Spalte wird dann mindestens so breit wie ihr unteilbarer Inhalt und kann
   nicht weiter schrumpfen. Auf der Seite "Ueber uns" schob der Kartenkasten
   das Raster dadurch zwischen etwa 640 und 900 Pixeln nach rechts aus dem
   Bild - bei 768 Pixeln (iPad hochkant) um 87 Pixel. */
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:center}
.split.rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr;gap:28px}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px}
.card p{color:var(--ink-soft);font-size:.96rem}
.card .ico{height:64px;display:flex;align-items:flex-end;gap:4px;margin-bottom:6px}
.card .ico .fig{height:100%;width:auto}
.plain{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,30px)}

/* Gruppenkarten im Stil der Seite */
.rhythm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.rhythm{grid-template-columns:1fr}}
.rc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.rc .rc-fig{position:absolute;right:-14px;top:-8px;height:150px;opacity:.14}
.rc-head{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.rc-head .fig{height:56px;width:auto;flex:none}
.rc-head .lbl{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.rc-head h3{margin:0}
.rc ul{display:flex;flex-direction:column;gap:10px;font-size:.96rem;color:var(--ink-soft);position:relative;z-index:2}
.rc li{display:flex;gap:11px;align-items:flex-start}
.rc li svg{flex:none;margin-top:5px}
.rc .fee{font-size:.97rem;color:var(--ink);padding-top:15px;border-top:1px solid var(--line-soft);position:relative;z-index:2}
.rc .fee b{font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;font-size:1.12rem}

/* Wochenstreifen */
.weekbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
/* minmax(0,1fr) statt 1fr: sonst wird jede Spalte mindestens so breit wie
   das laengste Wort ("GRUPPE") - der Freitag lief dadurch auf Telefonen
   rechts aus dem Kasten heraus. */
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:14px}
.wd{border-radius:12px;padding:12px 6px 11px;text-align:center;border:1.5px solid var(--line);background:var(--ground);color:var(--ink-faint);min-width:0}
.wd b{display:block;font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;font-size:.95rem;font-weight:700}
.wd small{display:block;font-size:.66rem;margin-top:5px;font-weight:700;letter-spacing:.05em}
.wd.g1{background:var(--orange-soft);border-color:var(--orange);color:var(--orange-deep)}
.wd.g2{background:var(--green-soft);border-color:var(--green);color:var(--green-deep)}
.wd.free{background:var(--orange-soft);border-color:var(--orange);color:var(--orange-deep)}
@media (max-width:430px){
  .weekbox{padding:18px 14px}
  .week{gap:5px}
  .wd{padding:10px 3px 9px}
  .wd b{font-size:.86rem}
  .wd small{font-size:.58rem;letter-spacing:.02em;margin-top:4px}
}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:15px;font-size:.88rem;font-weight:600;color:var(--ink-soft)}
.legend i{width:11px;height:11px;border-radius:4px;display:inline-block;margin-right:8px;vertical-align:-1px}

/* Listen */
.mark{display:flex;flex-direction:column;gap:11px}
.mark li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft)}
.mark li .fig{flex:none;height:30px;width:auto;margin:-3px 0 0 -4px}
.mark li svg.tick{flex:none;margin-top:4px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:11px 30px}
@media (max-width:700px){.cols{grid-template-columns:1fr}}

.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.cmp{width:100%;border-collapse:collapse;min-width:620px}
table.cmp th,table.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.95rem;vertical-align:top}
table.cmp thead th{font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;font-weight:700;font-size:.98rem;background:var(--band);border-bottom:1px solid var(--line)}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp td:first-child{font-weight:600;width:24%}
table.cmp td:nth-child(2){color:var(--ink-soft)}

/* Auf schmalen Bildschirmen wird aus jeder Zeile eine Karte. Vorher lag
   die Tabelle in einem seitlich scrollbaren Kasten - man musste wischen
   und dabei die Zeilenbeschriftung im Kopf behalten. Die Beschriftungen
   der Spalten setzt tabelle.php als data-spalte an jede Zelle. */
@media (max-width:700px){
  .tblwrap{overflow-x:visible;border:none;background:none;border-radius:0}
  table.cmp{min-width:0;display:block;border-collapse:separate}
  table.cmp thead{display:none}
  table.cmp tbody{display:block}
  table.cmp tr{display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);padding:18px 20px}
  table.cmp tr + tr{margin-top:12px}
  table.cmp td{display:block;width:auto;border:none;padding:0;font-size:.95rem}
  table.cmp td:first-child{width:auto;font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;
    font-weight:700;font-size:1.08rem;color:var(--ink);margin-bottom:13px}
  table.cmp td + td{padding-top:11px;margin-top:11px;border-top:1px solid var(--line-soft)}
  table.cmp td[data-spalte]::before{content:attr(data-spalte);display:block;
    font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:3px}
  /* Die eigene Spalte hervorheben - sie ist die Antwort auf die Frage. */
  table.cmp td:nth-child(3){color:var(--ink)}
  table.cmp td:nth-child(3)::before{color:var(--red)}
}

.tl-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.tl-row:last-child{border-bottom:none}
@media (max-width:620px){.tl-row{grid-template-columns:1fr;gap:6px}}
.tl-time{font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;font-weight:700;font-size:1rem;color:var(--red)}
.tl-row p{color:var(--ink-soft);font-size:.96rem;margin-top:4px}

.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.step::before{counter-increment:s;content:counter(s);font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;font-weight:800;font-size:.88rem;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--red-soft);color:var(--red);margin-bottom:4px}
.step p{font-size:.94rem;color:var(--ink-soft)}

.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px)}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:620px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:.87rem;font-weight:700}
.field label .req{color:var(--red)}
.field input,.field textarea{font:inherit;font-size:.97rem;padding:12px 14px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--ground);color:var(--ink);width:100%;transition:border-color .15s}
.field input:focus,.field textarea:focus{border-color:var(--red);outline:none}
.field textarea{min-height:126px;resize:vertical}
.field .hint{font-size:.81rem;color:var(--ink-faint)}
.chipset{display:flex;flex-wrap:wrap;gap:9px}
.chipset input{position:absolute;opacity:0;width:0;height:0}
.chipset label{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--ground);cursor:pointer;font-weight:600;font-size:.92rem;transition:all .15s}
.chipset input:checked + label{border-color:var(--red);background:var(--red-soft);color:var(--red)}
.chipset input:focus-visible + label{outline:3px solid var(--red);outline-offset:2px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.87rem;color:var(--ink-soft);margin:4px 0 20px}
.consent input{margin-top:4px;width:17px;height:17px;accent-color:var(--red);flex:none}
.formnote{margin-top:15px;font-size:.84rem;color:var(--ink-faint)}
.sent{background:var(--green-soft);border:1.5px solid var(--green);border-radius:var(--r);padding:20px 22px;font-weight:600;display:flex;gap:14px;align-items:center}
.sent .fig{height:52px;width:auto;flex:none;color:var(--green)}

.cinfo h4{margin-bottom:2px}
.cinfo a{color:var(--red);font-weight:600}
.mapbox{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative;aspect-ratio:420/300;background:var(--band);width:100%;max-width:100%;min-width:0}
.mapbox svg{display:block;width:100%;height:auto}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Platzhalter, solange die Karte nicht geladen ist (siehe karte.php). */
.karte-platzhalter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:9px;padding:22px;background:var(--band)}
/* Hoehere Spezifitaet noetig: .mapbox svg zieht Bilder in der Karte auf
   volle Breite - das gilt fuer die gezeichnete Karte, nicht fuer dieses
   kleine Symbol. */
.karte-platzhalter .karte-symbol{width:34px;height:34px;color:var(--red);flex:none}
.karte-titel{font-family:Gabarito,"Segoe UI","Trebuchet MS",-apple-system,system-ui,sans-serif;
  font-weight:700;font-size:1.02rem;color:var(--ink)}
.karte-text{font-size:.84rem;line-height:1.5;color:var(--ink-soft);max-width:38ch}
.karte-extern{color:var(--ink-soft);text-decoration:underline}
.karte-extern:hover{color:var(--red)}
@media (max-width:420px){
  .karte-platzhalter{padding:16px;gap:7px}
  .karte-platzhalter .karte-symbol{width:26px;height:26px}
  .karte-text{font-size:.79rem}
  .karte-symbol{width:28px;height:28px}
}
.todo{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;background:var(--orange-soft);color:var(--orange-deep);padding:4px 10px;border-radius:6px}

details.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
details.faq + details.faq{margin-top:10px}
details.faq summary{cursor:pointer;padding:17px 21px;font-family:Karla,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.45rem;color:var(--red);font-weight:400;line-height:1;flex:none;transition:transform .2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{padding:0 21px 19px;color:var(--ink-soft);font-size:.96rem;margin:0}
/* War vorher an eine Klasse "fa" geknuepft, die der Details-Block nie erzeugt -
   die Antwort blieb unauffgerueckt und in Basisschriftgroesse stehen. */

.site-foot{background:#242A26;color:#C6CEC8;padding:clamp(42px,5vw,64px) 0 26px;position:relative;overflow:hidden}
.fgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:34px}
@media (max-width:860px){.fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
.site-foot h4{color:#fff;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:13px;opacity:.8}
.site-foot a{color:inherit;text-decoration:none;display:block;padding:4px 0;font-size:.94rem;opacity:.9}
.site-foot a:hover{opacity:1;text-decoration:underline}
.fbot{margin-top:34px;padding-top:19px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;justify-content:space-between;font-size:.85rem;opacity:.75}
/* Zugang zur WordPress-Verwaltung. Bewusst zurueckhaltend: sichtbar fuer
   den Vorstand, aber kein Blickfang fuer Eltern. */
.site-foot a.flogin{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.83rem;
  font-weight:600;opacity:1;transition:border-color .16s,background .16s}
.site-foot a.flogin:hover,.site-foot a.flogin:focus-visible{text-decoration:none;
  border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.site-foot a.flogin svg{flex:none}
@media (max-width:520px){.fbot{justify-content:flex-start}}

/* Im Entwurf war jede Seite ein verstecktes <div class="page">. In WordPress
   ist jede Seite ein eigener Aufruf, deshalb hier ohne Verstecken. */
.page{display:block}
.page.on{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Einblenden beim Scrollen. Ohne JavaScript bleibt alles sichtbar -
   Inhalte duerfen nie an einem Skript haengen. */
.rv{opacity:1;transform:none}
.js-rv .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.js-rv .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}.rv,.js-rv .rv{opacity:1;transform:none}}


/* ==========================================================================
   Bruecke zu WordPress
   Die Blockauszeichnung erzeugt zusaetzliche Huellen. Die folgenden Regeln
   sorgen dafuer, dass sie die Gestaltung aus dem Entwurf nicht stoeren.
   ========================================================================== */

/* Gruppenbloecke sollen keine eigene Breite und keinen eigenen Rand setzen -
   das macht .wrap. */
.wp-block-group.band,
.wp-block-group.site-head,
.wp-block-group.site-foot{max-width:none;margin-left:0;margin-right:0}
.wp-block-group.band{padding-left:0;padding-right:0}
/* .wrap behaelt seine eigene Breite - sie ist das Rueckgrat des Rasters. */
.wp-block-group.wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}

/* Die Blockeditor-Klasse an Ueberschriften darf die eigenen Abstaende nicht
   ueberschreiben. */
.wp-block-heading{margin:0}

/* Bilder in den Formflaechen fuellen ihre Flaeche vollstaendig aus. */
figure.ph.wp-block-image{overflow:hidden}
figure.ph.wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
figure.ph.wp-block-image figcaption{display:none}

/* Der Kopfbereich klebt oben - WordPress' Admin-Leiste einrechnen. */
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}

/* Kurzbefehl-Ausgaben duerfen keine Absatzabstaende erben. */
.site-head p, .site-foot .fgrid > div > p:first-of-type{margin-top:0}
.site-foot a{text-decoration:none}
.site-foot a:hover, .site-foot a:focus-visible{text-decoration:underline}
.wp-block-shortcode{margin:0}

/* WordPress vergibt an Kinder von Flow-Layout-Gruppen automatisch einen
   margin-top (--wp--style--block-gap, hier 24px), sobald ein Group-Block
   mehr als ein Kind hat - auch wenn die Gruppe (wie .grid, .rhythm, .steps,
   .cols, .fgrid, .plain-Stapel ...) ihren Abstand laengst selbst ueber Gap
   oder eigene Klassen regelt. Sichtbar wurde das als unterschiedlich hohe
   Kaesten (das zweite, dritte ... Element bekam oben 24px extra und wirkte
   dadurch kuerzer) und als ungleichmaessige Abstaende zwischen Ueberschrift
   und Antwort. Global abschalten - diese Seite steuert alle Abstaende selbst. */
.is-layout-flow > *,
.is-layout-constrained > *{margin-block-start:0}

/* Rueckmeldung nach dem Absenden eines Formulars */
.formmeldung{border-radius:12px;padding:16px 18px;margin-bottom:20px;font-size:.95rem;line-height:1.55}
.formmeldung.ok{background:var(--green-soft);color:var(--green-deep)}
.formmeldung.fehler{background:var(--red-soft);color:var(--red)}
.formmeldung strong{display:block;margin-bottom:3px}