/* =========================================================
   Inter Font (selbst gehostet — DSGVO-konform, kein Google-CDN)
   Quelle: fontsource (Apache-2.0)
   ========================================================= */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-latin-300-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-latin-800-normal.woff2') format('woff2');
}

/* =========================================================
   Schirmer GmbH - Design System
   Portiert aus Lovable-Projekt (src/index.css + tailwind.config.ts).
   Farben in HSL, damit HSL-Funktionen nutzbar sind.
   ========================================================= */

:root {
    /* Core palette (Lovable) */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 212 93% 34%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 43%;  /* 46.9% ergab auf getoenten Karten
                                            nur 4.39:1 (WCAG AA verlangt 4.5).
                                            43% -> 5.06 auf Karte, 5.49 auf Weiss. */

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 73.7% 41.8%; /* #b91c1c: readable small error text on white and tinted panels */
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    /* Footer dark */
    --footer-bg: 212 93% 15%;

    /* Convenience hex mirrors for MudBlazor palette (kept in sync with theme in code) */
    --schirmer-primary: #0651a8;
    --schirmer-primary-dark: #043d7f;
    --schirmer-primary-light: #1a6fd4;

    /* Navbar-Höhe (py-3 + Logo h-10) — Mobile-Menü startet darunter */
    --schirmer-nav-height: 4rem;
}

/* =========================================================
   Accessibility — Skip-Link + globaler Focus-Visible-Ring
   ========================================================= */

/* Skip-to-Content: sichtbar nur bei Tastatur-Focus, springt aus dem
   Document-Flow nach oben links. */
/* Versteckt ganz oberhalb des Fensters und OHNE Schatten: vorher lag er bei -40 px,
   sein Schatten ragte auf jeder Seite oben links als grauer Schimmer ins Bild. */
.skip-to-content {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 6px;
    transform: translateY(calc(-100% - 16px));
    transition: transform 0.15s ease-in-out;
}
.skip-to-content:focus {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    outline: none;
}

#main-content { scroll-margin-top: calc(var(--schirmer-nav-height) + 0.5rem); }

html[data-schirmer-consent="decided"] .schirmer-cookie-banner[data-consent-pending="true"] {
    display: none;
}

/* Die Hinweisleiste klebt am unteren Rand: auf iPhones muss die Home-Leiste
   darunter frei bleiben, sonst sitzt der Knopf halb unter dem Balken. */
.schirmer-cookie-banner {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Globaler Focus-Visible-Ring: nur bei Tastatur-Navigation sichtbar (nicht
   bei Maus-Klick). Ueberschreibt etwaige `focus:outline-none`-Tailwind-Klassen
   weil :focus-visible spezifischer ist als :focus alleine in vielen Faellen.
   `!important` ist hier bewusst gesetzt — barrierefreie Tastatur-Navigation
   darf nicht von einzelnen Komponenten verschluckt werden. */
:focus-visible,
input.sr-only:focus-visible + * {
    /* W3C C40: white inner ring and dark outer ring remain distinguishable
       on both the white forms and the dark blue dialog/hero backgrounds. */
    outline: 2px solid hsl(212 93% 15%) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white !important;
    border-radius: 2px;
}

/* Nach jedem Seitenwechsel setzt Blazor (FocusOnNavigate in Routes.razor) den
   Fokus per Skript auf die h1, damit Screenreader die neue Seite ansagen. Diese
   Ziele tragen tabindex="-1", sind also per Tab gar nicht erreichbar - der
   sichtbare Ring um die Ueberschrift war nur Irritation. Der Fokus bleibt fuer
   die Barrierefreiheit erhalten, er wird nur nicht mehr gezeichnet.
   Spezifischer als :focus-visible oben, deshalb gewinnt diese Regel trotz
   dessen !important. Echte Bedienelemente haben nie tabindex="-1". */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Eingabefelder (2026-10-15): Fokus als 2-px-Rahmen in Primaerfarbe, INNEN auf dem
   Feldrand - so bleibt er auch vor dem dunkelblauen Hero sichtbar. Vorher nahm der
   Ring oben (weisser box-shadow, !important) den Feldern ihren focus:ring und
   focus-visible:!outline-none den Rahmen: zu sehen war nur ein Farbwechsel des
   1-px-Randes, bei Feldern mit Fehler (roter Rand) gar nichts (WCAG 2.4.7). Gilt
   auch beim Klick - Browser werten Textfelder immer als :focus-visible.
   Ausnahme .suchkasten-eingabe (Startseite, Katalogkopf): Feld und Knopf sitzen in
   EINEM weissen Kasten, den Fokus zeigt dessen Ring (focus-within, 4 px). Ein
   eckiger Rahmen nur um den Textbereich mitten im runden Kasten sah kaputt aus. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.suchkasten-eingabe):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid hsl(var(--primary)) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}
