/* Croque Mafia · klassische Variante (warm, Messing und Gold). Florian findet sie ästhetischer (30.09.2026).
   Übernommen aus website-entwuerfe/croque-mafia-final.html; Bestellung, Kasse und Küche teilt sie mit der
   Noir-Variante. Schriften liegen lokal, es wird nichts von Google geladen. */
@font-face{ font-family:"Big Shoulders Display"; src:url("../fonts/big-shoulders-display.woff2") format("woff2"); font-weight:500 900; font-display:swap; }
@font-face{ font-family:"Karla"; src:url("../fonts/karla.woff2") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face{ font-family:"Karla"; src:url("../fonts/karla-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Rye"; src:url("../fonts/rye.woff2") format("woff2"); font-display:swap; }

:root{
  --ink:#0a0807;         --ink: oklch(9% 0.008 50);
  --ink-2:#12100e;       --ink-2: oklch(13% 0.01 50);
  --ink-3:#1a1613;       --ink-3: oklch(18% 0.012 52);
  --paper:#f4ebd7;       --paper: oklch(93.5% 0.028 82);
  --paper-dim:#b6a888;   --paper-dim: oklch(73% 0.035 78);
  --gold-lo:#8a6320;     --gold-lo: oklch(52% 0.10 70);
  --gold:#d7a53c;        --gold: oklch(76% 0.13 75);
  --gold-hi:#f4d183;     --gold-hi: oklch(88% 0.10 85);
  --red:#7a2318;         --red: oklch(36% 0.14 27);
  --red-hi:#c8564a;      --red-hi: oklch(64% 0.15 27);
  --brass:linear-gradient(135deg, var(--gold-hi), var(--gold-lo) 72%);
  --hair: color-mix(in oklch, var(--gold) 42%, transparent);
  --hair-soft: color-mix(in oklch, var(--gold) 18%, transparent);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --fd:"Big Shoulders Display", 'Arial Narrow', sans-serif;
  --fs:"Rye", Georgia, serif;
  --fb:"Karla", system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark;}
body{
  background:var(--ink); color:var(--paper);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  font-family:var(--fb); font-size:16px; line-height:1.62;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--gold); color:var(--ink);}
.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,56px);}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px;}

body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:900;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.flanked{
  display:flex; align-items:center; gap:12px;
  font-family:var(--fd); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; font-size:12px; color:var(--gold-hi);
}
.flanked::before,.flanked::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--hair));}
.flanked::after{background:linear-gradient(90deg,var(--hair),transparent);}
.flanked.left::before{display:none;}

.call-btn{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--brass); color:var(--ink);
  font-family:var(--fd); font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; text-decoration:none;
  padding:16px 30px; border-radius:1px; font-size:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 14px 30px -14px rgba(0,0,0,.85);
  transition:transform 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .call-btn:hover{transform:translateY(-2px);}
}
.call-btn:active{transform:scale(.97);}
.call-btn svg{width:17px; height:17px; flex:none;}
.call-btn.sm{padding:10px 18px; font-size:13px;}
.call-btn.sm svg{width:14px; height:14px;}

/* ================= AUTOPLAY-HERO ================= */
#hero{position:relative; height:100dvh; min-height:620px;}
.hero-stage{
  position:relative; height:100%; overflow:hidden;
  background:#000 url('../img/hero-poster.jpg?v=12') center/cover no-repeat;
}
@media (max-width:760px) and (orientation:portrait){
  .hero-stage{background-image:url('../img/hero-poster-hochkant.jpg?v=13');}
}
#heroVideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; transition:opacity .6s ease;
}
#heroVideo.blende{opacity:0;}
.hero-stage.ohne-film #heroVideo{visibility:hidden;}
.hero-animation{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
}
.hero-animation[hidden]{display:none;}
.hero-stage.ohne-film::before{
  content:""; position:absolute; inset:0; background:inherit; transform-origin:50% 45%;
  animation:standbild-fahrt 16s ease-in-out infinite alternate;
}
@keyframes standbild-fahrt{to{transform:scale(1.1);}}
.hero-stage.stilles-standbild::before{animation:none;}
@media (prefers-reduced-motion: reduce){ .hero-stage.ohne-film::before{animation:none;} }
.hero-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(0deg, var(--ink) 2%, rgba(10,8,7,.35) 26%, transparent 52%),
    linear-gradient(100deg, rgba(10,8,7,.86) 2%, rgba(10,8,7,.34) 32%, transparent 60%),
    radial-gradient(130% 95% at 50% 50%, transparent 42%, rgba(0,0,0,.62) 100%);
}
.hero-frame{position:absolute; inset:14px; pointer-events:none; z-index:4;}
.hero-frame span{position:absolute; width:38px; height:38px;}
.hero-frame span:nth-child(1){top:0; left:0; border-top:2px solid var(--gold); border-left:2px solid var(--gold);}
.hero-frame span:nth-child(2){top:0; right:0; border-top:2px solid var(--gold); border-right:2px solid var(--gold);}
.hero-frame span:nth-child(3){bottom:0; left:0; border-bottom:2px solid var(--gold); border-left:2px solid var(--gold);}
.hero-frame span:nth-child(4){bottom:0; right:0; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold);}

.hero-bar{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px clamp(24px,5vw,56px);
}
.hero-bar .mark{
  font-family:var(--fd); font-weight:800; font-size:20px;
  letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:12px;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
}
.hero-bar .mark img{
  width:62px; height:62px; display:block; flex:none; object-fit:contain; object-position:center;
}
.hero-bar .mark b{color:var(--gold-hi); font-weight:900;}

/* Textkapitel, die zur Fahrt passen */
.hero-caption{
  position:absolute; z-index:5; left:0; right:0;
  padding-inline:clamp(24px,6vw,72px);
  opacity:0; pointer-events:none;
  transform:translateY(18px);
  transition:opacity .42s ease, transform .42s var(--ease-out);
}
.hero-caption.is-on{pointer-events:auto;}
.cap-1{bottom:clamp(90px,14vh,160px);}
.cap-2{bottom:clamp(90px,14vh,160px);}
.cap-3{bottom:clamp(70px,10vh,120px);}
.hero-caption h1{
  font-family:var(--fd); font-weight:900; text-transform:uppercase;
  font-size:clamp(46px,8.4vw,116px); line-height:.9; letter-spacing:-.012em;
  max-width:16ch; text-wrap:balance;
  text-shadow:0 6px 46px rgba(0,0,0,.72);
}
.hero-caption h1 em{font-style:normal; color:var(--gold-hi);}
.hero-caption .sub{
  margin-top:20px; max-width:44ch; font-size:clamp(15px,1.7vw,18.5px);
  color:var(--paper); text-shadow:0 2px 20px rgba(0,0,0,.85);
}
.hero-caption .quote{
  font-family:var(--fs); font-size:clamp(24px,3.6vw,46px); line-height:1.15;
  color:var(--gold-hi); max-width:18ch;
  text-shadow:0 6px 40px rgba(0,0,0,.8);
}
.hero-caption .cta-row{margin-top:28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.ghost-cta{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--fd); font-weight:800; font-size:15px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--paper);
  border:1px solid var(--hair); padding:15px 24px;
  transition:transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease;
}
@media (hover:hover) and (pointer:fine){
  .ghost-cta:hover{border-color:var(--gold); background:rgba(215,165,60,.10); transform:translateY(-2px);}
}
.ghost-cta:active{transform:scale(.97);}
.hero-caption .hint{font-size:13px; color:var(--paper-dim); display:flex; align-items:center; gap:8px;}
.hero-caption .hint .dot{
  width:8px; height:8px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--gold) 28%, transparent);
}

.hero-loading{
  position:absolute; inset:0; z-index:7; display:grid; place-items:center;
  pointer-events:none; transition:opacity .6s ease;
}
.hero-loading.gone{opacity:0; pointer-events:none;}
.hero-play{
  position:absolute; inset:0; z-index:8; margin:auto;
  width:max-content; height:max-content; min-height:44px;
}
.hero-stage.mit-animation .hero-play, .hero-stage .hero-stop{
  position:absolute; inset:88px 24px auto auto; z-index:8; margin:0;
  min-height:44px; padding:10px 12px; font-size:12px;
  color:var(--paper); background:var(--ink); border:1px solid var(--hair);
}
.hero-stage .hero-stop{inset:88px auto auto 24px;}
.hero-play[hidden], .hero-stop[hidden]{display:none;}
.hero-loading .ring{
  width:46px; height:46px; border:2px solid var(--hair-soft);
  border-top-color:var(--gold); border-radius:50%;
  opacity:0; animation:spin 1s linear infinite, ring-zeigen .3s ease-out 1s forwards;
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes ring-zeigen{to{opacity:1;}}

/* ================= SEITE ================= */
section{padding:clamp(76px,10vw,132px) 0;}
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,58px);}
h2{font-family:var(--fd); font-weight:900; text-transform:uppercase; font-size:clamp(34px,5vw,60px); line-height:.97; text-wrap:balance;}
h2 em{font-style:normal; color:var(--gold-hi);}
.head-row p{max-width:40ch; color:var(--paper-dim); font-size:15.5px;}

