@import url("../fonts/schriften.css");

/* ==========================================================================
   Brünnl's Försterhütte — Bestandesaufnahme
   Das Haus wird aufgenommen wie ein Waldbestand: Flächen, Grenzen,
   Nummern. Eine Farbfamilie, Hauptton das Logogrün. Richtungsvertrag in
   site/.impeccable/surfaces/site-index-html.md
   ========================================================================== */

:root {
  /* Eine einzige Familie: Grüntöne und ein warmer Steinton. Hauptton ist
     das Logogrün #354e41. Die Abstufungen stammen aus der Vorlage des
     Betreibers, nur der Seitengrund ist daraus abgedunkelt. */
  --grund:   #1d2b24;   /* Seitengrund, abgedunkelter Hauptton */
  --haupt:   #354e41;   /* HAUPTTON, Logogrün: Flächen, Tafeln, Plätze */
  --band:    #3b5b40;   /* zweites Grün, trägt das Gasthausband */
  --zeichen: #588158;   /* Markierung: Striche, Grenzen, nie Fließtext */
  --leise:   #a4b18b;   /* Salbei: stille Schrift, 6,5:1 auf Grund */
  --hell:    #dcd7cd;   /* Stein: Schrift auf Dunkel, 10,3:1, und Vollfläche */

  /* Schrift auf den drei Flächenarten */
  --auf-dunkel:       var(--hell);
  --auf-dunkel-leise: var(--leise);
  --auf-hell:         var(--grund);   /* 10,3:1 auf Stein */
  --auf-hell-leise:   #4a5c4f;        /* 5,6:1 auf Stein */

  --linie:      #31473a;   /* Trennlinie auf Dunkel */
  --linie-hell: #b9b4a7;   /* Trennlinie auf der Steinfläche */

  --container: 1320px;
  --rand: clamp(1.25rem, 4vw, 3.5rem);
  --kapitel: clamp(4.5rem, 9vw, 8rem);

  --schrift: "Archivo", system-ui, -apple-system, sans-serif;        /* Display */
  --schrift-text: "Barlow", system-ui, -apple-system, sans-serif;    /* Fließtext */
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Grundlagen --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--auf-dunkel);
  font-family: var(--schrift-text);
  font-variation-settings: "wdth" 100;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Die Flächen tragen Nummern und Zahlen: durchgehend Tabellenziffern,
   damit Spalten stehen. */
.zahl, .tag, .entfernungen b, .kennzahl__wert, .flaeche__zahl, .note__wert,
.kondition__wert, .monat__gitter { font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--schrift); }

/* Alles, was gesperrt in Versalien steht, bleibt Archivo: dort trägt die
   Breitenachse die Hierarchie, die Barlow nicht hat. */
.knopf, .navi a, .menue a, .leiste, .flaeche__zahl, .flaeche__anzahl,
.weg__zahl, .weg__art, .monat__name, .monat__wochentag, .naechste__label,
.kondition__label, .note__quelle, .stimme footer, .fuss h3, .portal,
.tafel figcaption, .vermerk footer, .strich, .kondition__wert,
.naechste__wert, .note__wert, .flaeche__name, .weg__ziel, .entfernungen b,
.stand, .aufklapper summary, .feld label, .einwilligung label {
  font-family: var(--schrift);
}

