/* ==========================================================================================================
   kundenportal/assets/kp.css - ERZEUGT aus assets/css/src/57-bereich-kundenportal.portal.css durch tools/css_build.php - NICHT VON HAND BEARBEITEN.
   Gehoert zu Block 57-bereich-kundenportal (gesperrt, docs/Bausteinkatalog.md) - aendern nur durch Oeffnen dieses Blocks.
   ========================================================================================================== */
/* kundenportal/assets/kp.css - Kundenportal (KP2b, tenant v1.183.0): eigenes Stylesheet der Seiten, die die KUNDEN des Betriebs sehen.
   Bewusst unabhaengig von der Kunden-App (kein styles.css, kein Thema der App). Farben des Betriebs als Variablen am <html>:
   --kp-main (Hauptfarbe), --kp-accent (Akzent), --kp-on-main (Schrift auf der Hauptfarbe) - aus dem Erscheinungsbild (CustomerPortal).
   Hell/Dunkel: .kp-auto-dark folgt der Einstellung des Geraets (nur wenn der Betrieb es erlaubt). Schrift wie die App: Inter, Systemschrift. */
:root { --kp-bg: #FFFFFF; --kp-page: #F4F6F5; --kp-ink: #17212B; --kp-muted: #5B6878; --kp-line: #C9D3DC; --kp-note: #EEF2F1;
    --kp-main: #12314D; --kp-accent: #F2A900; --kp-on-main: #FFFFFF;
    --ui-scale-base: 1; }   /* v1.462.0: Grundfaktor der App-Anzeigegroesse (0.9) gilt nicht im Portal - Portal bleibt in seiner Groesse */
