/* PWGermanShop — Beispiel-Theme CSS
   Token-basiert, mobile-first, ohne Build-Schritt und ohne externe Fonts.
   Optik: neutral-schick und branchenneutral — helle graue Flächen, klares
   Schiefer-Grau als Akzent, durchgehend serifenlose Typografie. Alle Werte
   als CSS-Custom-Properties in :root; Komponenten referenzieren nur Tokens,
   damit sich das Theme zentral umfärben lässt. */

:root {
    /* Flächen & Tinte (neutral, kühl-grau) */
    --gs-bg:            #f3f4f6;
    --gs-surface:       #ffffff;
    --gs-surface-alt:   #f9fafb;
    --gs-ink:           #1f2937;
    --gs-ink-soft:      #6b7280;
    --gs-ink-mute:      #9ca3af;

    /* Linien */
    --gs-border:        #e5e7eb;
    --gs-border-strong: #d1d5db;

    /* Akzent (Schiefer-Grau) — -deep für Hover/Links, -soft für getönte Flächen */
    --gs-accent:        #334155;
    --gs-accent-deep:   #1e293b;
    --gs-accent-soft:   #eef2f7;
    --gs-accent-line:   #cbd5e1;

    /* Statusfarben (klar, funktional) */
    --gs-ok:            #15803d;
    --gs-ok-bg:         #f0fdf4;
    --gs-ok-border:     #bbf7d0;
    --gs-warn:          #b45309;
    --gs-warn-bg:       #fffbeb;
    --gs-warn-border:   #fde68a;
    --gs-err:           #b91c1c;
    --gs-err-bg:        #fef2f2;
    --gs-err-border:    #fecaca;

    /* Form & Tiefe */
    --gs-radius:        8px;
    --gs-radius-sm:     6px;
    --gs-radius-pill:   999px;
    --gs-shadow-sm:     0 1px 2px rgba(17, 24, 39, 0.06);
    --gs-shadow:        0 8px 28px rgba(17, 24, 39, 0.10);

    /* Typografie (durchgehend serifenlos; -display nur für Überschriften/Marke) */
    --gs-font-sans:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --gs-font-display:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Layout */
    --gs-maxw:          1140px;
    --gs-gutter:        1.5rem;

    /* Responsive-Breakpoints — ACHTUNG: reine Doku-/JS-Quelle. CSS-Variablen
     * werden in @media-Queries NICHT ausgewertet (Spec-Einschränkung); die
     * @media-Regeln unten nutzen daher die Werte hardgecodet als rem. Siehe
     * docs-web/entwickler/mobile-responsive.md. */
    --gs-bp-sm:         36rem;   /* 576 px  — schmale Handys            */
    --gs-bp-md:         48rem;   /* 768 px  — Handy-/Tablett-Grenze     */
    --gs-bp-lg:         64rem;   /* 1024 px — Desktop                   */
}

* { box-sizing: border-box; }

/* Bilder nie über den Container hinauslaufen lassen. Gilt auch fuer
 * Redakteurs-Inhalte (RTE/CKEditor), die beliebige <img> mit festen Breiten
 * enthalten koennen — ohne diese Regel wuerden Produktbeschreibungs-Bilder
 * auf Mobil horizontal ueberlaufen. */
img, picture, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

body {
    margin: 0;
    font-family: var(--gs-font-sans);
    line-height: 1.55;
    color: var(--gs-ink);
    background: var(--gs-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--gs-font-display);
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--gs-ink);
}

