/* ============================================================================
   SITEBASE Vertriebs-App · design.css
   ----------------------------------------------------------------------------
   Eine Design-Quelle für BEIDE Seiten (Laufrouten + Anruf-Liste). Wird bewusst
   NACH dem erzeugten Inline-<style> geladen — dort steht das Funktions-CSS der
   Generatoren, hier liegt die Gestalt darüber.

   Sprache = die von sitebase.ltd (Dark-Glass, 11.08.2026): warmes Fast-Schwarz,
   Gold als Licht, Milchglas, Fraunces als Serif-Stimme. Damit sieht das Werkzeug
   des Vertrieblers aus wie das, was er verkauft.

   Drei Regeln, die dieses Werkzeug von einer Website unterscheiden:
     1. Es wird DRAUSSEN bedient. Kontraste laufen ans obere Ende (Text 15,9:1),
        nicht ans gerade noch Erlaubte.
     2. Es zeigt 3.159 Karten. `backdrop-filter` kostet pro Fläche GPU-Zeit und
        gehört deshalb NUR auf schwebende Flächen (Leiste, Overlay, Gate, Kopf).
        Listenkarten bekommen den Glas-EINDRUCK aus Fläche + Lichtkante — gratis.
     3. Es wird mit einer Hand bedient, oft in Bewegung. Tap-Ziele ≥ 48 px.
   ========================================================================== */

/* ---------- Marken-Schriften (selbst gehostet, keine Fremdanfragen) -------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces.woff2') format('woff2-variations'),
       url('/fonts/Fraunces.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/InterTight.woff2') format('woff2-variations'),
       url('/fonts/InterTight.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

/* ---------- Farben ---------------------------------------------------------
   Eine feste Palette, kein Hell/Dunkel-Wechsel: das Werkzeug soll immer gleich
   aussehen, egal welche Systemeinstellung der Vertriebler auf dem Handy hat.
   Die Selektoren decken auch die data-theme-Varianten des Cockpits ab, sonst
   gewinnen die (höhere Spezifität) und die halbe App bliebe beige.
   Kontraste gegen --bg (geprüft): ink 15.9:1 · soft 11.1:1 · mut 7.2:1
                                   gold 7.6:1 · fire 8.9:1 · done 9.6:1        */
:root,
:root[data-theme='dark'],
:root[data-theme='light'] {
  --bg:          #0C0A07;
  --bg-tief:     #080705;
  --card:        #16120C;
  --card-hoch:   #1C1710;
  --ink:         #F4EEDF;
  --ink-soft:    #CFC5AE;
  --mut:         #A99E88;
  --line:        #2A2318;
  --line-stark:  #3B3222;

  --gold:        #C9A86B;
  --gold-hell:   #E3C98F;
  --gold-soft:   rgba(201, 168, 107, .13);
  --gold-linie:  rgba(201, 168, 107, .22);

  --done:        #8FCB9B;
  --fire:        #F2A15D;
  --warn:        #E8B44A;

  /* Glas — nur für schwebende Flächen (siehe Regel 2 oben) */
  --glas:        rgba(22, 18, 12, .72);
  --glas-kante:  inset 0 1px 0 rgba(244, 238, 223, .07);
  --glas-blur:   blur(18px) saturate(130%);

  --schatten:      0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.38);
  --schatten-hoch: 0 2px 10px rgba(0,0,0,.55), 0 26px 60px rgba(0,0,0,.5);

  --r:    14px;
  --r-kl: 10px;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Grundfläche ----------------------------------------------------
   Der Gold-Schimmer liegt als fixierter Verlauf hinter allem: er gibt der Seite
   Tiefe, scrollt nicht mit und kostet keine Neuberechnung beim Scrollen.       */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(201,168,107,.10), transparent 62%),
    radial-gradient(90% 55% at 100% 100%, rgba(201,168,107,.05), transparent 70%),
    var(--bg);
}

/* ---------- Typografie ----------------------------------------------------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 21px; line-height: 1.2; color: var(--ink); }
.brand {
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.sub { color: var(--mut); }

/* ---------- Karten: Glas-EINDRUCK ohne Glas-Kosten -------------------------
   Fläche + Lichtkante oben + Schatten lesen sich wie Milchglas. Kein Blur.     */
