/* =========================================================
   Cafe Tutu — helles Papier, Walnuss als dunkler Akzent
   Farbe   : Oat #F8F5F0 · Walnuss-Tinte #1F1813 · Olive #4F5B36 · Honig #C08C3A
   Schrift : Fraunces (Display) · Manrope (Text & UI)
   Layout  : helle Papierbahnen, unterbrochen von dunklen Vollbreit-Bändern
   ========================================================= */

:root{
  /* Grund */
  --paper:#f8f5f0;
  --paper-warm:#f1eade;
  --card:#ffffff;

  /* Tinte */
  --ink:#1f1813;
  --ink-2:#332720;
  --ink-soft:#5a4a3e;
  --muted:#8b7a6c;

  /* Akzente */
  --olive:#4f5b36;
  --olive-lt:#6d7c4c;
  --olive-wash:#eef0e6;
  --honey:#c08c3a;
  --walnut:#7a5539;

  /* Linien & Schatten */
  --line:#e6ddd0;
  --line-soft:#f0e9dd;
  --sh-1:0 1px 2px rgba(31,24,19,.05), 0 2px 8px rgba(31,24,19,.04);
  --sh-2:0 2px 6px rgba(31,24,19,.06), 0 12px 30px -12px rgba(31,24,19,.18);
  --sh-3:0 30px 70px -30px rgba(31,24,19,.45), 0 6px 18px -8px rgba(31,24,19,.2);

  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  --arch:11rem;

  --maxw:1180px;
  --ease:cubic-bezier(.22,.68,.32,1);

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font:400 1rem/1.65 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%; display:block; height:auto}
button{font:inherit; color:inherit}

h1,h2,h3,h4{
  font-family:'Fraunces','Georgia',serif;
  font-weight:600; line-height:1.08; letter-spacing:-.014em;
  color:var(--ink); margin:0; text-wrap:balance;
  font-variation-settings:'SOFT' 20,'WONK' 1;
}
h1{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.1rem); font-weight:500}
h2{font-size:clamp(1.9rem,1.35rem + 2.2vw,2.9rem); font-weight:500}
h3{font-size:1.16rem; letter-spacing:-.005em}
p{margin:0 0 1em}
a{color:inherit}

.wrap{width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto}
@media (max-width:600px){ .wrap{width:calc(100% - 1.8rem)} }

.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:.7rem 1.1rem; z-index:400}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--olive); outline-offset:2px; border-radius:6px}

.eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--olive); margin:0 0 .9rem;
}
.on-dark .eyebrow{color:var(--honey)}

.sec-head{max-width:40rem; margin-bottom:2.4rem}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head p{color:var(--ink-soft); margin:.9rem 0 0; font-size:1.02rem}

/* ---------------- Buttons ---------------- */
.btn{
  --bg:var(--ink); --fg:#fdfbf7; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border:1px solid var(--bd); border-radius:100px;
  background:var(--bg); color:var(--fg);
  font-weight:600; font-size:.9rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn:active{transform:none}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn--olive{--bg:var(--olive); --bd:var(--olive)}
.btn--line{--bg:transparent; --fg:var(--ink); --bd:var(--line)}
.btn--line:hover{--bd:var(--ink)}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:transparent; padding:.6rem .9rem}
.btn--ghost:hover{--bg:var(--paper-warm); box-shadow:none}
.btn--wide{width:100%}
.btn--lg{padding:1rem 1.9rem; font-size:.98rem}
.on-dark .btn--line{--fg:#f5efe6; --bd:rgba(245,239,230,.28)}
.on-dark .btn--line:hover{--bd:#f5efe6}

/* ---------------- Kopfzeile ---------------- */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(248,245,240,.88);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:0 8px 24px -20px rgba(31,24,19,.5)}
.header__inner{display:flex; align-items:center; gap:1.4rem; min-height:4.5rem}

.brand{
  display:flex; align-items:center;
  text-decoration:none; margin-right:auto;
}
.mark{
  display:inline-flex; align-items:center; line-height:1;
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:2rem; letter-spacing:-.02em; color:var(--ink);
  --bw:.145em;   /* Strichstaerke der Klammern */
  --bh:1.28em;   /* Klammerhoehe */
  --air:.13em;   /* Luft zwischen Klammer und Wort */
}
.mark i{
  font-style:normal; display:block; flex:none; width:.28em; height:var(--bh);
  border-top:var(--bw) solid currentColor; border-bottom:var(--bw) solid currentColor;
}
.mark .l{border-left:var(--bw) solid currentColor; margin-right:var(--air)}
.mark .r{border-right:var(--bw) solid currentColor; margin-left:var(--air)}
@media (max-width:600px){ .mark{font-size:1.7rem} }

.mainnav{display:flex; gap:1.7rem}
.mainnav a{text-decoration:none; font-size:.9rem; font-weight:500; color:var(--ink-soft); padding:.3rem 0; position:relative}
.mainnav a::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--olive); transition:width .3s var(--ease)}
.mainnav a:hover{color:var(--ink)}
.mainnav a:hover::after{width:100%}

