/* Die Farbwerte, box-sizing und die Scrollleisten stehen seit v299 in css/theme.css.
 * Jede Seite, die app.css lädt, MUSS theme.css davor laden — sonst ist alles farblos.
 * Grund für die Trennung: die Zeile html,body{overflow:hidden} direkt hier drunter ist in der
 * Anwendung richtig (nur der Innenbereich scrollt) und auf einer Textseite fatal. Die
 * Dokumentseiten holen sich jetzt nur noch theme.css und bleiben dadurch normal scrollbar. */
html,body{height:100%;margin:0;overflow:hidden}
/* KEIN versehentliches Zoomen: „manipulation" erlaubt Scrollen/Wischen, unterbindet aber das
   Doppeltipp-Zoom (z. B. schnelles Doppeltippen des Weiter-CTAs am iPhone/iPad). Pinch-Zoom wird
   zusätzlich per gesturestart (app.js) und Viewport unterbunden. Elemente mit eigenem touch-action
   (Feld, Wellenform) behalten ihres. */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.4}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
button{font-family:inherit}
.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}

.top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 11px;padding:3px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
/* Marke bewusst größer als die Bedienknöpfe (Axel: Dino war zu klein); Top-Bar-Padding dafür
   schmaler, damit die Zeile insgesamt nicht höher wird. */
.brand{width:33px;height:33px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none;overflow:hidden}
.brand img{width:100%;height:100%;object-fit:contain;display:block;transform:translateX(1.5px)}   /* Dino sitzt formbedingt leicht links im Kreis → ein Mü nach rechts (nur in der App, nicht Favicon/Mac-Icon) */
/* Dino-Marke: immer im WEISSEN KREIS (hebt sich im Dark Mode ab; im Light Mode dezenter Ring).
   Kein Padding — der Dino soll den Kreis maximal ausfüllen (das Bild bringt seinen eigenen
   weißen Kreis + Rand-Freiraum mit). */
.brand.img{background:#fff;border-radius:50%;border:1px solid var(--line);padding:0}
.choreo{line-height:1.15;white-space:nowrap}.choreo b{font-weight:500}.choreo small{display:block;color:var(--muted);font-size:10.5px}
/* Mehr-Mandanten: Kopfblock wird zum Choreo-Wechsler (nur mit .pick — mehrere Mitgliedschaften/Staff) */
.choreo.pick{cursor:pointer;border-radius:8px;padding:2px 7px;margin:-2px -7px}
.choreo.pick:hover{background:var(--panel2)}
.grow{flex:1}
.unsaved{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--warn);background:var(--warn-bg);border:0;border-radius:20px;padding:3px 9px}
button.unsaved{cursor:pointer;font:inherit;font-size:11.5px}
button.unsaved:hover{filter:brightness(.97)}
.unsaved .d{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.unsaved.offline{color:var(--muted);background:var(--panel2);border:1px solid var(--line)}
.unsaved.offline .d{background:var(--muted)}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;padding:6px 11px;border-radius:8px;cursor:pointer}
.btn:hover{background:var(--panel2)}.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500}
.btn:disabled{opacity:.4;cursor:default}
.ib{width:29px;height:29px;border:1px solid var(--line);background:var(--panel);border-radius:8px;cursor:pointer;color:var(--muted);display:grid;place-items:center;position:relative}
.ib:hover{background:var(--panel2);color:var(--ink)}
.ib .bdg{position:absolute;top:-5px;right:-5px;min-width:14px;height:14px;padding:0 3px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:9.5px;line-height:14px;text-align:center;font-weight:600}
.avatar{width:28px;height:28px;border-radius:50%;background:#6b5cd0;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:500}

/* Tabs sitzen IN der Top-Bar (eine Zeile statt zwei — Platz sparen, Feedback); auf schmalen
   Fenstern bricht die Zeile dank flex-wrap sauber um. */
.tabs{display:flex;gap:3px;margin-left:10px}
.refreshtab{margin-left:-7px;flex:none}   /* Refresh DIREKT neben „Einstellungen" (Axel: „weiter nach links") — 4px Rest-Gap; springt nie, weil .tab::before die Aktiv-Breite (font-weight 500) fest reserviert */
/* TÄNZER-DESKTOP = Trainer-Views READ-ONLY (Axel-Pivot): Bearbeiten-Bedienelemente + Trainer-Tabs ausblenden.
   Das eigentliche Bearbeiten ist zusätzlich per Sperre (state.locked) und Firestore-Rules unterbunden. */
body.ro-mode #lockBtn, body.ro-mode #btnSichern, body.ro-mode #undoTop, body.ro-mode #redoTop,
body.ro-mode [data-tool="neu"], body.ro-mode [data-tool="zurueck"], body.ro-mode [data-tool="loeschen"],
body.ro-mode #histBtn, body.ro-mode #bellBtn, body.ro-mode #mobileBtn, body.ro-mode #btnFreigeben, body.ro-mode #btnVerwerfen,
body.ro-mode #dirtyBadge,   /* Tänzer:innen haben keinen Sicher-Puffer → nie „ungespeichert" zeigen */
body.ro-mode #notes,   /* interne Trainer-Notizen sieht der/die Tänzer:in NICHT */
body.ro-mode .tab[data-mode="freigabe"], body.ro-mode .tab[data-mode="settings"],
/* rechtes Panel: nur die Auswahl (Rollen-Filter) bleibt zum Ansehen; Ausrichten/Verteilen/Musik-Zeit/Raster/Sichtbarkeit raus */
body.ro-mode #rtEdit .aligns, body.ro-mode #rtEdit .rtgrp, body.ro-mode #rtEdit > .seglabel:not(:first-child){display:none!important}
/* PUNKT/ANMERKUNG read-only als ruhige Textzeile (statt Eingabefelder). Ohne Trainer-Textfelder wirken sie sonst
   „verloren" (Axel): leere Felder ganz weg, vorhandene auf Inhaltsbreite und mittig unter dem Titel zusammengerückt
   (die Breite setzt renderEditor via ch). */
body.ro-mode #edMetaRow .fin{border-color:transparent;background:transparent;padding-left:0;padding-right:0}
body.ro-mode #edMetaRow.rometa{gap:26px}
body.ro-mode #edMetaRow.rometa .mf{flex:0 0 auto;min-width:0;max-width:none;gap:7px}
body.ro-mode #edMetaRow.rometa .mf .fin{flex:0 0 auto}
body.ro-mode #edMetaRow.empty{display:none}
/* Tänzer sehen NUR — Trainer-Aktionsleiste (Neu/Löschen…) + die Reiter „Ansicht"(Auswahl)/„Aufstellung"(Zuordnen)
   raus → rechts bleibt nur „Tänze". Die Anzeige-CTAs (Übergänge/Distanzen/Animation, #iconCol) BLEIBEN — reines
   Ansehen, hilft den Tänzer:innen (Axel). */
body.ro-mode .tracts,
body.ro-mode #taTabs button[data-t="edit"],
body.ro-mode #taTabs button[data-t="pairs"]{display:none!important}
/* Tänzer-Nav: die interne Umschaltleiste (Bilderplan/Definitionen) ist jetzt oben in den Top-Tabs → raus. */
body.ro-mode #edViewTabs{display:none!important}
/* HEADER-SYMMETRIE (Axel): links den (für Tänzer:innen leeren) Aktions-Streifen ganz weg — der Bildtitel ist
   der linke Kopf. Rechts „Tänze" NICHT als graue Box-in-Box, sondern als schlichte, mittige Überschrift auf
   gleicher Höhe wie der Titel links. */
body.ro-mode .cbox > .hd.edhd{display:none!important}
body.ro-mode .side.right > .hd{background:transparent;border-bottom:0;min-height:0;justify-content:center;padding:11px 12px 4px}
body.ro-mode .side.right > .hd .tabm.rt{flex:0 0 auto;justify-content:center}
/* „Tänze" als ruhige Überschrift (Titelhöhe) statt Tab. */
body.ro-mode #taTabs button[data-t="dances"]{background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:var(--ink);font-weight:600;font-size:16px;padding:0;pointer-events:none;cursor:default;flex:0 0 auto}
/* Bildtitel links als Kopf mit gleicher Höhe wie „Tänze" rechts (Axel: „Header unterschiedlich hoch"). */
body.ro-mode #edHead{min-height:34px}
/* Tänze-Panel ohne Ziehgriff/Löschen → Grid neu (sonst rutscht der Tanzname in die 14px-Griff-Spalte, Axel: „wo sind die Namen"). */
body.ro-mode .drow{grid-template-columns:1fr auto 58px}
/* Definitionen (Countsheet): Konfig-Leiste (Takte/Layout) + Bild-Anker-Reihe + Bearbeiten-Hinweise raus — die
   Tabelle mit den Merges bleibt read-only. Tänze-Panel: Ziehgriff/Löschen/Hinzufügen raus (Zeiten/−5s bleiben). */
body.ro-mode:not(.ro-defsedit) .cscfg, body.ro-mode:not(.ro-defsedit) .csbilder, body.ro-mode:not(.ro-defsedit) .csheet .cshint,
body.ro-mode #taAdd, body.ro-mode .drow .gh, body.ro-mode .drow .segrm, body.ro-mode .tapend{display:none!important}
/* Termine: rechte Trainer-Konfig (Regelzeiten/Freigabe/Arten) + Hinzufügen + Absagen-Statistik raus → nur die
   Termin-Liste zum Lesen (Selbst-Absage bleibt über die Zeile). */
body.ro-mode #b-plan .side.right, body.ro-mode #trAdd, body.ro-mode #planAus{display:none!important}

/* ---- TÄNZER-DESKTOP: keine Bearbeitungs-Altlasten (Axel, 26.07.) ----------------------------------
   Axels Befund: "man merkt der Desktopversion sehr an, dass sie eine entschlackte Trainer-Version ist".
   Alles hier folgt einer Regel: Was ein:e Tänzer:in nicht bedienen kann, darf auch nicht bedienbar
   AUSSEHEN — kein Zeigefinger, kein Greifer, kein Hover-Rahmen, kein Bearbeiten-Tooltip. */

/* Anwesenheits-Chips im Termin-Überblick: für ro sind sie ein <span>, tragen aber Finger + Hover.
   Genau das meinte Axel mit "sieht aus als könnte ich klicken, aber es geht (zum Glück) nicht". */
/* Selbst-Abmeldung direkt in der Terminzeile (Axel: „etwas prominenter, schon in der Übersicht"). */
/* Bewegungsradius: Unterzeile an den Fact-Sheet-Überschriften + gefaltete Einzelfall-Zeile */
.trselb{flex:none;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:transparent;color:var(--accent);border-radius:7px;padding:2px 9px;font-size:10.5px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit}
.trselb:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.trselb.ab{border-color:var(--line);color:var(--muted)}
.trselb.ab:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--accent);background:transparent}
/* Definitions-Zellen reagieren auf Hover wie Eingabefelder, obwohl sie für Tänzer:innen nicht
   editierbar sind (contenteditable wird nur bei Bearbeiten-Freigabe gesetzt). */
body.ro-mode:not(.ro-defsedit) .cse:hover{background:transparent}
body.ro-mode .trart{cursor:default}
body.ro-mode .trart:not(.abgesagt):hover{filter:none}
body.ro-mode .trort .lk{border-bottom:0}
body.ro-mode .trort .lk:hover{color:inherit}
body.ro-mode span.anchip{cursor:default}
body.ro-mode span.anchip:hover{border-color:inherit}   /* nicht var(--line): das übertönte sonst die rote Absage-Markierung aus .anwrap.off */

/* Punkte im Feld: Auswahl (Maße-Kasten) bleibt, aber die Greifhand verspricht Verschieben.
   !important, weil field.js den Cursor als inline-style setzt. */
body.ro-mode .fieldwrap g[data-pair]{cursor:pointer!important}

/* Tanz-Tag über dem Feld: sah wie ein Auswahlmenü aus (Finger + ▼ + "Tanz wählen"), das <select>
   ist für ro aber deaktiviert. Das ist Axels "beim Hovern über einen Tanz wird der Zeiger zum Finger". */
body.ro-mode .chead .dtag, body.ro-mode .chead .dtag .dtagsel{cursor:default}
body.ro-mode .chead .dtag .dtagcaret{display:none}

/* Zeit-Chip in der Lupe: draggable + "In ein Zeitfeld ziehen" — die Zielfelder gibt es für ro gar nicht. */
body.ro-mode .wd-time, body.ro-mode #wdTime{cursor:default}

/* Trainer-Werkzeuge in der Musikleiste: "Audio/Bild entkoppeln" löst nur die BEARBEITUNGS-Sperre. */
body.ro-mode #decoupleBtn{display:none!important}

.tab{border:1px solid transparent;background:transparent;color:var(--muted);font-size:13px;padding:6px 13px;border-radius:8px;cursor:pointer;display:grid;justify-items:center}
.tab:hover{background:var(--panel2);color:var(--ink)}
.tab.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:500}
/* Aktiver Tab wird fett (weight 500) → würde die Zeile breiter machen und das „ungespeichert"-Badge
   verschieben. Ein unsichtbarer, IMMER fetter Zwilling reserviert die Breite, damit nichts springt. */
.tab::before{content:attr(data-label);font-weight:500;height:0;overflow:hidden;visibility:hidden;pointer-events:none}

.body{flex:1;min-height:0;display:none;gap:11px;padding:11px}
.body.on{display:flex}

.side{background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;flex:none;position:relative}
.side.left{width:308px}.side.right{width:318px}
/* EINKLAPPBARE BILDERLISTE (Axel). Reihenfolge der Wichtigkeit bei wenig Platz:
   1. Bilderplan + Musik (.center)  2. rechte Leiste  3. Bilderliste links.
   Eingeklappt bleibt ein schmaler Griff stehen — die Liste ist damit nie „weg", nur beiseite. */
body.foldl #b-editor .side.left{width:0;min-width:0;border-width:0;opacity:0;pointer-events:none}
body.foldr #b-editor .side.right{display:none}   /* display:none statt width:0 — sonst bliebe die Flex-Luecke stehen und der Player endete vor dem Rand */
body.foldr #b-editor{padding-right:19px}          /* Platz fuer den Griff, damit er nicht auf dem Inhalt liegt */
body.foldl #b-editor{padding-left:19px}
#b-editor{position:relative}
.sidefold{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:19px;height:64px;
  display:none;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  box-shadow:0 1px 6px rgba(0,0,0,.22)}
