/* =========================================================================
   KI Logik · Akquise
   Gestaltung nach dem ausgelieferten Stand von kilogik.de:
   schwarze Bühne, Glasflächen mit feinen Lichtkanten, Weiß als Handlungsfarbe.
   Genau EIN warmer Moment (Champagner) — hier reserviert für die Punkte, die
   vor dem Senden geprüft werden müssen.

   Verboten (Markenhandbuch): Gradients, Glow-Effekte, Circuit-Muster,
   Neural-Network-Optik, weiche SaaS-Schatten.
   ========================================================================= */

:root {
  /* Bühne */
  --void: #000000;
  --void-2: #06070a;

  /* Glas */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.075);
  --glass-3: rgba(255, 255, 255, 0.11);

  /* Lichtkanten */
  --edge: rgba(255, 255, 255, 0.14);
  --edge-soft: rgba(255, 255, 255, 0.08);
  --edge-strong: rgba(255, 255, 255, 0.3);

  /* Text */
  --text: #f5f7fa;
  --text-2: #a8b0bc;
  --text-3: #737b87;

  /* Der eine warme Moment: hier für Prüfhinweise */
  --seal: #d8b57a;
  --seal-soft: rgba(216, 181, 122, 0.16);

  /* Rückmeldung */
  --ok: #7fc99a;
  --warn: #d8b57a;
  --fehler: #e08573;
  /* `--fehler` ist als Textfarbe auf Schwarz gedacht und dafuer hell genug.
     Als Flaeche wirkt derselbe Ton blass und billig. Fuer gefuellte Knoepfe
     deshalb ein eigener, tieferer Rot-Ton mit weisser Schrift. */
  --gefahr: #b03a2b;
  --gefahr-hell: #c9452f;

  /* -------------------------------------------------------------------
     Abstaende. Eine Skala statt Einzelfallentscheidungen.

     Vorher standen im Blatt 7, 8, 9, 10, 11, 14, 15, 16, 18, 20, 22, 26 und
     44 Pixel nebeneinander -- jeder Wert einmal beim Schreiben gewaehlt und
     danach nie wieder verglichen. Das Ergebnis sieht man nicht an einer
     einzelnen Stelle, sondern im Nebeneinander: Nichts steht auf einer Linie.

     Vielfache von vier, und nur diese. Wer einen Zwischenwert braucht, hat
     meist ein Layoutproblem und kein Abstandsproblem.
     ------------------------------------------------------------------- */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;

  /* Der innere Rand jeder Karte und jedes Abschnitts. Alles, was in einer
     Karte steht, beginnt auf dieser Linie -- Ueberschrift, Text, Knopf. */
  --karte-rand: var(--raum-5);
  /* Der Abstand zwischen zwei grossen Abschnitten einer Seite. */
  --abschnitt: var(--raum-7);

  --container: 1240px;
  --gutter: 24px;
  --nav-h: 64px;

  /* Radien, aus demselben Grund wie die Abstaende: Im Blatt standen 5, 8, 9,
     10, 12, 13, 14 und 22px nebeneinander. Vier Stufen reichen. */
  --r-klein: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family:
    "Geist Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================================
   Gerüst
   ========================================================================= */

.huelle {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--edge-soft);
}

.nav .huelle {
  display: flex;
  align-items: center;
  gap: var(--raum-6);
  width: 100%;
}

.marke {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.marke .zusatz {
  color: var(--text-3);
  font-weight: 400;
}

/* Bei 500px Breite lief die Seite waagerecht ueber: `scrollWidth` 595 gegen
   `innerWidth` 500, verursacht von dieser Leiste. Umbrechen statt schieben. */
.nav-links {
  flex-wrap: wrap;
  display: flex;
  gap: var(--raum-1);
  margin-left: auto;
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-4);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-link:hover {
  color: var(--text);
  background: var(--glass);
}
.nav-link.aktiv {
  color: var(--text);
  background: var(--glass-2);
}
.nav-link .zahl {
  font-size: 0.8125rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

main {
  padding: var(--raum-7) 0 calc(var(--raum-7) * 2);
}

/* =========================================================================
   Typografie
   ========================================================================= */

.h1 {
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 var(--raum-3);
}

.h2 {
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin: 0 0 var(--raum-4);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  margin: 0 0 var(--raum-5);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-2);
}
.eyebrow .punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-2);
  flex: none;
}

.fuehrung {
  color: var(--text-2);
  max-width: 62ch;
  margin: 0 0 var(--raum-6);
}

.klein {
  font-size: 0.875rem;
  color: var(--text-3);
}

.mono {
  font-family: "Geist Mono", ui-monospace, "SF Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Glas
   ========================================================================= */

.glas {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
/* Die feine Lichtkante oben — das prägende Detail der Marke. */
.glas::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    var(--edge-strong) 22%,
    var(--edge-strong) 78%,
    transparent
  );
}

/* =========================================================================
   Schaltflächen
   ========================================================================= */

.knopf-weiss,
.knopf-geist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.knopf-weiss {
  background: #fff;
  color: #000;
  padding: var(--raum-3) var(--raum-5);
  border: none;
}
.knopf-weiss:hover:not(:disabled) {
  background: #e9edf2;
  transform: translateY(-1px);
}
.knopf-weiss:active:not(:disabled) {
  transform: translateY(0);
}
.knopf-weiss:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Dieselbe Polsterung wie `.knopf-weiss` und `.knopf-gefahr`. Vorher waren
   „Abbrechen" (50px) und „Endgültig löschen" (46px) im selben Dialog
   nebeneinander verschieden hoch — genau die Sorte Detail, die billig wirkt. */
.knopf-geist {
  background: var(--glass);
  color: var(--text);
  padding: var(--raum-3) var(--raum-5);
  border: 1px solid var(--edge);
}
.knopf-geist:hover {
  background: var(--glass-2);
  border-color: var(--edge-strong);
  transform: translateY(-1px);
}

.knopf-klein {
  padding: var(--raum-2) var(--raum-4);
  font-size: 0.8125rem;
}

/* =========================================================================
   Startseite: Lauf starten
   ========================================================================= */

/* Jeder Kasten der Seite hat denselben inneren Rand. Vorher hatten
   `.starter` und `.ergebnis` 28-30px und `.karte`, `.kennzahl` und
   `.lauf-zeile` 24px — senkrecht uebereinander, 6px versetzt. */
.starter {
  padding: var(--karte-rand);
  margin-bottom: var(--abschnitt);
}

.kanalwahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raum-3);
  margin-bottom: var(--raum-5);
}

/* Der Radio-Knopf selbst ist unsichtbar; die Karte ist die Schaltfläche.
   So ist das Ziel groß und der Zustand eindeutig sichtbar. */
.kanalwahl input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kanalkarte {
  display: block;
  padding: var(--raum-4) var(--raum-5);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  background: var(--glass);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.kanalkarte:hover {
  border-color: var(--edge);
  background: var(--glass-2);
}
.kanalwahl input:checked + .kanalkarte {
  border-color: var(--edge-strong);
  background: var(--glass-3);
}
.kanalwahl input:focus-visible + .kanalkarte {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.kanalkarte .titel {
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin-bottom: var(--raum-1);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}
.kanalkarte .beschreibung {
  font-size: 0.875rem;
  color: var(--text-3);
  line-height: 1.5;
}

/* Feld, Knopf und Hinweis auf EINER Grundlinie.
   `flex-end` und nicht `center`: Das Feld trägt eine Beschriftung über sich,
   der Knopf nicht. Zentriert richtet sich der Knopf an der Mitte der ganzen
   Gruppe aus und landet zwischen Beschriftung und Feld. */
.zeile-unten {
  display: flex;
  align-items: flex-end;
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin-top: var(--raum-5);
}
.zeile-aktion {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}
.feld label {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  font-size: 0.8125rem;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
/* Der Wertebereich gehört zur Beschriftung, nicht in eine eigene Zeile
   darunter — sonst ist die linke Spalte eine Zeile höher als der Rest.
   Ohne die zusätzliche Deckkraft: `--text-3` mit 0.7 waren 2,84:1. */
.feld-bereich {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.feld input[type="number"],
.feld input[type="search"],
.feld select {
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-pill);
  color: var(--text);
  padding: var(--raum-3) var(--raum-4);
  font-size: 0.9375rem;
  font-family: inherit;
  min-width: 110px;
  transition: border-color var(--dur-fast) var(--ease);
}
.feld input:hover,
.feld select:hover {
  border-color: var(--edge);
}
.feld select {
  cursor: pointer;
  min-width: 220px;
  /* Eigener Pfeil, damit das Feld nicht nach Systemformular aussieht. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 51%, calc(100% - 15px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  /* Nicht auf der Skala, und mit Absicht: Das ist der Platz fuer den
     gezeichneten Pfeil, keine Gestaltungsentscheidung. */
  padding-right: 40px;
}
.feld select option {
  background: var(--void-2);
  color: var(--text);
}

/* =========================================================================
   Laufender Lauf
   ========================================================================= */

.lauf-aktiv {
  padding: var(--karte-rand);
  margin-bottom: var(--abschnitt);
  border-color: var(--edge);
}

.lauf-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-5);
  margin-bottom: var(--raum-4);
  flex-wrap: wrap;
}

.lauf-titel {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

/* Ein ruhiger Puls statt eines rotierenden Rades: zeigt Aktivität, ohne
   Aufmerksamkeit zu fordern. */
.puls {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--seal);
  flex: none;
  animation: pulsieren 1.8s var(--ease) infinite;
}
@keyframes pulsieren {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.balken {
  height: 3px;
  background: var(--glass-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--raum-4);
}
.balken .fuellung {
  height: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: width var(--dur) var(--ease);
}

.lauf-schritte {
  display: flex;
  gap: var(--raum-5);
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-3);
}
.lauf-schritte .schritt.aktiv {
  color: var(--text);
}
.lauf-schritte .schritt.erledigt {
  color: var(--text-2);
}

/* =========================================================================
   Kennzahlen
   ========================================================================= */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--raum-3);
  margin-bottom: var(--raum-7);
}

.kennzahl {
  padding: var(--karte-rand);
}
.kennzahl .wert {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kennzahl .bezeichnung {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-top: var(--raum-2);
}
.kennzahl .zusatz {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-top: var(--raum-2);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--edge-soft);
}

/* =========================================================================
   Tabellen und Listen
   ========================================================================= */

.lauf-liste {
  display: flex;
  flex-direction: column;
  /* Eine Haarlinie, kein Abstand -- daraus entstehen die Trennlinien. */
  gap: 1px;
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  overflow: hidden;
}

.lauf-zeile {
  display: grid;
  grid-template-columns: 130px 110px minmax(0, 1fr) auto;
  gap: var(--raum-4);
  align-items: center;
  padding: var(--raum-3) var(--karte-rand);
  background: var(--void);
  font-size: 0.9375rem;
  transition: background var(--dur-fast) var(--ease);
}
.lauf-zeile:hover {
  background: var(--void-2);
}

.marke-zustand {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: 0.8125rem;
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--edge-soft);
  color: var(--text-2);
  white-space: nowrap;
}
.marke-zustand.laeuft { color: var(--seal); border-color: var(--seal-soft); }
.marke-zustand.fertig { color: var(--ok); }
.marke-zustand.fehler { color: var(--fehler); }

/* =========================================================================
   Ansprachen
   ========================================================================= */

.werkzeugleiste {
  display: flex;
  gap: var(--raum-4);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--raum-6);
  padding-bottom: var(--raum-5);
  border-bottom: 1px solid var(--edge-soft);
}

