/* =====================================================================
   Kaffeekönig Uster – Stylesheet
   Aufbau: Schriften · Tokens · Basis · Bausteine · Sektionen · Mobile-Leiste
   Mobile first: Grundwerte gelten für 375 px, Breakpoints erweitern.
   ===================================================================== */

/* ---------- Schriften (lokal, keine Aufrufe zu Google) ---------- */
@font-face{font-family:"Newsreader";src:url("../schriften/newsreader-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("../schriften/karla-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#F3F2EF; --surface:#FAF9F7; --surface-2:#E7E5E0;
  --ink:#1E2420; --muted:#565D58;
  --primary:#1F4A3A; --primary-hover:#173A2D; --primary-ink:#FFFFFF;
  --accent:#BF9D5E; --accent-text:#76592A;
  --dark:#18221D; --dark-2:#202C26; --dark-ink:#EEECE7; --dark-muted:#A3ABA5;
  --border:#D9D6CF; --border-dark:rgba(238,236,231,.16);
  --shadow-sm:0 1px 2px rgba(24,34,29,.06),0 1px 3px rgba(24,34,29,.08);
  --shadow-md:0 4px 12px rgba(24,34,29,.08),0 12px 32px rgba(24,34,29,.08);

  --font-head:"Newsreader",Georgia,"Times New Roman",serif;
  --font-text:"Karla","Segoe UI",system-ui,sans-serif;
  --fs-h1:clamp(1.75rem,1.44rem + 1.33vw,2.625rem);
  --fs-h2:clamp(1.375rem,1.22rem + .66vw,1.75rem);
  --fs-h3:clamp(1.0625rem,1.01rem + .22vw,1.1875rem);
  --fs-lead:clamp(1rem,.95rem + .22vw,1.125rem);
  --fs-body:clamp(.9375rem,.91rem + .11vw,1rem);
  --fs-ui:clamp(.8125rem,.79rem + .11vw,.875rem);
  --fs-small:clamp(.75rem,.72rem + .11vw,.8125rem);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --section-y:clamp(2.5rem,1.88rem + 2.65vw,5rem);
  --gutter:clamp(1rem,.5rem + 2vw,2rem);
  --container:1140px;
  --radius-sm:4px; --radius:6px; --radius-lg:8px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:150ms; --t:250ms;
  --header-h:96px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:64px}
@media(min-width:900px){body{padding-bottom:0}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.07em}
h1,h2,h3{font-family:var(--font-head);font-weight:500;margin:0;text-wrap:balance;hyphens:none}
h1{font-size:var(--fs-h1);line-height:1.15;letter-spacing:-.015em}
h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.01em}
h3{font-size:var(--fs-h3);line-height:1.25;font-weight:600}
p{margin:0;max-width:65ch;text-wrap:pretty}
p+p{margin-top:.8em}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.band :focus-visible,.site-footer :focus-visible{outline-color:var(--accent)}
::selection{background:var(--primary);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s4);top:-60px;z-index:200;background:var(--primary);color:#fff;padding:var(--s3) var(--s4);border-radius:var(--radius);text-decoration:none;font-size:var(--fs-ui)}
.skip:focus{top:var(--s4)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.bg-surface{background:var(--surface)}
.bg-surface-2{background:var(--surface-2)}
.dark{background:var(--dark);color:var(--dark-ink)}
.muted{color:var(--muted)}
.dark .muted{color:var(--dark-muted)}
.lead{font-size:var(--fs-lead);line-height:1.55}
.label{display:block;font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--s3)}
.dark .label{color:var(--accent)}
.sec-head{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
@media(min-width:900px){.sec-head--split{grid-template-columns:5fr 6fr;column-gap:var(--s7);align-items:end}}
.nowrap{white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}

/* ---------- Icons (ein Set, Strich 1.6) ---------- */
.ico{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);border-radius:var(--radius);border:1px solid transparent;font-size:var(--fs-ui);font-weight:600;letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-light{background:var(--dark-ink);color:var(--primary)}
.btn-light:hover{background:#fff}
.btn-outline-light{border-color:rgba(238,236,231,.45);color:var(--dark-ink);background:transparent}
.btn-outline-light:hover{border-color:var(--dark-ink);background:rgba(238,236,231,.08)}
.btn-sm{min-height:44px;padding:0 var(--s4)}
.btn-block{width:100%}
.link{font-weight:600;color:var(--primary);font-size:var(--fs-ui)}
.link:hover{color:var(--primary-hover)}

/* =====================================================================
   HEADER (Top-Bar + Hauptleiste), verschwindet beim Scrollen
   ===================================================================== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:transform .3s ease;will-change:transform}
.site-header.is-hidden{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.site-header,.site-header.is-hidden{transition:none;transform:none;opacity:1}}
.topbar{display:none;background:var(--dark);color:var(--dark-ink);font-size:var(--fs-small)}
@media(min-width:768px){.topbar{display:block}}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:40px}
.topbar a{text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar .ico{width:14px;height:14px;color:var(--accent)}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:var(--s5)}
.topbar .status{display:inline-flex;align-items:center;gap:6px}
.topbar .hide-sm{display:none}
@media(min-width:900px){.topbar .hide-sm{display:inline-flex}}
.navbar{background:var(--surface);border-bottom:1px solid var(--border)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand__mark{width:32px;height:32px;border-radius:var(--radius-sm);flex:0 0 auto}
.brand__name{font-family:var(--font-head);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;line-height:1}
.brand__name small{display:block;font-family:var(--font-text);font-size:.75rem;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-top:3px}
.mainnav{display:none}
.mainnav ul{display:flex;align-items:center;gap:var(--s1)}
.mainnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);font-size:var(--fs-ui);font-weight:500;text-decoration:none;color:var(--ink);border-radius:var(--radius-sm);position:relative}
.mainnav a::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:9px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.mainnav a:hover::after,.mainnav a.is-active::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:var(--s2)}
.nav-actions .btn-primary{display:none}
.burger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 var(--s3);background:transparent;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:var(--fs-ui);font-weight:600}
.burger__lines{position:relative;width:18px;height:12px}
.burger__lines span{position:absolute;left:0;width:100%;height:1.6px;background:currentColor;border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.burger__lines span:nth-child(1){top:0}.burger__lines span:nth-child(2){top:5px}.burger__lines span:nth-child(3){top:10px}
.menu-open .burger__lines span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger__lines span:nth-child(2){opacity:0}
.menu-open .burger__lines span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mobilenav{display:none;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);max-height:calc(100dvh - 94px);overflow-y:auto}
.menu-open .mobilenav{display:block}
.mobilenav ul{padding:var(--s2) 0}
.mobilenav a{display:flex;align-items:center;min-height:48px;padding:0 var(--gutter);text-decoration:none;font-weight:500;border-bottom:1px solid var(--surface-2)}
.mobilenav a:hover{background:var(--bg)}
.mobilenav .mobilenav__cta{padding:var(--s4) var(--gutter) var(--s5);display:grid;gap:var(--s2)}
@media(min-width:1024px){
  .mainnav{display:block}
  .burger,.mobilenav,.menu-open .mobilenav{display:none}
}
@media(min-width:600px){.nav-actions .btn-primary{display:inline-flex}}
.header-spacer{height:var(--header-h)}

/* =====================================================================
   HERO, zweispaltig: Text auf Stein, Foto randabfallend rechts
   ===================================================================== */
.hero{background:var(--bg);position:relative;overflow:hidden}
.hero__grid{display:grid}
.hero__text{padding:var(--s7) var(--gutter) var(--s6)}
.hero h1{max-width:16ch}
.hero .lead{margin-top:var(--s4);color:var(--muted);max-width:44ch;font-size:clamp(.9375rem,.88rem + .25vw,1.0625rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.hero__facts{display:grid;gap:var(--s2);margin-top:var(--s5);font-size:var(--fs-ui);color:var(--muted)}
.hero__facts li{display:flex;align-items:center;gap:var(--s2)}
.hero__facts .ico{color:var(--primary)}
.hero__media{position:relative;aspect-ratio:16/9;max-height:36dvh;width:100%;order:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.today{position:absolute;left:var(--gutter);bottom:calc(-1*var(--s5));z-index:2;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-ui);max-width:calc(100% - 2*var(--gutter))}
.today strong{display:block;font-weight:600}
.today span{color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:#9AA39D;flex:0 0 auto}
.dot.is-open{background:#2F7A55;box-shadow:0 0 0 3px rgba(47,122,85,.18)}
.hero__after{display:none}
@media(min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(78dvh,640px);max-height:85dvh}
  .hero__text{align-self:center;padding:var(--s7) var(--s7) var(--s7) max(var(--gutter),calc((200% - var(--container))/2 + var(--gutter)));}
  .hero__media{order:0;aspect-ratio:auto;max-height:none;height:100%;border-bottom-left-radius:var(--radius-lg);overflow:hidden}
  .today{left:auto;right:var(--s5);bottom:var(--s5)}
  .hero__after{display:none}
}

/* =====================================================================
   TAGESABLAUF, Zeitstrahl mit Jetzt-Markierung (kein Kartenraster)
   ===================================================================== */
.day__intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s4)}
.timeline{position:relative;margin-top:var(--s6)}
.timeline__rail{display:none}
.tl-list{position:relative;display:grid;gap:var(--s5);padding-left:28px}
.tl-list::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--surface-2)}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--primary)}
.tl-item.is-now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(191,157,94,.25)}
.tl-time{font-size:var(--fs-ui);font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums}
.tl-item h3{margin-top:2px}
.tl-item p{margin-top:var(--s2);font-size:var(--fs-body)}
.tl-item{display:grid;grid-template-columns:minmax(0,1fr) 88px;column-gap:var(--s4);align-items:start}
.tl-item>*{grid-column:1}
.tl-item figure{grid-column:2;grid-row:1/span 3;margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--surface-2)}
.tl-item figure img{width:100%;height:100%;object-fit:cover}
.now-badge{display:none;margin-left:var(--s2);font-size:var(--fs-small);font-weight:600;color:var(--primary);background:#E3ECE7;border-radius:var(--radius-sm);padding:1px 6px;vertical-align:1px}
.tl-item.is-now .now-badge{display:inline-block}
.tl-status{font-size:var(--fs-ui);color:var(--muted);display:flex;align-items:center;gap:var(--s2)}
@media(min-width:900px){
  .timeline__rail{display:block;position:relative;height:40px;margin-bottom:var(--s5)}
  .timeline__rail::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--surface-2)}
  .rail-hour{position:absolute;top:26px;font-size:var(--fs-small);color:var(--muted);transform:translateX(-50%);font-variant-numeric:tabular-nums}
  .rail-seg{position:absolute;top:17px;height:6px;border-radius:3px;background:var(--primary);opacity:.85}
  .rail-seg.bar{background:var(--accent-text)}
  .rail-now{position:absolute;top:6px;width:2px;height:28px;background:var(--accent);transform:translateX(-1px);display:none}
  .rail-now::after{content:"Jetzt";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:var(--fs-small);font-weight:600;color:var(--accent-text);white-space:nowrap}
  .rail-now.is-visible{display:block}
  .tl-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);padding-left:0;align-items:start}
  .tl-list::before,.tl-item::before{display:none}
  /* versetzte Bildflächen: 2. und 4. Eintrag tiefer, Bildformate wechseln */
  .tl-item:nth-child(2),.tl-item:nth-child(4){margin-top:var(--s7)}
  .tl-item figure{order:-1;margin:0 0 var(--s4);aspect-ratio:4/5}
  .tl-item:nth-child(2) figure,.tl-item:nth-child(4) figure{aspect-ratio:1/1}
  .tl-item{display:flex;flex-direction:column}
}

