/* ────────────────────────────────────────────────────────────────────────────
 * My Stack — Dashboard-CSS
 *
 * Regel aus docs/mystack/DESIGN.md §1: KEIN Hex-Wert, KEINE px-Schriftgröße.
 * Alles kommt aus tokens.css. Ein literaler Farbwert hier ist ein Fehler,
 * kein Stilmittel. (Ausnahmen: rgba() für Overlays/Ränder auf dunklem Grund,
 * wo es keinen Token gibt — jeweils kommentiert.)
 * ────────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────────
 * Schriften.
 *
 * Die @font-face-Deklarationen der oeffentlichen Seite stehen in
 * src/styles/global.css — die laedt die App bewusst nicht (sie zieht das
 * komplette Site-CSS mit). Ohne eigene Deklaration fiel "Roboto Condensed"
 * still auf eine System-Sans zurueck und sah nicht kondensiert aus.
 *
 * assets/fonts ist ein Symlink auf public/fonts, damit die Dateien
 * gleich-origin ausgeliefert werden: die CSP setzt font-src 'self', ein
 * Verweis auf www.fastlancer.org waere blockiert (GESAMTPLAN §10).
 *
 * Nur die latin-Schnitte: die App hat kein Nutzer-Content in Sprachen, die
 * latin-ext brauchen, und jede Datei ist ein zusaetzlicher Request.
 * ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-condensed-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto-condensed-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/pt-sans-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/pt-sans-700-latin.woff2') format('woff2');
}

/* ────────────────────────────────────────────────────────────────────────────
 * Aufmerksamkeits- und Gefahrenfarbe (Entscheidung Justus, 2026-07-26).
 *
 * Die geerbten Werte aus tokens.css sind Tailwind-Standard: #b45309 Amber und
 * #b91c1c Rot. Beide sind warm und stehen neben dem kuehlen Navy und dem Lime
 * unruhig — und vor allem las sich Orange wie eine Aktionsfarbe, obwohl es
 * keine ist.
 *
 * Neue Aufteilung:
 *   Aufmerksamkeit = das Blau aus dem Favicon. Systemmeldungen ("E-Mail noch
 *   nicht bestaetigt", "Prototyp") sind Hinweise, keine Warnungen, und sehen
 *   jetzt auch so aus. Die Farbe hat die Marke ohnehin schon.
 *   Gefahr = kuehleres, tieferes Rot, ausschliesslich fuer Zerstoerendes.
 *
 * Kontrast geprueft: Blau auf Tint 5,5:1 · Rot auf Tint 6,1:1 · Weiss auf
 * beiden Vollton > 6:1. Alles AA.
 *
 * Die alten Namen --c-warning/--c-error bleiben als Zeiger bestehen, damit
 * bestehende Regeln weiterlaufen; neue Regeln nutzen die sprechenden Namen.
 * Vorgesehen fuer tokens.css, sobald es hier im Zusammenhang ueberzeugt —
 * dann faellt dieser Block ersatzlos weg (DESIGN.md §6).
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Abstands-Skala der App (02.11.2026, Justus: „ein Abstandssystem"): jedes margin/padding/gap
     nimmt einen dieser Werte. Ausnahmen nur fuer Geometrie (Haarlinien 1 px, Icon-Einzug > 48 px). */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* Content-Hintergrund: ganz leichter Blau-Tint statt Grau
     (Feedback + Freigabe Justus 2026-08-07, DESIGN.md §6). */
  --c-surface-app:    #f5f8fc;
  --c-attention:      #0061b2;
  --c-attention-tint: #e7f1fa;
  --c-danger:         #a32a34;
  --c-danger-tint:    #fae8ea;

  /* Der geerbte Erfolgston #15803d kommt auf seinem eigenen Tint nur auf
     4,4:1 — knapp unter AA, und die Status-Pille ist kleine fette
     Grossschrift. Eine Stufe dunkler loest das (gemessen 5,9:1). */
  --c-success:        #116634;

  --c-warning:        var(--c-attention);
  --c-warning-tint:   var(--c-attention-tint);
  --c-error:          var(--c-danger);
  --c-error-tint:     var(--c-danger-tint);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'PT Sans', system-ui, sans-serif;
  font-size: var(--text-15);
  line-height: var(--lh-normal);
  color: var(--c-brand-dark);
  background: var(--c-surface-app);
}
/* Formularelemente erben die Seitenschrift NICHT von selbst — ohne diese
   Regel fallen Suchfeld, Selects und Knoepfe auf die Systemschrift zurueck
   (Befund Justus 2026-08-04: Fremdschrift in Suche und Sortier-Dropdown). */
button, input, select, textarea { font-family: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-accent); color: var(--c-accent-text);
  padding: var(--sp-2) var(--sp-4); font-weight: var(--fw-bold);
}
.skip:focus { left: 0; }

/* Demo-Kennzeichnung — Gate B läuft nie mit echten Daten (GESAMTPLAN §5.2) */

/*
 * Typo-System seit 07.08. (Feedback Justus, KISS): ZWEI Gewichte —
 * regular fuer Flusstext, Labels und Notizen, bold fuer Namen, Titel,
 * Werte und Buttons (wie die .fl-cta der oeffentlichen Seite). Groessen:
 * 14 (klein/Pills/Hilfen), 15 (Standard), 20/22 (Titel), 28/32 (Zahlen, H1).
 * KEIN medium, KEIN semibold, KEIN 17px dazwischen.
 */
/* ── Grundraster ──────────────────────────────────────────────────────────── */
/* dvh statt vh: auf iOS Safari rechnet 100vh die URL-Leiste mit, dadurch
   ragt der Inhalt unten heraus und die Seite ruckelt beim Scrollen. vh bleibt
   als Rueckfall fuer Browser ohne dvh stehen. */
/* App-Rahmen (Vorgabe Justus 2026-08-04): Topbar und Sidebar stehen FEST,
   gescrollt wird nur der Contentbereich. Body ist eine starre Flex-Spalte,
   .main-col ist der einzige Scroller. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
.app { display: flex; flex: 1; min-height: 0; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }

/* ── Keine Sidebar mehr (Justus, 15.09.2026): Tabs in der Topbar, Inhalt zentriert. ── */
/* Die Fastlancer-Bildmarke, inline aus Shell::logo() — dasselbe Zeichen wie
   das Favicon. Kein Hintergrund, kein Radius: die Form bringt beides mit. */
.brandmark { display: block; flex-shrink: 0; }
.ico { width: 19px; height: 19px; flex-shrink: 0; }

/* Tabs (Justus 16.09.2026: „eher als Boxen, bei Auswahl eingegraut, mehr in die Mitte“):
   jede Registerkarte ist ein umrahmter Kasten; die aktive ist mit --c-surface-subtle gefüllt
   und dunkler umrandet, kein Unterstrich. Die Reihe nimmt den Platz zwischen Marke und
   rechtem Block ein und zentriert sich darin. Kein Lime, kein linker Balken (Site-Regeln). */
.tb__nav { min-width: 0; flex: 1 1 auto; display: flex; justify-content: center; }
.tb__nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); }
.tb__link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm);
  background: var(--c-surface-canvas);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: var(--text-15); font-weight: var(--fw-regular);
  color: var(--c-gray-700); text-decoration: none; white-space: nowrap;
}
.tb__link .ico { color: var(--c-gray-500); }
@media (hover: hover) {
  .tb__link:hover { color: var(--c-brand-dark); border-color: var(--c-gray-300); }
  .tb__link:hover .ico { color: var(--c-brand-dark); }
}
.tb__link.is-active {
  color: var(--c-brand-dark); font-weight: var(--fw-bold);
  background: var(--c-surface-subtle); border-color: var(--c-gray-300);
}
.tb__link.is-active .ico { color: var(--c-brand-dark); }
.tb__link:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }

/* Preis-Check auf /optimize (16.09.2026): je Tool eine Zeile mit dem, was die Preisentwicklung
   fuer den eigenen Stack bedeutet. Hairlines wie die .tt-Tabellen, keine Box-in-Box. */

/* 14.10.2026: Zeilen standen ohne Innenabstand an der Panelkante, die Fakten liefen je nach
   Textlänge in unterschiedlichen Spalten. Jetzt ein festes Raster wie die Tabellen darunter:
   Tool · Befund · Aktion, mit denselben 1.1rem Seitenrand wie Panel-Kopf und Hinweis. */

/* Tarifauswahl im Add-Overlay (16.09.2026): ein Knopf je bekanntem Tarif aus dem Verzeichnis.
   Keine Karten-in-Karte, kein Lime — die Auswahl ist eine Eingabehilfe, keine Empfehlung. */
.ovl__plans { display: grid; gap: var(--sp-1); }
.ovl__plan-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ovl__plan {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); min-height: 40px;
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm);
  background: var(--c-surface-canvas); cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-15);
  color: var(--c-gray-700);
}
.ovl__plan-name { font-weight: var(--fw-bold); color: var(--c-brand-dark); }
.ovl__plan-price { color: var(--c-gray-500); }
@media (hover: hover) { .ovl__plan:hover { border-color: var(--c-gray-300); } }
.ovl__plan.is-on { background: var(--c-surface-subtle); border-color: var(--c-brand-dark); }
.ovl__plan.is-on .ovl__plan-price { color: var(--c-brand-dark); }
.ovl__plan:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }

/* ── Topbar: Marke links, Suche + Business + Avatar rechts ────────────────── */
.tb {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  background: var(--c-surface-canvas);
  border-bottom: 1px solid var(--c-gray-200);
  flex-shrink: 0; z-index: 20;
}
.tb__brand { display: flex; align-items: center; gap: var(--sp-2); }
.tb__brand-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-xl);
  color: var(--c-brand-dark); white-space: nowrap;
}
.tb__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.tb__search {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3); background: var(--c-surface-canvas);
  color: var(--c-gray-500);
  /* Darf schrumpfen — sonst schiebt die Suche auf schmalen Geraeten die
     Topbar ueber den Viewport hinaus (Audit: Ueberlauf bei 390/320px). */
  flex: 0 1 auto; min-width: 0;
}
.tb__search:focus-within { border-color: var(--c-brand-dark); }
.tb__search .ico { width: 16px; height: 16px; }
.tb__search input {
  border: 0; outline: 0; background: none; min-width: 0; width: 15rem; max-width: 100%;
  font-size: var(--text-15); color: var(--c-brand-dark);
}
/* Business-Switcher: sichtbar, aber noch ohne Funktion (ein Business). */
.tb__biz {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-15);
  color: var(--c-brand-dark); cursor: pointer; white-space: nowrap;
  list-style: none;
}
.tb__biz::-webkit-details-marker { display: none; }
.tb__biz:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 1px; }
.tb__biz svg { color: var(--c-gray-500); transition: transform 160ms ease; }
.tb__bizmenu[open] .tb__biz svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .tb__biz svg { transition: none; } }
.tb__menu-item--soon {
  color: var(--c-gray-500); cursor: default;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.tb__menu-item--soon small {
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.03em;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-full);
  padding: 0.05rem var(--sp-2);
}
.tb__acct { position: relative; }
.tb__acct-trigger { list-style: none; cursor: pointer; display: block; border-radius: var(--radius-full); }
.tb__acct-trigger::-webkit-details-marker { display: none; }
.tb__acct-trigger:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
.tb__avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--c-brand-dark); color: var(--c-surface-canvas);
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold);
}
.tb__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 230px; padding: var(--sp-2); white-space: nowrap;
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.tb__menu form { margin: 0; }
.tb__menu-name {
  margin: 0 0 var(--sp-1); padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-sm);
  color: var(--c-gray-500);
  border-bottom: 1px solid var(--c-gray-200);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb__menu-item {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-15);
  color: var(--c-brand-dark); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
/* Menuepunkt mit vorangestelltem Icon (Workspace-Menue). */
.tb__menu-item--ic { display: flex; align-items: center; gap: var(--sp-2); }
.tb__menu-item--ic svg { width: 16px; height: 16px; color: var(--c-gray-500); flex-shrink: 0; }
@media (hover: hover) { .tb__menu-item:hover { background: var(--c-surface-subtle); } }
.tb__menu-item:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: -2px; }
.tb__menu-item.is-active { background: var(--c-surface-subtle); font-weight: var(--fw-bold); }

