@import url('fonts.css');

/* ===========================================================================
   Evangelischer Kindergarten „Sonnenschein" Schmalkalden
   Ein einziges Stylesheet, keine Abhängigkeiten, kein Build-Schritt.

   Gliederung
   1  Farb- und Maßtokens
   2  Grundlagen und Typografie
   3  Layout-Hilfen
   4  Kopfbereich und Navigation
   5  Startbild und Seitenköpfe
   6  Schaltflächen
   7  Karten und Raster
   8  Bausteine (Zeitleiste, Akkordeon, Schritte, Zahlen, Bild-Text)
   9  Fußbereich
   10 Hilfsklassen, Platzhalter, Bewegungsreduktion
   =========================================================================== */

/* --- 1  Farb- und Maßtokens ------------------------------------------------ */

:root {
  --grund:          #fffdf7;
  --grund-warm:     #fdf4e3;
  --flaeche:        #ffffff;
  --flaeche-leise:  #f6f1e7;

  --text:           #1b2a33;
  --text-leise:     #4b5f6b;

  --primaer:        #0f5670;
  --primaer-hell:   #17708f;
  --primaer-dunkel: #0a3d51;
  --auf-primaer:    #ffffff;

  /* Logo-Orange, exakt aus der Vorlage des Kindergartens übernommen.
     --marke ist die Flächenfarbe, --marke-tief die Textvariante. Sie muss auch
     auf der gedeckten Fläche --flaeche-leise noch 4,5:1 erreichen; #c2450d lag
     dort bei 4,49:1 und war damit knapp zu hell. #b8400b erreicht 4,81:1. */
  --marke:          #f25a19;
  --marke-tief:     #b8400b;
  --marke-zart:     #fde7db;

  --akzent:         #ffc93c;
  --akzent-tief:    #e08c00;
  --auf-akzent:     #33240a;

  --gruen:          #2f7d55;
  --beere:          #b23a58;

  --rand:           #e7ddc9;
  --rand-stark:     #cdbfa4;

  /* Gruppenfarben – dunkel genug für weiße Schrift darauf */
  --gr-rot:   #b8352f;
  --gr-gruen: #2f7d55;
  --gr-gelb:  #8f5f00;
  --gr-blau:  #16607d;

  --schatten:       0 1px 2px rgba(20, 40, 50, .06), 0 8px 24px -12px rgba(20, 40, 50, .22);
  --schatten-hoch:  0 2px 6px rgba(20, 40, 50, .08), 0 20px 44px -20px rgba(20, 40, 50, .34);

  --radius:      18px;
  --radius-klein: 10px;
  --radius-gross: 32px;

  --breite:      1180px;
  --breite-text: 68ch;

  --schrift-display: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --schrift-text:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --uebergang: 180ms ease;

  color-scheme: light;
}

:root[data-theme='dunkel'] {
  --grund:          #0f2029;
  --grund-warm:     #142b35;
  --flaeche:        #17303b;
  --flaeche-leise:  #1d3b48;

  --text:           #eef5f7;
  --text-leise:     #adc5cf;

  --primaer:        #79cbe6;
  --primaer-hell:   #9adcf1;
  --primaer-dunkel: #b9e7f7;
  --auf-primaer:    #06232f;

  --marke:          #ff7a3d;
  --marke-tief:     #ffa373;
  --marke-zart:     #3a2016;

  --akzent:         #ffc93c;
  --akzent-tief:    #ffd977;
  --auf-akzent:     #2b1d05;

  --gruen:          #6fc998;
  --beere:          #f08fa6;

  --rand:           #27454f;
  --rand-stark:     #3d626e;

  --gr-rot:   #e0736c;
  --gr-gruen: #6fc998;
  --gr-gelb:  #e0ac4b;
  --gr-blau:  #6cc2e0;

  --schatten:       0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --schatten-hoch:  0 2px 6px rgba(0, 0, 0, .45), 0 20px 44px -20px rgba(0, 0, 0, .7);

  color-scheme: dark;
}