.header__actions{display:flex; align-items:center; gap:.55rem}

.cartbtn{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.05rem .6rem .9rem; border-radius:100px;
  border:1px solid var(--line); background:var(--card); cursor:pointer;
  font-weight:600; font-size:.86rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cartbtn:hover{border-color:var(--ink); box-shadow:var(--sh-1)}
.cartbtn svg{width:1.05rem; height:1.05rem; stroke:currentColor; fill:none; stroke-width:1.7}
.cartbtn__n{
  min-width:1.3rem; height:1.3rem; padding:0 .3rem; border-radius:100px;
  background:var(--olive); color:#fff; font-size:.72rem; font-weight:700;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
}
.cartbtn__n[hidden]{display:none}

.burger{display:none; width:2.5rem; height:2.5rem; border:1px solid var(--line); background:var(--card); border-radius:100px; cursor:pointer; padding:.7rem; flex-direction:column; justify-content:space-between}
.burger span{display:block; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:920px){
  .burger{display:flex}
  .mainnav{
    position:absolute; top:calc(100% + .5rem); left:1rem; right:1rem;
    flex-direction:column; gap:0; padding:.5rem;
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-2);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .mainnav.is-open{opacity:1; visibility:visible; transform:none}
  .mainnav a{padding:.85rem .8rem; font-size:1rem; border-radius:var(--r-s)}
  .mainnav a::after{display:none}
  .mainnav a:hover{background:var(--paper-warm)}
}

/* ---------------- Bogenform ---------------- */
.arch{
  margin:0; overflow:hidden; position:relative; background:var(--paper-warm);
  border-radius:var(--arch) var(--arch) var(--r-m) var(--r-m);
  box-shadow:var(--sh-2);
}
.arch img{width:100%; height:100%; object-fit:cover}

/* ---------------- Hero ---------------- */
.hero{padding:clamp(2.6rem,2rem + 3vw,4.6rem) 0 clamp(3rem,2rem + 3vw,5rem)}
.hero__inner{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center}
.hero__lede{font-size:1.1rem; color:var(--ink-soft); max-width:33rem; margin-top:1.4rem}
.hero__cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem}
.hero__meta{
  display:flex; gap:.5rem .9rem; flex-wrap:wrap; align-items:center;
  margin-top:1.9rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--muted);
}
.hero__meta b{color:var(--ink); font-weight:700}
.dot{width:3px; height:3px; border-radius:50%; background:var(--line); display:inline-block}

