/* Ein Stylesheet für alles. Systemschrift, viel Weißraum, wenig Farbe.
   Hell ist die Grundlage, Dunkel wird darüber gelegt — einmal automatisch
   nach Systemeinstellung, einmal über data-theme, wenn jemand umschaltet. */

:root {
  --grund: #ffffff;
  --flaeche: #f5f5f7;
  --flaeche-tief: #e8e8ed;
  --erhaben: #ffffff;
  --text: #1d1d1f;
  --text-leise: #6e6e73;
  --text-still: #86868b;
  --linie: #d2d2d7;
  --akzent: #0051ff;
  --akzent-tief: #0040cc;
  --warnung: #bf4800;
  --warnung-feld: rgba(191, 72, 0, 0.09);
  --neu: #d85a30;
  --angenommen: #ef9f27;
  --planung: #1d9e75;
  --fertig: #86868b;
  --abgelehnt: #c7c7cc;
  --schatten: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);

  /* EINE Rundung für freistehende Flächen. Liegt eine Rundung IN einer
     anderen, gilt die Schachtel-Formel: innen = außen − Abstand, mindestens
     6px — sonst wirkt die innere Ecke dicker als die äußere. Punkte bleiben
     Kreise. */
  --radius: 16px;

  /* Gestuft statt einstufig — ein Schatten aus einer Lage wirkt hart. */
  --schatten-knopf: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 0, 0, 0.07);
  --schatten-knopf-aktiv: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05),
    0 3px 6px rgba(0, 0, 0, 0.07), 0 6px 16px rgba(0, 0, 0, 0.1);

  --schwung: cubic-bezier(0.32, 0.72, 0, 1);
  /* Gespiegelte Kurve für Abgänge: beschleunigt hinaus, statt am Ende zu
     bremsen — der Rückweg ist das Spiegelbild des Hinwegs. */
  --schwung-hinaus: cubic-bezier(1, 0, 0.68, 0.28);

  /* Vier Dauern, mehr nicht: Eindrücken, Zustandswechsel, Auftritt,
     Themenwechsel. Vorher standen neun Streuwerte im Stylesheet. */
  --dauer-druck: 0.12s;
  --dauer-wechsel: 0.18s;
  --dauer-auftritt: 0.28s;
  --dauer-modus: 0.35s;

  /* Ein Fokusring für alles — vorher fünfmal von Hand in vier Stärken. */
  --fokus-ring: 0 0 0 4px color-mix(in srgb, var(--akzent) 25%, transparent);

  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #000000;
    --flaeche: #1c1c1e;
    --flaeche-tief: #2c2c2e;
    --erhaben: #2c2c2e;
    --text: #f5f5f7;
    --text-leise: #a1a1a6;
    --text-still: #8e8e93;
    --linie: #38383a;
    --akzent: #0051ff;
    --akzent-tief: #2f6dff;
    --warnung: #ff9f0a;
    --warnung-feld: rgba(255, 159, 10, 0.13);
    --abgelehnt: #48484a;
    --schatten: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --grund: #000000;
  --flaeche: #1c1c1e;
  --flaeche-tief: #2c2c2e;
  --erhaben: #2c2c2e;
  --text: #f5f5f7;
  --text-leise: #a1a1a6;
  --text-still: #8e8e93;
  --linie: #38383a;
  --akzent: #0051ff;
  --akzent-tief: #2f6dff;
  --warnung: #ff9f0a;
  --warnung-feld: rgba(255, 159, 10, 0.13);
  --abgelehnt: #48484a;
  --schatten: 0 1px 3px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dauer-modus) var(--schwung), color var(--dauer-modus) var(--schwung);
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Knöpfe sind zum Drücken da, nicht zum Markieren. Ohne das zieht ein
   etwas längerer Druck eine blaue Textmarkierung über die Beschriftung —
   auf dem Handy schon beim normalen Tippen. */
button, .gewerk, .einstellung, .segmente, .stufen, .auswahl label, .schieberkopf {
  user-select: none;
  -webkit-user-select: none;
}
button { -webkit-tap-highlight-color: transparent; }

/* Betonung läuft im ganzen System über 500, nie über den Browser-Default 700. */
b { font-weight: 500; }

/* Kleiner Text (13px und darunter) braucht leicht positives Tracking —
   das Gegenstück zum negativen Tracking der großen Überschriften. */
.marke, .hinweis, .unterlabel, .beschreibung, .zeitzeile label, .fehler,
.person-weg, .referenz-label, .leiste .zaehler, .spalte-titel, .karte-zeile,
.karte-marken, .leer, .blatt .ref, .blatt h3 { letter-spacing: 0.01em; }
.person-nummer { letter-spacing: 0.012em; }

