/* ==========================================================================
   ATP.Hüpfland — Design auf Basis des Plakats
   --------------------------------------------------------------------------
   Farbwelt direkt aus Plakat.pdf entnommen: Rasengrün, Himmelblau mit
   Sonnenstrahlen, weiße Wolken, bunte Sterne. Kein Schwarz als Fläche –
   Tinte wird nur für Text und Konturen verwendet.
   ========================================================================== */

:root {
  /* --- Plakat-Palette --- */
  --gruen: #82c341;
  --gruen-hell: #95c93d;
  --gruen-blass: #eef7e2;
  --gruen-dunkel: #5d9a2a;

  --himmel: #00bff3;
  --himmel-hell: #62cdf6;
  --himmel-blass: #e6f7fe;

  --orange: #faa93e;
  --pink: #ee4498;
  --rot: #ed1c24;
  --rot-dunkel: #c8151c;

  /* --- Neutrale --- */
  --tinte: #1f2a1b;          /* dunkles Grün-Schwarz, weicher als reines Schwarz */
  --tinte-soft: #46543f;
  --grau: #6d7a68;
  --linie: #dfe7d6;
  --papier: #ffffff;
  --creme: #fbfdf7;

  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --schatten: 0 8px 24px rgba(31, 42, 27, .10);
  --schatten-lg: 0 20px 50px rgba(31, 42, 27, .16);
  --font-head: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;
  /* Nur fuers Marken-Wortbild (Kopf-/Fusszeile) - die schmale, gerundete
     Schrift aus dem "ATP HÜPFLAND"-Badge im Logo. Fuer normale
     Ueberschriften zu eng, siehe Entwurfs-Notiz in fonts.css. */
  --font-marke: 'Dosis', 'Arial Narrow', sans-serif;
  --maxw: 1180px;

  /* Ursprung der Sonnenstrahlen. Stand vorher bei top:-60% ohne eigenen
     vertikalen Versatz - bei breiten, flachen Fenstern (Desktop) landete er
     dadurch weit unterhalb des sichtbaren Bereichs und von den Streifen war
     oben kaum noch etwas zu erkennen. Jetzt ist er ueber top/left +
     translate(-50%,-50%) fest im oberen Drittel verankert, auf jeder
     Seitenform gleich. Kein Logo mehr im Hintergrund, das sich daran
     ausrichtet - der Ursprung bestimmt nur noch die Strahlen. */
  --strahl-y: clamp(210px, 25vh, 260px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Ohne das hier gewinnt jede eigene display:flex/grid-Regel (z.B. .check-line,
   .row, .f-grid) gegen das hidden-Attribut, weil Autoren-Styles die
   Browser-Vorgabe [hidden]{display:none} immer schlagen - unabhaengig von der
   Spezifitaet. Reihen, die per JS ein- und ausgeblendet werden, blieben dadurch
   sichtbar (z.B. "Auf- & Abbau" bei Selbstabholung). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--tinte);
  background: var(--papier);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.14; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.container { width: min(100% - 36px, var(--maxw)); margin-inline: auto; }

/* ==========================================================================
   Knöpfe
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
  text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, background .14s;
  box-shadow: 0 4px 0 rgba(31, 42, 27, .18);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(31, 42, 27, .18); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(31, 42, 27, .18); }
.btn--rot { background: var(--rot); color: #fff; }
.btn--rot:hover { background: var(--rot-dunkel); }
.btn--gruen { background: var(--gruen); color: #fff; }
.btn--gruen:hover { background: var(--gruen-dunkel); }
.btn--weiss { background: #fff; color: var(--tinte); }
.btn--ghost { background: transparent; color: var(--tinte); box-shadow: none; border: 2px solid var(--linie); }
.btn--ghost:hover { background: var(--gruen-blass); box-shadow: none; }
.btn--gross { padding: 17px 34px; font-size: 1.12rem; }
.btn:focus-visible { outline: 3px solid var(--himmel); outline-offset: 3px; }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--gruen);
}
.site-header .container { display: flex; align-items: center; gap: 18px; padding: 11px 0; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 50px; height: 50px; }
.brand-name { font-family: var(--font-marke); font-weight: 800; font-size: 1.32rem; letter-spacing: .01em; line-height: 1.05; }
.brand-name small { display: block; font-size: .7rem; font-weight: 700; color: var(--grau); letter-spacing: .04em; }

.main-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.main-nav a {
  padding: 9px 13px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: .97rem;
}
.main-nav a:hover { background: var(--gruen-blass); }
/* Schwarz statt Gruen auf Arnes Wunsch - siehe [[arne-gestaltung]]. */
.main-nav a[aria-current="page"] { background: var(--tinte); color: #fff; }
.main-nav .btn { margin-left: 8px; }
.main-nav .btn:hover { background: var(--rot-dunkel); }

/* Menü-Knopf: mit Wort, nicht nur drei Striche. Schwarz auf Arnes Wunsch,
   ohne eigene Knopf-Flaeche - siehe [[arne-gestaltung]]. */
.burger {
  margin-left: auto; display: none; align-items: center; gap: 9px;
  background: none; color: var(--tinte); border: 0; cursor: pointer;
  padding: 10px 4px;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
}
.burger .striche { display: grid; gap: 4px; }
.burger .striche span { display: block; width: 20px; height: 3px; background: var(--tinte); border-radius: 2px; }

/* ==========================================================================
   Himmel-Bühne: Sonnenstrahlen, Wolken, Rasen – die Bildsprache des Plakats
   ========================================================================== */
/* ==========================================================================
   Fester Flyer-Hintergrund
   --------------------------------------------------------------------------
   Himmel mit Sonnenstrahlen, unten der Rasen. Steht fest, der Inhalt wandert
   darueber - Vorbild eventify-verleih.de, dort ist jeder Inhaltsblock
   durchsichtig und der Hintergrund deshalb die ganze Zeit zu sehen.

   Anders als dort liegt hier KEINE dunkle Auflage darueber. Die bleicht bei
   eventify die Farben aus; die Lesbarkeit kommt hier stattdessen daher, dass
   der Text auf weissen Karten sitzt - wie auf dem Plakat.
   ========================================================================== */
.flyergrund {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: var(--himmel); pointer-events: none;
}
/* Buehne fuer Sterne und Wolken, breitenbegrenzt: ihre Positionen sind in
   Prozent vom Fenster gesetzt, auf sehr breiten Monitoren schoben sie sich
   dadurch bis an den echten Rand - klein und weit weg vom Inhalt in der
   Mitte. left/right:0 plus max-width und margin-inline:auto zentrieren die
   Buehne wie einen normal breiten Bildschirm; darunter ist width ohnehin
   schon <= max-width und die Regel wirkt sich nicht aus. */
.flyergrund-buehne { position: absolute; inset: 0; max-width: 1800px; margin-inline: auto; }
.flyergrund::before {
  content: ""; position: absolute;
  top: var(--strahl-y); left: 50%; width: 190vmax; height: 190vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--himmel-hell) 0deg 7deg,
    var(--himmel) 7deg 14deg
  );
  opacity: .55;
}
/* Rasen als Horizont am unteren Fensterrand, mit derselben geschwungenen
   Kante wie auf der Startseite. */