/* Ablauf */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair-soft); border:1px solid var(--hair);}
.steps.two{grid-template-columns:repeat(2,1fr);}
.step.way{align-items:flex-start;}
.step.way > span:last-child{display:flex; flex-direction:column; align-items:flex-start;}
.step.way .n{width:42px; height:42px;}
.step.way .n svg{width:19px; height:19px;}
.step.way strong{font-size:19px; margin-bottom:7px;}
.way-link{
  display:inline-block; margin-top:14px; font-family:var(--fd); font-weight:800;
  font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-hi);
  text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:3px;
  transition:border-color 160ms ease;
}
@media (hover:hover) and (pointer:fine){ .way-link:hover{border-color:var(--gold-hi);} }
.step{background:var(--ink-2); padding:32px clamp(20px,2.4vw,32px); display:flex; gap:16px; align-items:flex-start;}
.step .n{
  flex:none; width:36px; height:36px; border:1px solid var(--gold-lo); border-radius:50%;
  display:grid; place-items:center; font-family:var(--fd); font-weight:900; font-size:15px; color:var(--gold);
}
.step strong{display:block; font-family:var(--fd); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:17px; margin-bottom:5px;}
.step span{font-size:13.5px; color:var(--paper-dim);}

/* Karte */
.menu{
  display:grid; grid-template-columns:1.25fr .95fr;
  border:1px solid var(--hair); position:relative;
  background:linear-gradient(165deg, color-mix(in oklch, var(--gold) 4%, var(--ink-2)), var(--ink) 62%);
}
.menu::before{content:""; position:absolute; top:-1px; left:-1px; width:26px; height:26px; border-top:2px solid var(--gold); border-left:2px solid var(--gold);}
.menu::after{content:""; position:absolute; bottom:-1px; right:-1px; width:26px; height:26px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold);}
.menu-list{padding:clamp(28px,3.4vw,44px);}
.m-row{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:baseline; padding:21px 0; border-bottom:1px solid var(--hair-soft); transition:padding-left .25s cubic-bezier(.16,1,.3,1);}
.m-row:first-child{padding-top:0;}
.m-row:last-of-type{border-bottom:none;}
.m-row:hover{padding-left:9px;}
.m-row .i{font-family:var(--fd); font-weight:800; font-size:13px; color:var(--paper-dim);}
.m-row .nm{font-family:var(--fd); font-weight:800; text-transform:uppercase; font-size:clamp(20px,2.3vw,26px);}
.m-row .ing{display:block; font-family:var(--fb); font-weight:400; text-transform:none; font-size:13.5px; color:var(--paper-dim); margin-top:4px;}
.m-row .pr{font-family:var(--fd); font-weight:800; font-size:22px; color:var(--gold-hi); font-variant-numeric:tabular-nums;}
.menu-note{margin-top:22px; padding-top:18px; border-top:1px solid var(--hair-soft); font-size:13px; color:var(--paper-dim);}
.menu-photo{position:relative; border-left:1px solid var(--hair); overflow:hidden; min-height:380px;}
.menu-photo img{width:100%; height:100%; object-fit:cover;}
.menu-photo::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 100px 24px rgba(0,0,0,.7);}
.seal{
  position:absolute; z-index:2; top:20px; left:20px;
  width:88px; height:88px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--gold-hi), var(--gold-lo) 74%);
  display:grid; place-items:center; text-align:center; transform:rotate(-9deg);
  border:2px solid var(--ink); box-shadow:0 12px 26px -10px rgba(0,0,0,.7);
}
.seal span{font-family:var(--fd); font-weight:900; font-size:10.5px; line-height:1.25; letter-spacing:.05em; text-transform:uppercase; color:var(--ink);}

/* Don-Sektion */
.don{background:var(--ink-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.don-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(30px,5vw,68px); align-items:center;}
/* Pflichthinweis für KI-Bilder (Art. 50 KI-Verordnung), klein und lesbar am Bild selbst */
.ki-hinweis{position:absolute; right:12px; bottom:12px; z-index:6; padding:3px 7px; font:400 11px/1.3 "Karla", sans-serif; letter-spacing:.06em; color:var(--paper-dim); background:rgba(10,8,7,.72); pointer-events:none;}
.don blockquote{font-family:var(--fs); font-size:clamp(23px,3.2vw,38px); line-height:1.16; color:var(--paper); margin:18px 0 22px;}
.don blockquote em{font-style:normal; color:var(--gold-hi);}
.don p{color:var(--paper-dim); max-width:52ch; margin-bottom:24px; font-size:15.5px;}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair-soft); border:1px solid var(--hair); margin-top:30px;}
.facts div{background:var(--ink-2); padding:17px;}
.facts strong{display:block; font-family:var(--fd); font-weight:800; text-transform:uppercase; font-size:12.5px; letter-spacing:.04em; color:var(--gold-hi); margin-bottom:5px;}
.facts span{font-size:12.5px; color:var(--paper-dim);}

/* Laufband */
.marquee{overflow:hidden; padding:19px 0; border-bottom:1px solid var(--hair);}
.mq-track{display:flex; gap:46px; width:max-content; animation:scroll 30s linear infinite;}
.mq-track span{font-family:var(--fd); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:15px; color:var(--paper-dim); white-space:nowrap; display:flex; align-items:center; gap:46px;}
.mq-track span::after{content:"◆"; color:var(--gold); font-size:9px;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* Besuch */
.visit{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair-soft); border:1px solid var(--hair);}
.visit > div{background:var(--ink-2); padding:clamp(28px,3.4vw,40px); display:flex; flex-direction:column; gap:15px;}
.visit h3{font-family:var(--fd); font-weight:800; text-transform:uppercase; font-size:19px; letter-spacing:.03em; color:var(--gold-hi); display:flex; align-items:center; gap:10px;}
.visit h3 svg{width:17px; height:17px; flex:none;}
.hr{display:flex; justify-content:space-between; font-size:14.5px; padding:9px 0; border-bottom:1px solid var(--hair-soft);}
.hr:last-of-type{border-bottom:none;}
.hr b{font-family:var(--fd); font-weight:700; letter-spacing:.02em;}
.ph-note{color:var(--paper-dim); font-size:13.5px; font-style:italic;}

footer{padding:clamp(44px,6vw,68px) 0 34px; border-top:1px solid var(--hair);}
.f-top{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:26px;}
.f-mark{display:flex; align-items:center; gap:14px;}
.f-mark img{width:54px; height:54px; border-radius:50%; border:1px solid var(--gold-lo);}
.f-social{display:flex; gap:10px; flex-wrap:wrap;}
.f-social a{padding:9px 16px; border:1px solid var(--hair); color:var(--paper); text-decoration:none; font-family:var(--fd); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:13px;}
.f-social a:hover{border-color:var(--gold); color:var(--gold-hi);}
.f-mark .t{font-family:var(--fd); font-weight:800; text-transform:uppercase; font-size:17px; letter-spacing:.03em;}
.f-mark .t small{display:block; font-family:var(--fb); font-weight:400; text-transform:none; letter-spacing:0; color:var(--paper-dim); font-size:12px; margin-top:2px;}
.soc{display:flex; gap:10px;}
.soc a{width:40px; height:40px; border:1px solid var(--hair); border-radius:50%; display:grid; place-items:center; transition:border-color .2s,color .2s;}
.soc a:hover{border-color:var(--gold); color:var(--gold-hi);}
.soc svg{width:16px; height:16px;}
.f-bot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--paper-dim); padding-top:20px; border-top:1px solid var(--hair-soft);}
.f-bot a{text-decoration:underline; text-underline-offset:3px;}


