/* ============================================================
   pages.css — Hauptwebseite wolkeaufreisen.de
   Seiten-Komponenten (baut auf wolke-base.css auf)
   Header/Footer · Hero · Katalog · Floating-Card · Icon-Row
   Timeline · Mini-Gallery · Spickzettel · Säule · Steps · Form
   ============================================================ */

/* ---------- Layout-Helfer ---------- */
.container {
  width: min(100% - 2.4rem, var(--maxw));
  margin-inline: auto;
}

.container-wide {
  width: min(100% - 2.4rem, 1180px);
  margin-inline: auto;
}

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.section--tint {
  background: linear-gradient(180deg, #eef8fc 0%, #f6fcfe 55%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

/* Organische Blob-Akzente (asymmetrisch, sehr dezent) statt steriler Fläche */
.section--tint::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 560px;
  height: 560px;
  right: -200px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 112, 158, .08), transparent 70%);
}

.section--tint::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 460px;
  height: 460px;
  left: -190px;
  bottom: -200px;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgba(255, 192, 0, .07), transparent 70%);
}

.section--tint>* {
  position: relative;
  z-index: 1;
}

.center {
  text-align: center;
}

.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--wolke-text-soft);
}

.eyebrow {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: clamp(1.85rem, 4.6vw, 2.4rem);
  color: var(--wolke-green);
  line-height: 1;
  margin: 0 0 .2em;
}

/* Scroll-Reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   HEADER / NAV  (geteiltes Partial)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(0, 112, 158, .12);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ----- Immersiver Header: transparent über dem Hero, solide beim Scrollen.
   Nur auf Seiten mit Hero (body.has-hero, gesetzt via main.js). Legal-Seiten
   ohne Hero behalten den soliden Header. ----- */
body.has-hero .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

body.has-hero .hero {
  margin-top: -76px;
  padding-top: 76px;
}

body.has-hero .site-header:not(.is-solid) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.has-hero .site-header:not(.is-solid) .nav__logo span,
body.has-hero .site-header:not(.is-solid) .nav__primary a,
body.has-hero .site-header:not(.is-solid) .nav__login-toggle {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

body.has-hero .site-header:not(.is-solid) .nav__login-toggle:hover {
  color: #fff;
  opacity: .85;
}

body.has-hero .site-header:not(.is-solid) .nav__login-toggle img {
  opacity: .95;
}

/* Der mobile CTA ist ein grüner Button und trägt sich über dem Hero selbst —
   er braucht hier keine Aufhellung (anders als das frühere Schloss-Symbol). */

body.has-hero .site-header:not(.is-solid) .nav__toggle span,
body.has-hero .site-header:not(.is-solid) .nav__toggle span::before,
body.has-hero .site-header:not(.is-solid) .nav__toggle span::after {
  background: #fff;
}

/* Über dem Hero: nur die Logo-Grafik sichtbar (größer als beim Scrollen).
   Der Schriftzug „Wolke auf Reisen" bleibt aus — sonst Dopplung mit Hero-Titel. */
body.has-hero .site-header:not(.is-solid) .nav__logo img {
  height: 92px;
}

body.has-hero .site-header:not(.is-solid) .nav__logo span {
  display: none;
}

.site-header.is-solid {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: min(100% - 2.4rem, 1180px);
  margin-inline: auto;
  height: 76px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex: 0 0 auto;
  transition: opacity .3s ease;
}

.nav__logo img {
  height: 58px;
  width: auto;
  transition: transform .2s ease;
}

.nav__logo:hover img {
  transform: rotate(-3deg) scale(1.04);
}

.nav__logo span {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--wolke-blue);
  line-height: 1;
  white-space: nowrap;
}

/* Menü füllt den Raum nach dem Logo: Seiten-Links links, Login+CTA rechts */
.nav__links {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav__primary {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: .8rem;
}

/* Seiten-Links: dezenter, von links wachsender Unterstrich (keine Button-Pille) */
.nav__primary a {
  position: relative;
  text-decoration: none;
  color: var(--wolke-text);
  font-weight: 600;
  font-size: .98rem;
  padding: .35rem .1rem;
  transition: color .15s ease;
}

.nav__primary a::after {
  content: "";
  position: absolute;
  left: .1rem;
  right: .1rem;
  bottom: -.05rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.nav__primary a:hover,
.nav__primary a[aria-current="page"] {
  color: var(--wolke-blue);
}

.nav__primary a:hover::after,
.nav__primary a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ----- Nav-Dropdown: Hover-Schnellzugriff auf die Angebote -----
   Optik wie das „Euer Projekt"-Popover (weiß, blur, leaf-radius, Pfeil).
   Trigger = echter Übersichts-Link; das Menü öffnet bei Hover/Fokus. */
.nav__group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__group-link {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
}
/* kleiner Caret, dreht sich beim Öffnen */
.nav__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .65;
  transition: transform .2s ease, opacity .15s ease;
}
.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav__menu {
  position: absolute;
  top: calc(100% + .55rem);
  left: -.4rem;
  z-index: 200;
  min-width: 14rem;
  padding: .45rem;
  display: grid;
  gap: .05rem;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(0, 112, 158, .16);
  border-radius: var(--leaf-sm);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* unsichtbare Hover-Brücke über der .55rem-Lücke, damit das Menü beim
   Rübergehen vom Trigger nicht zuklappt */
.nav__menu::before {
  content: "";
  position: absolute;
  top: -.6rem;
  left: 0;
  right: 0;
  height: .6rem;
}
/* Pfeil Richtung Trigger */
.nav__menu::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 1.6rem;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, .96);
  border-left: 1px solid rgba(0, 112, 158, .16);
  border-top: 1px solid rgba(0, 112, 158, .16);
  transform: rotate(45deg);
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
/* Menü-Links: eigene Optik (überschreibt die .nav__primary-a-Defaults) */
.nav__menu a {
  position: relative;
  display: block;
  padding: .52rem .7rem;
  border-radius: .55rem;
  color: var(--wolke-text);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.nav__menu a::after { display: none; }   /* kein Unterstrich-Effekt im Menü */
.nav__menu a:hover,
.nav__menu a:focus-visible {
  background: rgba(0, 112, 158, .09);
  color: var(--wolke-blue);
  outline: none;
}
/* „Alle …"-Übersichtszeile leicht abgesetzt */
.nav__menu-all {
  color: var(--wolke-blue) !important;
  border-bottom: 1px solid rgba(0, 112, 158, .12);
  border-radius: .55rem .55rem 0 0 !important;
  margin-bottom: .15rem;
}
/* Über dem Hero (transparenter Header) bleibt das Caret hell wie der Trigger;
   das Menü selbst ist immer auf weißem Grund → dunkle Links, hier zurücksetzen. */
body.has-hero .site-header:not(.is-solid) .nav__menu a { color: var(--wolke-text); text-shadow: none; }
body.has-hero .site-header:not(.is-solid) .nav__menu a:hover { color: var(--wolke-blue); }
body.has-hero .site-header:not(.is-solid) .nav__menu-all { color: var(--wolke-blue); }

/* ----- Mini-Login: Desktop = dezenter Button + Popover ----- */
.nav__login {
  position: relative;
  margin-left: .25rem;
}

.nav__login-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  color: var(--wolke-text);
  background: transparent;
  border: none;
  padding: .5rem .8rem;
  border-radius: var(--leaf-sm);
  transition: background .15s ease, color .15s ease;
}

.nav__login-toggle img {
  opacity: .8;
  transition: opacity .15s ease;
}

.nav__login-toggle:hover,
.nav__login[data-open] .nav__login-toggle {
  color: var(--wolke-blue);
}

.nav__login-toggle:hover img,
.nav__login[data-open] .nav__login-toggle img {
  opacity: 1;
}

.nav__login-pop {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  z-index: 200;
  width: 15rem;
  padding: 1rem;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(0, 112, 158, .16);
  border-radius: var(--leaf-sm);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .16);
  animation: login-pop-in .16s ease;
}

.nav__login-pop[hidden] {
  display: none;
}

.nav__login-pop::before {
  /* Pfeil Richtung Toggle */
  content: "";
  position: absolute;
  top: -7px;
  right: 1.4rem;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, .94);
  border-left: 1px solid rgba(0, 112, 158, .16);
  border-top: 1px solid rgba(0, 112, 158, .16);
  transform: rotate(45deg);
}

@keyframes login-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.nav__login-hint {
  margin: 0 0 .6rem;
  font-size: .78rem;
  color: var(--wolke-text-soft);
}

.nav__login-form {
  display: grid;
  gap: .5rem;
}

.nav__login-field {
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  color: var(--wolke-text);
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid rgba(0, 112, 158, .2);
  border-radius: var(--leaf-sm);
  background: #fff;
}

.nav__login-field::placeholder {
  color: var(--wolke-text-soft);
  opacity: .8;
}

.nav__login-field:focus {
  outline: none;
  border-color: var(--wolke-blue);
  box-shadow: 0 0 0 2px rgba(0, 112, 158, .18);
}

.nav__login-btn {
  cursor: pointer;
  margin-top: .1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .55rem .8rem;
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  border: none;
  /* Voller Leaf wie .btn — Christians Regel zu Notiz 41 („alle Button auf
     leafstyle"): dieser Login-Knopf sah als einziger echter Button noch
     kleiner geschnitten aus als die Buttons im Seiteninhalt. */
  border-radius: var(--leaf);
  background: linear-gradient(135deg, #0a82b4 0%, var(--wolke-blue) 55%, var(--wolke-blue-dark) 100%);
  color: #fff;
  transition: filter .15s ease, transform .15s ease;
}

.nav__login-btn img {
  display: block;
  filter: brightness(0) invert(1);
}

.nav__login-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.nav__login-btn:active {
  transform: translateY(0);
}

.footer-login img {
  filter: brightness(0) invert(1);
  opacity: .85;
}

/* ----- Mobil-only Bauteile: auf dem Desktop aus -----
   Desktop hat den CTA rechts in .nav__actions und das Login-Popover oben;
   diese beiden greifen erst unter 860px (siehe Media-Query weiter unten). */
.nav__cta-mobile,
.nav__login-burger {
  display: none;
  text-decoration: none;
}

.nav__cta {
  margin-left: .4rem;
}

.nav__toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--leaf-sm);
  padding: 0;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  position: relative;
  width: 24px;
  height: 2.5px;
  background: var(--wolke-blue);
  border-radius: 2px;
  margin-inline: auto;
  transition: transform .25s ease, opacity .2s ease;
}

