@charset "UTF-8";
/* ==========================================================================
   Ferienhäuser Kranich: Gestaltungssystem
   --------------------------------------------------------------------------
   Grundsatz: Die Fotos führen, alles andere tritt zurück.

   Farben   Kalk und Nebel als ruhiger, ganz leicht grünlich-grauer Grund
            (wie der Himmel über dem Marais), Schiefer für die Schrift und
            genau ein Akzent: das Gold #D09D6A aus dem Farbblatt. Das Grau
            #7A7A7A des Logos gibt den Neutralfarben die Richtung.
            Gefüllte Knöpfe sind gold mit dunkler Schrift, Verweise haben
            eine goldene Unterstreichung.
   Schrift  Nur Jost, dieselbe Familie für Überschriften und Text. Sie ist
            frei lizenziert, lokal ausgeliefert und dem Schriftzug im Logo
            verwandt. Die Schriften des Farbblatts sind nicht eingebunden.
   Ecken    Eine Regel: 4 px für alles Flächige und alle Knöpfe (Fotos,
            Felder, Tabellen, Knöpfe). Rund sind nur die Umschalter in der
            Kopfzeile, die Pfeile im Leuchtkasten und die Saisonbuchstaben
            in den Preistabellen.
   Bewegung Nur als Rückmeldung auf eine Handlung (Überfahren, Drücken,
            Aufklappen). Nichts blendet sich beim Scrollen ein; aller Inhalt
            ist ohne Skript sichtbar.

   Gliederung
     1  Schriften               10  Häuser, Merkmale, Räume, Listen
     2  Gestaltungsmarken       11  Galerie und Leuchtkasten
     3  Dunkler Modus           12  Preise
     4  Grundlagen              13  Aufklappbereiche und Fragen
     5  Typografie              14  Formulare und Kontakt
     6  Layout                  15  Reisetipps
     7  Kopfzeile               16  Abschluss und Fußzeile
     8  Bühne und Merkband      17  Hilfsklassen
     9  Knöpfe und Verweise     18  Bewegung, Druck, Kontrast
   ========================================================================== */


/* ---------- 1. Schriften -------------------------------------------------
   Lokal ausgeliefert, keine Verbindung zu Dritten. Lizenz siehe
   assets/fonts/LIZENZ.txt

   Jost ist eine variable Schrift: eine Datei je Zeichensatz deckt alle
   Strichstärken ab. Der Bereich 100 900 muss deshalb angegeben werden,
   sonst nähme der Browser immer die Standardinstanz.                    */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/jost-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/jost-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- 2. Gestaltungsmarken ---------------------------------------- */

:root {
  color-scheme: light dark;

  /* Markenfarben laut Farbblatt (FarbenFerienhaus.pdf) */
  --marke-gold:  #d09d6a;
  --marke-stein: #7a7a7a;

  /* Bedeutungsfarben, heller Modus */
  --grund:          #f6f7f5;   /* Kalk: Seitengrund */
  --grund-2:        #eceeea;   /* Nebel: getönte Abschnitte, Fußzeile */
  --flaeche:        #fdfdfc;   /* Felder, Tabellen, Menüs */
  --flaeche-2:      #f1f2ef;
  --linie:          #dcdfda;
  --linie-kraeftig: #c3c7c1;
  /* Feldrahmen brauchen 3:1, sonst sieht man nicht, wo ein Feld anfängt */
  --feldrand:       #858a86;

  --text:           #222629;   /* Schiefer */
  --text-leise:     #4d5357;
  --text-zart:      #5f6569;

  --akzent:         #80572e;   /* Gold, dunkel genug für Schrift */
  --akzent-stark:   #664422;
  --akzent-zart:    #f2ebe2;
  --gold:           var(--marke-gold);
  --gold-zart:      #ecdfcf;
  --goldstrich:     #b07c49;   /* Unterstreichungen und Symbole, 3:1 */

  --knopf:          var(--marke-gold);
  --knopf-stark:    #c38c56;
  --knopf-text:     #1d2023;

  /* Schrift auf Fotos; die Bühne dunkelt das Foto dafür ab */
  --auf-bild:       #fdfdfc;
  --auf-bild-leise: #e7e9e6;
  --auf-bild-gold:  #ecd1b1;

  --erfolg:         #4a6b3e;
  --warnung:        #8f6214;
  --fehler:         #a8412b;

  /* Schrift: eine Familie für alles */
  --schrift: "Jost", "Century Gothic", "Futura", ui-sans-serif, system-ui,
             sans-serif;

  /* Schriftgrade: 17 px Grundschrift, fließend bis 19 px */
  --grad-xs:   0.875rem;
  --grad-sm:   0.9375rem;
  --grad-base: 1.0625rem;
  --grad-md:   clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --grad-lg:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --grad-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --grad-2xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --grad-3xl:  clamp(2.375rem, 1.7rem + 2.9vw, 4rem);

  /* Abstände */
  --ab-1: 0.25rem;  --ab-2: 0.5rem;   --ab-3: 0.75rem;
  --ab-4: 1rem;     --ab-5: 1.5rem;   --ab-6: 2rem;
  --ab-7: 3rem;     --ab-8: 4.5rem;   --ab-9: 6rem;
  --abschnitt-y: clamp(4rem, 2.4rem + 6vw, 8rem);

  --breite:        1220px;
  --breite-text:   66ch;
  --breite-schmal: 780px;

  --rund:      4px;
  --rund-voll: 999px;

  --schatten:  0 12px 32px rgba(24, 28, 30, .14);

  --uebergang: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 3. Dunkler Modus --------------------------------------------
   Nur Bedeutungsfarben werden neu belegt, nie einzelne Bauteile. Der
   Block steht zweimal: für die Systemeinstellung und für den Umschalter.
   werkzeuge/kontrast_pruefen.py prüft, dass beide gleich sind.         */

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:          #151718;
    --grund-2:        #1b1e1f;
    --flaeche:        #1f2224;
    --flaeche-2:      #25292b;
    --linie:          #2f3336;
    --linie-kraeftig: #3f4447;
    --feldrand:       #7b8185;

    --text:           #ebecea;
    --text-leise:     #b9bdbd;
    --text-zart:      #9ca1a3;

    --akzent:         #dfb385;
    --akzent-stark:   #ecc9a2;
    --akzent-zart:    #29251f;
    --gold:           var(--marke-gold);
    --gold-zart:      #3a3024;
    --goldstrich:     var(--marke-gold);

    --knopf:          var(--marke-gold);
    --knopf-stark:    #ddb286;
    --knopf-text:     #151718;

    --erfolg:         #93b47f;
    --warnung:        #d9ac5a;
    --fehler:         #e0826b;

    --schatten:  0 14px 36px rgba(0, 0, 0, .5);
  }
}

