/* ═══════════════════════════════════════════════════════════════════════════
   NestSuite — geteilte Bedien-Elemente
   ═══════════════════════════════════════════════════════════════════════════

   ZWEITE geteilte CSS-Datei der Suite, neben shared/tokens.css. Sie enthält
   die wiederkehrenden Dinge, die man ANFASST — Symbole und Steuerelemente:

     .info-hint       Informations-Knopf ⓘ neben Überschriften und Labels
     .global-tooltip  der Text, der dazu erscheint
     .row-remove      Löschen-Knopf (Mülleimer) in Listenzeilen
     summary::after   Auf-/Zuklapp-Symbol (+ / ×) bei <details>
     .primary-btn / .secondary-btn / .file-label / select   Knöpfe und Felder

   (Der Dateiname sagt noch "icons" — sie ist beim Ergänzen der Steuerelemente
   bewusst nicht umbenannt worden, weil sie in sieben HTML-Dateien und im
   Prüfskript verlinkt ist und ein Umbenennen nur Bewegung ohne Nutzen wäre.)

   WARUM DIESE AUSNAHME VON DER DUPLIZIERUNGS-REGEL:
   Komponenten sind in dieser Suite bewusst dupliziert, weil ein früherer
   Versuch mit einem gemeinsamen Voll-Stylesheet beim Ändern einer App die
   anderen zerschossen hat (siehe shared/tokens.css). Diese hier sind der
   begründete Sonderfall:

   - Sie sind winzig und layout-neutral. Keine dieser Regeln beeinflusst
     Frames, Raster oder Seitenaufbau — der Fehlerfall von damals (ein
     geteiltes Voll-Stylesheet, das .canvas-frame mitverändert hat) kann
     hier schlicht nicht auftreten.
   - Sie sind genau deshalb auseinandergelaufen. Am 26.07.2026 stand die
     Grundregel für .info-hint NUR in estate/css/calculator.css. Der Hub,
     DepotCashNest und InOutNest hatten lediglich die :hover-Zeile geerbt —
     also Farbe für einen Kreis, den es dort nie gab. In DepotCashNest stand
     dadurch ein nacktes „i" hinter der Überschrift „Werteentwicklung", ohne
     Kreis, ohne erkennbare Klickbarkeit. Genau der Effekt, den man bei drei
     Kopien derselben Regel erwarten muss.

   EINBINDEN (in jeder HTML-Datei, nach tokens.css, vor dem App-Stylesheet):
     <link rel="stylesheet" href="../shared/tokens.css" />
     <link rel="stylesheet" href="../shared/ui-icons.css" />
     <link rel="stylesheet" href="css/styles.css" />

   Dazu gehört shared/tooltip.js — ohne das Skript zeigt .info-hint keinen
   Text an. tools/check-tokens.mjs prüft beides für jede HTML-Datei.

   Stand: 26.07.2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ⓘ Informations-Knopf ──────────────────────────────────────────────────
   Der Text steht im Attribut data-tip (nicht title): shared/tooltip.js hängt
   ein einziges Tooltip an <body> mit position:fixed. Grund ist ein realer
   Fehler — ein Popover innerhalb der Karte wurde von deren overflow am
   Kartenrand abgeschnitten, und je nach Scrollposition war die Erklärung
   halb unsichtbar. Ein Element außerhalb aller clippenden Vorfahren
   umgeht das vollständig.

   cursor:help statt pointer: es ist kein Knopf, der etwas auslöst, sondern
   eine Erklärung, die beim Überfahren erscheint. */
.info-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--label-zeile);        /* eine Quelle, siehe shared/tokens.css */
  height: var(--label-zeile);
  flex-shrink: 0;
  border-radius: var(--r-pill, 999px);
  /* Neutrales Petrol-Chrome statt warmer Kartenlinie; gilt auch in der
     weißen Sidebar und bleibt unabhängig von der wählbaren Innenkarte. */
  background: color-mix(in srgb, var(--sidebar-flaeche) 90%, var(--scrollbar-chrome-ton));
  color: var(--scrollbar-chrome-ton);
  font-family: var(--font-body);
  font-size: var(--fs-pille);
  font-style: normal;
  font-weight: var(--fw-fett);
  line-height: var(--lh-zahl);
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: var(--sp-2);
  transition: background var(--transition, .15s), color var(--transition, .15s);
}
.info-hint:hover,
.info-hint:focus {
  background:var(--scrollbar-chrome-ton);
  color: #fff;
  outline: none;
}
html[data-palette="poster_dunkel"] .info-hint {
  background: var(--paper);
  color: #E8F2EF;
}
html[data-palette="poster_dunkel"] .info-hint:hover,
html[data-palette="poster_dunkel"] .info-hint:focus {
  background: var(--popup-flaeche);
  color: #fff;
}
/* In Label-Zeilen (KPI-Kacheln) sitzt das Symbol direkt hinter dem Text und
   braucht keinen zusätzlichen Abstand — sonst rutscht es in die zweite Zeile
   und schiebt die Zahl darunter nach unten. */
.portfolio-strip .info-hint { margin-left: 0; }

