/* CartSentry – EIN Stylesheet für öffentliche Seiten, Dashboard und Adminbereich.
 * Abgeleitet vom Designsystem der Schwester-Produkte (Flanier): dieselben Schriften, dieselben
 * Variablen, dieselben Bausteine – nur Marke und Inhalte sind CartSentry.
 *
 * AUFBAU
 *   0. Schriften (selbst gehostet unter /fonts)
 *   1. Farben/Maße als Variablen (:root). Dashboard/Admin folgen hell/dunkel dem System.
 *   2. Grundlagen, Typografie, Fokus, Hilfsklassen
 *   3. Marke (Bildzeichen + Wortmarke, partials/logo.php)
 *   4. Portal: Kopf, Profilmenü, Reiter, Knöpfe, Formulare, Karten, Tabellen, Kennzahlen,
 *      Ergebnis-Karten, Diagramm, Schalter, Code, Toasts, Modal
 *   5. Anmelden/Registrieren (#auth-section in dashboard.php)
 *   6. Öffentliche Seiten (body.mk): IMMER hell, unabhängig vom Systemmodus. .mk setzt die
 *      Variablen fest auf helle Werte, deshalb funktionieren Knöpfe/Karten dort unverändert.
 *   7. Fuß
 *
 * WICHTIG: js/dashboard.js und js/admin.js erzeugen Markup mit den Klassen aus Abschnitt 4
 * (.kpi, .result, .pill, .mini, .reco-item, .page-num-btn, .toast …) – vor dem Umbenennen
 * immer über js/*.js greppen.
 *
 * ?v= Cache-Brecher: steht zentral in partials/head_assets.php ($assetVersion). */

/* ---------------------------------------------------------------------------------------
 * 0. Schriften - Inter Variable 5.3.0 (Oberfläche) und Plus Jakarta Sans Variable 5.3.0
 *    (Überschriften), Fontsource-Pakete, SIL Open Font License 1.1 (fonts/LICENSE-*.txt).
 *    Selbst gehostet: kein Besucher wird an Google & Co. gemeldet.
 * ------------------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans Variable"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans Variable"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------------------
 * 1. Variablen
 * ------------------------------------------------------------------------------------- */
:root {
    --tinte: #0f1720; --tinte-2: #3b4757; --tinte-3: #5b6878;      /* --tinte-3 auf Weiß 5,7:1 */
    --papier: #f6f8fb; --flaeche: #ffffff; --flaeche-2: #eef2f7; --flaeche-3: #e3e9f1;
    --linie: #e1e7ef; --linie-stark: #cdd6e1;
    --akzent: #1a66db; --akzent-dunkel: #1554b8; --akzent-weich: rgba(26, 102, 219, .09);   /* auf Weiß 5,3:1 */
    --auf-akzent: #ffffff;
    --gut: #157347; --gut-weich: rgba(21, 115, 71, .1);
    --warn: #8a5a00; --warn-weich: rgba(245, 179, 27, .16);
    --fehler: #b42318; --fehler-weich: rgba(180, 35, 24, .08);
    --schatten: 0 1px 2px rgba(15, 23, 32, .05), 0 6px 20px -8px rgba(15, 23, 32, .1);
    --schatten-hoch: 0 2px 4px rgba(15, 23, 32, .05), 0 24px 56px -20px rgba(15, 23, 32, .22);
    --kopf-grund: rgba(255, 255, 255, .86);
    --btn-grund: #0f1720; --btn-grund-hover: #1e2a38; --btn-text: #ffffff; --btn-kante: #0f1720;
    --btn-licht: inset 0 1px 0 rgba(255, 255, 255, .1);
    --btn-schatten: 0 1px 2px rgba(15, 23, 32, .16), 0 2px 6px -2px rgba(15, 23, 32, .16);
    --btn-schatten-hover: 0 2px 4px rgba(15, 23, 32, .14), 0 8px 18px -8px rgba(15, 23, 32, .32);
    --marke-grund: #11161d; --marke-zeichen: #ffffff; --marke-akzent: #2d8cff;
    --code-grund: #11161d; --code-text: #e4ebf9;
    --diagramm-balken: rgba(26, 102, 219, .55); --diagramm-punkt: #e08a00;
    color-scheme: light;
    --radius: 16px;
    --radius-klein: 10px;
    --schrift: "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-titel: "Plus Jakarta Sans Variable", "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --breite: 1200px;
    --rand: 16px;
    /* Kurznamen, die js/admin.js inline verwendet (style="color:var(--red)") */
    --red: var(--fehler); --line: var(--linie);
}

/* Dunkelmodus des Portals (Dashboard/Admin). Die Werte stehen zweimal (Media-Query und
   data-theme), weil CSS einen Block nicht zugleich an beides hängen kann. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tinte: #f1f5fb; --tinte-2: #c9d2dc; --tinte-3: #a2adbc;
        --papier: #11161d; --flaeche: #1b242f; --flaeche-2: #222c39; --flaeche-3: #2d3846;
        --linie: rgba(201, 210, 220, .12); --linie-stark: rgba(201, 210, 220, .22);
        --akzent: #4d9dff; --akzent-dunkel: #7ab6ff; --akzent-weich: rgba(77, 157, 255, .14);
        --auf-akzent: #0b1220;
        --gut: #4cc98a; --gut-weich: rgba(76, 201, 138, .14);
        --warn: #f5b31b; --warn-weich: rgba(245, 179, 27, .14);
        --fehler: #ff7b72; --fehler-weich: rgba(255, 123, 114, .14);
        --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .55);
        --schatten-hoch: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -24px rgba(0, 0, 0, .7);
        --kopf-grund: rgba(17, 22, 29, .84);
        --btn-grund: #ffffff; --btn-grund-hover: #e4ebf9; --btn-text: #0f1720; --btn-kante: #ffffff;
        --btn-licht: inset 0 -1px 0 rgba(15, 23, 32, .08);
        --btn-schatten: 0 1px 2px rgba(0, 0, 0, .4); --btn-schatten-hover: 0 8px 20px -8px rgba(0, 0, 0, .6);
        --marke-grund: #ffffff; --marke-zeichen: #11161d; --marke-akzent: #2d8cff;
        --code-grund: #0b1016; --code-text: #e4ebf9;
        --diagramm-balken: rgba(77, 157, 255, .55); --diagramm-punkt: #f5b31b;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --tinte: #f1f5fb; --tinte-2: #c9d2dc; --tinte-3: #a2adbc;
    --papier: #11161d; --flaeche: #1b242f; --flaeche-2: #222c39; --flaeche-3: #2d3846;
    --linie: rgba(201, 210, 220, .12); --linie-stark: rgba(201, 210, 220, .22);
    --akzent: #4d9dff; --akzent-dunkel: #7ab6ff; --akzent-weich: rgba(77, 157, 255, .14);
    --auf-akzent: #0b1220;
    --gut: #4cc98a; --gut-weich: rgba(76, 201, 138, .14);
    --warn: #f5b31b; --warn-weich: rgba(245, 179, 27, .14);
    --fehler: #ff7b72; --fehler-weich: rgba(255, 123, 114, .14);
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .55);
    --schatten-hoch: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -24px rgba(0, 0, 0, .7);
    --kopf-grund: rgba(17, 22, 29, .84);
    --btn-grund: #ffffff; --btn-grund-hover: #e4ebf9; --btn-text: #0f1720; --btn-kante: #ffffff;
    --btn-licht: inset 0 -1px 0 rgba(15, 23, 32, .08);
    --btn-schatten: 0 1px 2px rgba(0, 0, 0, .4); --btn-schatten-hover: 0 8px 20px -8px rgba(0, 0, 0, .6);
    --marke-grund: #ffffff; --marke-zeichen: #11161d; --marke-akzent: #2d8cff;
    --code-grund: #0b1016; --code-text: #e4ebf9;
    --diagramm-balken: rgba(77, 157, 255, .55); --diagramm-punkt: #f5b31b;
    color-scheme: dark;
}

/* Dunkle Flächen, unabhängig vom Systemmodus (Bildhälfte der Anmeldung, Schluss-Aufruf) */
.dunkel, .auth-bild {
    --tinte: #f1f5fb; --tinte-2: #c9d2dc; --tinte-3: #a2adbc;
    --papier: #11161d; --flaeche: #1b242f; --flaeche-2: #222c39; --flaeche-3: #2d3846;
    --linie: rgba(201, 210, 220, .12); --linie-stark: rgba(201, 210, 220, .22);
    --akzent: #4d9dff; --akzent-dunkel: #7ab6ff; --akzent-weich: rgba(77, 157, 255, .14);
    --gut: #4cc98a; --gut-weich: rgba(76, 201, 138, .14);
    --btn-grund: #ffffff; --btn-grund-hover: #e4ebf9; --btn-text: #0f1720; --btn-kante: #ffffff;
    --btn-licht: inset 0 -1px 0 rgba(15, 23, 32, .08);
    --btn-schatten: 0 1px 2px rgba(0, 0, 0, .4); --btn-schatten-hover: 0 8px 20px -8px rgba(0, 0, 0, .6);
    --marke-grund: #ffffff; --marke-zeichen: #11161d; --marke-akzent: #2d8cff;
    color-scheme: dark;
    background-color: var(--papier); color: var(--tinte);
}

/* ---------------------------------------------------------------------------------------
 * 2. Grundlagen
 * ------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    background: var(--papier); color: var(--tinte);
    font: 15px/1.6 var(--schrift);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1; min-width: 0; }
a { color: var(--akzent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; overflow-wrap: break-word; }
h1 { font: 700 clamp(1.65rem, 3vw, 2.15rem)/1.15 var(--schrift-titel); letter-spacing: -.03em; }
h2 { font: 700 1.15rem/1.3 var(--schrift-titel); letter-spacing: -.02em; }
h3 { font: 700 1rem/1.35 var(--schrift-titel); letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
code, pre, kbd { font: 13px/1.55 var(--schrift-mono); }
:not(pre) > code { background: var(--flaeche-2); border: 1px solid var(--linie); padding: 1px 6px; border-radius: 6px; font-size: .88em; overflow-wrap: anywhere; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 24px 0; }
::selection { background: rgba(45, 140, 255, .25); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
.sprunglink { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinte); color: var(--papier); padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: top .15s; }
.sprunglink:focus { top: 12px; text-decoration: none; }
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Hilfsklassen - von dashboard.php/admin.php UND vom Markup aus js/*.js benutzt */
.hidden, [hidden] { display: none !important; }
.muted { color: var(--tinte-3); }
.text-red { color: var(--fehler); }
.mono { font-family: var(--schrift-mono); font-size: .92em; }
.text-xs { font-size: 12.5px; }
.text-sm { font-size: 13.5px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 15.5px; }
.mt-2 { margin-top: 2px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 8px; } .mt-8 { margin-top: 10px; }
.mt-10 { margin-top: 14px; } .mt-14 { margin-top: 18px; } .mt-16 { margin-top: 22px; }
.mb-10 { margin-bottom: 12px; } .mb-14 { margin-bottom: 16px; }
.max-w-560 { max-width: 560px; } .max-w-760 { max-width: 760px; }
.flex-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.flex-col { display: flex; flex-direction: column; gap: 12px; }
.flex-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.flex-row-between > h2 { margin: 0; }
.grid-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.col-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .grid-2col { grid-template-columns: minmax(0, 1fr); } .col-span-2 { grid-column: auto; } }
.list-tight { padding-left: 20px; display: grid; gap: 6px; }
.list-tight li::marker { color: var(--akzent); }
.dim { opacity: .62; }
details > summary { cursor: pointer; color: var(--tinte-2); }
.msg { font-size: 13.5px; margin: 8px 0 0; min-height: 0; }
.msg:empty { display: none; }
.msg.error { color: var(--fehler); }
.msg.success { color: var(--gut); }