:root[data-thema="dunkel"] {
    --grund:          #151718;
    --grund-2:        #1b1e1f;
    --flaeche:        #1f2224;
    --flaeche-2:      #25292b;
    --linie:          #2f3336;
    --linie-kraeftig: #3f4447;
    --feldrand:       #7b8185;

    --text:           #ebecea;
    --text-leise:     #b9bdbd;
    --text-zart:      #9ca1a3;

    --akzent:         #dfb385;
    --akzent-stark:   #ecc9a2;
    --akzent-zart:    #29251f;
    --gold:           var(--marke-gold);
    --gold-zart:      #3a3024;
    --goldstrich:     var(--marke-gold);

    --knopf:          var(--marke-gold);
    --knopf-stark:    #ddb286;
    --knopf-text:     #151718;

    --erfolg:         #93b47f;
    --warnung:        #d9ac5a;
    --fehler:         #e0826b;

    --schatten:  0 14px 36px rgba(0, 0, 0, .5);
}

/* Logo: dunkle Schrift im hellen, helle Schrift im dunklen Modus */
.logo-dunkel { display: none; }
:root[data-thema="dunkel"] .logo-hell  { display: none; }
:root[data-thema="dunkel"] .logo-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .logo-hell  { display: none; }
  :root:not([data-thema="hell"]) .logo-dunkel { display: block; }
}


/* ---------- 4. Grundlagen ------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--grad-md);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

/* Sichtbarer Fokusrahmen, nie entfernen. Keine eigene Rundung: der
   Rahmen folgt der Form des Elements. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}
/* Auf dem abgedunkelten Foto der Bühne wäre dunkles Gold kaum zu sehen */
.buehne :focus-visible { outline-color: var(--auf-bild); }

::selection { background: var(--gold-zart); color: var(--text); }

.sprungmarke {
  position: absolute;
  left: var(--ab-4);
  top: -100%;
  z-index: 200;
  padding: var(--ab-3) var(--ab-5);
  background: var(--knopf);
  color: var(--knopf-text);
  border-radius: 0 0 var(--rund) var(--rund);
  font-weight: 500;
  text-decoration: none;
  transition: top .2s var(--uebergang);
}
.sprungmarke:focus { top: 0; }

.nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- 5. Typografie ------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--schrift);
  font-weight: 350;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0 0 var(--ab-4);
  text-wrap: balance;
}
h1 { font-size: var(--grad-3xl); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: var(--grad-2xl); }
h3 { font-size: var(--grad-xl); font-weight: 420; line-height: 1.22; letter-spacing: -0.01em; }
h4 { font-size: var(--grad-lg); font-weight: 500; letter-spacing: 0; }

p { margin: 0 0 var(--ab-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 550; color: var(--text); }
small { font-size: var(--grad-sm); }

hr {
  border: 0;
  height: 1px;
  background: var(--linie);
  margin: var(--ab-7) 0;
}

/* Ortszeile über der Überschrift der Bühne. Bewusst sparsam: nur auf
   Startseite, Hausseiten und Region, nie über Abschnitten. */
.augenbraue {
  display: block;
  font-size: var(--grad-sm);
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--akzent);
  margin-bottom: var(--ab-3);
}

.vorspann {
  font-size: var(--grad-lg);
  line-height: 1.55;
  color: var(--text-leise);
  max-width: 52ch;
}

/* Kleine Zwischenüberschrift in einer Textspalte */
.titel-klein {
  font-size: var(--grad-lg);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 var(--ab-4);
}

.fliesstext { max-width: var(--breite-text); }
.fliesstext > * + * { margin-top: var(--ab-4); }
.fliesstext h2 { margin-top: var(--ab-7); font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); }
.fliesstext h3 { margin-top: var(--ab-6); font-size: var(--grad-lg); font-weight: 500; }
.fliesstext ul, .fliesstext ol { padding-left: 1.2em; }
.fliesstext li + li { margin-top: var(--ab-2); }
.fliesstext li::marker { color: var(--goldstrich); }