h1, h2 {
  font-weight: 700;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

h3 {
  font-weight: 600;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

/* --- Browser-Oberflächen gehören zur Gestaltung ------------------------- */

::selection { background: var(--zeichen); color: var(--grund); }
:focus-visible {
  outline: 2px solid var(--zeichen);
  outline-offset: 2px;
}
a:not(.knopf) {
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linie-hell);
}
a:not(.knopf):hover { text-decoration-color: currentColor; }

input, textarea, select { caret-color: var(--zeichen); }

* { scrollbar-width: thin; scrollbar-color: var(--linie-hell) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--linie-hell); border: 3px solid var(--grund); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Raster ------------------------------------------------------------- */

.bogen {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.kapitel { padding-block: var(--kapitel); }
.kapitel--hell {
  background: var(--hell); color: var(--auf-hell);
  /* Ohne diese Zeile zeichnet der Browser Kästchen, Pfeile und Cursor der
     Formularelemente im Dunkelschema der Seite — auf dem Steinton wird
     daraus ein schwarzer Klotz. */
  color-scheme: light;
}
.kapitel--band { background: var(--band); color: var(--auf-dunkel); }

.t-gross { font-size: clamp(2rem, 4.4vw, 3.5rem); }
.t-mittel { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }

.lead {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--auf-dunkel-leise);
  max-width: 52ch;
}
.kapitel--hell .lead { color: var(--auf-hell); font-weight: 500; }

/* Icons nehmen die Schriftfarbe. Die Pfade im Satz tragen bewusst keine
   eigene Füllung — fehlt diese Regel, malt der Browser sie schwarz. */
.ikon {
  width: 1.125rem; height: 1.125rem;
  flex: none;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

/* --- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.knopf .ikon { width: 1rem; height: 1rem; }

/* Die Handlung dreht ihre Fläche um: auf dem dunklen Grund steht sie hell,
   auf der Steinfläche dunkel. In einem Farbsystem ohne Signalfarbe ist die
   Umkehrung das stärkste Mittel, das bleibt. */
.knopf--markiert { background: var(--hell); color: var(--auf-hell); }
.knopf--markiert:hover { background: #ffffff; }
.kapitel--hell .knopf--markiert, .bestand .knopf--markiert {
  background: var(--haupt); color: var(--auf-dunkel);
}
.kapitel--hell .knopf--markiert:hover, .bestand .knopf--markiert:hover { background: var(--grund); }

.knopf--linie { border-color: var(--linie); color: var(--auf-dunkel); background: transparent; }
.knopf--linie:hover { background: var(--haupt); border-color: var(--haupt); }
.kapitel--hell .knopf--linie { border-color: var(--linie-hell); color: var(--auf-hell); }
.kapitel--hell .knopf--linie:hover { background: var(--haupt); border-color: var(--haupt); color: var(--auf-dunkel); }

/* --- Kopfleiste --------------------------------------------------------- */

/* Die Leiste steht immer auf eigenem Grund. Über einem Foto ist der
   Kontrast sonst nicht berechenbar, er hängt davon ab, was zufällig
   hinter den Buchstaben liegt. Sie ist der Kopf des Bogens. */
.leiste {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--grund);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--aus);
}
.leiste[data-fest="ja"] { border-bottom-color: var(--linie); }
.leiste__inner {
  max-width: var(--container); margin-inline: auto;
  padding: 1.25rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.leiste__logo { height: 2.25rem; width: auto; display: block; }

.navi { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.navi a:not(.knopf) {
  text-decoration: none; color: var(--auf-dunkel);
  font-size: 0.75rem; font-weight: 600; font-variation-settings: "wdth" 82;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 0.2s;
}
.navi a:not(.knopf):hover { color: var(--leise); }
.navi__punkte { display: contents; }
@media (max-width: 1023px) { .navi__punkte { display: none; } }

.menue-knopf {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--linie); background: transparent; color: var(--auf-dunkel);
  cursor: pointer;
}
/* Offen und zu sind zwei Zeichen, kein gedrehter Pfeil: der Pfeil sagt
   „aufklappen", das Kreuz sagt „schließen". */
.menue-knopf .ikon { width: 1.25rem; height: 1.25rem; }
.menue-knopf__zu { display: none; }
.menue-knopf[aria-expanded="true"] .menue-knopf__auf { display: none; }
.menue-knopf[aria-expanded="true"] .menue-knopf__zu { display: inline-block; }
@media (max-width: 1023px) { .menue-knopf { display: inline-flex; } }

/* Die Handlung bleibt auch auf dem Telefon in der Leiste, nur enger
   gesetzt. Sie ganz zu verstecken hieße, sie hinter ein Menü zu legen. */
@media (max-width: 639px) {
  .leiste .knopf--markiert { padding: 0.6rem 0.75rem; font-size: 0.6875rem; letter-spacing: 0.06em; }
  .leiste__logo { height: 1.875rem; }
}

.menue {
  position: fixed; inset: 4.5rem 0 auto; z-index: 49;
  background: var(--grund); border-bottom: 1px solid var(--linie);
  padding: 0.5rem var(--rand) 1.5rem;
  display: grid; max-height: calc(100dvh - 4.5rem); overflow-y: auto;
}
.menue a {
  padding: 0.9rem 0; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: var(--auf-dunkel);
  font-size: 0.875rem; font-weight: 600; font-variation-settings: "wdth" 88;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.menue a:last-child { border-bottom: 0; }

/* --- Kopf --------------------------------------------------------------
   Das Bild trägt die erste Ansicht über die volle Breite. Die Schrift
   steht nicht darauf, sondern in einer eigenen Fläche mit harter Kante,
   die davor liegt: so ist der Kontrast gerechnet und nicht gehofft. */

.kopf {
  position: relative;
  isolation: isolate;
  min-height: 90vh;
  min-height: 90dvh;
  display: flex;
  align-items: flex-end;
  padding-top: 5rem;
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.kopf__bild { position: absolute; inset: 0; z-index: 0; display: block; }
.kopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* Ein flacher Schleier, keine Weichzeichnung: er senkt nur die Helligkeit
   des Bildes, damit die Tafel darauf nicht flimmert. */
.kopf::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgb(29 43 36 / 0.18);
}

.kopf__inhalt { position: relative; z-index: 2; width: 100%; }

.kopf__tafel {
  background: var(--grund);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.75rem, 3.5vw, 3rem);
  max-width: 44rem;
}
.kopf h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); margin-bottom: 1.25rem; }
.kopf__text { max-width: 42ch; color: var(--auf-dunkel-leise); font-size: clamp(1rem, 1.3vw, 1.125rem); margin-bottom: 1.75rem; }
.kopf__tafel .knopf { margin-bottom: 0; }