.karten {
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
}

.karte {
  padding: 0;
  overflow: hidden;
}

/* Jede Zeile einer Karte beginnt auf derselben Linie. Deshalb steht der
   seitliche Rand an EINER Stelle und wird von allen Bausteinen geerbt. */
.karte > * {
  padding-inline: var(--karte-rand);
}

.karte-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raum-5);
  padding-block: var(--raum-5) var(--raum-4);
}

/* `min-width: 0` ist hier der ganze Trick: Ohne das wächst die linke Spalte
   mit dem längsten Text, schiebt die Steuerung nach rechts aus der Karte und
   der Umbruch wirft sie in die nächste Zeile. Mit ihm bricht der Text um und
   alles andere bleibt stehen. */
.karte-wer { min-width: 0; }

.karte-wer .name {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
}
.karte-wer .rolle {
  color: var(--text-2);
  font-size: 0.9375rem;
  margin-top: var(--raum-1);
}
.karte-wer .ort {
  color: var(--text-3);
  font-size: 0.875rem;
  margin-top: var(--raum-1);
}

/* Statuswahl, Standzeit, Löschen: rechtsbündig und in fester Reihenfolge.
   `flex: none` verhindert, dass die Gruppe schrumpft, wenn links viel steht. */
.karte-steuerung {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex: none;
}

/* Feste Breite, auch wenn nichts drinsteht: Sonst rutscht der Löschknopf je
   nach Status um ein paar Dutzend Pixel. */
.karte-steuerung .seit {
  min-width: 76px;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Direktlink zum Profil — bei LinkedIn-Leads der wichtigste Knopf, weil er
   den Weg zum Senden öffnet. */
.profil-link {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  font-size: 0.8125rem;
  color: var(--text-2);
  /* Dieselbe Hoehe wie `.kopieren` — beide sind kleine Pillen und standen in
     derselben Karte verschieden hoch. Ueber die Hoehe statt ueber die
     Polsterung, weil die Schriftgroessen sich unterscheiden: Gleiche
     Polsterung ergab 38,8 gegen 34,0. */
  padding: 0 var(--raum-3);
  height: 30px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.profil-link:hover {
  color: var(--text);
  border-color: var(--edge-strong);
}

/* --- Wohin gesendet wird ----------------------------------------------- */

/* Adresse, Kopierknopf und der Hinweis zum zweiten Kanal gehören zusammen
   und stehen deshalb in EINEM Block mit einer Umrandung. Vorher lag der
   Hinweis außerhalb und klebte von unten an der Trennlinie. */
.karte-kanal {
  padding-block: var(--raum-3);
  border-block: 1px solid var(--edge-soft);
  margin-bottom: var(--raum-4);
}
.karte-kanal-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  min-height: 30px;
}

.karte-adresse {
  font-family: "Geist Mono", ui-monospace, "SF Mono", monospace;
  font-size: 0.8125rem;
  color: var(--text-2);
  /* anywhere statt break-all: bricht an sinnvollen Stellen statt mitten im
     Wort. Eine URL, die als "…brenner-temp o/" umbricht, sieht nach Fehler
     aus, auch wenn sie stimmt. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.karte-zweitkanal {
  margin: var(--raum-2) 0 0;
  font-size: 0.8125rem;
  color: var(--text-3);
  line-height: 1.5;
}

.warnungen {
  margin-bottom: var(--raum-4);
  padding: var(--raum-3) var(--raum-4);
  background: var(--seal-soft);
  border: 1px solid rgba(216, 181, 122, 0.28);
  border-radius: var(--r);
  font-size: 0.875rem;
  line-height: 1.55;
}
.warnungen .titel {
  color: var(--seal);
  font-weight: 500;
  margin-bottom: var(--raum-2);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}
.warnungen ul {
  margin: 0;
  padding-left: var(--raum-4);
  color: var(--text-2);
}
.warnungen li + li {
  margin-top: var(--raum-1);
}

.nachricht-block {
  margin-bottom: var(--raum-4);
}

/* Bezeichnung links, Knopf rechts — auf jeder Höhe, in jedem Block. */
.block-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  min-height: 30px;
  margin-bottom: var(--raum-2);
}
.block-kopf .bezeichnung {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.betreff {
  padding: var(--raum-3) var(--raum-4);
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  margin-bottom: var(--raum-3);
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
}

.nachricht-text {
  padding: var(--raum-4);
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  white-space: pre-wrap;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text);
}

/* Dieselbe Hoehe wie `.profil-link`: zwei kleine Pillen, oft in derselben
   Karte, und ihre Hoehe darf nicht davon abhaengen, welche Schriftgroesse
   zufaellig gilt. */
.kopieren {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: 0.8125rem;
  padding: 0 var(--raum-3);
  height: 30px;
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-pill);
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.kopieren:hover {
  color: var(--text);
  border-color: var(--edge-strong);
  background: var(--glass-2);
}
/* Rückmeldung direkt am Knopf — kein Hinweisfenster, das man wegklicken muss. */
.kopieren.fertig {
  color: var(--ok);
  border-color: rgba(127, 201, 154, 0.4);
}

/* Aufklappbares: Prüfpunkte und Aufhänger. Standardmäßig zu, damit die
   Nachricht selbst nicht untergeht. */
/* Der seitliche Rand kommt von `.karte > *` — hier stand er ein zweites Mal
   und haette nach dem Umbau doppelt eingerueckt. */
.klapp {
  margin-bottom: var(--raum-4);
  border-top: 1px solid var(--edge-soft);
  padding-top: var(--raum-3);
}
.klapp summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-3);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  user-select: none;
}
.klapp summary::-webkit-details-marker {
  display: none;
}
.klapp summary::before {
  content: "+";
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--text-3);
}
.klapp[open] summary::before {
  content: "–";
}
.klapp summary:hover {
  color: var(--text-2);
}
.klapp .inhalt {
  padding: var(--raum-3) 0 var(--raum-1);
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.6;
}
.klapp ol,
.klapp ul {
  margin: 0;
  padding-left: var(--raum-5);
}
.klapp li + li {
  margin-top: var(--raum-2);
}

.aufhaenger {
  padding: var(--raum-3) var(--raum-4);
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  margin-bottom: var(--raum-2);
}
.aufhaenger .art {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--raum-2);
}
.aufhaenger .quelle {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: var(--raum-2);
  word-break: break-all;
}
.aufhaenger.genutzt {
  border-color: var(--edge);
}
.aufhaenger.genutzt .art {
  color: var(--text-2);
}

.karte-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  padding-block: var(--raum-3);
  border-top: 1px solid var(--edge-soft);
  background: rgba(255, 255, 255, 0.012);
  font-size: 0.8125rem;
  color: var(--text-3);
  flex-wrap: wrap;
}

/* =========================================================================
   Leere Zustände und Meldungen
   ========================================================================= */

.leer {
  padding: var(--raum-7) var(--karte-rand);
  text-align: center;
  color: var(--text-3);
}
.leer .h2 {
  color: var(--text-2);
}

.meldung {
  padding: var(--raum-4) var(--raum-5);
  border-radius: var(--r);
  margin-bottom: var(--raum-5);
  font-size: 0.9375rem;
  border: 1px solid var(--edge-soft);
  background: var(--glass);
}
.meldung.fehler {
  color: var(--fehler);
  border-color: rgba(224, 133, 115, 0.32);
}

/* =========================================================================
   Schmale Bildschirme
   ========================================================================= */

@media (max-width: 860px) {
  .kanalwahl {
    grid-template-columns: 1fr;
  }
  .lauf-zeile {
    grid-template-columns: 1fr;
    gap: var(--raum-2);
  }
  .karte-kopf {
    flex-direction: column;
  }
  .karte-adresse {
    text-align: left;
    max-width: none;
  }
  .nav .huelle {
    gap: var(--raum-4);
  }
  .nav-link {
    padding: var(--raum-2) var(--raum-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================================
   Anmeldung
   ========================================================================= */

.anmelde-seite {
  display: flex;
  min-height: 100vh;
}

.anmelde-huelle {
  margin: auto;
  padding: var(--raum-7) var(--raum-5);
  width: 100%;
  max-width: 460px;
}

.anmelde-karte {
  padding: var(--raum-7) var(--raum-7) var(--raum-6);
}

.anmelde-marke {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: var(--raum-5);
}
.anmelde-marke .zusatz {
  color: var(--text-3);
}

.anmelde-titel {
  font-size: 1.75rem;
  margin-bottom: var(--raum-5);
}

.anmelde-form {
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
}

.feld.breit,
.feld.breit input {
  width: 100%;
}
.feld.breit input {
  min-width: 0;
}

/* Der Haken ist gross genug zum Treffen — ein 13-Pixel-Kaestchen am Handy
   ist genau die Reibung, die hier nicht sein soll. */
.haken {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--text-2);
  padding: var(--raum-1) 0;
  user-select: none;
}
.haken input {
  width: 18px;
  height: 18px;
  accent-color: #fff;
  cursor: pointer;
  flex: none;
  /* Wie beim Filterhaekchen: Ohne das bleibt die Browservorgabe
     `3px 3px 3px 4px` stehen, und das Kaestchen beginnt 4px rechts von den
     Eingabefeldern darueber und dem Knopf darunter. */
  margin: 0;
}
.haken:hover span {
  color: var(--text);
}

.knopf-weiss.breit {
  width: 100%;
  margin-top: var(--raum-2);
}

.anmelde-fuss {
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--edge-soft);
  line-height: 1.55;
}

/* Abmelden sitzt in der Navigation und sieht aus wie ein Link, ist aber ein
   Formular — abmelden aendert einen Zustand und gehoert deshalb in ein POST. */
.abmelden-form {
  display: inline-flex;
  margin: 0;
}
.nav-link.abmelden {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text-3);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.nav-link.abmelden:hover {
  color: var(--text);
  background: var(--glass);
}

/* =========================================================================
   CRM: Statusleiste und Statuswahl
   =========================================================================
   Zurückhaltung ist hier die Gestaltung. Die Liste hat einen Zweck — sehen,
   was zu tun ist, und es abarbeiten. Alles, was davon ablenkt, ist im Weg.
   Farbe trägt genau eine Bedeutung: den Status. */

/* `.h1` bringt einen unteren Abstand mit. In einer Zeile mit `flex-end`
   richtet sich der Knopf daneben an dessen Kante aus und haengt darunter —
   gemessen 12px. Hier zaehlt die Schriftkante. */
.seiten-kopf .h1 { margin-bottom: 0; }

.seiten-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--raum-5);
  flex-wrap: wrap;
  margin-bottom: var(--raum-5);
}

/* --- Bereichsleiste ------------------------------------------------------
   Über der Statusleiste: was jetzt zu tun ist (senden, Nachricht schreiben
   lassen, vernetzen). Grösser als die Status-Reiter, weil sie die erste Wahl
   ist; die Zahl steht immer da, auch die Null. */

.bereichsleiste {
  display: flex;
  gap: var(--raum-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--raum-4);
}
.bereich-titel { color: var(--text-3); margin-right: var(--raum-1); }

