/* Ferienhof Ommen: Hofplan-Welt. Weidegrün trägt die Flächen, Klinkerrot die Häuser und die eine Handlung. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("fonts/familjen-grotesk-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
/* Atkinson zeichnet die Null mit Schrägstrich; Ziffern kommen deshalb aus Familjen Grotesk. */
@font-face {
  font-family: "Ommen Ziffern";
  src: url("fonts/familjen-grotesk-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --grund: #eef2ec;
  --papier: #ffffff;
  --tinte: #17261d;
  --tinte-2: #3d5246;
  --linie: #c9d4cb;
  --weide: #2e5e3b;
  --weide-feld: #376b45;
  --weide-dunkel: #1f4429;
  --graben: #5d9a6a;
  --klinker: #a3412a;
  --klinker-dunkel: #7e2f1d;
  --klinker-hell: #f3ddd5;
  --weiss: #ffffff;
  --platz: #c3cbc0;
  --fokus: #a3412a;

  --schrift-titel: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Ommen Ziffern", "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --zeichen-flaeche: var(--klinker-hell);

  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2.5rem;
  --raum-5: 4rem;
  --breite: 74rem;
  --rund: 10px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 1.125rem/1.6 var(--schrift-text);
}

::selection { background: var(--klinker); color: var(--weiss); }
html { scrollbar-color: var(--weide) var(--grund); }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--raum-2);
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 700; margin-top: var(--raum-4); }
h3 { font-size: 1.3rem; font-weight: 600; }
p { margin: 0 0 var(--raum-2); max-width: 68ch; }

a { color: var(--weide); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--klinker-dunkel); }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprunglink {
  position: absolute;
  left: var(--raum-2);
  top: -4rem;
  z-index: 50;
  background: var(--tinte);
  color: var(--weiss);
  padding: var(--raum-1) var(--raum-2);
  border-radius: var(--rund);
}
.sprunglink:focus { top: var(--raum-1); color: var(--weiss); }
.sprunglink:hover { color: var(--weiss); }

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 2px solid var(--weide);
  border-radius: 999px;
  background: var(--papier);
  color: var(--weide);
  font: 600 1.05rem/1 var(--schrift-titel);
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.knopf:active { transform: scale(0.97); }
.knopf-primaer { background: var(--klinker); border-color: var(--klinker); color: var(--weiss); }
.knopf-hell { background: transparent; border-color: currentColor; color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--weide); color: var(--weiss); }
  .knopf-primaer:hover { background: var(--klinker-dunkel); border-color: var(--klinker-dunkel); color: var(--weiss); }
}
button.knopf { cursor: pointer; }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); align-items: center; max-width: none; }
.textlink { font-weight: 600; }

/* Kopf */
.kopf { background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-1) var(--raum-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1) var(--raum-3);
}
.marke-hof {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--klinker);
  text-decoration: none;
  min-height: 48px;
}
.marke-hof-zeichen { width: 2.6rem; height: auto; }
.marke-hof-name { font: 700 1.2rem/1.1 var(--schrift-titel); color: var(--tinte); letter-spacing: -0.01em; }
.hauptmenue { margin-left: auto; }
.hauptmenue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.hauptmenue a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.7rem;
  color: var(--tinte);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
}
.hauptmenue a:hover { background: var(--grund); color: var(--tinte); }
.hauptmenue a[aria-current="page"] { color: var(--klinker-dunkel); text-decoration: underline; text-decoration-thickness: 0.12em; }
.kopf-aktionen { display: flex; gap: var(--raum-1); align-items: center; margin: 0; max-width: none; }
.kopf-telefon {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.5rem;
  font-weight: 700;
  color: var(--weide);
  text-decoration: none;
  white-space: nowrap;
}

.mobilleiste { display: none; }

/* Kopfzeile bleibt beim Scrollen oben (Michael, 24.10.2026); Sprungziele landen unter ihr. */
.kopf { position: sticky; top: 0; z-index: 45; }
html { scroll-padding-top: 6rem; }

/* Wohnungsseite: „Diese Wohnung anfragen“ wandert rechts unten mit, über dem Knopf „Nach oben“. */
.anfrage-schwebend {
  position: fixed;
  right: var(--raum-2);
  bottom: calc(var(--raum-2) + 3rem + var(--raum-1) + env(safe-area-inset-bottom));
  z-index: 41;
  box-shadow: 0 6px 18px rgb(23 38 29 / 0.28);
}

