/* Selbst gehostete Schriften, direkt hier statt per @import: ein @import wird
   erst entdeckt, wenn diese Datei geladen ist, und hängt damit eine weitere
   serielle Anfrage vor das erste Umschalten auf die richtige Schrift.
   Bewusst kein Google-Fonts-CDN: das überträgt die IP-Adresse der Besucher an
   Google und ist in Deutschland abmahnfähig (LG München I, 3 O 17493/20).
   Fraunces und Instrument Sans stehen unter der SIL Open Font License 1.1. */

/* Fraunces — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-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;
}

/* Fraunces — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-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;
}

/* Instrument Sans — latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/instrument-sans-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;
}

/* Instrument Sans — latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/instrument-sans-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;
}

/* ==========================================================================
   Ferienwohnung Löffler — Bechstedt
   Gestaltung „Wald & Gold": Grün trägt die Seite, so wie im alten Auftritt.
   Alle Töne sind bewusst warm gehalten — Oliv statt Blaugrün, goldenes Creme
   statt kühlem Weiß, dazu eine feine Papierstruktur über der ganzen Fläche.
   Dunkles Waldgrün für Kopf, Fuß und Bänder, Laubgrün für Überschriften,
   dazu das alte Titelgold (#FBC737) und das Rostbraun der alten
   Navigationsleiste als Handlungsfarbe. Höhenlinien als Textur, Fotos mit
   Papierrahmen wie im Album.
   ========================================================================== */

:root {
  /* Die Seite ist bewusst hell. Ohne diese Angabe würden Browser mit
     erzwungenem Dunkelmodus (Chrome „Auto Dark") Farben eigenmächtig
     umrechnen und Formularfelder dunkel zeichnen. */
  color-scheme: light;

  /* Farben ------------------------------------------------------------- */
  /* Lichtdramaturgie: die Seite beginnt im Abend (wald), öffnet sich ins
     Tageslicht (leinen/papier) und sinkt am Ende in die Nacht (nacht).
     Jeder Ton hat seinen Platz in diesem Bogen. */
  --tinte:         #2B2617;   /* Fließtext, leicht ins Grüne gezogen      */
  --nacht:         #1C2210;   /* Fuß und Ausklang — der tiefste Ton       */
  --wald:          #33401D;   /* dunkle Bänder                            */
  --wald-tief:     #262D14;   /* Kopf, Aufmacher-Grund                    */
  --moos:          #6B6440;   /* Sekundärtext, 5.07:1 auf Leinen          */
  --blatt:         #44522A;   /* Überschriften: Laubgrün                  */
  --wiese:         #87A250;   /* helles Wiesengrün, nur dekorativ         */
  --rost:          #8A2712;   /* Akzent und CTA — knallt auf Grün         */
  --rost-dunkel:   #6B1D0D;
  --honig:         #7C5A06;   /* Etiketten auf hellem Grund, 5.5:1        */
  --gold:          #F3C458;   /* Titelgold auf dunklem Grund              */
  --leinen:        #F8F1DC;   /* Seitengrund: Tageslicht                  */
  --leinen-tief:   #EBE5C6;   /* abgesetzte Bänder: blasses Salbeigrün    */
  --papier:        #FFFCF2;   /* Karten, Formularfelder, Fotorahmen       */
  --linie:         #DBD3AC;   /* Haarlinien                               */
  --linie-dunkel:  rgba(244, 241, 220, .2);

  /* Typografie --------------------------------------------------------- */
  --serife: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --grotesk: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Display groß und eng, Fließtext ruhig — dieser Kontrast trägt den
     zeitgemäßen Auftritt mehr als jedes Einzeldetail. */
  --t-riesig:  clamp(3rem, 1.7rem + 6vw, 6.75rem);
  --t-gross:   clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem);
  --t-abschnitt: clamp(1.85rem, 1.38rem + 2.1vw, 3.05rem);
  --t-mittel:  clamp(1.55rem, 1.28rem + 1.2vw, 2.2rem);
  --t-klein:   clamp(1.2rem, 1.1rem + .45vw, 1.4rem);
  --t-lauf:    clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --t-fein:    .9375rem;
  --t-marke:   .75rem;

  /* Maße --------------------------------------------------------------- */
  --breite:     78rem;
  --breite-eng: 40rem;
  --rand:       clamp(1.25rem, 5vw, 4rem);
  --kopf-hoehe: 3.5rem;

  --s1: .375rem;  --s2: .75rem;  --s3: 1.125rem; --s4: 1.75rem;
  --s5: 2.5rem;   --s6: 3.5rem;  --s7: 5rem;     --s8: 7rem;
  --s9: clamp(4.5rem, 10vw, 10rem);

  --rundung:       12px;   /* Karten, Felder                          */
  --rundung-bild:  10px;   /* Fotos im Papierrahmen                   */
  --rundung-voll:  100px;  /* Knöpfe und Chips: Pillenform            */

  --schatten:      0 1px 2px rgba(61, 45, 20, .07), 0 8px 24px -12px rgba(61, 45, 20, .3);
  --schatten-hoch: 0 2px 5px rgba(61, 45, 20, .1), 0 26px 56px -24px rgba(61, 45, 20, .45);

  --tempo:  .32s cubic-bezier(.22, .61, .36, 1);
  --tempo-l: .7s cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 48rem) { :root { --kopf-hoehe: 4.5rem; } }

/* ==========================================================================
   Grundlagen
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  /* Die alte Seite hatte grünes Bokeh an den Rändern und ein sonniges Feld in
     der Mitte. Das ist hier aufgegriffen: Grün links und rechts außen, Gold
     von oben, Wiesengrün von unten — alles sehr leise, damit Text trägt. */
  background:
    /* Grüne Ränder wie beim alten Bokeh — aber nur im Außenbereich. Sie enden
       vor der Inhaltsspalte, sonst sinkt der Textkontrast.
       Deckkraft bewusst leise (.16 statt .34): Sie liegen nur auf den hellen
       Abschnitten, weil dunkle Bänder ihren eigenen Grund mitbringen. Zu
       kräftig gesetzt wird daraus ein grün gewaschener Rahmen, der wie eine
       Template-Verzierung wirkt — gemessen wichen die äußeren 6 rem um bis zu
       46 Stufen von der Mitte ab, jetzt sind es rund 20. */
    linear-gradient(to right, rgba(127, 162, 75, .16), rgba(127, 162, 75, 0) 6rem),
    linear-gradient(to left,  rgba(127, 162, 75, .16), rgba(127, 162, 75, 0) 6rem),
    radial-gradient(58rem 40rem at 84% -8rem, rgba(245, 198, 78, .12), transparent 66%),
    var(--leinen);
  background-attachment: fixed, fixed, scroll, scroll;
  position: relative;
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: var(--t-lauf);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Feine Papierstruktur. Nimmt der Fläche das Glatte, Bildschirmhafte und macht
   sie stofflich — der wichtigste Beitrag zur Wärme neben der Farbe. */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='0.32'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--leinen-tief); }

/* Ein warmer Serienton über allen Fotos: gleicht Licht und Farben der
   gemischten Aufnahmen an, damit sie als ein Album wirken. */
.held__bild, .dia img, .galerie__feld img, .zeile__bild img, .zwischenbild img {
  filter: saturate(1.05) sepia(.05);
}

h1, h2, h3, h4 {
  font-family: var(--serife);
  font-weight: 420;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--blatt);
  margin: 0;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* Sektionsköpfe sind überall gleich gebaut: Etikett, Überschrift, Vorspann. */
.marke + h1, .marke + h2, .marke + h3 { margin-top: .35rem; }

