/* ==========================================================================
   GROSSARTIG — Café & Bistro, Döbriach am Millstätter See
   Entwurf: Karibu Studio · Überarbeitung September 2026
   Farbwelt: Logo-Tiefblau, Papierton, Eichenholz, Terrassen-Grün,
   Orange vom Leuchtschild (für Feiern & Catering als Akzent).
   ========================================================================== */

/* ---------- Schriften (lokal eingebunden, keine Verbindung zu Google) ---------- */
@font-face{font-family:"Oswald";src:url(../fonts/oswald.woff2) format("woff2");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url(../fonts/karla.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url(../fonts/karla-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Yellowtail";src:url(../fonts/yellowtail.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:        #1E3145;   /* Logo-Tiefblau, direkt aus dem Logo gemessen */
  --ink-deep:   #16263A;
  --ink-soft:   #34485D;
  --paper:      #F3EFE6;
  --paper-hi:   #FBF9F4;
  --sand:       #E8E1D3;
  --oak:        #B98C57;
  --oak-soft:   #D8C3A2;
  --moss:       #5F6B4C;
  --ember:      #C4561F;
  --ember-deep: #A94816;
  --muted:      #6B6558;
  --line:       #D8CFBD;
  --line-soft:  #E5DDCE;

  --display: "Oswald", "Arial Narrow", sans-serif;
  --script:  "Yellowtail", "Brush Script MT", cursive;
  --body:    "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1320px;
  --header-h: 84px;
  --gutter: clamp(10px, 1.1vw, 16px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--paper); padding:.8rem 1rem}
.skip:focus{left:1rem; top:1rem}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:600; margin:0; line-height:1;
  text-transform:uppercase; letter-spacing:.01em; text-wrap:balance}
h1{font-size:clamp(2.6rem, 1.3rem + 4.4vw, 5.4rem); font-weight:700}
h2{font-size:clamp(2.1rem, 1.25rem + 3.3vw, 4rem); font-weight:650}
h3{font-size:clamp(1.25rem, 1.05rem + .8vw, 1.7rem); font-weight:600}
h4{font-size:1rem; letter-spacing:.09em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.script{font-family:var(--script); text-transform:none; letter-spacing:0; font-weight:400; line-height:1.15}
.lead{font-size:clamp(1.06rem,1rem + .4vw,1.26rem); line-height:1.62; color:var(--ink-soft); max-width:54ch}
.small{font-size:.86rem}
.muted{color:var(--muted)}

.kicker{
  font-family:var(--display); text-transform:uppercase; font-weight:500;
  font-size:.76rem; letter-spacing:.26em; color:var(--oak);
  margin:0 0 1.3rem; display:block;
}
.kicker--light{color:var(--oak-soft)}
.kicker--ember{color:var(--ember)}
/* Alt-Klasse aus dem ersten Entwurf */
.eyebrow{font-family:var(--display); text-transform:uppercase; font-weight:500; font-size:.76rem; letter-spacing:.26em; color:var(--oak); margin:0 0 1.3rem}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:clamp(4.5rem,3rem + 7vw,9.5rem)}
.sec-tight{padding-block:clamp(3rem,2.4rem + 3vw,5.5rem)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6.5rem); align-items:center}
.split.rev > :first-child{order:2}
.split-media{position:relative}
.split-media img{width:100%}
.band-dark{background:var(--ink); color:var(--paper)}
.band-dark .lead{color:rgba(243,239,230,.8)}
.band-sand{background:var(--sand)}

/* ---------- Buttons & Links ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper-hi); --bd:var(--ink); --hbg:var(--ink-deep); --hfg:var(--paper-hi);
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  font-family:var(--display); text-transform:uppercase; font-weight:500;
  font-size:.8rem; letter-spacing:.16em; line-height:1;
  padding:1.05rem 1.55rem; border:1px solid var(--bd); border-radius:999px;
  background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer;
  transition:color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--hbg);
  transform:translateY(101%); border-radius:inherit; transition:transform .5s var(--ease-out)}
.btn:hover{color:var(--hfg); border-color:var(--hbg)}
.btn:hover::before{transform:none}
.btn .arw{display:inline-block; transition:transform .45s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:rgba(30,49,69,.35); --hbg:var(--ink); --hfg:var(--paper-hi)}
.btn--ember{--bg:var(--ember); --fg:#fff; --bd:var(--ember); --hbg:var(--ember-deep); --hfg:#fff}
.btn--light{--bg:var(--paper-hi); --fg:var(--ink); --bd:var(--paper-hi); --hbg:var(--oak-soft); --hfg:var(--ink)}
.btn--outline-light{--bg:transparent; --fg:var(--paper-hi); --bd:rgba(243,239,230,.4); --hbg:var(--paper-hi); --hfg:var(--ink)}

.link-u{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.15em;
  font-size:.8rem; font-weight:500; text-decoration:none; display:inline-flex; gap:.6rem; align-items:center;
  padding-bottom:.35rem; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .5s var(--ease-out);
}
.link-u::after{content:"→"; transition:transform .45s var(--ease-out)}
.link-u:hover{background-size:0 1px; background-position:100% 100%}
.link-u:hover::after{transform:translateX(4px)}

/* ---------- Header ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:80; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:0 var(--pad); background:var(--paper);
  transition:height .45s var(--ease), box-shadow .45s var(--ease), transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.site-head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out)}
.site-head.scrolled{height:68px}
.site-head.scrolled::after{transform:none}
.brand{display:flex; align-items:center; gap:.85rem; text-decoration:none; flex-shrink:0; z-index:90; position:relative; padding-block:6px}
.brand-mark{position:relative; display:block; flex:none; width:46px; height:46px; transition:width .45s var(--ease), height .45s var(--ease)}
.brand-mark img{position:absolute; inset:0; width:100%; height:100%; transition:opacity .3s var(--ease)}
.site-head.scrolled .brand-mark{width:40px; height:40px}
.brand .mk-light{opacity:0}
.brand-txt{font-family:var(--display); text-transform:uppercase; font-weight:600;
  letter-spacing:.22em; font-size:.9rem; line-height:1; transition:color .3s}
.brand-txt span{display:block; font-family:var(--script); text-transform:none;
  letter-spacing:0; font-size:1.02rem; color:var(--oak); margin-top:.18rem; font-weight:400}
body.menu-open .brand .mk-dark{opacity:0}
body.menu-open .brand .mk-light{opacity:1}
body.menu-open .site-head{background:transparent; box-shadow:none}
body.menu-open .site-head::after{transform:scaleX(0)}
body.menu-open .brand-txt{color:var(--paper)}
body.menu-open .burger{border-color:rgba(243,239,230,.4)}
body.menu-open .burger span{background:var(--paper)}

.nav{display:flex; align-items:center; gap:clamp(1.2rem,2.2vw,2.3rem)}
.nav a{
  font-family:var(--display); text-transform:uppercase; font-weight:500;
  font-size:.78rem; letter-spacing:.16em; text-decoration:none; position:relative; padding-block:.4rem;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav a[aria-current="page"]{color:var(--oak)}
.head-cta .btn{padding:.85rem 1.2rem; font-size:.74rem; letter-spacing:.14em}
.head-cta .btn[aria-current="page"]{--bg:var(--ember-deep)}
.spark{width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}

.burger{display:none; z-index:90; width:46px; height:46px; border:1px solid var(--line); border-radius:50%;
  background:transparent; cursor:pointer; padding:0; position:relative}
.burger span{position:absolute; left:13px; width:18px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .25s}
.burger span:nth-child(1){top:17px} .burger span:nth-child(2){top:22.5px} .burger span:nth-child(3){top:28px}
body.menu-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobile-nav{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  padding:6rem var(--pad) 2.5rem; overflow-y:auto;
  clip-path:circle(0% at calc(100% - var(--pad) - 23px) calc(var(--header-h) / 2));
  transition:clip-path .7s var(--ease-out); pointer-events:none; visibility:hidden;
}
body.menu-open .mobile-nav{clip-path:circle(150% at calc(100% - var(--pad) - 23px) calc(var(--header-h) / 2)); pointer-events:auto; visibility:visible}
.mobile-nav > a{font-family:var(--display); text-transform:uppercase; font-size:clamp(1.7rem,7vw,2.3rem); font-weight:500;
  letter-spacing:.02em; text-decoration:none; padding-block:.5rem; border-bottom:1px solid rgba(243,239,230,.12);
  opacity:0; transform:translateY(18px); transition:opacity .45s var(--ease), transform .55s var(--ease-out)}
.mobile-nav > a.mn-event{color:#F0A477; border-bottom:0; margin-top:.4rem}
body.menu-open .mobile-nav > a{opacity:1; transform:none; transition-delay:calc(.18s + var(--i,0)*.05s)}
.mobile-nav .mn-foot{margin-top:2rem; font-size:.9rem; color:rgba(243,239,230,.65); line-height:1.9}
.mobile-nav .mn-foot a{text-decoration:none}

/* ==========================================================================
   OPENING — Logo-Intro, das sich beim Scrollen zum Hero öffnet
   --q (0 → 1) wird per JS gesetzt. Ohne JS / reduzierte Bewegung: Endzustand.
   ========================================================================== */
.opening{--q:1; --top:calc(var(--header-h)); position:relative; background:var(--paper)}
.op-pin{position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden}
.opening.is-live{height:250vh; height:250svh}
.opening.is-live .op-pin{position:sticky; top:0}

.opening{--w:1}
.op-media{
  position:absolute; inset:0; overflow:hidden; background:var(--sand);
  clip-path:inset(
    calc((1 - var(--w)) * 50% + var(--w) * var(--top))
    calc((1 - var(--w)) * 50% + var(--w) * var(--gutter))
    calc((1 - var(--w)) * 50% + var(--w) * var(--gutter))
    calc((1 - var(--w)) * 50% + var(--w) * var(--gutter))
    round calc((1 - var(--w)) * 40vw + var(--w) * 6px));
  will-change:clip-path;
}
.op-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 58%;
  transform:scale(calc(1.3 - var(--w) * .3)); transform-origin:50% 60%; will-change:transform}
