/*
Theme Name: Schloss Deutsch-Ossig
Theme URI: https://schlossdeutschossig.de
Author: CoStrategen
Description: Schloss Deutsch-Ossig — Website. Design = markenmanual-final-v2 (Gestaltung A, finale Fassung v3). Komponenten 1:1 aus dem Manual, Farbe/Schrift/Radius NUR aus var(--…) (assets/css/tokens.css). Kein Hex hier (token-guard). Bausteine nicht neu erfinden.
Version: 1.0.0
*/

/* ============================================================
   Schriften — Marcellus + Hanken Grotesk (self-hosted)
   ============================================================ */
@font-face{font-family:'Marcellus';src:url('assets/fonts/marcellus-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/hanken-grotesk-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/hanken-grotesk-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/hanken-grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/hanken-grotesk-600.woff2') format('woff2');font-weight:600;font-display:swap}

/* ============================================================
   BASIS  (Manual §body)
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--body);font-family:var(--font-b);font-weight:300;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
/* Nur für Screenreader — sichtbar nichts, hörbar der fehlende Kontext (z. B. „öffnet in neuem Tab").
   clip-path statt display:none, sonst überspringen Screenreader den Text ebenfalls. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:400;color:var(--ink);letter-spacing:.01em;line-height:1.12}
a{color:inherit}
em{font-style:italic}
::selection{background:rgba(184,147,61,.18);color:var(--ink)}

/* ============================================================
   SKIP-LINK  (WCAG 2.4.1)
   Erster Tabstopp: springt an der fixen Nav vorbei in den Inhalt.
   z-index 1300 = über allem (Ebenen-Skala endet beim Belegung-Modal, 1200).
   position:fixed, damit er auch dann im Bild liegt, wenn zurückgetabbt wird.
   ============================================================ */
.skip-link{position:fixed;left:-9999px;top:0;z-index:1300;background:var(--blue);color:var(--white);
  padding:.9rem 1.4rem;border-radius:0 0 var(--r-sm) 0;font-family:var(--font-b);font-weight:500;
  font-size:.9rem;text-decoration:none}
.skip-link:focus{left:0}
/* Das Sprungziel selbst bekommt keinen Ring — die Rückmeldung ist der Sprung, nicht ein Rahmen um die halbe Seite. */
.site-main:focus{outline:none}

/* ============================================================
   LAYOUT-HELFER  (Manual)
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.kicker{font-family:var(--font-b);font-weight:500;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--meta);display:inline-flex;align-items:center;gap:.85rem}
/* flex:none — sonst staucht der Flex-Kontext den Goldstrich auf 0. */
.kicker::before{content:"";width:32px;height:1px;background:var(--gold);flex:none}
.kicker.on-dark{color:rgba(255,255,255,.82)}.kicker.on-dark::before{background:var(--gold-soft)}
.kicker.center{justify-content:center}
.rule{height:1px;background:var(--line);border:0}
.rule-gold{width:60px;height:2px;background:var(--gold);border:0}
.waterline{height:1px;border:0;background:linear-gradient(90deg,rgba(184,147,61,0),var(--gold) 22%,var(--gold) 78%,rgba(184,147,61,0));opacity:.7}
.center{text-align:center}

.sec{padding-top:var(--section);padding-bottom:var(--section)}
/* Anker-Sprung: die schwebende Nav ist fixed und deckte sonst die Überschrift ab, auf die gesprungen wurde. */
.sec[id]{scroll-margin-top:clamp(5rem,9vw,7rem)}
.sec--tight{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.sec__no{font-family:var(--font-h);font-style:italic;color:var(--gold-deep);font-size:1.1rem}
.sec__head{margin-bottom:clamp(2.2rem,5vw,3.6rem);max-width:760px}
.sec__head h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin:1rem 0 1.1rem}
.sec__head h2 em{color:var(--gold)}
.sec__head p{font-size:1.05rem;line-height:1.8;color:var(--body);max-width:62ch}
.sec__head.center{margin-left:auto;margin-right:auto}
.sec__head.center p{margin-left:auto;margin-right:auto}
.tint{background:var(--tint)}.paper{background:var(--paper)}

/* ── SIGNATUR: der eine ruhige Bogen von Bild zu Flaeche ──
   Ein Bogen, keine Wellenbuckel. Hoehe 54px auf viewBox 30 — die Proportion
   ist Teil der Form: auf 70px gezogen wird aus dem Bogen eine Welle. */
.wave{display:block;width:100%;height:54px;margin-top:-54px;position:relative;z-index:2;pointer-events:none}
.wave path{fill:var(--cream)}
.wave--paper path{fill:var(--paper)}
.wave--white path{fill:var(--white)}
.wave--tint path{fill:var(--tint)}

/* ============================================================
   BUTTONS  (Manual §05c) — 3 Varianten, alle gleich animiert, 1px Rand
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-b);font-weight:500;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;padding:.9rem 1.7rem;border-radius:var(--r-btn);cursor:pointer;border:0;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);text-decoration:none}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--primary{background:var(--blue);color:var(--white)}
.btn--primary:hover{background:var(--blue-deep)}
.btn--gold{background:var(--gold-btn);color:var(--white)}
.btn--gold:hover{filter:brightness(.92)}
.btn--ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue-deep)}
.btn--outl{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn--outl:hover{box-shadow:inset 0 0 0 1px var(--white)}
.btn--sm{font-size:.7rem;padding:.7rem 1.3rem}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn-row--center{justify-content:center}

/* ============================================================
   SITE-HEADER — Insel-Nav (.m-nav, Manual §05a) als schwebender Header
   ============================================================ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1100;padding:clamp(.7rem,1.6vw,1.1rem) var(--gutter);pointer-events:none}
/* Insel: oben flach/transparent, beim Scrollen solidiert sie (duna-Prinzip) */
.m-nav{position:relative;background:transparent;border:1px solid transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:space-between;padding:.7rem .8rem .7rem 1.4rem;margin:0 auto;max-width:1080px;pointer-events:auto;transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease)}
.site-header.scrolled .m-nav{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-color:rgba(255,255,255,.6);box-shadow:0 18px 44px -20px rgba(34,31,27,.28)}
.m-nav__logo{display:inline-flex;align-items:center}
/* width:auto ist Pflicht, seit das Logo width/height traegt: die Attribute wirken sonst
   als Praesentations-Hinweis und ziehen es auf 500px Breite bei 34px Hoehe (= plattgedrueckt).
   Mit width:auto rechnet der Browser die Breite aus Hoehe + Seitenverhaeltnis — und das
   Seitenverhaeltnis aus den Attributen schuetzt weiterhin vor dem Layoutsprung. */
.m-nav__logo img{height:34px;width:auto;transition:filter .4s var(--ease)}
.links{display:flex;align-items:center;gap:2rem}
.m-nav__item{position:relative;display:flex;align-items:center}
.links a{font-family:var(--font-b);font-weight:400;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);text-decoration:none;position:relative;display:inline-flex;align-items:center;line-height:1;transition:color .35s var(--ease)}
/* Startseite ganz oben (überm Hero, vor Scroll): weiße Nav, Logo invertiert */
/* Nicht an .home gebunden, sondern an das Cover: jede Seite, die mit einem Vollbild-Hero
   beginnt, braucht die helle Nav — sonst stehen blaue Links auf dunklem Bild. */