/* ═══ BEREICHSSCHALTER · BESTAND / VORHABEN / BEIDES ══════════════════════
   Umgezogen am 04.09.2026 aus estate/css/styles.css, wo er als
   #portfolioFilterSelect an einer ID hing. Die Wertentwicklung hat denselben
   Schalter und war grau geblieben — eine ID reicht nichts weiter.

   GELB, weil er die komplette darunterliegende Ansicht verändert. Dieselbe
   Geste wie bei `.project-kopfzeile select`. Ein normaler .secondary-btn
   sähe aus wie jeder andere Knopf und wäre damit still.

   `background-color` statt `background`: die Basisregel setzt den Pfeil als
   background-image, eine Kurzform würde ihn löschen.

   KLEINER als ein Knopf (26.08.2026, MWM: "mach ihn noch n bisschen kleiner,
   dass er proportional so passt wie die anderen"). Ein Filter sagt, WAS man
   gerade sieht — er ist kein Aufruf zu handeln.

   Wer ihn einbaut, schreibt nur `<select class="bereich-schalter">` und ruft
   verdrahteBereich() aus shared/bereich.js. Die Optionen füllt das Modul,
   damit keine Seite eine vierte Schreibweise erfindet. */
.bereich-schalter {
  background-color: var(--highlight-gelb);
  border-color: var(--highlight-gelb-rand);
  font-weight: var(--fw-halbfett);
  height: var(--knopfhoehe-tabelle);
  padding-top: 0; padding-bottom: 0;
  font-size: var(--fs-fuss);
  cursor: pointer;
}

/* Das schwebende Tooltip selbst, erzeugt von shared/tooltip.js.
   Die farbige Akzentkante links ist am 26.07.2026 entfallen (Wunsch MWM):
   eine einzelne ruhige Umrandung rundum, gleichmäßig gerundet. Der farbige
   Balken hat das Tooltip wie ein Warnhinweis aussehen lassen, obwohl es nur
   erklärt.

   DUNKEL SEIT 26.08.2026 (MWM). Vorher hell (--paper auf --ink) — daneben
   zeichnete Chart.js in denselben Diagrammen sein eigenes dunkles Feld.
   Zwei Pop-up-Formen auf einer Seite, je nachdem ob man ueber einen i-Kreis
   oder ueber eine Kurve fuhr.

   KEIN Wert steht mehr hier: alles kommt aus den --popup-* Tokens in
   shared/tokens.css, aus denen sich auch shared/popup.js fuer Chart.js
   bedient. Wer die Form aendern will, aendert sie dort — einmal, fuer
   beide. Gate 20 in tools/check-tokens.mjs haelt das fest. */
/* ─── Die Rechnung in der Sprechblase (01.09.2026) ──────────────────────────
   Aufstellung unter dem Erklaertext: Posten links, Betrag rechts, unter dem
   letzten Posten ein Strich und darunter die Summe. Gefuellt aus
   data-rechnung (shared/tooltip.js), Aufbau dort begruendet.

   Zwei Spalten als Grid, die rechte auf Textbreite: so fluchten die Betraege
   untereinander, auch wenn die Bezeichnungen verschieden lang sind. In
   Proportionalschrift ist das der einzige Weg -- Leerzeichen zum Auffuellen
   ergeben eine Treppe.

   tabular-nums, damit 1.234 und 554 dieselbe Ziffernbreite haben. Ohne das
   wandert das Komma je nach Ziffer um ein bis zwei Pixel, und eine Spalte,
   die fast fluchtet, sieht schlechter aus als eine, die es gar nicht tut. */
/* Die Formel zwischen Erklaertext und Rechnung (02.09.2026). Kursiv und
   gedaempft, weil sie eine andere Sorte Aussage ist als der Text darueber:
   der sagt, was die Zahl bedeutet, die Formel sagt, wie sie entsteht.
   Kein eigener Rahmen -- sie gehoert zum Text, nicht zur Tabelle darunter. */
.tip-formel {
  margin-top: var(--sp-2);
  font-style: italic;
  color: var(--popup-gedaempft, #b8b2a8);
  line-height: 1.45;
}

/* ═══ DIE REGEL FUER JEDE KACHEL MIT EINER ZAHL (03.09.2026) ════════════════
   MWM: "findest du einen numerischen wert, zeige im jeweiligen popup wie
   sich dieser wert als rechnung ergibt, auch hierfuer sollte es ein
   anweisung im css geben"

   Die Sprechblase hat drei Ebenen, von grob nach fein. Sie erscheinen in
   dieser Reihenfolge und in dieser Gestalt:

       WAS      der Erklaertext    aufrecht, volle Textfarbe
       WIE      .tip-formel        kursiv, gedaempft, kein Rahmen
       WIEVIEL  .tip-rechnung      Tabelle mit Strich und Summenzeile

   Die Abstufung ist die Aussage: was die Zahl BEDEUTET liest man immer, wie
   sie ENTSTEHT nur wenn man will, und WIEVIEL jeder Posten beitraegt erst
   danach. Drei gleich laute Bloecke waeren eine Wand.

   NICHT JEDE ZAHL BEKOMMT EINE RECHNUNG. Ein Kaufpreis stand in einem
   Vertrag, ein Marktwert ist geschaetzt -- dort behauptet ein Summenstrich
   eine Herleitung, die es nicht gibt. Die vollstaendige Regel mit den drei
   Wertsorten steht in shared/rechnung.js; sie gilt fuer den Inhalt, dieser
   Block hier fuer die Form.
   ══════════════════════════════════════════════════════════════════════════ */
.tip-rechnung {
  margin-top: var(--sp-3);
  padding-top: 9px;
  border-top: 1px solid var(--popup-linie);
  font-variant-numeric: tabular-nums;
}
.tip-rechnung-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  padding: 2px 0;
}
/* Die Summenzeile traegt den Strich UEBER sich: er gehoert zur Rechnung,
   nicht unter die letzte Position. Fett nur hier -- in einer Aufstellung,
   in der alles Gewicht hat, hat nichts welches. */
