/* Farbwelt, Schrift und Chrome der „Praxis Taskero" (Paket portal-demo).
 *
 * Wird in base.html nach {% tailwind_css %} geladen und überschreibt die neutralen
 * Vorgaben aus dem Tailwind-Bundle (theme/static_src/src/pages/landing.css). Reines
 * CSS, kein Build-Schritt.
 *
 * Diese Datei liegt auf JEDER Seite, auch im eingeloggten Bereich und auf den vier
 * Rechtsseiten, die keinen extra_head-Haken haben. Deshalb steht hier nur, was überall
 * gelten darf: die Token, die @font-face-Regeln und die Kosmetik der geteilten Chrome
 * (Kopfleiste, Fußzeile, Sprunglink, Einwilligungsfenster). Keine Regel auf body, html,
 * .btn oder anderen App-Klassen — die träfe den eingeloggten Bereich.
 * Alles Weitere steht in ../portal-demo/css/shell.css, das nur die Overlay-Seiten laden.
 *
 * Die url() sind relativ und müssen es bleiben: In Test und Produktion zeigt STATIC_URL
 * auf den S3-Host, ein absolutes /static/… liefe gegen die App-Domain und ergäbe 404.
 * Von /static/customer/ aus ist ../portal-demo/fonts/ der Weg — eine Ebene, nicht zwei.
 *
 * Die Welt ist gegenüber dem neutralen Produkt invertiert: Der Grund (--tz-counter) ist
 * die gesättigte tintenblaue Arbeitsfläche, --tz-card-bg die helle Maske darauf. Die
 * --tz-ink-Namen sind damit die Tinten DER ARBEITSFLÄCHE (hell); die Tinten der Maske
 * heißen --pd-* und stehen weiter unten. Jedes Paar ist gemessen (WCAG 2.1 AA), die
 * Verhältnisse stehen dort, wo sie tragen.
 */

/* == Archivo — die einzige Schrift dieser Welt. Eine variable Datei trägt beide
      Schnitte: Regular 400 / Breite 100 für den Lesetext, SemiBold 600 / Breite 92 für
      die Beschriftungsspalte und die Schaugrößen. Datei aus
      @fontsource-variable/archivo@5.3.0, SIL Open Font License 1.1 (Lizenztext neben
      der woff2-Datei). == */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../portal-demo/fonts/archivo-latin-wdth-normal.de2f1fe81758.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
        U+FFFD;
}