h1 { font-size: var(--t-gross); }
h2 { font-size: var(--t-mittel); }
/* Abschnitts-Leitüberschriften (Etikett + h2) dürfen editorial groß sprechen —
   erst der Größensprung zwischen Leitzeile und Fließtext gibt den Bändern
   ihren Rhythmus. Gilt bewusst nur nach einem Etikett; Überschriften in
   Fuß, Preistafel und Rechtstexten bleiben unberührt (.fliess überschreibt
   weiter unten). */
.marke + h2 { font-size: var(--t-abschnitt); }
h3 { font-size: var(--t-klein); line-height: 1.25; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--rost); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinte); }

:focus-visible {
  outline: 2px solid var(--rost);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--rost); color: #fff; }

.kopf :focus-visible, .fuss :focus-visible, .band--wald :focus-visible,
.menue :focus-visible, .leuchtkasten :focus-visible,
.buehne :focus-visible { outline-color: var(--gold); }

hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: var(--s6) 0;
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprung {
  position: absolute;
  left: var(--s3); top: -100%;
  z-index: 100;
  padding: var(--s2) var(--s4);
  background: var(--rost); color: #fff;
  font-weight: 600; text-decoration: none;
  transition: top var(--tempo);
}
.sprung:focus { top: var(--s2); color: #fff; }

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

/* ==========================================================================
   Layout
   ========================================================================== */

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.huelle--eng { max-width: calc(var(--breite-eng) + 2 * var(--rand)); }

.band { padding-block: var(--s9); }
.band--knapp { padding-block: var(--s7); }

/* Helle Bänder gehen ineinander über, statt mit einer Kante zu beginnen.
   Bei Hell-auf-Hell wirkt eine harte Linie wie ein Versehen; die weiche
   Blende lässt die Abschnitte als eine Fläche erscheinen. Dunkle Bänder
   behalten ihre klare Kante — dort ist der Schnitt gewollt. */
.band--leinen-tief {
  background: linear-gradient(to bottom,
    transparent 0,
    var(--leinen-tief) 5.5rem,
    var(--leinen-tief) calc(100% - 5.5rem),
    transparent 100%);
}
.band--papier {
  background: linear-gradient(to bottom,
    transparent 0,
    var(--papier) 4.5rem,
    var(--papier) calc(100% - 4.5rem),
    transparent 100%);
}
/* Folgt ein dunkles Band, entfällt die untere Blende — dort trifft das helle
   Band ohnehin auf eine klare Kante, und die Fläche muss bis dorthin
   durchgefärbt sein. Beide Bänder brauchen dafür ihren *eigenen* Ton: eine
   gemeinsame Regel färbte das Papier-Band still nach `--leinen-tief` um
   (nachgemessen #EAE4C5 statt #FFFCF2). */
.band--leinen-tief:has(+ .band--wald) {
  background: linear-gradient(to bottom, transparent 0, var(--leinen-tief) 5.5rem, var(--leinen-tief) 100%);
}
.band--papier:has(+ .band--wald) {
  background: linear-gradient(to bottom, transparent 0, var(--papier) 4.5rem, var(--papier) 100%);
}

.band--wald {
  position: relative;
  background: var(--wald);
  color: var(--leinen);
}
/* Das letzte dunkle Band jeder Seite — die Anfrage — läuft in die Nacht des
   Fußes aus. Die Seite endet, wie sie begann: im Dunkel, nur tiefer. */
main > .band--wald:last-child {
  background: linear-gradient(180deg, var(--wald), var(--nacht));
}

/* Dunkle Bänder sind Blöcke: klare Kante oben wie unten.
   Früher lief hier eine 5rem-Blende nach `--leinen` aus. Sie hatte zwei
   Fehler, die zusammen wie ein billiger Schleier aussahen:
   1. Sie blendete auf *flaches* Creme, während der Seitengrund an den Rändern
      die grünen Randverläufe des `body` trägt. Am Ende der Blende sprang die
      Farbe deshalb zurück — eine harte Linie quer über das linke und rechte
      Drittel (nachgemessen: #F2ECD7 in der Blende gegen #D4D8B1 darunter).
   2. Der Verlauf war linear. Eine lineare Rampe hat an beiden Enden einen
      Knick, und ihre Mitte zwischen dunklem Grün und Creme ist ein
      entsättigtes Grau (Sättigung fiel von 55 % auf 14 %).
   Eine Blende, die auf eine Fläche mit Verlauf trifft, kann nie exakt passen.
   Die klare Kante kann dagegen nicht danebenliegen — und sie ist dieselbe
   Kante, mit der diese Bänder ohnehin beginnen. */
.band--wald h1, .band--wald h2, .band--wald h3 { color: var(--papier); }
.band--wald a { color: var(--gold); }
.band--wald a:hover { color: var(--papier); }

/* Schiefermaserung: feine, unregelmäßige Diagonalstreifen auf dunklen Bändern */
.band--wald, .kopf, .fuss {
  background-image:
    repeating-linear-gradient(112deg,
      rgba(255, 255, 255, .022) 0 1px,
      transparent 1px 3px,
      rgba(0, 0, 0, .028) 3px 4px,
      transparent 4px 9px);
}

/* Höhenlinien – Anspielung auf das Schiefergebirge, sehr zurückhaltend */
.hoehenlinien { position: relative; isolation: isolate; }
.hoehenlinien::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%233D5426' stroke-width='1.1'%3E%3Cpath d='M-40 470C120 430 190 350 330 340s250 60 400 20 210-110 250-130'/%3E%3Cpath d='M-40 430C130 388 200 306 340 296s246 58 396 18 214-108 254-128'/%3E%3Cpath d='M-40 390C140 346 212 262 350 252s242 56 392 16 218-106 258-126'/%3E%3Cpath d='M-40 350C150 304 224 218 360 208s238 54 388 14 222-104 262-124'/%3E%3Cpath d='M-40 310C160 262 236 174 370 164s234 52 384 12 226-102 266-122'/%3E%3Cpath d='M-40 270C170 220 248 130 380 120s230 50 380 10 230-100 270-120'/%3E%3Cpath d='M-40 230C180 178 260 86 390 76s226 48 376 8 234-98 274-118'/%3E%3Cpath d='M-40 190C190 136 272 42 400 32s222 46 372 6 238-96 278-116'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
  opacity: .09;
  pointer-events: none;
}
.band--wald.hoehenlinien::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%23F5C64E' stroke-width='1.1'%3E%3Cpath d='M-40 470C120 430 190 350 330 340s250 60 400 20 210-110 250-130'/%3E%3Cpath d='M-40 430C130 388 200 306 340 296s246 58 396 18 214-108 254-128'/%3E%3Cpath d='M-40 390C140 346 212 262 350 252s242 56 392 16 218-106 258-126'/%3E%3Cpath d='M-40 350C150 304 224 218 360 208s238 54 388 14 222-104 262-124'/%3E%3Cpath d='M-40 310C160 262 236 174 370 164s234 52 384 12 226-102 266-122'/%3E%3Cpath d='M-40 270C170 220 248 130 380 120s230 50 380 10 230-100 270-120'/%3E%3Cpath d='M-40 230C180 178 260 86 390 76s226 48 376 8 234-98 274-118'/%3E%3Cpath d='M-40 190C190 136 272 42 400 32s222 46 372 6 238-96 278-116'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .07;
}