.op-media::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,24,36,.84) 0%, rgba(14,24,36,.6) 30%, rgba(14,24,36,.2) 58%, rgba(14,24,36,0) 74%),
    linear-gradient(0deg, rgba(14,24,36,.6) 0%, rgba(14,24,36,0) 52%);
  opacity:var(--w); }

.op-logo{
  position:absolute; left:50%; top:50%; z-index:3; width:min(78vw, 560px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(1rem,2.6vh,1.6rem);
  color:var(--ink); pointer-events:none;
  transform:translate(-50%, calc(-50% - var(--q) * 18vh)) scale(calc(1 - var(--q) * .35));
  opacity:calc(1 - var(--q) * 2.6); filter:blur(calc(var(--q) * 10px));
}
.op-signet{width:clamp(92px, 16vh, 150px); height:auto; overflow:visible}
.op-wort{width:100%; height:auto}
.op-tag{font-family:var(--display); text-transform:uppercase; letter-spacing:.42em; font-size:.72rem; color:var(--muted); padding-left:.42em}

/* Einlauf-Animation des Logos */
.op-ringpath{stroke-dasharray:1; stroke-dashoffset:1}
.op-gg{opacity:0; transform:scale(.86); transform-origin:323px 96px}
.op-wort{clip-path:inset(0 0 100% 0); transform:translateY(18px)}
.op-tag{opacity:0; letter-spacing:.7em}
.opening.is-ready .op-ringpath{stroke-dashoffset:0; transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1) .15s}
.opening.is-ready .op-gg{opacity:1; transform:none; transition:opacity .9s var(--ease) .75s, transform 1.1s var(--ease-out) .75s}
.opening.is-ready .op-wort{clip-path:inset(0 0 0 0); transform:none; transition:clip-path 1.1s var(--ease-out) 1.05s, transform 1.1s var(--ease-out) 1.05s}
.opening.is-ready .op-tag{opacity:1; letter-spacing:.42em; transition:opacity 1s var(--ease) 1.6s, letter-spacing 1.4s var(--ease-out) 1.6s}

.op-hint{position:absolute; left:50%; bottom:clamp(1.4rem,4.5vh,2.6rem); transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.3em; font-size:.66rem; color:var(--muted);
  opacity:0; transition:opacity .8s var(--ease) 2s}
.opening.is-ready .op-hint{opacity:1}
.opening.is-ready.is-moved .op-hint{opacity:0; transition:opacity .35s var(--ease) 0s}
.op-hint i{display:block; width:1px; height:46px; background:var(--line); position:relative; overflow:hidden}
.op-hint i::after{content:""; position:absolute; left:0; top:0; width:1px; height:100%; background:var(--ink);
  animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* Hero-Text: liegt direkt auf dem Bild */
.hero-card{
  position:absolute; z-index:4; left:var(--gutter); bottom:var(--gutter);
  width:min(680px, 56vw); background:none;
  padding:0 2rem clamp(2.2rem,5vh,4rem) calc(var(--pad) - var(--gutter));
}
.js .hero-card{opacity:0; visibility:hidden}

.js .hero-card > *{opacity:0; transform:translateY(24px)}
.js .opening.is-open .hero-card{opacity:1; visibility:visible}
.js .opening.is-open .hero-card > *{opacity:1; transform:none; transition:opacity .8s var(--ease), transform 1s var(--ease-out)}
.opening.is-open .hero-card > :nth-child(2){transition-delay:.08s}
.opening.is-open .hero-card > :nth-child(3){transition-delay:.16s}
.opening.is-open .hero-card > :nth-child(4){transition-delay:.24s}
.hc-script{display:block; font-size:clamp(1.6rem,1rem + 1.7vw,2.5rem); color:#F6B084; margin-bottom:.3rem; text-shadow:0 2px 20px rgba(10,18,28,.4)}
.hero-card h1{font-size:clamp(2.5rem, 1.1rem + 3.6vw, 4.9rem); font-weight:700; color:#fff; text-shadow:0 2px 30px rgba(10,18,28,.35)}
.hero-card h1 .l2{display:block; color:#fff}
.hc-lead{margin:1.2rem 0 0; color:rgba(255,255,255,.9); max-width:40ch; font-size:clamp(1rem,.96rem + .3vw,1.16rem); text-shadow:0 1px 16px rgba(10,18,28,.45)}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem}

.status{
  display:inline-flex; align-items:center; gap:.7rem;
  border-radius:999px; background:var(--paper-hi);
  padding:.7rem 1.15rem; font-size:.86rem; line-height:1.2;
}
.status .dot{width:8px; height:8px; border-radius:50%; background:#5E8A4F; flex:none; box-shadow:0 0 0 4px rgba(94,138,79,.2)}
.status.closed .dot{background:var(--ember); box-shadow:0 0 0 4px rgba(196,86,31,.18)}
.status b{font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:600}
.op-status{position:absolute; z-index:4; right:calc(var(--gutter) + clamp(1rem,2vw,1.6rem)); top:calc(var(--top) + clamp(1rem,2vw,1.6rem));
  box-shadow:0 10px 30px -18px rgba(22,38,58,.55); transition:opacity .6s var(--ease), transform .8s var(--ease-out)}
.js .op-status{opacity:0; transform:translateY(-8px)}
.js .opening.is-open .op-status{opacity:1; transform:none; transition-delay:.35s}

/* Kopfzeile auf der Startseite erst nach dem Intro */
.home.intro-live .site-head{opacity:0; transform:translateY(-100%); pointer-events:none}
.home.intro-live.head-in .site-head{opacity:1; transform:none; pointer-events:auto}


/* ---------- Wochenkarte im Hero ---------- */
.weekcard{
  position:absolute; z-index:4; right:calc(var(--gutter) + clamp(1.2rem,3vw,3.2rem));
  /* mittig im freien Bereich zwischen Status-Hinweis und unterem Bildrand */
  top:calc(50% + (var(--header-h) + 40px) / 2);
  transform:translateY(-50%) rotate(-1.6deg); margin:0;
  /* so groß wie möglich, aber immer ganz im Bild: Breite folgt auch der Fensterhöhe */
  width:clamp(240px, min(31vw, 81svh - 250px), 470px); background:var(--paper-hi);
  border-radius:8px; padding:clamp(.9rem,1.4vw,1.2rem);
  box-shadow:0 30px 60px -28px rgba(10,18,28,.75), 0 2px 0 rgba(255,255,255,.4) inset;
  display:flex; flex-direction:column; gap:.85rem;
  transition:transform .6s var(--ease-out);
}
.weekcard:hover{transform:translateY(-50%) rotate(0deg)}
.wk-head{display:flex; flex-direction:column; gap:.1rem; padding:0 .2rem}
.wk-kicker{font-family:var(--script); font-size:1.25rem; color:var(--ember); line-height:1}
.wk-title{font-family:var(--display); text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:var(--muted)}
.wk-shot{
  aspect-ratio:3/4; border:1px dashed var(--line); border-radius:4px; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  text-align:center; padding:1rem;
}
.wk-shot svg{width:36px; height:36px; fill:none; stroke:var(--oak); stroke-width:2.4; stroke-linecap:round}
.wk-shot span{font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; line-height:1.6; color:var(--ink-soft)}
.wk-shot small{font-size:.7rem; color:var(--muted); max-width:22ch; line-height:1.4}
.wk-shot img{width:100%; height:100%; object-fit:cover; border-radius:4px}
.wk-link{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  text-decoration:none; text-align:center; padding:.6rem; border-top:1px solid var(--line-soft); color:var(--ink)}
.wk-link:hover{color:var(--ember)}
.js .weekcard{opacity:0; transform:translateY(calc(-50% + 26px)) rotate(-1.6deg)}
.js .opening.is-open .weekcard{opacity:1; transform:translateY(-50%) rotate(-1.6deg);
  transition:opacity .9s var(--ease) .3s, transform 1.1s var(--ease-out) .3s}
.wk-mount:empty{display:none}
.wk-mount{margin-top:clamp(2.5rem,4vw,3.5rem); display:flex; justify-content:flex-start}
.wk-mount .weekcard{position:static; transform:none; width:min(420px,100%); box-shadow:0 24px 50px -30px rgba(10,18,28,.6)}
.js .wk-mount .weekcard{opacity:1; transform:none}
.wk-mount .weekcard:hover{transform:none}

/* ---------- Google-Bewertungen ---------- */
.reviews{overflow:hidden}
.rev-grid{display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); gap:clamp(2.5rem,5vw,5rem); align-items:center}
.rev-intro h2{font-size:clamp(2rem,1.2rem + 2.2vw,3.1rem)}
.rev-score{display:flex; flex-direction:column; gap:.3rem; margin-top:.4rem}
.rev-stars{color:#E8A33D; letter-spacing:.18em; font-size:1.05rem}
.rev-num{font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:1rem}
.rev-num b{font-size:2.4rem; font-weight:600; letter-spacing:.01em; margin-right:.4rem; vertical-align:-.12em}
.rev-count{font-size:.86rem; color:rgba(243,239,230,.65)}
.rev-count em{font-style:normal; color:var(--ember)}
.rev-cta{margin-top:2rem}
.rev-slider{position:relative; min-width:0}
.rev-viewport{overflow:hidden; min-width:0}
.rev-track{display:flex; list-style:none; margin:0; padding:0; transition:transform .7s var(--ease-out)}
.rev-card{flex:0 0 100%; min-width:0; padding-right:clamp(1rem,2vw,2rem); display:flex; flex-direction:column; gap:1rem; align-items:flex-start}
.rev-tag{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.62rem;
  color:var(--ember); border:1px solid rgba(196,86,31,.6); border-radius:999px; padding:.3rem .65rem}
.rev-card blockquote{margin:0; padding-left:1.5em; font-size:clamp(1.15rem,1rem + .7vw,1.6rem); line-height:1.5;
  color:var(--paper); font-weight:400; position:relative}
.rev-card blockquote::before{content:"„"; font-family:var(--display); font-size:2.6em; line-height:0; color:var(--oak);
  position:absolute; left:0; top:.44em}
.rev-author{display:flex; align-items:center; gap:.8rem; margin-top:.4rem}
.rev-ava{width:40px; height:40px; border-radius:50%; background:var(--oak); color:var(--ink-deep);
  display:grid; place-items:center; font-family:var(--display); font-size:1rem; flex:none}
.rev-author b{display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.86rem; font-weight:500}
.rev-author small{display:block; font-size:.78rem; color:rgba(243,239,230,.6)}
.rev-nav{display:flex; align-items:center; gap:1rem; margin-top:2.2rem}
.rev-btn{width:46px; height:46px; border-radius:50%; background:transparent; color:var(--paper);
  border:1px solid rgba(243,239,230,.35); cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease)}
.rev-btn:hover{background:var(--paper); color:var(--ink)}
.rev-dots{display:flex; gap:.5rem; margin-inline:.4rem}
.rev-dots button{width:8px; height:8px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:rgba(243,239,230,.3); transition:background .3s, width .4s var(--ease-out)}
.rev-dots button[aria-current="true"]{background:var(--oak); width:22px; border-radius:999px}

/* ---------- Frühstück ---------- */
.duo{position:relative; aspect-ratio:1/1.08; max-width:640px}
.duo > div{position:absolute; overflow:hidden; border-radius:4px}
.duo-a{left:0; top:0; width:66%; aspect-ratio:750/1124}
.duo-b{right:0; bottom:0; width:48%; aspect-ratio:750/1124; outline:10px solid var(--paper)}
.duo img{width:100%; height:100%; object-fit:cover}
.duo-stamp{position:absolute; right:6%; top:6%; z-index:2; width:118px; height:118px; border-radius:50%;
  display:grid; place-items:center; text-align:center; background:var(--ink); color:var(--paper);
  font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; line-height:1.5;
  animation:spin-in 1s var(--ease-out) both}
.ticks{list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:.1rem; border-top:1px solid var(--line)}
.ticks li{display:flex; gap:.9rem; align-items:baseline; font-size:.99rem; padding:.7rem 0; border-bottom:1px solid var(--line-soft)}
.ticks li::before{content:""; width:14px; height:1px; background:var(--oak); flex:none; transform:translateY(-4px)}

/* ---------- Gastgeber ---------- */
.hosts{padding-top:0}
.hosts-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,6.5rem); align-items:center}
/* Foto rechts — damit der Abschnitt nicht wie der Frühstücksteil darüber aussieht */
.hosts-photo{order:2; margin:0 0 0 auto; border-radius:4px; overflow:hidden; aspect-ratio:1066/1600; max-width:520px; position:relative}
.hosts-photo img{width:100%; height:100%; object-fit:cover}
.hosts-sign{margin-top:2rem; display:flex; flex-direction:column; gap:.2rem}
.hosts-sign .script{font-size:clamp(1.7rem,1.2rem + 1.5vw,2.5rem); color:var(--ember)}
.hosts-names{font-family:var(--display); text-transform:uppercase; letter-spacing:.22em; font-size:.76rem; color:var(--muted)}

/* ---------- Mittagstisch ---------- */
.week{list-style:none; margin:clamp(3rem,5vw,4.5rem) 0 0; padding:0; border-top:1px solid rgba(243,239,230,.2)}
.week li{display:grid; grid-template-columns:5rem 1fr; align-items:baseline; gap:1.5rem; padding:1.15rem 0;
  border-bottom:1px solid rgba(243,239,230,.14); transition:padding-left .5s var(--ease-out), color .3s}
.week li:hover{padding-left:.9rem; color:#fff}
.wd{font-family:var(--display); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--oak-soft)}
.wm{font-family:var(--display); text-transform:uppercase; font-size:clamp(1.05rem,.9rem + .7vw,1.6rem); font-weight:500; letter-spacing:.03em}
.week-note{margin-top:1.4rem; color:rgba(243,239,230,.6)}

/* ---------- Tortengalerie (horizontal) ---------- */
.cakes{background:var(--sand); padding-block:clamp(4.5rem,3rem + 6vw,8rem)}
.cakes.is-pinned{padding-block:0}
.cakes.is-pinned .cakes-pin{position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-top:calc(var(--header-h) * .6)}
.cakes-head{display:grid; grid-template-columns:1fr minmax(260px,420px); gap:2rem; align-items:end; width:100%; margin-bottom:clamp(2rem,4vh,3.2rem)}
.cakes-aside p{color:var(--ink-soft); margin-bottom:1.4rem}
.cakes-progress{height:2px; background:rgba(30,49,69,.15); position:relative; overflow:hidden}
.cakes-progress i{position:absolute; inset:0; background:var(--ink); transform-origin:left; transform:scaleX(var(--hp,0))}
.cakes-track-wrap{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-inline:var(--pad); scroll-padding-inline:var(--pad)}
.cakes-track-wrap::-webkit-scrollbar{display:none}
.cakes.is-pinned .cakes-track-wrap{overflow:visible; scroll-snap-type:none}
.cakes-track{display:flex; gap:clamp(.9rem,1.6vw,1.6rem); width:max-content; will-change:transform;
  padding-left:max(0px, calc((100vw - var(--maxw)) / 2))}
.cake{margin:0; width:clamp(230px, 22vw, 320px); flex:none; scroll-snap-align:start}
.cakes.is-pinned .cake{width:max(230px, min(25vw, calc((100vh - 380px) * .8), 380px))}
.cake-img{border-radius:4px; overflow:hidden; aspect-ratio:4/5; background:var(--paper)}
.cake-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out)}
.cake:hover .cake-img img{transform:scale(1.05)}
.cake figcaption{display:flex; gap:.8rem; align-items:baseline; margin-top:.9rem; font-family:var(--display);
  text-transform:uppercase; letter-spacing:.1em; font-size:.84rem}