/* Weniger Bewegung heißt nicht kein Feedback: Auftritte und Abgänge werden
   zu kurzen Blenden statt zu Bewegung. Der Universal-Selektor erfasst keine
   Pseudo-Elemente — die brauchen eigene Zeilen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .schieber::-webkit-slider-thumb { transition-duration: 0.01ms !important; }
  .schieber::-moz-range-thumb { transition-duration: 0.01ms !important; }

  @keyframes nur-blende { from { opacity: 0; } }
  @keyframes nur-blende-weg { to { opacity: 0; } }

  .merkzettel, .person, dialog[open], .schwebeleiste { animation: nur-blende 0.12s linear !important; }
  dialog[open]::backdrop { animation: nur-blende 0.12s linear !important; }
  .person.geht, .merkzettel.geht, .schwebeleiste.geht { animation: nur-blende-weg 0.12s linear forwards !important; }
  dialog.geht { animation: nur-blende-weg 0.12s linear forwards !important; }
  dialog.geht::backdrop { animation: nur-blende-weg 0.12s linear forwards !important; }
}

/* Wer Transparenz reduziert hat, bekommt Frost statt Glas. */
@media (prefers-reduced-transparency: reduce) {
  .glas { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
  dialog::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Wer mehr Kontrast braucht, bekommt echte Ränder statt leiser Grauflächen.
   Alle betroffenen Regeln tragen bereits border: 1px solid transparent —
   hier wird nur die Farbe gesetzt. */
@media (prefers-contrast: more) {
  input[type="text"], input[type="email"], input[type="date"], input[type="time"],
  input[type="number"], textarea, .karte, .auswahl label, .statuswahl button,
  .stufen button { border-color: var(--text-leise); }
  .segmente { border: 1px solid var(--text-leise); }
  .glas { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--text-leise); }
  .fliess, .karte-zeile { color: var(--text); }
}

/* --------------------------------------------------------------- Marke */

/* Das Zeichen trägt die Markenfarbe. Der Punkt im Kreis sitzt bei 49,96%
   der Zeichenhöhe — praktisch mittig, das Zeichen selbst hat aber unten
   mehr Masse als oben.

   Ausgerichtet wird am Punkt, nicht an der Kastenmitte: Eine Textzeile hat
   ihre optische Mitte unterhalb der Boxmitte, weil Ober- und Unterlängen
   sie nach unten ziehen. Ohne den Ausgleich steht der Punkt sichtbar zu
   hoch neben der Schrift. */
.zeichen {
  width: 34px;
  height: 34px;
  flex: none;
  display: block;
  color: var(--akzent);
  transform: translateY(0.055em);
}

.marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--text-leise);
  margin: 0 0 2.25rem;
}

/* Die Wortmarke: BEGA trägt das Haus, go trägt die Farbe. */
.wortmarke { font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.wortmarke i { font-style: normal; color: var(--akzent); }

/* In der Board-Leiste steht beides nebeneinander — dort ist die Höhe knapp. */
.leiste .marke { flex-direction: row; align-items: center; gap: 0.5rem; margin: 0; }
.leiste .zeichen { width: 26px; height: 26px; }

/* ----------------------------------------------------------------- Glas

   Milchglas wirkt nur, wenn etwas darunter durchscheint — also bei Dingen,
   die über dem Inhalt schweben. Wo nichts dahinterliegt, wäre es bloß eine
   graue Fläche mit Rechenaufwand.

   .glas setzt Fläche, Unschärfe und die feine Lichtkante. Wer die Unschärfe
   nicht kann, bekommt eine deckende Fläche — lesbar bleibt es immer. */

.glas {
  background: color-mix(in srgb, var(--grund) 70%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 0.5px solid color-mix(in srgb, var(--text) 10%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: var(--grund); }
}

/* ------------------------------------------------------ Hell und dunkel */

.modus {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--text-leise);
  cursor: pointer;
  transition: color var(--dauer-wechsel) var(--schwung), transform var(--dauer-wechsel) var(--schwung);
  z-index: 20;
}
/* Kleiner Chip, weniger Unschärfe — die vollbreite Leiste behält ihre 24px. */
.modus.glas {
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
}
/* Auf dem Board sitzt der Knopf in der Leiste statt am Fensterrand: fixiert
   trieb er auf breiten Bildschirmen weit vom übrigen Inhalt weg. Damit
   liegt er auch nicht mehr als zweite Glasschicht auf der Leiste. */
.breit .modus {
  position: static;
  width: 36px;
  height: 36px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  flex: none;
}
.breit .modus svg { width: 17px; height: 17px; }
.modus:hover { color: var(--text); transform: scale(1.06); }
/* Das Eindrücken folgt dem Finger sofort; nur das Loslassen federt weich. */
.modus:active {
  transform: scale(0.94);
  transition: color var(--dauer-wechsel) var(--schwung), transform 0.1s ease-out;
}
.modus svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity var(--dauer-wechsel) var(--schwung), transform var(--dauer-modus) var(--schwung); }
/* Das verschwindende Icon beschleunigt hinaus; nur das erscheinende federt ein. */
.modus:not([aria-pressed="true"]) .modus-mond,
.modus[aria-pressed="true"] .modus-sonne { transition-timing-function: var(--schwung-hinaus); }
.modus-mond { opacity: 0; transform: rotate(-60deg) scale(0.6); }
.modus-sonne { opacity: 1; }
.modus[aria-pressed="true"] .modus-sonne { opacity: 0; transform: rotate(60deg) scale(0.6); }
.modus[aria-pressed="true"] .modus-mond { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Grundriss */

.schmal .mitte { max-width: 34rem; margin: 0 auto; padding: clamp(3rem, 10vh, 6rem) 1.5rem 6rem; }

h1 {
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 0.75rem;
}

.fliess { font-size: 1.0625rem; color: var(--text-leise); margin: 0 0 2.5rem; max-width: 30rem; }
.hinweis { font-size: 0.8125rem; color: var(--text-still); margin: 0.75rem 0 0; }
.zurueck { margin-top: 3rem; font-size: 0.9375rem; }

/* -------------------------------------------------------------- Formular */

.feldgruppe { border-top: 1px solid var(--linie); padding: 1.5rem 0; }
.feldgruppe:last-of-type { border-bottom: 1px solid var(--linie); }

.feldgruppe > label,
.gruppentitel {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.unterlabel {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-still);
  margin-bottom: 0.375rem;
}

.beschreibung { font-size: 0.8125rem; color: var(--text-still); margin: -0.25rem 0 0.75rem; }
.unterblock { margin-top: 1.5rem; }

input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.6875rem 0.875rem;
  transition: border-color var(--dauer-wechsel) var(--schwung), background var(--dauer-wechsel) var(--schwung),
    box-shadow var(--dauer-wechsel) var(--schwung);
}

textarea { resize: vertical; min-height: 6rem; line-height: 1.45; }

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--akzent);
  background: var(--grund);
  box-shadow: var(--fokus-ring);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--warnung); }

.zeitzeile { display: flex; gap: 0.75rem; }
.zeitzeile > div { flex: 1; min-width: 0; }
.zeitzeile label { display: block; font-size: 0.8125rem; color: var(--text-still); margin-bottom: 0.375rem; }

