/* =========================================================
   Imbiss-Diele Verden
   Gestaltung: ruhig, hochwertig, editorial
   Schriften: ausschließlich systemeigene Schriften
   ========================================================= */

:root{
  /* Anzeige: moderne Grotesk, kraeftig und eng */
  --f-display:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,-apple-system,sans-serif;
  /* Fliesstext */
  --f-body:Arial,"Helvetica Neue",Helvetica,"Segoe UI",system-ui,-apple-system,sans-serif;
  /* Auszeichnungen */
  --f-label:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
}

/* ---------- Hell ---------- */
:root{
  --paper:#FBFAF6;
  --paper-2:#F4F1E9;
  --paper-3:#FFFFFF;
  --ink:#16191C;
  --ink-2:#3C4249;
  --ink-soft:#6E7379;
  --accent:#C43F22;
  --accent-deep:#9E3018;
  --accent-soft:rgba(196,63,34,.09);
  --brass:#9A7B45;
  --olive:#5A7355;
  --hair:rgba(22,25,28,.13);
  --hair-2:rgba(22,25,28,.07);
  --shadow:0 1px 2px rgba(22,25,28,.04), 0 8px 24px rgba(22,25,28,.06);
  --shadow-lift:0 2px 4px rgba(22,25,28,.05), 0 20px 48px rgba(22,25,28,.10);
  --focus:#1C6FB8;
}

/* ---------- Dunkel ---------- */
html[data-theme="dark"]{
  --paper:#101315;
  --paper-2:#171B1E;
  --paper-3:#1B2023;
  --ink:#F2EFE9;
  --ink-2:#C9C6C0;
  --ink-soft:#9AA0A5;
  --accent:#E8674A;
  --accent-deep:#F0866D;
  --accent-soft:rgba(232,103,74,.13);
  --brass:#C9A46A;
  --olive:#8FAA89;
  --hair:rgba(242,239,233,.15);
  --hair-2:rgba(242,239,233,.08);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.5);
  --focus:#7FB6F0;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  background:var(--paper);color:var(--ink-2);
  font-size:17px;line-height:1.7;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .3s ease,color .3s ease;
}
h1,h2,h3,h4{
  font-family:var(--f-display);color:var(--ink);
  font-weight:700;line-height:1.1;letter-spacing:-.028em;
  overflow-wrap:break-word;
}
p,li,label,span,address,td{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.wrap--narrow{max-width:820px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-soft);color:var(--ink)}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--f-label);font-weight:500;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:16px 30px;border:1px solid transparent;border-radius:2px;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.btn svg{width:16px;height:16px;flex:none}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn--line:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink);border-color:transparent;padding-left:0;padding-right:0}
.btn--ghost::after{content:"";display:block;height:1px;background:currentColor;width:0;transition:width .3s}
.btn--ghost:hover::after{width:100%}

/* ---------- Kopfbereich ---------- */
.site-head{
  position:sticky;top:0;z-index:90;background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--hair-2);
  transition:background-color .3s;
}
@supports not (backdrop-filter: blur(1px)){ .site-head{background:var(--paper)} }
/* Die Kopfzeile darf breiter sein als der Textbereich —
   sonst wird es mit sechs Menuepunkten zu eng */
.site-head .wrap{max-width:1280px}
.head-in{display:flex;align-items:center;gap:24px;min-height:86px;position:relative}
.brand{display:flex;align-items:center;gap:14px;margin-right:auto;flex:none;padding-right:10px}
.brand img{width:52px;height:52px;border-radius:50%;flex:none}
.brand-txt{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.028em;line-height:1.05;color:var(--ink);white-space:nowrap}
.brand-txt span{
  display:block;font-family:var(--f-label);font-size:9.5px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:5px;
}
.main-nav{display:flex;gap:0;align-items:center;flex:none}
.main-nav a{
  font-family:var(--f-label);font-weight:500;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:12px 12px;position:relative;color:var(--ink-2);transition:color .25s;
}
.main-nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.main-nav a:hover{color:var(--ink)}
.main-nav a:hover::after{transform:scaleX(1)}
.main-nav a[aria-current="page"]{color:var(--ink)}
.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.head-tools{display:flex;align-items:center;gap:6px}
.head-social{display:flex;align-items:center;gap:4px;margin-right:2px}
.head-social a{
  width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--hair);
  color:var(--ink-soft);display:grid;place-items:center;transition:border-color .25s,color .25s;
}
.head-social a:hover{border-color:var(--accent);color:var(--accent)}
.head-social svg{width:17px;height:17px}
.icon-btn{
  width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--hair);background:transparent;
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:border-color .25s,color .25s;
}
.icon-btn:hover{border-color:var(--ink);color:var(--ink)}
.icon-btn svg{width:19px;height:19px}
.icon-btn .sun{display:none}
html[data-theme="dark"] .icon-btn .sun{display:block}
html[data-theme="dark"] .icon-btn .moon{display:none}
.nav-toggle{display:none}

/* Reihenfolge in der Kopfzeile auf breiten Bildschirmen:
   Logo — Menü — Bestellknöpfe — Social — Ansicht */
@media (min-width:1261px){
  .brand{order:1}
  .main-nav{order:2}
  .head-cta{order:3}
  .head-social{order:4}
  .head-tools{order:5}
}

/* ---------- Hinweisband ---------- */
.ribbon{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--hair-2)}
.ribbon-in{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:13px 26px;text-align:center;
  font-family:var(--f-label);font-size:13px;letter-spacing:.06em;
}
.ribbon b{font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.ribbon .pill{
  border:1px solid rgba(255,255,255,.35);border-radius:2px;font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;padding:4px 11px;color:var(--paper);
}
html[data-theme="dark"] .ribbon{background:var(--paper-3);color:var(--ink)}
html[data-theme="dark"] .ribbon .pill{border-color:var(--hair)}

/* ---------- Statusanzeige "Jetzt geoeffnet" ----------
   Gruener Punkt mit Ring, der langsam herauswaechst. Der Punkt selbst
   bleibt immer sichtbar — laeuft die Animation nicht (z. B. weil jemand
   Bewegung reduziert hat), faellt nichts weg. */
.ribbon .pill[data-oeffnung-status]{
  position:relative;padding-left:29px;
  color:#EAF7EC;
  border-color:rgba(99,201,122,.5);
  background-color:rgba(99,201,122,.12);
  animation:offenSchein 3.2s ease-in-out infinite;
  transition:color .4s ease,border-color .4s ease,background-color .4s ease;
}
.ribbon .pill[data-oeffnung-status]::before{
  content:"";position:absolute;left:12px;top:50%;margin-top:-3.5px;
  width:7px;height:7px;border-radius:50%;
  background:#63C97A;box-shadow:0 0 7px rgba(99,201,122,.85);
}
.ribbon .pill[data-oeffnung-status]::after{
  content:"";position:absolute;left:12px;top:50%;margin-top:-3.5px;
  width:7px;height:7px;border-radius:50%;
  border:1.5px solid #63C97A;opacity:0;
  animation:offenPuls 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes offenPuls{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(3.4);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}
@keyframes offenSchein{
  0%,100%{background-color:rgba(99,201,122,.09);border-color:rgba(99,201,122,.42)}
  50%{background-color:rgba(99,201,122,.21);border-color:rgba(99,201,122,.78)}
}

/* Geschlossen: ruhig, ohne Puls */
.ribbon .pill[data-oeffnung-status].zu{
  animation:none;color:var(--paper);opacity:.72;
  background-color:transparent;border-color:rgba(255,255,255,.24);
}
.ribbon .pill[data-oeffnung-status].zu::before{
  background:#C9866B;box-shadow:none;
}
.ribbon .pill[data-oeffnung-status].zu::after{display:none}
html[data-theme="dark"] .ribbon .pill[data-oeffnung-status].zu{color:var(--ink);border-color:var(--hair)}

/* ---------- Bildergalerie ---------- */
/* ==========================================================
   Bilder über die Seite verteilt
   Vier Bausteine: Streifen, Trenner, Text mit Bild daneben,
   und ein kleines Mosaik. Jeder für sich, damit die Seite
   Abwechslung bekommt statt einer langen Reihe.
   ========================================================== */

/* --- Streifen aus zwei bis vier Bildern --- */
.bildband{display:grid;gap:8px;margin:0}
.bildband.drei{grid-template-columns:repeat(3,1fr)}
.bildband.zwei{grid-template-columns:repeat(2,1fr)}
.bildband figure{
  margin:0;overflow:hidden;background:var(--paper-3);border-radius:3px;
  aspect-ratio:4/5;position:relative;
}
.bildband.flach figure{aspect-ratio:1/1}
.bildband img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.bildband figure:hover img{transform:scale(1.06)}
.bildband figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(196,63,34,.2),transparent 55%);
  opacity:0;transition:opacity .45s;
}
.bildband figure:hover::after{opacity:1}
@media (max-width:700px){
  .bildband.drei{grid-template-columns:1fr 1fr}
  .bildband.drei figure:first-child{grid-column:1 / -1;aspect-ratio:16/10}
}