.flyergrund-rasen {
  position: absolute; left: -4%; right: -4%; bottom: 0; height: 21vh;
  background: linear-gradient(180deg, var(--gruen-hell), var(--gruen));
  clip-path: ellipse(76% 100% at 50% 100%);
}

/* Damit der feste Grund ueberhaupt zu sehen ist, muss alles darueber
   durchsichtig sein. Das war beim ersten Versuch der Fehler: der Inhalt war
   deckend, also war der Hintergrund nach dem ersten Scrollen verschwunden. */
body { background: transparent; }

/* Ueberschriften und kurze Zeilen stehen direkt auf dem Grund und sind
   deshalb schwarz mit hellem Schatten, wie die Ueberschrift der Startseite -
   auf Arnes Wunsch einheitlich auf allen Seiten, siehe [[arne-gestaltung]]. */
.sec-title { color: var(--tinte); text-shadow: 0 2px 0 rgba(255, 255, 255, .3); }
/* f-subtitel wird an zwei Stellen verwendet: auf der Kontaktseite direkt auf
   dem festen Himmel-Grund (dort schwarz mit Schatten wie sec-title, siehe
   .kontakt-liste-Regel weiter unten), und im Funnel auf der weissen
   Funnel-Karte (dort ohne Schatten - dort ist Tinte auf Weiss schon lesbar). */
.f-subtitel { color: var(--tinte); }
.f-subtitel--hell { color: var(--tinte); text-shadow: 0 2px 0 rgba(255, 255, 255, .3); }

/* Fliesstext bekommt eine eigene helle Flaeche. Leicht durchscheinend, damit
   der Grund dahinter noch zu erkennen ist und die Seite nicht wieder zu
   weissen Bloecken wird. */
.summary-note, .regen-einleitung {
  background: rgba(255, 255, 255, .9); border-radius: var(--radius);
  padding: 14px 20px; color: var(--tinte);
}

