/* ============================================================
   cocolores e.V. — gemeinsames Stylesheet (Mockup)
   Design-System aus dem Startseiten-Prototyp, erweitert.
   ============================================================ */

:root {
  --canvas: #fcfaf5;
  --ink: #3d3a2e;
  --ink2: #6e6a5c;
  --ink3: #8a8473;

  --sage: #7e9b57;
  --sage-d: #3f5126;
  --sage-h: #6f8a4c;
  --sage-t: #e2edd4;
  --sage-bg: #eff3e7;
  --terra: #c2724e;
  --terra2: #c2554a;
  --terra-d: #7c3c24;
  --gold: #d2a23e;
  --gold-h: #c5972e;
  --gold-d: #6b5012;
  --gold-ink: #3a2c07;

  --blau: #5e89a8;
  --blau-d: #2c465b;
  --blau-t: #dfeaf1;
  --gelb: #dda22f;
  --gelb-d: #6b4d10;
  --gelb-t: #f7ebcb;
  --gruen: #6f9a4c;
  --gruen-d: #38501f;
  --gruen-t: #e2edd4;
  --rot: #c2554a;
  --rot-d: #7a2a22;
  --rot-t: #f4dad4;

  --wrap: 1040px;
  --header-h: 66px;
  --header-h-shrunk: 66px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--canvas);
  overflow-x: hidden;
  font-family:
    "Nunito",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
.scr {
  font-family: "Caveat", cursive;
  line-height: 1;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  position: relative;
}
.center {
  text-align: center;
}

/* ---------- Buttons ---------- */
/* Button-Farbsystem: 3 solide Pillen in den 3 Markenfarben, einheitliches Schema.
   Primär = Gold (+ neutrales --ink für gute Lesbarkeit), Sekundär = Grün, Insta = Terra. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  background: var(--gold);
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.cta:hover {
  background: var(--gold-h);
  transform: translateY(-1px);
}
.cta i {
  font-size: 1.25em;
  line-height: 1;
}
.cta.ghost {
  background: var(--sage);
  color: #fff;
}
.cta.ghost:hover {
  background: var(--sage-h);
}
.cta.insta {
  background: var(--terra);
  color: #fff;
}
.cta.insta:hover {
  background: var(--terra-d);
}
.cta.big {
  font-size: 16px;
  padding: 15px 28px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 250, 245, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(60, 55, 40, 0.06);
  transition: box-shadow 0.25s;
}
/* border-bottom als box-shadow → Header-Höhe bleibt exakt --header-h (66px),
   damit die sticky Subnav bündig darunter sitzt und beim Scrollen nicht springt. */
.site-header.scrolled {
  box-shadow: 0 4px 18px rgba(60, 55, 40, 0.07);
}
.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 40px;
  height: var(--header-h);
  transition:
    height 0.25s,
    padding 0.25s;
}
/* Header-Höhe bleibt beim Scrollen konstant (nur der Schatten kommt dazu). */

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex: none;
}
.brand .scr {
  font-size: 30px;
}
.brand .logo {
  display: block;
  height: 48px;
  width: auto;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.mainnav > a,
.navitem > a {
  font-size: 13.5px;
  font-weight: 600;
  color: #5f5a4a;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    background 0.15s,
    color 0.15s;
}
.mainnav > a:hover,
.navitem > a:hover {
  background: var(--sage-t);
  color: var(--sage-d);
}
/* aktive HAUPTNAV oben (Desktop, inkl. Dropdown-Eltern Kinderhaus/Verein) = grünes Pill */
.mainnav > a.active,
.navitem.active > a {
  background: var(--sage);
  color: #fff;
}
/* aktives Pill bleibt bei Hover unverändert (NICHT abdunkeln): die Active-Regel oben
   gewinnt über den Basis-Hover (gleiche Spezifität, steht später in der Quelle). */
/* aktive Seite (mobil) = grüner Unterstrich unter dem Label (schlank, nicht über die ganze Zeile),
   KEIN voller Hintergrund mehr (der wurde auf 100% Breite gestreckt). Gilt auch für die
   Gruppe (Kinderhaus/Verein) auf deren Unterseiten. CTA ("Platz anfragen") bleibt unberührt. */
.mobile-menu > a.active:not(.cta),
.m-group.active > button {
  background: none;
  color: var(--sage-d);
}
.mobile-menu > a.active:not(.cta) .m-label,
.m-group.active > button .m-label {
  text-decoration: underline;
  text-decoration-color: var(--sage);
  color: var(--sage);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.navitem {
  position: relative;
}
.navitem > a .chev {
  font-size: 14px;
  opacity: 0.6;
}

.submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid rgba(60, 55, 40, 0.08);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(60, 55, 40, 0.13);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.16s,
    transform 0.16s,
    visibility 0.16s;
  z-index: 60;
}
.navitem:hover .submenu,
.navitem:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  display: block;
  font-size: 14px;
  color: #54503f;
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 10px;
  transition:
    background 0.12s,
    color 0.12s;
}
.submenu a:hover {
  background: var(--sage-bg);
  color: var(--sage-d);
}
.submenu a.lead {
  font-weight: 700;
  color: var(--terra-d);
}
/* aktive Unterseite im Desktop-Submenü = Sage + fett (wie im Mobil-Menü, dezent statt Pill) */
.submenu a.active {
  color: var(--sage);
  font-weight: 700;
}
.submenu .div {
  height: 1px;
  background: rgba(60, 55, 40, 0.08);
  margin: 6px 8px;
}
/* Trenn-Linie auch im Mobil-Untermenü (zwischen Hauptseiten-Abschnitten und Unterseiten) */
.m-sub .div {
  height: 1px;
  background: rgba(60, 55, 40, 0.08);
  margin: 6px 2px;
}

.pill {
  font-size: 12.5px;
  font-weight: 700;
  color: #1a1a1a;
  background: var(--gold);
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  flex: none;
  transition:
    background 0.2s,
    transform 0.2s;
}
.pill:hover {
  background: var(--gold-h);
  transform: translateY(-1px);
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 4px;
  width: 42px;
  height: 42px;
}
.burger .bl {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sage-d);
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}
.burger.is-open .bl:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.is-open .bl:nth-child(2) {
  opacity: 0;
}
.burger.is-open .bl:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid rgba(60, 55, 40, 0.08);
  padding: 6px 22px 16px;
}
/* offenes Menü = Overlay (aus dem Flow): liegt unter der Header-Leiste und schiebt NIE
   den Inhalt runter — immer schwebend, unabhängig von der Scroll-Position. Absolut relativ
   zum sticky .site-header, daher bewegt es sich beim Scrollen korrekt mit. */
.mobile-menu.open {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mobile-menu > a,
.m-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--sage-d);
  padding: 13px 2px;
  cursor: pointer;
  border-bottom: 1px solid rgba(60, 55, 40, 0.07);
  text-decoration: none;
}
.m-group .m-sub {
  display: none;
  flex-direction: column;
  padding: 2px 0 8px 14px;
}
.m-group.open .m-sub {
  display: flex;
}
.m-group .m-sub a {
  font-size: 14.5px;
  font-weight: 600;
  color: #6a6552;
  text-decoration: none;
  padding: 9px 2px;
}
/* aktiver Unterpunkt im Mobil-Menü (nur echte Kinderhaus-/Verein-Unterseiten) = Sage + fett */
.m-group .m-sub a.active {
  color: var(--sage);
  font-weight: 700;
}
.m-group > button .chev {
  transition: transform 0.2s;
}
.m-group.open > button .chev {
  transform: rotate(180deg);
}
/* CTA im Mobil-Menü = echter, kompakter Button: Hintergrund + Padding dauerhaft
   (nicht erst bei Hover) und NICHT über die volle Breite. */
.mobile-menu .cta {
  margin-top: 16px;
  align-self: flex-start;
  width: auto;
  justify-content: center;
  background: var(--gold);
  color: var(--gold-ink);
  padding: 13px 26px;
  border-radius: 999px;
  border-bottom: 0;
}

/* ---------- Sub-nav (für lange Seiten) ---------- */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(239, 243, 231, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(60, 55, 40, 0.06);
  transition: top 0.25s;
}
.site-header.scrolled ~ .subnav {
  top: var(--header-h-shrunk);
}
.subnav-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 6px;
  padding: 9px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar {
  display: none;
}
.subnav a {
  font-size: 13.5px;
  font-weight: 700;
  color: #6a6552;
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  transition: box-shadow 0.15s;
}
/* Hover (nicht aktiv): grüner Ring bei 60 %, KEIN weißer Hintergrund.
   Steht VOR .subnav a.active → bei hover+active gewinnt der volle Ring. */
.subnav a:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sage) 60%, transparent);
}
/* aktiver Abschnitt = ungefüllte Pill: grüner Ring via inset box-shadow → kein Layout-Shift
   (Text bleibt die gut lesbare Basisfarbe, kein kontrastschwaches Grün auf der hellen Leiste). */
.subnav a.active {
  box-shadow: inset 0 0 0 2px var(--sage);
}

/* anchor offset so sticky header doesn't cover headings */
.anchor {
  scroll-margin-top: calc(var(--header-h) + 58px);
}

/* ---------- Generic page intro ---------- */
.page-hero {
  position: relative;
  padding: 46px 40px 18px;
  text-align: center;
}
.page-hero .scr {
  font-size: 52px;
  color: var(--terra);
  margin: 0 0 6px;
}
.page-hero .kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 6px;
}
/* Hero-Untertitel als „Standfirst" — klar abgesetzt vom Fließtext darunter. */
.page-hero p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 600;
  max-width: 620px;
  margin: 14px auto 0;
}