/* --- Breiter Trenner über die ganze Seite --- */
.bildtrenner{
  margin:0;overflow:hidden;background:var(--paper-3);
  aspect-ratio:21/8;position:relative;
}
.bildtrenner img{
  width:100%;height:100%;object-fit:cover;object-position:center 52%;display:block;
}
@media (max-width:700px){ .bildtrenner{aspect-ratio:16/10} }

/* --- Kleines Mosaik --- */
.mosaik{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;
  grid-auto-flow:dense;gap:8px;
}
.mosaik figure{
  margin:0;overflow:hidden;background:var(--paper-3);border-radius:3px;
  grid-row:span 2;position:relative;
}
.mosaik .gross{grid-column:span 2;grid-row:span 3}
.mosaik .hoch{grid-row:span 3}
.mosaik .breit{grid-column:span 2;grid-row:span 2}
.mosaik img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.mosaik figure:hover img{transform:scale(1.06)}
@media (max-width:700px){
  .mosaik{grid-template-columns:repeat(2,1fr);grid-auto-rows:100px}
}

@media (prefers-reduced-motion:reduce){
  .bildband img,.mosaik img{transition:none}
  .bildband figure:hover img,.mosaik figure:hover img{transform:none}
}

.seitenbild{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--hair-2);margin:26px 0 8px;
}

/* ---------- Oeffnungszeiten und Entfernungen ---------- */
.hours{border:1px solid var(--hair);background:var(--paper)}
.hours-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 26px;border-bottom:1px solid var(--hair-2);
}
.hours-row:last-child{border-bottom:none}
.hours-row .d{
  font-family:var(--f-label);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);flex:0 1 auto;
}
.hours-row .t{
  font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);
  letter-spacing:-.015em;text-align:right;flex:0 0 auto;
  display:flex;flex-wrap:wrap;justify-content:flex-end;
}
.hours-row .t .z{white-space:nowrap}
/* Trennpunkt zwischen Mittag und Abend — nur in der breiten Ansicht */
.hours-row .t .z + .z::before{
  content:"·";margin:0 9px;color:var(--ink-soft);font-weight:400;
}
.hours-row .t.closed{font-weight:500;color:var(--ink-soft)}
/* zweite Zeile, z. B. die Fahrzeit */
.hours-row .t em{
  display:block;width:100%;margin-top:4px;
  font-style:normal;font-family:var(--f-body);font-size:12.5px;font-weight:400;
  color:var(--ink-soft);letter-spacing:0;
}
.hours-row.heute{background:var(--paper-3);box-shadow:inset 2px 0 0 var(--accent)}
.hours-row.heute .d{color:var(--accent)}
.hours-note{text-align:center;margin-top:16px}

/* Entfernungen: zwei Spalten, ab Tablet nur noch eine */
.anfahrt-liste{display:grid;grid-template-columns:1fr 1fr}
.anfahrt-liste .hours-row .t{font-size:16px}
.anfahrt-liste .hours-row:nth-last-child(-n+2){border-bottom:none}
@media (max-width:760px){
  .anfahrt-liste{grid-template-columns:1fr}
  .anfahrt-liste .hours-row:nth-last-child(2){border-bottom:1px solid var(--hair-2)}
}

/* ---------- Handy: Tag oben, Zeiten darunter ---------- */
@media (max-width:640px){
  .hours-row{
    flex-direction:column;align-items:flex-start;gap:7px;padding:15px 18px;
  }
  .hours-row .d{font-size:11px;letter-spacing:.18em}
  .hours-row .t{
    font-size:17px;text-align:left;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;
  }
  .hours-row .t .z + .z::before{content:none;margin:0}
  .hours-row.heute{box-shadow:inset 3px 0 0 var(--accent)}

  /* Entfernungen bleiben zweispaltig — sonst wird die Liste sehr lang */
  .anfahrt-liste .hours-row{
    flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;
  }
  .anfahrt-liste .hours-row .d{flex:1 1 auto}
  .anfahrt-liste .hours-row .t{
    font-size:15px;text-align:right;align-items:flex-end;flex:0 0 auto;
  }
  .anfahrt-liste .hours-row .t em{text-align:right;font-size:12px}
}

/* ---------- Startbereich ---------- */
.hero{position:relative;background:var(--paper);border-bottom:1px solid var(--hair-2)}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:96px 26px 104px}
.hero-logo{width:clamp(168px,19vw,238px);border-radius:50%;margin-bottom:44px;box-shadow:var(--shadow-lift)}
.hero h1{font-size:clamp(38px,6.6vw,76px);max-width:15ch;letter-spacing:-.035em;line-height:1.02;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent);font-weight:800}
.hero-rule{width:1px;height:56px;background:var(--hair);margin:36px auto 0}
.hero-sub{
  margin-top:34px;max-width:46ch;font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-soft);
  line-height:1.72;font-weight:400;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:42px}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:0;justify-content:center;margin-top:56px;
  border-top:1px solid var(--hair-2);padding-top:30px;width:100%;max-width:760px;
}
.hero-meta div{flex:1 1 180px;padding:0 20px;border-left:1px solid var(--hair-2)}
.hero-meta div:first-child{border-left:none}
.hero-meta dt{
  font-family:var(--f-label);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.hero-meta dd{font-family:var(--f-display);font-weight:700;font-size:16.5px;color:var(--ink);letter-spacing:-.02em}

/* ---------- Abschnitte ---------- */
.sec{padding:104px 0}
.sec--tint{background:var(--paper-2)}
.sec--line{border-top:1px solid var(--hair-2)}
.sec-head{max-width:640px;margin-bottom:60px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;font-family:var(--f-label);font-size:10.5px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent)}
.sec-head.mid .eyebrow::before{display:none}
.sec-title{font-size:clamp(28px,4.1vw,46px);letter-spacing:-.032em;line-height:1.08;font-weight:800}
.sec-sub{margin-top:20px;font-size:17.5px;color:var(--ink-soft);max-width:56ch;line-height:1.72}
.sec-head.mid .sec-sub{margin-left:auto;margin-right:auto}