.hero__art{position:relative; justify-self:center; width:min(100%,27rem)}
.hero__art .arch--main{aspect-ratio:4/5}
.hero__art .arch--sub{
  position:absolute; right:-1.6rem; bottom:-1.8rem; width:45%; aspect-ratio:3/4;
  --arch:6rem; border:5px solid var(--paper);
}
.hero__sticker{
  position:absolute; left:-1.5rem; top:1.6rem; z-index:2;
  background:var(--card); border:1px solid var(--line); border-radius:100px;
  padding:.55rem 1rem; box-shadow:var(--sh-2);
  font-size:.78rem; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:.45rem;
}
.hero__sticker i{width:.5rem; height:.5rem; border-radius:50%; background:var(--olive); font-style:normal; box-shadow:0 0 0 3px var(--olive-wash)}

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr; gap:2.4rem}
  .hero__art{order:-1; width:min(100%,20rem)}
  .hero__art .arch--main{aspect-ratio:1}
}

/* ---------------- Dunkles Band: So läuft's ---------------- */
.on-dark{background:var(--ink); color:#e9e0d4}
.on-dark h2,.on-dark h3{color:#fbf7f1}

.steps{padding:clamp(3rem,2.4rem + 2.4vw,4.6rem) 0; position:relative; overflow:hidden}
.steps::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(70% 60% at 12% 0%, rgba(192,140,58,.16), transparent 62%),
             radial-gradient(60% 70% at 92% 110%, rgba(109,124,76,.16), transparent 60%);
}
.steps__inner{position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,1rem + 4vw,4rem); align-items:center}
.steps__intro p{color:#b8a996; margin:.9rem 0 0}
.steps__list{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.steps__list li{
  display:grid; grid-template-columns:2.4rem 1fr; gap:1rem; align-items:start;
  padding:1.15rem 1.3rem; border-radius:var(--r-m);
  background:rgba(255,255,255,.045); border:1px solid rgba(233,224,212,.12);
}
.steps__n{
  width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center;
  background:var(--honey); color:#241b10; font-weight:800; font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
.steps__list h3{font-size:1.05rem; margin-bottom:.2rem}
.steps__list p{margin:0; font-size:.92rem; color:#b8a996}
@media (max-width:820px){ .steps__inner{grid-template-columns:1fr} }

/* ---------------- Geschichte ---------------- */
.story{padding:clamp(3.5rem,2.6rem + 4vw,6.5rem) 0}
.story__grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,1rem + 5vw,5rem); align-items:center}
.story__art{position:relative; padding-bottom:3.5rem}
.story__art .arch{aspect-ratio:4/5}
.story__art .arch--sub{
  position:absolute; right:-1rem; bottom:0; width:50%; aspect-ratio:1;
  --arch:5.5rem; border:5px solid var(--paper);
}
.story__copy p{color:var(--ink-soft); max-width:34rem}
.story__copy h2{margin-bottom:1.2rem}
.pull{
  margin:2rem 0 0; padding:1.7rem 1.9rem; border-radius:var(--r-m);
  background:var(--ink); color:#f3ece1; box-shadow:var(--sh-2);
}
.pull q{
  font-family:'Fraunces',serif; font-size:1.35rem; line-height:1.4; font-style:italic;
  color:#fbf7f1; quotes:'„' '“';
}
.pull footer{margin-top:.9rem; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--honey); font-weight:700}
@media (max-width:860px){
  .story__grid{grid-template-columns:1fr}
  .story__art{max-width:22rem; width:100%; margin-inline:auto}
}

/* ---------------- Speisekarte / Shop ---------------- */
.menu{padding:clamp(3rem,2.4rem + 3vw,5rem) 0; background:var(--paper-warm)}
.menu__head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:1.8rem}
.menu__head .sec-head{margin-bottom:0}

.pickbar{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.85rem 1.1rem; border-radius:100px; background:var(--card);
  border:1px solid var(--line); box-shadow:var(--sh-1); font-size:.88rem;
}
.pickbar b{color:var(--ink)}
.pickbar span{color:var(--muted)}
.pickbar button{background:none; border:0; padding:0; color:var(--olive); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px}