.bereich-reiter {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-4);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-klein);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.bereich-reiter:hover { background: var(--glass); color: var(--text); }
.bereich-reiter.aktiv { background: var(--glass-2); color: var(--text); border-color: var(--edge); }
.bereich-reiter.leer { opacity: 0.67; }
.bereich-reiter .zahl {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.bereich-reiter.aktiv .zahl { color: var(--text-2); }
/* „Jetzt senden“ mit Inhalt fällt auf: Dort wartet Arbeit. */
.bereich-senden:not(.leer) .zahl { color: var(--ok); font-weight: 600; }
/* Fokus (Phil, 13.10.): der gewählte Ausschnitt bleibt sichtbar, auch wenn
   darunter Status und Arbeitslisten wechseln. */
.fokusleiste { margin-bottom: var(--raum-3); }
.fokusleiste .bereich-reiter.aktiv { border-color: var(--text-3); }

/* --- Statusleiste ------------------------------------------------------- */

.statusleiste {
  display: flex;
  gap: var(--raum-1);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
  padding-bottom: var(--raum-3);
  border-bottom: 1px solid var(--edge-soft);
}

.status-reiter {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  /* Neun Reiter brauchten 1201px bei 1192px Platz -- neun Pixel zu viel, und
     „Verloren" stand allein in einer zweiten Zeile. Der breiteste uebliche
     Bildschirm ist die schlechteste Stelle fuer einen Umbruch. Eine Stufe
     weniger waagerechte Polsterung spart 72px. */
  padding: var(--raum-2);
  border-radius: var(--r-klein);
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.status-reiter:hover { background: var(--glass); color: var(--text); }
.status-reiter.aktiv { background: var(--glass-2); color: var(--text); }

/* Leere Status bleiben sichtbar, treten aber zurück. Sie zu verstecken hieße,
   die Leiste bei jedem Statuswechsel umzubauen — und eine Leiste, die
   springt, kann man sich nicht merken.

   0.42 ergab 2,35:1, 0.62 noch 4,04:1 — für anklickbaren Text bei 14px
   sind 4,5:1 nötig, und die sind ab 0.67 erreicht. */
.status-reiter.leer { opacity: 0.67; }

.punkt-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status-farbe, var(--text-3));
  flex: none;
}

.status-reiter .zahl {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.status-reiter.aktiv .zahl { color: var(--text-2); }

/* --- Statuswahl an der Karte -------------------------------------------- */

.status-wahl {
  display: flex;
  align-items: center;
}

.status-wahl select {
  appearance: none;
  /* Feste Breite: „Neu" und „Vernetzung angefragt" sind verschieden lang,
     und ohne diese Angabe beginnt die Marke auf jeder Karte woanders.
     180px trägt den längsten Statustext — sonst ist die Pille auf LinkedIn
     breiter als auf E-Mail und springt beim Kanalwechsel um 10px. */
  min-width: 180px;
  /* Genau die Hoehe des Loeschknopfs daneben -- vorher 32,8 gegen 32,0. */
  height: 32px;
  background: color-mix(in srgb, var(--status-farbe) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-farbe) 42%, transparent);
  color: var(--text);
  border-radius: var(--r-pill);
  /* Rechts mehr: Dort sitzt der Pfeil. Keine Skala, sondern Geometrie. */
  padding: 5px 30px 5px 13px;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  /* Der Pfeil als Hintergrundbild statt als Zeichen daneben: So bleibt das
     Feld eine geschlossene Form. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 11px) 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: background-color 120ms ease;
}
.status-wahl select:hover {
  background-color: color-mix(in srgb, var(--status-farbe) 26%, transparent);
}
.status-wahl select:focus-visible {
  outline: 2px solid var(--status-farbe);
  outline-offset: 2px;
}
/* Die Auswahlliste selbst zeichnet das Betriebssystem — dort muss der Text
   lesbar sein, unabhängig vom Farbton des Status. */
.status-wahl option { background: #17171a; color: #f2f2f4; }


/* =========================================================================
   Filter beim Start einer Runde
   ========================================================================= */

.filterblock {
  margin: var(--raum-5) 0 var(--raum-1);
  border-top: 1px solid var(--edge-soft);
  padding-top: var(--raum-4);
}

.filterblock > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  cursor: pointer;
  list-style: none;
  color: var(--text-2);
  font-size: 0.9375rem;
  user-select: none;
}
.filterblock > summary::-webkit-details-marker { display: none; }
.filterblock > summary::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 2px;
  transition: transform 160ms ease;
}
.filterblock[open] > summary::before { transform: rotate(45deg); }
.filterblock > summary:hover { color: var(--text); }

.filtergitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--raum-5) var(--raum-6);
  margin-top: var(--raum-5);
}

.filtergruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
.filtergruppe legend {
  padding: 0 0 var(--raum-2);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-3);
}

.haekchen { display: flex; flex-direction: column; gap: var(--raum-1); }
.haekchen label {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-2);
  margin-left: calc(var(--raum-2) * -1);
  border-radius: var(--r-klein);
  font-size: 0.9375rem;
  color: var(--text-2);
  cursor: pointer;
}
.haekchen label:hover { background: var(--glass); color: var(--text); }
.haekchen input[type="checkbox"] {
  appearance: none;
  width: 17px; height: 17px;
  border: 1.5px solid var(--edge);
  border-radius: var(--r-klein);
  flex: none;
  /* Ohne das bleibt die Browservorgabe `3px 3px 3px 4px` stehen und schiebt
     die ganze Haekchenspalte 4px aus der Flucht ihrer Ueberschrift. */
  margin: 0;
  position: relative;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.haekchen input[type="checkbox"]:checked {
  background: var(--text);
  border-color: var(--text);
}
/* Das Häkchen selbst: zwei Linien, gedreht. Ein Zeichen aus der Schriftart
   säße je nach Font unterschiedlich hoch. */
.haekchen input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1.5px;
  width: 4px; height: 9px;
  border-right: 2px solid var(--void);
  border-bottom: 2px solid var(--void);
  transform: rotate(42deg);
}
.haekchen input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--edge-strong);
  outline-offset: 2px;
}

.filtergruppe .klein { margin: var(--raum-2) 0 0; display: block; }

/* =========================================================================
   Ergebnis einer beendeten Runde
   =========================================================================
   Es steht dort, wo eben noch der Fortschrittsbalken war. Wer ihn beobachtet
   hat, schaut nach dem Neuladen genau hierher — und soll nicht ins Leere
   sehen. */

.ergebnis {
  position: relative;
  padding: var(--karte-rand);
  margin-bottom: var(--raum-6);
  border-left: 3px solid var(--ok);
  /* Der Akzentrand zaehlt zur Breite und schob den Inhalt nach rechts:
     gemessen 151 gegen 149 bei allen anderen Kaesten. Abgezogen wird die
     DIFFERENZ zum normalen Rahmen (3px statt 1px), nicht der ganze Rand --
     beim ersten Versuch stand der Inhalt danach bei 148, also einen Pixel zu
     weit links. */
  padding-left: calc(var(--karte-rand) - 2px);
}
.ergebnis.ergebnis-leer { border-left-color: var(--warn); }

.ergebnis-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
  /* Platz fuer „Schliessen", das absolut in der Ecke sitzt. */
  padding-right: var(--raum-7);
  margin-bottom: var(--raum-3);
}

/* Ohne eigene Angabe erbt ein Absatz die Browservorgabe von 1em -- hier
   15px oben und unten. Ein Wert, der weder in der Skala steht noch im Blatt
   sichtbar ist. */
.ergebnis-filter {
  margin: 0 0 var(--raum-3);
  color: var(--text-2);
  font-size: 0.9375rem;
}

.ergebnis-liste {
  margin: var(--raum-3) 0 var(--raum-4);
  padding-left: var(--raum-5);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.ergebnis-liste li { margin-bottom: var(--raum-2); }
.ergebnis-liste strong { color: var(--text); }

.ergebnis-zahlen {
  display: flex;
  gap: var(--raum-5);
  flex-wrap: wrap;
  margin: var(--raum-2) 0 var(--raum-4);
  color: var(--text-2);
  font-size: 0.9375rem;
}

/* Schließen ist ein Link auf „/" — ohne Zustand, ohne JavaScript. Wer neu
   lädt, ist ihn los; wer die Adresse behält, sieht ihn wieder.

   Er sitzt auf derselben Linie wie der übrige Karteninhalt, nicht 8px daneben. */
.ergebnis-weg {
  position: absolute;
  top: var(--karte-rand);
  right: var(--karte-rand);
  font-size: 0.8125rem;
  color: var(--text-3);
  text-decoration: none;
}
.ergebnis-weg:hover { color: var(--text); }

/* --- Warnung vor einer zu engen Suche ---------------------------------- */

.filter-warnung {
  /* Alle vier Seiten, nicht nur oben: Unten erbte der Absatz sonst die
     Browservorgabe. Sie fiel nur nicht auf, weil der naechste Abstand sie
     durch Kollaps verschluckte. */
  margin: var(--raum-4) 0 0;
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--r-klein);
  background: var(--seal-soft);
  border: 1px solid color-mix(in srgb, var(--seal) 30%, transparent);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.filter-warnung strong { color: var(--seal); }

/* =========================================================================
   Randnotiz — was man wissen kann, aber nicht tun muss
   =========================================================================
   Gegenstück zu `.warnungen`. Der Unterschied ist inhaltlich: Eine Warnung
   verlangt eine Handlung, eine Randnotiz erklärt eine Eigenschaft. Sähen
   beide gleich aus, wäre die Warnung nichts mehr wert. */

.randnotiz {
  margin-bottom: var(--raum-4);
  font-size: 0.875rem;
  color: var(--text-3);
}
.randnotiz > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-1) 0;
  user-select: none;
}
.randnotiz > summary::-webkit-details-marker { display: none; }
.randnotiz > summary::before {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}
.randnotiz[open] > summary::before { transform: rotate(45deg); }
.randnotiz > summary:hover { color: var(--text-2); }
.randnotiz ul {
  margin: var(--raum-2) 0 0;
  padding-left: var(--raum-4);
  line-height: 1.6;
  color: var(--text-2);
}

/* =========================================================================
   Löschen
   =========================================================================
   Der einzige Vorgang im System, der nicht zurückzunehmen ist. Er bekommt
   deshalb eine eigene Ebene statt eines Kastens in der Seite — und Farbe erst
   dort, wo sie etwas bedeutet: am letzten Knopf. */

/* --- Der Auslöser an Karte und Runde ----------------------------------- */

.loeschen-anstoss { display: inline-flex; }

/* Runde Pille wie jedes andere Bedienelement daneben — „Profil öffnen",
   „Website", die Statuswahl und „Link kopieren" sind alle umrandete Pillen.
   Ein randloses Quadrat dazwischen sah nicht zurückhaltend aus, sondern
   vergessen. */
.loeschen-knopf {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-2);
  cursor: pointer;
  /* 0.4 auf `--text-3` ergab 1,61:1 gegen Schwarz — unter der Schwelle von
     3:1 für Bedienelemente, und man fand ihn nur, wenn man wusste, dass er
     da ist. 0.55 auf `--text-2` sind 3,3:1. */
  opacity: 0.55;
  transition: opacity 160ms var(--ease), color 160ms var(--ease),
              background 160ms var(--ease), border-color 160ms var(--ease);
}

/* `:where()` hat keine Spezifität. Ohne das schlug diese Regel (0,3,0) die
   `:hover`-Regel des Knopfes selbst (0,2,0) — der Zeiger stand auf dem Knopf
   und die Deckkraft blieb bei 0,75. */
:where(.karte, .lauf-zeile):hover .loeschen-knopf { opacity: 0.85; }

