/* ============================================================================
   seiten-brandpool.css — Anordnung der Seite `laden-brandpool.html`
   Brandpool 2.1 · angelegt 12.08.2026 beim Herauslösen des Markenkatalogs
   ----------------------------------------------------------------------------
   HERKUNFT
   Jede Regel steht wörtlich so in `einzelhaendler/prepage-einzelhaendler.html`.
   Die Zeilennummern stehen je Abschnitt dabei. UMGEZOGEN, NICHT UMGEBAUT:
   keine Regel ist neu, keine ist umgeschrieben, keine Zahl ist angefasst.

   WAS BEWUSST NICHT MITGEKOMMEN IST
     · der `:root`-Block — dieselben Werte stehen schon in `ui.css`
     · Kopfleiste, Reiter, mobiles Menü, Fußzeile — die macht jetzt `ui.css`
     · alles zu Profil, FAQ, Handelsbeziehungen, Chat, Prepage, Registrierung
     · `.verif-stamp` — steht bereits in `seiten.css`

   Die Datei wird NACH `ui.css` und `seiten.css` geladen. Wo eine Klasse
   doppelt vorkommt, gewinnt deshalb die Fassung aus dem Prototyp — genau das
   ist gewollt, solange die Seite gleich aussehen muss.
   ============================================================================ */

/* ============================================================================
   0 · GRUNDLAGE — aus dem Kopf des Prototyps (Zeilen 15-16, 23-28)
   Der Prototyp setzt diese vier Zeilen vor allem anderen. `ui.css` bringt sie
   nicht mit; ohne sie stünde die Seite mit Browser-Vorgaben da und sähe anders
   aus als heute.
   ============================================================================ */
/* Phosphor-Icons: an Textgröße/-farbe ausrichten */
i.ph, [class^="ph-"], [class*=" ph-"]{font-style:normal;line-height:1;vertical-align:-0.12em}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none}
input,textarea,select{font-family:inherit}
[data-tip]{cursor:pointer}

/* ============================================================================
   1 · HINWEISKASTEN (Tooltip) — Prototyp 30-46
   ============================================================================ */
/* Hinweiskasten (Variante D, gewählt 2026-07-29): helles Popover mit eigenem (i) im Kopf,
   Pfeilspitze zeigt auf das Symbol. Identisch in marke/markenpool-marke.html. */
.tooltip{position:fixed;z-index:200;max-width:300px;background:#fff;color:#4a515b;
  font-size:12.5px;line-height:1.6;padding:13px 15px 14px 42px;border-radius:12px;
  border:1px solid #dfe3e8;
  box-shadow:0 2px 6px rgba(16,18,29,.05),0 20px 50px rgba(16,18,29,.14);
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease}
.tooltip.show{opacity:1;transform:translateY(0)}
.tooltip::before{content:"i";position:absolute;left:14px;top:14px;width:18px;height:18px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent-dk);
  display:grid;place-items:center;font-size:11px;font-weight:800;font-style:normal;line-height:1}
.tooltip .tip-t{display:block;color:var(--text);font-size:13px;font-weight:800;
  letter-spacing:-.01em;margin-bottom:4px}