body:has(.cover) .site-header:not(.scrolled) .m-nav__item > a,
body:has(.phead) .site-header:not(.scrolled) .m-nav__item > a{color:var(--white)}
body:has(.cover) .site-header:not(.scrolled) .m-nav__logo img,
body:has(.phead) .site-header:not(.scrolled) .m-nav__logo img{filter:brightness(0) invert(1)}
body:has(.cover) .site-header:not(.scrolled) .burger span,
body:has(.phead) .site-header:not(.scrolled) .burger span{background:var(--white)}
.m-nav__item > a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.m-nav__item:hover > a::after,.m-nav__item.on > a::after,.links a.current::after{width:100%}
.links .btn{color:var(--white)}
/* Mega-Submenü — schwebende Glas-Karte unter der Insel */
/* Dropdown — clean & luftig, keine Sprechblase; Animation identisch zur Nav (Fade+Slide, var(--ease), kein Scale) */
.subm{position:absolute;top:calc(100% + 16px);left:-.5rem;min-width:300px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 54px -22px rgba(34,31,27,.2);padding:.75rem;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* unsichtbare Brücke über den Gap → Hover bricht nicht ab */
.subm::before{content:"";position:absolute;left:0;right:0;top:-18px;height:20px}
/* letztes Item rechtsbündig, damit nichts überläuft */
.m-nav__item:last-of-type .subm{left:auto;right:-.5rem}
.m-nav__item:hover .subm,.m-nav__item:focus-within .subm{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* Typo NICHT neu setzen — exakt von .links a erben (gleiche Schrift/Größe/Gewicht/Laufweite/Versalien wie die Nav) */
.subm a{display:block;padding:.9rem 1.2rem;border-radius:var(--r-md);text-decoration:none;line-height:1.4;transition:background .25s var(--ease),color .25s var(--ease)}
.subm a + a{margin-top:.15rem}
.subm a:hover{background:var(--cream);color:var(--blue-deep)}
.subm a::after{display:none}
/* Burger (Mobil) */
.burger{display:none;background:transparent;border:0;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;pointer-events:auto}
.burger span{display:block;width:22px;height:1.5px;background:var(--blue);transition:transform .25s var(--ease),opacity .2s var(--ease)}
/* Burger wird zum ✕ (exakt an der gleichen Stelle) — Mittelstrich vollständig weg */
.burger span{transform-origin:center}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobiles Menü — schwebende Insel, öffnet nach unten (gleiche Breite/Abstände/Design wie die Nav-Insel) */
.mobile{position:fixed;inset:0;z-index:1050;padding:calc(66px + 2*clamp(.7rem,1.6vw,1.1rem)) var(--gutter) 1.5rem;overflow-y:auto;background:rgba(34,31,27,0);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s,background .3s}
.mobile.open{opacity:1;visibility:visible;background:rgba(34,31,27,.42)}
.mobile__panel{max-width:1080px;margin:0 auto;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-lg);box-shadow:0 26px 60px -24px rgba(34,31,27,.42);padding:.55rem;transform:translateY(-14px);transition:transform .35s var(--ease)}
.mobile.open .mobile__panel{transform:translateY(0)}
.m-group + .m-group{border-top:1px solid var(--line)}
.m-grouphead{display:flex;align-items:center;justify-content:space-between;gap:.3rem}
.m-top{flex:1;font-family:var(--font-b);font-weight:500;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);text-decoration:none;padding:1rem;border-radius:var(--r-md);transition:background .2s var(--ease)}
.m-top:active,.m-top:hover{background:var(--cream)}
.m-toggle{background:transparent;border:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold);flex:none}
.m-toggle svg{width:20px;height:20px;transition:transform .28s var(--ease)}
.m-group.open .m-toggle svg{transform:rotate(180deg)}
.m-sub{max-height:0;overflow:hidden;display:flex;flex-direction:column;transition:max-height .32s var(--ease)}
.m-group.open .m-sub{max-height:420px;padding-bottom:.35rem}
.m-sub a{font-family:var(--font-b);font-weight:400;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);text-decoration:none;display:flex;align-items:center;min-height:44px;padding:.5rem 1rem;margin:0 .35rem;border-radius:var(--r-md);transition:background .2s var(--ease)}
.m-sub a:active,.m-sub a:hover{background:var(--cream)}
.mobile__cta{display:flex;justify-content:center;margin:.6rem .35rem .35rem}
/* Schnellzugriff im Mobil-Menü: Adresse/E-Mail (eine zarte Schrift) + Instagram-Icon */
.mobile__meta{border-top:1px solid var(--line);margin-top:.5rem;padding:1.1rem 1rem .5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mobile__meta .info{display:flex;flex-direction:column;gap:.25rem}
.mobile__meta .info a,.mobile__meta .info span{font-family:var(--font-b);font-weight:300;font-style:italic;font-size:.88rem;line-height:1.5;color:var(--body);text-decoration:none}
.mobile__meta .info a:hover{color:var(--blue)}
.mobile__ig{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:var(--blue);box-shadow:inset 0 0 0 1px var(--line-strong);flex:none;transition:color .2s var(--ease),box-shadow .2s var(--ease)}
.mobile__ig svg{width:20px;height:20px}
.mobile__ig:hover{color:var(--gold-deep);box-shadow:inset 0 0 0 1px var(--gold)}

/* Haupt-Container */
.site-main{display:block}
/* Der Abstand hält den Inhalt unter der fixen Nav frei — aber nur, wo kein Vollbild-Kopf kommt.
   Der läuft absichtlich unter der Insel durch und bringt seine eigene Kopfhöhe mit
   (.cover: min-height:94svh · .phead .in: padding-top ab 7rem).
   Kriterium ist der Kopf, nicht „ist Startseite": sonst bekommt jede Kopfbild-Seite
   oben einen weissen Streifen — genau das war auf /gruppen/ & Co. der Fall. */
body:not(:has(.cover)):not(:has(.phead)) .site-main{padding-top:clamp(96px,11vh,132px)}

/* ============================================================
   COVER — Startseiten-Hero (Manual §Cover)
   ============================================================ */
/* Cover — Startseite: EIN Bild, EIN Satz. Logo bleibt draussen (steht schon in der Nav).
   Ersetzt den zentrierten Gestaltung-A-Cover; der war seit dem Reset toter Code. */
.cover{position:relative;min-height:94svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--dark);color:var(--white);overflow:hidden}
.cover .bg{position:absolute;inset:0}
.cover .bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
/* Das Bild ist so komponiert, dass links Platz fuer den Satz ist — der Schleier stuetzt nur noch. */
.cover::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(18,16,13,.60) 0%,rgba(18,16,13,.30) 40%,rgba(18,16,13,0) 66%),
  linear-gradient(180deg,rgba(20,18,15,.34) 0%,rgba(20,18,15,.04) 28%,rgba(22,28,33,.40) 64%,rgba(22,28,33,.78) 100%)}
.cover__in{position:relative;z-index:3;padding:0 var(--gutter) clamp(3.4rem,7vw,5.5rem);max-width:var(--maxw);margin:0 auto;width:100%}
.cover h1{color:var(--white);font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.12;max-width:14ch;
  text-shadow:0 2px 28px rgba(18,16,13,.5)}
.cover h1 em{color:var(--gold-soft);font-style:italic}
.cover__wl{width:88px;height:1px;background:var(--gold-soft);border:0;margin:clamp(1.6rem,3vw,2.2rem) 0}
.cover__sub{color:rgba(255,255,255,.9);font-weight:300;max-width:40ch;font-size:1.05rem;text-shadow:0 1px 16px rgba(18,16,13,.5)}
.cover__btns{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:clamp(1.8rem,3vw,2.4rem)}
.cover__scroll{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.6);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.cover__scroll i{display:block;width:1px;height:26px;background:linear-gradient(rgba(255,255,255,.5),transparent)}

/* ============================================================
   INNENSEITEN-HERO — Hero-Karte (Manual §05b .m-hero)
   ============================================================ */
.m-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:380px;display:flex;align-items:flex-end;background:var(--dark) url(assets/img/freiheit-seeblick.webp) center/cover}
.m-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,28,33,.78),rgba(20,28,33,.12) 62%)}
.m-hero__in{position:relative;z-index:2;padding:clamp(1.8rem,4vw,3rem);max-width:600px}
.m-hero h1,.m-hero h2,.m-hero h3{color:var(--white);font-size:clamp(1.9rem,3.4vw,2.8rem);margin:1rem 0 1rem;font-family:var(--font-h);font-weight:400;line-height:1.1}
.m-hero h1 em,.m-hero h2 em,.m-hero h3 em{color:var(--gold-soft)}
.m-hero p{color:rgba(255,255,255,.9);font-weight:300;font-size:1rem;margin-bottom:1.6rem;max-width:46ch}
.m-hero .btns{display:flex;gap:.8rem;flex-wrap:wrap}
.page-head{padding-top:clamp(.5rem,1.5vw,1.5rem);padding-bottom:clamp(3rem,6vw,5rem)}
/* Mobil: der lange Excerpt legt sich sonst über das ganze Titelbild. Weg damit (die volle
   Beschreibung folgt ohnehin direkt darunter); dafür mehr Bildhöhe, damit das Bild atmet. */
@media(max-width:640px){
  .m-hero{min-height:clamp(320px,56vh,440px)}
  .m-hero p{display:none}
}

/* ============================================================
   ESSENZ — weiße gerundete Karte (Manual §Essenz)
   ============================================================ */
.essence-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(2.2rem,5vw,3.6rem);box-shadow:0 28px 60px -28px rgba(34,31,27,.22);text-align:center;max-width:900px;margin:0 auto}
.essence-card .q{font-family:var(--font-h);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.34;color:var(--ink);max-width:26ch;margin:0 auto}
.essence-card .q em{color:var(--gold);font-style:italic}
.essence-card .by{margin-top:1.6rem;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.vals{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 2.2rem;margin-top:2.4rem;font-family:var(--font-b);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--meta)}
.vals b{color:var(--blue);font-weight:500}