.nav__toggle span::before {
  position: absolute;
  top: -7px;
}

.nav__toggle span::after {
  position: absolute;
  top: 7px;
}

.nav.open .nav__toggle span {
  background: transparent;
}

.nav.open .nav__toggle span::before {
  transform: translateY(7px) rotate(45deg);
}

.nav.open .nav__toggle span::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav__toggle {
    display: block;
  }

  /* Mobile: kein Login-Popover im engen Header — der Platz gehört dem CTA.
     Der Login liegt als .nav__login-burger unten im aufgeklappten Menü. */
  .nav__login {
    display: none;
  }

  /* Haupt-CTA: immer sichtbar, direkt neben dem Burger, in Daumenreichweite.
     Vorher war "Anfragen" im Menü versteckt -> auf dem Handy gab es auf
     keiner Seite einen sichtbaren Weg zur Anfrage. */
  .nav__cta-mobile {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 44px;          /* Tap-Target-Mindestmaß */
    padding: .5rem 1rem;
    font-size: .95rem;
    white-space: nowrap;
  }

  /* Notiz 63 (19.08.2026), Teil 1: über dem Hero (Header noch transparent)
     soll der grüne CTA mobil NICHT stehen — dort trägt das große Logo, und
     der Hero hat seinen eigenen Anfrage-Button. Erst wenn der Header solide
     wird, kommt „Anfragen" in die Leiste. Erreichbar bleibt er die ganze
     Zeit über das Burger-Menü (.nav__cta darin). */
  body.has-hero .site-header:not(.is-solid) .nav__cta-mobile {
    display: none;
  }

  /* Notiz 63, Teil 2: „Nach dem Scrollen ist das Hamburgermenu weg."
     Ursache war kein display-Fehler, sondern Platzmangel: im soliden Zustand
     blendet sich der Schriftzug „Wolke auf Reisen" (Amatic, nowrap, ~150 px)
     wieder ein; zusammen mit Logo-Grafik, CTA und Burger sind das bei 375 px
     rund 100 px zu viel, und der Burger als letztes Flex-Kind rutschte aus
     der Leiste. Mobil trägt die Logo-Grafik allein — der Schriftzug bleibt
     deshalb auf schmalen Viewports in BEIDEN Zuständen aus. */
  .nav__logo span {
    display: none;
  }

  /* Sicherheitsnetz, falls doch mal etwas Breites dazukommt: der Burger ist
     das Letzte, was verschwinden darf. */
  .nav__toggle {
    flex: 0 0 44px;
  }

  .nav__login-burger {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .6rem;
    padding: .85rem 1rem;
    border-top: 1px solid rgba(0, 112, 158, .14);
    color: var(--wolke-blue);
    font-weight: 600;
  }

  .nav__links {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 1rem 1.2rem 1.6rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    /* Geschlossen: nach oben geschoben UND ausgeblendet — verhindert,
       dass ein Rest (CTA-Button) unter dem Header hervorlugt. */
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    border-bottom: 1px solid rgba(0, 112, 158, .12);
  }

  .nav.open .nav__links {
    transform: none;
    visibility: visible;
    transition: transform .3s ease, visibility 0s;
  }

  /* Gruppen im Dropdown gestapelt, volle Breite */
  .nav__links {
    justify-content: flex-start;
    gap: .4rem;
  }

  .nav__primary,
  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    width: 100%;
  }

  .nav__primary a {
    padding: .85rem 1rem;
    font-size: 1.05rem;
  }

  .nav__primary a::after {
    display: none;
  }

  /* Dropdown mobil: kein Hover/Popover — Angebote liegen aufgeklappt und
     eingerückt direkt unter dem Übersichts-Link im Hamburger-Menü. */
  .nav__group {
    display: block;
    width: 100%;
  }
  .nav__caret { display: none; }
  .nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 .4rem .6rem;
    margin: 0 0 .2rem;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    transition: none;
  }
  .nav__menu::before,
  .nav__menu::after { display: none; }
  .nav__menu a {
    padding: .6rem .9rem;
    font-size: 1rem;
    border-radius: .55rem;
  }
  .nav__menu-all {
    border-bottom: none;
    margin-bottom: 0;
  }

  /* mobil kein Unterstrich-Effekt */
  /* Im offenen Dropdown immer dunkle Links — auch wenn der Header (über Hero) transparent ist */
  body.has-hero .site-header:not(.is-solid) .nav.open .nav__primary a {
    color: var(--wolke-text);
    text-shadow: none;
  }

  body.has-hero .site-header:not(.is-solid) .nav.open .nav__primary a:hover {
    color: var(--wolke-blue);
  }

  .nav__cta {
    margin: .5rem 0 0;
    justify-content: center;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: clamp(440px, 78vh, 780px);
  display: grid;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: #14506b;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Alternatives Hochformat-Bild für schmale Viewports (Querformat-Banner
   verlieren auf Mobile ihr Motiv durch das aggressive cover-Crop). Per
   display:none lädt der Browser das jeweils ungenutzte Bild nicht. */
.hero__bg--mobile {
  display: none;
}

/* Querformat-Banner: Motiv (Paddler) sitzt im unteren Bilddrittel — auf sehr
   breiten/4K-Screens tieferen Ausschnitt zeigen statt nur den Himmel oben. */
.hero__bg--wide {
  /* 40 % statt 55 %: die Paddlerreihe sitzt damit unterhalb des Claims statt
     mitten drin — sichtbar (Notiz 8), ohne die Schrift zu stören. */
  background-position: center 40%;
}

/* Parallax-Falle (Notiz 8/21 vom 30.06.2026: „Herobild ist auf dem 4K gar
   nicht zu sehen – nur etwas Wolken oben, keine Paddler"):
   background-attachment:fixed richtet den Bildausschnitt am VIEWPORT aus,
   nicht am Hero-Element. Der Hero ist auf max. 780px gedeckelt — ist der
   Viewport höher (WQHD/4K), zeigt er nur das obere Stück des viewportgroßen
   Bildes, also reinen Himmel. background-position half deshalb nicht.
   Ab 900px Viewport-Höhe daher kein Parallax mehr: dann greift `cover` am
   Element und das Motiv sitzt wieder da, wo es hingehört. */
@media (min-height: 900px) {
  .hero__bg {
    background-attachment: scroll;
  }
}

/* Handy im Querformat (Notiz 33, 15.08.2026): der Hero ist dann nur noch
   gut 300px hoch, `cover` schneidet oben an — zu sehen war fast nur Himmel,
   die Gruppe steckte hinter den CTAs. Unten ausrichten holt das Motiv nach
   oben in den sichtbaren Bereich; Parallax muss dafür aus, sonst zieht der
   Viewport-Bezug den Ausschnitt wieder weg. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__bg {
    background-attachment: scroll;
    background-position: center bottom;
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Kleiner Scrim, nur unter dem Text (Christians Vorgabe 20.08.2026).
     Die frühere Fassung deckte mit 78 % × 62 % plus einem Verlauf über die
     volle Höhe faktisch das ganze Bild ab — das war der graue Eindruck. */
  background:
    radial-gradient(ellipse 30% 20% at 30% 60%, rgba(1,28,44,.52) 0%, rgba(1,28,44,.14) 58%, rgba(1,28,44,0) 82%);
}

/* Organischer, asymmetrischer Übergang am Hero-Fuß (blendet in den weißen Folgeabschnitt) */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  pointer-events: none;
  height: clamp(34px, 5vw, 64px);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2080'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,38%20C300,86%20540,8%20780,30%20C1010,52%201230,84%201440,46%20L1440,80%20L0,80%20Z'%20fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 100%;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(2.4rem, 6vw, 4rem) 0;
}

/* Themenseiten-Hero: der Text steht links, der zentrierte Scrim greift dort
   kaum. Über kontrastreichen Bildpartien (Boote, Ufer, Schaum) wurde der
   Fließtext dadurch grenzwertig — Notiz 20 („nicht lesbar"). Deshalb ein
   zusätzlicher Verlauf von links, als weitere Ebene IM Scrim (::before ist
   die weiße Wellenkante am Hero-Fuß und darf nicht überschrieben werden;
   ein eigener, auf den Textblock begrenzter Träger hinterließ Kanten).
   Die Startseite (.hero--home) bleibt außen vor: dort sitzt der Text mittig,
   wo der Scrim ohnehin am dunkelsten ist. */
/* Notiz 33 (15.08.2026): „Schrift ist jetzt gut lesbar, dafür wirkt das
   Herobild grau." Der Scrim lag mit ellipse 78%×62% flächig über fast dem
   ganzen Bild — der graue Eindruck kam von der FLÄCHE, nicht von der Stärke.
   Also nicht abschwächen (der erste Versuch machte den Claim unlesbar),
   sondern zusammenziehen. Maße von Christian gesetzt (15.08.2026): ein
   schmales Band (40 %×24 %) auf Höhe des Claims — der Markenzug darüber steht
   ohnehin vor dunklem Himmel, Wasser und Ufer bleiben komplett farbig. */
.hero--home::after {
  background:
    radial-gradient(ellipse 40% 24% at 50% 60%, rgba(1,28,44,.56) 0%, rgba(1,28,44,.22) 55%, rgba(1,28,44,0) 80%),
    linear-gradient(180deg, rgba(1,30,46,.28) 0%, rgba(1,30,46,0) 30%, rgba(1,30,46,0) 78%, rgba(1,36,54,.32) 100%);
}