.fehler { display: block; font-size: 0.8125rem; color: var(--warnung); margin-top: 0.4375rem; }
.fehler:empty { display: none; }

/* --------------------------------------------------------- Segmentwähler */

/* Der Innenabstand ist nicht Zierde: ohne ihn füllt der gewählte Knopf den
   Träger exakt aus und liegt als Klotz darauf, statt darin zu sitzen. Die
   innere Rundung folgt der Schachtel-Formel — 16px außen minus 3px Wand. */
.segmente {
  display: flex;
  gap: 2px;
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: 3px;
}
.segmente.schmal { display: inline-flex; }

.segmente button {
  flex: 1;
  appearance: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: max(calc(var(--radius) - 3px), 6px);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background var(--dauer-wechsel) var(--schwung), box-shadow var(--dauer-wechsel) var(--schwung),
    transform var(--dauer-druck) var(--schwung);
  white-space: nowrap;
}
.segmente.schmal button { flex: none; min-width: 3.25rem; }
.segmente button:not([aria-checked="true"]):not([aria-selected="true"]):hover {
  background: color-mix(in srgb, var(--flaeche-tief) 70%, transparent);
}
.segmente button:active { transform: scale(0.97); }
/* Radiogruppen melden ihre Wahl über aria-checked, Tabs über aria-selected.
   Beide sehen gleich aus, also hören beide dieselbe Regel — vorher blieb
   der aktive Tab unmarkiert. */
.segmente button[aria-checked="true"],
.segmente button[aria-selected="true"] {
  background: var(--erhaben);
  box-shadow: var(--schatten-knopf);
  font-weight: 500;
}
.segmente button:focus-visible {
  outline: none;
  box-shadow: var(--fokus-ring);
}

.ortdetail:not(:empty) { margin-top: 0.875rem; }

/* ------------------------------------------------------------ Merkzettel */

.merkzettel {
  background: var(--warnung-feld);
  color: var(--warnung);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.875rem;
  animation: einblenden var(--dauer-auftritt) var(--schwung);
}

.merkzettel.ruhig {
  background: var(--flaeche);
  color: var(--text-leise);
  animation: none;
}

/* Zurück auf demselben Pfad, auf dem er kam: nach oben hinaus. */
.merkzettel.geht { animation: hinausblenden var(--dauer-wechsel) var(--schwung-hinaus) forwards; }

@keyframes einblenden {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes hinausblenden {
  to { opacity: 0; transform: translateY(-4px); }
}

/* --------------------------------------------------------- Auswahlpillen */

.auswahl { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.auswahl label {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.4375rem 0.9375rem;
  cursor: pointer;
  user-select: none;
  transition: background var(--dauer-wechsel) var(--schwung), color var(--dauer-wechsel) var(--schwung),
    transform var(--dauer-druck) var(--schwung);
}
.auswahl label:hover { background: var(--flaeche-tief); }
.auswahl label:active { transform: scale(0.97); }

/* Das native Kästchen ist da, aber unsichtbar — die Pille selbst zeigt an,
   ob etwas gewählt ist. Tastatur und Screenreader funktionieren weiter. */
.auswahl input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }

.auswahl label:has(input:checked) {
  background: var(--text);
  color: var(--grund);
  border-color: transparent;
}
.auswahl label:has(input:focus-visible) {
  box-shadow: var(--fokus-ring);
}

/* -------------------------------------------------------------- Gewerke

   Eine Kachel je Gewerk. Ohne Einstellung ist sie still; sobald etwas
   eingestellt ist, trägt sie einen Haken und darunter die Symbole dessen,
   was gewählt wurde — sichtbar, ohne dass man das Popup öffnen muss. */

.gewerke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem;
}

.gewerk {
  appearance: none;
  font: inherit;
  text-align: left;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* Mittig, sonst klebt der Name in der leeren Kachel oben und die Kachel
     mit Symbolen darunter steht anders als die ohne. */
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.75rem;
  user-select: none;
  transition: background var(--dauer-wechsel) var(--schwung),
    border-color var(--dauer-wechsel) var(--schwung), transform var(--dauer-druck) var(--schwung);
}
.gewerk:hover { background: var(--flaeche-tief); }
.gewerk:active { transform: scale(0.98); }
.gewerk:focus-visible { outline: none; box-shadow: var(--fokus-ring); }

.gewerk[aria-pressed="true"] {
  background: color-mix(in srgb, var(--akzent) 8%, var(--flaeche));
  border-color: color-mix(in srgb, var(--akzent) 30%, transparent);
}

.gewerk-kopf { display: flex; align-items: center; gap: 0.5rem; }
.gewerk-name { font-size: 0.9375rem; font-weight: 500; flex: 1; }
.gewerk-sym { color: var(--text-leise); }
.gewerk[aria-pressed="true"] .gewerk-sym { color: var(--akzent); }

.gewerk-haken {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  flex: none;
}
.gewerk-haken .sym { width: 13px; height: 13px; stroke-width: 2.4; }

.gewerk-marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-leise);
}

.sym { width: 18px; height: 18px; flex: none; display: block; }

.marke-sym {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  background: var(--grund);
  border-radius: max(calc(var(--radius) - 0.875rem), 6px);
  padding: 0.1875rem 0.375rem;
}
.marke-sym b { font-weight: 500; font-variant-numeric: tabular-nums; }
.marke-sym .sym { width: 15px; height: 15px; }

/* ------------------------------------------------ Einstellungen im Popup */

.blatt-unter { font-size: 0.875rem; color: var(--text-leise); margin: 0 0 1.5rem; }
.einstellungen { display: flex; flex-direction: column; gap: 0.5rem; }

.einstellung {
  appearance: none;
  font: inherit;
  text-align: left;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  transition: background var(--dauer-wechsel) var(--schwung),
    border-color var(--dauer-wechsel) var(--schwung), transform var(--dauer-druck) var(--schwung);
}
.einstellung:hover { background: var(--flaeche-tief); }
.einstellung:active { transform: scale(0.99); }
.einstellung:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.einstellung-name { flex: 1; font-size: 0.9375rem; }
.einstellung-sym { color: var(--text-leise); }

