/* ============================================================================
   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-wise.css`
     · Kopfleiste, Reiter, mobiles Menü, Fußzeile — die macht jetzt `ui-wise.css`
     · alles zu Profil, FAQ, Handelsbeziehungen, Chat, Prepage, Registrierung
     · `.verif-stamp` — steht bereits in `seiten.css`

   Die Datei wird NACH `ui-wise.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-wise.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. */
/* Der (i)-Hinweiskasten steht seit dem 24.08.2026 in `ui-wise.css` — er wird
   jetzt von `app-start.js` auf JEDER Seite gezeichnet (BOARD-Punkt 78) und ist
   damit kein Seitenbauteil mehr. */
/* ============================================================================
   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:16px;flex-wrap:nowrap;flex:0 0 auto;margin-left:auto}
/* [24.08.2026, HP, Punkt 83.2] Die Zellen standen auf festen 104 px, die letzte
   sogar auf 92 — mit der Begründung „Kopf- und Produktzellen exakt gleich breit,
   sonst fluchten die Spalten nicht". Ein kleiner Stepper braucht mit Einheit aber
   rund 118 px. Er lief also aus seiner Zelle heraus und stieß an den Nachbarn;
   der `gap:12px` daneben half nichts, weil nicht der Abstand zu klein war,
   sondern die Zelle. Jetzt Inhaltsbreite — die Spalten fluchten weiterhin, weil
   Kopf und Zeile dieselben Bauteile in derselben Reihenfolge tragen. */
.reqbulk-c,.reqitem-prov{width:auto;flex:0 0 auto;text-align:right}
.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:16px;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:#EDF7EC;color:#3A793B;font-size:12px;line-height:1;transition:background .12s}
.filter-active:hover .fa-x{background:#C1E3BE}
.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:cover}
.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(20,20,43,.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(20,20,43,.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(20,20,43,.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(20,20,43,.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(20,20,43,.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(20,20,43,.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:#A9A9A9;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-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:#A9A9A9;font-weight:400;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#D0D0D0;padding:0;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.brand-details .bd-more:hover{color:#727880;text-decoration-color:#A9A9A9}
/* Kurze Detailzeile (unter vier Angaben) [12.09.2026, HP]: leere Felder fallen weg,
   also bleiben bei manchen Marken nur ein oder zwei Angaben übrig. `flex:1` würde die
   dann über die ganze Breite auseinanderziehen — zwei Angaben stünden einsam in ihren
   Hälften. Deshalb links packen; „Mehr anzeigen" bleibt rechts außen, damit die Zeile
   ihre Form behält. */
.brand-details.bd-few{justify-content:flex-start;gap:0 22px}
.brand-details.bd-few .bd-i{flex:0 0 auto;justify-content:flex-start}
.brand-details.bd-few .bd-i+.bd-i::before{left:-11px}
.brand-details.bd-few .bd-i-more{margin-left:auto}
/* 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(20,20,43,.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:cover}
.prod-thumb .g-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.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(20,20,43,.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(20,20,43,.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)}
/* Produkt steht schon in einer Handelsbeziehung — [23.08.2026, HP].
   Bewusst NICHT ausgegraut/deaktiviert: der Knopf führt weiter, nämlich in die
   Handelsbeziehung, wo sich die Konditionen nachverhandeln lassen. Ein toter
   grauer Knopf würde wie ein Fehler aussehen und die Frage „warum nicht?"
   unbeantwortet lassen. Ruhiger als der grüne Anfrage-Knopf, damit die Kachel
   nicht so aussieht, als wäre hier noch etwas zu tun. */
.prod-btn.prod-btn-laeuft{
  background:var(--bg); color:var(--muted); border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.prod-btn.prod-btn-laeuft:hover{ background:#fff; color:var(--text); border-color:#c3cbd4 }
.prod-btn.prod-btn-laeuft > i{ font-size:14px }
.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
   ============================================================================ */
/* [17.08.2026, Feedback-Punkt 9, HP] Der Schlagschatten steht jetzt an
   `.drawer.open`, nicht mehr an `.drawer`.

   URSACHE der grauen Leiste am rechten Rand: Die Schublade ist `position:fixed`
   und im geschlossenen Zustand nur per `translateX(105%)` aus dem Bild
   geschoben — sie ist also weiterhin da und wird weiterhin gezeichnet. Ihr
   Schatten zeigt mit `-20px` nach LINKS und hat 60px Weichzeichnung; er reicht
   damit rund 28px in den sichtbaren Bereich zurück und legt sich als graues
   Band über die volle Seitenhöhe an den rechten Rand.

   Das ist KEIN horizontaler Überlauf. Gemessen am 17.08. auf der Live-Seite:
   `documentElement.scrollWidth === clientWidth` bei 1732px UND bei 441px
   Breite — es gibt nichts zu scrollen. Deshalb hat der frühere Versuch über
   `html{overflow-x:hidden}` / `body{overflow-x:clip}` (Block 13) nichts
   ausgerichtet: er bekämpft ein Problem, das die Seite gar nicht hat.
   Gegenprobe im Browser: Schatten abgeschaltet -> Band weg. */
.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}
.drawer.open{transform:translateX(0);box-shadow:-20px 0 60px rgba(20,20,43,.25)}
.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(78,175,68,.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(20,20,43,.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(20,20,43,.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(20,20,43,.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(20,20,43,.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(20,20,43,.45);z-index:58;display:none}
.filtersheet-ov.open{display:block}
/* [17.08.2026, Feedback-Punkt 9, HP] Gleiche Ursache wie bei `.drawer`, nur um
   90 Grad gedreht: das Filter-Blatt liegt geschlossen per `translateY(100%)`
   unter der Kante, sein Schatten zeigt mit `0 -10px 40px` nach OBEN und malte
   deshalb ein graues Band über den unteren Seitenrand. Schatten ebenfalls an
   den offenen Zustand gehängt. */
.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}
.filtersheet.open{transform:translateY(0);box-shadow:0 -10px 40px rgba(20,20,43,.25)}
.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='%234EAF44'/%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(78,175,68,.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(78,175,68,.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(78,175,68,.35)}
.cta-row .cta-txt{flex:1 1 300px;min-width:220px}
.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(78,175,68,.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 #C1E3BE;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:#14142B; 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) }

/* [03.09.2026, HP] Der untere Ink-Streifen („Das ist eine Auswahl — angemeldet
   siehst du alles", Nachtrag vom 17.08., Feedback-Punkt 32) ist entfernt: er
   wiederholte den CTA-Kasten darüber ein drittes Mal. Mit ihm sind die Regeln
   `.mehr-badge*` und `mehrBadgeNode()` in `app/laden-brandpool.html` gefallen.
   Die Kontrast-Begründung für dunkle Flächen (Weiß auf #4EAF44 = 2,79:1, deshalb
   Ink #14142B = 13,9:1) gilt weiter — sie steht auch beim Band in app-start.js. */

/* Knopfpaar im Erfolgs-Zustand — [24.08.2026, HP, Punkt 83.5].
   Nebeneinander, wenn Platz ist, sonst untereinander. Beide nehmen ihre eigene
   Breite: ein `.btn` im Fluss würde sich sonst über die ganze Zeile ziehen, und
   genau so sah der einzelne grüne Balken vorher aus. */
.ok-state .ok-akt{
  display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:18px;
}
.ok-state .ok-akt .btn{
  width:auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}