/* Marke: die gemeinsamen Schrift- und Farbwerte aller BATC-Seiten.
   Was: Definiert einmal, was Backoffice und Gaesteseiten teilen -- Schriften,
   Markenfarben, Bedeutungsfarben und die Mindestgroesse von Bedienzielen.
   Warum: Vor dieser Datei setzten vier Stylesheets ihre Werte je einzeln;
   die Putzliste lief auf Arial, die Gaesteseite auf Segoe UI, und 1808 rohe
   Farbwerte standen 724 Variablen-Verwendungen gegenueber. Eine Aenderung am
   Schema musste an ueber tausend Stellen nachgezogen werden.
   Arbeitet zusammen mit: style.css, theme.css, putzliste.css, homepage.css,
   reservieren.css, reservation-requests.css -- alle laden diese Datei zuerst
   und duerfen ihre eigenen Werte weiterhin daraus ableiten.
   [Aufgabe: Rahmen] */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter:wght@400;500;600;700&display=swap");

:root {
    /* ---- Schrift ----------------------------------------------------- */
    /* Bricolage Grotesque fuer Ueberschriften, Inter fuer Text. Beide sind
       in den Seiten als Google-Font eingebunden; die Rueckfallkette haelt
       das Layout, falls die Schrift nicht laedt. */
    --schrift-display: "Bricolage Grotesque", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
    --schrift-text: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
    --schrift-zahl: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    /* ---- Markenfarben, gemessen auf der Gaesteseite ------------------- */
    --marke-nacht: #00051a;
    --marke-nacht-2: #050b24;
    --marke-cyan: #64d5ff;
    --marke-blau: #2c66f7;
    --marke-violett: #7e26c7;
    --marke-rose: #ef4f9a;
    --marke-gold: #ffc861;

    /* Tagfassung derselben Toene: auf hellem Grund lesbar abgedunkelt.
       Noetig, weil das Backoffice tagsueber im hellen Center bedient wird --
       dort versagt ein dunkles Schema, und helle Schrift auf dunklem Grund
       wirkt fuer Menschen mit Astigmatismus verwaschen. */
    --marke-tief: #0d4a8f;
    --marke-tief-hell: #e8f2fd;

    /* ---- Bedeutungsfarben -------------------------------------------- */
    /* Bewusst getrennt von den Markenfarben: Sonst laesst sich "erledigt"
       nicht von "Akzent" unterscheiden. Je eine Fassung fuer hellen und
       dunklen Grund. */
    --sinn-gut: #1f9d63;
    --sinn-gut-dunkel: #3ddc97;
    --sinn-warnung: #b06a00;
    --sinn-warnung-dunkel: #ffc861;
    --sinn-fehler: #d0364b;
    --sinn-fehler-dunkel: #ff5c72;

    /* ---- Bedienziele -------------------------------------------------- */
    /* 48 px ist die Untergrenze fuer Finger; 40 px nur dort, wo mehrere
       Ziele in einer Zeile stehen und Platz fehlt. Beides mit mindestens
       8 px Abstand zueinander. */
    --ziel: 48px;
    --ziel-eng: 40px;
    --ziel-abstand: 8px;
}

/* ---- Grundzuweisung -------------------------------------------------- */
/* Diese Datei wird als erstes Stylesheet geladen. Bei gleicher Spezifitaet
   gewinnt deshalb jede spaetere Regel -- die Zuweisungen hier sind eine
   Grundlage, kein Zwang. Heute setzt kein Stylesheet eine eigene Schrift
   fuer Ueberschriften, also greift die Display-Schrift ueberall. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--schrift-display);
    letter-spacing: -0.02em;
}

/* Zahlen, die untereinander stehen sollen: Temperaturen, Preise, Uhrzeiten.
   Klassen bewusst additiv -- kein bestehendes Element wird umgestellt. */
.zahl,
.tabellenzahl,
time[datetime] {
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums;
}

/* ── Bedienziele auf dem Handy (04.09.2026) ───────────────────────────
   Gemessen: 56 Bedienelemente mit fester Höhe unter 44 px — von der
   Werkzeugleiste (32) über die Abmelde-Schaltfläche (34) bis zu den
   Eingabefeldern der Einstellungen (28-36).

   Sie einzeln anzuheben würde das Desktop-Layout sprengen: Ein
   Einstellungsformular mit 32-px-Feldern in Tabellenzeilen wird mit
   44 px anderthalbmal so hoch. Auf dem Desktop ist das auch nicht
   nötig — die Maus trifft genau.

   Auf dem Handy trifft der Finger nicht genau, und dort sitzen 60 % der
   Nutzung. Deshalb gilt das Mindestmaß dort, und zwar für alles
   Bedienbare auf einmal statt an 56 Einzelstellen.

   Ausgenommen: Kästchen und Auswahlknöpfe (sie haben ihr eigenes Maß,
   ihr Klickbereich ist die umgebende Beschriftung) und alles, was
   ausdrücklich `data-ziel-frei` trägt.

   Warum `!important`: `marke.css` lädt als **erste** Stildatei. An 28
   Stellen verkleinern spätere Handy-Regeln die Bedienelemente sogar
   noch — auf der Aufgabenseite etwa von 42 auf 38 px. Ohne Vorrang
   verliert das Mindestmaß gegen genau die Regeln, die es korrigieren
   soll. Das ist die Ausnahme, für die es `!important` gibt: eine
   Zugänglichkeitsschranke, die lokale Verdichtung überstimmt. */
@media (max-width: 767px) {
    button,
    .btn,
    [role="button"],
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) {
        min-height: 44px !important;
    }

    /* Verweise sind nur dort Bedienziele, wo sie als Schaltfläche
       auftreten — ein Verweis im Fließtext soll nicht 44 px hoch
       werden. Deshalb namentlich statt pauschal über `a`. */
    a.team-tab,
    a.page-tab,
    a.back-link,
    a.ghost-btn,
    a.primary-btn,
    a.nav-link,
    .team-tab,
    .page-tab,
    .back-link {
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
    }

    /* Wo eine Zeile bewusst eng bleiben soll. */
    [data-ziel-frei],
    [data-ziel-frei] button,
    [data-ziel-frei] input {
        min-height: 0 !important;
    }
}