/* =========================================================
   Krönchenkinder – Stylesheet
   Farben stammen direkt aus der Marken-Illustration.
   ========================================================= */

@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage-grotesque-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink:        #222221;
  --ink-weich:  #57565244;
  --text:       #3a3935;
  --grau:       #6e6c66;

  --sand:       #dbd8cf;
  --sand-hell:  #eeece6;
  --sand-blass: #f7f6f3;
  --papier:     #ffffff;

  --blau:       #6894bd;
  --himmel:     #7ebfda;
  --sonne:      #e9c92d;
  --orange:     #ce7327;
  --beere:      #c72f69;
  --gruen:      #5b9b5f;
  --limette:    #c0cf46;

  --display: 'Bricolage', 'Trebuchet MS', sans-serif;
  --body:    'Karla', -apple-system, 'Segoe UI', sans-serif;

  --wrap:  1180px;
  --lese:  62ch;

  /* Handgeschnittene Form, abgeleitet aus der Wortmarken-Blase */
  --blob:   22px 32px 24px 30px;
  --blob-l: 34px 54px 36px 48px;

  --raum:    clamp(3.5rem, 8vw, 7rem);
  --raum-s:  clamp(2rem, 4vw, 3.25rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

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

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 1.5rem + 4.2vw, 4.6rem); font-stretch: 92%; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.22; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lese { max-width: var(--lese); }
.lead {
  font-size: clamp(1.1rem, 1rem + .55vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
}
.klein { font-size: .875rem; color: var(--grau); }

/* ---------- Grundlayout ---------- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.abschnitt { padding-block: var(--raum); }
.abschnitt--eng { padding-block: var(--raum-s); }
.band--sand   { background: var(--sand-blass); }
.band--sand2  { background: var(--sand-hell); }
.band--ink    { background: var(--ink); color: #e8e6e0; }
.band--ink h2, .band--ink h3 { color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .9rem 1.4rem; z-index: 200;
  border-radius: 0 0 var(--blob);
}
.skip:focus { left: 0; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand);
}
.kopf__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
}
.marke { display: block; flex-shrink: 0; }
.marke img { height: 44px; width: auto; }

.nav__liste {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.nav__liste a {
  display: block;
  padding: .5rem .8rem;
  text-decoration: none;
  font-weight: 500;
  font-size: .975rem;
  color: var(--text);
  border-radius: 10px;
  transition: background-color .18s ease, color .18s ease;
}
.nav__liste a:hover { background: var(--sand-hell); color: var(--ink); }
.nav__liste a[aria-current='page'] {
  color: var(--ink);
  background: var(--sonne);
  border-radius: var(--blob);
}

.burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0; border: 0; background: transparent;
  cursor: pointer; border-radius: 12px;
}
.burger span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: var(--ink); border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 72px 0 auto 0;
    background: var(--papier);
    border-bottom: 1px solid var(--sand);
    max-height: 0; overflow: hidden;
    transition: max-height .32s ease;
  }
  .nav[data-offen='true'] { max-height: 70vh; overflow-y: auto; }
  .nav__liste {
    flex-direction: column; align-items: stretch;
    gap: 0; padding: .5rem 1.25rem 1.5rem;
  }
  .nav__liste a { padding: .85rem .9rem; font-size: 1.0625rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: .85rem 1.6rem;
  background: var(--ink); color: #fff;
  font-family: var(--display);
  font-weight: 600; font-size: 1.02rem;
  text-decoration: none;
  border: 0; cursor: pointer;
  border-radius: var(--blob);
  transition: transform .18s ease, background-color .18s ease;
}
.btn:hover { background: #3c3b38; transform: translateY(-2px); }
.btn--sonne { background: var(--sonne); color: var(--ink); }
.btn--sonne:hover { background: #f2d747; }
.btn--linie {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn--linie:hover { background: var(--ink); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  /* Maße der Szene als Variablen – die Handy-Ansicht rechnet damit */
  --hero-oben:      clamp(2.5rem, 6vw, 6rem);
  --szene-abstand:  clamp(.5rem, 1.5vw, 1rem);
  --szene-reserve:  clamp(110px, min(21vw, 22svh), 214px);
  --szene-boden:    clamp(70px, min(10vw, 13svh), 120px);
  --kopf-hoehe:     73px;   /* Kopfzeile 72px + 1px Linie */
  padding-top: var(--hero-oben);
  position: relative;
}
.hero h1 {
  max-width: 22ch;
  margin-bottom: .4em;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.75rem);
}
.hero__lead { max-width: 40ch; margin-bottom: 1.4rem; }

