:root{
  color-scheme:light;
  --ink:#1d1d1f;
  --muted:#6b6b70;
  --canvas:#faf8f6;
  --surface:#ffffff;
  --line:rgba(0,0,0,.1);
  --line-soft:rgba(0,0,0,.06);
  --accent:#ff6b35;
  --accent-dark:#e2551f;
  --accent-soft:#fff1ea;
  --success:#1f8a4c;
  --success-soft:#e9f7ef;
  --danger:#c4342b;
  --danger-soft:#fbeceb;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem)}
h2{font-size:1.3rem}
h3{font-size:1.05rem}
p{margin:.4em 0}
a{color:var(--accent-dark)}
button,input,select,textarea{font:inherit}

/* Topbar bewusst leicht statt als schwere, abgesetzte Kopfleiste: keine
   feste Höhe, wenig Innenabstand, nur eine Haarlinie (var(--line-soft),
   nicht die kräftigere var(--line)) als Trennung zum Inhalt — Logo und
   Nav sollen auf der Fläche "liegen", nicht in einer eigenen Box stecken. */
.kopf{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line-soft)}
.logo{display:inline-flex;align-items:center;min-height:40px;font-weight:800;font-size:1.1rem;text-decoration:none;color:var(--ink)}
.logo span{color:var(--accent)}
.hauptnav{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.hauptnav a{padding:8px 10px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none;color:var(--muted);border-radius:10px;font-weight:600;font-size:.9rem}
.hauptnav a.aktiv,.hauptnav a:hover{color:var(--ink);background:var(--line-soft)}
.hauptnav a.abmelden{color:var(--danger)}
.hauptnav a.button.klein{color:#fff;padding:8px 16px}

/* Hamburger-Umschalter — nur mobil sichtbar (siehe Media Query weiter
   unten). Als gezeichnete Balken statt Icon-Font/SVG-Sprite, im selben
   Stil wie der Mengen-Stepper (::before/::after statt Textzeichen). */
/*
 * :hover/:active auf dem generischen "button"-Grundstil ("button:hover")
 * ist wegen des zusätzlichen Element-Anteils in der Spezifität STÄRKER
 * als die einfache Klasse ".nav-umschalter" (0,1,1 schlägt 0,1,0) — ohne
 * die folgenden zwei Zeilen blitzte der Knopf beim Antippen/Fokussieren
 * kurz im vollen Akzent-Orange auf, obwohl "background:transparent"
 * direkt darüber steht. Genau das war die gemeldete "Farbe beim Antippen
 * nicht gut".
 */
.nav-umschalter{display:none;position:relative;width:40px;height:40px;padding:0;background:transparent;border:0;border-radius:8px;flex:0 0 auto}
.nav-umschalter:hover,.nav-umschalter:active,.nav-umschalter:focus-visible{background:var(--line-soft)}
.nav-umschalter span{position:absolute;left:9px;right:9px;top:19px;height:2px;background:var(--ink);border-radius:1px}
.nav-umschalter span::before,.nav-umschalter span::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:1px}
.nav-umschalter span::before{top:-7px}
.nav-umschalter span::after{top:7px}

.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}

main{width:min(100% - 32px,1080px);margin:0 auto;padding:24px 0 64px}
/* Breitere Variante nur für das Restaurant-Verzeichnis und die
   Partner-Seite (siehe index.php) — beide sind Raster-/Karten-Seiten, die
   die zusätzliche Breite sinnvoll füllen. Bestellungen, Speisekarte & Co.
   bestehen dagegen aus einspaltigen Listen/Zeilen (.artikel-zeile,
   .bestellung-karte, ...), die bei 1600px nur mit riesigen Lücken
   auseinandergerissen worden wären statt "voller" zu wirken — deshalb
   keine pauschale Änderung an main selbst. */