/* =====================================================================
   KARTE (dunkle Fläche, Tabs nach Tageszeit)
   ===================================================================== */
.menu-tabs{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gutter)) var(--s5);padding:0 var(--gutter);border-bottom:1px solid var(--border-dark)}
.menu-tabs::-webkit-scrollbar{display:none}
@media(max-width:899px){.menu-tabs{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:48px}}
.menu-tab{flex:0 0 auto;min-height:44px;padding:0 var(--s4);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--dark-muted);font-size:var(--fs-ui);font-weight:600;cursor:pointer;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.menu-tab:hover{color:var(--dark-ink)}
.menu-tab[aria-selected="true"]{color:var(--dark-ink);border-bottom-color:var(--accent)}
.menu-panel[hidden]{display:none}
.menu-panel__note{font-size:var(--fs-ui);color:var(--dark-muted);margin-bottom:var(--s4)}
.dish-list{display:grid;column-gap:var(--s7)}
.dish{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--border-dark)}
.dish__txt{flex:1 1 auto;min-width:0}
.dish__name{font-weight:600}
.dish__desc{display:block;font-size:var(--fs-ui);color:var(--dark-muted);margin-top:2px}
.dish__price{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}
.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4);margin-top:var(--s6);font-size:var(--fs-small);color:var(--dark-muted)}
.menu-layout{display:grid;gap:var(--s6)}
.menu-layout>*{min-width:0}
.menu-photo{border-radius:var(--radius-lg);overflow:hidden;display:none}
.menu-photo img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .menu-tabs{margin-inline:0;padding-inline:0}
  .dish-list{grid-template-columns:1fr 1fr}
  .menu-layout{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7)}
  .menu-photo{display:block;aspect-ratio:3/4;align-self:start;position:sticky;top:120px}
}