/* ---------------------------------------------------------------------------------------
 * 3. Marke: Bildzeichen (Warenkorb mit Prüfhaken) + Wortmarke. Inline-SVG, Farben aus den
 *    --marke-*-Variablen - im dunklen Portal kehrt sich das Zeichen von selbst um.
 * ------------------------------------------------------------------------------------- */
.marke { display: inline-flex; align-items: center; gap: 9px; font: 800 20px/1 var(--schrift-titel); color: var(--tinte); letter-spacing: -.04em; flex-shrink: 0; }
.marke:hover { text-decoration: none; color: var(--tinte); }
.marke-zeichen { display: block; width: 30px; height: 30px; flex-shrink: 0; }
.marke-zeichen .mz-grund { fill: var(--marke-grund); }
.marke-zeichen .mz-korb { stroke: var(--marke-zeichen); }
.marke-zeichen .mz-rad { fill: var(--marke-zeichen); }
.marke-zeichen .mz-haken { stroke: var(--marke-akzent); }

/* ---------------------------------------------------------------------------------------
 * 4. Portal (dashboard.php, admin.php)
 * ------------------------------------------------------------------------------------- */
.kopf { background: var(--kopf-grund); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 40; -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.kopf-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); height: 64px; display: flex; align-items: center; gap: 18px; }
.kopf-etikett { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px; padding: 3px 9px; }
.kopf-spruch { color: var(--tinte-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .kopf-spruch { display: none; } }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-menu { position: relative; }
.avatar-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linie-stark); background: var(--akzent); color: var(--auf-akzent); font: 700 13px/1 var(--schrift); letter-spacing: .02em; cursor: pointer; box-shadow: 0 0 0 3px var(--akzent-weich); transition: box-shadow .15s; }
.avatar-btn:hover { box-shadow: 0 0 0 5px var(--akzent-weich); }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: var(--schatten-hoch); padding: 6px; display: flex; flex-direction: column; z-index: 60; }
.user-dropdown a, .user-dropdown button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--tinte-2); font: 500 14px/1.3 var(--schrift); background: none; border: 0; cursor: pointer; }
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--flaeche-2); color: var(--tinte); text-decoration: none; }
.user-dropdown button { border-top: 1px solid var(--linie); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 11px; }

.wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 24px var(--rand) 64px; flex: 1; }

/* Reiter: Unterstrich wie in Flanier. #main-tabs klebt unter dem Kopf. */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex-shrink: 0; padding: 12px 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--tinte-2); font: 500 14.5px/1.2 var(--schrift); cursor: pointer; white-space: nowrap; border-radius: 0; }
.tabs button:hover { color: var(--tinte); }
.tabs button.active { color: var(--tinte); border-bottom-color: var(--tinte); font-weight: 600; }
.app-authed #main-tabs { position: sticky; top: 64px; z-index: 30; background: var(--papier); margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding: 0 var(--rand); }
.tabs.subtabs { margin-bottom: 12px; }
.tabs.subtabs button { padding: 8px 12px; font-size: 13.5px; }
.tabs.subtabs button.active { color: var(--akzent); border-bottom-color: var(--akzent); }

/* Knöpfe - Primär tiefe Tinte (im Dunkelmodus hell), Sekundär weiß mit Haarlinie */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px; border: 1px solid var(--btn-kante);
    background: var(--btn-grund); color: var(--btn-text); font: 600 14px/1.2 var(--schrift); letter-spacing: -.005em; cursor: pointer;
    box-shadow: var(--btn-licht), var(--btn-schatten);
    transition: background-color .15s, box-shadow .2s, transform .15s, border-color .15s, color .15s; white-space: nowrap;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--btn-grund-hover); color: var(--btn-text); text-decoration: none; box-shadow: var(--btn-licht), var(--btn-schatten-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 10px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.secondary, .btn-zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--linie-stark); box-shadow: 0 1px 2px rgba(15, 23, 32, .06); }
.btn.secondary:hover, .btn-zweit:hover { background: var(--flaeche); color: var(--tinte); border-color: var(--tinte-3); box-shadow: 0 1px 2px rgba(15, 23, 32, .06), 0 6px 14px -8px rgba(15, 23, 32, .25); }
.btn.danger { background: var(--fehler); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 2px rgba(120, 20, 10, .25); }
.btn.danger:hover { background: color-mix(in srgb, var(--fehler) 88%, #000); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.danger { background: #c0261b; } }
:root[data-theme="dark"] .btn.danger { background: #c0261b; }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn-gross { padding: 13px 22px; font-size: 15.5px; border-radius: 12px; }
.btn-akzent::after { content: "→"; font-weight: 500; transition: transform .2s; }
.btn-akzent:hover::after { transform: translateX(3px); }
.link-danger { background: none; border: 0; padding: 0; color: var(--fehler); font: 500 13.5px var(--schrift); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.link-danger:hover { text-decoration-color: currentColor; }
.page-num-btn { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte-2); font: 600 13px var(--schrift); cursor: pointer; font-variant-numeric: tabular-nums; }
.page-num-btn:hover { border-color: var(--tinte-3); color: var(--tinte); }
.page-num-btn.active { background: var(--btn-grund); color: var(--btn-text); border-color: var(--btn-grund); }

/* Formulare */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], input[type=tel], input:not([type]), select, textarea {
    width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--tinte); font: 14.5px/1.4 var(--schrift);
    transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--tinte-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }
input::placeholder, textarea::placeholder { color: var(--tinte-3); opacity: .85; }
textarea { min-height: 84px; resize: vertical; }
select[multiple] { padding: 6px; }
select[multiple] option { padding: 5px 8px; border-radius: 6px; }
input[type=color] { width: 100%; height: 42px; padding: 3px; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 7px; }
input[type=range] { width: 100%; accent-color: var(--akzent); padding: 0; margin: 10px 0 4px; }
input[type=checkbox], input[type=radio] { accent-color: var(--akzent); width: 16px; height: 16px; flex-shrink: 0; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: var(--tinte-2); min-width: 0; }
.field input, .field select, .field textarea { font-weight: 400; }
.hint { display: block; font-size: 12.5px; color: var(--tinte-3); font-weight: 400; line-height: 1.45; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--tinte); cursor: pointer; }
.waiver-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--tinte-2); cursor: pointer; line-height: 1.5; }
.waiver-label input { margin-top: 2px; }
.waiver-label a { color: var(--akzent); text-decoration: underline; }

/* Schalter */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--flaeche-3); border: 1px solid var(--linie-stark); border-radius: 24px; transition: background-color .2s, border-color .2s; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(15, 23, 32, .3); transition: transform .2s; }
.switch input:checked + span { background: var(--akzent); border-color: var(--akzent); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Karten */
.card { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; box-shadow: var(--schatten); margin-bottom: 20px; min-width: 0; }
.card > :last-child { margin-bottom: 0; }
.card h2 { margin-bottom: 14px; }
.card h2.tight { margin-bottom: 8px; }
h3.sub { font-size: 14.5px; margin: 22px 0 8px; color: var(--tinte); }
.card .flex-row-between h2 { margin: 0; }
@media (max-width: 560px) { .card { padding: 18px; } }
.two-col-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.two-col-cards > .card { margin-bottom: 20px; }
@media (max-width: 900px) { .two-col-cards { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.mechanic-card .flex-row-between { margin-bottom: 6px; }

.plan-banner { display: block; padding: 12px 16px; border-radius: 12px; margin: 0 0 18px; font-size: 14px; background: var(--akzent-weich); color: var(--tinte); border: 1px solid color-mix(in srgb, var(--akzent) 25%, transparent); }
.plan-banner a { font-weight: 600; margin-left: 8px; white-space: nowrap; }
.plan-banner.warn { background: var(--warn-weich); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.plan-banner.warn a { color: var(--warn); }
.plan-banner.bad { background: var(--fehler-weich); border-color: color-mix(in srgb, var(--fehler) 30%, transparent); }
.plan-banner.bad a { color: var(--fehler); }

/* Checkliste "In 3 Schritten" */
.checklist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 18px; }
.checklist ol { list-style: none; margin: 0; padding: 0; }
.cl-group-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-3); padding: 0 4px 6px; }
.cl-group-zahl { text-transform: none; letter-spacing: 0; font-weight: 600; }
.cl-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.cl-row + .cl-row { margin-top: 2px; }
.cl-icon { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linie-stark); background: var(--flaeche); box-sizing: border-box; display: grid; place-items: center; }
.cl-text { display: grid; gap: 2px; min-width: 0; }
.cl-text strong { font-weight: 600; color: var(--tinte); }
.cl-text span { color: var(--tinte-3); font-size: 13px; line-height: 1.45; }
.cl-row.done .cl-icon { border-color: var(--gut); background: var(--gut); }
.cl-row.done .cl-icon::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.cl-row.done .cl-text strong { color: var(--tinte-3); font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(91, 104, 120, .45); }
.cl-row.cl-wait .cl-icon { border-style: dashed; }
.cl-row.next { background: var(--akzent-weich); }
.cl-row.next .cl-icon { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(26, 102, 219, .15); }
.cl-btn { font-size: 13px; font-weight: 600; color: var(--akzent); text-decoration: none; white-space: nowrap; padding: 6px 10px; border-radius: 8px; }
.cl-btn:hover { background: var(--akzent-weich); }
.cl-row.next .cl-btn { background: var(--akzent); color: #fff; }
.cl-tag { font-size: 12px; color: var(--tinte-3); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ziel-blink { animation: zielBlink 1.6s ease; }
@keyframes zielBlink { 0%, 100% { box-shadow: var(--schatten); } 30% { box-shadow: 0 0 0 4px rgba(26, 102, 219, .35); } }
@media (max-width: 640px) { .cl-row { grid-template-columns: 22px minmax(0, 1fr); } .cl-row > .cl-btn, .cl-row > .cl-tag { grid-column: 2; justify-self: start; margin-top: 6px; } }
.checklist-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.checklist-fortschritt { font-size: 13px; color: var(--tinte-3); }
.checklist-balken { height: 6px; background: var(--flaeche-2); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.checklist-balken i { display: block; height: 100%; background: var(--gut); border-radius: 6px; }

/* Kennzahlen */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--schatten); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 13px; color: var(--tinte-3); order: 2; }
.kpi-value { font: 600 26px/1.15 var(--schrift); letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; order: 1; color: var(--tinte); }
.kpi-hint { font-size: 12px; color: var(--tinte-3); order: 3; line-height: 1.45; }

/* Ergebnis je Mechanik */
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.result { border: 1px solid var(--linie); border-radius: 14px; padding: 18px; background: var(--flaeche-2); min-width: 0; }
.result h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; margin-bottom: 10px; }
.result.disabled { opacity: .6; }
.result > p:last-child { margin-bottom: 0; }
.uplift { font: 700 30px/1.1 var(--schrift-titel); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.uplift.pos { color: var(--gut); } .uplift.neg { color: var(--fehler); } .uplift.neutral { color: var(--tinte); }
.status-text { font-size: 13.5px; color: var(--warn); background: var(--warn-weich); border-radius: 10px; padding: 9px 12px; margin: 4px 0 12px; line-height: 1.5; }

/* Tabellen */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
.data-table { font-size: 14px; }
.data-table th, .data-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.data-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-3); font-weight: 600; white-space: nowrap; }
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--flaeche-2) 60%, transparent); }
.data-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) { .data-table th, .data-table td { padding: 9px 7px; } }
table.mini { font-size: 13px; margin: 12px 0; font-variant-numeric: tabular-nums; }
table.mini th, table.mini td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--linie); }
table.mini th { font-size: 11.5px; font-weight: 600; color: var(--tinte-3); text-transform: uppercase; letter-spacing: .05em; }
table.mini th:first-child, table.mini td:first-child { text-align: left; padding-left: 0; color: var(--tinte-3); }
table.mini tr:last-child td { border-bottom: 0; }
.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 9px; background: var(--flaeche-2); display: block; }

