/* ============================================================================
   ui-wise.css — DER Baukasten. Alle 15 Seiten laden diese Datei.

   [19.08.2026, Spur E] Sie hieß bis heute „KOPIE von ui.css" und beschrieb sich
   als Probe, die man per Verweis zurückstellen kann. Beides stimmt nicht mehr:
   der Verweis ist am 13.08. auf allen Seiten umgestellt worden, und `ui.css`
   ist heute gelöscht. Sie war seit fünf Wochen tot und stand trotzdem in
   fünfzehn Seiten als Rückweg. Wer den alten Stand braucht, holt ihn aus Git:
       git show bc98f09:app/shared/ui.css
   Für die nächste Farbprobe bitte wieder eine Kopie anlegen — und den Rückweg
   beim Anlegen aufschreiben, nicht in fünfzehn Dateien verteilen.

   Farb-Zuordnung (nur Farben; Schrift, Maße, Aufbau unverändert):
     Handlungsfläche  #4EAF44 → #4EAF44 (Spreat-Grün), Schrift darauf #FFFFFF
     Hover                    → #439639
     Dunkler Text/Links       → #14142B (Ink)
     Tint / soft      #e3f6ec → #EDF7EC
     Provisions-Grün  #059669 → #3A793B
     Text             #14142B → #14142B · gedämpft #6b7280 → #5E5E6A
     Seitengrund      #f6f7f9 → #F6F8FE
   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) }
/* [19.08.2026] Stand vorher auf #14142B — dunkle Schrift auf der grünen Fläche,
   also die alte Lime-Regel. Ein `<button class="sp-btn--haupt">` trug längst Weiß
   (Zeile weiter unten), ein `<a>` mit derselben Klasse nicht: Tag+Klasse schlägt
   Klasse. Betraf `laden-standorte` und `laden-zugaenge`. */
a.sp-btn--haupt,  a.sp-btn--haupt:hover { color:#FFFFFF }

: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:      #4EAF44;
  --accent-dk:   #14142B;
  --accent-soft: #EDF7EC;
  --akzent-tinte: #14142B;   /* Text auf grünem Tint (Kalkulation, Hinweiskästen) */
  /* Dunkle Handlungsfläche. [17.08.2026, HP] Vorher Tannengrün (#163300) mit
     Lime-Schrift (#9FE870). Die Spreat Design Bibliothek hat kein zweites Grün:
     der dunkle Ton ist Ink, das Grün (#4EAF44) ist mittelhell. Grün auf Ink
     käme auf 3,4:1 und fiele für Knopfbeschriftung durch — deshalb Weiß
     (18,03:1). Grün bleibt Akzent für Flächen und Ränder, nicht für Schrift
     auf Dunkel. Betrifft Funnel-Knopf, Warenkorb, dunkle Chips. */
  --dunkel:      #14142B;    /* Fläche: Ink                                    */
  --dunkel-hov:  #0F0F20;    /* eine Spur tiefer beim Überfahren               */
  --dunkel-txt:  #FFFFFF;    /* Schrift darauf: Weiß                           */
  --accent-rand: #C1E3BE;  /* Rand zu accent-soft — aus der Vertrauenszeile    */
  /* Seitenfläche und Kartenfläche. [14.08.2026, HP] Es gab einen Zwischenstand
     mit Creme (#FCFBF6) für Karten und einem hellen Minze für den Grund; beides
     ist auf HPs Wunsch wieder raus — das Minze stand nur einen Hauch neben dem
     Creme und sah auf großen Flächen nach Farbstich aus statt nach zwei
     gewählten Farben. */
  --bg:          #F6F8FE;
  --card:        #ffffff;
  --text:        #14142B;
  --text-weich:  #3D3D4E;  /* zwischen --text und --muted: Fließtext im Kasten */
  --muted:       #5E5E6A;
  --border:      #E4E7F0;
  --warn:        #e5820e;
  --warn-soft:   #fdf0dd;
  --warn-rand:   #f5dcb4;  /* Rand zu warn-soft — aus `.cv-filter` der prepage */
  --warn-text:   #a35c05;

  /* Farbe der Überschriften. Eigener Name, damit es EINEN Ort gibt, an dem sie
     sich ändern lässt. ACHTUNG: Klassen, die in einer späteren Datei definiert
     sind (`.hpane-title` in `seiten-hb.css`), müssen die Variable dort selbst
     benutzen — eine Regel von hier aus verliert gegen sie, weil bei gleicher
     Spezifität die später geladene Datei gewinnt. Daran ist der erste Anlauf
     gescheitert: „Meine Handelsbeziehungen" blieb als einzige Überschrift
     schwarz. */
  --ueberschrift: #14142B;

  /* 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:       #3A793B;
  --green-soft:  #EDF7EC;

  /* 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:    #A9A9A9;

  /* 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(20,20,43,.06), 0 8px 24px rgba(20,20,43,.06);
  --sh-2: 0 8px 24px rgba(20,20,43,.09);
  --sh-3: 0 20px 60px rgba(20,20,43,.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:#FFFFFF; }
.sp-btn--haupt:hover{ background:#439639; border-color:#439639; }
.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;
}
/* [17.08.2026, Feedback-Punkt 44, HP] „Fokus-Rahmen bei Input-Feldern."
   Vorher wurde beim Fokus nur die 1-px-Rahmenfarbe auf Grün gewechselt — auf
   hellem Grund kaum zu sehen, und zusammen mit `outline:none` darüber war für
   jemanden, der mit der Tastatur durch das Formular geht, überhaupt nicht mehr
   erkennbar, wo er steht. Jetzt liegt ein 3-px-Ring aus derselben Akzentfarbe
   um das Feld (als `box-shadow`, damit er nichts verschiebt) und der Rahmen
   wird zusätzlich kräftiger. `:focus-visible` bekommt obendrauf noch eine echte
   `outline` — die überlebt auch einen erzwungenen Kontrastmodus, in dem
   Schatten weggerechnet werden. */
.sp-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.sp-input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.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(20,20,43,.05),0 20px 50px rgba(20,20,43,.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); }

/* [17.08.2026, Feedback-Punkt 34] Reiter, den es noch nicht gibt. Gleiche Maße
   wie die beiden Fassungen darüber — nur blasser, ohne Zeiger, ohne Ziel. Der
   Cursor bleibt der normale Pfeil: „nicht anklickbar" muss man sehen, bevor man
   klickt. */
.sp-reiter .sp-reiter-bald{
  display:flex; align-items:center; gap:7px; padding:0 2px;
  font-size:var(--fs-basis); font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; opacity:.55; cursor:default; user-select:none;
}

/* --- 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:#FFFFFF; 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:#14142B; color:#FFFFFF; }

/* --- 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:#FFFFFF; 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(20,20,43,.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:#FFFFFF;
  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 unterstrichen, Warenkorb dunkel.

   [19.08.2026] Von sieben Regeln sind zwei übrig. Die anderen fünf sagten
   wortwörtlich dasselbe, was der Baukasten weiter oben oder ein späterer
   Nachtrag ohnehin schon sagt — `.sp-kopf-top`, `.sp-korb`, `.sp-zaehler`,
   `.sp-avatar` und die Reiter-Unterstreichung (die steht jetzt nur noch
   einmal, im großen Block darunter, mit der 3px-Linie).
   ============================================================================ */
.sp-kopf{ background:var(--card); border-bottom:none; box-shadow:0 1px 0 var(--border) }
.sp-korb:hover{ background:var(--dunkel-hov) }