.karte,
details.abschn,
.lz,
.route,
.angebot,
.sheet,
.block {
  border-radius: var(--r);
}
.karte,
details.abschn {
  background: linear-gradient(180deg, var(--card-hoch), var(--card));
  border: 1px solid var(--line);
  box-shadow: var(--schatten), var(--glas-kante);
}
.lz {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--glas-kante);
  min-height: 56px;
}
.lz.st-ja    { border-color: color-mix(in srgb, var(--fire) 55%, var(--line)); }
.lz.st-wv    { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.lz.st-nein  { opacity: .38; }
.lz .i span  { color: var(--mut); }
/* Das ⚪ für „noch offen" steht 3.159-mal in der Liste und wäre als grelle weiße
   Fläche das Lauteste auf dem Schirm. Nur die offenen dämpfen — 🔥 und 🟡 sollen
   weiter herausstechen, das ist ihre ganze Aufgabe. */
.lz:not(.st-ja):not(.st-wv):not(.st-nein) .st { opacity: .3; }

/* Der Dialer-Container trägt im Cockpit selbst die Klasse .karte, sein Inhalt ist
   aber schon die Glasfläche — sonst stehen zwei Rahmen ineinander. */
#dialer.karte { background: none; border: none; box-shadow: none; padding: 0; }

/* Der Dialer ist die EINE Fläche, auf die der Vertriebler schaut → echtes Glas. */
#dialer .lead-gross {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: 1px solid var(--gold-linie);
  border-radius: 18px;
  box-shadow: var(--schatten-hoch), var(--glas-kante);
  padding: 16px 16px 14px;
}
#dialer .lead-gross .nm {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -.015em;
  color: var(--ink);
}
#dialer .lead-gross .kat { color: var(--ink-soft); }
.frei {
  background: var(--card);
  border: 1px dashed var(--line-stark);
  border-radius: var(--r);
  color: var(--mut);
}

/* ---------- Kopfzeile ------------------------------------------------------ */
header { padding-top: 4px; }

/* Zurück zur Übersicht. Ohne ihn führt der Weg von der Anruf-Liste zu den
   Laufrouten nur über den Browser-Pfeil — und der ist in einer zum Startbildschirm
   hinzugefügten Seite gar nicht sichtbar. */
.sb-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px 0 9px; margin: 0 0 6px -9px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--mut); border-radius: 999px;
}
.sb-zurueck:active { background: var(--gold-soft); color: var(--gold-hell); }

/* ---------- Untere Leiste: schwebt → echtes Glas ---------------------------- */
nav {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border-top: 1px solid var(--gold-linie);
  box-shadow: 0 -8px 30px rgba(0,0,0,.45);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
nav button { color: var(--mut); min-height: 52px; }
nav button.an { color: var(--gold-hell); }
nav button.an .ico { filter: drop-shadow(0 0 8px rgba(201,168,107,.45)); }

/* ---------- Der Anruf-Knopf: das wichtigste Element der App ------------------
   Gold trägt hier Text, deshalb dunkle Schrift darauf (weiß auf Gold wäre 2:1). */
a.telXL {
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  color: #0C0A07;
  border: none;
  border-radius: 16px;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 6px 22px rgba(201,168,107,.28), inset 0 1px 0 rgba(255,255,255,.35);
  min-height: 62px;
}
a.telXL:active { transform: translateY(1px); box-shadow: 0 3px 12px rgba(201,168,107,.24); }

/* ---------- Ergebnis-Knöpfe ------------------------------------------------- */
.erg button,
.sheet .opts button {
  background: var(--card-hoch);
  border: 1px solid var(--line-stark);
  color: var(--ink);
  border-radius: var(--r-kl);
  font-weight: 600;
  min-height: 58px;
  box-shadow: var(--glas-kante);
}
.erg button:active,
.sheet .opts button:active { background: var(--gold-soft); border-color: var(--gold-linie); }
.erg .ja {
  border-color: color-mix(in srgb, var(--fire) 60%, var(--line));
  color: var(--fire);
  font-weight: 800;
}

/* ---------- Marken-Knöpfe --------------------------------------------------- */
.aktbtn,
.sb-btn,
.sheet .cta,
.pill,
.person button.an {
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  color: #0C0A07;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  font-weight: 700;
}
.aktbtn, .sb-btn, .sheet .cta { min-height: 48px; border-radius: 999px; }
.sheet .cta { background: linear-gradient(180deg, #F7B87C, var(--fire)); color: #24140A; }

/* ---------- Eingabefelder --------------------------------------------------- */
.suche,
.sheet input,
.sheet textarea,
.sb-gate input {
  background: rgba(12, 10, 7, .6);
  border: 1px solid var(--line-stark);
  color: var(--ink);
  border-radius: var(--r-kl);
  min-height: 48px;
}
.suche::placeholder,
.sheet input::placeholder,
.sb-gate input::placeholder { color: var(--mut); opacity: .8; }
.suche:focus,
.sheet input:focus,
.sheet textarea:focus,
.sb-gate input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,107,.16);
}

/* ---------- Marker, Chips, Fortschritt -------------------------------------- */
.badge { border-color: var(--line-stark); color: var(--mut); border-radius: 999px; padding: 3px 9px; }
.badge.ohne { border-color: var(--gold-linie); color: var(--gold-hell); background: var(--gold-soft); }
.badge.wv   { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); }
.badge.grp  { border-color: var(--gold-linie); color: var(--gold); }