.section {
  padding: 0 40px;
}
.section.tint {
  background: var(--sage-bg);
  padding-top: 34px;
  padding-bottom: 34px;
  margin-top: 24px;
}
.lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink2);
}
.prose {
  max-width: 760px;
  margin: 0 auto;
}
.prose h2,
.h2 {
  font-family: "Caveat", cursive;
  font-size: 38px;
  color: var(--terra);
  margin: 30px 0 6px;
  line-height: 1;
}
.prose h3 {
  font-family: "Nunito";
  font-size: 18px;
  font-weight: 700;
  color: var(--sage-d);
  margin: 22px 0 4px;
}
.prose p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink2);
  margin: 8px 0;
}
.prose strong {
  color: var(--sage-d);
}
.prose ul {
  padding-left: 20px;
}
.prose li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink2);
  margin: 5px 0;
}
/* Buttons im Prosa-Block NICHT als Textlink einfärben (sonst überschreibt
   .prose a die Button-Schriftfarbe → z. B. orange statt schwarz). */
.prose a:not(.wp-block-button__link):not(.cta) {
  color: var(--terra);
  font-weight: 700;
}

/* section header (centred, script) */
.sec-head {
  text-align: center;
  padding: 42px 40px 6px;
}
.sec-head .scr {
  font-size: 38px;
  color: var(--terra);
}
.sec-head p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 6px auto 0;
  max-width: 520px;
}
/* Startseite: Abstand über „Wie wir arbeiten" reduziert (−30%) */
.sec-head.sec-head-paedagogik {
  padding-top: 21px;
}
/* Startseite: Abstand über „Unser Garten" reduziert (−20%) */
.sec-head.sec-head-garten {
  padding-top: 27px;
}
/* Kinderhaus „Unsere vier Bereiche": weniger Luft oben, mehr unten (Wunsch: padding 0 40 30).
   Nur top/bottom setzen — die Seiten-Paddings (40px / mobil 22px) bleiben erhalten. */
#bereiche .sec-head {
  padding-top: 0;
  padding-bottom: 30px;
}

/* ---------- Photo placeholders (Foto-Slots = Shooting-Checkliste) ---------- */
.photo-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  background: var(--sage-t);
  border: 2px dashed rgba(63, 81, 38, 0.32);
  color: var(--sage-d);
  min-height: 200px;
  overflow: hidden;
}
.photo-ph i {
  font-size: 34px;
  opacity: 0.8;
}
.photo-ph .cap {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  max-width: 240px;
}
.photo-ph .tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.85);
  color: var(--sage-d);
  padding: 3px 9px;
  border-radius: 999px;
}
.photo-ph.b-blau {
  background: var(--blau-t);
  border-color: rgba(44, 70, 91, 0.3);
  color: var(--blau-d);
}
.photo-ph.b-gelb {
  background: var(--gelb-t);
  border-color: rgba(107, 77, 16, 0.3);
  color: var(--gelb-d);
}
.photo-ph.b-gruen {
  background: var(--gruen-t);
  border-color: rgba(56, 80, 31, 0.3);
  color: var(--gruen-d);
}
.photo-ph.b-rot {
  background: var(--rot-t);
  border-color: rgba(122, 42, 34, 0.3);
  color: var(--rot-d);
}
.photo-ph.b-terra {
  background: #f6e4d6;
  border-color: rgba(124, 60, 36, 0.3);
  color: var(--terra-d);
}

/* organic blob radii */
.bA {
  border-radius: 58% 42% 47% 53%/56% 47% 53% 44%;
}
.bB {
  border-radius: 42% 58% 53% 47%/47% 56% 44% 53%;
}
.round {
  border-radius: 24px;
}

/* ---------- HERO (Startseite) ---------- */
.hero {
  padding: 0 0 4px;
}
.hero-banner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Höhe folgt dem 16:9-Format des Banner-Videos (56.25vw = 9/16 der vollen Breite):
     bis ~1000px Breite exakt 16:9 → kein vertikaler Beschnitt, Köpfe bleiben sichtbar.
     Erst auf breiten Desktops bei 560px gedeckelt (dann leichter Beschnitt, siehe object-position). */
  height: clamp(240px, 56.25vw, 560px);
  overflow: visible;
}
.hero-banner .scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #eaf1dd 0%, #dce8c9 60%, #e8dcc2 100%);
  /* Untere Kante als weiche Kurve „ausstanzen" (dieselbe Wellenform wie früher
     die Creme-Welle), damit die Hintergrund-Ebene (Sonne/Objekte) darunter
     durchscheint, statt von opaker Creme verdeckt zu werden. Fallback ohne
     mask-Support: gerade Unterkante. */
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 42px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='42' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1000 0 L1000 28 C600 6 260 6 0 28 Z' fill='%23fff'/%3E%3C/svg%3E") bottom / 100% 42px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 42px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='42' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1000 0 L1000 28 C600 6 260 6 0 28 Z' fill='%23fff'/%3E%3C/svg%3E") bottom / 100% 42px no-repeat;
}
.hero-banner .scene img,
.hero-banner .scene video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ausschnitt leicht nach oben verschoben: falls auf breiten Desktops doch beschnitten
     wird, bleiben die (meist oben liegenden) Kinderköpfe im Bild statt des Bodens. */
  object-position: 50% 30%;
}
/* Video auf eigener, stabiler Compositing-Ebene halten. Ohne das kann der Browser
   die Video-Textur verwerfen, sobald daneben die fixe .ambient-bg-Ebene GPU-Layer
   anlegt/aktualisiert → Video wird „irgendwann" schwarz. (Zusätzlich wurde das
   aggressive will-change der Hintergrund-Ebene entfernt, das den Layer-Druck erhöhte.) */
.hero-video {
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Poster als Fallback-Hintergrund hinter dem Video: erscheint, falls die
     Dekodierung ausfällt und kein Frame gezeichnet wird (statt Weiß/Leere). */
  background: #dce8c9 url("/wp-content/themes/cocolores2/assets/video/coco-banner-poster.jpg") 50% 30% / cover no-repeat;
}
.hero-banner .scene .photo-ph {
  background: transparent;
  border: 0;
  min-height: 0;
  color: var(--sage-d);
}
.hero-banner .scene .photo-ph i {
  font-size: 46px;
}
.hero-banner .scene .photo-ph .cap {
  font-size: 15px;
  max-width: 360px;
}
/* Frühere opake Creme-Welle: nicht mehr nötig — die Kurve entsteht jetzt als
   transparente Ausstanzung am .scene (siehe oben), damit die Objekte durchscheinen. */
.hero-wave {
  display: none;
}
.balloon {
  position: absolute;
  z-index: 2;
}
.hero-copy {
  text-align: center;
  padding: 24px 40px 10px;
}
.hero-copy .scr {
  font-size: 56px;
  color: var(--terra);
  margin-bottom: 8px;
}
.hero-copy .lead {
  margin: 0 auto 22px;
  max-width: 580px;
  font-size: 16.5px;
}

.bandhd {
  text-align: center;
  font-size: 38px;
  color: #c2724e;
  margin: 0 0 6px;
}

/* ---------- Werte — Wimpelkette ---------- */
/* „Wir sind …" als sechs Wimpel an einer Kordel. Stellschrauben in .kette:
   --wu Wimpelbreite (bezogen auf viewBox 120) · --sag Seil-Durchhang · --rowGap Reihenabstand.
   Umbruch 1↔2 Reihen bei 860px. Stoff morpht per SMIL, das Wehen (rotate) läuft per CSS. */
