/* Private Lodges am Ötscher, Fassung 14 vom 28.10.2026 (Aufschaltfassung; FAQ seit Fassung 10, Layout wie Fassung 8)
   Farben unverändert (Auftrag Pierre, Chat 15.10. und 16.10.2026): dunkles Grün als Hauptfarbe, warmes Creme als
   heller Hintergrund, Champagnergold nur für kleine Akzente (Knöpfe, Linien, Hervorhebungen). Alle Farben zentral hier.
   Keine Einblendeffekte: alle Inhalte sind sofort sichtbar. */

@font-face { font-family: "Gloock"; src: url("../fonts/gloock-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-bold.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  /* Farben */
  --gruen: #0B2E26;        /* Hauptfarbe: Kopf, dunkle Abschnitte, Fuss, Schrift auf Creme */
  --gruen-tief: #072019;   /* Hover und Entwurfsband */
  --creme: #F5F1E8;        /* heller Haupthintergrund */
  --creme-tief: #ECE6DA;   /* zweiter heller Ton zum Abwechseln */
  --weiss: #FCFAF6;        /* Felder auf Creme, Grundrisse */
  --gold: #B8A47C;         /* Champagnergold: Linien, Knöpfe, Akzente */
  --gold-hell: #CDBD98;    /* Gold für Schrift auf Grün (7,9:1) */
  --tinte: #13291F;        /* Schrift auf Creme */
  --grau: #4A5A53;         /* Nebentext auf Creme (6,5:1) */
  --flechte: #AFC0B8;      /* Nebentext auf Grün (7,5:1) */
  --linie-hell: #D9D1C2;   /* feine Linien auf Creme */
  --linie-dunkel: rgba(205, 189, 152, .32);
  --nacht: 6, 12, 10;      /* Abdunklung über dem Nachtbild, als RGB-Werte */

  /* Schrift und Masse */
  --titel: "Gloock", "Bodoni 72", Didot, Georgia, serif;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --rand: clamp(20px, 5vw, 64px);
  --mass: min(1240px, calc(100vw - 2 * var(--rand)));
  --abschnitt: clamp(52px, 6.5vw, 92px);
  --luft: clamp(24px, 3.4vw, 44px);
  --h1: clamp(2.4rem, 5.4vw, 5rem);
  --h2: clamp(1.9rem, 3.3vw, 2.9rem);
  --h2-mittel: clamp(1.6rem, 2.5vw, 2.2rem);
  --h3: clamp(1.35rem, 1.9vw, 1.65rem);
  --zeile: 66ch;           /* Lesebreite längerer Texte, rund 55 bis 70 Zeichen */
}

/* Farbwelten: alles Helle und alles Grüne nutzt dieselben Variablen */
body, .creme, .creme-tief {
  --farbe: var(--tinte); --ruhig: var(--grau); --linie: var(--linie-hell); --akzent-text: var(--gruen);
  --knopf-grund: var(--gruen); --knopf-schrift: var(--creme); --knopf-hover: var(--gruen-tief); --knopf-linie: var(--gruen);
}
.gruen, .kopf, .fuss, .seitenkopf, .detail, .held, .einheit, .expose-karte, .winterbild__text, .leuchtkasten {
  --farbe: var(--creme); --ruhig: var(--flechte); --linie: var(--linie-dunkel); --akzent-text: var(--gold-hell);
  --knopf-grund: var(--gold); --knopf-schrift: var(--gruen); --knopf-hover: var(--gold-hell); --knopf-linie: var(--gold);
}
.creme { background: var(--creme); color: var(--farbe); }
.creme-tief { background: var(--creme-tief); color: var(--farbe); }
.gruen { background: var(--gruen); color: var(--farbe); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--creme); color: var(--farbe); font: 400 1.0625rem/1.65 var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--titel); font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--creme); color: var(--gruen); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.entwurf { background: var(--gruen-tief); color: var(--flechte); font: 400 .8rem/1.4 var(--text); padding: 7px var(--rand); text-align: center; position: relative; z-index: 30; }