/* ============================================================
   FARBKONTEXT — zweispaltig blau + creme (Manual §02)
   ============================================================ */
.color-context{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.cc-blue{background:var(--blue);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem);color:var(--white);display:flex;flex-direction:column;justify-content:center;gap:1rem;box-shadow:0 20px 48px -22px rgba(64,98,119,.5)}
.cc-blue .kicker.on-dark::before{background:var(--gold-soft)}
.cc-blue :is(h2,h3){color:var(--white);font-size:1.6rem}.cc-blue p{color:rgba(255,255,255,.84);font-weight:300;font-size:.96rem}
.cc-cream{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:.8rem}
.cc-cream :is(h2,h3){font-size:1.6rem}.cc-cream p{font-size:.95rem;color:var(--body)}

/* ============================================================
   BILDSPRACHE — Bild + Schrift drüber (Manual §04 .bimg / .img-lead)
   ============================================================ */
.bimg{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-soft)}
.bimg--wide{aspect-ratio:21/9}
.bimg--tall{aspect-ratio:4/5}
.bimg img{width:100%;height:100%;object-fit:cover}
.bimg .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.4rem,3vw,2.4rem);background:linear-gradient(0deg,rgba(20,28,33,.76),rgba(20,28,33,0));color:var(--white)}
.bimg .cap .k{font-family:var(--font-b);font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.bimg .cap .k::before{content:"";display:inline-block;width:22px;height:1px;background:var(--gold-soft);vertical-align:middle;margin-right:.7rem}
.bimg .cap p{font-family:var(--font-h);font-size:clamp(1.2rem,2.4vw,1.8rem);margin-top:.5rem;max-width:30ch;color:var(--white)}

/* ============================================================
   WERTE-KARTEN — Vorbild „Was uns wichtig ist" der Live-Seite.
   Drei Karten nebeneinander: Bild oben, Wort, Erklärung. Dieselbe Aussage wie drei
   bildbegleitete Blöcke untereinander — in einem Drittel der Höhe.
   ============================================================ */
.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.2rem)}
.wcard__bild{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-soft);background:var(--paper);display:flex;align-items:center;justify-content:center}
.wcard__bild img{width:100%;height:100%;object-fit:cover;display:block}
.wcard h3{font-family:var(--font-h);font-weight:400;color:var(--ink);font-size:1.15rem;margin:1.1rem 0 .4rem}
.wcard p{font-family:var(--font-b);font-weight:300;font-size:.92rem;line-height:1.6;color:var(--body);margin:0}
@media(max-width:860px){.wcards{grid-template-columns:1fr;gap:2rem}}

/* ============================================================
   BILD MIT MERKMALEN — Vorbild „Was entsteht hier" der Live-Seite.
   Bild links, Unterschrift darunter; Merkmale rechts zweispaltig. Acht Punkte
   untereinander wären eine Wand — nebeneinander sind sie ein Überblick.
   ============================================================ */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.feat__bild{margin:0}
.feat__bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-soft);display:block}
.feat__bild figcaption{margin-top:.75rem;font-family:var(--font-b);font-weight:300;font-size:.8rem;line-height:1.5;color:var(--meta)}
.feat__liste{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.8rem;margin:0;padding:0}
.feat__liste li{display:grid;grid-template-columns:16px 1fr;gap:.85rem;align-items:baseline;font-family:var(--font-b);font-weight:300;font-size:.94rem;line-height:1.55;color:var(--body)}
/* Derselbe Gold-Strich wie am Kicker, nur kürzer — kein neues Zeichen. */
.feat__liste li::before{content:"";width:14px;height:1px;background:var(--gold);align-self:baseline;margin-top:.62rem}
@media(max-width:860px){
  .feat{grid-template-columns:1fr;gap:1.8rem}
  .feat__liste{grid-template-columns:1fr;gap:1.1rem}
}

/* ============================================================
   WANDEL — dieselbe Ansicht, damals und heute
   Der Schnitt läuft schräg statt senkrecht: eine Mittellinie ließe es wie zwei
   nebeneinandergelegte Bilder wirken, die Diagonale liest sich als EIN Bild, durch
   das die Zeit geht. Kante und clip-path teilen dieselben Prozentwerte — sie sitzen
   deshalb exakt aufeinander, unabhängig von der Breite. Die Gold-Kante ist dieselbe
   Linie wie die Wasserlinie, nur an anderer Stelle: kein neues Element.
   ============================================================ */
.wandel{margin:0}
.wandel__rahmen{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-soft);background:var(--paper)}
.wandel__rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.wandel__neu{clip-path:polygon(54% 0, 100% 0, 100% 100%, 46% 100%)}
.wandel__kante{position:absolute;inset:0;background:var(--gold);clip-path:polygon(54% 0, 54.2% 0, 46.2% 100%, 46% 100%);opacity:.9}
.wandel__marke{position:absolute;bottom:1.1rem;z-index:2;font-family:var(--font-b);font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--white);text-shadow:0 1px 10px rgba(20,28,33,.75)}
.wandel__marke--alt{left:clamp(1rem,2.5vw,1.6rem)}
.wandel__marke--neu{right:clamp(1rem,2.5vw,1.6rem)}
.wandel figcaption{margin-top:.85rem;font-family:var(--font-b);font-weight:300;font-size:.86rem;line-height:1.5;color:var(--meta)}
@media(max-width:760px){
  /* Hochkant wird das Haus sonst zu klein, um den Unterschied zu sehen. */
  .wandel__rahmen{aspect-ratio:4/3}
}
.img-lead{display:grid;grid-template-columns:1.45fr 1fr;gap:1.4rem;aspect-ratio:2/1}
.img-lead>*{min-height:0}
.img-lead .big{height:100%;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.img-lead .col{display:grid;grid-template-rows:1fr 1fr;gap:1.4rem;min-height:0}
.img-lead .col .m{min-height:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft)}
.img-lead .big img,.img-lead .col .m img{width:100%;height:100%;object-fit:cover}
.img-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.img-strip .m{aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft)}
.m img{width:100%;height:100%;object-fit:cover}

/* ── Platzhalter-Slot (Staging): ehrlicher Foto-Marker, kein Manual-Baustein ── */
.slot{border-radius:var(--r-lg);background:var(--tint);box-shadow:inset 0 0 0 1px var(--line-strong);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:2rem;position:relative}
.slot::before{content:"";position:absolute;inset:12px;border:1px dashed var(--line-strong);border-radius:var(--r-md);pointer-events:none}
.slot .k{position:relative;font-family:var(--font-b);font-weight:500;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.slot .t{position:relative;font-family:var(--font-h);font-size:1.15rem;color:var(--body);max-width:34ch;line-height:1.3}
.slot--tall{aspect-ratio:3/4}
.slot--wide{aspect-ratio:21/9}
.slot--sq{aspect-ratio:1/1}

/* ── Inhalts-Platzhalter-Notiz (Staging) ── */
.ph-note{font-family:var(--font-b);font-weight:400;font-size:.86rem;color:var(--meta);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-md);padding:.85rem 1.1rem;display:flex;gap:.6rem;align-items:flex-start;line-height:1.5}
.ph-note::before{content:"›";color:var(--gold);font-weight:600}

/* ============================================================
   UNTERKUNFTS-KARTEN (Manual §05d .u-card)
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card-grid--2{grid-template-columns:repeat(2,1fr)}
.u-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .25s var(--ease),box-shadow .25s var(--ease);text-decoration:none;display:flex;flex-direction:column;color:inherit}
.u-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.u-card .m{aspect-ratio:3/2;overflow:hidden;position:relative;background:var(--tint);flex:none}
.u-card .m img{transition:transform .8s var(--ease)}
.u-card:hover .m img{transform:scale(1.04)}
.u-card .m.is-empty{display:flex;align-items:center;justify-content:center}
.u-card .m.is-empty span.ph{font-family:var(--font-b);font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.u-card .tag{position:absolute;left:.9rem;top:.9rem;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--blue);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.34rem .72rem;border-radius:99px;border:1px solid rgba(255,255,255,.5)}
.u-card .bd{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.u-card :is(h3,h4){font-family:var(--font-h);font-style:italic;font-size:1.35rem;margin-bottom:.45rem}
/* Einheiten-Fakten (Personen · m²) — Entscheidungsdaten der Karte, keine Fußnote.
   ⚠️ WEICHT VOM MANUAL AB (dort .76rem/--meta) — Änderung auf Marcels Ansage 17.07.
   („die sind echt schwach und nicht im design"). Das Manual ist die Wahrheitsquelle und muss
   nachgezogen werden, sonst driftet die nächste Seite wieder → offener Punkt, DESIGN-CONTRACT §1.
   --ink, nicht --body: --body ist die Farbe der Beschreibungs-Prosa direkt darunter, die Zeile
   wäre davon nicht mehr zu unterscheiden. --ink ist im Theme die etablierte „Wert soll wirken"-
   Farbe (.sb-card .sbv, .prose strong). */
