/* Flanier – ein Stylesheet für öffentliche Seiten, Portal und Adminbereich.
 * Der Showroom selbst hat sein eigenes (viewer.css).
 *
 * AUFBAU
 *   0. Schriften (selbst gehostet)
 *   1. Farben/Maße als Variablen (:root). Das Portal folgt hell/dunkel dem System.
 *   2. Grundlagen, Typografie, Fokus, Sprunglink
 *   3. Portal: Kopf, Navigation, Fuß, Knöpfe, Formulare, Karten, Tabellen, Statistik …
 *   4. Anmelden/Registrieren
 *   5. Öffentliche Seiten (body.mk): hell, luftig - in JEDEM Systemmodus. .mk setzt dieselben
 *      Variablen fest auf helle Werte, deshalb funktionieren Knöpfe, Formulare und Kennzahlen
 *      aus dem Portal dort unverändert mit.
 *
 * Klassennamen des Portals NICHT umbenennen ohne grep über alle *.php – die Portalseiten
 * (dashboard, showroom, konto, admin_*) werden parallel gepflegt und verlassen sich darauf. */

/* ---------------------------------------------------------------------------------------
 * 0. Schriften - selbst gehostet unter /fonts, weil die CSP nur 'self' erlaubt und kein
 *    Besucher an Google & Co. gemeldet werden soll.
 *    Inter Variable 5.3.0 (Fließtext, Oberfläche) und Plus Jakarta Sans Variable 5.3.0
 *    (Überschriften), beide aus den Fontsource-Paketen @fontsource-variable/*, Lizenz SIL Open
 *    Font License 1.1 (fonts/LICENSE-*.txt). Je zwei Teilmengen: latin (enthält ä ö ü ß €) und
 *    latin-ext (nur bei Bedarf geladen, unicode-range). font-display: swap - Text ist sofort
 *    lesbar, die Schrift tauscht nach dem Laden. Die latin-Dateien lädt kopf.php per preload vor.
 * ------------------------------------------------------------------------------------- */
@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;
}

: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, .84);
    --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;
    color-scheme: light;
    --gold: #f5b31b;            /* Signalgelb - nur als kleiner Hinweis ("Neu"), nie als Fläche */
    --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;
}

/* Dunkelmodus des Portals = dieselbe Navy-Palette wie die dunklen Abschnitte der Startseite.
   Die Werte stehen bewusst zweimal (hier und bei .dunkel weiter unten): CSS kann einen Block
   nicht zugleich an eine Media-Query und an eine Klasse haengen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tinte: #f1f5fb; --tinte-2: #c9d2dc; --tinte-3: #a2adbc;     /* --tinte-3 auf #11161d 7,7:1 */
        --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 #11161d 6,6:1 */
        --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, .82);
        --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;
    }
}
/* Im Portal per Profilmenue erzwungen (js/farbschema.js setzt data-theme) - dieselben Werte wie oben. */
:root[data-theme="dark"] {
    --tinte: #f1f5fb; --tinte-2: #c9d2dc; --tinte-3: #a2adbc;     /* --tinte-3 auf #11161d 7,7:1 */
    --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 #11161d 6,6:1 */
    --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, .82);
    --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;
}


/* Dunkle Abschnitte der oeffentlichen Seiten (Kopf, Buehne, Seitenkopf, Fuss, .dunkel) und die
   Bildhaelfte der Anmeldeseiten - unabhaengig vom Systemmodus. */
.dunkel, .auth-bild, .mkopf, .mfuss, .buehne, .plattformen, .seitenkopf {
    --tinte: #f1f5fb; --tinte-2: #c9d2dc; --tinte-3: #a2adbc;     /* --tinte-3 auf #11161d 7,7:1 */
    --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 #11161d 6,6:1 */
    --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, .82);
    --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; hyphens: auto; }
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; }
code, pre, kbd { font: 13px/1.55 var(--schrift-mono); }
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); }
.gedaempft { color: var(--tinte-3); }
.klein { font-size: 13px; }
.inline { display: inline; }
.versteckt { display: none !important; }
.nur-lesbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fokus nur bei Tastaturbedienung sichtbar - aber dann deutlich. */
: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: erst bei Tastaturfokus sichtbar (WCAG 2.4.1) */
/* Nur fuer Screenreader und Gliederung (z. B. eine H2 vor den Preiskarten) - sichtbar bleibt nichts. */
.ohne-umbruch { white-space: nowrap; }
.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; }

.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; }
#inhalt:focus { outline: none; }

.seite { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 32px var(--rand) 72px; }   /* width: auto-Ränder heben in der Flex-Spalte das Strecken auf */
.seite-schmal { max-width: 460px; }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.kopfzeile h1 { margin-bottom: .2em; }
.kopfzeile p { margin: 0; color: var(--tinte-2); }

/* Marke */
.marke { display: inline-flex; align-items: center; gap: 9px; font: 800 21px/1 var(--schrift-titel); color: var(--tinte); letter-spacing: -.045em; flex-shrink: 0; }
.marke:hover { text-decoration: none; }
.marke-zeichen { display: block; width: 30px; height: 30px; border-radius: 8px; }
.marke-zeichen .mz-grund { fill: var(--marke-grund); }
.marke-zeichen .mz-f { fill: var(--marke-zeichen); }
.marke-zeichen .mz-punkt { fill: var(--marke-akzent); }
.marke-name { padding-right: .04em; }
/* i-Punkt als Wegpunkt: Lage und Größe in em, damit er bei jeder Schriftgröße sitzt */
.marke-i { position: relative; display: inline-block; }
.marke-i::after { content: ""; position: absolute; left: 50%; top: .14em; width: .19em; height: .19em; margin-left: -.095em; border-radius: 50%; background: var(--marke-akzent); }
/* Alter Markenpunkt - falls eine Seite ihn noch verwendet */
.marke-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }

/* ---------------------------------------------------------------------------------------
 * 3. Portal: Kopf + Navigation
 * ------------------------------------------------------------------------------------- */
.kopf {
    background: var(--kopf-grund); border-bottom: 1px solid var(--linie);
    position: sticky; top: 0; z-index: 30;
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
}
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: 64px; display: flex; align-items: center; gap: 28px; position: relative; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav a, .nav .link { color: var(--tinte-2); padding: 8px 12px; border-radius: 9px; font-weight: 500; font-size: 14.5px; }
.nav a:hover, .nav .link:hover { background: var(--flaeche-2); color: var(--tinte); text-decoration: none; }
.nav a.aktiv { background: var(--flaeche-2); color: var(--tinte); font-weight: 600; box-shadow: inset 0 0 0 1px var(--linie); }
.nav a { white-space: nowrap; }
.kopf-etikett { margin-left: -16px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent, #2450d8); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px; padding: 3px 9px; }
/* Profilmenue: <details> statt Skript - Konto, Tarif, Abmelden an einer Stelle */
.profil { margin-left: auto; position: relative; }
.profil summary { list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--linie); color: var(--tinte-2); font-size: 13.5px; }
.profil summary::-webkit-details-marker { display: none; }
.profil summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.profil summary:hover, .profil[open] summary, .profil summary.aktiv { background: var(--flaeche-2); color: var(--tinte); }
.profil-bild { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: var(--auf-akzent); font-weight: 700; font-size: 13px; }
.profil-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-menue { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; 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: 50; }
.profil-kopf { padding: 10px 12px 12px; border-bottom: 1px solid var(--linie); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--tinte-3); overflow: hidden; }
.profil-kopf strong { color: var(--tinte); font-size: 14px; }
.profil-kopf span { overflow: hidden; text-overflow: ellipsis; }
.nav .profil-menue a, .profil-abmelden .link { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; }
.profil-abmelden { border-top: 1px solid var(--linie); margin-top: 6px; padding-top: 6px; }
@media (max-width: 1100px) { .profil-name { display: none; } }
.menue-knopf {
    display: none; margin-left: auto; width: 42px; height: 42px; padding: 0; position: relative;
    background: transparent; border: 1px solid var(--linie); 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[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

@media (max-width: 860px) {
    .menue-knopf { display: block; }
    .nav {
        display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch;
        background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: 10px var(--rand) 18px; box-shadow: var(--schatten-hoch);
    }
    .nav.offen { display: flex; }
    .nav a, .nav .link { padding: 12px; font-size: 16px; }
    .profil { margin: 8px 0 0; border-top: 1px solid var(--linie); padding-top: 8px; }
    .profil summary { border: 0; padding: 8px 12px; }
    .profil-name { display: block; max-width: none; }
    .profil-menue { position: static; box-shadow: none; border: 0; padding: 0 0 0 8px; min-width: 0; }
    .profil-kopf { display: none; }
}
.band-vertretung { background: var(--warn); color: #fff; padding: 9px var(--rand); text-align: center; font-size: 14px; }
.band-vertretung .btn { margin-left: 12px; }

.fuss { border-top: 1px solid var(--linie); color: var(--tinte-3); font-size: 13px; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 22px 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; }

/* Knöpfe
 * Primär = tiefe Tinte mit weißer Schrift (im Dunkelmodus umgekehrt: hell auf dunkel), feiner
 * Lichtrand oben, 1px-Kante, ruhiges Anheben beim Überfahren - kein Farbverlauf, kein Glühen.
 * Die Markenfarbe taucht nur noch als Detail auf: Fokusring und der Pfeil an .btn-akzent.
 * Hell: Navy #0f1720 mit Weiß (≈ 17:1). Dunkel: Weiß mit Navy-Schrift (≈ 17:1). Die Werte stehen
 * als --btn-* in den Farbsätzen oben. */
.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); box-shadow: var(--btn-licht), var(--btn-schatten); }
.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; }
form[data-warten] .btn:disabled { cursor: progress; }

