/* ============================================================================
   ui-wise.css — KOPIE von ui.css in der Wise-Palette (wise.com). 13.08.2026.

   Zum Ausprobieren: in einer Seite (oder allen) den Verweis
     <link rel="stylesheet" href="shared/ui.css">
   auf shared/ui-wise.css umstellen. Rollback: Verweis zurückstellen.
   ui.css bleibt unangetastet; diese Datei wird von keiner Seite geladen,
   solange niemand den Verweis umstellt.

   Farb-Zuordnung (nur Farben; Schrift, Maße, Aufbau unverändert):
     Handlungsfläche  #2CB461 → #9FE870 (Wise-Hellgrün), Schrift darauf #163300
     Hover                    → #80E142
     Dunkler Text/Links       → #163300 (Tannengrün)
     Tint / soft      #e3f6ec → #EAF6DC
     Provisions-Grün  #059669 → #2F5711
     Text             #16181d → #0E0F0C · gedämpft #6b7280 → #5D5F5A
     Seitengrund      #f6f7f9 → #F2F3F5
   BEWUSST BEIBEHALTEN: Warn-Orange (#e5820e) und Pflicht-Rot (#dc2626) —
   Signalfarben, kein Wise-Pendant im Bestand.

   Am Ende hängt ein Abschnitt für die hart eingefärbten Stellen in den
   seiten-*.css (Margen-Text, Filter-Chip, Kalkulations-Box, Unterstreichung
   „Bestseller" …). Er braucht !important, weil die Seitendateien NACH dieser
   Datei laden. Wird Wise angenommen, gehören diese Werte in die Seitendateien.
   ============================================================================ */
/* ============================================================================
   Spreat Brandpool — gemeinsame Gestaltung
   Stand 2026-08-03 · eine Datei für Laden, Marke und Admin
   ----------------------------------------------------------------------------
   ANLASS
   Paul im Feedback-Call: Badges, Abstände und Schriftgrößen sehen von Bereich zu
   Bereich anders aus. Nachgemessen — er hat recht, und deutlicher als gedacht:

       Schriftgrößen   34 verschiedene Werte
       Eckenradien     15
       Abstände (gap)  20
       dazu 572 Inline-Styles über die drei Ansichten

   WOHER DIE WERTE KOMMEN
   Nicht erfunden. Zwei Quellen:
   1. Der Brandpool-Tab — laut HP die Referenz, weil er gut aussieht.
      Von dort: 17px Kartentitel, 12.5px Beschreibung, 12px Pillen und Badges,
      11.5px Bildunterschriften, 999px für Pillen, `--green-soft` für Provisionen.
   2. Die Häufigkeit im Bestand. Was 153-mal vorkommt, IST der Standard —
      12.5px ist der meistgenutzte Wert überhaupt, dann 13px, dann 12px.

   Die Skala ist deshalb bewusst so gewählt, dass die häufigen Werte **exakt
   erhalten** bleiben. Nur die Ausreißer rasten ein, und zwar um höchstens 1px.
   Das ist der ganze Trick: aufräumen, ohne das Gesicht zu verändern.

   ----------------------------------------------------------------------------
   NACHTRAG 03.08.2026 (Session C) — DIE RICHTUNG IST GEDREHT

   Bis heute stand hier ein Baukasten, der an sieben Stellen anders aussah als
   die laufenden Prototypen: Formularlabel in Versalien, Knöpfe mit fester Höhe,
   Felder mit 10er-Ecke, Karten mit 16er-Ecke. Session B hat das beim Bauen der
   Attrappen gemessen und in `entwuerfe/LUECKEN-UI.md` Abschnitt 0 aufgeschrieben.

   HPs Entscheidung: **die Attrappen sollen aussehen wie Brandpool 2.0.** Damit
   gilt ab hier die Regel

       Werte    kommen aus dieser Datei.
       Bauteile kommen aus dem laufenden Prototyp.
       Wo beide sich widersprechen, gewinnt der Prototyp.

   Diese Datei ist deshalb an den Prototyp herangerückt, nicht umgekehrt. Ziel
   der Umstellung war ausdrücklich, dass sich das Aussehen NICHT ändert und
   trotzdem nur noch eine Datei die Wahrheit ist. Die wenigen Stellen, an denen
   sich doch etwas ändert, stehen einzeln auf `shared/vergleich.html` und warten
   dort auf HPs Abnahme — stillschweigend umstellen war ausdrücklich untersagt.

   WAS JETZT DAZUGEKOMMEN IST
   Vorher: Werte plus sieben Bausteine. Es fehlte jede Layoutschicht — keine
   Kopfleiste, kein Menü, keine Tabelle, kein Fenster, kein Fortschrittsbalken.
   Session B hat sie in `entwuerfe/entwurf.css` mit Vorsatz `e-` vorgebaut und
   dort ausschließlich Variablen von hier benutzt. Sie stehen jetzt unter `sp-`
   weiter unten. `entwurf.css` bleibt unverändert — sie war die Vorlage, nicht
   das Ziel, und verschwindet mit den Attrappen.

   WIE MAN SIE BENUTZT
   Neue Stellen nehmen die Variablen, nicht die Zahlen:
       font-size: var(--fs-meta);        statt  font-size: 12px;
       border-radius: var(--r-md);       statt  border-radius: 10px;
       gap: var(--sp-2);                 statt  gap: 8px;
   Wer eine Zahl braucht, die es hier nicht gibt, braucht sie meistens nicht.

   Zum Draufschauen: shared/ui-katalog.html · zur Abnahme: shared/vergleich.html
   ============================================================================ */

/* ============================================================================
   GRUNDRESET
   [11.08.2026] Beim Zerlegen fiel auf: `app/` hatte keinen. In den Prototypen
   stand er im jeweiligen `<style>`-Block und fiel mit ihm weg — drei der
   Umzugs-Sitzungen haben ihn unabhängig voneinander vermisst und teils in ihrer
   Seitendatei nachgebaut. Er gehört hierher, einmal.

   Wörtlich aus `entwuerfe/entwurf.css`, die ihn ihrerseits aus den Prototypen
   übernommen hat. Keine neue Gestaltung.
   ============================================================================ */
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text); line-height:1.5;
  font-size:var(--fs-basis);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Phosphor-Symbole sitzen sonst um eine Winzigkeit zu hoch. */
i.ph,i[class^="ph-"],i[class*=" ph-"]{ font-style:normal; line-height:1; display:inline-block; vertical-align:-.1em }
button{ font-family:inherit }
a{ color:var(--accent-dk); text-decoration:none }
a:hover{ color:var(--text) }
h1,h2,h3,p{ margin:0 }

/* `hidden` durchsetzen. Ohne diese Zeile schlägt jede Klasse mit `display` das
   Browser-Stylesheet — auf der Startseite stünden dann alle vier Ansichten
   gleichzeitig da. Gemeldet beim Bau von `index.html`, 11.08.2026. */
[hidden]{ display:none !important }

/* Ein Knopf, der ein Verweis ist. Ohne diese Zeile schlägt `a:hover` von oben
   die Knopffarbe, und ein dunkler Knopf wird beim Überfahren dunkel auf Schwarz.
   Dieselbe Lücke wie bei `.sp-reiter a` — siehe LUECKEN-UI.md, Abschnitt 4c. */
