/* ==========================================================================
   Waldorfkindergarten Schwäbisch Gmünd — Stylesheet
   ========================================================================== */

/* Schriften liegen lokal — kein Abruf bei Google, damit keine Besucher-IP
   an Dritte geht, bevor eine Einwilligung vorliegt. */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('../assets/fonts/TitilliumWeb-200-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/TitilliumWeb-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../assets/fonts/TitilliumWeb-200.woff2') format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/TitilliumWeb-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/TitilliumWeb-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/TitilliumWeb-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 100 900;          /* variabler Schnitt: eine Datei für alle Gewichte */
  font-display: swap;
  src: url('../assets/fonts/SourceSans3.woff2') format('woff2');
}

@font-face {
  font-family: 'Baar Zeitgeist';
  src: url('../assets/fonts/BaarZeitgeist.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Antrf';
  src: url('../assets/fonts/antrf.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Erlaubt Übergänge auf auto-Höhen — Grundlage für das weiche Aufklappen. */
  interpolate-size: allow-keywords;
  /* Einblenden des Link-Unterstrichs. Wer `transition` auf einem Link
     überschreibt, muss diese Variable mitführen — die Kurzschreibweise
     ersetzt sonst die gesamte Liste. */
  /* ---------- Schriftgrößen: neun Stufen, sonst nichts ----------
     Vorher lagen 52 Angaben im CSS, die 39 verschiedene Größen erzeugten —
     darunter zwölf Werte innerhalb von 3px, die niemand unterscheiden kann. */
  --text-hero:  clamp(1.7rem, 4vw, 3rem);      /* Hero-Zitat        */
  --text-h1:    clamp(1.9rem, 3.5vw, 2.6rem);  /* Seitentitel       */
  --text-h2:    1.5rem;   /* 24px   — Überschriften                 */
  --text-lead:  1.2rem;   /* 19,2px — Lead, Hervorhebung            */
  --text-body:  1rem;     /* 16px   — Fließtext                     */
  --text-label: .8rem;    /* 12,8px — Labels, Chips, Versalzeilen   */

  /* Zusammengelegt: Unterschiede von 1–2px waren nicht wahrnehmbar. */
  --text-h3:    var(--text-h2);
  --text-small: var(--text-body);
  --text-micro: var(--text-label);

  --unterstrich-blende: text-decoration-color .45s cubic-bezier(.25,.1,.25,1);
  /* Pfeil für externe Links als Grafik, nicht als Schriftzeichen — so sieht er
     in jeder Schrift und Größe gleich aus. */
  --pfeil-extern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 11 11 1'/%3E%3Cpath d='M4 1h7v7'/%3E%3C/svg%3E");
  /* Derselbe Duktus waagerecht, für interne Weiterlesen-Links. */
  --pfeil-intern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13'/%3E%3Cpath d='M9.4 1.4 14 6l-4.6 4.6'/%3E%3C/svg%3E");

  /* Akzentfarben — aus der Kategorie-Farbpalette (Material/Farben/kategorie-farbpalette.css) übernommen,
     statt eines eigenen, abweichenden Farbschemas */
  --color-primary: var(--nav-1);
  --color-primary-hover: var(--nav-1-active);
  --color-secondary: var(--nav-2);
  --color-secondary-hover: var(--nav-2-active);
  --color-tertiary: var(--nav-7-active);
  --color-accent-teal: var(--nav-5);
  --color-accent-violet: var(--nav-6);
  --color-bg: #F8F4F0;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  /* Auf Wunsch durchgängig so dunkel wie die Menübeschriftung: warmes
     Schwarz statt des bisherigen dunklen Braun. Gilt für Fließtext,
     Überschriften und alle Menüpunkte. */
  --color-text: #0D0A04;
  /* Baar Zeitgeist bleibt beim wärmeren Braun — die Displayschrift
     wirkt in tiefem Schwarz zu hart. */
  --color-display: #3A2E27;
  --color-text-muted: var(--color-text);
  --color-text-on-primary: #FFFFFF;
  --color-success: var(--nav-5-active);
  --color-warning: var(--nav-2);
  --color-error: var(--nav-1-active);
  --color-border: #DDD0BC;

  /* Aliase auf die bestehenden Strukturnamen im Stylesheet */
  --terracotta:      var(--color-primary);
  --terracotta-dark: var(--color-primary-hover);
  --gold:            var(--color-secondary);
  --sage:            var(--color-accent-teal);
  --sage-light:      var(--color-bg-alt);
  --rose:            var(--color-accent-violet);
  --cream:           var(--color-bg);
  --paper:           var(--color-surface);
  --ink:             var(--color-text);
  --ink-soft:        var(--color-text-muted);
  --line:            var(--color-border);

  /* Akzentfarbe der aktuellen Seite = Farbe ihres Hauptmenü-Punkts.
     Wird in partials/header-top.php pro Seite überschrieben; dieser Wert
     greift nur auf Seiten ohne Navigation (z.B. login.php). */
  --page-accent: var(--nav-1);
  --page-fill: var(--nav-1);
  --page-accent-light: var(--nav-1-light);
  --page-ink: #fff;

  /* Zwei Label-Rollen, je ein Schriftschnitt — überall gleich:
     Akzent-Label = farbige Zeile, die einen Block einleitet (Eyebrow & Verwandte)
     Meta-Label   = kleine Versalzeile für Daten, Rubriken, Kategorien */
  --label-accent-size: var(--text-h2);
  --label-accent-weight: 400;
  --label-meta-size: var(--text-label);
  --label-meta-weight: 700;
  --label-meta-spacing: .06em;
  --chip-size: var(--text-label);
  --chip-weight: 600;

  /* Zwei Stufen für kleinen Text — Bildunterschrift/Datum und kleiner Fließtext */
  --text-caption: var(--text-label);

  --font-display: 'Baar Zeitgeist', sans-serif;
  --font-hand: 'Titillium Web', sans-serif;
  --font-logo: 'Antrf', var(--font-display);
  --font-body: 'Source Sans 3', system-ui, sans-serif;

  --container: 1180px;
  --radius: 0;
  /* Fotos: keine Rundung, scharfe Kanten */
  --radius-organic-a: 0;
  --radius-organic-b: 0;
  --shadow: 0 20px 50px -20px rgba(58, 46, 39, 0.35);
  --shadow-soft: 0 4px 12px rgba(58, 46, 39, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 94px; }
[id] { scroll-margin-top: 94px; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  /* Überschriften haben ihre eigene Zeilenhöhe (1.15) und bleiben unberührt. */
  line-height: 1.68;
  /* Fängt die vollbreiten Sections ab (100vw + negativer Rand).
     Bewusst „clip" statt „hidden": hidden macht den Body zum Scroll-
     container, dann greift position:sticky nirgends mehr auf der Seite. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

/* Symbole und Auswahlfelder stehen IMMER neben der ersten Textzeile und
   schrumpfen nie — auch wenn der Text daneben umbricht. Ein mittig gesetztes
   Symbol würde sonst zwischen die Zeilen rutschen.
   align-self schlägt das align-items des Containers, gilt also überall. */
.ico,
input[type="checkbox"],
input[type="radio"] {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: .18em;
}
/* Auswahlfelder bleiben quadratisch, egal wie lang die Beschriftung ist. */
input[type="checkbox"], input[type="radio"] { aspect-ratio: 1 / 1; }
/* Die Linie liegt immer an, nur unsichtbar — so blendet sie beim Überfahren
   weich ein. Ein Wechsel von `none` auf `underline` ließe sie hart aufpoppen,
   weil text-decoration-line nicht animierbar ist. */
a{
  color: inherit;
  /* Alle Links tragen Titillium in Regular — nie fett, nirgends. */
  font-family: var(--font-hand); font-weight: 400;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .45s cubic-bezier(.25,.1,.25,1);
}
/* Auch beim Tastaturfokus — sonst sehen Menschen, die ohne Maus bedienen,
   nie einen anderen Hinweis als die Farbe. */
a:hover, a:focus-visible { text-decoration-color: currentColor; }

/* Links im Fließtext tragen die Farbe des jeweiligen Hauptmenüpunkts, damit sie
   als Links erkennbar sind — nicht erst beim Überfahren. Auf `main` begrenzt:
   der Footer steht auf dunklem Grund und behält seine hellen Links.
   Abschnitte mit eigenem Ton (Karten, Schritte) haben höhere Spezifität und
   bleiben unberührt. */
main p a, main li a, main address a, main cite a,
main dd a, main figcaption a, main .intro-text a, main .times-bar a, main .link-more {
  color: var(--page-linktext, var(--page-accent));
  /* Dauerhafter feiner Unterstrich: Farbe allein unterscheidet den Link nicht
     ausreichend vom Fließtext (nur 2,2–2,7:1). Beim Überfahren wird er kräftiger. */
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness .2s ease, var(--unterstrich-blende);
}
main p a:hover, main li a:hover, main address a:hover, main cite a:hover,
main dd a:hover, main figcaption a:hover, main .intro-text a:hover, main .times-bar a:hover, main .link-more:hover,
main p a:focus-visible, main li a:focus-visible, main .intro-text a:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
}

/* Ein Pfeil nach oben rechts kennzeichnet Links, die von der Seite wegführen.
   Automatisch an target="_blank" gehängt, damit niemand ihn von Hand setzt.
   Nur an Textlinks — Karten und Kästen tragen ihre Beschriftung selbst.
   Geschütztes Leerzeichen, damit der Pfeil nie allein umbricht. */
main p a[target="_blank"]::after,
main li a[target="_blank"]::after,
main address a[target="_blank"]::after,
main .anfahrt-links a[target="_blank"]::after,
main .intro-text a[target="_blank"]::after,
main .times-bar a[target="_blank"]::after,
main .link-card[target="_blank"] .link-url::after,
main .insta-panel[target="_blank"] .insta-handle::after,
.footer-credit a[target="_blank"]::after {
  content: "";
  display: inline-block;
  /* Auf Oberlänge der Titillium (gemessen an „d": 0,728em). Die Zeichenfläche
     der Grafik ist eng am Pfeil geschnitten, Kastengröße = sichtbare Größe. */
  width: .73em; height: .73em;
  margin-left: .28em;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-extern) no-repeat center / contain;
          mask: var(--pfeil-extern) no-repeat center / contain;
}
/* Interne Weiterlesen-Links bekommen den Pfeil auf demselben Weg wie die
   externen: als inline-block mit Maske. Dadurch läuft der Unterstrich nur
   unter dem Text durch und nicht unter dem Pfeil. */
main .link-more::after,
main .card .links a::after,
.mega-submenu--teaser .teaser-link::after {
  content: "";
  display: inline-block;
  width: .97em; height: .73em;
  margin-left: .34em;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-intern) no-repeat center / contain;
          mask: var(--pfeil-intern) no-repeat center / contain;
  transition: transform .2s ease;
}
main .link-more:hover::after,
main .card .links a:hover::after,
.mega-submenu--teaser .teaser-link:hover::after { transform: translateX(3px); }
/* Zeigt der Link nach außen, gilt der diagonale Pfeil — nicht beide. */
main .link-more[target="_blank"]::after,
main .card .links a[target="_blank"]::after { -webkit-mask-image: var(--pfeil-extern); mask-image: var(--pfeil-extern); width: .73em; }

/* Ohne Text kein Unterstrich: Icon-Links, Schaltflächen und Menüpunkte. */
.mega-item > a, .mega-submenu a, .btn, .brand, .floating-btn, .back-to-top,
.jobs-quicklinks a, .quicklinks a, .footer-social a { text-decoration: none !important; }
.link-card { text-decoration: none; }
ul { list-style: none; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Grundgrößen, damit keine Überschrift auf die Browser-Vorgabe zurückfällt
   (die lieferte H1 = 2em, H3 = 1,17em und damit Größen außerhalb der Stufen). */
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-body); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-display);
  line-height: 1.15;
  letter-spacing: 0.055em;
  margin-bottom: 1rem;
}

/* AKZENT-LABEL — farbige Zeile, die einen Block einleitet.
   Farbe kommt aus --page-accent (pro Seite in partials/header-top.php gesetzt), Schriftschnitt aus den --label-accent-* Variablen. Gilt für alle Vorkommen:
   Eyebrow, Zwischenüberschrift, Galerietitel, Ortsmarke. */
.eyebrow, .gruppen-subhead, .gal-title{
  font-family: var(--font-hand);
  font-size: var(--label-accent-size);
  font-weight: var(--label-accent-weight);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
  /* Der Akzentton ist ein Flächenton — als Text kommt das Grün der Aktuelles-Seite
     auf 2,99:1 statt der geforderten 3:1. Der seitensichere Linkton derselben
     Familie liegt bei allen sieben Seiten deutlich darüber. */
  color: var(--page-linktext, var(--page-accent));
  display: inline-block;
  margin-bottom: 0.2rem;
}

.section-head { max-width: 640px; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }
/* Haarlinie unter einer allein stehenden Überschrift — sie bindet den Titel an
   den Inhalt darunter, statt frei über der Section zu schweben. */
.section-head--unterstrichen {
  max-width: none;
  padding-bottom: .9rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: var(--text-h1); }
.section-head p { color: var(--ink-soft); margin-top: 0.9rem; font-size: var(--text-lead); }
/* Ein Lead ist die eine kurze Zeile unter der Überschrift. Stehen im Kopf
   mehrere Absätze, ist das kein Lead mehr, sondern Fließtext — dann gilt
   überall die normale Größe. Sonst läuft ein ganzer Abschnitt in Lead-Größe. */
.section-head:has(p + p) p { font-size: var(--text-body); }

