/* ============================================================
   Grillspiess Bestellsystem – gemeinsames Stylesheet
   Farb-/Formsprache aus dem bisherigen Shopify-Formular übernommen

   Schriftgrössen: die Variablen --fs-* sind bewusst als eigene
   CSS-Variablen ausgelagert (statt überall feste rem-Werte), damit sie im
   Admin-Backend unter "Einstellungen" -> "Schriftgrössen" pro Textrolle
   einzeln überschrieben werden können (siehe index.php <head>, wo ein
   zweiter <style>-Block die hier gesetzten Standardwerte bei Bedarf mit den
   im Admin hinterlegten Werten überschreibt). Diese Variablen gelten nur
   für das Bestellformular (index.php) - das Admin-Backend selbst behält
   feste Schriftgrössen.
   ============================================================ */

:root{
  --ink:#1f2420;
  --paper:#faf9f6;
  --line:#dcd8cf;
  --accent:#b4472a;
  --accent-soft:#f1e2da;
  --ok:#3f6d4e;
  --danger:#b4472a;
  --radius:10px;

  --fs-root:16px;     /* Basis-Schriftgrösse - skaliert alle rem-Werte mit */
  --fs-h1:1.4rem;      /* Haupttitel / Marken-Titel im Kopfbereich */
  --fs-subtitle:0.92rem; /* Untertitel unter dem Haupttitel */
  --fs-h2:1.15rem;     /* Schritt-Überschriften */
  --fs-h3:0.95rem;     /* Zwischenüberschriften */
  --fs-hint:0.88rem;   /* Hinweistexte und Infoboxen */
  --fs-body:0.92rem;   /* Fliesstext, Formularfelder, Listen */
  --fs-small:0.85rem;  /* Kleingedrucktes, Preise, Feld-Beschriftungen */
  --fs-tiny:0.72rem;   /* Winzige Beschriftungen (Schritt-Zähler, Kalender-Wochentage) */
  --fs-calendar:0.72rem; /* Kalender-Tageszahlen */
  --fs-button:0.95rem; /* Buttons */
  --fs-total:1.05rem;  /* Warenkorb-Gesamtsumme */

  font-size:var(--fs-root);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.45;
}
a{color:var(--accent);}

/* Direktauftrag (06.09.2026): Hintergrundbild auf den öffentlichen
   Kunden-Seiten (index.php inkl. Bestellabschluss, da das derselbe
   body/dieselbe Seite ist, sowie bestellung-aendern.php), NICHT fürs
   Laden-Formular (eigener body.laden-mode), den AGB-Text
   (body.legal-page) oder den Admin-Bereich - deshalb ueber die Klasse
   "public-form-page" auf <body> gesteuert statt ueber den body-Selektor
   direkt. Seit demselben Direktauftrag haben diese beiden Seiten keine
   eigene site-header/site-footer mehr (Einbettung per iframe in eine
   Shopify-Seite, die bereits Navigation/Kopf-/Fusszeile mitbringt) -
   die vorherige .site-footer-Hintergrundregel entfaellt daher hier. */