@media (prefers-color-scheme: dark) {
    .kp-auto-dark { --kp-bg: #1E2733; --kp-page: #121A24; --kp-ink: #E8EDF1; --kp-muted: #A3AFBD; --kp-line: #3A4757; --kp-note: #263241; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.kp { min-height: 100vh; display: flex; flex-direction: column; background: var(--kp-page); color: var(--kp-ink);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; }
/* v1.247.0: '.kp a { color: inherit }' entfernt - styles.css der App regelt Links (a { color: inherit }) ohne .btn-primary zu ueberschreiben */
.kp-split { flex: 1; display: flex; flex-wrap: wrap; }
.kp-brand { flex: 1 1 420px; background: var(--kp-main); color: var(--kp-on-main); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.kp-logo img { display: block; max-height: 64px; max-width: 280px; object-fit: contain; }
.kp-logo img.kp-logo-pad { background: #FFFFFF; padding: 8px 12px; border-radius: 10px; }
.kp-logo-name { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.kp-hello { max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.kp-hello h1 { margin: 0; font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.kp-sub { margin: 0; font-size: 18px; opacity: .85; }
.kp-bar { width: 48px; height: 4px; border-radius: 2px; background: var(--kp-accent); margin: 8px 0; }
.kp-welcome { margin: 0; font-size: 18px; line-height: 1.55; opacity: .92; white-space: pre-line; overflow-wrap: anywhere; }
.kp-contact { font-size: 14px; opacity: .88; }
.kp-side { flex: 1 1 480px; background: var(--kp-bg); display: flex; align-items: center; justify-content: center; padding: 48px 28px; }
.kp-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.kp-form h2 { margin: 0; font-size: 28px; font-weight: 800; }
.kp-muted { margin: -8px 0 0; color: var(--kp-muted); }
.kp-note { padding: 12px 14px; border-radius: 10px; background: var(--kp-note); border-left: 4px solid var(--kp-accent); font-size: 14px; }
.kp-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--kp-muted); }
.kp-field input { height: 48px; padding: 0 14px; border: 1px solid var(--kp-line); border-radius: 10px; font: inherit; font-size: 16px; color: var(--kp-ink); background: var(--kp-bg); }
.kp-field input:focus { outline: none; border-color: var(--kp-accent); box-shadow: 0 0 0 2px var(--kp-accent); }
.kp-btn { height: 48px; border: 1px solid var(--kp-main); border-radius: 10px; background: var(--kp-main); color: var(--kp-on-main); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.kp-btn:disabled, .kp-field input:disabled { opacity: .55; cursor: not-allowed; }
.kp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 16px 28px; border-top: 1px solid var(--kp-line); background: var(--kp-bg); color: var(--kp-muted); font-size: 14px; }
.kp-foot a { color: var(--kp-muted); }
.kp-powered { margin-left: auto; font-size: 13px; }
.kp-closed { align-items: center; justify-content: center; }
.kp-closed-box { max-width: 460px; margin: auto; padding: 40px 28px; text-align: center; }
.kp-closed-box h1 { font-size: 26px; margin: 0 0 8px; }
@media (max-width: 760px) { .kp-brand { padding: 32px 24px; } .kp-hello h1 { font-size: 30px; } }
/* KP3b (v1.185.0): Meldungen, Link unter dem Formular, Startseite nach der Anmeldung */
.kp-note-error { border-left-color: #B91C1C; }
.kp-note-ok { border-left-color: #15803D; }
.kp-link { align-self: center; color: var(--kp-main); font-weight: 600; }
.kp-auto-dark .kp-link { color: var(--kp-ink); }
.kp-top-brand { display: inline-flex; align-items: center; gap: 10px; }
.kp-top-brand img { max-height: 40px; max-width: 180px; object-fit: contain; }
.kp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: #FFFFFF; color: var(--kp-main); font-weight: 800; }
.kp-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px; }
.kp-main h1 { margin: 0 0 4px; font-size: 28px; font-weight: 800; }
.kp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.kp-card { background: var(--kp-bg); border: 1px solid var(--kp-line); border-radius: 14px; padding: 20px; }
.kp-card h2 { margin: 0 0 8px; font-size: 18px; }
.kp-card p { margin: 0 0 6px; }
/* KP5 (v1.191.0): Artikel-Liste, Artikel-Ansicht */
.kp-top-brand { color: inherit; text-decoration: none; }
.kp-card-link { display: block; color: inherit; text-decoration: none; }
.kp-card-link:hover { border-color: var(--kp-accent); }
.kp-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.kp-count { display: inline-block; min-width: 28px; padding: 0 8px; border-radius: 999px; background: var(--kp-line); font-size: 14px; text-align: center; vertical-align: middle; }
.kp-search { display: flex; gap: 8px; }
.kp-search input { height: 40px; min-width: 240px; padding: 0 12px; border: 1px solid var(--kp-line); border-radius: 10px; background: var(--kp-bg); color: var(--kp-ink); font: inherit; }
.kp-btn-sm { height: 40px; padding: 0 14px; font-size: 14px; }
.kp-btn-ghost2 { background: var(--kp-bg); color: var(--kp-ink); border: 1px solid var(--kp-line); text-decoration: none; display: inline-flex; align-items: center; }
.kp-split-list { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.kp-groups { display: flex; flex-direction: column; gap: 2px; background: var(--kp-bg); border: 1px solid var(--kp-line); border-radius: 12px; padding: 8px; position: sticky; top: 12px; }
.kp-groups a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; padding-left: calc(10px + var(--kp-d, 0) * 12px); border-radius: 8px; color: var(--kp-ink); text-decoration: none; font-size: 14px; }
.kp-groups a:hover { background: var(--kp-line); }
.kp-groups a.is-active { background: var(--kp-main); color: var(--kp-on-main); }
.kp-groups small { opacity: .7; }
.kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.kp-tile { display: flex; flex-direction: column; background: var(--kp-bg); border: 1px solid var(--kp-line); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.kp-tile:hover { border-color: var(--kp-accent); transform: translateY(-2px); }
.kp-tile-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #fff; }
.kp-tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-tile-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; font-size: 40px; font-weight: 800; color: var(--kp-main); background: var(--kp-line); }
.kp-tile-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.kp-tile-num { font-size: 12px; color: var(--kp-muted); }
.kp-tile-name { font-weight: 600; line-height: 1.3; }
.kp-tile-price { margin-top: 6px; font-size: 15px; }
.kp-tile-price s { color: var(--kp-muted); font-weight: 400; }
.kp-tile-price em { color: var(--kp-muted); }
.kp-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.kp-note-vat { margin-top: 16px; font-size: 13px; }
.kp-empty { color: var(--kp-muted); }
.kp-crumbs { margin: 0 0 12px; font-size: 14px; }
.kp-crumbs a { color: var(--kp-main); text-decoration: none; }
.kp-info h1 { margin: 0 0 10px; font-size: 26px; }
.kp-desc { white-space: pre-line; }
.kp-price-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--kp-line); border-radius: 12px; background: var(--kp-bg); }
.kp-price { font-size: 28px; font-weight: 800; color: var(--kp-main); }
.kp-auto-dark .kp-price { color: var(--kp-ink); }
.kp-price-request { font-size: 20px; }
.kp-price-list s { color: var(--kp-muted); }
.kp-badge { padding: 2px 10px; border-radius: 999px; background: var(--kp-accent); color: #fff; font-size: 12px; font-weight: 600; }
.kp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 20px; font-size: 14px; }
.kp-facts dt { color: var(--kp-muted); }
.kp-facts dd { margin: 0; }
.kp-files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.kp-files a { color: var(--kp-main); font-weight: 600; text-decoration: none; }
@media (max-width: 860px) { .kp-split-list, .kp-detail { grid-template-columns: 1fr; } .kp-groups { position: static; } }
/* v1.197.0: Artikel-Liste als Tabelle mit Kacheln und Filtern wie in der App */
.kp-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 14px; }
.kp-tile-f { display: inline-flex; flex-direction: column; min-width: 120px; padding: 10px 14px; border: 1px solid var(--kp-line); border-radius: 12px; background: var(--kp-bg); color: var(--kp-ink); text-decoration: none; }
.kp-tile-f small { color: var(--kp-muted); }
.kp-tile-f.is-on { border-color: var(--kp-main); box-shadow: inset 0 0 0 1px var(--kp-main); }
/* v1.198.0: .kp-bar war schon die Akzentlinie der Anmeldeseite (48 x 4 px) - Filterleiste heisst jetzt .kp-filter */
.kp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.kp-filter select, .kp-filter input { height: 40px; padding: 0 12px; border: 1px solid var(--kp-line); border-radius: 10px; background: var(--kp-bg); color: var(--kp-ink); font: inherit; }
.kp-filter input[type=search] { min-width: 260px; flex: 1; }
.kp-table-wrap { overflow-x: auto; background: var(--kp-bg); border: 1px solid var(--kp-line); border-radius: 12px; }
.kp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kp-table th, .kp-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--kp-line); vertical-align: middle; }
.kp-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted); white-space: nowrap; }
.kp-table tbody tr { cursor: pointer; }
.kp-table tbody tr:hover { background: color-mix(in srgb, var(--kp-main) 6%, var(--kp-bg)); }
.kp-table tbody tr:last-child td { border-bottom: 0; }
.kp-table a { color: var(--kp-main); text-decoration: none; font-weight: 600; }
.kp-th-img { width: 44px; }
.kp-th-img img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--kp-line); background: #fff; }
.kp-nw { white-space: nowrap; }
.kp-ta-right { text-align: right !important; }

/* v1.198.0 (Ralf: "Optik wie das Tenant-Frontend"): das Portal laedt jetzt das Stylesheet der App (assets/app.css.php) - hier nur noch der
   Rahmen ohne Seitenleiste, die Kopfleiste in den Markenfarben und die Anmeldeseite. Die alten .kp-grid/.kp-table-Regeln bleiben fuer
   die Anmeldeseiten; angemeldete Seiten nutzen .card, .data-table, .stat-grid, .ft-page-bar der App. */
