/* Janz Dach – Feinschliff zusätzlich zu Tailwind (CDN im Dev).
   Spaeter ersetzen wir das CDN durch die Tailwind-Standalone-CLI. */

/* Inter selbst gehostet (DSGVO: keine Google-Fonts-Anfrage; funktioniert offline).
   Variable Schrift -> deckt alle genutzten Schnitte 400–800 ab. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/InterVariable.woff2') format('woff2');
}

html, body { height: 100%; }

/* Alpine: Elemente mit x-cloak bleiben bis zur Initialisierung versteckt */
[x-cloak] { display: none !important; }

/* Flach & ruhig: solider Hintergrund, keine Verlaeufe/Glows/Schatten. */
body { background-color: #0a0e17; }

/* Karten: flach. Tiefe entsteht nur aus Flaeche (bg-panel) + feinem Rahmen (border-line).
   Anklickbare Karten heben sich beim Hovern dezent durch einen Akzent-Rahmen ab. */
.bg-panel.rounded-2xl { transition: border-color .15s ease, background-color .15s ease; }
a.bg-panel.rounded-2xl:hover { border-color: rgba(19, 112, 196, .55); }

/* Primaer-Buttons: flaches JANZ-Blau, dezenter Hover (kein Verlauf, kein Glow). */
button.bg-accent, a.bg-accent { transition: background-color .15s ease; }
button.bg-accent:hover, a.bg-accent:hover { background-color: #1a82e0; }

/* Sanftere Übergänge für interaktive Elemente */
a, button, select, input, textarea { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }

/* Fokus-Ring dezent in Akzentfarbe */
:focus-visible { outline: 2px solid rgba(19, 112, 196, .55); outline-offset: 1px; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px rgba(19, 112, 196, .35); }

/* Auswahl-Markierung */
::selection { background: rgba(19, 112, 196, .35); }

/* ============================================================
   Handy-Politur – nur kleine Screens (≤640px). Buero & TV (gross) bleiben unberuehrt.
   Ziel: fingerfreundlich auch mit Arbeitshandschuhen.
   ============================================================ */
@media (max-width: 640px) {
    /* Formularfelder bequem tippbar; 16px verhindert ungewolltes Hineinzoomen */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }
    textarea { min-height: 72px; }

    /* Buttons & Haupt-Aktions-Links als bequeme Tipp-Ziele (mind. 44px) */
    button,
    a.bg-accent,
    button.bg-accent {
        min-height: 44px;
    }
    button.bg-accent,
    a.bg-accent {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    /* Datei-Auswahl (Foto/Lieferschein) groesser antippbar */
    input[type="file"]::file-selector-button {
        padding: 0.55rem 0.9rem;
        font-size: 0.9rem;
    }
}

/* Wochenplaner am Handy: horizontal wischbar statt 6 Spalten quetschen.
   Ab sm (≥640px) wieder volle Breite ohne Mindestbreite (Buero/TV). */
.planer-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Scrollbalken dezent halten (TV/Buero) */
* { scrollbar-width: thin; scrollbar-color: #2a3450 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #2a3450; border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #36436a; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }