/* Oberfläche des Convision-CRM.
   Ein Thema: Tinte auf Knochenpapier. Die Palette ist die der eigenen
   Website (bone/ink), damit CRM und Auftritt derselben Marke gehören.
   Werkzeug, kein Prospekt: Dichte vor Weißraum, eine Bildschirmhöhe zeigt
   mindestens fünfzehn Zeilen. Charakter kommt aus Tiefe, Typografie und
   klaren Zuständen, nicht aus Zierrat.
   Schriften selbst gehostet — kein Abruf bei Google, kein FOUT. */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/statisch/schriften/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 600 700;
  font-display: swap; src: url('/statisch/schriften/inter-tight.woff2') format('woff2');
}
@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/statisch/schriften/anton.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/statisch/schriften/jetbrains-mono.woff2') format('woff2');
}

:root {
  /* Knochenpapier als Grund, hellere Bögen als Karten. Kein Reinweiß —
     auf warmem Papier wirkt es wie ein Loch. */
  --grund:       #f0ebdd;
  --flaeche:     #fbf9f3;
  --flaeche-2:   #f6f2e7;
  --flaeche-3:   #ede7d5;

  --tinte:       #15110b;
  --grau:        #534d40;
  --blass:       #7c7565;

  --linie:       #e4dece;
  --linie-stark: #bdb8a9;

  /* Convisions Primärfarbe ist die Tinte selbst — gefüllte Knöpfe sind
     fast schwarz, nicht bunt. Das hält die Oberfläche ruhig und lässt
     dem Smaragd seine Bedeutung. */
  --akzent:      #0d0a07;
  --akzent-satt: #1c1814;
  --akzent-flach:#ede7d5;
  --akzent-rand: #bdb8a9;

  --tanne:       #0d0a07;
  --auf-akzent:  #fbf9f3;

  /* Nur für Positives: angenommen, abgeschlossen, lebendes Signal. */
  --gut:         #059669;
  --gut-flach:   #e3f3ec;

  /* Warmes Backstein statt kaltem Rot — auf Knochenpapier trägt Rot
     sonst einen Blaustich hinein, den die Marke nicht kennt. */
  --signal:      #a8321c;
  --signal-flach:#f7e7e0;
  --signal-rand: #e0b8a7;
  --signal-glut: rgba(168, 50, 28, 0.07);

  --grotesk: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", sans-serif;
  /* Überschriften und Knopfbeschriftungen: enger, schwerer. */
  --display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  /* Die Wortmarke, wie auf der Website: Anton, versal. */
  --anton:   'Anton', 'Inter Tight', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-klein: 8px;
  --radius: 10px;
  --radius-gross: 14px;
  --radius-flaeche: 16px;
  --radius-rund: 999px;

  --schatten: 0 1px 2px rgba(13, 10, 7, 0.04), 0 10px 30px -18px rgba(13, 10, 7, 0.18);
  --schatten-hoch: 0 2px 6px rgba(13, 10, 7, 0.06), 0 18px 44px -22px rgba(13, 10, 7, 0.24);
  --tempo: 140ms cubic-bezier(0.32, 0.72, 0.35, 1);
}

* { box-sizing: border-box; }

/* --------------------------------------------------------- Typografie --
   Drei Schriften mit klarer Aufgabe, wie auf der Website: Inter für den
   Fließtext, Inter Tight für alles Titelnde (enger, schwerer, ruhiger im
   Block), JetBrains Mono für Kennungen und Zahlenkolonnen. */
h1, h2, h3, h4,
.kz-titel, .plan-nr, .knopf, .bl-zahl, .rev-nr {
  font-family: var(--display);
  letter-spacing: -0.018em;
}
.label-mono, .kennung, .neben--mono { font-family: var(--mono); }


html { color-scheme: light; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 0.875rem/1.45 var(--grotesk);
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.num, td.num, .tage, time, .kennung, code { font-variant-numeric: tabular-nums; }

a { color: var(--akzent); text-underline-offset: 2px; }
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-radius: 3px;
}

/* ------------------------------------------------------------- Grundgerüst */
.rahmen { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }

.leiste {
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  padding: 1.1rem 0.8rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  position: sticky; top: 0; height: 100vh;
}
.leiste .marke {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.1rem 0.45rem 1.3rem;
}
.marke-wort { font: 400 1.12rem/1 var(--anton); letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--tinte); }
.zeichen {
  flex: none; display: block;
  background: var(--akzent);
  -webkit-mask: url("logo-weiss.png") center / contain no-repeat;
  mask: url("logo-weiss.png") center / contain no-repeat;
}
.leiste .marke .zeichen { width: 1.7rem; height: 1.7rem; background: var(--akzent); }
.leiste nav { display: grid; gap: 0.25rem; }
.leiste nav a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.62rem 0.7rem;
  color: var(--grau); text-decoration: none;
  font-size: 0.88rem;
  border-radius: var(--radius);
  transition: background var(--tempo), color var(--tempo);
}
.leiste nav a:hover { background: var(--flaeche-2); color: var(--tinte); }
.leiste nav a.aktiv {
  background: var(--akzent); color: var(--auf-akzent); font-weight: 600;
}
.leiste nav a .zahl {
  margin-left: auto; font: 500 0.7rem/1.5 var(--mono);
  color: var(--blass); padding: 0 0.32rem;
  background: var(--flaeche-2); border-radius: 3px;
}
.leiste nav a.aktiv .zahl,
.leiste nav a.aktiv .zahl.glut {
  background: rgba(255, 255, 255, 0.22);
  color: var(--auf-akzent);
}
.leiste nav a .zahl.glut { background: var(--signal-flach); color: var(--signal); }

.buehne { min-width: 0; display: flex; flex-direction: column; }

.kopfzeile {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.05rem 1.6rem 0.85rem;
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}
.kz-links { min-width: 0; display: grid; gap: 0.15rem; }
.kz-titel {
  margin: 0; font-size: 1.28rem; font-weight: 700; letter-spacing: -0.022em;
  display: flex; align-items: center; gap: 0.55rem; min-width: 0;
}
.kz-titel .kz-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zurueck {
  width: 1.8rem; height: 1.8rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--flaeche); box-shadow: var(--schatten);
  color: var(--grau); text-decoration: none; font-size: 0.95rem;
}
.zurueck:hover { color: var(--tinte); }
.kz-pfad {
  display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--blass); min-height: 0;
}
.kz-pfad:empty { display: none; }
.kz-pfad a { color: var(--grau); text-decoration: none; }
.kz-pfad a:hover { color: var(--akzent); }
.kz-pfad b { color: var(--grau); font-weight: 500; }
.kz-pfad .hinweis { color: var(--blass); }
.kz-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; flex: none; }

/* Runde Icon-Knöpfe wie Glocke und Zahnrad der Vorlage. */
.iknopf {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--flaeche); border: 1px solid transparent;
  box-shadow: var(--schatten);
  color: var(--grau);
  transition: border-color var(--tempo), color var(--tempo);
}
.iknopf:hover { border-color: var(--linie-stark); color: var(--tinte); }
.iknopf svg {
  width: 1.05rem; height: 1.05rem;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Suche */
.suche { position: relative; width: min(19rem, 30vw); }
.suche input {
  width: 100%; padding: 0.45rem 0.75rem 0.45rem 1.95rem;
  border: 1px solid transparent; border-radius: var(--radius-rund);
  box-shadow: var(--schatten);
  background: var(--flaeche); color: var(--tinte); font: inherit;
  transition: border-color var(--tempo), background var(--tempo);
}
.suche input:focus { background: var(--flaeche-2); }
.suche input::placeholder { color: var(--blass); }
.suche .lupe {
  position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%);
  color: var(--blass); font-size: 0.8rem; pointer-events: none;
}
.suche kbd {
  position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%);
  font: 500 0.68rem/1.4 var(--mono); color: var(--blass);
  border: 1px solid var(--linie-stark); border-radius: 3px; padding: 0 0.28rem;
  pointer-events: none;
}
.suche input:focus ~ kbd { display: none; }

.treffer {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--radius-gross); box-shadow: var(--schatten-hoch);
  max-height: 62vh; overflow-y: auto; padding: 5px;
}
.treffer a {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.4rem 0.55rem; text-decoration: none; color: var(--tinte);
  border-radius: var(--radius-klein);
}
.treffer a:hover, .treffer a.auswahl { background: var(--flaeche-3); }
.treffer .neben { color: var(--blass); font-size: 0.78rem; margin-left: auto; }

.inhalt { padding: 1.15rem; }

/* ------------------------------------------------------------------ Blöcke */
.block { margin-bottom: 1.5rem; }
.block > h2 {
  margin: 0 0 0.55rem;
  font: 600 0.95rem/1.2 var(--grotesk);
  letter-spacing: -0.012em; color: var(--tinte);
  display: flex; align-items: center; gap: 0.5rem;
}
.block > h2 .zahl {
  font: 600 0.72rem/1.7 var(--mono); color: var(--grau);
  background: var(--flaeche-2); border-radius: var(--radius-rund); padding: 0 0.5rem;
}
.block--signal > h2 { color: var(--signal); }
.block--signal > h2 .zahl { color: var(--signal); background: var(--signal-flach); }

.paar { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 64rem) { .paar { grid-template-columns: 1.6fr 1fr; } }

/* ---------------------------------------------------------------- Tabellen */
.umbruch {
  overflow-x: auto;
  border: 0; border-radius: var(--radius-flaeche);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.tafel { width: 100%; border-collapse: collapse; }
.tafel th {
  text-align: left; padding: 0.5rem 0.8rem;
  font: 500 0.74rem/1.2 var(--grotesk);
  letter-spacing: 0.01em; text-transform: none;
  color: var(--blass); background: var(--flaeche);
  border-bottom: 1px solid var(--linie); white-space: nowrap;
  position: sticky; top: 0;
}
.tafel td {
  padding: 0.62rem 0.85rem; border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}
.tafel tbody tr:last-child td { border-bottom: 0; }
.tafel tbody tr { transition: background var(--tempo); }
.tafel tbody tr:hover { background: var(--flaeche-2); }

/* Signalzeile: warm unterlegt, links ein glühender Steg. */
.tafel tbody tr.warm { background: var(--signal-glut); }
.tafel tbody tr.warm td:first-child { box-shadow: inset 2px 0 0 var(--signal); }
.tafel tbody tr.warm:hover { background: var(--signal-flach); }

.tafel a.name { font-weight: 600; color: var(--tinte); text-decoration: none; }
.tafel a.name:hover { color: var(--akzent); }
.tafel .leerzeile td {
  color: var(--blass); padding: 1.1rem 0.7rem; text-align: center; font-size: 0.83rem;
}

/* -------------------------------------------------------------- Bezeichner */
.kennung, code {
  font: 400 0.82em/1.35 var(--mono);
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); padding: 0.08em 0.4em; color: var(--grau);
}
.pw {
  cursor: pointer; user-select: all; color: var(--tinte);
  transition: border-color var(--tempo), color var(--tempo);
}
button.pw { cursor: pointer; font: inherit; font-family: var(--mono, ui-monospace, monospace); }
.pw { cursor: pointer; user-select: none; min-width: 7.5rem; text-align: center; }
.pw:hover { border-color: var(--akzent); color: var(--akzent); }
.pw:active { transform: scale(.97); }
.pw.kopiert { border-color: var(--akzent); background: var(--akzent-flach); color: var(--akzent); }

.marke-stufe {
  display: inline-block; font: 500 0.72rem/1.8 var(--grotesk);
  padding: 0 0.62rem; border-radius: var(--radius-rund);
  border: 0; color: var(--grau);
  background: var(--flaeche-3); white-space: nowrap;
}
.marke-stufe.gut { color: var(--akzent); background: var(--akzent-flach); }
.marke-stufe.aus { color: var(--blass); background: var(--flaeche-2); }

.punkt {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); vertical-align: middle; flex: none;
  box-shadow: 0 0 0 3px var(--signal-glut);
}
.neben { color: var(--blass); font-size: 0.8rem; }
.nur-klein { display: none; }
.warnung { color: var(--signal); }
.gut { color: var(--gut); }

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: 500 0.78rem/1 var(--grotesk);
  padding: 0.42rem 0.85rem; border-radius: var(--radius-rund);
  border: 1px solid var(--linie-stark); background: var(--flaeche-2);
  color: var(--tinte); text-decoration: none; cursor: pointer;
  transition: background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf:hover { background: var(--flaeche-3); border-color: var(--linie-stark); }