body.kp.kp-app { display: block; background: var(--bg); color: var(--text); font-family: var(--font-family); }
.kp-layout.app-layout { min-height: calc(100vh - 72px); }
.kp-layout .main-content { margin-left: 0; width: 100%; min-height: auto; }
.kp-layout .content-header { top: 0; }
.kp-app .kp-foot { margin-top: 0; }
.kp-app .kp-price { font-size: 20px; color: var(--kp-main); }
.kp-app .ft-page-bar { margin-bottom: var(--space-md); }
.kp-app .ft-page-bar select { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); background: var(--card-bg); color: var(--text); font: inherit; }
.kp-app .data-table tbody tr[data-href] { cursor: pointer; }
.kp-app .ft-pager-row { display: flex; align-items: center; justify-content: center; gap: 16px; border-top: 1px solid var(--border); }

/* ---- KP8 (v1.240.0, Ralf 04.10.2026: "wie ein Onlineshop ... fuer PC/Tablet/Handy") - Shop-Optik: Kauf-Box, Reiter, Kacheln, Handy ----
   Nur App-Tokens (variables.css ueber app.css.php), Markenfarben ueber --brand-primary / --kp-main. Keine neuen Farben, kein !important. */
/* Detailansicht: Kauf-Box rechts neben den Bildern */
.kp-app .kp-buy-pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.kp-app .kp-buy-pills:empty { display: none; }
.kp-app .kp-buy-succ { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-md); }
.kp-app .kp-buy-succ a { color: var(--brand-primary-text); font-weight: 600; }
.kp-app .kp-docs { margin: 0; }
/* Liste: Umschalter Tabelle / Kacheln rechts in der Filterleiste */
.kp-app .kp-view { margin-left: auto; }
/* Kacheln wie im Onlineshop */
.kp-app .kp-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-md); }
.kp-app .kp-shop-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg);
    color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kp-app .kp-shop-card:hover, .kp-app .kp-shop-card:focus-visible { border-color: var(--brand-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kp-app .kp-shop-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #FFFFFF; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.kp-app .kp-shop-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-app .kp-shop-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: var(--space-sm) var(--space-md) var(--space-md); }
.kp-app .kp-shop-num { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.kp-app .kp-shop-name { line-height: 1.3; overflow-wrap: anywhere; }
.kp-app .kp-shop-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.kp-app .kp-shop-price { margin-top: auto; padding-top: var(--space-xs); font-size: 16px; }
/* Tablet und Handy */
@media (max-width: 760px) {
    .kp-app .kp-view .kp-view-label { display: none; }
    .kp-app .kp-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
    /* Tabelle wird zur Kartenliste: Kopf weg, je Zeile eine Karte, Spaltenname vor dem Wert (data-label) */
    .kp-app .kp-mobile-cards thead { display: none; }
    .kp-app .kp-mobile-cards, .kp-app .kp-mobile-cards tbody, .kp-app .kp-mobile-cards tr { display: block; width: 100%; }
    .kp-app .kp-mobile-cards tr { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border); }
    .kp-app .kp-mobile-cards td { display: flex; justify-content: space-between; gap: var(--space-md); padding: 2px 0; border: 0; text-align: right; white-space: normal; }
    .kp-app .kp-mobile-cards td[data-label]::before { content: attr(data-label); flex: none; color: var(--text-muted); font-size: 13px; text-align: left; }
    .kp-app .kp-mobile-cards td.ft-col-thumb { display: inline-flex; width: auto; padding-bottom: var(--space-xs); }
}
@media (max-width: 420px) { .kp-app .kp-shop-grid { grid-template-columns: 1fr; } }

/* ---- KP9 (v1.241.0): eigene Artikelnummer in der Kauf-Box und in der Kachel ---- */
.kp-app .kp-own { margin: 0 0 var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.kp-app .kp-shop-own { font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }

/* ---- KP10 (v1.242.0): Flaggen-Umschalter in der Kopfleiste (Flaggen selbst: styles.css .kp-flag-*) ---- */
.kp-lang { display: inline-flex; align-items: center; gap: 4px; }
.kp-lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
    background: transparent; color: var(--kp-on-main); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.kp-lang-btn:hover, .kp-lang-btn:focus-visible { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }
.kp-lang-btn.is-on { background: rgba(255,255,255,.22); border-color: var(--kp-accent); }
@media (max-width: 760px) { .kp-lang-code { display: none; } .kp-lang-btn { padding: 0 8px; } }

/* ---- KP10b (v1.243.0): Seite Sprachen & Texte (texte.php) ---- */
.kp-app .kp-flag-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); }
.kp-app .kp-flag-pick .btn { justify-content: flex-start; gap: var(--space-sm); }
.kp-app .kp-tx-filter { flex-wrap: wrap; }
.kp-app .kp-tx td { vertical-align: middle; }
.kp-app .kp-tx-in { width: 50%; }
.kp-app .kp-tx-in input { width: 100%; }
.kp-app .data-table tr.is-selected > td { background: var(--bg-subtle); font-weight: 600; }
@media (max-width: 760px) { .kp-app .kp-tx-in { width: auto; } .kp-app .kp-tx-in input { flex: 1 1 auto; min-width: 0; } }
/* KP10c (v1.245.0): Auswahl Vorlage-Sprache im Kopf der Sprache */
.kp-app .kp-tx-base { display: inline-flex; align-items: center; gap: var(--space-xs); }
.kp-app .kp-tx-base label { font-weight: 600; white-space: nowrap; }

/* ---- KP21/KP22 (v1.320.0, Ralf 06.10.2026: "die Artikelansicht muss schoener werden", "die Menuefuehrung oben ist schlecht" - Konzept
   "Kundenportal als Shop-Erlebnis", Vorbild b2b-demoshop.de). Nur Tokens (App + Portal-Farben), keine freien Farben, keine px. ---- */
/* Kopf: drei Leisten */
.kp-top3 { background: var(--card-bg); color: var(--text); border-bottom: thin solid var(--border); position: relative; z-index: 200; }
.kp-wrap { max-width: 82rem; margin: 0 auto; padding: 0 var(--space-lg); }
.kp-svc { background: var(--kp-main); color: var(--kp-on-main); font-size: var(--font-sm); }
.kp-svc-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 2.5rem; }
.kp-svc-contact { display: inline-flex; align-items: center; gap: var(--space-xs); opacity: .92; }
.kp-svc-contact a, .kp-svc-link { color: var(--kp-on-main); text-decoration: none; }
.kp-svc-contact a:hover, .kp-svc-link:hover { text-decoration: underline; }
.kp-svc-right { display: inline-flex; align-items: center; gap: var(--space-md); }
.kp-svc-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; }
.kp-mainbar-in { display: flex; align-items: center; gap: var(--space-lg); min-height: 4.5rem; }
.kp-top3 .kp-top-brand { color: var(--text); flex: none; }
.kp-top3 .kp-top-brand img { max-height: 2.75rem; max-width: 11rem; object-fit: contain; }
.kp-top3 .kp-top-brand small { display: block; font-size: var(--font-xs); color: var(--text-muted); }
.kp-search { position: relative; flex: 1 1 22rem; display: flex; min-width: 0; max-width: 40rem; border: thin solid var(--border); border-radius: var(--radius-md); background: var(--bg); }
.kp-search:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--brand-primary) 25%, transparent); }
.kp-search input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 var(--space-md); border: 0; background: transparent; color: var(--text); font: inherit; }
.kp-search input:focus { outline: none; }
.kp-search-btn { flex: none; width: 3rem; border: 0; background: var(--kp-main); color: var(--kp-on-main); cursor: pointer; }
.kp-quick { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.kp-quick-btn { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 4.75rem; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md);
    color: var(--text); text-decoration: none; font-size: var(--font-xs); font-weight: 600; transition: background .15s; }
