/* ============================================================
   Wohnmobil-Stellplätze — Präfix wm-

   Grundstimmung: hell und weit, zwischen drei dunklen Flächen — der
   Bühne oben, der Preistafel und dem Abschluss —, dazu eine Bildpause.
   Das Argument der Seite ist das beschriftete Luftbild in Kapitel 01:
   Fahrzeug und Fahne in einem Bild. Es steht genau einmal da.

   Skalenspitze: die Konturzeile im Hero und die Beträge auf der Tafel.
   Verzicht: keine Kachel mit Rahmen und Schatten, nirgends.
   ============================================================ */

/* ---------- 00 · Der Seitenkopf ----------
   Dieselbe Bühne wie auf jeder anderen Unterseite: randlos, dunkel,
   Schlagzeile über fast die ganze Breite, zweite Zeile in Konturschrift.
   Die Bauteile stehen in seite.css (.hero, .hero-inhalt, .h1-zeile,
   .hero-unten) — hier steht nur, was dieser Seite eigen ist.

   Vorher trug die Seite als einzige einen zweigeteilten Kopf auf Mint mit
   einem Bild im Kasten daneben. Das Bild war erst dasselbe wie in Kapitel
   01, dann ein Ersatzmotiv, dann keins; übrig blieb eine blasse Fläche mit
   kleiner Schrift. Die Sonderlocke war der Fehler, nicht das Bild. */
.seitenhero-leise{background:var(--pine);min-height:var(--buehne-min)}
.seitenhero-leise::after{background:none}

/* Die drei Zahlen stehen rechts unten in der Bühne, wo andere Seiten ihre
   Kennzahl tragen — als Zeile mit Haarlinien dazwischen, nicht als Band
   über die ganze Breite: Drei kurze Zahlen auf 1400 px auseinandergezogen
   sind wieder nur Luft. */
.wm-kopfzahlen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:0 clamp(20px,2.4vw,34px);align-items:flex-end;padding-bottom:.2em}
.wm-kopfzahlen li{display:flex;flex-direction:column;gap:6px;padding-left:clamp(20px,2.4vw,34px);
  border-left:1px solid var(--hairline-dunkel)}
.wm-kopfzahlen li:first-child{padding-left:0;border-left:0}
.wm-kopfzahl-wert{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;
  line-height:1;font-size:clamp(28px,3.4vw,50px);color:#fff;font-variant-numeric:tabular-nums}
.wm-kopfzahl-label{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ---------- Die Bühne MIT Bild ----------
   Setzt jemand im Backend doch ein Motiv ein, füllt es die Bühne randlos
   wie überall sonst (Regeln dafür stehen in seite.css) — kein Kasten. */

/* ---------- 01 · Der Platz von oben ----------
   Links der Satz, rechts das Luftbild mit seinen Beschriftungen. Die
   gezeichnete Draufsicht, die hier bis zum 25.08.2026 stand, ist
   ersatzlos weg: Sie sah aus wie ein Wireframe und behauptete Lagen, die
   niemand gemessen hat. Das Foto kann beides besser. */
.wm-plan{padding:var(--luft) var(--inset)}
/* Die Bildspalte ist die schmalere. Bei .95/1.05 bekam das hochkante
   Luftbild 940 px Breite und stand damit 1250 px hoch neben 450 px Text —
   die Differenz war reine Mintfläche. Zusammen mit dem beschnittenen Bild
   (1200×1280 statt ×1600) ist das Kapitel von 1101 auf rund 780 px
   geschrumpft, ohne dass die Marken verrutschen: Sie sitzen in Prozent
   des Bildes, und das Bild behält sein Verhältnis. */
.wm-plan-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(24px,3.4vw,64px);align-items:center}
.wm-plan-satz{max-width:34rem}
.wm-plan-satz .kapitel-marke{margin-bottom:14px}
.wm-h2{margin:0 0 clamp(16px,1.8vw,24px);font-family:'Space Grotesk',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.94;
  font-size:clamp(30px,4.2vw,58px);color:var(--tinte)}
.wm-plan-lead,.wm-klartext-lead,.wm-preise-lead,.wm-anfrage-lead{font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;font-size:clamp(15.5px,1.15vw,18px);line-height:1.6;color:var(--sekundaer);margin:0;max-width:38rem}
.wm-plan-fakten{display:flex;flex-wrap:wrap;gap:0;margin:clamp(24px,3vw,38px) 0 0;padding:0;
  border-top:1px solid var(--hairline)}
.wm-plan-fakten > div{flex:1 1 130px;padding:14px 18px 12px}
.wm-plan-fakten > div:first-child{padding-left:0}
.wm-plan-fakten > div + div{border-left:1px solid var(--hairline)}
.wm-plan-fakten dt{color:var(--muted);margin-bottom:4px}
.wm-plan-fakten dd{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--tinte)}