/* --- 2  Grundlagen und Typografie ------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: clamp(1.02rem, .98rem + .2vw, 1.14rem);
  line-height: 1.68;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .6vw, 1.45rem); }
h4 { font-size: 1.08rem; font-weight: 700; }

p, ul, ol, dl, figure, table { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--primaer);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
a:hover { color: var(--primaer-hell); }

strong, b { font-weight: 700; }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

hr {
  border: 0;
  border-top: 2px dotted var(--rand-stark);
  margin: 2.5rem 0;
}

:focus-visible {
  outline: 3px solid var(--akzent-tief);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--akzent); color: var(--auf-akzent); }

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

.sprung-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 200;
  padding: .8rem 1.3rem;
  background: var(--primaer);
  color: var(--auf-primaer);
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--uebergang);
}
.sprung-link:focus { top: 0; color: var(--auf-primaer); }

/* --- 3  Layout-Hilfen ------------------------------------------------------ */

.huelle {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}
@media (max-width: 30rem) { .huelle { width: calc(100% - 1.75rem); } }

.abschnitt { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.abschnitt--eng { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.abschnitt--warm { background: var(--grund-warm); }
.abschnitt--flaeche { background: var(--flaeche-leise); }

.abschnitt__kopf { max-width: var(--breite-text); margin-bottom: 2.4rem; }
.abschnitt__kopf > p { color: var(--text-leise); font-size: 1.08em; }

.fliesstext { max-width: var(--breite-text); }
.fliesstext h2 { margin-top: 2.2em; }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 { margin-top: 1.8em; }
.fliesstext ul, .fliesstext ol { padding-left: 1.3em; }
.fliesstext li { margin-bottom: .45em; }
.fliesstext li::marker { color: var(--akzent-tief); font-weight: 700; }

/* Bildnachweis im Impressum: zwanzig Zeilen, die niemand am Stück liest.
   Deshalb enger und leiser gesetzt als eine normale Aufzählung. */
.nachweis { font-size: .95rem; }
.fliesstext .nachweis li { margin-bottom: .2em; color: var(--text-leise); }

.augbraue {
  display: inline-flex;
  align-items: flex-start;   /* damit der Strich bei Umbruch an der ersten Zeile bleibt */
  gap: .55rem;
  margin-bottom: .9rem;
  font-family: var(--schrift-display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marke-tief);
}
.augbraue::before {
  content: '';
  flex: none;
  width: 1.6rem; height: 3px;
  margin-top: .62em;
  border-radius: 3px;
  background: var(--marke);
}

/* Welle als Abschnittstrenner */
.welle { display: block; width: 100%; height: clamp(38px, 5vw, 70px); }
.welle path { fill: var(--grund); }
.welle--warm path { fill: var(--grund-warm); }
.welle--flaeche path { fill: var(--flaeche-leise); }

/* --- 4  Kopfbereich und Navigation ----------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.6rem;
  padding-block: .55rem;
}

/* Wortmarke: Sonne und Schriftzug liegen als getrennte SVG-Dateien vor,
   damit die Sonne auch allein als Gestaltungselement verwendet werden kann.
   Im dunklen Design wird das Orange leicht aufgehellt – ein SVG im
   img-Element lässt sich nicht per currentColor einfärben. */
.marke {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  margin: 0;
  text-decoration: none;
  color: var(--text);
}
.marke__sonne {
  width: 3.05rem; height: 3.05rem;
  flex: none;
  transition: transform 600ms cubic-bezier(.34, 1.4, .64, 1);
}
.marke__schrift { width: 11.6rem; height: auto; flex: none; }

.marke:hover .marke__sonne { transform: rotate(24deg) scale(1.06); }

:root[data-theme='dunkel'] .marke__sonne,
:root[data-theme='dunkel'] .marke__schrift { filter: brightness(1.18); }

@media (max-width: 30rem) {
  .marke { gap: .55rem; }
  .marke__sonne { width: 2.5rem; height: 2.5rem; }
  .marke__schrift { width: 9rem; }
}

/* Auf sehr schmalen Geräten (ab 320 px) müssen Logo und die beiden
   Schaltflächen zusammen in 292 px passen. */
@media (max-width: 24rem) {
  .kopf__innen { gap: .5rem; min-height: 4.1rem; }
  .marke { gap: .42rem; }
  .marke__sonne { width: 2.15rem; height: 2.15rem; }
  .marke__schrift { width: 7.4rem; }
  .kopf__aktionen { gap: .3rem; }
  .icon-knopf { width: 2.6rem; height: 2.6rem; }
}

.nav { margin-left: auto; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: .58rem .62rem;
  border-radius: var(--radius-klein);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: .93rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--uebergang), color var(--uebergang);
}
.nav__link:hover { background: var(--flaeche-leise); color: var(--primaer); }
.nav__link[aria-current='page'] {
  color: var(--primaer);
  background: color-mix(in srgb, var(--akzent) 26%, transparent);
}

.kopf__aktionen { display: flex; align-items: center; gap: .45rem; }

.icon-knopf {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
  transition: background var(--uebergang), border-color var(--uebergang);
}
.icon-knopf:hover { background: var(--flaeche-leise); border-color: var(--rand-stark); }
.icon-knopf svg { width: 1.3rem; height: 1.3rem; }

.nav-schalter { display: none; }

/* Symbol des Umschalters: Sonne im Hell-, Mond im Dunkelmodus */
.icon-mond { display: none; }
:root[data-theme='dunkel'] .icon-sonne { display: none; }
:root[data-theme='dunkel'] .icon-mond  { display: block; }

/* Neun Navigationspunkte brauchen mehr Platz als acht – deshalb klappt das
   Menü erst bei 74rem um, nicht schon bei 62rem. */
@media (max-width: 74rem) {
  .nav-schalter { display: inline-grid; }

  /* Die Navigation liegt jetzt fest positioniert über der Seite und zählt
     damit nicht mehr im Kopf mit. Ohne diese Zeile rutschen Umschalter und
     Menüknopf direkt neben das Logo statt an den rechten Rand. */
  .kopf__aktionen { margin-left: auto; }

  /* An den Seitenkopf gehängt statt auf einen festen Abstand gesetzt: Der
     Kopf ist auf schmalen Geräten niedriger, ein fester Wert hinterließ dort
     einen Spalt zwischen Kopf und aufgeklapptem Menü. `.kopf` ist sticky und
     damit positioniert, `100 %` trifft also immer seine Unterkante. */
  .nav {
    position: absolute;
    inset: 100% 0 auto;
    margin: 0;
    padding: .6rem 1.25rem 1.4rem;
    background: var(--grund);
    border-bottom: 1px solid var(--rand);
    box-shadow: var(--schatten-hoch);
    display: none;
  }
  .nav[data-offen='ja'] { display: block; }

  .nav__liste { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__link { padding: .85rem .9rem; font-size: 1.06rem; }
}

/* --- 5  Startbild und Seitenköpfe ------------------------------------------ */

/* Fester Dunkelton statt eines Farbtokens: Der Verlauf darüber ist in beiden
   Darstellungen dunkel, und im Dunkelmodus ist --primaer-dunkel bewusst hell.
   Als Rückfallfarbe – falls das Foto nicht lädt – muss hier Dunkel stehen. */
.start {
  position: relative;
  background: #082e3e;
  color: #fff;
  isolation: isolate;
}

.start__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}

.start::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
              rgba(8, 46, 62, .93) 0%,
              rgba(8, 46, 62, .84) 46%,
              rgba(8, 46, 62, .55) 100%);
}

