:root { --line:#ccc; --bg:#f7f7f8; --accent:#3a5; --muted:#888; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, Helvetica, Arial, sans-serif;
       font-size:14px; color:#1a1a1a; background:var(--bg); }
.topbar { display:flex; align-items:center; gap:1.2rem; padding:.6rem 1rem;
          background:#222; color:#fff; position:sticky; top:0; z-index:10; }
.topbar .brand { font-weight:700; }
.topbar nav { display:flex; gap:.9rem; flex:1; }
/* iPad/schmal: Topbar + Nav umbrechen statt überlaufen (Nav in eigene Zeile) */
@media (max-width: 820px) {
  .topbar { flex-wrap:wrap; gap:.5rem .9rem; }
  .topbar nav { flex-wrap:wrap; gap:.4rem .9rem; flex-basis:100%; order:5; }
}
.topbar nav a { color:#ddd; text-decoration:none; }
.topbar nav a:hover { color:#fff; text-decoration:underline; }
/* Übersichten-Dropdown (CSS-Hover, mit seitlichem Flyout für Bühnenbilder) */
.topbar nav .navdrop, .topbar nav .navdrop-sub { position:relative; }
.navdrop-menu, .navdrop-submenu { display:none; position:absolute; z-index:30;
  flex-direction:column; min-width:12rem; padding:.3rem 0;
  background:#2a2a2a; border:1px solid #555; border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.35); }
.navdrop-menu { top:100%; left:0; }
.navdrop-submenu { top:-.3rem; left:100%; }
.navdrop:hover > .navdrop-menu,
.navdrop-sub:hover > .navdrop-submenu,
/* Touch/Klick: per JS getoggelt (iPad hat kein :hover) */
.navdrop.open > .navdrop-menu,
.navdrop-sub.open > .navdrop-submenu { display:flex; }
.navdrop-label, .navdrop-sub-label { cursor:pointer; }
.navdrop-menu a, .navdrop-submenu a { display:flex; justify-content:space-between;
  padding:.4rem .8rem; color:#ddd; white-space:nowrap; }
.navdrop-menu a:hover, .navdrop-submenu a:hover { background:#3b3b3b; color:#fff;
  text-decoration:none; }
.navdrop-sub > .navdrop-sub-label::after { content:""; }  /* ▸ steht schon im Text */
.topbar .prod { color:#9cf; font-size:.85rem; }
.topbar .muted { color:var(--muted); }
p.muted, span.muted, .archive .muted { color:var(--muted); }
/* Produktions-/Version-Marker im Archiv-Switcher (Text, keine kryptischen Symbole) */
.tag { display:inline-block; border-radius:999px; padding:.05rem .5rem; font-size:.72rem;
       font-weight:700; vertical-align:middle; border:1px solid var(--line); }
.tag-current { background:var(--accent); color:#fff; border-color:var(--accent); }
.tag-gm { background:#f4e9c9; color:#7a5b00; border-color:#e0cf9a; }
.topbar .user { color:#cde; font-size:.85rem; }
.topbar .user small { color:#9ab; }
.topbar .logout { background:#444; color:#eee; border:1px solid #666; border-radius:5px;
                  font-size:.8rem; padding:.2rem .5rem; cursor:pointer; }
.topbar .logout:hover { background:#555; }
/* Planungs-/Showmodus-Schalter in der Topbar (Segmented control) */
.topbar .modeswitch { display:inline-flex; align-items:stretch; border-radius:7px;
                      overflow:hidden; border:1px solid rgba(255,255,255,.28); }
.topbar .modeswitch .seg { font-size:.8rem; font-weight:700; line-height:1.5; white-space:nowrap;
                           padding:.2rem .7rem; border:0; background:transparent; color:#9fb0c0;
                           font-family:inherit; }
.topbar .modeswitch button.seg { cursor:pointer; }
.topbar .modeswitch button.seg:hover { background:rgba(255,255,255,.14); color:#fff; }
.topbar .modeswitch .seg.active { cursor:default; }
.topbar .modeswitch .seg.active.planung { background:#2f6fb0; color:#fff; }   /* Planung = klares Blau */
.topbar .modeswitch .seg.active.show { background:#c0392b; color:#fff; }      /* Show = klares Rot */
/* Lock-/Drift-Banner über dem Seiteninhalt */
.lockbanner { display:flex; align-items:center; justify-content:space-between; gap:1rem;
              padding:.55rem .9rem; border-radius:6px; margin:0 0 1rem; font-size:.9rem; }
.lockbanner.locked { background:#f4e7e7; border:1px solid #d9b0b0; color:#7a2b2b; }
.lockbanner.unlocked { background:#fff3d6; border:1px solid #e6c877; color:#8a5a00; }
.lockbanner button { flex:none; border-radius:5px; border:1px solid currentColor;
                     background:#fff; color:inherit; font-size:.82rem; padding:.25rem .7rem; cursor:pointer; }
.lockbanner button:hover { background:rgba(0,0,0,.05); }
.login-box { max-width:340px; margin:8vh auto; background:#fff; border:1px solid var(--line);
             border-radius:10px; padding:1.5rem 1.8rem; }
.login-box h1 { font-size:1.2rem; margin:.2rem 0 1rem; }
.login-box label { display:block; font-size:.8rem; color:#555; margin-bottom:.7rem; }
.login-box input { display:block; width:100%; border:1px solid var(--line); border-radius:5px;
                   padding:.4rem .5rem; margin-top:.2rem; }
.login-box button { width:100%; margin-top:.5rem; padding:.5rem; }
/* SSO-Button (Mit IServ anmelden) */
.login-or { text-align:center; color:#9aa; font-size:.72rem; letter-spacing:.05em;
            text-transform:uppercase; margin:1rem 0 .7rem; }
.login-or::before, .login-or::after { content:""; display:inline-block; width:28%;
            height:1px; background:var(--line); vertical-align:middle; margin:0 .5rem; }
.login-sso { display:flex; align-items:center; justify-content:center; gap:.55rem;
            width:100%; box-sizing:border-box; padding:.5rem; text-decoration:none;
            background:#fff; color:#2a2a2a; border:1px solid var(--line);
            border-radius:5px; font-size:.9rem; font-weight:600; transition:background .12s; }
.login-sso:hover { background:#f4f7fb; border-color:#b9cae0; }
.login-sso img { height:20px; width:auto; display:block; border-radius:3px; }
main { padding:1.2rem 1.4rem; }
h1 { font-size:1.3rem; margin:.2rem 0 1rem; }
h2 { font-size:1.05rem; margin:1.2rem 0 .5rem; }
.hint { background:#fff8d8; border:1px solid #e8d98a; padding:.6rem .9rem;
        border-radius:6px; }
.messages { list-style:none; padding:0; margin:0 0 1rem; }
.messages .msg { padding:.5rem .8rem; border-radius:6px; margin-bottom:.4rem; }
.messages .success { background:#e8f6ec; border:1px solid #9ad3ab; color:#246b3a; }
.messages .error { background:#fdecec; border:1px solid #e0a0a0; color:#a12020; }
code { background:#eee; padding:.05rem .3rem; border-radius:3px; }
.exportbar { font-size:.85rem; color:#666; margin:.2rem 0 .6rem; }
.exportbar a { display:inline-block; border:1px solid var(--line); border-radius:5px;
               padding:.1rem .5rem; text-decoration:none; color:#345; background:#fff; }
.exportbar a:hover { background:#eef4ff; }
.exportbar .impsep { color:#bbb; margin:0 .3rem; }
.exportbar .impform { display:inline; }
.exportbar .impform label { color:#666; }
.exportbar .impform input[type=file] { font-size:.8rem; width:auto; }

table.data { border-collapse:collapse; background:#fff; width:100%; }
table.data th, table.data td { border:1px solid var(--line); padding:.3rem .5rem;
                               text-align:left; }
table.data th { background:#efefef; position:sticky; top:48px; }
table.data tr:hover td { background:#fafff5; }
input, select, button { font:inherit; padding:.25rem .4rem; }
input[type=text]{ width:100%; border:1px solid transparent; background:transparent; }
input[type=text]:hover, input[type=text]:focus { border-color:var(--line); background:#fff; }
button { cursor:pointer; border:1px solid var(--line); background:#fff; border-radius:5px; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.del { color:#c00; border:none; background:none; }
.row-add td { background:#f0f8f0; }

/* Songübersicht */
table.songtable td.auto { background:#f4f4f4; color:#333; white-space:nowrap; }
table.songtable td.auto.num { text-align:right; width:1%; }
table.songtable .col-narrow { width:6em; }
table.songtable .col-tempo { width:9em; }

/* Bühnenbilder (Facetten-Seiten) */
table.bbtable td.auto { background:#f4f4f4; color:#333; white-space:nowrap; }
table.bbtable td.titlecol { white-space:normal; max-width:15em; width:15em; }
table.bbtable .col-narrow { width:5em; }
.bbcell { white-space:normal; }
.bbchip { display:inline-flex; align-items:center; gap:.15rem; background:#e6eefc;
          border:1px solid #b9cdf2; border-radius:999px; padding:.05rem .15rem .05rem .55rem;
          margin:.1rem .25rem .1rem 0; font-size:.85rem; }
.bbchip .chipx { border:none; background:none; color:#456; cursor:pointer; padding:0 .25rem;
                 font-size:1rem; line-height:1; }
.bbchip .chipx:hover { color:#c00; }
select.bbadd { font-size:.82rem; color:#666; border:1px dashed var(--line); background:transparent; }

/* Schauplatz-Panels (Design-Arbeitsfläche je Gewerk) */
.bbpanels { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; }
.bbpanel { flex:1 1 28rem; max-width:38rem; background:#fff; border:1px solid var(--line);
           border-radius:8px; padding:.7rem .9rem 1rem; }
.bbpanel-head { display:flex; align-items:center; gap:.5rem; }
.bbpanel-head .bbnr { background:#222; color:#fff; border-radius:5px; font-size:.8rem;
                      padding:.05rem .45rem; }
.bbpanel-head .bbname { font-weight:700; font-size:1rem; border:1px solid transparent;
                        background:transparent; flex:0 1 14em; }
.bbpanel-head .bbname:hover, .bbpanel-head .bbname:focus { border-color:var(--line); background:#fff; }
.bbpanel-head .bbused { flex:1; font-size:.8rem; }
.bblabel { display:block; font-size:.75rem; color:#777; margin:.6rem 0 .15rem; text-transform:uppercase;
           letter-spacing:.03em; }
.bbdesign { width:100%; border:1px solid var(--line); border-radius:6px; resize:vertical;
            font:inherit; padding:.4rem .5rem; }
table.bbelements { width:100%; }
table.bbelements td { border:1px solid #e5e5e5; padding:.15rem .35rem; }
table.bbelements td.elnr { width:1.8em; text-align:right; color:#999; }
table.bbelements td.elstatus { width:8em; }
table.bbelements select { width:100%; border:1px solid var(--line); border-radius:5px; }
.status-vorhanden { background:#e8f6ec; }
.status-im_bau { background:#fff6da; }
.status-offen { background:#fdecec; }
.bbuploads { margin-top:.7rem; font-size:.82rem; border-top:1px dashed var(--line); padding-top:.5rem; }
.bbsummary { display:flex; gap:.5rem; align-items:center; margin:.2rem 0 .7rem; }
.bbsummary .badge { border-radius:999px; padding:.12rem .65rem; font-size:.85rem; border:1px solid var(--line); }
/* kompakt: nur so breit wie der Inhalt, nicht über die ganze Seite */
table.bbgesamt { width:auto; }
table.bbgesamt th, table.bbgesamt td { white-space:nowrap; }
table.bbgesamt td.elnr, table.bbgesamt th.elnr { width:2.2em; text-align:right; color:#999; }
table.bbgesamt td.elstatus, table.bbgesamt th.elstatus { width:8em; }
table.bbgesamt select { width:100%; border:1px solid var(--line); border-radius:5px; }
table.lpresets td.elnr, table.lpresets th.elnr { width:4.5em; color:#888; white-space:nowrap; }
table.lpresets td.elstatus, table.lpresets th.elstatus { width:8em; }
table.lpresets select { width:100%; border:1px solid var(--line); border-radius:5px; }

/* Sammelseite Bühnenbilder (Übersicht, read-only) */
.bbovercard { background:#fff; border:1px solid var(--line); border-radius:8px;
              margin:.8rem 0; padding:.6rem .9rem .9rem; }
.bbovercard-head { display:flex; align-items:center; gap:.5rem; border-bottom:1px solid var(--line);
                   padding-bottom:.4rem; margin-bottom:.6rem; }
.bbovercard-head .bbnr { background:#222; color:#fff; border-radius:5px; font-size:.8rem; padding:.05rem .45rem; }
.bbovercard-head .bbovername { font-weight:700; font-size:1.05rem; }
.bbovercard-head .bbovercard-sum { margin-left:auto; display:flex; gap:.25rem; }
.bbovercard-sum .badge { border-radius:999px; padding:.05rem .5rem; font-size:.8rem; border:1px solid var(--line); }
.bbovercols { display:flex; gap:1rem; flex-wrap:wrap; }
.bbovercol { flex:1 1 16rem; min-width:14rem; }
.bbovercol h4 { margin:.1rem 0 .3rem; font-size:.95rem; color:#345; }
.bboverdesign { margin:.2rem 0 .5rem; white-space:normal; }
ul.ellist { list-style:none; margin:0; padding:0; }
ul.ellist li { display:flex; justify-content:space-between; gap:.5rem; padding:.15rem .4rem;
               border-radius:4px; margin-bottom:.15rem; font-size:.9rem; }
ul.ellist li .elstat { font-size:.78rem; color:#555; }

/* SFX / Einspieler */
.sfxcard { background:#fff; border:1px solid var(--line); border-radius:8px;
           margin:.7rem 0; padding:.5rem .8rem .8rem; }
.sfxhead { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.sfxhead .bbnr { background:#222; color:#fff; border-radius:5px; font-size:.8rem; padding:.05rem .45rem; }
.sfxhead .sfxdesc { flex:1 1 16em; min-width:10em; font-weight:600;
                    border:1px solid transparent; background:transparent; }
.sfxhead .sfxdesc:hover, .sfxhead .sfxdesc:focus { border-color:var(--line); background:#fff; }
.sfxhead select, .sfxhead .sfxlen { border:1px solid var(--line); border-radius:5px; }
.sfxhead .sfxlen { width:6em; }
.sfxhead .sfxart { background:#eef4ff; }
.sfxbody { margin-top:.5rem; }
.sfxbody .bbcell { white-space:normal; }
.sfxscenes { margin-top:.3rem; font-size:.85rem; }
table.sfxusage { width:100%; }
table.sfxusage .col-narrow { width:5em; }
table.sfxusage .col-scene { width:11em; }
table.sfxusage .col-scene select { width:100%; }
h2 { margin-top:1.4rem; }
.addcol { display:flex; gap:.4rem; align-items:center; margin:.2rem 0 .8rem; }
.addcol input { border:1px solid var(--line); border-radius:5px; width:16em; }
table.songtable th.customcol { background:#eef4ff; }
table.songtable th.customcol { white-space:nowrap; }
th.customcol .colname { width:8em; border:1px solid transparent; background:transparent;
                        font-weight:700; }
th.customcol .colname:hover, th.customcol .colname:focus { border-color:var(--line);
                        background:#fff; }
th.customcol .del { margin-left:.2rem; }

/* Szenenübersicht (Screen 3) — Breiten richten sich am Inhalt aus:
   schmale Spalten schrumpfen (width:1% + nowrap), Titel + Bemerkungen wachsen. */
table.skeleton { table-layout:auto; }
table.skeleton .col-akt,
table.skeleton .col-page,
table.skeleton .col-bbstat,
table.skeleton .col-titel,
table.skeleton .col-rowbtns { width:1%; white-space:nowrap; }
table.skeleton .col-rowbtns { text-align:center; }
/* nur Bemerkungen wächst -> Titel bleibt so breit wie sein Inhalt */
table.skeleton .col-notes { width:auto; }
table.skeleton .col-akt  input  { width:3em; }
table.skeleton .col-page input  { width:4em; }
/* Bühnenbild-Status (read-only Symbole) */
table.skeleton .col-bbstat { text-align:center; }
td.bbstat { text-align:center; font-size:1.1rem; line-height:1; }
.bbstat-fertig { color:#2a8a43; }
.bbstat-arbeit { color:#c08a00; }
.bbstat-offen  { color:#c23030; }
.bbstat-none   { color:#bbb; }
.bbstat-legend { white-space:nowrap; }
.bbstat-legend .bbstat { font-size:1rem; }
table.skeleton .col-notes input { width:100%; min-width:12em; }
/* Felder hängen eng zusammen und passen sich an ihren Inhalt an (size-Attribut).
   width:auto hebt das globale input{width:100%} auf; die Nummer folgt direkt dem
   unterschiedlich langen Wort Szene/Lied -> Lied- und Szenennummer bleiben versetzt. */
.titlecell { display:flex; align-items:center; gap:.3rem; }
.titlecell .num-input  { flex:0 0 auto; width:auto; min-width:1.6em; text-align:center;
                         padding-left:.2rem; padding-right:.2rem; }
.titlecell .name-input { flex:0 0 auto; width:auto; min-width:8em; max-width:34em; }
.titlecell .name-input.song { font-style:italic; }
/* Typ-Auswahl: editierbar = kursiver, klickbarer Text; gesperrt = normaler Text */
.typetoggle { flex:0 0 auto; font-style:italic; color:#666; background:none;
              border:none; padding:0; cursor:pointer; }
.typetoggle:hover { color:#244a9c; text-decoration:underline; }
.typetext { flex:0 0 auto; color:#333; }
/* bei Seitenschutz: graue Platzhalter ausblenden (ruhigere, lesbare Ansicht) */
.locked-area.locked ::placeholder { color:transparent; }
button.rowins { color:var(--accent); border:none; background:none; font-weight:700;
                padding:.15rem .3rem; }
button.rowins:hover { filter:brightness(.85); }
.htmx-indicator{ opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator{ opacity:1; }

/* Präsenz-Matrix */
table.matrix { border-collapse:collapse; background:#fff; font-size:12px; }
table.matrix th, table.matrix td { border:1px solid var(--line); padding:2px 5px;
                                   text-align:center; }
table.matrix th.role { text-align:left; white-space:nowrap; }
table.matrix td.on { background:var(--accent); color:#fff; cursor:pointer; font-weight:700; }
table.matrix td.off { background:#fff; cursor:pointer; color:#ccc; }
table.matrix td.off:hover { background:#eef; }
table.matrix td.on:hover { background:#284; }
/* Rollen-Präsenzzelle: zwei kombinierbare Klickzonen — T=Text (grün), ♪=Gesang (gelb). */
table.matrix td.pcell { padding:0; }
table.matrix td.pcell .pz { display:inline-block; border:0; background:#fff; color:#ccc;
    cursor:pointer; font-size:11px; font-weight:700; padding:2px 4px; line-height:1.25; }
table.matrix td.pcell .pz-t { border-right:1px solid var(--line); }
table.matrix td.pcell .pz:hover { background:#eef; color:#7788bb; }
table.matrix td.pcell .pz-t.act { background:#2a8a4a; color:#fff; }
table.matrix td.pcell .pz-g.act { background:#e0a800; color:#fff; }
table.matrix td.pcell .pz-t.act:hover { background:#237a40; }
table.matrix td.pcell .pz-g.act:hover { background:#c99500; }
/* Legenden-Chips im Intro (gleiche Farben wie die Zonen) */
.pz-legend { display:inline-block; padding:0 .35rem; border-radius:3px; font-weight:700; }
.pz-legend.pz-t.act { background:#2a8a4a; color:#fff; }
.pz-legend.pz-g.act { background:#e0a800; color:#fff; }
/* Offstage-Ensemble-Spalten (⊘): abgesetzt von den Rollen-Spalten */
table.matrix th.enscol { background:#fff3cd; }
table.matrix .enscol { border-left:2px solid #e0a800; }
table.matrix td.enscol.on { background:#e0a800; color:#fff; cursor:pointer; font-weight:700; }
table.matrix td.enscol.off { background:#fffaf0; cursor:pointer; color:#ccc; }
table.matrix td.enscol.off:hover { background:#ffeccc; }
/* iPad: erste Spalte (Szenen-Zeilenkopf) beim horizontalen Scrollen fixieren */
table.matrix th.role { position:sticky; left:0; z-index:2; background:#fff; }
table.matrix thead th.role { z-index:6; background:#efefef; }

/* Headset-Plan-Steuerung */
.controls { display:flex; flex-wrap:wrap; gap:1rem; align-items:end;
            background:#fff; border:1px solid var(--line); border-radius:8px;
            padding:.8rem 1rem; margin-bottom:1rem; }
.controls label { display:flex; flex-direction:column; font-size:.78rem;
                  color:#555; gap:.2rem; }
.issues { margin:.6rem 0; }
.issues .error { color:#c00; } .issues .warning { color:#b80; }
.planframe { background:#fff; border:1px solid var(--line); border-radius:8px;
             padding:.5rem; overflow-x:auto; }
.mic-must{} .mic-handheld{ color:#666; } .mic-dont{ color:#bbb; } .mic-offstage{ color:#9a6a12; }

/* In/Out-Auflöser (Aufführungs-Version): Rolle-Status farbig hinterlegt + Legende
   steht im Seitenkopf; Farbe ist nie alleiniger Träger (Status-Dropdown zeigt Klartext). */
.micbadge { font-size:.72rem; border:1px solid var(--line); border-radius:999px;
            padding:.02rem .4rem; vertical-align:middle; }
tr.vc-alternate td, tr.vc-cover td { background:#fff7e6; }   /* Abweichung: amber */
tr.vc-out td { background:#fdecec; }                          /* Loch: rot */
tr.vc-book td { background:#eef0f2; }                         /* nicht mikrofoniert: grau */
.vc-loch { color:#c0392b; font-weight:700; }

/* Ausfall-Assistent — interaktive Ersatz-Zeile je Rolle (Phase D Schritt 2).
   Farbe folgt derselben Status-Semantik wie die Matrix (nie alleiniger Träger:
   der Status-Dropdown + der ✓/„Vorschlag"-Text stehen im Klartext daneben). */
.absence-resolves { margin-top:.6rem; border-top:1px dashed var(--line); padding-top:.5rem; }
.absence-resolves-h { font-size:.8rem; margin-bottom:.35rem; }
.arole { border:1px solid var(--line); border-left-width:4px; border-radius:6px;
         padding:.4rem .55rem; margin:0 0 .4rem; background:#fff; }
.arole-alternate, .arole-cover { border-left-color:#e0a800; background:#fffdf6; }
.arole-out { border-left-color:#c0392b; background:#fdf6f6; }
.arole-book { border-left-color:#8a9099; background:#f7f8f9; }
.arole-default { border-left-color:#cbd2d9; }
.arole-head { font-size:.95rem; }
.arole-sug { font-size:.82rem; margin:.15rem 0 .3rem; }
.arole-picker { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; }
.arole-picker label { display:flex; flex-direction:column; font-size:.72rem; color:#555; gap:.15rem; }
.arole-accept { align-self:end; }
.arole-eff { font-size:.85rem; margin-top:.35rem; }
.arole-drafttag { font-size:.62rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
                  color:#7a6a3a; background:#f3ecd6; border:1px solid #e0d3a8; border-radius:4px;
                  padding:.02rem .3rem; margin-left:.4rem; vertical-align:middle; }
.absence-commit { margin-top:1.2rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.btn-done { display:inline-block; background:var(--accent); color:#fff; border:1px solid var(--accent);
            border-radius:6px; padding:.45rem .9rem; text-decoration:none; font-weight:600; }
.btn-done:hover { filter:brightness(1.06); }
.btn-done:disabled { opacity:.45; cursor:not-allowed; }
.btn-cancel { border:1px solid var(--line); background:#fff; border-radius:6px; padding:.45rem .9rem; }
.btn-cancel:disabled { opacity:.45; cursor:not-allowed; }
/* Neutrale „das ist eine nachgeordnete/erweiterte Sicht"-Notiz (NICHT .hint = gelb/Warnung) */
.viewnote { background:#f0f0f3; border-left:3px solid var(--muted); border-radius:0 6px 6px 0;
            padding:.55rem .85rem; margin-bottom:1rem; max-width:820px; font-size:.9rem; }
.viewnote a { color:var(--accent); }
/* Notluke: dezenter Fallback-Link vom In/Out-Assistenten zur erweiterten Rollen-Matrix */
.absence-escape { margin-top:1.6rem; font-size:.85rem; }
/* Geplant(A/B)-Spalte der Matrix: A- und B-Besetzung je eigene, klar beschriftete Zeile.
   Beide Personen benannt + mit A/B-Label -> keine Verwechslung, wer A und wer B ist.
   Labels sind beschriftete Marker (kein geratenes Symbol), auf iPad ohne Hover lesbar. */
.ab-cell { line-height:1.4; }
.ab-line { display:block; white-space:nowrap; }
.ab-lbl { display:inline-block; min-width:1.15rem; margin-right:.35rem; text-align:center;
          border-radius:3px; border:1px solid var(--line); background:#f0f0f3;
          color:var(--muted); font-size:.66rem; font-weight:700; vertical-align:middle; }
.ab-lbl-b { background:#f4e9c9; color:#7a5b00; border-color:#e0cf9a; }
/* Klassifikations-Tag in „Effektiv heute": B = geplante Alternate, Cover = Ersatz.
   (Zeile ist ohnehin amber gefaerbt; der Tag trennt die beiden amber-Faelle.) */
.eff-tag { display:inline-block; padding:0 .35rem; border-radius:3px; border:1px solid var(--line);
           font-size:.66rem; font-weight:700; vertical-align:middle; }
.eff-b { background:#f4e9c9; color:#7a5b00; border-color:#e0cf9a; }
.eff-cover { background:#e6eefb; color:#2c4a7a; border-color:#c3d4ee; }
.eff-book { background:#eef0f2; color:#555; border-color:#d5d9dd; }
/* Hauptrolle-Marke in der Besetzung (Rollen-Chip) — signalisiert „hier lohnt Zweitbesetzung". */
.rt-badge { display:inline-block; margin:0 .2rem; padding:0 .3rem; border-radius:3px;
            background:#f4e9c9; color:#7a5b00; border:1px solid #e0cf9a;
            font-size:.62rem; font-weight:700; vertical-align:middle; white-space:nowrap; }
select.rt-haupt { font-weight:600; }   /* Hauptrolle im Rollentyp-Dropdown hervorheben */
.vc-who { max-width:24rem; }

/* Versionierungs-Panel: oben die geladene Version (hervorgehoben), trägt den GM-Knopf */
.versions h4 { font-size:.85rem; margin:.9rem 0 .2rem; color:#333; }
.vtable td:last-child { text-align:right; }
tr.vloaded td { background:#fff8e6; }                 /* leicht eingefärbt = aktuell geladen */
tr.vloaded.is-gm td { background:#fbf4dd; box-shadow:inset 3px 0 0 #d8b34a; }  /* eingefroren */
/* Alle Aktions-Buttons im Versionierungs-Panel einheitlich klein + unaufdringlich */
.versions td button { font-size:.75rem; padding:.15rem .55rem; line-height:1.4; border-radius:5px; }
/* Stammbaum: Aufführungs-Versionen hängen (eingerückt) unter ihrer Design-Version */
tr.vshow td { background:#fafbfc; font-size:.82rem; }
tr.vshow td:first-child { color:#333; }
tr.vorphan td { background:#f7f7f8; color:#888; }     /* Herkunfts-Snapshot gelöscht */

/* Charakterliste / Ensembles (Screen 4) */
.tablescroll { overflow-x:auto; }
/* in der horizontalen Scroll-Box bricht sticky top -> abschalten */
table.chartable th, table.enstable th, table.casttable th { position:static; }
/* .data ist generisch (auch ausserhalb Scroll-Box mit intaktem Sticky) -> nur IN der Box abschalten,
   sonst pinnt top:48px den Header 48px hinter den Tabellen-Anfang = mitten in die Tabelle (Rollen-Matrix) */
.tablescroll table.data th { position:static; }
table.chartable, table.enstable, table.casttable { min-width:100%; }
table.chartable td.num, table.casttable td.num { text-align:right; color:#555; }
table.chartable td.auto, table.enstable td.auto,
table.casttable td.auto { background:#f4f4f4; color:#333; font-size:.85rem; }
table.chartable .col-narrow, table.enstable .col-narrow,
table.casttable .col-narrow { width:1%; white-space:nowrap; }
table.chartable .col-kuerzel input, table.enstable .col-kuerzel input,
table.casttable .col-kuerzel input { width:7em; }
/* Cast: Vorname/Nachname schmal halten, damit die Rollen-Spalten Platz haben */
table.casttable .col-name input { width:8em; }
/* GLD-Kürzel ist max. 5-stellig -> Spalte auf die Codebreite begrenzen, zentriert +
   Tabellen-Ziffern für die Lesbarkeit (breiter wird der Code nie). */
table.casttable .col-kuerzel { width:5ch; white-space:nowrap; text-align:center;
    font-variant-numeric:tabular-nums; letter-spacing:.04em; }
/* Charakterliste: Rollen-Name breit genug (sonst werden lange Namen abgeschnitten) */
table.chartable .col-name { width:11em; }
table.chartable .col-name input { width:11em; min-width:11em; }
table.chartable .col-desc { min-width:16em; }
table.chartable .col-mic select, table.enstable .col-mic select { width:auto; border:1px solid var(--line); border-radius:5px; }
table.chartable .col-ens select { width:auto; border:1px solid var(--line); border-radius:5px; }
td.songcell { white-space:normal; min-width:11em; max-width:15em; }
.songchip { display:inline-flex; align-items:center; gap:.1rem; background:#e8f6ec;
            border:1px solid #9ad3ab; border-radius:999px; padding:.05rem .15rem .05rem .5rem;
            margin:.1rem .2rem .1rem 0; font-size:.82rem; }
.songchip .chipx { border:none; background:none; color:#456; cursor:pointer; padding:0 .2rem; line-height:1; }
.songchip .chipx:hover { color:#c00; }
select.songadd { font-size:.8rem; color:#666; border:1px dashed var(--line); background:transparent;
                 max-width:13em; }   /* lange „spielt schon …"-Optionen ziehen die Spalte sonst breit */

/* Cover-Popup in der Understudy-Spalte: Rollen nach Passung (frei + Strecke = hoch). */
.coverpop { position:relative; display:inline-block; }
.coverpop > summary { list-style:none; cursor:pointer; font-size:.8rem; color:#666;
                      border:1px dashed var(--line); border-radius:5px; padding:.05rem .4rem;
                      display:inline-block; }
.coverpop > summary::-webkit-details-marker { display:none; }
.coverpop > summary:hover { color:#222; border-style:solid; }
.coverpop-menu { position:absolute; z-index:60; top:100%; left:0; min-width:250px; max-height:340px;
                 overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:8px;
                 box-shadow:0 6px 22px rgba(0,0,0,.16); padding:.25rem; margin-top:.15rem; }
.cp-legend { font-size:.72rem; color:var(--muted); padding:.15rem .45rem .35rem;
             border-bottom:1px solid var(--line); margin-bottom:.2rem; line-height:1.3; }
.coverpop-item { display:flex; align-items:baseline; gap:.5rem; width:100%; text-align:left;
                 border:0; background:transparent; cursor:pointer; padding:.28rem .45rem; border-radius:6px; }
.coverpop-item:hover { background:#eef1f5; }
.cp-name { flex:1 1 auto; font-size:.85rem; font-weight:600; }   /* Name zuerst, schiebt den Rest nach rechts */
.cp-badge { font-size:.68rem; font-weight:700; padding:.08rem .45rem; border-radius:999px; white-space:nowrap; }
.cp-why { font-size:.72rem; color:var(--muted); white-space:nowrap; }
.cp-hoch .cp-badge { background:#e6f4ea; color:#1e6b37; }
.cp-gut .cp-badge  { background:#fdf3d7; color:#855c00; }
.cp-kompromiss .cp-badge { background:#efeef0; color:#6b5560; }
.cp-offstage { opacity:.55; }
.cp-offstage .cp-badge { background:#eee; color:#999; }

/* Referenz-Links auf abgeleiteten Werten: klickbar, aber KEIN blauer Hyperlink —
   erbt die Textfarbe, Unterstreichung nur bei Hover (Sprung zur Quell-Zeile). */
.ref { color:inherit; text-decoration:none; cursor:pointer; }
.ref:hover { text-decoration:underline; text-decoration-style:dotted; }
/* Ziel-Zeile nach dem Sprung kurz aufblitzen, damit man sieht, wo man gelandet ist. */
tr:target > td { animation:rowflash 1.8s ease-out; }
@keyframes rowflash { from { background:#fff3c4; } to { background:transparent; } }
.dbcast { color:#a12020; font-size:.82rem; font-weight:600; }
.songchip.ensg { background:#eef0fc; border-color:#c3c9f0; }
.songchip.ro { padding-right:.5rem; }
/* Weiche Cast-Plausibilitäts-Warnung (Understudy > 3 / Alternate > 1): amber, nur Hinweis. */
.sc-warn { display:inline-block; font-size:.72rem; font-weight:600; color:#855c00;
           background:#fdf3d7; border:1px solid #e6cf8a; border-radius:999px;
           padding:.05rem .5rem; margin:.1rem .2rem .1rem 0; white-space:nowrap; cursor:help; }
/* „Zweitbesetzung"-Label: Person alterniert eine Rolle, spielt selbst keine — echte B-Besetzung. */
.sc-badge { display:inline-block; font-size:.68rem; font-weight:700; color:#5a3d8a;
            background:#efe9fa; border:1px solid #cdbdf0; border-radius:999px;
            padding:.05rem .5rem; margin:.1rem .2rem .1rem 0; white-space:nowrap; cursor:help; }
/* Doppelt vergebenes (manuell editierbares) Kürzel: Input amber markieren + ⚠ daneben. */
input.kdup { border-color:#e0a800; background:#fdf3d7; }
td.miccomp { white-space:normal; font-size:.85rem; min-width:14em; }
.miccell { display:inline-block; margin-right:.7rem; white-space:nowrap; }
.offcell label { white-space:nowrap; font-size:.85rem; cursor:pointer; }
td.ensadd { background:#f0f8f0; }
td.ensadd input { width:18em; }
td.ensadd button { margin-left:.5rem; }

/* Home — zwei Spalten: links Produktionsinhalt, rechts Personal/Pinnwand */
.home-cols { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
             gap:1.2rem; align-items:start; }
@media (max-width:900px){ .home-cols { grid-template-columns:1fr; } }
.panel { background:#fff; border:1px solid var(--line); border-radius:10px;
         padding:.9rem 1.1rem; margin-bottom:1.1rem; }
.panel h3 { font-size:.95rem; margin:.1rem 0 .6rem; color:#333; }

/* Home — Produktions-Karte */
.prodcard { background:#fff; border:1px solid var(--line); border-radius:10px;
            padding:1rem 1.2rem; }
.prodcard .meta-grid textarea { border:1px solid var(--line); border-radius:4px;
            font:inherit; resize:vertical; padding:.3rem .4rem; }
.prodcard .showname { font-size:1.5rem; font-weight:700; border:1px solid transparent;
                      width:100%; padding:.1rem .2rem; }
.prodcard .showname:hover, .prodcard .showname:focus { border-color:var(--line); }
.prodcard .meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem;
                       margin:.8rem 0; }
.prodcard .meta-grid label { display:flex; flex-direction:column; font-size:.75rem;
                             color:#666; gap:.15rem; }
.prodcard .meta-grid label.wide { grid-column:1 / -1; }
.prodcard .meta-grid input { border:1px solid var(--line); border-radius:4px; }
.prodcard .stats { font-size:.85rem; color:#444; margin:.4rem 0 .9rem;
                   padding:.4rem .6rem; background:var(--bg); border-radius:6px; }
.stub-note { border:1px dashed var(--line); border-radius:6px; padding:.7rem 1rem;
             background:#fafafa; color:#555; max-width:46rem; }
.prodcard .jumpgroups { display:flex; flex-direction:column; gap:.7rem; }
.prodcard .jumpgroup { display:flex; flex-direction:column; gap:.35rem; }
.prodcard .jumpgroup h4 { margin:0; font-size:.72rem; font-weight:600; text-transform:uppercase;
                          letter-spacing:.04em; color:#8a8a8a; }
.prodcard .jump { display:flex; gap:.6rem; flex-wrap:wrap; }
.prodcard .jump a { display:flex; align-items:center; gap:.45rem; padding:.5rem .8rem;
                    border:1px solid var(--line); border-radius:6px; text-decoration:none;
                    color:#222; background:#fff; }
.prodcard .jump a small { color:#777; font-size:.7rem; }
.prodcard .jump a .dot { width:.7rem; height:.7rem; border-radius:50%; background:#bbb; }
.prodcard .jump a.state-empty    { background:#fafafa; }
.prodcard .jump a.state-empty .dot    { background:#c9c9c9; }
.prodcard .jump a.state-progress { background:#fff8e6; border-color:#e6cf86; }
.prodcard .jump a.state-progress .dot { background:#e3a008; }
.prodcard .jump a.state-progress small { color:#a06800; }
.prodcard .jump a.state-done     { background:#e8f6ec; border-color:#9ad3ab; }
.prodcard .jump a.state-done .dot     { background:#2e9e54; }
.prodcard .jump a.state-done small    { color:#2e7d46; }
.prodcard .jump a:hover { filter:brightness(.97); }

/* "Seite fertig"-Leiste + Sperre */
.statusbar { display:flex; align-items:center; gap:.6rem; background:#fff;
             border:1px solid var(--line); border-radius:8px; padding:.5rem .9rem;
             margin-bottom:.9rem; }
.statusbar label { display:flex; align-items:center; gap:.4rem; font-weight:600; cursor:pointer; }
.statusbar.is-done { background:#e8f6ec; border-color:#9ad3ab; }
.statusbar .lockinfo { color:#2e7d46; font-size:.85rem; }
.locked-area { position:relative; }
.locked-area.locked { opacity:.5; pointer-events:none; }
.locked-area.locked::after { content:"🔒 fertig — zum Bearbeiten oben entsperren";
    position:absolute; top:.3rem; right:.4rem; font-size:.8rem; color:#2e7d46;
    pointer-events:none; }
details.archive { margin-top:1.2rem; }
details.archive summary { cursor:pointer; color:#333; font-weight:600; }
.new-show { display:flex; gap:.5rem; align-items:center; margin:.7rem 0; flex-wrap:wrap; }
.new-show input[type=text] { border:1px solid var(--line); border-radius:5px; min-width:14rem; width:auto; }
.new-show input[type=date] { border:1px solid var(--line); border-radius:5px; }

/* Team / Rahmendaten in der Karte */
.prodcard .team { margin:.9rem 0; }
.prodcard .team h3 { font-size:.9rem; margin:.2rem 0 .4rem; color:#333; }
table.teamtable { border-collapse:collapse; width:100%; }
table.teamtable td { border:1px solid var(--line); padding:.15rem .35rem; }
table.teamtable td.lbl { width:11rem; font-weight:600; background:#fafafa; }
table.teamtable input { border:1px solid transparent; background:transparent; width:100%; }
table.teamtable input:hover, table.teamtable input:focus { border-color:var(--line); background:#fff; }
table.teamtable td.mail { width:1.6rem; text-align:center; }
table.teamtable td.mail a { text-decoration:none; font-size:1rem; }
table.teamtable td.del-cell { width:1.6rem; text-align:center; }
table.teamtable th { background:#efefef; font-size:.72rem; text-align:left; padding:.2rem .35rem; }
table.teamtable td.zugang { width:9.5rem; text-align:center; font-size:.78rem; }
table.teamtable td.zugang .ok { color:#2e9e54; font-weight:700; }
table.teamtable td.zugang .requested { color:#a06800; font-size:.72rem; font-style:italic; }
.reqaccess { font-size:.7rem; padding:.15rem .4rem; border:1px solid var(--line);
             border-radius:4px; background:#fff8e6; cursor:pointer; }
.reqaccess:hover { background:#ffefc0; }

/* Pinnwand / Klebenotizen */
.sticky-add textarea { width:100%; border:1px solid var(--line); border-radius:5px;
                       font:inherit; resize:vertical; padding:.3rem .4rem; }
.sticky-add-row { display:flex; gap:.4rem; margin-top:.4rem; flex-wrap:wrap; }
.sticky-add-row input { border:1px solid var(--line); border-radius:5px; flex:1; min-width:6rem; }
.sticky-wall { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.sticky { position:relative; width:9.5rem; min-height:6rem; padding:.5rem .55rem .4rem;
          border-radius:3px; box-shadow:1px 2px 5px rgba(0,0,0,.18);
          transform:rotate(-1deg); font-size:.82rem; }
.sticky:nth-child(even){ transform:rotate(1.2deg); }
.sticky-yellow { background:#fff7a8; } .sticky-pink { background:#ffc7d9; }
.sticky-blue { background:#bfe3ff; } .sticky-green { background:#c7f3c7; }
.sticky-text { white-space:pre-wrap; word-break:break-word; margin-bottom:1.2rem; }
.sticky-meta { position:absolute; bottom:.3rem; left:.55rem; right:.55rem;
               font-size:.65rem; color:#555; display:flex; gap:.4rem; justify-content:space-between; }
.sticky-meta .for { font-weight:700; color:#a05000; }
.sticky-del { position:absolute; top:.15rem; right:.25rem; border:none; background:none;
              cursor:pointer; color:#00000066; font-size:.8rem; }
.sticky-del:hover { color:#c00; }

/* Aktivitäts-Log */
.activity-list { list-style:none; padding:0; margin:0; font-size:.82rem; }
.activity-list li { padding:.25rem 0; border-bottom:1px solid #f0f0f0; }
.activity-list .who { font-weight:600; }
.activity-list .when { color:#999; font-size:.75rem; }

/* Kalender */
.cal-cols { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.2rem; align-items:start; }
@media (max-width:1000px){ .cal-cols { grid-template-columns:1fr; } }
.cal-main { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; }
.cal-toggle { display:flex; align-items:center; gap:.4rem; padding:.25rem 0; font-size:.9rem; }
.cal-toggle .dot { width:.8rem; height:.8rem; border-radius:3px; }
.cal-toggle .del { margin-left:auto; }
.sub-add { margin-top:.6rem; }
.sub-add summary { cursor:pointer; color:#3a5; font-size:.85rem; }
.sub-add form { display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem; }
.sub-add input, .sub-add select { border:1px solid var(--line); border-radius:5px; padding:.3rem .4rem; }
.event-add { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.7rem; }
.event-add input, .event-add select { border:1px solid var(--line); border-radius:5px; padding:.3rem .4rem; }
.event-add .row { display:flex; gap:.5rem; align-items:center; }
.event-add .row label { font-size:.78rem; color:#555; display:flex; flex-direction:column; flex:1; }
.event-add .inline { flex-direction:row !important; align-items:center; gap:.3rem; }
.own-events { list-style:none; padding:0; margin:.4rem 0; font-size:.82rem; }
.own-events li { display:flex; align-items:center; gap:.45rem; padding:.25rem 0; border-bottom:1px solid #f0f0f0; }
.own-events .dot { width:.6rem; height:.6rem; border-radius:50%; flex:none; }
.own-events .t { color:#555; white-space:nowrap; }
.own-events .ti { font-weight:600; flex:1; }
.own-events .k { color:#888; font-size:.72rem; }
.cal-io { display:flex; flex-direction:column; gap:.5rem; margin-top:.6rem; }
.cal-io .import summary { cursor:pointer; color:#3a5; font-size:.85rem; }
.cal-io .import form { display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem; }
.cal-io .import select { border:1px solid var(--line); border-radius:5px; padding:.2rem; }


/* Daten-Hub (Import/Export-Seite) */
.datacols { display:flex; gap:1rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
.datacard { border:1px solid var(--line); border-radius:8px; padding:.7rem 1rem; flex:1; min-width:19rem; background:#fff; }
.datacard h3 { margin:.1rem 0 .6rem; }
.inlineform { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.stackform { display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; }
.stackform label.danger { color:#c00; font-weight:600; }

/* Daten-Hub: kurze Tabelle -> kein Sticky-Header (sonst Overlap); klare Gefahren-Zone */
table.datatable th { position:static; }
.datacard hr { border:none; border-top:1px solid var(--line); margin:.8rem 0; }
.datacard .nomargin { margin:.1rem 0; }
.dangerzone { border:1px solid #e0b4b4; background:#fdf3f3; border-radius:6px; padding:.6rem .8rem; }
.btn-danger { background:#c0392b; color:#fff; border:1px solid #a93226; border-radius:5px;
              padding:.35rem .7rem; }
.btn-danger:hover { background:#a93226; }

/* Headset-Plan: A1/A2-View-Umschalter */
.viewtabs { display:flex; gap:.3rem; margin:.3rem 0 .6rem; }
.viewtabs a { padding:.3rem .8rem; border:1px solid var(--line); border-bottom:none;
              border-radius:6px 6px 0 0; background:#ececec; color:#345; text-decoration:none; }
.viewtabs a.active { background:#fff; border-color:#999; font-weight:600; color:#111; }
.viewtabs a:hover { background:#f5f5f5; }

/* Phase 2 — TheatreMix-Vorlage (.tmix): Cue-Vorschau */
.tmixcues td, .tmixcues th { font-size:.82rem; padding:.18rem .35rem; }
.tmixcues .row-sfx td { background:#f3f8fc; color:#456; font-style:italic; }
.tmixcues .row-untercue td { background:#fff6e5; }
.tmixcues .row-untercue td:first-child { box-shadow:inset 3px 0 0 #e8a13a; }

/* Ensemble-Zeile: Offstage-Mikroanzahl (IPs) kompakt neben der Offstage-Checkbox */
.offcell .micips { display:inline-flex; align-items:center; gap:.15rem; margin-left:.5rem;
                   font-size:.8rem; color:#567; }
.offcell .micips input { width:2.6em; padding:.1rem .2rem; }

/* Offstage-IP-Feld in der Charakter-Zeile (nur bei Mic-Typ Offstage sichtbar) */
.col-mic .offip { width:3.2em; margin-left:.3rem; padding:.1rem .2rem; }
.offcell .micips input { width:6.5em; }

/* Offstage-Patch auf der TheatreMix-Seite: IP-Felder breit genug fuer den Platzhalter */
.ipfield { width: 22em; max-width: 100%; padding: .2rem .4rem; }

/* Ensemble-DCA in der Cue-Liste hervorheben (Label = Ensemblename) */
.tmixcues .ensdca { color:#1d6fa5; }

/* Headset-Plan Direkt-Edit: Zellen werden zu farbigen Selects (Zellfarbe scheint durch) */
.editbanner { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
              background:#eef6ff; border:1px solid #bcdcff; border-radius:6px;
              padding:.4rem .7rem; margin-bottom:.5rem; font-size:.85rem; }
.editbanner .spacer { flex:1 1 auto; }
.editbanner button.danger { background:#fff; color:#c00; border-color:#e0b4b4; }
.plan td.celledit { padding:0; position:relative; }
.plan select.celledit { width:100%; border:none; background:transparent; color:inherit;
                        font:inherit; font-weight:bold; text-align:center; padding:1pt;
                        -webkit-appearance:none; appearance:none; cursor:pointer; }
.plan td.cell-locked { box-shadow:inset 0 0 0 1.3pt #1d6fa5; }

/* --- Ausstattung / Maske: Steckbrief-Karten + Einkaufsliste -------------- */
.status-zu_besorgen { background:#fdecec; }
.maske-toolbar { display:flex; gap:.5rem; align-items:center; margin:.3rem 0 .8rem; flex-wrap:wrap; }
.btn-print { border:1px solid var(--line); border-radius:5px; padding:.2rem .6rem;
             text-decoration:none; color:inherit; background:#fff; font-size:.9rem; }
.btn-print:hover { background:#f2f2f2; }
.maske-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
              gap:.8rem; align-items:start; }
.maske-card { border:1px solid var(--line); border-radius:8px; padding:.6rem; background:#fff; }
.maske-cardhead { display:flex; flex-direction:column; border-bottom:2px solid #333;
                  padding-bottom:.25rem; margin-bottom:.4rem; }
.maske-name { font-weight:bold; font-size:1.05rem; }
.maske-rolle { font-size:.85rem; }
.maske-foto { margin-bottom:.4rem; }
.maske-foto-frame { position:relative; width:100%; aspect-ratio:1/1; background-color:#f0f0f0;
                    border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.maske-foto-rm { position:absolute; top:.2rem; right:.2rem; margin:0; }
.maske-foto-x { background:rgba(255,255,255,.85);
                border:1px solid var(--line); border-radius:4px; color:#c00; cursor:pointer; }
.maske-foto-ctrl { display:flex; gap:.35rem; align-items:center; margin-top:.25rem; flex-wrap:wrap; }
.maske-foto-ctrl select { border:1px solid var(--line); border-radius:5px; font:inherit; font-size:.8rem; }
.maske-foto-ctrl .foc { display:flex; align-items:center; gap:.15rem; font-size:.8rem; color:#555; }
.maske-foto-ctrl .foc input[type=range] { width:3.4rem; }
.maske-foto-empty { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1;
                    border:1.5px dashed var(--line); border-radius:5px; color:var(--muted);
                    cursor:pointer; }
.maske-foto-empty:hover { background:#f6f6f6; }
/* "Seite fertig": leere Felder + Edit-Affordanzen (Hinzufügen-Auswahlfelder) ausblenden
   (kompakte Lese-/Druckform). Eine Regel für alle Seiten. */
.locked-area.locked .is-empty,
.locked-area.locked .maske-foto-ctrl,
.locked-area.locked .maske-accadd,
.locked-area.locked .songadd,
.locked-area.locked .addcol,
.locked-area.locked .umbau-add,
.locked-area.locked .bbadd,
.locked-area.locked .row-add { display:none; }
.maske-field { margin:.35rem 0; }
.maske-field > label { display:block; font-size:.78rem; font-weight:bold; color:#555; }
.maske-field textarea, .maske-field input[type=text], .maske-field input[type=number] {
  width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:5px; font:inherit; }
.maske-field textarea { resize:vertical; margin-top:.15rem; }
.maske-pick { margin-bottom:.15rem; }
.maske-min { width:5rem; }
.maske-acc { margin-top:.5rem; border-top:1px solid var(--line); padding-top:.35rem; }
.maske-acc > label { display:block; font-size:.78rem; font-weight:bold; color:#555; margin-bottom:.2rem; }
.maske-accrow { margin-bottom:.4rem; padding-bottom:.3rem; border-bottom:1px dotted var(--line); }
.maske-accrow .acc-name { width:100%; box-sizing:border-box; border:1px solid var(--line);
                          border-radius:5px; font:inherit; margin-bottom:.2rem; }
.maske-accrow .acc-line2 { display:flex; gap:.25rem; align-items:center; margin-bottom:.2rem; }
.maske-accrow .acc-menge { width:3rem; border:1px solid var(--line); border-radius:5px; font:inherit; }
.maske-accrow .acc-line2 select { flex:1; min-width:0; border:1px solid var(--line); border-radius:5px; font:inherit; }
.maske-accrow .acc-note { width:100%; box-sizing:border-box; border:1px solid var(--line);
                          border-radius:5px; font:inherit; }
/* Accessoires-Gesamtliste */
.accgesamt td, .accgesamt th { vertical-align:top; }
.acc-tobuy { color:#c00; font-weight:600; white-space:nowrap; }
.acc-have { color:#2a7d3f; white-space:nowrap; }
/* Kostümteil-Status (Beschaffung) */
.status-naehen { background:#fff6da; }
.status-leihen { background:#e6f0fb; }
.status-kaufen { background:#fdecec; }
.sortlink { color:inherit; text-decoration:none; cursor:pointer; white-space:nowrap; }
.sortlink:hover { text-decoration:underline; text-decoration-style:dotted; }
.sortable th { user-select:none; }
.datagrp { margin:1.1rem 0 .3rem; font-size:1rem; }
.datatable tr.subrow td { background:#fafafa; border-top:none; padding-top:.1rem; padding-bottom:.1rem; }
.datatable tr.subrow td:first-child { padding-left:1.5rem; }
/* Umbauplan */
.umbau-list { display:flex; flex-direction:column; gap:.6rem; }
.umbau-card { border:1px solid var(--line); border-radius:8px; padding:.6rem .7rem; background:#fff; }
.umbau-head { display:flex; justify-content:space-between; align-items:baseline;
              border-bottom:1px solid var(--line); padding-bottom:.3rem; margin-bottom:.4rem; }
.umbau-title { font-size:1.02rem; }
.umbau-flags { display:flex; gap:.5rem; align-items:baseline; white-space:nowrap; }
.umbau-aufwand { font-size:.8rem; color:var(--muted); white-space:nowrap; }
.umbau-aufwand.heavy { color:#c00; font-weight:600; }
.umbau-bp { font-size:.8rem; color:#b25e00; background:#fff3e0; border:1px solid #f0d9b5;
            border-radius:4px; padding:0 .35rem; white-space:nowrap; }
.umbau-moves .mv { display:flex; align-items:baseline; gap:.4rem; margin:.15rem 0; flex-wrap:wrap; }
.mvlbl { min-width:3rem; font-weight:bold; font-size:.8rem; }
.mvlbl.ab { color:#c00; } .mvlbl.auf { color:#2a7d3f; } .mvlbl.bleibt { color:var(--muted); font-weight:normal; }
.elchip { border-radius:4px; padding:.08rem .45rem; font-size:.85rem; border:1px solid var(--line); }
.elchip.g-kulisse { background:#eef4fb; } .elchip.g-requisiten { background:#f3eefb; }
.elchip.faint { opacity:.6; }
.umbau-crew { margin-top:.5rem; border-top:1px solid var(--line); padding-top:.4rem; }
.umbau-crew > label { display:block; font-size:.78rem; font-weight:bold; color:#555; margin-bottom:.25rem; }
.umbau-helpers { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin-bottom:.3rem; }
.helperchip { background:#e8f6ec; border:1px solid var(--line); border-radius:999px;
              padding:.1rem .2rem .1rem .6rem; font-size:.88rem; }
.umbau-add { border:1px solid var(--line); border-radius:5px; font:inherit; }
.umbau-crewtext, .umbau-note { width:100%; box-sizing:border-box; border:1px solid var(--line);
                               border-radius:5px; font:inherit; margin-top:.25rem; }
.umbau-legend { font-size:.82rem; margin:.3rem 0 .7rem; line-height:1.5; }
.tagmark { display:inline-block; background:#fff6da; border:1px solid var(--line); border-radius:4px;
           padding:0 .3rem; font-weight:600; color:#333; }
/* Umbau-Übersichtsmatrix */
.umbau-matrix-wrap { overflow-x:auto; margin-top:.3rem; border:1px solid var(--line); border-radius:6px; }
.umbau-matrix { border-collapse:collapse; font-size:.8rem; }
.umbau-matrix td, .umbau-matrix th { border:1px solid var(--line); }
.umbau-matrix .mrowhead { text-align:left; white-space:nowrap; padding:.15rem .5rem; position:sticky;
                          left:0; background:#fff; z-index:1; font-weight:normal; }
.umbau-matrix thead .mrowhead { background:#e8e8e8; font-weight:bold; }
.umbau-matrix .mcolhead { vertical-align:bottom; padding:.3rem .1rem; }
.umbau-matrix .mcolhead span { writing-mode:vertical-rl; white-space:nowrap; display:inline-block;
                               font-size:.8rem; }
.umbau-matrix .mcolhead.g-kulisse { background:#eef4fb; } .umbau-matrix .mcolhead.g-requisiten { background:#f3eefb; }
.umbau-matrix .mcell { width:1.3rem; min-width:1.3rem; text-align:center; padding:.1rem 0; }
.umbau-matrix .mcell.neu { color:#2a7d3f; background:#eafaef; }
.umbau-matrix .mcell.steht { color:#aaa; }
.umbau-matrix .mcell.geht { color:#c00; background:#fdeaea; }
.umbau-matrix .mcell.solo { color:#d2691e; background:#fdf0e3; }
/* Legende-Häppchen erben dieselbe Farbe */
.mcell.neu { color:#2a7d3f; } .mcell.steht { color:#aaa; }
.mcell.geht { color:#c00; } .mcell.solo { color:#d2691e; }
.maske-accadd { display:flex; gap:.25rem; margin-top:.25rem; }
.maske-accadd input { flex:1; border:1px solid var(--line); border-radius:5px; font:inherit; }

/* ============================================================
   Kanalplan (GLD-I/O) — dunkle Konsolen-Optik, Farben nach Device/Bus
   ============================================================ */
.patch-toolbar { margin:.5rem 0 1rem; }
.gld { --green:#4aa529; --yellow:#c9a300; --orange:#b5651d; --grey:#4a4e57;
       --console-frame:#3a2f4a; --console-bg:#111318; --badge:#0c0d10; }

.gld-tabs { display:flex; gap:2px; align-items:stretch; background:#15171c;
            padding:6px; border-radius:8px 8px 0 0; border:1px solid #000; flex-wrap:wrap; }
.gld-io { display:flex; align-items:center; font-weight:700; color:#cfd3da;
          padding:0 14px; letter-spacing:.5px; }
.gld-tab { background:#2c2f36; color:#cfd3da; font-size:12.5px; font-weight:600;
           padding:9px 14px; border-radius:5px; border:1px solid #000; cursor:pointer;
           white-space:nowrap; text-decoration:none; }
.gld-tab.active { background:#4aa529; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

.patch-layout { display:flex; gap:14px; align-items:flex-start; }
.patch-main { flex:1 1 auto; min-width:0; }
.patch-side { flex:0 0 240px; }

.gld-console { background:var(--console-frame); padding:10px;
               border-radius:0 0 10px 10px; border:1px solid #000; overflow-x:auto; }
.gld-inner { background:var(--console-bg); border-radius:6px; padding:14px; min-width:1040px; }
.gld-rowhead { display:flex; justify-content:flex-end; margin-bottom:8px; }
.gld-free { font-size:12px; color:#9aa0aa; }
.gld-free b { color:#4aa529; font-variant-numeric:tabular-nums; }

.io-row { display:flex; gap:16px; align-items:flex-start; }
.gld-block { flex:0 0 auto; }
.gld-block.inputs { flex:1 1 auto; }
.gld-sect { font-size:11px; letter-spacing:2px; color:#7f8792; font-weight:700;
            margin:0 2px 8px; text-transform:uppercase; }
.gld-grid { display:grid; gap:7px; }
.gld-grid.cols8 { grid-template-columns:repeat(8, 1fr); }
.gld-grid.cols4 { grid-template-columns:repeat(4, 74px); }

.gld .sock { position:relative; background:linear-gradient(#23262e,#191b21);
             border:2px solid var(--grey); border-radius:7px; padding:6px 7px 7px;
             min-height:72px; display:flex; flex-direction:column; cursor:pointer;
             text-decoration:none; color:#e8e8ea; }
.gld .sock:hover { outline:1px solid rgba(255,255,255,.15); }
.gld .sock.editing { outline:2px solid #6db3ff; }
.gld .sock .ip { font-size:10px; color:#9aa0aa; font-weight:600; }
.gld .sock .lbl { font-size:13px; font-weight:700; margin-top:1px; line-height:1.1; }
.gld .sock .xlr { margin:5px auto 2px; width:22px; height:22px; border-radius:50%;
                  background:#0b0c0f; border:2px solid #3b3f47; position:relative; }
.gld .sock .xlr::before, .gld .sock .xlr::after, .gld .sock .xlr i {
     content:""; position:absolute; width:3.5px; height:3.5px; border-radius:50%; background:#5b616b; }
.gld .sock .xlr::before { top:4px; left:7px; }
.gld .sock .xlr::after { bottom:5px; left:3px; }
.gld .sock .xlr i { bottom:5px; right:3px; }
.gld .sock .ch { position:absolute; right:5px; bottom:4px; background:var(--badge);
                 color:#dfe3ea; font-size:10.5px; font-weight:700; padding:1px 5px;
                 border-radius:9px; min-width:18px; text-align:center; border:1px solid #000; }
.gld .sock.green  { border-color:var(--green); }  .gld .sock.green .lbl  { color:#bff0a6; }
.gld .sock.yellow { border-color:var(--yellow); } .gld .sock.yellow .lbl { color:#f0dd8a; }
.gld .sock.orange { border-color:var(--orange); }
.gld .sock.unassigned { border-color:var(--grey); border-style:dashed; }
.gld .sock.unassigned .lbl { color:#5c626c; } .gld .sock.unassigned .xlr { opacity:.4; }
.gld .sock .src { position:absolute; left:5px; bottom:5px; width:8px; height:8px; border-radius:50%; }
.gld .sock .src.linked  { background:#4aa529; box-shadow:0 0 0 2px #12351a; }
.gld .sock .src.fixture { background:#c9a300; box-shadow:0 0 0 2px #3a3208; }

.gld-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-size:12px; color:#9aa0aa; }
.gld-legend .key { display:flex; align-items:center; gap:6px; }
.gld-legend .sw { width:15px; height:15px; border-radius:4px; border:2px solid; }
.gld-legend .sw.green { border-color:#4aa529; } .gld-legend .sw.yellow { border-color:#c9a300; }
.gld-legend .sw.orange { border-color:#b5651d; } .gld-legend .sw.grey { border-color:#4a4e57; border-style:dashed; }
.gld-legend .dot { width:10px; height:10px; border-radius:50%; }
.gld-legend .dot.linked { background:#4aa529; } .gld-legend .dot.fixture { background:#c9a300; }

/* Editor + Signal-Pool (rechte Spalte) */
.patch-editor { background:#1c1f26; border:1px solid #3a3f49; border-radius:8px;
                padding:12px; margin-bottom:14px; color:#e8e8ea; }
.patch-editor h4 { margin:0 0 8px; font-size:13px; }
.patch-editor label { display:block; font-size:11px; color:#9aa0aa; margin-bottom:8px; }
.patch-editor select, .patch-editor input { width:100%; margin-top:2px; padding:4px 6px;
                background:#0f1116; color:#e8e8ea; border:1px solid #3a3f49; border-radius:5px; font:inherit; }
.patch-editor input[type=number] { width:auto; }
.patch-editor .editor-err { color:#ff8c80; font-size:12px; margin:0 0 8px; }
.editor-actions { display:flex; gap:8px; align-items:center; margin-top:4px; }
.editor-actions .ghost { background:none; border:none; color:#9aa0aa; cursor:pointer; text-decoration:underline; font:inherit; }

.pool { background:#1c1f26; border:1px solid #3a3f49; border-radius:8px; padding:12px; color:#e8e8ea; }
.pool h4 { margin:0 0 8px; font-size:13px; }
.pool-list { list-style:none; margin:0; padding:0; font-size:12px; }
.pool-list li { display:flex; align-items:center; gap:6px; padding:3px 0; border-bottom:1px solid #262a32; }
.pool-list li.done { color:#8fbf7a; }
.pool-list .pl-label { flex:1; }
.pool-list .pl-ch { color:#9aa0aa; font-variant-numeric:tabular-nums; }
.pool-list .pl-ok { color:#4aa529; font-weight:700; }
.patch-editor .editor-hint { font-size:11px; color:#8a90a0; margin:0 0 8px; line-height:1.4; }

/* Button-Spalte (Zeilen-Löschen) auch bei casttable auf Inhaltsbreite (Band-Tabelle) */
table.casttable .col-rowbtns { width:1%; white-space:nowrap; text-align:center; }

/* Offstage-Abnahme (Charaktere-Seite) — teilt die Tech-Widgets der Band-Tabelle */
.offabn{vertical-align:top;min-width:22rem;}
.offabn .band-line{display:flex;align-items:center;gap:.35rem;min-height:1.95rem;margin:.1rem 0;}
.offabn input.band-inst{min-width:6rem;max-width:12rem;flex:0 1 auto;}
.offabn input.band-kuerzel{width:4.5rem;font-variant-numeric:tabular-nums;}
.offabn .band-ip{color:#888;font-variant-numeric:tabular-nums;font-size:.85em;white-space:nowrap;}
.offabn .band-noip{color:#b99;font-size:.8em;font-style:italic;}
.offabn .chip-add{border:none;background:none;cursor:pointer;color:#3a8;font-size:1.05em;line-height:1;padding:0 .15rem;}
.offabn .chip-add:hover{color:#186;}
.offabn button.micd{border:none;background:none;cursor:pointer;font-size:1em;line-height:1;width:1.4rem;filter:grayscale(1);opacity:.45;}
.offabn button.micd.on{filter:none;opacity:1;}
.offabn .chipx{border:none;background:none;color:#c9b3b3;cursor:pointer;padding:0 .2rem;line-height:1;}
.offabn .chipx:hover{color:#c00;}
.mic-shared{color:#3a7;font-weight:700;}
/* Tech-Spalten-Toggle (auch Charaktere-Seite: Ensembles) */
.techtoggle{display:none;}
.techtoggle-lbl{display:inline-block;margin:.2rem 0 .6rem;padding:.2rem .6rem;cursor:pointer;
                border:1px solid var(--line);border-radius:6px;font-size:.85em;user-select:none;}
#techtoggle:checked ~ .techtoggle-lbl{background:#eef;border-color:#88a;}
#techtoggle:not(:checked) ~ .tablescroll .tech-col{display:none;}

/* Kanalplan Drag&Drop */
.gld .sock.drop-hot { outline:2px dashed #6db3ff; outline-offset:1px; }
.pool-list li[draggable="true"] { cursor:grab; }
.pool-list li[draggable="true"]:active { cursor:grabbing; }
.pool-list .pl-grip { color:#5a6070; margin-right:2px; font-size:.9em; }
.pool-list li.done .pl-grip { opacity:.4; }

/* --- Pre Start Checkliste --- */
table.cl-table thead th { position:static; top:auto; z-index:auto; }
table.cl-table td { vertical-align:top; }
.cl-tabs { display:flex; gap:.25rem; margin:1rem 0 .5rem; }
.cl-tab { padding:.35rem .8rem; border:1px solid #ccc; background:#f4f4f4;
          cursor:pointer; border-radius:4px 4px 0 0; }
.cl-tab.active { background:#fff; font-weight:600; border-bottom-color:#fff; }
.cl-hidden { display:none; }
.cl-off td { background:#e2e2e2; color:#9a9a9a; }
.cl-off .cl-txin, .cl-off .cl-taskin, .cl-off .cl-werin {
  color:#9a9a9a; background:transparent; border-color:#cfcfcf; }
.cl-off .cl-taskin { text-decoration:line-through; }
tr.cl-marker td { background:#eee; }
.cl-tx { white-space:nowrap; width:3rem; }
.cl-txin { width:2.6rem; }
.cl-taskin { width:100%; min-width:16rem; }
.cl-werin { width:6rem; }
.cl-check { text-align:center; color:#999; }
.cl-actions { white-space:nowrap; }
.cl-add { margin:.5rem 0; }
.cl-count { font-size:.8rem; margin:.25rem 0 0; }
.cl-heading { margin:1.5rem 0 .3rem; font-size:1.1rem; }