/* ── Seitenkopf im Content: H1 links, Aktionen rechts (Wireframe) ─────────── */
.pgh {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); min-width: 0;
}
.pgh__title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-4xl);
  line-height: var(--lh-tight); margin: 0;
  min-width: 0; overflow: hidden;
}
.pgh__parent { color: var(--c-gray-500); text-decoration: none; }
@media (hover: hover) { .pgh__parent:hover { color: var(--c-brand-dark); } }
.pgh__sep { display: inline-flex; color: var(--c-gray-500); margin: 0 var(--sp-1); }
.pgh__sep svg { width: 0.7em; height: 0.7em; vertical-align: baseline; }
.pgh__current {
  color: var(--c-brand-dark);
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.pgh__actions { flex-shrink: 0; }
/* Schmal: der Titel bricht um statt abzuschneiden — neben dem 158-px-Knopf blieben bei 390 px
   184 px, „Meine Tools im Überblick" endete als „Meine Tools im Üb…" (Befund 08.10.2026, SiteShell). */
@media (max-width: 639px) {
  .pgh__current { white-space: normal; overflow-wrap: anywhere; }
}

/* Content linksbuendig, nicht zentriert: Dashboards werden gescannt.
   1100px statt der urspruenglichen 880 — auf 1440px blieb rechts ein Drittel
   der Flaeche ungenutzt, waehrend die Panels untereinander in die Laenge
   liefen (Feedback Justus 2026-07-26). */
/* Zentriert seit dem Wegfall der Sidebar (15.09.2026). */
.content { padding: var(--sp-6) var(--sp-6) var(--sp-7); max-width: 1100px; width: 100%; margin: 0 auto; }

/* Zwei Panels nebeneinander, sobald Platz ist — sonst steht unten Leerraum,
   waehrend oben gescrollt werden muss. */
.cols {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  align-items: start; margin-bottom: var(--sp-5);
}
@media (min-width: 1000px) { .cols { grid-template-columns: 1.15fr 1fr; } }

/* ── Unter 1100px: kompaktere Topbar, Tabs rutschen in eine zweite Zeile ── */
@media (max-width: 1099px) {
  .tb { flex-wrap: wrap; }
  .tb__nav { order: 10; flex: 1 0 100%; margin: var(--sp-1) calc(var(--sp-4) * -1) 0; padding: 0 var(--sp-4) var(--sp-1); overflow-x: auto; justify-content: flex-start; }
  .tb__nav-list { gap: var(--sp-2); }
  .tb__link { padding: var(--sp-2) var(--sp-3); }
}
/* Handy: ohne Icons passen alle drei Kästen in eine Zeile (390 px, deutsche Labels) —
   sonst scrollte die Reihe und der aktive Reiter „Gemerkt" stand halb im Aus. */
@media (max-width: 479px) {
  .tb__link .ico { display: none; }
  .tb__link { padding: var(--sp-2) var(--sp-2); }
  .content { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .pgh__title { font-size: var(--text-xl); }
  /* Schmale Topbar: Business-Name weicht, die Suche schrumpft.
     16px im Suchfeld sind Pflicht — darunter zoomt iOS beim Fokus. */
  .tb { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
  .tb__right { gap: var(--sp-2); }
  .tb__bizmenu { display: none; }
  .tb__search input { width: 110px; font-size: var(--text-base); }
  .tb__search input::placeholder { color: transparent; }
}
@media (max-width: 479px) {
  /* 320px-Zoom-Fall: die Wortmarke weicht, das Logo bleibt. */
  .tb__brand-name { display: none; }
}

/* ── Formular-System (DESIGN.md §4) ───────────────────────────────────────── */
/*
 * BREITE ALS BEDEUTUNG: Ein Feld ist so breit wie das, was hineingehoert.
 * Ein Anzeigename braucht keine 880 px — die Laenge eines Feldes ist eine
 * Ansage darueber, wie viel erwartet wird, und die war hier durchgehend
 * falsch.
 *
 * Die Grenze sitzt am .fld und NICHT am .ctl: einige Controls stecken in
 * Wrappern (Select mit eigenem Chevron, Passwort mit Auge, Betrag mit
 * Waehrung). Begrenzt man das Control, bleibt der Wrapper breit und das
 * Beiwerk rutscht neben das Feld — genau das war zu sehen.
 */
.fld { margin-bottom: var(--sp-4); max-width: 26rem; }
.fld--wide { max-width: 40rem; }
/* Gleiche Kappe wie einzeln stehende Felder: vorher hatten Zeilen-Felder
   eine eigene, breitere Breite und das Formular drei Rechtskanten. */
.fld-row > .fld { max-width: 26rem; }
.fld__label {
  display: block;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-base);
  color: var(--c-brand-dark); margin-bottom: var(--sp-2);
}
.fld__req { color: var(--c-error); margin-left: var(--sp-1); }
.fld__help {
  margin: var(--sp-1) 0 0; font-size: var(--text-15); color: var(--c-gray-700);
  line-height: 1.45;
}
.fld__err {
  font-size: var(--text-15); color: var(--c-error);
  margin: var(--sp-1) 0 0; font-weight: var(--fw-regular);
}

/*
 * BREITE ALS BEDEUTUNG: Ein Feld ist so breit wie das, was hineingehoert.
 * Ein Anzeigename braucht keine 880 px — die Laenge des Feldes ist eine
 * Ansage darueber, wie viel erwartet wird, und die war hier durchgehend
 * falsch. Innerhalb einer .fld-row (zwei Felder nebeneinander) gilt die
 * Begrenzung nicht, dort teilt sich die Zeile ohnehin.
 */
.ctl {
  width: 100%;
  font-family: inherit; font-size: var(--text-15);
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--c-gray-300);
  border-radius: var(--radius-sm);
  background: var(--c-surface-canvas); color: var(--c-brand-dark);
}
.ctl:focus-visible {
  outline: 2px solid var(--c-brand-dark); outline-offset: 1px;
  border-color: var(--c-brand-dark);
}
.fld--invalid .ctl { border-color: var(--c-error); }
.ctl--area { resize: vertical; min-height: 76px; }
.ctl--num { text-align: right; font-variant-numeric: tabular-nums; }

/* Der System-Chevron ist winzig und klebt am Rand — deshalb ein eigener,
   als Maske, damit er die Textfarbe traegt. */
select.ctl {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--sp-7);
  background-image: none;
}
.ctl-select { position: relative; display: block; }
.ctl-select::after {
  content: ''; position: absolute; right: 0.9rem; top: 50%;
  width: 18px; height: 18px; transform: translateY(-50%);
  background: var(--c-gray-500);
  -webkit-mask: var(--fl-chevron) center / contain no-repeat;
  mask: var(--fl-chevron) center / contain no-repeat;
  pointer-events: none;
}
:root {
  --fl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.ctl-money { display: flex; align-items: stretch; }
.ctl-money .ctl { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ctl-money__cur {
  display: grid; place-items: center; padding: 0 var(--sp-3);
  border: 1.5px solid var(--c-gray-300); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--c-surface-subtle);
  font-size: var(--text-sm); color: var(--c-gray-500);
}

.fld--check {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0 var(--sp-2); align-items: start;
}
.ctl-check { width: 18px; height: 18px; margin-top: var(--sp-1); accent-color: var(--c-brand-dark); }
.fld__label--inline { margin: 0; font-weight: var(--fw-regular); font-family: 'PT Sans', sans-serif; }
.fld__help--check { grid-column: 2; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-15);
  min-height: 40px; padding: var(--sp-2) var(--sp-4); box-sizing: border-box;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  text-decoration: none;   /* .btn wird auch auf <a> genutzt */
}
.btn:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.btn--primary   { background: var(--c-accent); color: var(--c-accent-text); }
.btn--secondary { background: var(--c-brand-dark); color: var(--c-surface-canvas); }
.btn--ghost     { background: transparent; border-color: var(--c-gray-300); color: var(--c-brand-dark); }
.btn--danger    { background: var(--c-danger); color: var(--c-surface-canvas); }
/*
 * Rot NUR fuer endgueltige Loeschungen (Konto). Ein rotes "Loeschen" an einem
 * Stack-Eintrag liest sich wie ein Fehler und macht eine harmlose, jederzeit
 * wiederholbare Handlung dramatisch. `--quiet` ist der Normalfall.
 */
.btn--quiet {
  background: transparent; color: var(--c-gray-700);
  border-color: var(--c-gray-300);
}
@media (hover: hover) {
  .btn--quiet:hover { border-color: var(--c-gray-500); color: var(--c-brand-dark); }
}
@media (hover: hover) {
  .btn--primary:hover   { background: var(--c-accent-hover); }
  .btn--secondary:hover { background: var(--c-brand-dark-hover); }
  .btn--ghost:hover     { border-color: var(--c-brand-dark); background: var(--c-surface-subtle); }
}
.btn__spin {
  width: 14px; height: 14px; border-radius: var(--radius-full);
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn__spin { animation-duration: 2s; }
  .btn { transition: none; }
}

/* ── Statistik-Kacheln ────────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2); margin-bottom: var(--sp-5);
}
/* Kompakt: die Zahl steht neben der Beschriftung, nicht darunter. Vorher
   nahmen die vier Kacheln eine halbe Bildschirmhoehe ein, obwohl darin nur
   vier Zahlen stehen. */
.stat {
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
}
.stat__label {
  font-size: var(--text-15);
  color: var(--c-gray-500); margin: 0 0 var(--sp-2);
  font-weight: var(--fw-regular);
}
.stat__value {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-xl);
  line-height: 1.05; color: var(--c-brand-dark);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.stat__note { font-size: var(--text-15); color: var(--c-gray-500); margin: var(--sp-2) 0 0; }

/* ── Dichte Liste statt Karten (DESIGN.md §2.3) ───────────────────────────── */
.panel {
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.panel__head {
  /* Titel links, alles andere rechts. NICHT space-between: sobald drei
     Elemente in der Zeile stehen (Titel, Aktion, Zuklapp-Chevron), verteilt
     space-between sie gleichmaessig und die Aktion landet in der Mitte. */
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--sp-2); padding: var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--c-gray-200);
}
.panel__title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-xl); margin: 0;
}
/* Kurze Zähl-Titel („8 Tools") brachen mobil zwischen Zahl und Wort um,
   sobald die Aktions-Buttons daneben drängten. Nur für diese Titel —
   lange Panel-Titel müssen weiter umbrechen dürfen. */
.panel__title--count { white-space: nowrap; }
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  position: relative;
  display: grid;
  /* Logo · Name · Status · Kosten · Aktion · Chevron. Die Aktionsspalte ist
     leer, wenn es nichts zu tun gibt — sie bleibt trotzdem im Raster, damit
     Zeilen mit und ohne Knopf buendig bleiben. */
  grid-template-columns: 40px 1fr auto auto auto auto 16px;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-gray-100);
}
/* Die ganze Zeile ist die Klickflaeche, nicht nur der Name. Umgesetzt ueber
   ein ::after des echten Links — Semantik und Tastaturbedienung bleiben,
   das Ziel wird nur groesser (Feedback Justus: "man sieht nicht, dass man
   da klicken kann"). */
.row--linked a.row__name::after { content: ''; position: absolute; inset: 0; }
/*
 * Aktionen in der Zeile muessen ueber der Klickflaeche liegen. Die
 * Zeilen-Ueberlagerung (::after des Namenslinks) deckt sonst alles ab, und
 * Knoepfe wie Wechseln oder der Papierkorb sind mit der Maus schlicht nicht
 * erreichbar — Playwright hat genau das gemeldet: "subtree intercepts
 * pointer events".
 */
.row .row__act, .row .row__act .btn, .row .row__act .icon-btn { position: relative; z-index: 1; }
/* Layout-Platzhalter für die Wechseln-Spalte — nimmt exakt Knopfbreite ein,
   ist aber unsichtbar und unbedienbar. */
.row__act--ghost { visibility: hidden; }
/* Am Desktop nur ein durchsichtiger Wrapper: die Kinder bleiben Grid-Items
   in ihren eigenen Spalten. Mobile-Verhalten im 639px-Block. */
.row__actions { display: contents; }
@media (hover: hover) {
  .row--linked:hover { background: var(--c-surface-subtle); }
  .row--linked:hover .row__chevron { transform: translateX(2px); color: var(--c-brand-dark); }
}
.row--linked:focus-within { background: var(--c-surface-subtle); }
.row__chevron {
  color: var(--c-gray-400); transition: transform 160ms ease, color 160ms ease;
  display: grid; place-items: center;
}
@media (prefers-reduced-motion: reduce) { .row__chevron { transition: none; } }
.row:last-child { border-bottom: 0; }
.row__img {
  width: 40px; height: 28px; object-fit: cover;
  border-radius: var(--radius-xs); background: var(--c-gray-100);
}
.row__name {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-15); line-height: 1.2;
}
.row__meta { display: block; font-size: var(--text-15); color: var(--c-gray-500); }
.row__cost { font-variant-numeric: tabular-nums; font-size: var(--text-15); white-space: nowrap; }

.pill {
  display: inline-block; font-family: 'Roboto Condensed', sans-serif;
  font-size: var(--text-sm); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-full);
}
.pill--active    { background: var(--c-success-tint); color: var(--c-success); }
/* „evaluating" ist der echte Status-Wert (statusPill) — die Regel hieß
   früher pill--trial und traf dadurch nie: In Prüfung stand als nackter
   Text zwischen lauter Pills. */
.pill--evaluating { background: var(--c-attention-tint); color: var(--c-attention); }
.pill--cancel    { background: var(--c-gray-100);     color: var(--c-gray-700); }
.pill--replaced  { background: var(--c-gray-100);     color: var(--c-gray-700); }
.pill--wishlist  { background: var(--c-surface-subtle); color: var(--c-gray-700); }

