/* ==========================================================================
   4T6W Glass — Design Tokens
   Alle Größen in CSS-Pixeln. Ein iPhone 15 Pro meldet 393 CSS-px, nicht 1179.
   ========================================================================== */

:root {
    /*
     * Sagt dem Browser, in welchem Modus die Seite läuft.
     *
     * Ohne diese Angabe malt Safari die Fläche außerhalb der Seite — hinter
     * der Statusleiste, unter der Bedienleiste, beim Überziehen — in der
     * Systemfarbe. Steht das Telefon auf Dunkelmodus und die Seite auf hell,
     * entstehen dort schwarze Balken, und zwar unabhängig davon, welche
     * Hintergrundfarbe das html-Element trägt.
     *
     * Mit color-scheme übernimmt die Seite diese Fläche selbst und läuft von
     * oben bis unten durch.
     */
    color-scheme: light;

    /* --- Flächen & Farben (Light) --- */
    --bg: #E8E8EB;
    --scene: #ffffff;
    --card: rgba(255, 255, 255, 0.01);
    --card-sm: rgba(255, 255, 255, 0.08);
    --card-border-top: rgba(255, 255, 255, 0.55);
    --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Deckende Entsprechungen — greifen wo backdrop-filter fehlt */
    --card-opaque: rgba(255, 255, 255, 0.82);
    --bar-opaque: rgba(255, 255, 255, 0.92);

    /*
     * Kopf- und Fußleiste.
     *
     * Deutlich kräftiger als die Karten: mit --card (1 % Deckkraft) waren die
     * Leisten kaum vom Inhalt zu unterscheiden. Sie sind Orientierung, nicht
     * Dekoration — sie dürfen sichtbar sein.
     */
    --bar-bg: rgba(255, 255, 255, 0.62);
    --bar-line: rgba(0, 0, 0, 0.1);
    --bar-shadow: 0 -1px 20px rgba(0, 0, 0, 0.07);

    /*
     * Der Volltonwert, den Safari für seine eigene Leiste unter der Seite
     * verwendet (theme-color). Muss zum optischen Ergebnis von --bar-bg über
     * --bg passen, sonst steht dort ein andersfarbiger Streifen.
     */
    --bar-solid: #F2F2F5;

    /* Fläche der Produktkacheln ohne Weichzeichner (Mobil). */
    --card-solid: rgba(255, 255, 255, 0.66);

    --txt: #1a1a1a;
    --txt2: rgba(0, 0, 0, 0.5);
    --txt3: rgba(0, 0, 0, 0.2);
    --line: rgba(0, 0, 0, 0.08);

    --accent1: #6366f1;
    --accent2: #a855f7;
    --accent-txt: #ffffff;

    --ok: #16a34a;
    --warn: #b45309;
    --err: #dc2626;

    /* --- Glass ---
       Mobil bewusst schwächer: gestapelte große Blur-Flächen kosten auf
       Mittelklasse-Androids Frames beim Scrollen. */
    --blur-veil: 14px;
    --blur: 10px;
    --sat: 170%;

    /* --- Layout --- */
    --page-max: 1180px;
    --page-pad: 16px;
    --gap: 12px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --topbar-h: 56px;
    --tabbar-h: 58px;

    /*
     * Wie weit die untere Leiste über den Viewportrand hinausragt.
     *
     * Jetzt, wo die Seite dank color-scheme bis an die Bildschirmkanten
     * läuft, schwebt Safaris Bedienleiste über der Seite statt daneben. Der
     * Überstand muss die Fläche dahinter mit abdecken, sonst endet das Glas
     * mitten unter den Bedienelementen.
     *
     * 110px deckt Bedienleiste (~50px) und Home-Indicator (~34px) auf allen
     * aktuellen iPhones ab. Die Tabs selbst rutschen dadurch nicht tiefer —
     * padding-bottom schiebt sie um denselben Betrag wieder hoch.
     */
    --bar-overhang: 110px;

    /* Fläche der aufklappenden Kategorienauswahl. Deckend, weil sie sich
       bewegt und deshalb keinen backdrop-filter tragen kann. */
    --menu-bg: #f7f7f9;

    /* Safe-Area für Notch und Home-Indicator.
       Braucht viewport-fit=cover im Meta-Tag, sonst immer 0. */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);

    /* Mindestgröße für Touch-Ziele: Apple HIG 44pt, Android 48dp */
    --tap: 44px;

    /* Deckkraft des Scene-Logos im Hintergrund.
       Auf Handys deutlich schwächer: dort steht Text über der gesamten
       Fläche, während auf dem Desktop genug Weißraum bleibt, damit das
       Logo wirken kann ohne die Lesbarkeit zu kosten. */
    --scene-opacity: 0.3;

    /* --- Typografie --- */
    --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;

    /* clamp() skaliert stufenlos zwischen den Breakpoints statt zu springen */
    --fs-hero: clamp(1.75rem, 1.1rem + 3.2vw, 3rem);
    --fs-h2: clamp(1.15rem, 0.95rem + 1vw, 1.5rem);
    --fs-body: 0.9375rem;
    --fs-sm: 0.8125rem;
    --fs-xs: 0.6875rem;

    /* --- Motion ---
     *
     * Die alte Kurve cubic-bezier(0.4, 0, 0.2, 1) beginnt langsam und wird
     * dann schnell. Auf eine Berührung hin wirkt das träge, weil die ersten
     * Millisekunden fast nichts passiert.
     *
     * Die neuen Kurven starten zügig und klingen weich aus — das ist das
     * Gefühl, das iOS-Oberflächen flüssig macht. Dazu etwas längere Dauern:
     * zu kurze Übergänge lesen sich als Sprung, nicht als Bewegung.
     */
    --t-fast: 0.2s;
    --t: 0.3s;
    --t-slow: 0.45s;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.18, 0.64, 1);

    --z-scene: 0;
    --z-content: 1;
    --z-bar: 100;
    --z-fab: 200;
    --z-modal: 300;
}

