/**
 * Osttirol Booking - Design Tokens (KANONISCHES SUPERSET, T7).
 *
 * Single Source of Truth fuer alle 6 Frontend-Module. Wird global via
 * <f:asset.css identifier="osttirol-tokens"> VOR dem jeweiligen Modul-CSS geladen
 * (separater <link>, KEIN @import in CSS-Dateien — LL-021). Die Modul-Stylesheets
 * haengen ihre lokalen Token-Definitionen (--ev-*, --exp-*, --pk-*, --brc-*) auf
 * diese kanonischen Tokens um (Re-Pointing, T7); Consumer-Referenzen bleiben.
 *
 * Palette: Osttirol-Markenrot (#b51621, verifiziert osttirol.com) auf warm-neutralen
 * Graustufen. Werte = 5-Modul-Konsens (warm/weich, "modernisiert, CI-treu").
 * Schrift: self-hosted Outfit (Brand) + Fraunces/Inter Fallback (DSGVO, @font-face unten).
 * Kein Dark-Mode (osttirol.com ist hell; Teil-Dark-Mode war nie vollstaendig — T7).
 *
 * All consumer styles must reference tokens, never hardcoded colors / z-index.
 */

:root {
    /* Brand — Osttirol-Rot als Primaer-/Akzentfarbe. */
    --c-primary: #b51621;
    --c-primary-hover: #951119;       /* dunkler fuer Hover, haelt AA auf Weiss */
    --c-accent: #b51621;
    --c-accent-hover: #951119;
    /* Weicher Rot-Tint fuer dezente Flaechen (aktive Chips, Hover-Wash). */
    --c-accent-soft: #fbe9ea;
    --c-primary-soft: #fbe9ea;        /* Alias (Modul-Re-Pointing nutzt diesen Namen) */
    /* Fokus-/Selektions-Ring in Markenrot. */
    --c-primary-ring: rgba(181, 22, 33, 0.28);
    /* Dunkles Rot fuer Text auf hell (>= 4.5:1 Kontrast, WCAG AA). */
    --c-accent-text: #8f111b;

    /* Concierge-Akzent (warmes Alpenglow) — AUSSCHLIESSLICH fuer das KI-Reise-
       Concierge-Signatur-Element ("Vali"). Bewusst die EINZIGE zweite Farbe im
       System; nie fuer regulaere UI verwenden (Design-Handoff §1). */
    --alpenglow: #b25a2b;
    --alpenglow-hover: #9a4c22;
    --alpenglow-tint: #f6e9df;        /* weiche Concierge-Fuellung */
    --alpenglow-text: #8a4420;        /* AA auf hell */

    /* TrustYou-Markenblau (Bewertungs-Lockup). Als Token gefuehrt, damit kein
       Hex ausserhalb tokens.css steht. */
    --c-trustyou: #005995;

    /* Scrim/Overlay-Hintergrund (Dialoge, Off-Canvas, Lightbox). Als Token, weil
       Tailwind-Opacity-Modifier auf var()-Farben nicht greifen (kein rgb-Channel). */
    --c-scrim: rgba(24, 28, 32, 0.45);

    /* Neutrals (osttirol.com: near-black Text, warm-neutrale Graustufen) */
    --c-text: #1c1c1e;
    --c-text-muted: #5d5d5d;          /* AA auf Weiss (4.6:1) */
    --c-text-subtle: #767676;         /* AA fuer grosse/sekundaere Texte */
    --c-bg: #ffffff;
    --c-bg-alt: #f6f5f3;              /* warmes Off-White, kein kaltes Reinweiss */
    --c-bg-sunken: #efeeec;
    --c-surface: #ffffff;
    --c-border: #e3e1dd;
    --c-border-strong: #cfccc6;
    /* Fokusring, deutlich gegen Rot abgesetzt (Tastaturnavigation). */
    --c-focus: #1d63c4;
    /* Sterne-Gold (warm, lesbar) — konventionelle Sterne-Farbe. */
    --c-star: #c8961e;

    /* Status (Nachhaltigkeit bleibt gruen; Fehler dunkler als Marken-Rot,
       damit Fehlermeldungen vom roten Marken-CI unterscheidbar bleiben). */
    --c-success: #2d7a3e;
    --c-warning: #c08a1e;
    --c-error: #9a2a18;

    /* Status-Flächen (soft = heller Hintergrund, text = dunkle Schrift darauf,
       border = abgesetzte Kante). Konsolidiert die zuvor ~30 verstreuten
       Grün-/Rot-/Gelb-Hardcodes (Issue #26). text-auf-soft ist je Status
       WCAG-AA. Solid-Badges nutzen weiterhin --c-success/-warning/-error. */
    --c-success-soft: #e6f4ea;
    --c-success-text: #1e5631;
    --c-success-border: #b6dec2;
    --c-warning-soft: #fef3cd;
    --c-warning-text: #6b5800;
    --c-warning-border: #f8df87;
    --c-error-soft: #fdecec;
    --c-error-text: #8a1f1f;
    --c-error-border: #f3c2c2;

    /* Map markers (per module) */
    --c-marker-accommodations: #b51621;
    --c-marker-tours: #5a7a3e;
    --c-marker-events: #c08a1e;
    --c-marker-infrastructure: #5d5d5d;

    /* Typography */
    --font-display: 'Outfit', 'Fraunces', 'Tenor Sans', system-ui, sans-serif;
    --font-body: 'Outfit', 'Inter', 'Source Sans 3', system-ui, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 17px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --fs-3xl: 48px;

    --lh-tight: 1.2;
    --lh-base: 1.5;

    /* Spacing - 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Border radius (5-Modul-Konsens: weicher/modernisiert) */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 28px;                /* grosse foto-gefuehrte Karten (Design-Handoff) */
    --radius-pill: 999px;
    --radius-full: 9999px;

    /* Shadows (rgba, neutral-warm) */
    --shadow-color: 30 10% 20%;       /* beibehalten fuer evtl. HSL-Consumer */
    --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
    --shadow-card: 0 2px 10px rgba(20, 20, 20, 0.08);
    --shadow-hover: 0 10px 28px rgba(20, 20, 20, 0.14);
    --shadow-modal: 0 16px 48px rgba(20, 20, 20, 0.18);

    /* Z-Index (CLAUDE.md convention) — Handbuch 28.9.
     *
     * Die Zahlen sind NICHT frei gewaehlt: www.osttirol.com bringt ausserhalb
     * dieser Extension eigenes fixiertes Site-Chrome mit (Site-Template in
     * fileadmin/templates, Fremdcode). Gemessen auf dev.osttirol.com:
     *   .top-navi (fixierte Kopfzeile inkl. Icons) .. z-index 500
     *   nav.mainNavi-menu (Hauptnavigation) ......... z-index 110
     *   a.skip-to-content-link ...................... z-index 999
     * Site-Chrome und Extension liegen im selben Root-Stacking-Context (kein
     * Vorfahre mit transform/filter/isolation), es entscheidet also direkt der
     * z-index — unsere Ebenen muessen sich zu diesen Werten verhalten:
     *
     *   base / dropdown / sticky  = UNTER dem Site-Chrome. Absicht: ein Popover
     *       oder eine sticky Leiste im Seiteninhalt darf die Site-Navigation
     *       nicht verdecken.
     *   overlay / modal / toast   = UEBER dem Site-Chrome (> 500). Diese Ebenen
     *       tragen Vollbild-Overlays mit Scroll-Lock und Fokus-Falle
     *       (Filter-Drawer, Lightbox, Modal) sowie globale Benachrichtigungen
     *       und Launcher, die nie verdeckt werden duerfen (Toast,
     *       Concierge-FAB). Eine darueber liegende Kopfzeile faengt dort
     *       Klicks ab (belegt per Hit-Test: .top-icons-container gewann im
     *       Filter-Panel) — das ist ein Funktionsfehler, nicht nur ein
     *       Schoenheitsfehler.
     *       Obergrenze 800: der Skip-Link (999) muss erreichbar bleiben.
     *
     * Offen (bewusst nicht mit-veraendert): nav.mainNavi-menu (110) liegt
     * zwischen --z-dropdown und --z-sticky. Eine fixe Leiste auf --z-sticky
     * (z.B. die Vergleichs-Auswahlleiste) wuerde das geoeffnete mobile
     * Hauptmenue ueberdecken. Umsortieren wuerde die Ordnung Popover <-> Leiste
     * kippen, deshalb erst nach Klaerung — siehe Handbuch 28.9.1.
     */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    /* ---- ab hier ueber dem Site-Chrome (.top-navi = 500) ---- */
    --z-overlay: 600;
    --z-modal: 700;
    --z-toast: 800;

    /* Transitions */
    --ease-out: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 400ms;

    /* Containers */
    --max-w-sm: 640px;
    --max-w-md: 768px;
    --max-w-lg: 1024px;
    --max-w-xl: 1280px;
    --max-w-2xl: 1440px;
}

/* ------------------------------------------------------------------ *
 * Host-Seiten-Leck-Schutz (F1, 2026-07-27).
 *
 * Das Design-System ist eine Insel in fremden TYPO3-Seiten. Unsere eigenen
 * Stylesheets sind px-only (kein rem, siehe DESIGN.md), aber die HOST-Seite
 * bringt eigene root-relative Vorgaben mit, die in die Insel hineinerben:
 * www.osttirol.com erbt aus seinem Bootstrap-Fundament
 * `label, legend { margin-bottom: 0.5rem }` und `legend { font-size: 1.5rem }`,
 * am `body` eine Basisgroesse von `1.6rem`. Bei `html { font-size: 10px }` sind
 * das 5px/15px/16px, bei 16px-Root 8px/24px/25,6px — die Insel driftet also je
 * Host-Seite, obwohl unser CSS sauber ist.
 *
 * Diese Regeln stehen ABSICHTLICH hier und nicht in app.css: tokens.css wird als
 * erstes Stylesheet geladen (`priority="1"`, LL-021). Damit gewinnen die danach
 * geladenen Modul-Stylesheets bei Spezifitaets-Gleichstand — z. B. behalten
 * `.ev-ai-search__label`/`.pk-fgroup__legend` ihr `margin-bottom` und die
 * sr-only-Helfer ihr `margin: -1px`. Gegen die Host-Regeln (Typ-Selektor,
 * Spezifitaet 0-0-1) gewinnt `.ob-root :where(label, legend)` (0-1-0) dagegen
 * unabhaengig von der Reihenfolge.
 * ------------------------------------------------------------------ */