@media (max-width: 639px) {
  .row { grid-template-columns: 34px 1fr 16px; row-gap: var(--sp-2); }
  .row__chevron { grid-row: 1; grid-column: 3; }
  .row__img { width: 34px; height: 24px; }
  .row__cost, .row .pill { grid-column: 2; justify-self: start; }
  /* Aktionen als eigene Zeile unter Pill und Kosten — vorher fielen die
     Aktionsspalten in die Auto-Platzierung und der Wechseln-Knopf war auf
     29px zerquetscht. Der Ghost-Platzhalter ist ein Spalten-Werkzeug und
     hier überflüssig. */
  .row__actions { display: flex; grid-column: 2 / -1; align-items: center; gap: var(--sp-2); }
  .row__actions:not(:has(button:not([disabled]))) { display: none; }
  .row__act--ghost { display: none; }

  /* Touch-Ziele auf 44px (DESIGN.md §5) — die Vergroesserung gilt nur hier,
     am Desktop bleiben die kompakteren Hoehen. */
  .btn, .strip__item, .panel__toggle, .ctl-pw__toggle, a.conn__type { min-height: 44px; }
  .strip__item, a.conn__type { display: inline-flex; align-items: center; }
  .onb__skip button { min-height: 44px; padding: var(--sp-2) var(--sp-4); }

  /* Panelkopf: die langen DE-Labels (Exportieren · Liste einfuegen · Tool
     hinzufuegen) duerfen umbrechen, aber mit geordnetem Zeilenabstand. */
  .panel__head { flex-wrap: wrap; row-gap: var(--sp-2); }
}

/* ── Leer-, Lade- und Fehlerzustände ──────────────────────────────────────── */
.empty { padding: var(--sp-6) var(--sp-5); text-align: center; }
.empty__title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-xl);
  margin: 0 0 var(--sp-1);
}
.empty__text {
  font-size: var(--text-15); color: var(--c-gray-500);
  margin: 0 auto var(--sp-4); max-width: 42ch;
}
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filter {
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-sm);
  font-weight: var(--fw-regular); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full); border: 1px solid var(--c-gray-300);
  background: var(--c-surface-canvas); color: var(--c-brand-dark); cursor: pointer;
}
.filter[aria-pressed="true"] { background: var(--c-brand-dark); color: var(--c-surface-canvas); border-color: var(--c-brand-dark); }

/* ────────────────────────────────────────────────────────────────────────────
 * Zweiter Bauabschnitt: Auth-Screens, Meldungen, Formularraster, Datenansicht.
 * Weiterhin gilt: KEIN Hex-Wert, KEINE px-Schriftgroesse (DESIGN.md §1).
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Auth-Layout (zentrierte Karte, keine Sidebar) ────────────────────────── */
.auth-body { background: var(--c-brand-dark); }
.auth {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4) var(--sp-7);
}
.auth__card {
  width: 100%; max-width: 420px;
  background: var(--c-surface-canvas);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}
.auth__brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.auth__brand-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-15);
  color: var(--c-brand-dark);
}
.auth__title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-4xl);
  line-height: var(--lh-tight); margin: 0 0 var(--sp-4);
}
.auth__text { font-size: var(--text-15); color: var(--c-gray-500); margin: 0 0 var(--sp-4); }
.auth__actions { margin-top: var(--sp-5); }
.auth__actions .btn { width: 100%; }
.auth__alt { font-size: var(--text-sm); color: var(--c-gray-500); margin: var(--sp-3) 0 0; text-align: center; }
.auth__alt a { color: var(--c-brand-dark); }
.auth__lang { margin: var(--sp-5) 0 0; font-size: var(--text-sm); }
.auth__lang a { color: var(--c-surface-canvas); opacity: 0.75; }
.auth__lang a:hover { opacity: 1; }

/* ── Meldungen ────────────────────────────────────────────────────────────── */
/* Seit 12.08. ein schwebender Toast unten mittig (Feedback Justus: bei
   Loeschen/Ignorieren „immer ein kleiner Toast mit Rueckgaengig") — vorher
   ein Banner im Inhaltsfluss, das beim Scrollen sofort weg war. */
.flash {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 70; width: max-content; max-width: min(92vw, 560px);
  background: var(--c-brand-dark); color: #fff;
  border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-15); font-weight: var(--fw-regular);
  box-shadow: var(--shadow-md); margin: 0;
}
/* Der Toast traegt eine Handlung, kein nackter Satz mehr. */
.flash { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.flash__undo { margin: 0; }
.flash__undo-btn {
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold);
  font-size: var(--text-15); color: inherit;
  background: none; border: 0; padding: var(--sp-1) var(--sp-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  /* 44px Trefferflaeche: ein Ziel, das nach 5 Sekunden verschwindet UND
     schwer zu treffen ist, verfehlt seinen Zweck. */
  min-height: 44px; display: inline-flex; align-items: center;
}
.flash__undo-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.notice {
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-15); margin: 0 0 var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
}
/* Wegklickbare Hinweise: Icon, Text und × in EINER Zeile — das Icon stand
   sonst allein ueber dem Text (Feedback 07.08.). */
.notice--dismiss { flex-wrap: nowrap; align-items: flex-start; }
.notice--dismiss > span { flex: 1 1 auto; min-width: 0; }
.notice--dismiss .notice__x { margin-left: auto; flex-shrink: 0; }
.notice p { margin: 0; flex: 1 1 16rem; }
.notice__title { font-weight: var(--fw-bold); }
.notice--ok     { background: var(--c-success-tint); color: var(--c-success); }
.notice--warn   { background: var(--c-attention-tint); color: var(--c-attention); }
.notice--danger { background: var(--c-danger-tint);   color: var(--c-danger); }
.notice form { margin: 0; }

/* ── Formularraster ───────────────────────────────────────────────────────── */
.panel--form { padding: var(--sp-5); margin-bottom: var(--sp-5); }
.panel__title--section { margin-bottom: var(--sp-4); }
/* Horizontal auf der Fluchtlinie von panel__head/Zeilen (1.1rem) — ohne den
   Einzug klebte der Text an der Panel-Außenkante und brach das Raster. */
.panel__text { font-size: var(--text-15); color: var(--c-gray-500); margin: 0 var(--sp-4) var(--sp-4); }
/* In Formular-Panels beginnt der Text buendig mit der Ueberschrift — die
   1.1rem-Einrueckung oben gilt nur fuer randlose Listen-Panels. */
.panel--form .panel__text { margin-left: 0; margin-right: 0; }
.panel__foot {
  font-size: var(--text-sm); color: var(--c-gray-500);
  margin: 0; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-gray-200);
}
.lead { font-size: var(--text-15); color: var(--c-gray-700); margin: 0 0 var(--sp-5); max-width: 60ch; }

/* Zwei Felder nebeneinander ab 560px. Darunter untereinander — deutsche
   Labels laufen 20-35 % laenger als englische (DESIGN.md §5). */
.fld-row { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-4); }
@media (min-width: 560px) { .fld-row { grid-template-columns: 1fr 1fr; } }
/* Hat nur eines der beiden Felder einen Hilfetext, stehen die Controls sonst
   auf verschiedenen Hoehen und die Zeile franst aus. */
.fld-row > .fld { display: flex; flex-direction: column; }
/* Checkboxen behalten ihr Box-neben-Label-Raster auch in einer Zeile —
   die Flex-Spalte oben stapelte die Box sonst UEBER das Label (Settings). */
.fld-row > .fld--check { display: grid; }
/*
 * Seit dem Hilfetext-Umzug UNTER die Felder (07.08.) richten sich die
 * Controls am OBEREN Rand aus: das fruehere `margin-top: auto` schob ein
 * Feld ohne Hilfetext an den unteren Rand der gleich hohen Rasterzelle —
 * mit Hilfetext unterm Nachbarfeld ergab das eine sichtbare Luecke zwischen
 * Label und Eingabe (Screenshot Justus 07.08.).
 */
.fld-row > .fld > .ctl-money { max-width: none; }

/* CTAs in Formularen IMMER rechts (Feedback Justus 07.08.) — der
   Loeschen-Ausreisser darf per margin-right: auto links bleiben. */

.form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); align-items: center; justify-content: flex-end; }
/* --sm ist seit 07.08. nur noch ein Alias: EIN Button-Mass ueberall
   (Feedback Justus — verschiedene Groessen sahen zusammengewuerfelt aus). */
.btn--sm { font-size: var(--text-15); padding: var(--sp-2) var(--sp-4); }

/*
 * `--to` markiert einen Knopf, der in einen ANDEREN Bereich der App fuehrt.
 * Der Chevron sagt „hier geht es weiter" — ein Pfeil wuerde dasselbe sagen,
 * aber die App benutzt den Pfeil bereits fuer Verbindungsrichtungen, und zwei
 * Bedeutungen fuer dasselbe Zeichen sind eine zu viel.
 */
.btn--to::after {
  content: '';
  width: 0.85em; height: 0.85em;
  margin-left: var(--sp-1);
  background: currentColor;
  -webkit-mask: var(--fl-chevron) center / contain no-repeat;
  mask: var(--fl-chevron) center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform 0.14s ease;
}
@media (hover: hover) {
  .btn--to:hover::after { transform: rotate(-90deg) translateY(2px); }
}

.danger-zone { margin-top: var(--sp-5); }
.panel--danger { border-color: var(--c-error-tint); }

/* ── Harte Grenze: der Hinweis steht ueberall, wo jemand eine Verbindung
      vermuten koennte (BRIEF §2 — Release-Blocker, keine Copy-Frage). ────── */
/* Direkt auf der Seitenflaeche, nicht auf einer weissen Karte: --c-gray-500
   kommt dort nur auf 4,47:1. */
.boundary {
  font-size: var(--text-sm); color: var(--c-gray-700);
  margin: var(--sp-5) 0 0; max-width: 60ch;
}

/* ── Luecken in den Summen ────────────────────────────────────────────────── */
.gaps { margin: calc(var(--sp-3) * -1) 0 var(--sp-5); }
.gaps__item {
  font-size: var(--text-sm); color: var(--c-gray-700);
  margin: var(--sp-1) 0 0; padding-left: var(--sp-4); position: relative;
}
.gaps__item::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: var(--radius-full);
  background: var(--c-attention);
}

/* ── Filterleiste als Links (serverseitig gefiltert) ──────────────────────── */
.filter { text-decoration: none; display: inline-block; }
.filter.is-on {
  background: var(--c-brand-dark); color: var(--c-surface-canvas);
  border-color: var(--c-brand-dark);
}

/* ── Listenzeile: Ergaenzungen ────────────────────────────────────────────── */
.row__main { min-width: 0; }
a.row__name { color: var(--c-brand-dark); text-decoration: none; display: block; }
/* Kein Unterstrich — die ganze Zeile faerbt sich, das reicht als Signal. */
a.row__name:hover { text-decoration: none; }
.row__unit { color: var(--c-gray-500); font-size: var(--text-sm); }
.row__cost--empty {
  font-size: var(--text-sm); color: var(--c-brand-dark);
  border: 1px dashed var(--c-gray-300); border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-3); white-space: nowrap;
}
@media (hover: hover) {
  .row--linked:hover .row__cost--empty { border-color: var(--c-brand-dark); background: var(--c-surface-canvas); }
}
.row--data { grid-template-columns: 1fr auto; }

/* ── Ausgaben nach Kategorie ──────────────────────────────────────────────── */
.cats { list-style: none; margin: 0; padding: 0; }
.cat {
  display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--c-gray-100);
}
.cat:last-child { border-bottom: 0; }
/* Kürzen statt 7-zeilig umbrechen — die Balken daneben sind nur
   vergleichbar, wenn jede Zeile eine Zeile bleibt. */
.cat__name { font-size: var(--text-15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat__bar { height: 8px; border-radius: var(--radius-full); background: var(--c-gray-100); overflow: hidden; }
.cat__fill { display: block; height: 100%; background: var(--c-brand-dark); }
.cat__value { font-variant-numeric: tabular-nums; font-size: var(--text-15); white-space: nowrap; }
@media (max-width: 639px) {
  .cat { grid-template-columns: 1fr auto; }
  .cat__bar { grid-column: 1 / -1; }
}

/* ── Abmelden ist ein Formular, kein Link (POST + CSRF) ───────────────────── */

/* ────────────────────────────────────────────────────────────────────────────
 * Dritter Bauabschnitt: Tool-Auswahl, Onboarding, Alternativen-Attrappe.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Suche ueber dem Verzeichnis ──────────────────────────────────────────── */
.search { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: end; }
.search .fld { margin-bottom: 0; }
@media (max-width: 479px) {
  .search { grid-template-columns: 1fr; }
  .search .btn { width: 100%; }
}

/* ── Auswahlliste aus dem Verzeichnis ─────────────────────────────────────── */
.picks { list-style: none; margin: 0; padding: 0; }
.pick {
  display: grid; grid-template-columns: 48px 1fr auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-gray-100);
}
.pick:last-child { border-bottom: 0; }
.pick.is-added { background: var(--c-surface-subtle); }
.pick form { margin: 0; }
.pick__img {
  width: 48px; height: 32px; object-fit: cover;
  border-radius: var(--radius-xs); background: var(--c-gray-100);
}
.pick__main { min-width: 0; }
.pick__name {
  display: block;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-15); line-height: 1.2;
}
.pick__meta { display: block; font-size: var(--text-sm); color: var(--c-gray-500); }
.pick__added {
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-sm);
  font-weight: var(--fw-regular); color: var(--c-gray-500);
  white-space: nowrap;
}