.tip-rechnung-zeile.ist-summe {
  margin-top: var(--sp-1);
  padding-top: var(--sp-innen);
  border-top: 1px solid var(--popup-linie);
  font-weight: var(--fw-fett);
}

/* ═══ BREITE UND ABSAETZE (16.09.2026, MWM: "schau, dass die nicht
   gequetscht sind") ══════════════════════════════════════════════════════

   ZWEI MESSUNGEN, zwei Korrekturen:

   1. white-space: pre-line. Der Text kommt ueber textContent in die
      Sprechblase (shared/tooltip.js, bewusst nicht innerHTML: ein Kontoname
      mit spitzer Klammer soll eine spitze Klammer bleiben). Ohne pre-line
      kollabiert jeder Zeilenumbruch im data-tip zu einem Leerzeichen --
      dreiteilige Erklaerungen (Was · Wie · Was bedeutet das) standen als
      eine Wand. pre-line laesst Umbrueche gelten und kollabiert trotzdem
      Leerzeichen, aendert an bestehenden Tooltips ohne \n also nichts.

   2. 340 → 460 px. Bei --fs-fuss (10,5 px) fasst eine 340-px-Zeile rund
      55 Zeichen; ein Tooltip mit 800 Zeichen wurde damit 15 Zeilen hoch und
      stand als schmale Saeule neben der Zahl, die er erklaeren soll.
      460 px sind rund 75 Zeichen je Zeile -- unter der Lesbarkeitsgrenze
      (Faustregel 45–90) und flach genug, um daneben zu passen. */
.global-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: 460px;
  white-space: pre-line;
  padding: var(--popup-polster);
  border-radius: var(--popup-radius);
  border:1px solid var(--popup-linie);
  background:var(--popup-flaeche);
  color: var(--popup-schrift);
  font-family: var(--font-body);
  font-size: var(--fs-fuss);
  font-weight: var(--fw-mittel);
  line-height: 1.5;
  box-shadow: var(--popup-schatten);
  pointer-events: none;
  display: none;
}

/* ─── 🗑 Löschen-Knopf ──────────────────────────────────────────────────────
   Immer ein Mülleimer-Umriss, nie ein ✕. Das ✕ war in InOutNest im Einsatz
   und wurde am 26.07.2026 ersetzt: ein Kreuz heißt in derselben Oberfläche
   an anderer Stelle „schließen", der Mülleimer heißt eindeutig „löschen".
   Das SVG liefert js/ui-icons.js, damit auch die Form nur einmal existiert. */
.row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1);
  border:0;
  background:transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r-bedien, 10px);
  transition: color var(--transition, .15s), background var(--transition, .15s);
}
.row-remove:hover { color: var(--bad); background:var(--hover-flaeche-warn); }
.row-remove svg { width: 16px; height: 16px; display: block; }

/* ─── + / × Auf- und Zuklappen ──────────────────────────────────────────────
   Ein Plus im weichen Kreis, das beim Öffnen um 45° zum × dreht. Bewusst kein
   Pfeil oder Dreieck: die Drehung zeigt den Zustandswechsel als Bewegung und
   braucht kein zweites Symbol. margin-left:auto schiebt es ans Zeilenende,
   ohne dass der Titel per space-between auseinandergezogen wird — das war
   nötig, sobald ein Summary mehr als ein Element enthält (Titel + ⓘ). */
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill, 999px);
  display: grid;
  place-items: center;
  background:var(--soft);
  font-family: var(--font-body);
  font-weight: var(--fw-fett);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .2s, background var(--transition, .15s);
}
summary:hover::after { background:rgba(var(--accent-rgb), var(--wash-mittel)); }
details[open] > summary::after { transform: rotate(45deg); }

/* ─── CHEVRON VORN STATT PLUS HINTEN, bei Karten ────────────────────────────
   (01.09.2026, MWM: Toggles in Depot und InOut "wie bei Real Estate")

   Diese Regel stand seit dem 31.08.2026 in estate/css/calculator.css und galt
   nur für zwei Seiten. Der Kommentar dort sagte selbst, ein suiteweiter
   Wechsel sei "eine eigene Entscheidung, keine Nebenwirkung" — das ist er
   jetzt, weil Depot und InOut dieselbe Geste bekommen. Eine Kopie in drei
   Modul-Stylesheets wäre der Weg, den .back-link schon einmal gegangen ist
   (siehe unten): dreimal wörtlich, dann zusammengefasst, dann weg. Diesmal
   direkt hier.

   WARUM VORN. Die Klappzeilen innerhalb einer Karte (.klapp-feld) tragen von
   jeher ein Dreieck links. Zwei Klappgesten auf einer Seite, eine mit Zeichen
   links und eine mit Zeichen rechts, sind zwei Bauformen für dieselbe Sache.

   WAS DAS PLUS BEHÄLT. Alles, was keine .card ist: die drei <details> ohne
   Klasse (daten.html, estate/project.html, estate/js/portfolio.js) sowie
   .total-card, .full und .field. Sie stehen nicht in einer Kartenspalte und
   sind kein Abschnitt — dort ist das Plus keine zweite Bauform, sondern die
   einzige. Wer das ändern will, ändert es hier und sieht sofort, wen es
   trifft. */