.kette {
  --wu: 116;
  --w: calc(var(--wu) * 1px);
  --s: calc(var(--wu) / 120);
  --sag: 9px;
  --padTop: 20px;
  --rowGap: 58px;
  position: relative;
  width: 100vw;
  padding: var(--padTop) 0 40px;
  margin: 2px 0 0;
  margin-left: calc(50% - 50vw);
}
.rope {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 26px;
  top: calc(var(--padTop) + 11px * var(--s) - 5px);
}
.rope.r2 {
  top: calc(var(--padTop) + 11px * var(--s) - 5px + 152px * var(--s) + var(--rowGap));
  display: none;
}
.rope path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.rope-core {
  stroke: #96795c;
  stroke-width: 3.2;
}
.rope-lite {
  stroke: #cdb494;
  stroke-width: 1.1;
  opacity: 0.75;
}
.rope-twist {
  stroke: #6e5238;
  stroke-width: 3.6;
  stroke-dasharray: 1 2.4;
  opacity: 0.26;
}
.pennants {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, var(--w));
  column-gap: clamp(14px, 2.4vw, 34px);
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}
.pennant {
  position: relative;
  width: var(--w);
  translate: 0 calc(var(--sag) * var(--y, 0));
  rotate: var(--rot, 0deg);
  transform-origin: 50% calc(11px * var(--s));
  animation: sway var(--swdur, 7s) ease-in-out var(--swdel, 0s) infinite;
}
@keyframes sway {
  0%,
  100% {
    rotate: calc(var(--rot, 0deg) - 0.55deg);
  }
  50% {
    rotate: calc(var(--rot, 0deg) + 0.55deg);
  }
}
.pennant > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(90, 70, 40, 0.16));
}
.pennant .face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(27px * var(--s));
  gap: calc(7px * var(--s));
  pointer-events: none;
}
.pennant .face svg {
  width: calc(var(--wu) * 0.34px);
  height: calc(var(--wu) * 0.34px);
}
.pennant .face .label {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: calc(var(--wu) * 0.152px);
  line-height: 1.04;
  color: #443c30;
  text-align: center;
}
.pennant:nth-child(1) { --y: 0.61; --rot: 1.4deg; }
.pennant:nth-child(2) { --y: 0.86; --rot: 0.85deg; }
.pennant:nth-child(3) { --y: 0.98; --rot: 0.3deg; }
.pennant:nth-child(4) { --y: 0.98; --rot: -0.3deg; }
.pennant:nth-child(5) { --y: 0.86; --rot: -0.85deg; }
.pennant:nth-child(6) { --y: 0.61; --rot: -1.4deg; }
@media (max-width: 859.98px) {
  .kette {
    --wu: 150;
  }
  .rope.r2 {
    display: block;
  }
  .pennants {
    grid-template-columns: repeat(3, var(--w));
    column-gap: clamp(12px, 5vw, 56px);
    row-gap: var(--rowGap);
  }
  .pennant:nth-child(1),
  .pennant:nth-child(4) { --y: 0.69; --rot: 1.2deg; }
  .pennant:nth-child(2),
  .pennant:nth-child(5) { --y: 1; --rot: 0deg; }
  .pennant:nth-child(3),
  .pennant:nth-child(6) { --y: 0.69; --rot: -1.2deg; }
}
@media (max-width: 620px) {
  .bandhd {
    font-size: 32px;
  }
}
@media (max-width: 579.98px) {
  .kette {
    --wu: 126;
    --rowGap: 48px;
  }
  /* enger + weniger Rand, damit die 3 Wimpel je Reihe auch auf großen Phones (~430px) passen */
  .pennants {
    column-gap: 12px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 429.98px) {
  .kette {
    --wu: 100;
    --rowGap: 40px;
  }
}
@media (max-width: 359.98px) {
  .kette {
    --wu: 88;
    --rowGap: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pennant {
    animation: none;
  }
}

/* ---------- Pädagogik-Karten ---------- */
.cards4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 860px;
  margin: 6px auto 0;
  padding: 0 40px;
}
.pcard {
  background: #fff;
  border-radius: 20px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(60, 55, 40, 0.05);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(60, 55, 40, 0.09);
}
.pcard .ic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 26px;
  background: var(--sage-t);
  color: var(--sage-d);
}
.pcard h3 {
  font-family: "Nunito";
  font-size: 15.5px;
  font-weight: 700;
  color: var(--sage-d);
  margin: 0 0 6px;
}
.pcard p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0;
}

/* ---------- Konzept: Pinnwand-Karten (Klebeband + handgezeichnete Icons) ---------- */
.pinboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
  max-width: 860px;
  margin: 22px auto 0;
  padding: 0 40px;
}
.pin {
  position: relative;
  background: #fffdf7;
  border-radius: 8px;
  padding: 28px 18px 22px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(60, 55, 40, 0.1);
}
.pin h3 {
  font-family: "Nunito";
  font-size: 15.5px;
  font-weight: 700;
  color: var(--sage-d);
  margin: 14px 0 6px;
}
.pin p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0;
}
.pinboard > :nth-child(1) {
  transform: rotate(-1.4deg);
}
.pinboard > :nth-child(2) {
  transform: rotate(1.1deg);
}
.pinboard > :nth-child(3) {
  transform: rotate(0.9deg);
}
.pinboard > :nth-child(4) {
  transform: rotate(-1.1deg);
}
.tape {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 78px;
  height: 22px;
  border-radius: 3px;
  transform: translateX(-50%) rotate(-3deg);
  opacity: 0.6;
  mix-blend-mode: multiply;
}
.illu {
  width: 58px;
  height: 58px;
  margin: 0 auto;
}
.illu svg {
  width: 58px;
  height: 58px;
}
@media (max-width: 640px) {
  .pinboard {
    grid-template-columns: 1fr;
  }
}

/* ---------- abwechselnde Bild/Text-Reihen ---------- */
.rows {
  padding: 0 40px;
}
.row {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 34px 0;
}
.row.rev {
  flex-direction: row-reverse;
}
.row .imgwrap {
  position: relative;
  flex: 0 0 45%;
}
.row .imgwrap .blob {
  position: absolute;
  inset: -12px 12px 12px -12px;
  z-index: 0;
}
.row.rev .imgwrap .blob {
  inset: -12px -12px 12px 12px;
}
.row .imgwrap .ph {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 248px;
}
.imgwrap .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.row .imgwrap .ph:hover img {
  transform: scale(1.05);
}
.row .body {
  flex: 1;
}
.berlabel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.roomic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 25px;
}
.roomic svg {
  width: 68%;
  height: 68%;
}
.row .body .scr {
  font-size: 33px;
}
.row .body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink2);
  margin: 6px 0 12px;
}
.row .body .more {
  font-size: 14px;
  font-weight: 700;
  color: var(--terra);
  text-decoration: none;
}
.row .body .more:hover {
  text-decoration: underline;
}

/* ---------- Garten (Chips) ---------- */
.garden {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 30px 40px 0;
}
.garden .imgwrap {
  position: relative;
  flex: 0 0 46%;
}
.garden .imgwrap .ph {
  height: 270px;
  overflow: hidden;
}
.garden .body {
  flex: 1;
}
.garden .scr {
  font-size: 36px;
  color: var(--gruen-d);
  margin-bottom: 6px;
}
.garden p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
  margin: 0 0 14px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gruen-d);
  background: var(--gruen-t);
  padding: 8px 14px;
  border-radius: 999px;
}
.chip i {
  font-size: 16px;
}

/* Garten-Galerie (SVG-Kacheln) */
.gargrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  /* gleiche max. Breite wie der Inhalt/die Galerien auf der Startseite (--wrap minus Section-Padding) */
  max-width: calc(var(--wrap) - 80px);
  margin: 16px auto 0;
}
/* Kinderhaus #ueber: Galerien bündig mit der Textspalte (.prose = 760px), nicht 960 */
#ueber .gargrid {
  max-width: 760px;
}
.gartile {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(60, 55, 40, 0.05);
  transition: transform 0.25s;
}
.gartile:hover .pic img {
  transform: scale(1.06);
}
.gartile .pic {
  height: 112px;
  overflow: hidden;
}
.gartile .pic svg,
.gartile .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.gartile .lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--gruen-d);
  text-align: center;
  padding: 7px 6px 9px;
  line-height: 1.3;
}

/* Roberto-Galerie (kleine Vorschau im Block) */
.robgal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 0 0 16px;
}
.robgal .t {
  height: 120px;
  border-radius: 11px;
  overflow: hidden;
  cursor: zoom-in;
}
.robgal .t svg,
.robgal .t img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.robgal .t:hover img {
  transform: scale(1.09);
}
/* Galerie-Lightbox (kleiner Dialog beim Klick) — nativer <dialog>, kein Plugin */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(40, 36, 28, 0.74);
}
.lightbox .lb-frame {
  position: relative;
  line-height: 0;
}
.lightbox img {
  display: block;
  max-width: min(560px, 92vw);
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.45);
}
.lightbox .lb-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #3a352a;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.lightbox .lb-close:hover {
  background: #f1ece1;
}
.lightbox .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #3a352a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.lightbox .lb-prev {
  left: 8px;
}
.lightbox .lb-next {
  right: 8px;
}
.lightbox .lb-nav:hover {
  background: #f1ece1;
}
.lightbox .lb-nav[hidden] {
  display: none;
}
.lightbox .lb-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 30px 56px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  border-radius: 0 0 16px 16px;
}
.lightbox .lb-cap[hidden] {
  display: none;
}
/* anklickbare Fotos signalisieren das Vergrößern */
.lb-zoom {
  cursor: zoom-in;
}

/* ---------- Ökologie-Streifen ---------- */
.eco {
  margin: 34px 0 0;
  background: var(--sage-d);
  color: #fff;
  padding: 30px 40px;
}
.eco .scr {
  font-size: 30px;
  color: #eaf1dd;
  text-align: center;
  margin-bottom: 4px;
}
.eco .sub {
  text-align: center;
  color: #cdd7bb;
  font-size: 14px;
  margin: 0 auto 20px;
  max-width: 520px;
}
.eco-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.eco-item {
  text-align: center;
}
.eco-item .ic {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #f6f8ef;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 11px;
}
.eco-item .ic svg {
  width: 50px;
  height: 50px;
}
.eco-item b {
  display: block;
  font-size: 14.5px;
}
.eco-item span {
  font-size: 12.5px;
  color: #cdd7bb;
}

/* ---------- Roberto / Küche ---------- */
/* Roberto: Grid — Portrait links (vertikal zentriert), rechts Überschrift,
   Text und Insta-Button untereinander. Mobil (flex column) per DOM-Reihenfolge:
   Überschrift → Bild → Text/Galerie → Button. */
.roberto {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas: "pic head" "pic text" "pic btn";
  column-gap: 30px;
  align-items: start;
  margin: 34px 40px 0;
  background: #f1ddcd;
  border-radius: 26px;
  padding: 26px 30px;
}
.roberto .pic {
  grid-area: pic;
  align-self: center;
  position: relative;
  height: 210px;
}
.roberto .rob-head {
  grid-area: head;
}
.roberto .pic .rob-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  border-radius: 18px;
  display: block;
}
.roberto .rob-text {
  grid-area: text;
}
.roberto .rob-follow {
  grid-area: btn;
  margin-top: 16px;
}
.roberto .pic .ph {
  position: absolute;
  inset: 0;
  height: 100%;
}
.roberto .scr {
  font-size: 34px;
  color: var(--terra-d);
  margin-bottom: 4px;
}
.roberto p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink2);
  margin: 0 0 16px;
}