/* Gemeinsame Bausteine */
.innen { width: var(--mass); margin: 0 auto; }
.abschnitt { padding: var(--abschnitt) 0; }
.abschnitt--eng { padding: calc(var(--abschnitt) * .7) 0; }
.zeichen { display: block; width: 44px; height: 2px; background: var(--gold); margin: 0 0 18px; }
.dachzeile { display: block; font: 600 .8rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-text); margin: 0 0 14px; }
.titel { font-size: var(--h2); max-width: 18em; }
.titel--mittel { font-size: var(--h2-mittel); margin-bottom: 16px; }
.lead { font-size: clamp(1.08rem, 1.35vw, 1.2rem); line-height: 1.6; max-width: var(--zeile); }
.ruhig { color: var(--ruhig); }
.fussnote { font-size: .9rem; color: var(--ruhig); margin-top: 16px; max-width: 75ch; }
.kopfzeile { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--luft); align-items: end; margin-bottom: var(--luft); }
.kopfzeile .lead { margin: 0; }
.mittig-kopf { text-align: center; max-width: 46em; margin: 0 auto var(--luft); }
.mittig-kopf .zeichen { margin-left: auto; margin-right: auto; }
.mittig-kopf .titel { margin: 0 auto; max-width: none; }
.mittig-kopf .lead { margin: 14px auto 0; max-width: 38em; }
.abschluss { text-align: center; }
.abschluss .zeichen { margin-left: auto; margin-right: auto; }
.abschluss .titel { margin: 0 auto; }
.abschluss .lead { margin: 14px auto 0; max-width: 40em; }
.abschluss .knoepfe { justify-content: center; }
.abschluss .kontaktdaten { justify-content: center; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 2px; font: 600 .95rem/1.15 var(--text); text-align: center; text-decoration: none; cursor: pointer; background: var(--knopf-grund); color: var(--knopf-schrift); border: 1px solid var(--knopf-grund); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf--linie { background: transparent; color: var(--farbe); border-color: var(--knopf-linie); }
.knopf--linie:hover { background: rgba(184, 164, 124, .14); border-color: var(--knopf-linie); color: var(--farbe); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--linie); }
.liste li:last-child { border-bottom: 1px solid var(--linie); }
.liste li::before { content: ""; position: absolute; left: 0; top: 22px; width: 14px; height: 2px; background: var(--gold); }
.kasten { border: 1px solid var(--linie); padding: 22px 24px; }
.kasten h3 { font-size: 1.4rem; margin-bottom: 12px; }
.kasten .liste li { padding-left: 0; }
.kasten .liste li::before { display: none; }
.kasten .liste li span, .unterlagen li span { float: right; margin-left: 12px; font-variant-numeric: tabular-nums; color: var(--ruhig); }
.kasten--hell { background: var(--weiss); }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--luft) clamp(32px, 5vw, 72px); align-items: start; }
.drei-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px var(--luft); }
.drei-spalten > div { border-top: 2px solid var(--gold); padding-top: 18px; }
.drei-spalten h3 { font-size: var(--h3); margin-bottom: 8px; }
.drei-spalten p { color: var(--ruhig); }

/* Kopf */
.kopf { background: var(--gruen); color: var(--farbe); position: relative; z-index: 20; }
.kopf__innen { width: var(--mass); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; }
.marke { display: block; text-decoration: none; }
.marke .logo { width: clamp(140px, 13vw, 184px); height: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font: 500 .95rem/1 var(--text); }
.nav a { text-decoration: none; padding: 8px 0; }
.nav a:hover { color: var(--gold-hell); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
.nav .knopf { padding: 10px 18px; min-height: 42px; }
.nav .knopf:hover { color: var(--knopf-schrift); }
.menue-knopf { display: none; }

/* ------------------------------------------------------------------------------------------------
   Startbild. Grundform (schmale und hohe Fenster): Bild in eigenem Rahmen, Text darunter auf Grün,
   Dachzeile und Titel ragen in den Schnee am unteren Bildrand. Die genaue Höhe und Bildlage rechnet
   site.js je Fenster aus (Dachfirst bei 15,5 %, Boden bei 55,5 % der Bildhöhe). Ohne JavaScript gelten
   die Werte hier. Das Bild wird nie verzerrt und nie künstlich verlängert. */
.held { position: relative; background: var(--gruen); color: var(--farbe); }
.held__bildbox { position: relative; overflow: hidden; height: min(66.667vw, max(calc(100svh - 260px), 260px)); background: var(--gruen-tief); }
.held__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%; }
.held__bildbox::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(11, 46, 38, .45) 0, rgba(11, 46, 38, 0) 70px),
  linear-gradient(0deg, var(--gruen) 0, rgba(11, 46, 38, .9) calc(var(--ueber, 110px) * .6), rgba(11, 46, 38, 0) calc(var(--ueber, 110px) + 60px)); }
