/* Phase 400 · "Heute" im Überblick. Große Zahlen, zwei Umschalter, sonst nichts.
   Phase 430 · Weniger Fett. Kai am 24.09.2026: "das sieht hier irgendwie alles so
   fett aus, das sieht so KI-generiert aus." Er hatte recht: neun Stellen auf
   dieser Seite standen auf 700. Fett trägt nur noch dort, wo es etwas sagt: was
   gewählt ist (der aktive Schalter), wer gemeint ist (Namen) und was im Text
   hervorgehoben werden soll. Die großen Zahlen folgen der Linie, die für große
   Zahlen ohnehin gilt: normales Gewicht.
   Phase 426 · Aus sieben einzelnen Kacheln wurde ein Band: ein Rahmen, feine
   Linien dazwischen, ein Symbol je Feld. Kai am 24.09.2026 zum Mockup: "dass die
   alle in einer Reihe sind ... dass das alles ein bisschen hochwertiger noch
   visuell ansprechender aussieht."

   Warum ein Band und nicht sieben Kacheln: Sieben freistehende Karten mit Luft
   dazwischen brauchen rund 54 Pixel mehr, als die Spalte bei kleinen Bildschirmen
   hergibt. Das Band spart sie, sieht ruhiger aus und behebt nebenbei eine doppelte
   Linie (die Kachel hatte Rahmen UND den Innenschatten der Handschrift). */