.hero:not(.hero--home)::after {
  background:
    linear-gradient(90deg, rgba(1,28,44,.5) 0%, rgba(1,28,44,.36) 26%, rgba(1,28,44,.1) 54%, rgba(1,28,44,0) 72%),
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(1,28,44,.52) 0%, rgba(1,28,44,.14) 58%, rgba(1,28,44,0) 82%),
    linear-gradient(180deg, rgba(1,30,46,.34) 0%, rgba(1,30,46,0) 26%, rgba(1,30,46,0) 74%, rgba(1,36,54,.5) 100%);
}

/* Heller Themen-Hero (Notiz 45, 18.08.2026, /klassenfahrt/kanutour/):
   „Das Herobild ist viel zu verschattet." kanu2.webp ist von Haus aus dunkel
   (Abendlicht, Ufer im Schatten) — der volle Themen-Scrim aus drei Ebenen
   legte darüber noch einmal Tiefe von links, aus der Mitte und von unten.
   Maße von Christian gesetzt: nur noch EIN schmaler Fleck hinter dem
   Textblock, sonst nichts. Die Lesbarkeit trägt hier ab sofort im Wesentlichen
   der Textschatten von .hero h1 / .hero p.
   Bewusst NUR für diese Seite (eigene Klasse statt Änderung an
   `.hero:not(.hero--home)`): der linke Verlauf kam aus Notiz 20 („nicht
   lesbar") und gilt weiter für die anderen Themen-Heros mit ihren helleren
   Bildern. Spezifität 0,2,1 = gleichauf mit der Regel darüber, gewinnt durch
   die spätere Stelle in der Datei. */
.hero.hero--soft::after {
  background:
    radial-gradient(ellipse 32% 30% at 33% 66%, rgba(1,28,44,.5) 0%, rgba(1,28,44,.34) 45%, rgba(1,28,44,.1) 70%, rgba(1,28,44,0) 88%);
}

/* Textblock nach UNTEN statt vertikal zentriert (nur Desktop).
   Der Hero ist ein Grid mit align-items:center. Seit der Kicker aus dem Bild
   in den ersten Block gewandert ist, ist der Textblock kuerzer — zentriert
   landet er damit genau auf den Booten in der Bildmitte. Unten liegt die
   ruhige Wasserflaeche, fuer die dieses Motiv ueberhaupt gewaehlt wurde:
   Boote frei oben rechts, Text unten links. Genau die Aufteilung, die die
   alte TYPO3-Fassung getragen hat.
   Nur ab 861px: mobil laeuft das quadratische Motiv, dort sitzt der Text
   richtig in der Mitte. */
@media (min-width: 861px) {
  .hero--soft {
    align-items: end;
  }

  .hero--soft .hero__inner {
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  }
}

/* Maesse-Nachtrag 18.08.2026 (Christian: „schneidet die Koepfe ab und ist
   grau"): Seine Werte (ellipse 30% 20% at 40% 65%) sassen auf kanu2.webp
   und dem damaligen Textblock. Mit dem breiten Originalmotiv steht der
   Textblock hoeher und weiter links — gemessen reicht er horizontal von
   16 % bis 61 %, vertikal von 26 % bis 74 % der Herobox. Der Fleck sitzt
   deshalb bei 36 % / 50 %.
   Prinzip unveraendert und ausdruecklich seins: EIN Fleck, gerade so gross
   wie der weisse Text, sonst nichts. Die Lesbarkeit haengt damit vor allem
   am Textschatten — auf dem hellen, unruhigen Wasser trug der weiche
   Standardschatten (0 1px 3px / 0 2px 14px) den duennen Flattersatz nicht.
   Unten deshalb die enge, harte Variante, die .hero__sub schon laenger
   benutzt; den Scrim dafuer aufzudrehen haette genau das Grau zurueckgeholt,
   das weg sollte. */
.hero--soft h1 {
  text-shadow:
    0 0 3px rgba(0, 26, 40, .72),
    0 1px 3px rgba(0, 26, 40, .7),
    0 3px 10px rgba(0, 0, 0, .5);
}

.hero--soft .hero__inner p:not(.hero__sub) {
  font-weight: 500;
  text-shadow:
    0 0 2px rgba(0, 26, 40, .85),
    0 1px 2px rgba(0, 26, 40, .8),
    0 2px 6px rgba(0, 0, 0, .55);
}

/* Mobil liegt der Text breiter und tiefer im Bild. */
@media (max-width: 860px) {
  .hero.hero--soft::after {
    background:
      radial-gradient(ellipse 62% 36% at 46% 52%, rgba(1,28,44,.52) 0%, rgba(1,28,44,.36) 45%, rgba(1,28,44,.12) 72%, rgba(1,28,44,0) 90%);
  }
}

/* Kopfhoehe-Ausschnitt: .hero__bg--wide zieht den Ausschnitt auf 40 % nach
   unten (Notiz 8, Paddler sollten unter den Claim). Beim Kanu-Hero schneidet
   das die Koepfe der hinteren Bootsreihe an, weil das Motiv im oberen Drittel
   sitzt und der Header noch darueber liegt. Hier also von oben ausrichten —
   beschnitten wird nur die leere Wasserflaeche unten. */
.hero__bg--kopfoben {
  background-position: center top;
}

/* max-width 18ch riss kurze Titel unnötig auseinander („Arbeite mit uns /
   draußen", Notiz 21). 24ch hält Titel bis ~23 Zeichen einzeilig; längere
   brechen weiterhin zweizeilig, dank text-wrap:balance mit gleichmäßigen
   Zeilen statt Hänger. */
.hero h1 {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 4px 28px rgba(0, 0, 0, .4);
  max-width: 24ch;
  text-wrap: balance;
}

.hero p {
  max-width: 56ch;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 14px rgba(0, 0, 0, .45);
}

/* Hero-Subzeile (Themenseiten).
   Selektor `.hero .hero__sub` (0,2,0): muss `.hero p` (0,1,1) schlagen,
   sonst erbt die Subzeile deren kleine font-size (16px-Bug, QA 2026-07-02). */
.hero .hero__sub {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  color: var(--wolke-yellow);
  text-shadow: 0 0 2px rgba(0, 26, 40, .85), 0 1px 2px rgba(0, 26, 40, .8), 0 2px 5px rgba(0, 0, 0, .6), 0 4px 22px rgba(0, 0, 0, .5);
  margin: 0 0 1rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

/* ----- Minimal-Hero: nur Markenname + Claim (luftig, zentriert) ----- */
.hero--minimal {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .hero__brand {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  color: #fff;
  font-size: clamp(3.4rem, 9vw, 6.4rem);
  line-height: .95;
  letter-spacing: .5px;
  max-width: none;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 6px 34px rgba(0, 0, 0, .4);
}

.hero .hero__brand .hero__ev {
  color: #fff;
  font-size: 1em;
  white-space: nowrap;
}

.hero .hero__claim {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: #fff;
  font-size: clamp(1.25rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.3;
  max-width: none;
  margin: 1rem 0 0;
  /* Der Claim liegt auf der hellen Wasserfläche, genau dort, wo der engere
     Scrim (Notiz 33) ausläuft. Ein einzelner weicher 8-px-Schatten verlief
     sich darüber. Mehrere enge, dunkle Lagen dicht am Buchstaben geben den
     Kontrast lokal — so bleibt das Bild farbig UND die Schrift lesbar. */
  text-shadow:
    0 0 3px rgba(0, 26, 40, .9),
    0 1px 3px rgba(0, 26, 40, .9),
    0 2px 9px rgba(0, 20, 34, .8),
    0 6px 26px rgba(0, 0, 0, .5);
}

.hero--minimal .hero__cta {
  justify-content: center;
  margin-top: 3rem;
}

/* Hero-CTAs standen hier bis 18.08.2026 auf --leaf-sm mit der Begründung
   „volle --leaf war zu rund". Christian hat das zu Notiz 44 ausdrücklich
   umgedreht: alle Buttons tragen den vollen Leaf. Die Regel ist deshalb
   entfallen — .btn setzt den vollen Leaf jetzt selbst.
   Wenn es im Hero doch zu rund wirkt, gehört sie hierhin zurück. */

@media (max-width: 760px) {
  .hero__bg {
    background-attachment: scroll;
  }

  /* Mobile-Parallax-Fix */
  .hero__bg--wide {
    display: none;
  }

  .hero__bg--mobile {
    display: block;
  }

  /* Hero etwas kompakter, damit das Motiv nicht hinter den CTAs verschwindet */
  .hero {
    min-height: clamp(420px, 70vh, 560px);
  }

  /* Mobile: Hero-Inhalt unter dem großen Header-Logo starten — das Logo
     (92px, transparent über dem Hero) ragt bis ~84px in den Hero hinein und
     überdeckte sonst Subzeile/Titel (QA 2026-07-02). */
  .hero__inner {
    padding-top: 104px;
  }

  /* Minimal-Hero-CTAs: kleiner, nebeneinander UND fix 15px über dem Hero-Rand.
     align-self:stretch (nur dieses Grid-Item) macht hero__inner voll-höhe als
     Positionierungskontext; padding-bottom hält den zentrierten Text frei. */
  .hero--minimal {
    align-self: stretch;
    justify-content: flex-start;
    padding-top: 104px; /* war 3.2rem — Markenzug stand hinter dem Header-Logo (QA 2026-07-02) */
    padding-bottom: 80px;
  }

  .hero--minimal .hero__cta {
    position: absolute;
    left: 0;
    right: 0;
    /* Notiz 32 (15.08.2026): bei 20px saßen die Buttons auf der weißen
       Wellenkante (.hero::before, mobil ~34px hoch) auf. */
    bottom: 30px;
    margin: 0;
    flex-wrap: nowrap;
    gap: .6rem;
    width: 100%;
  }

  .hero--minimal .hero__cta .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: .62rem .6rem;
    font-size: .86rem;
    text-align: center;
    line-height: 1.2;
  }
}

/* ============================================================
   KATALOG-GRID  (Torseiten)
   ============================================================ */
.catalog {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--leaf);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .09);
  border: 1px solid rgba(0, 0, 0, .05);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .15);
}

