@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-var.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-mono-600.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/noto-sans-devanagari-400.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Noto Nastaliq Urdu';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/noto-nastaliq-urdu-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/noto-sans-devanagari-700.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Noto Nastaliq Urdu';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/noto-nastaliq-urdu-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* Seitengerüst: Grundregeln, die im Entwurf die Artefakt-Plattform bzw. das Gerüst in
   uebergabe/01_live/vorschau-mit-seitengeruest.html lieferte. Ohne [hidden]-Regel stehen
   Sprachmenü, Fehlermeldungen und Erfolgskästen offen, weil ihre eigenen display-Regeln gewinnen. */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: Regaletikett-System – hell wie das Logo. Jede Information sitzt auf einem „Etikett“:
   Gangschilder als Abschnitte, Preisetiketten als Produktkarten, Standort als feste Infoleiste.
   Bewusst ein heller Look (wie das Ladenschild), auch im dunklen Systemmodus. */
:root{
  --paper:#FFFFFF;      /* Logo-Weiß */
  --shelf:#F4F6F0;      /* Regalboden, leicht grün getönt */
  --shelf-2:#E8ECE1;
  --ink:#1B1511;        /* Zimt-Schwarz statt Neutral-Schwarz */
  --muted:#5B584F;
  --line:#DCE0D3;
  --line-2:#9EA595;     /* Ränder ≥ 3:1 */
  --leaf:#0B5A1E;       /* Logo-Grün: Aktion, Gangschilder */
  --leaf-hi:#2E8B3E;
  --chili:#C8140E;      /* Logo-Rot: Name, Schärfe, Hinweise */
  --kurkuma:#F2BF0A;    /* Preis-Gelb */
  --kurkuma-soft:#FFF5CC;
  --lake:#0E6CB6;       /* Bodensee-Blau: Standort, Links */
  --lagoon:#4DD0FE;     /* Kühlware */
  --lagoon-soft:#E4F7FF;
  --zimt:#531403;
  --f-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:8px;
  --gx:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:1.0625rem;line-height:1.55;overflow-x:clip}
h1,h2,h3,h4{margin:0;line-height:1.05;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
p{margin:0}
a{color:var(--lake)}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block}
:focus-visible{outline:3px solid var(--lake);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gx)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.02em}
.tabnum{font-variant-numeric:tabular-nums}
.ic{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.ph{display:inline-block;font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--kurkuma);color:var(--ink);border-radius:3px;padding:.05rem .35rem;vertical-align:.1em;white-space:nowrap}