/* ---------- Raster & Karten ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:44px}
.grid-3>*,.grid-2>*,.foot-grid>*,.dish-list>*{min-width:0}
.card{background:var(--paper);padding:44px 36px;transition:background-color .3s ease}
.grid-3 .card:hover{background:var(--paper-3)}
.card h3{font-size:21px;margin-bottom:14px;letter-spacing:-.015em}
.card p{color:var(--ink-soft);font-size:16px;line-height:1.7}
.card .num{
  font-family:var(--f-label);font-size:10.5px;font-weight:500;letter-spacing:.24em;color:var(--accent);
  display:block;margin-bottom:18px;
}
.card-plain{background:var(--paper-3);border:1px solid var(--hair-2);padding:40px 36px;box-shadow:var(--shadow)}

/* ---------- Speisekarte ---------- */
.chips{display:flex;flex-wrap:wrap;gap:0;justify-content:center;margin-bottom:64px;border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.chips a{
  font-family:var(--f-label);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:18px 22px;color:var(--ink-soft);transition:color .25s;position:relative;
}
.chips a::after{content:"";position:absolute;left:22px;right:22px;bottom:14px;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .3s}
.chips a:hover{color:var(--ink)}
.chips a:hover::after{transform:scaleX(1)}

.course{margin-bottom:76px;scroll-margin-top:110px}
.course-head{display:flex;align-items:baseline;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--ink);margin-bottom:8px}
.course-head h2{font-size:clamp(21px,2.7vw,28px);letter-spacing:-.028em;font-weight:800}
.course-head .cnt{
  margin-left:auto;font-family:var(--f-label);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);text-align:right;
}
.dish-list{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.dish-item{
  padding:20px 0;border-bottom:1px solid var(--hair-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:22px;
}
.dish-item>span:first-child{flex:1 1 auto;min-width:0}
.dish-item .preis{
  flex:0 0 auto;text-align:right;white-space:nowrap;
  font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.015em;
}
.dish-item .preis em{
  display:block;font-style:normal;font-family:var(--f-body,inherit);
  font-size:12.5px;font-weight:400;color:var(--ink-soft);margin-top:4px;letter-spacing:0;
}
.dish-item b{
  font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--ink);
  display:block;letter-spacing:-.018em;
}
.dish-item small{display:block;font-size:15px;color:var(--ink-soft);margin-top:5px;line-height:1.6}

.notice-soon{
  border:1px solid var(--hair);border-left:2px solid var(--accent);
  padding:34px 38px;margin-top:16px;background:var(--paper-3);
}
.notice-soon h3{font-size:20px;margin-bottom:10px}
.notice-soon p{color:var(--ink-soft);font-size:16.5px}
.soon-list{display:flex;flex-wrap:wrap;gap:26px;margin-top:20px}
.soon-chip{
  font-family:var(--f-label);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:10px;
}
.soon-chip::before{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%}

/* ---------- Fragen (FAQ) ---------- */
.faq{border-top:1px solid var(--hair-2)}
.faq details{border-bottom:1px solid var(--hair-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:26px 44px 26px 0;position:relative;
  font-family:var(--f-display);font-size:18.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:34px;width:12px;height:12px;
  border-right:1px solid var(--ink-soft);border-bottom:1px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:38px}
.faq details p{padding:0 44px 28px 0;color:var(--ink-soft);font-size:16.5px;max-width:70ch}

/* ---------- Standort ---------- */
.info-list{border-top:1px solid var(--hair-2)}
.info-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--hair-2)}
.info-row .k{font-family:var(--f-label);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);flex:none}
.info-row .v{font-family:var(--f-display);font-weight:600;font-size:16.5px;color:var(--ink);text-align:right;letter-spacing:-.015em}
.addr-big{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,3.6vw,38px);line-height:1.22;letter-spacing:-.032em;color:var(--ink)}
.addr-big span{display:block;color:var(--ink-soft);font-size:.72em;margin-top:6px}
.map-visual{
  aspect-ratio:4/3;position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--hair-2);
}
.map-visual::before{
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--hair-2) 1px,transparent 1px),linear-gradient(90deg,var(--hair-2) 1px,transparent 1px);
  background-size:40px 40px;
}
.map-pin{position:relative;text-align:center;font-family:var(--f-label);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.map-pin svg{width:34px;height:34px;margin:0 auto 14px}

/* ---------- Formular ---------- */
.form-card{background:var(--paper-3);border:1px solid var(--hair-2);padding:44px 40px;box-shadow:var(--shadow)}
.field{margin-bottom:26px}
.field label{
  display:block;font-family:var(--f-label);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:11px;
}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--hair);color:var(--ink);
  font-family:var(--f-body);font-size:17px;padding:12px 2px;transition:border-color .25s;border-radius:0;
}
.field select{padding-right:20px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft);opacity:.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--accent);border-bottom-width:1px}
.field textarea{min-height:130px;resize:vertical}
.field.err input,.field.err textarea{border-bottom-color:var(--accent)}
.field .msg{display:none;font-family:var(--f-label);font-size:12.5px;letter-spacing:.04em;color:var(--accent);margin-top:9px}
.field.err .msg{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:14px;align-items:flex-start;font-family:var(--f-body);font-size:15.5px;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);line-height:1.62}
.consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--accent)}
.form-ok{
  display:none;align-items:flex-start;gap:14px;border-left:2px solid var(--olive);background:var(--paper-2);
  padding:20px 22px;margin-bottom:28px;font-size:16px;color:var(--ink-2);
}
.form-ok svg{width:20px;height:20px;flex:none;color:var(--olive);margin-top:3px}
.form-ok.show{display:flex}
.form-ok.fehler{border-left-color:var(--accent)}
.form-ok.fehler svg{color:var(--accent)}
.form-ok.sendet{opacity:.7}
.hint{font-size:14.5px;color:var(--ink-soft);margin-top:18px;line-height:1.65}

/* ---------- Hinweis-Meldung ---------- */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,150%);
  background:var(--ink);color:var(--paper);padding:18px 30px;border-radius:2px;
  font-family:var(--f-label);font-size:13.5px;letter-spacing:.06em;box-shadow:var(--shadow-lift);
  display:flex;align-items:center;gap:14px;z-index:200;max-width:calc(100vw - 36px);
  transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .3s;opacity:0;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast .em{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- Soziale Netzwerke ---------- */
.socials{display:flex;flex-wrap:wrap;gap:0}
.social{
  width:46px;height:46px;display:grid;place-items:center;color:var(--ink-soft);
  border:1px solid var(--hair-2);margin-left:-1px;transition:color .25s,border-color .25s,background-color .25s;
}
.social:first-child{margin-left:0}
.social:hover{color:var(--ink);border-color:var(--ink);background:var(--paper-3);position:relative;z-index:1}
.social svg{width:19px;height:19px}

/* ---------- Rechtstexte ---------- */
.legal h1{font-size:clamp(30px,5vw,44px);margin-bottom:12px;letter-spacing:-.022em}
.legal h2{font-size:clamp(19px,2.5vw,24px);margin:52px 0 16px;letter-spacing:-.016em}
.legal h3{font-family:var(--f-display);font-size:18px;margin:30px 0 10px}
.legal p,.legal li{font-size:16.5px;color:var(--ink-soft);line-height:1.78}
.legal p+p{margin-top:14px}
.legal ul{margin:16px 0 16px 22px}
.legal li{margin-bottom:9px}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.legal .lead{font-size:18px;color:var(--ink-2);margin-bottom:8px}
.legal address{font-style:normal;font-size:17px;color:var(--ink-2);line-height:1.9}
.legal address strong{color:var(--ink)}
.legal .updated{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:52px;padding-top:24px;border-top:1px solid var(--hair-2)}
.fill{background:var(--accent-soft);border-bottom:1px solid var(--accent);padding:1px 6px;color:var(--accent-deep)}
html[data-theme="dark"] .fill{color:var(--accent)}
.notice{border-left:2px solid var(--accent);background:var(--paper-2);padding:24px 26px;margin:32px 0}
.notice p{color:var(--ink-2);font-size:16px}

/* ---------- Fußbereich ---------- */
.site-foot{background:var(--paper-2);border-top:1px solid var(--hair-2);padding:80px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:60px}
.foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.foot-brand img{width:50px;height:50px;border-radius:50%}
.site-foot p{color:var(--ink-soft);font-size:15.5px;max-width:32ch;line-height:1.72}
.site-foot h4{
  font-family:var(--f-label);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);margin-bottom:20px;
}
.site-foot ul{list-style:none}
.site-foot li{padding:7px 0}
.site-foot li a,.site-foot li{color:var(--ink-soft);font-size:15.5px;transition:color .25s}
.site-foot li a:hover{color:var(--accent)}
.region{border-top:1px solid var(--hair-2);padding-top:26px;margin-bottom:26px}
.region h5{font-family:var(--f-label);font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.region p{font-size:13.5px;color:var(--ink-soft);max-width:none;line-height:1.85;opacity:.86}
.foot-bottom{
  border-top:1px solid var(--hair-2);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.foot-bottom a:hover{color:var(--accent)}

/* ---------- Reaktionsfähig ---------- */
/* Sechs Menuepunkte plus Knoepfe brauchen Platz — darunter Klappmenue */
@media (max-width:1260px){
  .main-nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--hair);padding:6px 0 14px;display:none;box-shadow:var(--shadow-lift);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:18px 26px;font-size:14px;border-bottom:1px solid var(--hair-2)}
  .main-nav a::after{display:none}
  .main-nav a[aria-current="page"]{color:var(--accent)}
  .nav-toggle{display:grid}
  .head-social{display:none}   /* stehen unten in der Fußzeile */
}
@media (max-width:980px){
  .grid-3,.grid-2,.dish-list,.foot-grid{grid-template-columns:1fr}
  .grid-3{gap:1px}
  .dish-list{gap:0}
  .dish-item{gap:14px}
  .dish-item .preis{font-size:16px}
  .dish-item .preis em{font-size:11.5px}
  .sec{padding:68px 0}
  .hero-in{padding:60px 22px 68px}
  .hero-meta div{flex:1 1 100%;border-left:none;padding:16px 0;border-top:1px solid var(--hair-2)}
  .hero-meta div:first-child{border-top:none;padding-top:0}
  .course{margin-bottom:52px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .hero-cta .btn,.form-actions .btn{width:100%}
  .brand img{width:44px;height:44px}
  .brand-txt{font-size:18px}
  .card{padding:34px 26px}
  .form-card{padding:32px 24px}
  .course-head{flex-wrap:wrap;gap:8px}
  .course-head .cnt{margin-left:0;text-align:left;width:100%}
  .info-row{flex-direction:column;align-items:flex-start;gap:4px}
  .info-row .v{text-align:left}
  .chips a{padding:14px 15px}
  .toast{bottom:18px;padding:16px 22px;font-size:12.5px}
  .notice-soon{padding:28px 24px}
  .soon-list{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  /* auch Pseudo-Elemente ruhigstellen — der Stern allein erreicht sie nicht */
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ribbon .pill[data-oeffnung-status]::after{opacity:0}
}
@media print{
  .site-head,.ribbon,.site-foot,.toast,.chips{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .sec{padding:0}
}

/* =========================================================
   Ergänzungen: Bestell-Fenster, Teilen, Empfehlungen, Team
   ========================================================= */

/* ---------- Bestell-Fenster ---------- */
.modal-back{
  position:fixed;inset:0;z-index:300;background:rgba(12,14,16,.72);
  backdrop-filter:blur(6px);display:grid;place-items:center;padding:22px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.modal-back.open{opacity:1;visibility:visible}
.modal{
  background:var(--paper);width:100%;max-width:520px;position:relative;
  border:1px solid var(--hair);box-shadow:0 40px 90px rgba(0,0,0,.4);
  transform:translateY(26px) scale(.97);transition:transform .4s cubic-bezier(.2,.9,.25,1);
  max-height:calc(100vh - 44px);overflow-y:auto;
}
.modal-back.open .modal{transform:none}
.modal-top{background:var(--ink);padding:34px 34px 30px;text-align:center;position:relative}
html[data-theme="dark"] .modal-top{background:var(--paper-3);border-bottom:1px solid var(--hair)}
.modal-top img{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.modal-top .kicker{
  font-family:var(--f-label);font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.modal-top h2{color:var(--paper);font-size:clamp(24px,4.4vw,31px);letter-spacing:-.03em;font-weight:800}
html[data-theme="dark"] .modal-top h2{color:var(--ink)}
.modal-body{padding:30px 34px 34px}
.modal-body>p{color:var(--ink-soft);font-size:16.5px;line-height:1.7}
.modal-opts{margin:24px 0 6px;border-top:1px solid var(--hair-2)}
.modal-opt{display:flex;align-items:flex-start;gap:15px;padding:18px 0;border-bottom:1px solid var(--hair-2)}
.modal-opt svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--ink-soft)}
.modal-opt b{display:block;font-family:var(--f-display);font-weight:700;font-size:16.5px;color:var(--ink);letter-spacing:-.018em}
.modal-opt span{display:block;font-size:15px;color:var(--ink-soft);margin-top:3px;line-height:1.55}
.modal-opt .status{
  margin-left:auto;flex:none;font-family:var(--f-label);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 9px;white-space:nowrap;
}
.modal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.modal-actions .btn{flex:1 1 190px}
.modal-close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.12);border:none;color:var(--paper);cursor:pointer;display:grid;place-items:center;
  transition:background-color .25s;
}
.modal-close:hover{background:rgba(255,255,255,.24)}
.modal-close svg{width:18px;height:18px}
html[data-theme="dark"] .modal-close{background:var(--hair);color:var(--ink)}

/* ---------- Teilen ---------- */
.share{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:center;
  border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);padding:30px 0;margin-top:12px;
}
.share p{
  font-family:var(--f-label);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-right:4px;
}
.btn-wa{
  display:inline-flex;align-items:center;gap:11px;background:#25D366;color:#0B2E18;border:none;cursor:pointer;
  font-family:var(--f-label);font-weight:600;font-size:14px;letter-spacing:.06em;padding:14px 24px;border-radius:2px;
  transition:transform .25s ease,filter .25s ease;
}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-wa svg{width:19px;height:19px}
.btn-copy{
  display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--hair);
  color:var(--ink);cursor:pointer;font-family:var(--f-label);font-weight:500;font-size:14px;letter-spacing:.06em;
  padding:14px 22px;border-radius:2px;transition:border-color .25s,color .25s;
}
.btn-copy:hover{border-color:var(--ink)}
.btn-copy svg{width:17px;height:17px}