/* Etiketten */
.pill, .badge-weak, .badge-rec { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font: 600 11.5px/1.5 var(--schrift); background: var(--flaeche-3); color: var(--tinte-2); white-space: nowrap; vertical-align: middle; }
.pill.direct, .badge-rec { background: var(--gut-weich); color: var(--gut); }
.pill.assisted, .badge-weak { background: var(--warn-weich); color: var(--warn); }
.badge-weak, .badge-rec { margin-left: 6px; }

/* Diagramm (SVG aus dashboard.js) */
.chart svg { width: 100%; height: auto; display: block; }
.chart .bar-imp { fill: var(--diagramm-balken); }
.chart .bar-imp:hover { fill: var(--akzent); }
.chart .dot-ord { fill: var(--diagramm-punkt); stroke: var(--flaeche); stroke-width: 1.5; }
.chart .axis { fill: var(--tinte-3); font: 10px var(--schrift); }

/* Einbindung: Schritte, Code, Geheimnisse */
.steps { margin: 6px 0 12px; padding-left: 22px; font-size: 14px; display: grid; gap: 8px; }
.steps li::marker { color: var(--akzent); font-weight: 700; }
.code-wrap { position: relative; margin-bottom: 8px; }
pre { background: var(--code-grund); color: var(--code-text); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; margin: 0 0 8px; overflow-x: auto; white-space: pre; font-size: 12.5px; line-height: 1.6; }
.code-wrap pre { padding-right: 100px; }
.copy-btn { position: absolute; top: 9px; right: 9px; }
.code-wrap .btn.secondary.copy-btn { background: rgba(255, 255, 255, .08); color: #e4ebf9; border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.code-wrap .btn.secondary.copy-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
details pre { margin-top: 10px; }
.secret-box { border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); background: var(--warn-weich); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.secret-box p { margin: 0 0 6px; }
.secret-box code { display: block; font-size: 13px; word-break: break-all; background: var(--flaeche); }

.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; padding: 26px 0 14px; margin-top: -8px; background: linear-gradient(transparent, var(--papier) 35%); }

/* Tarif */
.tarif-single { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; border: 1px solid var(--linie); border-radius: 18px; padding: 24px; background: linear-gradient(var(--flaeche), var(--flaeche)) padding-box, linear-gradient(160deg, color-mix(in srgb, var(--akzent) 50%, transparent), var(--linie) 60%) border-box; border-color: transparent; }
.tarif-single h3 { font-size: 1.2rem; margin: 0; }
.tarif-single .price { font: 800 34px/1.1 var(--schrift-titel); letter-spacing: -.035em; margin: 10px 0 14px; font-variant-numeric: tabular-nums; }
.tarif-single .price small { display: block; font: 500 13.5px/1.4 var(--schrift); letter-spacing: 0; color: var(--tinte-3); margin-top: 4px; }
.tarif-card-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--tinte-2); font-size: 14.5px; }
.tarif-card-features li { position: relative; padding-left: 24px; }
.tarif-card-features li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg); }
#tarif-actions { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
@media (max-width: 560px) { #tarif-actions { min-width: 0; width: 100%; } }

/* Empfehlungs-Listen (Modal, Empfänger) */
.reco-list, #pin-list, #block-list, #notification-emails { display: flex; flex-direction: column; }
.reco-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.reco-item:last-child { border-bottom: 0; }
#product-search { min-width: 240px; }
@media (max-width: 560px) { #product-search { min-width: 0; } }

/* Toasts */
#toast-container { position: fixed; right: 16px; top: 80px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 12px; background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); border-left: 4px solid var(--akzent); box-shadow: var(--schatten-hoch); font-size: 14px; animation: toast-rein .18s ease-out; }
.toast > span { flex: 1; padding-top: 2px; }
.toast.success { border-left-color: var(--gut); }
.toast.error { border-left-color: var(--fehler); }
.toast-close { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--tinte-3); font-size: 18px; line-height: 1; cursor: pointer; }
.toast-close:hover { background: var(--flaeche-2); color: var(--tinte); }
.toast.toast-hide { animation: toast-raus .18s ease-in forwards; }
@keyframes toast-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-raus { to { opacity: 0; transform: translateY(10px); } }

/* Modal */
.modal-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(9, 13, 19, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-box { position: relative; width: min(640px, 100%); max-height: min(85vh, 760px); overflow-y: auto; background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); border-radius: 18px; box-shadow: var(--schatten-hoch); padding: 28px; }
.modal-box h2 { padding-right: 40px; font-size: 1.25rem; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte-2); font-size: 20px; line-height: 1; cursor: pointer; }
.modal-close:hover { background: var(--flaeche-2); color: var(--tinte); }
.modal-box .flex-row input { flex: 1; min-width: 180px; }
@media (max-width: 560px) { .modal-box { padding: 20px; } }

/* ---------------------------------------------------------------------------------------
 * 5. Anmelden / Registrieren (dashboard.php, #auth-section): links dunkle Bildhälfte,
 *    rechts das Formular. Vor dem Login gibt es keinen App-Kopf (body ohne .app-authed).
 * ------------------------------------------------------------------------------------- */
body:not(.app-authed) .kopf { display: none; }
body:not(.app-authed) > .wrap { max-width: none; padding: 0; display: flex; flex-direction: column; }
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1; min-height: calc(100vh - 66px); }
.auth-bild {
    position: relative; overflow: hidden; isolation: isolate;
    background: radial-gradient(70% 55% at 80% 0%, rgba(45, 140, 255, .24), transparent 70%), radial-gradient(50% 45% at 0% 100%, rgba(45, 140, 255, .1), transparent 70%), #11161d;
    padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    position: sticky; top: 0; align-self: start; min-height: 100vh;
}
.auth-bild::after { content: ""; position: absolute; inset: auto -20% -10% -20%; height: 50%; z-index: -1; background-image: linear-gradient(rgba(140, 180, 230, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 180, 230, .1) 1px, transparent 1px); background-size: 56px 56px; transform: perspective(500px) rotateX(64deg); transform-origin: top; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
.auth-bild h2 { font: 700 clamp(28px, 3vw, 38px)/1.12 var(--schrift-titel); max-width: 460px; letter-spacing: -.03em; color: #fff; margin-bottom: .4em; }
.auth-bild p { color: var(--tinte-2); max-width: 440px; font-size: 16px; }
.auth-punkte { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; color: var(--tinte-2); font-size: 15px; max-width: 440px; }
.auth-punkte li { display: flex; gap: 10px; align-items: flex-start; }
.auth-punkte li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle, #4d9dff 0 4px, rgba(77, 157, 255, .22) 5px); }
.auth-bild .mock-ergebnis { max-width: 400px; position: static; transform: none; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px var(--rand); }
.auth-form-innen { width: 100%; max-width: 440px; }
.auth-form-innen.breit { max-width: 560px; }
.auth-form h1 { font-size: clamp(1.7rem, 3vw, 2.15rem); margin-bottom: .3em; }
.auth-form .lead-klein { color: var(--tinte-2); margin-bottom: 22px; }
.auth-mobil-marke { display: none; margin-bottom: 28px; }
.auth-zurueck { display: table; font-size: 13.5px; color: var(--tinte-3); margin-bottom: 26px; }
.auth-zurueck:hover { color: var(--tinte); }
.auth .tabs { display: inline-flex; gap: 0; padding: 3px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche-2); margin-bottom: 26px; }
.auth .tabs button { border: 0; margin: 0; padding: 8px 16px; border-radius: 9px; font-size: 14px; color: var(--tinte-2); }
.auth .tabs button.active { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }
.auth-stapel { display: flex; flex-direction: column; gap: 12px; }
.auth-stapel .btn { width: 100%; padding: 12px 18px; font-size: 15px; }
.auth form .btn[type=submit] { padding: 12px 18px; font-size: 15px; }
.auth #register-form .btn[type=submit] { width: 100%; }
.auth-link { font-size: 14px; margin: 14px 0 0; }
.auth-hinweis { font-size: 12.5px; color: var(--tinte-3); margin-top: 12px; }
.auth-box { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--warn-weich); }
.auth-box .btn { width: 100%; }
@media (max-width: 960px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-bild { display: none; }
    .auth-mobil-marke { display: inline-flex; }
}

/* ---------------------------------------------------------------------------------------
 * 6. Öffentliche Seiten (body.mk) - immer hell
 * ------------------------------------------------------------------------------------- */