.card > summary::after,
.canvas-frame > summary::after { content: none; }
.card > summary::before,
.canvas-frame > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--sp-3);
  color: var(--muted);
  font-size: .8em;
  transition: transform .15s ease;
}
.card[open] > summary::before,
.canvas-frame[open] > summary::before { transform: rotate(90deg); }
.card > summary:hover::before { color: var(--ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   Bedien-Elemente: Knöpfe, Auswahlfelder, Eingaben
   ═══════════════════════════════════════════════════════════════════════════

   GRUNDREGEL: Alles, was man anfassen kann, ist RUND — Radius aus --r-bedien
   (14 px). Kein eckiges Bedienelement in dieser Suite. Ein <select> ohne
   eigene Regeln fällt auf das native Aussehen des Browsers zurück, und das
   ist eckig, systemschriftig und passt zu nichts.

   Genau das war am 26.07.2026 der Fall: .secondary-btn war in EstateNest,
   DepotCashNest und InOutNest definiert — im Hub aber gar nicht. Das
   Ist/Soll-Auswahlfeld auf dem Main Dashboard trug zwar die Klasse, bekam
   davon aber keinerlei Stil und stand als graues Systemfeld mit eckigen
   Kanten zwischen lauter runden Elementen. Dieselbe Fehlerart wie beim
   Info-Knopf: eine Regel, die in drei von vier Dateien stand.

   Estate und Depot hatten wortgleiche Definitionen; die stehen jetzt hier.
   tools/check-tokens.mjs verhindert, dass sie lokal wieder auftauchen. */

/* ═══ HOEHE AUS DEM TOKEN, NICHT AUS DEM POLSTER (16.09.2026) ═══════════
   MWM: "miss den Zuruecksetzen-Knopf aus, der ist zu hoch."

   Gemessen: 12 px Polster oben und unten, dazu eine Zeile --fs-xs (~15 px)
   und 2 px Rahmen — macht 41 px. Der Token --knopfhoehe sagt 32 px, und
   bei tokens.css steht dazu woertlich "sondern var(--knopfhoehe),
   check-tokens Punkt 18 weist alles andere ab".

   Die Bauform hielt sich also nicht an ihre eigene Vorgabe. Aufgefallen ist
   es erst, als ein Knopf neben Eingabefeldern stand: dort waren beide etwa
   gleich hoch, und ein Knopf, der so schwer wiegt wie ein Eingabefeld,
   sieht aus wie eins.

   Andere Knoepfe der Suite halten den Token seit jeher ein (.sm-zu,
   .side-menu-toggle, kopfleiste). Diese drei waren die Ausreisser.

   REICHWEITE: alle .primary-btn, .secondary-btn und .file-label auf allen
   Seiten werden 9 px flacher. Das ist die Absicht — die Vorgabe galt schon
   vorher, sie wurde nur nicht befolgt. */
.primary-btn,
.secondary-btn,
.file-label {
  border-radius: var(--r-bedien, 10px);
  height: var(--knopfhoehe);
  padding: 0 var(--sp-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border:1px solid var(--karten-linie);
  background:var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  /* 500 statt 700 (25.08.2026, MWM: "die Schrift sieht fett aus, nicht in
     Fett setzen"). Ein Knopf ist eine Handlungsmoeglichkeit, keine Aussage --
     er soll auffindbar sein, nicht laut. Die Umrandung und die Flaeche sagen
     schon, dass man draufdruecken kann; der Fettdruck sagte es ein drittes
     Mal.
     Nicht duenner als 500: die Schnitte darunter stehen nur zur Verfuegung,
     wenn das Betriebssystem sie hat -- Inter wird in dieser Suite NICHT als
     Webfont geladen, sondern nur als Wunsch vor system-ui. Ein font-weight
     von 300 saehe auf einem Rechner elegant aus und auf dem naechsten
     identisch mit 400. */
  font-weight: var(--fw-mittel);
  text-decoration: none;
  transition: background var(--transition, .15s), border-color var(--transition, .15s),
              color var(--transition, .15s), opacity var(--transition, .15s);
}
/* var(--flaeche-invers) statt var(--ink) (02.08.2026, dunkle Palette): --ink
   ist jetzt selbst palettenabhängig und wird in "Poster (dunkel)" hell --
   ein Knopf, der seine dunkle Füllung von --ink geliehen hätte, würde dort
   unlesbar (heller Knopf, weißer Text). --flaeche-invers bleibt bewusst
   immer dunkel, siehe shared/tokens.css. */
.primary-btn { background:var(--flaeche-invers); color: var(--flaeche-invers-text); border-color:var(--flaeche-invers); padding: var(--sp-4) var(--sp-5); }
.primary-btn:hover { opacity: .85; }
.secondary-btn:hover,
.file-label:hover { border-color:var(--accent); color: var(--accent); }
.file-label input { display: none; }

/* In Karten-Kopfzeilen sitzen Knöpfe und Auswahlfelder nebeneinander und
   müssen exakt gleich hoch sein — sonst tanzt die Zeile.

   .primary-btn fehlte hier bis zum 25.08.2026, und .sort-select weiter unten
   setzte einen eigenen Wert. Deshalb tanzte sie trotzdem. Jetzt gilt die
   Regel für ALLE vier Bauformen und die Höhe kommt aus einem Token. */
.canvas-actions .primary-btn,
.canvas-actions .secondary-btn,
.canvas-actions .file-label,
.canvas-actions select.secondary-btn,
.canvas-actions .sort-select,
.canvas-actions .sort-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--knopfhoehe);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  box-sizing: border-box;
}
/* Das Auswahlfeld braucht rechts Platz für den Pfeil, die Hülle drumherum
   gar keinen — sie ist nur ein <label> um das <select>. */
.canvas-actions .sort-label { padding: 0; border:none; }

/* KLEINER IM TABELLENKOPF (26.08.2026, MWM). Gilt nur, wo die Werkzeugleiste
   zu einer Tabelle gehoert -- erkennbar an .section-heading, das direkt vor
   einer .entity-list-wrap steht. Die Leisten im Seitenkopf bleiben bei
   --knopfhoehe.

   :has() statt einer eigenen Klasse: die Zugehoerigkeit steht schon im
   Markup, sie muss nicht zusaetzlich behauptet werden. Wer eine Tabelle
   ergaenzt, bekommt die kleineren Knoepfe damit automatisch -- und wer sie
   entfernt, verliert sie wieder. Eine Klasse haette man dabei vergessen.

   NACHGEBESSERT 26.08.2026 (MWM: "beim monatlichen Ansparen ist der
   Plus-Knopf noch genauso gross"). `+ .entity-list-wrap` verlangt, dass die
   Tabelle das UNMITTELBAR naechste Geschwister der Kopfzeile ist. Beim
   Sparplan stehen Diagramm und Fussnote dazwischen -- die Regel griff dort
   nicht. `~` statt `+`: irgendwo NACH der Kopfzeile im selben Block genuegt.

   Die Lehre ist aelter als dieser Fall: ein Selektor, der eine Reihenfolge
   voraussetzt, gilt genau so lange, wie niemand etwas dazwischenschiebt. */
.section-heading:has(~ .entity-list-wrap) .canvas-actions .primary-btn,
.section-heading:has(~ .entity-list-wrap) .canvas-actions .secondary-btn,
.section-heading:has(~ .entity-list-wrap) .canvas-actions .file-label,
.section-heading:has(~ .entity-list-wrap) .canvas-actions select.secondary-btn,
.section-heading:has(~ .entity-list-wrap) .canvas-actions .sort-select,
.section-heading:has(~ .entity-list-wrap) .canvas-actions .sort-label {
  height: var(--knopfhoehe-tabelle);
  font-size: var(--fs-fuss);
  padding: 0 9px;
}
.section-heading:has(~ .entity-list-wrap) .canvas-actions select.secondary-btn,
.section-heading:has(~ .entity-list-wrap) .canvas-actions .sort-select {
  padding: 0 var(--sp-6) 0 9px;
  background-size: 9px;
}
.section-heading:has(~ .entity-list-wrap) .canvas-actions .knopf-plus {
  width: var(--knopfhoehe-tabelle); padding: 0;
}
.canvas-actions select.secondary-btn,
.canvas-actions .sort-select { padding: 0 30px 0 11px; }

/* Auswahlfelder. appearance:none nimmt dem Browser das eckige Systemaussehen;
   der Pfeil wird als Hintergrundbild nachgereicht, damit er zur Schrift passt
   und nicht zum Betriebssystem. padding-right hält Text und Pfeil auseinander. */
select.secondary-btn,
.sort-select {
  appearance: none;
  -webkit-appearance: none;
  /* 32 statt 40 px (25.08.2026, MWM: "sehr viel Space oben in der Leiste").
     Die 40 stammen aus der Zeit vor der 13-px-Basis — ein Knopf, der bei
     16 px Grundschrift richtig proportioniert war, wirkt bei 13 px klobig.
     Die SCHRIFT bleibt unveraendert (.85rem), nur der Kasten drumherum
     schrumpft: Martin wollte ausdruecklich keine kleinere Schrift. */
  height: var(--knopfhoehe);
  padding: 0 30px 0 11px;
  border-radius: var(--r-bedien, 10px);
  border:1px solid var(--karten-linie);
  background-color:var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23747474' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-mittel);   /* wie die Knoepfe daneben (25.08.2026) */
  cursor: pointer;
  transition: border-color var(--transition, .15s), color var(--transition, .15s);
}
/* :hover und :focus-visible der Auswahlfelder stehen seit 05.09.2026 in
   shared/global.css, Abschnitt "WIE ETWAS AUF DEN ZEIGER ANTWORTET" --
   check-tokens hat sie hier gemeldet, als der Fokusring zum Token wurde. */


/* ─── Einstellungen im Seitenmenü ────────────────────────────────────────────
   Der Block ist ein Abschnitt wie Module und Inhalt: Label, Zeile, Symbol-
   spalte kommen alle aus shared/seitenmenu.css. Hier steht nur, was diesen
   Abschnitt von den anderen unterscheidet — das Auswahlfeld.

   Warum das überhaupt einen eigenen Kommentar braucht: der Block ist der
   einzige Menüpunkt, der nicht bloß verlinkt, sondern etwas verändert. Er darf
   deshalb ein Bedienelement enthalten, muss sich aber in derselben Textspalte
   und mit demselben Strichstil bewegen wie die Links darüber — sonst zerfällt
   die Spalte an genau der Stelle, an der man am wenigsten damit rechnet
   (Korrektur 26.07.2026: das Zahnrad war stilistisch ein Fremdkörper). */
/* Der Kopf ist seit 26.07.2026 ein LINK auf /farben.html — dort steht der
   ganze Farbcode. Vorher war er reine Beschriftung über dem Auswahlfeld und
   damit ein toter Punkt in einer Liste, in der alles andere irgendwohin führt. */
.einstellungen-kopf { text-decoration: none; color: inherit; }

.einstellungen-feld {
  display: flex; flex-direction: column; gap: 5px;
  /* Auf der Textkante der Menüzeilen, nicht am Containerrand — dieselbe
     Rechnung wie bei .sm-sub und .sm-label. */
  padding: var(--sp-innen) var(--sp-zelle) 0 calc(10px + var(--sm-icon-spalte, 30px));
}
.einstellungen-feld-label {
  font-size: var(--fs-mini); font-weight: var(--fw-fett);
  letter-spacing: var(--ls-versal-eng);
  color: var(--muted);
}

/* Das Feld trägt sein eigenes Symbol INNEN links. Ein <select> kann kein SVG
   enthalten, also liegt das Zeichen darüber und das Feld bekommt links Platz.
   pointer-events:none, sonst frisst das Symbol den Klick aufs Feld. */
.einstellungen-feld-wrap { position: relative; display: block; }
.einstellungen-feld-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--muted);
  pointer-events: none;
  display: block;
}
.einstellungen-feld-icon svg { width: 16px; height: 16px; display: block; }
.einstellungen-feld select {
  width: 100%;
  height: 34px;
  font-size: var(--fs-fuss); font-weight: var(--fw-halbfett);
  padding-left: 34px;               /* Platz für das Symbol */
  border-radius: var(--r-pill, 999px);
}
.einstellungen-feld select:hover ~ .einstellungen-feld-icon,
.einstellungen-feld select:focus-visible ~ .einstellungen-feld-icon { color: var(--accent); }

