/* =========================================================================
   Akquisesystem — The Ad Society
   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 .kunde {
  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 .kunde {
  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);
}

/* --- 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 The Ad Society: Bereitschaft, Kostenvorschau, Ereignisse,
   Tagesliste, Bearbeiten, 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); }
.nach-kopieren { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; padding: var(--raum-3) var(--raum-4); background: rgba(127, 201, 154, 0.08); border: 1px solid rgba(127, 201, 154, 0.3); border-radius: var(--r-klein); }
.nach-kopieren span { font-size: 0.92rem; color: var(--text-2); }
.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); }
.neu-texten-form { display: grid; gap: var(--raum-3); }
.neu-texten-form button { justify-self: start; }
.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; }