/* Kleines Etikett über Überschriften, gesetzt wie eine Kartenlegende */
.marke {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s3);
  font-family: var(--grotesk);
  font-size: var(--t-marke);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rost);
}
.marke::before {
  content: '';
  width: 1.05em; height: 1.05em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.2 5.2 4.5 8.6 4.5 13a7.5 7.5 0 0 0 6.6 7.45c.2.02.4.03.57.03L11.2 22h1.6l-.47-1.52c.17 0 .37-.01.57-.03A7.5 7.5 0 0 0 19.5 13C19.5 8.6 15.8 5.2 12 2Zm.1 3.1c2.9 2.6 5.4 5.2 5.4 7.9a5.6 5.6 0 0 1-4.5 5.5l1.3-4.2-2.2 1.3-1.1-3.4-1.1 3.4-2.2-1.3 1.3 4.2A5.6 5.6 0 0 1 6.5 13c0-2.7 2.5-5.3 5.6-7.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.2 5.2 4.5 8.6 4.5 13a7.5 7.5 0 0 0 6.6 7.45c.2.02.4.03.57.03L11.2 22h1.6l-.47-1.52c.17 0 .37-.01.57-.03A7.5 7.5 0 0 0 19.5 13C19.5 8.6 15.8 5.2 12 2Zm.1 3.1c2.9 2.6 5.4 5.2 5.4 7.9a5.6 5.6 0 0 1-4.5 5.5l1.3-4.2-2.2 1.3-1.1-3.4-1.1 3.4-2.2-1.3 1.3 4.2A5.6 5.6 0 0 1 6.5 13c0-2.7 2.5-5.3 5.6-7.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.band--wald .marke { color: var(--gold); }

.vorspann {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  line-height: 1.5;
  color: var(--wald);
  max-width: 44ch;
  margin: 0;
}
h1 + .vorspann, h2 + .vorspann, h3 + .vorspann { margin-top: var(--s3); }
.band--wald .vorspann { color: var(--leinen); }

.fliess { max-width: 66ch; }
.fliess > * + * { margin-top: var(--s3); }
/* Zwischenüberschriften brauchen mehr Luft nach oben als nach unten,
   sonst kleben die Abschnitte in langen Rechtstexten aneinander. */
.fliess > * + h2 { margin-top: var(--s5); }
.fliess > * + h3 { margin-top: var(--s4); }
.fliess > h2 { font-size: var(--t-klein); }

/* ==========================================================================
   Kopf
   ========================================================================== */

.kopf, main, .fuss, .handleiste { position: relative; z-index: 1; }

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(38, 45, 20, .88);          /* --wald-tief, durchscheinend */
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  color: var(--leinen);
  border-bottom: 1px solid rgba(0, 0, 0, .22);
  transition: box-shadow var(--tempo), background var(--tempo);
}
/* Erst wenn Inhalt unter dem Kopf liegt, bekommt er Gewicht. */
.kopf.ist-gescrollt {
  background: rgba(38, 45, 20, .95);
  box-shadow: 0 10px 30px -18px rgba(20, 24, 10, .7);
}

.kopf__innen {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--kopf-hoehe);
}

.wortmarke {
  display: flex; align-items: baseline; gap: .55rem;
  margin-right: auto;
  font-family: var(--serife);
  font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem);
  color: var(--gold);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wortmarke:hover { color: var(--gold); }
.wortmarke b { font-weight: 600; }
.wortmarke .wm-lang { font-weight: 400; }
@media (max-width: 78rem) { .wortmarke .wm-lang { display: none; } }
.wortmarke span {
  font-family: var(--grotesk);
  font-size: var(--t-marke);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247, 240, 220, .75);
}
@media (max-width: 26rem) { .wortmarke span { display: none; } }

.hauptnav { display: none; }

/* Erst ab 69rem: darunter braucht die volle Linkleiste mehr Platz, als der
   Kopf hat (nachgemessen ~1090 px), und würde still nach rechts überlaufen.
   Zwischen 62 und 69 rem zeigt der Kopf Wortmarke, Anfrage-Knopf und Menü. */
@media (min-width: 69rem) {
  .hauptnav { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.6rem); }
  .hauptnav a {
    position: relative;
    padding-block: .3rem;
    color: var(--leinen);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .hauptnav a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--tempo);
  }
  .hauptnav a:hover, .hauptnav a[aria-current='page'] { color: var(--papier); }
  .hauptnav a:hover::after, .hauptnav a[aria-current='page']::after { transform: scaleX(1); }
}

.kopf .knopf--nur-gross, .kopf .knopf--nur-klein,
.band--wald .knopf, .menue .knopf:not(.knopf--linie) {
  background: var(--gold);
  color: var(--wald-tief);
}
.kopf .knopf--nur-gross:hover, .kopf .knopf--nur-klein:hover,
.band--wald .knopf:hover, .menue .knopf:not(.knopf--linie):hover {
  background: #F7D06B;
  color: var(--wald-tief);
}

.knopf-menue {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem;
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--rundung);
  background: none;
  color: var(--leinen);
  font-family: inherit; font-size: .875rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.knopf-menue, .knopf-menue:hover { color: var(--leinen); }
.knopf-menue:hover { background: rgba(242, 237, 227, .08); }
@media (min-width: 69rem) { .knopf-menue { display: none; } }

/* ==========================================================================
   Schaltflächen
   ========================================================================== */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.5rem;
  min-height: 2.9rem;
  border: 1px solid transparent;
  border-radius: var(--rundung-voll);
  background: var(--rost);
  color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  line-height: 1.2;
  text-align: center; text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
.knopf:hover {
  background: var(--rost-dunkel);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--schatten);
}
.knopf:active { transform: none; }

.knopf--linie {
  background: none;
  border-color: color-mix(in srgb, var(--tinte) 28%, transparent);
  color: var(--blatt);
}
.knopf--linie:hover { background: var(--papier); border-color: var(--blatt); color: var(--blatt); }

.band--wald .knopf--linie,
.held .knopf--linie,
.menue .knopf--linie {
  border-color: rgba(242, 237, 227, .38);
  color: var(--papier);
}
.band--wald .knopf--linie:hover,
.held .knopf--linie:hover,
.menue .knopf--linie:hover { background: rgba(242, 237, 227, .12); color: #fff; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Im Kopf: auf kleinen Schirmen der Anruf-Knopf, ab 62rem die Anfrage.
   Anrufen ist der Weg, den ältere Gäste am ehesten nehmen. */
.knopf--nur-klein, .knopf--nur-gross { padding: .55rem .95rem; min-height: 2.4rem; font-size: .9375rem; }
.knopf--nur-gross { display: none; }
@media (min-width: 62rem) {
  .knopf--nur-klein { display: none; }
  .knopf--nur-gross { display: inline-flex; }
}
@media (max-width: 23.5rem) {
  .knopf--nur-klein { padding: .55rem .7rem; }
  .knopf--nur-klein svg { display: none; }
}

/* ==========================================================================
   Held (Bühne)
   ========================================================================== */

.held {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(37rem, 82svh);
  padding-block: var(--s8) var(--s6);
  background: var(--wald-tief);
  color: var(--papier);
  overflow: hidden;
}
/* Innenaufnahmen sind 4:3. In einem zu flachen Band bleibt davon nur ein
   Streifen übrig — deshalb bekommt der kleine Aufmacher spürbar mehr Höhe. */
.held--klein { min-height: min(31rem, 64svh); padding-block: var(--s7) var(--s5); }
.held--klein .held__bild { object-position: center 58%; }

.held__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.held::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
    /* Abdunklung sitzt links, wo der Text steht — rechts bleibt das Foto
       weitgehend unangetastet, damit Herbstlaub und rote Dächer wirken. */
    linear-gradient(to top, rgba(24, 33, 17, .9) 0%, rgba(24, 33, 17, .66) 30%, rgba(24, 33, 17, .28) 66%, rgba(24, 33, 17, .34) 100%),
    linear-gradient(to right, rgba(24, 33, 17, .74) 0%, rgba(24, 33, 17, .46) 32%, rgba(24, 33, 17, .1) 62%, transparent 80%);
}