.u-card .meta{display:flex;gap:1.1rem;font-size:.8rem;font-weight:500;color:var(--ink);margin-bottom:.8rem;flex-wrap:wrap}
.u-card p{font-size:.9rem;margin-bottom:1.1rem}
.u-card .price{font-family:var(--font-h);color:var(--ink);font-size:1.05rem}.u-card .price em{font-style:normal;color:var(--gold-deep);font-size:.78rem}
.detail-book .price--lg{font-family:var(--font-h);color:var(--ink);font-size:1.8rem;line-height:1;margin:.1rem 0 1.1rem}.detail-book .price--lg em{font-style:normal;color:var(--gold-deep);font-size:.95rem;font-family:var(--font-b)}
/* margin-top:auto — sonst tanzen die Karten-Fusszeilen im Raster auf verschiedenen Hoehen. */
.u-card .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1rem;font-family:var(--font-b);font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.u-card .more .arr{transition:transform .25s var(--ease)}
.u-card:hover .more .arr{transform:translateX(4px)}
.u-card:hover .more{color:var(--blue-deep)}

/* ============================================================
   SEKTIONSKOPF · ZITAT (Manual §05e .two / .m-sech / .m-quote)
   ============================================================ */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.m-sech{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.8rem,3vw,2.6rem)}
.m-sech :is(h2,h3){font-size:1.6rem;margin:1rem 0}.m-sech :is(h2,h3) em{color:var(--gold)}
.m-sech p{color:var(--body);font-size:.95rem}
.m-quote{background:var(--tint);border-radius:var(--r-md);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.m-quote p{font-family:var(--font-h);font-style:italic;font-size:1.45rem;line-height:1.4;color:var(--blue)}
.m-quote cite{display:block;margin-top:1rem;font-style:normal;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}

/* ============================================================
   CTA-BAND — vollfarbige Box (Manual §05f .band)
   ============================================================ */
.band{background:var(--blue);color:var(--white);border-radius:var(--r-lg);padding:clamp(2.4rem,5vw,3.6rem);text-align:center;position:relative;overflow:hidden;box-shadow:0 26px 56px -26px rgba(64,98,119,.55)}
.band::before{content:"";position:absolute;top:-40%;right:-8%;width:46%;height:80%;background:radial-gradient(closest-side,rgba(212,179,90,.16),transparent 70%)}
.band .kicker{justify-content:center;color:rgba(255,255,255,.8);position:relative}.band .kicker::before{background:var(--gold-soft)}
.band h2,.band h3{color:var(--white);font-size:clamp(1.5rem,3vw,2.1rem);margin:1rem auto 1.1rem;position:relative;max-width:22ch}
.band h2 em,.band h3 em{color:var(--gold-soft)}
.band p{color:rgba(255,255,255,.82);max-width:48ch;margin:0 auto 1.6rem;position:relative;font-weight:300}
.band .btn{position:relative}
.band .btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;position:relative}

/* ============================================================
   ABSCHLUSS — Text über Vollbild (Manual §Abschluss .closing)
   ============================================================ */
.closing{position:relative;color:var(--white);text-align:center;padding:clamp(4.5rem,10vw,8rem) 0;background:var(--dark);overflow:hidden}
.closing .cbg{position:absolute;inset:0}.closing .cbg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(22,28,33,.52),rgba(22,28,33,.74))}
.closing .wrap{position:relative;z-index:2}
.closing h2{color:var(--white);font-size:clamp(2rem,4.4vw,3rem);max-width:22ch;margin:1rem auto 0;line-height:1.14}
.closing h2 em{color:var(--gold-soft)}
.closing p{color:rgba(255,255,255,.86);max-width:48ch;margin:1.3rem auto 0;font-weight:300}
.closing .kicker{justify-content:center}

/* ============================================================
   PRINZIPIEN / ruhige nummerierte Liste (Manual §07 .princ)
   — hier auch als „was auf diese Seite kommt"-Struktur genutzt
   ============================================================ */
.princ{list-style:none;counter-reset:p}
.princ li{counter-increment:p;display:grid;grid-template-columns:56px 1fr;gap:clamp(1rem,3vw,2rem);padding:1.5rem 0;border-top:1px solid var(--line);max-width:78ch;align-items:baseline}
.princ li:last-child{border-bottom:1px solid var(--line)}
/* Ziffer wie .sec__no (Sektions-Nummer): Marcellus, kursiv, Gold — nicht die
   Hanken-Kleinziffer mit führender Null. „01" war ein Aktenzeichen; „1" in der
   Marken-Serife ist eine Zahl, die zum Rest des Systems gehört. Gilt site-weit. */
.princ li::before{content:counter(p);font-family:var(--font-h);font-style:italic;font-weight:400;letter-spacing:0;color:var(--gold-deep);font-size:1.7rem;line-height:1;grid-column:1}

/* Merkmalsliste ohne Reihenfolge: statt der Zahl derselbe Gold-Strich, den auch der
   Kicker trägt (.sec__head .kicker::before) — kein neues Zeichen, nur an anderer
   Stelle. Eine Nummer würde hier eine Rangfolge behaupten, die es nicht gibt. */
.princ--frei{counter-reset:none}
.princ--frei li{counter-increment:none;grid-template-columns:34px 1fr;align-items:baseline}
.princ--frei li::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.85;align-self:center;margin-top:.55rem}
.princ li b{grid-column:2;font-family:var(--font-h);font-weight:400;color:var(--ink);display:block;font-size:1.15rem;margin-bottom:.3rem}
.princ li span{grid-column:2;color:var(--body)}
.princ li .d{font-weight:300;font-size:.92rem;color:var(--meta)}

/* ============================================================
   SEEKDA — Buchungs-Wrapper (Styling lebt in seekda.css)
   ============================================================ */
.seekda-slot{margin-top:1.5rem}

/* ============================================================
   PROSE — the_content (Recht-Seiten, Wohnungs-Beschreibung)
   ============================================================ */
/* ── RECHTS-/DOKUMENT-SEITE (Archetyp 07) ──
   Ein Behoerdentext will das Gegenteil einer Galerie-Headline: ruhig, schmal, lesbar.
   Darum hier kein Kopfbild, keine Essenz-Karte, keine 2,6-rem-H1 — und der Kicker
   sagt „Rechtliches", nicht den Markennamen. */
.doc-head{padding-top:clamp(1rem,2.5vw,2rem);padding-bottom:clamp(1.4rem,3vw,2.2rem)}
.doc-head h1{font-size:clamp(1.5rem,2.8vw,2rem);margin-top:.9rem;max-width:24ch}
.doc__toc{max-width:64ch;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);padding:1.1rem 1.4rem 1.2rem;margin-bottom:clamp(2rem,4vw,2.8rem)}
.doc__toc b{display:block;font-family:var(--font-b);font-weight:500;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin-bottom:.7rem}
.doc__toc ol{list-style:none;margin:0;display:flex;flex-direction:column;gap:.35rem}
.doc__toc a{color:var(--blue);text-decoration:none;font-size:.92rem}
.doc__toc a:hover{text-decoration:underline;text-underline-offset:3px}
.prose h2[id]{scroll-margin-top:clamp(5rem,9vw,7rem)}
.prose{max-width:64ch}
.prose>*+*{margin-top:1.1rem}
.prose h2,.prose h3,.prose h4{margin:1.8rem 0 .6rem}
.prose h2{font-size:1.6rem}.prose h3{font-size:1.3rem}
.prose p{color:var(--body)}
.prose ul,.prose ol{margin-left:1.2rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:var(--ink);font-weight:500}

/* ============================================================
   CPT-DETAIL — Beschreibung + klebende Buchungs-Karte
   ============================================================ */
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
/* Die Unterkunftsseite ist Blockinhalt: jeder Baustein ist ein Rasterkind. Deshalb die
   Spalten explizit zuweisen statt auf die Reihenfolge zu bauen — der Inhalt läuft links,
   die Buchungs-Karte steht rechts und bleibt klebend, egal an welcher Stelle im Editor sie
   liegt. Ohne diese Zuweisung würde das Raster die Bausteine abwechselnd verteilen. */