.held__inhalt { position: relative; z-index: 2; width: var(--mass); margin: calc(-1 * var(--ueber, 110px)) auto 0; padding-bottom: clamp(36px, 6vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "text" "preis"; }
.held__titel { grid-area: titel; }
.held__rechts { grid-area: text; }
.held__preis { grid-area: preis; }
.held h1 { font-size: clamp(2.3rem, min(5.2vw, 8.4svh), 4.8rem); line-height: .98; letter-spacing: -.02em; max-width: 12em; }
.held .dachzeile { color: #F3EAD6; display: inline-flex; align-items: center; gap: 12px; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.held .dachzeile::before { content: ""; width: 28px; height: 2px; background: var(--gold); flex: none; }
.held h1 { text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.held__preis { margin: 26px 0 0; display: grid; gap: 2px; font: 400 .92rem/1.4 var(--text); color: #E6E2D8; }
.held__preis strong { font: 400 clamp(1.7rem, 2.4vw, 2.3rem)/1.05 var(--titel); color: var(--gold-hell); letter-spacing: -.01em; }
.held__preis small { font-size: .84rem; color: #C9CFC9; max-width: 38em; margin-top: 4px; }
.held__text { max-width: 36em; margin: 22px 0 0; font-size: clamp(1.06rem, 1.3vw, 1.2rem); color: #ECE8DF; }
.held .knopf--linie { border-color: rgba(245, 241, 232, .75); }

/* Überlagerte Form für breite Fenster, Aufteilung wie Fassung 3: Bild über die ganze Fläche, Navigation darüber,
   links Dachzeile, Titel, Text und Knöpfe, rechts unten der Einstiegspreis. Höhe und Bildlage aus site.js. */
@media (min-width: 1000px) and (min-aspect-ratio: 6/5) {
  .kopf--ueber { position: absolute; left: 0; right: 0; background: transparent; }
  .held { display: flex; flex-direction: column; justify-content: flex-end; height: max(calc(100svh - 32px), 560px); max-height: 66.667vw; min-height: 520px; }
  .held__bildbox { position: absolute; inset: 0; height: auto; }
  .held__bild { object-position: 46% 12%; }
  .held__bildbox::after { background:
    linear-gradient(180deg, rgba(var(--nacht), .62) 0, rgba(var(--nacht), 0) 150px),
    linear-gradient(0deg, rgba(var(--nacht), .9) 0, rgba(var(--nacht), .8) calc(var(--text-h, 360px) - 120px), rgba(var(--nacht), .5) calc(var(--text-h, 360px) + 10px), rgba(var(--nacht), 0) calc(var(--text-h, 360px) + 180px)); }
  .held__inhalt { margin: 0 auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel preis" "text preis"; gap: 0 32px; align-items: end; padding-bottom: clamp(30px, 5.5vh, 72px); }
  .held__preis { align-self: end; text-align: right; margin: 0; padding-bottom: 6px; max-width: 21em; }
  .held__preis small { margin-left: auto; }
  .held h1 { font-size: clamp(2.4rem, min(5.6vw, 7.4svh), 5.4rem); }
}

/* Niedrige Fenster (Notebook mit Leisten, Zoom): etwas kompakter, damit Titel, Text und Knöpfe Platz finden. */
@media (min-width: 1000px) and (min-aspect-ratio: 6/5) and (max-height: 680px) {
  .kopf--ueber .kopf__innen { padding: 12px 0; }
  .held__text { font-size: 1rem; line-height: 1.55; }
  .held .knoepfe { margin-top: 16px; }
  .held .dachzeile { margin-bottom: 10px; }
  .held__inhalt { row-gap: 14px; padding-bottom: 22px; }
  .held__text { margin-top: 14px; max-width: 46em; }   /* Fassung 9: längerer Einstiegstext bleibt dreizeilig */
  .held h1 { font-size: clamp(2.3rem, min(5.6vw, 7svh), 5.4rem); }
}

/* ------------------------------------------------------------------------------------------------
   Lodges nach Geschoss. Fassung 8: ohne linke Beschriftungsspalte. Jede Etage hat einen zentrierten Titel direkt über
   ihren Karten. Die schlichte Hauskontur (Dach, seitliche Kanten) umfasst die ganze Breite.
   Alle Etagen füllen dieselbe Breite. Dachgeschoss: Top 7 und 8 je rund 40 %, Top 9 rund 20 % und so hoch wie Top 7
   und 8. Obergeschoss: Top 3 bis 6 in vier gleichen Spalten. Erdgeschoss: Top 1 und 2 je die Hälfte, Bildhöhe wie
   im Dachgeschoss (Bildformat 2,03 : 1 statt 16 : 10, die Karten sind um diesen Faktor breiter).
   Schematisch: Die Karten zeigen keine Lage oder Grösse einzelner Wohnungen im Grundriss. */
.haus { --traufe: 14px; --kontur: var(--gold); --innen: clamp(12px, 1.6vw, 20px); --abstand: 16px; }
.haus__dach svg { display: block; width: calc(100% + 2 * var(--traufe)); height: clamp(26px, 3.4vw, 46px); margin: 0 calc(-1 * var(--traufe)); overflow: visible; }
.haus__dach polyline { fill: none; stroke: var(--kontur); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.geschoss { padding: 0 var(--innen) 24px; border-left: 1px solid var(--kontur); border-right: 1px solid var(--kontur); border-bottom: 1px solid var(--linie); }
.geschoss:last-child { border-bottom: 1.5px solid var(--kontur); }
.geschoss__name { margin: 0; padding: 24px 0 16px; text-align: center; font: 400 clamp(1.3rem, 1.9vw, 1.6rem)/1.15 var(--titel); letter-spacing: 0; text-transform: none; color: var(--tinte); }
.geschoss__reihe { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--abstand); align-items: stretch; }
.geschoss__reihe > .verkauft-karte { display: flex; flex-direction: column; }
.geschoss__reihe .verkauft-karte__bild { flex: 1 1 auto; aspect-ratio: auto; min-height: 120px; }
.geschoss__reihe .verkauft-karte__bild img { position: absolute; inset: 0; }
.geschoss__einheiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand); }
.geschoss__einheiten .einheit__bild img { aspect-ratio: 203 / 100; }
.haus__fuss { font-size: .9rem; color: var(--ruhig); margin-top: 14px; }

/* Verkaufte Einheiten (Fassung 8): Aufbau wie Fassung 6, Foto in Graustufen mit hellem Schleier,
   Band «Bereits verkauft» im Bild, Top-Nummer darunter. Kein Link, kein Hover. */
.verkauft-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand); }
.verkauft-karte { margin: 0; background: var(--weiss); border: 1px solid var(--linie-hell); cursor: default; }
.verkauft-karte__bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #E2DCD0; }
.verkauft-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.verkauft-karte__bild::after { content: ""; position: absolute; inset: 0; background: rgba(245, 241, 232, .34); }
.verkauft-karte__leer { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(19, 41, 31, .08) 7px 8px); }
.verkauft-karte__band { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 6px 8px 5px; background: rgba(11, 46, 38, .86); color: var(--creme); font: 600 .8rem/1.2 var(--text); letter-spacing: .03em; text-align: center; white-space: nowrap; }
.verkauft-karte__top { margin: 0; padding: 9px 10px 10px; font: 400 1.15rem/1.1 var(--titel); color: var(--tinte); }

.einheit { display: flex; flex-direction: column; text-decoration: none; color: var(--farbe); background: var(--gruen); border-top: 2px solid var(--gold); transition: background-color .25s ease; height: 100%; }
a.einheit:hover { background: var(--gruen-tief); }
.einheit__bild { overflow: hidden; }
.einheit__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s ease; }
a.einheit:hover .einheit__bild img { transform: scale(1.03); }
.einheit__inhalt { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.einheit__lage { font-size: .86rem; letter-spacing: .04em; color: var(--ruhig); margin: 0; }
.einheit h2, .einheit h3, .einheit h4 { font-size: var(--h3); }
.einheit__schwerpunkt { font-size: 1rem; color: var(--gold-hell); margin: 0; }
.einheit__zahlen { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--linie); font-size: .95rem; }
.einheit__mehr { font: 600 .92rem/1.3 var(--text); color: var(--gold-hell); margin: 4px 0 0; }
a.einheit:hover .einheit__mehr, a.expose-karte:hover .einheit__mehr { text-decoration: underline; text-underline-offset: .25em; }

/* Ausstattung: Bildermosaik wie Fassung 3 */
.mosaik { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(80px, 8vw, 112px); gap: 12px; }
.mosaik figure { margin: 0; position: relative; overflow: hidden; }
.mosaik img { width: 100%; height: 100%; object-fit: cover; }
.mosaik figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 14px; background: linear-gradient(0deg, rgba(8, 10, 10, .88) 0%, rgba(8, 10, 10, .5) 55%, rgba(8, 10, 10, 0) 100%); color: var(--creme); font: 400 .9rem/1.4 var(--text); }
.mosaik figcaption b { display: block; font: 400 1.25rem/1.15 var(--titel); margin-bottom: 2px; }
.m1 { grid-column: 1 / span 7; grid-row: span 5; }
.m2 { grid-column: 8 / span 5; grid-row: span 3; }
.m3 { grid-column: 8 / span 5; grid-row: span 2; }
.m4 { grid-column: 1 / span 4; grid-row: span 3; }
.m5 { grid-column: 5 / span 8; grid-row: span 3; }
/* Hinweis auf das Exposé unter dem Bildermosaik: ruhiger Abschluss im selben Abschnitt */
.expose-hinweis { text-align: center; max-width: 42em; margin: var(--luft) auto 0; }
.expose-hinweis h3 { font-size: var(--h3); margin-bottom: 10px; }
.expose-hinweis p { color: var(--ruhig); }
.expose-hinweis .knoepfe { justify-content: center; margin-top: 18px; }