/* ---------- Empfehlungen ---------- */
.tip{
  display:inline-block;font-family:var(--f-label);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:3px 8px;
  margin-left:10px;vertical-align:2px;
}
.tip--soon{color:var(--ink-soft);border-color:var(--hair)}

.feature{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)}
.feature>*{min-width:0}
.feature article{background:var(--paper);padding:44px 38px}
.feature article:hover{background:var(--paper-3)}
.feature .lbl{
  font-family:var(--f-label);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:16px;
}
.feature h3{font-size:24px;margin-bottom:12px;letter-spacing:-.028em}
.feature p{color:var(--ink-soft);font-size:16px;line-height:1.7}

/* ---------- Motto ---------- */
.motto{text-align:center;padding:14px 0}
.motto p{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(30px,5.6vw,60px);color:var(--ink);
}
.motto p span{display:block}
.motto p .accent{color:var(--accent)}

/* ---------- Team ---------- */
.team-quote{
  border-left:2px solid var(--accent);padding:6px 0 6px 30px;margin:34px 0 0;
  font-family:var(--f-display);font-weight:600;font-size:clamp(19px,2.4vw,24px);
  line-height:1.45;letter-spacing:-.022em;color:var(--ink);
}
.team-quote cite{
  display:block;font-family:var(--f-label);font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:16px;
}

/* ---------- Stellenangebot ---------- */
.job-card{background:var(--paper-3);border:1px solid var(--hair-2);padding:44px 40px;box-shadow:var(--shadow)}
.job-card .badge{
  display:inline-block;font-family:var(--f-label);font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;background:var(--accent);color:#fff;padding:6px 13px;margin-bottom:22px;
}
.job-list{list-style:none;margin:22px 0 0}
.job-list li{padding:13px 0 13px 28px;border-bottom:1px solid var(--hair-2);position:relative;color:var(--ink-2);font-size:16.5px}
.job-list li::before{
  content:"";position:absolute;left:2px;top:22px;width:9px;height:2px;background:var(--accent);
}
.job-list li:last-child{border-bottom:none}

@media (max-width:980px){
  .feature{grid-template-columns:1fr}
}
@media (max-width:560px){
  .modal-top{padding:28px 24px 24px}
  .modal-body{padding:24px 24px 28px}
  .modal-actions .btn{flex:1 1 100%}
  .share{gap:10px;padding:24px 0}
  .btn-wa,.btn-copy{flex:1 1 100%;justify-content:center}
  .feature article{padding:32px 24px}
  .job-card{padding:32px 24px}
  .team-quote{padding-left:20px}
}


/* ---------- Einzugsgebiet ---------- */
.reach{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)}
.reach>*{min-width:0;background:var(--paper);padding:30px 26px}
.reach h3{
  font-family:var(--f-label);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.reach p{color:var(--ink-soft);font-size:15.5px;line-height:1.75}
@media (max-width:980px){ .reach{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .reach{grid-template-columns:1fr} .reach>*{padding:24px 22px} }

/* ---------- Netzwerk ---------- */
.network{border-top:1px solid var(--hair-2);padding-top:30px;margin-bottom:28px}
.network h5{
  font-family:var(--f-label);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:16px;
}
.network ul{list-style:none;display:flex;flex-wrap:wrap;gap:0}
.network li{margin:0}
.network a{
  display:inline-block;font-size:14.5px;color:var(--ink-soft);padding:6px 18px 6px 0;margin-right:18px;
  border-right:1px solid var(--hair-2);transition:color .25s;
}
.network li:last-child a{border-right:none;margin-right:0}
.network a:hover{color:var(--accent)}
@media (max-width:560px){
  .network ul{flex-direction:column}
  .network a{border-right:none;padding:8px 0;margin-right:0}
}

/* ---------- Herzlich willkommen ---------- */
.welcome{background:var(--paper-2);border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.welcome-in{max-width:760px;margin:0 auto;text-align:center;padding:84px 26px}
.welcome .greet{
  font-family:var(--f-label);font-size:11px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;
  color:var(--accent);margin-bottom:26px;
}
.welcome h2{font-size:clamp(30px,5vw,54px);letter-spacing:-.036em;line-height:1.06;font-weight:800}
.welcome .sig-rule{width:1px;height:44px;background:var(--hair);margin:34px auto}
.welcome p{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-soft);line-height:1.78;margin-bottom:18px}
.welcome p.close{color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:clamp(17px,2vw,20px);letter-spacing:-.022em;margin-top:30px}
.welcome .who{
  font-family:var(--f-label);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:10px;
}

/* ---------- Gerichte-Seiten ---------- */
.dish-hero{text-align:center;padding:78px 0 0}
.dish-hero .eyebrow{justify-content:center}
.dish-hero h1{font-size:clamp(34px,5.6vw,62px);letter-spacing:-.036em;font-weight:800;max-width:16ch;margin:0 auto}
.dish-hero p{max-width:52ch;margin:26px auto 0;font-size:clamp(17px,1.9vw,19px);color:var(--ink-soft);line-height:1.75}
.compo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);margin-top:12px}
.compo>*{min-width:0;background:var(--paper);padding:30px 26px}
.compo h3{font-size:18px;margin-bottom:8px;letter-spacing:-.022em}
.compo p{color:var(--ink-soft);font-size:15.5px;line-height:1.65}
.compo .n{font-family:var(--f-label);font-size:10px;font-weight:600;letter-spacing:.24em;color:var(--accent);display:block;margin-bottom:12px}
@media (max-width:980px){ .compo{grid-template-columns:1fr} }