/* ── Onboarding ───────────────────────────────────────────────────────────── */
.onb { margin-bottom: var(--sp-5); }
.onb__intro { font-size: var(--text-15); color: var(--c-gray-500); margin: 0 0 var(--sp-4); max-width: 58ch; }
.onb__progress { display: flex; align-items: center; gap: var(--sp-3); }
.onb__count {
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold);
  font-size: var(--text-15); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.onb__bar { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--c-gray-200); overflow: hidden; max-width: 22rem; }
.onb__fill { display: block; height: 100%; background: var(--c-brand-dark); transition: width 200ms ease; }
@media (prefers-reduced-motion: reduce) { .onb__fill { transition: none; } }

.onb__skip { margin: var(--sp-5) 0 0; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'PT Sans', sans-serif; font-size: var(--text-sm);
  color: var(--c-gray-500); text-decoration: underline;
}
.linkish:hover { color: var(--c-brand-dark); }
.linkish:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }

/* Die erste Erkenntnis nach drei Tools. Kein Akzent-Randstrich mehr —
   markierte Boxen mit linkem Balken sind site-weit abgeschafft
   (Feedback Justus 07.08.). */
.panel--insight {
  padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.insight__title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-xl); margin: 0 0 var(--sp-1);
}
.insight__line { font-size: var(--text-15); color: var(--c-gray-700); margin: 0; }

/* ── Alternativen (Klick-Attrappe) ────────────────────────────────────────── */
.panel--keep { padding: var(--sp-5); margin-bottom: var(--sp-5); }

.alts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

/* Die Offenlegung steht AM Link, nicht im Seitenfuss (BRIEF §6/M5). */

/* ── Sprachhinweis (ersetzt den nackten Umschalter) ───────────────────────── */
.langhint {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--c-surface-subtle); border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-5); font-size: var(--text-sm);
}
.langhint p { margin: 0; color: var(--c-gray-700); }
.langhint a { color: var(--c-brand-dark); font-weight: var(--fw-bold); }
.langhint__close { margin-left: auto; font-size: var(--text-15); line-height: 1; text-decoration: none; opacity: 0.5; }
.langhint__close:hover { opacity: 1; }
.auth .langhint { max-width: 420px; width: 100%; background: var(--c-surface-canvas); }

/* ── Leerer Zustand: einladend statt entschuldigend ───────────────────────── */
.blank {
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* max-width nur auf den Textzeilen: am Kopf deckelte sie auch die
   Button-Reihe, und die längeren DE-Labels brachen als Einzelknopf um. */
.blank__head { padding: var(--sp-6) var(--sp-6) var(--sp-6); }
.blank__title, .blank__text { max-width: 60ch; }
.blank__title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-xl);
  line-height: var(--lh-tight); margin: 0 0 var(--sp-2);
}
.blank__text { font-size: var(--text-15); color: var(--c-gray-500); margin: 0 0 var(--sp-5); }
.blank__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.blank__browse {
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--c-gray-200);
  background: var(--c-surface-subtle);
}
.blank__browse-label {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--c-gray-500); margin: 0 0 var(--sp-3);
}
.blank__foot {
  margin: 0; padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--c-gray-200);
  font-size: var(--text-sm); color: var(--c-gray-500);
}
.rows--flush { background: var(--c-surface-canvas); border-radius: var(--radius-sm); overflow: hidden; }

/* ── Kategorie-Chips ──────────────────────────────────────────────────────── */
.catchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.blank .catchips { margin-bottom: 0; }
.catchip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-sm);
  font-weight: var(--fw-regular); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full); border: 1px solid var(--c-gray-300);
  background: var(--c-surface-canvas); color: var(--c-brand-dark);
  text-decoration: none;
}
@media (hover: hover) {
  .catchip:hover { border-color: var(--c-brand-dark); background: var(--c-surface-canvas); }
}
.catchip.is-on { background: var(--c-brand-dark); color: var(--c-surface-canvas); border-color: var(--c-brand-dark); }
.catchip__n { font-size: var(--text-sm); color: var(--c-gray-500); font-variant-numeric: tabular-nums; }
.catchip.is-on .catchip__n { color: rgba(255, 255, 255, 0.7); }

/* App-Icons sind quadratisch und stehen fuer sich — anders als die
   Vorschaubilder, die als 3:2-Screenshot beschnitten werden. */
.row__img--icon, .pick__img--icon {
  width: 32px; height: 32px; object-fit: contain;
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm);
  padding: var(--sp-1);
}
.pick__img--icon { width: 36px; height: 36px; }

/* Monogramm, wenn es kein Icon gibt — ruhiger Buchstabe statt gequetschtem
   Screenshot. Gleiche Flaeche wie das Icon, damit die Spalte nicht springt. */
.row__img--mono, .pick__img--mono {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--c-surface-subtle);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-15);
  color: var(--c-gray-500);
}
.pick__img--mono { width: 36px; height: 36px; font-size: var(--text-15); }

/* ── Merken-Landestelle (/save) ───────────────────────────────────────────── */
.save-hero { text-align: center; margin-bottom: var(--sp-4); }
.save-hero__icon, .save-hero__icon--icon, .save-hero__icon--mono {
  width: 56px; height: 56px; margin: 0 auto var(--sp-2); display: grid; place-items: center;
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  background: var(--c-surface-canvas); object-fit: contain; padding: var(--sp-2);
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold);
  font-size: var(--text-xl); color: var(--c-gray-500);
}
.save-hero__name {
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold);
  font-size: var(--text-xl); margin: 0;
}
.save-hero__cat { font-size: var(--text-sm); color: var(--c-gray-500); margin: var(--sp-1) 0 0; }
.save-benefits { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.save-benefits li {
  position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-2);
  font-size: var(--text-15);
}
.save-benefits li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--c-accent);
}
.save-note { font-size: var(--text-sm); color: var(--c-gray-500); margin: var(--sp-4) 0 0; text-align: center; }

/* ── Logo-Streifen der aktiven Tools auf der Uebersicht ───────────────────── */

/* ── Whiteboard-Auszug (Vorschau) ─────────────────────────────────────────── */

/* 5–8 Knoten brauchen Hoehe, sonst beruehren sich senkrechte Nachbarn. */

/* Ab 9 Knoten: Reihen-Layout mit fester Hoehe je Reihenzahl (stackmap.php
   setzt --map-h). Auf schmalen Screens scrollt die Karte seitlich, statt
   die Bloecke ineinanderzuschieben. */

/* NUR direkte Kinder: der alte Selektor `.map__edges path` traf auch den
   Pfeilspitzen-<path> IM <marker> und setzte ihm fill:none + Strichelung —
   deshalb fehlten die Richtungspfeile komplett (Befund Justus 12.08.). */

/* Fokus (Klick/Hover auf einen Knoten, rein zeigerbasiert — die Liste auf
   /connections bleibt die vollstaendige, zugaengliche Darstellung): die
   Kanten des gewaehlten Knotens bleiben kraeftig, alles andere tritt zurueck.
   Genau das loest „bei vielen Tools kann ich die Linien nicht mehr zuordnen". */

/* Der Knoten ist reine Anzeige (Skizze 07.08.): weisser Block MIT Rahmen,
   Kategorie-Tag statt Preis. Bearbeitet wird in Liste und Overlay. */

/* Der Verbindungstyp ist eine Angabe des Nutzers und traegt deshalb keine
   Farbe, die nach einer Bestaetigung durch uns aussieht. */

/* Zuklappbare Sektion: der Kopf bleibt stehen, der Rest verschwindet. */
.panel__toggle {
  display: inline-grid; place-items: center;
  /* Rechts, nicht links: der Titel beginnt an der Kante wie in jeder
     anderen Sektion, und die Bedienung sitzt dort, wo man sie sucht. */
  order: 99;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--c-gray-500); cursor: pointer;
}
/* Der Titel schiebt den Rest nach rechts. So sitzen Aktion und Chevron
   beieinander am Zeilenende, egal ob eines oder beide vorhanden sind. */
.panel__head > .panel__title { margin-right: auto; }

.panel__toggle svg { width: 18px; height: 18px; transition: transform 0.15s ease; }
.panel.is-collapsed .panel__toggle svg { transform: rotate(-90deg); }
@media (hover: hover) { .panel__toggle:hover { color: var(--c-brand-dark); background: var(--c-surface-subtle); } }
.panel__toggle:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 1px; }
.panel.is-collapsed > *:not(.panel__head) { display: none; }
.panel.is-collapsed .panel__head { border-bottom: 0; margin-bottom: 0; }

/* Eingebettetes Rechner-Widget. Volle Breite, feste Hoehe je Rechner — die
   Hoehe kommt aus dem Markup, weil ein iframe seine eigene nicht meldet. */
.calc-frame {
  display: block; width: 100%; border: 0;
  border-top: 1px solid var(--c-gray-200);
  background: var(--c-surface-canvas);
  /* Der Rahmen meldet seine Höhe selbst (fl:height). Der Übergang nimmt dem
     Schrittwechsel das Springen, ist aber kurz genug, um nicht zu wirken
     wie eine Animation, auf die man wartet. */
  transition: height 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .calc-frame { transition: none; }
}
.calc-source {
  margin: 0 0 var(--sp-5); font-size: var(--text-15); color: var(--c-gray-700);
}
.calc-source--empty { color: var(--c-gray-500); }
.calc-source--empty a { color: var(--c-brand-dark); }
.calc-source__warn { color: var(--c-gray-500); }

.panel__actions { display: inline-flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* Kleines Ausklappmenue — reines <details>, kein Skript. */
.dl { position: relative; }
.dl > summary { list-style: none; cursor: pointer; }
.dl > summary::-webkit-details-marker { display: none; }
.dl__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 220px; padding: var(--sp-1);
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.dl__menu a {
  display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm); text-decoration: none;
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold);
  font-size: var(--text-15); color: var(--c-brand-dark);
}
.dl__menu a span {
  font-family: 'PT Sans', sans-serif; font-weight: var(--fw-regular);
  font-size: var(--text-sm); color: var(--c-gray-500);
}
@media (hover: hover) { .dl__menu a:hover { background: var(--c-surface-subtle); } }

.pill--preview { background: var(--c-gray-100); color: var(--c-gray-700); }

/* Whiteboard-Optik: feines Raster im Hintergrund. Zwei Verlaeufe statt eines
   Bildes — kein Request, und es skaliert mit. */

/* ── Verbindungstabelle ───────────────────────────────────────────────────── */
/* Volle Breite wie die uebrigen Tabellen. Den Zusammenhang tragen die
   Pfeile — die sind dafuer lang genug, um ueber die Spaltenabstaende zu
   reichen. */

/* Der Kopf „Art der Verbindung" steht ueber der PILLE, nicht ueber dem
   Pfeil links davon — sonst zeigt die Beschriftung auf die falsche Stelle. */

/* nowrap: Toolnamen brechen NIE auf zwei Zeilen — die Pfeilspalte (1fr)
   verkuerzt sich stattdessen (Feedback Justus 07.08.). */

/* Die Mitte traegt die Aussage: Pfeil, Art, Pfeil — dicht beieinander. */
/*
 * Die Art der Verbindung steht in einer Spalte FESTER Breite in der Mitte.
 * Ein flexibles Layout haette die Pille je nach Laenge des Wortes anders
 * gesetzt — untereinander waeren „Native Integration" und „API" dann
 * versetzt gewesen. Die Pfeile fuellen, was links und rechts uebrig bleibt.
 */

/* Gefuellte Spitze wie die Marker auf der Karte — dieselbe Optik in
   Tabelle und Grafik. */

/* ── Beruehrungsziele ─────────────────────────────────────────────────────── */
/* Auf Geraeten, die mit dem Finger bedient werden, sind 44px das Mass — alles
   darunter trifft man nicht zuverlaessig (BRIEF §9, WCAG 2.5.8). Gefunden
   ueber die Tier-2-Matrix bei 375x667 und 768x1024: Burger 32px,
   Filterpillen 33px, Menueeintraege 34-39px. */