.tabs{display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:1.8rem}
.tab{
  padding:.58rem 1.1rem; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  font-size:.87rem; font-weight:600;
  transition:all .25s var(--ease);
}
.tab:hover{border-color:var(--ink); color:var(--ink)}
.tab.is-active{background:var(--ink); border-color:var(--ink); color:#fbf7f1}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr)); gap:1rem}

.prod{
  position:relative; display:flex; flex-direction:column; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; cursor:pointer; padding:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.prod:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#d8ccba}
.prod__ph{position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-warm)}
.prod__ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.prod:hover .prod__ph img{transform:scale(1.05)}

.prod__tag{
  position:absolute; top:.6rem; left:.6rem;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .58rem; border-radius:100px;
  background:rgba(255,255,255,.94); color:var(--ink); box-shadow:var(--sh-1);
}
.prod__tag--v{background:var(--olive); color:#fff}

.prod__add{
  position:absolute; right:.6rem; bottom:.6rem; width:2.3rem; height:2.3rem;
  border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:#fbf7f1; display:grid; place-items:center;
  box-shadow:var(--sh-2); font-size:1.15rem; line-height:1; padding-bottom:.1em;
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.prod:hover .prod__add{background:var(--olive)}
.prod__add:hover{transform:scale(1.09)}

.prod__body{padding:.95rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.3rem; flex:1}
.prod__name{font-family:'Fraunces',serif; font-size:1.08rem; font-weight:600; color:var(--ink); line-height:1.25}
.prod__desc{font-size:.85rem; color:var(--muted); line-height:1.5; margin:0; flex:1}
.prod__price{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:.35rem}

.menu__note{margin:2.2rem 0 0; text-align:center; color:var(--muted); font-size:.88rem}

@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,1fr); gap:.7rem}
  .prod__body{padding:.7rem .75rem .85rem}
  .prod__name{font-size:.98rem}
  .prod__desc{font-size:.78rem}
  .prod__add{width:2rem; height:2rem; font-size:1rem}
  .menu__head{gap:1.1rem}
  .pickbar{width:100%; justify-content:flex-start}
}

/* ---------------- Galerie ---------------- */
.gallery{padding:clamp(3rem,2.4rem + 3vw,5rem) 0}
.mosaic{
  display:grid; gap:.5rem; grid-auto-flow:row dense;
  grid-template-columns:repeat(4,1fr); grid-auto-rows:11.5rem;
  width:min(100% - 1.4rem,1440px); margin-inline:auto;
}
.mosaic figure{margin:0; overflow:hidden; border-radius:var(--r-s); background:var(--paper-warm)}
.mosaic img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.mosaic figure:hover img{transform:scale(1.05)}
.m-tall{grid-row:span 2}
.m-wide{grid-column:span 2}
@media (max-width:820px){
  .mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:8.5rem}
  .m-tall{grid-row:span 1}
  .m-wide{grid-column:span 2; grid-row:span 1}
}

/* ---------------- Standorte ---------------- */
.places{padding:clamp(3rem,2.4rem + 3vw,5rem) 0 clamp(4rem,3rem + 3vw,6rem)}
.places__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem}
.place{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.55rem;
  box-shadow:var(--sh-1);
}
.place h3{font-size:1.25rem}
.place address{font-style:normal; color:var(--ink-soft); font-size:.94rem; line-height:1.6}
.place__hours{
  display:flex; align-items:center; gap:.5rem; margin-top:.2rem;
  font-size:.88rem; font-weight:600; color:var(--olive);
}
.place__hours i{width:.45rem; height:.45rem; border-radius:50%; background:var(--olive); font-style:normal}
.place__wait{font-size:.85rem; color:var(--muted)}
.place .btn{margin-top:auto; align-self:flex-start}

.hours-note{
  margin-top:1.5rem; padding:1.2rem 1.4rem; border-radius:var(--r-m);
  background:var(--olive-wash); border:1px solid #dfe3d2; color:var(--ink-2);
  font-size:.92rem;
}
.hours-note b{color:var(--ink)}