/* ---------- Roberto-Küche-Band (Kinderhaus): dunkelgrüner Streifen, Foto als Avatar ---------- */
.rk-band {
  background: var(--sage-d);
  color: #eef3e6;
  padding: 50px 0 54px;
  margin-top: 24px;
}
.rk-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}
.rk-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 24px;
}
.rk-avatar {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.16),
    0 8px 20px rgba(0, 0, 0, 0.32);
}
.rk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  transition: transform 0.4s ease;
}
.rk-avatar:hover img {
  transform: scale(1.12);
}
.rk-h {
  flex: 1;
  min-width: 0;
  font-size: 40px;
  color: #fff;
  margin: 0;
}
.rk-ig {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--sage-d);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  transition:
    background 0.2s,
    transform 0.2s;
}
.rk-ig:hover {
  background: #eef3e6;
  transform: translateY(-2px);
}
.rk-ig i {
  font-size: 34px;
}
.rk-bt {
  font-size: 15.5px;
  line-height: 1.72;
  color: #e7efdd;
  margin: 0 0 15px;
}
.rk-bt:last-child {
  margin-bottom: 0;
}
.rk-dishes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px 18px;
  margin: 30px 0 0;
}
.rk-dish {
  margin: 0;
}
.rk-di {
  height: 158px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  cursor: zoom-in;
}
.rk-di img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.rk-di:hover img {
  transform: scale(1.06);
}
.rk-cap {
  font-family: "Caveat", cursive;
  font-size: 22px;
  text-align: center;
  color: #eef3e6;
  margin-top: 10px;
}
.rk-vg {
  font-size: 15.5px;
  line-height: 1.72;
  color: #e7efdd;
  margin: 30px 0 0;
}
.rk-vg b {
  color: #dbe8c6;
}
.rk-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 18px;
  margin: 32px 0 0;
}
.rk-stat {
  text-align: center;
}
.rk-badge {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: #f6f8ef;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.26),
    0 8px 18px rgba(0, 0, 0, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-badge svg {
  width: 52px;
  height: 52px;
}
.rk-stat b {
  display: block;
  font-family: "Caveat", cursive;
  font-size: 29px;
  color: #f3ecdc;
  line-height: 1;
}
.rk-stat span {
  display: block;
  font-size: 13px;
  color: #cdd7bb;
  margin-top: 6px;
  line-height: 1.4;
}
/* Breakpoints laut Mockup */
@media (max-width: 860px) {
  .rk-inner {
    padding-left: 22px;
    padding-right: 22px;
  }
}
@media (max-width: 680px) {
  .rk-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 660px) {
  .rk-head {
    gap: 14px;
  }
  .rk-avatar {
    width: 66px;
    height: 66px;
  }
  .rk-h {
    font-size: 30px;
  }
  .rk-ig {
    width: 58px;
    height: 58px;
  }
  .rk-ig i {
    font-size: 28px;
  }
}
@media (max-width: 630px) {
  .rk-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 445px) {
  .rk-stats {
    grid-template-columns: 1fr;
  }
  .rk-h {
    font-size: 26px;
  }
}

/* ---------- Elterninitiative ---------- */
.eltern {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 34px 40px 0;
}
.eltern.rev {
  flex-direction: row-reverse;
}
.eltern .imgwrap {
  position: relative;
  flex: 0 0 44%;
}
.eltern .imgwrap .ph {
  height: 240px;
  overflow: hidden;
}
.eltern .imgwrap .ph img {
  object-position: bottom;
}
.eltern .body {
  flex: 1;
}
.eltern .scr {
  font-size: 36px;
  color: var(--gold-d);
  margin-bottom: 6px;
}
.eltern p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
  margin: 0 0 14px;
}

/* ---------- Visit / Video ---------- */
.visit {
  margin-top: 40px;
  position: relative;
}
.visit .wave {
  display: block;
  width: 100%;
  height: 44px;
}
.visit-inner {
  background: var(--sage-bg);
  padding: 8px 40px 44px;
}
.video-row {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.video {
  position: relative;
  flex: 0 0 46%;
  height: 230px;
}
.video .ph {
  position: absolute;
  inset: 0;
  height: 100%;
  background: #4a5630;
  border-color: rgba(255, 255, 255, 0.3);
  color: #eaf1dd;
}
.video .ctr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.play {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2.4s ease-in-out infinite;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.play .tri {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 19px solid #3e4a2c;
  margin-left: 4px;
}
.vbadge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  color: #3e4a2c;
  background: #fff;
  padding: 4px 11px;
  border-radius: 999px;
}
.visit .body {
  flex: 1;
}
.visit .scr {
  font-size: 38px;
  color: var(--sage-d);
  margin-bottom: 6px;
}
.visit p {
  font-size: 15px;
  line-height: 1.65;
  color: #5b5a4a;
  margin: 0 0 18px;
}
.visit .btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Anmeldungs-CTA-Block ---------- */
.apply {
  margin: 40px 40px 8px;
  background: linear-gradient(150deg, #f7ebcb, #f4dad4);
  border-radius: 28px;
  padding: 36px 34px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.apply .scr {
  font-size: 40px;
  color: var(--terra-d);
  margin-bottom: 6px;
}
.apply p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink2);
  max-width: 560px;
  margin: 6px auto 16px;
}
.apply .next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-d);
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.apply .next i {
  font-size: 1.4em;
}
.apply .btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Info / status boxes ---------- */
.note {
  display: flex;
  gap: 14px;
  background: var(--blau-t);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 18px 0;
  align-items: flex-start;
}
.note i {
  font-size: 24px;
  color: var(--blau-d);
  flex: none;
}
.note.warn {
  background: var(--gelb-t);
}
.note.warn i {
  color: var(--gelb-d);
}
.note.ok {
  background: var(--gruen-t);
}
.note.ok i {
  color: var(--gruen-d);
}
.note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink2);
}
.note b {
  color: var(--ink);
}

/* Schließtage-Post: zentrierte Liste — Datum fett oben, Text darunter,
   dezente graue Trennlinie zwischen den Einträgen */
.closing-times {
  max-width: 440px;
  margin: 24px auto;
  text-align: center;
}
.closing-times p {
  margin: 0;
  padding: 13px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink2);
}
.closing-times p + p {
  border-top: 1px solid rgba(60, 55, 40, 0.12);
}
.closing-times p strong {
  display: block;
  color: var(--terra);
  margin-bottom: 1px;
}

/* steps */
.steps {
  counter-reset: s;
  display: grid;
  gap: 14px;
  margin: 18px 0;
}
.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step::before {
  counter-increment: s;
  content: counter(s);
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.step .st-b {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink2);
}
.step .st-b b {
  color: var(--sage-d);
}

/* cost cards */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0;
}
.fact {
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(60, 55, 40, 0.05);
}
.fact-hd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.fact .big {
  font-family: "Caveat";
  font-size: 38px;
  color: var(--terra);
  line-height: 1;
}
.fact-ic {
  width: 38px;
  height: 38px;
  flex: none;
}
.fact-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.fact-cap {
  font-size: 13.5px;
  color: var(--ink2);
  display: block;
  margin-top: 6px;
}

/* ---------- FAQ accordion ---------- */
.faq {
  max-width: 820px;
  margin: 0 auto;
}
.qa {
  border-bottom: 1px solid rgba(60, 55, 40, 0.1);
}
.qa button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 18px 40px 18px 2px;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.qa button .pm {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sage-t);
  color: var(--sage-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition:
    transform 0.2s,
    background 0.2s;
}
.qa.open button .pm {
  transform: rotate(45deg);
  background: var(--sage);
  color: #fff;
}
.qa .ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.qa .ans-in {
  padding: 0 2px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
}
.qa .ans-in a {
  color: var(--terra);
  font-weight: 700;
}
.faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin: 0 0 22px;
}
.faq-cats span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sage-d);
  background: var(--sage-t);
  padding: 6px 13px;
  border-radius: 999px;
}

/* ---------- Verein: Vorstand / AGs / Ausschüsse — Listen-Layout ---------- */
/* Ersetzt die früheren Vollbreiten-Farbheader: je Eintrag ein Illu-Kreis (Tint im
   4er-Farbzyklus) + Titel + Rollen-Zeile in Bereichsfarbe + Volltext, getrennt nur
   durch feine Linien — keine Boxen, kein Aufklappen. */