.kp-quick-label { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.kp-quick-btn:hover, .kp-quick-btn[aria-current] { background: var(--bg-subtle); }
.kp-quick-cart { position: relative; background: color-mix(in srgb, var(--kp-accent) 16%, transparent); }
.kp-quick-n { position: absolute; top: .1rem; right: .1rem; }
.kp-catbar { border-top: thin solid var(--border); background: var(--card-bg); }
.kp-catbar-in { display: flex; align-items: center; gap: var(--space-md); min-height: 3rem; }
.kp-cat-links { display: flex; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; }
.kp-cat-links a, .kp-catbar-right a { display: inline-flex; align-items: center; gap: .3rem; min-height: 3rem; border-bottom: .15rem solid transparent; color: var(--text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.kp-cat-links a:hover, .kp-cat-links a[aria-current], .kp-catbar-right a:hover, .kp-catbar-right a[aria-current] { border-bottom-color: var(--kp-accent); }
.kp-catbar-right { display: inline-flex; gap: var(--space-md); margin-left: auto; }
/* Aufklapp-Menues (details): Benutzer-Menue, "Weitere Optionen", Mega-Menue */
.kp-menu, .kp-mega { position: relative; }
.kp-menu > summary, .kp-mega > summary { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; list-style: none; user-select: none; }
.kp-menu > summary::-webkit-details-marker, .kp-mega > summary::-webkit-details-marker { display: none; }
.kp-menu-list { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: 40; min-width: 15rem; display: flex; flex-direction: column; padding: var(--space-xs);
    background: var(--card-bg); color: var(--text); border: thin solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.kp-menu-list a, .kp-menu-list button { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.kp-menu-list a:hover, .kp-menu-list button:hover, .kp-menu-list a[aria-current] { background: var(--bg-subtle); }
.kp-menu-head { display: flex; flex-direction: column; padding: var(--space-sm) var(--space-md); border-bottom: thin solid var(--border); margin-bottom: var(--space-xs); }
.kp-menu-head small { color: var(--text-muted); }
.kp-user-menu > summary { color: var(--kp-on-main); font-weight: 600; }
.kp-user-menu .kp-avatar { width: 1.75rem; height: 1.75rem; font-size: var(--font-xs); }
.kp-mega > summary { min-height: 3rem; padding-right: var(--space-md); border-right: thin solid var(--border); font-weight: 700; white-space: nowrap; }
.kp-mega-panel { position: absolute; left: 0; top: 100%; z-index: 40; width: min(64rem, calc(100vw - 2 * var(--space-lg))); padding: var(--space-lg);
    background: var(--card-bg); border: thin solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-md); }
.kp-mega-every { display: inline-flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); color: var(--brand-primary-text); font-weight: 700; text-decoration: none; }
.kp-mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-lg); }
.kp-mega-col { display: flex; flex-direction: column; gap: .2rem; }
.kp-mega-col a { color: var(--text-secondary); text-decoration: none; padding: .15rem 0; }
.kp-mega-col a:hover { color: var(--brand-primary-text); text-decoration: underline; }
.kp-mega-col .kp-mega-head { color: var(--text); font-weight: 700; margin-bottom: .2rem; }
.kp-mega-n { color: var(--text-muted); font-weight: 400; font-size: var(--font-xs); }
.kp-mega-col .kp-mega-all { color: var(--brand-primary-text); font-size: var(--font-sm); }
/* Artikelseite */
.kp-crumbs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 var(--space-md); color: var(--text-muted); font-size: var(--font-sm); }
.kp-crumbs a { color: var(--text-muted); }
.kp-crumbs [aria-current] { color: var(--text); }
.kp-pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; margin-bottom: var(--space-xl); }
.kp-pdp-gallery { display: flex; flex-direction: column; gap: var(--space-sm); }
.kp-pdp-main { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden;
    background: var(--card-bg); border: thin solid var(--border); border-radius: var(--radius-lg); }
.kp-pdp-main img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s; }
.kp-pdp-main:hover img { transform: scale(1.03); }
.kp-pdp-zoom { position: absolute; right: var(--space-sm); bottom: var(--space-sm); display: inline-flex; padding: var(--space-xs); border-radius: var(--radius-full);
    background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-md); }