@media (max-width: 639px) {
  .kopf { min-height: 92vh; min-height: 92dvh; padding-top: 4.5rem; }
  .kopf__tafel { padding: 1.5rem 1.375rem; }
}

/* Eingesetzte Tafel: Bild mit Nummer und Unterschrift am Rand, wie im Bogen. */
.tafel { position: relative; margin: 0; }
.tafel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tafel figcaption {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 0.7rem; padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
  font-size: 0.75rem; font-variation-settings: "wdth" 78; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--auf-dunkel-leise);
}

/* Das Ockerband: der Bestand in drei Zeilen, und darin die Handlung. */
.bestand { background: var(--hell); color: var(--auf-hell); }
.bestand__gitter {
  display: grid; grid-template-columns: 1.4fr auto;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
}
@media (max-width: 859px) { .bestand__gitter { grid-template-columns: 1fr; } }

.bestand__abfrage { align-self: start; }
.bestand__text { max-width: 28ch; margin-bottom: 1.5rem; font-weight: 500; }
.naechste {
  display: grid; gap: 0.3rem; margin-bottom: 1.1rem;
  padding-top: 0.85rem; border-top: 2px solid var(--auf-hell);
}
.naechste__label { font-size: 0.6875rem; font-weight: 700; font-variation-settings: "wdth" 78; letter-spacing: 0.14em; text-transform: uppercase; }
.naechste__wert { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 700; font-variation-settings: "wdth" 115; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.bestand__liste { list-style: none; margin: 0; padding: 0; }
.bestand__liste li {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1.25rem; align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linie-hell);
}
.bestand__liste li:first-child { border-top: 1px solid var(--linie-hell); }
.flaeche__zahl {
  font-size: 0.8125rem; font-weight: 600; font-variation-settings: "wdth" 78;
  letter-spacing: 0.08em;
}
.flaeche__art {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem); font-weight: 700;
  font-variation-settings: "wdth" 120; letter-spacing: -0.03em;
}
.flaeche__wert { font-size: 1rem; font-weight: 600; font-variation-settings: "wdth" 85; }

/* --- Befund, Fließtext -------------------------------------------------- */

.befund__gitter {
  display: grid; grid-template-columns: 1fr 0.8fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start;
}
@media (max-width: 859px) { .befund__gitter { grid-template-columns: 1fr; } }
.befund h2 { margin-bottom: 1.75rem; }

.vermerk {
  margin: 2.5rem 0 0; padding: 1.25rem 0 0;
  border-top: 2px solid var(--hell);
}
.vermerk p { font-size: 1.125rem; font-weight: 500; max-width: 46ch; margin-bottom: 0.6rem; }
.vermerk footer {
  font-size: 0.75rem; font-variation-settings: "wdth" 78; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--auf-dunkel-leise);
}