/* Die Rechtstexte behalten eine deckende weisse Flaeche: seitenlanger
   Fliesstext auf gemustertem Grund liest sich schlecht. */
main.legal { background: var(--papier); }

/* Die Kulisse bleibt stehen, waehrend der Inhalt darueber wandert. Sticky und
   nicht fixed: sticky bringt seinen Platz im Fluss selbst mit, fixed haette
   einen Platzhalter in genau der richtigen Hoehe gebraucht. Bedingung ist,
   dass die Kulisse niedriger bleibt als das Fenster – gemessen 602 px auf
   1280x800 und 595 px auf 375x812. */
.kulisse { position: relative; }
/* Kein eigener Himmel mehr - der kommt vom festen Flyer-Grund dahinter. */
.buehne { position: relative; }

/* Vertrauensband ohne eigene Flaeche: das Gruen liegt jetzt unten im festen
   Flyer-Grund, ein zweites gruenes Band im Fluss waere doppelt. */
.vertrauensband { padding: 4px 0 34px; }
.vertrauensband .vertrauen { margin-top: 0; }

/* Streu-Wolken. Selbes Positionsschema wie die Sterne (--oben/--seite als
   Variablen), aber ohne Drehung und ohne Farbauswahl - immer schlicht weiss
   wie auf dem Plakat. Groesse/Position je Breakpoint unterschiedlich, siehe
   Medienabfrage unten. */
.wolke {
  position: absolute; z-index: 0; top: var(--oben); fill: #fff;
}
.wolke--links { left: var(--seite); }
.wolke--rechts { right: var(--seite); }
/* Nur auf der Startseite im Markup vorhanden (siehe basis.njk) und nur auf
   dem Handy sichtbar, siehe Medienabfrage unten. */
.wolke--flank { display: none; }

/* Streu-Sterne. Sie sitzen im festen Flyer-Grund, ihre Prozentwerte beziehen
   sich also aufs Fenster. Position kommt aus Variablen, damit die Medienabfrage
   weiter unten sie umsetzen kann - inline-Stile liessen sich dort nicht
   ueberschreiben. */
.stern {
  position: absolute; z-index: 0;
  top: var(--oben); transform: rotate(var(--dreh, 0deg));
}
.stern--links { left: var(--seite); }
.stern--rechts { right: var(--seite); }
.stern--orange { fill: var(--orange); }
.stern--pink { fill: var(--pink); }
.stern--rot { fill: var(--rot); }
.stern--gruen { fill: var(--gruen); }
/* Nur auf der Startseite im Markup vorhanden (siehe basis.njk) und nur auf
   dem Handy sichtbar, siehe Medienabfrage unten - wie .wolke--flank. */
.stern--luecke { display: none; }

/* ==========================================================================
   Startseite: Kopfbereich
   ========================================================================== */
/* padding-top so berechnet, dass die Logo-Mitte exakt auf --strahl-y landet
   (Kopfzeile ist fest 75px hoch, Logo-Hoehe ist responsiv wie .hero-logo
   unten) - auf Desktop stimmte das zufaellig schon fast, auf dem Handy war
   das Logo dadurch rund 50px zu hoch (Arnes Feedback). */
.hero {
  padding-top: calc(var(--strahl-y) - 75px - clamp(104px, 15vw, 148px) / 2);
  padding-bottom: clamp(74px, 8vw, 104px);
  text-align: center;
}
.hero-logo { width: clamp(104px, 15vw, 148px); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 10px 20px rgba(31,42,27,.3)); }
/* Schwarz statt Weiss auf Arnes Wunsch - siehe [[arne-gestaltung]]. */
.hero h1 { color: var(--tinte); text-shadow: 0 2px 0 rgba(255, 255, 255, .3); max-width: 22ch; margin-inline: auto; }

/* Anlässe: bewusst als fließende Textzeile, nicht als Kästchen.
   Acht weiße Pillen konkurrierten mit den Knöpfen darunter und brachen
   ungleichmäßig um. Als Text umbricht es wie ein Satz und bleibt ruhig. */
.anlaesse {
  margin: 18px auto 0; max-width: 620px; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  color: var(--tinte); line-height: 1.7;
}
.anlaesse li { display: inline; list-style: none; }
.anlaesse li + li::before { content: "·"; margin: 0 .5em; opacity: .55; }

