/* Nachbau der Framer-Landingpage Wandern. Werte aus referenz/aufbau-desktop.txt:
   Desktop 1435 px, Seitenrand 40, Grund #F3EEE7, Tinte #3D3733.
   Schriften: Cormorant Garamond 300 (Titel), Abhaya Libre (Text), Inter 12 px
   Versalien .14em (Beschriftungen), DM Mono 500 (Seitenmenue), Oswald 300 (Wortmarke). */
:root{
  --grund:#F3EEE7; --tinte:#3D3733; --grau:#6E6862; --text:#6B635F; --text2:#5C554F;
  --linie:#DDD5C9; --dunkel:#35302B; --creme:#F1ECE3;
  --rand:40px; --breite:1435px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:"Abhaya Libre",Georgia,serif;font-size:16px;line-height:1.66}
img{display:block;width:100%;height:auto;object-fit:cover;background:#E6DFD4}
a{color:inherit}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;margin:0;color:var(--tinte)}
p{margin:0}
button,input,select{font:inherit;border-radius:0}

.mikro,figcaption,.rand dt,.nr{font-family:Inter,system-ui,sans-serif;font-size:12px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.lauf{font-size:17px;line-height:1.66;color:var(--text)}
figure{margin:0;display:flex;flex-direction:column;gap:8px}

/* Kopf: Wortmarke nach Markenregel (Oswald 300, Laufweite .42em mit Ausgleich), darunter das Seitenmenue */
.kopf{position:sticky;top:0;z-index:20;background:var(--grund);border-bottom:1px solid #E6DFD4}
.wortmarke{display:block;text-align:center;text-decoration:none;font-family:Oswald,Impact,sans-serif;font-weight:300;
  font-size:28px;letter-spacing:.42em;text-indent:.42em;padding:40px 0 22px;color:var(--tinte)}
/* Michael 16.09.2026: Signet im Kopf wieder weg -- oben steht NUR die Typo.
   Sie bleibt bei 28 px (vorher 24), das war die Bitte "etwas groesser". */
.seitenmenue{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;padding:10px var(--rand) 36px}
.seitenmenue a{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:12px;line-height:20px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:#8a857d} /* Michael 15.09.2026: Menue heller */
.seitenmenue a:hover{text-decoration:underline;text-underline-offset:6px}

main,.fuss{max-width:var(--breite);margin:0 auto}
.abschnitt{padding:128px var(--rand) 0;display:flex;flex-direction:column;gap:64px;scroll-margin-top:170px}
/* Titelblock nach dem Auftakt, von Michael am 15.09.2026 als optimal freigegeben:
   Kleinzeile, 38 px, Titel 30 px, 38 px, Fliesstext. Gilt fuer JEDEN Abschnittskopf. */
.kopf1{display:flex;flex-direction:column;gap:38px}
/* Runde 3, Michael: Kleinzeile naeher an den Titel und kleiner, naeher am Framer-Original (dort 12 px, 8 px Abstand) */
.kopf1 .mikro{font-size:11px}
.kopf1 .mikro+h2{margin-top:-24px} /* 38 - 24 = 14 px */
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2{font-size:30px;line-height:1.28;letter-spacing:-.005em}
.kopf2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.kopf2 h2{max-width:260px} /* Framer bricht den Titel auf drei Zeilen (Canvas-Foto Zimmer und Preise) */

/* Auftakt: zwei Reihen wie im Framer-Raster */
.auftakt{padding:48px var(--rand) 0;scroll-margin-top:170px}
.auftakt-raster{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:40px}
.auftakt .a1{align-self:end}
.auftakt .a2{align-self:end;width:80%}
.auftakt .a3{width:75%;justify-self:end}
.wort{align-self:end;display:flex;flex-direction:column;gap:38px;padding-bottom:40px}
h1,.titel2{font-size:30px;line-height:1.28;letter-spacing:-.005em;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300}
.wort .lauf{max-width:520px}

/* Zimmer: waagrechtes Gleis mit Laeufer */
.gleis{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:-16px}
.gleis::-webkit-scrollbar{display:none}
.karte{flex:0 0 475px;scroll-snap-align:start;display:flex;flex-direction:column;gap:16px}
.kzeile{display:flex;justify-content:space-between;align-items:end;padding-top:16px;gap:12px}
.kzeile h3{font-size:17px;line-height:1.2}
.kmass{font-size:16px;color:var(--grau);line-height:1.2;white-space:nowrap}
.klinie{height:1px;background:var(--linie)}
.kpreis{font-size:16px;font-weight:500;line-height:1.2}
.ktext{font-size:17px;color:var(--text)}
.gleissteuerung{display:flex;align-items:center;gap:34px;margin-top:-24px}
.gleissteuerung button{background:none;border:0;padding:8px 0;cursor:pointer;font-family:Inter,system-ui,sans-serif;font-weight:300;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--tinte);display:flex;align-items:center;gap:12px}
.gleissteuerung button:disabled{color:#B4AAA0;cursor:default}
.gleissteuerung .pfeil{font-size:26px;line-height:1;letter-spacing:0}
.spur{flex:1;height:1px;background:#E6DFD4;position:relative}
.laeufer{position:absolute;left:0;top:0;height:1px;background:var(--tinte);width:30%;transition:left .2s,width .2s}

/* Bildreihen (Galerie und Kapitel): Breiten in Prozent wie im Framer-Raster */
.bildreihe{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.bildreihe figure{flex:0 0 var(--anteil)}
.abschnitt>.bildreihe+.bildreihe{margin-top:-40px}

/* Kapitel Essen, Wellness, Sommer */
.leitsatz{font-size:17px;line-height:1.66;color:var(--tinte);max-width:640px;margin-top:-26px} /* 64 - 26 = 38 px wie im Auftakt */
.leitsatz.serif{font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;line-height:1.55}
.satz{display:grid;grid-template-columns:4fr 4fr 3fr;gap:48px;align-items:start} /* Randspalte weiter rechts, Michael 15.09.2026 */
.rand{margin:0;display:flex;flex-direction:column;gap:28px}
.rand dt{margin-bottom:2px}
.rand dd{margin:0;font-size:15px;line-height:1.4;color:var(--tinte)}

/* Wanderkarte. karte-stil.css erwartet eigene Namen; sie stehen NUR am Kartenfeld,
   damit sie die Farben der Seite nicht ueberschreiben (wie in lp-haus.html). */
.kartenfeld{--creme:#F3EEE7;--hell:#FBFAF8;--braun:#332E2A;--text:#5C564F;--leise:#6E6862;--linie:#DDD5C9;
  --akzent:#8C5A3C;--rund:0;--a1:8px;--a2:12px;--a3:18px;
  position:relative;border:1px solid var(--linie);background:#FBFAF8;height:clamp(420px,62vh,660px)}
.kartenfeld .wk-kartenfeld{position:absolute;inset:0}
.kartenwarte{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:32px}
.nachweis{font-family:Inter,system-ui,sans-serif;font-size:11px;line-height:1.5;color:#8a857d;margin-top:-40px}

/* Was im Preis steckt */
.inklusive{padding-top:200px;gap:80px}
.inkraster{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:40px}
.ip{display:flex;gap:16px;border-top:1px solid var(--linie);padding-top:16px}
.ip h3{font-size:20px;line-height:24px;margin-bottom:8px}
.ip p{font-size:17px;color:var(--text2)}

/* Buchen und Bewertungen */
.buchen{padding-top:200px;gap:128px;scroll-margin-top:170px} /* Michael 15.09.2026: mehr Luft zwischen Knopf und Bewertungen (vorher 72) */
.buchform{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 40px;align-items:end}
.buchform label{display:flex;flex-direction:column;gap:14px}
.buchform .mikro{color:#6E6A64}
.buchform input,.buchform select{border:0;border-bottom:1px solid #3A342F;background:transparent;color:#3A342F;font-family:Inter,system-ui,sans-serif;font-size:14px;padding:8px 0;outline-offset:4px;appearance:none;-webkit-appearance:none;min-height:40px}
.knopf{grid-column:1/-1;height:51px;border:0;background:var(--dunkel);color:var(--creme);font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.knopf:hover{background:#4a433d}
.bewertungen{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:60px}
.bw{display:flex;flex-direction:column;gap:6px}
.bwzahl{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:36px;line-height:1}
.bwzahl span{font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-left:8px;vertical-align:middle}
.mikro.hell{color:#8a857d}

/* Fussbereich: eine Schrift (Abhaya Libre), CLAUDE.md Regel 24 */
.fuss{padding:120px var(--rand) 140px;font-size:14px;line-height:1.7;color:var(--tinte)}
.fussraster{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;text-align:center} /* Michael 16.09.2026: Fuss zentriert */
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}
.signet{display:block;width:88px;height:88px;margin:96px auto 32px}
.copy{text-align:center;color:#8a857d}

/* Klebeleiste unten, Gestalt wie der freigegebene Buchungsbalken (Regel 27) */
.klebeleiste{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30}
.buchbar{display:flex;align-items:stretch;background:#3D3733;color:#F6F2EA;height:64px}
.buchbar>*{display:flex;align-items:center;font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.buchbar .datum{padding:20px 34px;font-variant-numeric:tabular-nums}
.buchbar .trenn{width:1px;margin:14px 0;background:rgba(246,242,234,.28)}
.buchbar .buchtext{padding:20px 40px;border:0;background:transparent;color:inherit;cursor:pointer}
.buchbar .buchtext:hover{background:#4a433d}

/* Tablet */
@media (max-width:1199px){
  .satz{grid-template-columns:1fr 1fr}
  .rand{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:24px 32px} /* Runde 3: vier Spalten ueber die ganze Textbreite, nichts rutscht */
  .buchform{grid-template-columns:1fr 1fr}
  .bewertungen{grid-template-columns:1fr 1fr;row-gap:40px}
  .karte{flex-basis:calc((100% - 24px)/2)}
}
/* Mobil */
@media (max-width:809px){
  :root{--rand:20px}
  .kopf{position:static} /* zwei Menuezeilen klebend verdecken am Handy ein Sechstel des Bildschirms */
  .wortmarke{font-size:22px;padding:28px 0 14px}
  .seitenmenue{gap:6px 18px;padding-bottom:24px}
  .seitenmenue a{letter-spacing:.18em;font-size:11px}
  .abschnitt{padding-top:88px;gap:40px}
  .auftakt{padding-top:24px}
  .auftakt-raster{grid-template-columns:1fr;row-gap:24px}
  .auftakt .a2,.auftakt .a3{width:100%}
  .wort{padding:48px 0 0;gap:28px}
  h1,.titel2{font-size:28px}
  .kopf2,.satz,.inkraster,.buchform,.fussraster{grid-template-columns:1fr}
  .kopf2{gap:20px}
  .rand{grid-template-columns:1fr;gap:20px}
  .karte{flex-basis:86%}
  .gleissteuerung{margin-top:-8px;gap:18px}
  .bildreihe{flex-direction:column;gap:24px}
  .bildreihe figure{flex-basis:auto;width:100%}
  .abschnitt>.bildreihe+.bildreihe{margin-top:-16px}
  .inklusive,.buchen{padding-top:112px}
  .bewertungen{grid-template-columns:1fr 1fr;gap:32px 20px}
  .buchen{gap:88px}
  .fuss{padding:80px var(--rand) 120px}
  .klebeleiste{left:0;right:0;bottom:0;transform:none}
  .buchbar{height:56px}
  .buchbar .datum,.buchbar .trenn{display:none}
  .buchbar .buchtext{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.laeufer{transition:none}}