/* ---------- 6. Layout ---------------------------------------------------- */

.huelle {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}
@media (min-width: 48rem) { .huelle { width: min(100% - 4rem, var(--breite)); } }
.huelle--schmal { --breite: var(--breite-schmal); }

.abschnitt { padding-block: var(--abschnitt-y); }
.abschnitt--getoent { background: var(--grund-2); }
/* Zwei Abschnitte mit gleichem Grund hintereinander: nur ein Abstand */
.abschnitt--getoent + .abschnitt--getoent,
.abschnitt:not(.abschnitt--getoent) + .abschnitt:not(.abschnitt--getoent) {
  padding-top: 0;
}

/* Kopf eines Abschnitts: Überschrift und höchstens ein Satz darunter */
.kopfzeile-abschnitt {
  max-width: 44rem;
  margin-bottom: var(--ab-7);
}
.kopfzeile-abschnitt--mitte {
  margin-inline: auto;
  text-align: center;
}
.kopfzeile-abschnitt--mitte .vorspann { margin-inline: auto; }

.raster { display: grid; gap: var(--ab-5); }
@media (min-width: 40rem) {
  .raster--2, .raster--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .raster { gap: var(--ab-6); }
}

/* Überschrift links, Inhalt rechts. Die linke Spalte bleibt beim Lesen
   stehen. Unter 62rem untereinander. */
.spalten { display: grid; gap: var(--ab-6) var(--ab-8); }
@media (min-width: 62rem) {
  .spalten { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .spalten__kopf { position: sticky; top: 7rem; }
}
.spalten__kopf h2 { margin-bottom: var(--ab-4); }

/* Bild und Text nebeneinander, bewusst ungleich breit (7 : 5).
   Unter 56rem untereinander, das Bild zuerst. */
.wechsel {
  display: grid;
  gap: var(--ab-6);
  align-items: center;
}
@media (min-width: 56rem) {
  .wechsel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
  }
  .wechsel--gedreht { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .wechsel--gedreht > :first-child { order: 2; }
}
.wechsel__bild {
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--grund-2);
}
/* Hochformate nicht höher als das Fenster */
.wechsel__bild img { width: 100%; max-height: min(42rem, 82svh); object-fit: cover; }
.wechsel__bild--quer img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Text oben bündig, wenn daneben mehrere Bilder stehen */
.wechsel--oben { align-items: start; }

/* Bild über die ganze Breite, ohne Text darauf */
.bildband { margin: 0; background: var(--grund-2); }
.bildband img {
  width: 100%;
  height: clamp(16rem, 40vw, 38rem);
  object-fit: cover;
}


/* ---------- 7. Kopfzeile ------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linie);
}
@supports not (backdrop-filter: blur(1px)) {
  .kopf { background: var(--grund); }
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--ab-5);
  min-height: 4.5rem;
}

.marke { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.marke img { height: clamp(2.3rem, 1.9rem + 1.4vw, 2.9rem); width: auto; }

.kopf__werkzeuge { margin-left: auto; display: flex; align-items: center; gap: var(--ab-2); }

.navigation { display: none; }
@media (min-width: 62rem) {
  .navigation { display: block; margin-left: auto; }
  .kopf__werkzeuge { margin-left: 0; }
}
.navigation__liste {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
}
.navigation__link {
  display: block;
  padding: var(--ab-2) var(--ab-3);
  color: var(--text-leise);
  font-size: var(--grad-sm);
  font-weight: 450;
  text-decoration: none;
  text-underline-offset: .5em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: color .2s;
}
.navigation__link:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--linie-kraeftig);
}
.navigation__link[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--goldstrich);
  text-decoration-thickness: 2px;
}
@media (min-width: 62rem) and (max-width: 74rem) {
  .navigation__link { padding-inline: .55rem; }
}

/* Umschalter für Sprache und Farbmodus: rund, 44 px hoch */
.knopf-still {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-2);
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 var(--ab-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-voll);
  background: transparent;
  color: var(--text-leise);
  font: inherit;
  font-size: var(--grad-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.knopf-still:hover { color: var(--text); border-color: var(--linie-kraeftig); background: var(--flaeche-2); }
.knopf-still svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

.sprachwahl { position: relative; }
.sprachwahl__liste {
  position: absolute;
  right: 0; top: calc(100% + .5rem);
  min-width: 11rem;
  margin: 0; padding: var(--ab-2);
  list-style: none;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  z-index: 30;
}
.sprachwahl__liste[hidden] { display: none; }
.sprachwahl__liste a {
  display: flex;
  align-items: center;
  gap: var(--ab-3);
  padding: var(--ab-2) var(--ab-3);
  border-radius: var(--rund);
  color: var(--text);
  font-size: var(--grad-sm);
  text-decoration: none;
}
.sprachwahl__liste a:hover { background: var(--flaeche-2); }
.sprachwahl__liste a[aria-current="true"] { color: var(--akzent); font-weight: 550; }
.sprachwahl__kuerzel { font-weight: 500; letter-spacing: .06em; }

/* Menü für schmale Bildschirme */
.menue-knopf { display: inline-flex; }
@media (min-width: 62rem) { .menue-knopf { display: none; } }

.menue {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--grund);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menue[hidden] { display: none; }
.menue__kopf {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  gap: var(--ab-4);
}
.menue__liste {
  list-style: none;
  margin: 0; padding: var(--ab-5) 0 var(--ab-9);
  display: grid;
}
.menue__liste a {
  display: block;
  padding: var(--ab-4) 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  font-size: var(--grad-xl);
  font-weight: 350;
  text-decoration: none;
}
.menue__liste a[aria-current="page"] { color: var(--akzent); }


/* ---------- 8. Bühne und Merkband ---------------------------------------- */

.buehne {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(84svh, 50rem);
  padding-block: var(--ab-9) clamp(3rem, 2rem + 4vw, 5.5rem);
  color: var(--auf-bild);
  background: #2b2f31;
  overflow: hidden;
  isolation: isolate;
}
.buehne--kompakt {
  min-height: min(52svh, 29rem);
  padding-block: var(--ab-8) var(--ab-7);
}

.buehne__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.buehne__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Abdunklung von unten und von links: dort steht die Schrift. Die
   rechte obere Bildhälfte bleibt fast unberührt, damit das Foto führt.
   Auch helle Motive (weiße Hauswand) tragen so die Schrift. */
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right,
      rgba(16, 18, 19, .5) 0%,
      rgba(16, 18, 19, .28) 38%,
      rgba(16, 18, 19, 0) 68%),
    linear-gradient(to top,
      rgba(16, 18, 19, .84) 0%,
      rgba(16, 18, 19, .58) 36%,
      rgba(16, 18, 19, .2) 66%,
      rgba(16, 18, 19, .24) 100%);
}
/* Breit genug, dass die zweite Zeile der Startseiten-Überschrift auch
   im Französischen („où tout le monde est le bienvenu“) nicht umbricht */