.einstellung[aria-pressed="true"] {
  background: color-mix(in srgb, var(--akzent) 10%, var(--flaeche));
  border-color: color-mix(in srgb, var(--akzent) 35%, transparent);
}
.einstellung[aria-pressed="true"] .einstellung-sym { color: var(--akzent); }

/* Der Haken ist immer da und belegt seinen Platz — sonst rutscht die Zeile
   beim Anhaken. Sichtbar wird er nur im gewählten Zustand. */
.einstellung-haken {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  flex: none;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dauer-wechsel) var(--schwung), transform var(--dauer-wechsel) var(--schwung);
}
.einstellung-haken .sym { width: 14px; height: 14px; stroke-width: 2.4; }
.einstellung[aria-pressed="true"] .einstellung-haken { opacity: 1; transform: none; }

.einstellung-zahl { padding: 0.25rem 0; }
.einstellung-wahl .gruppentitel { margin-bottom: 0.625rem; }
.stufe-sym { color: var(--text-leise); flex: none; }
.stufen button[aria-checked="true"] .stufe-sym { color: var(--akzent); }

.blattfuss .loeschen { color: var(--warnung); }

/* ---------------------------------------------------------- Lichtstufen */

.stufen { display: flex; flex-direction: column; gap: 0.5rem; }

.stufen button {
  appearance: none;
  font: inherit;
  text-align: left;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: background var(--dauer-wechsel) var(--schwung), border-color var(--dauer-wechsel) var(--schwung),
    transform var(--dauer-druck) var(--schwung);
}
.stufen button:hover { background: var(--flaeche-tief); }
.stufen button:active { transform: scale(0.99); }

/* Der Ring füllt sich über einen inneren Schatten statt über die Randbreite:
   das Außenmaß bleibt konstant 18px und der Text daneben steht still —
   animierte border-width wäre Layout in jedem Frame und schob den Namen
   sichtbar zur Seite. */
.stufen button::before {
  content: "";
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--linie);
  box-shadow: inset 0 0 0 0 var(--akzent);
  flex: none;
  transition: border-color var(--dauer-wechsel) var(--schwung), box-shadow var(--dauer-wechsel) var(--schwung);
}
.stufen button[aria-checked="true"] {
  background: var(--erhaben);
  border-color: var(--akzent);
  box-shadow: var(--schatten-knopf);
}
.stufen button[aria-checked="true"]::before {
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 4px var(--akzent);
}
.stufen button:focus-visible {
  outline: none;
  box-shadow: var(--fokus-ring);
}
.stufe-name { font-size: 0.9375rem; font-weight: 500; }

/* ------------------------------------------------------------- Schieber */

/* Feste Höhe, damit der Wechsel zwischen "keine" und einer Zahl den
   Schieber darunter nicht verschiebt. Ohne das ruckelt beim ersten
   Zug die ganze Zeile um ein paar Pixel nach unten. */
.schieberkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rem;
  margin-bottom: 0.625rem;
}
.schieberkopf label { font-size: 0.9375rem; font-weight: 500; margin: 0; }

.schieberwert {
  font-size: 1.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 2rem;
  min-width: 2ch;
  text-align: right;
}
/* "keine" darf kleiner sein als die Zahl — die feste Kopfhöhe darüber fängt
   den Größenwechsel ab, sonst würde der Schieber wieder springen. Der Puls
   läuft über die Web-Animations-API in formular.js: ohne festen Startframe
   übernimmt er beim schnellen Ziehen den laufenden Wert. */
.schieberwert.leise {
  color: var(--text-still);
  font-weight: 400;
  font-size: 0.9375rem;
}

/* Heller Träger, darin eine dünne Spur und ein Knopf als abgerundetes
   Rechteck — nicht die Spur selbst ist die Kapsel, sondern das, worin sie
   liegt. Der Wert steht groß daneben, deshalb keine Zahlenreihe. */
/* Die Spur ist ein echtes Element, kein Browser-Pseudoelement: nur so
   lässt sie sich exakt setzen. Sie hat rundum denselben Abstand zum
   Trägerrand — 17px oben, unten, links und rechts.

   Der Knopf läuft genau über die Spurlänge: seine Mitte startet am
   Spuranfang und endet am Spurende. Dadurch braucht die Füllung keine
   Korrektur um die halbe Knopfbreite, sie ist schlicht der Anteil. */