.cat-card__media {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #e8f1f5;
}

.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.cat-card:hover .cat-card__media img {
  transform: scale(1.07);
}

.cat-card__body {
  padding: 1.2rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cat-card__body h3 {
  margin: 0 0 .5rem;
}

.cat-card__meta {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: .92rem;
  color: var(--wolke-text-soft);
}

.cat-card__meta li {
  display: flex;
  gap: .5rem;
  padding: .12rem 0;
}

.cat-card__meta b {
  color: var(--wolke-blue);
  font-weight: 700;
  flex: 0 0 2.6rem;
}

.cat-card__price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.cat-card__price b {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--wolke-blue);
  line-height: 1;
}

.cat-card__price span {
  font-size: .82rem;
  font-weight: 600;
  color: var(--wolke-text-soft);
}

.cat-card__link {
  margin-top: auto;
  font-weight: 700;
  color: var(--wolke-blue);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
}

.cat-card__link::after {
  content: "→";
  transition: transform .2s ease;
}

.cat-card:hover .cat-card__link::after {
  transform: translateX(4px);
}

/* Stretched-Link: ganze Karte klickbar */
.cat-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ============================================================
   FLOATING-CARD  (Glass-Onepager-Abschnitt)
   ============================================================ */
.floating-card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--leaf);
  padding: clamp(1.6rem, 5vw, 3rem);
}

.prose p {
  margin: 0 0 1rem;
}

/* Vertrauenszeile unter dem Anfrage-Button */
/* Sichtbarer Fehler, wenn das Absenden fehlschlug. Erscheint ANSTELLE des
   „Danke" — vorher meldete das Formular auch bei HTTP 500 Erfolg, die
   Lehrkraft wartete vergeblich und wir erfuhren nie davon. */
.form-error {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border-radius: .7rem;
  border: 1px solid rgba(180, 35, 31, .35);
  background: rgba(180, 35, 31, .07);
  color: #8d1c19;
  font-size: .95rem;
  line-height: 1.5;
}

.form-error a {
  color: #8d1c19;
  font-weight: 700;
}

.form-reassure {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .9rem;
  color: var(--wolke-text-soft);
}

.form-reassure a {
  font-weight: 700;
  color: var(--wolke-blue);
  text-decoration: none;
  white-space: nowrap;
}

.form-reassure a:hover {
  text-decoration: underline;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   TRUST-ROW  (Social Proof: Zahlen & Sicherheit unter dem Hero)
   ============================================================ */
.trust-section {
  padding-block: clamp(1.6rem, 3.5vw, 2.6rem);
}

.trust-row {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  text-align: center;
  align-items: start;
}

.trust-stat b {
  display: block;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 3.6rem);
  color: var(--wolke-blue);
  line-height: 1;
}

.trust-stat span {
  display: block;
  margin-top: .15rem;
  font-size: .92rem;
  color: var(--wolke-text-soft);
}

.trust-stat--safe b {
  color: var(--wolke-green);
  letter-spacing: .5px;
}

/* ============================================================
   MISSION-BAR  (Philosophie-Band: Wolke-Logo + 2 Statements)
   ============================================================ */
/* Full-Bleed-Band: Farbe läuft über die volle Breite (Weite/Freiheit),
   Inhalt bleibt im container-wide. */
.mission {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #0a82b4 0%, var(--wolke-blue) 50%, var(--wolke-blue-dark) 100%);
  color: #fff;
}

.mission__card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.4rem, 4vw, 3.2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .mission__card {
    grid-template-columns: .8fr 1.7fr;
    align-items: center;
  }
}

.mission__brand {
  text-align: center;
}

.mission__brand img {
  /* Notiz 35 (15.08.2026): Logo im Mission-Block war zu zurückhaltend */
  width: clamp(165px, 23vw, 250px);
  height: auto;
  margin: 0 auto .5rem;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .28));
}

.mission__cols {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.6rem);
}

@media (min-width: 620px) {
  .mission__cols {
    grid-template-columns: 1fr 1fr;
  }
}

.mission__cols p {
  margin: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .95);
  /* Notiz 10 (29.06.2026, „Blocksatz?"): zwei schmale Spalten franst rechts
     stark aus. Blocksatz nur MIT Silbentrennung — sonst reißt er im Deutschen
     Löcher zwischen die Wörter. Auf schmalen Displays bleibt es linksbündig,
     dort ist die Zeile für Blocksatz zu kurz. */
  hyphens: auto;
}

@media (min-width: 620px) {
  .mission__cols p {
    text-align: justify;
    text-wrap: pretty;
  }
}

/* weiche Lichtakzente quer übers Band (Weite) */
.mission::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 620px;
  height: 620px;
  right: -220px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%);
}

.mission::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 520px;
  height: 520px;
  left: -240px;
  bottom: -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, .10), transparent 70%);
}

/* ============================================================
   ICON-ROW  (5-4-3-2 Countdown-Features)
   ============================================================ */
.icon-row {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.icon-cell {
  text-align: center;
  padding: .5rem;
}

/* Freigestellte, gezeichnete Icons — KEIN Panel/Käfig. Über einheitliche
   Höhe angeglichen (gleiche optische Größe trotz versch. Seitenverhältnis),
   weiche Schlagschatten-Kontur hugt die Zeichnung statt einer Box. */
.icon-cell img {
  height: clamp(112px, 17vw, 150px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 10px 16px rgba(0, 60, 90, .16));
  transition: transform .35s cubic-bezier(.34, 1.4, .5, 1);
}

/* Sanftes Anheben beim Hover — ruhig & hochwertig, kein Kippeln */
.icon-cell:hover img {
  transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
  .icon-cell:hover img {
    transform: none;
  }
}

/* Mega-SUP-Aktivitätsicon ist klein gezeichnet → immer 1,4× (auch beim Hover). */
.icon-cell h3 {
  margin: 0 0 .3rem;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

/* Notiz 36: die drei Sorglos-Überschriften brachen je nach Länge auf ein
   oder zwei Zeilen — nebeneinander sah das ungeplant aus. Jetzt brechen alle
   drei an derselben Stelle, nämlich nach dem Doppelpunkt-Sinnabschnitt.
   Schmal wird der erzwungene Umbruch wieder aufgehoben, dort steht ohnehin
   jede Karte für sich. */
@media (max-width: 700px) {
  br.br-wide {
    display: none;
  }
}

.icon-cell p {
  margin: 0;
  font-size: .95rem;
  color: var(--wolke-text-soft);
}

.icon-cell .num {
  display: inline-block;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--wolke-yellow);
  line-height: 1;
}

/* ============================================================
   TIMELINE  (Wochenplan Mo–Fr)
   ============================================================ */
/* ============================================================
   WOCHENPLAN / TAGESABLAUF  (frueher: Punktliste mit 28-px-Icons)
   Ab 1024 px ein Stundenplan-Raster: eine Spalte je Tag, das Icon
   traegt die Spalte. Darunter ein Zeitstrahl mit grossem Icon links.
   Die Klassennamen bleiben (.timeline/.tl-item/.tl-ico/.tl-eve),
   damit die neun Seiten unveraendert weiterlaufen.
   ============================================================ */
.timeline {
  --tl-linie: color-mix(in srgb, var(--wolke-blue) 22%, transparent);
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.2rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--tl-linie);
  border-radius: var(--leaf-sm);
  box-shadow: 0 6px 18px rgba(1, 28, 44, .06);
}

/* Das Icon: die Visualisierung des Tages, nicht mehr ein Punkt.
   grid-row 1/-1: es steht links neben ALLEN Textzeilen. Ohne das bestimmt
   das Icon die Hoehe der ersten Zeile und der Text rutscht darunter weg. */
.tl-ico {
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--wolke-blue) 12%, #fff),
    color-mix(in srgb, var(--wolke-green) 14%, #fff));
}

.tl-ico img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.tl-item h3 {
  grid-column: 2;
  margin: 0 0 .25rem;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.15;
}

.tl-item p {
  grid-column: 2;
  margin: 0;
}

/* Abendzeile: abgesetzt, damit sie als eigene Information liest. */
.tl-eve {
  grid-column: 2;
  margin-top: .5rem !important;
  padding-top: .5rem;
  border-top: 1px dashed var(--tl-linie);
  font-size: .92em;
  opacity: .85;
}

/* Stundenplan: je Tag eine Spalte, Icon und Kopf zentriert darueber. */
@media (min-width: 1024px) {
  .timeline {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .9rem;
  }

  .tl-item {
    /* Icon · Kopf · Text (dehnbar) · Abendzeile — so sitzen die Abendzeilen
       aller fuenf Tage auf einer Linie, auch bei ungleich langen Texten. */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    justify-items: center;
    text-align: center;
    padding: 1.4rem 1rem 1.2rem;
  }

  .tl-ico {
    grid-row: auto;
    width: 92px;
    height: 92px;
  }

  .tl-ico img {
    width: 66px;
    height: 66px;
  }

  .tl-item h3,
  .tl-item p,
  .tl-eve {
    grid-column: 1;
  }

  .tl-eve {
    width: 100%;
  }
}

/* Sehr schmal: Icon etwas kleiner, sonst bleibt fuer den Text nichts. */
@media (max-width: 420px) {
  .tl-item { padding: 1rem; gap: .8rem .9rem; }
  .tl-ico { width: 60px; height: 60px; }
  .tl-ico img { width: 42px; height: 42px; }
}


.tl-item .tl-eve {
  color: var(--wolke-green);
  font-weight: 600;
  font-style: italic;
}

/* ============================================================
   MINI-GALLERY  (Netflix-Scroller, Scroll-Snap)
   ============================================================ */
.mini-gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .5rem .2rem 1.2rem;
  margin: 0 -.2rem;
  scrollbar-width: none;
}

.mini-gallery::-webkit-scrollbar {
  display: none;
}

.mini-gallery img {
  flex: 0 0 auto;
  width: clamp(220px, 60vw, 340px);
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--leaf-sm);
  scroll-snap-align: start;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