/* ---------- Hajo, der Assistent ---------- */
.hajo-btn{
  position:fixed;right:22px;bottom:22px;z-index:210;display:inline-flex;align-items:center;gap:11px;
  background:var(--ink);color:var(--paper);border:none;cursor:pointer;padding:14px 20px 14px 15px;border-radius:999px;
  font-family:var(--f-label);font-weight:600;font-size:14px;letter-spacing:.04em;box-shadow:var(--shadow-lift);
  transition:transform .25s ease,background-color .25s;
}
.hajo-btn:hover{transform:translateY(-3px)}
.hajo-btn .av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover}
.hajo-btn.hide{display:none}

.hajo{
  position:fixed;right:22px;bottom:22px;z-index:220;width:min(400px,calc(100vw - 32px));
  height:min(580px,calc(100vh - 44px));background:var(--paper);border:1px solid var(--hair);
  box-shadow:0 30px 80px rgba(0,0,0,.32);display:none;flex-direction:column;overflow:hidden;
}
.hajo-log{min-height:0}
.hajo.open{display:flex}
.hajo-top{background:var(--ink);color:var(--paper);padding:16px 18px;display:flex;align-items:center;gap:13px;flex:none}
html[data-theme="dark"] .hajo-top{background:var(--paper-3);color:var(--ink);border-bottom:1px solid var(--hair)}
.hajo-top img{width:38px;height:38px;border-radius:50%;flex:none}
.hajo-top b{display:block;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.02em}
.hajo-top span{display:block;font-size:12px;opacity:.72;margin-top:1px}
.hajo-top .x{
  margin-left:auto;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);border:none;
  color:inherit;cursor:pointer;display:grid;place-items:center;flex:none;
}
.hajo-top .x:hover{background:rgba(255,255,255,.26)}
html[data-theme="dark"] .hajo-top .x{background:var(--hair)}
.hajo-top .x svg{width:16px;height:16px}

.hajo-log{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px;background:var(--paper-2)}
.msg{max-width:84%;padding:13px 16px;font-size:15.5px;line-height:1.6}
.msg.bot{background:var(--paper);border:1px solid var(--hair-2);align-self:flex-start;color:var(--ink-2)}
.msg.me{background:var(--ink);color:var(--paper);align-self:flex-end}
html[data-theme="dark"] .msg.me{background:var(--accent);color:#fff}
.msg a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.msg.bot b{color:var(--ink)}

.hajo-tips{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 14px;background:var(--paper-2);flex:none}
.hajo-tips button{
  background:var(--paper);border:1px solid var(--hair);color:var(--ink-2);cursor:pointer;
  font-family:var(--f-body);font-size:13.5px;padding:8px 13px;border-radius:999px;transition:border-color .2s,color .2s;
}
.hajo-tips button:hover{border-color:var(--accent);color:var(--accent)}

.hajo-form{display:flex;gap:0;border-top:1px solid var(--hair-2);flex:none;background:var(--paper)}
.hajo-form input{
  flex:1;border:none;background:transparent;padding:17px 18px;font-family:var(--f-body);font-size:15.5px;color:var(--ink);
}
.hajo-form input:focus{outline:none}
.hajo-form button{
  border:none;background:var(--ink);color:var(--paper);cursor:pointer;padding:0 20px;display:grid;place-items:center;
  transition:background-color .25s;
}
.hajo-form button:hover{background:var(--accent)}
.hajo-form button svg{width:18px;height:18px}
.hajo-note{font-size:11.5px;color:var(--ink-soft);text-align:center;padding:8px 14px 10px;background:var(--paper);flex:none;line-height:1.4}
.hajo-note a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;transition:color .25s}
.hajo-note a:hover{color:var(--accent)}