.hero-ctas { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* Vertrauensband auf dem Rasen: DIN, Jahre, Bewertung, Telefon als eine
   Textzeile mit gezeichnetem Symbol, ohne weisse Kaesten - wie im Entwurf.
   Schriftfarbe schwarz statt weiss auf Arnes Wunsch - siehe
   [[arne-gestaltung]]. */
.vertrauen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 13px 34px; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1.03rem;
  color: var(--tinte); text-shadow: 0 2px 0 rgba(255, 255, 255, .3);
}
.vertrauen li { display: inline-flex; align-items: center; gap: 9px; }
.vertrauen b { font-weight: 800; }
.vertrauen a {
  display: inline-flex; align-items: center; gap: 9px;
  color: inherit; text-decoration: none;
  border-bottom: 2px solid rgba(31, 42, 27, .4);
}
.vertrauen a:hover { border-bottom-color: var(--tinte); }
.vertrauen svg { width: 21px; height: 21px; flex: none; }
.vertrauen .stern-zeichen { font-size: 1.34em; line-height: 1; }

/* ==========================================================================
   Bilder-Seite
   --------------------------------------------------------------------------
   Spalten-Layout statt Raster: die Bilder behalten ihr eigenes Seitenverhaeltnis
   und stapeln sich versetzt. Ein gleichmaessiges Raster haette Hoch- und
   Querformate alle auf dasselbe Quadrat beschnitten – bei Fotos von
   Veranstaltungen faellt genau das Motiv weg.
   ========================================================================== */
.bilder-raster { columns: 3; column-gap: 16px; }
.bilder-kachel {
  position: relative; display: block; break-inside: avoid;
  margin-bottom: 16px; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--schatten);
  transition: transform .18s, box-shadow .18s;
}
.bilder-kachel img { width: 100%; height: auto; }
.bilder-kachel:hover, .bilder-kachel:focus-visible {
  transform: translateY(-3px); box-shadow: var(--schatten-lg);
}
/* Lupe erst beim Zeigen – auf dem Handy gibt es kein Zeigen, dort ist sie
   deshalb immer sichtbar, damit erkennbar bleibt, dass es weitergeht. */
.bilder-lupe {
  position: absolute; top: 11px; right: 11px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--tinte);
  opacity: 0; transition: opacity .18s;
}
.bilder-lupe svg { width: 17px; height: 17px; }
.bilder-kachel:hover .bilder-lupe, .bilder-kachel:focus-visible .bilder-lupe { opacity: 1; }
@media (hover: none) {
  .bilder-lupe { opacity: 1; }
}

/* ==========================================================================
   Abschnitte
   ========================================================================== */
/* Nur noch Abstaende. Die Flaechenfarben sind entfallen, damit der feste
   Flyer-Grund durchscheint - die Varianten bleiben als Haken im Markup. */
.abschnitt { padding: clamp(44px, 6vw, 78px) 0; }

.sec-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); }
.sec-title .u { position: relative; white-space: nowrap; }
.sec-title .u::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .32em;
  background: var(--orange); border-radius: 4px; z-index: -1;
}
.sec-title { position: relative; z-index: 0; }
/* Weiss mit Schatten: der Untertitel steht direkt auf dem Flyer-Grund.
   Grau darauf kam nachgerechnet auf 2,1:1 bei 17 px und war unlesbar. */
.sec-sub { color: var(--tinte-soft); text-shadow: 0 2px 0 rgba(255, 255, 255, .3); font-weight: 400; margin-top: 12px; }
.p { font-family: var(--font-head); font-weight: 800; color: var(--gruen-dunkel); }

/* ==========================================================================
   Hüpfburg-Karten
   ========================================================================== */
.castle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 24px; }
.castle-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--schatten); display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
.castle-card:hover { transform: translateY(-4px); box-shadow: var(--schatten-lg); }
/* Hochformat-Fotos brauchen ein hohes Fenster – vorher wurden 55 % weggeschnitten */
.castle-cover { position: relative; aspect-ratio: 1; overflow: hidden; cursor: zoom-in; background: var(--gruen-blass); }
.castle-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transition: transform .4s ease; }
.castle-card:hover .castle-cover img { transform: scale(1.05); }
.castle-photos-n, .castle-price-tag {
  position: absolute; font-family: var(--font-head); font-weight: 800; font-size: .8rem;
  padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.94);
}
.castle-photos-n { top: 11px; left: 11px; display: inline-flex; align-items: center; gap: 5px; }
.castle-photos-n svg { width: 13px; height: 13px; color: var(--tinte); }
.castle-price-tag { bottom: 11px; right: 11px; background: var(--rot); color: #fff; }
.castle-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.castle-body h3 { display: flex; align-items: center; gap: 9px; }
.castle-body .flag { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.castle-facts { display: flex; flex-wrap: wrap; gap: 7px; }
/* Angaben je Hüpfburg: gezeichnete Symbole statt Emoji, in einer Kapsel.
   Der regionale Wettbewerber setzt dieselbe Angabe als nackte graue
   Emoji-Zeile – die Kapsel plus eigene Symbole trennt die beiden klar. */
.fact {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gruen-blass); border-radius: 999px; padding: 5px 12px;
  font-size: .8rem; font-weight: 700;
}
.fact svg { width: 14px; height: 14px; flex: none; color: var(--gruen-dunkel); }
.castle-cta { display: flex; gap: 9px; margin-top: auto; }
.castle-cta .btn { flex: 1; padding: 11px 14px; font-size: .93rem; }

/* ==========================================================================
   Preistabelle & Service
   ========================================================================== */
.preis-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); box-shadow: var(--schatten); background: #fff; }
/* min-width stammt aus der Zeit mit fuenf Spalten. Mit vier Spalten passt
   die Tabelle auf ein Handy, wenn Polster und Schrift mitgehen – Arne
   musste vorher seitlich wischen, um die Kaution zu sehen. */
