/* ============================================================
   SANDAL · pages-dark.css
   Dunkles Edel-Theme für alle Unterseiten.
   Mappt die hellen Token von sandal.css unter body.darkpage
   auf dunkle Werte um — dadurch werden bestehende Komponenten
   automatisch dunkel — plus gezielte Overrides & Nav-Theming.
   Laden NACH sandal.css und konzept.css.
   ============================================================ */

body.darkpage{
  /* helle Flächen → dunkel */
  --paper:      #0a121b;
  --paper-1:    #0d1925;
  --paper-2:    #112230;
  --paper-line: rgba(217,200,168,.16);
  /* Text dunkel → hell */
  --on-light:      #eef3f7;
  --on-light-soft: #9fb2c0;
  --on-light-mute: #6f8494;
  /* Akzente: blau-ink (Headings/Preise) → warmes Gold; Links → Neon */
  --blue-ink:   #e3d3b2;
  --blue-deep:  #2ec5f0;
  --gold-deep:  #cdb486;
  background:var(--paper);
  color:var(--on-light);
}
body.darkpage ::selection{ background:var(--neon-glow); color:#04121b; }

/* Eyebrows auf hellen (jetzt dunklen) Sektionen heller */
body.darkpage .eyebrow{ color:var(--gold-soft); }
body.darkpage .eyebrow::before{ background:var(--gold-line); }

/* ---------- Nav (dunkel, sitewide) ---------- */
.konzept .nav{ background:rgba(10,18,27,.62); backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid var(--k-line-soft); }
.konzept .nav.scrolled{ background:rgba(9,16,24,.95); box-shadow:0 12px 34px -24px #000; }
.konzept .nav-links a{ color:var(--on-k-soft); }
.konzept .nav-links a:hover, .konzept .nav-links a[aria-current="page"]{ color:var(--neon-bright); }
.konzept .nav-links a::after{ background:var(--neon); box-shadow:0 0 8px var(--neon-glow); }
.konzept .nav-dd{ background:var(--k-panel); border-color:var(--k-line); }
.konzept .nav-dd a{ color:var(--on-k-soft); }
.konzept .nav-dd a:hover{ background:var(--k-panel-2); color:var(--neon-bright); }
.konzept .nav-toggle{ color:var(--on-k); }
.konzept .btn-reserve{ --bg:var(--grad-gold); --bd:var(--gold-deep); --fg:var(--on-gold); }
.konzept .btn-reserve:hover{ box-shadow:0 14px 32px -14px var(--gold-glow); }
.konzept .nav-actions .btn--ghost{ --bg:transparent; --fg:var(--on-k); --bd:var(--k-line); }
.konzept .nav-actions .btn--ghost:hover{ --bd:var(--neon); color:var(--neon-bright); box-shadow:0 0 0 1px var(--neon), 0 0 14px -2px var(--neon-glow); }

/* ---------- Page-Hero (neon-Akzent) ---------- */
.darkpage .page-hero, .darkpage .ord-hero, .darkpage .gs-hero{
  background:radial-gradient(120% 100% at 50% -20%, #11212f, #070d14) !important;
}
.darkpage .page-hero::before, .darkpage .ord-hero::before, .darkpage .gs-hero::before{
  background:radial-gradient(760px 360px at 78% -10%, rgba(46,197,240,.16), transparent 60%) !important;
}
.darkpage .page-hero .eyebrow.on-dark, .darkpage .ord-hero .eyebrow.on-dark, .darkpage .gs-hero .eyebrow.on-dark{ color:var(--neon-bright); }
.darkpage .page-hero h1, .darkpage .ord-hero h1, .darkpage .gs-hero h1{ margin-bottom:1.2rem; }
.darkpage .page-hero .eyebrow.on-dark::before, .darkpage .ord-hero .eyebrow.on-dark::before, .darkpage .gs-hero .eyebrow.on-dark::before{ background:var(--neon); box-shadow:0 0 8px var(--neon-glow); }

/* ---------- Buttons: primär = Bernstein ---------- */
.darkpage .btn{ --bg:var(--grad-gold); --bd:var(--gold-deep); --fg:var(--on-gold); }
.darkpage .btn:hover{ box-shadow:0 14px 32px -14px var(--gold-glow); }
.darkpage .btn--gold{ --bg:var(--grad-gold); --bd:var(--gold-deep); --fg:var(--on-gold); }
.darkpage .btn--ghost{ --bg:transparent; --fg:var(--on-k); --bd:var(--k-line); }
.darkpage .btn--ghost:hover{ --bd:var(--neon); box-shadow:0 0 0 1px var(--neon), 0 0 16px -2px var(--neon-glow); color:var(--neon-bright); }

/* ---------- Sticky Kategorien-Leisten ---------- */
.darkpage .catbar, .darkpage .ord-catbar{ background:rgba(10,18,27,.92) !important; border-bottom:1px solid var(--k-line-soft); }
.darkpage .catbar a, .darkpage .ord-catbar a{ color:var(--on-k-soft); }
.darkpage .catbar a:hover, .darkpage .ord-catbar a:hover{ color:var(--neon-bright); background:rgba(46,197,240,.08); }
.darkpage .catbar a.active, .darkpage .ord-catbar a.active{ background:var(--amber); color:var(--on-gold); }

/* ---------- Speisekarte ---------- */
.darkpage .menu-row .no-thumb{ background:linear-gradient(135deg,#16293a,#0e1c28); color:var(--gold-soft); border-color:var(--k-line); }
.darkpage .menu-row .mr-price{ color:var(--gold-soft); }
.darkpage .drinks-grid h3{ color:var(--gold-soft); border-bottom-color:var(--gold-line); }
.darkpage .menu-foot{ background:var(--k-panel); border-color:var(--k-line); }

/* ---------- Bestellen / Shop ---------- */
.darkpage .mode-tabs{ background:rgba(255,255,255,.04); border-color:var(--k-line-soft); }
.darkpage .mode-tabs button.active{ background:var(--amber); color:var(--on-gold); }
.darkpage .oitem:hover{ border-color:var(--neon); box-shadow:0 0 0 1px var(--neon), 0 18px 50px -28px rgba(46,197,240,.4); }
.darkpage .oitem .oi-noimg{ background:linear-gradient(135deg,#16293a,#0e1c28); color:var(--gold-soft); border-color:var(--k-line); }
.darkpage .add-btn{ border-color:var(--neon); color:var(--neon-bright); background:rgba(46,197,240,.08); }
.darkpage .add-btn:hover{ background:var(--neon); color:#04121b; }
.darkpage .cart-head, .darkpage .fork-head, .darkpage .cart-foot{ background:var(--k-bg-2) !important; }
.darkpage .cart-foot{ border-top-color:var(--k-line); }
.darkpage .deliv-card:hover{ border-color:var(--neon); box-shadow:0 0 0 1px var(--neon); }
.darkpage .modal{ background:var(--k-panel); }
.darkpage .modal-head{ border-bottom-color:var(--k-line); }
.darkpage .time-chip, .darkpage .pay-mini .pm{ background:var(--k-bg-2); border-color:var(--k-line); color:var(--on-k-soft); }
.darkpage .time-chip.sel, .darkpage .pay-mini .pm.sel{ background:var(--neon); color:#04121b; border-color:var(--neon); }

/* ---------- Reservieren ---------- */
.darkpage .iframe-hint{ background:rgba(46,197,240,.05); border-color:var(--k-line); color:var(--on-k-mute); }
.darkpage .time-slot{ background:var(--k-bg-2); border-color:var(--k-line); color:var(--on-k); }
.darkpage .time-slot:hover{ border-color:var(--neon); color:var(--neon-bright); }
.darkpage .time-slot.sel{ background:var(--amber); border-color:var(--amber); color:var(--on-gold); }
.darkpage .info-card, .darkpage .fork{ background:var(--k-panel); border-color:var(--k-line); }
.darkpage .info-row.today{ color:var(--gold-soft); }

/* ---------- Gutscheine (Wizard) ---------- */
.darkpage .gs-body{ background:var(--paper); }
.darkpage .step-pill{ background:rgba(255,255,255,.03); border-color:var(--k-line-soft); color:var(--on-k-mute); }
.darkpage .step-pill.active{ background:var(--amber); color:var(--on-gold); border-color:var(--amber); }
.darkpage .step-pill.active .n{ background:var(--on-gold); color:var(--amber-glow); border-color:var(--on-gold); }
.darkpage .step-pill.done{ color:var(--gold-soft); }
.darkpage .step-pill.done .n{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.darkpage .value-chip, .darkpage .design-opt, .darkpage .opt-row, .darkpage .pay-opt{ background:var(--k-panel); border-color:var(--k-line); }
.darkpage .value-chip:hover, .darkpage .design-opt:hover, .darkpage .opt-row:hover, .darkpage .pay-opt:hover{ border-color:var(--neon); }
.darkpage .value-chip.sel, .darkpage .design-opt.sel, .darkpage .opt-row.sel, .darkpage .pay-opt.sel{ border-color:var(--neon); box-shadow:0 0 0 3px rgba(46,197,240,.16); }
.darkpage .value-chip b{ color:var(--gold-soft); }
.darkpage .value-chip.sel::after{ color:var(--neon-bright); }
.darkpage .preview-card{ background:var(--k-panel); border-color:var(--k-line); }
.darkpage .code-box{ background:var(--k-bg-2); border-color:var(--gold-line); color:var(--gold-soft); }
.darkpage .summary-row.total{ color:var(--gold-soft); }

/* ---------- Kontakt ---------- */
.darkpage .k-card{ background:var(--k-panel); border-color:var(--k-line); }
.darkpage .k-card .ic{ background:rgba(46,197,240,.1); color:var(--neon-bright); }
.darkpage .k-card a, .darkpage .legal-tabs a:hover{ color:var(--neon-bright); }
.darkpage .hours-table{ background:var(--k-panel); border-color:var(--k-line); }
.darkpage .hours-table .hr.today{ background:rgba(217,154,78,.08); color:var(--gold-soft); }
.darkpage .legal-tabs a{ border-color:var(--k-line); color:var(--on-k-soft); }
.darkpage .form-card, .darkpage .k-card, .darkpage .info-card{ box-shadow:0 24px 60px -40px #000; }
.darkpage .map-embed{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--k-line); min-height:420px; }
.darkpage .map-embed iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; filter:grayscale(.35) brightness(.86) contrast(1.05); }

/* ---------- Events ---------- */
.darkpage .event-card{ background:var(--k-panel); border-color:var(--k-line); }
.darkpage .ec-date{ background:var(--k-bg-2); }
.darkpage .nl{ background:var(--k-bg-2); }

/* ---------- Galerie ---------- */
.darkpage .filterbar button{ background:var(--k-panel); border-color:var(--k-line); color:var(--on-k-soft); }
.darkpage .filterbar button.active{ background:var(--amber); color:var(--on-gold); border-color:var(--amber); }
.darkpage .m-item{ background:var(--k-bg-2); }

/* ---------- Anlässe ---------- */
.darkpage .occ-block ul li{ color:var(--on-k-soft); }
.darkpage .form-card{ background:var(--k-panel); border-color:var(--k-line); }

/* Inputs/Selects/Textarea generell dunkel auf Unterseiten */
.darkpage .input, .darkpage .select, .darkpage .textarea{ background:var(--k-bg-2); border-color:var(--k-line); color:var(--on-k); }
.darkpage .input:focus, .darkpage .select:focus, .darkpage .textarea:focus{ border-color:var(--neon); box-shadow:0 0 0 3px rgba(46,197,240,.14); }
.darkpage label{ color:var(--on-k-soft); }

/* ============================================================
   MOBILE / RESPONSIVE — Unterseiten (letzter Bau)
   ============================================================ */

/* Nav-Höhe auf Smartphone etwas kompakter — und sticky Kategorien-Leisten
   an DIE Nav-Höhe koppeln (statt hart 78px). --tc-navh ist die Referenz. */
:root{ --tc-navh:78px; }
@media(max-width:720px){
  :root{ --tc-navh:64px; }
  .nav .wrap{ min-height:var(--tc-navh); }
  .brand img{ height:38px; }
}

/* Sticky Kategorien-Leisten (.catbar / .ord-catbar) folgen der Nav-Höhe.
   Deckt die hart kodierten top:78px in den Seiten-Inline-Styles ab. */
.darkpage .catbar, .darkpage .ord-catbar{ top:var(--tc-navh) !important; }

/* Platz unten für die Floating-Bar (Reservieren/Bestellen), damit sie
   den Footer/Inhalt nicht überdeckt. Nur Seiten mit geteilter Floating-Bar
   (body.has-floatcta wird von sandal.js gesetzt) — Bestellen hat eine eigene
   Warenkorb-Bar und bekommt diesen Abstand NICHT. */
@media(max-width:720px){
  body.has-floatcta{ padding-bottom:74px; }
}

/* Page-Hero: mobil weniger Kopf-Freiraum, damit der Titel früher sichtbar wird */
@media(max-width:560px){
  .darkpage .page-hero .wrap,
  .darkpage .ord-hero .wrap{ padding-top:96px; }
}