/* Auf schmalen Schirmen liegt der Text mitten im Bild statt am unteren Rand.
   Dort muss der Verlauf deutlich kräftiger sein, damit das Kupfer trägt. */
@media (max-width: 48rem) {
  .held::after {
    background: linear-gradient(to top,
      rgba(24, 33, 17, .93) 0%,
      rgba(24, 33, 17, .82) 45%,
      rgba(24, 33, 17, .72) 100%);
  }
}
.held__innen { position: relative; z-index: 2; width: 100%; }

/* Der Aufmacher endet mit klarer Kante — wie ein ganzseitiger Abzug, der
   aufhört. Auch hier lief vorher eine 6rem-Blende nach `--leinen` aus und
   hatte dieselben zwei Fehler wie bei den dunklen Bändern (siehe dort):
   flaches Creme über einem Grund mit grünen Rändern, dazu eine lineare
   Rampe durch ein graues Mittelfeld. Der untere Rand des Aufmachers ist
   durch `.held::after` ohnehin am dunkelsten; die Kante trifft also auf
   eine ruhige Fläche und wirkt gesetzt, nicht abgeschnitten. */

.held h1 {
  font-size: var(--t-riesig);
  font-weight: 340;
  line-height: 1.02;
  color: var(--papier);
  letter-spacing: -.028em;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.held--klein h1 { font-size: var(--t-gross); max-width: 18ch; }
.held h1 em {
  font-style: normal;
  font-weight: 500;
  color: var(--gold);
}
.held .marke { color: var(--gold); text-shadow: 0 1px 12px rgba(24, 33, 17, .9); }
.held .vorspann { color: rgba(251, 248, 242, .9); margin-top: var(--s3); }
.held .knopfreihe { margin-top: var(--s5); }

/* --------------------------------------------------------------------------
   Aufmacher als gerahmter Abzug
   Die Vorlage des Herbstpanoramas hat nur 500 px. Randlos gezeigt müsste der
   Browser sie auf hochauflösenden Schirmen weit über die Quellgröße strecken.
   Deshalb läuft dasselbe Bild unscharf und abgedunkelt als Hintergrund — dort
   ist Auflösung gleichgültig — und darüber liegt der Abzug in begrenzter
   Breite, die er scharf trägt.
   -------------------------------------------------------------------------- */

.held--abzug { align-items: center; }
.held--abzug .held__grund {
  position: absolute; inset: -3rem;
  width: calc(100% + 6rem); height: calc(100% + 6rem);
  object-fit: cover;
  filter: blur(26px) saturate(.85);
  transform: scale(1.06);
  z-index: 0;
}
.held--abzug .held__innen {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .held--abzug .held__innen { grid-template-columns: 1fr minmax(0, 34rem); }
}

.abzug {
  position: relative;
  margin: 0;
  padding: clamp(.65rem, 1.3vw, 1.1rem);
  background: var(--papier);
  border-radius: calc(var(--rundung) + 4px);
  box-shadow: 0 2px 6px rgba(20, 28, 14, .3), 0 30px 60px -25px rgba(20, 28, 14, .75);
  transform: rotate(-.6deg);
}
/* Zwei weitere Abzüge lugen hinter dem obersten hervor — ein Stapel
   Erinnerungen, nicht ein einzelnes Bild. */
.abzug::before, .abzug::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--papier);
  border-radius: inherit;
  box-shadow: 0 2px 10px rgba(20, 28, 14, .35);
}
.abzug::before { transform: rotate(2.1deg) translate(7px, 5px); opacity: .85; }
.abzug::after  { transform: rotate(-1.7deg) translate(-6px, 8px); opacity: .7; }
.abzug img {
  width: 100%; height: auto;
  border-radius: 2px;
  display: block;
}

/* --------------------------------------------------------------------------
   Bildwechsel im Rahmen
   Ohne JavaScript steht schlicht das erste Bild — es trägt als einziges
   `ist-aktiv` und hat als einziges eine echte Bildquelle im HTML. Die übrigen
   Aufnahmen lädt das Skript erst nach, wenn die Seite sonst fertig ist.
   -------------------------------------------------------------------------- */

.diaschau__buehne {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
  background: var(--leinen-tief);
}
.dia {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.dia.ist-aktiv { opacity: 1; }
.dia img { width: 100%; height: 100%; object-fit: cover; }
/* Das aktive Bild atmet: kaum wahrnehmbares Hineinziehen, wie ein Blick,
   der auf dem Motiv ruht. */
.dia.ist-aktiv img { animation: atmen 9s ease-out forwards; }
@keyframes atmen {
  from { transform: scale(1.02); }
  to   { transform: scale(1.085); }
}
@media (prefers-reduced-motion: reduce) {
  .dia.ist-aktiv img { animation: none; }
}

.abzug figcaption {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.dia-halt {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: none;
  color: var(--moos);
  font-size: .6rem; line-height: 1;
  cursor: pointer;
  transition: background var(--tempo), color var(--tempo);
}
.dia-halt:hover { background: var(--leinen-tief); color: var(--tinte); }

@media (prefers-reduced-motion: reduce) {
  .dia { transition: none; }
}
.abzug figcaption {
  padding-top: .7rem;
  font-family: var(--serife);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--moos);
  text-align: center;
}

/* ==========================================================================
   Bühne — der Aufmacher der Startseite
   Randlos statt gerahmt. Der gerahmte Abzug war eine Notlösung für das
   Herbstpanorama, das nur 500 px breit vorliegt; er kostete aber genau den
   Moment, den eine Startseite braucht. Die Bühne zeigt deshalb ausschließlich
   Aufnahmen, die es echt in 2400 px gibt — allen voran `hof-herbst`, das
   einzige Foto des Bestands mit richtigem Sonnenlicht.
   Das Panorama steht dafür weiter unten als gerahmter Abzug, wo seine Größe
   reicht.
   ========================================================================== */

.buehne {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--s6);
  /* Knapp unter voller Schirmhöhe: der Steckbrief muss ohne Scrollen
     vollständig sichtbar sein, sonst wirkt die Leiste angeschnitten. */
  min-height: min(88svh, 49rem);
  padding-block: calc(var(--kopf-hoehe) + var(--s6)) var(--s5);
  background: var(--wald-tief);
  color: var(--papier);
  overflow: hidden;
}

/* Unterhalb von 62 rem liegt die feste Kontaktleiste über dem Seitenfuß des
   Fensters und verdeckte den Steckbrief — der Aufmacher ist ja bewusst so
   hoch, dass die Leiste gerade noch hineinpasst. Der Seitenfuß reserviert
   diesen Platz schon länger (`.fuss`), der Aufmacher brauchte ihn ebenso. */
@media (max-width: 61.99rem) {
  .buehne { padding-bottom: calc(var(--s5) + 3.6rem); }
}

.buehne__bilder { position: absolute; inset: 0; z-index: 0; }
.buehne .dia { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.buehne .dia.ist-aktiv { opacity: 1; }
.buehne .dia img { width: 100%; height: 100%; object-fit: cover; }
/* Die Kamera fährt langsam heran. 22 s sind lang genug, dass die Bewegung
   nicht als Effekt auffällt — sie sorgt nur dafür, dass das Bild lebt. */
.buehne .dia.ist-aktiv img { animation: buehne-atmen 22s ease-out forwards; }
@keyframes buehne-atmen { from { transform: scale(1.005); } to { transform: scale(1.09); } }

/* Abdunklung: unten und links kräftig, damit die Schrift trägt; rechts oben
   bleibt das Foto weitgehend frei. */
.buehne::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(19, 26, 12, .93) 0%, rgba(19, 26, 12, .74) 28%, rgba(19, 26, 12, .32) 62%, rgba(19, 26, 12, .3) 100%),
    linear-gradient(to right, rgba(19, 26, 12, .68) 0%, rgba(19, 26, 12, .28) 46%, transparent 80%);
}
.buehne > .huelle { position: relative; z-index: 2; }