.cake-no{font-size:.7rem; color:var(--oak); letter-spacing:.12em}
.cake-more{aspect-ratio:4/5; align-self:flex-start; border-radius:4px; background:var(--ink); color:var(--paper);
  text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; padding:1.8rem;
  transition:background .4s var(--ease)}
.cake-more:hover{background:var(--ember)}
.cake-more .script{font-size:1.6rem; color:var(--oak-soft)}
.cake-more:hover .script{color:#fff}
.cm-title{font-family:var(--display); text-transform:uppercase; font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem); line-height:1; font-weight:650}
.cm-arrow{font-size:2rem; transition:transform .45s var(--ease-out)}
.cake-more:hover .cm-arrow{transform:translateX(8px)}

/* ---------- Feiern-Teaser ---------- */
.et-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,6.5rem); align-items:center}
.et-media{position:relative; aspect-ratio:1/1.02}
.et-media > div{position:absolute; border-radius:4px; overflow:hidden}
.et-media img{width:100%; height:100%; object-fit:cover}
.et-a{left:0; top:0; width:62%; aspect-ratio:1054/1400}
.et-b{right:0; bottom:4%; width:56%; aspect-ratio:4/3; outline:10px solid var(--paper)}
.et-list{list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--line)}
.et-list li{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; flex-wrap:wrap; padding:.95rem 0; border-bottom:1px solid var(--line-soft)}
.et-list b{font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-weight:500; font-size:1rem}
.et-list span{color:var(--muted); font-size:.93rem}

/* ---------- Besuch / Karte ---------- */
.visit-grid{display:grid; grid-template-columns:minmax(300px,.85fr) 1.15fr; gap:clamp(2.5rem,6vw,6rem); align-items:center}
.visit-info h2{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.visit-addr{font-style:normal; font-size:1.08rem; line-height:1.7; margin-bottom:1rem}
.visit-addr b{display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-weight:600; margin-bottom:.2rem}
.visit-contact{display:flex; flex-direction:column; gap:.2rem; margin-bottom:1.8rem}
.visit-contact a{text-decoration:none; width:max-content; background:linear-gradient(var(--oak),var(--oak)) 0 100%/100% 1px no-repeat}
.visit-photo{margin:0}
.visit-photo .rv-img{border-radius:6px; aspect-ratio:1152/1085}
.visit-photo img{width:100%; height:100%; object-fit:cover}
.visit-photo figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-top:.9rem}
.visit-photo .script{font-size:clamp(1.25rem,1rem + .7vw,1.6rem); color:var(--oak)}
.vp-note{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--muted)}

.visit .map{margin-top:clamp(3rem,6vw,5.5rem)}
.map-frame{position:relative; border-radius:6px; overflow:hidden; height:clamp(380px, 62vh, 620px); background:#cfd6d0}
.map-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.map-links{display:flex; gap:1.8rem; flex-wrap:wrap; margin-top:1.3rem}

/* ---------- Öffnungszeiten ---------- */
.hours{border-top:1px solid var(--ink)}
.hours .row{display:flex; justify-content:space-between; gap:1rem; padding:.78rem .2rem;
  border-bottom:1px solid var(--line); font-size:.97rem; transition:background .3s}
.hours .row.today{background:rgba(251,249,244,.75); padding-inline:.8rem}
.hours .row.today .d::after{content:"heute"; margin-left:.7rem; color:var(--ember); font-size:.66rem;
  letter-spacing:.14em; vertical-align:.12em}
.hours .d{font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.84rem}
.hours .t{color:var(--muted)}

/* ---------- Seitenkopf Unterseiten ---------- */
.page-head{padding-top:calc(var(--header-h) + clamp(3rem,7vw,6rem)); padding-bottom:clamp(2.5rem,5vw,4.5rem);
  border-bottom:1px solid var(--line); position:relative}
.page-head h1{font-size:clamp(2.6rem,1.4rem + 5vw,5.8rem)}
.ph-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:end}
.crumbs{font-family:var(--display); text-transform:uppercase; letter-spacing:.22em;
  font-size:.7rem; color:var(--muted); margin-bottom:1.5rem}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)}