.kp-pdp-noimg { flex-direction: column; gap: var(--space-sm); color: var(--text-muted); }
.kp-pdp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: var(--space-sm); }
.kp-pdp-thumbs a { display: flex; aspect-ratio: 1; overflow: hidden; background: var(--card-bg); border: thin solid var(--border); border-radius: var(--radius-md); }
.kp-pdp-thumbs a:hover { border-color: var(--brand-primary); }
.kp-pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.kp-pdp-buy { display: flex; flex-direction: column; gap: var(--space-md); }
.kp-pdp-buy .kp-buy-pills { margin: 0; }
.kp-pdp-title { display: flex; align-items: flex-start; gap: var(--space-sm); }
.kp-pdp-title h2 { margin: 0; font-size: var(--font-2xl); line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.kp-pdp-short { margin: 0; color: var(--text-secondary); font-size: var(--font-md); }
.kp-pdp-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem var(--space-lg); margin: 0; font-size: var(--font-sm); }
.kp-pdp-facts dt { color: var(--text-muted); }
.kp-pdp-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.kp-pdp-box { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); background: var(--bg-subtle); border: thin solid var(--border); border-radius: var(--radius-lg); }
.kp-pdp-box p { margin: 0; }
.kp-pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.kp-pdp-price .kp-price { font-size: var(--font-2xl); font-weight: 800; color: var(--kp-main); }
.kp-pdp-cart { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.kp-qty { display: inline-flex; align-items: stretch; height: 2.75rem; border: thin solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); overflow: hidden; }
.kp-qty button { width: 2.5rem; border: 0; background: none; color: var(--text); font-size: var(--font-lg); cursor: pointer; }
.kp-qty button:hover { background: var(--bg-subtle); }
.kp-qty input { width: 4.5rem; border: 0; border-left: thin solid var(--border); border-right: thin solid var(--border); background: transparent; color: var(--text); font: inherit; font-weight: 700; text-align: center; }
.kp-pdp-cartbtn { flex: 1 1 12rem; justify-content: center; min-height: 2.75rem; font-size: var(--font-md); }
.kp-pdp-more > summary { justify-content: center; width: 100%; min-height: 2.75rem; padding: 0 var(--space-md); border: thin solid var(--border); border-radius: var(--radius-md);
    background: var(--card-bg); color: var(--text); font-weight: 600; }
.kp-pdp-more > summary:hover, .kp-pdp-more[open] > summary { border-color: var(--brand-primary); }
.kp-pdp-more .kp-menu-list { left: 0; right: 0; }
.kp-pdp-contact { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: thin solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); }
.kp-pdp-contact > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kp-pdp-contact small { color: var(--text-muted); overflow-wrap: anywhere; }
.kp-pdp-contact-ico { display: inline-flex; padding: var(--space-sm); border-radius: var(--radius-full); background: color-mix(in srgb, var(--kp-main) 12%, transparent); color: var(--kp-main); }
.kp-pdp-info { margin-bottom: var(--space-xl); }
.kp-app .kp-desc p { margin: 0 0 var(--space-sm); }
.kp-app .kp-desc ul { margin: 0 0 var(--space-sm); padding-left: 1.4rem; }
.kp-app .kp-desc li { margin: .2rem 0; }
.kp-pdp-tech { grid-template-columns: minmax(10rem, 35%) minmax(0, 1fr); max-width: 48rem; font-size: var(--font-base); }
.kp-pdp-tech dt, .kp-pdp-tech dd { padding: var(--space-xs) 0; border-bottom: thin solid var(--border); }
.kp-pdp-tech dd { font-weight: 400; }
.kp-pdp-related h2 { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-lg); margin: 0 0 var(--space-md); }
.kp-app .kp-shop-grid.kp-shop-grid3 { grid-template-columns: repeat(var(--kp-cols, 3), minmax(0, 1fr)); }
@media (max-width: 1100px) { .kp-catbar-right { display: none; } .kp-quick-btn { min-width: 0; } .kp-quick-label { display: none; } }
@media (max-width: 860px) {
    .kp-pdp { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .kp-app .kp-shop-grid.kp-shop-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-mainbar-in { flex-wrap: wrap; gap: var(--space-sm) var(--space-md); padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .kp-search { order: 3; flex-basis: 100%; max-width: none; }
    .kp-cat-links { display: none; }
    .kp-mega-panel { position: fixed; left: 0; right: 0; width: auto; max-height: 70vh; overflow-y: auto; border-radius: 0; }
}
@media (max-width: 560px) {
    .kp-wrap { padding: 0 var(--space-md); }
    .kp-svc-contact, .kp-user-name, .kp-top3 .kp-top-brand small { display: none; }
    .kp-pdp-title h2 { font-size: var(--font-xl); }
    .kp-app .kp-shop-grid.kp-shop-grid3 { grid-template-columns: minmax(0, 1fr); }
    .kp-top3 .kp-top-brand { flex: 1 1 auto; min-width: 0; }
    .kp-top3 .kp-top-brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .kp-quick { gap: 0; }
    .kp-quick-btn { padding: var(--space-xs); }
    .kp-pdp-box { padding: var(--space-md); }
}
/* ---- KP23 (v1.321.0, Ralf 06.10.2026: "3 nebeneinander!"): Produktbox der Kachelansicht mit Menge und Warenkorb ---- */
.kp-app .kp-shop-tile:hover { transform: none; }
.kp-app .kp-shop-tile .kp-shop-img { border-bottom: thin solid var(--border); }
.kp-app .kp-shop-tile .kp-shop-name { color: var(--text); font-weight: 700; text-decoration: none; }
.kp-app .kp-shop-tile .kp-shop-name:hover { color: var(--brand-primary-text); text-decoration: underline; }
.kp-app .kp-shop-tile .kp-shop-price { font-size: var(--font-lg); font-weight: 800; color: var(--kp-main); }
.kp-shop-new { align-self: flex-start; display: inline-flex; }
.kp-shop-buy { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.kp-shop-buy .btn { flex: 1 1 auto; justify-content: center; }
.kp-qty.kp-qty-sm { height: 2.25rem; }
.kp-qty.kp-qty-sm button { width: 2rem; font-size: var(--font-md); }
.kp-qty.kp-qty-sm input { width: 3.25rem; }
@media (max-width: 68.75rem) and (min-width: 53.8125rem) { .kp-shop-buy-label { display: none; } }
/* ---- KP24 (v1.322.0): Live-Vorschlaege der Suche und Warenkorb rechts ---- */
.kp-search-btn { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.kp-suggest { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-xs)); z-index: 50; max-height: 70vh; overflow-y: auto; padding: var(--space-xs);
    background: var(--card-bg); color: var(--text); border: thin solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.kp-suggest-h { padding: var(--space-xs) var(--space-sm); color: var(--text-muted); font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kp-suggest a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.kp-suggest a:hover, .kp-suggest a.is-sel { background: var(--bg-subtle); }
.kp-suggest-img { flex: none; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; overflow: hidden; border: thin solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); }
.kp-suggest-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-suggest-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kp-suggest-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-suggest-txt small { color: var(--text-muted); }
.kp-suggest-price { flex: none; font-weight: 700; color: var(--kp-main); }
.kp-suggest .kp-suggest-all { justify-content: center; margin-top: var(--space-xs); border-top: thin solid var(--border); border-radius: 0; color: var(--brand-primary-text); font-weight: 700; }
.kp-suggest-none { padding: var(--space-sm); color: var(--text-muted); }
.kp-cart-ov[hidden], .kp-cart-panel[hidden], .kp-suggest[hidden] { display: none; }
.kp-cart-ov { position: fixed; inset: 0; z-index: 900; background: color-mix(in srgb, var(--text) 35%, transparent); }
.kp-cart-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 901; width: min(26rem, 100vw); display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg);
    background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-md); overflow-y: auto; }