.preis-table { min-width: 480px; width: 100%; border-collapse: collapse; }
.preis-table th, .preis-table td { padding: 13px 16px; text-align: right; }
.preis-table th:first-child, .preis-table td:first-child { text-align: left; }
.preis-table thead th { background: var(--gruen); color: #fff; font-family: var(--font-head); font-size: .9rem; }
.preis-table tbody tr { border-top: 2px solid var(--linie); }
.preis-table tbody tr:nth-child(even) { background: var(--creme); }
.preis-table td.n { font-family: var(--font-head); font-weight: 800; }

.service-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; }
.service-card { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--schatten); }
.service-card h3 { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; font-size: 1.08rem; }
.service-card .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.service-card p { font-size: .92rem; color: var(--tinte-soft); }

/* Weisse Karte statt kraeftigem Gruen: die gruene Flaeche ueberlappte beim
   Scrollen sichtbar mit dem gruenen Rasen im festen Hintergrund - zwei nicht
   ganz passende Gruentoene direkt uebereinander. */
.zubehoer {
  background: #fff; color: var(--tinte); border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 38px); margin-top: 30px; box-shadow: var(--schatten);
}
.zubehoer h3 { text-align: center; margin-bottom: 20px; }
.zubehoer ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 9px 20px; list-style: none; }
.zubehoer li { display: flex; gap: 9px; font-weight: 700; font-size: .95rem; }
.zubehoer li::before { content: "✓"; font-weight: 900; color: var(--gruen-dunkel); }

/* ==========================================================================
   Regenstorno
   ========================================================================== */