/* --- Räume als aufgenommene Flächen ------------------------------------- */

.flaechen { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (max-width: 719px) { .flaechen { grid-template-columns: 1fr; } }

.flaeche { margin: 0; }
.flaeche__rahmen {
  display: block; width: 100%; padding: 0; border: 0; color: inherit;
  background: var(--haupt); overflow: hidden; cursor: pointer;
}
.flaeche__rahmen img { width: 100%; height: 100%; object-fit: cover; }
/* Die Quelle gibt 4:3 und 1200 px her. Jeder andere Zuschnitt vergroessert
   nur die Schwaechen der Innenaufnahmen, deshalb bleibt es beim Original. */
.flaeche__rahmen img { aspect-ratio: 4 / 3; }

.flaeche figcaption {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1rem; align-items: baseline;
  margin-top: 1rem; padding-top: 0.7rem;
  border-top: 1px solid var(--linie);
}
.kapitel--hell .flaeche figcaption { border-top-color: var(--linie-hell); }
.flaeche__name { font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-weight: 700; font-variation-settings: "wdth" 118; letter-spacing: -0.02em; }
.flaeche__anzahl { font-size: 0.75rem; font-variation-settings: "wdth" 78; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--auf-dunkel-leise); }
.kapitel--hell .flaeche__anzahl { color: var(--auf-hell); }
.flaeche > p { margin-top: 0.7rem; font-size: 0.9375rem; color: var(--auf-dunkel-leise); max-width: 42ch; }
.kapitel--hell .flaeche > p { color: var(--auf-hell); }

/* Lichtkasten */
.lichtkasten { border: 0; padding: 0; background: transparent; max-width: min(92vw, 66rem); }
.lichtkasten::backdrop { background: rgb(8 18 12 / 0.95); }
.lichtkasten img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.lichtkasten__leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; color: var(--auf-dunkel); }
.lichtkasten__name { font-weight: 700; font-variation-settings: "wdth" 115; font-size: 1.25rem; }
.lichtkasten__knoepfe { display: flex; gap: 0.5rem; align-items: center; }
.lichtkasten button {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--linie); background: transparent; color: var(--auf-dunkel); cursor: pointer;
}
.lichtkasten button:hover { background: var(--hell); border-color: var(--hell); color: var(--auf-hell); }

/* --- Ausstattung als Strichliste ---------------------------------------- */

.strichliste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  border-top: 1px solid var(--linie-hell);
}
.strich {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1rem 1.5rem 1rem 0;
  border-bottom: 1px solid var(--linie-hell);
  font-size: 0.9375rem;
}
.strich .ikon { width: 1.125rem; height: 1.125rem; flex: none; }

.fehlt {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  font-size: 0.875rem; font-weight: 500;
}
.fehlt li { display: flex; align-items: center; gap: 0.5rem; }
.fehlt .ikon { width: 1rem; height: 1rem; }
/* Durchgestrichen: was nicht im Bestand ist, wird gestrichen, nicht ausgegraut. */
.fehlt li span { text-decoration: line-through; text-decoration-color: var(--zeichen); text-decoration-thickness: 2px; }

/* --- Belegung als Bestandesbuch ----------------------------------------- */

.belegung__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }

.legende { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--auf-dunkel-leise); }
.legende li { display: flex; align-items: center; gap: 0.5rem; }
.legende__feld { width: 1.125rem; height: 1.125rem; border: 1px solid var(--linie); position: relative; }
.legende__feld--frei { background: var(--haupt); }
.legende__feld--belegt { background: transparent; }
.legende__feld--belegt::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--zeichen) calc(50% - 1px), var(--zeichen) calc(50% + 1px), transparent calc(50% + 1px));
}
.legende__feld--wechsel {
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--hell) calc(50% - 1px), var(--hell) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent 0 50%, var(--haupt) 50% 100%);
}
.legende__feld--wahl { background: var(--hell); border-color: var(--hell); }

.stand { font-size: 0.8125rem; color: var(--auf-dunkel-leise); display: flex; align-items: center; gap: 0.5rem; }
.stand[data-frisch="nein"] { color: var(--zeichen); }