.start__innen {
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem);
  max-width: 40rem;
}

.start h1 { color: #fff; margin-bottom: .5rem; }
.start__vorspann {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem);
  color: #e6f3f8;
  margin-bottom: 1.9rem;
}
.start .augbraue { color: var(--akzent); }
.start .augbraue::before { background: var(--akzent); }

.start__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
.start__fakten li {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-size: .93rem;
  font-weight: 600;
}

/* Seitenkopf der Unterseiten */
.seitenkopf {
  position: relative;
  isolation: isolate;
  background: #082e3e;
  color: #fff;
}
.seitenkopf__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.seitenkopf::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(8, 46, 62, .93), rgba(8, 46, 62, .68));
}
.seitenkopf__innen { padding-block: clamp(2.6rem, 2rem + 3.5vw, 4.4rem); max-width: 46rem; }
.seitenkopf h1 { color: #fff; margin-bottom: .35rem; }
.seitenkopf p { color: #e2f0f5; font-size: 1.1em; margin: 0; }
.seitenkopf .augbraue { color: var(--akzent); }
.seitenkopf .augbraue::before { background: var(--akzent); }

/* Brotkrumen */
.krumen { padding-block: .9rem; font-size: .9rem; color: var(--text-leise); }
.krumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .55rem;
  list-style: none;
  margin: 0; padding: 0;
}
.krumen li + li::before { content: '›'; margin-right: .55rem; color: var(--rand-stark); }
/* inline-block + Innenabstand bringt die Klickfläche auf die von WCAG 2.2
   geforderten 24 px Höhe (2.5.8 Zielgröße). */
.krumen a { color: var(--text-leise); display: inline-block; padding-block: .18rem; }
.krumen [aria-current='page'] { color: var(--text); font-weight: 600; }

/* --- 6  Schaltflächen ------------------------------------------------------ */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--uebergang), background var(--uebergang),
              border-color var(--uebergang), color var(--uebergang);
}
.knopf:hover { transform: translateY(-2px); }