@media (max-width:768px){
  .hajo{
    right:0;left:0;top:0;bottom:0;width:100%;border:none;border-radius:0;
    height:100vh;                 /* Rueckfall fuer aeltere Browser */
    height:-webkit-fill-available;/* Safari auf iPhone */
    height:100dvh;                /* moderne Browser */
    max-height:none;
  }
  .hajo.open{display:flex}
  .hajo-top{padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .hajo-log{padding-left:calc(18px + env(safe-area-inset-left,0px));padding-right:calc(18px + env(safe-area-inset-right,0px))}
  .hajo-tips{padding-left:calc(18px + env(safe-area-inset-left,0px));padding-right:calc(18px + env(safe-area-inset-right,0px))}
  .hajo-note{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .hajo-form input{font-size:16px}  /* verhindert das Zoomen auf dem iPhone */
  .hajo-btn{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:12px 17px 12px 13px;font-size:13.5px}
  body.hajo-offen{overflow:hidden;position:fixed;width:100%}
}

/* Zustand: verbindet / online */
.hajo-top .dot{background:var(--ink-soft);transition:background-color .4s}
.hajo-top .dot.online{background:#4CBE7C}
.hajo-top .status-txt{opacity:.72}

/* ---------- Hajo: Tipp-Anzeige & Feinschliff ---------- */
.msg.typing{display:flex;gap:5px;align-items:center;padding:15px 16px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);opacity:.5;animation:blip 1.3s infinite}
.msg.typing i:nth-child(2){animation-delay:.18s}
.msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes blip{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}
.hajo-top .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}
.msg.bot ul{margin:8px 0 0 18px;padding:0}
.msg.bot li{margin-bottom:4px;font-size:15px}

/* ---------- Aushängeschild (Taxiteller) ---------- */
.hype{background:var(--ink);color:var(--paper);border-top:1px solid var(--hair-2)}
html[data-theme="dark"] .hype{background:var(--paper-3)}
.hype-in{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.hype-text{padding:80px 60px 80px 0}
.hype .lbl{
  display:inline-flex;align-items:center;gap:11px;font-family:var(--f-label);font-size:10.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;
}
.hype .lbl::before{content:"";width:24px;height:1px;background:var(--accent)}
.hype h2{color:var(--paper);font-size:clamp(32px,4.6vw,52px);letter-spacing:-.036em;font-weight:800}
html[data-theme="dark"] .hype h2{color:var(--ink)}
.hype p{color:rgba(242,239,233,.68);font-size:17.5px;line-height:1.72;margin-top:22px;max-width:44ch}
html[data-theme="dark"] .hype p{color:var(--ink-soft)}
.hype-parts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;border-top:1px solid rgba(242,239,233,.16)}
html[data-theme="dark"] .hype-parts{border-color:var(--hair)}
.hype-parts li{
  padding:15px 0;border-bottom:1px solid rgba(242,239,233,.16);font-family:var(--f-display);font-weight:700;
  font-size:16.5px;letter-spacing:-.018em;color:var(--paper);display:flex;align-items:center;gap:12px;padding-right:20px;
}
html[data-theme="dark"] .hype-parts li{color:var(--ink);border-color:var(--hair)}
.hype-parts li::before{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%;flex:none}
.hype-side{
  background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 40px;color:#fff;
}
.hype-side .big{
  font-family:var(--f-display);font-weight:800;font-size:clamp(46px,7vw,86px);letter-spacing:-.05em;line-height:.95;
}
.hype-side .small{
  font-family:var(--f-label);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  margin-top:20px;opacity:.9;
}
.hype-side .line{width:40px;height:1px;background:rgba(255,255,255,.5);margin:26px 0}
.hype-side p{color:rgba(255,255,255,.9);font-size:16px;max-width:26ch;margin:0}
@media (max-width:980px){
  .hype-in{grid-template-columns:1fr}
  .hype-text{padding:60px 0 50px}
  .hype-side{padding:52px 30px}
  .hype-parts{grid-template-columns:1fr}
}

/* ---------- Für die Kleinen ---------- */
.kids{
  border:1px solid var(--hair);border-left:2px solid var(--accent);
  background:var(--paper-3);padding:32px 36px;margin-top:8px;
}
.kids-lbl{
  display:block;font-family:var(--f-label);font-size:10px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.kids h3{font-size:22px;margin-bottom:8px;letter-spacing:-.026em}
.kids p{color:var(--ink-soft);font-size:16.5px;max-width:56ch}

/* ---------- Verden-Slogan ---------- */
.verden{background:var(--paper-2);border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.verden-in{max-width:900px;margin:0 auto;padding:88px 26px;text-align:center}
.verden .stadt{
  font-family:var(--f-display);font-weight:800;font-size:clamp(52px,11vw,124px);letter-spacing:-.06em;
  line-height:.9;color:var(--ink);
}
.verden .stadt span{color:var(--accent)}
.verden .unter{
  font-family:var(--f-label);font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:20px;
}
.verden p.txt{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-soft);line-height:1.75;margin:34px auto 0;max-width:52ch}

/* ---------- Formular-Sperre ---------- */
.form-locked{position:relative}
.form-hint{
  border:1px solid var(--hair);border-left:2px solid var(--accent);background:var(--paper-2);
  padding:22px 24px;margin-bottom:28px;
}
.form-hint b{display:block;font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:6px;letter-spacing:-.02em}
.form-hint p{color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.form-hint button{
  margin-top:16px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;
  font-family:var(--f-label);font-weight:500;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 24px;border-radius:2px;transition:background-color .25s;
}
.form-hint button:hover{background:var(--accent)}
.form-locked .field input,.form-locked .field textarea,.form-locked .field select{cursor:pointer;opacity:.62}
.form-locked .form-actions .btn{opacity:.62}
@media (max-width:560px){ .kids{padding:26px 22px} .verden-in{padding:60px 20px} }

/* ---------- Kopfbereich schrumpft beim Scrollen (Desktop) ---------- */
@media (min-width:981px){
  .site-head{transition:background-color .3s, box-shadow .3s}
  .head-in{transition:min-height .3s cubic-bezier(.2,.8,.2,1)}
  .brand img{transition:width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1)}
  .brand-txt{transition:font-size .3s cubic-bezier(.2,.8,.2,1)}
  .brand-txt span{transition:font-size .3s, margin-top .3s, opacity .25s}
  .main-nav a{transition:padding .3s, color .25s, font-size .3s}

  .site-head.shrunk{box-shadow:0 1px 0 var(--hair-2)}
  .site-head.shrunk .head-in{min-height:62px}
  .site-head.shrunk .brand img{width:38px;height:38px}
  .site-head.shrunk .brand-txt{font-size:16px}
  .site-head.shrunk .brand-txt span{font-size:0;margin-top:0;opacity:0}
  .site-head.shrunk .main-nav a{padding-top:8px;padding-bottom:8px;font-size:12.5px}
  .site-head.shrunk .icon-btn{width:36px;height:36px}
  .site-head.shrunk .icon-btn svg{width:17px;height:17px}
}

/* ---------- Wie früher ---------- */
.hero .kicker-top{
  display:inline-flex;align-items:center;gap:12px;font-family:var(--f-label);font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:24px;
}
.hero .kicker-top::before,.hero .kicker-top::after{content:"";width:22px;height:1px;background:var(--accent)}

.frueher{background:var(--ink);color:var(--paper);border-top:1px solid var(--hair-2)}
html[data-theme="dark"] .frueher{background:var(--paper-3)}
.frueher-in{padding:96px 26px;max-width:1000px;margin:0 auto}
.frueher .lbl{
  display:block;text-align:center;font-family:var(--f-label);font-size:10.5px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:24px;
}
.frueher h2{
  text-align:center;color:var(--paper);font-size:clamp(30px,5.4vw,58px);letter-spacing:-.04em;
  line-height:1.04;font-weight:800;
}
html[data-theme="dark"] .frueher h2{color:var(--ink)}
.frueher h2 span{display:block;color:var(--accent)}
.frueher .intro{
  text-align:center;color:rgba(242,239,233,.7);font-size:clamp(17px,1.9vw,19.5px);line-height:1.75;
  max-width:54ch;margin:32px auto 0;
}
html[data-theme="dark"] .frueher .intro{color:var(--ink-soft)}
.frueher-liste{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;
  border-top:1px solid rgba(242,239,233,.16);
}
html[data-theme="dark"] .frueher-liste{border-color:var(--hair)}
.frueher-liste>*{min-width:0;padding:34px 28px 34px 0;border-bottom:1px solid rgba(242,239,233,.16)}
html[data-theme="dark"] .frueher-liste>*{border-color:var(--hair)}
.frueher-liste h3{color:var(--paper);font-size:19px;margin-bottom:10px;letter-spacing:-.024em}
html[data-theme="dark"] .frueher-liste h3{color:var(--ink)}
.frueher-liste p{color:rgba(242,239,233,.62);font-size:15.5px;line-height:1.68}
html[data-theme="dark"] .frueher-liste p{color:var(--ink-soft)}
@media (max-width:980px){
  .frueher-in{padding:64px 22px}
  .frueher-liste{grid-template-columns:1fr;margin-top:40px}
  .frueher-liste>*{padding:26px 0}
}

/* ---------- Handy: Logo etwas tiefer ---------- */
@media (max-width:560px){
  .hero-in{padding-top:52px}
  .hero-logo{margin-bottom:32px}
}

/* ---------- Anfahrtsskizze ---------- */
:root{
  --k-grund:#F4F1E9;
  --k-block:#E6E1D5;
  --k-strasse:#FFFFFF;
  --k-mittel:#CFC9BB;
  --k-wasser:#D8E3E0;
  --k-park:#DFD7C5;
  --k-haus:#C43F22;
  --k-pin:#C43F22;
}
html[data-theme="dark"]{
  --k-grund:#1B2023;
  --k-block:#23292D;
  --k-strasse:#2E353A;
  --k-mittel:#3D454B;
  --k-wasser:#232F31;
  --k-park:#2A3035;
  --k-haus:#E8674A;
  --k-pin:#E8674A;
}
.karte{margin:0;border:1px solid var(--hair-2);overflow:hidden;background:var(--k-grund)}
.karte svg{display:block;width:100%;height:auto}
.karte text{font-family:var(--f-label);fill:var(--ink-soft)}
.k-str{font-size:15px;font-weight:600;letter-spacing:.14em;text-anchor:middle;fill:var(--ink-soft)}
.k-str-q{font-size:11px;font-weight:500;letter-spacing:.14em;text-anchor:middle;fill:var(--ink-soft);opacity:.75}
.k-haus-t{font-size:14px;font-weight:700;letter-spacing:.1em;text-anchor:middle;fill:#fff}
.k-haus-n{font-size:11px;font-weight:500;letter-spacing:.06em;text-anchor:middle;fill:rgba(255,255,255,.88)}
.k-park-t{font-size:19px;font-weight:700;text-anchor:middle;fill:var(--ink-soft)}
.k-fluss{font-size:12px;font-weight:500;letter-spacing:.18em;fill:var(--ink-soft);opacity:.7}
.k-nord{font-size:10px;font-weight:700;text-anchor:middle;fill:var(--ink-soft)}
.karte-hinweis{font-size:13.5px;color:var(--ink-soft);margin-top:12px;font-style:italic}

/* ---------- Hinweisband: mehr Luft auf dem Handy ---------- */
@media (max-width:768px){
  .ribbon-in{padding:20px 22px;gap:10px;line-height:1.5}
  .ribbon .pill{margin-bottom:2px}
}

/* ---------- Kopfzeile: Aktionsknöpfe ---------- */
.head-cta{display:flex;align-items:center;gap:8px}
.btn-tel{
  width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--hair);background:transparent;
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s,color .25s,background-color .25s;
}
.btn-tel:hover{border-color:var(--accent);color:var(--accent)}
.btn-tel svg{width:19px;height:19px}
.btn-vor{
  display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;border:1px solid var(--accent);
  cursor:pointer;font-family:var(--f-label);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:13px 20px;border-radius:2px;white-space:nowrap;
  transition:background-color .25s,transform .2s;
}
.btn-vor:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-1px)}
.btn-vor svg{width:16px;height:16px}
.site-head.shrunk .btn-vor{padding:10px 16px;font-size:11.5px}
.site-head.shrunk .btn-tel{width:36px;height:36px}
.site-head.shrunk .btn-tel svg{width:17px;height:17px}
.btn-vor,.btn-tel{transition:padding .3s,width .3s,height .3s,background-color .25s,border-color .25s,color .25s}

.btn-vor .lang{display:none}
@media (max-width:980px){
  .head-cta{order:2}
  .btn-vor{padding:11px 15px;font-size:11.5px;letter-spacing:.06em}
}
@media (max-width:460px){
  /* Auf schmalen Handys nur das Symbol, damit alles in eine Zeile passt */
  .btn-vor{width:42px;height:42px;padding:0;border-radius:50%;justify-content:center}
  .btn-vor span{display:none}
  .btn-vor svg{width:19px;height:19px}
  .head-in{gap:9px}
  .head-cta{gap:6px}
}