a.sp-btn, a.sp-btn:hover{ text-decoration:none }
a.sp-btn--dunkel, a.sp-btn--dunkel:hover{ color:var(--dunkel-txt) }
a.sp-btn--haupt,  a.sp-btn--haupt:hover { color:#163300 }

:root {
  /* --- Schrift ------------------------------------------------------------
     Neun Stufen plus die Funnel-Frage. Die vier häufigsten (12.5 · 13 · 12 · 11)
     bleiben unangetastet, damit das Einrasten nichts verschiebt, was heute schon
     stimmt. */
  --fs-mikro:   11px;    /* Label über Feldern, Bildunterschrift, Zeitstempel   */
  --fs-meta:    12px;    /* Pillen, Badges, Nebeninfo                           */
  --fs-klein: 12.5px;    /* meistgenutzt: Beschreibungen, Tabellen, Chips       */
  --fs-text:    13px;    /* Fließtext                                           */
  --fs-basis:   14px;    /* Grundschrift, Knöpfe                                */
  --fs-betont:  15px;    /* hervorgehobene Zeile, Kartenkopf                    */
  --fs-titel:   17px;    /* Kartentitel — aus dem Brandpool (.brand-name)       */
  --fs-h2:      20px;    /* Abschnittsüberschrift                               */
  --fs-frage:   23px;    /* eine Frage je Bildschirm im Funnel — siehe unten    */
  --fs-h1:      26px;    /* Seitentitel                                         */

  /* `--fs-frage` schließt die Lücke, die LUECKEN-UI.md Abschnitt 3 meldet: die
     Funnel-Frage stand auf `--fs-h1` (26px) mit engerem Zeilenabstand, also auf
     einer Umgehung. LUECKEN-UI nennt in der Überschrift „zwischen 17 und 20 px",
     im Satz darunter aber 22–24 px als richtiges Maß. 23 px folgt dem Satz, weil
     dort der gemessene Bedarf steht. Die Abweichung liegt HP auf der
     Vergleichsseite zur Entscheidung vor. */

  /* --- Ecken --------------------------------------------------------------
     Vier Stufen plus Pille. 999px ist mit 96 Vorkommen der klare Spitzenreiter. */
  --r-sm:    8px;        /* Eingabefelder, Chips, kleine Knöpfe                 */
  --r-md:   10px;        /* Standardknopf                                       */
  --r-lg:   12px;        /* Kacheln, Chatblasen                                 */
  --r-xl:   16px;        /* große Fenster                                       */
  --r-pill: 999px;       /* Pillen und Badges                                   */
  --radius: 14px;        /* Karten — aus dem Prototyp, siehe Konflikt 4         */

  /* --- Abstände -----------------------------------------------------------
     Vielfache von 4. Aus 20 verschiedenen Werten werden sechs. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* --- Höhen --------------------------------------------------------------
     Für Pillen und Chips, die nebeneinander auf einer Linie sitzen müssen.
     Genau das fiel Paul auf. Knopf und Feld sind seit dem 03.08. NICHT mehr
     höhengesteuert, sondern über `padding` — so macht es der Prototyp. */
  --h-sm: 29px;
  --h-md: 34px;
  --h-lg: 40px;

  /* --- Feste Maße ---------------------------------------------------------
     Die Spec nennt beide ausdrücklich. Sie stehen hier, damit sie an EINER
     Stelle geändert werden können — und weil Viewport-Anteile beim Zoomen
     mitwandern, was genau der Fehler war, den sie ablösen. */
  --chat-breite: 420px;  /* Slide-over am Rechner                               */
  --chat-hoehe:  680px;  /* Chatseite; bei kleinen Fenstern gedeckelt           */
  --kopf-hoehe:  106px;  /* zwei Reihen: 49 + 48 + Rahmen                       */

  /* --- Symbolgrößen -------------------------------------------------------
     Phosphor-Symbole werden über `font-size` skaliert. Ohne Skala rutscht das
     auseinander — im Bestand stehen 13, 15, 16, 17, 19, 26 und 30 nebeneinander.
     Fünf Stufen, alle aus dem Bestand nachgemessen. */
  --ic-sm: 13px;         /* im Badge                                            */
  --ic-md: 15px;         /* in Feldern, Zeilen, kleinen Knöpfen                 */
  --ic-lg: 17px;         /* im Menü, in der Kopfleiste                          */
  --ic-xl: 19px;         /* Haken auf der Auswahlkachel                         */
  --ic-gross: 26px;      /* Leerzustand                                         */

  /* --- Farben -------------------------------------------------------------
     Nur als Rückfall. Jede Ansicht bringt ihre eigenen mit; stimmen sie überein,
     passiert hier nichts. Weichen sie ab, fällt es beim Vergleich sofort auf.
     ACHTUNG: sie weichen an drei Stellen ab — `--accent-dk`, `--accent-soft`
     und `--shadow` sind in marke/, einzelhaendler/ und index.html verschieden
     definiert. Hier steht die Fassung aus `prepage-einzelhaendler.html`, weil
     die Attrappen bereits daraus gebaut sind. Die drei Unterschiede stehen auf
     der Vergleichsseite — sie werden erst sichtbar, wenn die Ansichten ihre
     eigenen `:root`-Blöcke abgeben (Session E/F). */
  --accent:      #9FE870;
  --accent-dk:   #163300;
  --accent-soft: #EAF6DC;
  --akzent-tinte: #163300;   /* Text auf grünem Tint (Kalkulation, Hinweiskästen) */
  --dunkel:      #9FE870;    /* dunkle Handlungsfläche, umgekehrt (HP 14.08.): Lime-Fläche … */
  --dunkel-hov:  #80E142;
  --dunkel-txt:  #163300;    /* … mit Tannen-Schrift — Funnel-Knopf, Warenkorb, dunkle Chips */
  --accent-rand: #CDE9AF;  /* Rand zu accent-soft — aus der Vertrauenszeile    */
  --bg:          #F2F3F5;
  --card:        #ffffff;
  --text:        #0E0F0C;
  --text-weich:  #454745;  /* zwischen --text und --muted: Fließtext im Kasten */
  --muted:       #5D5F5A;
  --border:      #e6e8ec;
  --warn:        #e5820e;
  --warn-soft:   #fdf0dd;
  --warn-rand:   #f5dcb4;  /* Rand zu warn-soft — aus `.cv-filter` der prepage */
  --warn-text:   #a35c05;

  /* Provisions-Grün. Eigene Farbe, NICHT `--accent`: im Brandpool ist Grün die
     Provisions-Sprache, und der Badge steht dort in einem anderen Ton als der
     Handlungsknopf. Aus `prepage-einzelhaendler.html`. */
  --green:       #2F5711;
  --green-soft:  #EAF6DC;

  /* Zustand „gesperrt / erledigt". Ersetzt `opacity`, mit dem geschlossene
     Standorte und beantwortete Anfragezeilen in den Attrappen gedämpft waren.
     `opacity` dämpft auch Ränder und Hintergründe mit und macht grüne Flächen
     schmutzig statt ruhig. `--aus-text` ist das Icon-Grau, das im Bestand
     ohnehin schon an gedämpften Stellen steht. */
  --aus-text:    #9aa0a8;

  /* Pflichtfeld-Stern. Die einzige rote Stelle im Baukasten. */
  --pflicht:     #dc2626;

  /* --- Schatten -----------------------------------------------------------
     `--sh-1` bis `--sh-3` bleiben als Stufen erhalten. `--shadow` ist der Name,
     den beide Prototypen benutzen; er zeigt auf dieselbe Stufe wie `--sh-1`,
     damit alter und neuer Name dasselbe bedeuten. */
  --sh-1: 0 1px 3px rgba(16,18,29,.06), 0 8px 24px rgba(16,18,29,.06);
  --sh-2: 0 8px 24px rgba(16,18,29,.09);
  --sh-3: 0 20px 60px rgba(16,18,29,.20);
  --shadow: var(--sh-1);
}

/* ============================================================================
   BAUSTEINE
   Bewusst mit `sp-`-Vorsatz, damit sie sich mit keiner bestehenden Klasse
   beißen — vorhandenes Markup bleibt heil, neue Stellen bauen sofort darauf auf.
   ============================================================================ */

/* --- Badge: kurzer Status, keine Aktion ------------------------------------
   Die Vorlage ist `.prov-badge` aus dem Brandpool.

   ZU „KONDITIONEN GEEINIGT" (LUECKEN-UI.md Abschnitt 2, zweite Hälfte):
   Die Spec dreht die Farbe um — „Aktion nötig" bleibt orange, „Konditionen
   geeinigt" wird grau, damit das Dringende auffällt und das Erledigte sich
   zurücknimmt. Zur Wahl standen: `--gut` grau einfärben, oder „geeinigt" von
   `--gut` wegnehmen.

   ENTSCHIEDEN: „geeinigt" wandert auf `--ruhe`, `--gut` bleibt grün.
   Begründung: `--gut` heißt „positiv", und dafür gibt es weiter echte Fälle —
   „Verifiziert", „Angenommen", „Freigegeben". Färbt man `--gut` grau, bleibt im
   Baukasten kein grüner Zustands-Badge übrig, und jede dieser Stellen bräuchte
   danach eine neue Farbe. „Geeinigt" ist außerdem nicht das Gegenteil von gut,
   sondern *fertig* — und ruhig ist genau die Bedeutung von `--ruhe`. Die
   Attrappen von Session B setzen bereits `--ruhe`; die Entscheidung bestätigt
   nur, was dort schon steht. Wirkung im Bestand: keine, `sp-badge--gut` wird
   heute ausschließlich im Katalog benutzt. */
.sp-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-meta); font-weight:700; line-height:1;
  padding:4px 10px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--muted); white-space:nowrap;
}
.sp-badge--gut    { background:var(--accent-soft); color:var(--accent-dk); }
.sp-badge--achtung{ background:var(--warn-soft);   color:var(--warn-text); }
.sp-badge--ruhe   { background:#eef0f2;            color:#7b828c; }
.sp-badge--neu    { background:#e8f0ff;            color:#2563eb; }
/* Provision. Konflikt 6: der Prototyp nimmt hier NICHT den Akzent, sondern das
   eigene Provisions-Grün. Vorlage ist `.e-prov` bzw. `.prov-badge`. */
.sp-badge--prov   { background:var(--green-soft);  color:var(--green); }
.sp-badge i{ font-size:var(--ic-sm); }

/* --- Pille: Kennzahl oder Eigenschaft -------------------------------------- */
.sp-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-meta); color:var(--muted);
  padding:5px 11px; border-radius:var(--r-pill);
  background:var(--bg); border:1px solid transparent; white-space:nowrap;
}
.sp-pill--rand{ border-color:var(--border); background:var(--card); }

/* --- Chip: auswählbar, im Gegensatz zur Pille ------------------------------ */
.sp-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-klein); font-weight:600; line-height:1;
  padding:0 13px; height:var(--h-sm); border-radius:var(--r-pill);
  background:var(--card); border:1px solid var(--border);
  color:var(--text); cursor:pointer; transition:.12s;
}
.sp-chip:hover{ border-color:#c3cbd4; }
.sp-chip[aria-pressed="true"], .sp-chip.an{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dk);
}

