/* ==========================================================================
   DIE GRÖSSE DER SYMBOLE (18.08.2026)

   Seit `includes/icons.php` Font Awesome ausgibt, sind die Symbole keine SVG mehr, sondern
   Schriftzeichen — und damit gilt eine andere Regel: ein SVG war so gross, wie `width`/`height`
   sagten; ein Schriftzeichen ist so gross, wie die SCHRIFT an dieser Stelle ist. Die vorhandene
   Regel `.icon { width: 18px; height: 18px }` spannte also nur noch einen leeren Rahmen auf,
   während das Zeichen darin in der Schriftgrösse des Elternteils steckte. In einer Fussleiste mit
   10 px Beschriftung war es 10 px klein — der Wirt: „иконки вернулись, но что-то очень маленькие".

   Diese Datei gibt jeder Grössenklasse ihre Schriftgrösse, passend zum Rahmen, den style.css
   ohnehin schon setzt. Sie gilt für ALLE drei Anwendungen unter /kasse/ (Verwaltung, Kasse,
   Küche) und wird deshalb in allen drei Köpfen geladen — dieselbe Lehre wie bei Font Awesome
   selbst: `includes/` gehört dem Verzeichnis, nicht dem Bereich.
   ========================================================================== */

i.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;          /* passend zu .icon { width: 18px } in style.css */
    line-height: 1;
    vertical-align: -0.15em;
}

/* SICHERUNG, und sie steht mit Absicht HIER OBEN.
   Kein Symbol soll kleiner sein als 16 px, auch wenn es in einer Leiste mit 10-px-Beschriftung
   steht und keine der besonderen Regeln weiter unten seinen Klassennamen kennt. Ein Tippfehler in
   einem Klassennamen fällt in CSS nicht auf — es passiert einfach nichts, und genau so blieben die
   Zeichen der Verwaltungs-Fussleiste bei 10,4 px.

   Weiter unten, nicht hier: die Regeln dort sollen diese Untergrenze ÜBERSCHREIBEN dürfen. Bei
   gleichem Gewicht entscheidet in CSS die Reihenfolge — stünde die Sicherung am Dateiende, würde
   sie die 22 px der Fussleisten wieder auf 16 herunterziehen. Genau das ist beim ersten Anlauf
   passiert. */
i.icon:not([class*="icon-sm"]) { font-size: max(16px, 1em); }

/* Die vorhandenen Grössenklassen — dieselben Zahlen wie ihre Rahmen. */
i.icon-sm { font-size: 14px; }
i.icon-md { font-size: 20px; }
i.icon-lg { font-size: 25px; }
i.icon-xl { font-size: 36px; }

/* Das Symbol IM Knopf: style.css gibt ihm 17 px, in kleinen Knöpfen 15. */
i.btn-symbol { font-size: 16px; }
.btn-sm i.btn-symbol { font-size: 14px; }

/* Die Leisten mit Beschriftung darunter (Kasse, Küche, Verwaltung auf dem Telefon). Dort ist die
   Schrift bewusst klein — 10 px —, und ein Zeichen in dieser Grösse wäre nicht zu treffen. */
.bottom-nav i.icon,
.bottom-nav-icon-wrap i.icon,
.admin-bottom-nav i.icon,
.kasse-tabbar i.icon,
.tab-leiste i.icon {
    font-size: 22px;
}

/* Die Kacheln oben in der Kasse (Tisch, Küche, Marke, Reservierung, Scan) tragen nur ein Zeichen
   und sonst nichts — dort darf es die Fläche auch füllen. */
.kasse-kopf-kachel i.icon,
.kasse-schnellwahl i.icon { font-size: 26px; }

/* Der Seitenkopf des Hauses (Kassenbericht, Buchung): 24 px, wie `SeitenKopf` im
   Programm. Muss HIER stehen — in style.css verlor die Regel gegen `i.icon:not(...)`
   weiter oben, gleiche Staerke, spaeteres Blatt (gemessen 07.09.2026: 16 px statt 24).
   Die Breite dazu, damit das Zeichen nicht schmaler steht als das SVG daneben. */
.seiten-kopf i.icon { font-size: 24px; line-height: 1; width: 24px; text-align: center; }