/* Sehr schmale Handys (360 px und darunter): Kopfzeile passte bisher
   nicht in eine Zeile — Logo, Schrift und Knoepfe eine Stufe kleiner. */
@media (max-width:400px){
  .wrap{padding-left:17px;padding-right:17px}
  .head-in{gap:7px;min-height:74px}
  .brand{gap:10px;padding-right:4px}
  .brand img{width:42px;height:42px}
  .brand-txt{font-size:16px}
  .brand-txt span{font-size:8.5px;letter-spacing:.26em;margin-top:4px}
  .btn-vor,.btn-tel{width:38px;height:38px}
  .btn-vor svg,.btn-tel svg{width:17px;height:17px}
  .icon-btn{width:38px;height:38px}
  .head-cta{gap:5px}
  .head-tools{gap:4px}
}

/* Aeltere Kleingeraete (320 px): Zusatzzeile im Schriftzug weg,
   das Logo sagt ohnehin schon, wo man ist. */
@media (max-width:340px){
  .wrap{padding-left:14px;padding-right:14px}
  .brand img{width:38px;height:38px}
  .brand-txt{font-size:15px}
  .brand-txt span{display:none}
  .btn-vor,.btn-tel,.icon-btn{width:36px;height:36px}
}

/* ---------- Chat-Symbol statt Textknopf ---------- */
.hajo-btn{
  right:20px;bottom:20px;width:50px;height:50px;padding:0;border-radius:50%;
  display:grid;place-items:center;gap:0;position:fixed;z-index:210;
}
.hajo-btn .av{display:none}
.hajo-btn .beschriftung{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--ink);color:var(--paper);font-family:var(--f-label);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;padding:9px 14px;border-radius:2px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:var(--shadow);
}
.hajo-btn:hover .beschriftung,.hajo-btn:focus-visible .beschriftung{opacity:1;transform:translateY(-50%) translateX(0)}
.hajo-btn svg.symbol{width:22px;height:22px}
.hajo-btn .puls{
  position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);border:2px solid var(--ink);transition:background-color .6s ease;
}
.hajo-btn .puls.online{background:#4CBE7C}
html[data-theme="dark"] .hajo-btn .puls{border-color:var(--paper-3)}
@media (max-width:768px){
  .hajo-btn{width:48px;height:48px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .hajo-btn svg.symbol{width:21px;height:21px}
  .hajo-btn .beschriftung{display:none}
}

/* ---------- Routenplaner ---------- */
.route-box{
  background:var(--ink);color:var(--paper);padding:44px 40px;
  border:1px solid var(--hair-2);
}
html[data-theme="dark"] .route-box{background:var(--paper-3)}
.route-lbl{
  display:block;font-family:var(--f-label);font-size:10.5px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);margin-bottom:18px;
}
.route-box h2{color:var(--paper);font-size:clamp(24px,3.2vw,32px);letter-spacing:-.03em;margin-bottom:14px}
html[data-theme="dark"] .route-box h2{color:var(--ink)}
.route-box p{color:rgba(242,239,233,.7);font-size:16.5px;line-height:1.7;max-width:40ch}
html[data-theme="dark"] .route-box p{color:var(--ink-soft)}
.route-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.route-box .btn--line{color:var(--paper);border-color:rgba(242,239,233,.28)}
.route-box .btn--line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
html[data-theme="dark"] .route-box .btn--line{color:var(--ink);border-color:var(--hair)}
html[data-theme="dark"] .route-box .btn--line:hover{background:var(--ink);color:var(--paper)}
.route-hinweis{font-size:13.5px;color:rgba(242,239,233,.5)!important;margin-top:18px}
html[data-theme="dark"] .route-hinweis{color:var(--ink-soft)!important}
@media (max-width:560px){
  .route-box{padding:32px 24px}
  .route-btns .btn{width:100%}
}

/* ---------- Onlinebestellung (v33) ---------- */
.ribbon-cta{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent);color:#fff;
  font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 14px;border-radius:2px;
  transition:background-color .25s,transform .2s;
}

.ribbon-cta:hover{background:#fff;color:var(--ink);transform:translateY(-1px)}
html[data-theme="dark"] .ribbon-cta:hover{background:var(--paper);color:var(--ink)}

/* Die Zeile im Bestell-Fenster ist jetzt anklickbar */
a.modal-opt{color:inherit;transition:border-color .2s,background-color .2s}
a.modal-opt:hover{border-color:var(--accent)}

@media (max-width:640px){
  .ribbon-cta{width:100%;justify-content:center;padding:10px 14px;font-size:12px;margin-top:4px}
}

/* ---------- Bestellknopf neben dem Chat (v34) ---------- */
.best-btn{
  position:fixed;right:82px;bottom:20px;z-index:210;
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;text-decoration:none;
  box-shadow:var(--shadow-lift);
  transition:transform .25s ease,background-color .25s;
}
.best-btn:hover,.best-btn:focus-visible{background:var(--accent-deep);transform:translateY(-2px)}
.best-btn svg{width:23px;height:23px}
.best-btn .beschriftung{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--ink);color:var(--paper);font-family:var(--f-label);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;padding:9px 14px;border-radius:2px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:var(--shadow);
}
.best-btn:hover .beschriftung,.best-btn:focus-visible .beschriftung{
  opacity:1;transform:translateY(-50%) translateX(0);
}
@media (max-width:768px){
  .best-btn{width:48px;height:48px;right:72px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .best-btn svg{width:21px;height:21px}
  .best-btn .beschriftung{display:none}
}


/* Zeichen im Hinweisband (v34) */
.ribbon-cta svg{width:15px;height:15px;flex:none}



/* ---------- Willkommensbild der Speisekarte (v38) ---------- */
.karten-bild{
  margin:0 0 6px;overflow:hidden;background:var(--paper-3);
  aspect-ratio:21/7;position:relative;
}
.karten-bild img{
  width:100%;height:100%;object-fit:cover;object-position:center 48%;display:block;
}
/* Ein weicher Übergang zum Papier darunter, damit die Kante nicht hart wirkt */
.karten-bild::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to top,var(--paper),transparent);
  pointer-events:none;
}
@media (max-width:700px){ .karten-bild{aspect-ratio:16/10} }



/* ==========================================================
   Bestellaufruf (v41)
   Der farbige Block, der den Weg zum Vorbestellen zeigt.
   Bewusst kräftig — er soll beim Scrollen hängenbleiben.
   ========================================================== */
.aufruf{
  background:var(--accent);
  color:#fff;
  padding:70px 0 64px;
  position:relative;
  overflow:hidden;
}
/* Ein sanfter Verlauf, damit die Fläche nicht flach wirkt */
.aufruf::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(0,0,0,.16), transparent 55%);
}
.aufruf-in{position:relative;text-align:center;max-width:780px}

.aufruf-lbl{
  font-family:var(--f-label);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.82;margin-bottom:14px;
}
.aufruf h2{
  font-family:var(--f-display);font-size:clamp(30px,5.4vw,46px);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;color:#fff;margin-bottom:16px;
}
.aufruf-text{
  font-size:clamp(16px,2vw,18.5px);line-height:1.6;opacity:.92;
  max-width:52ch;margin:0 auto 40px;
}

.schritte{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:26px;margin:0 0 42px;text-align:left;
}
.schritte li{
  border-top:2px solid rgba(255,255,255,.28);padding-top:16px;
}
.schritte .nr{
  display:block;font-family:var(--f-display);font-size:26px;font-weight:800;
  opacity:.52;line-height:1;margin-bottom:8px;
}
.schritte b{display:block;font-size:17.5px;font-weight:800;margin-bottom:5px}
.schritte span:not(.nr){display:block;font-size:15px;line-height:1.55;opacity:.86}

.aufruf-knopf{
  display:inline-flex;align-items:center;gap:11px;
  background:#fff;color:var(--accent);text-decoration:none;
  padding:19px 34px;border-radius:2px;
  font-family:var(--f-label);font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.aufruf-knopf svg{width:21px;height:21px}
.aufruf-knopf:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.24)}

.aufruf-klein{margin-top:18px;font-size:14px;opacity:.8}

@media (max-width:760px){
  .aufruf{padding:52px 0 48px}
  .schritte{grid-template-columns:1fr;gap:20px;margin-bottom:34px}
  .schritte li{border-top:0;border-left:2px solid rgba(255,255,255,.28);
    padding:0 0 0 16px;display:grid;grid-template-columns:auto 1fr;
    column-gap:12px;align-items:baseline}
  .schritte .nr{grid-row:span 2;font-size:22px;margin:0}
  .aufruf-knopf{width:100%;justify-content:center;padding:19px 20px}
}
@media (prefers-reduced-motion:reduce){
  .aufruf-knopf{transition:none}
  .aufruf-knopf:hover{transform:none}
}