.buehne__inhalt { max-width: 56rem; }
.buehne h1 {
  color: var(--auf-bild);
  margin-bottom: var(--ab-4);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .22);
}
.buehne--kompakt h1 { font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); }
/* Der feste Umbruch an der Satzgrenze gilt nur für die zweizeilige
   Überschrift ab Tablet-Breite; schmal verteilt text-wrap die Zeilen. */
@media (max-width: 47.99rem) { .buehne h1 br { display: none; } }
.buehne .augenbraue { color: var(--auf-bild-gold); }
.buehne__text {
  font-size: var(--grad-lg);
  line-height: 1.55;
  color: var(--auf-bild-leise);
  max-width: 36rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .25);
}
.buehne__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-3);
  margin-top: var(--ab-6);
}
/* Auf schmalen Bildschirmen stehen die beiden Knöpfe untereinander;
   dann gleich breit statt zwei verschieden langer Stücke */
@media (max-width: 29.99rem) {
  .buehne__knoepfe, .abschluss .knopfreihe { display: grid; }
}

/* Die wichtigsten Merkmale direkt unter der Bühne (früher in der Bühne) */
.merkband {
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.merkband__liste {
  list-style: none;
  margin: 0;
  padding: var(--ab-5) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ab-4) var(--ab-5);
}
@media (min-width: 56rem) {
  .merkband__liste {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    padding-block: var(--ab-6);
  }
}
.merkband li {
  display: flex;
  align-items: center;
  gap: var(--ab-3);
  font-size: var(--grad-sm);
  font-weight: 500;
  line-height: 1.35;
}
.merkband svg { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; color: var(--goldstrich); }


/* ---------- 9. Knöpfe und Verweise --------------------------------------- */

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--goldstrich);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s, text-decoration-color .2s;
}
a:hover { color: var(--akzent); text-decoration-color: currentColor; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-2);
  min-height: 3rem;
  padding: 0 var(--ab-5);
  border: 1px solid transparent;
  border-radius: var(--rund);
  background: var(--knopf);
  color: var(--knopf-text);
  font-family: var(--schrift);
  font-size: var(--grad-base);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--uebergang),
              color .2s var(--uebergang),
              border-color .2s var(--uebergang),
              transform .15s var(--uebergang);
}
.knopf:hover { background: var(--knopf-stark); color: var(--knopf-text); }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

/* Umriss in Schriftfarbe: für alles, was nicht die Anfrage ist */
.knopf--rand {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.knopf--rand:hover { background: var(--text); border-color: var(--text); color: var(--grund); }

/* Umriss auf Fotos */
.knopf--hell {
  background: rgba(253, 253, 252, .08);
  border-color: rgba(253, 253, 252, .75);
  color: var(--auf-bild);
}
.knopf--hell:hover { background: var(--auf-bild); border-color: var(--auf-bild); color: #222629; }

.knopf--gross { min-height: 3.25rem; padding: 0 var(--ab-6); font-size: var(--grad-md); }

/* Textverweis, z. B. „Weiterlesen" */
.weiter {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-2);
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--goldstrich);
  text-underline-offset: .3em;
}
.weiter:hover { color: var(--akzent); }


/* ---------- 10. Häuser, Merkmale, Räume, Listen -------------------------- */