.monate { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.25rem 2.5rem; }
.monat__name {
  font-size: 0.8125rem; font-weight: 700; font-variation-settings: "wdth" 80;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 0.5rem; margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--linie);
}
.monat__gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; position: relative; }
.monat__wochentag {
  font-size: 0.625rem; font-weight: 600; font-variation-settings: "wdth" 75;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--auf-dunkel-leise); text-align: center; padding-bottom: 0.4rem;
}

.tag {
  position: relative;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 500;
  border: 1px solid transparent; background: transparent;
  padding: 0; font-family: inherit; color: var(--auf-dunkel-leise);
}
.tag--leer { visibility: hidden; }

/* Aufgenommene, also freie Nächte sind Flächen. Belegte werden gestrichen. */
/* Aufgenommene, also freie Nächte sind Tafeln. Der Hauptton allein hebt
   sich vom Grund nur mit 1,6:1 ab, deshalb trägt die Tafel einen Rand in
   der Markierfarbe: 3,3:1, damit der Zustand auch als Fläche lesbar ist. */
.tag--frei, .tag--wechsel_an, .tag--wechsel_ab {
  background: var(--haupt);
  border-color: var(--zeichen);
  color: var(--auf-dunkel);
}
.tag--wechsel_an {
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--hell) calc(50% - 1px), var(--hell) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent 0 50%, var(--haupt) 50% 100%);
}
.tag--wechsel_ab {
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--hell) calc(50% - 1px), var(--hell) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, var(--haupt) 0 50%, transparent 50% 100%);
}

.tag--belegt::after {
  content: ""; position: absolute; inset: 2px;
  background: linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--zeichen) calc(50% - 0.75px), var(--zeichen) calc(50% + 0.75px), transparent calc(50% + 0.75px));
  opacity: 0.75;
}

.tag--waehlbar { cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.tag--waehlbar:hover { background: var(--band); border-color: var(--hell); }

.tag--gewaehlt, .tag--spanne { background: var(--hell); border-color: var(--hell); color: var(--auf-hell); font-weight: 700; }

/* Der eine gestaltete Moment: die gewählte Spanne wird eingegrenzt wie eine
   Abteilungsgrenze auf der Karte. Die Linie läuft von links ein. */
.tag--gewaehlt::before, .tag--spanne::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--haupt);
  transform: scaleX(0); transform-origin: left;
  animation: grenze-ziehen 0.45s var(--aus) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.tag--von::after, .tag--bis::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; width: 2px;
  background: var(--haupt);
}
.tag--von::after { left: -1px; }
.tag--bis::after { right: -1px; }

@keyframes grenze-ziehen { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .tag--gewaehlt::before, .tag--spanne::before { animation: none; transform: scaleX(1); }
}

.tag--vergangen { opacity: 0.22; }
.tag--vergangen::after { display: none; }

.skelett .tag { background: var(--haupt); border-color: transparent; animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .skelett .tag { animation: none; opacity: 0.6; } }

.belegung__melde {
  padding: 1.1rem 1.35rem; border: 1px solid var(--linie); background: var(--haupt);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.belegung__melde .ikon { color: var(--zeichen); }

.belegung__fuss {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.auswahl-anzeige { font-size: 1.0625rem; font-weight: 600; font-variation-settings: "wdth" 95; margin: 0; }
.auswahl-anzeige span { font-weight: 400; color: var(--auf-dunkel-leise); }

.konditionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-top: 3rem; border-top: 1px solid var(--linie); }
.kondition { padding: 1.5rem 1.5rem 1.5rem 0; }
.kondition + .kondition { border-left: 1px solid var(--linie); padding-left: 1.5rem; }
.kondition__label { display: block; font-size: 0.6875rem; font-variation-settings: "wdth" 78; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--auf-dunkel-leise); margin-bottom: 0.5rem; }
.kondition__wert { display: block; font-size: 1.375rem; font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -0.02em; line-height: 1.1; }
.kondition__zusatz { font-size: 0.8125rem; color: var(--auf-dunkel-leise); }
@media (max-width: 639px) {
  .kondition, .kondition + .kondition { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--linie); }
}

/* --- Anfrage ------------------------------------------------------------ */