.chips button { background: var(--card); border: 1px solid var(--line-stark); color: var(--ink-soft); min-height: 40px; border-radius: 999px; }
.chips button.an { border-color: var(--gold); color: var(--gold-hell); background: var(--gold-soft); }

.balken { background: rgba(255,255,255,.07); }
.balken i { background: linear-gradient(90deg, var(--gold), var(--gold-hell)); box-shadow: 0 0 14px rgba(201,168,107,.4); }

.grph { color: var(--gold); border-bottom-color: var(--line); }
.zeit { color: var(--gold-hell); }
.gross { font-family: var(--serif); font-weight: 600; }
.statgrid .l { color: var(--mut); }

/* ---------- Angebots-Block (steht auf jeder Karte) -------------------------- */
.angebot {
  border: 1px solid var(--gold-linie);
  background: rgba(12, 10, 7, .45);
  box-shadow: var(--glas-kante);
}
.akopf { background: var(--gold-soft); border-bottom: 1px solid var(--gold-linie); }
/* Bewusst Sans: die Angebotstitel sind lange Aufzählungen ("Website + Google-Profil
   + Branchenbuch") und werden in der Serif dreizeilig und wuchtig. Die Serif-Stimme
   trägt der Betriebsname darüber — zweimal Serif untereinander konkurriert nur. */
.atitel { font-family: var(--sans); font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--gold-hell); }
.apreis { color: var(--ink); font-family: var(--sans); }
.apreis small { color: var(--mut); }
.posten li { border-top-color: var(--line); }
.posten p { color: var(--ink-soft); }
.pk b { color: var(--ink); }
.pp { color: var(--mut); }
.mehr summary { color: var(--gold); }
.reserve { color: var(--mut); border-top-color: var(--line); }
.reserve b { color: var(--ink-soft); }

/* ---------- Anruf-Listen ----------------------------------------------------
   Gleiches Prinzip wie die Laufrouten: eine Liste gehört einem, solange er sie hat. */
.listen-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
}
.listen-zeile b { font-family: var(--serif); font-weight: 600; font-size: 17px; display: block; }
.listen-zeile small { color: var(--mut); font-size: 12.5px; }
.listen-zeile .btnrow { margin-top: 0; flex: none; }
.listen-zeile .aktbtn { padding: 0 16px; font-size: 14px; }
/* Ohne Liste geht nichts — das darf man sehen. */
.listen-zeile.leer { border-color: var(--gold-linie); background: var(--gold-soft); }

.listen-wahl {
  display: grid; gap: 8px; max-height: 58vh; overflow-y: auto;
  margin-top: 4px; padding-right: 2px;
}
.listen-knopf {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 10px 13px;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--card-hoch); color: var(--ink);
  border: 1px solid var(--line-stark); border-radius: var(--r-kl);
  box-shadow: var(--glas-kante);
}
.listen-knopf b { font-variant-numeric: tabular-nums; font-weight: 800; }
.listen-knopf .meta { color: var(--mut); font-size: 12.5px; }
.listen-knopf .fort { color: var(--mut); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.listen-knopf .wer {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--lf, var(--mut));
}
.listen-knopf .wer .sb-punkt { background: var(--lf, var(--mut)); width: 8px; height: 8px; }
.listen-knopf.meine  { border-color: var(--gold); background: var(--gold-soft); }
.listen-knopf.meine .wer { color: var(--gold-hell); }
.listen-knopf.fremd  { border-color: color-mix(in srgb, var(--lf, var(--mut)) 55%, var(--line)); opacity: .8; }
.listen-knopf.fertig { opacity: .5; }

/* ---------- Admin ----------------------------------------------------------
   Bewusst zurückhaltend: Korrekturwerkzeug, kein Hauptweg. Sichtbar nur für die
   Admin-Rolle — erlaubt wird es serverseitig über den Admin-Code. */
