/*
 * Musikerdatenbank — Oberfläche im Stil „Plakatwand" (Livemusik Herdecke)
 * Fassung 2.0 · 31.10.2026 · ersetzt die Observer-Fassung (Grün/Gold/Caslon).
 *
 * Tokens, Schriften und Linien sind dieselben wie im Website-Theme
 * livemusik-plakatwand 2.1.0 und in plakatwand-app.css 1.0; die Klassennamen
 * der App (card, btn gold, pill, stat, note …) bleiben unverändert, damit
 * app.js nicht angefasst werden muss. „gold" heißt hier: Hauptknopf = Rot.
 * Schriften liegen lokal unter /fonts/ — nie Google Fonts.
 */

/* ---- Schriften (Anton, Archivo · SIL OFL 1.1 · Subsets latin + latin-ext) ---- */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/archivo-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/archivo-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/archivo-var-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/archivo-var-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Tokens (identisch mit dem Theme) ---- */
:root{
  --paper:#F2E9D6; --paper-2:#E8DDC3; --ink:#101010; --ink-soft:#3A3833; --mute:#5C584F;
  --red:#E8441F; --blue:#2448C8; --ok:#1E7F4F; --warn:#B8860B;
  --on-red:#101010; --on-blue:#F2E9D6; --on-ink:#F2E9D6;
  --font-display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --rule:2px; --rule-s:1px; --shadow:4px 4px 0 var(--ink); --tap:44px;
  --line:var(--ink); --line-s:color-mix(in srgb,var(--ink) 22%,var(--paper));
  --fs-0:15px; --fs--1:13px; --fs-1:18px; --fs-2:24px; --fs-3:34px;
  /* Alte Namen der App, auf die neue Welt gelegt — falls irgendwo noch benutzt */
  --green:var(--ink); --green-2:var(--ink-soft); --gold:var(--red); --card:var(--paper); --muted:var(--mute); --amber:var(--warn);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#121212;--paper-2:#1C1B18;--ink:#F2E9D6;--ink-soft:#D9D0BC;--mute:#B5AE9E;--on-ink:#121212}
}
:root[data-theme="dark"]{--paper:#121212;--paper-2:#1C1B18;--ink:#F2E9D6;--ink-soft:#D9D0BC;--mute:#B5AE9E;--on-ink:#121212}

/* ---- Grundlagen ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{font:var(--fs-0)/1.5 var(--font-body);background:var(--paper);color:var(--ink);min-height:100vh}
h1,h2,h3,h4{margin:0 0 .45em;line-height:1.1}
h1{font:400 var(--fs-3)/.95 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
h2{font:400 var(--fs-2)/1 var(--font-display);text-transform:uppercase;margin-top:0}
h3{font-size:var(--fs-1);font-weight:800}
h4,.card h4{font-size:var(--fs-0);font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:.15em}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
em{font-style:italic}

/* ---- Kopf ---- */
header{background:var(--ink);color:var(--on-ink);padding:8px 16px;display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;position:sticky;top:0;z-index:20;border-bottom:var(--rule) solid var(--red)}
header .brand{font:400 1.25rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
header .brand small{display:block;font:700 .62rem/1.3 var(--font-body);letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-top:3px}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav button{background:transparent;border:0;color:var(--on-ink);opacity:.85;min-height:40px;padding:0 11px;cursor:pointer;font:700 var(--fs--1)/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;border-radius:0}
nav button:hover{opacity:1;color:var(--red)}
nav button.active{opacity:1;background:var(--red);color:var(--on-red)}

main{padding:16px;max-width:1500px;margin:0 auto}
.view{display:none}
.view.active{display:block}

/* ---- Bausteine ---- */
.card{background:var(--paper);border:var(--rule) solid var(--ink);border-radius:0;padding:16px;margin-bottom:14px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1 1 320px;min-width:280px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.split{display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(420px,1.55fr);gap:14px;align-items:start}
@media(max-width:1080px){.split{grid-template-columns:1fr}}

label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);margin:9px 0 3px;font-weight:800}
input,select,textarea{width:100%;min-height:40px;padding:7px 10px;border:var(--rule-s) solid var(--ink);border-radius:0;background:var(--paper);font:inherit;font-size:14px;color:var(--ink)}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--blue);outline-offset:0;border-color:var(--ink)}
textarea{min-height:80px;resize:vertical;line-height:1.5}
input[type=checkbox]{width:18px;height:18px;min-height:0;margin-right:7px;vertical-align:-3px;accent-color:var(--red)}
input[type=date]{min-width:150px}
.check{display:flex;align-items:center;gap:2px;margin:11px 0;font-size:14px}
.check label{margin:0;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);font-weight:400;display:inline}
fieldset{border:var(--rule-s) solid var(--ink);border-radius:0;padding:4px 14px 14px;margin:16px 0}
legend{font:800 11.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.07em;color:var(--ink);padding:0 7px}