.knopf--stark {
  background: var(--tanne); border-color: var(--tanne); color: var(--auf-akzent); font-weight: 600;
}
.knopf--stark:hover { background: color-mix(in srgb, var(--tanne) 82%, #000); border-color: transparent; color: var(--auf-akzent); }
.knopf--warm { border-color: var(--signal-rand); color: var(--signal); background: var(--signal-flach); }
.knopf--warm:hover { background: var(--signal-flach); border-color: var(--signal); }
.knopf--stumm { background: transparent; border-color: transparent; color: var(--blass); }
.knopf--stumm:hover { background: var(--flaeche-2); color: var(--tinte); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

/* ---------------------------------------------------------------- Pipeline */
.spalten { display: flex; gap: 0.65rem; align-items: flex-start; overflow-x: auto; padding-bottom: 1rem; }
.spalte {
  flex: 0 0 16rem; background: var(--flaeche-3);
  border: 0; border-radius: var(--radius-flaeche);
  transition: background var(--tempo);
}
.spalte--klein { flex: 0 0 9.5rem; opacity: 0.6; }
.spalte--klein:hover { opacity: 1; }

/* Eine leere Stufe braucht keine volle Spaltenbreite — so passen mehr
   Stufen mit Inhalt gleichzeitig auf den Schirm. */
.spalte--leer { flex: 0 0 8.5rem; opacity: 0.65; background: transparent;
  border: 1px dashed var(--linie-stark); }
.spalte--leer:hover { opacity: 1; }
.spalte--leer .summe { display: none; }
.stapel-leer {
  font: 400 0.73rem/1.4 var(--mono); color: var(--blass);
  text-align: center; padding: 0.4rem 0;
}

/* Überblick über alle Stufen, ohne scrollen zu müssen. */
.brettleiste {
  display: flex; gap: 2px; margin-bottom: 0.9rem;
  overflow-x: auto; padding-bottom: 0.2rem;
}
.brettleiste {
  background: var(--flaeche); border-radius: var(--radius-flaeche);
  box-shadow: var(--schatten); padding: 0.25rem 0;
}
.bl-stufe {
  flex: 1 1 0; min-width: 5.4rem;
  display: grid; gap: 0.1rem; padding: 0.55rem 0.75rem;
  background: transparent; border: 0;
  border-right: 1px solid var(--linie);
  text-decoration: none; color: var(--tinte);
  transition: background var(--tempo);
}
.brettleiste > :last-child { border-right: 0; }
.bl-stufe:hover { background: var(--flaeche-2); }
.bl-zahl { font: 600 1.1rem/1 var(--grotesk); font-variant-numeric: tabular-nums; }
.bl-name {
  font-size: 0.7rem; color: var(--blass); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-stufe--leer .bl-zahl { color: var(--blass); font-weight: 500; }
.bl-stufe--gut .bl-zahl { color: var(--gut); }
.spalte > header { padding: 0.65rem 0.8rem 0.35rem; }
.spalte > header .titel { font-weight: 600; font-size: 0.79rem; display: flex; gap: 0.4rem; align-items: center; }
.spalte > header .titel .n {
  font: 500 0.68rem/1.5 var(--mono); color: var(--blass);
  background: var(--flaeche-2); border-radius: 3px; padding: 0 0.3rem;
}
.spalte > header .summe { font: 400 0.71rem/1.4 var(--mono); color: var(--blass); margin-top: 0.1rem; }
.spalte .stapel { padding: 0.45rem 0.5rem 0.55rem; display: grid; gap: 0.5rem; min-height: 2.6rem; }

.karte {
  background: var(--flaeche); border: 0;
  box-shadow: var(--schatten);
  border-radius: var(--radius-gross); padding: 0.6rem 0.7rem;
  display: block; text-decoration: none; color: var(--tinte);
  position: relative; cursor: grab;
  transition: border-color var(--tempo), background var(--tempo), transform var(--tempo);
}
.karte:hover { box-shadow: var(--schatten-hoch); }
.karte:active { cursor: grabbing; }
.karte.warm { box-shadow: var(--schatten), inset 0 0 0 1px var(--signal-rand); }
.karte .kname {
  font-weight: 600; font-size: 0.82rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karte .zelle-wer { padding-right: 0.9rem; gap: 0.5rem; }
.karte .kneben { display: block; margin-top: 0.15rem; }
.karte .kneben { color: var(--blass); font-size: 0.74rem; }
.karte .kfuss {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.25rem; font: 400 0.7rem/1.4 var(--mono); color: var(--blass);
}
.karte .punkt { position: absolute; top: 0.55rem; right: 0.55rem; }
.karte.zieht { opacity: 0.4; transform: scale(0.98); }
.spalte.ziel { background: var(--akzent-flach); }
.spalte.ziel .stapel { outline: 2px dashed var(--akzent-rand); outline-offset: -4px; border-radius: var(--radius); }

/* --------------------------------------------------------- Betriebsdetail */
.betriebkopf {
  position: sticky; top: 2.4rem; z-index: 20;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
  padding: 0.65rem 1.15rem;
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.betriebkopf h1 { margin: 0; font-size: 1.02rem; letter-spacing: -0.015em; }
.betriebkopf .ort { color: var(--blass); font-size: 0.82rem; }

.saeulen { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 70rem) { .saeulen { grid-template-columns: 1.55fr 1fr; } }

.kasten {
  background: var(--flaeche); border: 0;
  border-radius: var(--radius-flaeche); margin-bottom: 0.9rem; overflow: hidden;
  box-shadow: var(--schatten);
}
.kasten > h3, .kasten > summary > h3 {
  margin: 0; padding: 0.6rem 0.8rem;
  font: 600 0.84rem/1.3 var(--grotesk); letter-spacing: -0.008em;
  color: var(--tinte); border-bottom: 0; background: transparent;
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
}
.kasten > h3 .neben, .kasten > summary > h3 .neben { font-weight: 400; }
.kasten > h3 { padding-bottom: 0.25rem; }
.kasten .rumpf { padding: 0.55rem 0.9rem 0.85rem; }
.kasten--signal { border-color: var(--signal-rand); }
.kasten--signal > h3, .kasten--signal > summary > h3 { color: var(--signal); }
.kasten--zu > summary > h3 { border-bottom: 0; }
.kasten summary { cursor: pointer; list-style: none; }
.kasten summary:hover > h3 { color: var(--tinte); }
.kasten[open] summary > h3 { border-bottom: 1px solid var(--linie); }
.kasten summary::-webkit-details-marker { display: none; }

/* Reaktionskasten: die Information, wegen der man die Seite öffnet. */
.reaktion { display: grid; gap: 0.5rem; }
.reaktion { display: grid; gap: 0.6rem; }
.reaktion .zeilen { display: grid; gap: 0.15rem; font-size: 0.81rem; color: var(--grau); }

.balken { height: 4px; background: var(--flaeche-3); border-radius: 2px; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--signal); border-radius: 2px; }

.felder { display: grid; grid-template-columns: auto 1fr; gap: 0.26rem 0.75rem; font-size: 0.82rem; }
.felder dt { color: var(--blass); white-space: nowrap; }
.felder dd { margin: 0; overflow-wrap: anywhere; }

/* Verlauf */
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li {
  padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--linie);
  display: grid; gap: 0.18rem;
}
.verlauf li:last-child { border-bottom: 0; }
.verlauf li:hover { background: var(--flaeche-2); }
.verlauf .kopf { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.verlauf .art {
  font: 500 0.64rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0 0.35rem; border-radius: 3px; background: var(--flaeche-3); color: var(--grau);
}
.verlauf .art--besuch { background: var(--akzent-flach); color: var(--tanne); }
.verlauf .art--mail_rein { background: var(--akzent-flach); color: var(--akzent); }
.verlauf .art--stufenwechsel { background: transparent; border: 1px solid var(--linie-stark); }
.verlauf .titel { font-weight: 600; font-size: 0.83rem; }
.verlauf time { color: var(--blass); font-size: 0.74rem; margin-left: auto; }
.verlauf .text { color: var(--grau); font-size: 0.81rem; }

/* Lange Einträge — ein vollständiges Anschreiben ist im Verlauf selten das,
   was man gerade sucht. Anfang zeigen, Rest auf Klick. */
.langtext summary { cursor: pointer; list-style: none; }
.langtext summary::-webkit-details-marker { display: none; }
.langtext summary::after {
  content: " mehr"; color: var(--akzent); font-size: 0.78rem; white-space: nowrap;
}
.langtext[open] summary { display: none; }
.langtext[open] .text { white-space: pre-line; }
.langtext[open]::after {
  content: "weniger"; display: block; margin-top: 0.3rem;
  color: var(--akzent); font-size: 0.78rem; cursor: pointer;
}

/* Datumstrenner: Ohne ihn liest sich der Verlauf als eine lange Reihe, in der
   man die Zeitpunkte einzeln vergleichen muss. */
.verlauf .tagtrenner {
  position: sticky; top: 0; z-index: 1;
  padding: 0.3rem 0.7rem;
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
  font: 500 0.68rem/1.5 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blass);
}
.verlauf .tagtrenner:hover { background: var(--flaeche-2); }

/* Eingabe */
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); padding: 0 0.45rem; background: var(--flaeche-2); }
.reiter button {
  border: 0; background: none; padding: 0.45rem 0.55rem; cursor: pointer;
  font: 500 0.78rem/1 var(--grotesk); color: var(--blass);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--tempo);
}
.reiter button:hover { color: var(--tinte); }
.reiter button.aktiv { color: var(--tinte); border-bottom-color: var(--akzent); }

textarea, input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], input[type=search], select {
  width: 100%; padding: 0.45rem 0.6rem; font: inherit;
  border: 1px solid var(--linie-stark); border-radius: var(--radius);
  background: var(--grund); color: var(--tinte);
  transition: border-color var(--tempo);
}
textarea { min-height: 4.6rem; resize: vertical; line-height: 1.5; }
label { display: block; font-size: 0.77rem; color: var(--blass); margin-bottom: 0.18rem; }
.feldreihe { display: grid; gap: 0.55rem; margin-bottom: 0.55rem; }
@media (min-width: 34rem) { .feldreihe--zwei { grid-template-columns: 1fr 1fr; } }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--grund); }
.anmeldung form {
  width: min(21.5rem, 100%); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius-flaeche); padding: 1.7rem;
  box-shadow: var(--schatten);
}
.anmeldung .marke { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.3rem; }
.anmeldung .marke { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.anmeldung .marke .zeichen { width: 2.3rem; height: 2.3rem; }
.anmeldung h1 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; }

.meldung {
  padding: 0.6rem 0.8rem; border-radius: var(--radius-gross); margin-bottom: 0.85rem;
  border: 1px solid var(--akzent-rand); background: var(--akzent-flach); color: var(--akzent);
  font-size: 0.82rem;
}
.meldung--fehler { border-color: var(--signal-rand); background: var(--signal-flach); color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- Reaktionskette
   Vier Stationen: online · Mail raus · geklickt · drin gewesen. Auf einen Blick
   soll erkennbar sein, wo es hakt — Mail raus, aber nie geklickt? Geklickt,
   aber am Passwort gescheitert? Erreichtes leuchtet, Offenes bleibt blass. */

.kette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0.2rem 0 0.1rem;
}

.kette .station {
  position: relative;
  padding-top: 1.15rem;
  text-align: center;
  min-width: 0;
}

/* Verbindungslinie: liegt hinter den Punkten, endet am Rand der Station. */
.kette .station::before {
  content: "";
  position: absolute;
  top: 0.32rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--flaeche-3);
}
.kette .station:first-child::before { display: none; }
.kette .station.erreicht::before { background: var(--akzent); }