button.admin, .admin-frei {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--warn);
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius: 999px; padding: 0 13px; min-height: 40px;
}
button.admin:active, .admin-frei:active { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.admin-frei { width: 100%; margin: -3px 0 4px; }
.sb-linkchen {
  display: block; width: 100%; margin-top: 10px; padding: 8px;
  font: inherit; font-size: 12.5px; cursor: pointer;
  background: none; border: none; color: var(--mut); text-decoration: underline;
}

/* ---------- Overlays: schweben → echtes Glas -------------------------------- */
.overlay { background: rgba(6, 5, 3, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: 1px solid var(--gold-linie);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--schatten-hoch), var(--glas-kante);
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.sheet h3 { font-family: var(--serif); font-size: 18px; }

/* ---------- Anmeldung ------------------------------------------------------- */
.sb-gate { background: transparent; }
.sb-gate::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 60% at 50% 0%, rgba(201,168,107,.12), transparent 60%), var(--bg);
}
.sb-gate-box {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: 1px solid var(--gold-linie);
  border-radius: 20px;
  box-shadow: var(--schatten-hoch), var(--glas-kante);
  padding: 28px 22px 24px;
}
.sb-gate-box h2 { font-family: var(--serif); font-weight: 600; }
.sb-gate-brand { color: var(--gold); }
.sb-profil-btn { background: var(--card-hoch); color: var(--ink); min-height: 52px; box-shadow: var(--glas-kante); }
.sb-neu { border-top-color: var(--line); }

/* Kopf-Chip „wer bin ich" */
.sb-ich {
  background: var(--glas);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  min-height: 40px;
}

/* ---------- Routen-Seite ---------------------------------------------------- */
.route {
  background: linear-gradient(180deg, var(--card-hoch), var(--card));
  border: 1px solid var(--line);
  box-shadow: var(--schatten), var(--glas-kante);
}
.route summary { min-height: 56px; }
.rnr {
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  color: #0C0A07;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.rinfo b, .lname { color: var(--ink); }
.lname { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
.rinfo small, .rstat, .lmeta { color: var(--mut); }
.rstat.voll { color: var(--done); }
.lnr { background: var(--gold-soft); color: var(--gold-hell); }
.laden { border-bottom-color: var(--line); }
.rlinks { border-bottom-color: var(--line); }
.rlinks a, .adr a, a { color: var(--gold-hell); }

.sb-status-zeile {
  background: rgba(12,10,7,.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
}
.sb-status-zeile button { background: var(--card-hoch); border-color: var(--line-stark); color: var(--ink); min-height: 44px; }
.sb-status-zeile button.haupt {
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  border-color: transparent; color: #0C0A07;
}

/* ---------- Tabellen, Trenner, Kleinkram ------------------------------------ */
th, td { border-top-color: var(--line); color: var(--ink-soft); }
th { color: var(--mut); }
td.f { color: var(--fire); }
.block { border-left-color: var(--line-stark); }
.block.jetzt { border-left-color: var(--gold); }
label.check { border-top-color: var(--line); }
label.check input { accent-color: var(--gold); width: 24px; height: 24px; }
.hinweis, .undo button, .linkbtn { color: var(--mut); }

/* Gemessen: „Maps" und „überspringen" waren 17 px hoch — auf einem Handy, das mit
   einer Hand in Bewegung bedient wird, ist das kein Ziel, sondern Glückssache.
   Negativer Rand hält das Layout, das Padding vergrößert nur die Trefferfläche. */
.adr a, .rlinks a, .undo button, .skip button, .linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  margin: -8px -8px;
}
.skip, .undo { margin-top: 10px; }
.okmsg { color: var(--done); }
.spick summary, .spick .ew b { color: var(--gold); }
.spick blockquote, .tuer blockquote, .oton blockquote { border-left-color: var(--gold); color: var(--ink-soft); }
details.abschn summary::after { color: var(--mut); }
.regel { border-top-color: var(--line); }

button:focus-visible, a:focus-visible, input:focus-visible,
summary:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 2px;
}

/* ---------- Rücksicht ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  a.telXL:active { transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Schwache Geräte: Blur ist das Erste, was fällt — Fläche bleibt, Lesbarkeit bleibt. */
@media (max-width: 380px), (update: slow) {
  #dialer .lead-gross, nav, .sheet, .sb-gate-box, .sb-ich, .sb-status-zeile {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--card);
  }
}