.buehne h1 {
  font-size: var(--t-riesig);
  font-weight: 340;
  line-height: 1.0;
  letter-spacing: -.032em;
  color: var(--papier);
  max-width: 16ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .4);
}
.buehne h1 em { font-style: normal; font-weight: 500; color: var(--gold); }
.buehne .marke { color: var(--gold); text-shadow: 0 1px 12px rgba(19, 26, 12, .9); }
.buehne .vorspann { color: rgba(251, 248, 242, .92); margin-top: var(--s4); max-width: 40ch; }
.buehne .knopfreihe { margin-top: var(--s5); }
/* Der Umriss-Knopf steht hier über wechselnden Fotos — auf der sonnigen
   Herbstaufnahme verschwand er fast. Eine dunkle, leicht unscharfe Fläche
   darunter hält ihn auf jedem Motiv lesbar. */
.buehne .knopf--linie {
  background: rgba(19, 26, 12, .38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(242, 237, 227, .5);
  /* Ohne diese Zeile erbt der Knopf `--blatt` aus `.knopf--linie` und steht
     dunkelgrün auf dunklem Foto — praktisch unsichtbar. Die vorhandene
     Aufhellungsregel gilt nur für `.held`, `.band--wald` und `.menue`. */
  color: var(--papier);
}
.buehne .knopf--linie:hover { background: rgba(19, 26, 12, .62); border-color: rgba(242, 237, 227, .8); }

/* Zeilenweiser Aufzug der Überschrift: jede Zeile steigt aus ihrer eigenen
   Maske. Reines CSS — läuft auch ohne JavaScript, und genau deshalb ist es
   der erste Eindruck, nicht ein nachgeladener Effekt. */
.aufzug { display: block; overflow: hidden; padding-bottom: .06em; }
.aufzug > span { display: block; transform: translateY(106%); }

@media (prefers-reduced-motion: no-preference) {
  .aufzug > span { animation: aufsteigen .95s cubic-bezier(.16, .84, .3, 1) forwards; animation-delay: calc(.15s + var(--z, 0) * .11s); }
  @keyframes aufsteigen { to { transform: none; } }
  .buehne .marke, .buehne .vorspann, .buehne .knopfreihe, .buehne .steckbrief {
    opacity: 0;
    animation: einschweben .85s cubic-bezier(.22, .61, .36, 1) forwards;
  }
  .buehne .marke      { animation-delay: .05s; }
  .buehne .vorspann   { animation-delay: .62s; }
  .buehne .knopfreihe { animation-delay: .76s; }
  .buehne .steckbrief { animation-delay: .92s; }
  @keyframes einschweben { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
/* Ohne Bewegungswunsch steht alles sofort da. */
@media (prefers-reduced-motion: reduce) {
  .aufzug > span { transform: none; }
}

/* Bildunterschrift und Halteknopf sitzen unten rechts, außerhalb der Schrift. */
.buehne__notiz {
  position: absolute; right: var(--rand); bottom: var(--s4); z-index: 2;
  display: flex; align-items: center; gap: .6rem;
  margin: 0;
  font-family: var(--serife); font-style: italic; font-size: .9375rem;
  color: rgba(247, 240, 220, .78);
  text-shadow: 0 1px 10px rgba(19, 26, 12, .9);
}
.buehne__notiz .dia-halt { border-color: rgba(242, 237, 227, .38); color: rgba(247, 240, 220, .8); }
.buehne__notiz .dia-halt:hover { background: rgba(242, 237, 227, .14); color: #fff; }
@media (max-width: 48rem) { .buehne__notiz { position: static; margin-top: var(--s3); padding-inline: var(--rand); } }

/* Der Abzug kann auch außerhalb des Aufmachers stehen — dort trägt das
   Panorama trotz seiner 500 px, weil es klein bleibt. */
.abzug--frei { max-width: 30rem; margin-inline: auto; }

/* Trägt eine Bildzelle einen gerahmten Abzug, darf sie nicht selbst rahmen —
   sonst stehen zwei Rahmen ineinander. Auch der Zuschnitt auf 4:3 und die
   Hover-Vergrößerung entfallen: das Panorama ist 3:2 und soll ganz zu sehen
   sein, und eine Vergrößerung würde aus dem Papierrahmen herauslaufen. */
.zeile__bild--blank {
  border: 0; border-radius: 0; box-shadow: none;
  overflow: visible; background: none;
}
.zeile__bild--blank img { aspect-ratio: auto; height: auto; }
.zeile:hover .zeile__bild--blank img { transform: none; }
.abzug--frei figcaption { padding-top: .6rem; }

/* Steckbrief-Leiste: keine Zellen, nur Zahlen mit feinen Trennlinien —
   die Werte sprechen, nicht die Kästchen. */
.steckbrief {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--linie-dunkel);
}
.steckbrief div { padding: .35rem var(--s3); }
.steckbrief div + div { border-left: 1px solid var(--linie-dunkel); }
.steckbrief dt {
  font-size: var(--t-marke); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.steckbrief dd {
  margin: .3rem 0 0;
  font-family: var(--serife);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.1;
  color: var(--papier);
  font-variant-numeric: lining-nums tabular-nums;
}
/* Zwei Spalten bis 62 rem, nicht nur bis 40 rem. Die Leiste trägt seit dem
   Inhaltswechsel auch Wortwerte („inklusive", „willkommen") statt nur Zahlen.
   Für vier Spalten reicht der Platz erst ab rund 990 px Fensterbreite —
   darunter brach „willkommen" auf zwei Zeilen um. Der Wert ist nachgemessen,
   nicht geschätzt: bei 900 px blieben der Spalte 166 px Inhaltsbreite bei
   rund 164 px Wortbreite. Wer hier längere Werte einträgt, muss den
   Umschaltpunkt erneut prüfen. */
@media (max-width: 62rem) {
  .steckbrief { grid-template-columns: repeat(2, 1fr); row-gap: var(--s3); }
  .steckbrief div:nth-child(odd) { border-left: 0; }
}
.steckbrief dd small { font-size: .8rem; font-family: var(--grotesk); color: rgba(242,237,227,.66); }

/* ==========================================================================
   Unterkünfte als redaktionelle Zeilen (keine Kacheln)
   ========================================================================== */

.zeilen { display: grid; gap: clamp(4.5rem, 9vw, 8rem); }

.zeile { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 54rem) {
  .zeile { grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
  /* Wechselnde Bildseite. Der nth-child-Teil gilt bewusst nur innerhalb von
     `.zeilen` — sonst greift er auch dort, wo eine Zeile zufällig das zweite
     Kind ihres Abschnitts ist. Überall sonst wird `.zeile--bild-rechts` gesetzt. */
  .zeilen > .zeile:nth-child(even) > .zeile__bild,
  .zeile--bild-rechts > .zeile__bild { order: 2; }
}

/* Mittige Ausrichtung stimmt nur, wenn ein Bild neben Text steht. Bei zwei
   Textspalten (Beschreibung neben Ausstattungsliste) müssen beide oben
   beginnen, sonst versetzt es die Spalten gegeneinander. */
.zeile:not(:has(.zeile__bild)) { align-items: start; }

.zeile__bild {
  position: relative;
  border: 6px solid var(--papier);
  border-radius: var(--rundung-bild);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
}
.zeile__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--tempo-l); }
.zeile:hover .zeile__bild img { transform: scale(1.03); }

.zeile__nr {
  position: absolute; left: .9rem; top: .35rem;
  z-index: 1;
  font-family: var(--serife);
  font-weight: 340;
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem);
  line-height: 1;
  color: rgba(255, 251, 239, .92);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .02em;
  text-shadow: 0 1px 4px rgba(24, 20, 8, .55), 0 8px 28px rgba(24, 20, 8, .5);
  pointer-events: none;
}

.zeile__text > * + * { margin-top: var(--s3); }
.zeile__text h3 { font-size: var(--t-mittel); }

.eckdaten {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin: 0; padding: 0; list-style: none;
}
.eckdaten li {
  padding: .3rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 100px;
  background: var(--papier);
  font-size: var(--t-fein);
  color: var(--wald);
}

/* Weiterlesen-Link mit wachsender Kupferlinie */
.weiter {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--rost);
}
.weiter::after {
  content: '→';
  transition: transform var(--tempo);
}
.weiter:hover { color: var(--rost); }
.weiter:hover::after { transform: translateX(4px); }
.weiter u { text-decoration-color: color-mix(in srgb, var(--rost) 40%, transparent); }

/* ==========================================================================
   Zwischenbild — ein Naturfoto in voller Breite als Atempause
   ========================================================================== */

.zwischenbild { position: relative; }
.zwischenbild img {
  width: 100%;
  /* Deutlich höher als früher (16–30 rem). Der Verlauf unten braucht Platz,
     den er sich sonst vom Motiv nimmt: bei niedrigem Bild lag die Grillkota
     mitten in der Blende und löste sich nach unten ins Nichts auf — das sah
     nach einem Ladefehler aus, nicht nach Gestaltung. */
  height: clamp(22rem, 68vh, 40rem);
  object-fit: cover;
  object-position: center 42%;
}
.zwischenbild::after {
  content: '';
  position: absolute; inset: 0;
  /* Läuft unten in das Grün des folgenden Bandes aus: das Foto löst sich in
     den nächsten Abschnitt auf, statt an einer Kante zu enden. Der Verlauf
     bleibt jetzt im unteren Drittel und steigt weich an (Stufen statt einer
     Geraden), damit weder eine Kante noch ein grauer Mittelbereich entsteht. */
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 58%,
    rgba(52, 62, 31, .10) 68%,
    rgba(52, 62, 31, .34) 78%,
    rgba(52, 62, 31, .66) 87%,
    rgba(52, 62, 31, .90) 94%,
    var(--wald) 100%);
  pointer-events: none;
}
/* Steht kein dunkles Band dahinter, reicht die dezente Abdunklung unten. */
.zwischenbild:not(:has(+ .band--wald))::after {
  background: linear-gradient(to top, rgba(24, 33, 17, .55), transparent 45%);
}
.zwischenbild__zeile {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1rem, 4vh, 2.25rem);
  z-index: 1;
  margin: 0;
  padding-inline: var(--rand);
  max-width: var(--breite);
  margin-inline: auto;
  font-family: var(--serife);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  color: var(--papier);
  text-shadow: 0 1px 14px rgba(24, 33, 17, .8);
}