/* Fremde label/legend-Abstaende neutralisieren. Eigene Abstaende kommen aus den
   Modul-Stylesheets (0-1-0, spaeter geladen) oder tw-Utilities (0-2-0). */
.ob-root :where(label, legend) {
    margin: 0;
}

/* Datumsfelder rechnen ihre Breite selbst zu Ende und verlassen sich nicht auf
   eine `*`-Regel der Wirtsseite.

   Kundenbefund 17.08.2026, iPhone mit Safari: das Anreise-Feld im Pauschalen-
   Anfrageformular ragte rechts aus dem grauen Kasten. Aus dem Screenshot der
   Kundin ausgemessen sind es 26 px Mehrbreite - genau Innenabstand (2x12) plus
   Rahmen (2x1), also die Signatur einer Breitenrechnung OHNE beides
   (`content-box`). Unser CSS hat `box-sizing` fuer diese Felder nie selbst
   gesetzt; auf dev kommt es aus dem Fundament der Wirtsseite, auf dem Geraet der
   Kundin greift es fuer das Feld nicht. In WebKit nachgestellt: ohne die
   Wirtsregel 26 px Ueberstand, mit dieser Regel 0. `max-width` allein genuegt
   nicht - bei `content-box` begrenzt auch die Obergrenze nur den Inhalt, der
   Ueberstand bleibt (im selben Lauf gemessen).

   `min-width: 0` ist Vorsorge, nicht Teil der Ursache: Formularfelder bringen
   eine inhaltsabhaengige Mindestbreite mit, die in Flex- und Grid-Spalten gegen
   eine Breitenangabe gewinnen kann. Hier gemessen unkritisch (min-content 120 px
   bei 294 px Spalte), in engeren Spalten aber die naechste Stolperstelle.

   Derselbe Fall ist im Warenkorb schon einmal aufgetreten und dort seit Juli
   fuer `.ott-cart` geloest (`cart.css`, "die Host-Site garantiert kein globales
   border-box", damals 377 px Dokumentbreite bei 375 px Viewport). Die Lehre lag
   also im Repo, war aber nicht verallgemeinert - deshalb hier an der zentralen
   Stelle. Die Insel komplett unabhaengig zu machen (`.ob-root *` wie in
   `cart.css`) waere der naechste Schritt, ist aber eine eigene Aenderung ueber
   alle 6 Module und gehoert nicht in einen Kundenpunkt.

   Bewusst NICHT dabei: `appearance: none` - die gemessene Mindestbreite von 120 px
   ist kein Faktor, und ohne echtes iOS waere es eine Aenderung am nativen
   Bedienelement ohne Beleg. */