/* Ab Desktop keine Schiene mehr: sechs Karten passen in zwei Reihen.
   Auf der Schiene lagen 2,5 Karten hinter einem Scroll ohne Scrollbar und
   ohne Pfeile - mit der Maus gab es dafuer keine Geste. Mobil bleibt die
   Schiene richtig, dort ist die angeschnittene Karte die Affordanz. */
@media (min-width: 1100px) {
  .mini-gallery {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* Lagerfeuer-Easter-Egg als Eckdaten-Icon: exakt die Groesse der uebrigen
   .icon-cell-Icons, damit die Reihe ruhig bleibt. */
.mf-icon {
  width: clamp(112px, 17vw, 150px);
  margin: 0 auto 1rem;
}

/* Unterzeile unter einer Strike-Ueberschrift ("Ein Vorschlag, kein
   Stundenplan ..."). Stand vorher neunmal wortgleich als Inline-Style. */
.strike-sub {
  max-width: 56ch;
  margin: 1.4rem auto 0;
  opacity: .85;
}

/* ============================================================
   TEASER-SCROLLER  ("Beliebte Angebote", Netflix-Stil, kuratiert)
   ============================================================ */
.teaser-row {
  display: flex;
  gap: clamp(.8rem, 2vw, 1.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .5rem .2rem 1.4rem;
  margin: 0 -.2rem;
  scrollbar-width: none;
}

.teaser-row::-webkit-scrollbar {
  display: none;
}

.teaser-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 68vw, 300px);
  aspect-ratio: 3/4;
  border-radius: var(--leaf);
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  background: #14506b;
}

.teaser-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.teaser-card:hover img {
  transform: scale(1.06);
}

.teaser-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 30, 45, 0) 35%, rgba(0, 30, 45, .82) 100%);
}

.teaser-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.1rem 1.2rem 1.3rem;
}

.teaser-card__tag {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--wolke-yellow);
  margin-bottom: .15rem;
}

.teaser-card__title {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.teaser-card__more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  margin-top: .3rem;
}

.teaser-card__more::after {
  content: "→";
  transition: transform .2s ease;
}

.teaser-card:hover .teaser-card__more::after {
  transform: translateX(4px);
}

/* ============================================================
   SPICKZETTEL  (blauer Info-Kasten, gelber Rand)
   ============================================================ */
.spickzettel {
  background: var(--wolke-blue);
  color: #fff;
  border-radius: var(--leaf);
  border: 3px solid var(--wolke-yellow);
  padding: clamp(1.4rem, 4vw, 2.2rem);
}

.spickzettel h2,
.spickzettel h3 {
  color: #fff;
}

.spickzettel a {
  color: var(--wolke-yellow);
}

/* ============================================================
   SÄULE  (25/75 Split-Layout)
   ============================================================ */
.saeule {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

@media (min-width: 760px) {
  .saeule {
    /* Bildanteil groesser als das fruehere 1 : 2.6 — bei viel Fliesstext
       (Basecamp) war das Foto sonst nur noch eine Briefmarke. */
    grid-template-columns: 1fr 1.75fr;
  }
}

.saeule img {
  border-radius: var(--leaf);
  width: 100%;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

/* ============================================================
   STEPS  (3-Schritte-Sorglos-Plan)
   ============================================================ */
.steps {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}

.step {
  position: relative;
  background: #fff;
  border-radius: var(--leaf);
  padding: 2.4rem 1.5rem 1.6rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
  border: 1px solid rgba(0, 0, 0, .05);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -22px;
  left: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wolke-green);
  color: #fff;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 1.8rem;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(32, 145, 47, .35);
}

/* Icon-Variante: ersetzt den Zahlen-Kreis (nur wo ein .step-ico gesetzt ist) */
.step-ico {
  position: absolute;
  top: -32px;
  right: 2.3rem;
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18));
}

.step:has(.step-ico) {
  padding-top: 4.4rem;
}

.step:has(.step-ico)::before {
  display: none;
}

.step h3 {
  margin: 0 0 .5rem;
}

.step p,
.step ul {
  margin: 0 0 .6rem;
}

.step ul {
  padding-left: 1.1rem;
  color: var(--wolke-text-soft);
}

/* ============================================================
   FORM  (Kontakt / Anfrage, kompakt) — Honeypot ausgeblendet
   ============================================================ */
.b-form {
  display: grid;
  gap: 1rem;
}

.b-form .row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .b-form .row.two {
    grid-template-columns: 1fr 1fr;
  }
}

.b-form label {
  font-weight: 600;
  font-size: .92rem;
  display: block;
  margin-bottom: .3rem;
  color: var(--wolke-text);
}

.b-form input,
.b-form textarea,
.b-form select {
  width: 100%;
  font: inherit;
  padding: .75rem .9rem;
  border: 1.5px solid rgba(0, 112, 158, .25);
  border-radius: var(--leaf-sm);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.b-form input:focus,
.b-form textarea:focus,
.b-form select:focus {
  outline: none;
  border-color: var(--wolke-blue);
  box-shadow: 0 0 0 3px rgba(0, 112, 158, .15);
}

.b-form textarea {
  min-height: 120px;
  resize: vertical;
}

.b-form .consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--wolke-text-soft);
}

.b-form .consent input {
  flex: 0 0 auto;
  width: auto;
  margin-top: .2rem;
}

.b-form .consent span {
  flex: 1 1 auto;
}

.b-form .consent a {
  white-space: nowrap;
}

/* Honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   HERO-FOOTER  (.wf) — emotionales Foto + Mehrwert-Strip
   Foto: lege /img/footer-hero.jpg ab → erscheint automatisch.
   Ohne Foto greift der Farbverlauf als Fallback.
   ============================================================ */
.wf {
  position: relative;
  margin-top: 0rem;
  isolation: isolate;
  /* Kein eigener Hintergrund: der Footer ist allein das freigestellte Foto (::before).
     Über der Wald-Welle bleibt es transparent — sonst würde eine Footer-Farbe durch
     die Transparenz „durchrutschen". */
  color: rgba(255, 255, 255, .92);
  overflow: visible;
  /* die freigestellte Wald-Welle ragt oben über */
}

/* Foto-Welle: oben freigestellter Wald (1.8° schon im Bild begradigt) auf transparentem
   Grund. Ragt über den Footer-Rand und liegt als organische Kontur über dem Content darüber. */
.wf::before {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  top: clamp(-4rem, -4vw, -2rem);
  left: 0;
  right: 0;
  bottom: 0;
  /* Foto-Welle + dunkelblauer Fallback: füllt die freigestellte Transparenz
     (Himmel über dem Wald) mit der Footer-Hintergrundfarbe, statt durchscheinen
     zu lassen — greift auch, wenn das WebP nicht lädt. */
  background: url('/img/footer-hero-wave.webp') center top / cover no-repeat;
  /* „Atmen": sanfter Zoom; transform-origin top hält die Wald-Welle oben stabil,
     nur das Wasser lebt. */
  transform-origin: center top;
  animation: wf-breathe 16s ease-in-out infinite alternate;
}
@keyframes wf-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

.wf .container-wide {
  position: relative;
  z-index: 1;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  /* Box reicht Klicks im Leerraum durch zum Kanu darunter — die echten
     Inhalte (unten) fangen wieder ab, sodass das Kanu HINTER Schrift/CTA
     fährt, im offenen Wasser rechts daneben aber greifbar bleibt. */
  pointer-events: none;
}

.wf-hero,
.wf-strip,
.wf-bottom {
  pointer-events: auto;
}

/* ---- spielbares Kanu ---- */
.wf-canoe-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.wf-canoe {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  transform-origin: center center;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.wf-canoe.is-dragging {
  cursor: grabbing;
}

.wf-canoe-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 7px 6px rgba(0, 40, 60, .35));
  animation: wf-bob 4.6s ease-in-out infinite;
}

.wf-canoe.is-dragging .wf-canoe-img {
  animation-play-state: paused;
}

@keyframes wf-bob {

  0%,
  100% {
    transform: translateY(0) rotate(-1.3deg);
  }

  50% {
    transform: translateY(-5px) rotate(1.3deg);
  }
}

/* ---- Hero-Einladung ---- */
.wf-hero {
  max-width: 40rem;
}

/* Lesbarkeit über text-shadow direkt an den Buchstaben (kein Container-Schleier) */
.wf-eyebrow {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--wolke-yellow);
  margin: 0 0 .2rem;
  letter-spacing: .5px;
  text-shadow: 0 1px 3px rgba(0, 28, 42, .55), 0 1px 10px rgba(0, 28, 42, .4);
}

.wf-hero h2 {
  color: #fff;
  margin: 0 0 .7rem;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  text-shadow: 0 1px 3px rgba(0, 28, 42, .6), 0 2px 18px rgba(0, 28, 42, .5);
}

.wf-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 44ch;
  color: rgba(255, 255, 255, .95);
  margin: 0 0 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 28, 42, .6), 0 1px 12px rgba(0, 28, 42, .45);
}

.wf-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.wf-cta {
  font-size: 1.05rem;
  padding: .9rem 1.9rem;
}

.wf-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  padding: .8rem 1.3rem;
  border: 1.5px solid rgba(255, 255, 255, .5);
  /* Leaf statt Pille — der Telefon-CTA stand als einziges Element im Footer
     noch rund (Notiz 31). Seit Notiz 44 der volle Leaf, damit er neben dem
     grünen „Erlebnis anfragen" (.btn.leaf) nicht kleiner geschnitten wirkt. */
  border-radius: var(--leaf);
  background: rgba(255, 255, 255, .08);
  transition: background .25s ease, border-color .25s ease;
}

.wf-cta-ghost:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .8);
}

.wf-phone-ico {
  color: var(--wolke-yellow);
}

/* ---- Mehrwert-Strip ---- */
.wf-strip {
  display: grid;
  gap: 1rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.wf-tile {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.3rem 1.4rem;
  text-decoration: none;
  color: var(--wolke-text);
  border-radius: var(--leaf-sm);
  transition: transform .22s ease, box-shadow .22s ease;
  z-index: 1;
}

.wf-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.wf-tile-ico {
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 112, 158, .1);
  margin-bottom: .5rem;
}