a { color: var(--gs-accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sichtbarer, einheitlicher Fokus-Ring (Tastatur-Bedienung) */
:focus-visible {
    outline: 2px solid var(--gs-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip-Link („Zum Inhalt springen") — für Tastatur-/ScreenReader-Bedienung
 * Pflicht nach WCAG 2.4.1. Sitzt off-screen, bis er per Tab-Taste den Fokus
 * bekommt; dann fährt er sichtbar oben links in den Viewport. Klick / Enter
 * springt zum <main id="gs-main" tabindex="-1"> — das tabindex=-1 sorgt dafür,
 * dass der Fokus auch tatsächlich ins main wandert (sonst würde er auf dem
 * Anchor sitzen bleiben und die Sprungnavigation wäre nur visuell). */
.gs-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 0.65rem 1rem;
    background: var(--gs-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--gs-radius-sm) 0;
    transform: translateY(-110%);
    transition: transform 0.15s ease;
}
.gs-skip-link:focus,
.gs-skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--gs-ink);
    outline-offset: 2px;
    text-decoration: none;
    color: #fff;
}
/* <main> soll keinen Fokus-Ring zeigen, wenn er per Skip-Link angesprungen
 * wird — er ist ein Zielcontainer, kein interaktives Element. */
#gs-main:focus,
#gs-main:focus-visible {
    outline: none;
}

/* Kopfzeile */
.gs-site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem var(--gs-gutter);
    background: var(--gs-surface);
    border-bottom: 1px solid var(--gs-border);
    box-shadow: var(--gs-shadow-sm);
}
.gs-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--gs-font-display);
    font-weight: 650;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    color: var(--gs-ink);
}
.gs-brand-logo { display: block; flex: none; }
.gs-brand-name { line-height: 1; }
.gs-brand:hover { text-decoration: none; color: var(--gs-accent-deep); }
.gs-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}
.gs-nav a {
    color: var(--gs-ink-soft);
    font-size: 0.95rem;
    padding: 0.2rem 0.7rem;
    border-bottom: 1px solid transparent;
}
.gs-nav a:hover {
    color: var(--gs-ink);
    text-decoration: none;
    border-bottom-color: var(--gs-accent-line);
}

.gs-main {
    max-width: var(--gs-maxw);
    margin: 0 auto;
    padding: 2.25rem var(--gs-gutter);
}

/* Fußzeile */
.gs-site-footer {
    max-width: var(--gs-maxw);
    margin: 3.5rem auto 0;
    padding: 1.75rem var(--gs-gutter) 2.25rem;
    border-top: 1px solid var(--gs-border);
    font-size: 0.875rem;
    color: var(--gs-ink-soft);
}
.gs-disclaimer { margin: 0 0 0.75rem; }
.gs-legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-bottom: 0.75rem;
}
.gs-legal-nav a { color: var(--gs-ink-soft); }
.gs-legal-nav a:hover { color: var(--gs-ink); }
.gs-build { display: block; margin-top: 0.75rem; color: var(--gs-ink-mute); letter-spacing: 0.03em; }

/* Rechtsseiten (Impressum, Datenschutz, AGB, Widerrufsbelehrung) */
.gs-legal-page { max-width: 48rem; }
.gs-legal-page h1 { margin: 0 0 1.25rem; }
.gs-legal-body { line-height: 1.65; }
.gs-legal-body p { margin: 0 0 1rem; }
.gs-legal-body a { word-break: break-word; }

/* Redakteurs-Inhalte (RTE/CKEditor) duerfen beliebige Tabellen und Bilder
 * enthalten — z.B. Naehrwerttabellen oder Zutatenlisten in Produkt-
 * beschreibungen. Diese sind potenzielle Mobile-Ueberlaufquellen, weil sie
 * nicht ueber die Asset- bzw. Layout-CSS erfasst werden. Die Regel ist
 * bewusst NUR auf .gs-product-body / .gs-legal-body beschraenkt, damit die
 * absichtlich als <table> gerenderten Shop-Layouts (Warenkorb, Versandmatrix)
 * unangetastet bleiben. */
.gs-product-body table,
.gs-legal-body table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    border-collapse: collapse;
}

/* Catalog-Modul-CSS (Kategorien, Produkt-Grid, Produkt-Detail, Galerie,
 * Hinweise, Preisblock, Add-to-Cart-Formular, Cart-Modal) wurde mit Slice B
 * der Theme-Architektur-Überarbeitung in das GermanShopCatalog-Modul
 * verschoben (modules/GermanShopCatalog/assets/catalog.css). Das Theme
 * referenziert nur noch die `--gs-*`-Tokens aus :root, die Module nutzen sie. */