/* Szene läuft über die volle Breite.
   padding-top reserviert den Platz, den die höchste Figur über dem Band braucht. */
.hero__szene {
  position: relative;
  margin-top: var(--szene-abstand);
  /* Reservierter Platz über dem Band. Bewusst knapper als die Höhe des
     großen Kindes: Es darf nach oben herausragen, weil es rechts steht
     und der Textblock links endet. So bleibt das Band weit oben. */
  padding-top: var(--szene-reserve);
}
.hero__boden {
  background: var(--sand);
  height: var(--szene-boden);
}

/* Drei gleich breite Spalten: klein links, mittel in der Mitte, groß rechts.
   Die Begrenzung rückt die äußeren beiden zur Mitte hin zusammen. */
.hero__figuren {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: min(94vw, 64rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  justify-items: center;
}
.hero__fig {
  height: auto;
  transform-origin: bottom center;
}
.hero__fig--baby { width: clamp(104px, min(13vw, 28svh), 225px); }
.hero__fig--ball { width: clamp(98px,  min(12vw, 26svh), 208px); }
.hero__fig--auto { width: clamp(152px, min(18vw, 39svh), 318px); }

/* Nacheinander auftreten: erst links, dann Mitte, dann rechts.
   Jede Figur ist ein Drittel des Zyklus zu sehen. */
@media (prefers-reduced-motion: no-preference) {
  .hero__fig {
    opacity: 0;
    animation: auftreten 9s ease-in-out infinite backwards;
  }
  .hero__fig--baby { animation-delay: 0s; }
  .hero__fig--ball { animation-delay: 3s; }
  .hero__fig--auto { animation-delay: 6s; }
}

@keyframes auftreten {
  0%          { opacity: 0; transform: translateY(18px) scale(.94); }
  5%          { opacity: 1; transform: none; }
  28%         { opacity: 1; transform: none; }
  33%, 100%   { opacity: 0; transform: translateY(-14px) scale(.97); }
}

/* ---------- Oberer Hero: Text links, Fakten-Blase rechts ---------- */
.hero__oben {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 960px) {
  .hero__oben {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
    gap: clamp(2rem, 5vw, 5rem);
  }
}

/* Handy und Tablet: Text, darunter die Kinder am unteren Bildschirmrand,
   erst nach dem Scrollen die Fakten-Blase.
   .hero__oben löst sich dafür auf, damit sich die drei Teile frei
   umsortieren lassen. */
@media (max-width: 959px) {
  .hero {
    --hero-oben: clamp(1.5rem, 5vw, 2.5rem);   /* oben knapper, damit die Kinder ins Bild passen */
    display: flex;
    flex-direction: column;
    padding-bottom: var(--raum-s);
  }
  .hero__oben { display: contents; }

  .hero__text {
    order: 1;
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
    /* Text plus Szene füllen genau den ersten Bildschirm,
       das Band liegt damit am unteren Rand */
    min-height: calc(100vh - var(--kopf-hoehe) - var(--hero-oben)
                - var(--szene-abstand) - var(--szene-reserve) - var(--szene-boden));
    min-height: calc(100svh - var(--kopf-hoehe) - var(--hero-oben)
                - var(--szene-abstand) - var(--szene-reserve) - var(--szene-boden));
  }
  .hero__szene { order: 2; }
  /* .hero davor, weil die Grundregel der Blase weiter unten steht */
  .hero .fakten-blase {
    order: 3;
    width: min(100% - 2.5rem, 30rem);
    margin: clamp(2rem, 6vw, 3rem) 0 0 max(1.25rem, (100% - var(--wrap)) / 2);
  }
}

/* ---------- Fakten-Blase ----------
   Die Form ist die Silhouette der Sprechblase aus der Wortmarke,
   per Potrace vektorisiert. Als Maske eingesetzt, damit die Farbe
   über background steuerbar bleibt. */
.fakten-blase {
  /* Silhouette der Wortmarken-Blase, eingebettet – keine Anfrage, kein Ausfallrisiko */
  --blase: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 2034 1290%22 preserveAspectRatio=%22none%22%3E%3Cg transform=%22translate%280.000000,1290.000000%29 scale%280.100000,-0.100000%29%22 fill=%22%23000%22 stroke=%22none%22%3E %3Cpath d=%22M2640 12630 c-21 -30 -21 -30 -270 -30 -249 0 -249 0 -270 -30 -21 -30 -21 -30 -150 -30 -129 0 -129 0 -150 -30 -20 -28 -25 -30 -90 -30 -65 0 -70 -2 -90 -30 -20 -28 -25 -30 -90 -30 -65 0 -70 -2 -90 -30 -17 -24 -28 -30 -60 -30 -32 0 -43 -6 -60 -30 -17 -24 -29 -30 -57 -30 -31 0 -44 -8 -93 -60 -46 -49 -63 -60 -89 -60 -50 0 -421 -374 -421 -424 0 -27 -7 -39 -30 -56 -24 -17 -30 -28 -30 -60 0 -32 -6 -43 -30 -60 -24 -17 -30 -28 -30 -60 0 -32 -6 -43 -30 -60 -24 -17 -30 -28 -30 -60 0 -32 -6 -43 -30 -60 -28 -20 -30 -25 -30 -90 0 -65 -2 -70 -30 -90 -30 -21 -30 -21 -30 -150 0 -129 0 -129 -30 -150 -47 -34 -47 -7886 0 -7920 30 -21 30 -21 30 -150 0 -129 0 -129 30 -150 28 -20 30 -25 30 -90 0 -65 2 -70 30 -90 28 -20 30 -25 30 -90 0 -65 2 -70 30 -90 24 -17 30 -28 30 -60 0 -32 6 -43 30 -60 24 -17 30 -28 30 -60 0 -32 6 -43 30 -60 24 -17 30 -28 30 -60 0 -32 6 -43 30 -60 24 -17 30 -28 30 -60 0 -32 6 -43 30 -60 24 -17 30 -29 30 -57 0 -31 8 -44 60 -93 49 -46 60 -63 60 -88 0 -49 673 -722 722 -722 25 0 42 -11 88 -60 49 -52 62 -60 93 -60 28 0 40 -6 57 -30 17 -24 28 -30 60 -30 32 0 43 -6 60 -30 17 -24 28 -30 60 -30 32 0 43 -6 60 -30 17 -24 28 -30 60 -30 32 0 43 -6 60 -30 17 -24 28 -30 60 -30 32 0 43 -6 60 -30 20 -28 25 -30 90 -30 65 0 70 -2 90 -30 21 -30 22 -30 120 -30 98 0 99 0 120 -30 34 -47 13766 -47 13800 0 21 30 21 30 150 30 129 0 129 0 150 30 20 28 25 30 90 30 65 0 70 2 90 30 17 24 28 30 60 30 32 0 43 6 60 30 17 24 28 30 60 30 32 0 43 6 60 30 17 24 29 30 57 30 31 0 44 8 93 60 47 50 62 60 90 60 28 0 43 10 90 60 46 49 63 60 89 60 47 0 481 433 481 481 0 26 15 45 90 119 77 75 90 92 90 120 0 28 10 43 60 90 50 47 60 62 60 90 0 28 10 43 60 90 52 49 60 62 60 93 0 28 6 40 30 57 24 17 30 28 30 60 0 32 6 43 30 60 24 17 30 28 30 60 0 32 6 43 30 60 24 17 30 28 30 60 0 32 6 43 30 60 24 17 30 28 30 60 0 32 6 43 30 60 28 20 30 25 30 90 0 65 2 70 30 90 28 20 30 25 30 90 0 65 2 70 30 90 28 20 30 25 30 90 0 65 2 70 30 90 28 20 30 25 30 90 0 65 2 70 30 90 30 21 30 21 30 150 0 129 0 129 30 150 30 21 30 21 30 150 0 129 0 129 30 150 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 150 0 129 0 129 30 150 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 150 0 129 0 129 30 150 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 150 0 129 0 129 30 150 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 180 0 159 0 159 30 180 30 21 30 21 30 150 0 129 0 129 30 150 30 21 30 21 30 210 0 189 0 189 30 210 30 21 30 21 30 240 0 219 0 219 -30 240 -30 21 -30 21 -30 180 0 159 0 159 -30 180 -28 20 -30 25 -30 90 0 65 -2 70 -30 90 -28 20 -30 25 -30 90 0 65 -2 70 -30 90 -24 17 -30 28 -30 60 0 32 -6 43 -30 60 -24 17 -30 29 -30 57 0 31 -8 44 -60 93 -49 46 -60 63 -60 89 0 48 -493 541 -541 541 -26 0 -43 11 -89 60 -49 52 -62 60 -93 60 -28 0 -40 6 -57 30 -17 24 -28 30 -60 30 -32 0 -43 6 -60 30 -17 24 -28 30 -60 30 -32 0 -43 6 -60 30 -20 28 -25 30 -90 30 -65 0 -70 2 -90 30 -17 24 -28 30 -60 30 -32 0 -43 6 -60 30 -21 30 -22 30 -120 30 -98 0 -99 0 -120 30 -21 30 -22 30 -120 30 -98 0 -99 0 -120 30 -21 30 -21 30 -210 30 -189 0 -189 0 -210 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -300 30 -279 0 -279 0 -300 30 -21 30 -21 30 -330 30 -309 0 -309 0 -330 30 -21 30 -21 30 -420 30 -399 0 -399 0 -420 30 -21 30 -21 30 -420 30 -399 0 -399 0 -420 -30z%22/%3E %3C/g%3E%3C/svg%3E");
  position: relative;
  background: var(--sand);
  -webkit-mask: var(--blase) center / 100% 100% no-repeat;
          mask: var(--blase) center / 100% 100% no-repeat;
  /* Innenabstand großzügig, weil die Blase rechts nach innen kippt */
  padding: clamp(1.75rem, 3vw, 2.4rem) clamp(2.5rem, 4vw, 3.25rem)
           clamp(1.75rem, 3vw, 2.4rem) clamp(1.6rem, 2.5vw, 2.1rem);
  margin-top: .4rem;
}
.fakten-blase--frei { background: var(--sonne); }

.fakten-blase__liste { margin: 0; }
.fakten-blase__liste > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .9rem;
  padding: .7rem 0;
}
.fakten-blase__liste > div + div { border-top: 1px solid rgba(34, 34, 33, .14); }
.fakten-blase__liste dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fakten-blase__liste dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--text);
}