.detail-grid > *{grid-column:1;min-width:0}
/* Zeile 1 + align-self, NICHT „span": ein Zeilen-Span würde leere Rasterzeilen erzeugen und
   unter der Seite eine lange Lücke aufreißen. Das Kleben übernimmt position:sticky. */
.detail-grid > .detail-book{grid-column:2;grid-row:1;align-self:start}
/* Das Kopfbild ist ein Baustein im Inhalt und trägt über beide Spalten. */
.detail-grid > .m-hero{grid-column:1/-1;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.detail-book{position:sticky;top:110px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:1.6rem 1.7rem}
.detail-book .label{display:block;font-family:var(--font-b);font-weight:500;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--meta);margin:0 0 .8rem}
/* Buchungs-CTA der Wohnungsseite: harter Link auf Seekdas Checkout statt eingebettetem Widget
   (kein Fremd-JS, kein Cookie auf dieser Seite). Ersetzt den früheren Inline-style-Block. */
.detail-book__cta{width:100%;justify-content:center}
.detail-facts{list-style:none;display:grid;gap:.7rem;margin:0 0 1.2rem}
.detail-facts li{display:flex;gap:.7rem;align-items:center;font-size:.92rem;color:var(--body)}
.detail-facts svg{color:var(--gold);width:20px;height:20px;flex:none}

/* Filter-Pills (Wohnungs-Archiv) */
.filterbar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.chip{font-family:var(--font-b);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:var(--white);border:1px solid var(--line-strong);border-radius:99px;padding:.5rem 1.1rem;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip[aria-pressed="true"]{background:var(--blue);color:var(--white);border-color:var(--blue)}
.chip:hover{border-color:var(--blue)}

/* ============================================================
   FOOTER  (Manual §foot, zu echter Seiten-Footer erweitert)
   ============================================================ */
.site-footer{background:var(--blue-deep);color:rgba(255,255,255,.82);padding:clamp(3.4rem,6vw,5rem) 0 clamp(1.8rem,4vw,2.6rem)}
.footer-top{display:flex;justify-content:space-between;gap:clamp(2.4rem,7vw,6rem);flex-wrap:wrap}
.footer-brand{max-width:36ch}
.footer-brand img{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:1.3rem}
.footer-tag{font-size:.9rem;line-height:1.75;color:rgba(255,255,255,.8);margin-bottom:1.4rem}
.footer-addr{font-style:normal;font-size:.88rem;line-height:1.8;color:rgba(255,255,255,.82);margin-bottom:1.25rem}
.footer-addr a{color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.footer-addr a:hover{color:var(--white);border-color:rgba(255,255,255,.65)}
.footer-ig{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:color .2s var(--ease),box-shadow .2s var(--ease)}
.footer-ig svg{width:20px;height:20px}
.footer-ig:hover{color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.footer-links{display:flex;gap:clamp(2.5rem,7vw,5.5rem)}
.footer-col :is(h2,h4){font-family:var(--font-b);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);margin-bottom:1.15rem}
.footer-col a{display:block;color:rgba(255,255,255,.74);text-decoration:none;font-size:.9rem;padding:.4rem 0;transition:color .2s var(--ease)}
.footer-col a:hover{color:var(--white)}
.footer-bot{border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(2.8rem,5vw,3.8rem);padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:space-between}
.footer-bot p{font-size:.78rem;color:rgba(255,255,255,.7)}
.footer-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.footer-legal a{color:rgba(255,255,255,.7);text-decoration:none;font-size:.78rem;transition:color .2s var(--ease)}
.footer-legal a:hover{color:var(--white)}

/* Schwebende Buchungs-Insel — wie die Nav-Insel: Glas + Text + Standard-Gold-Button (gleiche Radien-Logik) */
.book-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(190%);z-index:1000;display:flex;align-items:center;gap:1.1rem;padding:.65rem .65rem .65rem 1.5rem;border-radius:var(--r-lg);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 18px 42px -18px rgba(34,31,27,.32);opacity:0;visibility:hidden;transition:transform .45s var(--ease),opacity .45s var(--ease),visibility .45s}
.book-bar.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.book-bar__txt{font-family:var(--font-h);font-style:italic;color:var(--ink);font-size:1.05rem;white-space:nowrap}
.book-bar .btn{white-space:nowrap;padding:.8rem 1.5rem;line-height:1.2}
/* Mobil vorerst ohne Buchungsleiste — Nav-Konzept am unteren Rand folgt separat. Markup bleibt, nur ausgeblendet. */
@media(max-width:600px){.book-bar{display:none}}

/* Staging-Banner */
.stg{position:fixed;left:14px;bottom:14px;z-index:80;background:rgba(34,31,27,.9);color:var(--white);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .85rem;border-radius:99px;max-width:calc(100vw - 28px)}
.stg b{color:var(--gold-soft)}
@media(max-width:600px){.stg{display:none}}

/* ============================================================
   REVEAL-Animation
   ============================================================ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}
html:not(.js) .reveal{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .links{display:none}
  .burger{display:flex}
  .card-grid,.card-grid--2{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .color-context{grid-template-columns:1fr}
  .img-lead{grid-template-columns:1fr;aspect-ratio:auto;gap:1rem}
  .img-lead .big{height:auto;aspect-ratio:16/10}
  .img-lead .col{grid-template-rows:auto;grid-template-columns:1fr 1fr;gap:1rem}
  .img-lead .col .m{height:auto;aspect-ratio:4/3}
  .img-strip{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr}
  /* Einspaltig zählt wieder die Reihenfolge im Editor — die Spalten-/Zeilen-Zuweisung von
     oben muss weg, sonst würde die Karte eine eigene Zeile beanspruchen und Lücken reißen. */
  .detail-grid > *,.detail-grid > .detail-book{grid-column:1;grid-row:auto}
  .detail-book{position:static}
}
@media(max-width:560px){
  .cover__top .cover__tag{display:none}
  .img-strip{grid-template-columns:1fr}
  .footer-links{gap:2.5rem}
  .footer-col a{min-height:44px;display:flex;align-items:center}
  .footer-legal a{display:inline-flex;align-items:center;min-height:40px;padding:.2rem 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* ============================================================
   SEITEN-BAUSTEINE — aus den freigegebenen Entwürfen (/_design/seiten/)
   1:1 aus _seiten.css übernommen, nicht neu interpretiert.
   Ergänzen das Manual-Inventar um die Kompositionen, die Marcel
   am 15.07. bewusst „freier" gestaltet haben wollte.
   ============================================================ */

/* --- Seitenkopf: schmales Bild, Schrift drüber (Papeterie-Optik) --- */
.phead{position:relative;color:var(--white);background:var(--dark);overflow:hidden;border-radius:0 0 var(--r-lg) var(--r-lg)}
.phead .bg{position:absolute;inset:0}
.phead .bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.56),rgba(22,28,33,.74))}
.phead .in{position:relative;z-index:3;padding:clamp(7rem,13vw,10rem) 0 clamp(3rem,6vw,4.6rem)}
.phead h1{color:var(--white);font-size:clamp(2.1rem,4.6vw,3.4rem);margin:1.1rem 0 1rem;max-width:19ch}
.phead h1 em{color:var(--gold-soft);font-style:italic}
.phead p{color:rgba(255,255,255,.88);max-width:56ch;font-weight:300}
.phead .crumb{position:absolute;top:clamp(5.4rem,9vw,7rem);left:0;right:0;z-index:3}
.phead .crumb span{color:rgba(255,255,255,.62);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.phead .crumb b{color:rgba(255,255,255,.9);font-weight:500}
.phead--deep .in{padding:clamp(9rem,17vw,13rem) 0 clamp(4rem,8vw,6rem)}

/* --- Bild neben Text, im Zickzack --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split + .split{margin-top:clamp(3.4rem,7vw,6rem)}
.split__m{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-soft)}
.split__m img{width:100%;height:100%;object-fit:cover}
.split__m--tall{aspect-ratio:4/5}
.split--rev .split__m{order:2}
.split__t :is(h2,h3){font-size:clamp(1.6rem,3vw,2.2rem);margin:1rem 0 1.1rem}
.split__t :is(h2,h3) em{color:var(--gold);font-style:italic}
.split__t p{margin-bottom:1rem;max-width:46ch}

/* --- Register-Paar: der Auswahlmoment (zwei gleichwertige Wege) --- */
.regs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2rem)}
.reg{text-decoration:none;position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(380px,48vw,520px);display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--white);background:var(--dark);box-shadow:var(--shadow-soft);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.reg:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.reg .bg{position:absolute;inset:0}
.reg .bg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.reg:hover .bg img{transform:scale(1.04)}
.reg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,28,33,.92) 0%,rgba(20,28,33,.62) 40%,rgba(20,28,33,.04) 80%)}
.reg .in{position:relative;z-index:3;padding:clamp(1.8rem,3.4vw,2.6rem)}
.reg :is(h2,h3){color:var(--white);font-size:clamp(1.6rem,2.8vw,2.1rem);margin:.9rem 0 .7rem}
.reg :is(h2,h3) em{color:var(--gold-soft);font-style:italic}
.reg p{color:rgba(255,255,255,.86);font-size:.95rem;max-width:34ch;margin-bottom:1.3rem}
.reg .go{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
.reg .go i{width:22px;height:1px;background:var(--gold-soft);transition:width .3s var(--ease)}
.reg:hover .go i{width:38px}

/* --- Wegweiser: leise Querverweise, NACH dem Ziel --- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.way{text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.way:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.way :is(h3,h4){font-size:1.15rem}
.way p{font-size:.86rem;color:var(--meta)}
.way .go{margin-top:.4rem;font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:inline-flex;gap:.5rem;align-items:center}
.way .go .arr{transition:transform .25s var(--ease)}
.way:hover .go .arr{transform:translateX(4px)}

/* --- Zahlen-Trio: Fakten, nicht Erlebnis-Sprache --- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
/* Zahlen direkt unter einem Bild brauchen Luft — sonst kleben sie an der Kante. */
.bimg + .figs{margin-top:clamp(2.4rem,5vw,3.6rem)}

/* GALERIE — Zimmer-Detailseite: großes Bild + Thumbnail-Leiste, Pfeile/Wischen/Tastatur */
.gallery{margin-bottom:2rem}
.gallery__stage{position:relative;aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:var(--tint);box-shadow:var(--shadow-soft)}
.gallery__img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:99px;border:0;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--blue);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);transition:background .2s}
.gallery__nav:hover{background:var(--white)}
.gallery__nav--prev{left:.8rem}
.gallery__nav--next{right:.8rem}
.gallery__count{position:absolute;right:.8rem;bottom:.8rem;background:rgba(20,28,33,.6);color:var(--white);font-size:.72rem;letter-spacing:.04em;padding:.24rem .62rem;border-radius:99px}
.gallery__strip{display:flex;gap:.6rem;margin-top:.7rem;overflow-x:auto;scroll-snap-type:x proximity;padding:3px 1px .4rem}
.gallery__strip .gt{flex:0 0 88px;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line);scroll-snap-align:start;opacity:.72;transition:opacity .2s,box-shadow .2s}
.gallery__strip .gt img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__strip .gt:hover{opacity:1}
.gallery__strip .gt.is-active{opacity:1;box-shadow:inset 0 0 0 2px var(--gold)}
.gallery__note{font-size:.76rem;color:var(--meta);margin-top:.6rem}
/* Mobil: die Thumbnail-Leiste ist ein zu dicker Block direkt nach dem Hero — weg damit.
   Das große Bild bleibt per Wisch + Pfeilen + Zähler voll bedienbar (die .gt-Buttons
   existieren weiter im DOM, nur unsichtbar, daher läuft die Galerie-Logik unverändert). */