/* ---------- Tortengalerie-Seite ---------- */
.tg{display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(.9rem,1.8vw,1.8rem); padding-bottom:4rem}
.tg-item{margin:0 0 clamp(1.4rem,2.4vw,2.2rem)}
.tg-item:nth-child(3n+2){position:relative; top:4rem}
.tg-item a{display:block; border-radius:4px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/5}
.tg-item img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out)}
.tg-item a:hover img{transform:scale(1.05)}
.tg-item figcaption{margin-top:.75rem; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem}
.steps{list-style:none; counter-reset:st; margin:2rem 0 0; padding:0; border-top:1px solid currentColor}
.steps li{counter-increment:st; display:grid; grid-template-columns:3rem 1fr; gap:.2rem 1rem; padding:1rem 0; border-bottom:1px solid rgba(127,127,127,.3)}
.steps li::before{content:counter(st, decimal-leading-zero); grid-row:span 2; font-family:var(--display); color:var(--oak); font-size:.9rem; letter-spacing:.1em; padding-top:.15rem}
.steps b{font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-weight:500}
.steps span{font-size:.93rem; opacity:.75}
.band-dark .steps{border-color:rgba(243,239,230,.35)}
.band-dark .steps li{border-color:rgba(243,239,230,.14)}

.lightbox{border:0; padding:0; margin:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none;
  background:rgba(16,26,38,.94); color:var(--paper); display:none; align-items:center; justify-content:center}
.lightbox[open]{display:flex; animation:fade .35s var(--ease)}
.lightbox::backdrop{background:transparent}
.lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:min(92vw, 720px)}
.lightbox img{max-height:82vh; max-height:82dvh; width:auto; border-radius:4px; animation:zoom-in .45s var(--ease-out)}
.lightbox figcaption{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.8rem}
.lightbox button{position:absolute; background:transparent; color:var(--paper); border:1px solid rgba(243,239,230,.35);
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.2rem; transition:background .3s, color .3s}
.lightbox button:hover{background:var(--paper); color:var(--ink)}
.lb-close{top:1.2rem; right:1.2rem; font-size:1.6rem !important}
.lb-prev{left:1.2rem; top:50%; transform:translateY(-50%)}
.lb-next{right:1.2rem; top:50%; transform:translateY(-50%)}
@keyframes fade{from{opacity:0}}
@keyframes zoom-in{from{opacity:0; transform:scale(.96)}}

/* ---------- Feiern & Catering ---------- */
.ev-hero{padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem)); padding-bottom:clamp(3rem,6vw,6rem)}
.ev-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,5vw,5rem); align-items:center}
.ev-script{display:block; color:var(--ember); font-size:clamp(1.5rem,1rem + 1.5vw,2.2rem); margin-bottom:.4rem}
.ev-hero h1{font-size:clamp(2.6rem,1.3rem + 4.6vw,5.6rem)}
.ev-hero-media{position:relative; aspect-ratio:1/1.1}
.ev-hero-media > div{position:absolute; border-radius:4px; overflow:hidden}
.ev-hero-media img{width:100%; height:100%; object-fit:cover}
.evh-a{right:0; top:0; width:70%; aspect-ratio:1054/1400}
.evh-b{left:0; bottom:0; width:42%; aspect-ratio:3/4; outline:10px solid var(--paper)}
.evh-badge{position:absolute; left:8%; top:10%; z-index:2; width:132px; height:132px; border-radius:50%;
  background:var(--ember); color:#fff; display:grid; place-content:center; text-align:center;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; line-height:1.45;
  transform:rotate(-8deg)}
.evh-badge b{display:block; font-size:1.9rem; letter-spacing:.02em; font-weight:500; line-height:1; margin-bottom:.2rem}

.ticker{background:var(--ink); color:var(--paper); overflow:hidden; padding-block:1.05rem}
.ticker-track{display:flex; width:max-content; animation:run 38s linear infinite}
.ticker span{font-family:var(--display); text-transform:uppercase; letter-spacing:.2em; font-size:.84rem;
  padding-inline:1.7rem; display:flex; align-items:center; gap:1.7rem; white-space:nowrap}
.ticker span::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--ember)}
@keyframes run{to{transform:translateX(-50%)}}

.offer{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.offer li{display:grid; grid-template-columns:2.4rem 1fr; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line)}
.o-no{font-family:var(--script); color:var(--ember); font-size:1.5rem; line-height:1}
.offer b{display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.07em; font-weight:500; font-size:1.02rem; margin-bottom:.15rem}
.offer div{color:var(--muted); font-size:.95rem}
.ev-wide{padding-bottom:clamp(4.5rem,3rem + 7vw,9rem)}
.ev-wide-img{margin:0; border-radius:6px; overflow:hidden; aspect-ratio:21/9}
.ev-wide-img img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.ev-mini{border-radius:4px; overflow:hidden; aspect-ratio:4/5; max-width:520px}
.ev-mini img{width:100%; height:100%; object-fit:cover}

.mosaic{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(90px,9vw,130px); gap:clamp(.7rem,1.3vw,1.2rem); margin-top:clamp(3rem,5vw,4.5rem)}
.mosaic figure{margin:0; position:relative; border-radius:4px; overflow:hidden}
.mosaic img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out)}
.mosaic figure:hover img{transform:scale(1.05)}
.mosaic figcaption{position:absolute; left:.8rem; bottom:.8rem; background:var(--paper); color:var(--ink);
  font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; padding:.45rem .7rem; border-radius:999px}
.mo-1{grid-column:1/4; grid-row:1/5}
.mo-2{grid-column:4/10; grid-row:1/5}
.mo-3{grid-column:10/13; grid-row:1/5}
.mo-4{grid-column:1/5; grid-row:5/9}
.mo-5{grid-column:5/9; grid-row:5/9}
.mo-6{grid-column:9/13; grid-row:5/9}
.cat-list{display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(3rem,5vw,4rem); border-top:1px solid rgba(243,239,230,.25)}
.cat-list div{padding:1.2rem 1rem 1.2rem 0; border-bottom:1px solid rgba(243,239,230,.14); display:flex; gap:.8rem; align-items:baseline}
.cat-list div::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ember); flex:none; transform:translateY(-2px)}
.cat-list b{font-family:var(--display); text-transform:uppercase; letter-spacing:.07em; font-weight:400; font-size:1rem}
.cat-note{margin-top:2rem}
.cake-stack{position:relative; aspect-ratio:1/1.05; max-width:600px}
.cake-stack > div{position:absolute; border-radius:4px; overflow:hidden; aspect-ratio:4/5}
.cake-stack img{width:100%; height:100%; object-fit:cover}
.cs-a{left:0; top:0; width:60%}
.cs-b{right:0; bottom:0; width:50%; outline:10px solid var(--paper)}
.ev-phone{margin-top:2rem; font-size:1.05rem}
.ev-phone a{font-family:var(--display); letter-spacing:.06em; font-size:1.3rem; text-decoration:none}

.form-card{background:var(--paper-hi); border-radius:6px; padding:clamp(1.5rem,3vw,2.6rem)}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{position:relative; cursor:pointer; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:.94rem; color:var(--ink)}
.chip input{position:absolute; left:0; top:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
.chip span{display:inline-block; padding:.6rem 1rem; border:1px solid var(--line); border-radius:999px; transition:background .3s, color .3s, border-color .3s}
.chip:hover span{border-color:var(--ink)}
.chip input:checked + span{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--ember); outline-offset:2px}
.form-ok{color:var(--moss); font-weight:500}

/* ---------- Kontakt / Formular ---------- */
.contact-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.info-block{border-top:1px solid var(--line); padding-top:1.5rem; margin-bottom:2.2rem}
.info-block h4{color:var(--muted); letter-spacing:.2em; margin-bottom:.8rem; font-size:.74rem}
.info-block p,.info-block address{font-style:normal; font-size:1.05rem; line-height:1.7}
.info-block a{text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .3s}
.info-block a:hover{border-color:var(--ink)}
form{display:grid; gap:1.15rem}
.field{display:grid; gap:.45rem}
.field.two{grid-template-columns:1fr 1fr; gap:1.15rem}
label,.label{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--muted)}
input,select,textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper-hi); border:1px solid var(--line); border-radius:4px;
  padding:.85rem .95rem; width:100%; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.form-card input,.form-card textarea{background:var(--paper)}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.6rem}
textarea{min-height:140px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ink); background:#fff}
input::placeholder,textarea::placeholder{color:#a89f8e}
.form-note{font-size:.82rem; color:var(--muted)}

/* ---------- Speisekarte ---------- */
.menu-group{margin-bottom:clamp(3rem,4vw,4.5rem)}
.menu-group > header{display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; border-bottom:2px solid var(--ink); padding-bottom:.9rem; margin-bottom:.4rem; flex-wrap:wrap}
.menu-group > header h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.menu-group > header .hint{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--ember)}
.item{display:grid; grid-template-columns:1fr auto; gap:.4rem 1.5rem; padding:1.15rem 0; border-bottom:1px solid var(--line-soft); align-items:baseline}
.item:hover .item-name{color:var(--ember)}
.item-name{font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:1.05rem; font-weight:500; transition:color .3s var(--ease)}
.item-price{font-family:var(--display); font-size:1.02rem; letter-spacing:.04em; white-space:nowrap}
.item-desc{grid-column:1/-1; font-size:.92rem; color:var(--muted); max-width:62ch; margin:0}
.menu-note{border-left:2px solid var(--oak); padding:.4rem 0 .4rem 1.2rem; font-size:.92rem; color:var(--muted)}
.sticky-col{position:sticky; top:120px}
.anchors{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem}
.anchors a{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; text-decoration:none;
  padding:.6rem 1rem; border:1px solid var(--line); border-radius:999px; background:var(--paper-hi);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease)}
.anchors a:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ---------- Bausteine aus Unterseiten ---------- */
.frame{position:relative}
.frame::before{content:""; position:absolute; inset:0; border:1px solid var(--oak); transform:translate(16px,16px); z-index:-1; transition:transform .6s var(--ease)}
.frame:hover::before{transform:translate(9px,9px)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(1rem,2vw,1.8rem)}
.card{border-top:1px solid var(--ink); padding:clamp(1.6rem,2.2vw,2.2rem) 0 0; display:flex; flex-direction:column; gap:.8rem}
.card h3{font-size:1.3rem}
.card p{font-size:.97rem; color:var(--muted)}
.card .link-u{margin-top:auto; align-self:flex-start}
.badge{display:inline-block; font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.66rem;
  padding:.4rem .75rem; border:1px solid var(--oak); color:var(--oak); align-self:flex-start; border-radius:999px}