/* ==========================================================================
   DIE FARBE DER SYMBOLE (18.08.2026)

   Der Wirt: „и цветные иконки не забудь". Die Farbe kommt aus `ICON_FARBE` in includes/icons.php
   und steht für die BEDEUTUNG: Geld grün, Zeit gelb, Löschen rot. Dieselben Töne wie in der
   Buchhaltung (brand.css).

   WARUM ALS KLASSE UND NICHT ALS `style`: ein Symbol steht oft auf farbigem Grund — im blauen
   Knopf, im gewählten Reiter, in der Kopfzeile. Dort muss es die Schriftfarbe seines Ortes
   annehmen, sonst leuchtet ein gelbes Zeichen auf blauem Grund. Mit einer Klasse genügt dafür
   EINE Ausnahme weiter unten; ein `style`-Attribut wäre von aussen nicht mehr zu überstimmen.
   ========================================================================== */
/* WARUM `!important`: die Farbe kommt aus EINER Klasse (Gewicht 0-1-0), und in style.css stehen
   überall Regeln wie `.admin-bottom-nav a .icon` (0-2-1), die jedes Symbol ihrer Umgebung
   einfärben. Ohne Nachdruck gewinnen die — gemessen: die Kiste bei „Produkte" blieb blau statt
   gelb. Die Ausnahme für farbige Gründe weiter unten trägt denselben Nachdruck und ist genauer,
   sie sticht diese Regeln also weiterhin. */