/* ================= BESTELLEN ================= */
.m-row{grid-template-columns:auto 1fr auto auto;}
.add-btn{
  flex:none; width:42px; height:42px; margin-left:14px;
  display:grid; place-items:center;
  background:transparent; color:var(--gold-hi);
  border:1px solid var(--hair); border-radius:50%;
  font-family:var(--fd); font-weight:800; font-size:22px; line-height:1;
  cursor:pointer;
  transition:transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
@media (hover:hover) and (pointer:fine){
  .add-btn:hover{background:var(--brass); color:var(--ink); border-color:transparent;}
}
.add-btn:active{transform:scale(.92);}
.add-btn.added{background:var(--brass); color:var(--ink); border-color:transparent;}

/* Bestell-Leiste, erscheint sobald etwas im Korb liegt */
.cart-bar{
  position:fixed; z-index:820; left:0; right:0; bottom:0;
  padding:12px clamp(16px,4vw,32px) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in oklch, var(--ink) 93%, transparent);
  backdrop-filter:blur(14px); border-top:1px solid var(--hair);
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  transform:translateY(100%);
  transition:transform 250ms var(--ease-out);
}
.cart-bar[data-open="true"]{transform:translateY(0); transition-duration:400ms;}
.cart-sum{display:flex; align-items:baseline; gap:12px; min-width:0;}
.cart-sum .cnt{
  font-family:var(--fd); font-weight:800; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-hi);
}
.cart-sum .tot{
  font-family:var(--fd); font-weight:900; font-size:26px; color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.cart-actions{display:flex; align-items:center; gap:10px;}
.ghost-btn{
  background:transparent; color:var(--paper-dim); border:1px solid var(--hair);
  font-family:var(--fd); font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; padding:13px 18px; cursor:pointer;
  transition:transform 160ms var(--ease-out), color 160ms ease, border-color 160ms ease;
}
@media (hover:hover) and (pointer:fine){
  .ghost-btn:hover{color:var(--paper); border-color:var(--gold);}
}
.ghost-btn:active{transform:scale(.97);}

/* Kassen-Schublade */
.sheet-scrim{
  position:fixed; inset:0; z-index:840; background:rgba(6,5,4,.72);
  opacity:0; pointer-events:none; transition:opacity 250ms ease;
}
.sheet-scrim[data-open="true"]{opacity:1; pointer-events:auto;}
.sheet{
  position:fixed; z-index:850; left:0; right:0; bottom:0;
  max-height:min(88dvh, 780px); overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(170deg, var(--ink-3), var(--ink-2) 55%);
  border-top:1px solid var(--gold-lo);
  padding:26px clamp(20px,5vw,40px) 0;
  transform:translateY(100%);
  transition:transform 250ms var(--ease-drawer);
}
.sheet[data-open="true"]{transform:translateY(0); transition-duration:440ms;}
.sheet-inner{max-width:640px; margin:0 auto;}
.sheet-grip{width:44px; height:4px; border-radius:2px; background:var(--hair); margin:0 auto 20px;}
.sheet h3{
  font-family:var(--fd); font-weight:900; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,32px); margin-bottom:4px;
}
.sheet .don-line{font-family:var(--fs); color:var(--gold-hi); font-size:15px; margin-bottom:22px;}

.line{
  display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--hair-soft);
}
.line .nm{font-family:var(--fd); font-weight:800; text-transform:uppercase; font-size:17px;}
.line .each{display:block; font-family:var(--fb); font-weight:400; text-transform:none; font-size:12.5px; color:var(--paper-dim); margin-top:2px;}
.qty{display:flex; align-items:center; gap:4px; border:1px solid var(--hair); }
.qty button{
  width:36px; height:36px; background:transparent; color:var(--gold-hi); border:none;
  font-family:var(--fd); font-weight:800; font-size:19px; cursor:pointer;
  transition:background-color 120ms ease;
}
@media (hover:hover) and (pointer:fine){ .qty button:hover{background:rgba(215,165,60,.14);} }
.qty button:active{background:rgba(215,165,60,.26);}
.qty span{min-width:26px; text-align:center; font-family:var(--fd); font-weight:800; font-size:16px; font-variant-numeric:tabular-nums;}
.line .sub{font-family:var(--fd); font-weight:800; font-size:17px; color:var(--gold-hi); font-variant-numeric:tabular-nums; min-width:72px; text-align:right;}

.choice{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0 18px;}
.choice label{
  display:flex; align-items:center; gap:10px; padding:15px 16px;
  border:1px solid var(--hair); cursor:pointer; font-size:14.5px;
  transition:border-color 160ms ease, background-color 160ms ease;
}
.choice label:has(input:checked){border-color:var(--gold); background:rgba(215,165,60,.09);}
.choice label:has(input:disabled){opacity:.5; cursor:not-allowed;}
.choice input{accent-color:var(--gold); width:18px; height:18px; flex:none;}
.choice b{font-family:var(--fd); font-weight:800; text-transform:uppercase; letter-spacing:.02em; display:block; font-size:15px;}
.choice small{color:var(--paper-dim); font-size:12.5px;}

.totals{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; margin-left:auto; text-align:right;}
.totals .lbl{font-family:var(--fb); font-weight:400; font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--paper-dim);}
.totals .val{font-family:var(--fd); font-weight:900; font-size:28px; line-height:1; color:var(--gold-hi); font-variant-numeric:tabular-nums;}
.pay-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:4px 0 18px; font-size:12px; color:var(--paper-dim);}
.pay-chip{border:1px solid var(--hair-soft); padding:5px 10px; font-family:var(--fd); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:11px;}
.sheet .call-btn{width:100%; justify-content:center;}
.sheet-note{margin-top:14px; font-size:12px; color:var(--paper-dim); text-align:center;}
.empty-note{color:var(--paper-dim); font-size:14.5px; padding:22px 0;}

@media (max-width:900px){
  .choice{grid-template-columns:1fr;}
  .line{grid-template-columns:1fr auto; row-gap:10px;}
  .line .sub{grid-column:2; text-align:right;}
}
@media (prefers-reduced-motion: reduce){
  .cart-bar,.sheet{transition-duration:1ms !important;}
}

/* Fixe Anrufleiste am Handy */
.call-dock{
  position:fixed; z-index:800; left:0; right:0; bottom:var(--cart-space,0px); display:none;
  transition:bottom 300ms var(--ease-out);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in oklch, var(--ink) 92%, transparent);
  backdrop-filter:blur(12px); border-top:1px solid var(--hair);
}
.call-dock .call-btn{width:100%; justify-content:center;}

@media (max-width:900px){
  #hero{height:100svh; min-height:620px;}
  .steps, .steps.two{grid-template-columns:1fr;}
  .menu{grid-template-columns:1fr;}
  .menu-photo{min-height:230px; border-left:none; border-top:1px solid var(--hair);}
  .don-grid{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr;}
  .visit{grid-template-columns:1fr;}
  .call-dock{display:block;}
  body{padding-bottom:calc(78px + var(--cart-space,0px));}
  .hero-caption h1{font-size:clamp(38px,11vw,64px);}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .mq-track{animation:none;}
}
/* ========== Seitenstruktur: Sprungnavigation, Bereiche, Klickpfade ========== */

/* Sprungziele nicht unter die feste Leiste rutschen lassen */
#bereiche, #ablauf, #karte, #don, #besuch{scroll-margin-top:78px;}