/* Die beiden Häuser als Paar nebeneinander */
.haeuser { display: grid; gap: var(--ab-8); }
@media (min-width: 56rem) {
  .haeuser { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); }
}
.haus { display: flex; flex-direction: column; gap: var(--ab-4); }
.haus__bild {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--ab-2);
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--flaeche-2);
}
.haus__bild img { width: 100%; height: 100%; object-fit: cover; }
.haus h3 { font-size: var(--grad-2xl); font-weight: 350; margin: 0; }
.haus__ort { margin: calc(-1 * var(--ab-2)) 0 0; font-size: var(--grad-sm); color: var(--text-leise); }
.haus > p { color: var(--text-leise); margin: 0; }
.haus__knoepfe { margin-top: auto; padding-top: var(--ab-3); }

/* Verweis auf die Bewertungen, unter dem Häuserpaar */
.stimmen {
  display: grid;
  gap: var(--ab-4) var(--ab-8);
  margin-top: var(--ab-8);
  padding-top: var(--ab-6);
  border-top: 1px solid var(--linie-kraeftig);
}
@media (min-width: 56rem) {
  .stimmen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.stimmen h3 { margin-bottom: var(--ab-3); }
.stimmen p { color: var(--text-leise); max-width: 52ch; }
.stimmen__verweise { display: grid; gap: var(--ab-3); justify-items: start; }

/* Merkmale: kurze Aussage mit Symbol, getrennt durch eine Linie */
.merkmale { display: grid; gap: var(--ab-6); }
@media (min-width: 40rem) { .merkmale { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .merkmale--3 { grid-template-columns: repeat(3, 1fr); } }
.merkmal { border-top: 1px solid var(--linie-kraeftig); padding-top: var(--ab-4); }
.merkmal__symbol { display: block; margin-bottom: var(--ab-3); color: var(--goldstrich); }
.merkmal__symbol svg { width: 1.5rem; height: 1.5rem; }
.merkmal h3 {
  font-size: var(--grad-md);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  margin-bottom: var(--ab-2);
}
.merkmal p { color: var(--text-leise); font-size: var(--grad-base); margin: 0; }

/* Ausstattungsliste mit Haken */
.merkliste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--ab-3) var(--ab-5);
}
@media (min-width: 40rem) { .merkliste--2 { grid-template-columns: 1fr 1fr; } }
.merkliste li {
  display: flex;
  align-items: flex-start;
  gap: var(--ab-3);
  font-size: var(--grad-base);
  line-height: 1.5;
}
.merkliste svg {
  flex: 0 0 auto;
  width: 1.1rem; height: 1.1rem;
  margin-top: .22em;
  color: var(--goldstrich);
}

/* Gastgeber: auf schmalen Geräten untereinander, ab 34rem nebeneinander.
   In der zweispaltigen Ansicht quadratisch und leicht versetzt, damit
   die Bildspalte nicht doppelt so hoch wird wie der Text daneben. */
.portraet { margin: 0; }
.portraet__bild {
  aspect-ratio: 4 / 3;
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--grund-2);
}
.portraet__bild img { width: 100%; height: 100%; object-fit: cover; }
.portraet figcaption { margin-top: var(--ab-3); font-size: var(--grad-sm); color: var(--text-zart); }
.portraet figcaption strong { font-size: var(--grad-base); font-weight: 500; }

.gastgeber { display: grid; gap: var(--ab-5); }
@media (min-width: 34rem) { .gastgeber { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56rem) {
  .gastgeber { gap: var(--ab-4); }
  .gastgeber .portraet__bild { aspect-ratio: 4 / 5; }
  /* Die Hunde stehen auf beiden Fotos eher links der Mitte */
  .gastgeber .portraet__bild img { object-position: 40% 50%; }
  .gastgeber .portraet + .portraet { margin-top: var(--ab-7); }
}
.unterschrift { margin-top: var(--ab-5); font-weight: 500; }

/* Räume eines Hauses: ein großer, darunter zwei nebeneinander */
.raeume { display: grid; gap: var(--ab-8); }
.raum { display: grid; gap: var(--ab-5); align-content: start; }
.raum__bild {
  aspect-ratio: 4 / 3;
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--flaeche-2);
}
.raum__bild img { width: 100%; height: 100%; object-fit: cover; }
.raum h3 { margin-bottom: var(--ab-3); }
.raum p { margin-bottom: var(--ab-3); }
.raum .merkliste { margin-top: var(--ab-3); }
.raeume__paar { display: grid; gap: var(--ab-8); }
@media (min-width: 56rem) {
  .raum--gross {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
  }
  .raeume__paar { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); }
}

/* Ausflugsziele: Ort, Fahrzeit, ein Satz */
.reiseziele { list-style: none; margin: 0; padding: 0; display: grid; column-gap: var(--ab-8); }
@media (min-width: 56rem) { .reiseziele { grid-template-columns: 1fr 1fr; } }
.reiseziele li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ab-1) var(--ab-4);
  align-items: baseline;
  padding-block: var(--ab-5);
  border-bottom: 1px solid var(--linie);
}
.reiseziele h3 { font-size: var(--grad-md); font-weight: 500; letter-spacing: 0; margin: 0; }
.reiseziele__dauer {
  font-size: var(--grad-sm);
  color: var(--text-leise);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reiseziele p { grid-column: 1 / -1; margin: 0; color: var(--text-leise); font-size: var(--grad-base); }

.hinweiskasten {
  display: flex;
  gap: var(--ab-4);
  padding: var(--ab-5);
  border-radius: var(--rund);
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
.hinweiskasten svg { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; margin-top: .2em; color: var(--akzent); }
.hinweiskasten p { font-size: var(--grad-base); }


/* ---------- 11. Galerie und Leuchtkasten --------------------------------- */

.galerie {
  display: grid;
  gap: var(--ab-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) { .galerie { grid-template-columns: repeat(3, 1fr); gap: var(--ab-3); } }
@media (min-width: 75rem) { .galerie { grid-template-columns: repeat(4, 1fr); } }
/* Alle Felder gleich groß: eine geschlossene Fläche ohne Lücken, egal
   wie viele Spalten gerade angezeigt werden. */
.galerie__feld {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--flaeche-2);
  cursor: zoom-in;
}
.galerie__feld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--uebergang);
}
.galerie__feld:hover img { transform: scale(1.03); }