:root {
    /* ── Die Arbeitsfläche und die Maske ─────────────────────────────────────────── */
    --tz-counter: #12233c; /* die gesättigte Arbeitsfläche; Maske darauf 14,3:1 */
    --tz-counter-deep: #0b1729; /* die Fläche eine Stufe tiefer */
    --tz-card-bg: #f2f4f1; /* die Maske, und mit ihr Kopfleiste und Fußzeile */

    /* ── Tinten der Arbeitsfläche (hell). Sie tragen die Rechtsseiten, die diese Welt
          ausschließlich über Token bekommen. ───────────────────────────────────────── */
    --tz-ink: #e6ebf0; /* 13,2:1 auf der Arbeitsfläche, 15,0:1 auf der tiefen */
    --tz-ink-2: #a9b8cc; /* Zweittext, aus dem Blau abgetönt: 7,8:1 — nie grau */
    --tz-print-red: #a7c4ec; /* Überschriften, Links und Fokusring AUF der Fläche: 8,8:1 */

    /* ── Das eine Amber. Füllung, nie Schriftfarbe: als Text auf der Maske misst es
          2,02:1. Es liegt auf genau einer Fläche der Seite, der Tür zum Formular. ───── */
    --tz-stamp-orange: #e0a23c; /* Fläche gegen die Arbeitsfläche 7,1:1 */
    --tz-fill-caption: #0d1b2c; /* die Tinte darauf: 7,8:1 */
    --tz-stamp-ink: #7a4d08; /* dasselbe Amber tief gedruckt: 6,6:1 auf der Maske */
    --tz-wordmark-grey: #0d1b2c; /* die Füllung des Logos; keine Schriftfarbe */

    /* Der Fokusring und der Block-Cursor, der ihn trägt. Ein Ton kann nicht zugleich auf
       der Arbeitsfläche (L 0,017), der Maske (L 0,90) und dem Amber (L 0,42) über 3:1
       liegen — gegen das Blau bräuchte er L ≥ 0,15, gegen das Amber L ≤ 0,11. Also liegt
       der Cursor nie auf der Arbeitsfläche: um Masken und Türen sitzt er nach innen
       versetzt, um alles in einer Maske nach außen auf deren hellem Grund. Gemessen:
       15,7:1 auf der Maske, 7,8:1 auf dem Amber, 15,7:1 auf Kopfleiste und Fußzeile.
       Auf den Rechtsseiten, die keine Maske haben, ringt --tz-print-red mit 8,8:1. */
    --tz-perf: #0d1b2c;

    /* ── Linien. In dieser Welt ist jede Kante eine echte Haarlinie: keine Schatten,
          keine Rundung, keine vorgetäuschte Tiefe. ──────────────────────────────────── */
    --tz-rule: #4d6489; /* Haarlinie auf der Arbeitsfläche */
    --tz-rule-soft: #2d4262; /* dieselbe, eine Stufe leiser */
    --tz-lift: none; /* kein Schatten */
    --tz-lift-rest: none; /* kein Schatten */
    --tz-scrim: rgb(11 23 41 / 0.72); /* die Verdunkelung, flach — kein Glas */

    /* ── Satz ────────────────────────────────────────────────────────────────────── */
    --tz-font: "Archivo", system-ui, sans-serif;
    --tz-measure: 68ch;
    --tz-card-narrow: 600px;

    /* ── Die Tinten der Maske. Eigene Namen, weil --tz-ink dem Blau gehört. ──────── */
    --pd-ink: #0d1b2c; /* Lesetext auf der Maske: 15,7:1 */
    --pd-ink-2: #3f5470; /* Beschriftungsspalte und Nebentext: 7,0:1 (6,3:1 auf --pd-mask-deep) */
    --pd-mask-deep: #e4e8e6; /* Titelzeile, Hover-Füllung, Grund einer Meldung */
    --pd-rule: #c9d0d6; /* die Haarlinie zwischen zwei Zeilen einer Maske */
    --pd-edge: #9fadbb; /* der Rand der Maske gegen die Arbeitsfläche: 6,9:1 */
    --pd-control: #5f7186; /* der Rand eines Eingabefeldes: 4,5:1 (SC 1.4.11 verlangt 3:1) */
    --pd-amber-deep: #c48a2a; /* die Amber-Tür gedrückt; Tinte darauf 5,8:1 */
    --pd-btn-hover: #1c3558; /* der Primärknopf gedrückt; Maskenfarbe darauf 11,2:1 */
    --pd-error: #9b1c1c; /* 7,4:1 auf der Maske */
    --pd-ok: #1e6b3a; /* 5,9:1 auf der Maske */
}

/* ==========================================================================
   Chrome, die überall gilt
   --------------------------------------------------------------------------
   Kopfleiste, Fußzeile, Sprunglink und Einwilligungsfenster sind geteilt und
   erscheinen auch ausserhalb dieser Hülle. Sie bekommen hier nur Farbe, Linie und
   Schrift — die Geometrie bleibt, wie sie ist. Die Kopfleiste insbesondere bleibt
   position: fixed und ≤ 64 px: rund zwölf Vorlagen ausserhalb dieses Auftrags polstern
   für genau diese Höhe.

   Kopfleiste und Fußzeile sind hell, nicht blau: Sie sind der Rahmen um die
   Arbeitsfläche, und nur so steht das Logo — eine einzige Datei, die auch im Briefkopf
   des Audit-PDF, in E-Mails und in der Sidebar der App erscheint — überall auf dem
   Grund, für den es gezeichnet ist.
   ========================================================================== */

.tz-topbar {
    background: var(--tz-card-bg);
    border-bottom: 1px solid var(--pd-edge);
    color: var(--pd-ink);
}

/* .tz-shell .tz-topbar__link ist (0,2,0) im Bundle; dieselbe Spezifität später in der
   Quellreihenfolge gewinnt, ohne !important. */
.tz-shell .tz-topbar__link {
    color: var(--pd-ink);
}