.kette .punkt-station {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  border: 2px solid var(--flaeche-3);
  background: var(--flaeche);
}
.kette .station.erreicht .punkt-station {
  border-color: var(--akzent);
  background: var(--akzent);
}
/* Der aktuelle Stand bekommt einen Hof — er ist der Punkt, auf den es ankommt. */
.kette .station.jetzt .punkt-station {
  box-shadow: 0 0 0 4px var(--akzent-flach);
}
/* Gefolgert statt gemessen: Der Punkt bleibt hohl, die Linie durchgezogen. */
.kette .station.erschlossen .punkt-station { background: var(--flaeche); }
.kette .station.erschlossen .titel { color: var(--grau); }

.kette .titel {
  display: block;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--blass);
  overflow-wrap: anywhere;
  padding: 0 0.15rem;
}
.kette .station.erreicht .titel { color: var(--tinte); }
.kette .datum {
  display: block;
  font: 400 0.68rem/1.4 var(--mono);
  color: var(--blass);
}

/* Kompakte Fassung für Listen und Karten: nur die Punkte. */
.kette--klein { grid-template-columns: repeat(4, 0.85rem); gap: 0.45rem; margin: 0; }
.kette--klein .station { padding-top: 0.62rem; }
.kette--klein .station::before { top: 0.25rem; left: -0.45rem; width: 0.45rem; }
.kette--klein .punkt-station { width: 0.5rem; height: 0.5rem; border-width: 2px; }
.kette--klein .titel, .kette--klein .datum { display: none; }

/* Lesetiefe als Balken mit Beschriftung darüber. */
.tiefe { display: grid; gap: 0.22rem; }
.tiefe .marke-zeile {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.76rem; color: var(--grau);
}
.tiefe .wert { font: 500 0.78rem/1 var(--mono); color: var(--signal); }

/* Besuchstabelle: wann, wo, womit, wie weit. */
.besuche-tafel td { padding: 0.36rem 0.6rem; font-size: 0.8rem; }
.besuche-tafel .wann { white-space: nowrap; font-variant-numeric: tabular-nums; }
.besuche-tafel .wo { color: var(--grau); }
.besuche-tafel .womit { color: var(--blass); font-size: 0.76rem; }
.besuche-tafel .pfad {
  font: 400 0.74rem/1.4 var(--mono); color: var(--grau);
  overflow-wrap: anywhere;
}
.aus-mail {
  font: 500 0.66rem/1.6 var(--grotesk); letter-spacing: 0.01em;
  color: var(--tanne); background: var(--akzent-flach);
  border: 0; border-radius: var(--radius-rund); padding: 0 0.45rem;
  white-space: nowrap;
}

/* Statuszeile im Kopf des Betriebs: der Stand in einem Satz. */
.stand-satz { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }

/* Ein erreichtes Signal darf laut sein — es ist der Anruf, der sich heute lohnt.
   Sein Ausbleiben ist nur ein Zwischenstand und bleibt entsprechend ruhig. */
.stand-satz.warm .gross {
  font: 600 1.15rem/1.15 var(--grotesk);
  letter-spacing: -0.02em; color: var(--signal);
}
.stand-satz.still .gross {
  font: 500 0.88rem/1.3 var(--grotesk); color: var(--grau);
}
.stand-satz .neben { margin-left: auto; }

.reaktion { display: grid; gap: 0.6rem; }

/* ================================================================= Heute ===
   Vier Zahlen oben, dann das Dringende als Karten, dann das Ruhige als knappe
   Listen. Vier gleich aussehende Tabellen untereinander waren dicht, aber man
   musste sie lesen, um zu wissen, ob überhaupt etwas ansteht. */

.ueberblick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.zahlkachel {
  position: relative;
  display: grid; gap: 0.1rem;
  padding: 0.95rem 1.1rem 1rem;
  background: var(--flaeche);
  border: 1px solid transparent;
  box-shadow: var(--schatten);
  border-radius: var(--radius-flaeche);
  text-decoration: none; color: var(--tinte);
  transition: border-color var(--tempo), background var(--tempo), transform var(--tempo);
}
.zahlkachel:hover { border-color: var(--linie-stark); transform: translateY(-1px); }

.zk-zahl {
  font: 600 1.85rem/1 var(--grotesk);
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.zk-name { font-size: 0.82rem; font-weight: 600; }
.zk-neben { font-size: 0.75rem; color: var(--blass); }

.zk-ikon {
  position: absolute; top: 0.85rem; right: 0.9rem;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--flaeche-2); color: var(--grau);
}
.zk-ikon svg {
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.zahlkachel--warm .zk-ikon { background: var(--signal-flach); color: var(--signal); }
.zahlkachel--leer .zk-ikon { color: var(--blass); }

/* Warm nur, wenn wirklich etwas ansteht — sonst verliert die Farbe ihre Kraft. */
.zahlkachel--warm {
  background: var(--signal-glut);
  border-color: var(--signal-rand);
}
.zahlkachel--warm .zk-zahl, .zahlkachel--warm .zk-name { color: var(--signal); }
.zahlkachel--warm:hover { border-color: var(--signal); }

.zahlkachel--leer .zk-zahl { color: var(--blass); font-weight: 500; }
.zahlkachel--leer .zk-name { color: var(--grau); }

/* ---------- Heißes Signal als Karten ---------- */
.signalkarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.7rem;
}

.signalkarte {
  background: var(--flaeche);
  border: 0;
  border-radius: var(--radius-flaeche);
  padding: 0.85rem 0.95rem 0.8rem;
  display: grid; gap: 0.6rem;
  box-shadow: var(--schatten);
}

.sk-kopf { display: grid; gap: 0.1rem; }
.sk-name {
  font: 600 1rem/1.25 var(--grotesk); letter-spacing: -0.015em;
  color: var(--tinte); text-decoration: none;
}
.sk-name:hover { color: var(--akzent); }

.sk-stand {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--signal);
}
.sk-stand .neben { margin-left: auto; }

.sk-fuss {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding-top: 0.6rem; border-top: 1px solid var(--linie);
}
.sk-zahlen { font-size: 0.8rem; color: var(--grau); }
.sk-fuss .knopf { margin-left: auto; }

/* ---------- Aufgaben ---------- */
.aufgabenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.aufgabenliste li {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  background: var(--flaeche); border: 0; box-shadow: var(--schatten);
  border-radius: var(--radius-gross); padding: 0.65rem 0.9rem;
}
.aufgabenliste li.ueberfaellig {
  border-color: var(--signal-rand); background: var(--signal-glut);
}
.al-text { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 14rem; }
.al-titel { font-weight: 600; font-size: 0.88rem; }
.aufgabenliste form { margin-left: auto; }