/* ---------- CTA-Band ---------- */
.band{background:var(--primary);color:var(--primary-ink);padding-block:clamp(2.5rem,2.2rem + 1.3vw,3.5rem)}
@media(max-width:899px){.band__actions .btn-light{display:none}}
.band .container{display:grid;gap:var(--s4);align-items:center}
.band h2{font-size:var(--fs-h2)}
.band p{color:#D5E0DA;margin-top:var(--s1);font-size:var(--fs-body)}
.band__actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media(min-width:900px){.band .container{grid-template-columns:1fr auto;gap:var(--s7)}}

/* =====================================================================
   RÖSTEREI & TEAM, versetzte Bilder
   ===================================================================== */
.roast{display:grid;gap:var(--s6)}
.roast__media{position:relative;display:grid;grid-template-columns:repeat(6,1fr)}
.roast__media figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2)}
.roast__media img{width:100%;height:100%;object-fit:cover}
.roast__a{grid-column:1/6;grid-row:1;aspect-ratio:4/5}
.roast__b{grid-column:4/7;grid-row:1;align-self:end;aspect-ratio:1/1;margin-bottom:calc(-1*var(--s7)) !important;box-shadow:var(--shadow-md);border:4px solid var(--bg)}
.roast__text .lead{margin-top:var(--s3)}
.team{margin-top:var(--s6);display:grid;gap:var(--s4)}
.team li{display:grid;grid-template-columns:48px 1fr;gap:var(--s3);align-items:start}
.team__initial{width:48px;height:48px;border-radius:50%;background:var(--surface-2);color:var(--primary);display:grid;place-items:center;font-family:var(--font-head);font-weight:600;font-size:1.125rem}
.team strong{display:block;font-weight:600}
.team span{font-size:var(--fs-ui);color:var(--accent-text);font-weight:600}
.team p{font-size:var(--fs-ui);margin-top:2px;color:var(--muted)}
.roast-facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);font-size:var(--fs-ui)}
.roast-facts li{display:flex;align-items:center;gap:6px}
.roast-facts .ico{color:var(--primary)}
@media(min-width:900px){
  .roast{grid-template-columns:5fr 6fr;gap:var(--s8);align-items:center}
  .roast__media{order:2}
}