@media(max-width:640px){
  .gallery__strip{display:none}
  .gallery{margin-bottom:1.4rem}
  .gallery__stage{aspect-ratio:4/3}
}
.fig{padding:1.6rem 0;border-top:1px solid var(--line)}
.fig .n{font-family:var(--font-h);font-size:clamp(2.2rem,4.4vw,3.2rem);color:var(--blue);line-height:1}
.fig .n em{font-style:normal;color:var(--gold-deep);font-size:.5em}
.fig .l{margin-top:.5rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
/* Zahlen in der blauen Box — Variante von .band, ersetzt die Inline-Styles des Entwurfs. */
.band--zahlen{text-align:left;padding-block:clamp(2.6rem,5vw,3.8rem)}
.band--zahlen .kicker{justify-content:flex-start}
.band--zahlen .figs{margin-top:1.8rem;position:relative}
.figs--dark .fig{border-top-color:rgba(255,255,255,.22)}
.figs--dark .fig .n{color:var(--white)}
.figs--dark .fig .n em{color:var(--gold-soft)}
.figs--dark .fig .l{color:rgba(255,255,255,.66)}

/* --- Foto-Platzhalter: ehrlicher Shooting-Marker, kann nicht „falsch" sein --- */
.shot{background:var(--tint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  text-align:center;padding:1.5rem;color:var(--meta);box-shadow:inset 0 0 0 1px var(--line)}
.shot .k{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.shot .t{font-family:var(--font-h);color:var(--ink);font-size:1rem;max-width:24ch}
.shot .a{font-size:.7rem}

/* --- Hinweiszeile unter einem Raster (kein Kursiv: Hanken hat keinen Italic-Schnitt) --- */
.ausbau-note{margin-top:1.6rem;font-size:.9rem;color:var(--meta);text-align:center}

@media(max-width:900px){
  .split,.regs{grid-template-columns:1fr}
  .split--rev .split__m{order:0}
  .ways,.figs{grid-template-columns:1fr}
  .reg{min-height:340px}
}
@media(max-width:560px){
  .figs{grid-template-columns:1fr 1fr}
}
.closing .btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

@media(max-width:900px){
  /* Mobil braucht das Bild eigene Hoehe, sonst frisst die Bildunterschrift es auf. */
  .bimg,.bimg--wide{aspect-ratio:4/3}
  /* Der Scroll-Hinweis kollidiert auf dem kurzen Cover mit dem Button — und die Welle
     sagt ohnehin schon, dass es weitergeht. */
  .cover__scroll{display:none}
}

/* ============================================================
   FAQ + Kontakt — 1:1 aus faq-kontakt-muster.html (14.07.).
   Die Demo-Zutaten des Musters (.mkbar, .block__tag, .reuse) gehoeren NICHT
   hierher: die erklaerten Marcel die Block-Idee, sie sind kein Seiten-Design.
   Generische Namen (.field, .consent, h3) laufen bewusst unter .kblock —
   das Seekda-Widget liegt im Light-DOM, ungescopte Allerweltsnamen sind hier
   schon einmal teuer geworden.
   ============================================================ */

/* --- FAQ: nach Themen sortiert, aufklappbar --- */
.faq-groups{display:grid;gap:2rem;max-width:820px}
.faq-group > .gh{font-family:var(--font-b);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.faq-group > .gh::before{content:"";width:26px;height:1px;background:var(--gold)}
.acc{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--white);box-shadow:var(--shadow-soft)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{list-style:none;cursor:pointer;padding:1rem 1.2rem;font-family:var(--font-h);color:var(--ink);font-size:1.08rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1}
.acc details[open] summary::after{content:"–"}
.acc .a{padding:0 1.2rem 1.1rem;font-size:.92rem;color:var(--body);max-width:70ch}
/* Der Entwurf ist ein Mock ohne Tastatur-Bedienung — sichtbarer Fokus ist Pflicht, keine Interpretation. */
.acc summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* --- Kontakt-Bloecke: Info + Formular, einmal gestaltet, ueberall einsetzbar --- */
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.kblock{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:1.7rem;box-shadow:var(--shadow-soft)}
/* Die Box bringt keinen eigenen Abstand nach unten mit — folgt ihr ein weiterer
   Baustein (etwa eine Prinzipien-Liste), klebte er bisher mit 0px an ihrer Kante.
   Geschwister-Selektor statt margin-bottom: greift nur, wenn wirklich etwas folgt. */
.kblock + *{margin-top:clamp(2rem,4vw,3rem)}
.kblock :is(h2,h3){font-family:var(--font-h);color:var(--ink);font-size:1.4rem;margin-bottom:.2rem}
.subnote{font-size:.85rem;color:var(--meta);max-width:64ch}
.subnote--fine{font-size:.74rem;margin-top:.8rem}
.kblock .waterline{margin-top:1.3rem}

.info-row{display:grid;gap:.9rem;margin-top:1.1rem}
.info-row .it .l{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);font-weight:500}
.info-row .it .v{font-family:var(--font-h);color:var(--ink);font-size:1.05rem}
.info-row .it .v small{font-family:var(--font-b);color:var(--body);font-size:.85rem;display:block;font-weight:300}

.kblock .kform{margin-top:1.1rem}
.kblock .field{margin-bottom:.9rem}
.kblock .field label{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin-bottom:.35rem;font-weight:500}
.kblock .field input,.kblock .field textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--paper);padding:.75rem .9rem;font-family:var(--font-b);font-size:.95rem;color:var(--ink)}
.kblock .field input:focus,.kblock .field textarea:focus{outline:none;border-color:var(--blue);background:var(--white)}
/* Sichtbarer Fokus-Ring für Tastatur (WCAG 2.4.7): der Border-Wechsel allein ist als Indikator zu leise. */
.kblock .field input:focus-visible,.kblock .field textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kblock .consent{display:flex;gap:.55rem;font-size:.8rem;color:var(--body);align-items:flex-start;margin:.7rem 0 1rem}
.kblock .consent input{margin-top:.2rem}
.btn--full{width:100%;justify-content:center}

/* Noch nicht scharf: sichtbar gestaltet, aber ehrlich stumm — kein Formular, das so tut als ob. */
.kblock .field input:disabled,.kblock .field textarea:disabled{opacity:.55;cursor:not-allowed}
.kblock .consent input:disabled + span{opacity:.55}
.btn.is-disabled{background:var(--line);color:var(--meta);box-shadow:none;opacity:1;cursor:not-allowed;pointer-events:none}

@media(max-width:760px){
  .kgrid{grid-template-columns:1fr}
}

/* ============================================================
   Region-Guide „Entdecken" — Hub + Spoke.
   Nutzt die vorhandenen Bausteine für den Fließtext; hier nur Hub-Karten,
   Filter, Kopf-Meta, der „Vom Schloss aus"-Block und die Bildnachweise.
   ============================================================ */

/* --- Kopf ohne Bild (Hub + Spokes ohne Kopffoto): heller, nicht dunkel --- */
.phead--nobg{background:var(--cream);color:var(--ink)}
.phead--nobg::after{display:none} /* der dunkle Bild-Overlay von .phead gehört nur zum Foto-Kopf */
.phead--nobg .in{padding-top:clamp(7rem,12vw,9rem)}
.phead--nobg h1{color:var(--ink)}
/* --gold-soft ist das Gold für DUNKLEN Grund. Der helle Kopf erbte es von `.phead h1 em`
   und landete bei 1,88:1 auf --cream. Hier trägt das normale --gold (h1 = große Schrift). */
.phead--nobg h1 em{color:var(--gold)}
.phead--nobg .kicker.on-dark{color:var(--gold-deep)}
.phead--nobg .kicker.on-dark::before{background:var(--gold)}
.phead--nobg .lead{color:var(--body);max-width:56ch;margin-top:1rem}
.entdecken-hub__head .lead{font-size:1.05rem}

/* Heller Kopf → dunkle Navigation & Krume. Ohne das bliebe die Nav (body:has(.phead)
   färbt sie weiß) auf dem cremefarbenen Kopf unsichtbar, bis man scrollt. */
body:has(.phead--nobg):not(:has(.cover)) .site-header:not(.scrolled) .m-nav__item>a{color:var(--ink)}
body:has(.phead--nobg):not(:has(.cover)) .site-header:not(.scrolled) .m-nav__logo img{filter:none}
body:has(.phead--nobg):not(:has(.cover)) .site-header:not(.scrolled) .burger span{background:var(--ink)}
.phead--nobg .crumb span{color:var(--meta)}
.phead--nobg .crumb a{color:var(--meta);text-decoration:none}
.phead--nobg .crumb a:hover{color:var(--blue)}
.phead--nobg .crumb b{color:var(--ink)}

/* --- Vollflächiges Beitragsbild (Spoke): randlos unter dem Textkopf, großzügig --- */
.entdecken-bild{margin:0;position:relative;background:var(--tint);overflow:hidden}
.entdecken-bild img{display:block;width:100%;height:clamp(360px,60vh,660px);object-fit:cover;object-position:center 50%}
@media(max-width:600px){.entdecken-bild img{height:clamp(260px,46vh,380px)}}

/* --- Fakten-Leiste (Wann · Wo & Entfernung): scannbar, direkt unter dem Bild --- */
.fakten-strip{border-bottom:1px solid var(--line);background:var(--cream)}
.fakten-strip .wrap{display:flex;flex-wrap:wrap;gap:1.3rem 3.2rem;padding-top:1.5rem;padding-bottom:1.5rem}
.fakten__item{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.fakten__l{font-family:var(--font-b);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.fakten__v{font-family:var(--font-h);font-size:clamp(1.05rem,2vw,1.32rem);color:var(--ink);line-height:1.3}

/* --- Region-Guide Vorschau-Designs (Manual-Bausteine, tokens-only) --- */
/* Hero-Titel über dem .bimg-Bild (Gradient erbt aus .bimg .cap) */
.bimg .cap h1{font-family:var(--font-h);font-weight:400;color:var(--white);font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;margin-top:.5rem;max-width:24ch}
.bimg .cap h1 em{color:var(--gold-soft);font-style:italic}
/* Steckbrief-Karte (Design B): Eckdaten als Zeilen */
.sb-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:clamp(1.5rem,3vw,2.1rem)}
.sb-card .sbrow{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding:.8rem 0;border-top:1px solid var(--line)}
.sb-card .sbrow:first-child{border-top:0;padding-top:0}
.sb-card .sbl{font-family:var(--font-b);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);font-weight:500}
.sb-card .sbv{font-family:var(--font-b);font-weight:500;font-size:.96rem;line-height:1.4;color:var(--ink);text-align:right}
.sb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:center}
@media(max-width:820px){.sb-grid{grid-template-columns:1fr}}
/* Eckdaten-Zeile (Design C): dezent, in-content */
.eckdaten{display:flex;flex-wrap:wrap;gap:1.1rem 2.6rem;padding:1.3rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eckdaten .ek{display:flex;flex-direction:column;gap:.25rem}
.eckdaten .ekl{font-family:var(--font-b);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.eckdaten .ekv{font-family:var(--font-h);font-size:1.12rem;color:var(--ink)}
/* Artikel-Fließtext (redaktionell) */
.gtext{max-width:64ch}
.gtext h2{font-family:var(--font-h);color:var(--ink);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2;margin:0 0 .7rem}
/* gold-deep, nicht gold: clamp-Minimum 22,4px greift ab ~861px Breite = kleine Schrift (4,5:1).
   Derzeit erzeugt kein Renderer eine h2 in .gtext — die Regel ist Vorrat, aber dann korrekter. */
.gtext h2 em{color:var(--gold-deep);font-style:italic}
.gtext p{color:var(--body);font-size:1.02rem;line-height:1.7;margin:0 0 1.1rem}
.gtext .lead{font-family:var(--font-h);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.45;color:var(--ink)}
.gnarr{max-width:60ch;margin:0 auto}
.gnarr p{font-family:var(--font-h);font-weight:300;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.6;color:var(--ink);margin:0 0 1.3rem}
/* gold-deep: Fließtext, 18,4–24px — nie sicher große Schrift. (.gnarr wird derzeit nirgends erzeugt.) */
.gnarr p em{color:var(--gold-deep);font-style:italic}
/* Vorschau-Umschalter (nur hinterm Tor sichtbar) */
.vswitch{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding:1rem var(--gutter);background:var(--tint);border-bottom:1px solid var(--line)}
.vswitch a{font-family:var(--font-b);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line-strong);color:var(--body);text-decoration:none}
.vswitch a.on{background:var(--blue);color:var(--white);border-color:var(--blue)}

/* Sichtbare Guide-Navigation (Brotkrume) + kompaktere Rhythmik */
.guide-top .in{padding-top:clamp(5.5rem,10vw,7.5rem);padding-bottom:0}
.guide-crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.guide-crumb a{font-family:var(--font-b);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);text-decoration:none;font-weight:500}
.guide-crumb a:hover{color:var(--gold-deep)}
.guide-crumb b{font-family:var(--font-b);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--meta);font-weight:500}
.guide-article .sec{padding-block:clamp(2.3rem,4.4vw,3.6rem)}
.guide-article .bimg--hero{aspect-ratio:2/1}
@media(max-width:700px){.guide-article .bimg--hero{aspect-ratio:4/3}}