.dl{border-top:1px solid var(--line); margin-top:2rem}
.dl div{display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline; padding:.95rem 0; border-bottom:1px solid var(--line-soft)}
.dl dt{font-family:var(--display); text-transform:uppercase; letter-spacing:.09em; font-size:.94rem; font-weight:500}
.dl dd{margin:0; font-size:.92rem; color:var(--muted); text-align:right}
.quote{max-width:44ch; margin-inline:auto; text-align:center}
.quote p{font-family:var(--script); font-size:clamp(1.7rem,1.1rem + 2.2vw,2.8rem); line-height:1.3; color:var(--paper)}
.quote cite{display:block; font-style:normal; font-family:var(--display); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--oak-soft); margin-top:1.6rem}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border-block:1px solid var(--line); margin-top:3rem}
.stats div{background:var(--paper); padding:1.6rem 1rem 1.6rem 0}
.stats b{display:block; font-family:var(--display); font-weight:500; font-size:clamp(2rem,1.5rem + 1.5vw,2.9rem); line-height:1; margin-bottom:.5rem; color:var(--oak)}
.stats span{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; color:var(--muted)}
.legal{max-width:70ch}
.legal h3{margin:2.4rem 0 .8rem; font-size:1.1rem}
.legal p{font-size:.95rem; color:var(--muted)}
.cta-band{background:var(--ink); color:var(--paper); text-align:center}
.cta-band .lead{color:rgba(243,239,230,.8); margin-inline:auto}
.cta-band .script{color:var(--oak-soft); font-size:clamp(1.5rem,1rem + 2vw,2.4rem); display:block; margin-bottom:.4rem}
.cta-band h2{margin-bottom:1.4rem}
.cta-band .btns{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2rem}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink-deep); color:rgba(243,239,230,.72); padding-top:clamp(4rem,6vw,6rem)}
.foot-top{display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap;
  padding-bottom:clamp(2.5rem,4vw,3.5rem); border-bottom:1px solid rgba(243,239,230,.14)}
.f-logo{width:clamp(220px,28vw,340px); height:auto}
.f-claim{font-family:var(--script); font-size:clamp(1.3rem,1rem + 1vw,1.8rem); color:var(--oak-soft); max-width:26ch; margin:0; line-height:1.3}
.site-foot .cols{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.8rem,3vw,3rem); padding-block:clamp(2.5rem,4vw,3.5rem);
  border-bottom:1px solid rgba(243,239,230,.14)}
.site-foot h4{color:var(--paper); letter-spacing:.2em; font-size:.72rem; margin-bottom:1.1rem; font-weight:500}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.95rem}
.site-foot a{text-decoration:none; transition:color .3s var(--ease)}
.site-foot a:hover{color:#fff}
.site-foot address{font-style:normal; font-size:.95rem; line-height:1.85}
.f-small{font-size:.93rem; margin-bottom:1rem}
.f-link{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color:#F0A477}
.foot-bar{display:flex; justify-content:space-between; align-items:center; gap:1rem 1.5rem;
  flex-wrap:wrap; padding-block:1.6rem; font-size:.82rem; color:rgba(243,239,230,.5)}
.foot-bar .made{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.68rem;
  color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom:2px; transition:color .25s var(--ease), background-size .35s var(--ease-out)}
.foot-bar .made:hover,.foot-bar .made:focus-visible{color:#fff; background-size:100% 1px}

/* ==========================================================================
   Scroll-Animationen
   ========================================================================== */
.js .reveal{opacity:0; transform:translateY(26px)}
.js .reveal.in{opacity:1; transform:none;
  transition:opacity .9s var(--ease) var(--d,0s), transform 1.1s var(--ease-out) var(--d,0s)}

/* Bilder: Maske öffnet sich von unten, Bild setzt sich
   (Maske liegt am Bild selbst, damit der IntersectionObserver den Rahmen sieht) */
.rv-img{overflow:hidden; position:relative}
.js .rv-img > img{clip-path:inset(100% 0 0 0); transform:scale(1.18)}
.js .rv-img.in > img{clip-path:inset(0 0 0 0); transform:none;
  transition:clip-path 1.3s var(--ease-out) var(--d,0s), transform 1.9s var(--ease-out) var(--d,0s)}

/* Überschriften: Zeile für Zeile */
.lines .ln{display:block; overflow:hidden; padding:.16em 0 .1em; margin:-.16em 0 -.1em}
.lines .ln > span{display:block}
.js .lines .ln > span{transform:translateY(105%)}
.js .lines.in .ln > span{transform:none; transition:transform 1.05s var(--ease-out) calc(var(--li,0) * .09s)}
.parallax{will-change:transform}

@keyframes spin-in{from{transform:rotate(-40deg) scale(.6); opacity:0}}

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width:1180px){
  .nav{gap:1.1rem}
  .nav a{font-size:.72rem; letter-spacing:.12em}
  .brand-txt{display:none}
}
@media (max-width:980px){
  :root{--header-h:70px}
  .nav,.head-cta{display:none}
  .brand-txt{display:block}
  .burger{display:block}
  .brand-mark{width:40px; height:40px}
  .split,.hosts-grid,.et-grid,.ev-hero-grid,.contact-grid,.ph-grid,.visit-grid,.rev-grid{grid-template-columns:1fr}
  .rev-grid{gap:2.5rem}
  .split.rev > :first-child{order:0}
  .duo,.et-media,.cake-stack,.ev-hero-media{max-width:560px; width:100%}
  .hosts-photo{order:0; margin-inline:0; max-width:460px}
  .cakes-head{grid-template-columns:1fr}
  .cat-list{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(80px,14vw,120px)}
  .mo-1{grid-column:1/4; grid-row:1/5} .mo-3{grid-column:4/7; grid-row:1/5}
  .mo-2{grid-column:1/7; grid-row:5/8}
  .mo-4{grid-column:1/4; grid-row:8/12} .mo-5{grid-column:4/7; grid-row:8/12}
  .mo-6{display:none}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .sticky-col{position:static !important}
  .op-status{display:none}
  .weekcard{right:calc(var(--gutter) + 1.1rem); top:calc(50% + var(--header-h) / 2)}
  .ev-wide-img{aspect-ratio:4/3}
}
/* Hero am Handy: Text unten auf dem Bild */
@media (max-width:760px){
  .op-media img{object-position:58% 60%}
  .op-media::after{background:
    linear-gradient(0deg, rgba(14,24,36,.86) 0%, rgba(14,24,36,.62) 38%, rgba(14,24,36,.08) 68%, rgba(14,24,36,0) 80%)}
  .hero-card{left:var(--gutter); right:var(--gutter); width:auto; padding:0 calc(var(--pad) - var(--gutter)) clamp(1.6rem,4vh,2.4rem)}
  .hero-card h1{font-size:clamp(2.4rem,11vw,3.2rem)}
  .opening .weekcard{display:none}
  .hc-lead{display:none}
  .hero-actions{margin-top:1.3rem; gap:.6rem}
  .hero-card .hero-actions .btn{flex:1 1 auto; padding-inline:1rem}
  .op-logo{width:min(84vw,420px)}
}
@media (max-width:560px){
  .field.two{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .site-foot .cols{grid-template-columns:1fr}
  .foot-bar{flex-direction:column; align-items:flex-start}
  .item-name{font-size:.98rem}
  .week li{grid-template-columns:3rem 1fr; gap:1rem}
  .cat-list{grid-template-columns:1fr}
  .duo-stamp{width:92px; height:92px; font-size:.62rem}
  .evh-badge{width:104px; height:104px; font-size:.58rem}
  .evh-badge b{font-size:1.5rem}
  .map-frame{height:440px}
  .tg{grid-template-columns:1fr 1fr; padding-bottom:0}
  .tg-item:nth-child(3n+2){top:0}
  .tg-item:nth-child(2n){top:2rem}
  .hero-actions .btn{width:100%}
  .hero-card .hero-actions .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important}
  .js .reveal,.js .rv-img > img,.js .lines .ln > span{opacity:1; transform:none; clip-path:none}
}
::selection{background:var(--ink); color:var(--paper)}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px}
.opening:not(.is-live) .op-hint{display:none}

/* ==========================================================================
   Überarbeitung 24. September 2026
   Speisekarte im Stil der gedruckten Karte · Reservierung · Newsletter ·
   Wochenkarte · Workation-Partnerbetrieb
   ========================================================================== */
:root{
  --mustard:#DDB24F;       /* Senfgelb der gedruckten Karte */
  --mustard-hi:#E7C46E;
  --gold:#C9A14C;          /* Goldlinien der Karte */
  --cream:#F6F1E3;         /* Innenseiten der Karte */
  --sheet:#FCFBF7;         /* Einlageblatt Tagesteller */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%23F3D58F' fill-opacity='.55'%3E%3Cpath d='M75 51l6 18-6 5-6-5z'/%3E%3Cpath d='M75 99l-6-18 6-5 6 5z'/%3E%3Cpath d='M51 75l18-6 5 6-5 6z'/%3E%3Cpath d='M99 75l-18 6-5-6 5-6z'/%3E%3Cpath d='M0 -9l4 12-4 3-4-3zM0 9l-4-12 4-3 4 3zM150 -9l4 12-4 3-4-3zM150 9l-4-12 4-3 4 3zM0 141l4 12-4 3-4-3zM0 159l-4-12 4-3 4 3zM150 141l4 12-4 3-4-3zM150 159l-4-12 4-3 4 3z'/%3E%3Cpath d='M-9 0l12 4 3-4-3-4zM9 0l-12-4-3 4 3 4zM141 0l12 4 3-4-3-4zM159 0l-12-4-3 4 3 4zM-9 150l12 4 3-4-3-4zM9 150l-12-4-3 4 3 4zM141 150l12 4 3-4-3-4zM159 150l-12-4-3 4 3 4z'/%3E%3C/g%3E%3Cg fill='%23F3D58F' fill-opacity='.35'%3E%3Cpath d='M20 38l3 8-3 3-3-3zM130 112l3 8-3 3-3-3zM112 20l8 3 3-3-3-3zM38 130l-8-3-3 3 3 3z'/%3E%3C/g%3E%3C/svg%3E");
}
.sr-only{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.opt{text-transform:none; letter-spacing:0; font-family:var(--body); font-size:.8rem}

/* ---------- Kopfzeile: Newsletter & Reservieren ---------- */
.head-cta{display:flex; align-items:center; gap:.7rem}
.nl-btn{display:inline-flex; align-items:center; gap:.5rem; background:transparent; border:1px solid transparent; color:var(--ink);
  font-family:var(--display); text-transform:uppercase; font-weight:500; font-size:.74rem; letter-spacing:.14em;
  padding:.7rem .75rem; border-radius:999px; cursor:pointer; transition:border-color .35s var(--ease), background .35s var(--ease)}
.nl-btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; flex:none}
.nl-btn:hover,.nl-btn[aria-expanded="true"]{border-color:var(--line); background:var(--paper-hi)}
.btn--res{--bg:var(--ink); --fg:var(--paper-hi); --bd:var(--ink); --hbg:var(--ink-deep)}
.head-cta .btn--res[aria-current="page"]{--bg:var(--ink-deep)}
@media (max-width:1380px){
  .nl-btn span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .nl-btn{width:44px; height:44px; padding:0; justify-content:center; border-color:var(--line)}
}
@media (max-width:1260px){
  .head-cta .btn--ember{padding-inline:1rem}
  .head-cta .btn--ember .spark{display:none}
  .nav{gap:1rem}
}
@media (max-width:1120px){
  .nav a{font-size:.68rem; letter-spacing:.1em}
  .head-cta{gap:.45rem}
  .head-cta .btn{font-size:.68rem; letter-spacing:.1em; padding:.8rem .95rem}
}
@media (max-width:1060px){
  .nav,.head-cta{display:none}
  .burger{display:block}
  .brand-txt{display:block}
}
.mobile-nav > a.mn-res{color:var(--oak-soft); border-bottom:0; margin-top:.6rem}
.mobile-nav > a.mn-res + .mn-event{margin-top:0}
.mn-nl{display:flex; width:max-content; align-items:center; gap:.6rem; margin-bottom:1rem; background:transparent;
  color:var(--paper); border:1px solid rgba(243,239,230,.35); border-radius:999px; padding:.7rem 1.1rem; cursor:pointer;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem}
.mn-nl svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round}