/* Generische Buttons */
.gs-btn {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--gs-radius-sm);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gs-btn-primary {
    background: var(--gs-accent);
    color: #fff;
    border-color: var(--gs-accent);
}
.gs-btn-primary:not(:disabled):hover { background: var(--gs-accent-deep); border-color: var(--gs-accent-deep); text-decoration: none; }
.gs-btn-secondary {
    background: var(--gs-surface);
    color: var(--gs-ink);
    border-color: var(--gs-border-strong);
}
.gs-btn-secondary:not(:disabled):hover { background: var(--gs-surface-alt); border-color: var(--gs-accent-line); text-decoration: none; }
.gs-btn-link {
    background: none;
    border: none;
    color: var(--gs-accent-deep);
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.gs-btn-link:hover { color: var(--gs-ink); }

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

/* Add-to-Cart-Formular: liegt jetzt im Catalog-Modul (siehe catalog.css). */
/* Mini-Cart, Cart-Flash, Cart-Tabelle, Totals & USt-Aufschlüsselung: liegen
 * jetzt im Cart-Modul (siehe modules/GermanShopCart/assets/cart.css). */

/* Gutschein-Box, Step-Indikator, Checkout-Formulare, Adress-Felder,
 * Zahlart-Auswahl, Checkout-Actions: liegen jetzt im Checkout-Modul
 * (siehe modules/GermanShopCheckout/assets/checkout.css). */

/* Widerrufs-Styles (/widerruf/), inkl. .gs-hint-Subtext: liegen jetzt
 * im Widerruf-Modul (siehe modules/GermanShopWiderruf/assets/widerruf.css). */

/* Review-Cards, Adress-Summary, Danke-Seite: liegen jetzt im Checkout-Modul
 * (siehe modules/GermanShopCheckout/assets/checkout.css). */

/* Warenkorb-Lightbox (nach „In den Warenkorb"): liegt jetzt im Catalog-Modul
 * (siehe catalog.css), weil sie an die Produkt-Detail-Seite gekoppelt ist. */

/* Kundenkonto-Styles (/konto/) — Login, Registrierung, Profil, Passwort-Reset,
 * Form-Status-Banner und Danger-Button: liegen jetzt im Accounts-Modul
 * (siehe modules/GermanShopAccounts/assets/accounts.css). */

.gs-nav-account {
    /* Erbt von .gs-nav a; bewusst keine Sonderbehandlung. Bleibt im Theme,
     * weil es zur Site-Navigation gehört, nicht zum Konto-Subtree. */
}

/* ════════════════════════════════════════════════════════════════════════
 * Mobile / Responsive
 *
 * Strategie: Desktop-first (Basis-Regeln gelten für Desktop), Anpassungen
 * für schmale Viewports kommen via @media (max-width: …) unten. Bestehende
 * min-width-Regeln in Modul-CSS werden bewusst nicht angetastet.
 *
 * Breakpoints (hardgecodet, weil CSS-Variablen in @media nicht ausgewertet
 * werden — s. Token-Kommentar oben in :root):
 *   48rem (768 px) — Hauptumschaltpunkt Handy/Tablett
 *   36rem (576 px) — sehr schmale Handys, Feintuning
 *   24rem (384 px) — Kleinstgeräte (iPhone SE Querformat-Bereich)
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Touch-Target-Standard (44 px) ───────────────────────────────────────
 * WCAG 2.5.5 empfiehlt 44×44 px für Bedienelemente. Die Basis-Paddings der
 * Buttons/Inputs (~32–36 px) werden unterhalb des Hauptumschaltpunkts
 * global auf min-height 2.75 rem angehoben. Betrifft alle Module, weil die
 * Selektoren generisch sind. */
@media (max-width: 48rem) {
    .gs-btn,
    .gs-btn-link,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        min-height: 2.75rem;
    }
}

/* ── Mobiles Navigationsmenü (Off-canvas-Drawer) ────────────────────────
 * Desktop: .gs-nav-toggle versteckt, .gs-nav inline im Header. Unterhalb
 * 48 rem: Hamburger sichtbar, Nav wandert in einen Off-canvas-Drawer, der
 * per [data-open] bzw. body[data-nav-open] eingeblendet wird. Das Markup
 * dazu steht in _partials/header.php; die Toggle-/Fokus-Logik in
 * assets/js/mobile-nav.js. */
