und kein Raster aus :
die Spaltenbreiten sollen sich am Inhalt ausrichten, der Kopf soll als Kopf
vorgelesen werden, und „sortiert nach" ist ein Zustand, für den HTML schon
ein Attribut hat (aria-sort). */
.ltab{width:100%;border-collapse:collapse;font-size:13.5px}
/* Der Kopf bleibt beim Scrollen stehen. Hier geht das ohne Umstände, weil die
Liste KEIN eigener Scrollbereich ist: sie scrollt mit der Seite, und in der
Seite hat ein klebender Tabellenkopf allen Weg der Welt. Genau das, was dem
Board in seinem eigenen Bereich fehlt. */
.ltab thead th{position:sticky;top:var(--kopfhoehe,0px);z-index:3;background:var(--paper);
text-align:left;font-weight:600;color:var(--ink-2);font-size:12px;
padding:0;border-bottom:1px solid var(--line)}
.lsort{display:flex;align-items:center;gap:5px;width:100%;border:0;background:none;
font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);
padding:9px 10px;cursor:pointer;text-align:left;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.lsort:hover{color:var(--ink);background:var(--fill-2)}}
.lsort.an{color:var(--accent)}
.lpfeil{font-size:10px;line-height:1}
.lsort:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lrow{border-bottom:1px solid var(--line-2);cursor:pointer}
.lrow td{padding:8px 10px;vertical-align:middle}
@media (hover:hover) and (pointer:fine){.lrow:hover{background:var(--fill-2)}}
/* Erledigtes bleibt lesbar, tritt aber zurück — durchgestrichen wäre bei
einer ganzen Zeile zu viel. */
.lrow.done .ltext{color:var(--ink-3)}
.lrow--kind td{padding-top:5px;padding-bottom:5px;background:var(--fill)}
.lrow--kind .ltext{font-size:12.5px;color:var(--ink-2)}
.leinzug{color:var(--ink-3);margin-right:7px}
.ltitel{min-width:220px}
.ltext{overflow-wrap:anywhere}
.ltags{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:8px;vertical-align:middle}
.lkurz{white-space:nowrap;width:1%}
.lsel{width:1%;padding-right:0}
/* Die Hülle und nicht die Zelle wird zum Flex-Kasten: display:flex auf einem
nimmt die Zelle aus dem Tabellenlayout, und dann richten sich die
Spalten nicht mehr aneinander aus. */
.lwerin{display:flex;align-items:center;gap:7px;white-space:nowrap}
.lleer{color:var(--ink-3)}
.ldot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.ldat{font-variant-numeric:tabular-nums}
.ldat--spaet{color:var(--prio-krit);font-weight:600}
/* Dieselben Farben wie die Punkte auf den Karten — eine Priorität darf nicht
in zwei Ansichten verschieden aussehen. */
.lprio{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:100px;
background:var(--fill-2);color:var(--ink-2)}
.lprio[data-p="kritisch"]{background:var(--prio-krit-bg);color:var(--prio-krit)}
.lprio[data-p="hoch"]{background:var(--prio-hoch-bg);color:var(--prio-hoch)}
.lfuss{margin:12px 2px 0;font-size:12px;color:var(--ink-3)}
/* ---- Meine Reihenfolge (Fassung 57) ----
Die Leiste über der Tabelle trennt zwei Dinge, die leicht verwechselt
werden: die Spaltenköpfe SORTIEREN (nach Frist, nach Art), der Knopf hier
ORDNET (von Hand, nur für mich). Deshalb steht er außerhalb der Tabelle
und sieht nicht wie ein Spaltenkopf aus. */
.lleiste{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 2px 10px}
.btn--mini{padding:5px 10px;font-size:12.5px;gap:6px}
.btn--mini.an{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--still{background:none;border-color:transparent;color:var(--ink-3);text-decoration:underline}
@media (hover:hover) and (pointer:fine){.btn--still:hover{color:var(--ink-2)}}
.lhinweis{font-size:12px;color:var(--ink-3);flex:1 1 220px;min-width:0}
.lgriff{width:1%;padding-right:0 !important;padding-left:6px !important}
.zgriff{display:flex;align-items:center;justify-content:center;width:22px;height:26px;
border:0;background:none;padding:0;cursor:grab;color:var(--ink-3);border-radius:5px}
.zgriff svg{fill:currentColor}
@media (hover:hover) and (pointer:fine){.zgriff:hover{color:var(--ink);background:var(--fill-2)}}
.zgriff:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.zgriff:active{cursor:grabbing}
/* Aufgenommen: die Zeile wartet auf ihren Platz. Kräftig genug, dass man im
Vorbeiscrollen sieht, dass noch etwas offen ist. */
.zgriff.auf{color:#fff;background:var(--accent)}
.lrow.zieht{opacity:.45}
/* Die Einfügemarke ist ein Rand an der Zelle, nicht an der Zeile: einen Rahmen
auf ein | zu legen zeichnet border-collapse nicht verlässlich. */
.lrow.ueber-oben > td{box-shadow:inset 0 2px 0 var(--accent)}
.lrow.ueber-unten > td{box-shadow:inset 0 -2px 0 var(--accent)}
/* Beim Ordnen zählt die Reihenfolge, nicht die Sortierrichtung — die Pfeile in
den Köpfen wären hier eine Lüge. */
.ltab--mein thead .lpfeil{display:none}
.leerhinweis{margin:22px 2px;font-size:13.5px;color:var(--ink-2)}
/* Am Telefon fallen die Spalten weg, die man dort nicht lesen kann, ohne quer
zu scrollen. Übrig bleibt, was eine Zeile ausmacht: was es ist, wo es steht,
wann es fällig ist. Quer scrollen zu müssen, um eine Liste zu lesen, ist
schlimmer als eine kürzere Liste. */
@media (max-width:760px){
.ltab{font-size:13px}
/* Nach Namen und nicht nach Position: eine Spalte links davor — das
Auswahlkästchen, der Griff — verschiebt jede Zählung. Bis Fassung 56
stand hier nth-child(7), und als die Art dazukam, verschwand auf dem
Telefon nicht mehr der geplante Tag, sondern die Frist. */
.ltab .lc-wer,.ltab .lc-plan{display:none}
.lrow td{padding:9px 7px}
.ltags{display:none}
}
@media print{
.ltab thead th{position:static}
.lrow{break-inside:avoid}
}
/* ---- Art der Arbeit (Fassung 56) ----
Eine eigene, zurückhaltende Farbe je Art. Zurückhaltend mit Absicht: die
Art ist eine Einordnung und keine Warnung — Rot und Violett sind für die
Priorität vergeben und dürfen hier nicht noch einmal auftauchen, sonst
bedeutet dieselbe Farbe zwei Dinge. */
.chip--art{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.chip--art i{font-style:normal;font-size:11px;line-height:1}
.chip--art[data-a="anruf"]{background:#E8F0EC;color:#1E6B45}
.chip--art[data-a="rueckfrage"]{background:#FDF3E2;color:#8A6410}
.chip--art[data-a="mail"]{background:#E7EEF6;color:#12467A}
.chip--art[data-a="handlung"]{background:var(--fill-2);color:var(--ink-2)}
.lart{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
padding:2px 8px;border-radius:100px;background:var(--fill-2);color:var(--ink-2);white-space:nowrap}
.lart i{font-style:normal;font-size:10.5px;line-height:1}
.lart[data-a="anruf"]{background:#E8F0EC;color:#1E6B45}
.lart[data-a="rueckfrage"]{background:#FDF3E2;color:#8A6410}
.lart[data-a="mail"]{background:#E7EEF6;color:#12467A}
/* Gruppenüberschrift in der Liste: eine Zeile, die zählt. */
.lgruppe td{padding:14px 10px 6px;border-bottom:1px solid var(--line);background:var(--paper)}
.lgruppe:first-child td{padding-top:4px}
.lgname{font-size:12.5px;font-weight:650;color:var(--ink)}
.lgzahl{font-size:11.5px;color:var(--ink-3);margin-left:9px}
/* ======================= Eine Zeile für alles (Fassung 56) ================
Ansichtswahl, Neue Aufgabe, Suche, Sortierung, Filter — und rechts die
Werkzeuge. Vorher zwei Zeilen; über einem Board, das um jeden Pixel
kämpft, ist eine davon zu viel.
Der Preis: es wird eng. Deshalb fallen die Wörter an den Werkzeugknöpfen
schon ab 1200 Pixel weg und nicht erst am Telefon — ein Symbol mit Titel
ist verständlicher als eine Leiste, die in drei Zeilen umbricht. */
/* EINE Breite für alle Seiten (Fassung 61).
Bis Fassung 60 war die Board-Seite breiter als Dashboard, Boards und
„Meine Liste" — 1680 gegen 1340. Das hatte zwei Gründe, und beide waren
in dieser Form falsch.
Der erste: die Werkzeugzeile passe nicht in 1340. Das stimmte, war aber
kein Breitenproblem, sondern eine falsch gefüllte Zeile; seit Fassung 60
braucht sie 901 Pixel. Der zweite: die Spalten brauchen Platz. Der stimmt
weiter.
Was ich dabei nicht abgewogen habe: Beim Wechsel ins Board sprang die
GANZE Seite um 170 Pixel nach außen — Kopfleiste, Titel, Kennzahlen,
alles. Ein Rahmen, der je nach Seite woanders steht, ist kein Rahmen.
Also: der Rahmen ist überall gleich. Nur der Spaltenbereich darf
darüber hinausragen, und zwar symmetrisch nach beiden Seiten. Alles, was
auf allen Seiten vorkommt, bleibt damit an derselben Stelle stehen —
und die Spalten haben trotzdem ihren Platz. */
/* Ein erster Versuch ließ nur den Spaltenbereich über den Rahmen
hinausragen. Gemessen stimmte das — Rahmen überall gleich, Spalten
breiter. Angesehen war es falsch: die erste Spalte begann LINKS vom
Seitentitel, und die Werkzeugzeile, die zum Board gehört, stand
eingerückt daneben. Das liest sich nicht als Absicht, sondern als
Verrutschen. Dass eine Messung stimmt, heißt nicht, dass es gut
aussieht — dafür muss man hinsehen.
Also der andere Weg: EINE Breite, und die Spalten bekommen ihren Platz
dadurch, dass sie etwas schmaler sein dürfen. Siehe .colm. */
.toolbar--eins{padding:14px 0 10px;gap:8px 10px}
/* Die Ansichtswahl bleibt am Schreibtisch immer sichtbar: Die Zeile klebt
direkt unter der (ebenfalls klebenden) Kopfleiste, auch wenn die Seite
scrollt. Am Telefon (<900px) führt stattdessen das Spaltenband unter der
Kopfleiste — dort NICHT kleben, sonst stünden beide im selben Band. (F121) */
@media (min-width:900px){
#viewrow{position:sticky;top:var(--kopfhoehe,0px);z-index:60;
background:var(--paper);box-shadow:0 1px 0 var(--line)}
}
.toolbar--eins .seg--view{flex:none}
.toolbar--eins #q{min-width:120px}
.flabel--sort{margin-left:2px}
.toolbar--eins select{max-width:170px}
/* Nachgemessen: die Zeile BRAUCHT 1796 Pixel mit allen Wörtern und hat auf
einem 1600er Schirm 1544. Also müssen vier Wörter weichen, sonst wird aus
der einen Zeile wieder eine zweite — und darum ging es ja gerade.
Die Werkzeuge rechts verlieren sie und nicht die Ansichtswahl links: ihre
Symbole stehen seit jeher auch am Telefon allein, sie sind an derselben
Stelle wie bisher, und jeder trägt seinen Titel. Ab 1900 Pixel ist Platz
genug, dann stehen die Wörter wieder da. */
.toolbar--eins .btn--tool .btxt{display:none}
.toolbar--eins .btn--tool{padding-left:10px;padding-right:10px}
@media (min-width:1900px){
.toolbar--eins .btn--tool .btxt{display:inline}
.toolbar--eins .btn--tool{padding-left:15px;padding-right:15px}
}
@media (max-width:900px){
/* Am Telefon darf sie umbrechen: dort ist Breite knapper als Höhe, und die
Ansichtswahl soll ganz sichtbar bleiben. */
/* Die alte Werkzeugleiste stand am Telefon auf „nowrap": sie hatte wenig
Inhalt und sollte in einer Zeile bleiben. Mit der Ansichtswahl darin ist
das falsch — alles hinter den Reitern schöbe sich aus dem Bild, und zwar
lautlos. Hier also wieder umbrechen lassen: erste Zeile die Reiter,
zweite Zeile Suche, Sortierung und Werkzeuge. */
.toolbar--eins{gap:8px;flex-wrap:wrap}
.toolbar--eins .seg--view{order:-1;width:100%;overflow-x:auto;scrollbar-width:none}
.toolbar--eins .seg--view::-webkit-scrollbar{display:none}
.toolbar--eins .flabel--sort{display:none}
}
/* ---------- Arbeit abnehmen (Fassung 59) ----------
Die Begründung steht als Knöpfe da und nicht nur als leeres Feld: fünf
Sätze decken den Großteil ab, und ein Klick ist leichter als ein Satz,
den man sich erst ausdenken muss. */
.abgruende{display:flex;flex-wrap:wrap;gap:7px;padding-top:4px}
.abgrund{font:inherit;font-size:12.5px;padding:6px 11px;border:1px solid var(--line);
border-radius:100px;background:var(--paper);color:var(--ink-2);cursor:pointer;text-align:left}
@media (hover:hover) and (pointer:fine){.abgrund:hover{border-color:var(--accent);color:var(--ink)}}
.abgrund.an{background:var(--accent);border-color:var(--accent);color:#fff}
.abgrund:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Eine Anfrage hängt unter ihrem Entwurf und ist eingerückt — sie gehört
zur Zeile darüber und ist keine eigene Aufgabe. */
.abzeile{grid-column:1/-1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
margin:6px 0 2px 26px;padding:8px 12px;font-size:13px;
background:var(--accent-soft);border-radius:var(--r-m)}
.abtext{flex:1 1 220px;min-width:0;color:var(--ink-2)}
.abwarum{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;overflow-wrap:anywhere}
@media (max-width:760px){.abzeile{margin-left:0}}
/* ---------- Vorgaben zur Arbeitsweise (Fassung 59) ----------
Jede Vorgabe bekommt drei Zeilen Text: was sie tut, wann sie greift, und
was gerade gilt. Das ist viel für einen Schalter — aber eine Vorgabe,
deren Wirkung man raten muss, ist schlimmer als keine. Und „Gilt hier"
mit der Herkunft daneben ist der Ersatz für die Spur, die ein Regelwerk
gebraucht hätte. */
.vorgabenliste{display:flex;flex-direction:column;gap:2px}
.vorgabe{padding:12px 0;border-top:1px solid var(--line-2)}
.vorgabe:first-child{border-top:0;padding-top:4px}
.vkopfz{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vlab{font-size:14px;font-weight:600;color:var(--ink);flex:1 1 220px;min-width:0}
.vkopfz select{max-width:260px}
.vcheck{margin:0}
.vzurueck{font-size:12px}
.vwas{margin:5px 0 0;font-size:12.5px;color:var(--ink-2)}
.vwann{margin:2px 0 0;font-size:12px;color:var(--ink-3)}
.vgilt{margin:6px 0 0;font-size:12px;color:var(--ink-2);
background:var(--fill);border-radius:var(--r-s);padding:5px 9px;display:inline-block}
.vgilt b{font-weight:600}
@media (max-width:760px){
.vkopfz{align-items:flex-start}
.vlab{flex:1 1 100%}
}
/* ---------- Erklärung beim Verweilen (Fassung 60) ----------
Der eingebaute title des Browsers kann das nicht: eine Zeile, Systemschrift,
keine Absätze, nicht gestaltbar. Also ein eigenes kleines Fenster — Titel,
dann zwei bis drei kurze Sätze, so wie in der Hilfe. Es erscheint erst nach
längerem Verweilen; wer weiß, wo er hinklickt, sieht es nie. */
.tipp{position:fixed;z-index:9000;max-width:300px;pointer-events:none;
background:var(--ink);color:#fff;border-radius:var(--r-m);padding:10px 13px;
box-shadow:0 10px 30px rgba(0,0,0,.22);animation:tippauf .13s ease-out}
.tippt{font:650 13px/1.3 var(--f)}
.tippx{margin-top:5px;font:400 12.5px/1.5 var(--f);color:rgba(255,255,255,.82)}
@keyframes tippauf{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tipp{animation:none}}
/* Auf Berührungsgeräten gibt es kein Verweilen — dort wäre das Fenster nur
ein Schatten, der nach jedem Tippen kurz aufblitzt. */
@media (hover:none){.tipp{display:none}}
/* ---------- Nur Symbole (Fassung 60) ----------
Die Umstellung läuft über EIN Attribut am : data-wort="aus" blendet
alle Beschriftungen weg, data-wort="an" zeigt sie. Es wird schon beim
ersten Bild gesetzt, aus dem, was der Server mitliefert — sonst stünde die
Kopfleiste einen Augenblick mit Wörtern da und zuckte dann zusammen. */
html[data-wort="aus"] .crumbwort,
html[data-wort="aus"] .vwort,
html[data-wort="aus"] .btxt,
html[data-wort="aus"] .kontoname,
html[data-wort="aus"] .brand .product{display:none}
html[data-wort="aus"] .crumb{padding-left:10px;padding-right:10px}
html[data-wort="aus"] .seg--view button{padding-left:11px;padding-right:11px}
/* Die Werkzeuge des Boards stehen im Kopf, nicht in der Werkzeugzeile:
oben, was dem BOARD gehört, unten, was der ANSICHT gehört. */
.boardwerk{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crumb svg,.seg--view button svg{flex:0 0 auto}
.crumb{display:inline-flex;align-items:center;gap:7px}
.seg--view button{display:inline-flex;align-items:center;gap:7px}
.crumb--aus{color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.crumb--aus:hover{color:var(--prio-krit)}}
/* Am Telefon zählt jede Zeile doppelt: dort immer nur die Symbole. */
@media (max-width:900px){
.crumbwort,.vwort,.btxt,.kontoname{display:none}
}
/* ---------- Die Kästen sagen, wofür sie da sind (Fassung 61) ----------
Acht Kästen, die alle gleich aussehen, zwingen zum Lesen: man muss jede
Überschrift entziffern, um zu wissen, was da steht. Dabei tun sie dreierlei
— zeigen, was BEI MIR liegt; zeigen, WIE ES STEHT; etwas ANBIETEN.
Zwei Mittel, beide vor dem Lesen wirksam: das Symbol bekommt einen
getönten Kreis in der Farbe der Art, und ein schmaler Streifen am oberen
Rand nimmt dieselbe Farbe auf. Dazu eine Zeile unter der Überschrift, die
in sechs Worten sagt, welche Frage der Kasten beantwortet.
Die Farben sind bewusst gedämpft: drei kräftige Töne nebeneinander auf
einer Übersichtsseite wären ein Signalfeuer, und ein Dashboard, das
durchgehend schreit, sagt nichts mehr. */
.hcardhead{align-items:flex-start}
.hsym{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:inline-flex;
align-items:center;justify-content:center;background:var(--fill-2);color:var(--ink-2)}
.hcardhead .hsym .hic{color:inherit}
.hwort{min-width:0;flex:1 1 auto;padding-top:2px}
.hfrage{margin:1px 0 0;font-size:11.5px;line-height:1.35;color:var(--ink-3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard{position:relative;overflow:hidden}
.hcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:transparent}
/* was bei mir liegt */
.hcard[data-art="mir"] .hsym{background:var(--accent-soft);color:var(--accent)}
.hcard[data-art="mir"]::before{background:var(--accent)}
/* wie es steht */
.hcard[data-art="lage"] .hsym{background:var(--fill-2);color:var(--ink-2)}
.hcard[data-art="lage"]::before{background:var(--line)}
/* was ich tun kann */
.hcard[data-art="tun"] .hsym{background:rgba(16,122,96,.1);color:#0d6b53}
.hcard[data-art="tun"]::before{background:rgba(16,122,96,.55)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .hcard[data-art="tun"] .hsym{background:rgba(52,186,150,.16);color:#63ceae}
:root:not([data-theme="light"]) .hcard[data-art="tun"]::before{background:rgba(52,186,150,.5)}
}
/* Der Schnellzugriff: Gruppen statt einer flachen Liste. Die Überschrift
sagt, was gleich passiert — hingehen, im Board etwas öffnen, oder sonst. */
.hgruppe{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-3);margin:12px 0 6px}
.hcardbody > .hgruppe:first-child{margin-top:2px}
/* ============================================================
Fassung 62: Ausblenden und die Befehle an der Karte
============================================================ */
/* Die Zeile über einer Spalte: wie viele Karten hier ausgeblendet sind.
Zurückhaltend gesetzt — sie ist ein Hinweis, keine Meldung. Aber sie ist
da, denn ein Ausblenden, dessen Umfang man nicht sieht, ist ein Löschen
mit Verzögerung (lib/verdeckt.php). */
.vzeile{display:flex;align-items:center;gap:6px;padding:0 4px 8px;
font-size:12px;color:var(--ink-3)}
.vlink{background:none;border:0;padding:0;font:inherit;color:var(--accent);
cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.vlink:hover{text-decoration-thickness:2px}
/* Eine ausgeblendete Karte, die der Schalter gerade sichtbar macht. Sie darf
nicht aussehen wie die anderen, sonst blendet man sie zum zweiten Mal aus
und wundert sich, dass nichts passiert. Gestrichelt und blasser: sichtbar
auf Widerruf. */
.card--verdeckt{opacity:.62;border-style:dashed;box-shadow:none}
.card--verdeckt:hover{opacity:.85}
/* Die Befehlszeile im Kartenfenster. Sie steht über den Feldern, weil sie
etwas anderes tut: die Felder beschreiben die Karte, diese Knöpfe handeln.
Deshalb eine eigene Zeile mit Abstand darunter und nicht noch ein „field". */
.kbefehle{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 14px;
margin:0 0 4px;border-bottom:1px solid var(--line)}
/* Die Zielwahl beim Einhängen. Zwei Sonderfälle, die sonst aus dem Haus
fallen: ein Suchfeld (input[type=search] steht nicht in der allgemeinen
Regel für Eingabefelder) und eine aufgeklappte Liste (select mit size —
die allgemeine Regel setzt appearance:none und malt einen Pfeil, den eine
aufgeklappte Liste nicht hat). */
#un-suche{font-family:inherit;font-size:15px;color:var(--ink);background:var(--fill);
border:1px solid transparent;border-radius:var(--r-m);padding:9px 12px;width:100%}
#un-suche:focus{outline:0;background:var(--paper);
box-shadow:0 0 0 1px var(--line-2),0 0 0 4px rgba(18,70,122,.12)}
#un-ziel{width:100%;min-height:170px;appearance:auto;-webkit-appearance:auto;
background-image:none;padding:6px}
#un-ziel option{padding:5px 7px;border-radius:6px}
/* Die drei Pfeile am Kartenfuß teilen sich eine Zeile mit „Öffnen" und
„Weiter →". Mit dem dritten Pfeil (↑↑, Fassung 62) reichte die Breite in
einer 230px-Spalte nicht mehr, und die Zeile brach um: jede Karte wurde
eine Zeile höher, für einen Knopf, den man selten braucht. Enger gesetzt
passt alles wieder — die Fläche zum Treffen bleibt auf dem Handy ohnehin
durch die Regel weiter unten bei 32px. */
.card .acts{gap:2px}
.card .acts .icon{padding-left:5px;padding-right:5px}
/* ============================================================
Fassung 63: Rückgängig
============================================================ */
/* Der Knopf in der Meldung. Die Meldung ist dunkel, also muss er hell
sein und darf trotzdem nicht wie der Hauptknopf einer Seite wirken —
er ist ein Angebot, keine Aufforderung. */
.toastknopf{margin-left:14px;background:none;border:0;padding:2px 0;font:inherit;
font-weight:600;color:#fff;cursor:pointer;text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:1.5px}
.toastknopf:hover{text-decoration-thickness:2.5px}
/* Die Liste der Züge. Eine Zeile je Handlung — nicht je geänderter Karte;
dass „37 Karten archiviert" EINE Zeile ist, ist der ganze Punkt. */
.zliste{display:flex;flex-direction:column;gap:2px;margin:10px 0}
.zzeile{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-m)}
.zzeile:nth-child(odd){background:var(--fill)}
.ztext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ztext b{font-weight:600;font-size:14.5px}
.zmeta{font-size:12.5px;color:var(--ink-3)}
/* Schon zurückgenommen: bleibt stehen, damit die Spur vollständig ist,
aber es ist kein Angebot mehr. */
.zzeile--weg{opacity:.55}
.zzeile--weg .ztext b{text-decoration:line-through;text-decoration-thickness:1px}
/* ============================================================
Fassung 63: auf eine Karte ziehen
============================================================ */
/* Die Zielkarte, während das Verweilen gegriffen hat. Sie muss sich klar
von der Einfügelinie unterscheiden — das ist der ganze Zweck: zwei
verschiedene Aussagen dürfen nicht gleich aussehen. */
.card--haengziel{box-shadow:0 0 0 2px var(--accent),var(--shadow-2);transform:translateY(-1px)}
/* Die Vorschau: die gezogene Karte schon an ihrem künftigen Platz. */
.haengvor{display:flex;align-items:center;gap:7px;margin:4px 0 2px;padding:5px 9px;
border-radius:8px;background:var(--accent-soft);color:var(--accent);
font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.haengpfeil{opacity:.75;font-weight:400}
/* Der Trichter: die Karte fährt in die andere hinein. */
.trichter{position:fixed;z-index:9000;pointer-events:none;margin:0;
transition:left .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1),
width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),
opacity .3s ease,transform .3s cubic-bezier(.4,0,.2,1);
transform-origin:top center;overflow:hidden}
@media (prefers-reduced-motion:reduce){.trichter{display:none}}
/* ============================================================
Fassung 64: Parken und der Übertrag
============================================================ */
/* Geparkt: beiseite, aber sichtbar. Blasser als offen, nicht
durchgestrichen wie erledigt — es ist weder das eine noch das andere. */
.lb-geparkt .lpunkt{opacity:.72}
.lb-geparkt .lpunkt:hover{opacity:1}
.lgeparkt{color:var(--ink-3);font-variant-numeric:tabular-nums}
.lparken{color:var(--ink-3)}
/* Die Übertragsfrage. Sie steht einmal am Tag ganz oben im Tag und muss
auffallen, ohne nach Fehler auszusehen — es ist eine Frage, keine
Warnung. Deshalb die ruhige Tönung des Hauses und kein Rot. */
.uebertrag{background:var(--accent-soft);border:1px solid var(--accent-line,var(--line));
border-radius:var(--r-m);padding:12px 14px;margin:0 0 12px}
.uebkopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.uebkopf b{font-size:14.5px}
.uebertrag .hintline{margin:8px 0 0}
/* Eine Zeile, die noch von gestern steht. Ein schmaler Strich am Rand —
sie ist nicht falsch, sie ist nur älter als der Tag. */
.lplan--alt{box-shadow:inset 3px 0 0 var(--accent)}
.luebertrag{color:var(--alert);font-weight:600}
/* ============================================================
Fassung 64: Fokus und Klang
============================================================ */
/* Der Ring um die Uhr. 25 Minuten einmal herum — die Zahl sagt, wie lange
man sitzt, der Ring sagt, wie viel vom Block noch kommt. */
.fokusring{position:relative;width:216px;height:216px;margin:6px auto 2px}
.fokusring svg{width:100%;height:100%;display:block}
.fr-bahn{stroke:var(--line)}
.fr-fuell{stroke:var(--accent);transition:stroke-dashoffset .9s linear,stroke .4s ease}
.fr-fuell.voll{stroke:var(--gut,#2f855a)}
.fokusring .fokusuhr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0}
/* Der Tag als schmaler Balken oben — ohne Rechnen sichtbar, wie weit man ist. */
.fktagbar{width:120px;height:5px;border-radius:99px;background:var(--fill-2);overflow:hidden;margin-left:10px}
.fktagbar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .5s ease}
/* Der Zuspruch. Kommt, bleibt ein paar Sekunden, geht. Er darf nicht
springen — deshalb hat die Zeile auch unsichtbar ihre Höhe. */
.fokuszuspruch{min-height:24px;text-align:center;font-size:15px;font-weight:600;
color:var(--accent);opacity:0;transform:translateY(5px);
transition:opacity .45s ease,transform .45s ease;margin:2px 0 6px}
.fokuszuspruch.an{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fokuszuspruch{transition:none}}
/* Die Klangwahl. Knöpfe und kein Auswahlfeld: man probiert sie durch,
und dafür will man alle gleichzeitig sehen. */
.fokusklang{margin:16px 0 4px;display:flex;flex-direction:column;gap:9px;align-items:center}
.klangwahl{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.klangknopf{background:var(--fill);border:1px solid transparent;border-radius:99px;
padding:5px 12px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.klangknopf:hover{background:var(--fill-2);color:var(--ink)}
.klangknopf.an{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.klangregler{display:flex;align-items:center;gap:8px;width:min(320px,80%)}
.klangregler input[type=range]{flex:1;accent-color:var(--accent)}
.klangsym{font-size:14px;opacity:.7}
.klangeigen{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;
width:min(520px,94%);text-align:center}
.klangeigen input[type=url]{flex:1 1 240px;min-width:0}
.klangeigen .hintline{flex-basis:100%}
.klangdatei{cursor:pointer}
/* ============================================================
Fassung 65: die globale Suche
============================================================ */
.hsuche{min-width:min(320px,42vw)}
.gsuche{margin:4px 0 24px}
.gskopf{display:flex;align-items:center;gap:10px;padding:0 2px 10px;
border-bottom:1px solid var(--line);margin-bottom:14px}
.gskopf b{font-size:16px}
.gsgruppe{margin:0 0 20px}
.gsgruppenkopf{display:flex;align-items:center;gap:7px;margin:0 0 7px;color:var(--ink-2)}
.gsgruppenkopf b{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.gsgruppenkopf .lab{margin-left:auto}
/* Eine Trefferzeile ist ein Knopf: man klickt sie an, um hinzugehen. Also
sieht sie auch aus wie etwas, das man anklickt, und nicht wie Text, der
zufällig reagiert. */
.gszeile{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
padding:10px 13px;margin:0 0 6px;font:inherit;color:inherit;cursor:pointer}
.gszeile:hover{border-color:var(--accent);background:var(--fill)}
.gszeile--fertig .gstitel{text-decoration:line-through;text-decoration-thickness:1px;color:var(--ink-3)}
.gsmitte{min-width:0;flex:1}
.gstitel{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
white-space:nowrap;overflow:hidden;min-width:0}
/* Die Kennung behält ihre Breite, der Titel gibt nach — und zwar mit einem
Auslassungszeichen, damit man sieht, dass noch etwas kommt. */
.gstitel .ref{flex:none}
.gsname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gswo{font-size:12.5px;color:var(--ink-3);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gspfeil{color:var(--ink-3);flex:none}
.gszeile:hover .gspfeil{color:var(--accent)}
/* „alle 25 zeigen" steht UNTER der Gruppe und nicht neben der Überschrift:
dort, wo das Auge nach der fünften Zeile ohnehin ankommt. Es ist bewusst
kein Knopf mit Rahmen — sonst wiegt es schwerer als die Treffer selbst. */
.gsmehr{display:block;width:100%;text-align:left;background:none;border:0;
padding:4px 13px 2px;margin:0;font:inherit;font-size:13px;color:var(--ink-3);
cursor:pointer;text-decoration:underline;text-underline-offset:3px;
text-decoration-color:var(--line)}
.gsmehr:hover{color:var(--accent);text-decoration-color:currentColor}
@media (max-width:620px){.hsuche{min-width:0;width:100%;order:9}}
/* ============================================================
Fassung 65: feste Höhen und der Notizblock
============================================================ */
/* Ein Kasten mit fester Höhe rollt in sich — abgeschnitten würde Inhalt
verschwinden, und eingestellt wird eine Höhe, damit die Reihen stehen,
nicht damit etwas weg ist. */
.hcard--fest .hcardbody{overscroll-behavior:contain}
.hcard--fest .hcardbody::-webkit-scrollbar{width:8px}
.hcard--fest .hcardbody::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.hhoehe{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px;min-width:26px}
.hhoehe--an{color:var(--accent)}
.hedithinweis .linkbtn{padding:0;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Der Notizblock. Er soll aussehen wie ein Block und nicht wie ein
Formularfeld: kein Rahmen, Linien wie auf Papier, und der Rand links
markiert, dass hier geschrieben wird. */
.hnotiz{width:100%;border:0;background:transparent;resize:none;font:inherit;
font-size:14.5px;line-height:28px;color:var(--ink);padding:0 2px;
min-height:140px;outline:none;
background-image:linear-gradient(transparent 27px,var(--line) 27px,var(--line) 28px);
background-size:100% 28px}
.hnotiz::placeholder{color:var(--ink-3)}
.hnotizfuss{display:flex;align-items:center;gap:8px;margin-top:8px;
font-size:12px;color:var(--ink-3);min-height:18px}
/* ============================================================
Fassung 65: Hilfe & Service
============================================================ */
/* Das Suchfeld sah bis hierher nach nichts aus, weil input[type=search]
nie in der allgemeinen Regel für Eingabefelder stand. Diese Lücke wird
hier EINMAL geschlossen — auch für die beiden anderen Stellen, an denen
sie aufgefallen war. */
/* Suchfelder schöner (Fassung 100): Pillenform mit Lupe links, klarer Rahmen
und Fokusring in der Akzentfarbe. Gilt für alle Suchfelder und das
Board-Suchfeld (#q). Felder mit eigener Lupe (.hsuchfeld) bekommen kein
zweites Symbol. */
input[type=search],#q{font-family:inherit;font-size:15px;color:var(--ink);box-sizing:border-box;
background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Ccircle cx='9' cy='9' r='6' fill='none' stroke='%2355626E' stroke-width='1.7'/%3E%3Cpath d='M13.6 13.6L17 17' stroke='%2355626E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 13px center;
border:1px solid var(--line-2);border-radius:100px;padding:10px 15px 10px 38px;max-width:100%;
transition:border-color .15s,box-shadow .15s}
@media (hover:hover){input[type=search]:hover,#q:hover{border-color:var(--ink-3)}}
input[type=search]:focus,#q:focus{outline:0;border-color:var(--accent);background-color:var(--paper);
box-shadow:0 0 0 3px var(--accent-soft)}
.hsuchfeld input[type=search]{background-image:none;padding-left:38px}
.hsuchzeile{display:flex;gap:8px;margin-bottom:12px;align-items:stretch}
.hsuchfeld{position:relative;flex:1;min-width:0;display:flex}
.hsuchfeld input{width:100%;padding-left:38px;font-size:16px;padding-top:11px;padding-bottom:11px}
.hsuchlupe{position:absolute;left:13px;top:50%;transform:translateY(-50%);
color:var(--ink-3);pointer-events:none}
.hsuchfeld input:focus + .hsuchlupe,.hsuchfeld:focus-within .hsuchlupe{color:var(--accent)}
/* Die Bereiche als Reihe von Knöpfen statt als fünfzehn Überschriften
untereinander: man sieht auf einen Blick, worüber es überhaupt etwas
gibt, und kommt mit einem Klick hin. */
.hbereiche{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.hchip{display:inline-flex;align-items:center;gap:6px;background:var(--fill);
border:1px solid transparent;border-radius:99px;padding:5px 11px;
font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.hchip:hover{background:var(--fill-2);color:var(--ink)}
.hchip.an{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.hchipn{font-size:11.5px;opacity:.7;font-variant-numeric:tabular-nums}
.hchip.an .hchipn{opacity:.85}
/* Ein Artikel zeigt seinen ersten Satz: so entscheidet man, ob man
aufklappt, ohne aufzuklappen. */
.hartikel > summary{display:flex;gap:9px;align-items:flex-start;list-style:none}
.hartikel > summary::-webkit-details-marker{display:none}
.hartikel > summary::marker{content:""}
/* Das alte Plus/Minus aus Fassung 33 verschwindet: seit Fassung 65 trägt
die Zusammenfassung ein eigenes Zeichen, das sich dreht. Zwei Zeichen
nebeneinander, die dasselbe sagen, sind eines zu viel. */
.hartikel > summary::before{content:none}
.hartikel[open] > summary::before{content:none}
.hapfeil{flex:none;color:var(--ink-3);font-size:17px;line-height:1.25;
transition:transform .18s ease;transform-origin:center}
.hartikel[open] > summary .hapfeil{transform:rotate(90deg);color:var(--accent)}
.hawort{display:flex;flex-direction:column;gap:2px;min-width:0}
.hatitel{font-weight:600}
.havor{font-size:12.5px;color:var(--ink-3);font-weight:400;line-height:1.45}
.hartikel[open] > summary .havor{display:none}
@media (prefers-reduced-motion:reduce){.hapfeil{transition:none}}
/* ============================================================
Fassung 69: „App aufs Gerät"
============================================================ */
/* Die Schrittliste im App-Dialog erbt .schritte (nummerierte Kreise) und
braucht nur etwas Luft — bewusst keine eigene Gestaltung: Zwei Arten,
Schritte darzustellen, wären eine zu viel. */
.appweg{margin:2px 0 4px}
.appweg .schritte{margin:0}
.appweg .schritte li{font-size:14px}
#appdlg .kleingedruckt{margin:6px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
#appdlg .dlg-body > .btn{justify-self:start}
/* Die Kulissenwahl in Gruppen (Fassung 69). Dreizehn Knöpfe in einer Reihe
wären eine Wand; drei kurze Reihen mit einer kleinen Überschrift davor
findet das Auge, ohne zu lesen. */
.klangreihe{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
/* Die Überschrift steht ÜBER der Reihe, nicht daneben. Daneben sah sie
richtig aus, solange eine Reihe in eine Zeile passte — sobald sie umbrach,
hing die Überschrift an der ersten Zeile und der Rest der Knöpfe stand
darunter mittig ohne erkennbare Zugehörigkeit. Eine Beschriftung, deren
Lage davon abhängt, wie breit gerade das Fenster ist, beschriftet nichts. */
.klanggruppe{width:100%;text-align:center;font-size:11px;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-3);margin:3px 0 1px;flex:none}
@media (max-width:620px){
.klangreihe{justify-content:flex-start}
.klanggruppe{text-align:left;margin:4px 0 0}
}
/* ---------- Abgeschaltete Tags (Fassung 70) ----------
Sie sollen zu sehen sein und zugleich erkennbar nicht in Gebrauch.
Ausgrauen allein reicht nicht — grau heißt in dieser Oberfläche schon
„Nebensache". Deshalb zusätzlich gestrichelt: dieselbe Sprache wie bei
ausgeblendeten Karten aus Fassung 62, wo es ebenfalls heißt „ist da,
gilt hier aber nicht". */
.colrow.tagaus input[type=text]{opacity:.55}
.colrow.tagaus .swatches{opacity:.45}
.colrow.tagaus button[data-m="an"]{border-style:dashed;color:var(--ink-3)}
.picktag.tagaus{border-style:dashed;opacity:.7}
/* Die Tagliste hat seit Fassung 70 einen Knopf mehr je Zeile (An/Aus).
In 560 Pixeln fiel „Entfernen" dadurch auf eine zweite Zeile, und jede
Zeile war doppelt so hoch — bei zwölf Tags ein Fenster voller Umbrüche.
Dieses eine Fenster darf breiter sein; es ist eine Liste und kein
Formular. */
#tdlg{max-width:min(680px, calc(100vw - 32px))}
@media (max-width:620px){
/* Am Telefon bricht es ohnehin um — dann wenigstens sauber: Name ganz
oben über die volle Breite, Knöpfe darunter in einer Reihe. */
#tdlg .colrow input[type=text]{flex:1 1 100%;order:-1}
}
/* ---------- Gesperrte Felder (Fassung 71) ----------
Die Vorlagenwahl ist gesperrt, solange kein Boardname dasteht. Ein
gesperrtes Feld, das aussieht wie ein offenes, ist schlimmer als ein
Fehler: Man klickt es an, nichts passiert, und man sucht den Grund bei
sich. Also sichtbar gesperrt — und die Begründung steht daneben. */
.field select:disabled,.field input:disabled{opacity:.5;cursor:not-allowed;background:var(--fill)}
/* ================= Der Fokus, neu (Fassung 71) =================
Grundsatz: Auf dem Schirm stehen die Aufgabe und die Uhr. Alles zum
Einstellen liegt in der Schublade. Das Bild liegt dahinter und ist
gedämpft genug, dass man darüber lesen kann — ein Hintergrund, der um
Aufmerksamkeit bittet, ist keiner. */
.fokusbild{position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;z-index:0;opacity:1}
.fokus .fokuskarte{position:relative;z-index:2}
/* Die kleine Angabe unter der Uhr: welcher Modus gerade läuft. */
/* Die kleine Angabe unter der Uhr steht jetzt UNTER dem Ring (im Fluss),
statt absolut im unteren Drittel des Rings zu liegen — dort überlappte
„FOKUSBLOCK · 25 MIN" den Ring und die Uhr (F121). */
.fokusuhrart{text-align:center;margin:-2px 0 2px;min-height:15px;
font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
/* ---------- Die Bedienleiste ---------- */
.fokusleiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;
margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.fkleiste-lab{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-3);font-weight:600;margin-right:4px}
.fkchip{display:inline-flex;align-items:center;background:var(--fill);
border:1px solid var(--line);border-radius:99px;
padding:6px 13px;font:500 12.5px/1 var(--f);color:var(--ink-2);cursor:pointer}
.fkchip-i{font-size:13px;font-style:normal;line-height:1;margin-right:6px}
@media (hover:hover) and (pointer:fine){.fkchip:hover{background:var(--fill-2);color:var(--ink);border-color:var(--line-2,var(--line))}}
.fkchip.an{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
/* ---------- Die Schublade ---------- */
.fokusfach{position:absolute;z-index:4;right:0;top:0;bottom:0;width:min(440px,100%);
background:var(--paper);border-left:1px solid var(--line);
box-shadow:var(--shadow-3);display:flex;flex-direction:column;
animation:fachrein .18s ease-out}
@keyframes fachrein{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.fokusfach{animation:none}}
.fkfachkopf{display:flex;align-items:center;gap:10px;padding:18px 20px 14px;
border-bottom:1px solid var(--line);font-size:15px}
.fkfachrumpf{padding:4px 20px 26px;overflow-y:auto;flex:1}
.fkteil{padding:18px 0;border-bottom:1px solid var(--line)}
.fkteil:last-child{border-bottom:0}
.fkteil h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-3);margin:0 0 12px;font-weight:600}
.fkteil .flag{margin:10px 0 2px}
.fkteil .hintline{margin:2px 0 12px}
.fkmodi{display:grid;gap:7px}
.fkmodus{display:block;width:100%;text-align:left;background:var(--fill);
border:1px solid transparent;border-radius:var(--r-m);padding:10px 13px;cursor:pointer}
.fkmodus b{display:block;font-size:14px;color:var(--ink)}
.fkmodus span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
@media (hover:hover) and (pointer:fine){.fkmodus:hover{background:var(--fill-2)}}
.fkmodus.an{background:var(--accent-soft);border-color:var(--accent)}
.fkmodus.an b{color:var(--accent)}
.fkzeilen{margin-top:12px;display:grid;gap:8px}
.fkzeile{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2)}
.fkzeile span{flex:1}
.fkzeile input{width:78px}
.fkzeile em{font-style:normal;color:var(--ink-3);font-size:12.5px}
/* ---------- Imaginäre Kolleginnen ---------- */
.fokuscrew{position:absolute;z-index:3;left:24px;top:84px;width:188px;
background:color-mix(in srgb, var(--paper) 86%, transparent);
border:1px solid var(--line);border-radius:var(--r-l);padding:12px 13px;
backdrop-filter:blur(6px)}
.fkcrewkopf{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:9px}
.fkcrewzeile{display:flex;align-items:center;gap:9px;padding:5px 0}
.fkcrewzeile.weg{opacity:.45}
.fkcrewini{width:26px;height:26px;border-radius:50%;flex:none;display:flex;
align-items:center;justify-content:center;background:var(--fill-2);
font:600 10.5px/1 var(--f);color:var(--ink-2)}
.fkcrewtext{display:flex;flex-direction:column;min-width:0}
.fkcrewtext b{font-size:13px;line-height:1.2}
.fkcrewtext span{font-size:11.5px;color:var(--ink-3)}
.fkcrewfuss{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
font-size:10.5px;color:var(--ink-3)}
@media (max-width:1100px){.fokuscrew{display:none}}
/* ---------- Die Pause ---------- */
.fokuspause{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
justify-content:center;background:color-mix(in srgb, var(--paper) 84%, transparent);
backdrop-filter:blur(8px);padding:24px}
.fkpausenkarte{max-width:470px;width:100%;text-align:center;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
padding:30px 28px 24px;box-shadow:var(--shadow-3)}
.fkpausenkopf{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fkpausenuhr{font:300 54px/1.05 var(--f);letter-spacing:-.03em;margin:8px 0 18px;
font-variant-numeric:tabular-nums}
.fkuebung{background:var(--fill);border-radius:var(--r-m);padding:16px 18px;margin-bottom:18px;text-align:left}
.fkuebung b{display:block;font-size:15px;margin-bottom:5px}
.fkuebung p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.fkuebung .btn{margin-right:7px}
.fkpausentaten{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* ---------- Die Auswertung ---------- */
.fkstatkopf{text-align:center;padding:4px 0 14px}
.fkstatgross b{display:block;font:300 38px/1.1 var(--f);letter-spacing:-.03em}
.fkstatgross span{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}
.fkstatdiff{margin-top:9px;font-size:13px;color:var(--ink-2)}
.fkstatdiff.rauf{color:var(--good,#2F7D53)}
.fkstatdiff.runter{color:var(--ink-3)}
.fkstatzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.fkstatzahl{background:var(--fill);border-radius:var(--r-m);padding:11px 8px;text-align:center}
.fkstatzahl b{display:block;font-size:19px;font-weight:600}
.fkstatzahl span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.fkbalken{display:flex;align-items:flex-end;gap:4px;height:84px;margin:4px 0 20px}
.fkbalk{flex:1;height:100%;display:flex;align-items:flex-end;cursor:default}
.fkbalk i{display:block;width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px}
.fkbalk.leer i{background:var(--line-2,var(--line))}
.fkzeitreihe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 10px}
.fkzeit{background:var(--fill);border-radius:var(--r-m);padding:11px 6px;text-align:center}
.fkzeit.viel{background:var(--accent-soft)}
.fkzeit b{display:block;font-size:17px;font-weight:600}
.fkzeit.viel b{color:var(--accent)}
.fkzeit span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:1px}
.fkzeit em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3)}
.fkkulissen{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.fkkul{background:var(--fill);border-radius:99px;padding:5px 12px;font-size:12.5px;color:var(--ink-2)}
@media (max-width:760px){
.fokusfach{width:100%;border-left:0}
.fkstatzahlen{grid-template-columns:repeat(2,1fr)}
.fkzeitreihe{grid-template-columns:repeat(2,1fr)}
/* Auf dem Handy soll der Fokus ohne Scrollen auf den Schirm. Also
kleinerer Ring, dichtere Abstände — und die Bedienleiste rückt
zusammen, statt sich über den unteren Rand zu schieben. */
.fokus{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.fokuskopf{margin-bottom:14px}
.fokusring{width:150px;height:150px;margin:2px auto}
.fokusring .fokusuhr{font-size:36px}
.fokusuhrart{bottom:16px}
.fokusuhr{font-size:40px;margin-bottom:10px}
.fokuskontext{margin-bottom:9px}
.fokustitel{margin-bottom:7px}
.fokusmeta{margin-bottom:16px}
.fokustaten{margin-bottom:10px}
.fokusleiste{margin-top:14px;padding-top:12px;row-gap:8px}
.fokusleiste .spacer{display:none}
.fkleiste-lab{flex:0 0 100%;text-align:center;margin:0 0 2px}
.fkchip{padding:8px 13px}
}
/* ============================================================
Fassung 209: Fokus auf flachen Fenstern (nach HÖHE, nicht Breite)
------------------------------------------------------------
Der Fokus war bisher nur fürs Handy (schmale Breite) kompakt. Auf
einem breiten, aber NIEDRIGEN Laptop-Fenster (z. B. 1280×620) blieb
die große Karte stehen — Ring, Titel, Knöpfe und Bedienleiste liefen
über den unteren Rand hinaus und wirkten „zerschossen". Diese Regeln
greifen nach der Fensterhöhe und schrumpfen Ring und Abstände, damit
der Fokus auf den Schirm passt, ohne dass etwas abgeschnitten wird.
Der volle Look auf hohen Fenstern (ab ~760 px) bleibt unverändert.
============================================================ */
@media (max-height:760px){
.fokus{padding:16px}
.fokuskopf{margin-bottom:12px}
.fokusring{width:168px;height:168px;margin:2px auto}
.fokusring .fokusuhr{font-size:40px}
.fokusuhr{font-size:40px;margin-bottom:8px}
.fokusuhrart{margin:-1px 0 2px}
.fokustitel{font-size:clamp(20px,3.2vw,30px);margin-bottom:8px}
.fokusmeta{margin-bottom:14px}
.fokustaten{margin-bottom:10px}
.fokusleiste{margin-top:14px;padding-top:12px}
}
@media (max-height:600px){
.fokuskopf{margin-bottom:8px}
.fokusring{width:128px;height:128px;margin:0 auto}
.fokusring .fokusuhr{font-size:32px}
.fokusuhr{font-size:34px;margin-bottom:6px}
.fokuszuspruch{min-height:0;margin:1px 0 4px}
.fokuskontext{margin-bottom:7px}
.fokustitel{font-size:clamp(18px,2.6vw,24px);margin-bottom:6px}
.fokusmeta{margin-bottom:10px}
.fokustaten{margin-bottom:8px}
.fokusleiste{margin-top:10px;padding-top:10px}
}
/* In der Auswertung stehen Überschriften direkt über ihrem Abschnitt und
brauchen Luft davor — sonst klebt „Die häufigsten Kulissen" am Satz
darüber und liest sich wie dessen Fortsetzung. */
#fk-stat .flab{margin-top:18px}
#fk-stat .flab:first-child{margin-top:0}
#fk-stat .hintline{margin-top:8px}
/* ================= Fassung 72: die mitlaufende Uhr und der Ablauf ========= */
/* Die kleine Uhr in der Kopfleiste. Sie steht an der Stelle des
Fokus-Ziels und ersetzt es, solange eine Sitzung läuft. Der Punkt davor
pulst leise — das ist das Einzige an der ganzen Oberfläche, das sich von
selbst bewegt, und genau deshalb sieht man es. */
.crumb--uhr{display:inline-flex;align-items:center;gap:7px;
background:var(--accent-soft);color:var(--accent);font-variant-numeric:tabular-nums}
.crumb--uhr .fkminipunkt{width:7px;height:7px;border-radius:50%;background:var(--accent);
flex:none;animation:fkpuls 2.4s ease-in-out infinite}
@keyframes fkpuls{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.crumb--uhr .fkminipunkt{animation:none}}
.crumb--uhr .fkminizeit{font-weight:600;font-size:13px}
.crumb--uhr .fkminiwort{font-size:11.5px;opacity:.8}
.crumb--uhr.pause{background:var(--fill-2);color:var(--ink-2)}
.crumb--uhr.pause .fkminipunkt{background:var(--ink-3);animation:none}
/* Die Ablaufzeile auf dem Fokusschirm: eine Zeile, die den ganzen Rest des
Tages sagt. Sie steht unter der Aufgabe, weil sie die Antwort auf die
zweite Frage ist — die erste ist „was jetzt". */
.fokusablauf{margin:-16px 0 24px;font-size:13px;color:var(--ink-3);
font-variant-numeric:tabular-nums}
/* Der Ablauf in der Schublade. */
.fkablauf{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ablaufliste{margin:10px 0 4px}
.ablaufzeile{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-s);
font-size:13px}
.ablaufzeile.jetzt{background:var(--accent-soft)}
.ablaufzeile.jetzt .ablauftext b{color:var(--accent)}
.ablaufzeile.vorbei{opacity:.45}
.ablaufzeile.pause{color:var(--ink-3)}
.ablaufzeile.pause .ablauftext b{font-weight:500}
.ablaufzeit{flex:none;width:44px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:12px}
.ablauftext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ablauftext b{font-weight:600}
.ablaufmin{flex:none;color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
/* Das Abschlussbild — dieselbe Form wie die Pause, anderer Inhalt. */
.fkendezahl{font:300 44px/1.1 var(--f);letter-spacing:-.03em;margin:6px 0 12px}
.fkendetext{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 20px}
/* Kurzes Aufleuchten einer frisch angelegten Karte (Fassung 82). */
.card.neu-blink{animation:neublink 1.6s ease-out 1}
@keyframes neublink{
0%{box-shadow:0 0 0 2px var(--accent),0 0 0 6px rgba(37,99,235,.28)}
100%{box-shadow:var(--shadow-1)}
}
@media (prefers-reduced-motion:reduce){
.card.neu-blink{animation:none;box-shadow:0 0 0 2px var(--accent)}
}
/* Zufallsmix-Kopf im Klang-Fach (Fassung 83). */
.klangmixkopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.klangmixknopf{border:1px solid var(--line);background:var(--paper);color:var(--ink);
border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer}
.klangmixknopf:hover{border-color:var(--accent)}
.klangmixknopf.an{background:var(--accent);border-color:var(--accent);color:#fff}
.klangmixhinweis{font-size:12px;color:var(--ink-2)}
/* Registrieren-Aufruf auf der Anmeldeseite (Fassung 85). */
.reg-cta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:center}
.reg-cta-text{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:10px}
.btn--block{display:block;width:100%;text-align:center;box-sizing:border-box}
/* ===== Willkommen / Team & Testimonials (Fassung 87) ===== */
.willkommen{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;
margin:22px 0 10px;padding:24px;border:1px solid var(--line);border-radius:var(--r-l);
background:linear-gradient(180deg,var(--accent-soft),var(--paper))}
.willkommen h2{margin:0 0 10px;font-size:clamp(22px,3.2vw,30px);letter-spacing:-.025em}
.willkommen p{margin:0 0 10px;color:var(--ink-2);line-height:1.6;font-size:15px}
.willkommen .wk-sig{font-weight:600;color:var(--ink);font-size:14px}
.willkommen .wk-sig small{display:block;font-weight:400;color:var(--ink-3)}
.wk-bild{display:flex;justify-content:center}
.wk-bild img{width:100%;max-width:340px;border-radius:var(--r-l);box-shadow:var(--shadow-1)}
@media (max-width:720px){.willkommen{grid-template-columns:1fr;text-align:center}.wk-bild{order:-1}}
.team{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:18px 0 0}
.teamkarte{display:flex;flex-direction:column;align-items:center;gap:8px;width:160px;text-align:center}
.teamkarte .tav{width:92px;height:92px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--accent)}
.teamkarte .tph{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--fill);border:2px dashed var(--line);color:var(--ink-3);font-size:11px;line-height:1.2;padding:8px}
.teamkarte b{font-size:14px}
.teamkarte small{font-size:12px;color:var(--ink-3);line-height:1.4}
/* Testimonials als Wisch-/Tipp-Slider (Fassung 89): eine Stimme groß auf
einmal, zum Durchwischen (Touch) oder über Pfeile/Punkte — größer und
wärmer als das frühere Raster. */
.tmnlslider{position:relative;margin:18px 0 0}
.tmnls{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:2px;margin:0}
.tmnls::-webkit-scrollbar{display:none}
.tmnl{flex:0 0 100%;scroll-snap-align:center;box-sizing:border-box;position:relative;
border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--accent-soft);
padding:30px 28px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.tmnl::before{content:"\201C";position:absolute;top:4px;left:20px;font-size:62px;line-height:1;
color:var(--accent);opacity:.26;font-family:Georgia,"Times New Roman",serif}
.tmnl .tmnl-text{font-size:18px;line-height:1.62;color:var(--ink);margin:0;font-style:italic;max-width:44ch}
.tmnl .tmnl-who{display:flex;align-items:center;gap:12px;margin-top:4px}
.tmnl .tmnl-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
border:2px solid var(--paper);box-shadow:var(--shadow-1)}
.tmnl .tmnl-who span{text-align:left}
.tmnl .tmnl-who b{display:block;font-size:14.5px}
.tmnl .tmnl-who small{font-size:12.5px;color:var(--ink-3)}
/* Pfeile (Fassung 97): saubere Chevrons per CSS statt der Textzeichen ‹ ›.
Das Zeichen im Knopf wird mit font-size:0 ausgeblendet; das Chevron zeichnet
::before aus zwei Rahmenkanten — gestochen scharf in jeder Größe. */
.tmnl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;
border-radius:50%;border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);
font-size:0;cursor:pointer;box-shadow:0 2px 10px rgba(15,26,38,.12);display:flex;
align-items:center;justify-content:center;
transition:background .16s,color .16s,border-color .16s,box-shadow .16s,transform .16s}
.tmnl-nav::before{content:"";display:block;width:10px;height:10px;border-right:2.2px solid currentColor;
border-bottom:2.2px solid currentColor;border-radius:1.5px}
.tmnl-prev::before{transform:rotate(135deg);margin-left:4px}
.tmnl-next::before{transform:rotate(-45deg);margin-right:4px}
.tmnl-nav:disabled{opacity:.3;cursor:default;box-shadow:none}
.tmnl-nav:focus-visible{outline:0;box-shadow:0 0 0 3px var(--accent-soft)}
@media (hover:hover){.tmnl-nav:not(:disabled):hover{background:var(--accent);color:#fff;border-color:var(--accent);
transform:translateY(-50%) scale(1.08);box-shadow:0 6px 18px rgba(18,70,122,.30)}}
.tmnl-prev{left:-8px}
.tmnl-next{right:-8px}
.pitch .tmnl-prev{left:2px}
.pitch .tmnl-next{right:2px}
.tmnl-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.tmnl-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
background:var(--line-2);transition:background .15s,transform .15s}
.tmnl-dot.an{background:var(--accent);transform:scale(1.25)}
@media (max-width:620px){
.tmnl-nav{display:none}
.tmnl{padding:26px 20px 22px}
.tmnl .tmnl-text{font-size:16.5px}
}
/* ---- Trainingsbereich (Fassung 102) ---- */
.crumb--training .crumbcnt{background:var(--gold);color:#5c4410}
#page-training{max-width:980px}
.tr-unter{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:70ch;margin:2px 0 20px}
.tr-bilanz{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.tr-bil{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 18px;box-shadow:var(--shadow-1);min-width:150px}
.tr-bilz{display:flex;flex-direction:column;line-height:1.1}
.tr-bilz b{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tr-bilz span{font-size:12.5px;color:var(--ink-3)}
.tr-coin{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, #F6D879, #E3B23C 70%);color:#7A5C10;font-size:15px;flex:none;
box-shadow:inset 0 0 0 1.5px #C99A23}
.tr-coin--s{width:19px;height:19px;font-size:10px}
.tr-medal{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
background:var(--accent-soft);color:var(--accent);flex:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.tr-medal-stern{font-size:15px;line-height:1}
.tr-medal--s{width:19px;height:19px}
.tr-medal--s .tr-medal-stern{font-size:10px}
.tr-medliste{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tr-medchip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);
border-radius:100px;padding:5px 13px 5px 6px;font-size:12.5px;font-weight:600}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.trk{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:11px}
.trk--done{border-color:var(--gruen);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--gruen)}
.trk-kopf{display:flex;align-items:center;gap:10px}
.trk-kopf h2{font-size:17px;margin:0;letter-spacing:-.02em;flex:1}
.trk-worum{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0;flex:1}
.trk-bar{height:7px;border-radius:100px;background:var(--fill);overflow:hidden}
.trk-bar i{display:block;height:100%;background:var(--accent);border-radius:100px;transition:width .3s}
.trk--done .trk-bar i{background:var(--gruen)}
.trk-stand{font-size:12px;color:var(--ink-3)}
.trk .btn{margin-top:4px}
.tr-runkopf{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.tr-runname{font-size:18px;font-weight:700;letter-spacing:-.02em}
.tr-runbar{max-width:420px;margin:0 0 7px}
.tr-runzahl{font-size:12.5px;color:var(--ink-3)}
.tr-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:28px;box-shadow:var(--shadow-1);margin:14px 0 0;max-width:640px}
.tr-step h2{font-size:22px;margin:0 0 12px;letter-spacing:-.02em}
.tr-steptext{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0 0 18px;max-width:60ch}
.tr-tu{background:var(--accent-soft);border-radius:var(--r-m);padding:14px 16px}
.tr-tulabel{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.tr-tu p{margin:0;font-size:14.5px;color:var(--ink);line-height:1.5}
.tr-nav{display:flex;gap:10px;margin:18px 0 0;max-width:640px}
.tr-nav .btn--primary{margin-left:auto}
/* Bereiche in der Übersicht (Fassung 107) */
.tr-gruppe{margin:0 0 26px}
.tr-gkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 12px}
.tr-gname{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0}
.tr-gunter{font-size:13px;color:var(--ink-3);margin:3px 0 0}
.tr-gzahl{font-size:12.5px;font-weight:600;color:var(--ink-3);background:var(--fill);border-radius:100px;padding:4px 11px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Abzeichen, wenn ein ganzer Bereich geschafft ist (Fassung 114): ein
goldener Pokal — passt zu den Münzen und hebt sich von der blauen
Einzel-Medaille ab, weil es für mehr steht. */
.tr-gbadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.01em;
color:#5A3E05;border-radius:100px;padding:5px 12px;white-space:nowrap;flex:none;
background:linear-gradient(135deg,#F6D879,#E3B23C);
box-shadow:inset 0 0 0 1.5px #C99A23,0 1px 4px rgba(170,130,20,.3);
animation:tr-badge-pop .42s cubic-bezier(.2,1.3,.4,1)}
.tr-gbadge svg{flex:none}
@keyframes tr-badge-pop{from{transform:scale(.55);opacity:0}60%{transform:scale(1.06)}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tr-gbadge{animation:none}}
/* Der abgeschlossene Bereich bekommt einen zarten goldenen Namenston. */
.tr-gruppe--fertig .tr-gname{color:#9A6B10}
:root[data-theme="dark"] .tr-gruppe--fertig .tr-gname{color:#E3B23C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tr-gruppe--fertig .tr-gname{color:#E3B23C}}
/* Das Trainings-Symbol (Bachelorhut) in Gold — es gehört zum Lern- und
Belohnungsthema, nicht zum neutralen Grau der übrigen Leiste. */
.crumb--training svg{color:#C9972A}
:root[data-theme="dark"] .crumb--training svg{color:#E3B23C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .crumb--training svg{color:#E3B23C}}
/* Beispiel von mir (Fassung 107): bewusst neutral/gedämpft — eine Veranschau-
lichung, keine Anweisung. Deutlich anders als der Accent-Kasten „Jetzt du“. */
.tr-bsp{background:var(--fill);border-left:3px solid var(--line-2);border-radius:0 var(--r-m) var(--r-m) 0;padding:11px 15px;margin:0 0 16px;max-width:60ch}
.tr-bsplabel{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.tr-bsp p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
/* Leseschritt ohne Aufgabe: ruhiger als der Aufgaben-Kasten. */
.tr-tu--lesen{background:var(--fill)}
.tr-tu--lesen .tr-tulabel{color:var(--ink-3)}
.tr-tu--lesen p{color:var(--ink-2)}
@media (max-width:620px){ .tr-step{padding:20px 16px} .tr-nav .btn{flex:1} .tr-nav .btn--primary{margin-left:0} }
/* Auszeichnungen im Profil (Fassung 102) */
.p-trbil{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 12px}
.p-trmz{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
#p-train .tr-medliste{margin:0}
/* ===== Trainings-Center andockbar (Fassung 148) ===== */
:root{ --traindockw:420px; }
body.pc-dock{ padding-right:var(--traindockw); transition:padding-right .16s ease; }
.traindock{
position:fixed; top:0; right:0; height:100vh; width:var(--traindockw); max-width:92vw;
background:var(--paper); border-left:1px solid var(--line-2);
box-shadow:-10px 0 34px rgba(0,0,0,.14); z-index:900;
display:flex; flex-direction:column;
}
.traindock[hidden]{ display:none; }
.traindock-griff{ position:absolute; left:-4px; top:0; width:9px; height:100%; cursor:ew-resize; z-index:2; }
.traindock-griff:hover{ background:linear-gradient(90deg,var(--accent),transparent); opacity:.5; }
.traindock-kopf{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--fill); }
.traindock-titel{ display:flex; align-items:center; gap:7px; font-weight:600; color:var(--ink); }
.traindock-titel b{ font-weight:600; }
.traindock-ort{ flex:1 1 auto; color:var(--ink-3); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.traindock-knopf{ width:30px; height:30px; flex:0 0 auto; border:1px solid var(--line); background:var(--paper); color:var(--ink-2); border-radius:8px; cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; }
.traindock-knopf:hover{ background:var(--fill-2); color:var(--ink); }
.traindock-body{ flex:1 1 auto; overflow:auto; padding:14px; }
/* kompaktere Trainings-Darstellung in der schmalen Leiste */
.traindock-body .pagehead h1{ font-size:20px; }
.traindock-body .tr-grid{ grid-template-columns:1fr; }
.traindock-auf{ display:none; }
.traindock--schmal{ width:48px !important; }
.traindock--schmal .traindock-kopf,
.traindock--schmal .traindock-body,
.traindock--schmal .traindock-griff{ display:none; }
.traindock--schmal .traindock-auf{
display:flex; align-items:center; justify-content:center; gap:8px;
width:100%; height:100%; border:0; background:transparent; cursor:pointer;
writing-mode:vertical-rl; transform:rotate(180deg);
font-weight:600; color:var(--accent); letter-spacing:.04em;
}
.traindock--schmal .traindock-auf:hover{ background:var(--fill); }
@media (max-width:900px){
body.pc-dock{ padding-right:0; }
.traindock{ width:100%; max-width:100%; }
.traindock--schmal{ width:48px !important; left:auto; right:0; }
}
/* Fassung 194: dcyphr.® ID-Schnellzugriff in der Kopfleiste, „ID" im Chamäleon-Look.
Selbsttragend (eigene Keyframes), damit es unabhängig vom Auth-Style funktioniert. */
.crumb--id{display:inline-flex;align-items:center;gap:3px;font-weight:600;text-decoration:none;white-space:nowrap}
.crumb--id .cham{font-weight:900;letter-spacing:-.02em;
background:linear-gradient(110deg,#6a5cff,#00b4d8 20%,#12d8a0 40%,#ffd23f 60%,#ff5db1 80%,#6a5cff);
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;animation:chamid 9s linear infinite}
@keyframes chamid{to{background-position:300% 0}}
@media(prefers-reduced-motion:reduce){.crumb--id .cham{animation:none}}