/* ---------- Newsletter-Fenster ---------- */
.nl-pop{position:fixed; inset:0; z-index:120; display:flex; justify-content:flex-end; align-items:flex-start;
  padding:calc(var(--header-h) + 6px) var(--pad) 1rem}
.nl-pop[hidden]{display:none}
.nl-backdrop{position:absolute; inset:0; background:rgba(14,24,36,.28); opacity:0; transition:opacity .35s var(--ease)}
.nl-card{position:relative; width:min(440px,100%); background:var(--paper-hi); color:var(--ink); border-radius:10px;
  padding:clamp(1.6rem,3vw,2.2rem); box-shadow:0 40px 80px -30px rgba(10,18,28,.55), 0 0 0 1px rgba(30,49,69,.06);
  opacity:0; transform:translateY(-14px) scale(.98); transform-origin:top right;
  transition:opacity .35s var(--ease), transform .5s var(--ease-out)}
.nl-card::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; border-radius:10px 10px 0 0;
  background:linear-gradient(90deg,var(--mustard),var(--gold))}
.nl-pop.is-open .nl-backdrop{opacity:1}
.nl-pop.is-open .nl-card{opacity:1; transform:none}
.nl-x{position:absolute; top:.9rem; right:.9rem; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--ink); transition:background .3s}
.nl-x:hover{background:var(--sand)}
.nl-x svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}
.nl-kicker{font-size:1.45rem; color:var(--oak); display:block; margin-bottom:.2rem}
.nl-title{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem); margin-bottom:.8rem}
.nl-lead{color:var(--ink-soft); font-size:.98rem; margin-bottom:1.3rem; max-width:34ch}
.nl-form{gap:1rem}
.nl-row{display:flex; gap:.5rem; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.3rem;
  transition:border-color .3s}
.nl-row:focus-within{border-color:var(--ink)}
.nl-row input{border:0; background:transparent; border-radius:999px; padding:.7rem 1rem; min-width:0}
.nl-row input:focus{background:transparent}
.nl-row .btn{padding:.85rem 1.2rem; flex:none}
.nl-consent{display:flex; gap:.7rem; align-items:flex-start; text-transform:none; letter-spacing:0; font-family:var(--body);
  font-size:.8rem; line-height:1.5; color:var(--muted); cursor:pointer}
.nl-consent input{width:18px; height:18px; flex:none; margin-top:.15rem; accent-color:var(--ink); padding:0}
.nl-consent a{color:var(--ink)}
body.nl-open{overflow:hidden}
@media (max-width:600px){
  .nl-pop{align-items:flex-end; padding:0}
  .nl-card{width:100%; border-radius:16px 16px 0 0; transform:translateY(40px); padding-bottom:max(1.6rem, env(safe-area-inset-bottom))}
  .nl-card::before{border-radius:16px 16px 0 0}
  .nl-row{flex-direction:column; border-radius:12px}
  .nl-row .btn{width:100%}
}

/* ---------- Formulare: Status nach dem Senden ---------- */
.form-done{border:1px solid rgba(95,107,76,.35); background:rgba(95,107,76,.08); border-radius:8px; padding:1.2rem 1.3rem; outline:none}
.form-done .script{display:block; font-size:1.6rem; color:var(--moss); margin-bottom:.3rem}
.form-done p{margin:0; font-size:.95rem}
.form-err{color:var(--ember-deep); font-weight:500}
.form-err a{color:inherit}
form.is-sent > :not(.form-done):not([type="hidden"]){display:none}
.nl-form.is-sent .form-done{display:block}

/* ---------- Seitenkopf Speisekarte + Umschalter ---------- */
.mk-head{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.mk-tabs-bar{position:sticky; top:calc(var(--header-h) - 16px); z-index:40; padding:1rem var(--pad);
  background:linear-gradient(var(--paper) 72%, rgba(243,239,230,0))}
.mk-tabs{position:relative; display:grid; grid-template-columns:1fr 1fr; max-width:640px; margin:0 auto;
  background:var(--paper-hi); border:1px solid var(--line); border-radius:999px; padding:5px;
  box-shadow:0 18px 40px -26px rgba(10,18,28,.45)}
.mk-tab{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; text-decoration:none;
  padding:.75rem 1rem .7rem; border-radius:999px; color:var(--ink); transition:color .45s var(--ease-out); text-align:center}
.mk-tab-t{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-weight:600; font-size:clamp(.82rem,.75rem + .3vw,.98rem); line-height:1.1}
.mk-tab-s{font-size:.74rem; color:var(--muted); transition:color .45s var(--ease-out); line-height:1.2}
.mk-tab[aria-selected="true"]{color:var(--paper-hi)}
.mk-tab[aria-selected="true"] .mk-tab-s{color:var(--mustard-hi)}
.mk-tab-ink{position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:50%; border-radius:999px; background:var(--ink);
  transition:transform .6s var(--ease-out), width .6s var(--ease-out)}
body:not(.mk-tabbed) .mk-tab-ink{display:none}
body:not(.mk-tabbed) .mk-tab[aria-selected="true"]{color:var(--ink)}
.mk-card{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(4rem,7vw,7rem); scroll-margin-top:calc(var(--header-h) + 90px)}
.mk-card[hidden]{display:none}
.mk-wrap{max-width:1500px; margin-inline:auto; padding-inline:clamp(1rem,3vw,3rem)}

/* ---------- Die aufgeklappte Karte ---------- */
.mk-spread{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); perspective:2200px;
  filter:drop-shadow(0 34px 44px rgba(10,18,28,.22)) drop-shadow(0 3px 5px rgba(10,18,28,.08))}
.mk-spread + .mk-spread{margin-top:clamp(2.5rem,5vw,4.5rem)}
.mk-p{--bg:var(--cream); --fg:var(--ink); --rule:var(--gold); --soft:rgba(30,49,69,.78);
  position:relative; background:var(--bg); color:var(--fg); text-align:center; isolation:isolate;
  padding:clamp(2.2rem,3.2vw,3.2rem) clamp(1.2rem,2vw,2.1rem) clamp(2.4rem,3.4vw,3.4rem); min-width:0}
.mk-p::after{content:""; position:absolute; inset:0; z-index:-1; background-image:var(--noise); pointer-events:none; mix-blend-mode:multiply}
.mk-p + .mk-p::before{content:""; position:absolute; inset:0 auto 0 0; width:26px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.04) 35%, transparent)}
.mk-p:first-child{border-radius:6px 0 0 6px}
.mk-p:last-child{border-radius:0 6px 6px 0}
.mk-p--navy{--bg:var(--ink); --fg:#F5F0E4; --soft:rgba(245,240,228,.86)}
.mk-p--cream{--bg:var(--cream)}
.mk-p--mustard{--bg:var(--mustard); --rule:var(--ink); --soft:rgba(30,49,69,.85)}
.mk-p--wide{grid-column:span 2}
.mk-p a{color:inherit; text-decoration-color:var(--gold); text-underline-offset:3px}

/* Aufklapp-Animation beim ersten Sichtkontakt */
.js .mk-p{transform-origin:left center; transition:transform 1.1s var(--ease-out), opacity .7s var(--ease)}
.js .mk-card:not(.is-unfolded) .mk-p{opacity:0; transform:rotateY(-58deg)}
.js .mk-card:not(.is-unfolded) .mk-p:first-child{transform:rotateY(0) translateY(22px); transform-origin:center}
.js .mk-card .mk-spread > .mk-p:nth-child(2){transition-delay:.12s}
.js .mk-card .mk-spread > .mk-p:nth-child(3){transition-delay:.24s}
.js .mk-card .mk-spread > .mk-p:nth-child(4){transition-delay:.36s}
.js .mk-card .mk-spread + .mk-spread > .mk-p{transition-delay:calc(.3s + var(--pd,0s))}
.mk-spread + .mk-spread > .mk-p:nth-child(2){--pd:.12s}
.mk-spread + .mk-spread > .mk-p:nth-child(3){--pd:.24s}
.mk-spread + .mk-spread > .mk-p:nth-child(4){--pd:.36s}

/* Überschriften wie auf der Karte: Goldlinie oben und unten, großer Anfangsbuchstabe, Drucktextur */
.mk-h{display:inline-block; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem,1rem + .9vw,1.85rem); letter-spacing:.06em; line-height:1; color:inherit;
  padding:.55em .5em .5em; margin:clamp(2.2rem,3vw,2.8rem) auto 1.5rem; position:relative;
  background:linear-gradient(var(--rule),var(--rule)) top/100% 2px no-repeat, linear-gradient(var(--rule),var(--rule)) bottom/100% 2px no-repeat;
  -webkit-mask:url(../img/druck-textur.png) 0 0/220px; mask:url(../img/druck-textur.png) 0 0/220px}