/* ---------------- Fußzeile ---------------- */
.foot{padding:3.2rem 0 2.2rem}
.foot__inner{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.2rem}
.foot .mark{color:#fbf7f1; font-size:2.1rem}
.foot__blurb{color:#b8a996; font-size:.92rem; margin:1rem 0 0; max-width:22rem}
.foot h4{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--honey); font-family:'Manrope',sans-serif; font-weight:700; margin:0 0 .9rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.foot a{color:#d9cebe; text-decoration:none; font-size:.92rem}
.foot a:hover{color:#fbf7f1; text-decoration:underline; text-underline-offset:3px}
.foot__bottom{
  margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid rgba(233,224,212,.14);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:#9d8f7e;
}
@media (max-width:760px){ .foot__inner{grid-template-columns:1fr 1fr} .foot__brand{grid-column:1/-1} }

/* ---------------- Tisch reservieren ---------------- */
.reserve{padding:clamp(3rem,2.4rem + 2.6vw,4.8rem) 0; position:relative; overflow:hidden}
.reserve::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:radial-gradient(65% 60% at 8% 0%, rgba(192,140,58,.18), transparent 62%),
             radial-gradient(55% 70% at 96% 110%, rgba(109,124,76,.18), transparent 60%);
}
.reserve__inner{position:relative; display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,1rem + 4vw,4rem); align-items:center}
.reserve__lede{color:#b8a996; margin:1rem 0 0; max-width:34rem}
.reserve__box{
  background:rgba(255,255,255,.05); border:1px solid rgba(233,224,212,.16);
  border-radius:var(--r-m); padding:1.6rem 1.5rem;
}
.reserve__facts{list-style:none; display:flex; gap:1.4rem; flex-wrap:wrap; margin:0 0 1.4rem; padding:0}
.reserve__facts b{display:block; font-family:'Fraunces',serif; font-size:1.4rem; color:var(--honey); line-height:1}
.reserve__facts span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#a2907c}
.reserve__small{margin:.9rem 0 0; font-size:.8rem; color:#a2907c; text-align:center}
.reserve .btn{--bg:var(--paper); --fg:var(--ink); --bd:var(--paper)}
.reserve .btn:hover{--bg:#fff; --bd:#fff}
@media (max-width:860px){ .reserve__inner{grid-template-columns:1fr} }

/* Formular */
.fields{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.fields .full{grid-column:1/-1}
@media (max-width:520px){ .fields{grid-template-columns:1fr} }
.field textarea{
  width:100%; padding:.8rem 1rem; border-radius:var(--r-s); border:1px solid var(--line);
  background:var(--card); color:var(--ink); font:inherit; font-size:.95rem; resize:vertical; min-height:4.5rem;
}
.field textarea:focus{outline:2px solid var(--olive); outline-offset:1px; border-color:var(--olive)}
.field small{display:block; margin-top:.35rem; font-size:.76rem; color:var(--muted); letter-spacing:0; text-transform:none; font-weight:400}
.field.is-bad input,.field.is-bad select{border-color:var(--clay); box-shadow:inset 0 0 0 1px var(--clay)}
.field.is-bad small{color:var(--clay)}

.slots{display:flex; flex-wrap:wrap; gap:.4rem}
.slot{
  padding:.5rem .85rem; border-radius:100px; border:1px solid var(--line); background:var(--card);
  color:var(--ink-soft); font-size:.85rem; font-weight:600; cursor:pointer;
  font-variant-numeric:tabular-nums; transition:all .2s var(--ease);
}
.slot:hover{border-color:var(--ink); color:var(--ink)}
.slot.is-on{background:var(--ink); border-color:var(--ink); color:#fbf7f1}
.slots--empty{font-size:.88rem; color:var(--muted)}

/* ---------------- Overlays ---------------- */
.scrim{
  position:fixed; inset:0; z-index:100; background:rgba(31,24,19,.42);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.scrim.is-open{opacity:1; visibility:visible}

.sheet{
  position:fixed; z-index:110; background:var(--card);
  box-shadow:var(--sh-3); display:flex; flex-direction:column;
  transition:transform .38s var(--ease), opacity .3s var(--ease), visibility .3s;
}

/* Warenkorb-Schublade */
.drawer{
  top:0; right:0; bottom:0; width:min(100%,25rem);
  transform:translateX(102%); visibility:hidden;
}
.drawer.is-open{transform:none; visibility:visible}

/* Modal (Produkt & Kasse) */
.modal{
  top:50%; left:50%; width:min(100% - 1.6rem,34rem); max-height:min(92vh,54rem);
  border-radius:var(--r-l);
  transform:translate(-50%,-46%) scale(.97); opacity:0; visibility:hidden;
}
.modal.is-open{transform:translate(-50%,-50%) scale(1); opacity:1; visibility:visible}
@media (max-width:620px){
  .modal{top:auto; bottom:0; left:0; width:100%; max-height:94vh; border-radius:var(--r-l) var(--r-l) 0 0; transform:translateY(102%)}
  .modal.is-open{transform:none}
}

.sheet__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.3rem; border-bottom:1px solid var(--line-soft); flex:none;
}
.sheet__head h2,.sheet__head h3{font-size:1.25rem}
.sheet__body{padding:1.3rem; overflow:auto; flex:1}
.sheet__foot{padding:1.1rem 1.3rem 1.3rem; border-top:1px solid var(--line-soft); flex:none; background:var(--card)}

.iconbtn{
  width:2.2rem; height:2.2rem; flex:none; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  display:grid; place-items:center; font-size:1.1rem; line-height:1;
  transition:background-color .2s, border-color .2s;
}
.iconbtn:hover{background:var(--paper-warm); border-color:var(--ink)}

/* Produktdetail */
.pd__ph{aspect-ratio:16/10; border-radius:var(--r-m); overflow:hidden; background:var(--paper-warm); margin-bottom:1.2rem}
.pd__ph img{width:100%; height:100%; object-fit:cover}
.pd__name{font-family:'Fraunces',serif; font-size:1.7rem; font-weight:600; color:var(--ink); line-height:1.15; margin-bottom:.4rem}
.pd__desc{color:var(--ink-soft); font-size:.96rem}

.optgroup{margin-top:1.4rem}
.optgroup__label{font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem}
.opts{display:flex; gap:.5rem; flex-wrap:wrap}
.opt{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1rem; border-radius:100px; border:1px solid var(--line);
  background:var(--card); cursor:pointer; font-size:.88rem; font-weight:600; color:var(--ink-soft);
  transition:all .2s var(--ease);
}
.opt:hover{border-color:var(--ink)}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt:has(input:checked){background:var(--ink); border-color:var(--ink); color:#fbf7f1}
.opt:has(input:focus-visible){outline:2px solid var(--olive); outline-offset:2px}
.opt small{opacity:.7; font-weight:500}

.qty{display:inline-flex; align-items:center; gap:.2rem; border:1px solid var(--line); border-radius:100px; padding:.22rem}
.qty button{
  width:2.1rem; height:2.1rem; border-radius:50%; border:0; background:transparent; cursor:pointer;
  font-size:1.15rem; line-height:1; color:var(--ink); display:grid; place-items:center;
}
.qty button:hover{background:var(--paper-warm)}
.qty output{min-width:1.8rem; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}

.pd__foot{display:flex; align-items:center; gap:.9rem}
.pd__foot .btn{flex:1}

/* Warenkorb-Zeilen */
.lines{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.line{display:grid; grid-template-columns:4rem 1fr auto; gap:.9rem; align-items:start}
.line__ph{width:4rem; height:4rem; border-radius:var(--r-s); overflow:hidden; background:var(--paper-warm)}
.line__ph img{width:100%; height:100%; object-fit:cover}
.line__name{font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.3}
.line__opts{font-size:.8rem; color:var(--muted); margin:.15rem 0 .4rem}
.line__price{font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.line .qty{transform:scale(.86); transform-origin:left}

.empty{text-align:center; padding:3rem 1rem; color:var(--muted)}
.empty strong{display:block; font-family:'Fraunces',serif; font-size:1.3rem; color:var(--ink); margin-bottom:.4rem; font-weight:600}

.total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9rem}
.total span{color:var(--muted); font-size:.9rem}
.total b{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600}
.foot-note{font-size:.78rem; color:var(--muted); margin:.8rem 0 0; text-align:center}

/* Kasse */
.stepper{display:flex; gap:.4rem; margin-bottom:1.4rem}
.stepper li{
  flex:1; list-style:none; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding-top:.55rem;
  border-top:2.5px solid var(--line);
}
.stepper li.is-done{color:var(--olive); border-color:var(--olive)}
.stepper li.is-now{color:var(--ink); border-color:var(--ink)}

.choice{
  display:block; position:relative; padding:1rem 1.1rem; border-radius:var(--r-m);
  border:1px solid var(--line); background:var(--card); cursor:pointer; margin-bottom:.6rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.choice:hover{border-color:var(--ink)}
.choice input{position:absolute; opacity:0; width:0; height:0}
.choice:has(input:checked){border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:#fdfbf8}
.choice:has(input:focus-visible){outline:2px solid var(--olive); outline-offset:2px}
.choice__row{display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.choice__name{font-weight:700; color:var(--ink)}
.choice__meta{font-size:.82rem; color:var(--olive); font-weight:700; white-space:nowrap}
.choice__sub{font-size:.86rem; color:var(--muted); margin-top:.25rem}

.field{margin-bottom:.9rem}
.field label{display:block; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem}
.field input,.field select{
  width:100%; padding:.8rem 1rem; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:inherit; font-size:.95rem;
}
.field input:focus,.field select:focus{outline:2px solid var(--olive); outline-offset:1px; border-color:var(--olive)}

.paylist{display:grid; gap:.5rem}
.pay{
  display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  padding:.95rem 1.1rem; border-radius:var(--r-m); border:1px solid var(--line);
  background:var(--card); cursor:pointer; font-weight:700; color:var(--ink);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.pay:hover{border-color:var(--ink); transform:translateY(-1px)}
.pay em{margin-left:auto; font-style:normal; font-size:.8rem; font-weight:600; color:var(--muted)}

.demo{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.85rem 1rem; border-radius:var(--r-s); margin-bottom:1.2rem;
  background:#fdf4e3; border:1px solid #f0dfbe; color:#6b4f1c; font-size:.84rem; line-height:1.5;
}
.demo b{color:#4a360f}

.done{text-align:center; padding:1.5rem .5rem}
.done__mark{
  width:3.6rem; height:3.6rem; margin:0 auto 1.1rem; border-radius:50%;
  background:var(--olive); color:#fff; display:grid; place-items:center; font-size:1.7rem;
}
.done h3{font-size:1.7rem; margin-bottom:.5rem}
.done p{color:var(--ink-soft)}
.code{
  display:inline-block; margin:1.1rem 0; padding:.8rem 1.4rem; border-radius:var(--r-s);
  background:var(--ink); color:#fbf7f1; font-family:'Manrope',monospace;
  font-size:1.25rem; font-weight:800; letter-spacing:.12em;
}
.recap{
  text-align:left; margin-top:1.2rem; padding:1.1rem 1.2rem;
  border-radius:var(--r-m); background:var(--paper-warm); border:1px solid var(--line);
}
.recap div{display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; font-size:.9rem}
.recap dt{color:var(--muted)}
.recap dd{margin:0; font-weight:700; color:var(--ink); text-align:right}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:1.5rem; z-index:200;
  transform:translate(-50%,150%); opacity:0;
  background:var(--ink); color:#fbf7f1; padding:.85rem 1.3rem; border-radius:100px;
  font-size:.9rem; font-weight:600; box-shadow:var(--sh-3); pointer-events:none;
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.toast.is-on{transform:translate(-50%,0); opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* Vor der Eröffnung: Warenkorb und Abholleiste ausblenden */
.cartbtn[hidden], .pickbar[hidden]{display:none!important}