/* ============================================================================
   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:#C1E3BE !important; box-shadow:0 4px 18px rgba(20,20,43,.08) !important }
.brand-row .prov-badge{ background:#EDF7EC; color:#3A793B }
.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:#EDF7EC }
.brand-row .more-tile{ background:#EDF7EC !important; border-color:#C1E3BE !important; color:#14142B !important }
.brand-row:hover .more-tile{ background:#C1E3BE !important }
.brand-row.cta-row{ border-color:#4EAF44 !important;
  background:
    radial-gradient(520px 240px at 88% -20%, rgba(78,175,68,.28), transparent 60%),
    linear-gradient(180deg,#EDF7EC,#fff) !important }
.brand-row.cta-row:hover{ box-shadow:0 6px 26px rgba(20,20,43,.16) !important; border-color:#3A793B !important }
.cta-row .cta-ico{ background:#4EAF44; color:#FFFFFF; box-shadow:0 6px 16px rgba(78,175,68,.45) }

/* ============================================================================
   WISE-NACHTRAG: hart eingefärbte Stellen der seiten-*.css
   ============================================================================ */
/* ACHTUNG — der Grundsatz, der hier bis zum 19.08.2026 stand, gilt NICHT mehr.
   Er lautete: „auf grüner Fläche schreibt immer das Komplementär-Grün, nie Weiß
   auf Lime." Seit der Umstellung auf die Spreat Design Bibliothek (17.08.) gilt
   das Gegenteil, siehe den ausführlichen Absatz weiter unten:

       Grün (#4EAF44) als Fläche  →  IMMER weiße Schrift.
       Ink  (#14142B) als Fläche  →  IMMER weiße Schrift.
       Heller Tint (#EDF7EC) ist KEINE grüne Fläche — dort steht dunkle Schrift.

   Der alte Satz stand über Regeln, die längst Weiß setzen. Genau dieser
   Widerspruch hat die Sitzung vom 19.08. fünfmal in dieselbe Falle laufen
   lassen. Er ist deshalb ersetzt, nicht nur ergänzt. */