.anfrage__gitter { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 859px) { .anfrage__gitter { grid-template-columns: 1fr; } }

.feld { display: grid; gap: 0.4rem; margin-bottom: 1.4rem; align-content: start; }
.feld label { font-size: 0.6875rem; font-variation-settings: "wdth" 78; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--auf-hell); }
.feld input, .feld textarea, .feld select {
  font-family: inherit; font-size: 1rem; font-variation-settings: "wdth" 100;
  padding: 0.75rem 0; border: 0; border-bottom: 1.5px solid var(--linie-hell);
  background: transparent; color: var(--auf-hell); width: 100%; border-radius: 0;
}
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: 0; border-bottom-color: var(--hell); border-bottom-width: 2px; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--auf-hell-leise); opacity: 1; }
.feld textarea { border: 1.5px solid var(--linie-hell); padding: 0.75rem; }
.feld__fehler { font-size: 0.8125rem; font-weight: 600; color: #5e1008; }
.feld[data-fehler="ja"] input, .feld[data-fehler="ja"] textarea { border-color: #5e1008; }

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.einwilligung { display: flex; gap: 0.75rem; align-items: flex-start; margin: 1.75rem 0 1.5rem; font-size: 0.9375rem; }
.einwilligung input {
  width: 1.5rem; height: 1.5rem; margin-top: 0.25rem; flex: none;
  accent-color: var(--haupt);
}
.einwilligung label { max-width: 54ch; }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gastgeber { border-top: 2px solid var(--auf-hell); padding-top: 1.75rem; }
.gastgeber img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1.5rem; }
.gastgeber h3 { margin-bottom: 0.6rem; }
.zeile {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 0; border-top: 1px solid var(--linie-hell);
  text-decoration: none; font-size: 0.9375rem;
}
.zeile:first-of-type { margin-top: 1.5rem; }
.zeile .ikon { width: 1.0625rem; height: 1.0625rem; }

/* Die Meldung ist ein aufgelegter Zettel, kein getoentes Ockerfeld: auf der
   Ockerflaeche traegt nur ein dunkler Grund genug Kontrast. */
.formular-melde {
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  border-left: 3px solid var(--zeichen);
  background: var(--haupt); color: var(--auf-dunkel);
}
.formular-melde a { color: var(--auf-dunkel); }
/* Die Markierfarbe steht nur am Fehler. Gelungenes traegt Ocker, eine blosse
   Anmerkung den aufgehellten Stempelton. */
.formular-melde[data-art="erfolg"] { border-left-color: var(--hell); }
.formular-melde[data-art="hinweis"] { border-left-color: var(--zeichen); }

/* --- Gasthaus Brünnl ---------------------------------------------------- */

/* Das Gasthausband ist der einzige Ort, an dem das Brünnl-Gold auftaucht.
   Es gehört dem Gasthaus, nicht der Hütte, und markiert hier genau das. */
.bruennl {
  --gold: #ffcd1c;
  background: var(--band); color: var(--auf-dunkel);
  padding-block: clamp(3rem, 5.5vw, 4.5rem);
  border-top: 3px solid var(--gold);
}
.bruennl__gitter { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.bruennl__gitter > div { align-self: center; }
/* Vier Tafeln statt einer: der Spielplatz, das Gehege, das Trampolin und
   die Schaukel sind genau das, was in den Bewertungen vorkommt. */
.bruennl__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-self: center; }
.bruennl__bilder picture { display: block; }
.bruennl img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bruennl h2 { margin-bottom: 1.1rem; }
.bruennl p { margin-bottom: 1.6rem; max-width: 46ch; }
.bruennl__aktionen { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.bruennl__aktionen .knopf--linie:first-child {
  background: var(--gold); border-color: var(--gold); color: #2a1f04;
}
.bruennl__aktionen .knopf--linie:first-child:hover { background: #ffd949; border-color: #ffd949; }
.bruennl__aktionen .knopf--linie { border-color: var(--gold); color: var(--gold); }
.bruennl__aktionen .knopf--linie:hover { background: var(--gold); color: #2a1f04; }
@media (max-width: 859px) { .bruennl__gitter { grid-template-columns: 1fr; } }

/* --- Lage --------------------------------------------------------------- */

.lage__tafel { margin: 0; }
.lage__bild { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 719px) { .lage__bild { aspect-ratio: 4 / 3; } }
.lage__gitter { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 859px) { .lage__gitter { grid-template-columns: 1fr; } }

.entfernungen { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; border-top: 1px solid var(--linie); }
.entfernungen li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--linie); }
.entfernungen span { color: var(--auf-dunkel-leise); }
.entfernungen b { font-weight: 600; }

.gaestekarte { border-top: 2px solid var(--hell); padding-top: 1.25rem; margin-bottom: 2.75rem; }
.gaestekarte h3 { margin-bottom: 0.6rem; }

/* Wege als nummerierte Aufnahme, nicht als drei Merkmalskarten: dieselbe
   Figur wie die Entfernungstabelle darueber. */
.wege {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--linie);
}
.weg {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1.25rem; align-items: baseline;
  padding: 0.85rem 0; border-bottom: 1px solid var(--linie);
}
.weg__zahl { font-size: 0.6875rem; font-weight: 600; font-variation-settings: "wdth" 78; letter-spacing: 0.12em; color: var(--auf-dunkel-leise); font-variant-numeric: tabular-nums; }
.weg__ziel { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700; font-variation-settings: "wdth" 118; letter-spacing: -0.02em; }
.weg__art { font-size: 0.8125rem; font-variation-settings: "wdth" 80; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--auf-dunkel-leise); text-align: right; }
@media (max-width: 519px) {
  .weg { grid-template-columns: auto 1fr; }
  .weg__art { grid-column: 2; text-align: left; letter-spacing: 0.06em; }
}