.wf-tile-ico img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.wf-tile-title {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--wolke-blue);
}

.wf-tile-sub {
  font-size: .9rem;
  line-height: 1.45;
  color: var(--wolke-text-soft);
}

/* Live-Verfügbarkeit hervorheben */
.wf-tile--live {
  box-shadow: 0 0 0 2px var(--wolke-green) inset, 0 14px 32px rgba(0, 0, 0, .18);
}

.wf-tile--live .wf-tile-title {
  color: var(--wolke-green);
}

.wf-live {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--wolke-green);
  margin-bottom: .3rem;
}

.wf-live-dot {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--wolke-green);
  box-shadow: 0 0 0 0 rgba(32, 145, 47, .6);
  animation: wf-pulse 1.8s ease-out infinite;
}

@keyframes wf-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(32, 145, 47, .55);
  }

  70% {
    box-shadow: 0 0 0 .6rem rgba(32, 145, 47, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(32, 145, 47, 0);
  }
}

/* ---- Fußzeilen-Dialoge (Belegungskalender, Material) ---- */
.wf-dialog {
  border: 0;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: var(--leaf-sm);
  max-width: 46rem;
  width: min(94vw, 46rem);
  max-height: 86vh;
  color: var(--wolke-text);
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.wf-dialog::backdrop {
  background: rgba(6, 34, 46, .62);
  backdrop-filter: blur(3px);
}

.wf-dialog h2 {
  font-family: 'Amatic SC', cursive;
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1;
  color: var(--wolke-blue);
  margin: 0 0 .6rem;
}

.wf-dialog-lead {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--wolke-text-soft);
  margin: 0 0 1.4rem;
  max-width: 52ch;
}

.wf-dialog-close {
  float: right;
  margin: -.6rem -.4rem 0 1rem;
}

.wf-dialog-close button {
  border: 0;
  background: rgba(0, 112, 158, .1);
  color: var(--wolke-blue);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.wf-dialog-close button:hover {
  background: rgba(0, 112, 158, .2);
}

/* Farbwörter in der Legende tragen den Punkt gleich mit */
.wf-leg {
  white-space: nowrap;
  font-weight: 700;
  color: var(--wolke-text);
}

.wf-leg::before {
  content: "";
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  margin-right: .25rem;
}

.wf-leg.is-frei::before {
  background: var(--wolke-green);
}

.wf-leg.is-gruppe::before {
  background: var(--wolke-yellow);
}

.wf-leg.is-voll::before {
  background: #b9b9b9;
}

.wf-dialog-note {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--wolke-text-soft);
  border-left: 3px solid var(--wolke-yellow);
  padding-left: .9rem;
  margin: 1.4rem 0;
}

.wf-dialog-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  align-items: center;
  margin: 0;
}

.wf-dialog-ghost {
  font-weight: 700;
  color: var(--wolke-blue);
}

.wf-mat-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .9rem;
}

.wf-mat-liste li {
  font-size: .95rem;
  line-height: 1.55;
  padding-left: 1.7rem;
  position: relative;
}

.wf-mat-liste li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wolke-green);
  font-weight: 800;
}

.wf-mat-liste b {
  color: var(--wolke-blue);
}

/* ---- Belegungsraster ---- */
.wf-kal {
  max-height: 52vh;
  overflow-y: auto;
  margin-bottom: .4rem;
}

/* Der Hinweis unter dem Raster soll den Kalender nicht kleinquetschen */
.wf-dialog .wf-kal + .wf-dialog-note {
  margin: .9rem 0 .6rem;
  font-size: .86rem;
}

.wf-kal-saison + .wf-kal-saison {
  margin-top: 1.6rem;
}

.wf-kal-saison h3 {
  font-family: 'Amatic SC', cursive;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--wolke-blue);
  margin: 0 0 .7rem;
}

.wf-kal-grid {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(9.8rem, 1fr));
}

.wf-kal-woche {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-align: left;
  font: inherit;
  padding: .55rem .7rem;
  border-radius: .7rem;
  border: 1px solid rgba(0, 112, 158, .25);
  background: rgba(0, 112, 158, .05);
  color: var(--wolke-text);
}

.wf-kal-woche b {
  font-size: .82rem;
  color: var(--wolke-blue);
}

.wf-kal-woche span {
  font-size: .84rem;
  line-height: 1.25;
}

/* ---- Ampel je Woche: See · Wald · Kanu · Zelt ---- */
.wf-ampeln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .18rem .3rem;
  margin-top: .4rem;
}

.wf-amp {
  display: flex;
  align-items: center;
  gap: .28rem;
  font-size: .7rem;
  line-height: 1.2;
  color: var(--wolke-text-soft);
  white-space: nowrap;
}

.wf-amp i {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #c9c9c9;
}

.wf-amp.is-frei i {
  background: var(--wolke-green);
}

.wf-amp.is-gruppe i {
  background: var(--wolke-yellow);
}

.wf-amp.is-option i {
  background: #e08a00;
}

.wf-amp.is-voll i {
  background: #b9b9b9;
}

.wf-amp.is-voll {
  text-decoration: line-through;
  color: #9a9a9a;
}

/* Schmale Displays: sonst steht eine einzige Woche pro Zeile und man scrollt
   sich durch 30 Kacheln. Zwei Spalten passen, wenn Kachel und Ampel etwas
   enger sitzen. */
@media (max-width: 560px) {
  .wf-kal-grid {
    grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr));
    gap: .4rem;
  }

  .wf-kal-woche {
    padding: .5rem .55rem;
  }

  .wf-ampeln {
    gap: .12rem .25rem;
  }

  .wf-amp {
    font-size: .66rem;
    gap: .22rem;
  }

  .wf-amp i {
    width: .48rem;
    height: .48rem;
  }
}

button.wf-kal-woche {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

button.wf-kal-woche:hover {
  transform: translateY(-2px);
  border-color: var(--wolke-green);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

/* nur noch ein Haus frei — anfragbar, aber sichtbar knapp */
.wf-kal-woche.is-knapp {
  border-color: rgba(255, 192, 0, .65);
  background: rgba(255, 192, 0, .12);
}

.wf-kal-woche.is-knapp em {
  color: #a06b00;
  /* Versalien machen den längsten Text der Kachel zur lautesten Zeile */
  text-transform: none;
  letter-spacing: 0;
  font-size: .78rem;
}

button.wf-kal-woche.is-knapp:hover {
  border-color: var(--wolke-yellow);
}

/* nur für Screenreader (Zustand der grauen Wochen) */
.wf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wf-kal-woche.is-belegt {
  border-color: rgba(0, 0, 0, .1);
  background: rgba(0, 0, 0, .05);
  color: var(--wolke-text-soft);
}

.wf-kal-woche.is-belegt b {
  color: var(--wolke-text-soft);
}

.wf-kal-woche.is-belegt em {
  color: #6f6f6f;
  font-size: .74rem;
}

.wf-kal-stand,
.wf-kal-fallback {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--wolke-text-soft);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  button.wf-kal-woche.is-offen:hover {
    transform: none;
  }
}

/* ---- Schlusszeile ---- */
.wf-bottom {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: rgba(255, 255, 255, .78);
}

.wf-bottom a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
}

.wf-bottom a:hover {
  color: #fff;
  text-decoration: underline;
}

.wf-legal {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .wf-tile:hover {
    transform: none;
  }

  .wf::before {
    animation: none;
  }

  .wf-live-dot {
    animation: none;
  }

  .wf-canoe-img {
    animation: none;
  }
}

.stack>*+* {
  margin-top: clamp(1.2rem, 3vw, 2rem);
}

/* ============================================================
   TESTIMONIALS / Stimmen (Social Proof)
   ============================================================ */
.testimonials {
  background: linear-gradient(180deg, #eef8fc 0%, #f3fafd 60%, #ffffff 100%);
}

/* „Wall of Love" — Endlos-Marquee. main.js klont die Karten für den
   nahtlosen Loop (translateX(-50%)). Bei reduced-motion: statisches Grid. */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: .4rem 0;
  animation: tcard-marquee 80s linear infinite;
}

.marquee__track--rev {
  animation-duration: 95s;
  animation-direction: reverse;
  margin-top: .9rem;
}

/* Mobil wirkt die zweite Reihe zu wuchtig → nur eine Reihe zeigen */
@media (max-width: 600px) {
  .marquee__track--rev {
    display: none;
  }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes tcard-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    width: auto;
  }

  .marquee__track--rev {
    margin-top: .8rem;
  }

  .marquee__track .tcard {
    margin: 0;
  }
}

.tcard {
  position: relative;
  margin: 0 .9rem 0 0;
  background: #fff;
  border: 1px solid rgba(0, 112, 158, .10);
  border-radius: 14px;
  padding: 1.3rem 1.2rem 1.1rem;
  box-shadow: 0 5px 20px rgba(0, 90, 126, .08);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: clamp(216px, 70vw, 272px);
}

.tcard::before {
  content: "\201C";
  position: absolute;
  top: .1rem;
  left: .7rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--wolke-yellow);
}

.tcard blockquote {
  margin: 0 0 .85rem;
  position: relative;
  z-index: 1;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--wolke-text);
}

.tcard figcaption {
  margin-top: .2rem;
  display: flex;
  flex-direction: column;
}

.tcard figcaption b {
  color: var(--wolke-blue-dark);
  font-size: .92rem;
}

.tcard figcaption span {
  color: var(--wolke-text-soft);
  font-size: .8rem;
  margin-top: .1rem;
}

.tcard__stars {
  color: #fbbc04;
  letter-spacing: 1.5px;
  font-size: .95rem;
  margin-bottom: .5rem;
}