/* ==========================================================================
   Ausstattung / Merkmale
   ========================================================================== */

/* Beide Vorkommen haben sechs Einträge. Bei vier Spalten blieben in der
   zweiten Reihe zwei Zellen leer — im umrandeten Kasten sieht das aus wie ein
   Fehler, nicht wie Absicht. Drei Spalten teilen sechs glatt auf (2 × 3), und
   darunter greift `auto-fit` mit zwei oder einer Spalte, was ebenfalls
   aufgeht. Wer hier Einträge ergänzt: eine durch 3 teilbare Zahl behalten. */
.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0; padding: 0;
  list-style: none;
  background: var(--papier);
  border: 1px solid var(--linie);
  overflow: hidden;
}
@media (min-width: 62rem) {
  .merkmale { grid-template-columns: repeat(3, 1fr); }
}
.merkmale li {
  display: flex; gap: var(--s2);
  padding: var(--s3) var(--s4);
  /* Trennlinien als Schatten: eine unbesetzte Zelle in der letzten Reihe
     hinterlässt so keine sichtbare Fläche. */
  box-shadow: 1px 0 0 var(--linie), 0 1px 0 var(--linie);
}
.merkmale svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .2rem; color: var(--rost); }
.merkmale b { display: block; font-weight: 600; color: var(--blatt); line-height: 1.3; }
.merkmale span { display: block; margin-top: .2rem; color: var(--moos); font-size: var(--t-fein); line-height: 1.45; }

.liste-haken { margin: 0; padding: 0; list-style: none; }
.liste-haken li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
}
.liste-haken li::before {
  content: '';
  position: absolute; left: .1rem; top: .5em;
  width: .72rem; height: .38rem;
  border-left: 1.6px solid var(--rost);
  border-bottom: 1.6px solid var(--rost);
  transform: rotate(-45deg);
}

/* ==========================================================================
   Preise
   ========================================================================== */

.preistafel {
  border: 1px solid var(--linie);
  background: var(--papier);
  box-shadow: var(--schatten);
}
.preistafel { border-radius: var(--rundung); overflow: hidden; }
.preistafel__kopf {
  padding: var(--s4);
  background: linear-gradient(135deg, var(--wald), var(--wald-tief));
  color: var(--papier);
  border-bottom: 2px solid var(--gold);
}
.preistafel__kopf h2, .preistafel__kopf h3 { color: var(--papier); }
.preistafel table { width: 100%; border-collapse: collapse; }
.preistafel th, .preistafel td {
  padding: var(--s3) var(--s4);
  text-align: left;
  border-bottom: 1px solid var(--linie);
  vertical-align: baseline;
}
.preistafel tr:last-child th, .preistafel tr:last-child td { border-bottom: 0; }
.preistafel th { font-weight: 500; color: var(--tinte); }
.preistafel td {
  text-align: right;
  white-space: nowrap;
  font-family: var(--serife);
  font-size: 1.55rem;
  color: var(--blatt);
  font-variant-numeric: lining-nums tabular-nums;
}
.preistafel td small { font-family: var(--grotesk); font-size: .8rem; color: var(--moos); }
.preistafel th small { display: block; font-weight: 400; font-size: var(--t-fein); color: var(--moos); }

/* Auf sehr schmalen Geräten (320 px) passt die Preistafel sonst nicht:
   Zellpolster schrumpfen, der Betrag darf umbrechen. */
@media (max-width: 26rem) {
  .preistafel__kopf { padding: var(--s3); }
  .preistafel th, .preistafel td { padding: var(--s3) var(--s2); }
  .preistafel td { font-size: 1.15rem; white-space: normal; }
}

.hinweis {
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--rost);
  background: var(--leinen-tief);
  font-size: var(--t-fein);
  color: var(--wald);
}
.hinweis strong { color: var(--tinte); }

/* ==========================================================================
   Galerie und Leuchtkasten
   ========================================================================== */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  /* KEIN `grid-auto-rows: 1fr` — das gibt den Kacheln eine feste Zeilenhöhe und
     setzt damit das `aspect-ratio` außer Kraft. Die Kacheln wurden dadurch
     hochkant und Hochformate praktisch nicht mehr beschnitten. */
  gap: var(--s2);
}
.galerie__feld {
  position: relative;
  display: block;
  padding: 0;
  border: 5px solid var(--papier);
  background: var(--leinen-tief);
  border-radius: var(--rundung-bild);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  box-shadow: var(--schatten);
}
/* Das <img> steckt in einem <picture>. Ohne die folgende Zeile bezieht sich
   `height: 100%` am Bild auf das <picture> — und das ist inhaltsgesteuert hoch,
   also wird daraus effektiv `auto`. Hochformate füllten die Kachel dann nicht,
   sondern ragten oben heraus; der Zuschnitt über `object-position` lief ins
   Leere. Bei Querformaten fiel es nicht auf, weil sie ohnehin 4:3 sind. */