/* --- Stimmen ------------------------------------------------------------ */

.noten { display: flex; gap: clamp(2.5rem, 6vw, 4.5rem); flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.note__wert { display: block; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 700; font-variation-settings: "wdth" 120; letter-spacing: -0.03em; line-height: 1; }
.note__quelle { font-size: 0.75rem; font-variation-settings: "wdth" 78; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--auf-dunkel-leise); }

.stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(2rem, 4vw, 3rem); }
.stimme { border-top: 1px solid var(--linie); padding-top: 1.5rem; }
.stimme__sterne { display: flex; gap: 2px; margin-bottom: 1rem; }
.stimme__sterne .ikon { width: 0.8125rem; height: 0.8125rem; color: var(--hell); }
.stimme blockquote { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.55; }
.stimme footer { font-size: 0.75rem; font-variation-settings: "wdth" 78; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--auf-dunkel-leise); }

/* --- Gut zu wissen ------------------------------------------------------ */

.wissen { max-width: 48rem; }
.aufklapper { border-top: 1px solid var(--linie); }
.aufklapper:last-of-type { border-bottom: 1px solid var(--linie); }
.aufklapper summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600; font-variation-settings: "wdth" 105;
}
.aufklapper summary::-webkit-details-marker { display: none; }
.aufklapper summary .ikon { width: 1rem; height: 1rem; color: var(--auf-dunkel-leise); transition: transform 0.25s var(--aus); }
.aufklapper[open] summary .ikon { transform: rotate(180deg); }
.aufklapper__inhalt { padding-bottom: 1.4rem; }
.aufklapper__inhalt p { color: var(--auf-dunkel-leise); }

/* --- Fuß ---------------------------------------------------------------- */