body.public-form-page{
  background-image:url('../img/hintergrund-grillfest.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* Direktauftrag (06.09.2026): Bereich direkt hinter dem Formular
   (.wrap, enthaelt alle Schritte inkl. Bestellabschluss) abdunkeln,
   damit sich der Formularinhalt vom Hintergrundbild abhebt - nur auf
   den beiden Seiten mit Hintergrundbild (siehe oben), .wrap wird auch
   in Laden/Admin/AGB verwendet und bleibt dort bewusst unangetastet.
   Ursprünglich 50% (rgba 0.5), auf Wunsch (06.09.2026) um weitere 30%
   auf 80% (rgba 0.8) verdunkelt. margin-top sorgt zusätzlich dafür,
   dass das unverdunkelte Hintergrundbild auch OBEN sichtbar durchscheint
   (bisher war das nur unten der Fall, wo die Box endet). */
body.public-form-page .wrap{
  background:rgba(0,0,0,0.8);
  border-radius:var(--radius);
  margin-top:24px;
  /* Direktauftrag (06.09.2026): weicher Schlagschatten, damit die Box wie
     eine schwebende Karte über dem Hintergrundbild wirkt (siehe
     Screenshot-Beispiel des Kunden). Auf Wunsch um 20% verstärkt
     (Deckkraft 0.5 -> 0.7). */
  box-shadow:0 20px 50px rgba(0,0,0,0.7);
}
/* Direktauftrag (06.09.2026): Akzentfarbe #c3a342 (Gold) für drei
   konkret genannte Elemente auf den beiden Kunden-Seiten - bewusst nur
   auf public-form-page (nicht die globale --accent-Variable geändert,
   die z.B. auch für Links, Pflichtfeld-Sternchen und aktive Karten
   verwendet wird und im Laden-Formular/Admin unverändert bleiben soll):
   1) Fortschrittsbalken (Schritt-Anzeige oben), 2) markierter
   "heute"-Tag im Kalender, 3) primärer Button ("Weiter" etc.) - Button
   zusätzlich mit dunkler statt weisser Schrift, da Weiss auf diesem
   Gold-Ton zu wenig Kontrast hätte (WCAG-Kontrast weiss/Gold ca. 2.4:1,
   dunkel/Gold ca. 6.5:1). .btn.secondary ("Zurück") und .btn.danger
   behalten ihre eigene Farbe. */
body.public-form-page .steps .dot.done,
body.public-form-page .steps .dot.active{
  background:#c3a342;
}
body.public-form-page .mc-day.mc-today{
  box-shadow:inset 0 0 0 2px #c3a342;
}
body.public-form-page .btn:not(.secondary):not(.danger){
  background:#c3a342;
  border-color:#c3a342;
  color:var(--ink);
}
/* Kontrast-Absicherung: fast alle Überschriften/Hinweistexte im Formular
   liegen als "nackter" Text direkt auf .wrap (keine eigene weisse Karte
   dahinter, anders als z.B. Buttons, Eingabefelder, Kalender, Info-/
   Check-/Qty-Boxen - die haben alle einen eigenen weissen/hellen
   Hintergrund und bleiben deshalb unveraendert dunkel beschriftet). Ohne
   diese Anpassung waere die bisherige dunkle Schrift (--ink) auf dem neu
   abgedunkelten Hintergrundbild kaum noch lesbar. Text-Schatten zusaetzlich
   fuer Lesbarkeit unabhaengig davon, welcher Bildbereich gerade dahinter
   liegt (siehe Barrierefreiheits-Grundsatz aus den Projekt-Regeln). */
body.public-form-page header.top h1,
body.public-form-page #formRoot h2,
body.public-form-page #formRoot h3,
body.public-form-page label.field-label,
body.public-form-page .checkbox-row label,
body.public-form-page .cart-list,
body.public-form-page .cart-row,
body.public-form-page .cart-total,
body.public-form-page #bestaetigungBox p{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
}
body.public-form-page header.top p,
body.public-form-page .step-label,
body.public-form-page .hint,
body.public-form-page .pkg-progress,
body.public-form-page .substep-label,
body.public-form-page .cart-row .sub{
  color:rgba(255,255,255,0.82);
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
}

/* Meldung #109 (06.09.2026): mehr Abstand zwischen den Kundentyp-
   Auswahlkarten (Privat/Firma) oben und der Überschrift "Wie viele
   Personen?" darunter - nur Schritt 1 der Online-Bestellseite
   (bewusst ueber #formRoot > section.panel[data-step="1"] > h2
   eingegrenzt, damit KEINE anderen Zwischentitel im Formular betroffen
   sind), nicht im Laden-Formular (eigener body.laden-mode). */
body.public-form-page #formRoot > section.panel[data-step="1"] > h2{
  margin-top:20px;
}

/* Meldung #110 (06.09.2026): der bisher immer sichtbare Untertitel-Text
   unter dem Haupttitel ("Brauchen Sie Hilfe? ...") wird durch ein
   kleines Hilfe-Icon neben dem Titel ersetzt, das denselben Text erst
   beim Hovern/Fokussieren als Sprechblase zeigt, inkl. Link "Hier
   klicken" zur Kontaktseite (siehe index.php, Texte editierbar unter
   Admin -> Texte, Gruppe "Allgemein"). #mainSubtitle bleibt im Markup
   bestehen und leer, da assets/js/form.js diesen Platzhalter nach einer
   erfolgreichen Bestellung weiterhin mit einem Bestätigungstext befüllt -
   :empty blendet ihn nur so lange aus, bis das passiert. */