/* ─── Stand-Zeile: wie aktuell sind die Zahlen ────────────────────────────────
   Absichtlich sehr klein und grau (Wunsch 26.07.2026: "ganz, ganz klein").
   Sie ist eine Fußnote zum Vertrauen in die Zahlen, keine Kennzahl — sobald
   sie größer wird, konkurriert sie mit dem, worüber sie etwas aussagt. */
.stand-zeile {
  display: block;
  font-size: var(--fs-mini);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-versal-eng);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stand-mehrfach {
  display: flex; flex-wrap: wrap; gap: 2px var(--sp-4);
  margin-top: var(--sp-2);
}
/* Nichts gespeichert: nicht rot einfärben. Das ist kein Fehler, sondern der
   Normalzustand einer frischen Installation. */
.stand-zeile[data-stand="leer"] { font-style: italic; }

/* ─── Quellverweis: "diesen Wert bearbeitest du dort" ─────────────────────────
   Steht neben einem nur angezeigten Wert. Klein und grau im Ruhezustand, damit
   er die Zahl nicht überstrahlt — aber ein echtes Ziel, kein Hinweistext. */
/* Quadratisches Symbol statt Textmarke (25.08.2026). Es sitzt oben rechts in
   der Karte, wo auf den Modulkarten der Oeffnen-Pfeil steht -- dieselbe Stelle
   fuer dieselbe Aussage. Vorher lief es als drittes Element in der Fussnote
   mit und schob sie in eine zweite Zeile. */