.mk-h::first-letter{font-size:1.28em}
.mk-p > .mk-h:first-child{margin-top:0}
.mk-p--navy .mk-h{text-shadow:0 1px 0 rgba(0,0,0,.25)}

.mk-pr{font-family:var(--body); font-weight:700; font-style:normal; font-size:.98rem; letter-spacing:.02em; white-space:nowrap;
  font-variant-numeric:tabular-nums; margin-left:.35em}
.mk-pr small{font-size:.7em; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-left:.1em}

/* Einzelne Gerichte */
.mk-i{margin:0 auto 1.25rem; max-width:34ch}
.mk-i--tight{margin-bottom:.65rem}
.mk-n{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.9rem; line-height:1.35; margin:0}
.mk-n .mk-pr{font-size:.95rem}
.mk-n--sm{font-size:.74rem; letter-spacing:.07em; font-weight:600; color:var(--soft); margin-top:.1rem}
.mk-d{font-family:var(--script); font-size:clamp(1.12rem,1.02rem + .25vw,1.26rem); line-height:1.3; color:var(--soft); margin:.2rem 0 0}
.mk-d .mk-pr{color:var(--fg)}
.mk-v{margin:.15rem 0 0; font-family:var(--script); font-size:1.18rem; color:var(--soft); line-height:1.3}
.mk-v .mk-pr{color:var(--fg)}
.mk-v--d{font-size:1.18rem}
.mk-src{font-family:var(--script); font-size:.98rem; opacity:.7; margin:.3rem 0 0; line-height:1.25}
.mk-vegan{margin:-.5rem 0 1rem; color:var(--mustard-hi)}

/* Frühstückspakete */
.mk-packs{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,3vw,2.8rem) clamp(1.6rem,3vw,3rem); text-align:center}
.mk-pack{max-width:40ch; margin-inline:auto}
.mk-pack-t{font-family:var(--script); text-transform:none; letter-spacing:0; font-weight:400;
  font-size:clamp(1.65rem,1.3rem + 1vw,2.2rem); line-height:1.15; padding:0 .4rem .45rem;
  background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent) bottom/100% 2px no-repeat;
  margin:0 0 .9rem}
.mk-pack-t .mk-pr{font-family:var(--script); font-weight:400; font-size:1em; letter-spacing:0; margin-left:.25em}
.mk-for{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; margin:-.5rem 0 .8rem; color:var(--mustard-hi)}
.mk-caps{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.045em; font-size:.8rem; line-height:1.65; margin:0}
.mk-tag{font-family:var(--script); font-size:1.18rem; line-height:1.3; margin:.8rem 0 0; color:var(--soft)}
.mk-pack--star{position:relative}
.mk-allerg{margin:clamp(2rem,3vw,2.8rem) auto 0; max-width:46ch; padding:1rem 0; color:var(--mustard-hi);
  border-block:1.5px solid var(--gold); font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; line-height:1.6}
.mk-allerg--page{color:var(--muted); border-color:var(--line); margin-top:clamp(2rem,4vw,3rem); text-align:center}

/* Eiergerichte (creme) */
.mk-egg{margin:0 auto 1.6rem; max-width:36ch}
.mk-egg .mk-caps{font-size:.76rem}
.mk-under{font-family:var(--script); font-size:1.3rem; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; margin:1.6rem 0 0}
.mk-note{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; line-height:1.55;
  max-width:30ch; margin:0 auto 1.2rem; color:var(--soft)}

/* Preislisten (Gebäck, Kaffee, Eier) */
.mk-list{list-style:none; margin:0 auto; padding:0; max-width:21rem; text-align:left}
.mk-list li{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.34rem 0;
  font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.045em; font-size:.84rem; line-height:1.3}
.mk-list li.sub{padding-left:1.3rem; font-size:.74rem; font-weight:600; padding-block:.2rem}
.mk-list li em{font-family:var(--script); text-transform:none; font-style:normal; font-weight:400; letter-spacing:0; font-size:1.15em; margin-left:.25rem; opacity:.85}
.mk-list li > span:first-child{min-width:0}
.mk-list .mk-pr{margin-left:0}
.mk-list-t{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.86rem; margin:0 0 .4rem}
.mk-fine{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.68rem; line-height:1.6;
  margin:2.2rem auto 0; max-width:32ch; color:var(--soft)}

/* Titelblatt */
.mk-cover{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(1.3rem,2.4vw,2rem);
  background-image:var(--pattern); background-size:150px 150px; background-position:center}
.mk-logo{display:flex; flex-direction:column; align-items:center; gap:.6rem; width:min(100%,250px)}
.mk-signet{width:clamp(54px,5vw,70px); height:auto}
.mk-wort{width:100%; height:auto}
.mk-cover-t{font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,1.3rem + 1.4vw,2.5rem); letter-spacing:.06em;
  -webkit-mask:url(../img/druck-textur.png) 0 0/220px; mask:url(../img/druck-textur.png) 0 0/220px}
.mk-cover-t::first-letter{font-size:1.2em}
.mk-cover-script{font-family:var(--script); text-transform:none; font-weight:400; letter-spacing:0; line-height:1;
  font-size:clamp(2.8rem,2rem + 2.4vw,4rem); color:#fff; -webkit-text-stroke:7px var(--ink); paint-order:stroke fill;
  text-shadow:0 3px 0 var(--ink); transform:rotate(-4deg); padding-inline:.2em}
.mk-stamp{width:min(172px,60%); height:auto; color:var(--ink); transform:rotate(-9deg); --stamp-bg:var(--mustard);
  -webkit-mask:url(../img/druck-textur.png) 0 0/200px; mask:url(../img/druck-textur.png) 0 0/200px}
.mk-stamp .st-arc{font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:2.5px; fill:currentColor}
.mk-stamp .st-script{font-family:var(--script); font-size:33px; fill:currentColor}
.mk-stamp .st-band{fill:var(--stamp-bg)}
.mk-cover-info{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.74rem; line-height:1.65;
  margin:0; padding-top:1rem; border-top:1.5px solid var(--ink); max-width:26ch}

/* Tagesteller-Einlageblatt */
.mk-p--sheet{--bg:var(--sheet); display:flex; flex-direction:column; align-items:center; gap:.2rem}
.mk-sheet-signet{width:44px; height:auto; margin-bottom:.6rem}
.mk-sheet-t{font-size:clamp(1.25rem,1rem + .7vw,1.6rem); letter-spacing:.08em; margin-bottom:.4rem}
.mk-sheet-s{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; line-height:1.55;
  color:var(--ember); max-width:28ch; margin:0 0 1.3rem}
.mk-week{margin:0; width:100%}
.mk-week-img{display:none; border-radius:4px; overflow:hidden; box-shadow:0 18px 34px -22px rgba(10,18,28,.6); background:#fff;
  transform:rotate(1.2deg); transition:transform .5s var(--ease-out)}
.mk-week-img:hover{transform:rotate(0) scale(1.02)}
.mk-week-img img{width:100%; height:auto}
.mk-week.has-img .mk-week-img{display:block}
.mk-week.has-img .mk-week-fallback{display:none}
.mk-week-fallback{border:1px dashed var(--line); border-radius:6px; padding:1.4rem 1.1rem; font-size:.92rem; line-height:1.55; color:var(--ink-soft)}
.mk-week-fallback .script{display:block; font-size:1.55rem; color:var(--oak); margin-bottom:.3rem}
.mk-sheet-hint{display:none; font-size:.74rem; color:var(--muted); margin:.9rem 0 0}
.mk-week.has-img + .mk-sheet-hint{display:block}

