/* ==================================================================
   style-neu2.css - Designlinie des Haendlerportals (b2b.mhsys.de)
   ------------------------------------------------------------------
   Seit 21.09.2026 dieselbe Linie wie die Kundenseiten unter
   service.mhsys.de (service/core/service.css): Schrift Jost, die
   Knopffarbe des Shops (#006eaf), flache helle Flaechen, EINE Hoehe
   fuer alles Anfassbare. Das Backoffice hat damit nichts zu tun
   (system/core/style-neu.css).

   Grundsaetze - dieselben wie drueben, aus demselben Grund:
   - Fuers Handy gebaut. Haendler bestellen im Laden, am Marktstand,
     unterwegs; der Schreibtisch ist der Ausnahmefall.
   - Eingabefelder, Pulldowns und Knoepfe haengen an EINER Hoehe
     (--sv-hoehe, 48px). Nebeneinander stehen sie damit immer auf
     einer Linie, ohne dass irgendwo eine zweite Pixelzahl steht.
   - Eingaben haben 16px Schrift - darunter zoomt iOS Safari die Seite
     beim Antippen heran und der Haendler scrollt sich zurecht.
   - Alles zum Antippen ist mindestens 44px hoch.
   - Farben nur ueber die Variablen unten.

   Die Namen --sv-* sind wortgleich die aus service.css, damit eine
   Farbe nicht an zwei Stellen unterschiedlich heisst. Die alten Namen
   (--blue, --navy, --border ...) bleiben als Verweise darauf stehen:
   core/b2b.js setzt var(--ok-border)/var(--err-border) beim Speichern,
   und einzelne Seiten nennen var(--muted) im style-Attribut.
   ================================================================== */

:root {
    /* ── Farben (wortgleich service.css) ── */
    --sv-blau: #006eaf;
    --sv-blau-dunkel: #00598e;
    --sv-blau-hell: #ebf4fa;
    --sv-blau-rand: #b8d4e8;
    --sv-text: #1d1d1d;
    --sv-text-leise: #5b6670;
    --sv-rand: #dde3e9;
    --sv-rand-feld: #c5cfd8;
    --sv-grund: #f3f5f8;
    --sv-weiss: #ffffff;
    --sv-herz: #d60b0c;

    --sv-fehler: #a4231c;
    --sv-fehler-hell: #fdeeed;
    --sv-fehler-rand: #efbdb8;
    --sv-ok: #1d6e40;
    --sv-ok-hell: #eaf6ef;
    --sv-ok-rand: #acd8bd;
    --sv-warn: #6d5000;
    --sv-warn-hell: #fff7df;
    --sv-warn-rand: #ecd18a;

    --sv-hoehe: 48px;
    --sv-radius: 10px;
    --sv-radius-gross: 16px;
    --sv-schatten: 0 1px 2px rgba(16, 42, 70, .05), 0 6px 20px rgba(16, 42, 70, .06);
    --sv-fokus: 0 0 0 3px rgba(0, 110, 175, .28);
    --sv-schrift: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --sv-schrift-zahl: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Hoehe der festen Kopfleiste - die Seite haelt darunter Abstand.
       Seit Roadmap 4.3 (21.09.2026) eine Zeile auf jeder Breite. Die Zahl
       steht nur hier; wer sie aendert, aendert zugleich den Abstand von
       .content, der Schublade und die Lage der aufgeklappten Suche. */
    --navbar-zeile: 60px;
    --navbar-h: var(--navbar-zeile);

    /* ── Alte Namen, jetzt Verweise (b2b.js und einzelne style-Attribute) ── */
    --blue: var(--sv-blau);
    --blue-dark: var(--sv-blau-dunkel);
    --blue-light: #3d9fd4;
    --blue-pale: var(--sv-blau-rand);
    --blue-ghost: var(--sv-blau-hell);
    --navy: var(--sv-blau);
    --ink: var(--sv-text);
    --ink-soft: var(--sv-text);
    --muted: var(--sv-text-leise);
    --muted-light: #97a2ac;
    --bg: var(--sv-grund);
    --surface: var(--sv-weiss);
    --surface-2: #f7f9fb;
    --border: var(--sv-rand);
    --border-mid: var(--sv-rand-feld);
    --ok-bg: var(--sv-ok-hell);     --ok-border: var(--sv-ok);      --ok-text: var(--sv-ok);
    --err-bg: var(--sv-fehler-hell); --err-border: var(--sv-fehler); --err-text: var(--sv-fehler);
    --warn-bg: var(--sv-warn-hell);  --warn-border: #d9a400;         --warn-text: var(--sv-warn);
    --radius: var(--sv-radius);
    --radius-lg: var(--sv-radius-gross);
    --shadow-sm: var(--sv-schatten);
    --shadow-md: var(--sv-schatten);
    --shadow-lg: 0 2px 6px rgba(16, 42, 70, .07), 0 12px 32px rgba(16, 42, 70, .10);
    --transition: .15s;
    --font: var(--sv-schrift);
    --font-display: var(--sv-schrift);
    --font-mono: var(--sv-schrift-zahl);

    color-scheme: light;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--sv-schrift);
    font-size: 16px;
    line-height: 1.55;
    color: var(--sv-text);
    background: var(--sv-grund);
    min-height: 100vh;
    /* Kein waagrechtes Scrollen: eine zu breite Tabelle scrollt in ihrem
       eigenen Kasten (.tabelle-scroll), nie die ganze Seite. */
    overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--sv-blau); text-decoration: none; text-underline-offset: 2px; }
a:hover { color: var(--sv-blau-dunkel); text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; font-weight: 600; }
hr { border: none; border-top: 1px solid var(--sv-rand); margin: 24px 0; }
small, .hint { font-size: 14px; color: var(--sv-text-leise); line-height: 1.5; }

/* Nur fuer Screenreader */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ── Kopfleiste ────────────────────────────────────────────────────── */

.navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    background: var(--sv-weiss);
    border-bottom: 1px solid var(--sv-rand);
    box-shadow: 0 1px 3px rgba(16, 42, 70, .05);
    z-index: 1000;
}

.navbar::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 100%; height: 3px; background: var(--sv-blau);
}

.navbar-content {
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 1280px;
    min-height: var(--navbar-zeile);
    margin: 0 auto; padding: 0 20px;
}

/* Schiebt Suche und Warenkorb nach rechts */
.navbar-fueller { flex: 1; }