.cat-pill.active{ background:#4EAF44 !important; border-color:#4EAF44 !important; color:#FFFFFF !important }
/* `.cat-pill.active .cat-star` stand hier auf #14142B — dunkler Stern auf grüner
   Pille, die alte Umkehr. `seiten-brandpool.css` sagt seit jeher `color:#fff`
   und war damit die ganze Zeit richtig; nur dieser Nachtrag hat es überstimmt.
   Zeile entfernt, die Seitendatei übernimmt. [19.08.2026] */
.prod-btn{ background:#4EAF44 !important; color:#FFFFFF !important }
.prod-btn:hover{ background:#439639 !important }
/* Tint-Fläche, deshalb dunkelgrüne Schrift — das ist kein Widerspruch zur Regel. */
.prod-btn.in{ background:#EDF7EC !important; color:#3A793B !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 #4EAF44 !important; color:#14142B !important; font-weight:700 }
.flow-step.active .flow-label{ color:#14142B !important }

/* --- [17.08.2026, HP] Regel umgedreht -------------------------------------
   Bis heute galt hier „Weiß-auf-Grün gibt es nicht mehr": auf der Lime-Fläche
   stand Tannengrün. Mit der Spreat Design Bibliothek gilt das Gegenteil, und
   zwar ausdrücklich als Markenvorgabe von HP:

       Grün (#4EAF44) als Fläche  →  IMMER weiße Schrift.

   Der Vollständigkeit halber, weil es beim Umstellen auffiel: gemessen sind das
   2,79:1, die WCAG-Schwelle für normalen Text liegt bei 4,5:1. Auf großen,
   fetten Beschriftungen (ab 18,66px bold) reicht es, darunter nicht. Wer das
   später anders haben will, braucht ein dunkleres Grün — die Schrift zu wechseln
   reicht nicht, das war der alte Zustand. Bis dahin: Markenvorgabe schlägt
   Messwert, und zwar bewusst.

   Die dunkle Fläche (Ink #14142B) trägt ebenfalls Weiß — dort sind es 18,03:1. */
/* Handelsbeziehungen: Bestätigen und Zusage-Knopf */
.hb-b-yes{ background:#4EAF44 !important; border-color:#4EAF44 !important; color:#FFFFFF !important }
.hb-b-yes:hover{ background:#439639 !important; border-color:#439639 !important }
/* Glückwunsch-Banner: einfarbig Grün, Schrift weiß (HP 17.08.) */
.hb-congrats{ background:#4EAF44 !important }
.hb-congrats, .hb-congrats h3{ color:#FFFFFF !important }
.hb-congrats p{ color:#FFFFFF !important; opacity:1 !important }
.hb-congrats .cg-ic{ background:rgba(255,255,255,.22) !important; color:#FFFFFF !important }
.hb-congrats a{ background:#14142B !important; color:#FFFFFF !important }
.hb-congrats a:hover{ background:#0F0F20 !important }
.mrq-contact{ background:#EDF7EC !important; border-color:#4EAF44 !important; color:#3A793B !important }
/* Chat: eigene Nachrichtenblase (grüne Fläche, weiße Schrift), Ungelesen-Zähler,
   aktiver Anhang-Knopf, gewählter Gesprächseintrag. Der gewählte Eintrag liegt
   auf Hellgrau, nicht auf Grün — dort steht dunkle Schrift, und die kommt aus
   `seiten-chat.css`; die Zeile hier ist am 19.08. entfallen. */
.cv-msg.me .cv-b{ background:#4EAF44 !important; color:#FFFFFF !important }
.cv-item.sel{ background:#F4F5F7 !important; border-color:#D7DAE0 !important }
.cv-item.sel .cv-iav{ background:#14142B !important; color:#fff !important }
.cv-un{ background:#4EAF44 !important; color:#FFFFFF !important }
.cv-clip.on{ border-color:#C1E3BE !important; background:#EDF7EC !important; color:#14142B !important }
/* FAQ: Sende-Knopf-Hover */
.fq-ask .send:hover{ background:#439639 !important; border-color:#439639 !important }
/* Ladenprofil: Bearbeiten-Leiste und die Hover-Zustände. Die aktiven Chips und
   Segmente standen auch hier — `seiten.css` malt sie längst genauso, die
   Nachtrag-Zeilen taten nichts und sind am 19.08. entfallen. */
.lp-bar{ background:#EDF7EC !important; border-color:#C1E3BE !important; color:#3A793B !important }
.lp-edit:hover, .lp-ph.miss:hover{ color:#14142B !important }
.lp-hero .half:hover .edge{ color:#14142B !important }
.st-foto:hover{ color:#14142B !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:#14142B !important; box-shadow:0 0 0 1px #14142B !important }
.req-pcard.sel .rpc-check{ background:#4EAF44 !important; border-color:#4EAF44 !important; color:#FFFFFF !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:#EDF7EC !important; color:#14142B !important }
.nstep-in{ text-align:center !important }
.nstep:focus-within{ border-color:#14142B !important }
.rp-step button:hover{ background:#EDF7EC !important; color:#14142B !important }
.stepper button:hover{ background:#EDF7EC !important; color:#14142B !important }

/* Provisionsrechner: seiten-marke-rechner.css baut eigene Bauteile (pr-*) mit
   Akzentflächen und Weiß — hier auf die Prinzipien gezogen. */
.pr-step i{ background:#4EAF44 !important; color:#FFFFFF !important }
.pr-chip.on{ background:#4EAF44 !important; border-color:#4EAF44 !important; color:#FFFFFF !important }
.pr-seg button.on{ background:#4EAF44 !important; color:#FFFFFF !important }
.pr-sw input:checked + label{ background:#4EAF44 !important }
.pr-result{ background:#EDF7EC !important; border-color:#C1E3BE !important }
.pr-result-k, .pr-result-v{ color:#3A793B !important }
.pr-money input:focus, .pr-mini:focus{ border-color:#14142B !important }

/* FAQ. Der aktive Navigationspunkt liegt auf Grün und trägt weiße Schrift.
   [19.08.2026] Die Beschreibung hier sprach noch von „Tannengrün mit
   Lime-Schrift" — das war die Lime-Zeit; die Regel darunter setzt seit dem
   17.08. Weiß. Text an die Regel angeglichen. */
.fq-kick{ color:#3A793B !important }
.fq-nav button.on{ background:#4EAF44 !important; color:#FFFFFF !important; box-shadow:none !important }
.fq-nav button:hover{ background:#EDF7EC !important; color:#14142B !important }
/* Die aufgeklappte Frage: weißer Grund, neutraler Rand.
   [19.08.2026] Die Kopfzeile (`summary`) stand hier auf Grün mit weißer Schrift
   und war tot — Nachtrag 13 weiter unten macht sie zu Ink. Zeile entfernt.
   [19.08.2026, Entscheidung HP] Der Rand hatte zwei Väter: `#4EAF44 !important`
   hier gegen einen Ink-Rand mit Verlauf aus Nachtrag 13 ohne `!important`.
   HP: „Rahmen weglassen bzw. keine Akzentfarbe rein." Beide Fassungen sind
   damit erledigt — `border-color` steht hier nicht mehr, und die Seitendateien
   setzen es auch nicht mehr. Es gilt der Grundrand `var(--border)` aus
   `.fq-item`, offen wie zu. Die Ink-Kopfzeile bleibt das einzige Signal
   „diese Frage ist offen". Wer wieder einen farbigen Rand will, setzt ihn in
   der Seitendatei, nicht als neues `!important` hier. */
.fq-item[open]{ background:#fff !important; overflow:hidden }
.fq-item[open] .fq-a{ padding-top:15px }
/* [17.08.2026, Feedback-Punkt 59, HP] „aufgeklappte Überschriften kann man beim
   Hovern schwer lesen" — hier war die Ursache. Diese Regel galt mit !important
   für JEDE Zusammenfassung, auch die aufgeklappte auf dunkler Fläche; die
   hellere Regel weiter unten hatte kein !important und verlor. Gemessen ergab
   das 1,65:1. Jetzt gilt sie nur noch für zugeklappte Zeilen. */
.fq-item:not([open]) summary:hover{ color:#3A793B !important }
.fq-ask .bar>i{ color:#3A793B !important }
.fq-ask .openb:hover{ border-color:#4EAF44 !important; background:#EDF7EC !important; color:#14142B !important }
.fq-ask .done{ color:#3A793B !important }
.fq-ask textarea:focus, .fq-ask input[type=email]:focus{ border-color:#14142B !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:#EDF7EC !important; color:#3A793B !important }
#poolPreview .more-tile{ background:#EDF7EC !important; border-color:#C1E3BE !important; color:#14142B !important }
.filter-active{ color:#14142B !important }
.share-ic.copied{ color:#3A793B !important }
.sr-statusliste i.fertig{ color:#3A793B !important }
.more-tile{ color:#14142B !important }
.info-i:hover, .info-i:active, .dinfo:hover, .dinfo:active,
.info-ic:hover, .info-ic:active{ color:#14142B !important }
.flow-more{ color:#14142B !important; border-color:#4EAF44 !important }
.fq-ask .openb:hover{ color:#14142B !important }
/* Dunkle Flächen aus den Seitendateien auf dieselbe Variable ziehen. Die Schrift
   darauf kommt aus `--dunkel-txt` und ist Weiß — der Satz „nie Weiß", der hier
   stand, stammt aus der Lime-Zeit und ist am 19.08.2026 entfernt worden.
   Die Doppelungen mit `.hb-bar`-Vorsatz und die Tannengrün-Zähler sind ebenfalls
   raus; Nachtrag 13 setzt sie weiter unten einmal, mit #C1E3BE. */
.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 }
/* [19.08.2026] `color:#14142B !important` stand hier und war tot — der Block von
   Nachtrag 8 setzt dieselbe Regel weiter unten auf Weiß. Nur die Fettschrift war
   echt und bleibt. */
.fab .fab-margin{ font-weight:800 }
/* [17.08.2026, HP] Die Ziffern im Ablauf 1–8 stehen in grünen Kreisen, also
   weiß — dieselbe Regel wie überall: Grün als Fläche trägt weiße Schrift.
   `seiten-brandpool.css` hatte das schon richtig (`.flow-num{color:#fff}`),
   diese Zeile hier hat es mit `!important` wieder überschrieben. Sie stammt aus
   der alten Lime-Palette, wo dunkle Ziffern nötig waren. */
.flow-num, .vflow-num{ color:#FFFFFF !important }
/* Verweise in den Markendetails: Lime als Schrift auf Weiß ist zu grell (HP 14.08.) */
.brand-details .bd-link{ color:#14142B !important }
.brand-details .bd-link:hover{ color:#3A793B !important }
.brand-details .bd-sic:hover{ color:#14142B !important }
.calc-row span[data-tip]{ border-bottom-color:rgba(20,20,43,.4) !important }
.calc-row.total{ border-top-color:rgba(20,20,43,.35) !important }
.more-tile{ border-color:#C1E3BE !important }
.tier-divider{ color:#3A793B !important }
.tier-divider::before, .tier-divider::after{ border-top-color:#C1E3BE !important }
.tier-divider span{ background:#EDF7EC !important; border-color:#C1E3BE !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='%234EAF44'/%3E%3C/svg%3E") no-repeat center/100% 100% !important }
/* [19.08.2026, HP] „Der Hover-Effekt soll bei ‚Markenanfragen deaktiviert' nicht
   möglich sein." Er war es, und zwar wegen dieser Zeile: sie trug ein
   `!important` und schlug damit `.btn-primary:disabled` aus
   `seiten-marke-karte.css`, obwohl `:disabled` die höhere Spezifität hat.
   Ein abgeschalteter Knopf färbte sich beim Überfahren grün und sah aus wie
   eine Handlung, die es nicht gibt.
   `:not(:disabled)` grenzt das ab. Der abgeschaltete Zustand bekommt darunter
   eine eigene, ruhige Fassung — grau, kein Zeiger, kein Farbwechsel. */
.btn-primary:hover:not(:disabled){ background:#439639 !important }
.btn-primary:disabled,
.btn-primary:disabled:hover{
  background:#E4E7F0 !important; border-color:#E4E7F0 !important;
  color:#5E5E6A !important; cursor:not-allowed !important; box-shadow:none !important;
}
/* [17.08.2026, HP] Alle fünf Knöpfe liegen auf `var(--accent)`, also auf Grün,
   und tragen damit weiße Schrift. Von Spur A gemeldet, nachgeprüft: alle fünf
   Hintergründe sind grün.
   [19.08.2026] Es gab dieselbe Regel ein zweites Mal, 138 Zeilen weiter oben —
   sie war die Stelle, an der die Hauptsitzung zweimal hängenblieb. Die obere
   ist entfernt; es gibt jetzt genau eine. */
.btn-primary, .fq-ask .send, .lp-bar .save, .lp-crop-ft .save, .lp-desc-foot .save{ color:#FFFFFF !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: die dunkle Fläche
   trägt die Schrift.
   [19.08.2026] Der Satz „auf grüner Fläche schreibt das Komplementär-Grün, nie
   Weiß" stand hier und ist seit dem 17.08. falsch — siehe den Absatz direkt
   darunter, der die Palette umgestellt hat. Entfernt.

   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 `#4EAF44` setzen.

   Von den vier Schriftfarben darunter ist nach dem Aufräumen am 19.08.2026 eine
   übrig (`.fab .fab-margin`) plus die Zähler-Blase; die Zähler in den Chips
   stehen jetzt nur noch einmal, in Nachtrag 13.
   Rücknahme: diesen Block löschen.
   ============================================================================ */
/* [19.08.2026, Spur E] Hier stand ein zweiter `:root`-Block mit `--dunkel`,
   `--dunkel-hov` und `--dunkel-txt`. Er trug seit dem 17.08. exakt dieselben
   drei Werte wie der große `:root` oben — gemessen, nicht vermutet. Die Werte
   samt Begründung stehen jetzt nur noch oben. */

/* Schrift, die fest auf Tannengrün stand und jetzt auf Ink läge. */
.fab .fab-margin{ color:#FFFFFF !important }
/* Die Zähler-Blase im Warenkorb: grüne Fläche, weiße Schrift — sie soll sich
   von der dunklen Leiste abheben, nicht darin verschwinden. */
.sp-korb .sp-zaehler{ background:#4EAF44 !important; color:#FFFFFF !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 — AUFGELÖST [19.08.2026]
   ----------------------------------------------------------------------------
   Der Block bestand aus einer Zeile: `.hero h1{ color:var(--accent-dk) }`.
   Sie sollte die Überschrift von Fast-Schwarz auf Tannengrün heben. Seit der
   Umstellung auf die Spreat Design Bibliothek sind `--accent-dk`, `--text` und
   `--ueberschrift` alle #14142B — die Zeile hat also nichts mehr getan.
   Entfernt. Die Überschrift folgt jetzt `--ueberschrift` wie jede andere.
   ============================================================================ */


/* ============================================================================
   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:#4EAF44; color:#FFFFFF;
  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.

   [19.08.2026, Spur E] Von diesem Nachtrag ist nur noch die Logo-Zeile übrig.
   Der `:root`-Block darin setzte `--card`, `--bg` und `--border` — auf genau
   die Werte, die auch oben stehen; Creme und Minze waren schon am 14.08. wieder
   zurückgenommen worden. Der Block ist aufgelöst, die Werte stehen oben.
   ============================================================================ */

/* --- 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="#14142B"` 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 = Ink (#14142B) als Fläche, weiße Schrift.**
   Grün bleibt der Akzent für kleine Dinge — Unterstreichung, Haken, Punkte —
   und für die Zahl neben der Beschriftung (#C1E3BE); es füllt keine großen
   Flächen mehr. Genau das war das Blenden.
   [19.08.2026] Der Satz stand hier als „Tannengrün als Fläche, Lime als
   Schrift". Die Regeln darunter setzen seit dem 17.08. Ink und Weiß; nur der
   Text hinkte hinterher.
   ============================================================================ */

/* --- FAQ: die offene Frage ------------------------------------------------ */
.fq-item[open] > summary{ background:#14142B; color:#FFFFFF; border-radius:9px 9px 0 0 }
.fq-item[open] > summary:hover{ color:#FFFFFF !important }
/* [19.08.2026] Die Ziffer der offenen Frage stand weiter oben zweimal auf
   #3A793B mit `!important` — dunkelgrün auf der Ink-Kopfzeile, gemessen 3,42:1
   und damit unter der AA-Schwelle von 4,5:1. Beide Zeilen sind entfernt.
   Danach gewann `seiten.css` / `seiten-marke-faq.css` mit `var(--accent)` —
   gleiche Spezifität, später geladen. Ergebnis war #4EAF44 auf Ink, 6,47:1.
   [19.08.2026, Entscheidung HP] Auch das ist jetzt weg: die Ziffer trägt in
   beiden Seitendateien #C3C8CF, dasselbe Grau wie im zugeklappten Zustand
   (auf Ink 10,7:1). Damit ist im ganzen FAQ-Element keine Akzentfarbe mehr —
   die Ink-Kopfzeile allein zeigt an, welche Frage offen ist.
   Die Zeile, die hier `color:#FFFFFF` setzen wollte, hat nie gewonnen und ist
   raus. Wenn die Ziffer je wieder Farbe tragen soll: in die Seitendatei,
   nicht als neues `!important` hierher. */
/* Die Antwort steht auf hellem Grund weiter — dunkel auf dunkel liest sich
   über mehrere Absätze schlecht. Ihre Farbe steht am Ende von Nachtrag 14;
   die Doppelung hier ist am 19.08. entfallen. */

/* --- Umschalter Liste ⇄ Grid ---------------------------------------------- */
.vt-btn.active, .seg-btn.active, .hb-view.on{
  background:#14142B !important; color:#FFFFFF !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:#C1E3BE !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 dunkel auf
   dunkel stehen. Das betrifft den Kopf der offenen FAQ-Frage; er behält seine
   helle Schrift.
   [19.08.2026] Das Glückwunsch-Banner stand hier ebenfalls als Ausnahme — mit
   `color:#14142B` und der Begründung „Banner ist Lime". Das Banner ist seit dem
   17.08. Grün mit weißer Schrift; die Ausnahme war tot und ihre Begründung
   falsch. Beide Zeilen entfernt.
   ============================================================================ */
/* [19.08.2026, Spur E] `--ueberschrift` stand hier in einem eigenen
   `:root`-Block. Sie ist in den großen `:root` oben gewandert, samt Warnung
   zur Ladereihenfolge. Hier steht jetzt nur noch, wer sie benutzt. */
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 -------------------------------------------- */
.fq-item[open] > summary,
.fq-item[open] > summary *{ color:#FFFFFF }
.fq-item[open] .fq-a,
.fq-item[open] .fq-a *{ color:var(--text-weich) }
.fq-item[open] .fq-a b{ color:#14142B }

/* ============================================================================
   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) }

/* ============================================================================
   Ankündigungsband Testzugang — [20.08.2026, HP, BOARD-Punkt 27]

   Zweite Fassung nach HP: zentriert und deutlich zurückhaltender. Die erste
   hatte die Bauform des Admin-Bands geerbt — links ausgerichtet, mit einer
   vollflächig grünen Pille. Das Admin-Band WARNT („du sitzt in einem fremden
   Konto"), dieses hier informiert nur. Gleiche Lautstärke war deshalb falsch.

   Was leiser wurde: keine gefüllte Pille mehr, nur fetter Text · Hintergrund
   ein Hauch statt der vollen Akzentfläche · Trennlinie eine Haarlinie in der
   normalen Randfarbe · Schrift im gedämpften Ton, nur der Kopf in Ink.
   ============================================================================ */
.sp-stufenband{
  position:sticky; top:0; z-index:59;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:4px 8px;
  padding:8px 22px; text-align:center;
  background:#F4F9F3; border-bottom:1px solid var(--border);
  color:var(--muted); font-size:var(--fs-klein); line-height:1.5;
}
.sp-stufenband-tag{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  color:#14142B; font-weight:700; white-space:nowrap;
  background:none; padding:0; border-radius:0; letter-spacing:0;
}
.sp-stufenband-tag i{ font-size:var(--ic-md); color:var(--accent-dk) }
.sp-stufenband-txt{ flex:0 1 auto; min-width:0 }
.sp-stufenband-txt a{ color:var(--accent-dk); font-weight:600; text-decoration:underline }

/* Testwoche vorbei: derselbe Bau, nur ohne den grünen Anflug. */
.sp-stufenband--aus{ background:#F6F7F9 }
.sp-stufenband--aus .sp-stufenband-tag i{ color:#8A8A94 }
.sp-stufenband--aus .sp-stufenband-txt a{ color:#5E5E6A }

@media (max-width:640px){
  .sp-stufenband{ padding:8px 14px; font-size:var(--fs-meta) }
}

/* Stapeln statt überlagern — [20.08.2026]
   `#kopf` klebt mit `top:0`, das Band auch: beim Scrollen schob sich der Kopf
   darüber. Für das Admin-Band gab es die Lösung längst (`.sp-adminband ~ #kopf`),
   sie wurde für das neue Band nur nicht mitgezogen.

   Die Höhe setzt `stufenBandZeichnen()` als `--stufenband-hoehe` — gemessen statt
   geraten, weil das Band auf schmalen Fenstern umbricht und dann zweizeilig ist.
   Der Rückfallwert greift nur, falls das Messen ausfällt. */
.sp-stufenband ~ #kopf{ top:var(--stufenband-hoehe, 38px) }

/* Beide Bänder gleichzeitig: das Admin-Band bleibt ganz oben (es warnt), das
   Stufenband darunter, der Kopf unter beiden. */
.sp-adminband ~ .sp-stufenband{ top:var(--adminband-hoehe, 42px) }
.sp-adminband ~ .sp-stufenband ~ #kopf{
  top:calc(var(--adminband-hoehe, 42px) + var(--stufenband-hoehe, 38px));
}

/* 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:#14142B !important; border-color:#14142B !important; color:#FFFFFF !important;
}
.fchip.active .n{ color:#C1E3BE !important }
/* [20.08.2026, HP] Das (i) im ausgewählten Chip war grün umrandet und grün
   hinterlegt — auf der Ink-Fläche las sich das wie ein eigener grüner Punkt neben
   dem Text, nicht wie ein Hinweiszeichen. Jetzt trägt es dieselbe Farbe wie die
   Schrift daneben: Weiß, nur abgestuft in der Deckkraft.

   Die drei `:hover/:active`-Zeilen sind Pflicht, nicht Kür: weiter oben in dieser
   Datei steht `.info-ic:hover, .info-ic:active{ color:#14142B !important }`. Diese
   Regel ist für helle Flächen gedacht und färbt das Zeichen beim Antippen dunkel —
   auf der dunklen Fläche verschwindet es dann. Deshalb hier ausdrücklich Weiß,
   mit höherer Spezifität als die allgemeine Regel. */
.fchip.fchip-mine.active .fchip-i{
  background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.55) !important;
  color:#FFFFFF !important;
}
.fchip.fchip-mine.active .fchip-i:hover,
.fchip.fchip-mine.active .fchip-i:active,
.fchip.fchip-mine.active .fchip-i:focus{
  background:rgba(255,255,255,.30) !important; border-color:#FFFFFF !important;
  color:#FFFFFF !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:hover{ border-style:solid; border-color:#C1E3BE !important; background:var(--accent-soft) !important; color:#14142B }
.subchip.active{
  background:#14142B !important; border-color:#14142B !important; color:#FFFFFF !important;
}
.filter-reset{ color:var(--muted) !important }
.filter-reset:hover{ color:#14142B !important; text-decoration:underline; text-underline-offset:2px }

/* [19.08.2026, Feedback-Punkte 39/40, HP] Der Profilwechsel im Konto-Menü.
   Er sieht aus wie ein Menüpunkt, ist aber keiner: er wechselt die Seite, auf
   der man arbeitet. Deshalb eine Trennlinie darüber und das Pfeilsymbol — ohne
   den Absatz läse er sich wie „noch eine Unterseite". */
.sp-menu .sp-menu-wechsel{
  border-top:1px solid var(--border); margin-top:4px; padding-top:10px;
  color:var(--text); font-weight:600;
}
.sp-menu .sp-menu-wechsel:hover{ background:var(--accent-soft); }

/* [29.08.2026, Punkt 127] Die Markenliste im Konto-Menue — sichtbar nur, wenn
   eine Adresse zu mehreren Marken gehoert.

   Die Zeilen sehen bewusst ANDERS aus als die Menuepunkte darunter: sie fuehren
   nicht auf eine Seite, sie wechseln, an welcher Marke man arbeitet. Deshalb die
   Ueberschrift darueber und das Haekchen statt eines Symbols links — ein Punkt
   mit Icon in der Reihe der uebrigen laese sich wie „noch eine Unterseite". */
.sp-menu-abschnitt{
  padding:8px var(--sp-3) 4px; font-size:var(--fs-mikro); font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--aus-text);
  display:flex; align-items:center; gap:6px;
}
.sp-menu-abschnitt small{
  margin-left:auto; font-weight:700; letter-spacing:0; text-transform:none;
  color:var(--muted);
}
.sp-menu button.sp-menu-marke{
  gap:var(--sp-2); padding:8px var(--sp-3); font-size:var(--fs-klein);
}
.sp-menu-marke-name{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Das Haekchen bleibt im Fluss, auch wenn es unsichtbar ist — sonst ruecken die
   Namen beim Wechseln um seine Breite hin und her. */
.sp-menu button.sp-menu-marke i.ph-check{ color:var(--accent); visibility:hidden; }
.sp-menu button.sp-menu-marke[aria-current="true"]{ font-weight:800; }
.sp-menu button.sp-menu-marke[aria-current="true"] i.ph-check{ visibility:visible; }
/* Trennlinie NACH der Liste, nicht vor jedem Punkt darunter.
   Am Behaelter, NICHT an `.sp-menu-marke:last-of-type` — `:last-of-type` zaehlt
   alle `button`-Geschwister im Menue, und der letzte davon ist „Abmelden".
   Die Regel haette nie gegriffen (gemessen am 30.08.2026). */
.sp-menu-marken{
  border-bottom:1px solid var(--border); padding-bottom:4px; margin-bottom:4px;
}

/* [19.08.2026, Feedback-Punkt 63, HP] Die Fußzeile mit Impressum und
   Datenschutz. Bewusst leise: sie muss auffindbar sein, nicht auffällig —
   Pflichtangaben gehören ans Ende, nicht in die Aufmerksamkeit. */
.sp-fuss{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:center;
  padding:26px 20px 34px; margin-top:40px;
  border-top:1px solid var(--border);
  font-size:var(--fs-meta); color:var(--muted);
}
.sp-fuss a{ color:var(--muted); text-decoration:none; }
.sp-fuss a:hover{ color:var(--text); text-decoration:underline; }

/* Gefahr-Schaltfläche im Bestätigungs-Dialog — [20.08.2026]
   Es gab in der App keine rote Schaltfläche; `.btn-weg` im Markenprofil ist
   eine helle Variante für eine Leiste, nicht für einen Dialog. Farbwerte aus
   `.pr-alert` (seiten-marke-profil.css), damit Rot in der App überall dasselbe
   Rot ist. */
.btn.sp-btn-gefahr{
  background:#b3261e; border-color:#b3261e; color:#fff;
}
.btn.sp-btn-gefahr:hover{ background:#9a1f18; border-color:#9a1f18 }

/* ============================================================================
   Dateikärtchen im Chat — [23.08.2026]
   ----------------------------------------------------------------------------
   Warum hier im Baukasten und nicht in einer `seiten-*.css`: das Kärtchen kommt
   in BEIDEN Chats vor (`laden-chat.html`, `marke-chat.html`). Es stand nur in
   `seiten-chat.css` — `seiten-marke-chat.css` hatte den Block nie bekommen, und
   auf der Markenseite waren `.cv-anh-i` und `.cv-file` deshalb rohe Browser-
   Schaltflächen. Doppelt pflegen heißt: eine Seite vergisst es.

   ⛔ Die Regel, die den Bug ausgelöst hat: der Anhang ist NICHT in der Blase.
   `cvMsgHtml()` setzt `.cv-anh` als GESCHWISTER von `.cv-b` — die grüne Blase
   umschließt nur den Text. Die alte Fassung hat aber `.cv-msg.me .cv-anh-i` auf
   `background:rgba(255,255,255,.16); color:#fff` gestellt, in der Annahme, das
   Kärtchen liege in der dunklen Eigenblase. Ergebnis (Meldung HP 23.08.2026):
   weiße Schrift auf hellem Seitenhintergrund — der Dateiname war unsichtbar,
   man sah nur einen leeren Rahmen.

   Deshalb: EINE Farbwelt, absender-unabhängig, deckendes Weiß statt
   Durchscheinen. Ein Kärtchen bleibt damit auch lesbar, wenn es später doch
   einmal auf farbigem Grund landet. Keine `.me`-Sonderfarben mehr — wer eine
   ergänzt, baut denselben Fehler neu.
   ============================================================================ */

/* Anhänge IN der Nachricht (unter der Textblase) */
.cv-anh{ display:flex; flex-direction:column; gap:6px; margin-top:8px; max-width:100% }
.cv-anh-i{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; border:1px solid var(--border); background:#fff;
  border-radius:10px; font-size:12.5px; font-weight:600; color:var(--text);
  cursor:pointer;
}
.cv-anh-i:hover{ border-color:#c3cbd4; background:#fff }
.cv-anh-i:disabled{ opacity:.55; cursor:progress }
.cv-anh-i > i{ font-size:15px; color:var(--muted); flex:0 0 auto }
.cv-anh-nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cv-anh-gr{ flex:0 0 auto; font-weight:500; color:var(--muted); font-size:11.5px }

/* Anhang-Zeile im Eingabefeld, bevor abgeschickt wird — neutral gehalten:
   ein Anhang ist kein Produktbezug (deshalb nicht wie `.cv-refbar` grün). */
.cv-filebar{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:8px }
.cv-file{
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  padding:6px 8px 6px 11px; border:1px solid var(--border); background:var(--bg);
  border-radius:10px; font-size:12.5px; font-weight:600; color:var(--text);
  overflow-wrap:anywhere;
}

/* ----------------------------------------------------------------------------
   Anmerkung von Spreat im Chat — [09.09.2026]
   ----------------------------------------------------------------------------
   Die dritte Stimme. Marke und Laden reden miteinander; Spreat sagt etwas ÜBER
   den Vorgang. Dieselbe Blasenform wäre irreführend — man liest sie sonst als
   Forderung der Gegenseite und verhandelt dagegen. Deshalb Tint mit grünem
   Rand, wie die Anmerkungszeile im Verhandlungsfenster, und links stehend wie
   alles, was nicht von einem selbst kommt.

   Beide Chats brauchen den Block, deshalb steht er hier und nicht zweimal in
   den `seiten-*-chat.css` (CLAUDE.md §5).
   ---------------------------------------------------------------------------- */
.cv-msg.spreat{ align-self:flex-start; max-width:82% }
.cv-msg.spreat .cv-b{
  background:var(--accent-soft); border:1px solid var(--accent-rand);
  color:var(--akzent-tinte); border-bottom-left-radius:4px;
}
.cv-msg.spreat .cv-t{ font-weight:700; color:var(--green) }
.cv-msg.spreat .cv-t i{ font-size:12px; vertical-align:-.08em; margin-right:3px }

/* ============================================================================
   „Beendet"-Klappe in den Handelsbeziehungen — [23.08.2026]
   ----------------------------------------------------------------------------
   Abgelehnte und zurückgezogene Produkte bleiben erhalten, stehen aber nicht
   mehr zwischen den laufenden. Im Baukasten, weil `laden-hb.html` und
   `marke-hb.html` verschiedene `seiten-*.css` laden und die Klappe sonst auf
   einer der beiden Seiten ungestaltet wäre — genau der Fehler, der bei den
   Dateikärtchen im Chat passiert ist.
   ============================================================================ */
.hb-alt{ border-top:1px solid #eef0f2; background:var(--bg) }
.hb-alt > summary{
  cursor:pointer; list-style:none; padding:11px 16px;
  font-size:12.5px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.hb-alt > summary::-webkit-details-marker{ display:none }
.hb-alt > summary::before{
  content:'▸'; font-size:11px; line-height:1; transition:transform .15s ease;
}
.hb-alt[open] > summary::before{ transform:rotate(90deg) }
.hb-alt > summary:hover{ color:var(--text) }
.hb-alt[open] > summary{ border-bottom:1px solid #eef0f2; background:#fff }

/* ============================================================================
   Filterzeile in der geöffneten Handelsbeziehung — [23.08.2026, HP, Punkt 72]
   ----------------------------------------------------------------------------
   Die Zeile mit „Aktion nötig · Warten · Konditionen geeinigt" war reine
   Anzeige. Sie ist jetzt eine Filterleiste mit „Alle" davor. Bewusst dieselbe
   Optik wie vorher (Zustandskreis + Wortlaut + Zahl), nur klickbar: HP kennt
   die Zeile, sie soll nicht zu einer neuen Bedienleiste mutieren.
   Im Baukasten, weil beide Handelsbeziehungen sie brauchen und
   `seiten-hb.css`/`seiten-marke-hb.css` sonst auseinanderlaufen (Punkt 76).
   ============================================================================ */
.hb-fltbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.hb-flt{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:9px 16px; border-radius:999px; border:1px solid transparent;
  background:none; cursor:pointer; font:inherit;
  font-size:12.5px; font-weight:700; color:var(--muted);
  transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.hb-flt:hover{ background:var(--bg); color:var(--text) }
/* [24.08.2026, HP] Zwei Anläufe, beide korrigiert — hier steht, was wirklich das
   Problem war:
   1. Ich hatte den aktiven Zustand grün gebaut, HP fand ihn „zu knapp" und wies
      auf bestehende Muster hin. Ich habe daraufhin die Farbe getauscht (Ink wie
      `.hb-tab.on`) — falsch verstanden: „Mir ging es nur darum, dass der schwarze
      Hintergrund viel zu knapp an der Schrift ist. Da ist gar kein Padding."
   2. Also zurück zum Grün, und behoben wird das, was gemeint war: der
      Innenabstand. Die Fläche braucht Luft um die Schrift, sonst klebt sie am
      Wort — unabhängig von der Farbe.
   Lehre für später: erst fragen, welche Eigenschaft gemeint ist, bevor man die
   auffälligste tauscht. */
.hb-flt.on{ background:var(--accent-soft); border-color:var(--accent-rand); color:var(--accent-dk) }
.hb-flt.on:hover{ background:var(--accent-soft); color:var(--accent-dk) }
/* Ein Filter ohne Treffer führt auf eine leere Liste — die sieht dann kaputt aus,
   obwohl sie stimmt. Deshalb gedämpft und nicht anklickbar. */
.hb-flt:disabled{ opacity:.42; cursor:default }
.hb-flt:disabled:hover{ background:none; color:var(--muted) }
.hb-flt-l{ line-height:1 }
/* Die Zahl bei „Alle" ist bewusst KEINE Pille: die drei Zustände tragen links
   ihren farbigen Kreis mit der Zahl, „Alle" hätte daneben ein zweites, anders
   gebautes Zeichen bekommen — eine Pille in einer Pille, die beim Umschalten
   zudem nur halb gefüllt aussah (HP, 23.08.2026). Jetzt dieselbe Typografie wie
   die Zahlen in den Kreisen, nur ohne Kreis. */
.hb-flt-n{ font-size:12.5px; font-weight:800; color:var(--text); line-height:1 }
.hb-flt.on .hb-flt-n{ color:var(--accent-dk) }
.hb-flt-hint{
  font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:7px;
}
.hb-flt-hint > button{
  background:none; border:0; padding:0; font:inherit; font-size:12px;
  color:var(--accent-dk); font-weight:700; cursor:pointer; text-decoration:underline;
}



/* ============================================================================
   „Was hat sich geändert" in der Handelsbeziehung — [24.08.2026, HP, Punkt 82]
   ----------------------------------------------------------------------------
   Meldung von HP: bei einem Gegenvorschlag sah die Empfängerseite nur den neuen
   Zustand und musste raten, ob und was sich geändert hat. Jetzt steht der alte
   Wert daneben — durchgestrichen und gedämpft, aber lesbar. Verschwinden lassen
   wäre falsch: die Frage lautet ja gerade „was war vorher".

   Zwei Größen: in der Produktzeile getönt und mit Vorspann („Die Marke hat
   geändert"), im Verlaufsschritt schlicht (`.hb-chg-sm`) — dort sagt schon die
   Zeile darüber, wer gezogen hat.
   Im Baukasten, weil beide Handelsbeziehungen sie brauchen (Spiegelregel §5).
   ============================================================================ */
.hb-chg{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  margin-top:10px; padding:8px 11px;
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
  font-size:12px; line-height:1.35;
}
.hb-chg-w{ font-weight:800; color:var(--text); white-space:nowrap }
.hb-chg-i{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap }
.hb-chg-l{ color:var(--muted) }
.hb-chg s{ color:var(--muted); text-decoration-thickness:1px }
.hb-chg > .hb-chg-i > i{ font-size:11px; color:var(--muted) }
.hb-chg b{ color:var(--text); font-weight:800 }
/* Im Verlauf ohne Kasten: der Schritt trägt schon Punkt, Linie und Überschrift —
   ein zweiter Rahmen darin macht die Spur unruhig. */
.hb-chg.hb-chg-sm{
  margin-top:5px; padding:0; background:none; border:0;
  font-size:11.5px; gap:4px 10px;
}


/* ============================================================================
   Der (i)-Hinweiskasten — [24.08.2026, BOARD-Punkt 78]
   ----------------------------------------------------------------------------
   Die Regeln standen HIER schon (oben in dieser Datei) — und zusätzlich zweimal
   identisch in `seiten-brandpool.css` und `seiten-marke-hb.css`. Die beiden
   Kopien sind heute entfallen; hier ändert sich nichts.

   Was fehlte, war nicht das Aussehen, sondern die MECHANIK: die Hörer, die den
   Kasten zeichnen, standen nur in `index.html`. Überall sonst war das (i) ein
   stummer Kreis, und wer trotzdem eine Erklärung wollte, musste auf `title`
   ausweichen — den grauen Kasten des Browsers, verzögert und in fremder Optik
   (HP, 24.08.). Die Hörer stehen jetzt in `shared/app-start.js` und laufen
   damit auf jeder Seite.
   ============================================================================ */

/* ============================================================================
   Variante A: Herkunft, „neu", Runde, Verlaufskonditionen — [24.08.2026, P. 85]
   ----------------------------------------------------------------------------
   Alles gedämpft und klein: die ZAHL ist die Aussage, Herkunft und Marker sind
   Beiwerk. Wer sie so laut setzt wie den Wert, macht aus drei Konditionen sechs.
   Im Baukasten, weil beide Handelsbeziehungen sie brauchen (Spiegelregel §5).
   ============================================================================ */
/* [24.08.2026, HP] Ich hatte hier eine EIGENE Marke gebaut (Ink, Versalien).
   HP: „Mach das so, wie es vorher war." Es gibt das Badge längst — `.hb-new`
   („Neu" am ungesehenen Schritt), hellblau. Also dasselbe Aussehen, damit es im
   selben Bild nicht zwei Sorten „neu" gibt. */
.hb-neu{
  display:inline-flex; align-items:center; background:#e8f0fe; color:#1a56c4;
  border:1px solid #c9dcfb; border-radius:999px; padding:2px 8px;
  font-size:11px; font-weight:800; line-height:1.5;
  margin-left:7px; vertical-align:middle; white-space:nowrap; flex:0 0 auto;
}
/* [27.08.2026, HP] Die Sperrung (`letter-spacing:.02em`) ist raus: sie stand nur
   hier und nicht im Entwurf `entwuerfe/13-verhandlung-szenarien.dc.html`, machte
   das Wort breiter als dort und den Abstand zur Zahl daneben ungleich. */
.hb-her{ margin-left:7px; font-size:11px; color:var(--muted); font-weight:600 }
/* Der Stand, der bis zum Ende der Nachverhandlung weiter gilt. Bewusst mit
   Rahmen statt nur grau: es ist die Zahl, die JETZT gültig ist — die daneben ist
   erst ein Wunsch. */
.hb-gilt{
  margin-left:7px; font-size:10.5px; font-weight:700; color:var(--accent-dk);
  background:var(--accent-soft); border:1px solid var(--accent-rand);
  border-radius:999px; padding:1px 7px; white-space:nowrap;
}
.hb-runde{
  display:inline-flex; align-items:center; gap:4px; margin-left:8px;
  font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:1px 7px; white-space:nowrap;
}
.hb-runde > i{ font-size:11px }
/* Die Konditionen eines Verlaufsschritts */
/* [24.08.2026, HP, Punkt 4] Eingerückt und mit Punkten — die Konditionen sind
   die AUFZÄHLUNG zu der Überschrift darüber, nicht eine zweite Überschrift.
   Bündig untereinander lasen sie sich wie gleichrangige Zeilen. Dieselbe Optik
   wie `.hb-pkond` in der Produktzeile, damit man nicht zweimal lernen muss,
   wie eine Konditionsliste aussieht. */
.hb-vk{
  list-style:none; margin:7px 0 0; padding:0 0 0 13px;
  display:flex; flex-direction:column; gap:3px; font-size:11.5px;
}
.hb-vk li{ position:relative; display:flex; gap:7px; line-height:1.45 }
.hb-vk li::before{
  content:""; position:absolute; left:-11px; top:7px;
  width:4px; height:4px; border-radius:50%; background:#c2c7ce;
}
/* [27.08.2026, HP] Alle Zahlen stehen genau untereinander — wie im Entwurf
   `entwuerfe/13-verhandlung-szenarien.dc.html`. Mit 128 px war die Fluchtlinie
   nur behauptet: „Erstlieferung je Standort" ist breiter und schob seinen Wert
   nach rechts, während „Provision für dich" weiter links stand. 150 px ist die
   Breite der längsten Beschriftung; damit hält die Linie wirklich. */
.hb-vk span{ color:var(--muted); min-width:150px }
.hb-vk b{ color:var(--text) }

/* Der Vorwert in einer Verlaufszeile — [24.08.2026, Punkt 86].
   Steht NEBEN dem neuen Wert, nicht in einer zweiten Zeile darunter: die Zahl,
   die jetzt gilt, ist die Aussage; der alte Wert ist die Begründung dafür, dass
   sich etwas bewegt hat. */
.hb-vk s{ color:var(--muted); margin-left:8px; font-weight:600; text-decoration-thickness:1px }

/* ============================================================================
   Bitte um ein Angebot — der Kasten, der zwischen Kopf und Produktliste steht
   [08.09.2026, BOARD-Punkt 178, HP: „unterhalb dieses Kästchens ein neues
   Kästchen mit dieser Anfrage. Darunter kommt dann das ganz Normale."]
   ----------------------------------------------------------------------------
   Warum hier und nicht in `seiten-marke-hb.css`: der Block wird an DREI Stellen
   gebraucht — Marken-Handelsbeziehungen, Laden-Handelsbeziehungen und
   Marken-Chat. Genau die Verdopplung zwischen `seiten-hb.css` und
   `seiten-marke-hb.css` steht schon als Aufräumpunkt im Ideenpool; eine vierte
   Kopie kommt nicht dazu. (CLAUDE.md §5)

   Der Kasten ist ein Zustand, kein Hinweis: er erscheint, solange die Marke
   nichts angeboten hat, und verschwindet in dem Moment, in dem das Angebot
   steht. Deshalb trägt er die Handlungsfarbe und nicht das Grau eines Vermerks.
   ============================================================================ */
/* [08.09.2026, HP: „das sieht richtig kacke aus"] Der Kasten war EINE Flex-Reihe
   aus Icon, Textblock und Knopf, mittig ausgerichtet — mit `align-self:flex-start`
   am Knopf. Sobald das Zitat dazukam, wuchs der Textblock, und die drei Teile
   standen auf drei verschiedenen Höhen: Icon mittig, Überschrift oben, Knopf
   daneben irgendwo. Jetzt zwei Reihen: Kopfzeile (Icon · Text · Knopf, an ihrer
   Oberkante ausgerichtet), darunter das Zitat über die volle Breite. */
/* ⚠️ JEDER SELEKTOR HIER IST DOPPELT GESCHRIEBEN — das ist kein Versehen.
   [08.09.2026, HP: „warum formatierst du das so kacke, siehst du das nicht?"]

   `seiten-hb.css` und `seiten-marke-hb.css` beginnen beide mit dem Reset

       .sp-seite *, .mini, .mini *, .overlay{box-sizing:border-box;margin:0;padding:0}

   Der hat Spezifität (0,1,0) — GENAU SO VIEL wie eine einfache Klasse — und
   beide Dateien werden NACH `ui-wise.css` geladen. Bei Gleichstand gewinnt die
   spätere Regel. Ergebnis, im Browser gemessen:

       .sp-erbeten          padding      14px 16px  →  0px
       .sp-erbeten-akt      margin-left  auto       →  0px
       .sp-erbeten-zitat    margin-top   12px       →  0px
       .sp-erbeten-zitat    padding-left 13px       →  0px

   Der Kasten stand also ohne Innenabstand, der Knopf klebte am Text statt rechts
   zu sitzen, und das Zitat lag ohne Einzug an der Kastenkante. Genau so sah es
   auf beiden Handelsbeziehungs-Seiten von Anfang an aus — im Chat dagegen
   richtig, weil `seiten-marke-chat.css` diesen Reset nicht mitbringt. Das war
   der Grund, warum es beim Prüfen durchging: eine Testseite ohne `.sp-seite`
   zeigt das Bauteil so, wie es gemeint ist, und nicht so, wie es ankommt.

   `.sp-erbeten.sp-erbeten` ist derselbe Selektor zweimal: er trifft dasselbe
   Element, zählt aber als (0,2,0) und schlägt den Reset damit sauber — ohne
   `!important` und ohne dass `ui-wise.css` etwas über die Seiten wissen muss,
   auf denen es liegt. Wer hier eine Regel ergänzt, schreibt sie genauso.
   ⚠️ Und prüft sie in einer Seite MIT `<main class="sp-seite">`. */
.sp-erbeten.sp-erbeten{
  background:#eaf7ee; border:1px solid #cdebd6; border-radius:14px;
  padding:16px 18px; margin-bottom:14px;
}
.sp-erbeten .sp-erbeten-kopf{ display:flex; align-items:flex-start; gap:13px; }
.sp-erbeten .sp-erbeten-ic{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:#fff; border:1px solid #cdebd6;
  display:grid; place-items:center; font-size:17px; color:#16a34a;
}
/* Der Text steht neben einem 38px hohen Icon; ohne den Innenabstand sitzt die
   Überschrift an dessen Oberkante und wirkt gegenüber dem Icon verrutscht. */
.sp-erbeten .sp-erbeten-tx{ min-width:0; padding-top:1px; }
.sp-erbeten .sp-erbeten-t1{ font-weight:700; font-size:14px; color:#10151c; line-height:1.35 }
.sp-erbeten .sp-erbeten-t2{ font-size:12.5px; color:#3f6a4c; margin-top:3px; line-height:1.45 }

/* Die Nachricht des Ladens im Wortlaut — sie ist der eigentliche Auftrag.
   Als Zitat gesetzt: Balken links, kein Rahmen, kein weißer Grund. Vorher ein
   weißer Kasten mit `overflow:auto` — das sah aus wie ein leeres Eingabefeld.

   Der linke Einzug von 51px ist die Icon-Breite (38) plus der Abstand (13):
   damit beginnt das Zitat auf derselben Linie wie die Überschrift darüber und
   bildet mit ihr eine Textspalte, statt allein an der Kastenkante zu kleben.

   [08.09.2026, HP] Die Nachricht steht GANZ da — keine Klemme, kein Bildlauf,
   kein „…". Hier standen vier Zeilen mit `-webkit-line-clamp`, und schon die
   Beispielanfrage lief hinten in Punkte aus: Gruß und Absender fehlten, also
   genau der Teil, an dem man sieht, wer schreibt. Der Text ist der eigentliche
   Auftrag — wer ihn abschneidet, spart Platz an der einzigen Stelle, an der
   niemand Platz sparen will. Die Länge ist ohnehin gedeckelt: `request_brands`
   trägt ein CHECK auf 4000 Zeichen. */
.sp-erbeten .sp-erbeten-zitat{
  margin:13px 0 0 51px; padding:1px 0 1px 13px; border-left:3px solid #b9e0c8;
  font-size:13px; line-height:1.6; color:#33443a; white-space:pre-wrap;
  overflow-wrap:anywhere;
}
/* Die Knopfgruppe. „Ablehnen" steht bewusst LINKS vom grünen Knopf und ohne
   eigene Farbe: es ist der seltenere Weg, aber es muss ihn geben — sonst bleibt
   eine Bitte, die die Marke nicht bedienen will, für den Store ewig auf
   „meldet sich noch". [08.09.2026, HP] */
.sp-erbeten .sp-erbeten-akt{
  margin-left:auto; flex:none; white-space:nowrap;
  display:flex; gap:8px; align-items:center;
}

/* Anmerkung von Spreat in diesem Kasten [09.09.2026]. Eine Anfrage ohne Produkte
   hat keine Produktzeile und damit kein Verhandlungsfenster — ohne diesen Block
   wäre die Anmerkung dort gesetzt, aber nirgends zu sehen. Sie steht unter dem
   Zitat, im selben Einzug, aber als Fläche statt als Zitatstrich: der Text davor
   kommt vom Store, dieser hier von Spreat. */
.sp-erbeten .sp-erbeten-anm{
  margin:13px 0 0 51px; padding:9px 12px; border-radius:10px;
  /* WEISS, nicht Tint — anders als die Zwillingszeile im Verhandlungsfenster.
     Der Kasten drumherum ist selbst schon gruen (#EAF7EE); Tint auf Tint ergab
     zwei Farben, die sich um 3 Werte unterscheiden, und die Anmerkung
     verschwand darin. Nachgemessen am 09.09.2026. Das Gruene bleibt trotzdem
     erkennbar: Rand, Zeichen und Ueberschrift tragen es. */
  background:#fff; border:1px solid var(--accent-rand);
  font-size:13px; line-height:1.55; color:var(--akzent-tinte);
}
/* `pre-wrap` gehoert an den TEXT, nicht an den Kasten: am Kasten wuerde jede
   Einrueckung des Markups zwischen Ueberschrift und Text als Leerzeile
   erscheinen. Genau das war beim ersten Wurf zu sehen. [09.09.2026] */
.sp-erbeten .sp-erbeten-anm-t{ white-space:pre-wrap; overflow-wrap:anywhere }
.sp-erbeten .sp-erbeten-anm-k{
  display:flex; align-items:center; gap:6px; margin-bottom:4px;
  font-weight:700; font-size:12.5px; color:var(--green); white-space:normal;
}

/* Ab hier bricht der Knopf unter den Text, statt ihn zu quetschen — und das
   Zitat gibt seinen Einzug auf, weil die Textspalte dann keine mehr ist. */
@media (max-width:640px){
  .sp-erbeten .sp-erbeten-kopf{ flex-wrap:wrap }
  .sp-erbeten .sp-erbeten-akt{ margin-left:0; width:100%; justify-content:center }
  .sp-erbeten .sp-erbeten-zitat{ margin-left:0 }
  .sp-erbeten .sp-erbeten-anm{ margin-left:0 }
}