/* Karte responsiv */
@media (max-width:1180px){
  .mk-spread{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-p:first-child,.mk-p:last-child{border-radius:0}
  .mk-spread > .mk-p:first-child{border-top-left-radius:6px}
  .mk-spread > .mk-p:last-child{border-bottom-right-radius:6px}
  .mk-p:nth-child(odd):not(.mk-p--wide) + .mk-p::before{display:block}
  .js .mk-card:not(.is-unfolded) .mk-p{transform:rotateX(-35deg); transform-origin:top center}
}
@media (max-width:1180px) and (min-width:761px){
  /* Frühstück: Titel + Getränke nebeneinander, Pakete über die volle Breite */
  #fruehstueck .mk-spread:first-child{grid-template-areas:"a c" "b b"}
  #fruehstueck .mk-spread:first-child > :nth-child(1){grid-area:a}
  #fruehstueck .mk-spread:first-child > :nth-child(2){grid-area:b}
  #fruehstueck .mk-spread:first-child > :nth-child(3){grid-area:c}
}
@media (max-width:760px){
  .mk-spread{grid-template-columns:1fr; filter:drop-shadow(0 24px 30px rgba(10,18,28,.2))}
  .mk-p--wide{grid-column:auto}
  .mk-packs{grid-template-columns:1fr}
  .mk-p + .mk-p::before{inset:0 0 auto 0; width:auto; height:18px; background:linear-gradient(180deg, rgba(0,0,0,.14), transparent)}
  .mk-spread > .mk-p:first-child{border-radius:6px 6px 0 0}
  .mk-spread > .mk-p:last-child{border-radius:0 0 6px 6px}
  .mk-cover{padding-block:3rem}
  .mk-tabs-bar{padding-inline:.75rem}
  .mk-tab{padding-inline:.5rem}
  .mk-tab-t{letter-spacing:.08em}
  .js .mk-card:not(.is-unfolded) .mk-p{opacity:0; transform:translateY(26px)}
}

/* ---------- Wochenkarte im Hero (Bild, sobald hochgeladen) ---------- */
.wk-shot .wk-img{display:none}
.wk-shot.has-img{aspect-ratio:auto; border:0; padding:0; background:transparent; display:block}
.wk-shot.has-img .wk-img{display:block}
.wk-shot.has-img .wk-fallback{display:none}
.wk-shot .wk-img img{width:100%; height:auto; object-fit:contain; border-radius:4px}
.wk-fallback{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; height:100%}

/* ---------- Mittagstisch-Liste mit Preisen ---------- */
.week li{grid-template-columns:5rem 1fr auto}
.wp{font-family:var(--display); letter-spacing:.06em; font-size:clamp(.95rem,.85rem + .3vw,1.15rem); color:var(--oak-soft); white-space:nowrap}
@media (max-width:560px){ .week li{grid-template-columns:2.4rem 1fr} .wp{grid-column:2} }

/* ---------- Workation ---------- */
.partner-note{display:flex; align-items:center; gap:1rem; margin-top:1.8rem; text-decoration:none; max-width:30rem}
.partner-note img{width:76px; height:76px; flex:none; transition:transform .6s var(--ease-out)}
.partner-note:hover img{transform:rotate(-8deg) scale(1.05)}
.partner-note span{font-size:.9rem; line-height:1.5; color:var(--ink-soft)}
.partner-note b{display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; font-weight:600; color:var(--ink); margin-bottom:.15rem}
.wk-media{position:relative}
.split-media .wk-sticker,.wk-sticker{position:absolute; width:clamp(110px,13vw,168px); height:auto; right:clamp(-1rem,-1.5vw,-.5rem); top:clamp(-1.4rem,-2vw,-1rem);
  transform:rotate(-10deg); filter:drop-shadow(0 14px 18px rgba(10,18,28,.35)); z-index:2}
.js .wk-sticker{opacity:0; transform:rotate(-40deg) scale(.6); transition:opacity .6s var(--ease), transform 1s var(--ease-out) .25s}
.js .wk-media .rv-img.in ~ .wk-sticker{opacity:1; transform:rotate(-10deg)}
.foot-extra{display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
  padding-block:clamp(2rem,3vw,2.6rem); border-top:1px solid rgba(243,239,230,.12)}
.f-nl{display:flex; align-items:center; gap:.4rem 1.6rem; flex-wrap:wrap; max-width:46rem}
.f-nl .script{font-size:1.5rem; color:var(--oak-soft)}
.f-nl p{margin:0; font-size:.95rem; flex:1 1 16rem}
.f-partner{display:flex; align-items:center; gap:1rem; text-decoration:none}
.f-partner img{width:74px; height:74px; transition:transform .6s var(--ease-out)}
.f-partner:hover img{transform:rotate(-8deg)}
.f-partner span{font-size:.82rem; line-height:1.5; max-width:22ch}
.f-partner b{display:block; color:var(--paper); font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-weight:500; font-size:.74rem}

/* ---------- Reservierung ---------- */
.res-sec{padding-top:clamp(1rem,2vw,2rem)}
.res-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.res-form{gap:0; box-shadow:0 30px 60px -40px rgba(10,18,28,.45)}
.res-step{border:0; margin:0; padding:0 0 1.8rem; display:grid; gap:1.15rem; min-width:0}
.res-step + .res-step{border-top:1px solid var(--line-soft); padding-top:1.8rem}
.res-step legend{display:flex; align-items:center; gap:.8rem; padding:0; margin-bottom:1.15rem;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:clamp(1.15rem,1rem + .5vw,1.45rem); font-weight:600}
.res-no{display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--mustard); color:var(--ink);
  font-size:.95rem; letter-spacing:0}
.res-msg{margin:-.3rem 0 0; font-size:.88rem; color:var(--ember-deep); background:rgba(196,86,31,.07); border-radius:6px; padding:.7rem .9rem}
.res-msg--info{color:var(--ink-soft); background:var(--sand)}
.res-msg a{color:inherit}
.stepper{display:flex; align-items:stretch; width:max-content; border:1px solid var(--line); border-radius:999px; background:var(--paper); overflow:hidden}
.stepper input{width:4.2rem; text-align:center; border:0; border-radius:0; background:transparent; font-weight:700; font-size:1.1rem; -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.st-btn{width:3rem; border:0; background:transparent; font-size:1.3rem; cursor:pointer; color:var(--ink); transition:background .25s}
.st-btn:hover{background:var(--sand)}
.res-submit{display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap; margin-top:1.2rem}
.res-summary{margin:0; font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--oak)}
.res-form .form-note{margin-top:.4rem}
.res-aside .res-photo{border-radius:6px; margin-bottom:2.2rem; aspect-ratio:810/750}
.res-aside .res-photo img{width:100%; height:100%; object-fit:cover}
.res-aside .info-block p{font-size:1rem}
@media (max-width:980px){
  .res-grid{grid-template-columns:1fr}
  .res-aside{display:grid; grid-template-columns:1fr 1fr; gap:0 2rem}
  .res-aside .res-photo{grid-column:1/-1; aspect-ratio:16/9}
}
@media (max-width:560px){ .res-aside{grid-template-columns:1fr} }

/* ---------- Danke-Seite ---------- */
.danke-head{min-height:70vh}
.danke-script{display:block; font-family:var(--script); font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); color:var(--oak); margin-bottom:.6rem}

@media (prefers-reduced-motion:reduce){
  .js .mk-card:not(.is-unfolded) .mk-p{opacity:1; transform:none}
  .js .wk-sticker{opacity:1; transform:rotate(-10deg)}
}
.mk-p--eggs{display:flex; flex-direction:column; align-items:center}
.mk-p--eggs .mk-egg{margin-block:auto}
.mk-p--eggs .mk-egg:first-of-type{margin-top:.4rem}
.mk-p--eggs .mk-under{margin-top:auto}
@media (max-width:760px){ .mk-p--eggs .mk-egg{margin-block:0 1.6rem} }
.mk-p--full{grid-column:1/-1; border-radius:6px !important}
.mk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.6rem clamp(1.4rem,3vw,3rem); align-items:start; max-width:1240px; margin-inline:auto}
.mk-grid .mk-i{margin:0 auto; max-width:32ch}
.mk-p--sheet{justify-content:center}
.mk-sheet-to{margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--line-soft); font-size:.9rem; line-height:1.55; color:var(--ink-soft); max-width:28ch}
.mk-sheet-to .script{display:block; font-size:1.4rem; color:var(--oak); margin-bottom:.25rem}
.mk-sheet-to a{font-weight:700; white-space:nowrap}
.mk-p--main .mk-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 2rem}
@media (max-width:760px){ .mk-p--main .mk-grid{grid-template-columns:1fr} }
.mk-h > span{display:inline-block}
.mk-h > span::first-letter{font-size:1.28em}
.res-step + .res-step{border-top:0; box-shadow:inset 0 1px 0 var(--line-soft)}
.res-step legend{float:left; width:100%}
.res-step legend + *{clear:both}
#tagesteller{scroll-margin-top:calc(var(--header-h) + 100px)}

/* ==========================================================================
   Überarbeitung 24. September 2026 (vierter Durchgang)
   Wochenkarte im Hero gerade, Bild enger gesetzt (größere Schrift) · Öffnungsstatus nach links
   ========================================================================== */
:root{--wk-pad:clamp(.7rem,1vw,.9rem); --wk-chrome:74px; --wk-ratio:1.17;
  /* Höhe, die der Karte im Bild zur Verfügung steht (oben Kopfzeile, unten Rand, dazu Luft) */
  --wk-room:calc(100svh - var(--header-h) - var(--gutter) - 52px)}
.weekcard{
  top:calc(50% + (var(--header-h) - var(--gutter)) / 2);
  right:calc(var(--gutter) + clamp(1.2rem,3vw,3rem));
  /* Größe wie bisher (Wunsch David): Breite folgt Fensterbreite und -höhe */
  width:clamp(240px, min(31vw, 81svh - 250px), 470px);
  padding:var(--wk-pad);
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:.75rem 1rem;
  transform:translateY(-50%);
}
.weekcard:hover{transform:translateY(calc(-50% - 4px))}
.js .weekcard{opacity:0; transform:translateY(calc(-50% + 26px))}
.js .opening.is-open .weekcard{opacity:1; transform:translateY(-50%)}
.js .opening.is-open .weekcard:hover{transform:translateY(calc(-50% - 4px))}
.wk-head{flex-direction:row; align-items:baseline; gap:.7rem; padding:0 .25rem; min-width:0}
.wk-kicker{font-size:1.4rem}
.wk-shot{grid-column:1 / -1; grid-row:2}
.wk-link{grid-column:2; grid-row:1; border-top:0; padding:.2rem .25rem .3rem; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem}
.wk-link::after{content:"→"; font-family:var(--body, inherit); letter-spacing:0; transition:transform .3s var(--ease-out)}
.wk-link:hover::after{transform:translateX(3px)}
.wk-shot.has-img .wk-img{box-shadow:0 0 0 1px rgba(22,38,58,.08); border-radius:3px; background:#fff}
.opening .wk-shot .wk-img img{max-height:calc(var(--wk-room) - var(--wk-chrome)); width:auto; max-width:100%; margin-inline:auto; display:block; border-radius:3px}

/* Öffnungsstatus: oben links über dem Hero-Text, damit rechts Platz für die Wochenkarte ist */
.op-status{right:auto; left:var(--pad); top:calc(var(--header-h) + clamp(1.2rem,3.2vh,2rem))}

/* Handy: Wochenkarte im Mittagstisch-Abschnitt über die volle Breite */
.wk-mount .weekcard{width:min(560px,100%); transform:none}
.js .wk-mount .weekcard,.js .wk-mount .weekcard:hover,.wk-mount .weekcard:hover{transform:none}

@media (max-width:980px){
  .weekcard{right:calc(var(--gutter) + 1rem)}
}
@media (max-width:760px){
  .wk-mount{justify-content:center}
}
.weekcard{container-type:inline-size}
@container (max-width:430px){ .wk-title{display:none} }