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

/* ============================================================
   Hotel Robben – Grollander Krug · Bremen
   Struktur/Typo 1:1 nach weser-terrassen.vercel.app
   (monochrom weiß/schwarz/grau · Anton-Großtitel · Playfair-Akzent
    · Inter-Body · eckige Uppercase-Buttons · dünne Trennlinien)
   Eigenständig: Robben-Grün aus dem Original-Logo als Signalfarbe
   ============================================================ */

:root{
  --bg:#FAF8F5;          /* warmes Off-Weiss statt reinweiss – nimmt der Seite das Kalte */
  --paper:#ffffff;       /* Karten/Flaechen, die sich vom Grund abheben sollen */
  --ink:#141414;
  --soft:#3b3b3b;      /* body copy */
  --grey:#6b6b6b;      /* serif accent / muted */
  --faint:#6A6A6A;     /* overlines – auf allen Flaechentoenen >= 4,65:1 (WCAG AA) */
  --line:#e6e6e6;      /* hairline dividers */
  --line-2:#d6d6d6;
  --dark:#141414;

  /* Robben-Grün – exakt das Grün aus dem Original-Logo (#909931) */
  --green:#909931;       /* Flächen (Buttons, Badges) – dazu IMMER --ink als Textfarbe */
  --green-hi:#A3AD37;    /* Hover, noch etwas heller */
  --green-ink:#65701E;   /* gruener TEXT – auf Weiss 5,40:1, auf Gruen-Tint 4,73:1 (AA) */
  --green-deep:#4A5218;  /* dunkler Akzent auf hellem Grün-Tint */
  --green-tint:#EEF2DF;   /* Oliv-Flaeche – nur noch fuer das Kapitel Feiern & Tagen */
  --green-line:#DCE3BC;

  /* Marken-Pink aus dem Original-Auftritt (hotel-robben.de, template.css) */
  --brand:#BA014E;       /* Marken-Pink, wird NIE umgefaerbt (auch nicht im Buchen-Bereich) */
  --brand-ink:#A00143;
  --brand-tint:#FBF0F4;
  --brand-line:#EFDAE2;
  --pink:#BA014E;        /* Signalfarbe – auf Weiss 6,5:1, AA fuer Text */
  --pink-hi:#D2185F;     /* Hover */
  --pink-ink:#A00143;    /* dunkler Text-Ton */
  --pink-deep:#6E0130;
  --pink-tint:#FBF0F4;   /* Flaechenton fuer das Kapitel */
  --pink-line:#EFDAE2;

  --sand:#F5F1EA;
  --sand-line:#E7E0D3;
  --stone-tint:#EEEEE9;
  --stone-line:#DDDDD6;
  --ok:#1E7A3C;
  --warn:#B3261E;

  --anton:"Anton","Arial Narrow",Impact,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Helvetica,system-ui,sans-serif;
  --container:1320px;
  --pad:clamp(20px,5vw,60px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* muss vor allen display-Regeln stehen: sonst überstimmt display:grid/flex das hidden-Attribut */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---------- type ---------- */
.display{
  font-family:var(--anton);
  font-weight:400;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.01em;
  color:var(--ink);
  font-size:clamp(2.5rem,6.2vw,5.6rem);
}
.display .dot{color:var(--pink)}
/* Rubriktitel komplett in der Hausfarbe */
.display--brand{color:var(--pink)}
.display--brand .dot{color:var(--pink)}
/* Deutsche Umlaute brauchen Luft: bei mehrzeiligen Titeln mit Ä/Ö/Ü ab Zeile 2
   kollidieren die Punkte sonst mit der Zeile darüber (Anton hat kaum Oberlänge). */
.display--um{line-height:1.14}
.hero__mark--um{line-height:1.02}
h1,h2,h3,h4{font-weight:400}
.accent{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.28rem,2.1vw,1.66rem);
  line-height:1.3;
  color:var(--grey);
  letter-spacing:.005em;
}
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.72rem;
  font-weight:600;
  color:var(--faint);
  display:block;
}
.accent+.prose{margin-top:1.2em}
.prose p{color:var(--soft);line-height:1.8;font-size:1.02rem}
.prose p+p{margin-top:1.1em}
.short-rule{display:none}
.muted{color:var(--grey)}
.stars{color:var(--pink);letter-spacing:.18em;font-size:.8rem}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(58px,8vw,122px);border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}
.section--tint{background:var(--ch-tint,var(--sand))}

/* ---------- Kapitel-Faerbung ----------
   Jede Rubrik bekommt einen eigenen, sehr leisen Grundton – KEINE farbigen
   Trennstriche (auf Kundenwunsch). Der Tonwechsel allein zeigt beim Scrollen,
   dass ein neuer Bereich beginnt. Werte werden auf <section data-ch> oder <body data-ch>
   gesetzt und von allen Kindern geerbt. */