.kp-cart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-lg); }
.kp-cart-head strong { display: inline-flex; align-items: center; gap: var(--space-xs); }
.kp-cart-added { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--kp-accent) 16%, transparent); font-weight: 600; }
.kp-cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kp-cart-list li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: thin solid var(--border); }
.kp-cart-img { flex: none; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; overflow: hidden; border: thin solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); }
.kp-cart-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-cart-item { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kp-cart-item a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.kp-cart-line { flex: none; font-weight: 700; white-space: nowrap; }
.kp-cart-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--font-lg); }
.kp-cart-sum strong { color: var(--kp-main); font-size: var(--font-xl); }
.kp-cart-actions { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: auto; }
.kp-cart-actions .btn { justify-content: center; }
/* ---- KP25 (v1.323.0, Konzept "Kundenportal als Shop-Erlebnis" - Theme; Ralf 06.10.2026 E3: 4 Schriften auf dem eigenen Server, keine
   Anfrage an Google): Stellschrauben des Betriebs als Klassen am <body> (kundenportal/_page.php kp_head) - sie setzen nur Tokens, nie Regeln.
   Schriften: kundenportal/assets/fonts (SIL OFL 1.1, Lizenzen daneben), nur Latin (deckt DE, EN, DA, NL ab), 400 und 700. ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-latin-700-normal.woff2") format("woff2"); }
.kp-app.kp-font-inter { --font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
.kp-app.kp-font-source-sans { --font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif; }
.kp-app.kp-font-roboto { --font-family: "Roboto", "Segoe UI", system-ui, sans-serif; }
.kp-app.kp-font-lato { --font-family: "Lato", "Segoe UI", system-ui, sans-serif; }
.kp-app.kp-corners-eckig { --radius-sm: 0; --radius-md: .125rem; --radius-lg: .25rem; --radius-xl: .375rem; }
.kp-app.kp-corners-rund { --radius-sm: .5rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; }
.kp-app.kp-density-kompakt { --space-xs: .1875rem; --space-sm: .375rem; --space-md: .75rem; --space-lg: 1.125rem; --space-xl: 1.5rem; --space-2xl: 2.25rem; }
.kp-app.kp-density-luftig { --space-xs: .3125rem; --space-sm: .625rem; --space-md: 1.25rem; --space-lg: 1.875rem; --space-xl: 2.5rem; --space-2xl: 3.75rem; }
.kp-logo-mitte .kp-mainbar-in { flex-wrap: wrap; justify-content: center; padding-top: var(--space-sm); }
.kp-logo-mitte .kp-mainbar-in > .kp-top-brand { order: -1; flex-basis: 100%; justify-content: center; text-align: center; }
/* ---- KP26 (v1.324.0, Ralf 06.10.2026: Startseite vom Betrieb gestaltet): Elemente der Startseite (CustomerPortalStart::render) ---- */
.kp-ps-page { display: flex; flex-direction: column; gap: var(--space-xl); }
.kp-ps-title { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md); font-size: var(--font-lg); }
.kp-ps-note { display: flex; gap: var(--space-sm); align-items: flex-start; margin: 0; }
.kp-ps-note p { margin: var(--space-xs) 0 var(--space-sm); }
.kp-ps-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-2xl) var(--space-xl);
    border-radius: var(--radius-lg); background: var(--kp-main); color: var(--kp-on-main); }