section { position: relative; padding: 6rem 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* <button> erbt die Schrift nicht von selbst — sonst fällt der Absende-Knopf
     im Formular auf die Systemschrift zurück. */
  font-family: var(--font-hand);
  padding: 0.9rem 1.7rem;
  border-radius: 0;
  font-weight: 600;
  font-size: var(--text-body);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
  line-height: 1.25;
}
.btn-primary { background: var(--page-fill); color: var(--page-ink); box-shadow: 0 10px 24px -8px rgba(58,46,39,.28); }
.btn-primary:hover { filter: brightness(.86); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
/* Der dunklere Rotton derselben Familie: #C55F50 kam als Text auf Weiß nur auf
   4,10:1, --nav-1-active schafft 5,90:1. */
.btn-outline { border-color: var(--nav-1-active); color: var(--nav-1-active); background:transparent; }
.btn-outline:hover { background: var(--nav-1-active); color: #fff; transform: translateY(-2px); }
.btn-light { background: var(--paper); color: var(--page-accent); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.25); }

/* ---------- Header ---------- */
/* Kategorie-Paletten für die vollflächige Menüleiste — Look inspiriert von anthroposophie.ch */
:root {
  /* aus Material/Farben/kategorie-farbpalette.css — exakte Reihenfolge 1–8 */
  --nav-1: #C55F50; --nav-1-active: #9E4C40; --nav-1-light: #DFA79F; /* Willkommen — Rostrot */
  /* Das Menüfeld nutzt das volle Rostrot. Die übliche Schriftfarbe erreicht
     darauf nur 3,20:1 — deshalb bekommt allein dieses Feld einen dunkleren
     Beschriftungston (siehe --nav-1-menue-text, 4,83:1). */
  --nav-1-menue: var(--nav-1);
  --nav-1-menue-text: var(--color-text);   /* seit --color-text dunkel ist, keine Sonderrolle mehr */
  /* Das helle Gelb von Jobs-Eyebrow und gelbem Button — kräftiger als
     --nav-2-light, aber hell genug für dunkle Beschriftung (15,2:1). */
  --hellgelb: #F2E296;
  --nav-2: #EDDD78; --nav-2-active: #C7AC3E; --nav-2-light: #F7EFBE; /* Über uns — Zitronengelb */
  --nav-3: #AC98CC; --nav-3-active: #8570AC; --nav-3-light: #DCC9EA; /* Pädagogik — Violett */
  --nav-4: #E38F52; --nav-4-active: #BE6825; --nav-4-light: #F7CDA4; /* Gruppen — Orange */
  --nav-5: #A6C07E; --nav-5-active: #7DA050; --nav-5-light: #D2E0AF; /* Aktuelles — Grün */
  --nav-6: #E4A2AF; --nav-6-active: #B1566C; --nav-6-light: #F1CDD4; /* Jobs — Altrosa/Mauve */
  --nav-7: #93B8CB; --nav-7-active: #54819A; --nav-7-light: #CAE0E9; /* Kontakt — Blau */
  --nav-8: #DCAA6B; --nav-8-active: #8C5C2E; --nav-8-light: #EEC99B; /* Sand/Ocker */
}

#preloader {
  position: fixed; inset: 0; z-index: 9999; background: #F8F4F0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .45s ease, visibility .45s ease;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-spinner { position: relative; width: 110px; height: 110px; animation: preloaderSpin 2.2s linear infinite; }
.preloader-spinner .dot {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--c);
  transform: rotate(var(--a)) translate(46px);
  animation: preloaderDot 1.8s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes preloaderSpin { to { transform: rotate(360deg); } }
@keyframes preloaderDot {
  0%, 100% { transform: rotate(var(--a)) translate(46px) scale(.72); }
  50%      { transform: rotate(var(--a)) translate(46px) scale(1); }
}

.site-header { position: relative; }

.header-top { display:flex; align-items:center; justify-content:space-between; padding: 34px 24px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.header-top .wrap { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0; }

/* Zurückgenommener Satz rechts in der Kopfzeile. Die Kopfzeile zentriert ihre
   Kinder, dadurch steht er von selbst auf Höhe des Logo-Schriftzugs.
   Unter 900px gehört die Ecke dem Burger-Menü. */
.header-slogan {
  font-family: var(--font-hand); font-size: var(--text-label);
  /* Deutlich aufgehelltes Footer-Braun. Bewusst unter den Kontrastvorgaben
     (rund 2:1): Der Satz füllt die Ecke, er trägt keine Information, die
     jemand lesen müsste. Für Screenreader bleibt er vollwertiger Text. */
  color: color-mix(in srgb, #736A5C 50%, var(--color-bg));
  letter-spacing: .03em;
}
@media (max-width: 900px) { .header-slogan { display: none; } }

.brand { display: flex; align-items: center; gap: 18px; }
.brand svg, .brand img { height: 68px; width: auto; }
.brand-text { font-family: var(--font-logo); font-size: var(--text-h2); line-height: 1.15; color: var(--color-text); }
.brand-text small { display:block; font-family: var(--font-logo); font-size: var(--text-label); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--color-text-muted); }

.mega-nav { display:flex; width:100%; background: var(--color-surface); box-shadow: 0 4px 14px -8px rgba(0,0,0,.25); position: sticky; top: 0; z-index: 100; }
.mega-item { position:relative; display:flex; flex: 1 1 0; }
.mega-toggle { display:none; width:44px; flex-shrink:0; align-items:center; justify-content:center; background: var(--nav-color); border:none; color: var(--color-text); cursor:pointer; }
.mega-toggle svg { width:16px; height:16px; transition: transform .2s ease; }
.mega-item.open .mega-toggle svg { transform: rotate(180deg); }
.mega-item > a {
  display:flex; align-items:center; justify-content:center; text-align:center; height:100%;
  flex: 1 1 auto; width:100%; min-width:0;
  min-height: 82px; padding: 1rem .95rem; background: var(--nav-color); color: var(--nav-schrift, var(--color-text));
  font-family: var(--font-hand); font-size: var(--text-small); font-weight: 400; letter-spacing: .05em; line-height:1.25;
  text-transform: uppercase;
  border-right: 1px solid rgba(0,0,0,.06); box-sizing: border-box;
}
.mega-item:last-of-type > a { border-right: none; }
/* Active-Balken. Beide Lagen werden über "top" ausgedrückt (nicht über top/bottom +
   transform), damit der Wechsel beim Scrollen animierbar ist. */
.mega-item::after {
  content:""; position:absolute; left:0; top:100%; width:100%; height:10px;
  background: transparent; z-index:85; pointer-events:none;
  transition: background-color .2s ease;
}
.mega-item:hover::after, .mega-item.open::after, .mega-item.active::after { background: var(--nav-color-active); }

.mega-submenu {
  position:absolute; top:100%; left:0; width:100%; background: var(--nav-color-light);
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.3); padding: 0 1.4rem;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 90;
}
.mega-item.open .mega-submenu,
.mega-item:hover .mega-submenu { opacity:1; visibility:visible; transform:none; }
/* Alle Untermenüs im Ton des Jobs-Teasers: Haarlinien statt Kästen, ruhige
   Typografie. Beim Überfahren blendet der Punkt weich in den dunklen Menüton —
   kein flächiger Balken, der die Schrift verschluckt. */
.mega-submenu a, .mega-submenu .submenu-heading {
  display:block; padding: .62rem 0; line-height: 1.3rem;
  font-family: var(--font-hand); font-size: var(--text-small); color: var(--color-text);
  transition: color .2s ease;
}
/* Haarlinien trennen Gruppen und einzelne Punkte, aber nie innerhalb einer
   Gruppe: Was zwischen zwei Linien unter einer Überschrift steht, gehört zu ihr. */
.mega-submenu > a, .mega-submenu > .submenu-group { border-top: 1px solid rgba(43,36,20,.16); }
.mega-submenu > *:first-child { border-top: none; }
.submenu-group a { padding-block: .34rem; }
.submenu-group a:last-child { padding-bottom: .62rem; }
.submenu-group .submenu-heading { padding-bottom: .18rem; }

/* Jobs-Untermenü: statt der Einzelstellen ein knapper Teaser, im Ton des
   Jobs-CTA auf der Startseite. Trennlinien statt Kästen. */
.mega-submenu--teaser { padding-block: 1.2rem 1.1rem; }
.mega-submenu--teaser .teaser-eyebrow {
  display:block; font-family: var(--font-body); font-size: var(--text-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-text);
  padding-bottom: .6rem; border-bottom: 1px solid rgba(43,36,20,.16);
}
.mega-submenu--teaser .teaser-lead{
  margin: .8rem 0 .85rem; font-family: var(--font-hand); font-size: var(--text-small);
  line-height: 1.45; color: var(--color-text);
}
.mega-submenu--teaser .teaser-link {
  display:inline-block; padding: .7rem 0 0;
  font-size: var(--text-label); letter-spacing: .04em; color: var(--color-text);
  border-top: 1px solid rgba(43,36,20,.16); width: 100%;
}
.mega-submenu--teaser .teaser-link:hover { color: var(--nav-color-active); }

.mega-submenu > *:first-child { padding-top: 1.1rem; }
.mega-submenu > *:last-child { padding-bottom: 1.1rem; }
.mega-submenu .submenu-heading {
  font-size: var(--label-meta-size); font-weight: var(--label-meta-weight); letter-spacing: var(--label-meta-spacing); text-transform: uppercase; color: var(--nav-color-active);
}
.mega-submenu a:hover { color: var(--nav-color-active); }
/* Klammerzusätze im Untermenü nicht auseinanderreißen. */
.mega-submenu .zusammen { white-space: nowrap; }

/* Wenn unter der Nav nicht genug Platz ist (z.B. direkt unter dem Hero), öffnen Active-Linie & Submenü nach oben */
.mega-nav.flip-up .mega-submenu {
  top:auto; bottom:100%; transform: translateY(6px);
  box-shadow: 0 -16px 30px -14px rgba(0,0,0,.3);
}
.mega-nav.flip-up .mega-item::after { top: -10px; }
/* Erst animieren, wenn die Nav einmal ausgerichtet ist — sonst rutscht der Balken
   beim Seitenaufbau sichtbar von unten nach oben. */
.mega-nav.nav-ready .mega-item::after {
  transition: background-color .2s ease, top .4s cubic-bezier(.4,0,.2,1);
}
.mega-nav.flip-up .mega-item.open .mega-submenu,
.mega-nav.flip-up .mega-item:hover .mega-submenu { transform: none; }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:110; }
.nav-toggle span { width: 26px; height: 2px; background: var(--color-text); transition: all .3s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  height: calc(100vh - 219px);
  min-height: 420px;
  position: relative;
  isolation: isolate;
  /* Hebt den Hero über die folgende Section, damit das Badge über der Unterkante
     liegen kann statt dahinter zu verschwinden. */
  z-index: 1;
}
.hero-bg { position: absolute; inset:0; z-index:-2; overflow:hidden; }
/* Buntes Aquarell aus allen Palettenfarben — sichtbar, solange die Hero-Bilder laden */
/* Im Hero liegt weiße Schrift auf dem Aquarell — deshalb kräftiger und etwas
   dunkler als die gemeinsame Definition, ohne sie für andere Flächen zu ändern. */
.hero-bg::before {
  content:""; position:absolute; inset:-130px; z-index:-2; pointer-events:none;
  background: var(--aquarell-bg);
  filter: url(#aquarell-bleed-hero) saturate(1.45) brightness(.84);
}
.hero-bg img {
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover; transform: scale(1.02);
  opacity:0; animation-name: herofade; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  will-change: opacity;
}
/* Abdunkler blendet mit den Bildern ein, damit das Aquarell zu Beginn unverfälscht wirkt */
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(217,165,100,.28) 0%, rgba(130,84,42,.38) 100%);
  z-index:-1;
  opacity: 0;
  animation: heroOverlayIn 2.6s ease-in-out 2.5s forwards;
}
@keyframes heroOverlayIn { to { opacity: 1; } }
.hero-quote {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
}
.hero-quote h1 {
  color: #fff;
  font-size: var(--text-hero);
  line-height: 1.4;
  margin: 0;
  max-width: 920px;
  text-shadow: 0 2px 10px rgba(115,106,92,.6), 0 10px 46px rgba(115,106,92,.5);
}
.hero-quote .q-line {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  animation: heroQuoteIn .9s ease forwards;
}
@keyframes heroQuoteIn { to { opacity: 1; transform: none; } }
.hero-quote cite {
  display: block; margin-top: 1.1rem;
  color: rgba(255,255,255,.85);
  font-family: var(--font-body); font-size: var(--text-label); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; animation: heroQuoteIn .9s ease forwards; animation-delay: 3.6s;
}
.hero-actions { display:flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Intro / Willkommen ---------- */
.intro { background: var(--paper); }
.intro-grid {
  display:grid; grid-template-columns: 4fr 3fr; gap: 7rem; align-items:center;
  width: 100vw; position: relative; left: 50%; margin-left: -50vw;
}
.intro-copy {
  padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px));
}
/* Spiegelbildlich zur linken Spalte: ohne diesen Einzug lief der Zahlenkasten
   bis an den Bildschirmrand, während alles andere auf der Fluchtlinie bleibt. */
.intro-right {
  padding-right: max(24px, calc((100vw - 1180px) / 2 + 24px));
}
/* Auf schmalen Schirmen beidseitig einrücken, sonst läuft der Text rechts an den Rand */
@media (max-width: 980px) {
  .intro-copy { padding-left: 24px; padding-right: 24px; }
  .intro-right { padding-left: 24px; padding-right: 24px; }
}
.intro-copy .eyebrow { margin-bottom: 1rem; }
.intro-copy h2 { line-height: 1.28; margin-bottom: 1.6rem; }
.intro-lead{
  font-size: var(--text-lead); color: var(--color-text); font-family: var(--font-hand); font-weight: 700;
  margin-bottom: 2.2rem;
}
.intro-text p { margin-bottom: 1.2rem; color: var(--ink-soft); }

/* Der Badge verweist auf das CTA-Band zu Großdeinbach und trägt deshalb
   dessen Farben: den Rostrot-Verlauf außen, Hellblau als Gegenpol innen. */
.welcome-badge {
  position: absolute; top: -105px; right: 28px; width: 210px; height: 210px; z-index: 6;
  color: var(--nav-1); display: block;
  --badge-blau: #fff;
}
/* display:block, sonst hängt das SVG als Inline-Element auf der Grundlinie und
   die Unterlänge macht den Kreis ein paar Pixel höher als breit. */
.welcome-badge svg { width: 100%; height: 100%; display: block; }
.welcome-badge .badge-spin { transform-box: fill-box; transform-origin: center; animation: badgeSpin 18s linear infinite; }
.welcome-badge .badge-ring-line { stroke: none; }
.welcome-badge .badge-text { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: 3px; fill: var(--nav-1); text-transform: uppercase; dominant-baseline: central;
}
.welcome-badge .badge-bullet { font-family: var(--font-display); font-weight: 600; font-size: 30px; fill: var(--nav-1); dominant-baseline: central;
}
.welcome-badge .badge-fill { fill: var(--nav-1); }
.welcome-badge .badge-fill-text {
  font-family: var(--font-body); font-weight: 600; font-size: 13.7px; line-height: 1;
  fill: var(--badge-blau); text-transform: none; letter-spacing: normal;
}
.welcome-badge .badge-fill-sub { font-size: 12.6px; font-weight: 500; fill: var(--badge-blau); }
@keyframes badgeSpin { to { transform: rotate(-360deg); } }

/* Ohne Schatten: der Kasten steht als ruhige Fläche, der Abstand zum Rand
   grenzt ihn ab. Der Schatten hing an der Spalte, nicht am Kasten. */
.intro-right { display: flex; flex-direction: column; }
/* Die Schaltflächen stehen unter dem Zahlenkasten. In der schmaleren Spalte
   passen zwei nebeneinander — der Hauptbutton nimmt die ganze Zeile. */
.intro-aktionen { margin-top: 1.6rem; gap: .7rem; }
.intro-aktionen .btn { flex: 1 1 calc(50% - .35rem); justify-content: center; text-align: center; }
.intro-aktionen .btn-primary { flex-basis: 100%; }
@media (max-width: 560px) {
  .intro-aktionen .btn { flex-basis: 100%; }
}
.intro-news-box {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .9rem;
  background: var(--nav-5-light); color: var(--color-text); min-height: 244px;
  padding: 3.2rem 2.6rem 2.4rem; transition: background .2s ease;
}
.intro-news-box:hover { background: var(--nav-5-light); filter: brightness(.96); }
.intro-news-box .intro-news-label {
  font-family: var(--font-hand); font-size: var(--text-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--nav-5-active); color: #fff; padding: .3rem .7rem;
}
.intro-news-box b {
  font-family: var(--font-display); font-weight: 600; color: var(--color-display);
  font-size: var(--text-h2); line-height: 1.3;
}
.intro-news-box .intro-news-date { font-size: var(--text-caption); color: var(--ink-soft); }
.intro-highlight {
  background: var(--nav-1-light); color: var(--color-text);
  padding: 3.2rem 2.6rem 2.4rem;
  display: flex; flex-direction: column; justify-content: center;
}
.intro-highlight b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-h2); line-height: 1.3; color: var(--color-display); margin-bottom: 1.1rem;
}
.intro-highlight p { font-size: var(--text-body); color: var(--ink-soft); max-width: 380px; }

/* Zarter Rotton der Seitenfarbe statt des Jobs-Rosa. */
/* Ohne Fläche: die Zahlen und die Haarlinien tragen den Kasten allein. */
/* Ohne seitliches Polster — so laufen die Trennlinien der Liste auf
   dieselbe Breite wie die Schaltflächen darunter. */
.intro-stats-box { padding: 2rem 0 2.2rem; }
/* Wert links, Erläuterung rechts — wie die Zeitleiste bei „Geschichte“.
   Die erste Spalte richtet sich am längsten Wert aus, damit die Erläuterungen
   aller Zeilen auf einer Fluchtlinie beginnen. */
.intro-stats-box .intro-stats { display: grid; grid-template-columns: max-content 1fr; }
/* Dieselben Größen wie die Zeitleiste bei „Geschichte" */
.intro-stats-box .stat b { font-family: var(--font-display); font-size: var(--text-lead); color: var(--page-accent); }
.intro-stats-box .stat span { font-size: var(--text-body); color: var(--ink-soft); }

/* Aufbau wie die Zeitleiste bei „Geschichte": Wert links, Erläuterung rechts,
   Haarlinie dazwischen. */