/* --- Dark Mode --- */

/* Ab Tablet darf das Glas wieder kräftiger werden — dort ist GPU-Budget da,
   und das Logo darf zurück auf seine ursprüngliche Präsenz. */
@media (min-width: 900px) {
    :root {
        --blur-veil: 24px;
        --blur: 12px;
        --sat: 180%;
        --page-pad: 24px;
        --gap: 16px;
        --radius: 20px;
        --radius-lg: 24px;
        --scene-opacity: 0.92;
    }
}

/* ==========================================================================
   Bewegungsprofile

   Umschaltbar unter Design → Shop-Einrichtung. Die Klasse sitzt am body,
   die Werte überschreiben damit die aus :root für alles darunter.

   Sinn der Sache: wie sich eine Bewegung anfühlt, lässt sich nicht ausrechnen
   und nicht am Schreibtisch beurteilen. Am Telefon umschalten, ansehen,
   entscheiden — das geht schneller als jede Diskussion darüber.
   ========================================================================== */

/* Flott — kurze Wege, wenig Nachschwingen. Wirkt technisch und direkt. */
body.motion-snappy {
    --t-fast: 0.12s;
    --t: 0.18s;
    --t-slow: 0.28s;
    --ease: cubic-bezier(0.3, 0.8, 0.4, 1);
    --ease-out: cubic-bezier(0.25, 0.9, 0.35, 1);
}

/* Ruhig — lange Wege, weiches Ausklingen. Wirkt hochwertig, kann bei
   häufiger Bedienung zäh werden. */
body.motion-calm {
    --t-fast: 0.28s;
    --t: 0.42s;
    --t-slow: 0.62s;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.12, 1, 0.25, 1);
}

/* Aus — nichts bewegt sich, alles erscheint sofort. */
body.motion-off,
body.motion-off * {
    --t-fast: 0.01ms;
    --t: 0.01ms;
    --t-slow: 0.01ms;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
}

/* Systemeinstellung schlägt jedes Profil. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0.01ms;
        --t: 0.01ms;
        --t-slow: 0.01ms;
    }
}

/* --------------------------------------------------------------------------
   Dunkelmodus — folgt der Systemeinstellung des Geräts.

   Kein Umschalter, keine Klasse, kein localStorage. Stellt jemand sein
   iPhone oder Samsung auf Dunkel, zieht die Seite mit; stellt er zurück,
   auch. Das ist der Grund, warum diese Regeln in einer Medienabfrage
   stehen und nicht hinter .dark.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
    /* Zieht mit: sonst blieben die Randflächen hell, während die Seite
           dunkel läuft — derselbe Fehler, nur andersherum. */
        color-scheme: dark;

        --bg: #050507;
        --scene: #000000;
        --card: rgba(255, 255, 255, 0.04);
        --card-sm: rgba(255, 255, 255, 0.06);
        --card-border-top: rgba(255, 255, 255, 0.14);
        --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);

        --card-opaque: rgba(22, 22, 26, 0.88);
        --bar-opaque: rgba(12, 12, 15, 0.94);

        --bar-bg: rgba(255, 255, 255, 0.09);
        --bar-line: rgba(255, 255, 255, 0.16);
        --bar-shadow: 0 -1px 20px rgba(0, 0, 0, 0.5);
        --bar-solid: #141418;
        --card-solid: rgba(28, 28, 33, 0.72);

        --txt: #f5f5f7;
        --txt2: rgba(255, 255, 255, 0.55);
        --txt3: rgba(255, 255, 255, 0.25);
        --line: rgba(255, 255, 255, 0.1);

        --ok: #4ade80;
        --warn: #fbbf24;
        --err: #f87171;

        --menu-bg: #17171b;
    }

}