/* Google-Gesamtbewertung (Badge, verlinkt aufs Profil) */
.g-rating {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 1.4rem auto 0;
  padding: .6rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(0, 112, 158, .14);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 90, 126, .08);
  text-decoration: none;
  width: fit-content;
  transition: box-shadow .15s, transform .15s;
}

.g-rating:hover {
  box-shadow: 0 6px 22px rgba(0, 90, 126, .16);
  transform: translateY(-1px);
}

.testimonials .g-rating {
  display: flex;
}

.g-rating__score {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--wolke-text);
}

.g-rating__stars {
  color: #fbbc04;
  letter-spacing: 1px;
  font-size: 1.05rem;
}

.g-rating__meta {
  color: var(--wolke-blue);
  font-size: .9rem;
  font-weight: 600;
}

.testimonials .eyebrow+h2 {
  margin-bottom: 0;
}

.testimonials {
  text-align: center;
}

.testimonials .tcard {
  text-align: left;
}
/* ============================================================
   ECKDATEN-REIHE  (Referenz-Template Angebotsseite, 18.08.2026)
   Die 4 harten Fakten direkt unter dem Hero. Desktop = 4 Spalten
   wie .icon-row. Mobil würde .icon-row (minmax 200px) auf EINE
   Spalte fallen — vier bildschirmfüllende Icons hintereinander,
   bevor der erste Satz kommt. Deshalb hier 2x2 mit kleineren
   Icons. Bewusst eigene Klasse: .icon-row selbst bleibt für alle
   anderen Seiten unverändert.
   ============================================================ */
.icon-row--eckdaten {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

@media (max-width: 640px) {
  .icon-row--eckdaten {
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem .8rem;
  }

  .icon-row--eckdaten .icon-cell img {
    height: 84px;
    margin-bottom: .7rem;
  }

  .icon-row--eckdaten .icon-cell h3 {
    font-size: 1.15rem;
  }

  .icon-row--eckdaten .icon-cell p {
    font-size: .9rem;
    line-height: 1.45;
  }
}

/* Schmale Spalten mobil: lange Ortsnamen ("Dahmeheideland") sonst als
   Einzelwort-Zeilen. */
@media (max-width: 640px) {
  .icon-row--eckdaten .icon-cell h3,
  .icon-row--eckdaten .icon-cell p {
    hyphens: auto;
    text-wrap: balance;
  }
}


/* Harter Zeilenumbruch nur am Desktop. Christian setzt im Hero-Satz bewusst
   einen Umbruch, damit die Aussage zweizeilig bricht. Auf dem Handy ist die
   Zeile ohnehin schon dreizeilig — der feste Umbruch erzeugt dort nur eine
   Waisenzeile ("eigenen Camp –" allein). Deshalb mobil abgeschaltet, der
   Fliesstext bricht dann von selbst. */
.br-desktop {
  display: none;
}

@media (min-width: 861px) {
  .br-desktop {
    display: inline;
  }
}

/* ============================================================
   STRECKENSCHEMA  (Angebotsseiten, 18.08.2026)
   Eigenes SVG statt eingebettetem Kartendienst — kein
   Drittanbieter-Request, kein Consent-Banner, kein Bild-Download,
   scharf auf jedem Display. Es ist ein Schema, keine Landkarte.
   Mobil scrollt es waagerecht: bei 375px waeren die Ortsnamen
   sonst rund 7px hoch und unlesbar.
   ============================================================ */
.strecke {
  margin-top: 2.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.strecke::-webkit-scrollbar {
  display: none;
}

.strecke__karte {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  margin-inline: auto;
  max-width: 900px;
}

.strecke__stop text {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  fill: var(--wolke-text);
}

.strecke__stop .strecke__sub {
  font-size: 14px;
  font-weight: 400;
  fill: var(--wolke-text-soft);
}

.strecke__hinweis {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 15px;
  fill: var(--wolke-blue);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ============================================================
   ZWEI TEXTSPALTEN  (Lotsen-Notiz 48, 18.08.2026)
   Christian wollte die beiden Absaetze im Hauptblock der
   Angebotsseite nebeneinander statt untereinander.
   Bewusst Grid und NICHT `columns: 2`: der Mehrspaltensatz
   bricht den Text frei um und wechselt mitten im Absatz die
   Spalte — hier soll aber je Absatz genau eine Spalte stehen.
   Geltung "desktop": erst ab 861px zweispaltig, mobil bleibt
   es untereinander (zwei Spalten waeren dort ~20 Zeichen breit).
   Die Breite wandert dabei von 70ch auf 104ch, sonst haette jede
   Spalte nur noch die halbe Lesebreite.
   ============================================================ */
.prose--zwei {
  max-width: 70ch;
  margin: 2rem auto 0;
}

@media (min-width: 861px) {
  .prose--zwei {
    max-width: 104ch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }

  .prose--zwei > p {
    margin-bottom: 0;
  }
}

/* ============================================================
   ABENTEUERKARTE  (Variante B, Entwurf 18.08.2026)
   Illustrierte Streckenkarte im Stil des Icon-Sets. Beschriftung
   in Amatic SC, damit sie zur Handschrift der Seite passt.
   Wie beim Streckenschema: mobil scrollt die Grafik in ihrer
   eigenen Box, sonst waeren die Ortsnamen unlesbar klein.
   ============================================================ */
.abenteuerkarte {
  display: block;
  width: 100%;
  min-width: 660px;
  max-width: 1000px;
  height: auto;
  margin-inline: auto;
}

.ak-ort {
  font-family: 'Amatic SC', cursive;
  font-size: 31px;
  font-weight: 700;
  fill: #5e3618;
  letter-spacing: .02em;
}

.ak-ort.ak-ziel {
  font-size: 38px;
  fill: #b8402c;
}

.ak-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  fill: #7a5a34;
}

.ak-kompass {
  font-family: 'Amatic SC', cursive;
  font-size: 26px;
  font-weight: 700;
  fill: #9a5b2c;
}

.ak-legende {
  font-family: 'Amatic SC', cursive;
  font-size: 26px;
  font-weight: 700;
  fill: #7a5a34;
}

/* ============================================================
   ILLUSTRIERTE KARTE MIT TEXT-OVERLAY (Variante B2, 18.08.2026)
   Das Kartenbild kommt aus der Bildgenerierung und enthaelt
   BEWUSST keinen Text: Bild-KIs setzen Ortsnamen fehlerhaft, und
   gerenderter Text waere weder scharf noch vorlesbar noch
   aenderbar. Die Beschriftung liegt deshalb als HTML darueber,
   in Prozent positioniert, damit sie mitskaliert.
   ============================================================ */
.illukarte {
  position: relative;
  max-width: 1000px;
  margin: 2.4rem auto 0;
}

.illukarte__bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--leaf-sm);
}

.illukarte__stop {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  line-height: 1.1;
}

.illukarte__name {
  display: block;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.6rem);
  color: #4a2d16;
  text-shadow:
    0 0 4px rgba(247, 234, 209, .95),
    0 0 9px rgba(247, 234, 209, .85),
    0 1px 2px rgba(247, 234, 209, 1);
  white-space: nowrap;
}

.illukarte__sub {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(.62rem, 1.1vw, .8rem);
  color: #6d4c2a;
  text-shadow: 0 0 5px rgba(247, 234, 209, .95), 0 0 9px rgba(247, 234, 209, .9);
  white-space: nowrap;
}

.illukarte__name--ziel {
  color: #a8371f;
  font-size: clamp(1.15rem, 2.5vw, 1.9rem);
}

/* Unter 640px werden die Namen im Bild zu klein und zu eng. Dort liegt
   die Karte ohne Beschriftung da und die Stationen stehen als Liste
   darunter — lesbar statt dekorativ. */
@media (max-width: 640px) {
  .illukarte__stop {
    display: none;
  }
}

.illukarte__liste {
  display: none;
  margin: 1.2rem auto 0;
  padding: 0;
  list-style: none;
  max-width: 34ch;
}

.illukarte__liste li {
  padding: .38rem 0 .38rem 1.6rem;
  border-left: 3px dotted #9a5b2c;
  margin-left: .5rem;
  font-size: .95rem;
}

.illukarte__liste li b {
  font-family: 'Amatic SC', cursive;
  font-size: 1.35rem;
  font-weight: 700;
  color: #5e3618;
  display: block;
}

@media (max-width: 640px) {
  .illukarte__liste {
    display: block;
  }
}

/* ============================================================
   ETAPPENKARTE  (Christians Idee vom 18.08.2026)
   Illustrierte Karte + anklickbare Rastplaetze: ein Klick auf
   ein Zelt zeigt die Etappe darunter mit Foto und Text.
   Ohne JavaScript stehen alle Etappen untereinander — das CSS
   zum Einklappen haengt an .is-interaktiv, die js/etappen.js
   selbst setzt.
   ============================================================ */
.etappen {
  margin-top: 2.4rem;
}

.etappen__karte {
  /* Kein 1000px-Deckel mehr (Christian: "die Karte breiter") — sie nimmt die
     volle Breite von .container-wide, also bis 1180px. Die Panelschiene
     darunter bekommt exakt dieselbe Breite, damit nichts übersteht. */
  position: relative;
  margin-inline: auto;
}

.etappen__bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--leaf-sm);
}

.etappen__pin {
  /* Christian: "zu gross zu fett zu digital". Vorher ein 44px-Kreis in
     Signalgruen mit weissem Rand und Schlagschatten — das sah aus wie ein
     Karten-Pin aus einer App, der auf die Zeichnung geklebt wurde.
     Jetzt in den Farben der Karte: Papierton, braune Federkontur, Zahl in
     Amatic. Sichtbar sind 30px, die Klickflaeche bleibt ueber ::before bei
     44px — sonst waere er am Handy nicht mehr zu treffen. */
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid #8a5a2b;
  border-radius: 50%;
  background: #f3e6cc;
  color: #6b4423;
  font-family: 'Amatic SC', cursive;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(90, 60, 30, .28);
  transition: transform .25s cubic-bezier(.34, 1.4, .5, 1), background .2s;
}

.etappen__pin::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}

.etappen__pin span {
  display: block;
  transform: translateY(1px);
}

.etappen__pin:hover,
.etappen__pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.18);
  background: #fff6e6;
}

.etappen__pin.is-aktiv {
  background: #b8402c;
  border-color: #8f2f1f;
  color: #fdf3e0;
  transform: translate(-50%, -50%) scale(1.14);
}

/* Etappen: ohne JS eine schlichte Liste untereinander. */
.etappen__liste {
  /* Netflix-Schiene wie .mini-gallery und .teaser-row: die Etappen liegen
     nebeneinander und werden GESCROLLT, nicht umgeschaltet (Christians
     Wunsch) — navigierbar ueber die Karte oder ueber die Panels, der Marker
     faerbt sich mit.
     Gegenueber dem alten display:none-Umschalter drei Vorteile: ohne
     JavaScript ist alles da und bedienbar; es gibt keinen Zustand mehr, der
     haengen bleiben kann (genau das war der Mobil-Fehler vom selben Tag);
     und am Handy verhaelt es sich wie die uebrigen Bildschienen der Seite. */
  list-style: none;
  display: flex;
  gap: clamp(.9rem, 2vw, 1.4rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* GAR KEIN Snap (Christian: "das Scrolling smoother, besonders das
     bremsen"). Snap greift genau beim Ausrollen ein und reisst die Schiene
     auf die nächste Rastposition — das ist das Rucken am Ende jedes Wischers.
     Echte Netflix-Schienen rasten auch nicht ein. Die Marker führen ohnehin
     nach, eine Rastposition braucht es dafür nicht.
     (Zwischenschritt war `proximity`, weil `mandatory` zusätzlich das
     programmatische Scrollen abbrach — ohne Snap ist beides erledigt.) */
  scroll-snap-type: none;
  /* KEIN scroll-behavior: smooth hier. Es animiert auch das direkte Setzen von
     scrollLeft — und damit das Sicherheitsnetz in js/etappen.js, das nach
     260ms nachfasst, wenn scrollTo nichts bewegt hat. Beides zusammen hob
     sich auf, der Klick auf einen Marker scrollte gar nicht mehr. Das weiche
     Anfahren macht das Skript selbst über scrollTo({behavior:'smooth'}). */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 2.2rem auto 0;
  padding: .5rem .2rem 1.4rem;
}

.etappen__liste::-webkit-scrollbar {
  display: none;
}

.etappe {
  flex: 0 0 auto;
  /* Breiter als vorher (560px) und das Bild bekommt mehr Anteil — Christian:
     "wir wollen insgesamt mehr vom Bild haben". Bei 1180px Schiene stehen so
     eineinhalb Panels im Blick: genug Bild, und man sieht, dass es weitergeht. */
  width: min(88vw, 720px);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  background: #fff;
  /* Notiz 62 (19.08.2026): "Soll auch fuer diese Karten gelten" — die Etappen-
     Karten gehen vom vollen Leaf auf den (jetzt wieder 1.2rem grossen) --leaf-sm. */
  border-radius: var(--leaf-sm);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
  transition: box-shadow .3s;
}

/* Die Etappe, auf der die Schiene gerade steht — passend zum aktiven Marker. */
.etappe.is-aktiv {
  box-shadow: 0 14px 34px rgba(0, 60, 90, .22);
}

.etappe img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
  /* Das Bild sitzt in der linken Haelfte der Leaf-Karte: oben links rund,
     unten links spitz — sonst blitzt an den runden Ecken das Weiss durch.
     Radius folgt der Karte (Notiz 62: --leaf-sm). */
  border-radius: var(--leaf-sm) 0 0 var(--leaf-sm);
}

.etappe__text {
  padding: 1.4rem 1.6rem 1.4rem 0;
}

/* Notiz 53 (18.08.2026): "schwarz oder gruen versuchen". Gruen gewaehlt, weil
   Amatic-Zeilen ueber einer Ueberschrift auf der Seite sonst immer gruen sind
   (.eyebrow). Auf schwarz umstellen = var(--wolke-text). */
.etappe__tag {
  font-family: 'Amatic SC', cursive;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--wolke-green);
  margin: 0 0 .2rem;
}

.etappe__text h3 {
  margin: 0 0 .5rem;
}

.etappe__text p:last-child {
  margin-bottom: 0;
}

/* Schmal: die Marker waeren auf einem 340px breiten Bild zu klein zum Treffen
   und verschwinden — gescrollt wird dann ueber die Schiene selbst. Bild oben,
   Text darunter, weil nebeneinander beides zu schmal waere. */
@media (max-width: 700px) {
  /* Marker bleiben sichtbar (Christian: "Kartenlogik greift nicht mobil").
     Vorher waren sie hier ausgeblendet, weil 44px auf einem 340px breiten
     Bild ein Viertel der Karte einnehmen. Jetzt 24px sichtbar bei
     unveraendert grosser Klickflaeche ueber ::before — damit bleibt der
     Fingertreffer moeglich, ohne die Zeichnung zuzukleben. */
  .etappen__pin {
    width: 24px;
    height: 24px;
    font-size: 1rem;
    border-width: 1.2px;
  }

  .etappen__pin::before {
    inset: -11px;
  }

  .etappe {
    width: min(90vw, 460px);
    grid-template-columns: 1fr;
  }

  .etappe img {
    min-height: 180px;
    max-height: 230px;
    /* mobil sitzt das Bild oben, nicht links */
    border-radius: var(--leaf-sm) 0 0 0;
  }

  .etappe__text {
    padding: 0 1.3rem 1.4rem;
  }
}

/* ============================================================
   Zwei Karten nebeneinander (Lotsen-Notiz 49, /klassenfahrt/kanutour/)
   Preis und Storno standen in EINER Karte untereinander; Christian
   wollte beides nebeneinander. Bewusst zwei getrennte Karten statt
   zweier Spalten IN der Karte: die Glasflaeche traegt die Trennung,
   sonst braeuchte es eine Trennlinie mitten im Panel.
   Bis 860px untereinander — zwei Karten waeren am Handy je ~150px breit.
   align-items:stretch laesst beide Karten gleich hoch enden, auch wenn
   die Storno-Spalte laenger ist.
   ============================================================ */
.karten-zwei {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: stretch;
}

@media (min-width: 861px) {
  .karten-zwei {
    grid-template-columns: 1fr 1fr;
  }
}

.karten-zwei > * > :first-child {
  margin-top: 0;
}

.karten-zwei > * > :last-child {
  margin-bottom: 0;
}

/* Variante ohne Panel (Notiz 51, 18.08.2026): Christian wollte die beiden
   Spalten "gern ohne Panele". Ohne die Glaskarte fehlt der Innenabstand als
   Trennung, deshalb steht mobil (untereinander) ein groesserer Zeilenabstand
   und ab 861px eine feine Trennlinie zwischen den Spalten. Die Lesebreite
   wandert wie bei .prose--zwei mit, sonst wird jede Spalte zu breit. */
.karten-zwei--schlicht {
  max-width: 104ch;
  margin-left: auto;
  margin-right: auto;
  gap: clamp(2rem, 5vw, 2.8rem);
}

@media (min-width: 861px) {
  .karten-zwei--schlicht {
    gap: 0 clamp(2.4rem, 5vw, 3.6rem);
  }

  .karten-zwei--schlicht > * + * {
    border-left: 1px solid rgba(0, 0, 0, .09);
    padding-left: clamp(2.4rem, 5vw, 3.6rem);
  }
}

/* Gruene Ueberschrift als Akzent (Notiz 52). Utility, damit die naechste
   Stelle nicht wieder ein Inline-style bekommt. */
.txt-gruen {
  color: var(--wolke-green);
}

/* Blaues Gegenstueck (Notiz 56, 19.08.2026): Christian wollte die Storno-
   Ueberschrift zweifarbig — Frage blau, Antwort gruen. Zwei Spans statt einer
   Klasse auf dem h3, sonst laesst sich die Zeile nicht teilen. */
.txt-blau {
  color: var(--wolke-blue);
}

/* Aufzaehlungen in den zwei Spalten (Notizen 58/59, 19.08.2026): "mit Bullets
   strukturieren". Uebernimmt bewusst die Werte von .step ul, damit Listen auf
   der Seite gleich aussehen; der Zeilenabstand kommt dazu, weil hier ganze
   Saetze in den Punkten stehen und nicht nur Stichworte. */
.karten-zwei ul {
  margin: 0 0 .8rem;
  padding-left: 1.1rem;
  color: var(--wolke-text-soft);
}

.karten-zwei ul li + li {
  margin-top: .5rem;
}

/* Rote Strichelroute über der Etappenkarte.
   Liegt als SVG deckungsgleich über dem Bild (gleiches Seitenverhältnis),
   skaliert also mit. Von Hand entlang des gemalten Wassers gelegt — eine
   mitgenerierte Linie lief in den Versuchen regelmäßig quer über Land. */
.etappen__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.etappen__route-halo {
  /* Der Halo war 13px deckendes Creme — Christian: "das fette Weiss zwischen
     dem schon zu fetten rot muss auch weg". Bleibt nur als duenner, fast
     durchsichtiger Saum, damit die Linie ueber dunklem Wald nicht abreisst;
     auf dem hellen Papier ist er praktisch unsichtbar. */
  fill: none;
  stroke: rgba(255, 250, 240, .3);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.etappen__route-linie {
  /* Feiner und enger gestrichelt: vorher 5,5px mit 3/14-Luecken — das wirkte
     wie eine Perlenkette aus dicken Punkten. Jetzt 3px mit echten Strichen. */
  fill: none;
  stroke: #b8402c;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 7;
  opacity: .9;
}

/* Die Stichfahrt zum D66 wird hin und zurueck gepaddelt — noch feiner, damit
   sie nicht wie eine Weiterfahrt aussieht. */
.etappen__route-stich.etappen__route-halo {
  stroke-width: 4;
}

.etappen__route-stich.etappen__route-linie {
  stroke-width: 2.4;
  stroke-dasharray: 6 6;
  opacity: .8;
}