.schieberbahn {
  position: relative;
  height: 44px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  background: var(--flaeche);
  border-radius: var(--radius);
  /* Ohne das markiert der Browser beim Ziehen den Text ringsum blau. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.spur {
  position: absolute;
  left: 17px;
  right: 17px;
  top: 17px;
  height: 10px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--text) 13%, transparent);
  overflow: hidden;
}
.spur i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--akzent);
  transition: width var(--dauer-druck) linear;
}

.schieber {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

/* Die sichtbare Spur liegt darunter — die native bleibt unsichtbar und
   dient nur noch als Laufweg für den Knopf. Border und Rundung müssen
   ebenfalls weg: Safari zeichnet der nativen Spur sonst einen hellen
   Kasten, der die eigene Spur verdeckt. */
.schieber::-webkit-slider-runnable-track {
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.schieber::-moz-range-track {
  height: 32px;
  background: transparent;
  border: none;
}
.schieber::-moz-range-progress { height: 0; background: transparent; }

/* Auch das Element selbst darf nichts zeichnen — Safari gibt Range-Feldern
   sonst einen eigenen Rahmen, bevor man sie anfasst. */
.schieber { border: none; box-shadow: none; }

/* Der Griff ist eine Pille: voll gerundet, schmaler als hoch. */
.schieber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 32px;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: var(--schatten-knopf);
  margin-top: 0;
  transition: transform var(--dauer-wechsel) var(--schwung), box-shadow var(--dauer-wechsel) var(--schwung);
}
.schieber::-moz-range-thumb {
  width: 24px;
  height: 32px;
  border: none;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: var(--schatten-knopf);
}
.schieber:active::-webkit-slider-thumb {
  transform: scale(1.06);
  box-shadow: var(--schatten-knopf-aktiv);
  transition-duration: 0.1s;
}

/* Kein Rahmen um den Schieber — weder bei :focus noch bei :focus-visible.
   Safari setzt seinen eigenen Ring über :focus-visible, und der greift dort
   auch nach einem Mausklick; eine Regel nur für :focus lässt ihn stehen. */
.schieber:focus,
.schieber:focus-visible { outline: none; box-shadow: none; }

/* Tastaturfokus zeigt der Knopf selbst: etwas größer und deutlicher
   abgesetzt. Das ist sichtbar, ohne einen blauen Kasten zu ziehen. */
.schieber:focus-visible::-webkit-slider-thumb {
  transform: scale(1.06);
  box-shadow: var(--schatten-knopf-aktiv);
}
.schieber:focus-visible::-moz-range-thumb {
  transform: scale(1.06);
  box-shadow: var(--schatten-knopf-aktiv);
}

/* -------------------------------------------------------- Ansprechpartner */

.person {
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.625rem;
  animation: hereinschieben var(--dauer-auftritt) var(--schwung);
}
.person.geht { animation: hinausschieben var(--dauer-druck) var(--schwung-hinaus) forwards; }

@keyframes hereinschieben {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes hinausschieben {
  to { opacity: 0; transform: translateY(-6px) scale(0.985); }
}

.person-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.person-nummer { font-size: 0.75rem; color: var(--text-still); font-weight: 500; }

.person-weg {
  appearance: none;
  font: inherit;
  font-size: 0.8125rem;
  background: none;
  border: none;
  color: var(--text-still);
  cursor: pointer;
  /* Trefferfläche auf ~44px, ohne das Layout zu verschieben: der Knopf hat
     keinen sichtbaren Hintergrund, das Polster ist unsichtbar. */
  padding: 0.75rem 0.625rem;
  margin: -0.75rem -0.625rem;
  transition: color var(--dauer-wechsel) var(--schwung), opacity var(--dauer-wechsel) var(--schwung);
}
.person-weg:hover { color: var(--warnung); }

/* In der Karte geschachtelt: 16px außen − 1rem Abstand → Mindestwert 6px. */
.person input {
  background: var(--grund);
  margin-bottom: 0.5rem;
  border-radius: max(calc(var(--radius) - 1rem), 6px);
}
.person input:last-of-type { margin-bottom: 0; }
.person .fehler { margin-top: -0.125rem; margin-bottom: 0.5rem; }

.dazu {
  appearance: none;
  font: inherit;
  font-size: 0.9375rem;
  background: none;
  border: none;
  color: var(--akzent);
  cursor: pointer;
  padding: 0.625rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: opacity var(--dauer-wechsel) var(--schwung);
}
.dazu span { font-size: 1.125rem; line-height: 1; }
.dazu:hover { text-decoration: underline; }

/* Textknöpfe drücken sichtbar ein — sofort, nicht erst beim Loslassen. */
.dazu:active, .person-weg:active, .blattfuss .schlicht:active {
  opacity: 0.5;
  transition-duration: 0.1s;
}

/* --------------------------------------------------------------- Knöpfe */

.knopf {
  appearance: none;
  font: inherit;
  font-size: 1.0625rem;
  color: #fff;
  background: var(--akzent);
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  transition: background var(--dauer-wechsel) var(--schwung), opacity var(--dauer-wechsel) var(--schwung),
    transform var(--dauer-druck) var(--schwung);
}
.knopf:hover { background: var(--akzent-tief); }
.knopf:active { transform: scale(0.98); }
.knopf:disabled { opacity: 0.45; cursor: default; transform: none; }

.absenden { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.absenden .hinweis { margin: 0; }

/* Schwebt erst auf, wenn der echte Knopf aus dem Bild gescrollt ist —
   bei einem langen Formular sonst eine lange Reise nach unten. */
.schwebeleiste {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  animation: leisteherein var(--dauer-auftritt) var(--schwung);
  max-width: calc(100vw - 2rem);
}
.schwebeleiste[hidden] { display: none; }
/* Text auf Glas: mehr Kontrast und Gewicht, sonst säuft er im Milchigen ab. */
.schwebetext {
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* In der Leiste geschachtelt: 16px außen − 7px Randabstand = 9px innen. */
.schwebeleiste .knopf {
  padding: 0.625rem 1.375rem;
  font-size: 1rem;
  border-radius: max(calc(var(--radius) - 0.4375rem), 6px);
}

/* Glas materialisiert: Scale und Opacity zusammen, hinaus auf demselben Pfad. */
.schwebeleiste.geht { animation: leistehinaus var(--dauer-wechsel) var(--schwung-hinaus) forwards; }

@keyframes leisteherein {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%); }
}
@keyframes leistehinaus {
  to { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.96); }
}

#bottest:not(:empty) { margin-top: 2rem; }

/* ----------------------------------------------------- Bestätigungsseite */

.referenz {
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
}
.referenz-label { display: block; font-size: 0.8125rem; color: var(--text-still); margin-bottom: 0.25rem; }
/* 22px ist Displaygröße — positives Tracking gehört zu kleinem Text. */
.referenz-nummer { font-size: 1.375rem; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* Bewusst kein Nachbau von Apples Wallet-Badge: eigene Marke, eigener Knopf.
   Umgekehrter Kontrast, damit er in beiden Modi als Aktion gelesen wird. */
.wallet-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--grund);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: opacity var(--dauer-wechsel) var(--schwung),
    transform var(--dauer-druck) var(--schwung),
    box-shadow var(--dauer-wechsel) var(--schwung);
}
.wallet-knopf:hover { opacity: 0.85; }
.wallet-knopf:active { transform: scale(0.97); }
.wallet-knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.wallet-zeichen { width: 1.125rem; height: 1.125rem; flex: none; }