/* --- Knopf ----------------------------------------------------------------
   Konflikt 2: der Prototyp steuert die Höhe über `padding`, nicht über eine
   feste Zahl — 10/14 px, 13 px, 600. Feste Höhen brechen, sobald ein Knopf
   zweizeilig wird oder der Nutzer die Schrift größer stellt. */
.sp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 14px;
  font-family:inherit; font-size:var(--fs-text); font-weight:600; line-height:1.15;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--card); color:var(--text); cursor:pointer; transition:.12s;
  white-space:nowrap;
}
.sp-btn:hover{ border-color:#c3cbd4; }
.sp-btn--haupt{ background:var(--accent); border-color:var(--accent); color:#163300; }
.sp-btn--haupt:hover{ background:#80E142; border-color:#80E142; }
.sp-btn--leise{ background:none; border-color:transparent; color:var(--muted); }
.sp-btn--leise:hover{ color:var(--text); }
.sp-btn--gefahr{ background:none; border-color:transparent; color:#b42318; }
.sp-btn--klein{ padding:7px 11px; font-size:var(--fs-meta); }
.sp-btn--gross{ padding:12px 18px; font-size:var(--fs-basis); }

/* Dunkle Fassung — LUECKEN-UI.md Abschnitt 2, erste Hälfte.
   Die Funnel brauchen laut Spec „einen dunklen Knopf über die volle Breite".
   Dunkel, NICHT grün: Grün ist im Brandpool die Provisions-Sprache und würde im
   Funnel etwas anderes behaupten. Vorlage ist `.btn-cart` aus dem Prototyp. */
.sp-btn--dunkel{ background:var(--dunkel); border-color:var(--dunkel); color:var(--dunkel-txt); }
.sp-btn--dunkel:hover{ background:var(--dunkel-hov); border-color:var(--dunkel-hov); }

/* Breitenschalter — der Funnel-Knopf sitzt über die volle Spaltenbreite und ist
   dabei etwas größer als ein Knopf in einer Zeile. */
.sp-btn--breit{
  width:100%; padding:15px; font-size:var(--fs-betont); font-weight:700;
}

/* Deaktiviert. Statt `opacity` (die auch Rand und Hintergrund mitdämpft und aus
   dem grünen Hauptknopf ein schmutziges Grün macht) ein echter Zustand. */
.sp-btn:disabled, .sp-btn[aria-disabled="true"]{
  background:var(--bg); border-color:var(--border); color:var(--aus-text);
  cursor:not-allowed;
}
.sp-btn:disabled:hover{ border-color:var(--border); background:var(--bg); }

/* --- Karte ----------------------------------------------------------------
   Konflikt 4 und 5: 14er-Ecke und der Schatten des Prototyps. */
.sp-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--sp-4);
}
.sp-card--flach{ box-shadow:none; }
.sp-card--schwebend{ box-shadow:var(--shadow); }
.sp-card__kopf{
  display:flex; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-3); font-size:var(--fs-betont); font-weight:800;
}

/* --- Eingabefeld ----------------------------------------------------------
   Konflikt 3: Padding statt fester Höhe, 8er-Ecke. */
.sp-input{
  padding:10px 12px;
  font-family:inherit; font-size:var(--fs-text); color:var(--text);
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-sm); outline:none; transition:.12s;
}
.sp-input:focus{ border-color:var(--accent); }
.sp-input:disabled{ background:var(--bg); color:var(--aus-text); cursor:not-allowed; }
textarea.sp-input{ line-height:1.5; resize:vertical; }

/* Konflikt 1 — die auffälligste Stelle im Screenshot: der Baukasten setzte
   „MARKENNAME" in gesperrten Versalien, der Prototyp „Markenname". Ab jetzt
   Satzschreibung, 12 px, 600, `--muted`. */
.sp-label{
  display:block; margin-bottom:5px;
  font-size:var(--fs-meta); font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--muted);
}
/* Konflikt 7: den Pflichtfeld-Stern gab es hier gar nicht. */
.sp-label .rq{ color:var(--pflicht); font-weight:700; }
/* Erklärzeile unter einem Feld */
.sp-hint{ font-size:var(--fs-mikro); color:var(--muted); margin-top:4px; line-height:1.35; }

/* --- Erklär-(i) am Feldnamen ------------------------------------------------
   [13.08.2026] Ins Baukasten-Blatt geholt, WEIL es dieselbe Sache zweimal gab:
   `.info-i` samt Hinweiskasten stand nur in `seiten-marke-karte.css` und
   `seiten-marke-hb.css`. Wer im Ladenteil ein (i) brauchte, hatte keins — und ein
   selbst gebautes hätte eine zweite Sprache für dieselbe Sache eröffnet. Der Code
   ist von dort übernommen, unverändert; die beiden Seitendateien dürfen ihre
   Fassung behalten, sie ist deckungsgleich.

   Text steht in `data-tip`, eine Überschrift in `data-tip-t`. Der sichtbare Kreis
   ist 16px, der Trefferbereich über `::before` deutlich größer — fasst sich am
   Handy besser an. Den Kasten zeichnet die Seite mit der Hinweiskasten-Maschine
   (Variante D), nicht CSS allein. */
.dinfo,.info-i{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;border:1.5px solid #b9c0c9;color:#8a93a0;
  background:transparent;font-size:11px;font-weight:800;font-style:normal;line-height:1;
  cursor:pointer;user-select:none;vertical-align:-2px;flex:0 0 auto;padding:0;
  transition:border-color .12s ease,color .12s ease,background-color .12s ease}
/* In Beschriftungen mit Versalien und Sperrung würde beides in den Kreis vererben. */
.dinfo,.info-i{text-transform:none;letter-spacing:0;font-family:inherit}
.dinfo::before,.info-i::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.dinfo:hover,.info-i:hover,.dinfo:active,.info-i:active{
  border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.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}