/* Sekundär: weiß mit Haarlinie und weichem Schatten */
.btn-zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--linie-stark); box-shadow: 0 1px 2px rgba(15, 23, 32, .06); }
.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); }
/* Gefahr: Rot bleibt, aber flach und klar statt gesättigt */
.btn-gefahr { 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-gefahr:hover { background: color-mix(in srgb, var(--fehler) 88%, #000); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-gefahr { background: #c0261b; } }
:root[data-theme="dark"] .btn-gefahr { background: #c0261b; }
/* Ruhig: ohne Fläche, für Nebenaktionen */
.btn-geist { background: transparent; color: var(--tinte); border-color: transparent; box-shadow: none; }
.btn-geist:hover { background: var(--flaeche-2); color: var(--tinte); box-shadow: none; transform: none; }
.btn-klein { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn-gross { padding: 13px 22px; font-size: 15.5px; border-radius: 12px; }
/* Haupt-Aufruf: derselbe Primärknopf, das Akzent-Detail ist ein kleiner Pfeil, der beim
   Überfahren nach rechts rückt. Ehemals Verlaufsknopf - Klassenname bleibt für das Markup. */
.btn-akzent::after, .btn-leucht::after { content: "→"; font-weight: 500; transition: transform .2s; }
.btn-akzent:hover::after, .btn-leucht:hover::after { transform: translateX(3px); }
/* Auf dunklen Flächen ist der Haupt-Aufruf elektrisch blau (Weiß darauf 5,3:1), auf hellen Navy. */
:is(.dunkel, .buehne, .seitenkopf, .mkopf) :is(.btn-akzent, .btn-leucht) { 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); }
:is(.dunkel, .buehne, .seitenkopf, .mkopf) :is(.btn-akzent, .btn-leucht):hover { background: #2a74e6; border-color: #2a74e6; color: #fff; }
.btn-hell { background: #fff; color: #0f1720; border-color: rgba(15, 23, 32, .12); }
.btn-hell:hover { background: #fff; color: #0f1720; }
.link { background: none; border: 0; padding: 0; color: var(--akzent); font: inherit; cursor: pointer; }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Formulare */
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.feld label, .label { font-weight: 600; font-size: 13px; color: var(--tinte-2); }
.feld .hinweis { font-size: 12.5px; color: var(--tinte-3); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], input[type=tel], select, textarea {
    width: 100%; max-width: 100%; padding: 11px 13px; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--tinte); font: 15px/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: .8; }
textarea { min-height: 90px; resize: vertical; }
input[type=color] { width: 56px; height: 42px; padding: 3px; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); cursor: pointer; }
input[type=file] {
    max-width: 100%; padding: 8px; border: 1px dashed var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--flaeche-2); color: var(--tinte-2); font: 14px var(--schrift); cursor: pointer;
}
input[type=file]::file-selector-button {
    margin-right: 12px; padding: 7px 12px; border: 1px solid var(--linie-stark); border-radius: 8px;
    background: var(--flaeche); color: var(--tinte); font: 600 13px var(--schrift); cursor: pointer;
}
input[type=file]:hover::file-selector-button { background: var(--flaeche-3); }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.check input { margin-top: 4px; accent-color: var(--akzent); width: 16px; height: 16px; flex-shrink: 0; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .raster-2, .raster-3 { grid-template-columns: minmax(0, 1fr); } }

/* Karten */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; box-shadow: var(--schatten); margin-bottom: 20px; min-width: 0; }
.karte > h2:first-child { margin-top: 0; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.karte-kopf h2 { margin: 0; }
@media (max-width: 560px) { .karte { padding: 18px; } }

.meldungen { max-width: var(--breite); margin: 16px auto 0; padding: 0 var(--rand); }
.meldung { padding: 12px 16px; border-radius: 12px; margin-bottom: 10px; font-weight: 500; border: 1px solid transparent; }
.meldung-ok { background: var(--gut-weich); color: var(--gut); border-color: color-mix(in srgb, var(--gut) 22%, transparent); }
.meldung-fehler { background: var(--fehler-weich); color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 22%, transparent); }
.meldung-info { background: var(--akzent-weich); color: var(--akzent-dunkel); border-color: color-mix(in srgb, var(--akzent) 22%, transparent); }

.etikett { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--flaeche-2); color: var(--tinte-2); white-space: nowrap; }
.etikett-live, .etikett-ok, .etikett-aktiv { background: var(--gut-weich); color: var(--gut); }
.etikett-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.etikett-entwurf, .etikett-nie, .etikett-laeuft { background: var(--warn-weich); color: var(--warn); }
.etikett-pausiert, .etikett-fehler, .etikett-gesperrt { background: var(--fehler-weich); color: var(--fehler); }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 14px; margin-bottom: 22px; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--schatten); min-width: 0; }
.kennzahl-wert { font: 600 27px/1.1 var(--schrift); letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kennzahl-name { font-size: 13px; color: var(--tinte-3); margin-top: 6px; }
.kennzahl-unter { font-size: 12px; color: var(--tinte-3); }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-3); font-weight: 600; }
tbody tr:hover td { background: color-mix(in srgb, var(--flaeche-2) 55%, transparent); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
/* Schmale Bildschirme: Tabellen ohne .tabelle-huelle (z. B. in admin.php direkt in .karte) passen
   sonst nicht in 360-390 px - weniger Innenabstand statt horizontalem Scrollen der ganzen Seite. */
@media (max-width: 560px) { th, td { padding: 9px 6px; } th { letter-spacing: .02em; font-size: 11px; } .karte > table, .karte > table td { overflow-wrap: anywhere; } }

/* Showroom-Karten im Dashboard */
.showroom-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.showroom-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.showroom-karte:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); }
.showroom-karte-bild { height: auto; aspect-ratio: 16 / 9; position: relative; display: flex; align-items: flex-end; padding: 16px; color: #fff; overflow: hidden; }
.showroom-karte-bild::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -40%; height: 80%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 34px); transform: perspective(240px) rotateX(62deg); transform-origin: top; opacity: .7; }
.showroom-karte-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.42)); }
.showroom-karte-bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showroom-karte-bild.mit-bild::before { display: none; }   /* Gitter nur als Platzhalter ohne Bild */
.showroom-karte-bild::after { z-index: 0; }
/* Viewer fuer das Vorschaubild: unsichtbar, aber im sichtbaren Bereich - versteckte iframes
   drosseln Browser, dann kaeme nie ein Bild zustande. 1280x720 intern, auf Kachelgroesse skaliert. */