/* --- Feste Navigation, erscheint erst nach dem Hero --- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:850;
  display:flex; align-items:center; gap:clamp(12px,2.2vw,30px);
  padding:11px clamp(20px,5vw,56px);
  background:color-mix(in oklch, var(--ink) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--hair-soft);
  opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity 180ms ease, transform 240ms var(--ease-out);
}
.nav[data-on="true"]{opacity:1; transform:translateY(0); pointer-events:auto;}
.nav-mark{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none;}
.nav-mark img{width:38px; height:38px; flex:none; object-fit:contain; object-position:center; display:block;}
.nav-mark span{
  font-family:var(--fd); font-weight:800; font-size:16px;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
.nav-mark b{color:var(--gold-hi); font-weight:900;}

.nav-links{
  display:flex; align-items:center; gap:clamp(8px,1.6vw,22px);
  flex:1; min-width:0; overflow-x:auto; scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none;}
.nav-link{
  position:relative; flex:none; text-decoration:none; padding:11px 2px;
  font-family:var(--fd); font-weight:700; font-size:13.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--paper-dim);
  white-space:nowrap;
  transition:color 160ms ease, transform 160ms var(--ease-out);
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:5px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform 200ms var(--ease-out);
}
.nav-link[aria-current="true"]{color:var(--paper);}
.nav-link[aria-current="true"]::after{transform:scaleX(1);}
@media (hover:hover) and (pointer:fine){ .nav-link:hover{color:var(--paper);} }
.nav-link:active{transform:scale(.97);}

.nav-actions{display:flex; align-items:center; gap:10px; flex:none;}
.nav-cart{
  display:none; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--fd); font-weight:800; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--paper);
  background:transparent; border:1px solid var(--hair); padding:10px 15px;
  transition:transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease;
}
.nav-cart[data-on="true"]{display:inline-flex;}
@media (hover:hover) and (pointer:fine){
  .nav-cart:hover{border-color:var(--gold); background:rgba(215,165,60,.10);}
}
.nav-cart:active{transform:scale(.97);}
.nav-cart svg{width:16px; height:16px; flex:none;}
.nav-cart .n{
  min-width:21px; height:21px; padding:0 6px; border-radius:11px;
  display:grid; place-items:center; background:var(--brass); color:var(--ink);
  font-size:12px; font-weight:900; font-variant-numeric:tabular-nums;
}

/* --- Bereichslinks im Hero-Kopf --- */
.hero-nav{display:flex; align-items:center; gap:clamp(14px,2.2vw,30px);}
.hero-nav a{
  text-decoration:none; padding:8px 1px;
  font-family:var(--fd); font-weight:700; font-size:13.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
  text-shadow:0 2px 14px rgba(0,0,0,.9);
  border-bottom:1px solid transparent;
  transition:border-color 160ms ease, transform 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .hero-nav a:hover{border-bottom-color:var(--gold);} }
.hero-nav a:active{transform:scale(.97);}

/* --- Anklickbare Bereiche --- */
#bereiche{padding:clamp(52px,7vw,86px) 0 clamp(6px,1vw,12px);}
.bereiche{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hair-soft); border:1px solid var(--hair);
}
.bereich{
  display:flex; flex-direction:column; gap:9px; min-height:210px;
  padding:clamp(20px,2.4vw,30px);
  background:var(--ink-2); color:inherit; text-decoration:none;
  opacity:0; transform:translateY(10px);
  transition:opacity 260ms ease, transform 260ms var(--ease-out), background-color 200ms ease;
}
.bereich.is-in{opacity:1; transform:translateY(0);}
@media (hover:hover) and (pointer:fine){
  .bereich:hover{background:var(--ink-3);}
  .bereich:hover .b-go{transform:translateX(4px); color:var(--gold-hi);}
}
.bereich:active{transform:translateY(0) scale(.985);}
.bereich .b-i{
  font-family:var(--fd); font-weight:700; font-size:12px;
  letter-spacing:.22em; color:var(--gold);
}
.bereich h3{
  font-family:var(--fd); font-weight:900; text-transform:uppercase;
  font-size:clamp(21px,2.1vw,27px); line-height:1; letter-spacing:-.01em;
}
.bereich p{font-size:14px; line-height:1.5; color:var(--paper-dim);}
.bereich .b-go{
  margin-top:auto; padding-top:16px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fd); font-weight:800; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--paper);
  transition:transform 200ms var(--ease-out), color 200ms ease;
}
.bereich .b-go svg{width:15px; height:15px;}

/* --- Anschluss am Ende eines Bereichs: kein Weg endet im Nichts --- */
.weiter{
  margin-top:clamp(30px,4vw,46px); padding-top:22px;
  border-top:1px solid var(--hair-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
}
.weiter > span{
  font-family:var(--fd); font-weight:700; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim);
}

@media (max-width:900px){
  .hero-nav{display:none;}
  .bereiche{grid-template-columns:repeat(2,1fr);}
  .bereich{min-height:0;}
  .nav{padding-inline:16px; gap:12px;}
  .nav-mark span{display:none;}
  /* Anrufen sitzt am Handy schon fest am unteren Rand, hier waere es doppelt. */
  .nav-actions .call-btn{display:none;}
  /* Zeigt an, dass die Leiste weitergeht, statt Links hart abzuschneiden. */
  .nav-links{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
}
@media (max-width:560px){
  .bereiche{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .nav{transition:opacity 180ms ease; transform:none;}
  .nav[data-on="true"]{transform:none;}
  .bereich{transform:none; transition:opacity 200ms ease, background-color 200ms ease;}
  .bereich.is-in{transform:none;}
  .bereich:active{transform:none;}
}
/* --- Getränke und Süßes aus Florians Preisliste --- */
.getraenke .g-kat{ margin:18px 0 4px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.getraenke{margin-top:26px; padding-top:20px; border-top:1px solid var(--hair-soft);}
.g-kopf{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
.g-titel{
  font-family:var(--fd); font-weight:700; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-hi);
}
.g-note{font-size:11.5px; color:var(--paper-dim);}
.g-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--hair-soft);
}
.g-row:last-of-type{border-bottom:0;}
.g-row .nm{
  font-family:var(--fd); font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; font-size:16px;
}
.g-row .pr.offen{
  font-size:12px; color:var(--paper-dim); font-style:italic;
  border-bottom:1px dashed var(--line, var(--hair)); padding-bottom:1px;
}
.g-hinweis{margin-top:12px; font-size:13px; line-height:1.55; color:var(--paper-dim);}

/* --- Pflichtangaben und Rechtslinks --- */
.vorab{
  margin-top:14px; padding:11px 14px; font-size:13.5px; line-height:1.55;
  color:var(--paper-dim); border-left:2px solid var(--gold-lo);
  background:rgba(215,165,60,.05);
}
.rechtslinks{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center;}
.rechtslinks .copy{color:var(--paper-dim);}
.rechtslinks a{
  text-decoration:underline; text-underline-offset:3px;
  transition:color 160ms ease;
}
@media (hover:hover) and (pointer:fine){ .rechtslinks a:hover{color:var(--paper);} }
.pflichthinweis{
  margin:0 0 12px; font-size:12.5px; line-height:1.6; color:var(--paper-dim);
}
/* Der Bestellknopf bleibt sichtbar, waehrend die Positionen darueber scrollen. */
.sheet-fuss{
  position:sticky; bottom:0; z-index:2;
  margin-top:14px;
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,
    color-mix(in oklch, var(--ink-2) 55%, transparent) 0,
    var(--ink-2) 18px);
}
.pflichthinweis a{color:var(--gold-hi); text-decoration:underline; text-underline-offset:3px;}
/* --- Wann ist es fertig, direkt neben dem Preis --- */
.abschluss{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 18px;
  padding:13px 0 12px; border-top:1px solid var(--hair);
}
.sheet-zeit{
  flex:1 1 230px; display:flex; flex-direction:column; gap:2px; min-width:0;
}
.sheet-zeit .wann{
  font-family:var(--fd); font-weight:900; text-transform:uppercase;
  letter-spacing:.04em; font-size:15.5px; line-height:1.15; color:var(--gold-hi);
}
.sheet-zeit .dazu{font-size:12px; color:var(--paper-dim); line-height:1.45;}
/* Geschlossen ist eine Warnung, die bekommt die volle Breite und einen Rahmen. */
.sheet-zeit.zu{
  flex-basis:100%; padding:11px 13px; border:1px solid var(--red-hi);
  background:rgba(200,86,74,.10);
}
.sheet-zeit.zu .wann{color:var(--red-hi);}

/* --- Bestaetigung nach dem Bestellen --- */
#sheetFertig{text-align:center; padding:26px 0 8px;}
.fertig-haken{
  width:52px; height:52px; margin:0 auto 20px; border-radius:50%;
  border:2px solid var(--gold); display:grid; place-items:center;
  color:var(--gold-hi); font-size:25px;
}
#sheetFertig h3{margin-bottom:10px;}
.fertig-zeit{
  font-family:var(--fd); font-weight:900; text-transform:uppercase;
  font-size:clamp(22px,4vw,30px); line-height:1.1; color:var(--gold-hi);
  margin-bottom:12px;
}
.fertig-text{font-size:14.5px; color:var(--paper-dim); max-width:38ch; margin:0 auto 16px;}
.fertig-ort{
  font-style:normal; font-family:var(--fd); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:13.5px;
  line-height:1.5; color:var(--paper); margin-bottom:18px;
}
.ort-note{color:var(--paper-dim); font-size:14px; line-height:1.55;}
.anschrift{
  font-style:normal; font-family:var(--fd); font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  font-size:clamp(17px,2vw,20px); line-height:1.35; color:var(--paper);
  margin-bottom:10px;
}
#sheetFertig .don-line{margin-bottom:22px;}
#sheetFertig .ghost-btn{margin-bottom:calc(20px + env(safe-area-inset-bottom));}

