@charset "utf-8";
/* ============================================================
   Appartement Moosmann — Mellau, Bregenzerwald

   Richtung: „Wälderhaus" — Leinen, geölte Weißtanne, Messing.
   Bewusst EIN helles, warmes Farbschema. Kein Dunkelmodus: ein
   Gasthaus im Bregenzerwald ist hell, nicht nachtschwarz. Alle
   Farben sind explizit gesetzt, damit die Seite auf jedem
   Untergrund trägt.

   Das Rustikale kommt aus dem Hintergrund, nicht aus Zierrat:
   Holzmaserung und Leinengewebe liegen flächig unter der ganzen
   Seite und scrollen mit.

   CI: Gold #B08147 · Tanne #547071
   Typografie: Petrona (Display) · Instrument Sans · IBM Plex Mono
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:light;

  /* CI, für hellen Grund vertieft */
  --gold:#8F5F27; --gold-deep:#734B1D; --gold-warm:#B08147; --gold-soft:#C9A374;
  --gold-glow:rgba(176,129,71,.16);
  --tanne:#3C5654; --tanne-soft:#6E8A88;

  /* Grund: Leinen und Sand */
  --ground:#EEE9E3; --ground-rgb:238,233,227;
  --ground-2:#E1DBD0;
  --surface:#FEFDFB;
  --surface-2:#F6F3EF;

  --ink:#241F1A;
  --ink-2:#443D34;
  --muted:#685F53;
  --faint:#938777;

  --hair:rgba(40,32,22,.13);
  --hair-2:rgba(40,32,22,.2);
  --shadow-s:0 1px 2px rgba(74,54,26,.06), 0 8px 20px -12px rgba(74,54,26,.24);
  --shadow-m:0 2px 5px rgba(74,54,26,.08), 0 20px 45px -20px rgba(74,54,26,.32);
  --shadow-l:0 4px 10px rgba(74,54,26,.1), 0 44px 90px -36px rgba(74,54,26,.44);

  --on-dark:#F8F4EF;
  --ok:#3F6249; --ok-bg:rgba(63,98,73,.13);
  --note:#734B1D; --note-bg:rgba(176,129,71,.17);

  --r-s:8px; --r-m:16px; --r-l:26px; --r-xl:34px;
  --measure:60ch;
  --pad:clamp(20px,4.4vw,44px);
  --gap:clamp(22px,3vw,36px);
  --sec:clamp(72px,9.5vw,140px);
  --maxw:1240px;
  --hdr:74px;
  /* Abstand Inhaltskante → Bildschirmrand, für randabfallende Bilder */
  --edge:calc((100vw - min(100vw, 1240px))/2 + var(--pad));

  --ff-display:"Petrona",Georgia,"Times New Roman",serif;
  --ff-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.7,.28,1);

}

/* ---------- 2. Basis und rustikaler Untergrund ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 20px);
  background:var(--ground);
}
body{
  margin:0; color:var(--ink); font-family:var(--ff-sans);
  font-size:clamp(16px,.42vw + 15px,17.5px); line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  position:relative; background:var(--ground);
}
/* Textur-Ebene: Holzmaserung grob, Leinengewebe fein, warmer Lichtschein.
   Liegt hinter dem Inhalt und scrollt mit — die Seite soll sich wie
   bedrucktes Leinen auf Holz anfühlen, nicht wie eine Farbfläche. */
body::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    url("/assets/img/textur-holz.svg"),
    url("/assets/img/textur-leinen.svg");
  background-repeat:repeat, repeat;
  background-size:1800px 640px, 8px 8px;
  opacity:.11;
}
/* Warmer Lichtschein von oben rechts */
body > .wrap:first-of-type,
.hdr{position:relative}
/* Feines Korn über allem */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img,picture,svg,video{max-width:100%; display:block}
img{height:auto; background:var(--surface-2)}
h1,h2,h3,h4,h5{margin:0; text-wrap:balance; font-weight:400}
p,ul,ol,dl,figure,table,blockquote{margin:0}
a{color:inherit}
::selection{background:var(--gold-warm); color:#fff}

/* ---------- 3. Typografie ---------- */
.u-display{font-family:var(--ff-display); font-weight:400; letter-spacing:-.014em; line-height:1.08; color:var(--ink)}
h1.u-display{font-size:clamp(2.5rem,6.1vw,4.7rem)}
h2.u-display{font-size:clamp(1.95rem,4.1vw,3.2rem)}
h3.u-display{font-size:clamp(1.4rem,2.3vw,1.85rem)}
.u-display em{font-style:italic; color:var(--gold)}
.u-sans-h{font-family:var(--ff-sans); font-weight:600; letter-spacing:-.016em; line-height:1.28; color:var(--ink)}

.eyebrow{
  font-family:var(--ff-mono); font-size:.685rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.8em; margin-bottom:1.15em;
}
.eyebrow::before{content:"◆"; font-size:.58em; line-height:1; letter-spacing:0; opacity:.8}
.eyebrow--light{color:#EACB9C}
.eyebrow--plain{display:block}
.eyebrow--plain::before{display:none}

.lead{font-size:clamp(1.1rem,1.55vw,1.34rem); line-height:1.6; color:var(--ink-2); max-width:var(--measure)}
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:1.9em}
.prose h3{margin-top:1.8em; font-family:var(--ff-sans); font-weight:600; font-size:1.14rem; letter-spacing:-.012em; color:var(--ink)}
.prose p{color:var(--ink-2)}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--gold); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(143,95,39,.45); transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--gold)}
.prose ul,.prose ol{color:var(--ink-2)}
.prose li + li{margin-top:.5em}
.prose ul{list-style:none; padding-left:0}
.prose ul > li{position:relative; padding-left:1.5em}
.prose ul > li::before{content:""; position:absolute; left:.2em; top:.78em;
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-warm); box-shadow:0 0 0 3px var(--gold-glow)}
/* Aufzählungszeichen hängen im Rand, damit Listentext, Fließtext und
   Überschriften auf einer Kante stehen. Auf schmalen Schirmen fehlt der
   Platz dafür — dort bleibt der Einzug. */
@media (min-width:700px){
  .prose ul > li{padding-left:0}
  .prose ul > li::before{left:-1.15em}
}
.prose ol{padding-left:1.4em}
.prose ol li::marker{color:var(--gold); font-family:var(--ff-mono); font-size:.85em}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2}
.wrap--narrow{max-width:840px}
.section{padding-block:var(--sec); position:relative; z-index:2; overflow-x:clip}
.section--tight{padding-block:clamp(48px,6.5vw,84px)}
.section--warm{background:var(--ground-2); position:relative}
/* Auf dem warmen Band ist der Grund dunkler: --gold käme dort nur auf 3,98:1.
   --gold-deep erreicht 5,54:1 und ist derselbe Farbton eine Stufe tiefer —
   dafür gibt es den Token. Auf Karten INNERHALB des Bandes bleibt der helle
   Ton, weil die Karte wieder --surface ist. */
