/* ==========================================================
   Alibaba Kebap Haus Steintor
   Farben direkt aus der offiziellen Logodatei entnommen.
   Mobile first, keine externen Schriften, keine Bibliotheken.
   ========================================================== */

:root{
  /* aus dem Logo gemessen */
  --gold:        #F8D888;
  --gold-2:      #F0C878;
  --gold-deep:   #B9852B;
  --braun:       #985018;
  --braun-dunkel:#4A3423;
  --tinte:       #201820;
  --tinte-2:     #2C2228;

  --creme:       #FBF5E9;
  --creme-2:     #F3E9D6;
  --papier:      #FFFFFF;

  --text:        #241C16;
  --text-mut:    #6A5D4E;
  --hell:        #FAF3E6;
  --hell-mut:    #CBBBA2;

  --linie-hell:  rgba(36,28,22,.13);
  --linie-dunkel:rgba(248,216,136,.24);

  --wrap: 1220px;
  --pad: 20px;
  --r: 12px;
  --r-gross: 18px;
  --schatten: 0 14px 34px rgba(32,24,32,.13);
  --nav-h: 70px;
  --leiste-h: 0px;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 14px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background:var(--creme);
  overflow-x:hidden;
  padding-bottom:var(--leiste-h);
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{ margin:0 0 .55em; font-weight:800; letter-spacing:0; line-height:1.22; text-wrap:balance; }
h1{ font-size:clamp(1.9rem, 6.4vw, 3.05rem); line-height:1.12; }
h2{ font-size:clamp(1.5rem, 4.6vw, 2.3rem); }
h3{ font-size:1.1rem; line-height:1.35; }
p{ margin:0 0 1.1em; }
a{ color:inherit; }

:focus-visible{ outline:3px solid var(--gold-deep); outline-offset:3px; border-radius:5px; }
.dunkel :focus-visible, .topbar :focus-visible, .footer :focus-visible{ outline-color:var(--gold); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--schmal{ max-width:780px; }
.wrap--mittel{ max-width:1000px; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

.skip{
  position:absolute; left:12px; top:-100px; z-index:300;
  background:var(--gold); color:#2A1D06; font-weight:700;
  padding:12px 18px; border-radius:10px; text-decoration:none;
}
.skip:focus{ top:12px; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:46px; padding:.62em 1.25em;
  border-radius:999px; border:1.5px solid transparent;
  font:inherit; font-size:.95rem; font-weight:700;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color .16s, border-color .16s, color .16s, transform .1s;
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--gold); color:#2A1D06; }
.btn--gold:hover{ background:#FFE9A8; }
.btn--dunkel{ background:var(--tinte); color:var(--hell); }
.btn--dunkel:hover{ background:var(--braun); color:#FFF; }
.btn--rand{ border-color:var(--linie-hell); color:var(--text); background:transparent; }
.btn--rand:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
.btn--randhell{ border-color:rgba(250,243,230,.42); color:var(--hell); background:rgba(32,24,32,.35); }
.btn--randhell:hover{ border-color:var(--gold); color:var(--gold); }
.btn--klein{ min-height:38px; padding:.4em .9em; font-size:.86rem; }
.btn--breit{ display:flex; width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------------- Kopfzeile ---------------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:200;
  background:rgba(32,24,32,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background-color .2s, border-color .2s;
}
.topbar.fest{ background:var(--tinte); border-bottom-color:var(--linie-dunkel); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:var(--nav-h); }

.marke{ display:flex; align-items:center; text-decoration:none; padding:6px 0; }
.marke__logo{ height:34px; width:auto; }

.navknopf{
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; border:1.5px solid var(--linie-dunkel);
  color:var(--hell); border-radius:999px; padding:8px 13px;
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; min-height:46px;
}
.navknopf__striche{ display:grid; gap:4px; }
.navknopf__striche i{ display:block; width:17px; height:2px; background:var(--gold); border-radius:2px; transition:transform .2s, opacity .2s; }
.navknopf[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.navknopf[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.navknopf[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav{
  position:absolute; left:0; right:0; top:100%;
  background:var(--tinte); border-top:1px solid var(--linie-dunkel);
  border-bottom:1px solid var(--linie-dunkel);
  padding:6px var(--pad) 18px; display:none;
}
.nav.offen{ display:block; }
.nav__liste{ list-style:none; margin:0 0 14px; padding:0; }
.nav__liste a{
  display:block; padding:13px 2px; color:var(--hell);
  text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(250,243,230,.10);
}
.nav__liste a:hover{ color:var(--gold); }
.nav__liste a[aria-current="page"]{ color:var(--gold); }
.nav__cta{ width:100%; }

@media (min-width:1080px){
  :root{ --nav-h:74px; }
  .navknopf{ display:none; }
  .nav{ position:static; display:flex; align-items:center; gap:18px; background:none; border:0; padding:0; }
  .nav__liste{ display:flex; gap:18px; margin:0; white-space:nowrap; }
  .nav__liste a{ padding:6px 0; border:0; font-size:.95rem; }
  .nav__cta{ width:auto; }
  .marke__logo{ height:44px; }
}

/* ---------------- Hero Startseite ---------------- */
.hero{
  position:relative; color:var(--hell);
  padding:calc(var(--nav-h) + 34px) 0 34px;
  overflow:hidden; isolation:isolate;
  background-color:#120D0C;
  background-image:url("../img/hero-komposition-mobil.jpg");
  background-size:cover;
  background-position:50% 92%;
  background-repeat:no-repeat;
}

/* Verlauf über dem Bild: sorgt für Kontrast unter Überschrift und Buttons.
   Stärke hier anpassen, falls das Motiv kräftiger durchkommen soll. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(18,13,12,.94) 0%, rgba(18,13,12,.72) 38%,
                            rgba(18,13,12,.55) 62%, rgba(18,13,12,.90) 100%),
    radial-gradient(90% 70% at 12% 30%, rgba(152,80,24,.30), transparent 62%);
}

/* Feine goldene Linie am unteren Rand, greift den Rahmen im Motiv auf */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(248,216,136,.55), transparent);
}

@media (min-width:900px){
  .hero{
    background-image:url("../img/hero-komposition-desktop.jpg");
    background-position:100% 50%;
  }
  .hero::before{
    background:
      linear-gradient(90deg, rgba(18,13,12,.96) 0%, rgba(18,13,12,.88) 38%,
                             rgba(18,13,12,.45) 62%, rgba(18,13,12,.20) 100%),
      linear-gradient(180deg, rgba(18,13,12,.55), transparent 30%, rgba(18,13,12,.55));
  }
}
.hero__inner{ position:relative; display:grid; gap:24px; align-items:center; }

.kennzeichen{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 14px; padding:6px 13px;
  border:1px solid var(--linie-dunkel); border-radius:999px;
  color:var(--gold); font-size:.78rem; font-weight:700; letter-spacing:.05em;
}
.neu{
  display:block; margin:0 0 16px; padding:10px 14px;
  border-radius:10px; max-width:44ch;
  background:rgba(248,216,136,.12);
  border:1px solid var(--linie-dunkel);
  border-left:4px solid var(--gold);
}
.neu__titel{
  margin:0 0 2px; font-size:.98rem; font-weight:800;
  letter-spacing:.01em; color:var(--gold); line-height:1.3;
}
.neu__text{ margin:0; font-size:.86rem; line-height:1.5; color:var(--hell-mut); }
@media (min-width:900px){
  .neu{ padding:11px 16px; }
  .neu__titel{ font-size:1.05rem; }
  .neu__text{ font-size:.9rem; }
}

.hero h1{ margin-bottom:.3em; max-width:16ch; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero__text{ color:var(--hell-mut); font-size:1.02rem; max-width:46ch; margin-bottom:1.2em; }
.hero__knoepfe{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.88rem; color:var(--hell-mut); }
.hero__meta b{ color:var(--hell); }

.hero__bild{ position:relative; border-radius:var(--r-gross); overflow:hidden; border:1px solid var(--linie-dunkel); }
.hero__bild img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.hero__bild figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 18px 14px; font-size:.82rem; color:var(--hell);
  background:linear-gradient(transparent, rgba(32,24,32,.92));
}

@media (min-width:900px){
  .hero{ padding:calc(var(--nav-h) + 52px) 0 56px; min-height:520px; }
  .hero__inner{ grid-template-columns:minmax(0,.62fr) .38fr; gap:48px; align-items:center; }
  .hero__bild{ display:none; }
  .hero h1{ font-size:clamp(2.4rem, 3.5vw, 3.1rem); }
  .hero__text{ font-size:1.06rem; }
  .hero__bild img{ aspect-ratio:5/4; }
}
@media (min-width:1200px){
  .hero h1{ font-size:3.1rem; }
}

/* ---------------- Statusanzeige ---------------- */
.status{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 11px; border-radius:999px;
  background:rgba(32,24,32,.5); border:1px solid var(--linie-dunkel);
  font-size:.88rem; font-weight:600; color:var(--hell);
  margin:0 0 16px;
}
.status__punkt{ width:8px; height:8px; border-radius:50%; background:var(--hell-mut); flex:none; }
.status[data-offen="ja"] .status__punkt{ background:#5FBF87; box-shadow:0 0 0 4px rgba(95,191,135,.18); }
.status[data-offen="nein"] .status__punkt{ background:#D1704A; box-shadow:0 0 0 4px rgba(209,112,74,.16); }
.status--hell{ background:var(--creme-2); border-color:var(--linie-hell); color:var(--text); }

/* ---------------- Abschnitte ---------------- */
.abschnitt{ padding:44px 0; }
.abschnitt--hell{ background:var(--creme); }
.abschnitt--papier{ background:var(--papier); }
.abschnitt--dunkel{ background:var(--tinte); color:var(--hell); }
.abschnitt--dunkel h2,.abschnitt--dunkel h3{ color:var(--hell); }
.dunkel{ background:var(--tinte); color:var(--hell); }

.kopf{ max-width:660px; margin-bottom:26px; }
.kopf--mitte{ margin-inline:auto; text-align:center; }
.kopf h2{ font-size:clamp(1.5rem, 3.4vw, 2.3rem); }
.lead{ font-size:1.02rem; color:var(--text-mut); margin:0; }
.abschnitt--dunkel .lead{ color:var(--hell-mut); }

@media (min-width:900px){ .abschnitt{ padding:64px 0; } }

.hinweis{
  margin:22px 0 0; padding-top:14px;
  border-top:1px solid var(--linie-hell);
  font-size:.9rem; color:var(--text-mut);
}
.abschnitt--dunkel .hinweis{ border-top-color:var(--linie-dunkel); color:var(--hell-mut); }

/* ---------------- Kategorie-Kacheln Startseite ---------------- */
.kacheln{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.kachel{
  display:flex; align-items:center; gap:12px;
  padding:12px 13px; min-height:84px;
  background:var(--papier); border:1px solid var(--linie-hell);
  border-radius:var(--r); text-decoration:none; color:var(--text);
  transition:border-color .16s, transform .12s;
}
.kachel:hover{ border-color:var(--gold-deep); transform:translateY(-2px); }
.kachel__bild{ width:46px; height:46px; flex:none; border-radius:9px; }
.kachel__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kachel__name{ font-weight:800; font-size:.98rem; line-height:1.25; }
.kachel__ab{ font-size:.82rem; color:var(--text-mut); }
.kachel__ab b{ color:var(--gold-deep); font-size:.95rem; }
@media (min-width:700px){ .kacheln{ grid-template-columns:repeat(3,1fr); gap:12px; } }
@media (min-width:1000px){ .kacheln{ grid-template-columns:repeat(5,1fr); } }

/* ---------------- Vorteile ---------------- */
.vorteile{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linie-dunkel); }
.vorteil{
  display:flex; align-items:center; gap:9px; margin:0;
  padding:15px 14px; background:var(--braun-dunkel);
  font-size:.88rem; font-weight:600; line-height:1.4; color:var(--hell);
}
.vorteil svg{ width:21px; height:21px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:860px){
  .vorteile{ grid-template-columns:repeat(4,1fr); }
  .vorteil{ justify-content:center; padding:18px 14px; }
}

/* ---------------- Speisekarte ---------------- */
.kat-nav{
  position:sticky; top:var(--nav-h); z-index:90;
  background:var(--creme); border-bottom:1px solid var(--linie-hell);
  margin-bottom:22px;
}
.kat-nav__scroll{
  display:flex; gap:8px; overflow-x:auto; padding:11px 0;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.kat-nav__scroll::-webkit-scrollbar{ height:5px; }
.kat-nav__scroll::-webkit-scrollbar-thumb{ background:var(--linie-hell); border-radius:3px; }
.kat-chip{
  flex:none; padding:8px 14px; border-radius:999px;
  border:1.5px solid var(--linie-hell); background:var(--papier);
  font:inherit; font-size:.88rem; font-weight:600; color:var(--text);
  cursor:pointer; white-space:nowrap;
}
.kat-chip:hover{ border-color:var(--gold-deep); }
.kat-chip.aktiv{ background:var(--tinte); border-color:var(--tinte); color:var(--gold); }

.suche{ position:relative; margin-bottom:20px; }
.suche input{
  width:100%; min-height:48px; padding:12px 44px 12px 16px;
  border:1.5px solid var(--linie-hell); border-radius:999px;
  background:var(--papier); font:inherit; font-size:1rem; color:var(--text);
}
.suche input:focus{ border-color:var(--gold-deep); }
.suche__leeren{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; border-radius:50%;
  background:transparent; cursor:pointer; font-size:1.2rem; color:var(--text-mut);
}

.kat-block{ margin-bottom:36px; scroll-margin-top:calc(var(--nav-h) + 70px); }
.kat-block__kopf{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--gold); }
.kat-block__kopf h2{ margin:0; font-size:1.35rem; }
.kat-block__kopf p{ margin:0; font-size:.88rem; color:var(--text-mut); }

.gerichte{ display:grid; gap:10px; }
@media (min-width:760px){ .gerichte{ grid-template-columns:1fr 1fr; gap:12px; } }
@media (min-width:1100px){ .gerichte{ grid-template-columns:repeat(3,1fr); } }

.gericht{
  display:flex; gap:12px; align-items:stretch;
  padding:13px 14px; background:var(--papier);
  border:1px solid var(--linie-hell); border-radius:var(--r);
}
.gericht__text{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.gericht__titel{ margin:0 0 4px; font-size:1rem; font-weight:800; line-height:1.3; }
.gericht__nr{ color:var(--gold-deep); font-weight:800; margin-right:.35em; }
.gericht__bes{ margin:0 0 6px; font-size:.87rem; color:var(--text-mut); line-height:1.55; }
.gericht__marker{ margin:0 0 6px; }
.gericht__codes{ margin:0 0 8px; font-size:.74rem; color:var(--text-mut); font-variant-numeric:tabular-nums; }
.gericht__fuss{ display:flex; align-items:center; gap:10px; margin-top:auto; flex-wrap:wrap; }
.gericht__preis{ font-weight:800; font-size:1.08rem; font-variant-numeric:tabular-nums; }
.gericht__fuss .btn{ margin-left:auto; }

/* Produktbild: Foto oder Kategorie-Illustration */
.gbild{ position:relative; flex:none; width:82px; align-self:flex-start; }
.gbild__img{
  width:82px; height:82px; object-fit:cover;
  border-radius:10px; background:var(--creme-2);
  border:1px solid var(--linie-hell);
}
.gbild__img--illu{ object-fit:contain; background:var(--tinte); border-color:var(--tinte); }
.gbild__marke{
  position:absolute; left:4px; bottom:4px;
  background:rgba(32,24,32,.82); color:var(--gold);
  font-size:.56rem; font-weight:700; letter-spacing:.03em;
  padding:2px 5px; border-radius:5px;
}
.gbild--dialog{ width:100%; margin-bottom:14px; }
.gbild--dialog .gbild__img{ width:100%; height:170px; border-radius:12px; }
.dlg__text{ margin:0 0 14px; font-size:.92rem; color:var(--text-mut); }
@media (min-width:480px){
  .gbild, .gbild__img{ width:100px; }
  .gbild__img{ height:100px; }
}
@media (min-width:1100px){
  .gbild, .gbild__img{ width:112px; }
  .gbild__img{ height:112px; }
}

.marker{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  background:#E8F2E2; color:#35602C; margin-right:6px;
}
.marker--wahl{ background:var(--creme-2); color:var(--braun); }
.marker--scharf{ background:#FBE6DE; color:#A8431F; }

.leer{ padding:28px 4px; color:var(--text-mut); }

/* ---------------- Vorbestellung ---------------- */
.bestell-raster{ display:grid; gap:24px; }
@media (min-width:1000px){
  .bestell-raster{ grid-template-columns:1.25fr .75fr; gap:34px; align-items:start; }
  .warenkorb-spalte{ position:sticky; top:calc(var(--nav-h) + 16px); }
}

.karte{
  background:var(--papier); border:1px solid var(--linie-hell);
  border-radius:var(--r-gross); padding:20px;
}
.karte + .karte{ margin-top:16px; }
.karte h2{ font-size:1.2rem; }
.karte h3{ font-size:1rem; margin-bottom:.4em; }

.korb__zeile{
  display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  padding:12px 0; border-bottom:1px solid var(--linie-hell);
}
.korb__zeile:last-of-type{ border-bottom:0; }
.korb__name{ font-weight:700; font-size:.96rem; }
.korb__detail{ grid-column:1/-1; font-size:.83rem; color:var(--text-mut); }
.korb__preis{ font-weight:700; font-variant-numeric:tabular-nums; }
.korb__wunsch{
  grid-column:1/-1; margin-top:4px; font-size:.83rem; color:var(--braun);
  background:var(--creme-2); border-radius:7px; padding:5px 9px;
}
.korb__aendern{
  margin-left:10px; min-height:32px; padding:0 12px;
  border:1.5px solid var(--linie-hell); border-radius:8px;
  background:var(--papier); font:inherit; font-size:.82rem; font-weight:700;
  cursor:pointer; color:var(--text);
}
.korb__aendern:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
.korb__menge{ display:inline-flex; align-items:center; gap:2px; margin-top:6px; }
.korb__menge button{
  width:32px; height:32px; border:1.5px solid var(--linie-hell);
  background:var(--papier); border-radius:8px; font:inherit; font-size:1.05rem;
  font-weight:700; cursor:pointer; color:var(--text);
}
.korb__menge button:hover{ border-color:var(--gold-deep); }
.korb__menge span{ min-width:34px; text-align:center; font-weight:700; }
.korb__summe{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding-top:14px; border-top:2px solid var(--tinte);
  font-size:1.15rem; font-weight:800;
}

.feld{ margin-bottom:14px; }
.feld label{ display:block; font-size:.88rem; font-weight:700; margin-bottom:5px; }
.feld input, .feld select, .feld textarea{
  width:100%; min-height:46px; padding:11px 13px;
  border:1.5px solid var(--linie-hell); border-radius:10px;
  background:var(--papier); font:inherit; font-size:1rem; color:var(--text);
}
.feld textarea{ min-height:92px; resize:vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus{ border-color:var(--gold-deep); }
.feld__hilfe{ font-size:.8rem; color:var(--text-mut); margin:5px 0 0; }
.feld--zeile{ display:grid; gap:14px; }
@media (min-width:560px){ .feld--zeile{ grid-template-columns:1fr 1fr; } }

.check{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; line-height:1.55; margin-bottom:16px; }
.check input{ width:22px; height:22px; min-height:22px; margin-top:2px; flex:none; accent-color:var(--braun); }

.warnung{
  padding:13px 15px; border-radius:10px; margin-bottom:16px;
  background:#FCF0DA; border:1px solid var(--gold-deep); border-left-width:4px;
  font-size:.9rem;
}
.warnung strong{ display:block; margin-bottom:3px; }
.warnung--rot{ background:#FBE8E2; border-color:#B4502C; }
.warnung p{ margin:0; }

.wahl{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 4px; }
.wahl button{
  padding:7px 12px; border:1.5px solid var(--linie-hell); border-radius:999px;
  background:var(--papier); font:inherit; font-size:.85rem; font-weight:600;
  cursor:pointer; color:var(--text);
}
.wahl button[aria-pressed="true"]{ background:var(--tinte); border-color:var(--tinte); color:var(--gold); }

dialog.modal{
  width:min(520px, calc(100vw - 28px)); max-height:86vh;
  padding:0; border:0; border-radius:var(--r-gross);
  background:var(--papier); color:var(--text); box-shadow:var(--schatten);
}
dialog.modal::backdrop{ background:rgba(32,24,32,.6); }
.modal__kopf{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start; padding:20px 20px 0; }
.modal__inhalt{ padding:14px 20px; overflow-y:auto; max-height:52vh; }
.modal__fuss{ padding:14px 20px 20px; border-top:1px solid var(--linie-hell); display:flex; gap:10px; align-items:center; }
.modal__zu{ border:0; background:transparent; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--text-mut); padding:0 4px; }
.modal h3{ margin:0; }
.modal__preis{ font-weight:800; font-size:1.1rem; margin-left:auto; }

/* ---------------- Öffnungszeiten ---------------- */
.zeiten{ width:100%; border-collapse:collapse; background:var(--papier); border:1px solid var(--linie-hell); border-radius:var(--r); overflow:hidden; }
.zeiten th,.zeiten td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--linie-hell); font-size:.97rem; }
.zeiten th{ font-weight:600; }
.zeiten td{ text-align:right; color:var(--text-mut); font-variant-numeric:tabular-nums; }
.zeiten tr:last-child th,.zeiten tr:last-child td{ border-bottom:0; }
.zeiten tr.heute{ background:rgba(248,216,136,.28); }
.zeiten tr.heute th{ color:var(--braun); font-weight:800; }
.zeiten tr.heute td{ color:var(--braun); font-weight:700; }
.zeiten tr.heute th::after{ content:" · heute"; font-size:.8rem; font-weight:600; }

/* ---------------- Zweispalter ---------------- */
.split{ display:grid; gap:26px; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:44px; align-items:start; } }
.split--breit{ gap:26px; }
@media (min-width:900px){ .split--breit{ grid-template-columns:1.1fr .9fr; } }

.medien{ border-radius:var(--r-gross); overflow:hidden; border:1px solid var(--linie-hell); }
.abschnitt--dunkel .medien{ border-color:var(--linie-dunkel); }

.haken{ list-style:none; margin:18px 0 0; padding:0; }
.haken li{ position:relative; padding:9px 0 9px 28px; border-top:1px solid var(--linie-hell); font-size:.95rem; }
.abschnitt--dunkel .haken li{ border-top-color:rgba(250,243,230,.12); }
.haken li::before{ content:""; position:absolute; left:2px; top:18px; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); border-radius:2px; }

/* ---------------- Clips ---------------- */
.clips{ display:grid; gap:18px; }
@media (min-width:820px){ .clips{ grid-template-columns:1fr 1fr; gap:24px; } }
.clip{ margin:0; }
.clip video{ width:100%; height:auto; display:block; border-radius:var(--r); border:1px solid var(--linie-dunkel); background:#000; }
.clip figcaption{ margin-top:9px; font-size:.86rem; color:var(--hell-mut); }

/* ---------------- Bildergeschichte ---------------- */
.story{ display:grid; gap:14px; }
@media (min-width:760px){ .story{ grid-template-columns:1fr 1fr; gap:18px; } }
@media (min-width:1100px){ .story{ grid-template-columns:repeat(3,1fr); } }
.story figure{ margin:0; }
.story__knopf{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:var(--r); overflow:hidden; line-height:0;
}
.story__knopf img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); border:1px solid var(--linie-hell); }
.story figcaption{ margin-top:9px; font-size:.88rem; line-height:1.55; color:var(--text-mut); }
.abschnitt--dunkel .story figcaption{ color:var(--hell-mut); }
.story__phase{
  display:inline-block; margin-right:7px; padding:2px 8px; border-radius:999px;
  background:var(--creme-2); color:var(--braun); font-size:.72rem; font-weight:700;
}

.collage{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.collage figure{ margin:0; }
.collage img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r); border:1px solid var(--linie-hell); aspect-ratio:1/1; }
.collage figure:first-child{ grid-column:1/-1; }
.collage figure:first-child img{ aspect-ratio:16/10; }
@media (min-width:760px){
  .collage{ grid-template-columns:repeat(3,1fr); }
  .collage figure:first-child{ grid-column:span 2; grid-row:span 2; }
  .collage figure:first-child img{ aspect-ratio:auto; height:100%; }
}
.platzhalter{
  display:flex; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:1/1; border-radius:var(--r);
  border:2px dashed var(--linie-hell); background:var(--creme-2);
  padding:14px; font-size:.82rem; color:var(--text-mut);
}

dialog.bildmodal{
  width:min(880px, calc(100vw - 24px)); padding:0; border:0;
  border-radius:var(--r-gross); background:var(--tinte); color:var(--hell);
}
dialog.bildmodal::backdrop{ background:rgba(20,16,20,.82); }
dialog.bildmodal img{ width:100%; height:auto; display:block; border-radius:var(--r-gross) var(--r-gross) 0 0; }
.bildmodal__fuss{ display:flex; gap:14px; align-items:center; padding:14px 18px; font-size:.9rem; }
.bildmodal__zu{
  margin-left:auto; min-height:40px; padding:0 16px; border-radius:999px;
  border:1.5px solid var(--linie-dunkel); background:transparent;
  color:var(--hell); font:inherit; font-weight:700; cursor:pointer;
}


/* ---------------- Chat-Ansicht im Vorbestell-Abschnitt ----------------
   Vollständig gebaut, kein Bild. Die Preise entsprechen der Speisekarte;
   der Test tools/test_chat.js prüft das gegen data/menu.json. */
.handy{ margin:0; display:flex; flex-direction:column; align-items:center; }
.handy__rahmen{
  width:100%; max-width:330px;
  background:linear-gradient(170deg, #241D22 0%, #191318 100%);
  border:1px solid rgba(248,216,136,.22);
  border-radius:22px; padding:10px;
  box-shadow:0 18px 40px rgba(12,9,12,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.handy__kopf{
  display:flex; align-items:center; gap:9px;
  padding:4px 6px 11px;
  border-bottom:1px solid rgba(248,216,136,.14);
}
.handy__punkt{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:#6FBF73; box-shadow:0 0 0 3px rgba(111,191,115,.18);
}
.handy__name{ font-weight:700; font-size:.9rem; color:var(--hell); }
.handy__chat{ display:flex; flex-direction:column; gap:9px; padding:12px 4px 4px; }

.blase{
  position:relative; max-width:88%;
  padding:11px 13px 19px; border-radius:13px;
  font-size:.8rem; line-height:1.55;
  font-variant-numeric:tabular-nums;
}
.blase__titel{
  display:block; margin-bottom:7px;
  font-size:.72rem; font-weight:800; letter-spacing:.03em;
  color:var(--gold);
}
.blase__zeit{
  position:absolute; right:11px; bottom:5px;
  font-size:.64rem; opacity:.55;
}
.blase--du{
  align-self:flex-end;
  background:linear-gradient(165deg, #4A3A24, #3A2D1C);
  border:1px solid rgba(248,216,136,.2);
  color:var(--creme); border-bottom-right-radius:4px;
}
.blase--wir{
  align-self:flex-start;
  background:rgba(250,243,230,.07);
  border:1px solid var(--linie-dunkel);
  color:var(--hell); border-bottom-left-radius:4px;
}
.handy figcaption{
  margin-top:12px; font-size:.82rem; color:var(--hell-mut); text-align:center;
}
@media (min-width:900px){
  .handy__rahmen{ max-width:350px; }
  .blase{ font-size:.83rem; }
}


/* ---------------- Werder-Heimspiele ----------------
   Heller Bereich, Ali-Baba-Gold als Branding, Werder-Grün nur als Akzent.
   Das Grün ist bewusst nur hier definiert und greift nicht auf die
   übrige Website über. */
.werder{
  --gruen:       #1D9053;
  --gruen-tief:  #0F5F36;
  background:#FFFFFF;
  border-top:1px solid var(--linie-hell);
  border-bottom:1px solid var(--linie-hell);
}
.werder__kopf{ text-align:center; margin-bottom:26px; }
.werder__logo{ height:52px; width:auto; margin:0 auto 18px; display:block; }
.werder h2{ margin:0 0 6px; color:var(--gruen-tief); font-size:clamp(1.4rem,4.2vw,1.9rem); }
.werder__stadion{
  margin:0; font-size:.78rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-mut);
}
/* Platz reservieren, damit beim Laden nichts springt */
.werder__inhalt{ min-height:250px; }
.werder__leer{ text-align:center; color:var(--text-mut); padding:28px 0; margin:0; }

.werder__next{
  position:relative; text-align:center;
  padding:24px 18px; margin-bottom:22px;
  border:1px solid rgba(29,144,83,.28); border-radius:var(--r-gross);
  background:linear-gradient(180deg, rgba(29,144,83,.05), transparent 70%);
}
.werder__label{
  margin:0 0 12px; font-size:.7rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gruen);
}
.werder__paarung{
  margin:0 0 10px; display:flex; flex-direction:column; gap:3px;
  font-size:clamp(1.1rem,4.4vw,1.45rem); font-weight:800; line-height:1.25;
}
.werder__vs{ font-size:.8rem; font-weight:600; color:var(--text-mut); }
.werder__wann{
  margin:0 0 4px; display:flex; justify-content:center; align-items:center;
  gap:9px; flex-wrap:wrap; font-weight:700; font-variant-numeric:tabular-nums;
}
.werder__punkt{ color:var(--gruen); }
.werder__ort{ margin:0; font-size:.86rem; color:var(--text-mut); }
.werder__countdown{
  display:inline-block; margin-top:14px; padding:5px 14px;
  border-radius:999px; background:var(--gruen); color:#fff;
  font-size:.78rem; font-weight:700;
}

.werder__liste{ list-style:none; margin:0; padding:0; }
.werder__spiel{
  display:grid; grid-template-columns:1fr; gap:2px;
  padding:13px 4px 13px 14px; position:relative;
  border-top:1px solid var(--linie-hell);
}
.werder__spiel::before{
  content:""; position:absolute; left:0; top:15px; bottom:15px;
  width:3px; border-radius:2px; background:var(--gruen);
}
.werder__datum{ font-weight:800; font-variant-numeric:tabular-nums; font-size:.92rem; }
.werder__gegner{ font-weight:600; }
.werder__zeit{ color:var(--text-mut); font-size:.9rem; font-variant-numeric:tabular-nums; }
.werder__zeit--offen{ font-style:italic; }
.werder__quelle{
  margin:20px 0 0; text-align:center;
  font-size:.74rem; color:var(--text-mut);
}
@media (min-width:700px){
  .werder__spiel{
    grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  }
  .werder__zeit{ text-align:right; }
  .werder__paarung{ flex-direction:row; justify-content:center; gap:10px; align-items:baseline; }
}

/* ---------------- Vorbestellen: drei Schritte ---------------- */
.schritte{ margin:0; }
.schritte__titel{
  margin:0 0 18px; font-size:clamp(1.05rem,3.6vw,1.25rem);
  color:var(--hell);
}
.schritte__liste{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.schritt{
  display:flex; gap:14px; align-items:flex-start;
  padding:15px 16px; border-radius:var(--r);
  background:rgba(250,243,230,.06);
  border:1px solid var(--linie-dunkel);
}
.schritt__nr{
  flex:none; font-size:1.25rem; font-weight:800;
  color:var(--gold); font-variant-numeric:tabular-nums; line-height:1.1;
  min-width:2ch;
}
.schritt__text{ min-width:0; flex:1; }
.schritt__text h4{
  margin:0 0 9px; font-size:1rem; font-weight:700; color:var(--hell);
}
.schritt__demo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.88rem; color:var(--hell-mut);
}
.schritt__demo--spalte{ flex-direction:column; align-items:stretch; gap:7px; }
.schritt__ware{ font-weight:600; color:var(--hell); }
.schritt__preis{ margin-left:auto; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }
.schritt__menge{
  display:inline-flex; align-items:center; gap:10px;
  padding:3px 4px; border-radius:999px;
  border:1px solid var(--linie-dunkel); background:rgba(0,0,0,.18);
}
.schritt__knopf{
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(248,216,136,.16); color:var(--gold); font-weight:700;
}
.schritt__chip{
  padding:6px 13px; border-radius:999px;
  border:1px solid var(--linie-dunkel); font-size:.84rem;
}
.schritt__chip--aktiv{
  background:var(--gold); color:var(--tinte); font-weight:700; border-color:var(--gold);
}
.schritt__zeile{ display:flex; justify-content:space-between; gap:12px; }
.schritt__zeile--leise{ color:var(--hell-mut); font-size:.84rem; }
.schritt__senden{
  margin-top:5px; padding:10px 14px; border-radius:999px;
  background:var(--gold); color:var(--tinte);
  font-weight:700; font-size:.85rem; text-align:center;
}
.schritte__fuss{
  margin:16px 0 0; font-size:.82rem; color:var(--hell-mut); line-height:1.55;
}
@media (min-width:1000px){
  .schritte__liste{ gap:14px; }
  .schritt{ padding:16px 18px; }
}

/* ---------------- Kontakt ---------------- */
.kontaktkarte{ background:var(--papier); border:1px solid var(--linie-hell); border-radius:var(--r-gross); padding:22px; }
.kontaktkarte address{ font-style:normal; line-height:1.85; font-size:1.02rem; }
.kontaktkarte a{ color:var(--braun); text-underline-offset:3px; }
.knopfstapel{ display:grid; gap:10px; margin-top:18px; }

.kartenflaeche{
  position:relative; height:170px; border-radius:var(--r); overflow:hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(36,28,22,.07) 44px 46px),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(36,28,22,.07) 44px 46px),
    linear-gradient(140deg, var(--creme-2), #E0D2B6);
  border:1px solid var(--linie-hell);
}
.kartenflaeche::before{ content:""; position:absolute; left:0; right:0; top:52%; height:14px; background:rgba(36,28,22,.12); transform:rotate(-4deg); }
.kartenflaeche__pin{
  position:absolute; left:50%; top:50%; width:17px; height:17px; margin:-9px 0 0 -9px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--braun); box-shadow:0 0 0 6px rgba(152,80,24,.2);
}

/* ---------------- Footer ---------------- */
.footer{ background:var(--tinte); color:var(--hell-mut); padding:42px 0 26px; font-size:.93rem; border-top:1px solid var(--linie-dunkel); }
.footer__raster{ display:grid; gap:26px; }
.footer__logo{ height:52px; width:auto; margin-bottom:14px; }
.footer address{ font-style:normal; line-height:1.8; }
.footer a{ color:var(--hell); text-underline-offset:3px; }
.footer a:hover{ color:var(--gold); }
.footer__h{ font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 9px; font-weight:700; }
.footer__liste{ list-style:none; margin:0; padding:0; }
.footer__liste li{ margin-bottom:6px; }
.footer__unten{
  max-width:var(--wrap); margin:28px auto 0; padding:16px var(--pad) 0;
  border-top:1px solid rgba(250,243,230,.11); font-size:.83rem; color:#9B8F7C;
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
}
@media (min-width:760px){ .footer__raster{ grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; } }

/* ---------------- Mobile Aktionsleiste ---------------- */
.aktionsleiste{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--tinte); border-top:1px solid var(--linie-dunkel);
  padding-bottom:env(safe-area-inset-bottom);
}
.aktionsleiste a{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:56px; padding:7px 4px; text-decoration:none;
  color:var(--hell); font-size:.7rem; font-weight:600; line-height:1.2;
  border-right:1px solid rgba(250,243,230,.10);
}
.aktionsleiste a:last-child{ border-right:0; }
.aktionsleiste a[aria-current="page"]{ color:var(--gold); }
.aktionsleiste svg{ width:20px; height:20px; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.aktionsleiste__zahl{
  position:absolute; transform:translate(14px,-10px);
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--gold); color:#2A1D06; font-size:.66rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:1079px){ body{ --leiste-h:62px; } }
@media (min-width:1080px){ .aktionsleiste{ display:none; } }

/* ---------------- Rückmeldung ---------------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--leiste-h) + 16px); z-index:250;
  transform:translateX(-50%);
  background:var(--tinte); color:var(--gold);
  padding:11px 20px; border-radius:999px;
  border:1px solid var(--linie-dunkel);
  font-size:.9rem; font-weight:700; box-shadow:var(--schatten);
  max-width:calc(100vw - 32px); text-align:center;
}
@media (min-width:1080px){ .toast{ bottom:22px; } }

/* ---------------- Rechtsseiten und 404 ---------------- */
.rechtstext{ padding:calc(var(--nav-h) + 34px) 0 56px; }
.rechtstext h1{ font-size:clamp(1.8rem,5vw,2.5rem); }
.rechtstext h2{ font-size:1.22rem; margin-top:1.9em; }
.rechtstext p,.rechtstext li{ max-width:70ch; }
.rechtstext ul{ padding-left:20px; }
.offen{
  display:inline-block; background:var(--tinte); color:var(--gold);
  padding:2px 8px; border-radius:6px; font-size:.85em; font-weight:700; white-space:nowrap;
}
.zurueck{ display:inline-block; margin-top:30px; font-weight:700; color:var(--braun); }

.fehler{ padding:calc(var(--nav-h) + 60px) 0 70px; text-align:center; }
.fehler__zahl{ font-size:clamp(4rem,18vw,8rem); font-weight:800; color:var(--gold-deep); line-height:1; margin:0 0 10px; }
.fehler .knopfstapel{ max-width:320px; margin-inline:auto; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}