/* Computer: Logo, Menü, Telefon und „Anfragen“ in einer Reihe (Michael, 24.10.2026). Wird es eng,
   entfällt zuerst die Telefonnummer; sie steht auf Kontakt und Startseite. */
@media (min-width: 64rem) {
  .kopf-innen { flex-wrap: nowrap; gap: var(--raum-2); }
  .hauptmenue ul { flex-wrap: nowrap; gap: 0; }
  .hauptmenue a { padding: 0 0.5rem; white-space: nowrap; }
  .kopf-aktionen { flex-shrink: 0; }
}
@media (min-width: 75rem) {
  .marke-hof-name { white-space: nowrap; }
}
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .kopf-telefon { display: none; }
}

@media (max-width: 47.99rem) {
  .kopf-innen { gap: 0; }
  .hauptmenue { margin-left: 0; width: 100%; }
  /* Menü in einer wischbaren Zeile, damit die feste Kopfzeile niedrig bleibt. */
  .hauptmenue ul { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--raum-2)); padding: 0 var(--raum-1); }
  .hauptmenue ul::-webkit-scrollbar { display: none; }
  .hauptmenue a { white-space: nowrap; padding: 0 0.55rem; min-height: 44px; }
  .kopf-aktionen { display: none; }
  .anfrage-schwebend { display: none; }
  .mobilleiste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--raum-1);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    padding: var(--raum-1) var(--raum-2) calc(var(--raum-1) + env(safe-area-inset-bottom));
    background: var(--papier);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 18px rgb(23 38 29 / 0.12);
  }
  body { padding-bottom: 5rem; }
}

/* Inhalt */
main, #inhalt { display: block; }
.textseite, .band, .wohnung, .wohnungen, .preise, .anfrage {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-4) var(--raum-2);
}
.einleitung { font-size: 1.25rem; color: var(--tinte-2); }
.spalten { display: grid; gap: var(--raum-3); }
@media (min-width: 48rem) { .spalten { grid-template-columns: 1fr 1fr; } }
.entwurf { background: var(--klinker-hell); padding: var(--raum-2); border-radius: var(--rund); }