/* Logo schrumpft nie - es ist der Weg zur Startseite */
.logo-link { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
/* 38px am Rechner (Wunsch des Inhabers 21.09.2026: "etwas groesser"), in der
   60px-Leiste. Das Logo ist genau 3-mal so breit wie hoch (Bilddatei 240x80) -
   wer die Hoehe aendert, verschiebt die beiden Umschaltbreiten unten um die
   dreifache Differenz mit. */
.logo { height: 38px; width: auto; flex-shrink: 0; display: block; }

/* Menuepunkte in derselben Zeile wie Logo, Suche und Warenkorb (Roadmap 4.3).
   Kein overflow: der Pulldown "Mein Konto" haengt unter der Zeile heraus und
   wuerde sonst abgeschnitten. Dass die Zeile nie umbricht, sichert die
   Umschaltbreite zum Burger (unten) - gemessen, nicht geschaetzt. */
.nav-links {
    display: flex; align-items: center; gap: 2px;
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: 12px;
}

.nav-links a,
.nav-konto-knopf {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 44px;
    color: var(--sv-text-leise);
    font: inherit; font-size: 15px; font-weight: 500;
    padding: 0 11px;
    border-radius: var(--sv-radius);
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-konto-knopf:hover { color: var(--sv-blau); background: var(--sv-blau-hell); text-decoration: none; }
.nav-links a:focus-visible,
.nav-konto-knopf:focus-visible { outline: none; box-shadow: var(--sv-fokus); }
.nav-links a.active,
.nav-links a[aria-current="page"],
.nav-konto-knopf.active { color: var(--sv-blau); background: var(--sv-blau-hell); font-weight: 600; }

.nav-links a.nav-highlight { color: var(--sv-blau); font-weight: 600; }

/* Anzahl an der Merkliste (Leiste und Schublade), 25.09.2026 - bei 0 hidden */
.nav-zaehler {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    margin-left: 6px;
    font-size: 12px; font-weight: 700; line-height: 1;
    color: var(--sv-weiss);
    background: var(--sv-herz);
    border-radius: 999px;
}
.nav-zaehler[hidden] { display: none; }
.nav-links a.nav-highlight:hover { background: var(--sv-blau-hell); }

/* ── Pulldown "Mein Konto" (toggleKonto() in core/b2b.js) ── */
.nav-konto { position: relative; flex-shrink: 0; }
.nav-konto-knopf { background: none; border: 0; cursor: pointer; }
.nav-konto-knopf[aria-expanded="true"] { color: var(--sv-blau); background: var(--sv-blau-hell); }
.nav-konto-pfeil { flex-shrink: 0; transition: transform .15s; }
.nav-konto-knopf[aria-expanded="true"] .nav-konto-pfeil { transform: rotate(180deg); }

.nav-konto-liste {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 200px;
    padding: 6px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-schatten);
    z-index: 1100;
}
.nav-konto-liste[hidden] { display: none; }
.nav-links .nav-konto-liste a { display: flex; width: 100%; color: var(--sv-text); font-weight: 500; }
.nav-links .nav-konto-liste a.active { color: var(--sv-blau); font-weight: 600; }

/* ── Infos und Ausloggen als Symbole ── */
.nav-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    color: var(--sv-blau);
    border: 1px solid transparent;
    border-radius: var(--sv-radius);
}
.nav-icon:hover,
.nav-icon.active { background: var(--sv-blau-hell); text-decoration: none; }
.nav-icon:focus-visible { outline: none; box-shadow: var(--sv-fokus); }
.nav-icon--logout { color: var(--sv-text-leise); }
.nav-icon--logout:hover { color: var(--sv-fehler); background: var(--sv-fehler-hell); }

/* Burger - erst unter der Umschaltbreite sichtbar (unten), dort ist die Zeile voll */
.menu-btn {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    flex-shrink: 0; order: -1;
    font-size: 22px; line-height: 1;
    color: var(--sv-text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.menu-btn:hover { background: var(--sv-grund); }
.menu-btn:focus-visible { outline: none; box-shadow: var(--sv-fokus); }


/* ── Schublade (mobiles Menue) ─────────────────────────────────────── */

.drawer {
    position: fixed; top: 0; left: -300px;
    width: 300px; max-width: 86vw; height: 100%;
    background: var(--sv-weiss);
    border-right: 1px solid var(--sv-rand);
    box-shadow: 4px 0 28px rgba(16, 42, 70, .16);
    padding: calc(var(--navbar-h) + 12px) 0 24px;
    overflow-y: auto;
    transition: left .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 1400;
}

.drawer.open { left: 0; }

/* 52px: jede Zeile sicher mit dem Daumen zu treffen */
.drawer a {
    display: flex; align-items: center;
    min-height: 52px;
    padding: 10px 22px;
    color: var(--sv-text);
    font-size: 16px; font-weight: 500;
    border-bottom: 1px solid var(--sv-rand);
}
.drawer a:first-child { border-top: 1px solid var(--sv-rand); }
.drawer a:hover,
.drawer a:focus-visible { background: var(--sv-blau-hell); color: var(--sv-blau-dunkel); text-decoration: none; }
.drawer a[href*="logout"] { color: var(--sv-fehler); margin-top: 12px; border-top: 1px solid var(--sv-rand); }
/* "Mein Konto" als Zwischenueberschrift - in der Schublade kein Pulldown */
.drawer-titel {
    padding: 18px 22px 6px;
    font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--sv-text-leise);
}

.drawer-overlay { display: none; position: fixed; inset: 0; z-index: 1350; background: rgba(16, 42, 70, .45); }
.drawer-overlay.visible { display: block; }


/* ── Warenkorb-Knopf in der Kopfleiste ─────────────────────────────── */

.cart-trigger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 16px;
    font: inherit; font-size: 15px; font-weight: 600;
    color: var(--sv-weiss);
    background: var(--sv-blau);
    border: 1px solid var(--sv-blau);
    border-radius: var(--sv-radius);
    cursor: pointer;
    transition: background-color .15s;
}
.cart-trigger:hover { background: var(--sv-blau-dunkel); border-color: var(--sv-blau-dunkel); }
.cart-trigger:focus-visible { outline: none; box-shadow: var(--sv-fokus); }

.cart-trigger-icon { font-size: 16px; line-height: 1; }

.cart-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    font-size: 13px; font-weight: 700;
    color: var(--sv-blau);
    background: var(--sv-weiss);
    border-radius: 999px;
}


/* ── Warenkorb-Schublade ───────────────────────────────────────────── */

.cart-overlay { display: none; position: fixed; inset: 0; background: rgba(16, 42, 70, .45); z-index: 1200; }
.cart-overlay.visible { display: block; }

.cart-drawer {
    position: fixed; top: 0; right: -540px;
    width: 520px; max-width: 100vw; height: 100%;
    background: var(--sv-grund);
    box-shadow: -8px 0 40px rgba(16, 42, 70, .18);
    display: flex; flex-direction: column;
    transition: right .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 1300;
}
.cart-drawer.open { right: 0; }

.cart-drawer-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-shrink: 0;
    padding: 14px 16px 14px 20px;
    font-size: 17px; font-weight: 600;
    color: var(--sv-weiss);
    background: var(--sv-blau);
}

.cart-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    font: inherit; font-size: 18px; line-height: 1;
    color: var(--sv-weiss);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.cart-close:hover { background: rgba(255, 255, 255, .26); }
.cart-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }

.cart-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    -webkit-overflow-scrolling: touch;
}

.cart-position {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
}

.cart-position-form { flex-shrink: 0; }
.cart-position-form select { width: 84px; }