.galerie__feld > picture { display: block; width: 100%; height: 100%; }
.galerie__feld { transition: transform var(--tempo), box-shadow var(--tempo); }
.galerie__feld:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.galerie__feld img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tempo-l), filter var(--tempo); }
.galerie__feld:hover img { transform: scale(1.04); filter: saturate(1.05) sepia(.05) brightness(1.05); }
.galerie__feld::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(42, 33, 20, .12);
  border-radius: inherit;
  pointer-events: none;
}
/* Bewusst KEIN abweichendes Seitenverhältnis für Hochformate: gemischte
   Kachelhöhen reißen das Raster auf und hinterlassen Löcher. Alle Kacheln sind
   gleich groß, Hochformate werden beschnitten — im Leuchtkasten ist ohnehin das
   ganze Bild zu sehen.

   Wo der Zuschnitt sitzt, entscheidet aber das Motiv, nicht eine globale Zahl:
   bei einem Hochformat fallen 44 % der Höhe weg, und je nach Bild liegt das
   Wesentliche oben oder unten. Deshalb `--fokus` je Bild setzen — ohne Angabe
   wird mittig beschnitten. */
.galerie__feld img,
.zeile__bild img { object-position: center var(--fokus, 50%); }

.leuchtkasten {
  width: 100vw; max-width: 100vw;
  height: 100svh; max-height: 100svh;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(20, 28, 14, .97);
  color: var(--leinen);
  overflow: hidden;
}
.leuchtkasten::backdrop { background: rgba(20, 28, 14, .9); }
.leuchtkasten__buehne {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  padding: clamp(.75rem, 2vw, 1.5rem);
  gap: var(--s2);
}
.leuchtkasten__bild {
  place-self: center;
  min-height: 0;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--rundung-bild);
}
.leuchtkasten__fuss {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  text-align: center;
}
.leuchtkasten__text { font-family: var(--serife); font-style: italic; font-size: 1rem; color: rgba(242, 237, 227, .82); max-width: 60ch; }
.leuchtkasten__zaehler {
  font-family: var(--serife);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
  white-space: nowrap;
}
.lk-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(242, 237, 227, .3);
  border-radius: 50%;
  background: rgba(20, 28, 14, .6);
  color: var(--leinen);
  font-size: 1.25rem; line-height: 1;
  cursor: pointer;
  transition: background var(--tempo), border-color var(--tempo);
}
.lk-knopf:hover { background: var(--rost); border-color: var(--rost); color: #fff; }
.lk-knopf--zu { position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); z-index: 2; }
.lk-knopf--zurueck, .lk-knopf--vor {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
}
.lk-knopf--zurueck { left: clamp(.5rem, 2vw, 1.5rem); }
.lk-knopf--vor { right: clamp(.5rem, 2vw, 1.5rem); }

/* ==========================================================================
   Belegungskalender
   Bewusst kein fremdes Buchungssystem: Die Daten stehen in `/belegung.txt`
   auf demselben Server, werden von Hand gepflegt und hier gerendert. Damit
   bleibt die Seite frei von Fremdanfragen — und ohne Cookie-Banner. Der
   Kalender bucht nichts, er füllt nur das Anfrageformular vor.
   ========================================================================== */

.kalender__wahl { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.kalender__reiter {
  padding: .55rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung-voll);
  background: var(--papier);
  color: var(--wald);
  font: inherit; font-size: var(--t-fein); font-weight: 600;
  cursor: pointer;
  transition: background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.kalender__reiter:hover { border-color: var(--blatt); }
.kalender__reiter[aria-pressed="true"] { background: var(--wald); border-color: var(--wald); color: var(--papier); }

.kalender__legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  margin: 0 0 var(--s4);
  font-size: var(--t-fein); color: var(--moos);
}
.kalender__legende span { display: inline-flex; align-items: center; gap: .45rem; }
.kalender__muster { width: 1rem; height: 1rem; border-radius: 3px; flex: none; }
.kalender__muster--frei   { background: var(--papier); border: 1px solid var(--linie); }
.kalender__muster--belegt { background: var(--linie); border: 1px solid var(--linie); }
.kalender__stand { margin-left: auto; }

.kalender__monate {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--s4);
}
.kalender__laedt { color: var(--moos); font-size: var(--t-fein); }

.kalender__monat {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--papier);
  padding: var(--s3);
}
.kalender__monat h3 {
  font-size: 1.05rem;
  margin-bottom: var(--s2);
  color: var(--blatt);
}
.kalender__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kalender__wt {
  text-align: center;
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--moos);
  padding-bottom: .3rem;
}
.kalender__tag {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0; border-radius: 4px;
  background: none;
  color: var(--tinte);
  font: inherit; font-size: .875rem;
  font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer;
  transition: background var(--tempo), color var(--tempo);
}
.kalender__tag:hover:not(:disabled) { background: var(--leinen-tief); }
.kalender__tag:disabled { cursor: default; }
.kalender__tag--leer { visibility: hidden; }
/* Belegt: gefüllte Fläche, durchgestrichene Zahl — die Farbe allein soll
   nicht die einzige Information sein. */
.kalender__tag--belegt {
  background: var(--linie);
  color: var(--moos);
  text-decoration: line-through;
}
.kalender__tag--vorbei { color: color-mix(in srgb, var(--moos) 45%, transparent); }
.kalender__tag--rand { background: var(--rost); color: #fff; font-weight: 600; }
.kalender__tag--drin { background: color-mix(in srgb, var(--rost) 18%, transparent); }

.kalender__auswahl {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--rost);
  background: var(--leinen-tief);
}
.kalender__auswahl[hidden] { display: none; }
.kalender__auswahl-text { font-size: var(--t-klein); color: var(--wald); margin-bottom: var(--s3); }
.kalender__auswahl-text b { color: var(--tinte); }

/* ==========================================================================
   Formular
   ========================================================================== */

/* Kontaktseite: Formular und Anschrift stehen untereinander in einer Spalte,
   nicht nebeneinander. Zwei dichte Blöcke nebeneinander — links ein
   zehnfeldriges Formular, rechts Adresse, Knöpfe, Foto und Hinweis — lasen
   sich überfüllt. Untereinander bekommt jeder Block die volle Aufmerksamkeit;
   die Spaltenbreite bleibt begrenzt, damit die Feldpaare nicht auseinander-
   laufen. Die Kontaktwege darüber bleiben bewusst über die ganze Breite. */
.gestapelt {
  display: grid;
  gap: var(--s7);
  max-width: 46rem;
  margin-inline: auto;
}

.formular { display: grid; gap: var(--s3); }
.feldpaar { display: grid; gap: var(--s3); }
@media (min-width: 38rem) { .feldpaar { grid-template-columns: 1fr 1fr; } }

/* Die Felder sind <p>-Elemente und würden sonst den Absatz-Abstand erben.
   Beim letzten Feld greift `p:last-child` und hebt ihn auf, beim ersten nicht —
   dadurch wurde ein Eingabefeld 9 px höher als sein Nachbar. */
.feld { display: grid; gap: .4rem; margin: 0; align-content: start; }
.feld > label { font-size: var(--t-fein); font-weight: 600; color: var(--blatt); }
.feld > label .opt { font-weight: 400; color: var(--moos); }

input, select, textarea {
  width: 100%;
  padding: .85rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--tinte) 18%, transparent);
  border-radius: var(--rundung);
  background: var(--papier);
  color: var(--tinte);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
input:hover, select:hover, textarea:hover { border-color: var(--moos); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rost);
  box-shadow: 0 0 0 4px rgba(138, 39, 18, .14);
}
textarea { min-height: 8rem; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%235B6A66' stroke-width='1.8' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  align-items: start;
  font-size: var(--t-fein);
  color: var(--wald);
}
.zustimmung input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--rost); }

