@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;

  --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"] {
    /* Native Bedienteile (Kalendersymbol der Datumsfelder, Rollbalken)
       folgen sonst weiter der Systemeinstellung: schwarzes Symbol auf
       dunklem Feld. */
    color-scheme: dark;

    --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="hell"] { color-scheme: light; }

/* 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 und auf dem dunklen Grund des
   Leuchtkastens wäre dunkles Gold kaum zu sehen (2,8:1) */
.buehne :focus-visible,
.leuchtkasten :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__zu { margin-left: auto; }
.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, .64) 36%,
      rgba(16, 18, 19, .2) 66%,
      rgba(16, 18, 19, .24) 100%);
}
/* Schmal steht die Schrift über fast der ganzen Höhe und Breite der
   Bühne. Dort gleichmäßiger und kräftiger abdunkeln, sonst trüge eine
   helle Hauswand oder ein Wolkenhimmel die weiße Schrift nicht
   (WCAG 1.4.3, mit Bildschirmfotos ohne Schrift nachgemessen). */
@media (max-width: 47.99rem) {
  .buehne::after {
    background: linear-gradient(to top,
      rgba(16, 18, 19, .86) 0%,
      rgba(16, 18, 19, .7) 50%,
      rgba(16, 18, 19, .52) 80%,
      rgba(16, 18, 19, .3) 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 {
  /* Weiß statt hellem Gold: Das Gold erreichte vor heller Hauswand und
     Wolken keine 4,5:1 (15 px Schrift) */
  color: var(--auf-bild);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.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; }
  /* Dann dürfen sie auch umbrechen: „Demander sans engagement“ ragte bei
     320 px sonst über den Rand */
  .buehne__knoepfe .knopf, .abschluss .knopfreihe .knopf {
    white-space: normal;
    text-align: center;
    padding-inline: var(--ab-4);
  }
}

/* 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(3, 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); }
/* Die Spalte steht neben dem Formular, nicht darunter: eigene h2, aussehend
   wie die früheren h3 */
.kontaktspalte h2 {
  font-size: var(--grad-lg);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  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; } }

/* align-content: start – bekommt das Nachbarfeld im Paar eine
   Fehlermeldung, wird dieses Feld sonst in die Höhe gezogen */
.feld { display: grid; gap: var(--ab-2); align-content: start; }
.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);
}
/* Kein outline: none – der Fokusrahmen aus Abschnitt 4 gilt auch hier.
   Der Lichthof allein reicht nicht: Er hat kaum Kontrast und verschwindet
   bei erzwungenen Farben (Windows-Kontrastmodus) ganz. */
.feld input:user-invalid, .feld textarea:user-invalid,
.feld [aria-invalid="true"] { border-color: var(--fehler); }
/* Fehlermeldung unter dem Feld (main.js), dazu der rote Rand */
.feld .feld__fehler { color: var(--fehler); }

/* Felder mit einem gemeinsamen Hinweis darunter (Personenzahl) */
.feldgruppe { display: grid; gap: var(--ab-2); }
.feldgruppe > .hilfe { font-size: var(--grad-xs); color: var(--text-zart); }

/* Verweis auf den Datenschutz statt eines Einwilligungskästchens: Die
   Anfrage stützt sich auf Art. 6 Abs. 1 lit. b DSGVO. */
.formular__datenschutz { margin: 0; font-size: var(--grad-sm); color: var(--text-leise); }

/* 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; }

/* Meldeformular (fiche individuelle de police) ----------------------------
   Ein Bogen je Person ab 15 Jahren (src/seiten.py). Beschriftung: die
   Landessprache groß, darunter klein die amtliche Bezeichnung auf
   Französisch und Englisch. Kopf, Unterschrift und Datenschutz-Fußzeile
   des amtlichen Musters und die Textzeilen (.mf-wert) stehen nur im
   Druck. Die Klasse mf--aktiv setzt assets/js/meldeformular.js.          */

.meldeformular { display: grid; gap: var(--ab-7); }
.meldeformular [hidden] { display: none !important; }
.meldeformular fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.meldeformular legend { padding: 0; }
/* Knöpfe dürfen umbrechen, sonst laufen lange Beschriftungen schmal über */
.meldeformular .knopf { white-space: normal; text-align: left; }