/* Spezifischer als :focus-visible oben (Doppelring mit 2 px Radius) - sonst saesse
   der wieder eckig im Kasten. Den Fokus zeigt .suchkasten:focus-within. */
.suchkasten-eingabe:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* Brotkrumen: Links 28 statt 20 px hoch (Tippflaeche auf dem Handy); der Abstand
   des Behaelters wurde dafuer verkleinert, die Optik bleibt gleich. */
.schirmer-brotkrume a { display: inline-block; padding-block: 0.25rem; }

/* Fokus nicht unter der klebenden Navigationsleiste verstecken (WCAG 2.4.11).
   Unten haelt mobile-product-bar.js Platz fuer die Kaufleiste frei. */
html { scroll-padding-top: calc(var(--schirmer-nav-height) + 0.75rem); }

/* =========================================================
   Base
   ========================================================= */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

body.schirmer-scroll-locked {
    touch-action: none;
    overscroll-behavior: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: hsl(var(--foreground));
}

a { color: inherit; }

/* Match Lovable's container (max 1400px on 2xl, 2rem side padding) */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container { padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 1536px) {
    .container { max-width: 1400px; }
}

/* =========================================================
   Hero sections (portiert 1:1 aus Lovable)
   ========================================================= */
.hero-section-fixed {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 4rem 0;
}

/* Startseite: die Suchvorschlaege ragen unter den Hero hinaus. Das Bild wird
   dort im eigenen absoluten Kasten (overflow-hidden) beschnitten. */
.hero-section-fixed.hero-overflow-visible { overflow: visible; }

.hero-image-fixed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

/* Gradient-Overlay: Farbverlauf wird inline in der Seite gesetzt
   (wie in Lovables Index.tsx) – hier nur Stacking-Context. */
.hero-gradient-overlay { z-index: 2; }

/* Auf dem Handy laeuft der Hero-Text ueber die volle Breite. Der inline gesetzte
   Verlauf blendet aber nach RECHTS aus (dort soll das Bild frei bleiben) - der
   rechte Teil des Textes landet dadurch auf hellen Bildbereichen und wird
   unlesbar (z. B. weisses T-Shirt auf der Startseite).
   Unter 768px daher ein flaechiger Verlauf von oben nach unten. !important ist
   noetig, weil der Basis-Verlauf als inline-style gesetzt ist. */
@media (max-width: 767px) {
    .hero-gradient-overlay {
        background: linear-gradient(to bottom,
            hsl(212 93% 15% / 0.74) 0%,
            hsl(212 93% 15% / 0.68) 55%,
            hsl(212 93% 15% / 0.62) 100%) !important;
    }

    /* Der Hero-Text laeuft mit 70-80%% Deckkraft. Voll deckend erlaubt einen
       deutlich helleren Verlauf (mehr Bild sichtbar) bei besserem Kontrast:
       bei 0.68 Deckkraft 5.2:1 statt 4.0:1 - WCAG AA verlangt 4.5:1. */
    .hero-section-fixed p {
        color: hsl(var(--primary-foreground)) !important;
    }
}

@media (min-width: 768px) {
    .hero-section-fixed {
        min-height: 75vh;
        padding: 6rem 0;
    }

    /* Keep copy on the dark side of the photo, including tablet widths.
       Long headings previously reached the unshaded image on desktop. */
    .hero-section-fixed h1,
    .hero-section-fixed p {
        max-width: min(36rem, 50vw);
        overflow-wrap: anywhere;
    }

    .hero-gradient-overlay {
        background: linear-gradient(to right,
            hsl(212 93% 15%) 0%,
            hsl(212 93% 15% / 0.85) 55%,
            hsl(212 93% 15% / 0.4) 75%,
            transparent 100%) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section-fixed h1 { font-size: 2.25rem; }
}

@media (min-width: 1500px) {
    .hero-image-fixed { object-position: 60% center; }
}

@media (max-width: 768px) {
    .hero-image-fixed { object-position: 65% center; }
}

/* =========================================================
   Section headings
   ========================================================= */
.section-subtitle {
    display: inline-block;
    color: hsl(var(--primary));
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 700;
    margin: 0 0 1rem;
}

.section-description {
    color: hsl(var(--muted-foreground));
    font-size: 1rem;
    line-height: 1.65;
    max-width: 720px;
}

/* =========================================================
   Product cards
   ========================================================= */
.produkt-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.produkt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -12px rgba(6, 81, 168, 0.25);
    border-color: hsl(var(--primary) / 0.3);
}

.produkt-card .produkt-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: hsl(var(--muted));
    padding: 1rem;
    box-sizing: border-box;
}

.produkt-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: inline-block;
}

.badge-neu             { background: #dcfce7; color: #166534; }
.badge-generalueberholt{ background: #dbeafe; color: #1e40af; }
.badge-gebraucht       { background: #fef3c7; color: #92400e; }
.badge-topseller       { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }

/* =========================================================
   Navbar
   ========================================================= */
.schirmer-navbar {
    background: hsl(var(--background)) !important;
    border-bottom: 1px solid hsl(var(--border));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.schirmer-mobile-nav-panel {
    top: var(--schirmer-nav-height);
}

/* Filter-Sidebar: Scrollbar ohne horizontalen Sprung, links bündig mit Überschriften */
.schirmer-sidebar-scroll {
    scrollbar-gutter: stable;
}

.schirmer-kat-filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.schirmer-kat-filter-btn {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.35;
    padding: 0.375rem 0;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
    background: transparent;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s ease, background-color 0.15s ease;
}

.schirmer-kat-filter-btn:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--muted) / 0.35);
}

.schirmer-kat-filter-btn.is-active {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    font-weight: 500;
}

.schirmer-kat-filter-label {
    display: block;
    width: 100%;
    text-align: left;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* Preis-Filter: Dual-Range-Slider (zwei ueberlappende Range-Inputs, gefuellte Spur).
   Nur die Thumbs sind klickbar (pointer-events), damit beide Regler uebereinander liegen koennen. */
/* 24 px: Mindestgroesse fuer Bedienziele (WCAG 2.5.8, axe target-size 2026-10-15). */
.schirmer-price-range {
    position: relative;
    height: 1.5rem;
}

.schirmer-price-range .schirmer-price-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.5rem;
    transform: translateY(-50%);
    border-radius: 9999px;
    background: hsl(var(--muted));
    overflow: hidden;
}

.schirmer-price-range .schirmer-price-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: hsl(var(--primary));
}

.schirmer-price-range input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.schirmer-price-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 9999px;
    background: hsl(var(--background));
    border: 2px solid hsl(var(--primary));
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.schirmer-price-range input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.schirmer-price-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 9999px;
    background: hsl(var(--background));
    border: 2px solid hsl(var(--primary));
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.schirmer-price-range input[type="range"]::-moz-range-track {
    background: transparent;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.15s ease;
    cursor: pointer;
    background: none;
    border: 0;
}

.nav-link:hover,
.nav-link.active {
    color: hsl(var(--primary));
}

.nav-more-menu {
    min-width: 220px;
}

.nav-more-menu .mud-list-item {
    font-size: 0.9rem;
}

/* Cart badge */
.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px hsl(var(--background));
}

.navbar-logo {
    height: 40px;
    width: auto;
    display: block;
}

/* Mobile nav overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: hsl(var(--background));
    z-index: 1200;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    text-decoration: none;
    border-left: 4px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mobile-nav-link:hover {
    background: hsl(var(--muted) / 0.5);
}

.mobile-nav-link.active {
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.05);
    border-left-color: hsl(var(--primary));
}

.mobile-sub-link {
    display: block;
    padding: 0.75rem 1.5rem 0.75rem 2.75rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.mobile-sub-link:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--muted) / 0.5);
}

/* =========================================================
   Footer
   ========================================================= */
.footer-wrapper {
    padding: 1rem;
}

.footer-wrapper--legal {
    background: hsl(var(--secondary) / 0.5);
}

.footer-root {
    background: hsl(var(--footer-bg));
    color: #d1d5db;
    border-radius: 1rem;
    overflow: hidden;
}

.footer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3rem 0;
}

@media (min-width: 768px) {
    .footer-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-title {
    color: #fff;
    font-weight: 600;
    margin: 0 0 1rem;
    font-size: 1rem;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-link-list a {
    color: #d1d5db;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}

.footer-link-list a:hover {
    color: #fff;
}

.footer-logo {
    height: 40px;
    width: auto;
    margin-bottom: 1rem;
    filter: brightness(0) invert(1);
}

.footer-description {
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.65;
    max-width: 380px;
}

.footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.15s ease;
    text-decoration: none;
}

.footer-social a:hover {
    background: hsl(var(--primary));
}

.footer-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0;
}

.footer-meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    color: #6b7280;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .footer-meta-row {
        flex-direction: row;
        align-items: center;
    }
}

.footer-payment-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    justify-content: space-between;
}

.footer-payment-label {
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 500;
}

.footer-payment-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 0.35rem;
    padding: 0.25rem 0.6rem;
}

/* =========================================================
   Utility helpers
   ========================================================= */
.text-primary     { color: hsl(var(--primary)) !important; }
.text-muted       { color: hsl(var(--muted-foreground)) !important; }
.bg-muted         { background: hsl(var(--muted)) !important; }
.rounded-lg       { border-radius: var(--radius); }
.rounded-full     { border-radius: 9999px; }
.shadow-soft      { box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.12); }

.section          { padding: 4rem 0; }
@media (min-width: 768px) {
    .section      { padding: 5rem 0; }
}

.section-alt      { background: hsl(var(--muted) / 0.5); }

/* WaWi / ERP HTML in Produktdetails (Tabellen, Listen, Überschriften) */
.product-description :is(h1, h2, h3, h4, h5, h6) {
    color: hsl(var(--foreground));
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
    line-height: 1.35;
}
.product-description h2 { font-size: 1.125rem; }
.product-description h3 { font-size: 1rem; }
.product-description p { margin: 0.5rem 0; }
.product-description p:first-child { margin-top: 0; }
.product-description ul,
.product-description ol {
    margin: 0.5rem 0 0.75rem !important;
    padding-left: 1.5rem !important;
    list-style-position: outside !important;
}
.product-description ul { list-style-type: disc !important; }
.product-description ol { list-style-type: decimal !important; }
.product-description li {
    display: list-item !important;
    margin: 0.25rem 0;
    padding-left: 0.15rem;
}
.product-description ul ul { list-style-type: circle !important; }
.product-description ul ul ul { list-style-type: square !important; }
.product-description dl { margin: 0.75rem 0; }
.product-description dt { font-weight: 600; color: hsl(var(--foreground)); margin-top: 0.5rem; }
.product-description dd { margin: 0.125rem 0 0.5rem 0; }
/* Abschnitts-Ueberschrift: WaWi schickt Sektionslabels als <p> direkt vor einer Tabelle */
.product-description p:has(+ table) {
    font-weight: 700;
    font-size: 1.05rem;
    color: hsl(var(--foreground));
    margin: 1.75rem 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid hsl(var(--primary) / 0.22);
}
.product-description > p:has(+ table):first-child { margin-top: 0; }

/* Spezifikationstabellen. !important ueberschreibt die Inline-Styles aus Office Omni,
   damit die Tabelle unserem Design folgt (statt grauem Vollgitter). */