.section--warm > .wrap .eyebrow,
.section--warm > .wrap .prose > p > a,
.section--warm > .wrap .u-display em{color:var(--gold-deep)}

.skip{position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--surface); color:var(--ink); padding:14px 22px;
  border-radius:0 0 var(--r-s) 0; box-shadow:var(--shadow-m); font-weight:600}
.skip:focus{left:0}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--r-s);
}

/* ---------- 4. Bewegung ----------
   Transitions statt Animationen: der Endzustand ist eine echte berechnete
   Eigenschaft. Läuft nichts, ist der Inhalt trotzdem da. `.js` setzt erst
   das Skript — ohne Skript wird gar nichts ausgeblendet. */
@keyframes kenburns{from{transform:scale(1.06)} to{transform:scale(1)}}
.js .reveal{opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease) var(--d,0ms), transform .9s var(--ease) var(--d,0ms)}
.js .reveal.is-in{opacity:1; transform:none}
.js .hero__in > *{opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease)}
.js .hero.is-in .hero__in > *{opacity:1; transform:none}
.js .hero.is-in .hero__in > *:nth-child(1){transition-delay:.08s}
.js .hero.is-in .hero__in > *:nth-child(2){transition-delay:.20s}
.js .hero.is-in .hero__in > *:nth-child(3){transition-delay:.34s}
.js .hero.is-in .hero__in > *:nth-child(4){transition-delay:.48s}
.js .hero.is-in .hero__in > *:nth-child(5){transition-delay:.62s}
.hero__media img{animation:kenburns 16s var(--ease) forwards}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition-duration:.001ms!important}
  .js .reveal,.js .hero__in > *{opacity:1; transform:none}
}

/* ---------- 5. Kopfzeile ---------- */
.hdr{
  position:sticky; top:0; z-index:100; height:var(--hdr);
  display:flex; align-items:center;
  /* War fest verdrahtet auf den Grundton VOR der Entsättigung und blieb
     dadurch gelber als die Seite darunter. Jetzt aus dem Token. */
  background:rgba(var(--ground-rgb),.92);
  backdrop-filter:saturate(1.5) blur(16px); -webkit-backdrop-filter:saturate(1.5) blur(16px);
  box-shadow:0 1px 0 var(--hair);
}
.hdr__in{display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); width:100%}
.brand{display:flex; flex-direction:column; text-decoration:none; line-height:1; flex:none; margin-right:auto}
.brand__n{font-family:var(--ff-display); font-weight:400; font-size:1.32rem; letter-spacing:-.012em; color:var(--ink)}
.brand__s{font-family:var(--ff-mono); font-size:.57rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:6px}

.nav{display:flex; align-items:center; gap:clamp(6px,1.1vw,22px)}
.nav a:not(.btn){text-decoration:none; color:var(--ink-2); font-size:.9rem; font-weight:500;
  padding:8px 2px; position:relative; white-space:nowrap; transition:color .18s ease}
.nav a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease)}
.nav a:not(.btn):hover{color:var(--ink)}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.nav a:not(.btn)[aria-current="page"]{color:var(--ink)}
/* Schaltfläche in der Kopfzeile: etwas kompakter als im Fließtext */
.hdr .btn{font-size:.855rem; padding:.62em 1.25em; border-radius:var(--r-s); letter-spacing:.01em}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--ff-sans); font-size:.92rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; padding:.8em 1.5em; border-radius:99px; border:0;
  cursor:pointer; white-space:nowrap; max-width:100%; position:relative;
  transition:transform .22s var(--ease), box-shadow .28s var(--ease), background .22s ease}