.regen-stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 18px; margin-top: 24px; }
.regen-stufe { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--schatten); border-top: 5px solid var(--himmel); }
.regen-stufe:nth-child(2) { border-top-color: var(--gruen); }
.regen-stufe:nth-child(3) { border-top-color: var(--orange); }
.regen-stufe .nr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--himmel); color: #fff; font-family: var(--font-head); font-weight: 800; margin-bottom: 11px; }
.regen-stufe:nth-child(2) .nr { background: var(--gruen); }
.regen-stufe:nth-child(3) .nr { background: var(--orange); }
.regen-stufe h4 { font-size: 1.05rem; margin-bottom: 7px; }
.regen-stufe p { font-size: .9rem; color: var(--tinte-soft); }
.regen-stufe .kosten { margin-top: 12px; font-family: var(--font-head); font-weight: 800; color: var(--gruen-dunkel); font-size: .96rem; }
.regen-frei { background: #fff; border-radius: var(--radius); padding: 20px 24px; display: flex; gap: 15px; align-items: center; }
.regen-frei .ic { font-size: 1.8rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-liste { max-width: 800px; margin-inline: auto; display: grid; gap: 12px; }
.faq-eintrag { background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.faq-eintrag summary {
  cursor: pointer; padding: 18px 22px; font-family: var(--font-head); font-weight: 800;
  font-size: 1.04rem; display: flex; gap: 13px; align-items: flex-start; list-style: none;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::before { content: "?"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gruen); color: #fff; display: grid; place-items: center; font-size: .9rem; }
.faq-eintrag[open] summary { background: var(--gruen-blass); }
.faq-eintrag .antwort { padding: 4px 22px 20px 61px; color: var(--tinte-soft); font-size: .96rem; }
.faq-eintrag .antwort p + p { margin-top: 10px; }

/* ==========================================================================
   Galerie & Lightbox
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 15px; }
.gallery-grid a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
/* height:auto ist nötig – eleventy-img setzt width/height als HTML-Attribute,
   die sonst als feste Höhe gewinnen und aspect-ratio aushebeln. */
.gallery-grid img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; cursor: zoom-in; transition: transform .2s; }
.gallery-grid a:hover img { transform: scale(1.04); }

.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.open { display: block; }
.modal-bg { position: absolute; inset: 0; background: rgba(31, 42, 27, .88); }
.modal-inner { position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 20px clamp(12px, 3vw, 40px); }
.modal-close { position: absolute; top: 14px; right: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; font-size: 1.1rem; cursor: pointer; }
.modal-title { color: #fff; font-family: var(--font-head); font-weight: 800; text-align: center; padding-right: 56px; }
.modal-img-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; gap: 12px; }
/* min-width: 0 ist noetig, damit das Bild in der Flex-Zeile neben den
   Pfeilen wirklich schrumpft. Ohne das erzwang sein Eigenmass die Zeile in
   die Breite - auf 375px lagen beide Pfeile dadurch ausserhalb des
   Fensters (nachgemessen: links bei -43px, rechts bei 372px). */
.modal-img-wrap img {
  max-height: 100%; max-width: 100%; min-width: 0;
  border-radius: var(--radius); border: 4px solid #fff; object-fit: contain;
}
.modal-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 1.2rem; cursor: pointer; flex: none; }
.modal-thumbs { display: flex; gap: 8px; overflow-x: auto; justify-content: center; padding-bottom: 4px; }
.modal-thumbs img { height: 56px; width: 74px; object-fit: cover; border-radius: 9px; border: 2px solid transparent; cursor: pointer; opacity: .6; flex: none; }
.modal-thumbs img.cur { border-color: var(--orange); opacity: 1; }

/* ==========================================================================
   Kontaktkarten
   ========================================================================== */
.kontakt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); gap: 18px; }
.kontakt-card {
  background: #fff; border-radius: var(--radius-lg); padding: 24px; text-align: center;
  text-decoration: none; box-shadow: var(--schatten); transition: transform .15s, box-shadow .15s;
}
.kontakt-card:hover { transform: translateY(-4px); box-shadow: var(--schatten-lg); }
.kontakt-card .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; margin: 0 auto 13px; }
.kontakt-card h3 { margin-bottom: 6px; }
.kontakt-card p { font-size: .92rem; color: var(--grau); }

/* ==========================================================================
   Schwebender WhatsApp-Knopf
   ========================================================================== */