.leuchtkasten {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--ab-4);
  padding: var(--ab-5);
  background: rgba(13, 15, 16, .96);
}
.leuchtkasten[hidden] { display: none; }
.leuchtkasten__bild { display: grid; place-items: center; min-height: 0; }
.leuchtkasten__bild img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--rund);
}
.leuchtkasten__fuss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-4);
  color: rgba(253, 253, 252, .9);
  font-size: var(--grad-sm);
  text-align: center;
}
.leuchtkasten__fuss p { margin: 0; }
.leuchtkasten__text { max-width: 52ch; }
.leuchtkasten__knopf {
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid rgba(253, 253, 252, .35);
  border-radius: var(--rund-voll);
  background: rgba(253, 253, 252, .08);
  color: #fdfdfc;
  cursor: pointer;
  flex: 0 0 auto;
}
.leuchtkasten__knopf:hover { background: rgba(253, 253, 252, .2); }
.leuchtkasten__knopf svg { width: 1.3rem; height: 1.3rem; }
.leuchtkasten__schliessen { position: absolute; right: var(--ab-5); top: var(--ab-5); }


/* ---------- 12. Preise --------------------------------------------------- */

.preis-haus + .preis-haus { margin-top: var(--ab-8); }
.preis-haus > h3 { margin-bottom: var(--ab-5); }
.preis-haus > .hinweiskasten { margin-bottom: var(--ab-5); }

.bedingungen { margin-top: var(--ab-8); max-width: 52rem; }

.tabellenrahmen {
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
  overflow: hidden;
}

table.preise {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;          /* feste Spalten, nie breiter als der Rahmen */
  font-size: var(--grad-sm);
  font-variant-numeric: tabular-nums;
}
table.preise col.spalte-saison { width: 4.5rem; }
table.preise col.spalte-preis  { width: 6.75rem; }

table.preise caption {
  padding: var(--ab-4) var(--ab-4) var(--ab-3);
  text-align: left;
  font-size: var(--grad-md);
  font-weight: 500;
  color: var(--text);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
table.preise th, table.preise td {
  padding: var(--ab-3) var(--ab-3);
  text-align: left;
  border-bottom: 1px solid var(--linie);
}
table.preise th:first-child, table.preise td:first-child { padding-left: var(--ab-4); }
table.preise th:last-child,  table.preise td:last-child  { padding-right: var(--ab-4); text-align: right; }
table.preise td .von, table.preise td .bis { white-space: nowrap; }
/* Die Spaltenköpfe dürfen zwischen Wörtern umbrechen, sonst ragen sie
   über den Rahmen, aber nie mitten im Wort („Seaso / n“) */
table.preise thead th {
  overflow-wrap: normal;
  font-size: var(--grad-xs);
  font-weight: 500;
  color: var(--text-zart);
  background: var(--flaeche-2);
  vertical-align: bottom;
  line-height: 1.3;
}
table.preise tbody tr:last-child th,
table.preise tbody tr:last-child td { border-bottom: 0; }
table.preise .preis { font-size: var(--grad-base); font-weight: 500; white-space: nowrap; }
table.preise .saison {
  display: inline-grid;
  place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: var(--rund-voll);
  background: var(--akzent-zart);
  color: var(--akzent);
  font-weight: 500;
  font-size: var(--grad-xs);
}
table.preise tr[data-hoch="ja"] .saison { background: var(--gold); color: var(--knopf-text); }

/* Nebenkosten als kurze Preisliste */
.preisliste { margin: 0; }
.preisliste > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ab-4);
  padding-block: var(--ab-4);
  border-bottom: 1px solid var(--linie);
}
.preisliste > div:first-child { border-top: 1px solid var(--linie-kraeftig); }
.preisliste dt { font-weight: 500; }
.preisliste dd {
  margin: 0;
  font-size: var(--grad-lg);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Buchungsablauf: eine echte Reihenfolge, deshalb nummeriert */
.ablauf {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--ab-6);
  counter-reset: schritt;
}
@media (min-width: 40rem) { .ablauf { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .ablauf { grid-template-columns: repeat(4, 1fr); } }
.ablauf li {
  counter-increment: schritt;
  border-top: 1px solid var(--linie-kraeftig);
  padding-top: var(--ab-4);
}
.ablauf li::before {
  content: counter(schritt);
  display: block;
  margin-bottom: var(--ab-3);
  font-size: var(--grad-xl);
  line-height: 1;
  color: var(--akzent);
}
.ablauf h3 { font-size: var(--grad-md); font-weight: 500; letter-spacing: 0; margin-bottom: var(--ab-2); }
.ablauf p { color: var(--text-leise); font-size: var(--grad-base); }


/* ---------- 13. Aufklappbereiche und Fragen ------------------------------ */

.aufklapp { border-bottom: 1px solid var(--linie); }
.fragen > .aufklapp:first-child { border-top: 1px solid var(--linie-kraeftig); }
.aufklapp h3 { margin: 0; font-size: inherit; }
.aufklapp__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-4);
  width: 100%;
  padding: var(--ab-4) 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--grad-md);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color .2s;
}
.aufklapp__knopf:hover { color: var(--akzent); }
.aufklapp__knopf svg {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  color: var(--akzent);
  transition: transform .3s var(--uebergang);
}
.aufklapp__knopf[aria-expanded="true"] svg { transform: rotate(45deg); }
.aufklapp__inhalt { max-width: 64ch; padding: 0 var(--ab-6) var(--ab-5) 0; color: var(--text-leise); }
/* Zugeklappt nur, wenn Skripte laufen (Klasse js vom Inline-Skript im
   Kopf). Ohne JavaScript stehen alle Antworten offen da, ohne Plus. */