/* Ein Feld, das etwas festhält statt etwas abzufragen — es sieht deshalb
   auch nicht aus wie eines, in das man tippen könnte. */
.feld.fest,
input.fest {
  background: transparent;
  border-color: transparent;
  color: var(--text-still);
  cursor: default;
}
input.fest:focus { outline: none; box-shadow: none; }

/* ------------------------------------------------------------ Standseite */

.stand-marke {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: max(calc(var(--radius) - 8px), 6px);
  background: var(--flaeche);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-leise);
}
/* Der Stand trägt Farbe, aber leise — die Marke steht über der Überschrift
   und soll sie nicht überstrahlen. */
.stand-marke.ja {
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
  color: var(--akzent);
}
.stand-marke.nein {
  background: color-mix(in srgb, var(--warnung) 12%, transparent);
  color: var(--warnung);
}

.stand-block {
  margin-top: 2rem;
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 0.5rem 1.25rem;
}
.stand-zeile {
  display: flex;
  gap: 1rem;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
}
.stand-zeile + .stand-zeile { border-top: 1px solid var(--linie); }
.stand-label { flex: none; width: 6.5rem; color: var(--text-still); }
.stand-wert { flex: 1; }

.stand-ueberschrift {
  margin: 2.5rem 0 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Eigene Namen statt .person: Das ist im Formular schon der Kontaktblock mit
   Fläche und Rundung — hier soll es eine schlichte Liste sein. */
.personen { list-style: none; margin: 0; padding: 0; }
.eingetragen {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
}
.eingetragen + .eingetragen { border-top: 1px solid var(--linie); }
.eingetragen-rolle { margin-left: auto; font-size: 0.8125rem; color: var(--text-still); }
/* Die eigene Zeile bekommt den Akzent — in einer Liste von sechs Namen ist
   "welcher bin ich" die erste Frage. */
.eingetragen.du .eingetragen-name { font-weight: 500; color: var(--akzent); }

.austragen { margin-top: 2.5rem; }
.austragen .fliess { font-size: 0.875rem; }
/* Leise gesetzt: Austragen ist erlaubt, aber nichts, wozu die Seite drängen
   soll. Deshalb Flächenfarbe statt Akzent, nur die Schrift trägt das Rot. */
.knopf.gefahr {
  margin-top: 1rem;
  background: var(--flaeche);
  color: var(--warnung);
}
.knopf.gefahr:hover { background: color-mix(in srgb, var(--flaeche) 82%, var(--warnung) 18%); }

.fehlerliste { margin: 0 0 1rem; padding-left: 1.125rem; color: var(--text-leise); font-size: 0.9375rem; }
.fehlerliste li { margin-bottom: 0.375rem; }

/* ----------------------------------------------------------------- Board */

.breit .mitte { max-width: 76rem; margin: 0 auto; padding: 1.75rem 1.5rem 6rem; }

/* Die Leiste bleibt oben stehen; die Karten ziehen darunter durch und
   scheinen milchig hindurch. Die Trennung nach unten erscheint erst, wenn
   wirklich Inhalt darunter gescrollt ist — keine permanente Haarlinie. */
.leiste {
  position: sticky;
  top: 0;
  z-index: 10;
  border: 0;
  transition: box-shadow var(--dauer-wechsel) var(--schwung);
}
.leiste.getrennt {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.07);
}
.leiste-innen {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.625rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.leiste .marke { margin: 0; color: var(--text-leise); }
.leiste .marke span { font-weight: 500; letter-spacing: 0.01em; }
.leiste-rechts { display: flex; align-items: center; gap: 1rem; flex: none; }
.leiste .zaehler { font-size: 0.8125rem; color: var(--text-leise); font-weight: 500; white-space: nowrap; }

.boardtitel { font-size: 1.75rem; margin: 0 0 1.5rem; }

.warnbalken {
  background: var(--warnung-feld);
  border-radius: var(--radius);
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  color: var(--warnung);
  margin-bottom: 2rem;
}

/* Der Umschalter in der Leiste bleibt schmal — er soll die Marke nicht
   verdrängen und auf schmalen Bildschirmen umbrechen dürfen. */
.ansichten { flex: none; }
.ansichten button { padding: 0.4375rem 1rem; font-size: 0.875rem; }

/* ------------------------------------------------------- Posteingang */

.abschnitt { margin-bottom: 2.5rem; }
.abschnitt-titel {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
.abschnitt-titel .anzahl {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-still);
  background: var(--flaeche);
  border-radius: 100px;
  padding: 0.0625rem 0.5rem;
}

.stapel { display: flex; flex-direction: column; gap: 0.5rem; }

/* Eine Zeile trägt links die Anfrage zum Öffnen, rechts die Entscheidung.
   Beides im selben Kasten, damit klar ist, worauf sich die Knöpfe beziehen. */
.zeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  transition: background var(--dauer-wechsel) var(--schwung);
  flex-wrap: wrap;
}
.zeile:hover { background: var(--flaeche-tief); }
.zeile.vorbei { opacity: 0.6; }

.zeile-oeffnen {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  flex: 1;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  line-height: 1.4;
}
.zeile-oeffnen:focus-visible { outline: none; box-shadow: var(--fokus-ring); border-radius: 8px; }
.zeile-kopf { display: flex; align-items: center; gap: 0.5rem; }
.zeile-titel { font-size: 0.9375rem; font-weight: 500; }
.zeile-zeile { font-size: 0.8125rem; color: var(--text-leise); letter-spacing: 0.01em; }
.zeile-marken { font-size: 0.8125rem; color: var(--text-still); letter-spacing: 0.01em; }

.zeile-aktionen { display: flex; align-items: center; gap: 0.5rem; flex: none; }
/* Beide Entscheidungen gleich breit — sonst wiegt die längere Beschriftung
   schwerer als die andere, obwohl beide gleichrangig sind. */