.wa-knopf {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff; text-decoration: none;
  padding: 13px 20px 13px 15px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.wa-knopf:hover { background: #1da851; }
.wa-knopf svg { width: 24px; height: 24px; fill: #fff; flex: none; }
@media (max-width: 560px) { .wa-knopf .wa-text { display: none; } .wa-knopf { padding: 15px; } }

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.site-footer { background: var(--tinte); color: #e8eee5; padding: clamp(38px, 5vw, 60px) 0 26px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; margin-bottom: 30px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.footer-brand img { width: 54px; height: 54px; }
.footer-brand b { font-family: var(--font-marke); font-weight: 800; font-size: 1.3rem; letter-spacing: .01em; }
.site-footer h4 { margin-bottom: 12px; color: var(--gruen-hell); }
.site-footer ul { list-style: none; display: grid; gap: 8px; font-size: .95rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .85rem; color: #aab8a4;
}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */
.legal { padding: clamp(34px, 5vw, 60px) 0 70px; }
.legal .container { max-width: 800px; }
.legal h1 { margin-bottom: 26px; }
.legal h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.legal p, .legal ul, .legal address { margin-bottom: 12px; }
.legal ul { padding-left: 22px; }
.legal address { font-style: normal; }

/* ==========================================================================
   Mobil
   ========================================================================== */
@media (max-width: 900px) {
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .burger { display: inline-flex; }
  .main-nav {
    position: fixed; inset: 62px 0 auto; background: #fff; flex-direction: column;
    align-items: stretch; gap: 2px; padding: 14px 18px 22px; display: none;
    box-shadow: var(--schatten-lg); border-bottom: 3px solid var(--gruen);
    max-height: calc(100vh - 62px); overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 15px; font-size: 1.05rem; }
  .main-nav .btn { margin: 8px 0 0; }
}
@media (max-width: 560px) {
  .site-footer .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Fußzeilen-Symbole
   ========================================================================== */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .13); color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.footer-social a:hover { background: var(--gruen); transform: translateY(-2px); }
.footer-social svg { width: 21px; height: 21px; }

/* ==========================================================================
   Kontaktseite: eine Akzentfarbe, klare Rangfolge
   --------------------------------------------------------------------------
   Vorher hatte jede Karte eine eigene Farbkachel – sieben Farben auf einer
   Seite wirkten unruhig. Jetzt tragen nur die beiden schnellsten Wege Farbe.
   ========================================================================== */
.container--schmal { width: min(100% - 36px, 820px); }

/* --- Lager und Liefergebiet: stehen oben, weil das die Fragen sind,
       mit denen Leute auf die Seite kommen --- */
.info-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.info-block {
  background: #fff; border: 3px solid var(--linie); border-radius: var(--radius-lg);
  padding: 24px 26px; display: flex; flex-direction: column;
}
.info-block h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 1.14rem; margin-bottom: 14px;
}
.info-block h2 .ic {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--gruen-blass); color: var(--gruen-dunkel);
}
.info-block h2 .ic svg { width: 21px; height: 21px; }
.info-block address { font-style: normal; font-size: 1rem; line-height: 1.6; color: var(--tinte); }
.info-block address strong { font-family: var(--font-head); font-size: 1.06rem; }
.info-block p { font-size: .95rem; color: var(--tinte-soft); }
.info-block .info-klein { font-size: .87rem; color: var(--grau); margin-top: auto; padding-top: 12px; }

/* Telefonnummer gehoert zur Adresse, nicht in einen eigenen Knopf. */
.info-tel {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--linie);
  font-family: var(--font-head); font-weight: 800; font-size: 1.22rem;
  color: var(--tinte); width: 100%;
}
.info-tel .ic { color: var(--gruen-dunkel); flex: none; display: grid; place-items: center; }
.info-tel .ic svg { width: 22px; height: 22px; }
.info-tel:hover { color: var(--gruen-dunkel); }

/* --- WhatsApp als breites Band, der eine hervorgehobene Weg --- */

/* --- Weitere Wege: ruhige Liste, einheitliche Symbolfarbe --- */
.kontakt-liste { list-style: none; display: grid; gap: 10px; }
.kontakt-liste a {
  display: flex; align-items: center; gap: 15px; text-decoration: none;
  background: #fff; border: 2px solid var(--linie); border-radius: var(--radius);
  padding: 14px 18px; transition: border-color .15s, background .15s;
}
.kontakt-liste a:hover { border-color: var(--gruen); background: var(--gruen-blass); }
.kontakt-liste .ic { color: var(--gruen-dunkel); flex: none; display: grid; place-items: center; }
.kontakt-liste .ic svg { width: 23px; height: 23px; }
.kontakt-liste .txt { display: grid; gap: 1px; min-width: 0; }
.kontakt-liste strong { font-family: var(--font-head); font-size: 1rem; }
.kontakt-liste small { color: var(--grau); font-size: .86rem; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .info-tel { font-size: 1.12rem; }
  .preis-table { min-width: 0; font-size: .9rem; }
  .preis-table th, .preis-table td { padding: 11px 9px; }
  .preis-table thead th { font-size: .82rem; }
}

@media (max-width: 900px) { .bilder-raster { columns: 2; } }
@media (max-width: 560px) { .bilder-raster { columns: 1; } }


/* Auf schmalen Schirmen fuellt der zentrierte Text fast die ganze Breite;
   frei ist nur, was die zentrierten Zeilen nicht erreichen - ganz aussen am
   Rand, oder ganz oben/unten, wo auf jeder Seite noch keine bzw. keine
   eigene Ueberschrift mehr steht. Sieben der zehn Sterne bleiben deshalb
   stehen (drei mehr als vorher, auf Wunsch): zwei oben in den Ecken direkt
   unter dem Header, zwei weitere knapp darunter am aeussersten Rand, einer
   unten an der Rasenkante, wo er halb hinter dem Gruen verschwindet, dazu
   die zwei bisherigen unten. Die zwei uebrigen (Ober-Paar, direkt neben der
   Ueberschrift auf breiten Schirmen gedacht) laegen hier hinter der Schrift
   und fallen weg.

   Ueberschrieben wird hier top/left/right und nicht --oben/--seite: die
   Variablen stehen als inline-Stil am Element und liessen sich von hier aus
   nicht anfassen, die daraus abgeleiteten Eigenschaften schon. Im Browser
   gegen die tatsaechlich bemalten Zeilen aller Seiten geprueft. */
/* Auf dem Handy stehen zwei fest positionierte Elemente IMMER an derselben
   Bildschirmstelle, unabhaengig vom Scrollen: der Sticky-Header oben (75px
   hoch) und der WhatsApp-Knopf unten rechts. Die Sterne liegen im selben
   festen Hintergrund und wurden von beiden verdeckt - im Browser nachgemessen
   sassen zwei der vier "sichtbaren" Sterne unter dem Header (top: 21px bei
   75px Kopfhoehe) und einer ueberlappte den WhatsApp-Knopf um 16x29px. Effektiv
   war nur ein einziger Stern wirklich zu sehen. Jetzt raeumen top-Werte in
   festen Pixeln bzw. mit Sicherheitsabstand beide Zonen. */
@media (max-width: 780px) {
  /* Alle Wolken erstmal weg, bis auf die zwei Flank-Wolken auf der
     Startseite weiter unten. Es gab hier zusaetzlich eine einzelne Wolke
     ganz unten (in der Luecke zwischen den beiden Kantensternen), die auf
     Arnes Wunsch raus ist - sie sass zu weit unten, an der Rasenkante, wo
     sie vom Gruen angeschnitten wurde ("hinter dem Rasen"). */
  .wolke { display: none; }

  /* Nur auf der Startseite (siehe basis.njk): zwei Wolken links/rechts neben
     dem Logo, auf Hoehe des Strahlen-Ursprungs - Arne hat die Stelle per
     Screenshot markiert. translateY(-50%) zentriert auf --strahl-y, genau
     wie das Logo selbst (.hero). Bewusst NICHT beide auf derselben Hoehe:
     auf dem Plakat sitzen die zwei Wolken neben der Marke auch leicht
     versetzt, nicht wie gespiegelt - links etwas hoeher, rechts etwas
     tiefer. */
  .wolke--flank {
    display: block; width: 78px; height: 47px;
    transform: translateY(-50%);
  }
  .wolke--flank-l { left: 14%; top: calc(var(--strahl-y) - 22px); }
  .wolke--flank-r { right: 14%; top: calc(var(--strahl-y) + 22px); }

  .stern--ober, .stern--mitte-r { display: none; }

  /* Ecke sitzt direkt unter dem Header (top:90px, Kopfzeile ist 75px hoch). */
  .stern--ecke { width: 42px; height: 42px; top: 90px; }
  .stern--ecke-links { left: 1%; }
  .stern--ecke-rechts { right: 1%; }

  .stern--kante { width: 34px; height: 34px; }
  .stern--kante-l { top: 88%; left: 2%; }
  .stern--kante-r { top: 76%; right: 3%; }

  /* Drei weitere Sterne auf Wunsch, verschiedene Groessen. Erster Versuch
     setzte sie auf feste Prozente der Fensterhoehe (30/42/62%) - auf der
     Fragen-Seite mit ihrer vierzeiligen Unterzeile reichte die bis auf
     75% runter und lag genau auf dem Stern bei 30%. Anders als Ecke/Kante
     ist eine allgemeine "Prozent vom Fenster"-Position also NICHT auf jeder
     Seite sicher, weil Unterzeilen unterschiedlich lang umbrechen.
     Sicher ist dagegen der schmale Streifen direkt unter dem Header und vor
     jeder Ueberschrift: die H1 faengt auf jeder Seite bei fester Padding-
     Formel an (119px, nachgemessen) - unabhaengig von Seite oder Textlaenge,
     weil davor schlicht noch kein Inhalt gerendert ist. Auf den Rechtstexten
     ist die H1 zwar schon bei 109px, das faellt aber nicht ins Gewicht: dort
     deckt der undurchsichtige weisse Rechtstext-Kasten schon ab 75px alles
     ab, ein Stern waere davor ohnehin unsichtbar. Alle drei bleiben mit
     Sicherheitsabstand ueber 119px. */
  .stern--rand-l { width: 26px; height: 26px; top: 78px; left: 20%; right: auto; }
  .stern--rand-r { width: 18px; height: 18px; top: 93px; right: 26%; left: auto; }
  .stern--mitte-l { width: 16px; height: 16px; top: 94px; left: 46%; right: auto; }

  /* Nur auf der Startseite im Markup (siehe basis.njk): zwei Sterne in der
     Luecke zwischen der Anlaesse-Zeile und dem Vertrauensband - dort sonst
     leerer Himmel. Feste Prozente sind hier unbedenklich, weil dieser
     Hero-Aufbau nur auf Home vorkommt, nicht auf Unterseiten mit ihren
     unterschiedlich langen Texten. */
  .stern--luecke { display: block; }
  .stern--luecke-l { top: 58%; left: 6%; }
  .stern--luecke-r { top: 60%; right: 7%; }
}