/* Erzeugt von _bau/seite_bauen.py aus _bau/<bereich>.css — dort ändern. */

/* ═══ dashboard ═══ */
/* Dashboard (lib/heute/workstation_screen.dart): Kacheln je Plattform, darunter Listen. */
.a-db__block { margin-top: 2px; }
.a-db__kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.a-db__kopf span { font-size: 11.5px; color: var(--leise); }
.a-db__kopf .a-db__neu { margin-left: auto; color: var(--terra); font-weight: 600; }
.a-db__kacheln { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 9px; }
.a-db__k { position: relative; padding: 12px 13px; height: 112px; border-radius: 16px; }
.a-db__t { font-size: 12px; font-weight: 600; color: var(--neben); padding-right: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-db__w { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin-top: 8px; white-space: nowrap; }
.a-db__w small { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.a-db__s { font-size: 11px; color: var(--leise); margin-top: 6px; line-height: 1.3; }
.a-db__n { position: absolute; top: 10px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rot); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.a-db__k--held { background: var(--focus); color: #FFF5E9; }
.a-db__k--held .a-db__t, .a-db__k--held .a-db__s { color: #E4BC97; }
.a-db__unten { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin-top: 14px; align-items: start; }
.a-db__liste { padding: 14px 16px 12px; }
.a-db__listkopf { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; min-height: 34px; }
.a-db__alle { height: 30px; font-size: 11.5px; }
.a-db__chat { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linie-fein); }
.a-db__chat b { display: block; font-size: 12.5px; }
.a-db__chat span { font-size: 11.5px; color: var(--terra); }
.a-db__chat div { min-width: 0; }
.a-db__chat div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-db__chat em { font-style: normal; font-size: 11px; color: var(--leise); }
.a-db__av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 14px; }
.a-db__hinweis { font-size: 11px; color: var(--leise); margin: 10px 0 0; line-height: 1.4; }
.ist-aktiv .a-db__k--held { animation-name: a-plopp; }

/* ═══ library ═══ */
/* Library (lib/library/focus_library_shell.dart, lib/widgets/content_card.dart
   _FocusCardFront): Kopf in einer Zeile mit Suche, Band mit Schnellfiltern,
   Ansichtsleiste, darunter breite Clip-Karten. */

/* Kopf: Titel, dann Suche, Filter, Neu, Kebab in einer Reihe (_FocusHeader) */
.a-lib .a-kopf { align-items: center; }
.a-lib .a-motiv { left: 166px; top: -88px; }
.a-lib__steuer { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.a-lib__suche { display: flex; align-items: center; gap: 9px; width: 252px; height: 38px; padding: 0 10px 0 12px; border-radius: 10px;
  background: var(--karte); border: 1px solid var(--linie); color: var(--neben); font-size: 12.5px; white-space: nowrap; }
.a-lib__suche svg { width: 16px; height: 16px; }
.a-lib .a-lib__glas { height: 38px; border-radius: 19px; padding: 0 15px; font-size: 12.5px; font-weight: 600; gap: 8px; }
.a-lib .a-lib__glas svg { width: 16px; height: 16px; }
.a-lib__filter { color: var(--terra); }
.a-lib__zahl { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--terra); color: #FFF8F0; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(140, 72, 42, .34); }
.a-lib .a-lib__kebab { width: 38px; padding: 0; border-radius: 50%; }

/* Band: Schnellfilter stehen links, direkt hinter dem Text (_FocusBand) */
.a-lib .a-band { padding: 15px 22px; margin-bottom: 12px; }
.a-lib .a-band__aktionen { justify-content: flex-start; }
.a-lib .a-bchip { height: 34px; }

/* Ansichtsleiste (_FocusViewBar) */
.a-lib__ansicht { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.a-lib__zaehler { font-size: 12px; color: var(--neben); margin-right: 10px; white-space: nowrap; }
.a-lib__zaehler b { color: var(--text); font-weight: 600; }
.a-lib__segment { display: flex; gap: 2px; height: 38px; padding: 3px; border-radius: 19px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 251, 245, .86) 55%, rgba(253, 246, 238, .78));
  border: 1px solid rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(122, 90, 68, .10), 0 6px 15px rgba(122, 90, 68, .13); }
.a-lib__segment > span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12.5px; font-weight: 600; color: var(--neben); white-space: nowrap; }
.a-lib__segment svg { width: 14px; height: 14px; }
.a-lib__segment .an { color: var(--terra); background: linear-gradient(180deg, #FFFFFF, #FBF2E9); box-shadow: 0 1px 3px rgba(122, 90, 68, .20); }
.a-lib__bundles svg { color: var(--neben); }
.a-lib__kasten { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie);
  font-size: 12px; color: var(--text); white-space: nowrap; }
.a-lib__kasten svg { width: 15px; height: 15px; color: var(--neben); }
.a-lib__kasten .a-lib__pfeil { margin-left: -2px; }

/* Clip-Karten (focus_library_shell.dart ListView, content_card.dart:346-555) */
.a-lib__liste { display: flex; flex-direction: column; gap: 12px; }
.a-lib__karte { --ton: #E8D9CC; --fusston: color-mix(in srgb, var(--ton) 4%, #FFFAF6); flex: none; overflow: hidden; border-radius: 16px; border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--ton) 9%, #FFFAF6); box-shadow: 0 3px 10px rgba(56, 36, 24, .025); }
.a-lib__karte--premium { --ton: #B68943; }
.a-lib__karte--custom { --ton: #B47A80; }
.a-lib__karte--fertig { --ton: #849A73; --fusston: color-mix(in srgb, #849A73 9%, #FFFAF6); }
.a-lib__oben { display: flex; align-items: flex-start; gap: 17px; padding: 14px 15px 0; }
.a-lib__bild { width: 184px; height: 103.5px; border-radius: 10px; flex: none; }
.a-lib__info { flex: 1; min-width: 0; }
.a-lib__idzeile { display: flex; align-items: center; gap: 7px; height: 20px; }
.a-lib__id { font-size: 11px; font-weight: 600; letter-spacing: .54px; color: var(--neben); font-variant-numeric: tabular-nums; }
.a-lib__premium { text-transform: uppercase; }
.a-lib__idzeile .a-plakette--custom { height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; }
.a-lib__name { margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: -.21px; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-lib__meta { margin-top: 7px; font-size: 12px; color: var(--neben); font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-lib__umsatz { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11.5px; font-weight: 500; color: var(--neben); font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-lib__umsatz svg { width: 13px; height: 13px; }
.a-lib__umsatz--warn { color: var(--ocker); }
.a-lib__hinweis { margin-top: 3px; padding-left: 18px; font-size: 10.5px; color: #7A6857; white-space: nowrap; }

/* rechte Spalte: Upload, Symbole, Fortschritt (300 breit) */
.a-lib__rechts { width: 300px; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.a-lib__upload { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 11px; border-radius: 8px;
  background: color-mix(in srgb, var(--terra) 18%, transparent); border: 1px solid color-mix(in srgb, var(--terra) 32%, transparent); color: var(--terra); font-size: 12px; font-weight: 600; white-space: nowrap; }
.a-lib__upload svg { width: 15px; height: 15px; }
.a-lib__upload b { margin-left: 1px; padding: 1px 5px; border-radius: 7px; background: color-mix(in srgb, var(--terra) 16%, transparent); font-size: 10px; font-weight: 700; }
.a-lib__upload--aus { background: var(--erhoben); border-color: var(--linie); color: var(--neben); }
.a-lib__aktionen { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.a-lib__of { display: flex; align-items: center; margin-right: 4px; padding: 0 2px; border-radius: 9px; border: 1px solid rgba(51, 38, 31, .14); }
.a-lib__of i { display: grid; place-items: center; width: 27px; height: 27px; color: rgba(51, 38, 31, .3); }
.a-lib__of i.an { color: var(--terra); }
.a-lib__of svg { width: 16px; height: 16px; }
.a-lib__of em { width: 1px; height: 18px; background: rgba(51, 38, 31, .12); }
.a-lib__ib { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--erhoben); border: 1px solid var(--linie); color: var(--neben); }
.a-lib__ib svg { width: 15px; height: 15px; }
.a-lib__ib--terra { color: var(--terra); }
.a-lib__ib--rot { color: #B3413A; }
.a-lib__fort { align-self: stretch; display: flex; justify-content: space-between; margin-top: 11px; font-size: 10.5px; color: var(--neben); letter-spacing: .3px; }
.a-lib__fort b { font-weight: 500; color: #7E3A1E; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.a-lib__balken { align-self: stretch; height: 4px; margin-top: 5px; border-radius: 3px; background: rgba(255, 255, 255, .70); border: 1px solid rgba(122, 90, 68, .20); overflow: hidden; }
.a-lib__balken i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--terra), var(--ocker)); transform-origin: left center; }
.a-lib__karte--fertig .a-lib__fort b { color: #3F5136; }
.a-lib__karte--fertig .a-lib__balken i { background: var(--salbei); }

/* Mitte: Datei-Punkte links, Jahre und Zustand rechts */
.a-lib__mitte { display: flex; align-items: center; gap: 12px; padding: 12px 15px 12px; }
.a-lib__dateien { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.a-lib__dateien > span { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .4); border: 1px solid rgba(51, 38, 31, .09);
  font-size: 11px; color: var(--neben); white-space: nowrap; }
.a-lib__dateien em { font-style: normal; }
.a-lib__dateien i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid #7A6857; }
.a-lib__dateien .da { color: var(--text); font-weight: 500; }
.a-lib__dateien .da i { width: 6px; height: 6px; border: 0; background: var(--salbei); }
.a-lib__jahre { display: flex; gap: 3px; padding: 3px; border-radius: 16px; flex: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 250, 243, .72)); border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 2px 8px rgba(122, 90, 68, .10); }
.a-lib__jahre span { display: grid; place-items: center; width: 46px; height: 24px; border-radius: 12px; font-size: 11.5px; font-weight: 600; color: var(--neben); font-variant-numeric: tabular-nums; }
.a-lib__jahre .an { color: #FFF8F0; background: linear-gradient(180deg, #A9542F, #93472A); box-shadow: 0 1px 3px rgba(147, 71, 42, .32); }
.a-lib__karte--fertig .a-lib__jahre .an { background: linear-gradient(180deg, #5C7050, #4F6243); box-shadow: 0 1px 3px rgba(79, 98, 67, .32); }
.a-lib__zustand { display: inline-flex; align-items: center; gap: 7px; height: 25px; padding: 0 9px 0 8px; border-radius: 13px; flex: none; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .06px; color: #7E3A1E;
  background: linear-gradient(180deg, rgba(255, 245, 238, .96), rgba(248, 224, 208, .90)); border: 1px solid rgba(147, 71, 42, .34); box-shadow: 0 4px 10px rgba(140, 72, 42, .13); }
.a-lib__zustand svg { width: 13px; height: 13px; }
.a-lib__karte--fertig .a-lib__zustand { color: #3B4D32; background: linear-gradient(180deg, rgba(248, 251, 244, .96), rgba(219, 229, 208, .90));
  border-color: rgba(79, 98, 67, .36); box-shadow: 0 4px 10px rgba(60, 72, 48, .12); }

/* Fußzeile: Plattformnamen, fett = hochgeladen */
.a-lib__fuss { display: flex; flex-wrap: wrap; gap: 0 10px; padding: 7px 15px; background: var(--fusston); border-top: 1px solid rgba(51, 38, 31, .09);
  font-size: 11px; line-height: 20px; color: #8A7A6A; white-space: nowrap; }
.a-lib__fuss b { color: var(--text); font-weight: 700; }

/* Bewegung: Karten gleiten nacheinander ein, der Balken der ersten füllt sich */
.ist-aktiv .a-lib__karte.a-anim-auf { animation-duration: .6s; }
.ist-aktiv .a-lib__karte:first-child .a-lib__balken i { animation: a-wachsen-x .9s cubic-bezier(.22, .61, .36, 1) .55s both; }

/* ═══ studio ═══ */
/* Studio (lib/studio/studio_screen.dart, lib/widgets/metadaten_eingabe.dart):
   Umschalter Metadaten | PPV-Nachricht, links die Eingabe „Neuer Eintrag",
   rechts die Vorschau mit Reitern je Fassung (Stamm + fünf Plattformen). In
   der App stehen beide Karten untereinander; hier nebeneinander, damit alles
   in die feste Fensterhöhe passt. */
.a-st .a-reiter b { font-weight: inherit; }
.a-st__modus { display: flex; width: max-content; margin-bottom: 11px; }
.a-st__modus span { height: 28px; }
.a-st__spalten { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: stretch; }

/* Gemeinsame Teile beider Karten */
.a-st__kopfzeile { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 14px; font-weight: 700; color: var(--text); }
.a-st__kopfzeile > svg { width: 17px; height: 17px; color: var(--terra); }
.a-st__label { font-size: 11.5px; font-weight: 600; color: rgba(51, 38, 31, .65); margin: 8px 0 4px; line-height: 1.25; }
.a-st__feld { background: var(--papier); border: 1px solid var(--linie); border-radius: 10px; padding: 6px 10px; font-size: 12px; line-height: 1.45; color: var(--text); }

/* Links: Eingabe */
.a-st__eingabe { padding: 13px 16px 14px; display: flex; flex-direction: column; }
/* Wie in metadaten_eingabe.dart: Kopf mit gefülltem Plus-Kreis, etwas größere
   Feldnamen, das Stichwortfeld zwei Zeilen hoch (maxLines: 2), die Knöpfe
   unten — so schließt die Karte mit der Vorschau-Karte ab. */
.a-st__kreis { width: 18px; height: 18px; border-radius: 50%; background: var(--terra); color: #fff; display: grid; place-items: center; flex: none; }
.a-st__kreis svg { width: 12px; height: 12px; }
.a-st__eingabe .a-st__label { font-size: 12px; margin: 11px 0 5px; }
.a-st__eingabe .a-st__kopfzeile + .a-st__label { margin-top: 10px; }
.a-st__feld--zwei { min-height: calc(2 * 1.45em + 14px); }
.a-st__hinweis { font-size: 11px; line-height: 1.4; color: var(--leise); margin-top: 5px; }
.a-st__feld--hoch { min-height: 66px; }
.a-st__paar { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.a-st__paar > div { min-width: 0; }
.a-st__paar .a-st__feld { white-space: nowrap; }
.a-st__wahl { display: flex; align-items: center; justify-content: space-between; }
.a-st__wahl svg { width: 14px; height: 14px; color: var(--leise); }
.a-st__knoepfe { margin-top: auto; padding-top: 16px; display: flex; gap: 7px; }
.a-st__knoepfe .a-knopf { height: 32px; padding: 0 10px; }

/* Rechts: Vorschau mit Fassungen */
.a-st__ergebnis { min-width: 0; padding: 13px 16px 14px; display: flex; flex-direction: column; }
.a-st__vorlage { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 10px; white-space: nowrap;
  background: color-mix(in srgb, var(--terra) 9%, var(--karte)); border: 1px solid color-mix(in srgb, var(--terra) 28%, transparent);
  color: var(--terra); font-size: 11px; font-weight: 700; }
.a-st__vorlage svg { width: 13px; height: 13px; }
.a-st__fassungen { display: flex; width: max-content; margin-top: 8px; padding: 3px; gap: 3px; }
.a-st__fassungen span { height: 27px; padding: 0 10px; font-size: 12px; gap: 7px; }
.a-st__punkt { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--salbei); flex: none; }
.a-st__feld--titel { font-size: 13px; font-weight: 600; }
.a-st__kw { display: flex; flex-wrap: wrap; gap: 4px 5px; padding: 5px 6px; }
.a-st__kw i { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 7px; font-style: normal; font-size: 11px; white-space: nowrap;
  background: var(--erhoben); border: 1px solid rgba(51, 38, 31, .10); color: var(--neben); }
.a-st__alt { display: flex; gap: 7px; }
.a-st__alt span { display: inline-flex; align-items: center; height: 25px; padding: 0 11px; border-radius: 10px; font-size: 11.5px; white-space: nowrap;
  background: var(--karte); border: 1px solid var(--linie); color: var(--text); }
.a-st__fuss { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 14px; }
.a-st__fuss .a-knopf--gruen { height: 32px; }
.a-st__fuss em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--leise); white-space: nowrap; }

/* Bewegung: Felder erscheinen gestaffelt (a-anim-auf im HTML), dann die
   Keywords einzeln, und die Punkte an den Plattform-Reitern werden grün —
   in der App erscheint der Punkt, sobald die Fassung steht. */
@keyframes a-st-gruen { from { opacity: 0; transform: scale(.3); background: #D8CABD; } }
.a-st.ist-aktiv .a-st__punkt { animation: a-st-gruen .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 170ms + 350ms); }
.a-st.ist-aktiv .a-st__kw i { animation: a-plopp .4s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 35ms + 420ms); }

/* ═══ trailer ═══ */
/* Trailer (lib/traila/trailer_screen.dart + eingebettete Zeitleiste assets/traila/ui,
   Farben aus assets/traila/reponara_focus.css): Kopf ohne Band, Dateizeile,
   dunkler Viewer, Transport, Wasserzeichen, Spuren + Werkzeuge, Zeitleiste.
   Zeitleiste: 30,625 px/s; 10 Schnipsel à 3 s = 0:30.0, enden genau am Strich „max 0:30“. */
.a-tr__datei { display: flex; align-items: center; gap: 12px; height: 36px; margin-bottom: 10px; }
.a-tr__play { width: 34px; height: 34px; border-radius: 11px; background: #F0DFD4; color: var(--terra); display: grid; place-items: center; flex: none; }
.a-tr__play svg { width: 13px; height: 13px; }
.a-tr__name { font-size: 14px; font-weight: 600; letter-spacing: -.1px; line-height: 1.2; }
.a-tr__info { font-size: 11px; color: var(--leise); margin-top: 2px; }
.a-tr__aktionen { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Viewer: neutral dunkel (#181615, reponara_focus.css:73), Bild 16:9 mittig */
.a-tr__viewer { height: 256px; border-radius: 16px; background: #181615; border: 1px solid var(--linie); overflow: hidden; display: flex; justify-content: center; }
.a-tr__bild { position: relative; height: 100%; aspect-ratio: 16 / 9; }
.a-tr__bild img { width: 100%; height: 100%; object-fit: cover; }
.a-tr__wz { position: absolute; right: 3.5%; bottom: 6%; width: 12.5%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255, 248, 240, .9);
  display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; padding-left: 1.4px; color: #FFF8F0;
  opacity: .85; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); box-shadow: 0 0 10px rgba(0, 0, 0, .12); }

/* Transport */
.a-tr__transport { display: flex; align-items: center; gap: 8px; height: 32px; margin-top: 8px; }
.a-tr__tk { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 32px; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--karte); color: var(--text); font-size: 13px; white-space: nowrap; flex: none; }
.a-tr__tk svg { width: 13px; height: 13px; }
.a-tr__tk--play { min-width: 42px; background: #33261F; border-color: #33261F; color: #FFFCF7; }
.a-tr__tk--aus { opacity: .3; }
.a-tr__tk--undo svg { transform: scaleX(-1); }
.a-tr__tk--text { padding: 0 11px; font-size: 12px; font-weight: 600; }
.a-tr__tk--matt { opacity: .55; }
.a-tr__blitz { font-size: 11px; }
.a-tr__tc { font-size: 13.5px; font-weight: 700; margin-left: 4px; white-space: nowrap; flex: none; }
.a-tr__tc i { font-style: normal; font-weight: 500; color: var(--leise); }
.a-tr__hinweis { margin-left: auto; min-width: 0; flex: 0 1 auto; font-size: 10.5px; line-height: 1.3; color: var(--leise); text-align: right; text-wrap: balance; }

/* Regler (Terrakotta) */
.a-tr__regler { position: relative; width: 92px; height: 4px; border-radius: 2px; background: #E2D2C3; flex: none; }
.a-tr__regler i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 2px; background: var(--terra); }
.a-tr__regler u { position: absolute; left: var(--w); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFCF7;
  border: 1px solid #CEBAA9; box-shadow: 0 1px 3px rgba(56, 36, 24, .18); }
.a-tr__regler--zoom { width: 64px; margin-left: 4px; }

/* Wasserzeichen-Leiste */
.a-tr__wzleiste { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding: 5px 6px 5px 14px; border-radius: 12px; background: #F2E7DC; }
.a-tr__wzlabel { font-size: 12.5px; font-weight: 700; }
.a-tr__check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neben); }
.a-tr__check i { width: 14px; height: 14px; border-radius: 4px; background: var(--terra); color: #fff; display: grid; place-items: center; }
.a-tr__check svg { width: 11px; height: 11px; }
.a-tr__regel { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: var(--neben); }
.a-tr__wert { font-size: 11.5px; color: var(--neben); }
.a-tr__ecken { margin-left: auto; display: grid; grid-template-columns: repeat(2, 17px); grid-template-rows: repeat(2, 17px); gap: 3px; }
.a-tr__ecken i { position: relative; border: 1px solid var(--linie); border-radius: 5px; background: var(--karte); }
.a-tr__ecken i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border: 0 solid var(--leise); }
.a-tr__ecken .a-tr__ecke--ol::after { border-top-width: 1.4px; border-left-width: 1.4px; border-top-left-radius: 4px; }
.a-tr__ecken .a-tr__ecke--or::after { border-top-width: 1.4px; border-right-width: 1.4px; border-top-right-radius: 4px; }
.a-tr__ecken .a-tr__ecke--ul::after { border-bottom-width: 1.4px; border-left-width: 1.4px; border-bottom-left-radius: 4px; }
.a-tr__ecken .a-tr__ecke--ur::after { border-bottom-width: 1.4px; border-right-width: 1.4px; border-bottom-right-radius: 4px; }
.a-tr__ecken i.an { background: var(--focus); border-color: transparent; }
.a-tr__ecken i.an::after { border-color: #FFF5E9; }

/* Spuren und Werkzeuge */
.a-tr__spuren { display: flex; align-items: center; gap: 4px; height: 32px; margin-top: 10px; }
.a-tr__spur { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 7px 0 11px; border-radius: 10px; border: 1px solid transparent;
  font-size: 12.5px; color: var(--neben); white-space: nowrap; flex: none; }
.a-tr__spur b { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 6px; background: var(--karte); color: var(--salbei); }
.a-tr__spur b.a-tr__ueber { background: var(--ocker-hell); color: var(--ocker); }
.a-tr__spur.an { background: #F0DFD4; border-color: #CEBAA9; color: var(--terra); font-weight: 500; }
.a-tr__werkzeuge { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.a-tr__werkzeuge .a-knopf--klein { padding: 0 9px; }
.a-tr__feld { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neben); white-space: nowrap; }
.a-tr__stepper { display: inline-flex; align-items: center; height: 28px; padding: 0 2px; border-radius: 9px; background: var(--erhoben); border: 1px solid var(--linie); }
.a-tr__stepper i { width: 16px; text-align: center; font-style: normal; font-size: 13px; color: var(--neben); }
.a-tr__stepper b { min-width: 22px; text-align: right; font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.a-tr__stepper em { width: 10px; padding-left: 2px; font-style: normal; font-size: 10.5px; color: var(--leise); }
.a-tr__gesperrt { opacity: .45; }
.a-tr__glyphe { font-size: 12px; line-height: 1; }

/* Zeitleiste */
.a-tr__zeitleiste { position: relative; height: 98px; margin-top: 8px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); overflow: hidden; }
.a-tr__lineal { display: flex; height: 20px; border-bottom: 1px solid var(--linie); background: var(--papier); }
.a-tr__lineal span { flex: none; width: 61.25px; padding: 4px 0 0 4px; border-left: 1px solid var(--linie); font-family: var(--mono); font-size: 10px; line-height: 1.1; color: var(--leise); }
.a-tr__lineal span:first-child { border-left-color: transparent; }
.a-tr__bahn { display: flex; padding-top: 5px; }
.a-tr__clip { position: relative; flex: none; width: 90.875px; height: 60px; margin-right: 1px; border-radius: 8px; overflow: hidden; background: #2A211D; }
.a-tr__clip img { width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) var(--y, 50%); transform: scale(var(--z, 1)); transform-origin: var(--x, 50%) var(--y, 50%); }
.a-tr__clip b { position: absolute; left: 2px; top: 3px; padding: 1px 3px; border-radius: 4px; background: rgba(20, 14, 10, .62); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; white-space: nowrap; }
.a-tr__grenze { position: absolute; left: 918.75px; top: 0; bottom: 10px; width: 2px; background: var(--ocker); z-index: 2; }
.a-tr__grenze b { position: absolute; left: 4px; top: 68px; padding: 1px 4px; border-radius: 4px; background: var(--ocker); color: #FFF5E9;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2; white-space: nowrap; }
.a-tr__zeiger { position: absolute; left: 245px; top: 0; bottom: 10px; width: 1.5px; margin-left: -.75px; background: var(--text); z-index: 3; }
.a-tr__zeiger::before { content: ""; position: absolute; left: -5.25px; top: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--text); }
.a-tr__rolle { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 4px; border-radius: 2px; background: rgba(51, 38, 31, .06); }
.a-tr__rolle i { display: block; width: 80%; height: 100%; border-radius: 2px; background: rgba(51, 38, 31, .2); }

/* Bewegung: Schnipsel springen gestaffelt auf, danach fährt der Abspielkopf einmal von 0:00 bis 0:08.0. */
@keyframes a-tr-schnipsel { from { opacity: 0; transform: translateY(12px) scale(.82); } }
@keyframes a-tr-kopf { from { transform: translateX(-245px); } }
.ist-aktiv .a-tr__clip { animation: a-tr-schnipsel .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 250ms); }
.ist-aktiv .a-tr__zeiger { animation: a-tr-kopf .9s cubic-bezier(.45, 0, .25, 1) both; animation-delay: 1.15s; }

/* ═══ upload ═══ */
/* Upload (lib/upload/upload_screen.dart, Vorlage vom 10.09.2026): Kopf mit
   Kontextzeile, kompaktes Band nur mit Plattform-Chips, Reihe der fünf
   Plattform-Kacheln mit Abhak-Balken, links die Bedienspalte, rechts statt
   der fremden Plattformseite die Stapel-Karte (_batchPanel), darunter die
   Abhak-Leiste und das aufgeklappte Log. */

.a-up .a-kopf { margin-bottom: 10px; }
.a-up__kontext { display: flex; align-items: center; font-size: 12.5px; }
.a-up__kontext b { color: var(--terra); font-weight: 800; margin-right: 4px; }
.a-up__kontext i { width: 1px; height: 12px; margin: 0 12px; background: var(--linie); }
.a-up__kk { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 12.5px; font-weight: 600; gap: 9px; }
.a-up__kebab { width: 38px; padding: 0; }
.a-up__kebab svg { width: 16px; height: 16px; }

.a-up__band { margin-bottom: 8px; }

/* Plattform-Reihe: GlasKachel (hoehe 36; Radius 10 nach Brand Kit statt 12) mit Schein aus der Ecke */
.a-up__reihe { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.a-up__kacheln { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.a-up__kachel { height: 36px; border-radius: 10px; padding: 0 9px 0 10px; display: flex; align-items: center; gap: 8px; min-width: 0;
  background: radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--f) 20%, #FFFCF8) 0%, #FFFAF6 72%);
  border: 1px solid color-mix(in srgb, var(--f) 30%, var(--linie)); }
.a-up__kachel b { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-up__kachel span { font-size: 10px; color: var(--leise); white-space: nowrap; }
.a-up__kachel--an { background: radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--f) 34%, #FFFCF8) 0%, color-mix(in srgb, var(--f) 8%, #FFFAF6) 78%);
  border: 1.5px solid color-mix(in srgb, var(--f) 72%, transparent); }
.a-up__kachel--an b { font-weight: 800; }
.a-up__ring { width: 8px; height: 8px; border-radius: 50%; border: 1.2px solid var(--neben); flex: none; }
.a-up__ring--voll { background: var(--f); border: 0; }
.a-up__quote { width: 134px; flex: none; display: flex; align-items: center; gap: 10px; }
.a-up__balken { flex: 1; height: 6px; border-radius: 3px; background: #EADBCB; }
.a-up__quote b { font-size: 13px; font-weight: 800; color: var(--terra); white-space: nowrap; }

.a-up__spalten { display: grid; grid-template-columns: 262px 1fr; gap: 12px; align-items: start; }
.a-up__links, .a-up__rechts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.a-up__rechts { gap: 8px; }

/* Clip-Karte (_selectedCard + _clipStandZeile + Modus-Kacheln) */
.a-up__clip { padding: 12px; }
.a-up__bild { width: 100%; height: auto; border-radius: 10px; object-position: 50% 45%; }
.a-up__cliptitel { font-size: 12px; font-weight: 700; line-height: 1.2; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-up__meta { font-size: 10px; color: var(--neben); margin-top: 4px; }
.a-up__ringe { display: flex; gap: 3px; margin-top: 8px; }
.a-up__ringe span { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 10px; font-weight: 600;
  color: color-mix(in srgb, var(--f) 78%, #33261F); background: color-mix(in srgb, var(--f) 10%, var(--karte)); border: 1px solid color-mix(in srgb, var(--f) 40%, transparent); }
.a-up__ringe i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--f) 70%, transparent); }
.a-up__label { margin-top: 10px; }
.a-up__modi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.a-up__modus { min-height: 34px; padding: 4px 8px; border-radius: 10px; display: flex; align-items: center; gap: 6px; background: var(--papier); border: 1px solid var(--linie);
  font-size: 10.5px; font-weight: 600; line-height: 1.15; color: var(--text); }
.a-up__modus svg { width: 14px; height: 14px; color: var(--terra); }
.a-up__modus--an { background: color-mix(in srgb, var(--terra) 10%, var(--karte)); border-color: color-mix(in srgb, var(--terra) 55%, transparent); }

.a-up__lauf { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 7px; }
.a-up__kartentitel { font-size: 13px; font-weight: 700; }
.a-up__breit { width: 100%; }
.a-up__lauf .a-knopf--primaer { height: 36px; }

/* Stapel-Karte (_batchPanel): Titel, eine Zeile je Plattform, Laufbalken */
.a-up__stapel { padding: 13px 16px 14px; }
.a-up__stapelkopf { display: flex; align-items: center; gap: 8px; height: 24px; }
.a-up__stapelkopf > svg { width: 15px; height: 15px; color: var(--terra); }
/* Beide Titel stehen ganz übereinander: „Batch läuft“ ist kürzer als „Batch
   beendet“, ein getauschtes Wort allein ließ davor eine Lücke. */
.a-up__stapeltitel { flex: 1; min-width: 0; display: grid; font-size: 13px; font-weight: 700; }
.a-up__stapeltitel > span { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-up__wechsel { display: inline-grid; justify-items: start; vertical-align: top; }
.a-up__wechsel > * { grid-area: 1 / 1; }
.a-up__vorher { opacity: 0; }
.a-up__stapelknopf { font-size: 11.5px; font-weight: 700; color: var(--leise); justify-items: end; }
.a-up__abbrechen { color: var(--rot); }
.a-up__zeile { display: grid; grid-template-columns: 8px 92px 1fr 212px; align-items: center; gap: 10px; height: 31px; border-top: 1px solid var(--linie-fein); }
.a-up__stapelkopf + .a-up__zeile { margin-top: 8px; }
.a-up__zeile > b { font-size: 12.5px; font-weight: 600; }
.a-up__dateien { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--leise); white-space: nowrap; min-width: 0; }
.a-up__dateien svg { width: 12px; height: 12px; }
.a-up__stand { display: grid; align-items: center; justify-items: start; }
.a-up__stand > * { grid-area: 1 / 1; white-space: nowrap; }
.a-up__warten { font-size: 12px; color: var(--leise); opacity: 0; }
.a-up__laeuft { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--terra); opacity: 0; }
.a-up__laeuft i { width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid color-mix(in srgb, var(--terra) 25%, transparent); border-top-color: var(--terra); }
.a-up__fertig { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 700;
  background: var(--salbei-hell); color: var(--salbei); }
.a-up__fertig--selbst { background: color-mix(in srgb, var(--terra) 10%, var(--karte)); color: var(--terra); }
.a-up__laufbalken { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linie-fein); }
.a-up__spur { flex: 1; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #EADBCB; }
.a-up__spur i { flex: 1; background: var(--terra); box-shadow: 1px 0 0 var(--terra); transform-origin: 0 50%; }
.a-up__stand-text { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--neben); white-space: nowrap; }
.a-up__stand-text b { font-size: 13px; font-weight: 800; color: var(--terra); }

/* Abhak-Leiste unter dem Browser (_abhakLeiste): GlasFlaeche, radius 10 */
.a-up__abhaken { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 251, 245, .86)); border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: 0 1px 2px rgba(122, 90, 68, .08), 0 4px 12px rgba(122, 90, 68, .09); }
.a-up__abhaken .a-punkt { width: 7px; height: 7px; }
.a-up__abhaken > b { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-up__klein { height: 26px; padding: 0 10px; border-radius: 10px; font-size: 11px; font-weight: 700; gap: 6px; }
.a-up__klein svg { width: 13px; height: 13px; }
.a-up__abhaken .a-up__klein:last-child { font-weight: 600; }

/* Log, aufgeklappt */
.a-up__log { padding: 10px 14px 11px; }
.a-up__logkopf { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.a-up__logkopf svg { width: 14px; height: 14px; color: var(--neben); }
.a-up__logkopf span { font-size: 11px; color: var(--leise); }
.a-up__zeilen { margin-top: 6px; font-size: 10.5px; line-height: 1.5; color: var(--neben); }
.a-up__zeilen div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bewegung: die Zeilen laufen nacheinander durch — Wartet → Läuft → Bereit.
   Reihenfolge wie im Stapel (upload_plattformen.dart): FapHouse zuletzt. */
@keyframes a-up-weg { from { opacity: 1; } }
.ist-aktiv .a-up__warten { animation: a-up-weg .3s ease-out both; animation-delay: calc(var(--k) * 380ms + 320ms); }
.ist-aktiv .a-up__laeuftaussen { animation: a-ein .3s ease-out both; animation-delay: calc(var(--k) * 380ms + 320ms); }
.ist-aktiv .a-up__laeuft { animation: a-up-weg .3s ease-out both; animation-delay: calc(var(--k) * 380ms + 700ms); }
.ist-aktiv .a-up__fertig { animation: a-plopp .45s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--k) * 380ms + 700ms); }
.ist-aktiv .a-up__spur i { animation: a-wachsen-x .38s linear both; animation-delay: calc(var(--k) * 380ms + 320ms); }
/* Nacheinander statt überblendet: zwei gleiche Titelenden, um die Wortbreite
   versetzt, sähen beim Überblenden verwackelt aus. */
.ist-aktiv .a-up__vorher { animation: a-up-weg .3s ease-out both; animation-delay: 2250ms; }
.ist-aktiv .a-up__nachher, .ist-aktiv .a-up__stand-text { animation: a-ein .3s ease-out both; animation-delay: 2500ms; }

/* ═══ post ═══ */
/* Posten (lib/post/post_screen.dart, planer_spalte.dart, monats_ueberblick.dart):
   Reiter „Beitrag“ — links das Formular mit drei Schritten, rechts Kalender und
   „Steht an“, unten die klebende Leiste mit den zwei Wegen hinaus.
   Reddit zeigt nur Communities, Regeln und Ampel — Absenden ist nicht gebaut. */
.a-po .a-motiv { left: 128px; }
.a-po .a-band { gap: 16px; }
.a-po .a-bchip { padding: 0 10px; gap: 6px; }
.a-po .a-reiter b { font-weight: inherit; }
.a-po__reiter { margin-bottom: 10px; }
/* Drei Reiter, drei Töne des Wellenbandes (post_screen.dart _viewTab) */
.a-po__reiter span:nth-child(2) { background: color-mix(in srgb, var(--salbei) 8%, var(--karte)); }
.a-po__reiter span:nth-child(3) { background: color-mix(in srgb, var(--rauch) 8%, var(--karte)); }

.a-po__spalten { display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 14px; align-items: start; }

/* ── Formular „Neuer Beitrag“ ── läuft unter der Leiste weiter wie in der App */
.a-po__form { height: 520px; padding: 10px 16px 0; overflow: hidden; }
.a-po__kopfzeile { display: flex; align-items: center; gap: 6px; height: 26px; }
.a-po__h { font-size: 14.5px; font-weight: 800; margin-right: 6px; white-space: nowrap; }
.a-po__fchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--linie); background: var(--papier);
  font-size: 10.5px; font-weight: 600; color: var(--text); white-space: nowrap; flex: none; }
.a-po__fchip svg { width: 11px; height: 11px; color: var(--terra); }
.a-po__schritt { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--neben); white-space: nowrap; }
.a-po__label { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.a-po__abschnitt { display: flex; align-items: center; height: 14px; margin-top: 7px; }

/* Ablage: drei Bilder liegen drin */
.a-po__ablage { position: relative; display: flex; align-items: center; gap: 8px; height: 56px; margin-top: 7px; padding: 0 5px; border-radius: 12px;
  border: 1.5px dashed #DCC6B4; background: #FBF4ED; }
.a-po__ablage img { width: 82px; height: 46px; border-radius: 7px; object-fit: cover; box-shadow: 0 3px 9px rgba(50, 30, 20, .18); }
.a-po__ablagetext { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--neben); white-space: nowrap; }
.a-po__ablagetext svg { width: 18px; height: 18px; color: var(--leise); }

/* Text und Grok */
.a-po__textzeile { display: flex; gap: 8px; margin-top: 5px; }
.a-po__feld { flex: 1; min-width: 0; height: 32px; padding: 0 12px; display: flex; align-items: center; border-radius: 10px; border: 1px solid var(--linie); background: var(--papier);
  font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; }
.a-po__grok { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 11px; border-radius: 10px; border: 1px solid var(--linie); background: var(--papier);
  font-size: 12px; font-weight: 600; white-space: nowrap; }
.a-po__grok svg { width: 14px; height: 14px; color: var(--terra); }
.a-po__grok .a-po__auf { width: 13px; height: 13px; color: var(--leise); margin-left: 4px; }

/* Hashtags */
.a-po__tags { display: flex; align-items: center; gap: 6px; height: 24px; margin-top: 7px; }
.a-po__hinweis { font-size: 11px; color: var(--leise); white-space: nowrap; margin-right: 4px; }
.a-po__tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px 0 8px; border-radius: 7px; border: 1px solid var(--linie); background: var(--papier);
  font-size: 11px; font-weight: 600; white-space: nowrap; flex: none; }
.a-po__tag i { font-style: normal; font-size: 10px; font-weight: 500; color: var(--leise); }
.a-po__tag svg { width: 10px; height: 10px; color: var(--leise); }
.a-po .a-po__x { transform: rotate(45deg); }
.a-po__neu { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--terra); white-space: nowrap; }
.a-po__neu svg { width: 12px; height: 12px; }

/* Kanäle in zwei Gruppen */
.a-po__gruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 5px; }
.a-po__gruppe { padding: 7px 10px 8px; border-radius: 12px; border: 1px solid var(--linie); background: #FDF8F3; min-width: 0; }
.a-po__gkopf { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.a-po__gkopf svg { width: 13px; height: 13px; color: var(--terra); }
.a-po__gkopf span { font-size: 11px; color: var(--neben); overflow: hidden; text-overflow: ellipsis; }
.a-po__pillen { display: flex; gap: 7px; margin-top: 6px; }
.a-po__kanal { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 15px; border: 1px solid #DCD0C4; background: #EEE7E0;
  font-size: 12.5px; font-weight: 600; color: #8C7E72; white-space: nowrap; flex: none; }
.a-po__kanal i { width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.a-po__kanal svg { width: 12px; height: 12px; stroke-width: 2.6; }
.a-po__kanal--an { color: var(--terra); background: var(--terra-hell); border-color: #DDAE97; box-shadow: 0 2px 7px rgba(120, 55, 30, .13); }

/* Zeitpunkt */
.a-po__zeit { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.a-po__zeit .a-po__label { margin-right: 6px; }
.a-po__seg { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--erhoben);
  font-size: 12px; font-weight: 600; color: var(--neben); white-space: nowrap; }
.a-po__seg svg { width: 13px; height: 13px; }
.a-po__seg--an { background: var(--terra-hell); border-color: #E5B8A4; color: var(--terra); }

/* Reddit: aufgeklappt, eine Community passt, eine ist unsicher */
.a-po__reddit { margin-top: 7px; padding-top: 3px; border-top: 1px solid var(--linie-fein); }
.a-po__rkopf { display: flex; align-items: center; gap: 7px; height: 24px; font-size: 12.5px; }
.a-po__rkopf svg { width: 14px; height: 14px; color: var(--neben); }
.a-po__rkopf span { margin-left: auto; font-size: 11px; color: var(--leise); white-space: nowrap; }
.a-po__rspalten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1px; padding-left: 21px; }
.a-po__rspalten > div { min-width: 0; }
.a-po__zone { display: flex; align-items: center; gap: 4px; height: 16px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.a-po__zone svg { width: 13px; height: 13px; transform: rotate(180deg); }
.a-po__zone--passt { color: var(--salbei); }
.a-po__zone--unsicher { color: var(--ocker); }
.a-po__sub { display: flex; align-items: center; gap: 7px; height: 20px; margin-top: 2px; font-size: 12px; font-weight: 600; }
.a-po__box { width: 14px; height: 14px; border-radius: 3px; border: 1.6px solid rgba(51, 38, 31, .35); display: grid; place-items: center; flex: none; }
.a-po__box svg { width: 11px; height: 11px; stroke-width: 2.8; }
.a-po__box--an { border-color: var(--terra); color: var(--terra); }
.a-po__ampel { display: flex; align-items: center; gap: 6px; height: 22px; margin: 2px 0 0 21px; padding: 0 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--salbei) 55%, transparent);
  font-size: 11px; font-weight: 700; color: var(--salbei); white-space: nowrap; overflow: hidden; }
.a-po__ampel i { width: 8px; height: 8px; border-radius: 50%; background: var(--salbei); flex: none; }
.a-po__ampel span { overflow: hidden; text-overflow: ellipsis; }
.a-po__warn { margin: 3px 0 0 21px; font-size: 11px; line-height: 16px; color: var(--ocker); white-space: nowrap; }

/* ── Rechte Spalte: Monatskalender und „Steht an“ ── Nur der obere Kalender der App
   (OnlyFans · Fansly); X hat dort einen eigenen und fehlt hier bewusst, Reddit plant nichts. */
.a-po__rechts { display: flex; flex-direction: column; gap: 10px; }
.a-po__kal { padding: 10px 14px 8px; }
.a-po__legende { display: flex; gap: 10px; font-size: 10.5px; font-weight: 700; color: var(--neben); white-space: nowrap; }
.a-po__legende span { display: inline-flex; align-items: center; gap: 5px; }
.a-po__legende i { width: 7px; height: 7px; border-radius: 50%; background: var(--f); }
.a-po__monat { display: flex; align-items: center; gap: 6px; height: 24px; margin-top: 5px; }
.a-po__monat b { font-size: 13px; font-weight: 800; }
.a-po__belegt { font-size: 11px; color: var(--terra); white-space: nowrap; }
.a-po__luecke { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--linie); background: var(--papier);
  font-size: 11px; font-weight: 600; white-space: nowrap; }
.a-po__luecke svg { width: 12px; height: 12px; }
.a-po__pfeil { width: 15px; height: 15px; color: var(--leise); }
.a-po__raster { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1px; margin-top: 5px; text-align: center; }
.a-po__raster b { font-size: 10px; font-weight: 600; color: var(--leise); height: 16px; line-height: 16px; }
.a-po__raster span { position: relative; height: 21px; line-height: 14px; font-size: 11px; color: var(--text); border: 1px solid transparent; border-radius: 7px; margin: 0 3px; }
.a-po .a-po__t1 { grid-column-start: 2; }
.a-po .a-po__t1:lang(en) { grid-column-start: 3; }
.a-po__raster .a-po__heute { border: 1.5px solid var(--text); font-weight: 800; line-height: 13.5px; }
.a-po__raster em { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; }
.a-po__raster em i { width: 4px; height: 4px; border-radius: 50%; background: var(--f); }

.a-po__steht { padding: 10px 14px 10px; }
.a-po__skopf { display: flex; align-items: center; gap: 7px; }
.a-po__skopf svg { width: 16px; height: 16px; color: var(--terra); }
.a-po__skopf b { font-size: 14px; font-weight: 800; }
.a-po__skopf span { font-size: 12px; color: var(--leise); }
.a-po__tagkopf { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--terra); white-space: nowrap; }
.a-po__eintrag { position: relative; display: flex; gap: 9px; margin-top: 5px; }
.a-po__eintrag img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex: none; }
.a-po__ezeile { min-width: 0; flex: 1; padding-right: 14px; }
.a-po__zeitz { display: flex; align-items: center; gap: 4px; height: 15px; }
.a-po__zeitz b { font-size: 13px; font-weight: 800; margin-right: 3px; }
.a-po__zeitz > i { width: 6px; height: 6px; border-radius: 50%; background: var(--f); }
.a-po__ok { width: 13px; height: 13px; border-radius: 50%; background: var(--salbei); color: #fff; display: grid; place-items: center; margin-left: 2px; }
.a-po__ok svg { width: 9px; height: 9px; stroke-width: 3; }
.a-po__kanaele { font-size: 11px; color: var(--neben); line-height: 14px; white-space: nowrap; }
.a-po__auszug { font-size: 11px; color: var(--leise); line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-po__weg { position: absolute; right: -2px; top: 1px; width: 13px; height: 13px; color: var(--leise); }

/* ── Klebende Leiste: die zwei Wege hinaus ── */
.a-po__fuss { position: absolute; left: 24px; right: 22px; bottom: 6px; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 7px;
  border-radius: 14px; border: 1px solid var(--linie); background: var(--karte); box-shadow: 0 -4px 16px rgba(56, 36, 24, .07), 0 2px 6px rgba(56, 36, 24, .05); }
.a-po__fuss .a-knopf { height: 32px; }

/* Bewegung: die Bilder fallen in die Ablage, dann bekommen die Kanäle ihren Haken. */
@keyframes a-po-fallen { from { opacity: 0; transform: translateY(-26px) rotate(var(--r, 0deg)) scale(1.14); } }
@keyframes a-po-aus { from { color: #8C7E72; background-color: #EEE7E0; border-color: #DCD0C4; box-shadow: none; } }
.a-po.ist-aktiv .a-po__ablage img { animation: a-po-fallen .55s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 160ms); }
.a-po.ist-aktiv .a-po__kanal--an { animation: a-po-aus .35s ease-out both; animation-delay: calc(var(--i, 0) * 150ms + 620ms); }
.a-po.ist-aktiv .a-po__kanal--an svg { animation: a-plopp .4s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 150ms + 640ms); }

/* ═══ numbers ═══ */
/* Zahlen (lib/dashboard/dashboard_screen.dart): Band, Plattform-Pillen, Kennzahlen,
   Income-Verlauf mit Bestmonat-Stern (:3205-3322) und Monatsprognose (:1620-1780). */
.a-nu__mehr { width: 34px; height: 34px; display: grid; place-items: center; color: var(--text); }
.a-nu__mehr svg { width: 22px; height: 22px; transform: rotate(90deg); }

/* Band: bei dieser Fensterbreite teilt die App 4 : 6 (focus_band.dart:102) — der Satz bricht um. */
.a-nu .a-band__text { flex: 4 1 0; min-width: 0; }
.a-nu .a-band__titel { white-space: normal; line-height: 1.25; }
.a-nu .a-band__aktionen { flex: 6 1 0; }
.a-nu .a-band { margin-bottom: 12px; }

.a-nu__pillen { display: flex; gap: 7px; margin-bottom: 10px; }
.a-nu__pillen .a-ppille { height: 30px; }

/* Kennzahlen: dunkle Hero-Zahl links, zwei Papierkarten */
.a-nu__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 11px; }
.a-nu .a-nu__kpi { padding: 11px 16px 11px; border-radius: 16px; }
.a-nu .a-nu__kpi .a-kpi__icon { width: 26px; height: 26px; border-radius: 9px; }
.a-nu .a-nu__kpi .a-kpi__icon svg { width: 15px; height: 15px; }
.a-nu .a-nu__kpi .a-kpi__wert { margin-top: 6px; line-height: 1.05; }
.a-nu .a-nu__kpi .a-kpi__unter { margin-top: 2px; }

/* Unten: Verlauf links, Prognose rechts */
.a-nu__unten { display: grid; grid-template-columns: 415px 1fr; gap: 12px; }
.a-nu__karte { padding: 14px 18px 12px; display: flex; flex-direction: column; }
.a-nu__kkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.a-nu__kkopf b { font-size: 14px; font-weight: 800; white-space: nowrap; }
.a-nu__kkopf span { font-size: 11.5px; color: var(--neben); white-space: nowrap; }

/* Balken: Höhe = Wert / Bestwert (App: 120 px, hier höher, weil die Karte neben der Prognose höher ist), oben 6 px rund, ohne Achsen */
.a-nu__balken { flex: 1; display: flex; align-items: flex-end; min-height: 176px; margin-top: 10px; }
.a-nu__sp { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 0 3px; }
.a-nu__sp b { font-size: 10px; font-weight: 700; color: var(--text); margin-bottom: 3px; white-space: nowrap; }
.a-nu__sp i { display: block; width: 100%; height: calc(var(--h) * 158px); min-height: 3px; border-radius: 6px 6px 0 0; background: var(--erhoben); transform-origin: 50% 100%; }
.a-nu__sp span { font-size: 10px; letter-spacing: -.2px; color: var(--neben); margin-top: 6px; white-space: nowrap; }
.a-nu__sp--best i { background: var(--focus); }
.a-nu__stern { width: 18px; height: 18px; margin-bottom: 3px; border-radius: 50%; background: var(--focus); box-shadow: 0 0 6px rgba(147, 71, 42, .40);
  display: grid; place-items: center; color: #fff; }
.a-nu__stern svg { width: 12px; height: 12px; }

/* Prognose: dunkle Hero-Zahl in der Karte, darunter die Tabelle je Plattform */
.a-nu__held { margin-top: 9px; padding: 10px 16px 9px; border-radius: 16px; background: var(--focus); color: #fff; }
.a-nu__hl { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .70); }
.a-nu__held b { display: block; font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; margin-top: 3px; }
.a-nu__hs { font-size: 11.5px; color: rgba(255, 255, 255, .70); margin-top: 3px; white-space: nowrap; }
.a-nu__tab { margin-top: 8px; }
.a-nu__tk, .a-nu__tz { display: grid; grid-template-columns: 98px 60px 68px 132px 1fr; align-items: center; }
.a-nu__tk { font-size: 11px; font-weight: 600; color: var(--neben); padding-bottom: 5px; border-bottom: 1px solid var(--linie); margin-bottom: 2px; white-space: nowrap; }
.a-nu__tz { height: 22px; font-size: 12px; color: var(--neben); white-space: nowrap; }
.a-nu__pf { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; color: var(--text); }
.a-nu__tz b { font-size: 13px; font-weight: 800; color: var(--text); }
.a-nu__tz > span:nth-child(4) { font-size: 11.5px; }
.a-nu__tz em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--salbei); }
.a-nu__tz em.a-nu__minus { color: #A63A32; }

/* Bewegung: Balken wachsen gestaffelt von unten, die Werte kommen nach, der Stern ploppt auf. */
.ist-aktiv .a-nu__sp i { animation: a-wachsen-y .7s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i) * 55ms + 200ms); }
.ist-aktiv .a-nu__sp b { animation: a-ein .4s ease-out both; animation-delay: calc(var(--i) * 55ms + 560ms); }
.ist-aktiv .a-nu__stern { animation: a-plopp .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: 1.2s; }

/* ═══ maissage ═══ */
/* mA.I.ssage (lib/maissage/maissage_bereich.dart, inbox2_screen.dart, chatliste.dart,
   chatfenster.dart, antwort_karte2.dart, fan-spalte): Kärtchen OnlyFans | Fansly,
   Kopf mit Standzeile, Band, drei Spalten Fanliste · Chat · Fan-Akte. */
.a-ms { display: flex; flex-direction: column; }

/* Kärtchen OnlyFans | Fansly (plattform_kaertchen.dart) */
.a-ms__plattf { position: relative; z-index: 2; flex: none; display: flex; gap: 8px; margin-bottom: 7px; }
.a-ms__pk { display: inline-flex; align-items: center; gap: 7px; height: 29px; padding: 0 13px; border-radius: 10px; background: #fff; border: 1px solid rgba(51, 38, 31, .10);
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.a-ms__pk i { width: 8px; height: 8px; border-radius: 50%; background: var(--f); display: block; }
.a-ms__pk--an { background: color-mix(in srgb, var(--f) 28%, var(--grund)); border-color: var(--f); font-weight: 800; }

/* Kopf: Titel mit Standzeile, rechts Knöpfe */
.a-ms .a-kopf { flex: none; min-height: 53px; margin-bottom: 8px; }
.a-ms .a-motiv { top: -62px; }
.a-ms__titelzeile { display: flex; align-items: baseline; gap: 18px; }
.a-ms__stand { display: flex; gap: 14px; font-size: 12px; color: var(--neben); white-space: nowrap; }
.a-ms .a-kopf__rechts { padding-top: 10px; }
.a-ms__still { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--neben); white-space: nowrap; }
.a-ms__still svg { width: 15px; height: 15px; }
.a-ms__still--rund { width: 30px; padding: 0; justify-content: center; }
.a-ms__still--rund svg, .a-ms__quer { transform: rotate(90deg); }

/* Band: Titel zweizeilig, damit die vier Zähler daneben Platz haben */
.a-ms .a-band { flex: none; min-height: 0; padding: 10px 22px; margin-bottom: 12px; }
.a-ms .a-band__titel { white-space: normal; max-width: 355px; line-height: 1.22; }
.a-ms .a-band__aktionen { gap: 6px; }
.a-ms .a-bchip { gap: 6px; padding: 0 10px; }

/* Drei Spalten */
.a-ms__spalten { flex: 1; min-height: 0; display: grid; grid-template-columns: 268px minmax(0, 1fr) 244px; gap: 12px; margin-bottom: 10px; }
.a-ms__liste, .a-ms__chat, .a-ms__akte { min-height: 0; overflow: hidden; }
.a-ms__ico { width: 16px; height: 16px; color: var(--neben); }

/* 1 · Fanliste (chatliste.dart) */
.a-ms__liste { display: flex; flex-direction: column; padding: 12px 10px 0; }
.a-ms__suchzeile { display: flex; align-items: center; gap: 9px; padding: 0 3px 0 2px; }
.a-ms__suche { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1px solid var(--linie);
  font-size: 12px; color: var(--leise); white-space: nowrap; }
.a-ms__suche svg { width: 14px; height: 14px; color: var(--text); }
.a-ms__reiter { display: flex; flex-wrap: wrap; gap: 5px 5px; margin: 9px 2px 6px; }
.a-ms__reiter > span { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 20px; border: 1px solid rgba(51, 38, 31, .12);
  font-size: 11.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.a-ms__reiter > span.an { border-color: transparent; background: linear-gradient(135deg, #93472A, #B08240); color: #fff; font-weight: 800;
  box-shadow: 0 3px 10px -3px rgba(147, 71, 42, .45); }
.a-ms__fans { flex: 1; min-height: 0; overflow: hidden; }
.a-ms__fan { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px 11px 8px; border-radius: 14px; }
.a-ms__fan + .a-ms__fan::before { content: ""; position: absolute; left: 60px; right: 8px; top: 0; height: 1px; background: var(--linie-fein); }
.a-ms__fan--an + .a-ms__fan::before { display: none; }
.a-ms__fan--an { background: linear-gradient(90deg, #302431 0%, #4A2D2D 52%, #68402E 100%); box-shadow: 0 8px 20px -8px rgba(147, 71, 42, .45); }
.a-ms__av { position: relative; flex: none; width: 42px; height: 42px; padding: 2px; border-radius: 14px; border: 2px solid transparent; }
.a-ms__av--abo { border-color: var(--salbei); }
.a-ms__av i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; font-style: normal; font-size: 13.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 62%, #E9C9A6)); }
.a-ms__pl { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 1px 5px; border-radius: 8px; font-size: 10px; line-height: 1.2; font-weight: 800; white-space: nowrap;
  background: var(--karte); color: var(--neben); border: 1px solid rgba(51, 38, 31, .14); box-shadow: 0 1px 4px rgba(0, 0, 0, .10); }
.a-ms__pl--an { background: #fff; color: var(--terra); border-color: transparent; }
.a-ms__pl--top { background: var(--terra); color: #fff; border-color: transparent; }
.a-ms__pl--guter { background: var(--salbei); color: #fff; border-color: transparent; }
.a-ms__pl--kaeufer { color: var(--salbei); border-color: color-mix(in srgb, var(--salbei) 45%, transparent); }
.a-ms__ft { flex: 1; min-width: 0; padding-top: 2px; }
.a-ms__name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.a-ms__name span { font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-ms__name--gelesen span { font-weight: 600; color: var(--neben); }
.a-ms__name--aus span { font-weight: 300; color: var(--neben); }
.a-ms__name em { font-style: normal; font-size: 10.5px; letter-spacing: -1px; white-space: nowrap; }
.a-ms__renew { width: 12px; height: 12px; color: color-mix(in srgb, var(--salbei) 85%, transparent); }
.a-ms__name .a-ms__marke { letter-spacing: 0; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--terra) 12%, transparent); color: var(--terra); }
.a-ms__name .a-ms__marke--grau { background: rgba(51, 38, 31, .08); color: var(--neben); }
.a-ms__vz { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.a-ms__vt { flex: 1; min-width: 0; font-size: 12px; color: var(--neben); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-ms__vt b { font-weight: 800; color: var(--neben); }
.a-ms__vt--neu { color: var(--terra); font-weight: 700; }
.a-ms__vz small { flex: none; font-size: 11px; color: var(--neben); white-space: nowrap; }
.a-ms__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #93472A, #B08240); box-shadow: 0 0 7px rgba(147, 71, 42, .7); }
.a-ms__fan--an .a-ms__name span, .a-ms__fan--an .a-ms__vt { color: #fff; }
.a-ms__fan--an .a-ms__vz small { color: rgba(255, 255, 255, .85); }
.a-ms__fan--an .a-ms__dot { background: #fff; box-shadow: none; }
.a-ms__fan--an .a-ms__renew { color: #BFD6B0; }

/* 2 · Chat (chatfenster.dart, antwort_karte2.dart) */
.a-ms__chat { display: flex; flex-direction: column; }
.a-ms__chatkopf { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--linie); }
.a-ms__chatkopf .a-ms__ico:last-child { margin-left: 4px; }
.a-ms__cav { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, #93472A, #C87B52); }
.a-ms__ck { flex: 1; min-width: 0; }
.a-ms__ck b { display: block; font-size: 14px; }
.a-ms__ck span { display: block; font-size: 11.5px; color: var(--neben); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-ms__verlauf { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 4px 16px 7px; }
.a-ms__tag { align-self: center; font-size: 11px; color: var(--neben); }
.a-ms__verlauf > * { flex: none; }
.a-ms__ppv { align-self: flex-end; width: 176px; border-radius: 15px; overflow: hidden; background: #fff; border: 1px solid color-mix(in srgb, #A8482A 45%, transparent); }
.a-ms__ppvbild { position: relative; aspect-ratio: 16 / 9; }
.a-ms__ppvbild img { width: 100%; height: 100%; object-fit: cover; }
.a-ms__ppvbild::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.a-ms__dauer { position: absolute; z-index: 1; top: 6px; right: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .68); color: #fff; font-size: 10.5px; }
.a-ms__ppvlabel { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: #33261F; color: #fff; font-size: 11px; font-weight: 700; }
.a-ms__ppvlabel svg { width: 13px; height: 13px; }
.a-ms__ppvtext { padding: 6px 11px 6px; font-size: 12px; line-height: 1.35; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-ms__ppvtext small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--neben); }
.a-ms__ppvoffen { padding: 5px 11px; background: color-mix(in srgb, #A8482A 12%, #fff); color: #A8482A; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.a-ms__blase { align-self: flex-start; max-width: 300px; padding: 7px 11px 6px; border-radius: 15px 15px 15px 5px; background: #fff; border: 1px solid var(--linie);
  box-shadow: 0 4px 14px -6px rgba(51, 38, 31, .16); font-size: 12.5px; line-height: 1.38; }
.a-ms__blase small { display: block; margin-top: 2px; font-size: 10px; color: var(--neben); }
.a-ms__vorschlag { flex: none; border-top: 1px solid var(--linie); padding: 7px 14px 10px; }
.a-ms__vkopf { font-size: 10px; font-weight: 800; letter-spacing: 1.3px; color: var(--neben); }
.a-ms__emojis { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.a-ms__emojis span { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; word-spacing: 3px; white-space: nowrap; overflow: hidden; }
.a-ms__emojis svg { width: 16px; height: 16px; color: var(--neben); }
.a-ms__vtext { display: block; }
.a-ms__feld { margin-top: 5px; height: 46px; padding: 6px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--linie); font-size: 12.5px; line-height: 1.38; color: var(--text); overflow: hidden; }
.a-ms__werkzeug { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.a-ms__gruppe { display: flex; gap: 1px; padding: 2px; border-radius: 10px; border: 1px solid #E2C7B5; background: rgba(147, 71, 42, .065); }
.a-ms__gruppe > span { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 5px; border-radius: 8px; font-size: 11px; font-weight: 500; color: var(--text); white-space: nowrap; }
.a-ms__gruppe svg { width: 12px; height: 12px; color: var(--terra); }
/* Tonstrich am Gruppenanfang (antwort_karte2.dart _gruppe: 2 × 15, 55 %) */
.a-ms__gruppe::before { content: ""; flex: none; align-self: center; width: 2px; height: 15px; margin: 0 2px 0 4px; border-radius: 2px; background: color-mix(in srgb, var(--terra) 55%, transparent); }
.a-ms__gruppe--petrol::before { background: color-mix(in srgb, var(--petrol) 55%, transparent); }
.a-ms__gruppe--petrol { border-color: #BFD3CF; background: rgba(63, 107, 102, .065); }
.a-ms__gruppe--petrol svg { color: var(--petrol); }
.a-ms__senden { margin-left: auto; height: 30px; box-shadow: 0 6px 14px -6px rgba(79, 98, 67, .6); }

/* 3 · Fan-Akte (fan-spalte, l10n/maissage_fan.dart) */
.a-ms__akte { padding: 12px 12px 0; }
.a-ms__fav { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto; border-radius: 13px; font-style: normal; font-weight: 800; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, #93472A, #C87B52); }
.a-ms__fname { text-align: center; font-size: 14px; font-weight: 800; margin-top: 5px; }
.a-ms__fhandle { text-align: center; font-size: 11px; color: var(--neben); }
.a-ms__pillen { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.a-ms__pillen span { height: 21px; padding: 0 9px; border-radius: 11px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; white-space: nowrap; }
.a-ms__pg { background: var(--salbei-hell); color: var(--salbei); }
.a-ms__pt { background: var(--terra-hell); color: var(--terra); }
.a-ms__freiter { display: flex; justify-content: space-between; margin: 9px -12px 0; padding: 0 8px; border-bottom: 1px solid var(--linie); }
.a-ms__freiter span { padding: 4px 1px 6px; font-size: 10.5px; font-weight: 600; color: var(--neben); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.a-ms__freiter .an { color: var(--text); font-weight: 800; border-bottom-color: var(--terra); }
.a-ms__abschnitt { margin-top: 10px; }
.a-ms__summe { display: inline-flex; flex-direction: column; margin-top: 6px; padding: 8px 12px 8px; border-radius: 12px; color: #FFF5E9;
  background: linear-gradient(135deg, #93472A 0%, #C1663F 50%, #B08240 100%); box-shadow: 0 8px 18px -8px rgba(130, 60, 30, .45); }
.a-ms__summe span { font-size: 10.5px; font-weight: 700; }
.a-ms__summe b { font-size: 21px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.a-ms__summe small { font-size: 10px; opacity: .88; white-space: nowrap; }
.a-ms__teile { margin-top: 7px; padding: 7px 10px 8px; border-radius: 12px; border: 1px solid var(--linie); background: #fff; }
.a-ms__davon { font-size: 10.5px; color: var(--neben); }
.a-ms__ring-zeile { display: flex; align-items: center; gap: 11px; margin-top: 3px; }
.a-ms__ring { flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 17px, transparent 17.5px),
    conic-gradient(#93472A 0 56.25%, #B08240 56.25% 75%, #4F6243 75% 83.33%, #4E6675 83.33% 87.5%, #7E5A22 87.5% 100%); }
.a-ms__legende { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; }
.a-ms__legende div { display: flex; align-items: center; gap: 5px; line-height: 13.5px; }
.a-ms__legende i { flex: none; width: 7px; height: 7px; border-radius: 2px; }
.a-ms__legende span { white-space: nowrap; }
.a-ms__legende b { margin-left: auto; font-weight: 800; }
.a-ms__gefuehl { margin-top: 8px; font-size: 11px; color: var(--neben); }
.a-ms__gefuehl b { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 800; color: var(--text); white-space: nowrap; }
.a-ms__daten { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.a-ms__daten div { display: flex; justify-content: space-between; gap: 8px; }
.a-ms__daten span { color: var(--neben); }
.a-ms__daten b { font-weight: 700; white-space: nowrap; }

/* Bewegung: der Vorschlag blendet ein, danach hebt sich „Passt – absenden" einmal. */
@keyframes a-ms-vorschlag { from { opacity: 0; transform: translateY(4px); } }
@keyframes a-ms-heben { from { transform: translateY(3px); box-shadow: 0 0 0 rgba(79, 98, 67, 0); } }
.ist-aktiv .a-ms__vtext { animation: a-ms-vorschlag .6s cubic-bezier(.22, .61, .36, 1) .55s both; }
.ist-aktiv .a-ms__senden { animation: a-ms-heben .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }

/* ═══ todos ═══ */
/* To-dos (lib/todos/todos_screen.dart): Custom-Aufträge aus den Chats, eine Karte je Auftrag. */
/* Kopfzeichen wie in der App (focus_page_header.dart: Stack schneidet am Kopf ab):
   sichtbar ist das Häkchen-Kästchen mit den zwei Zeilen daneben, nicht die unteren Striche. */
.a-td .a-motiv--gross { top: -70px; clip-path: inset(0 0 75px 0); }
.a-td__reiter { display: flex; gap: 8px; }
.a-td__sicht { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.a-td__zahl { font-size: 12.5px; color: var(--neben); margin-right: 6px; }
.a-td__liste { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.a-td__karte { padding: 13px 16px 12px; }
.a-td__kopf { display: flex; align-items: center; gap: 10px; }
.a-td__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; }
.a-td__plattform { font-size: 11px; color: var(--neben); }
/* Fristzeile (todos_screen.dart _frist): Farbe als 14 %-Tönung, Text kräftig. */
.a-td__frist { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 9px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--leise); }
.a-td__frist--rot { background: color-mix(in srgb, var(--rot) 14%, var(--karte)); color: #A63A32; }
.a-td__frist--ocker { background: color-mix(in srgb, #B98C42 18%, var(--karte)); color: var(--ocker); }
.a-td__text { margin: 7px 0 0; font-size: 13px; line-height: 1.42; color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.a-td__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px; font-size: 12px; color: rgba(51, 38, 31, .65); white-space: nowrap; }
.a-td__aktionen { display: flex; align-items: center; gap: 22px; margin-top: 10px; }
/* OutlinedButton der App (focus_appearance.dart): Radius 10, Schrift 500. */
.a-td__details { gap: 6px; font-weight: 500; padding: 0 11px 0 8px; border-radius: 10px; }
.a-td__details svg { width: 14px; height: 14px; }
.a-td__tk { font-size: 12.5px; font-weight: 600; gap: 7px; }
.a-td__tk svg { width: 15px; height: 15px; }
.a-td__kreis { width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid currentColor; display: grid; place-items: center; font-style: normal; }
.a-td__kreis svg { width: 10px; height: 10px; stroke-width: 2.6; }
.a-td__weg { width: 16px; height: 16px; color: rgba(51, 38, 31, .45); margin-left: 2px; }

/* Bewegung: Karten gleiten gestaffelt ein, danach ploppt die überfällige Frist. */
@keyframes a-td-gleiten { from { opacity: 0; transform: translateX(22px); } }
.ist-aktiv .a-td__karte { animation: a-td-gleiten .6s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 140ms); }
.ist-aktiv .a-td__frist--rot { animation: a-plopp .45s cubic-bezier(.22, .61, .36, 1) both; animation-delay: .72s; }

/* ═══ sales ═══ */
/* Verkauft / Sales (lib/verkauft/verkauft_screen.dart): Kopf ohne Band, Zeitraum-Zeile mit
   Stand und Aktualisieren, drei Kopfzahlen, Sortier-Chips, Karten je Massennachricht,
   Fußnote fest unten. Die Liste scrollt in der App — hier endet sie angeschnitten. */
.a-sa { display: flex; flex-direction: column; }
.a-sa > * { flex: none; }
/* Das Preisschild steht in der App ganz sichtbar rechts neben dem Titel (Screenshot 2),
   nur die Öse oben angeschnitten — bei der gemeinsamen Lage wäre nur sein unterer Rand da. */
.a-sa .a-motiv--gross { top: -86px; left: 176px; }
.a-sa .a-kopf { margin-bottom: 10px; }
.a-sa__leiste { display: flex; align-items: center; gap: 6px; }
.a-sa__stand { margin-left: auto; margin-right: 4px; font-size: 11.5px; color: var(--neben); white-space: nowrap; }
.a-sa__hol { height: 32px; padding: 0 16px; }

/* Kopfzahlen: dieselbe helle Kachel wie im Dashboard (_zahlkarte) */
.a-sa__kpis { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.a-sa__kpi { flex: 1 1 0; min-width: 0; padding: 12px 14px; }
.a-sa__kt { font-size: 12px; font-weight: 600; color: var(--neben); white-space: nowrap; }
.a-sa__kw { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; margin-top: 8px; white-space: nowrap; }
.a-sa__ku { font-size: 11px; color: var(--neben); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.a-sa__sort { display: flex; gap: 6px; margin-top: 10px; }

/* Liste: endet unten weich, wie eine scrollende Liste */
.a-sa__liste { flex: 1 1 auto; min-height: 0; overflow: hidden; margin-top: 10px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.a-sa__karte { padding: 14px 16px; margin-bottom: 10px; }
.a-sa__kopf { display: flex; align-items: center; }
.a-sa__bild { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; margin-right: 12px; flex: none; background: var(--erhoben); }
.a-sa__bild img { width: 100%; height: 100%; object-fit: cover; }
.a-sa__bundle { width: 16px; height: 16px; margin-right: 6px; color: var(--neben); }
.a-sa__titel { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-sa__meta { margin-left: 8px; font-size: 11.5px; color: var(--neben); white-space: nowrap; }
.a-sa__chev { width: 18px; height: 18px; margin-left: 6px; color: var(--neben); }

/* Sechs Kennzahlen: Beschriftung klein über dem Wert (_kennzahlen) */
.a-sa__kz { display: flex; gap: 20px; margin-top: 8px; }
.a-sa__kz > div { display: flex; flex-direction: column; }
.a-sa__kz span { font-size: 10.5px; color: var(--neben); white-space: nowrap; }
.a-sa__kz b { font-size: 13px; font-weight: 800; margin-top: 1px; white-space: nowrap; }

.a-sa__fuss { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--neben); }
.a-sa__nach { font-size: 12px; font-weight: 500; }
.a-sa__nach--aus { color: rgba(51, 38, 31, .36); border-color: rgba(51, 38, 31, .10); background: transparent; }

.a-sa__fussnote { padding: 4px 0 12px; font-size: 11.5px; color: var(--neben); }

/* Bewegung: Karten gleiten ein (a-anim-auf), Kennzahlen blenden gestaffelt ein */
.ist-aktiv .a-sa__kz > div { animation: a-ein .45s ease-out both; animation-delay: calc(var(--i, 0) * 70ms + var(--k, 0) * 60ms + 380ms); }