.tooltip .tip-b{display:block}
.tooltip .tip-arrow{position:absolute;width:10px;height:10px;background:#fff;
  border-right:1px solid #dfe3e8;border-bottom:1px solid #dfe3e8}

/* ============================================================================
   2 · ANGEBOTS-COMPOSER (Sammel-Anfrage) — Prototyp 85-143
   ============================================================================ */
/* P-10 Angebots-Composer (zweispaltig, weiß) */
/* WICHTIG: .popup.wide (weiter unten definiert, 500px) überschrieb das hier bei gleicher
   Spezifität — daher .popup.wide.reqwide (höhere Spezifität). */
.popup.reqwide, .popup.wide.reqwide{width:min(1280px,96vw);max-width:1280px;background:#fff}
.reqgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
.reqcol-right{border-left:1px solid var(--border)}
@media(max-width:720px){.reqgrid{grid-template-columns:minmax(0,1fr)}}
.reqcol{padding:18px 20px}
/* Checkout-Anmutung: Produktliste weiß, Angebotsspalte abgesetzt */
.reqcol-left{border-right:1px solid var(--border);background:var(--card)}
.reqcol-right{border-left:1px solid var(--border);background:#f7f8fa}
@media(max-width:720px){.reqcol-left{border-right:none;border-bottom:1px solid var(--border)}}
.reqcol-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
/* Sammel-Einstellung für alle Positionen */
.reqbulk{display:flex;align-items:flex-end;gap:11px;padding:0 0 8px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.reqbulk-sp{flex:1 1 auto;min-width:0;font-size:11px;color:var(--muted);font-weight:600}
.reqbulk-cells{display:flex;gap:12px;flex-wrap:nowrap;flex:0 0 auto;margin-left:auto}
/* Kopf- und Produktzellen exakt gleich breit — sonst fluchten die Spalten nicht */
.reqbulk-c,.reqitem-prov{width:104px;flex:0 0 104px;text-align:right}
.reqbulk-cells .reqbulk-c:last-child,.reqitem-steps .reqitem-prov:last-child{width:92px;flex:0 0 92px}
.reqbulk-c .rp-lbl{color:#aab0b8}
.reqbulk-c .rp-step{border-style:dashed}
.reqbulk-c button.set{display:block;margin:4px 0 0 auto;background:none;border:none;padding:0;font:inherit;font-size:11px;
  font-weight:700;color:var(--accent-dk);cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent-rand);text-underline-offset:2px}
.reqbulk-c button.set:hover{text-decoration-color:currentColor}
.reqcol .req-intro{font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.5}
.reqbrand{margin-bottom:16px}
/* Eigene Nachricht je Marke — eingeklappt, damit die Liste ruhig bleibt (HP 31.07.) */
.reqbrand-msg{margin:8px 0 0}
.reqbrand-msg-b{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:4px 0;
  font-size:12.5px;font-weight:700;color:var(--accent-dk);cursor:pointer}
.reqbrand-msg-b:hover{color:var(--text)}
.reqbrand-msg-b i{font-size:15px}
.reqbrand-msg-t{width:100%;margin-top:6px;min-height:64px;resize:vertical;border:1px solid var(--border);
  border-radius:10px;padding:9px 11px;font:inherit;font-size:13px;outline:none;background:#fff}
.reqbrand-msg-t:focus{border-color:var(--accent)}
.reqbrand-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.reqbrand-head .brand-logo{width:28px;height:28px;font-size:12px}
.reqbrand-name{font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.reqbrand-name .verif-stamp{height:16px;vertical-align:-3px}
.reqitem{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-top:1px solid var(--border);flex-wrap:wrap}
/* Produktname behält immer Platz; die beiden Stepper rutschen bei engem Popup in eine eigene Zeile */
.reqitem-main{flex:1 1 190px;min-width:150px}
.reqitem-steps{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
.reqitem-thumb{width:44px;height:44px;flex:0 0 auto;border-radius:8px;overflow:hidden;background:var(--bg);display:grid;place-items:center}
.reqitem-thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.reqitem-prov{flex:0 0 auto;text-align:right}
.reqitem-name{font-weight:600;font-size:13px;line-height:1.3}
.reqitem-sub{font-size:12px;color:var(--muted);margin-top:2px}
.reqitem .rp-lz{margin-top:6px;width:150px;max-width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:8px;font-size:12.5px}
.rp-lbl{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#aab0b8;font-weight:700;margin-bottom:4px}
.rp-step{display:inline-flex;align-items:center;gap:1px;border:1px solid var(--border);border-radius:8px;padding:1px;background:#fff}
.rp-step button{width:22px;height:24px;border:none;background:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);line-height:1}
.rp-step button:hover{background:var(--bg);color:var(--text)}
.rp-step input{width:34px;border:none;text-align:center;font-size:12.5px;font-weight:600;color:var(--text);background:none;-moz-appearance:textfield}
.rp-step input::-webkit-outer-spin-button,.rp-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rp-pct{font-size:11px;color:#aab0b8;font-weight:600}
.reqcheck{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;margin-top:4px}
.reqcheck input{width:16px;height:16px}

/* ============================================================================
   3 · KOPFBEREICH UND ABLAUF-TIMELINE — Prototyp 223-263
   ============================================================================ */
.hero{padding:34px 0 8px}
.hero h1{font-size:30px;letter-spacing:-.03em;margin-bottom:8px}
.hero p{color:var(--muted);max-width:680px;font-size:15px}

/* Horizontale Schritt-Timeline (Variante A) */
.flow{margin:20px 0 2px;position:relative}
.flow-steps{display:flex;gap:0;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.flow-steps::-webkit-scrollbar{display:none}
.flow-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  text-align:center;position:relative;cursor:default}
.flow-step:not(:last-child)::after{content:"";position:absolute;top:15px;left:50%;width:100%;
  height:2px;background:var(--border);z-index:0}
.flow-num{width:31px;height:31px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;
  font-size:13px;display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 0 0 4px var(--bg);
  transition:box-shadow .12s}
.flow-label{font-size:11px;color:var(--text);margin-top:9px;line-height:1.32;padding:0 7px;transition:color .12s}
.flow-step.active .flow-num{box-shadow:0 0 0 4px var(--accent),0 0 0 6px var(--accent-soft)}
.flow-step.active .flow-label{color:var(--accent);font-weight:700}
.flow-caption{margin-top:12px;background:var(--accent-soft);border-radius:8px;padding:11px 13px;
  font-size:12.5px;line-height:1.5;color:var(--akzent-tinte)}
.flow-more{display:none}
.flow-foot{font-size:11px;color:var(--muted);margin-top:8px}
/* Vertikaler Strahl im Popup */
.vflow{display:flex;flex-direction:column;gap:0}
.vflow-step{display:flex;gap:13px;position:relative;padding-bottom:18px}
.vflow-step:not(:last-child)::after{content:"";position:absolute;left:15px;top:31px;bottom:0;width:2px;background:var(--border)}
.vflow-num{width:31px;height:31px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;
  font-size:13px;display:grid;place-items:center;flex:0 0 auto;position:relative;z-index:1}
.vflow-txt{padding-top:2px}
.vflow-t{font-size:13px;font-weight:700}
.vflow-d{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px}
@media(max-width:640px){
  .flow-step{flex:0 0 120px}.flow-label{font-size:11px}
  .flow-caption{display:none}
  .flow{padding-right:30px}
  .flow::after{content:"";position:absolute;right:0;top:0;bottom:34px;width:42px;
    background:linear-gradient(90deg,transparent,var(--bg));pointer-events:none}
  .flow-more{display:inline-flex;align-items:center;gap:5px;margin-top:10px;background:var(--card);
    border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:8px 15px;
    font-size:12.5px;font-weight:700;cursor:pointer;position:relative;z-index:2}
}

/* ============================================================================
   4 · SUCHZEILE — Prototyp 265-281
   ============================================================================ */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0 6px}
.search{flex:1;min-width:220px;position:relative}
.search input{width:100%;padding:11px 38px 11px 38px;border:1px solid var(--border);border-radius:10px;
  background:var(--card);font-size:14px;outline:none}
.search input:focus{border-color:var(--accent)}
.search::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;opacity:.55;background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none" stroke="%236b7280" stroke-width="16"><circle cx="112" cy="112" r="72"/><line x1="168" y1="168" x2="224" y2="224"/></svg>')}
/* Aktiver Kategorie-Filter direkt in der Suchzeile: "N Kategorien aktiv" + X zum Zurücksetzen */
.filter-active{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;align-items:center;gap:7px;
  border:none;background:transparent;cursor:pointer;padding:0;font:inherit;font-size:13px;color:var(--accent);white-space:nowrap}
.filter-active.show{display:flex}
.filter-active .fa-x{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:#e8f3e4;color:#2f6b2a;font-size:12px;line-height:1;transition:background .12s}
.filter-active:hover .fa-x{background:#d3e9cd}
.search.has-filter input{padding-right:var(--fa-pad,150px)}
.search.has-filter.has-clear .filter-active{right:38px}
@media(max-width:640px){ .filter-active .fa-txt{display:none} .search.has-filter input{padding-right:70px} }
.count-note{color:var(--muted);font-size:13px}

/* ============================================================================
   5 · MARKENLISTE — Prototyp 283-340
   ============================================================================ */
.brand-rows{display:flex;flex-direction:column;gap:16px;padding:18px 0 90px}
/* Trennlinie zwischen Kern-Marken einer Welt und Marken mit einzelnen Produkt-Treffern */
.tier-divider{display:flex;align-items:center;gap:14px;margin:30px 0 12px;color:var(--accent-dk);font-size:14px;font-weight:700}
.tier-divider::before,.tier-divider::after{content:'';flex:1;border-top:2px solid var(--accent-rand)}
.tier-divider span{background:var(--accent-soft);border:1px solid var(--accent-rand);border-radius:999px;padding:9px 18px;text-align:center}
.brand-row{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;cursor:pointer;transition:box-shadow .12s,border-color .12s}
.brand-row:hover{box-shadow:var(--shadow);border-color:#d3d6de}
.brand-row-head{display:flex;align-items:flex-start;gap:10px 12px;flex-wrap:wrap;margin-bottom:15px}
.brand-row-id{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.brand-row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 100%;order:3}
.brand-head-text{min-width:0}
.brand-logo{border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;flex-shrink:0;overflow:hidden}
.brand-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.brand-row-head .brand-logo{width:42px;height:42px;font-size:15px}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.01em}
.brand-tag{color:var(--muted);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;max-width:520px}
.brand-row-head .spacer{flex:1}
.brand-row-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;order:2}
.link-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--bg);
  border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:12.5px;
  font-weight:600;color:var(--text);cursor:pointer;text-decoration:none;
  font-family:inherit;line-height:1.2;box-sizing:border-box;height:32px;min-width:104px}
.link-btn:hover{background:#eef0f3}
.meta-pill{background:var(--bg);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--muted)}
.brand-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.brand-strip>*{min-width:0}
.brand-prod .prod-thumb img,.brand-prod .prod-thumb .g-img{max-width:100%}
.brand-prod{display:flex;flex-direction:column;gap:7px}
.brand-prod .thumb{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font-size:30px;
  overflow:hidden;background:#fff;border:1px solid var(--border)}
.brand-prod .thumb img{width:100%;height:100%;object-fit:contain}
.brand-prod .prod-thumb{aspect-ratio:1;border-radius:10px;overflow:hidden;background:#fff;
  border:1px solid var(--border)}
.brand-prod .pname{font-size:11px;text-align:center;color:var(--muted);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.skel{background:linear-gradient(90deg,#eef0f3 25%,#f6f7f9 37%,#eef0f3 63%);background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;border-radius:10px;aspect-ratio:1}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.more-tile{border:1px dashed var(--accent-rand);border-radius:10px;display:grid;place-items:center;
  aspect-ratio:1;font-weight:800;font-size:15px;color:var(--accent);background:var(--accent-soft);
  text-align:center;line-height:1.25}
.brand-row:hover .more-tile{background:var(--accent-soft)}
.btn{padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;transition:.12s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-ghost{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:#eef0f3}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.prov-badge{display:inline-flex;align-items:center;gap:5px;background:var(--green-soft);color:var(--green);
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.pl-val{display:inline-block;min-width:34px;border-radius:5px;color:transparent;user-select:none;
  background:var(--accent-rand);animation:plPulse 2.8s ease-in-out infinite;vertical-align:middle}
@keyframes plPulse{0%,100%{opacity:.55}50%{opacity:.9}}
@media(max-width:760px){.brand-strip{grid-template-columns:repeat(3,1fr)}}

.state-msg{padding:50px 20px;text-align:center;color:var(--muted);font-size:14px}

/* ============================================================================
   6 · WARENKORB-KNOPF UND ABDUNKLUNG — Prototyp 342-363
   ============================================================================ */
/* Warenkorb bleibt im Brandpool immer oben — auch über Overlay + Marken-Detailansicht
   (Overlay 50, Modal 55). Unter den Popups (60), damit Dialoge ihn überdecken. */
.fab{position:fixed;right:22px;bottom:22px;z-index:57;background:var(--text);color:#fff;
  border-radius:999px;padding:13px 20px;display:flex;align-items:center;gap:12px;
  box-shadow:0 10px 30px rgba(16,18,29,.28);font-size:14px}
.fab:hover{transform:translateY(-2px)}
.fab .fab-margin{color:var(--accent);font-weight:800}
.fab .fab-sep{width:1px;height:18px;background:rgba(255,255,255,.25)}

.overlay{position:fixed;inset:0;background:rgba(16,18,29,.45);z-index:50;display:none;backdrop-filter:blur(2px)}
/* Angebots-Composer offen: Overlay über Modal/Drawer (55) — alles dahinter wird grau. */
body.composer-open .overlay{z-index:56;background:rgba(16,18,29,.55)}
body.composer-open .fab{display:none}
/* Warenkorb offen: dito — Overlay über das Modal, Drawer bleibt oben. */
body.cart-open .overlay{z-index:56;background:rgba(16,18,29,.55)}
body.cart-open .drawer{z-index:58}
body.cart-open .fab{display:none}
/* Composer offen: er liegt über allem — Overlay über den Warenkorb-Drawer heben,
   damit auch der grau wird (muss NACH den cart-open-Regeln stehen). */
body.composer-open .overlay{z-index:59;background:rgba(16,18,29,.55)}
body.composer-open .drawer{z-index:55}
.overlay.open{display:block}

/* ============================================================================
   7 · MARKEN-FENSTER — Prototyp 365-442
   ============================================================================ */
.modal{position:fixed;z-index:55;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1020px,96vw);max-height:90vh;background:var(--card);border-radius:18px;
  display:none;flex-direction:column;overflow-y:auto;overflow-x:hidden;box-shadow:0 30px 80px rgba(16,18,29,.4)}
.modal.open{display:flex}
.modal-head{padding:22px 24px;border-bottom:1px solid var(--border)}
.modal-head-top{display:flex;align-items:flex-start;gap:14px}
.modal-head .brand-logo{width:54px;height:54px;font-size:20px}
.modal-title h2{font-size:20px;letter-spacing:-.02em}
.modal-title p{color:var(--muted);font-size:13px}
.desc-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.desc-open{display:block;-webkit-line-clamp:unset;overflow:visible}
.desc-more{display:inline-block;margin-top:3px;background:none;border:none;padding:0;
  color:var(--green);font-weight:700;font-size:12.5px;cursor:pointer}
.x-close{margin-left:auto;background:var(--bg);width:34px;height:34px;border-radius:8px;
  font-size:15px;color:var(--muted);flex-shrink:0}
.x-close:hover{background:#eef0f3}
.modal-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.meta-chip{background:var(--bg);border-radius:8px;padding:7px 12px;font-size:12.5px}
.meta-chip b{font-weight:700}
.modal-meta .btn{margin-left:auto}
.modal-meta .modal-actions{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.modal-meta .modal-actions .btn{margin-left:0}
/* Website: Textlink statt Button — nur der Kontakt-Button bleibt als CTA.
   Unterstrich fährt beim Hover von links ein, Pfeil wandert mit. */
.web-link{background:none;border:none;padding:0 2px 3px;font:inherit;font-size:13px;
  font-weight:700;letter-spacing:-.01em;color:var(--text);text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;position:relative;white-space:nowrap;
  align-self:center}
.web-link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--text);transform:scaleX(0);transform-origin:right;
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.web-link:hover::after{transform:scaleX(1);transform-origin:left}
.web-link .ar{transition:transform .2s ease;font-weight:400}
.web-link:hover .ar{transform:translateX(3px)}
.modal-head.has-details{padding-bottom:3px}
.brand-details{width:100%;display:flex;justify-content:space-between;align-items:stretch;
  border-top:1px solid var(--border);margin-top:9px;padding:3px 0 0;font-size:11px;letter-spacing:.02em}
.brand-details .bd-i{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;position:relative}
.brand-details .bd-i+.bd-i::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:1em;width:1px;background:var(--border)}
.brand-details .bd-k{color:#9aa0a8;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.brand-details .bd-v{color:#727880;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.brand-details .bd-v.off{color:#c2c7ce}
.brand-details .bd-sset{display:inline-flex;align-items:center;gap:7px}
.brand-details .bd-sic{width:14px;height:14px;color:#9298a0;display:inline-flex}
.brand-details .bd-sic svg{width:14px;height:14px}
.brand-details .bd-sic:hover{color:var(--accent)}
.brand-details .bd-link{color:var(--accent);border-bottom:1px dotted currentColor;cursor:pointer;
  background:none;border-top:0;border-left:0;border-right:0;padding:0;font:inherit;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.brand-details .bd-link:hover{color:var(--accent-d,var(--accent));border-bottom-style:solid}
/* „Mehr anzeigen"-Zelle: dezent wie ein Label, dünn, unterstrichen */
.brand-details .bd-more{background:none;border:none;font-family:inherit;font-size:11px;line-height:1;letter-spacing:.02em;
  color:#9aa0a8;font-weight:400;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#cfd3d9;padding:0;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.brand-details .bd-more:hover{color:#727880;text-decoration-color:#9aa0a8}
/* Detail-Popup „Markendetails" */
#brandDetailPopup .bdp-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--border);font-size:13px}
#brandDetailPopup .bdp-row:last-child{border-bottom:none}
#brandDetailPopup .bdp-k{color:var(--muted)}
#brandDetailPopup .bdp-v{font-weight:600;text-align:right}
#brandDetailPopup .bdp-sec{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#b6bcc4;margin:14px 0 2px}
#brandDetailPopup .bdp-sec:first-child{margin-top:2px}
.gl-sub{margin:0 0 12px;font-size:13px;color:var(--muted)}
.gl-chips{display:flex;flex-wrap:wrap;gap:6px}
.gl-chips span{font-size:13px;background:var(--bg);border:1px solid var(--border);
  color:var(--text);padding:4px 10px;border-radius:8px}
.cat-pill .cat-star{color:#f5b301;font-size:11px}
.cat-pill.active .cat-star{color:#fff}
.prod-thumb .ts-badge{position:absolute;top:7px;right:7px;z-index:4;width:20px;height:20px;
  border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(16,18,29,.18);
  display:grid;place-items:center;font-size:12px;line-height:1;color:#f5b301}
@media(max-width:640px){
  .modal-head.has-details{padding-bottom:11px}
  .brand-details{flex-wrap:wrap;gap:4px 14px;font-size:11px}
  .brand-details .bd-i{flex:1 1 42%;justify-content:flex-start}
  .brand-details .bd-i+.bd-i::before{display:none}
}

/* ============================================================================
   8 · PRODUKTLISTE IM MARKEN-FENSTER — Prototyp 444-501
   ============================================================================ */
.modal-toolbar{padding:14px 24px;border-bottom:1px solid var(--border);display:flex;
  gap:12px;flex-wrap:wrap;align-items:center;background:var(--card)}
.cats-wrap{display:flex;align-items:center;gap:4px;flex:1 1 100%;min-width:0}
.cats{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;flex:1 1 auto;min-width:0;
  scrollbar-width:none;scroll-behavior:smooth}
.cats::-webkit-scrollbar{display:none}
.cats-arrow{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg);cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;
  color:var(--text)}
.cats-arrow:hover{background:#eef0f3}
.cat-pill{background:var(--bg);border:1px solid var(--border);border-radius:999px;
  padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.cat-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.modal-body{padding:18px 24px 24px;overflow:visible}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.prod-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.prod-thumb{aspect-ratio:1;display:grid;place-items:center;font-size:40px;position:relative;background:#fff}
.prod-thumb img{width:100%;height:100%;object-fit:contain}
.prod-thumb .g-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.prod-thumb .g-nav{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;
  border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(16,18,29,.18);
  color:var(--text);font-size:17px;line-height:1;display:grid;place-items:center;
  opacity:0;transition:opacity .12s;z-index:3;padding-bottom:2px}
.prod-thumb .g-prev{left:7px}
.prod-thumb .g-next{right:7px}
.prod-thumb:hover .g-nav{opacity:1}
.prod-thumb .g-nav:hover{background:#fff}
.prod-thumb .g-dots{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;z-index:3}
.prod-thumb .g-dots i{width:5px;height:5px;border-radius:50%;background:rgba(16,18,29,.22);transition:background .12s}
.prod-thumb .g-dots i.on{background:var(--accent)}
.prod-thumb .g-ph{font-size:40px}
.prod-cat{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.92);font-size:11px;
  font-weight:700;padding:3px 7px;border-radius:6px;color:var(--muted)}
.prod-info{padding:11px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.prod-name{font-size:13px;font-weight:600;line-height:1.35}
.prod-desc{font-size:11px;color:var(--muted);line-height:1.42;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod-price{display:flex;align-items:baseline;gap:6px;margin-top:auto}
.prod-price .uvp{font-size:15px;font-weight:800}
.prod-price .uvp-l{font-size:11px;color:var(--muted)}
.prod-margin{font-size:11px;color:var(--green);font-weight:700;background:var(--green-soft);
  padding:3px 7px;border-radius:6px;align-self:flex-start}
.prod-btn{padding:8px;border-radius:8px;font-size:12.5px;font-weight:700;background:var(--accent);color:#fff}
.prod-btn:hover{background:var(--accent-dk)}
.prod-btn.in{background:var(--green-soft);color:var(--green)}
.no-results{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px;font-size:14px}
.wish-box{grid-column:1/-1;text-align:center;max-width:470px;margin:22px auto;padding:28px 24px;
  background:var(--green-soft);border-radius:16px}
.wish-emoji{font-size:30px;margin-bottom:6px}
.wish-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:6px;line-height:1.35}
.wish-sub{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.wish-input,.wish-email{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  font-size:13px;font-family:inherit;margin-bottom:10px;background:var(--card);color:var(--text);box-sizing:border-box}
.wish-input{resize:vertical}
.wish-btn{width:100%}
.wish-err{color:#c0392b;font-size:12.5px;margin-top:6px}

/* ============================================================================
   9 · WARENKORB-SCHUBLADE UND MARGENRECHNER — Prototyp 503-558
   ============================================================================ */
.drawer{position:fixed;z-index:55;right:0;top:0;height:100vh;width:min(440px,100vw);
  background:var(--card);transform:translateX(105%);transition:transform .25s ease;
  display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(16,18,29,.25)}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.drawer-head h2{font-size:17px}
.drawer-head p{font-size:12px;color:var(--muted)}
.drawer-body{flex:1;overflow-y:auto;padding:16px 22px}
.bulk{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:10px;
  padding:9px 12px;margin-bottom:14px;font-size:12.5px;color:var(--muted)}
.bulk input{width:54px;padding:5px 7px;border:1px solid var(--border);border-radius:8px;text-align:center;font-size:13px}
.bulk button{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600}

.cart-line{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--border)}
.cart-thumb{width:48px;height:48px;border-radius:8px;display:grid;place-items:center;font-size:22px;
  flex-shrink:0;overflow:hidden;background:#fff;border:1px solid var(--border)}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
.cart-line-main{flex:1;min-width:0}
.cart-line-name{font-size:13px;font-weight:600;line-height:1.3}
.cart-line-brand{font-size:11px;color:var(--muted)}
.cart-line-foot{display:flex;align-items:center;gap:8px;margin-top:7px}
.stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.stepper button{width:26px;height:26px;background:var(--bg);font-size:14px;color:var(--muted)}
.stepper button:hover{background:#eef0f3}
.stepper input{width:42px;height:26px;border:none;border-left:1px solid var(--border);
  border-right:1px solid var(--border);text-align:center;font-size:12.5px;outline:none}
.stepper-l{font-size:11px;color:var(--muted)}
.cart-line-margin{margin-left:auto;text-align:right}
.cart-line-margin .m{font-size:13px;font-weight:800;color:var(--green)}
.cart-line-margin .ml{font-size:11px;color:var(--muted)}
.line-x{background:none;color:var(--muted);font-size:11px;text-decoration:underline;padding:2px 0}

.cart-empty{text-align:center;color:var(--muted);padding:60px 20px}
.cart-empty .big{font-size:40px;margin-bottom:10px}

.drawer-foot{border-top:1px solid var(--border);padding:18px 22px;background:var(--card)}
.calc-box{background:var(--green-soft);border-radius:12px;padding:15px;margin-bottom:12px}
.calc-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--akzent-tinte)}
.calc-row.total{border-top:1px dashed rgba(5,150,105,.35);margin-top:6px;padding-top:9px}
.calc-row.total .big{font-size:22px;font-weight:800;color:var(--green)}
.calc-row span[data-tip]{border-bottom:1px dotted rgba(31,61,51,.4)}
.req-cta{width:100%;margin-bottom:10px}
.calc-hint{font-size:11px;color:var(--muted);line-height:1.4}
/* Rechner-Toggle + Info-Icon */
.calc-toggle{display:flex;align-items:center;gap:9px;background:var(--bg);border-radius:10px;
  padding:10px 12px;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--text)}
.calc-toggle .ct-sub{font-weight:400;color:var(--muted);font-size:11px}
.sw{position:relative;width:42px;height:24px;flex:0 0 auto;margin-left:auto}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw label{position:absolute;inset:0;background:#cfd3da;border-radius:999px;cursor:pointer;transition:.15s}
.sw label::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;
  top:3px;left:3px;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw input:checked + label{background:var(--accent)}
.sw input:checked + label::after{transform:translateX(18px)}
.req-cta-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.req-cta-row .req-cta{margin-bottom:0;flex:1}

/* ============================================================================
   10 · FENSTER (Popup) — Prototyp 560-590
   ============================================================================ */
.popup{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(440px,92vw);max-height:calc(100vh - 32px);background:var(--card);border-radius:16px;display:none;
  flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(16,18,29,.45)}
/* Kopf und Fuß bleiben sichtbar, nur der Inhalt scrollt */
.popup>.popup-head,.popup>.popup-foot{flex:0 0 auto}
.popup .popup-body{flex:1 1 auto;min-height:0;overflow-y:auto}
.popup>div[id]{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.popup.open{display:flex}
.popup.wide{width:min(500px,94vw)}
.popup-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center}
.popup-head h3{font-size:15px}
.popup-body{padding:18px 20px;display:flex;flex-direction:column;gap:12px;max-height:66vh;overflow-y:auto}
.field label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px}
.field label .rq{color:#dc2626;font-weight:700}
.field-hint{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.bchip{padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:var(--card);
  color:var(--text);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s}
.bchip:hover{border-color:#c7cbd4;background:#fafbfc}
.bchip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.faq-q{font-weight:700;font-size:13px;margin-bottom:4px}
.faq-a{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:15px}
.faq-a:last-child{margin-bottom:0}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:8px;font-size:13px;outline:none;background:var(--card)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field textarea{resize:vertical;min-height:84px}
.cc-note{font-size:11px;color:var(--muted);background:var(--bg);padding:9px 11px;border-radius:8px;line-height:1.45}
.form-err{font-size:12px;color:#dc2626;font-weight:600}
.popup-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px}
.popup-foot .btn{flex:1}

/* ============================================================================
   11 · PRODUKTDETAIL — Prototyp 591-633
   ============================================================================ */
/* Produkt-Detail-Popup */
.popup.pd{width:min(860px,95vw);max-width:860px}
.pd-x{position:absolute;top:12px;right:12px;z-index:5;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(16,18,29,.15)}
.pd-grid{display:grid;grid-template-columns:1fr 1fr}
.pd-media{background:#fff;padding:18px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--border)}
.pd-stage{position:relative;flex:1;min-height:280px;display:grid;place-items:center;background:#fff;border-radius:12px;overflow:hidden}
.pd-stage .pd-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pd-stage .pd-ph{font-size:66px}
.pd-stage .g-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(16,18,29,.2);
  color:var(--text);font-size:20px;line-height:1;display:grid;place-items:center;z-index:3;padding-bottom:2px;cursor:pointer}
.pd-stage .g-prev{left:10px}
.pd-stage .g-next{right:10px}
.pd-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.pd-thumb-b{width:50px;height:50px;border-radius:8px;border:2px solid var(--border);overflow:hidden;background:#fff;padding:0;cursor:pointer}
.pd-thumb-b.on{border-color:var(--accent)}
.pd-thumb-b img{width:100%;height:100%;object-fit:contain}
.pd-info{padding:30px 28px 26px;display:flex;flex-direction:column;gap:10px}
.pd-cat{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pd-name{font-size:23px;letter-spacing:-.02em;line-height:1.2}
.pd-brand{font-size:13px;color:var(--muted)}
.pd-desc{font-size:13px;color:var(--text);line-height:1.55;margin-top:2px}
.pd-desc.pd-desc-ph{font-style:italic;opacity:.55}
.pd-spacer{flex:1;min-height:10px}
.pd-pricebox{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--bg);border-radius:12px;padding:15px 17px}
.pd-price{display:flex;align-items:baseline;gap:6px;flex-shrink:0;white-space:nowrap}
.pd-uvp{font-size:26px;font-weight:800;white-space:nowrap}
.pd-uvp-l{font-size:11px;color:var(--muted)}
.pd-margin{font-size:12px;color:var(--green);font-weight:600;text-align:right;line-height:1.5}
.pd-margin b{font-size:17px;display:block}
.pd-margin span{display:block}
.pd-add{width:100%;padding:14px;font-size:14px}
.pd-add.in{background:var(--green);color:#fff}
.prod-card{cursor:pointer}
@media(max-width:640px){
  .popup.pd{width:96vw}
  .pd-grid{grid-template-columns:1fr}
  .pd-media{border-right:none;border-bottom:1px solid var(--border)}
  .pd-info{padding:22px 20px}
}
.ok-state{padding:30px 24px;text-align:center}
.ok-state .big{font-size:40px;margin-bottom:8px}

/* ============================================================================
   12 · STATUSZEILE IM WARENKORB UND COMPOSER — Prototyp 653-656
   ============================================================================ */
.vstatus{font-size:11px;border-radius:8px;padding:9px 11px;margin-bottom:10px;line-height:1.45}
.vstatus.none{background:var(--bg);color:var(--muted)}
.vstatus.ok{background:var(--green-soft);color:var(--green);font-weight:600}
.vstatus .verif-stamp{height:20px;vertical-align:middle}

/* ============================================================================
   13 · MOBIL — Prototyp 664, 666-728
   ============================================================================ */
@media(max-width:560px){.hero h1{font-size:24px}}
/* ===== MOBILE (≤640px) — Overflow-Fix + spreat.com/brandpool-Look ===== */
@media(max-width:640px){
  html{overflow-x:hidden}
  body{overflow-x:clip}
  .wrap{padding:0 14px}

  /* Topbar: kompakt (FAB unten übernimmt den Warenkorb) */
  .tb-top{padding:9px 0}
  .logo{gap:6px}
  .logo .logo-sub{font-size:12px;padding-left:7px}
  .topbar .btn-ghost{display:none}
  #authArea .link-btn{min-width:0;height:30px;padding:6px 11px;font-size:12px}

  /* Hero + Toolbar enger */
  .hero{padding:18px 0 2px}
  .hero h1{font-size:22px;line-height:1.18}
  .hero p{font-size:13px}
  .toolbar{margin:14px 0 2px}
  .brand-rows{gap:12px;padding:12px 0 96px}

  /* Marken-Karte */
  .brand-row{padding:14px}
  .brand-row-head{margin-bottom:12px;gap:8px}
  .brand-row-id{flex:1 1 100%}
  .brand-row-head .brand-logo{width:38px;height:38px;font-size:14px}
  .brand-name{font-size:15px}
  .brand-tag{font-size:12px;max-width:none}
  .brand-row-actions{flex:1 1 100%;margin-left:0;order:3}
  .brand-row-actions .link-btn{flex:1 1 0;min-width:0}
  .brand-row-meta{order:2;gap:6px}
  .prov-badge,.meta-pill{font-size:11px}

  /* Produkte: 2 Kacheln nebeneinander */
  .brand-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .brand-prod .pname{font-size:11px}

  /* Marken-Popup & Produkt-Detail als Vollbild-Sheet (aufgeräumt, app-artig) */
  .modal{left:0;top:0;transform:none;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;overflow-y:auto}
  .modal-head{padding:13px 16px;background:var(--card)}
  .modal-head-top{padding-right:44px}
  .modal .x-close{position:fixed;top:10px;right:10px;z-index:6;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(16,18,29,.2)}
  .modal-head .brand-logo{width:42px;height:42px;font-size:15px}
  .modal-title h2{font-size:17px}
  .modal-meta{gap:7px;margin-top:10px}
  .modal-meta .modal-actions{flex:1 1 100%;margin-left:0;gap:14px}
  .modal-meta .modal-actions .btn{flex:1 1 0;text-align:center}
  /* Textlink bleibt schmal, nur der Kontakt-Button füllt die Restbreite */
  .modal-meta .modal-actions .web-link{flex:0 0 auto}
  .modal-toolbar{padding:11px 16px;gap:8px}
  .modal-toolbar .search{min-width:0;flex:1 1 100%}
  .modal-body{padding:14px 16px 28px;flex:none;overflow:visible}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .prod-card .prod-name{font-size:12.5px;line-height:1.25}
  .prod-info{padding:10px}
  .prod-info .prod-desc{display:none}
  .popup.pd{left:0;top:0;transform:none;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;overflow-y:auto}
  .pd-x{top:10px;right:10px}
  .pd-stage{min-height:46vw}
  .pd-info{padding:18px 16px 28px}

  /* FAB etwas kompakter */
  .fab{right:14px;bottom:16px;padding:12px 16px;font-size:13px}
}

/* ============================================================================
   14 · BRANCHEN-FILTER — Prototyp 730-799
   ============================================================================ */
/* ===== Branchen-Filter ===== */
.filterwrap{margin:14px 0 2px}
.filterbar{display:flex;flex-direction:column;gap:9px}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);color:var(--text);font-size:13px;
  font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s;line-height:1}
.fchip:hover{border-color:#c7cbd4;background:#fafbfc}
/* Nicht ausgewählt: wie jeder andere Chip (kein Grün). Grün erst im aktiven Zustand. */
.fchip.fchip-mine{font-weight:700}
.fchip.fchip-mine:hover{border-color:#c7cbd4;background:#fafbfc}
.fchip.fchip-mine.active{background:var(--accent);border-color:var(--accent);color:#fff}
.fchip-mine .fchip-i{margin-left:6px;vertical-align:middle;background:var(--bg);border-color:var(--border);color:var(--muted)}
.fchip.fchip-mine.active .fchip-i{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);color:#fff}
.fchip.fchip-mine.active .fchip-i:hover{background:rgba(255,255,255,.36);border-color:#fff;color:#fff}
.fchip .n{color:var(--muted);font-weight:600;font-size:11px}
.fchip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.fchip.active .n{color:var(--accent-rand)}
.fchip.sub{font-size:12.5px;padding:6px 12px}
.fchip.sub.active{background:var(--text);border-color:var(--text);color:#fff}
.fchip.sub.active .n{color:#cfd2da}
.filter-count{margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.filter-reset{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 4px}
.filter-mobilebtn{display:none}
.filtersheet-ov{position:fixed;inset:0;background:rgba(16,18,29,.45);z-index:58;display:none}
.filtersheet-ov.open{display:block}
.filtersheet{position:fixed;left:0;right:0;bottom:0;z-index:59;background:var(--card);
  border-radius:18px 18px 0 0;max-height:84vh;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .26s ease;box-shadow:0 -10px 40px rgba(16,18,29,.25)}
.filtersheet.open{transform:translateY(0)}
.filtersheet-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.filtersheet-head h3{font-size:15px;margin:0}
.filtersheet-body{overflow-y:auto;padding:4px 0}
.fs-item{border-bottom:1px solid var(--border)}
.fs-haupt{display:flex;align-items:center;gap:9px;width:100%;padding:14px 18px;background:none;border:none;
  font-size:15px;font-weight:600;color:var(--text);text-align:left;cursor:pointer}
.fs-haupt .n{color:var(--muted);font-weight:600;font-size:12px;margin-left:auto}
.fs-haupt .chev{transition:transform .2s;color:var(--muted);display:inline-block}
.fs-item.open .fs-haupt .chev{transform:rotate(90deg)}
.fs-haupt.sel{color:var(--accent)}
.fs-subs{display:none}
.fs-item.open .fs-subs{display:block;padding-bottom:8px}
.fs-sub{display:flex;align-items:center;gap:8px;width:100%;padding:10px 18px 10px 42px;background:none;border:none;
  font-size:14px;color:var(--text);text-align:left;cursor:pointer}
.fs-sub .n{color:var(--muted);font-size:12px;margin-left:auto}
.fs-sub.sel{color:var(--accent);font-weight:600}
.filtersheet-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:10px}
.filtersheet-foot .btn{flex:1;text-align:center}

@media(max-width:640px){
  .filterbar .filter-row{display:none}
  .filter-mobilebtn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card);
    font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
  .filter-mobilebtn .fb-left{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}
  .filter-mobilebtn .fb-val{color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filter-mobilebtn .fb-badge{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;
    min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex:0 0 auto}
}

/* Unterkategorie-Chips heben sich von Branche-Chips ab */
.filter-row.subs{align-items:center;gap:7px;padding:8px 11px;background:var(--accent-soft);border-radius:12px;margin-top:1px}
.subs-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);opacity:.75;margin-right:3px;white-space:nowrap}
.subchip{display:inline-flex;align-items:center;padding:5px 11px;border-radius:8px;border:1px dashed var(--accent-rand);
  background:#fff;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s}
.subchip:hover{border-style:solid;background:#fbfbff}
.subchip.active{background:var(--accent);border-color:var(--accent);border-style:solid;color:#fff}
@media(max-width:640px){
  body.shopview .modal-body{padding-bottom:84px}
}

/* ============================================================================
   15 · KLEINIGKEITEN AM MARKEN-FENSTER — Prototyp 800-810
   ============================================================================ */
.modal-head-icons{margin-left:auto;display:flex;align-items:center;gap:6px}
.modal-head-icons .x-close{margin-left:0}
.share-ic{color:var(--muted)}
.share-ic:hover{color:var(--text)}
.share-ic.copied{color:var(--accent);background:var(--accent-soft)}
.hl-hand{position:relative;white-space:nowrap;color:inherit}
.hl-hand::after{content:'';position:absolute;left:-4px;right:-4px;bottom:-.18em;height:.40em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C20 5 100 5 118 6 C100 11 20 11 2 10 Z' fill='%232CB461'/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none}
@media(max-width:560px){.hl-hand{white-space:normal}}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;background:var(--bg);border-radius:50%;color:var(--muted);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:12px;line-height:1;padding:0}
.search-clear.show{display:flex}
.search-clear:hover{background:#eef0f3;color:var(--text)}

/* ============================================================================
   16 · REGISTRIER-RAHMEN ZWISCHEN DEN MARKEN — Prototyp 1192-1215
   ============================================================================ */
/* 5er-CTA-Werbefläche zwischen den Marken */
.brand-row.cta-row{cursor:pointer;border:1.5px dashed var(--accent);
   background:
     radial-gradient(520px 240px at 88% -20%, rgba(44,180,97,.16), transparent 60%),
     linear-gradient(180deg,var(--accent-soft),#fff);
   padding:26px 28px;display:block}
.brand-row.cta-row:hover{box-shadow:0 6px 26px rgba(44,180,97,.16);border-color:var(--green)}
.cta-head{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.cta-row .cta-ico{width:56px;height:56px;flex:0 0 auto;border-radius:16px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:26px;box-shadow:0 6px 16px rgba(44,180,97,.35)}
.cta-row .cta-txt{flex:1 1 300px;min-width:220px}
.cta-row .cta-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--green)}
.cta-row .cta-title{font-weight:800;font-size:23px;letter-spacing:-.01em;color:var(--text);line-height:1.15;margin-top:2px}
.cta-row .cta-sub{color:var(--muted);font-size:14px;margin-top:5px;line-height:1.5;max-width:640px}
.cta-row .cta-btn{flex:0 0 auto;white-space:nowrap;font-size:15px;padding:14px 26px;border-radius:12px;box-shadow:0 6px 16px rgba(44,180,97,.32)}
.cta-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media(max-width:760px){.cta-benefits{grid-template-columns:1fr}}
.cta-ben{background:rgba(255,255,255,.78);border:1px solid #cdeeda;border-radius:12px;padding:15px 16px}
.cta-ben .cb-ico{width:34px;height:34px;border-radius:8px;background:var(--text);color:#fff;display:grid;place-items:center;font-size:17px;margin-bottom:9px}
.cta-ben .cb-img{width:46px;height:46px;display:block;margin-bottom:10px}
.cta-ben .cb-t{font-weight:800;font-size:14px;color:var(--text);margin-bottom:3px}
.cta-ben .cb-d{font-size:13px;color:var(--muted);line-height:1.5}
.cta-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.cta-foot .cf-note{font-size:13px;color:var(--muted)}
.cta-foot .cf-note b{color:var(--green)}

/* ============================================================================
   17 · ZAHLENFELD MIT SCHRITTKNOEPFEN — Prototyp 2201-2223
   ----------------------------------------------------------------------------
   [14.08.2026] REPARIERT: Hier standen zwei Kommentarblöcke hintereinander, und
   der erste war schon nach der Überschrift zu Ende. Der Fließtext darunter war
   für den Browser deshalb kein Kommentar mehr, sondern Unsinn mitten im
   Stylesheet — ab dieser Stelle hat er den Rest der Datei verworfen. Wirkungslos
   war damit ALLES ab hier: das ganze Zahlenfeld (.nstep) und jede später
   angehängte Regel. Aufgefallen ist es, weil ein neu angehängter Block am
   Dateiende nicht griff.

   Zwei Lehren: eine Überschrift, ein Kommentar — nicht zwei ineinander. Und:
   die Zeichenfolge, die einen Kommentar beendet, darf in einem Kommentar nicht
   vorkommen, auch nicht in Anführungszeichen. Genau daran ist die erste Fassung
   dieser Erklärung selbst noch gescheitert.
   ----------------------------------------------------------------------------
   Zahlenfeld mit Schrittknöpfen — EINE Komponente für alles (HP 31.07., Punkt 5)
   Vorher stand das Plus hinter der Einheit („12 Stück +") und die Felder waren
   zu breit. Jetzt liegt der Wert samt Einheit in der Mitte, Minus und Plus
   sitzen symmetrisch außen.
   Identisch in `marke/markenpool-marke.html` — beide Seiten gleich halten.
   Hinweis: Die `.rp-step`-Felder im Angebots-Composer gehören Session L und
   sind hier bewusst NICHT angefasst; sie werden nachgezogen, sobald L fertig ist.
   ============================================================================ */
.nstep{display:inline-flex;align-items:stretch;height:34px;border:1px solid var(--border);
  border-radius:8px;background:#fff;overflow:hidden;flex:0 0 auto}
.nstep-b{width:30px;border:0;background:#fff;color:var(--muted);font-size:15px;font-weight:600;
  cursor:pointer;display:grid;place-items:center;font-family:inherit;padding:0;line-height:1}
.nstep-b:hover{background:var(--bg);color:var(--text)}
.nstep-v{display:flex;align-items:center;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.nstep-in{width:46px;border:0;text-align:right;font-size:14px;font-weight:700;color:var(--text);
  background:none;outline:none;font-family:inherit;padding:0;-moz-appearance:textfield}
.nstep-in::-webkit-outer-spin-button,.nstep-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.nstep-u{font-size:12px;font-weight:600;color:var(--muted);padding:0 8px 0 3px;white-space:nowrap}
.nstep:focus-within{border-color:var(--accent)}
.nstep.sm{height:29px}
.nstep.sm .nstep-b{width:25px;font-size:13px}
.nstep.sm .nstep-in{width:38px;font-size:12.5px}
.nstep.sm .nstep-u{font-size:11px;padding:0 6px 0 2px}

/* ============================================================================
   NACHTRAG 14.08.2026 — Registrier-Hinweis für nicht Angemeldete (HP)
   Ein reines Text-Popup: es erklärt, was ein Konto bringt, und zeigt den Weg.
   Es sammelt nichts ein — die Registrierung liegt in `index.html#registrieren`.
   ============================================================================ */
.rh-lede{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:0 0 14px }
.rh-liste{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.rh-liste li{ display:flex; gap:11px; align-items:flex-start; font-size:13px; line-height:1.5 }
.rh-liste i{ color:#163300; font-size:19px; flex:0 0 auto; margin-top:1px }
.rh-liste b{ color:var(--text); font-weight:700 }
.rh-liste span{ color:var(--muted) }
.rh-fuss{ margin:15px 0 0; font-size:12px; color:var(--muted) }