.knopf--sonne { background: var(--akzent); color: var(--auf-akzent); }
.knopf--sonne:hover { background: var(--akzent-tief); color: #fff; }

.knopf--primaer { background: var(--primaer); color: var(--auf-primaer); }
.knopf--primaer:hover { background: var(--primaer-hell); color: var(--auf-primaer); }

.knopf--marke { background: var(--marke-tief); color: #fff; }
.knopf--marke:hover { background: var(--marke); color: #fff; }
:root[data-theme='dunkel'] .knopf--marke { color: #2b1206; }

.knopf--rand { border-color: currentColor; color: inherit; }
.knopf--rand:hover { background: rgba(255, 255, 255, .14); color: inherit; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- 7  Karten und Raster -------------------------------------------------- */

.raster { display: grid; gap: 1.35rem; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.karte {
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.karte__bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.karte__inhalt { padding: 1.4rem 1.5rem 1.5rem; }
.karte__inhalt > :last-child { margin-bottom: 0; }
.karte h3 { margin-bottom: .45rem; }
.karte p { color: var(--text-leise); }

a.karte { text-decoration: none; color: inherit; transition: transform var(--uebergang), box-shadow var(--uebergang); }
a.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
a.karte h3 { color: var(--primaer); }

/* Gruppenkarte mit Farbleitsystem – Farbe steht nie allein, immer mit Text */
.gruppe { border-top: 6px solid var(--gruppenfarbe, var(--primaer)); }
.gruppe--rot   { --gruppenfarbe: var(--gr-rot); }
.gruppe--gruen { --gruppenfarbe: var(--gr-gruen); }
.gruppe--gelb  { --gruppenfarbe: var(--gr-gelb); }
.gruppe--blau  { --gruppenfarbe: var(--gr-blau); }

/* Selektor bewusst mit .karte davor: sonst gewinnt die allgemeinere Regel
   `.karte p` und färbt den Text grau auf farbigem Grund. */
.karte .gruppe__marke {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem .8rem;
  margin-bottom: .8rem;
  border-radius: 999px;
  background: var(--gruppenfarbe);
  color: #fff;
  font-family: var(--schrift-display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .03em;
}
:root[data-theme='dunkel'] .karte .gruppe__marke { color: #0f2029; }

.gruppe__daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1rem;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--rand-stark);
  font-size: .95rem;
}
.gruppe__daten dt { color: var(--text-leise); }
.gruppe__daten dd { margin: 0; font-weight: 600; }

/* --- 8  Bausteine ---------------------------------------------------------- */

/* Zeitleiste Tagesablauf
   Die Uhrzeit steht als Schild in der Karte und nicht mehr in einer schmalen
   Spalte daneben: „6.00 – 7.00 Uhr“ passt so immer in eine Zeile, und der
   Aufbau bleibt von 320 px bis Desktop derselbe. Wegmarke ist die Sonne aus
   dem Logo. */
.zeitleiste {
  list-style: none;
  margin: 0;
  padding-left: 3.1rem;
  position: relative;
  display: grid;
  gap: .85rem;
}
.zeitleiste::before {
  content: '';
  position: absolute;
  left: 1.09rem; top: 1.6rem; bottom: 1.6rem;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--akzent), var(--marke));
}
.zeitleiste li {
  position: relative;
  padding: .95rem 1.3rem 1.05rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
/* Die Sonne sitzt auf einer eigenen runden Fläche in Kartenfarbe. Damit
   verschwindet die Linie dahinter – und zwar unabhängig davon, auf welchem
   Abschnittshintergrund die Zeitleiste gerade steht. */
.zeitleiste li::before {
  content: '';
  position: absolute;
  left: -3.1rem; top: .8rem;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--flaeche) url('../img/logo-sonne.svg') center / 1.5rem no-repeat;
}
.zeitleiste__zeit {
  display: inline-block;
  margin-bottom: .3rem;
  padding: .18rem .75rem;
  border-radius: 999px;
  background: var(--marke-zart);
  /* Etwas tiefer als --marke-tief: Auf der hellen Chipfläche kommt der
     Standardton nur auf 4,67:1, dieser hier auf 5,7:1. Im Dunkelmodus
     stimmt das Verhältnis ohnehin, dort bleibt es beim Token. */
  color: #a13809;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: .88rem;
  white-space: nowrap;
}
:root[data-theme='dunkel'] .zeitleiste__zeit { color: var(--marke-tief); }
.zeitleiste__was {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
}
.zeitleiste__dazu {
  display: block;
  margin-top: .18rem;
  color: var(--text-leise);
  font-size: .95rem;
}

@media (max-width: 30rem) {
  .zeitleiste { padding-left: 2.5rem; gap: .7rem; }
  .zeitleiste::before { left: .84rem; }
  .zeitleiste li { padding: .85rem 1rem .95rem; }
  .zeitleiste li::before { left: -2.5rem; width: 1.8rem; height: 1.8rem; background-size: 1.32rem; }
}

/* Akkordeon */
.aufklapp {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  margin-bottom: .75rem;
  overflow: hidden;
}
.aufklapp__knopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.3rem;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--schrift-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.aufklapp__knopf:hover { background: var(--flaeche-leise); }
.aufklapp__pfeil {
  flex: none;
  margin-left: auto;
  width: 1.5rem; height: 1.5rem;
  color: var(--primaer);
  transition: transform var(--uebergang);
}
.aufklapp__knopf[aria-expanded='true'] .aufklapp__pfeil { transform: rotate(180deg); }
.aufklapp__inhalt { padding: 0 1.4rem 1.35rem; color: var(--text-leise); }
.aufklapp__inhalt > :last-child { margin-bottom: 0; }
.aufklapp__inhalt[hidden] { display: none; }

.aufklapp__symbol {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--akzent) 34%, transparent);
  font-size: 1.2rem;
}

/* Nummerierte Schritte */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 1.3rem 1.5rem 1.35rem 4.6rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 1.3rem; top: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1.15rem;
}
.schritte h3 { margin-bottom: .3rem; font-size: 1.12rem; }
.schritte p { margin: 0; color: var(--text-leise); }

/* Zahlen / Kennwerte */
.zahlen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.zahl {
  padding: 1.4rem 1.2rem;
  text-align: center;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.zahl__wert {
  display: block;
  font-family: var(--schrift-display);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--primaer);
}
.zahl__text { display: block; margin-top: .45rem; font-size: .95rem; color: var(--text-leise); }

/* Bild neben Text */
.bildtext {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.2rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.bildtext__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
}
.bildtext--gedreht .bildtext__medien { order: 2; }
@media (max-width: 52rem) { .bildtext--gedreht .bildtext__medien { order: 0; } }

/* Aufzählung mit Haken */
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.haken li { position: relative; padding-left: 2rem; }
.haken li::before {
  content: '';
  position: absolute;
  left: 0; top: .48em;
  width: 1.15rem; height: .6rem;
  border-left: 3px solid var(--gruen);
  border-bottom: 3px solid var(--gruen);
  transform: rotate(-45deg);
  border-radius: 2px;
}

/* Merkkasten */
.merkkasten {
  padding: 1.4rem 1.6rem;
  border-left: 6px solid var(--akzent);
  border-radius: var(--radius-klein);
  background: var(--grund-warm);
}
.merkkasten > :last-child { margin-bottom: 0; }
.merkkasten h2,
.merkkasten h3 { margin-bottom: .4rem; margin-top: 0; font-size: 1.15rem; }

/* Kontaktzeile */
.kontaktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kontaktliste li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: start; }
/* Ohne min-width:0 wächst die Rasterspalte an der langen E-Mail-Adresse
   über die Seitenbreite hinaus. */
.kontaktliste li > * { min-width: 0; }
.kontaktliste a { overflow-wrap: anywhere; }
.kontaktliste .symbol {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--akzent) 32%, transparent);
  color: var(--text);
}
.kontaktliste .symbol svg { width: 1.25rem; height: 1.25rem; }
.kontaktliste dt, .kontaktliste b { display: block; font-family: var(--schrift-display); font-weight: 800; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }

/* Karte mit Einwilligung */
.karten-platz {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--flaeche-leise);
}
.karten-platz img { width: 100%; height: auto; display: block; }
.karten-platz iframe { display: block; width: 100%; height: clamp(20rem, 45vw, 30rem); border: 0; }
.karten-hinweis {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .9rem;
  justify-items: center;
  padding: 1.5rem;
  text-align: center;
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  backdrop-filter: blur(2px);
}
.karten-hinweis p { max-width: 34rem; margin: 0; font-size: .97rem; }

/* --- 9  Fußbereich --------------------------------------------------------- */

.fuss {
  background: var(--primaer-dunkel);
  color: #dceaf0;
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) 0;
}
:root[data-theme='dunkel'] .fuss { background: #0a1a22; }

.fuss a { color: #ffe19a; }
.fuss a:hover { color: #fff; }

.fuss__raster {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.fuss h2 {
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .9rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
/* Klickfläche der Fußlinks auf komfortable Höhe bringen (WCAG 2.2, 2.5.8) */
.fuss ul a { display: inline-block; padding-block: .2rem; }
.fuss address { font-style: normal; line-height: 1.75; }
.fuss__marke { margin-bottom: 1.2rem; }
.fuss__marke .marke__sonne,
.fuss__marke .marke__schrift { filter: brightness(1.22); }

.fuss__unten {
  margin-top: 2.5rem;
  padding-block: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  font-size: .9rem;
}
.fuss__unten p { margin: 0; }
.fuss__unten nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.fuss__ersteller { color: #b9d0da; }
.fuss__ersteller a { display: inline-block; padding-block: .2rem; }

/* --- 9b  Verspielte Gestaltungselemente ------------------------------------
   Die Sonne aus dem Logo kehrt über die Seite verteilt wieder: als leiser
   Hintergrundstempel, als Aufzählungszeichen und als Blickfang im Startbild.
   Dazu kommen organische Bildformen und leichte Schrägen – gerade so viel,
   dass es freundlich wirkt, ohne die Lesbarkeit für Eltern zu stören.
   --------------------------------------------------------------------------- */

/* Sonnenstempel im Hintergrund eines Abschnitts */
.abschnitt--sonnig { position: relative; overflow: hidden; }
.abschnitt--sonnig::before {
  content: '';
  position: absolute;
  top: -3.5rem; right: -4rem;
  width: clamp(11rem, 20vw, 19rem);
  aspect-ratio: 1;
  background: url('../img/logo-sonne.svg') center / contain no-repeat;
  opacity: .09;
  transform: rotate(-14deg);
  pointer-events: none;
}
.abschnitt--sonnig > * { position: relative; }

.abschnitt--sonnig-links::before { right: auto; left: -4rem; transform: rotate(11deg); }
:root[data-theme='dunkel'] .abschnitt--sonnig::before { opacity: .13; }

/* Frei platzierbare Deko-Sonne */
.deko-sonne {
  position: absolute;
  width: 7rem;
  opacity: .85;
  pointer-events: none;
  user-select: none;
}

/* Aufzählung mit kleinen Sonnen statt Haken */
.sonnenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.sonnenliste li { position: relative; padding-left: 2.3rem; }
.sonnenliste li::before {
  content: '';
  position: absolute;
  left: 0; top: .16em;
  width: 1.55rem; height: 1.55rem;
  background: url('../img/logo-sonne.svg') center / contain no-repeat;
}

/* Organisch geformte Bilder – weiche, leicht unregelmäßige Rundung */
.bildtext__bild {
  border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%;
}
.bildtext--gedreht .bildtext__bild {
  border-radius: 44% 56% 55% 45% / 49% 53% 47% 51%;
}

/* Karten mit einer Spur Bewegung */
.karte--verspielt { text-align: center; }
.karte__symbol {
  font-size: 2.4rem;
  line-height: 1;
  margin: 0 0 .7rem;
}
a.karte:hover { transform: translateY(-4px) rotate(-.6deg); }

/* Gruppenmarke leicht schräg – wie ein aufgeklebtes Schildchen */
.karte .gruppe__marke { transform: rotate(-2deg); transform-origin: left center; }

/* Kennzahlen abwechselnd leicht gekippt */
.zahl { transition: transform var(--uebergang); }
.zahlen .zahl:nth-child(odd)  { transform: rotate(-1.1deg); }
.zahlen .zahl:nth-child(even) { transform: rotate(1.1deg); }
.zahl:hover { transform: rotate(0) scale(1.03); }

/* Handgezeichneter Markerstrich unter einzelnen Wörtern */
.hervor {
  position: relative;
  white-space: nowrap;
}
.hervor::after {
  content: '';
  position: absolute;
  left: -.12em; right: -.12em; bottom: .04em;
  height: .34em;
  background: var(--akzent);
  border-radius: 999px 999px 60% 40% / 999px 999px 100% 100%;
  opacity: .55;
  z-index: -1;
}

/* Aufklapp-Symbole in Markenfarbe hinterlegen */
.aufklapp__symbol { background: var(--marke-zart); }

/* --- 10  Hilfsklassen, Platzhalter, Bewegungsreduktion --------------------- */

.mitte { text-align: center; margin-inline: auto; }
.abstand-oben { margin-top: 2.2rem; }
.klein { font-size: .92rem; color: var(--text-leise); }

/* Noch nicht gelieferte Angaben bleiben sichtbar, statt still zu fehlen. */
.platzhalter {
  background: #fff2a8;
  color: #4a3a00;
  padding: .1em .45em;
  border-radius: 5px;
  font-weight: 600;
  font-style: normal;
  box-decoration-break: clone;
}
:root[data-theme='dunkel'] .platzhalter { background: #6b5a10; color: #ffeeb0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .knopf:hover, a.karte:hover, .zahl:hover { transform: none; }
  .marke:hover .marke__sonne { transform: none; }
  .zahlen .zahl:nth-child(odd),
  .zahlen .zahl:nth-child(even) { transform: none; }
}

@media print {
  .kopf, .fuss__unten nav, .sprung-link, .karten-hinweis, .icon-knopf { display: none; }
  body { background: #fff; color: #000; }
  .seitenkopf, .start { color: #000; background: #fff; }
  .seitenkopf::after, .start::after, .seitenkopf__bild, .start__bild { display: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .85em; }
}