button.btn{background:var(--ink);color:var(--on-ink);border:var(--rule) solid var(--ink);border-radius:0;min-height:40px;padding:0 15px;font:700 var(--fs--1)/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
button.btn:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
button.btn.gold{background:var(--red);border-color:var(--red);color:var(--on-red)}
button.btn.gold:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
button.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
button.btn.ghost:hover{background:var(--ink);color:var(--on-ink)}
button.btn.danger{background:transparent;color:var(--red);border-color:var(--red)}
button.btn.danger:hover{background:var(--red);color:var(--on-red)}
button.btn.small{min-height:32px;padding:0 10px;font-size:11.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);border-bottom:var(--rule) solid var(--ink);padding:6px 8px;font-weight:800;background:var(--paper);position:sticky;top:0}
td{padding:7px 8px;border-bottom:var(--rule-s) solid var(--line-s);vertical-align:top}
tbody tr:hover{background:var(--paper-2)}
tr.clickable{cursor:pointer}
tr.sel{background:var(--paper-2)}
tr.sel td:first-child{box-shadow:inset 4px 0 0 var(--red)}

.tag{display:inline-block;background:var(--paper-2);border:var(--rule-s) solid var(--ink);border-radius:0;padding:0 7px;font-size:11.5px;font-weight:700;letter-spacing:.03em;margin:2px 3px 2px 0;color:var(--ink);white-space:nowrap;line-height:1.7}
.tag.g{background:var(--ink);color:var(--on-ink)}
.pill{display:inline-block;padding:1px 7px;border:var(--rule-s) solid currentColor;border-radius:0;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;line-height:1.5;white-space:nowrap;color:var(--ink)}
.pill.aktiv,.pill.bestaetigt{color:var(--ok)}
.pill.beobachtet,.pill.angefragt{color:var(--warn)}
.pill.gesperrt,.pill.abgesagt,.pill.nicht_buchen{background:var(--red);border-color:var(--red);color:var(--on-red)}
.pill.kein_fit{color:var(--red)}
.pill.archiv,.pill.pausiert{color:var(--mute)}
.pill.gespielt{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}