.loeschen-knopf:hover,
.loeschen-knopf:focus-visible {
  opacity: 1;
  color: var(--fehler);
  background: color-mix(in srgb, var(--fehler) 12%, transparent);
  border-color: color-mix(in srgb, var(--fehler) 30%, transparent);
}
.loeschen-knopf:focus-visible {
  opacity: 1;
  outline: 2px solid var(--fehler);
  outline-offset: 2px;
}
.loeschen-knopf svg { display: block; }

/* --- Der Dialog -------------------------------------------------------- */

.loeschdialog {
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 0;
  max-width: 470px;
  width: calc(100% - 40px);
  color: var(--text);
  /* Heller als die Seite, nicht dunkler: Ein Dialog, der dunkler ist als sein
     Hintergrund, wirkt wie ein Loch statt wie eine Ebene darueber. */
  background: linear-gradient(180deg, #1c1f26 0%, #15171c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 30px 70px -18px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.loeschdialog::backdrop {
  /* Weniger deckend und mehr Unschaerfe: Die Seite darunter bleibt als
     Zusammenhang erkennbar, statt zu verschwinden. */
  background: rgba(4, 5, 8, 0.55);
  backdrop-filter: blur(10px) saturate(0.7);
}

/* Ohne JavaScript bleibt es ein Kasten im Textfluss. */
.loeschdialog:not([open]) { display: none; }
.loeschdialog[open]:not(:modal) { margin: var(--raum-6) auto; }

.loeschdialog[open]:modal { animation: dialog-auf 220ms var(--ease); }
.loeschdialog::backdrop { animation: blende-auf 220ms ease; }

@keyframes dialog-auf {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes blende-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loeschdialog[open]:modal, .loeschdialog::backdrop { animation: none; }
}

/* Der Behaelter faengt den Fokus, damit ihn kein Knopf bekommt -- am
   wenigsten der gefaehrliche. */
.loeschdialog-inhalt { padding: var(--karte-rand) var(--karte-rand) 0; }
.loeschdialog-inhalt:focus { outline: none; }

.loeschdialog-zeichen {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--raum-5);
  border-radius: var(--r);
  /* Der Ton kommt aus `--fehler` und nicht aus `--gefahr`: Auf dunklem Grund
     mit wenig Deckung wirkt das tiefe Rot braun, nicht rot. */
  color: #ff9d86;
  background: color-mix(in srgb, var(--fehler) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--fehler) 34%, transparent);
}
.loeschdialog-zeichen svg { width: 19px; height: 19px; }

.loeschdialog-titel {
  margin: 0 0 var(--raum-1);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.28;
}

.loeschdialog-gegenstand {
  margin: 0 0 var(--raum-4);
  /* Die Zeile, an der man erkennt, was genau gelöscht wird — sie darf nicht
     die blasseste im Dialog sein. */
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.loeschdialog-text {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.loeschdialog-text p { margin: 0 0 var(--raum-3); }
.loeschdialog-text p:last-child { margin-bottom: 0; }
.loeschdialog-text strong { color: var(--text); font-weight: 500; }

.loeschen-arbeit {
  margin-top: var(--raum-4) !important;
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--r);
  /* Auf dem helleren Dialoggrund wirkt `--seal-soft` schlammig statt gold —
     dieselbe Beobachtung wie beim Papierkorb-Zeichen, nur andersherum. */
  background: color-mix(in srgb, var(--seal) 12%, transparent);
  background: var(--seal-soft);
  border: 1px solid color-mix(in srgb, var(--seal) 28%, transparent);
  font-size: 0.875rem;
}

/* Die Knopfzeile sitzt auf einem eigenen, dunkleren Sockel -- so ist der
   Abschluss der Frage sichtbar, ohne dass eine Linie ihn behaupten muss.
   Abbrechen links, Loeschen rechts: Der Weg des geringsten Widerstands
   fuehrt nach links, und links passiert nichts. */
.loeschdialog-knoepfe {
  display: flex;
  gap: var(--raum-3);
  justify-content: flex-end;
  align-items: center;
  margin: var(--raum-5) calc(var(--karte-rand) * -1) 0;
  padding: var(--raum-4) var(--karte-rand);
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid var(--edge-soft);
}

.knopf-gefahr {
  border: 1px solid color-mix(in srgb, var(--gefahr-hell) 70%, transparent);
  background: var(--gefahr);
  color: #fff;
  border-radius: var(--r-pill);
  padding: var(--raum-3) var(--raum-5);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  transition: background 140ms var(--ease), transform 100ms var(--ease);
}
.knopf-gefahr:hover { background: var(--gefahr-hell); }
.knopf-gefahr:active { transform: translateY(1px); }
.knopf-gefahr:focus-visible { outline: 2px solid var(--gefahr-hell); outline-offset: 3px; }


/* Die Aktionen einer Rundenzeile: derselbe Abstand wie in der Karte, nicht
   ein anderer aus einem Inline-Stil. */
.lauf-zeile-aktionen {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
}

.block-kopf-rechts { justify-content: flex-end; }

/* --- Kleine Hilfsklassen ------------------------------------------------
   Sie ersetzen Inline-Stile in den Vorlagen. Ein `style=`-Attribut ist an
   sich kein Fehler — aber solange Layoutwerte dort stehen, gehen sie an
   jeder Skala und jeder Durchsicht vorbei. Geblieben sind nur die zwei, die
   DATEN tragen: die Statusfarbe und die Breite des Fortschrittsbalkens. */

.lauf-abbruch {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  margin-top: var(--raum-5);
}

.feld-breit { min-width: 220px; }
.text-link { text-decoration: underline; }
.ton-fehler { color: var(--fehler); }
.ton-ok { color: var(--ok); }

/* Feste Fächer in der Rundenzeile.

   Ohne sie hängt die Position jeder Angabe davon ab, was in DIESER Zeile
   sonst noch steht: Eine laufende Runde hat keinen Löschknopf, eine
   fehlgeschlagene kein „Ansehen". Gemessen sprang die Dauer dadurch um 55px
   zwischen zwei Zeilen — dasselbe Problem wie bei der Standzeit auf den
   Leadkarten, und dieselbe Lösung. */

.lauf-dauer {
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lauf-ansehen {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 88px;
}

/* Genau die Größe des Löschknopfs, damit die Zeile ohne ihn nicht schrumpft. */
.loeschen-platzhalter {
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Die Absendeknöpfe für den Betrieb ohne JavaScript. Sie sind nur da, wenn
   kein Skript läuft — dann brauchen sie auch Platz. */
.status-setzen { margin-left: var(--raum-2); }


/* =========================================================================
   Ergänzungen: Bereitschaft, Kostenvorschau, Ereignisse, Liste,
   Sperrliste, Einstellungen.
   ========================================================================= */

/* --- Ampel und Bereitschaft ------------------------------------------- */
.ampel {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-3); flex: none;
}
.ampel.gruen { background: var(--ok); }
.ampel.gelb  { background: var(--warn); }
.ampel.rot   { background: var(--gefahr-hell); }
.bereitschaft { margin-bottom: var(--raum-5); }
.bereitschaft-kopf { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.bereitschaft-punkte { list-style: none; margin: var(--raum-3) 0 0; padding: 0; display: grid; gap: var(--raum-1); }
.bereitschaft-punkte li { font-size: 0.92rem; color: var(--text-2); padding-left: 18px; position: relative; }
.bereitschaft-punkte li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.bereitschaft-punkte li.ok::before { background: var(--ok); }
.bereitschaft-punkte li.blocker::before { background: var(--gefahr-hell); }
.bereitschaft-punkte li.hinweis::before { background: var(--warn); }
.bereitschaft-punkte li.blocker { color: var(--text); }
.bereitschaft-punkte .punktname { color: var(--text); font-weight: 600; margin-right: var(--raum-1); }
.bereitschaft.blockiert { border-color: rgba(201, 69, 47, 0.45); }
.puls-nav { margin-left: var(--raum-1); vertical-align: middle; }

/* --- Liegengeblieben --------------------------------------------------- */
.liegengeblieben { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4); margin-bottom: var(--raum-5); flex-wrap: wrap; }
.liegengeblieben .klein { display: block; margin-top: var(--raum-1); }

/* --- Artwahl (Reiter) ---------------------------------------------------- */
.artwahl { display: flex; gap: var(--raum-2); margin-bottom: var(--raum-4); }
.art-reiter {
  background: var(--glass); border: 1px solid var(--edge-soft); color: var(--text-2);
  padding: var(--raum-2) var(--raum-4); border-radius: var(--r-pill); cursor: pointer; font: inherit;
}
.art-reiter:hover { border-color: var(--edge); color: var(--text); }
.art-reiter.aktiv { background: var(--text); color: var(--void); border-color: var(--text); }
.feld textarea {
  width: 100%; background: var(--glass); border: 1px solid var(--edge-soft); border-radius: var(--r-klein);
  color: var(--text); padding: var(--raum-3); font: inherit; line-height: 1.5; resize: vertical;
}
.feld textarea:focus-visible, .feld input[type="text"]:focus-visible { outline: 2px solid var(--edge-strong); outline-offset: 1px; }
.feld input[type="text"], .feld input[type="file"] {
  width: 100%; background: var(--glass); border: 1px solid var(--edge-soft); border-radius: var(--r-klein);
  color: var(--text); padding: var(--raum-2) var(--raum-3); font: inherit;
}

/* --- Kostenvorschau ------------------------------------------------------ */
.kostenvorschau { display: grid; gap: var(--raum-1); align-content: start; }
.kostenvorschau .bezeichnung { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.kostenvorschau .wert { font-size: 1.4rem; font-weight: 600; }
.kostenvorschau.gross .wert { color: var(--seal); }
.kostenvorschau .haken { margin-top: var(--raum-2); }

/* --- Ereignisse eines Laufs ---------------------------------------------- */
.ereignisse { list-style: none; margin: var(--raum-4) 0 0; padding: 0; display: grid; gap: var(--raum-1); max-height: 260px; overflow-y: auto; }
.ereignisse li { font-size: 0.9rem; color: var(--text-2); }
.ereignisse li .mono { color: var(--text-3); margin-right: var(--raum-2); }
.ereignisse li.warnung { color: var(--warn); }
.ereignisse li.fehler { color: var(--fehler); }
.fehlerbild { margin: var(--raum-3) 0; }
.fehlerbild .handlung { color: var(--text-2); margin-top: var(--raum-2); }
.ergebnis.ergebnis-fehler { border-color: rgba(201, 69, 47, 0.45); }
.ergebnis-aktionen { display: flex; gap: var(--raum-3); margin-top: var(--raum-4); flex-wrap: wrap; align-items: center; }

/* --- Kennzahlen als Links ------------------------------------------------ */
a.kennzahl { text-decoration: none; color: inherit; }
a.kennzahl:hover { border-color: var(--edge); }

/* --- Tagesliste ---------------------------------------------------------- */
.tagesabschnitt { margin-bottom: var(--abschnitt); }
.tagesabschnitt .h2 { display: flex; align-items: baseline; gap: var(--raum-3); }
.zahl-gross { font-size: 0.9rem; color: var(--text-3); font-weight: 500; }
.ampelkasten { display: flex; align-items: center; gap: var(--raum-2); font-size: 0.92rem; color: var(--text-2); flex-wrap: wrap; }
kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8em; background: var(--glass-2); border: 1px solid var(--edge-soft); border-radius: 4px; padding: 0 5px; }
.vorschlag { color: var(--seal); font-size: 0.95rem; margin: 0; }
.gespraechsliste { display: grid; gap: var(--raum-3); }
.gespraech-zeile { display: flex; justify-content: space-between; gap: var(--raum-4); align-items: center; flex-wrap: wrap; padding: var(--raum-4) var(--karte-rand); }
.gespraech-aktionen { display: flex; gap: var(--raum-3); align-items: center; flex-wrap: wrap; }
.notiz-kurz { margin-top: var(--raum-1); color: var(--text-2); }

/* --- Karten: Zustände ---------------------------------------------------- */
.karte.kopiert { border-color: rgba(127, 201, 154, 0.35); }
.karte.gewaehlt { outline: 2px solid var(--edge-strong); outline-offset: 2px; }
.karte.dringend .warnungen { border-color: var(--seal); }
.name-link { color: inherit; text-decoration: none; }
.name-link:hover { text-decoration: underline; }
.marke-pruef { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--text-3); border: 1px solid var(--edge-soft); border-radius: var(--r-pill); padding: 1px 8px; margin-left: var(--raum-2); vertical-align: middle; }
.marke-pruef.sauber { color: var(--ok); border-color: rgba(127, 201, 154, 0.4); }
.marke-pruef.einwand { color: var(--seal); border-color: rgba(216, 181, 122, 0.5); }
.zaehler { font-size: 0.78rem; color: var(--text-3); }
.zaehler.zu-lang { color: var(--seal); }
.notiz-form { display: grid; gap: var(--raum-2); }
.notiz-form textarea { width: 100%; background: var(--glass); border: 1px solid var(--edge-soft); border-radius: var(--r-klein); color: var(--text); padding: var(--raum-2) var(--raum-3); font: inherit; line-height: 1.5; resize: vertical; }
.notiz-form button { justify-self: start; }
.notiz-klapp .inhalt { padding-top: var(--raum-2); }

/* --- Lead-Detail --------------------------------------------------------- */
.lead-gitter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--raum-5); align-items: start; }
.lead-haupt, .lead-seite { display: grid; gap: var(--raum-5); }
.lead-werkzeuge { display: flex; gap: var(--raum-3); flex-wrap: wrap; align-items: center; }
.einschaetzung { color: var(--text-2); font-style: italic; }
.bearbeiten-form { display: grid; gap: var(--raum-4); }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-2); font-size: 0.92rem; }
.verlauf .mono { margin-right: var(--raum-2); }
.loeschen-unten { margin-top: var(--raum-3); }
@media (max-width: 860px) { .lead-gitter { grid-template-columns: 1fr; } }

