/* ==========================================================================
   4T6W Glass — Reset, Grundtypografie, Scene-Ebenen, Barrierefreiheit
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    background: var(--bg);
    /* Verhindert, dass iOS Safari Text im Landscape eigenmächtig vergrößert */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    min-height: 100dvh;
    background: var(--bg);
    color: var(--txt);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Kein horizontales Wegrutschen auf schmalen Geräten */
    overflow-x: hidden;
}

/* Platz für die fixe Tab-Leiste am unteren Rand (nur mobil vorhanden).
   Der Überstand zählt bewusst nicht mit — er liegt außerhalb des sichtbaren
   Bereichs und würde sonst als Leerraum unter dem Inhalt erscheinen. */
body.has-tabbar {
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
}

@media (min-width: 900px) {
    body.has-tabbar { padding-bottom: 0; }
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Bricht lange Produktnamen statt das Layout zu sprengen */
h1, h2, h3, h4, p, li, td, th, figcaption {
    overflow-wrap: break-word;
}

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* Scrollbalken ausblenden — mobil ohnehin Systemverhalten */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* --------------------------------------------------------------------------
   Scene-Ebenen: fixiertes Logo hinter allem, davor der Glass-Schleier
   -------------------------------------------------------------------------- */

.bg-scene {
    position: fixed;
    inset: 0;
    z-index: var(--z-scene);
    overflow: hidden;
    pointer-events: none;
    background: var(--scene);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--t-slow);
}

.scene-logo {
    /* min() hält das Logo in Portrait UND Landscape im Rahmen */
    width: min(78vw, 78dvh);
    max-width: 860px;
    opacity: var(--scene-opacity);
}

/* Überschriften, die ohne Glaskarte direkt auf dem Hintergrund sitzen,
   bekommen einen Halo in Hintergrundfarbe. Ohne den lag "Aktuell im Shop"
   auf dem hellsten Teil des Scene-Logos und war kaum zu lesen. */
.sect-title,
.cat-title,
.cat-meta,
.crumb,
.page-title {
    text-shadow: 0 0 14px var(--bg), 0 0 5px var(--bg);
}

.glass-veil {
    position: fixed;
    inset: 0;
    z-index: var(--z-scene);
    pointer-events: none;
    background: transparent;
}

/* --------------------------------------------------------------------------
   Glass-Utility
   -------------------------------------------------------------------------- */

.glass {
    background: var(--card);
    border: 0.5px solid var(--card-border-top);
    box-shadow: var(--card-shadow);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
    backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}

/* Ohne backdrop-filter wäre --card mit 0.01 Deckkraft praktisch unsichtbar
   und der Text unlesbar. Firefox-Altversionen und einige In-App-Browser
   fallen hier hinein. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .pcard,
    .hero,
    .topbar,
    .tabbar,
    .modal-card,
    .chat-panel,
    .site-footer {
        background: var(--card-opaque) !important;
    }

    .topbar,
    .tabbar {
        background: var(--bar-opaque) !important;
    }
}

/* --------------------------------------------------------------------------
   Barrierefreiheit
   -------------------------------------------------------------------------- */

/* Fokus nur bei Tastaturnutzung sichtbar, dann aber deutlich */
:focus-visible {
    outline: 2px solid var(--accent1);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 20px;
    background: var(--accent1);
    color: var(--accent-txt);
    font-weight: 700;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
    top: 0;
}

.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sichtbar, sobald jemand hineintabbt */
.screen-reader-text:focus {
    position: static !important;
    width: auto;
    height: auto;
    clip: auto;
    margin: 0;
    padding: 8px 14px;
    background: var(--card-opaque);
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Höherer Kontrast, wenn das System es verlangt */
@media (prefers-contrast: more) {
    :root {
        --card: rgba(255, 255, 255, 0.9);
        --txt2: rgba(0, 0, 0, 0.75);
        --card-border-top: rgba(0, 0, 0, 0.4);
    }

    
}

@media print {
    .topbar, .tabbar, .chat-fab, .chat-panel,
    .bg-scene, .glass-veil, .modal-overlay { display: none !important; }

    body { background: #fff; color: #000; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   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) {
    .scene-logo {
    filter: invert(1);
        /* Invertiert ist das Logo weiß und damit deutlich präsenter */
        opacity: calc(var(--scene-opacity) * 0.85);
    }

}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root {
    --card: rgba(20, 20, 24, 0.95);
            --txt2: rgba(255, 255, 255, 0.8);
            --card-border-top: rgba(255, 255, 255, 0.5);
    }

}