.cart-position-name { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.cart-position-name span { display: block; font-size: 14px; color: var(--sv-text-leise); }

.cart-position-preis { font-size: 16px; font-weight: 600; white-space: nowrap; }
.cart-rabatt { border-color: var(--sv-ok-rand); background: var(--sv-ok-hell); }
.cart-rabatt-preis { color: var(--sv-ok); }

.cart-gesamt {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 16px;
    font-size: 18px; font-weight: 600;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
}

/* Lieferadresse und Referenz: Beschriftung oben, darunter Feld und Speichern-Symbol in einer
   Leiste (Wunsch des Inhabers, 25.09.2026) - der Knopf ist quadratisch in --sv-hoehe, das Feld
   nimmt den Rest, auch auf dem Handy. */
.cart-referenz {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
    font-size: 15px;
}
.cart-referenz > span { font-weight: 600; }
.cart-referenz input[type="text"],
.cart-referenz select { width: 100%; max-width: 100%; }
.cart-referenz .btn-referenz { align-self: flex-start; }
.cart-referenz-zeile { display: flex; align-items: center; gap: 8px; }
.cart-referenz .cart-referenz-zeile > input[type="text"],
.cart-referenz .cart-referenz-zeile > select { flex: 1 1 auto; width: auto; min-width: 0; }
.cart-referenz .cart-referenz-zeile > .btn-referenz--symbol {
    flex: 0 0 var(--sv-hoehe);
    width: var(--sv-hoehe); height: var(--sv-hoehe); min-height: var(--sv-hoehe);
    padding: 0;
    align-self: center;
}
.btn-referenz--symbol:disabled { cursor: default; }

.cart-hinweis {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px;
    font-size: 14px; line-height: 1.5;
    color: var(--sv-text-leise);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
}
.cart-hinweis-item { display: flex; align-items: flex-start; gap: 8px; }
.cart-hinweis-item strong { color: var(--sv-text); font-weight: 600; }

.cart-leer {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    padding: 48px 16px;
    color: var(--sv-text-leise);
    text-align: center;
}


/* ── Seite ─────────────────────────────────────────────────────────── */

.content {
    width: 100%; max-width: 1280px;
    margin: 0 auto;
    padding: calc(var(--navbar-h) + 28px) 20px 64px;
}

.content h1 { font-size: clamp(25px, 4.4vw, 32px); margin-bottom: 8px; letter-spacing: -.01em; }
.content h2 { font-size: 22px; margin: 28px 0 10px; }
.content h3 { font-size: 17px; margin: 20px 0 8px; }
.content h1 span { color: var(--sv-blau); }
.content p { line-height: 1.6; }

.subline { color: var(--sv-text-leise); margin-bottom: 24px; max-width: 70ch; }

.container { width: 100%; }


/* ── Felder ────────────────────────────────────────────────────────── */

/* 16px Schriftgroesse ist Absicht: darunter zoomt iOS Safari beim
   Antippen heran. Die Hoehe kommt aus --sv-hoehe, damit ein Feld neben
   einem Knopf auf derselben Linie sitzt. */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="url"], input[type="date"], select, textarea {
    display: block;
    width: 100%;
    max-width: 420px;
    height: var(--sv-hoehe);
    padding: 0 14px;
    font: inherit; font-size: 16px;
    color: var(--sv-text);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand-feld);
    border-radius: var(--sv-radius);
    transition: border-color .15s, box-shadow .15s;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, input[type="search"]:focus,
input[type="url"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--sv-blau);
    box-shadow: var(--sv-fokus);
}

select {
    width: auto; min-width: 84px;
    padding-right: 36px;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

textarea {
    height: auto; min-height: 116px;
    max-width: 100%;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--sv-grund);
    color: var(--sv-text-leise);
    cursor: not-allowed;
}

input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px;
    accent-color: var(--sv-blau);
}

/* Mengenauswahl an den Produkten (select_anzahl() in core/basics.inc.php) */
.menge-select { width: 84px; min-width: 84px; }


/* ── Knoepfe ───────────────────────────────────────────────────────── */

input[type="submit"], button[type="submit"], .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--sv-hoehe);
    padding: 0 22px;
    font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2;
    text-align: center; text-decoration: none;
    color: var(--sv-weiss);
    background: var(--sv-blau);
    border: 1px solid var(--sv-blau);
    border-radius: var(--sv-radius);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

input[type="submit"]:hover, button[type="submit"]:hover, .btn:hover {
    background: var(--sv-blau-dunkel);
    border-color: var(--sv-blau-dunkel);
    color: var(--sv-weiss);
    text-decoration: none;
}

input[type="submit"]:focus-visible, button[type="submit"]:focus-visible, .btn:focus-visible {
    outline: none; box-shadow: var(--sv-fokus);
}

input[type="submit"]:disabled, button[type="submit"]:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { /* zusaetzlich zu .btn, gleiche Optik */ }

.btn-bestellen, .btn-starten {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    min-height: var(--sv-hoehe);
    padding: 0 22px;
    font: inherit; font-size: 17px; font-weight: 600;
    text-align: center; text-decoration: none !important;
    color: var(--sv-weiss) !important;
    background: var(--sv-blau);
    border: 1px solid var(--sv-blau);
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.btn-bestellen:hover, .btn-starten:hover { background: var(--sv-blau-dunkel); border-color: var(--sv-blau-dunkel); }
.btn-bestellen:focus-visible, .btn-starten:focus-visible { outline: none; box-shadow: var(--sv-fokus); }

/* Abschliessen ist der eine Knopf, den man nicht aus Versehen trifft:
   eigene Farbe, aber dieselbe Hoehe wie alles andere. */
.btn-bestellen { background: #b8433a; border-color: #b8433a; }
.btn-bestellen:hover { background: #9d362e; border-color: #9d362e; }

.btn-starten { max-width: 320px; margin-top: 8px; }

/* 44px: Loeschen im Warenkorb muss mit dem Daumen zu treffen sein */
.btn-delete {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    color: var(--sv-text-leise);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand-feld);
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.btn-delete:hover { color: var(--sv-fehler); border-color: var(--sv-fehler-rand); background: var(--sv-fehler-hell); text-decoration: none; }

.btn-referenz {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px;
    font: inherit; font-size: 15px; font-weight: 600;
    color: var(--sv-blau);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-blau-rand);
    border-radius: var(--sv-radius);
    cursor: pointer;
    white-space: nowrap;
}
.btn-referenz:hover { background: var(--sv-blau-hell); border-color: var(--sv-blau); color: var(--sv-blau-dunkel); }
.btn-referenz:focus-visible { outline: none; box-shadow: var(--sv-fokus); }

.btn-varianten {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    min-height: 44px; padding: 0 16px;
    margin-top: 4px;
    font: inherit; font-size: 15px; font-weight: 600;
    color: var(--sv-blau);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-blau-rand);
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.btn-varianten:hover { background: var(--sv-blau-hell); border-color: var(--sv-blau); }
.btn-varianten:focus-visible { outline: none; box-shadow: var(--sv-fokus); }

/* Formulare an den Produkten: Menge und "+" nebeneinander, gleich hoch */
.form-add, .form-change, .form-reorder {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.form-add input[type="submit"] { min-width: 56px; padding: 0 14px; font-size: 20px; }
.form-reorder input[type="submit"] { padding: 0 16px; font-size: 15px; }


/* ── Karte, Kaesten, Hinweise ──────────────────────────────────────── */

.box1 {
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
    box-shadow: var(--sv-schatten);
    padding: 26px;
    margin: 14px 0;
}
.box1 p { margin: 8px 0; }
.box1 h1 { margin-bottom: 14px; }

.box1mini {
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 14px;
    color: var(--sv-text-leise);
}

/* Die drei Kaesten sind wortgleich .sv-hinweis--* von service.mhsys.de */
.boxok, .boxfehler, .boxhinweis {
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 16px; line-height: 1.5;
    border: 1px solid; border-left-width: 4px;
    border-radius: var(--sv-radius);
}
.boxok      { background: var(--sv-ok-hell);     border-color: var(--sv-ok-rand);     border-left-color: var(--sv-ok);     color: var(--sv-ok); }
.boxfehler  { background: var(--sv-fehler-hell); border-color: var(--sv-fehler-rand); border-left-color: var(--sv-fehler); color: var(--sv-fehler); }
.boxhinweis { background: var(--sv-warn-hell);   border-color: var(--sv-warn-rand);   border-left-color: #d9a400;          color: var(--sv-warn); }
.boxok strong, .boxfehler strong, .boxhinweis strong { font-weight: 600; }
.boxok a, .boxfehler a, .boxhinweis a { color: inherit; text-decoration: underline; }

.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 48px 20px;
    text-align: center;
    color: var(--sv-text-leise);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
}
.empty-state .icon { font-size: 34px; }

.beta-hinweis {
    background: var(--sv-warn-hell);
    border: 1px solid var(--sv-warn-rand);
    border-left: 4px solid #d9a400;
    border-radius: var(--sv-radius);
    padding: 14px 16px;
    font-size: 15px;
    color: var(--sv-warn);
    margin-bottom: 24px;
}

.tooltip-toggle { text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.tooltip-box {
    display: none;
    background: var(--sv-blau-hell);
    border: 1px solid var(--sv-blau-rand);
    border-radius: var(--sv-radius);
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 10px;
}
.tooltip-box.visible { display: block; }


/* ── Tabellen ──────────────────────────────────────────────────────── */

/* Eine Tabelle, die breiter werden kann als der Schirm, scrollt in
   ihrem eigenen Kasten - nicht die ganze Seite. */
.table-container, .export-table-wrap, .tabelle-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.custom-table, .designbox, .export-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
    overflow: hidden;
    font-size: 16px;
}

.custom-table th, .designbox th, .export-table thead th {
    padding: 13px 16px;
    text-align: left;
    white-space: nowrap;
    font-size: 14px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--sv-weiss);
    background: var(--sv-blau);
}

.custom-table td, .designbox td, .export-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sv-rand);
    vertical-align: middle;
}