/* --- Tabellen (Sperrliste, Aussortierte) --------------------------------- */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: var(--raum-2) var(--raum-3); border-bottom: 1px solid var(--edge-soft); vertical-align: top; }
.tabelle th { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.tabelle.glas { padding: var(--raum-2) var(--raum-3); }
.aussortiert-block { margin-top: var(--raum-5); }
.sperr-gitter, .einstell-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-5); margin-bottom: var(--raum-5); }
@media (max-width: 860px) { .sperr-gitter, .einstell-gitter { grid-template-columns: 1fr; } }
.sperr-form { display: grid; gap: var(--raum-3); }
.sperr-form button { justify-self: start; }

/* --- Einstellungen ------------------------------------------------------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--raum-2) var(--raum-4); margin: 0; font-size: 0.95rem; }
.dl dt { color: var(--text-3); }
.dl dd { margin: 0; color: var(--text-2); }
.dl dd ul { margin: 0; padding-left: 18px; }
.befunde { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-3); }
.befunde li { padding-left: 14px; border-left: 2px solid var(--warn); font-size: 0.92rem; color: var(--text-2); }
.befunde li.blockiert { border-left-color: var(--gefahr-hell); color: var(--text); }
.prompt-klapp { margin-top: var(--raum-5); }
.prompt { white-space: pre-wrap; font-size: 0.82rem; line-height: 1.5; color: var(--text-2); max-height: 60vh; overflow: auto; }

/* --- Toast --------------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--text); color: var(--void); padding: var(--raum-2) var(--raum-4); border-radius: var(--r-pill); font-size: 0.92rem; z-index: 50; }

/* `hidden` muss gewinnen, auch gegen display:flex/grid auf derselben Klasse. */
[hidden] { display: none !important; }

/* Der Schliessen-Link des Ergebnisses darf nicht ueber dem Kopf liegen. */
.ergebnis-kopf { padding-right: 96px; }


/* =========================================================================
   Kompakte Bereitschaft (oben rechts) und Abstandsrhythmus
   ========================================================================= */
.bereit-kompakt { display: grid; gap: var(--raum-2); justify-items: end; max-width: 420px; }
.bereit-zeile { display: inline-flex; align-items: center; gap: var(--raum-2); font-size: 0.92rem; color: var(--text-2); }
.bereit-kompakt.ok .bereit-zeile { color: var(--text-2); }
.bereit-kompakt.blockiert .bereit-zeile { color: var(--text); font-weight: 500; }
.bereit-offen { list-style: none; margin: 0; padding: var(--raum-3) var(--raum-4); display: grid; gap: var(--raum-1); background: var(--glass); border: 1px solid var(--edge-soft); border-radius: var(--r-klein); font-size: 0.85rem; color: var(--text-2); text-align: left; }
.bereit-offen li { padding-left: 14px; position: relative; }
.bereit-offen li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.bereit-offen li.blocker::before { background: var(--gefahr-hell); }
.bereit-offen .punktname { color: var(--text); font-weight: 600; margin-right: var(--raum-1); }

/* Rhythmus: grosse Bloecke 48px, Karten untereinander 16px, Kopf 32px. */
.seiten-kopf { margin-bottom: var(--raum-6); }
.seiten-kopf + .fuehrung { margin-top: calc(-1 * var(--raum-3)); }
.fuehrung { margin-bottom: var(--abschnitt); }
.ergebnis, .liegengeblieben { margin-bottom: var(--raum-5); }
.starter, .lauf-aktiv { margin-bottom: var(--abschnitt); }
.kennzahlen { gap: var(--raum-4); margin-bottom: var(--abschnitt); }
.kennzahl .zusatz { margin-top: var(--raum-3); }
.lauf-liste { margin-bottom: var(--abschnitt); }
.h2 { margin-bottom: var(--raum-4); }
.tagesabschnitt .h2 { margin-bottom: var(--raum-4); }
.tagesabschnitt > .klein { margin: 0 0 var(--raum-4); display: block; }
.karten { gap: var(--raum-5); }
.werkzeugleiste { margin-bottom: var(--raum-6); }
.statusleiste { margin-bottom: var(--raum-5); }
.aussortiert-block { margin-top: var(--abschnitt); }
.lead-gitter, .lead-haupt, .lead-seite { gap: var(--raum-5); }
.zeile-unten { margin-top: var(--raum-6); align-items: center; }
.zeile-unten .feld { min-width: 180px; }
.zeile-aktion { display: flex; align-items: center; gap: var(--raum-4); }
@media (max-width: 860px) { .bereit-kompakt { justify-items: start; max-width: none; } }

.liegengeblieben { padding: var(--raum-4) var(--karte-rand); }
.liegengeblieben > div { display: grid; gap: var(--raum-1); }


/* --- Statusübersicht auf der Startseite (dezent, eine Zeile) ------------- */
.statusuebersicht { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-2) var(--raum-5); margin-bottom: var(--abschnitt); padding: var(--raum-3) 0; border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); font-size: 0.88rem; color: var(--text-2); }
.statuszahl { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; color: inherit; white-space: nowrap; }
.statuszahl .wert { font-weight: 600; font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.statuszahl .text { color: inherit; }
.statuszahl.null, .statuszahl.null .wert { color: var(--text-3); }
.statuszahl:not(.still):hover { color: var(--text); }
.statuszahl .punkt-status { width: 7px; height: 7px; border-radius: 50%; background: var(--status-farbe, var(--text-3)); display: inline-block; margin-right: 2px; position: relative; top: -1px; }
.statuszahl.still { margin-left: auto; }

/* --- Kurz prüfen: eine Zeile, aufklappbar --------------------------------- */
.pruefzeile { margin: 0; }
.pruefzeile summary { list-style: none; cursor: pointer; font-size: 0.92rem; color: var(--text-2); padding: var(--raum-2) var(--raum-3); background: var(--seal-soft); border: 1px solid rgba(216, 181, 122, 0.35); border-radius: var(--r-klein); }
.pruefzeile summary::-webkit-details-marker { display: none; }
.pruef-marke { color: var(--seal); font-weight: 600; margin-right: var(--raum-2); }
.pruefzeile ul { margin: var(--raum-2) 0 0; padding: 0 0 0 18px; font-size: 0.88rem; color: var(--text-2); display: grid; gap: var(--raum-1); }
.kopf-rechts { display: flex; align-items: center; gap: var(--raum-4); flex-wrap: wrap; }

/* --- Reporting ------------------------------------------------------------ */
.quoten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--raum-4); margin-bottom: var(--abschnitt); }
.quote { display: grid; gap: 2px; padding: var(--raum-4) var(--raum-5); }
.quote .wert { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.quote .text { color: var(--text-2); font-size: 0.92rem; }
.bericht-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); margin-bottom: var(--raum-4); }
@media (max-width: 900px) { .bericht-spalten { grid-template-columns: 1fr; } }
.bericht-block { padding: var(--raum-5); margin-bottom: var(--raum-4); }
.bericht-block .h2 { margin-bottom: var(--raum-1); }
.bericht-block > .klein { margin-bottom: var(--raum-4); color: var(--text-3); }
.trichter td { padding: 7px 8px; vertical-align: middle; border-bottom: 1px solid var(--edge-soft); }
.trichter tr.still td { color: var(--text-3); }
.trichter td.text { white-space: nowrap; }
.trichter td.zahl, .verlauf td.zahl, .verlauf th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.trichter td.balken-zelle { width: 28%; }
.trichter .balken { display: block; height: 6px; border-radius: 3px; background: var(--status-farbe, var(--text-3)); opacity: 0.85; min-width: 0; }
.trichter td.anteil { white-space: nowrap; color: var(--text-2); }
.trichter td.delta { text-align: right; white-space: nowrap; color: var(--text-3); }
.trichter td.delta.plus { color: #4caf6d; }
.trichter td.delta.minus { color: #c8503f; }
.trichter .punkt-status { display: inline-block; margin-right: 8px; position: relative; top: -1px; }
.tabelle-huelle { overflow-x: auto; }
.verlauf th, .verlauf td { padding: 7px 10px; }

/* --- Laufende Runde: Ladering statt Zeitschätzung ---------------------------- */
.lauf-zeit { display: inline-flex; align-items: center; gap: var(--raum-2); }
.lade-ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); border-top-color: var(--text); animation: drehen 0.9s linear infinite; flex: none; }
@keyframes drehen { to { transform: rotate(360deg); } }


/* =========================================================================
   Handy (bis 760px): alles einspaltig, Tabellen scrollen in sich,
   Bedienelemente daumengross. Die Reiterleiste unten gilt bis 1099px und
   steht weiter unten bei „Handy und Tablet“.
   ========================================================================= */