/* Winter */
.winterbild__neben { padding-bottom: 6px; }
.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; border-top: 1px solid var(--linie); }
.werte div { padding: 16px 12px 0 0; display: flex; flex-direction: column; justify-content: space-between; }
.werte dt { font: 400 .84rem/1.3 var(--text); color: var(--ruhig); }
.werte dd { margin: 6px 0 0; font: 400 1.7rem/1 var(--titel); color: var(--gold-hell); }
.sommer__wege a { display: inline-block; margin-top: 10px; font-weight: 600; }

/* Nutzung in drei Spalten wie Fassung 3 */
.nutzung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--luft); margin-top: var(--luft); }
.nutzung > div { border-top: 2px solid var(--gold); padding-top: 20px; }
.nutzung h3 { font-size: var(--h3); margin-bottom: 6px; }
.nutzung p { color: var(--ruhig); }
.nutzung p.unter { font-weight: 600; color: var(--gold-hell); margin-bottom: 10px; }
.nutzung-fuss { margin-top: var(--luft); }
.nutzung-fuss .knoepfe { margin-top: 0; }

/* Ansprechpartner und Anfrage */
.anfrage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--luft) clamp(32px, 5vw, 72px); align-items: start; }
.anfrage__personen .titel { margin-bottom: 16px; }
.anfrage__text { max-width: 52ch; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 440px; margin-top: 28px; }
.duo figure { margin: 0; }
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo figcaption { font-size: .95rem; font-weight: 600; text-align: center; margin-top: 10px; }
.duo--klein { max-width: 300px; gap: 12px; margin-top: 22px; }
.duo--klein figcaption { font-size: .88rem; }
.kontaktdaten { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.kontaktdaten a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }

.formular { background: var(--weiss); color: var(--tinte); padding: clamp(22px, 3vw, 36px); border-top: 2px solid var(--gold); --farbe: var(--tinte); --ruhig: var(--grau); --linie: var(--linie-hell); --knopf-grund: var(--gruen); --knopf-schrift: var(--creme); --knopf-hover: var(--gruen-tief); }
.formular__titel { font-size: var(--h3); margin-bottom: 6px; }
.formular__titel:focus { outline: none; }
.formular__text { font-size: .98rem; color: var(--grau); margin-bottom: 20px; max-width: 56ch; }
.feld { display: grid; gap: 6px; margin-bottom: 16px; align-content: start; }
.feld label { font: 600 .9rem/1.3 var(--text); }
.feld label small { font-weight: 400; color: var(--grau); font-size: .88rem; }
.feld input, .feld select, .feld textarea { width: 100%; font: 400 1rem/1.4 var(--text); color: var(--tinte); background: #FFFFFF; border: 1px solid #A99F8C; border-radius: 2px; padding: 11px 12px; min-height: 46px; }
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gruen); }
.feld__hinweis { font-size: .84rem; line-height: 1.4; color: var(--grau); }
.felder-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.formular__hinweis { font-size: .86rem; color: var(--grau); margin: 2px 0 18px; }
.formular .knopf { min-width: min(100%, 280px); }
.formular__meldung { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--gold); background: var(--creme); font-size: .95rem; }
.formular__meldung[hidden] { display: none; }