.product-description table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0.5rem 0 1.5rem !important;
    font-size: 0.9rem !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.6rem;
    overflow: hidden;                       /* rundet die Ecken trotz collapse */
    box-shadow: 0 1px 2px hsl(var(--foreground) / 0.04);
}
.product-description th,
.product-description td {
    border: 0 !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    padding: 0.7rem 1rem !important;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.product-description tr:last-child > * { border-bottom: 0 !important; }
/* Label-Spalte. Der Sanitizer macht aus der ersten Zelle jeder Datenzeile
   ein <th scope="row"> (WCAG 1.3.1); td:first-child bleibt als Rueckfall
   fuer Tabellen mit nur einer Spalte stehen. */
.product-description th,
.product-description td:first-child {
    width: 35%;
    background: hsl(var(--muted) / 0.55) !important;
    border-right: 1px solid hsl(var(--border)) !important;
    font-weight: 600;
    color: hsl(var(--foreground));
}
.product-description td p,
.product-description th p { margin: 0 !important; }   /* Zellen enthalten <p> */
.product-description a {
    color: hsl(var(--primary));
    text-decoration: underline;
}
.product-description a:hover { opacity: 0.85; }
.product-description blockquote {
    border-left: 3px solid hsl(var(--primary) / 0.4);
    padding-left: 1rem;
    margin: 0.75rem 0;
    color: hsl(var(--muted-foreground));
}

/* =========================================================
   Checkout — alternative payment options
   ========================================================= */
.checkout-pay-option {
    cursor: pointer;
}

/* =========================================================
   Blazor error UI
   ========================================================= */
#blazor-error-ui {
    background: #fff4c2;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Form-validation helpers (unchanged) */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: hsl(var(--destructive)); font-size: 0.85rem; margin-top: 0.25rem; }

/* Barrierefreiheit: prefers-reduced-motion respektieren - Animationen/Transitions
   praktisch abschalten fuer Nutzer mit reduzierter Bewegung. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Vorschaubilder der Produktgalerie.
   Bewusst hier und nicht ueber Tailwind-ring-Utilities: Tailwind laeuft ueber
   das Play-CDN und erzeugt seine Regeln erst zur Laufzeit im Browser, was fuer
   einen Zustand, der bei jedem Klick wechselt, unnoetig fragil ist. box-shadow
   statt border, weil <button> global border-width:0 hat. */
.thumb-kachel {
    outline-offset: 4px;
}
/* Kein Rahmen um die Vorschaubilder - die Fotos sind selten quadratisch, ein
   Ring betonte das nur. Stattdessen: grau = nicht gewaehlt, Farbe = gewaehlt. */
.thumb-kachel .thumb-bild {
    filter: grayscale(1);
    opacity: .6;
    transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.thumb-kachel:hover .thumb-bild {
    filter: grayscale(0);
    opacity: 1;
}
.thumb-kachel--aktiv .thumb-bild,
.thumb-kachel--aktiv:hover .thumb-bild {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 10px 22px -10px hsl(var(--primary) / .6);
}
.thumb-kachel .thumb-strich {
    width: 0;
    background: transparent;
    transition: width .2s ease, background-color .2s ease;
}
.thumb-kachel--aktiv .thumb-strich {
    width: 2rem;
    background: hsl(var(--primary));
}

/* Pfeile am Rand der Bildleiste - gleiche Begruendung wie oben. */
.thumb-pfeil {
    box-shadow: 0 0 0 1px hsl(var(--border));
    transition: box-shadow .15s ease, color .15s ease;
}
.thumb-pfeil:hover {
    box-shadow: 0 0 0 1px hsl(var(--primary));
}

/* Bildleiste auf der Produktseite: waagerecht scrollbar, aber ohne sichtbare
   Scrollleiste - navigiert wird ueber die Pfeile links und rechts daneben. */
.thumb-strip {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.thumb-strip::-webkit-scrollbar {
    display: none;
}

/* --------------------------------------------------------------------------
   Anmeldedialog auf schmalen Displays.
   MudBlazor gibt jedem Reiter feste 160 px und blendet zusaetzlich links und
   rechts je einen 48-px-Blaetterpfeil ein, sobald sie nicht passen. In einem
   311-px-Dialog ragte die Reiterleiste dadurch ueber den Bildschirmrand und
   "Registrieren" war angeschnitten - gemessen bei 375 px am 2026-08-03:
   Deutsch 49 px, Polnisch 52 px, Ukrainisch 57 px darueber. Betraf ALLE
   Sprachen, die neuen nur staerker (laengere Woerter).
   -------------------------------------------------------------------------- */
.mud-dialog .mud-tabs-scroll-button { display: none !important; }

.mud-dialog .mud-tabs-tabbar,
.mud-dialog .mud-tabs-tabbar-inner { max-width: 100% !important; }

.mud-dialog .mud-tabs-tabbar-content {
    flex: 1 1 auto !important;
    width: auto !important;
}

.mud-dialog .mud-tab {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Native selection indicators survive Windows high-contrast color overrides. */
@media (forced-colors: active) {
    input.sr-only[type="radio"],
    input.sr-only[type="checkbox"] {
        position: static;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0 0.25rem 0 0;
        padding: 0;
        clip: auto;
        clip-path: none;
        overflow: visible;
        white-space: normal;
        appearance: auto;
    }
    input.sr-only[type="checkbox"] + .peer { display: none; }
}

/* Long translated headings must fit even in the narrow mobile hero. */
.hero-section-fixed h1 {
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
}
@media (max-width: 767px) {
    /* Readable entry text and a stable scale when focusing mobile forms. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    textarea, select { font-size: 16px; }
    /* Zu lange Platzhalter enden mit "..." statt mitten im Wort abzubrechen. */
    input { text-overflow: ellipsis; }
}

/* Hinweis bei Verbindungsabbruch im Servermodus (App.razor, js/verbindung.js).
   Blazor setzt die Klassen components-reconnect-show/-failed/-rejected. Er wird
   erst nach 1 s sichtbar, damit kurze Aussetzer nicht aufblitzen. */
#components-reconnect-modal.verbindung {
    border: 0;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: 0 20px 50px -20px rgba(6, 40, 80, 0.45);
    text-align: center;
    font-size: 0.95rem;
}
#components-reconnect-modal.verbindung::backdrop { background: rgba(4, 20, 40, 0.35); }
#components-reconnect-modal .verbindung-weg { display: none; }
#components-reconnect-modal.components-reconnect-failed .verbindung-sucht,
#components-reconnect-modal.components-reconnect-rejected .verbindung-sucht { display: none; }
#components-reconnect-modal.components-reconnect-failed .verbindung-weg { display: block; }
#components-reconnect-modal button.verbindung-weg {
    margin: 0.85rem auto 0;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-weight: 600;
}
#components-reconnect-modal.components-reconnect-show[open],
#components-reconnect-modal.components-reconnect-show[open]::backdrop {
    animation: verbindung-ein 0.2s ease-out both;
}
@keyframes verbindung-ein { from { opacity: 0; } to { opacity: 1; } }

/* Lade-Platzhalter (Skeleton, 21.10.2026): graue Flaechen in der Form des Inhalts, der
   gleich kommt - der Platz steht schon, beim Eintreffen springt nichts, und ein Lichtstreif
   zeigt, dass geladen wird. Bausteine: SkelettProduktKarten, SkelettProduktSeite,
   SkelettKategorien, LadeKarte. Eigener Grauton statt --muted: der ist gleich --secondary
   und waere auf den getoenten Flaechen (Produktseite, Kontobereich) unsichtbar.
   Form und Groesse kommen aus den Tailwind-Klassen am Element. Die Vorgaben stehen in
   :where() (Spezifitaet 0), damit rounded-*, hidden/sm:block usw. sie immer schlagen. */
:where(.skelett) {
    display: block;
    border-radius: 0.375rem;
}
.skelett {
    background-color: hsl(214 28% 90%);
    background-image: linear-gradient(90deg, transparent 30%, hsl(0 0% 100% / 0.7) 50%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    /* Ruhelage: Lichtstreif rechts ausserhalb - so bleibt nur die graue Flaeche,
       wenn die Animation nicht laeuft. */
    background-position: -50% 0;
    animation: skelett-schimmer 1.5s ease-in-out infinite;
}
@keyframes skelett-schimmer {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skelett { animation: none; background-image: none; }
}

/* Passwortfeld mit eigenem Augen-Knopf (PasswortFeld.razor, 21.10.2026): Edge blendet in
   Passwortfeldern ein eigenes Auge ein - dort stuenden sonst zwei nebeneinander. */
.passwort-feld input::-ms-reveal,
.passwort-feld input::-ms-clear {
    display: none;
}