.vorschau-rahmen { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0; opacity: 0; pointer-events: none; transform-origin: 0 0; }
.showroom-karte-bild strong { position: relative; z-index: 1; font: 700 19px/1.2 var(--schrift-titel); letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.showroom-karte-bild .etikett { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(255,255,255,.92); }
.showroom-karte-bild .etikett-live { color: #1f6b40; }
.showroom-karte-bild .etikett-entwurf { color: #8a5800; }
.showroom-karte-bild .etikett-pausiert { color: #a3241a; }
.showroom-karte-inhalt { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.showroom-karte-zahlen { display: flex; gap: 18px; font-size: 13px; color: var(--tinte-2); flex-wrap: wrap; }
.showroom-karte-zahlen b { display: block; font-size: 19px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.leer { text-align: center; padding: 56px 20px; }
.leer p { color: var(--tinte-2); max-width: 480px; margin: 0 auto 20px; }

/* Reiter */
.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 a { padding: 11px 14px; color: var(--tinte-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--tinte); text-decoration: none; }
.tabs a.aktiv { color: var(--tinte); border-color: var(--tinte); font-weight: 600; }

/* Vorlagen-Auswahl */
.vorlagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 720px) { .vorlagen { grid-template-columns: minmax(0, 1fr); } }
.vorlage { position: relative; border: 2px solid var(--linie); border-radius: 14px; padding: 0; overflow: hidden; cursor: pointer; background: var(--flaeche); transition: border-color .15s, box-shadow .15s; }
.vorlage:hover { border-color: var(--linie-stark); }
.vorlage input { position: absolute; opacity: 0; }
.vorlage:has(input:checked) { border-color: var(--tinte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinte) 10%, transparent); }
.vorlage:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.vorlage-bild { height: 96px; }
.vorlage-halle { background: linear-gradient(180deg, #e9e7e3 0 55%, #c9c6c0 55%); }
.vorlage-galerie { background: linear-gradient(180deg, #fbfbfa 0 60%, #c79a6b 60%); }
.vorlage-boutique { background: linear-gradient(180deg, #3b2a20 0 55%, #6b4630 55%); }
.vorlage-text { padding: 10px 12px 12px; font-size: 13px; color: var(--tinte-2); }
.vorlage-text strong { display: block; color: var(--tinte); font-size: 14px; }

.vorschau-rahmen { width: 100%; aspect-ratio: 16 / 9; min-height: 360px; border: 0; border-radius: 14px; background: var(--flaeche-2); display: block; }
@media (max-width: 560px) { .vorschau-rahmen { min-height: 300px; aspect-ratio: 3 / 4; } }

/* Fotos (Design-Reiter) */
.foto-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; margin-bottom: 16px; }
.foto { margin: 0; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 14px; padding: 8px; min-width: 0; }
.foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; background: var(--flaeche-3); }
.foto figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; font-size: 13px; color: var(--tinte-2); }
.farbfeld {
    width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer; flex-shrink: 0;
    border: 2px solid var(--linie-stark); box-shadow: inset 0 0 0 2px #fff; transition: transform .12s;
}
.farbfeld:hover { transform: scale(1.12); }
.farbfeld:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 50%; }

/* Tarifkarten (abo.php) nutzen .vorlage ohne .vorlage-bild: dann braucht der Text mehr Luft
   und die ausgewählte Karte einen deutlicheren Zustand, weil kein Bild sie unterscheidet. */
.vorlage:not(:has(.vorlage-bild)) { padding: 4px; }
.vorlage:not(:has(.vorlage-bild)) .vorlage-text { padding: 16px 16px 18px; }
.vorlage:not(:has(.vorlage-bild)):has(input:checked) { background: var(--flaeche); }
.vorlage:not(:has(.vorlage-bild)):has(input:checked)::after {
    content: "✓"; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; background: var(--btn-grund); color: var(--btn-text); font-size: 13px; font-weight: 700;
}

/* Showroom-Erstellung im Hintergrund (erstellung.php) */
.erstellung { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 36px); }
.erstellung::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; pointer-events: none; background: radial-gradient(60% 100% at 50% 0%, var(--akzent-weich), transparent 70%); }
.erstellung > * { position: relative; }
.fortschritt { height: 12px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--linie); overflow: hidden; margin: 22px 0 10px; }
.fortschritt-balken {
    height: 100%; border-radius: inherit; transition: width .6s cubic-bezier(.2, .7, .2, 1);
    background: linear-gradient(90deg, var(--akzent), color-mix(in srgb, var(--akzent) 45%, #9cc8ff));
    position: relative; overflow: hidden;
}
.fortschritt-balken::after {   /* Laufende Streifen: zeigen "es passiert etwas", auch wenn die Zahl kurz steht */
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 20px);
    background-size: 28px 28px; animation: fortschritt-streifen .9s linear infinite;
}
.ist-fertig .fortschritt-balken::after { display: none; }
@keyframes fortschritt-streifen { to { background-position: 28px 0; } }
.fortschritt-schritt { font-size: 14px; color: var(--tinte-2); margin: 0 0 18px; }
.fortschritt-liste { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.fortschritt-liste li { position: relative; padding-left: 30px; color: var(--tinte-3); font-size: 14.5px; }
.fortschritt-liste li::before {
    content: ""; position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--linie-stark); background: var(--flaeche);
}
.fortschritt-liste li.laeuft { color: var(--tinte); font-weight: 600; }
.fortschritt-liste li.laeuft::before { border-color: var(--akzent); background: var(--akzent); box-shadow: 0 0 0 0 var(--akzent-weich); animation: punkt-puls 1.4s ease-out infinite; }
@keyframes punkt-puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.fortschritt-liste li.erledigt { color: var(--tinte); }
.fortschritt-liste li.erledigt::before {
    content: "✓"; border: 0; width: 18px; height: 18px; left: 2px; top: 2px; display: grid; place-items: center;
    background: var(--gut-weich); color: var(--gut); font-size: 11px; font-weight: 800; line-height: 1;
}
.erstellung.ist-fertig { border-color: color-mix(in srgb, var(--gut) 40%, var(--linie)); }
.erstellung.ist-fertig::before { background: radial-gradient(60% 100% at 50% 0%, var(--gut-weich), transparent 70%); }
.erstellung.ist-fertig .fortschritt-balken { background: linear-gradient(90deg, var(--gut), color-mix(in srgb, var(--gut) 60%, #a7f0c8)); }
.erstellung.ist-fertig h1::after, .erstellung.ist-fertig h2::after { content: " ✓"; color: var(--gut); }

/* Code + Kopieren */
.code { position: relative; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; padding-right: 96px; overflow-x: auto; white-space: pre; margin: 0 0 12px; font: 13px/1.55 var(--schrift-mono); }
.code-kopieren { position: absolute; top: 8px; right: 8px; }

/* Produkte */
.produkt-zeile img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; background: var(--flaeche-2); display: block; }
.produkt-titel { font-weight: 500; max-width: 380px; }
.produkt-zeile.ausgeblendet { opacity: .5; }
.bereich-zeile { display: grid; grid-template-columns: 40px minmax(140px, 1fr) minmax(200px, 2fr) auto; gap: 10px; align-items: center; margin-bottom: 10px; }
@media (max-width: 720px) { .bereich-zeile { grid-template-columns: minmax(0, 1fr); } }
.bereich-optionen { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: -4px; }
.bereich-optionen label { display: flex; align-items: center; gap: 8px; color: var(--tinte-2); }
.bereich-optionen select { width: auto; min-height: 34px; padding: 4px 30px 4px 10px; font-size: 13px; }
@media (max-width: 720px) { .bereich-optionen { grid-column: 1; } }
.filter-gruppen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 4px; }
.bereich-nr { width: 32px; height: 32px; border-radius: 50%; background: var(--akzent-weich); color: var(--akzent); display: grid; place-items: center; font-weight: 700; }

/* Balkendiagramm (Statistik) – reines CSS, ohne Bibliothek */
.diagramm { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding-top: 10px; border-bottom: 1px solid var(--linie); }
.diagramm-balken { flex: 1; min-width: 3px; background: linear-gradient(180deg, var(--akzent), color-mix(in srgb, var(--akzent) 65%, #9cc8ff)); border-radius: 4px 4px 0 0; position: relative; opacity: .85; transition: opacity .15s; }
.diagramm-balken:hover { opacity: 1; }
.diagramm-balken span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--tinte); color: var(--papier); font-size: 12px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; display: none; margin-bottom: 4px; z-index: 2; }
.diagramm-balken:hover span, .diagramm-balken:focus span { display: block; }
.diagramm-achse { display: flex; justify-content: space-between; font-size: 12px; color: var(--tinte-3); margin-top: 6px; }
.trichter { display: grid; gap: 10px; }
.trichter-stufe { display: grid; grid-template-columns: 180px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: 14px; }
.trichter-balken { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, #9cc8ff)); }
.trichter-spur { background: var(--flaeche-2); border-radius: 6px; }
@media (max-width: 600px) { .trichter-stufe { grid-template-columns: minmax(0, 1fr) 60px; } .trichter-spur { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------------------------------
 * 4. Anmelden / Registrieren / Passwort
 * ------------------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); flex: 1; }
.auth-bild {
    /* Immer dunkel (Navy, Farbsatz .dunkel) - dieselbe Bühne wie oben auf der Startseite. */
    position: relative; overflow: hidden; isolation: isolate;
    background: radial-gradient(70% 55% at 80% 0%, rgba(45, 140, 255, .22), 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;
}
.auth-bild::after {   /* Fluchtende Bodenfläche - dasselbe Motiv wie auf der Startseite */
    content: ""; position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; 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: 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, 40px)/1.12 var(--schrift-titel); max-width: 460px; letter-spacing: -.03em; color: #fff; }
.auth-bild p { color: var(--tinte-2); max-width: 440px; font-size: 16px; }
.auth-bild-vitrine { max-width: 460px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(201, 210, 220, .18); background: #1b242f; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .8), 0 0 80px -30px rgba(45, 140, 255, .45); }
.auth-bild-vitrine img { display: block; width: 100%; }
.auth-punkte { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; color: var(--tinte-2); font-size: 15px; }
.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-form { display: flex; align-items: center; justify-content: center; padding: 40px var(--rand); }
.auth-form > div { width: 100%; max-width: 420px; }
.auth-form h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: .25em; }
.auth-mobil-marke { display: none; margin-bottom: 28px; }
.auth-fuss { margin-top: 32px; font-size: 13px; color: var(--tinte-3); display: flex; gap: 14px; flex-wrap: wrap; }
.auth-fuss a { color: var(--tinte-3); }
.auth .btn-gross { width: 100%; }
@media (max-width: 900px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-bild { display: none; }
    .auth-mobil-marke { display: inline-flex; }
}

/* ---------------------------------------------------------------------------------------
 * 5. Öffentliche Seiten (body.mk)
 *
 * Wechsel aus DUNKLEN Abschnitten (.dunkel: Navy/Schiefer, weiche elektrisch-blaue Lichter,
 * Perspektivraster, weiße Schrift) und HELLEN Abschnitten dazwischen (kühles Weiß, Navy-Schrift).
 * Hell gilt für .mk unabhängig vom Systemmodus; .dunkel setzt den dunklen Farbsatz lokal.
 * Weil alle Bausteine nur Variablen benutzen, passen Karten, Knöpfe und Kennzahlen in beiden.
 * Akzent: elektrisches Blau. Signalgelb nur als winziger Hinweis (.pille b).
 * ------------------------------------------------------------------------------------- */
.mk {
    --tinte: #0f1720; --tinte-2: #3b4757; --tinte-3: #5b6878;
    --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-akzent: #ffffff;
    --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);
    --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%);
    --raster: rgba(15, 23, 32, .08);
    color-scheme: light;
    background: var(--papier); color: var(--tinte);
    font-size: 16px; overflow-x: clip;
}
/* .dunkel bekommt seinen Farbsatz oben (zusammen mit dem Dunkelmodus) - hier nur, was die
   Bildwelt der Startseite zusätzlich braucht. */
.mk :is(.dunkel, .buehne, .plattformen, .seitenkopf, .mfuss, .mkopf, .auth-bild) { --verlauf-text: linear-gradient(100deg, #8cc4ff 0%, #4d9dff 50%, #2d8cff 100%); --raster: rgba(140, 180, 230, .13); --glas: rgba(27, 36, 47, .72); }
.mk h1, .mk h2 { font-family: var(--schrift-titel); font-weight: 700; letter-spacing: -.03em; }
:is(.dunkel, .buehne, .seitenkopf) :is(h1, h2, h3) { color: #fff; }
.mk .btn { padding: 11px 18px; font-size: 15px; }
.mk .btn-gross { padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.verlauf-text { background: var(--verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.dunkel, .buehne, .seitenkopf) a:not(.btn):not(.marke) { color: var(--akzent); }

/* Kopf der öffentlichen Seiten: dunkle Glasleiste - liegt über der dunklen Bühne und dem
   dunklen Seitenkopf jeder Unterseite. */
.mkopf { position: sticky; top: 0; z-index: 40; background: rgba(17, 22, 29, .97);   /* fast deckend: hinter dem Kopf liegt oben der helle body-Grund, nicht die Bühne */ 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: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: 68px; display: flex; align-items: center; gap: 32px; position: relative; }
.mnav { display: flex; align-items: center; flex: 1; gap: 24px; min-width: 0; }
.mnav-links { display: flex; gap: 2px; margin: 0 auto; }
.mnav-links a, .mnav-anmelden { color: var(--tinte-2); padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; transition: color .15s, background-color .15s; }
.mkopf a.mnav-anmelden { color: var(--tinte-2); }
.mnav-links a:hover, .mnav-anmelden:hover, .mnav-links a.aktiv, .mkopf a.mnav-anmelden:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.mkopf .mnav-links a { color: var(--tinte-2); }
.mkopf .mnav-links a:hover, .mkopf .mnav-links a.aktiv { color: #fff; }
.mnav-aktionen { display: flex; align-items: center; gap: 8px; }
.mnav-aktionen .btn { padding: 9px 16px; font-size: 14px; }
.mk .menue-knopf { border-color: var(--linie-stark); background: transparent; color: #fff; }
@media (max-width: 960px) {
    .mk .menue-knopf { display: block; }
    .mnav {
        display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px;
        background: #11161d; border-bottom: 1px solid var(--linie); padding: 12px var(--rand) 24px;
        max-height: calc(100vh - 68px); overflow-y: auto; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
    }
    .mnav.offen { display: flex; }
    .mnav-links { flex-direction: column; margin: 0; }
    .mnav-links a { padding: 14px 8px; font-size: 18px; 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; }
    .mnav-aktionen .btn { padding: 14px; font-size: 16px; }
}

/* Abschnitte */
.sektion { position: relative; padding: clamp(80px, 11vw, 140px) var(--rand); }
.sektion-eng { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.sektion-innen { max-width: var(--breite); margin: 0 auto; }
.sektion-kopf { max-width: 760px; margin: 0 0 clamp(40px, 5vw, 64px); }
.sektion-kopf.mittig { margin-left: auto; margin-right: auto; text-align: center; }
.sektion-kopf h2, .sektion h2.gross { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.08; margin-bottom: .4em; }
.sektion-kopf p, .lead { font-size: clamp(17px, 1.5vw, 19px); 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); }
.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); }
.sektion-hell { background: var(--flaeche-2); }
/* Dunkle Abschnitte: Navy mit weichem blauem Licht und Raster am Boden */
.sektion.dunkel { isolation: isolate; overflow: hidden; background: radial-gradient(55% 60% at 50% 0%, rgba(45, 140, 255, .16), transparent 70%), #11161d; }
.sektion.dunkel::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 45%; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(600px) rotateX(64deg); transform-origin: top; -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
.trennlinie { height: 1px; max-width: var(--breite); margin: 0 auto; background: linear-gradient(90deg, transparent, var(--linie-stark), transparent); }

/* ---- Bühne (Hero) ---- */
.buehne { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 9vw, 108px) var(--rand) 0; text-align: center; background: #11161d; }
.buehne::before {   /* elektrisch-blaues Licht von oben, wie Scheinwerfer in einer dunklen Halle */
    content: ""; position: absolute; inset: -20% -20% auto; height: 120%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(36% 34% at 50% 4%, rgba(45, 140, 255, .32), transparent 72%),
        radial-gradient(26% 34% at 86% 24%, rgba(0, 122, 255, .16), transparent 70%),
        radial-gradient(28% 36% at 12% 30%, rgba(120, 170, 255, .1), transparent 70%);
}
.buehne-boden { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; z-index: -1; perspective: 520px; perspective-origin: 50% 0%; pointer-events: none; overflow: hidden; }
.buehne-boden::before {
    content: ""; position: absolute; left: -50%; right: -50%; top: 0; height: 180%;
    background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
    background-size: 72px 72px; transform: rotateX(68deg); transform-origin: top;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 60%, transparent 92%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 60%, transparent 92%);
    animation: boden-laufen 5s linear infinite;
}
@keyframes boden-laufen { to { background-position: 0 72px; } }
.buehne-innen { max-width: 980px; margin: 0 auto; }
.pille { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--linie-stark); color: var(--tinte-2); font-size: 13.5px; margin-bottom: 28px; }
.pille b { background: var(--gold); color: #0f1720; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.buehne h1 { font-size: clamp(2.5rem, 7vw, 5.2rem); line-height: 1.02; margin: 0 auto .32em; max-width: 14ch; text-wrap: balance; font-weight: 800; letter-spacing: -.035em; }
.buehne-lead { font-size: clamp(17.5px, 2vw, 20.5px); line-height: 1.6; color: var(--tinte-2); max-width: 680px; margin: 0 auto 36px; text-wrap: pretty; }
.buehne .knopfreihe { justify-content: center; gap: 12px; }
.vertrauen { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--tinte-3); }
.vertrauen li { display: inline-flex; align-items: center; gap: 8px; }
.vertrauen li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(76, 201, 138, .16) 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='%234cc98a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* Vitrine: der Showroom im Browserfenster, leicht nach hinten gekippt */
.vitrine { position: relative; max-width: 1120px; margin: clamp(48px, 7vw, 80px) auto 0; perspective: 1800px; }
.vitrine-rahmen {
    position: relative; border-radius: 18px 18px 0 0; overflow: hidden; background: #1b242f;
    border: 1px solid rgba(201, 210, 220, .18); border-bottom: 0;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .06) inset, 0 50px 140px -30px rgba(0, 0, 0, .85), 0 0 160px -40px rgba(45, 140, 255, .55);
    transform: rotateX(9deg); transform-origin: 50% 100%;
}
.vitrine-leiste { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: linear-gradient(180deg, #222c39, #1b242f); border-bottom: 1px solid rgba(201, 210, 220, .1); }
.vitrine-leiste i { width: 11px; height: 11px; border-radius: 50%; background: #3b4a5b; }
.vitrine-leiste span { margin: 0 auto; transform: translateX(-20px); font-size: 12px; color: #a2adbc; background: rgba(255, 255, 255, .05); padding: 4px 14px; border-radius: 7px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vitrine-bild { position: relative; aspect-ratio: 16 / 10; background: #2d3846; }
.vitrine-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vitrine::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 34%; background: linear-gradient(180deg, rgba(17, 22, 29, 0), #11161d 90%); pointer-events: none; z-index: 2; }

/* Wegpunkt am Boden - pulsiert wie im echten Viewer. Weiß mit dunklem Saum: sichtbar auf hellen
   UND dunklen Räumen, egal welcher Showroom im Bild steht. */
.wegpunkt { position: absolute; width: 64px; height: 22px; margin: -11px 0 0 -32px; border-radius: 50%; border: 2px solid #fff; background: rgba(255, 255, 255, .3); box-shadow: 0 0 0 1px rgba(15, 23, 32, .25), 0 0 24px rgba(255, 255, 255, .7); }
.wegpunkt::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #fff; animation: wegpunkt-puls 2.2s ease-out infinite; }
@keyframes wegpunkt-puls { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* Das gläserne Produkt-Fenster (Nachbau des Modals im Viewer). Neutral gehalten - der echte
   Viewer färbt den Knopf in der Markenfarbe des Shops. */
.glas-modal {
    position: absolute; z-index: 3; width: min(290px, 30%); text-align: left; color: #0f1720;
    background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px; padding: 14px;
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(15, 23, 32, .06);
}
.glas-modal img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 13px; background: #eef2f7; }
.glas-modal-text { padding: 12px 4px 4px; }
.glas-modal small { display: block; font-size: 11.5px; color: #5b6878; letter-spacing: .04em; text-transform: uppercase; }
.glas-modal strong { display: block; font: 600 17px/1.25 var(--schrift); margin: 3px 0 6px; color: #0f1720; }
.glas-modal .preis { font: 700 20px/1 var(--schrift); color: #0f1720; font-variant-numeric: tabular-nums; }
.glas-modal .preis span { font-size: 11.5px; font-weight: 500; color: #5b6878; margin-left: 6px; }
.glas-modal-knoepfe { display: grid; gap: 6px; margin-top: 12px; }
.glas-modal-knoepfe span { display: block; text-align: center; padding: 10px; border-radius: 11px; font: 600 13.5px/1.2 var(--schrift); }
.glas-modal-knoepfe span:first-child { background: #0f1720; color: #fff; }
.glas-modal-knoepfe span:last-child { background: rgba(15, 23, 32, .06); color: #0f1720; }
.vitrine .glas-modal { right: -1%; top: 16%; }

/* Schwebende Hinweise neben der Vitrine */
.schwebe {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; text-align: left;
    background: rgba(27, 36, 47, .82); border: 1px solid rgba(201, 210, 220, .18); color: #f1f5fb; font-size: 13px; line-height: 1.3; font-weight: 600;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7);
}
.schwebe small { display: block; color: #a2adbc; font-size: 11.5px; font-weight: 400; }
.schwebe i { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-weight: 700; background: rgba(76, 201, 138, .16); color: #4cc98a; }
.schwebe-a { left: 3%; top: 28%; }
.schwebe-b { left: 8%; bottom: 30%; }
.schwebe-b i { background: rgba(77, 157, 255, .18); color: #7ab6ff; }

@media (prefers-reduced-motion: no-preference) {
    .vitrine-rahmen { animation: vitrine-auf 1.6s cubic-bezier(.2, .7, .2, 1) both .15s; }
    .vitrine .glas-modal { animation: schweben 7s ease-in-out infinite 1.6s, auftauchen .9s ease-out both .9s; }
    .schwebe-a { animation: auftauchen .8s ease-out both 1.2s, schweben 8s ease-in-out infinite 2s; }
    .schwebe-b { animation: auftauchen .8s ease-out both 1.5s, schweben 9s ease-in-out infinite 2.4s; }
    .buehne-innen > * { animation: auftauchen .9s cubic-bezier(.2, .7, .2, 1) both; }
    .buehne-innen > :nth-child(2) { animation-delay: .08s; }
    .buehne-innen > :nth-child(3) { animation-delay: .16s; }
    .buehne-innen > :nth-child(4) { animation-delay: .24s; }
    .buehne-innen > :nth-child(5) { animation-delay: .32s; }
}
@keyframes vitrine-auf { from { transform: rotateX(24deg) translateY(40px); opacity: 0; } to { transform: rotateX(9deg); opacity: 1; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (max-width: 760px) {
    .vitrine-rahmen { transform: none; border-radius: 14px 14px 0 0; }
    /* Auf dem Handy als kompakte Karte (Bild links, Text rechts) unten im Bild - die hohe
       Desktop-Fassung würde sonst über den Rahmen hinausragen und den Raum verdecken. */
    .buehne-boden { height: 26%; opacity: .7; }
    .vitrine .glas-modal { width: min(250px, 66%); right: 3%; top: auto; bottom: 16%; padding: 8px; border-radius: 14px; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
    .vitrine .glas-modal img { width: 58px; border-radius: 9px; }
    .vitrine .glas-modal .glas-modal-text { padding: 0; }
    .vitrine .glas-modal .glas-modal-knoepfe { grid-column: 1 / -1; margin-top: 4px; }
    .glas-modal strong { font-size: 13px; margin: 0 0 3px; }
    .glas-modal .preis { font-size: 15px; }
    .glas-modal small, .glas-modal .preis span { display: none; }
    .glas-modal-knoepfe span { padding: 7px; font-size: 11.5px; }
    .glas-modal-knoepfe span:last-child { display: none; }
    .schwebe { display: none; }
    .vitrine-leiste span { transform: none; }
    @keyframes vitrine-auf { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Plattform-Leiste: noch Teil der dunklen Bühne */
.plattformen { position: relative; z-index: 3; padding: 8px var(--rand) clamp(56px, 7vw, 88px); text-align: center; }
.plattformen p { font-size: 13px; font-weight: 500; color: var(--tinte-3); margin-bottom: 18px; }
.plattformen ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 900px; }
.plattformen a { color: inherit; text-decoration: none; }
.plattformen a:hover { color: #fff; text-decoration: none; }
.plattformen li:has(a:hover) { border-color: var(--akzent); }
.plattformen li { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--linie-stark); background: rgba(255, 255, 255, .04); color: var(--tinte-2); font: 600 15px var(--schrift-titel); letter-spacing: -.01em; }

/* Großes Statement */
.statement { max-width: 980px; margin: 0 auto; text-align: center; }
.statement p.gross { font: 600 clamp(1.6rem, 3.6vw, 2.75rem)/1.22 var(--schrift-titel); letter-spacing: -.02em; color: #6b7889; margin: 0; text-wrap: balance; }
.statement p.gross em { font-style: normal; color: var(--tinte); }
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); text-align: left; }
.fakt { padding: 24px 26px; border-radius: 20px; border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten); }
.fakt b { display: block; font: 700 1.3rem/1.2 var(--schrift-titel); letter-spacing: -.02em; margin-bottom: 6px; }
.fakt span { color: var(--tinte-2); font-size: 15px; }
@media (max-width: 760px) { .fakten { grid-template-columns: minmax(0, 1fr); } }

/* Kacheln (Funktionen im Raster) */
.kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.kachel {
    position: relative; overflow: hidden; isolation: isolate; grid-column: span 2; min-width: 0;
    padding: 28px; border-radius: 22px; border: 1px solid var(--linie); background: var(--flaeche);
    box-shadow: var(--schatten); transition: box-shadow .25s, transform .25s, border-color .25s;
    display: flex; flex-direction: column;
}
.kachel:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); border-color: var(--linie-stark); }
.kachel-breit { grid-column: span 3; }
.kachel-gross { grid-column: span 4; }
.kachel h3 { font: 700 1.2rem/1.3 var(--schrift-titel); letter-spacing: -.02em; margin: 0 0 8px; }
.kachel p { color: var(--tinte-2); font-size: 15.5px; margin: 0; }
.kachel-bild { margin: -10px -10px 24px; border-radius: 14px; min-height: 150px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--flaeche-2); border: 1px solid var(--linie); }
.kachel-zeichen { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px; background: var(--akzent-weich); color: var(--akzent); }
.kachel-zeichen svg { width: 22px; height: 22px; }
@media (max-width: 960px) { .kachel, .kachel-breit { grid-column: span 3; } .kachel-gross { grid-column: span 6; } }
@media (max-width: 640px) { .kacheln { grid-template-columns: minmax(0, 1fr); } .kachel, .kachel-breit, .kachel-gross { grid-column: auto; } .kachel { padding: 22px; } }

/* Mini-Illustrationen in den Kacheln - kühl und neutral, Akzent nur sparsam */
.bild-raum { min-height: 230px; background: #2d3846; }
.bild-raum img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.bild-raum .wegpunkt { width: 46px; height: 16px; margin: -8px 0 0 -23px; }
.bild-sync { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; background: linear-gradient(180deg, #f6f8fb, #eef2f7); }
.sync-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--linie); font-size: 13px; color: var(--tinte-2); box-shadow: 0 1px 2px rgba(15, 23, 32, .04); }
.sync-zeile b { color: var(--tinte); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.sync-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; }
.bild-korb { background: radial-gradient(60% 90% at 50% 100%, rgba(26, 102, 219, .1), transparent), linear-gradient(180deg, #f6f8fb, #eef2f7); gap: 12px; flex-wrap: wrap; padding: 16px; }
.korb-knopf { padding: 12px 18px; border-radius: 12px; background: #0f1720; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 10px 24px -10px rgba(15, 23, 32, .6); }
.korb-pfeil { color: var(--tinte-3); font-size: 20px; }
.korb-shop { padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--linie-stark); background: #fff; font-size: 13px; color: var(--tinte-2); }
.korb-shop b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--akzent); color: #fff; font-size: 11px; margin-left: 6px; }
.bild-modell { background: radial-gradient(60% 60% at 50% 50%, rgba(45, 140, 255, .28), transparent 70%), #11161d; perspective: 600px; border-color: transparent; }
.wuerfel { width: 76px; height: 76px; position: relative; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(38deg); }
.wuerfel i { position: absolute; inset: 0; border: 1.5px solid rgba(122, 182, 255, .9); background: rgba(45, 140, 255, .08); }
.wuerfel i:nth-child(1) { transform: translateZ(38px); }
.wuerfel i:nth-child(2) { transform: rotateY(180deg) translateZ(38px); }
.wuerfel i:nth-child(3) { transform: rotateY(90deg) translateZ(38px); }
.wuerfel i:nth-child(4) { transform: rotateY(-90deg) translateZ(38px); }
.wuerfel i:nth-child(5) { transform: rotateX(90deg) translateZ(38px); }
.wuerfel i:nth-child(6) { transform: rotateX(-90deg) translateZ(38px); }
@media (prefers-reduced-motion: no-preference) { .wuerfel { animation: drehen 14s linear infinite; } }
@keyframes drehen { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.modell-etikett { position: absolute; bottom: 12px; left: 12px; font: 600 11px/1 var(--schrift-mono); color: #a2adbc; letter-spacing: .08em; }
.bild-zahlen { align-items: flex-end; gap: 6px; padding: 18px 18px 0; min-height: 150px; background: linear-gradient(180deg, #f6f8fb, #eef2f7); }
.bild-zahlen i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #2d8cff, rgba(26, 102, 219, .2)); }
.bild-schutz { flex-direction: column; gap: 4px; background: linear-gradient(180deg, #f6f8fb, #eef2f7); }
.bild-schutz b { font: 800 4rem/1 var(--schrift-titel); letter-spacing: -.04em; color: var(--tinte); }
.bild-schutz span { font-size: 13px; color: var(--tinte-3); font-weight: 600; letter-spacing: .02em; }
.bild-modal { background: var(--flaeche-3); min-height: 230px; }
.bild-modal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild-modal::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(15, 23, 32, .12); }
.bild-modal .glas-modal { position: relative; z-index: 2; width: min(290px, 88%); padding: 10px; display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; }
.bild-modal .glas-modal-text { padding: 0; }
.bild-modal .glas-modal strong { font-size: 13.5px; margin: 0 0 4px; }
.bild-modal .glas-modal .preis { font-size: 15px; }
.bild-modal .glas-modal-knoepfe { grid-column: 1 / -1; margin-top: 2px; grid-template-columns: 1fr 1fr; }
.bild-modal .glas-modal-knoepfe span { padding: 8px 4px; font-size: 11.5px; }

/* Raumvorlagen als kleine Szenen */
.raeume { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .raeume { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .raeume { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .raeume { grid-template-columns: minmax(0, 1fr); } }
.raum { border-radius: 22px; overflow: hidden; border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten); }
.raum-szene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; perspective: 400px; }
/* Echte Vorschaubilder aus dem Viewer (bilder/vorlagen/) statt der CSS-Andeutung */
.raum-szene:has(img)::before, .raum-szene:has(img)::after { display: none; }
.raum-szene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.raum-szene::before { content: ""; position: absolute; inset: 0 0 42% 0; background: var(--wand); }
.raum-szene::after { content: ""; position: absolute; left: -30%; right: -30%; bottom: 0; height: 42%; background: var(--boden); transform: rotateX(48deg); transform-origin: top; }
.raum-szene i { position: absolute; z-index: 1; bottom: 30%; width: 18%; height: 38%; border-radius: 4px; background: var(--stele); box-shadow: 0 14px 24px -6px rgba(0, 0, 0, .25); }
.raum-szene i::before { content: ""; position: absolute; left: 14%; right: 14%; top: 12%; height: 42%; border-radius: 3px; background: var(--bild); }
.raum-szene i:nth-child(1) { left: 14%; }
.raum-szene i:nth-child(2) { left: 41%; height: 44%; }
.raum-szene i:nth-child(3) { left: 68%; }
.raum-szene b { position: absolute; z-index: 1; left: 50%; bottom: 14%; width: 36px; height: 12px; margin-left: -18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.raum-halle { --wand: linear-gradient(180deg, #e4e8ee, #d4dae2); --boden: repeating-linear-gradient(90deg, #c3cad4 0 1px, #ced5de 1px 60px); --stele: #f6f8fb; --bild: linear-gradient(135deg, #94a3b8, #475569); }
.raum-galerie { --wand: linear-gradient(180deg, #fdfdfe, #f1f3f6); --boden: repeating-linear-gradient(90deg, #a8b3c2 0 2px, #bcc6d3 2px 34px); --stele: #ffffff; --bild: linear-gradient(135deg, #7ab6ff, #1a66db); }
.raum-boutique { --wand: linear-gradient(180deg, #2d3846, #1b242f); --boden: repeating-linear-gradient(90deg, #222c39 0 2px, #2d3846 2px 40px); --stele: #3b4a5b; --bild: linear-gradient(135deg, #c9d2dc, #8795a8); }
.raum-kueche { --wand: repeating-linear-gradient(0deg, #eef1f4 0 1px, #f9fafb 1px 22px); --boden: repeating-linear-gradient(90deg, #b9c1cb 0 1px, #d3d9e0 1px 46px); --stele: #e7ecf1; --bild: linear-gradient(135deg, #b8c4d2, #5b6b80); }
.raum-wohnen { --wand: linear-gradient(180deg, #efe8df, #e2d8cb); --boden: repeating-linear-gradient(90deg, #b48d68 0 2px, #c49d77 2px 38px); --stele: #f7f2ec; --bild: linear-gradient(135deg, #d9b48f, #8a6447); }
.raum-text { padding: 18px 20px 22px; }
.raum-text h3 { font: 700 1.15rem/1.25 var(--schrift-titel); letter-spacing: -.02em; margin: 0 0 4px; }
.raum-text p { margin: 0; color: var(--tinte-2); font-size: 15px; }

/* So geht's - Schritte */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.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: 22px; 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::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: 960px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } .schritt::after { display: none; } }
@media (max-width: 560px) { .schritte { grid-template-columns: minmax(0, 1fr); } }

/* Code-Karte (Snippet): dunkles Navy - Code liest sich so am besten */
.code-karte { margin-top: 24px; border-radius: 18px; border: 1px solid rgba(15, 23, 32, .12); background: #11161d; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(15, 23, 32, .55); }
.code-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(201, 210, 220, .1); font-size: 13px; color: #a2adbc; }
.code-karte-kopf b { color: #e4ebf9; font-weight: 600; }
.code-karte pre { margin: 0; padding: 20px 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.7; color: #e4ebf9; white-space: pre; }
.code-karte .t { color: #7ab6ff; } .code-karte .a { color: #c9d2dc; } .code-karte .w { color: #8fe0b4; }

/* Live-Demo (in einem dunklen Abschnitt) */
.demo { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--linie-stark); background: #1b242f; aspect-ratio: 16 / 9; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .8), 0 0 140px -50px rgba(45, 140, 255, .5); }
.demo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.demo-poster { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.demo-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-poster::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(55% 55% at 50% 50%, rgba(17, 22, 29, .45), rgba(17, 22, 29, .7)); }
.demo-poster > div { position: relative; z-index: 2; max-width: 460px; }
.demo-poster p { color: #e4ebf9; margin: 14px 0 0; font-size: 14.5px; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.demo-start { display: inline-flex; align-items: center; gap: 12px; }
.demo-start::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.demo-hinweis { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 22px; font-size: 14px; color: var(--tinte-3); }
@media (max-width: 640px) { .demo { aspect-ratio: 3 / 4; } }

/* Statistik-Vorschau */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.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; } }
.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 { 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); -webkit-mask: none; }
.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); }
.attrappe { position: relative; margin: 0; border-radius: 22px; padding: 22px; border: 1px solid var(--linie-stark); background: var(--flaeche); box-shadow: var(--schatten-hoch), 0 0 120px -40px rgba(45, 140, 255, .35); }
.attrappe-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; color: var(--tinte-3); flex-wrap: wrap; }
.attrappe-kopf b { color: var(--tinte); font-size: 15px; }
.attrappe .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.attrappe .kennzahl { padding: 14px 16px; background: var(--flaeche-2); box-shadow: none; border-color: transparent; }
.attrappe .kennzahl-wert { font-size: 23px; }
.attrappe .trichter-stufe { grid-template-columns: 130px minmax(0, 1fr) 54px; font-size: 13px; }
.attrappe-fuss { margin: 14px 0 0; font-size: 12px; color: var(--tinte-3); text-align: right; }
@media (max-width: 480px) { .attrappe { padding: 16px; } .attrappe .trichter-stufe { grid-template-columns: minmax(0, 1fr) 50px; } }

/* Preise */
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .preise { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; } }
.preise-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }
@media (max-width: 760px) { .preise-zwei { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
.preise-eins { grid-template-columns: minmax(0, 1fr); max-width: 540px; margin: 0 auto; }
.preise-eins .preis-karte { padding: 36px 34px; }
@media (max-width: 480px) { .preise-eins .preis-karte { padding: 30px 22px; } }
.preis-karte { position: relative; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 24px; padding: 30px 28px; box-shadow: var(--schatten); }
.preis-karte h3 { font: 700 1.3rem/1.2 var(--schrift-titel); letter-spacing: -.02em; margin: 0 0 6px; }
.preis-karte .preis-zeile { color: var(--tinte-2); font-size: 15px; min-height: 48px; margin: 0; }
.preis-wert { font: 800 48px/1 var(--schrift-titel); letter-spacing: -.04em; margin: 22px 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; min-height: 22px; 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; flex: 1; }
.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-karte.hervor { 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: -12px; left: 28px; padding: 5px 12px; border-radius: 999px; background: #0f1720; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 4px 10px -4px rgba(15, 23, 32, .4); }
.preis-notiz { text-align: center; color: var(--tinte-3); font-size: 14px; margin: 28px auto 0; max-width: 760px; }

/* 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(16.5px, 1.6vw, 18px)/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: im dunklen Abschnitt eine beleuchtete Fläche */
.cta-band { position: relative; isolation: isolate; overflow: hidden; max-width: var(--breite); margin: 0 auto; text-align: center; padding: clamp(56px, 8vw, 100px) clamp(20px, 5vw, 64px); border-radius: 28px; border: 1px solid var(--linie-stark); background: radial-gradient(60% 90% at 50% 0%, rgba(45, 140, 255, .28), transparent 70%), var(--flaeche); box-shadow: var(--schatten-hoch); }
.cta-band::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -30%; height: 70%; z-index: -1; background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 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 { font-size: clamp(2rem, 4.8vw, 3.4rem); line-height: 1.06; margin: 0 auto .35em; max-width: 17ch; text-wrap: balance; font-weight: 800; }
.cta-band p { color: var(--tinte-2); font-size: 18px; max-width: 560px; margin: 0 auto 32px; }
.cta-band .knopfreihe { justify-content: center; }

/* Unterseiten: Seitenkopf - dunkel wie die Bühne, darunter heller Inhalt */
.seitenkopf { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 8vw, 100px) var(--rand) clamp(48px, 6vw, 80px); background: #11161d; }
.seitenkopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 80% at 85% 0%, rgba(45, 140, 255, .22), transparent 70%), radial-gradient(35% 60% at 5% 0%, rgba(120, 170, 255, .08), transparent 70%); }
.seitenkopf::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 60%; z-index: -1; background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(500px) rotateX(64deg); transform-origin: top; -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }
.seitenkopf-innen { max-width: var(--breite); margin: 0 auto; }
.seitenkopf h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.05; letter-spacing: -.035em; max-width: 18ch; margin-bottom: .32em; text-wrap: balance; font-weight: 800; }
.seitenkopf .lead { max-width: 680px; margin: 0; }
.seitenkopf .knopfreihe { margin-top: 32px; }
.pfad { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; font-size: 13.5px; color: var(--tinte-3); }
.pfad li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.pfad a, .dunkel .pfad a { color: var(--tinte-3); }
.pfad a:hover, .dunkel .pfad a:hover { color: var(--tinte); }

/* Fließtext (Rechtstexte, Ratgeber) */
.inhalt-raster { max-width: var(--breite); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--rand) clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.inhalt-raster.einspaltig { grid-template-columns: minmax(0, 780px); }
@media (max-width: 960px) { .inhalt-raster { grid-template-columns: minmax(0, 1fr); } }
.prosa { max-width: 760px; font-size: 17px; line-height: 1.75; color: var(--tinte-2); min-width: 0; }
.prosa > :first-child { margin-top: 0; }
.prosa h2 { font: 700 clamp(1.4rem, 2.4vw, 1.8rem)/1.25 var(--schrift-titel); color: var(--tinte); margin: 2.2em 0 .6em; letter-spacing: -.025em; }
.prosa h3 { font: 700 1.1rem/1.35 var(--schrift-titel); color: var(--tinte); margin: 1.8em 0 .5em; letter-spacing: -.01em; }
.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; }
.prosa th, .prosa td { padding: 10px 12px 10px 0; }
.prosa .tabelle-huelle { margin-bottom: 1.4em; }
.prosa .tabelle-huelle table { margin: 0; min-width: 480px; }
.prosa code { font-size: 14px; background: var(--flaeche-2); padding: 2px 6px; border-radius: 6px; color: var(--tinte); }
.platzhalter { background: #fff3cd; color: #6b4a00; padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.hinweis-kasten { padding: 18px 20px; border-radius: 16px; border: 1px solid #f3d27a; background: #fff8e1; color: #5c4a1c; font-size: 15px; margin: 0 0 32px; }
.hinweis-kasten strong { color: #4a3800; }
.stand { font-size: 14px; color: var(--tinte-3); }

/* Seitenleiste mit Aufruf (Ratgeberseiten) */
/* "Mehr zum Thema": Kacheln mit verwandten Landingpages (verwandteSeitenAusgeben) */
.verwandt { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .verwandt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .verwandt { grid-template-columns: minmax(0, 1fr); } }
.verwandt a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 22px 24px; border-radius: 18px; border: 1px solid var(--linie); background: var(--flaeche); box-shadow: 0 1px 2px rgba(15, 23, 32, .03); color: var(--tinte-2); text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.verwandt a:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); box-shadow: var(--schatten); text-decoration: none; }
.verwandt strong { font: 700 1.05rem/1.3 var(--schrift-titel); letter-spacing: -.01em; color: var(--tinte); }
.verwandt strong::after { content: " →"; color: var(--akzent); }
.verwandt span { font-size: 15px; line-height: 1.55; }

.seiten-cta { position: sticky; top: 92px; padding: 26px; border-radius: 22px; border: 1px solid var(--linie); background: radial-gradient(90% 60% at 50% 0%, rgba(26, 102, 219, .1), transparent 70%), var(--flaeche); box-shadow: var(--schatten-hoch); }
.seiten-cta h2 { font: 700 1.25rem/1.25 var(--schrift-titel); letter-spacing: -.02em; margin: 0 0 8px; }
.seiten-cta p { color: var(--tinte-2); font-size: 15px; }
.seiten-cta .btn { width: 100%; margin-top: 4px; }
.seiten-cta ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 14px; color: var(--tinte-3); }
.seiten-cta li::before { content: "✓ "; color: var(--gut); font-weight: 700; }
@media (max-width: 960px) { .seiten-cta { position: static; } }

/* Vergleich (Preisseite) */
.rechner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rechner-feld { padding: 20px; border-radius: 18px; border: 1px solid var(--linie); background: var(--flaeche); }
.rechner-feld small { display: block; font-size: 13px; color: var(--tinte-3); margin-bottom: 6px; }
.rechner-feld b { font: 600 1.5rem/1.2 var(--schrift); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .rechner { grid-template-columns: minmax(0, 1fr); } }

/* Fuß der öffentlichen Seiten: dunkles Navy */
.mfuss { border-top: 1px solid var(--linie); background: #0d1218; }
.mfuss-innen { max-width: var(--breite); margin: 0 auto; padding: 64px var(--rand) 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 36px; }
.mfuss-marke p { color: var(--tinte-3); font-size: 14.5px; max-width: 340px; margin: 18px 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); 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: #fff; margin: 6px 0 8px; }
.mfuss .mfuss-spalte a { color: var(--tinte-3); font-size: 14.5px; overflow-wrap: anywhere; }
.mfuss .mfuss-spalte a:hover { color: #fff; text-decoration: none; }
.mfuss-unten { max-width: var(--breite); margin: 0 auto; padding: 22px var(--rand) 32px; 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(2, minmax(0, 1fr)); } .mfuss-marke { grid-column: 1 / -1; } }
@media (max-width: 480px) { .mfuss-innen { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Einblenden beim Scrollen: app.js setzt .wartet NUR auf Elemente unterhalb des sichtbaren
   Bereichs. Ohne JS (oder mit reduzierter Bewegung) bleibt alles sofort sichtbar. */
[data-einblenden].wartet { opacity: 0; transform: translateY(28px); }
[data-einblenden] { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    [data-einblenden].wartet { opacity: 1; transform: none; }
}

/* Alte Klassen der früheren Startseite - weiter gültig, falls noch irgendwo verwendet */
.abschnitt { max-width: var(--breite); margin: 0 auto; padding: 72px var(--rand); }
.merkmale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .merkmale { grid-template-columns: minmax(0, 1fr); } }
.merkmal { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; }
.merkmal-nr { font: 600 13px/1 var(--schrift); color: var(--akzent); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }

@media print {
    .kopf, .mkopf, .mfuss, .fuss, .sprunglink, .menue-knopf { display: none !important; }
    .mk { --tinte: #000; --tinte-2: #222; --tinte-3: #444; --papier: #fff; background: #fff; color: #000; }
    .seitenkopf::before, .seitenkopf::after { display: none; }
}

/* Große Überschriften nicht automatisch trennen ("ei-genen" mitten im Satz wirkt billig).
   Lange Einzelwörter tragen stattdessen ein &shy; im Markup (z. B. Datenschutz&shy;erklärung). */
.buehne h1, .sektion-kopf h2, .sektion h2.gross, .cta-band h2, .seitenkopf h1, .auth-bild h2, .kachel h3, .statement p.gross { hyphens: manual; }

/* Eine gemeinsame Inhaltskante: Container MIT eigenem Seitenrand bekommen die Breite plus beide
   Ränder, damit ihr Inhalt exakt dort beginnt, wo .sektion-innen (ohne eigenen Rand) beginnt. */
.seite:not(.seite-schmal), .kopf-innen, .mkopf-innen, .mfuss-innen, .mfuss-unten, .fuss-innen, .meldungen, .inhalt-raster:not(.einspaltig), .abschnitt { max-width: calc(var(--breite) + 2 * var(--rand)); }
.inhalt-raster.einspaltig { max-width: calc(var(--breite) + 2 * var(--rand)); grid-template-columns: minmax(0, 780px); }

/* "Unabhängig von …" auf der Preiskarte: drei Chips, die den Kern des Einheitspreises zeigen */
.preis-karte ul.preis-unabhaengig { display: flex; flex-wrap: wrap; gap: 8px; flex: none; margin: 0 0 22px; padding: 0; border: 0; }
.preis-karte ul.preis-unabhaengig li { padding: 6px 12px 6px 28px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--tinte); font-size: 13.5px; font-weight: 600; }
.preis-karte ul.preis-unabhaengig li::before { left: 12px; top: 11px; width: 9px; height: 5px; border-color: var(--gut); }

/* Mehrere Showrooms: Smart-Filter "Welche Produkte sollen hinein?" (js/auswahl.js) und Aufpreis */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.chip { border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte-2); border-radius: 999px; padding: 5px 11px; font: 500 13px/1.2 var(--schrift); cursor: pointer; }
.chip { transition: border-color .15s, color .15s, background-color .15s; }
.chip:hover { border-color: var(--tinte-3); color: var(--tinte); background: var(--flaeche-2); }
.chip[aria-pressed="true"], .chip.aktiv { background: var(--btn-grund); color: var(--btn-text); border-color: var(--btn-grund); }
.auswahl-ergebnis { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--flaeche-2); }
.auswahl-ergebnis:empty { display: none; }
.auswahl-ergebnis p { margin: 0 0 6px; }
.auswahl-zahl { font-weight: 650; }
.auswahl-unbekannt { color: var(--warn); }
.auswahl-beispiele { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 8px; }
.auswahl-beispiele figure { margin: 0; font-size: 11.5px; line-height: 1.25; color: var(--tinte-2); }
.auswahl-beispiele img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--flaeche); display: block; margin-bottom: 4px; }
.aufpreis { border: 1px solid var(--linie-stark); background: var(--flaeche-2); box-shadow: inset 3px 0 0 var(--akzent); border-radius: 12px; padding: 14px 16px; margin: 6px 0 16px; display: grid; gap: 4px; }
/* Vorschaubild der Raumvorlage "Kueche" in der Vorlagen-Auswahl (Design-Reiter) */
.vorlage-kueche { background: linear-gradient(180deg, #f3efe8 0 42%, #dcd3c6 42% 47%, #e9e4dc 47% 70%, #b9a58c 70%); }
/* Einrichtung: echtes Vorschaubild aus dem Viewer (bilder/einrichtung/), CSS-Andeutung nur als Ersatz */
.vorlage-bild:has(img) { background: #e9e7e3; overflow: hidden; }
.vorlage-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Einrichtung: kleine Andeutung der Ausstattung (Boden, Wand, ein typisches Stueck) */
.vorlage-bild.einrichtung-keine { background: repeating-linear-gradient(135deg, #f2f1ee 0 10px, #e9e7e2 10px 20px); }
.vorlage-bild.einrichtung-lounge { background: radial-gradient(28% 22% at 35% 66%, #7a3f1f 60%, transparent 62%), linear-gradient(180deg, #3a2a20 0 52%, #3a2416 52% 70%, #6a4530 70%); }
.vorlage-bild.einrichtung-weinbar { background: linear-gradient(90deg, transparent 0 56%, #7fb3e0 56% 88%, transparent 88%) 0 0 / 100% 46% no-repeat, repeating-linear-gradient(90deg, #1d3a22 0 6px, #b48a5c 6px 10px) 0 0 / 50% 70% no-repeat, linear-gradient(180deg, #efe9e1 0 70%, #b88a5e 70%); }
.vorlage-bild.einrichtung-wohnzimmer { background: radial-gradient(14% 30% at 22% 48%, #5d8f3a 60%, transparent 62%), linear-gradient(90deg, transparent 0 50%, #c9744f 50% 70%, transparent 70%) 0 22% / 100% 30% no-repeat, linear-gradient(180deg, #ece5da 0 72%, #b58b63 72%); }
.vorlage-bild.einrichtung-atelier { background: repeating-linear-gradient(90deg, #2f3a4a 0 12px, #e8e2d6 12px 24px, #8a5a44 24px 36px) 18% 20% / 45% 50% no-repeat, linear-gradient(180deg, #f3f1ec 0 72%, #c8a479 72%); }
.vorlage-bild.einrichtung-werkstatt { background: radial-gradient(circle, #3c2a18 1.5px, transparent 2px) 0 0 / 10px 10px, linear-gradient(180deg, #c9a77c 0 55%, #e6e8eb 55% 72%, #9aa0a6 72%); }

.vorlage-outdoor { background: linear-gradient(180deg, #9cc3e0 0 40%, #2f4a2a 40% 55%, #5f7d3c 55%); }
.vorlage-wohnen { background: linear-gradient(180deg, #ece5da 0 45%, #c49a6c 45% 48%, #e2d6c5 48% 62%, #7d5a40 62% 76%, #b88d64 76%); }

/* Startseite: Funktionsumfang mit Status (Verfuegbar/Beta) */
.umfang { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.umfang-eintrag { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 20px 18px; }
.umfang-eintrag h3 { font-size: 17px; margin: 12px 0 6px; }
.umfang-eintrag p { margin: 0; font-size: 14.5px; color: var(--tinte-2); line-height: 1.55; }
.umfang-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; }
.umfang-fertig { background: var(--gut-weich); color: var(--gut); }
.umfang-fertig::before { content: "✓"; }
.umfang-beta { background: var(--akzent-weich); color: var(--akzent); border: 1px solid color-mix(in srgb, var(--akzent) 25%, transparent); }
@media (max-width: 960px) { .umfang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .umfang { grid-template-columns: minmax(0, 1fr); } }

/* Profilmenue: Darstellung hell/dunkel/auto */
.profil-darstellung { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--linie); margin-top: 6px; }
.segment { display: inline-flex; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 9px; padding: 2px; }
.segment button { border: 0; background: transparent; color: var(--tinte-2); font: 600 12.5px/1 var(--schrift); padding: 6px 9px; border-radius: 7px; cursor: pointer; }
.segment button.aktiv { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }

/* Fenster beim ersten Login: Farbschema waehlen */
.farbwahl { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(9, 13, 19, .55); backdrop-filter: blur(4px); }
.farbwahl-fenster { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); border-radius: 18px; box-shadow: var(--schatten-hoch); padding: 28px; text-align: center; }
.farbwahl-fenster h2 { font-size: 24px; margin: 0 0 6px; }
.farbwahl-optionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 14px; }
.farbwahl-option { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); color: var(--tinte); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.farbwahl-option:hover, .farbwahl-option:focus-visible { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); transform: translateY(-1px); }
.farbwahl-vorschau { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; border: 1px solid var(--linie); }
.farbwahl-vorschau i { position: absolute; left: 0; right: 0; top: 0; height: 18%; }
.farbwahl-vorschau b { position: absolute; left: 10%; height: 12%; border-radius: 4px; }
.farbwahl-vorschau b:nth-of-type(1) { top: 32%; width: 55%; } .farbwahl-vorschau b:nth-of-type(2) { top: 52%; width: 38%; }
.farbwahl-vorschau em { position: absolute; left: 10%; bottom: 12%; width: 26%; height: 14%; border-radius: 4px; background: #2d8cff; }
.farbwahl-hell { background: #f6f8fb; } .farbwahl-hell i { background: #fff; border-bottom: 1px solid #e3e8ef; } .farbwahl-hell b { background: #d7dee8; }
.farbwahl-dunkel { background: #11161d; } .farbwahl-dunkel i { background: #1b242f; } .farbwahl-dunkel b { background: #2d3846; }
.farbwahl-system { background: linear-gradient(115deg, #f6f8fb 50%, #11161d 50%); } .farbwahl-system i { background: linear-gradient(115deg, #fff 50%, #1b242f 50%); } .farbwahl-system b { background: linear-gradient(115deg, #d7dee8 50%, #2d3846 50%); }
.farbwahl-spaeter { color: var(--tinte-3); }
@media (max-width: 600px) { .farbwahl-fenster { padding: 20px; } .farbwahl-optionen { grid-template-columns: minmax(0, 1fr); gap: 8px; } .farbwahl-option { flex-direction: row; text-align: left; } .farbwahl-vorschau { width: 96px; flex: none; } }

/* Admin: Logos in Listen, Logo auf Showroom-Kacheln, Ansicht-Umschalter mit Links */
.mit-logo { display: flex; align-items: center; gap: 12px; }
.liste-logo { width: 72px; height: 36px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 4px 6px; }
.liste-logo-leer { display: grid; place-items: center; font-weight: 700; color: var(--tinte-3); background: var(--flaeche-2); }
.showroom-karte-logo { position: absolute; top: 12px; left: 12px; z-index: 1; max-width: 45%; height: 34px; object-fit: contain; background: rgba(255,255,255,.94); border-radius: 8px; padding: 5px 8px; box-shadow: var(--schatten); }
.showroom-karte-bild > img.showroom-karte-logo { inset: auto; top: 12px; left: 12px; width: auto; height: 34px; max-width: 45%; object-fit: contain; }
.segment a { display: inline-block; color: var(--tinte-2); font: 600 12.5px/1 var(--schrift); padding: 7px 10px; border-radius: 7px; text-decoration: none; }
.segment a.aktiv { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }

/* ---------------------------------------------------------------------------------------
 * KI-Freistellen (Beta): Dialog mit iframe (ki_freistellen.php), Seite im iframe, Bildwahl in der
 * Produkttabelle, kleine Anzeige des automatischen Durchlaufs. Siehe js/ki.js, js/ki_freistellen.js.
 * ------------------------------------------------------------------------------------- */
.ki-dialog { border: 0; padding: 0; border-radius: var(--radius); width: min(980px, calc(100vw - 24px)); height: min(760px, calc(100vh - 24px)); background: var(--flaeche); box-shadow: var(--schatten-hoch); overflow: hidden; }
.ki-dialog::backdrop { background: rgba(10, 14, 20, .55); }
.ki-dialog iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--flaeche); }
.ki-seite { background: var(--flaeche); min-height: 0; }
.ki-rahmen { padding: 22px 24px 28px; }
.ki-kompakt .ki-rahmen { padding: 10px 12px; }
.ki-kompakt .fortschritt { margin: 8px 0 0; height: 8px; }
.ki-titel { margin: 0 0 4px; }
.ki-produkt { font-weight: 600; margin: 0 0 8px; }
.ki-galerie { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.ki-bild { position: relative; width: 84px; height: 84px; padding: 0; border: 2px solid var(--linie); border-radius: var(--radius-klein); background: #fff; overflow: hidden; cursor: pointer; }
.ki-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ki-bild.gewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.ki-marke { position: absolute; right: 4px; top: 4px; background: var(--akzent); color: var(--auf-akzent); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; }
.ki-vergleich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 8px; }
.ki-vergleich figure { margin: 0; }
.ki-vergleich figcaption { font-size: 12px; color: var(--tinte-3); margin-bottom: 4px; }
.ki-flaeche { aspect-ratio: 1; border-radius: var(--radius-klein); border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--flaeche-2); }
.ki-flaeche img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ki-flaeche img:not([src]) { visibility: hidden; }
.ki-hell { background-color: #f4f1ea; background-image: linear-gradient(45deg, #e8e4da 25%, transparent 25%, transparent 75%, #e8e4da 75%), linear-gradient(45deg, #e8e4da 25%, transparent 25%, transparent 75%, #e8e4da 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.ki-dunkel { background: #1b2028; }
.ki-stapel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ki-stapel-text { font-size: 14px; color: var(--tinte-2); }
.ki-kompakt .ki-stapel-text { font-size: 13px; }
.ki-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.ki-kachel { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: start; cursor: pointer; }
.ki-kachel .ki-flaeche { grid-column: 1 / -1; }
.ki-kachel.ki-unsicher .ki-flaeche { outline: 2px dashed var(--warn); outline-offset: -2px; }
.etikett-ki { background: var(--akzent-weich); color: var(--akzent-dunkel); padding: 1px 7px; font-size: 11px; vertical-align: middle; }
.etikett-ki.aus { background: var(--flaeche-2); color: var(--tinte-3); text-decoration: line-through; }
.ki-zelle { min-width: 190px; }
.ki-zelle form { margin: 0; }
.ki-check { margin: 4px 0; }
.ki-hinweis { margin: 0 0 4px; }
.ki-knoepfe { margin-top: 4px; gap: 6px; }
.ki-empfohlen { background: var(--akzent); color: var(--auf-akzent); border-color: transparent; }
.ki-empfohlen:hover { background: var(--akzent-dunkel); color: var(--auf-akzent); }
.bildwahl summary { cursor: pointer; color: var(--akzent-dunkel); }
.bildwahl-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; max-width: 300px; }
.bildwahl-bild { position: relative; cursor: pointer; }
.bildwahl-bild input { position: absolute; opacity: 0; pointer-events: none; }
.produkt-zeile .bildwahl-bild img { width: 52px; height: 52px; object-fit: contain; background: #fff; border: 2px solid var(--linie); border-radius: 8px; }
.bildwahl-bild input:checked + img { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.bildwahl-bild input:focus-visible + img { outline: 2px solid var(--akzent); outline-offset: 2px; }
.ki-stapel-start select { width: auto; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.ki-auto { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: min(360px, calc(100vw - 32px)); height: 74px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); box-shadow: var(--schatten-hoch); overflow: hidden; }
.ki-auto-rahmen { width: 100%; height: 100%; border: 0; display: block; }
.ki-erstellung-rahmen { height: 74px; margin-top: 8px; border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
@media (max-width: 640px) { .ki-vergleich { grid-template-columns: 1fr 1fr; } .ki-vergleich figure:first-child { grid-column: 1 / -1; } }