/* Fuss */
.fuss { background: var(--gruen); color: var(--ruhig); font-size: .95rem; padding: 56px 0 32px; border-top: 2px solid var(--gold); }
.fuss__raster { width: var(--mass); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.fuss__raster--zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fuss .logo { width: 200px; height: auto; margin-bottom: 16px; }
.fuss h2 { font: 400 1.4rem/1.1 var(--titel); color: var(--creme); margin-bottom: 10px; }
.fuss h3 { font: 600 .8rem/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 10px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 4px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--gold-hell); }
.fuss__links { margin-top: 10px !important; }
.fuss__links a { color: var(--creme); }
.fuss .kontaktdaten { display: block; margin-top: 10px; }
.fuss__klein { width: var(--mass); margin: 36px auto 0; padding-top: 18px; border-top: 1px solid var(--linie); font-size: .84rem; color: #9DB0A7; }

/* Unterseiten */
.seitenkopf { background: var(--gruen); color: var(--farbe); padding: clamp(36px, 5.5vw, 72px) 0 clamp(34px, 4.5vw, 60px); }
.seitenkopf h1 { font-size: clamp(2.2rem, 4.6vw, 4.1rem); max-width: 15em; }
.seitenkopf .lead { margin-top: 18px; color: #DCE3DF; }
.pfad { font-size: .9rem; color: var(--ruhig); margin: 0 0 22px; }
.pfad a { text-decoration: none; }
.pfad a:hover { color: var(--gold-hell); }

.vergleich { width: 100%; border-collapse: collapse; font-size: 1rem; }
.vergleich th { text-align: left; font-weight: 600; color: var(--ruhig); font-size: .84rem; letter-spacing: .03em; padding: 0 14px 10px 0; border-bottom: 2px solid var(--gruen); vertical-align: bottom; }
.vergleich th small { display: block; font-weight: 400; letter-spacing: 0; }
.vergleich td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.vergleich td:first-child { font: 400 1.9rem/1 var(--titel); width: 2.4em; }
.vergleich .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vergleich a { font: 400 1.3rem/1.2 var(--titel); text-decoration: none; border-bottom: 1px solid var(--gold); }
.vergleich td:nth-child(2) { font: 400 1.2rem/1.2 var(--titel); }
/* Aussenfläche: Wert und Flächenart als zwei ausgerichtete Bereiche in derselben Zelle */
.flaeche { display: inline-grid; grid-template-columns: 5.6em 4.8em; column-gap: .8em; align-items: baseline; white-space: nowrap; }
.flaeche__wert { text-align: right; }
.flaeche__art { text-align: left; }

/* Detailseite, Aufteilung wie Fassung 3 */
.detail { background: var(--gruen); color: var(--farbe); padding: clamp(22px, 3vw, 36px) 0 var(--abschnitt); }
.detail--expose { padding-top: clamp(28px, 4vw, 48px); }
.detail__raster { width: var(--mass); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "bild panel" "argumente panel"; gap: 0 var(--luft); align-items: start; }
.detail__bild { grid-area: bild; }
.detail .panel { grid-area: panel; }
.detail__raster .argumente { grid-area: argumente; list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.detail__raster .argumente li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--linie); font-size: .98rem; }
.detail__raster .argumente li::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 2px; background: var(--gold); }
.detail__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.detail__bild button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.panel { border-top: 2px solid var(--gold); padding-top: 18px; }
.panel__nr { font: 600 .82rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hell); margin: 0; }
.panel h1 { font-size: clamp(2.2rem, 3.4vw, 3rem); margin: 8px 0 6px; }
.panel__lage { font-size: .95rem; color: var(--ruhig); margin: 0; }
.panel__kurz { font-size: 1.05rem; color: var(--gold-hell); margin: 12px 0 0; }
.fakten { display: grid; grid-template-columns: auto auto; gap: 8px 18px; margin: 18px 0 22px; font-size: .96rem; }
.fakten dt { color: var(--ruhig); }
.fakten dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.panel .knopf { width: 100%; }
.panel .knopf + .knopf { margin-top: 10px; }

.beschreibung { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--luft); align-items: start; }
.beschreibung .lead { font-family: var(--titel); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; margin-bottom: 20px; max-width: 26em; }
.beschreibung .titel { margin-bottom: 16px; }
.beschreibung__text { font-size: clamp(1.1rem, 1.4vw, 1.22rem); line-height: 1.6; max-width: var(--zeile); }
.beschreibung p { max-width: var(--zeile); }
.beschreibung .kasten .fussnote { margin-top: 14px; }
.argumente { align-self: center; }

.galerie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.galerie button { padding: 0; border: 0; background: var(--linie); cursor: zoom-in; grid-column: span 2; overflow: hidden; display: block; }
.galerie button.g-gross { grid-column: span 4; grid-row: span 2; }
.galerie button.g-3 { grid-column: span 3; }
.galerie button.g-6 { grid-column: span 6; }
.galerie button.g-6 img { aspect-ratio: 21 / 9; }
.galerie img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.galerie button:hover img { transform: scale(1.03); }
.galerie + .fussnote { margin-top: 14px; }

.plan-bereich { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--luft); align-items: start; }
.plan { margin: 0; }
.plan button { display: block; width: 100%; padding: 0; border: 1px solid var(--linie); background: var(--weiss); cursor: zoom-in; }
.plan img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
.plan figcaption { font-size: .9rem; color: var(--ruhig); margin-top: 8px; }
.raeume { width: 100%; border-collapse: collapse; margin-top: 16px; }
.raeume td { padding: 9px 0; border-bottom: 1px solid var(--linie); }
.raeume td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.raeume tr.summe td { font-weight: 600; border-bottom: 2px solid var(--gruen); }