@media (max-width: 1023px) {
  /* Alle Knoepfe auf Fingermass, nicht nur --sm: „Tool hinzufuegen" im Seitenkopf lag bei 768 px
     mit 40 px darunter (Tier 2, 14.10.2026). */
  .btn { min-height: 44px; }
  .tb__link { min-height: 44px; }
  .filter { min-height: 44px; display: inline-flex; align-items: center; }
  .catchip { min-height: 44px; }
  .btn--sm { min-height: 44px; }
  .langhint__close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .pick__added { min-height: 44px; display: inline-flex; align-items: center; }
  /* Neue Radar-Bedienelemente (Wireframe 2026-08-04) auf Fingermass. */
  .seg__btn { min-height: 44px; min-width: 44px; }
  .tb__menu-item { min-height: 44px; display: flex; align-items: center; }
  .tb__acct-trigger { min-height: 44px; display: grid; place-items: center; }
  .stat__link, .tt__dup, .tt__add-cost { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Lange ungetrennte Zeichenketten — Toolnamen ohne Leerzeichen, eingefuegte
   URLs — duerfen die Spalte nicht sprengen. */
.row__name, .pick__name, .strip__name, .map__name,
.blank__text, .panel__text, .lead {
  overflow-wrap: anywhere;
}

/* Passwort anzeigen — der Umschalter sitzt im Feld, nicht daneben. */
.ctl-pw { position: relative; display: flex; }
.ctl-pw .ctl--pw { padding-right: var(--sp-7); }
.ctl-pw__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--c-gray-500);
  border-radius: var(--radius-sm);
}
.ctl-pw__toggle:hover { color: var(--c-brand-dark); }
.ctl-pw__toggle:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: -2px; }
.ctl-pw__toggle[aria-pressed="true"] { color: var(--c-brand-dark); }

/* Preis am Whiteboard-Knoten — kleiner als der Name, damit er die Karte
   ergänzt statt sie zu übernehmen. */

/* Wechsel-Hinweis am Eintrag: sichtbar, aber nicht marktschreierisch. */
.panel--switch {
  padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-5);
  /* Kein farbiger Balken links — den gibt es sonst nirgends in der App. */
}
.panel--switch .panel__text { margin-bottom: var(--sp-4); }

/* Die eingefuegte Liste ist tabellarisch — Monospace hilft beim Ausrichten.
   Anders als die Browser-Vorgabe aber in voller Breite und mit unserem
   Feld-Stil. */
.import-area .ctl--area {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-15); line-height: 1.55;
  white-space: pre; overflow-x: auto;
}

/* Das Formular darf die Zeile nicht brechen: `display: contents` laesst den
   Knopf direkt am Flex-Layout der Zeile teilnehmen, statt als eigener Block
   die Zeile zu sprengen (der Chevron rutschte darunter). */
/* Das Formular ist ein Block und wuerde als Grid-Element eine eigene Zeile
   erzwingen; `display: contents` reicht den Knopf direkt ins Raster durch. */
.row__act { display: contents; }
.row__act .btn { white-space: nowrap; }

/* Hinweiszeilen mit Info-Icon: der Text erklaert eine Grenze des Produkts,
   kein Fehler und keine Warnung — deshalb ein Info-Symbol, kein Ausrufezeichen. */
.hint-line {
  display: flex; align-items: flex-start; gap: var(--sp-2);
}
/* Das Icon traegt die Farbe des Textes, nicht ein eigenes Grau — sonst
   zerfaellt die Zeile in zwei Elemente. */
.hint-line > svg {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 0.12em;
  color: currentColor; opacity: 0.75;
}

/* Wegklickbarer Hinweis. Er steht so lange da, bis der Nutzer ihn schliesst —
   danach nie wieder. Ein Hinweis, den man nicht loswird, wird ueberlesen;
   einer, der nach Sekunden verschwindet, wird nicht gelesen. */
.notice--dismiss { position: relative; padding-right: var(--sp-7); }
.notice__x {
  position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%);
  display: grid; place-items: center;
  /* 44 px Touch-Ziel (DESIGN.md §5). Vorher 28 px — die Tier-2-Matrix hat
     das auf 375 und 768 px Breite gemeldet, nicht ich. */
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: var(--radius-full);
  color: inherit; opacity: 0.6; cursor: pointer;
}
.notice__x svg { width: 16px; height: 16px; }
@media (hover: hover) { .notice__x:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); } }
.notice__x:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* ── Zeitstrahl der Verlaengerungen ──────────────────────────────────────────
   Drei Zeitraum-Baender (0-30, 31-60, 61-90) statt einer nackten Linie: die
   Trennung zwischen den Faellen ist die eigentliche Aussage, und ein Band
   zeigt sie ohne dass man Punkte auf einer Achse abschaetzen muss.
   Gefaerbt mit den vorhandenen Blautoenen, kein Verlauf. */

/* Kopfzeile mit den drei Zeitraeumen — sie tragen die Beschriftung, nicht
   einzelne Ticks auf einer Linie. */

/* Naeher dran = kraeftiger. Drei Stufen desselben Blaus, keine zweite Farbe. */

/* Die Eintraege stehen IN ihrem Zeitraum, nicht auf einer Koordinate. Damit
   entfaellt das Ueberlappen von Stielen und Punkten vollstaendig. */

/* Kurzer Satz links, Knopf rechts — untereinander bleibt rechts eine leere
   Flaeche stehen, die nach vergessenem Inhalt aussieht. */
.split-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
}
.split-row__text { margin: 0; max-width: 62ch; }

/* Karte statt nacktem Link — dieselbe Optik wie die Listenzeilen. */

/* Reine Icon-Schaltflaeche — fuer Aktionen, deren Wort nur Platz kostet. */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--radius-full);
  color: var(--c-gray-500); cursor: pointer;
}
.icon-btn svg { width: 17px; height: 17px; }
@media (hover: hover) {
  .icon-btn:hover { color: var(--c-brand-dark); border-color: var(--c-gray-300); }
}
.icon-btn:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 1px; }

/* ── My Tools: Tabelle, Toggle, Overlay (Wireframe 2026-08-04) ────────────── */

.stat__unit { font-size: var(--text-15); font-weight: var(--fw-regular); color: var(--c-gray-500); margin-left: var(--sp-1); }
.stat__link { color: var(--c-brand-dark); text-decoration: underline; }

.panel--table { padding: 0; overflow: hidden; }
.tt__bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-gray-200);
}
.tt__bar .panel__title { margin: 0; }
.tt__tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* Segment-Umschalter (Monat | Jahr) — Pillen-Gruppe, aktives Segment weiss
   auf grauem Grund (Vorgabe Justus 2026-08-04: zusammenhaengendes, ruhiges
   Bedienelement statt einzelner Knoepfe). Auch als Radio-Variante im Overlay. */
.seg { display: inline-flex; align-items: center; gap: var(--sp-2); }
.seg__label { font-size: var(--text-15); color: var(--c-gray-500); }
.seg__group {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--c-gray-100); border-radius: var(--radius-full);
  padding: var(--sp-1);
}
.seg__btn {
  /* gray-700 statt gray-500: auf dem grauen Pillen-Grund faellt 500 unter
     4,5:1 (axe-Befund). */
  border: 0; background: transparent; color: var(--c-gray-700); cursor: pointer;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  font-size: var(--text-15); font-weight: var(--fw-bold);
  font-family: 'Roboto Condensed', sans-serif; line-height: 1; white-space: nowrap;
}
.seg__btn.is-on {
  background: var(--c-surface-canvas); color: var(--c-brand-dark);
  box-shadow: var(--shadow-sm);
}
.seg__btn:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 1px; }
.seg--radio .seg__btn { display: inline-flex; align-items: center; }
.seg--radio input { position: absolute; opacity: 0; pointer-events: none; }

/* position:relative ist hier tragend: der .sr-only-Span im Tabellenkopf ist
   absolut positioniert, und absolute Elemente entkommen dem overflow des
   Wrappers, solange er nicht selbst positioniert ist — das Dokument scrollte
   dadurch seitlich (375px-Audit-Befund). */
.tt__wrap { overflow-x: auto; position: relative; }
.tt { width: 100%; border-collapse: collapse; font-size: var(--text-15); }
.tt th {
  text-align: left; font-weight: var(--fw-regular);
  font-size: var(--text-sm); color: var(--c-gray-500);
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--c-gray-200);
  white-space: nowrap;
}
.tt td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-gray-200); vertical-align: middle; }
.tt tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .tt tbody tr:hover { background: var(--c-surface-subtle); } }
.tt__num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt__tool { display: flex; align-items: center; gap: var(--sp-2); min-width: 180px; }
.tt__img { width: 28px; height: 28px; border-radius: var(--radius-xs); object-fit: contain; flex-shrink: 0; border: 1px solid var(--c-gray-200); background: var(--c-surface-canvas); padding: var(--sp-1); box-sizing: border-box; }
.tt__name {
  color: var(--c-brand-dark); font-weight: var(--fw-bold); text-decoration: none;
  /* Ein Toolname ohne Leerzeichen darf die Spalte nicht sprengen (320px-Audit). */
  overflow-wrap: anywhere;
}
@media (hover: hover) { .tt__name:hover { text-decoration: underline; } }
.tt__status {
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--c-gray-500); border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-full); padding: var(--sp-1) var(--sp-2); white-space: nowrap;
}
.tt__muted { color: var(--c-gray-500); }
.tt__overdue { color: var(--c-error); font-weight: var(--fw-bold); }
.tt__add-cost { color: var(--c-gray-500); text-decoration: underline dashed; text-underline-offset: 3px; }

.tt__alert { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.tt__act { text-align: right; white-space: nowrap; }

.dot { width: 9px; height: 9px; border-radius: var(--radius-full); display: inline-block; flex-shrink: 0; }
.dot--ok { background: var(--c-success); }
/* Bewusst NICHT --c-warning: der Token ist ein dunkles Text-Amber (#b45309)
   und liest sich als 9px-Punkt braun. Der Punkt braucht Signal-Gelb wie im
   Wireframe (Justus 05.08.). */
.dot--warn { background: #eab308; }

/* ── Add-Tool-Overlay ─────────────────────────────────────────────────────── */
body.ovl-open .main-col { overflow: hidden; }
.ovl { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; overflow-y: auto; padding: 4rem var(--sp-4) var(--sp-6); }
.ovl[hidden] { display: none; }
.ovl__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); }
.ovl__card {
  position: relative; width: min(760px, 100%);
  background: var(--c-surface-canvas);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
}
.ovl__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.ovl__title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-xl);
  line-height: var(--lh-tight); margin: 0; color: var(--c-brand-dark);
}
.ovl__x {
  font-size: var(--text-4xl); line-height: 1; color: var(--c-gray-500);
  text-decoration: none; border-radius: var(--radius-sm);
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0;
}
@media (hover: hover) { .ovl__x:hover { color: var(--c-brand-dark); background: var(--c-surface-subtle); } }
.fld-row--ovl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 640px) { .fld-row--ovl { grid-template-columns: 1fr; } }
.ovl__price { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ovl__price .ctl { max-width: 140px; }
.ovl__section { padding: var(--sp-1) 0 var(--sp-4); }
.ovl__inline { display: flex; align-items: center; gap: var(--sp-2); }
.ovl__inline .ctl { max-width: 110px; }
.ovl__unit { color: var(--c-gray-500); font-size: var(--text-15); }
.ovl__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Autocomplete-Liste unter dem Namensfeld. */
.ac { position: relative; }
.ac__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.ac__item {
  display: flex; align-items: baseline; gap: var(--sp-2); width: 100%;
  padding: var(--sp-2) var(--sp-3); border: 0; background: none; cursor: pointer;
  text-align: left; font-size: var(--text-15); color: var(--c-brand-dark);
}
.ac__item small { color: var(--c-gray-500); }
@media (hover: hover) { .ac__item:hover { background: var(--c-surface-subtle); } }
.ac__item:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: -2px; }

/* Ein Hinweis direkt unter einer Karte klebte an ihr (Befund Justus, Gemerkt). */
.content .panel + .notice { margin-top: var(--sp-5); }

/* Bearbeiten-Overlay: das Seitenformular in der Overlay-Karte — der
   Panel-Rahmen entfaellt, die Karte selbst ist schon die Flaeche. */
.ovl--edit .ovl__card { width: min(720px, 100%); }
.ovl--edit .panel--form { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
/* Mini-Bestaetigung ueber dem Overlay (Loeschen ohne Seitenwechsel). */
.ovl-confirm { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--sp-4); }
.ovl-confirm[hidden] { display: none; }
.ovl-confirm__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.ovl-confirm__card {
  position: relative; width: min(420px, 100%);
  background: var(--c-surface-canvas);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--sp-5) var(--sp-5);
}
.ovl-confirm__title {
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold);
  font-size: var(--text-xl); margin: 0 0 var(--sp-4); color: var(--c-brand-dark);
}
.ovl-confirm__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.btn--danger { background: var(--c-error); color: var(--c-surface-canvas); border-color: var(--c-error); }
@media (hover: hover) { .btn--danger:hover { filter: brightness(0.92); } }
/* Das Eigenpflege-Banner unter der My-Tools-Tabelle braucht Luft zur Karte. */
.panel--table ~ .notice { margin-top: var(--sp-5); }
/* Der Prueffhinweis unter der Kosten-Zeile im Add-Overlay braucht Luft nach oben. */
.ovl__price + .fld__help { margin-top: var(--sp-3); }

/* Autocomplete: kleines Tool-Logo bzw. Monogramm vor dem Namen. */
.ac__item { display: flex; align-items: center; gap: var(--sp-2); }
.ac__icon {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--radius-xs); object-fit: contain;
  background: var(--c-surface-canvas);
}
.ac__mono {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-xs);
  background: var(--c-surface-subtle); color: var(--c-gray-500);
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold);
  font-size: var(--text-sm);
}