.intro-stats .stat {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  column-gap: 1.2rem; align-items: baseline;
  padding: .9rem 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
/* Zeilen ohne kurzen Zahlenwert: Bezeichnung darüber statt daneben. */
.intro-stats .stat--block { display: block; }
.intro-stats .stat--block b { margin-bottom: .15rem; }
.intro-stats .stat:last-child { border-bottom: none; padding-bottom: 0; }
.intro-stats .stat:first-child { padding-top: 0; }
.stat b { display:block; font-family: var(--font-display); font-size: var(--text-h2); color: var(--page-accent); }
.stat span { font-size: var(--text-caption); color: var(--ink-soft); }

/* ---------- CTA: Freie Plätze Großdeinbach ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-dark) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-top: 9rem;
}
.cta-band::before {
  content:""; position:absolute; inset:0; opacity:.12;
  background-image: radial-gradient(circle at 20% 20%, #fff 0, transparent 45%), radial-gradient(circle at 85% 75%, #fff 0, transparent 40%);
}
/* AUSNAHME von der Seitenfarb-Regel: Auf dem rostroten Grund sitzen Untertitel,
   Aufzählungspunkte und Buttons bewusst in Hellblau als Gegenpol. Kundenwunsch.
   Nicht auf --page-accent-light zurückstellen. */
.cta-band { --cta-akzent: var(--nav-7-light); --cta-fill: var(--nav-7-light); }
.cta-grid { position:relative; display:grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items:center; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(155,224,138,.28);} 50%{ box-shadow:0 0 0 8px rgba(155,224,138,.12);} }
.cta-text h2 { color:#fff; font-size: var(--text-h1); margin-bottom:.4rem; hyphens:manual; }
.cta-text > p.cta-subtitle { color: var(--cta-akzent); font-size: var(--text-body); font-weight:600; margin-bottom:1rem; }
.cta-text > p { color: rgba(255,255,255,.92); font-size: var(--text-lead); margin-bottom: 1.6rem; max-width: 480px; }
.cta-facts { display:grid; grid-template-columns: repeat(2,1fr); gap: .9rem 2rem; margin-bottom: 2rem; }
.cta-facts li { display:flex; gap:.7rem; font-size: var(--text-body); align-items:flex-start; min-width:0; overflow-wrap:anywhere; }
.cta-facts li .dot { flex-shrink:0; width:12px; height:12px; border-radius:50%; background: var(--cta-akzent); margin-top:6px; }
.cta-actions { display:flex; gap: 1rem; flex-wrap:wrap; }
/* Fläche bleibt hellblau (Kundenwunsch), aber weiß darauf ergab nur 2,11:1 —
   die dunkle Beschriftung schafft 6,22:1. */
.cta-actions .btn-light { background: var(--cta-fill); color: var(--color-text); }
.cta-actions .btn-light:hover { filter: brightness(.9); }
.cta-actions .btn-ghost { border-color: var(--cta-akzent); color: var(--cta-akzent); }
.cta-actions .btn-ghost:hover { background: var(--cta-akzent); color: var(--color-text); }
.cta-media { position:relative; border-radius: var(--radius-organic-b); box-shadow: 0 25px 60px -20px rgba(0,0,0,.45); aspect-ratio: 3/4; }
.cta-slider { position:absolute; inset:0; border-radius: inherit; overflow:hidden; }
.cta-slider img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1s ease-out; will-change: opacity;
}
.cta-slider img.is-active { opacity:1; }
.cta-slider-nav { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:5; display:flex; gap:.5rem; }
.cta-slider-nav button {
  width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background: rgba(255,255,255,.6); transition: background .2s ease, transform .2s ease;
  box-shadow: 0 0 4px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.35);
}
.cta-slider-nav button:hover { background: rgba(255,255,255,.85); }
.cta-slider-nav button.active { background:#fff; transform: scale(1.2); }
/* Auf dem CTA ist der Kreis hellblau — die Schrift darin muss dunkel sein. */
.cta-media .welcome-badge { color: var(--nav-7-light); --badge-blau: var(--color-text); }
.cta-media .welcome-badge .badge-text,
.cta-media .welcome-badge .badge-bullet,
.cta-media .welcome-badge .badge-fill { fill: var(--nav-7-light); }
.cta-media .welcome-badge .badge-text,
.cta-media .welcome-badge .badge-bullet { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

/* ---------- Jobs-CTA (Startseite) ---------- */
/* AUSNAHME von der Seitenfarb-Regel: Eyebrow und Trenner tragen hier das Hellgelb
   des Buttons, damit die Section als eigener Auftritt liest. Kundenwunsch. */
.jobs-cta {
  /* Hellgelbe Aquarellfläche, Akzente in Altrosa. */
  --jobs-rosa: var(--nav-6-active);
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, #F9F1CB, #F4E9AE);
  text-align:center;
}
.jobs-cta::before {
  content:""; position:absolute; inset:-120px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 18% 14%, rgba(237,221,120,.82), transparent 64%),
    radial-gradient(ellipse 52% 48% at 52% 8%,  rgba(244,232,158,.76), transparent 64%),
    radial-gradient(ellipse 55% 50% at 84% 24%, rgba(240,226,138,.8),  transparent 64%),
    radial-gradient(ellipse 65% 60% at 32% 88%, rgba(246,236,170,.8),  transparent 64%),
    radial-gradient(ellipse 50% 46% at 70% 66%, rgba(238,224,132,.72), transparent 64%),
    radial-gradient(ellipse 46% 44% at 92% 86%, rgba(228,162,175,.42), transparent 66%),
    radial-gradient(ellipse 45% 40% at 55% 48%, rgba(243,231,152,.64), transparent 68%),
    linear-gradient(160deg, #F9F1CB, #F4E9AE);
  filter: url(#aquarell-bleed-b);
}
.jobs-cta::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.jobs-cta-inner { max-width: 720px; margin-inline:auto; position: relative; }
.jobs-cta .eyebrow { color: var(--jobs-rosa); }
.jobs-cta h2 { color: var(--color-text); font-size: var(--text-h1); margin-bottom:2.2rem; }
.jobs-cta > .wrap > p { color: var(--color-text); font-size: var(--text-body); margin-bottom: 0; }
/* Der Hervorhebungs-Absatz braucht trotzdem Luft nach unten zum Button —
   höhere Spezifität, sonst gewinnt die Regel darüber. */
.jobs-cta > .wrap > p.jobs-cta-highlight { margin-bottom: 2.6rem; }

/* Hervorgehobener Absatz im Jobs-CTA. */
.jobs-cta .jobs-cta-highlight {
  max-width: 30em;
  margin: 0 auto 2.2rem;
  font-size: var(--text-lead);
}
@media (max-width: 600px) {
  .jobs-cta .jobs-cta-highlight { font-size: var(--text-lead); margin: 0 auto 1.8rem; }
}
.jobs-cta .cta-actions { justify-content:center; }
/* Altrosa-Knopf auf der gelben Fläche — weiße Beschriftung, 4,75:1.
   Beim Überfahren dunkler, damit die Fläche nicht heller wird als der Grund. */
.btn-yellow { background: var(--nav-6-active); color: #fff; }
.btn-yellow:hover { background: #8E4356; color:#fff; transform: translateY(-2px); }

/* ---------- Mood-Streifen (Platzhalter-Bildwelt Kinder & Spielumgebungen) ---------- */
/* SVG-Filter-Definitionen liegen unsichtbar im DOM */
.svg-filter-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- Aquarell-Flächen (wiederverwendbar) ----------
   Nutzung: Klasse .aquarell auf ein Element setzen.
   Deckkraft bei Bedarf über --aquarell-staerke abschwächen (0–1). */
:root {
  /* Zarte Aquarell-Waschung: drei große, weiche Farbfelder auf fast weißem Grund.
     Bewusst hell gehalten, damit Text darauf ruhig steht. */
  /* Viele überlagerte Farbfelder über die ganze Fläche verteilt — nicht in den
     Ecken geparkt, sonst wirkt es wie vier Farbflecken statt wie eine Waschung.
     Gewichtung warm: Gelb und Rosé tragen, Flieder und Apricot stützen,
     Blau und Grün nur vereinzelt und voneinander getrennt (sonst wird Grün matschig). */
  --aquarell-bg:
    radial-gradient(ellipse 48% 44% at 10% 12%, rgba(242,220,132,.72), transparent 58%),
    radial-gradient(ellipse 44% 48% at 34% 6%,  rgba(231,176,187,.68), transparent 58%),
    radial-gradient(ellipse 52% 44% at 62% 14%, rgba(199,182,222,.66), transparent 58%),
    radial-gradient(ellipse 42% 46% at 88% 8%,  rgba(190,217,231,.62), transparent 58%),
    radial-gradient(ellipse 50% 48% at 16% 55%, rgba(178,212,146,.7),  transparent 58%),
    radial-gradient(ellipse 44% 42% at 45% 48%, rgba(244,228,148,.66), transparent 58%),
    radial-gradient(ellipse 48% 50% at 78% 52%, rgba(232,182,193,.66), transparent 58%),
    radial-gradient(ellipse 42% 44% at 96% 42%, rgba(186,215,158,.6),  transparent 58%),
    radial-gradient(ellipse 52% 44% at 22% 92%, rgba(201,184,223,.62), transparent 58%),
    radial-gradient(ellipse 46% 48% at 55% 96%, rgba(243,226,146,.7),  transparent 58%),
    radial-gradient(ellipse 48% 44% at 86% 90%, rgba(182,213,150,.64), transparent 58%),
    radial-gradient(ellipse 40% 42% at 70% 74%, rgba(233,186,196,.58), transparent 58%),
    linear-gradient(155deg, #FCF7EF, #F3F7F4);
}
.aquarell {
  position: relative; isolation: isolate; overflow: hidden;
  content-visibility: auto; contain-intrinsic-size: auto 500px;
}
.aquarell::before {
  content:""; position:absolute; inset:-130px; z-index:-2; pointer-events:none;
  opacity: var(--aquarell-staerke, 1);
  background: var(--aquarell-bg);
  filter: url(#aquarell-bleed-hero);
}
.aquarell::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.13; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sections mit Aquarell-Filter erst rendern, wenn sie in Sichtweite kommen.
   contain-intrinsic-size reserviert die Höhe, damit die Scrollbar nicht springt. */
.mood-band, .jobs-cta, .anfahrt {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* Ruhige Fläche: Farbe bleibt den beiden Handlungsaufrufen vorbehalten.
   Die Bilder tragen die Section, der Hintergrund hält sich zurück. */
.mood-band {
  --mood-gruen: #4E6431;   /* muss auch auf dem grünen Aquarell tragen */
  --mood-gruen-fill: var(--nav-5);
  position: relative; isolation: isolate; overflow: hidden;
  /* Zartes Aquarell-Grün — deutlich blasser als bei den wiederkehrenden Terminen,
     damit die Bilder darunter die Aufmerksamkeit behalten. */
  background: linear-gradient(158deg, #E9F0DC, #F4F7EA);
  padding-top: 3.5rem; padding-bottom: 5rem;
}
.mood-band::before {
  content:""; position:absolute; inset:-120px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 56% 50% at 16% 14%, rgba(166,192,126,.34), transparent 64%),
    radial-gradient(ellipse 48% 44% at 52% 6%,  rgba(210,224,175,.4),  transparent 64%),
    radial-gradient(ellipse 52% 46% at 86% 22%, rgba(178,200,138,.3),  transparent 64%),
    radial-gradient(ellipse 58% 54% at 26% 88%, rgba(190,210,150,.32), transparent 64%),
    radial-gradient(ellipse 44% 40% at 78% 74%, rgba(233,225,150,.26), transparent 64%),
    linear-gradient(158deg, #E9F0DC, #F4F7EA);
  filter: url(#aquarell-bleed-hero);
}
.mood-head { text-align:center; max-width: 620px; margin: 0 auto 2.4rem; color: var(--color-text); }
/* Grün-Ausnahme (siehe .mood-band): Eyebrow, Überschrift und Button tragen hier Grün */
.mood-head .eyebrow { color: var(--mood-gruen); }
.mood-head h3 { color: var(--mood-gruen); font-size: var(--text-h3); margin-bottom: .5rem; }
.mood-head p { color: var(--ink-soft); font-size: var(--text-body); }
.mood-band .btn-ghost { border-color: var(--mood-gruen); color: var(--mood-gruen); }
.mood-band .btn-ghost:hover { background: var(--mood-gruen-fill); color: var(--color-text); }
.mood-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; transition: opacity .7s ease; }
/* Bilder erst zeigen, wenn die Cookie-Abfrage beantwortet ist */
html.cookie-offen .mood-grid { opacity: 0; }
/* Auf schmalen Schirmen reicht der Banner-Kasten bis an die festen Schaltflächen
   unten rechts. Solange die Abfrage offen ist, treten sie zurück. */
/* Bei offener Menü-Schublade würde das Banner die unteren Menüpunkte verdecken.
   Es tritt zurück und kommt wieder, sobald das Menü geschlossen ist. */
body:has(.mega-nav.open) .cookie-banner { opacity: 0; visibility: hidden; pointer-events: none; }

.mood-strip { position:relative; height: 480px; border-radius: var(--radius-organic-a); overflow:hidden; box-shadow: 0 25px 60px -25px rgba(0,0,0,.5); }
.mood-grid .mood-strip:nth-child(2) { border-radius: var(--radius-organic-b); }
.mood-strip img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation-name: moodfade; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  will-change: opacity;
}
.mood-strip::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(20,18,12,.35) 100%);
}
@keyframes moodfade {
  0%      { opacity: 0; }
  8%      { opacity: 1; }
  26%     { opacity: 1; }
  30%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes sliderfade {
  0%      { opacity: 0; }
  6%      { opacity: 1; }
  21%     { opacity: 1; }
  24%     { opacity: 0; }
  100%    { opacity: 0; }
}
/* Fünf Bilder, Versatz 20% des Zyklus. Ein- und Ausblenden überlappen sich,
   damit nie eine Lücke entsteht: Bild N blendet 20–26% aus, während N+1 0–6% einblendet. */
@keyframes herofade {
  0%      { opacity: 0; }
  6%      { opacity: 1; }
  20%     { opacity: 1; }
  26%     { opacity: 0; }
  100%    { opacity: 0; }
}
@media (max-width: 980px) {
  .mood-grid { grid-template-columns: 1fr 1fr; }
  .mood-grid .mood-strip:last-child { display:none; }
}
@media (max-width: 760px) {
  /* 11) Statt drei überblendender Streifen ein einziges Band zum Durchwischen.
     Die Bilder werden dafür nebeneinander gelegt und die Überblendung gestoppt. */
  .mood-grid {
    display:flex; grid-template-columns:none; gap:.6rem;
    align-items:flex-start;          /* sonst werden die Bilder auf Zeilenhöhe gestaucht */
    overflow-x:auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width:none;
    margin-inline: -24px; padding-inline: 24px;
  }
  .mood-grid::-webkit-scrollbar { display:none; }
  .mood-strip {
    display:flex; flex-direction:row; position:static; align-items:flex-start;
    height:auto; box-shadow:none; overflow:visible; flex: 0 0 auto; gap:.6rem;
  }
  .mood-strip::after { display:none; }
  .mood-strip img {
    position:static; animation:none !important; opacity:1 !important;
    flex: 0 0 auto; width: 78vw; max-width: 320px; aspect-ratio: 2 / 3; height:auto;
    align-self: flex-start;
    scroll-snap-align: center; box-shadow: 0 18px 40px -22px rgba(0,0,0,.45);
  }
  .mood-grid .mood-strip:last-child { display:flex; }
  .mood-strip { height: 320px; }
}

/* ---------- Pädagogische Grundlagen ---------- */
.paedagogik-grundlagen .section-head { max-width: 820px; }
/* Auf der Gruppen-Seite sind die Einleitungen echter Fließtext,
   keine kurze Lead-Zeile. */
.gruppen-hero .section-head p, .standorte .section-head p { font-size: var(--text-body); }
.paedagogik-grundlagen > .wrap > p { max-width: 820px; color: var(--ink-soft); margin-top: 1.6rem; }
.grundlagen-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2.2rem 0; box-shadow: var(--shadow); }
.rhythmus-grid {
  /* Das Bild ist Beleg, nicht Hauptsache — feste, ruhige Größe statt halber
     Spaltenbreite. Keine Linien: die weiße Textfläche grenzt schon ab. */
  display:grid; grid-template-columns: 300px 1fr; gap: 0;
  align-items: stretch; margin-top: 3rem;
}
/* Weiße Fläche in exakt der Höhe des Bildes — die Zeile wird vom quadratischen
   Bild bestimmt, der Text sitzt darin mittig. */
.rhythmus-text {
  background: var(--paper); padding: 2rem 2.4rem;
  display: flex; flex-direction: column; justify-content: center;
}
.rhythmus-text .eyebrow { margin-bottom: .7rem; }
/* Spiegelverkehrt: Text links, Bild rechts. Die Fläche wird beige, weil
   dieser Abschnitt auf Weiß steht und sich sonst nicht abhebt. */
.rhythmus-grid--bild-rechts { grid-template-columns: 1fr 300px; }
.rhythmus-grid--bild-rechts .rhythmus-bild { order: 2; }
.rhythmus-grid--bild-rechts .rhythmus-text { order: 1; background: var(--color-bg); }
@media (max-width: 900px) {
  .rhythmus-grid--bild-rechts { grid-template-columns: 1fr; }
  .rhythmus-grid--bild-rechts .rhythmus-bild { order: 1; }
  .rhythmus-grid--bild-rechts .rhythmus-text { order: 2; }
}
/* Die weiße Fläche läuft bis zum Satzspiegelrand, der Text darin bleibt auf
   lesbarer Zeilenlänge. */
.rhythmus-text > * { max-width: 640px; }
@media (max-width: 900px) {
  .rhythmus-text { padding: 1.6rem 1.6rem 1.8rem; }
}
.rhythmus-bild { margin:0; }
.rhythmus-bild img, .mood-quadrat img { width:100%; height:auto; display:block; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: 0 18px 44px -24px rgba(43,36,20,.45); }
.mood-quadrat { margin: 0; }
/* Text links, quadratisches Moodbild rechtsbündig am Satzspiegelrand. */
.ernaehrung-grid {
  display: grid; grid-template-columns: minmax(0, 46rem) 300px;
  justify-content: space-between; gap: 3rem; align-items: center;
}
@media (max-width: 900px) {
  .ernaehrung-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ernaehrung-grid .mood-quadrat { max-width: 300px; }
}
.grundlagen-grid > div { padding: 2.4rem 2.4rem 2.6rem; }
.grundlagen-grid > div:nth-child(1) { background: var(--nav-3-light); border-top: 30px solid var(--nav-3-active); }
.grundlagen-grid > div:nth-child(2) { background: var(--nav-4-light); border-top: 30px solid var(--nav-4-active); }
.grundlagen-grid h3 { font-size: var(--text-lead); margin-bottom: 1.1rem; color: var(--color-text); }
.grundlagen-grid ul { display:flex; flex-direction:column; gap:.6rem; }
.grundlagen-grid li { position:relative; padding-left:1.2rem; color: var(--ink-soft); }
.grundlagen-grid > div:nth-child(1) li::before { content:"—"; position:absolute; left:0; color: var(--nav-3-active); }
.grundlagen-grid > div:nth-child(2) li::before { content:"—"; position:absolute; left:0; color: var(--nav-4-active); }

/* ---------- Leitbild / Pädagogik ---------- */
.leitbild { background: var(--paper); }
/* Hervorgehobener Leitsatz innerhalb eines Textblocks: helle Fläche auf der
   Aquarellsection, darüber ein kurzer waagerechter Akzentstrich. */
/* Der Leitsatz steht im Fließtext, nicht in einem Kasten: Der kurze farbige
   Strich darüber trägt die Auszeichnung allein. Ohne Kastenfläche entfällt
   auch der Einzug — der Absatz beginnt auf derselben Kante wie der Text. */
.leitsatz {
  position: relative;
  margin: 2.4rem 0 1.8rem;
  padding: 1.4rem 0 0;
}
.leitsatz::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 64px; height: 4px; background: var(--page-accent);
}
.intro-text p.leitsatz {
  font-family: var(--font-hand); font-weight: 600;
  font-size: var(--text-lead); line-height: 1.5;
  color: var(--color-text);
}
/* Hervorhebung ohne Kasten: der Absatz bleibt im Fließtext stehen, wird aber
   größer und in Titillium gesetzt. Steht dadurch heraus, ohne den Lesefluss
   zu unterbrechen. */
.section-head p.hervor, .intro-text p.hervor {
  font-family: var(--font-hand); font-weight: 600;
  font-size: var(--text-lead); line-height: 1.5;
  color: var(--color-text);
}
/* Haarlinie zwischen Titel und Hervorhebung — sie trennt die beiden, ohne
   dass der Absatz einen Kasten braucht. */
.section-head p.hervor { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.5rem; }
@media (max-width: 700px) {
  .leitsatz { padding: 1.7rem 1.4rem 1.4rem; }
  .leitsatz::before { left: 1.4rem; }
}
.leitbild-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items:start; }
.leitbild-lead { position:relative; }
.leitbild-quote, .quote-mark{
  position:relative; isolation:isolate;
  font-family: var(--font-hand); font-style: italic; font-weight:200;
  font-size: var(--text-h1); line-height:1.5; color: var(--color-text);
}
/* Das Zitat-Icon soll immer ganz hinten liegen. Es ragt nach oben über das Zitat
   hinaus; ohne diese Regel überdeckt es Elemente, die im Quelltext davor stehen
   (z.B. den Eyebrow), weil die spätere Box später gezeichnet wird. */
.leitbild-quote, .quote-mark { z-index: 0; }
.leitbild-lead > *, .section-head > *, .gem-copy > *, .page-hero .wrap > * { position: relative; z-index: 1; }
.leitbild-lead > .leitbild-quote, .section-head > .quote-mark,
.gem-copy > .quote-mark, .page-hero .wrap > .quote-mark { z-index: 0; }

.leitbild-quote::before, .quote-mark::before {
  content:""; position:absolute; top:-25px; left:-1em; z-index:-1; width:3.86em; height:2.73em;
  background-color: var(--gold); opacity:.55; pointer-events:none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cpath d='M18 0C7 0 0 9 0 20c0 9 5 16 13 19-1 9-7 18-13 24l5 5c13-7 22-20 22-36C27 12 24 0 18 0Z'/%3E%3Cpath d='M63 0C52 0 45 9 45 20c0 9 5 16 13 19-1 9-7 18-13 24l5 5c13-7 22-20 22-36C72 12 69 0 63 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cpath d='M18 0C7 0 0 9 0 20c0 9 5 16 13 19-1 9-7 18-13 24l5 5c13-7 22-20 22-36C27 12 24 0 18 0Z'/%3E%3Cpath d='M63 0C52 0 45 9 45 20c0 9 5 16 13 19-1 9-7 18-13 24l5 5c13-7 22-20 22-36C72 12 69 0 63 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.leitbild-quote cite { display:block; margin-top:1.2rem; font-family: var(--font-body); font-style:normal; font-size: var(--text-label); color: var(--ink-soft); }
.leitbild-points { display:grid; }
.leitbild-points .point { display:flex; gap:1.2rem; padding-bottom:1.6rem; margin-bottom:1.6rem; border-bottom: 1px solid rgba(0,0,0,.12); }
.leitbild-points .point:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.leitbild-points .point .num { font-family: var(--font-display); font-size: var(--text-h2); color: var(--page-accent); flex-shrink:0; }
/* --nav-2 käme auf Weiß nur auf 1,38:1. Der Seitenakzent ist das dafür
   abgedunkelte Gelb (#AD8420, 3,44:1) — für diese Schriftgröße ausreichend. */
.leitbild-points .point h4 { font-size: var(--text-body); margin-bottom:.3rem; }
.leitbild-points .point p { font-size: var(--text-body); color: var(--ink-soft); }

/* ---------- Angebot / Gruppen ---------- */
.angebot { background: var(--paper); }
.card-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
/* Rasterelemente bekommen von Haus aus min-width:auto. Die Fußleiste zieht sich
   mit negativen Rändern über die Kartenkante hinaus, und diese Ränder zählen zur
   Mindestbreite — dadurch wuchsen Karten mit Leiste auf schmalen Schirmen über
   ihre Spalte hinaus (auf 375px 362 statt 327 Pixel). Die Null hebt das auf. */
.card-grid > *, .card-grid--2x2 > * { min-width: 0; }
/* Vier Gruppen passen ab 1000px in eine Reihe, zwei bleiben nebeneinander —
   das Raster füllt die Breite, statt zwei riesige Kacheln zu zeigen. */
/* Feste zwei Spalten statt automatischer Verteilung — vier Gruppen stehen
   so als 2×2-Block, nicht als lange Reihe. */
.card-grid--2x2 { grid-template-columns: repeat(2, 1fr); }

/* Jedes Haus folgt demselben Bauplan: Überschrift, Adresse, Panorama,
   ggf. Fließtext, Kartenraster. Die Abstände hängen am Bauplan, nicht an
   einzelnen IDs — sonst driften die Standorte wieder auseinander. */
.standort-haus + .standort-haus { margin-top: 4.5rem; }
/* Überschrift, Adresse und Panorama liegen zusammen auf einer beigen Fläche
   über die volle Breite — das trennt die Häuser deutlicher als eine Linie. */
.haus-kopf {
  width: 100vw; position: relative; left: 50%; margin-left: -50vw;
  /* Ohne Farbfläche: Eine Haarlinie darüber grenzt den Block ab, das Bild
     trägt die Aufmerksamkeit schon selbst. Sie läuft auf Satzspiegelbreite,
     nicht über den ganzen Bildschirm — der Block selbst ist vollbreit. */
  padding: 3.2rem max(24px, calc((100vw - var(--container)) / 2 + 24px));
  /* Derselbe Abstand wie zwischen den Gruppenkästen (gap: 1.4rem). */
  padding-bottom: 0;
  margin-bottom: 1.4rem;
}
.haus-kopf::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(100% - 48px); max-width: calc(var(--container) - 48px);
  height: 1px; background: var(--line); pointer-events: none;
}
.haus-kopf > .orts-panorama { margin-bottom: 0; }
/* Standortkopf zweispaltig: Text links, Adresse und Anfahrt rechts. */
.standort-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: 3rem; align-items: start; margin-bottom: 2.6rem;
}
.standort-kopf .section-head { margin-bottom: 0; }
/* Haarlinien fassen den Adressblock ein — dieselbe Sprache wie die
   Trenner zwischen den Sections, nur enger gesetzt. */
.standort-adresse {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.standort-adresse address { font-style: normal; color: var(--ink-soft); margin-bottom: .6rem; }
.standort-adresse .adress-zusatz { color: var(--ink-soft); opacity: .8; }
.standort-adresse p { margin: 0 0 .35rem; display: flex; align-items: baseline; gap: .5rem; }
.standort-adresse .ico {
  width: 17px; height: 17px; flex-shrink: 0; transform: translateY(2px);
  color: var(--page-linktext, var(--page-accent));
}
/* Telefonnummern sind keine Textlinks — Unterstrich stört die Ziffernfolge. */
/* Weder Telefonnummer noch Anfahrt-Link tragen im Ruhezustand einen Unterstrich
   — die Icons davor kennzeichnen sie bereits als Verweis. Beim Überfahren blendet
   er ein: text-decoration-line ist nicht animierbar, die Farbe schon. Deshalb
   liegt der Unterstrich immer an und ist nur durchsichtig geschaltet. */
.standort-adresse a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: var(--unterstrich-blende);
}
.standort-adresse a:hover,
.standort-adresse a:focus-visible { text-decoration-color: currentColor; }
@media (max-width: 860px) {
  .standort-kopf { grid-template-columns: 1fr; gap: 1.6rem; }
}
.standort-text { max-width: 640px; margin-bottom: 3.4rem; }
.standort-text > p:last-child { margin-bottom: 0; }
.standort-abschluss { display: inline-block; margin-top: 2.6rem; }
/* Panoramabild über die volle Breite des Standort-Blocks */
.kinderstube-panorama, .orts-panorama { margin: 0 0 2.2rem; position: relative; }
/* Standortname im Panoramabild, so groß wie das Hero-Zitat. Darunter eine
   weiche Abdunklung, damit Weiß auf jedem Motiv sicher liest. */
.orts-panorama::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(20,14,6,.6), rgba(20,14,6,.16) 74%, transparent);
  pointer-events: none;
}
.panorama-titel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 1.5rem; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-hero); line-height: 1.1; color: #fff;
  letter-spacing: .035em;
}
.kinderstube-panorama img, .orts-panorama img { width:100%; height:auto; display:block; }
/* Kompakt statt ausladend: schmalerer Farbbalken, flacheres Bild, engerer
   Innenabstand. Acht Gruppen sollen sich auf einen Blick überschauen lassen. */