.ag-list {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 0 40px;
}
.ag-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 18px;
  padding: 27px 0;
  border-bottom: 1px solid rgba(60, 55, 40, 0.1);
}
.ag-item:last-child {
  border-bottom: 0;
}
.ag-ic {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ag-ic svg {
  width: 38px;
  height: 38px;
}
.ag-item:nth-child(4n + 1) .ag-ic {
  background: var(--gruen-t);
}
.ag-item:nth-child(4n + 2) .ag-ic {
  background: #f6e4db;
}
.ag-item:nth-child(4n + 3) .ag-ic {
  background: var(--gelb-t);
}
.ag-item:nth-child(4n + 4) .ag-ic {
  background: var(--blau-t);
}
.ag-item h3 {
  margin: 3px 0 1px;
  font-family: "Nunito", sans-serif;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.ag-role {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.ag-item:nth-child(4n + 1) .ag-role {
  color: var(--gruen-d);
}
.ag-item:nth-child(4n + 2) .ag-role {
  color: var(--terra-d);
}
.ag-item:nth-child(4n + 3) .ag-role {
  color: var(--gold-d);
}
.ag-item:nth-child(4n + 4) .ag-role {
  color: var(--blau-d);
}
.ag-item .full {
  grid-column: 2;
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink2);
}
/* AG-Sektion neutral (statt sage-Tönung), damit die farbigen Überschrift-Streifen klar lesbar sind */
#ags {
  background: var(--canvas);
  margin-top: 14px;
  padding-top: 18px;
  padding-bottom: 16px;
}
/* Abstand über „Vorstand, Arbeitsgruppen & Ausschüsse" verringert */
#ags .sec-head {
  padding-top: 14px;
}
/* Abstand über „Mitmachen. Mitgestalten. Mitleben." halbiert (≈60px → ≈30px) */
#mitmachen {
  margin-top: 22px;
  padding-top: 28px;
  padding-bottom: 32px;
  background: linear-gradient(160deg, #f6f0e2, #f4e8d8);
}
#mitmachen .sec-head {
  padding-top: 0;
}

/* Mitmachen-Band: getöntes Band mit drei Feldern und feinen vertikalen Trennern */
.mit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: var(--wrap);
  margin: 14px auto 0;
}
.mit .m {
  text-align: center;
  padding: 6px 26px;
  position: relative;
}
.mit .m + .m::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(60, 55, 40, 0.14);
}
.mit .m .scr {
  font-size: 28px;
  color: var(--terra);
}
.mit .m p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 4px 0 0;
}

/* ---------- Timeline (Chronologie) ---------- */
.timeline {
  max-width: 740px;
  margin: 10px auto;
  position: relative;
  padding-left: 30px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--sage-t);
  border-radius: 3px;
}
.tl {
  position: relative;
  padding: 0 0 26px 22px;
}
.tl::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--sage);
  border: 3px solid var(--canvas);
}
.tl .yr {
  font-family: "Caveat";
  font-size: 30px;
  color: var(--terra);
  line-height: 1;
}
.tl p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 3px 0 0;
}

/* ---------- press / news cards ---------- */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 16px 0;
}
.ncard {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(60, 55, 40, 0.06);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.ncard:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(60, 55, 40, 0.1);
}
.ncard .ph {
  height: 160px;
}
.ncard .nc-b {
  padding: 18px 20px;
}
.ncard .date {
  font-size: 12px;
  font-weight: 700;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ncard h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0;
}
.ncard p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0;
}
.linklist {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}
.lrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 14px;
  padding: 15px 18px;
  box-shadow: 0 4px 12px rgba(60, 55, 40, 0.05);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s;
}
.lrow:hover {
  transform: translateX(3px);
}
/* PDF-Zeile als klarer Button erkennbar: rechts eine solide Terra-Pille „PDF ⬇",
   nowrap → das Download-Icon bricht nie hinter „PDF" um (auch auf Mobil). */
.lrow .meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--terra);
  padding: 8px 15px;
  border-radius: 999px;
  transition: background 0.2s;
}
.lrow i {
  color: var(--terra);
}
.lrow .meta i {
  color: #fff;
  font-size: 15px;
}
.lrow:hover .meta {
  background: var(--terra-d);
}

/* ---------- contact / form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(370px, 40%) 1fr;
  gap: 28px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 6px 40px 0;
}
.field {
  margin: 0 0 14px;
}
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sage-d);
  margin-bottom: 5px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: "Nunito";
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #e1dccb;
  border-radius: 12px;
  padding: 11px 13px;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--sage);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.map-ph {
  height: 100%;
  min-height: 280px;
}
.info-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 6px 16px rgba(60, 55, 40, 0.05);
}
.info-card .ci div {
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 2;
}
.info-card .ci i {
  color: var(--sage);
  font-size: 17px;
  vertical-align: -3px;
  margin-right: 9px;
}

/* ---------- decorations ---------- */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.bob {
  animation: bob 7s ease-in-out infinite;
}
.bob2 {
  animation: bob 8.5s ease-in-out infinite 0.7s;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

/* ---------- back to top ---------- */
.totop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(60, 55, 40, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.25s,
    transform 0.25s,
    visibility 0.25s;
}
.totop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.totop:hover {
  background: var(--sage-d);
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: 46px;
  background: var(--canvas);
  border-top: 1px solid rgba(60, 55, 40, 0.07);
}
.footer-cols {
  max-width: 840px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 26px;
  padding: 34px 40px 26px;
}
.footer-cols .scr {
  font-size: 28px;
  color: var(--terra);
  margin-bottom: 10px;
}
.footer-cols .ci {
  font-size: 14px;
  color: var(--ink2);
  line-height: 2;
}
.footer-cols .ci i {
  color: var(--sage);
  font-size: 17px;
  vertical-align: -3px;
  margin-right: 9px;
}
.footer-cols .hours-big {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0;
}
.flinks {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.flinks a {
  font-size: 14px;
  color: var(--ink2);
  text-decoration: none;
}
.flinks a:hover {
  color: var(--terra);
}
.copyright {
  text-align: center;
  font-size: 12px;
  color: var(--ink3);
  padding: 16px;
  background: #f1eadb;
}
.copyright a {
  color: var(--ink3);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 860px) {
  /* Desktop-Nav ab hier ausblenden — der Platz reicht nicht mehr (gleiche Schwelle wie die Wimpelkette) */
  .mainnav,
  .pill {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
  .eco-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .facts {
    gap: 9px;
  }
  .fact {
    padding: 14px 8px;
  }
  .fact-hd {
    gap: 6px;
  }
  .fact-ic {
    width: 30px;
    height: 30px;
  }
  .fact .big {
    font-size: 30px;
  }
  .fact-cap {
    font-size: 12px;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .header-inner {
    padding: 12px 20px;
  }
  .anchor {
    scroll-margin-top: calc(var(--header-h) + 52px);
  }

  .page-hero {
    padding: 30px 22px 4px;
  }
  .page-hero .scr {
    font-size: 40px;
  }
  .section,
  .sec-head {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero-copy {
    padding: 16px 22px 8px;
  }
  .hero-copy .scr {
    font-size: 42px;
  }
  .hero-copy .lead {
    max-width: none;
  }
  .hero-copy .cta {
    width: 100%;
  }

  .cards4 {
    gap: 12px;
    padding: 0 22px;
  }
  .gargrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pcard {
    padding: 18px 14px;
  }

  .row,
  .row.rev,
  .garden,
  .eltern,
  .eltern.rev,
  .video-row {
    flex-direction: column;
    gap: 14px;
    margin: 24px 0;
  }
  /* Bereiche mobil: Überschrift, Text, Bild, dann „Mehr"-Link darunter */
  .row {
    align-items: stretch;
  }
  .row .body {
    display: contents;
  }
  .row .berlabel {
    order: 1;
    margin-bottom: 0;
  }
  .row .body p {
    order: 2;
    margin: 0;
  }
  .row .imgwrap {
    order: 3;
  }
  .row .body .more {
    order: 4;
  }
  .row .imgwrap,
  .garden .imgwrap,
  .eltern .imgwrap,
  .video {
    flex: 0 0 auto;
    width: 100%;
  }
  .row .imgwrap .ph {
    height: 210px;
  }
  .garden {
    margin: 24px 22px 0;
  }
  .garden .imgwrap .ph {
    height: 220px;
  }
  .eltern {
    margin: 24px 22px 0;
  }
  /* Mitgestalten-Foto (Hochformat): mobil höhere Ellipse + tiefer ausgerichtet,
     damit die Leute am Feuer sichtbar sind (Desktop bleibt bei object-position: bottom) */
  .eltern .imgwrap .ph {
    height: 280px;
  }
  .eltern .imgwrap .ph img {
    object-position: center 80%;
  }
  .row .body .scr {
    font-size: 29px;
  }
  .roomic {
    width: 44px;
    height: 44px;
    font-size: 21px;
  }

  .eco {
    padding: 28px 22px;
  }
  .eco-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .roberto {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 26px 22px 0;
    padding: 22px;
  }
  .roberto .pic {
    width: 100%;
    height: 190px;
  }
  .roberto .rob-text {
    margin-top: 18px;
  }
  .roberto .cta {
    width: 100%;
  }
  .roberto .rob-follow {
    margin-top: 14px;
  }
  .robgal .t {
    height: 80px;
  }

  .visit-inner {
    padding: 8px 22px 34px;
  }
  .video {
    height: 210px;
  }
  .visit .scr {
    font-size: 32px;
  }
  .visit .btns {
    flex-direction: column;
  }
  .visit .btns .cta {
    width: 100%;
  }

  .apply {
    margin: 30px 22px 8px;
    padding: 28px 22px;
  }
  .apply .scr {
    font-size: 34px;
  }
  .apply .btns {
    flex-direction: column;
  }
  .apply .btns .cta {
    width: 100%;
  }

  .cardgrid {
    grid-template-columns: 1fr;
  }
  /* Mitmachen-Band mobil: gestapelt, Trenner horizontal */
  .mit {
    grid-template-columns: 1fr;
    margin-top: 10px;
  }
  .mit .m {
    padding: 16px 18px;
  }
  .mit .m + .m::before {
    left: 18px;
    right: 18px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .ag-list {
    padding-left: 22px;
    padding-right: 22px;
  }
  /* AG-Eintrag mobil: Icon links neben der Überschrift (Titel mittig zum Icon),
     Beschreibung darunter über die VOLLE Breite — links unter dem Icon, spart Platz */
  .ag-item {
    align-items: center;
  }
  .ag-item .full {
    grid-column: 1 / -1;
    margin-top: 6px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    padding: 6px 22px 0;
  }
  .map-ph {
    min-height: 220px;
  }
  .subnav-inner {
    padding: 9px 22px;
  }

  .footer-cols {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 22px 20px;
    text-align: center;
  }
  .deco {
    display: none;
  }
  .totop {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 520px) {
  .cards4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   WordPress-Brücke (cocolores2 Block-Theme)
   Verbindet die Core-Blöcke mit dem Mockup-Designsystem oben.
   ============================================================ */

/* Sticky-Header nicht unter die WP-Admin-Bar schieben (nur eingeloggt/Editor) */
.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* WordPress legt via blockGap (theme.json) zwischen die Top-Level-Bereiche
   ein margin-block-start (:where(.wp-site-blocks) > * { margin-block-start:24px }).
   Das reißt eine Lücke zwischen Header und Subnav (oben sichtbar) und vor main.
   Header/Subnav/main sollen bündig sitzen — den vertikalen Rhythmus steuern
   .page-hero / .section selbst. (:where() hat Spezifität 0, daher genügt das.) */
.subnav,
.wp-site-blocks > main {
  margin-block-start: 0;
}

/* Sticky-Footer: kurze Seiten (z. B. Satzung = nur PDF-Downloads) sollen den
   Footer am unteren Viewport-Rand halten, statt ihn mitten auf der Seite
   schweben zu lassen. .wp-site-blocks wird zur Flex-Spalte über volle Höhe,
   main füllt den Rest auf. Hier KEIN overflow setzen → Scroll-Container bleibt
   der Body, der sticky Header/Subnav bleibt unberührt. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wp-site-blocks > main {
  flex: 1 0 auto;
}
/* eingeloggt schiebt die Admin-Bar den Inhalt um 32px (mobil 46px) nach unten
   → Höhe entsprechend kürzen, sonst entsteht ein dauerhafter Mini-Scrollbalken. */
.admin-bar .wp-site-blocks {
  min-height: calc(100vh - 32px);
}
@media (max-width: 782px) {
  .admin-bar .wp-site-blocks {
    min-height: calc(100vh - 46px);
  }
}

/* Core-Button (core/button) bekommt den .cta-Look.
   Varianten als registrierte Block-Styles: ghost, insta.
   Größen-Modifikator als kombinierbare Klasse: cta-big. */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  background: var(--gold);
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  transition:
    transform 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background: var(--gold-h);
  transform: translateY(-1px);
}
.wp-block-button__link i {
  font-size: 1.25em;
  line-height: 1;
}
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: var(--sage);
  color: #fff;
  border: 0;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--sage-h);
}
.wp-block-button.is-style-insta .wp-block-button__link {
  background: var(--terra);
  color: #fff;
}
.wp-block-button.is-style-insta .wp-block-button__link:hover {
  background: var(--terra-d);
}
.wp-block-button.cta-big .wp-block-button__link {
  font-size: 16px;
  padding: 15px 28px;
}

/* Editierbare Script-Überschriften (.scr = Caveat) ohne wp-Default-Zeilenhöhe */
.wp-block-heading.scr {
  line-height: 1;
}

/* Foto-Slots: echtes core/image füllt den Platzhalter-Rahmen randlos */
.ph .wp-block-image,
.ph .wp-block-image img,
.photo-ph .wp-block-image img {
  width: 100%;
  height: 100%;
  margin: 0;
}
.ph .wp-block-image img {
  object-fit: cover;
}

/* Sub-Nav nicht unter die WP-Admin-Bar schieben (nur eingeloggt/Editor) */
.admin-bar .subnav {
  top: calc(var(--header-h) + 32px);
}
.admin-bar .site-header.scrolled ~ .subnav {
  top: calc(var(--header-h-shrunk) + 32px);
}
@media (max-width: 782px) {
  .admin-bar .subnav {
    top: calc(var(--header-h) + 46px);
  }
}


/* Contact Form 7 an das .field-Design des Mockups angleichen */
.wpcf7-form label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sage-d);
  margin: 0;
  padding: 0;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
  display: block;
  width: 100%;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #e1dccb;
  border-radius: 12px;
  padding: 11px 13px;
  margin-top: 5px;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--sage);
}
/* CF7 rendert die Textarea ohne rows-Angabe in Standardhöhe (~10 Zeilen) → war zu hoch.
   Auf ~5 Zeilen begrenzen (wie .field im Mockup), per Drag weiter aufziehbar. */
.wpcf7-form textarea {
  height: 120px;
  min-height: 90px;
  resize: vertical;
}
/* Select (Betreff): eigener Pfeil mit Abstand zum Rand, native appearance aus → behebt Pfeil-am-Rand + verschobenes Overlay */
.wpcf7-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237E9B57' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  background: var(--gold);
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  margin-top: 6px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.wpcf7-form .wpcf7-submit:hover {
  background: var(--gold-h);
  transform: translateY(-1px);
}
.wpcf7-form .wpcf7-spinner {
  margin: 14px auto 0;
}
/* Datenschutz-Checkbox (CF7 acceptance): grün, klickbares Label im Seitenstil */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 8px 0 0;
}
.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink2);
  line-height: 1.5;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--sage);
  cursor: pointer;
}
.wpcf7-form .wpcf7-acceptance a {
  color: var(--terra);
  font-weight: 700;
}
.wpcf7-form .wpcf7-response-output {
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  margin: 16px 0 0;
  padding: 11px 15px;
}
.wpcf7-form .wpcf7-not-valid-tip {
  color: var(--rot-d);
  font-size: 12.5px;
  margin-top: 4px;
}