/* ================= BESTELLEN (gemeinsam mit Noir: api/_karte.php und assets/js/bestellung.js) ================= */
:root{
  /* Namen, die das gemeinsame Bestellskript über die Noir-Regeln kennt */
  --papier:var(--ink-2); --linie:var(--hair); --muted:var(--paper-dim); --fg:var(--paper);
  --bg:var(--ink); --stempel:var(--red-hi); --fm:var(--fd);
}
/* Name eines Croques öffnet Zutaten und Allergene */
.m-row .auf{
  background:none; border:0; padding:0; margin:0; color:inherit; cursor:pointer; text-align:left;
  font:inherit; text-transform:inherit; letter-spacing:inherit;
  text-decoration:underline dotted var(--gold-lo); text-underline-offset:6px; text-decoration-thickness:1.5px;
}
@media (hover:hover) and (pointer:fine){ .m-row .auf:hover{ color:var(--gold-hi); } }
/* Croque-Gruppen aus Florians Karte, Preise für Small und Big */
.m-gruppe{ margin:26px 0 2px; font-family:var(--fd); font-weight:800; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.m-gruppe:first-child{ margin-top:0; }
.m-row .pr{ font-size:18px; line-height:1.35; text-align:right; white-space:nowrap; }
.m-row .pr .gr{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); font-weight:700; }
.m-hinweis{ margin-top:14px; font-size:13px; line-height:1.55; color:var(--paper-dim); }
/* Getränke und Süßes lassen sich jetzt auch in den Auftrag legen */
.g-row{ align-items:center; }
.g-row .rechts{ display:flex; align-items:center; gap:12px; flex:none; }
.g-row .pr{ font-family:var(--fd); font-weight:700; font-size:15px; color:var(--gold-hi); font-variant-numeric:tabular-nums; text-align:right; }
.g-row .add-btn{ width:36px; height:36px; margin-left:0; font-size:19px; }
/* Offen oder geschlossen, aus den Öffnungszeiten der Karte */
.hint:has([data-cm-status][data-offen="false"]) .dot{ background:var(--red-hi); box-shadow:none; animation:none; }