.muted{color:var(--mute)}
.small{font-size:13px}
.mono{font-family:var(--font-mono);font-size:13px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.euro{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.stat{background:var(--ink);color:var(--on-ink);border:var(--rule) solid var(--ink);border-radius:0;padding:13px 15px}
.stat .n{font:400 var(--fs-3)/.95 var(--font-display)}
.stat .l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.8;margin-top:5px}
.stat.warn{background:var(--red);border-color:var(--red);color:var(--on-red)}
.stat.warn .l{opacity:.85}

.note{border:var(--rule) solid var(--ink);border-left-width:8px;background:var(--paper);padding:9px 13px;margin:11px 0;font-size:13.5px}
.note.red{border-color:var(--red)}
.note.ok{border-color:var(--ok)}
.note.gelb{border-color:var(--warn)}
.hint{font-size:12px;color:var(--mute);margin-top:3px}

#toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:var(--on-ink);border-left:8px solid var(--red);padding:11px 17px;border-radius:0;box-shadow:var(--shadow);opacity:0;transition:opacity .25s;z-index:100;max-width:400px;font-size:14px}
#toast.show{opacity:1}
#toast.err{background:var(--red);color:var(--on-red);border-left-color:var(--ink)}

.searchbar{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.searchbar>div{flex:0 0 auto}
.searchbar .grow{flex:1 1 240px}
.searchbar label{margin-top:0}

.listwrap{max-height:calc(100vh - 250px);overflow:auto}
.empty{padding:30px;text-align:center;color:var(--mute);font-style:italic}
details summary{cursor:pointer;font-weight:800;color:var(--ink);padding:5px 0}
details summary:hover{color:var(--red)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14px}
.kv dt{color:var(--mute);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.kv dd{margin:0}

/* Act-Liste: Spalten bändigen, ohne die Statusspalte zu erdrücken */
#v-acts .listwrap table{table-layout:fixed;width:100%}
#v-acts .listwrap th:nth-child(1),#v-acts .listwrap td:nth-child(1){width:24%}
#v-acts .listwrap th:nth-child(2),#v-acts .listwrap td:nth-child(2){width:24%}
#v-acts .listwrap th:nth-child(3),#v-acts .listwrap td:nth-child(3){width:28%}
#v-acts .listwrap th:nth-child(4),#v-acts .listwrap td:nth-child(4){width:12%}
#v-acts .listwrap th:nth-child(5),#v-acts .listwrap td:nth-child(5){width:12%}
#v-acts .listwrap td{overflow:hidden}
#v-acts .listwrap td .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
#v-acts .listwrap td .trunc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Schlagwort-Chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px;min-height:24px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:var(--on-ink);border-radius:0;padding:2px 5px 2px 10px;font-size:12px;font-weight:700;line-height:1.5}
.chip button{background:transparent;border:0;color:var(--on-ink);opacity:.7;cursor:pointer;font-size:15px;line-height:1;padding:0 4px;min-width:24px;min-height:24px}
.chip button:hover{opacity:1;color:var(--red)}

/* ---- Zustände ---- */
button.btn:disabled{opacity:.45;cursor:not-allowed}
button.btn.small:disabled{opacity:.3}
.dirty-marker{color:var(--red);font-size:13px;align-self:center;font-weight:800}
#rep-form .card{border-color:var(--red)}
.busy{opacity:.55;pointer-events:none;transition:opacity .12s}
.sticky-actions{position:sticky;bottom:0;background:linear-gradient(to top,var(--paper) 76%,transparent);padding:12px 0 4px;margin-top:18px;border-top:var(--rule) solid var(--ink);z-index:5}
label[for]{cursor:pointer}
label[for]:hover{color:var(--red)}
.listwrap.busy{opacity:.5}

#rep-form .col{min-width:132px;flex:1 1 160px}
#rep-form label{display:flex;align-items:baseline;gap:6px}
label .muted{text-transform:none;letter-spacing:0;font-weight:400;font-size:11px;opacity:.8}

/* ---- Reiter ---- */
.tabs{display:flex;gap:2px;border-bottom:var(--rule) solid var(--ink);margin:6px 0 12px}
.tab{background:transparent;border:0;border-bottom:4px solid transparent;min-height:40px;padding:0 14px;cursor:pointer;font:700 var(--fs--1)/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:-2px}
.tab:hover{color:var(--ink)}
.tab.aktiv{color:var(--ink);border-bottom-color:var(--red)}
input.leer-pflicht{border-color:var(--red);box-shadow:inset 4px 0 0 var(--red)}
#gm-import tr.muted td{opacity:.45}
#gm-import input[type=file]{padding:6px;background:var(--paper)}

/* ---- Benutzerleiste ---- */
.benutzerleiste{order:99;display:flex;align-items:center;gap:10px;margin-left:auto;font-size:13px;color:var(--on-ink)}
.benutzerleiste .wer{opacity:.85}
.benutzerleiste .rolle{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:2px 7px;border:var(--rule-s) solid currentColor;opacity:.85}
.benutzerleiste .rolle.verwaltung{background:var(--red);color:var(--on-red);border-color:var(--red);opacity:1}
.btn.klein,button.btn.klein{min-height:32px;padding:0 10px;font-size:11px;background:transparent;color:var(--on-ink);border:var(--rule-s) solid currentColor}
.btn.klein:hover,button.btn.klein:hover{background:var(--red);color:var(--on-red);border-color:var(--red)}

/* Für die Stufe „Mitarbeit" ausgeblendete Geldspalten */
body.nur-mitarbeit [data-nur="verwaltung"]{display:none}

@media (max-width:760px){
  header{padding:8px 12px;gap:8px 14px}
  .benutzerleiste{order:2;width:100%;justify-content:flex-end;margin-top:-4px}
  nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav button{flex:0 0 auto}
  main{padding:12px}
  .card{padding:12px}
  .split{grid-template-columns:1fr}
  .col{min-width:0;flex-basis:100%}
  .listwrap{max-height:none}
}

/* ---- Druck: schwarz auf weiß, ohne Kopf und Knöpfe ---- */
@media print{
  :root{--paper:#fff;--paper-2:#fff;--ink:#000;--ink-soft:#000;--mute:#444;--on-ink:#fff}
  header,nav,#toast,.actions,.searchbar,.tabs,button{display:none !important}
  .card{break-inside:avoid;border-width:1px}
  .listwrap{max-height:none;overflow:visible}
  tbody tr:hover{background:transparent}
}