/* Nova — schmucklos, aber lesbar. Kein Build-Schritt, keine Bibliothek, kein JavaScript.
 *
 * Die Grundlage ist das Stylesheet des Redaktionssystems (Nova-Dach, ADR 0008: gleiche
 * Optik). Was dort nur fuer Artikel und Ausgaben galt, ist hier nicht mitgekommen; was
 * Nova braucht, steht unten unter „Nova". Keine Klasse wird benutzt, die hier fehlt —
 * drueben gab es fuenf (gefunden beim Kopieren, 23.09.2026). Inline-Styles verbietet die
 * Content-Security-Policy; es gibt sie deshalb nirgends. */

:root {
  --grund: #fbfaf8;
  --flaeche: #ffffff;
  --linie: #ddd8d0;
  --text: #1c1a17;
  --leise: #6b665e;
  --akzent: #1f4b3f;
  --gut: #1f5c3d;
  --schlecht: #8c2f22;
  --warnung: #7a5410;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

header { background: var(--akzent); padding: 0.9rem 1.25rem; }
.marke { color: #fff; text-decoration: none; font-weight: 600; letter-spacing: 0.02em; }

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  font-size: 0.92rem;
}
nav a { color: var(--akzent); text-decoration: none; font-weight: 500; }
nav a:hover { text-decoration: underline; }
nav .wer { margin-left: auto; color: var(--leise); }
nav .rollen { display: block; font-size: 0.8rem; }

main { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

h1 { font-size: 1.5rem; margin: 0 0 1.2rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.6rem; }
h2:first-child { margin-top: 0; }
h3 { font-size: 1rem; margin: 0 0 0.4rem; }

a { color: var(--akzent); }

table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.5rem; font-size: 0.95rem; }
.tabelle { overflow-x: auto; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--leise); font-weight: 600; }
tbody tr:hover { background: #f4f1ec; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
}

.leise { color: var(--leise); }
.klein { font-size: 0.86rem; }
.leer { color: var(--leise); font-style: italic; }

.hinweis { padding: 0.7rem 0.9rem; border-radius: 5px; margin: 0 0 1.2rem; white-space: pre-line; }
.hinweis.gut { background: #e3efe7; color: var(--gut); border: 1px solid #bcd8c6; }
.hinweis.schlecht { background: #f6e4e1; color: var(--schlecht); border: 1px solid #e0bdb6; }

form { margin: 0; }
form.inline { display: inline; }

label { display: block; font-size: 0.88rem; font-weight: 600; margin: 0.9rem 0 0.25rem; }
label.inline { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 400; margin: 0.2rem 1rem 0.2rem 0; }
label.block { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; margin: 0.25rem 0; }
input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="date"], textarea, select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font: inherit;
  background: #fff;
}
textarea { min-height: 2.6rem; resize: vertical; }
input.code { font-size: 1.6rem; letter-spacing: 0.5rem; text-align: center; font-family: ui-monospace, monospace; }

button, a.knopf {
  display: inline-block;
  font: inherit;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--akzent);
  border-radius: 4px;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
button:hover, a.knopf:hover { background: #17372e; }
button.leise { background: none; color: var(--leise); border-color: transparent; padding: 0.2rem 0.4rem; }
button.leise:hover { color: var(--text); text-decoration: underline; }
button.warnung { background: var(--warnung); border-color: var(--warnung); }
button.zweitrangig, a.knopf.zweitrangig { background: none; color: var(--akzent); }
button.zweitrangig:hover, a.knopf.zweitrangig:hover { background: #eeeae3; }

.aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; align-items: center; }

.protokoll { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.protokoll li { padding: 0.5rem 0; border-bottom: 1px solid var(--linie); }
.protokoll .zeit { color: var(--leise); font-size: 0.84rem; margin-right: 0.4rem; }
.protokoll .uebergehung { color: var(--warnung); }
.protokoll blockquote { margin: 0.3rem 0 0; padding-left: 0.8rem; border-left: 3px solid var(--linie); color: var(--leise); overflow-wrap: anywhere; }

footer { max-width: 64rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; color: var(--leise); font-size: 0.82rem; }

.anmeldung { max-width: 24rem; margin: 3rem auto; }

/* ------------------------------------------------------------------ Nova */

/* Im Entwicklungs- und Testsystem auf jeder Seite: Wer etwas sieht, soll nie raten
   muessen, in welchem System er ist (CLAUDE.md). */
.band { margin: 0; padding: 0.35rem 1.25rem; background: var(--warnung); color: #fff; font-size: 0.82rem; }

.pille {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #eeeae3;
  font-size: 0.8rem;
  white-space: nowrap;
}
.pille.status-aktiv, .pille.status-uebernommen { background: #dde9e2; }
.pille.status-in_kuendigung, .pille.status-kuendigung_offen { background: #f3e6c9; }
.pille.status-gekuendigt { background: #efd9d4; }
.pille.status-entwurf, .pille.status-offen { background: #e6ecf3; }
.pille.vertraulich { background: none; border: 1px solid var(--warnung); color: var(--warnung); }

.kopfzeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: -0.6rem 0 1.2rem; }

.zahl { font-variant-numeric: tabular-nums; }
td.zahl { text-align: right; white-space: nowrap; }

.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; }
.filter input[type="search"] { flex: 2 1 14rem; width: auto; }
.filter select { flex: 1 1 9rem; width: auto; }

dl.felder { display: grid; grid-template-columns: 14rem 1fr; gap: 0.35rem 1rem; margin: 0.4rem 0 0.8rem; }
dl.felder dt { color: var(--leise); font-size: 0.9rem; }
dl.felder dd { margin: 0; }
.notiz { white-space: pre-line; border-left: 3px solid var(--linie); padding-left: 0.8rem; color: var(--leise); }
.pruefsumme { font-family: ui-monospace, monospace; }

.aktionsbereich { background: #f4f1ec; border: 1px solid var(--linie); border-radius: 6px; padding: 1rem 1.1rem 0.2rem; }
.aktionsgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0 1rem; align-items: start; }
.karte.aktion label:first-of-type { margin-top: 0; }
details.notausgang { margin: 0.2rem 0 1rem; }
details.notausgang > summary { cursor: pointer; color: var(--warnung); font-size: 0.9rem; }
details.notausgang[open] > summary { margin-bottom: 0.6rem; }

.vertragsformular fieldset, fieldset.rollen { border: 1px solid var(--linie); border-radius: 6px; padding: 0.4rem 1rem 1rem; margin: 0 0 1.2rem; background: var(--flaeche); }
.vertragsformular legend, fieldset.rollen legend { font-weight: 600; padding: 0 0.3rem; }
fieldset.neu { background: #f7f5f1; margin-top: 0.8rem; }
.wahl { display: block; }
.zeitraum { display: flex; gap: 0.5rem; }
.zeitraum input { flex: 0 0 6rem; }

table.dach th { width: 9rem; font-size: 0.95rem; text-transform: none; letter-spacing: 0; }
table.dach a.zahl { text-decoration: none; }
table.dach a.zahl.null { color: var(--leise); }
table.dach a.zahl strong { font-size: 1.15rem; }

form.kompakt label.inline { margin-right: 0.8rem; }
.karte.rolle { margin-bottom: 1rem; }
tr.inaktiv td { color: var(--leise); }

@media (max-width: 40rem) {
  dl.felder { grid-template-columns: 1fr; }
  dl.felder dt { margin-top: 0.4rem; }
  nav .wer { margin-left: 0; }
  th, td { padding: 0.45rem 0.4rem; }
}