/* Add-Overlay: Trial und Verbindungen als abgesetzte Boxen (Justus 05.08.). */
.ovl__block {
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  background: var(--c-surface-subtle);
  padding: var(--sp-4) var(--sp-4) var(--sp-2); margin: var(--sp-4) 0;
}
.ovl__block .ovl__section { padding-bottom: var(--sp-2); }
.ovl__block .ovl__section[hidden] { display: none; }

/* Add-Overlay: Checkbox mittig zu ihrem Label (Blocks, Justus 05.08.). */
.ovl__block > .fld--check { align-items: center; margin: 0 0 var(--sp-1); }
.ovl__block > .fld--check input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand-dark);
}

/* Gewaehltes Tool: Logo rechts im Namensfeld + im Titel des Edit-Overlays —
   im selben Rahmen-Kaestchen wie alle Tool-Icons (Feedback Justus 07.08.). */
.ac__chosen {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; object-fit: contain;
  border: 1px solid var(--c-gray-200); background: var(--c-surface-canvas);
  padding: var(--sp-1);
  border-radius: var(--radius-xs); pointer-events: none;
}
.ac .ctl--has-logo { padding-right: var(--sp-7); }
.ovl__title--tool { display: flex; align-items: center; gap: var(--sp-2); }
.ovl__logo { width: 30px; height: 30px; object-fit: contain; border-radius: var(--radius-xs); flex-shrink: 0; }

/* Kategorie im Eintrags-Formular: Anzeige, kein Feld (kommt vom Verzeichnis). */
.item-category { margin: 0 0 var(--sp-4); font-size: var(--text-15); }
.item-category__label { color: var(--c-gray-500); margin-right: var(--sp-2); }
.item-category__value {
  display: inline-block; padding: var(--sp-1) var(--sp-2);
  background: var(--c-surface-subtle); border-radius: var(--radius-full);
  color: var(--c-brand-dark); font-weight: var(--fw-bold);
}

/* Loeschen im Edit-Overlay: ganz links, weg von Abbrechen/Speichern. */
.form-actions__delete { margin-right: auto; color: var(--c-error); }

/* Gratis angehakt: Betrag + Intervall sichtbar stillgelegt. */
.fld-row.is-disabled { opacity: 0.45; }
/* Add-Overlay: „Free" gewaehlt -> das Preisfeld tritt sichtbar zurueck. */
.ovl__price.is-disabled .ctl--num { opacity: 0.45; }

/* Import: Fliesstext nicht ueber die volle Panelbreite laufen lassen. */
.panel--import .panel__text { max-width: 46rem; }

/* Monogramm-Varianten, die bisher nur die img-Optik erbten: das Kaestchen
   kommt von der Basisklasse, hier NUR die Buchstaben-Zentrierung. */
.tt__img--mono, .ovl__logo--mono {
  display: grid; place-items: center; line-height: 1; text-align: center;
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-sm);
  font-weight: var(--fw-bold); color: var(--c-gray-500);
}

/* ── Info-Popover am Spaltenkopf (Duplikate-Erklaerung, Skizze 07.08.) ────── */
.tt__th-info { position: relative; white-space: nowrap; }
.info-tip {
  display: inline-grid; place-items: center; vertical-align: text-bottom;
  width: 18px; height: 18px; margin-left: var(--sp-1); padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--c-gray-500);
  border-radius: var(--radius-full);
}
.info-tip svg { width: 15px; height: 15px; }
.info-tip:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 1px; }
@media (hover: hover) { .info-tip:hover { color: var(--c-brand-dark); } }
.info-tip__pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  width: 260px; padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-canvas); color: var(--c-gray-700);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: 'PT Sans', sans-serif; font-weight: var(--fw-regular);
  font-size: var(--text-sm); line-height: 1.5;
  text-transform: none; letter-spacing: normal; white-space: normal;
}

/* ── Verbindungs-Overlay: das feststehende Paar beim Bearbeiten ──────────── */

/* ── Deals (Skizze 07.08.): Karten-Grid, Code direkt in der Karte ────────── */
.page-lead { margin: 0 0 var(--sp-4); color: var(--c-gray-500); font-size: var(--text-15); }
.deals {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.deal {
  display: flex; flex-direction: column;
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  overflow: hidden;
}
.deal__media { position: relative; }
.deal__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.deal__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--c-brand-dark); color: var(--c-surface-canvas);
  border-radius: var(--radius-full);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-15);
  padding: var(--sp-1) var(--sp-3);
}
.deal__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-4); }
.deal__name {
  margin: 0; font-family: 'Roboto Condensed', sans-serif;
  font-size: var(--text-xl); font-weight: var(--fw-bold);
}
.deal__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.deal__cat {
  background: var(--c-surface-subtle); color: var(--c-gray-500);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-full);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: var(--text-sm); font-weight: var(--fw-bold);
  padding: 1px var(--sp-2);
}
.deal__sub { color: var(--c-gray-500); font-size: var(--text-sm); }
.deal__desc { margin: 0; font-size: var(--text-15); line-height: 1.5; color: var(--c-gray-700); flex: 1; }
.deal__code-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.deal__code-label {
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-sm);
  font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--c-gray-500);
}
.deal__code {
  background: var(--c-surface-subtle); border: 1px dashed var(--c-gray-300);
  border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-15); font-weight: var(--fw-bold);
  user-select: all;
}
.deal__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.deal__verified { color: var(--c-gray-500); font-size: var(--text-sm); }
.deal__terms { margin: 0; color: var(--c-gray-500); font-size: var(--text-sm); line-height: 1.45; }

/* ── Filterleiste (Gemerkt + Deals, Skizze 07.08.) ────────────────────────── */
.filterbar {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4);
}
.filterbar__label {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: var(--fw-bold); font-size: var(--text-15);
}
.filterbar__fld { display: inline-flex; align-items: center; gap: var(--sp-2); }
.filterbar__fld > span, .filterbar__view > span {
  font-size: var(--text-15); color: var(--c-gray-500);
}
.filterbar__fld select {
  min-height: 42px; padding: var(--sp-1) var(--sp-6) var(--sp-1) var(--sp-4);
  border: 1px solid var(--c-gray-500); border-radius: var(--radius-sm);
  background-color: var(--c-surface-canvas); font: inherit; font-size: var(--text-15);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0.75rem center;
}
.filterbar__view { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.viewbtn {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--c-surface-canvas); border: 1px solid var(--c-gray-500);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--c-gray-700);
}
.viewbtn svg { width: 17px; height: 17px; }
.viewbtn.is-on { border-color: var(--c-brand-dark); color: var(--c-brand-dark); background: var(--c-surface-subtle); }
.viewbtn:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 1px; }

/* ── Tool-Karten (Gemerkt + Vorschlaege, Skizze 07.08.) ───────────────────── */
.section-title {
  margin: var(--sp-5) 0 var(--sp-4);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: var(--text-xl); font-weight: var(--fw-bold);
}
.tcards {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tcard {
  display: flex; flex-direction: column;
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  overflow: hidden;
}
.tcard__media { position: relative; background: var(--c-surface-subtle); }
.tcard__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tcard__mono {
  display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2;
  font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-4xl);
  font-weight: var(--fw-bold); color: var(--c-gray-400);
}
.tcard__kind {
  position: absolute; top: 8px; right: 44px;
  background: var(--c-brand-dark); color: var(--c-surface-canvas);
  border-radius: var(--radius-xs);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: var(--text-sm); font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-2);
}
.tcard__del { position: absolute; top: 6px; right: 6px; }
.icon-btn--onmedia {
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-full);
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  color: var(--c-gray-500); box-shadow: var(--shadow-sm);
  transition: color 0.12s ease, border-color 0.12s ease;
}
.icon-btn--onmedia svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .icon-btn--onmedia:hover { color: var(--c-danger, #a32a34); border-color: var(--c-gray-300); }
}
.tcard__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: 1; }
.tcard__name { margin: 0; font-family: 'Roboto Condensed', sans-serif; font-size: var(--text-xl); font-weight: var(--fw-bold); }
.tcard__name a { color: inherit; text-decoration: none; }
@media (hover: hover) { .tcard__name a:hover { text-decoration: underline; } }
.tcard__desc { margin: 0; font-size: var(--text-15); line-height: 1.5; color: var(--c-gray-500); flex: 1; }
.tcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); }
.tcard__bm { width: 18px; height: 18px; color: var(--c-brand-dark); }
/* Tags heben sich von Knoepfen ab: keine Border, flache Tint-Flaeche. */
.tier {
  display: inline-block; border-radius: var(--radius-xs);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: var(--text-sm); font-weight: var(--fw-regular);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-attention-tint); color: var(--c-gray-700);
}
.tier--free     { background: var(--c-success-tint); color: var(--c-success); }
.tier--freemium { background: var(--c-attention-tint); color: var(--c-attention); }
.tier--paid     { background: var(--c-gray-100); color: var(--c-gray-700); }
.tcards--list { grid-template-columns: 1fr; }
.tcards--list .tcard { flex-direction: row; align-items: stretch; }
.tcards--list .tcard__media { flex: 0 0 180px; }
.tcards--list .tcard__img, .tcards--list .tcard__mono { aspect-ratio: auto; height: 100%; min-height: 110px; }
/* Listenansicht: Papierkorb GANZ rechts an der Zeile — der Anker ist die
   Karte, nicht das Bild (Feedback 07.08., zweiter Anlauf). */
.tcards--list .tcard { position: relative; }
.tcards--list .tcard__media { position: static; }
.tcards--list .tcard__del { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); left: auto; }
.tcards--list .tcard__body { padding-right: 72px; }
.tcards--list .tcard__foot { width: 100%; }

/* ── Deals: Listenansicht ─────────────────────────────────────────────────── */
.deals--list { grid-template-columns: 1fr; }
.deals--list .deal { flex-direction: row; }
/* Einheitliche Thumbnails (Justus 12.08.): vorher streckte height:100% das
   Bild auf die je nach Textlaenge unterschiedliche Kartenhoehe — jetzt hat
   jede Karte dasselbe 220x147-Bild, vertikal zentriert. */
.deals--list .deal__media { flex: 0 0 220px; align-self: center; }
.deals--list .deal__img { aspect-ratio: 3 / 2; height: auto; }
/* Code sitzt in der Listenansicht rechts unten in der Karte (Justus 12.08.);
   die Kachel-Ansicht behaelt ihre Reihenfolge. Unter 640px faellt die Liste
   auf Spalten zurueck — dort bleibt der Code im Fluss. */
@media (min-width: 640px) {
  .deals--list .deal__body { position: relative; }
  .deals--list .deal__code-row { position: absolute; right: 1rem; bottom: 1rem; }
  .deals--list .deal__foot { padding-right: 15rem; }
}

/* ── Stack optimieren (Skizze 07.08.) ─────────────────────────────────────── */

/* Alternative-Links: kein Blau — gestrichelte Unterstreichung in Textfarbe. */

.btn__ico { width: 16px; height: 16px; margin-left: var(--sp-1); }

/* Name IMMER einzeilig — der Pfeil (Spalte 1) schrumpft stattdessen bis auf
   20px; wird es noch enger, bleibt vom Merken-Knopf nur das Icon
   (Feedback Justus 07.08.). */

/* Alle Pfeile GLEICH kurz und links — so stehen Icons und Namen in einer
   Flucht (Feedback Justus 07.08., „sieht cleaner aus"). */

.tier--cat { white-space: nowrap; }

/* ── Verbindungsliste in derselben Optik wie die Meine-Tools-Tabelle (.tt) ─── */

/*
 * Pfeil DURCHGEZOGEN (Skizze): mittlere Spalte ist so breit wie die Pille,
 * die Schaefte stossen ohne Luecke an; die Kurzbeschreibung haengt absolut
 * unter der Pille, damit die Pille exakt auf der Linie sitzt.
 */

.ovl__danger { margin-top: var(--sp-3); text-align: right; }

@media (max-width: 639px) {
  .filterbar__view { margin-left: 0; }
  .tcards--list .tcard { flex-direction: column; }
  .deals--list .deal { flex-direction: column; }
  /* position:relative wie bei .tt__wrap: der .sr-only-Span im Tabellenkopf ist absolut
     positioniert und entkam dem overflow der Tabelle — die Seite scrollte bei 390 px seitlich
     (641 px Dokumentbreite, Befund 09.10.2026 im Website-Rahmen). */
  
}

/* Wegklickbare Hinweise brauchen Luft zum Content (Feedback 07.08.). */
.notice[data-dismiss] { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }

/* ── Deals-Karte: ruhiger Fuss — Code links, CTA rechts auf einer Linie ──── */
.deal__code-row {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px dashed var(--c-gray-300); border-radius: var(--radius-sm);
  overflow: hidden; align-self: flex-start;
}
.deal__code {
  background: var(--c-surface-subtle); border: 0; border-radius: 0;
  padding: var(--sp-2) var(--sp-3); font-size: var(--text-15); font-weight: var(--fw-bold);
  display: inline-flex; align-items: center;
}
.deal__code-row .btn {
  border: 0; border-left: 1px dashed var(--c-gray-300); border-radius: 0;
  min-height: 0;
}
.deal__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-1);
}