@media (max-width: 760px) {
  :root { --gutter: 16px; --nav-h: 52px; }
  html { -webkit-text-size-adjust: 100%; }

  .marke .zusatz { display: none; }

  /* Seitenköpfe und Werkzeugleisten stapeln. */
  .seiten-kopf { flex-direction: column; align-items: flex-start; gap: var(--raum-3); }
  .kopf-rechts { width: 100%; }
  .werkzeugleiste .knopf-geist { width: 100%; justify-content: center; }
  .tastatur { display: none; }
  .werkzeugleiste { gap: var(--raum-3); }
  .werkzeugleiste .feld { width: 100%; }
  .werkzeugleiste select, .werkzeugleiste input { width: 100%; }
  .h1 { font-size: 2rem; }

  /* Bereichs-Reiter: eine Zeile, seitlich wischen, wie die Status-Reiter. */
  .bereichsleiste { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  /* Der Fokus scrollt nicht wie die Arbeitslisten: Alle drei Reiter bleiben
     sichtbar, notfalls auf zwei Zeilen (390 px). */
  .fokusleiste { flex-wrap: wrap; overflow-x: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .fokusleiste .bereich-titel { display: none; }
  .fokusleiste .bereich-reiter { padding: var(--raum-2) var(--raum-3); font-size: 0.875rem; }
  .bereichsleiste::-webkit-scrollbar { display: none; }
  .bereich-reiter { flex: none; }

  /* Status-Reiter: eine Zeile, seitlich wischen. */
  .statusleiste { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--raum-1); padding-bottom: var(--raum-2); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .statusleiste::-webkit-scrollbar { display: none; }
  .status-reiter { white-space: nowrap; flex: none; }

  /* Tabellen scrollen in sich, nie die Seite. */
  .tabelle { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabelle.glas { padding: var(--raum-2); }
  .trichter td.text { white-space: normal; }
  .trichter td.balken-zelle { display: none; }
  .trichter td.anteil { white-space: normal; font-size: 0.78rem; }
  .quoten { grid-template-columns: 1fr 1fr; gap: var(--raum-3); }
  .bericht-spalten > *, .quoten > *, .lead-gitter > *, .sperr-gitter > *, .einstell-gitter > * { min-width: 0; }
  .bericht-block { padding: var(--raum-4); }
  .trichter td.delta { white-space: normal; }
  .trichter td { padding: 6px 4px; }
  .quote { padding: var(--raum-3) var(--raum-4); }
  .quote .wert { font-size: 1.3rem; }

  /* Bedienelemente: 44px hoch, 16px Schrift (kein Zoom auf iOS). */
  input, select, textarea, button, .knopf-weiss, .knopf-geist { font-size: 16px; }
  .knopf-weiss, .knopf-geist, .kopieren, .kopieren-und-oeffnen { min-height: 44px; }
  .knopf-klein { min-height: 40px; }

  /* Karten: Kopf und Knopfzeilen stapeln, Knöpfe volle Breite. */
  .karte-kopf { gap: var(--raum-2); }
  .karte-kanal-zeile { flex-wrap: wrap; align-items: flex-start; }
  .karte-kanal-zeile > * { flex: 1 1 100%; }
  .karte-kanal-zeile .kopieren-und-oeffnen, .karte-kanal-zeile .kopieren { width: 100%; justify-content: center; }
  .karte-status { width: 100%; }
  .dl { grid-template-columns: 1fr; }
  .dl dt { margin-top: var(--raum-2); }
  .lauf-kopf { flex-direction: column; align-items: flex-start; gap: var(--raum-2); }
  .lauf-schritte { gap: var(--raum-1) var(--raum-3); }
  .starter .art-wahl { flex-wrap: wrap; }
  .starter input[type=number] { width: 100%; }
  .filterblock .optionen { grid-template-columns: 1fr; }
}

/* Datumsfelder im Reporting: dunkel wie die anderen Felder, Von und Bis nebeneinander. */
input[type="date"] { color-scheme: dark; background: var(--glass); color: var(--text); border: 1px solid var(--edge); border-radius: var(--r-pill); padding: 10px 14px; font: inherit; min-height: 44px; }
@media (max-width: 760px) {
  .werkzeugleiste.zeitraum { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3); }
  .werkzeugleiste.zeitraum .feld { width: auto; }
  .werkzeugleiste.zeitraum button { grid-column: 1 / -1; }
}

/* Handy: Kopfzeile eines Nachrichtenblocks stapeln; Kopieren + Profil in voller Breite. */
@media (max-width: 760px) {
  .block-kopf { flex-direction: column; align-items: stretch; gap: var(--raum-2); }
  .block-kopf .bezeichnung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); }
  .block-kopf .marke-pruef { margin-left: 0; }
  .block-kopf-rechts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2); justify-content: stretch; }
  .block-kopf-rechts .zaehler { grid-column: 1 / -1; }
  .block-kopf-rechts .kopieren-und-oeffnen, .block-kopf-rechts .kopieren { width: 100%; justify-content: center; }
  .block-kopf > .kopieren { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  .block-kopf-rechts .kopieren-und-oeffnen { grid-column: 1 / -1; white-space: nowrap; }
  .block-kopf-rechts .kopieren { grid-column: 1 / -1; }
}


/* ---------------------------------------------------------------------------
   Bereiche: LinkedIn und E-Mail. Der Umschalter sitzt zwischen Marke und Links.
   --------------------------------------------------------------------------- */