main.main-breit{width:min(100% - 48px,1600px)}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;background:var(--accent);color:#fff;text-decoration:none;border:0;border-radius:12px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s}
.button:hover{background:var(--accent-dark)}
.button:active{transform:scale(.98)}
.button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.button.ghost:hover{background:var(--line-soft)}
/* appearance:none — ohne das behalten manche mobilen Browser (v. a. iOS
   Safari) für einen deaktivierten <button> ein natives, plattformeigenes
   Aussehen mit eigener Innen-/Randberechnung, das eigene Breiten-/
   Höhenangaben ignoriert. Sichtbar wurde das am Mengen-Stepper: Der
   dauerhaft aktive Plus-Knopf übernahm die hier gesetzte Größe exakt, der
   anfangs deaktivierte Minus-Knopf blieb nativ gerendert und dadurch
   sichtbar größer — im Desktop-Chromium unauffällig, auf echten Telefonen
   nicht. Da hier ohnehin jeder Knopf vollständig eigenes Aussehen bekommt,
   ist der Reset gefahrlos für alle. */
button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;background:var(--accent);color:#fff;border:0;border-radius:12px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;appearance:none;-webkit-appearance:none;-moz-appearance:none}
button:hover{background:var(--accent-dark)}
button:active{transform:scale(.98)}
.gefahr-knopf{background:var(--danger)}
.gefahr-knopf:hover{background:#a32a22}
.link{background:none;color:var(--accent-dark);min-height:auto;padding:6px 2px;font-weight:600;text-decoration:underline}
.link:hover{background:none}
.link.gefahr{color:var(--danger)}

.flash{padding:12px 16px;border-radius:12px;margin:0 0 16px;font-weight:600}
.flash-ok{background:var(--success-soft);color:var(--success)}
.flash-fehler{background:var(--danger-soft);color:var(--danger)}

.hero{padding:40px 0 32px;border-bottom:1px solid var(--line)}
.hero p{color:var(--muted);max-width:60ch;font-size:1.05rem}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

.vergleich,.preise,.restaurants,.partner-ablauf,.partner-kontakt{padding:32px 0;border-bottom:1px solid var(--line)}
.vergleich-karten,.preis-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.vergleich-karte,.preis-karte{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.vergleich-karte.hervorgehoben{border-color:var(--accent);background:var(--accent-soft)}
.preis-karte .preis{font-size:1.4rem;font-weight:800;color:var(--accent-dark);margin:.2em 0}
.partner-kicker{color:var(--accent-dark)!important;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem!important}
.partner-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;padding:0;margin:20px 0 0;counter-reset:partner-schritt}
.partner-schritte li{counter-increment:partner-schritt;padding:20px;border-left:1px solid var(--line-soft)}
.partner-schritte li:first-child{border-left:0;padding-left:0}
.partner-schritte li::before{content:counter(partner-schritt);display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:12px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);font-weight:800}
.partner-schritte strong,.partner-schritte span{display:block}
.partner-schritte span{margin-top:5px;color:var(--muted)}
.preis-karte-extra{background:var(--accent-soft)}
.partner-kontakt{display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:0}
.partner-kontakt>div:first-child{max-width:60ch}

.restaurant-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:16px}
/* Eckiger statt stark abgerundet (16px→8px) und etwas knapperer
   Innenabstand der Karten — Rückmeldung: die Karten sollten kantiger
   wirken und insgesamt weniger Luft haben. */
.restaurant-karte{display:block;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink)}
.restaurant-karte:hover{border-color:var(--accent)}
.restaurant-karte-text{padding:12px 14px}
.restaurant-karte p{color:var(--muted);font-size:.92rem}
.restaurant-karte-bild{display:block;width:100%;height:130px;object-fit:cover;background:var(--canvas)}
.restaurant-karte-bild-platzhalter{display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--muted);background:linear-gradient(135deg,var(--accent-soft),var(--canvas))}
.kategorie-abzeichen{display:inline-block;margin:4px 0;padding:3px 10px;background:var(--accent-soft);color:var(--accent-dark);border-radius:999px;font-size:.76rem;font-weight:700}