.mk {
    --tinte: #0f1720; --tinte-2: #3b4757; --tinte-3: #5b6878;
    --papier: #ffffff; --flaeche: #ffffff; --flaeche-2: #f3f6fa; --flaeche-3: #e3e9f1;
    --linie: #e1e7ef; --linie-stark: #cdd6e1;
    --akzent: #1a66db; --akzent-dunkel: #1554b8; --akzent-weich: rgba(26, 102, 219, .08);
    --auf-akzent: #ffffff;
    --gut: #157347; --gut-weich: rgba(21, 115, 71, .1);
    --warn: #8a5a00; --warn-weich: rgba(245, 179, 27, .16);
    --fehler: #b42318; --fehler-weich: rgba(180, 35, 24, .08);
    --schatten: 0 1px 2px rgba(15, 23, 32, .05), 0 8px 24px -12px rgba(15, 23, 32, .14);
    --schatten-hoch: 0 1px 2px rgba(15, 23, 32, .05), 0 24px 60px -24px rgba(15, 23, 32, .25);
    --kopf-grund: rgba(255, 255, 255, .86);
    --btn-grund: #0f1720; --btn-grund-hover: #1e2a38; --btn-text: #ffffff; --btn-kante: #0f1720;
    --btn-licht: inset 0 1px 0 rgba(255, 255, 255, .1);
    --btn-schatten: 0 1px 2px rgba(15, 23, 32, .16), 0 2px 6px -2px rgba(15, 23, 32, .16);
    --btn-schatten-hover: 0 2px 4px rgba(15, 23, 32, .14), 0 10px 22px -10px rgba(15, 23, 32, .38);
    --marke-grund: #11161d; --marke-zeichen: #ffffff; --marke-akzent: #2d8cff;
    --verlauf-text: linear-gradient(100deg, #1a66db 0%, #2d8cff 60%, #1a66db 100%);
    color-scheme: light;
    background: var(--papier); color: var(--tinte);
    font-size: 16px; overflow-x: clip;
}
.mk h1, .mk h2 { font-family: var(--schrift-titel); font-weight: 700; letter-spacing: -.03em; }
.mk .btn { padding: 11px 18px; font-size: 15px; }
.mk .btn-gross { padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.mk .dunkel { --verlauf-text: linear-gradient(100deg, #8cc4ff 0%, #4d9dff 50%, #2d8cff 100%); }
.verlauf-text { background: var(--verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Kopf: helle Glasleiste */
.mkopf { position: sticky; top: 0; z-index: 40; background: var(--kopf-grund); border-bottom: 1px solid var(--linie); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
.mkopf-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); height: 66px; display: flex; align-items: center; gap: 28px; position: relative; }
.mnav { display: flex; align-items: center; flex: 1; gap: 20px; min-width: 0; }
.mnav-links { display: flex; gap: 2px; margin: 0 auto; }
.mnav-links a, .mnav-anmelden { color: var(--tinte-2); padding: 8px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500; transition: color .15s, background-color .15s; white-space: nowrap; }
.mnav-links a:hover, .mnav-anmelden:hover, .mnav-links a[aria-current] { color: var(--tinte); background: var(--flaeche-2); text-decoration: none; }
.mnav-aktionen { display: flex; align-items: center; gap: 8px; }
.mnav-aktionen .btn { padding: 9px 16px; font-size: 14px; }
.menue-knopf { display: none; margin-left: auto; width: 42px; height: 42px; padding: 0; position: relative; background: transparent; border: 1px solid var(--linie-stark); border-radius: 11px; color: var(--tinte); cursor: pointer; }
.menue-knopf span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, top .2s; }
.menue-knopf span:nth-child(1) { top: 14px; } .menue-knopf span:nth-child(2) { top: 20px; } .menue-knopf span:nth-child(3) { top: 26px; }
.menue-knopf.nav-toggle--open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menue-knopf.nav-toggle--open span:nth-child(2) { opacity: 0; }
.menue-knopf.nav-toggle--open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
@media (max-width: 960px) {
    .menue-knopf { display: block; }
    .mnav {
        display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px;
        background: #fff; border-bottom: 1px solid var(--linie); padding: 10px var(--rand) 22px;
        max-height: calc(100vh - 66px); overflow-y: auto; box-shadow: 0 30px 50px -30px rgba(15, 23, 32, .35);
    }
    .mnav.site-nav--open { display: flex; }
    .mnav-links { flex-direction: column; margin: 0; }
    .mnav-links a { padding: 14px 8px; font-size: 17px; border-radius: 10px; border-bottom: 1px solid var(--linie); }
    .mnav-aktionen { flex-direction: column; align-items: stretch; gap: 10px; }
    .mnav-anmelden { text-align: center; border: 1px solid var(--linie-stark); padding: 12px; border-radius: 12px; }
    .mnav-aktionen .btn { padding: 14px; font-size: 16px; }
}

/* Abschnitte */
.sektion { position: relative; padding: clamp(72px, 10vw, 128px) var(--rand); }
.sektion-innen { max-width: var(--breite); margin: 0 auto; }
.sektion-hell { background: var(--flaeche-2); }
.sektion-kopf { max-width: 760px; margin: 0 0 clamp(36px, 5vw, 56px); }
.sektion-kopf.mittig { margin-left: auto; margin-right: auto; text-align: center; }
.sektion-kopf h2, h2.gross { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; margin-bottom: .4em; text-wrap: balance; }
.sektion-kopf p, .lead { font-size: clamp(16.5px, 1.5vw, 18.5px); color: var(--tinte-2); line-height: 1.65; }
.ueberzeile { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--schrift); letter-spacing: .02em; color: var(--akzent); margin-bottom: 18px; padding: 7px 12px; border-radius: 999px; background: var(--akzent-weich); border: 1px solid color-mix(in srgb, var(--akzent) 22%, transparent); }
.sektion-kopf .ueberzeile { font-size: 13px; line-height: 1; color: var(--akzent); }
.ueberzeile::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }

/* ---- Bühne (Hero, Aufbau wie Speditionary) ---- */
.buehne { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(48px, 7vw, 88px) var(--rand) clamp(56px, 7vw, 96px); background: linear-gradient(180deg, #f5f8fd 0%, #fff 62%); }
.buehne::before { content: ""; position: absolute; inset: -10% -10% auto; height: 80%; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 50% 0%, rgba(45, 140, 255, .18), transparent 72%), radial-gradient(26% 34% at 88% 30%, rgba(26, 102, 219, .08), transparent 70%), radial-gradient(28% 36% at 10% 40%, rgba(120, 170, 255, .1), transparent 70%); }
.buehne::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(15, 23, 32, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 32, .045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 50% at 50% 20%, #000, transparent 75%); mask-image: radial-gradient(60% 50% at 50% 20%, #000, transparent 75%); }
.buehne-innen { max-width: 860px; margin: 0 auto; }
.pille { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--linie-stark); color: var(--tinte-2); font-size: 13.5px; margin-bottom: 26px; box-shadow: 0 1px 2px rgba(15, 23, 32, .05); }
.pille b { white-space: nowrap; flex-shrink: 0; background: var(--akzent-weich); color: var(--akzent); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.buehne h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.04; margin: 0 auto .28em; max-width: 16ch; text-wrap: balance; font-weight: 800; letter-spacing: -.04em; hyphens: manual; }
.buehne-unterzeile { font: 600 clamp(17px, 2vw, 21px)/1.4 var(--schrift-titel); color: var(--tinte-2); letter-spacing: -.01em; margin: 0 auto 10px; max-width: 640px; }
.buehne-wert { font-size: 15.5px; font-weight: 600; color: var(--tinte); margin: 0 auto 18px; }
.buehne-lead { font-size: clamp(16px, 1.5vw, 17.5px); line-height: 1.65; color: var(--tinte-2); max-width: 640px; margin: 0 auto 30px; text-wrap: pretty; }
.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.buehne .knopfreihe { justify-content: center; }
.vertrauen { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--tinte-3); }
.vertrauen li { display: inline-flex; align-items: center; gap: 7px; }
.vertrauen li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(21, 115, 71, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.6-5' fill='none' stroke='%23157347' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (max-width: 560px) { .buehne .knopfreihe .btn-gross { flex: 1 1 100%; } }
@media (prefers-reduced-motion: no-preference) {
    .buehne-innen > * { animation: auftauchen .8s cubic-bezier(.2, .7, .2, 1) backwards; }
    .buehne-innen > :nth-child(2) { animation-delay: .05s; } .buehne-innen > :nth-child(3) { animation-delay: .1s; }
    .buehne-innen > :nth-child(4) { animation-delay: .15s; } .buehne-innen > :nth-child(5) { animation-delay: .2s; }
    .buehne-innen > :nth-child(n+6) { animation-delay: .25s; }
    .buehne-bild { animation: auftauchen 1s .3s cubic-bezier(.2, .7, .2, 1) backwards; }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- Produktbild: Nachbau eines Shop-Warenkorbs + Ergebniskarte aus dem Dashboard ---- */
.buehne-bild { position: relative; max-width: 1080px; margin: clamp(44px, 6vw, 72px) auto 0; padding: 0 clamp(0px, 9vw, 120px) 0 0; text-align: left; }
.mock-browser { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--linie-stark); box-shadow: 0 2px 4px rgba(15, 23, 32, .04), 0 40px 90px -36px rgba(15, 23, 32, .38), 0 0 120px -50px rgba(45, 140, 255, .45); }
.mock-leiste { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f3f6fa; border-bottom: 1px solid var(--linie); }
.mock-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #d5dce6; }
.mock-url { margin-left: 10px; flex: 1; max-width: 360px; padding: 5px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--linie); font: 12px var(--schrift-mono); color: var(--tinte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-shop { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 22px; padding: 24px; background: #fff; }
.mock-shopkopf { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--linie); font: 800 17px var(--schrift-titel); letter-spacing: -.03em; color: #2b2118; }
.mock-shopkopf span { font: 500 12.5px var(--schrift); color: var(--tinte-3); letter-spacing: 0; }
.mock-titel { font: 700 16px var(--schrift-titel); margin: 0 0 12px; color: var(--tinte); }
.mock-posten { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.mock-posten b { display: block; font-weight: 600; color: var(--tinte); }
.mock-posten small { color: var(--tinte-3); font-size: 12px; }
.mock-posten > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.mock-bild { display: block; width: 52px; height: 52px; border-radius: 10px; background: var(--bild, #e9e3da); position: relative; overflow: hidden; }
.mock-bild::after { content: ""; position: absolute; inset: 22% 26%; border-radius: 8px; background: var(--ding, rgba(255, 255, 255, .55)); }
.mock-bild.b1 { --bild: linear-gradient(135deg, #efe6da, #d9c7ad); --ding: #8a6a48; }
.mock-bild.b2 { --bild: linear-gradient(135deg, #e5ecf3, #c6d3e1); --ding: #42566e; }
.mock-bild.b3 { --bild: linear-gradient(135deg, #eef1e6, #cfd8bc); --ding: #6a7d45; }
.mock-bild.b4 { --bild: linear-gradient(135deg, #f3e7e7, #e0c4c4); --ding: #9a5454; }
.mock-bild.b5 { --bild: linear-gradient(135deg, #ece9f3, #cfc8e0); --ding: #5d4f86; }
/* Das Widget von CartSentry im Shop - leicht hervorgehoben, damit man es erkennt */
.mock-widget { position: relative; margin-top: 14px; border-radius: 12px; outline: 2px dashed rgba(45, 140, 255, .45); outline-offset: 5px; }
.mock-widget-marke { position: absolute; top: -17px; right: 8px; font: 700 10px/1 var(--schrift); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #2d8cff; padding: 4px 7px; border-radius: 6px; }
.mock-schwelle { padding: 12px 14px; border-radius: 12px; background: #f6f2ec; border: 1px solid #ebe2d6; font-size: 13.5px; color: #3a2f25; }
.mock-schwelle b { font-variant-numeric: tabular-nums; }
.mock-spur { height: 8px; border-radius: 999px; background: #e7ddd0; margin-top: 9px; overflow: hidden; }
.mock-spur span { display: block; height: 100%; width: 75%; border-radius: inherit; background: linear-gradient(90deg, #8a6a48, #b48a5c); }
@media (prefers-reduced-motion: no-preference) { .mock-spur span { animation: spur-fuellen 1.6s .9s cubic-bezier(.2, .7, .2, 1) both; } }
@keyframes spur-fuellen { from { width: 8%; } }
.mock-xsell { padding: 12px 14px 14px; border-radius: 12px; background: #fff; border: 1px solid #ebe2d6; }
.mock-xsell h5 { margin: 0 0 10px; font: 600 13.5px var(--schrift); color: #3a2f25; }
.mock-xsell-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mock-karte { border: 1px solid #efe7dc; border-radius: 10px; padding: 8px; font-size: 12px; color: #3a2f25; min-width: 0; }
.mock-karte .mock-bild { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 7px; margin-bottom: 6px; }
.mock-karte b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-karte i { display: block; font-style: normal; font-weight: 700; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.mock-karte em { display: block; text-align: center; font-style: normal; font-weight: 600; font-size: 11.5px; padding: 6px; border-radius: 7px; background: #8a6a48; color: #fff; }
.mock-summe { align-self: start; padding: 18px; border-radius: 14px; background: #faf8f5; border: 1px solid #efe7dc; font-size: 13.5px; color: #3a2f25; }
.mock-summe div { display: flex; justify-content: space-between; padding: 6px 0; font-variant-numeric: tabular-nums; }
.mock-summe .gesamt { border-top: 1px solid #e7ddd0; margin-top: 6px; padding-top: 12px; font-weight: 700; font-size: 15px; }
.mock-summe .mock-kasse { display: block; margin-top: 14px; text-align: center; padding: 11px; border-radius: 10px; background: #2b2118; color: #fff; font-weight: 600; }
.mock-summe small { display: block; margin-top: 10px; color: #8b7d6e; font-size: 11.5px; text-align: center; }

/* Ergebniskarte aus dem Dashboard - schwebt rechts über dem Shop */
.mock-ergebnis { position: absolute; right: 0; bottom: -64px; width: min(340px, 40%); padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--linie-stark); box-shadow: 0 2px 4px rgba(15, 23, 32, .05), 0 34px 70px -28px rgba(15, 23, 32, .45); color: var(--tinte); }
.mock-ergebnis-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 12.5px; color: var(--tinte-3); }
.mock-ergebnis-kopf .marke-zeichen { width: 24px; height: 24px; }
.mock-ergebnis-kopf strong { display: block; color: var(--tinte); font-size: 13.5px; font-weight: 600; }
.mock-ergebnis-kopf .etikett { margin-left: auto; }
.mock-messgroesse { font-size: 12.5px; color: var(--tinte-3); margin: 0 0 2px; }
.mock-uplift { font: 800 36px/1.1 var(--schrift-titel); letter-spacing: -.04em; color: var(--gut); font-variant-numeric: tabular-nums; margin: 0; }
.mock-uplift small { font: 600 17px var(--schrift); letter-spacing: -.01em; color: var(--tinte-2); margin-left: 4px; }
.mock-vergleich { display: grid; gap: 8px; margin: 14px 0 12px; }
.mock-vergleich div { display: grid; grid-template-columns: 70px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tinte-2); }
.mock-vergleich b { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinte); }
.mock-balken { height: 9px; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.mock-balken span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1a66db, #4d9dff); }
.mock-balken.kontrolle span { background: #a8b4c4; }
.mock-intervall { position: relative; height: 26px; margin: 4px 0 6px; }
.mock-intervall::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--flaeche-3); }
.mock-intervall .null { position: absolute; left: 30%; top: 4px; bottom: 4px; width: 1px; background: var(--tinte-3); }
.mock-intervall .band { position: absolute; left: 39%; width: 38%; top: 8px; height: 10px; border-radius: 999px; background: var(--gut-weich); border: 1.5px solid var(--gut); }
.mock-intervall .punkt { position: absolute; left: 57%; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 3px #fff; }
.mock-fuss { margin: 0; font-size: 11.5px; color: var(--tinte-3); line-height: 1.5; }
.etikett { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--flaeche-2); color: var(--tinte-2); white-space: nowrap; }
.etikett-ok { background: var(--gut-weich); color: var(--gut); }
.etikett-warn { background: var(--warn-weich); color: var(--warn); }
@media (max-width: 860px) {
    .buehne-bild { padding: 0; }
    .mock-shop { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .mock-summe { display: none; }
    .mock-ergebnis { position: relative; right: auto; bottom: auto; width: auto; max-width: 420px; margin: -28px 14px 0 auto; }
}
@media (max-width: 480px) {
    .mock-xsell-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mock-xsell-liste .mock-karte:nth-child(3) { display: none; }
    .mock-ergebnis { margin: -20px 8px 0; }
    .mock-url { max-width: none; }
}

/* Kacheln (Mechaniken) */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kachel { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px; border-radius: 20px; border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten); transition: box-shadow .25s, transform .25s, border-color .25s; }
.kachel:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); border-color: var(--linie-stark); }
.kachel h3 { font: 700 1.15rem/1.3 var(--schrift-titel); letter-spacing: -.02em; margin: 0 0 8px; }
.kachel p { color: var(--tinte-2); font-size: 15px; margin: 0; }
.kachel-zeichen { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; background: var(--akzent-weich); color: var(--akzent); }
.kachel-zeichen svg { width: 22px; height: 22px; }
.kachel-ci { background: linear-gradient(160deg, #f3f7fd, #fff 60%); }
.farbpunkte { display: flex; gap: 6px; margin-top: 16px; }
.farbpunkte i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linie-stark); }
@media (max-width: 960px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kacheln { grid-template-columns: minmax(0, 1fr); } .kachel { padding: 22px; } }

/* So funktioniert's */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: schritt; }
.schritt { position: relative; padding: 26px 24px; border-radius: 20px; border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten); }
.schritt-nr { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 20px; font: 700 14px/1 var(--schrift-titel); color: var(--akzent); background: var(--akzent-weich); }
.schritt h3 { font: 700 1.15rem/1.3 var(--schrift-titel); letter-spacing: -.02em; margin: 0 0 8px; }
.schritt p { color: var(--tinte-2); font-size: 15px; margin: 0; }
.schritt code { font-size: 12.5px; }
.schritt::after { content: ""; position: absolute; top: 47px; right: -17px; width: 18px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--akzent) 60%, transparent), transparent); }
.schritt:last-child::after { display: none; }
@media (max-width: 900px) { .schritte { grid-template-columns: minmax(0, 1fr); } .schritt::after { display: none; } }

/* Zweispaltig mit Hakenliste */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.zweispaltig.umgekehrt > :first-child { order: 2; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: minmax(0, 1fr); } .zweispaltig.umgekehrt > :first-child { order: 0; } }
.zweispaltig h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; margin-bottom: .45em; text-wrap: balance; }
.haken-liste { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.haken-liste li { position: relative; padding-left: 32px; color: var(--tinte-2); }
.haken-liste li b, .haken-liste li strong { color: var(--tinte); font-weight: 600; }
.haken-liste li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--akzent-weich); }
.haken-liste li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 7px; height: 4px; border-left: 1.8px solid var(--akzent); border-bottom: 1.8px solid var(--akzent); transform: rotate(-45deg); }
.hinweis-zeile { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: var(--warn-weich); color: #5c4a1c; font-size: 15px; }

/* Messgenauigkeit: zwei Ergebniskarten nebeneinander */
.mess-stapel { display: grid; gap: 16px; }
.mess-karte { position: relative; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--linie); background: #fff; box-shadow: var(--schatten-hoch); }
.mess-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--tinte-3); flex-wrap: wrap; }
.mess-karte-kopf strong { color: var(--tinte); font-size: 14.5px; }
.mess-karte .mock-uplift { font-size: 32px; }
.mess-karte p { margin: 6px 0 0; font-size: 13.5px; color: var(--tinte-3); }
.mess-karte p.mock-uplift { color: var(--gut); margin: 0; font-size: 32px; }
.mess-karte p.mock-messgroesse { margin: 0 0 2px; font-size: 12.5px; }
.mess-karte .status-text { margin: 4px 0 0; font-size: 14px; }
.mess-karte.ungenau { transform: translateX(clamp(0px, 3vw, 32px)); }
@media (max-width: 900px) { .mess-karte.ungenau { transform: none; } }

/* Fakten (Nie den Shop gefährden) */
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fakt { padding: 24px; border-radius: 20px; border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten); }
.fakt-gross { display: block; font: 800 2.1rem/1 var(--schrift-titel); letter-spacing: -.04em; color: var(--tinte); margin-bottom: 14px; }
.fakt-gross small { font-size: .5em; font-weight: 700; letter-spacing: -.01em; color: var(--tinte-3); margin-left: 3px; }
.fakt h3 { font: 700 1.05rem/1.3 var(--schrift-titel); letter-spacing: -.015em; margin: 0 0 6px; }
.fakt p { color: var(--tinte-2); font-size: 14.5px; margin: 0; }
@media (max-width: 1000px) { .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fakten { grid-template-columns: minmax(0, 1fr); } }

/* Preis */
.preis-karte { position: relative; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; border-radius: 24px; padding: 36px 34px; border: 1px solid transparent; background: linear-gradient(var(--flaeche), var(--flaeche)) padding-box, linear-gradient(160deg, rgba(26, 102, 219, .55), rgba(15, 23, 32, .1) 60%) border-box; box-shadow: 0 30px 70px -34px rgba(26, 102, 219, .35); }
.preis-band { position: absolute; top: -13px; left: 32px; padding: 5px 12px; border-radius: 999px; background: #0f1720; color: #fff; font-size: 12px; font-weight: 600; }
.preis-karte h3 { font: 700 1.3rem/1.2 var(--schrift-titel); letter-spacing: -.02em; margin: 0 0 4px; }
.preis-zeile { color: var(--tinte-2); font-size: 15px; margin: 0; }
.preis-wert { font: 800 52px/1 var(--schrift-titel); letter-spacing: -.045em; margin: 24px 0 6px; font-variant-numeric: tabular-nums; }
.preis-wert span { font: 500 15px var(--schrift); letter-spacing: 0; color: var(--tinte-3); }
.preis-zusatz { font-size: 14px; color: var(--akzent); font-weight: 600; margin: 0 0 22px; }
.preis-karte ul { list-style: none; padding: 22px 0 0; margin: 0 0 28px; border-top: 1px solid var(--linie); display: grid; gap: 10px; color: var(--tinte-2); font-size: 15px; }
.preis-karte li { position: relative; padding-left: 26px; }
.preis-karte li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg); }
.preis-karte .btn { width: 100%; }
.preis-notiz { text-align: center; color: var(--tinte-3); font-size: 14px; margin: 24px auto 0; max-width: 640px; }
@media (max-width: 480px) { .preis-karte { padding: 30px 22px; } }

/* Shopware-Teaser */
.plugin-karte { padding: 26px; border-radius: 22px; border: 1px solid var(--linie-stark); background: #fff; box-shadow: var(--schatten-hoch); }
.plugin-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--linie); }
.plugin-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #189eff; color: #fff; font: 800 18px var(--schrift-titel); }
.plugin-kopf strong { display: block; font-size: 15px; }
.plugin-kopf span { font-size: 13px; color: var(--tinte-3); }
.plugin-kopf .etikett { margin-left: auto; }
.plugin-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; color: var(--tinte-2); border-bottom: 1px dashed var(--linie); }
.plugin-zeile:last-child { border-bottom: 0; }
.plugin-zeile i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d63; box-shadow: 0 0 0 3px rgba(31, 157, 99, .16); flex-shrink: 0; }
.plugin-zeile b { margin-left: auto; color: var(--tinte); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Fragen */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq-eintrag { border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); box-shadow: 0 1px 2px rgba(15, 23, 32, .03); transition: box-shadow .2s; }
.faq-eintrag[open] { box-shadow: var(--schatten); }
.faq-eintrag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 22px; font: 600 clamp(16px, 1.6vw, 17.5px)/1.4 var(--schrift-titel); letter-spacing: -.01em; color: var(--tinte); border-radius: 16px; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after { content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; color: var(--tinte-2); background-color: var(--flaeche-2); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 10px 1.5px, 1.5px 10px; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--linie); transition: transform .25s; }
.faq-eintrag[open] summary::after { transform: rotate(45deg); }
.faq-eintrag summary:hover { color: var(--akzent); }
.faq-antwort { padding: 0 22px 22px; color: var(--tinte-2); max-width: 760px; }
.faq-antwort p { margin: 0; }

/* Schluss-Aufruf: dunkle Fläche mit blauem Licht */
.cta-band { position: relative; isolation: isolate; overflow: hidden; max-width: var(--breite); margin: 0 auto; text-align: center; padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 64px); border-radius: 28px; background: radial-gradient(60% 90% at 50% 0%, rgba(45, 140, 255, .3), transparent 70%), #11161d; box-shadow: 0 40px 80px -40px rgba(15, 23, 32, .55); }
.cta-band::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -30%; height: 70%; z-index: -1; background-image: linear-gradient(rgba(140, 180, 230, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 180, 230, .12) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(500px) rotateX(62deg); transform-origin: top; -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%); mask-image: linear-gradient(180deg, transparent, #000 50%); }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1.06; margin: 0 auto .35em; max-width: 18ch; text-wrap: balance; font-weight: 800; }
.cta-band p { color: var(--tinte-2); font-size: 17.5px; max-width: 560px; margin: 0 auto 30px; }
.cta-band .knopfreihe { justify-content: center; }
.cta-band .btn-akzent { background: #1a66db; border-color: #1a66db; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .4); }
.cta-band .btn-akzent:hover { background: #2a74e6; border-color: #2a74e6; color: #fff; }
.cta-band .btn.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.cta-band .btn.secondary:hover { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .45); }

/* Unterseiten: heller Seitenkopf */
.seitenkopf { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 7vw, 88px) var(--rand) clamp(36px, 5vw, 60px); background: linear-gradient(180deg, #f5f8fd, #fff); border-bottom: 1px solid var(--linie); }
.seitenkopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 80% at 85% 0%, rgba(45, 140, 255, .14), transparent 70%); }
.seitenkopf-innen { max-width: var(--breite); margin: 0 auto; }
.seitenkopf h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -.035em; max-width: 20ch; margin-bottom: .3em; text-wrap: balance; font-weight: 800; }
.seitenkopf .lead { max-width: 680px; margin: 0; }
.seitenkopf .knopfreihe { margin-top: 28px; }

/* Fließtext (Rechtstexte) */
.inhalt-raster { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--rand) clamp(64px, 9vw, 112px); }
.prosa { max-width: 780px; font-size: 16.5px; line-height: 1.75; color: var(--tinte-2); min-width: 0; }
.prosa > :first-child { margin-top: 0; }
.prosa h2 { font: 700 clamp(1.3rem, 2.2vw, 1.6rem)/1.25 var(--schrift-titel); color: var(--tinte); margin: 2em 0 .55em; letter-spacing: -.025em; }
.prosa h3 { font: 700 1.08rem/1.35 var(--schrift-titel); color: var(--tinte); margin: 1.7em 0 .5em; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1.1em; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li { margin-bottom: .45em; }
.prosa li::marker { color: var(--akzent); }
.prosa strong { color: var(--tinte); }
.prosa a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.prosa a:hover { text-decoration-color: currentColor; }
.prosa table { font-size: 15px; margin: 0 0 1.4em; display: block; overflow-x: auto; }
.prosa th, .prosa td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }

/* Einzelne Karte mittig (Wartung, Passwort, Bestätigung) */
.einzel { flex: 1; display: grid; place-items: center; padding: clamp(40px, 8vw, 96px) var(--rand); background: radial-gradient(50% 40% at 50% 0%, rgba(45, 140, 255, .12), transparent 70%), linear-gradient(180deg, #f5f8fd, #fff); }
.einzel-karte { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: clamp(26px, 5vw, 40px); box-shadow: var(--schatten-hoch); }
.einzel-karte.breit { max-width: 620px; }
.einzel-karte .marke { display: flex; width: max-content; margin-bottom: 26px; }
.einzel-karte h1 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: .4em; }
.einzel-karte .lead { font-size: 16px; margin-bottom: 22px; }
.einzel-karte form { display: flex; flex-direction: column; gap: 12px; }
.einzel-karte form .btn { width: 100%; padding: 12px 18px; font-size: 15px; }
.einzel-karte .zurueck { display: inline-block; margin-top: 22px; font-size: 14px; color: var(--tinte-3); }
.einzel-karte .zurueck:hover { color: var(--tinte); }
.einzel-trenner { border-top: 1px solid var(--linie); margin-top: 26px; padding-top: 22px; }
.einzel-trenner h2 { font-size: 1.05rem; }
.einzel-trenner .haken-liste { margin-top: 12px; font-size: 15px; }
.admin-login { margin: 18px auto 0; max-width: 480px; width: 100%; font-size: 13.5px; }
.admin-login summary { color: var(--tinte-3); text-align: center; }
.admin-login form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }

/* ---------------------------------------------------------------------------------------
 * 7. Fuß
 * ------------------------------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); color: var(--tinte-3); font-size: 13px; }
.fuss-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 20px var(--rand); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fuss a { color: var(--tinte-3); }
.fuss a:hover { color: var(--tinte); }
.fuss-links { display: flex; gap: 16px; flex-wrap: wrap; }

.mfuss { border-top: 1px solid var(--linie); background: var(--flaeche-2); }
.mfuss-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 56px var(--rand) 36px; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.mfuss-marke p { color: var(--tinte-3); font-size: 14.5px; max-width: 360px; margin: 16px 0 0; }
.mfuss-siegel { display: flex; flex-wrap: wrap; gap: 8px; }
.mfuss-siegel span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linie-stark); background: #fff; font-size: 12.5px; color: var(--tinte-2); }
.mfuss-spalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mfuss-spalte h2 { font: 700 13px/1 var(--schrift-titel); letter-spacing: 0; color: var(--tinte); margin: 6px 0 8px; }
.mfuss-spalte a { color: var(--tinte-3); font-size: 14.5px; overflow-wrap: anywhere; }
.mfuss-spalte a:hover { color: var(--tinte); text-decoration: none; }
.mfuss-unten { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 20px var(--rand) 30px; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--tinte-3); }
@media (max-width: 900px) { .mfuss-innen { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mfuss-marke { grid-column: 1 / -1; } }
@media (max-width: 560px) { .mfuss-innen { grid-template-columns: minmax(0, 1fr); gap: 28px; } .mfuss-spalte a { padding: 4px 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print {
    .kopf, .mkopf, .mfuss, .fuss, .sprunglink, .menue-knopf, #toast-container { display: none !important; }
}

/* Suchfelder in Kartenköpfen (Kunden, Mailarchiv, Artikel) nicht über die volle Breite */
.flex-row-between input[type=search], .flex-row input[type=search] { width: auto; min-width: 240px; flex: 0 1 320px; }
@media (max-width: 560px) { .flex-row-between input[type=search], .flex-row input[type=search] { min-width: 0; flex: 1 1 100%; } }
.grid-2col > .btn, .flex-col > .btn, form > .btn { justify-self: start; align-self: flex-start; }
@media (min-width: 700px) { .flex-row-between > .flex-row { flex-wrap: nowrap; } }
.flex-row > input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { width: auto; flex: 1 1 220px; }
/* admin.js setzt keine Initialen - dann ein neutrales Personen-Symbol statt eines leeren Kreises */
.avatar-btn:empty { background: var(--flaeche-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6878' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='7' r='3.2'/%3E%3Cpath d='M3.8 17c.8-3 3.3-4.6 6.2-4.6s5.4 1.6 6.2 4.6'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: none; }

/* ---------------------------------------------------------------------------------------
 * Startseite: Mechaniken als Feature-Zeilen (Text + Nachbau des echten Widgets)
 *
 * .csw = Nachbau der Shadow-DOM-Styles aus v1/b.js css(), Klassen mit Präfix "cs-" (b.js: .w,
 * .bar, .track, .fill, .ok, .list, .card, .img, .name, .price, .btn, .ov, .dlg, .x, .rem, .muted,
 * .msg). Werte = Standard-CI aus shop_lib.php defaultShopSettings()['style']. Wer das Widget
 * ändert, zieht diese Werte hier nach.
 * ------------------------------------------------------------------------------------- */
.feature-liste { display: grid; gap: clamp(64px, 9vw, 112px); }
.feature-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature-zeile.umgekehrt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.feature-zeile.umgekehrt > .feature-text { order: 2; }
.feature-text h3 { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--schrift-titel); letter-spacing: -.03em; margin: 0 0 12px; }
.feature-text > p { font-size: 17px; color: var(--tinte-2); line-height: 1.6; margin: 0; }
.feature-text .haken-liste { margin-top: 20px; font-size: 15px; }
.feature-breit { grid-template-columns: minmax(0, 1fr); }
.haken-zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
@media (max-width: 900px) {
    .feature-zeile, .feature-zeile.umgekehrt { grid-template-columns: minmax(0, 1fr); }
    .feature-zeile.umgekehrt > .feature-text { order: 0; }
    .haken-zweispaltig { grid-template-columns: minmax(0, 1fr); }
}

/* Bühne für den Nachbau */
.fbild { position: relative; min-width: 0; padding: clamp(36px, 4vw, 48px) clamp(14px, 3vw, 36px) clamp(20px, 3vw, 36px); border-radius: 24px; border: 1px solid var(--linie); background: radial-gradient(70% 60% at 70% 0%, rgba(45, 140, 255, .1), transparent 70%), linear-gradient(180deg, #f5f8fd, #eef2f7); }
.fbild-etikett { position: absolute; top: 14px; left: 16px; font: 700 10.5px/1 var(--schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); background: #fff; border: 1px solid var(--linie-stark); padding: 5px 8px; border-radius: 999px; }
.fbild-hinweis { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinte-3); margin: 0 0 -4px; }
.fbild-zustand { max-width: 380px; margin: 18px auto 0; }

/* Stilisierte Shopseite drumherum (neutral, nicht CartSentry) */
.fshop { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; box-shadow: 0 30px 60px -30px rgba(15, 23, 32, .35); font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #1a1a1a; }
.fshop-offcanvas { max-width: 380px; }
.fshop-kopf, .fshop-leiste { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #eef0f3; font-size: 15px; }
.fshop-kopf span { color: #6b7280; font-size: 20px; line-height: 1; }
.fshop-leiste span { font-size: 12.5px; color: #6b7280; }
.fshop-posten { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef0f3; font-size: 13px; }
.fshop-posten b { display: block; font-weight: 600; }
.fshop-posten small { color: #6b7280; font-size: 12px; }
.fshop-posten > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.fshop-posten .cs-img { width: 46px; height: 46px; }
.fshop-summe { display: flex; justify-content: space-between; padding: 4px 0 10px; font-size: 13.5px; }
.fshop-knopf { display: block; text-align: center; padding: 10px; border-radius: 8px; background: #1a1a1a; color: #fff; font-weight: 600; font-size: 13.5px; }
.fquellen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fquellen span { font: 600 11px/1 var(--schrift); padding: 5px 8px; border-radius: 999px; background: var(--akzent-weich); color: var(--akzent); }
.fshop-pdp { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 16px; }
.fpdp-bild { width: 120px; height: 120px; }
.fpdp-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fpdp-info small { color: #6b7280; font-size: 12px; }
.fpdp-info b { font-size: 15px; line-height: 1.3; }
.fpdp-preis { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.fpdp-widget { grid-column: 1 / -1; }
@media (max-width: 420px) { .fshop-pdp { grid-template-columns: 84px minmax(0, 1fr); } .fpdp-bild { width: 84px; height: 84px; } }

/* Platzhalter-Produktbilder (keine Rasterbilder) */
.cs-img.fb-brett { background: radial-gradient(40% 30% at 50% 50%, #9a7350 60%, transparent 62%), linear-gradient(135deg, #f1e8db, #ddcab0); }
.cs-img.fb-block { background: radial-gradient(28% 36% at 50% 55%, #44566c 62%, transparent 64%), linear-gradient(135deg, #e7edf4, #c9d5e2); }
.cs-img.fb-oel { background: radial-gradient(18% 34% at 50% 55%, #6f7f3f 62%, transparent 64%), linear-gradient(135deg, #f0f2e6, #d2dabd); }
.cs-img.fb-stahl { background: linear-gradient(60deg, transparent 46%, #3a2f25 46% 56%, transparent 56%) 22% 78% / 34% 34% no-repeat, linear-gradient(60deg, transparent 47%, #8b95a1 47% 53%, transparent 53%) 62% 38% / 56% 56% no-repeat, linear-gradient(135deg, #f4e9e9, #e1c6c6); }
.cs-img.fb-tuch { background: repeating-linear-gradient(90deg, #5d4f86 0 4px, transparent 4px 12px) center / 56% 56% no-repeat, linear-gradient(135deg, #eeebf4, #d1c9e1); }
.cs-img.fb-messer { background: linear-gradient(-30deg, transparent 42%, #aab2bc 42% 52%, transparent 52%) 64% 40% / 62% 62% no-repeat, linear-gradient(-30deg, transparent 40%, #3a2f25 40% 56%, transparent 56%) 24% 74% / 34% 34% no-repeat, linear-gradient(135deg, #f5f1ea, #e4dacb); }

/* Das Widget selbst (Spiegel von b.js css()) */
.csw { --p: #1F6FEB; --pt: #FFFFFF; --t: #1A1A1A; --m: #6B7280; --bg: #FFFFFF; --b: #E5E7EB; --r: 8px; color: var(--t); font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-align: left; }
.csw-marke { --p: #7A4E2D; --pt: #FFFFFF; --t: #2B2118; --m: #7d6e60; --bg: #F6F2EC; --b: #E2D6C6; --r: 0px; font-family: Georgia, "Times New Roman", serif; }
.cs-w { margin: 12px 0; font-size: 14px; line-height: 1.45; }
.csw h3 { font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: normal; margin: 0 0 10px; color: var(--t); }
.cs-bar { background: var(--bg); border: 1px solid var(--b); border-radius: var(--r); padding: 10px 12px; }
.cs-track { height: 6px; background: var(--b); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.cs-fill { height: 100%; background: var(--p); border-radius: 6px; }
.cs-ok { color: var(--t); font-weight: 600; }
.cs-list { display: flex; gap: 10px; }
.cs-slider .cs-list { overflow: hidden; padding-bottom: 4px; }
.cs-slider .cs-card { flex: 0 0 calc(50% - 5px); max-width: 200px; }
.cs-card { display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--b); border-radius: var(--r); padding: 8px; color: var(--t); min-width: 0; }
.cs-card > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cs-img { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: calc(var(--r) * .6); background-color: var(--b); }
.cs-name { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-price { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.cs-btn { display: inline-block; text-align: center; font-size: 13px; font-weight: 600; border-radius: var(--r); padding: 8px 12px; border: 1px solid var(--p); white-space: nowrap; }
.cs-btn.is-filled { background: var(--p); color: var(--pt); }
.cs-btn.is-outline { background: transparent; color: var(--p); }
.cs-btn.is-link { border: 0; background: none; color: var(--p); padding: 0; text-decoration: underline; }

/* Exit-Intent: Browserfenster, Kante oben, Overlay + Dialog, Mauszeiger */
.fbild-exit { padding-left: clamp(10px, 2vw, 28px); padding-right: clamp(10px, 2vw, 28px); }
.fbrowser { position: relative; max-width: 520px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #d5dce6; box-shadow: 0 30px 60px -30px rgba(15, 23, 32, .4); }
.fbrowser-tabs { display: flex; align-items: flex-end; gap: 6px; height: 40px; padding: 0 10px; background: #e3e8ef; }
.fbrowser-tab { display: flex; align-items: center; gap: 10px; max-width: 62%; padding: 8px 12px; border-radius: 9px 9px 0 0; background: #fff; font: 12px var(--schrift); color: #3b4757; white-space: nowrap; overflow: hidden; }
.fbrowser-tab i { font-style: normal; color: #6b7280; }
.fbrowser-plus { padding: 0 6px 9px; color: #6b7280; font: 16px var(--schrift); }
.fbrowser-fenster { margin-left: auto; align-self: center; display: flex; gap: 12px; color: #6b7280; font: 13px var(--schrift); }
.fbrowser-fenster i { font-style: normal; width: 10px; height: 2px; background: #9aa5b3; align-self: center; }
.fbrowser-fenster i:nth-child(2) { height: 9px; background: none; border: 1.5px solid #9aa5b3; }
.fbrowser-fenster i.zu { width: auto; height: auto; background: none; border: 0; font-size: 15px; line-height: 1; }
/* Die obere Fensterkante, über die der Zeiger das Fenster verlässt */
.fbrowser-kante { position: relative; height: 0; z-index: 3; }
.fbrowser-kante::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: linear-gradient(90deg, transparent, #e0533d 25%, #e0533d 75%, transparent); }
.fbrowser-kante span { position: absolute; left: 12px; top: 8px; font: 700 11px/1 var(--schrift); color: #fff; background: #e0533d; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.fbrowser-seite { position: relative; min-height: 560px; padding: 18px; background: #fff; }
.fskelett { display: grid; gap: 12px; }
.fskelett i { display: block; height: 14px; border-radius: 6px; background: #eef1f5; }
.cs-ov { position: absolute; inset: 0; display: flex; align-items: center; padding-top: 36px !important; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.cs-dlg { position: relative; width: 100%; max-width: 420px; padding: 24px; background: var(--bg); color: var(--t); border-radius: var(--r); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.cs-dlg ul { padding-left: 18px; margin: 8px 0 16px; }
.cs-dlg li { margin: 4px 0; }
.cs-x { position: absolute; top: 8px; right: 10px; font-size: 22px; line-height: 1; color: var(--m); }
.cs-muted { color: var(--m); font-size: 12px; margin: 10px 0 0; }
.fopt { font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-3); background: #eef1f5; padding: 2px 6px; border-radius: 999px; margin-left: 4px; }
.cs-rem { display: block; border-top: 1px solid var(--b); margin-top: 16px; padding-top: 12px; }
.cs-rem > strong { display: block; }
.cs-rem-ohne-linie { border-top: 0; margin-top: 0; padding-top: 0; }
.cs-input { display: block; width: 100%; padding: 9px 10px; border: 1px solid var(--b); border-radius: var(--r); margin: 6px 0; color: #9ca3af; }
.cs-input.is-voll { color: var(--t); }
.cs-label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--m); margin-bottom: 8px; }
.cs-cb { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; border: 1px solid #9ca3af; border-radius: 3px; background: #fff; }
.cs-cb.is-an { background: var(--p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--p); }
.cs-msg { display: block; font-size: 12px; margin-top: 6px; }
.cs-dlg-klein { padding: 16px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .35); }

/* Mauszeiger: steht im Ruhezustand AN der Kante (Endzustand ohne Animation sichtbar); die
   Animation startet unten in der Seite und läuft nach oben. fill-mode backwards, nie opacity 0. */
.fcursor { position: absolute; z-index: 4; left: 58%; top: 2px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
@media (prefers-reduced-motion: no-preference) {
    .fcursor { animation: zeiger-raus 3.2s cubic-bezier(.5, 0, .3, 1) 1s infinite backwards; }
}
@keyframes zeiger-raus {
    0% { transform: translate(-70px, 300px); }
    55% { transform: translate(-10px, 40px); }
    75%, 100% { transform: translate(0, 0); }
}

/* Warenkorb-Erinnerung: drei Schritte */
.fschritte { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.fschritt { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fschritt-nr { font: 700 14px/1.3 var(--schrift-titel); color: var(--tinte); }
.fbild-klein { padding: 40px 12px 12px; border-radius: 18px; }
@media (max-width: 1000px) { .fschritte { grid-template-columns: minmax(0, 1fr); max-width: 480px; } }
.fmail { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(15, 23, 32, .35); font: 13px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1a1a1a; }
.fmail-kopf { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; background: #fafbfc; }
.fmail-kopf b { display: block; font-size: 12.5px; }
.fmail-kopf span { display: block; font-size: 12px; color: #4b5563; }
.fmail-grund { background: #F4F5F7; padding: 14px 12px; }
.fmail-shop { font-size: 16px; font-weight: 700; color: #1F6FEB; padding-bottom: 10px; }
.fmail-karte { background: #fff; border-radius: 10px; padding: 16px; }
.fmail-karte p { margin: 0 0 10px; }
.fmail-titel { font-size: 15px; font-weight: 600; }
.fmail-knopf { display: inline-block; margin: 4px 0 12px; padding: 9px 16px; border-radius: 8px; background: #1F6FEB; color: #fff; font-weight: 600; }
.fmail-klein { font-size: 11.5px; color: #6B7280; margin: 0 !important; }
.fmail-posten { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.fmail-posten .cs-img { width: 36px; height: 36px; border-radius: 6px; }
.fmail-fuss { margin: 12px 0 0; font-size: 10.5px; line-height: 1.55; color: #6B7280; }

/* CI: dasselbe Widget in zwei Marken */
.fci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fci-spalte { min-width: 0; }
.fci-name { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font: 600 12px/1.4 var(--schrift); color: var(--tinte-2); margin-bottom: 8px; }
.fci-name i { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15, 23, 32, .15); }
.fci-shop { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 2px 10px; box-shadow: 0 20px 40px -28px rgba(15, 23, 32, .35); }
.csw-marke.fci-shop { background: #F6F2EC; }
.fci .cs-slider .cs-card { flex-basis: calc(50% - 5px); }
@media (max-width: 520px) { .fci { grid-template-columns: minmax(0, 1fr); } }

/* ---- Bedingungen je Mechanik (Dashboard → Mechaniken) ---- */
.rules-box { margin-top: 16px; border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 12px 14px; background: var(--flaeche-2); }
.rules-box > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--tinte); }
.rules-box[open] > summary { margin-bottom: 10px; }
.check-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-weight: 400; }

/* ---- Shopify-Karte (Dashboard → Einbindung, js/shopify_connect.js) ---- */
#shopify-connect-form { align-items: flex-end; }
#shopify-connect-form .btn { align-self: flex-end; }
.shopify-domain-field { flex: 1 1 260px; max-width: 420px; }

/* ---- Startseite: Provision (Regeln + Beispielrechnung) ---- */
.preis-wert-klein { font-size: 22px !important; margin-top: -6px; }
.provision { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; text-align: left; align-items: start; }
.provision h3 { font-family: var(--schrift-titel); font-size: 22px; margin: 0 0 14px; }
.provision-regeln { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--tinte-2); }
.provision-regeln b { color: var(--tinte); }
.provision-beispiel { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; box-shadow: var(--schatten); }
.provision-beispiel .beispiel-etikett { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 8px; }
.provision-beispiel h4 { margin: 0 0 12px; font-size: 15px; }
.provision-beispiel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.provision-beispiel th, .provision-beispiel td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.provision-beispiel th { color: var(--tinte-3); font-weight: 600; }
.provision-beispiel td.ja { color: var(--gut); font-weight: 700; } .provision-beispiel td.nein { color: var(--tinte-3); }
.provision-beispiel dl { margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; }
.provision-beispiel dl div { display: flex; justify-content: space-between; gap: 12px; }
.provision-beispiel dt { color: var(--tinte-2); } .provision-beispiel dd { margin: 0; text-align: right; font-weight: 600; }
.provision-beispiel dl .summe { border-top: 1px solid var(--linie-stark); padding-top: 8px; font-size: 16px; }
.provision-beispiel p { margin: 12px 0 0; font-size: 12.5px; color: var(--tinte-3); }
@media (max-width: 860px) { .provision { grid-template-columns: 1fr; } }

/* Provision - einfache Fassung (3 Fälle) */
.prov { margin-top: 56px; text-align: left; }
.prov-titel { font-family: var(--schrift-titel); font-size: 28px; text-align: center; margin: 0 0 12px; }
.prov-einfach { max-width: 720px; margin: 0 auto 28px; text-align: center; font-size: 17px; line-height: 1.6; color: var(--tinte-2); }
.prov-einfach b { color: var(--tinte); }
.prov-faelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.prov-fall { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 20px 20px; box-shadow: var(--schatten); }
.prov-fall.gruen { border-color: var(--gut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 14%, transparent), var(--schatten); }
.prov-ampel { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; background: var(--linie); color: var(--tinte-2); margin-bottom: 10px; }
.prov-fall.gruen .prov-ampel { background: var(--gut); color: #fff; }
.prov-fall h4 { margin: 0 0 6px; font-size: 17px; }
.prov-satz { margin: 0 0 14px; font-size: 14px; color: var(--tinte-2); line-height: 1.5; }
.prov-betrag { margin: 0 0 8px; font-family: var(--schrift-titel); font-size: 26px; font-weight: 800; color: var(--tinte); }
.prov-fall.gruen .prov-betrag { color: var(--gut); }
.prov-bsp { margin: 0; font-size: 13.5px; color: var(--tinte-3); line-height: 1.5; }
.prov-bsp b { color: var(--tinte); }
.prov-garantien { margin: 22px auto 0; max-width: 820px; background: var(--flaeche-2, var(--flaeche)); border: 1px dashed var(--linie-stark); border-radius: var(--radius); padding: 18px 22px; }
.prov-garantien h4 { margin: 0 0 8px; font-size: 16px; }
.prov-garantien ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; color: var(--tinte-2); }
.prov-garantien p { margin: 0; font-size: 14.5px; color: var(--tinte-2); }
.prov-details { max-width: 820px; margin: 18px auto 0; }
.prov-details summary { cursor: pointer; font-weight: 600; color: var(--akzent, var(--tinte)); padding: 8px 0; text-align: center; list-style-position: inside; }
.prov-details .provision-beispiel { margin-top: 10px; }
@media (max-width: 860px) { .prov-faelle { grid-template-columns: 1fr; } .prov-titel { font-size: 24px; } }
.prov-woher { max-width: 820px; margin: 22px auto 0; }
.prov-woher h4 { margin: 0 0 8px; font-size: 17px; }
.prov-woher p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--tinte-2); }
.prov-woher p b { color: var(--tinte); }
.prov-gruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
.prov-gruppen div { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; background: var(--flaeche); display: grid; gap: 2px; font-size: 14px; }
.prov-gruppen div:first-child { border-color: var(--akzent); background: var(--akzent-weich); }
.prov-gruppen span { color: var(--tinte-3); font-size: 13px; }
@media (max-width: 560px) { .prov-gruppen { grid-template-columns: 1fr; } }
.prov-gruppen em { font-style: normal; font-weight: 700; font-size: 16px; color: var(--tinte); margin-top: 6px; }
.prov-woher p.prov-ergebnis { text-align: center; font-size: 16px; background: var(--gut-weich); border-radius: var(--radius); padding: 10px 14px; color: var(--tinte); }

/* Dashboard: Kombinationsregeln */
.combo-rules { display: grid; gap: 8px; }
.combo-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border: 1px solid var(--linie, #dfe4ec); border-radius: 10px; background: var(--flaeche, #fff); }
.combo-rule.off { opacity: .55; }
.combo-rule .combo-label { font-size: 13px; font-weight: 600; }
.combo-cond { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.combo-rule select, .combo-rule input:not([type=checkbox]) { width: auto; max-width: 100%; display: inline-block; margin: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--linie-stark, #c9d1dc); border-radius: 8px; background: var(--flaeche, #fff); color: inherit; }
.combo-rule .c-value { min-width: 220px; width: 240px; }
.combo-rule .c-field { width: 130px; }
.combo-rule label.check { margin: 0; }
.combo-rule .c-key { width: 150px; }
.combo-rule .c-mode { font-weight: 600; }
.reco-blocked { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--linie, #dfe4ec); display: grid; gap: 3px; }
@media (max-width: 640px) { .combo-rule .c-value { min-width: 0; width: 100%; } .combo-cond { width: 100%; } }

/* Startseite: Shopsysteme-Vergleich */
.system-tabelle { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; font-size: 14px; text-align: left; }
.system-tabelle th, .system-tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.system-tabelle tr:last-child th, .system-tabelle tr:last-child td { border-bottom: 0; }
.system-tabelle thead th { background: var(--flaeche-2); font-size: 15px; }
.system-tabelle thead th span { display: block; font-weight: 400; font-size: 12px; color: var(--tinte-3); margin-top: 2px; }
.system-tabelle tbody th { font-weight: 600; color: var(--tinte); width: 26%; }
.system-tabelle td { color: var(--tinte-2); }
.system-tabelle td::before { display: inline-block; width: 18px; font-weight: 800; }
.system-tabelle td.ok::before { content: "✓"; color: var(--gut); }
.system-tabelle td.mittel::before { content: "◐"; color: #b7791f; }
.system-tabelle td.nein::before { content: "–"; color: var(--tinte-3); }
.system-notiz { max-width: 820px; margin: 18px auto 0; text-align: center; font-size: 15px; color: var(--tinte-2); }

/* Dashboard: Provisions-Herleitung */
.fee-detail { display: grid; gap: 10px; padding: 6px 0 10px; }
.fee-mech { border: 1px solid var(--linie, #dfe4ec); border-radius: 10px; padding: 12px 14px; background: var(--flaeche, #fff); }
.fee-mech.zaehlt { border-color: var(--gut, #157347); }
.fee-mech-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.fee-mech-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; font-size: 12.5px; color: var(--tinte-3, #667085); }
.fee-mech-werte b { display: block; font-size: 14px; color: var(--tinte, #101828); font-weight: 600; margin-top: 2px; }
.fee-mech-satz { margin: 8px 0 0; font-size: 13px; color: var(--tinte-2, #344054); }
.fee-rechnung { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; max-width: 560px; margin-left: auto; font-size: 14px; padding: 10px 14px; border-top: 1px solid var(--linie-stark, #c9d1dc); }
.fee-rechnung b { text-align: right; }
.fee-rechnung b:last-child, .fee-rechnung span:nth-last-child(2) { font-size: 16px; font-weight: 700; }
@media (max-width: 760px) { .fee-mech-werte { grid-template-columns: 1fr 1fr; } }

/* Dashboard: Verbindungsprüfung */
.conn-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.conn-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linie, #dfe4ec); border-radius: 10px; }
.conn-steps li div { display: grid; gap: 2px; font-size: 14px; }
.conn-steps li div span { font-size: 13px; color: var(--tinte-3, #667085); }
.conn-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--flaeche-2, #eef2f7); color: var(--tinte-3, #667085); }
.conn-ok .conn-icon { background: var(--gut, #157347); color: #fff; }
.conn-todo .conn-icon { background: #b42318; color: #fff; }
.conn-warn .conn-icon { background: #b7791f; color: #fff; }
.conn-todo { border-color: rgba(180, 35, 24, .35) !important; }
.conn-warn { border-color: rgba(183, 121, 31, .4) !important; }
#connection-card.conn-off { border: 1px solid rgba(180, 35, 24, .35); }

/* Dashboard: Sensitivität Exit-Intent */
.sens { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--linie, #dfe4ec); border-radius: 10px; background: var(--flaeche-2, #f6f8fb); }
.sens input[type=range] { width: 100%; accent-color: var(--akzent, #1a66db); margin: 4px 0 0; }
.sens-scale { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 12px; color: var(--tinte-3, #667085); }
.sens-scale span:nth-child(2) { text-align: center; transform: translateX(-17%); }
.sens-scale span:nth-child(3) { text-align: center; transform: translateX(17%); }
.sens-scale span:last-child { text-align: right; }
.sens-rate { margin: 2px 0 0; }
#sens-advanced { margin-top: 6px; }
.holdout-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.holdout-presets .btn.active { background: var(--akzent, #1a66db); color: #fff; border-color: var(--akzent, #1a66db); }

/* Dashboard: Vorschau je Mechanik */
.modal-box.preview-box { width: min(980px, 100%); max-height: 92vh; }
.preview-devices { display: inline-flex; gap: 4px; flex-shrink: 0; }
.preview-devices .btn.active { background: var(--akzent, #1a66db); color: #fff; border-color: var(--akzent, #1a66db); }
.preview-frame-wrap { border: 1px solid var(--linie, #dfe4ec); border-radius: 12px; overflow: hidden; background: #fff; margin: 0 auto; transition: width .2s; width: 100%; }
.preview-frame-wrap.mobile { width: 390px; max-width: 100%; }
#preview-frame { display: block; width: 100%; height: 560px; border: 0; }
.conn-steps li .btn { width: auto; justify-self: start; display: inline-flex; }
.conn-steps li > div > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conn-steps li label.check { display: flex; gap: 8px; align-items: flex-start; }
.stripe-price { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linie, #dfe4ec); }
.stripe-price.ok { border-color: var(--gut, #157347); background: var(--gut-weich, rgba(21,115,71,.08)); }
.stripe-price.bad { border-color: #b42318; background: rgba(180,35,24,.06); }

/* ---------------------------------------------------------------------------------------------
 * App-Layout mit Seitenleiste (Dashboard + Admin) - wie Speditionary: Bereiche mit Symbolen links,
 * Inhalt rechts. Auf dem Handy wird die Leiste zur waagerecht scrollbaren Reihe über dem Inhalt.
 * ------------------------------------------------------------------------------------------- */
body.app-authed .wrap { max-width: 1440px; }
.app-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; }
.seitenleiste { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten); }
.seitenleiste .nav-gruppe { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-3); padding: 12px 10px 6px; }
.seitenleiste .nav-gruppe:first-child { padding-top: 4px; }
.seitenleiste button, .seitenleiste .nav-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--tinte-2); font: 500 14.5px/1.2 var(--schrift); text-align: left; cursor: pointer; text-decoration: none; position: relative; }
.seitenleiste button:hover, .seitenleiste .nav-link:hover { background: var(--flaeche-2); color: var(--tinte); }
.seitenleiste button.active { background: var(--akzent-weich); color: var(--akzent); font-weight: 600; }
.seitenleiste .nav-icon { width: 19px; height: 19px; flex-shrink: 0; }
.seitenleiste .nav-zahl { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #b7791f; color: #fff; font: 700 11px/20px var(--schrift); font-style: normal; text-align: center; }
.app-inhalt { min-width: 0; }
.vertretung-band { background: #b42318; color: #fff; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.vertretung-band button { background: #fff; color: #b42318; border: 0; border-radius: 8px; padding: 7px 12px; font-weight: 700; cursor: pointer; }
@media (max-width: 960px) {
    .app-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .seitenleiste { position: static; flex-direction: row; overflow-x: auto; padding: 6px; border-radius: 12px; scrollbar-width: none; }
    .seitenleiste::-webkit-scrollbar { display: none; }
    .seitenleiste .nav-gruppe { display: none; }
    .seitenleiste button, .seitenleiste .nav-link { width: auto; flex-shrink: 0; white-space: nowrap; padding: 8px 11px; }
}

/* Lade-Zustand: Inhalt verschwommen, Loader mittig darüber */
.is-busy { position: relative; min-height: 120px; }
.is-busy > * { filter: blur(3px); opacity: .55; pointer-events: none; transition: filter .2s, opacity .2s; }
.is-busy::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -30px 0 0 -17px; border-radius: 50%; border: 3px solid var(--akzent-weich); border-top-color: var(--akzent); animation: busyDreh .8s linear infinite; z-index: 3; }
.is-busy::after { content: attr(data-busy-label); position: absolute; left: 0; right: 0; top: 50%; margin-top: 14px; text-align: center; font-size: 13px; font-weight: 600; color: var(--tinte-2); z-index: 3; }
@keyframes busyDreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-busy::before { animation-duration: 2.4s; } }

/* Leeres Diagramm: Raster + flache Platzhalter statt "Noch keine Daten"-Text */
.chart .grid { stroke: var(--tinte-3); stroke-opacity: .3; stroke-width: 1.6; stroke-dasharray: 5 6; }
.chart .bar-leer { fill: var(--diagramm-balken); opacity: .6; }
.chart .leer-titel { fill: var(--tinte-2); font: 600 24px var(--schrift); }
.chart .leer-text { fill: var(--tinte-3); font: 16px var(--schrift); }
.result-leer .uplift, .result-leer .mini td:not(:first-child) { color: var(--tinte-3); }

/* Admin: Ergebnisse je Kunde - beschriftete Werte statt "2 · 0 · 0 €" */
.ergebnis-tabelle td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.ergebnis-tabelle .zeile-klein { font-size: 12.5px; line-height: 1.5; margin-top: 3px; white-space: nowrap; }
.kv-mini { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: 13px; line-height: 1.45; }
.kv-mini dt { color: var(--tinte-3); }
.kv-mini dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--tinte); }
.punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--tinte-3); }
.punkt.gut { background: var(--gut); }
.punkt.schlecht { background: var(--red, #c0392b); }

/* Hinweis über der Artikelliste (z. B. Artikel ohne Bild) */
.hinweis-box { margin: 10px 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--warn-weich); color: var(--tinte); font-size: 13.5px; line-height: 1.5; }
.hinweis-box a { font-weight: 600; margin-left: 4px; }

/* Auswahlfeld (Kombinationsregeln): eigene Liste statt Browser-<datalist> */
.auswahl { position: relative; display: inline-flex; max-width: 100%; }
.auswahl.hidden { display: none; }
.combo-rule .auswahl:not(.ohne-liste) input { padding-right: 30px; }
.auswahl-pfeil { position: absolute; right: 4px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; color: var(--tinte-3); }
.auswahl-pfeil::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -6px 0 0 -4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.auswahl.offen .auswahl-pfeil::before { transform: rotate(-135deg); margin-top: -2px; }
.auswahl-pfeil:hover { background: var(--flaeche-3); color: var(--tinte); }
.auswahl-liste { position: absolute; left: 0; top: calc(100% + 4px); z-index: 50; min-width: 100%; width: max-content; max-width: min(420px, 90vw); max-height: 280px; overflow-y: auto; padding: 4px; background: var(--flaeche, #fff); border: 1px solid var(--linie-stark, #c9d1dc); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
.auswahl-liste.hidden { display: none; }
.auswahl-opt { padding: 7px 12px; border-radius: 7px; font-size: 13px; line-height: 1.35; cursor: pointer; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auswahl-opt.aktiv { background: var(--akzent-weich); }
.auswahl-opt.gewaehlt { font-weight: 600; }
.auswahl-pfad { color: var(--tinte-3); font-size: 12px; }
.auswahl-leer { padding: 8px 12px; font-size: 12.5px; color: var(--tinte-3); white-space: normal; }

/* Merkmal-Auswahl (Kollektion): Haken in mehreren Spalten */
.merkmal-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 14px; margin: 6px 0 2px; }
.merkmal-liste label.check { margin: 0; }