/* Das Luftbild trägt seine Beschriftungen selbst. Jede Marke sitzt in
   Prozent des Bildes — damit wandert sie beim Skalieren mit, statt bei
   1200 px zu passen und bei 390 px daneben zu liegen. */
.wm-luftbild{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--tanne)}
.wm-luftbild img{width:100%;height:auto;display:block}
.wm-luftbild figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  color:rgba(255,255,255,.86);
  background:linear-gradient(to top,rgba(6,26,17,.72),rgba(6,26,17,0))}
.wm-marke{position:absolute;left:var(--wm-x);top:var(--wm-y);display:flex;align-items:center;gap:10px;
  transform:translateY(-50%);pointer-events:none;z-index:2}
.wm-marke-rechts{flex-direction:row}
.wm-marke-links{flex-direction:row-reverse;transform:translate(-100%,-50%)}
/* Der Punkt sitzt genau auf der Stelle; der Strich läuft zur Schrift. */
.wm-marke-punkt{position:relative;width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(6,26,17,.45);flex:none}
.wm-marke-punkt::after{content:"";position:absolute;top:50%;width:26px;height:1px;background:rgba(255,255,255,.8)}
.wm-marke-rechts .wm-marke-punkt::after{left:100%}
.wm-marke-links .wm-marke-punkt::after{right:100%}
.wm-marke-text{margin-left:22px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;white-space:nowrap;
  text-shadow:0 1px 3px rgba(6,26,17,.75),0 2px 10px rgba(6,26,17,.5)}
.wm-marke-links .wm-marke-text{margin-left:0;margin-right:22px}
/* Das Preisschild hängt in der Ecke des Bildes — dieselbe Zahl eröffnet
   unten die erste Zeile des Belegs. */
/* Links oben, nicht rechts: Dort schweben auf breiten Fenstern die drei
   Kopfknöpfe (Webcam, Startzeiten, Aktuelles) über der Seite und hätten
   das Schild verdeckt — auf dem Rechner unsichtbar, am Telefon nicht. */
.wm-preisschild{position:absolute;left:16px;top:16px;z-index:3;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--lime);color:var(--pine);font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.02em;box-shadow:0 6px 20px rgba(6,26,17,.28)}
/* Einlauf: erst das Schild, dann die Marken der Reihe nach. */
html.js .wm-luftbild .wm-marke,html.js .wm-luftbild .wm-preisschild{opacity:0;transform-origin:left center;
  transition:opacity .5s ease}
html.js .wm-luftbild .wm-marke{transition-delay:calc(.25s + var(--wm-i) * .12s)}
html.js .wm-luftbild.ist-da .wm-marke,html.js .wm-luftbild.ist-da .wm-preisschild{opacity:1}
html.js .wm-luftbild .wm-marke-links{transform:translate(-100%,-50%)}

/* ---------- 02 · Klartext ---------- */
.wm-klartext{padding:var(--luft) var(--inset);background:var(--mint)}
.wm-klartext-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,54px);
  align-items:end;margin:14px 0 clamp(30px,4vw,52px)}
/* Zwei Spalten, gleich breit, gleich gesetzt. Das ist die Aussage: Was
   fehlt, steht neben dem, was da ist — nicht kleiner und nicht später. */
