/* ============================================================================
 *  heute.css – Startseite „Was ist jetzt zu tun?"
 *  Farbwelt und Schriften kommen aus styles.css.
 * ========================================================================== */

.ht { padding: clamp(1rem, 3vw, 2rem); max-width: 62rem; margin: 0 auto; }

.ht-kopf { margin-bottom: 1.5rem; }
.ht-kopf h1 {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.025em;
}
.ht-datum {
  margin: 0.3rem 0 0;
  color: var(--text-3);
  font-size: 0.9rem;
  text-transform: capitalize;
}

/* --- Zahlenleiste ------------------------------------------------------------ */
.ht-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
  gap: 1px;
  background: var(--linie-fein);
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-gross, 16px);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.ht-kachel { background: var(--fl-1); padding: 0.9rem; }
.ht-kachel b {
  display: block;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ht-kachel span { font-size: 0.72rem; color: var(--text-3); }
.ht-kachel--hot b { color: var(--gefahr); }
.ht-kachel--gold b { color: var(--gold); }
.ht-kachel--warn b { color: var(--warn); }

/* --- Blocker ----------------------------------------------------------------- */
.ht-blocker {
  background: var(--fl-2);
  border: 1px solid var(--warn-weich);
  border-left: 3px solid var(--warn);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.2rem;
  margin-bottom: 1.8rem;
}
.ht-blocker h2 {
  margin: 0 0 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--warn);
}
.ht-blocker__eintrag + .ht-blocker__eintrag {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie-fein);
}
.ht-blocker__eintrag strong { font-size: 1rem; }
.ht-blocker__wer {
  font-size: 0.7rem;
  color: var(--text-3);
  margin-left: 0.6rem;
  white-space: nowrap;
}
.ht-blocker__eintrag p {
  margin: 0.35rem 0 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* --- Aktionen ---------------------------------------------------------------- */
.ht-titel {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
}
.ht-liste { display: flex; flex-direction: column; gap: 0.7rem; }

.ht-aktion {
  background: var(--fl-1);
  border: 1px solid var(--linie-fein);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
/* Die drei dringendsten Arten bekommen eine farbige Kante – so sieht man beim
   Überfliegen, worum es geht, ohne zu lesen. */
.ht-aktion--kaufsignal { border-left: 3px solid var(--gefahr); }
.ht-aktion--demo { border-left: 3px solid var(--gold); }
.ht-aktion--followup { border-left: 3px solid var(--warn); }

.ht-aktion__kopf { display: flex; gap: 0.8rem; align-items: flex-start; }
.ht-symbol { font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }
.ht-aktion h3 {
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  font-weight: 600;
}
.ht-betrieb { margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.ht-betrieb strong { font-size: 0.95rem; color: var(--text); }
.ht-betrieb span { font-size: 0.79rem; color: var(--text-3); }

.ht-warum {
  margin: 0.7rem 0 0;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--text-2);
}

.ht-knoepfe { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.ht-knopf {
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  background: var(--fl-3);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
}
.ht-knopf:hover { border-color: var(--akzent-linie); }
.ht-knopf--gold {
  color: var(--gold);
  background: var(--gold-weich);
  border-color: transparent;
}
.ht-knopf--leise { color: var(--text-3); background: transparent; }

.ht-leer { padding: 2.5rem 1rem; text-align: center; color: var(--text-3); line-height: 1.6; }

@media (max-width: 620px) {
  .ht-knoepfe .ht-knopf { flex: 1 1 auto; text-align: center; }
}

/* ============================================================================
 *  Kopfzeile auf dem Handy kompakter
 *
 *  Mit dem vierten Navigationspunkt („Heute") brach die Leiste auf schmalen
 *  Geräten in drei Zeilen um und fraß mit dem Knopf „Neuer Kunde" die halbe
 *  erste Bildschirmhöhe – bevor überhaupt eine Zahl zu sehen war.
 *
 *  Gehört hierher und nicht in styles.css, weil es eine Folge der neuen
 *  Navigation ist. Zieht das Cockpit später auf eine Seitenleiste um, fällt
 *  dieser Block ersatzlos weg.
 * ========================================================================== */
@media (max-width: 640px) {
  .topbar {
    gap: 10px;
    padding: 9px 14px;
    row-gap: 6px;
  }
  .topbar .brand { font-size: 14px; gap: 8px; }
  .topbar .nav { gap: 2px; flex: 1 1 100%; order: 3; justify-content: space-between; }
  .topbar .nav a { font-size: 13px; padding: 6px 8px; gap: 5px; }
  /* Die Symbole tragen auf dem Handy nichts bei – der Text ist eindeutig
     und braucht den Platz. */
  .topbar .nav a .ic { display: none; }
  .topbar .actions { margin-left: auto; }
  .topbar .actions .btn { font-size: 13px; padding: 7px 12px; }
}

/* Abmelde-Knopf: leise, damit er nicht mit „Neuer Kunde" konkurriert. */
.topbar .abmelden {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
}
.topbar .abmelden:hover { color: var(--text); border-color: var(--akzent-linie); }


/* --- Gesprächseinstieg auf der Aktionskarte -----------------------------------
   Zugeklappt eine Zeile, aufgeklappt das, was Sinan vor dem Betrieb braucht.
   Wörtlich Gesagtes steht als Zitat, Regieanweisungen davon abgesetzt – wer
   das im Auto überfliegt, darf beides nicht verwechseln. */
.sk {
  margin: 0.7rem 0 0;
  border: 1px solid var(--linie-fein);
  border-radius: 9px;
  background: var(--fl-1);
}
.sk-auf {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--akzent-hell);
  list-style: none;
  user-select: none;
}
.sk-auf::-webkit-details-marker { display: none; }
/* Zeichen direkt setzen, nicht als CSS-Escape. Ein Escape der Form Backslash
   plus 25B8 hat den Weg durch Bash und Python nicht ueberlebt - dort wird die
   Ziffernfolge als Oktal-Escape gelesen, und im CSS landete ein Steuerzeichen
   gefolgt von B8. Bei Sonderzeichen deshalb immer das Zeichen selbst. */
.sk-auf::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.15s ease;
}
.sk[open] .sk-auf::before { transform: rotate(90deg); }
.sk-auf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 8px; }

.sk-inhalt { padding: 0 0.75rem 0.75rem; }

/* Was gesagt wird: als Zitat, damit es sich vorlesen lässt. */
.sk-sagen {
  margin: 0 0 0.5rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--gold);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
}
/* Was getan wird: kleiner, ohne Zitatstrich – keine Verwechslung möglich. */
.sk-tun {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-3);
}
.sk-tun span { color: var(--akzent-hell); }

.sk-titel {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sk-einwand {
  margin-bottom: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--linie-fein);
}
.sk-wenn {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
}
.sk-quelle {
  margin: 0.8rem 0 0;
  font-size: 0.7rem;
  color: var(--text-3);
}
.sk-quelle code { font-size: 0.95em; word-break: break-all; }