/* OpenStreetMap-Einbettung (DSGVO: kein Google) */
.map-embed {
  overflow: hidden;
  border-radius: 24px;
  min-height: 320px;
  height: 100%;
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

/* Aktuelles: WP-Beitragsblöcke im .ncard-Layout (core/post-template) */
.ncard .wp-block-post-featured-image {
  height: 160px;
  margin: 0;
  overflow: hidden;
}
.ncard .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ncard .wp-block-post-title {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0;
  line-height: 1.3;
}
.ncard .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.ncard .wp-block-post-title a:hover {
  color: var(--terra);
}
.ncard .wp-block-post-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ncard .wp-block-post-excerpt {
  margin: 0;
}
.ncard .wp-block-post-excerpt p,
.ncard .wp-block-post-excerpt__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0;
}
.ncard .wp-block-post-excerpt__more-link {
  color: var(--terra);
  font-weight: 700;
  font-size: 13.5px;
}
/* core/post-template als Karten-Grid: Aufzählungspunkte aus */
.cardgrid.wp-block-post-template {
  list-style: none;
  padding: 0;
  margin: 16px auto;
}
.cardgrid.wp-block-post-template > li {
  margin: 0;
}

/* FAQ über den core/details-Block (natives Akkordeon, ohne JS) */
.faq details {
  border-bottom: 1px solid rgba(60, 55, 40, 0.1);
}
/* letzte FAQ-Frage: keinen abschließenden Strich */
.faq details:last-of-type {
  border-bottom: 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-family: "Nunito", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 18px 2px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sage-t);
  color: var(--sage-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition:
    transform 0.2s,
    background 0.2s,
    color 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--sage);
  color: #fff;
}
.faq details p,
.faq details li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
}
.faq details a {
  color: var(--terra);
  font-weight: 700;
}
.faq details > :last-child {
  margin-bottom: 18px;
}
/* Abstand Frage → Antwort ~40% enger: Antwort-Element-Margin 24px → 7px (Summary-Padding 18px bleibt) */
.faq details > summary + * {
  margin-top: 7px;
}

/* Lange Rechtstexte (Impressum/Satzung): ruhigere Überschriften statt großer Schreibschrift */
.prose.legal h2 {
  font-family: "Nunito", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--sage-d);
  margin: 28px 0 6px;
  line-height: 1.3;
}
.prose.legal h3 {
  font-size: 16px;
  margin: 18px 0 4px;
}