[data-ch="pink"]{--ch:var(--pink);--ch-hi:var(--pink-hi);--ch-ink:var(--pink-ink);--ch-tint:var(--pink-tint);--ch-line:var(--pink-line);--ch-on:#fff}
[data-ch="gruen"]{--ch:var(--pink);--ch-hi:var(--pink-hi);--ch-ink:var(--pink-ink);--ch-tint:var(--green-tint);--ch-line:var(--green-line);--ch-on:#fff}
[data-ch="sand"]{--ch:var(--pink);--ch-hi:var(--pink-hi);--ch-ink:var(--pink-ink);--ch-tint:var(--sand);--ch-line:var(--sand-line);--ch-on:#fff}
[data-ch="stein"]{--ch:var(--pink);--ch-hi:var(--pink-hi);--ch-ink:var(--pink-ink);--ch-tint:var(--stone-tint);--ch-line:var(--stone-line);--ch-on:#fff}
[data-ch="hell"]{--ch:var(--pink);--ch-hi:var(--pink-hi);--ch-ink:var(--pink-ink);--ch-tint:var(--bg);--ch-line:var(--line);--ch-on:#fff}

.section[data-ch]{position:relative;background:var(--ch-tint)}
/* bewusst KEINE farbigen Trennstriche – auf Kundenwunsch komplett entfernt */
/* Akzente uebernehmen die Kapitelfarbe */
[data-ch] .display .dot{color:var(--ch)}
[data-ch] .short-rule{background:var(--ch)}
[data-ch] .sec-head .eyebrow,[data-ch] .split__body>.eyebrow{color:var(--ch-ink)}
[data-ch] .link::after{background:var(--ch)}
[data-ch] .tile .label{background:var(--pink);color:#fff}
[data-ch] .amen span svg{color:var(--pink)}
[data-ch] .stars{color:var(--ch)}
/* Karten heben sich vom Kapitelton ab */
[data-ch] .facts .f,[data-ch] .amen span{background:var(--paper)}
.sec-head{margin-bottom:clamp(34px,4.4vw,66px)}
/* Kopf einer Rubrik zweispaltig: Titel links, Vorspann + Absprung rechts.
   Verhindert die tote Flaeche neben grossen Ueberschriften. */
.sec-head--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);align-items:end}
.sec-head--split .sh__aside{padding-bottom:.5em}
.sec-head--split .sh__aside .accent{margin:0}
.sec-head--split .sh__aside .accent+*{margin-top:1.2em}
.col-head{margin-bottom:clamp(16px,2vw,26px)}
.col-head .display{font-size:clamp(1.9rem,3.4vw,3.2rem)}
.sec-head--mid{align-items:center}
.sec-head--mid .sh__aside{padding-bottom:0}
.sec-head--flip .sh__main{order:2}
.sec-head--flip .sh__aside{order:1}

/* Wechselreihe: Textspalte und Bildspalte immer exakt gleich hoch. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.6vw,76px);align-items:stretch}
.split--media-left .split__media{order:-1}
.split--menu{grid-template-columns:.88fr 1.12fr}
/* Kartenspalte oben buendig – das Bild rechts fuellt die Resthoehe, dadurch enden beide Spalten gleich */
.split--menu>.split__body:first-child{justify-content:space-between}
.split__body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.split__body>.eyebrow{margin-bottom:clamp(12px,1.6vw,20px)}
.split__media{position:relative;overflow:hidden;min-height:clamp(320px,36vw,540px);background:var(--line)}
.split__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.split__media:hover>img{transform:scale(1.04)}
/* Bildspalte als kompakte Dreier-Collage: ein grosses Bild, zwei kleinere daneben.
   Spart Hoehe gegenueber drei Kacheln in voller Breite. */
.split__gallery{display:grid;grid-template-columns:1.14fr 1fr;grid-auto-rows:1fr;gap:clamp(8px,.9vw,14px);align-content:stretch}
.split__gallery>*:first-child{grid-row:1/3}
.split__gallery .tile{aspect-ratio:auto;height:100%;min-height:120px}
.split__gallery .tile .cap .tt{font-size:1.1rem}
.split__gallery .tile .cap .st{font-size:.74rem}
.split__gallery .tile .label{top:11px;left:11px;font-size:.58rem;padding:6px 10px}
.split__gallery .tile .cap{left:14px;right:14px;bottom:13px}
/* Ueberschriften in einer halben Spalte duerfen kleiner sein */
.split__body .display{font-size:clamp(2rem,3.6vw,3.5rem)}
.split__body .accent{font-size:clamp(1.1rem,1.6vw,1.35rem)}
/* Karussell, das die Bildspalte komplett ausfuellt */
.split__media>.mcarousel{position:absolute;inset:0}
.split__media>.mcarousel .mtrack{position:absolute;inset:0;aspect-ratio:auto;height:100%}
/* Bildkarussell, das die Hoehe seiner Spalte ausfuellt */
.mcarousel--fill{flex:1 1 auto;min-height:clamp(260px,26vw,380px)}
.mcarousel--fill .mtrack{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.mcarousel--fill{position:relative}
.sec-head .eyebrow{margin-bottom:clamp(18px,2.4vw,30px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.grid-2.top{align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
/* Grid-Kinder dürfen die Spalte nicht aufblähen (min-width:auto verhindert Schrumpfen) */
.grid-2>*,.grid-3>*,.grid-2f>*,.rooms-grid>*,.bk-layout>*,.rc__top>*,.rate>*,
.facts>*,.contact-strip>*,.dl-list>*,.event-cards>*{min-width:0}

/* ---------- Buchen-Bereich: Hausfarbe Gruen statt Marken-Pink ----------
   Ein Schalter am <body data-flow="buchen"> dreht alle Akzente der Buchungsstrecke
   auf das Gruen des Hauses. Pink bleibt die Marke, Gruen ist die Handlung. */
[data-flow="buchen"]{
  --pink:var(--green); --pink-hi:var(--green-hi); --pink-ink:var(--green-ink);
  --pink-deep:var(--green-deep); --pink-tint:var(--green-tint); --pink-line:var(--green-line);
}
/* Auf der hellen Gruenflaeche traegt Weiss nicht – dort steht dunkle Schrift. */
/* ⚠ Gefunden am 07.09.2026 mit axe-core: der Schalter oben biegt --pink auf
   --green (#909931). Das ist die FLAECHENfarbe — als TEXT auf Weiss erreicht
   sie nur 3,09:1 und faellt damit unter WCAG AA (noetig 4,5:1). Kleine
   Versalien-Beschriftungen brauchen deshalb --green-ink (#65701E, 5,4:1).
   Betroffen war der Kicker „Anfahrt" in der Karte der Fusszeile.           */
[data-flow="buchen"] .fmap__box .k,
[data-flow="buchen"] .kicker-nl,
[data-flow="buchen"] .eyebrow{color:var(--green-ink)}
[data-flow="buchen"] .btn--pink,[data-flow="buchen"] .btn--green,
[data-flow="buchen"] .sb__go,[data-flow="buchen"] .bk-steps .s.is-active .tx,
[data-flow="buchen"] .cal__g button.sel,[data-flow="buchen"] .rc__gal .g-badge{color:var(--ink)}
[data-flow="buchen"] .btn--pink:hover,[data-flow="buchen"] .btn--green:hover{background:var(--green-hi);border-color:var(--green-hi);color:var(--ink)}
[data-flow="buchen"] .bk-steps .s.is-active .num{color:var(--green-deep)}
[data-flow="buchen"] .ptable .grp td{color:var(--green-deep)}

/* ---------- Buchungsseite: Farbe statt weisser Wueste ---------- */
/* Kopfband in Sand, damit die Seite nicht mit einer weissen Flaeche beginnt */
.bk-top{background:var(--sand);border-bottom:1px solid var(--sand-line);
  padding:clamp(18px,2.6vw,30px) 0 clamp(20px,2.8vw,32px);margin-bottom:clamp(24px,3.4vw,42px)}
.bk-top .bk-head{border-bottom:1px solid var(--sand-line)}
/* Warenkorb: Markenfarbe im Kopf, Summe in Pink */
.cart{border-color:var(--brand-line)}
.cart__h{background:var(--brand-tint);border-bottom-color:var(--brand-line)}
.cart__h .t{color:var(--brand-ink)}
.cart__h .e{color:var(--brand-ink)}
.cart__total{border-top-color:var(--brand)}
.cart__total .v{color:var(--brand-ink)}
/* Seitenkarten abwechselnd tonen, damit rechts nicht alles weiss ist */
.sidecard--brand{background:var(--brand-tint);border-color:var(--brand-line)}
.sidecard--brand h4,.sidecard--brand h3{color:var(--brand-ink)}
.sidecard--brand a{color:var(--brand-ink)}
.sidecard--sand{background:var(--sand);border-color:var(--sand-line)}
/* Kicker ueber den Schritt-Ueberschriften */
.bk-kicker{display:block;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);margin-bottom:.7em}
/* "Beliebteste Wahl" bleibt Marken-Pink – hebt sich vom gruenen Handlungsweg ab */
[data-flow="buchen"] .rc__gal .g-badge{background:var(--brand);color:#fff}
/* Zimmerkarten: Tarifzeilen leicht getont */
[data-flow="buchen"] .rate:nth-of-type(even){background:var(--green-tint)}

/* ---------- Kopfzeile der Buchungsseite: eine Reihe statt Leerraum ---------- */
.bk-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:end;
  margin-bottom:clamp(18px,2.4vw,28px);padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid var(--line)}
.bk-head h1{font-size:clamp(1.9rem,4vw,3.2rem);line-height:.95;white-space:nowrap}
.bk-head .crumbs{margin-bottom:10px}
.bk-head__aside{padding-bottom:.35em}
.bk-head__aside .accent{font-size:clamp(1.05rem,1.5vw,1.3rem);margin:0}
.usp{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;padding:0}
.usp li{position:relative;padding-left:20px;font-size:.86rem;color:var(--soft)}
.usp li::before{content:"✓";position:absolute;left:0;color:var(--green-ink);font-weight:700}

/* ---------- Kontaktblock: klare Reihen statt gewuerfelter Buttons ---------- */
.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;max-width:460px}
.contact-actions .btn{width:100%;padding-inline:14px;letter-spacing:.13em;white-space:nowrap}
.contact-actions .btn--wideline{grid-column:1/-1}
.contact-actions .statuspill{grid-column:1/-1;justify-self:center;width:auto;margin-bottom:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--sans);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.2em;
  padding:16px 34px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:0;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  cursor:pointer;line-height:1;text-align:center;
}
.btn:hover{background:var(--ink);color:#fff}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:#000;border-color:#000}
/* Altlast-Alias, falls irgendwo noch btn--green steht */
.btn--green,.btn--pink{background:var(--pink);color:#fff;border-color:var(--pink)}
.btn--green:hover,.btn--pink:hover{background:var(--pink-hi);border-color:var(--pink-hi);color:#fff}
.btn--ch{background:var(--ch,var(--pink));color:var(--ch-on,#fff);border-color:var(--ch,var(--pink))}
.btn--ch:hover{background:var(--ch-hi,var(--pink-hi));border-color:var(--ch-hi,var(--pink-hi))}
/* Hausfarbe Gruen als zweite Aktionsfarbe (Tischreservierung) */
.btn--gruen{background:var(--green);color:var(--ink);border-color:var(--green)}
.btn--gruen:hover{background:var(--green-hi);border-color:var(--green-hi);color:var(--ink)}
.btn--light{border-color:rgba(255,255,255,.8);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--white{background:#fff;color:var(--ink);border-color:#fff}
.btn--white:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn--sm{padding:11px 22px;font-size:.68rem}
.btn--wide{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}
.link{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.7em;position:relative;padding-bottom:6px;color:var(--ink);
}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--pink);transform:scaleX(1);transform-origin:left;transition:transform .4s var(--ease)}
.link:hover::after{transform:scaleX(0);transform-origin:right}
.link .ar{transition:transform .4s var(--ease)}
.link:hover .ar{transform:translateX(5px)}

/* ---------- header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--pad);
  transition:background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease);
  border-bottom:1px solid transparent;
}
.header::before{
  content:"";position:absolute;inset:-14px 0 -34px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,.62) 0%,rgba(6,6,6,.34) 62%,rgba(6,6,6,0) 100%);
  transition:opacity .35s var(--ease);
}
.header.scrolled::before,.header--solid::before{opacity:0}
.header.scrolled,.header--solid{background:var(--paper);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:13px;z-index:2}
.brand img{height:48px;width:auto;flex:none;transition:height .45s var(--ease)}
.header.scrolled .brand img{height:42px}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .logo .dot{color:var(--pink)}
.brand .logo{font-family:var(--anton);text-transform:uppercase;font-size:1.06rem;letter-spacing:.03em;color:#fff;line-height:1;transition:color .45s;white-space:nowrap}
.header.scrolled .brand .logo,.header--solid .brand .logo{color:var(--ink)}
.brand .sub{font-family:var(--sans);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:500;transition:color .45s;margin-top:5px}
.header.scrolled .brand .sub,.header--solid .brand .sub{color:var(--faint)}

.nav{display:flex;align-items:center;gap:clamp(12px,1.3vw,26px)}
.nav a.navlink{
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  transition:color .35s;white-space:nowrap;
}
.header.scrolled .nav a.navlink,.header--solid .nav a.navlink{color:var(--ink)}
.nav a.navlink:hover{color:var(--faint)}
.header.scrolled .nav a.navlink:hover,.header--solid .nav a.navlink:hover{color:var(--pink)}
.nav a.navlink.is-current{color:#fff}
.header.scrolled .nav a.navlink.is-current,.header--solid .nav a.navlink.is-current{color:var(--pink)}
.nav>.btn{display:none} /* nur im Mobil-Menü */

.header-cta{display:flex;align-items:center;gap:10px}
.header-cta .btn{white-space:nowrap}
.header-cta .btn-call{border-color:rgba(255,255,255,.85);color:#fff}
.header-cta .btn-call.btn--gruen,.header.scrolled .header-cta .btn-call.btn--gruen,
.header--solid .header-cta .btn-call.btn--gruen{background:var(--green);border-color:var(--green);color:var(--ink)}
.header-cta .btn-call.btn--gruen:hover,.header.scrolled .header-cta .btn-call.btn--gruen:hover,
.header--solid .header-cta .btn-call.btn--gruen:hover{background:var(--green-hi);border-color:var(--green-hi);color:var(--ink)}
.header.scrolled .header-cta .btn-call,.header--solid .header-cta .btn-call{border-color:var(--ink);color:var(--ink)}
.header.scrolled .header-cta .btn-call:hover,.header--solid .header-cta .btn-call:hover{background:var(--ink);color:#fff}
.header-cta .btn-call:hover{background:#fff;color:var(--ink);border-color:#fff}

.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;z-index:90}
.burger span{width:24px;height:2px;background:#fff;transition:.35s var(--ease)}
.header.scrolled .burger span,.header--solid .burger span{background:var(--ink)}
.nav-open .burger span{background:var(--ink)}
.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;color:#fff}
.hero__slides{position:absolute;inset:0;z-index:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;animation:kb 18s ease-out both}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.15)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,8,.52),rgba(8,8,8,.5) 42%,rgba(8,8,8,.7))}
.hero__inner{position:relative;z-index:2;padding:120px var(--pad) 200px;width:100%;max-width:1100px}
.hero__mark{font-family:var(--anton);text-transform:uppercase;font-weight:400;line-height:.88;letter-spacing:-.015em;
  font-size:clamp(2.6rem,7.6vw,6.6rem);text-shadow:0 4px 40px rgba(0,0,0,.35)}
.hero__sub{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2.2vw,1.7rem);margin-top:.55em;color:#fff}
.hero__kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.34em;font-size:.72rem;font-weight:500;color:#fff;margin-top:1.4em}
.hero__dots{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.hero__dots button{width:34px;height:2px;background:rgba(255,255,255,.6);transition:.4s}
.hero__dots button.is-active{background:#fff}

/* ---------- Suchleiste (booking-style) ---------- */
.searchbar{padding:0 var(--pad)}
/* Startseite: liegt halb über dem Hero, wird aber nicht vom Hero beschnitten */
.searchbar--overlap{position:relative;z-index:30;margin-top:-72px}
.searchbar--page{padding:0;margin:0}
.sb{
  max-width:var(--container);margin-inline:auto;background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(0,0,0,.5);
  display:grid;grid-template-columns:1.1fr 1.1fr 1.2fr auto;align-items:stretch;
}
.sb__f{position:relative;padding:14px 20px;border-right:1px solid var(--line);text-align:left;display:flex;flex-direction:column;justify-content:center;min-width:0}
.sb__f:last-of-type{border-right:none}
.sb__f label,.sb__f .lb{display:block;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.sb__f input,.sb__f .val{
  width:100%;border:none;background:none;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);
  padding:0;line-height:1.3;
}
.sb__f input::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
.sb__f .val{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left}
.sb__f .val .cv{font-size:1.4rem;color:var(--faint);line-height:1}
.sb__go{border:none;background:var(--pink);color:#fff;font-family:var(--sans);font-weight:700;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:0 clamp(22px,3vw,42px);transition:background .3s;white-space:nowrap}
.sb__go:hover{background:var(--pink-hi)}
.sb__nights{font-size:.7rem;color:var(--pink-ink);font-weight:700;letter-spacing:.06em;margin-top:5px;text-transform:none}
.sb__hint{max-width:var(--container);margin:14px auto 0;font-size:.76rem;color:var(--grey);letter-spacing:.02em;display:flex;gap:10px 24px;flex-wrap:wrap;align-items:center}
 .sb__hint b{color:var(--pink-ink);font-weight:700}
.sb__hint i{font-style:normal;display:inline-flex;align-items:center;gap:7px}
.sb__hint i::before{content:"✓";color:var(--pink);font-weight:700}

/* Gäste-Popover */
.pop{
  position:absolute;top:calc(100% + 1px);left:-1px;right:-1px;background:#fff;border:1px solid var(--line-2);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45);padding:18px 20px;z-index:30;display:none;min-width:290px;
}
.pop.open{display:block}
.pop__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.pop__row:last-of-type{border-bottom:none}
.pop__row .t{font-size:.92rem;font-weight:600}
.pop__row .s{font-size:.76rem;color:var(--grey);font-weight:400;display:block}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:34px;height:34px;border:1px solid var(--line-2);display:grid;place-items:center;font-size:1.1rem;color:var(--pink-ink);transition:.25s;line-height:1}
.stepper button:hover:not([disabled]){border-color:var(--pink);background:var(--pink-tint)}
.stepper button[disabled]{opacity:.3;cursor:not-allowed}
.stepper .n{min-width:22px;text-align:center;font-weight:700}
.pop__done{margin-top:14px;width:100%}

/* ---------- editorial media ---------- */
.media{overflow:hidden;position:relative}
.media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.media.tall{aspect-ratio:4/5}
.media.wide{aspect-ratio:3/2}
.media:hover img{transform:scale(1.05)}

/* ---------- carousel ---------- */
.mcarousel{position:relative;overflow:hidden}
.mcarousel .mtrack{position:relative;aspect-ratio:4/3}
.mslide{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.mslide.is-active{opacity:1}
.mslide img{width:100%;height:100%;object-fit:cover}
.mcarousel .mctrl{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;z-index:2}
.mcarousel .mctrl button{width:44px;height:44px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:1.1rem;color:var(--ink);transition:.3s}
.mcarousel .mctrl button:hover{background:var(--ink);color:#fff}
.mcarousel .mdots{position:absolute;left:16px;bottom:24px;display:flex;gap:8px;z-index:2}
.mcarousel .mdot{width:26px;height:2px;background:rgba(255,255,255,.5)}
.mcarousel .mdot.is-active{background:#fff}

/* ---------- tiles / teaser ---------- */
.tile{position:relative;overflow:hidden;aspect-ratio:3/4;background:#f2f2f2;display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.78) 18%,rgba(8,8,8,.34) 40%,transparent 66%);opacity:1}
.tile .label{position:absolute;top:16px;left:16px;z-index:2;background:var(--pink);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px}
.tile .cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}
.tile .cap .tt{display:block;font-family:var(--serif);font-size:1.35rem;line-height:1.15}
.tile .cap .st{display:block;font-size:.82rem;color:#fff;margin-top:4px}
.stack-cards .tile{transform-origin:50% 0}

.teaser{position:relative;display:block;overflow:hidden;aspect-ratio:3/4}
.teaser img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.teaser:hover img{transform:scale(1.06)}
.teaser::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.88) 26%,rgba(8,8,8,.5) 50%,rgba(8,8,8,.08) 80%)}
.teaser__body{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff}
.teaser__body .k{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:600}
.teaser__body h3{font-family:var(--anton);text-transform:uppercase;font-size:1.7rem;line-height:1;margin:.35em 0 .5em}
.teaser__body .go{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;display:inline-flex;gap:.6em;align-items:center}
.teaser:hover .go .ar{transform:translateX(5px);transition:transform .4s var(--ease)}

/* ---------- Fakten-Leiste ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.facts .f{background:var(--paper);padding:clamp(22px,3vw,34px)}
.facts .f .n{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;color:var(--ink)}
.facts .f .l{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:.7em;font-weight:600}

/* ---------- Ausstattungs-Chips ---------- */
.amen{display:flex;flex-wrap:wrap;gap:8px}
.amen span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);padding:7px 13px;font-size:.78rem;color:var(--soft);background:#fff}
.amen span svg{width:14px;height:14px;color:var(--pink);flex:none}

/* ---------- Speise-/Preislisten ---------- */
.menu-list{border-top:1px solid var(--line)}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.menu-item .nm{font-weight:600;font-size:1.06rem;color:var(--ink)}
.menu-item .pr{font-weight:600;font-size:1.02rem;color:var(--pink-ink);white-space:nowrap}
.menu-item .ds{grid-column:1/-1;font-family:var(--serif);font-style:italic;color:var(--grey);font-size:.98rem;line-height:1.4}

/* Kompakte Karten-Vorschau (Startseite): nimmt weniger Platz weg,
   zeigt aber mehr Gerichte – die Liste scrollt in sich selbst. */
.menu-list--compact .menu-item{padding:11px 0;gap:1px 16px}
.menu-list--compact .menu-item .nm{font-size:.97rem}
.menu-list--compact .menu-item .pr{font-size:.94rem;color:var(--ch-ink,var(--ink))}
.menu-list--compact .menu-item .ds{font-size:.88rem;line-height:1.35}
.menu-peek{position:relative}
.menu-peek .menu-list{
  max-height:clamp(240px,32vh,340px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--ch,var(--pink)) transparent;
  padding-right:10px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent);
          mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent);
}
.menu-peek .menu-list::-webkit-scrollbar{width:4px}
.menu-peek .menu-list::-webkit-scrollbar-thumb{background:var(--ch,var(--pink))}
.menu-peek .menu-list::-webkit-scrollbar-track{background:transparent}
.menu-peek__hint{
  display:inline-flex;align-items:center;gap:.55em;margin-top:12px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ch-ink,var(--grey))
}
.menu-peek__hint::before{content:"↓";font-size:.9rem;letter-spacing:0}
@media (prefers-reduced-motion:no-preference){
  .menu-peek__hint::before{animation:peekbob 2.4s var(--ease) infinite}
}
@keyframes peekbob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.menu-cat{margin-bottom:clamp(48px,7vw,88px);scroll-margin-top:120px}
.menu-cat__head{display:flex;align-items:baseline;gap:18px;margin-bottom:14px}
.menu-cat__head .t{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);line-height:1;color:var(--ink)}
.menu-cat__head .it{font-family:var(--serif);font-style:italic;color:var(--grey);font-size:1rem}
.menu-cat__head .ln{flex:1;height:1px;background:var(--line)}
.menu-note{padding:16px 22px;color:var(--soft);font-size:.95rem;margin-top:26px;background:var(--pink-tint)}
.menu-tabs{position:sticky;top:56px;z-index:45;display:flex;flex-wrap:nowrap;gap:10px 26px;margin-bottom:48px;padding:16px 0;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.menu-tabs::-webkit-scrollbar{display:none}
.menu-tab{white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);transition:.25s;position:relative;padding-bottom:4px;flex:none}
.menu-tab:hover{color:var(--ink)}
.menu-tab.active{color:var(--ink)}
.menu-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pink)}

/* ---------- Preis-/Infotabelle ---------- */
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:.95rem;color:var(--soft);vertical-align:top}
.ptable th{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:700}
.ptable td:last-child,.ptable th:last-child{text-align:right;white-space:nowrap;color:var(--ink);font-weight:600}
.ptable tr:last-child td{border-bottom:none}
.ptable .grp td{background:var(--pink-tint);font-weight:700;color:var(--pink-ink);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem}

/* ---------- Räume (Feiern/Tagen) ---------- */
.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.roomcard{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.roomcard:hover{transform:translateY(-4px);box-shadow:0 26px 54px -32px rgba(0,0,0,.4)}
.roomcard__img{aspect-ratio:16/10;overflow:hidden;background:#f2f2f2}
.roomcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.roomcard:hover .roomcard__img img{transform:scale(1.05)}
.roomcard__body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.roomcard__body h4,.roomcard__body h3{font-family:var(--anton);text-transform:uppercase;font-size:1.5rem;line-height:1;margin-bottom:.45em}
.roomcard__body .cap{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-ink)}
.roomcard__body p{color:var(--soft);font-size:.94rem;line-height:1.6;margin-top:.6em}
.roomcard__body .prices{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.86rem;color:var(--soft);display:grid;gap:5px}
.roomcard__body .prices b{color:var(--ink)}

/* ---------- immersive band ---------- */
.band{position:relative;overflow:hidden;color:#fff;text-align:center;padding-block:clamp(80px,12vw,170px)}
.band__bg{position:absolute;inset:0;z-index:0}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:rgba(8,8,8,.72);z-index:1}
.band .container{position:relative;z-index:2}
.band .display{color:#fff}
.band .display .dot{color:#fff}
.band .accent{color:rgba(255,255,255,.96)}
.stat-row{display:flex;gap:clamp(28px,5vw,72px);justify-content:center;flex-wrap:wrap;margin-top:2.4em}
.stat .n{font-family:var(--anton);font-size:clamp(2rem,4vw,3rem);line-height:1;color:#fff}
.stat .l{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-top:.5em}

/* ---------- contact strip ---------- */
.contact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.contact-strip .col .eyebrow{margin-bottom:14px}
.contact-strip .col p,.contact-strip .col a{color:var(--soft);font-size:1rem;line-height:1.7}
.contact-strip .col a:hover{color:var(--pink-ink)}
.hours-table{width:100%;border-collapse:collapse;max-width:460px}
.hours-table td{padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--soft)}
.hours-table td:last-child{text-align:right}
.hours-table tr.today td{color:var(--ink);font-weight:700}
.statuspill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);padding:9px 15px;font-size:.78rem;font-weight:600;letter-spacing:.05em}
.statuspill .d{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.statuspill.is-open .d{background:var(--green-ink)}
.statuspill.is-open{border-color:var(--green-line);background:var(--green-tint);color:var(--green-deep)}

/* ---------- gallery ---------- */
/* Galerie — redaktionell: Registerzeile als Filter, Raster mit grossen
   Kacheln. grid-auto-flow:dense fuellt die Luecken, die beim Filtern
   entstehen, wenn eine grosse Kachel in eine neue Zeile rutscht.      */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;grid-auto-flow:dense}
.gallery figure{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1/1;background:#f2f2f2;margin:0}
.gallery figure.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery figure:hover img,.gallery figure:focus-visible img{transform:scale(1.06)}
/* Verlauf statt flacher Abdunklung: traegt die weisse Bildunterschrift
   (AA) und laesst das obere Bild unangetastet. */
.gallery figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.78) 0%,rgba(10,10,10,.34) 34%,rgba(10,10,10,0) 58%);
  opacity:0;transition:opacity .45s var(--ease)}
.gallery figure:hover::after,.gallery figure:focus-visible::after{opacity:1}
.gallery figure:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.gallery figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.gallery figcaption .k{display:block;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88);margin-bottom:4px}
.gallery figcaption .t{display:block;font-size:.82rem;font-weight:600;line-height:1.3;letter-spacing:.01em}
.gallery figure:hover figcaption,.gallery figure:focus-visible figcaption{opacity:1;transform:none}
/* Touch-Geraete kennen kein Hover — dort stand bisher NIE eine
   Bildunterschrift. Jetzt immer sichtbar, Bereich nur klein. */
@media (hover:none){
  .gallery figure::after{opacity:1}
  .gallery figcaption{opacity:1;transform:none}
  .gallery figcaption .k{display:none}
}
.gallery figure.g-weg{display:none}
.gallery figure.g-ein{animation:gEin .6s var(--ease) both}
@keyframes gEin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* Filter als Registerzeile: Versalien, Anzahl hochgestellt in Anton,
   der gewaehlte Bereich mit Pink-Strich darunter. */
.gfilter{display:flex;flex-wrap:wrap;gap:0 clamp(14px,2.4vw,34px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);margin-bottom:clamp(22px,3vw,36px)}
.gfilter__b{position:relative;display:inline-flex;align-items:flex-start;gap:5px;min-height:48px;padding:16px 0 14px;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  background:none;border:0;cursor:pointer;transition:color .3s var(--ease)}
.gfilter__b sup{font-family:var(--anton);font-size:.86rem;letter-spacing:.02em;line-height:1;color:var(--faint);transform:translateY(-3px);transition:color .3s var(--ease)}
.gfilter__b::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.gfilter__b:hover{color:var(--ink)}
.gfilter__b[aria-pressed="true"]{color:var(--ink)}
.gfilter__b[aria-pressed="true"] sup{color:var(--pink)}
.gfilter__b[aria-pressed="true"]::after{transform:scaleX(1)}
.gfilter__b:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* Handy: eine wischbare Zeile statt drei umgebrochener. Der Rand laeuft
   bis an die Bildschirmkante, damit man sieht, dass es weitergeht. */
@media (max-width:640px){
  .gfilter{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);gap:0 22px;scroll-padding-inline:var(--pad)}
  .gfilter::-webkit-scrollbar{display:none}
  .gfilter__b{flex:none}
  .gfilter__b::after{bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .gallery figure.g-ein{animation:none}
  .gfilter__b::after{transition:none}
}

/* ---------- pagehero ---------- */
.pagehero{position:relative;min-height:58vh;display:flex;color:#fff;overflow:hidden}
.pagehero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Der Verlauf ist genau dort stark, wo Text liegt (oben die Brotkrume,
   unten Titel und Meta) – gemessen gegen die hellsten Bildpixel:
   kleiner Text >= 4,5:1, grosse Titel >= 3:1 (WCAG 1.4.3).        */
.pagehero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.82) 0%,rgba(8,8,8,.76) 22%,rgba(8,8,8,.34) 33%,rgba(8,8,8,.44) 42%,rgba(8,8,8,.56) 56%,rgba(8,8,8,.74) 76%,rgba(8,8,8,.88) 100%)}
.pagehero__inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(74px + 2.6vw);padding-bottom:clamp(40px,6vw,72px)}
.pagehero .display{color:#fff}
.pagehero .display .dot{color:#fff}
.pagehero .crumbs{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7);margin:0}
/* Der Link muss sich auch ohne Farbe vom Text abheben (WCAG 1.4.1) */
.pagehero .crumbs a{text-decoration:underline;text-underline-offset:3px}
.pagehero .crumbs a:hover{color:#fff;text-decoration-thickness:2px}
.pagehero__meta{display:flex;align-items:center;gap:.85em;margin-top:1.1em;font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:.82rem;font-weight:700;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.85)}
.pagehero__meta .bar{width:38px;height:2px;background:#fff;flex:none;box-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ---------- footer ---------- */
.footer{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(56px,8vw,96px) 26px}
.footer .fmark{display:flex;align-items:center;gap:14px}
.footer .fmark img{width:52px}
.footer .fmark .t{font-family:var(--anton);text-transform:uppercase;font-size:1.85rem;color:var(--ink);line-height:1}
.footer .fmark .t .dot{color:var(--pink)}
.footer .fsub{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:10px}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-top:clamp(40px,5vw,64px)}
.footer h5,.footer .fcol-h{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:18px}
.footer ul{list-style:none;display:grid;gap:11px}
.footer ul a,.footer .fcontact a{font-size:.95rem;color:var(--soft)}
.footer ul a:hover,.footer .fcontact a:hover{color:var(--pink)}
.footer .fcontact{font-size:.95rem;color:var(--soft);line-height:1.9}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);font-size:.78rem;color:var(--faint)}
.footer-bottom a:hover{color:var(--pink)}