/* ---------- Knappe Listen ---------- */
.knappliste {
  list-style: none; margin: 0; padding: 0.25rem 0;
  background: var(--flaeche); border-radius: var(--radius-flaeche);
  box-shadow: var(--schatten);
}
.knappliste li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.95rem;
  border-bottom: 1px solid var(--linie);
  transition: background var(--tempo);
}
.knappliste li:last-child { border-bottom: 0; }
.knappliste li:hover { background: var(--flaeche-2); }
.kl-name {
  font-weight: 600; font-size: 0.85rem; color: var(--tinte); text-decoration: none;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kl-name:hover { color: var(--akzent); }
.knappliste .neben {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kl-wert {
  margin-left: auto; font: 400 0.76rem/1.4 var(--mono);
  color: var(--blass); white-space: nowrap;
}
.knappliste .knopf { padding: 0.2rem 0.5rem; font-size: 0.73rem; }

.dn-titel { font-weight: 600; font-size: 0.85rem; }
.dn-zahl {
  font: 500 0.7rem/1.6 var(--mono); color: var(--tinte);
  background: var(--flaeche-3); border-radius: var(--radius-rund); padding: 0 0.45rem;
}
.demnaechst summary::after {
  content: "▾"; margin-left: auto; color: var(--blass); font-size: 0.75rem;
}
.demnaechst[open] summary::after { content: "▴"; }

/* Der Tagesplan: die Übersicht als Anleitung. Nummernkreise wie Schritte in
   einer Wegbeschreibung — Warmes trägt die Signalfarbe. */
.tagesplan { margin-bottom: 1rem; }
.plan { list-style: none; margin: 0; padding: 0 0 0.3rem; }
.plan > li { border-bottom: 1px solid var(--linie); }
.plan > li:last-child { border-bottom: 0; }

.plan-schritt {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1rem;
  color: inherit; text-decoration: none;
  transition: background var(--tempo);
}
a.plan-schritt:hover { background: var(--flaeche-2); }
.plan-schritt--warm { background: var(--signal-glut); }
.plan-nr {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--tanne); color: var(--auf-akzent);
  font: 700 0.8rem/1 var(--grotesk);
}
.plan-schritt--warm .plan-nr { background: var(--signal); }
.plan-schritt--ruhig .plan-nr { background: var(--akzent-flach); color: var(--tanne); }
.plan-text { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 10rem; }
.plan-satz { font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; }
.plan-schritt--warm .plan-satz { color: var(--signal); }
.plan-pfeil { color: var(--blass); font-size: 1.1rem; }

/* Die Arbeitsseite: eine Zeile je Handgriff, groß genug für den Daumen. */
.ab-kopf { display: inline-flex; align-items: center; gap: 0.6rem; }
.abliste { list-style: none; margin: 0; padding: 0 0 0.3rem; }
.pd-zeile {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--linie);
}
.pd-zeile:last-child { border-bottom: 0; }
.pd-zeile--gross { padding: 0.7rem 1rem; }
.pd-text { display: grid; gap: 0.08rem; min-width: 0; flex: 1 1 10rem; }
.pd-text > a {
  font-weight: 600; font-size: 0.88rem; color: var(--tinte); text-decoration: none;
}
.pd-text > a:hover { color: var(--akzent); }
.pd-tel {
  font: 500 0.82rem/1 var(--mono); color: var(--akzent);
  text-decoration: none; white-space: nowrap;
}
.pd-zeile .knopf { flex: none; }

/* Handeln direkt in der Zeile: die Zeile ist der Aufklapper, das Formular
   liegt darunter in einer getönten Box. */
.pd-akt > summary { list-style: none; cursor: pointer; }
.pd-akt > summary::-webkit-details-marker { display: none; }
.pd-akt > summary:hover { background: var(--flaeche-2); }
.pd-auf { font-size: 0.72rem; opacity: 0.8; transition: transform var(--tempo); display: inline-block; }
.pd-akt[open] .pd-auf { transform: rotate(180deg); }
.pd-akt[open] > summary { background: var(--flaeche-2); }
.pd-form {
  margin: 0 1rem 0.8rem 3.6rem;
  padding: 0.75rem 0.9rem;
  background: var(--flaeche-2);
  border-radius: var(--radius-gross);
}
.abliste > li { border-bottom: 1px solid var(--linie); }
.abliste > li:last-child { border-bottom: 0; }
.abliste .pd-zeile { border-bottom: 0; }

/* Aufklappbare Kleinformulare bekommen eine ruhige, getönte Box. */
.inline-form form {
  background: var(--flaeche-2);
  border-radius: var(--radius-gross);
  padding: 0.75rem 0.9rem;
}
.inline-form--offen { margin-top: 0.2rem; }
.inline-form--offen form { margin: 0 0.9rem 0.9rem; }

/* ------------------------------------------------------------- Revision -- */
.revliste { list-style: none; margin: .7rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .45rem; }
.revliste li { display: flex; align-items: flex-start; gap: .6rem;
  background: var(--grund); border-radius: 10px; padding: .55rem .7rem; }
.rev-nr { flex: none; width: 1.5rem; height: 1.5rem; line-height: 1.5rem;
  text-align: center; border-radius: 999px; background: var(--signal);
  color: #fff; font-size: .78rem; font-weight: 700; }
.rev-text { flex: 1; font-size: .88rem; white-space: pre-wrap; }
.rev-loeschen { border: 0; background: none; color: var(--signal);
  font-size: 1.05rem; cursor: pointer; line-height: 1; padding: .15rem; }
.rev-fertige { margin-top: .7rem; }
.rev-fertige summary { cursor: pointer; }
.revliste--fertig { opacity: .62; }
.rev-nr--fertig { background: var(--akzent); }
.rev-vergleich { margin-top: .35rem; }
.rev-vergleich summary { cursor: pointer; font-size: .82rem;
  color: var(--akzent); font-weight: 600; }
.rev-bilder { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .45rem; }
.rev-bilder figure { margin: 0; flex: 1 1 240px; min-width: 0; }
.rev-bilder figcaption { font-size: .74rem; color: var(--neben, var(--blass));
  margin-bottom: .2rem; }
.rev-bilder img { width: 100%; border-radius: 8px;
  border: 1px solid rgba(15, 61, 46, .12); display: block; }

@media (max-width: 48rem) {
  .pd-form { margin-left: 0.7rem; margin-right: 0.7rem; }
  .pd-zeile { flex-wrap: wrap; }
  .pd-zeile .knopf { margin-left: auto; }
  .pd-tel { flex-basis: 100%; margin-left: 2.65rem; }
}

/* Übersicht: breite Hauptspalte, schmaler Rand — das Dashboard-Gitter. */
.haupt { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 64rem) { .haupt { grid-template-columns: 1.6fr 1fr; } }
.haupt-spalte, .haupt-rand { display: grid; gap: 1rem; min-width: 0; }
.haupt .kasten { margin-bottom: 0; }

/* In einer Karte verschachtelt: Signalkarten mit Rahmen statt Schatten. */
.rumpf .signalkarten { margin: 0.1rem 0 0.2rem; }
.rumpf .signalkarte { box-shadow: none; border: 1px solid var(--linie); }
.kasten .ruhig { border: 0; box-shadow: none; padding: 0.2rem 0 0.5rem; }

.randliste li.warm { background: var(--signal-glut); }
.randliste li.warm .rl-titel { color: var(--signal); }
.rl-titel a { color: inherit; text-decoration: none; }
.rl-titel a:hover { color: var(--akzent); }
.avatar--klein { width: 1.8rem; height: 1.8rem; font-size: 0.58rem; }
.randliste .avatar--klein { margin-top: 0.1rem; }

/* Ein ruhiger Zustand ist auch eine Auskunft — nicht als leere Tabelle zeigen. */
.ruhig {
  display: grid; gap: 0.15rem;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-flaeche);
  color: var(--grau); font-size: 0.85rem;
}

/* ================================================================ Ringe ====
   Kreisdiagramm für Anteile — conic-gradient mit ausgestanzter Mitte. Trägt
   nur, wo ein Anteil gemeint ist (Quote, Lesetiefe), nie für bloße Zählwerte. */

.ring {
  --p: 0;
  --groesse: 3.7rem;
  position: relative;
  width: var(--groesse); height: var(--groesse);
  display: grid; place-items: center; flex: none;
}
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ringfarbe, var(--akzent)) calc(var(--p) * 1%),
                             var(--akzent-flach) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 0.6rem),
                                #000 calc(100% - 0.54rem));
  mask: radial-gradient(farthest-side, #0000 calc(100% - 0.6rem),
                        #000 calc(100% - 0.54rem));
}
.ring .rw {
  font: 700 0.8rem/1 var(--grotesk);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.ring--warm { --ringfarbe: var(--signal); }
.ring--warm .rw { color: var(--signal); }

.zahlkachel--ring {
  grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem;
}
.zk-text { display: grid; gap: 0.12rem; min-width: 0; }

.tiefe-ring { display: flex; align-items: center; gap: 0.75rem; }
.tiefe-ring .zeilen { display: grid; gap: 0.1rem; font-size: 0.83rem; }

/* ---------- Seitenleiste mit Icons ---------- */
.leiste nav a svg {
  width: 1.1rem; height: 1.1rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.8;
}
.leiste nav a.aktiv svg, .leiste nav a:hover svg { opacity: 1; }

/* ---------- Initialen-Avatare ---------- */
.avatar {
  width: 2.15rem; height: 2.15rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--akzent-flach); color: var(--tanne);
  font: 600 0.68rem/1 var(--grotesk); letter-spacing: 0.02em;
}
.avatar--gross { width: 2.6rem; height: 2.6rem; font-size: 0.85rem; }
.zelle-wer { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.zelle-wer > div { min-width: 0; }

/* ---------- Sidebar-Karte, wie die getönte Karte der Vorlage ---------- */
.leiste-fuss {
  padding: 0.8rem 0.45rem 0;
  font-size: 0.72rem; color: var(--blass);
}
.leiste-karte {
  margin: auto 0 0.2rem;
  padding: 0.9rem;
  background: var(--akzent-flach);
  border-radius: var(--radius-gross);
  display: grid; gap: 0.45rem;
}
.leiste-karte b { font-size: 0.82rem; letter-spacing: -0.01em; }
.leiste-karte .neben { font-size: 0.74rem; line-height: 1.45; }
.leiste-karte .knopf { justify-content: center; margin-top: 0.15rem; width: 100%; }

/* ---------- Nutzer-Chip oben rechts ---------- */
.werchip {
  display: flex; align-items: center; gap: 0.5rem; flex: none;
  text-decoration: none; color: var(--tinte);
  padding: 0.2rem 0.3rem; border-radius: var(--radius-rund);
  transition: background var(--tempo);
}
.werchip:hover { background: var(--flaeche-2); }
.wc-kreis {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--akzent);
  color: var(--auf-akzent); font: 700 0.7rem/1 var(--grotesk); letter-spacing: 0.02em;
}
.wc-text { display: grid; line-height: 1.2; }
.wc-text b { font-size: 0.78rem; font-weight: 600; }
.wc-text i { font-style: normal; font-size: 0.68rem; color: var(--blass); }