.fakten-blase__frei {
  margin: 0 0 .9rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(34, 34, 33, .18);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink);
}
.fakten-blase__frei strong {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  margin-bottom: .2rem;
}
.fakten-blase__frei a { color: var(--ink); font-weight: 700; }

/* Leichtes Auftauchen beim ersten Laden */
@media (prefers-reduced-motion: no-preference) {
  .fakten-blase { animation: blase-auf .6s cubic-bezier(.2, .8, .3, 1) .15s backwards; }
}
@keyframes blase-auf {
  from { opacity: 0; transform: translateY(10px) rotate(-1.5deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Zwei-Spalten-Block ---------- */
.duo {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--textbreit { grid-template-columns: 1.15fr .85fr; }
  .duo--kehr > :first-child { order: 2; }
}

/* ---------- Bilder ---------- */
picture { display: block; }
picture img { width: 100%; aspect-ratio: var(--ratio, 1 / 1); object-fit: cover; }
.bild--blob img { border-radius: var(--blob-l); }

/* ---------- Grundsatz-Karten ----------
   Jede Karte belegt drei Zeilen (Figur, Überschrift, Text) und teilt sie
   per Subgrid mit ihren Nachbarn. So stehen Überschriften und Absätze
   auf einer Höhe, auch wenn eine Überschrift umbricht. */
.karten {
  display: grid;
  gap: 2.75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.karte {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding-top: 1.75rem;
  border-top: 3px solid currentColor;
}
.karte > * { color: var(--text); }
.karte h3 { color: var(--ink); }
/* Feste Höhe statt fester Breite: Die Figuren haben verschiedene
   Seitenverhältnisse und würden sonst unterschiedlich hoch */
.karte .linie {
  display: block;
  height: 76px;
  width: auto;
  max-width: 100%;
  margin-bottom: 1.25rem;
  align-self: end;
}
.karte--sonne  { color: var(--sonne); }
.karte--gruen  { color: var(--gruen); }
.karte--himmel { color: var(--himmel); }
.karte--beere  { color: var(--beere); }
.karte--orange { color: var(--orange); }

/* ---------- Tagesablauf ---------- */
.ablauf { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.ablauf li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--sand);
}
.ablauf li:last-child { border-bottom: 1px solid var(--sand); }
.ablauf__zeit {
  font-family: var(--display); font-weight: 600;
  color: var(--orange); font-size: 1.05rem; padding-top: .1rem;
}
.ablauf h3 { margin-bottom: .3em; }
.ablauf p { margin: 0; }
@media (max-width: 640px) {
  .ablauf li { grid-template-columns: 1fr; gap: .4rem; }
}

/* ---------- Galerie ---------- */
.galerie {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.galerie button {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 14px; overflow: hidden; display: block;
}
.galerie img { transition: transform .4s ease; }
.galerie button:hover img { transform: scale(1.04); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(34,34,33,.94);
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[data-offen='true'] { display: flex; }
.lightbox img {
  max-width: min(92vw, 1000px); max-height: 86vh;
  width: auto; border-radius: 10px;
}
.lightbox__btn {
  position: absolute; background: rgba(255,255,255,.14); color: #fff;
  border: 0; width: 52px; height: 52px; border-radius: 50%;
  font-size: 1.5rem; cursor: pointer; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .18s ease;
}
.lightbox__btn:hover { background: rgba(255,255,255,.3); }
.lightbox__zu   { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.lightbox__vor  { right: clamp(1rem,3vw,2rem); top: 50%; transform: translateY(-50%); }
.lightbox__zur  { left:  clamp(1rem,3vw,2rem); top: 50%; transform: translateY(-50%); }

/* ---------- Elternstimmen ---------- */
.stimmen {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.stimme {
  background: var(--papier);
  border-radius: var(--blob-l);
  padding: 2rem 2rem 1.6rem;
  display: flex; flex-direction: column;
}
.stimme blockquote { margin: 0 0 1.25rem; flex-grow: 1; }
.stimme blockquote p { font-size: .975rem; }
.stimme figcaption {
  font-family: var(--display); font-weight: 600;
  color: var(--ink); font-size: .95rem;
}
.sterne { color: var(--sonne); letter-spacing: .12em; margin-bottom: .9rem; font-size: 1.05rem; }

/* ---------- Karussell (Elternstimmen auf dem Handy) ----------
   Das Wischen übernimmt natives Scroll-Snapping; karussell.js
   ergänzt Pfeile und Punkte. Auf breiten Schirmen bleibt es ein Raster. */
.stimmen { position: relative; }   /* Bezugspunkt für die Kartenpositionen */
.karussell__steuerung { display: none; }

@media (max-width: 759px) {
  .stimmen {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* bis an den Bildschirmrand, damit die nächste Karte angeschnitten hervorschaut */
    margin-inline: -1.25rem;
    padding: .25rem 1.25rem;
    scroll-padding-inline: 1.25rem;
  }
  .stimmen::-webkit-scrollbar { display: none; }

  .stimme {
    flex: 0 0 88%;
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* eine Karte pro Wischbewegung */
    padding: 1.6rem 1.5rem 1.4rem;
  }

  .karussell__steuerung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.25rem;
  }
  .karussell__punkte {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Großzügige Trefferfläche, kleiner sichtbarer Punkt */
  .karussell__punkt {
    width: 26px; height: 32px;
    padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
  }
  .karussell__punkt::before {
    content: '';
    width: 9px; height: 9px;
    border-radius: 5px;
    background: rgba(34, 34, 33, .22);
    transition: width .25s ease, background-color .25s ease;
  }
  .karussell__punkt[aria-current='true']::before {
    width: 20px;
    background: var(--ink);
  }

  .karussell__pfeil {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: var(--papier);
    color: var(--ink);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background-color .18s ease;
  }
  .karussell__pfeil:active { background: var(--sand); }
}

/* ---------- Zeitstrahl ---------- */
.zeit { list-style: none; margin: 0; padding: 0; position: relative; }
.zeit::before {
  content: ''; position: absolute;
  left: 7px; top: .6rem; bottom: .6rem; width: 2px;
  background: var(--sand);
}
.zeit > li { position: relative; padding: 0 0 2.75rem 2.75rem; }
.zeit > li::before {
  content: ''; position: absolute; left: 0; top: .45rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--papier); box-shadow: inset 0 0 0 3px var(--blau);
}
.zeit__datum {
  font-family: var(--display); font-weight: 600;
  color: var(--blau); font-size: .95rem; display: block; margin-bottom: .25rem;
}
.zeit h3 { margin-bottom: .35em; }
.zeit__ort { color: var(--grau); font-size: .875rem; margin-bottom: .5em; }
.zeit picture { margin-top: 1.25rem; max-width: 26rem; }
.zeit picture img { border-radius: 14px; }
@media (min-width: 860px) {
  .zeit > li { padding-left: 3.25rem; }
}

/* ---------- Formular ---------- */
.form { max-width: 44rem; }
.form__reihe { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form__reihe { grid-template-columns: 1fr 1fr; } }
.feld { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; }
.feld label { font-weight: 700; font-size: .925rem; color: var(--ink); }
.feld input, .feld textarea, .feld select {
  font: inherit; color: var(--text);
  padding: .8rem .95rem;
  background: var(--papier);
  border: 2px solid var(--sand);
  border-radius: 12px;
  transition: border-color .18s ease;
  width: 100%;
}
.feld input:focus, .feld textarea:focus {
  border-color: var(--blau); outline: none;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld--honig { position: absolute; left: -9999px; }
.hinweis-klein { font-size: .85rem; color: var(--grau); }

.meldung {
  padding: 1.25rem 1.5rem; border-radius: var(--blob);
  margin-bottom: 2rem; max-width: 44rem;
}
.meldung--ok    { background: #e8f3e6; box-shadow: inset 0 0 0 2px var(--gruen); }
.meldung--fehler{ background: #fbeaf0; box-shadow: inset 0 0 0 2px var(--beere); }

/* ---------- Kontaktkarten ---------- */
.personen { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.person { display: flex; gap: 1.25rem; align-items: flex-start; }
.person picture { flex: 0 0 96px; }
.person picture img { border-radius: 12px; aspect-ratio: 131 / 196; }
.person h3 { margin-bottom: .2em; }
.person a { color: var(--blau); font-weight: 700; text-decoration: none; }
.person a:hover { text-decoration: underline; }

/* ---------- Abschluss-CTA ---------- */
.cta { text-align: left; }
.cta__inner {
  background: var(--sand-hell);
  border-radius: var(--blob-l);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .cta__inner { grid-template-columns: 1.4fr .6fr; } }
.cta .linie { width: 100%; max-width: 190px; color: var(--blau); margin-inline: auto; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--ink); color: #b9b7b0; padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.fuss__oben {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem; border-bottom: 1px solid #3c3b38;
}
@media (min-width: 760px) { .fuss__oben { grid-template-columns: 1.2fr 1fr 1fr; } }
.fuss h4 {
  font-family: var(--display); color: #fff; font-size: 1rem;
  font-weight: 600; margin: 0 0 .9rem;
}
.fuss a { color: #b9b7b0; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .45rem; }
.fuss__logo { max-width: 150px; margin-bottom: 1.25rem; }
.fuss__leiste { width: 100%; max-width: 480px; margin: 2.5rem auto 0; opacity: .85; }
.fuss__unten {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center; font-size: .8125rem;
}
.fuss__credit img { height: 44px; width: auto; opacity: .55; transition: opacity .2s ease; }
.fuss__credit:hover img { opacity: 1; }

/* ---------- Rahmendaten-Liste ---------- */
.fakten { margin: 0; max-width: 56rem; }
.fakten > div {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--sand);
}
.fakten > div:last-child { border-bottom: 1px solid var(--sand); }
.fakten dt { font-family: var(--display); font-weight: 600; color: var(--ink); }
.fakten dd { margin: 0; }
@media (max-width: 640px) {
  .fakten > div { grid-template-columns: 1fr; gap: .25rem; }
}

/* ---------- Größere Personendarstellung ---------- */
.personen--gross { gap: 2.5rem; }
.person--gross { gap: 1.75rem; }
.person--gross picture { flex: 0 0 140px; }
.person--gross h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); margin-bottom: .1em; }
@media (max-width: 520px) {
  .person, .person--gross { flex-direction: column; }
}

/* ---------- Aktuelles ---------- */
.meldungen { display: grid; gap: 3.5rem; }
.meldung-eintrag {
  display: grid; gap: 1rem 2.5rem;
  grid-template-columns: 1fr;
  padding-top: 2rem; border-top: 2px solid var(--sand);
}
@media (min-width: 800px) { .meldung-eintrag { grid-template-columns: 11rem 1fr; } }
.meldung-eintrag__datum {
  font-family: var(--display); font-weight: 600;
  color: var(--orange); font-size: .95rem;
}
.meldung-eintrag h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.meldung-eintrag__bild { margin-top: 1.5rem; max-width: 30rem; }
.meldung-eintrag__bild img { border-radius: 14px; }

/* ---------- Leerzustände und 404 ---------- */
.leer { max-width: 46rem; }
.leer .linie { width: 110px; color: var(--himmel); margin-bottom: 1.5rem; }
.leer-seite { min-height: 60svh; display: grid; align-items: center; }
.leer .btn + .btn { margin-left: .75rem; }

/* ---------- Formularfehler ---------- */
.feld__fehler { margin: 0; font-size: .875rem; color: var(--beere); font-weight: 700; }
.feld input[aria-invalid='true'],
.feld textarea[aria-invalid='true'] { border-color: var(--beere); }
.meldung strong { font-family: var(--display); }

/* ---------- Anfahrt ---------- */
.anfahrt { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--sand); }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 70ch; }
.rechtstext h2 {
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  margin-top: 2.75rem;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 1.25rem; margin: 0 0 1.15em; }
.rechtstext li { margin-bottom: .5rem; }
.rechtstext a { color: var(--blau); font-weight: 500; }

/* =========================================================
   Wellengalerie (einblicke.php)
   ========================================================= */

/* Waagerechtes Ausschwingen wird hier abgefangen – kein Seiten-Scrollbalken */
.welle {
  position: relative;
  overflow: hidden;
  padding-block: 0 clamp(2rem, 6vw, 4rem);
}

.welle__stapel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.welle__bild {
  position: relative;
  display: block;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 14px;
  will-change: transform, clip-path;
  /* Grundwert ohne JS: schlichte Spalte. JS setzt Höhe und Ausschnitt selbst. */
  height: 300px;
}
.welle__bild picture {
  display: block;
  width: 100%;
  height: 100%;
}
.welle__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.welle__bild:focus-visible { outline-offset: 6px; }

/* Ohne Bewegung: schlichte, mittige Spalte */
.welle__stapel[data-ruhig='true'] {
  align-items: center;
  gap: 1.5rem;
}
.welle__stapel[data-ruhig='true'] .welle__bild {
  clip-path: none;
  translate: none;
  width: min(100%, 42rem);
  height: auto;
}

/* =========================================================
   Seitenübergang
   Der Pfad wird gezeichnet und schwillt dabei zum Vorhang an.
   Die Fläche darunter schließt die Lücken zwischen den Schlaufen.
   ========================================================= */
.uebergang {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.uebergang[data-aktiv='true'] { visibility: visible; }

/* Eine Stelle für die Farbe des Übergangs */
.uebergang { --uebergang-farbe: var(--sand); }

.uebergang__flaeche {
  position: absolute;
  inset: 0;
  background: var(--uebergang-farbe);
  opacity: 0;
}

.uebergang__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.3);
}

.uebergang__pfad {
  fill: none;
  stroke: var(--uebergang-farbe);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Wortmarke in der Mitte, wird auf der Sandfläche eingemalt */
.uebergang__mitte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.uebergang__logo {
  width: clamp(170px, 22vw, 300px);
  height: auto;
  overflow: visible;
  opacity: 0;
  transform-origin: center;
}

/* Kein Übergang, wenn Bewegung reduziert werden soll */
@media (prefers-reduced-motion: reduce) {
  .uebergang { display: none; }
}

/* Nur für Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Beim Seitenwechsel fokussierter Hauptbereich soll keinen Rahmen zeigen */
main:focus { outline: none; }