.custom-table tbody tr:last-child td,
.designbox tr:last-child td,
.export-table tbody tr:last-child td { border-bottom: none; }

.custom-table tbody tr:hover,
.designbox tbody tr:hover,
.export-table tbody tr:hover { background: var(--sv-blau-hell); }

.export-table .td-nr { font-weight: 600; color: var(--sv-blau); white-space: nowrap; font-family: var(--sv-schrift-zahl); }
.export-table .td-datum { white-space: nowrap; color: var(--sv-text-leise); }
.export-table .td-preis { font-weight: 600; white-space: nowrap; text-align: right; }
.export-table .td-actions { white-space: nowrap; }

/* Suchkasten "Produktname od. Artikelnummer" */
.designbox2 {
    width: 100%;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
    border-collapse: collapse;
    overflow: hidden;
    margin: 20px 0;
}
.designbox2 th {
    display: block; width: 100%;
    padding: 14px 18px 8px;
    text-align: left;
    font-size: 15px; font-weight: 600;
    color: var(--sv-text);
    background: var(--sv-weiss);
}
.designbox2 th a { font-weight: 500; font-size: 15px; }
.designbox2 tr:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 18px 18px; }
.designbox2 tr:last-child td { padding: 0; border: none; }
.designbox2 tr:last-child td:first-child { flex: 1 1 220px; }
.designbox2 input[type="text"] { width: 100%; max-width: 100%; }
.designbox2 input[type="submit"] { flex-shrink: 0; }


/* ── Produkte ──────────────────────────────────────────────────────── */

.produkt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }

.produkt-card {
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
    overflow: hidden;
}
.produkt-card:hover { border-color: var(--sv-blau-rand); }

.produkt-header {
    display: flex; gap: 14px; align-items: flex-start;
    position: relative;
    padding: 16px;
    border-bottom: 1px solid var(--sv-rand);
}

.produkt-bild img {
    width: 92px; height: 92px; flex-shrink: 0;
    object-fit: contain;
    background: var(--sv-grund);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
    padding: 4px;
    display: block;
}

.produkt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 48px; }
.produkt-info a, .produkt-info > strong { font-size: 16px; font-weight: 600; color: var(--sv-text); line-height: 1.35; overflow-wrap: anywhere; }
.produkt-info a:hover { color: var(--sv-blau); }

.badge-produkt-wrap, .analyse-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.badge-produkt {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge-produkt.ok        { background: var(--sv-ok-hell);     border-color: var(--sv-ok-rand);     color: var(--sv-ok); }
.badge-produkt.warn      { background: var(--sv-warn-hell);   border-color: var(--sv-warn-rand);   color: var(--sv-warn); }
.badge-produkt.alert     { background: var(--sv-fehler-hell); border-color: var(--sv-fehler-rand); color: var(--sv-fehler); }
.badge-produkt.neutral   { background: var(--sv-grund);       border-color: var(--sv-rand);        color: var(--sv-text-leise); }
.badge-produkt.renner    { background: var(--sv-warn-hell);   border-color: var(--sv-warn-rand);   color: var(--sv-warn); }
.badge-produkt.highlight { background: var(--sv-blau-hell);   border-color: var(--sv-blau-rand);   color: var(--sv-blau-dunkel); }

.varianten-collapsed { display: none; }

.variante-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--sv-rand);
}
.variante-row:first-child { border-top: none; }
.variante-form { flex-shrink: 0; }
.variante-name { flex: 1; min-width: 120px; font-size: 15px; overflow-wrap: anywhere; }
.variante-preis { font-size: 15px; font-weight: 600; color: var(--sv-blau); white-space: nowrap; }

.ausverkauft {
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 12px;
    font-size: 14px; font-weight: 600;
    color: var(--sv-fehler);
    background: var(--sv-fehler-hell);
    border: 1px solid var(--sv-fehler-rand);
    border-radius: var(--sv-radius);
}

/* Herz auf der Produktkarte - 44px, damit es der Daumen trifft */
.fav-btn {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    font-size: 20px; line-height: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.fav-btn:hover { background: var(--sv-grund); }
.fav-btn:focus-visible { outline: none; box-shadow: var(--sv-fokus); }
.fav-btn.fav-aktiv { animation: fav-pop .35s ease; }
/* Das Herz aus Font Awesome als Inline-SVG (25.09.2026): Umriss (fa-regular), gemerkt voll
   (fa-solid) - beide Formen im SVG, gezeigt wird die passende; Farbe ueber currentColor */
.fav-btn { color: var(--sv-text-leise); }
.fav-btn:hover, .fav-btn.fav-aktiv { color: var(--sv-herz); }
.fav-herz { display: block; fill: currentColor; transition: color .15s; }
.fav-herz__voll { display: none; }
.fav-btn.fav-aktiv .fav-herz__voll { display: inline; }
.fav-btn.fav-aktiv .fav-herz__umriss { display: none; }
@keyframes fav-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 70% { transform: scale(.94); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── Bestellungen ──────────────────────────────────────────────────── */

.bestell-liste { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }

.bestell-card {
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
    overflow: hidden;
}

.bestell-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px;
    color: var(--sv-weiss);
    background: var(--sv-blau);
}
.bestell-meta { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.bestell-datum { font-size: 16px; font-weight: 600; }
.bestell-nr { font-size: 15px; font-family: var(--sv-schrift-zahl); opacity: .85; }
.bestell-preis { font-size: 16px; font-weight: 600; }
.bestell-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.bestell-status {
    font-size: 14px; font-weight: 600;
    padding: 4px 12px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    white-space: nowrap;
}

.bestell-header .btn-reorder {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 16px;
    font: inherit; font-size: 15px; font-weight: 600;
    color: var(--sv-blau);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-weiss);
    border-radius: var(--sv-radius);
    cursor: pointer;
    white-space: nowrap;
}
.bestell-header .btn-reorder:hover { background: var(--sv-blau-hell); }
.bestell-header .btn-reorder:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }

.bestell-tracking {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sv-rand);
    background: var(--sv-grund);
    font-size: 15px;
}
.tracking-label { color: var(--sv-text-leise); font-weight: 600; }
.tracking-nr {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 12px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
    font-family: var(--sv-schrift-zahl); font-size: 14px;
}
.tracking-nr::before { content: '📦'; }

.position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--sv-rand); }
.position-card { position: relative; padding: 16px; background: var(--sv-weiss); }
.position-header { display: flex; gap: 12px; align-items: flex-start; }
.position-bild img {
    width: 76px; height: 76px; flex-shrink: 0;
    object-fit: contain;
    background: var(--sv-grund);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
    padding: 3px;
    display: block;
}
.position-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 40px; }
.position-name { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.position-preis { font-size: 15px; font-weight: 600; color: var(--sv-blau); }


/* ── Kategorien ────────────────────────────────────────────────────── */

.kategorie-box {
    position: relative;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
    padding: 18px 20px 34px;
    margin: 14px 0 26px;
}
.kategorie-box.zugeklappt { padding-bottom: 20px; }

.kategorie-label { font-size: 14px; font-weight: 600; color: var(--sv-text-leise); margin-bottom: 12px; }
.kategorie-box.zugeklappt .kategorie-label { margin-bottom: 0; }

.kategorie-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* 44px: die kleinste Flaeche, die sich mit dem Daumen sicher treffen laesst */
.kategorie-tag {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 16px;
    font-size: 15px;
    color: var(--sv-text);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand-feld);
    border-radius: 999px;
    white-space: nowrap;
}
.kategorie-tag:hover { border-color: var(--sv-blau); background: var(--sv-blau-hell); color: var(--sv-blau-dunkel); text-decoration: none; }
.kategorie-tag.highlight { border-color: var(--sv-blau-rand); background: var(--sv-blau-hell); color: var(--sv-blau-dunkel); font-weight: 600; }
.kategorie-tag.aktiv { border-color: var(--sv-blau); background: var(--sv-blau); color: var(--sv-weiss); font-weight: 600; }
.kategorie-tag.aktiv:hover { background: var(--sv-blau-dunkel); color: var(--sv-weiss); }

.kategorie-divider { width: 1px; background: var(--sv-rand); align-self: stretch; margin: 0 4px; }

.kategorie-toggle-btn {
    position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 18px;
    font-size: 14px; font-weight: 600;
    color: var(--sv-blau);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-blau-rand);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
}
.kategorie-toggle-btn:hover { background: var(--sv-blau-hell); }


/* ── Stoerer ───────────────────────────────────────────────────────── */

.stoerer {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 22px;
    background: var(--sv-blau-hell);
    border: 1px solid var(--sv-blau-rand);
    border-left: 4px solid var(--sv-blau);
    border-radius: var(--sv-radius);
    font-size: 15px; line-height: 1.5;
}
.stoerer.column { flex-direction: column; align-items: flex-start; }
.stoerer strong { color: var(--sv-blau-dunkel); font-weight: 600; }

/* Aktionshinweis auf der Startseite (bis 21.09.2026 ein <style>-Block
   in index.php - Stylesheet statt Seite, wie in der Designlinie) */
.stoerer-haendler {
    background: var(--sv-blau);
    border-radius: var(--sv-radius-gross);
    margin-bottom: 24px;
    overflow: hidden;
}
.stoerer-inner {
    position: relative;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 56px 18px 20px;
}
.stoerer-icon { font-size: 30px; flex-shrink: 0; }
.stoerer-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; color: var(--sv-weiss); }
.stoerer-text strong { font-size: 17px; font-weight: 600; }
.stoerer-text span { font-size: 15px; line-height: 1.45; opacity: .92; }
.stoerer-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.stoerer-btn {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 16px;
    font-size: 15px; font-weight: 600;
    color: var(--sv-blau);
    background: var(--sv-weiss);
    border-radius: var(--sv-radius);
    white-space: nowrap;
}
.stoerer-btn:hover { background: var(--sv-blau-hell); color: var(--sv-blau-dunkel); text-decoration: none; }
.stoerer-close {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    font-size: 16px; line-height: 1;
    color: var(--sv-weiss);
    background: rgba(255, 255, 255, .14);
    border: none;
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.stoerer-close:hover { background: rgba(255, 255, 255, .28); }


/* ── Startseite: Kacheln ───────────────────────────────────────────── */

.dashboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }

.dashboard-kachel {
    display: flex; align-items: center; gap: 14px;
    padding: 18px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-left: 4px solid var(--sv-blau);
    border-radius: var(--sv-radius-gross);
    color: var(--sv-text);
    text-decoration: none;
}
.dashboard-kachel:hover { border-color: var(--sv-blau-rand); border-left-color: var(--sv-blau); background: var(--sv-blau-hell); color: var(--sv-text); text-decoration: none; }
.dashboard-icon { font-size: 28px; flex-shrink: 0; }
.dashboard-inhalt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dashboard-label { font-size: 14px; font-weight: 600; color: var(--sv-text-leise); }
.dashboard-wert { font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.dashboard-sub { font-size: 14px; color: var(--sv-text-leise); }


/* ── Praemien ──────────────────────────────────────────────────────── */

.praemien-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-left: 4px solid var(--sv-blau);
    border-radius: var(--sv-radius-gross);
}
.praemien-info { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.praemien-titel { font-size: 17px; font-weight: 600; }
.praemien-sub { font-size: 15px; color: var(--sv-text-leise); }

.praemien-stufenbalken { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.praemien-spur { flex: 1; height: 10px; background: var(--sv-grund); border: 1px solid var(--sv-rand); border-radius: 999px; overflow: hidden; }
.praemien-fill { height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(.4, 0, .2, 1); }
.praemien-fill.silber { background: var(--sv-blau); }
.praemien-fill.gold { background: #c8872a; }
.praemien-marker { display: flex; flex-direction: column; align-items: center; font-size: 15px; flex-shrink: 0; }
.praemien-marker span { font-size: 13px; color: var(--sv-text-leise); white-space: nowrap; }
.praemien-stufenbalken.mini { gap: 5px; }
.praemien-stufenbalken.mini .praemien-spur { height: 7px; }
.praemien-marker-mini { font-size: 14px; flex-shrink: 0; }

.praemien-mini {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 16px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-left: 4px solid var(--sv-blau);
    border-radius: var(--sv-radius);
}
.praemien-mini-titel { font-size: 15px; font-weight: 600; }
.praemien-mini-sub { font-size: 14px; color: var(--sv-text-leise); }
.praemien-mini-fortschritt { height: 7px; background: var(--sv-grund); border-radius: 999px; overflow: hidden; }
.praemien-mini-bar { height: 100%; background: var(--sv-blau); border-radius: 999px; transition: width 1s cubic-bezier(.4, 0, .2, 1); }

.praemien-erklaerung { width: 100%; font-size: 14px; color: var(--sv-text-leise); line-height: 1.55; padding-top: 12px; border-top: 1px solid var(--sv-rand); }
.praemien-erklaerung strong { color: var(--sv-text); font-weight: 600; }

.praemien-stoerer {
    width: 100%;
    padding: 12px 16px;
    margin-top: 8px;
    background: var(--sv-blau-hell);
    border: 1px solid var(--sv-blau-rand);
    border-radius: var(--sv-radius);
    font-size: 15px;
}
.praemien-stoerer strong { color: var(--sv-blau-dunkel); font-weight: 600; }

.praemien-ablauf {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px;
    margin-top: 10px;
    background: var(--sv-warn-hell);
    border: 1px solid var(--sv-warn-rand);
    border-left: 4px solid #d9a400;
    border-radius: var(--sv-radius);
    font-size: 15px;
    color: var(--sv-warn);
}
.praemien-ablauf strong { font-weight: 600; }
.praemien-ablauf-btn {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 18px;
    font-size: 15px; font-weight: 600;
    color: var(--sv-weiss) !important;
    background: var(--sv-blau);
    border-radius: var(--sv-radius);
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none !important;
}
.praemien-ablauf-btn:hover { background: var(--sv-blau-dunkel); }


/* ── Updates & Neuerungen ──────────────────────────────────────────── */

.updates-liste { margin: 24px 0; }
.updates-liste h3 { font-size: 15px; font-weight: 600; color: var(--sv-text-leise); margin-bottom: 12px; }

.update-eintrag { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--sv-rand); }
.update-eintrag:last-child { border-bottom: none; }
.update-datum {
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 13px; font-weight: 600;
    color: var(--sv-blau-dunkel);
    background: var(--sv-blau-hell);
    border: 1px solid var(--sv-blau-rand);
    border-radius: 999px;
    white-space: nowrap;
}
.update-datum.highlight { background: var(--sv-blau); border-color: var(--sv-blau); color: var(--sv-weiss); }
.update-text > strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.update-text span { font-size: 15px; color: var(--sv-text-leise); line-height: 1.55; }


/* ── Anmelden / Registrieren ───────────────────────────────────────── */

/* Bis 21.09.2026 ein <style>-Block in index.php */
.auth-tabs { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-bottom: 18px; }

.auth-tab {
    display: inline-flex; align-items: center;
    min-height: var(--sv-hoehe); padding: 0 20px;
    font: inherit; font-size: 16px; font-weight: 600;
    color: var(--sv-text-leise);
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand-feld);
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.auth-tab:hover { border-color: var(--sv-blau-rand); color: var(--sv-blau-dunkel); }
.auth-tab:focus-visible { outline: none; box-shadow: var(--sv-fokus); }
.auth-tab.active { background: var(--sv-blau-hell); border-color: var(--sv-blau); color: var(--sv-blau-dunkel); }

.auth-tab-cta { color: var(--sv-blau); }
.auth-tab-cta.active { background: var(--sv-blau); border-color: var(--sv-blau); color: var(--sv-weiss); }

.auth-panel { max-width: 560px; }
.auth-hint { margin-top: 14px; font-size: 15px; color: var(--sv-text-leise); }

/* Anmelde-, Registrier- und Stammdatenformulare: Beschriftung ueber dem
   Feld, ein Feld je Zeile. Eine zweispaltige Tabelle ist auf 375px
   entweder unleserlich schmal oder laeuft aus dem Bild. */
.b2b-form { max-width: 560px; }

.b2b-form__karte {
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
    box-shadow: var(--sv-schatten);
    padding: 24px;
    margin-bottom: 18px;
}

.b2b-form__titel { font-size: 19px; font-weight: 600; margin-bottom: 16px; }

.b2b-form__trenner {
    margin: 22px 0 16px;
    padding-top: 18px;
    border-top: 1px solid var(--sv-rand);
    font-size: 17px; font-weight: 600;
}

.b2b-feld { margin-bottom: 16px; }
.b2b-feld:last-child { margin-bottom: 0; }
.b2b-feld > label, .b2b-label { display: block; font-weight: 600; margin-bottom: 6px; }
.b2b-feld input[type="text"], .b2b-feld input[type="password"],
.b2b-feld input[type="email"], .b2b-feld select, .b2b-feld textarea { max-width: 100%; }
/* Die Typwahl muss mitgenannt werden: .b2b-feld input[type=text] darueber
   ist sonst die staerkere Regel und das Feld bleibt breit. */
.b2b-feld--kurz input[type="text"], .b2b-feld--kurz input { max-width: 150px; }

.b2b-hilfe { display: block; font-size: 14px; font-weight: 400; color: var(--sv-text-leise); margin-top: 6px; }
.b2b-wert { font-weight: 600; }
.b2b-pflicht { color: var(--sv-herz); }

/* Kaestchen und Text als eine Flaeche zum Antippen */
.b2b-haken { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-weight: 400; cursor: pointer; }
.b2b-haken input { flex: none; margin-top: 3px; }

/* Honigtopf gegen Formular-Bots */
.b2b-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.b2b-knopfreihe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }


/* ── Passwort vergessen ────────────────────────────────────────────── */

/* Bis 21.09.2026 ein <style>-Block in passwd.php */
.pw-box {
    max-width: 480px; margin: 0 auto;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
    box-shadow: var(--sv-schatten);
    padding: 26px;
}
.pw-title { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.pw-sub { color: var(--sv-text-leise); margin-bottom: 22px; }
.pw-field { margin-bottom: 18px; }
.pw-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.pw-field input { max-width: 100%; }
.pw-hint { display: block; font-size: 14px; color: var(--sv-text-leise); margin-top: 6px; }
.pw-btn { width: 100%; margin-top: 8px; }
.pw-back { display: block; text-align: center; margin-top: 18px; min-height: 44px; line-height: 44px; }

.pw-msg { border-radius: var(--sv-radius); border: 1px solid; border-left-width: 4px; padding: 14px 16px; margin-bottom: 22px; line-height: 1.5; }
.pw-msg--ok  { background: var(--sv-ok-hell);     border-color: var(--sv-ok-rand);     border-left-color: var(--sv-ok);     color: var(--sv-ok); }
.pw-msg--err { background: var(--sv-fehler-hell); border-color: var(--sv-fehler-rand); border-left-color: var(--sv-fehler); color: var(--sv-fehler); }

.pw-strength-bar { height: 6px; background: var(--sv-rand); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.pw-strength-fill { height: 100%; width: 0; border-radius: 999px; transition: width .25s, background-color .25s; }
.pw-strength-fill.s1 { width: 33%; background: var(--sv-fehler); }
.pw-strength-fill.s2 { width: 66%; background: #d9a400; }
.pw-strength-fill.s3 { width: 100%; background: var(--sv-ok); }

.pw-checks { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.pw-check { font-size: 14px; color: var(--sv-text-leise); }
.pw-check.ok { color: var(--sv-ok); }

.pw-match-hint { display: block; font-size: 14px; margin-top: 6px; min-height: 1.2em; }
.pw-match-hint.ok { color: var(--sv-ok); }
.pw-match-hint.err { color: var(--sv-fehler); }


/* ── Analyse ───────────────────────────────────────────────────────── */

.analyse-sektion { margin-bottom: 40px; border: 1px solid var(--sv-rand); border-radius: var(--sv-radius-gross); overflow: hidden; }
.analyse-sektion-header { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--sv-blau); }
.analyse-sektion-header.warn { background: #8a6400; }
.analyse-sektion-header.highlight { background: var(--sv-blau-dunkel); }
.analyse-sektion-titel { font-size: 19px; font-weight: 600; color: var(--sv-weiss); }
.analyse-sektion-sub { font-size: 15px; color: rgba(255, 255, 255, .86); }

.analyse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--sv-rand); }
.analyse-grid .produkt-card { min-width: 0; border: none; border-radius: 0; }
.analyse-grid .produkt-card:hover { background: var(--sv-grund); }
.analyse-grid .boxhinweis, .analyse-grid .boxok { margin: 0; border-radius: 0; }


/* ── Export ────────────────────────────────────────────────────────── */

.export-toolbar {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
    padding: 18px 20px;
    margin-bottom: 24px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius-gross);
}
.export-toolbar .toolbar-group { display: flex; flex-direction: column; min-width: 0; }
.export-toolbar label { display: block; font-weight: 600; margin-bottom: 6px; }
.export-toolbar select { width: 100%; min-width: 260px; max-width: 100%; }

.btn-export {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 40px; padding: 0 14px;
    margin: 2px 0;
    font: inherit; font-size: 14px; font-weight: 600;
    border: 1px solid var(--sv-rand-feld);
    border-radius: var(--sv-radius);
    background: var(--sv-weiss);
    color: var(--sv-text);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.btn-export:hover { border-color: var(--sv-blau); background: var(--sv-blau-hell); color: var(--sv-blau-dunkel); text-decoration: none; }
.btn-csv, .btn-excel { background: var(--sv-weiss); }
.btn-label { background: var(--sv-blau); border-color: var(--sv-blau); color: var(--sv-weiss); }
.btn-label:hover { background: var(--sv-blau-dunkel); border-color: var(--sv-blau-dunkel); color: var(--sv-weiss); }
.btn-detail { font-weight: 500; }

.detail-row td { padding: 0; background: var(--sv-grund); }
.detail-inner { padding: 16px; overflow-x: auto; }
.detail-inner table { width: 100%; border-collapse: collapse; font-size: 15px; }
.detail-inner thead th { background: var(--sv-grund); color: var(--sv-text-leise); border-bottom: 1px solid var(--sv-rand-feld); padding: 8px 10px; text-align: left; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.detail-inner tbody td { padding: 8px 10px; border-bottom: 1px solid var(--sv-rand); }

.export-info {
    margin-top: 32px;
    padding: 20px 22px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-left: 4px solid var(--sv-blau);
    border-radius: var(--sv-radius-gross);
}
.export-info h3 { margin: 0 0 10px; font-size: 17px; }
.export-info ul { margin: 0 0 12px 20px; line-height: 1.7; }
.export-info p { margin: 0; color: var(--sv-text-leise); font-size: 15px; }


/* ── Suche in der Kopfleiste ───────────────────────────────────────── */

.nav-search-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; }

.nav-search-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: var(--sv-blau);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--sv-radius);
    cursor: pointer;
}
.nav-search-btn:hover { background: var(--sv-blau-hell); }
.nav-search-btn:focus-visible { outline: none; box-shadow: var(--sv-fokus); }

/* Am Rechner klappt das Suchfeld als Kasten unter der Lupe auf - in der vollen
   Leiste ist fuer ein 240px-Feld daneben kein Platz mehr (Roadmap 4.3) */
.nav-search-box {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0;
    padding: 8px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-schatten);
    z-index: 1100;
}
.nav-search-box.open { display: block; }
.nav-search-box input[type="text"] { width: 320px; max-width: calc(100vw - 48px); }