.kp-ps-banner > div { flex: 1 1 20rem; }
.kp-ps-banner-accent { background: var(--kp-accent); color: var(--text); }
.kp-ps-banner h2 { margin: 0 0 var(--space-sm); font-size: var(--font-2xl); font-weight: 800; }
.kp-ps-banner p { margin: 0; font-size: var(--font-md); opacity: .92; }
.kp-ps-banner-btn { background: var(--card-bg); color: var(--text); border-color: transparent; font-weight: 700; }
/* v1.326.0 (Ralf: Bild-Upload fuer Banner): Bild hinter dem Banner, Verlauf in der Banner-Farbe haelt den Text lesbar */
.kp-ps-banner { position: relative; overflow: hidden; isolation: isolate; }
.kp-ps-banner-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kp-ps-has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--kp-main) 88%, transparent) 0%, color-mix(in srgb, var(--kp-main) 55%, transparent) 60%, color-mix(in srgb, var(--kp-main) 15%, transparent) 100%); }
.kp-ps-banner-accent.kp-ps-has-img::before { background: linear-gradient(90deg, color-mix(in srgb, var(--kp-accent) 90%, transparent) 0%, color-mix(in srgb, var(--kp-accent) 55%, transparent) 60%, color-mix(in srgb, var(--kp-accent) 15%, transparent) 100%); }
/* v1.327.0 (Ralf 06.10.2026: "Anzahl Kacheln festlegen 3/4/5"; "2 Suchmasken"; grosser Seitenkopf weg) */
.kp-app.kp-grid-4 { --kp-cols: 4; }
.kp-app.kp-grid-5 { --kp-cols: 5; }
@media (max-width: 68.75rem) { .kp-app.kp-grid-4, .kp-app.kp-grid-5 { --kp-cols: 3; } }
.kp-sr { position: absolute; width: .0625rem; height: .0625rem; margin: -.0625rem; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kp-q-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0 0 0 var(--space-sm); border: thin solid var(--border); border-radius: var(--radius-full); background: var(--card-bg); font-weight: 600; }
.kp-shop-buy .kp-qty { flex: none; }
.kp-app.kp-grid-5 .kp-shop-buy-label { display: none; }
/* v1.328.0 (Ralf: Varianten nicht einzeln): Auswahl der Variante in der Kaufbox */
.kp-pdp-variant { display: flex; flex-direction: column; gap: var(--space-xs); }
.kp-pdp-variant label { display: flex; align-items: center; gap: var(--space-xs); font-weight: 700; }
.kp-pdp-variant select { height: 2.75rem; padding: 0 var(--space-sm); border: thin solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); color: var(--text); font: inherit; font-weight: 600; }
/* v1.329.0 (Ralf: Varianten aufklappen wie in der App): Variantenliste in der Kachel */
.kp-shop-vars { font-size: var(--font-sm); }
.kp-shop-vars > summary { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; color: var(--brand-primary-text); font-weight: 600; }
.kp-shop-vars ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: flex; flex-direction: column; }
.kp-shop-vars li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; border-top: thin solid var(--border); }
.kp-shop-vars li a { color: var(--text); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.kp-shop-vars li a:hover { color: var(--brand-primary-text); }
.kp-shop-vars li > span { flex: none; font-weight: 700; }
/* v1.331.0 (Ralf: Sprachen auf der Loginseite): Flaggen vor der Anmeldung - helle Flaeche statt dunkler Kopfleiste */
.kp-login-langs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); margin: 0 0 var(--space-sm); }
.kp-login-langs .kp-lang-btn { color: var(--text); border-color: var(--border); background: var(--card-bg); text-decoration: none; }
.kp-login-langs .kp-lang-btn:hover, .kp-login-langs .kp-lang-btn:focus-visible { background: var(--bg-subtle); border-color: var(--kp-main); }
.kp-login-langs .kp-lang-btn.is-on { background: color-mix(in srgb, var(--kp-accent) 18%, transparent); border-color: var(--kp-accent); }
@media (max-width: 47.5rem) { .kp-login-langs .kp-lang-code { display: inline; } }
.kp-pdp-related + .kp-pdp-related { margin-top: var(--space-xl); }   /* KP28: mehrere Kachelreihen (Zubehoer, Ersatzteile, Alternativen) */
/* v1.332.0: Vorschlaege innerhalb des Listen-Filters - Hinweis oben, "In allen Artikeln suchen" unten */
.kp-suggest-scope { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--kp-accent) 16%, transparent); font-size: var(--font-sm); font-weight: 600; }
.kp-suggest .kp-suggest-global { margin-top: 0; border-top: 0; color: var(--text-muted); font-weight: 600; }
/* v1.333.0 (Ralf 06.10.2026: Anmeldeseite einstellen und visualisieren): Bild hinter der Marke, Aufbau split | rechts | mitte */
.kp-brand { position: relative; isolation: isolate; overflow: hidden; }
.kp-brand-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kp-brand-has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, color-mix(in srgb, var(--kp-main) 92%, transparent) 0%, color-mix(in srgb, var(--kp-main) 70%, transparent) 55%, color-mix(in srgb, var(--kp-main) 35%, transparent) 100%); }
.kp-login-rechts { flex-direction: row-reverse; }
.kp-login-mitte { position: relative; align-items: center; justify-content: center; padding: var(--space-2xl) var(--space-lg); background: var(--kp-main); }
.kp-login-mitte > .kp-brand { position: absolute; inset: 0; padding: var(--space-xl); justify-content: flex-start; }
.kp-login-mitte > .kp-brand .kp-hello, .kp-login-mitte > .kp-brand .kp-contact { display: none; }
.kp-login-mitte > .kp-side { position: relative; z-index: 1; flex: 0 1 28rem; margin: auto; padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.kp-login-note { margin-top: var(--space-sm); white-space: normal; }
/* v1.334.0 (Ralf: Staffelpreise, Lieferadresse/Wunschtermin, Verfuegbarkeit, Datenblatt) */
.kp-tiers { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.kp-tiers caption { caption-side: top; padding-bottom: var(--space-xs); text-align: left; font-weight: 700; }   /* v1.339.0: Ueberschrift ueber den Spaltenkoepfen */
.kp-tiers tr.is-on td { color: var(--kp-main); font-weight: 700; background: color-mix(in srgb, var(--kp-accent) 14%, transparent); }   /* v1.339.0: aktuelle Stufe */
.kp-tiers td { padding: var(--space-xs) 0; border-top: thin solid var(--border); }
.kp-avail { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; font-size: var(--font-sm); }
.kp-avail-dot { width: .7rem; height: .7rem; border-radius: var(--radius-full); background: var(--text-muted); flex: none; }
.kp-avail-ok .kp-avail-dot { background: var(--success, var(--kp-accent)); }
.kp-avail-warn .kp-avail-dot { background: var(--warning, var(--kp-accent)); }
.kp-avail-info .kp-avail-dot { background: var(--info, var(--brand-primary)); }
.kp-avail-danger .kp-avail-dot { background: var(--danger, var(--kp-accent)); }   /* v1.501.0 (Lagerampel A1, Ralf 07.11.2026 Vorschau "Passt, so bauen"): rot = zurzeit nicht lieferbar; grau (neutral) = Grundfarbe des Punkts */
.kp-avail-sm { font-size: var(--font-xs); font-weight: 500; }
.kp-deliv { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0 0 var(--space-md); padding: var(--space-md); border: thin solid var(--border); border-radius: var(--radius-md); }
.kp-deliv legend { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-xs); font-weight: 700; }
.kp-deliv-opt { display: flex; gap: var(--space-sm); align-items: flex-start; cursor: pointer; }
.kp-deliv-opt > span { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.kp-deliv-opt small { color: var(--text-muted); }
.kp-deliv-opt textarea { width: 100%; margin-top: var(--space-xs); font: inherit; }
.kp-deliv-show { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.kp-sheet { max-width: 52rem; margin: 0 auto; padding: var(--space-xl); background: var(--card-bg); color: var(--text); }
.kp-sheet-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-md); border-bottom: .15rem solid var(--kp-main); }
.kp-sheet-logo { max-height: 3.5rem; max-width: 14rem; object-fit: contain; }
.kp-sheet-head > span { text-align: right; font-weight: 700; }
.kp-sheet h1 { margin: var(--space-lg) 0 0; font-size: var(--font-2xl); }
.kp-sheet-nr { margin: var(--space-xs) 0 var(--space-lg); color: var(--text-muted); }
.kp-sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-xl); align-items: start; }
.kp-sheet-img { width: 100%; max-height: 20rem; object-fit: contain; border: thin solid var(--border); border-radius: var(--radius-md); }
.kp-sheet-price { margin: 0 0 var(--space-md); font-size: var(--font-xl); font-weight: 800; color: var(--kp-main); }
.kp-sheet-tab { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); font-size: var(--font-sm); }
.kp-sheet-tab th, .kp-sheet-tab td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: thin solid var(--border); text-align: left; vertical-align: top; }
.kp-sheet-tab th { width: 40%; color: var(--text-muted); font-weight: 400; }
.kp-sheet h2 { font-size: var(--font-lg); margin: var(--space-lg) 0 var(--space-sm); }
.kp-sheet-foot { margin-top: var(--space-xl); padding-top: var(--space-sm); border-top: thin solid var(--border); color: var(--text-muted); font-size: var(--font-sm); }
@media print { .kp-sheet { max-width: none; padding: 0; } @page { margin: 1.5cm; } }
.kp-sheet-price small { font-size: var(--font-sm); font-weight: 400; color: var(--text-muted); }
.kp-min-qty { display: flex; align-items: center; gap: var(--space-xs); margin: 0; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--kp-accent) 16%, transparent); font-size: var(--font-sm); font-weight: 600; }   /* v1.336.0: Mindestbestellmenge */
/* v1.338.0 (Ralf: Rabatt und Rabattstaffeln anzeigen) */
.kp-disc { display: inline-flex; padding: 0 var(--space-xs); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--kp-accent) 22%, transparent); font-size: var(--font-xs); font-weight: 700; }
.kp-tiers th { padding: var(--space-xs) 0; color: var(--text-muted); font-size: var(--font-xs); font-weight: 600; text-align: left; }
.kp-tiers th.ta-right { text-align: right; }
/* v1.340.0 (Ralf: Restposten vor dem Login): oeffentliche Seite - schlichter Kopf, Einleitung, Suche, Kategorien, Kacheln, Anfrageformular */
.kp-public { background: var(--bg); }
.kp-pub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) var(--space-xl); background: var(--kp-main); color: var(--kp-on-main); }
.kp-pub-brand { color: inherit; text-decoration: none; font-size: var(--font-lg); }
.kp-pub-brand img { max-height: 2.75rem; max-width: 14rem; object-fit: contain; }
.kp-pub-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.kp-pub-actions .kp-login-langs { margin: 0; }
.kp-pub { max-width: 80rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-lg); }
.kp-pub-hero h1 { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-sm); font-size: var(--font-2xl); }
.kp-pub-hero p { margin: 0; max-width: 52rem; color: var(--text-muted); font-size: var(--font-lg); }
.kp-pub-filter { display: flex; gap: var(--space-sm); }
.kp-pub-filter input { flex: 1; height: 2.75rem; padding: 0 var(--space-md); border: thin solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); color: var(--text); font: inherit; }
.kp-pub-cats { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.kp-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border: thin solid var(--border); border-radius: var(--radius-full); background: var(--card-bg); color: var(--text); text-decoration: none; font-weight: 600; }
.kp-chip span { color: var(--text-muted); font-weight: 400; }
.kp-chip.is-on { border-color: var(--kp-main); background: var(--kp-main); color: var(--kp-on-main); }
.kp-chip.is-on span { color: inherit; }
.kp-pub-note { margin: 0; color: var(--text-muted); font-size: var(--font-sm); }
.kp-pub-form { padding: var(--space-xl); border: thin solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); }
.kp-pub-form h2 { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-md); }
.kp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.kp-form-grid .kp-field-wide, .kp-form-grid .kp-pub-ask { grid-column: 1 / -1; }
.kp-pub-ask { margin: 0; display: flex; align-items: center; gap: var(--space-xs); }
.kp-hp { position: absolute; left: -100rem; width: .0625rem; height: .0625rem; overflow: hidden; }
.kp-btn-sm { min-height: 2.25rem; padding: 0 var(--space-md); font-size: var(--font-sm); }
.kp-btn-clear { margin-top: var(--space-lg); background: var(--kp-accent); color: var(--text); }
.kp-cat-clear { color: var(--warning, var(--kp-accent)); }
@media (max-width: 40rem) { .kp-form-grid { grid-template-columns: 1fr; } .kp-pub-head { padding: var(--space-md); } }
.kp-pub-head .kp-login-langs .kp-lang-btn { color: var(--kp-on-main); background: transparent; border-color: color-mix(in srgb, var(--kp-on-main) 35%, transparent); }
.kp-pub-head .kp-login-langs .kp-lang-btn.is-on { border-color: var(--kp-accent); background: color-mix(in srgb, var(--kp-on-main) 14%, transparent); }
.kp-orig-label { color: var(--text-muted); font-size: var(--font-sm); font-weight: 600; }   /* v1.343.0: Bezeichnung des Vergleichspreises (UVP ...) */