.gs-nav-toggle {
    display: none; /* nur mobil sichtbar (siehe @media unten) */
}
/* Desktop: Backdrop hat keine Funktion, leer halten. */
.gs-nav-backdrop { display: none; }
@media (max-width: 48rem) {
    .gs-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-left: auto;
        padding: 0;
        background: transparent;
        border: 1px solid var(--gs-border-strong);
        border-radius: var(--gs-radius-sm);
        color: var(--gs-ink);
        cursor: pointer;
    }
    .gs-nav-toggle:hover { background: var(--gs-surface-alt); }
    .gs-nav-toggle:focus-visible { outline-offset: 2px; }
    .gs-nav-toggle-icon { display: block; }

    /* Drawer: standardmäßig außerhalb des Viewports (links). */
    .gs-nav-drawer {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: min(20rem, 86vw);
        padding: 1.25rem 1.25rem 2rem;
        background: var(--gs-surface);
        border-right: 1px solid var(--gs-border);
        box-shadow: var(--gs-shadow);
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0.2s ease;
    }
    .gs-nav-drawer[data-open] {
        transform: translateX(0);
        visibility: visible;
    }
    /* Backdrop dimmt den Inhalt hinter dem Drawer. */
    .gs-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(17, 24, 39, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .gs-nav-backdrop[data-open] {
        opacity: 1;
        visibility: visible;
    }
    /* Solange der Drawer offen ist, scrollt der Hintergrund nicht. */
    body[data-nav-open] { overflow: hidden; }

    /* Nav-Links werden im Drawer vollbreit und mit ausreichend Touch-Höhe. */
    .gs-nav-drawer .gs-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        flex-wrap: nowrap;
    }
    .gs-nav-drawer .gs-nav a {
        display: block;
        padding: 0.75rem 0.5rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--gs-border);
    }
    .gs-nav-drawer .gs-nav a:hover {
        border-bottom-color: var(--gs-border);
        background: var(--gs-surface-alt);
    }
}

/* Reduced-Motion: Drawer ohne Übergang bewegen (Sekundär-Tastatur-UX). */
@media (prefers-reduced-motion: reduce) {
    .gs-nav-drawer,
    .gs-nav-backdrop {
        transition: none;
    }
}

/* Kurzbeschreibung als Lead-Teaser unter dem Titel (Detailseite): prominenter
   als Fließtext, das Erste, was der Kunde nach dem Titel liest. */
.gs-product-info .gs-product-lead {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--gs-ink-soft, #444);
    margin: .5rem 0 1.15rem;
}