/* Honigtopf gegen Bots – für Menschen unsichtbar, für Bots verlockend */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  pointer-events: none;
}

.meldung {
  padding: var(--s3) var(--s4);
  border-left: 3px solid;
  font-size: var(--t-fein);
}
.meldung[hidden] { display: none; }
.meldung--gut { border-color: var(--wiese); background: rgba(102, 137, 58, .12); color: var(--blatt); }
.meldung--schlecht { border-color: #A3252B; background: rgba(163, 37, 43, .08); color: #7A1B20; }

/* ==========================================================================
   Kontaktwege
   ========================================================================== */

.wege { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 42rem) { .wege { grid-template-columns: repeat(3, 1fr); } }
.weg {
  display: grid; gap: .3rem;
  padding: var(--s4);
  background: var(--papier);
  text-decoration: none;
  color: var(--tinte);
  transition: background var(--tempo);
}
.weg:hover { background: var(--leinen-tief); color: var(--tinte); }
.weg dt, .weg .weg__art {
  font-size: var(--t-marke); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rost);
}
.weg__wert {
  font-family: var(--serife);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  color: var(--blatt);
  font-variant-numeric: lining-nums tabular-nums;
  word-break: break-word;
}
.weg__zusatz { font-size: var(--t-fein); color: var(--moos); }

/* ==========================================================================
   Fragen und Antworten
   ========================================================================== */

.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0;
  font-family: var(--serife);
  font-size: var(--t-klein);
  color: var(--blatt);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  border: 1px solid color-mix(in srgb, var(--tinte) 22%, transparent);
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--rost);
  transition: transform var(--tempo), background var(--tempo), border-color var(--tempo);
}
.faq summary:hover::after { background: var(--papier); border-color: var(--rost); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--s4); max-width: 62ch; color: var(--wald); }

/* ==========================================================================
   Fuß
   ========================================================================== */

.fuss {
  background: var(--nacht);
  color: rgba(242, 237, 227, .82);
  padding-block: var(--s7) var(--s5);
  font-size: var(--t-fein);
}
.fuss__raster {
  display: grid; gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--linie-dunkel);
}
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h2 {
  font-size: 1rem;
  font-family: var(--grotesk);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s3);
}
.fuss a { color: rgba(242, 237, 227, .82); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.fuss address { font-style: normal; line-height: 1.8; }
/* Das Lindenblatt kehrt im Fuß wieder — Anfang und Ende tragen dasselbe Zeichen.
   Es steht *neben* der Wortmarke, nicht darüber: als eigene Zeile schob es die
   Wortmarke um 33,6 px nach unten, während die Spalten „Unterkünfte" und „Mehr"
   gleich mit ihrer Überschrift beginnen. Die erste Textzeile der linken Spalte
   lag dadurch tiefer als die der beiden anderen, und die Fußzeile wirkte
   verrutscht. Nebeneinander folgt es außerdem derselben Anordnung wie das
   Blatt vor jedem `.marke`-Etikett. */
.fuss__marke {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--serife);
  font-size: 1.35rem;
  color: var(--papier);
  margin-bottom: var(--s2);
}
.fuss__marke::before {
  content: '';
  flex: none;
  width: 1.1em; height: 1.1em;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.2 5.2 4.5 8.6 4.5 13a7.5 7.5 0 0 0 6.6 7.45c.2.02.4.03.57.03L11.2 22h1.6l-.47-1.52c.17 0 .37-.01.57-.03A7.5 7.5 0 0 0 19.5 13C19.5 8.6 15.8 5.2 12 2Zm.1 3.1c2.9 2.6 5.4 5.2 5.4 7.9a5.6 5.6 0 0 1-4.5 5.5l1.3-4.2-2.2 1.3-1.1-3.4-1.1 3.4-2.2-1.3 1.3 4.2A5.6 5.6 0 0 1 6.5 13c0-2.7 2.5-5.3 5.6-7.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.2 5.2 4.5 8.6 4.5 13a7.5 7.5 0 0 0 6.6 7.45c.2.02.4.03.57.03L11.2 22h1.6l-.47-1.52c.17 0 .37-.01.57-.03A7.5 7.5 0 0 0 19.5 13C19.5 8.6 15.8 5.2 12 2Zm.1 3.1c2.9 2.6 5.4 5.2 5.4 7.9a5.6 5.6 0 0 1-4.5 5.5l1.3-4.2-2.2 1.3-1.1-3.4-1.1 3.4-2.2-1.3 1.3 4.2A5.6 5.6 0 0 1 6.5 13c0-2.7 2.5-5.3 5.6-7.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fuss__schluss {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between;
  padding-top: var(--s4);
  color: rgba(242, 237, 227, .55);
}

/* ==========================================================================
   Mobiles Menü
   ========================================================================== */

.menue {
  width: min(22rem, 88vw);
  max-width: 100vw;
  height: 100svh; max-height: 100svh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--wald-tief);
  color: var(--leinen);
}
.menue::backdrop { background: rgba(20, 28, 14, .6); }
.menue__innen { display: grid; gap: var(--s4); padding: var(--s4); height: 100%; align-content: start; }
.menue__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.menue nav { display: grid; }
.menue nav a {
  padding: .85rem 0;
  border-bottom: 1px solid var(--linie-dunkel);
  color: var(--leinen);
  font-family: var(--serife);
  font-size: 1.3rem;
  text-decoration: none;
}
.menue nav a[aria-current='page'] { color: var(--gold); }
.menue .knopf { margin-top: var(--s2); }

/* ==========================================================================
   Feste Kontaktleiste auf dem Telefon
   Rund die Hälfte der Anfragen kommt vom Handy. Wer weit unten auf einer
   Unterkunftsseite steht, soll nicht erst nach oben scrollen müssen.
   ========================================================================== */

.handleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linie-dunkel);
  border-top: 1px solid rgba(0, 0, 0, .3);
  box-shadow: 0 -6px 24px -12px rgba(20, 28, 14, .5);
  padding-bottom: env(safe-area-inset-bottom);
}
.handleiste {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.handleiste a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .5rem;
  background: rgba(28, 34, 16, .92);
  color: var(--leinen);
  font-size: .9375rem; font-weight: 600;
  text-decoration: none;
}
.handleiste a:hover { color: #fff; }
.handleiste a + a { background: var(--rost); color: #fff; }
.handleiste svg { width: 1.05rem; height: 1.05rem; flex: none; }

@media (min-width: 62rem) { .handleiste { display: none; } }
@media (max-width: 61.99rem) {
  /* Platz schaffen, damit die Leiste nichts verdeckt */
  .fuss { padding-bottom: calc(var(--s5) + 3.6rem); }
}
@media print { .handleiste { display: none !important; } }

/* ==========================================================================
   Bewegung
   ========================================================================== */

.auf { opacity: 0; transform: translateY(18px); }
.js .auf { transition: opacity var(--tempo-l), transform var(--tempo-l); }
.js .auf.sichtbar, .auf.sichtbar { opacity: 1; transform: none; }
html:not(.js) .auf { opacity: 1; transform: none; }

.held .auf { transition-delay: calc(var(--i, 0) * .1s); }

@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;
  }
  .auf { opacity: 1; transform: none; }
}

/* ==========================================================================
   Druck
   ========================================================================== */

@media print {
  .kopf, .fuss, .knopfreihe, .galerie, .menue, .leuchtkasten { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .held { min-height: 0; background: none; color: #000; padding-block: 0 1rem; }
  .held__bild, .held::after { display: none; }
  .held h1 { color: #000; text-shadow: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}