/* ---------- Karte in der Fusszeile ----------
   Statisches Kartenbild (CARTO Positron auf OpenStreetMap-Daten), lokal gespeichert:
   kein iframe, keine Fremdverbindung beim Seitenaufruf. Klick oeffnet die Route. */
.fmap{position:relative;display:block;overflow:hidden;margin-bottom:clamp(34px,4.4vw,54px);
  border:1px solid var(--line);border-radius:4px;background:#EEF0F1;
  height:clamp(210px,25vw,300px);box-shadow:0 24px 50px -38px rgba(20,20,20,.55)}
.fmap>img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.fmap:hover>img{transform:scale(1.05)}
/* Standortnadel */
.fmap__pin{position:absolute;left:50%;top:50%;z-index:3;width:26px;height:26px;margin:-30px 0 0 -13px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pink);
  box-shadow:0 8px 18px -6px rgba(20,20,20,.55),0 0 0 3px rgba(255,255,255,.95)}
.fmap__pin::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:#fff}
.fmap__pin::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;border:1.5px solid var(--pink);opacity:.32}
@media (prefers-reduced-motion:no-preference){
  .fmap__pin::after{animation:pinpuls 3s var(--ease) infinite}
}
@keyframes pinpuls{0%{transform:scale(.55);opacity:.5}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
/* Textflaeche links */
.fmap__box{position:absolute;left:0;top:0;bottom:0;z-index:4;display:flex;flex-direction:column;justify-content:center;
  gap:8px;padding:clamp(22px,3vw,40px);max-width:min(470px,74%);
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.93) 62%,rgba(255,255,255,0) 100%)}
.fmap__box .k{font-size:.64rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--pink)}
.fmap__box .t{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.08;color:var(--ink)}
.fmap__box .s{font-size:.84rem;color:var(--soft);line-height:1.55;max-width:34ch}
.fmap__box .go{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:.6em;margin-top:6px;padding-bottom:5px;border-bottom:1px solid var(--pink);align-self:flex-start}
.fmap:hover .go{color:var(--pink)}
.fmap:hover .go .ar{transform:translateX(5px);transition:transform .4s var(--ease)}
.fmap__attr{position:absolute;right:0;bottom:0;z-index:4;font-size:.58rem;color:#6a6a6a;background:rgba(255,255,255,.8);padding:3px 8px}
@media(max-width:640px){
  .fmap{height:auto}
  .fmap>img{height:210px}
  .fmap__box{position:static;max-width:none;background:var(--paper);border-top:1px solid var(--line)}
  .fmap__pin{top:105px}
}

/* ---------- social rail ---------- */
.social-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:2px}
.social-rail a{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);opacity:.55;transition:.3s}
.social-rail a:hover{opacity:1;color:var(--pink)}
.social-rail a svg{width:18px;height:18px}
.social-rail::before{content:"";position:absolute;left:50%;top:-40px;width:1px;height:34px;background:var(--line-2)}
.social-rail::after{content:"";position:absolute;left:50%;bottom:-40px;width:1px;height:34px;background:var(--line-2)}