/* --- Leerzustand ---------------------------------------------------------- */
.sp-leer{
  display:grid; place-items:center; gap:var(--sp-2);
  padding:var(--sp-6) var(--sp-4); text-align:center;
  font-size:var(--fs-text); color:var(--muted);
}
.sp-leer i{ font-size:var(--ic-gross); color:#c2c7ce; }

/* --- Zustand „gesperrt / erledigt" ----------------------------------------
   Für geschlossene Standorte und beantwortete Anfragezeilen. Nimmt die Zeile
   zurück, ohne sie unlesbar zu machen — anders als `opacity:.6`, das auch
   Trennlinien und Fotos mitdämpft. */
.sp-aus{ color:var(--aus-text); }
.sp-aus b, .sp-aus strong{ color:var(--aus-text); font-weight:600; }
.sp-aus .sp-badge{ background:var(--bg); color:var(--aus-text); }

/* ============================================================================
   LAYOUT-BAUTEILE
   Vorlage: `entwuerfe/entwurf.css` (Session B, Vorsatz `e-`). Dort sind sie aus
   den laufenden Prototypen nachgebaut und benutzen ausschließlich Variablen von
   hier — deshalb konnten sie ohne Umrechnen übernommen werden. Die Vorlage
   selbst bleibt unverändert und verschwindet mit den Attrappen.
   ============================================================================ */

/* --- Kopfleiste — zwei Reihen: Logo und Konto oben, Reiter darunter -------- */
/* [13.08.2026] `app-start.js` setzt die Leiste in den Behälter `#kopf`. Ein
   klebendes Element klebt nur innerhalb seines Elternteils — und der ist genau so
   hoch wie die Leiste. Ohne diese Zeile scrollt der Kopf auf jeder der 15 Seiten
   weg, obwohl `.sp-kopf` auf `sticky` steht. Deshalb klebt der Behälter selbst;
   `display:contents` wäre die andere Lösung, nimmt den Kasten aber ganz aus dem
   Layout — in eingebetteten Vorschauen verschwindet die Leiste dann. */
#kopf{ position:sticky; top:0; z-index:50 }
.sp-kopf{
  background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.sp-kopf-top{
  display:flex; align-items:center; gap:14px; padding:9px 22px;
  border-bottom:1px solid var(--border); max-width:1240px; margin:0 auto;
}
.sp-kopf-nav{ display:flex; align-items:center; max-width:1240px; margin:0 auto; padding:0 22px; }
/* `text-decoration:none` steht hier, weil `.sp-logo` in beiden Prototypen auf ein
   `<div>` gesetzt ist, im Admin (11.08.2026) aber auf ein `<a>` — und der Baukasten
   keinen Element-Reset für `a` mitbringt. Ohne diese Zeile ist das Wort neben dem
   Logo unterstrichen, sobald jemand die Kopfleiste verlinkt. */
.sp-logo{ display:flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; }
.sp-logo img{ height:24px; width:auto; display:block; filter:brightness(0) saturate(100%); }
.sp-logo span{
  font-weight:600; color:var(--muted); font-size:var(--fs-basis);
  letter-spacing:-.01em; padding-left:9px; border-left:1px solid var(--border);
}
.sp-who{ margin-left:auto; display:flex; align-items:center; gap:11px; white-space:nowrap; }
.sp-kopflink{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-text); font-weight:600; color:var(--muted);
  background:none; border:0; cursor:pointer; padding:4px 2px;
}
.sp-kopflink:hover{ color:var(--text); }
.sp-kopflink i{ font-size:var(--ic-lg); }
.sp-korb{
  background:var(--dunkel); color:var(--dunkel-txt); border:0; border-radius:var(--r-md);
  padding:9px 15px; font-size:var(--fs-text); font-weight:600;
  display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer; transition:.12s;
}
.sp-korb:hover{ background:var(--dunkel-hov); }

/* Reiter — 48 px hoch, 24 px Abstand, 33 px eingerückt (wie im Prototyp) */
.sp-reiter{ display:flex; gap:24px; align-items:stretch; height:48px; padding-left:33px; }
.sp-reiter button{
  display:flex; align-items:center; gap:7px; padding:0 2px;
  font-size:var(--fs-basis); font-weight:600; color:var(--muted);
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
}
.sp-reiter button:hover{ color:var(--text); }
.sp-reiter button.an{ color:var(--text); border-bottom-color:var(--accent); }
/* [11.08.2026] Dieselbe Regel für `<a>`. Beim Zerlegen in Unterseiten sind aus
   den Reitern echte Verweise geworden — ein Reiter führt jetzt auf eine
   Nachbardatei statt eine Ansicht umzuschalten. Keine neue Gestaltung: die
   Werte sind Zeile für Zeile die der Knopf-Fassung darüber. */
.sp-reiter a{
  display:flex; align-items:center; gap:7px; padding:0 2px;
  font-size:var(--fs-basis); font-weight:600; color:var(--muted);
  text-decoration:none; border-bottom:2px solid transparent;
}
.sp-reiter a:hover{ color:var(--text); }
.sp-reiter a.an{ color:var(--text); border-bottom-color:var(--accent); }

/* --- Zähler-Blase — an Reitern und am Warenkorb ---------------------------- */
.sp-zaehler{
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--accent); color:#163300; font-size:var(--fs-mikro); font-weight:800;
  display:inline-grid; place-items:center;
}
.sp-zaehler--achtung{ background:var(--warn); }
.sp-korb .sp-zaehler{ background:#163300; color:#9FE870; }

/* --- Aufklappmenü — das Konto-Menü ---------------------------------------- */
.sp-konto{ position:relative; }
.sp-whobtn{
  display:inline-flex; align-items:center; gap:var(--sp-2); background:none; border:0;
  cursor:pointer; font:inherit; padding:2px 4px; border-radius:var(--r-sm);
}
.sp-whobtn:hover{ background:var(--bg); }
.sp-avatar{
  width:30px; height:30px; border-radius:var(--r-pill); background:var(--accent);
  color:#163300; font-weight:800; font-size:var(--fs-meta);
  display:grid; place-items:center; flex:none;
}
.sp-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:252px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--sh-2); padding:var(--sp-1); display:none;
}
.sp-menu.auf{ display:block; }
.sp-menu-kopf{
  padding:var(--sp-3); border-bottom:1px solid var(--border); margin-bottom:var(--sp-1);
}
.sp-menu-kopf b{ display:block; font-size:var(--fs-text); }
.sp-menu-kopf span{ font-size:var(--fs-meta); color:var(--muted); }
.sp-menu a, .sp-menu button{
  width:100%; display:flex; align-items:center; gap:var(--sp-3);
  padding:9px var(--sp-3); border:0; border-radius:var(--r-sm); background:none;
  font-size:var(--fs-text); color:var(--text); text-align:left; cursor:pointer;
}
.sp-menu a:hover, .sp-menu button:hover{ background:var(--bg); }
.sp-menu i{ color:var(--aus-text); font-size:16px; width:18px; text-align:center; flex:none; }
.sp-menu small{ margin-left:auto; font-size:var(--fs-mikro); color:var(--muted); }

/* --- Tabelle — Standorte, Zugänge, Admin ---------------------------------- */
.sp-tab{ width:100%; border-collapse:collapse; font-size:var(--fs-klein); }
.sp-tab th{
  text-align:left; padding:0 var(--sp-3) var(--sp-2) 0;
  font-size:var(--fs-mikro); font-weight:700; color:var(--muted); white-space:nowrap;
}
.sp-tab td{
  padding:10px var(--sp-3) 10px 0; border-top:1px solid var(--border); vertical-align:middle;
}
.sp-tab tr:hover td{ background:var(--bg); }
.sp-tab b{ font-size:var(--fs-text); }
.sp-tab .sp-rechts{ text-align:right; padding-right:0; }

/* --- Fenster — Standort anlegen, Zugang entziehen ------------------------- */
.sp-fenster{
  position:fixed; inset:0; z-index:85; display:none; place-items:center;
  padding:22px; background:rgba(16,18,29,.32);
}
.sp-fenster.auf{ display:grid; }
.sp-fenster-in{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:var(--card); border-radius:var(--radius); box-shadow:var(--sh-3);
  padding:var(--sp-5);
}

/* --- Fortschrittsbalken, dünn — beide Funnel ------------------------------ */
.sp-fortschritt{ height:3px; background:var(--border); position:sticky; top:0; z-index:40; }
.sp-fortschritt i{ display:block; height:100%; background:var(--accent); transition:width .35s ease; }

/* --- Auswahlkachel — groß, mit Beschreibung, mehrfach möglich ------------- */
.sp-kacheln{ display:grid; gap:var(--sp-2); }
.sp-kachel{
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4);
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card);
  text-align:left; cursor:pointer; transition:.12s; font-family:inherit; color:var(--text);
}
.sp-kachel:hover{ border-color:#c3cbd4; }
.sp-kachel[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.sp-kachel b{ font-size:var(--fs-betont); font-weight:700; }
.sp-kachel span{ display:block; font-size:var(--fs-klein); color:var(--muted); margin-top:2px; }
.sp-kachel .sp-haken-icon{ margin-left:auto; color:var(--accent); font-size:var(--ic-xl); opacity:0; }
.sp-kachel[aria-pressed="true"] .sp-haken-icon{ opacity:1; }

/* --- Kontrollkästchen-Zeile mit Erklärtext — Pflichthaken, Sichtbarkeit --- */
.sp-haken{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-2) 0; }
.sp-haken input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent); flex:none; }
.sp-haken label{ font-size:var(--fs-text); color:var(--text-weich); line-height:1.5; }

/* --- Gruppenkopf in Listen, klebend — 30 Standort-Zeilen, Chatliste ------- */
.sp-gruppe{
  padding:var(--sp-2) var(--sp-4); background:var(--bg);
  font-size:var(--fs-mikro); font-weight:700; color:var(--muted);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:2;
}

/* --- Chatblase — alle drei Chatfassungen zeichnen damit ------------------- */
.sp-blase{
  max-width:78%; padding:9px 13px; border-radius:var(--r-lg);
  font-size:var(--fs-text); line-height:1.5;
}
.sp-blase--ich{
  justify-self:end; background:var(--accent); color:#163300;
  border-bottom-right-radius:var(--r-sm);
}
.sp-blase--du{
  justify-self:start; background:var(--card); border:1px solid var(--border);
  border-bottom-left-radius:var(--r-sm);
}
.sp-blase time{ display:block; margin-top:4px; font-size:var(--fs-mikro); opacity:.7; }
/* Tagestrenner im Verlauf */
.sp-tag{
  justify-self:center; font-size:var(--fs-mikro); color:var(--muted); padding:2px 10px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-pill);
}

/* --- Kurze Rückmeldung am unteren Rand ------------------------------------
   [11.08.2026] Übernommen aus `marke/markenpool-marke.html` (`.toast`, Zeile
   738) — unverändert, nur die Zahlen auf die Skala gebracht. Der Baukasten
   hatte dafür nichts, obwohl beide Prototypen es benutzen. */
.sp-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90;
  background:var(--text); color:#fff; padding:12px 20px; border-radius:var(--r-lg);
  font-size:var(--fs-basis); font-weight:600;
  opacity:0; pointer-events:none; transition:.25s;
}
.sp-toast.an{ opacity:1; }
.sp-toast--fehler{ background:#b42318; }

/* --- Seitenrahmen ---------------------------------------------------------
   [11.08.2026] Der Rumpf jeder Unterseite. Werte aus `.wrap` der Prototypen
   (max-width 1240px, 22px seitlich) — keine neue Gestaltung, nur ein Name
   dafür, weil es beim Zerlegen jede Seite braucht. */
.sp-seite{ max-width:1240px; margin:0 auto; padding:var(--sp-5) 22px var(--sp-6); }

/* --- Trennlinie ----------------------------------------------------------- */
.sp-teiler{ height:1px; background:var(--border); margin:var(--sp-4) 0; border:0; }

/* --- Hinweiskasten — Import, Zugang entziehen, Funnel --------------------- */
.sp-hinweis{
  border-left:3px solid var(--warn); background:var(--warn-soft);
  border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-text); color:var(--text-weich);
}
.sp-hinweis--ruhig{ border-left-color:#c2c7ce; background:var(--bg); }
.sp-hinweis--gut{ border-left-color:var(--accent); background:var(--accent-soft); }

/* ============================================================================
   RASTER
   Drei Klassen für das, was heute in jeder Datei einzeln zusammengesetzt wird.
   ============================================================================ */
.sp-stapel{ display:grid; gap:var(--sp-3); }
.sp-zweispalt{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
@media(max-width:520px){ .sp-zweispalt{ grid-template-columns:1fr; } }
.sp-raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--sp-3); }