.card {
  position: relative;
  background: var(--cream);
  /* Der Rahmen ist kein Border, sondern die Kartenfläche selbst: Nur so kann
     die Fußleiste unter ihm durchlaufen und die volle Breite einnehmen.
     Ein Border würde sie links und rechts einrahmen. */
  background: var(--card-accent-light, var(--card-accent, var(--terracotta)));
  padding: 16px 16px 0;
  border-radius: var(--radius-organic-a);
  box-shadow: 0 10px 28px -20px rgba(43,36,20,.28);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Schlichte Variante ohne Bild: Seit dem Umbau für die Gruppenseite trägt die
   Basiskarte einen farbigen Rahmen (Padding statt Border) und eine Fußleiste.
   Beides gehört zu den Gruppenkästen, nicht hierher — die Plain-Karte ist eine
   ruhige Fläche und setzt deshalb beides ausdrücklich zurück. */
.card--plain { background: var(--cream); padding: 0; }
/* Abschluss der schlichten Karte: ein Balken in ihrer eigenen Akzentfarbe.
   Den Ton gibt jede Karte über --card-accent-active selbst vor. Schlanker als
   die Fußleiste der Gruppenkästen — hier trägt er keine Beschriftung. */
.card--plain::after {
  content: ""; display: block; height: 22px;
  /* Ohne eigenen Ton nimmt die Karte die Farbe ihres Menüpunkts — nicht das
     Rostrot der Startseite. Nur wo bewusst durch die Palette gegangen wird
     („Was uns ausmacht"), steht der Ton je Karte inline. */
  background: var(--card-accent-active, var(--page-fill));
}
.card--plain .card-body { margin-top: 0; padding: 1.8rem 1.6rem; }
.card-grid .card:nth-child(2) { border-radius: var(--radius-organic-b); }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -18px rgba(43,36,20,.35); }
.card .card-img { position:relative; height: 230px; overflow:hidden; }
.card .card-img img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
/* Hochformat mit Motiv im unteren Drittel — der mittige Standardausschnitt
   würde die Blüten abschneiden. */
.card .card-img img.ausschnitt-unten { object-position: 50% 72%; }
.card:hover .card-img img { transform: scale(1.07); }
.card .card-body { padding: 1.1rem 1.3rem 1.3rem; background: var(--cream); }
/* Der Gruppenname steht in der Karte, nicht in einer bunten Box darüber —
   die Farbe trägt schon der Balken unten. */
/* Der Gruppenname liegt im Bild. Damit Weiß auf jedem Foto sicher liest,
   liegt darunter ein abdunkelnder Verlauf statt eines Schattens. */
/* Absolut positioniert statt im Raster: Im Raster richtet sich die Zeilenhöhe
   nach dem Bild in Originalhöhe (785 px), der Titel läge dann unterhalb des
   sichtbaren Ausschnitts. */
.card .card-img::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 58% at 50% 50%, rgba(20,14,6,.62), rgba(20,14,6,.18) 72%, transparent);
  pointer-events: none;
}
.card .card-img h3 {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 1rem; text-align: center;
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600;
  line-height: 1.15; color: #fff;
}
.card .card-body p { font-size: var(--text-body); color: var(--ink-soft); margin-bottom:.7rem; }
/* Aufklappbare Langbeschreibung — natives <details>, damit es ohne JavaScript
   und mit Tastatur funktioniert. */
/* Der farbige Streifen am Kartenfuß ist zugleich die Schaltfläche zum
   Aufklappen: volle Breite, Beschriftung darin. Karten ohne Aufklapptext
   behalten den schmalen Streifen als Rand. */
/* Alle Karten als Spalte: So sitzt der Fußbalken immer bündig unter dem
   Textkasten, ohne Rest der Rahmenfläche dazwischen. */
.card { display: flex; flex-direction: column; }
.card .card-body { flex: 1; }
/* Ohne Fußleiste bildet ein Streifen in der Hauptfarbe den Abschluss —
   als Flex-Element, nicht absolut positioniert. */
.card:not(.card--plain):not(:has(.mehr)):not(:has(.links))::after {
  content: ""; display: block; height: 57px;
  margin: 0 -16px;
  background: var(--card-accent, var(--terracotta));
}
/* Ohne diese Null bliebe unter der Leiste der Innenabstand des Textkastens
   stehen — als heller Streifen zwischen Leiste und Kartenkante. */
.card:has(.mehr) .card-body, .card:has(.links) .card-body {
  display: flex; flex-direction: column; padding-bottom: 0;
}
.card:has(.mehr) .mehr, .card:has(.links) .links { margin-top: auto; }

/* Ein einzelner Verweis am Kartenfuß bekommt dieselbe Leiste wie der
   Aufklapper — nur ohne Winkel, dafür mit dem Weiterlesen-Pfeil. */
.card .links { margin: 1.1rem calc(-1.3rem - 16px) 0; }
.card .links a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .95rem 1.3rem; min-height: 57px;
  background: var(--card-accent, var(--terracotta));
  font-family: var(--font-hand); font-size: var(--text-body); font-weight: 600;
  color: var(--color-text); text-decoration: none;
  transition: filter .2s ease;
}
.card .links a:hover { filter: brightness(.94); }
.card .mehr { margin: 1.1rem calc(-1.3rem - 16px) 0; }
.card .mehr > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .95rem 1.3rem;
  background: var(--card-accent, var(--terracotta));
  font-family: var(--font-hand); font-size: var(--text-body); font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: filter .2s ease;
}
.card .mehr > summary:hover { filter: brightness(.94); }
.card .mehr > summary:focus-visible { outline: 3px solid var(--color-text); outline-offset: -3px; }
.card .mehr > summary::-webkit-details-marker { display: none; }
/* Winkel aus zwei Kanten — dreht sich beim Aufklappen, unabhängig von der Schrift */
.card .mehr > summary::after {
  content: ""; flex: 0 0 auto; width: .42em; height: .42em;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-.14em) rotate(45deg);
  transition: transform .25s ease;
}
.card .mehr[open] > summary::after { transform: translateY(.05em) rotate(-135deg); }
/* Der aufgeklappte Text sitzt unter der Leiste, leicht abgesetzt, und
   fährt weich auf. interpolate-size erlaubt den Übergang nach auto. */
.card .mehr > p {
  margin: 0; padding: 1.1rem 1.3rem 1.2rem;
  background: color-mix(in srgb, var(--card-accent, var(--terracotta)) 16%, var(--paper));
}
.card .mehr::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .4s ease, content-visibility .4s allow-discrete;
  content-visibility: hidden;
}
.card .mehr[open]::details-content { block-size: auto; content-visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .card .mehr::details-content { transition: none; }
}

/* Eine Zeile mit Trennpunkten statt gestapelter Kästchen — spart je Karte
   zwei Zeilen Höhe und beruhigt das Raster. */
/* Die Eckdaten stehen direkt unter dem Gruppennamen, darunter eine
   Haarlinie als Absatz zum Fließtext. */
.card .meta { margin: .6rem 0 1.1rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  /* Titillium in Fließtextgröße, im Akzent der jeweiligen Karte — die
     Eckdaten sind eine eigene Information, kein Kleingedrucktes.
     Die reinen Menütöne kämen auf der Karte nur auf 2,1–4,4:1; mit 62 %
     Farbanteil liegen alle sieben über 4,5:1 und bleiben erkennbar bunt. */
  font-family: var(--font-hand); font-size: var(--text-body); font-weight: 600;
  color: color-mix(in srgb,
         var(--card-accent-active, var(--page-accent)) 62%, var(--color-text));
  line-height: 1.5; }
/* Angaben wie „3 Jahre – Schuleintritt" bleiben zusammen; umbrochen wird
   nur zwischen den Angaben. Als Flex-Zeile, weil im Markup kein Leerzeichen
   zwischen den Spans steht — sonst gäbe es gar keine Umbruchstelle.
   Der Trennpunkt hängt hinten am Eintrag, nicht vorne am nächsten: sonst
   beginnt eine umbrochene Zeile mit einem einsamen Punkt. */
.card .meta {
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:1.3rem; row-gap:.35rem;
}
/* Marke vor jeder Angabe statt Trennpunkt dazwischen: In den schmalen
   Karten rutscht ohnehin jede Angabe auf eine eigene Zeile — ein Trenner
   am Zeilenende oder -anfang sähe dann verloren aus. So liest es sich in
   beiden Fällen als Aufzählung. */
/* Kein nowrap mehr: „Teilzeitbetreuung / Platzsharing möglich“ ist als eine
   unteilbare Zeile 289px breit und sprengte damit auf 320px-Schirmen die Karte.
   Zusammengehalten wird stattdessen gezielt im Text — die kurzen Eckdaten
   tragen geschützte Leerzeichen, lange Angaben dürfen umbrechen. */
.card .meta span { display: inline-flex; align-items: baseline; gap: .4rem; }
.card .meta span::before {
  content: ""; flex: 0 0 auto;
  width: .38em; height: .38em; border-radius: 50%;
  background: currentColor; opacity: .55;
  transform: translateY(-.12em);
}

/* Wie die Gruppen-Karten: helle Fläche, Balken unten im mittleren Ton der Seitenfarbe */
/* Der Aquarell-Verlauf liegt auf der ganzen Section, nicht mehr auf einer
   abgesetzten Leiste mit dunklem Balken darunter. Aufbau wie beim Jobs-CTA:
   ::before trägt die verlaufenden Farbwolken durch den SVG-Filter,
   ::after ein feines Korn darüber. */