/* ============================================================
   BUCHUNGSSTRECKE (Logik nach booking.com, abgespeckt)
   ============================================================ */
.bk{padding-block:calc(74px + clamp(26px,4vw,46px)) clamp(70px,9vw,120px)}
.bk-steps{display:flex;align-items:center;gap:0;border:1px solid var(--line);background:#fff;margin-bottom:clamp(24px,3vw,38px);overflow:hidden}
.bk-steps .s{flex:1;display:flex;align-items:center;gap:12px;padding:15px 18px;border-right:1px solid var(--line);min-width:0}
.bk-steps .s:last-child{border-right:none}
.bk-steps .s .num{width:26px;height:26px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);font-size:.76rem;font-weight:700;color:var(--faint)}
.bk-steps .s .tx{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-steps .s.is-done .num{background:var(--pink-tint);border-color:var(--pink-line);color:var(--pink-ink)}
.bk-steps .s.is-done .tx{color:var(--soft)}
.bk-steps .s.is-active{background:var(--pink)}
.bk-steps .s.is-active .num{background:#fff;border-color:#fff;color:var(--pink-ink)}
.bk-steps .s.is-active .tx{color:#fff}

.bk-layout{display:grid;grid-template-columns:1fr 366px;gap:clamp(20px,2.6vw,38px);align-items:start}
.bk-main{min-width:0}
.bk-side{position:sticky;top:82px;display:grid;gap:16px}

.bk-stage{display:none}
.bk-stage.is-active{display:block;animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.bk-h{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:.98;margin-bottom:.35em}
.bk-sub{color:var(--grey);font-size:.95rem;margin-bottom:1.6em;max-width:62ch}

/* --- Zimmerkarte --- */
.rc{border:1px solid var(--line);background:#fff;margin-bottom:20px}
.rc__top{display:grid;grid-template-columns:290px 1fr;gap:0}
.rc__gal{position:relative;background:#f2f2f2;overflow:hidden;min-height:240px}
.rc__gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.rc__gal img.is-active{opacity:1}
.rc__gal .g-nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 8px;opacity:0;transition:opacity .3s}
.rc__gal:hover .g-nav{opacity:1}
.rc__gal .g-nav button{width:34px;height:34px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:1.1rem;color:var(--ink)}
.rc__gal .g-nav button:hover{background:#fff}
.rc__gal .g-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:5px;justify-content:center;z-index:2}
.rc__gal .g-dots i{width:18px;height:2px;background:rgba(255,255,255,.55)}
.rc__gal .g-dots i.is-active{background:#fff}
.rc__gal .g-badge{position:absolute;top:0;left:0;z-index:2;background:var(--pink);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px}
/* „Beispielfoto": das Bild zeigt nicht genau dieses Zimmer (Einzel-/Mehrbettzimmer
   mit Doppelbett-Foto). Sichtbar IM Bild, nicht nur im Alt-Text. Weiss auf 86 %
   Schwarz bleibt ueber jedem Foto weit ueber 4,5:1. */
.bsp-etikett{position:absolute;left:0;top:0;z-index:2;background:rgba(17,17,17,.86);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;padding:6px 10px;pointer-events:none}
/* Oben links wie das Abzeichen — unten sitzen in der Buchung die Bildpunkte.
   Traegt ein Zimmer beides, rutscht das Etikett unter das Abzeichen. */
.rc__gal .g-badge~.bsp-etikett{top:27px}
.roomcard__img{position:relative}
.tile .cap .bsp{display:block;margin-top:6px;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.rc__info{padding:22px 24px}
.rc__info h3{font-family:var(--anton);text-transform:uppercase;font-size:1.5rem;line-height:1}
.rc__info .style{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-ink);margin-top:7px}
.rc__info p.d{color:var(--soft);font-size:.9rem;line-height:1.6;margin:.9em 0 1em}
.rc__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.82rem;color:var(--soft);margin-bottom:14px}
.rc__meta i{display:inline-flex;align-items:center;gap:7px;font-style:normal}
.rc__meta i svg{width:15px;height:15px;color:var(--pink-ink);flex:none}

/* Tarifzeilen */
.rates{border-top:1px solid var(--line)}
.rate{display:grid;grid-template-columns:1fr 190px 168px;gap:0;border-bottom:1px solid var(--line);align-items:stretch}
.rate:last-child{border-bottom:none}
.rate.is-locked{background:var(--sand)}
.rate__d{padding:18px 24px;border-right:1px solid var(--line);min-width:0}
.rate__d .n{font-weight:700;font-size:.98rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rate__d ul{list-style:none;margin-top:10px;display:grid;gap:6px}
.rate__d li{font-size:.84rem;color:var(--soft);padding-left:20px;position:relative;line-height:1.45}
.rate__d li::before{content:"✓";position:absolute;left:0;color:var(--pink-ink);font-weight:700}
.rate__d li.no::before{content:"·";color:var(--faint)}
.tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;background:var(--pink-tint);color:var(--pink-deep);border:1px solid var(--pink-line)}
.tag--grey{background:#f3f3f3;color:var(--grey);border-color:var(--line-2)}
.rate__p{padding:18px 20px;border-right:1px solid var(--line);text-align:right;display:flex;flex-direction:column;justify-content:center}
/* Preise tragen die Hausfarbe (im Buchen-Bereich automatisch Gruen) */
.rate__p .amt{font-family:var(--anton);font-size:1.9rem;line-height:1;color:var(--pink-ink)}
.rate__p .per{font-size:.74rem;color:var(--grey);margin-top:7px;line-height:1.4}
.rate__p .inc{font-size:.72rem;color:var(--pink-ink);font-weight:700;margin-top:6px}
/* Terminpreis aus dem Dashboard (z. B. Kohlparty): nennt Anlass und Hinweis,
   damit ein abweichender Preis nicht wie ein Fehler wirkt. Eigene, ganze Zeile
   unter der Tarifzeile — in der 190-px-Preisspalte brach der Hinweis
   rechtsbuendig ueber mehrere Zeilen und ging unter. */
.rate__termin{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  padding:11px 24px 12px;border-top:1px dashed var(--pink-line);font-size:.86rem;line-height:1.45;color:var(--ink)}
.rate__termin .tag{flex:none}
.cart__line .k small.cart__termin,.review__termin{color:var(--pink-ink);font-weight:600}
.review__termin{font-size:.78rem;margin-top:3px}
.rate__s{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.rate__s select{width:100%;padding:.72em .8em;border:1px solid var(--line-2);background:#fff;font-family:inherit;font-size:.92rem;color:var(--ink);border-radius:0}
.rate__s select:focus{outline:none;border-color:var(--pink-ink)}
.rate__s .sel-lb{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.rate__note{font-size:.76rem;color:var(--grey);line-height:1.5}

/* nicht verfügbar */
.rc.is-out{opacity:.55}
.rc .outmsg{padding:16px 24px;border-top:1px solid var(--line);font-size:.86rem;color:var(--warn);background:#fdf6f5}

/* --- Warenkorb / Zusammenfassung --- */
.cart{border:1px solid var(--line);background:#fff}
.cart__h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.cart__h .t{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.cart__h .e{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--pink-ink);text-decoration:underline}
.cart__b{padding:18px 20px}
.cart__stay{display:grid;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.cart__stay .r{display:flex;justify-content:space-between;gap:12px;font-size:.88rem}
.cart__stay .r .k{color:var(--grey)}
.cart__stay .r .v{font-weight:700;text-align:right}
.cart__lines{display:grid;gap:12px}
.cart__line{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;align-items:flex-start}
.cart__line .k{color:var(--soft);line-height:1.4}
.cart__line .k small{display:block;color:var(--faint);font-size:.76rem}
.cart__line .v{font-weight:700;white-space:nowrap}
.cart__line .rm{display:block;font-size:.72rem;color:var(--warn);text-decoration:underline;margin-top:4px}
.cart__empty{color:var(--grey);font-size:.88rem;text-align:center;padding:14px 0}
.cart__total{margin-top:18px;padding-top:16px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cart__total .k{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.cart__total .v{font-family:var(--anton);font-size:2rem;line-height:1}
.cart__tax{font-size:.74rem;color:var(--grey);margin-top:6px;text-align:right}
.cart__cta{padding:0 20px 20px}
.cart__usp{list-style:none;display:grid;gap:9px;padding:16px 20px;border-top:1px solid var(--line);background:var(--sand)}
.cart__usp li{font-size:.8rem;color:var(--soft);padding-left:20px;position:relative;line-height:1.4}
.cart__usp li::before{content:"✓";position:absolute;left:0;color:var(--pink-ink);font-weight:700}

.sidecard{border:1px solid var(--line);background:#fff;padding:18px 20px}
.sidecard h4,.sidecard h3{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.sidecard p{font-size:.86rem;color:var(--soft);line-height:1.6}
.sidecard a{color:var(--pink-ink);font-weight:600}

/* --- Formularfelder --- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--grey);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:.85em 1em;border:1px solid var(--line-2);background:#fff;border-radius:0;
  font-family:inherit;font-size:1rem;color:var(--ink);transition:.25s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink-ink)}
.field textarea{resize:vertical;min-height:96px}
.field .hint{font-size:.76rem;color:var(--faint);margin-top:6px}
.grid-2f{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.err{color:var(--warn);font-size:.78rem;margin-top:5px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--warn)}
.field.invalid .err{display:block}
.checkrow{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:.88rem;color:var(--soft);line-height:1.55}
.checkrow input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--pink-ink)}
.checkrow a{color:var(--pink-ink);text-decoration:underline}
.checkrow.invalid{color:var(--warn)}
.fieldset{border:1px solid var(--line);padding:22px 24px;margin-bottom:22px}
.fieldset legend{padding:0 10px;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-ink)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:.7em 1.1em;border:1px solid var(--line-2);border-radius:0;font-size:.82rem;font-weight:600;letter-spacing:.04em;transition:.25s;user-select:none;cursor:pointer}
.chip:hover{border-color:var(--pink-ink)}
.chip.sel{background:var(--pink-ink);color:#fff;border-color:var(--pink-ink)}
.chip.sm{font-size:.74rem;padding:.6em .9em}

/* Extras */
.extras{display:grid;gap:12px}
.extra{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);padding:16px 18px;background:#fff}
.extra input[type=checkbox]{width:20px;height:20px;accent-color:var(--pink-ink)}
.extra .t{font-weight:700;font-size:.95rem}
.extra .s{font-size:.82rem;color:var(--grey);display:block;margin-top:3px;line-height:1.45}
.extra .p{font-weight:700;white-space:nowrap;text-align:right}
.extra .p small{display:block;font-weight:400;color:var(--faint);font-size:.72rem}
.extra .qty{display:flex;align-items:center;gap:10px}
.extra .qty select{padding:.5em .6em;border:1px solid var(--line-2);font-family:inherit;font-size:.9rem}

/* Prüfen-Ansicht */
.review-box{border:1px solid var(--line);background:#fff;margin-bottom:20px}
.review-box h4,.review-box h3{padding:14px 20px;border-bottom:1px solid var(--line);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;align-items:center;gap:12px}
.review-box h4 button,.review-box h3 button{font-size:.7rem;letter-spacing:.1em;color:var(--pink-ink);text-decoration:underline;font-weight:700;text-transform:none}
.review-box .rows{padding:6px 20px 18px}
.review-box .rr{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.review-box .rr:last-child{border-bottom:none}
.review-box .rr .k{color:var(--grey)}
.review-box .rr .v{font-weight:700;text-align:right}
.pricetable{width:100%;border-collapse:collapse}
.pricetable td{padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--soft)}
.pricetable td:last-child{text-align:right;font-weight:700;color:var(--ink);white-space:nowrap}
.pricetable tr.sum td{border-bottom:none;border-top:2px solid var(--ink);padding-top:14px;font-family:var(--anton);font-size:1.4rem;color:var(--ink)}
.pricetable tr.sum td:first-child{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;vertical-align:middle}

.notice{background:var(--pink-tint);padding:16px 20px;font-size:.88rem;color:var(--pink-deep);line-height:1.6;margin-bottom:20px}
.notice b{font-weight:700}
.notice--warn{border-left-color:var(--warn);background:#fdf6f5;color:#7a1c17}

/* Bestätigung */
.bk-done{text-align:center;max-width:640px;margin:0 auto;padding:clamp(20px,4vw,40px) 0}
.bk-done .check{width:82px;height:82px;border:2px solid var(--pink-ink);display:grid;place-items:center;margin:0 auto 26px;animation:pop .5s var(--ease)}
.bk-done .check svg{width:36px;height:36px;color:var(--pink-ink)}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.bk-done h2{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem);line-height:.98;margin-bottom:.35em}
.bk-done .ref{display:inline-block;border:1px dashed var(--line-2);padding:12px 22px;font-family:var(--anton);font-size:1.4rem;letter-spacing:.08em;margin:.6em 0 1.2em;background:var(--sand)}
.bk-done .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:1.4em}

/* Mobile Buchungs-Leiste */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line-2);
  box-shadow:0 -14px 40px -24px rgba(0,0,0,.5);padding:12px var(--pad);display:none;align-items:center;gap:14px;justify-content:space-between}
.mobar .m{min-width:0}
.mobar .m .k{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mobar .m .v{font-family:var(--anton);font-size:1.4rem;line-height:1.1}
.mobar .btn{flex:none}
body.has-mobar{padding-bottom:86px}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:220;background:rgba(8,8,8,.95);display:flex;align-items:center;justify-content:center;padding:30px;
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
.lightbox.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .35s}
.lightbox img{max-width:92vw;max-height:80vh}
.lightbox .lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:92vw}
/* Bildzeile: „07 / 30 · RESTAURANT · Wintergarten mit Glasdach".
   Pink in einer hellen Stufe — Marken-Pink traegt auf Schwarz nur 2,9:1. */
.lightbox .lb-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 10px;color:#fff;text-align:center}
/* Mittelpunkt nur fuers Auge (aria-hidden) — Screenreader trennen ueber die
   Leerzeichen im Markup. */
.lightbox .lb-sep{color:rgba(255,255,255,.55);font-size:.9rem}
@media(max-width:640px){
  /* Am Handy steht der Text in eigener Zeile — ein Punkt am Zeilenende saehe verloren aus */
  .lightbox .lb-t{flex-basis:100%}
  .lightbox .lb-sep--2{display:none}
}
.lightbox .lb-n{font-family:var(--anton);font-size:1.05rem;letter-spacing:.04em;color:#fff}
.lightbox .lb-k{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#F0558F}
.lightbox .lb-t{font-size:.92rem;color:rgba(255,255,255,.92)}
/* Dunkle Flaeche + kraeftiger Rand: bis etwa 1100 px liegen die Knoepfe AUF dem
   Foto. Ein weisser Pfeil ohne Grund verschwand auf hellen Motiven (Buffet,
   Dessert, Wiese: 1,0–2,3:1). Auf 60 % Schwarz bleibt er selbst ueber reinem
   Weiss bei 5,3:1 (WCAG 1.4.11 verlangt 3:1). */
.lightbox .lb-close,.lightbox .lb-nav{position:absolute;color:#fff;width:52px;height:52px;display:grid;place-items:center;font-size:1.4rem;background:rgba(8,8,8,.6);border:1px solid rgba(255,255,255,.7);transition:.3s}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:#fff;color:var(--ink)}
.lightbox .lb-close{top:24px;right:24px}
.lightbox .prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox .next{right:24px;top:50%;transform:translateY(-50%)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ---------- full-bleed strip ---------- */
.fullbleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.foodstrip{position:relative;width:100%;height:clamp(220px,34vw,480px);overflow:hidden}
.foodstrip.fullbleed{margin-block:clamp(40px,6vw,80px)}
.foodstrip img{width:100%;height:100%;object-fit:cover;display:block}
.foodstrip .fs-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:64px var(--pad) 26px;background:linear-gradient(0deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.9) 34%,rgba(8,8,8,.74) 58%,rgba(8,8,8,.3) 80%,transparent);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.foodstrip .fs-cap .k{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:#fff;font-weight:600}
.foodstrip .fs-cap .t{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2rem);margin-top:4px}

/* ---------- Download-Liste ---------- */
.dl-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.dl-list a{background:#fff;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;transition:background .3s}
.dl-list a:hover{background:var(--pink-tint)}
.dl-list a .t{font-weight:600;font-size:.95rem}
.dl-list a .s{display:block;font-size:.78rem;color:var(--faint);margin-top:3px;font-weight:400}
.dl-list a .ar{color:var(--pink-ink);font-size:1.1rem;flex:none}

/* ---------- responsive ---------- */
/* 1500 statt 1400 (16.09.2026): seit „Galerie" statt „Suche" im Menue steht,
   brachen „Tisch reservieren"/„Zimmer buchen" bei 1440 px in zwei Zeilen um —
   die Unterzeile am Logo nahm genau den fehlenden Platz. */
@media(max-width:1500px){
  .brand .sub{display:none}
  .brand img{height:44px}
}
@media(max-width:1180px){
  .bk-layout{grid-template-columns:1fr}
  .bk-side{position:static;order:-1}
  .rate{grid-template-columns:1fr 160px 150px}
}
@media(max-width:1080px){
  .footer-cols{grid-template-columns:1fr 1fr}
  .social-rail{display:none}
  .facts{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .sb{grid-template-columns:1fr 1fr}
  .sb__f{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .sb__f:nth-child(2){border-right:none}
  .sb__f:nth-child(3){grid-column:1/-1;border-right:none}
  .sb__go{grid-column:1/-1;padding:18px}
  .searchbar--overlap{margin-top:-46px}
  .hero__dots{bottom:78px}
}
@media(max-width:1180px){
  .nav{position:fixed;inset:0;background:#fff;flex-direction:column;justify-content:center;gap:20px;transform:translateX(100%);transition:transform .5s var(--ease);z-index:85;overflow-y:auto;padding:90px 24px 40px}
  .nav-open .nav{transform:none}
  .nav a.navlink{color:var(--ink) !important;font-size:1.05rem;letter-spacing:.14em}
  .nav a.navlink--hot{color:var(--pink) !important}   /* auch im Burger-Menue pink */
  .nav>.btn{display:inline-flex;margin-top:12px;color:#fff;background:var(--pink);border-color:var(--pink)}
  .burger{display:flex}
  .header-cta .btn-call{display:none}
  .grid-2,.grid-3,.contact-strip{grid-template-columns:1fr;gap:32px}
  .split,.split--menu,.sec-head--split,.bk-head{grid-template-columns:1fr;gap:30px}
  .bk-head{align-items:start;gap:18px}
  .bk-head h1{white-space:normal}
  .split--media-left .split__media{order:0}
  .sec-head--flip .sh__main,.sec-head--flip .sh__aside{order:0}
  .sec-head--split{align-items:start}
  .split__media{min-height:clamp(260px,58vw,420px)}
  .split__gallery{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .split__gallery>*:first-child{grid-row:auto;grid-column:1/-1}
  .split__gallery .tile{aspect-ratio:1/1;height:auto}
  .split__gallery>*:first-child{aspect-ratio:16/10}
  .mcarousel--fill{min-height:300px}
  .grid-2 .media,.grid-2 .mcarousel{order:2}
  .rooms-grid{grid-template-columns:1fr}
  .grid-3.stack-cards{display:block;gap:0;padding-bottom:clamp(70px,24svh,200px)}
  .stack-cards .tile{
    display:block;position:sticky;top:calc(80px + var(--i,0) * 13px);
    aspect-ratio:auto;height:clamp(400px,calc(100svh - 200px),620px);
    margin-bottom:34px;background:#141414;transform:scale(var(--s,1));
    transition:opacity .9s var(--ease);box-shadow:0 -14px 44px -26px rgba(10,10,10,.6);
  }
  .stack-cards .tile:last-child{margin-bottom:0}
  .stack-cards .tile img{filter:brightness(var(--b,1))}
  .stack-cards .tile:hover img{transform:none}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure.big{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .rc__top{grid-template-columns:1fr}
  .rc__gal{min-height:0;aspect-ratio:16/9}
  .rate{grid-template-columns:1fr}
  .rate__termin{grid-row:auto;padding:10px 18px 11px;border-top:none;border-bottom:1px dashed var(--pink-line)}
  .rate__d{border-right:none;border-bottom:1px solid var(--line)}
  .rate__p{border-right:none;border-bottom:1px solid var(--line);text-align:left;flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
  .rate__p .per,.rate__p .inc{margin-top:0}
  .bk-steps .s .tx{display:none}
  .bk-steps .s{justify-content:center;padding:13px}
  .bk-steps .s.is-active .tx{display:block}
  .mobar{display:flex}
  .dl-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero__inner{padding:clamp(140px,calc(110px + 12svh),240px) var(--pad) clamp(90px,13svh,140px)}
  .hero__mark{font-size:clamp(3.2rem,17vw,5.4rem);line-height:.9}
  .searchbar--overlap{margin-top:-30px}
  .hero__kicker{margin-top:1.2em;font-size:.63rem;letter-spacing:.18em}
  .hero__dots{display:none}
  .facts{grid-template-columns:1fr}
  /* Preistabellen: auf schmalen Displays umbrechen statt überlaufen */
  .ptable th,.ptable td{padding:12px 8px;font-size:.9rem}
  .ptable td:last-child,.ptable th:last-child{white-space:normal}
  .ptable td,.ptable th{overflow-wrap:anywhere}
  .extra{grid-template-columns:auto 1fr;gap:12px}
  .extra .p{grid-column:2/-1;text-align:left}
}
@media(max-width:520px){
  /* Eine Spalte: grosse Kacheln duerfen NICHT zwei Spalten beanspruchen —
     sonst legt das Raster eine unsichtbare zweite Spalte mit Breite 0 an
     und schiebt normale Bilder hinein (gefunden 16.09.2026: Bilder mit
     0 × 0 px am Handy). */
  .gallery{grid-template-columns:1fr}
  .gallery figure.big{grid-column:auto}
  .footer-cols{grid-template-columns:1fr}
  .grid-2f{grid-template-columns:1fr}
  /* Auf schmalen Displays trägt das Logo die Wortmarke schon selbst */
  .brand .wm{display:none}
  .brand img,.header.scrolled .brand img{height:44px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.05ms !important}
  .hero__slide img{animation:none;transform:none}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media print{
  .header,.footer,.social-rail,.mobar,.bk-steps,.searchbar{display:none !important}
}

/* ============================================================
   TISCHRESERVIERUNG (Modal) + RAUMBUCHUNG
   ============================================================ */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .4s var(--ease),visibility 0s linear .4s}
/* visibility nimmt den geschlossenen Dialog aus Tabulator UND
   Screenreader-Baum – ohne das bleiben die Felder erreichbar. */
.modal.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .4s var(--ease)}
.modal__scrim{position:absolute;inset:0;background:rgba(10,10,10,.62);backdrop-filter:blur(4px)}
.modal__panel{position:relative;background:#fff;width:100%;max-width:980px;max-height:92vh;overflow:hidden;
  display:grid;grid-template-columns:.78fr 1.22fr;transform:translateY(20px);
  transition:transform .5s var(--ease);box-shadow:0 40px 120px -30px rgba(0,0,0,.6)}
.modal.open .modal__panel{transform:none}
.modal__aside{position:relative;color:#fff;padding:36px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:440px}
.modal__aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.modal__aside::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.38),rgba(10,10,10,.85));z-index:1}
.modal__aside>*{position:relative;z-index:2}
.modal__aside .amark{font-family:var(--anton);text-transform:uppercase;font-size:1.6rem;line-height:1}
.modal__aside .amark .dot{color:var(--pink)}
.modal__aside h3{font-family:var(--anton);text-transform:uppercase;font-size:1.9rem;line-height:1;margin-bottom:.55em}
.modal__aside .a-list{list-style:none;display:grid;gap:11px;font-size:.9rem;color:rgba(255,255,255,.93)}
.modal__aside .a-list li{padding-left:22px;position:relative;line-height:1.45}
.modal__aside .a-list li::before{content:"✓";position:absolute;left:0;color:var(--pink);font-weight:700}
.modal__aside .aphone{font-size:.84rem;color:rgba(255,255,255,.85)}
.modal__aside .aphone a{font-weight:700;color:#fff;text-decoration:underline}
.modal__close{position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;background:#fff;
  display:grid;place-items:center;font-size:1.1rem;color:var(--ink);transition:.3s;border:1px solid var(--line)}
.modal__close:hover{background:var(--ink);color:#fff}
.modal__main{padding:clamp(26px,3vw,44px);overflow-y:auto}
.steps{display:flex;gap:6px;margin-bottom:26px}
.steps .dot{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.steps .dot::after{content:"";position:absolute;inset:0;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.steps .dot.done::after{transform:scaleX(1)}
.step-label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;font-weight:700;color:var(--faint)}
.fstep{display:none;animation:fadein .5s var(--ease)}
.fstep.active{display:block}
.fstep .step{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1;margin:.3em 0 1em}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal-actions{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.summary-box{border:1px solid var(--line);padding:20px;display:grid;gap:10px;margin-bottom:18px;background:var(--sand)}
.summary-box .sr{display:flex;justify-content:space-between;gap:16px;font-size:.92rem;border-bottom:1px solid var(--line);padding-bottom:9px}
.summary-box .sr:last-child{border:none;padding:0}
.summary-box .sr .k{color:var(--grey);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.summary-box .sr .v{font-weight:700;text-align:right}
.confirm-ok{text-align:center;padding:10px 0}
.confirm-ok .check{width:74px;height:74px;border:2px solid var(--pink-ink);display:grid;place-items:center;margin:0 auto 22px;animation:pop .5s var(--ease)}
.confirm-ok .check svg{width:32px;height:32px;color:var(--pink-ink)}
.slotgroup{margin-bottom:14px}
.slotgroup .sg-lb{display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:8px}
.slotgroup .sg-note{font-size:.78rem;color:var(--grey);margin-top:7px;line-height:1.4}
.closed-note{border-left:3px solid var(--warn);background:#fdf6f5;padding:14px 18px;font-size:.88rem;color:#7a1c17;line-height:1.55;margin-bottom:16px}

/* ---------- Raumbuchung ---------- */
.rm-grid{display:grid;gap:18px}
.rmcard{border:1px solid var(--line);background:#fff;display:grid;grid-template-columns:280px 1fr auto;
  transition:border-color .3s,box-shadow .3s}
.rmcard.is-sel{border-color:var(--pink-ink);box-shadow:0 0 0 1px var(--pink-ink)}
/* Ausgegraute Raumkarten bleiben anklickbar – deshalb duerfen ihre
   Texte den Kontrast nicht unterschreiten (WCAG 1.4.3). Gedimmt wird
   nur das Bild, die Schrift bleibt lesbar.                         */
.rmcard.is-busy,.rmcard.is-toosmall{opacity:1}
.rmcard.is-busy .rmcard__img,.rmcard.is-toosmall .rmcard__img{opacity:.42;filter:grayscale(.5)}
.rmcard.is-busy .rmcard__b,.rmcard.is-toosmall .rmcard__b{opacity:.9}
.rmcard.is-busy .rmcard__b p,.rmcard.is-toosmall .rmcard__b p,
.rmcard.is-busy .rmcard__b .feat span,.rmcard.is-toosmall .rmcard__b .feat span{color:var(--soft)}
.rmcard__img{position:relative;overflow:hidden;background:#f2f2f2;min-height:200px}
.rmcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.rmcard:hover .rmcard__img img{transform:scale(1.05)}
.rmcard__b{padding:22px 24px;min-width:0}
.rmcard__b h3{font-family:var(--anton);text-transform:uppercase;font-size:1.5rem;line-height:1}
.rmcard__b .cap{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-ink);margin-top:7px}
.rmcard__b p{color:var(--soft);font-size:.9rem;line-height:1.6;margin:.85em 0 .9em}
.rmcard__b .feat{display:flex;flex-wrap:wrap;gap:7px}
.rmcard__b .feat span{border:1px solid var(--line-2);padding:6px 11px;font-size:.76rem;color:var(--soft)}
.rmcard__s{padding:22px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:230px}
.rmcard__s .pr{text-align:right}
.rmcard__s .pr .amt{font-family:var(--anton);font-size:1.7rem;line-height:1}
.rmcard__s .pr .sub{font-size:.74rem;color:var(--grey);margin-top:5px;line-height:1.4}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  border:1px solid var(--line-2);padding:8px 13px;align-self:flex-end}
.avail .d{width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.avail.free{border-color:var(--green-line);background:var(--green-tint);color:var(--green-deep)}
.avail.free .d{background:var(--ok)}
.avail.busy{border-color:#f0d4d2;background:#fdf6f5;color:#7a1c17}
.avail.busy .d{background:var(--warn)}
.avail.small{border-color:var(--line-2);color:var(--grey)}

/* Belegungs-Kalender */
.cal{border:1px solid var(--line);padding:16px 18px;background:#fff;max-width:340px}
.cal__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cal__h .m{font-weight:700;font-size:.92rem}
.cal__h button{width:32px;height:32px;border:1px solid var(--line-2);display:grid;place-items:center;font-size:1rem;transition:.25s}
.cal__h button:hover:not([disabled]){border-color:var(--pink-ink);background:var(--pink-tint)}
.cal__h button[disabled]{opacity:.3;cursor:not-allowed}
.cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__g .wd{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center;padding-bottom:6px}
.cal__g button{aspect-ratio:1/1;display:grid;place-items:center;font-size:.84rem;border:1px solid transparent;transition:.2s}
.cal__g button:hover:not([disabled]){border-color:var(--ink)}
.cal__g button.busy{background:#fdf6f5;color:#c0857f;text-decoration:line-through;cursor:not-allowed}
.cal__g button.sel{background:var(--pink);color:#fff;font-weight:700;border-color:var(--pink)}
.cal__g button[disabled]:not(.busy){opacity:.28;cursor:not-allowed}
.cal__lg{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.74rem;color:var(--grey)}
.cal__lg i{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.cal__lg i::before{content:"";width:10px;height:10px;background:var(--pink)}
.cal__lg i.b::before{background:#f0d4d2}

.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.opt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border:1px solid var(--line);padding:15px 17px;background:#fff;cursor:pointer;transition:.25s}
.opt:hover{border-color:var(--pink-ink)}
.opt input{width:19px;height:19px;margin-top:2px;accent-color:var(--pink-ink)}
.opt .t{font-weight:700;font-size:.93rem;display:block}
.opt .s{font-size:.8rem;color:var(--grey);display:block;margin-top:3px;line-height:1.45}
.opt .p{font-size:.82rem;font-weight:700;color:var(--pink-ink);display:block;margin-top:6px}

.estimate{border:1px solid var(--line);background:var(--sand);padding:20px 22px;margin-top:24px}
.estimate h4,.estimate h3{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.estimate .er{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;padding:8px 0;border-bottom:1px solid var(--line);color:var(--soft)}
.estimate .er:last-of-type{border-bottom:none}
.estimate .er b{color:var(--ink);white-space:nowrap}
.estimate .etot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:14px;padding-top:14px;border-top:2px solid var(--ink)}
.estimate .etot .k{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.estimate .etot .v{font-family:var(--anton);font-size:1.9rem;line-height:1}
.estimate .enote{font-size:.78rem;color:var(--grey);margin-top:10px;line-height:1.5}

@media(max-width:1080px){
  .rmcard{grid-template-columns:230px 1fr}
  .rmcard__s{grid-column:1/-1;border-left:none;border-top:1px solid var(--line);flex-direction:row;
    align-items:center;justify-content:space-between;min-width:0}
  .rmcard__s .pr{text-align:left}
  .avail{align-self:auto}
}
@media(max-width:900px){
  .modal__panel{grid-template-columns:1fr}
  .modal__aside{display:none}
  .rmcard{grid-template-columns:1fr}
  .rmcard__img{min-height:0;aspect-ratio:16/9}
  .cal{max-width:none}
}
@media(max-width:560px){
  .rmcard__s{flex-direction:column;align-items:stretch;gap:14px}
  .rmcard__s .btn{width:100%}
}

/* Zweitrangiger Button im mobilen Menü */
.nav>.btn--ghost{background:transparent !important;color:var(--ink) !important;border-color:var(--ink) !important;margin-top:18px}

/* ============================================================
   BARRIEREFREIHEIT (BFSG / EN 301 549 / WCAG 2.1 AA)
   Alles, was fuer Tastatur, Screenreader und hohe Kontraste
   noetig ist, steht gebuendelt hier – bitte nicht verteilen.
   ============================================================ */

/* ---- 1. nur fuer Screenreader (bleibt fokussierbar) ---- */
.vh{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);border:0;
}

/* ---- 2. Sprungmarke "Zum Inhalt" (WCAG 2.4.1) ---- */
.skip{
  position:absolute;top:-100px;left:var(--pad);z-index:200;
  display:inline-flex;align-items:center;
  background:var(--ink);color:#fff;
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:14px 22px;border:2px solid #fff;
  transition:top .2s var(--ease);
}
.skip:focus{top:10px}
main:focus{outline:none}

/* ---- 3. Fokus immer sichtbar, auch auf dunklem Grund (WCAG 2.4.7 / 1.4.11) ---- */
:focus-visible{
  outline:3px solid var(--pink);
  outline-offset:3px;
  border-radius:2px;
}
/* auf dunklen Flaechen zusaetzlich ein heller Ring, damit der Fokus nie verschwindet */
.header:not(.scrolled):not(.header--solid) :focus-visible,
.hero :focus-visible,.band :focus-visible,.footer :focus-visible,
.pagehero :focus-visible,.modal__aside :focus-visible,.lightbox :focus-visible,
[data-ch="dunkel"] :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 6px rgba(186,1,78,.85);
}
/* Browser ohne :focus-visible (aeltere Safari) bekommen wenigstens :focus */
.no-fv :focus{outline:3px solid var(--pink);outline-offset:3px}

/* ---- 4. Fehlerzustaende in Formularen (WCAG 3.3.1 / 3.3.3) ---- */
[aria-invalid="true"]{
  border-color:var(--warn) !important;
  background-image:none;
}
.field .err,.checkrow .err{
  display:none;margin-top:6px;
  font-size:.78rem;line-height:1.4;color:var(--warn);font-weight:600;
}
.field.invalid .err,.checkrow.invalid .err{display:block}
.field.invalid label,.field.invalid .lb{color:var(--warn)}
.formstatus{
  margin-top:14px;padding:12px 16px;
  border-left:3px solid var(--warn);background:#FDF2F1;
  font-size:.9rem;color:#7A1A14;
}
.formstatus:empty{display:none}
.formstatus--ok{border-left-color:var(--ok);background:#F0F7F2;color:#14562A}

/* ---- 5. Mindest-Klickflaeche 24x24 CSS-Pixel (WCAG 2.5.8) ---- */
.hero__dots button,.mdot,.pop .stepper button,
.lightbox button,.modal__close,[data-lb-prev],[data-lb-next]{
  min-width:44px;min-height:44px;
}
/* Trefferflaeche 44x44, sichtbar bleibt der feine Strich */
.hero__dots button,.mcarousel .mdot{
  position:relative;padding:0;background:transparent !important;
  border:0;display:inline-block;
}
.hero__dots button::before,.mcarousel .mdot::before{
  content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;
  transform:translateY(-50%);background:rgba(255,255,255,.6);transition:background .4s;
}
.hero__dots button.is-active::before,.mcarousel .mdot.is-active::before{background:#fff}
.hero__dots{gap:0}

/* ---- 6. Text bleibt lesbar, wenn Nutzer Abstaende erhoehen (WCAG 1.4.12) ---- */
.prose p,.prose li,.fcontact,.dl-list .t{overflow-wrap:break-word}

/* ---- 7. Windows-Kontrastmodus / forced-colors (WCAG 1.4.11) ---- */
@media (forced-colors:active){
  .btn,.link,.navlink,.skip{border:1px solid ButtonText;forced-color-adjust:none;color:ButtonText;background:ButtonFace}
  .btn:hover,.btn:focus{background:Highlight;color:HighlightText}
  :focus-visible{outline:3px solid Highlight;outline-offset:2px}
  .hero__dots button.is-active,.mdot.is-active{outline:2px solid Highlight}
  .dot,.bar{forced-color-adjust:none}
}

/* ---- 8. Sprachumschalter DE/EN ---- */
.langswitch{display:inline-flex;align-items:center;gap:2px;margin-left:4px}
.langswitch a{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 9px;min-height:34px;display:inline-flex;align-items:center;
  color:#fff;border:1px solid transparent;
}
.header.scrolled .langswitch a,.header--solid .langswitch a{color:var(--ink)}
.langswitch a[aria-current="true"]{border-color:currentColor}
.langswitch a:hover{color:var(--pink)}
.header:not(.scrolled):not(.header--solid) .langswitch a:hover{color:#fff;text-decoration:underline}
.langswitch .sep{opacity:.45;font-size:.66rem}

/* ---- 9. Aktuelles / News ---- */
.newsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,26px)}
.newscard{
  background:var(--paper);border:1px solid var(--line);
  padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;
}
.newscard time{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.newscard h3{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.25}
.newscard p{font-size:.94rem;color:var(--soft);line-height:1.6}
.newscard .link{margin-top:auto;padding-top:8px}
.newscard--hl{border-left:3px solid var(--pink)}

/* ---- 10. Wochenkarte (Stammessen) ---- */
.weekmenu{border-top:1px solid var(--line)}
.weekmenu__row{
  display:grid;grid-template-columns:minmax(110px,150px) 1fr auto;gap:14px 20px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.weekmenu__day{font-weight:700;letter-spacing:.04em}
.weekmenu__dish{color:var(--soft)}
.weekmenu__dish .alg{color:var(--faint);font-size:.82rem;white-space:nowrap}
.weekmenu__price{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
@media(max-width:640px){
  .weekmenu__row{grid-template-columns:1fr auto}
  .weekmenu__day{grid-column:1/-1}
}
.alglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 22px;margin-top:14px}
.alglist li{font-size:.86rem;color:var(--soft);list-style:none}
.alglist li b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- 11. Suche ---- */
.searchform{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.searchform input[type=search]{
  flex:1 1 260px;min-width:0;padding:15px 18px;font:inherit;font-size:1rem;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);border-radius:0;
}
.searchform input[type=search]:focus{border-color:var(--pink)}
.searchresults{margin-top:34px;display:grid;gap:2px}
.searchresults a{
  display:block;padding:18px 20px;background:var(--paper);border:1px solid var(--line);
}
.searchresults a:hover,.searchresults a:focus-visible{border-color:var(--pink)}
.searchresults .t{display:block;font-family:var(--serif);font-size:1.15rem;line-height:1.3}
.searchresults .s{display:block;margin-top:6px;font-size:.9rem;color:var(--soft)}
.searchresults mark{background:var(--green);color:var(--ink);padding:0 2px}

/* ---- 12. Infokasten, Hakenliste, Inline-Link (Seite „Aktuelles") ---- */
.infobox{
  background:var(--paper);border:1px solid var(--line);
  padding:clamp(20px,2.4vw,30px);
}
.infobox h3{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  margin-bottom:14px;
}
.infobox .prices{border-top:1px solid var(--line);padding-top:14px}
/* Die Wochenkarte laesst ihre Preiszeilen vom Dashboard fuellen. Dafuer
   steht ein Behaelter [data-rs-liste-slot] dazwischen — unsichtbar im
   Layout (display:contents), aber ein Kindselektor sieht ihn trotzdem.
   Deshalb ist jede Regel hier fuer BEIDE Ebenen geschrieben; ohne das
   verliert die Preiszeile lautlos ihre Ausrichtung.                     */
.infobox .prices>[data-rs-liste-slot]{display:contents}
.infobox .prices>div,
.infobox .prices>[data-rs-liste-slot]>div{
  display:flex;justify-content:space-between;gap:8px 18px;align-items:baseline;
  flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.infobox .prices>div:last-child{border-bottom:0}
.infobox .prices>div>span,
.infobox .prices>[data-rs-liste-slot]>div>span{color:var(--soft);font-size:.94rem;min-width:0;flex:1 1 auto}
/* Werte duerfen umbrechen – sonst sprengen lange Angaben wie der
   Verwendungszweck der Bankverbindung die Spalte auf Mobil.        */
.infobox .prices>div>b,
.infobox .prices>[data-rs-liste-slot]>div>b{
  font-variant-numeric:tabular-nums;min-width:0;
  overflow-wrap:anywhere;text-align:right;flex:0 1 auto;
}
.ticks{list-style:none;display:grid;gap:11px}
.ticks li{
  position:relative;padding-left:24px;color:var(--soft);font-size:.94rem;line-height:1.55;
}
.ticks li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--pink-ink);font-weight:700;
}
.ulink{text-decoration:underline;text-underline-offset:3px;color:var(--pink-ink)}
.ulink:hover{text-decoration-thickness:2px}

/* ---- 13. Rechtstexte / lange Fliesstexte ---- */
.prose h2{
  font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  margin:2.4em 0 .8em;padding-top:1.4em;border-top:1px solid var(--line);
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-family:var(--serif);font-size:1.2rem;margin:1.8em 0 .5em}
.prose ul,.prose ol{color:var(--soft);line-height:1.8}
.prose ol{padding-left:1.3em}
.prose kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  border:1px solid var(--line-2);background:var(--paper);padding:1px 6px;border-radius:3px;
}

/* ---- 14. Sehr schmale Geraete: 320 px ohne Querscrollen (WCAG 1.4.10) ---- */
@media(max-width:400px){
  .contact-actions{grid-template-columns:1fr}
  .contact-actions .btn{white-space:normal;letter-spacing:.09em;padding-inline:12px}
  .statuspill{white-space:normal;text-align:center;line-height:1.4}
  .btn{letter-spacing:.11em;padding-inline:18px}
  .btn--sm{padding-inline:14px}
}

/* ============================================================
   15. Kundenrunde 02.09.2026
   ------------------------------------------------------------
   a) navlink--hot   – „Aktuelles" faellt im Menue auf
   b) .sb__seal      – Bestpreis-Garantie an der Suchleiste
   c) .newsbar       – schmaler Aktuelles-Streifen unter dem Hero
   d) .hlpop         – schliessbares Highlight-Fenster (Startseite)
   e) .dlgroup       – nach Themen sortierte Download-Listen
   ============================================================ */

/* a) hervorgehobener Menuepunkt --------------------------------- */
/* Kundenwunsch 02.09.2026: „Aktuelles" in Pink, ohne Strich darunter.
   Der Ton haengt vom Untergrund ab – ueber dem Hero-Foto liegt der hellste
   Bildpunkt hinter dem Menuepunkt bei RGB 78/79/80. Markenpink #BA014E kaeme
   dort nur auf 1,25:1; deshalb dort ein helles Rosa mit 4,75:1 und erst auf
   dem hellen Kopf das volle Markenpink (6,19:1). Beides erfuellt WCAG AA. */
.nav a.navlink--hot{font-weight:700}
.header .nav a.navlink--hot{color:#FFAECA}
.header .nav a.navlink--hot:hover{color:#fff}
.header.scrolled .nav a.navlink--hot,.header--solid .nav a.navlink--hot{color:var(--pink)}
.header.scrolled .nav a.navlink--hot:hover,.header--solid .nav a.navlink--hot:hover{color:var(--pink-ink)}

/* b) Bestpreis-Garantie ---------------------------------------- */
.sb__seal{
  max-width:var(--container);margin:14px auto 0;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:.82rem;color:var(--soft);line-height:1.5;
}
.sb__seal b{
  font-family:var(--anton);text-transform:uppercase;letter-spacing:.06em;
  font-size:.9rem;color:var(--pink-ink);
  border:1px solid var(--pink-line);background:var(--pink-tint);
  padding:.28em .7em .34em;flex:none;
}

/* c) Aktuelles-Streifen ---------------------------------------- */
.newsbar{background:var(--pink-tint);border-block:1px solid var(--pink-line);padding:0 var(--pad);margin-top:clamp(34px,5vw,58px)}
.newsbar__in{display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;padding-block:16px}
.newsbar__k{
  font-family:var(--anton);text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--pink-ink);flex:none;
}
.newsbar__t{flex:1 1 340px;min-width:0;font-size:.92rem;color:var(--soft);line-height:1.5}
.newsbar__pdf,.newsbar__more{
  flex:none;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pink-ink);border-bottom:1px solid var(--pink-line);padding-bottom:2px;
}
.newsbar__pdf:hover,.newsbar__more:hover{border-bottom-color:var(--pink-ink)}
.newsbar__pdf .ar,.newsbar__more .ar{margin-left:5px}
@media(max-width:820px){
  .newsbar__in{gap:8px 18px;padding-block:14px}
  .newsbar__t{flex-basis:100%}
}

/* d) Highlight-Fenster ------------------------------------------ */
.hlpop{
  /* oben rechts unter der Kopfzeile: verdeckt weder die Suchleiste noch die Social-Leiste */
  position:fixed;right:64px;top:104px;z-index:150;width:min(340px,calc(100vw - 96px));
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(10,10,10,.22);
  padding:14px 20px 18px;
  opacity:0;transform:translateY(-10px);
  /* solange es nicht offen ist, darf es nichts abfangen – auch nicht, wenn der
     Tab im Hintergrund liegt und die Einblendung deshalb nie startet */
  pointer-events:none;
}
.hlpop.open{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:no-preference){
  .hlpop{transition:opacity .45s var(--ease),transform .45s var(--ease)}
}
.hlpop__x{
  /* muss ueber der Kopfleiste liegen, sonst faengt die den Klick ab */
  position:absolute;z-index:2;top:2px;right:2px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;color:var(--grey);background:none;border:0;cursor:pointer;
}
.hlpop__x:hover{color:var(--ink)}
.hlpop__bar{
  display:block;width:100%;text-align:left;background:none;border:0;padding:6px 42px 10px 0;
  cursor:pointer;font:inherit;color:inherit;position:relative;
}
.hlpop__k{
  font-family:var(--anton);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--pink-ink);display:block;
}
.hlpop__h{
  display:block;font-family:var(--anton);text-transform:uppercase;
  font-size:1.32rem;line-height:1.06;color:var(--ink);margin-top:.3em;
}
.hlpop__cv{
  position:absolute;right:0;bottom:12px;color:var(--faint);font-size:1.1rem;line-height:1;
  transition:transform .3s var(--ease);
}
/* Zeile unter der Ueberschrift – sagt, wie viele Termine drinstehen.
   Steht nur am Handy, wo die Leiste sonst nur nach einem Balken aussieht. */
.hlpop__hint{display:none}
.hlpop__bar[aria-expanded="false"] .hlpop__cv{transform:rotate(-90deg)}
.hlpop__bar[aria-expanded="false"]+.hlpop__body{display:none}
.hlpop__list{list-style:none;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.hlpop__list a{display:block;background:var(--paper);padding:11px 2px 12px;transition:background .25s}
.hlpop__list a:hover{background:var(--pink-tint)}
.hlpop__list b{display:block;font-size:.9rem;font-weight:600}
/* Nur die Beschreibungszeile selbst (direktes Kind) — innen stecken seit der
   Dashboard-Anbindung Preis-Spans, die im Satz bleiben muessen. */
.hlpop__list a>span{display:block;font-size:.78rem;color:var(--faint);margin-top:2px;line-height:1.45}
.hlpop__cta{margin-top:16px;width:100%;justify-content:center}
@media(max-width:1180px){
  .hlpop{right:20px;top:88px;width:min(340px,calc(100vw - 40px))}
}
@media(max-width:640px){
  /* Am Handy startet es als flache Leiste am unteren Rand und klappt erst auf Tippen auf.
     So bleiben Wortmarke UND Bestpreis-Siegel im ersten Bildschirm sichtbar.
     04.09.2026: die Leiste war zu unscheinbar – groessere Schrift, mehr Luft,
     eine Zeile mit der Anzahl der Termine und eine pinke Oberkante. */
  .hlpop{
    right:10px;left:10px;bottom:10px;top:auto;width:auto;
    padding:14px 16px 15px;transform:translateY(14px);
    border-top:3px solid var(--pink);
  }
  .hlpop__x{top:2px;right:2px;width:46px;height:46px;font-size:1.5rem}
  .hlpop__bar{padding:2px 40px 2px 0}
  .hlpop__k{font-size:.78rem;letter-spacing:.14em}
  .hlpop__h{font-size:1.34rem;line-height:1.04;margin-top:.22em}
  .hlpop__hint{
    display:block;margin-top:.5em;font-size:.82rem;line-height:1.3;color:var(--faint);
  }
  .hlpop__bar[aria-expanded="true"] .hlpop__hint{display:none}
  .hlpop__cv{bottom:6px;font-size:1.5rem;color:var(--pink-ink)}
  .hlpop__body{padding-top:10px}
  .hlpop__list{max-height:32vh;overflow:auto;overscroll-behavior:contain}
  .hlpop__list a{padding:9px 2px 10px}
  .hlpop__list a>span{font-size:.75rem}
  .hlpop__cta{margin-top:12px}
}
@media print{.hlpop,.newsbar{display:none !important}}

/* e) Download-Gruppen ------------------------------------------- */
.dlgroup+.dlgroup{margin-top:clamp(26px,3.4vw,40px)}
.dlgroup__h{
  font-family:var(--anton);text-transform:uppercase;letter-spacing:.1em;
  font-size:.86rem;color:var(--pink-ink);margin-bottom:12px;
}

/* Bestpreis-Siegel im Hero – muss ohne Scrollen sichtbar sein (Kundenwunsch 02.09.2026).
   Dunkle, halbtransparente Flaeche unter weisser Schrift: der Kontrast haengt damit
   nicht mehr vom Foto darunter ab (weiss auf rgba(10,10,10,.78) ueber jedem Motiv >= 12:1). */
.hero__seal{
  display:inline-flex;align-items:baseline;gap:9px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(16px,2.2vw,26px);
  background:rgba(10,10,10,.78);border:1px solid rgba(255,255,255,.45);
  padding:.62em 1.15em;color:#fff;font-size:.83rem;line-height:1.4;
}
.hero__seal .c{color:var(--green);font-weight:700}
.hero__seal b{font-family:var(--anton);text-transform:uppercase;letter-spacing:.08em;font-weight:400;font-size:.95rem}
.hero__seal .s{color:#fff;opacity:.92}
@media(max-width:560px){
  .hero__seal{font-size:.76rem;padding:.55em .9em;gap:7px}
  .hero__seal b{font-size:.86rem}
}
@media print{.hero__seal{display:none}}
/* ungerade letzte Kachel fuellt die Reihe – sonst bleibt eine graue Luecke */
.dl-list a:last-child:nth-child(odd){grid-column:1 / -1}

/* Kopfzeile zwischen 1181 und 1340 px: die Flexbox stauchte .brand, dadurch lief
   die Wortmarke in den ersten Menuepunkt. .brand darf nicht mehr schrumpfen,
   dafuer gibt die Wortmarke in diesem schmalen Bereich die Textzeile auf –
   das Logo traegt den Namen ohnehin selbst. */
.header .brand{flex:0 0 auto}
.header .nav{min-width:0}
@media(min-width:1181px) and (max-width:1340px){
  .header .brand .wm{display:none}
  /* Seit „Galerie" im Menue steht, lief der letzte Link bis 1196 px in den
     DE-Knopf (gemessen −15,5 px bei 1181). Weniger Abstand und Laufweite
     schaffen den Platz, ohne die Burger-Grenze zu verschieben. */
  .header .nav{gap:12px}
  .header .nav a.navlink{letter-spacing:.09em}
}

/* ============================================================
   16. Newsletter-Anmeldung in der Fußzeile
   Kundenwunsch 03.09.2026. Bewusst schlicht: eine Zeile, zwei Felder,
   ein Knopf. Die Bestätigungsmail (Doppel-Opt-in) läuft im Dashboard.
   ============================================================ */
.nlbar{
  display:grid;gap:14px 26px;align-items:end;
  grid-template-columns:minmax(0,1fr) auto;
  padding:26px 0 24px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.nlbar__text{min-width:0}
.kicker-nl{
  font-family:var(--anton);text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;color:var(--pink-ink);
}
.nlbar__t{
  font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.4;color:var(--ink);margin-top:.3em;max-width:34ch;
}
.nlbar__form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nlbar__f{display:block;min-width:0}
.nlbar__f input{
  width:min(240px,60vw);background:var(--paper);color:var(--ink);
  border:1px solid var(--line-2);padding:.72em .9em;font-size:.92rem;
  border-radius:0;transition:border-color .2s,box-shadow .2s;
}
.nlbar__f input:focus{
  outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 20%,transparent);
}
.nlbar__f input::placeholder{color:var(--faint)}
/* Honigtopf: für Menschen unsichtbar, Bots füllen ihn aus. */
.nlbar__topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nlbar__msg{
  grid-column:1/-1;font-size:.88rem;line-height:1.5;
  border-left:3px solid var(--line-2);padding-left:12px;color:var(--soft);
}
.nlbar__msg.is-gut{border-color:var(--ok);color:var(--ok)}
.nlbar__msg.is-fehler{border-color:var(--warn);color:var(--warn)}
.nlbar__msg.is-warte{color:var(--faint)}
.nlbar__recht{
  grid-column:1/-1;font-size:.78rem;line-height:1.6;color:var(--faint);max-width:76ch;
}
.nlbar__recht a{text-decoration:underline}
@media(max-width:820px){
  .nlbar{grid-template-columns:1fr;align-items:start}
  .nlbar__f input{width:100%}
  .nlbar__f{flex:1 1 100%}
  .nlbar__form .btn{width:100%}
}
@media print{.nlbar{display:none}}

/* ---- 17. Newsletter-Sektion (Seite „Aktuelles") -------------------
   Zwei Spalten am Rechner, gestapelt am Handy. Bewusst ruhig: Das
   Formular soll wie Teil der Seite wirken, nicht wie ein Werbebanner. */
.nlsec{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(22px,3.4vw,54px);align-items:start;
}
.nlsec__text .display{margin-top:.24em}
.nlsec__form{
  background:var(--paper,#fff);border:1px solid var(--line,rgba(0,0,0,.1));
  border-radius:var(--r-lg,18px);padding:clamp(18px,2.2vw,26px);
}
.nlsec__row{display:flex;flex-wrap:wrap;gap:10px}
.nlsec__f{display:block;flex:1 1 210px;min-width:0}
.nlsec__f input{
  width:100%;border:1px solid var(--line,rgba(0,0,0,.14));border-radius:999px;
  padding:.72em 1.05em;font:inherit;font-size:.95rem;background:#fff;color:var(--ink,#1b1a19);
}
.nlsec__f input:focus{outline:2px solid var(--pink);outline-offset:2px;border-color:transparent}
.nlsec__f input::placeholder{color:var(--faint)}
.nlsec__row .btn{flex:0 0 auto}
.nlsec__recht{margin-top:.9em;font-size:.82rem;line-height:1.6;color:var(--faint)}
.nlsec__recht a{text-decoration:underline}
.nlsec .nlbar__msg{margin-top:.9em}
@media (max-width:860px){
  .nlsec{grid-template-columns:1fr}
  .nlsec__row .btn{width:100%}
}
@media print{.nlsec{display:none}}

/* Wochenkarte: PDF zur Woche — der Absatz verschwindet ganz, solange im
   Dashboard kein PDF hinterlegt ist (sonst bliebe eine leere Luecke). */
.wk-pdf{margin-top:14px}
/* Ersatz ohne Woche online: die Telefonnummer nicht mitten in der Nummer umbrechen */
#wochenkarte-leer a[href^="tel:"]{white-space:nowrap}
.wk-pdf:has(> a[hidden]){display:none}