.fuss {
  background: var(--haupt);
  /* Auf dem Hauptton reicht Salbei nicht: eine Stufe heller, 4,7:1. */
  --auf-dunkel-leise: #b4c09c;
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
.fuss__gitter { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.fuss__logo { height: 2.125rem; width: auto; margin-bottom: 1.5rem; }
.fuss h3 { font-size: 0.6875rem; font-weight: 600; font-variation-settings: "wdth" 78; letter-spacing: 0.14em; text-transform: uppercase; color: var(--auf-dunkel-leise); margin-bottom: 1.1rem; }
.fuss p, .fuss li { color: var(--auf-dunkel-leise); font-size: 0.9375rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* Zielgroesse nach WCAG 2.5.8: die Fussnotenlinks sind keine Fliesstextlinks
   und muessen deshalb selbst gross genug sein. */
.fuss li a { display: inline-block; padding: 0.4rem 0; min-height: 1.5rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--auf-dunkel); }
.portal { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding: 0.7rem 0.95rem; border: 1px solid var(--linie); text-decoration: none; font-size: 0.8125rem; }
.portal .ikon { width: 0.875rem; height: 0.875rem; color: var(--hell); }
.fuss__unten { padding-top: 1.5rem; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: 0.75rem; font-variation-settings: "wdth" 85; color: var(--auf-dunkel-leise); }
@media (max-width: 767px) { .fuss__gitter { grid-template-columns: 1fr; gap: 2rem; } }

/* --- Eintreten ---------------------------------------------------------- */
/* Kein identischer Einblender auf jedem Kapitel. Nur die Tafeln und Flächen
   treten ein, weil dort das Bild den Befund trägt. */
[data-tritt] { opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--aus), transform 0.7s var(--aus); }
[data-tritt].da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-tritt] { opacity: 1; transform: none; transition: none; }
}

/* --- Datumswahl ---------------------------------------------------------
   Der Browser-Kalender lässt sich nicht gestalten und weiß nichts von der
   Belegung. Deshalb ein eigenes Blatt aus demselben Bestandesbuch: gleiche
   Zustände, gleiche Markierungen, vergebene Nächte nicht anwählbar. */

.datum { position: relative; display: flex; align-items: center; }

.datum__eingabe {
  flex: 1; min-width: 0;
  padding: 0.6rem 2.75rem 0.6rem 0;
  border: 0; border-bottom: 1.5px solid var(--linie-hell);
  background: transparent; color: inherit;
  font-family: var(--schrift); font-size: 1rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.datum__eingabe::placeholder { color: var(--auf-hell-leise); opacity: 1; }
.datum__eingabe:focus {
  outline: 0; border-bottom-color: var(--haupt); border-bottom-width: 2px;
}

.datum__knopf {
  position: absolute; right: 0; bottom: 0.25rem;
  width: 2.25rem; height: 2.25rem; padding: 0;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--auf-hell);
  cursor: pointer;
}
.datum__knopf .ikon { width: 1.125rem; height: 1.125rem; }
.datum__knopf:hover { color: var(--haupt); }

/* Das Blatt liegt über dem Satz, nicht im Fluss: es soll nichts verschieben. */
.datumsblatt {
  position: absolute; z-index: 30; top: calc(100% + 0.5rem); left: 0;
  width: min(20rem, calc(100vw - 2.5rem));
  background: var(--grund); color: var(--auf-dunkel);
  border: 1px solid var(--zeichen);
  padding: 0.875rem;
}
@media (max-width: 519px) { .datumsblatt { left: auto; right: 0; } }

.datumsblatt__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.75rem;
}
.datumsblatt__monat {
  font-family: var(--schrift);
  font-size: 0.8125rem; font-weight: 700; font-variation-settings: "wdth" 80;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.datumsblatt__zurueck, .datumsblatt__weiter {
  width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--linie); background: transparent;
  color: var(--auf-dunkel); cursor: pointer;
}
.datumsblatt__zurueck:hover:not(:disabled),
.datumsblatt__weiter:hover:not(:disabled) { border-color: var(--zeichen); }
.datumsblatt__zurueck:disabled, .datumsblatt__weiter:disabled {
  opacity: 0.3; cursor: default;
}
.datumsblatt__zurueck .ikon, .datumsblatt__weiter .ikon { width: 0.875rem; height: 0.875rem; }

.datumsblatt__gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datumsblatt__gitter .tag { font-size: 0.75rem; }

.datumsblatt__fuss {
  margin: 0.75rem 0 0; padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
  font-size: 0.6875rem; color: var(--auf-dunkel-leise);
  max-width: none;
}

/* Nicht wählbare Nächte im Blatt sollen nicht nach Fläche aussehen. Was
   bereits gewählt ist, bleibt aber voll sichtbar: die Anreise ist als
   Abreise nicht mehr wählbar, soll aber weiter als Wahl zu erkennen sein. */
.datumsblatt__gitter .tag:not(.tag--waehlbar):not(.tag--gewaehlt):not(.tag--spanne) {
  opacity: 0.4;
}
.datumsblatt__gitter .tag--vergangen { opacity: 0.18; }