.angebot--aquarell {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, var(--nav-4-light), #F7DCC0);
}
.angebot--aquarell::before {
  content:""; position:absolute; inset:-120px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 54% at 16% 18%, rgba(227,143,82,.62), transparent 64%),
    radial-gradient(ellipse 50% 46% at 50% 6%,  rgba(236,168,112,.55), transparent 64%),
    radial-gradient(ellipse 54% 50% at 86% 26%, rgba(230,152,92,.58),  transparent 64%),
    radial-gradient(ellipse 62% 58% at 30% 86%, rgba(238,176,124,.6),  transparent 64%),
    radial-gradient(ellipse 48% 44% at 72% 70%, rgba(228,148,86,.5),   transparent 64%),
    radial-gradient(ellipse 44% 42% at 94% 88%, rgba(237,221,120,.42), transparent 66%),
    linear-gradient(160deg, var(--nav-4-light), #F7DCC0);
  filter: url(#aquarell-bleed-c);
}
.angebot--aquarell::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.12; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Ohne eigene Fläche und ohne Balken — die Section trägt die Farbe. */
.times-bar {
  display:flex; flex-wrap:wrap; gap: 2.5rem; justify-content:center;
  color: var(--color-text); padding: 0;
}
.times-bar .item .ico { stroke: var(--page-accent); }
.times-bar .item { display:flex; align-items:center; gap:.9rem; }
.times-bar .item .ico { width:34px; height:34px; flex-shrink:0; }
/* Die Baar Zeitgeist setzt Ziffern eng — bei „7:30 – 13:30“ laufen sie ohne
   zusätzliche Laufweite ineinander. */
.times-bar .item b {
  display:block; font-family: var(--font-display); font-size: var(--text-body);
  letter-spacing: .06em;
  color: var(--color-display);
}
/* Erläuterungszeile in normaler Fließtextgröße — die Beschriftungsgröße war
   hier zu klein zum Lesen. */
.times-bar .item span { font-size: var(--text-body); color: var(--ink-soft); }
/* Der Seitenton käme auf dem orangen Aquarell nur auf 3,35:1 — dieser Ton
   derselben Familie schafft 5,43:1 auch am dunkelsten Punkt des Verlaufs. */
.times-bar .item a { display: inline-block; margin-top: .25rem; color: #7A4217; }

/* ---------- Standorte ---------- */
.standorte { background: var(--paper); }
.standort-body { padding: 1.8rem 2rem 2rem; }
.standort-body h3 { margin: .2rem 0 .9rem; font-size: var(--text-h3); }
.standort-body address { font-style:normal; color: var(--ink-soft); font-size: var(--text-small); margin-bottom:1rem; }
.standort-body .groups { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom: 1.2rem; }
.standort-body .groups span { font-size: var(--chip-size); background: var(--sage-light); color: var(--color-text); padding:.3rem .65rem; border-radius:0; font-weight: var(--chip-weight); }
.standort-body .links { display:flex; gap: .9rem; flex-wrap:wrap; font-size: var(--text-small); }
.standort-body .links a { color: var(--page-linktext, var(--page-accent)); font-weight:400; border-bottom: 1px solid transparent; }
.standort-body .links a:hover { border-color: var(--page-accent); }

/* ---------- Geschichte / Jubiläum ---------- */
.geschichte { color: var(--color-text); position:relative; }
.geschichte-grid { position:relative; display:grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; align-items:center; }
/* Das Jubiläums-Signet steht im Textfluss statt frei über der Section zu schweben */
/* Signet als weiße Flagge — im Textfluss, aber mit der kräftigen Anmutung von zuvor */
/* Das Signet steht über dem Eyebrow und leitet den Abschnitt ein.
   Ohne weißen Kasten und Schlagschatten: Das SVG ist freigestellt, der Kasten
   war nur nötig, solange dort ein PNG mit eigenem Hintergrund lag. */
.geschichte-siegel { display: block; width: 190px; height: auto; margin: 0 0 3.6rem; }
.geschichte h2 { color: var(--color-text); }
.timeline { display:grid; gap: 1.4rem; margin-top: 1rem; }
.timeline .row { display:grid; grid-template-columns: 90px 1fr; gap: 1.2rem; align-items:baseline; padding-bottom:1.2rem; border-bottom: 1px solid rgba(0,0,0,.12); }
.timeline .row b { font-family: var(--font-display); color: var(--page-accent); font-size: var(--text-lead); letter-spacing: .03em; }
.timeline .row p { color: var(--ink-soft); font-size: var(--text-body); }
.geschichte-text p { color: var(--ink-soft); margin-bottom:1rem; }

/* ---------- Trennlinien ----------
   Weiße Sections grenzen sich durch eine feine Linie ab, nicht durch Farbe.
   Entfällt, wo eine Farbfläche oder ein Hero die Grenze ohnehin markiert. */
.section-line { position: relative; }
.section-line::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(100% - 48px); max-width: calc(var(--container) - 48px);
  height: 1px; background: var(--line); pointer-events: none;
}
/* Grundsatz: Die Haarlinie markiert eine Grenze zwischen zwei gleichen Flächen.
   Wechselt dort ohnehin die Fläche, wäre sie doppelt gemoppelt — dann entfällt
   sie. Gilt für Sections mit eigener Fläche und für die Section direkt darunter.
   Bewusst als Regel und nicht als Einzelkorrektur: so kann es auch später nicht
   wieder zu Linie UND Farbwechsel an derselben Kante kommen. */
section[style*="background"].section-line::before,
section[style*="background"] + .section-line::before,
:is(.mood-band, .cta-band, .jobs-cta, .anfahrt, .gemeinschaft, .paedagogik-intro,
    .angebot--aquarell, .termine--aquarell, .weiterlesen, .aquarell).section-line::before,
:is(.mood-band, .cta-band, .jobs-cta, .anfahrt, .gemeinschaft, .paedagogik-intro,
    .angebot--aquarell, .termine--aquarell, .weiterlesen, .aquarell) + .section-line::before,
/* Der Seitenkopf ist weiß, alles darunter liegt auf dem Beige des Bodys.
   Der Wechsel markiert die Grenze schon — eine Linie obendrauf wäre doppelt. */
.page-hero + .section-line::before {
  content: none;
}

/* ---------- Finanzierung & Spenden ---------- */
/* Beitragsübersicht: Bezeichnung links, Betrag rechts, Haarlinien dazwischen —
   dieselbe Sprache wie die Tagesablauf-Listen, kein eingekastelter Tabellenblock. */
.beitrags-block { margin-top: 2.6rem; max-width: 640px; }
.beitrags-block h3 { font-size: var(--text-lead); margin-bottom: 1rem; }
.beitrags-liste > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: .85rem 0; border-top: 1px solid var(--line);
}
.beitrags-liste > div:last-child { border-bottom: 1px solid var(--line); }
.beitrags-liste dt { color: var(--ink-soft); }
.beitrags-liste dd {
  font-family: var(--font-hand); font-weight: 600; font-size: var(--text-lead);
  color: var(--page-linktext, var(--page-accent)); white-space: nowrap;
}
.beitrags-hinweis,
.text-hinweis { margin-top: 1.1rem; color: var(--ink-soft); }
.nach-tabelle { margin-top: 2.2rem; max-width: 640px; color: var(--ink-soft); }