.wm-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,56px);
  border-top:1px solid var(--hairline);padding-top:clamp(20px,2.4vw,32px)}
.wm-spalte-titel{color:var(--gruen);margin:0 0 18px}
.wm-spalte-nein .wm-spalte-titel{color:var(--muted)}
.wm-spalte ul{list-style:none;margin:0;padding:0}
.wm-spalte li{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:baseline;gap:0 12px;
  padding:14px 0;border-bottom:1px solid var(--hairline)}
.wm-sache{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(15px,1.15vw,17.5px);
  color:var(--tinte);letter-spacing:-.005em}
.wm-spalte-nein .wm-sache{color:var(--nav)}
/* Der Zusatz gehört unter die Sache, nicht unter das Zeichen: ohne diese
   Zeile fällt er in die 22px schmale erste Spalte und bricht Wort für Wort
   um. Gesetzt wie die Regeln weiter unten — eine halbe Erklärung ist
   Fließtext, keine Versalzeile. */
.wm-zusatz{grid-column:2;font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:14.5px;
  line-height:1.5;color:var(--sekundaer);margin-top:3px}
/* Das Zeichen vor der Zeile: links die Haarlinie, rechts der
   durchgestrichene Kreis. Keine Farbe, kein Rot, keine Warnzeichen. */
.wm-zeichen{align-self:start;position:relative;display:block;width:16px;height:16px;margin-top:.3em}
.wm-zeichen-strich::before{content:"";position:absolute;left:0;top:8px;width:16px;height:1px;
  background:var(--gruen)}
.wm-zeichen-kreis::before{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;
  box-sizing:border-box;border:1px solid var(--muted);border-radius:50%}
.wm-zeichen-kreis::after{content:"";position:absolute;left:1px;top:8px;width:14px;height:1px;
  background:var(--muted);transform:rotate(-45deg)}
.wm-regeln{margin-top:clamp(28px,3.4vw,46px)}
.wm-regeln-titel{color:var(--muted);margin:0 0 14px}
.wm-regeln ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px clamp(20px,3vw,56px)}
.wm-regeln li{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:15.5px;line-height:1.55;
  color:var(--sekundaer);padding-left:16px;position:relative}
.wm-regeln li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1px;background:var(--gruen)}

/* ---------- 03 · Die Pause ---------- */
.wm-pause{position:relative;min-height:min(78svh,760px);display:flex;align-items:flex-end;
  padding:var(--luft) var(--inset);overflow:hidden;background:var(--pine)}
.wm-pause-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}
.wm-pause-inhalt{position:relative;z-index:2;max-width:38rem}
.wm-pause-zeit{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(56px,10vw,140px);
  line-height:.86;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.8);margin:0 0 18px;
  font-feature-settings:"tnum"}