/* ---------- Brotkrumen ---------- */
.brotkrumen {
  display: flex; align-items: baseline; gap: 0.4rem; min-width: 0;
  font-size: 0.88rem;
}
.brotkrumen a { color: var(--blass); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent); }
.brotkrumen span { color: var(--linie-stark); }
.brotkrumen b {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================== Filter =====
   Beschriftete Felder statt nackter Auswahlkästen, und was gerade gefiltert
   ist, steht als entfernbare Marke darunter — sonst sieht man einer kurzen
   Liste nicht an, ob sie kurz ist oder nur gefiltert. */

.filterleiste {
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end;
  padding: 0.8rem 0.95rem; margin-bottom: 0.7rem;
  background: var(--flaeche); border: 0; box-shadow: var(--schatten);
  border-radius: var(--radius-flaeche);
}
.fl-feld { display: grid; gap: 0.2rem; flex: 1 1 11rem; min-width: 0; }
.fl-feld label {
  margin: 0; font: 500 0.74rem/1.2 var(--grotesk);
  letter-spacing: 0.01em; color: var(--blass);
}
.fl-knoepfe { display: flex; gap: 0.35rem; flex: 0 0 auto; }

.ergebniszeile {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 0.6rem; font-size: 0.85rem; color: var(--grau);
}
.erg-zahl {
  font: 600 1.05rem/1 var(--grotesk); color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.erg-filter { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.filtermarke {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; text-decoration: none;
  padding: 0.1rem 0.5rem; border-radius: var(--radius-rund);
  background: var(--akzent-flach); color: var(--akzent);
  border: 1px solid var(--akzent-rand);
  transition: background var(--tempo);
}
.filtermarke:hover { background: var(--akzent-rand); color: var(--tinte); }
.filtermarke span { opacity: 0.7; }

@media (max-width: 48rem) {
  .filterleiste { padding: 0.6rem; gap: 0.5rem; }
  .fl-feld { flex: 1 1 100%; }
  .fl-knoepfe { width: 100%; }
  .fl-knoepfe .knopf { flex: 1; justify-content: center; }
}

/* ============================================================ Auswertung ===
   Balken statt Zahlenkolonnen: Wo der Trichter abknickt, sieht man auf einen
   Blick — bei zwei Spalten Zahlen müsste man rechnen. */

.trichter, .verteilung {
  display: grid; gap: 0;
  background: var(--flaeche); border-radius: var(--radius-flaeche);
  box-shadow: var(--schatten); padding: 0.3rem 0;
}

.tr-zeile, .vt-zeile {
  display: grid;
  grid-template-columns: 9.5rem 1fr 2.5rem 4.5rem;
  align-items: center; gap: 0.7rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--linie);
  text-decoration: none; color: var(--tinte);
  transition: background var(--tempo);
}
.trichter > :last-child, .verteilung > :last-child { border-bottom: 0; }
.vt-zeile:hover { background: var(--flaeche-2); }

.tr-titel { font-size: 0.85rem; font-weight: 500; }
.tr-balken, .vt-balken {
  height: 0.55rem; background: var(--flaeche-3);
  border-radius: var(--radius-rund); overflow: hidden; min-width: 2rem;
}
.tr-balken i, .vt-balken i {
  display: block; height: 100%; border-radius: var(--radius-rund);
  background: var(--tanne);
}
.vt-balken i { background: var(--akzent); }
.tr-zahl, .vt-zahl {
  font: 600 0.92rem/1 var(--grotesk); text-align: right;
  font-variant-numeric: tabular-nums;
}
.tr-quote, .vt-neben {
  font: 400 0.76rem/1 var(--mono); color: var(--blass); text-align: right;
}

/* Die Stelle, an der der Trichter reißt — dort lohnt das Nachdenken. */
.tr-zeile--knick { border-color: var(--signal-rand); background: var(--signal-glut); }
.tr-zeile--knick .tr-titel { color: var(--signal); }
.tr-zeile--knick .tr-balken i { background: var(--signal); }

.vt-name { min-width: 0; }

.summenzeile {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.5rem; padding: 0.55rem 0.8rem;
  border: 1px dashed var(--linie-stark); border-radius: var(--radius-gross);
  font-size: 0.85rem; color: var(--grau);
}
.summenzeile strong { font-size: 1rem; color: var(--tinte); font-variant-numeric: tabular-nums; }

@media (max-width: 48rem) {
  .tr-zeile, .vt-zeile {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "titel zahl quote" "balken balken balken";
    gap: 0.35rem 0.6rem; border-radius: var(--radius-gross) !important;
    margin-bottom: 0.35rem; border-bottom: 1px solid var(--linie);
  }
  .tr-titel, .vt-name { grid-area: titel; }
  .tr-zahl, .vt-zahl { grid-area: zahl; }
  .tr-quote, .vt-neben { grid-area: quote; }
  .tr-balken, .vt-balken { grid-area: balken; }
}

/* ========================================================== Detailseite ====
   Das Profil-Layout der Vorlage: Statreihe oben, links die Person (bei uns:
   der Betrieb), in der Mitte die Arbeit, rechts der schmale Rand. */

.statreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.ministat {
  display: grid; justify-items: start; gap: 0.3rem;
  padding: 0.9rem 1rem;
  background: var(--flaeche);
  border-radius: var(--radius-flaeche);
  box-shadow: var(--schatten);
}
.ms-name { font-size: 0.78rem; font-weight: 600; color: var(--grau); }
.ms-zahl {
  font: 700 1.5rem/1.1 var(--grotesk); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ms-zahl small { font-size: 0.85rem; font-weight: 500; color: var(--blass); }
.ms-zahl.still { color: var(--blass); font-weight: 500; }
.ms-neben { font-size: 0.74rem; color: var(--blass); }
.ministat .ring { --groesse: 3.4rem; }

.detail-gitter { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 74rem) {
  .detail-gitter { grid-template-columns: 19rem minmax(0, 1fr) 18rem; }
}
@media (min-width: 56rem) and (max-width: 74rem) {
  .detail-gitter { grid-template-columns: 19rem minmax(0, 1fr) 
; }
  .dg-rechts { grid-column: 1 / -1; display: grid; gap: 1rem;
               grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Profilkarte: Avatar mittig, Name, Pillen — wie der Personenkopf der Vorlage. */
.profil-kopf {
  display: grid; justify-items: center; gap: 0.3rem;
  padding: 1.4rem 1rem 1.1rem;
  text-align: center;
  border-bottom: 1px solid var(--linie);
}
.profil-name { margin: 0.35rem 0 0; font-size: 1.05rem; letter-spacing: -0.015em; }
.profil-pillen {
  display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
  justify-content: center; margin-top: 0.55rem;
}
.profil-pillen select { width: auto; font-size: 0.8rem; padding: 0.28rem 0.5rem; }
.avatar--riesig {
  width: 4.6rem; height: 4.6rem; font-size: 1.3rem;
  border-radius: var(--radius-gross);
}
.profil > h3 { border-top: 1px solid var(--linie); margin-top: 0.25rem; padding-top: 0.85rem; }
.profil .felder { grid-template-columns: auto 1fr; row-gap: 0.5rem; }
.profil .felder dt { align-self: baseline; }
.profil .felder dd { justify-self: end; text-align: right; font-weight: 500; }
.profil-person { margin-bottom: 0.6rem; }
.profil-person:last-of-type { margin-bottom: 0.3rem; }

/* Randlisten: schmale Karten rechts, wie die Payroll-Zeilen der Vorlage. */
.randliste { list-style: none; margin: 0; padding: 0 0 0.3rem; }
.randliste li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  border-bottom: 1px solid var(--linie);
}
.randliste li:last-child { border-bottom: 0; }
.randliste form { margin-left: auto; flex: none; }
.rl-text { display: grid; gap: 0.12rem; min-width: 0; }
.rl-titel { font-size: 0.82rem; font-weight: 600; display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.rl-pfad { font: 400 0.72rem/1.4 var(--mono); color: var(--grau); overflow-wrap: anywhere; }

/* ================================================== Auswahl und Ansichten ==
   Mehrfachauswahl mit Aktionsleiste unten, gespeicherte Ansichten als Chips —
   die Arbeitsteilung der Betriebsliste (Pflichtenheft 7.5). */

.tafel .wahl { width: 2.2rem; }
.tafel .wahl input { width: auto; }

.auswahlleiste {
  position: sticky; bottom: 0.6rem; z-index: 30;
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin-top: 0.7rem; padding: 0.6rem 0.9rem;
  background: var(--tinte); color: var(--grund);
  border-radius: var(--radius-flaeche); box-shadow: var(--schatten-hoch);
}
.auswahlleiste .al-gruppe { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.auswahlleiste select, .auswahlleiste input {
  width: auto; padding: 0.3rem 0.5rem; font-size: 0.8rem;
  background: color-mix(in srgb, var(--grund) 14%, transparent);
  border-color: transparent; color: var(--grund);
}
.auswahlleiste option { color: var(--tinte); }
.auswahlleiste input::placeholder { color: color-mix(in srgb, var(--grund) 65%, transparent); }
.auswahlleiste .knopf {
  background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent);
}

.ansichten { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.7rem; }
.ansicht-chip {
  display: inline-flex; align-items: center; gap: 0.15rem;
  background: var(--flaeche); border-radius: var(--radius-rund);
  box-shadow: var(--schatten); padding: 0.15rem 0.3rem 0.15rem 0.7rem;
}
.ansicht-chip a { text-decoration: none; color: var(--tinte); font-size: 0.8rem; font-weight: 500; }
.ansicht-chip a:hover { color: var(--akzent); }
.ansicht-chip.aktiv { background: var(--akzent-flach); }
.ansicht-chip form { display: contents; }
.ansicht-chip button {
  border: 0; background: none; cursor: pointer; color: var(--blass);
  font-size: 0.85rem; padding: 0 0.3rem; border-radius: 50%;
}
.ansicht-chip button:hover { color: var(--signal); }
.ansicht-sichern { display: flex; gap: 0.3rem; align-items: center; }
.ansicht-sichern input { width: 14rem; padding: 0.3rem 0.6rem; font-size: 0.8rem; }

.treffer-titel {
  padding: 0.4rem 0.55rem 0.15rem;
  font: 500 0.66rem/1.4 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blass);
}
.treffer-fund { display: block; font-style: normal; font-size: 0.75rem; color: var(--blass); }

.anhaenge { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.25rem; }
.anhang-chip {
  display: inline-flex; gap: 0.3rem; align-items: baseline;
  font-size: 0.76rem; text-decoration: none; color: var(--tinte);
  background: var(--flaeche-2); border-radius: var(--radius-rund);
  padding: 0.12rem 0.6rem;
}
.anhang-chip:hover { background: var(--flaeche-3); }

/* Aufklappbare Kleinformulare (Aufgabe, Ansprechpartner, HTML-Vorschau). */
.inline-form { margin-top: 0.5rem; }
.inline-form > summary {
  cursor: pointer; list-style: none; color: var(--akzent);
  font-size: 0.82rem; font-weight: 500; padding: 0.25rem 0;
}
.inline-form > summary::-webkit-details-marker { display: none; }
.inline-form[open] > summary { color: var(--grau); }
.inline-form form { margin-top: 0.4rem; }

.html-vorschau {
  width: 100%; height: 22rem; border: 1px solid var(--linie);
  border-radius: var(--radius); background: #fff; margin-top: 0.4rem;
}

.formkarte { max-width: 46rem; display: grid; gap: 0; }

@media (max-width: 48rem) {
  .auswahlleiste { gap: 0.5rem; bottom: 0.4rem; }
  .auswahlleiste .al-gruppe { flex: 1 1 100%; }
}

/* ============================================================ Einstellungen
   Untermenü links, Inhalt rechts. Eine lange Rolle wäre schneller gebaut,
   aber wer das Postfach einrichtet, sucht keine Nachfassfristen. */

.einst { display: grid; gap: 1.1rem; align-items: start; }
@media (min-width: 52rem) { .einst { grid-template-columns: 13rem 1fr; } }

.einst-menue {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-flaeche); padding: 0.4rem;
  position: sticky; top: 3.2rem;
}
.einst-menue a {
  padding: 0.42rem 0.6rem; border-radius: var(--radius);
  color: var(--grau); text-decoration: none; font-size: 0.85rem;
  transition: background var(--tempo), color var(--tempo);
}
.einst-menue a:hover { background: var(--flaeche-2); color: var(--tinte); }
.einst-menue a.aktiv { background: var(--flaeche-3); color: var(--tinte); font-weight: 600; }

.einst-inhalt { min-width: 0; }
.einst-titel {
  margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em;
}
.einst-lede { max-width: 42rem; margin: 0 0 0.9rem; }

/* Eine Einstellung mit Erklärung darunter. */
.wertzeile { padding: 0.7rem 0; border-bottom: 1px solid var(--linie); }
.wertzeile:first-child { padding-top: 0; }
.wertzeile:last-child { border-bottom: 0; padding-bottom: 0; }
.wertzeile-kopf { display: flex; align-items: baseline; gap: 0.5rem; }
.wertzeile label { margin-bottom: 0.3rem; color: var(--tinte); font-size: 0.86rem; font-weight: 500; }
.wertzeile .neben { margin: 0.25rem 0 0; max-width: 44rem; }
.wertzeile .zuruecksetzen { margin-top: 0.35rem; font-size: 0.74rem; }

.abweich {
  font: 500 0.64rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--signal); background: var(--signal-flach);
  border: 1px solid var(--signal-rand); border-radius: 3px; padding: 0 0.3rem;
}

.mit-einheit { display: flex; align-items: center; gap: 0.6rem; }
.mit-einheit input { max-width: 9rem; }
.einheit { font: 400 0.8rem/1 var(--mono); color: var(--blass); }

/* Eine Automatikregel: Bedingung fett, Folge darunter. */
.regel {
  display: flex; gap: 0.65rem; align-items: flex-start;
  padding: 0.7rem 0.8rem; margin-bottom: 0.35rem;
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  background: var(--flaeche-2); cursor: pointer; color: var(--tinte);
  transition: border-color var(--tempo), opacity var(--tempo);
}
.regel:hover { border-color: var(--linie-stark); }
.regel input { width: auto; margin-top: 0.15rem; flex: none; }
.regel--aus { opacity: 0.5; }
.regel-text { display: grid; gap: 0.15rem; }
.regel-wenn { font-weight: 600; font-size: 0.85rem; display: flex; gap: 0.45rem; align-items: baseline; }
.regel-nr {
  font: 500 0.66rem/1.5 var(--mono); color: var(--blass);
  background: var(--grund); border-radius: 3px; padding: 0 0.32rem; flex: none;
}
.regel-dann { color: var(--grau); font-size: 0.81rem; }

.gesperrt { opacity: 0.55; }

@media (max-width: 52rem) {
  .einst-menue {
    position: static; flex-direction: row; overflow-x: auto;
    padding: 0.3rem; gap: 0.2rem;
  }
  .einst-menue a { white-space: nowrap; }
}

/* ============================================================== Mobil ====
   Unterwegs wird gelesen und telefoniert, nicht gepflegt (Pflichtenheft 7.9).
   Tabellen tragen auf 375 Pixeln nicht — sie werden zu Karten: Name groß,
   alles andere als beschriftete Zeile darunter, die Handlung als voller Knopf.
   Wer im Auto steht und anrufen will, soll nicht seitwärts scrollen müssen. */

@media (max-width: 48rem) {
  body { font-size: 0.9rem; }

  .rahmen { grid-template-columns: 1fr; }

  /* Navigation als Reihe oben, mitlaufend. */
  .leiste {
    position: sticky; top: 0; z-index: 40; height: auto;
    flex-direction: row; align-items: stretch;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: 0; border-bottom: 1px solid var(--linie);
    padding: 0; gap: 0;
    background: var(--flaeche);
  }
  .leiste .marke, .leiste .fuss { display: none; }
  .leiste nav { display: flex; width: 100%; }
  .leiste nav a {
    margin: 0; border-radius: 0; padding: 0.7rem 0.85rem;
    border-bottom: 2px solid transparent; white-space: nowrap;
    font-size: 0.88rem;
  }
  /* Mobil gibt es keine gefüllte Pille — dann muss auch die helle Textfarbe
     zurück, sonst steht dunkle Schrift auf dunklem Grund. */
  .leiste nav a.aktiv {
    background: none; border-bottom-color: var(--akzent);
    color: var(--tinte);
  }
  .leiste nav a.aktiv .zahl { background: var(--flaeche-2); color: var(--blass); }
  .leiste nav a.aktiv .zahl.glut { background: var(--signal-flach); color: var(--signal); }
  .leiste nav a .zahl { margin-left: 0.35rem; }

  /* Kopfzeile mobil: Zeile eins Titel und Profil, Zeile zwei die Suche in
     voller Breite — nebeneinander bleibt für beides zu wenig. */
  .kopfzeile { flex-wrap: wrap; gap: 0.55rem 0.6rem; padding: 0.7rem 0.8rem; }
  .kz-titel { font-size: 1.08rem; }
  .kz-rechts { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.55rem; }
  .kz-rechts .suche { order: 5; flex: 1 1 100%; width: 100%; }
  .suche kbd { display: none; }

  .inhalt { padding: 0.75rem; }
  .nur-gross { display: none !important; }
  .nur-klein { display: inline; }

  /* Vier Kacheln passen als Zweierpaare — einspaltig wäre eine halbe
     Bildschirmhöhe nur für Zahlen. */
  .ueberblick { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.1rem; }
  .zahlkachel { padding: 0.7rem 0.8rem; border-radius: var(--radius-gross); }
  .zk-zahl { font-size: 1.5rem; }

  .signalkarten { grid-template-columns: 1fr; }
  .signalkarte { border-radius: var(--radius-gross); }
  .sk-fuss .knopf { width: 100%; justify-content: center; }
  .aufgabenliste form { width: 100%; }
  .aufgabenliste form .knopf, .aufgabenliste button { width: 100%; justify-content: center; }
  .knappliste li { flex-wrap: wrap; }
  .nur-klein { display: inline; }

  /* ---------- Tabellen werden Karten ---------- */
  .umbruch { border: 0; background: none; border-radius: 0; overflow: visible; }
  .tafel, .tafel tbody, .tafel tr, .tafel td { display: block; width: 100%; }
  .tafel thead { display: none; }

  .tafel tr {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    position: relative;
  }
  .tafel tr:hover { background: var(--flaeche); }
  .tafel tr.warm {
    background: var(--signal-glut);
    border-color: var(--signal-rand);
  }
  .tafel tr.warm td:first-child { box-shadow: none; }

  .tafel td {
    padding: 0.12rem 0; border: 0;
    display: flex; align-items: baseline; gap: 0.5rem;
  }
  /* Beschriftung aus dem Kopf mitgeben — sonst steht der Wert ohne Bezug da. */
  .tafel td[data-t]::before {
    content: attr(data-t);
    flex: 0 0 5.6rem;
    font: 500 0.68rem/1.5 var(--mono);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--blass);
  }
  /* Der Name trägt die Karte: groß, ohne Beschriftung, volle Breite. */
  .tafel td:first-child { display: block; margin-bottom: 0.35rem; }
  .tafel td:first-child::before { display: none; }
  .tafel a.name { font-size: 1rem; line-height: 1.25; display: block; }

  /* Handlungsknöpfe unten, volle Breite, mit Daumen erreichbar. */
  .tafel td:last-child:not([data-t]) { margin-top: 0.5rem; display: block; }
  .tafel td:last-child .knopf,
  .tafel td:last-child form,
  .tafel td:last-child button {
    width: 100%; justify-content: center;
  }
  .tafel .leerzeile { border-style: dashed; }
  .tafel .leerzeile td { text-align: center; padding: 0.8rem 0; }
  .tafel .leerzeile td::before { display: none; }

  /* Die Kette bleibt als Punktreihe lesbar. */
  .tafel td .kette--klein { grid-template-columns: repeat(4, 0.7rem); }

  /* ---------- Betriebsdetail ---------- */

  /* Detailseite einspaltig: erst die Statreihe, dann Reaktion, Profil,
     Eingabe, Rand, Verlauf. */
  .detail-gitter { grid-template-columns: 1fr; }
  .dg-links, .dg-mitte, .dg-rechts { display: contents; }
  .dg-mitte > .kasten--signal, .dg-mitte > .kasten:first-child { order: 1; }
  .profil { order: 2; }
  .dg-mitte > .kasten:nth-child(2) { order: 3; }
  .dg-rechts > .kasten { order: 4; }
  .dg-mitte > .kasten:nth-child(3) { order: 5; }
  .kasten--zu { order: 6; }
  .statreihe { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .ministat { border-radius: var(--radius-gross); }

  .kette { grid-template-columns: repeat(4, 1fr); }
  .kette .titel { font-size: 0.66rem; }

  /* Anrufen und Mailen mit dem Daumen. */
  .kasten .felder a[href^="tel:"], .kasten .felder a[href^="mailto:"] {
    display: inline-block; padding: 0.15rem 0;
  }
  .knopfreihe .knopf { flex: 1 1 auto; justify-content: center; }

  .reiter button { padding: 0.6rem 0.7rem; font-size: 0.85rem; }

  /* Eingabefelder groß genug, damit iOS nicht hineinzoomt. */
  textarea, input[type=text], input[type=email], input[type=password],
  input[type=date], input[type=number], input[type=search], select {
    font-size: 16px; padding: 0.5rem 0.6rem;
  }

  /* Pipeline gestapelt: Zehn Bahnen zum Durchwischen sind auf dem Telefon
     keine Übersicht. Leere und zusammengeklappte Stufen entfallen — ihre
     Zähler stehen in der Leiste oben. */
  .spalten { display: block; overflow: visible; }
  .spalte { width: 100%; margin-bottom: 0.85rem; }
  .spalte--leer, .spalte--klein { display: none; }

  .anmeldung form { padding: 1.25rem; }
}

/* Sehr schmal (320): enger stellen, nichts weglassen.
   Die Stationsnamen der Kette bleiben stehen — ohne sie sind die Punkte
   bedeutungslos, und ein Tooltip hilft mit dem Finger nicht weiter. Nur das
   Datum weicht, es steht ohnehin im Satz darüber. */
@media (max-width: 22.5rem) {
  /* Etikett bleibt neben dem Wert — „Leer", „8", „Erste Mail raus" passen
     locker daneben, und untereinander würde jede Karte doppelt so hoch. */
  .tafel td[data-t]::before { flex-basis: 4.2rem; }
  .inhalt { padding: 0.6rem; }
  .tafel tr { padding: 0.55rem 0.6rem; }
  .kette .titel { font-size: 0.6rem; letter-spacing: -0.01em; }
  .kette .datum { display: none; }
  .betriebkopf h1 { font-size: 1.05rem; }
}