/* Startseite: der Hof von oben */
.start-plan {
  background: var(--weide);
  color: var(--weiss);
  padding: var(--raum-4) var(--raum-2) var(--raum-5);
  /* Der Hofplan füllt den ersten Bildschirm, darunter beginnt erst der Gruß (Michael, 27.10.2026). 4rem = Kopfzeile. */
  min-height: calc(100svh - 4rem);
}
.start-plan.start-rundgang { min-height: 0; }
.start-kopf, .hofplan { max-width: var(--breite); margin: 0 auto; }
.start-kopf h1 { color: var(--weiss); max-width: 18ch; }
.start-satz { font-size: 1.2rem; max-width: 52ch; color: #e3efe5; }
.start-gruss { max-width: 52ch; color: #e3efe5; font-style: italic; }
.start-plan .knopf-hell { color: var(--weiss); }
.start-plan .personenwahl { color: var(--weiss); border-color: rgb(255 255 255 / 0.35); }

.hofplan-bild { margin: var(--raum-3) 0 0; }

/* Breite Bildschirme: Der Plan ist die Fläche des Bands. Eingepasst wird er nur rechts vom Textkasten,
   die Wiese läuft darunter weiter (Kulisse über den Bildausschnitt hinaus gezeichnet). So überdeckt der
   Kasten bei keiner Bildschirmbreite ein Gebäude. */
@media (min-width: 64rem) {
  .start-plan { padding: 0 0 var(--raum-5); overflow: clip; }
  .start-plan .hofplan { display: contents; }
  .start-plan .hofplan-bild {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    margin: 0 0 0 calc(max(var(--raum-2), (100% - var(--breite)) / 2 + var(--raum-2)) + min(26rem, 100% - 2rem) + var(--raum-3));
    /* Die Wiese darf nur nach links unter den Textkasten weiterlaufen, nicht nach unten in den Rundgang. */
    clip-path: inset(0 0 0 -100vw);
  }
  .start-plan .hofplan-rahmen { overflow: visible; }
  .start-plan .hofplan-svg { min-width: 0; height: clamp(34rem, 44vw, 48rem); aspect-ratio: auto; overflow: visible; }
  .start-plan .hofplan-hinweis { display: none; }
  .start-plan .hofplan-stand { text-align: right; margin: var(--raum-1) var(--raum-2) 0 0; }
  .start-plan { display: grid; grid-template-columns: 100%; align-content: center; }
  .start-kopf {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    position: relative;
    z-index: 1;
    width: min(26rem, 100% - 2rem);
    margin: var(--raum-3) 0 0 max(var(--raum-2), calc((100% - var(--breite)) / 2 + var(--raum-2)));
    padding: var(--raum-2) var(--raum-2) var(--raum-2) 0;
    background: color-mix(in srgb, var(--weide) 90%, transparent);
    box-shadow: -40px 0 0 color-mix(in srgb, var(--weide) 90%, transparent);
  }
  .start-kopf h1 { font-size: clamp(2rem, 1rem + 1.8vw, 2.9rem); }
  .start-kopf .start-satz { font-size: 1.1rem; }
  .start-kopf .personenwahl { margin: var(--raum-1) 0; }
  .start-plan .rundgang-titel { grid-row: 2; grid-column: 1; }
  .start-plan .rundgang { grid-row: 3; grid-column: 1; }
  .start-plan .rundgang-titel, .start-plan .rundgang {
    width: min(var(--breite) - 2 * var(--raum-2), 100% - 2 * var(--raum-2));
    margin-left: auto;
    margin-right: auto;
  }
  .start-plan .rundgang-titel { margin-top: var(--raum-4); }
}
.hofplan-rahmen { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--weiss) var(--weide-dunkel); }
.hofplan-svg { display: block; width: 100%; min-width: 52rem; height: auto; aspect-ratio: 1500 / 1180; }
.hofplan-hinweis { font-size: 0.95rem; color: #d3e4d6; margin: var(--raum-1) 0 0; }
.hofplan-stand { font-size: 0.95rem; color: #d3e4d6; margin-top: var(--raum-1); }

.hp-grund { fill: var(--weide); }
.hp-feld { fill: var(--weide-feld); }
.hp-acker { fill: #7a5f3e; }
.hp-furche { stroke: #66502f; stroke-width: 6; }
.hp-bolzplatz { fill: #3f8150; }
.hp-spielfeld { fill: none; stroke: var(--weiss); stroke-width: 3; opacity: 0.7; }
.hp-tor { fill: none; stroke: var(--weiss); stroke-width: 4; }
.hp-weide-flaeche { fill: none; }
.hp-graben { fill: none; stroke: var(--graben); stroke-width: 6; }
.hp-strasse, .hp-einfahrt { fill: none; stroke: var(--platz); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.hp-einfahrt { stroke-width: 26; }
.hp-pflaster { fill: var(--platz); }
.hp-stellplatz { stroke: var(--weiss); stroke-width: 3; }
.hp-ring { fill: none; stroke: var(--platz); stroke-width: 28; }
.hp-insel { fill: var(--graben); }
.hp-jungvieh { fill: #3a7a49; stroke: var(--weiss); stroke-width: 3; stroke-dasharray: 10 8; opacity: 0.9; }
.hp-gemuese { fill: #6b5a3c; }
.hp-beetreihe { stroke: #7fb069; stroke-width: 7; stroke-linecap: round; }
.hp-folientunnel { fill: #b9d7bf; stroke: var(--weiss); stroke-width: 2; }
.hp-kulisse-text { font: 600 20px var(--schrift-titel); fill: var(--weiss); paint-order: stroke; stroke: var(--weide-dunkel); stroke-width: 6px; }
.hp-blume { fill: var(--klinker-hell); }
.hp-wasser { fill: #a9cfe0; }
.hp-sand { fill: #e6d3a3; }
.hp-holz { fill: #c8a46a; stroke: var(--weiss); stroke-width: 3; }
.hp-first { stroke: #8a6a3a; stroke-width: 3; }
.hp-stufe { stroke: var(--weide-dunkel); stroke-width: 2; }
.hp-nebenweg { opacity: 0.7; }
.hp-klinkerweg { fill: none; stroke: var(--platz); stroke-width: 13; stroke-linecap: round; }
.hp-beet { fill: var(--graben); }
.hp-beet-blume { fill: #e8642c; }
.hp-asphaltweg { fill: none; stroke: var(--platz); stroke-width: 18; stroke-linecap: round; }
.hp-terrasse { fill: var(--klinker-hell); }
.hp-sitz { fill: var(--weide-dunkel); }
.hp-schmalweg { fill: none; stroke: var(--platz); stroke-width: 9; stroke-linecap: round; }
.hp-pflasterweg { fill: none; stroke: var(--platz); stroke-width: 14; stroke-linecap: round; }
.hp-fussweg { fill: none; stroke: var(--platz); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.hp-platz { fill: var(--platz); }
.hp-baum { fill: var(--weide-dunkel); }
.hp-privat { fill: #8c8f86; }
.hp-parken rect { fill: var(--weiss); stroke: var(--weide-dunkel); stroke-width: 4; }
.hp-parken text { font: 700 36px var(--schrift-titel); fill: var(--weide-dunkel); }
.hp-haus, .hp-stall { fill: var(--klinker); stroke: var(--weiss); stroke-width: 4; stroke-linejoin: round; }
.hp-stall, .hp-scheune { fill: var(--klinker-dunkel); }
.hp-scheune { stroke: var(--weiss); stroke-width: 4; stroke-linejoin: round; }
.hp-spiel { fill: var(--graben); }
.hp-trampolin { fill: var(--weide-dunkel); stroke: var(--weiss); stroke-width: 4; }
.hp-linie { fill: none; stroke: var(--weiss); stroke-width: 7; stroke-dasharray: 2 18; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.hp-nummer { fill: var(--weiss); stroke: var(--weide-dunkel); stroke-width: 5; }
.hp-nummer-text { font: 700 34px var(--schrift-titel); fill: var(--weide); }
.hp-zeichen { color: var(--weiss); }
.hp-zeichen path, .hp-zeichen ellipse, .hp-zeichen circle, .hp-zeichen rect { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hp-zeichen .f { fill: var(--weide-dunkel); stroke: none; }
.hp-label {
  font: 700 38px var(--schrift-titel);
  fill: var(--weiss);
  paint-order: stroke;
  stroke: var(--weide-dunkel);
  stroke-width: 10px;
  stroke-linejoin: round;
}
.hp-ort:focus-visible { outline: none; }
.hp-ort:focus-visible .hp-label, .hp-ort:hover .hp-label { fill: var(--klinker-hell); text-decoration: underline; }

.marke { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
.marke-treffer { fill: transparent; }
.marke-grund { fill: var(--weiss); stroke: var(--klinker-dunkel); stroke-width: 3; }
.marke-text { font: 700 30px var(--schrift-titel); fill: var(--klinker-dunkel); }
.marke-zeichen path { fill: none; stroke: var(--klinker-dunkel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.marke-zeichen .f { fill: var(--klinker-hell); stroke: none; }
.marke:focus-visible .marke-zeichen path, .marke:hover .marke-zeichen path { stroke: var(--weiss); }
.marke:focus-visible .marke-zeichen .f, .marke:hover .marke-zeichen .f { fill: var(--klinker-dunkel); }
.marke:focus-visible { outline: none; }
.marke:focus-visible .marke-grund, .marke:hover .marke-grund { fill: var(--klinker); }
.marke:focus-visible .marke-text, .marke:hover .marke-text { fill: var(--weiss); }


.rundgang-titel { color: var(--weiss); }
.rundgang {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ort;
  position: relative;
}
.rundgang::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 0.5rem;
  bottom: 0.5rem;
  border-left: 4px dotted rgb(255 255 255 / 0.7);
}
.ort { position: relative; padding: 0 0 var(--raum-3) 3.2rem; scroll-margin-top: var(--raum-3); }
.ort::before {
  counter-increment: ort;
  content: counter(ort);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--weide);
  font: 700 1.1rem/1 var(--schrift-titel);
}
.ort h3 { color: var(--weiss); padding-top: 0.35rem; }
.ort p { color: #e3efe5; }
.ort:target h3 { text-decoration: underline; text-decoration-color: var(--klinker-hell); text-underline-offset: 0.2em; }

/* Personenwahl und Filter (ein Bedienelement für Plan und Liste) */
.personenwahl {
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: var(--raum-1) var(--raum-2) var(--raum-2);
  margin: var(--raum-2) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  align-items: center;
}
.personenwahl legend { font-weight: 700; padding: 0 0.3rem; }
.personenwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.personenwahl label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.9rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.personenwahl label:active { transform: scale(0.97); }

/* Handy: Startseite kompakter (Michael, 24.10.2026). Personenwahl in einer Reihe; „Anrufen“ steht schon
   in der Leiste unten und entfällt im Kopf. */
@media (max-width: 47.99rem) {
  .start-plan { padding-top: var(--raum-2); }
  .start-kopf h1 { font-size: 1.9rem; }
  .start-kopf .start-satz { font-size: 1rem; }
  .start-kopf .aktionen .knopf-hell { display: none; }
  .personenwahl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; padding: var(--raum-1); margin: var(--raum-1) 0 var(--raum-2); }
  .personenwahl label { min-width: 0; min-height: 44px; padding: 0; }
}
.personenwahl input:checked + label { background: var(--weide); border-color: var(--weide); color: var(--weiss); }
.start-plan .personenwahl input:checked + label { background: var(--weiss); border-color: var(--weiss); color: var(--weide); }
.personenwahl input:focus-visible + label { outline: 3px solid var(--fokus); outline-offset: 3px; }
.start-plan .personenwahl input:focus-visible + label { outline-color: var(--weiss); }

/* Nicht passende Marken bleiben lesbar (weiß auf Grün, über 3 : 1), nur ohne Fläche und gestrichelt. */
.filter:has(#personen-2:checked) .marke:not([data-passt~="2"]) .marke-grund,
.filter:has(#personen-3:checked) .marke:not([data-passt~="3"]) .marke-grund,
.filter:has(#personen-4:checked) .marke:not([data-passt~="4"]) .marke-grund,
.filter:has(#personen-5:checked) .marke:not([data-passt~="5"]) .marke-grund,
.filter:has(#personen-6:checked) .marke:not([data-passt~="6"]) .marke-grund { fill: transparent; stroke: var(--weiss); stroke-dasharray: 8 8; }
.filter:has(#personen-2:checked) .marke:not([data-passt~="2"]) .marke-text,
.filter:has(#personen-3:checked) .marke:not([data-passt~="3"]) .marke-text,
.filter:has(#personen-4:checked) .marke:not([data-passt~="4"]) .marke-text,
.filter:has(#personen-5:checked) .marke:not([data-passt~="5"]) .marke-text,
.filter:has(#personen-6:checked) .marke:not([data-passt~="6"]) .marke-text { fill: var(--weiss); font-weight: 400; }
.filter:has(#personen-2:checked) .kachel:not([data-passt~="2"]),
.filter:has(#personen-3:checked) .kachel:not([data-passt~="3"]),
.filter:has(#personen-4:checked) .kachel:not([data-passt~="4"]),
.filter:has(#personen-5:checked) .kachel:not([data-passt~="5"]),
.filter:has(#personen-6:checked) .kachel:not([data-passt~="6"]) { display: none; }

/* Kacheln */
.kacheln { display: grid; gap: var(--raum-2); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin: var(--raum-2) 0; }
.kachel {
  position: relative;
  background: var(--papier);
  color: var(--tinte);
  border-radius: var(--rund);
  padding: var(--raum-2);
  box-shadow: 0 2px 6px rgb(23 38 29 / 0.10), 0 10px 24px rgb(23 38 29 / 0.08);
  transition: opacity 200ms var(--ease-out);
}
.kachel-bild { margin: calc(-1 * var(--raum-2)) calc(-1 * var(--raum-2)) var(--raum-2); }
.kachel-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rund) var(--rund) 0 0; }
.kachel-titel { margin: 0 0 0.25rem; font-size: 1.35rem; }
.kachel-titel a { color: var(--tinte); text-decoration: none; }
.kachel-titel a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rund); }
.kachel:has(a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.kachel-titel a:focus-visible { outline: none; }
.kachel p { margin: 0; color: var(--tinte-2); }
.fakt { white-space: nowrap; }
.merkmal { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0; font-weight: 600; color: var(--weide); }
.merkmal .zeichen { width: 1.6rem; height: 1.6rem; }
.kachel .kachel-preis { margin-top: var(--raum-1); color: var(--klinker-dunkel); font-weight: 700; }

/* Bänder der Startseite */
.band h2:first-child { margin-top: 0; }
.band-haeuser { border-top: 1px solid var(--linie); }
.band-henning {
  max-width: none;
  background: var(--weide-dunkel);
  color: var(--weiss);
}
.band-henning > * { max-width: calc(var(--breite) - 2 * var(--raum-2)); margin-left: auto; margin-right: auto; }
.band-henning .knopf-primaer { background: var(--klinker); border-color: var(--klinker); color: var(--weiss); }
.band-henning .knopf { border-color: var(--weiss); color: var(--weiss); background: transparent; }
.band-henning .unterschrift { font: 700 1.4rem/1.2 var(--schrift-titel); }
.partnerhof { max-width: var(--breite); margin: 0 auto; padding: var(--raum-4) var(--raum-2); border-top: 1px solid var(--linie); }
.partnerhof h2 { margin-top: 0; }

/* Zeichen */
.zeichen { width: 1.4em; height: 1.4em; flex: none; vertical-align: -0.3em; color: var(--weide); }
.zeichen path, .zeichen ellipse, .zeichen circle, .zeichen rect { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zeichen .f { fill: var(--zeichen-flaeche); stroke: none; }
.ort-zeichen { display: flex; gap: 0.5rem; margin: 0 0 0.5rem; }
.ort-zeichen .zeichen { width: 2.4rem; height: 2.4rem; color: var(--weiss); --zeichen-flaeche: var(--weide-feld); }
.ort-fotos { display: grid; gap: var(--raum-1); grid-template-columns: repeat(auto-fill, minmax(min(11rem, 45%), 1fr)); max-width: 46rem; margin: 0 0 var(--raum-2); }
.ort-fotos figure { margin: 0; }
.ort-video { max-width: 46rem; margin: 0 0 var(--raum-2); }
.ort-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--rund); background: var(--weide-dunkel); }
.ort-video-hoch { max-width: 20rem; }
.ort-video-hoch video { aspect-ratio: 9 / 16; }
.ort-video figcaption { font-size: 0.95rem; color: #d3e4d6; margin-top: var(--raum-1); }
.ort-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rund); }
/* Ausstattung: Zeichen und Punkt stehen in derselben Spalte, der Text beginnt überall an derselben Kante. */
.ausstattung li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.4rem; align-items: start; }
.ausstattung li:not(.mit-zeichen)::before { content: ""; width: 0.4rem; height: 0.4rem; margin: 0.65em auto 0; border-radius: 50%; background: var(--weide); }
.ausstattung li .zeichen { width: 1.6rem; height: 1.6rem; vertical-align: 0; }

/* Hoffotos */
.hoffotos { display: grid; gap: var(--raum-1); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin: var(--raum-3) 0; }
.hoffotos figure, .hoffoto { margin: 0; }
.hoffotos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rund); }
.hoffoto { margin: var(--raum-3) 0; }
.jahreszeiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--raum-2); }
.jahreszeiten .hoffoto { margin: 0; }
.hof-foto { margin: 0 0 var(--raum-2); max-width: 46rem; }
.hof-foto img { display: block; width: 100%; height: auto; border-radius: var(--rund); }
.hoffoto img { display: block; width: 100%; height: auto; border-radius: var(--rund); }
.hoffoto figcaption { font-size: 0.95rem; color: var(--tinte-2); margin-top: var(--raum-1); }

/* Fragen */
.fragen { max-width: var(--breite); margin: 0 auto; padding: var(--raum-4) var(--raum-2); }
.wohnung .fragen, .textseite .fragen { padding-left: 0; padding-right: 0; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  list-style: none;
  font: 600 1.15rem/1.3 var(--schrift-titel);
  cursor: pointer;
  padding: var(--raum-1) 0;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--weide);
  transition: transform 200ms var(--ease-out);
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { padding-bottom: var(--raum-2); margin: 0; }

/* Wohnungsseite */
.wohnung-haus { color: var(--tinte-2); font-weight: 600; margin-bottom: 0.25rem; }
.wohnung-fakten { font-size: 1.25rem; font-weight: 600; text-wrap: pretty; }
.wohnung-preis { color: var(--klinker-dunkel); font-weight: 700; font-size: 1.2rem; }
.galerie { display: grid; gap: var(--raum-1); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin: var(--raum-3) 0; }
.galerie figure { margin: 0; }
.galerie figure:first-child { grid-column: 1 / -1; }
.galerie img { display: block; width: 100%; height: auto; border-radius: var(--rund); }
.ausstattung { display: grid; gap: 0 var(--raum-3); }
@media (min-width: 48rem) { .ausstattung { grid-template-columns: repeat(2, 1fr); } .ausstattung h2 { grid-column: 1 / -1; } }
.zimmer ul { padding-left: 1.2rem; margin: 0 0 var(--raum-2); }
.ausstattung ul { list-style: none; padding: 0; margin: 0 0 var(--raum-2); }
.hof-hinweis { color: var(--tinte-2); }

/* Preise */
.preistabelle { font-variant-numeric: tabular-nums; width: 100%; margin-bottom: var(--raum-3); border-collapse: collapse; background: var(--papier); border-radius: var(--rund); overflow: hidden; }
.preistabelle caption { text-align: left; font-weight: 700; padding-bottom: var(--raum-1); }
.preistabelle th, .preistabelle td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--linie); text-align: right; }
.preistabelle th[scope="row"], .preistabelle thead th:first-child { text-align: left; }
.preistabelle thead th { background: var(--weide); color: var(--weiss); font-family: var(--schrift-titel); }
.preisjahr { overflow-x: auto; }
.preise-andere { color: var(--tinte-2); }

/* Anfrage */
.anfrage-raster { display: grid; gap: var(--raum-4); }
@media (min-width: 60rem) { .anfrage-raster { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; } }
.anfrage-formular .feld { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: var(--raum-2); }
.anfrage-formular label { font-weight: 700; }
.anfrage-formular .pflicht { font-weight: 400; color: var(--tinte-2); }
/* Preisrechner (preisrechner.js) */
.preisrechner { background: var(--papier); border-radius: var(--rund); padding: var(--raum-2) var(--raum-3) var(--raum-3); margin: var(--raum-3) 0 var(--raum-4); }
.preisrechner h2 { margin-top: 0; }
.preisrechner-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--raum-1) var(--raum-2); }
.preisrechner-form p { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.preisrechner-form label { font-weight: 700; }
.preisrechner-ergebnis { margin: var(--raum-2) 0 0; font-size: 1.15rem; max-width: 60ch; }
.preisrechner-ergebnis strong { color: var(--klinker-dunkel); font-size: 1.3rem; }
.preisrechner-aktion { display: block; margin-top: var(--raum-2); }

.anfrage-formular input, .anfrage-formular select, .anfrage-formular textarea, .preisrechner-form input, .preisrechner-form select {
  font: inherit;
  min-height: 48px;
  padding: 0.55rem 0.75rem;
  border: 2px solid #6d7f73;
  border-radius: 8px;
  background: var(--papier);
  color: var(--tinte);
}
.anfrage-formular textarea { min-height: 8rem; }
.anfrage-formular .feld-reihe { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: 0 var(--raum-2); }
.anfrage-raster > *, .feldgruppe { min-width: 0; }
.anfrage-formular input:not([type="radio"]), .anfrage-formular select, .anfrage-formular textarea { width: 100%; max-width: 100%; }
.anfrage-formular [aria-invalid="true"] { border-color: #a4161a; }
.feldgruppe { border: 1px solid var(--linie); border-radius: var(--rund); padding: var(--raum-2); margin: 0 0 var(--raum-3); }
.feldgruppe legend { font: 700 1.15rem var(--schrift-titel); padding: 0 0.3rem; }
.feld-fehler { color: #a4161a; font-weight: 600; margin: 0; }
.anfrage-fehler { border: 2px solid #a4161a; border-radius: var(--rund); padding: var(--raum-2); background: #fbeaea; margin-bottom: var(--raum-3); }
.anfrage-fehler a { color: #7a1013; }
.hinweis { background: var(--klinker-hell); border-radius: var(--rund); padding: var(--raum-2); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Je Kind ein Altersfeld, sichtbar ab der gewählten Kinderzahl. */
.anfrage-formular .alter-kind { display: none; }
.anfrage-formular:has(#kinder option:checked:is([value="1"],[value="2"],[value="3"],[value="4"],[value="5"])) .kind-ab-1 { display: flex; }
.anfrage-formular:has(#kinder option:checked:is([value="2"],[value="3"],[value="4"],[value="5"])) .kind-ab-2 { display: flex; }
.anfrage-formular:has(#kinder option:checked:is([value="3"],[value="4"],[value="5"])) .kind-ab-3 { display: flex; }
.anfrage-formular:has(#kinder option:checked:is([value="4"],[value="5"])) .kind-ab-4 { display: flex; }
.anfrage-formular:has(#kinder option:checked:is([value="5"])) .kind-ab-5 { display: flex; }
.anfrage-formular .alter-kind:has([aria-invalid="true"]) { display: flex; }
.anfrage-zusammenfassung { background: var(--papier); border-radius: var(--rund); padding: var(--raum-2); box-shadow: 0 2px 6px rgb(23 38 29 / 0.10); position: sticky; top: var(--raum-2); }
.anfrage-zusammenfassung img { width: 100%; height: auto; border-radius: 8px; margin-bottom: var(--raum-2); }
.anfrage-zusammenfassung h2 { font-size: 1.4rem; margin-top: 0; }

/* Belegung */
.belegung { margin-top: var(--raum-4); }
.belegung-wohnung h3 { margin: var(--raum-3) 0 var(--raum-1); }
.landreise-kalender { display: block; width: 100%; height: 34rem; border: 0; border-radius: var(--rund); background: var(--weiss); }

/* Fuß */
.fuss { background: var(--weide-dunkel); color: #e3efe5; margin-top: var(--raum-4); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: var(--raum-4) var(--raum-2); display: grid; gap: var(--raum-3); }
@media (min-width: 48rem) { .fuss-innen { grid-template-columns: 1fr 1fr; } }
.fuss a, .fuss a:hover { color: var(--weiss); }
.fuss a:hover { text-decoration-thickness: 0.14em; }
.fuss-name { font: 700 1.3rem var(--schrift-titel); color: var(--weiss); }
.fuss-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-copyright { grid-column: 1 / -1; font-size: 0.95rem; }

/* Knopf „Nach oben“ (nachoben.js); ohne Skript immer sichtbar */
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nach-oben {
  position: fixed;
  right: var(--raum-2);
  bottom: calc(var(--raum-2) + env(safe-area-inset-bottom));
  z-index: 41;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--weide-dunkel);
  color: var(--weiss);
  border: 2px solid var(--weiss);
  box-shadow: 0 4px 14px rgb(23 38 29 / 0.25);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background-color 160ms ease;
}
.nach-oben:hover { background: var(--weide); color: var(--weiss); }
.nach-oben:active { transform: scale(0.95); }
.nach-oben:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
@media (scripting: enabled) {
  .nach-oben:not([data-sichtbar]) { opacity: 0; transform: translateY(0.5rem); pointer-events: none; }
  .nach-oben:not([data-sichtbar]):focus-visible { opacity: 1; transform: none; pointer-events: auto; }
}
@media (max-width: 47.99rem) {
  .nach-oben { bottom: calc(5rem + env(safe-area-inset-bottom)); right: var(--raum-1); }
}

@media (prefers-reduced-motion: reduce) {
  .nach-oben { transition: opacity 120ms ease; }
  .nach-oben:not([data-sichtbar]) { transform: none; }
  .knopf, .personenwahl label, .marke, .kachel { transition: opacity 120ms ease; }
  .knopf:active, .personenwahl label:active { transform: none; }
}

/* Fotos vergrößern (bildgross.js) */
a.bild-gross { display: block; border-radius: var(--rund); cursor: zoom-in; }
a.bild-gross:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.bildfenster {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--weiss);
  opacity: 1;
  transform: scale(1);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
}
@starting-style { .bildfenster[open] { opacity: 0; transform: scale(0.97); } }
.bildfenster::backdrop { background: rgb(12 28 17 / 0.9); }
.bildfenster figure {
  height: 100%;
  margin: 0;
  padding: 4rem 4.5rem 1.5rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: var(--raum-1);
}
.bildfenster img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--rund); }
.bildfenster figcaption { font-size: 1rem; text-align: center; max-width: 60ch; }
.bildfenster-knopf {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 2px solid var(--weiss);
  border-radius: 50%;
  background: rgb(12 28 17 / 0.6);
  color: var(--weiss);
  font: 400 1.9rem/1 var(--schrift-titel);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.bildfenster-knopf:active { transform: scale(0.95); }
.bildfenster-knopf:focus-visible { outline: 3px solid var(--weiss); outline-offset: 3px; }
.bildfenster-zu { top: var(--raum-2); right: var(--raum-2); }
.bildfenster-zurueck, .bildfenster-vor { top: 50%; margin-top: -24px; }
.bildfenster-zurueck { left: var(--raum-1); }
.bildfenster-vor { right: var(--raum-1); }
.bildfenster-einzeln .bildfenster-zurueck, .bildfenster-einzeln .bildfenster-vor { display: none; }
@media (max-width: 47.99rem) {
  .bildfenster figure { padding: 4rem var(--raum-1) 5rem; }
  .bildfenster-zurueck, .bildfenster-vor { top: auto; bottom: var(--raum-2); margin-top: 0; }
  .bildfenster-zurueck { left: calc(50% - 60px); }
  .bildfenster-vor { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { .bildfenster, .bildfenster-knopf { transition: none; } }