.btn--primary{background:var(--gold); color:#FFF9EF; box-shadow:0 2px 6px rgba(90,60,20,.24), 0 12px 26px -12px rgba(90,60,20,.5)}
.btn--primary:hover{background:var(--gold-deep); transform:translateY(-2px); box-shadow:0 4px 10px rgba(90,60,20,.28), 0 20px 40px -14px rgba(90,60,20,.55)}
.btn--ghost{background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px var(--hair-2)}
.btn--ghost:hover{transform:translateY(-2px); box-shadow:var(--shadow-m)}
/* Auf Bildern: dunkel unterlegt, damit die Beschriftung sicher lesbar bleibt */
.btn--onimg{background:rgba(30,21,10,.6); color:#FFFCF4; box-shadow:inset 0 0 0 1.5px rgba(255,252,244,.55); backdrop-filter:blur(8px)}
.btn--onimg:hover{background:rgba(30,21,10,.78); transform:translateY(-2px)}
.btn--lg{font-size:1rem; padding:.95em 1.9em}
@media (max-width:460px){
  .btn{white-space:normal; text-align:center; line-height:1.35}
  .btn--lg{font-size:.95rem; padding:.85em 1.35em}
}

.burger{display:none; background:none; border:0; padding:9px; cursor:pointer; color:var(--ink); border-radius:var(--r-s)}
.burger svg{width:24px; height:24px}
.nav__close{display:none}

@media (max-width:1000px){
  .burger{display:block; margin-left:auto}
  .brand{margin-right:0}
  .nav{position:fixed; inset:0; z-index:150; background:var(--ground);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:calc(var(--hdr) + 30px) var(--pad) 44px;
    /* Kein horizontaler Versatz: ein ausgeschobenes fixed-Element vergrößert
       sonst die Scrollbreite; overflow-x am body würde position:sticky brechen. */
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    overflow-y:auto; overscroll-behavior:contain}
  .nav[data-open="true"]{opacity:1; visibility:visible; transform:none}
  /* Ein backdrop-filter erzeugt für position:fixed-Nachfahren einen eigenen
     Containing Block. Bliebe er an, bezöge sich .nav{inset:0} auf die
     Kopfzeile statt auf den Viewport — das Menü wäre nur kopfzeilenhoch.
     Solange es offen ist, wird der Filter deshalb abgeschaltet; sichtbar ist
     davon nichts, weil das Menü ohnehin den ganzen Bildschirm bedeckt. */
  body[data-lock="true"] .hdr{backdrop-filter:none; -webkit-backdrop-filter:none}
  /* Nur die direkten Menüpunkte. Ohne „>" trafen diese Regeln auch die
     Links im Sprachumschalter — der bekam dadurch 24px Schrift und 18px
     Innenabstand und lief aus seinen Schaltflächen heraus. */
  .nav > a:not(.btn){font-size:1.5rem; font-family:var(--ff-display); font-weight:300; padding:18px 0; color:var(--ink)}
  .nav > a:not(.btn) + a:not(.btn){box-shadow:0 -1px 0 var(--hair)}
  .nav > a:not(.btn)::after{display:none}
  .nav .btn{margin-top:30px; font-family:var(--ff-sans); font-size:1rem; align-self:flex-start}
  .nav__close{display:block; position:absolute; top:16px; right:var(--pad); background:none; border:0; padding:9px; cursor:pointer; color:var(--ink)}
  .nav__close svg{width:24px; height:24px}
  body[data-lock="true"]{overflow:hidden}
}

/* ---------- 6. Hero ----------
   Der Verlauf ist so kräftig, dass heller Text auf JEDEM Bild
   das Kontrastverhältnis 4.5:1 deutlich überschreitet. */
.hero{position:relative; margin-top:calc(var(--hdr) * -1);
  min-height:min(100vh,940px); display:flex; align-items:flex-end; isolation:isolate}
.hero--sub{min-height:min(72vh,680px)}
.hero__media{position:absolute; inset:0; z-index:-2; overflow:hidden}
/* Das <picture> muss die Fläche selbst ausfüllen. Sonst hat es auto-Höhe, und
   die Prozenthöhe am <img> löst gegen „auto" auf — das Bild bleibt dann auf
   seiner Eigenhöhe (Breite ÷ 1,5) stehen. Auf breiten Fenstern fiel das nicht
   auf, weil diese Eigenhöhe zufällig größer war als der Hero und der Überschuss
   weggeschnitten wurde. Auf hohen, schmalen Fenstern endete das Bild dagegen
   sichtbar auf halber Höhe. */
.hero__media picture,
.hero__media .bildwrap{display:block; width:100%; height:100%}
.hero__media img{width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,rgba(20,13,6,.5) 0%,rgba(20,13,6,.24) 22%,rgba(20,13,6,.58) 48%,rgba(20,13,6,.84) 74%,rgba(20,13,6,.94) 100%),
    linear-gradient(80deg,rgba(20,13,6,.84) 0%,rgba(20,13,6,.44) 50%,rgba(20,13,6,.08) 84%)}
/* Für von Haus aus dunkle Motive: schwächerer Verlauf, damit das Bild
   nicht zumatscht. Der Kontrast wird trotzdem gemessen, nicht geschätzt. */
.hero--dunkel::after{
  background:
    linear-gradient(180deg,rgba(20,13,6,.36) 0%,rgba(20,13,6,.12) 24%,rgba(20,13,6,.4) 52%,rgba(20,13,6,.66) 78%,rgba(20,13,6,.78) 100%),
    linear-gradient(80deg,rgba(20,13,6,.7) 0%,rgba(20,13,6,.32) 52%,transparent 86%)}
.hero__in{width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:calc(var(--hdr) + 48px) var(--pad) clamp(56px,8vw,104px);
  color:var(--on-dark); position:relative; z-index:2}
.hero h1{color:#FFFDF7; max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hero h1 em{font-style:italic; color:#F0D6AB}
.hero .lead{color:#F7F0E3; max-width:50ch; margin-top:1.15em; text-shadow:0 1px 12px rgba(0,0,0,.8)}
.hero__cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:2.2em}
.hero__meta{display:flex; flex-wrap:wrap; gap:10px 0; margin-top:2.6em;
  font-family:var(--ff-mono); font-size:.73rem; letter-spacing:.13em; text-transform:uppercase;
  color:#EFE5D2; text-shadow:0 1px 10px rgba(0,0,0,.85)}
.hero__meta span{padding-inline:clamp(14px,2vw,26px)}
.hero__meta span:first-child{padding-left:0}
.hero__meta span + span{box-shadow:-1px 0 0 rgba(239,229,210,.35)}
.hero__meta b{color:#FFFDF7; font-weight:500; font-size:1.15em}

/* Saison-Umschalter */
.seasons{display:inline-flex; gap:3px; padding:4px; border-radius:99px;
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hair)}
.seasons--onimg{background:rgba(30,21,10,.55); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1.5px rgba(255,252,244,.42)}
.seasons button{font-family:var(--ff-mono); font-size:.685rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.68em 1.3em; border-radius:99px; border:0; background:none; color:var(--muted);
  cursor:pointer; transition:background .28s var(--ease), color .28s ease; font-weight:500}
.seasons--onimg button{color:#F4EBD9}
.seasons button[aria-selected="true"]{background:var(--gold); color:#FFF9EF; box-shadow:0 2px 8px -2px rgba(90,60,20,.5)}
[data-season-panel][hidden]{display:none}

/* ---------- 7. Redaktionelle Text-Bild-Abschnitte ----------
   Asymmetrisches Raster, versetztes Bild mit Unterschrift, abgesetzte
   Einstiegszeile, Kennzahlenreihe, Signatur. Ersetzt den braven 50/50-Block. */
.editorial{display:grid; gap:clamp(32px,5vw,72px); align-items:start; grid-template-columns:1fr}
@media (min-width:900px){
  .editorial{grid-template-columns:1.04fr .96fr}
  .editorial--rev .editorial__text{order:2}
  .editorial--rev .editorial__media{order:1}
  .editorial__media{margin-top:clamp(20px,3.4vw,58px)}
  .editorial--rev .editorial__media{margin-top:0}
}
.editorial__text > * + *{margin-top:1.15em}
.editorial__text h2{margin-bottom:.15em}

/* Einstiegszeile: größer, in der Display-Schrift, mit Zierfilet links */
.editorial__lead{
  font-family:var(--ff-display); font-weight:300; font-size:clamp(1.3rem,2vw,1.66rem);
  line-height:1.44; color:var(--ink); letter-spacing:-.014em;
  padding-left:clamp(24px,2.8vw,34px); position:relative;
}
.editorial__lead::before{content:""; position:absolute; left:0; top:.3em; bottom:.3em; width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(143,95,39,.12)); border-radius:2px}
.editorial__lead em{font-style:italic; color:var(--gold)}
/* Ohne Zierfilet: in schmalen Spalten steht die Linie zu nah am Satz */
.editorial__lead--plain{padding-left:0}
.editorial__lead--plain::before{display:none}

/* Kennzahlenreihe, oben und unten von Haarlinien gefasst */
.keyfacts{display:flex; flex-wrap:wrap; gap:0 clamp(22px,3.2vw,42px);
  padding-block:clamp(16px,2vw,22px); margin-block:1.7em!important;
  box-shadow:0 1px 0 var(--hair) inset, 0 -1px 0 var(--hair) inset}
.keyfacts div{display:flex; flex-direction:column; gap:3px; padding-block:6px}
.keyfacts b{font-family:var(--ff-display); font-weight:300; font-size:clamp(1.75rem,2.6vw,2.3rem);
  line-height:1; color:var(--gold); letter-spacing:-.022em;
  /* Versalziffern erzwingen: Schriften mit Mediävalziffern (z. B. Vollkorn)
     setzen die 1 sonst als I, was sich als Buchstabe liest. */
  font-variant-numeric:lining-nums tabular-nums}
.keyfacts span{font-family:var(--ff-mono); font-size:.655rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}

.editorial__sign{font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:1.2rem; color:var(--gold); margin-top:1.6em!important}

.editorial__media{margin:0}
.editorial__media > picture,
.editorial__media > .bildwrap{display:block; border-radius:var(--r-l); overflow:hidden}
.editorial__media img{width:100%; aspect-ratio:4/5; object-fit:cover}
.editorial__media--wide img{aspect-ratio:4/3}
.editorial__media figcaption{font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:15px; display:flex; align-items:center; gap:10px}
.editorial__media figcaption::before{content:""; width:20px; height:1px; background:var(--gold); flex:none; opacity:.75}

/* Zwei versetzte Bilder */
.overlap{position:relative; padding-bottom:clamp(40px,7vw,88px); padding-right:clamp(30px,5vw,64px)}
.overlap figure{margin:0; border-radius:var(--r-l); overflow:hidden}
.overlap figure img{width:100%; object-fit:cover}
.overlap .o-a img{aspect-ratio:4/5}
.overlap .o-b{position:absolute; right:0; bottom:0; width:clamp(150px,46%,270px);
  outline:8px solid var(--ground); outline-offset:-1px}
.section--warm .overlap .o-b{outline-color:var(--ground-2)}
.overlap .o-b img{aspect-ratio:1/1}

.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:clamp(30px,5vw,72px); align-items:center}
.split--top{align-items:start}
.split__media{border-radius:var(--r-l); overflow:hidden}
.split__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
/* Grundrisse: Ein Plan darf nicht beschnitten werden — anders als bei einem
   Foto fehlt sonst ein Raum. Deshalb kein fester Zuschnitt, sondern die
   natürlichen Proportionen der Zeichnung. */
.split__media--plan img{aspect-ratio:auto; object-fit:contain}
.split__media--tall img{aspect-ratio:3/4}
.split__media--wide img{aspect-ratio:3/2}

.bleed{width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; position:relative; z-index:2}
.bleed img{width:100%; aspect-ratio:21/9; object-fit:cover}
@media (max-width:700px){.bleed img{aspect-ratio:4/3}}

.grid{display:grid; gap:var(--gap)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* ---------- 8. Karten ---------- */
.card{background:var(--surface); border-radius:var(--r-l); overflow:hidden;
  box-shadow:0 0 0 1px var(--hair); display:flex; flex-direction:column;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease);
  text-decoration:none; color:inherit}
a.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-l)}
.card__media{overflow:hidden; background:var(--surface-2); position:relative}
.card__media img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease)}
a.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:26px 28px 30px; display:flex; flex-direction:column; gap:10px; flex:1}
.card__body h3{font-size:1.3rem}
.card__meta{font-family:var(--ff-mono); font-size:.695rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 16px}
.card__body p{color:var(--ink-2); font-size:.95rem; line-height:1.62}
.card__foot{margin-top:auto; padding-top:18px; display:flex; align-items:baseline;
  justify-content:space-between; gap:12px; box-shadow:0 -1px 0 var(--hair)}
