/* Home – Gestaltung.
 *
 * Svens Vorlage gibt die Anordnung vor, nicht das Aussehen: "das nochmal
 * moderner besser machen und nicht einfach kopieren". Übernommen ist der
 * Aufbau – Karte oben, Abschnitte mit Zähler, drei Zeilen, "N weitere".
 * Nicht übernommen: das Blau, die Rundungen, die Symbolsprache. Alle Werte
 * kommen aus styles.css; hier steht kein einziger neuer Farbwert ausser dem
 * Verlauf der Dienstkarte, und der ist aus --accent gerechnet.
 *
 * Eigene Datei, weil an styles.css die andere Spur arbeitet.
 */

.heim {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Dieselbe Breite wie die übrigen Ansichten. Sven hat gesagt, es sei
     "irgendwie verschoben" – der Grund war, dass jede Ansicht ihre eigene
     Breite mitbrachte. Diese Zahl steht darum auch in seite.css und gilt
     für alle. */
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.heim-laedt {
  padding: 28px 4px;
  color: var(--text-muted);
  font-size: var(--fs-lg);
}

/* ------------------------------------------------------ Nächster Dienst */

/* Die einzige farbige Fläche der Seite. Sie trägt die Antwort auf "was ist
   jetzt dran" – und weil sie die einzige ist, muss niemand suchen, wo er
   hinschauen soll. Zwei farbige Karten wären zwei Antworten. */
.heim-dienst {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  color: var(--accent-ink);
  background: linear-gradient(135deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 78%, #000) 100%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform var(--dur-schnell) var(--easing), box-shadow var(--dur-schnell) var(--easing);
}
.heim-dienst:hover { transform: translateY(-2px); }
.heim-dienst:focus-visible { outline: 3px solid var(--accent-fg); outline-offset: 3px; }

.heim-dienst-oben {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .82;
}
.heim-dienst-zeile { display: flex; align-items: center; gap: 12px; }
.heim-dienst-zeichen {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, .18);
}
.heim-dienst-zeichen svg { width: 20px; height: 20px; }
.heim-dienst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.heim-dienst-titel {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heim-dienst-ort { font-size: var(--fs-md); opacity: .85; }

/* Das Zeitfenster in einem eigenen Feld: Es ist die Zahl, die man sich
   merkt, und es soll auch beim Überfliegen als Zahl erkennbar sein. */
.heim-dienst-zeit {
  align-self: stretch;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Abschnitt */

.heim-block {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}

/* JEDER ABSCHNITT TRÄGT SEINEN EIGENEN TON — sehr leise.
 *
 * Sven, nachdem die Rapportkarten ihre Prioritätsfarbe bekommen hatten:
 * "hier auch noch farblicher anpassen wie bei rapporte".
 *
 * Dieselbe Rechnung wie dort, dieselben neun Prozent. Die Zuordnung ist
 * nicht Dekoration, sie ist eine Aussage:
 *
 *   Chat            das Violett des Hauses — Kollegen, keine Arbeit
 *   Unterlagen      Grün — es liegt bereit, nichts ist schiefgegangen
 *   Offene Rapporte Orange — offene Arbeit, aber keine Frist
 *   Wiedervorlagen  Gelb — hier läuft eine Frist, und das darf man sehen
 *
 * Wer morgens um fünf auf die Startseite schaut, soll die Abschnitte am Ton
 * unterscheiden, bevor er die Überschriften liest. Die Farbe steht dabei nie
 * allein: Zeichen und Überschrift bleiben und tragen dieselbe Aussage.
 *
 * HELLER MODUS: neun Prozent der reinen Farbe. Nachgemessen: gedämpfter Text
 * zwischen 4,96 und 5,32:1, Haupttext über 14:1. */
:root:not([data-theme="dark"]) .heim-block[data-art="chat"] {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
}
:root:not([data-theme="dark"]) .heim-block[data-art="unterlage"] {
  background: color-mix(in srgb, var(--good) 9%, var(--surface-2));
}
:root:not([data-theme="dark"]) .heim-block[data-art="rapport"] {
  background: color-mix(in srgb, var(--serious) 9%, var(--surface-2));
}
:root:not([data-theme="dark"]) .heim-block[data-art="uhr"] {
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-2));
}

/* DUNKELMODUS: Farbe erst abdunkeln, dann auftragen.
 *
 * Dieselbe Rechnung wie bei den Rapportkarten, und dort steht die lange
 * Begründung (styles.css bei .ritem). Kurz: Im Dunkelmodus ist der Text hell
 * und die Fläche dunkel. Jede reine Farbe ist heller als --surface-2 —
 * auftragen hiesse aufhellen, und der gedämpfte Text fiele unter 4,5:1.
 * Darum wird die Farbe zuerst gegen Schwarz gemischt und erst dann
 * aufgetragen: Farbstich ja, Helligkeit nein.
 *
 * Nachgerechnet: gedämpfter Text 4,53 bis 4,79:1, Haupttext über 14:1. */
:root[data-theme="dark"] .heim-block[data-art="chat"] {
  background: color-mix(in srgb, color-mix(in srgb, var(--accent) 28%, #000) 22%, var(--surface-2));
}
:root[data-theme="dark"] .heim-block[data-art="unterlage"] {
  background: color-mix(in srgb, color-mix(in srgb, var(--good) 28%, #000) 22%, var(--surface-2));
}
:root[data-theme="dark"] .heim-block[data-art="rapport"] {
  background: color-mix(in srgb, color-mix(in srgb, var(--serious) 28%, #000) 22%, var(--surface-2));
}
:root[data-theme="dark"] .heim-block[data-art="uhr"] {
  background: color-mix(in srgb, color-mix(in srgb, var(--warning) 28%, #000) 22%, var(--surface-2));
}

.heim-block-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 12px 14px;
  font-size: var(--fs-lg);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.heim-block-titel { flex: 1; min-width: 0; }

/* Die Zahl in der Blase. Sie sagt, wie viele es SIND – nicht, wie viele
   gezeigt werden. Wer drei Zeilen sieht und "7" liest, weiss sofort, dass
   der Knopf darunter etwas bringt. */
.heim-blase {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.heim-zeichen {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-fg);
}
.heim-zeichen.klein { width: 34px; height: 34px; border-radius: 10px; }
.heim-zeichen-bild { width: 17px; height: 17px; }

/* ----------------------------------------------------------------- Zeile */

.heim-liste { display: flex; flex-direction: column; }

.heim-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 56px: Eine Zeile, die man mit Handschuhen trifft, ohne dass drei Stück
     den halben Bildschirm füllen. */
  min-height: 56px;
  padding: 9px 14px 9px 8px;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-schnell) var(--easing);
}
.heim-liste .heim-zeile:first-child { border-top: 0; }
.heim-zeile:hover { background: var(--surface-sunken); }
.heim-zeile:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: -2px; }

/* Der Punkt links markiert das Dringende – aber NIE allein. Die zweite
   Textzeile sagt dasselbe in Worten ("überfällig", "kritisch"). Farbe als
   einziger Träger ist für rund jeden zwölften Mann keine Information. */
.heim-punkt {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: transparent;
}
.heim-zeile.ist-dringend .heim-punkt { background: var(--critical); }

.heim-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.heim-zeile-titel {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heim-zeile-unter {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heim-zeile-zeit {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.heim-pfeil { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.heim-pfeil.hell { color: currentColor; opacity: .7; }

/* ------------------------------------------------------------ N weitere */

.heim-mehr {
  display: block;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--accent-fg);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-schnell) var(--easing);
}
.heim-mehr:hover { background: var(--surface-sunken); }
.heim-mehr:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: -2px; }

/* ------------------------------------------------------------------ Leer */

.heim-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 52px 20px;
  text-align: center;
}
.heim-leer-gross { margin: 0; font-size: var(--fs-2xl); font-weight: 600; }

/* "Nicht geladen: Chat, Unterlagen." — leise, aber nicht versteckt.
   Sie steht ÜBER den Abschnitten, weil sie erklärt, warum unten womöglich
   etwas fehlt. Kein Rot: Es ist kein Fehler des Benutzers, und ein Alarm bei
   jedem Funkloch wird nach zwei Tagen nicht mehr gelesen. Der gestrichelte
   Rahmen ist im Haus die Form für "Angabe ohne Beleg" — hier passt sie: Der
   Bildschirm sagt selbst, dass er unvollständig ist. */
.heim-teilweise {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-secondary);
}
.heim-leer-klein { margin: 0 0 10px; color: var(--text-secondary); font-size: var(--fs-lg); }

@media (prefers-reduced-motion: reduce) {
  .heim-dienst, .heim-zeile, .heim-mehr { transition: none; }
  .heim-dienst:hover { transform: none; }
}