.mf-boegen, .mf-bogen { display: grid; gap: var(--ab-7); }
.mf-bogen + .mf-bogen { padding-top: var(--ab-7); border-top: 1px solid var(--linie-kraeftig); }
.mf-legende { font-size: var(--grad-xl); font-weight: 420; margin: 0 0 var(--ab-4); }
.mf-aufenthalt > .hilfe { margin: 0 0 var(--ab-4); font-size: var(--grad-sm); color: var(--text-zart); }

.mf-felder { display: grid; gap: var(--ab-5); }
@media (min-width: 40rem) {
  .mf-felder { grid-template-columns: 1fr 1fr; }
  .mf-feld--breit { grid-column: 1 / -1; }
}
/* Felder neben einem Feld mit Hinweis nicht in die Höhe ziehen */
.mf-feld { align-content: start; }
.mf-etikett { margin: 0; font-size: var(--grad-sm); font-weight: 500; }
.mf-nr {
  display: inline-block;
  min-width: 1.9em;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.mf-amtlich { display: block; font-size: var(--grad-xs); font-weight: 400; color: var(--text-zart); }
.mf-nr ~ .mf-amtlich { padding-left: 1.9em; }
.feld .hilfe.mf-fehler { color: var(--fehler); }
.feld input[aria-invalid="true"] { border-color: var(--fehler); }

.mf-wert, .mf-nurdruck { display: none; }
/* Feld 9 steht auf dem Bildschirm als Text, übernommen von oben */
.mf-spiegelfeld .mf-wert { display: block; min-height: 1.7em; margin: 0; font-size: var(--grad-base); }
.meldeformular:not(.mf--aktiv) .mf-spiegelfeld,
.meldeformular:not(.mf--aktiv) .mf-unterkunftzeile { display: none; }

/* Kinder: ein Kasten je Bogen. Den leeren Block braucht nur, wer kein
   Skript hat; mit Skript erscheint er nur noch im Druck. */
.mf-kinder {
  display: grid;
  gap: var(--ab-5);
  justify-items: start;
  padding: var(--ab-5);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}
.mf-kinder > * { justify-self: stretch; }
.mf-kinder > .knopf { justify-self: start; }
.mf-kinder__titel { font-size: var(--grad-lg); font-weight: 500; margin: 0; }
.mf-kinderliste { display: grid; gap: var(--ab-6); }
.mf-kinder > .hilfe { margin: 0; font-size: var(--grad-xs); color: var(--text-zart); }
.mf-kind { display: grid; gap: var(--ab-4); }
.mf-kind legend { margin-bottom: var(--ab-3); font-weight: 500; }
.js .mf-kind--blanko { display: none; }
.mf-weg { justify-self: start; }

.mf-knoepfe { display: grid; gap: var(--ab-5); justify-items: start; }
.mf-status { margin: 0; font-size: var(--grad-sm); color: var(--text-leise); }


/* ---------- 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; }
.zart { color: var(--text-zart); }
.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, .buehne .augenbraue { 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; }

  /* Meldeformular: nur die Bögen, jeder auf einer eigenen A4-Seite in der
     Reihenfolge des amtlichen Musters. Mit Skript (mf--aktiv) stehen statt
     der Felder Textzeilen, die umbrechen statt abzuschneiden; ohne Skript
     werden die Felder selbst gedruckt. */
  .seite-meldeformular .buehne, .seite-meldeformular .fuss,
  .seite-meldeformular main > .abschnitt--getoent,
  .mf-abschnitt .kopfzeile-abschnitt, .meldeformular noscript,
  .mf-knoepfe, .mf-status, .mf-person > legend, .mf-aufenthalt > legend,
  .meldeformular .hilfe { display: none !important; }
  .mf-abschnitt { padding: 0; }
  .mf-abschnitt .huelle { width: auto; }
  .mf-boegen { display: block; }
  .mf-bogen { page: meldebogen; display: block; color: #000; font-size: 9pt; line-height: 1.3; }
  .mf-bogen + .mf-bogen { break-before: page; padding-top: 0; border: 0; }
  .mf-nurdruck { display: block; }

  .mf-druckkopf { margin-bottom: 3mm; text-align: center; }
  .mf-titel { margin: 0 0 1.5mm; font-size: 15pt; font-weight: 600; letter-spacing: .04em; }
  .mf-hinweis { margin: 0 0 1mm; font-size: 8pt; }
  .mf-majuskeln { margin: 0 0 2mm; font-size: 9pt; font-weight: 600; }
  .mf-druckkopf .mf-feld { text-align: left; border-top: .6pt solid #000; }

  /* Eine Zeile je Feld: Beschriftung links, Wert rechts auf der Linie */
  .mf-felder { display: block; }
  .mf-feld {
    display: grid;
    grid-template-columns: 66mm 1fr;
    gap: 0 3mm;
    align-items: end;
    min-height: 8mm;
    padding: .6mm 0;
    border-bottom: .6pt solid #000;
    break-inside: avoid;
  }
  .mf-feld label, .mf-etikett, .mf-kinder__titel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .35em;
    margin: 0;
    color: #000;
    font-size: 8.5pt;
    font-weight: 400;
  }
  .mf-nr { order: 0; min-width: 0; color: #000; font-weight: 600; }
  .mf-amtlich { order: 1; flex: 1 1 0; display: inline; padding-left: 0 !important; color: #000; font-size: 8.5pt; }
  .mf-lokal { order: 2; flex-basis: 100%; color: #444; font-size: 7.5pt; }
  html[lang="fr"] .mf-lokal { display: none; }
  .mf-feld--wohnsitz { min-height: 14mm; }
  .mf-feld--unterschrift { min-height: 12mm; }

  .mf--aktiv input, .mf--aktiv select, .mf--aktiv textarea,
  .mf--aktiv .mf-aufenthalt { display: none !important; }
  .mf--aktiv .mf-wert, .mf-spiegelfeld .mf-wert {
    display: block;
    min-height: 0;
    margin: 0;
    font-size: 10.5pt;
    text-transform: uppercase;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .mf-feld--email .mf-wert { text-transform: none; }
  .meldeformular:not(.mf--aktiv) .mf-feld input,
  .meldeformular:not(.mf--aktiv) .mf-feld select,
  .meldeformular:not(.mf--aktiv) .mf-feld textarea {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 10.5pt;
  }

  /* Kinder als Tabelle: Zeilen K1–K8, je Kind eine Spalte. Die
     Beschriftung steht nur beim ersten sichtbaren Kind (dem leeren Block,
     solange kein Kind eingetragen ist); die übrigen Kinder bringen nur
     ihre Werte mit und teilen sich die Zeilenhöhe. */
  .mf-kinder { display: block; margin-top: 2mm; padding: 0; border: 0; background: none; }
  .mf-kinder__titel { padding-bottom: .8mm; border-bottom: .6pt solid #000; font-size: 9pt; font-weight: 600; }
  .mf-kinderliste {
    display: grid;
    grid-template-columns: 66mm;
    grid-template-rows: repeat(9, auto);
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 0 3mm;
    break-inside: avoid;
  }
  .mf-kind, .mf-kind .mf-felder { display: contents; }
  .mf-kind legend { padding-top: 1.5mm; font-size: 8pt; font-weight: 600; }
  .mf-kind .mf-feld {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    grid-column: auto;
    min-height: 7mm;
  }
  .mf-kind .mf-feld--wohnsitz { min-height: 12mm; }
  .mf-kind .mf-feld label { display: none; }
  .mf-kind .mf-wert { font-size: 9.5pt; }
  .mf--aktiv .mf-kind--blanko { display: contents; }
  .mf-kind--blanko:not([hidden]) legend,
  .mf-kind--blanko[hidden] + .mf-kind legend { grid-column: span 2; padding-left: 69mm; }
  .mf-kind--blanko:not([hidden]) .mf-feld,
  .mf-kind--blanko[hidden] + .mf-kind .mf-feld { display: grid; grid-column: span 2; align-items: end; }
  .mf-kind--blanko:not([hidden]) .mf-feld label,
  .mf-kind--blanko[hidden] + .mf-kind .mf-feld label { display: flex; }

  .mf-druckfuss { margin-top: 3mm; font-size: 6.5pt; line-height: 1.3; break-inside: avoid; }
  .mf-druckfuss p { margin: 0 0 1mm; }
}

@page meldebogen { size: A4 portrait; margin: 10mm 12mm; }