:root {
  --rot: #e3000f;
  --text: #1d1d1b;
  --grau: #6b6b6b;
  --linie: #dcdcdc;
  --flaeche: #f6f6f6;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
}

body { margin: 0; background: #fff; }

.kopf {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: .75rem 1.5rem;
  border-bottom: 3px solid var(--rot);
}
.marke { font-weight: 700; color: var(--text); text-decoration: none; }
.kopf nav { display: flex; gap: 1.25rem; }
.phase { color: var(--grau); }

main { max-width: 72rem; margin: 0 auto; padding: 1.5rem; }
.hinweis { color: var(--grau); }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--linie); }
thead th { background: var(--flaeche); }

.matrix { font-size: .875rem; }
.matrix td, .matrix th { padding: .25rem .45rem; vertical-align: top; }
.matrix .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix thead th { position: sticky; top: 0; z-index: 1; }
.matrix tr.block th { background: #fdeaea; border-top: 2px solid var(--rot); padding-top: .6rem; }
.matrix tfoot th { background: var(--flaeche); border-top: 2px solid var(--text); }
.matrix .redaktionell td { color: var(--grau); font-style: italic; }
.matrix .vorjahr { color: var(--grau); }
.kategorie { font-weight: 400; color: var(--grau); font-size: .8em; margin-left: .5rem; }
.art, .neu {
  display: inline-block; font-size: .72em; font-style: normal; padding: 0 .35rem;
  border-radius: .25rem; background: var(--flaeche); color: var(--grau); margin-right: .25rem;
}
.neu { background: var(--rot); color: #fff; }
main:has(.matrix) { max-width: none; }
.matrix tbody td:first-child { white-space: nowrap; }

.nowrap { white-space: nowrap; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.kacheln { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 1.5rem; }
.kachel {
  display: flex; flex-direction: column; min-width: 9rem; padding: .75rem 1rem;
  border: 1px solid var(--linie); border-left: 4px solid var(--grau); border-radius: .25rem;
}
.kachel b { font-size: 1.6rem; }
.kachel span { color: var(--grau); font-size: .85rem; }
.kachel-exakt, .kachel-aehnlich, .kachel-manuell { border-left-color: #2e7d32; }
.kachel-vorschlag { border-left-color: #f9a825; }
.kachel-ohne { border-left-color: var(--rot); }

/* Kopfzeile: angemeldete Person */
.ich { margin-left: auto; display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.ich a { color: var(--text); }
form { margin: 0; }
button.link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--rot);
  text-decoration: underline; cursor: pointer;
}

/* Formulare */
.formular { display: flex; flex-direction: column; gap: .75rem; }
.formular.schmal { max-width: 24rem; }
.formular label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.formular label.haken { flex-direction: row; align-items: center; }
.formular input:not([type=checkbox]), select {
  font: inherit; padding: .4rem .5rem; border: 1px solid #b5b5b5; border-radius: .25rem;
}
.formular button, .zeile button:not(.link) {
  font: inherit; padding: .45rem .9rem; border: 0; border-radius: .25rem;
  background: var(--rot); color: #fff; cursor: pointer; align-self: flex-start;
}
.zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.formular.zeile { flex-direction: row; margin: 1rem 0 1.5rem; }
.fehler { color: var(--rot); }
p.fehler, p.ok { padding: .6rem .8rem; border-radius: .25rem; }
p.fehler { background: #fdeaea; }
p.ok { background: #e8f5e9; color: #1b5e20; }
.passwort { font-size: 1.1em; user-select: all; }

/* Verwaltung */
.konten td { vertical-align: top; }
.konten tr.inaktiv { color: var(--grau); }
.rechte { margin: 0 0 .5rem; padding-left: 1.1rem; }
.rechte li form { display: inline; margin-left: .5rem; font-size: .85em; }

/* Mengenplanung bearbeiten */
.werkzeuge { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-bottom: 1rem; }
.werkzeuge p { margin: 0; }
.umschalter { white-space: nowrap; }
.matrix td.menge input {
  width: 2.6em; font: inherit; text-align: right; padding: .05rem .2rem;
  border: 1px solid #9e9e9e; border-radius: .2rem; background: #fff;
}
.matrix td.menge input:focus { outline: 2px solid var(--rot); outline-offset: 0; }
.matrix td.menge input.speichert { background: #fff8e1; }
.matrix td.menge input.gespeichert { background: #e8f5e9; transition: background .3s; }
.matrix td.menge input.fehler, .matrix td.menge input.konflikt { border-color: var(--rot); background: #fdeaea; }
.meldung {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); margin: 0;
  max-width: 40rem; padding: .6rem 1rem; border-radius: .25rem; background: #fdeaea;
}
.meldung:empty { display: none; }
.konten select { max-width: 16rem; }

/* Abweichung vom Vorjahr (Jahre, die aus dem Vorjahr angelegt wurden) */
.matrix td.menge.anders { background: #fff3cd; }
.matrix td.menge.anders input { background: #fff3cd; }
.haken { display: flex; gap: .35rem; align-items: center; font-size: .9rem; }
.legende.anders { background: #fff3cd; padding: 0 .3rem; border-radius: .2rem; }

/* Aufbau: aufnehmen, streichen, umsortieren */
a.knopf {
  padding: .35rem .8rem; border: 1px solid var(--rot); border-radius: .25rem;
  color: var(--rot); text-decoration: none;
}
.aufbau-knoepfe { white-space: nowrap; }
.aufbau-knoepfe form { display: inline; }
.aufbau-knoepfe .link { margin: 0 .4rem; font-size: .85em; }
button.pfeil {
  font: inherit; width: 1.7em; padding: 0; border: 1px solid #b5b5b5; border-radius: .2rem;
  background: #fff; cursor: pointer;
}
button.pfeil:disabled { opacity: .3; cursor: default; }
.rubrik-wahl { display: inline-block; font-size: .85em; }
.rubrik-wahl summary { cursor: pointer; color: var(--rot); }
.rubrik-wahl select { max-width: 14rem; }
.matrix tr:target td { background: #fff3cd; }
.neu-zeile summary { cursor: pointer; color: var(--rot); padding: .2rem 0; }
.neu-zeile .formular { margin: .5rem 0; }
.neu-zeile .breit { flex: 1 1 18rem; }
.neu-zeile select { max-width: 20rem; }
.bearbeiten input[name=titel] { width: 22rem; max-width: 60vw; }

/* Kalender: Jahresbelegung */
main:has(.belegung) { max-width: none; }
.kalender-filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin: 1rem 0; }
.kalender-filter label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.kalender-filter select { max-width: 18rem; }
.kalender-filter button {
  font: inherit; padding: .45rem .9rem; border: 0; border-radius: .25rem;
  background: var(--rot); color: #fff; cursor: pointer;
}
.kalender-blaettern { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; margin-bottom: .75rem; }
.kalender-blaettern a { color: var(--rot); }
.belegung { overflow-x: auto; border: 1px solid var(--linie); border-radius: .25rem; }
.belegung-kopf, .belegung-zeile { display: flex; min-width: 70rem; }
.belegung.monat .belegung-kopf, .belegung.monat .belegung-zeile { min-width: 90rem; }
.belegung-name {
  flex: 0 0 9rem; padding: .3rem .5rem; font-size: .85rem; font-weight: 600;
  position: sticky; left: 0; z-index: 2; background: #fff;
  border-right: 1px solid var(--linie); overflow: hidden; text-overflow: ellipsis;
}
.belegung-name small { display: block; font-weight: 400; color: var(--grau); }
.belegung-leiste { position: relative; flex: 1; }
.belegung-kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.belegung-kopf .belegung-leiste { height: 1.8rem; }
.belegung-kopf .belegung-name { background: var(--flaeche); }
.belegung-kopf .spalte {
  position: absolute; top: 0; bottom: 0; padding: .35rem .3rem; font-size: .75rem;
  border-left: 1px solid var(--linie); white-space: nowrap; overflow: hidden; box-sizing: border-box;
}
.belegung.monat .belegung-kopf .spalte { padding: .35rem .1rem; font-size: .68rem; text-align: center; }
.belegung-kopf .spalte a { color: var(--text); }
.belegung-kopf .spalte.wochenende { background: #ececec; }
.belegung-zeile { border-bottom: 1px solid var(--linie); }
.belegung-zeile .belegung-leiste { --hoehe: .7rem; height: calc(var(--spuren) * (var(--hoehe) + 2px) + 6px); }
.belegung.monat .belegung-zeile .belegung-leiste { --hoehe: 1.15rem; }
.wochenlinie { position: absolute; top: 0; bottom: 0; border-left: 1px solid #efefef; }
.wochenende-flaeche { position: absolute; top: 0; bottom: 0; background: #f4f4f4; }
.balken {
  position: absolute; top: calc(3px + var(--spur) * (var(--hoehe) + 2px)); height: var(--hoehe);
  min-width: 3px; border-radius: 2px; box-sizing: border-box; border: 1px solid rgb(255 255 255 / .6);
  color: #fff; font-size: .68rem; line-height: var(--hoehe); padding: 0 .2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
.balken:hover, .balken:focus { outline: 2px solid var(--text); z-index: 1; }
.kalender-legende { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; padding: 0; margin: 1rem 0; font-size: .85rem; }
.kalender-legende span { display: inline-block; width: .9rem; height: .9rem; border-radius: 2px; margin-right: .35rem; vertical-align: -2px; }
.balken.auffaellig {
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / .55) 0 3px, transparent 3px 7px);
  outline: 1px dashed var(--rot);
}

/* Zeitliche Lage: Soll/Ist */
.hochladen { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin: 1rem 0; }
.hochladen label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.hochladen button {
  font: inherit; padding: .45rem .9rem; border: 0; border-radius: .25rem;
  background: var(--rot); color: #fff; cursor: pointer;
}
.stand-liste { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; list-style: none; padding: 0; font-size: .9rem; }
.stand { font-variant-numeric: tabular-nums; }
.legende-zeile .stand { padding: 0 .3rem; border-radius: .2rem; }
.stand.ok { background: #e8f5e9; color: #1b5e20; }
.stand.fehlt { background: #fff3cd; color: #7a4f00; }
.stand.mehr { background: #e3f2fd; color: #0d47a1; }
.stand.leer { color: var(--grau); }
.termine td form select { max-width: 28rem; }
.kalender-filter label.haken { flex-direction: row; align-items: center; }

/* Phase und Arbeitsweise je BZ */
.bz-phasen th[scope=row] { font-weight: 600; white-space: nowrap; }
.bz-phasen select { max-width: 18rem; }
.bz-phasen .stand { padding: 0 .35rem; border-radius: .2rem; }
.phasen-zeile { font-size: .9rem; }
.passwort-anmeldung { margin-top: 1.5rem; }
.passwort-anmeldung summary { cursor: pointer; color: var(--grau); font-size: .9rem; }
.passwort-anmeldung .formular { margin-top: .75rem; }

/* Auswertungen */
main:has(.auswertung) { max-width: 72rem; }
.auswertung td.plus, .auswertung th.plus { color: #1b5e20; }
.auswertung td.minus, .auswertung th.minus { color: var(--rot); }
.auswertung .summe { font-weight: 600; }

/* Freigabe je Rubrik und BZ */
.matrix tr.freigabe-zeile th { background: #fff; font-weight: 400; font-size: .8rem; border-bottom: 1px dashed var(--linie); }
.matrix tr.freigabe-zeile form { display: inline; }
.matrix tr.freigabe-zeile .stand { padding: 0 .3rem; border-radius: .2rem; margin-right: .2rem; }

/* Kommentare an Einträgen */
.kommentare { display: inline-block; margin-left: .4rem; font-size: .8rem; vertical-align: baseline; }
.kommentare summary { cursor: pointer; color: var(--grau); list-style: none; }
.kommentare summary::-webkit-details-marker { display: none; }
.kommentare[data-anzahl] summary { color: var(--rot); font-weight: 600; }
.kommentare[open] { display: block; margin: .3rem 0; padding: .4rem .6rem; background: var(--flaeche); border-radius: .25rem; }
.kommentare .kommentar p { margin: .1rem 0 .5rem; white-space: pre-wrap; }
.kommentare form.inline { display: inline; margin-left: .4rem; }
.kommentare textarea { width: 100%; max-width: 32rem; font: inherit; box-sizing: border-box; }

/* Einstellungen */
.reiter { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--linie); margin: 0 0 1.25rem; }
.reiter a { padding: .4rem 0; color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; }
.reiter a[aria-current="page"] { border-bottom-color: var(--rot); font-weight: 600; }
.einstellungen .einstellung { margin: .75rem 0 1rem; max-width: 46rem; }
.einstellungen label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.einstellungen label.haken { flex-direction: row; }
.einstellungen .hinweis { margin: .25rem 0 0; }
.einstellungen button, form.zeile > button:not(.link) {
  font: inherit; padding: .45rem .9rem; border: 0; border-radius: .25rem; background: var(--rot); color: #fff; cursor: pointer;
}
div.fehler { padding: .6rem .8rem; border-radius: .25rem; background: #fdeaea; }
div.fehler p, div.fehler ul { margin: .2rem 0; }