/* ── Topbar-Suche: klarere Optik + Vorschlaege (Feedback 07.08.) ─────────── */
.tb__search {
  position: relative;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-full);
  background: var(--c-surface-canvas);
  padding: var(--sp-1) var(--sp-4); display: flex; align-items: center; gap: var(--sp-2);
  min-width: 300px;
}
.tb__search:focus-within { border-color: var(--c-brand-dark); box-shadow: 0 0 0 3px var(--c-attention-tint); }
.tb__search .ico { color: var(--c-gray-500); flex-shrink: 0; }
.tb__search input { border: 0; outline: none; background: none; font: inherit; font-size: var(--text-15); width: 100%; }
.tb__sugg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--sp-1); max-height: 340px; overflow-y: auto;
}
.tb__sugg-item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: var(--sp-2) var(--sp-2); border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm); font: inherit; font-size: var(--text-15);
  text-align: left; text-decoration: none; color: inherit;
}
@media (hover: hover) { .tb__sugg-item:hover { background: var(--c-surface-subtle); } }
.tb__sugg-item .conn__img { width: 28px; height: 28px; }
.tb__sugg-add { margin-left: auto; flex-shrink: 0; color: var(--c-brand-dark); font-weight: var(--fw-bold); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-1); }
.tb__sugg-add .ico { width: 14px; height: 14px; }

/* ── Settings: Workspace-Liste (Vorschau Mehr-Workspaces, 07.08.) ────────── */
.ws-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.ws-list__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-4);
}
.ws-list__name { font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); }
#workspaces .fld__help { margin-top: var(--sp-2); }

/* Positiver Leerzustand (kein Duplikat = gute Nachricht, Feedback 07.08.). */
.empty--positive { display: grid; place-items: center; gap: var(--sp-2); }
.empty__ico { width: 40px; height: 40px; color: var(--c-success); }

/* Info-Tip der Verbindungsliste: das Popover haengt an der MITTE, nicht in
   der Pille — deren overflow:hidden wuerde es abschneiden (Befund 07.08.).
   Es oeffnet nach OBEN und das Panel der Liste clippt nicht mehr: mit
   overflow:hidden am Panel wurde das Popover an der Panelkante abgeschnitten
   (Screenshot Justus 07.08.). */

/* Panels, aus denen etwas herausragt (Popover, Vorschlagsliste), duerfen
   nicht clippen — overflow:hidden am .panel schnitt beides ab. */
.panel:has(.conn), .panel:has(.ac__list) { overflow: visible; }

.form-actions__start { margin-right: auto; }

/* Gemerkt: Papierkorb oben rechts (auch Listenansicht), Abstand vor den
   Vorschlaegen (Feedback 07.08.). */
.tcards--list .tcard__del { top: 10px; right: 12px; transform: none; }
.section-title { margin-top: var(--sp-6); }

/* Such-Vorschlaege: Name + Kategorie-Unterzeile (Feedback 07.08.). */
.tb__sugg-txt { display: grid; gap: 1px; min-width: 0; }
.tb__sugg-name { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb__sugg-cat { font-size: var(--text-sm); color: var(--c-gray-500); }
.tb__sugg-item { align-items: center; }

/* ── Verbindungs-Vorschlaege (13.08.) ──────────────────────────────────────
   Angebot, kein Bestand: deshalb ein ruhiger Rahmen statt Akzentflaeche und
   die Quellenzeile („Angabe des Anbieters, Stand …") direkt an der Zeile —
   sie ist die inhaltliche Abgrenzung zu einer geprueften Verbindung. */
.panel--suggest { background: var(--c-surface-subtle); }
.panel__hint {
  margin: 0; padding: var(--sp-3) var(--sp-4) 0;
  font-size: var(--text-sm); color: var(--c-gray-600); max-width: 62ch;
}
.sugg { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-2); }
.sugg__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm);
}
.sugg__pair {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0;
  color: var(--c-brand-dark);
}
.sugg__pair strong { font-family: 'Roboto Condensed', sans-serif; }
.sugg__src { font-size: var(--text-sm); color: var(--c-gray-500); }
/* Aktionen ganz rechts, Primary zuletzt — App-Regel aus DESIGN.md. */
.sugg__actions { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.sugg__form { margin: 0; }
@media (max-width: 640px) {
  .sugg__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ── Meine Tools, Umbau 15.09.2026: Kategorie- und Verbindungs-Spalte ─────── */
/* Zwei Statistik-Karten statt vier (Sparpotenzial und Trials sind raus):
   mit auto-fit wuerden zwei Karten die volle Breite strecken — gedeckelt,
   damit sie wie Kennzahlen aussehen und nicht wie Banner. */

/* Handy: eine Karte je Zeile über die volle Breite — gedeckelt endeten sie 40 px vor dem Rand (28.10.2026). */
.tt__cat { display: inline-flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }

.tt__conn { color: var(--c-gray-700); }
/* Die Verbindungen einer Zeile brechen nicht mitten im Toolnamen um. */
.tt__conn-name { white-space: nowrap; }
.panel__head--row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.panel__head--row .panel__title { margin: 0; }

/* iOS zoomt beim Fokus in jedes Eingabefeld unter 16 px (Audit iPhone 13 / iPad, 14.10.2026:
   alle Felder im Eintrags-Formular lagen bei 15 px). Auf Touch-Geraeten und schmalen Fenstern
   deshalb mindestens 16 px — Kontrollkaestchen und Auswahlknoepfe loesen den Zoom nicht aus. */
@media (max-width: 1080px), (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea, select.ctl, .ctl { font-size: var(--text-base); }
}
/* 320 px (= 400 % Zoom): die Kopfzeile der klassischen Huelle schob den Avatar 38 px aus dem
   Bild. Die Suche nimmt nur den Rest, statt fester 110 px. */
@media (max-width: 379px) {
  .tb__right { flex: 1 1 auto; justify-content: flex-end; }
  .tb__search { flex: 1 1 auto; }
  .tb__search input { width: 100%; }
}

/* Hinweis unter der Kostensumme: Tools ohne Kosten (30.10.2026). */

/* ════════════════════════════════════════════════════════════════════════════
   MVP-Zuschnitt 02.11.2026 — gemeinsame Bausteine beider Hüllen.
   Nur Tokens, Typo PT Sans (Text) / Roboto Condensed (Zahlen, Titel), keine
   Versalien, keine Akzentbalken, Lime nur auf Primär-Knöpfen.
   ════════════════════════════════════════════════════════════════════════════ */

/* Zahlenkarten: die Zahl ist die Überschrift, darunter ein Satz — keine Eyebrow. Leer- und
   Teilzustände stehen IN derselben Karte (gleiche Höhe über das Grid, kein Layoutsprung). */
.kpis { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); max-width: 980px; align-items: stretch; }
.kpi {
  min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-1); min-height: 7.25rem;
  padding: var(--sp-4) var(--sp-5) var(--sp-4); background: var(--c-surface-subtle); border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md); color: var(--c-brand-dark);
}
.kpi__value {
  font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-7xl);
  line-height: 1; color: var(--c-brand-dark); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* „ca." vor geschätzten Beträgen: klein, normal, grau — die Zahl bleibt die Aussage. */
.kpi__approx { font-family: 'PT Sans', sans-serif; font-weight: var(--fw-regular); font-size: var(--text-15); color: var(--c-gray-700); vertical-align: 0.15em; }
.kpi__label { font-size: var(--text-base); line-height: 1.35; color: var(--c-gray-700); }
.kpi__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.kpi__illu { width: 56px; height: 56px; margin: calc(var(--sp-1) * -1) 0 0; }
.kpi__empty-title { font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: 1.2; }
.kpi__empty-text { font-size: var(--text-15); line-height: 1.45; color: var(--c-gray-700); }
.kpi__cta { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-15); color: var(--c-brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.kpi__cta .ico { width: 16px; height: 16px; }
.kpi__cta:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
/* Klein auf „Meine Tools": dieselbe Karte, kleinere Zahl, weniger Luft. */
.kpis--sm { gap: var(--sp-3); margin-bottom: var(--sp-5); max-width: 820px; }
.kpis--sm .kpi { padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); min-height: 5.25rem; }
.kpis--sm .kpi__value { font-size: var(--text-4xl); }
.kpis--sm .kpi__label, .kpis--sm .kpi__empty-text { font-size: var(--text-sm); }
.kpis--sm .kpi__empty-title { font-size: var(--text-base); }
.kpis--sm .kpi__empty { gap: var(--sp-1); }
.kpis--sm .kpi__cta { min-height: 32px; }
@media (max-width: 639px) {
  /* Handy: Karte 1 über die volle Breite, die beiden Kostenkarten nebeneinander. */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .kpis > .kpi:first-child { grid-column: 1 / -1; }
  .kpi { padding: var(--sp-3) var(--sp-4); min-height: 6rem; }
  .kpi__value { font-size: var(--text-4xl); }
  .kpis > .kpi:first-child .kpi__value { font-size: var(--text-7xl); }
  .kpi__label { font-size: var(--text-15); }
  .kpis--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .kpis--sm > .kpi:first-child { grid-column: auto; }
  .kpis--sm .kpi { padding: var(--sp-3) var(--sp-3); min-height: 5.5rem; }
  .kpis--sm .kpi__value, .kpis--sm > .kpi:first-child .kpi__value { font-size: var(--text-xl); }
  .kpis--sm .kpi__empty-text { font-size: var(--text-sm); }
  .kpis--sm .kpi__approx { font-size: var(--text-sm); display: block; }
}

/* Einstieg ohne Tools: ein Satz, eine Aktion. */

/* Newsletter-Karte: ruhig, Link auf die öffentliche Seite. */

/* Newsletter und Feedback stehen nebeneinander: Text oben, Aktion unten — gleiche Höhe. */

.set-feedback { margin: var(--sp-5) 0 0; font-size: var(--text-15); color: var(--c-gray-700); }
.set-feedback a { color: var(--c-brand-dark); font-weight: var(--fw-bold); }

/* Hinweis unter der Tool-Tabelle — leiser Satz statt Kasten. */

/* Filterleiste „Gemerkt" (Neubau): EIN Element — Suche, Sortierung, Ansicht in einer Zeile,
   darunter die Kategorien als Pillen (aktiv navy wie auf der Website). */
.sfb { margin: 0 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.sfb[hidden] { display: none; }
.sfb__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sfb__search { position: relative; flex: 0 1 15rem; min-width: 0; display: block; }
.sfb__search svg { position: absolute; left: 0.75rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--c-gray-700); pointer-events: none; }
.sfb__search .ctl { padding-left: var(--sp-6); }
.sfb__view { display: inline-flex; gap: var(--sp-1); margin-left: auto; }
.sfb__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sfb__n { font-family: 'PT Sans', sans-serif; font-weight: var(--fw-regular); color: var(--c-gray-700); }
.sfb__pill.is-on .sfb__n { color: var(--c-surface-canvas); }
@media (max-width: 639px) {
  .sfb__search { flex: 1 1 100%; }
  /* Pillen mobil in einer ruhigen, waagerecht wischbaren Zeile (scrollt in sich, nicht die Seite). */
  .sfb__pills { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(var(--sp-4) * -1); padding: var(--sp-1) var(--sp-4) var(--sp-1); }
  .sfb__pills::-webkit-scrollbar { display: none; }
  .sfb__pill { flex: 0 0 auto; }
  .sfb__sort { flex: 1 1 auto; }
  .sfb__sort > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sfb__sort .ctl-select { flex: 1 1 auto; }
}
.fl-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin: var(--sp-5) auto; padding: var(--sp-6) var(--sp-4); max-width: 28rem; text-align: center; font-size: var(--text-base); color: var(--c-gray-700); }
.fl-empty svg { width: 36px; height: 36px; color: var(--c-gray-500); }
.fl-empty[hidden] { display: none; }

/* Einstellungen (Ordnungsrunde 02.11.2026): alle Felder gleich breit und hoch, je zwei auf einer
   Grundlinie, Labels gleich weit vom Feld, Abschnitte gleich weit auseinander, der Knopf jedes
   Formulars an derselben Stelle — links unter den Feldern. */
.set { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-7); }
.set .panel--form, .data-sec .panel--form { margin: 0; padding: var(--sp-5); }
.set .panel__title--section, .data-sec .panel__title--section { margin: 0 0 var(--sp-4); }
.set .fld-row, .data-sec .fld-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); align-items: start; }
.set .fld, .set .fld-row > .fld, .data-sec .fld, .data-sec .fld-row > .fld { max-width: none; margin-bottom: var(--sp-4); }
.set__half .fld-row { grid-template-columns: minmax(0, 1fr); }
.set .form-actions, .data-sec .form-actions { justify-content: flex-start; margin-top: var(--sp-2); }
.set .panel__text { margin: 0 0 var(--sp-4); }
@media (max-width: 639px) { .set .fld-row, .data-sec .fld-row { grid-template-columns: minmax(0, 1fr); } .set .panel--form, .data-sec .panel--form { padding: var(--sp-4); } }
@media (min-width: 1100px) { .set { grid-template-columns: repeat(2, minmax(0, 1fr)); } .set__profile, .set > .panel:not(.set__half) { grid-column: 1 / -1; } }

