/* Das Zeichen im Kopf der ersten Spalte — Entwurf 004, Marks Wahl vom
   21.09.2026: „vom design als icon groesse und abstand wie bei den
   metrics bei der sortierung, rechts daneben."

   Also genau die Form des Sortierzeichens: `.proj-table th i` traegt
   vier Pixel Abstand nach links und keine eigene Groesse. Das Ziel-Zeichen
   wird darum auf das Mass der Schrift gebracht, damit es neben „Anzeige"
   so steht wie das Dreieck neben „Conv.".

   Und es wechselt mit der Wahl — „icon switcht aber je nach preset".
   Laeuft ein Filter, steht dort seine Marke in ihrer Farbe. */
.proj-table th.pu-kopf { cursor: pointer; }
/* Auf der Mittellinie des Wortes — Marks Meldung vom 21.09.2026: „die
   icons sind nicht gerade aligned mit dem text."

   `vertical-align: -1px` war geraten und konnte gar nicht stimmen: Jedes
   Zeichen bringt seine eigene Metrik mit, ▲ sitzt anders als ▬ und das
   wieder anders als ein SVG. Ein Kasten fester Hoehe, der seinen Inhalt
   mittig haelt, braucht dagegen nichts zu raten — und `middle` legt
   seine Mitte auf die des Wortes daneben. */
.proj-table th.pu-kopf i {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1em; line-height: 1; vertical-align: middle;
}
.proj-table th.pu-kopf .pu-aus { color: var(--faint); opacity: .6; }
.proj-table th.pu-kopf .pu-aus svg { width: 12px; height: 12px; display: block; }
.proj-table th.pu-kopf:hover .pu-aus { opacity: 1; color: var(--text); }
.proj-table th.pu-kopf.an { color: var(--text); }
/* Die Marke im Kopf ist so gross wie das Dreieck in der Zeile, aber
   nicht breiter als das Sortierzeichen — sonst springt die Spalte. */
.proj-table th.pu-kopf .pu-marke { width: auto; font-size: 10px; }
/* Und dieselbe Mittellinie in der Zeile: Auch dort standen die vier
   Zeichen je nach Form verschieden hoch. */
.proj-nz .pu-marke {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.2em; line-height: 1;
}

/* ============ Anzeigen bewerten — gut, traegt sich, zahlt drauf ======
   Marks Auftrag vom 21.09.2026: „ich brauch einen knopf im projekt bei
   der tabelle der gute / schlechte metrics oder overall ads markiert."

   Seine Wahl aus vier Formen: „nur ein zeichen vorn in der zeile". Also
   keine eingefaerbten Zellen und keine getoente Zeile — eine Marke vor
   dem Namen, und die Zahlen bleiben, wie sie sind.

   Die drei Toene sind die des Hauses: Gruen und Rot stehen hier schon
   fuer Geld (Adspend rot, Gewinn gruen), und „traegt sich" ist weder das
   eine noch das andere — also die gedaempfte Schrift. Das Ungemessene
   ist am leisesten: Es sagt nichts ueber die Anzeige, nur ueber uns. */
.pu-marke {
  flex: none; width: 13px; text-align: center; font-size: 10px; line-height: 1;
  font-style: normal; letter-spacing: 0;
}
/* Mit Rueckfall, wie ueberall im Haus: `--gruen` und `--rot` sind
   NICHT definiert — sie stehen nur als Name mit Farbe dahinter. Ohne den
   Rueckfall ist die Zeile ungueltig, und die Marke erbt schlicht die
   Schriftfarbe. Genau so war es: Marks Meldung vom 21.09.2026 „die
   dreiecke auserdem gruen und rot machen bitte" — sie WAREN grau. */
.pu-gut { color: var(--gruen, #3fa76a); }
.pu-drauf { color: var(--rot, #e5534b); }
.pu-traegt { color: var(--muted); }
.pu-offen { color: var(--faint); }
/* Im Menue steht dieselbe Marke vor dem Wort — damit man sie
   wiedererkennt, bevor man sie in der Tabelle sucht. */
.menu .pu-marke { display: inline-block; margin-right: 2px; }
.menu-fuss {
  padding: 7px 10px 4px; font-size: 11px; color: var(--faint); line-height: 1.45;
}

/* ============ Manifest · Ziele — Entwurf 001 aus hundert ============
   Marks Wahl vom 20.09.2026: „nimm 001." Bild links, Text daneben, der
   Balken darunter.

   Der ganze Entwurf haengt an einer Stelle: Ein Ziel OHNE Messwert darf
   nicht aussehen wie eines, bei dem etwas fehlt. Darum gibt es fuer
   diesen Fall keinen leeren Balken und kein Kaestchen, sondern eine
   leise Zeile — und daneben den Weg, einen zu verbinden. */
.zb-liste { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
/* Gerundet und so dunkel wie die Projektkarten — Marks zwei Ansagen vom
   20.09.2026: „die karten hier sollen edged sein" und „und so dunkel wie
   die projekt karten in projekte".

   „Edged" heisst hier GERUNDETE Kanten, nicht scharfe. Ich hatte es
   zweimal andersherum gelesen und die Karte kantig gemacht; Marks
   Korrektur: „soll edged sein, nicht kantig." Es steht hier, damit es
   niemand ein drittes Mal falsch herum liest.

   `--raise` ist die Flaeche, auf der `.pk` steht; `--karte-feld` war eine
   Stufe heller und liess die Ziele aus der Seite herausstehen. */
/* Marks Ansage vom 22.09.2026: „die karte bei ziele sollen umriss haben
   gleiche farbe und dicke wie die projekt kartenb." Dieselbe Zeile wie
   `.pk` im Projektbereich — nicht ein aehnlicher Wert, derselbe. */
/* Die Zielkarte hat am 22./23.09.2026 zweimal die Flaeche gewechselt,
   und die zweite Runde hat die erste aufgehoben.

   Erst: „mach mal helles grau bei den ziel karten, selbes grau wie bei
   projektkarten der header/kopfzeile" — also `--panel`. Dann fiel der
   Rand darauf weg (`--panel` gegen `--border` ist ein Abstand von
   EINS), und er stieg auf `--panel-2` mit.

   Dann Marks Meldung, der Balken darin sei zu schwarz — und die Loesung
   von der anderen Seite: „die ziel karten dunkles grau, den zielbalken
   in das helle." Also zurueck auf `--raise` fuer die Karte, und der
   Balken bekommt das `--panel`, das vorher die Karte trug.

   Damit steht alles wieder auf den Werten des Hauses: Karte `--raise`
   mit `--border`, wie jede Projektkarte — Abstand zehn im Dunkeln,
   fuenfzehn im Hellen. Und die Spur hebt sich mit neun beziehungsweise
   acht ab, diesmal HELLER statt dunkler. */
.zb {
  background: var(--raise); border-radius: var(--r-flaeche); padding: 15px 16px;
  border: 1px solid var(--border);
  position: relative; display: flex; gap: 16px; align-items: flex-start;
}
.zb > .zb-text { min-width: 0; flex: 1; }
.zb b {
  font-size: 15px; font-weight: 600; display: block; letter-spacing: -.01em;
  outline: none; border-radius: var(--r-ikon);
}
.zb p {
  margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55;
  outline: none; border-radius: var(--r-ikon); white-space: pre-wrap;
}
/* Ein leeres Feld sagt, was hineingehoert — sonst steht dort nichts und
   niemand weiss, dass man dort schreiben kann. */
.zb p:empty::before { content: attr(data-leer); color: var(--faint); }

/* Das Bild. Beide Zustaende tragen dieselbe Flaeche — ein Ziel ohne Bild
   hat kein Loch, sondern einen Platz. */
/* Das Bild teilt die Form der Karte, nur eine Sprosse kleiner — die
   Hausleiter: `--r-flaeche` haelt Inhalt, `--r-feld` sind Felder und
   Vorschaubilder. */
.zb-rahmen {
  width: 96px; height: 96px; flex: none; border-radius: var(--r-feld);
  overflow: hidden; padding: 0; border: 0; background: var(--panel);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.zb-rahmen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zb-leer { border: 1px dashed var(--border); background: transparent; color: var(--faint); }
.zb-leer:hover { color: var(--text); background: var(--hover); }

/* Beim Hinfahren hellt die Flaeche auf, sie zieht keinen Rand nach —
   Hausregel seit dem 14.09.2026. */

/* Der Balken — er kam am 22.09.2026 mit der Messung zurueck. */
.zb-track { margin-top: 12px; }
/* Marks Ansage vom 22.09.2026: „der fortschrittsbalken soll immer
   sichtbar sein, fortschritt einfach heller als der rest des balkens."

   Berechtigt, und dieselbe Ursache wie beim Rand der Zielkarte am selben
   Abend: Die Spur stand auf `--panel` — und die Karte traegt seit seiner
   Ansage ebenfalls `--panel`. Abstand null, also keine Spur.

   `--bg` traegt in beiden Themen am deutlichsten: 23 Stufen im Dunkeln,
   19 im Hellen. Der Fuellstand bleibt die Schriftfarbe und ist damit
   immer der Gegensatz dazu — im Dunkeln hell, im Hellen dunkel. */
/* Marks Meldung vom 23.09.2026: „der ziel balken bei einem ziel is zu
   schwarz." Die Spur stand auf `--bg` (#050505) und war damit
   DREIUNDZWANZIG Stufen dunkler als die Karte — ein Loch, keine Spur.

   Seine Loesung, einen Zug spaeter: „die ziel karten dunkles grau, den
   zielbalken in das helle." Die Spur ist jetzt HELLER als die Karte,
   nicht dunkler — neun Stufen im Dunkeln, acht im Hellen. Der Balken
   liegt damit auf der Karte statt in ihr. */
.zb-bal { height: 5px; background: var(--panel); border-radius: var(--r-pille); overflow: hidden; }
.zb-bal i { display: block; height: 100%; background: var(--text); border-radius: var(--r-pille);
  transition: width .3s ease; }
/* Ein angefangener Fortschritt bleibt sichtbar: Marks Ziel steht bei
   64,80 von 10.000 € — das sind 0,65 Prozent und auf 380 Pixeln
   zweieinhalb Punkte, also ein Fleck, der wie ein Fehler aussieht. Mit
   der Mindestbreite wird daraus ein kurzer Strich.

   Nur wenn wirklich etwas da ist: Bei null bleibt die Spur leer, sonst
   behauptete der Balken einen Anfang, den es nicht gab. */
.zb-bal i.hat { min-width: 8px; }
.zb-tz { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; }
.zb-tz b { font-size: 13px; display: inline; }
.zb-tz span, .zb-tz em { font-size: 11.5px; color: var(--faint); font-style: normal; }
.zb-zaehl {
  width: 20px; height: 20px; border-radius: var(--r-pille); border: 1px solid var(--border);
  color: var(--faint); font-size: 13px; line-height: 1; display: flex;
  align-items: center; justify-content: center; translate: 0 2px;
}
.zb-zaehl:hover { color: var(--text); background: var(--hover); }
/* Gemessen am 23.09.2026 im laufenden Fenster, nachdem Stift und Kreuz
   nach unten gezogen waren: Der Text stand auf 470,8, der Stift auf
   468,6, das Kreuz auf 467,1 — drei Mitten, drei Hoehen.

   Zwei Ursachen. Erstens steht die Zeile auf `align-items: baseline`,
   was fuer Schrift richtig ist — „64,80 €" und „von 10.000,00 €" haben
   verschiedene Groessen und gehoeren auf EINE Grundlinie. Ein Zeichen
   hat keine Grundlinie; es wird an seiner Unterkante ausgerichtet und
   sitzt damit zu hoch. Die beiden Knoepfe bekommen darum `align-self`
   und richten sich an der Mitte aus, waehrend die Schrift daneben ihre
   Grundlinie behaelt.

   Zweitens war das Kreuz 15 Pixel gross und der Stift 12 — zwei Stufen
   der Hausleiter nebeneinander in derselben Zeile. Jetzt beide 12. */
.zb-loesen { opacity: 0; color: var(--faint); display: flex; padding: 0;
  align-self: center; }
.zb-loesen svg { width: 12px; height: 12px; }
.zb-tz .zb-weg { align-self: center; }
.zb-tz .zb-weg svg { width: 12px; height: 12px; }
.zb:hover .zb-loesen { opacity: 1; }
.zb-loesen:hover { color: var(--text); }

/* Entwurf 001 aus zwanzig — Marks Wahl vom 22.09.2026: „der button zum
   messung verbinden soll aber unauffaellig/versteckt sein." Ein Text
   unter der Beschreibung, der beim Hinfahren aufhellt. Keine Flaeche,
   kein Rahmen, keine Pille. */
/* Entwurf 005 aus zehn — Marks Wahl vom 23.09.2026: „messwert verbinden
   beim hovern nur rechts irgendwie." Eine eigene Zeile unter der
   Beschreibung, an der rechten Kante, und erst beim Hinfahren zu sehen.

   Von allen zehn Orten ist dieser der einzige, der in BEIDEN Hoehen
   gleich sitzt: Ein Ziel ohne Beschreibung ist flacher, und in der Ecke
   saesse der Griff dann fast auf dem Balken. */
.zb-mw {
  display: block; width: 100%; text-align: right;
  margin-top: 10px; padding: 0; border: 0; background: none;
  /* In der Fusszeile traegt `flex: 1` die Breite — siehe `.zb-fuss`. */
  font-size: 11px; color: var(--faint); cursor: pointer;
  opacity: 0; transition: opacity .12s ease, color .14s ease;
}
.zb:hover .zb-mw, .zb-mw:focus-visible { opacity: 1; }
.zb-mw:hover { color: var(--text); background: none; }
/* Auf dem Telefon gibt es kein Hinfahren — dort stuende der einzige Weg
   zu einem Messwert hinter einer Geste, die es nicht gibt. */
@media (hover: none) { .zb-mw { opacity: 1; } }

/* Entwurf 008 aus fuenfzig — die Tags stehen rechts in der Titelzeile,
   als blosse Schrift. Keine Pillen: Eine Pille je Tag waere neben dem
   Titel eine zweite Reihe Knoepfe, und der Titel ist die Ueberschrift. */
/* Marks Ansage vom 22.09.2026: „der tag sollte neben dem ziel namen
   stehen." Er stand am rechten Kartenrand — der Titel hatte `flex: 1`
   und dehnte sich ueber die ganze Zeile, also wurde alles dahinter an
   den Rand geschoben. Derselbe Fehler wie bei der Pinnadel in der
   Aufgabenzeile, und dieselbe Behebung: Der Titel nimmt nur die Breite
   seines Textes, der Tag schliesst an, und was danach kaeme, waere
   rechts. Ein leerer Titel braucht trotzdem eine Flaeche zum
   Hineinklicken — daher die Mindestbreite. */
.zb-kopf { display: flex; align-items: baseline; gap: 10px; }
.zb-kopf > b { flex: 0 1 auto; min-width: 40px; }
/* Marks Ansage vom 23.09.2026: „mach den Tag bei Zielen weisse farbe
   den text." Er stand in `--faint` und war damit das Leiseste auf der
   Karte — leiser als die Beschreibung, obwohl er etwas ueber das Ziel
   sagt und sie nur etwas ueber das Warum. */
/* Entwurf 027 aus neununddreissig — Marks Wahl vom 23.09.2026: Der Tag
   steht rechts oben in der Ecke, neben dem Loeschkreuz, nicht mehr in
   der Titelzeile. Damit bekommt der Titel seine Zeile ganz fuer sich;
   bei einem langen Namen rangen beide vorher um denselben Platz.

   Im Entwurf traegt er dort `--faint` — eine Ecke ist leiser als eine
   Titelzeile, und was leise steht, darf auch leise aussehen. Die weisse
   Schrift vom Vortag galt der alten Stelle. */
.zb-tags {
  position: absolute; top: 15px; right: 34px;
  padding: 0; border: 0; background: none;
  font-size: 11px; color: var(--faint); cursor: pointer; max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .14s ease;
}
.zb-tags:hover { color: var(--text); background: none; }
/* Die Aufforderung „+ Tag" bleibt leise: Sie sagt nichts ueber das Ziel,
   sondern ueber uns — und sie steht ohnehin nur da, solange man
   hinfaehrt. */
.zb-tags.leer { color: var(--faint); }
/* Traegt ein Ziel noch keinen Tag, steht dort nichts — bis man hinfaehrt.
   Eine Karte ohne Tags soll keine leere Aufschrift tragen. */
.zb-tags.leer { opacity: 0; }
.zb:hover .zb-tags.leer { opacity: 1; }
.zb-tagfeld {
  position: absolute; top: 11px; right: 34px; width: 120px; background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: 11px; padding: 0 0 2px; outline: 0;
}
/* Der Filter ueber den Karten — dieselbe Lautstaerke wie die Zahl,
   neben der er vorher stand. Die Zeile traegt den Abstand, damit der
   Knopf selbst ohne Innenabstand an der linken Kante der Karten sitzt. */
/* Marks Ansage vom 23.09.2026: „mach alle tags bei ziele rechts hin."
   Sie standen links unter dem Eingabefeld, auf einer Kante mit dem
   Text der Karten darunter; rechts stehen sie auf einer Kante mit der
   Zahl daneben und dem Tag in jeder Karte. */
.zb-tagzeile { display: flex; justify-content: flex-end; margin: 14px 0 -2px; }
.ziel-filter {
  background: none; border: 0; padding: 0; color: var(--faint);
  font: inherit; font-size: 12.5px; cursor: pointer; transition: color .14s ease;
}
.ziel-filter:hover, .ziel-filter.an { color: var(--text); background: none; }

/* Marks Ansage vom 23.09.2026: „verschiebe bei den ziel karten den
   stift und x nach unten, damit es aligned mit dem text ist."

   Es stand absolut in der oberen rechten Ecke, zehn Pixel von beiden
   Kanten — eine Hoehe, die mit nichts zu tun hatte, was daneben stand.
   Jetzt steht es in derselben Zeile wie Stift und Text und braucht gar
   keine Stelle mehr: Die Zeile richtet es aus. */
.zb-weg { opacity: 0; flex: none; }
.zb:hover .zb-weg { opacity: 1; }
/* Ohne verbundenen Messwert tragen Wort und Kreuz die Zeile allein. */
.zb-fuss { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.zb-fuss .zb-mw { flex: 1; margin-top: 0; }

/* Die Tafel im Bildmenue */
/* Marks Meldung vom 22.09.2026: „das ziele bilder auswahl popup ist mies
   cracked und unsauber."

   Die Ursache stand eine Zeile zu schwach da: Die Kacheln sind `button`
   INNERHALB eines Menues, und `.menu button` (Spezifitaet 0,1,1) traegt
   `display: flex`, `width: 100%`, `padding: 9px 10px` und `gap: 10px`.
   `.zt-kachel` allein ist 0,1,0 und verlor jedes Mal — das Bild sass in
   einem gepolsterten Knopf, der seine ganze Zeile fuellte, und das
   Raster darueber konnte nichts ausrichten.

   Darum jetzt `.ziel-tafel .zt-kachel`: gleiche Staerke plus eins, und
   die Kachel ist wieder eine Kachel.

   Und Marks Nachtrag: „mach die bilder kleiner in der auswahl" — aus
   vier Spalten werden sechs. */
/* Marks Meldung vom 22.09.2026: „zentrier dieses popup, es ist total
   verbuggt und kleiner." Das Menue hatte keine Breite und wuchs mit dem
   Raster darin, bis es ueber die Kante lief. Jetzt eine feste Breite,
   kleine Kacheln, und es steht in der Mitte statt am Knopf. */
.menu.mittig {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-height: 76vh; overflow: auto;
}
.menu.bildwahl { width: 300px; }
.ziel-tafel {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px 2px;
  max-height: 260px; overflow: auto;
}
.ziel-tafel .zt-kachel {
  display: block; width: auto; aspect-ratio: 1; padding: 0; gap: 0;
  border-radius: var(--r-ikon); overflow: hidden; background: var(--raise);
}
.ziel-tafel .zt-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der Umriss liegt INNEN, nicht aussen: Ein `outline` draussen ueberlappt
   die Nachbarkachel, und bei vier Pixeln Abstand sah das aus, als sei das
   Raster gesprungen. */
.ziel-tafel .zt-kachel:hover { outline: 1px solid var(--faint); outline-offset: -1px; }

/* ============================================================
   Workspace — Design 1:1 nach ChatGPT (dunkles Theme)
   ============================================================ */

:root {
  /* Dunkel = Standard, ChatGPT-Layout in tiefem Schwarz */
  --sidebar: #000000;
  --bg: #050505;
  --raise: #131313;      /* Hover-Flächen */
  --panel: #1c1c1c;      /* aktive Pills, Such-Feld */
  /* Marks Ansage vom 23.09.2026: „mach mal alle texteingabefelder zur
     hellen grau option, wie z. B. das grau bei den tasks, die
     kopfzeile."

     Der Grund eines Schreibfeldes ist jetzt eine eigene Farbe, nicht
     mehr `--raise`. Nicht aus Ordnungsliebe: Neunzehn Regeln im Haus
     setzen diesen Grund, und sie einzeln zu drehen hiesse, beim
     naechsten Mal wieder neunzehn zu suchen — und die zwanzigste zu
     uebersehen, die jemand inzwischen dazugeschrieben hat.

     `--panel` ist die naechste Stufe der Leiter. Im dunklen Thema ist
     sie heller als der Grund, im hellen dunkler: In beiden Faellen ist
     sie die staerker abgesetzte — und das ist gemeint. */
  --feld-grund: var(--panel);
  --panel-2: #242424;
  --border: #1d1d1d;
  --border-soft: #151515;
  /* Marks Ansage vom 23.09.2026: „entfern mal ueberall den umriss von
     karten und eingabefeldern, aber ausser im launchpad die allgemeinen
     umrisse, weil da ist es ja schwarz, die brauchen wir fuer die
     trennung."

     Darum eine ZWEITE Farbe, die genauso aussieht und einen anderen
     Zweck hat: `--border` umreisst ein Ding, `--trennung` teilt eine
     Flaeche. Der Schalter nimmt nur die erste fort. Ohne diese Trennung
     haette ich im Launchpad vier Regeln einzeln ausnehmen muessen — und
     die fuenfte, die jemand spaeter dazuschreibt, waere durchgefallen. */
  --trennung: #1d1d1d;
  --trennung-soft: #151515;
  --text: #f3f3f3;
  --muted: #9a9a9a;
  --faint: #6b6b6b;
  --accent: #ffffff;     /* „Neu"-Button */
  --accent-text: #0d0d0d;
  --blue: #e6e6e6;
  --shadow: 0 10px 34px rgba(0, 0, 0, .6);
  /* Der Rollbalken — Marks Auftrag vom 10.09.2026: „bau ueberall wo was
     scrollable ist doch wieder scrollleisten ein", „aber immer rechts am
     rand". Zwei Toene: ruhend und unter dem Zeiger. */
  --roll: #2f2f2f;
  --roll-hover: #4a4a4a;
  /* Die Karten im Launchpad und die Felder darin. Marks Meldung vom
     11.09.2026: „dieses helle grau das will ich stattdessen haben bei
     den karten nicht dieses enorm helle wie bei uns aktuell."

     Die Karte stand auf `--panel` (#1c1c1c) — demselben Ton wie aktive
     Pillen, und der ist fuer eine Flaeche von achthundert mal
     zweihundert Pixeln zu hell. Zwei eigene Toene statt einer
     Zweckentfremdung: die Karte gedaempft, die Felder darin eine Stufe
     heller, damit sie sich abheben. */
  /* Etappe 3 von Marks Aufraeumen, 14.09.2026: „hat die tabelle bei
     projekte z.B die selben farben wie im launchpad das helle und
     dunkle grau?" — Sie hatte nicht. Die Karte im Formular stand auf
     #171717, die im Projektfenster auf --raise #131313; das Feld auf
     #1f1f1f, die Zahlenspalte auf #1c1c1c. Drei bis vier Punkte
     auseinander: einzeln unsichtbar, nebeneinander als „irgendwas
     stimmt nicht" spuerbar.

     Die Namen bleiben — sie stehen an neun Stellen und sagen, WAS
     gemeint ist. Nur der eigene Wert faellt weg; sie zeigen jetzt auf
     Stufen der Hausleiter. Im hellen Thema liegt die Karte auf dem
     Grund statt auf --raise, darum dort eine andere Sprosse: die Rolle
     ist dieselbe, die Stufe nicht. */
  --karte: var(--raise);
  --karte-feld: var(--panel);
  /* Drei Masse fuer Kanten, mehr gibt es nicht. Marks Ansage vom
     11.09.2026: „ich will das wir ueberall konsistente edges haben …
     ich will die UI overall einheitlich machen." Vorher standen
     dreissig verschiedene Radien nebeneinander.

       --r-teil    was man drueckt, waehlt oder betippt: Knoepfe,
                   Auswahlfelder, einzeilige Felder, Reiter, Zeichen-
                   knoepfe.
       --r-flaeche was Inhalt haelt und in die Hoehe geht: Karten,
                   Fenster, Popups, mehrzeilige Felder. Bleibt zwoelf.
       --r-pille   der Kippschalter, weil er von Natur aus rund ist,
                   und reine Etiketten, die man nicht drueckt —
                   Marken, Grade, Zaehler.

     Marks endgueltige Ansage, nach zwei Zwischenschritten: „all diese
     elemente die nun eckig sind sollen pill rund sein auch links in der
     tab auswahl, nur so karten oder groessere flaechen sollen edged
     sein, bei meta launchpad sollen die schaltflaechen kantig edged
     sein." Also rund im ganzen Programm — und im Launchpad eckig, weil
     es den Werbeanzeigenmanager nachbaut und drueben alles Kanten hat.

     Das steht als EIN Wert an EINER Stelle. Die Ausnahme ist kein
     zweiter Regelsatz, sondern dieselbe Variable, im Launchpad neu
     belegt: `.lp-seite { --r-teil: 8px; }` weiter unten. Alles, was
     darauf zeigt, folgt von allein. */
  /* Etappe 4 von Marks Aufraeumen, 14.09.2026. Gezaehlt waren
     zweiundzwanzig einfache Pixelwerte an 338 Stellen — 8, 9 und 10
     nebeneinander fuer dieselbe Art Kasten, 11 neben 12, 14 neben 16.
     Fuenf Sprossen reichen, weil es fuenf Groessen gibt; keine Stelle
     hat sich um mehr als drei Pixel bewegt.

     Zusammengesetzte Werte wie `0 14px 14px 0` bleiben, wie sie sind:
     Sie sagen nicht, WIE rund etwas ist, sondern dass eine Seite an
     etwas anderes stoesst. */
  --r-klein: 4px;      /* Marken im Text, schmale Balken, Punkte */
  --r-feld: 8px;       /* Felder, Vorschaubilder, Menues, kleine Kacheln */
  --r-teil: 999px;
  /* Marks Ansage vom 14.09.2026: „buttons sollen immer rund sein mach
     alle rund, die wo viereckig sein sollen sind nur die fuer kleine
     mini knoepfe wo nur ein icon ist."

     Knoepfe brauchen eine eigene Sprosse, weil `--r-teil` im Launchpad
     auf 8px umgebogen wird — dort sollen Felder und Zeilen eckig sein.
     Diese zwei stehen nur in der Wurzel und werden nirgends
     ueberschrieben, damit ein Knopf ueberall dieselbe Form hat. */
  --r-knopf: 999px;    /* alles, was man drueckt und worin Text steht */
  --r-ikon: 8px;       /* der kleine Knopf, in dem nur ein Zeichen sitzt */
  --r-flaeche: 12px;  /* Karten, Kaesten, was Inhalt haelt */
  --r-gross: 16px;     /* grosse Flaechen: Fenster, Buehnen */
  --r-pille: 999px;
  /* Das Schwarz der Karten. Es stand zuerst nur im Launchpad; seit Marks
     Ansage vom 11.09.2026 — „hier in der mitte dieses schwarz bitte beim
     verlauf bei generator unten bei den ergebnissen als hintergrund
     karte nutzen" — gilt es an zwei Stellen, also steht es an einer:
     acht Punkte ueber dem Grund, rgb(13,13,13) gegen rgb(5,5,5). */
  --karte-grund: color-mix(in srgb, var(--text) 4%, var(--bg));
  /* Die Farbe des Gewaehlten: dieselbe Flaeche und derselbe Umriss wie
     eine Schaltflaeche im Popup — Marks Ansagen vom 11.09.2026, „der
     stamm das ausgewaehlte soll die selbe schaltflaechen und umriss
     farbe bekommen wie von einem popup" und „dieselbe farbe bei der
     stamm auswahl will ich nun links haben bei sections".

     Nachgemessen an der Copy-Karte im Fenster: Grund rgb(14,14,14),
     Umriss dreizehn Prozent Schrift auf nichts. Steht in der Wurzel,
     weil zwei weit auseinanderliegende Stellen sie lesen: der Stamm im
     Launchpad und die Abschnitte in der Leiste links. */
  --lp-wahl: #0e0e0e;
  --lp-wahl-rand: color-mix(in srgb, var(--text) 14%, transparent);

  /* ---- Toene, die es in beiden Helligkeiten geben muss ------------
   *
   * Marks Auftrag vom 12.09.2026: „du musst ganz orakel noch auf den
   * hellen modus optimieren … aber das soll den darkmode null
   * beeinflussen voellig unabhaengig voneinander."
   *
   * Gemessen: An rund sechzig Stellen stand eine feste dunkle Farbe im
   * Stylesheet — eine Flaeche, die dunkler ist als der Grund, ein
   * gestrichelter Rahmen, ein Fokusrahmen. Im Dunkeln stimmt das alles;
   * im Hellen bleibt genau dort ein schwarzer Fleck stehen.
   *
   * Die Werte hier sind BITGLEICH mit dem, was vorher fest im Stylesheet
   * stand — der Dunkelmodus aendert sich um nichts. Nur der Hellmodus
   * bekommt darunter seine eigenen. */
  /* ---- Ein Hover fuer alles --------------------------------------
   *
   * Marks Ansage vom 12.09.2026: „wenn man auf so ein button hovert soll
   * der effekt einheitlich ueberall sein, es wird etwas heller … knoepfe,
   * switches, generell die UI."
   *
   * Gemessen waren es neunzehn verschiedene Toene: `--raise` 62-mal,
   * `--panel` 17-mal, `--panel-2` 10-mal, dazu ein halbes Dutzend
   * Mischungen zwischen fuenf und vierzehn Prozent. Jede fuer sich
   * begruendbar, zusammen ein Flickenteppich.
   *
   * Der Hover ist jetzt keine FARBE, sondern eine Aufhellung: acht
   * Prozent Schriftfarbe auf durchsichtig. Das wirkt auf jedem Grund
   * gleich stark — auf dem Fenster wie auf der Karte wie auf dem Feld —
   * und dreht im Hellmodus von selbst mit: Dort ist die Schrift dunkel,
   * also wird die Flaeche beim Hinfahren dunkler statt heller. */
  --hover: color-mix(in srgb, var(--text) 8%, transparent);

  /* Die Tonleiter fuer alles, was durchsichtig aufhellt — Marks Ansage
     vom 14.09.2026: „das und buttons will ich aber auch gleichmaessig."
     Gezaehlt waren dreissig Staerken zwischen 2,5 % und 88 %, jede
     einzeln ueber Monate entstanden. Fuenf reichen, weil es fuenf
     Aufgaben gibt; keine Stelle hat sich dabei um mehr als sechs Punkte
     bewegt. `--hover` ist Stufe 2 und behaelt seinen Namen, weil er an
     ueber hundert Stellen steht.

     Wer eine sechste Stufe braucht, hat meist die falsche Aufgabe
     gewaehlt — der Pruefstand sagt es. */
  --schleier-1: color-mix(in srgb, var(--text) 4%, transparent);   /* Toenung, kaum sichtbar */
  --schleier-2: var(--hover);                                      /* Flaeche, Hover */
  --schleier-3: color-mix(in srgb, var(--text) 14%, transparent);  /* Linie, Rahmen */
  --schleier-4: color-mix(in srgb, var(--text) 24%, transparent);  /* starker Rahmen, markiert */
  --schleier-5: color-mix(in srgb, var(--text) 45%, transparent);  /* kraeftige Flaeche */
  /* Fuer alles, was die Zustimmungsfarbe traegt: Ihr Gegenstueck, damit
     der Schleier auf hellem wie auf dunklem Akzent traegt. */
  --schleier-accent: color-mix(in srgb, var(--accent-text) 14%, transparent);
  /* Diese sieben waren feste Zahlen, gemessen fuer Tiefschwarz. Auf
     Kohle (Grund #161616) lag „tief" damit HELLER als gedacht und
     „Platzhalter" kaum noch sichtbar; auf Grafit erst recht. Marks
     Ansage vom 12.09.2026: „schau mal drueber das alle popups sich den
     theme anpassen."

     Jetzt sind es Anteile Schriftfarbe auf dem Grund — dieselben Werte
     wie vorher, wenn der Grund #050505 ist, und sie wandern mit, sobald
     ein Thema den Grund verschiebt. */
  --tief: color-mix(in srgb, var(--text) 4%, var(--bg));   /* Flaeche unter dem Grund */
  --warm: #141210;              /* der warme Fuss der Anzeigenvorschau */
  --rand-stark: color-mix(in srgb, var(--text) 24%, var(--bg));  /* Rahmen beim Hineinklicken */
  --strichel: color-mix(in srgb, var(--text) 14%, var(--bg));    /* „hier fehlt etwas" */
  --spur-tief: color-mix(in srgb, var(--text) 8%, var(--bg));    /* Spur auf dunklem Grund */
  --platz: color-mix(in srgb, var(--text) 14%, var(--bg));       /* Avatar, leerer Kasten */
  --karo-a: color-mix(in srgb, var(--text) 8%, var(--bg));       /* Schachbrett */
  --karo-b: color-mix(in srgb, var(--text) 14%, var(--bg));
  color-scheme: dark;

  /* Das Achtung-Zeichen aus der Zeichensammlung in app.js, hier als Maske —
     so tragen auch Meldungen ohne eigenes Markup dasselbe Bild. Beide Hellig-
     keiten benutzen es, die Farbe kommt vom Kasten, nicht von der Datei. */
  --zeichen-achtung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}

html[data-theme="light"] {
  --sidebar: #f9f9f9;
  --bg: #ffffff;
  --raise: #f4f4f4;
  --panel: #ececec;
  --feld-grund: var(--panel);
  --panel-2: #e3e3e3;
  --border: #e5e5e5;
  --border-soft: #efefef;
  --trennung: #e5e5e5;
  --trennung-soft: #efefef;
  --text: #0d0d0d;
  --muted: #6b6b6b;
  --faint: #8f8f8f;
  --accent: #0d0d0d;
  --accent-text: #ffffff;
  --blue: #1a1a1a;
  --shadow: 0 10px 34px rgba(0, 0, 0, .14);
  --roll: #d2d2d2;
  --roll-hover: #b4b4b4;
  --karte: var(--bg);
  --karte-feld: var(--raise);
  /* Dieselben Rollen, in hell gedacht: Was im Dunkeln dunkler als der
     Grund ist, ist hier heller — oder eine Spur grauer, wo „tiefer"
     gemeint war. Der Fuss der Vorschau bleibt warm, nur eben in
     Papierton. */
  --lp-wahl: #ececec;
  --tief: #fafafa;
  --warm: #faf7f2;
  --rand-stark: #c4c4c4;
  --strichel: #dcdcdc;
  --spur-tief: #f0f0f0;
  --platz: #dedede;
  --karo-a: #f2f2f2;
  --karo-b: #e6e6e6;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Hier stand eine eigene Schrift fuer die Marke — Syne, aus Entwurf 067.
   Marks Ansage einen Zug spaeter, am 16.09.2026: „orakel namen font oben
   links bitte wieder altes nehmen aber ohne dem .io." Also die
   Hausschrift wie zuvor; was bleibt, ist die Endung, die weg ist.
   Die Schriftdatei ist damit auch aus dem Projekt gegangen. */

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Söhne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Der weisse Ring des Browsers — Marks Ansage vom 20.09.2026: „egal in
   welchem eingabefeld mach den umriss weg beim draufdruecken, der weisse
   der kommt."

   Er kommt vom Browser selbst, nicht aus diesem Blatt: Ein Textfeld gilt
   IMMER als „focus-visible", auch wenn man es mit der Maus anklickt —
   anders als ein Knopf, bei dem der Ring nur nach Tab erscheint. Darum
   sah Mark ihn bei jedem Klick.

   Ganz weg, nicht ersetzt. Beim ersten Anlauf hatte ich den harten Ring
   durch einen weichen Saum ersetzt — und das war derselbe Fehler noch
   einmal: Marks Ansage lautete „keinen umriss beim draufdruecken, also
   dieses HELLERE, nirgends", und mein Saum WAR genau dieses Hellere.

   Was dabei verlorengeht, steht hier, damit es niemand versehentlich
   wieder einbaut: Wer nur mit der Tastatur geht, sieht an Feldern ohne
   eigenes Fokusbild nicht mehr, wo er steht. Viele zeigen es selbst —
   sie hellen beim Fokus ihre Flaeche auf. Die uebrigen nicht. Das ist
   Marks Entscheidung, zweimal gesagt. */
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible,
[contenteditable]:focus, [contenteditable]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Der Rollbalken, einmal fuer alles.
 *
 * Am 09.09.2026 stand hier das Gegenteil — Marks Auftrag damals:
 * „entferne ueberall wo es das gibt diese scroll anzeige rechts." Am
 * 10.09.2026 andersherum: „bau ueberall wo was scrollable ist doch
 * wieder scrollleisten ein", „aber immer rechts am rand".
 *
 * Der Grund, warum es einmal oben steht und nicht an vierzehn Stellen
 * einzeln, gilt in beide Richtungen: Wer einen neuen Kasten baut, soll
 * ihn geschenkt bekommen und nicht von Hand nachziehen muessen.
 *
 * „Immer rechts am Rand" heisst: eine Leiste, die PLATZ NIMMT, statt
 * ueber dem Text zu schweben. macOS zeichnet Rollbalken sonst als
 * Overlay — sie erscheinen beim Rollen, legen sich ueber die letzten
 * Zeichen jeder Zeile und sind wieder weg, bevor man hinsieht. Eine
 * feste Breite in `::-webkit-scrollbar` schaltet das ab.
 *
 * Der Anfasser bekommt seinen Abstand ueber einen durchsichtigen Rand
 * plus `background-clip: padding-box`: So ist die Leiste zehn Pixel
 * breit und der Balken darin vier — schmal zu sehen, aber breit genug
 * zu treffen. */
* { scrollbar-width: thin; scrollbar-color: var(--roll) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--roll); background-clip: padding-box;
  border: 3px solid transparent; border-radius: var(--r-feld);
}
::-webkit-scrollbar-thumb:hover { background: var(--roll-hover); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
/* Wo ein Rollbalken auf den Anfasser trifft, malt der Browser ein kleines
   Viereck — und das blieb weiss, auch nachdem der Anfasser selbst
   unsichtbar war. Es ist eine eigene Flaeche, nicht Teil von beidem. */
::-webkit-scrollbar-corner { background: transparent; }

#app { display: flex; height: 100vh; }
/* Ein Fach ist nur ein Griff zum Austauschen, kein Kasten: `contents`
   heisst, dass es selbst verschwindet und seine Kinder direkt in #app
   liegen. Ohne das saessen Seitenleiste und Hauptteil je in einem
   eigenen Block und die Reihe waere hin. */
#app > .fach { display: contents; }

/* ============ Sidebar ============ */

.sidebar {
  width: 268px; flex: 0 0 268px;
  background: var(--sidebar);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
  padding: 10px 10px 8px;
  overflow: hidden;
}
/* Die alte Regel: zugeklappt hiess weg. Sie steht nicht mehr — Marks
   Ansage vom 13.09.2026: „wenn man die seitenleiste links zuklappt soll
   es niemals ganz weg gehen es sollen die icons zumindest noch sichtbar
   bleiben." Der Klassenname collapsed wird nirgends mehr vergeben. */
/* Wie breit die Leiste gerade ist — als Variable, damit das Vollbild sie
   freilassen kann.

   Marks Auftrag vom 09.09.2026: „jeder vollbildmodus den es gibt soll nur
   so sein das man wenigstens noch die sections links sieht und anklicken
   kann."

   Sie steht am Wurzelelement und nicht an der Leiste selbst: Was sie
   aussparen soll, liegt woanders im Baum. Eingeklappt ist sie null breit,
   dann deckt das Vollbild wieder alles. */
:root { --seiten-breite: 268px; }
html:has(.sidebar.schmal) { --seiten-breite: var(--leiste-schmal); }

/* ---- Die schmale Leiste --------------------------------------------
   Zugeklappt bleibt die Leiste stehen und zeigt nur noch Zeichen. Es ist
   derselbe Bau; was keinen Platz hat, geht weg statt umzubrechen:
   Schriftzug, Suche, Namen, das Angeheftete, das Visionsbild und der
   Name des Kontos. Was bleibt, ist der Weg in jeden Bereich. */
:root { --leiste-schmal: 62px; }
.sidebar.schmal { width: var(--leiste-schmal); flex: 0 0 var(--leiste-schmal); padding: 10px 8px 8px; }
.sidebar.schmal .wordmark,
.sidebar.schmal .label,
.sidebar.schmal .nav-wartung,
.sidebar.schmal .nav-pfeil,
.sidebar.schmal .user-main,
.sidebar.schmal #dranSlot,
.sidebar.schmal .side-widget,
.sidebar.schmal .vision-seite { display: none; }
/* Die Suche steht als eigener Knopf nicht mehr da — der Schalter braucht
   den Platz, und gesucht wird mit demselben Kuerzel wie vorher. */
.sidebar.schmal .side-top { flex-direction: column; gap: 6px; padding: 4px 0 12px; }
.sidebar.schmal .side-top .icon-btn[data-act="focussearch"] { display: none; }
.sidebar.schmal .nav-item { justify-content: center; padding: 0; gap: 0; }
.sidebar.schmal .nav-item .ico { flex: none; }
/* Die Unterpunkte behalten ihre Zeichen, ruecken aber nicht ein — auf
   62 Pixeln gibt es nichts, wogegen man einruecken koennte. */
.sidebar.schmal .nav-item.unter { padding-left: 0; }
.sidebar.schmal .nav-unter { margin: 2px 0 6px; }
.sidebar.schmal .user-row { justify-content: center; gap: 6px; padding: 7px 0; flex-wrap: wrap; }

.side-top {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 4px 14px;
}
/* Die Hausschrift, wie vor Entwurf 067 — Marks Ansage vom 16.09.2026:
   „orakel namen font oben links bitte wieder altes nehmen aber ohne dem
   .io." Vom Entwurf bleibt allein, dass die Endung weg ist.

   Davor stand kurz Syne (Entwurf 067), davor Versalien (Entwurf 25 aus
   fuenfzig), davor dieselbe Zeile mit `.io` in Grau. */
.wordmark {
  flex: 1; font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  padding-left: 6px;
}

.side-scroll { flex: 1; overflow-y: auto; padding-bottom: 10px; }

.nav-item {
  width: 100%; display: flex; align-items: center; gap: 11px;
  height: 38px; padding: 0 10px; border-radius: var(--r-teil);
  text-align: left; font-size: 14.5px; color: var(--text);
}
/* Die Abschnitte links sind eckig, nicht rund — Marks Ansage vom
   11.09.2026: „links bei den sections wieder eckiger aber edged", dazu
   „also bei orakel sections". Sie sind kein Bedienteil in einer Zeile,
   sondern eine Liste von Flaechen untereinander; als Pillen sahen sie
   aus wie fuenf Knoepfe uebereinander. Acht ist dasselbe Mass, das im
   Launchpad gilt. */
/* Zehn statt acht — Marks Meldung vom 11.09.2026: „links bei sections
   wenn man was auswaehlt etwas zu kantig". Acht ist das Mass der
   Bedienteile im Launchpad; eine Zeile von 38 Pixel Hoehe mit einer
   Flaeche darunter traegt etwas mehr. */
.sidebar .nav-item, .sidebar .rec-item { border-radius: var(--r-feld); }
.nav-item:hover { background: var(--hover); }
/* Die gewaehlte Zeile ist HELLER als die Leiste, nicht dunkler, und sie
   traegt keinen Umriss — Marks Ansage vom 12.09.2026: „links bei sections
   bitte wieder helle auswahl effekt wie bei chatgpt 1zu1 … ohne umriss
   wie es frueher bei uns war."

   Am 11.09. war sie auf den Ton der Fenster gegangen, weil dieselbe Farbe
   im Stamm des Launchpads richtig aussieht. Links ist sie es nicht:
   Marks Leiste steht auf Schwarz, und ein Achtzehntel heller als Schwarz
   sieht man nicht. `--panel` ist der Wert, der hier von Anfang an stand
   — gemessen bei ihm #1c1c1c gegen #000000 Grund. */
.nav-item.active { background: var(--panel); }
.nav-item .ico { flex: 0 0 20px; display: grid; place-items: center; color: var(--text); opacity: .92; }
.nav-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Zahl je Abschnitt ist weg — Marks Ansage vom 11.09.2026.
   Mit ihr die Regel, die sie gefaerbt hat. */
/* Ein Bereich, an dem gearbeitet wird. Gedaempft und nicht rot: Es ist
   kein Fehler, sondern eine Ansage — der Bereich steht ja noch da. */
.nav-item .nav-wartung {
  flex: 0 0 auto; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); border-radius: var(--r-klein);
  padding: 1px 5px; line-height: 1.5;
}
.nav-item.wartung .ico, .nav-item.wartung .label { opacity: .55; }
/* Dasselbe Zeichen in einer Kopfzeile — etwa im Uebernehmen-Fenster.
   Es sperrt nichts, es sagt nur, dass daran gearbeitet wird. */
.wartung-band {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); border-radius: var(--r-klein);
  padding: 2px 6px; line-height: 1.5; margin-left: 10px; white-space: nowrap;
}
.nav-item .more {
  opacity: 0; flex: 0 0 24px; height: 24px; border-radius: var(--r-teil);
  display: grid; place-items: center; color: var(--muted);
}
.nav-item:hover .more { opacity: 1; }
.nav-item .more:hover { background: var(--hover); color: var(--text); }

/* Text-Zeilen wie „Aktuelle" bei ChatGPT */
.side-label {
  padding: 20px 10px 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.rec-item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px; border-radius: var(--r-teil);
  font-size: 14px; color: var(--text); text-align: left;
}
.rec-item:hover { background: var(--hover); }
.rec-item.active { background: var(--panel); }
.rec-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-item .more { opacity: 0; flex: 0 0 24px; height: 24px; border-radius: var(--r-teil); display: grid; place-items: center; color: var(--muted); }
.rec-item:hover .more { opacity: 1; }
.rec-item .more:hover { background: var(--hover); color: var(--text); }

.side-user {
  border-top: 1px solid var(--border-soft);
  padding-top: 8px; margin-top: 4px;
}
.user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-flaeche); width: 100%; text-align: left;
}
.user-row:hover { background: var(--hover); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel); color: var(--text);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
/* Mit Bild traegt der Kreis kein Kuerzel mehr, sondern das Bild —
   randlos und beschnitten, damit ein Hochformat nicht verzerrt. */
.avatar.hat { background: var(--platz); overflow: hidden; padding: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dasselbe in den Einstellungen, nur groesser: Man soll sehen, was man
   gewaehlt hat, bevor es unten links klein wird. */
/* Das Visionsbild ueber dem Profil — Marks Auftrag vom 12.09.2026. Es
   ist so breit wie die Leiste und liegt im selben Mass wie die Karte
   darueber; ein Klick schiebt weiter, darum ist es ein Knopf. */
/* Der Name heisst `vision-seite`, nicht `vision`: Die Tafel im Manifest
   hat ihre Kacheln seit jeher `.vision` genannt, und deren Regel steht
   weiter unten mit `aspect-ratio: 4 / 5`. Gleiche Staerke, spaetere
   Regel gewinnt — darum blieb das Bild unten links hochkant, obwohl hier
   1 zu 1 stand. Marks Meldung vom 12.09.2026: „das visionsbild unten
   links nachwievor nicht 1zu1 ratio du hast was anderes gemacht." */
.vision-seite {
  display: block; width: 100%; padding: 0; margin: 0 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-flaeche); overflow: hidden;
  background: var(--raise); cursor: pointer; aspect-ratio: 1;
}
.vision-seite img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vision-seite:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
/* Die Vorschau in den Einstellungen: an zeigt ein Bild, aus einen
   leeren Rahmen. */
.pv-vision { border: 1px solid var(--border); border-radius: var(--r-feld); }
.pv-vision.an { background: linear-gradient(135deg, #3a2f24, #1d1814); }
/* Zwei Kaestchen nebeneinander: das Pruefen zeigt Vorlage und Ergebnis. */
.pv-pruef { display: flex; gap: 2px; }
.pv-pruef i { flex: 1; border-radius: var(--r-klein); background: var(--panel); }
.pv-pruef.an i:last-child { background: var(--muted); }

/* ---- Prüfen im Generator ------------------------------------------
 *
 * Marks Wahl vom 12.09.2026 aus fünfzig Entwürfen: Nummer 33,
 * „Wartende als Spalte links". Links die Schlange, in der Mitte das Paar
 * aus Vorlage und Ergebnis, darunter die drei Wege und der Ausgang in
 * den Verlauf. */
.pruef-raum {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px;
  margin: 16px 0 0; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--r-flaeche); background: var(--karte-grund);
}
.pruef-tit { font-size: 11px; color: var(--faint); margin-bottom: 7px; }
.pruef-liste { display: flex; flex-direction: column; gap: 7px; }
.pruef-liste img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--r-feld); background: var(--platz);
}
.pruef-mehr { font-size: 11px; color: var(--faint); text-align: center; }
.pruef-leer { font-size: 11px; color: var(--faint); }
/* Das Paar bleibt so schmal, dass beide Bilder samt Knoepfen ins
   Fenster passen — gemessen: ohne Deckel standen sie auf einem breiten
   Schirm 635 Pixel hoch, und der Verlauf darunter war weg. Die Grenze
   haengt an der Hoehe des Fensters, nicht an einer festen Zahl. */
.pruef-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: min(760px, 88vh); }
.pruef-paar > * { min-width: 0; }
.pruef-bild {
  width: 100%; aspect-ratio: 1; object-fit: contain; display: block;
  border-radius: var(--r-feld); background: var(--tief); border: 1px solid var(--border-soft);
}
.pruef-bild.ph { background: var(--platz); border-style: dashed; }
.pruef-akt { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pruef-akt .spacer { flex: 1; }
@media (max-width: 720px) {
  .pruef-raum { grid-template-columns: minmax(0, 1fr); }
  .pruef-liste { flex-direction: row; overflow: hidden; }
  .pruef-liste img { width: 54px; }
}

.pb-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-schau {
  width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--panel); color: var(--text);
  display: grid; place-items: center; font-size: 16px; font-weight: 700;
}
.pb-schau.hat { background: var(--platz); }
.pb-schau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uname { font-size: 14px; font-weight: 500; line-height: 1.2; }
.usub { font-size: 12px; color: var(--muted); line-height: 1.3; }

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-ikon);
  display: grid; place-items: center; color: var(--muted);
  flex: 0 0 auto;
}
/* Das Zeichen darin ist ACHTZEHN — und zwar hier, nicht in der
   Zeichnung. Marks Frage vom 18.09.2026: „icons auch ueberall gleich
   gross?"

   Nein, waren sie nicht: `.icon-btn` sagte gar nichts ueber die Groesse,
   also entschied jedes Zeichen selbst — die Breite steht in seinem
   eigenen <svg>. Gemessen im Fenster, alle einundachtzig Zeichen des
   Satzes in DEMSELBEN Knopf: zehn verschiedene Groessen zwischen zwoelf
   und zweiundzwanzig Pixeln. Der Muelleimer sechzehn, die drei Punkte
   siebzehn, das Kreuz achtzehn, das Auge neunzehn — nebeneinander in
   einer Werkzeugleiste.

   Achtzehn ist die Mitte des Satzes und dieselbe Zahl, die der
   Menueeintrag schon traegt. In einem Knopf von vierunddreissig ist das
   die Haelfte. */
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.on { background: var(--panel); color: var(--text); }

.float-toggle {
  position: fixed; left: 12px; top: 12px; z-index: 40;
  background: var(--panel); border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

/* ============ Hauptbereich ============ */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.content { flex: 1; overflow: auto; }

/* Nichts in einer Seite ragt breiter als sie. (Der Teil dieser Regel,
   der der Timer-Huelle galt, ist am 22.09.2026 mit ihr gegangen.) */
.page > * { max-width: 100%; }

.page { max-width: 1060px; margin: 0 auto; padding: 46px 40px 90px; }

/* ============ Die Uebersicht — Entwurf 16 aus fuenfzig ============
   Marks Anordnung vom 17.09.2026: oben die Metriken mit grossem
   Tagesumsatz, darunter der Verlauf ueber die ganze Zeile, unten links
   die Aufgaben von heute und rechts die Woche.

   Die Bausteine kommen aus dem Projekt und nicht aus einer zweiten
   Sammlung — `.proj-band`, `.proj-wert`, `.proj-kurve`, `.card-box`.
   Hier steht darum fast nichts: nur, was es drueben nicht gibt. */
.home-datum { font-size: 13px; color: var(--muted); }
.home-seite .proj-band.proj-erste { border-bottom: 0; padding-bottom: 26px; }
/* Drei Stufen statt zwei — Marks Ansage vom 17.09.2026: „cpa roas und
   bestellungen noch etwas kleiner machen." Die beiden Verhaeltniszahlen
   und die Stueckzahl sind Auskunft ueber die drei Geldbetraege davor,
   nicht gleichrangig mit ihnen.

   Die Aufschrift bleibt, wie sie ist: Kleiner wird der Wert, nicht das
   Wort — sonst rutschte die ganze Spalte aus der Reihe. */
.home-seite .proj-wert.klein .proj-zahl { font-size: 17px; letter-spacing: -.02em; }

/* Unten die Teilung: die Aufgaben schmal, die Woche breiter. Der Tag ist
   eine Liste, die Woche ein Bild — und ein Bild braucht mehr Platz. */
/* Beide Karten gleich hoch — Marks Ansage vom 17.09.2026: „die todo
   karte soll genauso hoch sein wie die nebenan."

   Hier stand `align-items: start`. Damit war jede Karte so hoch wie ihr
   Inhalt, und bei einer einzigen Aufgabe stand neben dem Wochenbild ein
   Kaertchen von einem Drittel der Hoehe. */
.home-unten { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; align-items: stretch; }
/* Und wirklich gleich hoch — Marks Meldung vom 17.09.2026: „die todo
   karte ist zu tief, nicht aligned mit dem chart daneben."

   `align-items: stretch` allein reichte nicht: `.card-box` bringt
   sechzehn Pixel Abstand nach unten mit. Die Wochenkarte trug ihn, die
   Aufgabenkarte nicht — also war die Zeile sechzehn Pixel hoeher als die
   Wochenkarte, die Aufgabenkarte fuellte sie ganz, und ihre Unterkante
   stand sechzehn Pixel tiefer. Gemessen: 309 gegen 293. Hier trennt der
   Abstand nichts, das nicht schon die Luecke des Rasters trennt. */
/* Mit `.card-box` im Selektor, und das ist kein Beiwerk: Den Abstand
   setzt `.up-spalten + .card-box, .card-box + .card-box` zehntausend
   Zeilen weiter unten und wiegt dort genauso viel — bei gleichem Gewicht
   gewinnt die spaetere Regel. Darum eine Klasse mehr. Und darum trug ihn
   nur die ZWEITE Karte: „card-box nach card-box". */
.home-unten > .card-box + .card-box,
.home-unten > .home-karte { margin: 0; }
@media (max-width: 860px) { .home-unten { grid-template-columns: 1fr; } }
/* Die Flaeche der Projektkarten, nicht die des Hauskastens — Marks
   Ansage vom 17.09.2026: „die karten unten fuer woche und todos haben
   immernoch nicht diese grau farbe wie bei projektuebersicht die projekt
   karten ich will die gleiche farbe, gleichen umriss."

   Ich hatte zweimal gegen die falsche Karte gemessen: `.card-box` steht
   auf `--sidebar`, und das ist im dunklen Thema reines Schwarz — also
   DUNKLER als die Seite darunter und praktisch unsichtbar. Die Karten in
   der Projektuebersicht sind `.pk` und stehen auf `--raise`, der Stufe
   darueber. Dieselben drei Werte stehen jetzt hier: Flaeche, Rand,
   Kante. */
/* Mit `.home-seite` davor, und das ist kein Beiwerk: `.card-box` steht
   dreihundert Zeilen weiter unten und wiegt genauso viel — bei gleichem
   Gewicht gewinnt die spaetere Regel. Ohne diesen einen Zusatz blieb die
   Karte schwarz, und genau das hat Mark zweimal gemeldet. */
.home-seite .home-karte {
  background: var(--raise);
  border: 1px solid var(--border);
  border-radius: var(--r-gross);
  /* Auch das Polster kommt von drueben: `.pk` steht auf sechzehn und
     achtzehn, nicht auf den zwanzig und zweiundzwanzig der ersten
     Regel — zwei Karten nebeneinander mit verschiedenem Polster lesen
     sich als zwei Systeme. */
  padding: 16px 18px;
}
/* Der Kopf der Aufgabenkarte: die Zahl als Kennzahl, das Wort daneben.
   Marks Wahl vom 17.09.2026 aus fuenfundzwanzig Entwuerfen — Entwurf 19.
   `baseline`, nicht `center`: sonst schwebt das kleine Wort in der Mitte
   der grossen Ziffer statt auf ihrer Grundlinie. */
.home-tdkopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.home-tdkopf b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.home-tdkopf span { font-size: 11.5px; color: var(--muted); }
/* Rechts aussen, und in derselben leisen Stufe wie jede Nebenangabe —
   Marks Ansage: „ueberfaellig soll nicht rot marktiert werden." */
.home-tdkopf .tdk-rechts { margin-left: auto; color: var(--faint); }

/* Die Aufgabenkarte ist ein Griff: Ein Druck fuehrt in die Aufgaben,
   und der Schleier beim Hinfahren sagt es, bevor man drueckt. */
.home-seite .home-tdkarte { display: flex; flex-direction: column; cursor: pointer; }
/* Kein Aufhellen beim Hinfahren — Marks Ansage vom 21.09.2026: „beim
   hovern kein effekt, einfach beim draufdruecken das man weitergeleitet
   wird."

   Der Grund dafuer war einmal gut (17.09.2026: „mit hover effekt damit
   man checkt wenn man draufdrueckt landet man in todo section"), aber
   die Karte hat seitdem ein Kaestchen zum Abhaken bekommen. Eine
   Flaeche, die als Ganzes aufleuchtet, verspricht dann etwas Falsches:
   Man drueckt auf das Kaestchen und die ganze Karte sagt „ich gehe
   woanders hin". Der Zeiger bleibt — er sagt schon, dass es weitergeht. */
/* Und die Liste rollt in der Karte, statt die Karte zu dehnen — sonst
   schoebe die zwanzigste Aufgabe die Wochenkarte daneben auseinander. */
/* Der Raum traegt NICHTS zur Hoehe bei — Marks Ansage vom 21.09.2026:
   „die karten sollen aber nie groesser werden … es soll stattdessen
   scrollable werden statt vergroessern."

   `overflow: auto` stand hier schon; es half nur nichts, weil die Karte
   mitwuchs und mit ihr die ganze Rasterzeile — also auch die Wochenkarte
   daneben. Eine Liste kann erst rollen, wenn etwas sie begrenzt.

   Darum steht die Liste absolut in einem Rahmen: Sie zaehlt fuer die
   Hoehe nicht mehr mit, die Wochenkarte bestimmt die Zeile, und
   `align-items: stretch` gibt der Aufgabenkarte genau diese Hoehe. */
.home-todo-raum { flex: 1; min-height: 0; position: relative; }
/* Die rollende Flaeche reicht bis an die Kartenkante, der Text behaelt
   sein Polster — Marks Ansage vom 21.09.2026: „der scrollbalken ist zu
   weit links, er muss mehr rechts sein, so wie im launchpad."

   Genau richtig: Die Leiste sass mitten im Kartenpolster und schwebte
   zwanzig Pixel vor dem Rand. Sie gehoert an die Kante — das ist
   dieselbe Ansage wie am 10.09.2026 („aber immer rechts am rand"), nur
   dass es damals um die Leiste selbst ging und hier um die Flaeche, in
   der sie sitzt. Das rechte Polster wandert darum nach innen. */
.home-todo { position: absolute; inset: 0 -20px 0 0; padding-right: 20px; overflow: auto; }
/* Damit die Leiste die runde Ecke nicht ueberschreitet. */
.home-seite .home-tdkarte { overflow: hidden; }
.home-todo > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--schleier-1);
  font-size: 13px; cursor: pointer;
}
.home-todo > div:last-child { border-bottom: 0; }
/* Das Stufenmass aus der Aufgabenliste, hier ohne sein Wort — genau wie
   in `.ov-row`, wo derselbe Baustein schon eng steht. Polster und
   Hover-Flaeche fallen weg: In der Liste ist das Mass ein Schalter, hier
   ist die ganze Zeile einer, und zwei Flaechen uebereinander flackern. */
.home-todo .prio { flex: none; padding: 0; cursor: inherit; }
.home-todo .prio:hover { background: none; }
.home-todo .prio .plabel { display: none; }
.home-todo .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Zeitangabe ist am 22.09.2026 gegangen — Marks Ansage: „bitte
   ueberfaellig/datum streichen das ist irrelevant." Die Regel bleibt
   nicht als Waise stehen; sie beschriebe nichts mehr. */
/* Das Kaestchen links — dasselbe wie in der Aufgabenliste, nur ohne den
   Griff der Zeile zu erben: Wer es drueckt, hakt ab und springt nicht
   in die Aufgaben. Marks Ansage vom 21.09.2026. */
.home-todo .checkbox { flex: none; cursor: pointer; }

/* Die Wochentage unter den Saeulen. Sieben gleiche Felder, damit jede
   Aufschrift unter ihrer Saeule steht — das Balkenbild verteilt sie
   ebenso gleichmaessig. */
.hw-tage { display: flex; margin-top: 7px; }
.hw-tage span { flex: 1; text-align: center; font-size: 10.5px; color: var(--faint); }
.hw-tage span:last-child { color: var(--text); }
/* `.field-hint` steht weiter unten im Blatt und gewinnt bei gleicher
   Staerke — gemessen: die Bestellungen blieben in --muted, obwohl hier
   --faint stand. Darum beide Klassen im Selektor, dann ist die Stelle
   im Blatt egal. */
.field-hint.hw-leise { color: var(--faint); }
.home-wkz {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
.home-wkz b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Dieselbe Farbe wie „ueberfaellig" in der Aufgabenkarte daneben —
   Marks Ansage vom 20.09.2026: „hier bestellungen und unten die werte
   muessen die selbe textfarbe wie links ueberfaellig bei todo haben."
   Das ist --faint; --muted war eine Stufe zu hell und machte aus einer
   Nebenangabe eine Aussage. */
.home-wkz span { font-size: 11.5px; color: var(--faint); }

/* Die Leiste aus dem Manifest, ganz unten — Marks Auftrag vom
   17.09.2026: „ohne background einfach quadratische bilder edged so 6
   stueck." Keine Karte, keine Aufschrift, keine Rundung: sechs Quadrate
   nebeneinander und sonst nichts. */
.home-visuals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 26px; }
/* Die Ecken sind rund — Marks Ansage vom 17.09.2026: „die bilder bei
   uebersicht (visionbilder) sollen edged sein." Bei den Saeulen hatte
   dasselbe Wort schon einmal dasselbe gemeint: „rund an den
   aussenkanten", nachdem ich es als kantig gelesen und die Rundung
   entfernt hatte. Hier stand `border-radius: 0` aus genau diesem
   Missverstaendnis.

   `--r-feld` ist die Sprosse fuer Vorschaubilder, nicht irgendein
   Wert. */
.home-visuals .hv {
  display: block; aspect-ratio: 1 / 1; border-radius: var(--r-feld);
  background-size: cover; background-position: center; cursor: pointer;
}
@media (max-width: 860px) { .home-visuals { grid-template-columns: repeat(3, 1fr); } }

.page-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.page-title {
  margin: 0; flex: 1; min-width: 200px;
  font-size: 31px; font-weight: 700; letter-spacing: -.025em;
  display: flex; align-items: center; gap: 12px;
}
.page-title input {
  background: none; border: 0; outline: 0; font: inherit;
  padding: 2px 8px; border-radius: var(--r-feld); min-width: 60px; max-width: 100%;
}
.page-title input:hover { background: var(--hover); }
.page-title input:focus { background: var(--panel); }

.head-actions { display: flex; align-items: center; gap: 12px; }

.search {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px; min-width: 300px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-teil); color: var(--muted);
}
html[data-theme="light"] .search { background: var(--bg); }
.search input { flex: 1; background: none; border: 0; outline: 0; font-size: 15px; color: var(--text); }
.search input::placeholder { color: var(--muted); }

/* Hier stand Entwurf 020, „Tiefschwarz mit Rand" — Marks Ruecknahme vom
   18.09.2026, wenige Minuten nach der Wahl: „die buttons sollen doch
   wieder weiss sein." Der Knopf ist wieder die Zustimmungsfarbe des
   Hauses und folgt damit auch wieder der Akzentwahl aus den
   Einstellungen. */
/* Entwurf 006 aus dreissig — Marks Wahl vom 18.09.2026: „006 fuer den
   button." Er hiess „Halbfett": dieselbe weisse Flaeche, dieselbe
   Groesse, nur sechshundert statt fuenfhundert.

   Der Knopf ist die Zustimmung und steht meist allein in seiner Reihe.
   Bei fuenfhundert wog seine Schrift genauso viel wie die Aufschrift
   daneben, die ihn erklaert — jetzt wiegt der Griff mehr als der Text
   darum.

   Die drei anderen Groessen desselben Knopfes ziehen mit: der grosse im
   Zeitnehmer und der im Generator stehen unten auf 600, der geteilte im
   Launchpad stand schon immer darauf. */
/* EIN Mass fuer alle weissen Knoepfe — Marks Ansage vom 18.09.2026:
   „achte darauf das icons, und font size und button size gleich gross
   ist bei den weissen buttons, so wie im launchpad die size passt
   uebernimm das ueberall."

   Gezaehlt vorher: acht verschiedene Hoehen (32, 34, 38, 40, 42, 44, 46,
   50), drei Schriftgroessen und drei Zeichengroessen. Das Stilblatt sagte
   sechsundvierzig, aber achtunddreissig stand an fuenfunddreissig von
   achtundsechzig Knoepfen von Hand daneben: Der Vorgabewert war die
   Ausnahme.

   Jetzt sind es die Zahlen des Veroeffentlichen-Knopfes im Launchpad —
   Hoehe 38, Polster 16, Spalt 8, Schrift 13,5, Zeichen 15 —, und sie
   stehen HIER statt achtundsechzigmal am einzelnen Knopf. */
/* Marks Ansage vom 23.09.2026: „die weissen button — der text soll doch
   normale groesse haben, nicht fettgedruckt ueberall bitte, die icons
   weg einfach ueberall."

   Am 23.09.2026 dreimal gedreht, zuletzt: „mach die weissen buttons
   doch nicht bold, genauso dick wie die buttons/text daneben, immer in
   der jeweiligen section, und ohne icon."

   Also alle drei Betonungen fort. Der Knopf traegt jetzt genau die Masse
   von `.btn` — 14 Pixel, gewoehnliches Gewicht —, und was ihn
   unterscheidet, ist einzig seine Flaeche. Die ist auf einer dunklen
   Seite der staerkste Unterschied, den es gibt; alles andere obendrauf
   war Nachdruck auf etwas, das schon laut genug war.

   „Ueberall" heisst alle VIER Bauarten: `.btn-white`, `.big-btn`,
   `.gl-haupt` und `.gen-los` sind derselbe Knopf an vier Stellen, und
   ein Waechter haelt sie seit dem 14.09.2026 auf gleichen Werten. Nur
   eine zu aendern hiesse, vier Knoepfe verschieden aussehen zu lassen.

   Die Zeichen sind im Markup entfernt, nicht hier versteckt: Ein
   `display: none` liesse sie im Quelltext stehen, und der naechste
   Leser hielte sie fuer beabsichtigt. */
.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--r-knopf);
  background: var(--accent); color: var(--accent-text);
  font-size: 14px; font-weight: 400; white-space: nowrap;
}
/* Etappe 5 von Marks Aufraeumen, 14.09.2026: „buttons, pills je nach
   Funktion soll gleiche farben haben, gleiche hover effekte."

   `opacity: .88` machte den Knopf DURCHSICHTIG — was darunter lag,
   schien durch, und auf einer Karte sah derselbe Knopf anders aus als
   auf dem Grund. Jetzt liegt ein Schleier ueber der eigenen Flaeche,
   dieselbe Geste wie ueberall sonst. Er mischt `--accent-text` und
   nicht `--text`, weil die Zustimmungsfarbe hell ODER dunkel sein kann:
   Weiss auf Weiss waere kein Hover. */
.btn-white:hover, .big-btn:hover {
  background-image: linear-gradient(var(--schleier-accent), var(--schleier-accent));
}
/* `.gross` war eine andere GROESSE — jetzt nur noch eine Mindestbreite.
   Der Knopf im Zeitnehmer steht allein unter einem Ring von 132 Pixeln
   und saehe ohne sie verloren aus; hoeher oder fetter als die anderen
   ist er seit dem 18.09.2026 nicht mehr. */
.btn-white.gross { min-width: 168px; justify-content: center; }
/* Gesperrt heisst: sichtbar stumpf und ohne Griff. Bisher war ein
   gesperrter weisser Knopf nur unklickbar — er sah aus wie immer, und wer
   ihn drueckte, hielt die App fuer haengengeblieben. Die Beschriftung
   bleibt stehen; was fehlt, sagt der Titel beim Darueberfahren. */
.btn-white[disabled] { opacity: .38; pointer-events: none; }
.send[disabled] { opacity: .38; pointer-events: none; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: var(--r-knopf);
  border: 1px solid var(--border); font-size: 14px; color: var(--text);
}
.btn:hover { background: var(--hover); }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--hover); }
.btn.sm { height: 32px; font-size: 13px; padding: 0 12px; }

/* Segment-Tabs (Alle / Bilder / Dateien) */
.tabs-row { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.tabs { display: flex; gap: 4px; }
.tab {
  height: 40px; padding: 0 18px; border-radius: var(--r-teil);
  font-size: 15px; color: var(--muted);
}
.tab:hover { background: var(--hover); color: var(--text); }
.tab.on { background: var(--panel); color: var(--text); }
.spacer { flex: 1; }

/* ============ Listen-Tabelle im ChatGPT-Stil ============ */

.list-head, .list-row {
  display: grid; align-items: center;
  gap: 16px; padding: 0 12px;
}
.list-head {
  height: 40px; color: var(--muted); font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.list-head .h { display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 8px; margin: 0 -8px; border-radius: var(--r-feld); }
.list-head .h:hover { background: var(--hover); color: var(--text); }
.list-head .h .ico { color: var(--faint); font-size: 12px; }

.list-row {
  min-height: 60px; border-bottom: 1px solid var(--border-soft);
  font-size: 15px;
}
.list-row:hover { background: var(--hover); }
.list-row .namecell { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tile {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-teil);
  background: var(--raise); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted); font-size: 15px;
}
.list-row:hover .tile { background: var(--hover); }
.list-row input[type="text"], .list-row input[type="number"], .list-row input[type="date"] {
  background: none; border: 0; outline: 0; width: 100%; padding: 4px 6px;
  border-radius: var(--r-feld); font-size: 15px;
}
.list-row input:focus { background: var(--panel); }
.list-row .cellwrap { min-width: 0; display: flex; align-items: center; gap: 8px; }
.muted-cell { color: var(--muted); font-size: 14.5px; }

.rowtools { display: flex; justify-content: flex-end; gap: 2px; opacity: 0; }
.list-row:hover .rowtools { opacity: 1; }
.rowtools .icon-btn { width: 30px; height: 30px; border-radius: var(--r-feld); }
.rowtools .icon-btn:hover { background: var(--hover); }

.add-row {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 12px; width: 100%;
  color: var(--muted); font-size: 15px; border-radius: var(--r-feld); margin-top: 4px;
}
.add-row:hover { background: var(--hover); color: var(--text); }

.tmark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; font-size: 12px; font-weight: 600; color: currentColor; opacity: .85;
}
.list-head .h svg, .list-head .h .tmark { color: var(--faint); }
.prop-key svg, .prop-key .tmark { color: var(--faint); flex: 0 0 16px; }
/* Eine Groesse gehoert hierher, nicht nur ins Symbol.
   Ein SVG ohne width und height nimmt sich die Groesse seines Kastens —
   und im Menue war das die ganze Breite. Ein einziges Symbol ohne
   Massangabe hat so das Plus-Menue zerlegt. Hier gilt sie fuer alle. */
.menu button svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: var(--r-teil);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.chip.empty { color: var(--faint); background: none; padding: 0 2px; font-weight: 400; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }

.checkbox {
  width: 18px; height: 18px; border-radius: var(--r-klein);
  border: 1.5px solid var(--rand-stark); display: grid; place-items: center;
  cursor: pointer; color: transparent;
}
html[data-theme="light"] .checkbox { border-color: #c4c4c4; }
.checkbox.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* ============ Board ============ */

.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.bcol {
  flex: 0 0 280px; width: 280px;
  background: var(--sidebar); border: 1px solid var(--border-soft);
  border-radius: var(--r-flaeche); padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.bcol.dragover { border-color: var(--rand-stark); }
.bcol-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px; }
.bcol-head .n { font-size: 12.5px; color: var(--faint); }
.bcol-body { display: flex; flex-direction: column; gap: 9px; max-height: 62vh; overflow-y: auto; }
.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-flaeche); padding: 12px 13px; cursor: grab;
}
.card:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.card .t { font-weight: 500; margin-bottom: 8px; font-size: 14.5px; }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card .meta .m { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.card.dragging { opacity: .35; }

/* ============ To-Do ============ */

/* Rund, nicht eckig — Marks Ansage vom 11.09.2026: „das textfeld bei
   todo rund". Es stand kurz auf dem Mass der Flaechen, weil es beim
   Schreiben in die Hoehe waechst. Es ist aber eine Zeile, in die man
   tippt, und die Knoepfe darin sind Pillen. */
/* Gefuellt UND mit Umriss — Marks Ansage vom 16.09.2026: „das
   eingabefeld bei todo, nicht nur umriss, gefuellt bitte mit umriss."

   Hier stand `--bg`, also die Farbe der Seite selbst: Das Feld war ein
   Umriss auf nichts. Jetzt eine Stufe darueber auf der Hausleiter
   (`--raise`), der Umriss bleibt. Seit dem 16.09.2026 traegt das Feld
   die Aufgabe allein — der Knopf „Aufgabe" darueber ist weg. */
.composer {
  display: flex; align-items: center; gap: 10px;
  background: var(--feld-grund); border: 1px solid var(--border);
  border-radius: var(--r-teil); padding: 7px 7px 7px 20px;
}
/* Kein hellerer Umriss beim Tippen — Marks Ansage vom 18.09.2026: „mach
   den umriss weg wenn man was eingibt bei todos im feld."

   Hier stand `border-color: var(--rand-stark)`. Das Feld ist die einzige
   Stelle der Seite, in die man schreibt; es muss nicht auch noch sagen,
   dass man gerade darin schreibt. Dieselbe Ansage gab es am 12.09.2026
   schon fuer das Textfeld im Generator. */
/* Marks Ansage vom 22.09.2026: „der platzhalter beim textfeld manifest
   und task ... ist der text im textfeld zur info zu hell, mach ihn die
   gleiche farbe wie beim generator, und groessenverhaeltnis."

   Er war `--muted` (#9a9a9a), im Generator ist er `--faint` (#6b6b6b) —
   und `--faint` ist die Farbe, die fast jedes Feld im Haus benutzt: von
   sechsundzwanzig Platzhalterregeln standen nur vier auf `--muted`. Die
   Schrift war 15,5 px gegen 14 px im Generator; jetzt dieselbe. */
.composer input.title { flex: 1; background: none; border: 0; outline: 0; font-size: 14px; }
.composer input.title::placeholder { color: var(--faint); }
.composer .mini {
  background: var(--feld-grund); border: 1px solid var(--border);
  border-radius: var(--r-teil); height: 34px; padding: 0 12px; outline: 0; font-size: 13.5px;
  transition: background-image .12s ease;
}
/* Marks Meldung vom 23.09.2026: „hier bei task soll schon ein pill
   hover effekt, aufhellerung kommen, glaube vorher war das auch da."

   Sie sind anklickbar — Stufe und Datum oeffnen beide ein Menue —, sagten
   das aber nicht mehr. Der Schleier des Hauses, wie an jedem anderen
   Griff. Die Hausregel „kein Hover auf Auswahlpillen" gilt hier nicht:
   Sie meint Pillen, die eine WAHL anzeigen (Reiter, Filter), nicht
   Knoepfe, die eine oeffnen. */
.composer .mini:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.send {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center;
}

.group-title {
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin: 30px 0 6px; display: flex; gap: 8px; align-items: center;
}

.todo {
  position: relative;
  display: grid; align-items: center;
  /* feste Spalten rechts, damit Priorität, Fokuszeit und Datum bündig stehen */
  /* Feste Breite fuer die Projektspalte: bei „auto" ruecken Prioritaet und
     Datum jedes Mal weiter, sobald irgendwo ein Projektname auftaucht. */
  /* Ohne feste Spalte fuer die Prioritaet ruecken sie und das Datum
     zusammen ans rechte Ende — dazwischen steht nur noch die Fokuszeit,
     und die nimmt nur Platz, wenn es sie gibt. */
  /* Feste Spalte auch fuer die Fokuszeit: sonst steht die Prioritaet in
     einer Zeile mit gemessener Zeit weiter links als in allen anderen. */
  grid-template-columns: 20px minmax(0, 1fr) auto 84px auto 60px;
  gap: 12px; min-height: 50px; padding: 4px 12px;
}
/* Die Fokuszeit steht als leerer Platzhalter in der Zeile, wenn es keine
   gibt. Frueher fiel er ganz weg (display:none) — dann rutschte alles
   dahinter eine Spalte weiter, und Zeilen mit und ohne Fokuszeit standen
   nicht mehr auf einer Kante. Er bleibt jetzt stehen, nur ohne Breite. */
.todo > span:empty { width: 0; overflow: hidden; }
.todo:hover { background: var(--hover); }
.todo .checkbox { margin: 0; }
.todo .t {
  background: none; border: 0; outline: 0; width: 100%;
  font: inherit; font-size: 15px; line-height: 1.45;
  padding: 6px 6px; border-radius: var(--r-feld); min-width: 0;
  resize: none; overflow: hidden; display: block;
}
.todo .t:focus { background: var(--panel); }
.todo.done .t { text-decoration: line-through; color: var(--faint); }
.todo .prio { flex: none; width: 100%; justify-content: flex-start; white-space: nowrap; }
.todo .prio .plabel { color: var(--muted); font-size: 12.5px; }
/* Der Stil der gemessenen Zeit ist am 17.09.2026 mit ihr gegangen —
   `.tfocus` wird nirgends mehr ausgegeben. */
/* Zeichen und Datum so weit auseinander wie Balken und Stufe in der
   Nachbarspalte — zwei Angaben in einer Zeile sollen gleich atmen. Gilt
   auch im Fenster, dort stehen dieselben Zeilen. */
/* Fest breit, nicht die Spalte: der leere Fokus-Platzhalter faellt in
   manchen Zeilen weg, dadurch sitzt das Datum dort in einer anderen
   Spalte. Die Breite am Feld selbst haelt beides ruhig. */
.todo .tdate { justify-self: end; width: 92px; }
.todo .tdate .datefield { width: 100%; justify-content: flex-end; }
.todo .tdate .datefield { gap: 8px; }
/* Auch ein ueberfaelliges Datum bleibt ruhig — es steht in derselben
   Farbe wie eines in der Zukunft. Die Dringlichkeit sagt die Liste ueber
   ihre Gruppen, nicht ueber eine helle Zahl am Rand. */
.todo .tdate.over .datefield { color: var(--muted); font-weight: 400; }
.todo .del { opacity: 0; }
.todo:hover .del { opacity: 1; }

@media (max-width: 720px) {
  .todo { grid-template-columns: 20px minmax(0, 1fr) 30px 0 auto 56px; gap: 8px; }
  .todo .prio .plabel { display: none; }
}

.empty-state { text-align: center; color: var(--faint); padding: 70px 20px; }
.empty-state .big { font-size: 16px; color: var(--muted); margin-bottom: 6px; }

.ring { position: relative; width: 300px; height: 300px; }
.ring svg { transform: rotate(-90deg); }
.ring .inner {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.ring .time { font-size: 62px; font-weight: 300; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ring .mode { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ring .task { font-size: 13.5px; color: var(--faint); max-width: 210px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.big-btn {
  height: 38px; min-width: 168px; padding: 0 16px; border-radius: var(--r-teil);
  background: var(--accent); color: var(--accent-text); font-size: 14px; font-weight: 400;
}

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stat { background: var(--sidebar); border: 1px solid var(--border-soft); border-radius: var(--r-flaeche);
  padding: 16px 20px; min-width: 148px; text-align: center; }
.stat .v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.stat .k { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* Derselbe Rahmen wie in allen anderen Bereichen. Die Karten hier trugen
   als einzige den leiseren Ton und wirkten daneben wie abgesetzt. */
.card-box { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--r-flaeche); padding: 18px 20px; }
.box-label { font-size: 13px; font-weight: 600; color: var(--muted); }

.chart { display: flex; gap: 12px; align-items: flex-end; height: 120px; }
.chart .bar-col { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 42px; }
.chart .bar { width: 28px; border-radius: 7px 7px 4px 4px; background: var(--panel); transition: height .3s ease; }
.chart .bar.has { background: var(--accent); }
/* Die Saeule als gestapelte Bilanz — von unten gearbeitet, dann untaetig,
   dann weg. Dieselben drei Farben wie im Balken der Kamera-Wache. */
.chart .bar.gestapelt {
  display: flex; flex-direction: column-reverse; overflow: hidden;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}
.chart .bar.gestapelt > span { display: block; width: 100%; }

/* Faehrt man ueber eine Saeule, klappt der Tag auf: Balken und die drei
   Zeilen mit Anteil und Dauer. Der eingebaute Hinweis des Browsers kam
   traege und konnte nur eine Zeile — hier steht die ganze Rechnung. */
.chart .bar-col { position: relative; }

.chart .lbl { font-size: 11.5px; color: var(--faint); }

.settings-grid { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.set { background: var(--sidebar); border: 1px solid var(--border-soft); border-radius: var(--r-teil);
  padding: 9px 16px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.set input { width: 48px; background: var(--feld-grund); border: 1px solid var(--border);
  border-radius: var(--r-feld); padding: 4px 6px; text-align: center; outline: 0; color: var(--text); }

.log-item { display: flex; align-items: center; gap: 12px; padding: 11px 10px;
  border-radius: var(--r-feld); font-size: 14px; border-bottom: 1px solid var(--border-soft); }
.log-item:last-child { border-bottom: 0; }
.log-item:hover { background: var(--hover); }
.log-item .when { color: var(--faint); font-size: 12.5px; }

/* ============ Overlays ============ */

#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
/* Und NUR wenn ein Vollbild darin steht, beginnt es hinter der Leiste:
   Solange es „on" ist, faengt es jeden Zeiger, und die Sections waeren
   zwar zu sehen, aber tot. Bei einem gewoehnlichen Fenster bleibt es,
   wie es war — dort deckt nichts die Leiste ab. */
/* Marks Ansage vom 09.09.2026: „das bei absolut jeder Vollbildansicht
   so." Nicht nur Fenster gehen auf volle Breite — das Projekt-Panel
   ebenso, und es ist kein `.modal`. */
#overlay:has(.modal.voll), #overlay:has(.panel.voll) { inset: 0 0 0 var(--seiten-breite, 0px); }
/* Und darunter liegt kein halbdurchsichtiger Schleier, sondern der Grund
   der Seite — sofort, ohne eigenes Aufblenden.
 *
   Marks Meldung vom 09.09.2026: „waehrend die animation kommt reloaded
   die seite im hintergrund und pulsiert deswegen einmal." Neu geladen
   wurde nichts — gemessen: keine Aenderung an #app, kein Neuzeichnen,
   kein Filter. Was er sah, war die alte Ansicht, die waehrend des
   Hereinzoomens durch die noch halbdurchsichtige Seite und rings um sie
   herum sichtbar blieb und dann verschwand. Genau ein Aufblitzen.

   Zwei Griffe dagegen: Der Grund steht sofort und deckt, und die Seite
   selbst ist nach einem Drittel des Weges undurchsichtig — sie bewegt
   sich danach nur noch. */
#overlay:has(.modal.voll) .scrim { background: var(--bg); animation: none; }
#overlay.on { pointer-events: auto; }
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
/* NUR im Vollbild laesst der Schleier die Leiste frei — sonst liegt sie
   sichtbar da und faengt keinen Klick mehr.

   Marks Korrektur vom 09.09.2026: „nein nicht die popups, behebe das NUR
   die vollbild moduse wenn man auf vollbild drueckt." Ein gewoehnliches
   Fenster steht in der Mitte und laesst links ohnehin Platz; sein
   Schleier soll alles dahinter abdunkeln, auch die Leiste. */
/* Der Schleier liegt ebenfalls im Overlay und braucht darum nichts
   Eigenes — er faengt schon dort an, wo das Overlay anfaengt. */

.menu {
  position: absolute; min-width: 210px;
  background: var(--raise); border: 1px solid var(--border);
  border-radius: var(--r-flaeche); box-shadow: var(--shadow); padding: 6px;
  max-height: 72vh; overflow: auto;
}
html[data-theme="light"] .menu { background: #ffffff; }
.menu button, .menu .mi {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-feld); font-size: 14px; text-align: left;
}
.menu button:hover { background: var(--hover); }
html[data-theme="light"] .menu button:hover { background: #f2f2f2; }
/* Ein Feld je gefundener Adresse, alle gleich breit.
 *
 * Die alte Adresse stand kurz als eigene Spalte links daneben. Weil
 * Adressen verschieden lang sind, fing jedes Feld an einer anderen Stelle
 * an — drei Kaesten, drei Kanten. Jetzt steht sie als Platzhalter IM
 * Feld, an derselben Stelle wie das, was sie ersetzt. */
/* Zwei Adressen je Zeile.

   Untereinander waren es bei acht Links acht Zeilen, und der Kasten
   darunter — Erzaehler je Seite — rutschte aus dem Blick. Nebeneinander
   halbiert sich das, ohne dass ein Feld unlesbar wird: Eine Adresse ist
   ohnehin laenger als jedes Feld und wird beim Tippen mitgeschoben; was
   dasteht, ist der Platzhalter, und dessen Anfang genuegt zum Wiedererkennen.

   Auf schmalen Fenstern faellt es von selbst auf eine Spalte zurueck —
   dort ist die halbe Breite wirklich zu wenig. */
/* Und zwar als .up-feld.up-links, nicht als .up-links allein.
 *
 * Der Kasten traegt beide Klassen, und `.up-feld` setzt weiter unten in
 * dieser Datei `display: flex; flex-direction: column`. Bei gleicher
 * Staerke gewinnt die spaetere Regel — mein Gitter stand also da und
 * wurde tausend Zeilen weiter unten wieder ausgeschaltet. Sichtbar war
 * davon nichts: Die alte Regel sagte dasselbe wie .up-feld, sie ist nie
 * aufgefallen. Zwei Klassen im Wahlspruch, dann entscheidet nicht mehr
 * die Reihenfolge. */
.up-feld.up-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-feld.up-links .int-label { grid-column: 1 / -1; }
.up-feld.up-links .up-eingabe { width: 100%; min-width: 0; }
/* Eine Adresse, eine Spalte — Marks Ansage vom 09.09.2026: „wenn es nur
   ein link gibt soll die zeile volle breite annehmen." */
.up-feld.up-links.einer { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .up-feld.up-links { grid-template-columns: 1fr; }
}

/* Der Korrekturleser sitzt bei den Textfeldern, nicht in einer eigenen
   Zeile: Er ist eine Angabe zur Uebersetzung wie Stil und Tonlage. */
.up-korr {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-end; height: 38px; padding: 0 2px;
  font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.up-korr input { accent-color: var(--text); width: 14px; height: 14px; cursor: pointer; }
.up-korr:hover { color: var(--text); }
/* Abgeschaltet gedaempft — eine Wahl, kein Fehler. */
.up-korr.aus { color: var(--faint); }
/* Der Schalter zwischen „einer für alle" und „je Seite" sitzt als
   Segment IN der Aufschrift.

   Hier stand ein einzelner Knopf, der seinen eigenen Zustand als
   Aufschrift trug — daneben eine Aufschrift, die dasselbe noch einmal
   sagte, und darunter eine Zeile „Alle Seiten", die es ein drittes Mal
   sagte. Drei Beschriftungen für einen Zustand.

   Ein Segment zeigt beide Möglichkeiten nebeneinander und markiert die
   geltende: Ein Element sagt, was gilt und was es sonst gäbe. */
/* Die Erzaehlerbank rueckt von dem darueber ab.
 *
 * Marks Beobachtung: „das mit je Erzaehler muss naeher nach unten an die
 * Felder gerueckt werden, aktuell denkt man es gehoert zu dem oben
 * dazu." Er hat recht — der Schalter stand rechts auf einer Linie mit
 * dem Feld „durch" darueber und sah aus, als gehoere er dorthin.
 *
 * Zwei Handgriffe, kein dritter: Mehr Luft nach oben trennt die Bank vom
 * Feld darueber, weniger Luft zwischen Aufschrift und erster Zeile bindet
 * sie an das, wozu sie gehoert. Naehe ist die einzige Ansage, die eine
 * Ueberschrift machen kann. */
.up-feld.erz-seiten { margin-top: 10px; gap: 4px; }

.erz-seiten .int-label {
  display: flex; align-items: center; gap: 10px;
  /* Der Schalter steht am rechten Rand, nicht neben der Aufschrift: Dort
     liegt er ueber dem zweiten Feld und schiebt die Aufschrift nicht vor
     sich her, wenn seine Beschriftung wechselt. */
  width: 100%; justify-content: space-between;
}
.erz-schalter {
  display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-feld);
  overflow: hidden;
}
.erz-schalter button {
  border: 0; background: none; font: inherit; font-size: 11.5px; line-height: 1;
  color: var(--muted); padding: 5px 11px; cursor: pointer;
}
.erz-schalter button + button { border-left: 1px solid var(--border); }
.erz-schalter button:hover { color: var(--text); }
/* Ein vorgemerkter Befund sieht anders aus als ein wartender.

   Der Knopf war während eines Laufs abgeschaltet — ein Druck kam gar
   nicht an, und als später doch etwas losging, sah es aus, als täte die
   App es von selbst. Jetzt merkt derselbe Knopf vor und sagt es. */
/* Jeder Befund einer Anzeige mit seinem eigenen Urteil.

   Lagen an einer Anzeige zwei Befunde, verschwanden beim Neu-Erzeugen
   beide aus dem Bericht — das ist richtig so, sie werden neu beurteilt —,
   aber die Karte danach nannte nur einen. „Woher soll ich wissen, dass
   der andere auch behoben wurde?" Gar nicht. Also stehen alle da. */
/* Zwoelf Befunde brauchen mehr Luft als zwei — und einen Streifen statt
   einer Marke.
 *
 * Die Liste war fuer zwei gebaut: fuenf Pixel Abstand, alles in einer
 * Zeile. Marks Bild vom 04.09.2026 zeigte zwoelf davon: „das ist zu
 * unuebersichtlich und zugequetscht."
 *
 * Aus zehn Fassungen im Prototyp hat er die vierte gewaehlt: kein
 * Etikett vor jedem Satz, sondern ein farbiger Rand links. Offene sind
 * sofort zu sehen, behobene treten zurueck — und der Satz beginnt bei
 * allen an derselben Kante, weil kein verschieden breites Etikett mehr
 * davorsteht. Genau daran krankte die alte Liste: „Behoben" und „Steht
 * noch da" sind verschieden lang, und die Saetze begannen an zwei
 * Stellen.
 *
 * Ab einer gewissen Hoehe rollt die Liste in sich selbst, statt die
 * Karte ins Endlose zu ziehen. */
/* Zwei Pixel waren zu wenig: Bei mehreren Befunden in einer Copy liefen
   die roten Streifen fast nahtlos ineinander, und was drei Befunde waren,
   las sich wie einer. Zehn trennen sie sichtbar, ohne die Liste
   auseinanderzuziehen. */
.nb-liste {
  list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px;
  max-height: 460px; overflow-y: auto; overscroll-behavior: contain;
}

/* Eine Karte je Befund — dieselbe wie im Translator (.pr-item).
 *
   Marks Ansage vom 10.09.2026: „die befunde beim uebernehmen sollen
   genauso aussehen wie beim translator." Dort steht seit gestern jeder
   Befund in einer eigenen Karte mit dem Streifen links; hier war es ein
   blosser Streifen an einer Zeile. Zwei Berichte, die dieselbe Frage
   beantworten, soll man nicht zweimal lesen lernen muessen.

   Darum genau die Werte von .pr-item: dieselbe Flaeche, derselbe Rand,
   dieselbe Rundung, dasselbe Polster. Links bleibt die Kante eckig,
   damit der Streifen gerade steht — Marks Regel vom 09.09.2026. */
.nb-eins {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  background: var(--raise); border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 0 14px 14px 0; padding: 13px 15px;
  font-size: 12.5px; line-height: 1.6;
}
/* Rot fuer das, was noch dasteht, gruen fuer das Behobene. Die Flaeche
   traegt die Karte — ein roter Hauch darin waere die dritte Angabe zu
   derselben Sache. */
.nb-eins.schlecht { border-left-color: var(--rot, #e5534b); }
.nb-eins.gut { border-left-color: color-mix(in srgb, #3fa76a 45%, transparent); }
.nb-eins .nb-satz, .nb-eins .nb-stelle { min-width: 0; overflow-wrap: anywhere; }
/* Dieselbe Kante wie das Urteil darueber (.pp-art), nicht die runde
   Pille. Zwei Marken uebereinander, die dasselbe sagen und verschieden
   aussehen, lesen sich wie zwei verschiedene Sachen. */
.nb-urteil {
  flex: none; font-size: 11px; line-height: 1; padding: 3px 7px;
  border: 1px solid var(--border); border-radius: var(--r-feld); color: var(--muted);
}
/* Nur noch am Fehlerhaften — es ist der einzige Stand, den die Farbe des
   Streifens nicht vom „steht noch da" unterscheidet. */
.nb-eins .nb-urteil { color: var(--rot, #e5534b); border-color: color-mix(in srgb, var(--rot, #e5534b) 45%, transparent); }
/* Der Befundsatz wie drueben im Translator (.pr-was): Er ist die
   Aussage der Karte, nicht ihr Kleingedrucktes. */
.nb-satz { color: var(--text); font-size: 14px; line-height: 1.55; min-width: 0; }

.pp-tun .btn.vorgemerkt {
  color: var(--text); border-color: color-mix(in srgb, var(--text) 45%, transparent);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.erz-schalter button.an {
  color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Hier lagen sieben Zeilen Prosa ohne ihren Anfang — der Rest zweier
   alter Erklaerungen, deren erste Zeile mit ihrer Regel geloescht wurde.
   Der Browser las sie als Auswahl, suchte die naechste geschweifte
   Klammer und verschluckte damit die Regel darunter: Der Kasten der
   Projektauswahl stand auf 339 Pixeln statt auf 380, weil seine Regel
   gar nicht ankam. Gemessen im Fenster — im Quelltext stand sie
   richtig da.

   Entwurf 46 aus fuenfzig — Marks Wahl vom 17.09.2026: „46 fuer projekt
   button aber neues projekt auch als eigene kachel."

   Zwei Felder je Reihe statt einer Liste von Zeilen. Der Kasten hat
   damit eine feste Breite statt einer, die sich nach dem laengsten Namen
   richtet — das war die alte Regel, und sie liess das Menue bei einem
   Projekt „Kampagne Herbst 2026 Variante B" ueber das halbe Fenster
   wachsen. */
.menu:has(.mi-projekt) { width: 380px; max-width: min(92vw, 380px); }
.mi-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px; }
/* Die Kacheln sind IMMER zu sehen — Marks Meldung vom 17.09.2026:
   „projektauswahl sollen immer kacheln sichtbar sein mit selected/hover
   effekt eben."

   Sie standen auf `--raise`, und darauf steht auch das Menue selbst:
   dieselbe Farbe, also keine Kachel. Zu sehen war nur, was man gerade
   anfasste. Jetzt zwei Sprossen der Hausleiter statt einer — ruhend
   `--panel`, unter dem Zeiger der Schleier darauf.

   Das gewaehlte Projekt hebt sich NICHT ab — Marks Ansage vom
   18.09.2026: „nur einfach kein selected effect bitte." Hier stand eine
   dritte Sprosse fuer den offenen Ordner. Man waehlt in diesem Kasten
   aber, wohin es GEHEN soll; wo man herkommt, steht am Knopf, der den
   Kasten geoeffnet hat. Zwei Anzeigen fuer dieselbe Auskunft, und die
   hellste Kachel war die, die man am seltensten drueckt.

   Die Regel gilt fuer Knopf UND Feld: Die erste Kachel wird zum
   Schreibfeld, sobald man sie drueckt, und ein <input> steht nicht in
   einem <button>. Das Hinfahren bleibt am Knopf — ein Feld, in das man
   schreibt, leuchtet nicht auf. */
.menu .mi-projekt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 11px; border-radius: var(--r-feld);
  background: var(--panel); white-space: normal; min-width: 0;
}
.menu button.mi-projekt:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
/* Der Name entsteht in der Kachel — Marks Ansage vom 18.09.2026: „wenn
   man ein projekt anlegen drueckt soll man im kachel bei diesem popup
   auch den namen eingeben koennen direkt."

   Das Feld traegt keinen eigenen Rahmen: Die Kachel ist der Rahmen, und
   ein zweiter darin waere ein Kasten im Kasten. Es steht an der Stelle
   des Namens und in derselben Groesse, damit die Kachel beim Umschlagen
   nicht springt. */
.mip-eingabe {
  width: 100%; padding: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 13px; color: var(--text);
}
/* Der Name darf zwei Zeilen nehmen und bricht dann ab — in einer Kachel
   von 180 Pixeln ist die dritte Zeile eine zu viel. */
.mip-name {
  font-size: 13px; width: 100%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.mip-inhalt {
  width: 100%; color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Die Kachel fuer das neue Projekt steht mit im Raster, nicht darunter:
   derselbe Handgriff wie die anderen, nur eben noch ohne Inhalt. Ihr
   Zeichen sitzt im Namen, damit die beiden Zeilen gleich hoch bleiben. */
.mip-neu .mip-name { display: flex; align-items: center; gap: 7px; }
.mip-neu .mip-name svg { width: 15px; height: 15px; flex: none; }

.menu .sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu .head { padding: 8px 10px 5px; font-size: 12px; color: var(--faint); }
/* Die Zahl neben der Ueberschrift sagt, wie lang die Liste ist — bei einer
   Liste, der schon einmal Eintraege fehlten, ist das der Beleg. */
.menu .head .menu-zahl { margin-left: 6px; opacity: .65; font-variant-numeric: tabular-nums; }
.menu button.danger:hover { background: var(--hover); color: var(--text); }
.menu input.mininput {
  width: 100%; background: var(--feld-grund); border: 1px solid var(--border);
  border-radius: var(--r-teil); padding: 9px 10px; outline: 0; margin-bottom: 5px;
}

/* Zwei Knoepfe nebeneinander im Menue — „Zurueck" und „Anlegen". Das
   Menue ist sonst eine Spalte; hier ist es eine Frage mit zwei Antworten,
   und die stehen auf einer Zeile. */
/* Hier stand der zweigeteilte Kasten: Frage links, Liste rechts. Er ist
   am 17.09.2026 mit der Frage selbst gegangen — Marks Wahl von Entwurf
   02: „Nur die Liste", und der Knopf legt sofort an. `menu-zwei` und
   `menu-teil` werden nirgends mehr vergeben. */

/* Ein Auswahlfeld in der Knopfreihe: so hoch wie die Knoepfe daneben und
   nur so breit, wie sein Inhalt braucht. */
/* Pruefen und „womit" sind ein Knopf.

   Ein Umriss um beides, ein Strich dazwischen: links die Handlung, rechts
   das Werkzeug. Zwei getrennte Knoepfe liessen offen, ob der eine den
   anderen betrifft — hier tut er es. */
.pruef-eins {
  display: inline-flex; align-items: stretch; height: 34px;
  border: 1px solid var(--border); border-radius: var(--r-flaeche); overflow: hidden;
  background: var(--panel); transition: border-color .14s ease;
}
/* Beim Hinfahren hellt die Flaeche auf, der Umriss bleibt, wie er ist.

   Bis zum 14.09.2026 zogen dreissig Knoepfe beim Hinfahren einen Rand
   nach — Marks Ansage: „bei allen buttons wo man drauf hovert und
   umrisse kommen bitte anders machen, falls in der mitte texte/ icon ist
   dann das einfach hell machen und die schaltflaeche aufhellern so wie
   bei anderen buttons den hover effekt aber kein umriss."

   Der Schleier liegt als Verlauf UEBER der eigenen Flaeche, nicht an
   ihrer Stelle: `background: var(--hover)` haette einen Knopf auf
   `--panel` dunkler gemacht statt heller, weil `--hover` durchsichtig
   ist und die eigene Farbe dabei verloren ginge. */
.pruef-eins:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.pruef-eins > button {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; color: var(--text);
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 0 12px;
}
.pruef-eins > button:hover { background: var(--hover); }
.pruef-eins > button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.pruef-eins .pe-tun svg { width: 15px; height: 15px; flex: none; }
/* Der Umfang sitzt rechts daneben und traegt denselben Strich. Abgeschaltet
   steht er gedaempft da — das ist kein Fehler, sondern eine Wahl. */
.pruef-eins .pe-bild {
  border-left: 1px solid var(--border);
  padding: 0 11px 0 10px; gap: 7px; color: var(--muted);
}
/* Und der EINGESCHALTETE Zustand muss man sehen koennen.
 *
   Marks Frage vom 10.09.2026: „wie einstellen?" — vor vier Schaltern
   nebeneinander, von denen zwei an waren.

   Der Unterschied war eine Textfarbe und eine Deckkraft. Beide
   Beschriftungen sind gueltige Zustaende („Am Stueck" gegen „Geteilt"),
   also laesst sich am Wort nicht ablesen, welcher gerade gilt — und am
   Aussehen war es kaum zu sehen. Ein Schalter, dessen Stellung man raten
   muss, ist keiner.

   Jetzt traegt der eingeschaltete einen eigenen Grund und einen Punkt
   davor. Ausgeschaltet bleibt er gedaempft, wie er war. */
.pruef-eins .pe-bild.an {
  color: var(--text);
  background: var(--panel);
  border-radius: var(--r-feld);
}
.pruef-eins .pe-bild svg { width: 15px; height: 15px; flex: none; }
.pruef-eins .pe-bild:not(.an) svg { opacity: .55; }
.pruef-eins .pe-bild.an::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text); flex: none; margin-right: -1px;
}

/* Hier stand der Stil fuer das Schild neben dem Nachbesserungsknopf —
   „womit nachgebessert wird". Beides ist weg: Womit geprueft wurde,
   gehoert in den Bericht der Pruefung, nicht in die Fusszeile davor. */

.opt-sel.klein {
  /* Dasselbe Polster wie bei der grossen Fassung — Marks Ansage vom
     12.09.2026: „hier bei 2 pro reihe etwas mehr padding von der 2 zum
     rand der pill." Damit gilt auch dieselbe Pfeilstellung aus der Regel
     darueber, und links und rechts bleiben gleich: 13 + 1 + knapp ein
     Pixel Seitenband der Ziffer gegen 11,7 + 2,25 + 1. */
  height: 34px; width: auto; min-width: 0; padding: 0 29px 0 13px;
  font-size: 12.5px; flex: 0 0 auto;
}

.menu-zeile { display: flex; gap: 6px; }
.menu-zeile button { flex: 1; justify-content: center; }
.menu-zeile button.on {
  background: var(--text); color: var(--bg, #131313); font-weight: 600;
}
.menu-zeile button.on:hover { background: color-mix(in srgb, var(--text) 88%, transparent); }
html[data-theme="light"] .menu-zeile button.on { color: #ffffff; }

/* Der Rahmenton im Fenster wird am Text gemessen, nicht fest gesetzt. Die
   feste Farbe war fuer den Seitengrund gedacht; auf dem helleren Grund des
   Fensters lag sie so dicht daneben, dass die Umrisse verschwanden — im
   dunklen Grundthema ein Verhaeltnis von 1,10 zu 1, waehrend es auf der
   Seite 1,21 und in anderen Themen bis 1,43 sind. Am Text gemessen ergibt
   sich in jedem Thema derselbe Abstand, hell wie dunkel. */
.modal {
  --border: color-mix(in srgb, var(--text) 14%, transparent);
  /* Der Grund des Fensters, damit klebende Streifen darin ihn erben
     koennen statt eine eigene Farbe zu waehlen. Siehe .stapel-kopf. */
  --fenster-grund: var(--raise);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px));
  /* Die Flaeche des Fensters kommt aus dem Design, nicht aus einer festen
     Zahl.

     Hier stand #131313. Das ist genau der Wert, den „Tiefschwarz" fuer
     --raise setzt — jemand hat ihn abgeschrieben, und danach folgte das
     Fenster keinem anderen Hintergrund mehr. Gemessen am 03.09.2026:
     Auf „Kohle" liegt die Seite bei #161616 und das Fenster bei #131313,
     also DREI Punkte darunter — das Fenster war kaum zu sehen. Auf
     „Grafit" liegt die Seite bei #212121: das Fenster stand vierzehn
     Punkte darunter und sah aus wie ein Loch. */
  background: var(--raise); border: 1px solid var(--border);
  border-radius: var(--r-gross); box-shadow: var(--shadow); padding: 24px;
}
html[data-theme="light"] .modal { background: #ffffff; }
html[data-theme="light"] .btueber-zeile.alle { background: #ffffff; }
.modal h3 { margin: 0 0 18px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; background: var(--feld-grund); border: 1px solid var(--border);
  border-radius: var(--r-flaeche); padding: 11px 13px; outline: 0;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(540px, 100vw);
  background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  animation: slide .18s ease;
}
@keyframes slide { from { transform: translateX(26px); opacity: .3 } to { transform: none; opacity: 1 } }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border-soft); }
.panel-body { overflow: auto; padding: 26px 30px 70px; }
.panel-body h2 { margin: 0 0 22px; font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.panel-body h2 input { width: 100%; background: none; border: 0; outline: 0; font: inherit; }
.prop-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 5px; min-height: 36px; }
.prop-key { flex: 0 0 160px; display: flex; align-items: center; gap: 8px; color: var(--muted);
  font-size: 14px; padding: 7px 6px; }
.prop-val { flex: 1; padding: 6px 10px; border-radius: var(--r-feld); min-height: 34px; display: flex; align-items: center; }
.prop-val:hover { background: var(--hover); }
.prop-val input { width: 100%; background: none; border: 0; outline: 0; }
/* Der Ausloeser fuer die Bundles sieht aus wie der Wert daneben, nicht
   wie ein Knopf — Marks Wunsch vom 16.09.2026: „nicht auffaellig noch
   irgendwo die produktkosten inklusive versandkosten angegeben werden
   koennen." Die Zeile traegt den Zeiger, den Rest tut die Zeile selbst. */
.prop-ruf {
  width: 100%; text-align: left; padding: 0; border: 0; background: none;
  color: var(--text); font: inherit; cursor: pointer;
}

/* Die Bundles selbst — Preis und Einkauf je Zeile. */
.bu-liste { display: flex; flex-direction: column; gap: 12px; }
/* Der Bau ist derselbe wie bei .cr-felder im CPA-Fenster: Aufschrift
   ueber dem Feld, zwei gleich breite Spalten, neun Pixel dazwischen.
   Hier kommt der Papierkorb als dritte, schmale Spalte dazu. */
.bu-z { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; align-items: end; }
.bu-z label { min-width: 0; display: block; }
.bu-z label > span {
  display: block; margin-bottom: 5px;
  font-size: 11.5px; color: var(--muted);
}
.bu-z .bu-weg { flex: none; }
.bu-fuss { margin-top: 12px; }
/* Im CPA-Rechner steht an der Stelle des Zahlenfeldes derselbe Ausloeser
   — er traegt darum auch dieselbe Flaeche wie ein Feld. */
.bu-ruf { text-align: left; cursor: pointer; }
/* Im CPA-Fenster: der Einkauf als Spanne statt als Zahl, und darunter
   die leise Zeile zu den Bundles. */
.cr-ruf { text-align: left; cursor: pointer; font: inherit; color: var(--text); }
/* Mit Bundles stehen ueber der Skala keine Eingaben mehr, sondern zwei
   gerechnete Zahlen. Sie behalten das Aussehen des Feldes — Marks
   Ansage vom 17.09.2026: „es soll zwar fest sein aber die felder sollen
   erhalten bleiben vom design." Ohne Flaeche standen die Zahlen nackt
   in der Zeile und die Maske brach an der Stelle auseinander. */
.cr-felder .cr-fest { display: flex; align-items: center; }
/* Eine einzelne Spalte, wenn unter zwei Feldern nur noch eines steht —
   sonst risse das Raster es auf die halbe Breite auseinander. */
.cr-felder.cr-eins { grid-template-columns: 1fr; margin-top: 9px; }
/* Die Aufschrift der Marge fuehrt zu den Saetzen, wie „Einkauf" zu den
   Bundles. Sie steht in einer Zeile, die selbst schon gedaempft ist —
   darum erbt sie deren Groesse statt der elf Komma fuenf aus der
   Feldzeile. */
/* Unter dem Regler sitzt sie in einer Zeile mit der Prozentzahl — sie
   darf sich nicht dehnen. Schrift, Spalt, Winkel und alles andere kommen
   aus der gemeinsamen Regel oben: „generell gleiches design." */
.cr-rk .cr-mruf { flex: none; }
/* Und die Prozentzahl bleibt in einer Zeile — mit dem breiteren
   Ausloeser daneben brach sie sonst in „25" und „%" auseinander. */
.cr-rk b { white-space: nowrap; }
/* Der Raum, in den das Fenster unter der Marge waechst. Leer nimmt er
   keinen Platz. */
.cr-st-raum:not(:empty) {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
/* Entwurf 11: Eine Aufschrift, die selbst der Weg ist. Sie sieht aus wie
   jede andere Aufschrift — nur ein Winkel steht dahinter, und unter dem
   Zeiger wird sie hell. Mehr passiert nicht: keine Flaeche, kein Rahmen.
   Der Winkel zeigt nach rechts, solange zu ist: Es geht etwas auf.

   EINE Regel fuer beide Stellen — die Bundles unter „Einkauf" und die
   Saetze unter „Gewinnmarge". Marks Ansage vom 17.09.2026: „generell
   gleiches design." Zwei getrennte Regeln waren genau der Grund, warum
   die zweite Stelle Polster, Flaeche und einen doppelt so weiten Spalt
   bekam: Alles stand unter `.cr-felder`, und unter dem Regler steht man
   woanders — dort galt wieder `.menu button` mit neun Pixel Polster,
   zehn Pixel Spalt und einer Flaeche beim Hovern.

   Gebunden an `.cr-fenster`, damit sie `.menu button` ueberwiegt: zwei
   Klassen gegen eine Klasse und ein Element. */
.cr-fenster .cr-lruf {
  /* Block-Flex, nicht inline-flex: Ein inline-flex sitzt auf der
     Grundlinie der Zeile und bekommt darueber Durchschuss — gemessen
     drei Pixel, um die Aufschrift und Feld tiefer standen als „Verkauf"
     daneben. `fit-content` haelt die Flaeche bei den Woertern. */
  display: flex; width: fit-content; align-items: center; gap: 3px;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer;
}
.cr-fenster .cr-lruf svg { width: 12px; height: 12px; transform: rotate(-90deg); }
.cr-fenster .cr-lruf.auf svg { transform: none; }
/* Nur die Schrift hellt auf — die Flaeche aus `.menu button:hover` wird
   hier ausdruecklich zurueckgenommen. */
.cr-fenster .cr-lruf:hover,
.cr-fenster .cr-lruf.auf { color: var(--text); background: none; }
/* Ueber einem Feld steht sie wie jede Aufschrift: fuenf Pixel Luft. */
.cr-felder label > .cr-lruf { margin-bottom: 5px; }
/* Der Raum, in den das Fenster nach unten waechst. Leer nimmt er keinen
   Platz — kein Rand, kein Polster, nichts, was man zugeklappt saehe. */
.cr-bu-raum:not(:empty) {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
/* display:block — sonst greift bei einem Textfeld die automatische
   Zentrierung im Vollbild nicht und es klebt am linken Rand. */
.notes { display: block; width: 100%; min-height: 240px; margin-top: 22px; resize: vertical;
  background: none; border: 0; outline: 0; font: inherit; line-height: 1.7; }
.notes::placeholder { color: var(--faint); }

/* Meldungen sitzen oben rechts — Marks Ansage vom 16.09.2026: „diese
   meldungen sollen immer oben rechts kommen wenn nicht unten zentriert."
   Unten in der Mitte lagen sie ueber der Tafel im Generator und ueber
   dem Eingabefeld der Konsole; oben rechts steht nichts, was man
   waehrenddessen bedient.

   translate statt transform: Die Einblendung greift auf transform zu und
   loeschte damit jede Verschiebung, die hier steht. Die eigene
   Eigenschaft kommt ihr nicht in die Quere. */
/* Entwurf 03.8, von Mark gewaehlt am 16.09.2026: Hausflaeche, das
   Zeichen traegt die Bedeutung, am Fuss laeuft die Uhr ab, rechts steht
   das Kreuz. Die Flaeche ist gestapelt und damit in jedem Thema deckend
   — vorher war es eine Scheibe mit Weichzeichner, und auf Glas hiess
   das zehn Prozent Weiss. */
.toast {
  position: fixed; right: 18px; top: 18px;
  display: flex; align-items: center; gap: 10px;
  overflow: hidden;
  max-width: min(560px, calc(100vw - 40px));
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 8px 11px 16px; border-radius: var(--r-flaeche);
  font-size: 13.5px; line-height: 1.45;
  box-shadow: var(--shadow); z-index: 90;
}
/* Das Zeichen sagt die Art, bevor man liest — Haken oder Warndreieck.
   Vorher stand hier ein Punkt, der beides sein konnte. */
.toast > svg { width: 15px; height: 15px; flex: none; color: #3fa76a; }
.toast.schlecht > svg { color: #e5534b; }
.toast-text { flex: 1; min-width: 0; }
/* Sie geht von selbst — aber man kann sie auch wegtun. */
.toast-weg {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-feld); background: none;
  color: var(--faint); cursor: pointer;
}
.toast-weg:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.toast-weg svg { width: 12px; height: 12px; }
/* Hier lief die Uhr am Fuss. Sie ist am 16.09.2026 gegangen — Marks
   Ansage: „mach den timer weg dementsprechend bitte bei fehler als auch
   normaler meldung." Bei einem Fehler waere sie falsch geworden, denn
   der bleibt seit demselben Tag stehen, bis man ihn wegtut; und bei
   einer guten Meldung zaehlte sie eine Sekunde herunter, die niemand
   mitliest. Das Polster am Fuss ist damit wieder so hoch wie oben. */

/* ============ Postfach ============ */

.notice {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--sidebar); border: 1px solid var(--border);
  border-radius: var(--r-gross); padding: 16px 18px; margin-bottom: 22px;
}
.notice-t { font-size: 15px; font-weight: 600; }
.notice-s { font-size: 13.5px; color: var(--muted); margin-top: 3px; max-width: 560px; }
.notice .btn-white { margin-left: auto; }

.mail-row .namecell { gap: 10px; }
.mail-row .dot-unread { width: 7px; flex: 0 0 7px; display: flex; }
.mail-row .from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.mail-row.unread .from,
.mail-row.unread .subj { font-weight: 600; }
.mail-row .subjectcell { flex-direction: column; align-items: flex-start; gap: 2px; overflow: hidden; }
.mail-row .subj { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mail-row .prev { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.tile.av {
  background: var(--panel); color: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}

.mail-meta {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.mail-body { width: 100%; border: 0; min-height: 220px; background: transparent; }

.setup-steps {
  margin: 6px 0 0; padding-left: 20px;
  color: var(--muted); font-size: 13px; line-height: 1.75;
}
.setup-steps strong { color: var(--text); font-weight: 600; }

/* ============ Priorität als Stufen-Anzeige ============ */

.prio {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--muted); cursor: pointer;
  padding: 3px 8px 3px 6px; border-radius: var(--r-feld); white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.prio:hover { background: var(--hover); color: var(--text); }
.prio .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.prio .bars i {
  width: 3px; border-radius: var(--r-teil); background: var(--border);
  transition: background .18s ease, height .18s ease;
}
html[data-theme="light"] .prio .bars i { background: #dcdcdc; }
.prio .bars i:nth-child(1) { height: 5px; }
.prio .bars i:nth-child(2) { height: 8.5px; }
.prio .bars i:nth-child(3) { height: 12px; }
.prio .bars i.on { background: var(--text); }
.prio .plabel { font-variant-numeric: tabular-nums; }
.menu .prio { cursor: inherit; padding: 0; }
.menu .prio:hover { background: none; }

/* ============ Hinweise / Fehler ============

   Es gibt genau eine Fehlermeldung, und sie sieht ueberall gleich aus:
   ein roter Kasten, das Achtungzeichen links, der Text daneben.

   Sie stand vorher dreimal im Stylesheet — einmal fuer den Anmeldebogen,
   einmal fuer Meldungen aus einem Lauf, und an dritter Stelle gar nicht:
   Beim Uebernehmen waren es nackte rote Zeilen ohne Kasten und ohne
   Zeichen. Drei Orte, drei Erscheinungen, und wer eine aenderte, aenderte
   die anderen nicht mit.

   Hier steht der Kasten einmal. Wer eine neue Fehlermeldung baut, nimmt
   .meldung-rot und schreibt den Text hinein — mehr ist nicht zu tun, und
   sie sieht dann aus wie alle anderen. */
.meldung-rot,
.lauf-fehler,
.auth-error {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-flaeche);
  background: color-mix(in srgb, #e5484d 9%, var(--raise));
  border: 1px solid color-mix(in srgb, #e5484d 26%, transparent);
  font-size: 13px; line-height: 1.55; color: var(--text);
}

/* Das Zeichen kommt aus der Maske, damit keine Stelle ihr Markup aendern
   muss, um es zu bekommen. .lauf-fehler bringt seins als SVG mit — es
   sitzt dort neben einem Schliessen-Knopf und gehoert ins Markup. */
.meldung-rot::before,
.auth-error::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px;
  background: #e5484d;
  -webkit-mask: var(--zeichen-achtung) center / contain no-repeat;
  mask: var(--zeichen-achtung) center / contain no-repeat;
}
/* Dieselbe Meldung in Gelb: alles ist angekommen, aber jemand sollte
   hinsehen. Rot bliebe „kaputt" vorbehalten. */
.meldung-rot.gelb {
  background: color-mix(in srgb, #d99a2b 9%, var(--raise));
  border-color: color-mix(in srgb, #d99a2b 30%, transparent);
}
.meldung-rot.gelb::before { background: #d99a2b; }

.meldung-rot > .mr-text { flex: 1; min-width: 0; }
/* Marks Ansage vom 14.09.2026: „jede fehlermeldung soll ein x haben zum
   wegmachen ueberall bitte." Es sitzt oben rechts im Kasten, nicht in
   der Zeile — eine Meldung kann sechs Zeilen hoch sein, und das Kreuz
   gehoert an ihren Anfang. Es erbt die Farbe der Meldung (rot oder
   gelb) statt einer eigenen, damit kein dritter Ton dazukommt. */
.mr-zu {
  flex: none; align-self: flex-start; margin: -3px -4px 0 auto;
  width: 26px; height: 26px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: var(--r-ikon);
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.mr-zu:hover { color: currentColor; background-image: linear-gradient(var(--hover), var(--hover)); }
.mr-zu svg { width: 15px; height: 15px; display: block; }
.meldung-rot b { font-weight: 600; }
/* Die Aufzaehlung darin: eine Zeile je Sache, gedaempft gegen die
   Ueberschrift darueber — die sagt, worum es geht, die Zeilen sagen,
   welche es betrifft. */
.meldung-rot ul { list-style: none; margin: 6px 0 0; padding: 0; }
/* Die einzelne Meldung braucht keinen Punkt — nur denselben Abstand und
   dieselbe gedaempfte Farbe wie die Zeilen einer Aufzaehlung. */
.meldung-rot p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.meldung-rot li {
  font-size: 12.5px; color: var(--muted); padding-left: 12px; position: relative;
  overflow-wrap: anywhere;
}
.meldung-rot li::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 3px; height: 3px; border-radius: 50%; background: currentColor;
}

.notice.error { border-color: var(--border-strong, var(--panel-2)); border-left: 3px solid var(--text); }
.notice-s.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--text); margin-top: 6px;
  background: var(--raise); border-radius: var(--r-feld); padding: 8px 10px;
  white-space: pre-wrap; word-break: break-word;
}
.field-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.55; }

/* ============ Animationen beim Öffnen einer Sektion ============ */

@keyframes pageIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px) }
  to { opacity: 1; transform: none }
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.985) }
  to { opacity: 1; transform: none }
}
@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.96) }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}
@keyframes scrimIn { from { opacity: 0 } to { opacity: 1 } }
/* Fuer das Vollbild eine eigene Einblendung — OHNE die Verschiebung.
 *
 * `.modal` traegt `animation: modalIn ... both`, und `both` haelt den
 * Endzustand der Animation fest: translate(-50%, -50%). Animationswerte
 * schlagen normale CSS-Regeln, also blieb `transform: none` wirkungslos
 * und das Fenster sass um seine halbe Groesse verschoben oben links.
 * Marks Bild vom 03.09.2026, 15:17 und noch einmal 15:25. */
/* Eine ganze Seite blendet nicht auf, sie kommt herein.
 *
 * Marks Ansage vom 09.09.2026: „das uebernehmens fenster wenn man
 * draufdrueckt soll animiert kommen, es ist zu unsauber so, verbuggt."
 *
 * Hier stand ein reines Aufblenden ueber 180 Millisekunden. Bei einem
 * kleinen Fenster faellt das nicht auf; eine SEITE ist dabei aber eine
 * Fünftelsekunde lang durchsichtig, und man sieht zwei Seiten
 * uebereinander — schwarz auf schwarz, mit zwei Texten am selben Platz.
 * Das liest sich nicht als Uebergang, sondern als Fehler.
 *
 * Also zoomt sie herein, wie jedes andere Fenster auch: dieselben
 * vier Prozent, dieselbe Kurve wie modalIn — nur ohne dessen halbe
 * Verschiebung, denn eine Seite steht nicht in der Mitte, sie IST die
 * Flaeche. Marks zweite Ansage dazu: „sie soll so wie andere dinge
 * animiert sein, es soll so reinzoomen langsam."
 *
 * Langsamer als ein Fenster, 320 statt 180 Millisekunden: Eine Seite
 * ist groesser, und derselbe Weg in derselben Zeit wirkt hastig. Das
 * Zoomen loest nebenbei das Durchsichtigkeitsproblem — die beiden
 * Ebenen haben verschiedene Groessen und sind darum als zwei zu
 * erkennen, nicht als ein verwackeltes Bild.
 *
 * Gemessen war der Aufbau ruhig: gleiche Hoehe, gleiche Zahl Kinder vom
 * ersten Bild an, es ruckelte also nichts, es lag nur uebereinander. */
@keyframes modalVollIn {
  from { opacity: 0; transform: scale(.96) }
  35%  { opacity: 1 }
  to   { opacity: 1; transform: none }
}

/* Der Ansichtswechsel blendet ein, er baut sich nicht auf.

   Hier stand eine Staffel: Jedes Kind der Seite stieg einzeln herein,
   mit wachsender Verzoegerung, dieselbe Staffel noch einmal fuer die
   Kacheln darin. Mit `both` heisst das, dass ein Element bis zu seinem
   Einsatz unsichtbar wartet — und wenn der Browser gerade Bilder
   auspackt oder ein Verlauf lang ist, geraet die Reihe aus dem Takt. Man
   sieht die Seite dann nicht erscheinen, sondern stueckweise
   zusammenwachsen, und das sieht kaputt aus statt lebendig.

   Es bleibt bei dem, was der Wechsel wirklich sagen muss: Hier ist etwas
   anderes. Ein kurzes Aufblenden der ganzen Seite, auf einmal. */
/* Die Seite blendet ein — ruhig, nicht hastig.

   Drei Fassungen brauchte es. Erst stieg jedes Kind einzeln herein, mit
   wachsender Verzoegerung: Solange ein Element auf seinen Einsatz
   wartet, ist es unsichtbar, und wenn der Browser dabei Bilder auspackt,
   geraet die Reihe aus dem Takt — die Seite waechst stueckweise
   zusammen, statt zu erscheinen. Dann gar nichts, was zu wenig war: Ein
   Wechsel darf man sehen.

   Bleibt das, was von Anfang an gemeint war, nur langsam genug, um wie
   eine Bewegung auszusehen statt wie ein Zucken: die ganze Seite auf
   einmal, in einem Drittel einer Sekunde. */
.page.anim { animation: pageIn .32s ease both; }

.menu { animation: menuIn .14s ease both; }
/* Das Kreuz oben rechts — Marks Ansage vom 14.09.2026: „mach den
   abbrechen knopf weg stattdessen so ein X oben rechts, ueberall
   anwenden wo es sowas gibt."

   Es liegt ueber dem Inhalt, nicht darin: Ein Fenster rollt, und ein
   Ausgang, der beim Rollen verschwindet, ist keiner. */
.modal-x {
  position: absolute; right: 12px; top: 12px; z-index: 5;
  width: 32px; height: 32px; border-radius: var(--r-feld);
  border: 0; background: none; color: var(--faint);
  display: grid; place-items: center; cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.modal-x:hover { color: var(--text); background: var(--hover); }
.modal-x svg { width: 18px; height: 18px; }
/* Damit die Ueberschrift nicht unter das Kreuz laeuft. */
.modal-inhalt > h3:first-child, .modal-kopf { padding-right: 34px; }

html[data-anim="off"] .scrim, html[data-anim="off"] .toast { animation: none !important; }
.modal { animation: modalIn .18s cubic-bezier(.22, .61, .36, 1) both; }
.scrim { animation: scrimIn .18s ease both; }
.toast { animation: toastIn .22s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes toastIn {
  from { opacity: 0; translate: 10px 0 }
  to { opacity: 1; translate: 0 0 }
}

.nav-item, .rec-item, .tab, .icon-btn, .btn, .btn-white, .list-row, .todo, .card, .user-row {
  transition: background .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease;
}

/* „Weniger Bewegung" galt fuer neun Klassen — gezaehlt am 18.09.2026 auf
   Marks Auftrag „pruefe ueberall animationen": Von fuenfunddreissig
   Stellen mit einer Animation blieben VIERUNDZWANZIG davon unberuehrt.
   Das Aufklappen der Konsole, das Hereinfahren der Schritte, das Atmen
   der Punkte, der Schimmer ueber dem laufenden Knopf — alles lief
   weiter, obwohl der Rechner ausdruecklich das Gegenteil sagt.

   Jetzt gilt es fuer alles. Die vier Zeichen, die ARBEIT anzeigen,
   drehen sich weiter: Ein stehender Kreisel sagt „haengt", nicht „ruhig",
   und wer weniger Bewegung einstellt, will keine ratlose App. Sie stehen
   darum darunter noch einmal — mit ihren eigenen Werten, damit die
   Ausnahme dieselbe Bewegung ist und keine neue. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn.mit-ico.laedt svg { animation: ringDreht 900ms linear infinite !important; }
  .tr-dots i { animation: trDot 1s ease-in-out infinite !important; }
  .up-wahl.laeuft svg,
  .icon-btn.laeuft svg { animation: pulseDot 1.2s ease-in-out infinite !important; }
}

/* ============ Übersicht ============ */

.hero { margin-bottom: 26px; }
.hero-title {
  margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.03em;
}
.hero-sub { color: var(--muted); font-size: 15px; margin-top: 6px; }

.quick { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }
.quick .btn { height: 40px; padding: 0 16px; }
.quick .btn svg { opacity: .8; }

.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px;
}
.metric {
  background: var(--sidebar); border: 1px solid var(--border-soft);
  border-radius: var(--r-flaeche); padding: 16px 18px; text-align: left;
}
.metric:hover { background: var(--hover); }
.metric .mv { font-size: 25px; font-weight: 600; letter-spacing: -.025em; }
.metric .mk { font-size: 13px; color: var(--muted); margin-top: 3px; }

.cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.ov { padding: 16px 18px 12px; }
.ov-head { display: flex; align-items: center; margin-bottom: 10px; }
.ov-head .btn { margin-left: auto; }

.ov-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 8px; margin: 0 -8px; border-radius: var(--r-feld);
  cursor: pointer; min-width: 0;
}
.ov-row:hover { background: var(--hover); }
.ov-row .ov-t {
  flex: 1; min-width: 0; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-row .ov-meta {
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
  flex: 0 0 auto; min-width: 62px; text-align: right;   /* feste Breite, damit alles bündig steht */
  font-variant-numeric: tabular-nums;
}
.ov-row .prio { flex: 0 0 auto; }
.ov-row .ov-meta.strong { color: var(--text); font-weight: 600; }
.ov-row .tile { width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-feld); font-size: 11px; }
.ov-row .prio { padding: 2px 4px; }
.ov-row .prio .plabel { display: none; }

.ov-empty, .ov-note { color: var(--faint); font-size: 13.5px; padding: 10px 0 6px; }
.ov-note { border-top: 1px solid var(--border-soft); margin-top: 8px; }

.chart.mini { height: 78px; gap: 8px; }
.chart.mini .bar-col { width: 30px; }
.chart.mini .bar { width: 20px; }

@media (max-width: 1000px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 28px; }
}

/* ============ Logo ============ */

.logo-btn { display: grid; place-items: center; padding: 0; border-radius: var(--r-feld); }
.logo-btn:hover .mark { transform: scale(1.05); }
.mark {
  display: grid; place-items: center;
  /* Kein eigener Hintergrund — das Zeichen steht frei auf der Fläche
     darunter, damit es auf jedem Hintergrund passt. */
  background: none; color: var(--text);
  border-radius: var(--r-feld);
  transition: transform .16s ease;
}
/* In der Auswahl bleibt eine Fläche, sonst verschwinden helle Zeichen. */
.logo-grid .mark, .pv-logo .mark { background: var(--raise); }
.logo-btn { margin-right: 4px; }

.modal.wide { width: min(620px, calc(100vw - 32px)); }
/* Und eine Rueckfrage darf schmaler sein als ein Formular: Zwei Knoepfe
   und eine Zeile brauchen keine 460 Pixel, und mit ihnen wirkt der Kasten
   wie ein Fenster, in dem etwas fehlt. */
.modal.klein { width: min(400px, calc(100vw - 32px)); padding: 22px; }
.modal.klein h3 { margin-bottom: 10px; font-size: 17px; }
.modal.klein .modal-actions { margin-top: 18px; }
/* Ein Fenster, das laenger wird als der Bildschirm, schnitt unten einfach
   ab — der Knopf darunter war nicht mehr zu erreichen. Jetzt schiebt es
   in sich, und breiter wird es dort, wo zwei Wege nebeneinander passen. */
.modal {
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  /* Das Fenster selbst rollt nicht mehr — der Kasten darin tut es. Nur so
     kann ein Knopf im Rahmen stehen bleiben, waehrend der Inhalt laeuft. */
  overflow: hidden;
}
.modal-inhalt {
  overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto;
  /* Der Rollbalken gehoert an den Rand des Fensters, nicht mitten hinein.

     Der Kasten sass innerhalb des Polsters, also stand auch sein Balken
     vierundzwanzig Pixel vom Rand entfernt — er sah aus, als schwebe er im
     Text. Jetzt reicht der Kasten bis an die Kante und traegt das Polster
     selbst: Der Text steht, wo er stand, der Balken liegt am Rand. */
  margin-right: calc(-1 * var(--modal-pad, 24px));
  padding-right: var(--modal-pad, 24px);
}
/* Ein schmaler Rollbalken, damit die rechte Kante des Textes berechenbar
   bleibt: 24px Polster plus 8px Balken — genau da endet auch der Knopf. */

/* Der Vollbildknopf ist am 11.09.2026 gefallen — Marks Auftrag:
   „entferne den vollbildmodus bei allen popups die es gibt."

   Mit dem Knopf gehen auch seine beiden Stilregeln: die eine fuer seinen
   Platz an der Textkante, die andere fuer den Fall, dass ein Fenster den
   Schalter in seiner eigenen Kopfzeile mitbrachte. Was bleibt, ist
   `.modal.voll` — die Klasse setzt jetzt nur noch „immer-voll", und das
   ist keine Wahl, sondern eine Ansage des einen Fensters, das eine Seite
   ist. */

/* Aufgezogen: so gross wie der Bildschirm es hergibt. Die Mitte bleibt die
   Mitte, damit das Fenster nicht springt. */
/* Vollbild heisst Vollbild.
 *
 * Marks Bitte vom 03.09.2026: „popup vollbild soll wirklich vollbild
 * sein nicht einfach nur das popup größer machen." Hier standen zwoelf
 * Pixel Rand rundum und abgerundete Ecken — das sah aus wie ein
 * groesseres Fenster, nicht wie Vollbild.
 *
 * Kein Rand, keine Ecken, kein Schatten: Das Fenster IST die Seite.
 * inset statt der Mitte-Verschiebung, sonst rechnet der Browser die
 * halbe Breite gegen die Verschiebung und es sitzt schief. */
.modal.voll {
  /* Im Vollbild IST das Fenster die Seite — also traegt es ihren Grund,
     und die klebenden Streifen darin muessen ihn erben.
     GEMESSEN am 04.09.2026, nachdem zweimal geraten wurde: Mit der
     Klasse „voll" steht das Fenster auf rgb(5,5,5) = --bg, ohne sie auf
     rgb(19,19,19) = --raise. Die Kopfzeile stand auf --raise, vierzehn
     Punkte heller — Marks grauer Balken.
     Die Ausnahme stand bisher nur bei „Glas". Sie gilt fuer jedes Thema:
     Der Unterschied zwischen --bg und --raise liegt bei allen dunklen
     Themen zwischen neun und fuenfzehn Punkten und ist immer sichtbar. */
  --fenster-grund: var(--bg);
  /* absolute, NICHT fixed: #overlay ist bereits `fixed; inset: 0`, also
   * der ganze Bildschirm. Ein zweites `fixed` darin bezieht sich auf den
   * naechsten Vorfahren mit transform — und das Fenster klebte oben
   * links, halb abgeschnitten. Marks Bild vom 03.09.2026, 15:17. */
  position: absolute;
  /* Links bleibt die Seitenleiste stehen — Marks Auftrag vom 09.09.2026.
     Ausgespart wird das aber am OVERLAY, nicht hier: Das Fenster liegt
     absolut darin, und beide Aussparungen addieren sich sonst. Marks
     Bild vom 09.09.2026, 18:54 — das Vollbild begann bei 536 Pixeln
     statt bei 268, und links stand die Anzeigenliste offen da. */
  inset: 0;
  /* Die eigene Einblendung — siehe modalVollIn. Sie verschiebt nur
     waehrend des Hereinkommens; danach steht die Seite auf transform:
     none, und das gilt auch fuer das Verschieben von Fenstern, das
     Vollbilder ausnimmt. Etwas laenger als ein Fenster: Eine Seite ist
     groesser, und derselbe Weg in derselben Zeit wirkt hastig. */
  animation-name: modalVollIn;
  animation-duration: .32s;
  transform: none;
  /* Alle drei mit !important — und das ist keine Faulheit.
   *
   * Einzelne Fenster bringen eigene Groessen mit, und sie stehen weiter
   * unten in dieser Datei: `.modal:has(.pruef-zahlen)` setzt 88vh,
   * `.modal:has(#bFreiBox)` 90vh. `:has()` erbt die Staerke seines
   * Arguments, also sind sie genau so stark wie `.modal.voll` — und bei
   * Gleichstand gewinnt, wer spaeter steht. Das Uebernehmen-Fenster
   * traegt den Messbericht, also gewannen dort 88vh: Vollbild bis auf
   * einen Streifen unten. Marks Bild vom 03.09.2026, 15:33.
   *
   * Vollbild heisst Vollbild, egal welches Fenster. Wer hier eine eigene
   * Groesse braucht, schreibt sie unter `.modal:not(.voll)`. */
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0;
  border: none;
  box-shadow: none;
  /* Und es traegt die Kleider der Seite.
   *
   * Rahmen, Ecken und Schatten fallen im Vollbild weg — uebrig bleibt die
   * Flaeche, und die war flach, waehrend die Seite darunter einen Verlauf
   * trug. Auf „Aura", „Tiefe", „Schleier" und „Vignette" sah das Vollbild
   * darum aus wie ein anderes Programm. Wenn das Fenster die Seite IST,
   * nimmt es auch ihren Grund. */
  background-color: var(--bg);
  background-image: var(--bg-img, none);
}
/* Im aufgezogenen Fenster darf der Pruefbericht zweispaltig werden — der
   Platz ist ja da. */
/* Im aufgezogenen Fenster darf der Pruefbericht zweispaltig werden — der
   Platz ist ja da.
 
   Hier standen kurz CSS-Spalten (`columns: 2`), um die Luecken des
   Rasters loszuwerden. Sie brachten einen zweiten Rollbereich: In einem
   Kasten mit begrenzter Hoehe brechen Spalten nach RECHTS weiter, und
   dann rollt man im Fenster und im Bericht zugleich. Marks Meldung vom
   08.09.2026 — und das ist schlimmer als jede Luecke.
 
   Die Luecken loest stattdessen die Verteilung beim Zeichnen: siehe
   pruefSpalten. Das Raster bleibt, was es ist. */
.modal.voll .pruef-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .modal.voll .pruef-liste { grid-template-columns: 1fr; } }

/* Die zwei Spalten, auf die pruefSpalten die Karten verteilt.
 
   Jede ist fuer sich eine Saeule: Die Karten darin stapeln sich dicht,
   und weil beide gleich schwer beladen werden, enden sie ungefaehr auf
   derselben Hoehe. Keine Zeilen, also keine Luecken — und alles rollt im
   Fenster, nicht im Bericht. */
/* Eine Spalte — Marks Ansage vom 09.09.2026: „2 nebeneinander sind zu
   eng." Im Fenster „Ins Projekt uebernehmen" ist eine von zwei Saeulen
   rund 400 Pixel breit, und darin steht ein Vorher/Jetzt-Paar in zwei
   Spalten zu je 180. */
.pruef-saeulen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.pruef-saeule { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.modal.breit { width: min(780px, calc(100vw - 32px)); }

/* Der Knopf, der das Fenster aufmacht: eine Flaeche, kein Umriss —
   Marks Ansage vom 11.09.2026: „der button bei copy und bild waehlen
   soll kein umriss haben sondern schaltflaeche farbe wie bei
   projektauswahl". Gemessen traegt die Projektpille oben rechts
   rgb(28,28,28), also `--panel`, und einen durchsichtigen Rand. */
.lpw-auf { background: var(--panel); border-color: transparent; color: var(--text); }
.lpw-auf:hover { background: var(--hover); }

/* ---- Bild, Copy und Ueberschrift waehlen -----------------------------
 *
 * Marks Wahl vom 11.09.2026 aus je zwanzig Entwuerfen: Bild 07 („Raster
 * auf Karten"), Copy 03 („Karten ohne Rahmen") mit einem Feld fuer eine
 * eigene Copy, Ueberschrift 03 („Zeilen mit Trennlinien") mit dem Tag
 * der Ueberschrift davor.
 *
 * Drei Fenster, ein Kleid: Kopf, Leib und Fuss sind dieselben, nur die
 * Liste darin wechselt. */
.modal.lp-drei-fenster { width: min(460px, calc(100vw - 32px)); }
.modal.lpd-kopf { width: min(520px, calc(100vw - 32px)); }
/* Das Bildfenster ist breiter — Marks Ansage vom 11.09.2026: „mach das
   bilder popup breiter und die bilder ratio 1:1". Drei Quadrate
   nebeneinander brauchen mehr Platz als drei Streifen. Das Copyfenster
   ebenso: „copy popup auf diese groesse machen" — ein Anriss ueber zwei
   Zeilen braucht Breite, sonst steht dort ein Wort je Zeile. */
.modal.lpd-bild, .modal.lpd-copy { width: min(640px, calc(100vw - 32px)); }
.lpd-kopfzeile { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* Dieselbe Ueberschrift wie in jedem anderen Fenster — Marks Ansage vom
   12.09.2026: „bei bild waehlen copy waehlen etc soll die headline
   genauso gross sein wie bei anderen popups." Das ist `.modal h3`: 19
   Punkte, halbfett, eine Spur enger gesetzt. */
.lpd-kopfzeile b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.lpd-leib { display: flex; flex-direction: column; gap: 12px; }
.lpd-leer { font-size: 12px; color: var(--faint); padding: 8px 0; }

/* Bild, Entwurf 005 aus hundert — Marks Wahl vom 17.09.2026: „mach 005
   fuer bildvorschau aber mit dem schon genutzt/uebrig unterteilung."

   005 hiess „Kontaktbogen": sieben je Reihe, sechs Pixel Luft, kein
   Tag. Eine Kachel ist damit zweiundachtzig Pixel breit — gross genug,
   um ein Motiv zu erkennen, klein genug, dass zwanzig Bilder ohne
   Rollen dastehen. Genau das ist der Sinn eines Kontaktbogens: Man
   sucht mit dem Auge, nicht mit dem Zeiger.

   Die Unterteilung bleibt, sie war Marks Zusatz. */
.lpd-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* Die Ueberschrift der Gruppe — was im Aufbau schon verwendet wird,
   steht oben. */
.lpd-grp {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 2px;
}
.lpd-grp span { color: var(--schleier-4); margin-left: 6px; }
.lpd-grp.lpd-grp2 { margin-top: 4px; }

/* Die Lade von rechts ist wieder gegangen — Marks Ansage vom
   17.09.2026: „bild vorsschau 50 neue als popup selbe groesse wie vorher
   wieder." Ihre Regeln standen hier; `lpd-lade` wird nirgends mehr
   vergeben. */

/* „volles bild einfach" — Marks Ansage vom 11.09.2026. Ohne Knopf zum
   Bestaetigen braucht die Kachel keine Markierung und keinen Rahmen
   darum: Ein Klick waehlt und schliesst. Das Polster faellt damit auch,
   das Bild fuellt die Kachel. */
.lpd-b {
  background: none; border: 0; border-radius: var(--r-feld); padding: 0;
  cursor: pointer; font: inherit; color: inherit; text-align: left; min-width: 0;
}
/* Quadratisch, wie die Anzeige selbst im Feed: `aspect-ratio` statt
   einer festen Hoehe — sonst schneidet die Kachel ein hohes Bild oben
   und unten ab und zeigt nur einen Streifen. */
.lpd-b img, .lpd-bph {
  width: 100%; aspect-ratio: 1; height: auto; object-fit: cover;
  border-radius: var(--r-feld); display: block; background: var(--raise);
}
/* Im Kontaktbogen steht kein Tag auf dem Bild, und beim Hinfahren
   passiert nichts — Marks Ansage vom 17.09.2026: „mach den hover effekt
   bei bildervorschau im launchpad weg wenn man bild auswaehlt."

   Das ist stimmig mit Entwurf 005: Ein Kontaktbogen ist zum Sehen da,
   nicht zum Befragen. Ein Schriftband, das unter dem Zeiger auf- und
   zuklappt, macht aus zwanzig ruhigen Kacheln zwanzig zuckende. Wer
   wissen will, welches Bild das ist, haelt still — dann nennt es der
   Kasten des Browsers, und der steht auch dem offen, der mit der
   Tastatur geht.

   Der Tag steht darum im Titel des Knopfes und nirgends sonst; das
   Schriftband im Bild ist mitsamt seiner Klasse gegangen. */
.lpd-b { position: relative; border-radius: var(--r-feld); overflow: hidden; }
/* Hochladen als Kachel: ein Viereck mit Ecken, dezentem Umriss und dem
   Pfeil darin — Marks Ansage vom 11.09.2026: „bild hochladen soll ein
   edged viereck sein mit upload icon keine strichellinie aber dezenter
   umriss." Vorher stand darunter eine Textzeile mit einem Plus. */
/* Der Stil der Hochladekachel steht bei `.img-add` — beide teilen ihn
   sich seit dem 17.09.2026, weil es derselbe Handgriff ist. */
/* Die Hochladekachel traegt keinen Namen mehr — sie ist an ihrem
   Zeichen zu erkennen, und eine Zeile „Hochladen" unter einem Pfeil
   nach oben sagt nichts dazu. */

/* Copy, Entwurf 03: Karten ohne Rahmen, nur eine Flaeche. */
.lpd-liste { display: flex; flex-direction: column; gap: 6px; }
/* Mit sanftem Umriss, wie das Feld ausserhalb des Fensters — Marks
   Ansage vom 11.09.2026: „umrisse um die copy schaltflaeche sanfte so
   wie bevor dem popup." */
.lpd-c {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--r-feld); background: var(--lp-wahl);
  cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.lpd-c b { font-size: 12px; font-weight: 600; }
.lpd-c em {
  font-style: normal; font-size: 11.5px; color: var(--faint); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lpd-c:hover { background: var(--hover); }
.lpd-c:hover em { color: var(--muted); }

/* Ueberschrift, Entwurf 03: Zeilen mit Trennlinien, gewaehlt traegt
   links einen Strich. Davor steht ihr Tag — Marks Zusatz „aber mit
   headline tag": Er sagt, woher die Zeile kommt, so wie die Copy ihren
   Namen traegt. */
/* Karten statt Zeilen — Marks Wahl vom 12.09.2026 aus zwanzig
   Entwuerfen: Nummer 03. Jede Ueberschrift steht auf einer eigenen
   Flaeche, die Herkunft klein darueber, der Text darunter. Das
   Gewaehlte traegt einen Umriss statt einer zweiten Farbe.

   Vorher war es eine Liste mit Trennlinien; bei drei Zeilen las sie sich
   wie eine Tabelle. Eine Ueberschrift ist aber ein Stueck Text, das man
   beurteilt, nicht ein Wert in einer Spalte. */
.lpd-hliste { display: grid; gap: 8px; }
.lpd-h {
  display: grid; gap: 3px; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: var(--r-feld);
  border: 1px solid var(--border); background: var(--lp-wahl);
  cursor: pointer; font: inherit; color: inherit;
}
.lpd-h:hover { background: var(--hover); }
/* Das Gewaehlte zeigt sich ueber die FLAECHE, nicht ueber einen zweiten
   Ring — Marks Meldung vom 21.09.2026: „der umriss der einzelnen
   headline karten ist fetter und heller als bei copy, es soll aussehen
   wie bei copy auswahl."

   Er hat genau gesehen, was hier stand: ein `inset`-Ring von
   vierundzwanzig Prozent Schrift, gezeichnet UEBER den Rand aus
   `--border`. Zwei Ringe uebereinander, und der obere viermal heller —
   die Copy-Karte daneben hatte nur den einen.

   Die Flaeche loest beides: kein Umriss mehr, und trotzdem sieht man,
   was gewaehlt ist. Dieselbe Regel gilt jetzt fuer beide, damit „wie bei
   Copy" auch morgen noch stimmt. */
.lpd-h.an, .lpd-c.an { background: var(--hover); }
.lpd-htag {
  font-size: 10.5px; color: var(--faint); letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.lpd-ht {
  min-width: 0; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Selbst eintragen: ein Feld, eine Zeile mit Plus — nichts Gestricheltes. */
.lpd-neu {
  padding: 7px 2px; border: 0; background: none; color: var(--faint);
  font: inherit; font-size: 12px; cursor: pointer; text-align: left;
}
.lpd-neu:hover { color: var(--text); }
.lpd-feld {
  width: 100%; padding: 9px 11px; border-radius: var(--r-feld);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font: inherit; font-size: 12.5px; outline: 0;
}
/* Hier stand ein mehrzeiliges Feld mit Ziehgriff und einem Knopf
   daneben. Marks Ansage vom 11.09.2026: „bei copy unten das feld soll
   aussehen wie bei headline, ohne uebernehmen button ohne groesser
   machen funktion der zeile, mit enter bestaetigen." */

/* Hier stand der Fuss mit „Uebernehmen". Marks Ansage vom 11.09.2026:
   „das uebernehmen button weg beim draufdruecken soll immer ausgewaehlt
   werden" — ein Klick waehlt und schliesst. */

/* Und im Formular sind Bild, Copy und Ueberschrift selbst der Knopf —
   in derselben Form wie die Zeilen unter „Anzeigen in dieser Gruppe":
   eine Flaeche statt eines Umrisses, und beim Hinfahren dieselbe Farbe.
   Marks Ansage vom 11.09.2026: „genauso wie hier copy und bild und
   headline kein umriss sondern diese schaltflaeche wie bei anzeigen in
   dieser gruppe beim hovern dann selbe farbe, schau in code und
   uebernehme das." Nachgesehen: `.lp-form .lp-lzw` traegt `--raise` und
   faerbt sich beim Hovern zu `--panel`. */
/* Dieselbe Schaltflaeche wie die Zeilen unter „Anzeigen in dieser
   Gruppe" — Marks Ansage vom 11.09.2026: „bei bild, copy und headline
   die selbe umrandung wie bei adset level anzeigen in dieser gruppe,
   selbe schaltflaeche also." Nachgesehen: `.lp-form .lp-lzw` traegt
   `--raise`, einen Rahmen in `--border` und zehn Radius. */
/* Der Umriss bleibt, die Fuellung ist die des Fensters — Marks Ansage
   vom 12.09.2026: „der umriss soll bleiben das passt aber die
   ausgefuellte flaeche soll nicht heller sein sondern in der popup farbe
   nur beim hovern eben." Heller wird sie also erst unter dem Zeiger. */
.up-medium.waehlbar, .up-lesefeld.waehlbar, .up-fest.waehlbar {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--lp-feld, var(--bg)); border: 1px solid var(--lp-rand, var(--border)); border-radius: var(--r-feld);
}
/* Doch ein Hover, und zwar derselbe wie eine Ebene hoeher — Marks Ansage
   vom 12.09.2026: „bei ad ebene wenn man auf bild headline und copy
   hovert soll die selbe farbe kommen wie bei adset ebene bei anzeigen in
   dieser gruppe."

   Am 11.09. war er weg („entferne den hover effekt bei copy, bild und
   headline in ad section"), weil drei Flaechen nacheinander aufleuchteten
   und die Maske unruhig machten. Der Unterschied ist die Farbe: Die
   Zeilen in „Anzeigen in dieser Gruppe" gehen auf `--panel`, und das ist
   ein Schritt, kein Sprung. */
.up-medium.waehlbar:hover, .up-lesefeld.waehlbar:hover, .up-fest.waehlbar:hover {
  background: var(--hover);
}
/* Die Flaechenregel der Launchpad-Seite setzt das Lesefeld auf den Grund
   — hier soll es die Schaltflaeche tragen, also steht das danach. */
/* Fuenf Zeilen, dann ist Schluss — bis jemand aufklappt. Marks Ansage
   vom 11.09.2026: „copy soll standard maessig auf so 5 zeilen begrent
   sein man kann aufklappen einfach."

   Die Grenze hing an `.waehlbar`, also nur an einem Feld, das man
   anklicken kann. Kommt die Copy aus der Anzeigengruppe, ist das Feld
   aber kein Knopf mehr, sondern eine Auskunft — und stand damit in
   voller Laenge da. Marks Meldung vom 12.09.2026: „auf ad ebene ist die
   ganze copy ausgeklappt statt zu … es soll zugeklappt sein und
   scrollable mit dem ganze Copy anzeigen button." Die Grenze gehoert
   also ans Feld, nicht an seine Bedienbarkeit. */
/* Vier Zeilen, dann ist Schluss — und NICHT rollbar: Marks Ansage vom
   12.09.2026: „bei copys sollen nur die ersten 4 Zeilen angezeigt
   werden, kein scrollable feature mehr." Ein Kasten, in dem man rollt,
   sieht aus wie ein Feld, in dem man schreibt; wer mehr lesen will,
   klappt auf. */
/* Die Begrenzung traegt der TEXT, nicht das Feld — Marks Ansage vom
   12.09.2026: „der ganze Copy Anzeigen button soll im Feld unter der
   Copy sein." Laege sie am Feld, waere der Schalter darin gleich
   mit abgeschnitten. */
.up-lesetext { display: block; max-height: calc(1.5em * 4); overflow: hidden; }
.up-lesefeld.offen .up-lesetext { max-height: none; }
/* Der Schalter steht an derselben Kante wie die Copy darueber und
   dichter daran — Marks Ansage vom 12.09.2026: „der ganze Copy anzeigen
   button muss links aligned sein mit der Copy darueber und etwas naeher
   dran."

   Er war ein `inline-block`, und davor stand im Markup ein Zeilenumbruch:
   Der zaehlt als Leerzeichen und schob ihn um dessen Breite nach rechts.
   Als Block gibt es diesen Leerraum nicht; `fit-content` haelt die
   Klickflaeche trotzdem so schmal wie der Text. */
.up-lesefeld .lp-mehrzeilen { display: block; width: fit-content; margin-top: 6px; }
.lp-mehrzeilen {
  padding: 0; border: 0; background: none;
  color: var(--faint); font: inherit; font-size: 12px; cursor: pointer;
}
.lp-mehrzeilen:hover { color: var(--text); }
.lp-seite .up-lesefeld.waehlbar, .lp-seite .up-fest.waehlbar { background: var(--lp-feld, var(--bg)); }
/* Und dieselbe Farbe beim Vorbeifahren wie am Bild — Marks Meldung vom
   12.09.2026: „bei copy und headline wenn man drueber hovert dasselbe
   wie bei bild bitte."

   Am Bild wirkte der Hover sofort, an den beiden anderen nicht: Die
   Zeile darueber setzt ihren Grund mit drei Klassen, der Hover mit zwei
   plus Pseudoklasse — gleiche Spezifitaet, und die spaetere gewinnt.
   Also steht der Hover fuer diese beiden hier, eine Zeile danach. */
.lp-seite .up-lesefeld.waehlbar:hover, .lp-seite .up-fest.waehlbar:hover {
  background: var(--hover);
}

.shop-zwei { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 680px) { .shop-zwei { grid-template-columns: 1fr; } }
.logo-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.logo-opt {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 6px 12px; border-radius: var(--r-flaeche);
  border: 1px solid var(--border); background: var(--raise);
}
.logo-opt:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.logo-opt.on { border-color: var(--text); background: var(--panel); }
.logo-name { font-size: 12px; color: var(--muted); }
.logo-opt.on .logo-name { color: var(--text); }

@media (max-width: 620px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Postfach: Umschlag-Kachel mit Punkt für Ungelesen */
.tile.mailtile { position: relative; color: var(--muted); overflow: visible; }
.list-row:hover .tile.mailtile,
.ov-row:hover .tile.mailtile { color: var(--text); }
.tile.mailtile.unread { color: var(--text); }
.tile.mailtile.unread::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text); border: 2px solid var(--bg);
}
.list-row:hover .tile.mailtile.unread::after { border-color: var(--raise); }

/* To-Do: Prioritätsfilter */
.tab.prio-tab { padding: 0 10px; display: inline-flex; align-items: center; }
.tab.prio-tab .prio { padding: 0; color: inherit; }
.tab.prio-tab .prio:hover { background: none; }
.tab.prio-tab.on .prio .plabel { color: var(--text); }
/* Der Knopf, der in dieser Stufe eine Aufgabe anlegt.

   Ganz rechts in der Abschnittszeile, wo sonst nichts steht, und leise:
   Er taucht auf, wenn der Zeiger die Zeile beruehrt, und verschwindet
   wieder. Eine Ueberschrift soll eine Ueberschrift bleiben und nicht wie
   eine Werkzeugleiste aussehen. Auf dem Tastweg — kein Zeiger, kein
   Schweben — steht er immer da. */
.group-title { position: relative; }
.gruppe-neu {
  margin-left: auto; display: grid; place-items: center;
  width: 24px; height: 24px; border: 0; border-radius: var(--r-teil);
  background: none; color: var(--muted); cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.gruppe-neu svg { width: 15px; height: 15px; }
.group-title:hover .gruppe-neu,
.gruppe-neu:focus-visible { opacity: 1; }
.gruppe-neu:hover { background: var(--hover); color: var(--text); }

/* Was im Zielprojekt schon liegt — am Knopf, leise. Es beantwortet die
   Frage, die sonst erst nach dem Lauf auftaucht: „Nichts zu tun" heisst
   entweder, dass alles schon da ist, oder dass man auf den falschen
   Ordner zeigt. */
/* Der Hinweis auf den doppelten Namen. Er steht unter dem Feld und ist
   leise: eine Auskunft, kein Fehler. Leer bleibt er unsichtbar, ohne Platz
   zu beanspruchen. */
.proj-doppelt:not(:empty) {
  margin: -8px 0 14px; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.proj-doppelt:not(:empty)::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: #d99a2b;
}

.ctag-drin {
  font-style: normal; margin-left: 7px; padding-left: 7px;
  border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums;
}
@media (hover: none) { .gruppe-neu { opacity: .55; } }

.group-title .prio { padding: 0; cursor: default; color: var(--muted); }
.group-title .prio:hover { background: none; }

/* ============ Einstellungen: Hintergründe, Schrift, Dichte, Bewegung ============ */

:root { --font-ui: "Söhne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
body { font-family: var(--font-ui); }

html[data-font="grotesk"] { --font-ui: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; }
html[data-font="rounded"] { --font-ui: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui, sans-serif; }
html[data-font="serif"]   { --font-ui: Charter, Georgia, "Iowan Old Style", "Times New Roman", serif; }
html[data-font="mono"]    { --font-ui: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace; }

/* Marks Wahl vom 23.09.2026: Entwurf 02, „Tiefer Kontrast". Dieselbe
   Idee wie „Tiefschwarz", aber die Stufen liegen weiter auseinander —
   Karten treten deutlicher hervor, ohne dass eine Kante noetig waere.
   Der Grund ist reines Schwarz, die Schrift reines Weiss. */
html[data-theme="dark"][data-bg="kontrast"] { --sidebar: #000; --bg: #000; --raise: #161616; --panel: #232323; --panel-2: #303030; --border: #2a2a2a; --border-soft: #1c1c1c; --trennung: #2a2a2a; --trennung-soft: #1c1c1c; --text: #fff; --muted: #a8a8a8; --faint: #707070; }
html[data-theme="dark"][data-bg="coal"]     { --sidebar: #0f0f0f; --bg: #161616; --raise: #1f1f1f; --panel: #292929; --panel-2: #333; --border: #272727; --border-soft: #1e1e1e; }
html[data-theme="dark"][data-bg="graphite"] { --sidebar: #171717; --bg: #212121; --raise: #2a2a2a; --panel: #333; --panel-2: #3c3c3c; --border: #313131; --border-soft: #262626; }
html[data-theme="light"][data-bg="mist"]    { --sidebar: #f2f2f2; --bg: #fafafa; --raise: #ededed; --panel: #e6e6e6; --panel-2: #dcdcdc; --border: #e0e0e0; --border-soft: #eaeaea; }
html[data-theme="light"][data-bg="stone"]   { --sidebar: #eaeaea; --bg: #f4f4f4; --raise: #e3e3e3; --panel: #dadada; --panel-2: #d0d0d0; --border: #d8d8d8; --border-soft: #e2e2e2; }

/* Die Flaeche, die im Haus „gewaehlt" heisst, gehoert zum Thema —
   Marks Meldung vom 12.09.2026: „schau mal drueber das alle popups sich
   den theme anpassen bei copy auswaehlen z.B im glas mode sind die copy
   felder trotzdem dunkel."

   `--lp-wahl` stand als feste Zahl in der Wurzel: #0e0e0e, gemessen fuer
   Tiefschwarz. Auf Kohle (Grund #161616) lag sie DUNKLER als die Seite,
   auf Glas war sie ein schwarzer Fleck auf dem Verlauf. Sie traegt die
   Copy-Karten, die Ueberschriften, den aktiven Eintrag in der Leiste und
   die Felder im Launchpad — also ueberall dort, wo es auffiel.

   Jedes Thema nennt jetzt seinen eigenen Wert, und auf Glas ist es kein
   Ton, sondern ein Schleier. */
html[data-theme="dark"][data-bg="coal"]     { --lp-wahl: #1c1c1c; }
html[data-theme="dark"][data-bg="graphite"] { --lp-wahl: #282828; }
html[data-theme="light"][data-bg="mist"]    { --lp-wahl: #e8e8e8; }
html[data-theme="light"][data-bg="stone"]   { --lp-wahl: #dedede; }
html[data-bg="glas"] {
  --lp-wahl: var(--raise);
  --lp-wahl-rand: var(--border);
}

/* --- Hintergründe mit Verlauf ---------------------------------------------
   --bg trägt die Grundfarbe, --bg-img den Verlauf darüber. Die hellen Stellen
   des Verlaufs (--gA, --gB) werden mit der gewählten Farbe gemischt; bei
   „Neutral" ist der Anteil 0 %, dann bleibt alles grau wie zuvor. */

:root {
  --tint: #8a8a8a;
  --tint-mix: 26%;
  --gA-base: #191919;
  --gB-base: #101010;
  --gA: color-mix(in srgb, var(--tint) var(--tint-mix), var(--gA-base));
  --gB: color-mix(in srgb, var(--tint) var(--tint-mix), var(--gB-base));
}

html[data-tintstr="soft"]   { --tint-mix: 14%; }
html[data-tintstr="mid"]    { --tint-mix: 26%; }
html[data-tintstr="strong"] { --tint-mix: 46%; }

html[data-tint="blue"]     { --tint: #4a90d9; }
html[data-tint="violet"]   { --tint: #8e6cd9; }
html[data-tint="teal"]     { --tint: #3aa8a0; }
html[data-tint="green"]    { --tint: #3fa76a; }
html[data-tint="amber"]    { --tint: #d2963f; }
html[data-tint="rose"]     { --tint: #d1698f; }
html[data-tint="crimson"]  { --tint: #c8484d; }
/* muss nach den Stärken stehen, damit Neutral immer gewinnt */
html[data-tint="neutral"]  { --tint: #8a8a8a; --tint-mix: 0%; }

.main { background-color: var(--bg); background-image: var(--bg-img, none); }

html[data-theme="dark"][data-bg="fade"] {
  --sidebar: #000; --bg: #060606; --raise: #151515; --panel: #1e1e1e; --panel-2: #262626; --border: #1f1f1f; --border-soft: #171717;
  --gA-base: #191919; --gB-base: #0a0a0a;
  --bg-img: linear-gradient(180deg, #000 0%, var(--gB) 45%, var(--gA) 100%);
}
html[data-theme="dark"][data-bg="aura"] {
  --sidebar: #000; --bg: #070707; --raise: #161616; --panel: #1f1f1f; --panel-2: #272727; --border: #202020; --border-soft: #181818;
  --gA-base: #262626;
  --bg-img: radial-gradient(900px 560px at 16% -12%, var(--gA) 0%, rgba(0, 0, 0, 0) 68%);
}
html[data-theme="dark"][data-bg="depth"] {
  --sidebar: #060606; --bg: #0a0a0a; --raise: #191919; --panel: #232323; --panel-2: #2b2b2b; --border: #232323; --border-soft: #1a1a1a;
  --gA-base: #1a1a1a; --gB-base: #171717;
  --bg-img: linear-gradient(135deg, var(--gA) 0%, #050505 52%, var(--gB) 100%);
}
html[data-theme="dark"][data-bg="veil"] {
  --sidebar: #050505; --bg: #0b0b0b; --raise: #1a1a1a; --panel: #242424; --panel-2: #2c2c2c; --border: #242424; --border-soft: #1b1b1b;
  --gA-base: #232323; --gB-base: #1d1d1d;
  --bg-img:
    radial-gradient(620px 420px at 78% 8%, var(--gA) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(520px 460px at 12% 88%, var(--gB) 0%, rgba(0, 0, 0, 0) 66%);
}
html[data-theme="dark"][data-bg="vignette"] {
  --sidebar: #000; --bg: #0d0d0d; --raise: #1b1b1b; --panel: #252525; --panel-2: #2d2d2d; --border: #252525; --border-soft: #1c1c1c;
  --gA-base: #1a1a1a;
  --bg-img: radial-gradient(120% 100% at 50% 45%, var(--gA) 0%, #0d0d0d 48%, #000 100%);
}

html[data-theme="light"][data-bg="fade"] {
  --sidebar: #fbfbfb; --bg: #fff; --raise: #f3f3f3; --panel: #eaeaea; --panel-2: #e1e1e1; --border: #e4e4e4; --border-soft: #eeeeee;
  --gA-base: #ebebeb; --gB-base: #fafafa;
  --bg-img: linear-gradient(180deg, #fff 0%, var(--gB) 45%, var(--gA) 100%);
}
html[data-theme="light"][data-bg="aura"] {
  --sidebar: #fafafa; --bg: #fdfdfd; --raise: #f2f2f2; --panel: #e9e9e9; --panel-2: #e0e0e0; --border: #e3e3e3; --border-soft: #ededed;
  --gA-base: #ededed;
  --bg-img: radial-gradient(900px 560px at 16% -12%, #ffffff 0%, var(--gA) 72%);
}
html[data-theme="light"][data-bg="depth"] {
  --sidebar: #f6f6f6; --bg: #fafafa; --raise: #efefef; --panel: #e6e6e6; --panel-2: #dddddd; --border: #e0e0e0; --border-soft: #eaeaea;
  --gA-base: #f0f0f0; --gB-base: #fbfbfb;
  --bg-img: linear-gradient(135deg, #ffffff 0%, var(--gA) 52%, var(--gB) 100%);
}
html[data-theme="light"][data-bg="veil"] {
  --sidebar: #f7f7f7; --bg: #f9f9f9; --raise: #eeeeee; --panel: #e5e5e5; --panel-2: #dcdcdc; --border: #dfdfdf; --border-soft: #e9e9e9;
  --gA-base: #ffffff; --gB-base: #f0f0f0;
  --bg-img:
    radial-gradient(620px 420px at 78% 8%, var(--gA) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(520px 460px at 12% 88%, var(--gB) 0%, rgba(255, 255, 255, 0) 66%);
}
html[data-theme="light"][data-bg="vignette"] {
  --sidebar: #f4f4f4; --bg: #f7f7f7; --raise: #ededed; --panel: #e4e4e4; --panel-2: #dbdbdb; --border: #dedede; --border-soft: #e8e8e8;
  --gA-base: #e6e6e6;
  --bg-img: radial-gradient(120% 100% at 50% 45%, #ffffff 0%, #f4f4f4 48%, var(--gA) 100%);
}

/* zoom skaliert auch die 100vh-Box — Höhe gegenrechnen, sonst endet die
   Seitenleiste vor dem Fensterrand und das Profil schwebt zu weit oben. */
html[data-size="sm"] #app { zoom: .93; height: calc(100vh / .93); }
html[data-size="lg"] #app { zoom: 1.09; height: calc(100vh / 1.09); }

/* Marks Wahl vom 23.09.2026: Entwurf 14, „Kantig — rechte Winkel
   ueberall". Es gab die Einstellung schon, sie setzte aber `--r-klein`
   (4 Pixel) — das ist leicht gerundet, nicht kantig, und sie tat es nur
   an sechzehn namentlich genannten Bauteilen.

   Jetzt faellt die ganze Radiusleiter auf null, und damit folgt alles:
   auch die Kachel, die morgen dazukommt. Die Liste darunter bleibt
   stehen, weil einige Bauteile ihre Rundung an anderer Stelle
   ueberschreiben und die Variable dort nicht erreichen.

   `--r-pille` bleibt rund: Der Sendeknopf ist ein Kreis mit einem Pfeil
   darin, und ein Quadrat mit Pfeil sieht nicht kantig aus, sondern
   falsch. Dasselbe gilt fuer Profilbilder.

   `--r-knopf` und `--r-ikon` stehen hier ausdruecklich NICHT: Sie
   duerfen im ganzen Blatt genau einmal erklaert werden, sonst haengt
   die Knopfform wieder an der Umgebung — im Launchpad war das schon
   einmal der Fehler, und ein Waechter haelt es seitdem fest. Die
   Knoepfe werden darum weiter namentlich eckig gemacht, nicht ueber
   ihre Sprosse. */
html[data-radius="sharp"] {
  --r-klein: 0; --r-feld: 0; --r-teil: 0; --r-flaeche: 0; --r-gross: 0;
}
html[data-radius="sharp"] .btn, html[data-radius="sharp"] .btn-white, html[data-radius="sharp"] .tab,
html[data-radius="sharp"] .search, html[data-radius="sharp"] .composer, html[data-radius="sharp"] .chip,
html[data-radius="sharp"] .metric, html[data-radius="sharp"] .card-box, html[data-radius="sharp"] .modal,
html[data-radius="sharp"] .menu, html[data-radius="sharp"] .nav-item, html[data-radius="sharp"] .rec-item,
html[data-radius="sharp"] .tile, html[data-radius="sharp"] .icon-btn, html[data-radius="sharp"] .bcol,
html[data-radius="sharp"] .card, html[data-radius="sharp"] .notice { border-radius: 0; }

html[data-radius="soft"] .btn, html[data-radius="soft"] .btn-white, html[data-radius="soft"] .tab,
html[data-radius="soft"] .search, html[data-radius="soft"] .composer, html[data-radius="soft"] .chip { border-radius: var(--r-teil); }
html[data-radius="soft"] .metric, html[data-radius="soft"] .card-box, html[data-radius="soft"] .bcol,
html[data-radius="soft"] .notice { border-radius: var(--r-gross); }
html[data-radius="soft"] .modal { border-radius: var(--r-gross); }
html[data-radius="soft"] .menu, html[data-radius="soft"] .card { border-radius: var(--r-gross); }
html[data-radius="soft"] .nav-item, html[data-radius="soft"] .rec-item,
html[data-radius="soft"] .icon-btn, html[data-radius="soft"] .tile { border-radius: var(--r-flaeche); }

html[data-density="compact"] .list-row { min-height: 46px; }
html[data-density="compact"] .nav-item { height: 34px; }
html[data-density="compact"] .rec-item { height: 32px; }
html[data-density="compact"] .page { padding-top: 30px; padding-bottom: 60px; }
html[data-density="compact"] .todo { padding: 8px 12px; }
html[data-density="airy"] .list-row { min-height: 74px; }
html[data-density="airy"] .nav-item { height: 44px; }
html[data-density="airy"] .rec-item { height: 42px; }
html[data-density="airy"] .page { padding-top: 60px; }
html[data-density="airy"] .todo { padding: 16px 12px; }

html[data-anim="off"] * { transition: none !important; }

/* Der Wechsel selbst dauert laenger oder kuerzer — die Kinder haben
   keine eigene Bewegung mehr, an der sich etwas einstellen liesse. */
html[data-speed="slow"] .page.anim { animation-duration: .5s; }
html[data-speed="fast"] .page.anim { animation-duration: .18s; }
html[data-speed="slow"] .panel, html[data-speed="slow"] .modal { animation-duration: .34s; }
html[data-speed="fast"] .panel, html[data-speed="fast"] .modal { animation-duration: .1s; }

.set-list { max-height: 62vh; overflow: auto; padding-right: 4px; }
.set-group {
  font-size: 12px; font-weight: 600; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 30px 0 14px; padding-top: 22px;
  /* Aus der Textfarbe gemischt statt fester Rahmenfarbe — so bleibt die
     Linie in jedem Modus und auf Glas gleich gut sichtbar. */
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.set-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 7px 0; flex-wrap: wrap; }
.set-label { flex: 0 0 100px; font-size: 14px; color: var(--muted); }
.set-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.set-opt {
  height: 34px; padding: 0 14px; border-radius: var(--r-teil);
  border: 1px solid var(--border); font-size: 13.5px; color: var(--muted);
}
.set-opt:hover { background: var(--hover); color: var(--text); }
.set-opt.on { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 500; }

/* ============ Eigener Datums-Button und Kalender ============ */

.datefield {
  display: inline-flex; align-items: center; gap: 7px;
  font-variant-numeric: tabular-nums;   /* gleiche Ziffernbreite, dadurch bündig */
  height: 32px; padding: 0 11px; border-radius: var(--r-teil);
  border: 1px solid var(--border); font-size: 14px; color: var(--text);
  white-space: nowrap;
}
.datefield:hover { background: var(--hover); }
.datefield .dfico { display: grid; place-items: center; color: var(--faint); }
.datefield .dftext.ph { color: var(--faint); }
.datefield.plain { border-color: transparent; padding: 0 6px; color: var(--muted); }
.datefield.plain:hover { color: var(--text); }
.datefield.tiny { height: 22px; font-size: 12.5px; gap: 5px; }
.datefield.mini { height: 34px; background: var(--raise); border-radius: var(--r-teil); }

.menu.menu-cal { overflow: visible; padding: 8px; min-width: 0; }

.cal { width: 252px; }
/* Drei gleiche Knoepfe, nicht zwei Texte und eine Flaeche — Marks
   Meldung vom 12.09.2026: „das datum fenster ist ueberall unsauber."
   `--raise` liegt auf dem Grund des Menues so dicht, dass „Heute" und
   „+7 Tage" wie Beschriftungen aussahen und nur das Gewaehlte wie ein
   Knopf. Jetzt tragen alle drei denselben Umriss; gefuellt ist, was
   gewaehlt ist. */
.cal-quick { display: flex; gap: 6px; margin-bottom: 10px; }
/* Marks Ansage vom 15.09.2026: „die werte hier oben beim datum sollen
   kein umriss haben nur hover effekt." Drei Umrisse nebeneinander ueber
   einem Kalender, der selbst keine hat, lasen sich wie eine zweite
   Werkzeugleiste. */
.menu .cal-quick button, .cal-quick button {
  flex: 1; height: 30px; padding: 0; border-radius: var(--r-feld); font-size: 12.5px;
  display: grid; place-items: center;
  color: var(--muted); background: none; border: 0;
}
.cal-quick button:hover { color: var(--text); background: var(--hover); }
/* Und gewaehlt heisst hier dasselbe wie ueberall: eine Stufe heller, kein
   Akzentton — siehe .cal-day.sel. */
.cal-quick button.on { background: var(--panel-2); color: var(--text); font-weight: 500; }

.cal-head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.cal-title {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 8px; border-radius: var(--r-feld);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.cal-title:hover { background: var(--hover); }
.cal-caret { display: grid; place-items: center; color: var(--faint); }
.cal-head .icon-btn { width: 28px; height: 28px; font-size: 17px; line-height: 1; }

.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week span {
  text-align: center; font-size: 10.5px; color: var(--faint);
  padding-bottom: 5px; letter-spacing: .04em;
}
/* Ein Tag ist ein Quadrat. Gemessen stand er auf 36,8 mal 31,5 — die
   gewaehlte Flaeche lag damit als breites Rechteck im Raster, und das
   war der zweite Teil von „unsauber". */
/* `.menu button` macht jeden Knopf im Menue 100 % breit mit Polster —
   der Kalender steht in einem Menue, und darum waren seine Tage keine
   Quadrate, sondern Streifen. Hier zaehlt die staerkere Regel. */
.menu .cal-day, .cal-day {
  width: 32px; height: 32px; margin: 0 auto; padding: 0; box-sizing: border-box;
  display: grid; place-items: center;
  border-radius: var(--r-feld); font-size: 13px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
button.cal-day:hover { background: var(--hover); }
.cal-day.wknd { color: var(--muted); }
.cal-day.out { color: var(--faint); opacity: .35; }
.cal-day.today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--border-strong, var(--panel-2)); }
/* Marks Ansage vom 15.09.2026: „im launchpad unter datumsauswahl so
   aussehen wie im projekt 1zu1." Der gewaehlte Tag traegt die Flaeche des
   Hauses, nicht die Akzentfarbe — dieselbe Stufe wie jedes andere
   Gewaehlte (siehe .seg-btn.on). */
.cal-day.sel { background: var(--panel-2); color: var(--text); font-weight: 600; box-shadow: none; }

.cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px 0 4px; }
.cal-month { height: 38px; border-radius: var(--r-teil); font-size: 13px; color: var(--text); }
.cal-month:hover { background: var(--hover); }
.cal-month.sel { background: var(--accent); color: var(--accent-text); font-weight: 600; }

/* „Kein Datum" ist der Ausgang und steht darum abgesetzt — mit einer
   Linie darueber und mittig, damit es nicht wie eine vergessene Zeile
   unter dem Raster haengt. */
/* Marks Bild vom 15.09.2026: der breite Balken „Kein Datum" unten. Er
   war das einzige gefuellte Feld im Kalender und zog den Blick auf die
   Sache, die man am seltensten will. Jetzt zwei kleine Worte in einer
   Zeile — links das Leeren, rechts „Heute". */
.cal-fuss {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--schleier-2);
}
.menu .cal-fuss button, .cal-fuss button {
  width: auto; height: auto; padding: 5px 9px; margin: 0; gap: 0; flex: none;
  background: none; border: 0; border-radius: var(--r-feld);
  font: inherit; font-size: 11.5px; color: var(--muted);
  display: inline-flex; align-items: center; cursor: pointer;
}
.menu .cal-fuss button:hover, .cal-fuss button:hover { color: var(--text); background: var(--hover); }

/* ============ Finanzen ============ */

.monthnav {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--r-teil); padding: 4px 6px; height: 46px;
}
.monthnav .icon-btn { width: 32px; height: 32px; font-size: 20px; line-height: 1; }
.monthnav .mlabel { font-size: 14.5px; min-width: 118px; text-align: center; }

.fin-row input[type="text"] { background: none; border: 0; outline: 0; width: 100%; padding: 4px 6px; border-radius: var(--r-feld); font-size: 15px; }
.fin-row input[type="text"]:focus { background: var(--panel); }
.fin-amount {
  background: none; border: 0; outline: 0; text-align: right; width: 92px;
  padding: 4px 6px; border-radius: var(--r-feld); font-size: 15px; font-variant-numeric: tabular-nums;
}
.fin-amount:focus { background: var(--panel); }
.metric .mv.bad, .kpi.bad, .kv.bad { opacity: .65; }
.kpi { font-variant-numeric: tabular-nums; }
.kpi.good { font-weight: 600; }

.catrow { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.catname { flex: 0 0 130px; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catbar { flex: 1; height: 8px; background: var(--raise); border-radius: var(--r-teil); overflow: hidden; }
.catbar span { display: block; height: 100%; background: var(--text); opacity: .8; border-radius: var(--r-teil); }
.catval { flex: 0 0 92px; text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* Product Runs */
.run-row .runname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.run-row .rn { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-row .rs { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Das Launchpad als Aufbau --------------------------------------
 *
 * Marks Wahl vom 11.09.2026 aus fuenfzig Entwuerfen: Nummer 46, die
 * Grundform mit dem gruenen Faden. Links der Baum, in der Mitte das
 * Formular zu dem, was gewaehlt ist, rechts die Vorschau.
 *
 * Der Faden ist der Kern: Jeder Block traegt links einen Streifen —
 * gruen, wenn er steht, grau, wenn dort noch etwas fehlt. Wer eine
 * Kampagne zusammenbaut, sieht damit beim Scrollen, wo er noch hin muss,
 * ohne jeden Block aufzuklappen. */
.lp-drei {
  /* Der Stamm links breiter, die Mitte dafuer schmaler — Marks Ansage
     vom 11.09.2026: „mach den stamm links etwas breiter und die mittlere
     section dafuer etwas weniger breit." Die Mitte ist `1fr` und gibt
     die vierzig Pixel von allein her. */
  display: grid; grid-template-columns: 310px minmax(0, 1fr) 300px;
  /* Zugeklappt schrumpft die dritte Spalte auf einen Streifen. Das
     Raster regelt das, nicht die Spalte selbst — sonst bliebe eine
     Luecke stehen, wo sie stand. */
  border: 1px solid var(--border); border-radius: var(--r-gross); overflow: hidden;
  min-height: 520px; margin-bottom: 14px; background: var(--lp-grund);
}
/* `min-height: 0` an den drei Spalten, und das ist kein Beiwerk: Ein
   Rasterfeld schrumpft von sich aus NICHT unter seinen Inhalt, und dann
   laeuft `overflow: auto` ins Leere — die Spalte hat ja keine Grenze, an
   der sie scrollen koennte. Gemessen im laufenden Fenster: Der Rahmen
   war 810 Pixel hoch, seine Spalten 1823, und der Rest hing unter dem
   Fensterrand. */
.lp-drei > * { min-width: 0; min-height: 0; }
/* Hier lag der Streifen „Alles geht in …". Er ist am 12.09.2026
   gefallen; die Auskunft steht im Feld oben und am Bestand darunter. */
/* Hier stand `.lp-gruppen.gedaempft { opacity: .55 }`. Weg am
   12.09.2026: Halb durchsichtig las sich wie abgeschaltet. */
/* Der Baum links, nach Marks Bildern vom 11.09.2026: „den stamm links
   vom padding und aufbau auch so wie bei meta."

   Drueben hat die Spalte oben Luft fuers Suchfeld und darunter gar
   keine seitliche Polsterung mehr: Die Zeilen laufen von Kante zu
   Kante, und die gewaehlte traegt links einen Balken. Das ist der
   Unterschied, der den Baum als Navigator lesbar macht statt als Liste
   mit abgerundeten Kacheln. */
/* Nur nach unten, nicht zur Seite — Marks Ansage vom 11.09.2026: „den
   baum links soll man nicht nach rechts oder links verschieben
   koennen." Ein langer Name schob die ganze Spalte, und danach stand
   der Einzug woanders als die Abzweige. */
/* Der Stamm liegt heller als der Rest, und die gewaehlte Zeile ist die
   dunkle Flaeche darin — Marks Ansage vom 12.09.2026: „beim stamm tausch
   mal die farben vom hintergrund und dem ausgewaehlten um bitte."

   Vorher war es andersherum: der Grund lag auf --bg, die Auswahl eine
   Stufe darueber. Getauscht wird nur hier; die beiden anderen Spalten
   behalten ihren Grund, sonst waere es kein Tausch, sondern ein neues
   Fenster.

   Die Spur beim Hinfahren muss mitgehen: Sie war eine Aufhellung des
   Grundes und waere jetzt lauter als die Auswahl. Auf dem hellen Stamm
   ist sie ein Schritt IN Richtung der Auswahl — ein Drittel des Weges,
   damit die ungewaehlte Zeile nicht aussieht wie die gewaehlte. */
/* Der Stamm rollt seit dem 12.09.2026 nicht mehr selbst — seine beiden
   Spalten tun es einzeln. */
.lp-baum { border-right: 1px solid var(--trennung); padding: 16px 0 12px;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  background: var(--lp-grund);
  /* Dieselbe Spur wie in der Leiste links — Marks Ansage vom
     12.09.2026: „das hovern im stamm … genau dieselbe farbe wie bei
     sections links", und danach: „zu hell, ermittle die farbe."

     Gemessen im laufenden Fenster: Die Leiste steht auf #000000, der
     Stamm auf #050505. Derselbe durchscheinende Wert ergibt darum zwei
     verschiedene Toene — in der Leiste #131313, im Stamm #181818. Also
     wird hier nicht derselbe ANTEIL genommen, sondern dasselbe
     ERGEBNIS: acht Prozent Schrift auf dem Grund der Leiste. */
  --lp-spur: color-mix(in srgb, var(--text) 8%, var(--sidebar)); }
/* Ohne Balken — Marks Ansage vom 11.09.2026: „den scrollbar balken beim
   stamm weg machen." Gerollt wird weiter; nur gezeigt wird es nicht
   mehr. Der Balken stand in einer 310 Pixel schmalen Spalte direkt neben
   den Abzweigen und sah aus wie eine zweite Linie. */
.lp-baum { scrollbar-width: none; }
.lp-baum::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Hier lagen zwei Griffe zwischen den Spalten. Marks Ansage vom
   11.09.2026: „die 3 main karten soll man doch nicht mehr beliebig
   ziehen koennen, rueckgaengig machen." Die Maske steht wieder fest —
   270, der Rest, 300. */
.lp-mitte { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Die Vorschau rechts traegt dieselbe Flaeche wie der Stamm links —
   Marks Ansage vom 12.09.2026: „die vorschau rechts bei launchpad als
   die vorschau der ad bitte auch in den popup colors gestalten." Das
   ist der Ton, den das Haus „gewaehlt" nennt: der Grund der Fenster.

   Damit liegen die beiden aeusseren Spalten hoeher als die Maske in der
   Mitte, und die Anzeige selbst (.lp-pv, auf --bg) sitzt darin wie die
   gewaehlte Zeile im Stamm: eine dunkle Flaeche auf heller. */
.lp-vs { border-left: 1px solid var(--trennung); padding: 14px 16px; overflow: auto;
  background: var(--lp-grund); }
/* Eingeklappt — Marks Auftrag vom 11.09.2026: „Vorschau soll man
   einklappen koennen." Sie ist 300 Pixel breit, und wer an der
   Zielgruppe arbeitet, braucht sie in dem Moment nicht.

   Was bleibt, ist ein Streifen mit dem Weg zurueck. Ganz zu
   verschwinden waere schlechter: Wer sie einmal eingeklappt hat, findet
   sie sonst nicht wieder. */
.lp-drei:has(.lp-vs.zu) { grid-template-columns: 310px minmax(0, 1fr) 40px; }
/* Je breiter das Fenster, desto breiter die Vorschau — Marks Ansage vom
   11.09.2026: „wenn man vollbild macht soll rechts die vorschau breiter
   werden und die mitte dafuer weniger breit."
 *
 * Gebunden an die BREITE des Fensters, nicht an einen Schalter: Vollbild
 * heisst auf einem grossen Schirm mehr Platz, und der soll dorthin, wo
 * man hinsieht. Die Mitte ist `1fr` und gibt ihn von allein her; der
 * Stamm links bleibt, wie er ist — er traegt Namen, keine Bilder. */
@media (min-width: 1500px) {
  .lp-drei { grid-template-columns: 310px minmax(0, 1fr) 380px; }
}
@media (min-width: 1750px) {
  .lp-drei { grid-template-columns: 310px minmax(0, 1fr) 440px; }
}
.lp-vs.zu { padding: 0; overflow: hidden; }
.lp-vs-auf {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; height: 100%; padding: 14px 0; cursor: pointer;
  background: none; border: 0; color: var(--muted); font: inherit;
}
.lp-vs-auf:hover { background: var(--hover); color: var(--text); }
/* Hier stand das Wort „Vorschau" senkrecht im Streifen. Marks Ansage
   vom 11.09.2026: „mach dieses vorschau beschriftun weg." Ein Pfeil
   reicht — wohin er zeigt, sagt genug. */
.lp-vs-auf svg { width: 15px; height: 15px; transform: rotate(90deg); }
/* Der Knopf im Kopf zeigt nach rechts — dorthin verschwindet sie. */
.lp-vk [data-act="lpvsklapp"] svg { transform: rotate(-90deg); }

/* Vollbild — Marks Ansage vom 11.09.2026: „mach das launchpad vollbild."
 *
 * Die Seite hatte 1060 Pixel wie jede andere. Bei drei Spalten heisst
 * das: der Baum knapp, die Vorschau knapp, und in der Mitte ein
 * Formular, das staendig umbricht. Wer eine Kampagne mit vierzig
 * Anzeigen zusammenbaut, arbeitet nicht in einer Spalte.
 *
 * Der Weg ist derselbe wie beim Translator: Der Scroller darueber gibt
 * das Scrollen ab, die Seite wird zur Saeule, und die drei Spalten
 * scrollen jede fuer sich. Der Kopf bleibt dabei stehen — sonst
 * verliert man beim Blaettern den Hochladen-Knopf aus dem Blick. */
.content:has(.lp-seite) { overflow: hidden; display: flex; flex-direction: column; }

/* ---- Der Generator im Vollbild -------------------------------------
 *
 * Marks Ansage vom 12.09.2026: „mach erstmal den generator im vollbild
 * wie den launchpad auch von der vollheit."
 *
 * Dieselbe Mechanik wie dort: Die Seite scrollt nicht mehr, sie fuellt
 * das Fenster; Kopf und Werkbank stehen fest, und der Verlauf rollt in
 * seinem eigenen Raum. Vorher wanderte die Werkbank beim Blaettern durch
 * den Verlauf aus dem Bild — und genau dort steht der Knopf, den man
 * danach wieder braucht. */
.content:has(.gen-seite) { overflow: hidden; display: flex; flex-direction: column; }
/* Die ganze Seite rollt, nicht nur der Verlauf — Marks Meldung vom
   13.09.2026: „der generator ist nicht scrollable."

   Bis dahin war die Seite in zwei Teile geteilt: Kopf und Werkbank
   standen fest, und allein der Verlauf rollte in seinem eigenen Raum.
   Das ging, solange die Werkbank flach war. Seit Entwurf 19 stehen dort
   zwei quadratische Bilder nebeneinander, und die sind zusammen mit Kopf,
   Auftragsfeld und Werkzeugen hoeher als mancher Bildschirm — dann war
   der Verlauf gar nicht mehr zu erreichen, und rollen ging nirgends.

   Jetzt rollt das Fenster selbst. Die Kopfzeile des Verlaufs bleibt
   trotzdem stehen: `position: sticky` haengt am naechsten rollenden
   Vorfahren, und der ist jetzt diese Seite. */
/* Kein Vollbild mehr — Marks Ansage vom 13.09.2026: „mach das links und
   rechts wieder abstand in generator, die section soll kein vollbild
   sein … also so wie in uebersicht section."

   Dieselbe Bahn wie jede andere Seite: hoechstens 1060 Pixel breit,
   mittig, mit demselben Polster. Was bleibt, ist das Rollen in sich —
   ohne das waere der Verlauf unter zwei grossen Bildern wieder
   unerreichbar. */
.page.gen-seite {
  max-width: 1060px; margin: 0 auto; padding: 46px 40px 90px;
  flex: 1; min-height: 0; overflow-y: auto;
}
/* Ohne sichtbare Rollleiste — Marks Ansage vom 13.09.2026: „mach diesen
   scrollanzeige im generator weg." Sie lief mitten durch die Seite,
   weil hier die Seite selbst rollt und nicht das Fenster darum. */
.page.gen-seite { scrollbar-width: none; }
.page.gen-seite::-webkit-scrollbar { width: 0; height: 0; }
.page.gen-seite > .page-head { margin-bottom: 18px; }
/* Die Kopfzeile des Verlaufs stand hier klebend — sie ist am
   16.09.2026 mit Entwurf 01 gegangen. */
.page.lp-seite {
  /* Das Polster unten kam bis zum 16.09.2026 von der Fussleiste
     (`.lp-seite .up-fuss { padding-bottom: 18px }`). Die ist mit dem
     Veroeffentlichen-Knopf nach oben gewandert — Marks Auftrag: „dafuer
     den platz unten nutzen fuer das launchpad". Also traegt die Seite
     ihr Polster jetzt selbst, und die drei Spalten bekommen den Rest. */
  max-width: none; width: 100%; padding: 26px 26px 18px;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
/* Veroeffentlichen traegt das Mass des Projektknopfs daneben — Marks
   Ansage vom 16.09.2026: „den veroeffentlichen button bitte genauso
   hoch machen wie den projekt button neben an im launchpad."

   Und zwar die Zahlen des Knopfes, der dort WIRKLICH steht: Der
   Projektknopf im Launchpad ist nicht das allgemeine `.ctag` mit
   achtundzwanzig Pixeln, sondern `.ctag[data-act="upprojekt"]` mit
   vierunddreissig, dreizehn Polster, acht Spalt und zwoelf Komma fuenf
   Schrift. Beim ersten Anlauf habe ich gegen die allgemeine Regel
   gemessen — daher „zu klein/schmal". */
/* Eine Stufe ueber den Nachbarn, und nur dieser eine — Marks Ansage vom
   17.09.2026: „der veroeffentlichen button im launchpad ist etwas klein
   mach ihn etwas groesser nur den aber." Er hatte vorher genau die
   vierunddreissig des Projektknopfes daneben; jetzt vier Pixel hoeher
   und drei breiter im Polster, damit er die Zeile anfuehrt statt in ihr
   zu verschwinden. Die uebrigen Knoepfe der Kopfzeile bleiben, wo sie
   sind. */
/* Seine Zahlen sind seit dem 18.09.2026 die des Hauses — hier steht nur
   noch, dass er in der Kopfzeile nicht mitwaechst. */
.lp-kopf .btn-white.lp-veroeff { flex: none; }
/* Mit `.btn-white` davor, sonst gewinnt `.btn-white.mit-ico svg` weiter
   unten mit denselben Gewichten und siebzehn Pixeln — gemessen vierzehn
   gegen siebzehn neben dem Projektknopf. Die spaetere Regel gewinnt bei
   gleichem Gewicht, und diese hier steht frueher. */

/* Der Balken des Laufs, wenn er oben steht: schmal genug, dass die
   Kopfzeile nicht umbricht. */
.lp-kopf .up-fortschritt.lp-lauf { flex: none; width: 128px; display: flex; align-items: center; gap: 8px; }

.page.lp-seite > .page-head { margin-bottom: 18px; flex: none; }
/* Rundum dieselben Ecken — Marks Ansage vom 12.09.2026: „die kanten beim
   launchpad unten links und rechts muessen auch edged sein." Unten war
   der Rahmen abgeschnitten, weil dort einmal die Fusszeile ansetzte; sie
   steht laengst darunter und nicht mehr darin. */
.page.lp-seite .lp-drei { flex: 1; min-height: 0; margin-bottom: 0; border-radius: var(--r-gross); }
/* Die 520 Pixel Mindesthoehe sind fuer die alte Seite gedacht, auf der
   der Rahmen mitten im Scrollen steht. Im Vollbild waeren sie eine
   Grenze nach unten, die den Rahmen bei kleinem Fenster wieder ueber
   den Rand schiebt. */
.page.lp-seite .lp-drei { min-height: 0; }
/* Das Formular in der Mitte scrollt selbst, der Pfad darueber bleibt. */
.page.lp-seite .lp-pfad { flex: none; }
.page.lp-seite .lp-form { flex: 1; min-height: 0; overflow: auto; }

/* Der Baum */
.lp-such {
  display: flex; align-items: center; gap: 9px;
  /* Acht wie die Markierungen darunter — Marks Ansage vom 11.09.2026:
     „das suchfeld soll genauso breit sein wie der hover drunter bei ads
     und adsets etc." Es stand bei sechzehn und war damit sechzehn Pixel
     schmaler als jede Zeile darunter. */
  /* Kein Kasten, nur eine Linie darunter — Marks Ansage vom 12.09.2026:
     „die suchleiste soll keine box sein sondern nur ein strich unter dem
     suchen." Ein Suchfeld im Stamm ist keine Eingabe, die man ausfuellt,
     sondern ein Filter, den man benutzt und wieder verlaesst. */
  height: 40px; margin: 0 8px 10px; padding: 0 4px;
  background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  font-size: 13.5px; color: var(--faint);
}
.lp-such svg { width: 15px; height: 15px; flex: none; }
/* Ein echtes Feld, keine Attrappe — Marks Meldung vom 11.09.2026: „das
   suchenfeld geht nicht." Die Suche des Browsers bringt ein eigenes
   Kreuz mit, das hier nur stoert. */
.lp-such input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 13.5px;
}
.lp-such input::placeholder { color: var(--faint); }
.lp-such input::-webkit-search-decoration,
.lp-such input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Der Baum nach Marks Vorlage vom 11.09.2026: Knoten 36 hoch,
   Einrueckung 0 / 20 / 40, und drei Schriftgrade, damit die Ebene auch
   ohne Linien lesbar bleibt. Die Einrueckung kommt aus zwei Quellen: der
   Zeilenrahmen ruecken die Ebene ein, das `padding-left` der Zeile
   selbst macht den Rest. */
.lp-zl {
  display: flex; align-items: center; gap: 9px; width: 100%;
  height: 40px; padding: 0 8px; font-size: 13px;
  color: var(--text); text-align: left; cursor: pointer;
}
/* Der Umriss beim Tabben ist unserer, nicht Chromes. Marks Meldung vom
   12.09.2026: „wenn man raustabbt leuchtet der ausgewaehlte Reiter im
   Stamm blau." Das war der Systemring des Browsers — blau, weil das
   Geraet blau als Auszeichnungsfarbe fuehrt. Wir zeichnen stattdessen
   dieselbe Kante, die die Auswahl ohnehin traegt, nur eine Spur
   staerker. Nach innen versetzt, damit die Zeile nicht waechst. */
.lp-zl:focus { outline: 0; }
.lp-zl:focus-visible {
  outline: 0; box-shadow: inset 0 0 0 1px var(--rand-stark);
  border-radius: var(--r-teil);
}
/* Markiert wird die ganze REIHE, nicht die Zeile darin. Marks Meldung
   vom 11.09.2026: „es soll die ganze zeile links markieren und bei adset
   ist der strich weiter rechts."

   Beides hatte dieselbe Ursache: Balken und Flaeche sassen auf `.lp-zl`,
   und daneben stehen in derselben Reihe noch das Chevron und das Menue.
   Das Chevron schob den Balken bei jeder Gruppe um zwanzig Pixel nach
   rechts, und das Menue rechts lag ausserhalb der Flaeche. Auf der
   Reihe stimmt beides von selbst, auf jeder Ebene. */
/* Kein Balken mehr an der gewaehlten Zeile, und die Fuellung laeuft
   nicht mehr von Kante zu Kante — Marks Ansage vom 11.09.2026: „mach
   den gruenen strich weg und wenn man auf adset geht soll es genauso
   gerundet sein wie ad wenn man drauf geht."

   Die Fuellung sitzt jetzt auf der Zeile IN der Reihe, nicht auf der
   Reihe: Nur so bekommt sie Ecken, und nur so steht sie an derselben
   Kante wie die Karte einer Anzeige. Die Reihe traegt weiterhin die
   Einfuegemarke beim Ziehen. */
.lp-zw { border-left: 0; }
/* Zurueck zu Entwurf 01 — Marks Ansage vom 12.09.2026: „uebernehm 01
   1zu1 ohne die zahlen aber und ohne den button unten." Die Zeilen
   stehen wieder auf eigenen Flaechen mit Ecken, nicht von Kante zu
   Kante wie im Dateibaum. */
.lp-zw:not(.ad) { padding: 0 8px; }
.lp-zw > .lp-zl { border-radius: var(--r-teil); }
/* `:not(.an)` ist der Kern — Marks Meldung vom 11.09.2026: „wenn man
   hier auf ein adset draufdrueckt und dann drueber hovert wird es
   schwarz, gleiche fuer campagne."

   Die Hover-Regel stand NACH der Auswahl und war gleich stark, also
   gewann sie. Und die Spur ist durchscheinend: fuenf Prozent Weiss auf
   dem Grund sind dunkler als die Flaeche der Auswahl. Die gewaehlte
   Zeile braucht ohnehin keine Spur — sie ist ja schon gefuellt. */
.lp-zw:not(.ad):not(.an):hover > .lp-zl { background: var(--lp-spur); }
/* Ein minimaler Umriss auf dem, was gewaehlt ist — Marks Ansage vom
   11.09.2026: „links beim stamm minimalen umriss auf dem was ausgewaehlt
   ist." Die Flaeche allein liegt nur sechs Punkte ueber dem Grund; der
   Umriss zieht die Kante nach, ohne lauter zu werden. Als `box-shadow`,
   nicht als `border`: Ein Rahmen aendert die Hoehe der Zeile, und dann
   springt beim Waehlen alles darunter. */
/* Der Umriss ist derselbe wie an den Schaltflaechen — Marks Ansage vom
   12.09.2026: „der umriss beim stamm ist zu stark er soll so wie bei den
   schaltflaechen sein." Er lag auf `--lp-wahl-rand`, dreizehn Prozent
   Schrift, und das ist auf dem Grund des Stamms rund #2b2b2b — zehn
   Punkte ueber dem Rahmen, den jedes Feld daneben traegt. */
/* Gewaehlt ist, was eine Flaeche traegt — Marks Wahl vom 12.09.2026 aus
   fuenfzig Entwuerfen: Nummer 01, „Flaeche als Auswahl". Der Umriss
   davor sagte dasselbe leiser; im Stamm, wo zwoelf Zeilen untereinander
   stehen, ist die Flaeche schneller zu finden. */
.lp-zw:not(.ad).an > .lp-zl {
  background: var(--panel); box-shadow: none;
}
.lp-zw.an .lp-zl { color: var(--text); }
.lp-zl i { color: var(--faint); display: flex; flex: none; }
.lp-zl i svg { width: 15px; height: 15px; }
.lp-zl.an i { color: var(--text); }
.lp-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-zl.kamp { font-size: 14px; font-weight: 600; }
/* Der Grad der Gruppenzeile steht weiter unten, bei ihrer Hoehe und
   ihrer Farbe — hier stand er ein zweites Mal und war wirkungslos: gleiche
   Staerke, spaetere Regel gewinnt. Genau diese Falle hat den ersten
   Versuch am 12.09.2026 verpuffen lassen. */
.lp-zl.ad { font-size: 13px; font-weight: 400; color: var(--muted); }
/* Hier standen die drei Striche zum Zuklappen. Marks Ansage vom
   11.09.2026: „mach auserdem dieses ein und aufklappen knopf weg." Der
   Baum zeigt jetzt immer alles; mit dem Knopf ist auch der Merker
   dahinter aus app.js verschwunden. */
/* Alles fluchtet links. Marks Meldung vom 11.09.2026: „es ist noch
   vermischt mit dem alten design plus fuellt nicht die volle zeile, die
   kampagne oben ist auch nicht sauber aligned im vergleich zum
   anderen."

   Die Einrueckung 0/20/40 stammte aus dem alten Baum, in dem die Ebene
   allein durch den Einzug zu lesen war. Seit Entwurf 18 macht das die
   FORM: Die Kampagne ist fett, die Gruppe klein und grau, die Anzeige
   eine Karte mit Bild. Drei verschiedene Dinge brauchen keine drei
   Stufen mehr — sie brauchen eine gemeinsame Kante. */
.lp-zw.kamp > .lp-zl { padding-left: 12px; }
/* Hier stand die Einrueckung der Anzeigenzeile. Seit Marks Wahl von
   Entwurf 18 gibt es in einer Anzeigenreihe kein `.lp-zl` mehr — dort
   steht eine Karte. Die Einrueckung macht jetzt die Reihe selbst. */

/* Die Anzeige im Baum — Marks Wahl vom 11.09.2026 aus fuenfzig
   Entwuerfen: Nummer 32, „Abzweige", dazu seine Vorgabe „man soll nur
   bild mit name der ad sehen".

   Der Baum zeigt jetzt, dass er ein Baum ist: eine senkrechte Linie
   laeuft durch die Gruppe, und aus ihr zweigt zu jeder Anzeige ein
   waagerechter Strich ab. Bei der letzten Anzeige endet die Senkrechte
   auf halber Hoehe — so sieht man, wo die Gruppe aufhoert, ohne dass
   ein zweites Zeichen das sagen muss.

   Die Karte selbst hat keine Flaeche und keinen Umriss mehr; sie zeigt
   Bild und Namen, sonst nichts. Gewaehlt wird sie durch ihre Fuellung,
   nicht durch einen Balken an der Reihe.

   Die zwei Striche haengen an der KARTE, nicht an der Reihe: `.lp-marke`
   zeichnet beim Ziehen sein eigenes `::before` auf der Reihe, und zwei
   Regeln auf demselben Pseudoelement heben einander auf. */
/* 41, nicht 48: Die Karte polstert selbst noch sieben, und gezaehlt
   wird das BILD, nicht die Kante der Karte. 41 + 16 + 7 = 64 — die
   Stelle, an der eine Ebene hoeher das Raster steht. Beim ersten Wurf
   stand hier 48, und das Bild sass bei 71. */
/* Ohne Abzweige — Marks Ansage vom 12.09.2026: „01 bitte 1zu1
   uebernehmen es ist nun mit unserem alten vermischt." Im gewaehlten
   Entwurf traegt der Stamm keine Linien; die Ebene steht im Einzug und
   im Schriftgrad. Die beiden Striche an der Karte sind damit weg. */
/* Die Flaeche der Anzeige laeuft so weit wie die der Gruppe — Marks
   Ansage vom 12.09.2026: „die schaltflaeche soll auch bei den ads voll
   ausfuellen ganz nach links, die schaltflaeche soll immer gleich gross
   sein, gleichmaessigkeit ist wichtig."

   Der Einzug sitzt darum im Polster der Karte, nicht am Rand der Reihe:
   Bild und Name ruecken ein, die Flaeche nicht. */
.lp-zw.ad { position: relative; margin-left: 0; padding: 0 8px;
  border-left-color: transparent; background: none; }
.lp-zw.ad:hover, .lp-zw.ad.an { background: none; }
.lp-ak {
  display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0;
  height: 40px; padding: 0 10px 0 42px; border-radius: var(--r-teil); cursor: pointer; text-align: left;
  background: none; border: 0;
  font: inherit; color: var(--text);
}
.lp-zw.ad:not(.an) .lp-ak:hover { background: var(--lp-spur); }
.lp-zw.ad.an .lp-ak { background: var(--panel); box-shadow: none; }
.lp-ak img, .lp-ak-ph {
  width: 26px; height: 26px; border-radius: var(--r-feld); flex: none;
  object-fit: cover; display: block; background: var(--raise);
}
/* Im leeren Feld steht ein Bildzeichen — Marks Ansage vom 13.09.2026:
   „bei neue anzeige noch so ein bild icon rein." Ein leeres Kaestchen
   sagt nur, dass dort Platz ist; das Zeichen sagt, wofuer. */
.lp-ak-ph {
  border: 1px dashed var(--strichel);
  display: grid; place-items: center; color: var(--faint);
}
.lp-ak-ph svg { width: 15px; height: 15px; }
.lp-ak-t { min-width: 0; display: flex; flex-direction: column; }
.lp-ak-t b { font-size: 12.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dasselbe eine Ebene hoeher: Auch an der Gruppe lag der Menue-Knopf
   NEBEN der Zeile und nahm ihr 29 Pixel — Marks Meldung vom 11.09.2026:
   „wenn man ein adset auswaehlt deckt es nicht die volle zeile wie die
   ads nun auserdem ist der text links viel zu nah am rand der flaeche."
   Gemessen war es genau das: Die Flaeche der Gruppe endete 37 vor der
   Kante, die Karte einer Anzeige 15. Jetzt liegt der Knopf darueber,
   und die Zeile haelt rechts seinen Platz frei.

   Zwoelf Pixel Polster links statt sechs: Sechs waren der Rest davon,
   dass die Reihe acht davon uebernommen hat — zusammen sassen sie
   richtig, aber die FLAECHE beginnt erst bei acht, und der Text klebte
   an ihrer Kante. */
.lp-zw:not(.ad) .lp-zmehr {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  margin: 0; z-index: 2;
}
/* Der Schnellweg sitzt links daneben, auf derselben Hoehe und mit
   demselben Abstand. Marks Meldung vom 12.09.2026: „die boxen sind
   rechts wieder kuerzer geworden und die 3 punkte und quick duplicate
   button sind ineinander verbuggt."

   Genau das war der Fehler: Die Punkte stehen seit dem 11.09. ABSOLUT
   ueber der Zeile, damit die Flaeche bis zur Kante laeuft. Der neue
   Knopf stand daneben im Fluss — er verkuerzte die Flaeche und legte
   sich zugleich auf die Punkte. Also auch absolut, und zwar um seine
   eigene Breite plus zwei Pixel versetzt. */
.lp-zw:not(.ad) .lp-zdup {
  position: absolute; right: 38px; top: 50%; transform: translateY(-50%);
  margin: 0; z-index: 2;
}

/* Der Menue-Knopf liegt UEBER der Karte, nicht neben ihr — Marks
   Meldung vom 11.09.2026: „bei der ad die 3 punkte sorgen dafuer das es
   nicht bis ganz zum rand geht das feld mach die 3 punkte dadrueber
   aber nicht so das die karte frueher aufhoert."

   Neben der Karte war er ein Flex-Nachbar und nahm ihr 26 Pixel. Jetzt
   steht er absolut am rechten Rand; die Karte laeuft darunter durch bis
   zur Kante. Damit der Name nicht unter die Punkte laeuft, haelt die
   Karte rechts so viel Polster frei, wie der Knopf breit ist. */
/* Achtzehn, nicht zwoelf — Marks zweite Meldung vom 11.09.2026: „bei ads
   sind die 3 punkte zu nah am rechten rand anders als bei adsets da ist
   es gut und campagnes."

   Gleicher Abstand zur SPALTE war die falsche Rechnung. Gemessen zaehlt
   der Abstand zur eigenen Flaeche: Bei der Gruppe sassen die Punkte vier
   Pixel INNERHALB ihrer Fuellung, bei der Anzeige zwei Pixel AUSSERHALB
   der Karte — sie hingen ueber die Kante. Die Karte endet 14 vor dem
   Rand, also stehen die Punkte bei 18 und damit ebenfalls vier innen. */
.lp-zw.ad .lp-zmehr {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  margin: 0; z-index: 2;
}
.lp-zw.ad .lp-zdup {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  margin: 0; z-index: 2;
}
/* Platz fuer beide Knoepfe, nicht nur fuer einen: 28 waren der eine,
   dazu kommen 26 fuer den zweiten. */
.lp-zw.ad .lp-ak { padding-right: 54px; }
/* Die Wurzelzeile traegt den laengsten Namen im Baum. Sie bekommt eine
   eigene Hoehe und Luft nach unten — sie ist die Wurzel, nicht die
   erste von vielen gleichen Zeilen. Ihre linke Kante ist dieselbe wie
   bei allem darunter. */
/* Ueberall derselbe Abstand — Marks Ansage vom 12.09.2026: „der abstand
   von adset campagne und ad ueberall gleich." Die Kampagne hatte unten
   zehn Pixel Luft, die anderen zwei; damit stand die erste Gruppe
   sichtbar tiefer als jede weitere. */
.lp-zw { margin-bottom: 2px; }
.lp-zw.kamp { margin: 0 0 2px; }
/* Eine Kante fuer alle drei Ebenen: vierzehn Pixel. Die Kampagne
   traegt ihr Ordnerzeichen davor, die Gruppe keines mehr, und die Karte
   beginnt an derselben Stelle. */
.lp-zw.kamp > .lp-zl { height: 40px; padding: 0 30px 0 10px; gap: 9px; }
.lp-zl .lp-nm { flex: 1; min-width: 0; }
/* Die Gruppenzeile ist klein und grau — sie ordnet, sie steht nicht im
   Vordergrund. Die Karten darunter tragen das Bild. */
/* So hoch wie Kampagne und Anzeige — Marks Ansage vom 12.09.2026: „die
   box wenn man auf adsets geht soll genauso hoch sein wie bei ads und
   campagne." Die Zeile blieb klein und grau, wie sie soll; nur die
   Flaeche, die beim Auswaehlen aufleuchtet, hatte zehn Pixel weniger als
   die beiden anderen und sprang dadurch ins Auge. */
/* Versetzt wie in einem Dateibaum — Marks Ansage vom 12.09.2026: „das
   adset muss versetzt zur campagne sein." Sechzehn Pixel je Ebene: die
   Kampagne bei zehn, die Gruppe bei sechsundzwanzig, die Anzeige bei
   zweiundvierzig. Die Flaeche bleibt fuer alle gleich breit; nur ihr
   Inhalt rueckt ein. */
.lp-zw.gr > .lp-zl { padding: 0 30px 0 26px; height: 40px; }
/* Der Name der Gruppe liest sich wie die Kampagne darueber — Marks
   Meldung vom 12.09.2026: „der Name des Adsets also text soll groesser
   sein." Er stand auf 11,5 mit weiter Sperrung und sah damit aus wie
   eine Rubrik, nicht wie ein Name. Die Sperrung faellt mit: Sie gehoert
   zu kleinen Grossbuchstaben, nicht zu vierzehn Punkt. */
.lp-zl.gr { font-size: 14px; font-weight: 500; color: var(--muted); }
.lp-zw.gr.an > .lp-zl { color: var(--text); }
/* Die Zeichen sind wieder da, und die drei Ebenen stehen versetzt —
   Marks Bild aus dem echten Werbeanzeigenmanager vom 11.09.2026:
   „campagne, adsets und ads sollen dieselbe versetzung haben wie hier,
   die icons auch so in der art auser bei ads da reichen die bilder."

   Drueben stehen die Zeichen in Zweiundzwanziger-Schritten: Ordner fuer
   die Kampagne, Raster fuer die Gruppe, und bei der Anzeige steht das
   Bild an derselben Stelle, an der eine Ebene hoeher das Zeichen stand.
   Genau so hier — gemessen von der Kante der Spalte:

       Kampagne   Ordner bei 20
       Gruppe     Raster bei 42
       Anzeige    Bild   bei 64

   Hier standen frueher `display: none` fuer beide Zeichen und eine
   gemeinsame Kante fuer alle drei Ebenen. Das war Marks Ansage von
   heute Vormittag — sie galt, solange die Ebene nur an der FORM zu
   lesen war. Mit den Zeichen liest sie sich am Einzug. */
/* Ein Menue je Zeile statt zweier Zeichen daneben. Es heisst `lp-zmehr`
   und nicht `lp-mehr`: Den Namen gibt es laengst, fuer das „Mehr" am
   Ende eines abgeschnittenen Textes in der Vorschau. Beim ersten Wurf
   hiessen beide gleich, und das `opacity: 0` hier machte das dortige
   „Mehr" unsichtbar. Gefunden hat es nicht der Pruefstand, sondern der
   Gegenbeweis: Ein Muster, das gruen blieb, weil es zwei Treffer hatte. */
.lp-zmehr {
  width: 24px; height: 24px; flex: none; margin-right: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--faint); border-radius: var(--r-teil); cursor: pointer; opacity: 0;
}
/* Der schnelle Zwilling neben den Punkten — Marks Ansage vom
   12.09.2026: „neben den 3 punkten soll ein quick duplicate icon sein."
   Dieselbe Form, dieselbe Groesse, derselbe Auftritt beim Hinfahren:
   Zwei Knoepfe nebeneinander, die sich verschieden verhalten, lesen sich
   wie zwei verschiedene Dinge. */
.lp-zdup {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--faint); border-radius: var(--r-teil); cursor: pointer; opacity: 0;
}
.lp-zw:hover .lp-zdup, .lp-zdup:hover { opacity: 1; }
.lp-zdup:hover { color: var(--text); background: var(--hover); }
.lp-zdup svg { width: 12px; height: 12px; }
.lp-zw:hover .lp-zmehr, .lp-zmehr:hover { opacity: 1; }
.lp-zmehr:hover { color: var(--text); background: var(--hover); }
.lp-zmehr svg { width: 15px; height: 15px; }
.lp-zw { display: flex; align-items: center; }
.lp-zw > .lp-zl { min-width: 0; }
.lp-gruppen { margin-top: 0; display: flex; flex-direction: column; }
/* Beim Suchen verschwinden die leeren Gruppen und ihr „leer" — sie
   haben in einer Trefferliste nichts verloren. */
.lp-baum.sucht .lp-zneu, .lp-baum.sucht .lp-zurueck { display: none; }
/* Hier lagen die Zeilen fuer den Bestand („Steht schon drueben") und
   das Schloss daran. Beides ist am 12.09.2026 mit der Sache selbst
   gegangen. */
/* ---- Der Stamm in einer Spalte -------------------------------------
 *
 * Marks Wahl vom 12.09.2026 aus fuenfzig Entwuerfen: Nummer 01, „Flaeche
 * als Auswahl". Alles untereinander, jede Ebene mit ihrer Zahl rechts,
 * und darunter ein Fuss mit dem einen Handgriff, den man von ueberall
 * braucht.
 *
 * Die zwei Spalten aus Entwurf 44 sind damit wieder weg — mit ihnen die
 * Regeln fuer die schmale Gruppenspalte. */
.lp-stamm { flex: 1; min-height: 0; overflow-y: auto; }
.lp-stamm::-webkit-scrollbar { width: 0; height: 0; display: none; }
.lp-stamm { scrollbar-width: none; }
/* Hier standen die Zahl an jeder Ebene und der Fuss mit dem Handgriff.
   Marks Ansage vom 12.09.2026: „ohne die zahlen aber und ohne den button
   unten." Der Stamm zeigt jetzt nur noch Namen. */

.lp-grp { display: flex; flex-direction: column; }
.lp-zneu, .lp-zurueck { margin-left: 16px; margin-right: 16px; width: auto; }
/* Im Menue steht das Entfernen abgesetzt — Marks Vorlage: „Destructive
   actions should be visually separated." */
/* „Je Anzeige einzeln" — Marks Wahl vom 12.09.2026 aus fuenfzig
   Entwuerfen: Nummer 26. Der Leerzustand sieht aus wie ein Auswahlfeld,
   weil er eines ist: Text links, Haken rechts, und die Flaeche macht das
   Fenster auf.

   Der Entwurf davor trug ein Stapel-Zeichen und zaehlte die
   verschiedenen Texte darunter. Wer hier nichts gewaehlt hat, will aber
   wissen, dass er waehlen KANN — nicht, wie viele Texte es gibt. */
/* Dasselbe Mass und dieselben Farben wie das Namensfeld darueber —
   Marks Ansage vom 12.09.2026: „das mit je anzeige einzelnd soll so gross
   sein wie das feld darueber und selbe farben / umrisse." Es ist ein
   Auswahlfeld, also sieht es aus wie eines: 38 hoch, Rahmen in --border,
   Grund wie die Seite. */
.lp-leerwahl {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; height: 38px; text-align: left;
  background: var(--lp-feld, var(--bg)); border: 1px solid var(--border);
  border-radius: var(--r-teil); padding: 0 12px; color: var(--muted);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.lp-leerwahl:hover { background: var(--hover); }
.lp-leerwahl svg { width: 15px; height: 15px; flex: none; color: var(--faint); }

/* Das Fenster hinter „Duplizieren …": drei Wege untereinander, jeder
   als eigene Flaeche.

   Es hiess zuerst `lp-dup` — und das ist seit Wochen der Name der beiden
   Griffe in der Anzeigenliste: 24 Pixel breit, `display: grid`, unsichtbar
   bis zum Hinfahren. Das Fenster erbte alles davon und war ein 50 Pixel
   hoher Streifen, aus dem der Inhalt herausragte. Marks Meldung vom
   12.09.2026: „das duplicate popup spinnt auch." Ein Name, der schon
   vergeben ist, ist kein Name. */
.modal.lpdup-fenster { width: min(440px, calc(100vw - 32px)); }
.lp-dupw { display: flex; flex-direction: column; gap: 10px; }
.lp-dupz {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 13px 14px; border-radius: var(--r-flaeche);
  background: var(--lp-wahl); box-shadow: inset 0 0 0 1px var(--lp-wahl-rand);
  color: var(--text); cursor: pointer; width: 100%;
}
.lp-dupz:hover { background: var(--hover); }
.lp-dupz b { font-size: 13.5px; font-weight: 600; }
.lp-dupz em { font-size: 12.5px; color: var(--muted); font-style: normal; line-height: 1.45; }
/* Die mittlere Zeile traegt ein Feld und einen Knopf — sie ist keine
   Flaeche zum Draufdruecken und faehrt darum auch nicht hoch. */
.lp-dupz.reihe { flex-direction: row; align-items: center; gap: 10px; cursor: default; }
.lp-dupz.reihe:hover { background: var(--hover); }
.lp-dupz-t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.lp-dupz.reihe .up-mitzeichen { width: 88px; flex: none; }
.lp-dupz.gefahr b { color: #e5534b; }
.lp-dupz.gefahr:hover { background: color-mix(in srgb, var(--rot, #e5534b) 12%, transparent); }
.menu-trenn { height: 1px; background: var(--border); margin: 5px 8px; }
#menulayer button.gefahr { color: #e5534b; }
#menulayer button.gefahr:hover { background: color-mix(in srgb, var(--rot, #e5534b) 12%, transparent); }

/* Ziehen im Baum — Marks Ansage vom 11.09.2026: „man soll links ads und
   adsets verschieben koennen."
 *
 * Die Zeile ist zugleich Knopf und Griff. Was sie gerade ist, entscheidet
 * die Strecke, nicht das Aussehen — darum bekommt sie hier keinen eigenen
 * Zeiger, nur waehrend eines laufenden Zugs. */
.lp-zw { position: relative; }
/* Die zwei Zeichen im Baum sind einem Menue gewichen; in der
   Anzeigenliste im Formular stehen sie weiter. */

body.zieht-lp { cursor: grabbing; user-select: none; }
body.zieht-lp .lp-zl:hover { background: none; }
.lp-zw.zieht, .lp-grp.zieht { opacity: .4; }
/* Die Marke ist ein Strich an der Stelle, an der es landet. Ein Rahmen
   um das Ziel waere zweideutig: er sagt „hier hinein", nicht „hier
   dazwischen". */
/* Ein MINIMALER Strich — Marks Ansage vom 11.09.2026: „mit einem
   minimalen strich zum einfuegen die angezeigt wird." Zwei Pixel in
   Gruen waren ein Balken; einer in der stillen Farbe sagt dasselbe und
   uebertoent nicht die Anzeige, die am Zeiger haengt. */
/* Und noch eine Spur leiser — Marks Ansage vom 12.09.2026: „der strich
   beim verschieben von ads soll nicht so auffaellig sein." `--muted` ist
   die Farbe von Fliesstext; hier genuegt der Ton, in dem auch die
   gestrichelten Raender stehen. */
.lp-marke::before {
  content: ''; position: absolute; left: 6px; right: 6px; height: 1px;
  /* Dieselbe Farbe wie die Umrisse der Karten — Marks Ansage vom
     12.09.2026: „die trennlinie beim verschieben einer ad soll genau
     dieselbe farbe haben wie die umrisse von den karten." Sie lag auf
     `--faint`, und das ist die Farbe fuer Schrift, nicht fuer Kanten. */
  background: var(--border); border-radius: var(--r-klein); z-index: 2;
}
/* Die Anzeige haengt am Zeiger statt einen Strich zu zeichnen — Marks
   Ansage vom 11.09.2026. Sie liegt ueber allem und faengt keinen Klick:
   Sonst zeigte `elementFromPoint` unter dem Zeiger auf den Schatten
   selbst, und das Ziel darunter waere nie gefunden worden. */
#lpGeist {
  position: fixed; z-index: 90; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 7px; border-radius: var(--r-feld);
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  box-shadow: var(--shadow);
  transform: translate(14px, -50%); opacity: .96;
}
#lpGeist img, #lpGeist .lpg-ph {
  width: 34px; height: 34px; border-radius: var(--r-feld); flex: none;
  object-fit: cover; display: block; background: var(--raise);
}
#lpGeist b {
  font-size: 12.5px; font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-marke.vor::before { top: -2px; }
.lp-marke.nach::before { bottom: -2px; }
.lp-grp.lp-marke { position: relative; }
/* Eine leere Gruppe faengt den Zug als Flaeche, nicht als Strich — dort
   gibt es kein Dazwischen, es geht hinein. */
/* `width: auto`, nicht 100 % — die Regel weiter oben setzt links und
   rechts je 16 Pixel Abstand, und 100 % PLUS Abstand ist breiter als die
   Spalte. Solange der Baum quer scrollte, fiel es nicht auf; seit er das
   nicht mehr tut, wurden die zwei Knoepfe rechts abgeschnitten. */
.lp-zneu {
  margin-top: 12px; width: auto; padding: 7px 9px; border-radius: var(--r-teil);
  font-size: 12.5px; color: var(--faint); border: 1px dashed var(--strichel);
  text-align: left; cursor: pointer;
}
.lp-zneu:disabled { cursor: default; opacity: .5; }
.lp-zneu:hover:not(:disabled) { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.lp-zurueck {
  margin-top: 8px; width: auto; padding: 6px 9px; border-radius: var(--r-teil);
  font-size: 11.5px; color: var(--faint); text-align: left; cursor: pointer;
}
.lp-zurueck:hover { color: var(--muted); background: var(--hover); }

/* Der Griff zum Duplizieren sitzt IN der Zeile und faengt den Klick
   selbst ab. Er erscheint erst beim Hinfahren — sonst stuende an jeder
   Zeile ein Zeichen, das in neun von zehn Faellen niemand braucht. */
.lp-zw { display: flex; align-items: center; }
.lp-zw .lp-zl { flex: 1; min-width: 0; }
.lp-dup {
  flex: none; width: 24px; height: 24px; margin-left: 0; border-radius: var(--r-teil);
  display: grid; place-items: center;
  color: var(--faint); font-size: 12px; cursor: pointer; opacity: 0;
}
.lp-lzw:hover .lp-dup { opacity: 1; }
.lp-dup:hover { color: var(--text); background: var(--hover); }
.lp-dup.weg:hover { color: var(--rot, #e5534b); }

/* Das Namensfeld im Formular sieht aus wie ein Wert, bis man hineinfaehrt
   — es IST der Name, nicht ein Feld daneben. */
.lp-namensfeld {
  width: 100%; background: none; border: 1px solid transparent; outline: 0;
  color: var(--text); font: inherit; font-size: 14px;
  padding: 7px 10px; margin: 0 -10px; border-radius: var(--r-feld);
}
.lp-namensfeld:hover { background: var(--hover); }
.lp-namensfeld:focus { background: var(--raise); }

/* Wohin die Anzeige gehoert: die eigene Gruppe steht fest, die anderen
   sind Knoepfe. */
.lp-ziele { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-ziel {
  padding: 5px 11px; border-radius: var(--r-teil); background: none;
  border: 1px solid var(--border); font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.lp-ziel:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.lp-ziel.an { background: var(--panel); border-color: transparent; color: var(--text); cursor: default; }

.lp-lzw { display: flex; align-items: center; }
.lp-lzw .lp-lz { flex: 1; min-width: 0; }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn.sm.grau { background: var(--raise); color: var(--muted); }
.btn.sm.grau:hover { color: var(--text); }

/* Die Mitte. Der Pfad selbst steht nicht mehr hier — er ist nach oben
   ueber alle drei Spalten gewandert, wie bei Meta; seine Stile stehen
   dort bei `.lp-kopf`. */
.lp-pfad-w { color: var(--muted); cursor: pointer; }
.lp-pfad-w:hover { color: var(--text); }
/* Die Regel fuer „in Testing 1" neben dem Anzeigennamen. Der Hinweis ist
   am 12.09.2026 gefallen — die Form bleibt stehen, falls an dieser Stelle
   wieder eine kleine Herkunftszeile gebraucht wird. */
.lp-pfad-klein { font-size: 11.5px; color: var(--faint); }
.lp-form { padding: 14px 18px; overflow: auto; flex: 1; }

/* Hier lag der gruene Faden aus Entwurf 46: ein Streifen links an jeder
   Karte, gruen wenn der Block stand, grau wenn dort noch etwas fehlte.
   Marks Ansage vom 11.09.2026: „mach den gruenen strich weg." Mit dem
   Streifen geht auch die `offen`-Rechnung dahinter — ein Merker, den
   niemand mehr liest, ist schlimmer als keiner. */

/* ---- Metas Maske, in unseren Farben -------------------------------
 *
 * Marks Bilder vom 11.09.2026 aus dem echten Werbeanzeigenmanager, dazu
 * „ne das design gefaellt mir nicht ich schicke die nun bilder siehe
 * bilder / 1zu1 uebernehmen."
 *
 * Die Vorlage davor sagte „Do not create unnecessary cards around every
 * field" — Meta selbst macht das Gegenteil: Jeder Abschnitt ist eine
 * Karte mit Rahmen, Haken im Kopf und „Show more settings" am Fuss. Die
 * Bilder gelten, nicht die Vorlage.
 *
 * Uebernommen ist die FORM: Kartenmass, Kopf mit Haken, Feldform (fetter
 * Name, grauer Untertext, dann das Bedienteil), Abstaende, Schriftgrade.
 * Die Farben bleiben unsere, nach Marks Ansage davor: „blos in unseren
 * farben eben." Die Rollen sind dieselben wie drueben — die Karte heller
 * als der Grund, der Haken gruen, Verweise blau, Warnungen gelb. */
/* Das Formular zieht mit, wenn die Vorschau eingeklappt wird oder die
   Spalte breiter gezogen ist. Marks Ansage vom 11.09.2026: „wenn man
   die vorschau zuklappt sollen die schaltflaechen etc mitziehen."

   Feste Pixel taten das nicht: Die Mitte wurde breiter, das Formular
   blieb bei 820 stehen und liess rechts eine Wand aus Nichts. */
.lp-form { max-width: none; }
.lp-form .card-box {
  background: var(--karte); border: 1px solid var(--border);
  border-radius: var(--r-feld); padding: 20px 24px 22px; margin: 0 0 16px;
}
.lp-form .card-box:last-child { margin-bottom: 0; }
/* Der Kopf: nur der Titel. Hier stand ein gruener Haken davor, wie
   drueben — Marks Ansage vom 11.09.2026: „mach diesen gruenen haken
   ueberall weg." Bei Meta sagt er „hier fehlt nichts"; bei uns stand er
   immer da und sagte damit gar nichts. */
.lp-form .ov-head { align-items: center; gap: 10px; margin-bottom: 18px; }
.lp-form .box-label { font-size: 17px; font-weight: 600; color: var(--text); }
/* Die Feldgruppen darin: kein Kasten, nur Abstand. */
.lp-form .up-block { border: 0; border-radius: 0; padding: 0; }
.lp-form .up-block + .up-block { margin-top: 22px; }
/* Der fette Feldname ueber dem Bedienteil — Metas auffaelligste
   Eigenart. Drueben steht er in 15/600, darunter der graue Untertext,
   und erst dann das Feld. */
.lp-form .up-gruppe { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
.lp-form .int-label { font-size: 15px; font-weight: 600; color: var(--text); }
.lp-form .up-gitter { gap: 18px 16px; }
.lp-form .up-feld { gap: 8px; }
/* Bedienteile: vierzig hoch, Radius 6, Rahmen sichtbar — drueben
   genauso, und ausdruecklich keine Pillen. */
/* Alle Bedienteile gleich: vierzig hoch, Radius 6 — und eine eigene
   FLAECHE, nicht nur ein Umriss. Marks Meldung vom 11.09.2026: „ich
   will aber das ueberall eine schatflaeche ist statt umriss beim hovern
   genau wie darunter."

   Das Auswahlfeld trug die Farbe der Karte, und seit die Karte selbst
   `--panel` ist, war davon nichts mehr zu sehen — nur beim Hovern
   leuchtete der Rahmen auf. Die anderen Felder standen laengst auf
   `--raise` und hoben sich ab. Jetzt alle drei gleich, und der Hover
   hellt die Flaeche auf, statt den Rahmen zu faerben. */
/* Marks Ansage vom 11.09.2026: „mach mal alle schaltflaechen zur pille
   bei launchpad in der mitte wo man was auswaehlen oder reinschreiben
   kann." Hier standen sechs Pixel. Das Eingabefeld daneben war laengst
   rund — die allgemeine Pillenregel gewinnt dort gegen diesen Block,
   weil `:not(.hoch)` seine Klasse mitzaehlt und die spaetere Regel bei
   gleicher Staerke gewinnt. Bei `.opt-sel` gewann dieser Block. Genau
   das war das Durcheinander in einer Zeile. Das mehrzeilige Feld bleibt
   kantig — es geht in die Hoehe. */
.lp-form .up-eingabe,
.lp-form .opt-sel,
.lp-form .up-wahl,
.lp-form .up-sel {
  height: 40px; border-radius: var(--r-teil); font-size: 14px;
  background-color: var(--karte-feld); border-color: var(--border);
}
.lp-form .up-eingabe.hoch { border-radius: var(--r-flaeche); height: auto; }
.lp-form .opt-sel:hover,
.lp-form .up-wahl:hover,
.lp-form .up-sel:hover { background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text); }
.lp-form .up-gitter.oben > * > .up-eingabe,
.lp-form .up-gitter.oben > * > .up-wahl,
.lp-form .up-gitter.oben > * > .up-mitzeichen > .up-eingabe { height: 40px; }
.lp-form .seg.klein { height: 40px; border-radius: var(--r-knopf); }
/* Zwei Ausnahmen in einer eckigen Maske — Marks Ansagen vom 11.09.2026:
   „advantage + an aus als pill form selbe farbe aber" und „geschlecht
   auch als pill form". Die Farben bleiben, nur die Ecken gehen. */
.seg.pille, .lp-form .seg.klein.pille { border-radius: var(--r-knopf); }
/* Marks Ansage vom 15.09.2026: „geschlecht im launchpad wieder runder
   switch" und „advantage switch auch." Im Launchpad steht `--r-teil` auf
   acht Pixel, weil Metas Manager eckig ist — diese zwei Schalter sind
   seine Ausnahme und waren es schon am 11.09.2026 („geschlecht auch als
   pill form"). Sie nehmen darum `--r-knopf`, den die Umgebung nicht
   umbiegt; Huelle und Knoepfe darin gemeinsam, sonst sitzen runde
   Knoepfe in einem eckigen Kasten. */
/* Und der Knopf darin sitzt mittig in der Rundung — Marks Meldung vom
   12.09.2026: „bei geschlecht ist der switch unsauber."

   Zwei Ursachen, beide klein: Der Knopf war 28 hoch in einer Schale von
   40 und stand darum oben statt in der Mitte. Und er lag nur vier Pixel
   von der Kante entfernt, waehrend die Schale mit Radius 20 rundet — an
   den Enden schnitt seine Kappe die der Schale.

   Vier Pixel ringsum und eine Kappe, die die Hoehe fuellt: Dann sind
   beide Rundungen konzentrisch und der Abstand ueberall gleich. */
.seg.pille { padding: 4px; align-items: stretch; }
.seg.pille .seg-btn, .lp-form .seg.klein.pille .seg-btn {
  height: auto; align-self: stretch; display: inline-flex; align-items: center;
  border-radius: var(--r-knopf);
}
/* Das Menue der Orte traegt Haken: Wo keiner steht, haelt ein leeres
   Feld den Platz, damit die Namen untereinander fluchten. */
.menu-leer { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; }
/* Das Bild der Seite in ihrer Auswahl — Marks Ansage vom 11.09.2026:
   „bei der seiten auswahl die ID wegmachen bitte stattdessen bild von
   der seite links." */
.wahl-bild {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  object-fit: cover; display: block; background: var(--raise);
}
.lp-form .up-land { border-radius: var(--r-teil); }
/* Ein Wert, den man hier nicht aendert, steht bei Meta als einfacher
   Text unter seinem fetten Namen — nicht in einem Feld. */
.lp-form .lp-wert.klein {
  padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Metas Feldform: fetter Name, darunter ein grauer Satz, darunter das
   Bedienteil — und alles untereinander, jedes ueber die Breite eines
   Formulars statt in einem Raster aus drei Spalten. Marks Ansage vom
   11.09.2026: „es soll gleichaufgebaut sein vom layout komplett." */
.lp-form .up-fb + .up-fb { margin-top: 22px; }
.up-fb-nm { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 10px; }
/* Der Handgriff rechts neben dem Feldnamen — Marks Ansage vom
   11.09.2026: „ganze copy anzeigen soll oben rechts sein ueber dem copy
   feld." */
.up-fb-r { margin-left: auto; font-weight: 400; }
.up-fb-hin { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
/* Steht ein Handgriff in der Zeile, rueckt er an die rechte Kante — und
   zwar an die des FELDES darunter, nicht an die der Ueberschrift. Marks
   Ansage vom 11.09.2026: „das mit dem ganze copy anzeigen runter
   aligned mit ,C6 · aus dem Projekt' und rechts aligned mit der
   karte." */
.up-fb-hin:has(.lp-mehrzeilen) { display: flex; align-items: baseline; gap: 10px; }
.up-fb-hin .lp-mehrzeilen { margin-left: auto; flex: none; }
.up-fb-klein { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; display: block; }
/* Der Stern an einem Pflichtfeld — drueben steht er genauso davor. */
/* Hier stand der rote Stern vor den Pflichtfeldern — Marks Ansage vom
   11.09.2026: „mach diese roten sterne weg." Mit dem Zeichen faellt
   seine Farbe; was fehlt, sagt beim Absenden ohnehin die Meldung. */
/* Ein Wert, der hier feststeht, bekommt dieselbe Flaeche wie die Felder
   daneben. Marks Meldung vom 11.09.2026: „bei manchen stellen fehlt die
   schaltflaeche die angeforddert war."

   Bei Meta steht so ein Wert als nackter Text unter seinem fetten Namen,
   und genau so stand er hier auch — daneben aber Auswahlfelder mit
   Rahmen und Flaeche, und dazwischen sah es aus, als fehle etwas. Also
   dieselbe Form, nur ohne Pfeil und ohne Zeiger: „hier steht etwas, und
   es kommt von woanders." */
.up-fest {
  display: flex; align-items: center; min-height: 40px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-feld);
  background: var(--karte-feld); color: var(--muted);
  font-size: 14px; line-height: 1.5; max-width: none;
}
/* Die Bedienteile fuellen die Zeile.
 *
   Hier stand eine Kappe von 68 Prozent, und sie hatte ihren Grund: Als
   die Mitte noch die ganze Seite war, las sich ein Auswahlfeld ueber 770
   Pixel wie ein Fehler.

   Seit die Mitte eine Spalte von gut fuenfhundert Pixeln ist, dreht sich
   das um: 68 Prozent davon sind 335, und rechts daneben stand ein
   Drittel Nichts. Marks Ansage vom 11.09.2026: „diese schaltflaechen
   muessen die ganze zeile fuellen." Die Karte gibt die Breite vor, nicht
   mehr eine Zahl. */
.lp-form .up-fb > .opt-sel,
.lp-form .up-fb > .up-eingabe,
.lp-form .up-fb > .up-wahl,
.lp-form .up-fb > .up-sel,
.lp-form .up-gitter.budget > .opt-sel { width: 100%; max-width: none; }
.lp-form .up-fb > .up-mitzeichen,
.lp-form .up-fb > .up-radios { max-width: none; }
.lp-form .up-fest, .lp-form .up-medium, .lp-form .up-lesefeld,
.lp-form .lp-lzw { max-width: none; }
.up-mitzeichen.schmal, .up-sel.schmal, .seg.klein.schmal { max-width: 260px; }
.lp-form .up-gitter.paar { grid-template-columns: 1fr 1fr; max-width: 400px; }
/* Die Zeitzone des Werbekontos steht IN der Schaltflaeche der Uhrzeit —
   Marks Ansage vom 19.09.2026: „es soll in der Schaltflaeche die exakte
   zone stehen z.B GMT +2", und einen Zug spaeter: „grossgeschrieben
   abgedunkelt."

   Dafuer traegt die Huelle die Flaeche und das Auswahlfeld darin nur
   noch die Auswahl: Zwei Flaechen uebereinander haetten zwei Kanten und
   zwei Schleier beim Zeigen. Ohne Zone bleibt die Huelle durchsichtig,
   und das Auswahlfeld sieht aus wie ueberall sonst. */
.up-zeitfeld { display: inline-flex; align-items: stretch; min-width: 0; }
.up-zeitfeld > .opt-sel { flex: 1 1 auto; min-width: 0; max-width: none; }
.lp-form .up-zeitfeld.mitzone {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-teil); height: 40px; padding-right: 12px; align-items: center;
}
.lp-form .up-zeitfeld.mitzone > .opt-sel {
  background-color: transparent; border: 0; height: 100%;
}
/* Dieselbe Flaeche und dieselbe Kante wie die Schaltflaeche daneben: Im
   Launchpad tragen die Felder `--lp-feld` und `--lp-rand`, nicht die
   allgemeinen Toene. Gemessen am 19.09.2026 standen Kante 29 gegen 37 —
   zwei Nachbarn, die sich um acht Stufen unterscheiden. */
.lp-seite .up-zeitfeld.mitzone { background: var(--lp-feld); border-color: var(--lp-rand); }
.lp-form .up-zeitfeld.mitzone:hover {
  background-image: linear-gradient(var(--hover), var(--hover));
}
.lp-form .up-zeitfeld.mitzone > .opt-sel:hover { background-image: none; }
/* Grossgeschrieben und abgedunkelt: Sie ist eine Auskunft zu der Zahl
   daneben, keine zweite Angabe. */
.up-zone {
  font-style: normal; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap; flex: none;
}
/* Budgetart und Betrag nebeneinander, mit der Waehrung im Feld — der
   auffaelligste Handgriff auf Marks Bild. */
.lp-form .up-gitter.budget { grid-template-columns: 1fr 1fr; max-width: none; gap: 12px; }
.up-mitzeichen.waehrung .vorn { left: 12px; right: auto; }
.up-mitzeichen.waehrung .up-eingabe { padding-left: 28px; padding-right: 52px; }

/* Metas Radiogruppen stehen in einem eigenen Kasten, und jede Zeile
   traegt unter ihrem Namen den Satz, der sagt, was sie bedeutet. Ohne
   den Satz waere „Kampagnenbudget" gegen „Anzeigengruppen-Budget" eine
   Frage, die man nur beantworten kann, wenn man die Antwort schon
   kennt. */
.up-radios {
  border: 1px solid var(--border); border-radius: var(--r-feld);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  max-width: none;
}
.up-radio {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 11px 12px; border-radius: var(--r-feld); text-align: left; cursor: pointer;
}
.up-radio { border: 1px solid transparent; }
/* Der Schleier LIEGT auf der Flaeche, statt sie zu ersetzen — sonst
   wuerde die gewaehlte Zeile beim Zeigen dunkler statt heller. */
.up-radio:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
/* Hier stand ein Punkt davor, gruen wenn gewaehlt, danach ein Umriss.
   Marks Ansage vom 13.09.2026: „soll kein umriss haben sondern eine
   aufhellerung wie bei geschlechts switch" — also genau das, was
   .seg-btn.on traegt: eine Stufe ueber der eigenen Flaeche.

   Marks Meldung vom 15.09.2026: „im launchpad kann man aktuell nicht auf
   cbo/abo druecken." Gedrueckt werden konnte man sehr wohl — man sah es
   nur nicht. Hier stand fest `--raise`, und genau das ist im Launchpad
   die Farbe der KARTE (--lp-karte). Die gewaehlte Zeile trug damit exakt
   den Grund, auf dem sie liegt; ein Klick aenderte den Zustand und das
   Bild blieb gleich. Jetzt eine Stufe darueber — im Launchpad --lp-feld,
   sonst --panel. */
.up-radio.an { border-color: transparent; background: var(--lp-feld, var(--panel)); }
.up-rt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.up-rt b { font-size: 14px; font-weight: 500; color: var(--text); }
.up-rt em { font-size: 12.5px; color: var(--muted); font-style: normal; line-height: 1.45; }

/* Das Bild einer Anzeige: Vorschau links, Name rechts — drueben steht
   nach dem Hochladen dasselbe. Bei uns kommt es aus dem Projekt, und
   genau das steht darunter. */
.up-medium {
  display: flex; align-items: center; gap: 14px; max-width: none;
  border: 1px solid var(--border); border-radius: var(--r-feld); padding: 12px;
}
.up-medium-b {
  width: 64px; height: 64px; flex: none; border-radius: var(--r-feld); overflow: hidden;
  background: var(--raise); display: grid; place-items: center;
  color: var(--faint); font-size: 11px;
}
.up-medium-b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-medium-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.up-medium-t b { font-size: 14px; font-weight: 500; }
.up-medium-t em { font-size: 12.5px; color: var(--faint); font-style: normal; }
/* Der Primaertext ist bei uns nicht zu tippen — er kommt aus dem
   Projekt. Er sieht aus wie ein Textfeld, das ruht. */
.up-lesefeld {
  max-width: none; min-height: 96px; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--r-feld);
  background: var(--feld-grund); color: var(--muted);
  font-size: 14px; line-height: 1.5; white-space: pre-wrap;
}

/* Der Rechensatz unter dem Budget — drueben steht dort, was der Tag
   kostet und was Meta hoechstens abbucht. */
.up-rechnung { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
/* Trennlinie und „Mehr Einstellungen" am Kartenfuss, wie drueben. */
.up-kfuss { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.up-mehr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--blau, #4a9eff); cursor: pointer;
}
.up-mehr-btn svg { width: 12px; height: 12px; transition: transform .15s ease; }
.up-mehr-btn.auf svg { transform: rotate(180deg); }

/* Die Kopfzeile ueber allen drei Spalten — drueben steht der Pfad
   genauso, ganz oben und ueber die ganze Breite. Jede Stufe ist ein
   Knopf mit Zeichen und Namen; auf der Kampagne zaehlen die letzten
   beiden, statt zu benennen. */
.lp-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 14px; margin-bottom: 0;
}
.lp-pfad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 0; padding: 0; font-size: 13px; }
.lp-pfad em { color: var(--faint); font-style: normal; }
.lp-kr {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px; border-radius: var(--r-feld);
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.lp-kr:hover { background: var(--hover); color: var(--text); }
.lp-kr.an { background: var(--panel); color: var(--text); font-weight: 500; }
.lp-kr i { display: flex; color: var(--faint); }
.lp-kr i svg { width: 15px; height: 15px; }
.lp-kr.an i { color: var(--text); }
.lp-stand {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
}
/* Die Zahl am Knopf „Inhalt": wie viele Copys und Bilder gewaehlt sind.
   Ohne sie muesste man aufmachen, um zu sehen, woraus gebaut wird. */
.lp-zahl {
  margin-left: 7px; padding: 1px 6px; border-radius: var(--r-klein);
  background: var(--raise); color: var(--faint);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
/* Das Fenster dahinter ist breit — es traegt zwei Listen nebeneinander. */
.modal.up-inhalt { width: min(980px, calc(100vw - 32px)); }
/* Der Aufbau braucht Breite: Jede Gruppe zeigt ihre Anzeigen als Reihe
   von Miniaturen, und bei acht Bildern nebeneinander ist ein schmales
   Fenster eine Treppe. Die Karte darin behaelt ihr eigenes Aussehen —
   sie ist dieselbe wie vor dem Umbau. */
.modal.up-aufbau { width: min(1120px, calc(100vw - 32px)); }
.modal.up-aufbau .card-box { background: none; border: 0; padding: 0; }
.lp-stand::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--faint);
}

.lp-form .up-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 1280px) { .lp-form .up-spalten { grid-template-columns: 1fr; } }
.lp-wert { font-size: 14px; padding: 7px 0; }
.lp-wert.klein { font-size: 13px; color: var(--muted); word-break: break-all; }

/* Die Anzeigen einer Gruppe als Liste */
/* Die Anzeigen einer Gruppe bekommen dieselbe Flaeche wie die Felder
   daneben — Marks Meldung vom 11.09.2026: „bei manchen stellen fehlt die
   schaltflaeche die angeforddert war." */
.lp-liste { display: flex; flex-direction: column; gap: 6px; }
/* Die Anzeigenzeile — Marks Wahl vom 11.09.2026 aus dreissig Entwuerfen:
   Nummer 20, „die Zeile hebt sich ab statt umrandet zu sein."

   Genau die Werte des Entwurfs: Flaeche statt Rahmen, zehn Pixel Radius,
   zehn Polster, elf Abstand zwischen Bild und Text. Das Bild 52 im
   Quadrat mit sechs Pixeln Radius, der Name 12,5 halbfett, die Copy 11,5
   blass ueber zwei Zeilen.

   Kein Rahmen mehr: Die Flaeche trennt. Und keine feste Hoehe von 40 —
   daran lief die Zeile mit Bild vorher in die naechste hinein. */
/* Mit Umriss — Marks Ansage vom 11.09.2026: „anzeigen in dieser gruppe
   umrandung geben bitte". Aus Entwurf 20 stammt die Flaeche; seit die
   Karten und Felder ringsum auf dem Grund stehen und ihre Form vom
   Umriss bekommen, stand die Zeile als einzige ohne da. */
/* Die beiden Griffe rechts stehen mittig, nicht oben — Marks Ansage vom
   12.09.2026: „die icons bei ad uebersicht oben auf adset ebene bitte
   zentrieren duplicate und X." Bild und Text beginnen oben, das bleibt;
   die Zeile richtet ihre Kinder aber wieder mittig aus, und Bild und
   Text bekommen ihre obere Kante selbst. */
.lp-form .lp-lzw {
  background: var(--lp-feld); border: 1px solid var(--lp-rand); border-radius: var(--r-feld);
  padding: 10px; gap: 11px; align-items: center; max-width: none;
}
.lp-form .lp-lzw > .lp-lz { align-self: stretch; }
.lp-form .lp-lz {
  height: auto; margin: 0; padding: 0; border-radius: 0;
  background: none; font-size: 14px;
}
/* Angefasst wird die ganze Zeile, nicht der Knopf darin — darum liegt
   die Spur des Zeigers an ihr. */
.lp-form .lp-lzw:hover { background: var(--hover); }
.lp-form .lp-lz:hover { background: none; }
.lp-lz {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-feld);
  font-size: 13px; color: var(--text); text-align: left; cursor: pointer;
}
.lp-lz:hover { background: var(--hover); }
.lp-lz-nm { font-weight: 500; flex: none; }
/* Die Anzeigenzeile in der Mitte: Bild, Name, Copy — Marks Auftrag vom
   11.09.2026: „bild mit vorschau und dann copy, so viel zeilen wie das
   bild breit ist."

   Die Copy laeuft darum genau so weit, wie das Bild hoch ist: drei
   Zeilen zu je sechzehn Pixeln neben einem Daumennagel von vierundsechzig
   — der Rest wird abgeschnitten, nicht gequetscht. */
/* Die Zeile mit Bild ist keine 40-Pixel-Zeile mehr — `.lp-form .lp-lz`
   setzt eine feste Hoehe, und darunter lief der Inhalt in die naechste
   Zeile hinein. Marks Meldung vom 11.09.2026: „schau mal, wie verbuggt
   das ineinander ist." */
.lp-lza { align-items: flex-start; gap: 11px; height: auto; padding: 0; }
.lp-lzb {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-feld);
  object-fit: cover; display: block; background: var(--karte-feld);
}
/* Entwurf 002 aus zwanzig — Marks Wahl vom 18.09.2026: „002." Er hiess
   „Ohne Strichel": dieselbe Flaeche, nur ohne die gestrichelte Kante.

   Hier stand ein leeres gestricheltes Quadrat — Marks Meldung davor:
   „das gefaellt mir nicht dieser platzhalter bei leerer anzeige." Die
   Strichellinie zog den Blick auf die Stelle, an der NICHTS ist, und das
   dreimal untereinander. Die Flaeche haelt den Platz weiter, damit die
   Zeilen nicht springen, sobald ein Bild dazukommt; das Zeichen darin
   sagt leise, was dort hingehoert. */
.lp-lzb.ph {
  display: grid; place-items: center; color: var(--faint);
}
.lp-lz-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-lz-t b { font-size: 12.5px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-lz-t em {
  font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--faint);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.lp-lz-hin { font-size: 12px; color: var(--faint); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Die drei Teile einer Anzeige nebeneinander */
.lp-teile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .lp-teile { grid-template-columns: 1fr; } }
.lp-teil { background: var(--raise); border-radius: var(--r-flaeche); padding: 12px 14px; }
.lp-teil-wert { font-size: 13.5px; font-weight: 500; margin: 4px 0 6px; }
.lp-teil-text { margin: 0; font-size: 11.5px; color: var(--faint); line-height: 1.5; }
.lp-teil-bild {
  aspect-ratio: 1; border-radius: var(--r-feld); overflow: hidden; background: var(--platz);
  display: grid; place-items: center; color: var(--faint); font-size: 11px;
}
.lp-teil-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-paar-hin {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--r-feld); background: var(--tief); margin-bottom: 12px;
  font-size: 12px; color: var(--muted);
}
.lp-paar-hin svg { width: 15px; height: 15px; color: var(--faint); }

/* Die Vorschau rechts */
/* Die Vorschau rechts, nach Marks Bildern: eigener Kopf mit Titel und
   Knopf, darunter eine Reihe Formate, und erst dann die Anzeige. Die
   Reihe ist kein Schmuck — ein Feed-Beitrag ist quadratisch, eine Story
   hochkant, und derselbe Text steht darin voellig anders. */
.lp-vk {
  display: flex; align-items: center; gap: 10px;
  height: 44px; margin-bottom: 10px;
}
.lp-vk-t { font-size: 14px; font-weight: 600; color: var(--text); }
.lp-vg {
  display: flex; align-items: center; gap: 4px;
  padding: 5px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: var(--r-feld);
}
.lp-vgb {
  width: 30px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-ikon); cursor: pointer; color: var(--faint);
}
.lp-vgb:hover { background: var(--hover); color: var(--muted); }
.lp-vgb.an { background: var(--panel); color: var(--text); }
/* Die Zeichen sind gezeichnet, nicht gesetzt: ein Quadrat, ein
   Hochformat, ein Querformat. Drei Rechtecke sagen hier mehr als drei
   Woerter, und sie brauchen keine Schriftart. */
.lp-vgi { display: block; border: 1.5px solid currentColor; border-radius: var(--r-klein); }
.lp-vgi.quadrat { width: 13px; height: 13px; }
.lp-vgi.hoch { width: 9px; height: 15px; }
.lp-vgi.quer { width: 16px; height: 9px; }
.lp-vg-n { font-size: 12px; color: var(--faint); padding-right: 6px; }
/* Story und Reels laufen randlos: Text und Knopf liegen ueber dem Bild
   statt darunter. */
.lp-pv.hoch { position: relative; }
.lp-pv.hoch .lp-pk.ueber {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(rgba(0,0,0,.55), transparent);
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.lp-pv.hoch .lp-pu {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 13px 13px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  display: flex; flex-direction: column; gap: 10px;
}
.lp-pv.hoch .lp-ptw { padding: 0; }
.lp-pv.hoch .lp-pt { color: #f0f0f0; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lp-cta.breit { text-align: center; padding: 8px 11px; background: rgba(255,255,255,.16); color: #fff; }
/* Und gross: derselbe Aufbau, nur mit dem vollstaendigen Text. In der
   schmalen Spalte ist er gekuerzt, und gerade der Schluss einer Copy ist
   der Teil, den man vor dem Hochladen liest. */
.modal.lp-vsm { width: min(460px, calc(100vw - 32px)); }
/* Die Grossansicht zeigt alles — dort ist der ganze Text der Zweck. */
.lp-pt.voll { max-height: 40vh; overflow: auto; white-space: pre-wrap;
  display: block; -webkit-line-clamp: none; }

.lp-vs h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); }
.lp-vs h4.lp-sp2 { margin-top: 16px; }
/* Marks Ansage vom 14.09.2026: „oben rum den rest der ad karte soll das
   dunkle sein von der mitte das dunkle grau nicht das schwarz sondern
   von den containern das dunkle grau."

   Sie stand auf --tief, und das sind vier Prozent Schrift auf dem Grund
   — auf Tiefschwarz #0f0f0f, also praktisch schwarz. Jetzt traegt sie
   dieselben zwei Namen wie das Formular in der Mitte: --karte fuer die
   Container, --karte-feld fuer die Felder. Nicht deren Werte, ihre
   Namen — dann wandern beide Seiten fuer immer zusammen. */
.lp-pv { background: var(--karte); border: 1px solid var(--trennung); border-radius: var(--r-flaeche); overflow: hidden; }
.lp-pk { display: flex; align-items: center; gap: 9px; padding: 11px 13px; font-size: 12.5px; }
.lp-pk b { font-weight: 600; }
.lp-pk em { font-style: normal; font-size: 10.5px; color: var(--faint); }
.lp-av { width: 28px; height: 28px; border-radius: 50%; background: var(--platz); flex: none;  overflow: hidden; }
.lp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* `pre-wrap`, damit die Absaetze der Copy stehen bleiben — siehe
   lpCopyText in app.js. Und genau drei Zeilen, wie drueben im Feed:
   Marks Ansage vom 11.09.2026 „hier in der vorschau immer nur 3
   zeilen". Gekuerzt wird nach ZEILEN, nicht nach Zeichen — seit die
   Absaetze stehen, sagt die Zeichenzahl nichts mehr ueber die Hoehe. */
/* Drei Zeilen, und die dritte ganz — Marks Meldung vom 11.09.2026:
   „schau rechts in vorschau nur 3 zeilen die letzte ist abgeschnitten."
   Das Polster stand am Absatz selbst und zaehlte bei der Hoehe mit; in
   diesem Chrome faellt `display: -webkit-box` auf `flow-root` zurueck,
   und geschnitten hat allein das `overflow`. Jetzt traegt die Huelle das
   Polster, und der Absatz ist genau drei Zeilenhoehen hoch. */
.lp-ptw { padding: 0 13px 11px; }
.lp-pt { margin: 0; font-size: 12px; color: var(--muted);
  line-height: 1.5; white-space: pre-wrap; max-height: calc(1.5em * 3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-pv .lp-mehr { display: block; margin-top: 2px; font-size: 12px; }
/* Der Knopf im grossen Fenster — Marks Ansage vom 11.09.2026: „wenn man
   vollbild auf die vorschau drueckt sollen nur 3 zeilen sichtbar sein,
   mit mehr anzeigen knopf." */
.lp-mehr-knopf {
  margin-top: 4px; padding: 0; border: 0; background: none;
  color: var(--faint); font: inherit; font-size: 12px; cursor: pointer;
}
.lp-mehr-knopf:hover { color: var(--text); }
.lp-mehr { color: var(--faint); }
/* Der Grund hinter dem Bild war warm getoent — Marks Meldung vom
   11.09.2026: „rechts bei der vorschau ist hinter dem bild farbe tausch
   das, es soll unten unter der trennlinie sein aber nicht hinter dem
   bild." Hinter einem Bild sieht man ihn nur an den Raendern, und dort
   sah er aus wie ein Fehler; im Fuss traegt er die Zeile. */
/* Das Bild mit Ecken — Marks Ansage vom 11.09.2026: „bei der vorschau
   rechts das bild bitte edged". Drueben laeuft es von Kante zu Kante;
   hier steht es in einer Karte, die selbst Ecken hat, und ein Bild mit
   scharfen Ecken darin sieht aus wie eingeklebt. Es rueckt dafuer
   seitlich ein, sonst waere die Rundung nicht zu sehen. */
.lp-pb {
  aspect-ratio: 1; background: var(--karte); display: grid; place-items: center;
  color: var(--faint); font-size: 11px; text-align: center;
  /* Kein Polster am Kasten — Marks Meldung vom 11.09.2026: „das bild
     rechts in der vorschau muss groesser sein so das die raender mit dem
     text aligned sind im launchpad." Gemessen stand der KASTEN richtig
     bei 14 wie der Text, das BILD darin aber bei 26: Zwoelf Pixel
     Polster, gedacht fuer den Platzhaltersatz „kein Bild", schoben es
     nach innen. Das Polster traegt jetzt der Satz selbst. */
  /* Dieselbe Kante wie der Text darueber — Marks Meldung vom
     11.09.2026: „hier bei der vorschau mit dem bild das muss aligned
     sein mit dem text links oben drueber." Gemessen stand das Bild bei
     12, der Text bei 14: zwei Pixel daneben, und genau die sieht man.
     Der Text polstert 13 und liegt hinter dem Rahmen der Karte, also
     polstert das Bild ebenfalls 13. */
  /* Unten dieselbe Luft wie oben — Marks Ansage vom 12.09.2026: „das
     bild muss unten denselben padding zur trennlinie haben wie nach oben
     zum text." Elf Pixel gibt der Textblock darueber ab, elf gibt das
     Bild nach unten. Das galt bisher nur im grossen Fenster. */
  margin: 0 13px 11px; border-radius: var(--r-feld); overflow: hidden;
  /* Kurz fuellte das Bild in der rechten Spalte die ganze Flaeche —
     Marks Ansage „mach diesen rahmen ums bild weg". Eine Stunde spaeter
     das Gegenteil: „nun ist das bild in der vorschau zu gross es soll
     nur so gross sein wie der text darueber aligned." Also wieder
     dieselbe Kante wie der Text, in beiden Vorschauen. */
}
/* Der Radius auch am Bild selbst — Marks Meldung vom 11.09.2026: „das
   bild in der vorschau rechts bei launchpad bitte edged corners hab ich
   dir vorher gesagt." Am Kasten allein reichte er nicht: Das Bild fuellt
   ihn ganz, und ein Zuschnitt ueber `overflow` zeichnet an dieser Kante
   keine sichtbare Rundung. */
.lp-pb img { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; }
.lp-pb > span { padding: 12px; }
/* Eine Trennlinie ueber dem Fuss statt des Gedankenstrichs darin —
   Marks Ansage vom 11.09.2026: „den strich da unten bei vorschau
   entfernen stattdessen eine trennlinie". Drueben im Feed trennt genau
   dort eine Linie das Bild von Adresse, Ueberschrift und Knopf. */
/* Im grossen Fenster hatte das Bild oben elf Pixel Luft zum Text und
   unten keine — es stiess an die Trennlinie ueber dem Fuss. Marks Ansage
   vom 12.09.2026: „hier bei vollbild der vorschau bitte etwas padding
   vom bild unten zur trennlinie so wie oben." Dieselben elf Pixel, die
   `.lp-ptw` oben abgibt. */
.modal.lp-vsm .lp-pb { margin-bottom: 11px; }
/* Der Fuss traegt keine eigene Farbe mehr — Marks Ansage vom
   12.09.2026: „nach der trennlinie unten soll es dieselbe farbe auf
   jeden theme haben wie darueber." `--warm` war ein Papierton und stand
   auf Glas oder Kohle als Fremdkoerper in der Karte; ohne Fuellung
   nimmt der Fuss den Grund der Karte, in jedem Thema. */
/* Der Fuss eine Stufe unter der Karte — Marks Meldung vom 14.09.2026:
   „bei der ad karten vorschau fehlt nun bei headline zu bild die
   trennlinie und es soll etwas dunkler sein als der rest der adkarte."

   Die Linie war nicht weg, sie war unsichtbar geworden: Seit die Felder
   im Launchpad auf `--panel` stehen (28), traegt auch die Vorschaukarte
   diesen Ton — und der Rand liegt bei 29. Ein Punkt Unterschied sieht
   niemand. Jetzt hat der Fuss seinen eigenen, dunkleren Grund, und die
   Linie steht wieder zwischen zwei verschiedenen Flaechen. */
/* Entwurf 030 aus dreissig — Marks Wahl vom 18.09.2026: „anzeigenkarte
   030 mit bild icon als platzhalter."

   Die Riegel haben die Form der Zeilen, die dort spaeter stehen: drei
   Stueck, absteigend breit, in der Hoehe einer Zeile. Das Bildzeichen
   steht mittig auf der Flaeche und traegt die mittlere Sprosse der
   Zeichenleiter — es ist ein Hinweis, kein Bild. */
.lp-leerz { display: flex; flex-direction: column; gap: 6px; }
.lp-leerz i { display: block; height: 8px; border-radius: var(--r-klein); background: var(--panel-2); }
.lp-leerz i:nth-child(2) { width: 88%; }
.lp-leerz i:nth-child(3) { width: 62%; }
/* Die Ueberschrift ist EINE Zeile — ein Riegel, nicht drei. */
.lp-leerz.eins i { width: 76px; }
.lp-bleer { display: grid; place-items: center; color: var(--faint); }
.lp-bleer svg { width: 18px; height: 18px; }

.lp-pf { display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  background: var(--karte-feld); border-top: 1px solid var(--border); }
.lp-pl { flex: 1; min-width: 0; }
.lp-pl em { font-size: 10px; color: var(--faint); font-style: normal; }
.lp-pl b { font-size: 12.5px; font-weight: 600; }
/* Der Knopf steht auf --panel, und der Fuss jetzt auch — er waere darin
   verschwunden. Der Hausschleier hebt ihn eine Stufe an, statt einen
   neuen Grauton zu erfinden. */
.lp-cta { background: var(--panel); border-radius: var(--r-feld); padding: 5px 11px; font-size: 11.5px; flex: none;
  background-image: linear-gradient(var(--hover), var(--hover)); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chip { padding: 4px 10px; border-radius: var(--r-feld); background: var(--raise); font-size: 11.5px; color: var(--muted); }

/* Unter 1100 Pixeln faellt die Vorschau weg — drei Spalten brauchen
   Platz, den es dort nicht gibt, und die Vorschau ist die, auf die man
   am ehesten verzichtet. */
@media (max-width: 1100px) {
  .lp-drei { grid-template-columns: 270px minmax(0, 1fr); }
  .lp-vs { display: none; }
}
@media (max-width: 780px) {
  .lp-drei { grid-template-columns: 1fr; }
  .lp-baum { border-right: 0; border-bottom: 1px solid var(--trennung); }
}

/* Die Regeln der festen Liste standen hier — sie ist am 16.09.2026
   gegangen, Marks Ansage: „mach die feste liste raus bei todo". */

/* ---- Das Projekt in zwei Spalten ------------------------------------
 *
 * Marks Wahl vom 10.09.2026, Entwurf 68 aus vierzig: Links die Angaben,
 * rechts das, womit gearbeitet wird. Vorher stand alles untereinander,
 * und bei einem Projekt mit dreissig Copys scrollt man an allem vorbei,
 * was man nicht sucht.
 *
 * Unter 900 Pixeln fallen die Spalten uebereinander — bei 290 plus 30
 * Abstand bliebe fuer die rechte Seite sonst zu wenig, und dort stehen
 * Kacheln, Kurven und Copy-Listen. */
.proj-zwei { display: grid; grid-template-columns: 300px 1fr; gap: 0 32px; align-items: start; }
/* Und die eine Spalte, wenn die Faecher aus sind — Marks Ansage vom
   10.09.2026: „mach bei projekt uebersicht und im projekt wieder altes
   design vorerst." Dann steht alles untereinander wie davor, und die
   Felder links tragen ihre Beschriftung wieder daneben statt darueber. */
.proj-eins { display: block; }
.proj-eins .proj-links { border-right: 0; padding-right: 0; }
.proj-eins .prop-row { flex-direction: row; align-items: flex-start; gap: 12px; min-height: 36px; margin-bottom: 5px; }
.proj-eins .prop-key { flex: 0 0 160px; font-size: 13px; color: var(--muted); }
.proj-eins .prop-val { padding: 6px 10px; margin: 0; min-height: 34px; }
.proj-eins .proj-unten { margin-top: 0; }
.proj-eins .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; margin: 22px 0 8px; }
.proj-links { border-right: 1px solid var(--border); padding-right: 26px; }
.proj-links .prop-row { flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; margin-bottom: 8px; }
.proj-links .prop-key { flex: none; font-size: 11px; color: var(--faint); }
.proj-links .prop-val { padding: 5px 8px; margin: 0 -8px; min-height: 30px; }
.proj-unten { grid-column: 1 / -1; margin-top: 8px; }
@media (max-width: 900px) {
  .proj-zwei { grid-template-columns: 1fr; gap: 0; }
  .proj-links { border-right: 0; padding-right: 0; padding-bottom: 18px;
    border-bottom: 1px solid var(--border); margin-bottom: 18px; }
}

/* Die Reiter sind keine Attrappe: Jeder schaltet wirklich um, und was
   nicht dransteht, wird auch nicht gezeichnet. Die Zahl daneben sagt,
   ob sich das Umschalten lohnt — ohne sie muesste man jeden einmal
   antippen, um zu sehen, wo etwas liegt. */
.proj-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.proj-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px; font-size: 13px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.proj-tab:hover { color: var(--text); }
.proj-tab.an { color: var(--text); border-bottom-color: var(--text); }
.proj-tab em {
  font-style: normal; font-size: 11px; color: var(--faint);
  background: var(--raise); border-radius: var(--r-teil); padding: 1px 7px;
}
.proj-tab.an em { color: var(--muted); background: var(--panel); }
/* Im Fach steht die erste Ueberschrift direkt unter den Reitern — der
   Abstand kommt von den Reitern selbst. */
.proj-rechts > .jhead:first-of-type, .proj-rechts .vl-kopf { margin-top: 16px; }
/* Und die Kacheln stehen im Fach zu dritt, nicht zu sechst.
 *
   Marks Meldung vom 10.09.2026: „es sieht aber nicht so aus wie bei 84
   es soll so nebeneinander sein 1zu1."

   Der Unterschied war genau hier: `auto-fit, minmax(108px, 1fr)` packt
   bei siebenhundert Pixeln Breite sechs Kacheln in eine Reihe, und
   jede wird so schmal, dass „Break-even ROAS" auf drei Zeilen umbricht.
   Im Entwurf sind es drei feste Spalten — dieselben elf Zahlen, nur
   lesbar. Ausserhalb des Fachs bleibt die alte Regel, dort gibt es
   keine zwei Spalten und die Breite ist eine andere. */
.proj-rechts .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; }
.proj-rechts .kpi-cell { padding: 13px 14px; }
.proj-rechts .kpi-cell .kv { font-size: 18px; }
.proj-rechts .kpi-cell .kk { font-size: 11px; color: var(--faint); }
@media (max-width: 1080px) { .proj-rechts .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Der Verlauf im Projekt ------------------------------------------
 *
 * Marks Wahl vom 10.09.2026 aus vierzig Entwuerfen: „mach 83 aber man
 * soll wechseln koennen zu 83 und 86." Zwei Ansichten auf dieselben
 * Tage — eine Flaeche fuer „geht es aufwaerts?", gestapelte Balken fuer
 * „wohin geht der Umsatz?".
 *
 * Beide zeichnen aus `r.entries`, denselben Zeilen, aus denen die
 * Kacheln darunter summiert werden. */
.vl-kopf { display: flex; align-items: center; gap: 10px; margin: 24px 0 10px; }
.vl-titel { font-size: 13px; font-weight: 600; color: var(--muted); }
.vl-wahl { display: flex; gap: 3px; }
.vl-w {
  padding: 4px 11px; border-radius: var(--r-feld); font-size: 11.5px;
  color: var(--muted); background: var(--raise);
}
.vl-w.an { background: var(--panel); color: var(--text); }
.vl-w:hover { color: var(--text); }

.vl-flaeche { height: 118px; }
.vl-flaeche svg { display: block; width: 100%; height: 100%; }

/* Die Balken sitzen auf einer gemeinsamen Grundlinie und wachsen nach
   oben. Ein Tag, der mehr gekostet hat als er brachte, wird nicht
   gestaucht — er ragt heraus, und genau das soll man sehen. */
.vl-balken { display: flex; align-items: flex-end; gap: 3px; height: 118px; }
.vl-col {
  flex: 1; min-width: 2px; display: flex; flex-direction: column;
  justify-content: flex-end; border-radius: 4px 4px 0 0; overflow: hidden;
}
.vl-col > span { display: block; min-height: 0; }
.vl-gewinn { background: var(--gruen, #3fa76a); }
.vl-ware   { background: #8a6a3c; }
.vl-spend  { background: var(--rot, #e5534b); }
.vl-minus  { background: repeating-linear-gradient(45deg, #e5534b, #e5534b 3px, #7d2f2a 3px, #7d2f2a 6px); }

.vl-achse {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--faint); margin-top: 5px;
}
.vl-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
  font-size: 11.5px; color: var(--muted); }
.vl-legende span { display: flex; align-items: center; gap: 6px; }
.vl-legende em { width: 9px; height: 9px; border-radius: var(--r-klein); flex: none; }
.vl-leer { margin-top: 0; }

.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px; margin: 22px 0 8px;
}
.kpi-cell { background: var(--raise); border-radius: var(--r-flaeche); padding: 11px 12px; }
.kpi-cell .kv { font-size: 16px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-cell .kv.good { }
.kpi-cell .kk { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.jhead { font-size: 13px; font-weight: 600; color: var(--muted); margin: 26px 0 10px; }

.jrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; margin: 0 -8px; border-radius: var(--r-feld);
  border-bottom: 1px solid var(--border-soft); font-size: 13.5px;
}
.jrow:hover { background: var(--hover); }
.jdate { flex: 0 0 74px; color: var(--muted); }
.jnums { display: flex; gap: 10px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.jnote { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrow .icon-btn { width: 28px; height: 28px; opacity: 0; }
.jrow:hover .icon-btn { opacity: 1; }

/* ============ Einstellungen: Vorschauen ============ */

/* Jede Einstellung als eigener Abschnitt mit feiner Trennung — sonst
   verschwimmen zwei Dutzend Kachelreihen zu einer einzigen Fläche. */
.set-block { padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.set-block:last-child { border-bottom: 0; padding-bottom: 4px; }
/* Steht direkt danach eine Gruppenüberschrift, trägt deren Linie —
   sonst liegen zwei Striche übereinander. */
.set-block:has(+ .set-group) { border-bottom: 0; }
.set-block .set-label {
  flex: none; margin-bottom: 11px; font-size: 13.5px; color: var(--text); font-weight: 500;
}
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.set-block .set-hint { margin-top: 10px; }

.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 9px 9px 8px; border-radius: var(--r-flaeche);
  border: 1px solid var(--border); background: transparent; min-width: 74px;
}
.swatch:hover { background: var(--hover); }
.swatch.on { border-color: var(--text); background: var(--raise); }

/* Marks zweite Haelfte derselben Ansage: „buttons schaltflaechen auf
   unser design anpassen auch nicht umrisse sondern schaltflaechen auser
   bei so designs da passt es ja."

   Die Ausnahme steht im Selektor: Wo ein Vorschaubild drinsteckt —
   Thema, Hintergrund, Akzent, Schrift —, zeigt der Kasten ein Design,
   und ein Rahmen um ein Design ist richtig. Wo nur ein Wort steht, war
   der Rahmen ein leerer Umriss. Diese werden Schaltflaechen: eine
   Flaeche ruhend, die naechste Stufe darueber gewaehlt.

   Die Flaeche liegt gestapelt auf `--bg`, nicht als blosse Farbe —
   sonst scheint im Glas-Thema die Seite hindurch und die Schaltflaeche
   ist ein Schleier. */
/* Wo es kein Vorschaubild gibt, bleibt der Platz davor leer statt
   zuzuklappen — sonst stuenden die Namen zweier Zeilen verschieden weit
   innen und die Markierungen rechts trotzdem auf einer Kante. */
.set-fenster .swatch:not(:has(.pv))::before { content: ''; flex: none; width: 26px; }
.sw-unter { display: block; font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.sw-name { font-size: 11.5px; color: var(--muted); }
.swatch.on .sw-name { color: var(--text); font-weight: 500; }

.pv { display: grid; place-items: center; width: 62px; height: 40px; border-radius: var(--r-feld); overflow: hidden; }

/* Mini-Fenster für Modus und Hintergrund */
.pv-win { display: flex; border: 1px solid var(--border); padding: 0; }
.pv-win i { width: 34%; height: 100%; display: block; }
.pv-win b { flex: 1; height: 100%; display: block; }
.pv-win.dark i, .pv-win.bg-pitch i { background: #000; }
.pv-win.dark b, .pv-win.bg-pitch b { background: #050505; }
.pv-win.light i, .pv-win.bg-paper i { background: #f9f9f9; }
.pv-win.light b, .pv-win.bg-paper b { background: #fff; }
.pv-win.bg-coal i { background: #0f0f0f; } .pv-win.bg-coal b { background: #161616; }
.pv-win.bg-graphite i { background: #171717; } .pv-win.bg-graphite b { background: #212121; }
.pv-win.bg-mist i { background: #f2f2f2; } .pv-win.bg-mist b { background: #fafafa; }
.pv-win.bg-stone i { background: #eaeaea; } .pv-win.bg-stone b { background: #f4f4f4; }

/* Vorschau der Verlauf-Hintergründe — pro Modus, die Werte heißen in beiden gleich */
html[data-theme="dark"] .pv-win.bg-fade i { background: #000; }
html[data-theme="dark"] .pv-win.bg-fade b { background: linear-gradient(180deg, #000, #191919); }
html[data-theme="dark"] .pv-win.bg-aura i { background: #000; }
html[data-theme="dark"] .pv-win.bg-aura b { background: radial-gradient(80% 120% at 10% 0%, #2b2b2b 0%, #070707 70%); }
html[data-theme="dark"] .pv-win.bg-depth i { background: #0d0d0d; }
html[data-theme="dark"] .pv-win.bg-depth b { background: linear-gradient(135deg, #1f1f1f, #050505 60%, #1a1a1a); }
html[data-theme="dark"] .pv-win.bg-veil i { background: #050505; }
html[data-theme="dark"] .pv-win.bg-veil b { background: radial-gradient(70% 90% at 80% 10%, #2a2a2a 0%, #0b0b0b 65%); }
html[data-theme="dark"] .pv-win.bg-vignette i { background: #000; }
html[data-theme="dark"] .pv-win.bg-vignette b { background: radial-gradient(120% 100% at 50% 50%, #232323 0%, #000 90%); }

html[data-theme="light"] .pv-win.bg-fade i { background: #fbfbfb; }
html[data-theme="light"] .pv-win.bg-fade b { background: linear-gradient(180deg, #fff, #ebebeb); }
html[data-theme="light"] .pv-win.bg-aura i { background: #fafafa; }
html[data-theme="light"] .pv-win.bg-aura b { background: radial-gradient(80% 120% at 10% 0%, #fff 0%, #e9e9e9 75%); }
html[data-theme="light"] .pv-win.bg-depth i { background: #f6f6f6; }
html[data-theme="light"] .pv-win.bg-depth b { background: linear-gradient(135deg, #fff, #ececec 60%, #fbfbfb); }
html[data-theme="light"] .pv-win.bg-veil i { background: #f7f7f7; }
html[data-theme="light"] .pv-win.bg-veil b { background: radial-gradient(70% 90% at 80% 10%, #fff 0%, #ededed 65%); }
html[data-theme="light"] .pv-win.bg-vignette i { background: #f4f4f4; }
html[data-theme="light"] .pv-win.bg-vignette b { background: radial-gradient(120% 100% at 50% 50%, #fff 0%, #e2e2e2 90%); }

/* Schrift */
.pv-font { background: var(--raise); font-size: 19px; letter-spacing: -.01em; }
.pv-font.f-sans { font-family: "Söhne", ui-sans-serif, system-ui, sans-serif; }
.pv-font.f-grotesk { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.pv-font.f-rounded { font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
.pv-font.f-serif { font-family: Charter, Georgia, serif; }
.pv-font.f-mono { font-family: ui-monospace, Menlo, monospace; }

.pv-size { background: var(--raise); }
.pv-shape { background: var(--raise); width: 40px; height: 40px; border: 1px solid var(--border-soft); }
.pv-icon { background: var(--raise); color: var(--muted); }
.pv-logo { background: var(--raise); }

/* Dichte */
.pv-rows { background: var(--raise); flex-direction: column; display: flex; justify-content: center; padding: 0 12px; }
.pv-rows i { display: block; height: 3px; background: var(--muted); border-radius: var(--r-klein); width: 100%; }
.pv-rows.d-compact i { margin: 2px 0; }
.pv-rows.d-md i { margin: 4px 0; }
.pv-rows.d-airy i { margin: 6px 0; }

/* Konsole — das Zeichen, das unten rechts steht, wenn sie an ist. */
.pv-kon {
  background: var(--raise); display: grid; place-items: center; height: 40px;
  color: var(--text);
}
.pv-kon svg { width: 18px; height: 18px; }
.pv-kon.aus { color: var(--faint); }
.pv-kon.aus svg { opacity: .45; }

/* Bewegung */
/* Säulen wachsen aus der Mitte nach oben, stehen aber mittig in der
   Kachel — vorher klebten sie am unteren Rand. */
.pv-motion {
  background: var(--raise); display: flex; align-items: center; justify-content: center;
  gap: 4px; height: 40px;
}
.pv-motion i { align-self: center; }
.pv-motion i { width: 5px; height: 8px; background: var(--muted); border-radius: var(--r-klein); }
.pv-motion.on i, .pv-motion.sp-slow i, .pv-motion.sp-normal i, .pv-motion.sp-fast i {
  animation: pvBounce 1.1s ease-in-out infinite;
}
.pv-motion.on i:nth-child(2) { animation-delay: .12s }
.pv-motion.on i:nth-child(3) { animation-delay: .24s }
.pv-motion.sp-slow i { animation-duration: 1.7s }
.pv-motion.sp-fast i { animation-duration: .55s }
.pv-motion.off i { height: 8px; opacity: .45; animation: none; }
@keyframes pvBounce { 0%, 100% { height: 8px } 50% { height: 20px } }

html[data-anim="off"] .pv-motion i { animation: none !important; }

/* Hier stand die Regel fuer die graue Endung des Namens. Sie ist am
   16.09.2026 mit Entwurf 067 gegangen — „nimm 067 ohne io". */

/* Import-Dialog */
.drop {
  border: 1px solid var(--border); border-radius: var(--r-gross);
  padding: 26px 18px; text-align: center; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.drop:hover, .drop.over { background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text); }
.dropico { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 10px;
  border-radius: var(--r-teil); background: var(--raise); color: var(--muted); }
.drop.over .dropico, .drop:hover .dropico { color: var(--text); }
.dropt { font-size: 14.5px; font-weight: 500; }
.drops { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* Farbakzent: nur der Punkt leuchtet */
.pv-dots { background: var(--raise); display: flex; gap: 6px; align-items: center; justify-content: center; }
.pv-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }

html[data-color="on"] .tile.mailtile.unread::after {
  background: #4a90d9;
  box-shadow: 0 0 7px rgba(74, 144, 217, .75), 0 0 2px #4a90d9;
  border-color: var(--bg);
}
html[data-color="on"] .list-row:hover .tile.mailtile.unread::after { border-color: var(--raise); }

/* ============ Märkte ============ */

.prop-val.mkt-val { flex-wrap: wrap; gap: 5px; padding: 5px 8px; }
.prop-val.mkt-val .mkt-input { flex: 1; min-width: 120px; }

.chip.mkt { height: 27px; font-size: 12.5px; letter-spacing: .02em; padding: 0 10px; }
.chip.mkt.used:hover { background: var(--hover); }
.chip.mkt .mkt-x { color: var(--faint); font-size: 14px; line-height: 1; margin-left: 1px; }
.chip.mkt:hover .mkt-x { color: var(--text); }

.mkt-input {
  background: transparent; border: 1px solid var(--border); outline: 0;
  border-radius: var(--r-teil); height: 27px; padding: 0 12px; min-width: 150px;
  font-size: 12.5px; color: var(--text);
}
.mkt-input::placeholder { color: var(--faint); }

.mkt-cell { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.chip.mini-mkt {
  display: inline-block; height: 21px; line-height: 21px; padding: 0 9px;
  font-size: 11.5px; max-width: 96px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto;
}
.mkt-more { font-size: 11.5px; color: var(--faint); flex: 0 0 auto; }

/* ============ Timer-Designs ============ */

.face-arc { display: flex; flex-direction: column; align-items: center; }
.face-arc svg { display: block; }
.face-arc .arc-text {
  margin-top: -96px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; text-align: center;
}
.face-arc .time { font-size: 52px; }

.face-bar, .face-min {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(560px, 100%); padding-top: 10px;
}
.face-bar .time, .face-min .time { font-size: 76px; }
.face-min .time { font-weight: 200; letter-spacing: -.045em; }
.face-bar .mode, .face-min .mode { order: -1; }
.face-bar .task, .face-min .task { margin-bottom: 6px; }

.tbar {
  width: 100%; height: 12px; border-radius: var(--r-teil);
  background: var(--panel); overflow: hidden; margin-top: 10px;
}
.tbar span { display: block; height: 100%; width: 0; border-radius: var(--r-teil); transition: width .3s linear; }

.tline { width: 100%; height: 2px; background: var(--panel); margin-top: 18px; }
.tline span { display: block; height: 100%; width: 0; transition: width .3s linear; }

/* Vorschau in den Einstellungen */
.pv-timer { background: var(--raise); color: var(--text); }
.pvbar { display: block; width: 38px; height: 8px; border-radius: var(--r-teil); background: var(--panel-2); overflow: hidden; }
.pvbar i { display: block; height: 100%; width: 55%; background: currentColor; border-radius: var(--r-teil); }
.pvmin { font-size: 13px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ============ Copys und Creatives ============ */

/* Der Rahmen gehört jetzt der Zeile, nicht dem Textfeld — so sitzt die
   Tag-Pille mit im Kasten statt daneben. */
.copy-form {
  position: relative; margin-bottom: 12px;
  display: flex; align-items: flex-start; gap: 7px;
  background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-flaeche);
  padding: 7px 42px 7px 8px;        /* rechts Platz für das Plus */
}
/* Kein hellerer Rahmen beim Hineinklicken.
 *
   Marks Ansage vom 10.09.2026: „mach das weg das wenn man irgendwo aufs
   textfeld drueckt das ein umriss kommt, bei den tags auch."

   Der Rahmen war nie ein Zustand, den man lesen muss: Wer in ein Feld
   klickt, sieht den Schreibstrich darin und weiss, dass er darin ist.
   Ein zweites Zeichen dafuer macht aus einer ruhigen Liste ein
   Formular. */
/* Die Pille darf die Zeile nicht dominieren: sie ist so breit wie ihr
   Name, nicht so breit wie das halbe Feld. */
.copy-form .ctagwrap { margin-top: 1px; flex: none; max-width: 190px; }
.copy-input {
  display: block; flex: 1 1 140px; min-width: 100px; min-height: 30px; max-height: 240px;
  resize: none; overflow-y: auto;   /* kein Anfasser, der über die runde Ecke ragt */
  background: none; border: 0; border-radius: 0; padding: 5px 0;
  outline: 0; font-size: 14px; line-height: 1.55;
  /* Das Feld waechst mit dem Text und deckelt erst spaet — die Leiste
     erscheint also erst, wenn wirklich etwas zu schieben ist. Marks
     Auftrag vom 10.09.2026 nimmt sie zurueck an die Stelle, an der sie
     am 09.09.2026 verschwunden war. */
}
.copy-form .btn-white {
  position: absolute; right: 8px; bottom: 8px;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  justify-content: center;
}

/* Kein negativer Rand: sonst steht die Karte zehn Punkte breiter als die
   Eingabe darüber, und beim Hovern springt der Hintergrund über den Rand. */
.copy-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-flaeche);
  border-bottom: 1px solid var(--border-soft);
}
.copy-item:hover { background: var(--hover); }
.copy-item:last-child { border-bottom: 0; }
/* Eine lange Copy wird abgeschnitten, nicht in einen zweiten Rollbereich
   gesteckt: eine Liste, in der jede Zeile fuer sich rollt, faengt jeden
   Wisch an der falschen Stelle ab. Ganz sehen kann man sie ueber „Mehr
   anzeigen". */
/* Drei Zeilen, dann ist Schluss. Sechs waren zu viel: eine Copy von
   dreissig Zeilen fuellte damit das halbe Panel, und wer die naechste
   sehen wollte, scrollte an ihr vorbei. Die Hoehe steht in em und nicht
   in Pixeln — so bleiben es drei Zeilen, auch wenn die Schrift einmal
   groesser wird (3 × 1.6). */
.copy-text {
  min-width: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  max-height: 4.8em; overflow: hidden;
}
.copy-item.offen .copy-text { max-height: none; overflow: visible; }
.copy-mehr {
  display: none; margin-top: 6px; background: none; border: 0; padding: 0;
  font: inherit; font-size: 12px; color: var(--faint); cursor: pointer;
}
.copy-item.hat-mehr .copy-mehr { display: inline-block; }
.copy-mehr:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* Derselbe zurueckgenommene Textknopf wie in einer einzelnen Copy, nur
   dass er die Liste meint. Eine Liste, die bei vier aufhoert, braucht
   keinen Rahmen und keine Flaeche — nur einen Satz, der sagt, wie viele
   noch kommen. Die Linie darueber gehoert zur Liste und schliesst sie ab. */
.liste-mehr {
  display: block; width: 100%; margin-top: 2px; padding: 10px 0 2px;
  background: none; border: 0; border-top: 1px solid var(--border-soft);
  font: inherit; font-size: 12.5px; color: var(--faint);
  text-align: left; cursor: pointer;
}
.liste-mehr:hover { color: var(--text); }

.copy-tools { display: flex; gap: 2px; opacity: 0; }
.copy-item:hover .copy-tools { opacity: 1; }
.copy-tools .icon-btn { width: 30px; height: 30px; }

.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.img-thumb { position: relative; aspect-ratio: 1; border-radius: var(--r-flaeche); overflow: hidden; border: 1px solid var(--border); }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.img-del {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
  border-radius: var(--r-feld); display: grid; place-items: center;
  background: rgba(0, 0, 0, .62); color: #fff; opacity: 0;
}
.img-thumb:hover .img-del { opacity: 1; }
.img-del:hover { background: rgba(0, 0, 0, .85); }

/* Dieselbe Kachel wie im Launchpad — Marks Ansage vom 17.09.2026: „im
   projekt wo man bild hochladen kann diese schaltflaeche soll genauso
   aussehen wie im launchpad in der bildvorschau die schaltflaeche zum
   bild hochladen."

   Es ist derselbe Handgriff an zwei Orten: ein Bild ins Projekt legen.
   Er sah verschieden aus — hier zwoelf Pixel Rundung, kein Grund und
   eine Zeile Text darunter, drueben acht, `--raise` und nur der Pfeil.

   Die Werte stehen deshalb NICHT zweimal da: `.img-add` haengt sich an
   die Regel von `.lpd-hochfeld` an. Wer drueben etwas aendert, aendert
   es hier mit — und genau darum ging es. */
.lpd-hochfeld, .img-add, .pi-bildneu {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  border: 1px solid var(--border); border-radius: var(--r-feld); color: var(--faint);
  background: var(--raise);
}
.lpd-hoch:hover .lpd-hochfeld, .img-add:hover, .pi-bildneu:hover {
  background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text);
}

.lightbox {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: min(90vw, 900px); max-height: 86vh;
  display: flex; flex-direction: column; gap: 10px;
}
.lightbox img {
  max-width: 100%; max-height: 74vh; object-fit: contain;
  border-radius: var(--r-gross); border: 1px solid var(--border); background: var(--sidebar);
}
.lb-bar { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; }

/* Zahnrad und Moduswechsel unten links in Textfarbe statt Grau */
.side-user .icon-btn { color: var(--text); }
.side-user .icon-btn:hover { background: var(--hover); }

/* Offener Fokus ohne Zielzeit */
.face-open {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 0 10px; position: relative;
}
.face-open .time { font-size: 86px; font-weight: 200; letter-spacing: -.045em; }
.face-open .mode { order: -1; }
/* Der pulsierende Punkt ist weg: dass die Uhr laeuft, steht in der Zeile
   darueber und in der Zahl selbst; ein blinkender Fleck darunter sagte
   nichts dazu und zog nur den Blick. */
.big-btn + .btn[disabled] { opacity: .4; pointer-events: none; }

/* hidden muss auch bei display-Klassen greifen */
[hidden] { display: none !important; }

/* ============ Menü-Ebene über Panels ============ */
#menulayer { position: fixed; inset: 0; pointer-events: none; z-index: 75; }
#menulayer.on { pointer-events: auto; }

/* ============ Plus im Feld statt weißem Knopf ============ */
.field-add { position: relative; }
.field-add > input {
  width: 100%; background: var(--feld-grund); border: 1px solid var(--border);
  border-radius: var(--r-teil); height: 38px; padding: 0 44px 0 14px; outline: 0; font-size: 14px;
}
.field-add.wide > input { height: 44px; font-size: 15px; }

.add-inline {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted); background: transparent;
}
.add-inline:hover { background: var(--hover); color: var(--text); }
/* Plus auf Höhe der ersten Zeile, damit das Feld schmal bleibt */
.copy-form .add-inline { top: 5px; bottom: auto; transform: none; right: 7px; }

.jform {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 7px; margin-bottom: 14px; width: 100%;
}
.jform-row { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.jform-row input {
  background: var(--feld-grund); border: 1px solid var(--border); border-radius: var(--r-teil);
  height: 34px; padding: 0 12px; outline: 0; font-size: 13.5px;
  flex: 1 1 84px; min-width: 0; width: auto;
}
.jform-row .datefield.mini { flex: 0 0 auto; }
.jform .field-add { width: 100%; }
/* Notiz zum Tag mit normalen Ecken, nicht als Pille */
.jform .field-add > input { height: 34px; font-size: 13.5px; border-radius: var(--r-teil); }
.jform .add-inline { width: 26px; height: 26px; }

/* ============ Häkchen-Form ============ */
html[data-check="round"] .checkbox { border-radius: 50%; }
html[data-check="square"] .checkbox { border-radius: var(--r-klein); }
.pv-check { background: var(--raise); }
.pv-check .checkbox { width: 20px; height: 20px; }
.pv-check .c-round { border-radius: 50%; }
.pv-check .c-square { border-radius: var(--r-klein); }
.pv-check .c-soft { border-radius: var(--r-klein); }

/* Der Stil fuer „Aufraeumen" in der Gruppenzeile ist am 17.09.2026
   gegangen — der Griff steht jetzt als Papierkorb oben bei den anderen,
   und `.cleanup` wird nirgends mehr vergeben. */

/* ============ Manifest ============ */

#beliefList { margin-top: 18px; }   /* etwas Luft unter dem Eingabefeld */

.belief {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; margin: 0 -12px; border-radius: var(--r-flaeche);
  border-bottom: 1px solid var(--border-soft);
}
.belief:hover { background: var(--hover); }
.belief { align-items: flex-start; }
.belief .bq { font-size: 22px; color: var(--faint); line-height: 1; padding-top: 6px; }
.belief .icon-btn { margin-top: 2px; }
.belief textarea {
  flex: 1; background: none; border: 0; outline: 0;
  font: inherit; font-size: 15.5px; line-height: 1.5;
  padding: 5px 6px; border-radius: var(--r-feld); min-width: 0;
  resize: none; overflow: hidden; display: block;
}
.belief textarea:focus { background: var(--panel); }
.belief .icon-btn { opacity: 0; }
.belief:hover .icon-btn { opacity: 1; }

.mf-entry {
  padding: 14px 12px; margin: 0 -12px; border-radius: var(--r-flaeche);
  border-bottom: 1px solid var(--border-soft);
}
.mf-entry:hover { background: var(--hover); }
.mf-meta { display: flex; align-items: center; font-size: 12.5px; color: var(--faint); margin-bottom: 6px; }
.mf-meta .icon-btn { margin-left: auto; width: 26px; height: 26px; opacity: 0; }
.mf-entry:hover .mf-meta .icon-btn { opacity: 1; }
.mf-text { font-size: 15px; line-height: 1.65; white-space: pre-wrap; }

.img-grid.board { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Intervall-Felder sauber im Raster */
.int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; }
.int {
  display: flex; flex-direction: column; gap: 7px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-flaeche); padding: 11px 13px;
}
.int-label { font-size: 12px; color: var(--muted); }
.int-field { display: flex; align-items: baseline; gap: 7px; }
.int-field input {
  width: 56px; background: transparent; border: 0; outline: 0;
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  padding: 0; color: var(--text); font-variant-numeric: tabular-nums;
}
.int-field em { font-style: normal; font-size: 12.5px; color: var(--faint); }
.int-field input::-webkit-outer-spin-button,
.int-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Visionen auf der Übersicht */
.visions { margin-top: 12px; }
.vision-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vision {
  aspect-ratio: 4 / 5; border-radius: var(--r-flaeche); overflow: hidden; padding: 0;
  border: 1px solid var(--border); background: var(--raise);
}
.vision img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.vision:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .vision-row { grid-template-columns: repeat(2, 1fr); } }


/* Konto in der Profilzeile */
.user-main { flex: 1; min-width: 0; text-align: left; }
.user-main .uname, .user-main .usub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.avatar { border: 0; }

.sqlbox {
  background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-flaeche);
  padding: 12px 14px; margin: 12px 0 0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.6; color: var(--muted); white-space: pre;
}

/* Anmeldung in der Seitenleiste */
.signin-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--r-flaeche); margin-bottom: 4px;
  border: 1px solid var(--border); text-align: left;
}
.signin-row:hover { background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text); }
.signin-row .ico { display: grid; place-items: center; color: var(--text); }
.signin-text { min-width: 0; }
.st-main { display: block; font-size: 13.5px; font-weight: 500; }
.st-sub { display: block; font-size: 11.5px; color: var(--faint); }

.linkbtn { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 12.5px; padding: 0; }
.linkbtn:hover { color: var(--text); }
/* Jede Fehlermeldung im Haus sieht gleich aus. Die duenne Linie links las
   sich wie ein Systemfehler und ging neben dem Formular unter; hier ist es
   derselbe rote Kasten wie ueberall. Er steht oben bei „Hinweise /
   Fehler"; hier bleibt nur, was den Anmeldebogen davon unterscheidet. */
.auth-error { margin-top: 10px; }

/* ============================================================
   Mobil — Seitenleiste, Listen, Bedienung mit dem Finger
   ============================================================ */

#app { height: 100vh; height: 100dvh; }

.side-scrim { display: none; }
.list-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.list-scroll .list-head, .list-scroll .list-row { min-width: 660px; }

/* Ohne Maus gibt es kein Überfahren — Werkzeuge dauerhaft zeigen */
@media (hover: none) {
  .rowtools, .todo .del, .copy-tools, .belief .icon-btn, .mf-meta .icon-btn,
  .jrow .icon-btn, .img-del, .nav-item .more, .rec-item .more { opacity: 1; }
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed; z-index: 60; height: 100%; width: min(84vw, 300px);
    flex-basis: min(84vw, 300px); box-shadow: var(--shadow);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .side-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, .5);
    animation: scrimIn .18s ease both;
  }
  .sidebar.schmal + .side-scrim, .sidebar.schmal ~ .side-scrim { display: none; }
  /* Auf dem Handy schwebt die Leiste ueber dem Inhalt statt daneben —
     dort gibt es nichts auszusparen, und ein Fenster, das 268 Pixel
     Rand traegt, waere auf 375 Pixel Breite kaum noch eines. */
  :root { --seiten-breite: 0px; }

  .float-toggle { top: max(12px, env(safe-area-inset-top)); }

  /* Platz für den schwebenden Seitenleisten-Knopf */
  .page { padding: 62px 16px 90px; }
  .page-head { gap: 12px; margin-bottom: 22px; }
  .page-title { font-size: 26px; min-width: 0; }
  .head-actions { width: 100%; gap: 8px; }
  .search { min-width: 0; flex: 1; height: 42px; padding: 0 14px; }
  .search input { font-size: 16px; }        /* verhindert das Zoomen in iOS */
  .btn-white { height: 42px; padding: 0 16px; font-size: 14px; }

  .tabs-row {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -16px 18px; padding: 0 16px 2px; scrollbar-width: none;
  }
  .tabs-row::-webkit-scrollbar { display: none; }
  .tabs-row .spacer { min-width: 8px; }
  .tab { height: 36px; padding: 0 14px; font-size: 14px; }

  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric { padding: 13px 14px; }
  .metric .mv { font-size: 21px; }
  .cards { grid-template-columns: minmax(0, 1fr); }

  .hero-title { font-size: 27px; }
  .hero-sub { font-size: 14px; }
  .quick { gap: 7px; margin-bottom: 20px; }
  .quick .btn { height: 36px; padding: 0 13px; font-size: 13.5px; }

  .composer { flex-wrap: wrap; border-radius: var(--r-flaeche); padding: 10px 10px 10px 16px; gap: 8px; }
  .composer input.title { flex: 1 1 100%; font-size: 16px; order: -1; padding: 4px 0; }
  .composer .mini, .composer .datefield.mini { height: 32px; font-size: 13px; }
  .send { margin-left: auto; }

  .todo {
    grid-template-columns: 20px minmax(0, 1fr) 30px 0 auto 56px;
    gap: 8px; padding: 6px 8px; min-height: 46px;
  }
  .todo .t { font-size: 15px; }
  .todo .prio { padding: 2px 2px; }
  .todo .prio .plabel { display: none; }
  .todo .tdate .datefield { padding: 0 2px; gap: 3px; font-size: 11.5px; }
  .todo .tdate .dfico { display: none; }
  .todo .del { width: 30px; height: 30px; }

  .panel { width: 100vw; border-left: 0; }
  .panel-body { padding: 20px 18px calc(60px + env(safe-area-inset-bottom)); }
  .panel-body h2 { font-size: 23px; }
  .prop-row { flex-direction: column; gap: 2px; margin-bottom: 10px; }
  .prop-key { flex: none; padding: 0 4px; }
  .prop-val { width: 100%; }

  .modal { width: calc(100vw - 24px); padding: 20px 18px; border-radius: var(--r-gross); }
  .modal .set-list { max-height: 58vh; }
  .swatch { min-width: 66px; padding: 8px 7px; }
  .pv { width: 54px; height: 36px; }

  .ring, .ring svg { width: 240px; height: 240px; }
  .ring .time { font-size: 50px; }
  .face-arc svg { width: 260px; height: 145px; }
  .face-arc .arc-text { margin-top: -76px; }
  .face-open .time, .face-bar .time, .face-min .time { font-size: 58px; }

  .big-btn { height: 46px; min-width: 140px; font-size: 15px; }

  .bcol { flex: 0 0 240px; width: 240px; }
  .img-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .img-grid.board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vision-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .jform-row { gap: 5px; }
  .jform-row input { width: calc(50% - 3px); }
  .jform-row .datefield.mini { width: 100%; }
  .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .monthnav { height: 42px; }
  .monthnav .mlabel { min-width: 96px; font-size: 13.5px; }

  input, textarea, select { font-size: 16px; }   /* kein Auto-Zoom beim Tippen */
  .list-row input, .fin-row input[type="text"], .belief input { font-size: 15px; }
}

@media (max-width: 420px) {
  .page { padding: 58px 12px 90px; }
  .page-title { font-size: 23px; }
  .metrics { gap: 7px; }
  .metric .mv { font-size: 19px; }
  .metric .mk { font-size: 12px; }
  .cal { width: 232px; }
  .cal-day { height: 30px; font-size: 12.5px; }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ring, .ring svg { width: 210px; height: 210px; }
  .ring .time { font-size: 44px; }
}

/* Karteninhalte dürfen den Rahmen nicht sprengen */
.cards > * { min-width: 0; }
.ov-row { min-width: 0; }

.ov-head { gap: 8px; flex-wrap: wrap; }
/* Kein Abschneiden mehr: das Blatt beim Ueberfahren steht ueber der Saeule
   und wuerde sonst am Rand des Diagramms enden. Statt zu rollen, ruecken
   die Saeulen auf schmalen Fenstern zusammen. */
.chart.mini { overflow: visible; }
.chart.mini .bar-col { flex: 1 1 0; min-width: 0; }

/* Auf schmalen Fenstern darf langer Text umbrechen statt abgeschnitten zu werden */
@media (max-width: 900px) {
  .todo { align-items: flex-start; }
  .todo .checkbox, .todo .prio, .todo .tdate, .todo .del { margin-top: 6px; }
  .todo .t { white-space: pre-wrap; word-break: break-word; }

  .ov-row { align-items: flex-start; }
  .ov-row .ov-t {
    white-space: normal; overflow: hidden; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .ov-row .ov-meta, .ov-row .prio { margin-top: 2px; }

  .mail-row .subj, .mail-row .prev, .mail-row .from {
    white-space: normal; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .run-row .rn, .run-row .rs { white-space: normal; word-break: break-word; }
  .catname { white-space: normal; }
}

/* Marks Meldung vom 23.09.2026: „dieses ‚1 Ziel' oben rechts ist zu hell
   und gross kommt mir so vor, es soll so aussehen wie bei anderen
   sections."

   Gemessen am 23.09.2026 im laufenden Fenster: Die Zahl stand auf 14
   Pixeln und #9a9a9a, waehrend alles um sie herum leiser war — der
   Tagfilter direkt darunter auf 12,5 und #6b6b6b, die Beschriftung in
   der Zielkarte rechts daneben auf 11 und ebenfalls #6b6b6b. Eine
   Aufschrift, die nur zaehlt, wie viel dasteht, war damit lauter als
   das, was dasteht.

   Sie sitzt jetzt auf derselben Stufe wie der Filter, mit dem sie sich
   die Zeile teilt. Die Klasse traegt fuenf Stellen im Haus — Ziele,
   Posten im Finanzplaner, Fragen im Chat und zwei weitere; sie werden
   alle leiser, und das ist der Sinn: ein Bauteil, eine Lautstaerke. */
.row-count { color: var(--faint); font-size: 12.5px; white-space: nowrap; }

/* Zähler brauchen auf dem Handy keinen Platz */
@media (max-width: 900px) {
  .row-count { display: none; }
}

/* Ergebnis-Kachel in der Run-Liste */
/* Ohne Farbe sind alle drei gleich hell — unterschieden wird über das
   Zeichen, nicht über Helligkeit oder gestrichelte Ränder. */
.tile.trend, .tile.trend.up, .tile.trend.down, .tile.trend.flat {
  color: var(--text); border-style: solid;
}
.tile.trend.up { background: var(--panel); }

html[data-color="on"] .tile.trend.up { color: #3fa76a; box-shadow: 0 0 10px rgba(63, 167, 106, .25); }
html[data-color="on"] .tile.trend.down { color: #e5484d; box-shadow: 0 0 10px rgba(229, 72, 77, .2); }

/* ============ KI-Übersetzung ============ */

.modal.translator { width: min(860px, calc(100vw - 32px)); }

.tr-controls {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-bottom: 14px;
}
@media (max-width: 820px) { .tr-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .tr-controls { grid-template-columns: minmax(0, 1fr); } }
.tr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-field span { font-size: 12px; color: var(--muted); }
.tr-field select {
  background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-teil);
  padding: 9px 11px; outline: 0; font-size: 13.5px; color: var(--text); width: 100%;
}

.tr-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-pane { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tr-label {
  font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: .05em;
}
.tr-text, .tr-out {
  min-height: 210px; max-height: 42vh; overflow-y: auto;
  background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-flaeche);
  padding: 12px 14px; font-size: 14px; line-height: 1.65; white-space: pre-wrap;
  word-break: break-word;
}
.tr-text { resize: none; outline: 0; font-family: inherit; color: var(--text); }
.tr-out.empty { color: var(--faint); }

.tr-dots { display: inline-flex; gap: 3px; align-items: flex-end; height: 9px; }
.tr-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: trDot 1s ease-in-out infinite; }
.tr-dots i:nth-child(2) { animation-delay: .15s }
.tr-dots i:nth-child(3) { animation-delay: .3s }
@keyframes trDot { 0%, 100% { opacity: .25; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }

/* Die Punkte in einem Knopf sitzen auf der Schriftlinie und tragen
   dessen Farbe — sonst stehen sie unten am Rand und bleiben grau, wo der
   Knopf schon weiss ist. */
.btn .tr-dots { height: auto; align-items: center; margin-right: 2px; }
.btn .tr-dots i { background: currentColor; }

.jhead .btn.sm { margin-left: 10px; height: 26px; font-size: 12.5px; }

@media (max-width: 760px) {
  .tr-panes { grid-template-columns: minmax(0, 1fr); }
  .tr-text, .tr-out { min-height: 150px; }
}

/* ============ Reiterwechsel ============ */
/* Beim Wechsel eines Reiters blendet nur der Inhalt darunter ein —
   Titel und Reiterleiste bleiben ruhig stehen. */

/* Und beim Reiterwechsel dasselbe, nur ohne Kopf und Reiterleiste: Die
   stehen still, darunter blendet der Inhalt in einem Stueck ein. */
/* Beim Reiterwechsel dasselbe, nur bleiben Kopf und Reiterleiste
   stehen — sie sind der Bezugspunkt, von dem aus gewechselt wird. */
.page.anim-sub > *:not(.page-head):not(.tabs-row) {
  animation: pageIn .26s ease both;
}
html[data-anim="off"] .page.anim-sub > * { animation: none !important; }

/* Vorschau für Verlauffarbe und Farbstärke */
.pv-tint { border: 1px solid var(--border); }
.pv-tint.ts-soft   { background: linear-gradient(140deg, color-mix(in srgb, var(--tint) 14%, var(--gA-base, #191919)) 0%, var(--bg) 82%); }
.pv-tint.ts-mid    { background: linear-gradient(140deg, color-mix(in srgb, var(--tint) 26%, var(--gA-base, #191919)) 0%, var(--bg) 82%); }
.pv-tint.ts-strong { background: linear-gradient(140deg, color-mix(in srgb, var(--tint) 46%, var(--gA-base, #191919)) 0%, var(--bg) 82%); }

/* ============ Diagramme ============ */

.chart-box {
  border: 1px solid var(--border); border-radius: var(--r-lg, 16px);
  background: var(--sidebar); padding: 16px 18px 12px; margin-top: 18px;
}
.chart-box.leer { color: var(--faint); font-size: 13.5px; padding: 22px 18px; }

.ch-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ch-head .spacer { flex: 1; }
.ch-note { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.ch-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.ch-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.ch-key i { width: 14px; height: 3px; border-radius: var(--r-klein); display: block; }

.ch-svg { display: block; width: 100%; height: 190px; overflow: visible; }
.ch-grid { stroke: var(--border-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: var(--text); opacity: .07; stroke: none; }
.ch-bar { }

.ch-axis {
  display: flex; justify-content: space-between; gap: 6px;
  margin-top: 8px; font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.ch-axis span { white-space: nowrap; }
.ch-axis.grid { display: grid; }
.ch-axis.grid span { text-align: center; }

/* etwas Luft zwischen Diagramm und Tabelle */
.chart-box + .list-scroll { margin-top: 18px; }

.tab.chat-tab { display: inline-flex; align-items: center; gap: 7px; }
.tab.chat-tab svg { opacity: .85; }

@media (max-width: 760px) {
  .ch-svg { height: 150px; }
  .ch-axis span:nth-child(even) { display: none; }
  .tab.chat-tab span { display: none; }
}

/* ============ Sprachsteuerung ============ */

#voice { position: fixed; inset: auto 0 0 0; z-index: 60; pointer-events: none; }

.vbar {
  position: absolute; right: 22px; bottom: 22px;
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
}

.vbtn {
  position: relative; width: 46px; height: 46px; flex: none;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.vbtn:hover { background: var(--hover); transform: translateY(-1px); }
.vbtn.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.vpulse {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: .55;
  animation: vpulse 1.5s ease-out infinite;
}
@keyframes vpulse {
  from { transform: scale(.9); opacity: .6 }
  to   { transform: scale(1.35); opacity: 0 }
}

.vtext {
  max-width: min(440px, calc(100vw - 110px));
  display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-teil); padding: 10px 16px;
  font-size: 13.5px; line-height: 1.35; color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: riseIn .22s ease both;
}
.vtext .vhint { color: var(--faint); }
.vtext .vok { color: var(--text); }
.vtext .verr { color: var(--muted); }

html[data-anim="off"] .vtext { animation: none; }
html[data-anim="off"] .vpulse { animation: none; opacity: .4; }

@media (max-width: 760px) {
  .vbar { right: 14px; bottom: 84px; }
  .vbtn { width: 42px; height: 42px; }
  .vtext { max-width: calc(100vw - 92px); font-size: 13px; padding: 9px 13px; }
}

/* Bereiche an- und abschalten */
/* Überschrift eines Abschnitts mit Erklärung darunter — mit Luft dazwischen,
   damit die zweite Zeile nicht an der ersten klebt. */
.block-kopf {
  display: flex; flex-direction: column; gap: 5px;
  margin: 22px 0 12px;
}
.bk-titel { font-size: 14px; color: var(--text); }
.bk-hint { font-size: 12.5px; line-height: 1.55; color: var(--faint); }

/* Seiten eines Projekts fürs Hochladen auswählen und zuteilen. */
.shop-seiten {
  display: flex; flex-direction: column;
  max-height: 260px; overflow-y: auto;
  /* Luft zu den Knöpfen darunter — sonst klebt „Hochladen" an der letzten Zeile. */
  margin-bottom: 8px; padding-bottom: 4px;
}
#shopBox .modal-actions { margin-top: 26px; }
.shop-seite {
  display: flex; align-items: center; gap: 11px; padding: 9px 2px;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  cursor: pointer;
}
.shop-seiten .shop-seite:first-child { border-top: 0; }
.shop-seite input { flex: none; accent-color: var(--text); width: 15px; height: 15px; }

/* Ein Standbild der Seite — nur zum Wiedererkennen, nicht zum Bedienen. */
.ss-vor {
  flex: none; width: 58px; height: 44px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-feld); background: #fff;
  display: grid; place-items: center; color: #888;
}
.ss-vor iframe {
  width: 1280px; height: 970px; border: 0; pointer-events: none;
  transform: scale(.045); transform-origin: 0 0;
}
.ss-vor svg { width: 18px; height: 18px; }
.shop-seite:not(.an) .ss-vor { opacity: .5; }
.shop-seite:not(.an) .ss-text { opacity: .5; }
.ss-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-datei {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-seite .opt-sel { flex: none; width: 152px; height: 30px; font-size: 12px; }

/* Zugänge: Zeichen und Name links, Knopf rechts. */
/* Zwei Gruppen statt einer Liste — Entwurf 01, Marks Wahl vom
   17.09.2026: „01 fuer verbindungen." Die Ueberschrift sagt den Zustand,
   die Zahl daneben, wie viele es sind; der Knopf in der Zeile muss ihn
   dann nicht mehr allein tragen. */
.kon-gruppe {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); margin: 4px 0 2px;
}
.kon-gruppe + .kon-liste + .kon-gruppe { margin-top: 14px; }
.kon-zahl { font-weight: 400; letter-spacing: 0; }
/* Auch hier die Zeile aus dem Entwurf statt der alten: In Entwurf 01
   steht jeder Zugang auf einer eigenen Flaeche mit sechs Pixeln Luft
   dazwischen — keine Trennlinien, keine Zeilen, die aneinanderkleben.
   Die Marke misst achtundzwanzig statt vierunddreissig, der Name
   zwoelfeinhalb statt dreizehneinhalb. */
.kon-liste { display: flex; flex-direction: column; gap: 6px; }
.kon-zeile-set {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-feld); background: var(--panel);
}
.kz-marke {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-feld);
  display: grid; place-items: center; color: var(--faint);
  background: var(--panel-2);
}
.kon-zeile-set.an .kz-marke { color: var(--text); }
.kz-marke svg { width: 15px; height: 15px; }
.kz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kz-name { font-size: 12.5px; }
.kz-wo {
  font-size: 10.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Zustand steht auf dem Knopf — die Zeile darunter nennt weiterhin
   die Quelle, damit man weiß, wo der Schlüssel herkommt. Verbunden trägt
   keinen hellen Rand, sondern eine Spur Farbe. */
.kon-zeile-set.an .btn {
  border-color: transparent;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted);
}
.kon-zeile-set.an .btn:hover { color: var(--text); background: var(--hover); }
/* Alle Marken sitzen auf derselben Kachel — sonst springen die Zeilen. */
/* Überschrift mit Markenzeichen davor */
/* Schlüsselfeld mit Augenknopf — verborgen, aber nachlesbar. */
.schluesselfeld { position: relative; display: block; }
.schluesselfeld input { width: 100%; padding-right: 40px; }
.schluesselfeld .icon-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--faint);
}
.schluesselfeld .icon-btn:hover, .schluesselfeld .icon-btn.an { color: var(--text); }

/* Unterordnung in den Einstellungen */
.sek-zeile.tief { padding-left: 26px; }
.sek-zeile.tief .sek-name { font-size: 13px; color: var(--muted); }
.sek-zeile.ordner .sek-name { font-weight: 600; }
.sek-zeile.ordner .sek-ico { color: var(--text); }
.sek-fuss { display: flex; justify-content: flex-start; margin-top: 12px; }
.btn.sm.mit-ico svg { width: 15px; height: 15px; }
.nav-pfeil { margin-left: auto; display: inline-flex; opacity: .5; transition: transform .16s ease; }
.nav-pfeil svg { width: 12px; height: 12px; }
.nav-pfeil.auf { transform: rotate(180deg); }

/* Modellwahl mit dem Zeichen des Anbieters — ein Auswahlfeld kann keine
   Grafik darstellen, darum ein Knopf mit eigenem Menü. */
.modellwahl {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px 0 8px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
  max-width: 230px; transition: border-color .14s ease;
}
/* Kein Hover auf den Auswahlpillen — Marks Ansage vom 11.09.2026:
   „wenn man auf so eine pill hovert dann effekt weg, mach alle hover
   effekte weg bei projekt, ratio, etc." Der Umriss hellte auf, sobald
   der Zeiger nur vorbeikam; in einer Zeile aus fuenf Pillen flackerte
   damit staendig eine. Im Launchpad bleibt der Hover — dort hat Mark
   ihn ausdruecklich bestellt, als Flaeche statt Umriss. */
/* Ohne Anbieterzeichen fehlt links das Polster, das sonst das Zeichen gibt. */
.modellwahl.ohne-marke { padding-left: 12px; gap: 10px; }
/* Ein Schild, kein Knopf: Es sagt, womit gearbeitet wird, und laesst
   nichts waehlen. Also kein Zeigefinger und keine Kante, die auf einen
   Druck wartet. */
/* Die Uebernahme-Felder im Translator: dasselbe Gitter wie drueben im
   Uebernehmen-Fenster, damit die beiden nicht nur gleich arbeiten,
   sondern auch gleich aussehen. */
.tr-uebernahme { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-uebernahme .up-feld.voll { grid-column: 1 / -1; }
.tr-uebernahme .up-eingabe.hoch { min-height: 74px; padding: 9px 12px; line-height: 1.5; resize: vertical; }
@media (max-width: 620px) { .tr-uebernahme { grid-template-columns: 1fr; } }

.modellwahl.fest { cursor: default; border-color: transparent; background: transparent; padding-left: 0; }
.mw-marke { display: grid; place-items: center; width: 18px; flex: none; }
.mw-marke svg { width: 15px; height: 15px; }
.mw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-pfeil { display: inline-flex; margin-left: auto; color: var(--faint); flex: none; }
.mw-pfeil svg { width: 12px; height: 12px; }
/* Wer welche Arbeit macht.
 *
 * Hier stand ein Knopf mit zwei Modellen darin. Uebersetzen und Pruefen
 * sind festgelegt, also gibt es dort nichts mehr zu druecken — sie stehen
 * als Angabe da, nicht als Auswahl. Nur das Bildmodell bleibt ein Knopf,
 * und dass es einer ist, sieht man am Rahmen und am Pfeil.
 *
 * Die Rolle steht vor dem Namen: „Sonnet 5" allein sagt niemandem, ob es
 * uebersetzt oder prueft. */

/* Im Übersetzungsfenster füllt der Knopf die Spalte wie die Auswahlfelder. */
.tr-field .modellwahl { width: 100%; max-width: none; height: 38px; }

/* Menükopf je Anbieter */
.menu .head.mit-marke { display: flex; align-items: center; gap: 7px; }
.menu .head.mit-marke svg { width: 15px; height: 15px; flex: none; }
.menu .head.mit-marke em { margin-left: auto; font-style: normal; opacity: .7; font-size: 10.5px; }
.menu .mi-hint { margin-left: auto; color: var(--faint); font-size: 11px; }
/* Ein Haekchen mit einem Wort daneben, weit rechts.
 *
 * Zuerst stand hier blosser Text in Grossbuchstaben, zehn Pixel gross und
 * gleich neben dem Namen. Gross geschriebene Buchstaben bauen hoeher als
 * kleine — zehn Pixel Versalien lesen sich fast wie vierzehn Pixel Name,
 * und der Hinweis stand da wie ein zweiter Teil der Bezeichnung.
 *
 * Jetzt traegt er eine eigene Flaeche in Gruen, sitzt mit deutlichem
 * Abstand rechts aussen und ist klein genug, dass er sich nicht mit dem
 * Namen streitet. Das Haekchen sagt in einem Zeichen, was das Wort
 * ausschreibt — wer die Liste ueberfliegt, sieht nur die Haekchen. */

/* Wo die Erklaerung ein ganzer Satz ist, steht sie unter dem Namen statt
   rechts daneben: sonst laeuft sie um und der Name schwimmt in der Zeile. */
.menu button.mi-zwei { flex-direction: column; align-items: flex-start; gap: 2px; }
.menu button.mi-zwei b { font-weight: 500; }
.menu button.mi-zwei .mi-hint { margin-left: 0; font-size: 11.5px; line-height: 1.35; }
.menu button.mi-zwei.on { background: var(--raise); }
.menu:has(.mi-zwei) { min-width: 268px; }
.menu button[disabled] { opacity: .4; cursor: default; }

/* Ein ruhiger Hinweiskasten — kein Balken an der Seite, der aussieht,
   als wäre etwas schiefgegangen. */
.merke {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 2px; padding: 11px 13px; border-radius: var(--r-flaeche);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.merke svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--faint); }

h3.mit-marke { display: flex; align-items: center; gap: 10px; }
h3.mit-marke svg { width: 22px; height: 22px; flex: none; }
/* Keine Pille mehr: Die Zeile steht in einer Liste aus Ecken — Feldern,
   Kacheln, Eintraegen in der Leiste. Ein runder Knopf daneben faellt heraus.
   Dasselbe Mass wie die Eintraege links, damit die Kanten eine Linie
   ergeben. */
.kon-zeile-set .btn {
  flex: none;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-teil); font-size: 13px;
}

/* Bereiche ordnen */
/* Die Zeile kommt aus Entwurf 04 — Marks Meldung vom 17.09.2026: „die
   designs fuer einstellungen … hast du mit den alten vermischt bitte
   uebernehme sie 1zu1 aus den entwuerfen."

   Er hatte recht: Ich hatte nur das Kennzeichen des Entwurfs genommen
   (das Auge) und den alten Unterbau stehenlassen — Zeilen mit
   Trennlinie darueber, eigener Flaeche, siebzehn Pixel grossen Zeichen
   und dreizehneinhalb Punkt Schrift. Der Entwurf hat nichts davon: Die
   Zeilen stehen mit zwei Pixeln Luft nebeneinander, ohne Flaeche und
   ohne Linie, das Zeichen misst fuenfzehn, die Schrift zwoelfeinhalb.

   Jede Zahl unten steht so in `vorschau-einstbereiche100.html`. */
.sek-liste { display: flex; flex-direction: column; gap: 2px; }
.sek-zeile {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--r-feld);
  font-size: 12.5px;
}
.sek-zeile:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.sek-zeile.zieht { opacity: .45; }
.sek-zeile.aus .sek-name, .sek-zeile.aus .sek-ico { color: var(--faint); }
.sek-griff { display: flex; color: var(--faint); cursor: grab; }
.sek-griff svg { width: 12px; height: 12px; transform: rotate(90deg); }
.sek-zeile:active .sek-griff { cursor: grabbing; }
.sek-ico { display: flex; color: var(--muted); }
.sek-ico svg { width: 15px; height: 15px; }
.sek-zeile.ordner .sek-ico { color: var(--text); }
.sek-name { flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sek-unter { display: block; font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.sek-pfeile { display: flex; gap: 1px; }
/* Die Pfeile im Mass des Entwurfs: zweiundzwanzig statt sechsundzwanzig,
   damit sie die Zeile nicht auf die Hoehe eines Knopfes ziehen. */
/* Mit `.sek-zeile` davor UND der Klasse `.icon-btn.sm` dahinter: Die
   allgemeine Regel `.icon-btn.sm { width: 26px }` steht sechshundert
   Zeilen spaeter und wiegt bei gleicher Anzahl Klassen genauso viel —
   gemessen blieb das Auge bei sechsundzwanzig. */
.sek-zeile .sek-pfeile .icon-btn.sm,
.sek-zeile .icon-btn.sm.sek-auge { width: 22px; height: 22px; }
.sek-zeile .sek-pfeile .icon-btn.sm svg,
.sek-zeile .icon-btn.sm.sek-auge svg { width: 15px; height: 15px; }
.sek-pfeile .icon-btn:first-child svg { transform: rotate(180deg); }
.sek-pfeile .icon-btn[disabled] { opacity: .25; cursor: default; }
/* Ein Knopf, der gerade nichts zu tun hat, tritt zurueck statt zu
   verschwinden — so weiss man, dass es ihn gibt. */
.icon-btn[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.sek-zeile .switch { flex: none; }
/* Das Auge, das den Bereich ein- und ausblendet — Entwurf 04, Marks Wahl
   vom 17.09.2026. Ausgeblendet steht es leise da, sichtbar in voller
   Schrift; mehr Unterschied braucht es nicht, weil das Zeichen selbst
   schon zwei Formen hat. */
/* ============ Konto nach Entwurf 04 ============
   Marks Wahl vom 17.09.2026: „nimm 04 fuer personal", mit der Vorgabe,
   es solle aussehen „wie bei socials wo man einrichten kann wie bei meta
   insta oder chatgpt". Also zuerst, WER man ist — Bild, Name, Adresse
   auf eigener Flaeche —, danach die Einzelheiten als Zeilen. */
.ko-karte {
  display: flex; align-items: center; gap: 12px;
  padding: 13px; border-radius: var(--r-flaeche); background: var(--panel);
}
.ko-av {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-pille);
  display: grid; place-items: center; overflow: hidden;
  background: var(--panel-2); color: var(--muted); font-size: 15px; font-weight: 600;
}
.ko-av img { width: 100%; height: 100%; object-fit: cover; }
.ko-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ko-wer b { font-size: 14.5px; font-weight: 600; }
.ko-wer em {
  font-style: normal; font-size: 11.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Die Zeilen darunter: Aufschrift links, Wert in der Mitte, Griff
   rechts. Dieselbe Spaltenbreite wie im Entwurf, damit die Werte
   untereinander auf einer Kante stehen. */
.ko-zeile { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.ko-lb { flex: 0 0 96px; font-size: 11.5px; color: var(--muted); }
/* Der Wert steht als Text da, nicht in einem Kasten — Marks Meldung vom
   17.09.2026 mit zwei Bildern nebeneinander: „konto eben sieht immernoch
   ned aus wie im entwurf." Der Unterschied waren nicht die Masse,
   sondern die Bauart: drei Eingabefelder mit drei Knoepfen gegen drei
   Werte mit einem Bleistift. Ein Konto liest man oefter, als man es
   aendert. */
.ko-text {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ko-text.ko-leise { color: var(--faint); font-size: 11.5px; }
/* Der Bleistift steht immer da — Marks Ansage vom 17.09.2026: „die
   stifte in eintstellungen konto sollen nicht nur beim hovern
   erscheinen."

   Er ruhte vorher unsichtbar, damit die Seite wie eine Auskunft aussieht
   und nicht wie ein Formular. Das kostet aber genau das, was hier
   zaehlt: Man sieht nicht mehr, DASS sich etwas aendern laesst, und
   sucht die Stelle, statt sie zu finden. */
.ko-stift { flex: none; color: var(--faint); }
.ko-stift:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
/* Offen: das Feld nimmt den Platz des Wertes ein. */
.ko-wert {
  flex: 1; min-width: 0; height: 28px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--r-knopf);
  background: none; color: var(--text); font: inherit; font-size: 12.5px; outline: 0;
}
.ko-zeile .btn {
  height: 28px; padding: 0 12px; font-size: 11.5px; border-radius: var(--r-knopf); flex: none;
}
/* Flache Griffe: Schrift ohne Rand und ohne Flaeche, wie „Bearbeiten"
   und „Konto leeren" im Entwurf. */
.ko-flach {
  flex: none; border: 0; background: none; padding: 0;
  color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer;
}
.ko-flach:hover { color: var(--text); }
.ko-gefahr:hover { color: var(--rot, #e5534b); }
.ko-griffe { display: flex; gap: 14px; flex: none; }
.ko-unten { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
/* Der weisse Knopf im Mass der Zeile, nicht in seinen sechsundvierzig
   Pixeln aus dem Haus — sonst ueberragt er die Karte darueber. */
.ko-unten .btn-white { height: 32px; padding: 0 18px; font-size: 12.5px; }

/* Nicht `.an`, sondern `.sichtbar` — gemessen war das Auge blau
   unterlegt: `.icon-btn.an` faerbt im ganzen Haus mit dem Akzentblau
   #4c8dff, und das heisst dort „laeuft gerade". Ein Bereich, der
   sichtbar ist, laeuft nicht; er ist nur da. */
.sek-auge { flex: none; color: var(--faint); }
.sek-auge.sichtbar { color: var(--text); }
.sek-auge:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }

.swatch.sec-swatch { opacity: .42; }
.swatch.sec-swatch:hover { opacity: .7; }
.swatch.sec-swatch.on { opacity: 1; }

/* ============ Chat ============ */

.modal.chatbox {
  width: min(880px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  max-height: min(84vh, 780px); padding-bottom: 16px;
}

.chead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chead h3 { margin: 0; }
.chead .spacer { flex: 1; }
.cmodel {
  background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-teil);
  padding: 7px 12px; outline: 0; font-size: 12.5px; color: var(--text); max-width: 210px;
}

.clist {
  flex: 1; overflow-y: auto; min-height: 220px;
  display: flex; flex-direction: column; gap: 26px;
  padding: 4px 2px 12px;
}

.cmsg { max-width: 100%; }
.cmsg .ctext {
  white-space: pre-wrap; word-break: break-word;
  font-size: 15px; line-height: 1.68;
}

/* Deine Nachricht: rechtsbündig, ohne Kürzel oder Bild */
.cmsg.user { display: flex; justify-content: flex-end; }
.cmsg.user .ctext {
  background: var(--raise); border: 1px solid var(--border-soft);
  border-radius: var(--r-gross); padding: 11px 16px; max-width: 76%;
}

/* Antwort: volle Breite, ohne Rahmen, darunter die Werkzeuge */
.cmsg.assistant .ctext { padding-right: 6px; }
/* Zwischen der eigenen Blase und der Antwort ein Stueck mehr Luft als
   zwischen zwei Runden. Die Blase bringt ihr eigenes Polster mit und
   endet mit einer Kante — der Antworttext darunter setzte damit fast
   ohne Pause wieder ein und las sich wie eine Fortsetzung der eigenen
   Zeile statt wie eine Antwort. */
.cmsg.user + .cmsg { margin-top: 14px; }
.cactions { display: flex; gap: 2px; margin-top: 10px; }
.cact {
  background: none; border: 0; border-radius: var(--r-feld); cursor: pointer;
  color: var(--faint); padding: 6px; line-height: 0;
  transition: color .14s ease, background .14s ease;
}
.cact:hover { color: var(--text); background: var(--hover); }
.cact svg { width: 18px; height: 18px; }
.cact:disabled { opacity: .45; cursor: default; }
.cact.laeuft { color: var(--text); }
/* Die Punktreihe traegt keine eigene Hoehe — im Zeichenplatz eines
   Handgriffs braucht sie eine, sonst rutscht die Zeile zusammen. */
.cact .tr-dots { display: inline-flex; align-items: center; height: 17px; }

/* Leerer Übersetzer: Text und Eingabe stehen zusammen in der Mitte */
.cstart {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; margin: 0 auto; padding-bottom: 8vh;
}
.cstart .cform { flex: none; }
.cs-big {
  font-size: 25px; font-weight: 600; letter-spacing: -.02em;
  text-align: center; margin-bottom: 12px;
}
.cs-sub {
  font-size: 14px; line-height: 1.65; color: var(--muted);
  text-align: center; margin-bottom: 22px;
}
.page.chatpage.leer .cform { margin-top: 0; }

/* Eingabe oben, Werkzeuge darunter — so bleibt dem Text die volle Breite. */
.cform {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--raise); border: 1px solid var(--border);
  border-radius: var(--r-gross); padding: 14px 14px 10px 18px;
}
.crow { display: flex; align-items: center; gap: 8px; }
.crow .spacer { flex: 1; }
/* Kein heller Rahmen beim Hineinklicken — der Cursor zeigt schon, wo du bist. */
.ctext-in {
  /* flex: none — sonst quetscht der Flex-Container das Feld zusammen,
     obwohl die Höhe längst mitgewachsen ist. */
  flex: none; width: 100%;
  background: none; border: 0; outline: 0; resize: none;
  color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.55;
  min-height: 24px; max-height: min(190px, 26vh);
  overflow-y: auto; padding: 6px 0;
}
.ctext-in::placeholder { color: var(--faint); }

@media (max-width: 620px) {
  .modal.chatbox { max-height: 88vh; }
  .cmodel { max-width: 130px; }
}

/* Übersetzer als eigene Sektion: die Seite füllt die Höhe, die Liste
   scrollt darin, das Eingabefeld bleibt unten stehen. */
.content:has(.chatpage) { overflow: hidden; display: flex; flex-direction: column; }
.page.chatpage {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; height: 100%;
  /* Weniger Luft unten: das Eingabefeld soll am Fuß stehen, nicht
     80 px darüber schweben. */
  padding-bottom: 26px;
  /* Die Seite selbst ist so breit wie jede andere.

     Sie war es nicht: 900 statt 1060 Pixel, weil sich Gespraeche in einer
     schmalen Spalte besser lesen. Nur galt das dann auch fuer die
     Titelzeile, und „Translator" stand achtzig Pixel weiter innen als
     „Generator" oder „Brandtracker" daneben. Beim Wechsel zwischen den
     Reitern springt die Ueberschrift — und eine Ueberschrift, die
     springt, ist der auffaelligste Fehler einer Oberflaeche.

     Schmal wird darum nur, was wirklich gelesen wird: die Liste und das
     Eingabefeld. Der Kopf steht, wo alle Koepfe stehen. */
  width: 100%; margin-inline: auto; align-self: center;
}
.page.chatpage .clist,
.page.chatpage .cform { width: 100%; max-width: 900px; margin-inline: auto; }
/* Die Knoepfe rechts enden dort, wo die Spalte endet.
 *
   Marks Ansage vom 11.09.2026: „verschieb das zahnrad und den rest so
   nach links, das es aligned mit der bubble darunter ist." Sie standen
   vierzig Pixel weiter rechts als jede Blase — genau um das Mass, um das
   die schmale Spalte eingerueckt ist.

   Gerechnet statt abgeschrieben: dieselbe Einrueckung wie oben, also die
   Haelfte dessen, was die Spalte schmaler ist als der Kopf. Im schmalen
   Fenster wird sie von selbst null.

   Der TITEL bleibt, wo alle Titel stehen — siehe den Absatz darueber:
   Eine Ueberschrift, die beim Reiterwechsel springt, ist der
   auffaelligste Fehler einer Oberflaeche. Es ruecken nur die Knoepfe. */
.page.chatpage .head-actions { margin-right: calc((100% - min(100%, 900px)) / 2); }
/* Die letzte Antwort soll nicht am Eingabefeld kleben — der Abstand
   gehört in den Scrollbereich, sonst schluckt ihn das Scrollen wieder. */
.page.chatpage .clist { flex: 1; min-height: 0; padding-right: 4px; padding-bottom: 56px; }
.page.chatpage .clist.mittig { padding-bottom: 12px; }
.page.chatpage .cform { flex: none; margin-top: 14px; }

/* Projekt- und Namensfeld sitzen in der Eingabeleiste selbst. */
.cform.schlank.mit-pillen { padding-left: 8px; }
.cform.schlank.mit-pillen .crow { gap: 7px; }
.cform.schlank.mit-pillen .ctag,
.cform.schlank.mit-pillen .ctagwrap { align-self: flex-end; margin-bottom: 3px; }
/* Gleiches Mass wie die Projektwahl daneben — zwei verschieden hohe
   Pillen nebeneinander sehen nach Versehen aus. */
/* Rund wie die Projektwahl daneben, und ohne Umriss: die Fuellung traegt
   die Form allein. Ein Strich um eine gefuellte Pille zeichnet dieselbe
   Kante ein zweites Mal. */
.cform.schlank.mit-pillen .ctagwrap {
  height: 34px; border-radius: var(--r-teil); background: var(--panel); padding: 0 13px 0 15px;
  border-color: transparent;
}
.cform.schlank.mit-pillen .ctagwrap:focus-within { border-color: transparent; background: var(--raise); }
/* Wächst der Text, wandern die Pillen unter ihn — sonst wird die Zeile eng.
   Der Absende-Knopf bleibt dabei rechts außen, wo man ihn sucht.
   Nur dort, wo wirklich Pillen in der Leiste sitzen: sonst springt die
   Eingabe im Store Builder beim Tippen hin und her. */
.cform.schlank.mit-pillen:has(.ctext-in.mehrzeilig) .crow { flex-wrap: wrap; }
.cform.schlank.mit-pillen:has(.ctext-in.mehrzeilig) .ctext-in { order: -1; flex-basis: 100%; }
.cform.schlank.mit-pillen:has(.ctext-in.mehrzeilig) .send { margin-left: auto; }
.page.chatpage .cmodel { max-width: 220px; }

/* Kacheln im Übersetzungs-Fenster */
.pv-lang {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-feld);
}
.swatch.on .pv-lang { color: var(--text); }

.swatch.wide { width: auto; min-width: 168px; }
.pv-style {
  width: 100%; padding: 0 10px; font-size: 11.5px; line-height: 1.2;
  color: var(--muted); text-align: center; overflow: hidden;
}
.pv-style.werbe { font-weight: 700; letter-spacing: .04em; color: var(--text); }
.pv-style.nativ { font-weight: 400; }

.pv-anrede { font-size: 15px; font-weight: 600; color: var(--muted); }
.swatch.on .pv-anrede { color: var(--text); }

.set-hint { font-size: 12.5px; color: var(--faint); margin-top: 8px; line-height: 1.5; }

/* Etikett und Direktweg neben dem Absenden */
.ctag {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: transparent; color: var(--faint);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.ctag.on { color: var(--text); border-color: var(--text); background: var(--panel); }
.ctag svg { width: 15px; height: 15px; }

/* Die Projektwahl gehoert zu den Einstellungen daneben — Modell, Mass,
   Aufloesung, Anzahl — und traegt darum deren Mass und Farbe: gefuellter
   Kasten, dieselbe Hoehe, derselbe Radius, dieselbe Schriftgroesse.

   Die Namen stehen einzeln da, und wer eine neue Projektwahl einbaut,
   muss sie in alle fuenf Listen eintragen — sonst faellt sie auf .ctag.on
   zurueck und bekommt einen weissen Umriss, den sonst keine hat. Genau
   das war btueberprojekt im Uebernehmen-Fenster passiert. */
.ctag[data-act="chattag"],
.ctag[data-act="sbprojekt"],
.ctag[data-act="bprojekt"],
.ctag[data-act="adsprojekt"],
/* „Aufbau" steht neben der Projektwahl und traegt darum deren Form —
   Marks Ansage vom 12.09.2026: „diesen aufbau knopf im launchpad zur
   pill machen bitte." Gefuellt ist nur die Projektwahl: Sie sagt, WAS
   gerade geladen ist; der Aufbau macht ein Fenster auf und bleibt
   darum ein Umriss. Mass und Rundung sind dieselben, sonst stehen zwei
   verschiedene Dinge nebeneinander. */
/* Und er steht in `.lp-kopf`, nicht in `.head-actions` — die erste
   Fassung dieser Regel zielte auf die Kopfzeile der Seite und traf
   nichts. Marks zweite Meldung vom 12.09.2026: „bei launchpad oben
   rechts der aufbau button soll eine runde pill sein das habe ich dir
   schonmal gesagt."

   Am 15.09.2026 ist die Pille wieder gefallen: „nimm 06 nur zeichen fuer
   den aufbau knopf." Jetzt steht dort derselbe Zeichenknopf wie die
   beiden Pfeile daneben — nur etwas groesser, damit er nicht der dritte
   Pfeil zu sein scheint. */
.lp-kopf .icon-btn.sm[data-act="upaufbau"] { width: 30px; height: 30px; }
.lp-kopf .icon-btn.sm[data-act="upaufbau"] svg { width: 15px; height: 15px; }

/* Marks Ansage vom 14.09.2026: „projekt im launchpad bitte auch als
   runde pill, farbe behalten aber." Die eigene Regel wiegt schwerer als
   die Sammelregel fuer Knoepfe und hielt darum `--r-teil` fest — und
   das ist im Launchpad acht Pixel. Die Farbe bleibt, wie sie war. */
.ctag[data-act="upprojekt"],
.ctag[data-act="btueberprojekt"] {
  height: 34px; padding: 0 13px; gap: 8px; border-radius: var(--r-knopf);
  background-color: var(--panel); border: 1px solid transparent;
  /* Ohne gewaehltes Projekt gedaempft, mit Projekt in voller Schrift —
     siehe .on weiter unten. Vorher stand hier ebenfalls --text, damit
     sahen beide Zustaende gleich aus und man musste den Knopf lesen, um
     zu wissen, ob ueberhaupt etwas gewaehlt ist. Nur die Farbe aendert
     sich: Beschriftung, Mass und Fuellung bleiben, wie sie sind. */
  color: var(--muted); font-size: 12.5px;
}
.ctag[data-act="chattag"] svg,
.ctag[data-act="sbprojekt"] svg,
.ctag[data-act="bprojekt"] svg,
.ctag[data-act="adsprojekt"] svg,
.ctag[data-act="upprojekt"] svg,
.ctag[data-act="btueberprojekt"] svg { width: 15px; height: 15px; color: var(--faint); }
.ctag[data-act="chattag"].on,
.ctag[data-act="sbprojekt"].on,
.ctag[data-act="bprojekt"].on,
.ctag[data-act="adsprojekt"].on,
.ctag[data-act="upprojekt"].on,
.ctag[data-act="btueberprojekt"].on { color: var(--text); background-color: var(--panel); border-color: transparent; }

.cact.stark {
  color: var(--muted); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 12.5px;
}
.cact.stark:hover { color: var(--text); }

@media (max-width: 760px) {
  .ctag span { display: none; }
  .ctag { padding: 0 10px; }
}

/* ============ Auswahlfelder ============ */
/* Safari zeichnet <select> sonst im Systemstil und ignoriert die Rundung —
   darum das native Aussehen abschalten und den Pfeil selbst setzen. */

select.cmodel,
.field select,
.composer .mini,
.tr-field select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--raise);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
  padding-right: 34px;
  cursor: pointer;
}

/* Im Eingabefeld der Aufgaben stehen sie AUF einer Flaeche, nicht auf
   der Seite: Seit das Feld gefuellt ist (Marks Ansage vom 16.09.2026),
   traegt es denselben Ton wie sie — dann waeren sie darin nur noch ihr
   eigener Umriss, genau der Mangel eine Ebene tiefer. Also eine Stufe
   hoeher auf der Hausleiter. Gemessen: Feld und Auswahl standen beide
   auf rgb(19,19,19). */
.composer .mini { background-color: var(--panel); }
.composer .datefield.mini { background: var(--panel); }

select.cmodel { border-radius: var(--r-teil); padding-left: 15px; height: 34px; }
select.mini { padding-left: 13px; }
.field select { border-radius: var(--r-flaeche); }
.tr-field select { border-radius: var(--r-teil); }

/* Auswahlfelder in den Eigenschaftszeilen füllen die Breite */
.prop-val select {
  width: 100%; background: none; border: 0; outline: 0; color: var(--text);
  font: inherit; font-size: 14px; padding: 0 26px 0 0; cursor: pointer;
  background-position: right 4px center;
}
.prop-val:has(select) { padding: 6px 10px; }

/* ============ Schalter „Direkt" ============ */

.switch {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  color: var(--faint); font: inherit; font-size: 12.5px;
  transition: color .14s ease;
}
.switch:hover { color: var(--muted); }
.switch.on { color: var(--text); }

.sw-track {
  width: 34px; height: 20px; border-radius: var(--r-teil); flex: none;
  background: var(--panel); border: 1px solid var(--border);
  display: block; position: relative;
  transition: background .16s ease, border-color .16s ease;
}
.switch.on .sw-track { background: var(--accent); border-color: var(--accent); }
.sw-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--muted);
  transition: transform .16s cubic-bezier(.3, .8, .4, 1), background .16s ease;
}
.switch.on .sw-knob { transform: translateX(14px); background: var(--accent-text); }
html[data-anim="off"] .sw-knob { transition: none; }

/* Namensfeld neben der Projektwahl */
.ctagwrap {
  /* Wächst mit dem Namen, bleibt aber in Grenzen — leer ist sie schmal,
     ein langer Tag schiebt sie bis 250 px auf. */
  flex: 0 1 auto; min-width: 0; max-width: 250px;
  display: inline-flex; align-items: center; gap: 6px;
  /* Rechts zwei Punkte weniger: die Feldbreite trägt zwei Punkte für den
     Schreibstrich auf, sonst sähe die Pille rechts länger aus. */
  height: 28px; padding: 0 9px 0 11px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: transparent;
  color: var(--faint); cursor: text;
  transition: border-color .14s ease, color .14s ease;
}
/* Nur die Schrift wird heller, der Rahmen bleibt — siehe oben. */
.ctagwrap:focus-within { color: var(--muted); }
.ctagwrap.on { color: var(--text); }
/* Der Tag unter einer Copy im Launchpad. Eingerueckt bis unter den Text,
   damit er zur Copy gehoert und nicht zur Liste. */
.up-copytag { margin: 0 0 8px 34px; height: 26px; }
/* Der Copyname im Projekt: anklickbar, und beim Umbenennen ein Feld,
   das genauso aussieht wie der Name davor — kein Sprung beim Klick. */
.copy-name-text { cursor: text; border-radius: var(--r-klein); padding: 0 3px; margin-left: -3px; }
.copy-name-text:hover { background: var(--hover); }
.copy-name-feld {
  font: inherit; color: inherit; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r-klein);
  padding: 1px 5px; max-width: 220px; min-width: 90px;
}
.copy-name-feld:focus { outline: none; }
/* Was in einem Prüfbefund fehlt, wird erklärt statt mit einem Strich
   abgetan — gedämpft und kursiv, damit man es nicht für Inhalt hält. */
.pr-wert.pr-leer { color: var(--faint); font-style: italic; }
/* Die Suchleiste im Translator. Sie sitzt unter der Kopfzeile und nimmt
   die Breite des Inhalts — nicht schwebend: Ein Kasten, der über dem
   Text liegt, verdeckt genau das, was man sucht. */
.chat-suche {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--r-feld); background: var(--panel);
  color: var(--muted);
}
.chat-suche-feld {
  flex: 1; min-width: 0; font: inherit; color: var(--text);
  background: transparent; border: 0; outline: none;
}
.chat-suche-zahl { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }
.chat-suche .icon-btn.sm { width: 26px; height: 26px; }
.chat-suche [data-v="-1"] svg { transform: rotate(90deg); }
.chat-suche [data-v="1"] svg { transform: rotate(-90deg); }
/* Ein Treffer, und der eine, auf dem man gerade steht. */
.ct-treffer { background: color-mix(in srgb, var(--text) 24%, transparent); border-radius: var(--r-klein); }
.ct-treffer.dran { background: #f5a524; color: #1a1a1a; }
/* Eine Anzeige, die gerade gezogen wird, und die Gruppe, in die sie
   fiele. Nur zwei Zustaende — mehr braucht es nicht, um zu sehen, was
   passieren wird. */
.ub-anzeige[draggable="true"] { cursor: grab; }
.ub-anzeige.zieht { opacity: .4; cursor: grabbing; }
.ub-gruppe.ziel { outline: 2px solid var(--muted); outline-offset: 2px; border-radius: var(--r-feld); }
.ctagwrap svg { width: 15px; height: 15px; flex: none; }
.ctagname {
  flex: 0 1 auto; min-width: 0; width: auto;
  background: none; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 12px; padding: 0;
}
.ctagname::placeholder { color: var(--faint); }

/* Name über dem Copy-Text */
.copy-body { flex: 1; min-width: 0; }
.copy-name {
  font-size: 11.5px; color: var(--faint); margin-bottom: 3px;
  text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 760px) {
  .switch .sw-text { display: none; }
}

/* ============ Modus-Umschalter ============ */

.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-teil);
}
.seg-btn {
  background: none; border: 0; border-radius: var(--r-knopf); cursor: pointer;
  padding: 5px 12px; font: inherit; font-size: 12.5px; color: var(--faint);
  white-space: nowrap; transition: color .14s ease, background .14s ease;
}
/* Der Kippschalter aenderte als einziger nur die Schrift, ohne die
   Flaeche aufzuhellen — man sah nicht, worueber man steht. Der
   gewaehlte traegt eine eigene Flaeche, darum dort der Schleier als
   Bild darueber. */
.seg-btn:hover { color: var(--text); background: var(--hover); }
.seg-btn.on { background: var(--raise); color: var(--text); font-weight: 500; }
.seg-btn.on:hover { background-image: linear-gradient(var(--hover), var(--hover)); }

@media (max-width: 900px) {
  .seg-btn { padding: 5px 9px; font-size: 12px; }
}

/* ============ Direkt übernommen ============ */

.cmsg.upload {
  border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--sidebar); padding: 12px 14px 10px;
}
.up-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--faint); margin-bottom: 10px;
}
.up-head .spacer { flex: 1; }
.up-head svg { width: 15px; height: 15px; }
.up-head .cact { padding: 4px; }

.up-list { display: flex; flex-direction: column; gap: 1px; }
.up-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--border-soft);
  font-size: 14px; line-height: 1.55;
}
.up-item:first-child { border-top: 0; }
.up-name {
  flex: 0 0 auto; min-width: 62px; color: var(--faint);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
}
.up-text { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }

/* Ein Pfeil zeigt, dass es weitergeht — dafür braucht es keinen Strich. */
.up-open {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; background: none; border: 0; padding: 4px 0;
  color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: color .14s ease;
}
.up-open svg { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .14s ease; }
.up-open:hover { color: var(--text); }
.up-open:hover svg { transform: rotate(-90deg) translateY(2px); }

@media (max-width: 620px) {
  .up-item { flex-direction: column; gap: 3px; }
  .up-name { min-width: 0; }
}

/* ============ Prüfbericht ============ */

.cmsg.pruef {
  border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--sidebar); padding: 12px 14px 12px;
}
/* Rahmen bleibt neutral — nur die Kopfzeile wird deutlicher. */
/* Ein Fund soll ins Auge fallen, nicht im Grau verschwinden. */
.cmsg.pruef.fehler .up-head { color: var(--text); }
.cmsg.pruef.fehler .up-head svg { opacity: 1; }

/* Und gruen, wenn nichts dasteht — dieselbe Karte, dieselbe Kante. */
.cmsg.pruef .pr-ok {
  background: var(--raise); border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, #3fa76a 65%, transparent);
  border-radius: 0 14px 14px 0; padding: 13px 15px;
}
.pr-ok { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* Eine Karte je Befund — Marks Wahl vom 09.09.2026 aus zwanzig
   Entwuerfen: „nimm design nummer 2."

   Vorher trennte ein waagerechter Strich die Befunde, und Original und
   Uebersetzung standen als zwei Zeilen untereinander. Jetzt steht jeder
   Befund in seiner eigenen Karte, mit dem Streifen links in der Farbe
   seiner Schwere und dem Vorher/Jetzt-Paar darin — genau wie drueben im
   Uebernehmen. Wer beide liest, muss nicht zweimal lesen lernen. */
.pr-list { display: flex; flex-direction: column; gap: 10px; }
.pr-item {
  background: var(--raise); border: 1px solid var(--border);
  /* Marks Ansage vom 09.09.2026: „die farben fehlen, entweder falsch rot
     oder keine fehler dann gruen."

     Der Streifen stand auf Grau und wurde nur bei „hoch" rot — und Marks
     beide Befunde waren „mittel". Ein Befund IST der Fehler; ob er schwer
     oder mittel wiegt, entscheidet nicht, ob er einer ist. Also rot,
     sobald einer dasteht. */
  border-left: 3px solid var(--rot, #e5534b);
  border-radius: 0 14px 14px 0; padding: 13px 15px;
}
/* Das Etikett „Abweichung / Schwer / Klein" faellt weg: Der Streifen
   sagt es, und zweimal dasselbe zu sagen macht es nicht deutlicher. */

/* Der Befundsatz steht ueber den Zitaten — er sagt, was an ihnen falsch
   ist, und ohne ihn sind zwei Zitate nur zwei Zitate. */
.pr-was { font-size: 14px; line-height: 1.55; margin-bottom: 10px; color: var(--text); }

/* Das Paar im Befund — dieselben Kaesten wie drueben, nur ohne den
   Strich links: Den traegt hier die Karte. */
.pr-paar { gap: 10px; }
.pr-paar .pp-seite { border-left: 0; }
.pr-paar .pp-seite p { word-break: break-word; }
.pr-leer { color: var(--faint); font-style: italic; }

.pr-zeile { display: flex; gap: 14px; align-items: baseline; margin-bottom: 5px; }
.pr-key { flex: 0 0 96px; color: var(--faint); font-size: 12.5px; }
.pr-wert { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; word-break: break-word; }
.pr-hinweis { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

@media (max-width: 620px) {
  .pr-zeile { flex-direction: column; gap: 2px; }
  .pr-key { flex: none; }
}

/* Übersetzung oben, Original klein darunter */
.up-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.up-orig { font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* Kennzeichnung, damit klar ist: oben steht das Übernommene */
.up-mark {
  display: inline-block; margin-right: 10px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}

/* Rückfrage vor Eingriffen */
.vbar.ask .vtext.vask {
  max-width: min(520px, calc(100vw - 40px));
  white-space: normal; gap: 6px; padding: 10px 10px 10px 16px;
  border-color: var(--muted);
}
.vask span { flex: 1; min-width: 0; }
.vja, .vnein {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.vja { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.vja svg { stroke: var(--accent-text); }
.vja:hover { opacity: .88; }
.vnein:hover { color: var(--text); background: var(--hover); }

/* Rückgängig im Stapel-Eintrag */
.up-zurueck { font-size: 12px; color: var(--faint); margin-right: 2px; }
.cmsg.upload.zurueck .up-list, .cmsg.upload.zurueck .up-head span { opacity: .45; }
.cmsg.upload.zurueck .up-item .up-text { text-decoration: line-through; }

/* „Journal-Panel auf volle Breite" stand hier und ist mit dem Knopf
   gegangen — Marks Auftrag vom 11.09.2026. Das Panel hat die Breite, die
   es hat. */

/* ============ Karte unten in der Leiste ============ */

/* ---------- Regie: der sichtbare Zeiger ---------- */
.regie-zeiger {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 24%, transparent), 0 8px 22px rgba(0, 0, 0, .45);
  transition: transform .48s cubic-bezier(.22, .61, .36, 1);
}
/* Beschriftung neben dem Zeiger: was er gerade vorhat. */
.rz-schild {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  padding: 4px 9px; border-radius: var(--r-feld); white-space: nowrap;
  background: var(--text); color: var(--bg);
  font-size: 11.5px; font-weight: 500; opacity: 0;
  transition: opacity .16s ease;
}
.regie-zeiger.mit-schild .rz-schild { opacity: 1; }
.rz-ring {
  position: absolute; inset: -9px; border-radius: 50%;
  border: 2px solid var(--text); opacity: 0; transform: scale(.6);
}
.regie-zeiger.klickt .rz-ring { animation: rzKlick .38s ease-out; }
@keyframes rzKlick {
  from { opacity: .9; transform: scale(.6); }
  to { opacity: 0; transform: scale(1.7); }
}
/* Was gerade angefasst wird, hebt sich ab. */
.regie-ziel {
  outline: 2px solid color-mix(in srgb, var(--text) 45%, transparent) !important;
  outline-offset: 2px; border-radius: var(--r-feld);
}
html[data-anim="off"] .regie-zeiger { transition: none; }

/* ---------- Konsole unten rechts ---------- */
.kon-knopf {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(var(--raise), var(--raise)), var(--bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border); color: var(--muted);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  transition: color .14s ease, border-color .14s ease, transform .14s ease;
}
.kon-knopf:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); transform: translateY(-1px); }
.kon-knopf svg { width: 18px; height: 18px; }
.kon-punkt {
  position: absolute; top: 9px; right: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--text);
}

.konsole {
  position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 370px; max-width: calc(100vw - 32px);
  border: 1px solid var(--border); border-radius: var(--r-gross);
  /* Deckende Grundfarbe unter der Tönung: --raise ist im Glas-Thema
     durchscheinend, dann läse man den Hintergrund mit. Der Weichzeichner
     behält den Glas-Eindruck. */
  background: linear-gradient(var(--raise), var(--raise)), var(--bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  animation: konAuf .18s cubic-bezier(.22, .61, .36, 1) both;
}
/* Aus der unteren rechten Ecke heraus — dort sitzt der Knopf, aus dem
   das Fenster hervorgeht. */
.konsole { transform-origin: 100% 100%; }
@keyframes konAuf {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes konZu {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(10px) scale(.94); }
}
.konsole.zu { animation: konZu .17s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }

.kon-knopf { animation: konKnopf .2s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes konKnopf {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: none; }
}

html[data-anim="off"] .konsole,
html[data-anim="off"] .konsole.zu,
html[data-anim="off"] .kon-knopf { animation: none; }

.kon-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px 10px 12px;
  color: var(--muted); font-size: 12.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.kon-kopf > svg:first-child { width: 15px; height: 15px; flex: none; }
.kon-kopf > span { flex: 1; }
.kon-zahl { font-size: 11px; color: var(--faint); }
.icon-btn.sm { width: 26px; height: 26px; }
.icon-btn.sm svg { width: 15px; height: 15px; }

.kon-verlauf {
  display: flex; flex-direction: column; gap: 8px;
  max-height: min(340px, 45vh); overflow-y: auto;
  padding: 10px 12px;
}
.kon-zeile { font-size: 12px; line-height: 1.5; }
.kon-zeile.user {
  align-self: flex-end; max-width: 90%;
  background: var(--panel); border-radius: var(--r-feld); padding: 5px 9px; color: var(--text);
}
.kon-zeile.assistant { color: var(--muted); }
.kon-zeile.fehler { color: #e5534b; }
.kon-leer { font-size: 11.5px; line-height: 1.6; color: var(--faint); }

/* Die Knöpfe bleiben unten stehen, während der Text nach oben wächst —
   das Fenster hängt am unteren Rand, also dehnt es sich nach oben aus. */
.kon-eingabe {
  display: flex; align-items: flex-end; gap: 7px;
  padding: 8px 9px 9px 12px;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.kon-eingabe textarea {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; resize: none;
  color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.5;
  padding: 5px 0; min-height: 28px; max-height: 132px;
  overflow-y: auto;
}
.kon-eingabe textarea::placeholder { color: var(--faint); }
/* Ablaufspur: Punkt je Schritt, Linie dazwischen, der aktuelle pulsiert. */
.kon-spur { display: flex; flex-direction: column; padding: 2px 0; }
.kon-schritt {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 3px 0 3px 2px; font-size: 11.5px; color: var(--faint);
  animation: konRein .22s ease both;
}
.kon-schritt:not(:last-child)::before {
  content: ''; position: absolute; left: 5px; top: 16px; bottom: -3px;
  width: 1px; background: color-mix(in srgb, var(--text) 14%, transparent);
}
.ks-punkt {
  flex: none; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}
.kon-spur.fertig { opacity: .75; }
.kon-spur.fertig .kon-schritt { animation: none; }
.kon-schritt.jetzt, .kon-schritt.letzter { color: var(--muted); }
.kon-schritt.letzter .ks-punkt { background: color-mix(in srgb, var(--text) 45%, transparent); }
.kon-schritt.jetzt .ks-punkt { background: var(--text); animation: konPuls 1.1s ease-in-out infinite; }
.ks-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes konRein { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes konPuls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .55; } }
html[data-anim="off"] .kon-schritt { animation: none; }
html[data-anim="off"] .kon-schritt.jetzt .ks-punkt { animation: none; }

.kon-status:empty { display: none; }
.kon-status {
  padding: 0 12px 8px; font-size: 11.5px; line-height: 1.5; color: var(--muted);
}
.kon-status .verr { color: #e5534b; }
.kon-status .vhint { color: var(--faint); }

.kon-frage {
  display: flex; align-items: center; gap: 8px;
  margin: 0 8px 6px; padding: 8px 10px; border-radius: var(--r-feld);
  background: var(--panel); font-size: 12px; line-height: 1.45;
}
.kon-frage > span { flex: 1; min-width: 0; }
/* Nur Haken und Kreuz — ohne Knopfform, sonst kämpfen drei Kreise
   nebeneinander um Aufmerksamkeit. */
.kon-frage .vja, .kon-frage .vnein {
  flex: none; width: 22px; height: 22px; padding: 0;
  background: none; border: 0; border-radius: 0;
  display: grid; place-items: center; cursor: pointer;
  transition: color .14s ease, transform .14s ease;
}
.kon-frage .vja { color: var(--text); }
.kon-frage .vnein { color: var(--faint); }
.kon-frage .vja:hover, .kon-frage .vnein:hover { transform: scale(1.12); }
.kon-frage .vnein:hover { color: var(--text); }
.kon-frage svg { width: 18px; height: 18px; stroke-width: 2; }
/* Die alte Sprachleiste färbt den Haken über stroke ein — hier zählt
   wieder die eigene Textfarbe, sonst bleibt er dunkel. */
.kon-frage .vja svg, .kon-frage .vnein svg { stroke: currentColor; }

/* Beide ohne Knopfform — nur die Zeichen selbst. */
.kon-mic, .kon-send {
  flex: none; box-sizing: border-box; width: 28px; height: 28px;
  background: none; border: 0; border-radius: 0; padding: 0;
  cursor: pointer; display: grid; place-items: center;
  transition: color .14s ease, transform .14s ease;
}
.kon-mic svg, .kon-send svg { width: 18px; height: 18px; }
.kon-mic { color: var(--muted); }
.kon-mic:hover { color: var(--text); transform: scale(1.1); }
.kon-mic.on { color: #e5534b; }

.kon-send { color: var(--text); }
.kon-send:hover { transform: translateX(2px); }
.kon-send:disabled { opacity: .35; cursor: default; transform: none; }

/* Ohne Fuellung: In der Leiste stehen sie fuer sich, und eine graue
   Flaeche macht sie zu Kaesten, die etwas enthalten wollen. Der Umriss
   sagt genug — gefuellt wird erst beim Ueberfahren. */
.side-card {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-flaeche);
  background: transparent; padding: 10px 12px; margin-bottom: 10px;
  text-align: left; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.side-card:hover { background: var(--hover); }
.side-card.next { cursor: default; }
.side-card.next:hover { background: var(--hover); }

.sc-top { display: flex; align-items: center; gap: 8px; }
.sc-label { font-size: 11.5px; color: var(--faint); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-top .prio { padding: 0; cursor: inherit; }
.sc-top .prio:hover { background: none; }
.sc-top .plabel { display: none; }

.sc-time { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Die angehaltene Uhr bleibt stehen, tritt aber zurueck: der Stand bleibt
   ablesbar, ohne dass es aussieht, als liefe noch etwas. */
.side-card.focus.ruht .sc-time { color: var(--muted); }
/* Die Pille traegt jetzt nur noch „bereit" — das „pausiert" ist am
   22.09.2026 gegangen (Marks Ansage), und mit ihm der einzige Fall, in
   dem sie NEBEN einer laufenden Uhr stand. „bereit" steht dagegen
   allein: Da laeuft nichts, was es wiederholen koennte. */
.sc-ruht {
  flex: none; font-size: 10.5px; color: var(--faint);
  padding: 1px 7px; border-radius: var(--r-teil);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.sc-wache { flex: none; display: inline-flex; }
.sc-wache .wache-lage { font-size: 11px; }
/* Der Punkt leuchtet, damit man ihn im Augenwinkel sieht. */
.sc-wache .wache-lage i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--punkt) 22%, transparent); }
.sc-wache .wache-lage.wechsel i { animation: wachePunkt .45s cubic-bezier(.22, 1, .36, 1); }

.sc-title {
  flex: 1; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.4; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-title:hover { color: var(--muted); }

/* Quellenangaben unter einer Antwort */
.quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.q-label {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.q-link {
  font-size: 12px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--r-teil); padding: 3px 10px;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .14s ease, border-color .14s ease;
}
.q-link:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }

/* ============ Anhänge im Orakel ============ */

.anhaenge { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.anhang {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: var(--r-feld);
  padding: 5px 8px 5px 6px; font-size: 12px; color: var(--muted);
  background: var(--panel); max-width: 220px;
}
.anhang img { width: 26px; height: 26px; object-fit: cover; border-radius: var(--r-feld); flex: none; }
.anhang svg { flex: none; opacity: .8; }
.an-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-weg {
  flex: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--faint);
  display: grid; place-items: center;
}
.an-weg svg { width: 12px; height: 12px; }
.an-weg:hover { color: var(--text); }

.msg-files { display: block; margin-top: 6px; font-size: 11.5px; color: var(--faint); }

.page.chatpage .tabs-row { flex: none; }
.page.chatpage.leer .tabs-row { margin-bottom: 0; }

/* Leeres Orakel: Text mittig, Eingabe bleibt trotzdem unten */
.clist.mittig { justify-content: center; }
.clist.mittig .cstart { padding-bottom: 0; }

/* Datei-Plus schlicht neben dem Absenden */
.oplus {
  /* Links vor dem Text, unten bündig — auf einer Linie mit dem Sendepfeil. */
  flex: none; align-self: flex-end; width: 30px; height: 34px;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: 0; color: var(--faint);
  transition: color .14s ease, background .14s ease;
}
.oplus:hover { color: var(--text); transform: scale(1.12); }
.oplus { transition: color .14s ease, transform .14s ease; }

/* ============ Bilder ============ */

.bild-form {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px;
  margin-bottom: 26px;
}
.bild-drop {
  aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--raise); display: grid; place-items: center; cursor: pointer;
  overflow: hidden; transition: border-color .16s ease;
}
.bild-drop:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
/* Mit Vorlage bekommt der Kasten Verhältnis und Höchstbreite des Bildes
   (beides im style-Attribut) — so entstehen keine leeren Ränder ringsum
   und nichts wird beschnitten. Hochformate deckelt die Breite bei 460 px Höhe. */
.bild-drop.hat { padding: 0; margin-inline: auto; }
.bild-drop img { width: 100%; height: 100%; object-fit: contain; }
.bd-inner {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--faint); font-size: 12.5px; text-align: center; padding: 16px;
}

.bild-rechts { display: flex; flex-direction: column; }
.bild-auftrag { flex: none; }
.bild-tools { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bild-tools .btn { display: inline-flex; align-items: center; gap: 7px; }
.bild-tools .btn svg { width: 15px; height: 15px; }
.bild-tools .spacer { flex: 1; }

/* Ergebnisse in Reihen, klein genug für den Überblick; ein Klick auf das
   Symbol zieht ein Paar auf volle Breite für den genauen Vergleich. */
/* Ein Bild ist ueberall gleich gross — die Karte richtet sich danach,
   nicht umgekehrt.

   Gerechnet von der Bildbreite her: Ein Ergebnis allein soll 396 Punkte
   messen. Dazu kommt das Polster der Karte, zweimal zwoelf: 420 fuer die
   einzelne Spalte. Stehen Vorlage und Ergebnis nebeneinander, brauchen
   sie zweimal 396, dazu zehn Punkte Abstand und wieder das Polster —
   macht 826, aufgerundet 830.

   Vorher waren beide Ansichten dreihundert breit. Ein Bild im Paar mass
   damit hundertvierzig Punkte, eines allein zweihundertdreiundzwanzig:
   Dasselbe Bild sah je nach Schalterstellung anders aus, und im Paar war
   es zu klein, um etwas zu erkennen. */
.werke { display: grid; grid-template-columns: repeat(auto-fill, minmax(830px, 1fr)); gap: 16px; align-items: start; }
.werke.einzeln { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
/* Das Paarraster hat immer zwei Spalten, auch wenn nur ein Bild darin
   steht — deshalb blieb ein Einzelbild auf halber Kartenbreite sitzen und
   liess die andere Haelfte leer. In der Einzelansicht bekommt es die
   ganze Karte; in der Paaransicht bleibt es bei der Haelfte, sonst waere
   ein Werk ohne Vorlage doppelt so gross wie die Paare daneben. */
.werke.einzeln .werk-paar { grid-template-columns: 1fr; }
/* Nur Umriss, keine Fuellung. Auf der Seite fiel die eigene Farbe nicht
   auf — dort ist der Grund ohnehin fast schwarz —, im Fenster darueber
   dagegen sass die Karte als grauer Block. Ohne Fuellung sieht sie an
   beiden Orten gleich aus: ein Rahmen um das, was darin steht. */
/* Die Karten des Verlaufs tragen die Farben, die im Haus „gewaehlt"
   heissen: der Grund der Fenster und ihr Umriss aus 13 Prozent Text.
   Marks Ansage vom 12.09.2026: „im generator die verlauf ergebnisse
   gleiche farben wie links das ausgewaehlte fenster also popup farben."
   Derselbe Ton wie beim aktiven Eintrag in der Leiste links. */
.werk {
  border: 1px solid var(--lp-wahl-rand); border-radius: var(--r-gross); padding: 12px;
  background: var(--lp-wahl);
}
.werk.gross { grid-column: 1 / -1; }
.werk-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.werk-paar figure { margin: 0; }
/* Immer quadratisch, ganz gleich welches Mass das Bild selbst hat. Sonst
   stand im Verlauf ein hohes Bild neben einem breiten, jede Karte war
   anders hoch und die Reihe wirkte schief. Das Bild wird dabei nicht
   beschnitten, sondern liegt vollstaendig im Quadrat — bei einem Logo ist
   der Rand ohnehin leer. */
.werk-paar img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  border-radius: var(--r-flaeche); display: block;
  background: var(--raise); border: 1px solid var(--border-soft);
}
.werk-paar figcaption {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin-top: 6px;
}
.werk.gross .werk-paar { gap: 16px; }
.werk.gross .werk-paar figcaption { font-size: 11px; margin-top: 8px; }
/* Der Auftrag steht ueber allem anderen in einer eigenen Zeile — in der
   Reihe mit den Handgriffen blieb von ihm nur „Ein…" uebrig. */
.werk-fuss { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.werk-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; }
/* Der Zwischenraum darf verschwinden, bevor die Zeile umbricht. */
.werk-zeile .spacer { flex: 1; }
.werk-fuss .cact { flex: none; }
/* Der Auftrag darf abgeschnitten werden — Mass und Aufloesung nicht.
   Vorher hing beides an einer Zeichenkette, und uebrig blieb ein „· …". */
/* Platzhalter, wenn ein Bild nicht aus der Ablage kam. */
.werk-fehlt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; aspect-ratio: 1; border-radius: var(--r-flaeche);
  background: var(--panel); border: 1px dashed var(--border);
  color: var(--faint); font-size: 12px; text-align: center;
}
.werk-fehlt svg { width: 20px; height: 20px; }

.werk-info {
  min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--faint);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
/* In den Kacheln bleibt der Auftrag in einer Zeile — im Generator wie im
   Fenster des Builders. Bricht er um, rutscht die Reihe mit den
   Handgriffen darunter mit, und nebeneinander stehende Kacheln enden auf
   verschiedener Hoehe. Lieber abgeschnitten mit Auslassung; ganz steht er
   im Titel. */
.werk-fuss .werk-info {
  display: block; -webkit-line-clamp: none;
  white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal;
}
.werk-fakt {
  flex: none; font-size: 12.5px; color: var(--faint); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.werk-info:not(:empty) + .werk-fakt:not(:empty) { margin-left: 8px; }
.werk-fuss a.cact { display: grid; place-items: center; text-decoration: none; }

@media (max-width: 760px) {
  .bild-form { grid-template-columns: minmax(0, 1fr); }
  .bild-drop { aspect-ratio: 16 / 10; }
}

/* ============ Knopffarbe ============ */
/* --accent trägt Absenden, „Neu"-Knöpfe, Häkchen und Schalter. */

/* Fortschritt gehört zur Knopffarbe, ist aber heller — sonst konkurriert
   der Ring mit dem Knopf um die Aufmerksamkeit. */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 55%, var(--text));
  --accent-deep: color-mix(in srgb, var(--accent) 74%, #000000);
}

html[data-accent="blue"]   { --accent: #3b74d4; --accent-text: #ffffff; }
html[data-accent="violet"] { --accent: #7a5cd6; --accent-text: #ffffff; }
html[data-accent="teal"]   { --accent: #2f9d94; --accent-text: #ffffff; }
html[data-accent="green"]  { --accent: #34925c; --accent-text: #ffffff; }
html[data-accent="amber"]  { --accent: #c9852f; --accent-text: #ffffff; }

.pv-accent { background: var(--raise); }
.pv-accent i { width: 22px; height: 22px; border-radius: 50%; display: block; }
.pv-accent.a-standard i { background: var(--text); }
.pv-accent.a-blue i { background: #3b74d4; }
.pv-accent.a-violet i { background: #7a5cd6; }
.pv-accent.a-teal i { background: #2f9d94; }
.pv-accent.a-green i { background: #34925c; }
.pv-accent.a-amber i { background: #c9852f; }

/* Mehrzeilige Eingabefelder außerhalb des Panels */
.feldtext {
  display: block; width: 100%;
  background: var(--feld-grund); border: 1px solid var(--border); border-radius: var(--r-flaeche);
  padding: 11px 14px; outline: 0;
  color: var(--text); font: inherit; font-size: 14px; line-height: 1.6;
  resize: none;                 /* kein Anfasser, der über die runde Ecke ragt */
  max-height: 260px; overflow-y: auto;
}
.feldtext::placeholder { color: var(--faint); }
/* Ausser im Generator: Dort ist das grosse Feld ohnehin das einzige, in
   das man schreibt, und der hellere Rahmen beim Hineinklicken sprang an.
   Marks Ansage vom 12.09.2026: „im generator wenn man auf das textfeld
   drueckt soll kein umriss erscheinen." */
.bild-rechts .feldtext:focus { border-color: var(--border); }

/* Knopf, während ein Bild entsteht */
.btn-white.laeuft {
  position: relative; overflow: hidden;
  opacity: 1; cursor: default;
}
/* Laeuft und laesst sich trotzdem druecken: beim Uebernehmen bricht der
   zweite Druck ab. Ohne den Zeiger sieht er aus wie gesperrt. */
.btn-white.laeuft.abbrechbar { cursor: pointer; }
.btn-white.laeuft .tr-dots i { background: var(--accent-text); }
.btn-white.laeuft::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: schimmer 1.4s ease-in-out infinite;
}
@keyframes schimmer { to { transform: translateX(100%) } }
html[data-anim="off"] .btn-white.laeuft::after { animation: none; opacity: 0; }

/* Das fertige Bild blendet ein — aber nur, wenn es gerade fertig wurde.

   Die Regel traf jeden Aufbau, also auch den Wechsel in den Generator:
   Dann stieg die oberste Karte des Verlaufs jedesmal von unten herein,
   als waere sie soeben entstanden. Beim Wechsel traegt die Seite `anim`;
   daran laesst sich der eine Fall vom anderen unterscheiden, ohne dass
   der Zeichner etwas davon wissen muss. */
.page:not(.anim):not(.anim-sub) .werke .werk:first-child,
.modal .werke .werk:first-child { animation: riseIn .38s cubic-bezier(.22, .61, .36, 1) both; }
html[data-anim="off"] .werke .werk:first-child { animation: none; }

/* Schlanke Eingabe: eine Pille, solange eine Zeile reicht */
.cform.schlank { padding: 7px 8px 7px 18px; border-radius: var(--r-teil); gap: 4px; }
.cform.schlank .crow { align-items: flex-end; gap: 6px; }
/* flex:1 nur in der Zeile (Orakel). Steht das Feld als eigener Block
   darüber (Übersetzer), würde flex:1 es wieder zusammendrücken. */
.cform.schlank .crow > .ctext-in { flex: 1; }
.cform.schlank .ctext-in { padding: 8px 0; }
/* Sobald der Text umbricht, wird aus der Pille eine weiche Kachel */
.cform.schlank:has(.ctext-in.mehrzeilig) { border-radius: var(--r-gross); padding: 12px 8px 8px 18px; }

/* ---------- Nachbearbeitung ---------- */
.seg.klein .seg-btn { height: 28px; padding: 0 12px; font-size: 12px; }

.sb-werkbank { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.sb-wzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-wzeile .spacer { flex: 1; }
.sb-wzeile .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sb-wzeile .btn svg { width: 15px; height: 15px; }
.sb-wzeile .spacer { flex: 1; }
.sb-wtitel { font-size: 13px; color: var(--muted); }

.sb-feld.klein { height: 34px; flex: 0 1 260px; }
.sb-feld.klein.voll { flex: none; width: 100%; }

/* Tonlage, Sprache und Knopf teilen sich eine Zeile — jedes so breit,
   wie es braucht, der Knopf schrumpft nicht. */
.sb-wzeile.eng { display: flex; gap: 8px; flex-wrap: nowrap; align-items: stretch; }
.sb-wzeile.eng .opt-sel { flex: 1 1 0; min-width: 0; max-width: none; height: 38px; }
.sb-wzeile.eng .btn { flex: none; }
.sb-leiste .btn, .sb-leiste .btn-white { white-space: nowrap; }
/* Im Vollbild steht die Modellwahl neben PC und Mobil — dann auch auf
   deren Hoehe, sonst sitzt sie zwei Pixel tiefer in der Leiste. */
.sb-leiste .modellwahl { height: 36px; }
.btn.mit-ico { display: inline-flex; align-items: center; gap: 7px; }
.btn.mit-ico svg { width: 15px; height: 15px; flex: none; color: var(--faint); }
.btn.mit-ico:hover svg { color: var(--text); }
.btn-white.mit-ico { display: inline-flex; align-items: center; gap: 8px; }
.btn-white.mit-ico svg { width: 15px; height: 15px; flex: none; }

/* Das Zeichen so kraeftig wie das Wort daneben — Marks Ansage vom
   17.09.2026: „das plus beu neues projekt button muss so dick sein wie
   der text ‚neues projekt' im launchpad das upload icon beim
   veroeffentlichen button auch dicker so wie der text."

   Die Zeichen im Haus stehen auf 1,7. Das passt neben magerer Schrift;
   neben der halbfetten eines weissen Knopfes sieht dasselbe Zeichen
   duenn aus — ein Strich neben einem Buchstaben, der doppelt so viel
   Flaeche hat. Die Staerke steht als CSS und nicht im Zeichen selbst:
   Dasselbe Plus steht an dreissig anderen Stellen, und dort stimmt
   1,7.

   2,2 ist gemessen, nicht geschaetzt: Ein Strich von 2,2 im 24er-Raster,
   auf 17 Pixel gestellt, ergibt 1,56 Pixel — neben einem Stamm von 2,0.

   Die Regel hiess `.btn-white svg` und traf damit nur DREI der fuenf
   weissen Knoepfe — Marks Meldung vom 18.09.2026: „und icons darin auch
   und staerke der icons." Der geteilte im Launchpad und der im
   Generator heissen `.gl-los` und `.gen-los`, nicht `.btn-white`; ihre
   Zeichen standen weiter auf 1,7 und damit auf 1,13 Pixeln. Gemessen
   lagen zwischen dem duennsten und dem dicksten Zeichen in einem
   weissen Knopf achtunddreissig Prozent — neben Schrift, die in allen
   fuenf dieselbe ist. Jetzt nennt die Regel alle fuenf. */
.btn-white svg, .gl-los svg, .gen-los svg { stroke-width: 2.2; }

/* Hier stand „Neues Projekt" als Umriss statt als Flaeche — Marks
   Ansage vom 17.09.2026 und, eine halbe Stunde spaeter, seine
   Ruecknahme: „ne das mit dem button gefaellt mir nicht". Der Knopf ist
   wieder der gefuellte `.btn-white`; die kraeftigeren Zeichen darin
   bleiben. */
/* Auf einer Kante mit dem Zeichen im Knopf darueber — nicht mit dessen
   Umriss und nicht mit der Beschriftung. Der Wert ist das Innenpolster
   des Knopfes samt seiner Kante. */
/* Die Marken stehen mit ihrem Rand auf der Kante der Knoepfe darueber,
   die Zeile darunter mit ihrer Schrift auf der Schrift in den Marken —
   darum ruecken nicht beide gleich weit ein, sondern jede fuer sich. */
.sb-bilanz {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  font-size: 12px; color: var(--muted);
}
.sb-bilanz .sb-brow:not(.marken) { padding-left: 11px; }
.sb-bilanz .spacer { display: none; }
.sb-leise { color: var(--faint); }
/* Zwei Zeilen: oben die Marken — Sprache und Modell nebeneinander —,
   darunter die Zahl der Abschnitte und die Bemerkung. So kann das Modell
   nicht unter die Sprache rutschen, und der ruhige Teil steht fuer sich. */
.sb-brow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

.sb-marke {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 11px; border-radius: var(--r-teil); font-size: 12px;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted);
}
/* Das Zeichen des Anbieters vor dem Namen, dasselbe wie in der
   Modellwahl. Diese Marke kuerzt sich nicht — sie ist die kuerzere. */
.sb-marke.mit-zeichen { display: inline-flex; align-items: center; gap: 7px; flex: none; padding-left: 9px; }
.sb-marke.mit-zeichen svg { width: 12px; height: 12px; flex: none; }
.sb-marke.mit-zeichen em { font-style: normal; color: var(--text); }

/* Eine Liste, keine Kartensammlung: die Zeilen teilen sich einen Rahmen
   und trennen sich nur durch eine Linie. */
.sb-stellen {
  display: flex; flex-direction: column; gap: 18px;
  max-height: 46vh; overflow-y: auto; padding-right: 4px;
}
/* flex: none — sonst schrumpft der Flex-Container die Blöcke auf seine
   eigene Höhe und die Zeilen werden abgeschnitten.
   Kein overflow: hidden — das würde das Kleben der Überschrift aufheben;
   die Ecken runden darum die Kinder selbst. */
.sb-block { flex: none; border: 1px solid var(--border); border-radius: var(--r-flaeche); }
.sb-block > :first-child { border-radius: 11px 11px 0 0; }
.sb-block > :last-child { border-radius: 0 0 11px 11px; }
/* Die Überschrift bleibt beim Scrollen stehen — bei 354 Zeilen weiß man
   sonst nach zwei Umdrehungen nicht mehr, worin man gerade blättert. */
.sb-blockkopf {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px;
  /* Deckende Grundfarbe unter der Tönung: im Glas-Thema ist --panel
     durchscheinend, dann würden die Zeilen durch die Überschrift blitzen. */
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  border-bottom: 1px solid var(--border);
}
.sb-blockname { font-size: 12px; font-weight: 600; color: var(--text); }
.sb-blockzahl { font-size: 11.5px; color: var(--faint); }
.sb-blockhinweis {
  font-size: 11.5px; color: var(--faint); margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Der Text steht ganz links — welche Art von Stelle es ist, sagt der
   Blockkopf, und beim Darüberfahren steht es genau da. */
.sb-stelle {
  display: flex; align-items: flex-start;
  padding: 8px 14px; background: var(--raise);
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.sb-block > .sb-stelle:first-of-type { border-top: 0; }
.sb-stelle:focus-within { background: var(--panel); }
.sb-stelle input, .sb-stelle textarea {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; resize: none;
  color: var(--text); font: inherit; font-size: 13.5px; line-height: 21px;
  padding: 0; max-height: 189px; overflow-y: auto;
}

.sb-leer { padding: 28px 4px; text-align: center; color: var(--faint); font-size: 13px; }
.sb-leer.klein { padding: 14px 4px; font-size: 12.5px; }

/* Abschnitte wie im Theme-Editor: eine Liste zum Auf- und Zuklappen. */
/* Ein Strich trennt die Werkzeuge oben von der Liste darunter — sonst
   laufen Knoepfe, Bilanz und Abschnitte als eine Flaeche ineinander. */
/* Beim Wechsel des Reiters kommt die Tafel von unten herein — die
   Reiterleiste selbst bleibt stehen, sie ist ja der Bezugspunkt. */
.sb-buehne-rechts.frisch > :not(.seg) {
  animation: riseIn .3s cubic-bezier(.22, .61, .36, 1) both;
}
html[data-speed="slow"] .sb-buehne-rechts.frisch > :not(.seg) { animation-duration: .5s; }
html[data-speed="fast"] .sb-buehne-rechts.frisch > :not(.seg) { animation-duration: .18s; }
html[data-anim="off"] .sb-buehne-rechts.frisch > :not(.seg) { animation: none; }

.sb-abschnitte {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow-y: auto; padding-right: 4px;
  border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 14px;
  /* Am Ende bleibt eine Abschnittshoehe frei — sonst klebt die letzte
     Zeile am Rand und man sieht nicht, dass die Liste zu Ende ist. */
  padding-bottom: 46px;
}
.sb-abschnitt {
  flex: none; border: 1px solid var(--border); border-radius: var(--r-flaeche);
  background: var(--raise); overflow: hidden;
}
.sb-abschnitt.offen { border-color: var(--muted); }
.sb-abschnitt.aus { opacity: .5; }

.sb-abkopf { display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 2px; }
.sb-abauf {
  flex: none; width: 26px; height: 30px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--faint);
}
.sb-abauf svg { width: 15px; height: 15px; transition: transform .16s ease; }
.sb-abschnitt.offen .sb-abauf svg { transform: rotate(180deg); }

.sb-abname {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13px; text-align: left;
}
.ab-nr {
  flex: none; min-width: 18px; height: 18px; border-radius: var(--r-klein);
  display: grid; place-items: center; font-size: 10.5px;
  color: var(--faint); background: color-mix(in srgb, var(--text) 8%, transparent);
}
.ab-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-abname:hover .ab-text { color: var(--text); }

.sb-abtun { display: flex; gap: 0; flex: none; opacity: .5; transition: opacity .14s ease; }
.sb-abschnitt:hover .sb-abtun, .sb-abschnitt.offen .sb-abtun { opacity: 1; }
.sb-abtun .icon-btn:first-child svg { transform: rotate(180deg); }
.sb-abtun .icon-btn.an { color: #4c8dff; }

.sb-abinhalt {
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  display: flex; flex-direction: column;
}
.sb-abinhalt .sb-stelle { padding-left: 34px; }

/* Anpassen: Gespräch oben, Eingabe unten — wie in den anderen Chats. */
/* Anpassen füllt die Höhe: Gespräch dehnt sich, Eingabe sitzt unten —
   wie im Übersetzer und im Orakel. */
.sb-werkbank.tuning { flex: 1; min-height: 0; }
.sb-werkbank.tuning .sb-tun-verlauf { flex: 1; }
.sb-werkbank.tuning .cform { margin-top: auto; }
.sb-tun-verlauf {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 120px; overflow-y: auto; padding: 2px 4px 6px 2px;
}
.sb-tun-msg { max-width: 100%; font-size: 13.5px; line-height: 1.6; }
.sb-tun-msg.user {
  align-self: flex-end; max-width: 78%;
  background: var(--panel); border-radius: var(--r-gross); padding: 9px 14px;
}
.sb-tun-msg.fehler .sb-tun-text { color: var(--rot, #e5534b); }
.sb-tun-bericht {
  margin: 8px 0 0; padding-left: 16px;
  font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px;
}
.sb-tun-leer { margin-top: 6px; font-size: 12.5px; color: var(--faint); }
.sb-werkbank .cform.schlank { margin-top: 2px; }

.sb-bilder {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px;
  max-height: 46vh; overflow-y: auto; padding-right: 4px;
}
.sb-bild {
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-flaeche);
  background: var(--raise); padding: 10px;
}
.sb-bvor {
  flex: none; width: 60px; height: 60px; border-radius: var(--r-feld); overflow: hidden;
  background: var(--panel); display: grid; place-items: center;
}
.sb-bvor img { width: 100%; height: 100%; object-fit: contain; }
.sb-bdaten { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sb-burl {
  font-size: 12.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-bmeta { font-size: 11.5px; color: var(--faint); }
.sb-btun { display: flex; gap: 6px; align-items: center; }
.sb-burl-in {
  flex: 1; min-width: 0; height: 28px; padding: 0 10px; border-radius: var(--r-feld);
  border: 1px solid var(--border); background: transparent; outline: 0;
  color: var(--text); font: inherit; font-size: 12px;
}
.sb-hinweis code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 1px 5px; border-radius: var(--r-klein); background: var(--panel);
}

.sb-hinweis {
  margin: 2px 4px 0; font-size: 12.5px; line-height: 1.6; color: var(--faint);
}
.sb-hinweis b { color: var(--muted); font-weight: 600; }

/* Mehrere Vorlagen */
.bild-links { display: flex; flex-direction: column; gap: 10px; }
/* Eine Zeile statt eines Rasters. Bei neunzehn Vorlagen wuchs der Block
   auf fuenf Reihen und schob alles darunter aus dem Fenster; jetzt stehen
   fuenf nebeneinander und der Rest liegt seitwaerts dahinter.

   Die Breite kommt aus der Zeile selbst: viereinhalb Kacheln und vier
   Luecken ergeben genau die Breite des Bildes darueber. Die halbe ist
   Absicht — eine angeschnittene Kachel sagt, dass es weitergeht, und das
   sagt sie besser als jeder Pfeil. Bei genau fuenf sah die Zeile aus, als
   waere sie zu Ende. */
.vorlagen {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 6px;}

.vorlage {
  position: relative; width: calc((100% - 32px) / 4.5); aspect-ratio: 1; height: auto;
  border-radius: var(--r-feld); scroll-snap-align: start;
  overflow: hidden; border: 1px solid var(--border); background: var(--raise); flex: none;
}
.vorlage.erste { border-color: var(--muted); }
/* Anklickbar, und das darf man sehen — Marks Ansage vom 09.09.2026. */
.vorlage[data-act="bvgross"] { cursor: zoom-in; }
.vorlage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vorlage .an-weg {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff; opacity: 0;
}
.vorlage:hover .an-weg { opacity: 1; }
.vorlage.mehr {
  display: grid; place-items: center; color: var(--faint); cursor: pointer;
  border-style: solid;
}
.vorlage.mehr:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }

/* Optionsleiste bei Bildern */
.opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* „Freigestellt" als einzelnes Zeichen — Marks Wahl vom 13.09.2026 aus
   zwanzig Fassungen: Nummer 11. Mit Umriss heisst aus, gefuellt heisst
   an. Dasselbe Mass wie die Auswahlfelder daneben, damit die Zeile eine
   Zeile bleibt. */
/* Die Schere traegt dieselbe Pille wie die Schalter daneben — Marks
   Ansage vom 16.09.2026: „die schere soll wie projekt schaltflaeche
   aktuell sein wenn drauf drueckt dann soll der hover effekt einfach
   bleiben."

   Eingeschaltet wurde sie bis dahin zu einem weissen Block: das
   hellste Teil der ganzen Leiste fuer die kleinste Einstellung darin.
   Jetzt bleibt beim Druecken einfach der Schleier stehen, den das
   Darueberfahren zeigt — als Bild ueber der eigenen Flaeche, wie im
   ganzen Haus. */
.opt-frei {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: var(--panel);
  display: grid; place-items: center; color: var(--muted); cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.opt-frei:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.opt-frei.an {
  color: var(--text); background-image: linear-gradient(var(--hover), var(--hover));
}
.opt-frei svg { width: 15px; height: 15px; }
.opt-sel {
  appearance: none; -webkit-appearance: none;
  background-color: var(--panel); border: 1px solid var(--border); border-radius: var(--r-teil);
  color: var(--text); font: inherit; font-size: 12.5px;
  height: 34px; padding: 0 30px 0 13px; outline: 0; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* Elf Pixel breit ist das Bild, gezeichnet ist darin nur die Mitte:
     der Haken laeuft von 2,25 bis 8,75 — links und rechts steht je ein
     Rand, den man nicht sieht, aber misst. Bei zehn Pixeln Abstand sass
     die sichtbare Spitze also 13,25 vom Rand, waehrend der Text links
     bei 11,9 stand. Marks Ansage vom 12.09.2026: „das padding von der
     pill zur 2 genauso gross sein wie rechts vom pfeil zur pill." Der
     unsichtbare Rand ist herausgerechnet — 11,7 + 2,25 + 1 Rahmen sind
     dieselben 11,9 wie links. */
  background-repeat: no-repeat; background-position: right 11.7px center; background-size: 11px;
  max-width: 190px;
}

/* Auswahl mit Erklärung: Name links, Feld rechts, darunter der Hinweis
   zur gerade gewählten Möglichkeit. Alle Felder gleich breit. */
.modal.schmal { max-width: 440px; }
.wahl-block { display: flex; flex-direction: column; }
.wahl-zeile {
  display: grid; grid-template-columns: 1fr 210px; align-items: center;
  column-gap: 16px; row-gap: 3px; padding: 11px 0;
}
.wahl-zeile + .wahl-zeile { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.wahl-name { font-size: 14px; color: var(--text); }
.wahl-zeile .opt-sel { width: 100%; max-width: none; height: 36px; }
.wahl-hint {
  grid-column: 1 / -1; font-size: 12px; color: var(--faint); line-height: 1.5;
}

@media (max-width: 520px) {
  .wahl-zeile { grid-template-columns: 1fr; }
  .wahl-zeile .opt-sel { max-width: none; }
}

.opt-zahl {
  display: inline-flex; align-items: center; gap: 2px;
  height: 34px; padding: 0 6px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: var(--panel);
  font-size: 12.5px; color: var(--text);
}
.opt-zahl button {
  width: 24px; height: 24px; border-radius: var(--r-teil); border: 0; background: none;
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.opt-zahl button:hover:not([disabled]) { color: var(--text); background: var(--hover); }
.opt-zahl button[disabled] { opacity: .3; cursor: default; }
.opt-zahl b { font-weight: 600; min-width: 10px; text-align: center; }
.oz-max { color: var(--faint); margin-right: 2px; }
/* Die Zahl laesst sich eintippen — als Feld, das aussieht wie die Zahl,
   die vorher dastand: kein Rahmen, kein Grund, nur so breit wie noetig.

   „So breit wie noetig" hiess bis zum 16.09.2026 dreieinhalb Zeichen,
   weil dort dreistellige Zahlen standen. Seit die Grenze bei vier liegt,
   ist es eine Ziffer — und die stand mittig in einem Feld fuer drei, mit
   einer Luecke zum „/4" daneben. Marks Ansage: „die 1 soll direkt am /4
   sein nicht diesen abstand der da aktuell ist." Also so breit wie eine
   Ziffer, und rechts an das Zeichen geschoben. */
.oz-feld {
  width: 1.3ch; padding: 0; border: 0; background: none; outline: 0;
  font: inherit; font-weight: 600; color: var(--text); text-align: right;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.oz-feld::-webkit-outer-spin-button,
.oz-feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oz-feld:focus { color: var(--text); }

/* Ergebnis ohne Vorlage steht allein */
/* Ohne Vorlage bleibt das Bild trotzdem so breit wie eines des Paares und
   rueckt in die Mitte — sonst waere die Karte ohne Vorlage doppelt so hoch
   wie die daneben und die Reihe wieder schief. */
.werk-paar.solo { grid-template-columns: minmax(0, calc(50% - 5px)); justify-content: center; }
/* In der grossen Karte — dem Ergebnis frisch aus dem Generator — darf das
   einzelne Bild die ganze Breite nehmen; dort steht es fuer sich. */
.werk.gross .werk-paar.solo {
  grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto;
}

/* Platzhalter, solange ein Bild entsteht */
.werk.platzhalter { border-style: solid; border-color: var(--border); }
/* Die Zeile unter dem Bild traegt bei der fertigen Karte die Knoepfe und
   ist so hoch wie einer davon: siebzehn Pixel Zeichen und zweimal sechs
   Polster. Beim Platzhalter gibt es nichts zu druecken — ohne dieses
   Mass waere die Karte um genau diese Zeile niedriger und die Reihe
   ruckte, sobald das Bild ankommt. */
.werk.platzhalter .werk-zeile { min-height: calc(17px + 12px); }
.ph-bild {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-flaeche); position: relative; overflow: hidden;
  background: var(--raise); border: 1px solid var(--border-soft);
}
.ph-bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .07) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: schimmer 1.5s ease-in-out infinite;
}
.werk.platzhalter figcaption { color: var(--faint); }
html[data-anim="off"] .ph-bild::after { animation: none; }

/* ============ Glas ============ */
/* Flächen werden durchscheinend und unscharf hinterlegt; der Verlauf im
   Hintergrund bleibt dadurch sichtbar. Rahmen als feiner Lichtrand. */

html[data-theme="dark"][data-bg="glas"] {
  --sidebar: rgba(20, 20, 20, .55);
  --bg: #08080a;
  --raise: rgba(255, 255, 255, .055);
  --panel: rgba(255, 255, 255, .10);
  --panel-2: rgba(255, 255, 255, .15);
  --border: rgba(255, 255, 255, .12);
  --border-soft: rgba(255, 255, 255, .07);
  --trennung: rgba(255, 255, 255, .12);
  --trennung-soft: rgba(255, 255, 255, .07);
  --gA-base: #22242c;
  --gB-base: #16171d;
  --bg-img:
    radial-gradient(780px 520px at 12% -8%, var(--gA) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(680px 560px at 92% 108%, var(--gB) 0%, rgba(0, 0, 0, 0) 66%);
}

html[data-theme="light"][data-bg="glas"] {
  --sidebar: rgba(255, 255, 255, .55);
  --bg: #eef0f4;
  /* Der Schleier geht nach UNTEN, nicht nach oben — Marks Meldung vom
     13.09.2026: „schau mal whitemode buggt wieder bei manchen sections",
     mit einem Bild vom Launchpad, auf dem alles dieselbe Flaeche war.

     Hier stand dreimal Weiss: --raise, --panel und --panel-2 waren
     weisse Schleier auf einem Grund, der selbst fast weiss ist (#eef0f4).
     Damit war jede Flaeche, die sich abheben soll, unsichtbar: Felder,
     Knoepfe, die gewaehlte Zeile, die Spur unter dem Zeiger.

     In Hell ohne Glas ist es andersherum — Grund #ffffff, --raise
     #f4f4f4, --panel #ececec: Was sich abhebt, ist DUNKLER. Genau diese
     drei Abstaende stehen hier jetzt als Schleier, damit Glas sich wie
     Hell verhaelt und nicht wie sein Gegenteil.

     Fenster, Menue, Panel und Seitenleiste bleiben weiss: Sie sind
     Scheiben ueber dem Verlauf und haben ihre eigenen Regeln weiter
     unten. */
  --raise: rgba(18, 20, 28, .045);
  --panel: rgba(18, 20, 28, .08);
  --panel-2: rgba(18, 20, 28, .115);
  --border: rgba(20, 20, 30, .10);
  --border-soft: rgba(20, 20, 30, .06);
  --gA-base: #ffffff;
  --gB-base: #dfe4ee;
  --bg-img:
    radial-gradient(780px 520px at 12% -8%, var(--gA) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(680px 560px at 92% 108%, var(--gB) 0%, rgba(255, 255, 255, 0) 66%);
}

html[data-bg="glas"] .sidebar,
html[data-bg="glas"] .modal,
html[data-bg="glas"] .panel,
html[data-bg="glas"] .menu,
html[data-bg="glas"] .card-box,
html[data-bg="glas"] .chart-box,
html[data-bg="glas"] .metric,
html[data-bg="glas"] .stat,
html[data-bg="glas"] .werk,
html[data-bg="glas"] .cform,
html[data-bg="glas"] .side-card,
html[data-bg="glas"] .vtext,
html[data-bg="glas"] .vbtn,
html[data-bg="glas"] .cmsg.upload,
html[data-bg="glas"] .cmsg.pruef {
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--border);
}

/* Eine Scheibe in der Scheibe ist keine — Marks Meldung vom 12.09.2026:
   „schau mal bei aufbau buggt es im glasmode … diese linie mit
   hintergrund."

   Das Fenster ist auf Glas selbst eine Scheibe. Legt eine Karte darin
   noch eine zweite an, bekommt sie ihren eigenen Lichtrand und ihre
   eigene Unschaerfe — und weil `backdrop-filter` nur das aufnimmt, was
   HINTER dem Element liegt, endet sie an ihrer Kante mit einer harten
   Linie mitten im Inhalt. Genau die stand im Aufbau quer durch die
   Anzeigen.

   Also: Was in einem Fenster liegt, bleibt klar. Seine Flaeche und sein
   Rahmen behaelt es, nur die Scheibe faellt weg. */
html[data-bg="glas"] .modal .card-box,
html[data-bg="glas"] .modal .chart-box,
html[data-bg="glas"] .modal .metric,
html[data-bg="glas"] .modal .stat,
html[data-bg="glas"] .modal .werk,
html[data-bg="glas"] .modal .cform,
html[data-bg="glas"] .modal .side-card {
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
html[data-bg="glas"] .modal.up-aufbau .card-box { border: 0; }

html[data-bg="glas"] .sidebar { background: var(--sidebar); }
html[data-bg="glas"] .main { background-color: transparent; }
html[data-bg="glas"] body { background: var(--bg); }
html[data-bg="glas"] #app { background-image: var(--bg-img); background-attachment: fixed; }

/* Ein feiner Lichtrand oben — das, was Glas von einer Fläche unterscheidet */
html[data-bg="glas"] .modal,
html[data-bg="glas"] .card-box,
html[data-bg="glas"] .chart-box,
html[data-bg="glas"] .metric,
html[data-bg="glas"] .werk,
html[data-bg="glas"] .cform,
html[data-bg="glas"] .side-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 12px 34px rgba(0, 0, 0, .28);
}
html[data-theme="light"][data-bg="glas"] .modal,
html[data-theme="light"][data-bg="glas"] .card-box,
html[data-theme="light"][data-bg="glas"] .chart-box,
html[data-theme="light"][data-bg="glas"] .metric,
html[data-theme="light"][data-bg="glas"] .werk,
html[data-theme="light"][data-bg="glas"] .cform,
html[data-theme="light"][data-bg="glas"] .side-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px rgba(30, 40, 70, .10);
}

/* Vorschaukachel in den Einstellungen */
html[data-theme="dark"] .pv-win.bg-glas i { background: rgba(255, 255, 255, .10); }
html[data-theme="dark"] .pv-win.bg-glas b {
  background: radial-gradient(80% 120% at 15% 0%, #2b2e38 0%, #0b0b0d 72%);
}
html[data-theme="light"] .pv-win.bg-glas i { background: rgba(255, 255, 255, .75); }
html[data-theme="light"] .pv-win.bg-glas b {
  background: radial-gradient(80% 120% at 15% 0%, #ffffff 0%, #dfe4ee 75%);
}

/* ============ Trendtrack ============ */

.tt-liste { display: flex; flex-direction: column; gap: 14px; }
.tt-karte {
  border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--sidebar); padding: 14px 16px;
}
.tt-kopf { display: flex; align-items: center; gap: 12px; }
.tt-kopf .spacer { flex: 1; }
.tt-bild {
  width: 40px; height: 40px; border-radius: var(--r-feld); object-fit: cover; flex: none;
  background: var(--raise); border: 1px solid var(--border-soft);
}
.tt-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tt-name .tn { font-size: 15px; font-weight: 500; }
.tt-name .ts { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-kopf a.cact { display: grid; place-items: center; text-decoration: none; }

.tt-zahlen { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; }
.tt-zahlen span { display: flex; flex-direction: column; gap: 2px; }
.tt-zahlen b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-zahlen i { font-size: 11.5px; color: var(--faint); font-style: normal; }
.tt-zahlen span.minus b { opacity: .65; }

.tt-chart { margin-top: 14px; }
.tt-chart .ch-svg { height: 92px; }
.tt-chart .ch-axis { margin-top: 4px; }

@media (max-width: 620px) {
  .tt-zahlen { gap: 16px; }
  .tt-zahlen b { font-size: 15px; }
}

/* ============ Vergleichsfenster ============ */

/* Breiter seit dem 16.09.2026: Rechts steht jetzt eine Spalte mit allem,
   was zum Bild gehoert — Marks Auftrag „in diesem popup will ich rechts
   alle infos haben ueber auftrag etc". Bei 820 Pixeln blieben fuer das
   Bild sonst keine 500 mehr. */
/* Steht das Fenster schon, faehrt es beim Umschalten der Ansicht nicht
   noch einmal herein — Marks Meldung vom 18.09.2026: „wenn man von
   schieber auf nebeneinander wechselt dann blinkt das popup neu auf." */
/* Der Vorhang gehoert nicht immer zu `.ov-lage`: Wird das Fenster aus
   einem einzelnen Bild geoeffnet, steht es direkt in `#overlay`. Gesucht
   wird darum der Vorhang VOR dem Kasten, nicht der in einem bestimmten
   Kasten — sonst blitzte er beim Umschalten weiter auf. */
.modal.vgl.schonda, .scrim:has(+ .modal.vgl.schonda) { animation: none; }
.modal.vgl { width: min(1180px, calc(100vw - 40px)); }
.vgl-koerper { display: flex; gap: 22px; align-items: flex-start; }
/* Die Buehne ist in beiden Ansichten gleich hoch — Marks Ansage vom
   18.09.2026: „mach einfach so das wenn es alleine ist also schieber das
   das bild nicht hoeher ist als vergleich nebeneinander dann muss man
   auch nicht die popup groesse neu rendern und dann blinkt auch nix auf."

   Genau so: Der Schieber durfte 62vh hoch werden, das Paar nur 52vh.
   Beim Umschalten aenderte das Fenster seine Hoehe um zehn Prozent der
   Bildschirmhoehe — und ein Kasten, der springt, sieht aus wie einer,
   der neu aufgeht. Jetzt haelt die Buehne ihr Mass, und darin sitzt
   mittig, was gerade gezeigt wird. */
.vgl-buehne {
  flex: 1; min-width: 0;
  min-height: calc(52vh + 28px);
  display: grid; align-items: center;
}
.vgl-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vgl-kopf h3 { margin: 0; }
.vgl-kopf .spacer { flex: 1; }

/* Schieber — beide Bilder im selben Rahmen, Trennung als feine Linie.
   Beide liegen uebereinander und werden eingepasst; das Mass des Rahmens
   kommt vom breiteren Bild (siehe schieberBinden). Vorher trug jedes
   Bild sein eigenes Mass, und bei zwei verschiedenen Formaten stand das
   obere quer ueber dem unteren. */
.vgl-schieber {
  position: relative; width: 100%; aspect-ratio: 1;
  max-width: calc(52vh); margin-inline: auto;
  border-radius: var(--r-flaeche); overflow: hidden;
  cursor: ew-resize; touch-action: none; user-select: none;
}
.vgl-schieber img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: contain;
}
.vs-oben { clip-path: inset(0 50% 0 0); }
.vs-griff {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, .82); pointer-events: none;
}

/* Nebeneinander mit Lupe */
.vgl-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vgl-paar.solo { grid-template-columns: minmax(0, 1fr); }
/* Die Figur ist so breit wie ihr Bild und steht mittig in der Spalte —
   sonst spannt sie ueber die ganze Spalte, das Hochformat sitzt in der
   Mitte und die Beschriftung steht weit links daneben. */
.vgl-figur { margin: 0 auto; position: relative; width: fit-content; max-width: 100%; }
/* Jedes Bild in seinem eigenen Mass, nur nach oben gedeckelt. Ein fester
   Rahmen fuer beide sah zwar ordentlicher aus, liess aber neben einem
   Hochformat viel leere Flaeche stehen. */
.vgl-figur img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 52vh;
  border-radius: var(--r-flaeche); border: 1px solid var(--border-soft); background: var(--raise);
}
.vgl-figur figcaption {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin-top: 7px;
}
.lupe {
  position: absolute; width: 130px; height: 130px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
  background-repeat: no-repeat; transition: opacity .12s ease;
}

/* ---- Die Infospalte, Entwurf 22 mit dem Auftragsfeld aus 20 ----------
   Marks Wahl vom 16.09.2026: „von 22 die infos als flaechen aber das
   auftraginfo design von 20 also vom textfeld und ueber dem textfeld
   links aligned die vorlage als bild."

   Die Zeile unter den Bildern (`.vgl-fuss`) ist damit weg: Sie trug
   Auftrag, Format und Aufloesung mit Punkten getrennt in EINER Zeile,
   und bei einem langen Auftrag war der Rest abgeschnitten. */
.vgl-info {
  width: 330px; flex: none; align-self: stretch;
  display: flex; flex-direction: column; gap: 10px;
}
/* Linksbuendig ueber dem Feld — nicht mittig und nicht ueber die volle
   Breite: Die Vorlage ist hier ein Beleg, kein zweites Hauptbild. */
.vi-vorl {
  width: 92px; height: 92px; object-fit: cover; display: block;
  border-radius: var(--r-feld); background: var(--raise); align-self: flex-start;
}
.lab-klein {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
/* Entwurf 20: der Auftrag steht in einem Feld mit Umriss — er sieht aus
   wie etwas, das man anfassen kann, und hat Platz fuer mehr als eine
   Zeile. */
.vi-auftrag {
  border: 1px solid var(--schleier-3); border-radius: var(--r-flaeche);
  padding: 11px 12px; min-height: 92px;
  font-size: 13.5px; line-height: 1.55; color: var(--text);
  overflow-y: auto; max-height: 190px;
}
/* Entwurf 22: jeder Wert eine eigene kleine Flaeche, zwei nebeneinander.
   Als Zeilen mit Punkten liest man sechs Angaben nicht; als Flaechen
   findet man die eine, die man sucht. */
.vi-werte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vi-w {
  background: var(--panel); border-radius: var(--r-feld); padding: 9px 10px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.vi-w i {
  font-style: normal; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.vi-w b {
  font-weight: 400; font-size: 12.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vi-fuss {
  margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 4px;
}
.vi-fuss a.btn { text-decoration: none; display: inline-flex; align-items: center; }
/* Schmal: die Spalte rutscht unter das Bild.

   `align-items: stretch` ist hier nicht Geschmack, sondern noetig: Im
   Rahmen daneben steht `flex-start`, und in einer SPALTE richtet das die
   Breite aus — die Buehne wurde damit null Pixel breit, das Bild
   verschwand ganz und nur die Infospalte blieb stehen (gemessen am
   16.09.2026: Buehne 0 x 0). */
@media (max-width: 900px) {
  .vgl-koerper { flex-direction: column; align-items: stretch; }
  .vgl-buehne, .vgl-info { width: 100%; }
}

@media (max-width: 700px) {
  .vgl-paar { grid-template-columns: minmax(0, 1fr); }
  .vgl-figur img { max-height: 34vh; }
  .vgl-buehne { min-height: calc(34vh + 28px); }
  /* Nicht die Hoehe deckeln — das bricht das Mass des Rahmens und laesst
     leere Flaeche neben den Bildern. Die Breite tut dasselbe, ohne Schaden. */
  .vgl-schieber { max-width: calc(34vh); }
  .lupe { width: 104px; height: 104px; }
}

/* Verlauf in der Bilder-Sektion */
/* Der Fortschritt in der Fusszeile des Launchpads — Marks Wahl vom
   12.09.2026 aus fuenfzig Entwuerfen: Nummer 01, „Balken mit Zahl". Er
   sitzt links neben dem Probelauf und nimmt sich den Platz, den die
   Knoepfe uebrig lassen. */
/* Der Lauf steht in einer Pille neben dem Knopf — Marks Ansage vom
   13.09.2026: „beim Hochladenbutton bei launchpad wenn es hochlaedt
   bitte eine pill drumherum machen."

   Bis dahin lag dort ein drei Pixel hoher Strich im Leeren, quer durch
   die ganze Fussleiste, waehrend daneben ein Knopf mit Rundung und Rand
   stand. Dieselbe Hoehe und dieselbe Rundung wie der Knopf: Dann ist es
   eine Zeile aus zwei Teilen und nicht ein Knopf mit einem Strich. */
.up-fortschritt {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 120px;
  height: 38px; padding: 0 18px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: var(--raise);
}

.uf-zahl { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

/* ---------- Bilder aus einer Marke ---------------------------------
 *
 * Marks Wahl vom 12.09.2026 aus fuenfzig Entwuerfen: Nummer 28, „Zeile
 * ganz anklickbar", mit seiner Nachbesserung — „statt keine trennlinie
 * will ich karten drum herum die so aussehen wie bei anzeigen in dieser
 * gruppe … und beim auswaehlen sind sie einfach etwas heller."
 *
 * Also dieselbe Karte wie `.lp-form .lp-lzw`: Flaeche, Umriss, zehn
 * Radius, zehn Polster. Links die Vorschau der gewaehlten Bilder, rechts
 * die Liste mit den vier Zahlen. Breit, weil vier Zahlen nebeneinander
 * in einem 460er Fenster zu Spalten von sechzig Pixeln wuerden. */
.modal.gm-fenster {
  width: min(1000px, calc(100vw - 32px));
  padding: 0; --modal-pad: 0px;
}
.gm-kopf { display: flex; align-items: center; gap: 11px; padding: 16px 18px;
  border-bottom: 1px solid var(--border); }
.gm-kopf h3 { margin: 0; }
.gm-marke {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px;
  border-radius: var(--r-teil); border: 1px solid var(--border); background: var(--lp-wahl);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.gm-marke:hover { background: var(--hover); }
/* Die Seitenwahl steht neben der Marke und traegt kein Bild — sie ist
   ein Zuschnitt, keine Sache. */
.gm-marke.schlank { color: var(--muted); }
.gm-mk { width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #4a3a2a, #221a14); }
.gm-pfeil { color: var(--faint); }
.gm-leib { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 340px; }
.gm-vor { border-right: 1px solid var(--border); padding: 14px; min-width: 0; }
.gm-vor-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.gm-vor-kopf .gm-zahl { margin-left: auto; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.gm-vor-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-vor-bild { padding: 0; border: 1px solid var(--border); border-radius: var(--r-feld);
  background: var(--lp-wahl); overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.gm-vor-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-vor-bild:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.gm-haupt { padding: 14px 16px; min-width: 0; }
.gm-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gm-herkunft { font-size: 11.5px; color: var(--faint); margin-bottom: 10px; }
.gm-liste { display: flex; flex-direction: column; gap: 7px;
  max-height: 420px; overflow-y: auto; }
/* Die Karte: dieselbe wie in „Anzeigen in dieser Gruppe". */
.gm-z {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--lp-wahl); border: 1px solid var(--border); border-radius: var(--r-feld);
  padding: 10px; color: var(--text); font: inherit; cursor: pointer;
}
.gm-z:hover { background: var(--hover); }
/* „beim auswaehlen sind sie einfach etwas heller" — mehr passiert nicht:
   kein Rahmen in Weiss, kein Versatz, keine zweite Farbe. */
.gm-z.an { background: var(--panel); }
.gm-b { width: 52px; height: 52px; border-radius: var(--r-feld); object-fit: cover; display: block;
  flex: none; background: var(--platz); }
.gm-rang { font-size: 13px; font-weight: 600; width: 38px; flex: none;
  font-variant-numeric: tabular-nums; }
.gm-wert { font-size: 12.5px; color: var(--muted); flex: none; width: 86px;
  font-variant-numeric: tabular-nums; }
.gm-wert.weit { flex: 1; min-width: 0; }
.gm-wert.kurz { width: 52px; }
.gm-hak { width: 20px; height: 20px; border-radius: var(--r-feld); flex: none;
  border: 1px solid var(--rand-stark); display: grid; place-items: center; }
.gm-hak.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.gm-hak svg { width: 12px; height: 12px; }
.gm-leer { color: var(--faint); font-size: 12px; line-height: 1.5; }
.gm-leer.gross { display: grid; place-items: center; min-height: 200px; text-align: center;
  font-size: 13px; }
.gm-hinweis { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.gm-menuleer { padding: 10px 12px; font-size: 12.5px; color: var(--faint); max-width: 240px;
  line-height: 1.45; }
.gm-fuss { display: flex; align-items: center; gap: 9px; padding: 14px 18px;
  border-top: 1px solid var(--border); }
.gm-stand { font-size: 13px; color: var(--muted); }
.gm-von { color: var(--faint); }
@media (max-width: 760px) {
  .gm-leib { grid-template-columns: minmax(0, 1fr); }
  .gm-vor { border-right: 0; border-bottom: 1px solid var(--border); }
  .gm-wert:not(.weit) { display: none; }
}

/* Der Bericht nach dem Hochladen — Marks Wahl vom 12.09.2026 aus
   fuenfzig Entwuerfen: „Nimm das Balken aus zwei Teilen, aber mit
   Ueberblick der Ads welche nicht Uebernommen wurde, die Karten sollen
   so aussehen wie bei dem Feld ‚Anzeigen dieser Gruppe‘."

   Der Balken hat zwei Stuecke und keinen Grund, breiter zu sein als
   acht Pixel: Er sagt ein Verhaeltnis, keine Zahl — die steht darunter. */
/* Eigene Namen, weil es die anderen schon gab — Marks Meldung vom
   19.09.2026: „der aufbau buggt nun, diese schwarzen boxen sollen nicht
   sein."

   Das Fenster „Der Aufbau" fuehrt seit langem `.ub-kopf`, `.ub-zahl` und
   `.ub-name` fuer Gruppenzeile, Anzahl und Anzeigenname. Der Bericht kam
   mit denselben Namen dazu — und seine Regeln (dunkler Grund, 46 Pixel
   Polster, Strich rechts) legten sich ueber jede Gruppenzeile im Aufbau.
   Darum hier `ubr-` fuer den Bericht.

   Entwurf 011 aus fuenfzig — Marks Wahl vom 19.09.2026: „bau 11", er
   hiess „Zahl im Kopf gross".

   Der Kopf liegt tiefer als das Fenster und reicht bis an die Kanten;
   darum hat das Fenster selbst kein Polster mehr, sondern jeder Teil
   sein eigenes. `--modal-pad: 0` sagt dem Rollkasten dasselbe — sonst
   zieht er den Rollbalken um vierundzwanzig Pixel nach innen und der
   Kopf endet vor der Kante. */
.modal.up-bericht { width: min(520px, calc(100vw - 32px)); padding: 0; --modal-pad: 0px; }
.ubr-kopf {
  display: flex; align-items: center; gap: 16px;
  /* Rechts bleibt Platz fuer das Kreuz: Es liegt ueber dem Fenster, und
     ohne diesen Streifen liefe der Kampagnenname darunter hindurch —
     gemessen am 19.09.2026, das „X" stand mitten im Namen. */
  /* Derselbe helle Ton wie die Kopfzeile einer Aufgabenkarte — Marks
     Ansage vom 19.09.2026: „die kopfzeile soll dasselbe hellgrau haben
     wie bei todo section die kopfzeile." Dort steht `--panel` (siehe
     `.prio-brett .todo::before`); `--sidebar` war eine Stufe tiefer und
     wirkte neben dem Fenster wie ein Loch. */
  padding: 18px 46px 18px 20px; background: var(--panel);
}
/* Die Zahl steht allein und wird durch einen Strich vom Namen getrennt —
   sie ist die Antwort, der Rest ordnet ein. */
.ubr-zahl {
  text-align: center; flex: none;
  padding-right: 16px; border-right: 1px solid var(--border);
}
.ubr-zahl b {
  display: block; font-size: 34px; font-weight: 600;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.05;
}
.ubr-zahl em { display: block; font-style: normal; font-size: 10px; color: var(--faint); }
.ubr-wer { min-width: 0; }
.ubr-name {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ubr-sub { font-size: 11px; color: var(--faint); margin-top: 3px; }
.ubr-leib { padding: 16px 20px 20px; }
.ubr-luecke { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
/* Die Schritte des Laufs — dieselben Zeilen, die waehrend des Hochladens
   im Fenster oben rechts standen, nur ruhig. */
/* Entwurf 004 aus zwanzig — Marks Wahl vom 19.09.2026: „nimm einfach
   004 aus der ersten version", er hiess „Punkte mit Ring".

   Ein Punkt je Zeile: gruen fuer das Gelungene, rot fuer das Schiefe,
   und ein blasser Hof darum, damit er auf dunklem Grund nicht verloren
   wirkt. Die Toene kommen aus dem Haus (`--gruen`, `--rot`) — dieselben,
   die Gewinn und Ausgabe im Verlauf tragen.

   Die Punkte stehen oben auf der ersten Zeile: Ein Schritt, der ueber
   zwei Zeilen laeuft, haette ihn sonst in der Mitte, auf keiner von
   beiden — dieselbe Regel wie beim Kaestchen einer Aufgabe. */
.ubr-schritte { display: flex; flex-direction: column; gap: 6px; }
.ubr-s {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
.ubr-s::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 4px;
  background: var(--gruen, #3fa76a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen, #3fa76a) 22%, transparent);
}
.ubr-s.schief::before {
  background: var(--rot, #e5534b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot, #e5534b) 22%, transparent);
}
.ubr-s.schief { color: var(--text); }
/* „und 9 weitere" ist keine Auskunft — Marks Ansage vom 13.09.2026:
   „bei mit befunden scrollable statt … weitere". */
.ubr-fehl {
  margin-top: 14px; display: flex; flex-direction: column; gap: 9px;
  max-height: min(34vh, 260px); overflow-y: auto;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.ubr-f { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ubr-f b { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.up-ber-bal {
  display: flex; height: 8px; border-radius: var(--r-klein); overflow: hidden;
  background: var(--raise); margin-top: 4px;
}
.up-ber-bal i { display: block; height: 100%; }
/* Ohne Farbe — Marks Vorgabe zu den Berichten vom 13.09.2026: „ich will
   nochmal farblose designs fuer den probelauf bericht und erfolgreich
   hochgeladen." Das Verhaeltnis liest man an der Laenge, nicht am Ton:
   was steht, ist hell, was fehlt, bleibt dunkel. */
.up-ber-bal i.gut { background: var(--text); }
.up-ber-bal i.schlecht { background: color-mix(in srgb, var(--text) 24%, transparent); }
.up-ber-satz { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.up-ber-titel { margin: 18px 0 9px; font-size: 12.5px; color: var(--faint); }
.up-ber-liste { display: flex; flex-direction: column; gap: 7px; }
/* Dieselbe Karte wie im Formular. Die Regeln dort haengen an `.lp-form`,
   und ein Fenster steht nicht darin — also stehen sie hier noch einmal,
   fuer diese Liste. Angefasst wird hier nichts: Es ist ein Bericht, kein
   Knopf, darum keine Spur beim Vorbeifahren und kein Zeigefinger. */
.up-ber-liste .lp-lzw {
  background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-feld);
  padding: 10px; gap: 11px; align-items: center; max-width: none;
}
.up-ber-liste .lp-lz {
  height: auto; margin: 0; padding: 0; border-radius: 0;
  background: none; font-size: 14px; cursor: default;
}
.up-ber-liste .lp-lz:hover { background: none; }
/* Der Grund steht in derselben Farbe wie die Copy in der Vorlage. Rot
   an zwoelf Karten untereinander sagt nichts mehr — die Ueberschrift
   darueber und das rote Stueck am Balken sagen es einmal, und das
   reicht. */
.up-ber-liste .lp-lz-t em { color: var(--muted); }
.up-ber-mehr { margin-top: 9px; font-size: 12px; color: var(--faint); }

.verlauf-kopf { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.verlauf-kopf .spacer { flex: 1; }
.vk-zahl { font-size: 12.5px; color: var(--faint); }
/* So hoch wie das Auswahlfeld daneben — Marks Ansage vom 12.09.2026:
   „die pill bei uebernehmen und leeren beim hovern soll so gross sein wie
   von der reihenauswahlpill nebenan." Sie stand hier auf 28, und eine
   frueher weiter oben eingefuegte Regel mit 34 half nichts: gleiche
   Spezifitaet, und die spaetere gewinnt. Also die Zahl an der Stelle, an
   der sie steht. */
.verlauf-kopf .btn.sm {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; font-size: 12.5px;
}
.verlauf-kopf .btn.sm svg { width: 15px; height: 15px; }

/* Die Tagesgruppen des Verlaufs sind am 16.09.2026 mit Entwurf 01
   gegangen — die Wand ordnet nach Zeit, ohne eine Zeile dafuer zu
   brauchen. */

/* Abgelegte Unterlagen im Orakel */
.akten { display: flex; flex-direction: column; gap: 6px; }
.akte {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-flaeche);
  padding: 8px 10px; background: var(--raise);
}
.akte.aus { opacity: .45; }
.ak-schalter {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-feld);
  display: grid; place-items: center; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
}
.akte.aus .ak-schalter { color: var(--faint); }
.ak-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ak-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-info { font-size: 11.5px; color: var(--faint); }
.cs-akten { display: block; margin-top: 8px; font-size: 12.5px; color: var(--faint); }

/* Glas gilt auch für Fenster, Menüs und Panels — sonst bleiben genau die
   Flächen undurchsichtig, die am meisten auffallen. */
/* Die Meldung und der Schalter oben links gehoeren dazu: Beide tragen
   schon eine Unschaerfe, aber ihre Flaeche kam aus --panel — auf Glas
   sind das zehn Prozent Weiss. Gemessen: Alpha 0,10 im dunklen Glas,
   0,08 im hellen, waehrend Menue und Fenster auf 0,72 stehen. Eine
   Scheibe aus zehn Prozent ist keine; der Text stand vor dem Inhalt
   statt darauf. Sie bekommen denselben Ton wie das Menue. */
html[data-theme="dark"][data-bg="glas"] .modal,
html[data-theme="dark"][data-bg="glas"] .float-toggle,
html[data-theme="dark"][data-bg="glas"] .menu { background: rgba(22, 22, 26, .72); }
/* Und die klebenden Streifen im Fenster erben diesen Ton — deckend, weil
   der Inhalt unter ihnen hindurchlaeuft und sonst zu lesen waere. Der
   Unterschied zu --raise ist zwei Punkte; der zu --bg im Vollbild war
   vierzehn, und genau der stand als grauer Balken im Bild. */
html[data-theme="dark"][data-bg="glas"] .modal { --fenster-grund: rgb(17, 17, 21); }
html[data-theme="light"][data-bg="glas"] .modal { --fenster-grund: rgb(252, 252, 252); }
html[data-theme="dark"][data-bg="glas"] .panel { background: rgba(16, 16, 20, .78); }
html[data-theme="light"][data-bg="glas"] .modal,
html[data-theme="light"][data-bg="glas"] .float-toggle,
html[data-theme="light"][data-bg="glas"] .menu { background: rgba(255, 255, 255, .72); }
html[data-theme="light"][data-bg="glas"] .panel { background: rgba(255, 255, 255, .8); }

html[data-bg="glas"] .scrim { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* Ausser hinter einem Menue — Marks Ansage vom 13.09.2026: „ohne das der
   hintergrund geblurt wird."

   Der Schleier unter einem Menue faengt nur den Klick daneben ab; er ist
   durchsichtig und soll nichts verdecken. Auf Glas nahm er trotzdem die
   Unschaerfe mit, und dann verschwamm die ganze Seite hinter einem
   Kasten von zwei Zeilen. Ein Fenster darf das, ein Menue nicht. */
#menulayer .scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Glas hat im Vollbild nichts mehr zu zeigen.
 *
 * Ein Glasfenster lebt davon, dass etwas dahinter durchscheint. Wenn das
 * Fenster den ganzen Schirm einnimmt, ist das Dahinter die Seite, die es
 * gerade verdeckt — und man sieht ihre Kacheln und Bilder als verwischte
 * Schemen hinter dem Text. Gemessen am 03.09.2026 im Uebernehmen-Fenster:
 * lesbar, aber unruhig, und mit dem Design hat es nichts mehr zu tun.
 *
 * Vollbild heisst auch hier: Das Fenster IST die Seite. Also traegt es
 * ihren Grund — bei Glas liegt der auf #app und haengt am Schirm, darum
 * `fixed`: so sitzt der Verlauf an derselben Stelle wie vorher, und der
 * Uebergang ist nicht zu sehen. */
html[data-bg="glas"] .modal.voll {
  /* Und die klebenden Streifen darin erben ihn — sonst steht die
     Kopfzeile auf --raise (#131313) ueber einer Seite in --bg (#050505)
     und liegt als hellgrauer Balken darauf. Marks Bild vom 04.09.2026,
     16:09: „der graue kasten hinter Ins Projekt uebernehmen ist immernoch
     da obwohl ich zu dir sagte". Er hatte recht — mein erster Versuch
     ersetzte #131313 durch var(--raise), und das IST #131313. Eine
     Aenderung, die nichts aenderte. */
  --fenster-grund: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background-color: var(--bg) !important;
  background-image: var(--bg-img);
  background-attachment: fixed;
  box-shadow: none;
}

/* Einstellungen in Reitern */
.set-tabs { margin: -4px 0 18px; flex-wrap: wrap; }

/* ============ Einstellungen nach Entwurf 11 ============
   Marks Wahl vom 17.09.2026 aus fuenfzig Entwuerfen: „11 einzueins
   uebernehmen." Der Entwurf hiess „Schiene links" — die Bereiche
   untereinander links, der Inhalt rechts.

   Alle Masse kommen aus dem Entwurf, keins ist gerundet oder
   nachgebessert: Schiene 132 breit, Knopf 30 hoch, Zeichen 15, Zeile
   dazwischen 2, Polster 10 — und rechts 12 auf 14 mit 12 Abstand
   zwischen den Zeilen. */
.modal.set-fenster { padding: 0; overflow: hidden; }
/* Die Ueberschrift traegt ihr Polster jetzt selbst — das Fenster hat
   keins mehr, sonst liefe die Schiene nicht bis an die Kante. */
.modal.set-fenster > h3 {
  margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0;
}
.set-zwei { display: flex; align-items: stretch; }
.set-schiene {
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  flex: 0 0 132px; border-right: 1px solid var(--border);
}
.set-schiene button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  height: 30px; padding: 0 9px; border: 0; border-radius: var(--r-feld);
  background: none; color: var(--muted); font-size: 12px; text-align: left;
}
.set-schiene button:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
/* Gestapelt auf dem Grund, nicht als blosse Farbe — sonst scheint im
   Glas-Thema die Seite durch den gewaehlten Bereich. */
/* Nur die Farbe, nicht auf den Grund gestapelt — Marks Meldung vom
   17.09.2026: „optimier einstellungen auch auf themes wie glas weil da
   hats gebuggt mit den flaechen."

   Hier stand das Hausmuster fuer Dinge, die ueber der SEITE schweben:
   der Schleier zweimal als Verlauf, darunter der Seitengrund. Menues
   und Meldungen brauchen das. Auf Glas sind `--raise` und `--panel`
   aber durchsichtige Schleier, und das Muster legt #08080a darunter —
   mitten in ein Fenster, das selbst eine Scheibe ist. Heraus kam ein
   schwarzer Klotz in der Scheibe.

   In einem Fenster ist die Scheibe schon da. Der Schleier gehoert
   direkt darauf, und in jedem anderen Thema ist `--panel` ohnehin eine
   deckende Farbe. */
.set-schiene button.on { background: var(--panel); color: var(--text); }
.set-schiene button svg { width: 15px; height: 15px; flex: none; }
.set-zwei > .set-list { flex: 1; min-width: 0; padding: 12px 14px; }

/* Die Zeilen rechts: Aufschrift klein darueber, darunter die Wahl. Im
   Entwurf traegt die Zeile kein Polster und keine Linie — den Abstand
   macht allein die Luecke zwischen ihnen. */
.set-fenster .set-list { display: flex; flex-direction: column; gap: 12px; }
/* Gruppenueberschriften gibt es im Entwurf nicht — er zeigt nur eine
   Handvoll Zeilen. Das Haus hat sechs Gruppen allein unter
   „Darstellung", und ohne Ueberschrift waere das eine Liste aus
   vierzig Zeilen ohne Gliederung. Sie bleiben also, aber im Mass des
   Entwurfs: klein, leise, mit der Linie als Trennung — und ohne die
   dreissig Pixel Abstand, die den 12er-Takt der Zeilen sprengen. */
/* Im Mass des Entwurfs: zehneinhalb Punkt, keine Linie. Die Linie
   stammt aus der alten Fassung — im Entwurf trennt allein der Abstand,
   und bei sechs Gruppen ergaeben sechs Striche ein Gitter. */
.set-fenster .set-group {
  margin: 6px 0 0; padding-top: 6px; font-size: 10.5px; border-top: 0;
}
.set-fenster .set-group:first-child { margin-top: 0; padding-top: 0; }
.set-fenster .set-block { padding: 0; border-bottom: 0; }
.set-fenster .set-block .set-label {
  font-size: 11.5px; color: var(--muted); font-weight: 400; margin-bottom: 6px;
}
/* Entwurf 16 aus fuenfundzwanzig fuer diesen Bereich — Marks Wahl vom
   17.09.2026: „darstellung 16." Die Wahl steht nicht mehr als Reihe von
   Kacheln, sondern als Liste: eine Zeile je Moeglichkeit, das
   Vorschaubild klein davor, die Markierung rechts.

   Der Gewinn ist die Lesbarkeit langer Namen: „Tiefschwarz" und
   „Graphit" standen in zweiundsechzig Pixeln abgeschnitten
   nebeneinander; in einer Zeile stehen sie ganz da. */
.set-fenster .swatches { display: flex; flex-direction: column; gap: 2px; }
.set-fenster .swatch {
  flex-direction: row; align-items: center; gap: 10px; width: 100%;
  height: 34px; padding: 0 8px; border-radius: var(--r-feld); font-size: 12.5px;
}
.set-fenster .swatch:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.set-fenster .swatch .pv { width: 26px; height: 20px; flex: none; }
.set-fenster .sw-name { flex: 1; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Markierung: ein Ring, gewaehlt mit einem Punkt darin. Der Punkt
   kommt aus einem Farbverlauf, nicht aus einem inneren Schatten in der
   Fensterfarbe — der haette auf Glas die Scheibe durchstossen. */
.set-fenster .swatch::after {
  content: ''; flex: none; width: 14px; height: 14px; border-radius: var(--r-pille);
  border: 1.5px solid var(--schleier-4);
}
.set-fenster .swatch.on::after {
  border-color: var(--text);
  background: radial-gradient(circle at 50% 50%, var(--text) 0 3.5px, transparent 3.5px);
}
/* Der Knopf selbst ist unsichtbar: Der Rahmen sitzt am Vorschaubild,
   nicht um Bild und Wort herum. Gewaehlt wird durch einen Ring um das
   Bild — im Entwurf zwei Pixel in der Textfarbe. */
.set-fenster .swatch {
  border: 0; background: none; color: var(--muted); min-width: 0;
}
.set-fenster .swatch .pv { border: 1px solid var(--border); border-radius: var(--r-feld); }
.set-fenster .swatch.on { color: var(--text); border-color: transparent; }
.set-fenster .swatch.on .pv { border-color: var(--schleier-4); }
/* Die Fusszeile traegt ihr Polster ebenfalls selbst. */
.modal.set-fenster .modal-actions {
  margin: 0; padding: 12px 14px; border-top: 1px solid var(--border);
}
.set-list { max-height: min(58vh, 520px); overflow-y: auto; padding-right: 4px; }
.set-list .set-group:first-child { margin-top: 0; }

/* ============ Store Builder ============ */

.sb-form { margin-bottom: 24px; }
.sb-zeile { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.sb-feld {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px; border-radius: var(--r-teil);
  background: var(--feld-grund); border: 1px solid var(--border); color: var(--faint);
}
.sb-feld svg { flex: none; width: 15px; height: 15px; }
.sb-feld input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 14.5px;
}
.sb-feld input::placeholder { color: var(--faint); }

.sb-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sb-eintrag {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 8px 14px; border-radius: var(--r-flaeche); cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.sb-eintrag:hover { background: var(--hover); color: var(--text); }
.sb-eintrag.on { border-color: var(--text); color: var(--text); background: var(--raise); }

/* Das Kreuz liegt in der oberen rechten Ecke des Eintrags und erscheint
   erst unter dem Zeiger — sichtbar nur, wenn man es meint. */
.sb-eintrag-halter { position: relative; display: flex; }
.sb-weg {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); color: var(--muted);
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  opacity: 0; transform: scale(.8);
  transition: opacity .14s ease, transform .14s ease, color .14s ease, background .14s ease;
}
.sb-weg svg { width: 12px; height: 12px; }
.sb-eintrag-halter:hover .sb-weg, .sb-weg:focus-visible { opacity: 1; transform: none; }
.sb-weg:hover { background: var(--hover); color: var(--text); }
html[data-anim="off"] .sb-weg { transition: none; }
.sb-url { font-size: 13.5px; }
.sb-meta { font-size: 11.5px; color: var(--faint); }

.sb-vorschau { border: 1px solid var(--border); border-radius: var(--r-gross); overflow: hidden; background: var(--sidebar); }
.sb-leiste { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.sb-leiste .spacer { flex: 1; }
.sb-leiste a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.sb-titel { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.sb-leiste .btn-white[disabled] { opacity: .4; cursor: default; }
/* Vorschau links, Werkzeuge rechts — beim Anpassen sieht man immer,
   was man tut. */
/* align-items: stretch (Vorgabe) — sonst ist die rechte Spalte nur so hoch
   wie ihr Inhalt und die Eingabe kann nicht am Fuß stehen. */
.sb-buehne { display: grid; grid-template-columns: minmax(0, 1fr) 400px; }
.sb-buehne-links {
  border-right: 1px solid var(--border-soft); padding: 14px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.sb-buehne-rechts {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px 18px; min-width: 0; min-height: 0;
  /* Die Höhe setzt sbSkalieren — hier nur dafür sorgen, dass nichts
     überläuft, sondern der Verlauf darin scrollt. */
  overflow: hidden;
}
.sb-buehne-rechts .sb-werkbank { padding: 0; }
.seg.voll { width: 100%; }
.seg.voll .seg-btn { flex: 1; }

/* Der Rahmen tut so breit wie das Gerät und wird hineingerechnet —
   der Halter behält dabei die sichtbare Höhe. */
/* Der Halter gibt den Platz vor, der Kasten ist so groß wie die
   verkleinerte Seite und steht darin mittig. */
.sb-rahmen-halter { display: flex; justify-content: center; align-items: flex-start; min-height: 0; }
.sb-geraet { overflow: hidden; border-radius: var(--r-feld); background: #fff; }
/* Im Mobil-Modus sieht man, dass es ein Gerät sein soll. */
.sb-geraet.mobil {
  border-radius: var(--r-gross); border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.sb-rahmen { display: block; height: 72vh; border: 0; background: #fff; transform-origin: 0 0; }
/* Die Höhe rechnet sbSkalieren aus — die vh-Werte sind nur der
   Ausgangspunkt, bis das Skript einmal gelaufen ist. */
/* Auswahl: die Fläche nimmt Zeiger an, der Rahmen darunter nicht mehr. */
.sb-geraet { position: relative; }
.sb-geraet.waehlt { cursor: crosshair; }
.sb-geraet.waehlt .sb-rahmen { pointer-events: none; }
.sb-buehne-links.stift .sb-geraet { box-shadow: 0 0 0 2px #4c8dff; }

.sb-kasten {
  position: absolute; box-sizing: border-box;
  border: 1.5px solid #4c8dff; background: rgba(76, 141, 255, .12);
  cursor: move;
}
.sb-ecke {
  position: absolute; width: 12px; height: 12px; border-radius: var(--r-klein);
  background: var(--bg); border: 1.5px solid #4c8dff;
}
.sb-ecke.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.sb-ecke.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.sb-ecke.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.sb-ecke.se { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* Was gerade gemeint ist */
/* Wunschzeile: Plus links, Textfeld daneben — beide im selben Rahmen. */
.sb-wunschzeile {
  /* Alles hängt an der ersten Textzeile, nicht an der Mitte der Blase —
     sonst schwebt die Pille neben einem Text, der oben anfängt. */
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px;
  border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--raise); padding: 6px 12px 6px 6px;
}
.sb-wunschzeile .feldtext {
  flex: 1 1 200px; min-width: 140px; border: 0; background: none; padding: 6px 0;
}
.sb-wunschzeile .sb-plus { align-self: flex-start; height: 30px; margin-top: 2px; }
.sb-wunschzeile .feld-pille { margin-top: 5px; }

/* Beilagen sitzen als kleine Pille links im Feld — sie dürfen die Blase
   nicht höher machen, darum feste Höhe und kein Umbruch im Namen. */
.feld-pille {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  max-width: 170px; height: 24px; padding: 0 3px 0 7px;
  border-radius: var(--r-teil); background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text); font-size: 12px; line-height: 1;
}
.feld-pille > svg { width: 12px; height: 12px; flex: none; color: var(--muted); }
/* Ein Bild zeigt sich selbst — die Vorschau darf links aus der Pille
   herausragen, ohne sie höher zu machen. */
.feld-pille:has(> img) { padding-left: 3px; }
.feld-pille > img { width: 18px; height: 18px; border-radius: var(--r-klein); object-fit: cover; flex: none; }
.feld-pille > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feld-pille > button {
  flex: none; width: 17px; height: 17px; border: 0; padding: 0; border-radius: var(--r-klein);
  background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.feld-pille > button:hover { color: var(--text); background: var(--hover); }
.feld-pille > button svg { width: 12px; height: 12px; }

/* Plus zum Beilegen — nur das Zeichen, kein Knopf drumherum. */
.sb-plus {
  flex: none; align-self: flex-end; width: 26px; height: 34px;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--faint);
  transition: color .14s ease, transform .14s ease;
}
.sb-plus:hover { color: var(--text); transform: scale(1.12); }
.sb-plus svg { width: 18px; height: 18px; }

.sb-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-anhang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 8px; border-radius: var(--r-feld); font-size: 11.5px;
  border: 1px solid var(--border); background: var(--raise); color: var(--muted);
}
.sb-anhang img { width: 18px; height: 18px; border-radius: var(--r-klein); object-fit: cover; }
.sb-anhang > svg { width: 15px; height: 15px; }

.sb-mark {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px; border-radius: var(--r-feld);
  border: 1px solid color-mix(in srgb, #ffb020 45%, transparent);
  background: color-mix(in srgb, #ffb020 10%, transparent);
  font-size: 12.5px; color: var(--text);
}
.sb-mark svg { width: 15px; height: 15px; color: #ffb020; flex: none; }
.sb-mark-wahl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.an { color: #4c8dff; background: color-mix(in srgb, #4c8dff 14%, transparent); }
.seg-btn.mit-ico { display: inline-flex; align-items: center; gap: 6px; }
.seg-btn.mit-ico svg { width: 15px; height: 15px; }

/* Vollbild: die Vorschau legt sich über alles, die Werkzeuge bleiben daneben. */
.sb-vorschau.voll {
  position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0;
  display: flex; flex-direction: column; background: var(--bg);
}
.sb-vorschau.voll .sb-buehne { flex: 1; min-height: 0; }
/* Im Vollbild gibt das Fenster die Höhe vor, nicht der Inhalt — darum
   streckt sich der Halter, und sbSkalieren rechnet die Seite hinein. */
.sb-vorschau.voll .sb-buehne-links {
  height: 100%; min-height: 0; display: flex; flex-direction: column;
}
.sb-vorschau.voll .sb-rahmen-halter { flex: 1; min-height: 0; }
.sb-vorschau.voll .sb-buehne-rechts { height: 100%; overflow-y: auto; }
.sb-vorschau.voll .sb-tun-verlauf { max-height: none; flex: 1; }
.sb-vorschau.voll .sb-stellen,
.sb-vorschau.voll .sb-bilder { max-height: calc(100vh - 210px); }
/* Im Vollbild ist Platz fuer mehr Abschnitte — nur unten bleibt eine
   Handbreit frei, damit die letzte Zeile nicht am Rand klebt. */
.sb-vorschau.voll .sb-abschnitte { max-height: calc(100vh - 330px); }

/* ---------- Projekte ---------- */
/* Die Reiterleiste steht über der jeweiligen Seite und darf im
   Übersetzer nicht mitschrumpfen. */
.proj-reiter { flex: none; padding: 0 40px; margin-top: 20px; }
/* Unterbereiche von „Projekte" in der Seitenleiste — die Einrückung
   allein zeigt die Zugehörigkeit, ganz ohne Strich. */
/* Derselbe Abstand zwischen allen Eintraegen — Marks Ansage vom
   13.09.2026: „orakel soll zu todo so einen abstand haben wie orakel zu
   uebersicht, alle tabs sollen diesen abstand haben zueinander."

   Gemessen davor: null Pixel zwischen den Traegern, zwei vor der ersten
   Unterzeile und sechs danach. Drei Abstaende fuer dieselbe Sache. Jetzt
   traegt jeder Eintrag seine zwei, und die Huelle der Unterpunkte traegt
   keine mehr. */
.side-scroll .nav-item { margin-bottom: 2px; }
.nav-unter { margin: 0; animation: unterAuf .16s ease both; }
.nav-item.unter { padding-left: 32px; font-size: 13px; }
.nav-item.unter .ico { width: 16px; }
.nav-item.unter .ico svg { width: 15px; height: 15px; }
@keyframes unterAuf { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
html[data-anim="off"] .nav-unter { animation: none; }
@media (max-width: 700px) { .proj-reiter { padding: 0 18px; } }
/* ============================================================
   Projektübersicht — eine Karte je Projekt, ohne Farben.
   Der Stand steht als Wort in der Metazeile; ein farbiger Punkt und
   grün-rote Zahlen sagten nichts, was die Zahl nicht selbst sagt.
   ============================================================ */
.pk-gitter {
  /* Breiter als vorher: Auf 340 Pixeln stand alles uebereinander und die
     Karte wurde zu einer langen Spalte. Mit 460 hat der Inhalt Platz,
     nebeneinander zu stehen — und zwei Karten passen weiterhin nebeneinander,
     sobald der Bildschirm es hergibt. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  /* Alle Karten einer Reihe gleich hoch — Marks Ansage vom 17.09.2026:
     „wenn ein projekt kleiner ist in der uebersicht weil es noch keine
     werte und somit kein chart hat soll es nicht so nen abstand zum
     naechsten haben, ganz normaler abstand wie sonst auch."

     Hier stand `align-items: start` mit der Begruendung, eine kurze
     Karte solle kein leeres Feld bekommen. Der Preis dafuer stand
     woanders und war hoeher: Die Rasterzeile ist so hoch wie ihre
     hoechste Karte, und unter der kurzen klaffte die ganze Differenz —
     bei einem frischen Projekt ohne Kurve war das mehr als die Karte
     selbst. Das leere Feld steht jetzt IN der Karte statt darunter. */
  gap: 16px;
}

.pk {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--raise); padding: 20px 22px;
  transition: border-color .16s ease;
  cursor: pointer;
}
/* Was in der Karte sein eigenes Ziel hat, sagt das auch: die Copys tragen
   den Zeiger der Karte, die Bilder und Seiten ihren eigenen. */
.pk .pk-mehr, .pk .pk-streifen button, .pk .pk-seite { cursor: pointer; }
/* Der Umriss tritt hervor, sobald der Zeiger auf der Karte steht. Ohne das
   lag eine Karte so ruhig da wie der Grund dahinter, und dass die ganze
   Karte anklickbar ist, sah man ihr nicht an. Nur der Rand — die Flaeche
   zu heben wuerde die Zahlen darauf mitziehen. */
.pk:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
/* Marks Meldung vom 23.09.2026: „bei projektkarten, tasks und bestimmt
   noch andere, wenn man hovert gibt es noch umriss."

   Gemessen: Es ist kein Rand — die Karte hat keinen mehr. Es ist die
   KANTE zwischen dem Kopfstreifen (`--panel`, #1c1c1c) und dem Koerper
   der Karte (`--raise`, #131313). In Ruhe ist der Unterschied klein und
   gewollt (Entwurf 41, „eine Stufe hellere Flaeche am Kopf"); beim
   Hinfahren hellte aber nur der Koerper auf, und der Sprung wurde so
   gross, dass er wie ein Strich aussah.

   Jetzt hellt der Streifen mit. Dasselbe tut das Haus schon bei
   `.list-row:hover .tile` — ein Kind mit eigener Flaeche geht beim
   Hinfahren mit, sonst schneidet es sich aus dem Schleier heraus. */
.pk:hover .pk-kopf { background-image: linear-gradient(var(--hover), var(--hover)); }
html[data-anim="off"] .pk { transition: none; }
/* Der Abstand nach unten kommt von der Karte, nicht vom letzten Abschnitt —
   sonst ist er mal 17, mal 20 Pixel, je nachdem, was zuletzt kam. */
.pk > *:last-child { padding-bottom: 0; margin-bottom: 0; }

.pk-kopf {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  background: none; border: 0; padding: 0 0 16px; text-align: left;
  color: var(--text); font: inherit; cursor: pointer;
}
.pk-name {
  font-size: 16.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* Ohne Hervorhebung beim Ueberfahren: Die Karte ist als Ganzes anklickbar,
   und ein Aufleuchten einzelner Woerter behauptete, es ginge um sie. */
.pk-meta {
  font-size: 12px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* Der Zeitraum steht in der Metazeile und erbt von ihr — nur die Ziffern
   bekommen Tabellenbreite, damit sie nicht tanzen. */
.pk-zeitraum { font-variant-numeric: tabular-nums; }

/* Eine Zahl fuehrt, eine zweite ordnet sie ein, der Rest belegt sie.
   Drei Ebenen statt fuenf gleichwertiger Kaestchen — man sieht auf einen
   Blick, wie das Projekt steht, und liest den Rest nur, wenn man will. */
/* Die Zahlen bekommen ein eigenes Feld. Vorher standen sie frei zwischen
   Namen und Copys und gehoerten optisch zu beidem und zu nichts. */
.pk-zahlen {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
  gap: 4px 24px; width: 100%; margin-bottom: 16px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 0; border-radius: var(--r-flaeche); padding: 14px 16px; font: inherit;
  text-align: left; cursor: inherit;
}
.pk-zahlen > span { display: flex; align-items: baseline; gap: 7px; }
.pk-zahlen i {
  font-style: normal; font-size: 10.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.pk-fuehrt b {
  font-size: 23px; font-weight: 600; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.pk-zweit b {
  font-size: 15px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Der Beleg beginnt in der dritten Spalte und faellt auf schmalen Karten
   in die naechste Zeile — dort steht er dann ueber die ganze Breite. */
.pk-beleg {
  grid-column: 1 / -1; margin-top: 4px;
  font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums;
}

/* Der Platz, den die gestreckte Karte gewinnt, faellt dorthin, wo sonst
   die Kurve steht — nicht als Polster unter den Zahlen. */
.pk-leer { margin: 0 0 16px; font-size: 12.5px; color: var(--faint); flex: 1; }

/* Jeder weitere Abschnitt hängt an einer Haarlinie, nicht in einem Kasten. */
/* Jeder Abschnitt haengt an einer Haarlinie und hat oben wie unten
   denselben Abstand — vorher sass die Ueberschrift enger an der Linie als
   am eigenen Inhalt, und die Karte wirkte gedraengt. */
.pk-teil {
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.pk-teil-kopf {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.pk-teil-kopf svg { width: 12px; height: 12px; flex: none; }
.pk-mehr {
  margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 10.5px; letter-spacing: .05em; color: var(--faint);
}
.pk-mehr.still { cursor: default; }
.pk-mehr:not(.still):hover { color: var(--text); }

.pk-copys { display: flex; flex-direction: column; gap: 9px; }
.pk-copy {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Name, unter dem die Copy abgelegt wurde — ohne ihn sehen drei
   Zeilen Text gleich aus. */
.pk-tag {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px;
  margin-right: 6px; padding: 1px 6px 1px 5px; border-radius: var(--r-feld);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text); font-size: 11px; line-height: 1.5;
}
.pk-tag svg { width: 12px; height: 12px; color: var(--faint); }

/* Umbrechen statt herausragen: in einer schmalen Spalte stehen die
   sechs Bilder in zwei Reihen. */
.pk-streifen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pk-streifen button { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.pk-streifen img {
  width: 48px; height: 48px; border-radius: var(--r-feld); object-fit: cover;
  border: 1px solid var(--border); display: block;
}
.pk-streifen button:hover img { background-image: linear-gradient(var(--hover), var(--hover)); }

/* Bis zu drei Seiten nebeneinander, jede mit ihrer Art darunter —
   Standbild, nicht zum Bedienen. */
/* Feste Breite, keine 1fr-Spalten: das Standbild wird mit einem festen
   Faktor verkleinert, bei elastischen Spalten bliebe rechts Weiß stehen. */
.pk-seiten { display: flex; gap: 8px; }
.pk-seite {
  display: flex; flex-direction: column; gap: 5px; width: 104px; flex: none;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left;
}
.pk-schau {
  display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-feld); background: #fff;
  display: grid; place-items: center; color: #bbb;
}
.pk-schau > svg { width: 20px; height: 20px; }
.pk-seite:hover .pk-schau { background-image: linear-gradient(var(--hover), var(--hover)); }
.pk-schau iframe {
  width: 1280px; height: 960px; border: 0; pointer-events: none;
  transform: scale(.08125); transform-origin: 0 0; grid-area: 1 / 1;
  justify-self: start; align-self: start;
}
.pk-art {
  font-size: 11px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-seite:hover .pk-art { color: var(--text); }

/* Die Zahl gehört zum Titel, nicht in die Knopfreihe. */
.titel-zahl {
  margin-left: 10px; font-size: 15px; font-weight: 500; color: var(--faint);
  vertical-align: 3px;
}

/* Verweise auf andere Bereiche im Journal */
.proj-links { display: flex; flex-direction: column; gap: 8px; }
.proj-link {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: var(--r-flaeche); text-align: left;
  border: 1px solid var(--border); background: var(--raise);
  color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.proj-link:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.proj-link > svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.pl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta { font-size: 11.5px; color: var(--faint); }
.pl-vor { display: flex; gap: 4px; flex: none; }
.pl-vor img { width: 30px; height: 30px; border-radius: var(--r-feld); object-fit: cover; }

@media (max-width: 1100px) {
  .sb-buehne { grid-template-columns: minmax(0, 1fr); }
  .sb-buehne-links { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .sb-rahmen { height: 52vh; }
}
@media (max-width: 700px) {
  .sb-zeile { flex-direction: column; }
  .sb-leiste { flex-wrap: wrap; }
  .sb-titel { max-width: 100%; }
  .sb-rahmen { height: 46vh; }
}

/* Fortschritt im Store Builder — kein Kasten, sondern eine Spur nach
   unten: Punkt je Schritt, Linie dazwischen. */
/* Rechts so weit einruecken wie das Innenpolster der Knoepfe darueber:
   die Zeiten enden dann auf der Kante der Beschriftung „Pruefen", nicht
   auf der ihres Umrisses. */
.sb-lauf { margin-top: 16px; padding-left: 4px; padding-right: 15px; }
/* Feste Hoehe fuer die fuenf sichtbaren Zeilen — sonst wuchs und schrumpfte
   der Kasten bei jedem Schritt, und der ganze Block wippte auf und ab.
   Die Zeilen sammeln sich unten, neue kommen von dort dazu. */
.sb-schritte {
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Feste Hoehe, nicht nur eine Mindesthoehe: waehrend eine Zeile
     ausblendet, stehen kurz sechs im Kasten — er wuerde sonst genau dabei
     aufspringen, und das war das Wippen. */
  height: 162px; overflow: hidden;
}

.sb-schritt {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  padding: 0 0 14px 22px; font-size: 13px; color: var(--faint);
  animation: sbRein .26s ease both;
}
.sb-schritt:last-child { padding-bottom: 8px; }
@keyframes sbRein { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }

/* Linie zwischen den Punkten */
.sb-schritt::before {
  content: ''; position: absolute; left: 4px; top: 12px; bottom: 0;
  width: 1px; background: color-mix(in srgb, var(--text) 14%, transparent);
}
.sb-schritt:last-child::before { display: none; }

.sb-punkt {
  position: absolute; left: 0; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}
.sb-schritt.jetzt { color: var(--text); }
.sb-schritt.jetzt .sb-punkt {
  background: var(--accent-soft);
  animation: sbPuls 1.4s ease-in-out infinite;
}
@keyframes sbPuls { 0%, 100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1) } }

.sb-text { flex: 1; min-width: 0; }
.sb-sek { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
/* Alle Zeiten stehen in einer Spalte am rechten Rand — die der Schritte
   und die Gesamtzeit darunter auf derselben Kante. Vorher endete die
   Gesamtzeit ein Stueck weiter aussen, weil ihr Kasten den ganzen Rest
   der Zeile nahm. */
.sb-lauf .sb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-lauf .sb-sek, .sb-lauf .sb-zeit { flex: none; text-align: right; }

/* Der Balken ist die Linie. Darueber lag bisher noch ein Haarstrich — in
   derselben Farbe, ueber dieselbe Breite, ein paar Punkte hoeher. Zweimal
   dasselbe uebereinander, und die Schritte ruckten dadurch vom Balken ab.
   Die Spur des Balkens traegt die Trennung jetzt allein, und er sitzt
   direkt unter den Schritten — so wie im Generator, wo es immer so war. */
.sb-fuss {
  display: flex; align-items: center; gap: 14px; padding-left: 22px;
  margin-top: 6px;
}
/* Der Zaehler nimmt nur so viel Platz, wie er braucht. Vorher teilte er
   sich die Zeile zu gleichen Teilen mit dem Balken — der begann dadurch
   erst in der Mitte und sah aus wie ein kurzer Strich am rechten Rand.
   Jetzt laeuft der Balken ueber die ganze Breite wie im Generator. */
.sb-zaehler {
  font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums;
  flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-zaehler:empty { display: none; }
.sb-zeit { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }

/* Die aelteste Zeile geht sichtbar: sie blasst an Ort und Stelle aus und
   zieht ihre Hoehe zusammen, damit der Rest nachrueckt statt zu springen.
   Kein Wandern nach oben — das sah aus, als loese sie sich nach oben auf. */
/* Die aelteste Zeile geht ohne Bewegung: Das Hinausgleiten sah aus, als
   ruckte die ganze Liste nach oben. */
.sb-schritt.raus { display: none; }

/* Ist der Lauf vorbei,
zieht sich der ganze Kasten zurueck,
statt in
   einem Bild zu verschwinden. */
.sb-lauf.weg {
  animation: laufWeg .34s cubic-bezier(.4, 0, .2, 1) forwards;
  overflow: hidden; pointer-events: none;
}
@keyframes laufWeg {
  from { opacity: 1; max-height: var(--h, 420px); }
  60%  { opacity: 0; }
  to   { opacity: 0; max-height: 0; margin-top: 0; }
}

html[data-anim="off"] .sb-lauf.weg { animation: none; display: none; }

html[data-anim="off"] .sb-schritt { animation: none; }
html[data-anim="off"] .sb-schritt.jetzt .sb-punkt { animation: none; opacity: .9; }

/* Hinweis auf ältere Schritte */
.sb-schritt.aelter { color: var(--faint); opacity: .6; }
.sb-schritt.aelter .sb-punkt { background: color-mix(in srgb, var(--text) 14%, transparent); }

/* ============================================================
   Design-Systeme (Store Builder, Reiter „Design")
   ============================================================ */
.ds-liste { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }

.ds-karte {
  border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--card); padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 16px;
}

.ds-kopf { display: flex; align-items: center; gap: 8px; }
.ds-name {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--text);
  font: 600 17px/1.3 inherit; padding: 4px 0;
}
.ds-name:focus { outline: none; }
.ds-name::placeholder { color: var(--muted); font-weight: 500; }

.ds-quelle {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  color: var(--muted); text-decoration: none; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: var(--r-teil); padding: 4px 10px;
}
.ds-quelle:hover { color: var(--text); }
.ds-quelle svg { width: 12px; height: 12px; }

.ds-sub { margin: -8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.ds-reihe { display: flex; flex-direction: column; gap: 9px; }
.ds-reihe .feldtext {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-flaeche);
  background: var(--feld-grund); color: var(--text); padding: 9px 12px; font: inherit; font-size: 14px;
}
.ds-reihe .feldtext:focus { outline: none; }

/* Farben */
.ds-farben { display: flex; flex-wrap: wrap; gap: 10px; }
.ds-marke {
  display: flex; flex-direction: column; gap: 5px; min-width: 92px;
}
.ds-marke .ds-feld {
  height: 46px; border-radius: var(--r-flaeche);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.ds-marke b { font-size: 12.5px; font-weight: 600; }
.ds-marke em { font-style: normal; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Schrift */
.ds-fam { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.ds-fam b { color: var(--text); font-weight: 600; margin-right: 4px; }

.ds-skala { display: flex; flex-direction: column; gap: 8px; }
.ds-zeile { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ds-zeile em {
  font-style: normal; font-size: 11.5px; color: var(--muted);
  flex: none; width: 132px; text-align: right;
}
.ds-zeile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Maße */
.ds-masse { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.ds-radius { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ds-radius > span {
  width: 58px; height: 40px; background: var(--raise);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.ds-radius em, .ds-abstand em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ds-abstand { display: flex; align-items: center; gap: 6px; }
.ds-abstand i { height: 10px; border-radius: var(--r-klein); background: color-mix(in srgb, var(--text) 24%, transparent); }

/* Schatten */
.ds-schatten { display: flex; flex-wrap: wrap; gap: 16px; }
.ds-schatten > span { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ds-schatten i { width: 56px; height: 36px; border-radius: var(--r-feld); background: var(--raise); display: block; }
.ds-schatten em { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* Komponenten */
.ds-komp { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ds-komp li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.ds-komp b { flex: none; width: 148px; font-weight: 600; }
.ds-komp span { color: var(--muted); min-width: 0; }

.ds-ton { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* Vorlagen */
.ds-bilder { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-bild {
  position: relative; width: 74px; height: 74px; border-radius: var(--r-flaeche);
  overflow: hidden; border: 1px solid var(--border); background: var(--raise);
  display: grid; place-items: center; color: var(--muted);
}
.ds-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Auch das ist „Bild hochladen" und sah gestrichelt aus. Die Kachel
   behaelt Rundung und Mass ihrer Nachbarn im Streifen — gestrichelt ist
   im Haus der leere PLATZ, nicht der Griff.

   Und der Pfeil darin ist so leise wie drueben: `.ds-bild` faerbt mit
   `--muted`, weil eine Kachel mit Bild darin ein Kreuz traegt, das man
   sehen soll. Der Griff zum Hochladen gehoert zu den anderen drei und
   nimmt darum `--faint` wie sie. */
.ds-bild.neu { cursor: pointer; color: var(--faint); }
.ds-bild.neu svg { width: 18px; height: 18px; }
.ds-bild .an-weg {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  border-radius: var(--r-feld); display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text); border: 0; cursor: pointer; opacity: 0;
  backdrop-filter: blur(6px);
}
.ds-bild:hover .an-weg { opacity: 1; }
.ds-bild .an-weg svg { width: 12px; height: 12px; }

.ds-neu { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; }
.ds-neu svg { width: 15px; height: 15px; }

@media (max-width: 700px) {
  .ds-zeile { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ds-zeile em { width: auto; text-align: left; }
  .ds-komp li { flex-direction: column; gap: 2px; }
  .ds-komp b { width: auto; }
}

/* ============================================================
   Seiten des Projekts im Journal-Panel
   ============================================================ */
.jseiten { display: flex; flex-wrap: wrap; gap: 10px; }
.jseite {
  display: flex; flex-direction: column; gap: 5px; width: 148px; flex: none;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left;
}
.js-schau {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-flaeche); background: #fff; color: #bbb;
}
.js-schau > svg { width: 22px; height: 22px; }
.jseite:hover .js-schau { background-image: linear-gradient(var(--hover), var(--hover)); }
.js-schau iframe {
  width: 1280px; height: 960px; border: 0; pointer-events: none;
  transform: scale(.11562); transform-origin: 0 0;   /* 148 / 1280 */
  grid-area: 1 / 1; justify-self: start; align-self: start;
}
.js-art { font-size: 12px; color: var(--text); }
.js-url {
  font-size: 11px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jseite:hover .js-url { color: var(--muted); }

/* ============================================================
   Projekte als Tabelle
   ============================================================ */
.proj-tabelle { margin-top: 18px; overflow-x: auto; }
.proj-tabelle .list-head,
.proj-tabelle .list-row { gap: 8px; min-width: max-content; }
.proj-tabelle .list-head { font-size: 12.5px; letter-spacing: .02em; }
.proj-tabelle .list-head .h { cursor: default; }
.proj-tabelle .list-head .h:hover { background: none; color: var(--muted); }
.proj-tabelle .list-row { min-height: 48px; font-size: 13.5px; cursor: pointer; }
.proj-tabelle .cellwrap {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted);
}
.proj-tabelle .cellwrap.rechts,
.proj-tabelle .list-head .h.rechts { justify-content: flex-end; text-align: right; }
.proj-tabelle .cellwrap.rechts { font-variant-numeric: tabular-nums; }
.pt-zeile { color: var(--text); font-weight: 500; }

/* Haken im Anzeigen-Menue: fester Platz, damit die Namen nicht springen. */
.mi-haken { width: 15px; flex: none; display: grid; place-items: center; }
.mi-haken svg { width: 12px; height: 12px; color: var(--text); }

/* Summe ueber der Projektuebersicht — etwas ruhiger als im Journal, sie
   ist hier Kopfzeile und nicht der Hauptinhalt. */
/* ============================================================
   Die Uebersicht nach Entwurf 06 — Marks Wahl vom 13.09.2026 aus
   fuenfzig ganzen Seiten: „06 aber ohne farben so viele nur rot/gruen
   und die charts sollen auch echt funktionieren und alle/laufend/ruht
   als switch runder pill switch und ohne roas oben im dashboard nur
   bei den einzelnen projekten."

   Zwei Baender ueber die volle Breite, darunter der Schalter und die
   Karten. Die Baender ziehen sich mit negativem Rand aus der Polsterung
   der Seite heraus — eine Linie, die vor dem Rand aufhoert, ist keine
   Trennlinie, sondern ein Strich.
   ============================================================ */
/* Die Baender bleiben in der Bahn der Seite — Marks Ansage vom
   13.09.2026: „hier in der section auch links rechts abstand die
   trennlinien ragen zu weit raus."

   Sie zogen sich mit negativen Raendern aus der Polsterung heraus, damit
   die Trennlinie von Kante zu Kante lief. Das sah im Vollbild richtig
   aus; seit die Seite wieder in ihrer Bahn steht, ragten sie darueber
   hinaus. Jetzt endet die Linie dort, wo auch die Karten enden. */
.proj-band { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--border); }
.proj-band.proj-erste { padding-top: 0; }
@media (max-width: 700px) {
  .proj-band { padding: 14px 0; }
}
.proj-titel {
  margin: 0; flex: none; font-size: 21px; font-weight: 600; letter-spacing: -.025em;
  display: inline-flex; align-items: baseline; gap: 8px;
}
/* Die Werkzeuge stehen jetzt IN der Kopfzeile, nicht darunter — darum
   kein Abstand nach oben mehr. */
.proj-band .proj-werkzeuge { margin-top: 0; }

/* Das zweite Band: drei Zahlen, dann die Kurve darunter. */
.proj-held { padding-top: 18px; padding-bottom: 14px; }
.proj-held-zeile { display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; }
/* Entwurf 04: Die Plakette steht unter der grossen Zahl, in einer eigenen
   Zeile. Die drei Zahlen fluchten weiter unten auf einer Linie — haenge
   ich sie IN den Zahlenblock, bricht genau diese Linie. Marks Ansage vom
   14.09.2026: „die umsaetze sollen in einer bahn bleiben unten am boden
   wie aktuell, demnach musst du einfach nur mehr platz schaffen von den
   umsatz zahlen zum chart damit dieses tag reinpasst." */
.proj-trendzeile { margin-top: 12px; }
.proj-held-zeile .spacer { flex: 1; min-width: 0; }
.proj-eti {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.proj-zahl {
  font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
  margin-top: 7px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.proj-wert.gross .proj-zahl { font-size: 36px; letter-spacing: -.045em; margin-top: 9px; }
/* Die einzige Zahl mit Vorzeichen. */
/* Was nicht gemessen wurde, steht leiser da — es ist kein Ergebnis. */
.pk-zahlen.ohne .pk-wert b { color: var(--faint); }
.proj-hinweis {
  font-size: 11.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 8px;
}
/* Die beiden einzigen Farben der Seite. */
.proj-lauf {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px;
  border-radius: var(--r-feld); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.proj-lauf.auf { color: var(--gruen, #3fa76a); background: color-mix(in srgb, var(--gruen, #3fa76a) 14%, transparent); }
.proj-lauf.ab  { color: var(--rot, #e5534b);   background: color-mix(in srgb, var(--rot, #e5534b) 14%, transparent); }

/* Die Kurve. Das Bild wird in der Breite gedehnt, darum steht die
   Strichstaerke im SVG auf non-scaling-stroke. */
.proj-kurve { position: relative; margin-top: 14px; }
.proj-kurve-bild { display: block; width: 100%; height: 86px; }
.proj-kurve [data-ptag] { cursor: crosshair; }
.proj-strich {
  /* Der Strich unter dem Zeiger folgt dem Thema. Hier hing er an einer
     Variablen fuer den starken Rand, die es nirgends gibt, mit einem
     mittelgrauen Rueckfallwert dahinter — also galt immer dieses Grau:
     im hellen Thema ein fast schwarzer Balken quer durchs Bild, im
     dunklen kaum zu sehen. Die vierte Sprosse der Schleierleiter ist
     die fuer „markiert". */
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--schleier-4);
  pointer-events: none; transform: translateX(-.5px);
}
.proj-punkt {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text); pointer-events: none; transform: translate(-3.5px, -3.5px);
}
.proj-lesen {
  position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-feld);
  padding: 6px 9px; pointer-events: none; white-space: nowrap; z-index: 3;
  box-shadow: var(--shadow);
}
.proj-lesen b { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.proj-lesen i { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); margin-top: 1px; }
/* Die dritte Zeile: Was der Balken sonst noch traegt — Adspend und
   Gewinn. Bei der Linie bleibt sie leer und nimmt keinen Platz; das
   macht `hidden`, nicht eine zweite Regel. */
.proj-lesen u {
  display: block; text-decoration: none; font-style: normal;
  font-size: 10.5px; color: var(--faint); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* Die vierte Zeile: der Gewinn, allein. Er steht in der Schriftfarbe
   statt im Grau der Posten — nicht weil er wichtiger waere, sondern weil
   er eine andere Sorte Zahl ist: Die Posten sind Abfluesse, er ist der
   Rest. Normal gesetzt, nicht fett: Fett traegt schon die Zahl oben. */
.proj-lesen em {
  display: block; font-style: normal; font-weight: 400;
  font-size: 10.5px; color: var(--text); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.proj-lesen[hidden], .proj-strich[hidden], .proj-punkt[hidden] { display: none; }
.proj-achse {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--faint); margin-top: 6px;
}
/* Der Platzhalter, solange die feine Reihe noch unterwegs ist — Marks
   Meldung vom 20.09.2026: „bei allen charts ist oft eine linie da, es
   braucht zeit um zu laden bis die spikes kommen."

   Eine Kurve aus lauter Nullen behauptet, es sei nichts passiert. Diese
   Flaeche behauptet nichts: Sie atmet leise und verschwindet, sobald
   Zahlen da sind. Wer keine Bewegung will, bekommt sie still. */
.proj-warte {
  border-radius: var(--r-feld);
  background: linear-gradient(90deg,
    var(--raise) 0%, var(--panel) 42%, var(--raise) 84%);
  background-size: 260% 100%;
  animation: projWarte 1.5s ease-in-out infinite;
  opacity: .5;
}
@keyframes projWarte { from { background-position: 130% 0 } to { background-position: -130% 0 } }
@media (prefers-reduced-motion: reduce) { .proj-warte { animation: none } }
.proj-keine-kurve { margin: 14px 0 2px; font-size: 12.5px; color: var(--faint); }

/* Der Schalter ueber der Liste, als runde Pille. */
/* Entwurf 40: Zeitfenster links, Stand rechts, der Rest dazwischen
   leer. */
.proj-reiterzeile { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px;
  flex-wrap: wrap; }
/* Entwurf 07 aus fuenfzig — Marks Wahl vom 15.09.2026: „aktuell mag ichs
   nicht das alles 3 pills sind." Der Zeitraum ist als Klappmenue kuerzer
   und nimmt der Zeile eine von drei gleichen Formen. Er traegt dieselbe
   Hoehe und Rundung wie die Pillen daneben, damit die Zeile eine Linie
   behaelt. */
.pz-menue {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 38px; padding: 0 15px; border: 0;
  border-radius: var(--r-knopf); background: var(--raise);
  font: inherit; font-size: 12.5px; color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: color .14s ease, background-color .14s ease;
}
/* Der Schleier liegt UEBER der eigenen Flaeche, wie ueberall im Haus.
   Hier stand er als `color-mix(… , var(--raise))` — dieselbe Helligkeit,
   aber als ERSATZ der Flaeche statt als Schicht darauf. Wer die ruhende
   Farbe aendert, muesste dann zwei Stellen aendern. */
.pz-menue:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.pz-menue i { display: inline-flex; align-items: center; color: var(--faint); }
.pz-menue i svg { width: 12px; height: 12px; display: block; }

/* Ohne Bahn — Marks Ansage vom 16.09.2026: „probier mal statt
   hintergrund bei den switches das es wie bei todo aussieht bei
   alle/offen/fertig."

   Die beiden Schalter trugen eine eigene Flaeche mit Umriss, in der die
   gewaehlte Taste noch einmal eine Flaeche hatte: zwei Toene fuer eine
   Auskunft. Die Reiter im To-Do machen es mit einem — der gewaehlte
   traegt `--panel`, die uebrigen stehen auf nichts.

   Der Schleier beim Zeigen folgt der Hausregel: Wer keine eigene
   Flaeche hat, bekommt ihn als Farbe; der gewaehlte, der eine hat, als
   Bild darueber — das steht schon bei `.seg-btn`. */
/* Entwurf 050 aus fuenfzig — Marks Wahl vom 18.09.2026: „mach 050". Er
   hiess „Alles Pillen, gleich hell": Suche, Schalter und Zeichen tragen
   dieselbe Flaeche, und die Zeile liest sich als eine Reihe statt als
   vier verschiedene Dinge nebeneinander.

   Damit kommt die Bahn unter den zwei Zeichen zurueck, die am
   16.09.2026 gegangen war („probier mal statt hintergrund bei den
   switches das es wie bei todo aussieht"). Der Grund von damals faellt
   hier weg: Dort standen DREI Pillen ohne Bahn nebeneinander, und die
   Bahn machte aus einer Auskunft zwei Toene. Jetzt traegt die Suche
   daneben dieselbe Flaeche — ohne Bahn waeren die zwei Zeichen das
   einzige Stueck der Zeile, das auf nichts steht.

   Die Hoehe bleibt: drei Pixel Polster plus zwei Tasten von
   zweiunddreissig ergeben wieder achtunddreissig. */
.proj-reiterzeile .seg.proj-zeit {
  background: none; border-color: transparent; padding: 0; gap: 4px;
}
.proj-reiterzeile .seg.proj-form {
  background: var(--raise); border-color: transparent;
  padding: 3px; gap: 2px; border-radius: var(--r-knopf);
}
/* Dasselbe Mass wie das Klappmenue daneben — Marks Ansage vom
   16.09.2026: „die schaltflaechen muessen genauso gross sein wie bei der
   aktiv/inaktiv auswahl, also die daneben." Sie standen auf 28 Pixel
   Hoehe neben einem Knopf von 38; in einer Zeile aus drei Schaltern sah
   der eine aus wie eine Ueberschrift und die anderen wie Text.

   Die Zeichen-Tasten der Kurvenform bekommen dieselbe Hoehe und dazu
   dieselbe Breite: Ein Zeichen in einer 38 Pixel breiten Pille steht
   mittig, eines in einer 55 Pixel breiten sieht verloren aus. */
.proj-reiterzeile .proj-zeit .seg-btn,
.proj-reiterzeile .proj-form .seg-btn {
  border-radius: var(--r-teil); color: var(--muted);
  height: 38px; font-size: 12.5px;
}
.proj-reiterzeile .proj-zeit .seg-btn { padding: 0 15px; }
/* Das Zeichen sitzt MITTIG — das war der eigentliche Fehler hinter
   Marks zwei Meldungen vom 16.09.2026 („der skala switch ist verbuggt",
   dann „die icons sind nicht mehr zentriert und mit der box voelligst
   durcheinander").

   `.seg-btn` ist fuer Text gebaut: `display: flex` mit
   `align-items: center` und `text-align: center`. Text richtet sich
   danach, ein Kind-Element nicht — ohne `justify-content` klebt das
   Zeichen am linken Rand. Gemessen: null Pixel links, zweiundzwanzig
   rechts. Erst dadurch sah die Taste aus, als saesse ihr Kasten
   irgendwo neben ihrem Zeichen.

   Und rund, wie alles andere in der Zeile — Marks Ansage im selben
   Atemzug: „nun edged statt rund". */
.proj-reiterzeile .proj-form .seg-btn {
  width: 32px; height: 32px; padding: 0; border-radius: var(--r-teil);
  justify-content: center;
}
.proj-reiterzeile .proj-zeit .seg-btn.on,
.proj-reiterzeile .proj-form .seg-btn.on {
  background: var(--panel); color: var(--text);
}

.proj-reiterzeile .spacer { flex: 1; min-width: 0; }

/* Die Karte aus Entwurf 06 — drei Teile: Kopfzeile, drei Zahlen, Kurve.
   Die Regeln stehen weit hinten im Stylesheet, weil .pk-kopf, .pk-name
   und .pk selbst weiter oben stehen und sonst gewaennen. */
.pk { padding: 16px 18px; }
.pk-kopf {
  flex-direction: row; align-items: center; gap: 11px;
  /* `width: 100%` steht weiter oben und schlaegt die negativen Raender:
     Der Streifen blieb so breit wie der Inhalt und ruckte nur nach links.
     Hier faellt die feste Breite, dann traegt ihn die Spalte selbst. */
  width: auto; align-self: stretch;
  margin: -16px -18px 14px; padding: 14px 18px;
  background: var(--panel);
  border-radius: var(--r-gross) var(--r-gross) 0 0;
}
/* Entwurf 41 aus fuenfzig — Marks Wahl vom 15.09.2026: „Karte mit
   Kopfstreifen." Name und Angaben stehen auf einer eigenen, eine Stufe
   helleren Flaeche am Kopf der Karte; darunter, auf dem Ton der Karte
   selbst, die Zahlen und die Kurve. Damit trennt eine Flaeche, was vorher
   nur Abstand trennte.

   (Kurz war hier Entwurf 50 eingebaut — Marks Korrektur: „die projekt
   karte die ich haben wollte war doch 41".) */
.pk-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.pk-titel .pk-name { font-size: 16.5px; }
.pk-kopf .proj-lauf { flex: none; align-self: center; }
.pk-werte { display: flex; gap: 26px; flex-wrap: wrap; }
.pk-werte.ohne .pk-wert b { color: var(--faint); }

/* Das Bild steht in derselben Spalte wie der Text darueber — Marks
   Ansage vom 14.09.2026: „bei den karten soll der chart erst dort
   anfangen wo der text anfaengt, aligned."

   Vorher lief es als Fuss ueber die ganze Karte hinweg, mit negativen
   Raendern bis an die Rundung. Damit fing es achtzehn Pixel weiter
   links an als jede Zeile darueber. Jetzt haelt es dieselbe Kante, und
   die Rundung braucht es nicht mehr: Es stoesst an keine Ecke. */
.pk-kurve { margin: 14px 0 0; overflow: visible; }
.pk-kurve .proj-kurve-bild { height: 54px; }

/* Hinweis, wenn die Seiten nur in einem anderen Ordner liegen. */
.sb-woanders { margin: 20px 0 0; font-size: 13px; color: var(--faint); }

/* Woran ein To-Do haengt: Projekt und darin der Bereich. Ohne Projekt nur
   das Zeichen, damit die Zeile nicht von leeren Pillen zerschnitten wird. */
/* Zeichen und Name, aber ohne Pille — kein Umriss, keine Fuellung. */
.tproj {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  justify-self: start; max-width: 100%;
  height: 30px; padding: 0 6px; border-radius: var(--r-feld);
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.tproj span { overflow: hidden; text-overflow: ellipsis; }
/* Nur das Zeichen traegt die volle Schriftfarbe. Der Name daneben liegt
   auf derselben Stufe wie die Prioritaet in der Nachbarspalte — beides ist
   Beiwerk zur Aufgabe und soll gleich laut sein. */
.tproj svg { width: 15px; height: 15px; color: var(--text); }
.tproj.on { color: var(--muted); }
.todo:not(:hover) .tproj:not(.on) { opacity: 0; }
.tproj:focus-visible { opacity: 1; }

/* Zwei Werkzeuge am Ende brauchen ihre Breite: Schritt und Papierkorb. */
@media (max-width: 900px) { .todo { grid-template-columns: 20px minmax(0, 1fr) auto 84px auto 60px; } }

.sb-woanders .btn { margin-left: 10px; vertical-align: -2px; }

/* Hier stand der Fortschritt beim Generieren: die Liste der Schritte,
   der Balken und die Uhr daneben. Marks Ansage vom 18.09.2026: „beim
   generieren soll es bitte nicht mehr diese meldung anzeigen also lade
   fortschritt mach das weg."

   Was laeuft, sagen jetzt zwei Stellen statt dreier — der Knopf
   („Abbrechen" mit drei Punkten) und die Anzeige oben rechts
   („Generator 0 von 10"). Mit dem Kasten ist auch `bSteigt` gegangen,
   das Hereinsteigen seiner Zeilen. */

/* Waehrend Shopify die App prueft: ein Satz, der sagt, warum der
   gewoehnliche Weg heute nicht traegt — und dass der andere sofort geht.
   Kein Warnton: es ist kein Fehler, sondern eine Wartezeit. */
/* Zwei Karten nebeneinander: erst waehlen, dann tun. Gleich hoch, gleich
   gebaut, nur die erste traegt den weissen Knopf — sie ist die, die auf
   jedem Laden ankommt. */
/* Titel und Adressfeld stehen ausserhalb des rollenden Kastens und
   bleiben dadurch oben — ohne sticky, das hier ohnehin nichts halten
   koennte: Das Fenster rollt nicht selbst, es hat einen eigenen Kasten
   dafuer. */
/* Der feste Kopf eines Fensters: er steht ueber dem rollenden Kasten und
   traegt dessen Polster selbst, damit der Text darunter auf derselben
   Linie beginnt. */
.modal-kopf { flex: none; padding: 0 0 14px; }
.modal-kopf h3 { margin: 0; }

.shop-wahl {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; margin-top: 14px;
  align-items: start;
}
@media (max-width: 780px) { .shop-wahl { grid-template-columns: 1fr; } }

.shop-karte {
  border: 1px solid var(--border-soft); border-radius: var(--r-flaeche); padding: 15px 16px 16px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
/* Die empfohlene traegt einen etwas festeren Rand — genug, um sie zuerst
   anzusehen, zu wenig, um die andere wie eine Warnung aussehen zu lassen. */
.shop-karte.empfohlen { border-color: var(--border); }

/* An der Grundlinie ausgerichtet, nicht an der Oberkante: die Ziffer und
   die erste Zeile des Titels sollen auf derselben Linie sitzen. */
.shop-karte-kopf { display: flex; gap: 9px; align-items: baseline; margin-bottom: 12px; }
.shop-karte-kopf b { display: block; font-size: 14px; font-weight: 600; }
.shop-karte-kopf span { display: block; font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 2px; }
/* Kein Kreis mehr. Eine Ziffer in einem 22-Pixel-Kreis sass nie ganz
   mittig — sie hing an der Schriftlinie, der Kreis an der Kastenmitte,
   und zwischen beiden liegt ein knappes Pixel, das man sieht. Ohne
   Kreis gibt es nichts, worin sie schief stehen koennte. */
.shop-nr {
  flex: none; font-size: 13px; font-weight: 600; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.shop-karte.empfohlen .shop-nr { color: var(--text); }

.shop-karte-text { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.shop-karte .shop-schritte { margin: 0; padding-left: 18px; }
.shop-karte .shop-schritte li { margin-bottom: 8px; font-size: 12.5px; line-height: 1.55; }
.shop-karte .shop-schritte b { font-weight: 600; color: var(--text); }
.shop-karte .shop-schritte em { font-style: normal; color: var(--faint); }
.shop-direkt { margin-left: 4px; font-size: 11.5px; white-space: nowrap; }
/* Was nicht kam, mit Grund und einem zweiten Anlauf daneben. */
/* Im Fensterkopf steht ein h3 wie in jedem anderen Fenster — dort darf es
   keinen unteren Abstand mitbringen, den die Kopfzeile schon setzt.
   Und es weicht den Schaltern daneben nicht: Die nahmen sich den Platz,
   bis „Bilder erzeugen" auf zwei Zeilen stand. */
.page-head h3 {
  margin: 0; flex: none; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 8px;
}

.sb-gen-fehlt { display: block; }
.sb-gen-fehlt .btn-mini { display: inline-block; width: auto; margin-left: 8px; }
/* Der Weg ins Dashboard steht ueber den Schritten — dort beginnt er. */
.shop-dash { width: 100%; justify-content: center; height: 36px; text-decoration: none; margin-bottom: 14px; }
/* Breiter als ein gewoehnliches Fenster: Bei 460 Pixeln brechen die
   Schritte nach vier Woertern um, und aus fuenf Zeilen werden zwoelf —
   das Fenster wird hoch statt uebersichtlich. */
.modal.shop-fenster { width: min(640px, calc(100vw - 32px)); }

.shop-warum {
  margin: 14px 0; padding: 11px 13px; border-radius: var(--r-flaeche);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
/* Einspaltig heisst: die Schritte duerfen atmen. */
.shop-bruecke-schritte { margin: 0; padding-left: 20px; }
/* Zeichen und Wort mittig im Knopf, nicht linksbuendig nebeneinander. */
.shop-los {
  width: 100%; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.shop-los svg { width: 18px; height: 18px; flex: none; }
/* Der nachgereichte Weg klappt im selben, einspaltigen Fenster auf —
   fuer zwei Spalten ist dort kein Platz, der Knopf brach mitten im Wort um. */
.shop-wort .shop-zwei { grid-template-columns: 1fr; gap: 14px; }
/* Die Rechte stehen linksbuendig unter ihrem Satz. Zentriert brach die
   Liste in der Mitte und sah aus wie zwei halbe Zeilen. */
/* Nicht mehr an der Karte festgemacht — die gibt es nicht mehr, und der
   Knopf stand danach mittig statt links wie sein Satz darueber. */
.shop-schritte .btn-mini {
  display: block; width: 100%; margin-top: 6px; text-align: left;
  white-space: normal; line-height: 1.5;
}
/* Ein Kasten, den man druecken kann: Zeichen rechts, eigener Grund, und
   beim Ueberfahren hebt er sich. Ohne das las man ihn als Textkasten und
   tippte vier Rechte ab — von denen man drei falsch schreibt. */
/* Die Karten-Regel darueber setzt display:block und ist spezifischer —
   ohne denselben Weg im Selektor faellt das Flex-Layout aus, und das
   Zeichen rutscht als Inline-Element unter den Text. */
.btn-mini.kopierbar,
.shop-schritte .btn-mini.kopierbar {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px 7px 11px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  transition: border-color .14s ease, background .14s ease;
}
.btn-mini.kopierbar > span { flex: 1; min-width: 0; }
.btn-mini.kopierbar:hover { background: var(--hover); }
.kopier-zeichen {
  flex: none; display: grid; place-items: center; color: var(--faint);
}
.kopier-zeichen svg { width: 15px; height: 15px; display: block; }
.btn-mini.kopierbar:hover .kopier-zeichen { color: var(--text); }
/* Kurz nach dem Druck: gruen, dann wieder wie vorher. */
.btn-mini.kopiert { border-color: #3fa76a; }
.btn-mini.kopiert .kopier-zeichen { color: #3fa76a; }

.shop-hinweis {
  margin: 12px 0 0; padding: 11px 13px; border-radius: var(--r-flaeche);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}

/* ============================================================
   Gewohnheiten
   ============================================================ */

/* Der Tag, um den es geht — Pfeile, Name, Stand. Er steht im Kasten und
   nicht im Seitenkopf: Er gehoert zu den Zeilen darunter, nicht zum
   Bereich, und beim Blaettern soll das Auge nicht nach oben springen. */
.hb-tagleiste {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
.hb-tagleiste .spacer { flex: 1; }
.hb-tagleiste .icon-btn:first-child svg { transform: rotate(90deg); }
.hb-tagleiste .icon-btn:nth-child(3) svg { transform: rotate(-90deg); }
.hb-tagname { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
.hb-tagname b { font-size: 14.5px; font-weight: 600; }
.hb-tagname span { font-size: 11.5px; color: var(--faint); }

.hb-liste { display: flex; flex-direction: column; }

/* Eine Zeile je Feld: Name mit Ziel, Eingabe, Balken, Wochenschnitt,
   Serie. Feste Spalten, damit die Zahlen ueber alle Zeilen hinweg
   untereinander stehen — sonst liest man jede Zeile einzeln. */
.hb-zeile {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: minmax(140px, 1.4fr) 108px minmax(60px, 1fr) 76px 40px;
  padding: 11px 0;
}
.hb-zeile + .hb-zeile { border-top: 1px solid var(--border-soft); }

.hb-name {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left;
}
.hb-titel {
  font-size: 13.5px; font-weight: 600; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-ziel { font-size: 11px; color: var(--faint); white-space: nowrap; }
.hb-name:hover .hb-titel { text-decoration: underline; text-underline-offset: 3px; }

/* Der Punkt traegt den Stand des Tages. Er ist das einzige Farbsignal in
   der Zeile — faerbte man auch Balken und Zahl, saehe eine verfehlte
   Vorgabe aus wie ein Fehler statt wie ein Dienstag. */
.hb-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}
.hb-zeile.gut .hb-punkt { background: #3fa76a; }
.hb-zeile.daneben .hb-punkt { background: color-mix(in srgb, var(--text) 45%, transparent); }

.hb-feld { display: inline-flex; align-items: center; gap: 6px; }
.hb-feld input {
  width: 74px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-teil);
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; text-align: right;
}
.hb-feld input:focus { outline: 0; }
.hb-feld em { font-style: normal; font-size: 11.5px; color: var(--faint); }

/* Ja oder nein braucht kein Zahlenfeld — ein Kasten, den man trifft. */
.hb-ja {
  width: 34px; height: 34px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: var(--panel);
  display: grid; place-items: center; color: var(--text); cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.hb-ja:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.hb-ja.on { background: #3fa76a; border-color: #3fa76a; color: #fff; }
.hb-ja svg { width: 15px; height: 15px; }

.hb-balken {
  height: 5px; border-radius: var(--r-teil); overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.hb-balken span {
  display: block; height: 100%; border-radius: var(--r-teil);
  background: color-mix(in srgb, var(--text) 45%, transparent);
  transition: width .2s ease;
}
.hb-zeile.gut .hb-balken span { background: #3fa76a; }

.hb-zahl {
  font-size: 12.5px; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hb-serie {
  justify-self: end; min-width: 28px; height: 24px; padding: 0 7px;
  display: grid; place-items: center; border-radius: var(--r-feld);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--faint); border: 1px solid transparent;
}
.hb-serie.an {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Das Gitter: eine Zeile je Feld, eine Spalte je Tag. Es zeigt nur, ob
   das Ziel stand — den Wert traegt der Tooltip. Wer die Reihe
   ueberfliegt, sucht Muster, keine Zahlen. */
.hb-gitter { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; }
.hb-gzeile {
  display: grid; gap: 4px; align-items: center;
  grid-template-columns: 108px repeat(21, minmax(14px, 1fr));
}
.hb-gkopf { margin-bottom: 2px; }
.hb-gtag {
  font-size: 9.5px; color: var(--faint); text-align: center;
  font-variant-numeric: tabular-nums;
}
.hb-gtag.hier { color: var(--text); font-weight: 600; }
.hb-gname {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-zelle {
  height: 22px; border-radius: var(--r-klein); border: 1px solid transparent; padding: 0;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  cursor: pointer; transition: transform .1s ease;
}
.hb-zelle:hover { transform: scale(1.12); }
.hb-zelle.gut { background: #3fa76a; }
.hb-zelle.daneben { background: color-mix(in srgb, var(--text) 24%, transparent); }
.hb-zelle.hier { border-color: var(--muted); }

.hb-legende { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); }
.hb-legende i {
  width: 10px; height: 10px; border-radius: var(--r-klein); display: inline-block;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.hb-legende i.gut { background: #3fa76a; }
.hb-legende i.daneben { background: color-mix(in srgb, var(--text) 24%, transparent); }
.hb-legende span + i { margin-left: 8px; }

/* Schmal wird aus der Zeile ein Block: Balken und Wochenschnitt gehen,
   der Rest bleibt. Fuenf Spalten auf einem Telefon waeren fuenf
   Buchstaben je Spalte. */
@media (max-width: 780px) {
  .hb-zeile { grid-template-columns: 1fr auto 40px; gap: 10px; }
  .hb-balken, .hb-zahl { display: none; }
  .hb-gzeile { grid-template-columns: 84px repeat(21, minmax(10px, 1fr)); }
}

/* ============================================================
   Anzeigen und Brandtracker (Trendtrack)
   ============================================================ */
/* Ansichtswahl und Hinweis unter dem Titel: sie gehoeren zur Liste, nicht
   zum Kopf. Oben rechts steht nur, was ueberall oben rechts steht. */
/* Der Befund nach dem Uebernehmen borgt sich den Bericht des
   Uebersetzers — pruef-zahlen, pruef-band, pruef-liste stehen schon da.
   Eigene Klassen braucht nur, was es dort nicht gibt: die Quellzeile
   unter einem Bildbefund, der kein Vorher und Jetzt hat. */
.btpruef { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
/* Und aus demselben Grund auch die Liste im Uebersetzer nicht. */
.pp-quelle { font-size: 11.5px; color: var(--faint); }

/* Ansichtswahl und Hinweis unter dem Titel: sie gehoeren zur Liste, nicht
   zum Kopf. Oben rechts steht nur, was ueberall oben rechts steht. */
/* Der Befund nach dem Uebernehmen: erst der Balken, dann die Punkte —
   schwere zuerst, weil man die Liste von oben liest und selten zu Ende. */
.btpruef { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* Und die dritte Liste in demselben Fenster ebenso: Der Rahmen bleibt,
   das eigene Rollfeld nicht. */
.btpruef-liste {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: var(--r-flaeche);
}
.btpruef-punkt {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: baseline;
  padding: 9px 12px;
}
.btpruef-punkt + .btpruef-punkt { border-top: 1px solid var(--border-soft); }
.btpruef-grad {
  flex: none; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: var(--r-teil); padding: 1px 8px; color: var(--faint);
}
/* Nur die schweren tragen Farbe. Traegen alle eine, hiesse Farbe nichts
   mehr, und man saehe nicht mehr, wo man anfangen muss. */
.btpruef-punkt.hoch .btpruef-grad {
  color: #e5484d; border-color: color-mix(in srgb, #e5484d 45%, transparent);
}
.btpruef-was { font-size: 12.5px; line-height: 1.5; color: var(--text); min-width: 0; }
.btpruef-wer { grid-column: 2; font-size: 11px; color: var(--faint); }

/* Der Satz, der sagt, dass hier nicht alles steht. Frueher stand daneben
   ein Schalter „Alle zeigen" — den beantwortet jetzt das Vorschaufenster. */
.up-vorschau-mehr {
  margin: 0 0 10px; font-size: 12px; color: var(--faint); line-height: 1.5;
}

.proj-werkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.proj-werkzeuge .spacer { flex: 1; }

.ad-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ad-filter .opt-sel { height: 34px; }

/* Gleich hoch statt jede fuer sich: nebeneinander lasen sich verschieden
   hohe Karten wie verschieden wichtige. Die ueberzaehlige Hoehe nimmt das
   Creative auf — es ist der Teil, dem mehr Platz auch mehr nuetzt. */
.ad-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px; margin-top: 22px; align-items: stretch;
}
/* Die Karte traegt selbst kein Innenmass mehr: das Creative geht bis an die
   Kanten, und was darunter steht, bringt seinen Rand mit. Sonst saesse das
   Poster in einem Rahmen und waere keines. */
.ad-karte {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--raise); overflow: hidden;
}

/* ---- Das Poster: Bild und Wort sind eine Sache ----
   Das Creative laeuft nach unten in Schwarz aus, und der Text steht in
   diesem Schwarz — nicht darauf. Die Karte wird dafuer laenger.
   Ein Verlauf ueber dem Bild deckte immer den Teil zu, den man sehen
   wollte; ein Verlauf, der aus dem Bild herausfuehrt, nimmt nichts weg.
   Vorher standen Zahlenleiste, Laufzeit, Absender, Text und Bild als
   fuenf Zeilen untereinander — man las die Anzeige in einer Reihenfolge,
   in der sie nirgends erscheint. */
/* Das Creative fuellt die ganze Buehne, die Worte stehen unten darin. So
   bestimmt das Seitenverhaeltnis der Buehne die Hoehe der Karte, und die
   ueberzaehlige Hoehe einer gleich hohen Reihe geht an das Bild statt an
   eine schwarze Leerflaeche. 3:4, damit die Karte in die Laenge geht —
   Meta-Creatives sind hochkant, und im breiteren Kasten stand oben und
   unten nur Rand. */
.ad-buehne {
  --p-text: #f6f6f7;
  --p-leise: rgba(246, 246, 247, .7);
  --p-blass: rgba(246, 246, 247, .5);
  --p-linie: rgba(255, 255, 255, .14);
  position: relative; background: #000;
  flex: 1 1 auto; aspect-ratio: 3 / 4; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ad-bild {
  position: absolute; inset: 0; overflow: hidden;
  background: #000; display: grid; place-items: center; color: var(--faint);
}
.ad-bild img, .ad-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-ohne svg { width: 24px; height: 24px; }
/* Das untere Sechstel loest sich in die Flaeche auf, auf der die Worte
   stehen. Weich genug, dass keine Kante bleibt, und erst so spaet, dass
   vom Motiv nichts Wesentliches verschwindet. */
.ad-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent        22%,
    rgba(0, 0, 0, .03) 32%,
    rgba(0, 0, 0, .08) 40%,
    rgba(0, 0, 0, .15) 47%,
    rgba(0, 0, 0, .24) 54%,
    rgba(0, 0, 0, .35) 60%,
    rgba(0, 0, 0, .47) 66%,
    rgba(0, 0, 0, .59) 72%,
    rgba(0, 0, 0, .71) 78%,
    rgba(0, 0, 0, .82) 84%,
    rgba(0, 0, 0, .90) 89%,
    rgba(0, 0, 0, .96) 94%,
    #000              100%);
}
/* Der Knopf muss ueber dem Verlauf liegen, sonst haucht er sich weg. */
.ad-play { z-index: 1; }

/* Die Worte stehen im Schwarz unter dem Bild — im Fluss, nicht darueber,
   damit die Karte fuer sie waechst statt das Creative zu verdecken. Der
   negative Rand oben holt sie in den ausgelaufenen Teil des Bildes
   hinein: dort ist ohnehin nichts mehr zu sehen. */
/* Keine Grundfarbe unter den Worten: sie stehen auf dem Teil des Bildes,
   der ohnehin schon in Schwarz ausgelaufen ist. Eine deckende Flaeche
   zoege dort wieder eine Kante — genau das, was der Verlauf verhindert. */
.ad-worte {
  display: grid; gap: 7px; padding: 0 15px 14px;
  position: relative; z-index: 1;
}
/* Ohne Creative gibt es nichts, was auslaufen koennte. Dann steht der
   Block flach auf einer Flaeche und nimmt die Farben des Themas — eine
   schwarze Kachel im hellen Thema saehe aus wie ein Ladefehler. */
.ad-buehne.ohne {
  background: var(--panel);
  --p-text: var(--text); --p-leise: var(--muted); --p-blass: var(--faint);
  --p-linie: color-mix(in srgb, var(--text) 14%, transparent);
}
/* Auch ohne Creative dasselbe Format: die Hoehe jeder Karte ergibt sich
   so allein aus ihrer Spaltenbreite, und alle stehen gleich hoch — ohne
   dass das Gitter die Reihen aneinander angleichen muesste. Eine feste
   Reihenhoehe (grid-auto-rows: 1fr) waere der naheliegende Weg gewesen,
   staucht die Karten aber ueberall dort, wo der Behaelter selbst eine
   Hoehe hat — und im Brandtracker-Fenster hat er eine. */
.ad-buehne.ohne { aspect-ratio: 3 / 4; }
.ad-buehne.ohne .ad-worte { padding: 15px 15px 14px; }

.ad-hook {
  margin: 0; color: var(--p-text);
  font-size: 15px; line-height: 1.34; font-weight: 600; letter-spacing: -.014em;
  text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  /* Zwei Zeilen Platz, auch wenn die Copy nur eine hat: sonst saesse der
     Absender bei kurzen Texten hoeher als nebenan. */
  min-height: 2.68em;
  cursor: pointer;
}
/* Bei den nativen Anzeigen ist der lange Text der ganze Grund fuer die
   Suche — dort darf er mehr Zeilen und dafuer weniger Gewicht haben. */
.ad-hook.lang { -webkit-line-clamp: 4; font-size: 13px; font-weight: 500; line-height: 1.45; }
.ad-hook.ohne { color: var(--p-blass); font-weight: 500; font-size: 13px; cursor: default; }

/* Aufgeklappt steht der ganze Text da und die Karte waechst mit. Erst ab
   einer Bildschirmhoehe wird gescrollt — sonst schoebe eine ausufernde
   Copy alles andere aus dem Fenster. */
/* Aufgeklappt waechst die Karte nicht: der Text nimmt sich Platz vom
   Bild, das ohnehin hinter ihm liegt. Waechst sie doch, zoege sie mit
   grid-auto-rows: 1fr jede andere Karte mit in die Hoehe — man klappt
   eine Copy auf und die ganze Seite rutscht. */
.ad-worte { max-height: 100%; overflow: hidden; }
/* Aufgeklappt reicht der Text hoeher, als der Verlauf des Bildes traegt —
   die ersten Zeilen laegen sonst auf dem hellen Teil des Motivs. Der Block
   bringt deshalb seinen eigenen Grund mit, oben weich auslaufend, damit
   keine Kante entsteht. */
.ad-buehne.offen .ad-worte {
  background: linear-gradient(to bottom,
    transparent 0, rgba(0, 0, 0, .30) 18px, rgba(0, 0, 0, .62) 40px,
    rgba(0, 0, 0, .82) 64px, rgba(0, 0, 0, .90) 90px);
}
.ad-buehne.ohne.offen .ad-worte { background: none; }
.ad-buehne.offen .ad-hook {
  -webkit-line-clamp: unset; display: block; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  font-size: 13px; font-weight: 500; line-height: 1.5;
}
/* Ohne Creative gibt es kein Bild, dem der Text Platz wegnehmen koennte —
   dort darf die Buehne mit dem Text wachsen. */
.ad-buehne.ohne .ad-worte { max-height: none; overflow: visible; }

.ad-wer { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ad-wer .spacer { flex: 1; }
.ad-worte .ad-marke {
  flex: 0 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--p-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-worte .ad-logo { width: 22px; height: 22px; border-color: var(--p-linie); }
.ad-worte .ad-marke-zahl { color: var(--p-leise); }

/* Drei Paare auf einer Achse: links, wie lange sie laeuft, rechts, wie oft
   sie gesehen wurde und was sie gekostet hat. Alle Zahlen mit gleicher
   Ziffernbreite, damit sie ueber gestapelte Karten hinweg untereinander
   stehen, auch wenn die Creatives verschieden hoch sind. */
.ad-zahlen {
  display: flex; align-items: flex-end; gap: 12px;
  padding-top: 8px; border-top: 1px solid var(--p-linie);
}
.ad-paar { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ad-paar.rechts { margin-left: auto; }
.ad-paar.rechts, .ad-paar.rechts ~ .ad-paar { text-align: right; }
.ad-paar b {
  font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--p-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Die fehlende Angabe darf dastehen, aber nicht mitreden. */
.ad-paar b.ohne { color: var(--p-blass); font-weight: 500; }
.ad-paar i {
  font-style: normal; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--p-blass); white-space: nowrap;
}

.ad-titel { font-size: 13px; font-weight: 600; line-height: 1.35; }

/* Der Block unter dem Bild — dieselbe Reihenfolge, in der ein Kunde die
   Anzeige liest: woher sie kommt, worum es geht, was zu tun ist. Er steht
   unter dem Poster, weil er der Grund ist, aus dem man sich eine fremde
   Anzeige ueberhaupt ansieht: man will wissen, wohin sie fuehrt. */
.ad-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; background: var(--panel);
}
.ad-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ad-link-domain {
  font-size: 10.5px; color: var(--faint); text-transform: lowercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-link-text .ad-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-link-sub {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ad-fuss {
  display: flex; gap: 2px; padding: 7px 11px;
  border-top: 1px solid var(--border-soft);
}

.ad-blaettern { display: flex; align-items: center; gap: 12px; margin-top: 20px; }

/* Brandtracker */
.bt-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.bt-zeile {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: var(--r-flaeche);
  background: var(--raise); padding: 12px 14px;
}
.bt-zeile.on { border-color: var(--muted); }
.bt-haupt {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  background: none; border: 0; padding: 0; text-align: left; font: inherit;
  color: var(--text); cursor: pointer;
}
.bt-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-sub { font-size: 11.5px; color: var(--faint); }
.bt-zahlen { display: flex; gap: 20px; flex: none; }
.bt-zahlen > span { display: flex; flex-direction: column; gap: 1px; }
.bt-zahlen b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-zahlen i {
  font-style: normal; font-size: 10px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.bt-ads { padding: 0 2px 6px; }
.bt-ads .ad-gitter { margin-top: 12px; }

@media (max-width: 700px) {
  .bt-zeile { flex-wrap: wrap; }
  .bt-zahlen { gap: 14px; }
}

.ad-logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--border); }
/* Der Knopf sieht aus wie einer, statt wie ein Etikett: Er steht rechts im
   Link-Block auf gleicher Hoehe mit der Ueberschrift. */
.ad-cta {
  flex: none; font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
  border: 1px solid var(--border); border-radius: var(--r-feld);
  background: var(--panel-2); padding: 6px 11px; color: var(--text);
  white-space: nowrap;
}
.ad-fuss .spacer { flex: 1; }
.ad-domain { font-size: 11px; color: var(--faint); align-self: center; }

.bt-bild { width: 34px; height: 34px; border-radius: var(--r-feld); object-fit: cover; flex: none; border: 1px solid var(--border); }

/* Eine geoeffnete Marke: Verlauf links, Zielseiten rechts, darunter die
   staerksten Anzeigen. */
.bt-detail {
  display: flex; flex-direction: column; gap: 20px;
  padding: 4px 2px 18px;
}
.bt-oben { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.bt-chart { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.bt-formate { display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 0 2px; }
.bt-formate > span { display: flex; flex-direction: column; gap: 1px; }
.bt-formate b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-formate i {
  font-style: normal; font-size: 10px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em;
}

.bt-seiten {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-flaeche);
  background: var(--raise); padding: 14px 15px;
}
.bt-seiten-liste { display: flex; flex-direction: column; }
.bt-seite {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 8px 0; text-decoration: none; color: var(--muted); font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.bt-seite:last-child { border-bottom: 0; }
.bt-seite:hover { color: var(--text); }
.bs-pfad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-zahl { flex: none; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

.bt-top { display: flex; flex-direction: column; gap: 2px; }
.bt-top .ad-gitter { margin-top: 12px; }

@media (max-width: 900px) {
  .bt-oben { grid-template-columns: 1fr; }
}

/* Das Fenster zu einer Marke: gross, und auf Wunsch die ganze Seite. */
#btBox { display: flex; flex-direction: column; gap: 4px; }
.modal:has(#btBox) {
  width: min(1180px, 94vw); max-width: none; max-height: 88vh;
  padding: 18px 20px 20px; --modal-pad: 20px;
}
.modal:has(#btBox).voll {
  width: 100vw; height: 100vh; max-height: none;
  border-radius: 0; padding: 20px 24px 24px;
}

/* Das Zeichen der Marke steht auf derselben Kante wie die Ueberschrift der
   Kurve darunter. Die liegt 21px innen: 2px Aussenpolster der Ansicht plus
   Rand und 18px im Kasten. Hier stehen aber nur 10px, weil der Knopf
   darin selbst 6px Rand und 5px Polster mitbringt — die fehlten in der
   ersten Rechnung, und das Zeichen stand elf Pixel zu weit rechts. */
/* Marks Bilder vom 09.09.2026, zwei Ansichten desselben Fensters: „oben
   der header hat sauberer padding, aber beim uebernehmen wird das padding
   unsauber, weil sich dieser graue kasten verschiebt / verkleinert."

   Drei Zahlen, die dasselbe Mass meinen, standen auf drei Werten:
   `top: -18px`, `padding-top: 6px`, `margin-top: -4px`.

   `top` misst gegen die AUSSENKANTE. Beim Kleben haelt der Browser sie
   achtzehn Pixel ueber der Fensterkante fest — der Kasten selbst rutscht
   also nach oben aus dem Bild, und weil sein Polster nur sechs Pixel
   hoch ist, wird der graue Streifen dabei kleiner. Im Ruhezustand faellt
   das nicht auf, beim Scrollen sofort.

   Dieselbe Rechnung steht bei .stapel-kopf schon richtig da und wurde
   dort zweimal falsch repariert, bevor sie stimmte: top, padding-top und
   margin-top tragen dasselbe Mass. */
.bt-fenster-kopf {
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: -18px; z-index: 2;
  background: linear-gradient(var(--panel), var(--panel)), var(--fenster-grund, var(--bg));
  padding: 18px 0 12px 10px; margin: -18px 0 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.bt-fenster-kopf .spacer { flex: 1; }
.bt-fenster-titel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bt-fenster-titel b { font-size: 16px; font-weight: 600; }
.bt-fenster-titel a { font-size: 12px; color: var(--faint); text-decoration: none; }
.bt-fenster-titel a:hover { color: var(--text); }

.modal:has(#btBox) .bt-detail { padding-bottom: 0; }

/* Die Kurve mit Ablesepunkt */
.bt-kurve { margin-top: 0; }
.bt-kurve-flaeche { position: relative; }
.bt-kurve-flaeche .ch-svg { display: block; }
/* Der Strich ist hier der Inhalt, nicht die Umrandung: im Brandtracker
   liest man die Kurve aus der Ferne, und zwei Pixel gingen auf der breiten
   Flaeche unter. Anderswo bleibt es bei zwei — dort steht die Kurve klein
   neben Zahlen und wuerde sonst plump. */
.bt-kurve-flaeche .ch-line, .bt-funke .ch-line { stroke-width: 3.5; }

.bt-zeiger {
  position: absolute; top: 0; bottom: 0; width: 0; opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.bt-kurve.liest .bt-zeiger { opacity: 1; }
.bt-zeiger i {
  position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}
.bt-zeiger b {
  position: absolute; left: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text); transform: translateY(-4px);
}

.bt-blase {
  position: absolute; top: -4px; transform: translateX(-50%);
  padding: 4px 9px; border-radius: var(--r-feld); white-space: nowrap;
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  border: 1px solid var(--border);
  font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
.bt-kurve.liest .bt-blase { opacity: 1; }
.bt-blase.links { transform: none; }
.bt-blase.rechts { transform: translateX(-100%); }

/* Die Achse darf nie ueber den Kasten hinausragen. */
.ch-axis { overflow: hidden; }

/* Top 10 als Reihe zum Seitwaertsschieben, jede Karte mit ihrem Platz. */
.bt-top-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bt-top-kopf .field-hint { margin-left: auto; }
/* Worueber die Reihe geht — ueber alle Seiten oder ueber die gewaehlten —
   gehoert neben die Ueberschrift. Am rechten Rand saehe es aus wie eine
   Angabe zu den Knoepfen daneben. Den Abstand macht der Spacer. */
.bt-top-kopf .bt-top-quelle { margin: 0; }

.bt-reihe {
  display: flex; gap: 14px; margin-top: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  /* Damit die Karten am Rand nicht abgeschnitten wirken. */
  scroll-padding-left: 2px;
}
/* Breit genug, dass das Creative als Quadrat stehen kann: Meta-Anzeigen
   kommen meist als 1:1, und im 4:5-Kasten wurden sie oben und unten
   beschnitten. In der Reihe zaehlt das Bild, nicht die Zeilenzahl. */
.bt-reihe > .ad-halter { flex: 0 0 300px; scroll-snap-align: start; }
/* Kein Hoehendeckel mehr: er hat das Format wieder aufgehoben. Bei 344
   Pixel Breite wollte die Buehne 459 hoch sein und bekam 380 — daraus
   wurde ein fast quadratischer Kasten, und die Karte lag quer statt
   hochkant. Begrenzt wird jetzt die Breite; die Hoehe folgt daraus. */
.bt-reihe .ad-buehne { aspect-ratio: 3 / 4; }
/* Ganz zeigen statt zurechtschneiden: Ein Hochformat verlor im quadratischen
   Kasten oben und unten das, worauf es ankommt — Kopfzeile und Angebot.
   Die Raender bleiben dunkel, das Creative steht mittig darin. */
.bt-reihe .ad-bild img, .bt-reihe .ad-bild video { object-fit: contain; }

/* Der Platz sitzt ueber der Karte, nicht im Bild — dort verdeckt er das
   Creative, und genau das will man ja sehen. */
.ad-halter { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* flex: 1 haette die Grundgroesse auf 0 gesetzt — dann meldet die Karte
   dem Gitter nur ihre Mindesthoehe, die Reihe faellt darauf zusammen und
   die Buehne mit ihr. Sie soll wachsen duerfen, aber von ihrer eigenen
   Hoehe aus. */
.ad-halter > .ad-karte { flex: 1 0 auto; }
.ad-platz {
  align-self: flex-start;
  min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--r-feld);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
}

/* ============================================================
   Brandtracker: Liste mit Spalten
   ============================================================ */
.bt-tabelle { margin-top: 22px; }
.bt-kopfzeile, .bt-reihe-zeile {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) minmax(150px, 1fr) 150px 150px 34px;
  gap: 18px; align-items: center;
}
.bt-kopfzeile {
  padding: 0 14px 9px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--border);
}
.bt-reihe-zeile {
  padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
  border-radius: var(--r-flaeche);
}
.bt-reihe-zeile:hover { background: var(--hover); }

.bt-shop {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: none; border: 0; padding: 0; text-align: left; font: inherit;
  color: var(--text); cursor: pointer;
}
.bt-shop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-bild.leer { display: grid; place-items: center; color: var(--faint); background: var(--panel); }
.bt-bild.leer svg { width: 15px; height: 15px; }

.bt-spalte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bt-wert { display: flex; align-items: baseline; gap: 7px; }
.bt-wert b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-wert i { font-style: normal; font-size: 11px; color: var(--faint); }
.bt-klein { font-size: 11px; color: var(--faint); }

/* Alle geholten Anzeigen unter der Bestenliste. Ein Gitter statt einer
   Reihe: hier blaettert man nicht seitwaerts durch zehn, hier sucht man in
   hundert. */
.bt-alle { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; }
.bt-alle .ad-gitter { margin-top: 12px; }

.bt-alle .ad-bild img, .bt-alle .ad-bild video { object-fit: contain; }
.bt-alle-suche {
  width: 190px; height: 30px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--r-teil);
  background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px;
}
.bt-alle-suche::placeholder { color: var(--faint); }
.bt-alle-suche:focus { outline: none; }
/* Der Knopf zieht sich ueber die Breite: Er schliesst das Gitter ab, statt
   als kleine Schaltflaeche darunter zu haengen. */
.bt-alle-mehr { width: 100%; margin-top: 14px; }

/* Die kleine Kurve in der Zeile — dasselbe Diagramm, nur flach gedrueckt. */
.bt-funke { display: block; height: 28px; overflow: hidden; }
.bt-funke .ch-svg { height: 28px; width: 100%; }
.bt-funke .ch-grid { display: none; }

@media (max-width: 1000px) {
  .bt-kopfzeile { display: none; }
  .bt-reihe-zeile {
    grid-template-columns: 1fr 1fr 34px;
    grid-template-areas: "shop shop weg" "a b b";
    row-gap: 10px;
  }
  .bt-shop { grid-area: shop; }
}

/* ============================================================
   Brandtracker: Fenster zur Marke
   ============================================================ */
/* Die Spalte neben dem Verlauf endet auf derselben Linie wie er: der
   untere Kasten nimmt sich, was uebrig ist, und laesst seine Liste
   notfalls rollen. Sonst ragt eine Seite ueber die andere hinaus und die
   drei Umrisse stehen versetzt. */
.bt-seitlich { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bt-seitlich > .bt-kasten:last-child { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bt-seitlich > .bt-kasten:last-child .bt-liste { flex: 1; min-height: 0; overflow: auto; }
/* Dieselbe Flaeche wie die Kaesten rechts. Vorher lag die Kurve auf dem
   Schwarz der Seitenleiste und stand als dunkles Loch neben ihnen. */
.bt-chart > .chart-box { flex: 1; margin-top: 0; background: var(--raise); }
.bt-kasten {
  border: 1px solid var(--border); border-radius: var(--r-flaeche);
  background: var(--raise); padding: 13px 15px 14px;
}
.bt-kasten-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.bt-kasten-kopf .field-hint { margin-left: auto; }

.bt-anteil {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px 44px 40px;
  align-items: center; gap: 10px; padding: 6px 0;
  font-size: 12.5px; color: var(--muted); text-decoration: none;
}
.bt-anteil.verweis:hover { color: var(--text); }
.ba-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-balken {
  height: 4px; border-radius: var(--r-klein); overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.ba-balken i { display: block; height: 100%; background: color-mix(in srgb, var(--text) 45%, transparent); }
.ba-zahl { text-align: right; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ba-p { text-align: right; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.ch-jetzt { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-unterkopf { font-size: 11.5px; color: var(--faint); margin: -4px 0 8px; font-variant-numeric: tabular-nums; }

/* Der Balken flog schon bei 760 Pixeln raus — das Fenster ist da noch
   breit genug. Erst wenn es wirklich eng wird. */
@media (max-width: 520px) {
  .bt-anteil { grid-template-columns: minmax(0, 1fr) 40px 36px; }
  .ba-balken { display: none; }
}

/* Ordnerleiste ueber der Liste */
.bt-ordner { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bt-ordner-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.bt-ordner-knopf:hover { color: var(--text); background: var(--hover); }
.bt-ordner-knopf.on { color: var(--text); border-color: var(--muted); background: var(--raise); }
.bt-ordner-knopf svg { width: 15px; height: 15px; flex: none; color: var(--faint); }
.bt-ordner-knopf.on svg { color: var(--text); }
.bt-ordner-knopf em { font-style: normal; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bt-ordner-knopf i {
  display: none; place-items: center; width: 17px; height: 17px; margin: 0 -5px 0 1px;
  border-radius: var(--r-klein); color: var(--faint);
}
.bt-ordner-knopf i svg { width: 12px; height: 12px; }
.bt-ordner-knopf:hover i { display: grid; }
.bt-ordner-knopf i:hover { color: var(--text); background: var(--hover); }
.bt-ordner-knopf.neu { padding: 0 10px; }
.bt-ordner-knopf.neu svg { width: 15px; height: 15px; }

.bt-stand { font-size: 12px; color: var(--faint); margin-left: 12px; align-self: center; }

/* Markenwechsler im Fensterkopf */
.bt-wechsler {
  /* Nur so breit wie noetig. Vorher standen hier feste 300px, damit der
     Pfeil bei jeder Marke an derselben Stelle sitzt — dafuer klaffte bei
     kurzen Namen eine Luecke bis zur Seitenwahl, und die beiden gehoeren
     zusammen. Der wandernde Pfeil ist der kleinere Preis. */
  display: flex; align-items: center; gap: 12px; min-width: 0;
  flex: 0 1 auto; max-width: 300px;
  background: none; border: 1px solid transparent; border-radius: var(--r-flaeche);
  padding: 5px 11px 5px 5px; margin-left: 6px;
  font: inherit; color: var(--text); cursor: pointer; text-align: left;
}
.bt-wechsler .bt-fenster-titel { flex: 1; min-width: 0; }
.bt-wechsler:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.bt-wechsler > svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.bt-fenster-titel em { font-style: normal; font-size: 12px; color: var(--faint); }

/* Die Domainzeile zwingt Kleinschreibung — bei einer Domain richtig, beim
   Platzhalter nicht: daraus wurde ein gehauchtes "n/a". */
.ad-link .ohne { font-style: normal; color: var(--faint); font-weight: 500; text-transform: none; }

/* Der Punkt ist das einzige Signal, das hier Farbe traegt: laeuft oder
   laeuft nicht. Gruen mit Schein, damit man es im Augenwinkel sieht. */
.ad-punkt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}
.ad-punkt.an {
  background: #3fa76a;
  box-shadow: 0 0 0 2px color-mix(in srgb, #3fa76a 22%, transparent),
              0 0 7px color-mix(in srgb, #3fa76a 75%, transparent);
  animation: punktAtmet 2.6s ease-in-out infinite;
}
@keyframes punktAtmet {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, #3fa76a 18%, transparent),
                         0 0 5px color-mix(in srgb, #3fa76a 55%, transparent); }
  50%      { box-shadow: 0 0 0 3px color-mix(in srgb, #3fa76a 26%, transparent),
                         0 0 10px color-mix(in srgb, #3fa76a 90%, transparent); }
}
html[data-anim="off"] .ad-punkt.an { animation: none; }

.ad-marke-zahl.mit-punkt { display: inline-flex; align-items: center; gap: 6px; }
.bt-wert .ad-punkt { align-self: center; }
/* Ohne Pille: die Zahl ist eine Angabe zur Marke, kein eigenes Etikett.
   Sie steht gleich hinter dem Namen statt am anderen Ende der Zeile. */
.ad-marke-zahl { flex: none; font-size: 11px; color: var(--faint); }

.ad-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text); backdrop-filter: blur(6px);
  transition: opacity .18s ease;
}
.ad-play svg { width: 18px; height: 18px; }
.ad-bild:hover .ad-play { opacity: 0; }

/* Seitenauswahl neben dem Markenwechsler */
.bt-seitenwahl {
  display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 210px;
  height: 32px; padding: 0 9px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.bt-seitenwahl:hover { color: var(--text); background: var(--hover); }
.bt-seitenwahl.on { color: var(--text); border-color: var(--muted); }
.bt-seitenwahl svg { width: 12px; height: 12px; flex: none; color: var(--faint); }
/* Dasselbe Vorschaubild wie bei der Marke, nur kleiner — die Zeile ist
   flacher und soll es bleiben. */
.sw-bild {
  width: 18px; height: 18px; border-radius: var(--r-klein); object-fit: cover; flex: none;
  border: 1px solid var(--border);
}
.sw-bild.leer {
  display: grid; place-items: center; background: var(--panel);
  font-size: 10px; font-weight: 600; color: var(--faint);
}
.bt-seitenwahl span { overflow: hidden; text-overflow: ellipsis; }

/* Facebook-Seiten im Auswahlmenü */
/* Der Kasten mit den Seiten waechst nach rechts mit dem laengsten Namen.
   Ohne `max-content` bleibt er bei der Mindestbreite stehen und schneidet
   ab; ohne den Deckel darueber koennte ein sehr langer Name ihn quer
   ueber den Schirm ziehen. menuRuecken schiebt ihn danach ins Bild, wenn
   er rechts anstoesst. */
.menu:has(.mi-seite) { width: max-content; max-width: min(92vw, 460px); }
.menu button.mi-seite { gap: 9px; }
.mi-logo {
  width: 26px; height: 26px; border-radius: var(--r-feld); object-fit: cover; flex: none;
  border: 1px solid var(--border);
}
.mi-logo.leer {
  background: var(--raise); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--faint);
}
/* Das Zeichen links neben der zweizeiligen Beschriftung — Marks Wahl vom
   13.09.2026, Entwurf 04 von zwanzig. Dieselbe Spalte wie der Haken, nur
   mit einem Zeichen statt eines Hakens darin. */
.mi-zeichen {
  width: 16px; flex: none; display: grid; place-items: center;
  color: var(--faint); font-size: 13px; line-height: 1;
}
.mi-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mi-text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-text em { font-style: normal; font-size: 11.5px; color: var(--faint); }

.sb-btun .btn.mit-ico { gap: 6px; }
.sb-btun .btn.mit-ico svg { width: 12px; height: 12px; }

/* Woran gerade gearbeitet wird — unten links über dem Konto.
   Zwei Etagen: oben die Marke mit Pinnadel, Wort und Uhr; unten der Haken
   neben dem Titel und darunter, was die Aufgabe einordnet. Ohne Farbe —
   die Deutlichkeit kommt aus Flaeche, Kante und Schriftgewicht. */
/* Dieselben Farben wie eine Aufgabenkarte im Brett — Marks Ansage vom
   17.09.2026: „unten links die gepinnte todo soll die selben farben
   haben wie unsere todo karten kopfzeile helleres grau, darunter
   dunkleres, mit umriss."

   Es IST dieselbe Sache: oben, was die Aufgabe einordnet, unten die
   Aufgabe. Nur sah es anders aus — durchsichtig, mit einem aus der
   Schriftfarbe gemischten Rand. Jetzt die drei Werte von drueben:
   Flaeche `--raise`, Kopfzeile `--panel`, Rand `--border`.

   `overflow: hidden` und Polster erst in den Teilen: Sonst liefe die
   Kopfzeile nicht bis an die Kanten, und die hellere Flaeche schwebte
   als Streifen in der Karte. */
/* Marks Ansage vom 22.09.2026: „mach dieses popup doch schwarz mit nur
   umrissen" — gemeint ist diese Karte, die fixierte Aufgabe unten links,
   nicht das Aufgabenfenster.

   Gemessen: Die Seitenleiste ist reines Schwarz, die Karte sass mit
   `--raise` (#131313) darauf und ihr Kopfstreifen noch einmal mit
   `--panel` (#1c1c1c) — drei Toene uebereinander, wo einer genuegt. Jetzt
   traegt der Umriss allein, und die Karte steht auf dem Schwarz der
   Leiste. Die Linie unter dem Kopfstreifen bleibt: Sie trennt weiter,
   was vorher die Flaeche trennte.

   Der Schleier beim Hinfahren bleibt ebenfalls — ohne Grund waere die
   Karte sonst das einzige Anklickbare im Haus ohne Rueckmeldung. */
.side-dran {
  position: relative; margin: 0 0 8px; padding: 0; overflow: hidden;
  border-radius: var(--r-flaeche); background: none;
  border: 1px solid var(--border);
  transition: border-color .16s ease, background .16s ease;
}
.side-dran:hover {
  background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text);
}
/* Die ganze Karte oeffnet die Aufgabe — nur der Haken bleibt fuer sich. */
.side-dran { cursor: pointer; }
.side-dran .checkbox { cursor: pointer; }

.sd-oben {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: none;
  border-bottom: 1px solid var(--border);
}
/* Die Pinnadel steht fuer sich — ohne Kaestchen darunter, sonst wirkt
   sie wie ein Knopf, und anzuklicken ist hier nichts. */
.sd-marke { display: grid; place-items: center; flex: none; color: var(--text); }
.sd-marke svg { width: 15px; height: 15px; }
.sd-label {
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.sd-zeit {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums;
}
.sd-zeit svg { width: 12px; height: 12px; }

.sd-unten { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px 12px; }
.sd-unten .checkbox { margin: 1px 0 0; flex: none; }

/* Die Zeile im Fenster steht fuer sich: keine Nachbarzeile, also auch
   kein trennender Strich, und der Dran-Knopf gehoert hier nicht hin — man
   ist ja schon drin. */
/* Der Bereich als Fenster: so breit wie eine Seite, sonst quetschen sich
   die festen Spalten der Zeilen. Die Seitenraender entfallen — der Kasten
   bringt seine eigenen mit. */
.modal:has(#dranBox) {
  width: min(1000px, 94vw); max-width: none; max-height: 88vh; overflow: auto;
}
/* Die Nadel sitzt auch hier ausserhalb der Zeile, wie auf der Seite —
   sonst ruecken die Zeilen um ihre Spalte ein und stehen versetzt zu den
   Gruppentiteln und der Leiste darueber. Der Platz dafuer kommt aus dem
   linken Innenrand der Seite im Fenster. */
/* Marks Ansage vom 22.09.2026: „bei dem todo popup soll rechts genau
   dasselbe padding sein wie links."

   Berechtigt und gemessen in seinem Fenster: links 59 px, rechts 25 px.
   Der Unterschied waren genau diese 34 px — sie standen nur auf einer
   Seite. Das Fenster selbst polstert rundum mit 24 px; was hier
   danebensteht, muss darum auf beiden Seiten gleich sein. */
.page.im-fenster { padding: 0 34px; }

.page.im-fenster .page-head { margin-bottom: 22px; }
/* Der Trennstrich der Zeilen ist ein fester Grauton, abgestimmt auf den
   Seitenhintergrund. Der Kasten hier ist ein anderer — in manchen
   Farbstellungen fast derselbe Ton, dann verschwindet der Strich. Im
   Fenster kommt er darum aus der Schriftfarbe und traegt in jedem Thema. */
/* Als Rahmen folgt der Strich den runden Ecken der Zeile und biegt sich
   an den Enden nach oben. Auf der Seite faellt das nicht auf, weil er dort
   kaum zu sehen ist — hier schon. Darum liegt er als gerade Linie unter
   der Zeile, waehrend die Rundung fuer den Zeiger erhalten bleibt. */
.page.im-fenster .todo { border-bottom: 0; }
.page.im-fenster .todo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: color-mix(in srgb, var(--text) 8%, transparent); pointer-events: none;
}
.page.im-fenster .group-title { border-color: color-mix(in srgb, var(--text) 8%, transparent); }

.sd-haupt {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
  text-align: left; color: var(--text);
}
/* Lange Titel brechen um statt abzuschneiden — in einer schmalen Spalte
   ist die zweite Zeile billiger als drei Punkte. Bei der dritten ist
   Schluss, sonst schiebt eine Aufgabe das Konto darunter weg. */
.sd-titel {
  font-size: 14px; font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.side-dran.fertig .sd-titel { text-decoration: line-through; color: var(--muted); }

.sd-meta {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 11px; color: var(--muted);
}
/* Die Prioritaet steht oben neben dem Wort — sie sagt etwas ueber die
   Aufgabe als Ganzes, nicht ueber ihren Titel. */
/* Dieselbe Luecke wie zwischen Nadel und Wort daneben — sonst klebt die
   Stufe an ihren Balken und die Zeile bekommt zwei Rhythmen. */
.sd-oben .prio { padding: 0; gap: 8px; cursor: inherit; }
.sd-oben .prio:hover { background: none; }
.sd-oben .prio .plabel {
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.sd-oben .prio .bars { height: 9px; }
.sd-oben .prio .bars i { width: 2px; }
.sd-proj { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.sd-proj svg { width: 12px; height: 12px; flex: none; color: var(--text); }

/* Ausserhalb der Tabelle, links neben der Zeile — es gehoert zur Aufgabe,
   aber nicht in die Spaltenordnung. */
.icon-btn.dran {
  position: absolute; left: -34px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  color: var(--faint); background: none;
}
/* Die Nadel ist so gross wie ihre Nachbarn — Marks Ansage vom
   17.09.2026: „die pin nadel soll genauso gross sein wie die icons
   daneben." Das waren neunzehn, solange jedes Zeichen seine eigene
   Groesse mitbrachte; seit dem 18.09.2026 sind es achtzehn, und die
   Nadel zieht mit. */
.icon-btn.dran svg { width: 18px; height: 18px; }
.icon-btn.dran:hover { color: var(--muted); background: none; }
.icon-btn.dran.an, .icon-btn.dran.an:hover { color: var(--text); background: none; }
/* Ohne Schein — Marks Ansage vom 21.09.2026: „die pin nadel bei todos
   soll bitte nicht leuchten."

   Hier stand ein `drop-shadow` von fuenf Pixeln in fuenfundvierzig
   Prozent Schrift. Gedacht war er als Wink im Augenwinkel; im Betrieb
   ist die Nadel aber das einzige Zeichen im Haus, das leuchtet, und
   genau das faellt auf — nicht im Augenwinkel, sondern mitten im Blick.

   Die hellere Farbe bleibt und reicht: Sie steht gegen `--faint` bei
   allen anderen Zeilen und findet sich sofort. Genau dieses Argument
   stand schon in der Ausnahme fuer das Fenster darunter — dort war der
   Schein aus demselben Grund abgeschaltet. Jetzt gilt es ueberall, und
   die Ausnahme ist damit gegenstandslos. */
/* Hier stand: unsichtbar, solange man nicht auf der Zeile steht. Marks
   Meldung vom 17.09.2026: „in den anderen ansichten buggt die pin nadel
   sie wird unsichtbar behebe das."

   Es war kein Fehler im Code, sondern einer im Gedanken. In der alten
   Zeile lag die Nadel AUSSERHALB am Rand — dort stoerte sie, solange
   man sie nicht brauchte. Seit dem 17.09. steht sie in der Kopfzeile
   der Karte und in der flachen Zeile bei den anderen Griffen: an einer
   Stelle, an der etwas fehlt, wenn es nicht da ist. */
.icon-btn.dran { opacity: 1; }

/* Kamera-Wache: Lage als Punkt mit Wort, darunter Schalter, Schwelle und
   die Bilanz aus aktiv, untaetig und weg. */
.wache-lage {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--faint);
  --punkt: color-mix(in srgb, var(--text) 24%, transparent);
}
.wache-lage i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--punkt); }
.wache-lage.da { --punkt: #3fa76a; }
.wache-lage.untaetig { --punkt: #d3a03f; }
.wache-lage.weg { --punkt: #d0685f; }

/* Schlaegt die Lage um, sagt sie es auch: das Wort kommt von unten herein,
   der Punkt setzt sich mit einem Ring ab, der einmal nach aussen laeuft.
   Eine halbe Sekunde, mehr braucht es nicht — es soll auffallen, wenn man
   hinsieht, und nicht stoeren, wenn man arbeitet. */
@keyframes wacheWort {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wachePunkt {
  0%   { transform: scale(.3); }
  55%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes wacheRing {
  from { box-shadow: 0 0 0 0 var(--punkt); opacity: .55; }
  to   { box-shadow: 0 0 0 10px transparent; opacity: 0; }
}
.wache-lage.wechsel { animation: wacheWort .38s cubic-bezier(.22, 1, .36, 1); }
.wache-lage.wechsel i { animation: wachePunkt .45s cubic-bezier(.22, 1, .36, 1), wacheRing .8s ease-out; }
html[data-anim="off"] .wache-lage.wechsel,
html[data-anim="off"] .wache-lage.wechsel i { animation: none; }

/* Das Auge der Wache: das laufende Kamerabild, gespiegelt wie ein Spiegel,
   damit man sich darin wiederfindet, und darin das Wort, worauf die Wache
   gerade schliesst. */
.wache-bild {
  position: relative; flex: none;
  width: 116px; aspect-ratio: 4 / 3; border-radius: var(--r-feld); overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid var(--border);
}
.wache-bild > div { position: absolute; inset: 0; }
.wache-bild video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.wache-sicht {
  position: absolute; left: 6px; bottom: 6px; z-index: 1;
  padding: 2px 7px; border-radius: var(--r-teil);
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  backdrop-filter: blur(6px);
}

.w-aktiv { background: #3fa76a; }
.w-untaetig { background: #d3a03f; }
.w-weg { background: #d0685f; }

.log-wache { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Freistellen: links die Vorschau auf kariertem Grund, rechts die Regler.
   Das Karo macht sichtbar, was durchsichtig geworden ist — auf einer
   dunklen Flaeche saehe ein weggenommener schwarzer Grund genauso aus
   wie ein stehengebliebener. */
/* Kein eigenes Rollen mehr: Das erledigt der Kasten darin, damit der
   Vollbildknopf im Rahmen stehen bleibt statt mitzufahren. */
.modal:has(#bFreiBox) { width: min(880px, 94vw); max-width: none; max-height: 90vh; }
#bFreiBox .page-head { margin-bottom: 22px; }
.frei-form { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
.frei-schau {
  display: grid; place-items: center; padding: 10px; border-radius: var(--r-gross);
  border: 1px solid var(--border); cursor: crosshair; overflow: hidden;
  background-color: var(--karo-a);
  background-image:
    linear-gradient(45deg, var(--karo-b) 25%, transparent 25%, transparent 75%, var(--karo-b) 75%),
    linear-gradient(45deg, var(--karo-b) 25%, transparent 25%, transparent 75%, var(--karo-b) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.frei-schau canvas { max-width: 100%; max-height: 52vh; display: block; touch-action: none; }
.frei-schau.malt { cursor: cell; }
.frei-schau.tippt { cursor: crosshair; }
.frei-regler { display: flex; flex-direction: column; gap: 16px; }
.frei-zeile { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--muted); }
.frei-zeile input[type="range"] { width: 100%; accent-color: var(--text); }
.frei-tun { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.frei-tun .spacer { flex: 1; }
@media (max-width: 720px) { .frei-form { grid-template-columns: minmax(0, 1fr); } }

/* Pruefbericht in der Sprache des Hauses: Urteil oben, drei Kacheln mit
   den Zahlen, darunter die Marken fuer Sprache, Ton und Modell, dann die
   Punkte als Karten mit Vorher und Jetzt nebeneinander. */
.modal:has(.pruef-zahlen) { width: min(720px, calc(100vw - 32px)); max-height: 88vh; }

.pruef-kopf { margin-bottom: 18px; }
.pruef-kopf h3 { margin: 0 0 6px; }
.pruef-kopf p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.metrics.pruef-zahlen { grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
/* Hier ist nichts anzuklicken — die Zahlen stehen nur da. Der Wechsel der
   Farbe unter dem Zeiger versprach eine Handlung, die es nicht gibt. */
/* Grau mit Umriss, nicht schwarz. --sidebar ist in diesem Thema reines
   Schwarz, und drei schwarze Flaechen auf einem Fenster in #131313 lasen
   sich wie Loecher darin. Die Fuellung hebt sich jetzt vom Fenster ab,
   statt darunter zu verschwinden — gemischt aus der Textfarbe, damit es
   in jedem Thema passt. */
.pruef-zahlen .metric {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
}
.pruef-zahlen .metric:hover { background: var(--hover); }
.pruef-zahlen .mv { font-size: 22px; }
.pruef-zahlen .mk { font-size: 11.5px; }
/* Ein richtiges Rot, kein Lachs. #d0685f ist so weit entsaettigt, dass es
   neben den weissen Zahlen daneben orange wirkte statt alarmierend —
   und eine Zahl, die „hier stimmt etwas nicht" sagen soll, darf man
   nicht auf den zweiten Blick fuer eine Farbvariante halten. */
/* Die Zahl der Auffaelligkeiten steht wie die beiden daneben. Rot machte
   aus einer Angabe ein Urteil — und bei einem Bericht, den man liest, um
   zu entscheiden, faellt das Urteil man selbst. */
.pruef-zahlen .mv.bad { color: var(--text); opacity: 1; }
.pruef-balken {
  height: 3px; border-radius: var(--r-klein); margin-top: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.pruef-balken span { display: block; height: 100%; border-radius: var(--r-klein); background: var(--text); }

.pruef-band { display: flex; flex-wrap: wrap; gap: 8px; }

.pruef-leer {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 14px 16px; border-radius: var(--r-flaeche); font-size: 13px; color: var(--muted);
  background: var(--raise); border: 1px solid var(--border);
}
.pruef-leer svg { width: 15px; height: 15px; flex: none; color: #3fa76a; }

.pruef-punkt {
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px 14px; border-radius: var(--r-flaeche);
  background: var(--raise); border: 1px solid var(--border);
}
.pp-kopf { display: flex; align-items: flex-start; gap: 10px; }
.pp-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-seite {
  min-width: 0; padding: 9px 11px; border-radius: var(--r-flaeche);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.pp-seite.jetzt { border-left-color: color-mix(in srgb, var(--text) 45%, transparent); }
.pp-seite i {
  display: block; margin-bottom: 4px; font-style: normal;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.pp-seite p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pp-seite.jetzt p { color: var(--text); }

/* Dasselbe Paar, nur mit Bildern statt Absaetzen. Vorlage links, Nachbau
   rechts — wie beim Text, damit man die beiden Berichte nicht getrennt
   lesen lernen muss. Das Bild bekommt die volle Breite der Spalte und
   eine feste Hoehe, sonst springt die Liste bei jedem Seitenverhaeltnis. */
.pp-paar.bilder { margin-bottom: 8px; }
.pp-paar.bilder .pp-seite { padding-bottom: 8px; }
.pp-seite img {
  display: block; width: 100%; height: 170px; object-fit: contain;
  border-radius: var(--r-feld); background: var(--raise); margin-top: 2px;
}
.pp-fehlt {
  height: 170px; display: grid; place-items: center; margin-top: 2px;
  border-radius: var(--r-feld); background: var(--raise);
  font-size: 11.5px; color: var(--faint);
}

/* Zwei Baenke, dieselbe Form. Im Uebernehmen ist das Name und Wohnort je
   Facebook-Seite, im Launchpad die eigene Seite und ihr Instagram.

   Der Seitenname stand zuerst NEBEN den Feldern, in einer eigenen Spalte.
   Das war zweimal falsch: Erst war die Spalte fest breit und liess einen
   Streifen Leere stehen, und als sie sich am laengsten Namen mass, sass
   sie zwar dicht, sah aber immer noch aus wie ein Fremdkoerper — in
   diesem Fenster steht jede Beschriftung UEBER ihrem Feld, keine daneben.

   Also genauso: der Name als Beschriftung, darunter seine zwei Felder.
   Dieselbe Groesse und dieselbe Farbe wie jede andere Beschriftung, damit
   die Bank sich nicht als eigenes Ding aufspielt. */
.up-quellseiten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px;
}
/* Eine Spalte, seit der Wohnort nicht mehr eingetippt wird: Es steht nur
   noch der Name je Seite da, und zwei Spalten liessen daneben Leere. */
.erz-liste { display: grid; grid-template-columns: 1fr; gap: 7px 12px; }
.erz-seite, .up-qname {
  grid-column: 1 / -1; min-width: 0;
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Luft zwischen zwei Seiten — vor der ersten nicht, dort trennt schon die
   Ueberschrift der Bank. */
.erz-seite ~ .erz-seite, .up-qname ~ .up-qname { margin-top: 9px; }
.erz-liste .up-eingabe, .up-quellseiten .up-wahl { height: 38px; width: 100%; }
.up-quellseiten .up-wahl { justify-content: flex-start; }

/* Schmal steht auch das Paar untereinander. */
@media (max-width: 620px) {
  .erz-liste, .up-quellseiten { grid-template-columns: 1fr; }
}

/* Ein Satz und ein Knopf zu jedem Befund.

   Unten im Fenster steht „N neu erzeugen" fuer alles auf einmal. Hier
   steht dasselbe fuer eine einzige Anzeige — und davor das Feld, in das
   gehoert, was der Befund nicht sagen kann: was stattdessen dastehen soll. */
.pp-tun { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

/* In der Befundansicht rollt die Liste NICHT in sich selbst.
 
   `.nb-liste` bringt `max-height: 460px` mit — gedacht fuer den
   Nachbau-Kasten, damit eine Karte nicht ins Endlose waechst. In der
   Befundansicht ist das der zweite Rollbereich: Wer im Fenster scrollt
   und dabei ueber eine Copy mit fuenf Befunden faehrt, scrollt ploetzlich
   in ihr statt weiter — und `overscroll-behavior: contain` haelt ihn
   dort fest. Marks Meldung vom 08.09.2026: „wenn man scrollt hat man 2
   scrollable sections."
 
   Die Karte darf hier lang werden: Seit die Karten auf zwei Saeulen
   verteilt sind (siehe pruefVerteilt), fuellt die Nachbarin den Platz
   daneben, und eine lange Karte reisst kein Loch mehr auf. */
.pruef-punkt .nb-liste { max-height: none; overflow-y: visible; }
.pp-tun input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px;
  color: var(--text); outline: 0; padding: 9px 11px; border-radius: var(--r-feld);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
}
.pp-tun input::placeholder { color: var(--faint); }
.pp-tun .btn { flex: 0 0 auto; }
/* Nebeneinander wird es eng, sobald der Knopf seinen Text traegt. */
@media (max-width: 560px) {
  .pp-tun { flex-direction: column; align-items: stretch; }
}

/* Der Grund vorn, die Betroffenen darunter.

   Vorher stand beides in einer Zeile: „deutscher Ort („Munich") — 3×:
   Sandra Schneider 6, Christian Mueller 16, Christian Mueller 15". Bei
   vier Befunden las man viermal denselben Anfang, bevor der Unterschied
   kam. Getrennt sieht man erst, worum es geht, und dann, wen es trifft. */
.mr-grund { display: block; color: var(--text); opacity: .85; }
.mr-wo { display: block; margin-top: 1px; font-size: 12px; color: var(--faint); }

/* Der Pfeil zwischen Quell- und Zielmarkt. Er trennt zwei Angaben und ist
   selbst keine — also leiser als beide. */
.sb-pfeil { font-style: normal; color: var(--faint); margin: 0 2px; }
@media (max-width: 620px) { .pp-paar { grid-template-columns: minmax(0, 1fr); } }

.pruef-liste { margin-top: 16px; }
.pruef-zeile + .pruef-liste { margin-top: 18px; }

.pruef-punkt { padding: 12px 13px; border-radius: var(--r-flaeche); background: var(--raise); border: 1px solid var(--border); }
.pp-vor { text-decoration: line-through; }

/* Die Befundliste rollt nicht mehr fuer sich.

   Sie hatte ihr eigenes Fenster von 48vh, und darum lag im Bericht ein
   Rollfeld in einem Rollfeld: Wer mit dem Finger ueber die Befunde nach
   unten wischt, rollt die Liste; wer ueber den Rand daneben wischt, das
   Fenster. Am Ende der Liste bleibt der Zeiger haengen, statt weiter zu
   laufen, und man kommt an das, was darunter steht, nur ueber einen
   Umweg. Zwei Rollfelder in einem Fenster sind eines zuviel.

   Also laeuft sie durch. Lang wird der Bericht dadurch — aber er war
   vorher genauso lang, nur zusammengefaltet. */
.pruef-liste { display: flex; flex-direction: column; gap: 12px; }
.pruef-punkt { display: flex; gap: 12px; }
.pruef-punkt .pp-text { flex: 1; }
.pp-art {
  flex: none; align-self: flex-start; font-size: 10.5px; letter-spacing: .05em;
  border: 1px solid var(--border); border-radius: var(--r-feld); padding: 2px 7px; color: var(--faint);
}
.pp-art.schwer { color: var(--text); border-color: color-mix(in srgb, var(--text) 45%, transparent); }
/* „Neu erzeugt" ist kein Befund — es traegt darum nicht das Gewicht der
   schweren, sondern Gruen: Hier ist etwas entstanden, nichts kaputt.
   Muss hinter .pp-art stehen, sonst gewinnt die allgemeine Regel. */
.pp-art.gut { color: #3fa76a; border-color: color-mix(in srgb, #3fa76a 40%, transparent); }
/* Und das Gegenstueck: Der Befund steht noch da oder ist zurueck. Gleiche
   Groesse, gleicher Umriss, gleiche Form wie „Behoben" — nur rot. */
.pp-art.schlecht { color: var(--rot, #e5534b); border-color: color-mix(in srgb, var(--rot, #e5534b) 40%, transparent); }
.pp-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-warum { margin: 0; font-size: 13px; line-height: 1.5; }

/* Der Bericht nach dem Neu-Erzeugen.

   Drei Zeilen in der Reihenfolge, in der man sie braucht: was beanstandet
   war, welcher Wortlaut gemeint ist, ob er noch dasteht. „Behoben" ohne
   den Fehler daneben ist eine Behauptung, keine Auskunft — man kann sie
   nicht nachpruefen, und eine Stunde spaeter weiss niemand mehr, was
   dastand. */
/* Hier stand einmal ein eigenes Schild fuer das Urteil — erst als Pille
   am rechten Rand, dann als blosser Text links. Beides war eine Angabe zu
   viel: Es steht jetzt AN der Stelle von „Text" und traegt dessen Form.
   Siehe .pp-art.gut und .pp-art.schlecht. */

.nb-was, .nb-wortlaut {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.nb-was i, .nb-wortlaut i {
  display: block; font-style: normal; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 2px;
}
/* Der Wortlaut selbst ist das, was man nachschlagen will — und darum
   nicht durchgestrichen. Durchgestrichen liest er sich wie geloescht und
   ist schwerer zu lesen; dass er weg ist, sagt das Urteil darueber. */
.nb-wortlaut { color: var(--text); }
/* Auswahl der Staende vor der Pruefung: eine Zeile je Stand, Titel oben,
   Einzelheiten klein darunter. */
.wahl-liste { display: flex; flex-direction: column; gap: 6px; }
.wahl-eintrag {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 13px; border-radius: var(--r-flaeche); text-align: left;
  border: 1px solid var(--border); background: var(--raise);
  font: inherit; color: var(--text); cursor: pointer;
}
.wahl-eintrag:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.we-titel { font-size: 13.5px; font-weight: 500; }
.we-neben { font-size: 11.5px; color: var(--faint); }

.pp-vor, .pp-nach { margin: 0; font-size: 12px; line-height: 1.5; color: var(--faint); }
.pp-nach { color: var(--muted); }

/* Bildgenerator im Store Builder — dieselbe Werkbank wie im
   Bilder-Bereich, darum auch dieselbe Breite. */
/* Das Fenster ist der Generator, nur in einem Kasten: derselbe Kopf mit
   Titel links und Einstellungen rechts, dieselbe Werkbank, derselbe
   Verlauf. Die Breite ist so gewaehlt, dass der Inhalt genauso breit
   steht wie auf der Seite (980 plus zweimal Innenrand). */
.modal:has(#sbGenBox) {
  width: min(1028px, 94vw); max-width: none; max-height: 90vh; overflow: auto;
}
#sbGenBox .page-head { margin-bottom: 30px; }
#sbGenBox .bild-drop { cursor: zoom-in; }

/* Ergebnisse im Erzeugen-Fenster */
.sb-gen-verlauf { margin-top: 22px; }
.sb-gen-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 12px; margin-top: 12px;
}
.sb-gen-kachel {
  position: relative; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-flaeche); background: var(--raise);
  aspect-ratio: 1;
}
.sb-gen-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-gen-kachel:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.sgk-fuss {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 0; font-size: 11.5px; opacity: 0;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--text); backdrop-filter: blur(8px);
  transition: opacity .14s ease;
}
.sgk-fuss svg { width: 12px; height: 12px; }
.sb-gen-kachel:hover .sgk-fuss { opacity: 1; }

/* Das Zeichen der Marke ist fest — kein Knopf, kein Zeigefinger. */
.logo-btn.fest { cursor: default; }
.logo-btn.fest:hover { background: none; }

/* Uebersetzen und Pruefen sind ein Paar und sehen auch so aus: gleiche
   Hoehe, gleiche Kante, je eine Haelfte der Zeile unter dem Suchfeld.
   Vorher war das eine ein Knopf und das andere ein blasser Anhang. */
/* Beide Knoepfe so breit wie ihr Wort; die Zielsprache steht daneben,
   nicht darin — im Knopf war sie ein zweiter Gedanke im selben Rahmen.
   Links das Uebersetzen mit seiner Sprache, rechts das Pruefen: das eine
   macht die Arbeit, das andere sieht sie durch. */
.sb-paar { display: flex; align-items: center; gap: 8px; }
.sb-paar > .btn { flex: none; height: 40px; white-space: nowrap; }
.sb-paar > .btn:last-child { margin-left: auto; }
.sb-paar > .btn svg { width: 15px; height: 15px; flex: none; }
.sb-nach {
  margin-left: 6px; min-width: 0;
  font-size: 12.5px; color: var(--faint); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Die gewählte Sprache steht klein am Übersetzen-Knopf, damit man sie
   sieht, ohne das Fenster zu öffnen. */
.btn-hin {
  font-style: normal; font-size: 11.5px; color: var(--faint);
  margin-left: 2px; padding-left: 8px;
  border-left: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  overflow: hidden; text-overflow: ellipsis;
}

/* Die Knopfzeile beginnt an derselben Kante wie der Dateiname darüber.
   Ohne den Ausgleich rückt das Zeichen um das Innenpolster des Knopfes
   nach rechts und die Spalte franst aus. */
/* Dateiname und Angabe stehen auf derselben Kante wie die Beschriftung
   der Knoepfe darunter — das Innenpolster des Knopfes wird oben
   nachgebildet, nicht unten weggezogen. */
/* Der Name endet spaetestens dort, wo der rechte Knopf endet — sonst
   schiebt er sich ueber ihn hinaus. Die Breite gibt die Knopfzeile vor. */
.sb-bdaten .sb-burl, .sb-bdaten .sb-bmeta {
  padding-left: 13px;
  /* Rechts Luft lassen, damit der abgeschnittene Name nicht bis an die
     Kante der Karte stoesst und ueber den letzten Knopf hinausragt. */
  max-width: calc(100% - 18px); box-sizing: border-box;
}
.sb-bdaten .sb-bmeta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-bdaten .sb-btun { margin-left: 0; }
.sb-bdaten .sb-btun .btn.sm { padding: 0 12px; }

/* Einsetzen ist ein Handgriff wie die anderen und traegt darum dasselbe
   Mass. Als breiter Knopf mit Wort sprengte er die Zeile und schob sich
   ueber die Zeichen daneben. */
.cact.einsetzen { color: var(--text); }
.cact.einsetzen:hover { background: var(--hover); }
#sbGenBox .werke { margin-top: 12px; }
/* Frueher wurden Karte und Bildflaeche hier je eine Stufe aufgehellt,
   damit das Verhaeltnis zum helleren Fenstergrund dasselbe bleibt wie auf
   der Seite. Das machte aus der Karte einen grauen Block, wo sie im
   Generator nur ein Rahmen ist. Sie bleibt jetzt auch hier ein Rahmen —
   gleich aussehen ist mehr wert als gleich abgestuft sein. */

/* ============ Launchpad ============
   Copys und Bilder nebeneinander, darunter die Einstellungen und zuletzt
   der Aufbau — in derselben Reihenfolge, in der man ihn liest. */
.up-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.up-spalten + .card-box, .card-box + .card-box { margin-bottom: 16px; }
/* Nebeneinander gilt der Abstand der Karten nicht: die zweite trug ihn
   auch hier, und weil das Raster sie auf die Zeilenhoehe zieht, endete
   ihr Rahmen sechzehn Punkte ueber dem der ersten. Den Abstand nach
   unten setzt schon das Raster selbst. */
.up-spalten > .card-box + .card-box { margin-bottom: 0; }

.up-liste { display: flex; flex-direction: column; }
/* Vier Faecher fuer vier Sachen: Haken, Text, „Mehr", Papierkorb. Hier
   standen fuenf — ein Rest aus der Zeit, als die Marke eine eigene Spalte
   hatte. Seit sie im Text mitlaeuft, fiel der Text in ein Fach, das sich
   nach seinem Inhalt richtet: zugeklappt fiel das nicht auf, aufgeklappt
   sass der ganze Absatz in einer schmalen Saeule und „Weniger" stand
   irgendwo rechts daneben in der Luft. */
.up-zeile {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 0; cursor: pointer;
}
/* Der Papierkorb steht erst unter dem Zeiger. Sein Platz bleibt aber
   immer frei — sonst rutschte die ganze Zeile beim Hinfahren zur Seite. */
.up-weg {
  flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; border-radius: var(--r-teil);
  color: var(--faint); cursor: pointer; opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.up-weg svg { width: 15px; height: 15px; }
.up-eintrag:hover .up-weg, .up-weg:focus-visible { opacity: 1; }
.up-weg:hover { color: var(--text); background: var(--hover); }
/* Aufgeklappt steht der Text ueber mehrere Zeilen. Haken und Marke
   ruecken dann nach oben, sonst schwaemmen sie in der Mitte eines
   Absatzes. */
.up-eintrag.offen .up-zeile { align-items: start; }
.up-eintrag.offen .checkbox, .up-eintrag.offen .up-marke,
.up-eintrag.offen .up-mehr { margin-top: 1px; }
.up-eintrag.offen .up-text {
  white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible;
  line-height: 1.55;
}
/* Minimal: ein Wort, kein Kasten. Es steht nur da, wenn wirklich etwas
   fehlt — das entscheidet copyMehrPruefen() nach dem Zeichnen. */
.up-mehr {
  display: none; flex: none; padding: 0; border: 0; background: none;
  font: inherit; font-size: 11.5px; color: var(--faint);
  cursor: pointer; white-space: nowrap;
}
.up-eintrag.hat-mehr .up-mehr, .up-eintrag.offen .up-mehr { display: block; }
.up-mehr:hover { color: var(--text); }
.up-eintrag + .up-eintrag { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.up-eintrag:not(.an) { opacity: .45; }
/* Das Feld unter der Zeile faengt dort an, wo die Marke anfaengt: es
   gehoert dieser einen Copy und soll nicht wie ein eigener Eintrag
   aussehen. Ruhend ist es nur ein blasser Satz, wie das Feld fuer die
   naechste Copy darunter — erst unter dem Zeiger oder beim Schreiben
   bekommt es seinen Kasten. */
.up-kopf {
  width: calc(100% - 28px); margin: 0 0 9px 28px; height: 28px; padding: 0 10px;
  font: inherit; font-size: 12.5px; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-teil); outline: 0;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.up-kopf::placeholder { color: color-mix(in srgb, var(--faint) 55%, transparent); }
.up-eintrag:hover .up-kopf, .up-kopf:focus { background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text); }
.up-eintrag:hover .up-kopf::placeholder, .up-kopf:focus::placeholder { color: var(--faint); }
/* Die Zieladresse steht direkt unter der Ueberschrift und gehoert zu
   derselben Zeile — darum ruecken die beiden zusammen. Blasser als die
   Ueberschrift: die Adresse ist die Ausnahme, nicht die Regel. */
.up-ziel { margin-top: -5px; color: var(--muted); }
.up-ziel:focus { color: var(--text); }
.up-marke {
  font-size: 12px; font-weight: 600; color: var(--text);
  padding: 3px 9px; border-radius: var(--r-teil); background: var(--raise); white-space: nowrap;
}
/* Im Launchpad laeuft die Marke im Text mit: inline, damit die erste
   Zeile hinter ihr beginnt und die zweite darunter die volle Breite
   bekommt.

   Sie muss dabei in die Zeile passen. Mit der normalen Zeilenhoehe wurde
   die erste Zeile hoeher als die zweite — der Kasten mass dann 2,26
   Zeilen statt 2, und die Kuerzung schnitt wieder mitten hindurch. Enge
   Zeilenhoehe und flacheres Polster halten sie unter dem Zeilenmass. */
.up-eintrag .up-marke {
  display: inline-block; margin-right: 8px;
  line-height: 1.15; padding: 2px 8px; vertical-align: -1px;
}
/* Drei Zeilen — Marks Wunsch vom 08.09.2026.
   Eine Zeile zeigte den Aufhaenger nur angeschnitten („Ik heb mijn eigen
   hond gedood. Niet uit..."), und genau daran erkennt man eine Copy
   wieder. Der Preis ist eine hoehere Liste; die Liste zeigt ohnehin nur
   die ersten vier Copys, und wer mehr will, klappt auf. */
/* Die Breite kommt vom Fach, nicht vom Inhalt: als -webkit-box zog sich
   der Kasten sonst auf die Textbreite zusammen, und eine kurze Copy stand
   als schmaler Streifen mitten in der Zeile. */
.up-text { font-size: 12.5px; color: var(--faint); min-width: 0; flex: 1 1 auto; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; line-height: 1.6; }
/* Aufgeklappt gilt die Begrenzung nicht — dort steht der ganze Text. */
.up-eintrag.offen .up-text { display: block; -webkit-line-clamp: none; }

.up-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.up-bild { position: relative; display: flex; flex-direction: column; gap: 8px; }
.up-bild:not(.an) { opacity: .4; }
.up-bild img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-flaeche);
  background: var(--raise); border: 1px solid var(--border);
}
/* Der Haken liegt auf dem Bild und braucht darum einen Grund — aber nur,
   solange er leer ist; angehakt traegt er seinen eigenen. */
.up-bild .checkbox { position: absolute; top: 7px; left: 7px; z-index: 2; }
.up-bild .checkbox:not(.on) { background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(3px); }
.up-bild .ctagwrap { width: 100%; }
.up-bild .ctagname { width: 100%; min-width: 0; }

/* Noch eine Copy und noch ein Bild — beides steht unter seiner Liste und
   steht dort immer. Ohne das musste man fuer den einen Nachzuegler zurueck
   in die Projektuebersicht und das Launchpad von vorn aufbauen. */
.up-neu { margin-top: 12px; }
.up-neu .copy-form { margin-bottom: 8px; }
.up-neukopf {
  width: 100%; height: 34px; padding: 0 12px; font-size: 13px;
  background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-teil);
  outline: 0; color: var(--text);
}
.up-neukopf::placeholder { color: var(--faint); }

/* Ruhend ist das Feld nur ein blasser Satz — kein Grund, kein Rahmen: die
   Liste darueber traegt schon genug Kaesten, und das hier ist der
   Nachtrag, nicht der Hauptweg. Unter dem Zeiger, beim Schreiben und
   sobald etwas darin steht, kommt der Kasten zurueck, wie ihn die
   Bildkachel daneben auch zeigt. */
.up-neu .copy-form,
.up-neu .up-neukopf { background: transparent; border-color: transparent; }
.up-neu .copy-form .ctagwrap { border-color: transparent; }
.up-neu .copy-input::placeholder,
.up-neu .up-neukopf::placeholder { color: color-mix(in srgb, var(--faint) 55%, transparent); }
.up-neu .add-inline { color: color-mix(in srgb, var(--faint) 55%, transparent); }
.up-neu .copy-form,
.up-neu .copy-form .ctagwrap,
.up-neu .up-neukopf,
.up-neu .add-inline,
.up-neu .copy-input::placeholder,
.up-neu .up-neukopf::placeholder { transition: background .14s ease, border-color .14s ease, color .14s ease; }

/* Voll da, sobald man hingeht — und auch dann, wenn schon ein Entwurf
   drinsteht: getippter Text darf nicht abgeblendet wirken. */
.up-neu:hover .copy-form,
.up-neu:focus-within .copy-form,
.up-neu:has(.copy-input:not(:placeholder-shown)) .copy-form {
  background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text);
}
.up-neu:hover .up-neukopf,
.up-neu:focus-within .up-neukopf,
.up-neu:has(.up-neukopf:not(:placeholder-shown)) .up-neukopf {
  background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text);
}
.up-neu:hover .copy-form .ctagwrap,
.up-neu:focus-within .copy-form .ctagwrap { background-image: linear-gradient(var(--hover), var(--hover)); }
.up-neu:hover .copy-input::placeholder,
.up-neu:focus-within .copy-input::placeholder,
.up-neu:hover .up-neukopf::placeholder,
.up-neu:focus-within .up-neukopf::placeholder { color: var(--faint); }
.up-neu:hover .add-inline,
.up-neu:focus-within .add-inline { color: var(--muted); }
/* Hier stand derselbe hellere Rahmen fuer das Feld, in dem gerade
   geschrieben wird. Er faellt mit weg — Marks Ansage vom 10.09.2026. */
/* Die Kachel behaelt ihr Quadrat: die Bilder daneben tragen unter sich
   noch ihr Namensfeld, und gedehnt stuende sie um dessen Hoehe zu hoch. */
.up-bildneu { align-self: start; width: 100%; }

/* Zwoelf Punkte, ueberall dieselben: zwischen den Feldern, zwischen den
   Zeilen, zwischen den beiden Rastern und unter dem Namen. Vorher stand
   im Raster eine 10 und ringsum eine 12 — die Zeilen sassen dadurch
   dreiundsiebzig auseinander, die Bloecke aber fuenfundsiebzig. Zwei
   Punkte, die man einzeln nicht sieht und zusammen als Unruhe liest. */
.up-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.up-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* Ein Feld ueber die ganze Zeile — fuer das, was ein Satz ist und keine
   Auswahl. Im 168-Pixel-Fach stand es nach fuenf Woertern am Rand an. */
.up-feld.voll { grid-column: 1 / -1; }

/* Hier stand der Stil fuer „erkannt: Flohfrei" unter dem Markenfeld. Die
   Zeile ist weg — sie fragte nach nichts und fuehrte zu nichts —, und
   damit auch ihr Stil. */
/* Zwei Namen brauchen zwei Faecher — sonst stehen beide als drei Buchstaben da. */
.up-feld.breit { grid-column: span 2; }
.up-feld .modellwahl { width: 100%; max-width: none; height: 38px; }
/* Beide Zeilen der Kampagnenkarte haengen unten aus: dann endet jedes
   Bedienteil einer Zeile auf derselben Linie, gleich ob daneben ein hoher
   Kasten steht. Erst dadurch laesst sich ueberhaupt ein gleicher Abstand
   halten — vorher endeten die kurzen Felder zwanzig Punkte ueber dem
   Budgetkasten, und die naechste Zeile hatte je nach Nachbar mal null,
   mal zwanzig Punkte Abstand. Zwischen den Zeilen stehen jetzt dieselben
   zwoelf Punkte wie zwischen dem Namen und der ersten Zeile. */
/* In der Kampagnenkarte tragen alle Bedienteile dasselbe Mass. Vorher
   waren Auswahlfeld, Datumsfeld und Umschalter drei, vier Punkte
   verschieden hoch — die Felder standen zwar auf einer Linie, ihre
   Beschriftungen aber auf drei. */
.up-gitter.oben, .up-gitter.unten { align-items: end; }
.up-gitter.oben > * > .opt-sel,
.up-gitter.oben > * > .up-eingabe,
.up-gitter.oben > * > .up-mitzeichen > .up-eingabe,
.up-gitter.oben > * > .up-wahl,
.up-gitter.unten > * > .up-eingabe,
.up-gitter.unten > * > .up-wahl { height: 38px; width: 100%; }
/* Der Startknopf traegt Mass und Farbe der Auswahlfelder daneben — nur
   dass dahinter der eigene Kalender aufgeht. */
.up-sel {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 38px;
  padding: 0 12px; border-radius: var(--r-teil); cursor: pointer; font: inherit; font-size: 13.5px;
  background: var(--raise); border: 1px solid var(--border); color: var(--text);
}
.up-sel span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-sel span.ph { color: var(--faint); }
.up-sel svg { width: 15px; height: 15px; flex: none; color: var(--faint); }
.up-gitter.oben .seg.klein { height: 38px; }
.up-gitter.oben .seg.klein .seg-btn { height: 100%; }
/* Ein Feld mit Zeichen am Ende — das Zeichen sitzt darin, damit das Feld
   so hoch bleibt wie jedes andere. */
.up-mitzeichen { position: relative; display: block; }
.up-mitzeichen .up-eingabe { padding-right: 32px; font-variant-numeric: tabular-nums; }
.up-mitzeichen em {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 12.5px; color: var(--faint); pointer-events: none;
}
/* Dasselbe Zeichen, aber anfassbar: Ein Klick tauscht Euro gegen Prozent
   — Marks Ansage vom 12.09.2026: „man soll auf das € / prozent im feld
   selbst draufdruecken koennen dann aendert es sich." Es sitzt an
   derselben Stelle wie das stumme `em`, traegt aber eine Flaeche, damit
   man sieht, dass es eine Schaltflaeche ist. */
.up-einheit {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  height: 26px; min-width: 28px; padding: 0 8px; border-radius: var(--r-feld);
  border: 0; background: none; color: var(--faint);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.up-einheit:hover { background: var(--hover); color: var(--text); }
.up-mitzeichen input::-webkit-outer-spin-button,
.up-mitzeichen input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.up-gitter.unten { margin-top: 12px; }
.up-feld.breit { margin-bottom: 12px; }

/* Ein Kasten je Gruppe. Die Linie ist die weiche — eine Karte in der
   Karte soll sich abheben, aber nicht mit der Aussenkante wetteifern. */
.up-block {
  border: 1px solid var(--border-soft); border-radius: var(--r-flaeche);
  padding: 13px 14px 14px;
}
/* Der Abstand steht zwischen den Kaesten, nicht ueber jedem. :first-of-type
   griff hier nicht: vor dem ersten Kasten steht das Namensfeld, und das
   ist ebenfalls ein div — der erste Kasten trug damit seine zwoelf Punkte
   zusaetzlich zu den zwoelf des Namens. */
.up-block + .up-block { margin-top: 12px; }
/* Alle Kaesten teilen dasselbe Spaltenmass. auto-fit laesst leere Spalten
   zusammenfallen — ein Kasten mit zwei Feldern verteilte sie dadurch auf
   die ganze Breite, einer mit vieren auf Viertel, und dasselbe Auswahlfeld
   war je nach Nachbarschaft doppelt so breit. auto-fill haelt die leeren
   Spuren offen: gleiche Breite in jedem Kasten, Rest bleibt frei. */
.up-block .up-gitter { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
/* .opt-sel traegt eine Obergrenze von 190 Punkten — sinnvoll dort, wo es
   allein in einer breiten Zeile steht, falsch in einer Spalte: das
   Auswahlfeld blieb sieben Punkte schmaler als der Knopf daneben, und
   genau das sah man als ungleiche Groessen. Im Fach nimmt es die
   Fachbreite. */
.up-block .opt-sel { max-width: none; width: 100%; }
/* Umschalter nehmen die Breite ihrer Woerter, nicht die des Fachs. .seg
   ist inline-flex und wuerde das von selbst tun — als Kind eines
   Spalten-Flexkastens wird es aber gedehnt. „Aus / An" stand dadurch in
   199 Punkten, von denen 114 leer waren, und sah aus wie ein Feld, dem
   etwas fehlt. Ein Auswahlfeld fuellt sein Fach weiterhin: dort ist die
   Breite die Flaeche, auf die man klickt. */
.up-block .up-feld > .seg { align-self: start; }
/* Der Titel steht als normaler Satz da, nicht in Versalien: gesperrte
   Grossbuchstaben lesen sich langsamer, und die Trennung leistet jetzt
   ohnehin der Kasten. */
.up-gruppe {
  font-size: 12.5px; color: var(--muted); margin: 0 0 11px;
}
/* Die Karten des Launchpads schliessen unten so weit ab wie oben. .ov
   allein traegt zwoelf unten gegen sechzehn oben — richtig fuer die
   Listen der Uebersicht, deren letzte Zeile ihr eigenes Polster hat,
   falsch hier, wo unten ein Bedienteil steht und die Kante zu nah kommt.
   :has greift genau die Karten mit Feldern, den Rest laesst es in Ruhe. */
.card-box.ov:has(.up-gitter) { padding-bottom: 16px; }
.up-eingabe {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--feld-grund); border: 1px solid var(--border); border-radius: var(--r-teil);
  color: var(--text); font: inherit; font-size: 13.5px; outline: 0;
}
/* Hier stand kurz eine groessere Schrift fuer die beiden Namensfelder.
   Gemeint war der Stamm: „ich sagte beim stamm ist das adset name etwas
   klein mach es normal gross." Die Felder stehen wieder wie die
   uebrigen. */
.feld-zusatz { font-style: normal; color: var(--faint); font-size: 11.5px; margin-left: 6px; }

.up-laender { display: flex; flex-wrap: wrap; gap: 7px; }
.up-land {
  padding: 6px 12px; border-radius: var(--r-teil); cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
}
.up-land:hover { color: var(--text); background: var(--hover); }
.up-land.on { border-color: var(--text); color: var(--text); background: var(--raise); }

/* Der Baum: Kampagne, darunter je Copy eine Gruppe, darin die Anzeigen. */
.up-baum { display: flex; flex-direction: column; gap: 12px; }
.ub-kampagne { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); }
.ub-summe { margin-left: auto; font-size: 11.5px; color: var(--faint); font-weight: 400; }
.ub-kampagne svg { width: 18px; height: 18px; color: var(--faint); }
.ub-gruppe { border-left: 2px solid var(--border); padding-left: 14px; margin-left: 8px; }
.ub-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin-bottom: 8px; }
.ub-kopf svg { width: 15px; height: 15px; color: var(--faint); }
.ub-zahl { font-size: 11.5px; color: var(--faint); }
.ub-anzeigen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
/* Marks Ansage vom 14.09.2026: „hier in aufbau die ad karten die helle
   schaltflaechen farbe wie im launchpad bitte." Sie hatten nur einen
   Umriss auf dem Grund des Fensters — derselbe Fall wie im Launchpad
   vorher. Jetzt tragen sie den Ton der Felder gegenueber, und der
   Umriss bleibt nur als durchsichtige Linie stehen, damit die Kachel
   ihre Groesse behaelt. */
/* Und der Umriss ist wieder zu sehen — Marks Ansage vom 16.09.2026:
   „hier im aufbau beim launchpad gib den anzeigen umriss." Er stand
   seit dem 14.09.2026 auf `transparent`: Er hielt nur noch das Mass der
   Kachel, gezeichnet hat er nichts. Bei elf Kacheln in zwei Gruppen
   floss dadurch alles zu einer Flaeche zusammen.

   Die Hausform fuer einen Umriss auf einer eigenen Flaeche: vier
   Prozent Text ueber genau dieser Flaeche — dieselbe Rechnung wie bei
   `--lp-rand` im Launchpad nebenan und bei den Copy-Zeilen im
   Projekt. */
.ub-anzeige {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  gap: 2px 10px; align-items: center;
  padding: 8px 10px; border-radius: var(--r-feld);
  border: 1px solid color-mix(in srgb, var(--text) 4%, var(--karte-feld));
  background: var(--karte-feld);
}
.ub-anzeige img { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: cover; border-radius: var(--r-feld); background: var(--raise); }
/* Der Platz, an dem noch kein Bild liegt. Dieselben vierunddreissig
   Pixel wie ein Bild — sonst rutschte die Zeile daneben, sobald eines
   dazukommt. Gestrichelt, weil es eine Luecke ist und kein Zustand. */
.ub-anzeige .ub-leer {
  grid-row: 1 / 3; width: 34px; height: 34px; border-radius: var(--r-feld);
  display: grid; place-items: center;
  /* Die dritte Sprosse der Leiter — „Linie, Rahmen". Ein eigener
     Prozentsatz waere eine sechste Stufe, und die gibt es nicht. */
  border: 1px dashed var(--schleier-3);
  color: var(--faint);
}
.ub-anzeige .ub-leer svg { width: 15px; height: 15px; }
/* Der Name steht fett — Marks Ansage vom 18.09.2026: „anzeigename bitte
   fettgedruckt." Er ist die Aufschrift der Zeile; darunter steht die
   Copy leiser. Ohne den Unterschied lesen sich beide als eine Angabe. */
.ub-name { font-size: 12.5px; color: var(--text); font-weight: 600; }
.ub-text { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Rest einer Gruppe, der nicht mehr mit Bild gezeigt wird. Er sitzt
   auf einer eigenen Zeile und nicht in der Kachelreihe: als Kachel
   getarnt saehe er aus wie eine Anzeige, die er nicht ist. */
.ub-mehr {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--faint);
  padding: 7px 2px 1px;
}

/* Was Meta an dieser Menge stoeren wird — steht ueber dem Aufbau, damit
   man es liest, bevor man auf Anlegen drueckt. */
.up-grenze { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.up-grenze span {
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  padding: 10px 12px; border-radius: var(--r-flaeche);
  background: var(--raise); border: 1px solid var(--border);
}

/* Dieselbe Gestalt wie der Lauf im Builder: die Punkte auf einer Linie,
   der Text eingerueckt daneben. Vorher war es eine flache Aufzaehlung mit
   Abstand dazwischen — dieselben Angaben, aber ohne den Faden, der sie zu
   einem Vorgang macht. Was bleibt, sind die Farben: gruen fuer erledigt,
   rot fuer schiefgegangen. Die hat der Builder nicht, und hier sagen sie
   das Wichtigste. */
.up-lauf { margin-top: 16px; display: flex; flex-direction: column; padding-left: 4px; }
/* Der Kasten steht auch leer im Baum, damit er sich waehrend eines Laufs
   einzeln nachziehen laesst — leer soll er aber nichts einnehmen. */
.up-lauf:empty { display: none; }
.up-schritt {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  padding: 0 0 14px 22px; font-size: 13px; color: var(--muted);
}
.up-schritt:last-child { padding-bottom: 0; }
/* Nur die neueste Zeile kommt herein. Der Kasten wird bei jedem Schritt
   ganz neu geschrieben — liesse man alle Zeilen einfliegen, flackerte bei
   neun Anzeigen die ganze Liste bei jedem Fortschritt. */
.up-schritt:last-child { animation: sbRein .26s ease both; }

/* Die Linie zwischen den Punkten. */
.up-schritt::before {
  content: ''; position: absolute; left: 4px; top: 12px; bottom: 0;
  width: 1px; background: color-mix(in srgb, var(--text) 14%, transparent);
}
.up-schritt:last-child::before { display: none; }

.us-punkt {
  position: absolute; left: 0; top: 5px;
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}
.us-text { flex: 1; min-width: 0; }
.up-schritt.laeuft { color: var(--text); }
.up-schritt.laeuft .us-punkt { background: var(--accent-soft); animation: sbPuls 1.4s ease-in-out infinite; }
.up-schritt.fertig .us-punkt { background: #3fa76a; }
.up-schritt.schief .us-punkt { background: #d0685f; }
.up-schritt.fertig .us-text,
.up-schritt.schief .us-text { color: var(--text); }
/* Der Lauf braucht sie nicht mehr, das Zeichen im Zugangsknopf und die
   Icon-Knoepfe schon — sie stand nur zufaellig hier. */
@keyframes pulseDot { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

/* Balken und Uhr unter den Schritten, auf derselben Kante wie ihr Text —
   dieselbe Leiste wie im Builder. */
.up-fussleiste {
  display: flex; align-items: center; gap: 14px;
  padding-left: 22px; margin-top: 10px;
}

.up-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* Die Zusaetze als Liste: was abgeschaltet wird, mit einem Wort dazu,
   was es waere. Ruht der Schalter, tritt die Liste zurueck. */
.up-zusatzliste { display: flex; flex-direction: column; gap: 8px; }
.up-zusatzliste.ruht, .up-zusatz + .field-hint.ruht { opacity: .45; }
/* Der Satz darunter gehoert zur Liste und verblasst mit ihr — sonst stuende
   er hell da und behauptete etwas ueber Zusaetze, die gar nicht abgestellt
   werden. */
.field-hint.ruht { opacity: .45; }
.up-zusatz { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.uz-punkt { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--faint); }
.uz-punkt svg { width: 12px; height: 12px; }
/* Auch das eine, das anbleibt, traegt keine eigene Farbe — der Haken sagt
   schon, was gemeint ist, und gruen daneben las sich wie eine Wertung. */
.up-zusatz.bleibt .uz-punkt { color: var(--text); }
.uz-name { font-size: 13px; color: var(--text); }
/* Die Regel fuer ein `b` in der Zeile ist am 18.09.2026 mit der
   Ueberschrift gegangen — dort steht jetzt nur noch die Copy. */

/* Die ganze Zeile ist der Knopf, nicht nur das Kaestchen. */
.up-zeile { border: 0; background: none; width: 100%; text-align: left; font: inherit; }
.up-zeile:hover .up-marke { background: var(--hover); }
.up-bildwahl {
  position: relative; display: block; padding: 0; border: 0; background: none;
  cursor: pointer; width: 100%;
}
.up-bildwahl .checkbox { position: absolute; top: 7px; left: 7px; z-index: 2; }
.up-fusszeile {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  font-size: 12px; color: var(--faint);
}
.up-fusszeile .spacer { flex: 1; }

/* Seite und Pixel als Knopf, der eine Liste aufmacht — Mass und Farbe wie
   die Auswahlfelder daneben. */
.up-wahl {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border-radius: var(--r-teil); cursor: pointer; width: 100%; min-width: 0;
  border: 1px solid var(--border); background: var(--raise); color: var(--muted);
  font: inherit; font-size: 13.5px; text-align: left;
}
.up-wahl.on { color: var(--text); }
.up-wahl svg { width: 15px; height: 15px; flex: none; color: var(--faint); }

.up-wahl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Nummer hinter dem Namen: sie belegt, dass die richtige Seite gemeint
   ist, wenn zwei gleich heissen — aber sie draengt sich nicht vor. */
.up-wahl-nr {
  margin-left: auto; padding-left: 10px; flex: none;
  font-style: normal; font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.up-wahl[disabled] { opacity: .5; cursor: default; }
/* Hier stand ein Strich links an der Seite, die dem Projekt selbst
   gehoert — Marks Ansage vom 11.09.2026: „mach bei seite diesen strich
   links weg." Er sollte eine geerbte Seite von einer gewaehlten
   unterscheiden; in einer Maske aus lauter randlosen Feldern las er sich
   als Fehler. */
.up-wahl.laeuft svg { animation: pulseDot 1.2s ease-in-out infinite; }
html[data-anim="off"] .up-wahl.laeuft svg { animation: none; }
/* Ein Werbekonto, das nicht aktiv ist, steht mit in der Liste — Meta nimmt
   darin nichts an, und das erfaehrt man sonst erst beim Hochladen. */
.menu .wahl-ruht {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #d0685f; margin-right: 2px;
}

/* Was die KI beim Anpassen gerade tut — neben den drei Punkten. */
.sb-tun-runde { margin-left: 10px; color: var(--faint); font-size: 12px; }

/* ============ Anleitung zum Token ============
   Sechs Schritte, jeder mit dem Ort davor, an dem er stattfindet — bei
   Meta liegen sie in drei verschiedenen Oberflaechen, und die Hälfte der
   Sucherei ist die Frage, wo man gerade sein muss. */
.textknopf {
  display: inline; padding: 0; border: 0; background: none;
  font: inherit; color: var(--muted); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.textknopf:hover { color: var(--text); }

.anl-liste { list-style: none; counter-reset: anl; margin: 0 0 20px; padding: 0; }
.anl-schritt {
  counter-increment: anl; position: relative;
  padding: 0 0 16px 34px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.anl-schritt:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.anl-schritt::before {
  content: counter(anl);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--raise); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Der Schritt, an dem es fast immer hakt, traegt seine Nummer hell — nicht
   als Warnung, sondern damit das Auge beim Suchen dort zuerst landet. */
.anl-schritt.achtung::before { background: var(--panel); color: var(--text); border-color: var(--muted); }
.anl-titel { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.anl-wo { font-size: 12px; color: var(--faint); margin-bottom: 7px; }
.anl-wo a { color: var(--muted); text-underline-offset: 2px; }
.anl-wo a:hover { color: var(--text); }
.anl-text { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.anl-text b { color: var(--text); font-weight: 600; }
.anl-text i { font-style: normal; color: var(--text); }
.anl-text code, .anl-fall code {
  font-size: 12px; padding: 1px 5px; border-radius: var(--r-klein);
  background: var(--raise); border: 1px solid var(--border); color: var(--text);
  white-space: nowrap;
}
.anl-hakt { padding-top: 16px; border-top: 1px solid var(--border); }
.anl-fall { font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.anl-fall b { display: block; color: var(--text); font-weight: 600; }
.anl-fall span { color: var(--muted); }

/* ============ Die Tür ============
   Ohne Konto sieht man nur das hier. Ruhig gehalten: eine Karte in der
   Mitte, kein Menü, keine Ablenkung — es gibt hier ohnehin nur zwei
   Wege, und beide stehen darauf. */
.tuer {
  /* #app ist ein Flex-Behaelter fuer Seitenleiste und Inhalt — ohne
     flex:1 bekaeme die Tuer nur die Breite ihres Inhalts und klebte
     links oben in der Ecke. */
  flex: 1 1 auto; min-height: 100vh; display: grid; place-items: center;
  padding: 24px; background: var(--bg);
}
.tuer-karte {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-gross); padding: 34px 30px 28px;
  box-shadow: var(--shadow);
}
.tuer-logo { display: grid; place-items: center; margin: 0 auto 14px; width: 46px; height: 46px;
  border-radius: var(--r-flaeche); background: var(--raise); color: var(--text); }
.tuer-logo svg { width: 24px; height: 24px; }
/* Der Name auf der Tuer traegt dieselbe Marke wie die Seitenleiste —
   `.wordmark` gibt Gewicht und Sperrung, hier steht nur das Mass. Ohne
   `flex: none` zoege die Regel der Leiste (`flex: 1`) die Ueberschrift
   auseinander. */
.tuer-karte h1 { font-size: 26px; margin: 0 0 8px; }
.tuer-karte h1.wordmark { flex: none; padding-left: 0; font-size: 26px; }
.tuer-satz { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.tuer-knoepfe { display: flex; flex-direction: column; gap: 9px; }
.tuer-knoepfe .btn, .tuer-knoepfe .btn-white { justify-content: center; }
.tuer-klein { margin-top: 14px; font-size: 12.5px; color: var(--faint); }
.tuer-hinweis {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--faint); font-size: 12.5px; line-height: 1.55;
}

/* ============ Schritte unter einer Aufgabe ============
   Sie sollen die Liste nicht aufblähen. Der Knopf zum Anlegen taucht wie
   der Papierkorb erst beim Darüberfahren auf, die Schritte selbst stehen
   schmal und blass darunter — ohne Priorität, ohne Datum, ohne Rahmen. */
.todo-tools { display: inline-flex; align-items: center; gap: 2px; justify-self: end; }
.todo .sub { opacity: 0; }
.todo:hover .sub { opacity: 1; }
.todo-titel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.todo-titel .t { flex: 1 1 auto; }
/* Gemessene Zeit und Schrittzahl stehen zusammen zwischen Prioritaet und
   Datum — feste Spaltenbreite, damit die Zeilen darunter nicht wandern. */
.todo .tmeta { display: inline-flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
.tsub-zahl { font-size: 11.5px; color: var(--faint); white-space: nowrap; flex: none; }

.tsubs { padding: 0 12px 6px 44px; display: flex; flex-direction: column; }
.tsub { display: grid; grid-template-columns: 16px minmax(0, 1fr) 24px; align-items: center;
  gap: 10px; min-height: 28px; }
.tsub .checkbox.klein { width: 16px; height: 16px; border-radius: var(--r-klein); margin: 0; }
.tsub .checkbox.klein svg { width: 12px; height: 12px; }
.tsub-t {
  background: none; border: 0; outline: 0; width: 100%; min-width: 0;
  font: inherit; font-size: 13.5px; color: var(--muted);
  padding: 3px 5px; border-radius: var(--r-feld);
}
.tsub-t:focus { background: var(--panel); color: var(--text); }
.tsub.done .tsub-t { text-decoration: line-through; color: var(--faint); }
.tsub .del { opacity: 0; width: 24px; height: 24px; }
.tsub:hover .del { opacity: .7; }
.tsub .del svg { width: 12px; height: 12px; }
/* Ein abgehakter Schritt ist kein Ereignis — er faerbt sich gedaempft,
   nicht in der Signalfarbe der Aufgabe darueber. */
.tsub .checkbox.klein.on {
  background: color-mix(in srgb, var(--text) 45%, transparent);
  border-color: transparent; color: var(--panel);
}

/* Zugangscodes — nur der Verwalter sieht diesen Abschnitt. Der Code selbst
   steht in Schreibmaschinenschrift, weil man ihn abtippt oder vorliest. */
.code-neu { display: flex; gap: 8px; margin-bottom: 14px; }
.code-neu input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border-radius: var(--r-teil); border: 1px solid var(--border);
  background: var(--feld-grund); color: var(--text); font-size: 13px; outline: 0;
}
.code-neu .btn-white { flex: none; }
.code-liste { display: flex; flex-direction: column; }
.code-zeile {
  display: flex; align-items: center; gap: 12px; padding: 9px 2px;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.code-liste .code-zeile:first-child { border-top: 0; }
.code-wert {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; letter-spacing: .3px; cursor: pointer;
}
.code-wert:hover { color: var(--text); }
.code-notiz { flex: 1; min-width: 0; font-size: 12.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-lage { flex: none; font-size: 11.5px; color: var(--faint); }
/* Benutzte Codes bleiben stehen, treten aber zurueck — an ihnen haengt
   ein Konto, und die Spur soll nachvollziehbar bleiben. */
.code-zeile.weg .code-wert { color: var(--faint); text-decoration: line-through; }
/* Marks Auftrag vom 15.09.2026: „jemanden den zugang nehmen indem ich den
   zugangscode aus dem system loesche." Der Knopf dafuer sieht aus, was er
   ist — es haengt ein Konto daran. */
.code-zeile .btn.sm.gefahr { flex: none; color: #e5534b; border-color: color-mix(in srgb, #e5534b 34%, transparent); }
.code-zeile .btn.sm.gefahr:hover { background-color: color-mix(in srgb, #e5534b 14%, transparent); color: #e5534b; }
.code-sql { margin-top: 14px; }
.code-sql summary { font-size: 11.5px; color: var(--faint); cursor: pointer; }
.code-sql summary:hover { color: var(--text); }
.code-sql .sqlbox { margin-top: 9px; }

/* Meldung aus einem Lauf — derselbe Kasten wie ueberall, nur mit einem
   Schliessen-Knopf rechts: Man soll sie auch wieder loswerden. */
.lauf-fehler { margin-top: 12px; animation: sbRein .24s ease both; }
.lf-zeichen { flex: none; margin-top: 1px; color: #e5484d; display: inline-flex; }
/* Derselbe Kasten fuer eine Auskunft statt einer Warnung: gedaempft
   statt rot. Ein gelungener Lauf soll nicht aussehen wie ein
   misslungener, bloss weil es etwas dazu zu sagen gibt. */
.lauf-fehler.ruhig .lf-zeichen { color: var(--faint); }
.lauf-fehler.ruhig .lf-text { color: var(--muted); }
.lf-text { flex: 1; min-width: 0; }
.lf-zu {
  flex: none; margin: -3px -4px 0 0; padding: 4px; border: 0; border-radius: var(--r-feld);
  background: none; color: var(--faint); cursor: pointer;
}
.lf-zu:hover { color: var(--text); background: var(--hover); }

/* Ein Nachbau ohne Inhalt: derselbe Platz wie der Rahmen, aber mit einer
   Erklaerung darin statt einer weissen Flaeche. */
.sb-rahmen-leer {
  background: var(--panel); border-radius: var(--r-flaeche); overflow: auto;
  display: grid; align-content: start;
}

/* Verweise in den Hinweiszeilen tragen die Schriftfarbe, nicht das Blau des
   Browsers — im dunklen Fenster leuchtet das sonst heraus. */
.field-hint a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.field-hint a:hover { color: var(--muted); }

/* Der zweite Weg zu Shopify: die Schritte im eigenen Admin. Klein
   gehalten — es ist eine Anleitung, keine Ansage. */
.shop-schritte {
  margin: 12px 0 0; padding-left: 18px;
  font-size: 12.5px; line-height: 1.75; color: var(--muted);
}
.shop-schritte li { margin-bottom: 2px; }
.btn-mini {
  display: inline-block; margin-top: 4px; padding: 3px 8px;
  border: 1px solid var(--border); border-radius: var(--r-knopf); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 11.5px; cursor: pointer;
}
.btn-mini:hover { background-image: linear-gradient(var(--hover), var(--hover)); }

/* ============ Team ============
   Der einzige Bereich, dessen Inhalt mehreren gehört. Er sieht darum aus
   wie der Rest des Hauses und nicht wie ein Fremdkörper — die Zeilen sind
   dieselben wie in einer Copy-Liste, nur dass unter jeder steht, wer sie
   eingetragen hat. Ohne diese Zeile wüsste in einem geteilten Brett
   niemand, wen er fragen muss. */
.team-sub {
  margin: -6px 0 18px; max-width: 62ch;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

.tm-liste { display: flex; flex-direction: column; }
.tm-zeile {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.tm-liste > .tm-zeile:first-child { border-top: 0; }
/* Ein Plan hat kein Kästchen — dann rückt sein Text an dessen Stelle. */
.tm-zeile > .tm-koerper:first-child { grid-column: 1 / 3; }
.tm-zeile .checkbox { margin-top: 1px; }
.tm-koerper { min-width: 0; }
.tm-titel { font-size: 14px; line-height: 1.5; color: var(--text); word-break: break-word; }
.tm-text {
  margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
}
/* Wer und wann — klein, denn es beantwortet eine Frage, die man nur
   manchmal stellt. */
.tm-wer { margin-top: 5px; font-size: 11.5px; color: var(--faint); }
.tm-wer span { margin-left: 8px; }
/* Abgehakt bleibt stehen und wird blass: durchgestrichen und weg wäre
   zweimal dieselbe Aussage, und weg wäre eine zu viel. */
.tm-zeile.ab .tm-titel { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.tm-zeile.ab .tm-text { color: var(--faint); }
/* Der Papierkorb kommt erst unter dem Zeiger — in einem Brett, das allen
   gehört, soll er nicht bei jeder Zeile zum Klicken einladen. */
.tm-zeile .icon-btn { opacity: 0; }
.tm-zeile:hover .icon-btn, .tm-zeile .icon-btn:focus-visible { opacity: 1; }

/* Das SQL zum Einrichten: zum Lesen und Kopieren da, nicht zum Schmücken. */
.team-sql {
  margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r-flaeche);
  background: var(--raise); border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.65; color: var(--muted);
  white-space: pre; overflow-x: auto;
}
.icon-btn.laeuft svg { animation: pulseDot 1.2s ease-in-out infinite; }
html[data-anim="off"] .icon-btn.laeuft svg { animation: none; }

/* Aufgaben zwischen den Prioritäten ziehen — unsichtbar, bis gezogen wird */
.prio-ablage { border-radius: var(--r-flaeche); transition: background .12s ease, box-shadow .12s ease; }
.prio-ablage.drueber {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
}
/* ============ To-Do nach Entwurf 11 ============
   Marks Wahl vom 16.09.2026 aus fuenfzig: „bau mal 11 fuer todo." Die
   drei Stufen stehen nebeneinander statt untereinander — was dringend
   ist, steht damit immer an derselben Stelle, und eine leere Stufe
   kostet keine halbe Seite.

   Die Zeile wird darin zur Karte: In einer Spalte von 340 Pixeln haben
   sechs Spalten nebeneinander keinen Platz. Dasselbe Markup, zwei
   Reihen — oben Kaestchen, Aufgabe und die Handgriffe, unten Ziel,
   Stufe, gemessene Zeit und Datum. */
/* Vierzehn Pixel unter dem Eingabefeld — Marks Ansage vom 16.09.2026:
   „bisschen mehr abstand vom todoeingabefeld zu den todos bzw den prio
   stufen aber nicht viel."

   Gemessen standen dort vier: Das Feld klebte am Brett, waehrend
   darueber zweiundzwanzig Luft zur Reiterzeile stehen. Vierzehn ist
   sichtbar mehr und bleibt trotzdem enger als oben — das Feld gehoert
   zu dem, was darunter kommt, nicht zu den Reitern darueber. */
.prio-brett {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; align-items: start; margin-top: 14px;
}
.prio-brett .prio-ablage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Der Abschnitt „Erledigt" unter dem Brett ist selbst ein Brett mit
   EINER Spalte — Marks Meldung vom 18.09.2026: „bei alle soll unten bei
   todos auch wie oben karten drumherum haben genau gleiches design."

   Die Karte kommt vom Brett, nicht von der Aufgabe. Dieselbe Spaltenzahl
   wie oben, damit die Karten unten genauso breit sind wie die darueber —
   eine Karte in voller Breite waere ein anderes Mass und damit wieder ein
   anderes Aussehen. */
.prio-brett.fertig-brett { margin-top: 0; }
/* Rechts ohne Polster: Die zwei Pixel standen zwischen der Zahl und der
   Kante der Karte darunter — gemessen 314 gegen 316. Links bleiben sie:
   Dort steht die Aufschrift, und die richtet sich nach nichts. */
.prio-brett .group-title { margin: 0; padding: 0 0 2px 2px; border: 0; }
/* Die Zahl steht rechts am Spaltenkopf — so wie in Entwurf 11 und 12.
   Stuende sie direkt hinter dem Namen, saesse sie bei „Überfällig"
   woanders als bei „Heute", und die drei Koepfe haetten keine Kante. */
/* Die Zahl neben einer Gruppenaufschrift — leise und in normaler
   Staerke, damit sie die Aufschrift nicht ueberschreit. Stand bisher als
   Stil im Markup und galt darum nur dort, wo jemand daran gedacht
   hatte. */
.gt-zahl { color: var(--faint); font-weight: 400; }
/* Die Zahl steht buendig mit der Karte darunter — Marks Ansage vom
   18.09.2026: „die zahlen wieviel todos pro sortierung vorhanden sein
   sollen rechts mit der todo karte aligned sein."

   Sie stand 42 Pixel zu weit innen, und schuld war der Knopf dahinter:
   „+" steht immer im Dokument und ist nur unsichtbar, bis man ueber die
   Zeile faehrt. Seine 24 Pixel Breite, sein Rand und die Luecke der
   Zeile schoben die Zahl nach links — und weil er nur beim Hinfahren zu
   sehen ist, sah es aus, als stuende die Zahl einfach falsch.

   Jetzt steht er VOR der Zahl, gleich hinter der Aufschrift, und die
   Zahl bekommt den freien Platz. Damit endet sie auf derselben Kante
   wie die Karte darunter — im Brett wie im Abschnitt „Erledigt", wo es
   den Knopf gar nicht gibt. */
.prio-brett .gt-zahl { margin-left: auto; order: 3; }
.prio-brett .group-title .gruppe-neu { order: 2; margin-left: 0; }
.prio-brett .todo-block {
  background: var(--raise); border: 1px solid var(--border);
  border-radius: var(--r-flaeche); overflow: hidden;
}
/* Entwurf 22 aus fuenfundzwanzig — Marks Wahl vom 16.09.2026 zur
   Anordnung der Karte: eine Kopfzeile auf eigener Flaeche, darunter
   Kaestchen und Aufgabe.

   Der Gewinn ist die Trennung: Oben steht, was die Aufgabe EINORDNET —
   Stufe, Stand, Frist, die Griffe. Unten steht die Aufgabe selbst. In
   der Fassung davor lief beides durcheinander, und der Titel stand
   zwischen Kaestchen und Griffen eingeklemmt.

   Flex statt Raster: Die Kopfzeile traegt ihre Flaeche in den Teilen
   selbst, und ein Raster haette Kaestchen und Stufe in dieselbe Spalte
   gezwungen — 20 Pixel breit das eine, sechzig das andere. Den Umbruch
   erzwingt ein leeres Element voller Breite zwischen den beiden
   Reihen. */
.prio-brett .todo {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0; padding: 0; min-height: 0;
}
/* EINE Flaeche fuer die ganze Kopfzeile, nicht vier — Marks Meldung vom
   16.09.2026: „es ist immernoch unterbrochen weil es 2 felder sind mach
   das zur einer kopfzeile kein hover effekt oder so."

   Vier Teile mit je eigener Fuellung ergeben vier Flaechen: Zwischen
   ihnen bleiben Haarlinien stehen, und die Stufe bringt aus ihrer
   Grundregel zusaetzlich eine eigene Rundung und einen Schleier beim
   Zeigen mit — dann sieht ein Teil der Zeile aus wie ein Knopf und der
   Rest wie ein Streifen.

   Die Flaeche traegt jetzt die Karte selbst, als Streifen hinter den
   Teilen. Das geht, weil die Hoehe der Kopfzeile feststeht: vierunddreissig
   Pixel, oben an der Kante. Die Teile selbst sind durchsichtig. */
.prio-brett .todo { position: relative; }
.prio-brett .todo::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34px;
  background: var(--panel); pointer-events: none;
}
.prio-brett .todo > .prio,
.prio-brett .todo > .tmeta,
.prio-brett .todo > .tdate,
.prio-brett .todo > .todo-tools {
  background: none; align-self: stretch;
  display: flex; align-items: center; height: 34px; min-height: 34px;
  /* Der Streifen liegt absolut und malt darum ueber alles, was im Fluss
     steht — die vier Teile waren dahinter verschwunden (gemessen am
     16.09.2026: leere Kopfzeile). Wer selbst positioniert ist, malt
     danach; `relative` ohne Verschiebung genuegt. */
  position: relative;
  /* Ohne das steht die Kopfzeile versetzt: `.prio` und `.tdate` bringen
     von ihren Grundregeln sechs Pixel Rand oben mit, `.tmeta` und die
     Griffe nicht. Gemessen am 16.09.2026: Oberkanten 332, 326, 332, 326
     — vier Stuecke statt eines Streifens. */
  margin: 0; border-radius: 0;
}
/* Kein Schleier in der Kopfzeile: Sie ist eine Zeile und kein Knopf.
   Anfassen kann man Stufe und Datum weiter — das sagt der Zeiger. */
.prio-brett .todo > .prio:hover { background: none; color: var(--muted); }
.prio-brett .todo > .tdate .datefield:hover { background: none; }
.prio-brett .todo > .todo-tools .icon-btn { width: 26px; height: 26px; }
.prio-brett .todo > .todo-tools .icon-btn svg { width: 15px; height: 15px; }
/* Die Stufe fuellt, was bis zu den Angaben rechts uebrig bleibt — sonst
   ist die Kopfzeile unterbrochen: Marks Meldung vom 16.09.2026 „der
   headpart ist unterbrochen". Gemessen auf einer 563 Pixel breiten
   Karte: Flaeche von 1 bis 28, dann nichts bis 389, dann wieder bis
   562. Die Luecke dazwischen trug keiner. */
/* Die Reihenfolge der Kopfzeile — Marks Ansage vom 17.09.2026: „mach das
   datum neben prio und den pin stattdessen neben das plus."

   Vorher zog die Stufe mit `flex: 1 1 auto` den ganzen freien Platz an
   sich, und alles Uebrige stand rechts: Stufe — grosse Luecke — Datum,
   Plus, Papierkorb. Jetzt stehen Stufe und Frist zusammen als das, was
   die Aufgabe einordnet; die Luecke traegt die stille Spalte dahinter,
   und ganz rechts stehen die drei Griffe beieinander. */
/* Das rechte Polster steht hier ausdruecklich da, obwohl `.prio` es
   ohnehin traegt (8 Pixel aus `padding: 3px 8px 3px 6px`). Es ist die
   eine Haelfte der Luecke vor dem Datum, und die andere Haelfte steht
   zwei Zeilen tiefer — wer die Rechnung nachlesen will, soll nicht
   vierhundert Zeilen weiter oben suchen muessen. */
.prio-brett .todo > .prio  { order: 1; padding-left: 12px; padding-right: 8px; width: auto; flex: none; }
.prio-brett .todo > .tdate { order: 2; padding-left: 10px; width: auto; justify-self: auto; }
/* Die stille Spalte haelt den Abstand: Sie steht auch leer da — `span:empty`
   gibt ihr weiter unten ausdruecklich keine feste Breite. */
/* Marks Ansage vom 23.09.2026: „das 0/4 in einer todo kopfzeile soll zum
   datum den selben abstand haben wie prio zu datum."

   Gemessen am 23.09.2026 im laufenden Fenster, an den Kanten der
   ZEICHEN, nicht der Kaesten — beide Kaesten sind durchsichtig, man
   sieht nur die Schrift: „Hoch" endete auf 441,7 und das Kalender-
   zeichen begann auf 466,7, also 25 Pixel; das Datum endete auf 550,8
   und „0/4" begann auf 567,8, also 17. Acht Pixel Unterschied.

   Die Rechnung dahinter: Vor dem Datum liegen das rechte Polster der
   Stufe (8) und das linke dieser Spalte (10); hinter dem Datum lag nur
   dieses eine Polster (10). Die 6 Pixel, die das Datumsfeld selbst auf
   beiden Seiten traegt, stehen links wie rechts und kuerzen sich weg.
   18 = 8 + 10 macht beide Luecken gleich; nachgemessen: 25,0 und 25,0.

   Senkrecht standen sie schon richtig — alle drei auf 11,5 Pixel
   Schrift und derselben Grundlinie 306,38. Marks „wirkt etwas versetzt"
   kam von der waagerechten Luecke, nicht von der Hoehe. */
.prio-brett .todo > .tmeta { order: 3; padding-left: 18px; gap: 9px; flex: 1 1 auto; }
/* Das Ziel-Zeichen ist aus der Aufgabenzeile heraufgerueckt und steht
   jetzt neben dem Plus. In der Kopfzeile traegt es darum auch dessen
   Mass — vierunddreissig Pixel neben sechsundzwanzig waeren ein Griff,
   der aus der Reihe faellt. */
.prio-brett .todo > .dran { order: 4; margin: 0; position: static; transform: none;
  width: 26px; height: 26px; }
.prio-brett .todo > .dran svg,
.prio-brett .todo > .todo-tools .icon-btn svg { width: 15px; height: 15px; }
.prio-brett .todo > .todo-tools { order: 5; padding: 0 7px 0 2px; }
/* Der Umbruch zwischen Kopfzeile und Aufgabe. */
.prio-brett .todo::after { content: ''; order: 6; flex-basis: 100%; height: 0; }
/* Das Ziel-Zeichen haengt sonst 34 Pixel links NEBEN der Zeile — ein
   Merkzeichen am Rand der Seite. In einer Karte haengt es damit
   ausserhalb der Karte, und bei drei Spalten sogar links aus dem Brett
   heraus (gemessen am 16.09.2026: acht Teile 973 Pixel zu weit links).
   Hier steht es darum im Fluss. */
/* Das Kaestchen steht auf der ERSTEN Zeile — Marks Ansage vom
   18.09.2026: „bei todo wenn die zeile laenger wird soll es nach unten
   umbrechen damit die erste zeile auf hoehe mit dem abhaken square
   bleibt und nicht das es dann dazwischen ist."

   Die Reihe stand auf `align-items: center`. Bei einer Aufgabe ueber
   zwei Zeilen sass das Kaestchen damit genau in der Mitte zwischen
   beiden — auf keiner von beiden. Jetzt haengen Kaestchen und Aufgabe
   oben, und das Kaestchen wird ueber seinen Rand auf die Mitte der
   ersten Zeile gesetzt.

   Gerechnet, nicht geraten: Die Zeile ist 14 Pixel gross mal 1,45
   Zeilenhoehe, das sind 20,3 Pixel; darueber liegen 2 Pixel Fuellung
   des Feldes und 8 Pixel Rand. Ihre Mitte steht also bei 20,15. Das
   Kaestchen ist 18 hoch, seine Mitte liegt bei 11 + 9 = 20. Zwei
   Zehntel — und bei einer Zeile steht alles genau da, wo es vorher
   stand: die 12 Pixel Rand sind dieselben, nur anders verteilt (8 oben
   statt 6, 4 unten statt 6), und die Reihe bleibt 40 Pixel hoch. */
.prio-brett .todo > .checkbox   { order: 7; align-self: flex-start;
  margin: 11px 0 11px 12px; }
.prio-brett .todo > .todo-titel { order: 8; flex: 1 1 auto; min-width: 0;
  align-self: flex-start; margin: 8px 12px 4px 9px; }
/* Der leere Fokus-Platzhalter darf hier keine Spalte halten — in der
   Karte ist daneben nichts, was buendig stehen muesste. */
.prio-brett .todo > span:empty { width: auto; }
.prio-brett .todo .t { font-size: 14px; padding: 2px 4px; }
/* In der Kopfzeile stehen die Angaben leiser als die Aufgabe darunter —
   sie ordnen sie ein, sie sind nicht die Sache. */
.prio-brett .todo .prio .plabel { font-size: 11.5px; }
/* Dieselbe Schriftgroesse wie Stufe und Frist — Marks Ansage vom
   17.09.2026: „achte darauf das prio, datum und die 3/5 aligned sind in
   der kopfzeile bei einer todo karte."

   Hier stand elf gegen elfeinhalb. Ein halber Punkt klingt nach nichts,
   ergibt aber eine andere Zeilenhoehe und damit eine andere Grundlinie:
   gemessen stand der Zaehler 0,4 Pixel tiefer als seine beiden Nachbarn
   und wirkte zugleich eine Spur kleiner. Drei Angaben in einer Zeile,
   die sich um Bruchteile unterscheiden, sehen nach einem Fehler aus. */
.prio-brett .todo .tsub-zahl { font-size: 11.5px; }
.prio-brett .todo .tdate .datefield { font-size: 11.5px; gap: 6px; }
.prio-brett .todo:hover { background: none; }
.prio-brett .todo-block:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
/* Die Schritte stehen links, nicht eingerueckt — Marks Ansage vom
   16.09.2026: „die nebentodos in einer todo sollen links sein." Sie
   standen vierundvierzig Pixel weit innen und sassen damit weiter
   rechts als die Aufgabe, zu der sie gehoeren. Jetzt beginnen sie auf
   derselben Kante wie das Kaestchen darueber. */
.prio-brett .tsubs { padding: 0 12px 10px 12px; }
/* Ein leerer Abschnitt steht im Dokument, damit man hineinziehen kann.
   Im Brett muss er trotzdem stehenbleiben: Faellt eine Spalte weg,
   springen die anderen beiden auf eine andere Breite, und man sucht die
   Stufe, die man eben noch gesehen hat. */
.prio-ablage.ist-leer { display: none; }
body.zieht-todo .prio-ablage.ist-leer { display: block; }
.prio-brett .prio-ablage.ist-leer { display: flex; }
/* Hier stand das Feld „Hierher ziehen" mit gestricheltem Rand — Marks
   Ansage vom 17.09.2026, nach zwanzig Entwuerfen dafuer: „es soll
   einfach leer sein wenn da keine todo ist das reicht komplett leer."

   Was bleibt, ist ein Mass ohne Aussehen: Die leere Spalte behaelt so
   viel Hoehe, dass man etwas hineinziehen KANN. Ohne das waere sie nur
   noch ihre Aufschrift, und man muesste die Aufgabe punktgenau auf ein
   Wort fallen lassen. Zu sehen ist davon nichts. */
.prio-brett .prio-ablage.ist-leer { min-height: 76px; }
/* Schmal untereinander — drei Spalten auf 900 Pixeln waeren drei
   Streifen. */
@media (max-width: 1100px) {
  .prio-brett { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Ohne Gruppen ============
   Marks Auftrag vom 17.09.2026: „bei todo wenn man nach datum gruppiert
   soll noch eine 3te option dazukommen unzwar garkein filter also
   einfach eine todo eine zeile."

   Erst Entwurf 03 mit Kacheln, dann der fehlende Umriss, dann Marks
   Entscheidung: „oder doch lieber ohne karte bei der ansicht ist mir
   lieber." Und das ist stimmiger, als es aussieht: Eine Kachel sagt
   „hier steht etwas fuer sich". Genau das ist der Sinn der beiden
   Bretter — dort trennt die Kachel eine Aufgabe von ihrer Nachbarin in
   derselben Spalte. Ohne Gruppen gibt es nichts zu trennen; da ist die
   Liste EIN Ding, und jede Zeile ein Teil davon.

   Was bleibt, ist die Zeile selbst: Flaeche erst unter dem Zeiger, wie
   in jeder anderen Liste des Hauses. */
.todo-liste { display: flex; flex-direction: column; margin-top: 14px; }
/* Hier stand Entwurf 013, „Nach rechts und zu" — die abgehakte Karte
   fuhr nach rechts hinaus und fiel zu. Marks Weg vom 18.09.2026 in drei
   Schritten: erst die Bestellung, dann „es erscheint aber wieder nach
   dem durchstreichen nach der animation", dann „es soll zu erledigt
   verschoben werden."

   Damit war die Bewegung selbst falsch: Die Aufgabe verschwindet nicht,
   sie wandert. Das steht jetzt im Code beim Abhaken — die Stelle vorher
   und nachher gemessen, dazwischen gezeichnet — und braucht hier keine
   Regel mehr. */
.todo-liste .todo-block { border-radius: var(--r-feld); }
.todo-liste .todo-block:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.todo-liste .todo {
  display: flex; align-items: center; gap: 11px;
  min-height: 0; padding: 10px 12px; border-radius: var(--r-feld);
  background: none; font-size: 13px; border-bottom: 0;
}
/* Die Zeile darf keinen zweiten Schleier legen — zwei uebereinander
   sind unter dem Zeiger doppelt so hell wie gemeint. */
.todo-liste .todo:hover { background: none; }
/* Dasselbe in der flachen Liste: Auch hier waechst die Aufgabe nach
   unten, und auch hier gehoert das Kaestchen an die erste Zeile. Der
   Rand ist ein anderer, weil hier die Zeile selbst die Fuellung traegt:
   10 Pixel oben plus 2 Fuellung plus die halbe Zeile ergeben 22,15 —
   das Kaestchen kommt mit 3 Pixeln Rand auf 22. */
.todo-liste .todo > .checkbox   { order: 1; align-self: flex-start;
  margin: 3px 0 0; }
.todo-liste .todo > .todo-titel { order: 2; flex: 1; min-width: 0; }
/* Der Zaehler haelt seine Spalte auch, wenn er leer ist — sonst
   ruecken Stufe und Frist bei jeder Aufgabe ohne Schritte nach. Und er
   traegt das `margin-left: auto`: Ab hier beginnt die rechte Seite. */
.todo-liste .todo > .tmeta      { order: 4; flex: none; width: 34px;
  margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
/* Die Stufe steht links vom Datum, nicht vor dem Titel — Marks Ansage
   vom 17.09.2026: „bei der todo ansicht wo es eine ganze zeile bedeckt
   die prio bitte links vom datum nicht da wo sie jetzt sit."

   Sie stand zwischen Kaestchen und Titel und schob jeden Titel um
   sechzig Pixel nach rechts; bei fuenf Aufgaben mit derselben Stufe
   stand fuenfmal dasselbe Wort untereinander, bevor man zur Sache kam.
   Rechts gehoert sie zu den Angaben, die eine Aufgabe einordnen — Stufe
   und Frist nebeneinander.

   Sie ist hier kein Knopf mit eigener Flaeche: Die ganze Zeile ist
   eine, und zwei Flaechen uebereinander flackern. */
/* Marks Ansage vom 22.09.2026: „achte darauf das z.B die 0/4 also
   nebenaufgabenzaehler, die prio und datum gerade in einer linie
   aligned sind."

   Sie waren es nicht: Alle drei standen auf `width: auto`, also so
   breit wie ihr Inhalt. Eine Zeile mit Zaehler schob Stufe und Frist
   nach links, „Niedrig" war schmaler als „Hoch" — und keine zwei Zeilen
   standen auf derselben Kante. Feste Spalten machen daraus eine Linie;
   die Zahlen darin bleiben rechtsbuendig, die Woerter links. */
/* Marks Ansage vom 22.09.2026: „hier soll alles rechts aligned sein
   nicht links." Die Spalten halten die Linie jetzt an ihrer RECHTEN
   Kante — „Niedrig" ist laenger als „Hoch", und wer links ausrichtet,
   bekommt rechts wieder ein Flattern. */
.todo-liste .todo > .prio       { order: 5; flex: none; width: 86px; padding: 0;
  justify-content: flex-end; }
.todo-liste .todo > .prio:hover { background: none; }
.todo-liste .todo > .tdate      { order: 6; flex: none; width: 124px; justify-self: auto; }
/* Marks Meldung vom 22.09.2026: „der hover effekt sieht kake aus bei
   datum in tasks, es ist so links zu lang."

   Berechtigt, und es war meine eigene Spalte von heute: Das Feld darin
   steht im Haus auf `width: 100%` und `justify-content: flex-end` — es
   fuellt also die Spalte und klebt rechts. Bei den 92 Pixeln, die die
   Spalte frueher hatte, fiel das kaum auf; bei den 124, die sie fuer die
   gemeinsame Linie braucht, lagen neunundzwanzig Pixel Schleier links
   neben dem Kalenderzeichen.

   In der flachen Liste nimmt das Feld darum nur seine eigene Breite —
   dann liegt der Schleier um das Datum statt um die Spalte. Die Spalte
   selbst bleibt 124 breit und richtet ihr Feld nach RECHTS aus; sie
   haelt die Linie, nicht das Feld.

   (Die runde Form ist alt: `--r-teil` sind 999 Pixel, das Feld war
   immer eine Pille. Nur der Schleier darin war nie so breit.) */
.todo-liste .todo > .tdate { display: flex; justify-content: flex-end; }
.todo-liste .todo > .tdate .datefield { width: auto; justify-content: flex-end; }
/* Dieselbe Groesse wie Plus und Papierkorb daneben — Marks Ansage vom
   17.09.2026: „die pin nadel soll genauso gross sein wie die icons
   daneben." Sie war fuenfzehn Pixel breit neben vierzehn und sass in
   einem Feld von sechsundzwanzig neben vierundzwanzig.

   Und Marks Ansage vom 22.09.2026: „die pinnadel soll einfach rechts vom
   task namen stehen." Sie stand ganz rechts, hinter der Frist — am
   weitesten weg von dem, worauf sie sich bezieht. Jetzt steht sie
   unmittelbar hinter dem Namen.

   Dafuer muss der Titel auf seinen Text schrumpfen: Er ist ein
   Schreibfeld mit `flex: 1`, und ein gedehntes Feld schiebt alles
   dahinter an den Rand. `field-sizing: content` laesst das Feld so breit
   werden wie sein Inhalt — dann steht die Nadel wirklich am Wort. Wo das
   nicht geht, bleibt es beim gedehnten Feld: Die Nadel steht dann am
   Ende des Namensraums statt am Namen, und nichts bricht. */
.todo-liste .todo > .dran       { order: 3; position: static; transform: none; margin: 0; }
@supports (field-sizing: content) {
  .todo-liste .todo > .todo-titel { flex: 0 1 auto; }
  .todo-liste .todo > .todo-titel .t { field-sizing: content; width: auto; max-width: 100%; }
}
.todo-liste .todo > .dran,
.todo-liste .todo > .todo-tools .icon-btn { width: 26px; height: 26px; }
/* Die drei Punkte stehen senkrecht — Marks Ansage vom 17.09.2026: „soll
   einfach 3 punkte vertikal erscheinen." Das Zeichen liegt im Haus
   waagerecht; gedreht wird es hier, statt ein zweites danebenzulegen. */
.todo-mehr svg { transform: rotate(90deg); }
/* Und sie erscheinen beim Hinfahren. Anders als die Nadel sagen sie
   nichts ueber die Aufgabe — sie sind ein Weg, und Wege duerfen warten,
   bis man sie sucht. Auf dem Telefon gibt es kein Hinfahren. */
.todo:not(:hover) .todo-mehr { opacity: 0; }
.todo-mehr:focus-visible { opacity: 1; }
@media (hover: none) { .todo-mehr { opacity: 1; } }
.todo-liste .todo > .dran svg,
.todo-liste .todo > .todo-tools .icon-btn svg { width: 15px; height: 15px; }
.todo-liste .todo > .todo-tools { order: 7; flex: none; }
/* Der leere Platzhalter der Fokuszeit darf hier keine Spalte halten —
   im Fluss steht daneben nichts, was buendig sein muesste. */
.todo-liste .todo > span:empty  { width: auto; }
.todo-liste .todo .t { font-size: 14px; padding: 2px 4px; }
/* „ohne farbe bei ueberfaellig nachwievor" — die Frist bleibt leise.
   Sie steht ohnehin schon auf `--muted`; hier steht es noch einmal, weil
   es eine Zusage ist und keine Nebenwirkung. */
.todo-liste .todo .tdate.over .datefield { color: var(--muted); }
.todo-liste .tsubs { padding: 0 12px 10px 12px; }
/* Der Stil fuer `.prio-leer` ist am 17.09.2026 mit dem Feld selbst
   gegangen — es gibt die Klasse nicht mehr. */
.todo-block.zieht { opacity: .45; }
/* Waehrend eines Zugs soll sich nichts markieren lassen — sonst zieht man
   blauen Text hinter sich her statt der Aufgabe. */
body.zieht-todo, body.zieht-todo * { user-select: none; -webkit-user-select: none; }
body.zieht-todo .todo-block { cursor: grabbing; }

/* ============ Projektkarte: drei Formen ============
   Dieselben Angaben, drei Anordnungen. Kursive Schrift kommt in keiner
   davon vor — eine Bezeichnung neben einer Zahl ist kein Fliesstext. */
.pk-wert { display: flex; flex-direction: column; gap: 2px; }
.pk-wert b {
  font-size: 15px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; font-style: normal;
}
.pk-wert.stark b { font-size: 17px; }
.pk-name-klein {
  font-style: normal; font-size: 10.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}

/* --- Zeile: alles auf einer Hoehe --- */
/* ---- Die Bahn -------------------------------------------------------
 *
 * Marks Wahl vom 10.09.2026 aus zwanzig Entwuerfen: „nimm design 39 aber
 * statt gewinn bestellungen und die trennlinien sollen immer untereinander
 * sein." Dazu: „es soll auserdem nur farbe grau geben fuer inaktiv und
 * gruen fuer aktiv also links der strich."
 *
 * Eine Zeile je Projekt. Links Name und Inhalt, rechts vier Zahlen in
 * FESTEN Spalten. Fest ist der ganze Punkt: Bei Spalten nach Inhalt
 * stuenden die Trennlinien bei jeder Karte woanders, und dann liest man
 * nicht mehr von oben nach unten, sondern sucht in jeder Zeile neu.
 *
 * Und der Stand steckt nur noch im Strich links. Keine zweite Farbe
 * daneben, keine gruene Gewinnzahl — wer eine Liste ueberfliegt, soll
 * EINE Stelle haben, an der die Farbe etwas bedeutet. */
/* Entwurf 06 stellt zwei Karten nebeneinander — Marks Wahl vom
   13.09.2026 aus fuenfzig ganzen Seiten. Die Karte aus Entwurf 11, die
   eine Reihe fuer sich hatte, ist damit abgeloest. */
.pk-gitter.pk-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .pk-gitter.pk-zwei { grid-template-columns: minmax(0, 1fr); } }
/* Die Suche ist ein Strich, kein Kasten — wie im Stamm des Launchpads.
   Der Stand-Schalter traegt seine Zahl leise mit.

   Er heisst .proj-stand und nicht .proj-reiter: Unter dem Namen steht
   schon die Reiterleiste der Unterbereiche, mit 40 Pixeln Polster und
   20 Pixeln Abstand nach oben. Zwei Dinge unter einem Namen war der
   Fehler, der diese Woche schon dreimal eine Aenderung verschluckt hat. */
.proj-stand .seg-btn { display: inline-flex; align-items: center; gap: 7px; }
.seg-zahl { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.seg-btn.on .seg-zahl { color: var(--muted); }
/* Auch die Suche ist eine Pille — Entwurf 050, siehe oben. Sie stand
   als Linie da: ein Feld mit einem Strich darunter, zweiunddreissig
   Pixel hoch neben lauter Knoepfen von achtunddreissig. Jetzt traegt sie
   dieselbe Flaeche und dasselbe Mass wie die Schalter links und der
   Knopf rechts. */
.proj-such {
  display: flex; align-items: center; gap: 8px; height: 38px; min-width: 200px;
  padding: 0 15px; border-radius: var(--r-knopf); background: var(--raise);
  color: var(--faint); font-size: 13px;
}
.proj-such svg { width: 15px; height: 15px; flex: none; }
.proj-such input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 13px;
}
/* Kein Aufhellen beim Schreiben — dieselbe Zusage wie im To-Do
   (Marks Ansage vom 18.09.2026: „mach den umriss weg wenn man was
   eingibt"). Es ist das einzige Feld der Zeile; es muss nicht auch noch
   sagen, dass man gerade darin schreibt. */
.proj-such input::-webkit-search-decoration,
.proj-such input::-webkit-search-cancel-button { -webkit-appearance: none; }
.proj-nichts { padding: 40px 0; }

.pk-gitter.pk-bahn { grid-template-columns: 1fr; gap: 8px; }
.pk-gitter.pk-bahn .pk {
  display: grid; grid-template-columns: 1fr auto; align-items: stretch;
  padding: 0; overflow: hidden; border-radius: 0 14px 14px 0;
  border-left: 3px solid var(--grau-strich, var(--rand-stark));
}
/* Gruen laeuft, grau laeuft nicht — die einzige Farbe in der Liste. */
.pk-gitter.pk-bahn .pk:has(.pk-lauf.an) { border-left-color: var(--gruen, #3fa76a); }
.pk-gitter.pk-bahn .pk-kopf { padding: 15px 18px; align-self: center; }
/* Der Punkt neben „Aktiv" ist mit dem Strich doppelt gemoppelt. */
.pk-gitter.pk-bahn .pk-lauf { display: none; }
.pk-gitter.pk-bahn .pk-leer,
.pk-gitter.pk-bahn .pk-teil { display: none; }
/* Der Zahlenblock: eigener Grund, feste Spalten, Linien dazwischen. */
.pk-bahn .pk-zahlen.pk-bahn {
  display: grid; grid-template-columns: repeat(4, 116px);
  align-self: stretch; border-left: 1px solid var(--border); background: var(--tief);
  padding: 0;
}
.pk-bahn .pk-zahlen.pk-bahn .pk-wert {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 16px; text-align: right;
}
.pk-bahn .pk-zahlen.pk-bahn .pk-wert + .pk-wert { border-left: 1px solid var(--border); }
.pk-bahn .pk-zahlen.pk-bahn .pk-wert b {
  font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  /* Keine Farbe mehr — Marks Ansage. */
  color: var(--text);
}
.pk-bahn .pk-zahlen.pk-bahn .pk-name-klein { font-size: 9.5px; color: var(--faint); }
/* Ein Projekt ohne Journalzeile steht gedaempft da — es hat nicht
   angefangen, also gibt es auch nichts zu lesen. */
.pk-bahn .pk-zahlen.pk-bahn.ohne .pk-wert b { color: var(--faint); }
/* Und die Karte bleibt eine ZEILE, auch wenn Copys und Bilder darin
   liegen. Marks Vergleich vom 10.09.2026: „bei projekte das sieht nicht
   so aus wie in der demo." Die Abschnitte darunter — Copys, Bilder,
   Seiten — sind in der Bahn ausgeblendet; wer sie sucht, macht das
   Projekt auf. Ohne das wuerde aus jeder Zeile wieder ein Klotz. */
.pk-gitter.pk-bahn .pk-streifen,
.pk-gitter.pk-bahn .pk-copys,
.pk-gitter.pk-bahn .pk-zeitraum-block { display: none; }
.pk-gitter.pk-bahn .pk-name { font-size: 15.5px; }
.pk-gitter.pk-bahn .pk-meta { font-size: 11.5px; }
/* Unter 760 Pixeln fallen die Zahlen unter den Namen: vier feste Spalten
   plus Name brauchen Platz, den es dort nicht gibt. */
@media (max-width: 760px) {
  .pk-gitter.pk-bahn .pk { grid-template-columns: 1fr; }
  .pk-bahn .pk-zahlen.pk-bahn {
    border-left: 0; border-top: 1px solid var(--border); grid-template-columns: repeat(4, 1fr);
  }
}

.pk-gitter.pk-zeile { grid-template-columns: 1fr; gap: 10px; }
.pk-gitter.pk-zeile .pk { padding: 14px 20px; border-radius: var(--r-flaeche); }
.pk-gitter.pk-zeile .pk-kopf { padding: 0; flex: 1; min-width: 0; }
.pk-gitter.pk-zeile .pk-teil, .pk-gitter.pk-zeile .pk-leer { display: none; }
.pk-gitter.pk-zeile .pk { flex-direction: row; align-items: center; gap: 24px; }
.pk-zahlen.pk-zeile {
  display: flex; gap: 30px; align-items: baseline; justify-content: flex-end;
  width: auto; flex: none; margin: 0; padding: 0; background: none;
}
/* Wert und Bezeichnung stehen mittig uebereinander. Rechtsbuendig sass die
   Zahl ueber dem rechten Ende ihres Wortes und wirkte verrutscht. */
.pk-zahlen.pk-zeile .pk-wert { align-items: center; text-align: center; }

/* --- Kopf: die Zahl ueber allem --- */
.pk-zahlen.pk-kopfzahl { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pk-zahlen.pk-kopfzahl .pk-oben { display: flex; align-items: baseline; gap: 12px; }
.pk-zahlen.pk-kopfzahl b {
  font-size: 27px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; font-style: normal;
}
.pk-marke {
  padding: 2px 9px; border-radius: var(--r-teil); font-size: 11.5px;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pk-zahlen.pk-kopfzahl .pk-beleg { margin-top: 8px; }

/* --- Raster: vier gleichwertige Felder --- */
.pk-zahlen.pk-raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0; overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.pk-zahlen.pk-raster .pk-wert {
  background: var(--raise); padding: 13px 15px; margin: 0;
}
.pk-zahlen.pk-raster .pk-beleg {
  grid-column: 1 / -1; background: var(--raise); margin: 0; padding: 10px 15px 12px;
}

/* Steht die Leitung? Ein Punkt sagt mehr als ein Knopf, den man druecken muss. */
.tm-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--faint); letter-spacing: .02em;
}
.tm-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}
.tm-live.an { color: var(--muted); }
.tm-live.an i {
  background: #4ade80;
  box-shadow: 0 0 0 3px color-mix(in srgb, #4ade80 18%, transparent);
}

/* ============ Geteilte Tabellen ============
   Dieselbe Ruhe wie die eigenen Datenbanken, nur dass hier alle
   hineinschreiben. Darum keine Sonderfarben: Wer etwas aendert, steht
   ohnehin am Eintrag. */
.gt-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gt-name {
  background: none; border: 0; padding: 0; color: var(--text);
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.01em; outline: 0;
  min-width: 0; flex: 0 1 auto;
}
.gt-name:focus { border-bottom: 1px solid var(--border); }

.gt-rahmen {
  border: 1px solid var(--border); border-radius: var(--r-flaeche); overflow: auto; background: var(--raise);
}
table.gt { width: 100%; border-collapse: collapse; }
table.gt th, table.gt td {
  padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  vertical-align: middle; text-align: left;
}
table.gt tr:last-child td { border-bottom: 0; }
table.gt th:last-child, table.gt td:last-child { border-right: 0; }
/* Name oben, Typ darunter. Nebeneinander schoben sie sich gegenseitig aus
   der Spalte — der Typ stand dann mitten im naechsten Namen. */
table.gt th {
  padding: 9px 30px 8px 12px; background: color-mix(in srgb, var(--text) 4%, transparent);
  position: relative; white-space: nowrap; min-width: 150px;
}
.gt-spaltenname {
  display: block; background: none; border: 0; padding: 0; outline: 0; color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600; width: 100%;
}
.gt-typ {
  display: block; margin-top: 2px; background: none; border: 0; padding: 0; outline: 0;
  color: var(--faint); font: inherit; font-size: 10.5px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.gt-typ:hover { color: var(--muted); }
.gt-weg {
  position: absolute; top: 6px; right: 6px; opacity: 0;
  background: none; border: 0; padding: 2px; color: var(--faint); cursor: pointer;
}
table.gt th:hover .gt-weg { opacity: 1; }
.gt-weg svg { width: 12px; height: 12px; }

.gt-feld {
  width: 100%; background: none; border: 0; padding: 10px 12px; outline: 0;
  color: var(--text); font: inherit; font-size: 13.5px;
}
.gt-feld:focus { background: color-mix(in srgb, var(--text) 4%, transparent); }
table.gt td .mini { margin: 5px 8px; }
table.gt td .checkbox { margin: 8px 12px; }
.gt-schmal { width: 40px; min-width: 40px; }
.gt-schmal .icon-btn { opacity: 0; }
table.gt tr:hover .gt-schmal .icon-btn { opacity: .7; }
.gt-leer { margin: 0; padding: 18px 14px; font-size: 12.5px; color: var(--faint); }

/* Die Gedankentabelle. Ihr `gt-` heisst „Gedankentabelle" — die Leiste
   im Generator hiess bis zum 16.09.2026 ebenso und ueberschrieb diese
   Regel: Ihr Plus bekam zehn Pixel Rand oben und sass damit fuenf Pixel
   unter dem Auftragsfeld daneben (gemessen: Mitten 157 und 162). Die
   Leiste heisst jetzt `gl-`. */
.gt-plus {
  margin-top: 10px; background: none; border: 0; padding: 8px 2px; cursor: pointer;
  color: var(--faint); font: inherit; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 7px;
}
.gt-plus:hover { color: var(--text); }
.gt-plus svg { width: 15px; height: 15px; }

/* Der nachgereichte Ersatzweg: er erscheint erst, wenn die Erlaubnis nach
   einer halben Minute nichts zurueckgebracht hat. Darum ruhig gehalten —
   er ist kein Angebot, sondern eine Hilfe fuer den, der feststeckt. */
.shop-ersatz {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

/* ============ Anzeigen einer Marke ins Projekt ============ */
/* Die Kopfzeile des Uebernehmen-Fensters bleibt oben stehen.

   Sie traegt die Ueberschrift und den Schalter fuers Vollbild. Rollte sie
   mit, waere der Schalter nach zwei Zeilen weg — und ihn stattdessen frei
   in die Ecke zu haengen sah aus, als schwebe er ueber dem Inhalt. Also
   dasselbe wie im Markenfenster: Der Kopf steht, die Liste laeuft
   darunter. */
#btUeberBox > .stapel-kopf {
  /* Der Spalt ueber der Ueberschrift — und warum er zweimal falsch
     repariert wurde.

     `top` misst gegen die AUSSENKANTE, nicht gegen den Kasten. Bei
     `top: 0` und `margin-top: -26px` haelt der Browser die Aussenkante an
     der Fensterkante fest — der Kasten selbst steht damit 26px tiefer,
     und genau durch diesen Streifen laeuft der Inhalt sichtbar hindurch.

     Erst stand hier 6px Polster, der Spalt war 6px. Dann habe ich das
     Polster auf 26px erhoeht, um ihn zu decken — und den Spalt damit auf
     26px vergroessert. Nachgestellt und nebeneinandergestellt, statt ein
     drittes Mal zu raten.

     Richtig ist, `top` um dasselbe Mass nach oben zu ziehen: Dann steht
     der Kasten buendig an der Kante, sein Polster deckt den Streifen, und
     im Ruhezustand aendert sich nichts. Dieselbe Rechnung wie bei
     .bt-fenster-kopf, wo `top: -18px` aus demselben Grund steht. */
  position: sticky; top: -26px; z-index: 4;
  /* Dieselbe Flaeche wie das Fenster darunter — nicht eine eigene.

     Hier stand #131313, abgeschrieben von `.modal`, wo derselbe Fehler
     schon einmal steckte und ausdruecklich behoben wurde: Eine feste Zahl
     folgt keinem Design. Marks Bild vom 04.09.2026 zeigte die Kopfzeile
     als hellgrauen Balken ueber schwarzem Grund — das Fenster stand auf
     seinem eigenen Ton, die Kopfzeile auf einem fremden.

     Weg kann die Flaeche nicht: Der Kopf klebt oben, und der Inhalt
     laeuft darunter hindurch. Ohne Hintergrund waere er dabei zu lesen.
     Also dieselbe Farbe wie darunter, und der Balken verschwindet. */
  background: var(--fenster-grund, var(--raise));
  margin: -26px 0 14px; padding: 26px 0 8px;
}
html[data-theme="light"] #btUeberBox > .stapel-kopf { background: #ffffff; }

.stapel-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.stapel-kopf h3 { margin: 0; }
.stapel-teil-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.stapel-teil-kopf .spacer { flex: 1; }

/* Die Anzeigenliste behaelt ihr eigenes Fenster — bei hundertsechzig
   Anzeigen waere die Alternative ein Bericht, der erst nach zwei Metern
   anfaengt. Aber sie haelt den Zeiger nicht mehr fest: `contain` hiess,
   dass am Ende der Liste Schluss ist, statt dass das Fenster
   weiterlaeuft. Genau das fuehlt sich an, als haenge man fest. */
.btueber-liste {
  display: flex; flex-direction: column;
  max-height: 42vh; overflow-y: auto;
}
/* Bildchen, Seite, Textanfang — mehr braucht es nicht, um eine Anzeige
   wiederzuerkennen. Die ganze Zeile nimmt den Klick. */
.btueber-zeile {
  display: grid; grid-template-columns: auto 44px 1fr; align-items: center; gap: 10px;
  padding: 8px 0; cursor: pointer; text-align: left;
}
.btueber-zeile + .btueber-zeile { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.btueber-zeile:not(.an) { opacity: .45; }
/* Der Kasten traegt Grund und Rahmen selbst — so bleibt ein leerer Platz
   stehen, wenn das Bild fehlt oder seine Adresse abgelaufen ist, statt
   dass die Zeile in sich zusammenfaellt. */
.btueber-bild {
  width: 44px; height: 44px; border-radius: var(--r-feld);
  background: var(--raise); border: 1px solid var(--border); overflow: hidden;
}
.btueber-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btueber-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.btueber-text b { font-size: 12.5px; color: var(--text); font-weight: 600; }
.btueber-text em {
  font-style: normal; font-size: 11.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.stapel-lauf { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; font-size: 12.5px; color: var(--muted); }
.stapel-balken {
  flex: 1; height: 3px; border-radius: var(--r-klein); overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.stapel-balken > span { display: block; height: 100%; background: var(--text); transition: width .2s ease; }
.stapel-fehler { margin: 6px 0 8px; }

/* ============ Filterleiste ueber allen Anzeigen einer Marke ============
   Eine Reihe Pillen, die umbricht. Jede ist entweder ein Menue oder ein
   Paar Zahlenfelder — beide sehen gleich aus, damit die Reihe ruhig
   bleibt und nicht wie ein Formular wirkt. */
.bt-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px; }
.bt-filter-pille {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: var(--r-teil); border: 1px solid var(--border); background: var(--raise);
  font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.bt-filter-pille.zahl { cursor: default; }
button.bt-filter-pille:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.bt-filter-pille.on { color: var(--text); border-color: var(--muted); }
.bt-filter-pille svg { width: 12px; height: 12px; flex: none; color: var(--faint); }
/* Was gewaehlt ist, steht hinter dem Namen — bei einem Wert sein Name,
   bei mehreren ihre Zahl. */
.bt-filter-pille em {
  font-style: normal; color: var(--text);
  max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-filter-pille input {
  width: 4ch; padding: 0; border: 0; background: none; outline: 0;
  font: inherit; font-size: 12.5px; color: var(--text); text-align: center;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.bt-filter-pille input::-webkit-outer-spin-button,
.bt-filter-pille input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bt-filter-pille input::placeholder { color: var(--faint); }
.bt-filter-pille b { font-weight: 400; color: var(--faint); }

/* Das Kaestchen ueber allen anderen: bedient sie zusammen und bleibt beim
   Rollen oben stehen. Bei hundert Anzeigen muesste man sonst zurueck an
   den Anfang, nur um alles abzuwaehlen. */
.btueber-zeile.alle {
  grid-template-columns: auto 1fr;
  position: sticky; top: 0; z-index: 2;
  /* Dieselbe feste Zahl wie oben in .stapel-kopf, derselbe Fehler:
     Sie folgt keinem Design. Beim Reparieren der Kopfzeile am 04.09.2026
     stand sie hier noch — zwei klebende Streifen im selben Fenster, und
     nur einer haette die Farbe des Fensters getragen. */
  background: var(--fenster-grund, var(--raise));
  border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  opacity: 1;
}
.btueber-zeile.alle .btueber-text b { color: var(--text); }
/* Einige, aber nicht alle: ein Strich statt eines Hakens. */
.checkbox.halb::after {
  content: ''; width: 9px; height: 2px; border-radius: var(--r-klein);
  background: var(--muted); display: block;
}

/* Unter der Liste: erst das Wort, das mehr zeichnet, dann die Pille, die
   mehr holt. Sie steht fuer sich, damit man sie nicht aus Versehen
   trifft — sie kostet Credits. */
.bt-alle-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- Wie die Anzeige aussehen wird ----------
   Eine Nachbildung, kein Abzug: Kopfzeile, Text, Bild, Fusszeile mit
   Domain, Ueberschrift und Knopf — die Teile, an denen man sieht, ob eine
   Anzeige traegt. Der Rahmen wechselt mit der Platzierung, weil genau da
   die Ueberraschungen sitzen: was im Feed steht, ist in der Story
   angeschnitten. */
.schau-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.schau-buehne { display: flex; align-items: center; gap: 10px; }
.schau-pfeil {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--muted);
}
.schau-pfeil:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
/* Das Zeichen zeigt nach unten — hier soll es zur Seite zeigen. */
.schau-pfeil svg { width: 15px; height: 15px; transform: rotate(-90deg); }
.schau-pfeil[data-v="-1"] svg { transform: rotate(90deg); }

.schau-rahmen {
  flex: 1; min-width: 0; max-width: 420px; margin: 0 auto;
  background: var(--karte); border: 1px solid var(--border); border-radius: var(--r-flaeche);
  overflow: hidden;
}
/* Marks Ansage vom 14.09.2026: „unten das hellgrau von der
   Schaltflaeche gegenueber und beim rest der ad karte das dunkle grau
   von gegenueber." Gegenueber steht das Formular: seine Karte auf
   --karte, seine Felder auf --karte-feld. Die Vorschau nimmt genau
   diese zwei — nicht die Werte, die Namen, damit beide Seiten fuer
   immer zusammen wandern. */
.schau-zeile { display: flex; align-items: center; gap: 9px; padding: 11px 12px 9px; }
.schau-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--panel-2);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.schau-wer { display: flex; flex-direction: column; min-width: 0; }
.schau-wer b { font-size: 13px; font-weight: 600; }
.schau-wer i { font-style: normal; font-size: 11.5px; color: var(--faint); }

/* Das Polster gehoert an den Kasten, nicht an den gekuerzten Text. Lag es
   am Text selbst, schnitt overflow:hidden erst an der Polsterkante ab —
   die fuenfte Zeile schien unten durch und wurde waagerecht in der Mitte
   zerschnitten. Genau das sah man als schlechten Uebergang zum Bild. */
.schau-textblock { padding: 0 12px 10px; }
.schau-text {
  margin: 0; padding: 0; font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  /* Facebook kuerzt lange Texte — wer das hier nicht sieht, merkt erst
     nach dem Ausspielen, dass der Aufhaenger abgeschnitten wird. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* Steht nur da, wenn wirklich gekuerzt wird — upSchauMehrPruefen setzt
   die Klasse nach dem Zeichnen. */
.schau-mehr { display: none; font-size: 13px; color: var(--muted); }
.schau-textblock.gekuerzt .schau-mehr { display: inline; }

.schau-bild { position: relative; background: var(--karte); }
.schau-bild img { display: block; width: 100%; object-fit: cover; }
.schau-rahmen.feed .schau-bild img { aspect-ratio: 1 / 1; }
/* Hochkant: dieselbe Datei, anderer Ausschnitt. Die Hoehe ist gedeckelt,
   sonst laeuft die Story aus dem Fenster und ausgerechnet der Knopf am
   unteren Rand — der Teil, den man beurteilen will — steht unter der
   Kante. Das Seitenverhaeltnis bleibt trotzdem 9:16, es wird nur die
   ganze Karte kleiner. */
.schau-rahmen.story .schau-bild img { aspect-ratio: 9 / 16; max-height: 58vh; }
.schau-rahmen.story { max-width: min(420px, calc(58vh * 9 / 16)); }
.schau-rahmen.story .schau-text { display: none; }

.schau-ueber {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
}
.schau-ueber b { font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

.schau-fuss {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; background: var(--karte-feld);
}
.schau-ziel { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.schau-domain { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.schau-ziel b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schau-fehlt { font-style: normal; font-size: 12.5px; color: var(--faint); }
.schau-knopf {
  flex: none; height: 30px; padding: 0 13px; border-radius: var(--r-feld);
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--panel-2); color: var(--text); font-size: 12.5px; font-weight: 500;
}
/* Der Knopf stand auf demselben Ton wie der Fuss jetzt — er waere darin
   verschwunden. Der Hausschleier hebt ihn eine Stufe an, statt einen
   neuen Grauton zu erfinden. Ueber der eigenen Flaeche als Bild, sonst
   wuerde --hover sie verdunkeln. */
.schau-fuss .schau-knopf {
  background-image: linear-gradient(var(--hover), var(--hover));
}
.schau-knopf.voll { justify-content: center; height: 36px; border-radius: var(--r-feld); }

.schau-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* Die Kachel im Aufbau ist jetzt ein Knopf. */
.ub-anzeige { cursor: pointer; border-radius: var(--r-feld); transition: background .14s ease; }
.ub-anzeige:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.ub-anzeige:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }

/* ---------- Anzeigenkarte ----------
   Dieselbe Flaeche, Linie und Rundung wie .card-box: die Karte soll neben
   den uebrigen stehen koennen, ohne dass eine davon herausfaellt. */
.ad-karte.ruhig {
  display: flex; flex-direction: column;
  /* Keine Fuellung: der schwarze Block unter dem Bild machte aus der Karte
     einen Kasten, in dem der Text sass. Der Umriss reicht, um zu zeigen,
     wo eine Anzeige aufhoert und die naechste anfaengt. */
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-flaeche);
  overflow: hidden;
}
/* Der alte Aufbau legte das Bild absolut in eine Buehne und blendete sein
   unteres Sechstel weg, damit der Text darauf lesbar blieb. Der Text liegt
   nicht mehr darauf — also weder absolut noch verblendet. */
.ad-karte.ruhig .ad-bild {
  position: relative; inset: auto; background: transparent;
  /* Ein festes Verhaeltnis fuer alle: sonst steht in einer Reihe jede
     Karte anders hoch, je nachdem was das Creative mitbringt, und die
     Zeile franst aus. Vier zu fuenf, weil Meta-Creatives hochkant sind. */
  aspect-ratio: 4 / 5; overflow: hidden;
}
.ad-karte.ruhig .ad-bild::after { content: none; }
.ad-karte.ruhig .ad-bild img,
.ad-karte.ruhig .ad-bild video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Zwoelf Punkte zwischen den Zeilen, wie ueberall — nur die Ueberschrift
   rueckt naeher an ihren Text, weil die beiden zusammen gelesen werden. */
.ad-unten { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.ad-karte.ruhig .ad-titel + .ad-hook { margin-top: -3px; }

.ad-karte.ruhig .ad-wer {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 11.5px; color: var(--faint);
}
.ad-karte.ruhig .ad-marke {
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-karte.ruhig .ad-logo { width: 16px; height: 16px; border-radius: var(--r-klein); flex: none; object-fit: cover; }
.ad-neben { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Die Ueberschrift traegt die Karte — sie sagt, was die Anzeige verspricht. */
.ad-karte.ruhig .ad-titel {
  font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-karte.ruhig .ad-titel .ohne { font-style: normal; font-weight: 400; color: var(--faint); }

.ad-karte.ruhig .ad-hook {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-karte.ruhig .ad-hook.lang { -webkit-line-clamp: 4; }
.ad-karte.ruhig .ad-hook.ohne { cursor: default; color: var(--faint); }
.ad-karte.ruhig .ad-hook.auf { display: block; -webkit-line-clamp: none; }

/* Die Zahlen stehen unter einer Haarlinie: sie gehoeren zur Anzeige, sind
   aber nicht die Anzeige. */
.ad-karte.ruhig .ad-leiste {
  display: flex; align-items: center; gap: 12px;
  padding-top: 9px; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.ad-karte.ruhig .ad-leiste .ohne { color: var(--faint); }
.ad-ziel { color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Die Knoepfe liegen in der Ecke des Bildes und kommen unter dem Zeiger.
   Unter dem Text braeuchten sie eine sechste Zeile, und die Karte lebt
   davon, dass sie wenige hat. */
.ad-karte.ruhig .ad-bild .ad-fuss {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 4px; padding: 4px; border-radius: var(--r-feld);
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .14s ease;
}
.ad-halter:hover .ad-bild .ad-fuss,
.ad-bild .ad-fuss:focus-within { opacity: 1; }
.ad-karte.ruhig .ad-bild .ad-fuss .cact { color: #eaeaea; }
/* Ohne Creative stehen sie unten im Text — dort gibt es keine Ecke. */
.ad-karte.ruhig .ad-unten > .ad-fuss {
  display: flex; gap: 2px; padding: 0; border: 0; background: none;
}

/* ---------- Was gerade laeuft ----------
   Steht ueber allem, oben rechts, und meldet jeden Lauf — egal aus welcher
   Section er kommt.

   Hier stand „ohne Fuellung, ein Umriss genuegt" — mit einem
   Weichzeichner darunter, fest verdrahtet. Damit war die Anzeige als
   einzige Flaeche der App immer glasig: auf pechschwarzem Grund ein
   milchiger Fleck, der nirgendwo sonst vorkommt.

   Das Haus hat dafuer eine Regel, und sie steht weiter unten: deckende
   Grundfarbe, und der Weichzeichner nur unter data-bg="glas". Genau die
   gilt jetzt auch hier. */
#laeuft {
  position: fixed; top: 14px; right: 16px; z-index: 900;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
#laeuft .laeuft-zeile {
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 7px;
  min-width: 190px; padding: 9px 13px 10px; border-radius: var(--r-flaeche);
  border: 1px solid var(--border);
  /* Deckende Grundfarbe unter der Toenung — dieselbe Rechnung wie bei der
     Konsole: --raise ist im Glasthema durchscheinend, dann laese man den
     Hintergrund mit. */
  background: linear-gradient(var(--raise), var(--raise)), var(--bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  color: var(--muted); font-size: 12px; font-family: inherit; text-align: left;
  cursor: pointer; transition: color .14s ease, border-color .14s ease;
}
/* Und glasig nur dort, wo Glas bestellt ist. */
html[data-bg="glas"] #laeuft .laeuft-zeile {
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
#laeuft .laeuft-zeile:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
#laeuft .laeuft-oben { display: flex; align-items: center; gap: 8px; }
#laeuft .laeuft-name { color: var(--text); }
#laeuft .tr-dots { flex: none; }
/* Der Stand steht rechts und traegt Ziffern — mit fester Ziffernbreite,
   sonst wackelt die Zeile bei jedem Takt. */
#laeuft .laeuft-zahl {
  margin-left: auto; color: var(--faint); font-size: 11.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#laeuft .laeuft-balken {
  display: block; height: 2px; border-radius: var(--r-klein);
  background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden;
}
#laeuft .laeuft-balken > i {
  display: block; height: 100%; width: 0; border-radius: var(--r-klein);
  background: var(--text); transition: width .3s ease;
}
/* Builder und Uebersetzer melden keine Schritte — dort waere der Balken
   eine Behauptung. Die Uhr allein sagt genug. */
#laeuft .laeuft-zeile.ohne-balken .laeuft-balken { display: none; }
#laeuft .laeuft-zeile.ohne-balken { gap: 0; }

/* Das Projektziel steht in der Fusszeile links, die Knoepfe rechts. Es ist
   vier Punkte niedriger als sie — ohne diese Zeile haengt es oben statt
   auf einer Linie mit ihnen. */
.modal-actions.mit-ziel { align-items: center; }
/* Die Fusszeile des Uebernehmen-Fensters traegt bis zu sechs Sachen:
   Projektziel, Pruefen, Weitermachen, Nachholen, Verwerfen, Behalten.

   In eine Zeile passen sie nicht, und beim Umbrechen entschied die Breite,
   wo geschnitten wird — mal fiel nur „Behalten" nach unten und stand dort
   allein rechts, mal zwei. Es sah jedes Mal anders und jedes Mal wie ein
   Versehen aus.

   Also wird die Stelle bestimmt, statt sie dem Zufall zu ueberlassen: Das
   Projektziel steht oben, die Knoepfe darunter, rechtsbuendig und
   beieinander. Immer gleich, egal wie breit das Fenster ist. Kurz stand
   der Ordner unten links in derselben Zeile — auf Marks Wunsch wieder
   oben. */
.modal-actions.mit-ziel { flex-wrap: wrap; row-gap: 12px; }
.modal-actions.mit-ziel .spacer { flex: 1 0 100%; height: 0; margin: 0; }
.modal-actions.mit-ziel > .btn,
.modal-actions.mit-ziel > .btn-white {
  height: 38px; white-space: nowrap;
}
/* „35 offen — weitermachen" war zweizeilig, weil der Knopf zu schmal
   wurde. Kein Umbruch im Knopf: lieber schmaler werden lassen. */
.modal-actions.mit-ziel > .btn.mit-ico span { white-space: nowrap; }
@media (max-width: 720px) {
  .modal-actions.mit-ziel .spacer { display: none; }
  .modal-actions.mit-ziel { justify-content: flex-end; }
}

/* Die gebauten Nutzlasten im Probelauf: Text, wie er ist — mit Umbruch,
   damit eine lange Zeile das Fenster nicht breiter macht als den Schirm. */
.probe-feld {
  margin: 6px 0 0; padding: 12px 14px; border-radius: var(--r-flaeche);
  background: var(--feld-grund); border: 1px solid var(--border);
  font: 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow: auto;
}

/* Der kurze Weg steht in einem eigenen Kasten ueber dem langen — er soll
   nicht wie der erste von neun Schritten aussehen, sondern wie die
   Abkuerzung, die er ist. */
.up-anleitung .anl-weg {
  padding: 16px 18px; border-radius: var(--r-flaeche);
  border: 1px solid var(--border); background: var(--raise);
}
.up-anleitung .anl-weg-kopf {
  font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.up-anleitung .anl-weg code {
  font-size: 12px; padding: 2px 6px; border-radius: var(--r-feld);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Der Kasten, der fragt, bevor er kauft. Mittig und ruhig — er ist keine
   Fehlermeldung, sondern eine Wahl. */
.bt-holen {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 2px 8px; max-width: 520px;
}
.bt-holen-titel { font-size: 16px; font-weight: 600; margin-bottom: 8px; }

/* Die Nachrechnung nach einem Lauf: keine Fehlermeldung, sondern ein
   Abgleich. Darum gedaempft und nicht rot. */
/* Die Nachrechnung steht in derselben Flucht wie die Zeilen darueber.

   Sie sass in einem eigenen Kasten, und dessen Innenabstand rueckte ihren
   Text zwoelf Pixel nach rechts — gegen „149 Anzeigen · 14 Wortlaute" eine
   Stufe, die nach nichts aussah ausser nach Versehen. Der Kasten ist weg;
   was sie von der Zeile darueber unterscheidet, ist ihr fettes Wort am
   Anfang, und das reicht. */
.stapel-nach {
  margin: 6px 0 8px;
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
.stapel-nach b { color: var(--text); font-weight: 600; }

/* Die Zeile, an der der naechste Schub haengt. Sie sagt, dass noch etwas
   kommt, und verschwindet, sobald alles gezeichnet ist. */
.bt-nachschub {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 18px 0 6px; font-size: 12.5px; color: var(--faint);
}

/* Die Ueberschriften ueber dem Fliesstext: sie unterscheiden Anzeigen,
   deren Text Wort fuer Wort derselbe ist. Darum tragen sie und stehen
   trotzdem nicht im Weg. */
.copy-kopf {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.copy-kopf-mehr {
  font-size: 11px; font-weight: 500; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-teil); padding: 1px 7px;
}
.pk-copy .pk-kopf-text { color: var(--text); font-weight: 600; }

/* Eine Kachel ohne Bild. Sie sagt, was los ist: Waehrend geholt wird ein
   ruhiges Flimmern, danach das Achtungzeichen — kommt gleich, oder ist weg.
   Vorher war beides derselbe leere Kasten. */
.up-bild-leer {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1; border-radius: inherit;
  background: var(--raise); color: #e5484d;
}
.up-bild-leer svg { width: 18px; height: 18px; }
.up-bild-leer.laedt {
  background: linear-gradient(100deg,
    var(--raise) 30%, color-mix(in srgb, var(--text) 8%, var(--raise)) 50%, var(--raise) 70%);
  background-size: 250% 100%; animation: bildLaedt 1.4s linear infinite;
}
@keyframes bildLaedt { from { background-position: 150% 0 } to { background-position: -50% 0 } }

/* Zwei Auftraege, ein Platz — und ein Umschalter, der wie einer aussieht.

   Hier stand er als Beschriftungszeile: zwei Ueberschriften, ein
   Haarstrich dazwischen, die aktive etwas heller. Der Gedanke war, dass
   das Umschalten keine Aufmerksamkeit verdient — daneben stehen lauter
   ruhige Felder. Nur liest dann auch niemand, dass man umschalten KANN:
   Es sah aus wie eine Beschriftung, in der jemand zwei Woerter fett
   gesetzt hat.

   Jetzt derselbe Segmentknopf, den der Chat und der Builder schon haben.
   Er steht fuer sich, mit Luft darueber — er ist keine Beschriftung mehr,
   sondern die Wahl, welcher der beiden Auftraege gerade dasteht. */
/* Und Luft nach oben: Der Auftrag klebte an der Bank darueber, als
   gehoere er noch dazu. Er ist etwas anderes und faengt darum sichtbar
   weiter unten an — zusammen mit dem Abstand des Rasters sind es 22
   Pixel, genug fuer eine Zaesur und zu wenig fuer eine Luecke. */
.auf-feld { gap: 10px; margin-top: 18px; }
.auf-seg { align-self: flex-start; }

/* Geteilte Kampagnen: „Holen" und „Teilen" sind hier die Hauptsache, keine
   Werkzeuge am Rand. In der Copyliste treten die Knoepfe zurueck, bis man
   die Zeile beruehrt — das ist dort richtig und hier falsch: Wer die Liste
   ansieht, will genau diesen Knopf sehen. */
.gt-zeile .copy-tools { opacity: 1; align-items: center; gap: 6px; }
.gt-zeile .copy-text { color: var(--muted); }

/* Die Zahl neben einer Abschnittsueberschrift im Projekt — dieselbe Pille
   wie in den Kaesten daneben, nur an der gedaempften Schrift ausgerichtet. */
.jhead .vk-zahl { margin-left: 8px; vertical-align: middle; }

/* Der Name unter dem Bild im Projekt. Er liegt auf dem Bild, nicht
   darunter: Sonst wuerde jede Kachel hoeher und das Raster bei
   hundertfuenfzig Bildern spuerbar laenger. Dunkel unterlegt, damit er
   auf hellen wie auf dunklen Motiven lesbar bleibt. */
.img-thumb { position: relative; }
.img-tag {
  position: absolute; left: 4px; right: 4px; bottom: 4px;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: var(--r-feld);
  background: color-mix(in srgb, #000 62%, transparent);
  color: #f3f3f3; font-size: 11px; line-height: 1.3;
  overflow: hidden; white-space: nowrap;
  /* Der Tag nimmt jetzt Klicks an — er ist ein Feld, keine Beschriftung.
     Marks Meldung vom 10.09.2026: „die tags im projekt bei bildern kann
     man nicht bearbeiten weil man diese lupe davor bleibt." */
  cursor: text;
}
.img-tag svg { width: 12px; height: 12px; flex: none; opacity: .75; }
.img-tag input {
  flex: 1; min-width: 0; background: none; border: 0; padding: 0;
  color: inherit; font: inherit; outline: none;
}
.img-tag input::placeholder { color: color-mix(in srgb, #f3f3f3 55%, transparent); }
/* Solange getippt wird, tritt die Kachel zurueck: Der Rahmen sagt, wo
   der Zeiger steht, und die Lupe darunter ruehrt sich nicht. */
.img-tag:focus-within { background: color-mix(in srgb, #000 82%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f3f3f3 30%, transparent); }

/* Woher die Copy stammt — neben ihrem kurzen Namen, aber leiser. „C3"
   sagt, wohin sie gehoert; „Karin Holmberg 5" sagt, aus welcher fremden
   Anzeige sie kam. Das Erste braucht man staendig, das Zweite selten. */
.copy-quelle { margin-left: 8px; color: var(--faint); font-weight: 400; }

/* Platz und Reichweite hinter dem Seitennamen. Eine Nebenangabe, also
   auch so gesetzt: dieselbe Zeile, kleiner, gedaempft. Eine eigene Spalte
   am rechten Rand war zuviel Gewicht — sie brach um und zog den Blick auf
   sich, obwohl man beim Ankreuzen auf Bild und Text schaut. */
.btueber-zahl {
  margin-left: 8px; font-weight: 400; font-size: 11.5px;
  color: var(--faint); font-variant-numeric: tabular-nums;
}

/* Die Zahl neben „Alle": wieviele von oben. Klein und ruhig — es ist eine
   Abkuerzung fuers Ankreuzen, keine Einstellung, und sie sitzt in einer
   Zeile, die schon etwas anderes tut. */
/* Kaestchen, „Alle", dann das Feld — direkt daneben, nicht am anderen
   Ende der Zeile. Beides beantwortet dieselbe Frage: wieviele. */
.btueber-zeile.alle { grid-template-columns: auto 1fr; cursor: default; }
.btueber-zeile.alle .btueber-text { flex: none; }

/* Kaestchen und Wort sind zusammen der Knopf — nicht die Zeile um sie
   herum. Er sieht aus wie vorher, nur trifft man ihn jetzt absichtlich. */
.btueber-alle-knopf {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 10px;
  padding: 4px 8px 4px 0; margin: -4px 0 -4px 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer; border-radius: var(--r-feld); justify-self: start;
}
.btueber-alle-knopf:hover { background: var(--hover); }
.btueber-alle-knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
input.btueber-oben { justify-self: start; }
input.btueber-oben {
  width: 52px; height: 26px; padding: 0 6px;
  border-radius: var(--r-teil); border: 1px solid var(--border); background: var(--feld-grund);
  color: var(--text); font: inherit; font-size: 12px; text-align: center;
  font-variant-numeric: tabular-nums; outline: none; cursor: text;
}
input.btueber-oben::placeholder { color: var(--faint); }

/* Was gerade neu erzeugt wird — abgesetzt von den uebrigen Befunden.

   Wer auf „Neu erzeugen" drueckt, verliert seinen Punkt aus den Augen:
   Er faellt aus der Befundliste, weil der Text, um den es geht, gerade
   nicht existiert. Der Block hier faengt ihn auf. Er steht ueber allem
   anderen, hat seine eigene Ueberschrift und einen Rand an der Seite,
   damit auf einen Blick klar ist: Das gehoert nicht zu der Liste
   darunter, das ist das, woran gerade gearbeitet wird. */
.nach-kopf { align-items: center; gap: 8px; }
.nach-kopf .tr-dots { flex: 0 0 auto; }
.nach-hinweis {
  font-size: 12px; color: var(--muted);
  letter-spacing: .02em;
}
.nach-liste .pruef-punkt {
  border-left: 2px solid var(--border-strong, var(--border));
  opacity: .72;
}
.nach-liste .pp-wer {
  font-style: normal; color: var(--muted); margin-left: 6px;
}

/* Wieviele Bilder im Verlauf nebeneinander stehen.

   Vorher richtete sich das Gitter allein nach der Breite — 830 Pixel je
   Karte mit Vorlage, 420 ohne. Auf einem Bildschirm, der dazwischen
   liegt, passt genau eine, und der Verlauf wird zu einer Saeule. Wieviel
   nebeneinander sinnvoll ist, haengt aber am Bild und am Auge, nicht an
   der Fensterbreite.

   Die Zahl steht am Wurzelelement, damit derselbe Verlauf im Generator
   und im Neu-erzeugen-Fenster des Builders gleich aussieht. minmax(0,1fr)
   statt 1fr: Sonst darf jede Spalte so breit werden wie ihr Inhalt, und
   drei Karten sprengen die Reihe. */
html[data-spalten="1"] .werke,
html[data-spalten="1"] .werke.einzeln { grid-template-columns: minmax(0, 1fr); }
html[data-spalten="2"] .werke,
html[data-spalten="2"] .werke.einzeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-spalten="3"] .werke,
html[data-spalten="3"] .werke.einzeln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-spalten="4"] .werke,
html[data-spalten="4"] .werke.einzeln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Eng wird es trotzdem irgendwann — dann gewinnt der Platz, und zwar
   stufenweise: Vier werden zu zweien, bevor sie zu einem werden. */
@media (max-width: 1400px) {
  html[data-spalten="4"] .werke, html[data-spalten="4"] .werke.einzeln {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1150px) {
  html[data-spalten="4"] .werke, html[data-spalten="4"] .werke.einzeln,
  html[data-spalten="3"] .werke, html[data-spalten="3"] .werke.einzeln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 780px) {
  html[data-spalten="4"] .werke, html[data-spalten="4"] .werke.einzeln,
  html[data-spalten="3"] .werke, html[data-spalten="3"] .werke.einzeln,
  html[data-spalten="2"] .werke, html[data-spalten="2"] .werke.einzeln {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Die Tuer ins grosse Vergleichsfenster.

   Das Paar im Bericht wird anklickbar; das Zeichen oben rechts sagt es,
   ohne eine eigene Zeile zu brauchen. Es erscheint beim Darueberfahren —
   ein Knopf, der immer sichtbar auf jedem der dreissig Paare sitzt, ist
   dreissigmal Unruhe fuer eine Sache, die man einmal braucht. */
.pp-paar.bilder { position: relative; cursor: zoom-in; }
.pp-gross {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: var(--r-teil);
  display: grid; place-items: center;
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  border: 1px solid var(--border); color: var(--text);
  opacity: 0; transition: opacity .14s ease; pointer-events: none;
}
.pp-paar.bilder:hover .pp-gross { opacity: 1; }
.pp-gross svg { width: 15px; height: 15px; }

/* Zaehler und Name im Kopf des Vergleichsfensters, und die zwei Pfeile.

   Das Zeichen ist dasselbe wie ueberall in der App — nur zeigt es von
   Haus aus nach unten, also wird es gedreht: einmal nach links, einmal
   nach rechts. Ein eigenes Zeichen dafuer waere ein zweites, das
   dasselbe sagt. */
.vgl-zaehler {
  font-size: 12px; color: var(--muted); letter-spacing: .03em;
  padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r-teil);
}
.vgl-name {
  font-size: 12.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch;
}
.vgl-zurueck svg { transform: rotate(90deg); }
.vgl-vor svg { transform: rotate(-90deg); }

/* Die zweite Lage im Ueberzug: Sie liegt ueber dem Fenster, das schon da
   ist, und nimmt es nicht weg. */
.ov-lage { position: absolute; inset: 0; z-index: 4; }

/* Wieviel von Metas Kontingent verbraucht ist.

   Sie steht unter der Laufanzeige und bleibt auch nach dem Lauf stehen:
   waehrend des Uploads sagt sie, ob es reicht, danach, was er gekostet
   hat. Ab drei Vierteln faerbt sie sich — dort faengt die App auch an,
   von selbst langsamer zu rufen. */
.up-kontingent {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-soft, var(--border));
}

.uk-text { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.up-kontingent.eng .uk-text { color: var(--zeichen-achtung, var(--text)); }

.btn.warn:hover { color: var(--rot, #e5534b); background-image: linear-gradient(var(--hover), var(--hover)); }

/* Laeuft das Projekt noch — ein Punkt, keine Vokabel.

   Der Stand stand schon unter dem Namen, in einer Zeile mit Nische und
   Plattform. Dort liest man ihn nicht: Wer zwanzig Karten ueberfliegt,
   will es sehen, nicht suchen. Oben links, vor dem Namen, in der Zeile,
   die sonst leer ist. */
.pk-lauf {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}
.pk-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--faint); flex: none;
}
/* Gruen nur, wenn wirklich etwas laeuft — sonst ist es Dekoration. */
.pk-lauf.an { color: var(--muted); }
.pk-lauf.an .pk-punkt { background: #35c47a; box-shadow: 0 0 0 3px rgba(53, 196, 122, .16); }

/* Der CSV-Weg im geoeffneten Projekt — neben der Ueberschrift „Journal",
   dort wo man die Zahlen ansieht und merkt, dass eine Woche fehlt. */
.jhead { display: flex; align-items: center; gap: 12px; }
.j-csv {
  margin-left: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em;
  color: var(--muted); border: 1px solid var(--border);
  border-radius: var(--r-feld); padding: 4px 10px;
  transition: color .14s ease, border-color .14s ease;
}
.j-csv:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.j-csv svg { width: 12px; height: 12px; }

/* Das Fenster fuers Einlesen ist breiter als ein Rueckfragefenster.

   460 Pixel reichen fuer zwei Knoepfe und eine Frage. Hier stehen bis zu
   fuenf Kacheln nebeneinander, und in vier Spalten brach die fuenfte in
   eine eigene Zeile und stand allein da. */
.modal.csvlesen { width: min(720px, calc(100vw - 32px)); }
/* So viele Kacheln, wie nebeneinander passen — und alle gleich breit.
   Bei vier Werten vier, bei fuenf fuenf, ohne einzelne Nachzuegler. */
.csv-zahlen {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}
.csv-zahlen .metric { padding: 14px 12px; }
.csv-zahlen .mv { font-size: 25px; }

/* Der Themeordner: eine Zeile ueber der Eingabe, die sagt, worauf die
   Konsole gerade arbeitet — am Dokument oder an Dateien. */
.sb-ordner-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 11px; border-radius: var(--r-flaeche);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.sb-ordner-zeile > span { flex: 1 1 180px; min-width: 0; }
.sb-ordner-zeile svg { flex: 0 0 auto; width: 15px; height: 15px; }
.sb-ordner-zeile .btn-mini { flex: 0 0 auto; width: auto; }

.sb-ordner-liste { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.sb-ordner-liste li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border-soft);
}
.sb-ordner-liste li:last-child { border-bottom: 0; }
.sb-ordner-liste code { flex: 1 1 auto; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.sb-ordner-liste em {
  flex: 0 0 auto; font-style: normal; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Die Shop-Zeile im Hochladefenster.
   Sie hatte keine eigene Regel: „Shop" und das Auswahlfeld standen im
   Textfluss nebeneinander, getrennt von einem Leerzeichen. Damit hing das
   Feld am Wort. Jetzt eine echte Zeile mit festem Abstand — das Feld
   ruecht ein Stueck nach rechts und steht bei jeder Fensterbreite gleich. */
.set-zeile { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.set-zeile .set-name { flex: 0 0 auto; font-size: 14px; color: var(--muted); }
.set-zeile .set-tun { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Die oberste Zeile der Ablaufspur, wenn darueber schon etwas
   weggefallen ist: Sie verblasst, statt hart abzuschneiden — dieselbe
   Sprache wie in der Konsole, nur an einer Liste, die von unten waechst. */
.up-schritt.verblasst { opacity: .4; }
.up-schritt.verblasst .us-text { color: var(--faint); }

/* Der Knopf rechts im Hochladefenster. Feste Mindestbreite, damit er beim
   Wechsel der Beschriftung nicht springt — aber umbrechen darf er nicht,
   sonst steht „Funktionen verbinden" halb ausserhalb des Fensters. */
.shop-tun {
  height: 38px; min-width: 168px; padding: 0 18px; justify-content: center;
  white-space: nowrap; flex: 0 0 auto; width: auto;
}

/* Der Aktualisieren-Ring dreht sich, solange geholt wird.
   Marks Bitte vom 02.09.2026, 00:15. */
@keyframes ringDreht { to { transform: rotate(360deg); } }
.btn.mit-ico.laedt svg { animation: ringDreht 900ms linear infinite; transform-origin: 50% 50%; }

/* Die Fassung im Messbericht — klein und unaufdringlich, aber da.
   Wer eine Zahl weitergibt, gibt mit, woher sie kommt. */
.vk-fassung {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: .7;
}

/* ============================================================
   Notizen
   ============================================================

   Zwei Spalten: links, was es gibt, rechts, woran man schreibt. Auf
   schmalem Schirm untereinander — die Liste zuerst, denn ohne sie kommt
   man nirgends hin.

   Das Schreibfeld traegt die Stile, die im Text vorkommen koennen. Sie
   stehen hier und nicht am Element, damit auch eingefuegter Text so
   aussieht wie getippter. */

.nz-seite .page-sub { max-width: 62ch; }

.nz-raster { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .nz-raster { grid-template-columns: 1fr; } }

/* ---- Liste ---- */
.nz-liste { padding: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 74vh; overflow: auto; }
.nz-suche { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px;
  background: var(--panel); border-radius: var(--r-feld); }
.nz-suche .ico { display: grid; place-items: center; color: var(--muted); flex: 0 0 16px; }
.nz-suche input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; outline: none; }
.nz-suche input::placeholder { color: var(--muted); }

.nz-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 9px 11px; border: 1px solid transparent; border-radius: var(--r-feld);
  background: none; color: var(--text); text-align: left; cursor: pointer; }
.nz-eintrag:hover { background: var(--hover); }
.nz-eintrag.active { background: var(--panel); border-color: var(--border); }
.nz-e-titel { font-size: 14px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nz-e-meta { font-size: 12px; color: var(--faint); }
.nz-zurueck { display: flex; align-items: center; gap: 7px; width: 100%; margin-bottom: 6px;
  padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--r-feld);
  background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.nz-zurueck:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.nz-zurueck svg { width: 15px; height: 15px; }

.nz-leer { padding: 18px 10px; color: var(--faint); font-size: 13px; }
.nz-leer.gross { display: grid; gap: 14px; place-items: center; padding: 90px 20px; text-align: center; }

/* ---- Blatt ---- */
.nz-blatt { padding: 0; display: flex; flex-direction: column; min-height: 74vh; }

.nz-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 3; border-radius: 14px 14px 0 0;
  background: linear-gradient(var(--sidebar), var(--sidebar)), var(--bg); }
.nz-wz { min-width: 30px; height: 30px; padding: 0 7px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-feld); background: none;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.nz-wz:hover { background: var(--hover); color: var(--text); }
.nz-wz.an { background: var(--panel); border-color: var(--border); color: var(--text); }
.nz-wz.aus { opacity: .3; pointer-events: none; }
.nz-wz svg { width: 15px; height: 15px; }
.nz-trenn { width: 1px; height: 18px; margin: 0 4px; background: var(--border); }
.nz-block { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-feld);
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }

.nz-farben { display: flex; align-items: center; gap: 3px; }
.nz-farbe { width: 17px; height: 17px; border: 1px solid var(--border); border-radius: 50%;
  padding: 0; cursor: pointer; }
.nz-farbe.marker { background: rgba(255, 214, 0, .45); font-size: 10px; line-height: 1; color: #6b5800; }

.nz-tabpanel { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.nz-tabpanel input { width: 58px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: var(--r-feld); background: var(--panel); color: var(--text); font: inherit; }

/* ---- Das Schreibfeld ---- */
.nz-feld { flex: 1; padding: 26px 30px 60px; outline: none; font-size: 15px; line-height: 1.65;
  color: var(--text); overflow-wrap: break-word; }
.nz-feld:empty::before { content: 'Schreib los …'; color: var(--faint); }
.nz-feld > *:first-child { margin-top: 0; }
.nz-feld h1 { font-size: 27px; line-height: 1.25; margin: 26px 0 10px; font-weight: 700; }
.nz-feld h2 { font-size: 21px; line-height: 1.3; margin: 22px 0 8px; font-weight: 700; }
.nz-feld h3 { font-size: 17px; line-height: 1.35; margin: 18px 0 6px; font-weight: 650; }
.nz-feld p { margin: 0 0 10px; }
.nz-feld ul, .nz-feld ol { margin: 0 0 12px; padding-left: 24px; }
.nz-feld li { margin: 3px 0; }
.nz-feld blockquote { margin: 14px 0; padding: 4px 0 4px 16px;
  border-left: 3px solid var(--border); color: var(--muted); }
.nz-feld pre { margin: 14px 0; padding: 12px 14px; border-radius: var(--r-feld); background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  white-space: pre-wrap; overflow-x: auto; }
.nz-feld hr { margin: 22px 0; border: 0; border-top: 1px solid var(--border); }
.nz-feld a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.nz-feld img { max-width: 100%; height: auto; border-radius: var(--r-feld); margin: 8px 0; }

/* Eine Checkliste ist eine Liste ohne Punkte — das Kaestchen ist der Punkt. */
.nz-feld ul.nz-haken { list-style: none; padding-left: 4px; }
.nz-feld ul.nz-haken li { display: flex; align-items: flex-start; gap: 9px; }
.nz-feld ul.nz-haken input[type="checkbox"] { margin-top: 5px; flex: 0 0 auto; accent-color: var(--text); }

/* Tabellen duerfen breiter sein als die Spalte — dann schieben sie sich,
   statt die Seite zu sprengen. */
.nz-feld table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; display: block;
  overflow-x: auto; }
.nz-feld table tbody { display: table; width: 100%; }
.nz-feld th, .nz-feld td { border: 1px solid var(--border); padding: 7px 10px; text-align: left;
  vertical-align: top; min-width: 70px; }
.nz-feld th { background: var(--panel); font-weight: 650; }

.nz-fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--faint); }
.nz-wiegt b { color: var(--muted); font-weight: 600; }
.nz-fuss-rechts { margin-left: auto; display: flex; gap: 6px; }
.btn.ghost.gefahr:hover { color: #e8543f; background-image: linear-gradient(var(--hover), var(--hover)); }

/* Eine Copy im Projekt laesst sich anklicken und aendern.

   Marks Bitte vom 04.09.2026: „im projekt bei uebersicht soll man in die
   copy eingreifen koennen also draufdruecken koennen und dinge bearbeiten
   koennen einfach per mausclick, also text aendern."

   Der Text sieht darum aus wie ein Text und verhaelt sich beim
   Darueberfahren wie ein Feld — kein Rahmen, der die Liste zum Formular
   macht, aber ein sichtbarer Hinweis, dass hier etwas geht. */
/* Und seit dem 09.09.2026 wird ueber den Stift bearbeitet, nicht ueber
   den Text: Solange ein Klick das Schreibfeld aufmachte, liess sich in
   der Copy nichts markieren. Der Text ist jetzt Text — also auch der
   Zeiger. */
.copy-text[data-cid] { cursor: text; border-radius: var(--r-feld); }
.copy-feld {
  width: 100%; min-height: 120px; resize: vertical;
  background: var(--feld-grund); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-flaeche);
  padding: 11px 13px; outline: 0; font: inherit; line-height: 1.55;
}
.copy-feld-fuss { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* Eigene Klasse statt .btn-mini: die traegt keine Grundregel, sondern nur
   Zusaetze je Umgebung — hier waere sie ein unsichtbarer Knopf. */
.copy-fertig {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-feld);
  padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.copy-fertig:hover { background: var(--hover); }
.copy-feld-hinweis { font-size: 12px; color: var(--faint); }

/* In der Copy-Liste des Berichts ist der Knopf immer da — anders als in
   der Projektliste, wo er an `.copy-item.hat-mehr` haengt und ohne diese
   Klasse unsichtbar bleibt. Genau daran fehlte er: Marks Meldung vom
   04.09.2026, „eine vorschau da ohne das man mehr anzeigen drücken kann". */
/* Links, nicht mittig: Er gehoert zum Text darueber, und der beginnt
   links. Zentriert sah er aus wie eine Ueberschrift zwischen zwei
   Bloecken. Marks Bild vom 04.09.2026. */
.pruef-punkt .copy-mehr {
  display: block; width: fit-content; margin: 6px auto 0 0; text-align: left;
}
.pp-ohne { margin: 8px 0 0; font-size: 12px; color: var(--faint); }

/* Die Fundstelle an jedem einzelnen Befund.

   Marks Vorschlag vom 04.09.2026: „oder man macht statt einen riesen
   block, einen block mit jedem zitat einmal so das man sicher gehen kann
   das es nun passt." Bei zehn Befunden sagt eine Fundstelle je Copy
   nichts — man weiss nicht, zu welchem sie gehoert. Je Befund sagt sie,
   ob GENAU DIESE Stelle jetzt stimmt.

   Eingerueckt und zurueckgenommen: Sie ist der Beleg zum Satz darueber,
   nicht selbst ein Befund. */
.nb-stelle {
  display: block; margin: 4px 0 0 0; font-size: 12px; line-height: 1.5;
  color: var(--faint);
}
.nb-stelle i { font-style: normal; margin-right: 6px; opacity: .7; }

/* Ein Knopf an jedem einzelnen Befund.

   Marks Bitte vom 04.09.2026: „so das man auch jeden einzelnen befund
   egal ob positiv oder negativ nochmal korrigieren kann." Er schickt
   GENAU diesen Befund an den Nachschlag, nicht alle zwoelf.

   Zurueckgenommen und in der zweiten Spalte, unter der Fundstelle: Er
   gehoert zum Befund, nicht zur Karte — der grosse Knopf darunter bleibt
   fuer „alles auf einmal". */
.nb-eins-tun {
  grid-column: 2; justify-self: start; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-feld);
  padding: 4px 9px; font: inherit; font-size: 11.5px; color: var(--muted);
  cursor: pointer;
}
.nb-eins-tun:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.nb-eins-tun svg { width: 12px; height: 12px; }

/* Die beanstandete Stelle im Zitat.
   Marks Idee: „bei befunden soll bei zitaten bitte die stelle markiert
   werden." Der Ausschnitt zeigt bis zu 220 Zeichen — welches Wort
   gemeint ist, stand darin bisher nicht geschrieben.
   Gedaempft, nicht grell: Der Ausschnitt bleibt lesbar, die Stelle tritt
   nur hervor. Ein gelber Marker wuerde den Satz zerreissen. */
mark.pp-stelle {
  background: color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--text);
  border-radius: var(--r-klein);
  padding: 0 3px;
}

/* Was gerade neu erzeugt wird — eine Zeile je Copy, aufklappbar.
   Marks Wahl: die Zeile aus Fassung 7 (Name oben, Zusammenfassung klein
   darunter), ohne die drei Punkte davor, und aufgeklappt die
   Gegenueberstellung aus Fassung 12.
   Vorher stand hier eine Kachel je BEFUND mit dem Copy-Namen darin —
   elf Kacheln, elfmal derselbe Name, und das las sich als elf Copys. */
/* Kaesten nebeneinander — Marks Wahl aus sechzig Fassungen: "53 ohne den
   animierten ... in der box".
   Bei zwei Copys zwei Kaesten nebeneinander, bei sechs zwei Reihen: Die
   Ansicht waechst in die BREITE und schiebt nichts nach unten weg. */
.nach-liste { margin-top: 11px; }
.nach-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px; align-items: start;
}
/* Ein aufgeklappter Kasten nimmt die ganze Breite -- die Befunde sind
   Saetze, und Saetze in einer 230-Pixel-Spalte liest niemand. */
.nach-copy.auf { grid-column: 1 / -1; }
.nc-z {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-feld);
  background: var(--raise); cursor: pointer; user-select: none;
}
.nach-copy.auf .nc-z { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nc-z:hover { background: var(--hover); }
.nc-name { font-size: 13px; font-weight: 600; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-unter {
  font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-auf { display: none; padding: 4px 14px 10px;
  border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 10px 10px; background: var(--raise); }
.nach-copy.auf .nc-auf { display: block; }
/* Links der Befund, rechts, was daraus wird. Die drei Spalten halten
   die Ergebnisse an EINER Kante — verschieden lange Befunde wuerden sie
   sonst ueber die halbe Breite streuen. */
.nc-eins {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 160px);
  gap: 14px; align-items: baseline;
  padding: 9px 0; font-size: 12px; line-height: 1.65;
}
.nc-eins + .nc-eins { border-top: 1px solid var(--border-soft); }
.nc-was { color: var(--muted); }
.nc-pf { color: var(--faint); text-align: center; font-size: 11px; }
.nc-stand { color: var(--faint); }
@media (max-width: 640px) {
  .nc-eins { grid-template-columns: 1fr; gap: 3px; }
  .nc-pf { display: none; }
}

/* Das Vorher/Jetzt je Befund — schmaler als das grosse Paar der Copy.
   Marks Ansage vom 05.09.2026: „stattdessen soll jeder befund in dieser
   ansicht so ein vorher naher feld haben wo man den zitat mit markierter
   fehlerstelle sieht."
   Es steht IM Befund, also unter seinem Streifen und mit seinem Rand —
   sonst sieht es aus wie ein eigener Punkt zwischen zweien. */
.nb-paar {
  margin-top: 8px;
  gap: 8px;
}
/* Ohne eigenen Strich links — den traegt die Karte. Genau wie
   .pr-paar .pp-seite im Translator. */
.nb-paar .pp-seite { padding: 8px 10px; border-left: 0; }
.nb-paar .pp-seite p { font-size: 11.5px; line-height: 1.6; }
.nb-paar .pp-seite i { font-size: 9.5px; }

/* Die ganze Copy auf Wunsch — in beiden Ansichten dasselbe.
   Marks Bitte vom 05.09.2026, zweimal: der Ausschnitt zeigt die Stelle,
   wer den Text als Ganzes beurteilen will, braucht ihn ganz. */
.pp-ganz {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 6px 11px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-feld);
  color: var(--muted); font: inherit; font-size: 12px; line-height: 1.5;
  cursor: pointer;
}
.pp-ganz:hover { background: var(--hover); color: var(--text); }
/* In der Kopfzeile des Pruefberichts steht er in einer Reihe mit den
   anderen Knoepfen — dort waere ein Abstand nach oben eine Stufe. */
.pp-ganz.im-kopf { margin-top: 0; flex: none; }
.pp-ganz-pfeil { font-size: 9px; color: var(--faint); transition: transform .16s ease; }
.pp-ganz-pfeil.auf { transform: rotate(90deg); }
/* Der volle Text laeuft ueber, also bekommt er eine eigene Hoehe und
   scrollt darin — sonst schiebt eine Copy von 1400 Woertern alles
   andere aus dem Fenster. */
.pp-ganz-paar { margin-top: 8px; }
.pp-ganz-paar .pp-seite p {
  max-height: 320px; overflow-y: auto;
  white-space: pre-wrap; font-size: 11.5px; line-height: 1.65;
}
/* Wie viele Befunde eine Copy traegt — rechts in ihrer Kopfzeile. */
/* Die Befundzahl steht NEBEN dem Namen, nicht am rechten Rand.
   Marks Ansage vom 05.09.2026: "das mit Befunde soll neben den Copy/Bild
   namen stehen." Am Rand stand sie bei kurzen Namen einen halben
   Bildschirm entfernt und gehoerte optisch zu nichts. */
.pp-zahl { margin-left: 9px; font-size: 12px; color: var(--faint);
  font-variant-numeric: tabular-nums; font-weight: 400; }

/* Ein schwerer Befund traegt denselben Streifen, nur kraeftiger.
   Die Farbe sagt „offen", die Staerke sagt „wiegt schwer" — zwei
   Auskuenfte an einer Kante, ohne ein zweites Zeichen. */
.nb-eins.schlecht.schwer { border-left-width: 4px; }

/* `position: relative` bleibt: Der Knopf, der hier lag, ist weg (Marks
   Ansage vom 08.09.2026 — verschoben wird nur noch durch Ziehen), aber
   die Karte bleibt der Bezug fuer alles, was in ihr absolut sitzt. */
.ub-anzeige { position: relative; }

/* Die Meldung nach einem Zug im Launchpad — unten in der Mitte, mit
   Knopf, solange es etwas zurueckzunehmen gibt. Sie steht ueber allem,
   auch ueber einem offenen Fenster: Wer im Aufbau verschiebt, soll sie
   sehen, ohne die Ansicht zu wechseln. */
.up-zug {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2147483000;
  display: flex; align-items: center; gap: 14px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 14px 11px 16px;
  background: linear-gradient(var(--raise), var(--raise)), var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-flaeche);
  box-shadow: var(--shadow); font-size: 13.5px;
  animation: zugRein .18s cubic-bezier(.22,.61,.36,1) both;
}
.up-zug span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-zug button {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--r-feld);
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.up-zug button:hover { background: var(--hover); }
.up-zug button svg { width: 15px; height: 15px; }
@keyframes zugRein { from { opacity: 0; transform: translate(-50%, 8px); }
                     to   { opacity: 1; transform: translate(-50%, 0); } }

/* Die Rückfrage liegt über allem, auch über einem offenen Fenster.
   Sie ersetzt nichts — sonst nimmt sie beim Schließen mit, was darunter
   stand. */
#fragelage { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: none; }
#fragelage.on { display: block; pointer-events: auto; }

/* Der Anfasser verschwindet, das Ziehen bleibt.
 *
 * Die drei diagonalen Striche in der unteren rechten Ecke zeichnet der
 * Browser selbst — sie sind der Hintergrund von ::-webkit-resizer. Nimmt
 * man ihm den, ist die Ecke weiter da und weiter zu greifen; man sieht
 * sie nur nicht mehr. `display: none` waere der falsche Weg: Das nimmt
 * in manchen Fassungen auch das Ziehen mit.
 *
 * Nur diese drei Felder — sie sind die einzigen, die sich heute ziehen
 * lassen. Der Rest steht auf `resize: none` und soll es bleiben. */
.notes::-webkit-resizer,
.tr-uebernahme .up-eingabe.hoch::-webkit-resizer,
.copy-feld::-webkit-resizer {
  background: transparent; background-image: none; border: 0;
}

/* Vorlage und Ergebnis einer Copy nebeneinander — dieselbe Form wie im
   Prüfbefund, nur als eigene Lage über dem Projektfenster. */
.copy-vgl { width: min(880px, calc(100vw - 40px)); padding: 20px 22px; }
.copy-vgl .vgl-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.copy-vgl .vgl-kopf h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.copy-vgl .vgl-name { font-size: 12.5px; color: var(--faint); }
/* Beide Seiten gleich hoch und für sich rollbar: Wer vergleicht, springt
   zwischen ihnen hin und her und will dabei nicht die Seite verlieren. */
.copy-vgl-paar .pp-seite { max-height: min(62vh, 560px); overflow: auto; }
/* Der Balken war am 09.09.2026 weg — Marks Ansage: „mach diese scrolling
   bar weg." Zwei graue Streifen mitten im Fenster teilten den Vergleich
   optisch in vier Spalten statt zwei.

   Am 10.09.2026 andersherum: „bau ueberall wo was scrollable ist doch
   wieder scrollleisten ein", „aber immer rechts am rand". Der Balken
   kommt jetzt von oben, aus der einen Regel fuer alles — schmaler als
   damals und mit Abstand zum Rand, damit aus dem Streifen kein Strich
   wird. */

/* Und nur EIN Rollbereich je Seite.
 *
   Gemessen am 09.09.2026: Der Absatz trug aus .pp-ganz-paar eine eigene
   Hoehe von 320 Pixeln und rollte darin — INNERHALB der Seite, die
   selbst schon rollt. Der Balken, den Mark sah, gehoerte diesem Absatz.
   Zwei Rollbereiche uebereinander sind schlimmer als jede Luecke; im
   Vergleich rollt die Seite, der Absatz laeuft mit. */
.copy-vgl-paar .pp-seite p, .mk-paar .pp-seite p { max-height: none; overflow: visible; }
.copy-vgl-paar .pp-seite p { white-space: pre-wrap; }
@media (max-width: 700px) { .copy-vgl-paar { grid-template-columns: 1fr; } }

/* ---- Eine markierte Stelle nachschlagen ------------------------------
 *
 * Marks Auftrag vom 09.09.2026: markieren, und an der Markierung stehen
 * zwei Knöpfe — übersetzen und vergleichen.
 *
 * Die Leiste liegt im body und nicht im Fenster: Sie soll über einem
 * Panel genauso stehen wie über einer gewöhnlichen Ansicht, und beide
 * kennen sie nicht. Ihre Stelle rechnet die App aus dem Kasten der
 * Markierung. */
.mk-leiste {
  position: fixed; z-index: 82;
  display: flex; gap: 2px; padding: 3px;
  border-radius: var(--r-flaeche); border: 1px solid var(--border);
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  animation: mkRein .12s ease both;
}
@keyframes mkRein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
html[data-anim="off"] .mk-leiste { animation: none; }
.mk-knopf {
  display: grid; place-items: center; width: 30px; height: 28px;
  border: 0; border-radius: var(--r-feld); background: transparent;
  color: var(--muted); cursor: pointer;
}
.mk-knopf:hover { background: var(--hover); color: var(--text); }

/* Das Ergebnis liegt über allem, was gerade offen ist — auch über einem
   Panel im Überzug. Darum eigene Lage im body statt einer Lage in
   #overlay: Der Translator ist kein Fenster, das Übernehmen schon. */
/* Die Lage laesst durch: kein Schleier, und was darunter steht, bleibt
   bedienbar. Nur das Fenster selbst faengt den Zeiger. */
#mkLage { position: fixed; inset: 0; z-index: 78; pointer-events: none; }
#mkLage .modal {
  pointer-events: auto;
  position: fixed; left: 0; top: 0; transform: none;
  max-height: min(70vh, 620px);
  /* Eine Einblendung, die den Versatz freilaesst.
   *
     modalIn endet auf translate(-50%, -50%), und `both` haelt diesen
     Wert fest — staerker als jede Regel und als die Stilangabe am
     Element. Dieses Fenster setzt seine Lage aber selbst und laesst sich
     schieben; es darf darum nichts am transform festhalten. Also blendet
     es nur auf. */
  animation: mkAuf .14s ease both;
}
@keyframes mkAuf { from { opacity: 0 } to { opacity: 1 } }
.mk-fenster { width: min(720px, calc(100vw - 24px)); padding: 18px 20px; }
.mk-paar .pp-seite { max-height: min(56vh, 480px); overflow: auto; }
/* Zwei Groessen fuer dieselbe Schale — Marks Ansage vom 09.09.2026: Der
   Knopf vergleicht ganze Copys, die Markierung nur eine Stelle. */
#mkLage .modal.mk-gross { width: min(1100px, calc(100vw - 48px)); max-height: min(86vh, 900px); }
.mk-gross .mk-paar .pp-seite { max-height: min(74vh, 760px); }
.mk-paar .pp-seite p { white-space: pre-wrap; }
.mk-paar.einzeln { grid-template-columns: minmax(0, 1fr); }
/* Die Übersetzung sitzt UNTER ihrer Seite und nicht daneben: Sie gehört
   zu diesem Text, nicht zum Paar. */
.mk-ueber {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
/* Nur die Ueberschrift, nicht jedes i darin: Die Punktreihe waehrend
   des Uebersetzens besteht aus drei <i>, und die waeren sonst drei
   Bloecke in Grossbuchstaben. */
.mk-ueber > i {
  display: block; margin-bottom: 4px; font-style: normal;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.mk-ueber p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.mk-fehler { margin-top: 8px; font-size: 12px; color: var(--rot, var(--text)); }
.mk-tu { margin-top: 10px; }
.mk-tu.laeuft { opacity: .5; }

/* Fenster verschieben: der Zeiger sagt es nur da, wo es geht.
 *
   Die Klasse setzt der Griff selbst, und zwar auf das Element, das
   gerade unter dem Zeiger liegt. Ein `cursor: move` fuer .modal im
   Stilblatt haette jeden Text darin miteingefaerbt — Kinder erben den
   Zeiger. */
.mv-griff { cursor: move; }
/* Waehrend gezogen wird, markiert nichts mit. */
.mv-zieht, .mv-zieht * { user-select: none; }

/* Kein Streifen links, wo verglichen wird.
 *
   Marks Ansage vom 09.09.2026: „entferne auch den strich links … und bei
   uebernehmen wenn man auf alle copys ansehen drueckt auch bei allen
   vergleichen." Der Streifen sagt im Pruefbericht, welche Seite die neue
   ist — dort steht er zwischen vielen kurzen Ausschnitten. Wo zwei ganze
   Texte nebeneinander liegen, sagt das die Ueberschrift darueber, und
   zwei senkrechte Striche mitten im Fenster teilen es nur weiter auf.
   Das Polster bleibt, damit der Text nicht springt. */
.pp-ganz-paar .pp-seite { border-left: 0; padding-left: 11px; }
@media (max-width: 700px) { .mk-paar { grid-template-columns: 1fr; } }

/* Eine Copy ohne gespeicherte Vorlage steht allein — dann keine leere
   zweite Spalte daneben. */
.copy-vgl-paar.einzeln { grid-template-columns: minmax(0, 1fr); }

/* ---- Die Marke: schwarz, und nur Umrisse ----------------------------
 *
 * Marks Ansage vom 09.09.2026: „mach das graue schwarz alles nur
 * umrisse."
 *
 * Seit die Marke eine ganze Seite ist, liegt sie auf dem Grund der Seite
 * — und darauf wirkte jede gefüllte Karte wie ein Kasten im Kasten. In
 * einem Fenster war die Fläche noch die Abgrenzung nach außen; eine
 * Seite braucht sie nicht, dort trennt der Umriss.
 *
 * Nur hier, nicht überall: Dieselben Klassen stehen auch in der
 * Übersicht und im Projekt, und dort sind es weiter Karten in einer
 * Ansicht. */
#btBox .bt-kasten,
#btBox .chart-box,
#btBox .ad-platz,
#btBox .bt-filter-pille,
#btBox .seg,
#btBox .bt-fenster-kopf { background: var(--bg); }
/* Der gewählte Reiter bleibt sichtbar: Er ist das einzige Feld, das
   überhaupt eine Fläche trägt, und daran erkennt man ihn. */
#btBox .seg-btn.on { background: var(--raise); }

/* ---- Der Prüfbefund im Generator ------------------------------------
 *
 * Marks Wahl vom 09.09.2026 aus zwanzig Entwürfen: Nummer 10, „ein
 * farbiger Streifen am linken Rand der ganzen Karte, sonst ruhig."
 *
 * Die Auskunft sitzt an einer einzigen Stelle. Grün heißt, das Ergebnis
 * gibt die Vorlage wieder; rot heißt, es gibt etwas zu lesen. Die Sätze
 * darunter tragen darum keine eigene Farbe mehr — der Streifen gilt für
 * die ganze Karte, und zweimal dasselbe zu sagen macht es nicht
 * deutlicher.
 *
 * `display: block` hebt die Reihe von .pruef-punkt auf: Dort stehen
 * Marke und Text nebeneinander, hier steht alles untereinander. */
/* Dieselbe Karte im Generator — Marks Ansage vom 10.09.2026: „bei
   bilder soll es auch so aussehen beim generator, also genau so farbe,
   boxen etc." Dieselben Werte wie .pr-item und .nb-eins. */
.b-befund {
  display: block;
  background: var(--raise); border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--text) 24%, transparent);
  padding: 13px 15px;
  /* Marks Ansage vom 09.09.2026: „den gruenen ohne rundung."
  
     Der Streifen ist die linke Kante der Karte, und die Karte traegt
     vierzehn Pixel Radius — oben und unten bog der Streifen darum mit
     weg. Er soll gerade stehen — links bleibt die Kante darum eckig.
     Rechts darf sie rund sein wie bei jeder anderen Befundkarte. */
  border-radius: 0 14px 14px 0;
}
/* Und der Strich an den Bildkarten daneben faellt weg — Marks Ansage
   vom selben Tag: „mach den strich bei den bilderkarten weg."

   Beim Text sagt er, welche Seite die neue ist (links blass, rechts
   kraeftig). Bei zwei Bildern nebeneinander sagt das die Beschriftung
   darueber, und zwei senkrechte Striche neben dem gruenen dritten waren
   drei Linien fuer eine Aussage. */
.pp-paar.bilder .pp-seite { border-left: 0; }
.b-befund.gut { border-left-color: color-mix(in srgb, #3fa76a 55%, transparent); }
.b-befund.schlecht { border-left-color: var(--rot, #e5534b); }
.b-befund .pp-warum { margin: 0 0 12px; color: var(--muted); }
.b-befund-saetze { margin-top: 12px; display: grid; gap: 6px; }
.b-befund-saetze p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }

/* ---- Launchpad: Flächen weg, Schaltflächen bleiben -----------------
 *
 * Marks Ansage vom 11.09.2026: „mach mal alles grau weg, stattdessen nur
 * umrisse" — „nur bei launchpad" — und dann die Grenze dazu: „alle
 * schaltflächen voll, nicht nur umriss."
 *
 * Damit ist gesagt, worum es geht: Was man ANSIEHT, liegt flach auf dem
 * Grund und wird vom Umriss getrennt. Was man DRÜCKT, behält seine
 * Fläche — ein Knopf ohne Fläche sieht aus wie Text.
 *
 * Flach also die großen Karten, die Vorschauspalte, die Listenzeilen und
 * die Schreibfelder. Gefüllt bleiben Knöpfe, Auswahlfelder, die
 * Reiterleiste und alles, was einen gewählten Zustand trägt.
 *
 * Alles unter `.lp-seite`, denn `.card-box`, `.opt-sel` und `.ctag` gibt
 * es auch anderswo — dort bleibt es, wie es ist.
 *
 * Ausgenommen bleiben zwei Flächen, die keine Oberfläche sind, sondern
 * Inhalt: die Vorschau der Anzeige selbst (.lp-pb) und ihr Fuß (.lp-pf).
 * Wer die flach macht, ändert nicht das Fenster, sondern das Bild. */
/* Die Karten, auf denen Bedienteile liegen, sind keine Umrisse mehr,
   sondern eine Flaeche — Marks Ansage vom 11.09.2026: „die karten im
   launchpad wo schaltflaechen drauf sind sollen doch keine umrisse sein,
   sondern volle flaechen, aber wirklich nur minimal heller als das
   schwarz."

   Acht Punkte ueber dem Grund: rgb(13,13,13) gegen rgb(5,5,5). Die
   urspruengliche Karte lag bei 23 — das war die Flaeche, die zu laut
   war. So viel Unterschied, dass die Karte traegt; so wenig, dass sie
   nicht auffaellt. */
.lp-seite .card-box { background: var(--lp-karte); }
/* `.lp-ak` und `.lp-zw.ad` standen hier auch einmal. Seit Marks
   Entwurf 32 hat die Anzeige keine eigene Flaeche mehr — wer ihr hier
   wieder eine gibt, malt sie ueber die Abzweige. */
/* Alles auf demselben Schwarz — Marks Ansage vom 11.09.2026: „mach
   alle schaltflaechen und felder wie da oben schwarz nicht grau wie da
   unten." Gemessen stand in einer Karte dreierlei nebeneinander: das
   Eingabefeld auf rgb(5,5,5), die Auswahlfelder auf rgb(31,31,31), der
   Segmentschalter auf rgb(28,28,28).

   Was ein Feld AUSGEWAEHLT zeigt, bleibt heller: `.seg-btn.on` und
   `.up-land.on` sind die Marke, nicht die Flaeche. Nimmt man ihnen den
   Ton, sieht man nicht mehr, was gewaehlt ist. */
/* Ein Ton fuer alles, was man anfassen kann — Marks Ansage vom
   12.09.2026: „alle schaltflaechen und felder sollen die farbe haben wie
   bei bild copy und headline die farben der schaltflaeche."

   Das sind `--raise`: die Flaeche, auf der die drei Felder im
   Anzeigeninhalt stehen. Vorher lag hier der Grund selbst, und dann
   standen in einer Karte zwei Sorten nebeneinander — ein Feld, das man
   sieht, und eines, das mit der Karte verschwimmt. */
/* `.lp-seite .lp-pv` stand hier und machte die ganze Vorschaukarte zum
   Feld — Marks Meldung vom 14.09.2026: „den rest der ad karte soll das
   dunkle sein ... von den containern das dunkle grau." Die Karte ist
   kein Feld; nur ihr Fuss ist einer, und der holt sich den Ton selbst. */
/* Die Suche steht nicht mehr in dieser Liste: Sie ist seit dem
   12.09.2026 kein Kasten mehr, sondern ein Strich — und eine Fuellung
   macht daraus wieder einen Kasten. Marks zweite Meldung: „hier bei
   suchen nur der strich ohne dem feld." */
.lp-seite .up-eingabe,
.lp-seite .opt-sel,
.lp-seite .up-sel,
.lp-seite .up-wahl,
.lp-seite .seg,
.lp-seite .up-fest { background: var(--lp-feld); border-color: var(--lp-rand); }
/* Das Lesefeld traegt gar keine Flaeche, nur den Umriss — Marks Ansage
   vom 11.09.2026: „der text hier bei copy geht zu weit rechts an rand
   auserdem soll es nur umriss haben keine hintergrundfarbe." Und rechts
   dieselbe Luft wie links: Elf Pixel Polster waren zu wenig fuer einen
   Absatz, der bis an die Kante lief. */
.lp-seite .up-lesefeld { background: none; padding: 12px 16px; }
/* Die Anzeigenzeile im Formular stand hier auch einmal — sie ist seit
   Marks Entwurf 20 vom 11.09.2026 eine Flaeche und keine Umrandung. Wer
   sie wieder flach macht, nimmt ihm genau das, was er gewaehlt hat. */

/* Beim Hinfahren bleibt eine Spur — ohne sie antwortet nichts mehr.
   Sie muss hier stehen, weil die Regel darüber sonst auch für den
   Hover-Zustand gilt: gleiche Herkunft, höhere Stärke. */
/* Die Spur beim Hinfahren sitzt auf der Zeile, nicht auf der Reihe —
   sonst laeuft sie ueber die Abzweige und hat keine Ecken. */
.lp-seite .lp-zw:hover { background: none; }
.lp-seite .lp-zw:not(.ad):not(.an):hover > .lp-zl { background: var(--lp-spur); }

/* ---- Eine Form je Sache --------------------------------------------
 *
 * Marks Ansage vom 11.09.2026, zuerst anders herum und dann so: „doch
 * nicht pill sondern kantig aber edged so wie bei anderen elementen bei
 * uns, ich will das wir überall konsistente edges haben … ich will die
 * UI overall einheitlich machen."
 *
 * Gemessen war es durcheinander: Unter den Bedienteilen bis 46 Pixel
 * Höhe standen zehn verschiedene Radien nebeneinander — 999, 14, 12,
 * 11, 10, 9, 7, 6, 4 und 0. Nebeneinander in derselben Zeile sahen ein
 * Auswahlfeld (12) und ein Knopf (999) aus wie zwei Dinge aus zwei
 * Programmen.
 *
 * Jetzt gibt es drei Maße, und sie hängen daran, WAS ein Element ist:
 *
 *   --r-teil (8)     Was man drückt, wählt oder betippt und was in
 *                    einer Zeile steht: Knöpfe, Auswahlfelder,
 *                    einzeilige Felder, Reiter, Zeichenknöpfe.
 *   --r-flaeche (12) Was Inhalt hält und in die Höhe geht: Karten,
 *                    Fenster, Popups, mehrzeilige Felder. Unverändert.
 *   --r-pille (999)  Nur noch zwei Dinge, Marks eigene Wahl: der
 *                    Kippschalter, weil er von Natur aus rund ist, und
 *                    reine Etiketten, die man nicht drückt — Marken,
 *                    Grade, Zähler, Statusfähnchen.
 *
 * Darum steht hier keine Zeile für .card-box, .modal oder .pruef-punkt:
 * Die halten Inhalt und sind schon richtig. */
/* Marks Ansage vom 14.09.2026: „buttons sollen immer rund sein mach
   alle rund, die wo viereckig sein sollen sind nur die fuer kleine mini
   knoepfe wo nur ein icon ist."

   Diese Sammelregel steht spaeter als die Bauteile selbst und gewann
   darum gegen jede Form, die eines von ihnen sich gab. Sie ist jetzt
   dreigeteilt — Knopf, Zeichenknopf, Feld —, damit ein Knopf ueberall
   dieselbe Form hat und ein Feld im Launchpad trotzdem eckig bleibt. */
.btn, .btn-white, .seg, .seg-btn, .cact,
.gruppe-neu, .pp-ganz,
.ctag, .ctagwrap { border-radius: var(--r-knopf); }

/* Nur ein Zeichen darin, sonst nichts — Marks Regel vom 14.09.2026:
   „die wo viereckig sein sollen sind nur die fuer kleine mini knoepfe
   wo nur ein icon ist." */
.icon-btn, .img-del, .lp-vgb, .lp-zmehr { border-radius: var(--r-ikon); }

/* Der Pfad oben im Launchpad ist eine Zeile, kein Knopf — Marks Bild
   vom 14.09.2026: „das hier auch quadratisch edged." */
.lp-kr, .lp-zneu, .lp-zurueck { border-radius: var(--r-feld); }

.tab,
.mini, .datefield, .mininput,
.opt-sel, .modellwahl, .up-wahl, .up-sel, .up-land,
.up-eingabe:not(.hoch), .tsub-t,
.lp-ziel, .bt-filter-pille, .lp-chip { border-radius: var(--r-teil); }

/* Das Launchpad ist die eine Ausnahme: Es baut Metas Werbeanzeigen-
   manager nach, und drueben hat jedes Bedienteil Kanten. Marks Ansage:
   „bei meta launchpad sollen die schaltflaechen kantig edged sein."

   Kein zweiter Regelsatz, nur dieselbe Variable neu belegt. Alles im
   Launchpad, was auf --r-teil zeigt — Knoepfe, Auswahlfelder, Felder,
   Suchzeile, Anzeigenkarten — wird damit eckig, ohne dass hier ein
   einziger Selektor doppelt steht. */
/* Die Knoepfe in der Fussleiste bleiben rund — Marks Ansage vom
   11.09.2026: „die buttons unten mit zu meta etc rund machen bitte."
   Sie gehoeren nicht zur Maske, die Meta nachbaut, sondern zur Seite
   darum herum: Probelauf, Datei, Hochladen. */
.lp-seite .up-fuss .btn,
.lp-seite .up-fuss .btn-white { border-radius: var(--r-knopf); }
/* Unten derselbe Abstand wie oben — Marks Ansage vom 11.09.2026: „beim
   button unten rechts mit pausiert zu meta, bitte unten auch padding zum
   rand genauso wie oben zur trennlinie diesen abstand unten
   uebernehmen." Gemessen: achtzehn Pixel ueber den Knoepfen, null
   darunter; sie klebten am Fensterrand. */
.lp-seite .up-fuss { padding-bottom: 18px; }

/* ============================================================
   Der Generator nach Entwurf 01 aus fuenfzig — Marks Wahl vom
   16.09.2026: „nimm 01 bau das live", dazu „alles alte weg das neue
   design komplett uebernehmen."

   Die ganze Seite ist die Bildwand. Unten schwebt darueber eine breite
   Tafel mit Vorlage, Plus, Auftrag, Werkzeugen und dem Knopf.

   Der Entwurf 19 davor — Warteschlange links, Vorlage neben Ergebnis,
   die zwei Knoepfe dazwischen, darunter der Verlauf in Tagesgruppen —
   ist mitsamt seinen Regeln gegangen.
   ============================================================ */
/* Randlos: Die Wand geht bis an die Kanten, wie im Entwurf. Das ist die
   Ausnahme zu `.page.gen-seite`, die sonst eine 1060 Pixel breite Bahn
   mit Polster zeichnet. */
.page.gen-seite.gen-wandseite {
  max-width: none; width: 100%; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
}
/* Nur die Wand rollt, nicht die Seite — sonst faehrt die Tafel mit nach
   oben weg, und die braucht man genau dann, wenn man unten ist.

   Die Wand laeuft UNTER der Tafel durch — Marks Ansage vom 16.09.2026:
   „hier im generator sollen die bilder auch hinter dem eingabe feld
   sein nicht schwarz." Vorher endete sie ueber der Tafel, und darunter
   stand die Seite selbst: ein schwarzes Band quer durchs Fenster.

   Das Polster unten ist die Hoehe der Tafel plus etwas Luft. Es kann
   nicht hier stehen: Die Tafel waechst mit den Vorlagen. `--gl-hoehe`
   wird gemessen (siehe genTafelMessen) — der Rueckfallwert gilt nur fuer
   den ersten Augenblick, bevor die Messung da ist. */
.gw-raum {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 14px calc(var(--gl-hoehe, 86px) + 14px);
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none;
}
.gw-raum::-webkit-scrollbar { width: 0; height: 0; }
/* Eine Reihe fuellt die Breite, und ihre Hoehe rechnet sich aus der
   Summe der Verhaeltnisse — die steht als `aspect-ratio` am Element.
   Darum steht in dieser Datei nirgends eine Reihenhoehe in Pixeln. */
/* `min-height: 0` ist hier kein Feinschliff, sondern die Bedingung:
   Die Reihe ist Kind eines senkrechten Flex-Kastens, und dort gilt
   `min-height: auto` — sie kann dann nicht kleiner werden als ihr
   Inhalt. Ein Bild von 1024 Pixeln Hoehe haette die Reihe auf 1024
   Pixel aufgezogen, und das Seitenmass waere wirkungslos gewesen.
   Gemessen am 16.09.2026: Reihen von 159 statt 96 Pixeln, Kacheln bei
   56 Prozent ihres Verhaeltnisses. */
.gw-r { display: flex; gap: 8px; flex: none; min-height: 0; }
/* Die letzte Reihe: Die Kacheln behalten ihr Verhaeltnis, statt sich
   die Breite zu teilen — sonst zoege eine einzelne Kachel sich ueber
   die ganze Breite. */
.gw-r.letzte .gw-k { flex: none; height: 100%; }
.gw-k {
  position: relative; min-width: 0; overflow: hidden;
  border-radius: var(--r-flaeche); background: var(--raise);
}
/* Das Bild haengt absolut in der Kachel. Stuende es im Fluss, gaebe
   seine natuerliche Hoehe der Kachel — und damit der Reihe — ein Mass,
   und das gerechnete Seitenmass waere nur noch ein Mindestwert.

   Es ist selbst der Weg ins Infofenster — Marks Ansage vom 16.09.2026:
   „einfach draufdruecken reicht."

   Und der Zeiger ist der Zeigefinger, nicht die Lupe: „wenn man ueber
   die bilder hovert im generator soll keine lupe kommen sondern dieser
   zeigefinger." Die Lupe versprach Vergroesserung; ein Klick oeffnet
   aber Auftrag und Vorlage. Vergroessern tut der Griff in der Spalte
   rechts — dort steht die Lupe weiter. */
.gw-k img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; cursor: pointer; }
/* Kommt das Bild nicht aus der Ablage zurueck, steht das da — eine
   leere Kachel sieht aus wie ein Fehler im Aufbau und nicht wie ein
   fehlendes Bild. */
.gw-fehlt {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 6px;
  align-content: center; color: var(--faint); font-size: 11.5px; text-align: center;
}
.gw-fehlt svg { width: 20px; height: 20px; }
/* Die Kachel, die noch unterwegs ist: dieselbe Flaeche, nur atmend. */
/* Entwurf 006 aus vierzig — Marks Wahl vom 18.09.2026: „nimm 006 fuer
   animation." Er hiess „Schimmer quer": ein heller Streifen wandert
   durch den Warteplatz.

   Hier atmete die ganze Flaeche. Eine Flaeche, die heller und
   dunkler wird, sieht aus wie ein Bild, das gleich erscheint — ein
   Streifen, der durchlaeuft, sieht aus, als arbeite jemand daran. Der
   Unterschied zaehlt, wenn zehn davon nebeneinander stehen.

   Der Streifen liegt in `::after`, nicht auf der Kachel selbst: Er
   faehrt ueber die Kante hinaus und muss beschnitten werden, und die
   Kachel traegt ihre Rundung. */
/* Der Warteplatz bleibt liegen, bis das Bild WIRKLICH zu sehen ist —
   Marks Meldung vom 18.09.2026: „bevor die bilder als fertig erscheinen
   verschwindet der platzhalter zu frueh."

   Eine Kachel, deren Bild noch laedt, schimmert darum weiter wie ein
   Warteplatz; erst wenn das <img> geladen meldet, bekommt sie `da` und
   das Bild blendet sich auf. */
.gw-k:not(.da) { position: relative; overflow: hidden; }
.gw-k:not(.da)::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--schleier-2) 50%, transparent 70%);
  animation: gwSchimmer 1.5s ease-in-out infinite;
}
/* Entwurf 012 aus dreissig — Marks Wahl vom 18.09.2026: „012 bitte". Er
   hiess „Zurueckgefahren": Das Bild waechst von sechsundneunzig auf
   hundert Prozent herein.

   Hier stand 006, „Unscharf zu scharf" — Marks Ruecknahme am selben Tag:
   „generator will ich doch andere animation wenn ein bild erscheint."

   Die Groesse macht dieselbe Aussage leiser: Etwas kommt an und setzt
   sich. Und sie kostet nichts — ein Weichzeichner ueber einem Bild von
   zwei Megabyte laesst zehn Kacheln nebeneinander rechnen, eine
   Umrechnung nicht.

   Die Kurve faengt schnell an und laeuft weich aus; das Bild setzt sich
   auf, statt anzuhalten. */
.gw-k img {
  transition: opacity .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.gw-k:not(.da) img { opacity: 0; transform: scale(.96); }

.gw-platz { background: var(--raise); position: relative; overflow: hidden; }
.gw-platz::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--schleier-2) 50%, transparent 70%);
  animation: gwSchimmer 1.5s ease-in-out infinite;
}
@keyframes gwSchimmer {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
/* Die Warteplaetze stehen in einem eigenen Raster statt im justierten
   Satz — sie haben alle dasselbe Verhaeltnis, da gibt es nichts zu
   justieren. Gleiche Spalten, gleiches Verhaeltnis, gleiche Groesse. */
.gw-warte { display: grid; gap: 8px; flex: none; }
/* Die Handgriffe liegen AUF dem Bild und kommen beim Darueberfahren.
   Der Verlauf trug sie vorher in einem Fuss unter jeder Karte; in einer
   Wand gibt es keinen Fuss, und ein Bild, das dauernd Knoepfe traegt,
   ist keins mehr.

   Sie stehen als Spalte am rechten Rand — Marks Ansage vom 16.09.2026:
   „die icons die beim hovern erscheinen sollen auf der rechten seite
   sein, nicht oben von oben rechts nach unten." In einer Reihe oben
   liefen sie bei schmalen Kacheln ueber die halbe Breite und deckten
   das Motiv; senkrecht am Rand decken sie einen Streifen von
   achtundzwanzig Pixeln.

   Der Verlauf geht darum auch von rechts statt von oben. */
.gw-hand {
  position: absolute; inset: 0; opacity: 0;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 7px;
  background: linear-gradient(270deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 34%);
  transition: opacity .14s ease;
  /* Marks Meldung vom 16.09.2026: „es geht immernoch nicht" — gemeint war
     der Klick aufs Bild, der gross machen soll. Der Grund stand genau
     hier: Die Hand liegt mit `inset: 0` ueber dem ganzen Bild. Sie war
     nur durchsichtig, nicht durchlaessig — jeder Klick blieb in ihr
     haengen und kam nie beim Bild an. Durchsichtig ist nicht dasselbe
     wie durchlaessig; das musste dazugesagt werden. Die Griffe selbst
     holen sich den Zeiger zurueck. */
  pointer-events: none;
}
.gw-k:hover .gw-hand,
.gw-k:focus-within .gw-hand { opacity: 1; }
.gw-knoepfe { display: flex; flex-direction: column; gap: 5px; pointer-events: auto; }
/* Marks Meldung vom 16.09.2026: „wenn man ueber bilder im generator
   hovert kommen die icons erst im standard black theme und aendern sich
   dann erst ans glass theme."

   Zwei Ursachen, beide hier: Die Knoepfe trugen eine feste dunkle
   Scheibe (`rgba(10,10,10,.62)`) und ein festes helles Zeichen
   (`#f3f3f3`) — die folgten keinem Thema, sondern waren immer Schwarz.
   Und der Weichzeichner dahinter wird erst einen Bild spaeter fertig:
   Im ersten Bild stand die Scheibe blank da, im zweiten mit Unschaerfe
   — das ist das „aendern sich dann erst".

   Jetzt die Hausflaeche auf deckendem Grund, wie bei der Tafel und der
   Kopfzeile der Tabelle: Sie traegt in jedem Thema den richtigen Ton,
   deckt das Bild darunter und braucht keinen Weichzeichner. */
.gw-kn {
  width: 28px; height: 28px; flex: none; border: 0; border-radius: var(--r-feld);
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.gw-kn:hover:not([disabled]) { background-image: linear-gradient(var(--hover), var(--hover)); }
.gw-kn[disabled] { opacity: .35; cursor: default; }
.gw-kn svg { width: 15px; height: 15px; }
/* Die Aufschrift unter den Griffen ist am 16.09.2026 gegangen — Marks
   Ansage: „auch kein text also auftragsbeschreibung beim hovern." Was
   im Auftrag stand, steht im Vergleichsfenster, das ein Klick auf das
   Bild oeffnet. */
.gw-leer {
  margin: auto; text-align: center; color: var(--muted); font-size: 13.5px;
  padding: 60px 20px;
}
.gw-leer .big { color: var(--text); font-size: 17px; margin-bottom: 7px; }
.gw-raum .liste-mehr { flex: none; margin: 4px 0 0; }

/* ---- Die Tafel: eine Reihe, unten, ueber der Wand ------------------
   Entwurf 01 von links nach rechts: Vorlage, Plus, Auftrag, Werkzeuge,
   Generieren.

   Sie DECKT. Ein Schleier haette hier die Wand darunter durchscheinen
   lassen, und auf einem hellen Bild waere der Auftrag nicht mehr zu
   lesen. Dieselbe Rechnung wie bei `.konsole`: der Ton auf einer
   deckenden Grundfarbe, nicht auf nichts. */
/* Die Tafel liegt ueber der Wand, nicht neben ihr — darum absolut an der
   unteren Kante. `pointer-events` bleibt: Sie deckt ohnehin nur ihren
   eigenen Kasten. */
/* Etwas schmaler als die Wand darunter — Marks Ansage vom 16.09.2026:
   „mach das feld links und rechts minimal schmaler ohne buttons kleiner
   zu machen." Nicht der Inhalt wird enger, nur der Rand aussen breiter:
   Die Tafel liegt jetzt sichtbar AUF der Wand statt an ihren Kanten zu
   kleben. */
.gl-raum {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 24px 14px;
}

.gl-raum .lauf-fehler { margin: 0 0 10px; }
/* Die Tafel ist zwei Teile: oben die Vorlagen, darunter die Zeile. Sie
   sitzt unten fest, also waechst sie nach oben — an den Knoepfen
   aendert sich nichts. */
/* Eckig wie zuvor — Marks Ansage vom 16.09.2026: „mach es doch nicht
   rund sondern edged wie vorher aber groesse beibehalten." Kurz stand
   hier `--r-teil`: Bei einer Zeile eine Stadionform, mit Vorlagen ein
   Kasten mit sehr grossen Ecken. Die schmalere Breite von vorhin bleibt,
   nur die Rundung geht zurueck auf die Sprosse fuer grosse Flaechen. */
.gl-tafel {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 11px;
  border: 1px solid var(--border); border-radius: var(--r-gross);
  /* Marks Meldung vom 23.09.2026: „also generator texteingabe ist glaube
     ich immer noch dunkles grau."

     Ja — und es war eine ZWEITE Stelle: Ich hatte `.gen-karte`
     umgestellt, aber der geteilte Generator baut seine Tafel hier. Das
     Feld darin ist durchsichtig (`.gl-auftrag { background: none }`),
     den Grund traegt die Tafel — sie IST das Eingabefeld, wie drueben
     die Karte.

     Der Verlauf bleibt: Er legt die Farbe auf `--bg`, damit sie auch
     ueber einem durchscheinenden Thema deckt. */
  background: linear-gradient(var(--feld-grund), var(--feld-grund)), var(--bg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.gl-reihe { display: flex; align-items: center; gap: 11px; }
/* Alle eingelegten Vorlagen nebeneinander — Marks Ansage vom
   16.09.2026. Dieselben Kacheln wie im Projekt: 74 Pixel, das Kreuz
   oben rechts, sichtbar erst beim Darueberfahren (`.pj-bild` und
   `.pj-bweg` weiter unten). Bei vielen rollt die Reihe in sich, statt
   die Tafel auf halbe Fensterhoehe zu treiben. */
.gl-vorlagen {
  display: flex; gap: 7px; flex-wrap: wrap;
  max-height: 138px; overflow-y: auto; padding: 1px;
}
/* Etwas kleiner als im Projekt — Marks Ansage vom 16.09.2026: „die
   bilder etwas kleiner." Dort sind es 74 Pixel, dort ist es ein Streifen
   auf einer ganzen Seite; hier liegen sie in einer Tafel, die den Blick
   nicht auf sich ziehen soll. */
.gl-vorl img {
  width: 58px; height: 58px; border-radius: var(--r-feld);
  object-fit: cover; display: block; cursor: zoom-in;
}
.gl-vorl .pj-bweg { width: 18px; height: 18px; top: 3px; right: 3px; }
.gl-vorl .pj-bweg svg { width: 12px; height: 12px; }
/* Nur das Zeichen — Marks Ansage vom 16.09.2026: „das plus icon sauber
   zentrieren ohne umriss und fläche nur icon." Es stand als Kreis mit
   Rand und Fuellung neben dem Auftrag und wog schwerer als der Knopf,
   der den Lauf startet.

   Das Mass bleibt: 34 Pixel sind die Trefferflaeche, auch wenn nichts
   davon zu sehen ist. `place-items: center` setzt das Zeichen mittig —
   ein `svg` im Textfluss saesse auf der Grundlinie und damit zu tief. */
.gl-plus {
  width: 34px; height: 34px; flex: none; padding: 0;
  border: 0; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
  transition: color .14s ease;
}
.gl-plus:hover:not([disabled]) { color: var(--text); }
.gl-plus[disabled] { opacity: .4; cursor: default; }
.gl-plus svg { width: 18px; height: 18px; display: block; }
/* Der Auftrag nimmt, was uebrig bleibt. Er waechst mit dem Text, aber
   nicht ueber vier Zeilen — sonst schiebt ein langer Auftrag die Wand
   aus dem Fenster.

   Marks Meldung vom 16.09.2026: „diese blinkende zeile der eigentlich
   ein strich sein sollte" sah aus „wie eine klammer", und das Feld war
   nicht auf einer Linie mit dem Plus.

   Zwei Ursachen. Erstens erbte das Feld die Zeilenhoehe des Hauses
   (1,6 × 14 = 22,4 px) in einem Kasten von 24 — der Schreibstrich ist
   genau so hoch wie die Zeile, also blieb er anderthalb Pixel unter
   der Kante und saß dazu einen halben Pixel daneben. Jetzt traegt die
   Zeile dasselbe Mass wie das Feld, und der Strich fuellt es ganz.

   Zweitens war die Hoehe nur ein Mindestmass: Ein Feld von 24 neben
   einem Knopf von 34 hat, mittig gestellt, eine andere Mitte. Die
   Zeile daneben setzt sie jetzt gemeinsam. */
.gl-auftrag {
  flex: 1 1 auto; min-width: 120px;
  background: none; border: 0; margin: 0;
  font-size: 14px; line-height: 24px;
  /* Dasselbe Kastenmass wie das Plus daneben — 34 aussen, 24 innen. Das
     ist die Ausrichtung selbst und nicht ihr Ergebnis: `align-self`
     haengt daran, wie hoch die Zeile gerade ist, ein gleich hoher Kasten
     an nichts. Gemessen am 16.09.2026 standen die Mitten auf 195 und
     200. */
  padding: 5px 0; height: 34px; min-height: 34px; max-height: 106px;
  resize: none; outline: 0;
}
.gl-auftrag:focus { border: 0; box-shadow: none; }
.gl-chips { display: flex; align-items: center; gap: 6px; flex: none; }
.gl-chips .opts { display: contents; }
.gl-chips .gen-chip { height: 32px; }
/* Die Projektwahl sieht aus wie im Launchpad — Marks Ansage vom
   16.09.2026: „der projekt button im generator soll so aussehen wie im
   launchpad, kein hover effekt."

   Drueben traegt sie 34 Pixel Hoehe, dreizehn Polster, keinen Umriss und
   eine gedaempfte Schrift, solange nichts gewaehlt ist — und sie hellt
   beim Darueberfahren nicht auf: Sie SAGT, was geladen ist, sie ist kein
   Angebot. Hier stand sie als gewoehnliche Pille mit Umriss und
   Schleier.

   Der Schleier wird ausdruecklich abgeschaltet, nicht nur ueberschrieben:
   Die Regel der Pille setzt ihn beim Zeigen als Bild, und ein Bild laesst
   sich nur mit `none` wieder wegnehmen. */
.gl-chips .gen-chip[data-act="bprojekt"] {
  height: 34px; padding: 0 13px; gap: 8px;
  /* Dieselbe Sprosse wie die Chips daneben — sie stehen in einer Reihe
     und duerfen sich nicht unterscheiden. */
  background: var(--panel-2); border-color: transparent;
  color: var(--muted); font-size: 12.5px;
}
.gl-chips .gen-chip[data-act="bprojekt"].an { color: var(--text); }
.gl-chips .gen-chip[data-act="bprojekt"] svg { color: var(--faint); }
.gl-chips .gen-chip[data-act="bprojekt"]:hover:not([disabled]) {
  background-image: none; color: var(--muted);
}
.gl-chips .gen-chip[data-act="bprojekt"].an:hover:not([disabled]) { color: var(--text); }
.gl-chips .opt-sel { height: 32px; font-size: 12.5px; padding: 0 26px 0 10px; }
.gl-chips .opt-frei { width: 32px; height: 32px; }
.gl-chips .opt-zahl { height: 32px; }
.gl-chips .switch { height: 32px; }
/* Entwurf 07 aus fuenfzig — Marks Wahl vom 16.09.2026: „nimm 07 fuer den
   generator button." Ein geteilter Knopf ohne Fuellung: links laeuft,
   was eingestellt ist; rechts oeffnet das Menue.

   Weiss gefuellt — Marks Ansage vom 16.09.2026: „mach den button doch
   weiss bei generieren." Der Entwurf hatte ihn ohne Fuellung; die Form
   bleibt, die Farbe kommt zurueck. Er ist damit wieder das Hellste in
   der Leiste, und das ist hier richtig: Es ist der Knopf, der den Lauf
   startet.

   Der Strich dazwischen kann darum keine Hausfarbe tragen — die sind
   fuer dunkle Flaechen gedacht. Er rechnet sich aus der Schrift des
   Knopfes, dann stimmt er in Hell wie in Dunkel. */
.gl-los {
  flex: none; display: inline-flex; align-items: stretch;
  height: 38px; border-radius: var(--r-teil);
  background: var(--accent); color: var(--accent-text);
  white-space: nowrap; overflow: hidden;
}
.gl-los:hover:has(.gl-haupt:not([disabled]):hover),
.gl-los:hover:has(.gl-mehr:hover) { opacity: .9; }
.gl-haupt, .gl-mehr {
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.gl-haupt { gap: 8px; padding: 0 18px; font-size: 14px; font-weight: 400; }
.gl-mehr { width: 34px; }

.gl-haupt[disabled] { opacity: .38; cursor: default; }
/* Der Strich zwischen beiden Teilen steht nicht bis an die Kante — sonst
   schneidet er den Knopf in zwei Knoepfe. */
.gl-trenn {
  width: 1px; margin: 8px 0; flex: none;
  background: color-mix(in srgb, var(--accent-text) 20%, transparent);
}
.gl-los svg { width: 15px; height: 15px; }
.gl-mehr svg { width: 12px; height: 12px; opacity: .6; }
.gl-los .tr-dots i { background: var(--accent-text); }
/* Auf schmalen Fenstern bricht die Tafel um: Auftrag oben, Werkzeuge
   und Knopf darunter. Eine Reihe mit acht Teilen auf 600 Pixeln waere
   keine Reihe mehr, sondern acht Streifen. */
@media (max-width: 1080px) {
  /* Umgebrochen bleibt `center`: Mit `flex-start` stehen Plus und Feld
     zwar beide oben in IHRER Zeile, aber die Zeilen sind verschieden
     hoch, und `align-content: stretch` verteilt den Rest darauf — dann
     sitzt das eine fuenf Pixel neben dem anderen (gemessen am
     16.09.2026: 140 gegen 145). Mittig gestellt haengt nichts mehr an
     der Zeilenhoehe. */
  .gl-reihe { flex-wrap: wrap; align-items: center; align-content: flex-start; }
  /* Vorlage, Plus und Auftrag bleiben zusammen in der ersten Zeile —
     ein Plus allein auf einer Zeile sagt nichts. Werkzeuge und Knopf
     ruecken darunter.

     Und sie stehen auf EINER Mitte: `flex-start` daneben richtet sonst
     ihre Oberkanten aus, und ein Feld von 24 neben einem Knopf von 34
     sitzt damit fuenf Pixel zu hoch — gemessen am 16.09.2026, Mitte 195
     gegen 200. */
  .gl-plus, .gl-auftrag { order: -1; }
  .gl-auftrag { flex: 1 1 200px; min-width: 0; }
  .gl-chips { flex: 1 1 auto; flex-wrap: wrap; }
  .gl-los { margin-left: auto; }
}

/* Die Werkbank im Store Builder bleibt, wie sie war — sie fuellt dort
   die Breite. */
.gen-werkbank { display: block; }
/* ---- Die Karte des Auftrags ----------------------------------------
   Marks Ansage vom 14.09.2026: „mach das feld so wie bei higgsfield …
   vom layout." Oben der Auftrag mit einem Plus davor, unten links die
   Einstellungen, rechts der eine grosse Knopf ueber beide Zeilen.

   Der Knopf steht in der zweiten Spalte und ueber beide Reihen — darum
   das Raster und nicht drei Kaesten untereinander. */
.gen-karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 10px 10px; align-items: start;
  /* Marks Frage vom 23.09.2026: „beim generator ist das texteingabefeld
     noch dunkel grau, nicht?" Ja — das Feld darin ist durchsichtig
     (`.gen-auftrag`), den Grund trug die Karte. Sie IST das Feld: Plus
     links, Schreibfeld in der Mitte, Chips darunter. Also traegt sie
     jetzt auch dessen Farbe. */
  background: var(--feld-grund); border: 1px solid var(--border);
  border-radius: var(--r-gross); padding: 14px;
}
.gen-plus {
  grid-column: 1; grid-row: 1;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid var(--border); background: var(--raise); color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.gen-plus:hover:not([disabled]) { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.gen-plus[disabled] { opacity: .4; cursor: default; }
.gen-plus svg { width: 18px; height: 18px; }
.gen-auftrag {
  grid-column: 2; grid-row: 1;
  background: none; border: 0; padding: 7px 0 0; min-height: 34px;
  resize: none; outline: 0;
}
.gen-auftrag:focus { border: 0; box-shadow: none; }
/* Die Einstellungen stehen unter dem Auftrag, ueber beide linken
   Spalten — sonst haetten sie das Plus als Einrueckung. */
.gen-chips {
  grid-column: 1 / 3; grid-row: 2;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
/* Derselbe Ton wie die Pillen daneben — Marks Ansage vom 16.09.2026:
   „im generator projekt soll die selbe farbe haben der schalter wie
   modell und die anderen." Hier stand `--raise`, bei `.modellwahl` und
   `.opt-sel` steht `--panel`: In einer Reihe aus fuenf Pillen war eine
   dunkler als die anderen. */
/* Marks Meldung vom 23.09.2026: „fuers eingabefeld fehlen aber nun die
   schaltflaechen der optionen wie ratio etc im generator."

   Zwei Aenderungen trafen sich: Die Tafel bekam die Feldfarbe
   (`--feld-grund`, also `--panel`) — und die Chips STANDEN schon auf
   `--panel`. Damit waren sie dieselbe Farbe wie ihr Grund, und der
   Rand, der sie bisher trotzdem trennte, ist mit den Umrissen gegangen.

   Sie steigen darum eine Sprosse: `--panel-2` liegt ueber `--panel`,
   wie `--panel` ueber `--raise` liegt. Das ist die Antwort im Sinne von
   „ohne Umrisse" — wo eine Kante fehlt, traegt eine Flaeche. */
.gen-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 11px; border-radius: var(--r-teil);
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-size: 12.5px; white-space: nowrap; cursor: pointer;
  transition: border-color .14s ease;
}
.gen-chip:hover:not([disabled]) { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.gen-chip[disabled] { opacity: .4; cursor: default; }
.gen-chip svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.gen-chip.an svg { color: var(--text); }
.gen-chip.nur-ico { width: 32px; padding: 0; justify-content: center; }
.gen-strich { width: 1px; height: 20px; background: var(--border); flex: none; }
/* Der eine grosse Knopf, ueber beide Reihen. */
/* Er stand ueber beide Reihen der Werkbank und war damit so hoch, wie
   die Karte gerade ist — der einzige Knopf im Haus ohne eigenes Mass.
   Seit dem 18.09.2026 hat er dasselbe wie alle und steht in der Mitte
   der beiden Reihen. */
.gen-los {
  grid-column: 3; grid-row: 1 / 3; align-self: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; min-width: 168px; padding: 0 16px; border-radius: var(--r-flaeche);
  background: var(--accent); color: var(--accent-text); border: 0;
  font-size: 14px; font-weight: 400; cursor: pointer;
}
.gen-los:hover:not([disabled]) { opacity: .9; }
.gen-los[disabled] { opacity: .38; cursor: default; }
.gen-los svg { width: 15px; height: 15px; }
.gen-los .tr-dots i { background: var(--accent-text); }
/* Auf schmalen Fenstern rutscht der Knopf unter die Karte. */
@media (max-width: 780px) {
  .gen-karte { grid-template-columns: auto minmax(0, 1fr); }
  .gen-los { grid-column: 1 / 3; grid-row: 3; min-height: 42px; }
}
/* Die Optionen aus bildOptsHtml stehen jetzt in der Karte — dort tragen
   sie dasselbe Mass wie die Chips daneben. */
.gen-chips .opts { display: contents; }
.gen-chips .opt-sel { height: 32px; font-size: 12.5px; padding: 0 28px 0 11px; }
.gen-chips .opt-frei { width: 32px; height: 32px; }
.gen-chips .opt-zahl { height: 32px; }
.gen-chips .switch { height: 32px; }
/* Entwurf 02: Die Optionen stehen in derselben Zeile wie die Werkzeuge,
   rechts vor Generieren. Sie tragen dort keinen eigenen Abstand mehr —
   die Zeile setzt ihn. */
.bild-tools .opts { gap: 8px; }
/* Auf schmalen Fenstern bricht die Zeile um. Dann sollen die Optionen
   zusammenbleiben statt einzeln zu wandern. */
.bild-tools .opts { flex: 0 1 auto; }
.bild-rechts.gen-voll { width: 100%; }

/* `.werk` steht auf der Generator-Seite nicht mehr — dort haengen die
   Bilder in der Wand. Im Store Builder tragen sie weiter ihre Karte. */

/* Der Befund des Probelaufs als Fenster, Entwurf 08 — Marks Wahl vom
   13.09.2026. Sauber: vier Zahlen als Kaesten. Mit Befunden: jeder
   Befund ein Kasten, und die Liste rollt.

   Ohne Farbe. Der Unterschied liegt im Satz und in der Form. */
.upb-zahlen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 16px;
}
.upb-kasten {
  background: var(--karte); border: 1px solid var(--border);
  border-radius: var(--r-flaeche); padding: 11px 13px;
}
.upb-eti {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.upb-wert {
  font-size: 19px; font-weight: 600; margin-top: 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
/* „und 9 weitere" ist keine Auskunft — Marks Ansage vom 13.09.2026:
   „bei mit befunden scrollable statt … weitere". Also stehen alle da,
   und die Liste rollt. */
.upb-liste {
  margin-top: 16px; display: flex; flex-direction: column; gap: 8px;
  max-height: min(44vh, 340px); overflow-y: auto; padding-right: 3px;
}
.upb-befund { font-size: 13px; color: var(--muted); line-height: 1.5; }
/* Im Upload-Bericht traegt jeder Kasten den Namen der Anzeige und
   darunter den Grund — sonst liest man dreissigmal „Ungültige
   Zieladresse" und weiss nie, welche. */
.upb-name { display: block; color: var(--text); font-weight: 500; margin-bottom: 3px; }

/* ---- Leere Felder sagen, was zu tun ist ----------------------------
   Marks Ansage vom 13.09.2026: „hier soll immer da stehen ‚… waehlen'
   je nach element halt bild oder copy etc immer zentriert."

   Alle drei Felder — Bild, Copy, Ueberschrift — sehen leer gleich aus:
   ein Wort in der Mitte, sonst nichts. Vorher stand dort dreimal ein
   anderer Satz („ohne Bild", „ohne Text", „ohne Ueberschrift"), jedes
   linksbuendig und jedes eine Meldung ueber einen Mangel. */
.up-waehlen {
  display: block; width: 100%; text-align: center;
  color: var(--faint); font-size: 13.5px;
}
.up-medium.leer, .up-fest.leer, .up-lesefeld.leer {
  justify-content: center; align-items: center; text-align: center;
}
/* Leer hat das Bildfeld keinen Daumennagel mehr — die Hoehe bleibt
   trotzdem, damit die Karte beim Waehlen nicht springt. */
.up-medium.leer { min-height: 90px; }
.up-fest.leer { min-height: 40px; }
.up-lesefeld.leer { min-height: 90px; display: flex; }

/* Zwei Namen fuer die beiden Flaechen des Launchpads, damit ein Thema
   sie tauschen kann, ohne jede Regel anzufassen — Marks Ansage vom
   12.09.2026: „passe das launchpad den designs an bei glas z.B wirkt das
   glas theme nicht wirklich."

     --lp-grund  der Grund unter allem: Rahmen, Stamm, Vorschau, Karten.
     --lp-feld   was man anfasst: Felder, Schalter, Zeilen, die Auswahl.

   In Schwarz sind beide der Grund selbst, und die Form kommt vom Rahmen.
   Auf Glas wird der Grund durchsichtig und das Feld ein heller Schleier
   — sonst stuende ein schwarzer Kasten auf dem Verlauf. */
.lp-seite, .lp-drei, .lp-form, .lp-baum { --r-teil: 8px;
  /* Der Grund bleibt das Schwarz der Seite: Rahmen, Stamm und Vorschau
     sind der Raum, in dem gearbeitet wird, nicht das, woran man
     arbeitet. */
  --lp-grund: var(--bg);
  /* Die Felder eine Stufe ueber der Karte — Marks Wahl vom 14.09.2026
     aus acht Wegen, Nummer 03. Das Launchpad hatte bis dahin nur
     Umrisse: Karte, Feld und Grund waren dasselbe Schwarz, und jede
     Grenze kam aus einer Linie. Jetzt tragen die drei Ebenen drei
     Toene — 5 der Grund, 19 die Karte, 28 das Feld —, und die Linien
     zeichnen nur noch nach, was die Flaeche schon sagt. */
  --lp-feld: var(--panel);
  /* Und der Umriss dazu. Er steht nicht fest, sondern immer denselben
     Schritt ueber dem Feld — Marks Ansage vom 14.09.2026: „die felder im
     launchpad wo man was eintragen kann haben kein umriss, mach da einen
     passenden basierend auf unser orakel wie es sonst so gehandhabt
     ist."

     So wird es im Haus gehalten: Ein Feld auf `--raise` (19) traegt
     einen Rand von 29, und das sind vier Prozent Schrift darueber.
     Genau diese vier Prozent stehen hier — auf einem Feld von 28 ergibt
     das 37. Der feste `--border` lag bei 29 und war damit einen Punkt
     vom Feld entfernt: unsichtbar. */
  --lp-rand: color-mix(in srgb, var(--text) 4%, var(--lp-feld));
  /* Dieselbe Flaeche wie die Karten in der Mitte — Marks Ansage vom
     11.09.2026: „wenn man auf einer ad/adset ist mach das mal in die
     selbe farbe wie die karten in der mitte dieses leicht hellere
     schwarz." Ein Wert, drei Stellen: die Karte, die gewaehlte Zeile,
     die gewaehlte Anzeige. */
  /* Nur Umrisse, schwarzer Grund — Marks Ansage vom 12.09.2026: „und
     nun nur mit umrissen und schwarzen hintergrund mal beim launchpad."
     Die Karte hatte seit dem 11.09. eine eigene Flaeche; jetzt traegt
     sie nur noch ihren Rahmen. */
  /* Die Karte nimmt den Grund des Launchpads, nicht den der Seite —
     Marks Meldung vom 12.09.2026: „das launchpad buggt im glass … da ist
     klassischer schwarzer background." Auf Glas ist `--bg` eine feste
     Farbe (#08080a); die Karten standen damit als schwarze Bloecke auf
     dem Verlauf, waehrend Stamm und Vorschau laengst durchsichtig waren. */
  /* Derselbe Ton wie die Projektkarten in der Uebersicht — Marks
     Auftrag vom 14.09.2026: „probier mal sauber und anschaulich den
     grauton bei projekten der karten ins launchpad einzuarbeiten, das
     launchpad hat aktuell ja nur umrisse." */
  --lp-karte: var(--raise);
  /* Die gewaehlte Zeile im Baum eine Stufe heller als die Karten —
     Marks Ansage vom 11.09.2026: „und links beim stamm wieder etwas
     heller aber das davor war zu hell." Davor stand dort `--panel`
     (rgb 28,28,28), das war zu laut; die Karten liegen bei 13. Sechs
     Prozent ergeben 19 — dazwischen. */
  /* Die Spur beim Hinfahren muss LEISER sein als die Auswahl, sonst
     leuchtet eine ungewaehlte Zeile heller als die gewaehlte. */
  --lp-spur: color-mix(in srgb, var(--text) 8%, var(--sidebar)); }

/* Auf Glas ist der Grund kein Grund, sondern eine Scheibe: Der Rahmen
   traegt die Unschaerfe, alles darin ist durchsichtig, und was man
   anfassen kann, liegt als heller Schleier darauf. Marks Meldung vom
   12.09.2026: „bei glas z.B wirkt das glas theme nicht wirklich" — es
   wirkte nicht, weil das Launchpad seit dem schwarzen Umbau ueberall
   eine deckende Flaeche legte. */
html[data-bg="glas"] .lp-seite,
html[data-bg="glas"] .lp-drei,
html[data-bg="glas"] .lp-form,
html[data-bg="glas"] .lp-baum {
  --lp-grund: transparent;
  --lp-feld: var(--raise);
}
html[data-bg="glas"] .lp-drei {
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 12px 34px rgba(0, 0, 0, .28);
}
/* Die Karten im Launchpad tragen auf Glas keine zweite Scheibe — sie
   liegen IN der einen, die der Rahmen ist. Sonst stapelt sich Unschaerfe
   auf Unschaerfe, und die Mitte wird milchig. */
html[data-bg="glas"] .lp-seite .card-box {
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}

/* Die zwei Ausnahmen, die Mark ausdrücklich rund haben wollte.
   Sie stehen NACH der Regel darüber, sonst gewänne die Regel. */
.sw-track, .sw-knob,
.up-marke, .pk-marke, .sb-marke, .kz-marke,
.btpruef-grad, .sc-ruht, .wache-sicht,
.hb-balken, .hb-balken span { border-radius: var(--r-pille); }

/* Was rund BLEIBT, weil es kein Bedienteil ist: Kreise. Ein Punkt, ein
   Kopfbild, ein Fortschrittsring — die tragen 50 % und kein Maß von
   oben. Sie stehen verstreut in der Datei und werden hier nicht
   angefasst; wer sie sucht, sucht nach `50%`. */

/* ============ Die Seite eines Projekts ============
   Marks Wahl vom 14.09.2026: Entwurf 40 fuer den Aufbau, 03 fuer die
   Tabelle, 16 fuer die beiden Verbindungen, 24 fuer die Angaben, 09 fuer
   das, was darunter steht. Volle Breite wie im Launchpad. */
/* Dieselbe Spalte wie die Uebersicht — Marks Ansage vom 14.09.2026:
   „soll doch nicht volle breite haben sondern so wie die projekt
   uebersicht." Damit erbt sie `max-width: 1060px` und das Polster von
   `.page`; hier steht nur noch, was anders ist. */
/* Herein wie das Uebernehmen-Fenster im Brandtracker: dieselbe Kurve,
   dieselbe Dauer — `modalVollIn`. Nur beim Oeffnen, nicht bei jedem
   Neuzeichnen; darum haengt sie an `.frisch`, und das setzt app.js genau
   einmal. */
.page.proj-fenster.frisch { animation: modalVollIn .32s ease both; }
html[data-speed="slow"] .page.proj-fenster.frisch { animation-duration: .5s; }
html[data-speed="fast"] .page.proj-fenster.frisch { animation-duration: .2s; }
html[data-anim="off"] .page.proj-fenster.frisch { animation: none; }
.page.proj-fenster > * + * { margin-top: 14px; }
.page.proj-fenster .page-head { margin-bottom: 0; }

/* Entwurf 13 aus dreissig — Marks Wahl vom 14.09.2026: Die Angaben
   stehen als zweite Zeile unter dem Namen. Die Kopfzeile hat darum zwei
   Spalten: links Name und Zeile, rechts die Handgriffe. */
.proj-fenster .page-head.proj-kopf { align-items: flex-start; }
.proj-fenster .page-head > .spacer,
.proj-fenster .page-head > button { align-self: center; }
/* Rechts dieselbe Ordnung wie links: eine Zeile, darunter die zweite.
   Sie flucht mit dem rechten Rand, nicht mit dem linken — sonst haengen
   zwei verschieden breite Knoepfe unter dem X in der Luft. */
.proj-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.proj-titelspalte { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.proj-fenster .page-title { flex: none; min-width: 0; display: block; }
.proj-zeile2 { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); }
.proj-zeile2 em { font-style: normal; color: var(--border); }

/* Marks Meldung vom 15.09.2026: „hier oben kann man die werte nicht
   aendern/eintragen muss man aber koennen." Jede Angabe ist ein Griff:
   anklicken, tippen, Enter. Was leer ist, steht blass da und nennt, was
   hinkaeme — sonst gaebe es keinen Ort, an dem man es anlegen koennte. */
.pk-stelle {
  border-radius: var(--r-klein); padding: 1px 4px; margin: -1px -4px;
  cursor: pointer; transition: color .14s ease, background-color .14s ease;
}
.pk-stelle:hover { color: var(--text); background-color: color-mix(in srgb, var(--text) 8%, transparent); }
.pk-leer { color: var(--faint); }
.pk-raus { display: inline-flex; color: var(--faint); margin-left: 4px; vertical-align: -2px; }
.pk-raus:hover { color: var(--text); }
.pk-raus svg { width: 12px; height: 12px; }
.pk-ein {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-feld);
  color: var(--text); font: inherit; font-size: 12.5px; outline: 0;
  height: 26px; padding: 0 8px; min-width: 0; width: 132px;
}
.pk-ein[type="date"] { width: 148px; }
/* Der Name oben: dasselbe Spiel, nur in der Groesse der Ueberschrift. */
.pk-klick { cursor: pointer; border-radius: var(--r-feld); }
.pk-klick:hover { background-color: color-mix(in srgb, var(--text) 8%, transparent); }
input.pk-titel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-feld);
  color: var(--text); font: inherit; outline: 0; padding: 2px 10px; width: 100%; max-width: 520px;
}

/* Die zwei Pillen fuer die Verbindungen und der CPA-Knopf mit Zahlen
   sind am 15.09.2026 gefallen — Marks Wahl: ein Kettenzeichen im
   Quadrat fuer beide, ein Rechnerzeichen im Quadrat fuer den CPA.
   Beides steht jetzt bei `.pr-ikon`. */

/* Flaechen statt Umrisse — Marks Ansage vom 14.09.2026: „nun das alles
   aber komplett schwarz und nur umrisse hat gefaellt mir auch nicht."
   Seine Wahl aus fuenfundzwanzig: 04 fuer den Kopfbereich, 21 fuer die
   Tabelle, und unten dieselben gefuellten Kaesten.

   `.card-box` steht im Haus auf `--sidebar`, und das ist reines
   Schwarz — darum sah die Seite aus wie Umrisse auf nichts. Hier tragen
   die Kaesten den Ton der Karten. */
.proj-fenster .card-box { background: var(--raise); }

.proj-alink { color: var(--text); border-bottom: 1px solid var(--border); }

/* Richtung H aus acht — Marks Wahl vom 15.09.2026: „Ebene als Reiter an
   der Karte." Die Zeile darueber trug vier Pillen, von denen keine
   fuehrte. Jetzt sind die Ebenen Reiter: Der gewaehlte traegt denselben
   Ton wie die Karte darunter und geht in sie ueber — deshalb unten
   keine Rundung und ein Pixel Ueberlappung, sonst stuende zwischen
   Reiter und Karte eine Haarlinie.

   Rechts zwei eckige Zeichenknoepfe (Rechner, Verbindungen) und der
   Zeitraum ohne Flaeche. Sie sitzen auf der Grundlinie der Reiter, nicht
   in ihrer Mitte — sonst schwebten sie ueber der Karte. */
/* Marks Meldung vom 15.09.2026: „verschiebe das dunkle in der tabelle so
   das es mit dem anzeigengruppen tab matcht." Die Kante zwischen der
   Namensspalte und den Zahlen lag zufaellig nahe am zweiten Reiter —
   gemessen 445,7 gegen 215,2, in seiner Fensterbreite elf Pixel
   auseinander. Beide haengen jetzt an derselben Zahl: Der erste Reiter
   ist so breit wie die erste Spalte, also faellt die Kante immer auf den
   Anfang des zweiten Reiters, egal welche Ebene gewaehlt ist und wie
   breit das Fenster steht. */
.proj-fenster { --pj-name: 260px; }
.proj-reiter { display: flex; align-items: flex-end; margin: 4px 0 0;
  /* Marks Ansage vom 15.09.2026: „schieb die elemente rechts zum rand die
     3 buttons aligned mit dem tabellen rand." Die Zeile erbte ein Polster
     von 40 Pixeln links und rechts — die Karte darunter hat keines, und
     darum standen die Knoepfe vierzig Pixel innerhalb der Tabellenkante. */
  padding: 0; }
/* Keine Luecke zwischen den Reitern: Sie wuerde den zweiten um ihre
   Breite nach rechts schieben, und genau dort soll die Spaltenkante
   liegen. Abstand machen die Reiter mit ihrem eigenen Polster. */
/* Marks Ansage vom 15.09.2026: „schiebe adset und ad reiter wieder
   naeher, die reiter sollen nur so gross sein wie der name mit etwas
   padding." Der erste Reiter war so breit wie die Namensspalte, damit
   die Kante darunter auf ihn fiel — das schob die beiden anderen weit
   nach rechts. Jetzt traegt jeder nur seinen Namen. Der erste faengt
   trotzdem an der Kartenkante an, darum das gleiche Polster wie in der
   ersten Zelle. */

.proj-reiter .pr-ikon { margin-left: 7px; }
/* Der Chartschalter sitzt zwischen Rechner und Zeitraum. Gemessen war er
   38 hoch, die beiden anderen 30 — seine Mitte lag drei Pixel tiefer und
   die Zeile hatte zwei Linien. */
.proj-reiter .proj-form { margin-left: 7px; margin-bottom: 6px; flex: none; padding: 1px; }
.proj-reiter .proj-form .seg-btn { height: 26px; padding: 0 11px; }
.proj-reiter .proj-form .seg-btn svg { width: 15px; height: 15px; display: block; }
.proj-reiter .proj-datum { margin-left: 7px; }
.proj-reiter .spacer { flex: 1; }
/* Marks Ansage vom 15.09.2026: „mach die reiter mal so wie im launchpad
   vom design, icon dann einfach Kampagne, Anzeigegruppe, Anzeigen."
   Derselbe Pfad wie drueben — Zeichen, Name, Winkel dazwischen, der
   gewaehlte als gefuellte Flaeche. Kein Reiter mehr, der auf der Karte
   sitzt: Die Zeile steht frei darueber, darum Abstand statt
   Ueberlappung. */
/* Marks Ansage vom 15.09.2026: „den abstand von den 3 reitern zur
   tabelle soll auch wie bei launchpad sein." Drueben traegt `.lp-kopf`
   vierzehn Pixel nach unten — dieselbe Zahl, damit beide Pfade nicht nur
   gleich aussehen, sondern auch gleich sitzen. */
.proj-reiter { align-items: center; gap: 8px; padding-bottom: 14px; }
/* Gemessen im Fenster: Die Karte bringt ihrerseits 14 Pixel Rand mit, und
   zusammen mit dem Polster der Zeile waren es 28 — doppelt so viel wie im
   Launchpad, wo `.lp-drei` keinen Rand hat. Marks Meldung vom 15.09.2026:
   „beim projekt tabelle soll der reiter genauso nah entfernt sein wie im
   launchpad." */
.proj-fenster .proj-reiter + .card-box { margin-top: 0; }
.proj-reiter > em { color: var(--faint); font-style: normal; }
.pe-stufe {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 30px; padding: 0 10px; border: 0; background: none;
  border-radius: var(--r-feld); color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.pe-stufe:hover { background: var(--hover); color: var(--text); }
.pe-stufe.an { background: var(--panel); color: var(--text); font-weight: 500; }
.pe-stufe i { display: flex; color: var(--faint); }
.pe-stufe i svg { width: 15px; height: 15px; }
.pe-stufe.an i { color: var(--text); }
/* Marks Meldung vom 15.09.2026: erst „der umriss fehlt bei den reitern
   bei der tabelle oben", dann „ohne umriss". Der Umriss brach oben auf,
   wo der Reiter sass — ihn am Reiter weiterzufuehren waere die eine
   Loesung gewesen, ihn ganz wegzulassen die andere. Marks Wahl ist die
   zweite, und sie passt ins Haus: Flaechen statt Linien. Die Karte
   traegt darum keine Linie mehr, und der Reiter braucht auch keine. */

.proj-fenster .proj-leistung { border-color: transparent; }

/* Entwurf 30: die Inhalte als Reiter ueber einer Karte. Dieselbe Form wie
   ueber der Tabelle — nur mit Zahlen an den Reitern, weil hier die Menge
   zaehlt: Wie viele Copys gibt es, wie viele Bilder. */
.proj-fenster .proj-inhalt { border-color: transparent; padding: 16px 18px; }
.proj-inhaltreiter { margin-top: 18px; }
.pi-zahl {
  margin-left: 7px; font-size: 10.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.pe-stufe.an .pi-zahl { color: var(--muted); }
.pi-mehr {
  background: none; border: 0; font: inherit; font-size: 12px; color: var(--muted);
  padding: 5px 10px; border-radius: var(--r-knopf); cursor: pointer;
  margin-bottom: 6px; flex: none; white-space: nowrap;
}
.pi-mehr:hover { color: var(--text); background-image: linear-gradient(var(--hover), var(--hover)); }
.proj-inhalt .ov-empty { padding: 26px 2px; }

/* Marks Ansage vom 15.09.2026: „dann kommen alle felder untereinander
   also copy dann bilder dann headlines dann seiten als einzelne boxen
   einfach untereinander." Also nicht mehr eine Karte mit Trennlinien
   (Entwurf 21), sondern vier Boxen von derselben Art wie jede andere
   Box der Seite. */
.proj-fenster .pa-box { border-color: transparent; padding: 16px 18px; }
.pa-box + .pa-box { margin-top: 14px; }
.pa-box .ov-head { margin-bottom: 12px; }
.pa-zahl { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pa-box .ov-empty { padding: 4px 0 2px; }

/* Entwurf 32 aus fuenfzig — Marks Wahl vom 15.09.2026: „knopf am fuss
   mittig und gefuellt." Er steht am Fuss der Karte, weil dort das
   Naechste hinkommt; der Plus-Knopf oben rechts ist dafuer gefallen. */
.pi-fuss {
  width: 100%; margin-top: 12px; padding: 11px 0;
  background: var(--panel); border: 0; border-radius: var(--r-feld);
  color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: color .14s ease, background-color .14s ease;
}
.pi-fuss:hover {
  color: var(--text);
  background-image: linear-gradient(var(--hover), var(--hover));
}
.pi-fuss svg { width: 15px; height: 15px; }

/* Marks Ansage vom 15.09.2026: „bei bild soll einfach ganz links ein
   platzhalter sein wo man bild einfuegen kann." Dieselbe Groesse wie ein
   Bild daneben, damit die Reihe nicht springt.

   Und dasselbe AUSSEHEN wie drueben — Marks Meldung vom 18.09.2026,
   zum dritten Mal: „hier ist es immernoch gestrichelt das bild upload
   schaltflaeche es soll aber so aussehen wie im launchpad."

   Die beiden Male davor traf es `.img-add`: dieselbe Handlung, aber eine
   andere Klasse an einem anderen Ort. Diese hier heisst `.pi-bildneu`
   und blieb liegen. Jetzt haengt sie an derselben Regel wie
   `.lpd-hochfeld` und `.img-add` — sie sagt nur noch, wie gross sie ist,
   nicht mehr, wie sie aussieht. */
.pi-bildneu {
  width: 74px; height: 74px; aspect-ratio: auto; flex: none; cursor: pointer;
  transition: color .14s ease, background-color .14s ease;
}
.pi-bildneu svg { width: 18px; height: 18px; }
/* Gilt fuer jede Karte unter einem Reiter, nicht nur fuer die Tabelle —
   Marks Meldung vom 15.09.2026: „die reiter haben eine luecke." Die
   Inhaltskarte fiel durch, weil hier `.proj-leistung` stand. */

/* Marks Bild vom 15.09.2026: eine Kerbe links unter dem ersten Reiter.
   Die Karte rundet ihre obere linke Ecke, der Reiter darueber steht
   gerade — also lief die Rundung unter ihm sichtbar weg. Steht der erste
   Reiter oben, bleibt die Ecke eckig; steht ein anderer, rundet sie wie
   sonst. */

/* Zwei gleiche Quadrate — Marks Wahl vom 15.09.2026: Entwurf 20 „aber
   edged quadrat", und der Rechner „einfach ein calculator icon edged
   quadrat". Sie stehen nebeneinander und muessen darum gleich aussehen. */
/* Marks Wunsch vom 15.09.2026: „calculator und connector button mal nur
   als icon." Ohne Flaeche im Ruhezustand — sie kommt erst beim Hovern.
   Neben dem Zeitraum, der eine Pille traegt, treten sie damit zurueck. */
.pr-ikon {
  width: 30px; height: 30px; border-radius: var(--r-ikon);
  background: none; color: var(--muted); margin-bottom: 6px;
}
/* Entwurf 37: Der Verbindungsknopf steht oben im Kopf, nicht in der
   Reiterzeile — dort sitzt er auf der Mittellinie, nicht auf der
   Grundlinie der Reiter. */
.proj-kopf .pr-ikon { margin-bottom: 0; align-self: center; }
/* Marks Meldung vom 15.09.2026: „wenn man auf den connector button
   hovert soll er aufhellen." Er tat es nicht: `.icon-btn.pr-ikon.an`
   wiegt 0,3,0 und schlug `.pr-ikon:hover` mit 0,2,0 — und weil dort die
   Kurzform `background` steht, setzte sie den Schleier gleich mit
   zurueck. Dieselbe Zahl Klassen auf beiden Seiten loest beides. */
/* Marks Meldung vom 15.09.2026: „der calculator hover effect buggt, erst
   leuchtet die flaeche auf, dann das icon, dann nochmal die flaeche."

   Er sah richtig: `background-image` laesst sich nicht weich ueberblenden
   — das Schleierbild springt sofort, waehrend `color` ueber 0,14 Sekunden
   fadet. Zwei Geschwindigkeiten an einem Knopf lesen sich als Stottern.
   Hier steht darum eine echte Hintergrundfarbe, die denselben Ton ergibt
   wie der Schleier, sich aber mitbewegt. Ueberall sonst bleibt das
   Schleierbild richtig: Dort liegt es ueber Flaechen, die es nicht
   verdunkeln darf. */
.icon-btn.pr-ikon:hover,
.icon-btn.pr-ikon.an:hover,
.icon-btn.pr-ikon.halb:hover {
  color: var(--text);
  background-color: color-mix(in srgb, var(--text) 8%, transparent);
  background-image: none;
}
.pr-ikon { transition: color .14s ease, background-color .14s ease; }
.pr-ikon svg { width: 15px; height: 15px; }
/* Beide verbunden: volle Schrift. Eine fehlt: gedaempft und schief —
   man soll sehen, dass etwas offen ist, ohne es lesen zu muessen. */
/* Marks Ansage vom 15.09.2026: „auch nicht weiss hervorgehoben nur beim
   hovern." Verbunden ist der Normalfall und braucht keine Auszeichnung —
   der Knopf sieht aus wie der Rechner daneben.

   Das Warngelb fuer „eine von zwei Verbindungen fehlt" ist am 17.09.2026
   gegangen — Marks Ansage: „der connector icon leuchtet zu bestimmten
   bedingungen gelb, das mag ich nicht."

   Und er hat recht darin, dass es keine Warnung war: Wer nur Meta
   angehaengt hat und keinen Laden, hat nichts falsch gemacht — das ist
   ein Zustand, kein Fehler. Eine Farbe, die bei jedem zweiten Projekt
   dauerhaft leuchtet, warnt nach einer Woche vor gar nichts mehr. Was
   fehlt, steht weiterhin in der Aufschrift und im Menue dahinter. */
.pr-ikon.an, .icon-btn.pr-ikon.an,
.pr-ikon.halb, .icon-btn.pr-ikon.halb { color: var(--muted); background: none; }

/* Marks Ansage vom 15.09.2026: „das laufzeit button soll so aussehen wie
   vorher" — die aufgehellte Pille aus Entwurf 02. In der Reiterzeile
   sitzt sie auf der Grundlinie, nicht in der Mitte. */
.proj-reiter .proj-datum {
  height: auto; padding: 5px 12px; border-radius: var(--r-knopf);
  background: var(--panel-2); border: 1px solid transparent;
  font-size: 12.5px; color: var(--text); margin-bottom: 6px; flex: none;
}
.proj-reiter .proj-datum:hover {
  background-image: linear-gradient(var(--hover), var(--hover));
}
.proj-datum i { display: inline-flex; align-items: center; }
.proj-datum svg { display: block; }
.proj-reiter .proj-datum .pd-ico svg { width: 15px; height: 15px; }
.proj-datum .pd-chev { margin-left: 2px; color: var(--faint); }
.proj-reiter .proj-datum .pd-chev svg { width: 12px; height: 12px; }

.proj-leistung { padding: 0; overflow: hidden; }
.proj-leistung .ov-empty { padding: 22px 18px; }
/* `.proj-tab` gab es schon — so heisst ein Reiter in der Kopfzeile des
   Projekts. Derselbe Name an zwei Stellen ist derselbe Fehler wie bei
   `.proj-seite`: Die Reiterregeln legten Polster und Farbe auf den
   Tabellenrahmen. Darum `pj-`. */
/* Fuenf Zeilen stehen, der Rest rollt — Marks Ansage vom 14.09.2026:
   „man soll nur 5 sehen der rest ist scrollable." Die Hoehe ist keine
   geratene Zahl, sondern gerechnet: Kopfzeile plus fuenfmal eine Zeile,
   und eine Zeile ist so hoch wie ihr Bild plus ihr Polster. Steht die
   Zahl fest, verrutscht sie beim naechsten Schriftwechsel; so nicht. */
/* Kein Polster am Rahmen: Sonst endet die Tönung der Zahlenspalten
   achtzehn Pixel vor der Kante und dort steht ein Streifen in der
   Kartenfarbe — Marks Meldung vom 14.09.2026: „rechts ist noch am rand
   die andere farbe." Den Abstand traegt jetzt die erste und die letzte
   Zelle, dann faerbt die Zeile bis an die Kante. */
/* Marks Meldung vom 15.09.2026: „ganz unten bei der tabelle ist immer
   noch ein dunkelgrauer strich statt helleres grau, ganz unten am
   boden." Das waren sechs Pixel Polster am Fuss des Rollkastens: Die
   Toenung der Zahlenspalten endet mit der letzten Zelle, darunter schien
   die Karte durch. Die Luft steht jetzt IN der letzten Zeile, also
   innerhalb der Toenung. */
.pj-tab { overflow: auto; overscroll-behavior: contain; padding: 0;
  --zeile: calc(38px + 22px + 1px);
  --kopf: 40px;
  max-height: calc(var(--kopf) + 5 * var(--zeile) + 6px); }
/* Die Kopfzeile bleibt stehen, waehrend die Zeilen darunter laufen —
   sonst weiss man nach der dritten Zeile nicht mehr, welche Spalte
   welche ist. */
/* Die Kopfzeile muss DECKEN, sonst laufen die Zeilen sichtbar durch
   sie hindurch — Marks Meldung vom 14.09.2026: „wenn man bei der
   tabelle scrollt dann gehen die werte in die uebersicht oben."
   `--hover` und die Toenung der Zahlenspalten sind durchsichtig; hier
   werden beide auf der Kartenfarbe ausgemischt, nicht auf nichts. */
/* Marks Meldung vom 16.09.2026: „schau mal in glas theme ist die top
   notch immernoch durchsichtig so das wenn man scrollt nach unten
   ueberlappen sich die metrics mit der top notch."

   `--raise` ist im Glas-Thema kein Ton, sondern ein Schleier:
   rgba(255,255,255,.055) in Dunkel, rgba(18,20,28,.045) in Hell. Zwei
   solche Schleier uebereinander — der der Karte und der der Kopfzeile —
   ergeben rund elf Prozent Deckung; die Zeilen laufen sichtbar
   hindurch. In jedem anderen Thema ist `--raise` eine feste Zahl und
   deckt von allein, deshalb fiel es nur auf Glas auf.

   Dieselbe Rechnung wie bei `.konsole` und `.sb-blockkopf`: der
   Schleier auf einer DECKENDEN Grundfarbe statt auf nichts. Hier sind
   es zwei Schleier — erst der der Karte (`.proj-fenster .card-box`
   steht auf `--raise`), dann der eigene —, damit die Kopfzeile auf Glas
   genau den Ton der Karte traegt und nicht heller wirkt. Ist `--raise`
   deckend, bleibt alles darunter unsichtbar und in den uebrigen
   Themen aendert sich nichts. */
.proj-table thead th { position: sticky; top: 0; z-index: 2;
  background:
    linear-gradient(var(--raise), var(--raise)),
    linear-gradient(var(--raise), var(--raise)),
    var(--bg); }
.proj-table thead th.zahl {
  background:
    linear-gradient(color-mix(in srgb, var(--text) 4%, var(--raise)),
                    color-mix(in srgb, var(--text) 4%, var(--raise))),
    linear-gradient(var(--raise), var(--raise)),
    var(--bg);
}
.proj-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.proj-table th {
  font-weight: 400; font-size: 12px; color: var(--faint); text-align: left;
  padding: 10px 0 10px 18px; white-space: nowrap; border-bottom: 1px solid var(--border);
}
/* Entwurf 21: die Zahlenspalten stehen eine Spur ueber der Karte. Das
   trennt den Namen von den Werten, ohne eine Linie dafuer zu
   brauchen. */
.proj-table th.zahl, .proj-table td.zahl { text-align: right;
  background: color-mix(in srgb, var(--text) 4%, transparent); }
/* Ohne Rundung: Beim Hinfahren war die Zeile links abgeschnitten und
   rechts rund — Marks Meldung vom 14.09.2026. Jetzt laeuft sie auf
   beiden Seiten gerade bis an die Kante. */
.proj-table th:last-child, .proj-table td:last-child { padding-right: 18px; }
.proj-table th.zahl { cursor: pointer; }
.proj-table th.zahl:hover { color: var(--muted); }
.proj-table th.sortiert { color: var(--text); }
.proj-table th i { font-style: normal; margin-left: 4px; }
/* Entwurf 01: eine Linie zwischen den Zeilen, und das Bild mit Luft.
   Marks Ansage vom 14.09.2026: „bei uns fehlt die trennlinie und das
   bild, aber nicht so klein und eng aneinander." */
.proj-table tbody tr:last-child td { padding-bottom: 17px; }
/* Entwurf 16 aus fuenfzig — Marks Wahl vom 15.09.2026: jede zweite Zeile
   getoent, dafuer keine Linien. Ein Streifen fuehrt das Auge ueber zehn
   Spalten hinweg zuverlaessiger als eine Haarlinie, und die Tabelle wird
   ruhiger, weil eine Trennung statt zweier wirkt.

   Die Toene stehen auf der Hausleiter: 4 % fuer die Zeile, 8 % fuer ihre
   Zahlenspalten — das ist genau ein Schritt mehr, wie bei den ungetoenten
   Zeilen auch (0 und 4). */
.proj-table td { padding: 11px 0 11px 18px; font-size: 13px; white-space: nowrap; }
.proj-table th:first-child, .proj-table td:first-child { padding-left: 18px; }
/* Dieselbe Zahl wie der erste Reiter — siehe .proj-reiter. Drei Masse,
   damit die Tabelle sie nicht doch noch zusammendrueckt: Eine Spalte mit
   `width` allein gibt bei enger Tabelle nach. */
.proj-table { table-layout: fixed; }
.proj-table th:first-child, .proj-table td:first-child {
  width: var(--pj-name); min-width: var(--pj-name); max-width: var(--pj-name);
}
/* Mit festem Layout teilen sich die Zahlenspalten den Rest zu gleichen
   Teilen. Damit keine davon unter die Breite ihrer laengsten Zahl faellt,
   bekommt die Tabelle ein Mindestmass — wird das Fenster schmaler, rollt
   der Kasten darum waagerecht, statt die Zahlen abzuschneiden. */
.proj-table { min-width: calc(var(--pj-name) + 9 * 88px); }
.proj-table th.zahl, .proj-table td.zahl { white-space: nowrap; }
/* Derselbe Schleier wie ueberall — ein eigener, leiserer Wert waere ein
   zweites Hover im Haus. Der Waechter im Pruefstand faengt genau das. */
.proj-table tbody tr:nth-child(odd) td {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.proj-table tbody tr:nth-child(odd) td.zahl {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
/* Der Schleier beim Hovern liegt ueber der Zelle, nicht hinter ihr: Die
   Zellen tragen jetzt eigene Flaechen, und eine Farbe an der Zeile waere
   davon verdeckt. */
.proj-table tbody tr:hover td {
  background-image: linear-gradient(var(--hover), var(--hover));
}
/* `vertical-align: middle` nimmt den Platz unter der Grundlinie weg:
   Ein inline-flex sitzt sonst auf ihr, und die Unterlaenge der Schrift
   macht die Zeile fuenf Pixel hoeher als ihr Inhalt — genau die fuenf,
   die dann bei fuenf Zeilen fehlen. */
/* `min-height` haelt die Zeile auf derselben Hoehe, auch wo kein Bild
   steht — Marks Ansage vom 14.09.2026: „adsets und campagne selbe
   groesse bitte wie bei anzeigen." Ohne sie waere eine Gruppenzeile
   dreissig Pixel flacher, und der Wechsel der Ebene liesse die Tabelle
   springen. */
.proj-nz { display: inline-flex; align-items: center; gap: 12px; max-width: 300px;
  vertical-align: middle; min-height: 38px; }
.proj-nz img { width: 38px; height: 38px; border-radius: var(--r-feld); object-fit: cover;
  display: block; flex: none; background: var(--panel); }
.proj-nz > span { overflow: hidden; text-overflow: ellipsis; }

/* Der Rechner im Fenster. */
.proj-rechner { display: flex; gap: 26px; flex-wrap: wrap; margin: 4px 0 18px; }
.proj-rz { display: flex; flex-direction: column; gap: 3px; }
.proj-rz i { font-style: normal; font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); }
.proj-rz b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.proj-rz.gut b { color: var(--gruen, #3fa76a); }
.proj-rz.schlecht b { color: var(--rot, #e5534b); }
.proj-rf { display: flex; gap: 12px; flex-wrap: wrap; }
.proj-rf label { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 150px;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }

/* Entwurf 09: Copys, Bilder, Seiten, Headlines darunter. */
/* Marks Ansage vom 14.09.2026: „die einzelnen copys hier hervorheben
   mit der helleren farbe als karte pro copy." Sie standen bis dahin
   ohne eigene Flaeche untereinander auf dem Kasten — drei Absaetze, die
   man nur an der Ueberschrift auseinanderhielt. Jetzt traegt jede
   dieselbe hellere Stufe wie ein Feld im Formular, also eine ueber dem
   Kasten, der sie haelt. */
.proj-copys { display: flex; flex-direction: column; gap: 10px; }
/* Marks Meldung vom 15.09.2026: „wenn man auf seite hinzufuegen drueckt
   ist das eingabefeld zu nah an den seiten darueber — der abstand soll so
   wie bei copys und headline sein."

   Bei den Copys steht das offene Feld IM Kasten und bekommt dessen
   Abstand von selbst. Bei den Seiten liegt es hinter dem Raster, weil das
   Raster mehrspaltig ist und das Feld ueber die volle Breite geht — dort
   gibt es keinen Abstand zu erben. Also derselbe Wert von Hand. */
.pj-seiten + .proj-copy.pc-neu { margin-top: 10px; }
/* Marks Ansage vom 15.09.2026: „die einzelnen copys sollen umrisse haben
   so wie im launchpad." Dort steht der Rand immer denselben Schritt ueber
   dem Feld — vier Prozent Schrift darauf —, statt fest zu sein; so bleibt
   er auf jedem Grund sichtbar und nie zu laut. */
.proj-copy {
  background: var(--karte-feld); border-radius: var(--r-feld);
  border: 1px solid color-mix(in srgb, var(--text) 4%, var(--karte-feld));
  padding: 12px 14px 13px;
}

/* Entwurf 37 aus fuenfzig — die neue Copy entsteht an ihrem Platz in der
   Liste, nicht in einem Fenster. Der Umriss ist heller, damit man sieht,
   dass hier gerade geschrieben wird. */
.pc-neu { border-color: var(--schleier-3); }
.pc-feld {
  width: 100%; margin-top: 4px; padding: 0; resize: none;
  background: none; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.55;
}
/* Marks Ansage vom 15.09.2026: „tag eintragen oben und darunter die
   copy/headline." Der Name sieht aus wie der Name einer fertigen Copy —
   man soll ihn ueberschreiben koennen, ohne dass es nach Formular
   aussieht. */
.pc-tag {
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 12px; font-weight: 600;
}
.pc-tag::placeholder { color: var(--faint); font-weight: 400; }
.pc-feld::placeholder { color: var(--faint); }
.pc-zeile {
  margin-top: 10px; padding: 11px 14px;
  background: var(--karte-feld); border-radius: var(--r-feld);
  border: 1px solid var(--schleier-3);
}
.pc-zeile .pc-feld { margin-top: 0; }
.proj-copy b { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 3px; }
/* Marks Ansage vom 15.09.2026: „von einer copy soll man 2 volle zeilen
   sehen." Vorher lief der Text so weit, wie er passte, und brach dann
   mitten im Wort ab — bei drei Copys untereinander war die Karte
   unterschiedlich hoch. Jetzt genau zwei Zeilen, der Rest mit Punkten. */
.proj-copy p {
  margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Aufgeklappt faellt die Grenze, und der Text behaelt seine Absaetze. */
.proj-copy:not(.pc-neu) { cursor: pointer; }
.proj-copy:not(.pc-neu):not(.auf):hover {
  background-image: linear-gradient(var(--hover), var(--hover));
}
/* Marks Ansage vom 15.09.2026: „wenn es aufgeklappt ist soll es nicht
   mehr aufhellen beim hovern." Aufgeklappt liest man — da ist das
   Aufhellen nur Unruhe unter dem Text.

   Und einen Zug spaeter: „wenn man eine copy aufklappt soll der stift und
   x verschwinden." Dieselbe Begruendung: Wer liest, will den Text, nicht
   zwei Zeichen, die am Rand stehen und nach einem Griff aussehen. */
.proj-copy.auf { cursor: default; }
.proj-copy.auf .pc-griffe { display: none; }
.proj-copy.auf p { -webkit-line-clamp: none; display: block; white-space: pre-wrap; }

/* Marks Ansage vom 15.09.2026: „bei copys soll rechts ein X zum loeschen
   mit bestaetigen sein und ein bearbeiten stift zentriert ohne umrandung
   oder aufhellung drumherum."

   Also ausdruecklich KEIN .icon-btn: der traegt eine Flaeche, einen
   Radius und einen Schleier beim Zeigen. Hier steht nur das Zeichen, und
   es wird hell statt hinterlegt. „Zentriert" heisst mittig zur Karte,
   nicht oben am Namen — darum liegt der Text in einer eigenen Spalte und
   die Griffe daneben. */
.proj-copy { display: flex; align-items: center; gap: 10px; }
/* Marks Ansage vom 21.09.2026: „mach die copy noch bisschen kuerzer,
   also rechts etwas mehr raum." Der Text lief bis dicht an die Griffe.
   Die Luft steht als Anteil der Karte da, nicht als feste Zahl — sonst
   waere sie auf einem schmalen Fenster der halbe Text. */
.pc-text { flex: 1; min-width: 0; padding-right: 9%; }
.pc-griffe { display: flex; align-items: center; gap: 2px; flex: none; }
.pc-griff {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; padding: 0;
  background: none; border: 0; border-radius: 0;
  color: var(--faint); cursor: pointer;
  transition: color .14s ease;
}
.pc-griff:hover { color: var(--text); background: none; }
.pc-griff svg { width: 15px; height: 15px; display: block; }
/* Die Bearbeitungskarte behaelt den Spaltenbau nicht — dort steht nur
   das Schreibfeld, und das nimmt die ganze Breite. */
.proj-copy.pc-neu { display: block; }

/* Beim Bild gibt es kein Daneben: Das Kreuz liegt oben rechts auf der
   Kachel und kommt erst, wenn der Zeiger darauf steht. */
.pj-bild { position: relative; display: block; flex: none; line-height: 0; }
.pj-bweg {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: var(--r-klein);
  background: color-mix(in srgb, #000 55%, transparent);
  color: color-mix(in srgb, #fff 80%, transparent);
  opacity: 0; transition: opacity .14s ease, color .14s ease;
}
.pj-bild:hover .pj-bweg, .pj-bweg:focus-visible { opacity: 1; }
/* Marks Meldung vom 15.09.2026: „wenn man ueber das X bei bildern hovert
   verschwindet diese box drumherum weil es heller wird, mach das weg, es
   soll da bleiben, kein hover effekt."

   Der Teller wurde nicht heller — er verschwand: `.pc-griff:hover` setzt
   `background: none`, und diese Regel ist spaeter im Stylesheet und
   ebenso spezifisch. Bei gleicher Staerke gewinnt die spaetere, also
   gewann `none`. Jetzt behaelt das Kreuz seinen Teller, wenn man darauf
   zeigt — es kommt ohnehin nur, wenn man auf dem Bild steht, und das ist
   der einzige Hinweis, den es braucht. */
.pj-bweg:hover { color: #fff; background: color-mix(in srgb, #000 55%, transparent); }
.pj-bweg svg { width: 12px; height: 12px; }

/* Die Ueberschrift ist eine Pille — die Griffe stehen darin, rechts vom
   Text, in derselben Zeile. */
.proj-bstreifen { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.proj-bstreifen img { width: 74px; height: 74px; border-radius: var(--r-feld); object-fit: cover; display: block; }
/* Entwurf 033 aus fuenfzig — Marks Wahl vom 18.09.2026: „probier mal
   033." Er hiess „Karte mit Fuss": Bild und Tag in einem Kaestchen.

   Das Bild bleibt bei seinen vierundsiebzig Pixeln; die Karte legt vier
   Pixel Polster darum, also ist sie zweiundachtzig breit. Die Rundung
   rueckt eine Sprosse hinein — aussen die Feldkante, innen die kleine:
   Zwei gleiche Rundungen ineinander sehen aus wie eine verrutschte. */
/* `.proj-seite` gab es schon: So heisst die ganze Projektuebersicht
   (`<div class="page proj-seite">`). Eine Kachel mit demselben Namen
   legte ihren Grund und ihr Polster ueber die ganze Seite — Marks
   Meldung vom 14.09.2026: „die uebersicht ist nun farblich verbuggt."
   Darum `pj-` fuer die Kacheln im Projektfenster. */
/* Marks Wunsch vom 15.09.2026: „bei den links / seiten unten wuensche ich
   mir eine vorschau." Also die Karte, die ein Nachrichtendienst aus einem
   Verweis macht: Bild oben, Name, ein Satz, die Adresse. Was keine
   Vorschau hat, behaelt seinen Platz — sonst springt die Reihe, sobald
   ein Bild nachkommt. */
.pj-seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
/* Marks Meldung vom 15.09.2026: „bei seiten sagte ich, dass eine
   seitenkarte unten beim textbereich dieses hellere grau von uns haben
   soll, nicht nur umriss — wie oben drueber bei copys und headline."

   Gemessen, warum es vorher nicht ankam: Die Karte lag auf `--raise`
   (19), der Textteil auf `--panel` (28) — der Ton stimmte also schon,
   nur stand er auf einer Flaeche, die fast dieselbe war, und der Schritt
   war nicht zu sehen. Die Abschnittskarte darunter ist `--sidebar`, also
   Schwarz; eine Copy-Zeile springt von 0 auf 28 und liest sich deshalb
   als Platte.

   Die Seitenkarte macht jetzt denselben Sprung: dieselbe Flaeche und
   derselbe Umriss wie eine Copy-Zeile — vier Prozent Schrift ueber der
   eigenen Flaeche. */
.pj-seite { position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-flaeche); background: var(--karte-feld);
  /* Kurz stand hier eine Sprosse hoeher, weil der Rand auf einer Karte
     mit Foto schwaecher wirkt als auf einer Zeile. Marks Entscheidung vom
     15.09.2026: „ich will das die seiten/link karte dieselbe fuellung pro
     seite hat die man einfuegt und selbe umrissfarbe" — also exakt die
     Werte einer Copy-Zeile, nicht „ungefaehr wie". Gemessen sind beide
     jetzt Flaeche 28, Rand 37. */
  border: 1px solid color-mix(in srgb, var(--text) 4%, var(--karte-feld));
  overflow: hidden; }
/* Marks Meldung vom 15.09.2026: „die bilder buggen." Das war meine
   Kollision: `.pj-bild` gab es schon — es ist die Kachel im Bildstreifen
   des Projekts, 74 mal 74 und ohne Flaeche. Die neue Regel fuer das
   Vorschaubild einer Seite trug denselben Namen und machte aus jeder
   Kachel einen Balken ueber die volle Breite. Das Vorschaubild heisst
   darum jetzt `pv-`, wie die Vorschau. */
.pv-bild, .pv-leer {
  display: block; width: 100%; height: 108px; flex: none;
  object-fit: cover; background: var(--panel);
}
.pv-leer { display: grid; place-items: center; }
/* Marks Ansage vom 15.09.2026: „bei seiten soll unten beim textbereich
   das feld nicht nur umriss haben sondern gefuellt." Eine Stufe ueber der
   Karte — dieselbe Regel wie ueberall: Karte auf --raise, Feld darauf auf
   --panel. */
/* Der Textteil braucht keine eigene Flaeche mehr — die ganze Karte
   traegt sie schon. Zwei Toene uebereinander waeren ein Feld im Feld. */
.pj-text { display: flex; flex-direction: column; gap: 4px; padding: 11px 14px 13px;
  min-width: 0; }
.pj-seite b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.pj-satz {
  font-size: 11.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Der Grund, warum keine Vorschau da ist, steht an der Stelle der
   Beschreibung — leiser als sie, weil er keine Auskunft ueber die Seite
   ist, sondern ueber uns. */
.pj-satz-leer { color: var(--faint); }
.pj-seite em { font-style: normal; font-size: 11.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-schau { color: var(--faint); display: flex; }
.pj-schau svg { width: 22px; height: 22px; }
/* Marks Ansage vom 15.09.2026: „bei seiten auch ein X." Dasselbe
   Zeichen wie bei den Copys, mittig zur Zeile statt oben in der Ecke. */
.pj-sweg { position: absolute; top: 8px; right: 8px; opacity: 0;
  background: color-mix(in srgb, #000 55%, transparent);
  color: color-mix(in srgb, #fff 80%, transparent);
  width: 22px; height: 22px; border-radius: var(--r-klein);
  transition: opacity .14s ease, color .14s ease; }
.pj-sweg:hover { color: #fff; }
.pj-seite:hover .pj-sweg { opacity: 1; }

/* Das Zielfeld im Launchpad bekommt einen Knopf daneben: Er traegt die
   Seiten des Projekts ein, statt sie abtippen zu lassen. */
/* Das Zeichen sitzt IM Feld, nicht daneben — Marks Ansage vom
   17.09.2026: „das ordner icon in die schaltflaeche machen bei
   zieladresse im launchpad, die schaltflaeche soll wieder normale
   groesse haben."

   Daneben war es ein eigener Kasten mit eigenem Rand, und gemessen
   stimmte er nicht einmal mit dem Feld ueberein: vierunddreissig Pixel
   hoch neben einem Feld von vierzig, also oben und unten drei Pixel
   Luft. Dem Feld nahm er ausserdem zweiundvierzig Pixel Breite.

   Jetzt dieselbe Bauart wie die Einheit im Betragsfeld (`.up-einheit`):
   das Feld ueber die volle Breite, der Knopf darin am rechten Rand. */
.up-zielzeile { position: relative; display: block; }
.up-zielzeile .up-eingabe { width: 100%; min-width: 0; }
/* Das Polster nur dort, wo auch ein Knopf sitzt: Ohne Seiten im Projekt
   gibt `upSeitenKnopf` nichts zurueck, und dann waere rechts im Feld ein
   Loch ohne Grund. */
.up-zielzeile:has(.up-zielwahl) .up-eingabe { padding-right: 40px; }
.up-zielwahl {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; background: none; color: var(--faint);
}
.up-zielwahl:hover { color: var(--text); background: var(--hover); }
.up-zielwahl svg { width: 18px; height: 18px; }
.menu .mi-text em { display: block; font-style: normal; font-size: 11.5px; color: var(--faint); }

/* Entwurf 82 aus hundert — Marks Wahl vom 15.09.2026, „1zu1", und mit
   seiner Ansage dazu: „es soll nicht in der mitte popupen sondern so nach
   links unten das die obere kante aligned mit der button kante oben ist
   ohne verdunklung auch."

   Darum sitzt der Rechner in der Menueschicht: die hat einen
   durchsichtigen Vorhang statt einer Verdunklung. Was hier steht, nimmt
   dem Menue nur seine Menue-Masse — Breite, Polster, Rundung — und gibt
   ihm die des Fensters zurueck. */
.menu.cr-fenster {
  width: 400px; max-width: calc(100vw - 24px);
  padding: 22px; border-radius: var(--r-gross);
  max-height: none; overflow: visible;
}
/* Marks Ansage vom 15.09.2026: „das cpa popup soll man verschieben
   koennen, aber nicht groesser machen koennen." Die Kopfzeile ist der
   Griff — sie traegt sonst nichts, was man anklicken wollte. */
.cr-fenster .cr-titel {
  margin: 0 0 12px; font-size: 17px; font-weight: 600;
  letter-spacing: -.02em; padding-right: 30px;
  cursor: grab; user-select: none; touch-action: none;
}
.cr-fenster.cr-zieht .cr-titel { cursor: grabbing; }
/* Die Groesse bleibt: keine Griffe, kein Ziehen an den Ecken. */
.menu.cr-fenster { resize: none; }
/* `.menu button` macht jeden Knopf im Menue 100 % breit — das Kreuz ist
   keiner von der Sorte. */
.menu.cr-fenster .cr-x {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; padding: 0; gap: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-ikon);
  color: var(--faint); cursor: pointer;
}
.menu.cr-fenster .cr-x:hover { color: var(--text); background: var(--hover); }
.cr-fenster .cr-x svg { width: 15px; height: 15px; }
.cr-lab, .cr-fenster .cr-rk {
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.cr-gr {
  font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cr-sub { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.cr-sub b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-sp {
  display: flex; align-items: center; gap: 8px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--schleier-2);
}
.cr-e { font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Die Zahl links war kurz gedaempft, weil sie zur blassen Marke gehoert.
   Marks Ansage vom 15.09.2026: „der optimal cpa wert soll weiss sein." Es
   ist die Zahl, die man einstellt — sie steht nicht im zweiten Rang. */
.cr-e-ziel { color: var(--text); }
.cr-bahn {
  flex: 1; height: 5px; border-radius: var(--r-teil); position: relative;
  background: linear-gradient(90deg, var(--gruen, #3fa76a), var(--rot, #c4574d));
}
.cr-bahn { position: relative; }
/* Zwei Marken auf einer festen Bahn: der CPA jetzt kraeftig, das Ziel als
   blasser Strich. Die Bahn laeuft von 0 bis zum Break-even — siehe
   projCpaLeibHtml.

   Die Marke ist breiter als ihr Strich: Ein Balken von zwei Punkten
   Breite laesst sich nicht treffen, und ohne Treffer gibt es kein
   Faehnchen. */
.cr-marke {
  position: absolute; top: -9px; width: 18px; margin-left: -9px; height: 23px;
  display: grid; place-items: center; cursor: default;
}
.cr-strich { display: block; width: 2px; border-radius: var(--r-klein); }
.cr-jetzt .cr-strich {
  height: 13px; background: var(--text); box-shadow: 0 0 0 1.5px var(--raise);
}
.cr-ziel .cr-strich {
  height: 11px; background: color-mix(in srgb, var(--text) 45%, transparent);
}
/* Marks Ansage vom 15.09.2026: ein Faehnchen am Strich, in unserer Form —
   nicht der Kasten des Systems. */
.cr-tip {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: none; z-index: 3; white-space: nowrap; text-align: center;
  background: linear-gradient(var(--panel-2), var(--panel-2)), var(--bg);
  border: 1px solid var(--schleier-3);
  border-radius: var(--r-feld); padding: 6px 9px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.cr-marke:hover .cr-tip { display: block; }
.cr-tip em {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.cr-tip b {
  display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.cr-fu {
  font-size: 10px; color: var(--faint); margin-top: 7px;
  display: flex; justify-content: space-between; gap: 10px;
}
/* Die Marge: Wert ueber dem Regler, damit die Zahl nicht mitwandert. */
.cr-reg { margin-top: 13px; }
/* Der Wert steht unter dem Regler, nicht darueber — Marks Ansage vom
   15.09.2026. Er gehoert an das Bedienteil, das ihn setzt. */
.cr-fenster .cr-rk {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted);
}
.cr-rk b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-reg input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 3px; border-radius: var(--r-klein);
  background: var(--schleier-3); outline: 0; margin: 0;
}
.cr-reg input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px;
  border-radius: var(--r-teil); background: var(--text); cursor: pointer;
}
/* Marks Frage vom 15.09.2026: „wo traegt man dann die werte ein?" Hier —
   und nur hier; aus diesen beiden Zahlen entsteht alles darueber. */
/* Marks Ansage vom 15.09.2026: „mach einfach Verkauf und Einkauf ueber
   die eingabe felder statt links davon dann passts." Das Wort daneben
   nahm dem Feld die Haelfte seiner Haelfte — darueber nimmt es keine. */
.cr-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.cr-felder label { min-width: 0; display: block; }
.cr-felder label > span {
  display: block; margin-bottom: 5px;
  font-size: 11.5px; color: var(--muted);
}
/* Marks Ansage vom 15.09.2026: „hier bei den feldern im cpa popup so wie
   im launchpad um die felder drumherum umriss."

   Dieselbe Regel wie drueben (--lp-rand): Der Rand eines Feldes sind vier
   Prozent Schrift ueber der eigenen Flaeche des Feldes. Der feste
   `--border` liegt bei 29 und das Feld bei 28 — einen Punkt auseinander,
   also unsichtbar. Vier Prozent auf 28 ergeben 37, und das sieht man. */
.cr-ef {
  display: block; width: 100%; min-width: 0; height: 32px; padding: 0 10px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--text) 4%, var(--panel));
  border-radius: var(--r-feld);
  color: var(--text); font: inherit; font-size: 12px; outline: 0;
  font-variant-numeric: tabular-nums;
}
/* Die Skala steht immer da — Marks Ansage vom 15.09.2026: „die soll auch
   ohne eintragung angezeigt werden." Ohne Spanne aber blass, damit sie
   keine Schwellen behauptet, die noch niemand eingetragen hat. */
.cr-blass { background: var(--schleier-2) !important; }

/* Marks Ansage vom 15.09.2026: „bei den headlines im projekt fehlen die
   tags darueber, und sie sollen untereinander sein nicht nebeneinander."
   Damit sind die Pillen gefallen; Ueberschriften tragen jetzt dieselbe
   Karte wie die Copys. Ihr Schreibfeld ist einzeilig — eine Ueberschrift
   hat keine Absaetze. */
.pc-neu > input.pc-feld { height: auto; }

/* ============ Ordner & Feedback-Loop — Marks Entwurf 061 =============
   Sein Auftrag vom 21.09.2026: „ich will einfach das es nicht nur ein
   aufbewahrungsplatz ist sondern eine Verbesserungs und Journal
   zentrale, ein Feedback Loop quasi."

   Links die Liste als KARTEN — Marke, Name, Kennzahl, Griffe und zwei
   Zeilen Text. Rechts das offene Stueck mit Versionen und Journal.

   Beim ersten Bau stand hier eine Ordnerleiste und links einzeilige
   Textzeilen; Marks Meldung: „du hast 11 oder so genommen, ich will 061
   1zu1." Die Leiste ist Entwurf 011 und hier fort. */
.ol-zwei { display: flex; gap: 14px; align-items: flex-start; }
/* Marks Ansage vom 23.09.2026: „mach hier den scrollbalken im projekt
   weg bei den vorschaus links."

   Nur der Balken, nicht das Rollen: Die Liste rollt weiter, sie zeigt es
   bloss nicht mehr an. Sie steht neben einer Spalte, die ihre eigene
   Hoehe hat, und ein zehn Pixel breiter Streifen dazwischen trennte
   optisch mehr als die Luecke selbst.

   Beide Schreibweisen, weil beide Kaesten es anders sagen: `scrollbar-
   width` ist die Norm, `::-webkit-scrollbar` das, was Chrome hoert. */
.ol-liste {
  flex: none; width: 300px; display: flex; flex-direction: column; gap: 8px;
  /* Die Liste waechst nicht ins Endlose — sie rollt, und das Stueck
     rechts bleibt dabei stehen. */
  max-height: 460px; overflow: auto;
}
.ol-liste { scrollbar-width: none; }
.ol-liste::-webkit-scrollbar { width: 0; height: 0; }
.ol-karte {
  background: var(--karte-feld); border: 1px solid transparent;
  border-radius: var(--r-flaeche); padding: 10px 12px; cursor: pointer;
}
.ol-karte:hover { background: var(--hover); }
/* Marks Ansage vom 23.09.2026: „die ausgewaehlte copy soll links in der
   vorschau aufhellen auf unser bekanntes hellgrau." Sie stand auf
   --panel, eine Stufe unter dem hellsten Wert der Leiter. */
.ol-karte.an { background: var(--panel-2); }
.ol-kkopf { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ol-karte b { font-size: 12.5px; font-weight: 600; flex: none; }
.ol-kpi { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die drei Zeichen stehen seit dem 23.09.2026 rechts in der grossen
   Ansicht statt in der schmalen Karte. Dort mussten sie sich verstecken,
   weil kein Platz war — hier ist welcher, und sie stehen einfach da. */
.ol-griffe { flex: none; display: flex; gap: 1px; }
.ol-karte p {
  margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ol-detail {
  flex: 1; min-width: 0; background: var(--karte-feld);
  border-radius: var(--r-flaeche); padding: 14px 16px;
}
.ol-dkopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ol-dkopf b { font-size: 13px; font-weight: 600; flex: none; }
.ol-dkopf .ol-kpi { flex: 1; }
.ol-dtext {
  margin: 0; font-size: 12px; color: var(--muted); line-height: 1.55;
  white-space: pre-wrap; max-height: 170px; overflow: auto;
}
.ol-dtitel {
  margin: 16px 0 7px; font-size: 10.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}
/* Seit die Versionszeilen Polster tragen (siehe `.ol-v` weiter unten),
   bringen sie ihren eigenen Abstand mit — der Zwischenraum faellt
   darum kleiner aus als beim Journal daneben. */
.ol-vers { display: flex; flex-direction: column; gap: 0; }
.ol-journal { display: flex; flex-direction: column; gap: 5px; }
.ol-v, .ol-j { display: flex; align-items: baseline; gap: 9px; font-size: 11.5px; }
.ol-vn { flex: none; min-width: 22px; color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.ol-vw, .ol-jt { flex: 1; min-width: 0; color: var(--muted); }
.ol-vd, .ol-jd { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; }
.ol-jd { min-width: 62px; }
/* Ein leeres Fach sagt, dass es leer ist — und bleibt stehen. Ein Feld,
   das erst erscheint, wenn man es gefuellt hat, kann niemand fuellen. */
.ol-leise { font-size: 11.5px; color: var(--faint); }
.ol-dfuss { display: flex; gap: 6px; margin-top: 16px; }
.ol-neu {
  background: var(--panel); border: 0; color: var(--text); font: inherit;
  font-size: 11.5px; padding: 6px 12px; border-radius: var(--r-knopf); cursor: pointer;
}
.ol-neu:hover { background: var(--hover); }
.ol-neu.leise { background: none; color: var(--faint); }
.ol-neu.leise:hover { background: var(--hover); color: var(--text); }
/* Das Feld an Ort und Stelle — kein Fenster fuer drei getippte Woerter. */
.ol-feld {
  background: var(--feld-grund); border: 1px solid var(--border);
  border-radius: var(--r-knopf); color: var(--text); font: inherit; font-size: 11.5px;
  padding: 5px 11px; min-width: 150px;
}
.ol-feld.breit { display: block; width: 100%; border-radius: var(--r-feld); margin-top: 16px; }

/* Der Umschalter zwischen den beiden Sichten — dieselbe Form wie der
   Segmentschalter ueber der Tabelle. */
.pi-sicht { display: inline-flex; background: var(--raise); border-radius: var(--r-knopf); padding: 2px; }
.pi-sicht button {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 11.5px;
  padding: 4px 12px; border-radius: var(--r-knopf); cursor: pointer;
}
.pi-sicht button:hover { color: var(--text); }
.pi-sicht button.an { background: var(--panel); color: var(--text); }

/* Der Tag fuers naechste Ziel — Marks Ansage vom 22.09.2026: „tag rechts
   neben absendeknopf eingeben/auswaehlen." Er steht ausserhalb des
   Eingabekastens, rechts vom Pfeil: Er gehoert zum Absenden, nicht zum
   Text, und im Kasten haette er mit dem Schreibfeld um den Platz
   gerungen. In Ruhe nur ein Zeichen; sobald einer gesetzt ist, sein
   Wort. */
/* Marks Ansage vom 22.09.2026: „tag soll im eingabefeld sein bei ziele
   bitte, neben dem absende knopf." Er stand als eigener Knopf NEBEN dem
   Kasten und sah aus wie eine zweite Sache. Jetzt steht er darin, links
   vom Pfeil — dieselbe Stelle, an der auf der Aufgabenseite die Stufe
   und das Datum sitzen. Darum auch deren Masse: 34 Pixel hoch, die
   Flaeche des Kastens eine Stufe heller als sein Grund. */
.zn-tag {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  background: var(--raise); border: 1px solid var(--border); color: var(--faint);
  font: inherit; font-size: 12px; height: 34px; padding: 0 12px;
  border-radius: var(--r-teil); cursor: pointer; white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.zn-tag:hover { background: var(--hover); color: var(--text); }
.zn-tag.an { color: var(--text); }
.zn-tag svg { width: 15px; height: 15px; display: block; }
.zn-tagfeld {
  flex: none; width: 130px; background: var(--feld-grund);
  border: 1px solid var(--border); border-radius: var(--r-teil);
  color: var(--text); font: inherit; font-size: 12px; height: 34px;
  padding: 0 12px; outline: 0;
}
.zn-tagfeld::placeholder { color: var(--faint); }

/* Die beiden Felder, die nur der eigene Wert hat — und der Zeitraum, den
   er NICHT hat. Welche zu sehen sind, entscheidet die Klasse am Fenster:
   ein Fenster, das je nach Wahl andere Felder zeigt, ist ehrlicher als
   eines, in dem die Haelfte nichts tut. */
.zt-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zt-nureigen { display: none; }
.modal.zt-eigen .zt-nureigen { display: grid; }
.modal.zt-eigen .zt-nurzeit,
.modal.zt-hand .zt-nurzeit { display: none; }

/* ============ Deep Work — Marks Entwurf 004 ==========================
   Seine Ansage vom 22.09.2026: „die uhr soll zentriert sein oben und
   unten werte, es soll minimalistisch sein", dann „es soll gross sein,
   ein timer knopf und vll bissl noch was dazu" — und aus fuenfzig
   Entwuerfen: „004, aber mit playbutton statt text".

   004 ist: das Wort oben, die Zahl sehr gross, EIN Knopf, darunter drei
   Zahlen hinter einer Linie. Sonst nichts. */
.dw-mitte {
  display: flex; flex-direction: column; align-items: center;
  padding: 52px 0 10px;
}
/* Steht nichts darunter, steht die Uhr in der Mitte der SEITE, nicht nur
   in ihrer eigenen — Marks Ansage vom 22.09.2026: „zentrier einfach den
   dw timer."

   Das macht die Seite, nicht der Bereich: Sie nimmt die Hoehe des
   Fensters, die Mitte dehnt sich darin, und der Fuss sitzt unten. Ein
   fester Abzug in Pixeln waere geraten gewesen — bei anderer
   Kopfzeilenhoehe haette die Zahl schief gesessen. */
.page.dw-seite.voll {
  min-height: calc(100vh - 72px);
  display: flex; flex-direction: column;
}
.page.dw-seite.voll .dw-mitte { flex: 1; justify-content: center; padding: 0; }
/* Der Weg zu Intervallen und Verlauf — Marks Wahl: am Fuss der Seite,
   mittig und leise. Oben war er ein langes graues Wort neben einem
   weissen Knopf und konkurrierte, ohne wichtig zu sein. */
.dw-fuss { display: flex; justify-content: center; padding: 14px 0 4px; }
.dw-zeit {
  font-size: 96px; font-weight: 600; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.dw-aufgabe { font-size: 12.5px; color: var(--muted); margin-top: 12px; }

/* Der eine Knopf. Die beiden daneben sind keine Knoepfe im selben Sinn:
   Sie sagen nichts ueber die Arbeit, sie sind Wege — und Wege duerfen
   warten, bis man sie sucht. */
.dw-knoepfe { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.dw-los {
  width: 66px; height: 66px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease;
}
.dw-los:hover { transform: scale(1.04); }
.dw-los svg { display: block; }
/* „Beenden und buchen" steht UNTER dem Knopf, nicht daneben — Marks
   Ansage vom 22.09.2026: „mach die buttons links und rechts vom
   playbutton weg." Zuruecksetzen und Ueberspringen sind mit ihr
   gegangen; dieser eine nicht, denn er ist beim offenen Lauf der
   einzige Weg, die Zeit zu speichern. Unter einer Minute steht er gar
   nicht erst da: Da gibt es nichts zu buchen. */
.dw-buchen {
  margin-top: 18px; background: none; border: 0; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer; padding: 7px 14px;
  border-radius: var(--r-knopf);
}
.dw-buchen:hover { background: var(--hover); color: var(--text); }

/* Der Weg zu allem anderen — ein Wort, kein Knopf. Er steht seit dem
   22.09.2026 oben bei den Reitern: Unter der Uhr stand er im Weg, als
   sie in die Mitte rueckte. */
.dw-mehr {
  background: none; border: 0; color: var(--faint);
  font: inherit; font-size: 12px; cursor: pointer; padding: 8px 12px;
  border-radius: var(--r-knopf);
}
.dw-mehr:hover { background: var(--hover); color: var(--text); }
/* Der Knopf traegt Wort und Zeichen als Reihe — dann sitzt das Zeichen
   auf der Mitte des Wortes, und der Abstand dazwischen steht EINMAL im
   `gap` statt als Leerzeichen im Text. Zwoelf Pixel ist die kleinste
   Stufe der Hausleiter; dasselbe Mass tragen die Pfeile in der
   Seitenleiste und im Messwertmenue. */
.dw-mehr { display: inline-flex; align-items: center; gap: 5px; }
.dw-pfeil { display: inline-flex; transition: transform .16s ease; }
.dw-pfeil svg { width: 12px; height: 12px; }
.dw-pfeil.auf { transform: rotate(180deg); }
.dw-unten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.dw-unten .ov[style*="100%"] { grid-column: 1 / -1; }

/* Marks Ansage vom 22.09.2026: „und hier fuer diese karten/boxen bitte
   farben nutzen, dunkles und helles grau, du weisst welches."

   Gemessen, warum man nichts sah: `.card-box` traegt `--sidebar`, und
   das ist reines Schwarz — auf schwarzem Grund also gar nichts. Die
   Felder darin standen auf `transparent`.

   Jetzt dieselbe Staffelung wie bei den Projektkarten: die Karte im
   dunklen Grau (`--raise`), was darin liegt, eine Stufe heller
   (`--panel`). Der Rand steigt mit, sonst verschwindet er auf der
   helleren Flaeche — derselbe Fall wie bei den Zielkarten heute. */
/* Marks Meldung vom 22.09.2026: „hier die oberen 2 karten sind nicht
   gleich gross oben."

   Gemessen: 225,5 gegen 209,5 Pixel. Meine erste Erklaerung war falsch —
   ich hielt es fuer das Gitter und schrieb `align-items: stretch` hin.
   Das aenderte nichts: In seinem Fenster nachgemessen, blieben es
   225,5 und 209,5. Auch `align-self: stretch` an den Karten tat nichts.

   Der Beweis kam, als ich die Zeilenhoehe auf 260 zwang: Daraus wurden
   260 und 244 — die Differenz blieb konstant SECHZEHN. Beide Karten
   strecken also sehr wohl; die rechte hat nur sechzehn Pixel weniger
   Box. Und die kommen aus `margin-bottom`.

   Der Urheber ist `.card-box + .card-box { margin-bottom: 16px }` — eine
   Regel fuer Karten, die UNTEREINANDER stehen. Im Gitter stehen sie
   nebeneinander, und dort trifft sie jede zweite Karte und macht sie
   kuerzer. Hier wird sie darum aufgehoben; die Luecke zwischen den
   Karten macht ohnehin `gap`. */
.dw-unten > .card-box + .card-box { margin-bottom: 0; }
.dw-unten .card-box { background: var(--raise); }
.dw-unten .int {
  background: var(--panel); border-color: var(--panel-2);
}
/* Die Zeilen des Verlaufs liegen auf der Karte, nicht darunter: Ohne
   eigene Flaeche schwimmen sie im Dunkeln. */
.dw-unten .log-item { border-radius: var(--r-feld); padding: 9px 11px; }
.dw-unten .log-item:nth-child(odd) { background: var(--panel); }
/* Marks Ansage vom 22.09.2026: „mach die pills weg beim verlauf bitte."
   „Fokus" und „Pause" standen als gefuellte Pillen in jeder Zeile — auf
   einer Flaeche, die selbst schon eine Zeile ist, war das eine Flaeche
   zuviel. Das Wort bleibt und sagt dasselbe, nur leiser; die Breite
   haelt die Spalte, damit „Fokus" und „Pause" untereinander stehen. */
.log-art { color: var(--faint); font-size: 12.5px; min-width: 44px; flex: none; }

/* Die Wochentafel im Deep Work — Marks Ansage vom 22.09.2026: „mach die
   nach unten, die schweben so oben, die saeulen."

   Sie schwebten, weil `.chart` 120 Pixel hoch ist und oben in einer
   Karte von 225 sass. Hier dehnt sich die Tafel ueber das, was die Karte
   uebrig laesst; die Saeulen rechnen in Prozent und stehen damit immer
   auf dem Kartenboden. */
.dw-woche { display: flex; flex-direction: column; }
.dw-woche .chart { flex: 1; height: auto; min-height: 90px; align-items: stretch; }
.dw-woche .bar-col {
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: 1; width: auto; gap: 0; position: relative;
}
.dw-woche .bar { width: 100%; max-width: 26px; margin: 0 auto; }
/* Was eine Saeule wert ist, stand nirgends. Der Wert steht jetzt in
   DEMSELBEN Ableser wie bei den Projektkurven — `.proj-lesen` bringt
   Kasten, Rahmen, Schatten und die beiden Zeilen mit; hier steht nur,
   WO er haengt und wann er zu sehen ist.

   Marks Meldung vom 22.09.2026: „soll aussehen wie bei projekten wenn
   man drueber hovert, nicht wie hier einfach nur haesslich den text." */
.dw-woche .bar-wert {
  left: 50%; opacity: 0; transition: opacity .12s ease;
  text-align: center;
}
.dw-woche .bar-col:hover .bar-wert { opacity: 1; }
/* An den Raendern kippt der Kasten nach innen, sonst stuende er halb
   ausserhalb der Karte — dieselbe Regel, die das Tagblatt frueher
   hatte. */
.dw-woche .bar-col:first-child .bar-wert { left: 0; transform: none; }
.dw-woche .bar-col:last-child .bar-wert { left: auto; right: 0; transform: none; }
/* Auf dem Telefon gibt es kein Hinfahren; dort stuenden sieben Kaesten
   uebereinander. Also bleibt es dort beim Wert allein. */
@media (hover: none) {
  .dw-woche .bar-wert {
    opacity: 1; position: static; transform: none; background: none;
    border: 0; box-shadow: none; padding: 0 0 5px;
  }
  .dw-woche .bar-wert i { display: none; }
  .dw-woche .bar-wert b { font-size: 10.5px; color: var(--faint); }
}
.dw-woche .lbl { margin-top: 7px; }

/* Marks Ansage vom 23.09.2026: „projekt genauso gross die schaltflaeche
   bzw hoch wie den weissen button."

   Die Pille war 34 Pixel hoch, der Knopf daneben 38 — das ergab eine
   Zeile mit zwei Oberkanten. Die vier Pixel Unterschied waren eine
   eigene Ansage („der veroeffentlichen button ist etwas klein", 17.09.),
   und die bleibt gueltig: Der Knopf ist nicht kleiner geworden, die
   Pille ist mitgewachsen.

   Nur hier: Dieselbe Regel traegt im Brandtracker einen zweiten Knopf,
   und der steht neben anderen Nachbarn. Drei Waechter halten die
   gemeinsamen vierunddreissig fest — sie bleiben gruen. */
.lp-kopf .ctag[data-act="upprojekt"] { height: 38px; }

/* ============ Der Ausschnitt eines Zielbildes ========================
   Marks Ansage vom 23.09.2026: „man soll es so zurecht schieben/zoomen
   koennen damit man die exakte gewuenschte stelle in der ziel karte
   angezeigt bekommt, da manche bilder ja anderes ratio haben als 1zu1,
   statt dann einen automatischen crop."

   Die Buehne ist QUADRATISCH wie der Rahmen auf der Karte — was hier
   steht, steht dort. Eine Vorschau mit anderem Verhaeltnis waere eine
   Vorschau auf etwas anderes. */
.za-buehne {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-flaeche);
  overflow: hidden; background: var(--raise); margin-bottom: 14px;
  cursor: grab; touch-action: none; user-select: none;
}
.za-buehne:active { cursor: grabbing; }
.za-bild {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;   /* das Ziehen gehoert der Buehne, nicht dem Bild */
}
.za-zoom { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.za-zoom span { font-size: 13px; color: var(--muted); flex: none; }
.za-zoom input[type="range"] { flex: 1; accent-color: var(--text); }

/* ============ Ohne Umrisse ============ */
/* Marks Ansage vom 23.09.2026: „entfern mal ueberall den umriss bitte von
   karten und eingabefeldern, aber behalte die vorherige version,
   vielleicht gefaellt es mir nicht."

   Beides zugleich geht nur als Schalter — darum steht das hier und nicht
   in 288 einzeln geaenderten Regeln. Gemessen am 23.09.2026: 244 Regeln
   holen ihren Rand aus `--border`, 44 aus `--border-soft`, genau eine
   aus einer festen Farbe. Zwei Variablen tragen also fast das ganze
   Haus; sie auf durchsichtig zu stellen nimmt alle Umrisse fort, ohne
   dass eine Breite, ein Abstand oder eine Ecke sich verschiebt — die
   Raender bleiben stehen, man sieht sie nur nicht mehr.

   Die drei Selektoren sind kein Zierrat: `.modal` und das Glas-Thema
   setzen `--border` an SICH neu, und eine geerbte Farbe erreicht sie
   nicht. Ohne die beiden Zeilen behielten Fenster und Glasflaechen ihre
   Umrisse, waehrend der Rest sie verliert.

   `--trennung` bleibt aussen vor — siehe dort. */
html[data-umriss="aus"],
html[data-umriss="aus"][data-bg],
html[data-umriss="aus"] .modal {
  --border: transparent;
  --border-soft: transparent;
}

/* ============ Anteilsspur im Ableser (Entwurf 12) ============ */
/* Marks Wahl vom 23.09.2026 aus zwanzig Anordnungen: „nimm 12 aber
   profit soll gruen sein."

   Eine Zeile, die zeigt, wohin der Umsatz geht — zuerst, was bleibt,
   dann die Abfluesse. Die Breiten kommen als `flex` aus den Zahlen
   selbst, nicht aus gerechneten Prozenten: Dann stimmt die Summe immer,
   auch wenn ein Posten fehlt, und es gibt keine Rundung, die eine
   Luecke am Ende laesst. */
.proj-lesen .pl-spur {
  display: flex; gap: 2px; height: 4px; margin: 7px 0 6px;
  border-radius: var(--r-teil); overflow: hidden; text-decoration: none;
}
.proj-lesen .pl-spur s { display: block; height: 100%; text-decoration: none; min-width: 2px; }
.proj-lesen .pl-spur s.g  { background: var(--gruen, #3fa76a); }
/* Marks Ansage vom 23.09.2026: „adspend soll rot sein bei diesem
   balken." Dieselbe Farbe wie im Tagesbalken darunter — dort ist der
   Adspend seit Marks Wahl vom 14.09.2026 rot („nimm 14 aber adspend
   rot"). Zwei Farben fuer dieselbe Zahl in einem Bild waeren zwei
   Sachen; die anderen Posten bleiben grau, weil sie im Balken auch
   keine eigene Farbe haben. */
.proj-lesen .pl-spur s.k1 { background: var(--rot, #c8484d); }
.proj-lesen .pl-spur s.k2 { background: var(--faint); opacity: .6; }
.proj-lesen .pl-spur s.k3 { background: var(--faint); opacity: .38; }
.proj-lesen .pl-spur s.k4 { background: var(--faint); opacity: .24; }
.proj-lesen .pl-spur[hidden] { display: none; }
/* Marks Ansage vom 23.09.2026: „gewinn/verlust soll unten in weiss
   stehen." Er stand einen Auftrag lang gruen — „nimm 12 aber profit
   soll gruen sein" galt der SPUR, nicht der Zeile darunter. Die Farbe
   trägt jetzt der Balken allein; die Zahl steht in der Schriftfarbe wie
   jede andere Zahl im Haus.

   Die Klasse `minus` ist damit fort, nicht nur ihre Farbe: Eine Klasse,
   die nichts mehr bewirkt, sieht beim naechsten Lesen aus wie eine
   Zusage. Ob ein Tag im Minus steht, sagt das Vorzeichen. */
.proj-lesen em { color: var(--text); }

/* ---- Alte Fassungen aufklappen ---- */
/* Marks Wahl vom 23.09.2026 aus vier Vorschlaegen: „Aufklappen in der
   Liste." Die Zeile war bisher nur eine Auskunft; jetzt ist sie ein
   Weg, und sie sagt das auch — Zeiger, Schleier beim Hinfahren, Winkel
   rechts, der sich dreht. */
/* Marks Meldung vom 23.09.2026: „der hover effekt bei versionen gefaellt
   mir nicht."

   Zweierlei war daran. Der `title` des Browsers poppte mitten in die
   Zeile und verdeckte den Text — der ist fort, siehe app.js. Und der
   Schleier klebte ohne Luft am Text: Die Zeile hatte kein Polster, also
   lag die Flaeche genau auf den Buchstaben und sah aus wie ein Balken,
   der durch sie hindurchlaeuft.

   Jetzt traegt die Zeile Polster und holt es sich mit negativen Raendern
   zurueck — dann liegt der Schleier UM den Text statt AUF ihm, und die
   Liste steht trotzdem so eng wie vorher. */
.ol-v {
  cursor: pointer; border-radius: var(--r-feld);
  padding: 4px 8px; margin: 0 -8px;
}
.ol-v:hover { background: var(--hover); }
.ol-vp { flex: none; display: inline-flex; color: var(--faint); transition: transform .16s ease; }
.ol-vp svg { width: 12px; height: 12px; display: block; }
.ol-v.auf .ol-vp { transform: rotate(180deg); }
/* Der Text steht eingerueckt unter seiner Zeile — so weit, dass er
   unter der Aufschrift beginnt und nicht unter der Nummer: Dann liest
   man die Nummern als Spalte und den Text als das, was zu ihr gehoert. */
.ol-vtext {
  margin: 2px 0 6px 30px; font-size: 11.5px; color: var(--muted);
  line-height: 1.55; white-space: pre-wrap;
  max-height: 150px; overflow: auto;
  border-left: 1px solid var(--border); padding-left: 9px;
}

/* ---- Im Launchpad bleiben nur die Trennlinien ---- */
/* Marks Bild vom 23.09.2026: „im launchpad, da sind nach wie vor
   umrisse bei den karten in der mitte und den schaltflächen."

   Damit ist geklärt, was seine erste Ansage meinte: „die ALLGEMEINEN
   umrisse, weil da ist es ja schwarz, die brauchen wir für die
   trennung" — das sind die vier Linien, die den Baum links und die
   Vorschau rechts vom Mittelteil abtrennen, und sonst nichts. Die
   Karten in der Mitte und alles darin folgen dem Haus.

   Ich hatte dem Launchpad zwischendurch ALLE Umrisse zurückgegeben und
   damit genau das behalten, was fort sollte. Die Trennlinien tragen
   `--trennung` und brauchen hier darum gar keine Regel.

   Was bleibt, sind die Launchpad-EIGENEN Randfarben: `--lp-rand` an
   Eingabefeldern und Wahlknöpfen, `--lp-wahl-rand` an den Werken. Sie
   laufen nicht über `--border` und wären sonst als Einzige stehen
   geblieben — genau die Kanten auf Marks Bild.

   `--strichel` bleibt: Ein gestrichelter Platzhalter sagt „hier fehlt
   etwas" und ist eine Einladung, kein Umriss. */
html[data-umriss="aus"] .lp-seite,
html[data-umriss="aus"] .lp-form {
  /* Marks Bild vom 23.09.2026: „jetzt sind die umrisse hier wieder da,
     du musst die voneinander trennen — ich meine wirklich nur die
     umrisse in der mitte bei den meta karten, wo die eingabefelder drin
     sind."

     Ich hatte seinen Satz davor falsch herum gelesen: „die in der mitte
     bei den karten weg" heißt, die KARTEN sollen keine Kante haben —
     nicht die Felder darin. Drei Sorten Rand sind es also, nicht zwei:

       die großen Rahmen — Baum, Vorschau, Kopfzeile, Vorschaufenster:
         bleiben, denn ohne sie schwimmt das Schwarz ineinander;
       die Meta-Karten in der Mitte — Anzeigenname, Identität, Ziel:
         gehen, das ist Marks eigentlicher Auftrag;
       die Felder darin — Eingaben, Wahlknöpfe, Klappfelder:
         gehen ebenfalls, sie tragen ohnehin eine eigene Fläche.

     Die Rahmen holen ihre Kante aus `--border`, die Felder aus
     `--lp-rand` und `--lp-wahl-rand`. Die Karten hängen leider AUCH an
     `--border` und brauchen darum eine eigene Zeile darunter. */
  --border: var(--trennung);
  --lp-rand: transparent;
  --lp-wahl-rand: transparent;
}
/* Und die Karten in der Mitte, die als Einzige an `--border` hängen und
   trotzdem fort sollen. Sie tragen `--karte` als Fläche und heben sich
   auch ohne Kante vom Grund ab — das zeigt Marks Bild. */
html[data-umriss="aus"] .lp-form .card-box { border-color: transparent; }

/* ---- Ränder, die nicht aus --border kommen ---- */
/* Marks Meldung vom 23.09.2026: „da sind viele noch da, prüf das
   überall."

   Berechtigt: Der Schalter griff an `--border` und `--border-soft`, und
   damit an 288 von 302 Regeln. Die übrigen vierzehn holen ihre Farbe
   woanders her — aus einem Schleier, aus `--panel-2`, aus einer
   Mischung mit der Schriftfarbe. Sie standen weiter da, mitten unter
   Karten, die keine Kante mehr hatten.

   Aufgezählt statt pauschal: Von den 87 Regeln mit eigener Randfarbe
   sind die meisten ZUSTÄNDE — `.on`, `.an`, `.dragover`, `.schlecht`.
   Ein Rand, der „ausgewählt" sagt, ist kein Umriss, und wer ihn
   mitabschaltet, nimmt die Auskunft weg statt der Zier. Hier stehen
   nur die stillen Strukturränder. */
html[data-umriss="aus"] .home-todo > div,
html[data-umriss="aus"] .cal-fuss,
html[data-umriss="aus"] .vi-auftrag,
html[data-umriss="aus"] .ub-anzeige,
html[data-umriss="aus"] .ub-anzeige .ub-leer,
html[data-umriss="aus"] .proj-copy,
html[data-umriss="aus"] .pc-neu,
html[data-umriss="aus"] .pc-zeile,
html[data-umriss="aus"] .pj-seite,
html[data-umriss="aus"] .cr-sp,
html[data-umriss="aus"] .cr-tip,
html[data-umriss="aus"] .cr-ef,
html[data-umriss="aus"] .copy-kopf-mehr,
html[data-umriss="aus"] .dw-unten .int {
  border-color: transparent;
}

/* ============ Zeitraum: Voreinstellungen und Kalender ============ */
/* Marks Auftrag vom 23.09.2026: „im projekt beim zeitraum in der tabelle
   soll man nicht einzelner tag auswählen können, sondern so ein kalender
   popup, wo man einen zeitraum selbst bestimmen kann, mit presets wie
   heute, gestern, letzte 3, 7, 14 und 30 tage eben."

   Zwei Spalten: links, was man am häufigsten will, rechts, was man
   sonst nicht ausdrücken könnte. Die Trennlinie dazwischen ist das
   einzige, was beide verbindet — sie sagt „zwei Wege zum selben Ziel". */
.menu-zr { padding: 0; }
.zr-wahl { display: flex; align-items: stretch; }
/* Marks Ansage vom 23.09.2026: „die ‚Letzte…' soll schlauer gelöst
   werden / kompakter."

   Sieben Zeilen untereinander sagten siebenmal dasselbe Wort; was sie
   unterscheidet, ist eine ZAHL. Sie stehen jetzt als eine Reihe über
   dem Kalender — die Spalte links fällt weg, und der Kasten ist so
   breit wie der Kalender statt anderthalbmal so breit.

   `1fr` je Feld, nicht `flex-wrap`: Sieben gleich breite Felder in
   einer Zeile lesen sich als eine Skala; umgebrochen wären es zwei
   Zeilen mit ungleichen Kästen. */
.zr-reihe {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  margin-bottom: 7px; padding-bottom: 7px;
  border-bottom: 1px solid var(--trennung);
}
.menu .zr-reihe button, .zr-reihe button {
  width: 100%; padding: 5px 0; background: none; border: 0;
  color: var(--faint); font: inherit; font-size: 11px;
  border-radius: var(--r-klein); cursor: pointer; text-align: center;
  white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.zr-reihe button:hover { background: var(--hover); color: var(--text); }
.zr-reihe button.on { background: var(--panel-2); color: var(--text); }
.zr-kal { padding: 6px 6px 0; }
/* Was der nächste Klick tut, steht darunter — sonst rät man, ob man
   gerade den Anfang oder das Ende wählt. */
.zr-stand {
  font-size: 11px; color: var(--faint); text-align: center;
  padding: 8px 6px 10px; white-space: nowrap;
}
/* Die Tage zwischen Anfang und Ende: eine leisere Fläche als die beiden
   Ränder selbst. Zwei Formen — eine sagt „gewählt", die andere „gehört
   dazu". */
.cal-day.drin { background: var(--raise); border-radius: 0; color: var(--text); }
.cal-day.drin.erster { border-radius: var(--r-feld) 0 0 var(--r-feld); }
.cal-day.drin.letzter { border-radius: 0 var(--r-feld) var(--r-feld) 0; }
/* Ein Tag, an dem nichts lief. Wählbar bleibt er — eine Spanne darf über
   stille Tage hinweggehen. */
.cal-day.still { opacity: .38; }
.cal-day.still.sel, .cal-day.still.drin { opacity: 1; }

/* ---- Eine neue Fassung schreiben ---- */
/* Marks Meldung vom 23.09.2026: „wenn ich auf neue version drücke, dann
   kann ich nur eintragen, was ich geändert habe, die änderung an der
   copy aber nicht."

   Der Block steht dort, wo sonst der Text steht — wer eine Copy
   umschreibt, will sie dabei sehen. Oben die neue Fassung, darunter das
   Wort dazu, und zwei Knöpfe, die abschließen: Bei zwei Feldern kann
   das Verlassen eines Feldes nicht mehr „fertig" heißen. */
.ol-fassung { display: grid; gap: 7px; margin-bottom: 4px; }
.ol-vtextfeld {
  width: 100%; resize: vertical; min-height: 96px;
  background: var(--karte-feld); border: 1px solid var(--border);
  border-radius: var(--r-feld); padding: 9px 11px;
  color: var(--text); font: inherit; font-size: 12px; line-height: 1.55; outline: 0;
}
.ol-fassung-fuss { display: flex; justify-content: flex-end; gap: 7px; }

/* ---- Der Zeitraumkalender steht enger ---- */
/* Marks Frage vom 23.09.2026: „geht die kalender ansicht kleiner /
   kompakter bei der tabelle?"

   Ja — und nur dort. Der Kalender bleibt EINER; was sich unterscheidet,
   sind Maße an einer Stelle, kein zweites Bauteil. Der Grund ist echt:
   Überall sonst steht er allein in einem Menü und darf sich ausbreiten;
   hier trägt er eine zweite Spalte neben sich, und beide zusammen kamen
   auf 422 mal 317 Pixel — gemessen am 23.09.2026 über dem Knopf in der
   Anzeigentabelle.

   Was kleiner wird, ist Luft, nicht Schrift: Die Tage bleiben lesbar
   (13 Pixel), sie stehen nur dichter. Ein Kalender mit 11-Pixel-Ziffern
   wäre kompakt und unbrauchbar. */
.menu-zr .cal { width: 224px; }
.menu-zr .cal-day { width: 28px; height: 28px; }
.menu-zr .cal-week span { padding-bottom: 3px; }
.menu-zr .cal-head { margin-bottom: 3px; }
.menu-zr .cal-title { font-size: 13px; }
.menu-zr .cal-fuss { margin-top: 6px; padding-top: 6px; }
.menu-zr .zr-kal { padding: 5px 5px 0; }
.menu-zr .zr-stand { padding: 6px 4px 8px; }
/* Die Monatsnamen im Jahresraster folgen mit — sonst sprengt das Raster
   die schmalere Spalte, sobald jemand auf den Titel tippt. */
.menu-zr .cal-month { padding: 7px 0; font-size: 12.5px; }

/* ---- Bilder in der Stückliste: Entwurf 17 ---- */
/* Marks Wahl vom 23.09.2026 aus fünfzig Ansichten: „Zeile mit Vorschau
   links."

   Eine Textliste für Bilder war unbrauchbar — zehnmal „Orakel · noch
   nicht gelaufen" untereinander und kein einziges Bild. Der Name eines
   Bildes sagt nichts über das Motiv, und genau das will man vergleichen.

   Die Zeile bleibt eine Zeile; sie bekommt ein Bild davor und verliert
   die zwei Textzeilen darunter, die bei einem Bild ohnehin leer wären. */
.ol-karte.mitbild { display: flex; align-items: center; gap: 10px; }
.ol-krest { flex: 1; min-width: 0; }
.ol-kbild {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-feld);
  overflow: hidden; background: var(--panel-2);
  display: grid; place-items: center;
}
.ol-kbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Im Bildfall trägt die Zeile keine Beschreibung mehr — der Kopf darf
   darum die ganze Höhe füllen statt oben zu kleben. */
.ol-karte.mitbild .ol-kkopf { margin-bottom: 0; }

/* ============ Karten ohne eigene Fläche ============ */
/* Marks Ansage vom 23.09.2026: „mach mal überall die karten farben weg,
   das es quasi auf schwarz ist, aber layout unverändert — will mal
   sehen, wies aussieht, in jeder section."

   Wie bei den Umrissen ein Schalter, kein Umbau: Das Layout bleibt
   unangetastet, es fallen nur zwei Farben weg. Was Karten trägt, sind
   `--karte` und `--raise`; beide zeigen auf den Seitengrund, und damit
   sind alle Flächen fort, ohne dass sich eine Breite, ein Abstand oder
   eine Ecke verschiebt.

   `--panel` bleibt, was es ist: Daran hängen die Schreibfelder
   (`--feld-grund`) und die aktiven Pillen. Nähme man sie mit, wäre die
   Seite nicht flach, sondern leer — man sähe nicht mehr, wo man tippen
   kann. Marks Wort war „karten farben", und Felder sind keine Karten.

   `--panel-2` bleibt aus demselben Grund: Es trägt die gewählte Karte
   in der Stückliste und den Fortschritt in den Zielbalken — beides
   Auskunft, keine Fläche. */
html[data-flaechen="aus"] {
  --karte: var(--bg);
  --raise: var(--bg);
  /* Marks Ansage vom 23.09.2026: „ich finde aktuell bei uns ohne
     umrisse und ohne karten sehr clean, aber da gibts manchmal noch
     uebrige kopfzeilen oder farben, die nicht passen."

     `--karte-feld` ist die Flaeche INNERHALB einer Karte — die
     Detailspalte der Stueckliste, die Zielkarten, die Vorschaukacheln.
     Sie blieb stehen, waehrend die Karte darum verschwand, und genau
     das sah kaputt aus: ein Kasten ohne Grund mit einem Kasten darin. */
  --karte-feld: var(--bg);
}
/* Die eine Stelle, die keine Variable hat: Der Kopfstreifen der
   Projektkarte traegt `--panel` fest. Er ist der „uebrige Kopfzeilen"
   aus Marks Meldung — eine Karte ohne Flaeche, oben abgesetzt durch
   einen Streifen, der nichts mehr abzusetzen hat.

   Und die Zeile, die ihn beim Hinfahren mit aufhellt, muss mit: Sonst
   erschiene der Streifen ausgerechnet dann wieder, wenn man hinfaehrt. */
html[data-flaechen="aus"] .pk-kopf,
html[data-flaechen="aus"] .pk:hover .pk-kopf {
  background: none;
  background-image: none;
}
/* Und die stillen Fuellungen: Zaehlerpillen und Tabellenschleier sind
   aus der Schriftfarbe gemischt und folgen darum keiner Flaechenfarbe.
   In einer flachen Ansicht sind sie die letzten Kaesten. */
html[data-flaechen="aus"] .pi-zahl,
html[data-flaechen="aus"] .pa-zahl,
html[data-flaechen="aus"] .gt-zahl {
  background: none;
}