/* ============================================================================
   WISE-NACHTRAG 2: Kopfleiste [14.08.2026, zweite Fassung]
   HP: heller Grund statt Tannengrün. Leiste weiß, Schrift schwarz/gedämpft,
   der offene Reiter als Lime-Pille mit Tannen-Schrift, Warenkorb dunkel.
   ============================================================================ */
.sp-kopf{ background:var(--card); border-bottom:none; box-shadow:0 1px 0 var(--border) }
.sp-kopf-top{ border-bottom:1px solid var(--border) }
.sp-korb{ background:var(--dunkel) }
.sp-korb:hover{ background:var(--dunkel-hov) }
.sp-korb .sp-zaehler{ background:#9FE870; color:#163300 }
.sp-avatar{ background:#9FE870; color:#163300 }
/* Reiter: Unterstreichung wie im Original, nur die Linie in Wise-Lime.
   (HP 14.08.: „der aktive part soll immer nur unterstrichen sein") */
.sp-reiter a.an, .sp-reiter button.an{ color:var(--text); border-bottom-color:#9FE870 }

/* ============================================================================
   WISE-NACHTRAG 3: Markenliste (Brandpool) [14.08.2026, zweite Fassung]
   HP: keine dunklen Karten — weiß/graue Flächen, schwarze Schrift, Wise-Akzente
   nur als Tupfer: Lime für Provision und „mehr", Tannengrün für Knopf-Flächen.
   ============================================================================ */
.brand-row{ background:var(--card) !important; border-color:var(--border) !important }
.brand-row:hover{ border-color:#CDE9AF !important; box-shadow:0 4px 18px rgba(14,34,0,.08) !important }
.brand-row .prov-badge{ background:#EAF6DC; color:#2F5711 }
.brand-row .meta-pill{ background:var(--bg); color:var(--muted) }
.brand-row .link-btn{ background:var(--bg); border-color:var(--border); color:var(--text) }
.brand-row .link-btn:hover{ background:#EAF6DC }
.brand-row .more-tile{ background:#EAF6DC !important; border-color:#CDE9AF !important; color:#163300 !important }
.brand-row:hover .more-tile{ background:#DFF2C8 !important }
.tier-divider{ color:#2F5711 }
.tier-divider::before, .tier-divider::after{ border-top-color:#CDE9AF }
.tier-divider span{ background:#EAF6DC; border-color:#CDE9AF }
.brand-row.cta-row{ border-color:#9FE870 !important;
  background:
    radial-gradient(520px 240px at 88% -20%, rgba(159,232,112,.28), transparent 60%),
    linear-gradient(180deg,#EAF6DC,#fff) !important }
.brand-row.cta-row:hover{ box-shadow:0 6px 26px rgba(47,87,17,.16) !important; border-color:#2F5711 !important }
.cta-row .cta-ico{ background:#9FE870; color:#163300; box-shadow:0 6px 16px rgba(159,232,112,.45) }

/* ============================================================================
   WISE-NACHTRAG: hart eingefärbte Stellen der seiten-*.css
   ============================================================================ */
/* Grundsatz (HP, 14.08.): auf grüner Fläche schreibt immer das Komplementär-Grün —
   Lime-Fläche → Tannen-Schrift, dunkle Fläche → Lime-Schrift. Nie Weiß auf Lime.
   Die folgenden Regeln ziehen das durch alle Akzent-Bauteile des Brandpools. */
.cat-pill.active{ background:#9FE870 !important; border-color:#9FE870 !important; color:#163300 !important }
.cat-pill.active .cat-star{ color:#163300 !important }
.prod-btn{ background:#9FE870 !important; color:#163300 !important }
.prod-btn:hover{ background:#80E142 !important }
.prod-btn.in{ background:#EAF6DC !important; color:#2F5711 !important }
.fchip.active, .fchip.fchip-mine.active{ background:#9FE870 !important; border-color:#9FE870 !important; color:#163300 !important }
.fchip.active .n{ color:#2F5711 !important }
.fchip.fchip-mine.active .fchip-i{ background:rgba(22,51,0,.1) !important; border-color:rgba(22,51,0,.35) !important; color:#163300 !important }
.fchip.fchip-mine.active .fchip-i:hover{ background:rgba(22,51,0,.2) !important; border-color:#163300 !important; color:#163300 !important }
/* Unterkategorien-Zeile: heller Tint, Tannen-Beschriftung statt blassem Lime */
.filter-row.subs{ background:#EAF6DC !important }
.subs-label{ color:#2F5711 !important; opacity:1 !important }
.subchip{ border-color:#CDE9AF !important }
/* Unterstreichungen auf Weiß: [14.08., Variante 2] der offene Reiter trägt eine
   dickere Lime-Linie und Tannen-Schrift — sichtbar, ohne dunkel zu wirken. */
.sp-reiter a.an, .sp-reiter button.an{ border-bottom:3px solid #9FE870 !important; color:#163300 !important; font-weight:700 }
.flow-step.active .flow-label{ color:#163300 !important }

/* --- Dasselbe Prinzip auf allen anderen Seiten [14.08.2026] -----------------
   Alles, was in seiten*.css eine Grünfläche mit weißer Schrift baut, bekommt
   das Komplementär-Grün: Lime-Fläche → Tannen-Schrift, dunkle Fläche → helle
   Grün-Schrift. Weiß-auf-Grün gibt es nicht mehr. */
/* Handelsbeziehungen: Bestätigen und Zusage-Knopf */
.btn-primary{ color:#163300 !important }
.hb-b-yes{ background:#9FE870 !important; border-color:#9FE870 !important; color:#163300 !important }
.hb-b-yes:hover{ background:#80E142 !important; border-color:#80E142 !important }
/* Glückwunsch-Banner: einfarbig Lime, Schrift in Tannengrün — umgekehrt (HP 14.08.) */
.hb-congrats{ background:#9FE870 !important }
.hb-congrats, .hb-congrats h3{ color:#163300 !important }
.hb-congrats p{ color:#163300 !important; opacity:1 !important }
.hb-congrats .cg-ic{ background:rgba(22,51,0,.15) !important; color:#163300 !important }
.hb-congrats a{ background:#163300 !important; color:#9FE870 !important }
.hb-congrats a:hover{ background:#0E2200 !important }
.mrq-contact{ background:#EAF6DC !important; border-color:#9FE870 !important; color:#2F5711 !important }
/* Chat: eigene Nachrichtenblase (Lime-Fläche, Tannen-Schrift — umgekehrt HP 14.08.),
   Ungelesen-Zähler, aktiver Anhang-Knopf, gewählter Gesprächseintrag */
.cv-msg.me .cv-b{ background:#9FE870 !important; color:#163300 !important }
.cv-item.sel{ background:#F4F5F7 !important; border-color:#D7DAE0 !important }
.cv-item.sel, .cv-item.sel *{ color:#16181d !important }
.cv-item.sel .cv-iav{ background:#16181d !important; color:#fff !important }
.cv-un{ background:#9FE870 !important; color:#163300 !important }
.cv-clip.on{ border-color:#CDE9AF !important; background:#EAF6DC !important; color:#163300 !important }
/* FAQ: Sende-Knopf-Hover */
.fq-ask .send:hover{ background:#80E142 !important; border-color:#80E142 !important }
/* Ladenprofil: aktive Chips/Segmente, Bearbeiten-Leiste, „bearbeiten"-Verweis */
.lp-chip.on, .lp-seg button.on{ background:#EAF6DC !important; border-color:#9FE870 !important; color:#163300 !important }
.tagchip.pref{ background:#EAF6DC !important; border-color:#CDE9AF !important; color:#2F5711 !important }
.lp-bar{ background:#EAF6DC !important; border-color:#CDE9AF !important; color:#2F5711 !important }
.lp-card h3 .ed{ color:#2F5711 !important; text-decoration-color:#CDE9AF !important }
.lp-edit:hover, .lp-ph.miss:hover{ color:#163300 !important }
.lp-hero .half:hover .edge{ color:#163300 !important }
.st-foto:hover{ color:#163300 !important }
/* Funnel: fertige Status-Häkchen */
.sr-statusliste i.fertig{ color:#2F5711 !important }

/* Angebots-Composer: Produktwahl-Karte.
   [14.08.] Der Auswahlring war ein INNEN-Schatten — oben verdeckt ihn das
   randlose Produktfoto, unten neben dem gepolsterten Text blieb er sichtbar,
   darum wirkte der Rand ungleich dick. Jetzt liegt der zweite Ring AUSSEN. */
.req-pcard.sel{ border-color:#163300 !important; box-shadow:0 0 0 1px #163300 !important }
.req-pcard.sel .rpc-check{ background:#9FE870 !important; border-color:#163300 !important; color:#163300 !important }
.req-pills .cat-pill.active{ background:#9FE870 !important; border-color:#9FE870 !important; color:#163300 !important }

/* EIN Zahlen-Stepper-Look überall.
   Es gibt drei Bauarten: `.nstep` (Komponente, 4 Seiten), `.stepper` (Warenkorb)
   und `.rp-step` (Angebots-Popup). Der Warenkorb ist die Referenz (HP: Panel
   gefällt) — `.nstep` und `.rp-step` übernehmen seine Optik: helle Knopfflächen,
   Wert mittig. Nur Optik; Markup, IDs und die nstep()-Logik bleiben. */
.nstep-b{ background:var(--bg) !important }
.nstep-b:hover{ background:#EAF6DC !important; color:#163300 !important }
.nstep-in{ text-align:center !important }
.nstep:focus-within{ border-color:#163300 !important }
.rp-step button:hover{ background:#EAF6DC !important; color:#163300 !important }
.stepper button:hover{ background:#EAF6DC !important; color:#163300 !important }

/* Provisionsrechner: seiten-marke-rechner.css baut eigene Bauteile (pr-*) mit
   Akzentflächen und Weiß — hier auf die Prinzipien gezogen. */
.pr-step i{ background:#9FE870 !important; color:#163300 !important }
.pr-chip.on{ background:#9FE870 !important; border-color:#9FE870 !important; color:#163300 !important }
.pr-seg button.on{ background:#9FE870 !important; color:#163300 !important }
.pr-sw input:checked + label{ background:#9FE870 !important }
.pr-result{ background:#EAF6DC !important; border-color:#CDE9AF !important }
.pr-result-k, .pr-result-v{ color:#2F5711 !important }
.pr-result-p{ color:#163300 !important }
.pr-money input:focus, .pr-mini:focus{ border-color:#163300 !important }

/* FAQ, Wise-Variante 3 (HP 14.08.): dunkler Kontrapunkt statt Lime-Pille — der
   aktive Navigationspunkt ist Tannengrün mit Lime-Schrift (wie der Warenkorb),
   offene Fragen bleiben weiß und zeigen links eine 3px-Lime-Kante, dieselbe
   Sprache wie die Reiter-Unterstreichung. */
.fq-kick{ color:#2F5711 !important }
.fq-nav button.on{ background:#9FE870 !important; color:#163300 !important; box-shadow:none !important }
.fq-nav button:hover{ background:#EAF6DC !important; color:#163300 !important }
.fq-item{ border-left:3px solid transparent }
/* Lime nur auf der Frage-Zeile (summary); der Antwortteil bleibt weiß. */
.fq-item[open]{ background:#fff !important; border-color:#9FE870 !important; overflow:hidden }
.fq-item[open] summary{ background:#9FE870; color:#163300 }
.fq-item[open] .fq-a{ padding-top:15px }
.fq-item[open] .fq-n{ color:#2F5711 !important }
.fq-item[open] .fq-a{ color:#163300 !important }
.fq-item summary:hover{ color:#2F5711 !important }
.fq-ask .bar>i{ color:#2F5711 !important }
.fq-ask .openb:hover{ border-color:#9FE870 !important; background:#EAF6DC !important; color:#163300 !important }
.fq-ask .done{ color:#2F5711 !important }
.fq-ask textarea:focus, .fq-ask input[type=email]:focus{ border-color:#163300 !important }
/* Marken-Profil: die Brandpool-Vorschau kopiert die Karten-Regeln mit
   #poolPreview-Vorsatz — die höhere Spezifität schlug den Nachtrag, deshalb
   standen dort noch das alte Petrol-Badge und Lime-auf-Tint. */
#poolPreview .prov-badge{ background:#EAF6DC !important; color:#2F5711 !important }
#poolPreview .more-tile{ background:#EAF6DC !important; border-color:#CDE9AF !important; color:#163300 !important }
.filter-active{ color:#163300 !important }
.fq-item[open] .fq-n{ color:#2F5711 !important }
.share-ic.copied{ color:#2F5711 !important }
.sr-statusliste i.fertig{ color:#2F5711 !important }
.more-tile{ color:#163300 !important }
.info-i:hover, .info-i:active, .dinfo:hover, .dinfo:active,
.info-ic:hover, .info-ic:active{ color:#163300 !important }
.flow-more{ color:#163300 !important; border-color:#9FE870 !important }
.fq-ask .openb:hover{ color:#163300 !important }
/* Dunkle Flächen aus den Seitendateien auf dieselbe Variable ziehen — und nach
   dem Prinzip: dunkle Grünfläche → helle Grün-Schrift, nie Weiß. */
.fab{ background:var(--dunkel) !important; color:var(--dunkel-txt) !important }
.hb-chip.on{ background:var(--dunkel) !important; border-color:var(--dunkel) !important; color:var(--dunkel-txt) !important }
.hb-chip.on span{ color:#2F5711 !important }
/* seiten-marke-hb.css setzt .hb-chip.on span per !important auf Wei\u00df und l\u00e4dt
   NACH dieser Datei \u2014 h\u00f6here Spezifit\u00e4t n\u00f6tig, damit auf Lime Tannengr\u00fcn gilt. */
.hb-bar .hb-chip.on{ background:var(--dunkel) !important; border-color:var(--dunkel) !important; color:var(--dunkel-txt) !important }
.hb-bar .hb-chip.on span{ color:#2F5711 !important }
.fchip.sub.active{ background:var(--dunkel) !important; border-color:var(--dunkel) !important; color:var(--dunkel-txt) !important }
.fchip.sub.active .n{ color:#2F5711 !important }
.fab .fab-margin{ color:#163300 !important; font-weight:800 }
.fchip.fchip-mine.active{ background:#9FE870 !important; border-color:#9FE870 !important; color:#163300 !important }
.fchip.active{ background:#9FE870 !important; border-color:#9FE870 !important; color:#163300 !important }
.fchip.fchip-mine.active .fchip-i{ background:rgba(22,51,0,.12) !important; border-color:rgba(22,51,0,.4) !important; color:#163300 !important }
.flow-num, .vflow-num{ color:#163300 !important }
.flow-caption{ color:#163300 !important }
/* Verweise in den Markendetails: Lime als Schrift auf Weiß ist zu grell (HP 14.08.) */
.brand-details .bd-link{ color:#163300 !important }
.brand-details .bd-link:hover{ color:#2F5711 !important }
.brand-details .bd-sic:hover{ color:#163300 !important }
.calc-row{ color:#163300 !important }
.calc-row span[data-tip]{ border-bottom-color:rgba(22,51,0,.4) !important }
.calc-row.total{ border-top-color:rgba(47,87,17,.35) !important }
.more-tile{ border-color:#BFE39A !important }
.tier-divider{ color:#2F5711 !important }
.tier-divider::before, .tier-divider::after{ border-top-color:#CDE9AF !important }
.tier-divider span{ background:#EAF6DC !important; border-color:#CDE9AF !important }
.lp-chip.on, .lp-seg button.on, .tagchip.pref{ color:#163300 !important }
/* „Bestseller"-Schwung: Lime wie die Reiter-Linie (HP 14.08. — Variante gefällt). */
.hl-hand::after{ 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='%239FE870'/%3E%3C/svg%3E") no-repeat center/100% 100% !important }
.btn-primary:hover{ background:#80E142 !important }
.btn-primary, .fq-ask .send, .lp-bar .save, .lp-crop-ft .save, .lp-desc-foot .save{ color:#163300 !important }

/* ============================================================================
   WISE-NACHTRAG 8: dunkle Handlungsflächen zurückgedreht [14.08.2026, HP]
   ----------------------------------------------------------------------------
   HP: „kehr die Farben des Warenkorbs um und den Button ‚Kostenlos
   registrieren'." Beide hängen an demselben Variablenpaar — `--dunkel` für die
   Fläche, `--dunkel-txt` für die Schrift. Am Vormittag stand es auf
   Lime-Fläche mit Tannen-Schrift; jetzt wieder andersherum: Tannengrün als
   Fläche, helles Lime als Schrift. Das Prinzip bleibt unberührt — auf grüner
   Fläche schreibt das Komplementär-Grün, nie Weiß.

   MIT UMGEDREHT, weil sie an derselben Variable hängen: der Warenkorb-Knopf in
   der Kopfleiste (`.sp-korb`) und die aktiven Filter-Pillen in den
   Handelsbeziehungen (`.hb-chip.on`, `.fchip.sub.active`). Das ist Absicht —
   sonst stünde eine dunkelgrüne Warenkorb-Leiste neben limefarbenen Pillen
   derselben Bedeutung. Sollen die Pillen lime bleiben, ist das eine Zeile:
   ihre drei Regeln unten wieder auf `#9FE870` setzen.

   Die vier Schriftfarben darunter sind Pflicht, keine Kür: sie standen fest
   auf Tannengrün, was auf tannengrüner Fläche unlesbar wäre.
   Rücknahme: diesen Block löschen.
   ============================================================================ */
:root{
  --dunkel:      #163300;   /* Fläche: Tannengrün                              */
  --dunkel-hov:  #0D2000;   /* eine Spur tiefer beim Überfahren                */
  --dunkel-txt:  #9FE870;   /* Schrift darauf: helles Lime                     */
}

/* Schriften, die fest auf Tannengrün standen und jetzt auf Tannengrün lägen. */
.fab .fab-margin{ color:#9FE870 !important }
.hb-bar .hb-chip.on span, .hb-chip.on span{ color:#CDE9AF !important }
.fchip.sub.active .n{ color:#CDE9AF !important }
/* Die Zähler-Blase im Warenkorb: helle Fläche, dunkle Schrift — sie soll sich
   von der jetzt dunklen Leiste abheben, nicht darin verschwinden. */
.sp-korb .sp-zaehler{ background:#9FE870 !important; color:#163300 !important }
/* Der Trennstrich in der Warenkorb-Leiste war für eine dunkle Fläche gedacht
   und stimmt damit wieder. */

/* ============================================================================
   WISE-NACHTRAG 9: Überschrift im Brandpool-Kopf [14.08.2026, HP]
   ----------------------------------------------------------------------------
   „Finde die nächsten Bestseller für dein Sortiment" — die einzige `.hero`
   der App (`laden-brandpool.html`) stand in Fast-Schwarz. HP: in der dunklen
   Akzentfarbe, also Tannengrün. Der Lime-Schwung unter „Bestseller" bleibt und
   trägt die Schrift mit, weil Tannengrün auf Lime das Komplementär-Grün ist —
   dasselbe Prinzip wie überall sonst.

   Nur die Überschrift. Der Absatz darunter bleibt gedämpftes Grau; zwei grüne
   Blöcke übereinander wären zu viel Farbe für einen Seitenkopf.
   Rücknahme: diesen Block löschen.
   ============================================================================ */
.hero h1{ color:var(--accent-dk); }


/* ============================================================================
   WISE-NACHTRAG 10: Kopfleiste ohne Anmeldung [14.08.2026, HP]
   ----------------------------------------------------------------------------
   Eine Reihe statt zwei. Der Reiter „Brandpool" steht neben dem Logo, die
   Reiterzeile darunter entfällt ganz — siehe `gastKopf()` in `app-start.js`.
   Der aktive Punkt bekommt dieselbe Lime-Unterstreichung wie die Reiter der
   angemeldeten Leiste, damit beide Zustände sichtbar verwandt bleiben.
   ============================================================================ */
/* [14.08.2026, zweite Fassung — HP] Zurück auf den alten Zuschnitt: links
   „Spreat │ Brandpool" wie gehabt, KEINE Unterstreichung, kein eigener Reiter.
   Der erste Anlauf machte aus „Brandpool" einen aktiven Navigationspunkt mit
   Lime-Linie — HP: „Da muss nichts unterstrichen werden."
   Rechts mehr Luft zwischen den drei Punkten als in der Standardleiste; sie
   stehen dort allein und sollen nicht gedrängt wirken. */
.sp-kopf--gast .sp-kopf-top{ border-bottom:none }
.sp-kopf--gast .sp-who{ gap:26px }

/* ============================================================================
   WISE-NACHTRAG 11: Haken auf Kacheln [14.08.2026, HP]
   ----------------------------------------------------------------------------
   `.sp-haken-icon` ist ein gefülltes Kreis-Symbol: der Kreis nimmt
   `color`, der Haken darin bleibt die Hintergrundfarbe der Seite — auf einer
   Lime-Fläche also Weiß. Genau das verbietet das Farbprinzip.

   Ein Symbolzeichen lässt sich nicht zweifarbig einfärben. Deshalb steht der
   Haken jetzt als eigenes Zeichen (`ph-check`, ohne Kreis) auf einem Kreis aus
   CSS: Fläche Lime, Haken Tannengrün. Das Markup bleibt unverändert —
   `ph-fill ph-check-circle` wird per CSS zum reinen Haken umgeschaltet.
   ============================================================================ */
.sp-kachel .sp-haken-icon{
  width:22px; height:22px; border-radius:50%;
  background:#9FE870; color:#163300;
  display:inline-grid; place-items:center;
  font-size:14px; line-height:1;
}
/* Das Markup trägt jetzt `ph-bold ph-check` statt `ph-fill ph-check-circle` —
   ein reiner Haken ohne eigenen Kreis. Über einen Codepoint umzuschalten wäre
   möglich, aber er würde beim nächsten Phosphor-Update stillschweigend brechen. */

/* ============================================================================
   WISE-NACHTRAG 12: Creme und Minze [14.08.2026, HP]
   ----------------------------------------------------------------------------
   HP: „Statt Weiß nimm eine Cremefarbe und statt Grau ein ganz ganz leichtes
   Minze. Außerdem soll das Spreat-Logo statt Schwarz unser Dunkelgrün haben."

   Umgestellt werden genau drei Dinge — Kartenfläche, Seitenfläche und die
   Farbe des Logos. Alles andere bleibt: Schrift, Ränder, Akzente, Signalfarben.

   Warum so wenige Werte? Weil `--card` und `--bg` in diesem Baukasten fast
   überall durchschlagen — Karten, Eingabefelder, Chips, Popups, Kopfleiste,
   Tabellenzeilen. Zwei Zahlen ändern das ganze Produkt; drei würden es
   unkontrollierbar machen.

   Die Werte sind bewusst zurückhaltend gewählt und aneinander geeicht:
   Creme (#FCFBF6) ist wärmer als Weiß, aber hell genug, dass schwarze Schrift
   ihren Kontrast behält (17,9:1 — WCAG verlangt 4,5:1). Die Seitenfläche blieb nach einem
   Zwischenschritt mit Minze beim ursprünglichen Grau — siehe Kommentar unten.
   Der Rand wird minimal wärmer mitgezogen, sonst wirkt er auf Creme bläulich.

   Rücknahme: diesen Block löschen — die alten Werte stehen unverändert oben.
   ============================================================================ */
:root{
  /* [14.08.2026, zweite Fassung — HP] Creme wieder raus, zurück auf Weiß. */
  --card:   #ffffff;
  /* [14.08.2026, zweite Fassung — HP] Das Minze ist wieder raus. Es stand nur
     einen Hauch neben dem Creme; auf großen Flächen sah das nicht nach zwei
     gewählten Farben aus, sondern nach einem Farbstich. Grau trennt die Ebenen
     deutlicher, und die Wärme kommt jetzt allein aus dem Creme der Karten. */
  --bg:     #F2F3F5;   /* wie ursprünglich */
  --border: #e6e8ec;   /* wie ursprünglich */
}

/* Reines Weiß steht an einigen Stellen fest im Blatt (Prototyp-Erbe). Die
   auffälligsten werden mitgezogen — sonst leuchten einzelne Kacheln heller als
   ihre Umgebung, was wie ein Fehler aussieht statt wie Absicht. */

/* --- Das Logo ---------------------------------------------------------------
   Das Logo lag bisher als schwarzes SVG auf einer fremden Adresse
   (`cdn.prod.website-files.com`) und wurde per CSS-Filter schwarz gefärbt. Für
   Tannengrün hätte es eine Filterkette aus fünf geschätzten Werten gebraucht —
   eine Farbe, die man nicht benennen, nur nachjustieren kann.

   Stattdessen liegt das SVG jetzt als `shared/spreat-logo.svg` im Ordner, mit
   `fill="#163300"` in der Datei. Das ist exakt statt ungefähr, es spart eine
   Anfrage an einen fremden Server, und es erfüllt nebenbei die Regel aus
   `LIESMICH.md`: kein Verweis zeigt nach draußen.

   Der alte Filter muss weg — er würde die Farbe wieder plattmachen. */
.sp-logo img, .sr-fkopf .sp-logo img{ filter:none }

/* ============================================================================
   WISE-NACHTRAG 13: der aktive Zustand, überall gleich [14.08.2026, HP]
   ----------------------------------------------------------------------------
   HP zum FAQ: „Wenn man auf eine Frage klickt, ist das so hellgrün. Das
   strahlt dir die Augen weg. Probier mal, das Grüne umzukehren." Und zu den
   Handelsbeziehungen: „Bei allen stimmt es irgendwie nicht mit der Farbe."

   Dahinter steckt ein Muster: „ausgewählt" wurde an drei Stellen verschieden
   gelöst — als helle Lime-Fläche (FAQ, Filterpillen), als schwarze Fläche
   (Liste/Grid-Umschalter) und als dunkelgrüne (Handelsbeziehungen seit
   Nachtrag 8). Drei Antworten auf dieselbe Frage.

   Ab jetzt gilt eine: **ausgewählt = Tannengrün als Fläche, Lime als Schrift.**
   Lime bleibt der Akzent für kleine Dinge — Unterstreichung, Haken, Punkte —,
   aber es füllt keine großen Flächen mehr. Genau das war das Blenden.
   ============================================================================ */

/* --- FAQ: die offene Frage ------------------------------------------------ */
.fq-item[open]{
  border-color:#163300;
  background:linear-gradient(180deg, rgba(22,51,0,.045), transparent 42%);
}
.fq-item[open] > summary{ background:#163300; color:#9FE870; border-radius:9px 9px 0 0 }
.fq-item[open] > summary:hover{ color:#CDE9AF }
.fq-item[open] .fq-n{ color:#9FE870 }
/* Die Antwort steht auf hellem Grund weiter — dunkel auf dunkel liest sich
   über mehrere Absätze schlecht. */
.fq-item[open] .fq-a{ color:var(--text-weich) }

/* --- Umschalter Liste ⇄ Grid ---------------------------------------------- */
.vt-btn.active, .seg-btn.active, .hb-view.on{
  background:#163300 !important; color:#9FE870 !important;
}

/* --- Filterpillen in den Handelsbeziehungen ------------------------------- */
/* Nachtrag 8 hatte sie schon gedreht; hier bleibt nur die Zahl daneben, die
   sonst in Mittelgrün auf Tannengrün steht und damit fast verschwindet. */
.hb-bar .hb-chip.on span, .hb-chip.on span,
.fchip.sub.active .n{ color:#CDE9AF !important }

/* --- Glückwunsch-Banner --------------------------------------------------- */
/* [HP] „Das Icon soll nicht allein in einer Zeile stehen." Es stand als
   eigenes Kästchen links neben einem Textblock; sobald der Text umbrach,
   rutschte es allein in die erste Zeile. Jetzt sitzt es IN der Überschrift —
   dort gehört es hin, und es kann sich nicht mehr davon lösen. */
.hb-congrats{ align-items:flex-start }
.hb-congrats h3{ display:flex; align-items:center; gap:11px }
/* Das Symbol steht jetzt IM `h3` (siehe `marke-hb.html`), nicht als eigenes
   Kästchen daneben. Kein CSS-Zeichen über `content`: der Baukasten benutzt
   ausschließlich Phosphor-Symbole, und ein Emoji im Stylesheet wäre die
   einzige Ausnahme im ganzen Produkt. */
.hb-congrats h3 .cg-ic{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  background:rgba(255,255,255,.18); display:grid; place-items:center;
  font-size:18px;
}

/* ============================================================================
   WISE-NACHTRAG 14: Überschriften in Tannengrün [14.08.2026, HP]
   ----------------------------------------------------------------------------
   Alle Überschriften stehen in Tannengrün statt Fast-Schwarz. Fließtext,
   Beschriftungen und Tabellen bleiben unverändert — sonst wäre es kein Akzent
   mehr, sondern ein Farbstich über der ganzen Seite.

   `--text` bleibt absichtlich unangetastet: die Variable trägt auch Ränder,
   Symbole und Knopfflächen. Geändert wird nur, was wirklich eine Überschrift
   ist.

   AUSNAHMEN, und warum: Überschriften auf dunkler Fläche würden dunkelgrün auf
   dunkelgrün stehen. Das betrifft das Glückwunsch-Banner und den Kopf der
   offenen FAQ-Frage. Beide behalten ihre helle Schrift.
   ============================================================================ */
/* Eine Variable für die Überschriftenfarbe. Sie steht hier, damit es EINEN Ort
   gibt, an dem sie sich ändern lässt — aber Klassen, die in einer späteren
   Datei definiert sind (`.hpane-title` in `seiten-hb.css`), müssen sie dort
   selbst benutzen. Eine Regel von hier aus verliert gegen sie, weil bei
   gleicher Spezifität die später geladene Datei gewinnt. Genau daran ist der
   erste Anlauf gescheitert: „Meine Handelsbeziehungen" blieb als einzige
   Überschrift schwarz. */
:root{ --ueberschrift:#163300; }

h1, h2, h3, h4,
.sr-h1, .sr-ffrage, .sec-head h2, .modal-title h2, .pm-title,
.popup-head h3, .modal-head h3, .mini-head h3, .filtersheet-head h3,
.hero h1, .rc-name, .hb-nm, .cv-hnm, .fq-secttl,
/* Überschriften, die als KLASSE gesetzt sind und deshalb das nackte `h1`
   schlagen — gefunden, indem alle Stylesheets nach Regeln mit `--text`,
   mindestens 16 px und Fettschrift durchsucht wurden. Ohne diese Zeile blieb
   „Meine Handelsbeziehungen" als einzige Überschrift im Produkt schwarz. */
.cta-row .cta-title{
  color:var(--ueberschrift);
}

/* --- Ausnahmen: dunkle Flächen -------------------------------------------- */
.hb-congrats h3,
.hb-congrats h3 *{ color:#163300 }         /* Banner ist Lime — Tannengrün ist hier richtig */
.fq-item[open] > summary,
.fq-item[open] > summary *{ color:#9FE870 }
.fq-item[open] .fq-a,
.fq-item[open] .fq-a *{ color:var(--text-weich) }
.fq-item[open] .fq-a b{ color:#163300 }

/* ============================================================================
   WISE-NACHTRAG 15: das Admin-Band [14.08.2026, HP]
   ----------------------------------------------------------------------------
   Erscheint nur mit `?admin_as=` und steht dann über allem — siehe
   `adminBandZeichnen()` in `app-start.js`.

   Warnfarbe statt Hausfarbe, und zwar bewusst: Grün heißt in diesem Produkt
   „alles in Ordnung". Ein Admin, der in einem fremden Konto handelt, ist ein
   Zustand, den man bemerken soll — nicht einer, der sich einfügt.

   `position:sticky` statt fest verankert: Es soll immer sichtbar sein, aber es
   soll die Kopfleiste nicht überdecken. Beide kleben, das Band bleibt oben.
   ============================================================================ */
.sp-adminband{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  padding:9px 22px;
  background:var(--warn-soft); border-bottom:1px solid var(--warn-rand);
  color:var(--warn-text); font-size:var(--fs-klein); line-height:1.45;
}
.sp-adminband-tag{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  background:var(--warn); color:#fff; border-radius:var(--r-pill);
  padding:3px 11px; font-size:var(--fs-meta); font-weight:800;
  letter-spacing:.02em; white-space:nowrap;
}
.sp-adminband-tag i{ font-size:var(--ic-lg) }
.sp-adminband-txt{ flex:1 1 240px; min-width:0 }
.sp-adminband-txt b{ color:#7a4304 }
.sp-adminband-link{
  flex:0 0 auto; margin-left:auto;
  background:#fff; border:1px solid var(--warn-rand); border-radius:var(--r-md);
  padding:6px 13px; font-weight:700; color:var(--warn-text); text-decoration:none;
  white-space:nowrap;
}
.sp-adminband-link:hover{ background:var(--warn); color:#fff; border-color:var(--warn) }

/* Die Kopfleiste klebt darunter, nicht darüber — sonst schöbe sie sich beim
   Scrollen über das Band. */
.sp-adminband ~ #kopf{ top:var(--adminband-hoehe, 42px) }

@media(max-width:640px){
  .sp-adminband{ padding:8px 16px; font-size:var(--fs-meta) }
  .sp-adminband-link{ margin-left:0; width:100%; text-align:center }
}

/* ============================================================================
   WISE-NACHTRAG 15: Filterleiste — ausgewählt heißt Tannengrün [15.08.2026, HP]
   ----------------------------------------------------------------------------
   HP zur aktiven Kategorie-Pille und dem Band darunter: „zu grell".

   Es war dieselbe Sache wie beim FAQ vorher: „ausgewählt" war eine große
   Lime-Fläche. Lime auf großer Fläche blendet, und es widerspricht der Regel
   aus Nachtrag 13, die für den ganzen Rest des Produkts schon gilt —
   **ausgewählt = Tannengrün als Fläche, Lime als Schrift.** Die Filterleiste
   war die letzte Stelle, die noch anders aussah.

   Das Band darunter („in Papeterie, Kunst & Print") lag zusätzlich auf einer
   grünen Tönung mit lime Schrift auf lime Fläche — dort war fast nichts mehr
   zu lesen. Es wird eine ruhige helle Fläche; die Farbe trägt allein die
   ausgewählte Unterkategorie.
   ============================================================================ */

/* --- Hauptkategorien --- */
.fchip.active,
.fchip.fchip-mine.active{
  background:#163300 !important; border-color:#163300 !important; color:#9FE870 !important;
}
.fchip.active .n{ color:#CDE9AF !important }
.fchip.fchip-mine.active .fchip-i{
  background:rgba(159,232,112,.18) !important; border-color:rgba(159,232,112,.55) !important;
  color:#9FE870 !important;
}
.fchip.fchip-mine.active .fchip-i:hover{
  background:rgba(159,232,112,.32) !important; border-color:#9FE870 !important;
}

/* --- Das Band mit den Unterkategorien ---
   `seiten-brandpool.css` wird NACH dieser Datei geladen. Ohne `!important`
   verlieren die folgenden Regeln bei gleicher Stärke gegen die dortigen —
   sie stünden da und täten nichts (dieselbe Falle wie in Nachtrag 12). */
.filter-row.subs{ background:var(--bg) !important; border:1px solid var(--border) }
.subs-label{ color:var(--muted) !important; opacity:1 !important }
.subchip{ border-color:var(--border) !important; color:var(--muted) !important; background:var(--card) !important }
.subchip.active{ background:#163300 !important; color:#9FE870 !important }
.subchip:hover{ border-style:solid; border-color:#CDE9AF !important; background:var(--accent-soft) !important; color:#163300 }
.subchip.active{
  background:#163300 !important; border-color:#163300 !important; color:#9FE870 !important;
}
.filter-reset{ color:var(--muted) !important }
.filter-reset:hover{ color:#163300 !important; text-decoration:underline; text-underline-offset:2px }