/* CrewPlan-Oberfläche: hell und dunkel über dieselben Farbnamen. */
:root {
  --grund: #f6f7f9;
  --flaeche: #ffffff;
  --text: #1c2330;
  --leise: #5b6576;
  --linie: #dde2ea;
  --akzent: #0b6bcb;
  --flug: #2f6fd6;
  --verlaengert: #b25e00;
  --bereitschaft: #7a4fbf;
  --ereignis: #9aa3b2;
  --gut: #1c7c3c;
  --schlecht: #b3261e;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #11151c;
    --flaeche: #1a2029;
    --text: #e6e9ef;
    --leise: #9aa3b2;
    --linie: #2c3441;
    --akzent: #5aa6ff;
    --flug: #4d8ef0;
    --verlaengert: #e08a2a;
    --bereitschaft: #a07ee0;
    --ereignis: #5e6878;
    --gut: #55c27a;
    --schlecht: #ff7a70;
  }
}

* { box-sizing: border-box; }
/* Ohne diese Zeile überstimmt jedes „display: grid/flex“ unten das hidden-Attribut —
   Anmeldung und Arbeitsfläche standen sonst gleichzeitig da. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--grund);
  color: var(--text);
}
button, input, select { font: inherit; }
button {
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text);
  border-radius: 6px;
  padding: .35rem .7rem;
  cursor: pointer;
}
button[type=submit] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button:disabled { opacity: .6; cursor: progress; }
input, select {
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .35rem .5rem;
  background: var(--flaeche);
  color: var(--text);
}
table { border-collapse: collapse; width: 100%; background: var(--flaeche); }
caption { text-align: left; font-weight: 600; padding: .4rem 0; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { color: var(--leise); font-weight: 600; }

.kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.2rem; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.kopf h1 { font-size: 1.15rem; margin: 0; }
.sitzung { display: flex; gap: .6rem; align-items: center; color: var(--leise); }

.anmeldung { max-width: 26rem; margin: 3rem auto; padding: 1.4rem; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px; }
.anmeldung form { display: grid; gap: .6rem; }
.passwort { display: flex; gap: .4rem; }
.passwort input { flex: 1; }

.arbeitsflaeche { display: grid; grid-template-columns: 17rem 1fr; min-height: calc(100vh - 3rem); }
@media (max-width: 760px) { .arbeitsflaeche { grid-template-columns: 1fr; } }
.laeufe { border-right: 1px solid var(--linie); padding: .8rem; background: var(--flaeche); overflow-y: auto; }
.laeufe h2 { font-size: 1rem; margin: .2rem 0 .6rem; }
.laeufe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lauflink { width: 100%; text-align: left; display: grid; gap: .1rem; }
.lauflink[aria-current=true] { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); }
.lauflink span { color: var(--leise); font-size: .85rem; }
.lauf { padding: 1rem 1.2rem; min-width: 0; }
.laufkopf h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.laufkopf p { margin: 0 0 .6rem; color: var(--leise); }
.kennzahlen { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding: 0; margin: 0 0 .8rem; }
.gut { color: var(--gut); }
.schlecht, .fehler { color: var(--schlecht); }
.leer { color: var(--leise); }

.reiter { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--linie); margin-bottom: .8rem; }
.reiter [role=tab] { border-radius: 6px 6px 0 0; border-bottom: none; }
.reiter [aria-selected=true] { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }

.plan { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: .4rem; }
.zeile { display: grid; grid-template-columns: 12rem minmax(48rem, 1fr); align-items: center; min-height: 2rem; }
.zeile + .zeile { border-top: 1px solid var(--linie); }
.person { padding: 0 .5rem; display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.sitz { color: var(--leise); font-size: .85rem; }
.marke-fehler { color: #fff; background: var(--schlecht); border-radius: 999px; padding: 0 .45rem; font-size: .75rem; }
.achse, .spur { position: relative; height: 1.9rem; }
.kopfzeile { color: var(--leise); font-size: .8rem; }
.tag { position: absolute; top: .4rem; border-left: 1px solid var(--linie); padding-left: .2rem; }
.balken {
  position: absolute; top: .25rem; bottom: .25rem; overflow: hidden; white-space: nowrap;
  font-size: .7rem; line-height: 1.4rem; padding: 0 .25rem; border-radius: 4px; border: none; color: #fff;
}
.balken.flug { background: var(--flug); }
.balken.verlaengert { background: var(--verlaengert); }
.balken.gewaehlt { outline: 2px solid var(--text); outline-offset: 1px; }
.balken.bereitschaft { background: var(--bereitschaft); }
.balken.ereignis { background: repeating-linear-gradient(45deg, var(--ereignis) 0 6px, transparent 6px 10px); color: var(--text); }
.balken.ereignis.dienst { background: var(--ereignis); color: #fff; }
.detail { margin-top: .8rem; }
.detail h3 { margin: .2rem 0; }

.navknopf { margin-bottom: .5rem; font-weight: 600; }
.navknopf + h2 { margin-top: .9rem; }
.vereinbarungen { display: grid; gap: .7rem; max-width: 60rem; }
.vereinbarungen h2 { margin: 0; font-size: 1.2rem; }
.vereinbarungen > p { margin: 0; color: var(--leise); }
.vereinbarungen td input, .vereinbarungen td select { width: 100%; }
.knopfzeile { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Acht Spalten passen nicht in jede Breite: Die Tabelle rollt in sich, die Seite nicht. */
.wuensche { max-width: none; }
.breit { overflow-x: auto; }
.wuensche table { min-width: 74rem; }
/* Sonst nehmen die Datumsfelder den Platz, und Person und Art schrumpfen auf zwei Buchstaben. */
.wuensche td:nth-child(1) select { min-width: 9rem; }
.wuensche td:nth-child(2) select { min-width: 12.5rem; }
.wuensche td:nth-child(6) input { min-width: 4.5rem; }

.stoerung { display: grid; gap: .6rem; max-width: 34rem; }
.feld { display: grid; gap: .2rem; }
.feld label { color: var(--leise); font-size: .9rem; }