.nav-search-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 340px; max-width: calc(100vw - 32px);
    max-height: 60vh; overflow-y: auto;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-rand);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-schatten);
    z-index: 1200;
}
.nav-search-dropdown:empty { display: none; }

.nav-search-item {
    display: flex; align-items: center; gap: 10px;
    min-height: 56px; padding: 8px 12px;
    color: var(--sv-text);
    border-bottom: 1px solid var(--sv-rand);
    cursor: pointer;
    text-decoration: none;
}
.nav-search-item:last-child { border-bottom: none; }
.nav-search-item:hover { background: var(--sv-blau-hell); text-decoration: none; }
.nav-search-item img { width: 40px; height: 40px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--sv-rand); border-radius: 6px; }
.nav-search-item-name { flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.nav-search-item-preis { font-size: 15px; font-weight: 600; color: var(--sv-blau); white-space: nowrap; }

.nav-search-alle {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px;
    font-size: 15px; font-weight: 600;
    color: var(--sv-blau);
    background: var(--sv-grund);
    border-top: 1px solid var(--sv-rand);
    cursor: pointer;
}
.nav-search-alle:hover { background: var(--sv-blau-hell); text-decoration: none; }

.nav-search-empty { padding: 16px; font-size: 15px; color: var(--sv-text-leise); text-align: center; }


/* ── Bildvorschau ──────────────────────────────────────────────────── */

#lightbox { display: none; position: fixed; inset: 0; background: rgba(16, 42, 70, .86); z-index: 9999; align-items: center; justify-content: center; cursor: zoom-out; }
#lightbox.active { display: flex; }
#lightbox img { max-width: 92vw; max-height: 92vh; border-radius: var(--sv-radius); }


/* ── Fuss ──────────────────────────────────────────────────────────── */

.site-footer { margin-top: 48px; border-top: 1px solid var(--sv-rand); background: var(--sv-weiss); }
.footer-inner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    max-width: 1280px; margin: 0 auto; padding: 20px;
    font-size: 15px; color: var(--sv-text-leise);
}
.footer-sep { color: var(--sv-rand-feld); }
.footer-login strong { color: var(--sv-text); font-weight: 600; }
.footer-inner a { color: var(--sv-text-leise); }
.footer-inner a:hover { color: var(--sv-blau); }


/* ── Handy und Tablet ──────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Die eine Kopfleiste (Roadmap 4.3, 21.09.2026) am echten Kopf gemessen, Schrift
   Jost geladen: Logo, sechs Punkte, "Mein Konto", Suche, Infos, Warenkorb,
   Ausloggen brauchen samt Innenabstand 1.215px, ohne das Wort "Warenkorb" im
   Knopf 1.131px - dazu 15px Scrollbalken und rund 40px Luft. Darunter bricht
   nichts um und nichts schiebt sich waagrecht, darunter uebernimmt der Burger.
   Seit das Logo 38 statt 30px hoch ist (+24px Breite, 114 statt 90px):
   1.239 bzw. 1.155px, die Grenzen liegen deshalb bei 1.293 und 1.209px. */
@media (max-width: 1293px) {
    .cart-trigger-text { display: none; }
}