/* Sektions-Auftakt (Kicker + Überschrift) für inhaltsreiche Guide-Seiten */
.ghead{max-width:60ch;margin:0 0 1.6rem}
.ghead .kicker{margin-bottom:.6rem}
.ghead h2{font-family:var(--font-h);color:var(--ink);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.15;margin:0}
.ghead h2 em{color:var(--gold);font-style:italic}
.ghead p{color:var(--body);font-size:1.02rem;line-height:1.7;margin:.9rem 0 0}
/* Ziel-Karten (was man vor Ort konkret macht) */
.ziele{display:grid;gap:1.1rem}
.ziel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.3rem,2.4vw,1.9rem);box-shadow:var(--shadow-soft)}
.ziel h3{font-family:var(--font-h);color:var(--ink);font-size:1.3rem;margin:0 0 .5rem}
.ziel h3 .zh{font-family:var(--font-b);font-size:.72rem;letter-spacing:.06em;color:var(--gold-deep);text-transform:uppercase;margin-left:.6rem}
.ziel p{color:var(--body);font-size:.98rem;line-height:1.65;margin:0}
.ziel .zmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.ziel .zmeta span{font-family:var(--font-b);font-size:.82rem;color:var(--meta)}
.ziel .zmeta b{color:var(--ink);font-weight:500}
/* Touren-Liste mit Kennzahlen */
.touren{display:grid;gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.2rem,2.4vw,1.8rem);box-shadow:var(--shadow-soft)}
.tour{display:grid;grid-template-columns:1fr auto;gap:.2rem 1.2rem;padding:1rem 0;border-top:1px solid var(--line)}
.tour:first-child{border-top:0;padding-top:0}
.tour .tn{font-family:var(--font-h);font-size:1.1rem;color:var(--ink)}
.tour .td{font-family:var(--font-b);font-size:.82rem;color:var(--gold-deep);letter-spacing:.03em;text-align:right;white-space:nowrap}
.tour .tx{grid-column:1/-1;font-size:.92rem;color:var(--body);line-height:1.55}
@media(max-width:560px){.tour .td{text-align:left}}