.card__price{font-family:var(--ff-mono); font-size:.95rem; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.card__price small{display:block; font-size:.71rem; color:var(--muted); font-weight:400; letter-spacing:.05em; margin-top:2px}
.card__more{font-size:.86rem; font-weight:600; color:var(--gold); white-space:nowrap}
a.card:hover .card__more{text-decoration:underline; text-underline-offset:3px}

.feat{background:var(--surface); border-radius:var(--r-l); padding:28px 30px 32px;
  box-shadow:0 0 0 1px var(--hair); display:flex; flex-direction:column; gap:10px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.feat{transition:none}
.feat__i{width:44px; height:44px; padding:10px; border-radius:50%;
  background:var(--gold-glow); color:var(--gold); margin-bottom:8px}
.feat h3{font-family:var(--ff-sans); font-weight:600; font-size:1.06rem; letter-spacing:-.012em}
.feat p{font-size:.93rem; color:var(--ink-2); line-height:1.62}

/* ---------- 9. Fakten, Ausstattung ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:1px; background:var(--hair); border-radius:var(--r-l); overflow:hidden}
.facts > div{background:var(--surface); padding:24px 26px 26px; display:flex; flex-direction:column; gap:5px; position:relative; overflow:hidden}
.facts > div::after{content:""; position:absolute; top:14px; right:14px; width:7px; height:7px;
  transform:rotate(45deg); background:var(--gold); opacity:.3; border-radius:1px}
.facts dt{font-family:var(--ff-mono); font-size:.665rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.facts dd{margin:0; font-family:var(--ff-display); font-size:1.5rem; font-weight:300; color:var(--ink); line-height:1.2; letter-spacing:-.015em}
.facts dd small{display:block; font-family:var(--ff-sans); font-size:.82rem; font-weight:400; color:var(--muted); margin-top:5px; line-height:1.5; letter-spacing:0}

.amen{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:2px 30px}
/* Der Haken sitzt absolut, nicht als Flex-Kind. Sonst wird jedes Kind des
   <li> zu einer eigenen Spalte — ein Eintrag mit zwei Links zerfällt dann in
   vier Spalten, und der Satz bricht an den falschen Stellen um. */
.amen li{position:relative; padding:9px 0 9px 32px; font-size:.95rem; color:var(--ink-2); line-height:1.55}

/* Ausstattungsliste als Tafel: Haarlinien geben den Einträgen Halt,
   sonst schwimmt der Text auf der Fläche. */
.amen--tafel{
  background:var(--surface); border-radius:var(--r-l); box-shadow:0 0 0 1px var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:0; overflow:hidden;
}
.amen--tafel li{
  padding:16px clamp(20px,2.4vw,28px);
  padding-left:calc(clamp(20px,2.4vw,28px) + 32px);
  box-shadow:inset 0 -1px 0 var(--hair), inset -1px 0 0 var(--hair);
}
@media (max-width:620px){.amen--tafel li{box-shadow:inset 0 -1px 0 var(--hair)}}

/* Kopf einer solchen Tafel */
.tafel-kopf{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-bottom:16px; padding-bottom:12px; box-shadow:0 1px 0 var(--hair);
}
.tafel-kopf h3{font-family:var(--ff-display); font-weight:400; font-size:1.5rem;
  letter-spacing:-.015em; color:var(--ink)}
.tafel-kopf span{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-left:auto}
.amen li::before{content:""; position:absolute; left:0; top:calc(9px + .28em);
  width:19px; height:19px; border-radius:50%;
  background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6249' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
/* Muss nach der Grundregel stehen: gleiche Spezifität, die spätere gewinnt.
   In der Tafel sitzt der Haken im Innenabstand der Zelle, nicht am Rand. */
.amen--tafel li::before{left:clamp(20px,2.4vw,28px); top:calc(16px + .28em)}

/* ---------- Buchungsstrecke ----------
   Fremdinhalt in einem Rahmen.

   Das Fenster meldet seine Höhe per postMessage — aber nur unzuverlässig,
   gemessen in etwa der Hälfte der Aufrufe (geprüft 12.10.2026). Die Höhe hier
   ist deshalb kein Platzhalter, sondern muss für sich allein tragen: großzügig
   genug, dass die ganze Strecke sichtbar ist, wenn keine Meldung kommt. Bleibt
   unten etwas Luft, ist das hinnehmbar — ein abgeschnittenes Buchungsformular
   wäre es nicht. Kommt die Meldung doch, setzt site.js die genaue Höhe. */
.buchung{width:100%; max-width:1280px; margin:0 auto}
.buchung__sprachen{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:20px; font-size:.9rem; color:var(--muted)}
.buchung__sprachen a{color:var(--gold-deep); text-underline-offset:3px}
.buchung__sprachen a.ist-aktiv{color:var(--ink); font-weight:600; text-decoration:none; cursor:default}
.buchung iframe{display:block; width:100%; border:0; border-radius:var(--r-l);
  background:#fff; height:3000px}
/* Ab etwa 1150 px stellt die Buchungsstrecke von gestaffelt auf nebeneinander
   um und wird dadurch fast halb so hoch. Gemessen: rund 1620 px breit gegen
   2650–2890 px schmal (12.10.2026). Der Umschaltpunkt hier liegt bewusst
   darüber, damit die schmale Fassung nie zu wenig Platz bekommt. */
@media (min-width:1200px){.buchung iframe{height:1750px}}

/* ---------- 10. Tabellen ---------- */
.tbl-wrap{overflow-x:auto; background:var(--surface); border-radius:var(--r-l); box-shadow:0 0 0 1px var(--hair); -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px}
caption{text-align:left; padding:24px 28px 6px; font-family:var(--ff-display); font-weight:300; font-size:1.5rem; color:var(--ink); letter-spacing:-.015em}
caption span{display:block; font-family:var(--ff-sans); font-weight:400; font-size:.855rem; color:var(--muted); margin-top:7px; letter-spacing:0; line-height:1.55}
th{text-align:left; font-family:var(--ff-mono); font-size:.645rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted); padding:18px 28px 11px; white-space:nowrap}
td{padding:15px 28px; box-shadow:0 -1px 0 var(--hair); vertical-align:top; line-height:1.55; color:var(--ink-2)}
td:first-child{color:var(--ink); font-weight:500}
td.num,th.num{text-align:right; font-family:var(--ff-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
td.num{color:var(--ink); font-weight:500}
tbody tr{transition:background .18s ease}
tbody tr:hover td{background:var(--surface-2)}
tfoot td{font-weight:600; color:var(--ink); background:var(--surface-2)}

/* ---------- 11. Hinweis ---------- */
.tbl-wrap + .note,.tbl-wrap + * > .note:first-child{margin-top:clamp(20px,2.4vw,32px)}
.note + .tbl-wrap{margin-top:clamp(20px,2.4vw,32px)}
.note{background:var(--note-bg); border-radius:var(--r-m); padding:20px 24px;
  font-size:.9rem; line-height:1.6; color:var(--ink-2); display:flex; gap:15px; align-items:flex-start}
.note__i{flex:none; width:19px; height:19px; margin-top:.2em; color:var(--note)}
.note__txt{min-width:0}
.note__txt p{margin:0}
.note__txt p + p{margin-top:.8em}
.note b{color:var(--ink); font-weight:600}
.note a{color:var(--gold); text-underline-offset:3px}
.note code{font-family:var(--ff-mono); font-size:.9em; background:var(--surface); padding:2px 6px; border-radius:5px}
.note--plain{background:var(--surface-2)}
.src{font-family:var(--ff-mono); font-size:.645rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); display:inline-block; margin-left:.5em; white-space:nowrap}

/* ---------- 12. FAQ ---------- */
.faq{display:flex; flex-direction:column; gap:1px; background:var(--hair); border-radius:var(--r-l); overflow:hidden}
.faq details{background:var(--surface)}
.faq summary{padding:22px 28px; cursor:pointer; font-weight:600; font-size:1.04rem; color:var(--ink);
  display:flex; align-items:flex-start; gap:16px; list-style:none; line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; margin-left:auto; width:16px; height:16px; margin-top:.32em;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%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' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{background:var(--surface-2)}
.faq__a{padding:0 28px 26px; color:var(--ink-2); font-size:.955rem; line-height:1.68; max-width:var(--measure)}
.faq__a > * + *{margin-top:.8em}
.faq__a a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}

/* ---------- 13. Bewertungen ---------- */
.rating{display:flex; align-items:center; gap:15px; flex-wrap:wrap}
.rating__n{font-family:var(--ff-display); font-size:3.2rem; font-weight:300; line-height:1; color:var(--ink); letter-spacing:-.03em}
.stars{display:flex; gap:3px; color:var(--gold-warm)}
.stars svg{width:16px; height:16px}
.rating__c{font-size:.9rem; color:var(--muted)}
.quote{background:var(--surface); border-radius:var(--r-l); padding:32px 34px;
  box-shadow:0 0 0 1px var(--hair); display:flex; flex-direction:column; gap:16px; position:relative}
.quote::before{content:"\201C"; position:absolute; top:-6px; right:26px;
  font-family:var(--ff-display); font-size:6.5rem; line-height:1; color:var(--gold); opacity:.16; pointer-events:none}
.quote blockquote{font-family:var(--ff-display); font-weight:300; font-size:1.24rem; line-height:1.5; color:var(--ink); letter-spacing:-.008em}
.quote figcaption{font-size:.85rem; color:var(--muted); display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.quote figcaption b{color:var(--ink-2); font-weight:600}

.dialect{text-align:center; max-width:min(94%,34ch); margin-inline:auto; position:relative; padding-block:clamp(24px,4vw,44px)}
.dialect q{font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.7rem,4vw,2.9rem); line-height:1.22; color:var(--ink);
  letter-spacing:-.018em; quotes:"\201C" "\201D"}
.dialect footer{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:1.6em}
.dialect .trans{font-size:1.02rem; max-width:32ch; margin-inline:auto; color:var(--muted); margin-top:1.1em; font-family:var(--ff-sans); line-height:1.6}

/* ---------- 14. Galerie ----------
   Masonry über CSS-Spalten, wie die Essential-Grid-Galerie der alten Seite:
   die Bilder behalten ihr Seitenverhältnis und fließen spaltenweise. */
.gal{columns:3; column-gap:16px}
.gal figure{break-inside:avoid; margin:0 0 16px; border-radius:var(--r-m);
  overflow:hidden; background:var(--surface-2); display:block}
.gal img{width:100%; height:auto; object-fit:cover; transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
/* Vergrößern: nur dort anbieten, wo es Sinn ergibt — mit Zeigegerät und
   genug Platz. Auf Touchgeräten bleibt es beim Blättern in der Seite. */
.gal__zoom{display:block; width:100%; padding:0; border:0; background:none; cursor:default}
@media (min-width:900px) and (pointer:fine){
  .gal__zoom{cursor:zoom-in}
  .gal__zoom::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
    transition:opacity .3s var(--ease);
    background:rgba(20,13,6,.28) center no-repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF5' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  }
  .gal figure{position:relative}
  .gal figure:hover .gal__zoom::after,.gal__zoom:focus-visible::after{opacity:1}
}

/* Leuchtkasten */
.lightbox{
  border:0; padding:0; max-width:100vw; max-height:100vh; width:100%; height:100%;
  background:rgba(20,13,6,.94); color:var(--on-dark); overflow:hidden;
}
.lightbox::backdrop{background:rgba(20,13,6,.9)}
.lightbox__in{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:clamp(24px,4vw,56px);
}
.lightbox img{max-width:100%; max-height:calc(100vh - 190px); width:auto; object-fit:contain;
  border-radius:var(--r-m); background:none}
.lightbox figcaption{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:#EFE5D2; text-align:center; max-width:60ch;
}
.lightbox__zaehler{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; color:#B9AC96}
.lightbox__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,252,245,.14); color:#FFFCF5; display:grid; place-items:center;
  transition:background .2s ease;
}
.lightbox__btn:hover{background:rgba(255,252,245,.28)}
.lightbox__btn svg{width:22px; height:22px}
.lightbox__prev{left:clamp(14px,2.5vw,34px)}
.lightbox__next{right:clamp(14px,2.5vw,34px)}
.lightbox__close{position:absolute; top:clamp(14px,2.5vw,28px); right:clamp(14px,2.5vw,28px);
  width:46px; height:46px; transform:none}
@media (prefers-reduced-motion:reduce){.lightbox,.lightbox__btn{transition:none}}
/* Bei wenigen Bildern reichen zwei Spalten, sonst reißt die letzte Spalte ab */
.gal--anriss{columns:3}
@media (max-width:1000px){.gal--anriss{columns:2}}
/* Der Bestand ist fast durchgehend 3:2 — bei gleichem Seitenverhältnis
   ergäben Spalten ein gleichförmiges Raster. Ein wiederkehrender Beschnitt
   erzeugt den Masonry-Fluss der bisherigen Galerie. Feste Verhältnisse
   reservieren zugleich den Platz, bevor die Bilder geladen sind. */
.gal img{aspect-ratio:3/2}
.gal figure:nth-child(6n+1) img{aspect-ratio:3/4}
.gal figure:nth-child(6n+3) img{aspect-ratio:1/1}
.gal figure:nth-child(6n+5) img{aspect-ratio:4/5}
@media (max-width:1000px){.gal{columns:2}}
@media (max-width:560px){.gal{columns:1}}

/* ---------- 15. Band ---------- */
.band{position:relative; isolation:isolate; color:var(--on-dark); border-radius:var(--r-xl); overflow:hidden}
.band__media{position:absolute; inset:0; z-index:-2}
/* Wie beim Hero: ohne eigene Höhe am <picture> löst die Prozenthöhe am <img>
   gegen „auto" auf, und das Band bliebe unten offen. */
/* .bildwrap sitzt bei Bildern mit Nachweis zwischen Rahmen und <picture> und
   hat für sich genommen auto-Höhe — es muss dieselbe Fläche ausfüllen. */
.band__media picture,
.band__media .bildwrap{display:block; width:100%; height:100%}
.band__media img{width:100%; height:100%; object-fit:cover}
.band::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,rgba(20,13,6,.94) 0%,rgba(20,13,6,.8) 46%,rgba(20,13,6,.42) 100%)}
.band__in{padding:clamp(40px,6vw,84px); max-width:58ch}
.band h2{color:#FFFDF7}
.band h2 em{font-style:italic; color:#F0D6AB}
.band p{color:#F6EFE2; margin-top:1.05em; font-size:1.08rem; line-height:1.62}

/* ---------- 16. Schritte ---------- */
.steps{list-style:none; padding:0; margin:0; display:flex; flex-direction:column}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:24px; padding:24px 0; box-shadow:0 -1px 0 var(--hair)}
.steps li:first-child{box-shadow:none}
.steps__n{display:flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; background:var(--gold-glow); font-family:var(--ff-display);
  font-size:1.15rem; font-weight:300; color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(143,95,39,.32); font-variant-numeric:tabular-nums}
.steps h3{font-family:var(--ff-sans); font-weight:600; font-size:1.06rem; margin-bottom:6px}
.steps p{font-size:.94rem; color:var(--ink-2); line-height:1.62; max-width:var(--measure)}

/* ---------- 17. Formular ---------- */
.form{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.field{display:flex; flex-direction:column; gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--ff-mono); font-size:.665rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{font-family:var(--ff-sans); font-size:1rem; color:var(--ink);
  background:var(--surface); border:0; box-shadow:inset 0 0 0 1px var(--hair-2);
  border-radius:var(--r-s); padding:.85em .95em; width:100%; transition:box-shadow .2s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; box-shadow:inset 0 0 0 2px var(--gold)}
.field textarea{resize:vertical; min-height:130px; line-height:1.62}
.field__hint{font-size:.815rem; color:var(--muted)}
.check{display:flex; gap:13px; align-items:flex-start; font-size:.9rem; color:var(--ink-2); line-height:1.58}
.check input{width:18px; height:18px; margin-top:.22em; flex:none; accent-color:var(--gold)}

/* ---------- 18. Kontakt ---------- */
.contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr)); gap:var(--gap)}
.contact a{background:var(--surface); border-radius:var(--r-l); padding:28px 30px; box-shadow:0 0 0 1px var(--hair);
  text-decoration:none; display:flex; flex-direction:column; gap:7px;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.contact a:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)}
.contact .k{font-family:var(--ff-mono); font-size:.665rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.contact .v{font-family:var(--ff-display); font-size:1.32rem; font-weight:400; color:var(--ink); letter-spacing:-.015em; line-height:1.25; overflow-wrap:anywhere}
.contact .h{font-size:.85rem; color:var(--muted)}
/* Die E-Mail-Adresse ist der einzige Wert, der bei 1,32rem breiter wird
   als die Kachel. Eine Spur kleiner passt sie auf eine Zeile; wird die
   Kachel schmaler, bricht sie sauber hinter dem @ um. */
.contact .v--mail{font-size:1.16rem}

/* ---------- 19. Brotkrumen, Marken ---------- */
.crumbs{padding-block:22px 0; position:relative; z-index:2}
.crumbs ol{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; font-size:.8rem; color:var(--muted)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs li + li::before{content:"›"; margin-right:8px; color:var(--faint)}
.crumbs [aria-current]{color:var(--ink-2)}
.badge{display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono);
  font-size:.655rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:6px 12px; border-radius:99px; background:var(--surface-2); color:var(--muted)}

/* ---------- 20. Fußzeile ---------- */
.ftr{background:var(--surface); box-shadow:0 -1px 0 var(--hair); margin-top:var(--sec); position:relative; z-index:2}
.ftr__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); gap:clamp(30px,4vw,56px); padding-block:clamp(54px,7vw,84px)}
.ftr h4{font-family:var(--ff-mono); font-size:.645rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:17px; font-weight:500}
.ftr ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.ftr a{color:var(--ink-2); text-decoration:none; font-size:.92rem; transition:color .18s}
.ftr a:hover{color:var(--gold)}
.ftr address{font-style:normal; color:var(--ink-2); font-size:.92rem; line-height:1.8}
.ftr address a{display:block}
.ftr__brand .brand__n{font-size:1.6rem}
.ftr__note{font-size:.88rem; color:var(--muted); margin-top:16px; line-height:1.65; max-width:34ch}
.ftr__base{display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  padding-block:24px; box-shadow:0 -1px 0 var(--hair); font-size:.8rem; color:var(--muted)}
/* --faint reichte hier nicht: 2,9:1 auf --surface. Die Fußzeile trägt die
   Impressums- und Datenschutzlinks — die müssen lesbar sein. */