.ob-root input[type="date"] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

/* Safari rendert den Wert eines Datumsfelds in einem eigenen Pseudo-Element und
   zentriert ihn dort. Kundenbefund 18.08.2026 mit Bildbeweis beider Geraete: auf
   dem iPhone steht das Datum mittig, auf dem Samsung linksbuendig - derselbe
   Stand, dieselbe Seite.

   Diese Regel stand am 17.08. schon einmal hier und wurde wieder entfernt, mit
   der Begruendung, sie sei ohne Wirkung: in der WebKit-Engine auf Linux
   verschob `text-align: left|center|right` den Wert nicht. Der Schluss war
   falsch. Diese Engine zentriert den Wert gar nicht erst, dort war also nichts
   zu verschieben - gemessen wurde die Abwesenheit des Symptoms, nicht die
   Wirkung der Regel. Genau der Fehlschluss, den wir bei fremdem Code suchen.

   Sie steht deshalb wieder hier: das Symptom ist auf dem Geraet der Kundin
   belegt, dies ist der dafuer vorgesehene Hebel, und sie kann auf keiner
   anderen Plattform Schaden anrichten (unbekanntes Pseudo-Element -> Regel wird
   verworfen). Was fehlt, ist der Wirkungsnachweis auf echtem iOS - den kann nur
   die Kundin liefern, sie ist gefragt. Bleibt es mittig, wird das Feld wie die
   Abreise-Anzeige auf eigene Darstellung umgebaut (eigener Text plus
   `showPicker()` fuer den Systemdialog), dann sieht es ueberall gleich aus. */
.ob-root input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}

/* Basis-Schriftgroesse der Insel-Wurzel. Greift nur, wo sonst die root-relative
   Host-Basis geerbt wuerde (.pk-list, Concierge-Launcher, Overview); Wurzeln mit
   eigener Modul-Typografie (.exp-list 15px, .ev-list, .brc-list) behalten ihre —
   `:where()` hat Spezifitaet 0. `line-height` bleibt bewusst geerbt: es ist
   unitless und damit root-unabhaengig. */
:where(.ob-root) {
    font-size: var(--fs-base, 16px);
}

/* Kein Dark-Mode (T7): osttirol.com ist hell; Teil-Dark-Mode (hardcodierte weisse
   Modul-Flaechen flippten nie mit) war nie vollstaendig. Einheitlich helles Theme
   ueber alle 6 Module. */

/* Reduced motion - zero out durations */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * Self-hosted variable fonts (DSGVO: never load from Google Fonts CDN).
 * Source: Google Fonts: Outfit v15 / Fraunces v38 / Inter v20, latin subset.
 *
 * Latin subset covers all German + Italian characters (incl. ÄÖÜß àèìòù).
 * If the project later targets other languages, add latin-ext / cyrillic /
 * greek / vietnamese subset files here.
 *
 * Outfit is the primary brand typeface (display + body); Fraunces/Inter
 * remain as graceful fallbacks.
 */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../Fonts/Outfit-Variable.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;
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../Fonts/Fraunces-Variable.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;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../Fonts/Inter-Variable.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;
}

/* ------------------------------------------------------------------ *
 * Frontend: Quelle-/Debug-Tag ausblenden (LIVE · DB / LIVE · API / DEMO).
 * Reiner Dev-Indikator — im FE der 6 Module (Liste + Detail) unsichtbar.
 * Das BE-Modul laedt tokens.css nicht und behaelt die Info.
 * Stefan-Entscheidung 2026-06-17.
 * ------------------------------------------------------------------ */
[data-source] {
    display: none !important;
}