body.public-form-page #mainSubtitle:empty{
  display:none;
}
body.public-form-page .title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
body.public-form-page .title-row h1{
  margin:0;
}
body.public-form-page .help-hint{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:none;
  border-radius:50%;
  border:1.5px solid #fff;
  color:#fff;
  opacity:.75;
  cursor:help;
}
body.public-form-page .help-hint:hover,
body.public-form-page .help-hint:focus,
body.public-form-page .help-hint:focus-within{
  opacity:1;
}
body.public-form-page .help-hint-icon{
  display:block;
  pointer-events:none;
}
body.public-form-page .help-hint-tooltip{
  position:absolute;
  top:130%;
  left:0;
  width:260px;
  max-width:80vw;
  background:var(--ink);
  color:#fff;
  text-shadow:none;
  padding:12px 14px;
  border-radius:8px;
  font-size:var(--fs-hint);
  line-height:1.4;
  text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
  z-index:20;
}
body.public-form-page .help-hint-tooltip a{
  display:inline-block;
  margin-top:8px;
  color:#fff;
  font-weight:700;
  text-decoration:underline;
}
body.public-form-page .help-hint:hover .help-hint-tooltip,
body.public-form-page .help-hint:focus .help-hint-tooltip,
body.public-form-page .help-hint:focus-within .help-hint-tooltip{
  opacity:1;
  visibility:visible;
}