/* „Meine Daten" als Abschnitt unter den Einstellungen. */
.data-sec { scroll-margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-gray-200); }
.data-sec__title { margin: 0 0 var(--sp-1); font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-4xl); color: var(--c-brand-dark); }
.data-sec .lead { margin-bottom: var(--sp-4); }
.data-sec .panel { margin: 0 0 var(--sp-5); }
.data-sec .split-row { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.data-sec .panel__foot { font-size: var(--text-15); }

/* Abmelden ohne JavaScript: Bestätigungsseite. */
.form-actions--start { justify-content: flex-start; }
.signout-confirm { max-width: 32rem; }

/* ════════════════════════════════════════════════════════════════════════════
   Ein Bauteil je Funktion (Runde 02.11.2026 abends, Justus: „Sortieren sieht anders aus als bei
   Gemerkt"): EIN Feld/Dropdown (.ctl in .ctl-select), EIN Pillen-Knopf (Kategorien, Monat/Jahr,
   Free), EIN Ansicht-Knopf. Schriftskala der App: 14 (Meta) · 15 (Labels, Knöpfe) · 16 (Text,
   Eingaben) · 20 (Abschnitts-/Kartentitel) · 28 (Seitentitel) · 48 nur für Kennzahlen.
   ════════════════════════════════════════════════════════════════════════════ */
.ctl { min-height: 44px; border: 1px solid var(--c-gray-500); font-size: var(--text-base); }
.ctl--area { min-height: 76px; }
.ctl-money__cur { border: 1px solid var(--c-gray-500); border-left: 0; }
/* Label links, Feld rechts — Sortieren in Meine Tools und auf Gemerkt. */
.fld-inline { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-15); color: var(--c-gray-700); }
.fld-inline .ctl-select { min-width: 11rem; }

/* Pille: Kategorien (Gemerkt), Monat/Jahr (Meine Tools), Monat/Jahr/Free (Hinzufügen). */
.sfb__pill, .seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 40px; padding: var(--sp-2) var(--sp-4);
  font: inherit; font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-15); line-height: 1.1;
  color: var(--c-brand-dark); background: var(--c-surface-canvas); border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-full); cursor: pointer; white-space: nowrap; box-shadow: none;
}
.sfb__pill.is-on, .seg__btn.is-on { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: var(--c-surface-canvas); box-shadow: none; }
@media (hover: hover) { .sfb__pill:not(.is-on):hover, .seg__btn:not(.is-on):hover { border-color: var(--c-brand-dark); } }
.sfb__pill:focus-visible, .seg__btn:focus-visible, .seg--radio .seg__btn:focus-within { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
.seg__group { background: none; padding: 0; gap: var(--sp-2); }
.seg__label { color: var(--c-gray-700); }
@media (max-width: 1023px) { .sfb__pill, .seg__btn { min-height: 44px; } }

/* Ansicht-Knöpfe (Raster/Liste): gleiche Höhe wie Feld und Pille. */
.viewbtn { width: 44px; height: 44px; border-radius: var(--radius-sm); border-color: var(--c-gray-500); }
.viewbtn.is-on { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: var(--c-surface-canvas); }

/* Platzhalter für Tools ohne Logo (Pinsel-Kachel, bringt Fläche und Radius selbst mit). */
.tt__img { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.tt__img--ph, .ovl__logo--ph, .ac__icon--ph { border: 0; padding: 0; background: none; object-fit: contain; }
.tt__tool { gap: var(--sp-3); }
.tt td { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.tcard__mono img, .app-card__ph img { width: 96px; height: 96px; }
.app-card__ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--c-surface-subtle); }

/* Leerzustände mit Pinsel-Illustration (260 px Datei, 128 px Anzeige → 2× scharf). */
.empty-state__img { display: block; width: 128px; height: 128px; margin: 0 0 var(--sp-3); }
.empty-state__title { font-size: var(--text-xl); }
.fl-empty__img { width: 72px; height: 72px; }

/* Hinzufügen: unbekanntes Tool klar kennzeichnen, Kategorie wird Pflicht. */
.ovl__unknown { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--c-gray-700); }
.ovl__unknown[hidden] { display: none; }
.ovl__unknown svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: var(--sp-1); color: var(--c-brand-blue); }
.fld__req { color: var(--c-error); }
.fld__req[hidden] { display: none; }

/* Rückfrage „N gemerkte Tools übernehmen?" (Brücke von der Website, 02.11.2026) */
.import-ask { margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); background: var(--c-surface-subtle); }
.import-ask__title { margin: 0 0 var(--sp-1); font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--c-brand-dark); }
.import-ask__names { margin: 0 0 var(--sp-3); font-size: var(--text-15); color: var(--c-gray-700); }
.import-ask__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.import-ask__actions form { margin: 0; }

/* Filter-Bedienelemente app-weit gleich (Gemerkt UND Meine Tools): 40 px hoch, Radius sm, 15 px. */
.sfb .ctl, .tt__tools .ctl { min-height: 40px; padding-top: var(--sp-2); padding-bottom: var(--sp-2); font-size: var(--text-15); }
.sfb .viewbtn, .tt__tools .viewbtn { width: 40px; height: 40px; }
.tt__tools .btn, .tt__tools .seg__btn { min-height: 40px; }
@media (max-width: 1023px) {
  .sfb .ctl, .tt__tools .ctl, .tt__tools .btn, .tt__tools .seg__btn { min-height: 44px; font-size: var(--text-base); }
  .sfb .viewbtn { width: 44px; height: 44px; }
}

/* Teaser-Raster der Übersicht (02.11.2026): Newsletter · Feedback · Deals · Social — gleiche Box, gleiche
   Höhe, 2×2 ab 1100 px. Wegklickbare Boxen tragen oben rechts ein X (serverseitig gespeichert). */
.teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); max-width: 980px; align-items: stretch; }
@media (max-width: 1099px) { .teasers { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }
.teaser { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5) var(--sp-4); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); background: var(--c-surface-canvas); }
.teaser__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); min-height: 28px; }
.teaser__title { margin: 0; font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--c-brand-dark); }
.teaser__x { margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) 0 0; }
.teaser__x .icon-btn { width: 44px; height: 44px; border: 0; background: none; color: var(--c-gray-700); }
.teaser__text { margin: 0; font-size: var(--text-15); line-height: 1.5; color: var(--c-gray-700); flex: 1 1 auto; }
.teaser__cta { margin-top: var(--sp-2); }
.teaser__link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-15); color: var(--c-brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.teaser__link .ico { width: 16px; height: 16px; }
.teaser__socials { display: flex; gap: var(--sp-1); margin-left: calc(var(--sp-2) * -1); }
.teaser__social { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); color: var(--c-brand-dark); }
@media (hover: hover) { .teaser__social:hover { background: var(--c-surface-subtle); } }
.teaser__social:focus-visible, .teaser__link:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
.btn-link { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--fw-bold); color: var(--c-brand-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Ordnungsrunde 02.11.2026: Zahlenkarten mit demselben Raster-Abstand wie alle Karten-Grids;
   Zahl und Beschriftung oben bündig, damit sie über alle drei Karten auf einer Linie stehen. */
.kpis, .kpis--sm { gap: var(--sp-4); }
.kpi { padding: var(--sp-4) var(--sp-5); gap: var(--sp-1); justify-content: flex-start; }
.kpis--sm .kpi { padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); min-height: 88px; }
.kpis--sm .kpi__value { line-height: 1.1; }
.teasers { gap: var(--sp-4); }
.teaser { padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); }
@media (max-width: 639px) {
  .kpis, .kpis--sm { gap: var(--sp-3); }
  .kpi { padding: var(--sp-3) var(--sp-4); }
  .kpis--sm .kpi { padding: var(--sp-3); min-height: 80px; }
  .teasers { gap: var(--sp-3); }
}
.data-sec .row__meta { font-size: var(--text-15); }

/* ════ Letzte Runde 02.11.2026: Filterbereich neu (Gemerkt) + gleiche Optik in Meine Tools ════ */
.sfb { padding: var(--sp-4); gap: var(--sp-3); background: var(--c-surface-canvas); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); margin: 0 0 var(--sp-5); }
.sfb__row { flex-wrap: nowrap; gap: var(--sp-2); }
.sfb__search { flex: 1 1 auto; min-width: 10rem; }
.sfb__sort { flex: 0 0 15rem; }
/* Alle Bedienelemente der Kopfzeile 40 px hoch; Touch 44 px. */
.sfb .ctl, .tt__tools .ctl { height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; font-size: var(--text-15); }
/* Ansicht als EIN Segment: zwei Icons in einer Gruppe. */
.viewseg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--c-gray-500); border-radius: var(--radius-sm); overflow: hidden; }
.viewseg .viewbtn { width: 40px; height: 38px; border: 0; border-radius: 0; background: var(--c-surface-canvas); color: var(--c-gray-700); }
.viewseg .viewbtn + .viewbtn { border-left: 1px solid var(--c-gray-300); }
.viewseg .viewbtn.is-on { background: var(--c-brand-dark); color: var(--c-surface-canvas); }
.viewseg .viewbtn:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: -3px; }
/* Pillen in Website-Größe (wie .pk-chip der Kategorieseiten): PT Sans 15, normal, 8/12 Innenabstand. */
.sfb__pill, .seg__btn { min-height: 36px; padding: var(--sp-2) var(--sp-3); font-family: 'PT Sans', sans-serif; font-weight: var(--fw-regular); font-size: var(--text-15); line-height: 1.2; }
.sfb__pill.is-on, .seg__btn.is-on { font-weight: var(--fw-regular); }
.sfb__pills { gap: var(--sp-2); }
.tt__sort { flex: 0 0 13rem; }
@media (max-width: 1023px) {
  .sfb .ctl, .tt__tools .ctl { height: 44px; min-height: 44px; font-size: var(--text-base); }
  .viewseg .viewbtn { width: 44px; height: 42px; }
  .sfb__pill, .seg__btn { min-height: 44px; }
}
@media (max-width: 639px) {
  .sfb { padding: var(--sp-3); }
  .sfb__row { flex-wrap: wrap; }
  .sfb__search { flex: 1 1 100%; min-width: 0; }
  .sfb__sort { flex: 1 1 auto; min-width: 0; }
  .tt__sort { flex: 1 1 auto; }
  .sfb__pills { margin: 0 calc(var(--sp-3) * -1); padding: 2px var(--sp-3) var(--sp-1); }
}

/* Letzte Runde: Kennzahlen ohne Leerraum unten (Abstand oben = unten), Teaser mit Icon und gleichem Aufbau. */
.kpi, .kpis--sm .kpi { min-height: 0; justify-content: center; }
.kpi { padding: var(--sp-4) var(--sp-5); }
.kpis--sm .kpi { padding: var(--sp-3) var(--sp-4); }
@media (max-width: 639px) { .kpi, .kpis--sm .kpi { padding: var(--sp-3); } }
.teaser { position: relative; }
.teaser--x .teaser__head { padding-right: var(--sp-7); }
.teaser__head { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); min-height: 0; }
.teaser__ico { width: 22px; height: 22px; flex: 0 0 22px; color: var(--c-brand-dark); }
.teaser__x { position: absolute; top: var(--sp-2); right: var(--sp-2); margin: 0; }

/* Mobil-Nacharbeit 03.11.2026: in einer Kartenreihe EINE Zahlengröße. Übersicht 48 (Desktop) /
   28 (mobil), Meine Tools 28 (überall). Mobil 2+1: Anzahl über die volle Breite, die beiden
   Kostenkarten nebeneinander — gleiche Typo in beiden Bereichen, kein Schrumpfen je Karte.
   „ca." sitzt auf der Grundlinie der Zahl. */
.kpi__approx { vertical-align: baseline; }
.kpis--sm .kpi__value { font-size: var(--text-4xl); }
@media (max-width: 639px) {
  .kpis, .kpis--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .kpis > .kpi:first-child, .kpis--sm > .kpi:first-child { grid-column: 1 / -1; }
  .kpi__value, .kpis > .kpi:first-child .kpi__value,
  .kpis--sm .kpi__value, .kpis--sm > .kpi:first-child .kpi__value { font-size: var(--text-4xl); }
  .kpi__label, .kpis--sm .kpi__label, .kpi__empty-text, .kpis--sm .kpi__empty-text { font-size: var(--text-15); }
  .kpis--sm .kpi__approx, .kpi__approx { display: inline; font-size: var(--text-15); }
  .kpi, .kpis--sm .kpi { padding: var(--sp-3) var(--sp-4); align-items: flex-start; }
}
/* Zahlen oben bündig, damit sie in einer Reihe auf derselben Linie stehen (unterschiedlich lange
   Beschriftungen verschoben sie vorher beim vertikalen Zentrieren). */
.kpi, .kpis--sm .kpi { justify-content: flex-start; }
/* Sehr große Beträge (z. B. 14.814.815 €) dürfen mobil umbrechen statt die Seite zu verbreitern. */
@media (max-width: 639px) { .kpi { min-width: 0; } .kpi__value { white-space: normal; overflow-wrap: anywhere; } }