/* ═══════════════════════════════════════════════════════════════════════════
   handschrift.css — die Handschrift der Verkaufsseite auf den WERKZEUGEN.
   Angelegt 23.08.2026.

   WARUM ES DIESE DATEI GIBT
   =========================
   Am 23.08.2026 hat der Nutzer entschieden: „stelle beide um, es geht nicht
   nur drum das es werkzeuge ist, das UI ist auch wichtig." Bis dahin galt die
   Regel im Kopf von hacienda.css — Gastseite, Abholseite und Pult seien
   Werkzeug und müssten langweilig sein. Diese Regel ist damit aufgehoben.

   ⚠️ SIE IST NICHT DASSELBE WIE hacienda.css, UND DAS IST ABSICHT.
      hacienda.css baut einen RAUM: 72-px-Anzeigenschrift, Papierbanner,
      Torbögen, 148 px Luft zwischen den Abschnitten. Über einer laufenden
      Bestellliste wäre das Zierde auf Kosten des Werkzeugs — der Wirt sähe
      drei Bestellungen statt zwölf, und der Gast scrollte durch Weissraum
      statt durch die Karte.

      Diese Datei übersetzt dieselbe Handschrift in die Dichte eines
      Werkzeugs. Was übernommen wird, ist das, woran man das Haus ERKENNT:

        1. Pillenform an jedem Knopf            (999 px statt 10–20 px)
        2. Der Chili→Cempasúchil-Verlauf        auf der EINEN Haupthandlung
        3. Überschriften in 900 mit enger Laufweite
        4. Das Talavera-Muster als Grund        (2 %, wie auf der Verkaufsseite)
        5. Eine Haarlinie im Verlauf oben       statt des vollen Papierbanners

      Punkt 5 ist die eine bewusste ABWEICHUNG. Das echte `.hc-picado` ist
      34 px hoch. Unter einem klebenden Kopf auf einem Telefon ist das eine
      Bildschirmzeile, die niemandem hilft. Zwei Pixel derselben Farben sagen
      dasselbe und kosten nichts.

   ⚠️ EIN VERLAUF JE BILDSCHIRM. Er markiert die Haupthandlung — „In den
      Warenkorb", „Bestellen", „Speichern". Bekäme ihn jeder Knopf, markierte
      er nichts mehr, und die Seite schriee. Sekundäres bleibt flach.

   ⚠️ `--hc-verlauf` STEHT AUF `.hc`, NICHT AUF `:root` — deshalb hier ein
      EIGENER Name. Die Werkzeugflächen tragen die Klasse `hc` nicht (sie
      sollen die Raumwerte wie `--hc-luft` gerade NICHT erben), und ein
      `var(--hc-verlauf)` liefe dort ins Leere: der Knopf bliebe einfach flach,
      ohne Fehlermeldung.

   REIHENFOLGE IM <head>: als LETZTE der Bistro-Dateien.
     1. /assets/style.css  ODER die eigenen <style>-Blöcke der Seite
     2. theme-*.css        (setzt --bx-*)   ← von theme.js eingehängt
     3. bruecke.css / gast-bruecke.css      (leitet die alten Namen ab)
     4. DIESE DATEI
   Sie arbeitet mit derselben Spezifität wie die Regeln, die sie ersetzt, und
   gewinnt deshalb NUR über die Reihenfolge. Steht sie zu früh, passiert
   nichts — sichtbar an flachen, eckigen Knöpfen.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ⚠️ DER VERLAUF IST NICHT MEHR DIE KNOPFFLAECHE (24.08.2026).
     Weisse Schrift darauf ergab 2,06 : 1 am Cempasuchil-Ende — durchgefallen,
     und zwar an der Haupthandlung jedes Bildschirms. `--bx-text` auf
     `--bx-bg` ergibt 16,9 bis 19,7 : 1 in allen vier Handschriften und kippt
     von selbst mit dem Thema.
     Er bleibt fuer die HAARLINIE oben — dort steht kein Text darauf. */
  --hs-verlauf: linear-gradient(118deg, var(--bx-accent, #FF375F), var(--bx-orange, #FF9F0A));

  /* Die Haupthandlung, nach dem Vorbild von mi-su.css:127 (`.btn-fill`). */
  --hs-flaeche: var(--bx-text, #F2F2F7);
  --hs-schrift: var(--bx-bg, #0a0a12);
}

/* ── 1. Die Haarlinie ─────────────────────────────────────────────────────
   Das Papierbanner der Verkaufsseite, auf zwei Pixel eingedampft. Sie liegt
   über allem, auch über klebenden Köpfen — sie ist der obere Rand des Hauses.
   `pointer-events:none`, damit sie keinen Klick abfängt. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 2px;
  background: var(--hs-verlauf);
  z-index: 9999; pointer-events: none;
}

/* ── 2. Der Talavera-Grund ────────────────────────────────────────────────
   Derselbe achtzackige Stern wie in `hacienda.css`, dieselbe Deckkraft.
   `fixed`, damit er beim Scrollen einer langen Bestellliste stehenbleibt —
   ein mitwanderndes Muster wäre Unruhe genau dort, wo gearbeitet wird. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FF375F' stroke-width='1.1'%3E%3Cpath d='M36 6 L44 28 L66 36 L44 44 L36 66 L28 44 L6 36 L28 28 Z'/%3E%3Ccircle cx='36' cy='36' r='7.5'/%3E%3Cpath d='M0 0 L14 14 M72 0 L58 14 M0 72 L14 58 M72 72 L58 58'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* ── 3. Überschriften ─────────────────────────────────────────────────────
   Nur Gewicht und Laufweite, NICHT die Größe. Die Größen einer
   Arbeitsoberfläche sind an ihrer Dichte gewachsen; sie zu vergrößern hiesse,
   Zeilen vom Bildschirm zu schieben. */
.confirm-title,
.dash-panel h2, .dash-panel h3,
.chart-title, .deepdive-h3 {
  font-weight: 900;
  letter-spacing: -.022em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIE GASTSEITEN — order/ und takeaway/ (identischer Wortschatz)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die Haupthandlung. `.add-btn` und `.cart-btn` sind die EINEN Knöpfe, die
   der Gast drückt — sie bekommen den Verlauf.

   ⚠️ `:disabled` UND `.hidden` BLEIBEN UNANGETASTET. Beide sind (0,2,0) und
      schlagen diese Regel (0,1,0) von selbst. Das ist keine Nachlässigkeit,
      sondern der Grund, warum hier NICHT `!important` steht: ein ausgegrauter
      Knopf, der trotzdem leuchtet, lädt zum Drücken ein und tut nichts. */
.add-btn, .cart-btn, .name-btn {
  border-radius: 999px;
  background: var(--hs-flaeche);
  color: var(--hs-schrift);
  font-weight: 800;
}

/* ⚠️ `.name-btn` FEHLTE IM ERSTEN ENTWURF, und das war sichtbar falsch: Es ist
      der ALLERERSTE Knopf, den ein Gast sieht („Start Ordering" am Tisch,
      „Browse Menu" an der Abholtheke). Er blieb bei 14 px und flach, waehrend
      das freiwillige Anmeldeangebot DARUNTER als Pille erschien — die
      Nebenhandlung sah moderner aus als die Haupthandlung.
      Gemessen gefunden (53 px / radius 14px / kein Verlauf), nicht geraten.

   ⚠️ `.name-btn:disabled` bleibt unberuehrt: (0,2,0) schlaegt (0,1,0). Genau
      wie bei `.add-btn` — waehrend „Starting…" laeuft, bleibt der Knopf grau. */

/* Die Kategorienpillen. Rund wie `hc-knopf`, und die gewählte trägt den
   Verlauf — dieselbe Sprache wie der volle Knopf auf der Verkaufsseite. */
.cat-pill, .cat-pill-sm { border-radius: 999px; }
/* ⚠️ DIE AKTIVE PILLE BEKOMMT KEINE HELLE FLAECHE.
   Eine Reihe Pillen mit einer hell gefuellten darin schriee lauter als der
   Hauptknopf daneben — und die Wahl einer Kategorie ist keine Haupthandlung.
   Der Akzent bleibt hier, wo er auf der Hauptseite auch lebt: in Linie und
   Schrift. Gerechnet: Akzent auf Seitengrund 5,60 : 1 (standard) bis
   4,53 : 1 (betrieb), alle vier bestehen. */
.cat-pill.active {
  background: transparent;
  border-color: var(--bx-accent);
  color: var(--bx-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIE HAUSSEITE — h/index.php, die oeffentliche Seite eines Hauses

   Sie spricht bereits `bx-*` aus base.css und traegt das Thema, das der WIRT
   gewaehlt hat (`theme-<?= $v['theme'] ?>.css`) — sie ist also schon in der
   Familie. Ihr fehlten nur die Hacienda-Zeichen.
   ═══════════════════════════════════════════════════════════════════════════ */

.bx-btn, .bx-btn--gross { border-radius: 999px; }

/* ⚠️ AUCH HIER NUR DIE EINE HAUPTHANDLUNG. `--primary` ist auf der Hausseite
      „Karte ansehen" bzw. „Tisch reservieren"; alles andere bleibt flach. */
.bx-btn--primary {
  background: var(--hs-flaeche);
  border-color: transparent;
  color: var(--hs-schrift);
}
/* Der Hover setzt im Thema eine FESTE Farbe (#ff5070) und haette den Verlauf
   genau beim Hinsehen verschluckt — dieselbe Falle wie bei `.btn-bars`. */
.bx-btn--primary:hover {
  background: var(--hs-flaeche);
  filter: brightness(.94);   /* helle Flaeche wird beim Hover leicht dunkler */
}

/* ═══════════════════════════════════════════════════════════════════════════
   DAS PULT — die Arbeitsoberfläche hinter der Anmeldung
   ═══════════════════════════════════════════════════════════════════════════ */

/* Jeder Knopf wird zur Pille. `.btn` steht in /assets/style.css mit (0,1,0);
   diese Regel hat dieselbe Spezifität und gewinnt über die Reihenfolge. */
.btn { border-radius: 999px; }
.btn-lg { border-radius: 999px; }

/* Die Haupthandlung im Pult. `.btn-bars` steht im <style>-Block der Seite
   selbst — der kommt VOR diesem Link, also gewinnt diese Regel. */
.btn-bars {
  background: var(--hs-flaeche);
  color: var(--hs-schrift);
  font-weight: 800;
}
/* ⚠️ DER HOVER MUSSTE MIT. `.btn-bars:hover` setzt in der Seite eine FESTE
      Farbe (#ff5070) — ohne diese Zeile verschwände der Verlauf genau in dem
      Moment, in dem der Zeiger darauf steht. Ein Knopf, der beim Hinsehen
      seine Gestalt wechselt, sieht nach Fehler aus. */
.btn-bars:hover {
  background: var(--hs-flaeche);
  filter: brightness(.94);   /* helle Flaeche wird beim Hover leicht dunkler */
}

/* Der aktive Reiter trägt den Verlauf in seiner Unterstreichung.
   `border-bottom-color` nimmt keinen Verlauf, deshalb `border-image`. */
.dash-tab.active {
  /* War `border-image: var(--hs-verlauf) 1`. Ein Zustandsmerkmal soll
     erkennbar sein, nicht leuchten — und eine flache Farbe braucht kein
     border-image, also faellt auch die Sonderbehandlung weg. */
  border-bottom-color: var(--bx-accent);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-image: none;
}

/* Der Inhalt muss ÜBER dem Talavera-Grund liegen. `body::after` steht auf
   z-index 0; ohne diese Zeile läge der Grund über statischen Elementen und
   schluckte Klicks — `pointer-events:none` verhindert das zwar, aber die
   Zeichenreihenfolge bliebe falsch. */
.dash, #guide-screen, #auth-screen,
.app-header, .cart-bar, .cart-sidebar { position: relative; z-index: 1; }