.tz-shell .tz-topbar__link:hover {
    color: var(--pd-ink);
    text-decoration-line: underline;
}

/* Die Anmelden-Schaltfläche der Leiste: Umriss, keine Füllung — das Amber gehört der
   Formular-Tür und darf über ihr nicht ein zweites Mal erscheinen. Ohne Rundung und
   ohne Transform, weil in dieser Welt ein Zustand die Füllung wechselt, nie die Tiefe. */
.tz-topbar .tz-action {
    background: transparent;
    color: var(--pd-ink); /* 15,7:1 auf der Leiste */
    border-color: var(--pd-ink);
    border-radius: 0;
}

.tz-topbar .tz-action:hover {
    background: var(--pd-mask-deep);
    color: var(--pd-ink);
}

.tz-topbar .tz-action:active {
    transform: none;
}

.tz-topbar :focus-visible {
    outline: 2px solid var(--tz-perf); /* 15,7:1 auf der hellen Leiste */
    outline-offset: 2px;
}

/* Der Sprunglink fährt aus der Leiste heraus und steht auf ihrem Grund. Mit .tz-shell
   davor: Er ist ein <a>, und `.tz-shell a` im Bundle ist (0,1,1) — ohne den zweiten Namen
   behielte er die Linkfarbe der Arbeitsfläche und stünde mit gemessenen 1,62:1 auf der
   hellen Leiste. */
.tz-shell .tz-skip {
    background: var(--tz-card-bg);
    color: var(--pd-ink); /* 15,7:1 */
    border-color: var(--pd-ink);
    border-radius: 0;
}

.tz-footer {
    background: var(--tz-card-bg);
    border-top: 1px solid var(--pd-edge);
    color: var(--pd-ink);
}

.tz-footer address {
    color: var(--pd-ink);
}

.tz-footer h2 {
    color: var(--pd-ink-2); /* 7,0:1 */
}

.tz-shell .tz-footer a {
    color: var(--pd-ink);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.tz-shell .tz-footer a:hover {
    text-decoration-thickness: 2px;
}

.tz-footer :focus-visible {
    outline: 2px solid var(--tz-perf);
    outline-offset: 2px;
}

/* ── Das Einwilligungsfenster. Es hängt am <body>, ausserhalb von .tz-shell, und wird
      von base.html bedingungslos eingebunden: Farbe und Linie tragen die Token, die
      Schrift muss hier gesetzt werden, weil --tz-font sonst nur innerhalb der Hülle
      greift. Die Kennungen und der Aufbau bleiben unangetastet — sie sind der Vertrag
      mit cookiebar.module.js. ─────────────────────────────────────────────────────── */

.tz-cookie-panel {
    font-family: var(--tz-font);
    background: var(--tz-card-bg);
    border: 1px solid var(--pd-edge);
    border-radius: 0;
    box-shadow: none;
    color: var(--pd-ink);
}

.tz-cookie-title {
    color: var(--pd-ink);
}

.tz-cookie-link {
    color: var(--pd-ink);
    text-decoration-line: underline;
}

.tz-cookie-toggle {
    color: var(--pd-ink);
}

.tz-cookie-group {
    border-color: var(--pd-rule);
}

.tz-cookie-group__title {
    color: var(--pd-ink);
}

.tz-cookie-group__state,
.tz-cookie-group__text,
.tz-cookie-legal {
    color: var(--pd-ink-2);
}

.tz-cookie-group__cookies code {
    color: var(--pd-ink-2);
    border-color: var(--pd-rule);
    border-radius: 0;
}

/* Beide Schaltflächen tragen dasselbe Gewicht: Eine Einwilligung nach Art. 6 Abs. 1
   lit. a DSGVO ist kein Trichter. */
.tz-cookie-btn {
    background: var(--tz-card-bg);
    color: var(--pd-ink);
    border: 1px solid var(--pd-ink);
    border-radius: 0;
}

.tz-cookie-btn:hover {
    background: var(--pd-mask-deep);
}

.tz-cookie-btn:active {
    transform: none;
}

.tz-cookie-btn:focus-visible {
    outline: 2px solid var(--tz-perf);
    outline-offset: 2px;
}