.ftr__base a{color:var(--muted); font-size:.8rem}
.ftr__base nav{display:flex; gap:22px; flex-wrap:wrap}
.lang{display:inline-flex; gap:2px; font-family:var(--ff-mono); font-size:.665rem; letter-spacing:.12em; text-transform:uppercase}
.lang a{padding:6px 9px; border-radius:var(--r-s); color:var(--muted); text-decoration:none}
.lang a[aria-current]{background:var(--surface-2); color:var(--ink); font-weight:500}

/* ---------- 21. Hilfsklassen ---------- */
.center{text-align:center; margin-inline:auto}
.center .lead,.center .prose{margin-inline:auto}
.center .eyebrow{justify-content:center}
.mt-s{margin-top:16px} .mt-m{margin-top:28px} .mt-l{margin-top:46px}
.dim{color:var(--muted)}
.nowrap{white-space:nowrap}
.mono{font-family:var(--ff-mono); font-variant-numeric:tabular-nums}
.vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.sec-head{max-width:var(--measure); margin-bottom:clamp(34px,4vw,54px)}
.sec-head .lead{margin-top:.75em}
.sec-head--center{text-align:center; margin-inline:auto}
.sec-head--center .eyebrow{justify-content:center}

/* ---------- 22. Zurückhaltende Auszeichnungen ----------
   Schindelkanten und Rautenbänder sind entfallen — die Rustik trägt
   allein der Untergrund. Geblieben ist die Initiale im Fließtext. */