.wm-pause-satz{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(21px,2.4vw,34px);
  line-height:1.18;color:#fff;margin:0 0 12px;text-shadow:0 1px 3px rgba(6,26,17,.4)}
.wm-pause-klein{color:rgba(255,255,255,.72)}

/* ---------- 04 · Preise ---------- */
.wm-preise{padding:var(--luft) var(--inset);background:var(--tanne);color:#fff}
.wm-preise .kapitel-nr,.wm-preise .kapitel-was{color:rgba(255,255,255,.6)}
.wm-preise .wm-h2{color:#fff}
.wm-preise-lead{color:rgba(255,255,255,.72)}
.wm-preise-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,54px);
  align-items:end;margin:14px 0 clamp(30px,4vw,52px)}
.wm-tafel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hairline-dunkel)}
.wm-posten{padding:clamp(26px,3.4vw,44px) 0;display:flex;flex-direction:column;gap:10px}
.wm-posten + .wm-posten{border-left:1px solid var(--hairline-dunkel);padding-left:clamp(24px,3vw,48px)}
.wm-posten-was{color:var(--lime)}
.wm-posten-wert{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:.92;
  font-size:clamp(46px,7vw,104px);color:#fff;font-feature-settings:"tnum"}
.wm-posten-einheit{color:rgba(255,255,255,.6)}
.wm-preise-saetze{border-top:1px solid var(--hairline-dunkel);padding-top:clamp(20px,2.4vw,30px);
  display:grid;gap:14px}
.wm-satz{margin:0;font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:16px;line-height:1.6;
  color:rgba(255,255,255,.8);display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 20px;align-items:baseline}
.wm-satz-marke{color:var(--lime)}
.wm-satz-saison.ist-zu .wm-satz-marke{color:#e8c06a}
.wm-satz-link{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:8px;white-space:nowrap}

/* ---------- 05 · Die Anfrage ---------- */
.wm-anfrage{padding:var(--luft) var(--inset);background:var(--mint)}
.wm-anfrage-kopf{max-width:44rem;margin-bottom:clamp(26px,3.4vw,44px)}
.wm-anfrage-kopf .wm-h2{margin:14px 0 16px}
.wm-danke{margin:0 0 26px;padding:16px 20px;background:var(--gruen);color:#fff;border-radius:10px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px}
.wm-anfrage-raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(24px,3vw,56px);align-items:start}
.wm-form{display:grid;gap:16px}
.wm-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wm-feld{display:flex;flex-direction:column;gap:7px;margin:0}
.wm-feld label,.wm-stromwahl legend{color:var(--nav)}
.wm-optional{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.wm-feld input,.wm-feld textarea{width:100%;padding:13px 15px;border:1px solid #cbd6cd;border-radius:8px;
  background:#fff;font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:var(--tinte);
  transition:border-color .2s}
.wm-feld input:focus,.wm-feld textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(31,132,70,.22)}
.wm-feld.ist-fehler input{border-color:#a8452f}
.wm-fehler{font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:#a8452f;margin:0}
.wm-fehler-oben{padding:12px 16px;background:#fbeae6;border-radius:8px}
.wm-stromwahl{border:0;padding:0;margin:0;min-inline-size:0;display:flex;flex-direction:column;gap:9px}
.wm-stromwahl legend{padding:0;margin-bottom:2px}
.wm-schalter{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:'Hanken Grotesk',sans-serif;
  font-size:15.5px;color:var(--tinte)}
.wm-stromwahl{flex-direction:row;flex-wrap:wrap;gap:10px 24px;align-items:center}
.wm-stromwahl legend{flex:1 0 100%}
.wm-schalter input{width:18px;height:18px;accent-color:var(--gruen)}
.wm-ds{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:13.5px;line-height:1.55;
  color:var(--muted);margin:2px 0 0}
.wm-absenden{margin:6px 0 0}

/* Der Beleg — schmal wie eine Quittung, mit gezackter Oberkante. */
.wm-beleg-spalte{display:grid;gap:20px;position:sticky;top:96px}
.wm-beleg{background:#fff;border-radius:0 0 10px 10px;padding:24px 22px 20px;position:relative}
.wm-beleg::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;background:#fff;
  -webkit-mask:repeating-linear-gradient(90deg,transparent 0 5px,#000 5px 6px),
    radial-gradient(circle at 5px 10px,transparent 5px,#000 5.5px);
  mask:radial-gradient(circle at 5px 10px,transparent 5px,#000 5.5px);
  -webkit-mask-size:10px 10px;mask-size:10px 10px;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
.wm-beleg-titel{color:var(--muted);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.wm-beleg-zeilen{list-style:none;margin:0;padding:0}
.wm-beleg-zeilen li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 0;
  border-bottom:1px dotted var(--hairline)}
/* Drei Angaben, zwei Spalten: links die Sache und darunter die Rechnung,
   rechts der Betrag über beide Zeilen. Ohne die ausdrückliche Spalte für
   den Betrag setzt ihn das Raster vor den Namen — „54,00 € Stellplatz". */
.wm-beleg-was{grid-column:1;grid-row:1;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:14px;color:var(--tinte)}
.wm-beleg-rechnung{grid-column:1;grid-row:2;font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:var(--muted)}
.wm-beleg-betrag{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:16px;color:var(--tinte);font-feature-settings:"tnum";text-align:right}
.wm-beleg-leer{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:14px;line-height:1.5;
  color:var(--muted);margin:0}
.wm-beleg-summe{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:14px 0 0;padding-top:14px;border-top:1.5px solid var(--tinte)}
.wm-beleg-summe .t-mikro{color:var(--muted)}
.wm-beleg-summe .t-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;
  color:var(--gruen);font-feature-settings:"tnum"}
.wm-beleg-summe[hidden]{display:none}
.wm-beleg-fuss{margin:14px 0 0;color:var(--muted);line-height:1.45}
.wm-marginalie,.wm-telefonzeile{margin:0;font-family:'Hanken Grotesk',sans-serif;font-weight:300;
  font-size:14.5px;line-height:1.6;color:var(--sekundaer)}
.wm-marginalie-titel{display:block;color:var(--gruen);margin-bottom:6px}
.wm-telefonzeile{padding-top:16px;border-top:1px solid var(--hairline)}

/* ---------- 06 · Abschluss ---------- */
.wm-cta{position:relative;min-height:min(72svh,680px);display:flex;align-items:center;
  padding:var(--luft) var(--inset);overflow:hidden;background:var(--mint)}
.wm-cta-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.wm-cta-inhalt{position:relative;z-index:2;max-width:40rem}
.wm-cta-titel{margin:0 0 18px;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.92;font-size:clamp(32px,5vw,72px);color:var(--tinte)}
.wm-cta-zeile{display:block}
.wm-cta-outline{color:transparent;-webkit-text-stroke:2px var(--gruen)}
.wm-cta-hinweis{margin-top:18px;color:var(--muted)}

/* ---------- Schmale Fenster ----------
   Kein Nachgedanke: Der Hero stapelt, die zwei Spalten des Klartexts
   bleiben ZWEI (sie sind die Aussage — untereinander wäre die rechte
   Spalte plötzlich das Kleingedruckte), nur enger gesetzt. */
@media (max-width:1080px){
  .wm-anfrage-raster{grid-template-columns:minmax(0,1fr)}
  .wm-beleg-spalte{position:static}
  .wm-plan-raster{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (max-width:860px){
  /* Im schmalen Fenster steht die Kennzahlzeile unter Lead und Knöpfen,
     nicht daneben — sonst quetscht sie sich auf 40 % der Breite. */
  .wm-hero .hero-unten{grid-template-columns:minmax(0,1fr);gap:26px}
  /* seite.css nimmt die Knöpfe unter 900 px aus JEDER Bühne („Hero nur
     Überschrift, Lead, Statuszeile"). Auf dieser Seite ist „Platz
     anfragen" die einzige Handlung, die es gibt — und die Bühne ist ohne
     Foto ohnehin kurz. Deshalb hier zurückgeholt, nur hier. */
  .wm-hero .hero-cta{display:flex}
  .wm-plan-kopf,.wm-klartext-kopf,.wm-preise-kopf{grid-template-columns:minmax(0,1fr);gap:16px}
  .wm-satz{grid-template-columns:minmax(0,1fr)}
  .wm-regeln ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* Drei Zahlen passen hier nicht mehr nebeneinander. Beim Umbruch stand
     die Haarlinie der dritten Zahl frei im Raum — also Raster statt
     Zeile, und die Linie wandert nach oben. */
  .wm-kopfzahlen{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
  .wm-kopfzahlen li,.wm-kopfzahlen li:first-child{padding-left:0;border-left:0;
    padding-top:12px;border-top:1px solid var(--hairline-dunkel)}
  .wm-zweispalt{grid-template-columns:minmax(0,1fr)}
  .wm-spalten{grid-template-columns:minmax(0,1fr);gap:26px}
  .wm-tafel{grid-template-columns:minmax(0,1fr)}
  .wm-posten + .wm-posten{border-left:0;padding-left:0;border-top:1px solid var(--hairline-dunkel)}
  .wm-plan-fakten > div + div{border-left:0;border-top:1px solid var(--hairline)}
  .wm-stromwahl{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html.js .wm-luftbild .wm-marke,html.js .wm-luftbild .wm-preisschild{opacity:1;transition:none}
}