:root {
  --bg: #fafaf8; --fg: #222; --muted: #777; --line: #ddd; --accent: #8a3b12;
  --yes: #2e9d4f; --reluctant: #e0a400; --no: #d03b2f; --unknown: #9a9a9a;
  --yes-bg: #d9f0df; --reluctant-bg: #fbefc6; --no-bg: #f8d6d2; --unknown-bg: #ececec;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
header { background: #2b2b2b; color: #fff; padding: .4em 1em; display: flex; gap: 1.2em;
         align-items: baseline; flex-wrap: wrap; }
header a { color: #ddd; text-decoration: none; }
header a.active, header a:hover { color: #fff; text-decoration: underline; }
header .brand { font-weight: bold; color: #fff; margin-right: .5em; }
header .sub { font-size: .9em; }
main { padding: 1em; }
h1 { font-size: 1.3em; margin: .2em 0 .6em; }
h2 { font-size: 1.1em; margin: 1.4em 0 .5em; }
a { color: var(--accent); }
table { border-collapse: collapse; }
th, td { border: 1px solid var(--line); padding: .2em .5em; text-align: left; vertical-align: top; }
th { background: #f0eee9; font-weight: 600; }
.muted { color: var(--muted); }
.flash { padding: .4em .8em; margin-bottom: .6em; border-radius: 3px; }
.flash.error { background: var(--no-bg); }
.flash.ok { background: var(--yes-bg); }
form.inline { display: inline; }
input, select, button { font: inherit; }
input[type=text], input[type=date], input[type=number] { padding: .1em .3em; }
input.time { width: 5em; }
input.num { width: 5em; }
button { cursor: pointer; }
button.danger { color: var(--no); }
.row-form { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; margin: .3em 0; }
.swatch { display: inline-block; width: .9em; height: .9em; border-radius: 50%;
          vertical-align: middle; margin-right: .3em; }
.removed { color: var(--muted); text-decoration: line-through; }

/* Verfügbarkeit */
.v-yes { background: var(--yes-bg); } .v-reluctant { background: var(--reluctant-bg); }
.v-no { background: var(--no-bg); } .v-unknown { background: var(--unknown-bg); }
.av-wrap { overflow-x: auto; }
table.av { user-select: none; font-size: .85em; }
table.av th.name { position: sticky; left: 0; background: #f0eee9; z-index: 1;
                   white-space: nowrap; min-width: 11em; }
table.av th.day { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: normal;
                  padding: .3em .1em; white-space: nowrap; }
table.av th.day.free { background: var(--no-bg); }
table.av th.day.rehearsal { font-weight: bold; }
table.av th.day.monday, table.av td.monday { border-left: 2px solid #999; }
table.av td.cell { width: 1.6em; min-width: 1.6em; height: 1.8em; padding: 0; text-align: center;
                   cursor: pointer; font-size: .8em; }
table.av td.cell.pattern { opacity: .45; }
table.av td.cell.explicit { font-weight: bold; }
table.av td.cell.sel { outline: 2px solid #333; outline-offset: -2px; }
table.av tr.room th.name { font-style: italic; }
.brushes { margin: .5em 0; display: flex; gap: .3em; flex-wrap: wrap; align-items: center; }
.brushes label { padding: .15em .6em; border: 1px solid var(--line); border-radius: 3px;
                 cursor: pointer; }
.brushes input { display: none; }
.brushes input:checked + span { font-weight: bold; text-decoration: underline; }

/* Machbarkeit / Szenen */
table.fx td.c { text-align: center; width: 2.4em; }
.f-ok { background: var(--yes-bg); } .f-warning { background: var(--reluctant-bg); }
.f-impossible { background: var(--no-bg); }
table.scenes td.req { text-align: center; cursor: pointer; width: 2.4em; }
table.scenes td.req.pflicht { background: var(--yes-bg); font-weight: bold; }
table.scenes td.req.einlesbar { background: #eef3fb; }
table.scenes td.req.override { outline: 2px solid var(--accent); outline-offset: -2px; }
table.scenes th.role { writing-mode: vertical-rl; transform: rotate(180deg); padding: .3em .1em; }
.legend span { display: inline-block; padding: 0 .5em; margin-right: .3em; }

/* Kalender */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 34%); gap: 1em;
              align-items: start; }
@media (max-width: 1000px) { .cal-layout { grid-template-columns: 1fr; } }
.panel { position: sticky; top: .5em; max-height: calc(100vh - 1em); overflow-y: auto;
         background: #fff; border: 1px solid var(--line); padding: .6em .8em; font-size: .92em; }
.panel h3 { font-size: 1em; margin: 1em 0 .3em; }
.panel-title { margin-top: 0; }
.panel-fields { display: flex; flex-wrap: wrap; gap: .4em; }
.panel-fields .wide { flex: 1 1 100%; }
table.cal { width: 100%; table-layout: fixed; font-size: .82em; }
table.cal td.day { height: 6.5em; padding: .15em .25em; }
table.cal td.day.free { background: #fbeeec; }
table.cal td.day.past { background: #f3f2ef; }
table.cal td.day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.day-head { display: flex; justify-content: space-between; color: var(--muted); }
.day-head .add { border: none; background: none; color: var(--accent); padding: 0 .3em;
                 opacity: .35; font-weight: bold; cursor: pointer; }
td.day:hover .day-head .add { opacity: 1; }
.cal-entry { font-size: .9em; color: var(--muted); white-space: nowrap; overflow: hidden;
             text-overflow: ellipsis; }
.cal-entry.free { color: var(--no); }
.cal-entry.booking { color: var(--reluctant); }
.cal-entry.ignored { font-style: italic; }
.ev { border: 2px solid var(--yes); border-radius: 3px; padding: .1em .25em; margin: .15em 0;
      background: #fff; cursor: pointer; }
.ev.sev-error { border-color: var(--no); } .ev.sev-warning { border-color: var(--reluctant); }
.ev.sev-info, .ev.sev-none { border-color: var(--yes); }
.ev.st-draft { border-style: dashed; }
.ev.st-cancelled { border-color: var(--line); text-decoration: line-through; color: var(--muted); }
.ev-head { font-weight: 600; }
.ev-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { line-height: 1; }
.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: 1px; }
.dot.bad { outline: 2px solid var(--no); }
.legend .sev-error { border: 2px solid var(--no); } .legend .sev-warning { border: 2px solid var(--reluctant); }
.legend .sev-none { border: 2px solid var(--yes); }
ul.collisions, ul.items { margin: .2em 0; padding-left: 1.2em; }
.c-error { color: var(--no); } .c-warning { color: #9a6c00; } .c-info { color: var(--muted); }
.ok-text { color: var(--yes); margin: .2em 0; }
.block { border-left: 3px solid var(--line); padding-left: .5em; margin: .4em 0; }
.section.pause input[name=label] { font-style: italic; }
.add-item select { max-width: 9em; }
.add-toggle > summary { cursor: pointer; color: var(--accent); font-size: .88em; margin: .2em 0; }
.add-toggle[open] > summary { color: var(--muted); }
.scene-info { display: inline; }
.scene-info > summary { display: inline; cursor: help; color: var(--accent); list-style: none; }
.scene-info > summary::-webkit-details-marker { display: none; }
.scene-info[open] > ul { display: block; margin: .2em 0 .3em; padding: .3em .6em .3em 1.6em;
                         background: #f6f4ef; border: 1px solid var(--line); font-size: .9em; }
.add-item[data-kind=scenes] [name=text], .add-item[data-kind=scenes] [name=music_id],
.add-item[data-kind=text] [name=music_id],
.add-item[data-kind=music] [name=scene_from], .add-item[data-kind=music] [name=scene_to],
.add-item[data-kind=music] [name=text] { display: none; }
.inline-form { display: inline; }
.inline-form select { max-width: 11em; }
button.small { font-size: .85em; padding: 0 .3em; }
.checks { display: flex; flex-wrap: wrap; gap: .2em .6em; font-size: .9em; }
.pill { padding: 0 .3em; border-radius: 3px; }
table.roles { font-size: .92em; }
tr.rs-absent, tr.rs-read_in { color: var(--muted); }
table.stats td { text-align: right; } table.stats td:first-child { text-align: left; }
table.stats tr.never td:first-child { color: var(--no); }
td.neg { color: var(--no); } td.pos { color: var(--yes); }
.badges { display: block; line-height: 1.5; }
.badge { display: inline-block; min-width: 1.4em; padding: 0 .2em; border-radius: .7em; margin-right: 1px;
         font-size: .72em; font-weight: 600; text-align: center; background: var(--c); color: var(--fg);
         border: 1.5px solid var(--c); }
.badge.opt { background: transparent; color: var(--c); }
.scene-summary { display: block; font-weight: normal; font-size: .82em; color: var(--muted); max-width: 22em; }

/* Vorschlag */
table.days tr.free td { background: #fbeeec; }
.bar { display: inline-block; width: 5em; height: .6em; background: var(--unknown-bg);
       vertical-align: middle; margin-right: .3em; }
.bar span { display: block; height: 100%; background: var(--yes); }
.sg-event { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent);
            padding: .4em .7em; margin: .5em 0; max-width: 60em; }
.sg-event.fixed { border-left-color: var(--line); }
.sg-item { margin: .15em 0; }
.reason { font-size: .82em; color: var(--muted); margin: 0 .3em; }
.sg-decisions { font-size: .88em; }
.proposal-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .2em 1em;
                align-items: baseline; padding: .35em 1em; background: var(--reluctant-bg);
                border-bottom: 1px solid var(--reluctant); }
.proposal-bar .muted { color: #5f5a45; }
body.has-proposal .panel { top: 3em; max-height: calc(100vh - 3.5em); }
@media (max-width: 1000px) { .proposal-bar { position: static; } }
.review-actions { display: flex; flex-wrap: wrap; gap: 1em 2em; margin-top: 1.4em; }
.review-actions form { flex: 1 1 20em; max-width: 34em; }
.review-actions p { margin: .4em 0 0; }
table.sync td { vertical-align: top; }
.feeds-hint { font-size: .9em; }
header .me { margin-left: auto; font-size: .9em; color: #bbb; }
header button.link { background: none; border: 0; padding: 0; color: #ddd; font: inherit; cursor: pointer; }
header button.link:hover { color: #fff; text-decoration: underline; }
form.login { display: grid; grid-template-columns: max-content 16em; gap: .5em 1em; align-items: baseline; }
form.login button { grid-column: 2; justify-self: start; }
table.log td { vertical-align: top; font-size: .9em; }
table.log td.data { max-width: 40em; overflow-wrap: anywhere; color: var(--muted); }