.sidefold.l{left:calc(11px + 308px - 9px);border-radius:0 8px 8px 0}
body.foldl .sidefold.l{left:2px}
.sidefold.r{right:calc(11px + 318px - 9px);border-radius:8px 0 0 8px}
body.foldr #b-editor .sidefold.r{right:2px}
body.foldp #b-plan .sidefold.r{right:2px}
body.foldl .sidefold.l,body.foldr #b-editor .sidefold.r,body.foldp #b-plan .sidefold.r{display:flex}
@media (max-width:1280px){ #b-editor.on .sidefold.l{display:flex} }
@media (max-width:1080px){ #b-editor.on .sidefold.r{display:flex} }
@media (max-width:1180px){ #b-plan.on .sidefold.r{display:flex} }
.sidefold:hover{color:var(--accent);border-color:var(--accent)}
.sfchev{width:0;height:0;border:5px solid transparent}
.sidefold.l .sfchev{border-right-color:currentColor;margin-left:-2px}
body.foldl .sidefold.l .sfchev{border-right-color:transparent;border-left-color:currentColor;margin-left:2px}
.sidefold.r .sfchev{border-left-color:currentColor;margin-right:-2px}
body.foldr .sidefold.r .sfchev{border-left-color:transparent;border-right-color:currentColor;margin-right:2px}
/* Sehr schmal: die rechte Leiste darf schrumpfen, der Bilderplan nicht. */
@media (max-width:1180px){ .body{gap:8px;padding:8px} }
.sect{padding:11px 12px;border-top:1px solid var(--line)}
.sect:first-child{border-top:0}
.sect.fill{flex:1;min-height:0;display:flex;flex-direction:column}
.sect h4{margin:0 0 7px;font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.tool3{display:flex;gap:6px}
.tool3 .btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;font-size:11px}
.tool3 .btn svg{width:16px;height:16px}
.bilst{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px;padding-right:2px}
.brow{display:grid;grid-template-columns:30px 17px 1fr auto;gap:7px;align-items:center;padding:4px 6px;border:1px solid var(--line);border-left:3px solid var(--bc,var(--line));border-radius:8px;cursor:pointer;background:var(--panel);scroll-margin-top:26px}
/* Trainernotiz-Marker in der Bilder-Liste: ✎ = offene Notiz (Akzent), ✓ = alle erledigt (dezent) */
.brow .bnote{font-size:11px;line-height:1;color:var(--muted);flex:none}
.brow .bnote.open{color:var(--accent)}
.brow:hover{background:var(--panel2)}
.brow.cur{border-color:var(--accent);border-left-color:var(--bc,var(--accent));background:color-mix(in srgb,var(--accent) 7%,transparent)}
.brow .mini{width:30px;height:30px;border:1px solid var(--line);border-radius:5px;background:var(--floor)}
.brow .bnr{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right}
.brow .bt{min-width:0}.brow .bt b{font-weight:500;font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bt small{color:var(--muted);font-size:10px}.brow .dd{width:8px;height:8px;border-radius:50%}
/* Tanz-Block-Header in der Bilderliste (sticky, im Stil der Panel-Überschriften) */
.bgh{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:6px;padding:5px 2px 3px;margin-top:4px;background:var(--panel);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.bgh:first-child{margin-top:0}
.bgh .dc{width:8px;height:8px;border-radius:50%;flex:none}
.bgh .bgw{color:var(--trans);font-size:11px;cursor:help}
.brow.excl{opacity:.58}.brow.excl .eyeoff{color:var(--muted)}

.center{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;gap:11px}
.cbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cbox.grow{flex:1}
/* Einheitlicher vertikaler Rhythmus (Axel): gleicher Abstand zwischen Tanz-Titel, Punkt/Anmerkung,
   Koordinatensystem und Navigation — über ein gemeinsames flex-gap statt einzelner Paddings. */
.cbody{flex:1;min-height:0;display:flex;flex-direction:column;padding:11px 12px 6px;gap:10px}
/* Kopf-Streifen (Editor-Mitte + rechte Leiste): Haupt-Umschalter auf panel2-Grund, aktiver Tab
   als Karte — bewusst deutlich abgesetzt von den leichteren Innen-Schaltern (.seg) im Inhalt. */
.cbox>.hd,.side>.hd{flex:none;display:flex;align-items:center;gap:8px;padding:6px 9px;background:var(--panel2);border-bottom:1px solid var(--line)}
/* Rechte Leiste (Bearbeiten|Tänze|Aufstellung) genauso hoch wie die Bilderplan/Definitionen-Leiste → einheitlicher Look (Axel) */
.side>.hd:has(#taTabs){min-height:53px;box-sizing:border-box}
.cbox>.hd .tabm,.side>.hd .tabm{display:flex;gap:5px}
.side>.hd .tabm{flex:1}
.side>.hd .tabm button{flex:1}
.side>.hd+.sect{border-top:0}
/* Editor-Box-Header: echte KARTEIREITER (Axel „Option a") — aktiver Reiter hat Panel-Grund + Rand
   oben/seitlich, KEIN Rand unten und margin-bottom:-1px → er überdeckt die Kopf-Trennlinie und
   verschmilzt nahtlos mit dem Inhalt darunter. Inaktive Reiter liegen zurückgesetzt (panel2). */
.edhd{padding:0 12px;align-items:flex-end;gap:7px;min-height:44px}
/* Bilderplan|Definitionen — gleiches Pill wie der Freigabe|Administration-Umschalter (Axel). */
.tabm.sheets{gap:4px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:4px}
.tabm.sheets button{border:0;background:transparent;color:var(--muted);padding:7px 18px;font-size:13.5px;cursor:pointer;font-weight:600;border-radius:8px;margin:0}
.tabm.sheets button:hover{color:var(--ink);background:transparent}
.tabm.sheets button.on{background:var(--accent);color:#fff;font-weight:600}
/* Einheitliche Abstände (Axel): alle Aktionsgruppen mit gleichem 7px-Gap, vertikal zentriert. */
.edhd .grow,.edhd .hdnav,.edhd .hdsep,.edhd .ib.xs,.edhd .btn.sm{align-self:center}
.edhd .hdnav{display:flex;align-items:center;gap:7px}
.edhd .hdsep{width:1px;height:22px;background:var(--line);margin:0}
.edhd .ib.xs{width:28px;height:28px}
.edhd .btn.sm{padding:6px 12px;font-size:12px}
.ib.xs{width:26px;height:26px}
.ib.xs svg{width:14px;height:14px}
/* Lock-Flash: zentrale Sperr-Meldung IM Koordinatensystem (statt nur Toast). */
.lockflash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;background:color-mix(in srgb,var(--ink) 90%,transparent);color:var(--bg);font-size:13px;font-weight:500;padding:9px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap;display:flex;align-items:center;gap:8px}
.lockflash.show{opacity:1}
/* PDF-Vorschau-Overlay (In-App): Einstellungen links, Live-Iframe rechts. */
.pdfov{position:fixed;inset:0;z-index:60;display:flex;background:color-mix(in srgb,var(--bg) 80%,#000)}
.pdfov[hidden]{display:none}
/* Ausrichtungs-Hinweis (Handy=Hochformat, iPad=Querformat) */
.rotov{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;text-align:center;padding:30px}
.rotov[hidden]{display:none}
.rotinner{max-width:290px;display:flex;flex-direction:column;align-items:center;gap:14px}
.rotico{width:60px;height:60px;color:var(--accent);animation:rotwiggle 2.4s ease-in-out infinite}
@keyframes rotwiggle{0%,55%,100%{transform:rotate(0)}72%,88%{transform:rotate(-88deg)}}
.rothd{font-size:19px;font-weight:700;color:var(--ink)}
.rottxt{font-size:14px;color:var(--muted);line-height:1.5}
.pdfmbar{display:none}   /* nur auf schmalen Screens (Handy) */
/* Handy: Einstellungen und Vorschau passen nicht nebeneinander → oben umschalten, je Ansicht Vollbreite. */
@media (max-width:720px){
  .pdfov{flex-direction:column}
  .pdfmbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
  .pdfseg{display:flex;gap:2px;background:var(--panel2);border-radius:9px;padding:2px}
  .pdfseg button{border:0;background:transparent;color:var(--muted);padding:7px 13px;border-radius:7px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
  .pdfseg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
  .pdfmact{display:flex;gap:6px;align-items:center}
  .pdfback{flex:none}
  .pdfov .pdfside{width:auto;flex:1;min-height:0;border-right:0}   /* .pdfov-Prefix: schlägt die spätere 290px-Basisregel */
  .pdfside .pdfhd{display:none}                 /* Titel/Fertig kommen aus der Mobile-Leiste */
  .pdfov.prev .pdfside{display:none}            /* Vorschau-Modus: Einstellungen aus */
  .pdfov:not(.prev) .pdfstage{display:none}     /* Einstellungen-Modus: Vorschau aus */
  .pdfov .pdfstage{flex:1;padding:10px}
}
.pdfside{width:290px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px}
.pdfhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pdfhd b{font-size:15px}
.pdfopts{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow:auto}
.pdfopts .swrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line2)}
.pdfopts .swrow small{color:var(--muted);font-weight:400}
.pdfgrouplbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:8px 2px 2px;font-weight:600}
.pdfopts .pdfgrouplbl:first-child{margin-top:2px}
.pdffocusbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--ink);border-radius:9px;padding:9px 11px;font-size:12.5px;font-weight:600;cursor:pointer}
.pdffocusbtn:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.pdffocusbtn svg{flex:none;color:var(--muted)}
.pdffocushint{font-size:10.5px;color:var(--muted);margin:5px 2px 2px;line-height:1.35}
.pdfhd .pdfdone{padding:5px 14px}
.pdfact{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pdfact .btn{width:100%;justify-content:center}
.pdfhint{font-size:10.5px;color:var(--muted);line-height:1.4}
/* overflow-y:scroll reserviert die Scrollbar dauerhaft → clientWidth ist stabil, die Einpassung
   rechnet nicht zu breit (kein seitliches Scrollen mehr); overflow-x:hidden als Gürtel dazu. */
.pdfstage{position:relative;flex:1;min-width:0;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;align-items:flex-start;padding:10px}
/* Schließen direkt über der Vorschau — mitscrollend fixiert, damit es auf jeder Seite erreichbar bleibt. */
.pdfx{position:fixed;top:14px;right:20px;z-index:5;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:9px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.pdfx:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:820px){.pdfx{display:none}}   /* mobil gibt es „Fertig" schon in der Kopfleiste */
/* Vorschau wird per JS (fitPdfPreview) auf die verfügbare Breite herunterskaliert (ganze A4-Seite
   sichtbar, kein zu-nah-Zoom). Der Scaler trägt die SKALIERTE Größe, damit die Stage korrekt scrollt. */
.pdfscaler{flex:none}
.pdfstage iframe{width:794px;border:0;background:#fff;display:block;transform-origin:top left;box-shadow:0 4px 24px rgba(0,0,0,.3);pointer-events:none}
/* Zeiger-Gerät: das iframe scrollt INNEN (nur der sichtbare Ausschnitt wird gerastert) statt als
   ~30.000 px hohe transformierte Ebene zu existieren — das war die Ruckel-Ursache am PC. Auf TOUCH
   bleibt es klickdurchlaessig, sonst schluckt es die Wischgeste (v195, #5). */
.pdfstage.innerscroll{overflow:hidden;align-items:center}
.pdfstage.innerscroll iframe{pointer-events:auto}
.chead{display:flex;align-items:center;gap:9px;justify-content:center;padding:0}
/* Punkt + Anmerkung kompakt unter dem Bildtitel — symmetrisch zentriert wie die Titelzeile. */
.metarow{display:flex;align-items:center;justify-content:center;gap:16px;padding:0;flex-wrap:wrap}
.metarow .mf{display:flex;align-items:center;gap:9px;flex:1;min-width:190px;max-width:330px}
/* Label auf Textbreite (KEINE feste Breite) → der Abstand Label→Feld ist bei „Punkt" und
   „Anmerkung" gleich (feste Breite ließ das kurze „Punkt" weit vom Feld weg stehen, Axel). */
.metarow .mf label{flex:none;font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.metarow .mf .fin{flex:1;padding:5px 8px;font-size:12px}
.chead .ct{color:var(--muted);font-size:16px;font-weight:500}
.chead .cn{font-weight:500;font-size:16px;border-radius:5px;padding:1px 4px}
/* Tanz als farbiger Tag mit Auswahl direkt in der Überschrift (zentriert, breite = Textbreite) */
/* Tanz-Tag auf Augenhöhe mit dem Bildtitel (Axel: „nicht gleichwertig — Tanz etwas größer"). */
.chead .dtag{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;padding:5px 12px;color:#fff;font-weight:600;font-size:15px;flex:none;line-height:1;white-space:nowrap;cursor:pointer}
.chead .dtag #edTanzLabel{pointer-events:none}
.chead .dtag .dtagcaret{opacity:.85;pointer-events:none;flex:none}
.chead .dtag .dtagsel{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0}
.chead .dtag .dtagsel option{color:var(--ink);background:var(--panel);font-weight:500}
.chead .cn:focus{outline:none;background:var(--panel2);box-shadow:0 0 0 1px var(--accent)}
/* Symmetrische Seiten-Gassen (38px) halten das Feld exakt MITTIG — die schmale Icon-Spalte wohnt
   in der rechten Gasse und zählt nicht in die Zentrierung; place-items:end = unten bündig.
   Etwas Luft oben (Axel: „oben auflockern, Koordinatensystem runter"). */
.fieldwrap{flex:1;min-height:0;min-width:0;display:grid;place-items:end center;position:relative;container-type:size;padding:0 40px 0}
/* Gekoppelte Wiedergabe: Feld läuft mit → nicht bearbeitbar (Punkte nicht „greifbar") */
.fieldwrap.playlock g[data-pair]{cursor:default!important}
/* Front-Indikator: NUR die Pfeilspitze + „vorne", unten bündig am Feld (Axel: „mir reicht die
   unterste Spitze ohne den Strich"). Kind der floorbox → sitzt DIREKT links am Koordinatensystem
   statt in der Gasse zu stranden (Axel: „das Logo neben das Koordinatensystem"). flex-end +
   padding-right = Inhalt am rechten Rand, also am Feldrand. */
.frontarrow{position:absolute;left:-40px;bottom:0;width:38px;display:flex;flex-direction:column;align-items:flex-end;padding-right:4px;gap:2px;color:var(--muted);opacity:.6;pointer-events:none;z-index:3}
.frontarrow .fa-line{display:none}
.frontarrow svg{width:18px;height:18px}
.frontarrow .fa-lbl{font-size:8.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.fieldwrap .floorbox{height:min(100cqw,100cqh);width:min(100cqw,100cqh)}
/* Anzeige-Icons: Kind der floorbox → sitzen DIREKT rechts am Koordinatensystem (nicht in der Gasse). */
.iconcol{position:absolute;right:-38px;bottom:0;display:flex;flex-direction:column;gap:7px;z-index:3}
.vtg{position:relative;width:32px;height:32px;border:1px solid var(--line);background:var(--panel);border-radius:8px;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.iconcol .vtg svg{width:18px;height:18px}   /* Spezifität muss `.floorbox svg{width:100%}` schlagen (Icons liegen im .floorbox) */
.vtg:hover{background:var(--panel2);color:var(--ink)}
.vtg.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.vtg::after{content:attr(data-tip);position:absolute;right:33px;top:50%;transform:translateY(-50%);background:var(--ink);color:var(--bg);font-size:11px;padding:4px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:7}
.vtg:hover::after{opacity:1}
.floorbox{position:relative;height:100%;max-height:100%;max-width:100%;aspect-ratio:1/1;background:var(--floor);border:1px solid var(--line);border-radius:14px;padding:2px;display:grid;place-items:center}
.distbox{position:absolute;top:8px;left:8px;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);border-radius:9px;padding:7px 9px;z-index:2;max-width:64%;cursor:pointer}
.distbox.faded{opacity:.18}
/* Maße-Box (oben rechts) — zeigt B/T + Abstände der AKTUELLEN Auswahl. pointer-events:none,
   damit sie Klicks aufs Feld nie blockiert. */
.measbox{position:absolute;top:8px;left:8px;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:9px;padding:6px 10px;z-index:6;max-width:60%;max-height:calc(100% - 16px);overflow-y:auto;pointer-events:auto;box-shadow:0 3px 12px rgba(0,0,0,.16)}
.measbox .mrow{padding:1.5px 0}
.measbox .mhead{display:flex;align-items:center;gap:7px;padding:1px 0 3px}
.measbox .mrow + .mhead{border-top:1px solid var(--line2);margin-top:4px;padding-top:5px}
.measbox .mbadge{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--mono)}
.measbox .mnm{font-size:11.5px;color:var(--ink);font-weight:500;line-height:1.2;white-space:normal}
.measbox .mv{font-size:11.5px;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;white-space:nowrap}
.measbox .mv .ml{color:var(--muted);margin-right:5px}
.measbox .mv .mni{color:var(--muted);font-family:inherit;font-weight:400;font-size:10.5px;margin-left:4px}
.measbox .mrow.sub .mv{color:var(--accent)}
.alignbox{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2;pointer-events:none}
.alignbox span{background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--line);border-radius:20px;padding:2px 9px;font-size:10.5px;color:var(--muted);white-space:nowrap}
.floorbox{user-select:none;-webkit-user-select:none;touch-action:none}
.vecbox{position:absolute;top:8px;right:8px;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--accent);border-radius:9px;padding:8px 10px;z-index:3;min-width:150px}
.vecbox .vh{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.vecbox .vh .x{cursor:pointer;color:var(--muted);font-size:13px;line-height:1}
.vecbox .vrow3{display:flex;align-items:center;gap:8px;font-size:11px;font-family:var(--mono);color:var(--ink);padding:2px 0}
.vecbox .vrow3 .k{width:10px;color:var(--muted)}
.distbox .dbh{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.distbox .drow2{display:flex;justify-content:space-between;gap:12px;padding:1px 0;font-size:11px;font-family:var(--mono);color:var(--muted)}
.distbox .drow2 b{color:var(--ink);font-weight:500}
.btn.tgl{flex:1}
.btn.tgl.on{background:color-mix(in srgb,var(--trans) 16%,transparent);border-color:var(--trans);color:var(--trans)}
.floorbox svg{width:100%;height:100%;display:block}
/* Neuer Weg nach animiertem Bildwechsel sanft einfaden (statt hart aufploppen). */
@keyframes transfadein{from{opacity:0}to{opacity:1}}
#field .transfade{animation:transfadein .22s ease-out}
@media (prefers-reduced-motion:reduce){#field .transfade{animation:none}}
.orient{text-align:center;font-size:10px;color:var(--muted);letter-spacing:.08em;margin:4px 0 2px;text-transform:uppercase}
/* Unter dem Feld auflockern (Axel: „viel zu gedrungen"). */
#fieldFoot{padding:2px 0}
.nav{display:flex;align-items:center;justify-content:center;gap:14px}
.nav .arw{width:34px;height:30px;border:1px solid var(--line);background:var(--panel);border-radius:8px;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.nav .arw:hover{background:var(--panel2)}
.nav .arw:disabled{opacity:.35;cursor:default}
.nav .pos{font-family:var(--mono);font-size:12.5px;color:var(--muted);min-width:56px;text-align:center}
.mstrip{margin-top:8px}
.band{position:relative;display:flex;height:22px;border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.bandseg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;white-space:nowrap;overflow:hidden;min-width:0}
.bandseg.cur{outline:2px solid var(--ink);outline-offset:-2px}
.third{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.5}
.scrub{display:flex;align-items:center;gap:9px;margin-top:5px}
.scrub input[type=range]{flex:1;accent-color:var(--accent)}.scrub .t{font-family:var(--mono);font-size:10.5px;color:var(--muted);min-width:32px}

.frow{margin-bottom:7px}.frow:last-child{margin-bottom:0}
.frow label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:3px}
.fin{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 8px;color:var(--ink);font-size:12.5px;width:100%;font-family:var(--sans)}
.fin.mono{font-family:var(--mono)}
.dsel{display:flex;align-items:center;gap:7px}.dchip{width:11px;height:11px;border-radius:3px;flex:none}
.seglabel{font-size:10.5px;color:var(--muted);margin:8px 0 4px}.seglabel:first-child{margin-top:0}
/* Innen-Schalter: bewusst LEICHTER als die Haupt-Tabs im .hd-Streifen (Axel) — flache Kontur,
   aktive Option nur dezent gefüllt statt als Karte. */
.seg{display:flex;background:transparent;border:1px solid var(--line2);border-radius:8px;padding:2px}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);font-size:11px;padding:4px 4px;border-radius:6px;cursor:pointer}
.seg button:hover{color:var(--ink)}
/* Aktive Option DEUTLICH (Axel: „in Tagansicht nicht erkennbar welche Einstellung"): Akzent-Tönung
   + Akzent-Text + dünner Akzentrahmen — klar in Tag UND Nacht. */
.seg button.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.seg.mono button{font-family:var(--mono)}.seg.acc button.on{color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.chk{display:flex;align-items:center;gap:7px;font-size:12px;margin-top:3px}
.player{display:flex;align-items:center;gap:8px}
.pp{width:27px;height:27px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none}
.player input[type=range]{flex:1;accent-color:var(--accent)}.player .sp{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:32px;text-align:right}.player .mute{color:var(--muted);cursor:pointer;flex:none}
.pp:disabled{opacity:.35;cursor:default}
input[type=range]:disabled{opacity:.4;cursor:default}
#wave{transition:none}
.tmr{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line2)}
.tmr label{font-size:11px;color:var(--muted)}.tmr .fin{width:66px;padding:4px 6px;text-align:center}
.aligns{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.algn{border:1px solid var(--line);background:var(--panel2);border-radius:6px;height:27px;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.algn:hover{background:var(--panel);border-color:var(--accent);color:var(--accent)}
.vnote{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 8px;color:var(--ink);font-size:12px;width:100%;font-family:var(--sans);resize:none;flex:1;min-height:44px}
/* Trainernotizen-Thread (Autor:in + Zeit + erledigt). Die Liste SCHMIEGT sich an ihren Inhalt
   (flex:0 1 auto) — leere Liste = kein Leerraum zwischen Kopf und Eingabefeld (Axel); wird sie
   länger als der Platz, scrollt sie. Das Eingabefeld sitzt direkt unter der letzten Notiz. */
.nlist{overflow:auto;flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;padding:2px 0}
.nrow{display:flex;align-items:flex-start;gap:9px;padding:7px 9px 8px;border:1px solid var(--line2);border-radius:9px;background:var(--panel2)}
.nrow.done{opacity:.55}
.nrow.done .ntext{text-decoration:line-through}
.nmain{flex:1;min-width:0}
.nmeta{font-size:10px;color:var(--muted);margin-bottom:2px;letter-spacing:.01em}
.ntext{font-size:12.5px;line-height:1.45;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.ndone{flex:none;border:1.5px solid var(--line);background:transparent;color:transparent;width:17px;height:17px;margin-top:2px;border-radius:50%;font-size:10px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .1s}
.ndone:hover{border-color:var(--ok)}
.nrow.done .ndone{background:var(--ok);color:#fff;border-color:var(--ok)}
.ndel{flex:none;border:0;background:transparent;color:var(--muted);opacity:.5;font-size:14px;line-height:1;cursor:pointer;padding:2px 3px;border-radius:4px}
.nrow:hover .ndel{opacity:1}
.ndel:hover{color:var(--accent)}
.naddrow{display:flex;gap:6px;align-items:flex-end;margin-top:8px;flex:none;position:relative}
#edNoteNew{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px;color:var(--ink);font-family:var(--sans);resize:none;min-height:38px;max-width:100%}
#edNoteNew:focus{outline:none;border-color:var(--accent)}
#edNoteAdd{flex:none;padding:7px 12px;align-self:flex-end}
/* Noch KEINE Notiz → großes Eingabefeld (Axel: „in groß"); sobald es Notizen gibt, wandert es klein nach unten. */
.notesect.empty .naddrow{flex:1;align-items:stretch}
.notesect.empty #edNoteNew{min-height:0}
/* @-Trainer-Auswahl (Mention) über dem Eingabefeld */
.nmention{position:absolute;left:0;right:44px;bottom:calc(100% + 4px);z-index:8;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-height:180px;overflow:auto;padding:4px}
.nmention[hidden]{display:none}
.nmention button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font-size:12.5px;padding:6px 9px;border-radius:6px;cursor:pointer}
.nmention button:hover,.nmention button.on{background:var(--panel2)}
.nmrole{color:var(--accent);font-size:10px;font-weight:600;margin-left:6px}
.nmentiontag{color:var(--accent);font-weight:600}
.noteitem{padding:5px 0;border-top:1px solid var(--line2);font-size:12px;color:var(--muted);line-height:1.4}
.noteitem:first-child{border-top:0}.noteitem b{color:var(--ink);font-weight:500}.noteitem small{opacity:.8;font-size:10px}
/* Vergrößert = Overlay über der Seitenleiste: eigenes Innen-Padding, Liste wächst mit dem Inhalt,
   das Eingabefeld bleibt VOLL sichtbar (kein Abschneiden von Knopf/Fokusring — Axel). */
.notesect.expanded{position:absolute;inset:0;background:var(--panel);z-index:6;border-radius:12px;padding:12px 14px 14px;display:flex;flex-direction:column;overflow:hidden}
.notesect.expanded .nlist{flex:0 1 auto}
.notesect.expanded .naddrow{margin-top:10px;padding-right:2px}
.emptyhint{color:var(--muted);font-size:12px;padding:8px 2px;line-height:1.5}
/* Verlauf: Ereignis-Zeilen (wer/wann/was) + gruppierte Tänzer-Aktivität (aufklappbar) */
.histrow{display:flex;align-items:baseline;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line2);font-size:12.5px;cursor:pointer;border-radius:6px}
.histrow:hover{background:var(--panel2)}
.histbar{display:flex;justify-content:flex-end;margin-bottom:8px;min-height:0}
.hdel{flex:none;border:0;background:transparent;color:var(--muted);opacity:.4;font-size:15px;line-height:1;cursor:pointer;padding:0 3px;border-radius:4px;margin-left:2px}
.histrow:hover .hdel{opacity:1}
.hdel:hover{color:var(--accent)}
.hdet{display:flex;flex-direction:column;gap:8px}
.hdrow{display:flex;gap:10px;font-size:12.5px;line-height:1.5}
.hdrow .hdk{flex:none;width:66px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.hdrow>span:last-child{color:var(--ink)}
/* #138: Fassung des auslösenden Geräts — dezent, es ist eine Diagnose-Angabe, keine Nachricht. */
.hdv{margin-left:8px;color:var(--muted);font-family:var(--mono);font-size:11px}
.histrow:last-child{border-bottom:0}
.histrow .ht{color:var(--muted);font-size:11.5px;white-space:nowrap;flex:none}
.histrow .hnosnap{font-size:10px;font-weight:600;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));border-radius:5px;padding:1px 6px;white-space:nowrap;flex:none}
.hcur{color:var(--muted);font-size:11px;white-space:nowrap;flex:none;font-style:italic}
.histrow .hwho{font-weight:500;color:var(--ink);flex:0 0 108px;width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.histrow .hsum{flex:1;color:var(--muted);min-width:0}
.histrow .btn.xs{flex:none}
.histgrp{border:1px solid var(--line2);border-radius:9px;margin:6px 0;padding:0 9px;background:var(--panel2)}
.histgrp summary{cursor:pointer;padding:7px 0;font-size:12px;color:var(--muted);list-style:none;display:flex;align-items:baseline;gap:8px}
.histgrp summary::before{content:"▸";font-size:10px;transition:transform .12s}
.histgrp[open] summary::before{transform:rotate(90deg)}
.histgrp .hgs{margin-left:auto;font-size:10.5px}
/* Google-Sheet-Liste (Info): Leiste (öffnen/aktualisieren) + Fehlerhinweis */
.sheetbar{display:flex;gap:8px;align-items:center;margin:2px 0 10px}
.sheetbar .btn{text-decoration:none}
.sheeterr{font-size:12px;color:var(--warn);background:var(--warn-bg);border-radius:9px;padding:9px 12px;line-height:1.5}
.sheetwrap{max-height:60vh;overflow:auto}
/* Umschalter Ansehen (formatiert) ↔ Bearbeiten (Grid) */
.sheetmode{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sheetmode button{border:0;background:transparent;color:var(--muted);font-size:11.5px;font-weight:600;padding:5px 11px;cursor:pointer;font-family:inherit;line-height:1}
.sheetmode button+button{border-left:1px solid var(--line)}
.sheetmode button.on{background:var(--accent);color:#fff}
/* Formatierte Sheet-Anzeige (gviz-HTML): wie ein echtes Sheet — heller Grund, damit Google-Zellfarben/Fett stimmen */
.sheethtml{background:#fff;color:#111;border-radius:8px;padding:2px;overflow:auto;max-height:62vh;max-width:100%}
.sheethtml table{border-collapse:collapse;font-size:12.5px;width:auto}
.sheethtml td,.sheethtml th{border:1px solid #d4d4d4;padding:4px 8px;color:#111;vertical-align:top}
/* Zwei-Wege-Sheet: editierbares Grid (nur Staff). Zellen contenteditable, Kopf mit Spalten-×, je Zeile ×. */
.shedhint{font-size:11px;color:var(--muted);margin-left:auto}
.tztbl.shedit td[contenteditable],.tztbl.shedit th .shedh,.tztbl.shedit [data-shhead]{cursor:text}
.tztbl.shedit td[contenteditable]:focus,.tztbl.shedit [data-shhead]:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent);border-radius:2px}
.tztbl.shedit .shedh{padding:0}
.tztbl.shedit .shedhw{display:flex;align-items:center;gap:6px;padding:4px 6px}
.tztbl.shedit .shedhw [data-shhead]{flex:1;font-weight:600;min-width:40px}
.shdel{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;border-radius:4px;opacity:.55}
.shdel:hover{opacity:1;color:var(--accent);background:var(--panel)}
.tztbl.shedit .shtool,.tztbl.shedit .shtoolh{border:0;width:26px;text-align:center;background:transparent}
.shedbtns{display:flex;align-items:center;gap:8px;margin-top:9px}
/* Glocke: Benachrichtigungs-Panel (Absagen) */
.bellpop{position:fixed;top:44px;right:12px;z-index:70;width:min(360px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.3);padding:11px 13px}
.bellhd{font-size:12.5px;font-weight:600;margin-bottom:6px}
.belllist{max-height:min(340px,50vh);overflow:auto;margin-bottom:8px}
.bellrow{display:flex;gap:9px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line2);font-size:12px}
.bellrow:last-child{border-bottom:0}
.bellrow .ht{color:var(--muted);font-size:11px;white-space:nowrap;flex:none}
.bellrow .hsum{flex:1;color:var(--ink);min-width:0}
.bellrow.new .hsum{font-weight:600}
/* Glocke, zusammengefasst: Abschnitte + eine Zeile je Termin (Netto-Stand statt Ereignis-Protokoll) */
/* Verlauf: Tagesabschnitte statt einer gleichförmigen Kette (Auto-Sicherungen) */
.histday+.histday,.histalt .histday+.histday{margin-top:10px}
.hdaylbl{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:4px 0 2px;position:sticky;top:0;background:var(--panel);z-index:1}
.hdaylbl::after{content:"";flex:1;height:1px;background:var(--line2)}
.hdayn{font-weight:500;letter-spacing:0;text-transform:none;font-size:10.5px;opacity:.75}
.histalt{margin-top:10px}
.bellsec{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:9px 0 3px;font-weight:600}
.belllist>.bellsec:first-child{margin-top:0}
.bellrow{flex-wrap:wrap}
.bellrow[data-bellterm]{cursor:pointer;border-radius:6px;padding:5px 6px;margin:0 -6px}
.bellrow[data-bellterm]:hover{background:var(--panel2)}
/* #124: In den MELDUNGS-Abschnitten steht nur noch die Uhrzeit — das Datum trägt der Tageskopf. Die
   112-px-Spalte braucht deshalb nur noch der Absagen-Block, dessen Zeile ein Termindatum führt. */
.bellwann{color:var(--muted);font-size:11px;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.bellrow[data-bellterm] .bellwann{min-width:112px}
.bellzahl{flex:1;min-width:0;font-size:11px;color:var(--muted)}
.bellrow[data-bellterm] .bellzahl{flex:none}
.bellzahl.warn{color:var(--ink);font-weight:600}
/* #124: Namen NEBEN der Zahl statt in einer eigenen, um 121 px eingerückten zweiten Zeile — das war der
   größte Leerraum-Erzeuger im Fenster (eine Extrazeile je Termin). Der volle Stand steht im Überfahrtext
   und nach dem Antippen im Termin-Überblick. */
.bellnamen{flex:1;min-width:0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bellmehr{font-size:11px;color:var(--muted);padding:5px 0}
.bellwer{flex:0 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bellwas{flex:1;color:var(--muted);min-width:0}
/* #124: Jede Meldung passt auf EINE Zeile — der Auszug wird abgeschnitten, nicht umgebrochen. Zwei
   Zeilen je Meldung waren der größte Höhentreiber; der volle Text steht nach dem Antippen an der Notiz. */
.bellrow .hsum{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
/* Tagesköpfe im Aufklappfenster: dieselbe Marke wie im Verlauf (.hdaylbl bringt Klebe-Verhalten und
   Hintergrund schon mit — und .bellpop hat denselben Hintergrund, deshalb klebt es sauber). */
.belllist .hdaylbl{margin-top:7px}
.belllist .bellrow+.hdaylbl{margin-top:9px}
.bellrow:has(+.hdaylbl){border-bottom:0}
.bellrow.new .bellwann::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:middle}
@media(max-width:640px){.bellrow[data-bellterm] .bellwann{min-width:0}}

.cmain{flex:1;min-width:0;display:grid;grid-template-columns:1fr 300px;grid-template-rows:1fr 120px;gap:10px}
/* Einheitlicher Player (dasselbe #playerBar wandert zwischen Editor- und Choreo-Slot) */
#choreoPlayerSlot{grid-column:1 / -1}
.playerslot{min-width:0;min-height:0;display:flex}
.edmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px;min-height:0}
.edtop{flex:1;min-height:0;display:flex;gap:11px}
.edmain>#editorPlayerSlot{flex:none;height:120px}
/* Rechte Leiste: Bearbeiten-Inhalt scrollt bei Bedarf; Tänze/Aufstellung füllen die Höhe. */
#rtEdit{overflow:auto}
/* Gruppen in „Bearbeiten" klar absetzen (Musik / Raster / Sichtbarkeit): dünner Trenner + Luft. */
.rtgrp{border-top:1px solid var(--line2);margin-top:11px;padding-top:10px}
#taBody{flex:1;min-height:0;display:flex;flex-direction:column}
/* Countsheet in der Editor-Mitte (ersetzt nur das Feld; Leisten + Player bleiben). */
#countBody{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:7px;padding-top:2px}
.playerbar{flex:1;min-width:0;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:16px;padding:10px 16px}
/* Mediensteuerung zwischen Kurve (links) und CTAs (rechts): oben ±5s + großer Play,
   darunter AUF LÜCKE Mute + Stopp. */
.pb-transport{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.pb-transport .pp.big{width:40px;height:40px}
.pb-row{display:flex;align-items:center;gap:9px}
.pb-row.sub{gap:30px}
.pp.wide{width:auto;height:27px;border-radius:14px;padding:0 9px;display:inline-flex;align-items:center;gap:3px}
.pp.wide small{font-size:9.5px;font-family:var(--mono);line-height:1}
.pb-wave{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
/* CTA-Spalte rechts: „Audiokurve" + „Entkoppeln" als Gruppe VERTIKAL ZENTRIERT neben dem
   Transport — wirkt gekoppelt statt oben angepappt (Feedback). */
.pb-tempo{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:8px}
.pb-tempo .dtlbtn{margin:0}
/* Tempo-Regler sitzt im Kurven-Fuß (statt Dateiname) — breiter, flacher */
.musicfoot{align-items:center}
/* ±-Knöpfe dicht am Regler (Axel): die Zeiten links/rechts nehmen den freien Platz auf,
   damit −, Regler und + als eine Einheit zusammenstehen statt auseinandergezogen zu werden. */
.musicfoot #coCur{flex:1 1 0}
.musicfoot #coTotal{flex:1 1 0;text-align:right}
.musicfoot .tstep{flex:none}
.musicfoot .temposlider{flex:1;max-width:320px;height:20px;margin:0;border-radius:10px}
.musicfoot .temposlider .ts-label span{font-size:10.5px}
.pb-timeline{position:relative;display:flex;flex-direction:column;gap:5px}
.pb-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);pointer-events:none;transform:translateX(-1px);z-index:2}
.pb-tempo{flex:none;width:150px}
.cpanel{background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.cpanel .hd{padding:7px 11px;border-bottom:1px solid var(--line2);font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:8px}
/* Panel-Tab-Leiste: deutlicher abgesetzt (mehr Luft, eigener Grund, klarer aktiver Tab) —
   Feedback „wirkt gequetscht". Gilt für Verorten/Countsheet UND Tänze/Aufstellung/Eigenschaften. */
.cpanel .hd:has(.tabm){padding:6px 9px;background:var(--panel2);border-bottom:1px solid var(--line)}
.cpanel .hd .tabm{display:flex;gap:5px}
.tabm button{border:1px solid transparent;background:transparent;color:var(--muted);font-size:11.5px;padding:5px 12px;border-radius:8px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500}
.tabm button:hover{color:var(--ink);background:var(--panel)}
.tabm button.on{background:var(--panel);border-color:var(--line);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.cpanel .bd{padding:9px 11px;flex:1;min-height:0;display:flex;flex-direction:column}
/* hidden-Attribut muss auch gegen display:flex-Regeln gewinnen (Verorten ↔ Countsheet-Tab). */
[hidden]{display:none!important}

.verorten .bd{flex-direction:row;gap:10px}
.vleft{flex:1;min-width:0;display:flex;flex-direction:column}
/* Quadrat = MIN aus Breite/Höhe des Wrappers (Container-Query-Einheiten) — height:100% +
   aspect-ratio konnte breiter werden als die Spalte und überlappte die Bearbeitungsspalte. */
.vfieldwrap{flex:1;min-height:0;min-width:0;display:grid;place-items:center;container-type:size}
.vfieldwrap .floorbox{height:min(100cqw,100cqh);width:min(100cqw,100cqh)}
.vright{width:214px;flex:none;display:flex;flex-direction:column}

#wave{display:block;width:100%;height:auto}
.musicbd{padding:9px 12px;display:flex;flex-direction:column;gap:5px;min-height:0}
.waveov{display:block;width:100%;height:44px;flex:none;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;cursor:pointer;touch-action:none;user-select:none}
.waveov:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2))}
.musicfoot{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10.5px;color:var(--muted);margin-top:1px}   /* ±-Knöpfe dicht am Regler (Axel): die Zeiten links/rechts nehmen den Platz auf */
.musicfoot .precise{color:var(--ink);font-size:12px}
.edwave{display:block;height:26px;background:var(--panel2);border-radius:6px;touch-action:none}
/* Tanz-Band: Segmente absolut im aktuellen Fenster positioniert (scrollt mit der Wellenform) */
.cdance{position:relative;height:16px;border-radius:6px;overflow:hidden;border:1px solid var(--line);cursor:pointer;touch-action:none;user-select:none}
.cdance .bandseg{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;white-space:nowrap;overflow:hidden}
.cdance .bandseg.cur{outline:1.5px solid var(--ink);outline-offset:-2px;z-index:1}
.cthird{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.55}
/* Detail-Lupe der Musik-Leiste (schwebt fixed über der Übersicht) */
.wavedetail{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.30);overflow:hidden;touch-action:none;user-select:none;cursor:ew-resize}
.wavedetail svg{display:block;width:100%;height:100%}
.wavedetail .wd-time{position:absolute;top:6px;transform:translateX(-50%);background:var(--accent);color:#fff;font-family:var(--mono);font-size:13px;font-weight:600;padding:3px 9px;border-radius:6px;pointer-events:auto;cursor:grab;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25);user-select:none}
.wavedetail .wd-time:active{cursor:grabbing}
.fin.droptarget{outline:2px dashed var(--accent);outline-offset:1px;background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
.wavedetail .wd-info{position:absolute;top:7px;left:10px;font-size:13px;font-weight:600;color:var(--ink);pointer-events:none;display:flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--panel) 90%,transparent);padding:3px 9px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.wavedetail .wd-info .wd-dot{width:9px;height:9px;border-radius:50%;flex:none}

.dlist{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px}
.drow{display:grid;grid-template-columns:14px 1fr auto 58px 15px;gap:5px;align-items:center;padding:4px 5px;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-size:11.5px}
.drow .tlabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow.emptyseg{opacity:.6;border-style:dashed}
.drow .segempty{color:var(--muted);font-size:9px;font-style:italic}
.drow input.tstart{pointer-events:auto;cursor:text}
.drow input.tstart:focus{outline:none;border-color:var(--accent)}
.drow .segrm{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;pointer-events:auto;padding:0;text-align:center}
.drow .segrm:hover{color:var(--trans)}
.tawarn{flex:none;margin-bottom:6px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--trans) 45%,var(--line));background:color-mix(in srgb,var(--trans) 10%,var(--panel));border-radius:7px;font-size:10.5px;color:var(--ink);line-height:1.4}
.tawarn b{display:block;margin-bottom:2px;color:var(--trans);font-size:10px}
.taadd{flex:none;margin-top:7px;width:100%;border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:7px;padding:6px;font-size:11px;cursor:pointer}
.taadd:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--ink)}
.drow .pre5{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:5px;padding:2px 5px;font-family:var(--mono);font-size:9px;line-height:1;cursor:pointer;pointer-events:auto;white-space:nowrap}
.drow .pre5 svg{width:8px;height:8px}
.drow .pre5:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--ink)}
.drow.pin{background:var(--panel2);border-style:dashed}
.drow .gh{color:var(--muted);cursor:grab;text-align:center}
.drow.pin .gh{visibility:hidden}
.drow .dc{width:9px;height:9px;border-radius:50%;display:inline-block;vertical-align:-1px;margin-right:6px}
.drow input{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:3px 4px;width:100%;font-family:var(--mono);font-size:10.5px;color:var(--ink);text-align:center}
.drow .rm{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.drow.drag{opacity:.4}.drow.over{border-color:var(--accent)}
.drow.seekrow{cursor:pointer}.drow.seekrow:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--panel2)}
.drow input{pointer-events:none}   /* Klick auf die Zeile springt, ohne das readonly-Feld zu fokussieren (sonst Leertaste tot) */
.addt{margin-top:6px;display:flex;gap:6px}
.addt select{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:11px;color:var(--ink)}

.pairgrid{display:flex;flex-direction:column;gap:5px;overflow:auto;min-height:0}
.ptile{border:1px solid var(--line);border-radius:8px;padding:5px 8px;display:grid;grid-template-columns:22px 1fr 1fr;gap:9px;align-items:center}
.pin{background:transparent;border:0;border-bottom:1px solid var(--line2);font-size:12px;color:var(--ink);padding:3px 4px;font-family:var(--sans);min-width:0}
.pin:hover{border-bottom-color:var(--line)}.pin:focus{outline:none;border-bottom-color:var(--accent)}
.pnum{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:center;border:1px solid var(--line);border-radius:5px;padding:1px 0}
.ptile.mine .pnum{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* ---- Aufstellungs-Tab: Positionen + Tänzer-Pool (Drag&Drop) ---- */
.aufwrap{display:flex;flex-direction:column;min-height:0;flex:1;gap:8px}
.aufhd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.aufhd>span{font-size:12px;font-weight:700;color:var(--ink)}
.aufcta{display:inline-flex;gap:6px}
.btn.xs{font-size:11px;padding:4px 9px;border-radius:7px}
.aufwarn{font-size:11px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:7px;padding:5px 8px}
.aufseed{font-size:12px;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.aufgrid{display:flex;flex-direction:column;gap:5px;overflow:auto;min-height:60px}
.aufpos{display:grid;grid-template-columns:22px 1fr 1fr;gap:7px;align-items:stretch}
.aufnum{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:center;border:1px solid var(--line);border-radius:5px;padding:1px 0;align-self:center}
.aufslot{border:1px solid var(--line);border-radius:8px;padding:4px 6px 5px;min-height:34px;background:var(--panel);transition:border-color .1s,background .1s}
.aufslot.over,.aufpool.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.aufsl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.aufchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;min-height:20px}
.aufempty{font-size:11px;color:var(--muted2,var(--muted));opacity:.7;font-style:italic;padding:2px 1px}
.aufchip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:2px 5px 2px 9px;cursor:grab;user-select:none;touch-action:none}
/* „Geist", der beim Finger-Ziehen (iPad) mitwandert */
.aufghost{position:fixed;z-index:9999;transform:translate(-50%,-50%);pointer-events:none;opacity:.92;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.aufchip:active{cursor:grabbing}
.aufchip.drag{opacity:.4}
.aufchip.ph{background:transparent;border-style:dashed;color:var(--muted)}
.aufchip.dup{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.aufchip.pool{padding-left:5px}
.aufchip.pool.dummy{border-style:dashed}
.aufchip.pool.pend{border-color:var(--accent)}
.aufdr{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:0 3px;line-height:1.5}
.aufbadge{font-size:8.5px;font-weight:700;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:0 3px}
.aufx{border:0;background:transparent;color:var(--muted);font-size:13px;line-height:1;cursor:pointer;padding:0 1px;border-radius:3px}
.aufx:hover{color:var(--accent)}
.aufpoolhd{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:2px}
.aufadd{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:6px;width:22px;height:22px;font-size:15px;line-height:1;cursor:pointer;flex:none}
.aufadd:hover{border-color:var(--accent);color:var(--accent)}
.aufpool{display:flex;flex-wrap:wrap;gap:5px;padding:7px;border:1px dashed var(--line);border-radius:9px;min-height:44px;align-content:flex-start}
.aufhint{font-size:10.5px;color:var(--muted);line-height:1.4}

.histwrap{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:11px;min-height:0}
.hcol{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;min-height:0}
.hcol>h4{margin:0 0 9px;font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.vlist{overflow:auto;display:flex;flex-direction:column;gap:7px;min-height:0}
.vrow{display:grid;grid-template-columns:26px 1fr auto;gap:9px;align-items:center;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.vrow .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:500;color:#fff}
.vrow .vb b{font-weight:500}.vrow .vb small{display:block;color:var(--muted);font-size:10.5px}
.rest{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:5px 9px;font-size:11px;cursor:pointer;color:var(--ink)}
.rest:hover{border-color:var(--accent);color:var(--accent)}

/* Einstellungen in Unter-Tabs: Choreografie (global) · Anzeige (lokal) · Zugriff */
.setwrap2{flex:1;min-height:0;display:flex;flex-direction:column;gap:11px}
/* Einstellungen-Umschalter (Bedienung|Choreografie) nutzt jetzt dasselbe Pill wie Choreo/Team (.tabm.sheets). */
#setTabs{align-self:flex-start}
.setpanel{display:none;flex:1;min-height:0;overflow:auto}
.setpanel.on{display:flex;flex-direction:column;gap:11px}
/* Zwei feste Spalten (Axel): LINKS Darstellung, RECHTS Steuerung + Trainings-Sperre. Die Spalten strecken sich
   auf gleiche Höhe und die LETZTE Box jeder Spalte füllt den Rest → links endet bündig mit rechts (stimmiger). */
.setgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;align-items:stretch}
.setcol{display:flex;flex-direction:column;gap:11px;min-width:0}
.setcol>.scard:last-child{flex:1}
@media(max-width:760px){.setgrid{grid-template-columns:1fr}.setcol>.scard:last-child{flex:0 0 auto}}
/* Unter-Überschrift innerhalb einer Einstellungs-Box (z. B. „Bilderplan-Anzeige", „App-Symbol & Logo"). */
.ssub{margin:16px 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ssub:first-of-type{margin-top:12px}
/* Vereinslogo-Zeile (Vorschau + hochladen/entfernen) */
.clublogorow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clublogorow .cllogo{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);object-fit:contain;padding:3px}
.clublogorow .cldrop{color:var(--muted);font-size:12.5px}
.setsavebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 14px;flex:none}
.setnote-inline{font-size:11.5px;color:var(--muted)}
.setnote{font-size:12px;color:var(--muted);padding:0 2px;flex:none}
.setnote b{color:var(--ink);font-weight:500}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.scard h3{margin:0 0 12px;font-size:15.5px;font-weight:700;color:var(--ink)}   /* klar größer/fetter als der Zeilentext (12,5px), Axel */
.setdirty{font-size:11px;color:var(--muted)}
.setdirty.on{color:var(--warn);font-weight:600}
.rolerow{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--muted);padding:7px 0;line-height:1.45}
.rolerow + .rolerow{border-top:1px solid var(--line2)}
.rolebadge{flex:none;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.rolebadge.admin{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.rolebadge.cap{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.colorrow{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-top:1px solid var(--line2)}
.colorrow .dname{background:none;border:0;color:var(--ink);font-size:12.5px;cursor:pointer;padding:2px 4px;border-radius:5px;text-align:left}
.colorrow .dname:hover{background:var(--panel2);text-decoration:underline}
.colorrow .dx{width:22px;height:22px;border:1px solid var(--line);background:var(--panel2);border-radius:6px;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.colorrow .dx:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.colorrow .dx:disabled{opacity:.35;cursor:default}
.adddance{display:inline-flex;align-items:center;gap:6px}
.colorrow:first-of-type{border-top:0}.colorrow.mar span:first-child{color:var(--muted)}
.sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.muteln{font-size:11.5px;color:var(--muted);margin-top:8px}
/* Toggle-Schalter (wirkt professioneller als Häkchen) */
.swrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;cursor:pointer;font-size:12.5px;color:var(--ink)}
.switch{position:relative;flex:none;width:38px;height:22px}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.switch .track{position:absolute;inset:0;background:var(--line);border-radius:22px;transition:background .15s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::after{transform:translateX(16px)}
/* kleine Inline-Variante (z. B. „gehalten bis", „Bild für Tänzer ausblenden") */
.switch.sm{width:30px;height:18px}
.switch.sm .track::after{width:14px;height:14px}
.switch.sm input:checked+.track::after{transform:translateX(12px)}
/* kompakte Schalter-Zeilen (Sperre-Ausnahmen) */
.swrow.sm{padding:4px 0;font-size:12px}
/* Schloss aktiv (Trainings-Modus): Akzent + gefüllter Look */
.ib.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ib.pulse{animation:lockpulse .5s ease 2}
@keyframes lockpulse{50%{transform:scale(1.25);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}}
/* Sperr-Meldung: deutlich (Akzentrahmen + fett), verschwindet von selbst */
/* Sperr-Hinweis: PROMINENT und in BEIDEN Themes lesbar (vorher color:ink auf ink-Grund —
   „Farben vertauscht"-Feedback): heller Panel-Grund, Akzentrahmen, größer, etwas höher. */
#toast.lock{background:var(--panel);border:1.5px solid var(--accent);color:var(--ink);font-weight:600;font-size:13.5px;padding:13px 24px;bottom:34px;box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 40%,transparent)}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--muted);font-size:12px;margin-top:4px}
.drop b{color:var(--ink);font-weight:500}

/* Ladezustand */
/* LADESCHIRM (Axel: „cleaner/professioneller"). Ruhig und zurückhaltend: Wortmarke, dünner Laufbalken,
   Statuszeile erst nach 1,2 s — bei schnellem Start sieht man sie gar nicht und es flackert nichts. */
#loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;color:var(--muted);font-size:13px;transition:opacity .18s ease}
#loading[data-weg]{opacity:0;pointer-events:none}
.ldbox{width:210px;text-align:center}
.ldbrand{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.ldsub{font-size:12px;color:var(--muted);margin-top:1px}
.ldbar{height:2px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:17px}
.ldbar i{display:block;height:100%;width:38%;border-radius:2px;background:var(--accent);animation:ldslide 1.25s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes ldslide{0%{transform:translateX(-105%)}100%{transform:translateX(305%)}}
.ldstep{margin-top:11px;font-size:11.5px;color:var(--muted);min-height:14px;opacity:0;animation:ldfade .3s ease 1.2s forwards}
#loading[data-stuck] .ldbar i{animation:none;width:100%;background:var(--warn)}
#loading[data-stuck] .ldstep{animation:none;opacity:1}
@keyframes ldfade{to{opacity:1}}
.ldwarn{color:var(--ink);line-height:1.5}
.ldwarn b{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.ldbar i{animation-duration:2.4s}.ldstep{animation:none;opacity:1}}
.ro-badge{font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 8px}
#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:9px;font-size:12.5px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:200}
#toast.show{opacity:.96;transform:translateX(-50%) translateY(0)}
/* #140: Hinweis auf eine neue Fassung. Sitzt UNTEN mittig wie der Toast, bleibt aber stehen, bis jemand
   entscheidet — er ist keine Meldung, sondern eine Aufforderung. Über allem, damit er auch in der
   Tänzer-Ansicht nicht unter der Leiste verschwindet; safe-area wegen der installierten App am iPhone. */
.swupd{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:210;
  display:flex;align-items:center;gap:10px;max-width:min(520px,94vw);
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 10px 34px rgba(0,0,0,.28);padding:9px 10px 9px 14px;font-size:12.5px}
.swupdt{flex:1;min-width:0;line-height:1.4}
.swupdx{flex:none;background:none;border:0;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:6px}
.swupdx:hover{background:var(--panel2);color:var(--ink)}
@media(max-width:520px){.swupd{flex-wrap:wrap;left:8px;right:8px;transform:none;max-width:none}.swupdt{flex-basis:100%}}
.cpick{width:32px;height:22px;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;padding:0}
.chead .cn[contenteditable]:focus{outline:none;background:var(--panel2);box-shadow:0 0 0 1px var(--accent)}

/* Bewegungs-Vektor-Overlay (Modal, wie in der Tänzeransicht/Reader) */
.vecov{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.42);padding:16px}
#uiDialog{z-index:110}   /* Dialoge (z. B. Fokus-Auswahl) müssen ÜBER der PDF-Vorschau (.pdfov z-index 60) liegen */
.vecov[hidden]{display:none}
.veccard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 12px;box-shadow:0 12px 44px rgba(0,0,0,.32);max-width:92vw;max-height:88vh;overflow:auto}
.veccard svg{display:block;height:auto;max-width:100%;margin:0 auto}
.vecclose{position:absolute;top:8px;right:11px;background:none;border:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.vecclose:hover{color:var(--accent)}
.vec-head{display:flex;align-items:center;gap:9px;margin:0 26px 11px 0}
.vec-badge{flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.vec-names{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
.vec-amp{color:var(--muted);font-weight:400}
.vec-foot{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);text-align:center}
.vec-foot .vec-arrow{color:var(--accent);font-weight:700;font-size:13px}
.vec-foot .vec-bild.to{color:var(--ink)}

/* Design-Dialog (prompt/confirm-Ersatz + Warn-Flows + Zugangs-Gate) */
.dlgcard{min-width:300px;max-width:430px;padding:15px 17px 13px;position:relative}
/* #147: Schließen oben rechts — der lange Termin-Überblick am Handy hatte seinen einzigen Ausgang ganz
   unten. Klebt am oberen Rand der Karte, damit er auch beim Scrollen erreichbar bleibt. */
.dlgx{position:sticky;position:-webkit-sticky;top:0;float:right;margin:-6px -6px 0 8px;z-index:3;
  border:0;background:var(--panel);color:var(--muted);font-size:21px;line-height:1;cursor:pointer;
  width:32px;height:32px;border-radius:9px;flex:none}
.dlgx:hover{background:var(--panel2);color:var(--ink)}
.dlgx[hidden]{display:none}
/* Axel: das Absagen-Feld und der Name duerfen am PC breiter. Bei 430px Deckel und 110px
   Beschriftungsspalte blieben dem Eingabefeld keine 280px — der Platzhalter brach ab
   ("z. B. krank, Arbeit, Urlau"). Nur Dialoge MIT Formular werden breiter; einfache Rueckfragen
   (Loeschen? Wirklich?) bleiben kompakt, sonst wirkt eine Ja/Nein-Frage wie ein Formular.
   Erst ab 700px Fensterbreite — am Handy ist die Breite ohnehin durch den Bildschirm bestimmt. */
@media (min-width:700px){
  .dlgcard:has(.dlg-form){max-width:min(600px,92vw)}
  .dlgcard:has(.dlg-form) .dlg-form .dfrow>label{width:150px}
}
.dlg-title{font-size:13px;font-weight:600;margin-bottom:9px}
.dlg-body .dlg-text{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:7px}
/* 16px verhindert das iOS-Auto-Zoom beim Fokussieren (Axel: „zoomt extrem nah ran"). */
.dlg-body input,.dlg-body select,.dlg-body textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:13.5px;color:var(--ink);font-family:var(--sans)}
.dlg-body input:focus{outline:none;border-color:var(--accent)}
.dlg-list{display:flex;flex-direction:column;gap:4px;max-height:250px;overflow:auto;margin-top:2px}
.dlg-list button{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-size:12px;color:var(--ink);cursor:pointer;text-align:left}
.dlg-list button:hover{background:var(--panel2);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.dlg-list button.on{border-color:var(--accent)}
.dlg-list .dc{width:9px;height:9px;border-radius:50%;flex:none}
.dlg-warnlist{margin:4px 0 7px;padding:7px 9px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;max-height:150px;overflow:auto;font-size:11.5px;line-height:1.6;color:var(--ink)}
/* Freigabe-Hinweis (Termine): gespeicherte, aber noch nicht freigegebene Änderungen. */
.pubdiff{margin-top:6px;display:flex;align-items:center;gap:6px;color:var(--warn);font-size:11px;font-weight:500}
.pubdiff .d{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.pubdiff button{border:0;background:none;color:var(--warn);font-size:11px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.pubok{margin-top:6px;color:var(--ok);font-size:11px}
.difflist{margin:2px 0 2px 16px;font-size:11.5px;line-height:1.65;color:var(--ink)}
.difflist .mut{color:var(--muted)}
.dlg-text{max-height:52vh;overflow:auto}
.dlgcard.wide .dlg-text{max-height:none;overflow:visible}   /* Termin-Überblick: ALLES auf einer Seite — die Card selbst deckelt bei 94vh (Axel: „scrollen ist unnötig") */
/* „Noch nicht gespeichert"-Übersicht (Klick aufs Badge): Streams gruppiert, geänderte Bilder als Liste. */
.dlg-body .usg{margin:0 0 9px}
.usgh{font-weight:500;font-size:12.5px;color:var(--ink)}
.usl{margin:2px 0 0;padding-left:17px;color:var(--muted);font-size:12px;line-height:1.55}
.usdiff{color:var(--ink);opacity:.75}
.usnote{margin-top:4px;color:var(--muted);font-size:11.5px;border-top:1px solid var(--line2);padding-top:8px}
/* Zwischenüberschrift/Trenner im Dialog-Formular (z. B. „Nur für Trainer") */
.dfsect{margin:12px 0 2px;padding-top:10px;border-top:1px solid var(--line);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dlg-btns{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.dlg-btns button{padding:6px 13px;border-radius:7px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:12px;cursor:pointer}
.dlg-btns button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dlg-btns button:hover{filter:brightness(1.06)}

/* Detail-Ansicht-Schalter im Player (über dem Tempo) */
.dtlbtn{display:block;width:100%;margin:0 0 7px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--muted);font-size:11.5px;cursor:pointer;text-align:center}
.dtlbtn.on{border-color:var(--accent);color:var(--ink)}
.dtlbtn:hover{filter:brightness(1.05)}
/* Tempo-Slider: abgerundetes Rechteck, »-Symbol + Geschwindigkeit stehen IM Regler; der native
   range liegt unsichtbar darüber (Maus/Touch/Tastatur unverändert), .ts-fill zeigt die Position. */
.temposlider{position:relative;height:26px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:8px;background:var(--panel2);overflow:hidden}
.temposlider:hover{border-color:var(--accent)}
.temposlider .ts-fill{position:absolute;top:0;left:0;bottom:0;width:57%;background:color-mix(in srgb,var(--accent) 32%,transparent);box-shadow:inset -2px 0 0 var(--accent);transition:width .06s linear}
.temposlider .ts-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ink);pointer-events:none}
.temposlider .ts-label span{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink)}
.temposlider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}

/* ---------- Termine (Trainingsplanung) ---------- */
.planmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.planbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.planbar select{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:11.5px;color:var(--ink)}
.planbar .grow{flex:1}
.trlist{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px;padding-right:2px}
.trmonth{position:sticky;top:0;z-index:2;padding:6px 2px 3px;background:var(--panel);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* Badge- und Aktions-Spalte haben FESTE Breiten — sonst verschieben unterschiedlich breite
   Inhalte (z. B. andere Button-Sätze je Zeile) die fr-Spalten und nichts steht mehr bündig. */
.trrow{display:grid;grid-template-columns:104px 88px minmax(120px,180px) minmax(0,1fr) 118px 78px 96px;gap:3px 8px;align-items:center;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:11.5px;cursor:pointer}
/* Inline-Feld (Absagen-Zähler + Trainernotiz) zwischen Ort und Art — füllt den Leerraum, kürzt bei Bedarf */
/* LINKSBÜNDIG (Axel: „hässliche Bündigkeit bei den Anmerkungen"). Vorher lief der Inhalt rechtsbündig
   gegen das Art-Abzeichen — bei unterschiedlich langen Notizen begann jede Zeile woanders. Jetzt
   startet jede an derselben Kante, wie Datum, Zeit und Ort auch; das Abzeichen steht ohnehin fest
   in seiner eigenen 118-px-Spalte, der Abstand dorthin ist also kein Verlust. */
.trinfo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10.5px;display:flex;gap:8px;align-items:center;justify-content:flex-start}
.trinfo .trnote{overflow:hidden;text-overflow:ellipsis;min-width:0}
.trrow:hover{background:var(--panel2)}
.trrow.past{opacity:.5}
.trrow.abgesagt{opacity:.55}
.trrow.abgesagt .trdat, .trrow.abgesagt .trort{text-decoration:line-through}
.trdat{font-weight:600}
.trdat small{color:var(--muted);font-weight:400;margin-right:4px}
.trzeit{font-family:var(--mono);font-size:11px;color:var(--muted)}
/* „Kurzfristig geändert" (Abweichung vom Wochen-Standard, Axel): alte Angabe durchgestrichen ÜBER der neuen + Badge */
.trold{display:block;color:var(--muted);text-decoration:line-through;font-size:inherit;font-weight:400;line-height:1.35}
.trzeit.chg,.trort.chg{color:var(--ink)}
.trchg{margin-left:6px;font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent);border-radius:20px;padding:1px 6px;white-space:nowrap;vertical-align:middle}
/* Ort in der Zeile: KEIN Maps-Link mehr — Klick öffnet den Ort-Tausch-Picker (gepunktete
   Unterstreichung als Hinweis; Maps-Link liegt in der Orte-Verwaltung rechts). */
.trort .lk{border-bottom:1px dotted var(--muted)}
.trort:hover .lk{border-bottom-color:var(--ink)}
.trart{justify-self:start;padding:2px 8px;border-radius:9px;font-size:10px;font-weight:600;background:var(--panel2);border:1px solid var(--line);color:var(--muted);white-space:nowrap;cursor:pointer}
.trart:not(.abgesagt):hover{filter:brightness(1.15)}
.trart.abgesagt{cursor:default;color:var(--muted);text-decoration:line-through}
.trwx{font-size:10.5px;color:var(--muted);white-space:nowrap}
.trwx[data-wx]{cursor:pointer}
.trwx[data-wx]:hover{color:var(--ink)}
.trferi{margin-left:5px;font-size:10px;cursor:help}
/* Zusatzinfos (Anmerkung/Trainer/Notiz) als eigene, voll lesbare Zeile unterm Termin;
   der 🔒-Teil (Trainer/Notiz) ist rein intern und leicht abgesetzt. */
.trsub{grid-column:1/-1;font-size:10.5px;color:var(--muted);padding:0 2px 1px;line-height:1.45}
.trpriv{opacity:.85;border-left:2px solid var(--line);padding-left:7px}
.trabs{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.trabsn{color:var(--ink)}
.trabsg{color:var(--muted);font-style:italic}
/* P2 — Termin-Überblick (Anwesenheit/Absagen) im uiDialog-Body */
.tovhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.tovwhen{font-size:12.5px;color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:2px}
.tovort{font-size:11.5px;color:var(--muted)}
/* Direkt änderbare Uhrzeit/Ort im Termin-Überblick (kompakt, .dlg-body-Prefix schlägt die 16px-Regel) */
.dlg-body input.tovtime{width:auto;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 5px;font-size:12px;color:var(--ink);cursor:pointer}
.tovdash{color:var(--muted);margin:0 1px}
.dlg-body select.tovloc{width:auto;max-width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:3px 22px 3px 7px;font-size:11.5px;color:var(--ink);cursor:pointer}
/* Farbpalette (Oberteile-Picker + Farb-Punkt in Anzeigen) */
.cldot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);vertical-align:-1px;margin-right:4px}
.clhint{font-size:11px;color:var(--muted);line-height:1.4;margin-bottom:8px}
.clsec{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:11px 0 5px}
.clrow{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.clrl{flex:0 0 52px;font-size:12px;color:var(--ink);padding-top:5px}
.clchips{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.clchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:4px 11px 4px 8px;font-size:11.5px;color:var(--ink);cursor:pointer;font-family:inherit}
.clchip .cldot{margin-right:0}
.clchip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent);font-weight:600;box-shadow:0 0 0 1px var(--accent)}
.cladd{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.clswgrid{width:100%}
.claddrow{display:flex;align-items:center;gap:7px}
.dlg-body .cladd input[type=text]{flex:1;min-width:120px}
.slotadd{align-self:flex-start}
.tovinfo{font-size:11.5px;color:var(--ink);margin:2px 0}
.tovpriv{font-size:11px;color:var(--muted);margin:4px 0 2px;border-left:2px solid var(--line);padding-left:7px}
.tovpm{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-left:4px}
/* Termin-Überblick (Desktop): ALLES auf einer Seite ohne Scrollen (Axel) — Overlay wird eben größer:
   volle Breite bis 1240px, Höhe bis 94vh; Anwesenheits-Chips kompakter, damit 25 Namen reinpassen. */
.dlgcard.wide{max-width:min(1180px,96vw);width:min(1000px,96vw);max-height:94vh}
.dlgcard.wide .anchip{padding:2px 7px;font-size:10px}
.dlgcard.wide .anwrap{gap:1px}
.dlgcard.wide .angrid{gap:5px 8px}
.dlgcard.wide .tovsect{margin-top:9px;padding-top:7px}
/* Termin-Überblick zweispaltig (Anwesenheit | Aufstellung) — auf schmalen Screens gestapelt */
.tovcols{display:flex;gap:22px;align-items:flex-start}
.tovcols .tovcol{flex:1 1 0;min-width:0}
.tovcols .tovsect{margin-top:12px}
@media(max-width:640px){.tovcols{flex-direction:column;gap:0}}
.tovsect{margin-top:12px;border-top:1px solid var(--line);padding-top:9px}
.tovsecth{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.tovcount{font-size:10.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.tovcount.warn{color:var(--accent)}
/* Überblick = Bearbeiten (Merge): Art als Badge mit Dropdown, Datum als Popover, Felder inline. */
.tovart{position:relative;display:inline-flex;align-items:center;gap:4px}
.tovart .tovcaret{opacity:.75;pointer-events:none;flex:none}
.tovart select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0}
.tovart select option{color:var(--ink);background:var(--panel);font-weight:500}
.tovdate{display:inline-block}
.tovdate .dpfield{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:12px;color:var(--ink);cursor:pointer}
.tovrow{display:flex;align-items:center;gap:9px;margin:7px 0;flex-wrap:wrap}
.tovrl{font-size:11px;color:var(--muted);flex:none;min-width:82px}
.dlg-body input.tovin{flex:1;min-width:170px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:4px 9px;font-size:12px;color:var(--ink)}
.dlg-body input.tovin:focus{outline:none;border-color:var(--accent)}
.topsel{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:1px 5px 1px 8px;background:var(--panel)}
.topsel .tcr{color:var(--muted);font-weight:700;font-size:8.5px}
.dlg-body select[data-tovtoph],.dlg-body select[data-tovtopd]{background:transparent;border:0;font-size:11.5px;color:var(--ink);padding:2px 1px;cursor:pointer;max-width:120px}
.tovnote{font-size:10px;color:var(--muted)}
.tovlink{border:0;background:transparent;color:var(--accent);cursor:pointer;font-size:11.5px;text-decoration:underline;padding:0}
/* Anwesenheit JE PAAR (Trainer-Planungs-Übersicht): grün komplett / gelb teilweise / rot ganz weg */
.pvgrid{display:flex;flex-direction:column;gap:4px}
.pvrow{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:2px 8px;padding:4px 8px;border:1px solid var(--line);border-left:3px solid var(--line);border-radius:8px;background:var(--panel2)}
.pvrow.unpl{display:flex;align-items:center;gap:8px}
/* Schmal ohne Umbruch (Axel): EIN gemeinsames Raster über alle Zeilen — Spalten nur so breit wie der
   längste Inhalt, Damen-Spalte bleibt bündig. Ohne subgrid-Support greift die 1fr/1fr-Aufteilung oben. */
@supports (grid-template-columns: subgrid){
  .pvgrid{display:grid;grid-template-columns:max-content max-content max-content;justify-content:start;gap:4px 8px}
  .pvrow{grid-template-columns:subgrid;grid-column:1/-1}
  .pvrow.unpl{grid-column:1/-1}
}
.pvrow.full{border-left-color:var(--ok)}
.pvrow.partial{border-left-color:#d99320}
.pvrow.none{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
/* H/D-Split in der Paar-Zeile: Gruppen mit dezentem Trenner. Unplatzierte („Ohne Paar") als graue Zeile. */
.pvgrp{display:inline-flex;gap:7px;flex-wrap:wrap}
/* v160 (Axel: „Treppen"): H-Gruppe mit fester Breite -> die erste Dame beginnt in JEDER Zeile buendig */
.pvrow .pvgrp.d{border-left:1px solid var(--line2);padding-left:10px;align-self:stretch;align-items:center}
.pvsep{width:1px;align-self:stretch;background:var(--line);margin:0 5px}
.pvrow.unpl{border-left-color:var(--muted);opacity:.85}
.ancol.anunpl{grid-column:1 / -1}
/* Einmaliger Ort inline im Überblick-Kopf */
.tovonce{display:inline-flex;align-items:center;gap:5px}
.dlg-body input.tovloin{width:200px;flex:none}
.pvnum{font-family:var(--mono);font-size:10.5px;color:var(--muted);min-width:16px;text-align:center;border:1px solid var(--line);border-radius:5px;padding:1px 0}
.pvnames{display:flex;flex-wrap:wrap;gap:3px 9px;font-size:11px}
.pvname{color:var(--ink)}
.pvname.off{color:var(--accent);text-decoration:line-through}
.pvrole{font-size:8.5px;font-weight:700;color:var(--muted);font-family:var(--mono);margin-right:3px}
.pvname.off .pvrole{color:var(--accent)}
.angrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
.ancol{display:flex;flex-direction:column;gap:3px;min-width:0}
.ancolh{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 2px 1px}
.anwrap{display:flex;flex-direction:row;align-items:center;gap:5px}   /* Absage-Grund DIREKT NEBEN dem Namen (Axel) */
/* FESTE Namensbreite (Axel: „links schwimmt es zu sehr, weil du dich am Namen ausrichtest"):
   damit beginnen ALLE Grund-Felder an derselben Kante. Lange Namen werden gekürzt, der volle Name
   steht im Tooltip. Das Fenster darf dafür breiter sein (.dlgcard.wide). */
.anwrap .anchip{flex:0 0 132px;width:132px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex}
.anwrap .angrund{flex:1;min-width:80px}
.anchip{display:flex;align-items:center;gap:5px;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:3px 7px;font-size:10.5px;color:var(--ink);cursor:pointer}
.anchip:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.anrole{font-size:8.5px;font-weight:700;color:var(--muted);font-family:var(--mono);min-width:13px}
.anwrap.off .anchip{background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent);text-decoration:line-through}
.anwrap.off .anrole{color:var(--accent)}
/* .dlg-body-Prefix schlägt die 16px-Input-Regel (iOS-Zoom) → kompakter Grund wie gewünscht */
.dlg-body input.angrund{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 7px;font-size:11px;color:var(--ink)}
.angrund:focus{outline:none;border-color:var(--accent)}
.tovhint{font-size:10.5px;color:var(--muted);margin-top:8px;line-height:1.45}
/* P2 — Absagen-Auswertung (Saison) */
.aushint{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:9px}.aushint b{color:var(--ink);font-weight:500}
.auskurz{font-size:10px;font-weight:600;color:var(--warn);background:var(--warn-bg);border-radius:5px;padding:0 5px;white-space:nowrap}
.austbl{display:flex;flex-direction:column;gap:2px}
.ausrest{border-bottom:0;padding-top:8px;align-items:start}
.ausrest .auswhen{white-space:normal;line-height:1.5}
.ausrow{display:grid;grid-template-columns:minmax(150px,1.2fr) 62px 62px 110px minmax(90px,.6fr);gap:12px;align-items:baseline;padding:6px 4px;border-bottom:1px solid var(--line);font-size:11.5px}
.ausrow.aushead{border-bottom:1px solid var(--line);padding-bottom:3px}
.ausrow.aushead .ausc,.ausrow.aushead .auswhen{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ausc{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--accent)}
.ausc.warn{color:var(--warn)}
.ausrow.zero .ausc{color:var(--muted);font-weight:400}
.ausrow.zero{opacity:.5}
.ausn{display:flex;align-items:center;gap:6px;color:var(--ink)}
.auscnt{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);text-align:right}
.ausrow.zero .auscnt{color:var(--muted)}
.auswhen{font-size:10px;color:var(--muted);line-height:1.4}
/* Wetter-Detail-Dialog */
.wxhead{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:11.5px}
.wxhead .wxbig{font-size:26px}
.wxhead span:nth-child(2){flex:1}
.wxhead .wxsun{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right}
.wxfoot{margin-top:6px;font-size:9.5px;color:var(--muted)}
/* Countsheet (Verorten-Panel, 2. Tab): Filter-Chips je Tanz-Abschnitt, darunter das
   Zähler-Raster (Takte × Zähler) — jede Zelle mit Herren-/Damen-Zeile, direkt beschreibbar. */
#countBody{display:flex;flex-direction:column;min-height:0;gap:7px}
.cschips{display:flex;flex-wrap:wrap;gap:4px}
.cschip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--muted);font-size:11px;cursor:pointer}
.cschip:hover{color:var(--ink);border-color:var(--muted)}
.cschip.on{color:var(--ink);border-color:var(--accent)}
.cschip .dc{width:7px;height:7px;border-radius:50%;flex:none}
.csmeta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.csmeta b{color:var(--ink);font-weight:600}
.csmeta .warn{color:var(--warn)}
.csgap{flex:1}
.cshint{font-size:10px;color:var(--muted)}
.cshint.arm{color:var(--accent)}
.csrmbtn{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:5px;padding:1px 6px;font-size:10px;cursor:pointer}
.csrmbtn:hover{color:var(--accent);border-color:var(--accent)}
.csbilder{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.csbild{min-width:24px;padding:2px 5px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);color:var(--muted);font-family:var(--mono);font-size:10.5px;cursor:pointer}
.csbild.set{color:var(--ink);border-color:var(--muted)}
.csbild.arm{border-color:var(--accent);color:var(--accent)}
.csscroll{flex:1;min-height:0;overflow:auto}
/* Div-Raster statt Tabelle: jeder Takt kann EIGENE Zähler haben (Zeile teilt ihre Breite
   unter ihren Zellen auf; abweichende Takte zeigen Mini-Zähler-Labels in den Zellen). */
.csghead{display:flex;position:sticky;top:0;z-index:1;background:var(--panel);border-bottom:1px solid var(--line)}
.csghead .csgh{flex:1;text-align:center;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:3px 6px}
.csghead .csnum,.csgrow .csnum{width:44px;flex:none;text-align:right;font-family:var(--mono);font-size:10.5px;color:var(--muted);padding:3px 6px}
.csgrow{display:flex;align-items:stretch}
.cstb{border:0;background:none;cursor:pointer;align-self:flex-start;border-radius:5px}
.cstb:hover{color:var(--ink);background:var(--panel2)}
.cstb.dev{color:var(--warn)}
.cscl{display:block;text-align:center;font-size:8.5px;font-family:var(--mono);color:var(--muted);line-height:1.2}
.csc{flex:1;min-width:0;border:1px solid var(--line2);margin:-0.5px;padding:2px 4px;position:relative}
.csc.target{cursor:crosshair;outline:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-2px}
.cse{min-height:16px;font-size:11px;line-height:1.35;border-radius:4px;padding:1px 3px 1px 16px;position:relative;color:var(--ink)}
.cse::before{content:"H";position:absolute;left:3px;top:2.5px;font-size:8.5px;color:var(--muted);font-family:var(--mono)}
.cse.d::before{content:"D"}
.cse:hover{background:var(--panel2)}
.cse:focus{outline:1px solid var(--accent);background:var(--panel2)}
.cspins{display:flex;gap:3px;justify-content:flex-end;margin-bottom:1px}
.csc.withsplit .cspins{padding-right:19px}
.cspin{display:inline-flex;align-items:center;gap:1px}
.csanker{border:0;border-radius:4px;padding:2px 7px;font-size:12px;font-family:var(--mono);font-weight:700;color:#fff;cursor:pointer}
/* Anker direkt am Marker entfernbar (Feedback): × erscheint beim Überfahren des Pills. */
.cspinx{display:none;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:4px;padding:0 3px;font-size:9.5px;line-height:1.3;cursor:pointer}
.cspin:hover .cspinx{display:inline-block}
.cspinx:hover{color:var(--accent);border-color:var(--accent)}
/* ---- Countsheet v2 ---- */
.cscfg{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;margin:8px 0}
.cscfg .csgrp{display:flex;align-items:center;gap:8px}
.cscfg label{font-size:9.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.csstep{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel)}
.csstep button{border:0;background:transparent;color:var(--ink);width:24px;height:24px;cursor:pointer;font-size:15px}
.csstep button:hover{background:var(--panel2)}.csstep button:disabled{opacity:.35;cursor:default}
.csstep .v{min-width:28px;text-align:center;font-size:13.5px;font-weight:600;border-left:1px solid var(--line);border-right:1px solid var(--line);height:24px;line-height:24px}   /* KEIN tabular-nums: SF-Pro-Tabellenziffern rendern „1" als Schreibmaschinen-Slab (Axel: „hässlich") → Proportionalziffern wie der Rest */
.csseg{display:inline-flex;border:1px solid var(--line);border-radius:7px;padding:2px;gap:2px;background:var(--panel)}
.csseg button{border:0;background:transparent;color:var(--muted);font-size:11px;padding:3px 9px;border-radius:5px;cursor:pointer;white-space:nowrap}
.csseg button:hover{color:var(--ink)}
.csseg button.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.csbild.edge{background:var(--panel)!important;border-style:dashed;border-width:1.5px}
.csbsep{width:1px;height:18px;background:var(--line);margin:0 2px}
.csscroll2{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:9px;margin-top:2px}
.csgrid{border-collapse:separate;border-spacing:0;width:100%;font-size:11.5px}
.csgrid th,.csgrid td{border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.csgrid thead th{position:sticky;top:0;z-index:2;background:var(--panel2);font-weight:600;color:var(--muted);font-size:10.5px;padding:4px 2px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Zähler-Spaltenköpfe LINKSbündig über den Zell-Inhalt setzen (dieser startet hinter der 17px-H/D-
   Spur) — sonst schwebt die Zähl-Nummer mittig, während der Text linksbündig steht = sichtbarer
   Versatz (Axel). Takt-Kopf (.cnr) und der Takt-Spannkopf (.takth) bleiben zentriert. */
.csgrid thead th:not(.cnr):not(.takth){text-align:left;padding-left:18px}
.csgrid th.cnr,.csgrid td.cnr{background:var(--panel2);color:var(--muted);font-size:10.5px;text-align:center;width:46px;min-width:46px;font-variant-numeric:tabular-nums;position:relative}
.csgrid td.cnr{position:sticky;left:0;z-index:1}
.csgrid .cshl{position:relative}
.csgrid .cshl.sub{color:var(--accent);font-style:italic}
/* + sitzt AUF der Grenze zur nächsten Spalte, erscheint erst beim Darüberfahren (Axel). */
.csgrid thead th{position:sticky}
/* „und/a"-Einfügen zwischen zwei Zählungen: dezent IMMER sichtbar (auch auf Touch/Handy ohne Hover, Axel:
   „damit man weiß, dass es sie überhaupt gibt"), auf Hover/Fokus voll hervorgehoben. INNERHALB des Kopfes
   (right:1px) — bei right:-8px überdeckte der nächste sticky-Spaltenkopf (z-index) das halbe Plus (Axel-Bug). */
.csgrid .csins{position:absolute;right:1px;top:50%;transform:translateY(-50%);z-index:4;width:16px;height:16px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:0;display:grid;place-items:center;opacity:.4;transition:opacity .12s}
.csgrid thead th:hover .csins,.csgrid .csins:focus{opacity:1}
.csgrid .csins:hover{color:var(--accent);border-color:var(--accent)}
.csgrid .csdelcol{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;padding:0 2px;opacity:0}
.csgrid th:hover .csdelcol{opacity:.7}
.csgrid .csdelcol:hover{color:var(--accent);opacity:1}
/* Takt-Werkzeuge (+ danach einfügen · × löschen) — erst beim Darüberfahren der Takt-Zelle.
   ABSOLUT positioniert (Axel „Umbruch"): unsichtbar dürfen sie KEINEN Platz belegen, sonst brach
   „T10"/„T11" + Werkzeuge in der schmalen Takt-Zelle um. So bleibt nur die Takt-Nummer im Fluss. */
.csgrid .takth{position:relative}
.csgrid .cttools{position:absolute;left:0;right:0;bottom:1px;justify-content:center;gap:1px;display:flex;opacity:0;pointer-events:none;transition:opacity .12s}
.csgrid td.cnr:hover .cttools,.csgrid .takth:hover .cttools{opacity:1;pointer-events:auto}
.csgrid .csinstakt,.csgrid .csdeltakt{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:0 2px}
.csgrid .csinstakt:hover{color:var(--ok)}
.csgrid .csdeltakt:hover{color:var(--accent)}
.csgrid td.csc{padding:1px;vertical-align:top;background:var(--panel);min-width:58px}
.csgrid td.csc.sel{background:var(--sel,color-mix(in srgb,var(--accent) 14%,transparent));box-shadow:inset 0 0 0 1.5px var(--accent)}
.csgrid td.csc.target{cursor:crosshair;outline:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-2px}
.csgrid td.csc.armstart{outline:2px solid var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
/* ⤢-Knopf zum direkten Trennen einer zusammengefassten Zelle (immer sichtbar — Touch/iPad hat kein Hover) */
.cssplit{position:absolute;top:1px;right:1px;z-index:3;width:16px;height:16px;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--panel2);color:var(--muted);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cssplit:hover{color:var(--accent);border-color:var(--accent)}
/* „Gebrochene" Zusammenfassung: Zellen einer Merge, die im aktuellen Layout kein Rechteck bilden — farbig gruppiert. */
.csgrid td.csc.brokenmerge{background:color-mix(in srgb,var(--bm) 11%,var(--panel));outline:1.5px dashed var(--bm);outline-offset:-2px}
.csbrk{position:absolute;top:0;right:2px;font-size:10px;color:var(--bm);z-index:2;line-height:1.4}
/* Bild-Anker per Drag&Drop: Ziel-Zelle beim Drüberziehen hervorheben; Touch-Geist folgt dem Finger. */
.csgrid td.csc.dropcell{background:color-mix(in srgb,var(--accent) 18%,var(--panel));outline:2px solid var(--accent);outline-offset:-2px}
.csbghost{position:fixed;z-index:120;transform:translate(-50%,-50%);pointer-events:none;opacity:.85;box-shadow:0 4px 14px rgba(0,0,0,.32)}
.csgrid .cse{min-height:18px;font-size:11px;line-height:1.35;padding:1px 4px 1px 17px;position:relative;color:var(--ink);border-radius:3px}
.csgrid .cse::before{content:"H";position:absolute;left:3px;top:2px;font-size:8px;color:var(--muted);font-family:var(--mono);font-weight:700}
.csgrid .cse.d::before{content:"D"}
.csgrid .cse.hd::before{content:"H+D";color:var(--accent)}
.csgrid .cse:hover{background:var(--panel2)}
.csgrid .cse:focus{outline:1.5px solid var(--accent);background:var(--panel2)}
.csgrid.rowlay .takth{background:var(--panel2);border-bottom:1px solid var(--line)}
.csgrid.rowlay .beatrow th{font-weight:500}
.csgrid.rowlay tbody th.cnr{position:sticky;left:0;z-index:1}
/* Filter Herr/Dame blendet die andere Rolle jetzt beim Rendern aus (visRoles) — kein CSS nötig.
   STACKED v2: Herr/Dame sind je Takt zwei Zeilen (unabhängig verbindbar); dünne Trennlinie je Takt. */
.csgrid.stacklay tbody tr.tstart > td{border-top:1.5px solid var(--line)}
.csgrid.stacklay tbody tr.tstart:first-child > td{border-top:0}
.csseltool{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;padding:8px 10px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:9px}
.csseltool .n{font-size:12px;font-weight:600}
.csseltool .tbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:7px;padding:5px 10px;font-size:11.5px;cursor:pointer}
.csseltool .tbtn:hover{background:var(--panel2)}
.csseltool .tbtn:disabled{opacity:.4;cursor:default}
.csinsmenu{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);padding:4px;display:flex;gap:4px}
.csinsmenu button{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:12px;font-style:italic}
.csinsmenu button:hover{border-color:var(--accent);color:var(--accent)}
/* Schwebende Verbinden/Trennen-Leiste an der Zell-Auswahl (Confluence-artig). */
#csMergeBar{position:fixed;z-index:55;display:none;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:4px;box-shadow:0 6px 20px rgba(0,0,0,.32)}
#csMergeBar button{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:7px;padding:6px 11px;font-size:12px;cursor:pointer;white-space:nowrap}
#csMergeBar button:hover{border-color:var(--accent);color:var(--accent);background:var(--panel)}
/* Hover-Vorschau eines Bild-Ankers (Name + Mini-Formation, wie in der Bilderliste). */
#csPreview{position:fixed;z-index:50;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;display:none;width:156px}
#csPreview .nm{font-size:11px;font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:5px;line-height:1.2}
#csPreview .nm .dc{width:8px;height:8px;border-radius:50%;flex:none}
#csPreview .fld{background:var(--floor);border:1px solid var(--line);border-radius:6px}
#csPreview .fld svg{width:100%;height:auto;display:block}
/* Aktionen IMMER voll sichtbar und deutlich (Feedback „gehen unter"): kräftige Icons in
   --ink, klare Buttons; Hover färbt nach Aktion (Absagen=warn, Löschen=accent).
   Rechtsbündig in der festen 96px-Spalte. */
.tracts{display:flex;gap:4px;justify-content:flex-end}
.tracts button{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:6px;padding:4px 8px;font-size:12px;line-height:1;cursor:pointer}
.tracts button:hover{border-color:var(--muted);background:var(--panel)}
.tracts button[data-act="cancel"]:hover{color:var(--warn);border-color:var(--warn)}
.tracts button[data-act="del"]:hover{color:var(--accent);border-color:var(--accent)}
.loclist{display:flex;flex-direction:column;gap:4px}
.locrow{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;font-size:11.5px}
.locrow .locnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locrow.regeltop{align-items:flex-start}
.locrow.regeltop .locnm{display:flex;flex-direction:column;gap:1px;white-space:normal;overflow:visible}
.locrow.regeltop small{color:var(--muted);font-size:10.5px}
/* Oberteile-Zeile je Regelzeit (Axel: pro Trainingstag) — dezent unter der Regelzeit, leicht eingerückt */
.locrow.slottoprow{border:0;border-radius:0;margin:-6px 0 4px;padding:0 7px 0 14px;display:flex;align-items:center;gap:6px}
.slottopnm{color:var(--muted);font-size:10px;flex:none}
.slottoprow .slotedit{opacity:.6}
/* Oberteil-Chips (statt „H ○ weiß · D ● schwarz") — ruhige Pills je Rolle, Farbpunkt + Name. */
.topchips{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center}
.topchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:1px 9px 1px 7px;font-size:10.5px;color:var(--ink);background:var(--panel);line-height:1.7;white-space:nowrap}
.topchip .tcr{color:var(--muted);font-weight:700;font-size:8.5px;letter-spacing:.04em}
.topchip.empty{color:var(--muted)}
.topchip .cldot{width:9px;height:9px;margin-right:0}
.topchips[data-tovtop]{cursor:pointer}
.topchips[data-tovtop] .topchip{transition:border-color .12s}
.topchips[data-tovtop]:hover .topchip{border-color:var(--accent)}
.locrow a{color:var(--muted);text-decoration:none;font-size:12px}
.locrow a:hover{color:var(--ink)}
/* Mehrfeld-Formular im Dialog (Training anlegen/bearbeiten, Zeitraum, Pause) */
.dlg-form{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.dlg-form .dfrow{display:flex;align-items:center;gap:9px}
.dlg-form .dfrow>label{width:110px;flex:none;font-size:11.5px;color:var(--muted)}
/* Einheitliche, App-eigene Dialog-Felder (nicht die 16px-Apple-Optik): gleiche Größe/Gewicht für Input/Select/Textarea. */
.dlg-form input,.dlg-form select,.dlg-form textarea{flex:1;width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:13px;font-weight:400;color:var(--ink);font-family:var(--sans)}
.dlg-form textarea{line-height:1.4;resize:vertical;min-height:58px}
/* App-Auswahlfeld: eigener Pfeil statt nativer Apple-Look (die offene Liste bleibt systembedingt nativ). */
.dlg-form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:28px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 9px center}
.dlg-form input:focus,.dlg-form select:focus,.dlg-form textarea:focus{outline:none;border-color:var(--accent)}
.pinbtn{border:0;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;width:24px;height:24px;border-radius:6px;flex:none;line-height:1}
.pinbtn:hover{color:var(--ink);background:var(--panel2)}
.pinrow .fgord{flex:none}
/* App-eigener Farb-Picker: Palette als Farbkreise (statt nativem Browser-Dialog). */
.swgrid{display:flex;flex-wrap:wrap;gap:7px;align-items:center;flex:1}
.swgrid input[type="hidden"]{display:none}
.swb{width:24px;height:24px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);cursor:pointer;padding:0;flex:none;transition:transform .08s}
.swb:hover{transform:scale(1.15)}
.swb.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.swb.custom{background:conic-gradient(#d0503f,#cf9433,#639922,#3aa3a0,#4a8fd6,#7a76d6,#b84fa4,#d0503f);display:grid;place-items:center}
.swb.custom::after{content:"+";color:#fff;font-size:14px;font-weight:700;line-height:1;text-shadow:0 0 3px rgba(0,0,0,.55)}

/* Ferien/Pausen-Zwischenzeilen in der Termin-Liste */
.trbreak{padding:4px 8px;border-radius:7px;border:1px dashed var(--line);background:var(--panel2);font-size:11px;color:var(--muted)}
.trbreak.pause{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--ink)}
/* Pause mit freien Trainings: gesperrt ist sie nicht, also auch nicht in der Sperr-Farbe. */
.trbreak.pause.frei{border-color:var(--line);color:var(--muted)}
.slotedit{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:5px;padding:2px 6px;font-size:10px;cursor:pointer}
.slotedit:hover{color:var(--ink);border-color:var(--muted)}
/* ×-Knöpfe in den Verwaltungs-Listen (Orte/Arten/Ferien): themen-passend statt nativem
   (weißem) Button — gleiche Machart wie .slotedit, Hover in Akzentfarbe. */
.locrow .segrm{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:5px;padding:2px 7px;font-size:11px;line-height:1.3;cursor:pointer}
.locrow .segrm:hover{color:var(--accent);border-color:var(--accent)}

/* Tänze ohne Zeit (unten sammeln, per Drag-and-drop einziehen) */
.tapend{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line)}
.tapend .seglabel{margin:0 0 5px}
.drow.pending{opacity:.75;cursor:grab;border-style:dashed}
.drow.pending:active{cursor:grabbing}
.drow.dropbefore{box-shadow:0 -2px 0 0 var(--accent)}

/* Kontextmenü (Rechtsklick auf ein Bild in der Liste) */
.ctxmenu{position:fixed;z-index:70;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:4px;min-width:186px}
.ctxmenu[hidden]{display:none}
.ctxmenu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:7px 10px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:12.5px}
.ctxmenu button svg{width:15px;height:15px;flex:none;color:var(--muted)}
.ctxmenu button:hover{background:var(--panel2)}
.ctxmenu button.danger:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.ctxmenu button.danger:hover svg{color:var(--accent)}
.ctxmenu .sep{height:1px;background:var(--line);margin:4px 6px}

/* Dezenter Hover-Tooltip für Paare/Punkte im Feld */
.dottip{position:fixed;z-index:65;pointer-events:none;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:7px;padding:4px 8px;font-size:11.5px;color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.22);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.dottip[hidden]{display:none}
.dottip .role{color:var(--muted)}
/* ---------- Info · Organisation (Listen/Orga) — schmale SVG-Icons statt Emoji ---------- */
.orgawrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.orgabanner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-radius:10px;padding:9px 13px;font-size:12.5px;color:var(--ink)}
.orgabanner b{font-weight:600}
.orgamain{flex:1;min-height:0;display:grid;grid-template-columns:240px 1fr;gap:11px}
@media(max-width:820px){.orgamain{grid-template-columns:1fr}}
.oic{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--muted)}
.oic svg{width:17px;height:17px}
.oic.sm svg{width:14px;height:14px}
.oic.mut{opacity:.65}
.oic.lk{color:var(--accent)}.oic.lk svg{width:12px;height:12px}
.orgatree{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.ofolder{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:11px 6px 4px}
.ofolder.pin{color:var(--accent)}
/* Auf-/Zuklapp-Chevron (Dateiexplorer): zeigt aufgeklappt nach unten, zugeklappt nach rechts */
.ofchev{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;margin-left:-3px}
.ofchev svg{transform:rotate(90deg);transition:transform .12s}
.ofchev.col svg{transform:rotate(0deg)}
.ofcnt{flex:none;font-size:10px;color:var(--muted);background:var(--panel2);border-radius:999px;padding:0 6px;line-height:16px;letter-spacing:0}
.ofname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;padding:1px 3px;outline:none}
.oftools{display:inline-flex;gap:1px;opacity:0;margin-left:auto}
.ofolder:hover .oftools{opacity:1}
.onode{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:13px;font-family:inherit}
.onode:hover{background:var(--panel2)}.onode:hover .oic{color:var(--ink)}
.onode.child{padding-left:9px}
.onode.sel{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:600}
.onode.sel .oic{color:var(--accent)}
.onode .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onode .cnt{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* „+ Liste hier" je Ordner: dezente Zeile unter den Listen, macht das Ziel eindeutig (Axel) */
.ofaddlist{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:0;background:transparent;color:var(--muted);border-radius:8px;padding:5px 9px 5px 11px;cursor:pointer;font-size:12px;font-family:inherit}
.ofaddlist:hover{background:var(--panel2);color:var(--accent)}
.ofaddlist svg{width:13px;height:13px}
.otreebtns,.otbtns{display:flex;gap:6px;margin-top:10px}
.oaddbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;font-family:inherit}
.oaddbtn:hover{background:var(--panel2);color:var(--ink);border-color:var(--muted)}
.oaddbtn svg{width:14px;height:14px}
.orgadetail{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow:auto;min-width:0}
.odhead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.odttl{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.odttl .oic svg{width:19px;height:19px}
.onm{font-size:17px;font-weight:600;border-radius:5px;padding:1px 5px;min-width:40px}
.onm:focus,.odnote:focus,.ocell:focus,.otext:focus,.otbl .othl:focus,.ofname:focus{outline:none;box-shadow:0 0 0 1px var(--accent);background:var(--panel2)}
.odtools{display:flex;gap:5px;flex:none}
.obtn{border:1px solid var(--line);background:var(--panel);border-radius:8px;width:32px;height:30px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.obtn svg{width:16px;height:16px}
.obtn:hover{background:var(--panel2);color:var(--ink)}
.obtn.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ocfg{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin:2px 0 6px;cursor:pointer}
.ocfg input{accent-color:var(--accent)}
.ovisnote{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);background:var(--panel2);border-radius:7px;padding:4px 9px;margin:2px 0 8px}
.odnote{font-size:12.5px;color:var(--muted);background:var(--panel2);border-radius:8px;padding:7px 10px;margin:6px 0 14px;line-height:1.45;white-space:pre-wrap;outline:none}
.odnote:empty::before{content:attr(data-ph);color:var(--muted);opacity:.7}
.ochecklist{display:flex;flex-direction:column;gap:1px}
.ocheck{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px}
.ocheck:hover{background:var(--panel2)}
.ocheck.ind{margin-left:26px}
.obox{width:19px;height:19px;flex:none;border:1.5px solid var(--line);border-radius:5px;background:var(--panel);cursor:pointer;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;padding:0}
.obox.on{background:var(--accent);border-color:var(--accent)}
.obox.on::after{content:"✓"}
.otext{flex:1;font-size:13.5px;line-height:1.4;border-radius:4px;padding:1px 4px;min-width:20px}
.otext.done{color:var(--muted);text-decoration:line-through}
/* Zeilen-/Punkt-Werkzeuge (erscheinen bei Hover): Hervorheben · Fett · Einrücken · Entfernen */
.orowtools{display:inline-flex;gap:1px;white-space:nowrap;opacity:0}
.ocheck:hover .orowtools,.orow:hover .orowtools{opacity:1}
.ot{border:0;background:transparent;color:var(--muted);cursor:pointer;width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;font-size:12px;font-weight:700;padding:0;line-height:1}
.ot svg{width:14px;height:14px}
.ot:hover{background:var(--panel2);color:var(--ink)}
.ot.on{color:var(--accent)}
.ot.rm:hover{color:var(--accent)}
.ot.fmt.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hidot{width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;display:block}
.ot.on .hidot{background:var(--accent);border-color:var(--accent)}
.otblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.otbl{border-collapse:collapse;width:100%;font-size:13px}
.otbl th{position:sticky;top:0;z-index:1;background:var(--panel2);text-align:left;font-weight:600;color:var(--muted);font-size:11px;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.otbl th .othl{outline:none;border-radius:4px;padding:0 2px}
.odelcol{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;opacity:0;margin-left:3px;line-height:1}
.otbl th:hover .odelcol{opacity:.6}.odelcol:hover{opacity:1;color:var(--accent)}
/* Spalten-Kopf: Label + Verschiebe-/Löschtools nebeneinander. Pfeile dezent immer sichtbar (Axel: „damit
   man weiß, dass es geht"), auf Kopf-Hover voll. */
.otbl th .othw{display:flex;align-items:center;gap:6px;justify-content:space-between}
.ocmove{display:inline-flex;gap:1px;align-items:center;flex:0 0 auto;opacity:.4;transition:opacity .12s}
.otbl th:hover .ocmove{opacity:1}
.ocmv{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:10px;line-height:1;padding:2px 3px;border-radius:4px}
.ocmv:hover:not(:disabled){color:var(--accent);background:var(--panel)}
.ocmv:disabled{opacity:.3;cursor:default}
.ocmove .odelcol{opacity:1;margin-left:1px}
.ot.ins:hover{color:var(--ok)}
.otbl td{padding:6px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
.otbl tbody tr:last-child td{border-bottom:0}
.otbl th.odone,.otbl td.odone{width:36px;text-align:center}
.otbl th.orowtools-h,.otbl td.orowtools{width:1%;white-space:nowrap;text-align:right;padding:4px 6px 4px 2px}
.ocell{display:block;min-height:18px;border-radius:4px;padding:1px 4px;min-width:24px}
.orow.hi td .ocell{color:var(--accent);font-weight:600}
.orow.strong td .ocell{font-weight:600}
.orow:hover td{background:color-mix(in srgb,var(--panel2) 60%,transparent)}
/* ---------- Freigabe (was Tänzer sehen) ---------- */
.fgwrap{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px}
.fghead{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:0 2px}   /* nur noch Beschreibung (keine Überschrift) — wie die Einstellungs-Notiz unter dem Umschalter (Axel) */
.fgmut{font-size:12px;color:var(--muted);line-height:1.5}   /* = .setnote-Format der Einstellungen */
.fgmut b{color:var(--ink);font-weight:500}
.fgcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.fgcard.nopad{padding:0;overflow-x:auto}
/* Zusammengefasste Teilen-Karte (Axel: „unruhig, zusammenfassen, aber nach Aufgaben trennen"): EINE ruhige Karte,
   links „Link teilen", rechts „Freigabe", dazwischen ein dezenter Trenner. Kein rosa Kasten mehr. */
.fgshare{display:flex;gap:0;padding:0;overflow:hidden}
.fgsharecol{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column}
.fgsharediv{flex:none;width:1px;background:var(--line);align-self:stretch}
@media(max-width:620px){.fgshare{flex-direction:column}.fgsharediv{width:auto;height:1px}}
.fglinkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fglinkurl{flex:1;min-width:0;font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fglinkrow .btn{flex:none}
.fgtable{width:100%;border-collapse:collapse;font-size:13.5px;min-width:440px}
.fgtable th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line)}
.fgtable th.c,.fgtable td.c{text-align:center;white-space:nowrap}
.fgtable td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.fgtable tbody tr:last-child td{border-bottom:0}
.fgapp .fgnm{font-weight:600;font-size:14px}
/* #120/#121: .fgsubn, .fginfotog, .fgchev und .fgsub sind entfallen — die Unterzeilen unter den
   Namen sind raus (spart Platz), und die aufklappbare Liste der Info-Listen gibt es in der
   Freigabe nicht mehr: die Sichtbarkeit steuern die Listen selbst.
   NEU .fgfix1: die Termine-Zeile steht fest oben und traegt keine Pfeilchen — eine kraeftigere
   Linie darunter trennt sie sichtbar von den sortierbaren Kacheln. */
.fgapp.fgfix1 td{border-bottom:1px solid var(--line)}
.fgtgl{width:38px;height:21px;border-radius:999px;border:0;background:var(--line);position:relative;cursor:pointer;padding:0;vertical-align:middle}
.fgtgl::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s}
.fgtgl.on{background:var(--ok)}.fgtgl.on::after{left:19px}
.fgseg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.fgseg button{border:0;background:transparent;color:var(--muted);font-size:11.5px;padding:4px 11px;cursor:pointer;font-family:inherit}
.fgseg button.on{background:var(--accent);color:#fff;font-weight:600}
.fgseg button:not(.on):hover{color:var(--ink);background:var(--panel2)}
.fgfix{font-size:12px;color:var(--muted)}
.fgfix.mut{opacity:.7}
.fgrow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.fgrow2{grid-template-columns:1fr}}
.fghd{font-size:13px;font-weight:600;margin-bottom:10px}
.fghist{list-style:none;margin:0;padding:0;font-size:13px}
.fghist li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line2)}
.fghist li:last-child{border-bottom:0}
.fghist .t{font-family:var(--mono);color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fghist .fgempty{color:var(--muted)}
.fgnow{font-size:10.5px;font-weight:600;color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent);border-radius:5px;padding:1px 6px;margin-left:4px}
/* #126: Umfang einer Freigabe — dezent hinter dem Text, damit die Zeile nicht in zwei Gewichte zerfällt. */
.fgumf{font-size:11.5px;color:var(--ink);margin-left:8px;white-space:nowrap}
.fgumf.mut{color:var(--muted)}
/* #127: Der Wiederherstellen-Knopf schiebt sich ans Zeilenende, statt den Text zu drängen. */
.fghist li>span:last-child{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px}
.fghist li .btn.xs{margin-left:auto}
.fglink{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--muted);background:var(--panel2);border:1px dashed var(--line);border-radius:8px;padding:9px 12px}
/* ---- Tänzer-Vorschau (mobil) — zeigt, was die Tänzer je nach Freigabe sehen ---- */
/* Freigabe: zweispaltig — links Steuerung, RECHTS die eingebettete Live-Tänzer-App */
/* Axel: der linke Block (Steuerung) lief für seinen Inhalt VIEL zu weit in die Breite. Deckeln → wird
   schmaler; die ganze Zeile bleibt linksbündig, sodass rechts Luft entsteht und die Tänzer-Vorschau
   nicht mehr an den Fensterrand stößt (isolierter/klarer). Deckel großzügig genug, damit die Tabelle
   nicht umbricht. */
/* Freigabe-View (Axel): links DEUTLICH breiter (die Rechte-Tabelle braucht Platz), rechts die schmale App-Handy-
   Vorschau (feste Breite ~380px). Oben bündig; Publish-Historie scrollt IN der Kachel (nicht länger als die Vorschau). */
.fgsplit{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.fgleft{flex:1 1 0;min-width:330px;display:flex;flex-direction:column;gap:14px}
/* Vorschau bündig, aber etwas Abstand zum rechten Rand (Axel), nicht breiter; oben mehr Höhe da der Link-Kasten weg ist. */
.fgright{flex:0 0 380px;width:380px;position:sticky;top:12px;display:flex;flex-direction:column;gap:16px;margin-right:14px}
.fghist.scroll{max-height:min(34vh,240px);overflow:auto}
.fghmonth{display:block;list-style:none;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:9px 2px 1px;border-bottom:0}
@media(max-width:900px){.fgright{flex:1 0 100%;width:100%}}
.fgcode{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.tzphone{width:100%;height:min(640px,70vh);background:var(--bg);border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}
.fgright .tzphone{height:min(780px,84vh)}   /* Vorschau im Freigabe-Center höher (Link-Kasten ist weg, Axel: „mehr Höhe nach oben") */
/* Tänzer-Rollen-Weiche (M3): bei role=dancer wird das Trainer-Werkzeug ausgeblendet und nur die
   Tänzer-App gezeigt. Header (mit Abmelden/Theme) bleibt; die Trainer-Reiter + Bearbeiten-Icons weg. */
#dancerApp{display:none}
/* Echter Tänzer-Modus: KEIN Trainer-Chrome — die Tänzer-App hat ihren eigenen Kopf (Titel + „angemeldet als"
   + Theme/Abmelden). Sonst lag die Trainer-Kopfleiste (Dino/Stand/Rollen-Badge) doppelt darüber (Axel). */
body.dancer-mode header.top{display:none!important}
body.dancer-mode .body{display:none!important}
/* Die ECHTE Tänzer-App füllt den Bildschirm KOMPLETT aus — kein Vorschau-Rahmen (Rand/Radius/Gap/Schatten).
   Der gerundete „Phone"-Rahmen (.tzphone ohne .real) bleibt NUR für die Vorschau im Team-Bereich (Axel). */
body.dancer-mode #dancerApp{display:block;padding:0}
body.dancer-mode #dancerApp .tzphone.real{width:100%;max-width:none;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none}
.tztop{padding:14px 16px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.tzbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tztitle{font-size:15px;font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Rechte Kopf-Gruppe im echten Tänzer-Modus: „angemeldet als" + Theme/Abmelden-Icons */
.tzright{display:flex;align-items:center;gap:8px;flex:none}
.tzright .tzwho b{color:var(--ink);font-weight:600}
button.tzwho{border:0;background:transparent;cursor:pointer;padding:0 7px;border-radius:7px;font:inherit;display:inline-flex;align-items:center;height:28px;line-height:1}
button.tzwho:hover{background:var(--panel2)}
/* Hinweis „Als App zum Homescreen hinzufügen" (dezent, unten auf der Startseite) */
.tza2hs{display:flex;align-items:flex-start;gap:10px;margin:14px 2px 4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted)}
.tza2i{color:var(--accent);flex:none;margin-top:1px}
.tza2t{flex:1;font-size:11.5px;line-height:1.45}
.tza2t b{color:var(--ink);font-weight:600}
.tza2x{border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;border-radius:4px;flex:none}
.tza2x:hover{color:var(--ink)}
.tztools{display:inline-flex;align-items:center;gap:5px}
/* Trainer-Mobile-Ansicht (Axel): Name + ROTER „Trainer:in"-Tag (Trainer sind wichtig) statt „angemeldet als". */
.tzwhotr{display:inline-flex;align-items:center;gap:7px;padding:0 4px}
.tzwhotr b{color:var(--ink);font-weight:600;font-size:13px}
.tztag{font-size:10px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--accent);border-radius:20px;padding:2px 8px;white-space:nowrap}
/* #143: Derselbe Hinweis, aber unten rechts und dezent — er sagt nur „du siehst hier mehr als die
   Tänzer:innen" und braucht dafür keinen Platz in der Kopfzeile. Ohne Klickfläche, damit er nie im Weg ist. */
.tztagfix{position:fixed;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:60;pointer-events:none;
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:20px;padding:2px 8px;opacity:.78}
/* #142: Menü hinter dem Namen — Name ändern, Darstellung, Abmelden. */
.tzwhoc{color:var(--muted);font-size:9px;margin-left:4px}
.tzmepop{position:fixed;top:44px;right:10px;z-index:220;width:min(240px,92vw);background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.3);padding:9px 10px}
.tzmehd{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tzmemail{font-size:11px;color:var(--muted);margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tzmeitem{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:12.5px;padding:7px 8px;margin:0 -8px;width:calc(100% + 16px);border-radius:7px;cursor:pointer}
.tzmeitem:hover{background:var(--panel2)}
.tzmeout{color:var(--accent)}
.tzmesec{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:8px 0 4px}
.tzmeseg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:4px}
.tzmeseg button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11.5px;font-weight:600;padding:6px 4px;cursor:pointer}
.tzmeseg button+button{border-left:1px solid var(--line)}
.tzmeseg button.on{background:var(--accent);color:#fff}
/* Bilderplan Trainer/Tänzer-Umschalter (nur Trainer) */
.tzbpmode{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:8px}
.tzbpmode button{flex:1;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;font-family:inherit;padding:7px 6px;cursor:pointer}
.tzbpmode button+button{border-left:1px solid var(--line)}
.tzbpmode button.on{background:var(--accent);color:#fff}
.tztool{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:8px;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;flex:none}
.tztool:hover{color:var(--ink);border-color:var(--accent)}
.tztool svg{display:block}
.tzx{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;width:30px;height:30px;border-radius:8px}
.tzx:hover{background:var(--panel2);color:var(--ink)}
.tzwho{font-size:11px;color:var(--muted);white-space:nowrap}
.tzwho button{border:1px solid var(--line);background:var(--panel2);color:var(--accent);font-weight:600;border-radius:20px;padding:2px 10px;font-size:11px;cursor:pointer;margin-left:3px}
.tzbody{flex:1;overflow:auto;padding:12px 14px;background:var(--bg)}
/* Startseite als flex-Spalte mit EINHEITLICHEM Abstand (Axel: Abstände waren uneinheitlich, App-Block stieß
   an die angeheftete Info). Eine gemeinsame gap statt unterschiedlicher Einzel-Margins → alle Blöcke (Pins,
   Termin, App-Grid, Fußzeile) haben denselben Abstand. Die Einzel-Margins der Kinder werden hier neutralisiert. */
.tzhome{display:flex;flex-direction:column;gap:12px}
/* DESKTOP-Tänzer-View (Axel: „PC-Mobilversion ist hässlich"): durchgehende Tab-Leiste statt Homescreen-Icons +
   Zurück; Inhalte als zentrierte, ruhige Spalte; Bilderplan-Feld groß. Unter 900px bleibt die Handy-Ansicht. */
.tzdnav{display:none}
@media(min-width:900px){
  body.dancer-mode .tzbody{padding:0}
  body.dancer-mode .tzdnav{display:flex;position:sticky;top:0;z-index:5;justify-content:center;background:var(--bg);border-bottom:1px solid var(--line);padding:0 20px}
  .tzdnav-in{display:flex;gap:2px;width:100%;max-width:760px;overflow-x:auto;scrollbar-width:none}
  .tzdnav-in::-webkit-scrollbar{display:none}   /* keine störende Scrollleiste an der Tab-Leiste (Axel) */
  .tzdt{border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:600;font-family:inherit;padding:14px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
  .tzdt:hover{color:var(--ink)}
  .tzdt.on{color:var(--accent);border-bottom-color:var(--accent)}
  body.dancer-mode .tzhome{max-width:720px;margin:0 auto;width:100%;gap:16px;padding:26px 20px}
  body.dancer-mode .tzhome .tzgrid{display:none}            /* Icon-Grid raus — die Tab-Leiste navigiert */
  body.dancer-mode .tzapphd{max-width:760px;margin:0 auto;padding:14px 20px 0}
  body.dancer-mode .tzback{display:none}                    /* Zurück raus — die Tab-Leiste navigiert */
  body.dancer-mode .tzappbody{max-width:720px;margin:0 auto;width:100%;padding:16px 20px 30px}
  body.dancer-mode .tzfield{max-width:520px;margin:0 auto}  /* Feld groß + zentriert */
}
/* „Neuer Stand"-Hinweis (Tänzer-Homescreen) — dezent, aber sichtbar; tippen = aktualisieren */
.tznewstand{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-radius:12px;padding:10px 13px;cursor:pointer}
.tznewstand:active{filter:brightness(1.06)}
.tzns-i{font-size:18px;color:var(--accent);flex:none;line-height:1}
.tzns-b{display:flex;flex-direction:column;min-width:0}
.tzns-b b{font-size:12.5px;color:var(--ink);font-weight:600}
.tzns-b small{font-size:11px;color:var(--muted)}
.tzhome>.tzpin,.tzhome>.tzbanner{margin-bottom:0}
.tzhome>.tza2hs{margin:0}
.tzhome>.tzlogo{margin-top:0}
.tztabs{display:flex;border-top:1px solid var(--line);background:var(--panel)}
.tztab{flex:1;border:0;background:transparent;color:var(--muted);font-size:11.5px;padding:11px 4px;cursor:pointer;border-top:2px solid transparent}
.tztab.on{color:var(--accent);border-top-color:var(--accent);font-weight:600}
.tzempty{text-align:center;color:var(--muted);font-size:12.5px;padding:40px 16px;line-height:1.6}
.tzempty span{font-size:11px;opacity:.8}
.tzhint{font-size:10.5px;color:var(--muted);line-height:1.45}
.tzsched{display:flex;flex-direction:column;gap:9px}
.tzcard{border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:var(--panel)}
.tzcard.off{opacity:.72;border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
/* Abgesagte Trainings bleiben SICHTBAR, klar markiert (nicht einfach weg) */
.tzcard.cancelled{background:color-mix(in srgb,var(--muted) 8%,var(--panel));border-style:dashed;opacity:.85}
.tzcancel{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
.tzcard.cancelled s{color:var(--muted)}
.tzcancelreason{font-size:12.5px;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:6px 9px;margin-top:6px;line-height:1.4}
.tzcard.cancelled{opacity:1}   /* Absage mit Grund soll NICHT gedimmt sein (Axel: prominent) */
/* Kurzfristige Änderung (< 7 Tage) — deutlich sichtbar */
.tzcard.changed{border-color:color-mix(in srgb,#e0a800 60%,var(--line))}
.tznotice{display:block;font-size:11px;font-weight:700;color:#e0a800;margin-bottom:5px;letter-spacing:.01em}
.tzbanner.changed{border-color:color-mix(in srgb,#e0a800 60%,var(--line))}
.tzbanner .tznotice{margin-bottom:4px}
.tzcw{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.tzart{padding:2px 8px;border-radius:9px;font-size:9.5px;font-weight:600;background:var(--panel2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tzdate{font-size:11.5px;font-weight:600;color:var(--ink)}
.tzcmold{color:var(--muted);font-size:12.5px;margin-top:2px}
.tzcmold s{text-decoration-thickness:1px}
.tzcm{font-size:11.5px;color:var(--muted)}
.tzti{font-size:11px;color:var(--ink);margin-top:4px}
.tzabtn{margin-top:9px;width:100%;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel));color:var(--accent);border-radius:9px;padding:7px;font-size:12px;font-weight:600;cursor:pointer}
.tzabtn.off{background:var(--panel2);border-color:var(--line);color:var(--muted);font-weight:500}
.tzgrund{margin-top:6px;width:100%;border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:6px 8px;font-size:11.5px;color:var(--ink)}
.tzgrund:focus{outline:none;border-color:var(--accent)}
.tzoff{margin-top:0}
.tzoffl{display:block;font-size:10.5px;color:var(--accent);font-weight:600;margin-bottom:4px}
.tzoff .tzgrund{margin-top:0}
.tzoff .tzlink{display:inline-block;margin-top:7px}
/* Tänzer-Homescreen (App-Icons 2/Zeile + Wichtig-Kachel quer oben) */
.tzgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px}
.tzicon{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 10px;cursor:pointer;transition:background .12s,border-color .12s;-webkit-tap-highlight-color:transparent}
/* Hover NUR auf Geräten mit echtem Zeiger (Maus) — sonst „klebt" der rote Rand am zuletzt getippten Feld (iOS) */
@media(hover:hover){.tzicon:hover{background:color-mix(in srgb,var(--panel) 92%,#000);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.tzicon:hover .tzico{color:var(--ink)}}
.tzico{width:28px;height:28px;color:color-mix(in srgb,var(--ink) 62%,var(--muted));display:grid;place-items:center}
.tzicon:active{background:var(--panel2);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.tzico svg{width:26px;height:26px;display:block}
.tziconl{font-size:12px;font-weight:600;color:var(--ink)}
/* Reorder-Pfeile in den Freigabe-App-Zeilen */
.fgord{display:inline-flex;flex-direction:column;gap:1px;margin-left:7px;vertical-align:middle}
.fgord button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:9px;line-height:1;padding:1px 3px;border-radius:3px}
.fgord button:hover{color:var(--ink);background:var(--panel2)}
.fgord button:disabled{opacity:.25;cursor:default}
/* Angeheftete Trainer-Infos (Homescreen) mit Highlight + Befristung */
.tzpin{display:block;width:100%;text-align:left;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-radius:14px;padding:11px 13px;margin-bottom:10px}
.tzpk{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:3px}
.tzpt{font-size:12.5px;color:var(--ink);line-height:1.45;white-space:pre-wrap}
.tzpt a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
/* „Softer" Variante (Stil=soft): dezenter, ohne Akzent-Rahmen/-Füllung — für ruhige Hinweise. */
.tzpin.soft{border-color:var(--line);background:var(--panel)}
.tzpin.soft .tzpk{color:var(--muted)}
/* Trainer-Verwaltung der Pins (Freigabe-Ansicht) */
.pinrow{display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel);margin-bottom:6px}
.pintxt{flex:1;font-size:12px;color:var(--ink);line-height:1.4;white-space:pre-wrap}
.pindates{font-size:10px;color:var(--muted);margin-top:2px}
.tzbanner{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px;cursor:pointer}
.tzbanner:hover{filter:brightness(1.04)}
.tzbk{font-size:12px;font-weight:700;letter-spacing:.02em}
/* Startkachel wie die Detailkarte (Axel): farbiges Art-Kürzel + „Nächster Termin" daneben,
   darunter die alte Angabe durchgestrichen, wenn die Regelzeit abweicht. */
.tzbk{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tzbknx{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.tzbold{display:block;color:var(--muted);font-size:12px;margin:1px 0 0}
.tzbold s{opacity:.85}
.tzbt{font-size:13px;font-weight:600;color:var(--ink)}
.tzbs{font-size:11.5px;color:var(--muted)}
/* App-Kopf mit Zurück-Pfeil */
.tzapphd{display:flex;align-items:center;gap:9px;margin:-2px 0 10px}
.tzback{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:9px;width:30px;height:30px;font-size:18px;line-height:1;cursor:pointer}
.tzback:hover{border-color:var(--accent);color:var(--accent)}
.tzappt{font-size:13px;font-weight:700;color:var(--ink)}
/* RECHTE GRUPPE im App-Kopf (Axel): 3D und der Stand-Sticker sitzen jetzt gemeinsam ganz aussen —
   der Stand endet damit buendig mit dem Koordinatensystem bzw. der Definitionstabelle darunter, statt
   direkt am Titel zu kleben. Das ☰-Menue ist entfallen, seine Regel unten laeuft ins Leere und bleibt
   nur stehen, weil dieselbe Klasse noch der Definitionen-Kopf benutzt. */
.tzhdr{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
/* 3D dezent (Axel: „dezent nach oben rechts") — kein Vollton-Knopf, nur ein ruhiger Chip. */
.tz3d{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:9px;
  padding:5px 10px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1.15;white-space:nowrap}
.tz3d:hover{border-color:var(--accent);color:var(--accent)}
.tz3d.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tz3d .beta{font-size:8.5px;font-weight:600;color:inherit;opacity:.85;vertical-align:super;margin-left:1px}
.tzstamp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:3px 10px;flex:none}
body.dancer-mode .tzmenu,.tzapphd .tzmenu{margin-left:auto}
.tzstampl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.tzstampd{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
/* Termine: Anmerkung PROMINENT, Absage dezent (kleiner Textlink) */
.tzanm{font-size:12.5px;color:var(--ink);background:color-mix(in srgb,var(--accent) 7%,var(--panel2));border-left:2px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:0 8px 8px 0;padding:6px 9px;margin-top:6px;line-height:1.45}
.tzcfoot{margin-top:8px}
.tzlink{border:0;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:2px 0}
.tzlink:hover{color:var(--accent)}
.tzcfoot>.tzlink{display:block;margin-left:auto}
.tzbild{display:flex;flex-direction:column;gap:8px}
/* EINE Zeile, lange Bildnamen werden abgeschnitten (…) statt umzubrechen → kein Layout-Sprung (Axel).
   Tanzpunkt + Tanz + Bildnummer bleiben immer vorn sichtbar. */
.tzbh{color:var(--ink)}
.tzbh1{display:flex;align-items:flex-start;gap:8px}
.tzbh1 .dc{flex:none;width:9px;height:9px;border-radius:50%;margin-top:4px}
.tzbhtxt{flex:1;min-width:0}   /* Text-Spalte: Titel + Punkt darunter, beide linksbündig */
/* 3D-CTA rechts neben der Bildüberschrift. Er darf die Kopfhöhe NICHT bestimmen — sonst springt das
   Feld beim Blättern (der Kopf ist bewusst auf eine feste Höhe geklemmt). */
.tzbh1 .tz3d{flex:none;align-self:flex-start;margin-top:-2px}
.tzbtitle{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.35}
.tzbtitle .tzbdance{flex:none}
.tzbtitle .tzbname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tzbp{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}   /* Punkt + Anmerkung nebeneinander, bündig unter dem Titel */
.tzbp .tzbanm{color:var(--ink)}   /* Anmerkung hebt sich vom Punkt ab (kein Emoji mehr) */
.tzbp .tzbdot{opacity:.5}
/* Auf EINE Zeile geklemmt → feste Kopf-Höhe, kein Umspringen des Feldes beim Blättern (Axel). Ist mehr da,
   blendet der rechte Rand aus + „…"; Antippen (.more) klappt inline auf und schiebt das Feld nach unten. */
.tzbp.clamp{max-height:1.4em;overflow:hidden;position:relative}
.tzbp.more{cursor:pointer}
.tzbp.more::after{content:"…";position:absolute;right:0;bottom:0;padding-left:22px;background:linear-gradient(90deg,transparent,var(--bg) 55%);color:var(--muted);font-weight:700;pointer-events:none}
.tzbp.expanded{max-height:none;overflow:visible}
.tzbp.expanded::after{content:none}
.tzfield{border:1px solid var(--line);border-radius:12px;background:var(--floor);padding:6px;position:relative}
/* Kurz eingeblendete Namen des angetippten Paars (Axel) */
.tznamepop{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:var(--floor);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:9px;white-space:nowrap;pointer-events:none;opacity:1;transition:opacity .25s;z-index:6;box-shadow:0 4px 14px rgba(0,0,0,.32);display:flex;align-items:center;gap:6px;max-width:92%}
.tznamepop .tznpn{background:var(--accent);color:var(--accent-ink);border-radius:50%;width:16px;height:16px;display:inline-grid;place-items:center;font-size:9.5px;flex:none}
.tzfield svg{width:100%;height:auto;aspect-ratio:1/1;display:block}   /* aspect-ratio: robuste Quadrat-Skalierung (Android/Samsung Internet rechnen height:auto bei viewBox-SVGs teils falsch) */
/* HANDY (Axel: unten abgehackt/Player nicht sichtbar): Feldhöhe deckeln, damit der Audiograph mit auf den Schirm
   passt (näher an die CTAs); Player-Abstand kleiner; Safe-Area unten (iOS-Browserleiste). Gilt Browser + PWA. */
@media(max-width:899px){
  /* Tanzfläche IMMER quadratisch (Axel: „in Safari nicht mehr quadratisch"): den Floor-Rahmen SELBST quadrieren
     (aspect-ratio) und auf min(100 % Breite, 44dvh Höhe) deckeln — das SVG füllt ihn zu 100 %. Robust auch in
     Safari, wo width:auto + dvh + aspect-ratio AM SVG den Rahmen rechteckig werden ließen. */
  body.dancer-mode .tzfield{width:min(100%,44svh);aspect-ratio:1/1;margin:0 auto;box-sizing:border-box}
  body.dancer-mode .tzfield.f3d{width:100%;aspect-ratio:auto;height:44svh}   /* 3D braucht kein Quadrat (Axel) — volle Breite */
  body.dancer-mode .tzfield.f3d svg{width:100%;height:100%;display:block}   /* svh statt dvh: die einfahrende Browser-Leiste aenderte dvh -> Feld wirkte mal groesser/kleiner (Axel) */
  body.dancer-mode .tzfield svg{width:100%;height:100%;max-height:none;aspect-ratio:auto}
  /* AUSGEGLICHENE Verteilung (Axel): der Bilderplan fuellt die Resthoehe und verteilt die Luecken GLEICHMAESSIG
     zwischen Kopf/Feld/CTAs/Nav/Player (space-evenly) — dynamisch je Geraetehoehe statt Klumpen unten.
     Ist der Inhalt hoeher als der Platz (kleines Geraet, Distanzen offen), scrollt .tzbody wie bisher. */
  body.dancer-mode .tzbody{display:flex;flex-direction:column}
  body.dancer-mode .tzappbody{flex:1;display:flex;flex-direction:column;min-height:0}
  body.dancer-mode .tzbild{flex:1;justify-content:space-evenly;gap:0;min-height:0}
  body.dancer-mode .tzcta{margin-top:0}
  body.dancer-mode .tznav{margin-top:0}
  body.dancer-mode .tzplayer{margin-top:5px}
  body.dancer-mode .tzbody{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
.tzlogo{display:flex;justify-content:center;padding:20px 0 8px;margin-top:8px}
.tzlogo img{width:150px;max-width:62%;height:auto;opacity:.42}
:root[data-theme="dark"] .tzlogo img{filter:invert(1);opacity:.34}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tzlogo img{filter:invert(1);opacity:.34}}
.tznav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px}
.tznav span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:60px;text-align:center}
.tzn{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:9px;width:40px;height:32px;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.tzn:disabled{opacity:.3;cursor:default}
.tzcbook{display:flex;flex-direction:column;gap:2px}
.tzclrow{display:flex;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:12.5px}
.tzcln{flex:1;color:var(--ink)}
.tzclt{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tzlist{border:1px solid var(--line);border-radius:12px;padding:11px;background:var(--panel);margin-bottom:10px}
.tzlh{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px}
.tzln{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:6px}
.tzchk{list-style:none;margin:0;padding:0}
.tzchk li{font-size:12px;color:var(--ink);padding:3px 0;line-height:1.4}
.tzchk li.done{color:var(--muted);text-decoration:line-through}
/* Persönliche Checkliste (Axel): antippbare Punkte + Fortschritt/Zurücksetzen unten */
.tzchk li.tzchki{cursor:pointer;padding:7px 4px;border-bottom:1px solid var(--line2);-webkit-user-select:none;user-select:none}
.tzchk li.tzchki:active{background:var(--panel2)}
.tzchkfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.tzchkbtns{display:flex;gap:12px;margin-left:auto}
.tzchkfoot .tzlink:disabled{opacity:.4;cursor:default;text-decoration:none}
/* Persoenliche Checkliste: Zeile = Kaestchen + Text + „···“-Knopf fuer Markierung/Entfernen.
   Die Markierungen (hervorheben/ausgrauen) liegen NUR lokal — andere sehen sie nicht. */
.tzchk li.tzchki{display:flex;align-items:flex-start;gap:7px}
.tzchkbx{flex:none;line-height:1.4}
.tzchkt{flex:1;min-width:0}
.tzchkm{flex:none;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;
  padding:2px 5px;border-radius:6px;opacity:0;transition:opacity .12s}
.tzchki:hover .tzchkm,.tzchkm:focus-visible{opacity:1}
@media (hover:none){.tzchkm{opacity:.55}}
.tzchki.hi{background:color-mix(in srgb,var(--accent) 9%,transparent);border-left:2px solid var(--accent);padding-left:6px;border-radius:0 6px 6px 0}
.tzchki.hi .tzchkt{font-weight:600;color:var(--ink)}
.tzchki.dim{opacity:.42}
.tzchki.eigen .tzchkt::after{content:"eigen";margin-left:7px;font-size:9px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:0 5px;vertical-align:1px}
/* Am Desktop sitzt dieselbe Liste im Info-Bereich — dort ohne die Mobil-Randabstaende. */
.ochecklist.mychk{padding:2px 0}
.ochecklist.mychk .tzchk li.tzchki{font-size:12.5px;padding:6px 2px}
.tzchkfoot .tzlink{border:0;background:transparent;color:var(--accent);cursor:pointer;font-size:11px;text-decoration:underline;padding:0}
/* Trainer-Homescreen: Absagen-Feld unterm nächsten Termin (gleich breit), H/D-Zeilen, Tap → Volltabelle */
.tztrabs{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:11px 13px;cursor:pointer}
.tztrabsh{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.tztrabsn{color:var(--accent);font-weight:700;letter-spacing:0}
.tzabl{display:flex;gap:8px;align-items:baseline;padding:2px 0;font-size:12.5px}
.tzablr{flex:none;width:16px;font-weight:700;color:var(--muted);font-size:10px}
.tzabln{color:var(--ink);min-width:0}
.tzabln.ok{color:var(--ok)}
.tzagrow{font-size:12px;color:var(--ink);padding:3px 0;border-bottom:1px solid var(--line2)}
.tzaglead{color:var(--muted);font-size:10.5px}
/* #115: Grund-Feld je abgemeldeter Person — mobil das Gegenstück zu .angrund am Desktop (app.js:6400).
   Eigene Zeile unter dem Namen statt daneben: am Handy bleiben neben einem Namen keine 200px übrig,
   und ein zu schmales Feld lädt nicht zum Schreiben ein. 16px Schriftgröße ist KEIN Geschmack —
   darunter zoomt iOS beim Antippen in das Feld hinein und die halbe Ansicht verrutscht. */
/* #116: Grund-Feld leer, obwohl Pflicht — ruhige Markierung statt Meldung bei jedem Tastendruck. */
.tzgrund.leerpflicht{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* Unterzeile an einem Freigabe-Schalter (z. B. „nur für Tänzer:innen") */
.fgtsub{color:var(--muted);font-weight:400}
.tzagname{margin-bottom:3px}
.tzaggrund{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin-bottom:5px}
.tzaggrund::placeholder{color:var(--muted)}
.tzaggrund:focus{outline:none;border-color:var(--accent)}
/* Defs-Optionen im ≡ (statt Dauer-Leiste — Platz!): Chips links, ≡ rechts; Popup wie das Bilderplan-Menü */
.tzcsegrow{display:flex;align-items:flex-start;gap:6px}
.tzcsegrow .tzcseg{flex:1;min-width:0}
.tzcmenuwrap{position:relative;flex:none}
.tzcmenu{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:9px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
.tzcmenupop{position:absolute;right:0;top:38px;z-index:8;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:0 8px 26px rgba(0,0,0,.3);padding:5px;min-width:230px;display:flex;flex-direction:column}
.tzcmenupop button{border:0;background:transparent;color:var(--ink);text-align:left;font-size:12.5px;padding:9px 11px;border-radius:8px;cursor:pointer}
.tzcmenupop button:active{background:var(--panel2)}
/* Trainer-Termin-Karte: ganze Karte antippbar, Absagen-Zeile dezent, interne Trainer-Zeile (🔒) */
.tzcard.tap{cursor:pointer}
.tztrabsline{font-size:11px;color:var(--accent);font-weight:600;margin-top:4px}
.tztrpriv{font-size:11px;color:var(--muted);margin-top:4px;border-left:2px solid var(--line);padding-left:7px}
/* Trainer-Bildnotizen im Mobil-Bilderplan */
.tzbnotes{margin-top:3px}
.tzbnote{font-size:10.5px;color:var(--muted);line-height:1.45}
.tzbnote b{color:var(--ink);font-weight:600}
.tztblwrap{overflow-x:auto}
.tztbl{width:100%;border-collapse:collapse;font-size:11px}
.tztbl th,.tztbl td{border:1px solid var(--line);padding:4px 6px;text-align:left;color:var(--ink)}
.tztbl th{background:var(--panel2);color:var(--muted);font-weight:600}
/* Trainer-Formatierung der Info-Tabelle in der Tänzer-Ansicht (Axel): Hervorhebung (hi) + Fett (strong) */
.tztbl tr.hi td{color:var(--accent);font-weight:600}
.tztbl tr.strong td{font-weight:600}
.tztbl .tzdone{text-align:center;width:34px}
/* Tänzer-Info: antippbarer Index (statt alle Listen untereinander) */
.tzindex{display:flex;flex-direction:column;gap:3px}
.tzfld{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:10px 2px 4px}
.tzfld:first-child{margin-top:0}
.tzlrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 12px;cursor:pointer}
.tzlrow:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.tzlico{font-size:15px;line-height:1}
.tzln2{flex:1;font-size:12.5px;font-weight:600;color:var(--ink)}
.tzlmeta{font-size:10.5px;color:var(--muted);white-space:nowrap}
/* Absagen anderer Tänzer (nur wenn „für alle sichtbar") */
.tzothers{font-size:11px;color:var(--muted);margin-top:6px}
.tzog{font-style:italic}
/* „N Absagen"-Chip in der Tänzer-Terminzeile → tippen öffnet die Je-Paar-Übersicht (ohne Grund). */
.tzabsview{margin-top:7px;display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--ink);font:inherit;font-size:11px;cursor:pointer}
.tzabsview:hover{border-color:var(--accent)}
.tzabsvn{font-weight:600}
.tzabsvc{color:var(--muted)}
/* Freigabe: Termine-Optionen (zwei Schalter) */
.fgtopts{display:inline-flex;flex-direction:column;gap:7px;text-align:left}
.fgtopt{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink)}
.fgtopt.dim{opacity:.45}
/* Verein · Team & Rollen (Space) — Vorstufe zur Mehr-Mandanten-Struktur */
.spgrid{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 12px}
.spln{flex:1;min-width:150px}
.spln label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.spln input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;color:var(--ink);font-weight:600}
.spln input:focus{outline:none;border-color:var(--accent)}
.mblist{display:flex;flex-direction:column;gap:6px}
/* Abschnitts-Überschrift (Split Trainer ↔ Tänzer) mit etwas Abstand darüber */
.mbsec{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 0 7px 2px}
.mbsec:first-of-type{margin-top:6px}
/* Herr/Dame als kleiner Segment-Schalter */
.mbseg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mbseg button{border:0;background:transparent;color:var(--muted);font-size:10.5px;font-weight:600;padding:5px 9px;cursor:pointer;line-height:1}
.mbseg button+button{border-left:1px solid var(--line)}
.mbseg button.on{background:var(--accent);color:var(--accent-ink)}
/* #108: min-height, damit die drei Spalten (Trainer:innen / Damen / Herren) auf GLEICHER Höhe liegen.
   Ohne sie ergab sich die Höhe aus dem größten Kind — und das ist je Spalte ein anderes: in den
   Tänzer-Zeilen der Wechsel-Knopf .mbswap (28px), in den Trainer-Zeilen nur .mbrole (26px).
   NACHGEMESSEN: 28 + 14 Innenabstand + 2 Rahmen = 44px gegen 42px. Deshalb steht hier 44 und nicht 42.
   Wer .mbswap oder .mbrole in der Höhe ändert, prüft diesen Wert mit — tools/durchlauf hat dafür keine
   Prüfung, das geht nur mit dem Auge oder einer Messung im Browser. */
.mbrow{display:flex;align-items:center;gap:10px;padding:7px 9px;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
/* Captain (Axel): grüner Rahmen statt Rollen-Badge — spart Platz, in der Legende erklärt. */
.mbrow.iscap{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 22%,transparent)}
button.rolebadge{cursor:pointer}
button.rolebadge:hover{filter:brightness(1.12)}
/* Rolle wechseln: kompakter ⋮-Knopf (statt Text-Label „Trainer:in"/„Tänzer:in" — Axel: platzsparender) */
.mbrole{flex:none;border:0;background:transparent;color:var(--muted);cursor:pointer;line-height:0;padding:0;width:20px;height:26px;display:grid;place-items:center;border-radius:6px}
.mbrole:hover{background:var(--panel);color:var(--ink)}
.mbname{font-size:12.5px;font-weight:600;color:var(--ink);flex:0 1 auto;max-width:132px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbmail{flex:1 1 60px;font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbmail:empty::before{content:attr(data-ph);color:var(--muted);opacity:.55}
.mbname:focus,.mbmail:focus{outline:none;background:var(--panel);border-radius:5px;box-shadow:0 0 0 1px var(--accent)}
.mbdel{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;width:24px;height:24px;border-radius:6px;flex:none}
.mbdel:hover{background:var(--panel);color:var(--accent)}
/* Team-Tab: Unter-Navigation Freigabe|Team. align-self:flex-start, sonst streckt der Spalten-Flex
   (.fgwrap) das inline-flex zum vollbreiten Balken (Umbruch) — es soll ein kompaktes Pill sein. */
.teamsub{display:inline-flex;align-items:center;align-self:flex-start;width:max-content;gap:4px;margin:0 0 12px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:4px}   /* exakt wie #setTabs: kein Top-Margin (11px vom oberen Rand wie Einstellungen), align-items:center */
.teamsub button{border:0;background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;padding:7px 18px;border-radius:8px;cursor:pointer}   /* gleiche Größe wie .tabm.sheets (Einstellungen/Choreo) — Axel */
.teamsub button.on{background:var(--accent);color:#fff}
.teamsub button:not(.on):hover{color:var(--ink)}
/* Mitglied: Abwesenheiten-Schalter — Text-CTA statt Glocke (Axel: „aus der Glocke einen Text 'Abwesenheiten',
   ähnlich den bekannten CTAs"). Aus = dezente Outline, an = accent-gefülltes Pill. */
/* #130: „ein Mü größer" (Axel) und mit Glocke links. inline-flex statt inline, damit Symbol und
   Text sauber auf einer Grundlinie sitzen; 11.5px statt 11px und etwas mehr Innenabstand.
   Die Höhe bleibt bei 25px und damit UNTER .mbrole (26px) — waechst sie darueber, waechst die
   ganze Zeile mit, und Trainer- und Taenzer-Spalten stehen wieder verschieden hoch (#108). */
.mbabs{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:11.5px;font-weight:600;line-height:1;padding:5px 12px;border-radius:999px;white-space:nowrap}
/* Die Glocke LEUCHTET nur, wenn die Person die Abwesenheiten wirklich verwaltet — ausgeschaltet
   bleibt sie blass. Ein Symbol, das immer gleich aussieht, sagt nichts. */
.mbabs .mbabsico{opacity:.45;flex:none}
.mbabs.on .mbabsico{opacity:1}
.mbabs.on{background:color-mix(in srgb,var(--accent) 14%,var(--panel));border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
.mbabs:not(.on):hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.mbhint{font-size:10.5px;color:var(--muted);line-height:1.55;margin-top:9px}
/* Administration zweispaltig & gedeckelt (Axel: „viel zu breit"): links Verein/Team+Trainer, rechts Tänzer (Herr/Dame). */
/* #111: Deckel von 1280 auf 1460. NACHGEMESSEN: bei 1280 war eine Spalte 413px breit — und zwar
   AUCH auf einem 1900px-Bildschirm, der Deckel schluckte den ganzen Zugewinn. Eine Tänzer-Zeile
   braucht allein 167px für die festen Bedienelemente (⋮, Wechseln, U16, Paar, ×); für Name UND
   E-Mail blieben ~150px, die Adresse war deshalb IMMER gekürzt. Mit 1460 sind es ~473px je Spalte.
   Kein Wert zum Runden: 3 × 473 + 2 × 20 Abstand = 1459. Wer die Zeile um ein Bedienelement
   erweitert, rechnet hier nach (tools/zeilentest zeigt es bei jeder Breite). */
.spadmin{max-width:1460px}
/* Verein/Team vollbreit oben; darunter drei GLEICH breite, oben bündige Spalten (Trainer | Damen | Herren),
   responsiv per flex-wrap (bricht je nach Breite auf 2 bzw. 1 Spalte um). align-items:flex-start = oben bündig. */
.spgrid{margin:10px 0 14px}
.spcols{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.spcol{display:flex;flex-direction:column;min-width:0;flex:1 1 320px}
/* #111 — WIRD ES ENG, RUTSCHT DIE ADRESSE IN DIE ZWEITE ZEILE.
   Axel: „wenn's so unlesbar ist, dann bitte doch untereinander … auch jetzt ist es bei den Tänzern
   sehr gestaucht." Eine auf „pasimo…" gekürzte Adresse sagt nichts mehr, kostet aber den meisten
   Platz. Statt sie weiter zu quetschen, bekommt sie unterhalb des Namens die volle Breite.
   Die Bedingung hängt an der SPALTE (container query), nicht am Fenster — richtig so: ob es eng
   wird, entscheidet die Spaltenbreite, und die hängt davon ab, ob zwei oder drei Spalten
   nebeneinander stehen. Ein Media-Query aufs Fenster träfe daneben.
   Nur Zeilen MIT Paarnummer (Tänzer:innen): Trainer-Zeilen haben ~60px weniger Bedienelemente und
   bleiben auch schmal einzeilig lesbar. */
/* #111 — IN DEN TEAM-SPALTEN STEHT DIE ADRESSE IMMER IN DER ZWEITEN ZEILE.
   Axel: „wenn's so unlesbar ist, dann bitte doch untereinander … auch jetzt ist es bei den Tänzern
   sehr gestaucht."

   ERST NACHGEMESSEN, DANN ENTSCHIEDEN. Eine Zeile aus ⋮ + Name + Adresse + vier Bedienelementen
   passt in eine Team-Spalte SCHLICHT NICHT: die Bedienelemente allein belegen 167px, echte Adressen
   140–230px, Name 30–110px, dazu Abstände — macht 415–575px bei ~470px Spaltenbreite.
   Ein erster Entwurf schaltete erst unterhalb von 450px Spaltenbreite um. Die Messung hat ihn
   widerlegt: bei 473px waren 5 von 8 Zeilen gekürzt, bei 441px nur eine — die Darstellung wurde
   also AUSGERECHNET auf dem großen Bildschirm schlechter. Solche Schwellen raten sich nicht.

   Deshalb ohne Bedingung, für Trainer- UND Tänzer-Zeilen: Zeile 1 trägt Name, Kennzeichen und die
   Bedienelemente, Zeile 2 die volle Adresse. Immer gleich hoch (58px), immer lesbar, keine Schwelle,
   die bei der nächsten Änderung wieder kippt. Der Name bekommt flex:1 und schiebt die
   Bedienelemente nach rechts — dadurch stehen sie in allen Zeilen bündig.
   Der Einzug von 30px setzt die Adresse unter den Namen (⋮ ist 20px breit + 10px Abstand).
   GILT NUR IN DEN TEAM-SPALTEN (.spcol) — die Admin-Liste darüber bleibt einzeilig. */
.spcol .mbrow{flex-wrap:wrap;row-gap:0;padding-top:6px;padding-bottom:7px;min-height:58px}
.spcol .mbname{flex:1 1 auto;max-width:none}
/* Zeile 2 trägt Kennzeichen UND Adresse (siehe mbRow in app.js). flex-basis 100% erzwingt den
   Umbruch — sonst würde sie sich bei breiten Spalten hinter das × in Zeile 1 setzen.
   Der Einzug von 30px stellt sie unter den Namen (⋮ ist 20px breit + 10px Abstand). */
/* FESTE Höhe, nicht min-height: nachgemessen ist das Kennzeichen 17,3px hoch, die Adresszeile 14,8px.
   Ohne festen Wert wären Zeilen MIT Kennzeichen 0,3px höher — genau die Sorte Ungleichheit, die Axel
   gemeldet hat. 18px fasst beides ohne Abschneiden. */
.spcol .mbz2{order:99;flex:0 0 100%;display:flex;align-items:center;gap:7px;min-width:0;padding-left:30px;height:18px}
.spcol .mbz2 .mbmail{flex:0 1 auto;font-size:11px;line-height:1.35}
/* Die Deckelung auf 104px aus der Grundregel gilt hier NICHT mehr: in Zeile 1 musste das Kennzeichen
   begrenzt werden, weil es sonst die Bedienelemente verschob — in Zeile 2 kann es das nicht, und ein
   abgeschnittenes „NICHT ANGEME…" war genau das, was Axel bemängelt hat. */
.spcol .mbz2 .mbstat{flex:0 0 auto;max-width:none}
.spadmin>.authcard{margin-top:18px}
/* Kompakter Geschlechts-Wechsel-Pfeil in den Damen/Herren-Spalten (ersetzt das redundante Herr/Dame-Segment) */
/* #111: Höhe 26px statt 28 — wie .mbrole und .mbdel. Die 2px Unterschied machten JEDE Tänzer-Zeile
   2px höher als jede Trainer-Zeile, quer über die drei Spalten sichtbar. */
.mbswap{border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;line-height:0;padding:0;width:30px;height:26px;display:grid;place-items:center;border-radius:8px;flex:none}
.mbswap:hover{color:var(--ink);border-color:var(--accent)}
.mbspacer{flex:1;min-width:6px}
/* Unter-Überschrift Herren/Damen (kleiner als .mbsec) */
.mbsub{font-size:11px;font-weight:600;color:var(--muted);margin:12px 0 6px 2px}
.mbsub:first-of-type{margin-top:4px}
/* Adresse: EIGENE ZEILE (siehe #111 weiter oben), nicht kürzen, nicht umbrechen.
   Bis v306 stand hier flex:1 1 0 mit „…" — die Zeile blieb einzeilig und die Adresse war fast immer
   abgeschnitten. Das war der Zustand, den Axel als „sehr gestaucht" gemeldet hat. Diese Regel steht
   NACH der Grundregel oben und ergänzt sie nur; wer sie ändert, prüft beide zusammen. */
.spcol .mbmail{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* #128: Das Kennzeichen steht wieder neben dem Namen. Die 104px-Deckelung aus der Grundregel ist
   hier AUFGEHOBEN — sie stammt aus der Zeit, als in derselben Zeile noch Wechsel-Knopf und U16
   standen; seit die im ⋮-Menü sind (#129), ist der Platz da und „NICHT ANGEMELDET" passt ganz hin.
   flex 0 1 auto mit min-width 0 bleibt: wird es doch einmal eng, schrumpft es mit „…", statt die
   Bedienelemente zu verschieben. */
.spcol .mbstat{flex:0 1 auto;min-width:0;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
/* Erlaubte Anmeldungen (Auth-Methoden) */
.authcard{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.authhd{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px}
.authgrid{display:flex;flex-wrap:wrap;gap:9px 18px}
.authopt{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);cursor:pointer}
/* Nächster-Termin-Kachel: neutraler Hintergrund, wenn kein Highlight; Wetter-Chip dezent */
.tzbanner:not(.hi){background:var(--panel)}
.tzbanner:not(.hi) .tzbk{color:var(--muted)}
/* Wetter oben rechts auf der „Nächster Termin"-Kachel — größer, gut sichtbar */
.tzwx{position:absolute;top:11px;right:13px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;line-height:1}
.tzwx:empty{display:none}
.tzwx[data-tzwx]{cursor:pointer}
.tzwx[data-tzwx]:hover{color:var(--accent)}
.tzbanm{font-size:11.5px;color:var(--ink);margin-top:3px;line-height:1.4}
/* Route → Google Maps (Termin-Karte + Startkachel) */
.tzmap{display:inline-flex;align-items:center;gap:3px;margin-left:7px;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;vertical-align:middle}
.tzmap svg{flex:none}
.tzmap:hover{text-decoration:underline;text-underline-offset:2px}
/* Oberteil je Rolle im Termin (eigene Klasse — NICHT .tztop, das ist der Phone-Kopf) */
/* Oberteil dezent (kein großer Chip mehr, Axel) — kleine, ruhige Zeile */
.tzdress{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;font-weight:500;color:var(--ink);flex-wrap:wrap}
.tzdday{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tzdday b{font-weight:600;color:var(--muted)}
.tzdl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* Oberteil (links) + Absage-Link (rechts) in EINER Zeile → kein Leerraum */
.tzfootrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.tzfootrow .tzdress{margin-top:0}
.tzabs{flex:none;margin-left:auto}
.tzabs .tzlink{padding:2px 0}
/* Eigener Kalender (betriebssystem-unabhängig) — Feld-Button + Popover */
.dpwrap{flex:1;min-width:0}
.dpfield{width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13.5px;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.dpfield.empty{color:var(--muted)}
.dpfield:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.datepop{position:fixed;z-index:120;width:264px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:11px}
.datepop[hidden]{display:none}
.dphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dptitle{font-size:14px;font-weight:700;color:var(--ink)}
.dpnav{border:1px solid var(--line);background:var(--panel2);color:var(--ink);width:30px;height:30px;border-radius:8px;font-size:17px;line-height:1;cursor:pointer}
.dpnav:hover{border-color:var(--accent);color:var(--accent)}
.dpdow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.dpdow span{text-align:center;font-size:10px;font-weight:600;color:var(--muted);padding:2px 0}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpd{aspect-ratio:1;border:0;background:transparent;color:var(--ink);border-radius:8px;font-size:12.5px;cursor:pointer;font-variant-numeric:tabular-nums;display:grid;place-items:center}
.dpd.empty{visibility:hidden;cursor:default}
.dpd:hover:not(.empty){background:var(--panel2)}
.dpd.today{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,var(--line))}
.dpd.sel{background:var(--accent);color:#fff;font-weight:700}
.dpfoot{display:flex;justify-content:space-between;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.dplink{border:0;background:transparent;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px}
.dplink:hover{text-decoration:underline}
/* Tänzer-Definitionen: Tanz-Auswahl (Chips) + LESBARE Zähltabelle (Inhalt der Zellen ist das Wichtige) */
.tzcseg{display:flex;flex:none;flex-wrap:nowrap;overflow-x:auto;gap:5px;margin-bottom:9px;padding-bottom:3px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tzcseg::-webkit-scrollbar{display:none}
.tzcseg > button{flex:0 0 auto}
.tabletdefs .tzcseg{flex-wrap:wrap;overflow:visible}
.tzcseg button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:20px;padding:5px 11px;font-size:11px;font-weight:600;cursor:pointer}
.tzcseg button.on{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--panel)}
.tzcseg .dc{width:8px;height:8px;border-radius:50%}
.tzcntwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
/* Tänzer bearbeiten Definitionen (Freigabe „Bearbeiten"): Zellen editierbar, Fokus dezent markiert */
.tzced{cursor:text;min-width:36px}
.tzced:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent);background:var(--panel)}
.tzcedhint{font-size:10.5px;color:var(--muted);margin:6px 2px 8px}
/* Mobil-Defs-Bearbeitung (Axel): CTA-Leiste (Reihe/Markieren/Verbinden), Auswahl-Zellen, +Spalten, Reihen-Layout */
.tzcntcta{display:flex;flex:none;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.tzcbtn{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:9px;padding:6px 12px;font-size:11.5px;font-weight:600;cursor:pointer}
/* Mobil-Defs (21.07., Kollegen-Feedback): H/D-Filter, invertierte H/D-Spalten-Ansicht, Bild-Anker-Chips */
.tzrseg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.tzrseg button{border:0;background:var(--panel2);color:var(--muted);padding:6px 10px;font-size:11.5px;font-weight:600;cursor:pointer}
.tzrseg button + button{border-left:1px solid var(--line)}
.tzrseg button.on{background:color-mix(in srgb,var(--accent) 14%,var(--panel2));color:var(--ink)}
.tzpins{display:inline-flex;gap:2px;margin-right:4px;vertical-align:middle}
.tzank{border:0;border-radius:4px;padding:1px 5px;font-size:9.5px;font-family:var(--mono);font-weight:700;cursor:pointer;line-height:1.4}
.tzcnt.tzinv td.tzci{background:var(--panel2);color:var(--muted);font-weight:600;text-align:left;white-space:nowrap}
.tzcnt.tzinv td.tzci .tzpins{margin:0 0 0 5px}
.tzcnt.tzinv td.tzci{position:relative;padding-right:20px}
.tzcnt.tzinv td.tzci .tzdel{width:15px;height:15px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:10px;line-height:1;padding:0;display:inline-grid;place-items:center;margin-left:3px;vertical-align:middle;opacity:.7;cursor:pointer}
.tzins{right:3px}
.tzcnt.tzinv .tzcit{display:inline-block;margin-right:6px;padding:0 5px;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,var(--panel2));color:var(--ink);font-size:9.5px;font-weight:700}
.tzcnt.tzinv tr.tsti td{border-top:2px solid color-mix(in srgb,var(--ink) 25%,var(--line))}
.tzcnt.tzinv td{text-align:left}
.tzcnt.tzinv td.dcol{color:var(--muted)}
.tzcnt.tzinv td.dcol.filled,.tzcnt.tzinv td.filled{color:var(--ink)}
.tzcbtn.on{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.tzcbtn.go{background:var(--accent);border-color:var(--accent);color:#fff}
.tzcnt td.sel{outline:2px solid var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.tzcolth{position:relative;padding-right:16px!important}
.tzins{position:absolute;right:1px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:11px;line-height:1;padding:0;display:grid;place-items:center;opacity:.45;cursor:pointer}
.tzcnt.tzrow th.tzth{border-bottom-width:2px}
.tzcnt td.tst,.tzcnt.tzrow th.tzth{border-left:2px solid color-mix(in srgb,var(--ink) 25%,var(--line))}   /* Takt-Grenze deutlich */
.tzcnt{border-collapse:collapse;font-size:11px;width:100%;min-width:max-content}
.tzcnt th,.tzcnt td{border:1px solid var(--line);padding:4px 7px;text-align:center;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tzcnt thead th{background:var(--panel2);color:var(--muted);font-weight:600;position:sticky;top:0}
.tzcnt td.tzct{background:var(--panel2);color:var(--muted);font-weight:600}
.tzcnt td.tzcr{background:color-mix(in srgb,var(--panel2) 60%,transparent);color:var(--muted);font-weight:600;font-size:9.5px}
.tzcnt tr.d td{color:var(--muted)}
.tzcnt td.filled{color:var(--ink);font-weight:500}
.tzcnt td.hd{vertical-align:middle;background:color-mix(in srgb,var(--accent) 5%,transparent)}   /* Herr+Dame zusammengefasste Zelle (rowspan) — leicht hervorgehoben */
/* CTAs im Tänzer-Bilderplan (Übergänge/Animation) — wie die Icon-Spalte im Editor, kompakt */
.tzcta{display:flex;gap:7px;justify-content:center;margin-top:2px}
.tzcta button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:9px;padding:6px 11px;font-size:11px;font-weight:600;cursor:pointer}
.tzcta button.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.tzcta svg{width:15px;height:15px}
/* Dance-Label im Bild-Kopf (Tanzhervorhebung) */
.tzbdance{font-weight:700;color:var(--ink)}
/* Distanzen-Panel (Wege ins nächste Bild) */
/* #21: schwebender Kasten ÜBER dem Feld statt eigener Block darunter (der drückte Navigation und
   Player aus dem Bild). Antippen blendet ihn zurück — wie die Desktop-.distbox. */
.tzdist{position:absolute;top:6px;left:6px;z-index:2;max-width:58%;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--panel) 92%,transparent);padding:4px 7px;cursor:pointer;transition:opacity .12s;box-shadow:0 1px 6px rgba(0,0,0,.07)}
.tzdist.faded{opacity:.16}
.tzdist[hidden]{display:none}
.tzdh{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:2px}
.tzdrow{display:flex;justify-content:space-between;gap:7px;font-size:9.5px;color:var(--ink);padding:0.5px 0;line-height:1.3}
.tzdrow.me{color:var(--accent);font-weight:600}
.tzdrow b{font-variant-numeric:tabular-nums}
/* Player im Tänzer-Bilderplan = Trainertool-Look: Audiokurve (Tanzfarben) + Transport + Tempo-Leiste */
.tzplayer{display:flex;flex-direction:column;gap:8px;margin-top:9px;border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:9px 11px}
.tzwave{position:relative;height:44px}
.tzwave .waveov{height:44px}
.tzph{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);pointer-events:none;transform:translateX(-1px);left:0;z-index:2}
.tzprow{display:flex;align-items:center;gap:10px}
.tzpp{border:0;background:var(--accent);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}
.tzpp svg{width:16px;height:16px;fill:#fff}
.tzptime{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tzprow .temposlider{flex:1;height:24px;overflow:visible}   /* v166: Optik unveraendert — nur die GRIFF-Zone waechst */
.tzprow .temposlider .ts-fill{border-radius:8px 0 0 8px}    /* Fuellung bleibt ohne Clip sauber gerundet */
.tzprow .temposlider input{inset:-13px 0;height:auto}       /* unsichtbares Touch-Ziel ~50px hoch (Axel: „fummelig", aber nicht haesslich) */
/* Tanz-Band über der Audiokurve (welcher Tanz wo) */
.tzband{margin-top:1px;height:16px}
/* Stand des letzten Publish (Tanzübersicht) — Phone-Kopf zeigt den Stand jetzt im Bilderplan-/Definitionen-Kopf (.tzappstand) */
.tzstand{font-size:12px;color:var(--muted);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.tzstand b{color:var(--ink)}
.tzstl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.tzstp{font-size:11px}
/* ☰-Menü (eigene Reiter Bilderplan|Tanzübersicht + PDF) */
.tzapphd{position:relative}
.tzmenu{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px 5px;border-radius:8px;flex:none;display:grid;place-items:center}
.tzmenu:hover{color:var(--ink);background:var(--panel2)}
.tzmenupop{position:absolute;top:34px;right:0;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.4);padding:5px;min-width:180px;display:flex;flex-direction:column;gap:2px}
.tzmenupop button{border:0;background:transparent;color:var(--ink);text-align:left;padding:10px 12px;border-radius:8px;font-size:12.5px;cursor:pointer}
.tzmenupop button:hover{background:var(--panel2)}
.tzmenupop button.on{color:var(--accent);font-weight:600}
/* Menü-Einträge mit Icon links, bündig (Icon-Spalte fest → alle Texte starten gleich) */
.tzmi{display:flex;align-items:center;gap:11px}
.tzmi svg{width:16px;height:16px;flex:none;color:var(--muted)}
.tzmi.on svg{color:var(--accent)}
/* Tanzübersicht (Liste) */
.tztz{display:flex;flex-direction:column}
.tztzrow{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.tztzgo{flex:1;display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;align-items:center;padding:9px 3px;font-size:12.5px;text-align:left;border:0;background:transparent;color:inherit;cursor:pointer;font-family:inherit}
.tztzgo.nogo{cursor:default}
.tztzrow:hover .tztzgo{background:var(--panel2)}
/* „−5s"/Play-Knopf je Tanz — dezent, tanzunabhängige Aktion (spielt ab, statt nur zu springen) */
.tztzplay{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;padding:0 10px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.tztzplay svg{width:15px;height:15px;fill:currentColor}
.tztzplay:hover{color:var(--accent);background:var(--panel2)}
.tztzn{color:var(--ink);font-weight:600}
.tztzr{color:var(--muted);font-size:11px;white-space:nowrap}
.tztzt{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
/* Storyboard: Übersicht je Bild (Mini-Feld), Klick → in den Bilderplan */
.tzstgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tzstb{display:flex;flex-direction:column;gap:5px;padding:7px;border:1px solid var(--line);border-radius:11px;background:var(--panel);cursor:pointer;text-align:left}
.tzstb:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.tzsth{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink)}
.tzsth .tzstd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tzsth .tzstn{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.tzstm{font-size:10px;color:var(--accent);font-family:var(--mono);font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tzstfield{border:1px solid var(--line);border-radius:8px;background:var(--floor);padding:3px}
.tzstfield svg{width:100%;height:auto;display:block}
.tzstl2{font-size:10.5px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tzpdf{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:11px;padding:10px;font-size:12.5px;font-weight:600;cursor:pointer}
.tzpdf:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}
/* Echter Login (M3) — Login-Screen + Header-Badge (nur sichtbar bei login.enabled) */
#loginScreen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
/* LOGIN (Axel: „schöner/professioneller"): klare Hierarchie — Marke, EIN erkennbarer Provider-Knopf,
   sichtbare „oder"-Trennung, benannte Felder, eine eindeutige Aktion. Zurückhaltend gehalten;
   Rot bleibt allein der Aktion vorbehalten. */
.loginbox{width:360px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px 28px 26px;box-shadow:0 18px 50px rgba(0,0,0,.16)}
.loginhd{text-align:center;margin-bottom:24px}
.loginbrand{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.loginsub{font-size:12.5px;color:var(--muted);margin-top:3px}
/* Produktname + Zweck auf dem Anmeldeschirm — von Googles Marken-Ueberpruefung verlangt (der
   Anmeldeschirm IST fuer Google die Startseite). Bewusst leise: der Verein bleibt die Ueberschrift. */
/* Zweck-Zeile auf dem Ladeschirm — steht im statischen HTML, damit Googles Marken-Ueberpruefung
   sie sieht (sie fuehrt kein JavaScript aus). Fuer Menschen nur einen Wimpernschlag sichtbar. */
.ldzweck{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.5;max-width:26em}
.ldzweck b{font-weight:600;color:var(--ink)}
.loginzweck{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.5;max-width:30em}
.loginzweck b{font-weight:600;color:var(--ink)}
.loginbtns{display:flex;flex-direction:column;gap:9px}
.loginbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:10px;padding:11px 13px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s}
.loginbtn:hover{border-color:color-mix(in srgb,var(--ink) 28%,var(--line))}
.loginbtn.prov svg{flex:none}
.loginbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);margin-top:4px}
.loginbtn.primary:hover{filter:brightness(1.06);border-color:var(--accent)}
.loginbtn:disabled{opacity:.5;cursor:default}
/* „oder mit E-Mail" — Linie mit eingebettetem Text statt harter Trennkante */
.logintrenn{display:flex;align-items:center;gap:11px;margin:18px 0 16px;color:var(--muted);font-size:11px}
.logintrenn::before,.logintrenn::after{content:"";flex:1;height:1px;background:var(--line)}
.loginemail{display:flex;flex-direction:column;gap:5px}
.loginlbl{font-size:11px;font-weight:600;color:var(--muted);margin-top:6px}
.loginemail input{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:10px 11px;font-size:13px;color:var(--ink);font-family:inherit}
.loginemail input:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.loginerr{margin-bottom:16px;font-size:12px;color:var(--accent);line-height:1.45;background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:9px;padding:9px 11px}
.loginnote{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.55;text-align:center}
/* Wartescreen (Freischaltung ausstehend) — teilt sich das Login-Box-Layout */
.waitok{margin-top:12px;font-size:12px;color:var(--ok);line-height:1.5;background:var(--ok-bg);border-radius:9px;padding:9px 11px}
#waitScreen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.waiticon{width:56px;height:56px;margin:18px auto 4px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.waithd{font-size:16px;font-weight:700;color:var(--ink);margin-top:6px}
.waittx{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:8px}
.waitacc{font-size:11.5px;color:var(--muted);margin-top:12px}.waitacc b{color:var(--ink);font-weight:500}
.waittx b{color:var(--ink);font-weight:600}
.loginlink{align-self:center;margin-top:12px;border:0;background:transparent;color:var(--muted);font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-family:inherit}
.loginlink:hover{color:var(--ink)}
.loginlink:hover{color:var(--ink)}
/* Neue Anmeldungen (Freischalten) im Team-Tab */
.pendcard{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel));border-radius:12px;padding:11px 13px;margin-bottom:14px}
.pendhd{font-size:12px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pendn{background:var(--accent);color:var(--accent-ink);border-radius:20px;font-size:10.5px;padding:1px 8px}
.blockcard{border-color:var(--line);background:var(--panel2)}
.blockcard .pendhd{color:var(--muted)}
.pendwarn{display:block;font-size:10.5px;color:var(--warn);line-height:1.4;margin-top:2px}
.pendrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))}
.pendinfo{flex:1;display:flex;flex-direction:column;min-width:0}
.pendname{font-size:13px;font-weight:600;color:var(--ink)}
.pendmail{font-size:11px;color:var(--muted)}
.pendwait{font-size:11px;color:var(--muted);font-style:italic}
/* #108: nowrap + Kürzen. „NICHT ANGEMELDET" ist in einer schmalen Spalte breiter als der Platz —
   ohne nowrap brach es auf ZWEI Zeilen um (nachgemessen: 31px hoch statt 15px) und schob die Zeile
   auf 47px. Und weil ein umbrechender Text seine Mindestbreite behält, ließ er sich nicht schrumpfen:
   die Zeile lief 31px nach rechts über, das × stand außerhalb. flex/min-width erlauben das Schrumpfen,
   max-width verhindert, dass das Kennzeichen der E-Mail den ganzen Platz nimmt. */
.mbstat{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:5px;padding:1px 5px;vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;max-width:104px}
.mbstat.dummy{color:var(--muted);border:1px dashed var(--line)}
.mbstat.inv{color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line))}
.loginbadge{display:inline-flex;align-items:center;gap:8px;margin-right:6px}
.lbname{font-size:12px;font-weight:600;color:var(--ink)}
.lbrole{font-size:10px;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:20px;padding:1px 8px}
body.ro-mode .lbrole{color:var(--muted);background:var(--panel2);border-color:var(--line)}   /* „Tänzer:in" neutral (nicht rot wie Trainer/Admin) */
/* Der eigene Name als Knopf (Taenzer:innen, Desktop) — sieht aus wie Text, verraet sich beim Zeigen. */
.lbnameb{border:0;background:transparent;font:inherit;color:var(--ink);cursor:pointer;padding:1px 4px;border-radius:6px;text-align:left}
.lbnameb:hover{background:var(--panel2);text-decoration:underline;text-underline-offset:2px}
.lbout{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:7px;padding:3px 9px;font-size:11px;cursor:pointer}
.lbout:hover{color:var(--ink);border-color:var(--accent)}
.mbpair,.mbdr{flex:none;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:11px;color:var(--ink);text-align:center;cursor:pointer}
.mbpair{width:58px}
.mbdr{width:64px}
.mbpair:focus{outline:none;border-color:var(--accent)}
/* Angeheftetes Icon-Kacherl (Pin, das auf eine Info-Liste verlinkt) */
.tzpinlink{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer}
.tzpinlink:hover{filter:brightness(1.05)}
.tzpini{width:30px;height:30px;flex:none;color:var(--accent);display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:9px}
.tzpini svg{width:19px;height:19px}
.tzpinbody{flex:1;display:flex;flex-direction:column;gap:1px}
.tzpinarr{color:var(--accent);font-size:18px;flex:none}
.pinlink{color:var(--accent);font-weight:600;border:0;background:transparent;font-family:inherit;font-size:inherit;cursor:pointer;padding:1px 3px;border-radius:5px}
.pinlink:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);text-decoration:underline}
.tzmarkbtn{font-size:15px;flex:none}
.tzmarkbtn.on{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
/* Browser-Tab (nicht installierte App): bunte Tanz-Leiste unterm Audiographen weg (Axel, Platz) */
body.dancer-mode:not(.tzstandalone) .tzband{display:none}
.tznadd{font-size:11px;margin-top:2px;display:inline-block}
/* Trainer-Notiz-Badge: Overlay rechts unten IM Feld (kein Platzverbrauch im Kopf, Axel) */
.tznbadge{position:absolute;right:8px;bottom:8px;z-index:5;display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent);border-radius:999px;padding:4px 9px;font-size:13px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.tznbadge .tznbn{font-size:10.5px;font-weight:700;color:var(--muted)}
.tznbadge.has{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.tznbadge.has .tznbn{color:var(--accent)}
/* P-06 Validierungs-Hinweis + N-01 Shortcut-Hilfe */
.editwarn{text-align:center;font-size:11px;color:#c47f17;padding:2px 0}
.schlist{display:flex;flex-direction:column;gap:2px;min-width:340px}
.schrow{display:flex;gap:12px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.schrow:last-child{border-bottom:0}
.schk{flex:0 0 210px;font-family:var(--mono);font-size:11.5px;color:var(--accent)}
.waitname{display:flex;gap:7px;margin:10px 0 2px}
.waitname input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;color:var(--ink)}
.loginbtn.sm{padding:8px 13px;font-size:12.5px}
.waitnamehint{font-size:10.5px;color:var(--muted);margin-bottom:6px}

/* ===== FUNKTIONAL v154 (Ausblenden-Kennzeichnung Trainer-Mobil) — SEPARAT vom Design-Umbau:
   bei einem visuellen Rueckbau diesen Block NICHT anfassen. ===== */
/* Bilderplan (ein Bild): Overlay-Plakette oben links im Feld — absolut, verschiebt nichts. */
.tzhidb{position:absolute;top:26px;left:10px;z-index:4;display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 82%,transparent);border-radius:999px;padding:2px 8px;pointer-events:none}
/* Storyboard: ausgeblendete Kacheln = Mini-Feld gedimmt + kleines Auge in der Feld-Ecke. */
.tzstfield{position:relative}
.tzstb.hid .tzstfield svg{opacity:.5}
.tzsthid{position:absolute;top:4px;right:4px;z-index:2;color:var(--muted)}

/* ===== FUNKTIONAL v155 (Saison & Absagen — Team-Regeln, Termine-Sidebar) ===== */
.seasonrow{display:flex;align-items:center;gap:7px}
.seasonrow .fin{flex:1;min-width:0}
.seasonbis{color:var(--muted);font-size:11.5px;flex:none}
.absrule{display:flex;align-items:center;gap:7px}

/* ===== FUNKTIONAL v158 (Freigabe-Umbau, Lock-Overlays, Neu-Hinweis) ===== */
/* Trainings-Sperre sichtbar: halbtransparenter Kasten + dezentes Schloss ueber gesperrten Bereichen */
.lockcover{position:absolute;inset:0;z-index:6;border-radius:inherit;background:color-mix(in srgb,var(--bg) 42%,transparent);display:flex;align-items:center;justify-content:center;pointer-events:none}
.lockcover svg{color:var(--muted);opacity:.55;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--bg) 70%,transparent))}
/* Freigabe: Apps-Tabelle + angeheftete Infos nebeneinander (Gesamtbreite unveraendert) */
.fgcols{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;align-items:start}
@media (max-width:1180px){.fgcols{grid-template-columns:1fr}}
/* Bereichs-Uebersicht in der Freigabe-Kachel */
.fgstat{margin:4px 0 10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel2)}
.fgstrow{display:grid;grid-template-columns:minmax(86px,1fr) 92px 92px 62px;gap:8px;align-items:center;padding:4px 2px;font-size:12px}
.fgstrow.head{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:2px}
.fgstn{font-weight:600}
.fgstt{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.fgstchip{justify-self:end;font-size:10px;font-weight:700;border-radius:20px;padding:1px 8px;white-space:nowrap}
.fgstchip.open{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.fgstchip.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
/* Freigabe-Verlauf scrollt in der Kachel (viele Freigaben schieben sonst alles nach unten) */
.fghist.scroll{max-height:210px;overflow:auto;padding-right:4px}
/* „Neu seit deinem letzten Besuch" — Info-Karte mit Gelesen-Haken (kein Reload-Zwang mehr) */
.tznewstand.info{cursor:pointer}
.tznsx{flex:none;align-self:center;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;width:30px;height:30px;font-size:14px;cursor:pointer;margin-left:6px}
.tznsx:hover{color:var(--ink)}

/* ===== FUNKTIONAL v159 ===== */
/* Freigabe-Uebersicht: ruhige Karten-Zeilen statt Tabelle */
.fgstat2{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden;margin-top:2px}
.fgsrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line2)}
.fgsrow:last-child{border-bottom:0}
.fgsmain{flex:1;min-width:0}
.fgsname{font-weight:650;font-size:13px}
.fgsmeta{font-size:11px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}
.fgsdot{opacity:.6;margin:0 2px}
/* Mobile Scrub-Lupe: flacher Detail-Audiograph ueber der Player-Leiste, nur waehrend des Ziehens */
.tzmag{position:absolute;left:4px;right:4px;bottom:calc(100% + 6px);height:86px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.28);overflow:hidden;z-index:8;pointer-events:none}
.tzmag svg{width:100%;height:100%;display:block}
.tzmagt{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:1px 7px}

/* ===== FUNKTIONAL v160 (Freigabe-Layout ausbalanciert) ===== */
.fglinkbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fglinkbar .fglinkurl{flex:1;min-width:180px}
.fgsplit2{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;align-items:start}
@media (max-width:1100px){.fgsplit2{grid-template-columns:1fr}}
.fgcols{align-items:stretch}

/* v161: Tanz-Tag in der mobilen Scrub-Lupe (wie Desktop-Lupe) */
.tzmagd{position:absolute;top:4px;left:6px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.tzmagd .dc{width:7px;height:7px;border-radius:50%;flex:none}

/* ===== FUNKTIONAL v162: iPad/enge Breiten (Pascals iPad, Axel) — Header bleibt EINZEILIG,
   der Freigeben-CTA bleibt sichtbar statt von overflow:hidden abgeschnitten ===== */
.lbname{display:inline-block;max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.loginbadge{min-width:0}
@media (max-width:1420px){
  .top{gap:6px 8px;padding:3px 9px}
  .top .choreo small{display:none}
  .tab{padding:5px 10px;font-size:12.5px}
  .lbname{max-width:11ch}
  .cbox>.hd.edhd{flex-wrap:wrap;row-gap:5px}
  .tabm.sheets button{padding:5px 11px;font-size:12.5px}
  .hd.edhd .btn.sm{padding:5px 9px;font-size:12px}
  .hd.edhd{gap:6px}
}
@media (max-width:1180px){
  .lbname{max-width:8ch}
  .top .choreo b{display:inline-block;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
}

/* ===== FUNKTIONAL v163: Transport-Steuerzeile im Bilderplan (sobald Musik lief) ===== */
.tznav.transport{display:flex;align-items:center;justify-content:center;gap:16px}
.tztrgrp{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px 7px}
.tznav.transport .tzn{min-width:52px}
.tznav.transport .tzn.play svg{width:16px;height:16px;fill:currentColor}
.tznav.transport .tzn.side{min-width:46px}

/* ===== FUNKTIONAL v164: iPad-Hybrid + Transport-Politur ===== */
.tabletdefs{padding:8px 4px}
.tznav.transport .tzn{min-width:56px;font-variant-numeric:tabular-nums}

/* ===== v167/168: Tempo-Feinschritt-CTAs — wirklich dezent, dicht an der Leiste ===== */
.musicfoot .tstep{width:18px;height:20px;padding:0;border:0;background:none;box-shadow:none;font-size:14px;font-weight:600;color:var(--muted);line-height:1}
.musicfoot .tstep:hover{color:var(--ink);background:none}
.musicfoot .temposlider{margin:0}
.tzprow .tstep{min-width:22px;width:22px;flex:none;padding:0;border:0;background:none;box-shadow:none;font-size:15px;font-weight:600;color:var(--muted)}
.tzprow .tstep:active{color:var(--ink)}

/* ===== FUNKTIONAL v172: 3D (Beta) — eigener Editor-Tab, fuellt die ganze Kachel ===== */
.tabm.sheets .beta,.tab .beta{font-size:9px;font-weight:600;color:inherit;opacity:.85;vertical-align:super;margin-left:1px;white-space:nowrap}
.fieldwrap.v3d .floorbox{width:100cqw;height:100cqh;max-width:none;max-height:none;aspect-ratio:auto;box-sizing:border-box}   /* %-Hoehen kollabieren in der auto-Grid-Row — cq-Einheiten sind immer definit */
.fieldwrap.v3d svg#field{width:100%;height:100%}
.fieldwrap.v3d .frontarrow{display:none}
/* BAUSTELLEN-BADGE 3D (temporär, Axel) — beim finalen 3D einfach diesen Block + #dev3dBadge entfernen */
.dev3d{position:absolute;top:10px;left:12px;z-index:7;display:flex;flex-direction:column;gap:1px;padding:7px 12px;border:1px solid #c9a94f;border-radius:9px;background:color-mix(in srgb,#e3b341 12%,var(--panel));color:#8a6200;font-size:12.5px;font-weight:700;pointer-events:none}
.dev3d small{font-size:10.5px;font-weight:400;color:color-mix(in srgb,#8a6200 75%,var(--muted))}
.cam3d{position:absolute;right:44px;top:10px;z-index:5;display:flex;flex-direction:column;gap:5px;background:color-mix(in srgb,var(--card) 84%,transparent);border:1px solid var(--line);border-radius:10px;padding:8px 10px;backdrop-filter:blur(4px)}
.cam3d label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);justify-content:space-between}
.cam3d input[type=range]{width:104px;accent-color:var(--accent)}
.cam3d .c3btns{display:flex;gap:6px;justify-content:flex-end;margin-top:2px}
#floorbox:fullscreen{border-radius:0;padding:0}
#floorbox:fullscreen svg#field{width:100%;height:100%}

/* Mobil-Trainer: Absagen aus-/eintragen (Axel #30) */
.tzabtogwrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tzabtog{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:9px;padding:5px 10px;font-size:12.5px;cursor:pointer}
.tzabtog .anrole{font-size:9px;font-weight:700;color:var(--muted);font-family:var(--mono)}
.tzabtog.off{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent);text-decoration:line-through}
.tzabtog.off .anrole{color:var(--accent)}

/* Einklappbare Abschnitte in der Termine-Leiste (Axel: „dann wird die rechte Leiste nicht zu lang").
   Zustand steckt in .sect.zu; der Zaehler zeigt, wie viele Eintraege verborgen sind. */
.sect h4.fold{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.sect h4.fold .foldc{display:inline-block;font-size:10px;color:var(--muted);transition:transform .12s}
.sect h4.fold .foldn{margin-left:auto;font-weight:500;color:var(--muted);font-size:10px}
.sect.zu h4.fold .foldc{transform:rotate(-90deg)}
.sect.zu > *:not(h4){display:none}

/* Detaillierter Änderungs-Vergleich im Verlaufs-Dialog (Axel: „deutlich detaillierter", lesbar).
   Gruppen mit Anzahl, je Zeile links WAS und rechts der konkrete Unterschied; eigene Bewegung betont. */
.cdlade{margin-top:10px;color:var(--muted);font-size:12px}
.cdkopf{margin:12px 0 8px;font-size:12px;color:var(--muted)}
.cdet{max-height:52vh;overflow:auto;padding-right:4px}
.cdgrp{margin-bottom:12px}
.cdh{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.cdh .cdn{margin-left:auto;font-weight:600;color:var(--ink)}
.cdgrp.gut .cdh{color:var(--ok)}
.cdgrp.weg .cdh{color:var(--accent)}
.cdrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.cdrow:last-child{border-bottom:0}
.cdt{flex:1;min-width:170px;color:var(--ink)}
.cdv{color:var(--muted);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:7px}
.cdv b{color:var(--ink)}
.cdp{font-family:var(--mono);font-size:11px;color:var(--muted);opacity:.8}
.cdmein{flex:0 0 100%;margin:1px 0 2px;color:var(--accent);font-size:12px;font-family:var(--mono)}
.cdleer{color:var(--muted);font-size:12px;margin-top:10px}

/* Blaettern in der PDF-Vorschau (Axel: „keine CTAs zum Blaettern, Pfeiltasten gehen nicht").
   Schwebt unten mittig ueber der Seite, damit sie keine Breite kostet. */
.pdfpager{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:4px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:999px;padding:3px 5px;
  box-shadow:0 4px 16px rgba(0,0,0,.28);font-size:12px;color:var(--ink)}
.pdfpager button{border:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit;line-height:1;
  min-width:44px;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pdfpager button:hover:not(:disabled){background:var(--panel2)}
.pdfpager button:disabled{opacity:.35;cursor:default}
.pdfpager .pgn{min-width:74px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
/* Am Handy WEIT genug ueber den Home-Indicator (Axel: „da loest Apple Intelligence aus") — die untersten
   ~34 px gehoeren dem System, dort darf kein Bedienelement liegen. */
/* Am Handy scrollt die STAGE selbst (am Zeigergeraet dagegen das iframe innen). Ein absolut in der
   Stage positionierter Balken wandert dabei mit — er „zog nach" und war beim Blaettern ganz weg.
   Deshalb dort fest am Bildschirm, wie am PC auch: gleiche Stelle, immer sichtbar. */
@media (hover:none) and (pointer:coarse){
  .pdfpager{position:fixed;bottom:calc(58px + env(safe-area-inset-bottom,0px));gap:2px}
  .pdfpager button{min-width:52px;min-height:46px;font-size:15px}
}

/* Ausweg aus der Drehsperre (#83). Auf Faltgeraeten und in gekachelten Fenstern hilft Drehen nicht. */
.rotgo{margin-top:16px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  border-radius:9px;padding:9px 16px;font-size:13px;cursor:pointer;font-family:inherit}
.rotgo:hover{border-color:var(--accent);color:var(--accent)}

/* --- Termine: die Liste hat Vorrang, die Einstellungen rechts sind einklappbar (Axel) --- */
#b-plan{position:relative}
body.foldp #b-plan .side.right{display:none}
body.foldp #b-plan{padding-right:19px}

/* --- Tänzer-Vorschau bleibt auf Handybreite (Axel: „nicht breiter werden") ---
   Die Vorschau bildet die Handy-App nach; wird das Fenster schmaler, soll sie nicht mitwachsen,
   sondern ihre Breite behalten und mittig stehen. */
#tzWrap{max-width:430px;margin-left:auto;margin-right:auto}
@media (max-width:470px){#tzWrap{max-width:none}}

/* --- Teambereich: Zeilen brechen um, statt sich zu quetschen ---
   .mbname hatte eine feste 132-px-Spalte; darunter schoben sich Name, Mail und Chips ineinander. */


/* #84: Datenschutz-Hinweis am Anmelde-Schirm — dort, wo die Daten erhoben werden. */
.logindsg{margin-top:14px;font-size:11px;line-height:1.5;color:var(--muted);text-align:center}
.logindsg a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.logindsg a:hover{color:var(--accent)}
/* Häkchen „minderjährig" in der Mitgliederliste — dezent, aber dauerhaft sichtbar. */
.mbminor{flex:none;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:20px;
  padding:1px 7px;font-size:9.5px;font-weight:600;cursor:pointer;letter-spacing:.02em}
.mbminor.on{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));color:var(--ok)}
/* #108: Der Haken ist IMMER da und wird nur unsichtbar — visibility, NICHT display:none. Er behält
   damit seinen Platz, und der Knopf ist in beiden Zuständen gleich breit. Vorher war „U16 ✓" breiter
   als „U16", und alles rechts davon (Paarnummer, ×) stand je nach Zeile woanders. */
.mbminor .mbtick{visibility:hidden}
.mbminor.on .mbtick{visibility:visible}

/* #80: Reichweite des Verlaufs — er ist eine Ringliste, kein Archiv. */
.histfoot{margin-top:12px;padding-top:9px;border-top:1px solid var(--line);font-size:10.5px;line-height:1.5;color:var(--muted)}

/* Rechte Leiste im Termine-Bereich: die unteren Punkte (Orte, Arten) waren ohne Einklappen nicht
   erreichbar — sie hatte keinen eigenen Rollbereich (Axel). */
#b-plan .side.right{overflow-y:auto;overscroll-behavior:contain}
/* Online-Ort: Beitritts-Link statt Route. */
.tzcall{color:var(--accent)}

/* Feiertag am Termin: dezenter Marker neben dem Datum, Name im Tooltip. */
.trfeier{margin-left:4px;color:var(--accent);font-size:11px;font-weight:700;cursor:help}

/* Regel für kurzfristige Absagen — jetzt in der Auswertung, dort wo die Zahl entsteht. */
/* Eine Zeile, nicht drei: die Auswahlfelder sind so breit wie ihr Inhalt (Axel: „nebeneinander und leaner"). */
.ausregel{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);
  padding:0 0 9px;margin:0 0 9px;border-bottom:1px solid var(--line)}
.ausregel b{color:var(--ink);font-weight:600}
.ausregel select{width:auto;flex:none;background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  color:var(--ink);font:inherit;padding:2px 4px}

/* ============================================================================
   EIGENE AUSWAHL- UND UHRZEITFELDER (statt der Systemliste)
   ============================================================================
   Das native <select>/<input type=time> bleibt als Datenträger stehen (.nativehidden) — davor sitzt
   dieser Knopf. Er übernimmt die Klassen des Originals (.fin usw.), damit er an jeder Stelle so
   aussieht wie das Feld dort aussehen soll; die Regeln hier sind nur der Grundstock. */
.nativehidden{display:none!important}
.pickfield{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:6px 26px 6px 8px;color:var(--ink);font-size:12.5px;font-family:var(--sans);cursor:pointer;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center}
.pickfield:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.pickfield:disabled{opacity:.5;cursor:default}
.pickfield.empty{color:var(--muted)}
/* Im Dialog dieselben Maße wie die übrigen Eingabefelder (.dlg-form input). */
.dlg-form .pickfield{width:100%;padding:8px 28px 8px 11px;font-size:13.5px;border-radius:8px}
/* In der Saison-Zeile stehen Kalender- und Auswahlfeld direkt untereinander — der Kalender-Knopf ist
   auf Dialog-Maß gebaut und wäre dort einen Tick höher. Auf Seitenleisten-Maß bringen. */
.seasonrow .dpfield{padding:6px 8px;font-size:12.5px;border-radius:7px}
.pickpop{position:fixed;z-index:130;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);padding:6px;max-width:min(340px,92vw)}
.pickpop[hidden]{display:none}
.pksuche{padding:2px 2px 6px}
.pksuche input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:6px 9px;color:var(--ink);font-size:12.5px;font-family:var(--sans)}
.pksuche input:focus{outline:none;border-color:var(--accent)}
.pklist{max-height:min(300px,52vh);overflow:auto;display:flex;flex-direction:column;gap:1px}
/* ⚠️ `flex:none` IST DIE EIGENTLICHE URSACHE, nicht die Zeilenhöhe. .pklist ist ein Spalten-Flex mit
   max-height — bei 16 Bundesländern passen die Einträge nicht hinein, und flex-shrink (Vorgabe 1)
   staucht dann JEDEN Eintrag unter seine Inhaltshöhe. Mit overflow:hidden sah das aus, als würden die
   Zeilen ineinanderlaufen. Genau derselbe Fehler wie seinerzeit bei .trselb. Die line-height bleibt,
   sie ist für sich richtig. */
.pko{flex:none;border:0;background:transparent;color:var(--ink);text-align:left;padding:7px 10px;border-radius:7px;
  font-size:13px;line-height:1.45;font-family:var(--sans);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pko:hover{background:var(--panel2)}
.pko.sel{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:600}
.pkleer{padding:10px;font-size:12px;color:var(--muted);text-align:center}
/* Uhrzeit: zwei Spalten, Std und Min — die Minuten in 5er-Schritten. */
.pkzeit{display:flex;gap:6px}
.pkcol{display:flex;flex-direction:column;gap:1px;max-height:min(280px,50vh);overflow:auto;min-width:62px}
.pkch{position:sticky;top:0;background:var(--panel);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding:3px 0 4px;font-weight:600}
.pkd{flex:none;border:0;background:transparent;color:var(--ink);border-radius:7px;padding:7px 12px;font-size:13px;line-height:1.45;
  cursor:pointer;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.pkd:hover{background:var(--panel2)}
.pkd.sel{background:var(--accent);color:#fff;font-weight:700}
/* Auf dem Tablet in der Halle greifen die Finger — dieselbe Regel wie für die übrigen Knöpfe (#91). */
body.halle .pickfield{padding-top:10px;padding-bottom:10px}
body.halle .pko,body.halle .pkd{padding-top:11px;padding-bottom:11px}

/* Termin in einer Pause mit freien Trainings: sichtbar, aber herabgesetzt (Axel „leicht ausgegraut").
   Bewusst schwächer als .past (.5) — vergangen ist endgültig, frei ist nur nicht der Regelbetrieb. */
.trrow.freizeit{opacity:.72}
.trrow.freizeit:hover{opacity:1}

/* Feiertagsname in der Unterzeile. Spalte 1 ist mit 104 px fest zu eng für „Fronleichnam"; .trsub hat
   die volle Breite und erscheint ohnehin nur, wenn es etwas zu sagen gibt. */
.trfeiname{color:var(--accent);font-weight:600}
.trfeiart{color:var(--muted)}
.trfeiart::before{content:" · "}

/* Hinweis auf die Einträge aus der früheren Ferien-Übernahme — dezent, aber mit CTA. */
.brkalt{border-top:1px solid var(--line);padding-top:8px}

/* Betroffene Termine beim Anlegen einer Trainingspause — eine Zeile je Termin, Spalten bündig. */
.pauselist{margin-top:9px;max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:9px}
.pauserow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:5px 10px;
  font-size:11.5px;border-bottom:1px solid var(--line2)}
.pauserow:last-child{border-bottom:0}
.pausedat{color:var(--ink)}
.pausezeit,.pauseart{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================================
   #91 — iPad IN DER HALLE  (body.halle)
   ============================================================================
   Der Haken wird in app.js vor wire() gesetzt und ist PER KONSTRUKTION nur auf einem Staff-Tablet
   erreichbar (Handy faengt die Weiche vorher ab, Desktop faellt in den else-Zweig, Taenzer:innen in
   ihre eigenen Zweige). Alles hier ist damit strukturell unsichtbar fuer Handy und Desktop — es
   braucht keine Breiten-Media-Query und keine Sorgfalt.

   Zwei Dinge, in dieser Reihenfolge:
   A) Weissraum kuerzen (~34 px Hoehe, null Bedienbarkeitskosten) —
   B) und dieses Budget an die Finger zurueckgeben. Heute erfuellt KEIN Blaetter- oder Anzeige-Knopf
      die 40 px: Blaetter-Pfeil 34x30, Anzeige-Icon 32x32, Player-Knopf 27x27, Klapp-Griff 19x64.
      In der Halle steht der Trainer, haelt das iPad und blaettert — das ist DER Knopf.
   Das Muster gibt es schon (@media (hover:none) and (pointer:coarse) fuer .pdfpager, s. o.); hier
   nur auf die Halle begrenzt statt global, damit der Desktop unberuehrt bleibt.
   Netto bleibt das Feld dabei nicht kleiner, sondern minimal groesser. */

/* --- A) Kompaktstufe --------------------------------------------------------------------- */
body.halle #b-editor{padding:6px;gap:6px}
/* Die Kurzform oben wuerde body.foldl/.foldr #b-editor{padding-*:19px} (gleiche Spezifitaet, frueher
   im Blatt) mit ueberschreiben — dann laege der Klapp-Griff auf dem Inhalt. 28 px statt 19, weil der
   Griff in der Halle 28 px breit ist. */
body.halle.foldl #b-editor{padding-left:28px}
body.halle.foldr #b-editor{padding-right:28px}
body.halle .edmain{gap:6px}
body.halle .edtop{gap:6px}
body.halle .cbody{padding:6px 10px 4px;gap:6px}
/* Die Musikleiste behaelt ihre 120 px (die Wellenform ist in der Halle das Musikwerkzeug — sie zu
   stauchen waere ein schlechter Handel); nur ihr Innenpolster wird schmaler. Das schafft genau den
   Platz, den die groesseren Transport-Knoepfe unten brauchen. */
body.halle .playerbar{padding:6px 12px;gap:12px}

/* --- B) Trefferflaechen ------------------------------------------------------------------ */
/* Blaettern: der wichtigste Knopf ueberhaupt. */
body.halle .nav .arw{width:56px;height:48px}
body.halle .nav{gap:20px}
/* Anzeige-Spalte am Feld (Uebergaenge/Distanzen/Animation). Die Gasse muss mitwachsen, sonst ragen
   die groesseren Icons ins Feld: .iconcol haengt an der floorbox (right:-38 → -50 bei 44 px Breite),
   und .fieldwrap braucht entsprechend 52 statt 40 px Polster. Kostet 24 px BREITE — auf dem iPad ist
   die Breite nie der Engpass, sobald die Bilderliste zu ist. */
body.halle .vtg{width:44px;height:44px}
body.halle .iconcol{right:-50px}
body.halle .fieldwrap{padding:0 52px 0}
body.halle .vtg::after{right:45px}
/* Player: Play/Pause, ±5 s, Mute/Stopp. */
body.halle .pp{width:40px;height:40px}
body.halle .pb-transport .pp.big{width:48px;height:48px}
body.halle .pp.wide{height:40px;border-radius:20px;padding:0 13px}
/* Klapp-Griffe: 19 px Breite trifft man im Stehen nicht. Die Positions-Rechnung ist
   Seitenpolster + Leistenbreite − halbe Griffbreite, also muss sie beide Aenderungen nachziehen.
   :not(.foldl)/:not(.foldr) laesst die eingeklappte Lage (left/right:2px) unangetastet. */
body.halle .sidefold{width:28px;height:88px}
body.halle:not(.foldl) #b-editor .sidefold.l{left:calc(6px + 308px - 14px)}
body.halle:not(.foldr) #b-editor .sidefold.r{right:calc(6px + 318px - 14px)}
body.halle:not(.foldp) #b-plan .sidefold.r{right:calc(11px + 318px - 14px)}
/* Sichtbarkeit: die Griffe erscheinen sonst erst unter 1280 bzw. 1080 px. Am 12,9-Zoll-iPad (1366 px
   quer) klappt die Bilderliste zwar von allein zu, aber wer sie AUFklappt, haette danach keinen Griff
   mehr, um sie wieder zu schliessen. In der Halle sind beide Griffe deshalb immer da. */
body.halle #b-editor.on .sidefold.l,body.halle #b-editor.on .sidefold.r{display:flex}
/* AUSSER in den Definitionen (Axel): dort hat die Bilderliste nichts zu suchen, Bilder gehoeren zum
   Bilderplan. Der linke Griff verschwindet, die Leiste bleibt zu — die rechte bleibt bedienbar.
   Gilt nur am Tablet (body.halle); am PC liegt ohnehin alles in einer Uebersicht. */
body.halle.halle-nolist #b-editor.on .sidefold.l{display:none}
/* Haupt-Tabs (in dieser Ansicht: Bilderplan · Definitionen · 3D · Termine · Info) und die Tanz-Zeilen
   in der rechten Leiste — beides wird in der Halle angetippt, nicht angeklickt. */
/* Gemessen statt geschaetzt: .tab ist in DIESER Ansicht schon 82x37 (nicht 65x27 wie am Desktop) —
   der Plan hatte ohne app.js gemessen. 10 px Polster haetten die Kopfzeile um 10 px wachsen lassen und
   damit zwei Drittel des Hoehengewinns wieder aufgefressen; 8 px bringen die Tabs auf 41 px fuer 4 px. */
body.halle .tab{padding:8px 14px}
body.halle .drow{padding:9px 6px;font-size:13px}

/* Erklärzeile unter einem Schalter-Namen (bisher gab es nur den nackten Namen). */
.swrow .swhint{display:block;font-size:10.5px;color:var(--muted);font-weight:400;margin-top:1px;line-height:1.3}

/* Sichtbare Fassung ganz unten auf der App-Startseite — beantwortet „habe ich den neuen Stand?" ohne Werkzeug. */

/* Sicherungen im Vergleichszeitraum einer Freigabe — beantwortet „wann wurde das gemacht?". */
.cdsich{margin:-2px 0 10px;font-size:11.5px;color:var(--muted);line-height:1.7}
.cdsich b{color:var(--ink);font-weight:600}
.cdsi{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:1px 8px;margin:0 0 0 6px;font-family:var(--mono);font-size:11px;white-space:nowrap}

/* ============================================================================
   #91 — ROBUSTER QUERMODUS FÜR DIE HALLE  (body.halle, nur quer)
   ============================================================================
   Axel: „iPad quer soll rein." Quer ist die HÖHE der Engpass, nicht die Breite — das zweite
   Einklappen der Leisten bringt exakt null Pixel. Höhe lässt sich quer nicht dazugewinnen, nur
   zurückgeben, und dafür gibt es genau zwei große Posten:

     1. Die Blätter-Zeile unter dem Feld (~58 px inkl. Abstand) — sie wandert in die LINKE GASSE.
        Dort ist Platz, der ohnehin leersteht, und die Knöpfe werden dabei nicht kleiner.
     2. Die Musikleiste (120 px fest) — auf 72 px. Axel ausdrücklich: „die hohe Wellenform erlangen
        wir ja durch das Scrolling in der Musik." Der Transport rückt dafür in EINE Reihe statt zwei.

   Zusammen rund 106 px, die direkt ins Quadrat gehen. Alles nur unter body.halle und nur quer —
   Handy, Desktop und das Hochformat bleiben unberührt. */
@media (orientation:landscape){
  /* --- 1) Blättern in die linke Gasse --- */
  body.halle .cbody{position:relative}
  body.halle #fieldFoot{padding:0;min-height:0}          /* nur noch Platzhalter für die Warnzeile */
  body.halle #fieldFoot .nav{position:absolute;left:2px;top:50%;transform:translateY(-50%);
    flex-direction:column;gap:12px;z-index:4}
  body.halle #fieldFoot .nav .pos{min-width:0;font-size:11.5px}
  /* Linke Gasse breiter, damit die Pfeile hineinpassen; rechts bleibt es bei der Icon-Spalte.
     Der „vorne"-Pfeil sitzt unten, die Blätter-Spalte mittig — sie kommen sich nicht ins Gehege. */
  body.halle .fieldwrap{padding:0 52px 0 74px}
  /* --- 2) Musikleiste flach, Transport einreihig --- */
  body.halle .edmain>#editorPlayerSlot{height:72px}
  body.halle .playerbar{padding:5px 12px;gap:12px}
  body.halle .pb-wave{gap:3px}
  body.halle .waveov{height:24px}
  body.halle .cdance{height:11px}
  body.halle .musicfoot{margin-top:0;font-size:10px}
  body.halle .musicfoot .temposlider{height:17px}
  body.halle .pb-transport{flex-direction:row;gap:10px}
  body.halle .pb-transport .pb-row.sub{gap:10px}
  body.halle .pb-tempo{gap:5px}
  body.halle .pb-tempo .dtlbtn{padding:6px 10px;font-size:11.5px}
}

/* Notiz bearbeiten (Axel: „die Bearbeitungsfunktion bestehender Notizen — falls nicht, bitte bauen"). */
.nrow .nedt{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:0 3px;line-height:1}
.nrow .nedt:hover{color:var(--accent)}
.nrow.editing{background:var(--panel2);border-radius:8px;padding:5px 7px}
.nrow .nein{width:100%;background:var(--panel);border:1px solid var(--accent);border-radius:7px;padding:6px 8px;
  color:var(--ink);font:inherit;font-size:12px;line-height:1.4;resize:vertical;min-height:52px}
.nrow .nein:focus{outline:none}
.neditbtn{display:flex;gap:6px;margin-top:5px}
.nmeta .nedit{margin-left:5px;font-style:italic;opacity:.8}
/* Anspringbare Glocken-Zeilen: Erwähnung → zum Bild, neue Anmeldung → in den Team-Bereich.
   Ohne Zeigerhand und Überfahren sieht so eine Zeile aus wie Text und wird nie angetippt — genau
   das war bei den Anmeldungen der Fall, obwohl der Sprung längst funktionierte (Axel, 28.07.). */
.bellrow.go{cursor:pointer}
.bellrow.go:hover{background:var(--panel2)}
.bellgo{margin-left:auto;color:var(--muted);font-size:13px}

/* #69: Adress-Konflikt — zwei Choreografien beanspruchen dieselbe Tänzer-Adresse. */
.fghostwarn{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));background:var(--warn-bg);
  color:var(--ink);font-size:12px;line-height:1.5;padding:10px 13px;margin-bottom:10px}
.fghostwarn code{font-family:var(--mono);font-size:11.5px}

/* #131: Anheftung zeigt auf eine fuer Taenzer:innen verborgene Liste — sie wird ihnen NICHT
   angezeigt. Ruhige Markierung, keine Meldung: der Zustand ist selten und selbst behebbar. */
.pinwarn{color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:5px;padding:0 5px;font-weight:600}
.tzpinwarn{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}