html.cm-gesperrt{ overflow:hidden; }
.cm-scrim{ position:fixed; inset:0; z-index:860; background:rgba(6,5,4,.72); opacity:0; pointer-events:none; transition:opacity 200ms ease; }
.cm-scrim[data-offen="true"]{ opacity:1; pointer-events:auto; transition-duration:300ms; }
.cm-pd, .cm-ko{
  position:fixed; z-index:870; left:0; right:0; bottom:0; max-height:92dvh;
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(170deg, var(--ink-3), var(--ink-2) 55%); color:var(--paper);
  border-top:1px solid var(--gold-lo); box-shadow:0 -20px 60px rgb(0 0 0 / .5);
  transform:translateY(100%); transition:transform 200ms var(--ease-out);
}
.cm-pd[hidden], .cm-ko[hidden]{ display:none; }
.cm-pd[data-offen="true"], .cm-ko[data-offen="true"]{ transform:translateY(0); transition:transform 380ms var(--ease-drawer); }
@media (min-width: 820px){
  .cm-pd, .cm-ko{ left:auto; top:0; width:min(480px, 100vw); max-height:none; transform:translateX(100%); border-top:0; border-left:1px solid var(--gold-lo); }
  .cm-pd[data-offen="true"], .cm-ko[data-offen="true"]{ transform:translateX(0); }
}
.cm-zu{ position:sticky; top:12px; margin:12px 12px -56px auto; z-index:2; flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--hair); border-radius:50%; background:var(--ink-2); color:var(--paper); cursor:pointer; transition:transform 160ms var(--ease-out); }
.cm-zu svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.cm-zu:active, .cm-rein:active, .cm-bestellen:active, .cm-leiste-los:active, .cm-menge button:active{ transform:scale(.97); }
.cm-pd-foto{ margin:0; position:relative; aspect-ratio:4/3; overflow:hidden; flex:none; }
.cm-pd-foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.cm-pd-foto::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 70px 16px rgba(0,0,0,.55); }
.cm-pd-foto figcaption{ position:absolute; z-index:1; left:12px; bottom:10px; font-size:12px; padding:3px 8px; background:rgb(0 0 0 / .6); color:var(--paper); }
.cm-pd-text{ padding:22px 24px 8px; }
.cm-pd-nr{ margin:0; font:800 13px var(--fd); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi); }
.cm-pd-name{ margin:6px 0 8px; font:900 clamp(30px, 6vw, 40px)/1.02 var(--fd); text-transform:uppercase; }
.cm-pd-satz{ margin:0 0 18px; font-family:var(--fs); font-size:16px; color:var(--gold-hi); }
.cm-pd-block{ padding:16px 0; border-top:1px solid var(--hair-soft); }
.cm-pd-block h4{ margin:0 0 10px; font:700 12px var(--fd); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-dim); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cm-pd-block h4 small{ font:400 12.5px var(--fb); letter-spacing:0; text-transform:none; }
.cm-pd-zutaten, .cm-pd-allergen-liste{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.cm-pd-zutaten li, .cm-pd-allergen-liste li{ padding:6px 12px; border:1px solid var(--hair); font-size:14.5px; }
.cm-pd-zutaten li:has(.cm-zutat){ padding:0; border:0; }
.cm-zutat{ padding:7px 13px; border:1px solid var(--hair); background:none; color:var(--paper); font:500 14.5px var(--fb); cursor:pointer; transition:color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
@media (hover:hover) and (pointer:fine){ .cm-zutat:hover{ border-color:var(--gold); } }
.cm-zutat{ min-height:44px; }
.cm-zutat::before{ content:"✓"; margin-right:6px; color:var(--gold); font-weight:700; }
.cm-zutat[aria-pressed="false"]{ border-color:var(--gold); }
.cm-zutat[aria-pressed="true"]{ color:var(--paper-dim); border-style:dashed; border-color:var(--red-hi); text-decoration:line-through; text-decoration-color:var(--red-hi); background:rgba(200,86,74,.08); }
.cm-zutat[aria-pressed="true"]::before{ content:"✕"; color:var(--red-hi); }
.cm-pd-pruefen, .cm-pd-hinweis{ margin:12px 0 0; font-size:13.5px; color:var(--paper-dim); }
.cm-pd-link{ display:inline-block; margin-top:10px; font-size:14px; color:var(--gold-hi); }
.cm-pd-fuss{ position:sticky; bottom:0; margin-top:auto; display:flex; gap:12px; align-items:center; padding:14px 24px calc(14px + env(safe-area-inset-bottom)); background:var(--ink-2); border-top:1px solid var(--hair); }
.cm-menge{ display:flex; align-items:center; border:1px solid var(--hair); flex:none; }
.cm-menge button{ width:42px; height:42px; border:0; background:none; color:var(--gold-hi); font:800 19px var(--fd); cursor:pointer; transition:transform 120ms var(--ease-out); }
.cm-menge output{ min-width:24px; text-align:center; font:800 16px var(--fd); font-variant-numeric:tabular-nums; }
.cm-rein, .cm-bestellen, .cm-leiste-los{
  flex:1; min-height:52px; padding:0 20px; border:0; cursor:pointer;
  background:var(--brass); color:var(--ink); font:800 16px/1.1 var(--fd); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset; transition:transform 160ms var(--ease-out), opacity 160ms ease;
}
.cm-bestellen{ white-space:normal; }
.cm-bestellen:disabled{ opacity:.45; cursor:not-allowed; }
.cm-leiste{
  position:fixed; z-index:820; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); width:min(560px, calc(100% - 24px));
  display:flex; align-items:center; gap:16px; padding:10px 10px 10px 20px;
  background:color-mix(in oklch, var(--ink) 93%, transparent); backdrop-filter:blur(14px);
  border:1px solid var(--gold-lo); box-shadow:0 18px 50px rgb(0 0 0 / .55);
  transform:translate(-50%, calc(100% + 140px)); transition:transform 260ms var(--ease-out);
}
/* Am Handy liegt unten die Anrufleiste, die Auftragsleiste sitzt darüber. */
@media (max-width:900px){ .cm-leiste{ bottom:calc(88px + env(safe-area-inset-bottom)); } }
.cm-leiste[data-offen="true"]{ transform:translate(-50%, 0); }
.cm-leiste.cm-stups{ animation:cm-stups 320ms var(--ease-out); }
@keyframes cm-stups{ 40%{ transform:translate(-50%, -6px); } }
.cm-leiste-info{ display:flex; flex-direction:column; gap:2px; }
.cm-leiste-anzahl{ font:800 12px var(--fd); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi); }
.cm-leiste-summe{ font:900 22px var(--fd); color:var(--paper); font-variant-numeric:tabular-nums; }
.cm-leiste-los{ flex:none; min-height:48px; }
.cm-ko{ padding-bottom:env(safe-area-inset-bottom); }
.cm-ko-titel{ margin:0; padding:26px 24px 8px; font:900 clamp(26px, 5vw, 32px)/1.05 var(--fd); text-transform:uppercase; }
.cm-ko-titel small{ display:block; margin-top:8px; font:400 15px var(--fs); letter-spacing:0; text-transform:none; color:var(--gold-hi); }
.cm-ko-zeilen{ list-style:none; margin:0; padding:0 24px; }
.cm-ko-zeile{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--hair-soft); }
.cm-ko-was b{ display:block; font:800 17px var(--fd); text-transform:uppercase; }
.cm-ko-was small{ display:block; color:var(--paper-dim); font-size:12.5px; margin-top:2px; }
.cm-ko-was .cm-ko-ohne{ color:var(--red-hi); font-weight:600; }
/* Zusatzbeläge: zugeklappt, damit das Fenster kurz bleibt; gewählte stehen neben dem Titel */
.cm-pd-extras > summary{ cursor:pointer; list-style:none; }
.cm-pd-extras > summary::-webkit-details-marker{ display:none; }
.cm-pd-extras > summary h4{ margin:0; }
.cm-pd-extras > summary h4::after{ content:"+"; margin-left:auto; font-size:18px; color:var(--gold-hi); }
.cm-pd-extras[open] > summary h4::after{ content:"−"; }
.cm-pd-extras[open] > summary{ margin-bottom:10px; }
.cm-extras-wahl{ display:block; margin-top:6px; font-size:13px; color:var(--gold-hi); }
.cm-extras-wahl:empty{ display:none; }
.cm-extras{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
.cm-extras .cm-option{ padding:10px 12px; gap:10px; }
.cm-extras .cm-option-text b{ font-size:14px; }
.cm-sk-extra, .cm-ko-was .cm-ko-extra{ color:var(--gold-hi); }
.cm-ko-was .cm-ko-notiz{ font-style:italic; }
/* Größe und Sauce im Produktfenster */
.cm-optionen{ display:grid; gap:8px; }
.cm-sauce-extra{ margin-top:10px; }
.cm-option{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--hair); cursor:pointer; transition:border-color 160ms ease, background-color 160ms ease; }
.cm-option:has(input:checked){ border-color:var(--gold); background:rgba(215,165,60,.09); }
.cm-option input{ accent-color:var(--gold); flex:none; width:18px; height:18px; margin:0; }
.cm-option:has(input:disabled){ opacity:.55; cursor:not-allowed; }
.cm-option-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.cm-option-text b{ font:800 15px var(--fd); text-transform:uppercase; letter-spacing:.03em; }
.cm-option-text small{ font-size:12.5px; color:var(--paper-dim); }
.cm-option-preis{ font:normal 800 17px var(--fd); color:var(--gold-hi); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cm-rein:disabled{ opacity:.55; cursor:not-allowed; }
.cm-anpassen{ display:block; margin-top:6px; padding:0; border:0; background:none; color:var(--gold-hi); font:700 12px var(--fd); letter-spacing:.1em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.cm-ko-preis{ font:800 17px var(--fd); color:var(--gold-hi); font-variant-numeric:tabular-nums; min-width:72px; text-align:right; }
.cm-ko-form{ padding:8px 24px 24px; display:flex; flex-direction:column; gap:18px; }
.cm-ko-form fieldset{ border:0; margin:0; padding:0; }
.cm-ko-form legend{ font:700 12px var(--fd); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-dim); margin:10px 0; padding:0; }
.cm-art{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cm-art legend{ grid-column:1 / -1; }
.cm-art label{ display:flex; gap:10px; align-items:flex-start; padding:14px; border:1px solid var(--hair); cursor:pointer; transition:border-color 160ms ease, background-color 160ms ease; }
.cm-art label:has(input:checked){ border-color:var(--gold); background:rgba(215,165,60,.09); }
.cm-art label:has(input:disabled){ opacity:.5; cursor:not-allowed; }
.cm-art input{ accent-color:var(--gold); margin-top:3px; }
.cm-art span{ display:flex; flex-direction:column; gap:2px; }
.cm-art b{ font:800 15px var(--fd); text-transform:uppercase; letter-spacing:.02em; }
.cm-art small{ font-size:12.5px; color:var(--paper-dim); }
.cm-feld{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.cm-feld > span{ font:700 13px var(--fd); letter-spacing:.1em; text-transform:uppercase; }
.cm-feld > span small{ font:400 12.5px var(--fb); letter-spacing:0; text-transform:none; color:var(--paper-dim); }
.cm-feld input{ min-height:46px; padding:0 2px; font:16px var(--fb); color:var(--paper); background:transparent; border:0; border-bottom:1px solid var(--hair); border-radius:0; }
.cm-feld input::placeholder{ color:var(--paper-dim); opacity:.7; }
.cm-feld input:focus-visible{ outline:none; border-bottom-color:var(--gold); box-shadow:0 1px 0 var(--gold); }
.cm-feld input[aria-invalid="true"]{ border-bottom-color:var(--red-hi); }
.cm-notiz{ margin:16px 0 0; }
.cm-fehler{ font-style:normal; font-size:13.5px; color:var(--red-hi); }
.cm-fehler:empty{ display:none; }
.cm-mehrweg{ margin:0; font-size:13.5px; color:var(--paper-dim); }
.cm-zahlung{ display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--paper-dim); }
.cm-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cm-chips i{ font:normal 700 11px var(--fd); letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--hair-soft); color:var(--paper); }
.cm-abschluss{ position:sticky; bottom:0; background:var(--ink-2); padding:14px 24px 10px; margin:0 -24px -24px; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:10px; }
.cm-zeit{ margin:0; font:900 15px var(--fd); letter-spacing:.03em; text-transform:uppercase; color:var(--gold-hi); }
.cm-zeit[data-zu="true"]{ color:var(--red-hi); }
.cm-summe{ margin:0; display:flex; justify-content:space-between; align-items:baseline; }
.cm-summe span{ font-size:12.5px; color:var(--paper-dim); }
.cm-summe b{ font:900 28px var(--fd); color:var(--gold-hi); font-variant-numeric:tabular-nums; }
.cm-summe.cm-gebuehr b{ font-size:17px; }
.cm-ko [hidden]{ display:none !important; }
.cm-bestellart{ margin:28px 0; padding:24px; border:1px solid var(--gold-lo); background:var(--ink-2); scroll-margin-top:90px; }
.cm-bestellart fieldset{ border:0; padding:0; margin:0; }
.cm-bestellart legend{ padding:0; margin-bottom:16px; font:800 clamp(20px,4vw,28px) var(--fd); text-transform:uppercase; }
.cm-bestellart > p{ margin:14px 0 0; font-size:15px; line-height:1.5; }
.cm-art-link{ margin:0 0 20px; font-size:15px; }
.cm-bestellart .cm-konditionen{ font-size:13px; color:var(--paper-dim); }
.cm-bestellart [hidden]{ display:none !important; }
.cm-sk-versand{ margin:0 0 8px; font-size:13px; color:var(--paper-dim); }
.cm-abhol-marke{ display:inline-block; font:700 12px var(--fb); letter-spacing:0; text-transform:none; padding:4px 8px; border:1px solid var(--gold-lo); color:var(--gold-hi); vertical-align:middle; }
.cm-nur-abholung, .cm-art-warnung{ color:var(--gold-hi) !important; font-weight:700; }
.cm-nur-abholung{ display:block; margin-top:4px; }
.cm-lieferkonflikt{ padding:14px; border:1px solid var(--gold); font-size:14px; line-height:1.5; }
.cm-lieferkonflikt p{ margin:0 0 10px; }
.cm-lieferkonflikt button{ display:block; margin:8px 0 0; padding:10px 12px; background:var(--ink-3); border:1px solid var(--gold-lo); color:var(--paper); font:700 14px var(--fb); cursor:pointer; }
[data-cm-add]:disabled, [data-cm-produkt]:disabled{ opacity:.5; cursor:not-allowed; }
.cm-pflicht{ margin:0; font-size:12.5px; line-height:1.6; color:var(--paper-dim); }
.cm-pflicht a{ color:var(--gold-hi); }
@media (max-height: 650px){ .cm-abschluss{ position:static; } }
@media (max-width: 819px){ .cm-ko:has(.cm-feld input:focus) .cm-abschluss{ position:static; } }
.cm-meldung{ margin:0; font-size:14px; padding:10px 12px; border:1px solid var(--red-hi); background:rgba(200,86,74,.10); color:var(--paper); }
@media (prefers-reduced-motion: reduce){
  .cm-pd, .cm-ko, .cm-leiste{ transition:opacity 150ms ease !important; }
  .cm-pd[data-offen="true"], .cm-ko[data-offen="true"]{ transform:none; }
  .cm-leiste.cm-stups{ animation:none; }
}

/* ========== Schnell bestellen, Reiterleiste, Wisch-Reihen (02.10.2026) ========== */
.s-reihe, .g-reihe, .k-reiter{scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
.s-reihe::-webkit-scrollbar, .g-reihe::-webkit-scrollbar, .k-reiter::-webkit-scrollbar{display:none;}

/* Schnell bestellen: Wischreihe direkt unter dem Hero */
#schnell{padding:clamp(34px,5vw,60px) 0 clamp(20px,3vw,34px); scroll-margin-top:78px;}
.s-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px;}
.s-kopf h2{font-family:var(--fd); font-weight:900; text-transform:uppercase; font-size:clamp(30px,4.4vw,46px); line-height:1;}
.s-kopf h2 em{font-style:normal; color:var(--gold-hi);}
.s-alle{font-family:var(--fd); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi); text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:2px; flex:none;}
.s-reihe{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px max(clamp(20px,5vw,56px), calc((100vw - 1180px) / 2 + 56px)) 10px;
  scroll-padding-inline:max(clamp(20px,5vw,56px), calc((100vw - 1180px) / 2 + 56px));
}
.s-karte{
  flex:none; width:clamp(210px,62vw,250px); scroll-snap-align:start;
  border:1px solid var(--hair); background:var(--ink-2); display:flex; flex-direction:column;
}
.s-bild{position:relative; display:block; padding:0; border:0; background:none; cursor:pointer; aspect-ratio:4/3; overflow:hidden;}
.s-bild img{width:100%; height:100%; object-fit:cover; display:block;}
.s-symbol{position:absolute; left:8px; bottom:8px; font-size:10.5px; letter-spacing:.06em; padding:2px 8px; border-radius:20px; background:rgba(10,8,7,.72); color:var(--paper-dim);}
.s-text{padding:14px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1;}
.s-text h3{font-family:var(--fd); font-weight:800; text-transform:uppercase; font-size:21px; line-height:1.05;}
.s-text p{font-size:13px; color:var(--paper-dim); line-height:1.4;}
.s-fuss{margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between;}
.s-preis{font-family:var(--fd); font-weight:800; font-size:19px; color:var(--gold-hi); font-variant-numeric:tabular-nums;}
.s-fuss .add-btn{margin-left:0;}