.quell-verweis {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--muted); text-decoration: none;
  border-radius: var(--r-bild);
  border:1px solid transparent;
  transition: color .13s, border-color .13s, background .13s;
}

.quell-verweis svg { width: 12px; height: 12px; flex-shrink: 0; }
.quell-verweis:hover, .quell-verweis:focus-visible {
  color: var(--accent);
  border-color:rgba(var(--accent-rgb), var(--wash-voll));
  background:rgba(var(--accent-rgb), var(--wash-leicht));
  outline: none;
}

/* Ziel des Sprungs: leuchtet kurz auf. Die Animation läuft EINMAL — ein
   dauerhaftes Pulsieren würde als Statusmarkierung gelesen ("hier ist was
   nicht in Ordnung") statt als "hier war der Sprung hin". */
.quell-ziel {
  animation: quellZiel 1.6s ease-out 2;
  border-radius:var(--r-bild);
}
@keyframes quellZiel {
  0%   { background:rgba(var(--accent-rgb), var(--wash-kraeftig)); }
  100% { background:transparent; }
}

/* ─── Nur-Lese-Wert aus einem anderen Modul ───────────────────────────────── */
.fremdwert {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
.fremdwert-quelle {
  font-size: var(--fs-mini); font-weight: var(--fw-halbfett); color: var(--muted);

/* Datei bereinigt (03.08.2026, Hardcoding-Audit): stand vorher zweimal
   hintereinander im selben File -- alles zwischen der Kopfzeile "NestSuite —
   geteilte Bedien-Elemente" und hier war 355 Zeilen lang exakt dupliziert.
   Wer eine Regel geändert hat, hat vermutlich nur eine der beiden Kopien
   getroffen -- stille Drift. Jetzt nur noch einmal vorhanden. */
}

/* ─── Karten auf- und zuklappen ──────────────────────────────────────────────
   Kam am 26.07.2026 aus inout/css/styles.css hierher: die Knöpfe stehen auch
   im Hub und auf der Entwicklungsseite, die Regeln standen aber nur in einem
   der vier Stylesheets. Verdrahtung in shared/klappen.js.

   ═══ HIER STAND EINE REGEL, DIE SEIT DEM 31.08.2026 NICHT MEHR GALT ═══════
   Wörtlich: "Neue Aufklapp-Elemente MÜSSEN dieses Muster verwenden, keine
   Chevrons oder Dreiecke." Am 31.08.2026 hat Estate auf Chevron umgestellt
   (MWM: "hinten dieses hässliche Plus wegmachen") — die Regel hier wurde
   dabei nicht nachgezogen und behauptete danach das Gegenteil des Codes.

   Eine Regel im Kommentar, die der Code nicht mehr einhält, ist schlimmer
   als keine: wer sie liest, hält sie für gültig und baut daneben.

   ═══ WAS JETZT GILT ══════════════════════════════════════════════════════
   Chevron VOR der Überschrift, suiteweit. Dieselbe Geste wie bei
   .card > summary (oben in dieser Datei) und wie bei den Klappzeilen
   innerhalb der Karten (.klapp-feld in estate/css/calculator.css).

   Warum vorn: das Klappzeichen gehört an den Auslöser. Bei einer 1200 px
   breiten Karte stand das Plus fünfzehn Zentimeter von der Überschrift
   entfernt, die man anklickt.

   Der Knopf trägt das Zeichen als ::before, nicht als Textinhalt — im HTML
   steht weiter "+", damit ein Browser ohne dieses Stylesheet nicht einen
   leeren Knopf zeigt. Der Text wird per font-size:0 unsichtbar.

   Betroffen sind vier Seiten: entwicklung.html, daten.html, depot/index.html
   und inout/index.html. Estate benutzt details/summary und ist davon nicht
   berührt — dort greift die .card-Regel weiter oben. */
.frame-collapse-btn {
  width: 22px; height: 22px;
  border: none; border-radius: var(--r-kreis);
  background: none;
  display: grid; place-items: center;
  color: var(--muted);
  font-size: 0;                      /* versteckt das "+" aus dem HTML */
  padding: 0; cursor: pointer; line-height: var(--lh-zahl);
  transition: color .15s;
}
.frame-collapse-btn::before {
  content: "▸";
  font-family: var(--font-body);
  /* RUECKFALLWERT IST HIER PFLICHT, NICHT VORSICHT (01.09.2026).
     Hier stand var(--fs-klein) -- ein Token, das es nicht gibt. Der Wert war
     damit ungueltig, font-size fiel auf den geerbten zurueck, und der ist am
     Knopf font-size:0. Ergebnis: ein Dreieck, das Platz einnimmt und nichts
     zeigt. MWM: "das Toggle-Symbol ist unsichtbar."

     Die Lehre gilt ueber diesen Fall hinaus: sobald ein Elternelement
     font-size:0 traegt, macht ein vertippter Token das Kind UNSICHTBAR statt
     falsch. Ein falscher Wert faellt auf, ein fehlender nicht. Deshalb der
     zweite Wert im var() -- er faengt genau diesen Fall ab.

     check-tokens.mjs hat das nicht gefunden: es prueft, OB ein Wert aus
     einem Token kommt, nicht OB der Token existiert. Diese Luecke schliesst
     seit dem 01.09.2026 die Pruefung "unbekannte Tokens" ebendort. */
  font-size: var(--fs-sm, .82rem);
  line-height: var(--lh-zahl);
  transition: transform .15s ease;
}
.frame-collapse-btn:hover { color: var(--ink); }
/* Aufgeklappt zeigt das Dreieck nach unten. Gedreht wird das ::before, nicht
   der Knopf: der Knopf ist die Trefferfläche und soll sich nicht mitdrehen. */
.master-frame:not(.collapsed) .frame-collapse-btn::before,
.canvas-frame:not(.collapsed) .frame-collapse-btn::before { transform: rotate(90deg); }
.master-frame.collapsed > *:not(.section-heading),
.canvas-frame.collapsed > *:not(.section-heading) { display: none; }
.master-frame.collapsed, .canvas-frame.collapsed { margin-bottom: var(--sp-5); }
/* Der Knopf steht als erstes Kind der Kopfzeile, vor dem Titelblock. Der
   Abstand ist derselbe wie beim Chevron in .card > summary (10 px), damit
   beide Klappgesten auf einer Seite gleich weit vom Wort entfernt sind. */
.section-heading > .frame-collapse-btn {
  margin-right: var(--sp-3);
  flex-shrink: 0;
  /* ═══ DIE AUSRICHTUNG GEHOERT AN DEN KNOPF, NICHT AN DEN CONTAINER ══════
     (01.09.2026, MWM: "den hast Du auch gesetzt bei InOut, aber obendrueber
      ueberm Feld und nicht einheitlich ... wo der ist, um eine Kachel
      aufzuklappen, muss vereinheitlicht werden")

     Gemessen -- das Markup ist in beiden Modulen identisch, der Unterschied
     stand im CSS:

         depot/css/styles.css    align-items: center
         inout/css/styles.css    align-items: flex-end
         css/styles.css (Hub)    align-items: flex-end

     Der Knopf ist 22 px hoch, der Titelblock daneben deutlich hoeher
     (Kicker, Ueberschrift, Nebenzeile). Bei flex-end klebt er an der
     Unterkante des Blocks und steht damit woanders als in Depot -- ohne
     dass jemand ihn dort hingesetzt haette.

     align-self haengt die Entscheidung an das Element, das sie betrifft.
     Damit sieht die Geste in allen vier Modulen gleich aus, egal wie der
     jeweilige Kopf ausgerichtet ist -- und bleibt es auch, wenn jemand
     eines der drei Stylesheets aendert. */
  align-self: center;
}

/* ─── space-between vertraegt keinen dritten Mitspieler ──────────────────────
   .section-heading traegt in depot/css/styles.css und css/styles.css
   justify-content:space-between. Das ging auf, solange die Kopfzeile GENAU
   ZWEI Kinder hatte: Titelblock links, .canvas-actions rechts.

   Mit dem Klappknopf sind es drei — und space-between verteilt drei Elemente
   gleichmaessig ueber die Breite. Der Titel landete in der Mitte, mit einer
   Handbreit Luft zum Dreieck, das ihn aufklappt. Dasselbe Muster, das der
   Kommentar bei .card > summary schon einmal beschreibt.

   Statt der Aufteilung durch den Container: der Titelblock schiebt selbst.
   margin-right:auto haelt Knopf und Titel links zusammen und draengt alles
   Weitere nach rechts — unabhaengig davon, wie viele Kinder noch dazukommen.

   :has() hebt die Spezifitaet auf (0,2,0) und schlaegt damit die
   Modul-Stylesheets, die spaeter geladen werden. Ohne das gewaenne dort
   weiterhin space-between. */
.section-heading:has(> .frame-collapse-btn) { justify-content: flex-start; }

/* ═══ DER KLAPPKNOPF BRICHT NICHT UM ════════════════════════════════════════
   (01.09.2026, MWM: "jetzt sind auf einmal die Toggle-Dreiecke in der Mitte
    horizontal des Frames oben")

   Alle drei Modul-Stylesheets stellen die Kopfzeile unter 800 px auf
   flex-direction: column:

       depot/css/styles.css    Zeile 417
       inout/css/styles.css    Zeile 614
       estate/css/styles.css   Zeile 240

   Das ist fuer Titel und Aktionsknoepfe richtig -- die sollen bei wenig
   Breite untereinander. Fuer den Klappknopf ist es falsch, und zwar
   doppelt: er rutscht als erstes Kind in eine eigene Zeile UEBER den Titel,
   und align-self:center (das ihn sonst auf Titelhoehe haelt) zentriert in
   column-Richtung HORIZONTAL. Ergebnis: ein Dreieck, das mittig ueber der
   Ueberschrift schwebt.

   Ich hatte diesen Fall am selben Tag gemeldet und offen gelassen ("am
   Desktop nicht sichtbar"). Er war sichtbar, sobald das Fenster schmaler
   als 800 px ist -- und das ist keine Ausnahme, sondern ein halber
   Bildschirm.

   LOESUNG: Kopfzeilen MIT Klappknopf bleiben row und brechen um. Der
   Knopf klebt am Titel (beide zuerst in der Zeile), die .canvas-actions
   rutschen in die naechste. Genau die Aufteilung, die der Media Query
   erreichen wollte -- nur ohne den Knopf mitzunehmen.

   :has() liegt bei (0,2,0) und schlaegt damit die .section-heading-Regeln
   der Modul-Stylesheets (0,1,0), obwohl die spaeter geladen werden.
   Spezifitaet vor Reihenfolge. */
.section-heading:has(> .frame-collapse-btn) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
/* Die ganze Kopfzeile ist der Ausloeser (shared/klappen.js). Der Zeiger sagt
   das, bevor man es ausprobiert -- eine Flaeche, die auf Klicks reagiert und
   wie Text aussieht, findet niemand. Auf den Bedienelementen darin gilt
   wieder deren eigener Zeiger, sonst behauptete der Pfeil ueber dem
   Sortierfeld etwas Falsches. */
.section-heading:has(> .frame-collapse-btn) { cursor: pointer; }
.section-heading:has(> .frame-collapse-btn) :is(input, select, textarea, a, label, .info-hint),
.section-heading:has(> .frame-collapse-btn) button:not(.frame-collapse-btn) { cursor: auto; }
.section-heading:has(> .frame-collapse-btn) :is(a, label, .info-hint),
.section-heading:has(> .frame-collapse-btn) button:not(.frame-collapse-btn),
.section-heading:has(> .frame-collapse-btn) select { cursor: pointer; }
.section-heading > .frame-collapse-btn + * { margin-right: auto; }

/* ─── Was zugeklappt trotzdem stehen bleibt, und was nicht ───────────────────
   Die Kopfzeile ueberlebt das Zuklappen (Regel oben: > *:not(.section-heading)).
   Damit blieben auch die Knoepfe DARIN sichtbar -- in Depot also das
   Sortierfeld und das Plus, obwohl die Tabelle, die sie sortieren und
   erweitern, gerade nicht da ist. Ein Auswahlfeld, das nichts Sichtbares
   ordnet, ist kein Angebot, sondern eine Irrefuehrung.

   Die Nebenzeile (.tabellen-stand, "12 Positionen · 45.000 €") bleibt
   dagegen bewusst stehen: sie beschreibt den Inhalt und ist zugeklappt
   genau das, was man noch wissen will. */
.master-frame.collapsed > .section-heading .canvas-actions,
.canvas-frame.collapsed > .section-heading .canvas-actions { display: none; }

/* ─── Der Plus-Knopf ─────────────────────────────────────────────────────────
   25.08.2026 (MWM: "mach einfach nur ein Plus, und nicht fett").
   "+ Position" und "+ Konto" standen als Text neben einer Überschrift, die
   schon "Positionen" bzw. "Konten" hieß. Das Wort war die dritte Nennung
   desselben Begriffs in einer Zeile.

   Quadratisch, damit er neben dem Auswahlfeld nicht wie ein abgeschnittener
   Textknopf wirkt. Die Beschriftung lebt im title/aria-label weiter — für
   Zeiger und Screenreader steht dort weiter "Neue Position". */
.knopf-plus {
  width: var(--knopfhoehe);
  padding: 0 !important;
  font-size: var(--fs-kpi);
  font-weight: var(--fw-normal);
  line-height: var(--lh-zahl);
}

/* .back-link ist am 27.08.2026 entfallen. Der Zurueck-Weg steht seither in
   der Kopfleiste (shared/kopfleiste.css) -- auf JEDER Seite, zusammen mit dem
   Pfad dorthin, statt auf vier Seiten als einzelner Pfeil.

   Was hier stand, war die dritte Fassung desselben Knopfes: erst dreimal
   woertlich in depot/, estate/ und inout/ mit dem Kommentar "1:1 aus
   EstateNests .back-link, damit der Knopf gleich aussieht", dann hier
   zusammengefasst, jetzt ganz weg. Der ganze Weg von der Kopie ueber die
   geteilte Regel bis zum Wegfall hat drei Tage gedauert -- und der Knopf war
   die ganze Zeit derselbe. */