.js .aufklapp__inhalt:not(.ist-offen) { display: none; }
html:not(.js) .aufklapp__knopf { cursor: default; }
html:not(.js) .aufklapp__knopf svg { display: none; }

.faq-gruppe { display: grid; gap: var(--ab-4) var(--ab-8); }
.faq-gruppe + .faq-gruppe { margin-top: var(--ab-8); }
.faq-gruppe h2 { font-size: var(--grad-xl); font-weight: 420; margin: 0; }
@media (min-width: 56rem) {
  .faq-gruppe { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .faq-gruppe h2 { position: sticky; top: 7rem; align-self: start; padding-top: var(--ab-4); }
}


/* ---------- 14. Formulare und Kontakt ------------------------------------ */

.kontakt-raster { display: grid; gap: var(--ab-8); align-items: start; }
@media (min-width: 62rem) {
  .kontakt-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(3rem, 6vw, 6rem); }
  .kontaktspalte { position: sticky; top: 7rem; }
}
.kontaktspalte {
  display: grid;
  gap: var(--ab-5);
  padding-top: var(--ab-5);
  border-top: 1px solid var(--linie-kraeftig);
}
.kontaktspalte > div + div { padding-top: var(--ab-5); border-top: 1px solid var(--linie); }
.kontaktspalte h3 { font-size: var(--grad-lg); font-weight: 500; margin-bottom: var(--ab-3); }
.kontaktspalte .merkliste { margin-top: var(--ab-3); }
.antwortzeit { margin-top: var(--ab-3); color: var(--text-zart); font-size: var(--grad-sm); }

.formular { display: grid; gap: var(--ab-5); margin-top: var(--ab-6); }
.feldpaar { display: grid; gap: var(--ab-5); }
@media (min-width: 40rem) { .feldpaar { grid-template-columns: 1fr 1fr; } }

.feld { display: grid; gap: var(--ab-2); }
.feld label { font-size: var(--grad-sm); font-weight: 500; color: var(--text); }
.feld label .pflicht { color: var(--akzent); }
.feld .hilfe { font-size: var(--grad-xs); color: var(--text-zart); }

.feld input, .feld select, .feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--ab-3) var(--ab-4);
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: var(--grad-base);
  transition: border-color .2s, box-shadow .2s;
}
.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--text-leise); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--gold-zart);
  outline: none;
}
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--fehler); }

.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--ab-3);
  font-size: var(--grad-sm);
  color: var(--text-leise);
}
.zustimmung input {
  flex: 0 0 auto;
  width: 1.2rem; height: 1.2rem;
  margin-top: .25em;
  accent-color: var(--akzent);
}

/* Honigtopf gegen Werbeeinträge, für Menschen unsichtbar */
.honigtopf {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.formular__hinweis {
  padding: var(--ab-4) var(--ab-5);
  border-radius: var(--rund);
  font-size: var(--grad-sm);
}
.formular__hinweis[data-art="erfolg"] {
  background: color-mix(in srgb, var(--erfolg) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--erfolg) 40%, transparent);
  color: var(--text);
}
.formular__hinweis[data-art="fehler"] {
  background: color-mix(in srgb, var(--fehler) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fehler) 40%, transparent);
  color: var(--text);
}
.formular__hinweis[hidden] { display: none; }


/* ---------- 15. Reisetipps ----------------------------------------------- */

.beitraege { display: grid; gap: var(--ab-8) var(--ab-6); }
@media (min-width: 40rem) { .beitraege { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .beitraege { grid-template-columns: repeat(3, 1fr); } }

.beitrag-karte { display: flex; flex-direction: column; gap: var(--ab-4); }
.beitrag-karte__bild {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--grund-2);
}
.beitrag-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--uebergang);
}
.beitrag-karte:hover .beitrag-karte__bild img { transform: scale(1.03); }
.beitrag-karte__text { display: flex; flex-direction: column; gap: var(--ab-3); flex: 1; }
.beitrag-karte h3 { font-size: var(--grad-xl); margin: 0; }
.beitrag-karte h3 a { color: inherit; text-decoration: none; }
.beitrag-karte h3 a:hover { color: var(--akzent); }
.beitrag-karte p { color: var(--text-leise); margin: 0; }
.beitrag-karte .weiter { margin-top: auto; padding-top: var(--ab-2); align-self: flex-start; }