/* Kopf des Restaurant-Verzeichnisses (Startseite): Suche + Kategorie-Filter,
   getrennt von der Werbe-Ansprache an Restaurants (Seite "partner").
   Anlehnung an gängige Lieferdienst-Apps (Uber Eats & Co.): eine große,
   durchgehend abgerundete Suchpille mit Lupe statt Textfeld + separatem
   Knopf, und Kategorien als Pillen-Reihe mit eigenem Symbol statt reinem
   Text. Deutlich mehr Luft zwischen Überschrift, Suche und Kategorien als
   vorher — das war die "keine Abstände"-Rückmeldung. */
.verzeichnis-kopf{padding:28px 0 24px}
.verzeichnis-kopf p{color:var(--muted);max-width:60ch}
.verzeichnis-suche{margin:22px 0 38px}
.suche-pille{display:flex;align-items:center;gap:8px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.suche-pille .suche-icon{margin-left:6px}
.suche-pille:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.suche-icon{flex:0 0 auto;color:var(--muted)}
.suche-pille input{flex:1;min-width:0;width:auto;border:0;background:transparent;padding:12px 0;min-height:auto}
.suche-pille input:focus{box-shadow:none}
/* Suchen-Knopf als Kreis statt als Rechteck mit Text — sitzt dadurch
   sichtbar IN der Pille statt wie ein zweites, separates Element daneben
   zu wirken (die frühere Rückmeldung "warum ein Suchen-Balken" bezog sich
   auf genau diesen Bruch im Erscheinungsbild, nicht auf den Knopf an
   sich — den gibt es jetzt wieder, nur eingebettet). */
.suche-knopf{flex:0 0 auto;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;border-radius:50%}
.suche-knopf svg{display:block}

/* Runder Icon-Knopf direkt in der Suchpille, links neben dem
   Such-Symbol — dezenter Rahmen statt vollem Akzent-Orange wie der
   Absenden-Knopf rechts, damit klar bleibt: das ist ein Zusatz zur
   Suche, nicht die Suche selbst. */
.standort-icon-knopf{flex:0 0 auto;width:40px;height:40px;min-height:40px;min-width:40px;padding:0;border-radius:50%;background:transparent;color:var(--accent-dark);border:1px solid var(--line)}
.standort-icon-knopf:hover,.standort-icon-knopf:active,.standort-icon-knopf:focus-visible{background:var(--accent-soft)}
.standort-icon-knopf svg{display:block}
#standort-hinweis{display:block;margin:8px 2px 0}
#standort-hinweis[hidden]{display:none}

.formular-seite{max-width:440px;margin:20px auto;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.formular-seite-breit{max-width:760px}
.formular-seite-breit h2{margin-top:1.6em;padding-top:1.2em;border-top:1px solid var(--line-soft);font-size:1.05rem}
.formular-seite-breit h2:first-of-type{margin-top:1em;padding-top:0;border-top:0}
.rechtstext{color:var(--muted);font-size:.94rem;line-height:1.65}
.rechtstext strong{color:var(--ink)}
.rechtstext a{color:var(--accent-dark)}
address.rechtstext{font-style:normal}
.formular-karte{padding:20px;margin:0 0 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px}

/* min-width:0 auf den direkten Kindern: Ohne das erzwingt das breiteste Kind
   einer Zeile (typischerweise die native Datei-Eingabe mit ihrem eigenen,
   nicht schrumpfbaren Mindestinhalt) die gemeinsame Grid-Spalte auf seine
   eigene Mindestbreite — und reißt damit ALLE anderen Felder derselben
   Spalte (auch in ganz anderen Zeilen) auf einem schmalen Bildschirm über
   den Rand hinaus, obwohl jedes Feld für sich width:100% hat. */
form{display:grid;gap:12px}
form>*{min-width:0}
.inline-formular{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.inline-formular input{flex:1;min-width:160px}
label{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
label>*{min-width:0}
.checkbox-zeile{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:40px}
/*
 * font-size hier ausdrücklich 16px (1rem), nicht "inherit" vom
 * umschließenden <label> (das läuft mit .88rem = 14px, siehe oben) —
 * genau DAS war die Ursache für den gemeldeten "Bildschirm zoomt beim
 * Antippen von 'Bestellung aufgeben' rein": iOS Safari zoomt beim
 * Fokussieren jedes Eingabefelds mit weniger als 16px Schriftgröße
 * automatisch hinein, z. B. wenn der Browser bei einem fehlenden
 * Pflichtfeld (Name/Telefon) automatisch dorthin springt. Betraf jedes
 * Formular der Anwendung, nicht nur das Bestellformular.
 */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input[type=datetime-local],input[type=time],select,textarea{
  width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fdfcfb;color:var(--ink);outline:0;font-size:16px;
}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--accent)}
.klein{font-size:.85rem;color:var(--muted)}
.warnung{color:var(--danger);font-weight:700}

.dashboard-kopf{padding:12px 0 20px;border-bottom:1px solid var(--line);margin-bottom:20px}

.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--accent);color:#fff;border-radius:999px;font-size:.72rem;font-weight:800;line-height:1}
/* [hidden] hat dieselbe Spezifität wie die Klasse oben — ohne diese Zeile
   gewinnt "display:inline-flex" dagegen und die Zahl bliebe sichtbar,
   obwohl keine offene Bestellung mehr da ist (derselbe Fund wie beim
   Warenkorb-FAB, hier schon länger bestehend). */
.badge[hidden]{display:none}
.hauptnav a.aktiv .badge{background:#fff;color:var(--accent-dark)}

.benachrichtigung-karte{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;margin-bottom:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.benachrichtigung-karte h2{font-size:.98rem;margin-bottom:.2em}
.benachrichtigung-karte p{max-width:52ch}
.schalter{position:relative;display:inline-block;width:52px;height:32px;flex:0 0 auto}
.schalter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.schalter-optik{position:absolute;inset:0;background:var(--line-soft);border:1px solid var(--line);border-radius:999px;transition:background .15s}
.schalter-optik::before{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.schalter input:checked+.schalter-optik{background:var(--accent)}
.schalter input:checked+.schalter-optik::before{transform:translateX(20px)}
.schalter input:focus-visible+.schalter-optik{box-shadow:0 0 0 3px var(--accent-soft)}
.plan-abzeichen{display:inline-block;padding:4px 12px;background:var(--accent-soft);color:var(--accent-dark);border-radius:999px;font-weight:700;font-size:.85rem}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.kachel{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.kachel-zahl{font-size:1.8rem;font-weight:800;margin:.1em 0}
.fortschritt{height:8px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-top:6px}
.fortschritt span{display:block;height:100%;background:var(--accent)}
/* Feste Breitenstufen statt Inline-Style — die Inhaltsrichtlinie (CSP) lässt
   keine style-Attribute zu, und die Projektregeln verbieten sie ohnehin. */
.fortschritt-0{width:0}
.fortschritt-5{width:5%}
.fortschritt-10{width:10%}
.fortschritt-15{width:15%}
.fortschritt-20{width:20%}
.fortschritt-25{width:25%}
.fortschritt-30{width:30%}
.fortschritt-35{width:35%}
.fortschritt-40{width:40%}
.fortschritt-45{width:45%}
.fortschritt-50{width:50%}
.fortschritt-55{width:55%}
.fortschritt-60{width:60%}
.fortschritt-65{width:65%}
.fortschritt-70{width:70%}
.fortschritt-75{width:75%}
.fortschritt-80{width:80%}
.fortschritt-85{width:85%}
.fortschritt-90{width:90%}
.fortschritt-95{width:95%}
.fortschritt-100{width:100%}
.oeffentlicher-link{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.link-box{padding:10px 12px;background:var(--canvas);border:1px solid var(--line-soft);border-radius:10px;font-family:ui-monospace,monospace;font-size:.85rem;word-break:break-all}

/* minmax(min(320px,100%),1fr) statt minmax(320px,1fr): Auf einem exakt
   320px breiten Bildschirm ist nach Abzug der Seitenränder (main hat
   16px Luft je Seite) weniger als 320px für eine Spalte übrig — die
   feste Mindestbreite allein reißt das Grid dann waagerecht auf. Mit
   min(320px,100%) darf eine einzelne Spalte auch schmaler werden, wenn
   der verfügbare Platz das hergibt, bleibt bei mehr Platz aber wie
   gehabt mindestens 320px breit. */
.einstellungen-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;align-items:start}
.plan-liste{display:grid;gap:10px}
.plan-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px}
.plan-zeile.aktiv{border-color:var(--accent);background:var(--accent-soft)}
.plan-zeile form{display:block}
.status-abzeichen{display:inline-block;padding:5px 12px;background:var(--success-soft);color:var(--success);border-radius:999px;font-weight:700;font-size:.8rem}

.kategorie-block{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.kategorie-block:last-child{border-bottom:0}
.kategorie-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.kategorie-kopf form{display:inline}
.artikel-liste{display:grid;gap:10px;margin-top:12px}
.artikel-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--line-soft);border-radius:12px}
.artikel-zeile.nicht-verfuegbar{opacity:.6}
.artikel-aktionen{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* display:block statt inline — ohne Beschreibung stand der Preis sonst
   direkt hinter dem Namen auf derselben Zeile ("Grüner Tee 2,50 €"), mit
   Beschreibung dagegen (die als <p> einen eigenen Zeilenumbruch erzwingt)
   auf einer eigenen Zeile. Jetzt einheitlich immer auf eigener Zeile,
   unabhängig davon, ob eine Beschreibung vorhanden ist. */
.artikel-preis{display:block;margin-top:2px;font-weight:700;color:var(--accent-dark)}
.artikel-zeile form{display:inline}
.artikel-formular{grid-template-columns:1fr}
.artikel-foto{width:64px;height:64px;flex:0 0 auto;object-fit:cover;border-radius:10px;background:var(--canvas)}
.artikel-foto-platzhalter{display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--muted);background:linear-gradient(135deg,var(--accent-soft),var(--canvas))}

.speisekarte-block{margin-bottom:20px}
.speisekarte-block .artikel-zeile div{flex:1;min-width:180px}
.menge-eingabe{width:76px;min-height:44px;text-align:center}

/* Mengen-Stepper (+/- statt reinem Zahlenfeld) auf der öffentlichen Bestellseite. */
.mengen-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fdfcfb;flex:0 0 auto}
/* Als gezeichnete Striche statt als Textzeichen: "+" und "−" fallen je nach
   Schriftart unterschiedlich groß aus (das Pluszeichen wirkt durch seinen
   senkrechten Strich fast immer wuchtiger als der reine Querstrich des
   Minus) — zwei exakt gleich lange/dicke Balken sehen dagegen auf jedem
   Gerät gleich groß aus. */
.stepper-knopf{position:relative;min-width:40px;min-height:40px;padding:0;background:transparent;color:var(--accent-dark);border:0;border-radius:0;font-size:0;line-height:1}
.stepper-knopf::before,.stepper-knopf::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:1px}
.stepper-knopf::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.stepper-plus::after{width:2px;height:12px;transform:translate(-50%,-50%)}
.stepper-knopf:hover{background:var(--accent-soft)}
.stepper-knopf:active{transform:none;background:var(--accent-soft)}
.stepper-knopf:disabled{color:var(--muted);opacity:.5;cursor:not-allowed}
.mengen-stepper .menge-eingabe{width:44px;min-height:40px;padding:0 2px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;background:transparent;font-weight:700;-moz-appearance:textfield}
.mengen-stepper .menge-eingabe::-webkit-inner-spin-button,
.mengen-stepper .menge-eingabe::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mengen-stepper .menge-eingabe:focus{box-shadow:none}

/* Sprungleiste zu den Kategorien der Speisekarte — klebt unterhalb der
   Topbar, damit man bei einer langen Karte nicht erst zurückscrollen
   muss, um die Kategorie zu wechseln. Dieselbe Chip-Optik wie die
   Küchen-Filter im Verzeichnis, hier aber Sprungmarken statt Filter. */
.kategorie-sprungleiste{position:sticky;top:0;z-index:15;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px;padding:10px 0;background:var(--canvas);border-bottom:1px solid var(--line-soft)}
.kategorie-sprungleiste .filter-chip{flex:0 0 auto;background:var(--surface)}

/* "Zum Warenkorb"-Knopf am Ende der Speisekarte — bewusst ein normaler,
   nicht fixierter Knopf im Textfluss: der FAB weiter unten übernimmt die
   Rolle, jederzeit erreichbar zu sein, sobald etwas im Korb liegt. Ohne
   JavaScript (oder bevor man überhaupt etwas gewählt hat) bleibt dieser
   Knopf der reguläre, funktionierende Weg. */
.warenkorb-uebernehmen-knopf{display:flex;width:100%;justify-content:center;margin-top:8px}
/* Reserviert Platz für den fixierten FAB, der sonst genau über diesem
   Knopf schwebt, sobald man ans Seitenende scrollt (auffällig geworden
   im Screenshot: der FAB verdeckte "...korb" im Knopftext). Reserviert
   unabhängig vom hidden-Zustand des FAB — auf der Warenkorb-Seite selbst
   gibt es #warenkorb-fab gar nicht, dort bleibt die Regel wirkungslos. */
body:has(#warenkorb-fab) #bestellformular{padding-bottom:88px}

/* Warenkorb-FAB (Floating Action Button) statt der früheren, immer
   sichtbaren Sticky-Leiste über die volle Breite — kompakt, fällt nicht
   über den Bildschirm her, verschwindet vollständig (hidden-Attribut),
   solange der Warenkorb leer ist. */
.warenkorb-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:20;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;background:var(--ink);color:#fff;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.25);transform:translateZ(0)}
/* [hidden] hat dieselbe Spezifität wie die Klasse oben und stünde in der
   eigenen Stylesheet-Kaskade NACH ihr — ohne diese Zeile gewinnt
   "display:inline-flex" gegen das Standardverhalten von [hidden], und der
   FAB bliebe sichtbar, obwohl der Warenkorb leer ist. */
.warenkorb-fab[hidden]{display:none}
.warenkorb-fab:hover{background:#000}
.warenkorb-fab svg{flex:0 0 auto}
#warenkorb-fab-anzahl{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:var(--accent);border-radius:999px;font-size:.78rem}

.artikel-zwischensumme{display:block;color:var(--muted)}

.bild-upload{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bild-vorschau{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.bild-vorschau-breit{width:100%;max-width:320px;height:120px}
/* min-width:0 statt des flexbox-Standards "auto": Ohne das behält der native
   Datei-Auswahlknopf seine ungeschrumpfte Eigenbreite und reißt die Seite auf
   schmalen Bildschirmen (320px) waagerecht auf, obwohl der Elternflex
   umbricht — flex-wrap allein verhindert das nicht, wenn ein einzelnes
   Element selbst schon breiter als der verfügbare Platz ist. */
.datei-eingabe{min-height:auto;min-width:0;max-width:100%;flex:1 1 160px;padding:9px;border:1px dashed var(--line);background:var(--canvas)}

.restaurant-titelbild{width:100%;max-height:280px;overflow:hidden;border-radius:16px;margin-top:12px}
.restaurant-titelbild img{width:100%;height:100%;object-fit:cover;display:block}

.bestell-abschluss{margin-top:8px}
.art-auswahl{display:flex;gap:18px;border:0;padding:0;margin:0}
.art-auswahl label{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:600}
#adresse-feld{display:none}
#adresse-feld.sichtbar{display:grid}
#bestell-summe{color:var(--accent-dark)}

.restaurant-kopf{padding:20px 0;border-bottom:1px solid var(--line);margin-bottom:20px}

/* Filter-Leiste über der Bestellübersicht — reduziert die Liste standardmäßig
   auf das, was gerade Aufmerksamkeit braucht (offene Bestellungen), statt
   jede Bestellung seit Anbeginn auf einmal zu zeigen. Auf schmalen Bildschirmen
   eine waagerecht wischbare Chip-Reihe statt einer langen Liste. */
.filter-leiste{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;min-height:40px;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--muted);text-decoration:none;font-weight:700;font-size:.88rem}
.filter-chip:hover{border-color:var(--accent)}
.filter-chip.aktiv{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-chip .badge-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:var(--line-soft);border-radius:999px;font-size:.76rem;font-weight:800;color:var(--ink)}
.filter-chip.aktiv .badge-zahl{background:rgba(255,255,255,.25);color:#fff}

.bestellungen-liste{display:grid;gap:12px}
.bestellung-karte{padding:16px 18px;background:var(--surface);border:1px solid var(--line-soft);border-left:3px solid var(--line);border-radius:12px}
.bestellung-karte.status-neu{border-left-color:var(--accent)}
.bestellung-karte.status-bestaetigt{border-left-color:#2b6cb0}
.bestellung-karte.status-fertig{border-left-color:var(--success)}
.bestellung-karte.status-storniert{border-left-color:var(--danger);opacity:.7}
.bestellung-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.positionen{margin:8px 0;padding-left:18px}
.bestellstatus-abzeichen-zeile{margin:12px 0}
.summe{font-weight:800;margin-top:8px;font-size:1.05rem}

/* Ein Tipp genügt statt Auswahlfeld-öffnen + Absenden — vier eigenständige
   Absende-Knöpfe in einem Formular (value je Knopf), keine Nebenwirkung
   ohne JavaScript. */
.status-formular{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.annahme-formular{align-items:end}
.annahme-uhrzeit{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;font-size:.85rem;color:var(--muted);font-weight:600}
.status-knopf{min-height:40px;padding:8px 14px;background:var(--canvas);color:var(--muted);border:1px solid var(--line);font-weight:700;font-size:.84rem}
.status-knopf:hover{background:var(--line-soft);color:var(--ink)}

/* Wochenplan der Öffnungszeiten — je Tag eine Zeile mit bis zu zwei
   Zeitfenstern, bricht auf schmalen Bildschirmen sauber um statt zu
   überlaufen (jedes Zeitfenster bleibt als Ganzes zusammen). */
.oeffnungszeiten-plan{display:grid;gap:8px;margin:4px 0 14px;min-width:0}
.oeffnungszeiten-tag{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.oeffnungszeiten-tag:last-child{border-bottom:0}
.oeffnungszeiten-tag-label{flex:0 0 90px;font-weight:700;font-size:.88rem}
.oeffnungszeiten-schicht{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--muted);min-width:0}
.oeffnungszeiten-schicht input[type=time]{width:auto;min-width:0;flex:1 1 auto}
.status-knopf.aktiv{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default}

/* Zahlungsverwaltung: eigenes Abzeichen (bezahlt/offen) neben dem Bestellstatus
   — beide sind unabhängige Zustände einer Bestellung, keine Ersatzanzeige
   füreinander. */
.zahlungs-abzeichen{display:inline-block;padding:5px 12px;border-radius:999px;font-weight:700;font-size:.8rem}
.zahlungs-abzeichen.bezahlt{background:var(--success-soft);color:var(--success)}
.zahlungs-abzeichen.offen{background:var(--danger-soft);color:var(--danger)}

/* Öffnungszeiten-Abzeichen — dieselbe Bauart wie .zahlungs-abzeichen, aber
   ein eigener Klassenname: "offen"/"geschlossen" beschreibt hier den
   Öffnungsstatus, nicht den Zahlungsstatus einer Bestellung, beide
   Bedeutungen dürfen sich nicht überschneiden. */
.oeffnungs-abzeichen{display:inline-block;padding:5px 12px;border-radius:999px;font-weight:700;font-size:.8rem}
.oeffnungs-abzeichen.offen{background:var(--success-soft);color:var(--success)}
.oeffnungs-abzeichen.geschlossen{background:var(--danger-soft);color:var(--danger)}

/* Entfernung auf der Restaurant-Karte (Standortsuche) — bewusst als
   angehängter Klartext ("Name · 2,3 km"), nicht als eigene Pille: Die
   Kategorie hat schon ein Abzeichen, ein zweites direkt daneben hätte
   die Karte überladen. */
.entfernung-abzeichen{font-size:.85rem;font-weight:600;color:var(--muted)}

.fusszeile{padding:20px;text-align:center;color:var(--muted);font-size:.82rem;border-top:1px solid var(--line)}
.fusszeile-links{margin-top:4px}
.fusszeile-links a{color:var(--muted)}

@media(max-width:640px){
  .partner-schritte{grid-template-columns:1fr}
  .partner-schritte li{padding:16px 0;border-left:0;border-bottom:1px solid var(--line-soft)}
  .partner-schritte li:last-child{border-bottom:0}
  .partner-kontakt{align-items:flex-start;flex-direction:column}
  /* Die Topbar war hier bis zu drei Zeilen hoch (Logo, umgebrochene Nav,
     Registrieren-Knopf) — jetzt eine einzige schmale Zeile mit kleinem
     Logo und einem Hamburger-Knopf, die Nav klappt dahinter als Schublade
     auf, statt permanent Platz zu beanspruchen. */
  .kopf{padding:10px 16px}
  .logo{font-size:1.02rem}
  .nav-umschalter{display:inline-flex}
  /* Trennlinien statt Zwischenraum als Abstandshalter — vorher wirkte die
     aufgeklappte Liste durch großzügiges gap+padding an jeder Zeile
     aufgebläht, obwohl die einzelnen Tippflächen selbst gar nicht größer
     waren. Ein knapperer Rhythmus mit Haarlinien zwischen den Einträgen
     liest sich als EINE zusammenhängende Liste statt einzeln schwebender
     Zeilen (siehe Haarlinien-Regel im Projekt). */
  .hauptnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 12px 20px rgba(0,0,0,.1);padding:6px;z-index:30}
  .hauptnav.offen{display:flex}
  .hauptnav a{width:100%;padding:10px 12px;font-size:.94rem;border-radius:6px}
  .hauptnav a:not(.button){border-bottom:1px solid var(--line-soft)}
  .hauptnav a:not(.button):last-of-type{border-bottom:0}
  .hauptnav a.button.klein{order:-1;margin-bottom:4px;justify-content:center}
  .status-formular{gap:6px}
  .status-knopf{flex:1 1 calc(50% - 6px)}
  .bestellung-kopf{flex-wrap:wrap}
  .restaurant-titelbild{max-height:180px;border-radius:12px}
  .artikel-foto{width:52px;height:52px}
  .bild-vorschau-breit{max-width:100%;height:100px}
  /* nowrap+overflow-x macht die Reihe scrollbar — ohne die
     Ausblassung am rechten Rand sah das zuvor wie ein hart
     abgeschnittener, kaputter letzter Chip aus statt wie eine Reihe, die
     sich noch weiterschieben lässt. */
  .filter-leiste{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 28px 2px 16px;margin:0 -16px;mask-image:linear-gradient(to right,transparent,black 16px,black calc(100% - 28px),transparent)}
  .filter-chip{flex:0 0 auto}
  .kategorie-sprungleiste{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;mask-image:linear-gradient(to right,black calc(100% - 28px),transparent)}
  /* Die native Zeit-Eingabe hat eine eigene, nicht unterschreitbare
     Mindestbreite — zwei Zeitfenster nebeneinander sprengen bei 320px
     die Zeile (derselbe Grundfehler wie zuvor bei der Datei-Eingabe).
     Untereinander statt nebeneinander gestapelt bleibt jedes Zeitfenster
     in voller, gut antippbarer Breite erhalten. */
  .oeffnungszeiten-tag{flex-direction:column;align-items:flex-start;gap:6px}
}