.ikon-gruen   { color: #10b981 !important; }
.ikon-rot     { color: #ef4444 !important; }
.ikon-gelb    { color: #f59e0b !important; }
.ikon-blau    { color: #3b82f6 !important; }
.ikon-lila    { color: #8b5cf6 !important; }
.ikon-rosa    { color: #ec4899 !important; }
.ikon-tuerkis { color: #14b8a6 !important; }
.ikon-grau    { color: #64748b !important; }

/* Auf farbigem Grund gilt die Schriftfarbe des Ortes — sonst stünde ein gelbes Zeichen auf
   blauem Knopf. Betrifft Knöpfe, gewählte Reiter und Menüpunkte sowie alles, was der
   Aufrufer ausdrücklich mitfärbt. */
/* Die Ausnahme muss ENG sein. Der erste Anlauf schrieb `.active [class*="ikon-"]` — das trifft
   jedes Symbol IRGENDWO unterhalb eines aktiven Blocks, also auch das grüne Plus in einem
   „+ Hinzufügen" mitten im geöffneten Bereich. Gemessen: es erbte das Dunkelblau der Verweise
   statt seines Grüns. Gemeint war immer nur das Symbol IM aktiven Punkt selbst. */
.btn > [class*="ikon-"],
[class*="ikon-"].btn-symbol,
a.active > [class*="ikon-"],
button.active > [class*="ikon-"],
.admin-sidebar-link.active > [class*="ikon-"],
.admin-bottom-nav a.active > [class*="ikon-"],
.bottom-nav-item.active > [class*="ikon-"] {
    color: inherit !important;
}

/* ==========================================================================
   EINE HÖHE FÜR ALLE FUSSLEISTEN (18.08.2026)

   Der Wirt hat die drei Anwendungen im Umschalter des Telefons nebeneinander gesehen: „у всех
   высота разная, надо стандарт иметь". Und so war es — jede Leiste war so hoch, wie ihr Inhalt
   sie machte. Ab hier steht die Höhe fest, in Buchhaltung wie Verwaltung, und der Inhalt richtet
   sich danach.

   56 px sind das Mass, das auch Apple und Android für eine solche Leiste vorsehen; darunter kommt
   die Sicherheitszone des Geräts, darüber nichts.
   ========================================================================== */
/*
 * WARUM HIER DIE GANZE `padding`-KURZFORM STEHT (18.08.2026, dritter Anlauf).
 *
 * Zweimal hiess es „gleich hoch", zweimal sah der Wirt am Telefon einen Unterschied — und im
 * Prüfstand waren beide 72 px. Der Prüfstand hat aber keine Sicherheitszone; ein iPhone hat 34 px.
 * Und genau die stand an ZWEI Stellen: in meiner Höhe UND in dem `padding` aus style.css
 * (`calc(6px + env(safe-area-inset-bottom))`), das ich nur teilweise überschrieben hatte. Am
 * Schreibtisch ist beides null und fällt nicht auf; auf dem Gerät addierte es sich.
 *
 * Deshalb die KURZFORM: sie ersetzt das alte `padding` vollständig, statt sich mit ihm zu
 * mischen. Es gibt keine Zeile mehr, die die Sicherheitszone ein zweites Mal einrechnet.
 */
.admin-bottom-nav {
    height: calc(72px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    align-items: center;
    padding: 4px max(8px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px));
}
.admin-bottom-nav-inner {
    height: 100%;
    align-items: center;
}

/* ==========================================================================
   DAS SCHLIESSKREUZ (18.08.2026)

   Der Wirt: „этот х на окнах с мобильного неудобно, есть какая-то альтернатива? может надо во
   всех окнах". Er hat recht, und es liegt nicht am Zeichen, sondern an der FLÄCHE: das Kreuz war
   ein blosser Buchstabe ohne Innenabstand — ein Ziel von rund 22 × 22 Punkten. Apple und Android
   nennen beide **44** als Mindestmass für etwas, das ein Daumen treffen soll; darunter trifft man
   danebenliegende Felder.

   Also dieselbe Fläche wie bei jedem anderen Knopf, ein leiser runder Grund, damit man sieht, wo
   man drücken darf, und Rot erst beim Berühren. Das Zeichen selbst bleibt — ein Kreuz ist das
   verständlichste Zeichen fürs Schliessen, und ein Pfeil oder ein Wort wäre an dieser Stelle
   ungewohnter, nicht besser.

   Gilt für alle drei Anwendungen unter /kasse/, weil diese Datei überall geladen wird.
   ========================================================================== */
/*
 * ROT IM RUHEZUSTAND (17.09.2026, Ansage des Wirts: *„да удобно только можно их сделать
 * красными"* — mit einem Bild der laufenden Kasse, fünf Tische offen).
 *
 * Bis heute war das Kreuz grau und wurde erst beim Berühren rot. Das ist die Regel für einen
 * Bildschirm, den man liest; hier wird gearbeitet, und wer mit vollen Händen ein Fenster
 * zumachen will, sucht das Kreuz, statt es zu finden. Rot sagt sofort, wo es ist.
 *
 * NUR ZEICHEN UND GRUND, keine gefüllte rote Fläche. Rot trägt auf diesem Bildschirm schon
 * eine Auskunft — ein Tisch, an dem Küche oder Bar noch etwas offen haben. Eine zweite
 * Bedeutung in derselben Farbe wäre eine zu viel; dieselbe Überlegung steht in style.css
 * beim Zusammenrücken der Tische („Keine Füllfarbe — die trägt schon den Zustand der Küche").
 *
 * `--djk-danger` statt einer festen Zahl: im dunklen Erscheinungsbild ist das Rot heller
 * (#f87171 gegen #ef4444), sonst säße ein dunkles Rot auf dunklem Grund.
 */
.modal-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.10);
    color: var(--djk-danger, #ef4444);
    font-size: 1.5rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
/* Beim Berühren kräftiger — sonst gäbe es keine Rückmeldung mehr, seit die Ruhe schon rot ist. */
.modal-close:hover,
.modal-close:focus-visible {
    background: rgba(239, 68, 68, 0.22);
    color: var(--djk-danger, #ef4444);
}
.modal-close:active { background: rgba(239, 68, 68, 0.34); }

/* Oben rechts blieb dadurch zu wenig Luft — das Kreuz ist jetzt doppelt so gross wie vorher. */
.modal-box .modal-close { top: 12px; right: 12px; }

/* ==========================================================================
   DAS ZEICHEN AN DER FELDBESCHRIFTUNG (18.08.2026)

   Gesetzt von assets/js/feld_symbole.js. Nur Abstand und Breite — die Farbe kommt aus den
   .ikon-* Klassen weiter oben, die Grösse aus .icon-sm.

   Feste Breite, damit die Wörter untereinander auf einer Linie beginnen: ein „i" und ein „m"
   sind verschieden breit, und ohne Rahmen stünde jede Beschriftung ein wenig anders. */
.feld-symbol {
    width: 1.15em;
    margin-right: 6px;
    text-align: center;
    opacity: 0.9;
}