/* UMSCHALTBREITE zum Burger (siehe oben). Infos und Ausloggen stehen dann in
   der Schublade. */
@media (max-width: 1209px) {
    .nav-links, .nav-icon { display: none; }
    .menu-btn { display: inline-flex; }
    .navbar-content { gap: 8px; padding: 0 12px; }
    /* 32px (96px breit): neben Burger, Suche und Warenkorb auch auf 375px
       noch mit Luft - gemessen, nicht geschaetzt. */
    .logo { height: 32px; }

    /* Die Suche klappt als eigene Zeile unter der Kopfleiste auf -
       neben Burger, Logo und Warenkorb ist dafuer kein Platz. */
    .nav-search-box {
        position: fixed; top: var(--navbar-h); left: 0; right: auto;
        width: 100%;
        padding: 10px 12px;
        background: var(--sv-weiss);
        border: 0;
        border-bottom: 1px solid var(--sv-rand);
        border-radius: 0;
        box-shadow: 0 6px 16px rgba(16, 42, 70, .10);
        z-index: 1050;
    }
    .nav-search-box input[type="text"] { width: 100%; max-width: 100%; }
    .nav-search-dropdown { left: 12px; right: 12px; width: auto; max-width: none; }
}

@media (max-width: 720px) {
    .content { padding: calc(var(--navbar-h) + 20px) 14px 56px; }

    .produkt-grid, .position-grid, .analyse-grid { grid-template-columns: 1fr; }
    .dashboard { grid-template-columns: 1fr; }

    .cart-trigger { padding: 0 12px; }
    .cart-trigger-text { display: none; }

    .cart-drawer { width: 100%; right: -100%; }
    .cart-drawer-body { padding: 12px; }

    /* Warenkorbzeile: Menge und Preis unter den Namen, Loeschen rechts
       daneben - nebeneinander bleibt auf 375px nichts lesbar. */
    .cart-position { flex-wrap: wrap; gap: 10px; }
    .cart-position-name { flex: 1 1 100%; order: -1; }
    .cart-position-preis { margin-left: auto; }

    .produkt-header { padding: 14px; }
    .produkt-bild img { width: 72px; height: 72px; }
    .produkt-info { padding-right: 44px; }
    .variante-row { padding: 12px 14px; }

    .bestell-header { flex-direction: column; align-items: stretch; }
    .bestell-actions { justify-content: space-between; }
    /* Der Knopf darf umbrechen: "Alle Artikel in den Warenkorb legen" ist
       auf 375px breiter als der Schirm und schob die ganze Karte hinaus. */
    .bestell-header .btn-reorder { flex: 1 1 100%; min-width: 0; white-space: normal; padding: 8px 14px; }
    .bestell-header form { flex: 1 1 100%; min-width: 0; display: flex; }
    .bestell-meta { min-width: 0; }
    .bestell-nr { overflow-wrap: anywhere; }
    .position-info { padding-right: 44px; }

    .update-eintrag { flex-direction: column; gap: 8px; }
    .update-datum { align-self: flex-start; }

    .stoerer-inner { padding: 16px 52px 16px 16px; }
    .stoerer-actions { width: 100%; }
    .stoerer-btn { flex: 1; justify-content: center; }

    .export-toolbar { flex-direction: column; align-items: stretch; }
    .export-toolbar select { min-width: 0; }

    .box1 { padding: 20px 16px; }
    .auth-tabs { flex-direction: column; }
    .auth-tab { justify-content: center; }
    .b2b-form__karte, .pw-box { padding: 20px 16px; }

    .footer-inner { padding: 16px 14px; }
    .footer-sep { display: none; }
    .footer-inner > span, .footer-inner > a { flex: 1 1 100%; }

    /* Zweispaltige Formulartabellen (Stammdaten, Adressen) brechen auf
       dem Handy in Zeilen um: Beschriftung ueber dem Feld statt daneben. */
    .designbox--formular,
    .designbox--formular tbody,
    .designbox--formular tr,
    .designbox--formular td { display: block; width: auto; }

    .designbox--formular th { display: block; width: auto; border-radius: 0; }
    .designbox--formular td { padding: 4px 16px; border-bottom: none; }
    .designbox--formular tr { padding: 8px 0; }
    .designbox--formular td:first-child { padding-top: 12px; font-weight: 600; }
    .designbox--formular td:last-child { padding-bottom: 12px; }
    .designbox--formular td:empty { display: none; }
    .designbox--formular input[type="text"],
    .designbox--formular input[type="password"],
    .designbox--formular select { max-width: 100%; }
}

/* Passwort-vergessen-Seite: schmale Spalte, mittig (bis 21.09.2026 ein
   style-Attribut in passwd.php) */
.pw-seite { max-width: 480px; margin: 24px auto; }

/* PLZ und Ort nebeneinander (Stammdaten, Adressen) */
.feld-paar { display: flex; gap: 10px; flex-wrap: wrap; }
.feld-paar input[type="text"] { flex: 1 1 160px; max-width: 100%; }
.feld-paar .feld-plz { flex: 0 0 110px; max-width: 110px; }

/* "Bearbeiten"/"Löschen" in einer Listenzeile: je 44px hoch zum Antippen */
.zeilen-aktionen { white-space: nowrap; }
.zeilen-aktionen a, .zeilen-aktionen .zeilen-link {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 10px;
}
/* Schreibende Zeilenaktion als Formular (Loeschen, seit 25.09.2026 per POST) - sieht aus wie der Link daneben */
.zeilen-aktionen form { display: inline; margin: 0; }
.zeilen-link {
    font: inherit; color: var(--sv-blau);
    background: none; border: 0; cursor: pointer;
}
.zeilen-link:hover { color: var(--sv-blau-dunkel); text-decoration: underline; }
.zeilen-link:focus-visible { outline: none; box-shadow: var(--sv-fokus); }

/* Sprungmarke: erst sichtbar, wenn sie den Tastaturfokus bekommt */
.sprungmarke {
    position: absolute; left: -9999px; top: 0;
    z-index: 1500;
    padding: 12px 18px;
    background: var(--sv-weiss);
    border: 1px solid var(--sv-blau);
    border-radius: var(--sv-radius);
    font-weight: 600;
}
.sprungmarke:focus { left: 12px; top: 12px; }

/* Eine Meldung statt einer Produktliste nimmt die ganze Rasterbreite.
   Vorher stand style="grid-column:span 2" an der Stelle - auf dem Handy
   ist das Raster einspaltig, und "span 2" legte eine zweite Spalte an:
   die Meldung war dann halb abgeschnitten (.analyse-sektion hat
   overflow: hidden). */
.produkt-grid > .spalte-voll,
.analyse-grid > .spalte-voll { grid-column: 1 / -1; margin: 0; border-radius: 0; }

/* "Mehr anzeigen" unter einer Produktliste */
.mehr-laden { display: flex; justify-content: center; margin-top: 16px; }

/* Die Warenkorb-Kachel ist ein <button> - sie soll aussehen wie die
   Kacheln daneben, die Links sind */
button.dashboard-kachel {
    width: 100%;
    font: inherit; text-align: left;
    cursor: pointer;
}
button.dashboard-kachel:focus-visible,
a.dashboard-kachel:focus-visible { outline: none; box-shadow: var(--sv-fokus); }