/* Reiterleiste der Karte: wischbar, bleibt beim Scrollen unter der Navigation stehen */
.k-reiter{
  position:sticky; top:65px; z-index:30;
  display:flex; gap:8px; overflow-x:auto;
  margin:0 calc(-1 * clamp(20px,5vw,56px)) 18px; padding:10px clamp(20px,5vw,56px);
  background:color-mix(in oklch, var(--ink) 94%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair-soft);
}
.k-reiter a{
  flex:none; padding:8px 14px; border:1px solid var(--hair); border-radius:999px;
  font-family:var(--fd); font-weight:700; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-dim); text-decoration:none; white-space:nowrap;
  transition:background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.k-reiter a[aria-current="true"]{background:var(--brass); color:var(--ink); border-color:transparent;}
@media (hover:hover) and (pointer:fine){ .k-reiter a:hover{color:var(--paper); border-color:var(--gold);} }
.m-gruppe, .g-gruppe{scroll-margin-top:122px;}
.g-zahl{font-size:11px; color:var(--paper-dim); letter-spacing:.06em;}

/* Handy: Croques kompakter, Beiwerk als Wisch-Reihen */
@media (max-width:700px){
  .menu-list{padding:22px 18px;}
  .m-row{grid-template-columns:auto 1fr auto; column-gap:12px; row-gap:6px; padding:15px 0; align-items:start;}
  .m-row .i{grid-row:1 / span 2; padding-top:5px;}
  .m-row .nm{grid-column:2; font-size:21px;}
  .m-row .pr{grid-column:2; grid-row:2; font-size:16px; text-align:left;}
  .m-row .pr br{display:none;}
  .m-row .pr .gr + .gr, .m-row .pr .gr:nth-of-type(2){margin-left:10px;}
  .m-row .add-btn{grid-column:3; grid-row:1 / span 2; align-self:center; margin-left:0;}
  .m-row:hover{padding-left:0;}

  .g-gruppe{margin-top:22px;}
  .g-reihe{
    display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:10px -18px 0; padding:2px 18px 6px; scroll-padding-inline:18px;
  }
  .g-reihe .g-row{
    flex:none; width:150px; scroll-snap-align:start;
    flex-direction:column; align-items:stretch; justify-content:space-between; gap:10px;
    padding:12px; border:1px solid var(--hair-soft); background:var(--ink-2);
  }
  .g-reihe .g-row:last-of-type{border-bottom:1px solid var(--hair-soft);}
  .g-reihe .g-row .nm{font-size:15px; line-height:1.15;}
  .g-reihe .g-row .rechts{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .g-reihe .g-row .pr{font-size:13px; line-height:1.3;}
  .g-reihe .g-row .add-btn{margin-left:0; width:38px; height:38px;}
  .getraenke .g-kat{margin:0;}
}
/* Wisch-Reihen dürfen die Kartenspalte nicht verbreitern */
.menu > *, .menu-list, .getraenke, .g-gruppe{min-width:0;}
@media (max-width:900px){ .menu{grid-template-columns:minmax(0,1fr);} }
/* Eine Leiste unten: Liegt etwas im Korb, geht die Anrufleiste in der Auftragsleiste auf (02.10.2026). */
.cm-leiste-anruf{display:none;}
@media (max-width:900px){
  body[data-korb="voll"] .call-dock{display:none;}
  body[data-korb="voll"]{padding-bottom:calc(90px + env(safe-area-inset-bottom));}
  body[data-korb="voll"] .cm-leiste{bottom:calc(12px + env(safe-area-inset-bottom));}
  .cm-leiste{gap:12px; padding-left:16px;}
  .cm-leiste-info{flex:1; min-width:0;}
  .cm-leiste-anruf{
    display:grid; place-items:center; flex:none; width:48px; height:48px;
    border:1px solid var(--hair); color:var(--gold-hi); text-decoration:none;
  }
  .cm-leiste-anruf svg{width:20px; height:20px;}
  .cm-leiste-los{flex:none;}
}

/* ========== PC: Karte mit Kategorien links und mitlaufender Bestellung rechts (04.10.2026) ==========
   Das Handy bleibt unverändert: Alles hier greift erst ab 900 px Breite. */
.seitenkorb{display:none;}
.hero-aktionen{display:flex; align-items:center; gap:10px;}
.hero-bestellen{display:none;}

@media (min-width:900px){
  /* Ruhigerer Rhythmus und keine doppelten Wege zur Karte: die Navigation oben reicht. */
  section{padding:clamp(64px,7vw,104px) 0;}

  /* Erstes Bild: Bestellen ist der Hauptweg, Anrufen der zweite. */
  .hero-bestellen{display:inline-flex;}
  .hero-anruf{background:color-mix(in oklch, var(--ink) 70%, transparent); color:var(--paper); box-shadow:none; outline:1px solid var(--hair); outline-offset:-1px;}

  /* Lesbarkeit am großen Bildschirm */
  .head-row p, .don p{font-size:17px;}
  .m-row .ing{font-size:14.5px;}
  .m-hinweis, .menu-note, .g-hinweis, .step span{font-size:14.5px;}

  /* Kopf der Karte: Überschrift und Satz nebeneinander, Infos als Leiste darunter */
  #karte .head-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; column-gap:56px; row-gap:22px;}
  #karte .head-row > p:not(.vorab){justify-self:end;}
  #karte .vorab{grid-column:1 / -1; margin:0; max-width:none; padding:14px 18px; font-size:14.5px;
    border:1px solid var(--hair-soft); background:color-mix(in oklch, var(--gold) 5%, transparent);}

  /* Schnell bestellen: Raster statt Wischreihe, die Maus kann nicht wischen */
  .s-reihe{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; overflow:visible; scroll-snap-type:none;
    max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,56px);}
  .s-karte{width:auto; flex-direction:row;}
  .s-bild{flex:none; width:36%; aspect-ratio:auto;}
  .s-text{padding:14px 16px;}
  .s-text h3{font-size:20px;}
  .s-text p{font-size:13.5px;}

  /* Raster der Karte: Liste links, Bestellung rechts; die Reiter brechen um statt abgeschnitten zu werden */
  #karte .wrap{max-width:1320px;}
  .karte-raster{display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:28px; align-items:start;}
  .karte-raster > .k-reiter{grid-column:1 / -1;}
  .k-reiter{flex-wrap:wrap; overflow:visible; margin:0; padding:12px 0; top:66px;}
  .m-gruppe, .g-gruppe{scroll-margin-top:calc(66px + var(--reiter-h, 110px) + 16px);}
  .menu{grid-template-columns:minmax(0,1fr);}
  .menu-photo{display:none;}
  .g-row{border-bottom:1px solid var(--hair-soft);}
  .g-reihe{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); column-gap:32px;}

  /* Mitlaufende Bestellung */
  .seitenkorb{display:flex; flex-direction:column; position:sticky; top:calc(66px + var(--reiter-h, 110px) + 16px);
    max-height:calc(100vh - 66px - var(--reiter-h, 110px) - 32px); border:1px solid var(--hair); background:var(--ink-2);}
  .cm-sk-kopf{padding:18px 20px 14px; border-bottom:1px solid var(--hair-soft);}
  .cm-sk-kopf h3{font:900 24px/1 var(--fd); text-transform:uppercase; letter-spacing:.01em;}
  .cm-sk-kopf small{display:block; margin-top:7px; font:400 14px var(--fs); color:var(--gold-hi);}
  .cm-sk-leer{padding:16px 20px 6px; display:grid; gap:12px;}
  .cm-sk-leer img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 40%;}
  .cm-sk-leer p{font-size:14.5px; line-height:1.5; color:var(--paper-dim);}
  .cm-sk-bild{position:relative;}
  .cm-sk-bild span{position:absolute; left:8px; bottom:8px; font-size:10.5px; letter-spacing:.06em; padding:2px 8px; border-radius:20px; background:rgba(10,8,7,.72); color:var(--paper-dim);}
  .seitenkorb[data-leer="false"] .cm-sk-leer, .seitenkorb[data-leer="true"] .cm-sk-zeilen{display:none;}
  .cm-sk-zeilen{list-style:none; overflow-y:auto; overscroll-behavior:contain; padding:2px 20px; flex:1 1 auto; min-height:0;}
  .cm-sk-zeile{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:13px 0; border-bottom:1px solid var(--hair-soft);}
  .cm-sk-zeile:last-child{border-bottom:0;}
  .cm-sk-was b{display:block; font:800 16px/1.15 var(--fd); text-transform:uppercase; letter-spacing:.02em;}
  .cm-sk-was small{display:block; margin-top:3px; font-size:12.5px; line-height:1.4; color:var(--paper-dim);}
  .cm-sk-preis{align-self:start; font:800 16px var(--fd); color:var(--gold-hi); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .cm-sk-menge{justify-self:start;}
  .cm-sk-menge button{width:32px; height:32px; font-size:16px;}
  .cm-sk-menge output{min-width:22px; font-size:14px;}
  .cm-sk-fuss{flex:none; padding:14px 20px 12px; border-top:1px solid var(--hair); display:grid; gap:8px;}
  .cm-sk-summe{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
  .cm-sk-summe span{font-size:13px; color:var(--paper-dim);}
  .cm-sk-summe b{font:900 26px var(--fd); font-variant-numeric:tabular-nums;}
  .cm-sk-zeit{font-size:13.5px; color:var(--paper-dim);}
  .cm-sk-los{width:100%; min-height:50px; margin-top:4px;}
  .cm-sk-info{flex:none; padding:0 20px 16px; font-size:12.5px; line-height:1.45; color:var(--paper-dim);}

  /* Steht die Bestellspalte im Bild, verschwindet die schwebende Leiste unten. */
  body[data-seitenkorb="sichtbar"] .cm-leiste[data-offen="true"]{transform:translate(-50%, calc(100% + 140px));}
}

/* Großer PC: Kategorien als feste Spalte links, die Karte in der Mitte, die Bestellung rechts */
@media (min-width:1200px){
  .karte-raster{grid-template-columns:190px minmax(0,1fr) 330px;}
  .karte-raster > .k-reiter{grid-column:auto;}
  .k-reiter{position:sticky; top:96px; flex-direction:column; flex-wrap:nowrap; gap:4px; padding:0;
    background:none; backdrop-filter:none; border:0; max-height:calc(100vh - 120px); overflow-y:auto;}
  .k-reiter a{border-color:transparent; border-radius:2px; padding:9px 12px; white-space:normal; line-height:1.25;}
  .m-gruppe, .g-gruppe{scroll-margin-top:96px;}
  .seitenkorb{top:96px; max-height:calc(100vh - 120px);}
}

/* ========== Handy: Bestellen zuerst (04.10.2026) ==========
   Kacheln 01 bis 04 und die Weiter-Leisten wiederholen nur die Navigation: auf allen Geräten weg. */
#bereiche, .weiter{display:none;}
.menu-photo{display:none;}
.nur-pc{display:none;}
/* Info-Kasten der Karte ohne Seitenstreifen */
.vorab{border-left:0; border:1px solid var(--hair-soft); background:color-mix(in oklch, var(--gold) 5%, transparent); padding:12px 14px;}

@media (max-width:899px){
  /* Oben im ersten Bild: Bestellen statt Anrufen (Anrufen sitzt unten) */
  .hero-bestellen{display:inline-flex;}
  .hero-anruf{display:none;}
  /* Unten: großer Knopf zur Karte, daneben Anrufen als Symbol */
  .call-dock{display:flex; align-items:center; gap:10px;}
  .call-dock-anruf{flex:none; width:54px; height:54px; display:grid; place-items:center;
    border:1px solid var(--hair); background:var(--ink-2); color:var(--gold-hi);}
  .call-dock-anruf svg{width:20px; height:20px;}
  .call-dock-bestellen{flex:1; justify-content:center;}
  /* In der Karte selbst braucht es den Knopf nicht, er würde nur Plus-Knöpfe verdecken. */
  body[data-in-karte="ja"] .call-dock{display:none;}
}
@media (min-width:900px){
  .nur-pc{display:inline;}
}

/* Freiwillig gemerkte letzte Bestellung */
.cm-wiederholung{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:16px; padding:14px 0; border-top:1px solid var(--gold-lo); border-bottom:1px solid var(--gold-lo); font-size:14px; }
.cm-wiederholung[hidden]{ display:none; }
.cm-wiederholung small{ flex-basis:100%; font-size:12px; color:var(--paper-dim); }
.cm-wiederholung button{ padding:7px 10px; min-height:36px; color:var(--gold-hi); background:none; border:1px solid var(--gold-lo); font:700 14px var(--fb); cursor:pointer; }
.cm-wiederholung-status{ margin:10px 0 0; font-size:13px; color:var(--paper-dim); }
.cm-wiederholhinweis{ margin:12px 24px; padding:12px; border:1px solid var(--gold-lo); color:var(--paper-dim); font-size:13px; line-height:1.5; }
.cm-merken{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:14.5px; }
.cm-merken input{ flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--gold-hi); }
.cm-merken small{ display:block; margin-top:3px; font-size:12.5px; line-height:1.4; color:var(--paper-dim); }

/* Tippflächen mindestens 44 × 44, das sichtbare Bild bleibt gleich */
.add-btn, .way-link, .s-alle, .m-row .auf, .rechtslinks a{position:relative;}
.add-btn::after{content:""; position:absolute; inset:-4px; border-radius:50%;}
.way-link::after, .s-alle::after, .rechtslinks a::after{content:""; position:absolute; inset:-12px 0;}
.m-row .auf::after{content:""; position:absolute; inset:-6px 0;}
.k-reiter a{display:inline-flex; align-items:center; min-height:44px;}
.call-btn.sm, .nav-mark{min-height:44px;}