.spenden-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem; align-items: start; margin-top: 2.6rem;
}
.spendenkonto { background: var(--color-bg); padding: 2rem 2.2rem 2.2rem; }
.spendenkonto .eyebrow { display: block; margin-bottom: 1rem; }
.spendenkonto > dl > div { padding: .7rem 0; border-top: 1px solid var(--line); }
.spendenkonto > dl > div:first-of-type { border-top: none; padding-top: 0; }
.spendenkonto dt {
  font-size: var(--text-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .15rem;
}
.spendenkonto dd { color: var(--color-text); }
/* Ziffern brauchen mehr Luft, sonst verhaken sich die Blöcke ineinander. */
.spendenkonto dd.iban { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.spenden-text h3 { font-size: var(--text-lead); margin-bottom: .6rem; }
.spenden-text h3 + p { margin-bottom: 1.6rem; }
.spenden-text p { color: var(--ink-soft); }
@media (max-width: 860px) {
  .spenden-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ---------- Gemeinschaft / Elternmitarbeit ---------- */
/* Zarte gelbe Waschung — einzige Farbfläche auf "Über uns" (Seitenfarbe Gelb).
   Sie steht hier, weil die Section Bilder trägt; reine Textsections bleiben weiß. */
.gemeinschaft {
  position:relative; isolation:isolate; overflow:hidden;
  background: linear-gradient(150deg, #FBF6E4, #FDFAEF);
}
.gemeinschaft::before {
  content:""; position:absolute; inset:-120px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 56% at 12% 12%, rgba(240,222,140,.34), transparent 62%),
    radial-gradient(ellipse 54% 58% at 48% 6%,  rgba(246,232,166,.28), transparent 62%),
    radial-gradient(ellipse 56% 54% at 88% 18%, rgba(238,220,136,.3),  transparent 62%),
    radial-gradient(ellipse 58% 56% at 24% 56%, rgba(245,230,158,.26), transparent 62%),
    radial-gradient(ellipse 52% 54% at 70% 48%, rgba(240,224,144,.26), transparent 62%),
    radial-gradient(ellipse 60% 52% at 36% 92%, rgba(238,221,138,.3),  transparent 62%),
    radial-gradient(ellipse 54% 56% at 78% 88%, rgba(246,231,160,.26), transparent 62%),
    linear-gradient(150deg, #FBF6E4, #FDFAEF);
  filter: url(#aquarell-bleed-b);
}
.gemeinschaft { color: var(--color-text); }
.vereinsstruktur { background: var(--paper); }

/* ---------- Gruppen-Übersicht ---------- */

/* ---------- Presse ---------- */
/* Presse schließt die Seite ab und steht dafür auf beigem Grund, nicht auf
   Weiß wie die Textabschnitte darüber. */
.presse { background: var(--color-bg); }
/* Wiederkehrende Termine: Aufbau wie die Zeitleiste bei „Geschichte" */
.termine-liste { list-style:none; margin:0; padding:0; max-width: 46rem; }
.termine-liste li {
  display: grid; grid-template-columns: 15rem 1fr; gap: .3rem 1.6rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.termine-liste li:first-child { padding-top: 0; }
.termine-liste li:last-child { border-bottom: none; padding-bottom: 0; }
/* Akzenttöne sind Flächentöne. Als Text bleiben sie unter dem AA-Kontrast —
   der seitensichere Linkton derselben Familie schafft ihn. */
.termine-liste b { font-family: var(--font-display); color: var(--page-linktext, var(--page-accent)); font-size: var(--text-lead); }
.termine-liste p { color: var(--ink-soft); }
@media (max-width: 600px) { .termine-liste li { grid-template-columns: 1fr; } }

.presse-platzhalter { color: var(--ink-soft); }

/* ---------- Downloads ---------- */
.downloads { background: var(--paper); }
.downloads-placeholder { color: var(--ink-soft); font-size: var(--text-body); }
.downloads-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; max-width: 720px; }
.download-card {
  display:flex; align-items:center; gap: 1.1rem; background: var(--cream);
  padding: 1.4rem 1.6rem; box-shadow: 0 14px 40px -26px rgba(43,36,20,.3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.download-card:hover { transform: translateY(-3px); box-shadow: 0 20px 46px -22px rgba(43,36,20,.4); }
.download-card .ico { width:34px; height:34px; flex-shrink:0; color: var(--page-accent); }
.download-card h4 { font-size: var(--text-body); margin-bottom:.2rem; color: var(--color-text); }
.download-card span { font-size: var(--text-caption); color: var(--ink-soft); }
@media (max-width: 600px) {
  .downloads-grid { grid-template-columns: 1fr; }
}

/* ---------- Pädagogik ---------- */
/* Zartes Aquarell aus Lila und Rosé — die Farben der Pädagogik- und der
   Jobs-Seite, hier nur als weiche Fläche. Aufbau wie bei den übrigen
   Aquarell-Sections: ::before trägt die Farbwolken durch den SVG-Filter,
   ::after ein feines Korn darüber. */
.paedagogik-intro {
  --page-linktext: #77609F;   /* Seitenton kam auf der Fläche auf 4,45:1 — zwei Nuancen dunkler genügt */
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(158deg, #F5F0F9, #FCF6F8);
}
.paedagogik-intro::before {
  content:""; position:absolute; inset:-120px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 56% 50% at 14% 16%, rgba(172,152,204,.18), transparent 64%),
    radial-gradient(ellipse 48% 44% at 50% 6%,  rgba(220,201,234,.22), transparent 64%),
    radial-gradient(ellipse 52% 46% at 86% 24%, rgba(228,162,175,.14), transparent 64%),
    radial-gradient(ellipse 58% 54% at 28% 86%, rgba(241,205,212,.2),  transparent 64%),
    radial-gradient(ellipse 46% 42% at 76% 72%, rgba(186,166,214,.16), transparent 64%),
    linear-gradient(158deg, #F5F0F9, #FCF6F8);
  filter: url(#aquarell-bleed-b);
}
.paedagogik-intro::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.paedagogik-intro .eyebrow { margin-bottom: .7rem; }
/* Tagesabläufe & Eingewöhnung: Aufbau wie die Zeitleiste bei „Geschichte" */
.ablauf { max-width: 52rem; margin-bottom: 3rem; }
.ablauf:last-of-type { margin-bottom: 2rem; }
.ablauf h3 { margin-bottom: .6rem; }
.ablauf-lead { color: var(--ink-soft); margin-bottom: 1.4rem; max-width: 46rem; }
.ablauf-liste, .eingewoehnung-liste { list-style:none; margin:0; padding:0; max-width: 52rem; }
.ablauf-liste li, .eingewoehnung-liste li {
  display: grid; grid-template-columns: 11rem 1fr; gap: .3rem 1.6rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.eingewoehnung-liste li { grid-template-columns: 15rem 1fr; }
.ablauf-liste li:first-child, .eingewoehnung-liste li:first-child { padding-top: 0; }
.ablauf-liste li:last-child, .eingewoehnung-liste li:last-child { border-bottom: none; }
.ablauf-liste b, .eingewoehnung-liste b {
  font-family: var(--font-display); color: var(--page-linktext, var(--page-accent)); font-size: var(--text-body);
}
.ablauf-liste p, .eingewoehnung-liste p { color: var(--ink-soft); }
.ablauf-schluss, .eingewoehnung-schluss { max-width: 46rem; color: var(--ink-soft); margin-top: 1.8rem; }
@media (max-width: 600px) {
  .ablauf-liste li, .eingewoehnung-liste li { grid-template-columns: 1fr; }
}

/* Ernährung: Fließtext auf Lesebreite, wie die übrigen Textblöcke */
.ernaehrung-text { max-width: 46rem; }
.ernaehrung-text p { color: var(--ink-soft); margin-bottom: 1.1rem; }
.ernaehrung-text p:last-child { margin-bottom: 0; }
/* Trennlinie zwischen Seitenkopf und den beiden Spalten */
.paedagogik-intro > .wrap > .section-head {
  max-width: none; padding-bottom: 2.4rem; margin-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}
.paedagogik-intro > .wrap > .section-head p { max-width: 640px; }
.paedagogik-intro h2 { margin-bottom: 1.2rem; line-height: 1.3; }
/* Einleitung auf "Über uns" — schlichter Textblock über den Alleinstellungsmerkmalen */
.ueber-intro { background: var(--paper); }
.ueber-intro-text { max-width: 760px; }
.ueber-intro-text .intro-lead { margin-bottom: 1.6rem; }
.ueber-intro-text p { color: var(--ink-soft); margin-bottom: 1.1rem; }
.ueber-intro-text p:last-of-type { margin-bottom: 0; }

.alleinstellung { background: var(--paper); }
/* Beige Fläche als Abschluss der Seite; die Karten darauf weiß, damit sie
   sich abheben. */
.weiterlesen { background: var(--color-bg); }
.weiterlesen .link-card { background: #fff; }
.link-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.link-card { display:block; background: var(--cream); padding: 1.8rem 1.9rem; box-shadow: 0 14px 40px -26px rgba(43,36,20,.3); transition: transform .3s ease, box-shadow .3s ease; }
.link-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -22px rgba(43,36,20,.4); }
.link-card h3 { font-size: var(--text-body); margin-bottom: .5rem; color: var(--color-text); }
.link-card p { font-size: var(--text-body); color: var(--ink-soft); margin-bottom: 1rem; }
/* Wie jeder andere Textlink — vorher kleiner (.78rem), fett (700) und gesperrt. */
.link-card .link-url {
  font-size: var(--text-small); font-weight: 400; letter-spacing: normal;
  color: var(--page-linktext, var(--page-accent));
  /* Gleicher Unterstrich wie bei Textlinks — der Kasten selbst bleibt ohne,
     sonst würde auch die Überschrift unterstrichen. */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-thickness .2s ease, text-decoration-color .2s ease;
}
.link-card:hover .link-url, .link-card:focus-visible .link-url {
  text-decoration-color: currentColor; text-decoration-thickness: 1.5px;
}
.gem-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:center; }
.gem-media { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gem-media img:first-child { grid-row: span 2; height:100%; object-fit:cover; border-radius: var(--radius-organic-a); }
.gem-media img:last-child { border-radius: var(--radius-organic-b); }
.gem-list { display:grid; gap: 1rem; margin-top: 1.6rem; }
.gem-list .item { display:flex; gap:.9rem; align-items:flex-start; }
.gem-list .item .dot { width:8px; height:8px; border-radius:0; background: var(--page-fill); margin-top:.5rem; flex-shrink:0; }
.gem-list .item p { color: var(--ink-soft); font-size: var(--text-body); }
.gem-list .item p b { color: var(--ink); }

/* ---------- Galerie ---------- */
.galerie { background: var(--sage-light); }
.gal-group { margin-bottom: 3rem; }
.gal-group:last-child { margin-bottom: 0; }
.gal-title { margin-bottom: 1.1rem; }
.gal-grid { display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: 10px; }
.gal-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gal-grid button { border:none; background:none; padding:0; cursor: zoom-in; overflow:hidden; }
.gal-grid img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.gal-grid button:hover img { transform: scale(1.08); }
.gal-grid .w2 { grid-column: span 2; }
.gal-grid .h2 { grid-row: span 2; }
.gal-grid button:nth-child(odd)  { border-radius: var(--radius-organic-a); }
.gal-grid button:nth-child(even) { border-radius: var(--radius-organic-b); }

.lightbox { position:fixed; inset:0; background: rgba(20,18,12,.92); z-index:200; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: opacity .3s ease; }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox img { max-width:90vw; max-height:85vh; border-radius: 0; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox button.close { position:absolute; top:24px; right:28px; background:none; border:none; color:#fff; font-size: var(--text-h2); cursor:pointer; line-height:1; }

/* ---------- Aktuelles ---------- */
.aktuelles { background: var(--paper); }

/* Helles Aquarell-Grün mit Gelbanteil für die wiederkehrenden Termine.
   Aufbau wie bei den übrigen Aquarell-Flächen: ::before trägt die Farbwolken
   durch den SVG-Filter, ::after ein feines Korn darüber. */
.termine--aquarell {
  /* Der Seitenton käme auf dem hellen Grün nur auf 3,55:1 — dieser dunklere
     Ton derselben Familie schafft 4,71:1 auch am dunkelsten Punkt. */
  --page-linktext: #4E6431;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, var(--nav-5-light), #EDF0CE);
}
.termine--aquarell::before {
  content:""; position:absolute; inset:-120px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 56% 52% at 14% 16%, rgba(166,192,126,.55), transparent 64%),
    radial-gradient(ellipse 48% 44% at 48% 8%,  rgba(237,221,120,.42), transparent 64%),
    radial-gradient(ellipse 52% 48% at 84% 24%, rgba(178,200,138,.5),  transparent 64%),
    radial-gradient(ellipse 60% 56% at 28% 84%, rgba(190,210,150,.52), transparent 64%),
    radial-gradient(ellipse 46% 42% at 74% 72%, rgba(233,225,150,.4),  transparent 64%),
    radial-gradient(ellipse 44% 40% at 94% 88%, rgba(160,188,120,.45), transparent 66%),
    linear-gradient(155deg, var(--nav-5-light), #EDF0CE);
  filter: url(#aquarell-bleed);
}
.termine--aquarell::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.news-grid { display:grid; grid-template-columns: 1fr; gap: 1.3rem; }
/* Ohne Fläche und ohne Balken: der Beitrag steht zwischen Haarlinien.
   Nur oben eine Linie — sonst stoßen bei zwei Beiträgen untereinander die
   Unterkante des einen und die Oberkante des nächsten zu einem Doppelstrich
   zusammen. Die untere Kante trägt allein der letzte Beitrag. */
.news-card {
  background: none; box-shadow: none;
  border-top: 1px solid var(--line);
  padding: 1.8rem 0;
}
/* :last-of-type statt :last-child — auf der Startseite folgt nach der
   letzten Karte noch der Link „Alle Neuigkeiten", :last-child griffe
   dort nie und die untere Linie fehlte. */
.news-card:last-of-type { border-bottom: 1px solid var(--line); }
/* Beitragsbild über der Metazeile */
/* Zwei Felder nebeneinander: Bild links, gesamter Text als ein Block rechts.
   Dadurch ist das Bild automatisch genau so hoch wie der Text — ohne Lücken. */
/* Beitragsbild links als Quadrat. Karten ohne Bild rücken auf die volle Breite,
   damit keine leere Spalte stehen bleibt. */
/* Bild und Text mittig zwischen den Trennlinien, nicht oben angeschlagen. */
.news-card { display:grid; grid-template-columns: 230px 1fr; gap: 1.8rem; align-items:center; }
.news-card:not(:has(.news-bild)) { grid-template-columns: 1fr; }
.news-card .news-bild { margin:0; }
/* Das Bild sitzt in einem Knopf, damit es mit Maus UND Tastatur zu öffnen ist. */
.news-card .news-bild button {
  display:block; width:100%; padding:0; border:none; background:none;
  cursor: zoom-in; overflow:hidden;
}
.news-card .news-bild button img { transition: transform .5s ease; }
.news-card .news-bild button:hover img { transform: scale(1.05); }
.news-card .news-bild button:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 2px; }
.news-card .news-bild img { width:100%; aspect-ratio: 1 / 1; display:block; object-fit: cover; }
/* Plakate, Logos und Hochformate werden vom quadratischen Ausschnitt zerschnitten.
   Mit dem Haken „Bild vollständig zeigen“ passt das ganze Bild ins Quadrat. */
.news-card .news-bild img.bild-vollstaendig { object-fit: contain; background: var(--color-bg); }
.news-card .news-text > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .news-card { grid-template-columns: 1fr; gap: 1.2rem; }
  .news-card .news-bild { aspect-ratio: 3 / 2; }
}
.news-card .news-meta { display:flex; gap:1.4rem; margin: 0 0 .5rem; }
.news-card .news-category {
  display:inline-block; font-size: var(--label-meta-size); font-weight: var(--label-meta-weight); letter-spacing: var(--label-meta-spacing); text-transform:uppercase;
  /* Der Kartenakzent ist ein Flächenton; als 13-px-Beschriftung nur 4,04:1. */
  color: color-mix(in srgb, var(--card-accent-active, var(--terracotta-dark)) 86%, #000);
}
/* Der Anlass trägt den Beitrag: Name groß in der Auszeichnungsschrift,
   die Zeitangabe ruhig darunter. */
.news-card h2 {
  font-family: var(--font-display); font-weight:600;
  font-size: var(--text-h2); line-height:1.2; letter-spacing:.045em;
  color: var(--color-display); margin: 0 0 .2rem;
}
.news-card .news-date {
  display:block; font-family: var(--font-hand); font-weight:400;
  font-size: var(--text-body); line-height:1.35;
  color: var(--ink-soft); margin-bottom:.7rem;
}
.news-card p { color: var(--ink-soft); font-size: var(--text-body); max-width: 720px; }
.news-card p a, .news-card .link-more { color: var(--page-linktext, var(--terracotta-dark)); font-weight:400; }

/* ---------- Dateilisten (Downloads & Presse) ----------
   Haarlinien statt Kästen, wie im übrigen Seitenbild. */
.datei-liste { margin: 0; padding: 0; list-style: none; }
.datei-liste li { border-top: 1px solid var(--line); }
.datei-liste li:last-child { border-bottom: 1px solid var(--line); }
.datei-liste a {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem;
  align-items: baseline; padding: 1.1rem 0;
  text-decoration: none; color: var(--color-text);
}
.datei-liste .datei-titel {
  font-family: var(--font-hand); font-size: var(--text-lead);
  color: var(--page-linktext, var(--page-accent));
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: .18em;
  transition: var(--unterstrich-blende);
}
.datei-liste a:hover .datei-titel { text-decoration-color: currentColor; }
.datei-liste .datei-text { grid-column: 1; font-size: var(--text-body); color: var(--ink-soft); }
/* Der Außen-Pfeil landet als eigenes Rasterfeld unter der Dateigröße —
   dort mittig statt am linken Rand der Spalte. */
.datei-liste a[target="_blank"]::after { justify-self: center; }
.datei-liste .datei-art {
  grid-column: 2; grid-row: 1;
  font-size: var(--text-label); letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap;
}
@media (max-width: 600px) {
  .datei-liste a { grid-template-columns: 1fr; }
  .datei-liste .datei-art { grid-column: 1; grid-row: auto; }
}

/* Wiederkehrende Termine: Rhythmus als Vorzeile, konkrete Daten hervorgehoben */
.termine-liste .termin-rhythmus {
  display: block; font-family: var(--font-body); font-size: var(--text-label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--page-accent);
  margin-bottom: .25rem;
}
.termine-liste .termin-datum {
  display: block; font-family: var(--font-hand); font-size: var(--text-body);
  color: var(--color-text); margin-top: .15rem;
}

/* ---------- Aktuell (Startseite) ---------- */
.aktuell-home { background: var(--paper); padding: 0; }
.aktuell-home-grid {
  display:grid; grid-template-columns: 4fr 3fr; gap: 0; align-items:stretch;
  width: 100vw; position: relative; left: 50%; margin-left: -50vw;
}
.aktuell-home-col {
  padding: 6rem 2.5rem 6rem max(24px, calc((100vw - 1180px) / 2 + 24px));
}
.aktuell-home-col .news-card { margin-top: 2.5rem; }
/* Steht bewusst außerhalb der Karte, also unter deren unterer Trennlinie —
   der Link gehört zur Rubrik, nicht zur Veranstaltung. */
.aktuell-alle { display: inline-block; margin-top: 1.6rem; }
.aktuell-home .news-card p { margin-bottom: .2rem; }
/* Instagram-Fläche: füllt die rechte Spalte ganz und trägt die Aquarell-Waschung.
   Die Klasse .aquarell liefert Verlauf, Filter und Körnung. */
/* Gleicher Innenabstand wie die linke Spalte, gespiegelt. Darin sitzt die
   quadratische Aquarell-Fläche als JPG. */
.insta-panel {
  /* Der Kasten läuft beim Scrollen mit: Er bleibt oben am Bildschirmrand
     kleben, bis die Section endet, und wird dann hinausgeschoben.
     Wichtig: Er muss oben in der Spalte beginnen — ein Kasten, der unten
     ruht, hat keinen Weg mehr, den er kleben könnte. */
  display:flex; flex-direction: column; align-items:center;
  padding: 6rem max(24px, calc((100vw - 1180px) / 2 + 24px)) 6rem 2.5rem;
}
.insta-panel .insta-widget-slot {
  position: sticky;
  /* Menüleiste (sticky, 46 px) plus etwas Luft */
  top: calc(46px + 1.5rem);
}
/* Ohne genug Höhe hat Kleben keinen Sinn — auf schmalen Schirmen steht der
   Kasten einfach unter den Beiträgen. */
@media (max-width: 980px) {
  .insta-panel { align-items: flex-start; }
  .insta-panel .insta-widget-slot { position: static; }
}
/* Der ganze Kasten ist ein Link zum Profil — dezent gehalten, die Farbe kommt
   allein vom Aquarell-Hintergrund. */
.insta-widget-slot {
  width:100%; max-width: 520px; aspect-ratio: 1 / 1;
  background: url("../assets/img/insta-aquarell.jpg") center / cover no-repeat;
  padding: 2.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: .9rem; text-align:center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.insta-panel { text-decoration:none; }
.insta-panel:hover .insta-widget-slot { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(43,36,20,.5); }

.insta-widget-slot .insta-ico { width: 30px; height: 30px; color: var(--ink-soft); }
.insta-widget-slot .insta-hint {
  font-family: var(--font-body); font-size: var(--text-body); letter-spacing: .02em;
  color: var(--color-text);
}
.insta-widget-slot .insta-handle {
  font-family: var(--font-hand); font-weight: 400;
  font-size: var(--text-small); letter-spacing: .03em; color: var(--ink-soft);
}
.insta-widget-slot iframe { width:100%; border:none; }

/* ---------- Anmeldung / Kontakt ---------- */
.kontakt { background: var(--color-surface); }
.kontakt .section-head h1 { color: var(--color-text); }
.kontakt .section-head p { color: var(--ink-soft); }

.steps { display:grid; gap: 0; margin-top: 2rem; }
.steps .step { display:flex; gap: 1.1rem; padding: 1.6rem 1.5rem; }
.steps .step .n { font-family: var(--font-display); font-size: var(--text-h3); flex-shrink:0; color: var(--step-ton); }
.steps .step h3 { color: var(--color-text); margin-bottom:.3rem; font-size: var(--text-body); }
.steps .step p { color: var(--ink-soft); font-size: var(--text-body); }
.steps .step a { color: var(--step-ton); }

.contact-info-block { color: var(--color-text); }
.contact-info-block > p { color: var(--ink-soft); font-size: var(--text-body); margin-bottom:1.4rem; }
.contact-addresses { display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.4rem; }
.contact-address h2 { font-size: var(--text-body); margin-bottom: .4rem; }
.contact-address address { font-style:normal; font-size: var(--text-small); color: var(--ink-soft); line-height:1.6; margin-bottom:.6rem; }
.contact-address .contact-phone { display:inline-flex; align-items:center; gap:.45rem; color: var(--page-linktext, var(--page-accent)); font-size: var(--text-small); }
.contact-address .contact-phone .ico { width:16px; height:16px; flex-shrink:0; }
.contact-email { display:flex; align-items:flex-start; gap:.6rem; font-size: var(--text-small); }
.contact-email .ico { width:20px; height:20px; flex-shrink:0; color: var(--page-accent); }
.contact-email a { font-weight:400; color: var(--page-linktext, var(--page-accent)); overflow-wrap:break-word; min-width:0; }

.contact-form-card { margin-top: 2.8rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
/* Nebenadresse der Kinderstube — tritt gegenüber der Hauptanschrift zurück */
.adress-zusatz { color: var(--ink-soft); font-size: var(--text-small); }
.contact-form-card h2 { margin-bottom: .4rem; }
.contact-form-card > p { color: var(--ink-soft); font-size: var(--text-body); margin-bottom: 1.8rem; max-width: 620px; }

.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.mini-form { display:grid; gap: 1.1rem; }
.mini-form .form-row { display:grid; gap: 1.1rem; }
.mini-form .form-row--2 { grid-template-columns: 1fr 1fr; }
.mini-form .form-row[hidden] { display:none; }
.mini-form label { font-size: var(--text-label); font-weight:600; color: var(--ink-soft); margin-bottom:.35rem; display:block; }
/* Die Feldbeschriftung steht im Feld — ruhig, nicht fett. Das <label> bleibt
   als sr-only bestehen: ein Platzhalter allein ist keine Beschriftung und
   verschwindet beim Tippen. */
/* Gedämpft, damit die Beschriftung nicht wie eingetragener Text wirkt —
   aber dunkel genug für 4,7:1 auf dem Feldhintergrund. */
.mini-form ::placeholder { color: #756C62; opacity: 1; font-weight: 400; }
.mini-form select:invalid { color: #756C62; }
.mini-form select option { color: var(--color-text); }
/* Nur Eingabefelder — Auswahlfelder werden bewusst nicht genannt, sonst
   verlieren sie ihre quadratische Form. Typen statt :not(), weil eine
   :not()-Kette die Spezifität hebt und spätere Regeln aushebelt. */
.mini-form textarea, .mini-form select,
.mini-form input[type="text"], .mini-form input[type="email"],
.mini-form input[type="tel"], .mini-form input[type="number"],
.mini-form input[type="search"] {
  width:100%; padding: .85rem 1rem; border-radius:0; border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--text-small); background: var(--color-bg); color: var(--color-text);
  appearance: none;
}
.mini-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5347' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
  padding-right: 2.4rem; cursor: pointer;
}
.mini-form input:focus, .mini-form textarea:focus, .mini-form select:focus { outline: 3px solid var(--nav-7-active); outline-offset: 1px; }
.captcha-privacy-row { display:flex; align-items:flex-start; gap:2rem; flex-wrap:wrap; }
.captcha-row { display:flex; align-items:center; gap:.9rem; flex-shrink:0; }
.captcha-row label { margin-bottom:0; font-size: var(--text-body); font-weight:700; color: var(--color-text); white-space:nowrap; }
/* Das Rechenfeld bleibt zwingend quadratisch. */
.mini-form input.captcha-input {
  flex: 0 0 54px; width:54px; height:54px; aspect-ratio: 1 / 1;
  padding:0; text-align:center; font-size: var(--text-lead); font-weight:700;
}
.privacy-col { flex:1; min-width:200px; display:flex; align-items:flex-start; gap:1rem; }
.pflichtfeld-hinweis { font-size: var(--text-label); color: var(--ink-soft); white-space:nowrap; padding-top:.15rem; flex-shrink:0; }
.mini-form label.checkbox-row { display:flex; align-items:flex-start; gap:.7rem; font-size: var(--text-label); color: var(--ink-soft); cursor:pointer; margin-bottom:0; }
.checkbox-row input {
  appearance:none; -webkit-appearance:none;
  flex: 0 0 20px; width:20px; height:20px; aspect-ratio: 1 / 1; margin-top:.15em;
  border: 2px solid var(--nav-7-active); border-radius:0; background: var(--color-surface); cursor:pointer; position:relative;
}
.checkbox-row input:checked { background: var(--nav-7-active); }
.checkbox-row input:checked::after {
  content:"\2713"; position:absolute; inset:0; color:#fff; font-size:13px; font-weight:700; line-height:16px; text-align:center;
}
.checkbox-row a { color: var(--page-linktext, var(--page-accent)); }

/* Auf schmalen Schirmen untereinander: Rechenaufgabe und „* Pflichtfeld“ in einer
   Zeile, die Datenschutz-Zustimmung darunter über die volle Breite.
   display:contents löst die Zwischenebene auf, damit beide im selben Raster liegen. */
@media (max-width: 600px) {
  .captcha-privacy-row {
    display: grid; gap: 1.4rem 1.2rem;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "quiz    hinweis"
      "zustimmung zustimmung";
    align-items: center;
  }
  .privacy-col { display: contents; }
  .captcha-row { grid-area: quiz; }
  .pflichtfeld-hinweis { grid-area: hinweis; padding-top: 0; }
  .mini-form label.checkbox-row { grid-area: zustimmung; }
}
.mini-form .label-like { font-size: var(--text-label); font-weight:600; color: var(--ink-soft); margin-bottom:.35rem; display:block; }
.gruppe-checkboxes {
  background: var(--nav-7-light); padding: .7rem .9rem; display:flex; flex-direction:column; gap:.5rem;
}
.gruppe-hint { font-size: var(--text-label); color: var(--ink-soft); margin:0; }
.mini-form label.gruppe-check { display:flex; align-items:center; gap:.6rem; font-size: var(--text-label); color: var(--color-text); cursor:pointer; line-height:1; margin-bottom:0; }
.gruppe-check input {
  appearance:none; -webkit-appearance:none; width:20px; height:20px; flex-shrink:0; margin:0;
  border-radius:50%; border:none; background: var(--color-surface); cursor:pointer; position:relative;
}
.gruppe-check input:checked { background: var(--nav-7-active); }
.gruppe-check input:checked::after {
  content:"✓"; position:absolute; inset:0; color:#fff; font-size:13px; font-weight:700; line-height:20px; text-align:center;
}
.mini-form .btn-primary { justify-self: start; }
.mini-form .form-msg { font-size: var(--text-label); padding: .5rem 0; }
.mini-form .form-msg.ok { color: var(--color-success); }
.mini-form .form-msg.err { color: var(--terracotta); }

/* ---------- Anfahrt ---------- */.anfahrt { background: var(--color-bg); }

/* Überschrift im Ton und Schnitt der Akzentzeile — bewusst leiser als eine H2 */
.section-head h2.titel-als-akzent {
  font-family: var(--font-hand);
  font-size: var(--label-accent-size);
  font-weight: var(--label-accent-weight);
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--page-accent);
}
.anfahrt::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.anfahrt .section-head p { max-width: 640px; }
.anfahrt-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.anfahrt-card { background: var(--color-surface); box-shadow: 0 14px 40px -22px rgba(43,36,20,.3); }
.anfahrt-map { position:relative; height: 340px; overflow:hidden; }
.anfahrt-map svg { width:100%; height:100%; display:block; }
.anfahrt-map iframe { width:100%; height:100%; display:block; border:none; }
.anfahrt-map-load {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  background: none; color: #2F5265; border: none; border-radius:0;
  font-family: var(--font-hand); font-weight: var(--label-meta-weight); font-size: var(--label-meta-size); letter-spacing: var(--label-meta-spacing); text-transform:uppercase;
  padding:.65rem 1.35rem; cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.anfahrt-map-load .ico { width:15px; height:15px; }
.anfahrt-map-load:hover { color: #22404F; transform: translate(-50%,-50%) translateY(-2px); text-decoration: underline; }
.anfahrt-map.is-loaded .anfahrt-map-load, .anfahrt-map.is-loaded svg { display:none; }
.anfahrt-body { padding: 1.6rem 1.8rem 1.8rem; }
.anfahrt-body h3 { font-size: var(--text-lead); margin-bottom: .5rem; }
.anfahrt-body address { font-style:normal; color: var(--ink-soft); font-size: var(--text-small); margin-bottom: 1.2rem; }
.anfahrt-links { display:flex; flex-direction:column; gap:.5rem; }
.anfahrt-links a { color: var(--page-linktext, var(--page-accent)); font-weight:400; font-size: var(--text-small); }
.anfahrt-links a:hover { filter: brightness(.82); }

/* ---------- Footer ---------- */
/* Volle Deckkraft: bei .85 lag der Fließtext bei 4,09:1, jetzt 4,94:1. */
.site-footer { background: #736A5C; color: rgba(250,246,239,1); padding: 4rem 0 2rem; font-size: var(--text-body); }
.footer-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 3.5rem; padding-bottom: 2.5rem; }
.footer-brand .brand-text { color: #fff; }
.footer-brand .brand-text small { color: rgba(250,246,239,1); }
.footer-brand .brand { gap: 14px; }
.footer-brand .brand svg, .footer-brand .brand img { height: 52px; }
.footer-brand .brand svg path { fill: rgba(250,246,239,.9); stroke: rgba(250,246,239,.9); }
.footer-brand .brand-text { font-size: var(--text-h3); }
.footer-brand { padding-right: 2.5rem; }
.footer-brand p { margin-top: 1rem; max-width: 280px; }
/* Die Spaltenüberschriften im Footer sind h2 — sie stehen gleichrangig neben
   dem Seiteninhalt. Die kleine Optik macht das CSS, nicht die Ebene: eine h5
   nach einer h1 ist für Screenreader ein Sprung über drei Stufen. */
.site-footer h2 { color:#fff; font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--label-meta-weight); letter-spacing: var(--label-meta-spacing); text-transform:uppercase; margin-bottom:1rem; }
.site-footer ul { display:grid; gap:.6rem; }
.site-footer a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap: .8rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--text-body); }
.site-footer .legal-links { display:flex; gap: 1.4rem; flex-wrap:wrap; }
/* Die Signatur schließt die Brand-Spalte ab — dort steht ohnehin, wer hinter
   der Seite steht, und sie drängt sich nicht zwischen die Rechtslinks. */
.footer-brand .footer-credit { margin-top: 1.4rem; opacity: .7; }
/* Führt von der Seite weg und wird deshalb wie ein externer Fließtextlink
   behandelt: fester feiner Unterstrich, beim Überfahren kräftiger. */
.footer-credit a {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness .2s ease, var(--unterstrich-blende);
}
.footer-credit a:hover,
.footer-credit a:focus-visible { text-decoration-color: currentColor; text-decoration-thickness: 1.5px; }
.footer-brand .footer-credit:hover { opacity: 1; }
.site-footer .legal-links .link-btn { background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer; }
/* „Barrierefreiheit" und „Cookie-Einstellungen" öffnen einen Dialog und sind
   deshalb <button>, keine Links. Die Unterstrich-Regel gilt aber nur für a —
   darum bekommen sie dieselbe Behandlung hier ausdrücklich. */
.site-footer .legal-links .link-btn {
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .45s cubic-bezier(.25,.1,.25,1), color .2s ease;
}
.site-footer .legal-links .link-btn:hover,
.site-footer .legal-links .link-btn:focus-visible { color:#fff; text-decoration-color: currentColor; }
/* Der Verwaltungszugang ist kein Angebot an Besucher — er steht ganz rechts und
   etwas zurückgenommen, aber auffindbar für die, die ihn brauchen. */
/* Steht als erster Punkt links, noch vor Impressum — der Zugang zur
   Verwaltung ist kein rechtlicher Link und soll sich nicht dazwischenmischen. */
.site-footer .legal-links .footer-verwaltung { order: -1; margin-right: .6rem; opacity: .65; }
.site-footer .legal-links .footer-verwaltung:hover { opacity: 1; }
@media (max-width: 760px) {
  .site-footer .legal-links .footer-verwaltung { margin-left: 0; }
}
.footer-search {
  display:flex; margin-top:1.6rem; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.footer-search input[type="search"] {
  flex:1; min-width:0; padding:.55rem .8rem; background:#fff; border:none;
  color:var(--color-text); font-family:var(--font-body); font-size: var(--text-body); border-radius:0;
  appearance:none; -webkit-appearance:none;
}
.footer-search input[type="search"]::placeholder { color:rgba(58,46,39,.5); }
.footer-search input[type="search"]:focus { outline:2px solid var(--color-bg); outline-offset:-2px; }
/* Quadrat in der Farbe des Kopfbereichs. Die Höhe kommt vom Eingabefeld,
   damit beide immer bündig bleiben — auch wenn sich die Schriftgröße ändert. */
.footer-search button {
  flex-shrink:0; align-self:stretch; aspect-ratio: 1 / 1; min-width: 44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-bg); border:none; color:var(--color-text);
  cursor:pointer; transition:background .2s ease;
}
.footer-search button svg { width:19px; height:19px; }
/* Beim Überfahren dunkler, nicht heller — sonst verschwindet der Kasten
   im Weiß des Eingabefelds. */
.footer-search button:hover { background: #D7D3CD; }
/* Freistehendes Icon, kein Rahmen */
.footer-social { display:flex; justify-content:flex-end; margin: 0 0 1.8rem; }
.footer-social a { display:block; color: rgba(250,246,239,.85); transition: color .2s ease; }
.footer-social a:hover { color:#fff; }
.footer-social svg { width:34px; height:34px; display:block; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- Credits im Impressum ----------
   Zwei Zeilen, jede mit Rolle, Name und Verweis. Haarlinien statt Kästen,
   im Ton der übrigen Seite. */
.credits { list-style:none; margin: .4rem 0 2.4rem; padding: 0; max-width: 34rem; }
.credits li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: .2rem 1.4rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}
.credits li:last-child { border-bottom: 1px solid var(--line); }
.credits-rolle {
  grid-column: 1 / -1;
  font-family: var(--font-body); font-size: var(--text-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.credits-name{ font-family: var(--font-hand); font-size: var(--text-body); color: var(--color-text); }
.credits a { font-size: var(--text-small); white-space: nowrap; }
@media (max-width: 480px) {
  .credits li { grid-template-columns: 1fr; }
  .credits a { justify-self: start; }
}

/* ---------- Cookie-Banner (Pop-up) ---------- */
/* Sitzt unten am Rand statt als Vollbild-Dialog über der Seite, damit der Hero
   frei sichtbar bleibt. Ohne abdunkelnden Hintergrund; nur der Kasten selbst
   nimmt Klicks entgegen. */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 500;
  display:flex; align-items:flex-end; justify-content:center;
  padding: 0 24px 24px; pointer-events:none;
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease;
}
.cookie-banner.visible { opacity:1; visibility:visible; }
.cookie-banner-inner {
  max-width: 560px; width:100%; margin: 0 auto; background: var(--color-bg);
  border-radius: var(--radius); box-shadow: 0 24px 60px -18px rgba(43,36,20,.45);
  padding: 1.8rem 1.9rem 1.6rem; pointer-events:auto;
  display:flex; flex-direction:column; align-items:flex-start; gap: 1.2rem;
  transform: translateY(20px); transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.visible .cookie-banner-inner { transform:none; }
.cookie-banner-inner p { color: var(--ink-soft); font-size: var(--text-body); margin:0; }
.cookie-banner-inner a { color: var(--page-linktext, var(--page-accent)); }
.cookie-banner-actions { display:flex; gap:.8rem; flex-wrap:wrap; flex-shrink:0; width:100%; }
.cookie-banner-actions .btn { padding: .7rem 1.3rem; font-size: var(--text-small); flex:1; justify-content:center; }
/* Auf schmalen Schirmen so flach wie möglich halten — der Kasten sitzt über dem
   Hero und soll ihn nur streifen, nicht zudecken. */
@media (max-width: 600px) {
  .cookie-banner { padding: 0 12px 12px; }
  .cookie-banner-inner { padding: .9rem 1rem .85rem; gap: .65rem; }
  .cookie-banner-inner p { font-size: var(--text-micro); line-height: 1.45; }
  .cookie-banner-actions { gap: .35rem; }
  .cookie-banner-actions .btn { flex: 1 1 auto; padding: .42rem .5rem; font-size: var(--text-micro); letter-spacing: 0; }
  .cookie-settings-panel { gap: .7rem; }
  .cookie-settings-row span { font-size: var(--text-micro); }
}

.cookie-settings-panel { width:100%; }
.cookie-settings-row { display:flex; align-items:flex-start; gap:.7rem; font-size: var(--text-small); color: var(--ink-soft); cursor:pointer; margin-bottom:1.2rem; }
.cookie-settings-row input {
  appearance:none; -webkit-appearance:none; width:42px; height:24px; flex-shrink:0; margin-top:.1rem;
  border:none; border-radius:12px; background: rgba(58,46,39,.22); cursor:pointer; position:relative;
  transition: background .2s ease;
}
.cookie-settings-row input::after {
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease;
}
.cookie-settings-row input:checked { background: var(--color-text); }
.cookie-settings-row input:checked::after { transform: translateX(18px); }
.cookie-settings-panel .btn { width:100%; justify-content:center; }

/* ---------- Fixe Buttons (Barrierefreiheit / Nach oben / Cookies) ---------- */
.floating-btn {
  position: fixed; right: 0; z-index: 400;
  /* Wächst mit dem Schirm: auf Laptops spürbar kleiner, auf großen
     Monitoren wie bisher. Unten und oben gedeckelt. */
  --tag-groesse: clamp(38px, 3.4vw, 54px);
  /* Feste Breiten statt intrinsischer Berechnung — nur die lassen sich
     zuverlässig animieren, `width: auto`/`max-content` nicht. */
  display: flex; align-items: center;
  width: var(--tag-groesse); height: var(--tag-groesse); padding: 0; border: none; cursor: pointer;
  overflow: hidden; white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.4);
  transition: width .34s cubic-bezier(.4,0,.2,1), background .2s ease,
              opacity .3s ease, visibility .3s ease;
}
/* Alle drei Symbole gleich groß — bei 22px waren sie kaum zu entziffern. */
.floating-btn svg { width: 30px; height: 30px; flex: 0 0 var(--tag-groesse); }

.floating-btn-text {
  flex: 0 0 auto; padding-right: 1.15rem;
  font-family: var(--font-body); font-size: var(--text-label); letter-spacing: .04em;
  opacity: 0; transition: opacity .22s ease;
}
/* Beim Überfahren zieht sich die Fläche nach links auf und gibt das Wort frei.
   Nur wo es echtes Hover gibt — auf Tippgeräten bliebe es sonst unerreichbar. */
@media (hover: hover) {
  .a11y-flag:hover,   .a11y-flag:focus-visible   { width: 12.2rem; }
  .cookie-flag:hover, .cookie-flag:focus-visible { width: 14.4rem; }
  .floating-btn:hover .floating-btn-text,
  .floating-btn:focus-visible .floating-btn-text { opacity: 1; }
}
/* Ohne Hover (Touch) bleibt die Fläche quadratisch, das Wort ausgeblendet —
   der Textlink im Footer übernimmt dort die Erklärung. */
@media (hover: none) {
  .floating-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.a11y-flag { bottom: 88px; background: var(--nav-3-active); color: #fff; opacity: 0; visibility: hidden; }
.a11y-flag.visible { opacity: 1; visibility: visible; }
.a11y-flag:hover { background: var(--nav-3); }
.back-to-top { bottom: 152px; background: var(--nav-7-active); color: #fff; opacity: 0; visibility: hidden; transform: translateY(10px); }
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--nav-7); }
.cookie-flag { bottom: 24px; background: var(--color-text); color: #fff; opacity: 0; visibility: hidden; }
.cookie-flag.visible { opacity: 1; visibility: visible; }
.cookie-flag:hover { background: var(--color-text-muted); }

/* ---------- Barrierefreiheit-Panel ---------- */
.a11y-panel {
  position: fixed; right: 24px; bottom: 216px; z-index: 401;
  width: 280px; background: var(--color-surface); box-shadow: 0 20px 50px -20px rgba(0,0,0,.45);
  padding: 1.6rem 1.6rem 1.4rem;
}
.a11y-panel[hidden] { display: none; }

@media (max-width: 760px) {
  html.cookie-offen .floating-btn { opacity: 0; visibility: hidden; pointer-events: none; }
  /* Der Cookie-Tag entfällt auf Mobile — die Einwilligung lässt sich über
     „Cookie-Einstellungen“ im Footer jederzeit widerrufen, der auf jeder Seite steht. */
  .cookie-flag { display: none; }
  /* Die verbleibenden zwei rücken in den frei gewordenen Platz nach */
  .a11y-flag { bottom: 24px; }
  .back-to-top { bottom: 88px; }
  .a11y-panel { bottom: 152px; }

}
.a11y-panel h3 { font-size: var(--text-lead); margin-bottom: 1.1rem; color: var(--color-text); }
.a11y-row { display:flex; align-items:center; justify-content:space-between; gap: 1rem; margin-bottom: 1rem; font-size: var(--text-small); color: var(--ink-soft); }
.a11y-btns { display:flex; gap: .4rem; }
.a11y-btns button {
  width: 32px; height: 32px; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-weight: 700; font-size: var(--text-label); cursor: pointer;
}
.a11y-btns button:hover { background: var(--nav-3-light); }
.a11y-toggle {
  padding: .4rem .9rem; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-weight: 600; font-size: var(--text-label); cursor: pointer;
}
.a11y-toggle[aria-pressed="true"] { background: var(--nav-3-active); color: #fff; border-color: var(--nav-3-active); }
.a11y-panel-close { width: 100%; padding: .6rem; border: none; background: var(--color-bg-alt); color: var(--color-text); font-weight: 600; font-size: var(--text-label); cursor: pointer; }
.a11y-panel-close:hover { background: var(--nav-3-light); }

/* ---------- Barrierefreiheit: Zustände ---------- */
html.a11y-font--2 { font-size: 87.5%; }
html.a11y-font--1 { font-size: 93.75%; }
html.a11y-font-1 { font-size: 106.25%; }
html.a11y-font-2 { font-size: 112.5%; }
html.a11y-font-3 { font-size: 125%; }
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast :is(p, span, li, address, label, small) { color: #000 !important; }
html.a11y-contrast a { text-decoration: underline; }
html.a11y-contrast .btn-primary { background: #000; color: #fff; }

/* Die Pauschalregel oben (Schrift schwarz) rechnet mit hellem Grund. Über Foto,
   Farbband und Footer kehrt sie sich ins Gegenteil: Schwarz auf dem Footer-Braun
   ergibt 3,95:1 und damit weniger als die 4,94:1 im Normalzustand. Auf diesen
   Flächen bleibt die Schrift deshalb hell — der Grund wird stattdessen dunkler. */
html.a11y-contrast .site-footer { background: #1C1814; }
html.a11y-contrast .site-footer :is(p, span, li, address, small, h2, a) { color: #fff !important; }
html.a11y-contrast .site-footer .footer-bottom { border-top-color: rgba(255,255,255,.45); }
html.a11y-contrast .site-footer .brand svg path { fill: #fff; stroke: #fff; }
html.a11y-contrast .site-footer .footer-search input[type="search"] { color: #000 !important; }

html.a11y-contrast :is(.hero-quote, .panorama-titel, .card .card-img, .cta-band) :is(p, span, li, small) { color: #fff !important; }
html.a11y-contrast .intro-news-box .intro-news-label,
html.a11y-contrast .floating-btn .floating-btn-text { color: #fff !important; }

/* Schrift auf Fotos trägt nur mit Abdunkler darunter. */
html.a11y-contrast :is(.hero-quote, .panorama-titel)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(0,0,0,.55);
}
html.a11y-contrast .card .card-img::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
}
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* Bildwechsel-Animationen (Hero, Mood-Slider) würden sonst auf einem zufälligen, oft leeren Frame einfrieren —
   stattdessen fest auf das erste Bild je Slider setzen */
html.a11y-reduce-motion .hero-bg img,
html.a11y-reduce-motion .mood-strip img {
  animation: none !important; opacity: 0 !important;
}
html.a11y-reduce-motion .hero-bg img:first-child,
html.a11y-reduce-motion .mood-strip img:first-child {
  opacity: 1 !important;
}

@media (max-width: 480px) {
  .a11y-panel { right: 12px; left: 12px; width: auto; }
  .floating-btn { right: 0; box-shadow: 0 4px 12px -6px rgba(0,0,0,.35); opacity: .82; }
  .floating-btn svg { width: 22px; height: 22px; }   /* 38px-Fläche: gleiches Verhältnis */
  .back-to-top.visible { opacity: .82; }
  /* Ohne den Cookie-Tag rücken die beiden verbleibenden nach unten */
  .a11y-flag { bottom: 18px; }
  .back-to-top { bottom: 64px; }
  .a11y-panel { bottom: 116px; }
}

/* ---------- Reveal animation ---------- */
/* Die Blende hier ausgeschrieben, nicht als var() — innerhalb der
   transition-Kurzschreibweise kippt die Variable die Liste auf `all`. */
.reveal { opacity:0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease,
              text-decoration-color .45s cubic-bezier(.25,.1,.25,1); }
.reveal.is-visible { opacity:1; transform:none; }
/* Ohne Bewegung springt der Browser zu Ankern — dabei kann der Observer Elemente
   überspringen. Reveal-Inhalte deshalb grundsätzlich sichtbar halten. */
html.a11y-reduce-motion .reveal { opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .intro-grid, .cta-grid, .leitbild-grid, .geschichte-grid, .gem-grid, .aktuell-home-grid, .anfahrt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Grid-Kinder dürfen von Haus aus nicht unter ihre Mindestbreite schrumpfen —
     auf sehr schmalen Schirmen schob das die Spalte über den Rand hinaus. */
  .intro-grid > *, .cta-grid > *, .leitbild-grid > *, .geschichte-grid > *,
  .gem-grid > *, .aktuell-home-grid > *, .anfahrt-grid > * { min-width: 0; }
  .mini-form .form-row--2 { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .link-grid { grid-template-columns: 1fr; }
  .standort-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .intro-media .float-card { position:static; margin-top: 1.2rem; max-width:none; }
  .gal-grid { grid-template-columns: repeat(4,1fr); grid-auto-rows: 150px; }
}

@media (max-width: 1100px) {
  /* Solange der mobile Header aktiv ist, sitzt das Abzeichen mittig auf der
     Unterkante des Heros — halb im Bild, halb darunter. Oben würde der Header
     es anschneiden. Mindestens 30% der Schirmbreite, damit die Botschaft trägt. */
  .hero .welcome-badge {
    top:auto; right:auto; left:50%; bottom:0;
    width: 42vw; min-width: 130px; max-width: 210px;
    height: auto; aspect-ratio: 1;   /* sonst wächst die Höhe über die gedeckelte Breite hinaus */
    transform: translate(-50%, 50%);
    z-index: 8;
  }
  /* Die untere Hälfte des Abzeichens ragt in die Section darunter — sie bekommt
     entsprechend Luft. Ab ca. 500px greift die Deckelung auf 210px, ab da sind
     es konstant 105px Überstand statt 21vw. */
  main:has(.hero) .intro { padding-top: calc(min(21vw, 105px) + 3rem); }
  /* Weicher Schatten an der Unterkante des Heros — er trägt den Kreis und
     trennt das Bild von der weißen Section darunter. */
  .hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 130px; z-index: 7; pointer-events: none;
    background: linear-gradient(to top, rgba(43,36,20,.5) 0%, rgba(43,36,20,.22) 40%, transparent 100%);
  }
  /* Das Abzeichen saß über dem Button „Besichtigung anfragen“ — hier sitzt es
     stattdessen am oberen Rand des Bildes. */
  .cta-media .welcome-badge { top: 8px; right: 8px; width: 104px; height: 104px; }

  /* --kopf-zeile = Logozeile, --band-h = Farbband, --kopf-h = beides zusammen.
     Schublade, Ankersprünge und die Ausweichbewegung hängen daran, damit beim
     Nachjustieren nichts auseinanderläuft. */
  :root { --kopf-zeile: 66px; --band-h: 12px; --kopf-h: calc(var(--kopf-zeile) + var(--band-h)); }
  .nav-toggle { display:flex; }
  html { scroll-padding-top: calc(var(--kopf-h) + 12px); }

  /* Der Header klebt am oberen Rand. Beim Runterscrollen fährt nur die Logozeile
     nach oben weg — das Farbband bleibt als schmale Kante oben angedockt, wie das
     Hauptmenü auf Desktop. Beim Hochscrollen kommt die Logozeile sofort zurück. */
  .site-header {
    position: sticky; top: 0; z-index: 105;
    background: var(--color-bg);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .site-header.header-hidden { transform: translateY(calc(-1 * var(--kopf-zeile))); }

  /* Farbband unter der Logozeile: die sieben Menüfarben in Menü-Reihenfolge,
     randlos über die volle Breite. Ersetzt die Trennlinie. */
  .site-header::after {
    content: ""; display: block; height: var(--band-h);
    background: linear-gradient(90deg,
      var(--nav-1-menue) 0 14.286%, var(--nav-2) 0 28.571%, var(--nav-3) 0 42.857%,
      var(--nav-4) 0 57.143%, var(--nav-5) 0 71.429%, var(--nav-6) 0 85.714%, var(--nav-7) 0);
  }
  /* Bei offener Schublade trägt das Menü die Farben selbst — das Band darüber
     würde sie unmittelbar wiederholen und wie ein Darstellungsfehler wirken. */
  body:has(.mega-nav.open) .site-header::after { visibility: hidden; }

  .header-top { border-bottom: none; padding: 10px 20px; height: var(--kopf-zeile); }
  .brand svg, .brand img { height: 46px; }
  .brand-text { font-size: var(--text-h3); }
  .brand-text small { font-size: var(--text-micro); }

  /* Die Schublade fährt von oben herunter — sie kommt aus dem Header, unter dem
     sie beim Öffnen hervorrollt. Der Header liegt darüber und bleibt bedienbar. */
  .mega-nav {
    position:fixed; inset: 0; width:100%; height:100dvh;
    flex-direction:column; align-items:stretch; background: var(--color-surface);
    box-shadow: none; transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto;
    padding-top: var(--kopf-h); padding-bottom: 2rem;
    /* Untermenüs klappen im Fluss auf, die Nav scrollt bei Bedarf mit */
    justify-content:flex-start;
  }
  .mega-nav.open { transform: translateY(0); }

  /* Reduziert: kein Farbfeld hinter dem Eintrag, sondern ruhiger Text.
     Die Zugehörigkeit trägt allein die Trennlinie in der jeweiligen Menüfarbe. */
  .mega-item {
    flex-direction:row; flex-wrap:wrap; flex: 0 0 auto; align-items:flex-start;
    border-bottom: 2px solid var(--nav-color);
  }
  .mega-item > a {
    justify-content:flex-start; text-align:left; min-height:56px; height:56px;
    font-size: var(--text-body); border-right:none; flex:1 1 0%; min-width:0;
    background: transparent; padding-left: 20px;
  }
  .mega-toggle { display:flex; height:56px; background: transparent; }
  .mega-submenu {
    position:static; flex:1 0 100%; width:100%; min-width:0; box-shadow:none; opacity:1; visibility:visible; transform:none;
    background: transparent;
    max-height:0; padding:0; overflow:hidden; transition: max-height .3s ease;
  }
  .mega-submenu { padding-inline: 20px; }
  .mega-submenu a { color: var(--ink-soft); }
  .mega-item.open .mega-submenu { max-height:500px; padding-block:.2rem .8rem; }
  /* Teaser auf dieselbe Fluchtlinie wie die Menüpunkte */
  .mega-item.open .mega-submenu--teaser { padding: .9rem 0 1.1rem; }
  /* Der Active-Balken sitzt im Desktop-Menü unter bzw. über der Leiste. Im mobilen
     Menü unterstreicht er den aktiven Punkt — 5px statt der 2px-Trennlinie, exakt
     auf ihr liegend. Niemals als senkrechter Streifen. */
  .mega-item::after {
    top:auto; bottom:-2px; left:0; right:0;
    width:auto; height:5px; transform:none; transition: background-color .2s ease;
  }
  .mega-nav.flip-up .mega-item::after { top:auto; bottom:-2px; transform:none; }
}

@media (max-width: 760px) {
  section { padding: 4.2rem 0; }
  .card-grid { grid-template-columns: 1fr; }
  .card-grid--2x2 { grid-template-columns: 1fr; }
  .grundlagen-grid { grid-template-columns: 1fr; }
  .rhythmus-grid { grid-template-columns: 1fr; gap: 0; }
  .gem-media { grid-template-columns: 1fr; }
  .gem-media img:first-child { grid-row: auto; height: auto; }
  .news-grid { grid-template-columns: 1fr; }
  .cta-facts { grid-template-columns: 1fr; }
  .times-bar { flex-direction:column; gap:1.4rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom { flex-direction:column; }
  .gal-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 190px; }
  .gal-grid .w2 { grid-column: span 2; }
  .contact-form-card { padding: 1.8rem 1.5rem; }
  .contact-addresses { grid-template-columns: 1fr; gap: 1.4rem; }

  /* 1) Footer-Logo kleiner, damit die Wortmarke nicht umbricht */
  .footer-brand .brand svg, .footer-brand .brand img { height: 38px; }
  .footer-brand .brand-text { font-size: var(--text-lead); }
  .footer-brand .brand-text small { font-size: var(--text-micro); }
  .footer-brand { padding-right: 0; }
  /* Die feste Textbreite ließ den Absatz rechts eingerückt wirken */
  .footer-brand p { max-width: none; }

  /* 2) Die drei festen Schaltflächen sollen das Instagram-Symbol nicht überdecken */
  .footer-social { justify-content:flex-start; margin-bottom: 2.6rem; }

  /* 9) Footer-Inhalt exakt so einrücken wie der übrige Seiteninhalt */
  .site-footer .wrap { padding-left: 24px; padding-right: 24px; }
  .footer-bottom { align-items:flex-start; }
}

/* ---------- Mobil-Feinschliff (Header, Hero-Badge, Übergroße Elemente) ---------- */
@media (max-width: 600px) {
  body { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  /* Überschriften trennen nur an gesetzten Stellen (&shy;), nicht nach
     Browser-Wörterbuch — sonst wird aus „Waldorf-kinder-garten“ ein
     „Waldorfkindergar-ten“. overflow-wrap bleibt als Notbremse. */
  h1, h2, h3, h4 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
  .no-hyphens { hyphens: none; -webkit-hyphens: none; }
  /* Kompakter Kopf nach Vorbild anthroposophie.ch: schmales Farbband, flache Zeile */
  :root { --kopf-zeile: 54px; }
  .header-top { padding: 10px 16px; }
  .brand { gap: 9px; min-width: 0; }
  .brand svg, .brand img { height: 34px; flex-shrink: 0; }
  .brand-text { font-size: var(--text-small); }
  .brand-text small { font-size: var(--text-micro); }
  .nav-toggle { flex-shrink: 0; }

  .hero { min-height: 520px; }
  .hero-quote { padding: 1.5rem; }
  .welcome-badge { width: 128px; height: 128px; top: -46px; right: 12px; }
  .intro-news-box, .intro-highlight { padding: 2rem 1.6rem 1.8rem; }
  .intro-stats-box { padding: 1.6rem 1.6rem 1.8rem; }
  .intro-stats-box .intro-stats { gap: 1.2rem; }
}
@media (max-width: 380px) {
  .brand-text small { display: none; }
}

/* ---------- Stellenangebote ---------- */
.page-hero { padding: 4rem 0 3rem; background: var(--paper); }
.page-hero.aquarell { background: #FBF7F2; }
/* Hero, der allein vom Zitat lebt: mittig gesetzt, mit Luft drumherum */
.page-hero--zitat { padding: 6rem 0 6.5rem; text-align: center; }
.page-hero--zitat .wrap { display: flex; justify-content: center; }
.page-hero--zitat p.quote-mark {
  margin: 0; max-width: 26em;
  text-align: center;
}
.page-hero--zitat p.quote-mark::before { left: -.55em; }
/* Quellenangabe unter Zitaten: kleiner, mit Abstand abgesetzt */
/* Feste Stufe statt em-relativ — sonst richtet sich die Größe nach dem Zitat
   darüber und fällt je nach Seite anders aus. */
.quote-mark .quelle, .leitbild-quote .quelle, .hervor .quelle {
  display: block; margin-top: 1.1rem;
  font-size: var(--text-small); font-style: normal; letter-spacing: .02em;
  color: var(--ink-soft); opacity: .85;
}
@media (max-width: 780px) {
  .page-hero--zitat { padding: 4rem 0 4.5rem; }
  .page-hero--zitat p.quote-mark::before { left: -.2em; }
}
.page-hero p { max-width: 680px; color: var(--ink-soft); font-size: var(--text-body); margin-top: 1rem; }
.page-hero p.quote-mark { max-width: none; font-size: var(--text-h1); color: var(--color-text); margin-top: 3.2rem; }
.page-hero h1 { margin-top: .2rem; }

.jobs-hero { padding: 4rem 0 3rem; background: var(--paper); }
.jobs-hero p { max-width: 680px; color: var(--ink-soft); font-size: var(--text-body); margin-top: 1rem; }
.jobs-quicklinks, .quicklinks { display:flex; flex-wrap:wrap; gap: .7rem; margin-top: 1.8rem; }
.jobs-quicklinks a, .quicklinks a { font-size: var(--chip-size); font-weight: var(--chip-weight); background: var(--paper); color: var(--color-text); padding: .5rem 1rem; border-radius: 0; border: 1px solid var(--line); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.jobs-quicklinks a:hover, .quicklinks a:hover { background: var(--page-fill); color: var(--page-ink); border-color: var(--page-fill); }

.jobs-list { background: var(--paper); padding: 4rem 0 6rem; }
.job-card { background: var(--nav-6-light); border-radius: var(--radius); padding: 2.2rem 2.4rem; margin-bottom: 2rem; box-shadow: 0 14px 40px -26px rgba(43,36,20,.3); }
.job-card:last-child { margin-bottom: 0; }
.job-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom: 1rem; }
.job-head h2 { font-size: var(--text-h3); }
.job-meta { display:flex; flex-wrap:wrap; gap:.5rem; }
/* Fußnote unter einer Stelle */
.job-hinweis { font-size: var(--text-small); color: var(--ink-soft); }
.job-meta span { font-size: var(--chip-size); background: var(--color-surface); color: var(--color-text); padding:.3rem .65rem; border-radius:0; font-weight: var(--chip-weight); white-space:nowrap; }
.job-teaser { color: var(--ink-soft); margin-bottom: .9rem; }
.job-card-details > p { color: var(--ink-soft); margin-bottom: 1.1rem; }
/* Wie beim Aufklapper: der Seitenton käme auf der rosa Fläche nur auf 3,27:1. */
.job-card h3 { font-size: var(--text-body); color: #904255; margin: 1.2rem 0 .5rem; }
.job-card ul { padding-left: 1.1rem; list-style: disc; display:grid; gap: .35rem; margin-bottom: .5rem; }
.job-card li { color: var(--ink-soft); font-size: var(--text-body); }
.job-card .job-apply { margin-top: 1.5rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.job-card .job-apply .post { font-size: var(--text-label); color: var(--ink-soft); }
.job-toggle{
  display:inline-flex; align-items:center; gap:.4rem; background:none; border:none; cursor:pointer;
  color: #904255;   /* auf der rosa Fläche käme der Seitenton nur auf 3,27:1 */
  font-family: var(--font-hand); font-weight:700; font-size: var(--text-small); padding:.2rem 0;
}
.job-toggle .ico { width:16px; height:16px; transition: transform .25s ease; }
.job-toggle.open .ico { transform: rotate(180deg); }
.job-card-details { max-height:0; overflow:hidden; opacity:0; transition: max-height .35s ease, opacity .3s ease; }
.job-card-details.open { opacity:1; }

/* ---------- Vorschau-Zugangsseite ---------- */
/* ---------- Vorschau-Zugang ---------- */
/* Auftritt wie die Website selbst: Farbstreifen oben, cremefarbener Grund mit
   zarter Aquarellwaschung, weiße Karte, Logo im gewohnten Satz. */
.gate-band { display:flex; height: 10px; }
.gate-band span { flex:1; }
.gate-wrap {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 10px);
  display:flex; align-items:center; justify-content:center;
  padding: 2rem; background: var(--color-bg);
}
.gate-wrap::before {
  content:""; position:absolute; inset:-120px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 42% at 14% 18%, rgba(237,221,120,.42), transparent 64%),
    radial-gradient(ellipse 44% 40% at 84% 24%, rgba(228,162,175,.36), transparent 64%),
    radial-gradient(ellipse 50% 44% at 30% 84%, rgba(166,192,126,.34), transparent 64%),
    radial-gradient(ellipse 42% 40% at 78% 78%, rgba(147,184,203,.36), transparent 64%);
  filter: blur(30px);
}
.gate-card {
  width: 100%; max-width: 440px; background: var(--paper);
  padding: 3rem 2.8rem 2.8rem;
  box-shadow: 0 24px 60px -34px rgba(43,36,20,.45);
  display:flex; flex-direction:column;
}
.gate-marke { display:flex; align-items:center; gap: 14px; margin-bottom: 2rem; }
.gate-marke svg { height: 46px; width:auto; flex-shrink:0; }
.gate-marke .brand-text { font-size: var(--text-h3); }
.gate-card .eyebrow { color: var(--nav-1-active); }
.gate-card h1 { font-size: var(--text-h2); margin: .3rem 0 .9rem; color: var(--color-display); }
.gate-card > p { color: var(--ink-soft); margin-bottom: 1.8rem; }
.gate-card label {
  font-size: var(--text-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-soft); margin-bottom:.4rem; display:block;
}
/* Umrandet statt gefüllt — dieselbe Feldsprache wie das Kontaktformular. */
.gate-card input[type="password"] {
  width:100%; padding:.85rem .95rem; background: transparent; color: var(--color-text);
  border: 1px solid var(--line); border-radius: 0;
  font-family: var(--font-body); font-size: var(--text-body); margin-bottom: 1.6rem;
}
.gate-card input[type="password"]:focus {
  outline: none; border-color: var(--nav-1); box-shadow: 0 0 0 3px rgba(197,95,80,.22);
}
.gate-card .btn-primary { justify-self:start; }
/* Höhere Spezifität als .gate-card > p — sonst bliebe der Fehlertext grau. */
.gate-card > p.gate-error {
  color: var(--color-text); font-weight:600; font-size: var(--text-small);
  padding: .75rem .95rem; margin-bottom:1.4rem;
  background: var(--nav-1-light);
}
@media (max-width: 520px) {
  .gate-card { padding: 2.2rem 1.6rem 2rem; }
}

/* ---------- Vorschau eines Entwurfs ----------
   Erscheint nur über einen signierten Link aus dem Backend. Der Balken muss
   unübersehbar sein, damit niemand einen Entwurf für veröffentlicht hält. */
.vorschau-balken {
  position: sticky; top: 0; z-index: 200;
  padding: .7rem 24px; text-align: center;
  font-family: var(--font-body); font-size: var(--text-body); line-height: 1.4;
  color: var(--color-text); background: var(--nav-2-light); border-bottom: 2px solid var(--nav-2-active);
}
.vorschau-balken b { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Verweis vom Hauptraster hinunter ins Archiv */
.archiv-verweis { margin-top: 1.8rem; }
/* Vergangene Termine wirken zurückgenommen — sie sind Nachschlagewerk, nicht Angebot. */
.news-grid--archiv .news-card { opacity: .82; }
.news-grid--archiv .news-card:hover { opacity: 1; }

/* ---------- Fehlerseite ---------- */
/* Braun aus der Kategorie-Palette (nav-8, Sand/Ocker): Weiß darauf kommt auf
   5,70:1 und trägt damit auch für die kleineren Beschriftungen. */
/* Weiß wie der Seitenkopf darüber — die Buttons gehören zum Text, nicht in
   einen eigenen Block. Entsprechend knapp der Abstand. */
.fehlerseite { background: var(--paper); padding-top: 0; padding-bottom: 4rem; }
.fehler-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 0; }
.fehler-links .btn-outline { border-color: var(--nav-8-active); color: var(--nav-8-active); }
.fehler-links .btn-outline:hover,
.fehler-links .btn-outline:focus-visible { background: var(--nav-8-active); color: #fff; }
@media (max-width: 560px) {
  .fehler-links { flex-direction: column; align-items: stretch; }
  .fehler-links .btn { justify-content: center; }
}