/* Der neueste Beitrag steht vorn, breit */
.beitrag-karte--auftakt { grid-column: 1 / -1; }
@media (min-width: 56rem) {
  .beitrag-karte--auftakt {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  .beitrag-karte--auftakt .beitrag-karte__bild { aspect-ratio: 4 / 3; }
  .beitrag-karte--auftakt h3 { font-size: var(--grad-2xl); font-weight: 350; }
}

.beitrag-karte__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5em;
  font-size: var(--grad-xs);
  color: var(--text-zart);
}
.beitrag-karte__meta span + span::before { content: "·"; margin-right: .5em; }

.beitrag__kopf { max-width: var(--breite-text); margin-bottom: var(--ab-7); }
.beitrag__kopf h1 { font-size: clamp(2rem, 1.45rem + 2.2vw, 3.125rem); margin-top: var(--ab-3); }
/* So breit wie die Textspalte, damit Aufmacher, Text und Bilder im
   Beitrag eine gemeinsame rechte Kante haben */
.beitrag__bild {
  max-width: var(--breite-text);
  border-radius: var(--rund);
  overflow: hidden;
  margin-bottom: var(--ab-7);
  background: var(--grund-2);
}
.beitrag figure { margin: var(--ab-7) 0; }
.beitrag figure img { border-radius: var(--rund); width: 100%; }
.beitrag figcaption { margin-top: var(--ab-3); font-size: var(--grad-sm); color: var(--text-zart); }
.beitrag__fuss {
  margin-top: var(--ab-8);
  padding-top: var(--ab-5);
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-4);
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--grad-sm);
  color: var(--text-zart);
}
.beitrag__fuss p { margin: 0; }


/* ---------- 16. Abschluss und Fußzeile ----------------------------------- */

/* Aufruf zur Anfrage am Ende fast jeder Seite, darunter ein breites Foto */
.abschluss { padding-top: var(--abschnitt-y); }
/* Folgt er auf einen Abschnitt mit gleichem Grund: nur ein Abstand */
.abschnitt:not(.abschnitt--getoent) + .abschluss { padding-top: 0; }
.abschluss .kopfzeile-abschnitt { margin-bottom: var(--ab-6); }
.abschluss__bild { margin: var(--abschnitt-y) 0 0; background: var(--grund-2); }
.abschluss__bild img {
  width: 100%;
  height: clamp(14rem, 34vw, 32rem);
  object-fit: cover;
  object-position: 50% 60%;
}

.fuss {
  background: var(--grund-2);
  color: var(--text-leise);
  padding-block: var(--ab-8) var(--ab-6);
  font-size: var(--grad-sm);
}
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover { color: var(--akzent); text-decoration: underline; text-decoration-color: var(--goldstrich); }
.fuss h3 {
  font-size: var(--grad-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: var(--ab-3);
}
.fuss h3 + ul + h3 { margin-top: var(--ab-5); }
.fuss__raster { display: grid; gap: var(--ab-7); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 62rem) { .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.fuss__marke img { height: 3.2rem; width: auto; margin-bottom: var(--ab-4); }
.fuss__marke + p { max-width: 36ch; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ab-2); }
.fuss__unten {
  margin-top: var(--ab-8);
  padding-top: var(--ab-5);
  border-top: 1px solid var(--linie-kraeftig);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-3) var(--ab-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--grad-xs);
  color: var(--text-zart);
}
.fuss__unten nav { display: flex; flex-wrap: wrap; gap: var(--ab-4); }


/* ---------- 17. Hilfsklassen --------------------------------------------- */

.mitte { text-align: center; }
.mittig { margin-inline: auto; }
.oben-abstand   { margin-top: var(--ab-6); }
.oben-abstand-l { margin-top: var(--ab-7); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--ab-3); }
.knopfreihe--mitte { justify-content: center; }

/* Noch offene Angabe: im Browser deutlich sichtbar, im Druck neutral */
.offen {
  background: #fff3cd;
  color: #5a4300;
  padding: .1em .4em;
  border-radius: var(--rund);
  font-weight: 600;
}


/* ---------- 18. Bewegung, Druck, Kontrast -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --linie: var(--marke-stein); --text-leise: var(--text); --text-zart: var(--text); }
}

@media print {
  .kopf, .menue, .leuchtkasten, .sprungmarke, .buehne__knoepfe, .merkband,
  .knopf, .fuss__unten nav, .sprachwahl, .menue-knopf,
  .abschluss__bild { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .buehne { min-height: auto; color: #000; background: none; padding-block: 0 1rem; }
  .buehne::after, .buehne__bild { display: none; }
  .buehne h1, .buehne__text { color: #000; text-shadow: none; }
  .abschnitt, .abschluss { padding-block: 1rem; }
  .abschnitt--getoent, .fuss { background: none !important; }
  .tabellenrahmen, .aufklapp { border-color: #bbb; }
  .aufklapp__inhalt { display: block !important; }
  .spalten__kopf, .kontaktspalte, .faq-gruppe h2 { position: static; }
  a { color: #000; text-decoration: underline; }
  .fliesstext a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .offen { background: none; border: 1px solid #999; }
  table.preise { font-size: 10pt; }
  h2, h3 { break-after: avoid; }
  .haus, .raum, table.preise tr { break-inside: avoid; }
}