.bereiche { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--glass); margin-left: var(--raum-3); }
.bereiche .bereich { padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; color: var(--text-3); text-decoration: none; letter-spacing: 0.02em; }
.bereiche .bereich.aktiv { background: var(--glass-2); color: var(--text); }
.bereiche .not-aus-marke { color: #c8503f; margin-left: 4px; }
.not-aus { border: 1px solid rgba(200, 80, 63, 0.55); background: rgba(200, 80, 63, 0.08); }
.not-aus .h2 { color: #e06a5a; }
.not-aus-knopf { background: #c8503f; color: #fff; border: 0; padding: 10px 18px; border-radius: var(--r-klein); font-weight: 600; cursor: pointer; }
.not-aus-knopf:hover { background: #a63f31; }
.bereit-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.bereit-liste li { display: flex; gap: 8px; align-items: baseline; font-size: 0.85rem; }
.bereit-liste .ok { color: #4caf6d; } .bereit-liste .fehlt { color: #d9a441; }
.mail-block { border-top: 1px solid var(--glass); padding-top: var(--raum-2); margin-top: var(--raum-2); }
.mail-block .betreff { font-weight: 600; margin-bottom: 4px; }
.mail-block .mail-text { white-space: pre-wrap; line-height: 1.5; }
.mail-block .fuss { white-space: pre-wrap; color: var(--text-3); font-size: 0.8rem; border-top: 1px dashed var(--glass); margin-top: 8px; padding-top: 6px; }
.signal-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.signal-liste li { font-size: 0.85rem; }
.signal-liste .art { display: inline-block; min-width: 76px; color: var(--text-3); font-family: var(--mono, monospace); font-size: 0.75rem; }
.trichter { display: grid; gap: 6px; }
.trichter .stufe { display: grid; grid-template-columns: 160px 1fr 60px; align-items: center; gap: 8px; font-size: 0.85rem; }
.trichter .stufe .balken { margin: 0; }
.antwort-text { white-space: pre-wrap; font-size: 0.85rem; max-height: 9em; overflow: auto; }
.kampagne-form { display: grid; gap: var(--raum-2); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.mensch-marke { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(217, 164, 65, 0.18); color: #d9a441; font-size: 0.72rem; }
@media (max-width: 720px) { .bereiche { margin-left: 0; } .trichter .stufe { grid-template-columns: 120px 1fr 50px; } }

/* Hinweis auf eine veraltete Nachricht 2 (Anzeigen nicht aufgefrischt). */
.warnung-zeile { color: var(--warn); margin-top: var(--raum-2); }


/* =========================================================================
   Der nächste Schritt je Lead (2026-09-30)
   =========================================================================
   Eine Karte zeigt genau die Nachricht, die jetzt dran ist, und den Haken,
   der den Status weiterschiebt. Alles andere klappt auf. Der Block ist die
   einzige Fläche mit voller Lichtkante in der Karte: Dort passiert die
   Arbeit. Weiß bleibt die Handlungsfarbe (Kopieren und Profil öffnen), der
   Haken wird weiß, sobald kopiert ist: dann ist er der nächste Klick. */

.karte > .schritt {
  margin: 0 var(--karte-rand) var(--raum-4);
  padding: var(--raum-4);
}
.karte > .schritt:first-child { margin-top: var(--karte-rand); }
.karte > .pruefzeile { margin-bottom: var(--raum-3); }

.schritt {
  display: grid;
  gap: var(--raum-3);
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--r);
}
/* Nichts zu senden (Nachricht 2 entsteht noch): zurückhaltend. */
.schritt.schritt-wartet {
  background: transparent;
  border-style: dashed;
  border-color: var(--edge-soft);
}
.schritt.kopiert { border-color: rgba(127, 201, 154, 0.4); }

.schritt-kopf { display: grid; gap: var(--raum-1); }
.schritt-titel {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.schritt-titel .marke-pruef { margin-left: 0; }
.schritt-marke {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-pill);
  padding: 1px var(--raum-2);
}
.schritt-erklaerung { margin: 0; font-size: 0.875rem; color: var(--text-2); line-height: 1.5; }
.schritt .vorschlag { font-size: 0.875rem; }
/* Die Nachricht liegt eine Stufe tiefer als der Block, sonst verschwimmen
   beide Flächen zu einer. */
.schritt .nachricht-text { background: rgba(0, 0, 0, 0.28); }

.schritt-aktionen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  flex-wrap: wrap;
}
.schritt-senden, .schritt-weiter {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin: 0;
}
.schritt-senden:empty { display: none; }
.schritt-weiter { margin-left: auto; }
/* Später nachfassen (ADR 0021): Datum und Knopf in einer ruhigen Zeile unter
   dem Schritt, rechtsbündig wie die Statusknöpfe. */
.schritt-nachfassen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin: var(--raum-2) 0 0;
}
.schritt-nachfassen label { color: var(--text-3); }
.schritt-nachfassen input[type="date"] {
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-pill);
  padding: 4px var(--raum-2);
  font: inherit;
  font-size: 0.875rem;
  color-scheme: dark;
}
.schritt.kopiert .schritt-fertig {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* Ein leiser zweiter Weg neben dem Haken („Hat geantwortet“). */
.knopf-text {
  background: none;
  border: none;
  padding: var(--raum-2);
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.knopf-text:hover { color: var(--text); }

/* Wer, woher, wohin: Ort und Links in einer Zeile unter der Rolle. */
.karte-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  margin-top: var(--raum-2);
}
.karte-links .ort { font-size: 0.875rem; color: var(--text-3); }
/* Widerspruch: kein Auswahlfeld mehr, nur der Status. */
.status-endgueltig {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--status-farbe, var(--edge));
  color: var(--text-2);
  font-size: 0.875rem;
}
/* Eine Zeile zum Prüfen, kein Ausschluss: bietet Leadgen oder Vertrieb an. */
.karte-hinweis {
  margin-top: var(--raum-2);
  padding-left: 10px;
  border-left: 2px solid var(--warn);
  font-size: 0.85rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.marke-netzwerk {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  padding: 1px var(--raum-2);
  white-space: nowrap;
}

.nachrichten-liste { display: grid; gap: var(--raum-2); }
.nachrichten-liste .nachricht-block { margin-bottom: 0; }

/* Lead-Seite: Kästen mit Innenrand. Vorher standen „Notiz“, „Verlauf“,
   „Sperren“ und „Recherchierte Aufhänger“ direkt an der Kante ihres
   Kastens, die Aufhänger ragten links bis an den Rand. */
.kasten { padding: var(--karte-rand); }
.kasten > .h2:first-child { margin-top: 0; }
.kasten .aufhaenger:last-child { margin-bottom: 0; }
.kasten > .klein:last-child { margin-bottom: 0; }
.lead-rolle { margin: var(--raum-1) 0 0; color: var(--text-2); max-width: 72ch; }
.lead-fuss { display: grid; gap: var(--raum-3); margin-bottom: var(--raum-4); }
.lead-fuss .klein { margin: 0; }
.lead-gitter .karte > .nachricht-block:last-child,
.lead-gitter .karte > .lead-fuss:last-child { margin-bottom: var(--karte-rand); }
.netzwerk-erklaerung { max-width: 72ch; margin: 0 0 var(--raum-4); line-height: 1.55; }

@media (max-width: 760px) {
  /* Schmaler Rand, damit die Nachricht Platz hat: 24 + 16 Pixel links und
     rechts liessen am Handy nur 270 Pixel für den Text. */
  .karte { --karte-rand: var(--raum-4); }
  .karte > .schritt { padding: var(--raum-3); }
  .karte-steuerung { width: 100%; }
  .karte-steuerung .status-wahl { flex: 1; }
  .karte-steuerung .status-wahl select { width: 100%; }
  .karte-steuerung .seit { min-width: 0; }
  .schritt-aktionen { flex-direction: column; align-items: stretch; }
  .schritt-senden, .schritt-weiter { display: grid; grid-template-columns: 1fr; margin-left: 0; }
  .schritt-senden > *, .schritt-weiter > * { width: 100%; justify-content: center; }
  .schritt-senden form button { width: 100%; }
  .schritt-weiter .knopf-text { order: 2; }
  .kasten { padding: var(--raum-4); }
}

/* Datei-Auswahl (Netzwerk-Import, Sperrliste): Der Knopf des Browsers war
   hellgrau auf Schwarz, als einziges Element ausserhalb der Gestaltung. */
input[type="file"] {
  color: var(--text-2);
  font: inherit;
  font-size: 0.875rem;
}
input[type="file"]::file-selector-button {
  margin-right: var(--raum-3);
  padding: var(--raum-2) var(--raum-4);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--glass-2);
  border-color: var(--edge-strong);
}
.art-form > .haken { margin: var(--raum-2) 0 var(--raum-4); }
.art-form > .klapp { margin-top: var(--raum-2); }

/* Auswahl für Nachricht 2 (Netzwerk-Kontakte, leads.html): bleibt beim
   Scrollen unter der Navigation stehen, damit Zahl und Knöpfe sichtbar sind,
   während man an den Karten Haken setzt. */
.auswahl-leiste {
  position: sticky;
  top: calc(var(--nav-h) + var(--raum-2));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3) var(--raum-4);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
  padding: var(--raum-3) var(--karte-rand, var(--raum-5));
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.auswahl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auswahl-text [data-auswahl-zahl] { color: var(--text); font-weight: 600; }
.auswahl-knoepfe { display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; }
.auswahl-knoepfe button[disabled] { opacity: 0.45; cursor: not-allowed; }
.auswahl-haken {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-1) var(--raum-3);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.auswahl-haken:hover { border-color: var(--edge-strong); color: var(--text); }
.auswahl-haken input { margin: 0; accent-color: #fff; }
.karte.gewaehlt { border-color: rgba(255, 255, 255, 0.45); }
.karte.gewaehlt .auswahl-haken { border-color: #fff; color: var(--text); }

@media (max-width: 760px) {
  /* Am Handy nimmt die Leiste ein Viertel des Bildschirms: Sie bleibt erst
     stehen, wenn etwas gewählt ist. */
  .auswahl-leiste { position: static; padding: var(--raum-3); }
  .auswahl-leiste.hat-auswahl { position: sticky; top: calc(var(--nav-h) + var(--raum-1)); }
  .auswahl-knoepfe { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .auswahl-knoepfe button { width: 100%; justify-content: center; }
  .auswahl-haken { justify-content: center; }
}

/* Blättern in der Leads-Liste (100 je Seite, crm.leads_je_seite). */
.seiten-info { margin-top: var(--raum-1); }
.blaettern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  margin: var(--raum-4) 0;
}
.blaettern .aus { opacity: 0.4; pointer-events: none; }
.seitenzahlen { display: flex; align-items: center; gap: var(--raum-1); flex-wrap: wrap; justify-content: center; }
.seitenzahl {
  min-width: 2.25rem;
  padding: var(--raum-1) var(--raum-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
}
.seitenzahl:hover { border-color: var(--edge); color: var(--text); }
.seitenzahl.aktiv { border-color: var(--edge-strong); color: var(--text); font-weight: 600; }
.luecke { color: var(--text-2); padding: 0 var(--raum-1); }
@media (max-width: 760px) {
  .blaettern { gap: var(--raum-2); }
  .blaettern > .knopf-klein { padding-left: var(--raum-3); padding-right: var(--raum-3); }
}

/* --- Notizen -------------------------------------------------------------- */

.notiz-suche, .notiz-alle { margin-bottom: var(--abschnitt, var(--raum-6)); }
.notiz-liste { display: grid; gap: var(--raum-3); }
.notiz-zeile { padding: var(--raum-4); display: grid; gap: var(--raum-3); }
.notiz-kopf { display: flex; justify-content: space-between; gap: var(--raum-3); flex-wrap: wrap; align-items: baseline; }
.notiz-kopf > div:first-child { display: grid; gap: 2px; }
.notiz-name { color: var(--text); font-weight: 600; text-decoration: none; }
.notiz-name:hover { text-decoration: underline; }
.notiz-meta { display: flex; gap: var(--raum-3); align-items: center; flex-wrap: wrap; }
.notiz-zeile textarea { width: 100%; resize: vertical; }
.notiz-knoepfe { display: flex; gap: var(--raum-3); align-items: center; margin-top: var(--raum-2); }
.status-chip { display: inline-flex; align-items: center; gap: var(--raum-2); font-size: 0.8125rem; color: var(--text-2); }


/* =========================================================================
   Handy und Tablet (2026-10-09)
   =========================================================================
   Gemessen mit Playwright in WebKit und Chromium, jede Seite bei 320, 375,
   390, 412 und 430 Pixeln Breite, quer (844 × 390) und auf dem Tablet (768).
   Was vorher auffiel:
   - Bei 320 Pixeln war jede Seite 343 breit: Marke, Bereich und „Name ·
     abmelden“ passten nicht in die Kopfleiste.
   - Im E-Mail-Bereich führte am Handy kein Weg zu Reporting, Sperrliste und
     Einstellungen. Die Links der Kopfleiste waren ausgeblendet, die
     Reiterleiste kannte sie nicht.
   - Zwischen 761 und 1099 Pixeln (Tablet, Handy quer) stand die
     Desktop-Navigation in zwei Zeilen und ragte aus der Kopfleiste.
   - Rund 1.700 Eingabefelder unter 16 Pixeln Schrift (Statuswahl 13,
     Notiz 14, Suche 15). Safari zoomt beim Antippen hinein und bleibt dort.
   - Tippziele von 21 Pixeln Höhe (Aufklapper), 30 (Profil öffnen) und 32
     (Statuswahl, Löschen).
   ========================================================================= */

/* --- Für alle Breiten ---------------------------------------------------- */

.tab-leiste { display: none; }

/* „E-Mail“ brach im Umschalter zu „E-“ und „Mail“ um, am Desktop im
   E-Mail-Bereich genauso wie bei 320 Pixeln. */
.bereiche .bereich { white-space: nowrap; }

/* Quer am iPhone liegt die Notch seitlich. `max()` hält den gewohnten Rand,
   wo es keine gibt (am Desktop ist `env()` null). */
.huelle {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Adressen als Linktext (LinkedIn-Profile auf der Sperrliste) haben keine
   Stelle zum Umbrechen: Zwei davon machten die Tabelle auf der Produktion bei
   768 Breite 797 breit. */
.tabelle a.text-link { overflow-wrap: anywhere; }

/* Kästen, die direkt in der Seite stehen, mit Abstand zueinander. Vorher
   klebten die Kampagnen der E-Mail-Seite ohne Fuge aneinander. */
.huelle > .kasten { margin-bottom: var(--raum-5); }

/* Die Anmeldefelder hatten keine Gestaltung: weisse Systemfelder, 24 Pixel
   hoch, das einzige Element ausserhalb der Marke. */
.feld input[type="email"],
.feld input[type="password"] {
  width: 100%;
  min-height: 44px;
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-klein);
  color: var(--text);
  padding: var(--raum-2) var(--raum-3);
  font: inherit;
  color-scheme: dark;
}
.feld input[type="email"]:focus-visible,
.feld input[type="password"]:focus-visible { outline: 2px solid var(--edge-strong); outline-offset: 1px; }
/* Vom Browser ausgefüllt: sonst hellgelb auf Schwarz. */
.feld input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px #101114 inset;
  caret-color: var(--text);
}
.anmelde-seite { min-height: 100dvh; }

/* `.trichter { display: grid }` aus dem E-Mail-Reporting traf auch die
   Tabelle im LinkedIn-Reporting. Als Raster wurde sie unter 900 Pixeln
   breiter als ihr Kasten (897 bei 768). Eine Tabelle bleibt eine Tabelle.
   Dasselbe bei „Verlauf je Woche“: `.verlauf` ist eigentlich die Liste auf
   der Lead-Seite, als Raster standen die Zahlen nicht unter ihren Spalten. */
table.trichter, table.verlauf { display: table; width: 100%; }

/* Zwei Spalten im Reporting nur, wo beide Tabellen nebeneinander Platz
   haben: zusammen rund 1.130 Pixel, wenn der Anteil umbrechen darf. Vorher
   `1fr 1fr`: Die linke Spalte wuchs mit ihrer Tabelle, die rechte ragte bei
   jeder Desktop-Breite 40 Pixel aus dem Container. `auto auto` teilt den
   Platz nach Inhalt. */
.bericht-spalten { grid-template-columns: auto auto; }
.trichter td.anteil { white-space: normal; }
/* In der rechten Tabelle ist der Anteil die letzte Spalte und nur eine Zahl:
   „0,0 %“ brach sonst zwischen Zahl und Prozentzeichen um. */
.trichter td.anteil:last-child { white-space: nowrap; }
@media (max-width: 1279px) {
  .bericht-spalten { grid-template-columns: minmax(0, 1fr); }
}

/* Ohne Maus bleibt `:hover` nach dem Tippen hängen: Der Knopf stünde einen
   Pixel zu hoch, bis man woanders hintippt. */
@media (hover: none) {
  .knopf-weiss:hover:not(:disabled),
  .knopf-geist:hover { transform: none; }
  /* Die Tastaturkürzel der Leads-Liste nützen ohne Tastatur nichts. */
  .tastatur { display: none; }
}

/* --- Navigation bis 1099 Pixel ------------------------------------------
   Darunter ist das Gerät fast immer eines mit Finger (Handy hoch und quer,
   Tablet hoch und quer). Die Reiterleiste unten trägt die Seiten, die
   Kopfleiste nur Marke und Bereich. Abmelden liegt unter „Mehr“.

   Darüber passt die Desktop-Navigation in eine Zeile, auch im E-Mail-Bereich
   mit acht Einträgen. Vorher brach sie dort auf jeder Breite um (gemessen
   bis 1512) und ragte mit der zweiten Zeile unter die Kopfleiste. */

@media (min-width: 1100px) {
  .nav .huelle { gap: var(--raum-5); }
  .nav-link { padding: var(--raum-2) var(--raum-3); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .marke .zusatz, .abmelden-name { display: none; }
}

@media (max-width: 1099px) {
  :root { --tab-h: 64px; }
  /* Feste Zahl statt `var(--tab-h)`: WebKit wertete die Variable auf dem body
     beim Seitenaufbau als leer aus (0 Pixel, gemessen 2026-10-09), auf jedem
     anderen Element nicht. Muss zu `--tab-h` passen. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* Deckender als am Desktop: Ohne Unschärfe (ältere Geräte, Stromsparen)
     las man bei 72 Prozent den Text darunter mit. */
  .nav { background: rgba(0, 0, 0, 0.92); }
  .nav .huelle { gap: var(--raum-4); }
  .nav-links { display: none; }
  .marke { padding-block: var(--raum-3); }
  .bereiche { margin-left: auto; }
  /* 40 Pixel hoch: Mehr trägt die 52 Pixel hohe Kopfleiste nicht. */
  .bereiche .bereich { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--raum-4); font-size: 0.875rem; }

  .tab-leiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: var(--raum-1) max(var(--raum-1), env(safe-area-inset-right, 0px)) calc(var(--raum-1) + env(safe-area-inset-bottom, 0px)) max(var(--raum-1), env(safe-area-inset-left, 0px));
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--edge-soft);
  }
  .tab-leiste > a,
  .tab-mehr > summary {
    position: relative;
    display: grid; justify-items: center; align-content: center; gap: 2px;
    min-height: 56px; padding: var(--raum-1) 2px;
    border-radius: var(--r-klein);
    color: var(--text-3);
    font-size: 0.6875rem; letter-spacing: 0.01em; line-height: 1.3;
    text-decoration: none; white-space: nowrap;
    cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-leiste > a:active, .tab-mehr > summary:active { background: var(--glass); }
  .tab-leiste > a.aktiv, .tab-mehr.aktiv > summary, .tab-mehr[open] > summary { color: var(--text); }
  .tab-leiste svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tab-mehr svg circle { fill: currentColor; stroke-width: 1.2; }
  .tab-leiste .puls-nav { position: absolute; top: var(--raum-1); right: 22%; margin: 0; }
  /* Die Zahl, die am Desktop neben „Leads“ steht. */
  .tab-zahl {
    position: absolute; top: 2px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--text); color: var(--void);
    font-size: 0.6875rem; font-weight: 600; line-height: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* „Mehr“: aufgeklappt eine Ebene über der Leiste, rechts am Daumen. Die
     Leiste ist ihr Bezugsrahmen (`position: fixed` mit Unschärfe). */
  .tab-mehr > summary { list-style: none; }
  .tab-mehr > summary::-webkit-details-marker { display: none; }
  .tab-mehr-menue {
    position: absolute;
    right: max(var(--raum-2), env(safe-area-inset-right, 0px));
    bottom: calc(100% + var(--raum-2));
    min-width: 240px;
    display: grid; gap: 2px;
    padding: var(--raum-2);
    border: 1px solid var(--edge);
    border-radius: var(--r);
    /* Wie der Löschdialog: heller als die Seite, sonst wirkt es wie ein Loch. */
    background: linear-gradient(180deg, #1c1f26 0%, #15171c 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 24px 48px -16px rgba(0, 0, 0, 0.85);
  }
  .tab-mehr-menue a,
  .tab-mehr-menue button {
    display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3);
    width: 100%; min-height: 48px; padding: 0 var(--raum-4);
    border: 0; border-radius: var(--r-klein);
    background: none; color: var(--text-2);
    font: inherit; font-size: 1rem; text-align: left; text-decoration: none;
    cursor: pointer;
  }
  .tab-mehr-menue a:active, .tab-mehr-menue button:active { background: var(--glass-2); }
  .tab-mehr-menue a.aktiv { color: var(--text); background: var(--glass-2); }
  .tab-mehr-menue form { margin: var(--raum-1) 0 0; padding-top: var(--raum-1); border-top: 1px solid var(--edge-soft); }
  .tab-mehr-menue button .klein { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .toast { left: var(--gutter); right: var(--gutter); bottom: calc(var(--tab-h) + var(--raum-3) + env(safe-area-inset-bottom, 0px)); transform: none; text-align: center; }
}

/* Unter 360 Pixeln (iPhone SE der ersten Generation, kleine Android-Geräte)
   stießen „Kampagnen“ und „Antworten“ aneinander. */
@media (max-width: 360px) {
  .tab-leiste > a, .tab-mehr > summary { font-size: 0.625rem; letter-spacing: 0; }
}

/* Quer am Handy ist die Höhe knapp (390 Pixel): Die Reiterleiste wird
   flacher, Symbol und Wort nebeneinander, und die Kopfleiste scrollt mit
   weg, statt stehen zu bleiben. */
@media (max-width: 1099px) and (max-height: 500px) {
  :root { --tab-h: 48px; }
  body { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
  .tab-leiste > a, .tab-mehr > summary { grid-auto-flow: column; justify-content: center; align-items: center; gap: var(--raum-2); min-height: 40px; font-size: 0.8125rem; }
  .tab-leiste svg { width: 20px; height: 20px; }
  .tab-zahl { top: 0; left: auto; right: 8%; }
  .nav { position: relative; }
  .auswahl-leiste, .auswahl-leiste.hat-auswahl { top: var(--raum-2); }
}

/* --- Finger statt Maus: bis 1099 Pixel ---------------------------------
   Was vom Gerät abhängt und nicht von der Breite des Layouts: Schrift in
   Feldern, Grösse der Tippziele, Umbruch in Tabellen. Auch das iPhone quer
   (844 Pixel) zoomt in zu kleine Felder. */

@media (max-width: 1099px) {
  /* Jedes Feld mit mindestens 16 Pixeln Schrift, sonst zoomt Safari beim
     Antippen. `!important`, weil die Felder an einem Dutzend Stellen eigene,
     spezifischere Grössen tragen: Hier gilt eine Bedingung des Geräts, keine
     Gestaltung, und sie soll keine Ausnahme kennen. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea { font-size: 16px !important; }

  /* Filterleisten: zwei Auswahlfelder nebeneinander, Suche und Knöpfe in
     voller Breite darunter. Spart in der Leads-Liste eine Feldhöhe, bevor
     die erste Karte kommt; auf dem Tablet standen die Felder vorher
     ungleich breit umbrochen. */
  .werkzeugleiste:not(.zeitraum) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--raum-3);
    margin-bottom: var(--raum-5);
    padding-bottom: var(--raum-4);
  }
  .werkzeugleiste:not(.zeitraum) > * { grid-column: 1 / -1; }
  .werkzeugleiste:not(.zeitraum) > .feld:has(> select):has(+ .feld > select),
  .werkzeugleiste:not(.zeitraum) > .feld:has(> select) + .feld:has(> select) { grid-column: auto; }
  .seiten-kopf > .werkzeugleiste { width: 100%; margin: 0; padding: 0; border: 0; }
  .werkzeugleiste:not(.zeitraum) .feld, .werkzeugleiste:not(.zeitraum) select,
  .werkzeugleiste:not(.zeitraum) input { width: 100%; min-width: 0; }

  /* Tippziele. */
  .klapp summary, .randnotiz > summary, .filterblock > summary { min-height: 44px; }
  .klapp:not(.kasten) { padding-top: 0; }
  /* Die Zeile selbst ist jetzt 44 hoch; der Abstand darunter liess sie
     unten doppelt so luftig wirken wie oben. */
  .karte > .klapp { margin-bottom: 0; }
  .karte > .klapp[open] { padding-bottom: var(--raum-3); }
  .pruefzeile summary { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--raum-2); }
  .pruef-marke { margin-right: 0; }
  .profil-link { height: 40px; padding: 0 var(--raum-4); font-size: 0.875rem; }
  .status-wahl select { height: 44px; }
  .loeschen-knopf, .loeschen-platzhalter { width: 44px; height: 44px; }
  .knopf-text { min-height: 44px; }
  .knopf-klein { min-height: 40px; }
  .kopieren { height: auto; min-height: 44px; }
  .not-aus-knopf { min-height: 44px; }
  .status-reiter, .bereich-reiter { min-height: 40px; }
  .seitenzahl { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; }
  .auswahl-haken, .haken, .haekchen label { min-height: 44px; }
  .karte-fuss .text-link { display: inline-block; padding: var(--raum-3) 0; margin: calc(-1 * var(--raum-3)) 0; }
  .artwahl { flex-wrap: wrap; }
  .art-reiter { min-height: 40px; }
  /* Textlinks, die hier Bedienelemente sind (Zurück zur Liste über dem
     Namen, „prüfen“, der Name selbst): grössere Fläche ohne Verschiebung. */
  .eyebrow a.text-link, .bereit-zeile a.text-link, .karte-wer .name-link {
    display: inline-block;
    padding-block: var(--raum-3);
    margin-block: calc(-1 * var(--raum-3));
  }

  /* Reporting: Am Desktop bricht die Trichtertabelle nicht um. Schmaler hielt
     „Vernetzungsanfragen“ die Anteil-Spalte bei 134 Pixeln, und die Tabelle
     wurde breiter als ihr Kasten (346 bei 320 Breite, 896 bei 768). */
  .trichter td.text, .trichter td.anteil { white-space: normal; hyphens: auto; overflow-wrap: anywhere; }
  .trichter td.zahl { white-space: nowrap; }
}

/* Auswahlfelder in den Kampagnen trugen ihr Desktop-Mindestmass von 220
   Pixeln in eine Rasterspalte von 160 und ragten heraus (bei 375 und 768). */
.kampagne-form .feld select { min-width: 0; width: 100%; }

/* --- Handy bis 760 Pixel ------------------------------------------------- */

@media (max-width: 760px) {
  main { padding-top: var(--raum-5); }
  .seiten-kopf { margin-bottom: var(--raum-5); }
  .fuehrung { margin-bottom: var(--raum-6); }

  /* Felder dürfen schmaler werden als ihr Desktop-Mindestmass (220 Pixel für
     Auswahlfelder): Auf der Sperrliste ragten sie bei 320 rechts hinaus. */
  .feld { min-width: 0; }
  .feld select, .feld input, .feld textarea, .feld-breit { min-width: 0; max-width: 100%; }
  .sperr-form .feld select, .sperr-form .feld input:not([type="file"]),
  .kampagne-form .feld input:not([type="checkbox"]) { width: 100%; }
  .sperr-form button { justify-self: stretch; }
  .kampagne-form { grid-template-columns: minmax(0, 1fr); }
  .kampagne-form .haekchen { flex-direction: row; flex-wrap: wrap; gap: var(--raum-1) var(--raum-4); }

  .kopf-rechts .knopf-geist { min-height: 40px; padding: var(--raum-2) var(--raum-4); font-size: 0.875rem; }

  /* Die LinkedIn-Überschrift eines Leads hat oft sechs Zeilen. In der Liste
     reichen drei, die Lead-Seite zeigt sie ganz. */
  .karten .karte-wer .rolle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  /* Karte, Schritt und Nachricht hatten je eigenen Innenrand: 16 + 12 + 16
     Pixel links und rechts, bei 375 Breite blieben 260 für den Text. */
  .karte .nachricht-text, .schritt .nachricht-text { padding: var(--raum-3); }

  /* Anmelden: Die Karte trug 48 Pixel Rand je Seite. */
  .anmelde-huelle { padding: var(--raum-5) var(--gutter); }
  .anmelde-karte { padding: var(--raum-6) var(--raum-5); }
}