/* ---------- Kopf: Infoleiste + Kopfzeile ---------- */
.top{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:var(--paper)}
.info{background:var(--leaf);color:#fff;font-size:.875rem}
.info .wrap{display:flex;align-items:center;gap:.4rem 1.4rem;min-height:40px;flex-wrap:wrap;padding-block:.35rem}
.info span,.info a{display:inline-flex;align-items:center;gap:.45rem;color:#fff;text-decoration:none}
.info a{font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.info .pbox{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:3px;background:#fff;color:var(--lake);font-weight:800;font-size:.8rem;line-height:1}
.info .ph{background:var(--kurkuma)}
.show-s{display:none!important}
.lang{margin-left:auto;display:inline-flex;border:1px solid rgba(255,255,255,.6);border-radius:6px;overflow:hidden}
.lang button{border:0;background:transparent;color:#fff;font-family:var(--f-mono);font-size:.8rem;font-weight:600;padding:.25rem .6rem;min-height:32px}
.lang button[aria-pressed="true"]{background:#fff;color:var(--leaf)}
header.bar{border-bottom:1px solid var(--line);background:var(--paper)}
header.bar .wrap{display:flex;align-items:center;gap:1.2rem;min-height:72px}
.logo{line-height:0}
.logo img{height:56px;width:auto;display:block}
nav.main{display:flex;gap:.2rem;margin-left:auto}
nav.main a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:.6rem .8rem;border-radius:6px;font-stretch:90%}
nav.main a:hover{background:var(--shelf)}
.cart-btn{display:inline-flex;align-items:center;gap:.55rem;border:0;background:var(--leaf);color:#fff;border-radius:var(--r);padding:.7rem 1rem;font-weight:700;min-height:44px}
.cart-btn .count{background:var(--kurkuma);color:var(--ink);border-radius:4px;min-width:1.6rem;height:1.6rem;display:inline-grid;place-items:center;font-family:var(--f-mono);font-size:.85rem;padding-inline:.3rem}
.cart-btn.bump{animation:bump .45s}
@keyframes bump{40%{transform:scale(1.1)}}

/* ---------- Bausteine ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:2px solid transparent;border-radius:var(--r);padding:.75rem 1.2rem;min-height:48px;font-weight:700;font-size:1rem;text-decoration:none;transition:background .2s,transform .2s,border-color .2s;text-align:center}
.btn-go{background:var(--leaf);color:#fff}
.btn-go:hover{background:var(--leaf-hi)}
.btn-line{border-color:var(--line-2);background:var(--paper);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-price{background:var(--kurkuma);color:var(--ink)}
.btn-price:hover{background:#FFD23F}
.chip{border:1.5px solid var(--line-2);background:var(--paper);border-radius:999px;padding:.45rem .95rem;min-height:40px;font-weight:600;font-size:.92rem;transition:all .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
/* Gangschild – Abschnittsüberschrift */
.aisle{display:flex;align-items:stretch;gap:0;margin-bottom:1.6rem;max-width:100%}
.aisle .no{background:var(--kurkuma);color:var(--ink);font-family:var(--f-mono);font-weight:600;font-size:.85rem;display:grid;place-items:center;padding:0 .8rem;border-radius:var(--r) 0 0 var(--r);text-transform:uppercase;letter-spacing:.06em;text-align:center;line-height:1.2}
.aisle h2,.lande .aisle h1{background:var(--leaf);color:#fff;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3.6vw,2.4rem);letter-spacing:.01em;padding:.55rem 1.1rem .5rem;border-radius:0 var(--r) var(--r) 0;min-width:0}
.sec-lead{color:var(--muted);max-width:60ch;margin:-.6rem 0 1.8rem;font-size:1.05rem}
section.block{padding-block:clamp(3.5rem,7vw,5.5rem)}

/* ---------- Start ---------- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 70%,var(--shelf) 100%);padding-block:clamp(2rem,5vw,4rem) clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--chili)}
.eyebrow::before{content:"";width:18px;height:3px;background:var(--chili)}
.hero h1{font-stretch:70%;font-weight:850;text-transform:uppercase;letter-spacing:-.005em}
.hero h1 em{font-style:normal;color:var(--leaf)}
.hero .lead{font-size:1.15rem;color:var(--muted);max-width:52ch}
.search{position:relative;margin-top:1.6rem}
.search form{display:flex;border:2px solid var(--ink);border-radius:10px;background:var(--paper);overflow:hidden;box-shadow:0 6px 0 var(--ink)}
.search input{flex:1;min-width:0;border:0;padding:1rem 1.1rem;font:inherit;font-size:1.1rem;background:transparent;color:var(--ink)}
.search input:focus{outline:none}
.search form:focus-within{box-shadow:0 6px 0 var(--leaf);border-color:var(--leaf)}
.search form button{border:0;background:var(--leaf);color:#fff;padding:0 1.3rem;font-weight:700;display:inline-flex;align-items:center;gap:.5rem}
.try{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem;align-items:center}
.try>span{font-size:.9rem;color:var(--muted);margin-right:.2rem}
.try button{border:1px dashed var(--line-2);background:var(--paper);color:var(--ink);border-radius:6px;padding:.35rem .7rem;min-height:38px;font-size:.95rem}
.try button:hover{border-style:solid;border-color:var(--ink)}
.results{margin-top:1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden}
.results:empty{display:none}
.res{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.res:last-child{border-bottom:0}
.res .sw{width:44px;height:44px;border-radius:6px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),transparent 55%),var(--c)}
.res b{display:block;font-size:1rem;line-height:1.25}
.res small{display:block;color:var(--muted);font-size:.85rem}
.res small mark{background:var(--kurkuma-soft);color:var(--ink);padding:0 .2rem;border-radius:2px}
.res .r-act{display:flex;align-items:center;gap:.6rem}
.res .r-price{font-weight:800;font-stretch:80%;font-size:1.1rem}
.res-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem .8rem;background:var(--shelf);font-size:.92rem}
/* Ladenschild mit Logo 1:1 */
.signpost{position:relative;padding-top:46px;justify-self:center;width:min(100%,480px)}
.signpost::before,.signpost::after{content:"";position:absolute;top:0;width:3px;height:52px;background:var(--zimt);border-radius:2px}
.signpost::before{left:22%}.signpost::after{right:22%}
.signpost .board{position:relative;background:#fff;border:3px solid var(--leaf);border-radius:14px;padding:12px;box-shadow:0 18px 30px -18px rgba(27,21,17,.45);transform-origin:50% -46px;animation:sway 3.2s var(--ease) 1}
.signpost .board::before,.signpost .board::after{content:"";position:absolute;top:-9px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--zimt)}
.signpost .board::before{left:calc(22% - 8px)}.signpost .board::after{right:calc(22% - 8px)}
.signpost img{width:100%;height:auto;border-radius:6px}
@keyframes sway{0%{transform:rotate(-3deg)}35%{transform:rotate(2deg)}65%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
.usp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:2.4rem}
.usp a{display:flex;gap:.7rem;align-items:flex-start;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;transition:border-color .2s,transform .2s}
.usp a:hover{border-color:var(--ink);transform:translateY(-2px)}
.usp .ic{width:1.6rem;height:1.6rem;color:var(--leaf);margin-top:.1rem}
.usp b{display:block;font-size:1rem;line-height:1.25}
.usp small{color:var(--muted);font-size:.88rem;line-height:1.35;display:block;margin-top:.15rem}

/* ---------- Vom Gericht zum Korb ---------- */
.dish-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.dish-tabs .chip{display:inline-flex;align-items:center;gap:.5rem}
.cc{font-family:var(--f-mono);font-size:.72rem;font-weight:600;background:var(--shelf-2);color:var(--ink);border-radius:3px;padding:.05rem .3rem}
.chip[aria-pressed="true"] .cc{background:rgba(255,255,255,.2);color:#fff}
.dish{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--paper)}
.dish-info{background:var(--shelf);padding:clamp(1.2rem,3vw,2rem);display:grid;gap:1rem;align-content:start;border-right:2px dashed var(--line-2)}
.dish-info h3{font-stretch:72%;font-weight:850;text-transform:uppercase;font-size:clamp(2rem,4vw,3rem);line-height:.95}
.dish-info .orig{font-size:1.1rem;color:var(--chili);font-weight:600}
.facts-row{display:flex;flex-wrap:wrap;gap:.5rem}
.fact{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.3rem .6rem}
.dish-info p{color:var(--muted)}
.fresh-note{font-size:.92rem;border-left:3px solid var(--leaf-hi);padding-left:.7rem}
.dish-list{padding:clamp(1rem,2.4vw,1.6rem);display:grid;gap:.2rem;align-content:start}
.ing{display:grid;grid-template-columns:auto 40px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.55rem .2rem;border-bottom:1px dashed var(--line)}
.ing input{width:22px;height:22px;accent-color:var(--leaf);margin:0}
.ing .sw{width:40px;height:40px;border-radius:6px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),transparent 55%),var(--c)}
.ing label{cursor:pointer;min-width:0}
.ing label b{display:block;font-size:1rem;line-height:1.25}
.ing label small{display:block;color:var(--muted);font-size:.85rem}
.ing .tip{display:block;color:var(--leaf);font-size:.85rem;margin-top:.15rem}
.ing .pr{font-weight:800;font-stretch:80%;font-size:1.05rem;white-space:nowrap}
.ing.off{opacity:.55}
.ing.off .pr{text-decoration:line-through}
.dish-sum{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1rem}
.dish-sum .hint{color:var(--muted);font-size:.9rem}

/* ---------- Sortiment: Gangschilder ---------- */
.aisles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem}
.aisle-btn{display:grid;grid-template-columns:auto minmax(0,1fr);text-align:left;border:0;padding:0;border-radius:var(--r);overflow:hidden;background:var(--c);color:var(--fg,#fff);min-height:84px;transition:transform .2s;box-shadow:0 4px 0 rgba(27,21,17,.25)}
.aisle-btn:hover{transform:translateY(-3px)}
.aisle-btn .g{background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--f-mono);font-weight:600;font-size:.85rem;display:grid;place-items:center;padding:0 .7rem;min-width:3.2rem}
.aisle-btn .t{padding:.7rem .9rem;display:grid;align-content:center}
.aisle-btn b{font-stretch:75%;font-weight:850;text-transform:uppercase;font-size:1.25rem;line-height:1.05}
.aisle-btn small{font-size:.85rem;opacity:.92}

/* ---------- Shop ---------- */
.shop-tools{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:1.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.shop-search{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto;align-items:center}
.shop-search input,.shop-search select{border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);border-radius:var(--r);padding:.55rem .8rem;font:inherit;font-size:1rem;min-height:44px;min-width:0}
.shop-search input{width:230px;max-width:100%}
.toggle{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.95rem;min-height:44px;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--leaf)}
.found-note{font-size:.95rem;color:var(--muted);margin-bottom:1rem;min-height:1.4em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1rem}
/* Preisetikett */
.tag{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--line-2);border-radius:6px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;min-width:0}
.tag:hover{transform:translateY(-3px);box-shadow:0 10px 0 -4px var(--shelf-2),0 12px 24px -16px rgba(27,21,17,.5)}
.tag-band{display:flex;justify-content:space-between;align-items:center;gap:.5rem;background:var(--c);color:var(--fg,#fff);padding:.3rem .65rem;font-family:var(--f-mono);font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.tag-band .cold{display:inline-flex;align-items:center;gap:.3rem;background:var(--lagoon-soft);color:var(--ink);border-radius:3px;padding:0 .35rem}
.tag-vis{height:132px;display:grid;place-items:end center;padding-bottom:12px;background:radial-gradient(80% 70% at 50% 100%,var(--shelf),var(--paper))}
.tag-body{padding:.75rem .85rem .2rem;display:grid;gap:.25rem;flex:1}
.tag-name{border:0;background:none;padding:0;text-align:left;font-weight:750;font-stretch:85%;font-size:1.12rem;line-height:1.2;color:var(--ink)}
.tag-name:hover{text-decoration:underline;text-underline-offset:3px}
.tag-name::after{content:"";position:absolute;inset:0;z-index:1}
.orig{color:var(--chili);font-size:.95rem;line-height:1.3}
.orig .lt{color:var(--muted);font-size:.85rem}
.heat{display:inline-flex;gap:1px;align-items:center}
.heat .ic{width:.95rem;height:.95rem;stroke-width:1.6}
.heat .on{fill:var(--chili);stroke:var(--chili)}
.heat .off{stroke:var(--line-2)}
.tag-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;min-height:1.4rem;font-size:.85rem;color:var(--muted)}
.tag-price{display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;padding:.6rem .85rem .8rem;border-top:2px dashed var(--line);margin-top:.5rem}
.tag-price .p{font-weight:850;font-stretch:72%;font-size:1.9rem;line-height:.9;letter-spacing:-.01em}
.tag-price .bp{display:block;font-family:var(--f-mono);font-size:.75rem;color:var(--muted);margin-top:.35rem}
.add{position:relative;z-index:2;border:0;background:var(--leaf);color:#fff;width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;flex:none;transition:background .2s,transform .2s}
.add:hover{background:var(--leaf-hi)}
.add .ic{width:1.3rem;height:1.3rem;stroke-width:2.6}
.add.done{background:var(--kurkuma);color:var(--ink)}
.empty{grid-column:1/-1;border:2px dashed var(--line-2);border-radius:10px;padding:2rem 1.2rem;text-align:center;display:grid;gap:.8rem;justify-items:center}
.note{color:var(--muted);font-size:.9rem;margin-top:1.4rem}
/* Illustrationen im Logo-Stil */
.bowl{position:relative;width:110px;height:64px}
.bowl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:radial-gradient(70% 60% at 35% 20%,rgba(255,255,255,.35),transparent 60%),var(--leaf);border-radius:6px 6px 55px 55px / 6px 6px 42px 42px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2)}

.pack{width:78px;height:104px;border-radius:10px 10px 6px 6px;background:var(--c);position:relative;box-shadow:inset -9px 0 0 rgba(0,0,0,.14)}
.pack::before{content:"";position:absolute;left:0;right:0;top:32px;height:32px;background:#fff}
.pack::after{content:attr(data-l);position:absolute;left:2px;right:2px;top:39px;text-align:center;font-family:var(--f-mono);font-weight:600;font-size:.68rem;color:var(--ink);white-space:nowrap;overflow:hidden}
.herb{width:96px;height:96px;position:relative}
.herb i{position:absolute;bottom:4px;width:30px;height:62px;background:var(--c);border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;transform-origin:50% 100%}
.herb i:nth-child(1){left:12px;transform:rotate(-24deg)}
.herb i:nth-child(2){left:33px;height:78px;background:color-mix(in srgb,var(--c) 80%,#000)}
.herb i:nth-child(3){left:54px;transform:rotate(22deg)}

/* ---------- Wunschprodukt ---------- */
.wish{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:start}
.wish-card{border:2px solid var(--ink);border-radius:12px;padding:clamp(1.2rem,3vw,2rem);display:grid;gap:1rem;background:var(--paper);box-shadow:8px 8px 0 var(--kurkuma)}
.field{display:grid;gap:.3rem;min-width:0}
.field label{font-weight:700;font-size:.92rem}
.field label small{font-weight:500;color:var(--muted)}
.field input,.field textarea,.field select{border:1.5px solid var(--line-2);border-radius:var(--r);padding:.7rem .8rem;font:inherit;font-size:1rem;background:var(--paper);color:var(--ink);width:100%;min-height:46px}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--lake);outline-offset:1px;border-color:var(--lake)}
.field input[aria-invalid="true"]{border-color:var(--chili)}
.err{color:var(--chili);font-size:.88rem;font-weight:600}
.two{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.8rem}
.wish-steps{display:grid;gap:1rem;counter-reset:w}
.wish-steps li{list-style:none;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem;align-items:start}
.wish-steps li::before{counter-increment:w;content:counter(w);width:2.4rem;height:2.4rem;border-radius:var(--r);background:var(--leaf);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--f-mono)}
.wish-steps b{display:block}
.wish-steps span{color:var(--muted);font-size:.95rem}
.ok-box{border:2px solid var(--leaf);background:#EEF7EF;border-radius:var(--r);padding:1rem;display:grid;gap:.4rem}

/* ---------- Laden ---------- */
.visit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.2rem}
.map{position:relative;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#EAF2E6;min-height:320px}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .cap{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;display:grid;gap:.5rem}
.map .cap b{font-size:1.05rem}
.map .cap .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.visit-card{border:1px solid var(--line-2);border-radius:12px;padding:clamp(1.1rem,3vw,1.6rem);display:grid;gap:1rem;align-content:start;min-width:0}
.visit-card h3{font-stretch:75%;font-weight:850;text-transform:uppercase;font-size:1.5rem}
.park{display:flex;gap:.8rem;align-items:flex-start;background:var(--lagoon-soft);border-radius:var(--r);padding:.8rem}
.park .pbig{width:2.2rem;height:2.2rem;border-radius:6px;background:var(--lake);color:#fff;display:grid;place-items:center;font-weight:850;font-size:1.3rem;flex:none}
.hours{width:100%;border-collapse:collapse;font-size:.98rem}
.hours td{padding:.45rem 0;border-bottom:1px dashed var(--line)}
.hours td:last-child{text-align:right;font-family:var(--f-mono);font-size:.92rem}
.hours tr.today td{font-weight:800;color:var(--leaf)}
.contact{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.6rem .8rem;border-radius:var(--r);background:var(--shelf)}
.contact .val{font-weight:700;flex:1;min-width:0;word-break:break-all;user-select:all}
.mini{border:1.5px solid var(--line-2);background:var(--paper);border-radius:6px;padding:.4rem .75rem;min-height:40px;font-size:.88rem;font-weight:700;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.mini:hover{border-color:var(--ink)}

/* FAQ */
.faq{display:grid;gap:.5rem;max-width:860px}
.faq details{border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;font-weight:700;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:1.3rem;color:var(--leaf)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.1rem 1rem;color:var(--muted)}

footer{background:var(--leaf);color:#fff;padding-block:2.5rem;margin-top:2rem}
.foot{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:center}
.foot .flogo{background:#fff;border-radius:10px;padding:8px;width:200px}
.foot .flogo img{width:100%;height:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;align-items:center}
.foot nav a{color:#fff;min-height:44px;display:inline-flex;align-items:center}
.foot p{font-size:.92rem;opacity:.9}

/* ---------- Dialoge: Produkt-Etikett & Warenkorb ---------- */
.scrim{position:fixed;inset:0;background:rgba(27,21,17,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}
.modal{position:fixed;z-index:90;left:50%;top:50%;width:min(860px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--paper);border-radius:12px;border:2px solid var(--ink);transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .25s;overscroll-behavior:contain}
.modal.show{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.m-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--c);color:var(--fg,#fff);padding:.6rem .6rem .6rem 1.1rem;font-family:var(--f-mono);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0;z-index:2}
.x{border:2px solid currentColor;background:transparent;width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;flex:none}
.x .ic{width:1.2rem;height:1.2rem}
.m-body{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.m-label{padding:1.3rem;display:grid;gap:.9rem;align-content:start;border-right:2px dashed var(--line)}
.m-label h2{font-stretch:75%;font-weight:850;font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1}
.m-orig{display:grid;gap:.2rem}
.m-orig div{color:var(--chili);font-size:1.05rem}
.m-orig small{color:var(--muted);font-size:.85rem}
.m-price{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;background:var(--kurkuma-soft);border:1.5px solid var(--kurkuma);border-radius:var(--r);padding:.8rem 1rem}
.m-price .p{font-weight:850;font-stretch:72%;font-size:2.4rem;line-height:.9}
.m-price .bp{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);display:block;margin-top:.3rem}
.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec th{text-align:left;font-weight:600;color:var(--muted);padding:.4rem .6rem .4rem 0;vertical-align:top;white-space:nowrap}
.spec td{padding:.4rem 0;border-bottom:1px dashed var(--line);vertical-align:top}
.spec tr:last-child td{border-bottom:0}
.flag{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line-2);border-radius:4px;padding:.05rem .45rem;font-size:.85rem;margin:0 .3rem .3rem 0}
.m-qty{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.m-lex{padding:1.3rem;display:grid;gap:1rem;align-content:start;background:var(--shelf)}
.m-lex h3{font-family:var(--f-mono);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--leaf);display:flex;align-items:center;gap:.5rem}
.m-lex h3::before{content:"";width:14px;height:3px;background:var(--leaf)}
.m-lex h4{font-size:1rem;margin-bottom:.2rem}
.m-lex p{font-size:.98rem}
.m-lex .bot{font-style:italic;color:var(--muted)}
.legend{border-left:3px solid var(--kurkuma);padding-left:.8rem}
.legend b{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.src{font-size:.88rem}
.src ol{margin:.3rem 0 0;padding-left:1.2rem;display:grid;gap:.2rem}
.dish-links{display:flex;flex-wrap:wrap;gap:.4rem}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--paper);z-index:90;transform:translateX(105%);transition:transform .4s var(--ease);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);border-left:2px solid var(--ink)}
.drawer.show{transform:none}
.d-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;background:var(--leaf);color:#fff}
.d-head h2{font-stretch:75%;font-weight:850;text-transform:uppercase;font-size:1.6rem}
.d-head h2:focus{outline:none}
.stepper{display:flex;gap:.3rem;padding:.7rem 1.1rem 0}
.stepper span{flex:1;height:4px;border-radius:2px;background:var(--line)}
.stepper span.on{background:var(--leaf)}
.d-body{flex:1;overflow:auto;padding:1.1rem;display:grid;gap:.9rem;align-content:start;overscroll-behavior:contain}
.d-foot{border-top:2px dashed var(--line);padding:1rem 1.1rem;display:grid;gap:.6rem}
.d-foot .row{display:flex;flex-wrap:wrap-reverse;gap:.6rem}
.d-foot .row .btn-line{flex:0 0 auto}
.d-foot .row .btn-go{flex:1 1 200px;min-width:0}
.free{background:var(--shelf);border-radius:var(--r);padding:.8rem .9rem;font-size:.95rem;display:grid;gap:.5rem}
.bar-p{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bar-p i{display:block;height:100%;background:var(--leaf);transition:width .5s}
.line-i{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding-bottom:.8rem;border-bottom:1px dashed var(--line)}
.line-i .sw{width:48px;height:48px;border-radius:6px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),transparent 55%),var(--c)}
.line-i .nm{font-weight:700;font-size:.98rem;line-height:1.25;min-width:0}
.line-i .nm small{display:block;color:var(--muted);font-weight:500}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r);margin-top:.35rem}
.qty button{border:0;background:none;width:44px;height:44px;font-size:1.2rem;font-weight:700}
.qty span{min-width:1.8rem;text-align:center;font-family:var(--f-mono);font-weight:600}
.sum{display:flex;justify-content:space-between;gap:1rem;font-size:.98rem}
.sum.total{font-weight:850;font-stretch:80%;font-size:1.25rem}
.radio-cards{display:grid;gap:.5rem}
.radio-card{display:flex;gap:.7rem;align-items:flex-start;border:1.5px solid var(--line-2);border-radius:var(--r);padding:.8rem .9rem;cursor:pointer}
.radio-card:has(input:checked){border-color:var(--leaf);background:#EEF7EF}
.radio-card input{width:20px;height:20px;margin-top:.1rem;accent-color:var(--leaf)}
.radio-card b{display:block;font-size:.98rem}
.radio-card small{color:var(--muted)}
.demo{font-size:.88rem;color:var(--muted);border-left:3px solid var(--kurkuma);padding:.5rem .8rem;background:var(--kurkuma-soft);border-radius:0 6px 6px 0}
.done{text-align:center;display:grid;gap:.8rem;justify-items:center;padding-top:1.5rem}
.done .check{width:76px;height:76px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center}
.done .check .ic{width:2.2rem;height:2.2rem;stroke-width:3}
.fly{position:fixed;width:16px;height:16px;border-radius:50%;z-index:95;pointer-events:none;border:2px solid #fff}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r);font-weight:600;font-size:.95rem;z-index:96;transition:transform .35s var(--ease);max-width:calc(100% - 32px)}
.toast{visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .signpost{width:min(100%,360px)}
  .usp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dish{grid-template-columns:minmax(0,1fr)}
  .dish-info{border-right:0;border-bottom:2px dashed var(--line-2)}
  .wish,.visit{grid-template-columns:minmax(0,1fr)}
  .m-body{grid-template-columns:minmax(0,1fr)}
  .m-label{border-right:0;border-bottom:2px dashed var(--line)}
}
@media (max-width:760px){
  html{scroll-padding-top:170px}
  nav.main{display:none}
  .cart-btn{margin-left:auto}
  header.bar .wrap{min-height:64px}
  .logo img{height:44px;width:auto}
  .info .wrap{gap:.2rem .8rem;font-size:.82rem}
  
  .info .hide-s{display:none}
  .shop-search{margin-left:0;width:100%}
  .shop-search input{flex:1}
  .usp{grid-template-columns:minmax(0,1fr)}
  .search input,.shop-search input,.shop-search select,.field input,.field textarea{font-size:16px}
  .search form button span{display:none}
  .show-s{display:inline!important}
  .two{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .modal{top:auto;bottom:0;left:0;width:100%;max-height:92%;border-radius:12px 12px 0 0;transform:translateY(30px);border-width:2px 0 0}
  .modal.show{transform:none}
  .ing{grid-template-columns:auto 36px minmax(0,1fr) auto;gap:.6rem}
  .ing .sw{width:36px;height:36px}
}

/* ===================== WOW-Schicht ===================== */
/* „Bewegung pausieren“ wie „Bewegung reduzieren“: keine Animation, Endzustand sofort.
   Im Entwurf stand hier animation-play-state:paused – das fror einmalige Einblendungen im
   Startzustand ein: Nach dem Neuladen mit gespeicherter Pause hing die Hero-Überschrift
   (hlUp) 76 px tief und abgeschnitten, Produktdialog (unfold) und Zutaten (ingIn) blieben
   unsichtbar (07.10.2026). Die laufenden Effekte (Regal, Klappanzeige) hält app.js an. */
html.paused *,html.paused *::before,html.paused *::after{animation:none!important}
@media (min-width:761px){body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}}
/* Fallblatt-Headline */
.hero h1{font-size:clamp(2.7rem,7.2vw,6.6rem);line-height:.92;margin:.9rem 0 .4rem}
.h1a{display:block}
.flap{display:inline-block;border:0;background:none;padding:0;margin-top:.12em;perspective:600px;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.flap-card{position:relative;display:inline-block;background:var(--ink);color:#fff;padding:.04em .28em .1em;border-radius:.14em;box-shadow:0 .09em 0 var(--chili);transform-origin:50% 50%;transition:background .3s}
.flap-card::after{content:"";position:absolute;left:0;right:0;top:50%;height:.035em;min-height:2px;background:rgba(255,255,255,.22)}
.flap:hover .flap-card{background:var(--leaf)}
.flap-card.flip{animation:flip .52s cubic-bezier(.5,0,.3,1)}
@keyframes flip{0%{transform:rotateX(0)}48%{transform:rotateX(-90deg)}52%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.flap-w{display:inline-block;min-width:2ch}
.flap-cap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-bottom:1rem;font-size:.98rem;color:var(--muted)}
.flap-lang{font-family:var(--f-mono);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;background:var(--kurkuma);color:var(--ink);padding:.15rem .5rem;border-radius:4px}
.pause{display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid var(--line-2);background:var(--paper);border-radius:999px;padding:.3rem .8rem;min-height:36px;font-size:.85rem;font-weight:600;color:var(--ink)}
.pause:hover{border-color:var(--ink)}
/* Lebendes Regal */
.shelf-wrap{margin-top:clamp(1.8rem,4vw,3rem)}
.shelf{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,#FBFCF8 0%,#EEF2E7 100%);border:1.5px solid var(--line);padding-top:6px;isolation:isolate}
.shelf::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at var(--sx,50%) -10%,rgba(242,191,10,.0),transparent 60%);transition:background .4s;z-index:3;pointer-events:none}
.shelf.searching::before{background:radial-gradient(40% 90% at var(--sx,50%) 0%,rgba(242,191,10,.28),transparent 70%)}
.level{position:relative;height:clamp(104px,10vw,128px);padding-bottom:22px}
.level::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(180deg,#2E8B3E 0,#0B5A1E 5px,#0B5A1E 100%);box-shadow:0 6px 10px -6px rgba(27,21,17,.5);z-index:2}
.row{position:absolute;left:-60px;bottom:22px;display:flex;align-items:flex-end;gap:clamp(10px,1.2vw,16px);padding-inline:12px;will-change:transform;transition:transform .7s var(--ease)}
.it{position:relative;flex:none;display:grid;justify-items:center;cursor:pointer;transition:transform .45s var(--ease),opacity .45s,filter .45s;transform-origin:50% 100%}
.it:hover{transform:translateY(-6px)}
.it .pt{position:absolute;bottom:-20px;z-index:3;font-family:var(--f-mono);font-weight:600;font-size:.62rem;background:#fff;color:var(--ink);border-radius:2px;padding:0 .25rem;line-height:1.5;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.shelf.loading .it{animation:stock .8s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i)*22ms + var(--r)*160ms)}
@keyframes stock{0%{transform:translateY(-70px) rotate(-6deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.shelf.searching .it{opacity:.22;filter:grayscale(.7)}
.shelf.searching .it.hit{opacity:1;filter:none;transform:translateY(-12px) scale(1.14);z-index:4}
.shelf.searching .it.hit::after{content:"";position:absolute;left:50%;bottom:-6px;width:70px;height:14px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(242,191,10,.9),transparent);z-index:-1}
.jar{position:relative;width:var(--w,44px);height:var(--h,60px);border-radius:7px 7px 9px 9px;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.25) 35%,rgba(255,255,255,.55) 80%);border:2px solid rgba(27,21,17,.25);overflow:hidden}
.jar::before{content:"";position:absolute;left:0;right:0;bottom:0;height:74%;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 30%),radial-gradient(circle,rgba(0,0,0,.16) 1px,transparent 1.5px) 0 0/5px 5px,var(--c)}
.jar::after{content:"";position:absolute;top:0;left:0;right:0;height:11px;background:var(--lid,#531403);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.jar i{position:absolute;left:4px;right:4px;top:42%;height:12px;background:#fff;border-radius:2px;z-index:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bag{position:relative;width:var(--w,44px);height:var(--h,66px);background:var(--c);border-radius:5px 5px 7px 7px;box-shadow:inset -7px 0 0 rgba(0,0,0,.14),inset 0 6px 0 rgba(255,255,255,.18);clip-path:polygon(0 6%,8% 0,92% 0,100% 6%,100% 100%,0 100%)}
.bag i{position:absolute;left:0;right:0;top:34%;height:30%;background:#fff;display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;font-size:7px;color:var(--ink);overflow:hidden;white-space:nowrap}
.bottle{position:relative;width:var(--w,30px);height:var(--h,78px);display:grid;justify-items:center}
.bottle::before{content:"";width:40%;height:22%;background:var(--lid,#1B1511);border-radius:3px 3px 0 0}
.bottle span{display:block;width:100%;height:78%;background:var(--c);border-radius:9px 9px 5px 5px;box-shadow:inset -6px 0 0 rgba(0,0,0,.16),inset 4px 0 0 rgba(255,255,255,.25);position:relative}
.bottle span::after{content:"";position:absolute;left:0;right:0;top:30%;height:26%;background:#fff}
.bunch{position:relative;width:46px;height:var(--h,72px)}
.bunch b{position:absolute;bottom:0;width:16px;height:85%;background:var(--c);border-radius:50% 50% 40% 40% / 70% 70% 30% 30%;transform-origin:50% 100%}
.bunch b:nth-child(1){left:6px;transform:rotate(-18deg)}.bunch b:nth-child(2){left:15px;height:100%;filter:brightness(.85)}.bunch b:nth-child(3){left:24px;transform:rotate(16deg)}
.bunch::after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:8px;background:var(--chili);border-radius:2px}
.bubble{position:absolute;z-index:6;top:8px;left:0;transform:translate(-50%,-6px);background:var(--ink);color:#fff;border-radius:10px;padding:.45rem .7rem;font-size:.85rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s,left .35s var(--ease),top .35s var(--ease)}
.bubble.show{opacity:1}
.bubble::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink);border-bottom:0}
.bubble small{font-weight:500;opacity:.85}
/* Gewürz-Bordüre */
.band{height:30px;background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='30' viewBox='0 0 150 30'%3E%3Cpath d='M8 22C8 12 16 6 26 6c0 10-8 16-18 16Z' fill='%232E8B3E'/%3E%3Cpath d='M8 22 24 8' stroke='%230B5A1E' stroke-width='1.5'/%3E%3Cpath d='M52 6c5 2 8 7 5 13-3 6-9 8-15 8 5-3 7-7 8-12 .6-3 1-6 2-9Z' fill='%23C8140E'/%3E%3Cpath d='M52 6c0-2 1-3 3-4' stroke='%230B5A1E' stroke-width='2' fill='none'/%3E%3Cg transform='translate(90 15)' fill='%23531403'%3E%3Cpath d='M0 0-2.5-10Q0-13 2.5-10Z'/%3E%3Cpath d='M0 0-2.5-10Q0-13 2.5-10Z' transform='rotate(45)'/%3E%3Cpath d='M0 0-2.5-10Q0-13 2.5-10Z' transform='rotate(90)'/%3E%3Cpath d='M0 0-2.5-10Q0-13 2.5-10Z' transform='rotate(135)'/%3E%3Cpath d='M0 0-2.5-10Q0-13 2.5-10Z' transform='rotate(180)'/%3E%3Cpath d='M0 0-2.5-10Q0-13 2.5-10Z' transform='rotate(225)'/%3E%3Cpath d='M0 0-2.5-10Q0-13 2.5-10Z' transform='rotate(270)'/%3E%3Cpath d='M0 0-2.5-10Q0-13 2.5-10Z' transform='rotate(315)'/%3E%3C/g%3E%3Ccircle cx='126' cy='15' r='5' fill='%23F2BF0A'/%3E%3Ccircle cx='138' cy='11' r='2.5' fill='%234DD0FE'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:0 center;animation:band 60s linear infinite;border-block:1px solid var(--line)}
@keyframes band{to{background-position:-1500px center}}
/* Gangschilder hängen und schwingen ein */
.aisle{position:relative;display:inline-flex;margin-top:34px;transform-origin:50% -34px}
.aisle::before,.aisle::after{content:"";position:absolute;top:-34px;width:2px;height:34px;background:var(--zimt)}
.aisle::before{left:22px}.aisle::after{right:22px}
.aisle.in{animation:swing 1.4s var(--ease)}
@keyframes swing{0%{transform:rotate(-7deg)}30%{transform:rotate(4deg)}55%{transform:rotate(-2deg)}78%{transform:rotate(1deg)}100%{transform:rotate(0)}}
/* Preisetiketten am Haken */
.tag{transform-origin:50% 0}
.tag:hover{transform:none;animation:hang 1s var(--ease)}
@keyframes hang{0%{transform:rotate(0)}22%{transform:rotate(2.4deg)}50%{transform:rotate(-1.5deg)}76%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
.tag-band{position:relative}
.hook{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--paper);transform:translate(-50%,-50%);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
/* Etikett klappt auf */
.modal.show .m-body{animation:unfold .5s var(--ease) both}
@keyframes unfold{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
/* Dampfende Schüssel */
.dish-info{position:relative}
.pot{position:absolute;right:clamp(.6rem,2vw,1.4rem);top:clamp(.6rem,2vw,1.2rem);width:clamp(88px,10vw,120px)}
.pot svg{width:100%;height:auto;overflow:visible}
.steam{fill:none;stroke:var(--line-2);stroke-width:4;stroke-linecap:round;opacity:0;animation:steam 3.2s ease-in-out infinite}
.steam:nth-of-type(2){animation-delay:1s}.steam:nth-of-type(3){animation-delay:2s}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-22px)}}
.dish-info h3,.dish-info .orig{padding-right:clamp(90px,11vw,130px)}
.dish-info>.facts-row,.dish-info>p{position:relative}
#dish.swap .dish-list .ing{animation:ingIn .5s var(--ease) both;animation-delay:calc(var(--k)*55ms)}
@keyframes ingIn{from{opacity:0;transform:translateX(24px)}}
/* WhatsApp-Vorschau */
.chat{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#ECE5DA}
.chat-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--leaf);color:#fff;padding:.55rem .8rem}
.chat-h .av{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none}
.chat-h .av img{width:30px;height:22px;object-fit:cover}
.chat-h b{font-size:.92rem;line-height:1.1}
.chat-h small{display:block;font-size:.75rem;opacity:.85}
.chat-b{padding:.8rem;display:grid;gap:.5rem;min-height:86px;align-content:start;background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px);background-size:12px 12px}
.bub{max-width:85%;padding:.45rem .65rem;border-radius:10px;font-size:.92rem;line-height:1.35;box-shadow:0 1px 0 rgba(0,0,0,.12);overflow-wrap:anywhere}
.bub.me{justify-self:end;background:#D9FDD3;border-top-right-radius:2px}
.bub.them{justify-self:start;background:#fff;border-top-left-radius:2px;animation:pop .35s var(--ease)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.typing{display:inline-flex;gap:3px;align-items:center;height:1.1em}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
/* Anfahrt zeichnet sich */
.cart-btn .count.roll{animation:roll .45s var(--ease)}
@keyframes roll{0%{transform:translateY(-70%);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:760px){
  .row{gap:10px}
  .level{height:96px}
  .shelf{padding-top:40px}
  .pot{width:76px}
  .dish-info h3,.dish-info .orig{padding-right:84px}
}

/* ===================== v7: Bühne, Ruhe, Etikett-Druck ===================== */
section.block{padding-block:clamp(4.5rem,9vw,7rem)}
.band{border-block:0}
/* Bühne */
.stage{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(620px,82vh,780px);display:flex;align-items:center;padding-block:clamp(2.5rem,5vw,4rem);background:linear-gradient(180deg,#FBFCF8 0%,#EEF2E7 100%);border:0}
.stage .shelf{position:absolute;inset:0;border:0;border-radius:0;background:transparent;padding-top:0;display:flex;flex-direction:column;justify-content:flex-end;z-index:0}
.stage .level{flex:1;height:auto;min-height:0}
.stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(251,252,248,.92) 0%,rgba(251,252,248,.7) 36%,rgba(251,252,248,0) 62%)}
.stage .signpost{position:absolute;z-index:3;top:0;right:var(--gx);width:min(28vw,320px);padding-top:58px;transition:transform .7s var(--ease),opacity .5s}
.stage .signpost::before,.stage .signpost::after{height:64px}
.stage.searching .signpost{transform:translateY(-115%) rotate(-4deg);opacity:0}
.stage-in{position:relative;z-index:4}
.panel{max-width:610px;background:var(--paper);border-radius:22px;padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 40px 80px -40px rgba(27,21,17,.55),0 2px 0 rgba(27,21,17,.06)}
.panel .hero h1,.stage h1{font-size:clamp(2.4rem,5.2vw,4.8rem)}
.panel .lead{font-size:1.05rem}
.panel .search{margin-top:1.2rem}
.usp-band{padding-block:clamp(2rem,4vw,3rem) clamp(1rem,3vw,2rem)}
.usp{margin-top:0;gap:clamp(1rem,3vw,2.5rem)}
.usp a{border:0;padding:0;background:none}
.usp a:hover{transform:none}
.usp a:hover b{text-decoration:underline;text-underline-offset:3px}
.usp .ic{width:2rem;height:2rem;padding:.35rem;border-radius:10px;background:var(--leaf);color:#fff;box-sizing:content-box;margin:0}
/* Abschnittsfarben */
.sec-yellow{background:var(--kurkuma)}
.sec-yellow .aisle .no{background:var(--ink);color:#fff}
.sec-yellow .sec-lead{color:var(--ink)}
.sec-yellow .chip{background:var(--paper);border-color:transparent}
.sec-yellow .chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.sec-yellow .aisle::before,.sec-yellow .aisle::after{background:var(--ink)}
.dish{border:0;box-shadow:0 30px 60px -30px rgba(27,21,17,.5);border-radius:18px}
.dish-info{border-right:2px dashed var(--line)}
.sec-green{background:var(--leaf);color:#fff}
.sec-green .sec-lead,.sec-green .wish-steps span{color:rgba(255,255,255,.85)}
.sec-green .aisle h2{background:var(--paper);color:var(--leaf)}
.sec-green .aisle::before,.sec-green .aisle::after{background:var(--kurkuma)}
.sec-green .wish-steps li::before{background:var(--kurkuma);color:var(--ink)}
.sec-green :focus-visible{outline-color:var(--kurkuma)}
.wish-card{border:0;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border-radius:18px}
.wish-card :focus-visible{outline-color:var(--lake)}
.sec-lake{background:var(--lagoon-soft)}
.map{border:0;border-radius:18px;box-shadow:0 30px 60px -34px rgba(14,108,182,.6)}
.visit-card{border:0;background:var(--paper);border-radius:18px;box-shadow:0 20px 50px -34px rgba(27,21,17,.4)}
.faq{gap:0;border-top:1px solid var(--line-2)}
.faq details{border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:none}
.faq summary{padding-inline:0}
.faq details p{padding-inline:0}
.tag{border:1px solid var(--line)}
.tag-vis{height:150px;padding-bottom:10px;background:radial-gradient(70% 60% at 50% 100%,var(--shelf),var(--paper))}
.tag-vis .art{width:104px;height:auto}
/* Etikett-Druck-Illustrationen */
.art{display:block;overflow:visible}
.it .art{width:var(--aw,64px);height:auto}
.mini-art{display:grid;place-items:center;width:44px;height:52px;flex:none}
.mini-art .art{width:42px;height:auto}
.res .mini-art,.line-i .mini-art{width:44px}
.ing{grid-template-columns:auto 44px minmax(0,1fr) auto}
.m-top{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1rem;align-items:center}
.m-art .art{width:96px;height:auto}
@media (max-width:760px){
  .stage{display:block;min-height:0;padding:0}
  .stage .shelf{position:relative;inset:auto;height:220px}
  .stage .level.l4,.stage .level:nth-child(3){display:none}
  .stage::after{background:linear-gradient(180deg,rgba(251,252,248,0) 60%,rgba(251,252,248,1) 100%);height:220px;bottom:auto}
  .stage .signpost{display:none}
  .stage-in{margin-top:-28px;padding-bottom:1.2rem}
  .panel{padding:1.2rem}
  .usp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .usp small{display:none}
  .ing{grid-template-columns:auto 40px minmax(0,1fr) auto}
  .m-top{grid-template-columns:72px minmax(0,1fr)}
  .m-art .art{width:72px}
}

/* ===================== v8: „Der Gang“ ===================== */
.hero.aisle-hero{padding:0;background:var(--paper);border:0;overflow:hidden}
.wall{position:relative;height:clamp(540px,calc(100svh - 200px),780px);background:
  radial-gradient(900px 420px at 18% -8%,rgba(255,255,255,.16),transparent 65%),
  radial-gradient(700px 380px at 82% 4%,rgba(242,191,10,.14),transparent 60%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 140px),
  linear-gradient(180deg,#0E6526 0%,#0B5A1E 45%,#07431A 100%);isolation:isolate}
.aisle-hero .shelf{position:absolute;inset:0;background:transparent;border:0;border-radius:0;padding-top:52px;display:flex;flex-direction:column;overflow:hidden;z-index:1}
.aisle-hero .shelf::before{display:none}
.aisle-hero .level{flex:1;height:auto;min-height:0;padding-bottom:26px}
.aisle-hero .level::after{height:26px;background:linear-gradient(180deg,#A0552A 0,#7A3A16 4px,#531403 100%);box-shadow:0 10px 18px -6px rgba(0,0,0,.55)}
.aisle-hero .row{left:44%;bottom:26px;gap:clamp(22px,3vw,48px)}
.aisle-hero .it .art{width:calc(var(--aw) * 1.6)}
.aisle-hero .it .pt{bottom:-23px;font-size:.72rem}
.aisle-hero.searching .shelf .it{opacity:.18}
.aisle-hero.searching .shelf .it.hit{opacity:1;transform:translateY(-14px) scale(1.12)}
.aisle-hero .bubble{background:var(--kurkuma);color:var(--ink)}
.aisle-hero .bubble::after{border-top-color:var(--kurkuma)}
.hero.aisle-hero .hl{position:absolute;inset:0;z-index:3;display:grid;grid-template-rows:repeat(3,1fr);margin:0;padding:52px 0 0 var(--gx);pointer-events:none;color:#fff;font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(3rem,8.4vw,9.2rem);line-height:.8;letter-spacing:-.012em;text-shadow:0 6px 34px rgba(0,0,0,.35);transition:opacity .5s}
.hl-l{display:flex;align-items:flex-end;padding-bottom:26px;overflow:hidden;transform:translateX(var(--hx,0px));will-change:transform}
.hl-l>span{display:block;padding-top:.08em;animation:hlUp 1.1s cubic-bezier(.2,.9,.2,1) both}
.hl-l:nth-child(2)>span{animation-delay:.14s}.hl-l:nth-child(3)>span{animation-delay:.28s}
@keyframes hlUp{from{transform:translateY(105%)}}
.hl-k{color:var(--kurkuma)}
.aisle-hero.searching .hl{opacity:.12}
.wall-eyebrow{position:absolute;left:var(--gx);top:18px;z-index:4;font-family:var(--f-mono);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kurkuma)}
.wall-pause{position:absolute;right:var(--gx);top:12px;z-index:5;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.45)}
.wall-pause:hover{border-color:#fff}
.find{position:relative;z-index:6;margin-top:-22px;padding-bottom:.5rem}
.find-card{background:var(--paper);border-radius:22px;padding:clamp(1.1rem,2.6vw,1.8rem);box-shadow:0 34px 70px -34px rgba(27,21,17,.6),0 0 0 1px rgba(27,21,17,.05);max-width:900px}
.find-top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;font-size:1.05rem;font-weight:600}
.find-top .flap{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:850;font-stretch:70%;text-transform:uppercase;margin:0;line-height:1}
.find .search{margin-top:1rem}
@media (max-width:760px){
  .wall{height:auto;padding-top:46px}
  .hero.aisle-hero .hl{position:relative;inset:auto;display:block;padding:0 16px .6rem;font-size:15vw;line-height:.86}
  .hl-l{display:block;padding-bottom:0}
  .aisle-hero .shelf{position:relative;inset:auto;height:250px;padding-top:0}
  .aisle-hero .level:nth-child(3){display:none}
  .aisle-hero .row{left:-30px}
  .aisle-hero .it .art{width:calc(var(--aw) * 1.15)}
  .wall-eyebrow{top:14px;font-size:.72rem;right:120px}
  .wall-pause span{display:none}
  .wall-pause{top:8px;padding:.3rem .6rem}
  .find{margin-top:-14px}
  .wall{padding-bottom:18px}
  .hero.aisle-hero .hl{padding-bottom:1rem}
  .find-top{font-size:.95rem}
}

/* ===================== v9: echtes Sortiment & Abholliste ===================== */
.de-hint{font-size:.9rem;color:var(--leaf);font-weight:600;line-height:1.3}
.orig [lang="ur"]{font-size:1.05em}
.tag-price .sz{display:block;font-weight:750;font-stretch:80%;font-size:1.05rem;line-height:1.2}
.tag-price .bp{margin-top:.25rem}
.more-wrap{display:flex;justify-content:center;margin-top:1.6rem}
.more-wrap:empty{display:none}
.field-l{font-weight:700;font-size:.92rem;margin-bottom:.35rem}
.sizes{display:flex;flex-wrap:wrap;gap:.4rem}
.sizes .chip[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.good{margin:0;padding-left:1.1rem;display:grid;gap:.25rem}
.wa-pre{white-space:pre-wrap;font-family:var(--f-mono);font-size:.82rem;line-height:1.5;background:#ECE5DA;border-radius:10px;padding:.9rem;margin:0;max-height:42vh;overflow:auto;user-select:all}
.sent{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.92rem;background:var(--shelf);border-radius:var(--r);padding:.5rem .7rem}
.d-foot>.btn-go{width:100%}
.tag-band .hook{left:auto;right:12px;transform:translateY(-50%)}
.d-foot .row{position:static;left:auto;bottom:auto;padding-inline:0;transform:none!important;transition:none;will-change:auto}
.d-foot .row.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem}
.d-foot .row.two .btn{width:100%;min-width:0;padding-inline:.6rem}
.ing{grid-template-columns:auto 44px minmax(0,1fr) auto}
.ing .mini{white-space:nowrap}
@media (max-width:760px){.ing .mini{padding-inline:.5rem;font-size:.8rem}}

/* ===================== v10: Einkaufsliste ===================== */
.cl-s{display:none}
@media (max-width:760px){.cl-l{display:none}.cl-s{display:inline}}
.tag-meta .loc{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--f-mono);font-size:.76rem;font-weight:600;color:var(--ink);background:var(--shelf);border-radius:4px;padding:.1rem .4rem}
.tag-meta .loc .ic{width:.9em;height:.9em;color:var(--chili)}
.where{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:center;background:var(--shelf);border-radius:var(--r);padding:.8rem .9rem;border-left:4px solid var(--c,var(--leaf))}
.where-t{display:grid;gap:.15rem;min-width:0}
.where-t .field-l{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.where-t b{font-stretch:85%;font-size:1.1rem;line-height:1.2}
.where-t small{color:var(--muted);font-size:.85rem}
.where-t .onl{display:inline-flex;align-items:center;gap:.3rem;color:var(--leaf);font-weight:700}
.floor{display:grid;grid-template-columns:repeat(5,22px);gap:3px}
.floor i{height:22px;border-radius:3px;background:#fff;border:1px solid var(--line);font:600 .66rem/20px var(--f-mono);font-style:normal;text-align:center;color:var(--line-2)}
.floor i.on{background:var(--c);border-color:var(--ink);color:var(--fg,#fff);box-shadow:0 0 0 2px var(--ink)}
.rack{width:46px;height:74px;border:3px solid var(--zimt);border-top-width:4px;border-radius:2px;display:grid;grid-template-rows:repeat(5,1fr);background:#fff}
.rack i{border-bottom:2px solid var(--zimt);position:relative}
.rack i:last-child{border-bottom:0}
.rack i.on{background:var(--kurkuma)}
.rack i.on::after{content:"";position:absolute;right:-11px;top:50%;border:6px solid transparent;border-right-color:var(--chili);transform:translateY(-50%)}
@media (max-width:520px){.where{grid-template-columns:minmax(0,1fr) auto}.floor{display:none}}
.modal.over{z-index:95;box-shadow:0 0 0 100vmax rgba(27,21,17,.45)}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--shelf);border-radius:var(--r);padding:4px;gap:4px;position:sticky;top:-1.1rem;z-index:2;margin-top:-.3rem}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;border-radius:6px;background:none;min-height:42px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line-2),0 0 0 1.5px var(--ink)}
.ag{display:grid;gap:.8rem}
.ag h3{display:flex;align-items:center;gap:.55rem;font-size:.95rem;font-stretch:85%;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--ink);padding-bottom:.35rem;margin:.2rem 0 0}
.gno{display:inline-grid;place-items:center;min-width:2.1rem;height:1.6rem;border-radius:4px;background:var(--c);color:var(--fg,#fff);font:600 .8rem var(--f-mono);border:1.5px solid var(--ink)}
.line-i .lnk{all:unset;cursor:pointer;font-weight:700;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.line-i .lnk:hover{text-decoration-color:var(--ink)}
.line-i .lnk:focus-visible{outline:3px solid var(--lake);outline-offset:2px;border-radius:2px}
.line-i .lc{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:.78rem;font-weight:600;margin-top:.25rem}
.line-i .lc .ic{width:.95em;height:.95em;color:var(--chili)}
.lc .fh,.fh{font-family:var(--f-body,inherit);font-weight:500;color:var(--muted)}
.prog{display:grid;gap:.45rem;background:var(--leaf);color:#fff;border-radius:var(--r);padding:.8rem .9rem}
.prog b{font-size:1.4rem;font-stretch:80%}
.prog .bar{height:8px;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--kurkuma);border-radius:4px;transition:width .4s var(--ease)}
.prog.all{background:var(--kurkuma);color:var(--ink)}.prog.all .bar i{background:var(--leaf)}
.prog p{margin:0;font-weight:700}
.walk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.walk li{position:relative;height:40px;border-radius:4px;border:1.5px dashed var(--line);display:grid;place-items:center;font:600 .78rem var(--f-mono);color:var(--line-2)}
.walk li.need{border:1.5px solid var(--ink);background:var(--c);color:var(--fg,#fff)}
.walk li.ok{border:1.5px solid var(--leaf);background:#fff;color:var(--leaf)}
.walk li small{position:absolute;top:-7px;right:-5px;min-width:16px;height:16px;border-radius:8px;background:var(--ink);color:#fff;font-size:.62rem;display:grid;place-items:center;padding-inline:3px}
.walk li.ok small{background:var(--leaf)}.walk li small .ic{width:10px;height:10px}
.tick{display:grid;grid-template-columns:28px 54px minmax(0,1fr);gap:.7rem;align-items:center;padding:.55rem .4rem;border-radius:var(--r);border:1.5px solid var(--line);cursor:pointer;transition:background .2s,opacity .2s}
.tick input{position:absolute;opacity:0;width:1px;height:1px}
.tick .box{width:28px;height:28px;border-radius:6px;border:2px solid var(--ink);display:grid;place-items:center;background:#fff}
.tick .box .ic{width:18px;height:18px;opacity:0;color:#fff;transform:scale(.4);transition:all .2s var(--ease)}
.tick input:checked+.box{background:var(--leaf);border-color:var(--leaf)}
.tick input:checked+.box .ic{opacity:1;transform:none}
.tick input:focus-visible+.box{outline:3px solid var(--lake);outline-offset:2px}
.where-s{display:grid;justify-items:center;background:var(--shelf);border-radius:6px;padding:.25rem 0;line-height:1.1}
.where-s b{font:600 1.15rem var(--f-mono)}
.where-s small{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tick .nm{display:grid;gap:.1rem;min-width:0}
.tick .nm b{font-size:.98rem;line-height:1.25}
.tick .nm small{color:var(--muted);font-size:.84rem}
.tick.got{background:var(--shelf);opacity:.62}
.tick.got .nm b{text-decoration:line-through;text-decoration-thickness:2px}
.d-foot .row.two{align-items:stretch}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ===================== v11: Sprachen DE · EN · Hindi · Urdu ===================== */
:root{--f-sans:"Archivo","Noto Sans Devanagari","Noto Nastaliq Urdu",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"IBM Plex Mono","Noto Sans Devanagari","Noto Nastaliq Urdu",ui-monospace,"SF Mono",Menlo,monospace}
.lsw{position:relative;margin-left:.2rem}
.lsw-b{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.4rem .7rem;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--paper);color:var(--ink);font-weight:700;font-size:.92rem}
.lsw-b:hover{border-color:var(--ink)}
.lsw-b .ic{width:18px;height:18px}.lsw-b .chev{width:14px;height:14px;transition:transform .2s}
.lsw-b[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lsw-m{position:absolute;top:calc(100% + 6px);right:0;z-index:70;min-width:190px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:4px;display:grid;gap:2px;box-shadow:0 12px 30px rgba(27,21,17,.18)}
.lsw-m button{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:46px;padding:.35rem .7rem;border:0;border-radius:6px;background:none;color:var(--ink);font-weight:700;font-size:1rem;text-align:start}
.lsw-m button small{font:600 .7rem var(--f-mono);color:var(--muted);text-transform:uppercase}
.lsw-m button:hover{background:var(--shelf)}
.lsw-m button[aria-pressed="true"]{background:var(--leaf);color:#fff}.lsw-m button[aria-pressed="true"] small{color:#fff}
.lsw-m button[lang="ur"] span{font-family:"Noto Nastaliq Urdu",serif;font-size:1.05rem;line-height:1.9}
[dir="rtl"] .lsw-m{right:auto;left:0}
header.bar .lsw+.cart-btn{margin-left:.5rem}
@media (max-width:760px){.lsw{margin-left:auto}.lsw-b{padding:.35rem .5rem;gap:.3rem}.lsw-b .chev{display:none}header.bar .lsw+.cart-btn{margin-left:.4rem}
  .lsw-m{right:-70px}}
/* Hindi: Devanagari braucht mehr Zeilenhöhe, keine Versalien/Schmalschnitte */
html[data-script="hi"] body{line-height:1.6}
html[data-script="hi"] .hero.aisle-hero .hl{font-size:clamp(2.6rem,7vw,7.6rem);line-height:1.08;font-weight:800;letter-spacing:0}
html[data-script="hi"] h1,html[data-script="hi"] h2,html[data-script="hi"] h3{line-height:1.3;letter-spacing:0}
/* Urdu: Nastaliq, von rechts nach links, deutlich mehr Zeilenhöhe */
html[data-script="ur"] body{line-height:2;font-family:var(--f-sans)}
html[data-script="ur"] [lang="ur"]{font-family:"Noto Nastaliq Urdu","Archivo",serif}
html[data-script="ur"] .hero.aisle-hero .hl{font-size:clamp(2.1rem,5.4vw,6rem);line-height:1.6;font-weight:700;letter-spacing:0}
html[data-script="ur"] h1,html[data-script="ur"] h2,html[data-script="ur"] h3{line-height:1.8;letter-spacing:0;font-weight:700}
html[data-script="ur"] .btn,html[data-script="ur"] .chip,html[data-script="ur"] .mini{line-height:1.7;padding-block:.3rem}
html[data-script="ur"] .mono,html[data-script="ur"] .tabnum{font-family:var(--f-mono)}
[dir="rtl"] .shelf,[dir="rtl"] .tag-price .sz,[dir="rtl"] .wa-pre,[dir="rtl"] .walk,[dir="rtl"] .floor,[dir="rtl"] .where-s{direction:ltr}
[dir="rtl"] .wa-pre{text-align:right;direction:rtl;unicode-bidi:plaintext}
@media (min-width:761px){[dir="rtl"] .hero.aisle-hero .hl{text-align:left;padding:52px 0 0 var(--gx)}[dir="rtl"] .hero.aisle-hero .hl-l{justify-content:flex-end}}
[dir="rtl"] .spec th{text-align:right;padding:.4rem 0 .4rem .6rem}
.lxen{font-size:.75em;font-weight:500;color:var(--muted);text-transform:none}

/* ===================== v12: Tiefkühl ===================== */
.tkb{display:inline-flex;align-items:center;gap:.25rem;font:600 .74rem var(--f-mono);text-transform:uppercase;letter-spacing:.03em;color:#05405F;background:var(--lagoon-soft);border:1px solid var(--lagoon);border-radius:4px;padding:.08rem .4rem}
.tkb .ic{width:.95em;height:.95em}
.ag h3 .tkn{display:inline-flex;align-items:center;gap:.25rem;margin-inline-start:auto;font:600 .72rem var(--f-mono);text-transform:none;letter-spacing:0;color:#05405F;background:var(--lagoon-soft);border-radius:4px;padding:.1rem .4rem}
.ag h3 .tkn .ic{width:.9em;height:.9em}

/* ======================================================================
   GESTALTUNG: Fassung A „Laden“ (vom Kunden gewählt, 07.10.2026)
   Der Entwurf hatte drei Fassungen (A „Laden“, B „Route“, C „Plakat“); B, C und der
   Entwurf-Schalter sind entfernt. <html class="laden"> schaltet die A-Zusätze ein
   (Klasse statt des Attributs aus dem Entwurf, gleiche Spezifität). Die Regeln ohne Präfix sind
   die Grundstile, sie stammen ebenfalls aus A.
   ====================================================================== */

/* Chanel-Regel: Blätter-Bordüre (Endlosanimation ohne Aufgabe), Hero-Eyebrow
   (Versal-Etikett, inhaltlich überholt) und das Einschwingen jedes Gangschilds entfallen. */
.band{display:none}
.wall-eyebrow{display:none}
.aisle.in{animation:none}

/* Lagerplatz-Code: Kästchen wie auf einem Lagerplatzschild statt „Gang 9 · Regal C · Fach 2“ */
.bin{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;font-size:.8rem;line-height:1;background:var(--paper)}
.bin>span{display:grid;justify-items:center;gap:2px;padding:.22rem .45rem .26rem;border-left:1px solid var(--line-2);min-width:2.2rem}
.bin>span:first-child{border-left:0}
.bin i{font-style:normal;font-size:.62rem;color:var(--muted);letter-spacing:.02em}
.bin b{font-weight:750;font-size:.9rem}
.og{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .7rem}
.og .lt{color:var(--muted)}
.tag-band .gc,.m-head .gc{font-weight:700;margin-right:.55em}

/* ======================================================================
   A · LADEN – Die Seite ist der Laden: Gänge, Regale, Etiketten.
   Farbe: Logo-Farben auf Etikettenweiß (Kontraste: Text 18,1:1, Muted 7,1:1, Weiß/Grün 8,4:1, Tinte/Gelb 10,5:1).
   Typo: Archivo schmal = Packungsdruck; IBM Plex Mono nur für gedruckte Codes (Thermodruck am Regal).
   Skala 1,25 auf 17 px: 13,6 · 17 · 21,3 · 26,6 · 33,2 · 41,5 · Display.
   Radien: Etikett 6, Bedienelement 8, Bühne 12. Bewegung: E1 Live-Regal, E5 Klappanzeige, sonst nur Antworten.
   ====================================================================== */
html.laden{--s-1:.85rem;--s0:1.0625rem;--s1:1.328rem;--s2:1.66rem;--s3:2.075rem;--s4:2.6rem}
html.laden .sec-lead{font-size:var(--s1);line-height:1.45;max-width:46ch}
html.laden .tag-name{font-size:var(--s0)}
html.laden .tag-meta,html.laden .de-hint{font-size:var(--s-1)}
html.laden .dish-info h3{font-size:clamp(var(--s3),4vw,var(--s4))}
html.laden .usp b{font-size:var(--s0)}html.laden .usp small{font-size:var(--s-1)}
html.laden .bin{font-family:var(--f-mono)}
html.laden .bin i{font-family:var(--f-sans)}
/* Etikett am Haken: einziges Hover-Verhalten der Karte, kleiner Ausschlag */
@keyframes hangA{0%{transform:rotate(0)}30%{transform:rotate(1.4deg)}62%{transform:rotate(-.8deg)}100%{transform:rotate(0)}}
html.laden .tag:hover{animation:hangA .9s var(--ease)}
html.laden :focus-visible{outline-color:var(--lake)}

/* Handy: Gang-Filter als eine wischbare Zeile statt elf gestapelter Zeilen vor dem ersten Produkt */
@media (max-width:760px){#chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gx)*-1);padding:2px var(--gx) 8px;scrollbar-width:none;scroll-snap-type:x proximity}#chips::-webkit-scrollbar{display:none}#chips .chip{flex:none;scroll-snap-align:start}}
.today-b{display:inline-block;margin-inline-start:.5rem;font-size:.75rem;font-weight:700;background:var(--leaf);color:#fff;border-radius:3px;padding:.05rem .4rem;vertical-align:.1em}

/* ======================================================================
   Runde 2 – Befunde der unabhängigen Bewertung
   ====================================================================== */
/* Gemeinsam */
.map .cap .row{position:static;left:auto;bottom:auto;padding-inline:0;transform:none!important;transition:none;will-change:auto}
#faq{padding-top:clamp(3rem,6vw,5rem)!important}
.tag-band .gc,.m-head .gc{margin-right:0;margin-inline-end:.55em}
.ing input{width:28px;height:28px}
html{--focus:var(--lake)}

:focus-visible{outline-color:var(--focus)}
.search form:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:6px;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
@media (max-width:760px){header.bar .logo img{height:auto;width:min(47vw,196px)}header.bar .wrap{gap:.5rem}.cart-btn{padding-inline:.75rem}.cart-btn .cl-s{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* A – Headline passt links neben die Regalware; kein Einzelhervorhebung; Wegweiser statt Kachelraster */
@media (min-width:761px){html.laden .hero.aisle-hero .hl{font-size:clamp(3rem,6.4vw,7.2rem)}}
html.laden .hl-k{color:inherit}
html.laden #uspBand{display:none}
html.laden .aisles{background:var(--leaf);border-radius:12px;padding:clamp(.8rem,2vw,1.4rem);grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1rem,3vw,2.5rem);box-shadow:0 6px 0 #073D14}
html.laden .aisle-btn{background:transparent;color:#fff;box-shadow:none;border-radius:0;min-height:64px;border-bottom:1px solid rgba(255,255,255,.18);grid-template-columns:3.4rem minmax(0,1fr) auto;align-items:center}
html.laden .aisle-btn:hover{transform:none;background:rgba(255,255,255,.07)}
html.laden .aisle-btn .g{background:var(--c);color:var(--fg,#fff);border-radius:4px;height:2rem;min-width:2.8rem;padding:0 .4rem;font-family:var(--f-mono)}
html.laden .aisle-btn .t{padding:.5rem .8rem}
html.laden .aisle-btn b{font-size:1.15rem}
html.laden .aisle-btn small{opacity:.78}
html.laden .aisle-btn::after{content:"";width:12px;height:12px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);margin-right:.6rem;opacity:.7}
html.laden [dir="rtl"] .aisle-btn::after{transform:rotate(-135deg)}
@media (max-width:760px){html.laden .aisles{grid-template-columns:minmax(0,1fr)}}
/* A Signature: das Wort der Klappanzeige steht im Regal – das Produkt hebt sich kurz */
.it.pick>div{animation:demoPop 1.6s cubic-bezier(.3,1.4,.5,1)}
.it.pick::after{content:"";position:absolute;left:50%;bottom:-6px;width:70%;height:10px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(242,191,10,.9),transparent);animation:demoGlow 1.6s ease-out}
@keyframes demoPop{0%{transform:none}25%{transform:translateY(-18px) scale(1.08)}60%{transform:translateY(-4px)}100%{transform:none}}
@keyframes demoGlow{0%,100%{opacity:0}30%{opacity:1}}
.it{position:relative}

/* Gericht-Karte: Bezugsrahmen für den Hinweis „Auf der Liste“ */
.dish{position:relative}

html.laden .aisle-btn .g{box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}

/* ======================================================================
   Runde 3 – Befunde der zweiten unabhängigen Bewertung
   ====================================================================== */
/* Gemeinsam: Routen-Icon in der Kartenbeschriftung, Platzhalter-Etikett, Fokus auf jedem Grund sichtbar */
.map .cap svg.ic{position:static;width:1em;height:1em;inset:auto}
.info span.ph{color:var(--ink)}
:focus-visible{outline:3px solid #1B1511!important;outline-offset:2px;box-shadow:0 0 0 6px #FFFFFF!important}
.search form:focus-within{outline:3px solid #1B1511;outline-offset:3px;box-shadow:0 0 0 6px #FFFFFF}
.ing input{width:32px;height:32px}
/* Produkt-Dialog ohne Gewürzwissen: einspaltig statt halb leer */
.modal.one{width:min(560px,calc(100% - 24px))}
.modal.one .m-body{grid-template-columns:minmax(0,1fr)}
.modal.one .m-label{border-right:0}
.modal.one .m-lex{display:none}
/* Handy: zwei kompakte Etiketten nebeneinander statt einer langen Spalte */
@media (max-width:760px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.6rem!important}
  .tag-band{font-size:.66rem!important;padding:.28rem .5rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tag-band>span{overflow:hidden;text-overflow:ellipsis}
  .tag-band .hook{display:none}
  .tag-vis{height:92px!important;padding-bottom:6px!important;padding-top:0!important}
  .tag-vis .art{width:calc(var(--aw,64px)*.82)}
  .tag-body{padding:.5rem .55rem .1rem!important;gap:.2rem}
  .tag-name{font-size:.92rem!important;line-height:1.2}
  .tag-body .orig{display:none}
  .de-hint{font-size:.78rem!important}
  .tag-meta{gap:.3rem!important}
  .bin>span{min-width:1.55rem;padding:.14rem .28rem}
  .bin i{font-size:.52rem}.bin b{font-size:.78rem}
  .heat .ic{width:.8em;height:.8em}
  .tag-price{padding:.45rem .55rem .55rem!important;gap:.3rem}
  .tag-price .sz{font-size:.9rem!important}
  .tag-price .bp{font-size:.66rem!important}
  .add{width:40px!important;height:40px!important}
}

/* A – Regal antwortet sichtbar, Suchkarte über die volle Breite */
.it.pick>div{animation:demoPop2 1.8s cubic-bezier(.3,1.4,.5,1)}
@keyframes demoPop2{0%{transform:none}22%{transform:translateY(-26px) scale(1.16)}70%{transform:translateY(-18px) scale(1.12)}100%{transform:none}}
html.laden .find-card{max-width:none}

/* ======================================================================
   Runde 3 umgesetzt (Befunde der dritten Bewertung)
   ====================================================================== */
/* Alle: Zahlen bleiben auch im Urdu links-nach-rechts; Klappanzeige springt nicht; FAQ zweispaltig; Karte unbeschnitten */
.hours td:last-child,.val,.tag-price .sz,.tabnum{unicode-bidi:plaintext}
[dir="rtl"] .hours td:last-child{direction:ltr;text-align:left}
.flap{min-width:6.6em}
.flap-card{display:block;width:100%;overflow:hidden;white-space:nowrap;text-align:center;line-height:1.15}
#faq .faq{max-width:none}
.map{align-self:start;aspect-ratio:600/360;min-height:0!important}
@media (max-width:760px){.map{aspect-ratio:600/420}}
html.laden .hero.aisle-hero .hl{letter-spacing:.005em}
html.laden .tag-price .bp{font-family:var(--f-sans);font-size:.78rem}
html.laden #gerichte{background:var(--kurkuma-soft)}
/* ======================================================================
   Qualitätsboden Handy (mobile-usability): Tippflächen ≥ 44 px, Meta-Schrift ≥ 12 px
   ====================================================================== */
@media (max-width:768px){
  .add{width:44px!important;height:44px!important}
  .chip,.mini,.try button,.qty button,.wall-pause{min-height:44px}
  .qty button{min-width:44px}
  .wall-pause{min-width:44px}
  .info a{min-height:44px}
  .logo{min-height:44px;display:inline-flex;align-items:center}
  .flap{min-height:44px;display:inline-flex;align-items:center}
  .tag-band{font-size:.75rem!important}
  .tag-price .bp{font-size:.75rem!important}
  .de-hint{font-size:.8125rem!important}
  .bin i{font-size:.66rem}.bin b{font-size:.82rem}
  .ph,.cc{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ======================================================================
   Echtbetrieb (07.10.2026) – Ergänzungen gegenüber dem Entwurf
   ====================================================================== */
/* Wunschprodukt: Honigtopf-Feld für Bots, für Menschen und Screenreader unsichtbar */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Datenschutzhinweis am Formular */
.w-dsg{font-size:.88rem;color:var(--muted);margin:0}
.w-dsg a{color:var(--lake);font-weight:600}
/* Fehlermeldung nach dem Senden: gleiche Form wie die Erfolgsmeldung, in Chili */
.err-box{border-color:var(--chili);background:#FDEDEC}
.err-box b{color:#8E0E0A}
.btn[disabled]{opacity:.6;cursor:progress}
/* Rechtsseiten (impressum.html, datenschutz.html, 404.html): ruhige Textseite im Etikett-Stil */
.recht-kopf{background:var(--paper);border-bottom:1px solid var(--line)}
.recht-kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px;flex-wrap:wrap;padding-block:.6rem}
.recht-kopf .logo img{width:min(52vw,240px);height:auto;display:block}
.recht{padding-block:clamp(2rem,6vw,4rem) clamp(3rem,8vw,5rem)}
.recht .wrap>*{max-width:44rem}
.recht h1{font-stretch:75%;font-weight:850;text-transform:uppercase;font-size:clamp(2rem,6vw,3rem);line-height:1;margin:0 0 1rem}
.recht h2{font-size:1.2rem;margin:2rem 0 .5rem}
.recht p,.recht li{line-height:1.6}
.recht p{margin:0 0 .8rem}
.recht ul{padding-inline-start:1.2rem}
.recht code{font-family:var(--f-mono);font-size:.9em;background:var(--shelf);padding:.05rem .3rem;border-radius:3px}
.recht-hinweis{font-size:1.1rem;color:var(--muted)}
footer nav a[aria-current="page"]{text-decoration:none;font-weight:700}

/* ======================================================================
   SEO und Funnel (07.10.2026)
   ====================================================================== */
/* Funnel „So kaufst du bei uns ein“: drei Etiketten, die Nummern hängen an einer
   gestrichelten Schnur (Anlehnung an die Strecke #inzahlung der Servicomm-Demos).
   Fläche: Regalboden, Etiketten weiß – Tinte 18,1 : 1, Muted auf Weiß 7,1 : 1. */
.funnel{background:var(--shelf)}
.fn-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.6rem);position:relative}
.fn-schritte::before{content:"";position:absolute;left:8%;right:8%;top:1.4rem;border-top:3px dashed var(--line-2);z-index:0}
.fn-schritte li{position:relative;z-index:1;display:grid;gap:.9rem;justify-items:start}
.fn-nr{width:2.8rem;height:2.8rem;border-radius:var(--r);background:var(--kurkuma);color:var(--ink);display:grid;place-items:center;font:600 1.25rem var(--f-mono);box-shadow:0 0 0 6px var(--shelf)}
.fn-schritte li>div{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--leaf);border-radius:var(--r);padding:1rem 1.1rem 1.15rem;width:100%;height:100%}
.fn-schritte h3{font-stretch:75%;font-weight:850;text-transform:uppercase;font-size:1.35rem;line-height:1.05;margin:0 0 .4rem}
.fn-schritte p{margin:0;color:var(--muted)}
.fn-aktion{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
@media (max-width:760px){
  .fn-schritte{grid-template-columns:minmax(0,1fr)}
  /* logische Kante: in Urdu (rtl) stehen die Nummern rechts, die Schnur muss mit */
  .fn-schritte::before{left:auto;right:auto;inset-inline-start:calc(1.4rem - 1.5px);top:1.4rem;bottom:1.4rem;border-top:0;border-inline-start:3px dashed var(--line-2)}
  .fn-schritte li{grid-template-columns:2.8rem minmax(0,1fr);align-items:start}
  .fn-aktion .btn{flex:1 1 100%}
}
[dir="rtl"] .fn-schritte p,[dir="rtl"] .fn-schritte h3{text-align:right}

/* Abschluss-Block „Komm vorbei“: dunkles Band vor dem Fuß, Status aus den Öffnungszeiten.
   Weiß auf Tinte 18,1 : 1; Kurkuma-Punkt nur als Zeichen, kein Text. */
.besuch{background:var(--ink);color:#fff;padding-block:clamp(2.2rem,5vw,3.2rem)}
.besuch-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem 2rem;align-items:center}
.besuch h2{font-stretch:72%;font-weight:850;text-transform:uppercase;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;margin:0 0 .7rem}
.besuch p{margin:.25rem 0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.besuch-aktion{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.besuch .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.besuch .btn-line:hover{border-color:#fff}
.besuch .btn-go{background:var(--kurkuma);color:var(--ink)}
.besuch :focus-visible{outline-color:var(--kurkuma)}
@media (max-width:760px){.besuch-in{grid-template-columns:minmax(0,1fr)}.besuch-aktion{justify-content:flex-start}.besuch-aktion .btn{flex:1 1 100%}}

/* Vorgerenderte Gerichte (für Suchmaschinen und ohne JavaScript; das Skript ersetzt sie) */
.dish-statisch{padding:1.2rem 1.4rem;display:grid;gap:.5rem}
.dish-statisch ul{margin:0;padding-inline-start:1.2rem;display:grid;gap:.35rem}
.dish-statisch a{color:var(--ink);font-weight:700}

/* Fuß (08.10.): oben die Wegweiser (Gänge in zwei Spalten, Gerichte), unten eine ruhige Zeile
   mit Marke + Adresse links und Rechtlichem + © rechts */
footer{padding-block:clamp(2.5rem,5vw,3.75rem) 1.75rem}
.fuss-links{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:2rem clamp(2rem,5vw,4.5rem)}
.fuss-links h2{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin:0 0 .6rem;padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.22)}
.fuss-links ul{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(1.5rem,4vw,3rem)}
.fuss-links div:first-child ul{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column}
.fuss-links li{min-width:0}
.fuss-links a{color:#fff;font-size:.95rem;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;text-underline-offset:4px}
.fuss-links a:hover{text-decoration:underline}
footer .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem 2.5rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.22)}
.fuss-marke{display:flex;align-items:center;gap:1.25rem;min-width:0}
footer .foot .flogo{width:128px;flex:none;padding:6px;border-radius:8px}
.fuss-marke p{font-size:.9rem;line-height:1.55;opacity:1}
.fuss-recht{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}
footer .fuss-recht nav{gap:0 1.5rem;justify-content:flex-end}
.fuss-recht nav a{font-size:.92rem;text-underline-offset:4px}
.fuss-copy{font-size:.82rem;opacity:.9;margin:0}
.foot p a{color:#fff}
@media (max-width:760px){
  .fuss-links{grid-template-columns:minmax(0,1fr)}
  .fuss-links>div:nth-child(2) ul{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column}
  .fuss-links a{font-size:.92rem}
  footer .foot{flex-direction:column;align-items:flex-start}
  .fuss-marke{gap:1rem;align-items:flex-start}
  footer .foot .flogo{width:96px}
  .fuss-recht{align-items:flex-start}
  footer .fuss-recht nav{justify-content:flex-start}
}

/* Landeseiten (sortiment/…, gerichte/…) */
.lande-kopf{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.lande-kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;min-height:72px;flex-wrap:wrap;padding-block:.5rem}
.lande-kopf .logo img{width:min(52vw,230px);height:auto;display:block}
.lande-kopf nav{display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.lande-kopf nav a{color:var(--ink);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.lande-kopf nav a:hover{text-decoration:underline}
.krume{font-size:.9rem;color:var(--muted);margin:0 0 1rem}
.krume ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.krume li+li::before{content:"›";margin-inline-end:.3rem}
.krume a{color:var(--lake)}
.lande .aisle h1{margin:0;line-height:1.05}
.lande .sec-lead{max-width:46rem}
.lande-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 2rem}
.produktliste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:.7rem}
.produktliste li{background:var(--paper);border:1px solid var(--line);border-inline-start:5px solid var(--c,var(--leaf));border-radius:var(--r);padding:.75rem .9rem;display:grid;gap:.2rem}
.produktliste a{color:var(--ink);font-weight:750;text-decoration:none}
.produktliste a:hover{text-decoration:underline}
.produktliste small{color:var(--muted);font-size:.88rem}
.produktliste .og{font-size:.95rem}
.lande-info{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.lande-info span{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:.2rem .55rem;font-size:.9rem}
.lande h2{font-size:1.3rem;margin:2rem 0 .8rem}
/* Aufnahme fürs Teilen-Bild (#teilen, werkzeuge/bilder_bauen.py) */
.teilen .ph,.teilen .wall-pause{display:none!important}
/* Landeseiten am Handy: Kopf scrollt mit (zweizeilig ~150 px wären klebend zu viel), Verweise kompakter */
@media (max-width:760px){.lande-kopf{position:static}.lande-kopf nav{gap:0 .9rem}.lande-kopf nav a{font-size:.95rem}}

/* ======================================================================
   Bilder (Bildstrecke, BILDPROMPTS.md) – je Platz ein Block, von oben nach unten
   ====================================================================== */
/* 1 · hero-wand: Foto der grünen Bretterwand statt der gezeichneten. Original nur 1376 px breit
   (Balken oben, Boden unten abgeschnitten) → größte Datei 1205 px. Der Schleier von links dunkelt
   den Lichtfleck unter der weißen Überschrift ab (gemessen, siehe NOTIZEN.md). Grünton als
   Rückfall, falls das Bild nicht lädt. */
.wall{background:
  linear-gradient(90deg,rgba(3,28,11,.5) 0%,rgba(3,28,11,.3) 38%,rgba(3,28,11,0) 64%),
  image-set(url(../img/bilder/hero-wand-1205.webp) type("image/webp"),url(../img/bilder/hero-wand-1205.jpg) type("image/jpeg")) center/cover no-repeat,
  #0B5A1E}
@media (max-width:760px){.wall{background:
  linear-gradient(180deg,rgba(3,28,11,.1) 0%,rgba(3,28,11,.45) 100%),
  image-set(url(../img/bilder/hero-wand-960.webp) type("image/webp"),url(../img/bilder/hero-wand-960.jpg) type("image/jpeg")) center/cover no-repeat,
  #0B5A1E}}
/* 2 · funnel-grund: helle Theke mit Gewürzen am Rand hinter „So kaufst du bei uns ein“ (Original 1376 px).
   Die Gewürze liegen in den äußeren 10,2 % des Bildes (gemessen). Erst ab 1520 px ist neben dem
   Inhalt so viel Rand – darunter lagen sie unter Gangschild, Einleitung und Nummer 1. Deshalb
   761–1519 px: Ränder mit der Holzfarbe der Bildmitte (#eee9e2, gemessen) weich abdecken;
   Handy: cover zeigt bei der hohen Fläche ohnehin nur die leere Mitte.
   --fn-grund = Holzfarbe: Ring um die Nummern, damit die gestrichelte Schnur sauber endet. */
.funnel{--fn-grund:#eee9e2;background:
  image-set(url(../img/bilder/funnel-grund-1365.webp) type("image/webp"),url(../img/bilder/funnel-grund-1365.jpg) type("image/jpeg")) center/cover no-repeat,
  #eee9e2}
@media (min-width:761px) and (max-width:1519px){.funnel{background:
  linear-gradient(90deg,#eee9e2 0,#eee9e2 11%,rgba(238,233,226,0) 15%,rgba(238,233,226,0) 85%,#eee9e2 89%,#eee9e2 100%),
  image-set(url(../img/bilder/funnel-grund-1365.webp) type("image/webp"),url(../img/bilder/funnel-grund-1365.jpg) type("image/jpeg")) center/cover no-repeat,
  #eee9e2}}
@media (max-width:760px){.funnel{background:
  image-set(url(../img/bilder/funnel-grund-960.webp) type("image/webp"),url(../img/bilder/funnel-grund-960.jpg) type("image/jpeg")) center/cover no-repeat,
  #eee9e2}}
.funnel .fn-nr{box-shadow:0 0 0 6px var(--fn-grund)}

/* Suchkarte im Hero (07.10.2026, Wunsch Auftraggeber): bewusste Überlappung statt Anschnitt.
   Vorher rückte die Karte 22 px in die Wand und lag auf dem untersten Regalbrett samt Schatten,
   „AM BODENSEE.“ klebte an ihrer Oberkante. Jetzt: unter dem letzten Brett eine ruhige Bodenzone
   (--hero-boden), Regale und Überschrift enden darüber, die Karte greift nur in diese Zone –
   dazwischen bleibt Luft (--hero-luft). Gesamthöhe der Wand unverändert, damit die Suche im
   ersten Bildschirm sichtbar bleibt. */
.aisle-hero{--hero-boden:76px;--hero-luft:26px}
@media (min-width:761px){
  /* 40 px niedriger als im Entwurf: das Suchfeld (Hauptaktion) liegt ganz im ersten Bildschirm,
     gemessen bei 1280 × 800 und 1280 × 860 */
  .wall{height:clamp(540px,calc(100svh - 240px),780px)}
  .aisle-hero .shelf,.hero.aisle-hero .hl{bottom:var(--hero-boden)}
  .find{margin-top:calc(var(--hero-luft) - var(--hero-boden))}
}
@media (max-width:760px){
  .aisle-hero{--hero-boden:48px;--hero-luft:18px}
  /* Regal 210 statt 250 px: bei 390 × 844 liegt das Suchfeld sonst 13 px unter dem ersten Bildschirm */
  .aisle-hero .shelf{height:210px}
  .wall{padding-bottom:var(--hero-boden)}
  .find{margin-top:calc(var(--hero-luft) - var(--hero-boden))}
}
/* 3–8 · gericht-…: Foto oben in der Gericht-Karte (randlos, 4:3), ersetzt den gezeichneten Topf.
   Ohne Foto (laden.js: gerichtfotos) bleibt der Topf. Der Abstand nach oben/zur Seite hebt das
   Polster von .dish-info auf, damit das Foto bis an die Kartenkante reicht. */
.dish-info{--dish-pad:clamp(1.2rem,3vw,2rem)}
.dish-foto{margin:calc(var(--dish-pad) * -1) calc(var(--dish-pad) * -1) .2rem;aspect-ratio:4/3;overflow:hidden;background:#eee9e2}
.dish-foto img{display:block;width:100%;height:100%;object-fit:cover}
.dish-info.mit-foto h3,.dish-info.mit-foto .orig{padding-right:0}
.lande-foto{margin:0 0 1.2rem;max-width:640px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#eee9e2}
.lande-foto img{display:block;width:100%;height:100%;object-fit:cover}
/* 9 · wunsch-grund: Gewürzlager im Streiflicht hinter „Wunschprodukt“ (Original 1376 px, dunkel).
   Grüner Schleier in der Markenfarbe: links dicht (weißer Text), rechts durchlässiger (Säcke neben
   und unter der Formularkarte). Bild nach rechts verschoben, weil der hohe Abschnitt seitlich
   beschneidet. Am Handy steht der Text oben, der Schleier läuft von oben nach unten. */
#wunsch.sec-green{background:
  linear-gradient(90deg,rgba(11,90,30,.9) 0%,rgba(11,90,30,.82) 42%,rgba(11,90,30,.5) 100%),
  image-set(url(../img/bilder/wunsch-grund-1365.webp) type("image/webp"),url(../img/bilder/wunsch-grund-1365.jpg) type("image/jpeg")) 70% center/cover no-repeat,
  var(--leaf)}
@media (max-width:760px){#wunsch.sec-green{background:
  linear-gradient(180deg,rgba(11,90,30,.9) 0%,rgba(11,90,30,.8) 55%,rgba(11,90,30,.6) 100%),
  image-set(url(../img/bilder/wunsch-grund-960.webp) type("image/webp"),url(../img/bilder/wunsch-grund-960.jpg) type("image/jpeg")) 70% center/cover no-repeat,
  var(--leaf)}}
/* 11 · besuch-grund: Bodensee zur blauen Stunde hinter „Komm vorbei“ (Original 1376 px).
   Am Rechner ist das Band etwa 6 : 1 – sichtbar bleibt der Streifen um den Horizont (49 % der
   Bildhöhe): Uferlichter und Wasser. Dunkler Schleier in Tinte, links dichter (weiße Schrift),
   rechts kaum lichter – die Uferlichter lagen bei .5 unter den Rahmenknöpfen (4,22 : 1). Gilt auch für die Landeseiten, die dasselbe Band tragen. */
.besuch{background:
  linear-gradient(90deg,rgba(27,21,17,.78) 0%,rgba(27,21,17,.64) 45%,rgba(27,21,17,.62) 100%),
  image-set(url(../img/bilder/besuch-grund-1365.webp) type("image/webp"),url(../img/bilder/besuch-grund-1365.jpg) type("image/jpeg")) center 49%/cover no-repeat,
  var(--ink)}
@media (max-width:760px){.besuch{background:
  linear-gradient(180deg,rgba(27,21,17,.72) 0%,rgba(27,21,17,.6) 100%),
  image-set(url(../img/bilder/besuch-grund-960.webp) type("image/webp"),url(../img/bilder/besuch-grund-960.jpg) type("image/jpeg")) center 45%/cover no-repeat,
  var(--ink)}}

/* Regalbretter im Hero: räumlich statt flacher Balken (08.10.2026, „das Regal ist noch zu künstlich“).
   Aufbau je Brett (::after, 32 px): Oberseite 8 px (Licht von oben links wie auf dem Wandfoto),
   Lichtkante, Vorderkante 24 px. Darunter (::before) ein weicher Schlagschatten auf der Wand.
   Die Packungen stehen 5 px tief auf der Oberseite. --brett-foto nimmt später die Holzstruktur auf
   (Bildstrecke Platz „regal-brett“); ohne Foto bleibt der gezeichnete Holzton. */
.aisle-hero{--brett-h:32px;--brett-oben:8px;--brett-foto:none}
.aisle-hero .level{padding-bottom:var(--brett-h)}
.aisle-hero .level::after{height:var(--brett-h);border-radius:2px;
  background:
    linear-gradient(90deg,rgba(255,236,200,.10),rgba(0,0,0,0) 35%,rgba(0,0,0,.18) 100%),
    linear-gradient(180deg,
      #B98257 0,#A06A42 calc(var(--brett-oben) - 1px),          /* Oberseite im Licht */
      #D9A877 var(--brett-oben),#8A5430 calc(var(--brett-oben) + 2px), /* Lichtkante */
      #6E3E20 calc(var(--brett-oben) + 6px),#4A2511 100%),     /* Vorderkante */
    var(--brett-foto);
  background-blend-mode:normal,normal,multiply;
  box-shadow:0 1px 0 rgba(0,0,0,.35)}
.aisle-hero .level::before{content:"";position:absolute;left:0;right:0;bottom:calc(var(--brett-h) * -1 - 2px);height:46px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,18,8,.55) 0,rgba(4,18,8,.22) 40%,rgba(4,18,8,0) 100%)}
.aisle-hero .row{bottom:calc(var(--brett-h) - 5px)}
.aisle-hero .it::before{content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:7px;border-radius:50%;background:rgba(20,8,2,.38);filter:blur(2px);z-index:-1}
@media (min-width:761px){.hl-l{padding-bottom:var(--brett-h)}}

/* Hero-Text (08.10.2026, Wunsch Auftraggeber): kleinere Überschrift + kurze Einleitung, was der
   Laden ist und was man hier tun kann. Am Rechner ein ruhiger Block links; die Regalbretter beginnen
   erst rechts davon (42 %), damit keine helle Brettkante unter der weißen Schrift liegt.
   Bisher stand die Überschrift riesig in drei Zeilen auf den drei Brettern. */
.hero-lead{color:#fff;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.5;font-weight:500;max-width:34rem;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media (min-width:761px){
  .aisle-hero .level::after,.aisle-hero .level::before{left:42%}
  .hero-text{position:absolute;z-index:3;left:var(--gx);top:52px;bottom:var(--hero-boden);width:min(38%,30rem);
    display:flex;flex-direction:column;justify-content:center;gap:clamp(.9rem,1.6vw,1.4rem)}
  /* html.laden davor: schlägt die Entwurfsregel html.laden .hero.aisle-hero .hl (82 px) */
  html.laden .hero.aisle-hero .hero-text .hl,html.laden [dir="rtl"] .hero.aisle-hero .hero-text .hl{position:static;inset:auto;display:block;padding:0;margin:0;
    font-size:clamp(2.2rem,3.9vw,4.2rem);line-height:.9}
  .hero-text .hl-l,[dir="rtl"] .hero-text .hl-l{display:block;padding-bottom:0}
  html.laden[data-script="hi"] .hero.aisle-hero .hero-text .hl{font-size:clamp(2rem,3.6vw,3.8rem);line-height:1.15}
  html.laden[data-script="ur"] .hero.aisle-hero .hero-text .hl{font-size:clamp(1.7rem,3vw,3.2rem);line-height:1.75}
  html[data-script="ur"] .hero-lead{line-height:2}
}
@media (max-width:760px){
  .hero-text{padding:0 16px .4rem}
  html.laden .hero.aisle-hero .hero-text .hl{padding:0 0 .4rem;font-size:10.2vw}
  /* mit Einleitung am Handy: EINE Regalreihe in voller Größe statt zwei gequetschter (in 180 px
     wurden die oberen Packungen angeschnitten) – ruhiger, und das Suchfeld bleibt im ersten Bildschirm */
  .aisle-hero .level:nth-child(2){display:none}
  .aisle-hero .shelf{height:150px}
  html.laden[data-script="hi"] .hero.aisle-hero .hero-text .hl{font-size:9.5vw}
  html.laden[data-script="ur"] .hero.aisle-hero .hero-text .hl{font-size:8vw;line-height:1.7}
  .hero-lead{font-size:.98rem}
}
/* Pause-Knopf am Rechner oben links: rechts oben zeigt das Regal seine Sprechblase (Klappanzeige trifft Regal) */
@media (min-width:761px){.wall-pause{right:auto;left:var(--gx)}}
/* Regal und Text überlappen nicht mehr – beim Suchen bleibt der Text stehen */
.aisle-hero.searching .hero-text .hl{opacity:1}
/* Überschrift steht still (kein --hx mehr aus app.js); die Regel bleibt als Sicherung */
.hero-text .hl-l{transform:none}
/* 1b · regal-brett: Eichenbrett als Foto (Streifen 12 : 1 aus dem gelieferten Bild, Oberseite
   ~55 %, Vorderkante ~45 %), gestreckt über die Brettbreite (Maserung läuft längs, das Strecken
   fällt nicht auf). Ersetzt die gezeichneten Verläufe; leichter Abfall nach rechts wie das Licht auf
   dem Wandfoto. Die Packungen stehen 10 px tief auf der Oberseite (das Foto zeigt mehr Oberseite). */
.aisle-hero{--brett-h:34px}
.aisle-hero .level::after{background:
  linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(10,4,0,.22) 100%),
  image-set(url(../img/bilder/regal-brett-1408.webp) type("image/webp"),url(../img/bilder/regal-brett-1408.jpg) type("image/jpeg")) 0 0/100% 100% no-repeat,
  #7A4524;
  box-shadow:0 1px 0 rgba(0,0,0,.4);border-radius:1px}
.aisle-hero .row{bottom:calc(var(--brett-h) - 10px)}
@media (max-width:760px){.aisle-hero .level::after{background:
  image-set(url(../img/bilder/regal-brett-1280.webp) type("image/webp"),url(../img/bilder/regal-brett-1280.jpg) type("image/jpeg")) 0 0/100% 100% no-repeat,
  #7A4524}}
/* 1 · hero-wand Version 2 (08.10.2026, Wunsch Auftraggeber): links Gewürz-Auslage wie auf dem Markt,
   rechts die leere grüne Bretterwand für die gezeichneten Regale. Zuschnitt 1264 × 562 (Boden weg,
   Übergang Gewürze → Wand bei ~45 %). Dichter grüner Schleier unter dem Text links (Kurkuma und
   Chili sind hell), läuft am Übergang aus. Bretter ab 45 %, Packungen ab 47 % – sie stehen auf der
   Wand, nicht vor den Gewürzen. Version 1 bleibt in assets/img/bilder/ und bilder-original/. */
.wall{background:
  linear-gradient(90deg,rgba(6,22,10,.56) 0%,rgba(6,22,10,.5) 34%,rgba(6,22,10,.22) 44%,rgba(6,22,10,0) 54%),
  image-set(url(../img/bilder/hero-wand-v2-1264.webp) type("image/webp"),url(../img/bilder/hero-wand-v2-1264.jpg) type("image/jpeg")) center/cover no-repeat,
  #0B5A1E}
@media (min-width:761px){
  .aisle-hero .level::after,.aisle-hero .level::before{left:45%}
  .aisle-hero .row{left:47%}
}
@media (max-width:760px){.wall{background:
  linear-gradient(180deg,rgba(3,28,11,.35) 0%,rgba(3,28,11,.62) 40%,rgba(3,28,11,.68) 100%),
  image-set(url(../img/bilder/hero-wand-v2-960.webp) type("image/webp"),url(../img/bilder/hero-wand-v2-960.jpg) type("image/jpeg")) center/cover no-repeat,
  #0B5A1E}}

/* Regal: nur ganze Packungen (08.10.2026). Jede Reihe reicht vom Brettanfang bis zum rechten Rand,
   Innenrand --regal-luft = Spielraum fürs Mitwandern beim Scrollen (app.js begrenzt die Verschiebung
   darauf); app.js blendet aus, was nicht ganz hineinpasst (.weg), der Rest verteilt sich gleichmäßig. */
.aisle-hero{--regal-luft:36px}
.aisle-hero .row{right:0;gap:14px;justify-content:space-around;padding-inline:var(--regal-luft)}
.aisle-hero .it.weg{display:none}
@media (min-width:761px){.aisle-hero .row{left:45%}}
@media (max-width:760px){.aisle-hero{--regal-luft:16px}.aisle-hero .row{left:0}}
/* Kopfzeile: Die vier Textverweise passen erst ab 1180 px neben Logo, Sprachwahl und Einkaufsliste –
   darunter brachen sie auf 2–3 Zeilen um (gemessen 761–1150 px). Unter 1180 px ausgeblendet wie am
   Handy; ab 1180 px nie umbrechen. */
nav.main a{white-space:nowrap}
@media (max-width:1299px){header.bar nav.main{display:none}}

/* Kopf geordnet (08.10.2026): Logo links · Menü mittig (ab 1180 px) · Sprachwahl + Einkaufsliste rechts.
   Unter 1180 px (Menü ausgeblendet) schob nichts mehr nach rechts – Sprachwahl und Liste klebten am Logo.
   Infoleiste: Adresse, Parken, Zeiten links, „Route planen“ rechtsbündig – beide Leisten enden an
   denselben Kanten wie Logo und Einkaufsliste (gleiches .wrap). */
/* logische Kanten (margin-inline-start): in Urdu (rtl) spiegelt sich der Kopf – Logo rechts, Liste links */
nav.main{margin-inline:auto}
header.bar .lsw{margin-left:0;margin-right:0}
@media (max-width:1299px){header.bar .lsw{margin-inline-start:auto}}
/* Tablet: Infoleiste in einer Zeile – Kurzformen wie am Handy (bei 768 px brach sie auf 3 Zeilen um) */
@media (min-width:761px) and (max-width:1023px){.info .hide-s{display:none}.info .show-s{display:inline!important}}
/* Abstand Sprachwahl → Einkaufsliste auf der Innenseite (Entwurf: margin-left; in Urdu lag er an der Außenkante) */
header.bar .lsw+.cart-btn{margin-left:0;margin-right:0;margin-inline-start:.5rem}
@media (max-width:760px){header.bar .lsw+.cart-btn{margin-inline-start:.4rem}}

/* Häufige Fragen: Kopf links, Fragen in einer Spalte rechts – Aufklappen verschiebt nur die Fragen darunter */
.faq-kopf h2{font-stretch:75%;font-weight:850;text-transform:uppercase;font-size:1.6rem;margin-bottom:.6rem}
.faq-kopf p{color:var(--muted);margin-bottom:1.1rem;max-width:30ch}
.faq-raster{display:grid;gap:1.25rem 4rem}
@media (min-width:900px){
  .faq-raster{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}
  .faq-kopf{position:sticky;top:6rem}
}
#faq .faq summary{padding-block:1.15rem}
#faq .faq details p{max-width:65ch;padding-bottom:1.25rem}
#faq .faq summary:focus-visible{outline-offset:-3px}
/* Handy: Hinweis und WhatsApp-Knopf erst nach den Fragen */
@media (max-width:899px){
  .faq-raster{display:flex;flex-direction:column;gap:0}
  .faq-kopf{display:contents}
  #faq .faq{order:1;margin-bottom:1.5rem}
  .faq-kopf p,.faq-kopf .btn{order:2}
  .faq-kopf .btn{align-self:flex-start}
}
.faq-kopf p a{color:var(--leaf);font-weight:700;text-underline-offset:3px}
/* Abschluss (08.10.): „Komm vorbei“-Band oben, Karte + Zeiten direkt darunter – ein Block */
/* Sortiment + Produktraster in einem Abschnitt (08.10.): Rechner filtert über das Gangschild,
   Handy über die Chip-Leiste (das zehnzeilige Schild wäre dort ein ganzer Bildschirm) */
.shop-in{margin-top:clamp(1.6rem,3vw,2.4rem);scroll-margin-top:96px}
.found-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1rem}
.found-row .found-note{margin:0}
html.laden .aisle-btn[aria-pressed="true"]{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
html.laden .aisle-btn[aria-pressed="true"]::after{transform:rotate(135deg)}
@media (min-width:761px){#chips{display:none}}
@media (max-width:760px){#sortiment .aisles{display:none}.found-reset{display:none}}
.shop-tools .found-row{flex:1 1 auto;margin:0}
@media (max-width:760px){.shop-tools .found-row{order:3;flex-basis:100%}}
/* H1-Vorzeile (08.10., SEO): Name, Angebot und Ort im H1 – klein und ruhig über dem großen Schriftzug.
   Weiß statt Kurkuma: Kurkuma erreicht auf dem Schleier nur ~2,8 : 1 */
.hero-text .hl .hl-ort{display:block;font-family:var(--f-sans,inherit);font-stretch:100%;font-size:clamp(.85rem,1vw,1rem);font-weight:700;line-height:1.4;letter-spacing:.01em;text-transform:none;color:#fff;margin:0 0 .9rem;max-width:34ch;animation:none;hyphens:manual;-webkit-hyphens:manual}
html[data-script="ur"] .hero-text .hl .hl-ort{line-height:2;font-size:1rem}
@media (max-width:760px){.hero-text .hl .hl-ort{font-size:.82rem;max-width:none;margin-bottom:.45rem}}
/* Gericht-Seiten: Zubereitung (08.10.) */
.lande .schritte{counter-reset:schritt;list-style:none;margin:0;padding:0;display:grid;gap:.8rem;max-width:68ch}
.lande .schritte li{counter-increment:schritt;display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.8rem;align-items:start;line-height:1.6}
.lande .schritte li::before{content:counter(schritt);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--leaf);color:#fff;font-family:var(--f-mono);font-weight:600;font-size:.95rem}
.lande-hinweis{font-size:.9rem;color:var(--muted);margin:1rem 0 clamp(1.5rem,4vw,2.5rem);max-width:68ch}
/* Menü unter 1300 px (08.10., seit „Über uns“ fünf Einträge; vorher 1180): Knopf am Ende der Kopfzeile, Tafel unter dem Kopf.
   Ab 1300 px steht die Navigation wie bisher in der Zeile, der Knopf ist weg. */
header.bar{position:relative}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--paper);color:var(--ink);margin-inline-start:.5rem}
.menu-btn:hover{border-color:var(--ink)}
.menu-btn .ic{width:22px;height:22px}
@media (max-width:1299px){
  .menu-btn{display:inline-flex}
  header.bar nav.main.auf{display:flex;flex-direction:column;gap:0;position:absolute;inset-inline:0;top:100%;z-index:60;margin:0;
    padding:.5rem var(--gx) 1rem;background:var(--paper);border-bottom:2px solid var(--ink);box-shadow:0 18px 30px -18px rgba(0,0,0,.35);
    max-height:calc(100svh - 120px);overflow-y:auto}
  header.bar nav.main.auf a{font-size:1.1rem;font-stretch:100%;min-height:52px;display:flex;align-items:center;padding:.4rem .2rem;border-radius:0;border-bottom:1px solid var(--line)}
  header.bar nav.main.auf a:last-child{border-bottom:0}
  header.bar nav.main.auf a:hover{background:var(--shelf)}
}
@media (max-width:760px){
  .menu-btn{width:44px;margin-inline-start:.4rem}
  header.bar .logo img{width:min(40vw,196px)}
}
/* Über uns (08.10.): Text links, Fotoplatz rechts */
.ueber{background:var(--shelf)}
.ueber-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.ueber-gruss{font-weight:700;font-size:1.1rem;margin:.2rem 0 0}
.ueber-foto{margin:0}
.ueber-platz{aspect-ratio:4/3;border:2px dashed var(--line-2);border-radius:12px;background:rgba(255,255,255,.55);display:grid;place-content:center;justify-items:center;gap:.6rem;color:var(--muted);text-align:center;padding:1.5rem}
.ueber-platz .ic{width:2.4rem;height:2.4rem}
@media (max-width:860px){.ueber-in{grid-template-columns:minmax(0,1fr)}}

/* Fuß: dritte Spalte Öffnungszeiten */
.fuss-links{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.fuss-zeiten p{font-size:.95rem;line-height:1.7;margin:.5rem 0 0}
@media (max-width:1023px){.fuss-links{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fuss-links>div:first-child{grid-column:1/-1}}
@media (max-width:760px){.fuss-links{grid-template-columns:minmax(0,1fr)}}
.aisle .no{white-space:nowrap}
/* Über uns: Stimmungsbild (Platz 12, bis zum echten Familienfoto) – dekorativ, daher alt="" */
.ueber-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:0 14px 34px -18px rgba(27,21,17,.45)}
#ueber-uns .aisle h2{hyphens:manual;-webkit-hyphens:manual}
/* Infoleiste: Öffnungsstatus mit Punkt (grün = jetzt offen) */
.info-zeit .ic{display:none}
.info-zeit::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--kurkuma);flex:none}
.info-zeit.offen::before{background:#7BD88F;box-shadow:0 0 0 3px rgba(123,216,143,.25)}
.info-status{font-weight:700}
/* Schemakarte aus echten Straßendaten (08.10., werkzeuge/karte_bauen.py, © OpenStreetMap-Mitwirkende) */
.karte-wege path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.visit .map{align-self:stretch;aspect-ratio:auto;min-height:420px}
@media (max-width:760px){.visit .map{aspect-ratio:2/3;min-height:0}}
.karte-namen text{font:600 11px var(--f-sans);fill:#45423B;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;text-anchor:middle;dominant-baseline:central}
.karte-h{font:800 12px var(--f-sans);fill:#0B5A1E}
.karte-n text{font:700 10px var(--f-sans);fill:#1B1511}
.map .cap .karte-bus{display:flex;align-items:center;gap:.45rem;font-size:.92rem}
.map .cap .karte-bus i{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--kurkuma);color:#0B5A1E;font:800 .72rem var(--f-sans);font-style:normal;flex:none}
.karte-schild rect{fill:#fff;stroke:#0B5A1E;stroke-width:1.5}
.karte-schild text{font:700 11px var(--f-sans);fill:#0B5A1E;text-anchor:middle;dominant-baseline:central}
/* „Komm vorbei“ als Kopf von Laden & Parken (08.10.; das dunkle Band gibt es nur noch auf den Landeseiten) */
.laden-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(1.4rem,3vw,2rem)}
.laden-kopf .aisle{margin:0}
/* Knöpfe beim Inhalt (08.10.): Route in der Adresskarte, WhatsApp bei den Kontaktwegen */
.map .cap{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:1rem}
.map .cap .cap-text{display:grid;gap:.35rem;min-width:0}
.map .cap .cap-route{white-space:nowrap}
.visit-card .kontakt-wa{width:100%;justify-content:center}
@media (max-width:860px){.map .cap{grid-template-columns:minmax(0,1fr)}.map .cap .cap-route{width:100%;justify-content:center}}
/* Suchkarte kompakter (08.10.): weniger Innenabstand, flacheres Feld, kleinere Klappanzeige und
   Probier-Wörter – die Karte wirkte neben dem Hero zu wuchtig. Handy behält 44-px-Tippflächen. */
html.laden .find-card{padding:clamp(.9rem,1.6vw,1.25rem) clamp(1rem,2vw,1.5rem);border-radius:18px}
.find-top{font-size:.95rem;gap:.4rem .7rem}
.find-top .flap{font-size:clamp(1.15rem,1.9vw,1.5rem)}
.find-top .flap-lang{font-size:.7rem}
.find .search{margin-top:.75rem}
.find .search form{box-shadow:0 4px 0 var(--ink)}
.find .search form:focus-within{box-shadow:0 4px 0 var(--leaf)}
.find .search input{padding:.75rem 1rem;font-size:1.02rem}
.find .search form button{padding:0 1.1rem}
.find .try{margin-top:.8rem;gap:.35rem}
.find .try>span{font-size:.85rem}
@media (min-width:769px){.find .try button{min-height:32px;padding:.2rem .6rem;font-size:.88rem}}
/* Pflichtangabe der Kartendaten (ODbL), klein in der Kartenecke wie bei Online-Karten */
.map .karte-osm{position:absolute;top:0;inset-inline-end:0;z-index:2;font-size:.68rem;line-height:1;padding:.3rem .45rem;background:rgba(255,255,255,.8);color:#45423B;border-end-start-radius:6px;text-decoration:none}
.map .karte-osm:hover{text-decoration:underline}
.karte-p rect{fill:#0E6CB6;stroke:#fff;stroke-width:1.5}
.karte-p text{font:800 12px var(--f-sans);fill:#fff;text-anchor:middle;dominant-baseline:central}
/* Gangschild-Tafel aufgeräumt (08.10.): einheitliche weiße Nummernschilder mit Farbstreifen
   (G6/G9 gingen grün auf Grün unter), Anzahl als eigene Zahl vor dem Pfeil, keine Linie unter der
   letzten Reihe, kleinerer Pfeil */
html.laden .aisle-btn{grid-template-columns:3.4rem minmax(0,1fr) auto auto;column-gap:0}
html.laden .aisle-btn .g{background:#fff;color:var(--ink);box-shadow:inset 5px 0 0 var(--c);border-radius:4px;padding-inline:.55rem .35rem;font-size:.8rem}
html.laden [dir="rtl"] .aisle-btn .g{box-shadow:inset -5px 0 0 var(--c);padding-inline:.35rem .55rem}
html.laden .aisle-btn .cnt{font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:rgba(255,255,255,.75);padding-inline:.6rem .9rem;font-variant-numeric:tabular-nums}
html.laden .aisle-btn::after{width:8px;height:8px;border-width:2px;opacity:.55;margin-inline-end:.5rem}
html.laden .aisle-btn:nth-last-child(-n+2){border-bottom:0}
@media (max-width:760px){html.laden .aisle-btn:nth-last-child(2){border-bottom:1px solid rgba(255,255,255,.18)}}
html.laden .aisle-btn:hover .cnt{color:#fff}
/* Menüknopf (08.10. nachgebessert): eigenes X statt gedrehter Striche (wirkte klein und dünn);
   offen dunkel mit weißem X, damit der Zustand sofort erkennbar ist */
.menu-btn{transition:background .15s,border-color .15s,color .15s}
.menu-btn .ic{stroke-width:2.2}
.menu-btn .m-zu{display:none}
.menu-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.menu-btn[aria-expanded="true"] .m-auf{display:none}
.menu-btn[aria-expanded="true"] .m-zu{display:block}
/* Infoleiste neu (08.10.): links der Öffnungsstatus, rechts Adresse | Parken; alle Symbole im
   Umriss-Stil, flacher, kleinere Schrift. Handy: Status links, „Parken“ rechts (Adresse steht bei der Karte). */
.info{font-size:.8125rem}
.info .info-in{flex-wrap:nowrap;justify-content:space-between;gap:1rem;min-height:36px;padding-block:0}
.info .info-zeit{gap:.5rem;min-width:0;white-space:nowrap}
.info .info-status{font-weight:600}
.info-rechts{display:flex;align-items:center;min-width:0}
.info-rechts>*{padding-inline:1rem;white-space:nowrap}
.info-rechts>*+*{border-inline-start:1px solid rgba(255,255,255,.28)}
.info-rechts>:last-child{padding-inline-end:0}
.info .ic{width:15px;height:15px;opacity:.9}
.info a.info-park{font-weight:600;text-decoration:none;min-height:36px}
.info a.info-park:hover span,.info a.info-park:focus-visible span{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){.info .info-adr{display:none}.info-rechts>*{padding-inline:0}.info-rechts>*+*{border:0}}
@media (max-width:768px){.info .info-in{min-height:44px}.info a.info-park{min-height:44px}}
@media (max-width:380px){.info{font-size:.78rem}}
/* Sprachwahl in der Infoleiste (08.10.): Einstellung statt Aktion – im Kopf bleiben Logo, Menü,
   Einkaufsliste. Kompakter Umriss-Knopf weiß auf Grün; die Auswahl klappt nach unten über den Kopf. */
.info .lsw{margin:0;position:relative}
.info .lsw-b{min-height:28px;padding:.15rem .55rem;gap:.35rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:6px;font-size:.8125rem;font-weight:600}
.info .lsw-b:hover,.info .lsw-b[aria-expanded="true"]{border-color:#fff;background:rgba(255,255,255,.1)}
.info .lsw-b .ic{width:15px;height:15px;opacity:1}
.info .lsw-b .chev{width:12px;height:12px}
.info .lsw-m{top:calc(100% + 8px);right:auto;inset-inline-end:0;color:var(--ink);font-size:1rem}
.info .lsw-m span{color:inherit}
header.bar .cart-btn{margin-left:auto;margin-right:0}
[dir="rtl"] header.bar .cart-btn,header.bar[dir="rtl"] .cart-btn{margin-left:0;margin-right:auto}
@media (min-width:1300px){header.bar .cart-btn,header.bar[dir="rtl"] .cart-btn{margin-left:0;margin-right:0}}
@media (max-width:760px){
  .info .info-park{display:none}
  .info .lsw-b{min-height:36px;padding-inline:.6rem}
  .info .lsw-b .chev{display:inline}
  .info .lsw-m{right:0;left:auto}
  [dir="rtl"] .info .lsw-m,.info[dir="rtl"] .lsw-m{right:auto;left:0}
  .info-rechts>*+*{border:0}
}
/* Sprachwahl wie „Parken & Anfahrt“: Textverweis mit Symbol, kein Knopfrahmen (Auftraggeber 08.10.) */
.info .lsw-b,.info .lsw-b:hover,.info .lsw-b[aria-expanded="true"]{border:0;background:none;padding:0;min-height:36px;border-radius:0;font-size:inherit;font-weight:600;gap:.45rem}
.info .lsw-b:hover #lswCur,.info .lsw-b:focus-visible #lswCur,.info .lsw-b[aria-expanded="true"] #lswCur{text-decoration:underline;text-underline-offset:3px}
.info .lsw-b .chev{width:11px;height:11px;opacity:.85}
.info .lsw-b #lswCur[lang="ur"],.info .lsw-b #lswCur:lang(ur){font-family:"Noto Nastaliq Urdu",serif}
@media (max-width:760px){.info .lsw-b{min-height:44px;padding:0}}
/* Zutatenliste ohne „Was ist das?“ (Auftraggeber 08.10.): drei Spalten Haken · Packung · Name */
.dish-list .ing{grid-template-columns:auto 44px minmax(0,1fr)}
@media (max-width:760px){.dish-list .ing{grid-template-columns:auto 40px minmax(0,1fr)}}
/* Hintergründe (09.10.): Sortiment, FAQ und „Über uns“ standen fast reinweiß und wirkten kahl.
   Seitengrund jetzt warmes Papier (passt zum Funnel-Bild), „Über uns“ eine Stufe kräftiger;
   Karten, Kopf und Suchkarte bleiben weiß und heben sich dadurch ab. Kontrast --muted ≥ 5,8 : 1. */
:root{--grund:#F8F5EE;--grund-2:#EFE9DD}
body{background:var(--grund)}
#sortiment,#faq{background:var(--grund)}
.ueber{background:var(--grund-2)}

/* ---------- Produktfotos (Herstellerbilder aus produktbilder/, weißer Grund) ----------
   multiply lässt das Weiß im Regalgrund verschwinden; das Live-Regal bleibt gezeichnet. */
.foto{display:block;height:auto;mix-blend-mode:multiply}
.tag-vis .foto{width:auto;height:118px;max-width:86%}
.mini-art .foto{width:44px;height:44px;object-fit:contain}
.m-art .foto{width:120px;height:120px;object-fit:contain}
@media (max-width:640px){
  .tag-vis .foto{height:84px}
  .m-art .foto{width:84px;height:84px}
}