/* ==========================================================
   Mehr Farbe (v41)
   Kleine Akzente, damit die Seite warm wirkt statt nüchtern.
   ========================================================== */

/* Abschnittsüberschriften bekommen einen roten Strich darunter */
.sec > .wrap > h2::after,
.sec-head h2::after{
  content:"";display:block;width:44px;height:3px;background:var(--accent);
  margin-top:14px;border-radius:2px;
}
.sec--tint .sec-head h2::after{background:var(--accent)}

/* Die kleine Vorzeile in Rot statt Grau */
.sec-lbl,.greet,.lbl{color:var(--accent)}

/* Öffnungszeiten: heute hervorheben */
.zeiten-zeile.heute{
  background:var(--accent-soft);
  box-shadow:inset 3px 0 0 var(--accent);
}
.zeiten-zeile.heute b{color:var(--accent)}

/* Knöpfe in Vollfarbe bekommen mehr Tiefe */
.btn--solid,.cta--solid{
  box-shadow:0 6px 18px rgba(196,63,34,.22);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
.btn--solid:hover,.cta--solid:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(196,63,34,.3);
}

/* Aufzählungen mit rotem Punkt */
.vorteile li::before,.liste-punkt::before{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .btn--solid,.cta--solid{transition:none}
  .btn--solid:hover,.cta--solid:hover{transform:none}
}


/* Hinweis auf Gerichte, die es nur an bestimmten Tagen gibt (v42) */
.nurtags{
  color:var(--accent);font-weight:600;
}


/* ==========================================================
   Kleine Bildstreifen je Kategorie (v43)
   Drei Quadrate statt eines großen Bildes. Sie schweben beim
   Erscheinen sanft herein und zoomen langsam weiter — das gibt
   der Karte Leben, ohne vom Lesen abzulenken.
   ========================================================== */
.kurs-streifen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin:0 0 26px;max-width:540px;
}
.kurs-streifen:has(figure:nth-child(2):last-child){
  grid-template-columns:repeat(2,1fr);max-width:364px;
}
.kurs-streifen figure{
  margin:0;overflow:hidden;border-radius:3px;background:var(--paper-3);
  aspect-ratio:1/1;position:relative;
  animation:kachelRein .7s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:var(--verzug,0s);
}
@keyframes kachelRein{
  from{opacity:0;transform:translateY(10px) scale(.96)}
}
.kurs-streifen img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  display:block;
  animation:langsamZoom 22s ease-in-out infinite alternate;
  animation-delay:var(--verzug,0s);
}
@keyframes langsamZoom{
  from{transform:scale(1)}
  to{transform:scale(1.09)}
}
.kurs-streifen figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(196,63,34,.18),transparent 58%);
  opacity:0;transition:opacity .45s;
}
.kurs-streifen figure:hover::after{opacity:1}

@media (max-width:700px){
  .kurs-streifen{gap:6px;margin-bottom:20px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .kurs-streifen figure,.kurs-streifen img{animation:none}
}


/* ==========================================================
   Kopfbereich mit Foto (v44)
   Das Bild liegt hinter dem Text, dunkel abgedeckt. Der Kontrast
   zwischen dem warmen Foto und der harten Schrift gibt der Seite
   den Auftritt, den ein Imbiss verdient.
   ========================================================== */
.hero{position:relative;overflow:hidden;background:#14100E}

.hero-bild{position:absolute;inset:0;z-index:0}
.hero-bild img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  display:block;
  animation:heroZoom 26s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1.04)}to{transform:scale(1.13)}}

/* Zwei Verläufe: unten satt dunkel für die Schrift, oben ein Hauch */
.hero-bild::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(20,16,14,.42) 0%, rgba(20,16,14,.74) 46%,
                    rgba(20,16,14,.94) 100%),
    radial-gradient(120% 90% at 20% 15%, rgba(196,63,34,.26), transparent 62%);
}

.hero-in{
  position:relative;z-index:1;text-align:center;
  padding-top:clamp(56px,10vw,104px);
  padding-bottom:clamp(40px,7vw,72px);
}
.hero .hero-logo{
  width:clamp(88px,13vw,124px);height:auto;border-radius:50%;
  margin:0 auto 26px;display:block;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.hero .kicker-top{
  color:#fff;opacity:.72;letter-spacing:.24em;
}
.hero h1{
  color:#fff;
  font-size:clamp(38px,8.4vw,84px);line-height:.98;letter-spacing:-.035em;
  text-shadow:0 3px 26px rgba(0,0,0,.42);
}
.hero h1 em{color:var(--accent);font-style:normal}
.hero .hero-rule{background:var(--accent);opacity:1}
.hero .hero-sub{
  color:#fff;opacity:.9;max-width:54ch;margin-left:auto;margin-right:auto;
  text-shadow:0 2px 16px rgba(0,0,0,.42);
}
.hero .hero-cta{justify-content:center}

/* Heller Knopf neben dem roten */
.btn--hell{
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(6px);
}
.btn--hell:hover{background:rgba(255,255,255,.2)}

/* ---------- Laufband unter dem Kopfbereich ---------- */
.laufband{
  position:relative;z-index:1;
  background:var(--accent);color:#fff;overflow:hidden;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.18);
}
.laufband-in{
  display:flex;align-items:center;gap:18px;white-space:nowrap;
  width:max-content;
  animation:laufen 44s linear infinite;
}
.laufband span{
  font-family:var(--f-display);font-size:16px;font-weight:800;
  letter-spacing:.01em;text-transform:uppercase;
}
.laufband i{opacity:.55;font-style:normal;font-size:15px}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.laufband:hover .laufband-in{animation-play-state:paused}

/* ---------- Eckdaten auf Papier ---------- */
.sec--eck{padding-top:clamp(30px,4vw,44px);padding-bottom:clamp(30px,4vw,44px)}
.sec--eck .hero-meta{margin-top:0;border-top:0}

@media (prefers-reduced-motion:reduce){
  .hero-bild img{animation:none}
  .laufband-in{animation:none}
}


/* ==========================================================
   Gegen den zu glatten Eindruck (v44)
   Leichte Schieflagen, weiße Ränder wie bei abgezogenen Fotos,
   und eine Preisnotiz in Handschrift-Anmutung. Nichts davon ist
   perfekt ausgerichtet — genau das ist der Punkt.
   ========================================================== */

/* Die drei Bilder unter dem Kopfbereich wie hingelegt */
.bildband.drei figure:nth-child(1){transform:rotate(-1.1deg)}
.bildband.drei figure:nth-child(2){transform:rotate(.5deg) translateY(-6px)}
.bildband.drei figure:nth-child(3){transform:rotate(1.4deg)}
.bildband.drei figure{
  border:7px solid #fff;
  box-shadow:0 10px 26px rgba(20,16,14,.16);
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.bildband.drei figure:hover{transform:rotate(0) scale(1.02)}

/* Der Trenner bekommt einen weißen Rahmen */
.bildtrenner{border-top:6px solid var(--paper);border-bottom:6px solid var(--paper)}

/* Abschnittsüberschriften etwas kräftiger */
.sec-head h2,.welcome h2,.frueher h2{letter-spacing:-.035em}

/* Eine Notiz im Stil eines Aushangs */
.aushang{
  display:inline-block;background:#fff;
  border:1px solid var(--hair);
  padding:18px 24px;margin-top:26px;
  transform:rotate(-1.2deg);
  box-shadow:0 8px 22px rgba(20,16,14,.12);
  font-size:17px;line-height:1.55;
}
.aushang b{display:block;font-family:var(--f-display);font-size:19px;
  letter-spacing:-.02em;margin-bottom:4px}
.aushang .stift{color:var(--accent)}

@media (max-width:700px){
  .bildband.drei figure,.aushang{transform:none}
  .bildband.drei figure{border-width:5px}
}
@media (prefers-reduced-motion:reduce){
  .bildband.drei figure{transition:none}
  .bildband.drei figure:hover{transform:none}
}


/* ---------- Rangliste der beliebten Gerichte (v45) ---------- */
.beliebt .rangliste{list-style:none;margin:28px 0 30px;max-width:620px}
.beliebt .rangliste li{
  display:flex;align-items:baseline;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--hair);
}
.beliebt .rangliste li:first-child{border-top:2px solid var(--ink)}
.beliebt .rang{
  font-family:var(--f-display);font-size:34px;font-weight:800;
  color:var(--accent);line-height:1;min-width:38px;letter-spacing:-.04em;
}
.beliebt .was{
  flex:1;min-width:0;font-family:var(--f-display);font-size:clamp(19px,2.6vw,25px);
  font-weight:700;letter-spacing:-.02em;
}
.beliebt .rangliste li:first-child .was{color:var(--accent)}