.weitere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--luft); }
.schritte li { counter-increment: schritt; border-top: 2px solid var(--gold); padding-top: 16px; }
.schritte li::before { content: counter(schritt); display: block; font: 400 2.2rem/1 var(--titel); color: var(--akzent-text); margin-bottom: 10px; }
.schritte h3 { font-size: 1.4rem; margin-bottom: 6px; }
.schritte p { color: var(--ruhig); }

.rechtstext { max-width: 46em; }
.rechtstext h2 { font-size: 1.7rem; margin: 34px 0 10px; }
.offen { background: #F1E6C8; border-left: 3px solid var(--gold); padding: 2px 8px; color: var(--tinte); }

/* Anlage und Lage */
.winter { padding-bottom: var(--abschnitt); }
.winterbild img { width: 100%; height: clamp(360px, 58vh, 680px); object-fit: cover; object-position: 55% 55%; }
.winterbild__feld { position: relative; width: var(--mass); margin: calc(-1 * clamp(100px, 13vw, 180px)) auto 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--luft); align-items: end; }
.winterbild__text { background: var(--gruen); color: var(--farbe); padding: clamp(26px, 4vw, 52px); }
.winterbild__text .titel { margin-bottom: 14px; }
.sommer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(34px, 4.4vw, 62px); gap: 14px; }
.sommer figure { margin: 0; overflow: hidden; }
.sommer img { width: 100%; height: 100%; object-fit: cover; }
.s1 { grid-column: 1 / 8; grid-row: 1 / 9; }
.s2 { grid-column: 8 / 13; grid-row: 2 / 10; }
.s3 { grid-column: 2 / 7; grid-row: 10 / 15; }
.sommer__wege { grid-column: 8 / 13; grid-row: 11 / 15; align-self: end; }
.wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--linie); }
.wege div { padding: 14px 16px 0 0; }
.wege dt { font-size: .9rem; color: var(--ruhig); }
.wege dd { margin: 4px 0 0; font: 400 1.6rem/1.1 var(--titel); }

/* ------------------------------------------------------------------------------------------------
   Digitales Exposé */
.kopf--expose .kopf__innen { padding-bottom: 10px; }
.kopf__label { margin: 0; font: 600 .8rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hell); }
.kopf__wechsler { width: var(--mass); margin: 0 auto; padding: 0 0 14px; }
.wechsler { display: flex; flex-wrap: wrap; gap: 8px; }
.wechsler a { display: inline-flex; align-items: baseline; gap: .4em; min-height: 42px; padding: 8px 14px; border: 1px solid var(--linie); border-radius: 2px; text-decoration: none; font: 600 .92rem/1.2 var(--text); color: var(--creme); }
.wechsler a span { font-weight: 400; color: var(--flechte); }
.wechsler a:hover { border-color: var(--gold); }
.wechsler a[aria-current="page"] { border-color: var(--gold); background: rgba(184, 164, 124, .16); }
.wechsler a[aria-current="page"] span { color: var(--creme); }
.expose-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.expose-karte { display: flex; flex-direction: column; text-decoration: none; color: var(--farbe); background: var(--gruen); border-top: 2px solid var(--gold); }
a.expose-karte:hover { background: var(--gruen-tief); }
.expose-karte__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.expose-karte__inhalt { display: flex; flex-direction: column; padding: 20px 24px 22px; flex: 1; }
.expose-karte h3 { font-size: clamp(1.5rem, 2.1vw, 1.9rem); }
.expose-karte .einheit__lage { font-size: .88rem; margin: 0 0 6px; }
.expose-karte .einheit__lage span { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hell); margin-right: 10px; }
.expose-karte .einheit__mehr { margin: auto 0 0; padding-top: 16px; }
.expose-karte__kurz { margin: 8px 0 0; }
.expose-karte__zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linie); }
.expose-karte__zahlen dt { font-size: .84rem; color: var(--ruhig); }
.expose-karte__zahlen dd { margin: 2px 0 0; font: 400 1.25rem/1.15 var(--titel); font-variant-numeric: tabular-nums; }
.preisboxen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin-top: 8px; }
.preisbox { background: var(--weiss); border-top: 2px solid var(--gold); padding: 20px 24px; }
.preisbox__wer { font: 600 .84rem/1.3 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grau); margin: 0 0 8px; }
.preisbox__betrag { font: 400 clamp(1.8rem, 3vw, 2.4rem)/1.05 var(--titel); color: var(--gruen); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.preisbox__basis { font-size: .95rem; color: var(--grau); margin: 0; }
.preisgrundlage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--luft); }
.preisgrundlage > div { background: var(--weiss); border-top: 2px solid var(--gold); padding: 18px 20px; }
.preisgrundlage h3 { font-size: 1.3rem; margin-bottom: 8px; }
.preisgrundlage p { font-size: .98rem; color: var(--grau); }
.vergleich--preise, .vergleich--kosten { margin-top: 8px; }
.kostenliste { margin: 0; }
.kostenliste div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.kostenliste dd { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.unterlagen a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }

/* Leuchtkasten */
/* Bildansicht (Fassung 9): Kopf mit Zähler und Schliessen, Bild mit Bildtext, Pfeile links und rechts, Vorschaubilder unten */
.leuchtkasten { border: 0; padding: 0; margin: 0; background: rgba(4, 16, 12, .97); color: var(--creme); width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh; overflow: hidden; }
.leuchtkasten[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.leuchtkasten::backdrop { background: rgba(4, 16, 12, .97); }
.leuchtkasten__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(12px, 3vw, 28px); }
.leuchtkasten__zaehler { margin: 0; font: 600 .95rem/1 var(--text); letter-spacing: .06em; color: var(--gold-hell); font-variant-numeric: tabular-nums; }
.leuchtkasten__zu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; background: rgba(245, 241, 232, .08); color: var(--creme); border: 1px solid var(--gold); font: 600 .95rem/1 var(--text); cursor: pointer; }
.leuchtkasten__zu span { font-size: 1.05rem; line-height: 1; }
.leuchtkasten__buehne { position: relative; margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 0 clamp(64px, 7vw, 100px); }
.leuchtkasten__bild { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.leuchtkasten__text { margin: 0; padding: 10px 0 2px; min-height: 2.2em; text-align: center; font-size: .92rem; color: var(--flechte); }
.leuchtkasten__zurueck, .leuchtkasten__vor { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; padding: 0; background: rgba(4, 16, 12, .55); color: var(--creme); border: 1px solid var(--gold); font: 400 2.1rem/1 var(--titel); cursor: pointer; }
.leuchtkasten__zurueck { left: clamp(8px, 1.6vw, 22px); }
.leuchtkasten__vor { right: clamp(8px, 1.6vw, 22px); }
.leuchtkasten__zu:hover, .leuchtkasten__zurueck:hover, .leuchtkasten__vor:hover { background: rgba(205, 189, 152, .2); }
.leuchtkasten__leiste { display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; padding: 10px clamp(12px, 3vw, 28px) 16px; scrollbar-width: thin; }
.leuchtkasten__vorschau { flex: 0 0 auto; width: 88px; height: 58px; padding: 0; border: 1px solid transparent; background: rgba(245, 241, 232, .06); opacity: .5; cursor: pointer; transition: opacity .2s ease; }
.leuchtkasten__vorschau img { display: block; width: 100%; height: 100%; object-fit: cover; }
.leuchtkasten__vorschau:hover { opacity: .85; }
.leuchtkasten__vorschau[aria-current="true"] { opacity: 1; border-color: var(--gold); }
.leuchtkasten--einzeln .leuchtkasten__zurueck, .leuchtkasten--einzeln .leuchtkasten__vor, .leuchtkasten--einzeln .leuchtkasten__leiste { display: none; }
html.ohne-scroll { overflow: hidden; }

/* Fassung 9: kurzer Ablauf im Kontaktbereich, Hinweis zur Nutzung, Orientierung auf der Lodges-Seite */
.ablauf-kurz { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie); max-width: 52ch; }
.ablauf-kurz__titel { margin: 0 0 8px; font: 600 .8rem/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ruhig); }
.ablauf-kurz ol { list-style: none; counter-reset: kurz; margin: 0; padding: 0; }
.ablauf-kurz li { counter-increment: kurz; position: relative; padding: 5px 0 5px 30px; color: var(--ruhig); font-size: .96rem; }
.ablauf-kurz li::before { content: counter(kurz); position: absolute; left: 0; top: 3px; font: 400 1.2rem/1.2 var(--titel); color: var(--akzent-text); }
.ablauf-kurz b { color: var(--farbe); font-weight: 600; }
.nutzung-hinweis { margin-top: var(--luft); max-width: 75ch; padding-left: 16px; border-left: 2px solid var(--gold); color: var(--ruhig); }
.nutzung-hinweis b { color: var(--farbe); }
.passt { margin-top: var(--luft); padding-top: 20px; border-top: 2px solid var(--gold); }
.passt__titel { font-size: var(--h3); margin-bottom: 14px; }
.passt ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--luft); }
.passt li { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.passt a { display: inline-block; font: 400 1.25rem/1.2 var(--titel); color: var(--tinte); margin-bottom: 4px; }
.passt span { display: block; color: var(--ruhig); }
.plan-text { color: var(--ruhig); margin-top: 6px; }

/* Fassung 10: FAQ mit Klappfragen vor dem Kontaktbereich. Titel links, Fragen rechts; auf schmalen Bildschirmen untereinander. */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--luft) clamp(32px, 5vw, 72px); align-items: start; }
.faq__liste { border-top: 2px solid var(--gold); }
.faq__eintrag { border-bottom: 1px solid var(--linie); }
.faq__eintrag summary { list-style: none; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; font: 400 clamp(1.12rem, 1.5vw, 1.3rem)/1.3 var(--titel); color: var(--tinte); }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__eintrag summary::after { content: ""; flex: none; width: 34px; height: 34px; border: 1px solid var(--gold); background: linear-gradient(var(--gruen), var(--gruen)) center / 12px 1.5px no-repeat, linear-gradient(var(--gruen), var(--gruen)) center / 1.5px 12px no-repeat; transition: background-color .2s ease; }
.faq__eintrag[open] summary::after { border-color: var(--gruen); background: linear-gradient(var(--creme), var(--creme)) center / 12px 1.5px no-repeat, var(--gruen); }
.faq__eintrag summary:hover { color: var(--gruen); }
.faq__eintrag summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq__antwort { padding: 0 54px 20px 0; max-width: 64ch; }
.faq__antwort p { color: var(--ruhig); }
.faq__link { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.kasten p + .fussnote { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------------------------------------------------------
   Kleinere Bildschirme */
@media (max-width: 1080px) {
  .winterbild__feld { grid-template-columns: minmax(0, 1fr); }
  .weitere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preisgrundlage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .kopfzeile, .anfrage, .detail__raster, .beschreibung, .plan-bereich, .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .detail__raster { grid-template-areas: "bild" "panel" "argumente"; gap: 22px; }
  .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .schritte, .drei-spalten, .wege { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nutzung { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .haus { --traufe: 10px; --innen: clamp(12px, 3vw, 20px); --abstand: 12px; }
  .geschoss { padding-bottom: 20px; }
  .geschoss__name { padding: 20px 0 14px; }
  .anfrage__personen { display: grid; grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .menue-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: transparent; color: inherit; border: 1px solid var(--gold); border-radius: 2px; font: 500 .95rem/1 var(--text); cursor: pointer; }
  .kopf__innen { position: relative; padding: 14px 0; }
  .nav { display: none; position: absolute; top: 100%; left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); flex-direction: column; align-items: stretch; gap: 0; background: var(--gruen); padding: 8px var(--rand) 22px; border-bottom: 2px solid var(--gold); }
  .nav.offen-nav { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .nav .knopf { margin-top: 16px; border-bottom: 1px solid var(--gold); }
  .knoepfe .knopf { flex: 1 1 100%; }
  .geschoss__einheiten, .weitere, .expose-karten { grid-template-columns: minmax(0, 1fr); }
  .geschoss__reihe { grid-template-columns: minmax(0, 1fr); }
  .geschoss__reihe .verkauft-karte__bild { flex: none; aspect-ratio: 3 / 1; min-height: 0; }
  .verkauft-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geschoss__einheiten .einheit__bild img { aspect-ratio: 16 / 10; }
  .mosaik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; }
  .mosaik figure { grid-column: span 1; grid-row: auto; aspect-ratio: 1 / 1; }
  .mosaik .m1, .mosaik .m4, .mosaik .m5 { grid-column: span 2; aspect-ratio: 4 / 3; }
  .mosaik figcaption { padding: 32px 12px 10px; font-size: .84rem; }
  .mosaik figcaption b { font-size: 1.05rem; }
  .felder-zwei { grid-template-columns: minmax(0, 1fr); }
  .fuss__raster, .fuss__raster--zwei { grid-template-columns: minmax(0, 1fr); }
  .detail__raster .argumente { grid-template-columns: minmax(0, 1fr); }
  .vergleich thead { display: none; }
  .vergleich tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .vergleich td { border: 0; padding: 0; }
  .vergleich td:first-child { grid-row: span 7; }
  .vergleich .zahl { text-align: left; white-space: normal; }
  .vergleich td[data-label]::before { content: attr(data-label) " "; color: var(--ruhig); }
  .vergleich td.zahl--flaeche::before { content: none; }
  .flaeche { grid-template-columns: auto auto; }
  .galerie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .leuchtkasten__buehne { padding: 0 6px; }
  .leuchtkasten__zurueck, .leuchtkasten__vor { width: 44px; height: 44px; font-size: 1.8rem; }
  .leuchtkasten__zurueck { left: 4px; }
  .leuchtkasten__vor { right: 4px; }
  .leuchtkasten__vorschau { width: 64px; height: 44px; }
  .passt ul { grid-template-columns: minmax(0, 1fr); }
  .faq__antwort { padding-right: 0; }
  .galerie button, .galerie button.g-gross, .galerie button.g-3, .galerie button.g-6 { grid-column: span 1; grid-row: auto; }
  .galerie button.g-gross { grid-column: span 2; }
  .galerie button.g-6 img { aspect-ratio: 3 / 2; }
  .preisboxen { grid-template-columns: minmax(0, 1fr); }
  .winterbild img { height: 48vh; }
  .winterbild__feld { margin-top: -48px; width: 100%; }
  .werte dd { font-size: 1.4rem; }
  .sommer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; }
  .s1, .s2, .s3, .sommer__wege { grid-row: auto; }
  .s1, .sommer__wege { grid-column: span 2; }
  .s2, .s3 { grid-column: span 1; aspect-ratio: 3 / 4; }
  .s1 { aspect-ratio: 4 / 3; }
  .kasten .liste li span, .unterlagen li span { float: none; display: block; margin: 2px 0 0; }
}
@media (max-width: 599px) {
  .held .dachzeile { font-size: .74rem; letter-spacing: .1em; gap: 10px; }
  .held .dachzeile::before { width: 20px; }
  .held__bildbox { height: min(83.333vw, max(calc(100svh - 330px), 240px)); }
  .held__bild { object-position: 46% 0; }
  .schritte, .drei-spalten { grid-template-columns: minmax(0, 1fr); }
  .duo { max-width: none; }
  .duo--klein { max-width: 280px; }
  .expose-karte__inhalt { padding: 18px 18px 20px; }
}

/* Fassung 14: Schutzfeld im Formular, für Menschen unsichtbar */
.formular__falle { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Fassung 14: Vergleichstabelle auf Tablets (721 bis 980 px) etwas kompakter, damit sie nicht über den Rand läuft */
@media (min-width: 721px) and (max-width: 980px) {
  .vergleich th, .vergleich td { padding-right: 10px; }
  .vergleich { font-size: .95rem; }
  .vergleich td:first-child { width: 1.4em; font-size: 1.6rem; }
  .vergleich td:nth-child(2), .vergleich a { font-size: 1.1rem; }
  .flaeche { grid-template-columns: auto auto; column-gap: .45em; }
}