.site-header{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.site-header .inner{
  max-width:720px;margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.site-header .brand{font-weight:700;font-size:var(--fs-h1);color:var(--ink);text-decoration:none;}
.site-header nav a{margin-left:16px;font-size:var(--fs-small);color:#5c5c56;text-decoration:none;}
.site-header nav a:hover{color:var(--accent);}

.site-footer{
  border-top:1px solid var(--line);
  margin-top:40px;padding:20px;text-align:center;
  color:#8a8a82;font-size:var(--fs-small);
}

.wrap{max-width:640px;margin:0 auto;padding:24px 20px 80px;}
.wrap-wide{max-width:960px;margin:0 auto;padding:24px 20px 80px;}

header.top{margin-bottom:20px;}
header.top h1{font-size:var(--fs-h1);margin:0 0 4px;}
/* Untertitel: gleiche Grösse wie die übrigen Hinweistexte im Formular
   (.hint, Zwischentitel-Erklärungen usw.) - siehe --fs-hint. */
header.top p{margin:0;color:#5c5c56;font-size:var(--fs-hint);}
/* Detailseiten (Datenschutzerklärung, AGB): Titel auf die gleiche Grösse wie
   die übrigen Formular-Überschriften bringen, ohne den grossen Haupttitel
   (Marken-Titel oben auf der Bestellseite) zu verändern. */
.legal-page header.top h1{font-size:var(--fs-h2);}

.steps{display:flex;gap:4px;margin:20px 0 28px;flex-wrap:wrap;}
.steps .dot{flex:1;min-width:8px;height:4px;border-radius:2px;background:var(--line);}
.steps .dot.done{background:var(--accent);}
.steps .dot.active{background:var(--accent);opacity:0.55;}
.step-label{font-size:var(--fs-tiny);color:#8a8a82;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}

section.panel{display:none;}
section.panel.active{display:block;animation:fade .15s ease-in;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

.substep{display:none;}
.substep.active{display:block;animation:fade .15s ease-in;}
.substep-label{font-size:var(--fs-tiny);color:#8a8a82;text-transform:uppercase;letter-spacing:.04em;margin:18px 0 4px;}

h2{font-size:var(--fs-h2);margin:0 0 4px;}
h3{font-size:var(--fs-h3);margin:18px 0 8px;}
/* Im Bestellformular sollen alle Überschriften (Schritt-Titel UND
   Zwischenüberschriften) einheitlich gross sein - siehe auch .cart-total
   und .legal-page weiter unten. Bewusst nur hier (#formRoot) und nicht an
   der allgemeinen h3-Regel geändert, damit die Überschriften im
   Admin-Backend unverändert bleiben. */
#formRoot h3{font-size:var(--fs-h2);}
.hint{color:#6b6b63;font-size:var(--fs-hint);margin:0 0 14px;}

input[type=number],input[type=text],input[type=email],input[type=tel],input[type=date],
select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:var(--fs-body);background:#fff;color:var(--ink);font-family:inherit;
}
textarea{resize:vertical;min-height:80px;}
label.field-label{display:block;font-size:var(--fs-small);font-weight:600;margin:16px 0 6px;}
label.field-label.required::after{content:" *";color:var(--accent);}
.field-row{margin-bottom:14px;}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
@media (max-width:480px){.cols-2{grid-template-columns:1fr;}}

/* Einheitliches Erscheinungsbild für alle Warn-/Fehlermeldungen im
   Bestellformular: dieselbe Box-Optik wie .error-box (roter Rahmen,
   hellroter Hintergrund) - nur sichtbar/mit Innenabstand, wenn die Box
   tatsächlich einen Text enthält (:not(:empty)), damit die vielen leeren
   .people-warn-Platzhalter im Formular (die nur bei Bedarf per JS befüllt
   werden) nicht als leere Kästchen auftauchen. */
.people-warn{color:var(--danger);}
.people-warn:not(:empty){text-align:left;font-size:var(--fs-hint);border:1px solid var(--danger);border-radius:var(--radius);padding:12px 14px;background:#fdecea;margin:14px 0;}

.check-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;background:#fff;}
.check-item label{flex:1;font-size:var(--fs-body);cursor:pointer;}
.check-item .price{color:#6b6b63;font-size:var(--fs-small);}
.check-item.disabled{opacity:0.45;}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
@media (max-width:480px){.cols{grid-template-columns:1fr;}}

.qty-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;background:#fff;}
.qty-row .name{font-size:var(--fs-body);}
.qty-row .price{color:#6b6b63;font-size:var(--fs-small);}
.qty-row-grill{gap:12px;}
.qty-row-grill .qty-row-info{flex:1;text-align:left;}
.grill-bild{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex-shrink:0;}
.stepper{display:flex;align-items:center;gap:8px;}
.stepper button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:var(--fs-body);}
.stepper span{min-width:20px;text-align:center;font-weight:600;}

.pkg-choice{display:flex;gap:10px;margin-bottom:16px;}
.pkg-card{flex:1;border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff;cursor:pointer;text-align:center;}
.pkg-card.active{border-color:var(--ink);background:var(--accent-soft);}
.pkg-card .pkg-title{font-weight:700;font-size:var(--fs-body);}
.pkg-card .pkg-price{font-size:var(--fs-small);color:#6b6b63;margin-top:4px;}
.pkg-progress{text-align:center;font-size:var(--fs-hint);color:#6b6b63;margin-bottom:12px;}

.cart-list{border-top:1px solid var(--line);margin-top:10px;}
.cart-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-body);}
.cart-row .sub{color:#8a8a82;font-size:var(--fs-small);display:block;}
.cart-total{display:flex;justify-content:space-between;font-weight:700;padding-top:12px;margin-bottom:30px;font-size:var(--fs-h2);}

.pickup-box{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--accent-soft);font-size:var(--fs-hint);margin-top:14px;}
.info-box{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:#fff;font-size:var(--fs-hint);margin-top:14px;}
/* Eingebettete Google-Maps-Kartenvorschau (Meldung #30, siehe
   updateZoneFromPlz() in assets/js/form.js) - erscheint innerhalb der
   .info-box, wenn eine PLZ in keiner Zone/PLZ-Distanz hinterlegt ist. */
.maps-embed{width:100%;height:280px;border:1px solid var(--line);border-radius:8px;margin-top:10px;display:block;}
.error-box{border:1px solid var(--danger);border-radius:var(--radius);padding:12px 14px;background:#fdecea;color:var(--danger);font-size:var(--fs-hint);margin:14px 0;}
/* Sendespeicher/"Outbox" (assets/js/outbox.js): eigene, warnende (nicht
   alarmierende) Farbe für "wird noch automatisch weiterversucht" - bewusst
   nicht rot wie .error-box, da es sich (noch) nicht um einen endgültigen
   Fehler handelt. */
.pending-box{border:1px solid #e8b93a;border-radius:var(--radius);padding:12px 14px;background:#fff8e1;color:#7a5b00;font-size:var(--fs-hint);margin:14px 0;}
.success-box{border:1px solid var(--ok);border-radius:var(--radius);padding:16px;background:#eaf3ee;color:var(--ok);font-size:var(--fs-body);margin:14px 0;}

.collapsible-toggle{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fff;margin-bottom:12px;
}
.collapsible-toggle .arrow{transition:transform .15s;}
.collapsible-toggle.open .arrow{transform:rotate(90deg);}
.collapsible-body{display:none;}
.collapsible-body.open{display:block;}

.mini-calendar{border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:#fff;margin:0 auto 6px;max-width:580px;}
.mc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.mc-title{font-weight:700;font-size:var(--fs-small);text-transform:capitalize;}
.mc-nav{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:var(--fs-body);line-height:1;padding:0;flex-shrink:0;}
.mc-nav:disabled{opacity:0.3;cursor:not-allowed;}
/* Mehrere Monatsbloecke nebeneinander (breiter Bildschirm) oder gestapelt
   (schmaler Bildschirm/Mobile) - je nachdem, wie viele Monate noetig sind,
   damit ab heute mindestens 30 Tage ohne Klick sichtbar sind. */
.mc-months{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
.mc-month{flex:1 1 250px;max-width:270px;min-width:230px;}
.mc-month-title{font-weight:700;font-size:var(--fs-small);text-transform:capitalize;text-align:center;margin-bottom:4px;}
.mc-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:var(--fs-tiny);color:#8a8a82;margin-bottom:2px;}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.mc-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:var(--fs-calendar);cursor:pointer;border:1px solid transparent;background:#e3f1e7;color:var(--ok);}
.mc-day.mc-empty{cursor:default;background:transparent;}
.mc-day:not(.mc-locked):not(.mc-past):not(.mc-empty):not(.mc-selected):hover{border-color:var(--ok);}
.mc-day.mc-locked{background:#f7d9d2;color:#8a3521;text-decoration:line-through;cursor:not-allowed;}
/* Vergangene Tage: bewusst neutral/farblos statt rot - sie sind einfach
   vorbei, keine aktive Sperre wie bei Tagen innerhalb der Frist. */
.mc-day.mc-past{background:transparent;color:#b5b5ad;cursor:default;}
.mc-day.mc-selected{background:var(--ink);color:#fff;font-weight:700;}
/* Heutiges Datum: deutlich sichtbarer Rahmen + fetter Text, unabhaengig
   davon, ob der Hintergrund gleichzeitig gesperrt (rot) oder verfuegbar
   (gruen) ist. */
.mc-day.mc-today{box-shadow:inset 0 0 0 2px var(--accent);font-weight:700;text-decoration:none;}
.mc-day.mc-today:not(.mc-selected){background:#fff4d9;color:#7a5a00;}
.mc-legend{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 18px;font-size:var(--fs-tiny);color:#6b6b63;margin-top:8px;}
.mc-legend-row{display:flex;align-items:flex-start;gap:6px;}
.mc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.mc-dot-locked{background:#e0836d;}
.mc-dot-available{background:var(--ok);}
.mc-dot-past{background:#d8d8d0;}

.modal-overlay{position:fixed;inset:0;background:rgba(31,36,32,0.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;}
.modal-box{background:#fff;border-radius:var(--radius);padding:22px 20px;max-width:400px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,0.25);}
.modal-box p{margin:0 0 18px;font-size:var(--fs-body);line-height:1.5;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;}
.modal-actions .btn{padding:10px 16px;font-size:var(--fs-small);}

.method-choice{display:flex;gap:10px;margin:14px 0;}
.method-card{flex:1;border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff;cursor:pointer;text-align:center;}
.method-card.active{border-color:var(--ink);background:var(--accent-soft);}
.method-card .m-title{font-weight:700;font-size:var(--fs-body);}
.method-card .m-icon{display:block;margin:0 auto 8px;color:var(--ink);}

.nav{display:flex;justify-content:space-between;margin-top:26px;gap:10px;}
.btn{padding:12px 20px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:var(--fs-button);cursor:pointer;font-weight:600;}
.btn.secondary{background:#fff;color:var(--ink);}
.btn.small{padding:8px 14px;font-size:var(--fs-small);}
/* Meldung #72/#73: für riskante/destruktive Aktionen (Bestellung
   stornieren) - dieselbe Farbe wie .error-box/--danger, statt der
   normalen dunklen .btn-Farbe, als zusätzlicher optischer Warnhinweis. */
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn:disabled{opacity:0.4;cursor:not-allowed;}
.empty-note{color:#8a8a82;font-size:var(--fs-hint);text-align:center;padding:20px 0;}

.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin:14px 0;}
.checkbox-row input{margin-top:4px;}
.checkbox-row label{font-size:var(--fs-body);}

table.admin-table{width:100%;border-collapse:collapse;font-size:0.9rem;}
table.admin-table th,table.admin-table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;}
table.admin-table th{background:#f4f2ee;font-weight:600;}
table.admin-table tr:hover{background:#faf7f2;}

/* Wareneinsatz-Zusammenfassung (admin/dashboard.php): mehrere separate
   Tabellen (eine pro Artikel-Gruppe) untereinander. Damit die Spalte "Menge"
   nicht von Tabelle zu Tabelle unterschiedlich breit ist und dadurch "hin und
   her springt", bekommt sie hier eine feste Breite und ist rechtsbündig -
   so stehen die Mengenangaben in allen Gruppen sauber untereinander. */
table.wareneinsatz-table{table-layout:fixed;}
table.wareneinsatz-table th:first-child,table.wareneinsatz-table td:first-child{width:auto;}
table.wareneinsatz-table th:last-child,table.wareneinsatz-table td:last-child{width:130px;text-align:right;font-variant-numeric:tabular-nums;}

.admin-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
.admin-nav{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-start;}
.admin-nav a{padding:8px 14px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:0.88rem;}
.admin-nav a.active,.admin-nav a:hover{background:var(--ink);color:#fff;}

/* Meldung #66: Dropdown "Stammdaten" in der Admin-Navigation, buendelt
   Liefergebiete/Zeitfenster/Einstellungen/Laden/Texte/Selbsttest/Hilfe. */
.admin-nav-dropdown{position:relative;}
.admin-nav-dropdown-toggle{padding:8px 14px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:0.88rem;font-family:inherit;cursor:pointer;}
.admin-nav-dropdown-toggle.active,.admin-nav-dropdown-toggle:hover{background:var(--ink);color:#fff;}
.admin-nav-dropdown-arrow{font-size:0.75em;}
.admin-nav-dropdown-menu{display:none;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;min-width:200px;box-shadow:0 6px 16px rgba(0,0,0,.1);z-index:50;}
.admin-nav-dropdown-menu.open{display:flex;}
.admin-nav-dropdown-menu a{padding:8px 10px;border-radius:6px;background:none;border:none;white-space:nowrap;}
.admin-nav-dropdown-menu a.active,.admin-nav-dropdown-menu a:hover{background:var(--ink);color:#fff;}

.zf-filter-group{display:flex;gap:6px;flex-wrap:wrap;}
.zf-filter-btn{padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:var(--fs-small);cursor:pointer;}
.zf-filter-btn.active{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600;}
.zf-filter-btn:hover:not(.active){background:#faf7f2;}

.zf-day-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.zf-day-toggle .arrow{display:inline-block;transition:transform .15s;}
.zf-day-toggle.open .arrow{transform:rotate(90deg);}

.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;}
.badge.status-neu{background:#fff3cd;color:#8a6d1a;}
.badge.status-bestaetigt{background:#eaf3ee;color:var(--ok);}
.badge.status-storniert{background:#fdecea;color:var(--danger);}