.zeile-aktionen .knopf { min-width: 6.75rem; }
.knopf.klein { padding: 0.5rem 1rem; font-size: 0.875rem; }

.erledigt { margin-top: 1rem; }
.erledigt summary {
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-leise);
  padding: 0.5rem 0;
  user-select: none;
}
.erledigt summary::-webkit-details-marker { color: var(--text-still); }
.erledigt .stapel { margin-top: 0.75rem; }

/* --------------------------------------------------------- Kalender */

.kalenderkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.kalenderkopf .abschnitt-titel { margin: 0; text-transform: capitalize; }
.kalender-nav { display: flex; gap: 0.25rem; }
.kalender-nav .schlicht {
  appearance: none;
  font: inherit;
  font-size: 0.875rem;
  background: var(--flaeche);
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius);
  padding: 0.4375rem 0.875rem;
  min-width: 2.75rem;
  transition: background var(--dauer-wechsel) var(--schwung);
}
.kalender-nav .schlicht:hover { background: var(--flaeche-tief); }

.wochentage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-still);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.wochentage span { padding-left: 0.25rem; }

.monat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.375rem; }

.tag {
  min-height: 5.5rem;
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.tag.leer-tag { background: transparent; }
.tag.vergangen { opacity: 0.55; }
.tag.heute { border-color: var(--akzent); }
.tag-zahl {
  font-size: 0.75rem;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
  padding: 0.125rem 0.25rem;
}
.tag.heute .tag-zahl { color: var(--akzent); font-weight: 600; }

.tag-event {
  appearance: none;
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
  background: var(--grund);
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: max(calc(var(--radius) - 0.375rem), 6px);
  padding: 0.25rem 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background var(--dauer-wechsel) var(--schwung);
}
.tag-event:hover { background: var(--flaeche-tief); }
.tag-event .punkt { width: 6px; height: 6px; }

/* Auf schmalen Bildschirmen wird aus dem Raster eine Liste — sieben
   Spalten mit Inhalt sind auf einem Handy nicht lesbar. */
@media (max-width: 40rem) {
  .wochentage { display: none; }
  .monat { grid-template-columns: 1fr; }
  .tag { min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .tag:not(:has(.tag-event)) { display: none; }
  .tag.leer-tag { display: none; }
}

.spalte-titel { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-leise); margin-bottom: 0.75rem; font-weight: 500; }
/* Die Farbe kommt aus dem Abstand zum Veranstaltungstag, nicht aus einem
   gepflegten Feld: was näher rückt, wird kräftiger. Abgelehntes und
   Gelaufenes tritt zurück. */
.punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.punkt.jetzt { background: var(--neu); }
.punkt.bald { background: var(--angenommen); }
.punkt.geplant { background: var(--akzent); }
.punkt.fern { background: var(--planung); }
.punkt.vorbei { background: var(--fertig); }
.punkt.abgelehnt { background: var(--abgelehnt); }

/* Die Dringlichkeit trägt allein der Punkt vor dem Titel — eine farbige
   Kante an der Zeile war zu laut für eine Liste, in der ohnehin fast alles
   irgendwann ansteht. */
.zeile.vorbei, .zeile.abgelehnt { opacity: 0.55; }

.tag-event.jetzt { background: color-mix(in srgb, var(--neu) 14%, var(--grund)); }
.tag-event.bald { background: color-mix(in srgb, var(--angenommen) 16%, var(--grund)); }
.tag-event.abgelehnt { opacity: 0.5; text-decoration: line-through; }

/* Die Entscheidung im Blatt: zwei gleich große Knöpfe, keine Pillenreihe.
   "still" ist der ungewählte Zustand — sichtbar, aber ohne Anspruch. */
.entscheidung { display: flex; gap: 0.5rem; }
.entscheidung .knopf { flex: 1; }
.knopf.still { background: var(--flaeche); color: var(--text); }
.knopf.still:hover { background: var(--flaeche-tief); }
.knopf.warnend { background: var(--warnung); }
.knopf.warnend:hover { background: var(--warnung); opacity: 0.88; }

.karte {
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: background var(--dauer-wechsel) var(--schwung), transform var(--dauer-druck) var(--schwung);
  text-align: left;
  width: 100%;
  font: inherit;
  /* Dichte Info-UI: engere Zeilen als im Fließtext. */
  line-height: 1.4;
  color: inherit;
  display: block;
}
.karte:hover { background: var(--flaeche-tief); }
.karte:active { transform: scale(0.99); }
.karte-titel { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; margin-bottom: 0.1875rem; }
.karte-zeile { font-size: 0.8125rem; color: var(--text-leise); }
.karte-marken { font-size: 0.8125rem; color: var(--text-still); margin-top: 0.375rem; }

.leer { font-size: 0.8125rem; color: var(--text-still); padding: 0.75rem 0; }

/* ----------------------------------------------------------- Detailblatt */

/* Das Blatt liegt über dem Board — im Dunkeln heller als der Grund, sonst
   wäre Schwarz auf Schwarz nicht zu unterscheiden. Der Hintergrund wird
   zusätzlich weichgezeichnet, damit klar ist, was gerade dran ist. */
dialog {
  border: none;
  border-radius: var(--radius);
  background: var(--erhaben);
  color: var(--text);
  padding: 0;
  max-width: 34rem;
  width: calc(100vw - 2rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.14);
  animation: blattherein var(--dauer-auftritt) var(--schwung);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Der Scrim gehört zum Übergang: er blendet mit dem Blatt ein statt im
   ersten Frame auf voller Stärke zu stehen. */
dialog[open]::backdrop { animation: scrimherein var(--dauer-auftritt) var(--schwung); }

/* Und hinaus auf demselben Pfad, auf dem beides kam — close() erst nach
   animationend, sonst schneidet display:none alles hart ab. */
dialog.geht { animation: blatthinaus var(--dauer-wechsel) var(--schwung-hinaus) forwards; }
dialog.geht::backdrop { animation: scrimhinaus var(--dauer-wechsel) var(--schwung-hinaus) forwards; }

@keyframes blattherein {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes blatthinaus {
  to { opacity: 0; transform: translateY(8px) scale(0.985); }
}
@keyframes scrimherein { from { opacity: 0; } }
@keyframes scrimhinaus { to { opacity: 0; } }

/* Der modale Task schiebt das Board leicht zurück — die Bühne gehört dem Blatt. */
.breit main { transition: transform var(--dauer-auftritt) var(--schwung); }
body.blatt-offen main { transform: scale(0.985); }

/* Im Dunkeln trägt der Schatten nicht — dort zieht eine feine Kante die Grenze.
   Außerdem rücken die Flächen im Blatt eine Stufe höher, sonst lägen die
   Kacheln dunkler als das Blatt, auf dem sie liegen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) dialog {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.09);
    --flaeche: #3a3a3c;
    --flaeche-tief: #48484a;
    --linie: #48484a;
  }
}
:root[data-theme="dark"] dialog {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.09);
  --flaeche: #3a3a3c;
  --flaeche-tief: #48484a;
  --linie: #48484a;
}

.blatt { padding: 1.75rem; }
.blatt h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.blatt .ref { font-size: 0.8125rem; color: var(--text-still); font-variant-numeric: tabular-nums; margin: 0 0 1.5rem; }

.daten { border-top: 1px solid var(--linie); margin: 0; }
.daten div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--linie); font-size: 0.9375rem; }
.daten dt { color: var(--text-still); flex: none; }
.daten dd { margin: 0; text-align: right; }

.blatt h3 { font-size: 0.8125rem; font-weight: 500; color: var(--text-leise); margin: 1.75rem 0 0.625rem; }

.leute { display: flex; flex-direction: column; gap: 0.5rem; }
.leute .wer {
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
}
.leute .wer-name { font-weight: 500; }
.leute .wer-rolle { color: var(--text-still); }

/* ---------------------------------------------------------- Zeitstrahl

   Der Verlauf einer Anfrage als Spur von oben nach unten: eine Linie, an
   der die Ereignisse hängen. Die Linie läuft zwischen den Punkten durch,
   nicht dahinter — deshalb sitzt sie am Listenelement, nicht als
   durchgehender Balken im Hintergrund. */

.verlauf { list-style: none; margin: 0; padding: 0; }

.schritt {
  position: relative;
  padding: 0 0 1.125rem 1.625rem;
}
/* Die Linie endet beim letzten Eintrag — sonst zeigt sie ins Nichts. */
.schritt:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.125rem;
  bottom: -0.125rem;
  width: 1.5px;
  background: var(--linie);
}
.schritt:last-child { padding-bottom: 0; }

.schritt-punkt {
  position: absolute;
  left: 0;
  top: 0.3125rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--linie);
  box-shadow: 0 0 0 3px var(--erhaben);
}
/* Die Art färbt den Punkt: Eingang und Antwort kommen von außen,
   Statuswechsel und Mail gehen von euch aus. */
.schritt.eingang .schritt-punkt { background: var(--neu); }
.schritt.status .schritt-punkt { background: var(--akzent); }
.schritt.mail .schritt-punkt { background: var(--planung); }
.schritt.antwort .schritt-punkt { background: var(--angenommen); }

.schritt-inhalt { display: flex; flex-direction: column; gap: 0.0625rem; }
.schritt-titel { font-size: 0.9375rem; font-weight: 500; }
.schritt-zeit { font-size: 0.75rem; color: var(--text-still); letter-spacing: 0.01em; }
.schritt-detail { font-size: 0.8125rem; color: var(--text-leise); letter-spacing: 0.01em; }
.schritt-wer { font-size: 0.75rem; color: var(--text-still); letter-spacing: 0.01em; }

.verlauf-neu { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; }
.verlauf-neu input { flex: 1; font-size: 0.9375rem; }

.statuswahl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.statuswahl button {
  appearance: none;
  font: inherit;
  font-size: 0.875rem;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.4375rem 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  transition: background var(--dauer-wechsel) var(--schwung), transform var(--dauer-druck) var(--schwung);
}
.statuswahl button:hover { background: var(--flaeche-tief); }
.statuswahl button:active { transform: scale(0.97); }
.statuswahl button[aria-checked="true"] { background: var(--text); color: var(--grund); }
.statuswahl button[aria-checked="true"] .punkt { outline: 2px solid var(--grund); }

/* Unsichtbare Treffererweiterung auf ~44px — die kompakte Optik bleibt. */
.segmente button, .auswahl label, .statuswahl button { position: relative; }
.segmente button::after, .auswahl label::after, .statuswahl button::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

/* Der Weg zurück steht am Ende des Blattes, abgesetzt durch eine Linie:
   selten gebraucht, aber auffindbar — und nicht in Reichweite der Knöpfe,
   die man ständig benutzt. */
.rueckweg {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}
.rueckweg .schlicht {
  appearance: none;
  font: inherit;
  font-size: 0.9375rem;
  background: none;
  border: none;
  color: var(--akzent);
  cursor: pointer;
  padding: 0.625rem 0.75rem;
  margin: -0.625rem -0.75rem;
  border-radius: var(--radius);
  transition: background var(--dauer-wechsel) var(--schwung), opacity var(--dauer-wechsel) var(--schwung);
}
.rueckweg .schlicht:hover { background: var(--flaeche); }
.rueckweg .schlicht:active { opacity: 0.5; transition-duration: 0.1s; }
.rueckweg .loeschen { color: var(--warnung); }

.blattfuss { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.blattfuss .schlicht {
  appearance: none;
  font: inherit;
  font-size: 0.9375rem;
  background: none;
  border: none;
  color: var(--akzent);
  cursor: pointer;
  padding: 0.75rem 0.625rem;
  margin: -0.75rem -0.625rem;
  transition: opacity var(--dauer-wechsel) var(--schwung);
}
.blattfuss .schlicht:hover { text-decoration: underline; }