.prose--drop > p:first-of-type::first-letter{font-family:var(--ff-display); font-weight:300; font-size:3.9em;
  line-height:.82; float:left; margin:.06em .12em 0 0; color:var(--gold)}

@media print{
  .hdr,.nav,.burger,.hero__cta,.seasons,body::after,body::before{display:none!important}
  body{background:#fff!important; color:#000; font-size:11pt}
  .card,.facts,.tbl-wrap,.feat,.quote{box-shadow:none!important; outline:1px solid #ccc}
  .js .reveal{opacity:1!important; transform:none!important}
}


/* ============================================================
   23. TEXT-BILD-SEKTION — fünf Vorschläge zur Auswahl
   Gemeinsam: Bild läuft zum Bildschirmrand aus, keine Rundung,
   Text sucht die Nähe zum Bild statt daneben zu stehen.
   ============================================================ */
.vx{position:relative; z-index:2}
.vx img{border-radius:0}                       /* randabfallende Bilder bleiben eckig */
/* Bildunterschriften: an die Varianten selbst gebunden, nicht an .vx —
   sonst greifen sie in Abschnitten ohne diesen Wrapper nicht. */
:is(.v1,.v3,.v4,.v5) figcaption:not(.v5__head){
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-top:14px;
  display:flex; align-items:center; gap:10px}
:is(.v1,.v3,.v4,.v5) figcaption:not(.v5__head)::before{
  content:""; width:20px; height:1px; background:var(--gold); flex:none; opacity:.75}
/* Randabfallende Bilder: Unterschrift auf die Inhaltskante einrücken,
   sonst klebt sie am Bildschirmrand. */
@media (min-width:900px){
  .v1__media figcaption,.v4__media figcaption{padding-left:var(--edge)}
  .v2__media figcaption{padding-right:var(--edge); justify-content:flex-end}
}
.vx__label{font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--gold); padding:5px 11px; border-radius:3px; display:inline-block; margin-bottom:26px}
.vx__panel{background:var(--surface); padding:clamp(26px,3.4vw,46px)}
.vx__panel > * + *{margin-top:1.05em}
/* Nach der Vorzeile kein zusätzlicher Abstand — gilt überall.
   `em`-Werte beziehen sich auf die eigene Schriftgröße; bei einer 50-px-
   Überschrift werden aus 1.9em rund 97 px Lücke. Den Abstand liefert
   bereits margin-bottom der Vorzeile.
   `:not(:first-child)` hebt die Spezifität auf 0,2,0 und schlägt damit
   Regeln wie `.prose h2` (0,1,1). */
.eyebrow + *:not(:first-child){margin-top:0}

/* — Variante 1: Bild vom linken Rand, Textkasten überlappt es — */
.v1{display:grid; grid-template-columns:1fr; gap:0}
.v1__media{margin:0}
.v1__media img{width:100%; aspect-ratio:16/10; object-fit:cover}
@media (min-width:900px){
  .v1{grid-template-columns:minmax(0,1fr) minmax(0,.86fr); align-items:center}
  .v1__media{margin-left:calc(var(--edge) * -1); grid-column:1; grid-row:1}
  /* Das Bild füllt die Bildschirmhöhe abzüglich Kopfzeile — nicht nur gedeckelt.
     Ohne aspect-ratio bindet allein die Höhe, der Beschnitt macht object-fit. */
  .v1__media img{height:calc(100vh - var(--hdr)); aspect-ratio:auto; object-fit:cover}
  .v1__text{grid-column:2; grid-row:1; margin-left:clamp(-140px,-9vw,-60px); position:relative; z-index:3}
}

/* — Variante 3: Bild randabfallend rechts, Text als Tafel darauf — */
.v3{position:relative; display:flex; align-items:center;
  /* nie höher als der Bildschirm abzüglich Kopfzeile */
  min-height:min(clamp(380px,46vw,680px), calc(100vh - var(--hdr)));
  max-height:calc(100vh - var(--hdr))}
.v3__media{position:absolute; inset:0; margin-right:calc(var(--edge) * -1); z-index:1}
.v3__media img{width:100%; height:100%; max-height:calc(100vh - var(--hdr)); object-fit:cover; aspect-ratio:auto}
.v3__text{position:relative; z-index:3; width:min(100%,540px)}
.v3 .vx__panel{box-shadow:0 0 0 1px var(--hair)}
@media (max-width:899px){
  .v3{display:block; min-height:0}
  .v3__media{position:relative; inset:auto; margin-inline:calc(var(--edge) * -1); margin-bottom:-40px}
  .v3__media img{aspect-ratio:16/10}
  .v3__text{width:min(100%,540px); margin-inline:auto}
}

/* — Variante 4: Bild vom linken Rand, Text tief versetzt und schmal — */
.v4{display:grid; grid-template-columns:1fr; gap:clamp(26px,3vw,0px)}
.v4__media{margin:0}
.v4__media img{width:100%; aspect-ratio:16/10; object-fit:cover}
/* Abstände innerhalb der Textspalte — ohne sie kleben Überschrift,
   Einstieg und Fließtext aneinander. Die Vorzeile ist ausgenommen,
   die bringt ihren Abstand selbst mit (siehe Regel in Abschnitt 3). */
.v4__text > * + *{margin-top:1.1em}

/* Der Fließtext läuft unter dem Bild weiter — neben dem Bild steht nur der
   Kopf. Eine schmale Spalte mit vier Absätzen liest sich sonst wie ein Schacht. */
.v4__body{margin-top:clamp(28px,3.6vw,52px)}
.v4__body > * + *{margin-top:1.15em}
@media (min-width:900px){
  .v4{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:start;
      column-gap:clamp(28px,3.4vw,56px)}
  .v4__media{margin-left:calc(var(--edge) * -1); grid-column:1; grid-row:1}
  .v4__media img{aspect-ratio:5/6; max-height:calc(100vh - var(--hdr)); object-fit:cover}
  /* Die Textspalte setzt etwas tiefer ein als die Bildkante — sonst klebt
     die Vorzeile beim Scrollen an der klebenden Kopfzeile. */
  .v4__text{grid-column:2; grid-row:1; padding-top:clamp(22px,3vw,48px)}
  .v4__text .keyfacts{margin-block:1.4em!important}
  .v4__body{grid-column:1 / -1; grid-row:2;
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start}
  .v4__body > * + *{margin-top:0}
  .v4__body .prose{max-width:none}
}

/* — Variante 5: Bild vom linken Rand, Überschrift überlappt es oben — */
.v5__media{margin:0 calc(var(--edge) * -1); position:relative; isolation:isolate}
.v5__media img{width:100%; aspect-ratio:4/3; max-height:calc(100vh - var(--hdr)); object-fit:cover}
/* Abdunkelung nur im unteren Drittel — trägt die Überschrift sicher */
.v5__media::after{content:""; position:absolute; inset:auto 0 0 0; height:74%;
  background:linear-gradient(180deg,transparent 0%,rgba(20,13,6,.36) 32%,
    rgba(20,13,6,.72) 58%,rgba(20,13,6,.9) 100%); pointer-events:none}
.v5__head{position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:clamp(24px,4vw,52px) var(--pad); max-width:min(100%,46rem);
  /* Zurücksetzen: erbt sonst die Bildunterschrift-Regeln von .vx figcaption */
  display:block; text-transform:none; letter-spacing:normal;
  font-family:var(--ff-sans); font-size:1rem; color:inherit; margin-top:0}
.v5__head::before{display:none}
.v5__head h2{color:#FFFDF7; text-shadow:0 2px 22px rgba(0,0,0,.6); max-width:17ch;
  text-transform:none; letter-spacing:-.02em; font-family:var(--ff-display)}
.v5__head h2 em{color:#F0D6AB}
.v5__head .eyebrow{color:#EACB9C}
.v5__body{margin-top:clamp(28px,3.4vw,48px)}
@media (min-width:900px){
  .v5__media img{aspect-ratio:21/9}
  .v5__head{padding-left:clamp(28px,5vw,84px)}
  .v5__body{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px); align-items:start}
}


/* ---- Bildnachweis am Bild ----------------------------------------------
   Die Bildarchive der Region verlangen die Nennung von Fotograf und Archiv.
   Der Nachweis liegt in der unteren Ecke des Bildes: lesbar, aber leise.
   .bildwrap umschliesst nur Bilder, die einen Nachweis tragen — eigene
   Aufnahmen des Hauses bleiben unveraendert im Markup. */
.bildwrap{position:relative; display:block}
/* Im Hero sitzt der Nachweis direkt im <section class="hero">, nicht in
   .hero__media — das liegt auf z-index -2 und damit unter dem Overlay. */
.bildcredit--hero{z-index:4; bottom:0; right:0}
.bildcredit{
  position:absolute; left:0; right:0; bottom:0; z-index:3; pointer-events:none;
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.06em;
  line-height:1.35; text-transform:uppercase; text-align:right;
  color:#fff; padding:2.6em .9em .55em .9em;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  /* Randverlauf über die volle Breite statt Eckverlauf: Der Text sitzt immer
     im dunkelsten Bereich. Bei 62 % Schwarz über einem rein weißen Motiv
     bleiben rund 6:1 — unabhängig davon, was auf dem Foto zu sehen ist. */
  background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,0) 100%);
  border-end-start-radius:inherit; border-end-end-radius:inherit;
}
@media (max-width:560px){ .bildcredit{font-size:.54rem; padding:.45em .55em} }
@media print{ .bildcredit{color:#000; background:none; text-shadow:none} }

/* Nachweisliste im Impressum */
.nachweis{list-style:none; padding-left:0; columns:2; column-gap:2rem}
.nachweis li{break-inside:avoid; padding-left:0; margin-top:.35em;
  font-size:.92rem; color:var(--ink-2)}
.nachweis li::before{content:none}
@media (max-width:640px){ .nachweis{columns:1} }


/* ---- Sicherheitsnetz für lange, unbrechbare Zeichenketten ----------------
   E-Mail-Adressen, URLs und Dateinamen haben keine Trennstellen. Ohne diese
   Regel schieben sie sich aus ihrem Kasten heraus, statt umzubrechen.
   „anywhere" greift ausschließlich dann, wenn ein Wort sonst nicht passt —
   normaler Fließtext bleibt unberührt. Bewusst kein text-overflow:ellipsis:
   eine abgeschnittene Adresse ist unbrauchbar, ein Umbruch nicht. */
.prose, .note__txt, .lead, .contact .v, .ftr address, .card__body{overflow-wrap:anywhere}