/* Icon-Timeline-Variante (Chronologie/Geschichte) — Icon-Knoten statt schlichtem Punkt */
.timeline.icontl {
  padding-left: 54px;
}
.timeline.icontl::before {
  left: 21px;
}
.timeline.icontl .tl {
  padding-left: 16px;
  padding-bottom: 30px;
}
.timeline.icontl .tl::before {
  display: none;
}
.timeline.icontl .tl-ic {
  position: absolute;
  left: -54px;
  top: -3px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--sage-t);
  color: var(--sage-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  box-shadow: 0 4px 12px rgba(60, 55, 40, 0.07);
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.timeline.icontl .tl:hover .tl-ic {
  border-color: var(--sage);
  transform: scale(1.06);
}
@media (max-width: 760px) {
  .timeline.icontl {
    padding-left: 46px;
  }
  .timeline.icontl::before {
    left: 18px;
  }
  .timeline.icontl .tl-ic {
    left: -46px;
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* Touch-Geräte (kein echtes Hover): Bewegungs-Hovereffekte aus —
   verhindert "Animations-Feedback ohne dahinterliegende Aktion" beim Antippen. */
@media (hover: none) {
  .val:hover .ic,
  .pcard:hover,
  .gartile:hover .pic img,
  .row .imgwrap .ph:hover img,
  .ncard:hover,
  .lrow:hover,
  .roberto:hover,
  .timeline.icontl .tl:hover .tl-ic,
  .cta:hover,
  .wp-block-button__link:hover,
  .pill:hover,
  .robgal .t:hover img {
    transform: none;
  }
}

/* Marken-Schriftzug neben dem Logo */
.brand-word {
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* Sprach-Umschalter (DE/EN) — oben rechts */
.langswitch-wrap {
  text-align: right;
  margin-bottom: 10px;
}
.langswitch {
  display: inline-flex;
  gap: 4px;
  background: var(--sage-bg);
  padding: 4px;
  border-radius: 999px;
}
.langswitch button {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--sage-d);
  padding: 7px 18px;
  border-radius: 999px;
  transition:
    background 0.15s,
    color 0.15s;
}
.langswitch button:hover {
  background: var(--sage-t);
}
.langswitch button.active {
  background: var(--sage);
  color: #fff;
}
.lang-hidden {
  display: none;
}

/* Full-Bleed-Akzentbänder (#10): farbige Abschnitte randlos von Kante zu Kante.
   Der Inhalt bleibt innen auf Wrap-Breite zentriert (eco-grid/video-row haben max-width:wrap).
   body{overflow-x:hidden} verhindert horizontales Scrollen durch 100vw. */
.eco,
.visit,
.apply,
#mitmachen {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
  max-width: none;
  border-radius: 0;
}
/* Inhalt der Bänder zentriert + lesbar begrenzt */
.apply > *,
#mitmachen > * {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   ANIMIERTER SEITENHINTERGRUND  (Sonne/Mond-Zyklus · Sterne · Wiesen-Deko)
   ------------------------------------------------------------
   Portiert aus dem Mockup „cocolores – animierter Hintergrund (v5)".
   Markup: inc/ambient-background.php (via wp_body_open, direkt nach <body>):
     .bg-defs    – unsichtbare SVG-Symbolbibliothek
     .ambient-bg – fixe Viewport-Ebene (z-index:0), NUR Inline-SVG (DSGVO)
   Der Seiteninhalt liegt darüber via .wp-site-blocks{z-index:1}.
   ALLE Regeln unter .ambient-bg gescopt → keine Kollision mit Theme-Klassen
   (generische Namen wie .star/.hover/.loop/.leaf/.bob bleiben lokal). Einzige
   Ausnahme: @keyframes bob (global) → hier @keyframes ambBob, da das Theme
   für die .deco-Ebene bereits ein @keyframes bob besitzt.
   ZONEN:  Himmel 0–32vh (Sonne/Mond/Wolken/Sterne) · Wiesenluft 40–90vh
           (Deko dünnt nach unten aus → „ganz unten kaum Schwebendes").
   ============================================================ */

/* Seiteninhalt über die Hintergrund-Ebene heben (Ebene liegt bei z-index:0,
   hinter dem Content, aber vor dem body-Hintergrund var(--canvas)). */
.wp-site-blocks {
  position: relative;
  z-index: 1;
}

/* Versteckte Symbol-Bibliothek (wiederverwendete SVG-Formen) */
.bg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* --- Stellschrauben (wirken auf die ganze Ebene) --- */
  --tag-dauer: 242s;    /* kompletter Tag+Nacht-Zyklus; Sonnenbogen = die Hälfte (Sonne/Mond/Wolken unberührt vom Tempo) */
  --zyklus-delay: -22s; /* Startversatz (negativ = Szene läuft beim Laden schon) */
  --sun-arc: 19vh;      /* wie tief Sonne/Mond an den Rändern stehen */
  --deko-deckkraft: 0.585; /* globale Deckkraft der unteren Deko (−10 % ggü. 0.65) */
  --motion-scale: 1.18; /* Bewegungstempo der Wiesen-Objekte: >1 = langsamer (1.18 ≈ −15 % Geschwindigkeit); Wolken/Sonne/Mond ausgenommen */
}

/* Zonen-Tönung: Himmel oben, Wiesenhauch unten */
.ambient-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32vh;
  background: linear-gradient(180deg, rgba(205, 224, 238, 0.32), rgba(205, 224, 238, 0));
}
.ambient-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24vh;
  background: linear-gradient(0deg, rgba(196, 216, 168, 0.24), rgba(196, 216, 168, 0));
}

/* ---------- Wolken (ziehen Tag und Nacht) ---------- */
.ambient-bg .cloud {
  position: absolute;
  left: -340px;
  animation: cloudMove linear infinite;
}
.ambient-bg .cloud svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(176, 154, 120, 0.14));
}
.ambient-bg .cloud-1 { width: 220px; top: 13vh; opacity: 0.9;  animation-duration: 125s; animation-delay: -48s; }
.ambient-bg .cloud-2 { width: 150px; top: 7vh;  opacity: 0.65; animation-duration: 160s; animation-delay: -95s; }
.ambient-bg .cloud-3 { width: 110px; top: 21vh; opacity: 0.5;  animation-duration: 100s; animation-delay: -15s; }
@keyframes cloudMove {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 380px)); }
}

/* ---------- Nacht-Schleier (dezente Dämmerung über dem Himmel) ---------- */
.ambient-bg .night-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(88, 102, 148, 0.16), rgba(88, 102, 148, 0.05) 45%, rgba(70, 84, 120, 0.09));
  opacity: 0;
  animation: veilFade var(--tag-dauer) linear infinite;
  animation-delay: var(--zyklus-delay);
}
@keyframes veilFade {
  0%, 46%  { opacity: 0; }
  54%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}