/* =====================================================================
   GALERIE, asymmetrisch (Desktop) / Wischstreifen (Mobil)
   ===================================================================== */
.gallery{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) var(--s2);scrollbar-width:thin}
.gallery figure{flex:0 0 72%;margin:0;scroll-snap-align:start;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);aspect-ratio:1/1}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s5) var(--s4) var(--s3);font-size:var(--fs-small);color:#fff;background:linear-gradient(to top,rgba(24,34,29,.88) 0%,rgba(24,34,29,.6) 55%,rgba(24,34,29,0));text-shadow:0 1px 2px rgba(0,0,0,.5)}
.gallery-hint{font-size:var(--fs-small);color:var(--muted);margin-top:var(--s2)}
@media(min-width:900px){
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;overflow:visible;margin:0;padding:0}
  .gallery figure{aspect-ratio:auto}
  .gallery figure:nth-child(1){grid-column:span 2;grid-row:span 2}
  .gallery figure:nth-child(4){grid-column:span 2}
  .gallery figure:hover img{transform:scale(1.03)}
  .gallery-hint{display:none}
}

/* =====================================================================
   GRUPPEN & ANLÄSSE, Preisliste neben Foto
   ===================================================================== */
.groups{display:grid;gap:var(--s6)}
.groups__photo{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/2;background:var(--surface-2)}
.groups__photo img{width:100%;height:100%;object-fit:cover}
.offer{display:grid;grid-template-columns:1fr;gap:var(--s1) var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--border)}
.offer:first-child{border-top:1px solid var(--border)}
.offer h3{font-size:var(--fs-h3)}
.offer__price{font-weight:600;color:var(--primary);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:var(--fs-ui);align-self:baseline}
.offer p{grid-column:1/-1;font-size:var(--fs-ui);color:var(--muted)}
.offer__meta{grid-column:1/-1;font-size:var(--fs-small);color:var(--accent-text);font-weight:600}
.groups__foot{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.groups__foot small{font-size:var(--fs-small);color:var(--muted)}
.room-note{margin-top:var(--s4);background:var(--surface);border-radius:var(--radius-lg);padding:var(--s4);font-size:var(--fs-ui);box-shadow:var(--shadow-sm)}
.room-note strong{display:block;font-family:var(--font-head);font-size:var(--fs-h3);font-weight:600;margin-bottom:var(--s1)}
@media(min-width:900px){
  .groups{grid-template-columns:6fr 5fr;gap:var(--s8);align-items:start}
  .groups__photo{aspect-ratio:4/5;position:sticky;top:120px}
}

/* =====================================================================
   RESERVATION, mehrstufiges Formular
   ===================================================================== */
.reserve{display:grid;gap:var(--s6)}
.form-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--s5) var(--s4)}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s5);counter-reset:none}
.progress li{font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.progress li::before{content:"";display:block;height:4px;border-radius:2px;background:var(--surface-2);margin-bottom:var(--s2);transition:background-color var(--t) var(--ease)}
.progress li.is-done::before,.progress li.is-current::before{background:var(--primary)}
.progress li.is-current{color:var(--ink)}
.step[hidden]{display:none}
.step h3{margin-bottom:var(--s4)}
.field{display:grid;gap:6px;margin-bottom:var(--s4)}
.field label,.field legend{font-size:var(--fs-ui);font-weight:600;padding:0}
.field .req{color:var(--accent-text)}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:44px;padding:10px 12px;background:#fff;border:1px solid #B9B5AC;border-radius:var(--radius-sm);font-size:16px;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.field textarea{min-height:88px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.field .hint{font-size:var(--fs-small);color:var(--muted)}
.field .error{font-size:var(--fs-small);color:#A1321F;font-weight:600;display:none}
.field.has-error input,.field.has-error select{border-color:#A1321F}
.field.has-error .error{display:block}
fieldset.field{border:0;margin:0 0 var(--s4);padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid #B9B5AC;border-radius:var(--radius-sm);font-size:var(--fs-ui);background:#fff;transition:all var(--t-fast) var(--ease)}
.chip input:checked+span{background:var(--primary);border-color:var(--primary);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.chip input:disabled+span{opacity:.4;text-decoration:line-through}
.stepper{display:inline-flex;align-items:center;border:1px solid #B9B5AC;border-radius:var(--radius-sm);background:#fff;width:max-content}
.stepper button{width:44px;height:44px;border:0;background:none;font-size:1.25rem;cursor:pointer;color:var(--primary)}
.stepper button:hover{background:var(--bg)}
.stepper output{min-width:48px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.form-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5)}
.form-nav .btn-primary{flex:1 1 auto}
@media(min-width:600px){.form-nav .btn-primary{flex:0 0 auto}}
.btn-back{background:none;border:0;min-height:44px;padding:0 var(--s2);color:var(--muted);font-weight:600;font-size:var(--fs-ui);cursor:pointer;text-decoration:underline}
.summary{background:var(--bg);border-radius:var(--radius);padding:var(--s4);display:grid;gap:var(--s2);font-size:var(--fs-ui);margin-bottom:var(--s4)}
.summary div{display:flex;justify-content:space-between;gap:var(--s3)}
.summary dt{color:var(--muted)} .summary dd{margin:0;font-weight:600;text-align:right}
.check{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--fs-ui)}
.check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--primary)}
.form-note{font-size:var(--fs-small);color:var(--muted);margin-top:var(--s3)}
.success{text-align:left}
.success[hidden]{display:none}
.success__icon{width:44px;height:44px;border-radius:50%;background:#E3ECE7;color:var(--primary);display:grid;place-items:center;margin-bottom:var(--s4)}
.success__icon .ico{width:22px;height:22px}
.success p{margin-top:var(--s3)}
.success .hero__actions{margin-top:var(--s5)}
.alt-list{display:grid;gap:var(--s3)}
.alt{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);text-decoration:none;transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
a.alt:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.alt__ico{width:40px;height:40px;border-radius:var(--radius);background:#E3ECE7;color:var(--primary);display:grid;place-items:center;flex:0 0 auto}
.alt strong{display:block;font-weight:600}
.alt span{font-size:var(--fs-ui);color:var(--muted)}
.callback{padding:var(--s4);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.callback h3{margin-bottom:var(--s3)}
.callback .field{margin-bottom:var(--s3)}
.trust{display:grid;gap:var(--s2);margin-top:var(--s2);font-size:var(--fs-ui)}
.trust li{display:flex;gap:var(--s2);align-items:flex-start}
.trust .ico{color:var(--primary);margin-top:3px}
@media(min-width:900px){
  .reserve{grid-template-columns:7fr 4fr;gap:var(--s7);align-items:start}
  .form-card{padding:var(--s6)}
}

/* =====================================================================
   GUT ZU WISSEN, Akkordeon
   ===================================================================== */
.faq-wrap{display:grid;gap:var(--s5)}
.faq details{border-bottom:1px solid var(--border)}
.faq details:first-child{border-top:1px solid var(--border)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:56px;padding:var(--s3) 0;cursor:pointer;list-style:none;font-weight:600;font-size:var(--fs-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--primary)}
.faq .pm{position:relative;width:14px;height:14px;flex:0 0 auto}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--accent-text);transition:transform var(--t) var(--ease)}
.faq .pm::before{left:0;top:6px;width:14px;height:2px}
.faq .pm::after{left:6px;top:0;width:2px;height:14px}
.faq details[open] .pm::after{transform:scaleY(0)}
.faq details p{padding:0 0 var(--s4);color:var(--muted)}
@media(min-width:900px){.faq-wrap{grid-template-columns:4fr 7fr;gap:var(--s8)}}

/* =====================================================================
   ANFAHRT & ÖFFNUNGSZEITEN
   ===================================================================== */
.visit{display:grid;gap:var(--s6)}
.hours{width:100%;border-collapse:collapse;font-size:var(--fs-ui);margin-top:var(--s3)}
.hours th,.hours td{text-align:left;padding:10px var(--s2);border-bottom:1px solid var(--border);font-weight:400}
.hours th{font-weight:600}
.hours td{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.is-today{background:#E3ECE7}
.hours tr.is-today th::after{content:" · heute";font-weight:400;color:var(--primary)}
.visit dl{display:grid;gap:var(--s3);margin:var(--s5) 0 0;font-size:var(--fs-ui)}
.visit dt{font-weight:600}
.visit dd{margin:2px 0 0;color:var(--muted)}
.map{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);aspect-ratio:4/3;display:grid;place-items:center}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map__consent{position:relative;max-width:34ch;padding:var(--s5);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin:var(--s4);text-align:center;font-size:var(--fs-ui)}
.map__consent strong{display:block;font-family:var(--font-head);font-size:var(--fs-h3);margin-bottom:var(--s2)}
.map__consent .btn{margin-top:var(--s4)}
.map__consent p{margin-inline:auto;color:var(--muted)}
.map__svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.visit__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
@media(min-width:900px){.visit{grid-template-columns:5fr 7fr;gap:var(--s7);align-items:start}.map{aspect-ratio:auto;min-height:440px}}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--dark);color:var(--dark-ink);font-size:var(--fs-ui)}
.footer-cta{background:var(--dark-2)}
.footer-cta .container{display:grid;gap:var(--s4);padding-block:var(--s6);align-items:center}
.footer-cta p{font-family:var(--font-head);font-size:var(--fs-h3);font-weight:500;max-width:48ch}
@media(min-width:900px){.footer-cta .container{grid-template-columns:1fr auto}}
.footer-cols{display:grid;gap:var(--s6);padding-block:var(--s7)}
.footer-cols h2{font-family:var(--font-text);font-size:var(--fs-ui);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s3)}
.footer-cols p,.footer-cols li{color:var(--dark-muted)}
.footer-cols li+li{margin-top:0}
.footer-cols a{text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.footer-cols a:hover{color:var(--dark-ink);text-decoration:underline}
.footer-brand .brand__name{color:var(--dark-ink)}
.footer-brand p{margin-top:var(--s3)}
.footer-pay{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.footer-pay span{font-size:var(--fs-small);border:1px solid var(--border-dark);border-radius:var(--radius-sm);padding:2px 8px;color:var(--dark-ink)}
.footer-bottom{border-top:1px solid var(--border-dark)}
.footer-bottom .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s5);padding-block:var(--s4);font-size:var(--fs-small);color:var(--dark-muted)}
.footer-bottom a{color:var(--dark-ink);min-height:44px;display:inline-flex;align-items:center}
.footer-bottom nav{display:flex;gap:var(--s4)}
@media(min-width:700px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* =====================================================================
   MOBILE-LEISTE unten (immer sichtbar, nur bis 899 px)
   ===================================================================== */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s2);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(24,34,29,.08)}
.mobilebar .btn{min-height:44px}
@media(min-width:900px){.mobilebar{display:none}}

/* ---------- Unterseiten (Impressum, Datenschutz, 404) ---------- */
.legal{padding-block:var(--section-y)}
.legal h1{margin-bottom:var(--s5)}
.legal h2{margin:var(--s6) 0 var(--s3);font-size:var(--fs-h3);font-weight:600}
.legal p,.legal li{color:var(--ink)}
.legal ul{list-style:disc;padding-left:1.2em}
.legal .back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-bottom:var(--s4)}

/* ---------- Einblenden (nur mit JS, nie unsichtbar ohne JS) ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media(min-width:600px){.offer{grid-template-columns:1fr auto}}
@media(min-width:900px){.tl-item h3{min-height:2.5em}.roast__text{padding-top:var(--s5)}}