/* Staffelpreise (Mengenrabatt) — kompakte Tabelle unter dem Preis. */
.gs-price-tiers { margin: .5rem 0 1rem; }
.gs-price-tiers-table { border-collapse: collapse; font-size: .9rem; }
.gs-price-tiers-table caption {
    text-align: left; font-weight: 600; padding-bottom: .25rem; color: var(--gs-color-muted, #666);
}
.gs-price-tiers-table th,
.gs-price-tiers-table td { padding: .2rem .9rem .2rem 0; text-align: left; font-weight: 400; }
.gs-price-tiers-table td { font-variant-numeric: tabular-nums; }
.gs-price-tiers-table tr + tr th,
.gs-price-tiers-table tr + tr td { border-top: 1px solid var(--gs-color-border, #eee); }

/* Sprachumschalter (DE | EN) im Header. */
.gs-lang-switcher { display: inline-flex; gap: .15rem; align-items: center; }
.gs-lang-link {
    padding: .15rem .4rem; border-radius: 4px; font-size: .8rem; font-weight: 600;
    letter-spacing: .02em; color: var(--gs-color-muted, #666); text-decoration: none;
}
.gs-lang-link:hover { color: var(--gs-accent, #1e87f0); }
.gs-lang-link.is-active { color: var(--gs-fg, #111); background: var(--gs-accent-soft, #eef4ff); cursor: default; }

/* Produkt-Reiter: Beschreibung · Bewertungen · Versand & Lieferung.
   CSS-only (versteckte Radio-Inputs im Markup + ~-Kombinator), kein JS nötig. */
.gs-ptabs { margin-top: 2rem; }
.gs-ptabs-state { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gs-ptabs-bar { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--gs-border, #e5e5e5); }
.gs-ptabs-tab {
    padding: .7rem 1.15rem; margin-bottom: -2px; cursor: pointer;
    border: 1px solid transparent; border-bottom: none;
    border-radius: var(--gs-radius-sm, 6px) var(--gs-radius-sm, 6px) 0 0;
    font-weight: 600; color: var(--gs-ink-mute, #666);
    transition: color .12s ease, background .12s ease;
}
.gs-ptabs-tab:hover { color: var(--gs-ink, #111); }
.gs-ptabs-panel { display: none; padding: 1.5rem .25rem; }
/* Aktiver Reiter + zugehöriges Panel (je Key ein Regel-Paar). */
#gs-ptab-desc:checked ~ .gs-ptabs-panels .gs-ptabs-panel--desc,
#gs-ptab-reviews:checked ~ .gs-ptabs-panels .gs-ptabs-panel--reviews,
#gs-ptab-shipping:checked ~ .gs-ptabs-panels .gs-ptabs-panel--shipping { display: block; }
#gs-ptab-desc:checked ~ .gs-ptabs-bar label[for="gs-ptab-desc"],
#gs-ptab-reviews:checked ~ .gs-ptabs-bar label[for="gs-ptab-reviews"],
#gs-ptab-shipping:checked ~ .gs-ptabs-bar label[for="gs-ptab-shipping"] {
    color: var(--gs-accent, #1e87f0);
    border-color: var(--gs-border, #e5e5e5);
    background: var(--gs-surface, #fff);
}
/* Tastatur-Fokus je fokussiertem Radio auf sein eigenes Label. */
#gs-ptab-desc:focus-visible ~ .gs-ptabs-bar label[for="gs-ptab-desc"],
#gs-ptab-reviews:focus-visible ~ .gs-ptabs-bar label[for="gs-ptab-reviews"],
#gs-ptab-shipping:focus-visible ~ .gs-ptabs-bar label[for="gs-ptab-shipping"] {
    outline: 2px solid var(--gs-accent, #1e87f0); outline-offset: 2px;
}
.gs-product-shipping p { margin: .4rem 0; }
.gs-product-body-placeholder { color: var(--gs-ink-mute, #666); font-style: italic; }

/* „Benachrichtigen, wenn wieder verfügbar" (GermanShopBackInStock), am ausverkauften Artikel */
.gs-bis-form { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--gs-border, #e5e5e5);
    border-radius: var(--gs-radius-sm, 6px); background: var(--gs-surface-alt, #f7f8fa); }
.gs-bis-lead { margin: 0 0 .6rem; font-weight: 600; }
.gs-bis-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.gs-bis-input { flex: 1 1 12rem; min-width: 10rem; padding: .5rem .6rem;
    border: 1px solid var(--gs-border, #ccc); border-radius: 6px; }
.gs-bis-note { margin: .5rem 0 0; font-size: .82rem; color: var(--gs-ink-mute, #666); }
.gs-bis-flash { margin: 1rem 0; padding: .6rem .9rem; border-radius: 6px; }
.gs-bis-flash--success { background: var(--gs-ok-bg, #eaf7ee); border: 1px solid var(--gs-ok-border, #b7e0c2); }
.gs-bis-flash--error { background: var(--gs-err-bg, #fdecec); border: 1px solid var(--gs-err-border, #f2b8b8); }

/* Konfigurator-Vorschau (?gs-preview=1): Seiten-Chrome + Zusatz-Sektionen aus,
   damit man nur das Produkt + den Konfigurator sieht (UX-Feedback: „ohne die
   komplette finale Seite mit Header, Bewertungen und Footer"). Rein per Body-
   Klasse; die Produkt-SPALTEN (Bild + Konfigurator + Preis) bleiben stehen. */
body.gs-preview .gs-site-header,
body.gs-preview .gs-site-footer,
body.gs-preview .gs-breadcrumbs,
body.gs-preview .gs-ptabs,
body.gs-preview .gs-product-sections,
body.gs-preview .gs-product-gpsr,
body.gs-preview .gs-product-categories { display: none !important; }
body.gs-preview .gs-main { padding-top: 1rem; }