.heute { margin-bottom: 28px; }
.heute-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.heute-unter { margin: 6px 0 0; color: var(--ink-muted); font-size: 13px; }
.heute-schalter-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.heute-schalter { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--hairline); border-radius: var(--radius-md, 5px); background: var(--surface); }
.heute-schalter button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 400; cursor: pointer; }
.heute-schalter button.aktiv { background: var(--ink); color: #fff; font-weight: 700; }

/* Die Kacheln. Fuenf oben, die zwei KIDZ-Zahlen darunter. Kai am 24.09.2026,
   nachdem alle sieben in einer Reihe standen: "ist ja viel zu gross ... wenn das
   mit den sieben Fenstern nebeneinander nicht hinhaut, dann muessen wir die zwei
   Fenster fuer KIDZ wieder unten drunter machen. Alles andere soll aber so bleiben,
   mit den Bildern und mit den Symbolen." Die Masse sind deshalb wieder die von
   vorher, nur um das Symbol ergaenzt. */
.heute-zahlen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.heute-zahl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 104px; padding: 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius-card, 3px);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left;
}
button.heute-zahl { cursor: pointer; }
button.heute-zahl:hover, button.heute-zahl[aria-expanded="true"] { border-color: var(--ink); }
.heute-zahl strong { font-size: 38px; font-weight: 400; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.heute-zahl > span { color: var(--ink-muted); font-size: 13px; font-weight: 400; line-height: 1.25; }
.heute-zahl.warn { border-color: #c8290f; box-shadow: inset 0 3px 0 #c8290f; }
.heute-zahl.warn strong { color: #a3240d; }

/* Symbol und Zahl stehen in einer Zeile. Uebereinander kostete das Symbol die
   volle Kachelhoehe, und die Startseite wirkte dadurch groesser als vorher.
   Das Symbol sagt vor der Zahl, worum es geht. Die Farbe sagt, in welche Gruppe
   sie gehört: Petrol für das, was hereinkommt und was getan wird, Gold für das
   Ergebnis, Rot für das Fällige, Symbolgrau für das, was daneben zählt. */
.heute-zeile { display: flex; align-items: center; gap: 10px; }
.heute-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--radius-card, 3px);
  background: color-mix(in srgb, var(--ton, var(--dna-petrol)) 14%, white);
  color: var(--ton, var(--dna-petrol));
}
.heute-symbol svg { display: block; }
.heute-zahl.warn .heute-symbol { color: #a3240d; background: rgba(194, 42, 59, .1); }

/* Phase 420: Die Anrufzahl zählt Menschen. Wie oft dafür gewählt wurde, steht
   klein darunter, und nur wenn es abweicht: sonst stünde bei jedem "12 Anrufe"
   auch noch "12 Versuche", und die Zeile wäre reine Wiederholung. */
.heute-zusatz { margin-top: 2px; color: var(--ink-soft); font-size: 12px; font-weight: 400; }

/* Phase 425/426: Was neben den Erreichten mitgenommen wurde. Bewusst flacher als
   die Tageszahlen: das sind Beifänge, keine Hauptzahlen. Der Satz darunter sagt,
   warum sie nicht mitzählen; ohne ihn würde jemand alle sieben addieren und käme
   auf mehr Menschen, als angerufen wurden. */
.heute-mitgenommen { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.heute-mit-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.heute-zahl-mit {
  min-height: 0; padding: 12px 14px; flex-direction: row; align-items: center; gap: 12px;
  background: var(--dna-paper, #F4F6F7);
}
.heute-zahl-mit strong { font-size: 26px; }
.heute-zahl-mit .heute-symbol { width: 30px; height: 30px; flex: 0 0 auto; }
.heute-zahl-mit > span { min-height: 0; }
.heute-fussnote { margin: 9px 2px 0; color: var(--ink-muted); font-size: 12px; }

@media (max-width: 900px) {
  .heute-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .heute-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heute-zahl:last-child { grid-column: 1 / -1; }
  .heute-zahl { min-height: 104px; padding: 13px 14px; }
  .heute-zahl strong { font-size: 30px; }
  .heute-mit-zahlen { grid-template-columns: 1fr; }
  .heute-schalter { flex: 1; }
  .heute-schalter button { flex: 1; padding: 0 6px; }
}

/* Die Namen hinter einer angetippten Zahl. */
#heuteDetail:not(:empty) { margin-top: 20px; }
.heute-liste { overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-card, 3px); background: var(--surface); }
/* Phase 428: Der Kopf der Namensliste. Vorher hatte er dieselbe Groesse und
   dasselbe Gewicht wie die Namen darunter und las sich als erste Zeile. Jetzt
   unterscheidet er sich an vier Stellen zugleich: eigene Flaeche, kraeftigere
   Trennlinie, gesperrte Versalien und das Symbol der angetippten Zahl. */
.heute-liste-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--dna-paper, #F4F6F7);
  border-bottom: 1px solid var(--hairline-strong);
}
.heute-liste-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: var(--radius-card, 3px);
  background: color-mix(in srgb, var(--ton, var(--dna-petrol)) 14%, white);
  color: var(--ton, var(--dna-petrol));
}
.heute-liste-symbol svg { display: block; }
.heute-liste-kopf h3 {
  margin: 0; padding: 0; border: 0; min-width: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
/* Der Beratername bleibt normale Schrift: gesperrte Versalien auf einem Namen
   laesst sich schlecht lesen. */
.heute-liste-wer {
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink-muted);
}
.heute-liste-anzahl { margin-left: auto; color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
.heute-kontakt { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); color: inherit; text-decoration: none; }
.heute-kontakt:last-child { border-bottom: 0; }
.heute-kontakt:hover { background: var(--surface-soft); }
.heute-kontakt strong { font-size: 14px; font-weight: 700; }
.heute-kontakt > span { color: var(--ink-muted); font-size: 13px; text-align: right; }
/* Phase 429: Woher der Kontakt kommt, steht unter seinem Namen. Eine Empfehlung
   bekommt den Goldton, weil sie den anderen Anruf verdient als jemand, der bei
   einem Gewinnspiel mitgemacht hat. */
.heute-kontakt-wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.heute-herkunft { color: var(--ink-muted); font-size: 12px; font-weight: 400; }
.heute-herkunft.ist-empfehlung { color: var(--dna-gold-dark, #786614); }
/* Phase 450: Die Zeile ist ein Kasten mit zwei Links (Akte und Waehlen), damit
   die Nummer selbst antippbar ist. Das Kampagnen-Schild sitzt am Namen, die
   Nummer darunter in Tabellenziffern, damit man sie mit dem Handy abgleicht. */
.heute-kontakt a { color: inherit; text-decoration: none; }
.heute-kontakt-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.heute-kontakt-was { color: var(--ink-muted); font-size: 13px; text-align: right; }
.heute-tel {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink, #1a1a1a);
}
.heute-tel svg { color: var(--ink-muted); }
.heute-tel:hover { text-decoration: underline; }
.heute-schild {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 400; letter-spacing: .02em; line-height: 16px;
  border: 1px solid var(--hairline-strong); color: var(--ink-muted); background: var(--surface-soft);
}
.heute-schild.ist-kidz { color: #9A4E12; border-color: #E8C9A6; background: #FBF1E6; }
.heute-schild.ist-rente { color: #1a1a1a; border-color: #E9DDA8; background: #FFF9DB; }
.heute-flagge { border-radius: 1px; flex: none; }
/* Die Farben der Bundesflagge, nicht der Hauslinie: eine Flagge in Hausfarben waere keine. */
.heute-flagge .f-schwarz { fill: #000000; }
.heute-flagge .f-rot { fill: #DD0000; }
.heute-flagge .f-gold { fill: #FFCE00; }
.heute-leer { margin: 0; padding: 14px 16px; border: 1px dashed var(--hairline-strong); border-radius: var(--radius-card, 3px); color: var(--ink-muted); font-size: 13px; }
.heute-hinweis { margin: 10px 0 0; color: var(--ink-muted); font-size: 12px; }

/* Die Beraterliste. Kai am 24.09.2026: "dass da nicht mehr steht Sandro
   Wernicke, neue Leads, Anrufe, erreicht etc., sondern sein Porträt, Sandro
   Wernicke." Das Gesicht führt die Zeile an, die Symbole führen die Spalten. */
.heute-tabelle-rahmen {
  overflow-x: auto;
  border-radius: var(--radius-card, 3px);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.heute-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.heute-tabelle th {
  padding: 12px; border-bottom: 1px solid var(--hairline);
  color: var(--ink-muted); font-size: 11px; font-weight: 400;
  text-align: right; white-space: nowrap; vertical-align: middle;
}
.heute-tabelle th:first-child, .heute-tabelle td:first-child { text-align: left; padding-left: 16px; font-weight: 700; }
.heute-tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--hairline); text-align: right; font-variant-numeric: tabular-nums; }
.heute-tabelle tr:last-child td { border-bottom: 0; }
.heute-tabelle tbody tr:hover td { background: color-mix(in srgb, var(--dna-petrol, #00587C) 3%, transparent); }
.heute-th-inhalt { display: inline-flex; align-items: center; gap: 6px; }
.heute-th-inhalt svg { color: var(--ton, var(--symbol)); flex: 0 0 auto; }
.heute-person { display: inline-flex; align-items: center; gap: 10px; }
.heute-portrait {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dna-petrol-tint, #E5EEF2); color: var(--symbol);
  box-shadow: inset 0 0 0 1px var(--dna-line, #D3DCE0);
}
.heute-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .heute-tabelle { min-width: 720px; }
}

/* Phase 422: Jede Zahl in der Beraterliste ist antippbar und zeigt, wen dieser
   Berater angerufen hat. Sie sieht aus wie eine Zahl und verhält sich wie ein
   Knopf: Unterstreichung erst beim Überfahren, damit die Liste ruhig bleibt.
   Eine Null bleibt Text, hinter ihr steht nichts. */
.heute-zelle {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radius-sm, 2px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.heute-zelle:hover { background: var(--dna-petrol-tint, #eef2f5); text-decoration: underline; text-underline-offset: 3px; }
.heute-zelle:focus-visible { outline: 2px solid var(--klick, #1a6ea8); outline-offset: 1px; }
.heute-zelle.aktiv { background: var(--klick, #1a6ea8); color: #fff; font-weight: 700; }
.heute-null { color: var(--symbol); font-weight: 400; }