/* ---------- Sonne & Mond (wechseln sich ab) ---------- */
.ambient-bg .sun-x,
.ambient-bg .moon-x {
  position: absolute;
  top: 7vh;
  left: -160px;
}
.ambient-bg .sun-x  { animation: sunX  var(--tag-dauer) linear infinite var(--zyklus-delay); }
.ambient-bg .moon-x { animation: moonX var(--tag-dauer) linear infinite var(--zyklus-delay); }
.ambient-bg .sun-y  { animation: sunY  var(--tag-dauer) ease-in-out infinite var(--zyklus-delay); }
.ambient-bg .moon-y { animation: moonY var(--tag-dauer) ease-in-out infinite var(--zyklus-delay); }
.ambient-bg .sun,
.ambient-bg .moon {
  display: block;
  width: clamp(88px, 10vw, 132px);
  height: auto;
  opacity: 0;
}
.ambient-bg .sun  { animation: sunFade  var(--tag-dauer) linear infinite var(--zyklus-delay); }
.ambient-bg .moon { animation: moonFade var(--tag-dauer) linear infinite var(--zyklus-delay); width: clamp(76px, 8.5vw, 112px); }
.ambient-bg .sun-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: sunSpin 80s linear infinite;
}
@keyframes sunX  { 0% { transform: translateX(0); } 50%, 100% { transform: translateX(calc(100vw + 320px)); } }
@keyframes sunY  { 0% { transform: translateY(var(--sun-arc)); } 25% { transform: translateY(0); } 50%, 100% { transform: translateY(var(--sun-arc)); } }
@keyframes sunFade { 0% { opacity: 0; } 3% { opacity: 0.8; } 46% { opacity: 0.8; } 50%, 100% { opacity: 0; } }
@keyframes moonX { 0%, 50% { transform: translateX(0); } 100% { transform: translateX(calc(100vw + 320px)); } }
@keyframes moonY { 0%, 50% { transform: translateY(var(--sun-arc)); } 75% { transform: translateY(0); } 100% { transform: translateY(var(--sun-arc)); } }
@keyframes moonFade { 0%, 50% { opacity: 0; } 54% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sunSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ---------- Sterne (funkeln nur nachts) ---------- */
.ambient-bg .star {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: var(--ss, 9px);
  opacity: 0;
  animation: nightVis var(--tag-dauer) linear infinite;
  animation-delay: var(--zyklus-delay);
}
.ambient-bg .star svg {
  display: block;
  width: 100%;
  height: auto;
  animation: twinkle var(--tw, 2.6s) ease-in-out infinite alternate;
  animation-delay: var(--twd, 0s);
}
@keyframes twinkle {
  from { opacity: 0.4; transform: scale(0.72); }
  to   { opacity: 1;   transform: scale(1); }
}

/* ---------- Sternschnuppe (1× pro Nacht, Easter Egg) ---------- */
.ambient-bg .sternschnuppe {
  position: absolute;
  top: 8vh;
  left: 66vw;
  width: 74px;
  opacity: 0;
  animation: schnuppe var(--tag-dauer) linear infinite;
  animation-delay: var(--zyklus-delay);
}
.ambient-bg .sternschnuppe svg { display: block; width: 100%; height: auto; transform: rotate(153deg); }
@keyframes schnuppe {
  0%, 71%  { opacity: 0; transform: translate(0, 0); }
  71.5%    { opacity: 0.85; }
  73.2%    { opacity: 0; transform: translate(-26vw, 13vh); }
  100%     { opacity: 0; transform: translate(-26vw, 13vh); }
}

/* ---------- Wiesenluft (untere Zone) ----------
   .traverse = Querung · .loop = Wind-Schleife · .bob = Auf/Ab + Pendeln */
.ambient-bg .meadow-air { opacity: var(--deko-deckkraft); }
.ambient-bg .floater {
  position: absolute;
  top: var(--top, 60vh);
  left: 0;
  width: var(--size, 28px);
  opacity: var(--op, 0.9);
}
.ambient-bg .floater svg { display: block; width: 100%; height: auto; }
.ambient-bg .traverse {
  animation: driftR calc(var(--dur, 55s) * var(--motion-scale)) linear infinite;
  animation-delay: var(--delay, 0s);
}
.ambient-bg .floater.rtl .traverse { animation-name: driftL; }
.ambient-bg .floater.rtl svg { transform: scaleX(-1); } /* Tiere fliegen mit dem Kopf voran */
.ambient-bg .loop {
  animation: orbit calc(var(--loopDur, 12s) * var(--motion-scale)) linear infinite;
  animation-delay: var(--loopDelay, 0s);
}
.ambient-bg .loop-rev { animation-direction: reverse; }
@keyframes orbit {
  from { transform: rotate(0turn) translateX(var(--loopR, 0px)) rotate(0turn); }
  to   { transform: rotate(1turn) translateX(var(--loopR, 0px)) rotate(-1turn); }
}
.ambient-bg .bob {
  animation: ambBob calc(var(--bobDur, 5s) * var(--motion-scale)) ease-in-out infinite alternate;
  animation-delay: var(--bobDelay, 0s);
}
@keyframes driftR {
  from { transform: translate(-12vw, 0); }
  to   { transform: translate(112vw, var(--dy, 0vh)); }
}
@keyframes driftL {
  from { transform: translate(112vw, 0); }
  to   { transform: translate(-12vw, var(--dy, 0vh)); }
}
@keyframes ambBob {
  from { transform: translateY(calc(var(--amp, 10px) * -1)) rotate(var(--rockA, -8deg)); }
  to   { transform: translateY(var(--amp, 10px)) rotate(var(--rockB, 8deg)); }
}

/* Tag/Nacht-Wechsel der Wesen (dezentes Ein-/Ausfaden) */
.ambient-bg .tagwesen {
  animation: dayVis var(--tag-dauer) linear infinite;
  animation-delay: var(--zyklus-delay);
}
.ambient-bg .nachtwesen {
  animation: nightVis var(--tag-dauer) linear infinite;
  animation-delay: var(--zyklus-delay);
}
@keyframes dayVis {
  0%, 46%  { opacity: var(--op, 0.9); }
  52%, 94% { opacity: 0; }
  100%     { opacity: var(--op, 0.9); }
}
@keyframes nightVis {
  0%, 46%  { opacity: 0; }
  52%, 94% { opacity: var(--op, 0.9); }
  100%     { opacity: 0; }
}

/* Charakter je Element-Typ (Wipp-Amplitude, Neigung, Tempo-Wellen) */
.ambient-bg .seed      { --amp: 11px; --rockA: -11deg; --rockB: 8deg;  --bobDur: 5.8s; }
.ambient-bg .leaf      { --amp: 8px;  --rockA: -24deg; --rockB: 13deg; --bobDur: 6.8s; }
.ambient-bg .clover    { --amp: 9px;  --rockA: -17deg; --rockB: 15deg; --bobDur: 7.2s; }
.ambient-bg .bee       { --amp: 14px; --rockA: -7deg;  --rockB: 7deg;  --bobDur: 3.2s; --surge: 2.2vw; --surgeDur: 7s; }
.ambient-bg .ladybug   { --amp: 9px;  --rockA: -5deg;  --rockB: 5deg;  --bobDur: 4.6s; --surge: 1.5vw; --surgeDur: 9s; }
.ambient-bg .butterfly { --amp: 20px; --rockA: -9deg;  --rockB: 7deg;  --bobDur: 4.6s; --surge: 2.6vw; --surgeDur: 8s; }
.ambient-bg .moth      { --amp: 18px; --rockA: -11deg; --rockB: 9deg;  --bobDur: 3s;   --surge: 3vw;   --surgeDur: 5s; }
.ambient-bg .firefly   { --amp: 12px; --rockA: -5deg;  --rockB: 5deg;  --bobDur: 4.4s; }
/* Schmetterling & Motte zusätzlich ~30 % langsamer als die übrigen Wiesen-Objekte:
   eigener, höherer --motion-scale (überschreibt den geerbten Wert von .ambient-bg). */
.ambient-bg .butterfly,
.ambient-bg .moth { --motion-scale: 1.7; }

/* Flügelschlag Biene & Glühwürmchen */
.ambient-bg .wing {
  transform-box: fill-box;
  transform-origin: 50% 95%;
  animation: flutter 0.18s ease-in-out infinite alternate;
}
.ambient-bg .wing-back { animation-delay: -0.09s; }
@keyframes flutter {
  from { transform: rotate(-20deg); }
  to   { transform: rotate(18deg); }
}

/* Lebendigkeits-Schichten für Tiere:
   .surge = Tempo-Wellen · .hover = Auf/Ab · .tilt = Neigung (um HALBE
   Wipp-Phase versetzt → das Tier lehnt sich in Steig-/Sinkflug). */
.ambient-bg .surge {
  animation: surgeX calc(var(--surgeDur, 8s) * var(--motion-scale)) ease-in-out infinite alternate;
  animation-delay: var(--surgeDelay, 0s);
}
@keyframes surgeX {
  from { transform: translateX(calc(var(--surge, 0vw) * -1)); }
  to   { transform: translateX(var(--surge, 0vw)); }
}
.ambient-bg .hover {
  animation: hoverY calc(var(--bobDur, 4s) * var(--motion-scale)) ease-in-out infinite alternate;
  animation-delay: var(--bobDelay, 0s);
}
@keyframes hoverY {
  from { transform: translateY(calc(var(--amp, 12px) * -1)); }
  to   { transform: translateY(var(--amp, 12px)); }
}
.ambient-bg .tilt {
  animation: tiltTo calc(var(--bobDur, 4s) * var(--motion-scale)) ease-in-out infinite alternate;
  animation-delay: calc(var(--bobDelay, 0s) - var(--bobDur, 4s) * var(--motion-scale) / 2);
}
.ambient-bg .floater.rtl .tilt { animation-name: tiltToRtl; } /* gespiegelte Tiere lehnen sich spiegelverkehrt */
@keyframes tiltTo {
  from { transform: rotate(var(--rockA, -6deg)); }
  to   { transform: rotate(var(--rockB, 6deg)); }
}
@keyframes tiltToRtl {
  from { transform: rotate(calc(var(--rockA, -6deg) * -1)); }
  to   { transform: rotate(calc(var(--rockB, 6deg) * -1)); }
}
/* Baumelnde Beinchen & wippende Fühler */
.ambient-bg .legs {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: legsSwing 1.1s ease-in-out infinite alternate;
}
@keyframes legsSwing {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(6deg); }
}
.ambient-bg .antennae {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  animation: antSway 1.7s ease-in-out infinite alternate;
}
@keyframes antSway {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(3deg); }
}

/* Flügelschlag Schmetterling & Motte (beide Flügel falten symmetrisch
   zur Körperachse → kann nicht „auseinanderbrechen"). */
.ambient-bg .pair-wings {
  transform-box: fill-box;
  transform-origin: center;
  animation: flap 0.8s ease-in-out infinite alternate;
}
.ambient-bg .moth .pair-wings { animation-duration: 0.5s; }
@keyframes flap {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0.35); }
}

/* Glühwürmchen-Leuchten: weiches Aufglimmen (.ff-light = Halo,
   .ff-hot = Hinterleib; teilen sich --gp/--gpd → pulsieren synchron). */
.ambient-bg .ff-light {
  transform-box: fill-box;
  transform-origin: center;
  animation: glowPulse var(--gp, 2.8s) ease-in-out infinite;
  animation-delay: var(--gpd, 0s);
}
.ambient-bg .ff-hot {
  animation: hotPulse var(--gp, 2.8s) ease-in-out infinite;
  animation-delay: var(--gpd, 0s);
}
@keyframes glowPulse {
  0%   { opacity: 0.15; transform: scale(0.7); }
  35%  { opacity: 0.25; transform: scale(0.8); }
  55%  { opacity: 1;    transform: scale(1.18); }
  70%  { opacity: 0.8;  transform: scale(1.06); }
  100% { opacity: 0.15; transform: scale(0.7); }
}
@keyframes hotPulse {
  0%   { opacity: 0.25; }
  35%  { opacity: 0.35; }
  55%  { opacity: 1; }
  70%  { opacity: 0.85; }
  100% { opacity: 0.25; }
}

/* Mobil: schwere Wiesen-Deko aus, der günstige Himmel bleibt erhalten
   (konsistent mit der bestehenden .deco-Ebene, die ≤760px ausgeblendet wird). */
@media (max-width: 760px) {
  .ambient-bg .meadow-air { display: none; }
}

/* Reduzierte Bewegung: ruhige, statische Tag-Szene */
@media (prefers-reduced-motion: reduce) {
  .ambient-bg * { animation: none !important; }
  .ambient-bg .floater,
  .ambient-bg .star,
  .ambient-bg .sternschnuppe,
  .ambient-bg .moon-x,
  .ambient-bg .night-veil { display: none; }
  .ambient-bg .sun { opacity: 0.8; }
  .ambient-bg .sun-x { left: 16vw; }
  .ambient-bg .sun-y { transform: translateY(3vh); }
  .ambient-bg .cloud-1 { left: 10vw; }
  .ambient-bg .cloud-2 { left: 55vw; }
  .ambient-bg .cloud-3 { left: 76vw; }
}