/* --- Zurück-Navigation in den Guide --- */
.entdecken-zurueck{padding:2.2rem 0 .6rem}
.zurueck-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-b);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:500;text-decoration:none;transition:color var(--dur) var(--ease)}
.zurueck-link .arr{display:inline-block;transition:transform var(--dur) var(--ease)}
.zurueck-link:hover{color:var(--gold-deep)}
.zurueck-link:hover .arr{transform:translateX(-4px)}

/* --- Weiterlesen: kuratierte Verweise nach außen --- */
.mehr{max-width:720px}
.mehr__head{margin-bottom:1.1rem}
.mehr__titel{font-family:var(--font-h);color:var(--ink);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.2;margin-top:.5rem}
.mehr__list{list-style:none;display:block}
.mehr__item{border-top:1px solid var(--line)}
.mehr__item:last-child{border-bottom:1px solid var(--line)}
.mehr__item a{display:block;padding:.95rem .1rem;text-decoration:none;color:var(--ink);transition:color var(--dur) var(--ease)}
.mehr__item a:hover{color:var(--blue)}
.mehr__label{font-family:var(--font-h);font-size:1.08rem;line-height:1.3}
.mehr__label::after{content:"↗";margin-left:.4rem;color:var(--gold-deep);font-size:.82em;vertical-align:middle;transition:color var(--dur) var(--ease)}
.mehr__item a:hover .mehr__label::after{color:var(--blue)}
.mehr__note{display:block;margin-top:.2rem;font-family:var(--font-b);font-size:.82rem;color:var(--meta);line-height:1.5}

/* --- Kopf-Meta (Spoke): Ort/Entfernung · Zeit --- */
.entdecken-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.1rem}
.entdecken-meta span{position:relative;font-family:var(--font-b);font-size:.85rem;letter-spacing:.03em;color:var(--white);opacity:.9}
.entdecken-meta span+span::before{content:"";position:absolute;left:-.85rem;top:50%;width:4px;height:4px;border-radius:50%;background:var(--gold-soft);transform:translateY(-50%)}
.phead--nobg .entdecken-meta span{color:var(--meta);opacity:1}

/* --- Filter --- */
.entdecken-filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.4rem}
.ef-btn{font-family:var(--font-b);font-size:.8rem;letter-spacing:.04em;padding:.5rem 1.1rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--white);color:var(--body);cursor:pointer;transition:all var(--dur) var(--ease)}
.ef-btn:hover{border-color:var(--blue);color:var(--blue)}
.ef-btn.is-active{background:var(--blue);border-color:var(--blue);color:var(--white)}

/* --- Karten-Grid --- */
.entdecken-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.ecard{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.ecard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ecard__img{position:relative;aspect-ratio:3/2;background:var(--tint);overflow:hidden}
/* absolut in die Ratio-Box — sonst zwingt ein Hochformat-Bild im Flex-Column-Container
   seine native Höhe durch und sprengt die 3:2-Kachel. */
.ecard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ecard__img.is-empty{display:flex;align-items:center;justify-content:center}
.ecard__img .ph{font-family:var(--font-b);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.ecard__badge{position:absolute;top:.9rem;left:.9rem;background:var(--white);color:var(--blue);font-family:var(--font-b);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;box-shadow:var(--shadow-soft)}
.ecard__in{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.ecard__in h2{font-family:var(--font-h);color:var(--ink);font-size:1.35rem;line-height:1.15;margin-bottom:.4rem}
.ecard__meta{font-family:var(--font-b);font-size:.76rem;letter-spacing:.04em;color:var(--gold-deep);margin-bottom:.6rem}
.ecard__text{font-size:.9rem;color:var(--body);line-height:1.55;margin-bottom:1.1rem}
.ecard .go{margin-top:auto;font-family:var(--font-b);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:500}
.ecard .go .arr{transition:transform var(--dur) var(--ease);display:inline-block}
.ecard:hover .go .arr{transform:translateX(4px)}
.ecard.is-hidden{display:none}

/* --- „Vom Schloss aus"-Block --- */
.vom-schloss{max-width:720px}
.vom-schloss p{font-family:var(--font-h);font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.35;color:var(--ink);margin:.6rem 0 1.6rem}
.vom-schloss .btns{display:flex;gap:.9rem;flex-wrap:wrap}

/* --- Bildnachweise: klein, ehrlich, rechtssicher --- */
.bildnachweis{max-width:var(--maxw);margin:0 auto;padding:2.4rem var(--gutter) 3rem}
.bildnachweis h2{font-family:var(--font-b);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--meta);font-weight:500;margin-bottom:.7rem}
.bildnachweis ul{list-style:none;display:grid;gap:.35rem}
.bildnachweis li{font-family:var(--font-b);font-size:.78rem;color:var(--meta);line-height:1.5}

@media(max-width:900px){
  .entdecken-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .entdecken-grid{grid-template-columns:1fr}
}

/* ============================================================
   Baustein-Abstände — die im Editor wählbaren Stufen.
   Quelle der Werte: --sp-* in assets/css/tokens.css.

   Warum !important: Das hier ist bewusst eine Übersteuerungs-Schicht. Die Vorgaben der
   Bausteine stehen teils in Regeln mit zwei Klassen (.kblock .waterline{margin-top:1.3rem}) —
   eine einzelne Utility-Klasse verlöre gegen sie und der Regler bliebe im Editor wirkungslos.
   Genau dafür ist !important da: eine schmale, letzte Schicht, die gewinnen MUSS.
   Sie greift nur, wenn im Editor eine Stufe gewählt wurde; „Standard" setzt keine Klasse.
   ============================================================ */
.sdo-mt-0 {margin-top:var(--sp-0)!important}
.sdo-mt-xs{margin-top:var(--sp-xs)!important}
.sdo-mt-s {margin-top:var(--sp-s)!important}
.sdo-mt-m {margin-top:var(--sp-m)!important}
.sdo-mt-l {margin-top:var(--sp-l)!important}
.sdo-mt-xl{margin-top:var(--sp-xl)!important}

.sdo-mb-0 {margin-bottom:var(--sp-0)!important}
.sdo-mb-xs{margin-bottom:var(--sp-xs)!important}
.sdo-mb-s {margin-bottom:var(--sp-s)!important}
.sdo-mb-m {margin-bottom:var(--sp-m)!important}
.sdo-mb-l {margin-bottom:var(--sp-l)!important}
.sdo-mb-xl{margin-bottom:var(--sp-xl)!important}

/* ---------------------------------------------------------------------------
   Gold-Kuratierung (Marcel 17.07.): NICHT jede Überschrift golden — aber Gold DARF
   kursiv sein (der Akzent). Die mechanischen Sektionsköpfe + CTA-Bänder werden ruhig
   (kein Gold, keine Kursive). Gold+Kursiv bleibt für den Auftakt (H1), den Abschluss
   (.closing) und das Pull-Zitat. So bekommen Seiten mit Abschluss-Zeile eine zweite
   veredelte Überschrift, die übrigen nur die H1 — „mal eine zweite, nicht jede".
   Feinschliff (welche Seite genau eine zweite bekommt) = später über das <em> im
   Editor, dann steuern die Grafs Gold selbst. */
.sec__head h2 em,
.m-hero h2 em, .m-hero h3 em,
.m-sech :is(h2,h3) em,
.split__t :is(h2,h3) em,
.reg :is(h2,h3) em,
.gtext h2 em,
.ghead h2 em,
.band h2 em, .band h3 em{color:inherit;font-style:normal}