/* Ein Stylesheet für alles. Dot-Grid-Sprache: weiße Karten auf Punktraster,
   die Markenfarbe des Mandanten ist die einzige variable Größe. */
:root{
  --akzent:#023047; --akzent-weich:color-mix(in srgb,var(--akzent) 9%,white);
  --tinte:#111827; --grau:#6b7280; --leise:#9ca3af;
  --linie:#e5e7eb; --karte:#fff; --grund:#fafafa;
  --gruen:#15803d; --gruen-weich:#f0fdf4; --rot:#b91c1c; --rot-weich:#fef2f2;
  --gelb:#a16207; --gelb-weich:#fffbeb; --blau:#0550ae;
  --radius:16px; --schatten:0 1px 2px rgba(17,24,39,.04),0 8px 26px rgba(17,24,39,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--tinte);background:var(--grund);
  /* Flex-Spalte, damit die Drei-Saeulen-Ansicht genau den Rest unter dem Kopf
     bekommt — egal ob das Plattform-Band gerade da ist oder nicht. */
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  background-image:radial-gradient(circle,#dde1e6 1px,transparent 1px);background-size:22px 22px;
  font-size:14px;line-height:1.5}
a{color:var(--blau);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:20px;letter-spacing:-.02em;margin:0}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--grau);margin:0 0 9px;font-weight:700}

/* Kopfleiste */
.kopf{background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:20}
/* Volle Breite, keine Zentrierung: Die Arbeitsflaeche darunter nutzt den ganzen
   Bildschirm, ein auf 1320px eingeschnuerter Kopf haette danebengestanden.
   `flex-wrap:nowrap` ist Absicht — die Leiste soll NIE umbrechen; zu viele
   Punkte gehoeren unter „Mehr", nicht in eine zweite Zeile. */
.kopf .inner{margin:0;padding:10px 18px;display:flex;gap:16px;align-items:center;
  flex-wrap:nowrap;min-height:38px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--tinte)}
.logo:hover{text-decoration:none}
.punkt{width:30px;height:30px;border-radius:9px;background:var(--akzent);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:13px;letter-spacing:-.02em}
.logo-text{white-space:nowrap;max-width:20ch;overflow:hidden;text-overflow:ellipsis}
nav{display:flex;gap:14px;font-size:13.5px;align-items:center;flex-wrap:nowrap;min-width:0}
nav > a{color:var(--grau);white-space:nowrap}
nav > a.an{color:var(--tinte);font-weight:600}

/* „Mehr" — alles, was man nicht taeglich braucht, in einem gewoehnlichen
   Auswahlfeld. Der erste Entwurf war eine aufklappbare Liste; die stand am
   Handy als Fliesstext in der Leiste. Native Bedienelemente sind hier
   schlicht besser. */
select.mehr,.umschalter select{border:1px solid var(--linie);border-radius:8px;
  padding:5px 9px;font-size:12.5px;color:var(--grau);background:#fff}
select.mehr{max-width:130px}
select.mehr:hover{color:var(--tinte);border-color:var(--akzent)}

.konto{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;
  color:var(--grau);flex-wrap:nowrap;white-space:nowrap}
.konto form{margin:0}
.konto .ich{max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.konto button.leise{padding:5px 11px}
@media(max-width:900px){
  .logo-text{display:none}
  nav{gap:11px;font-size:13px;overflow-x:auto}
  .konto .ich{display:none}
}
/* Betreiber-Umschalter — nur Plattform-Konten sehen ihn ueberhaupt. Bewusst
   unauffaellig: er gehoert nicht zur Arbeit des Betreibers. */
.umschalter select{max-width:210px}
.umschalter select:hover{color:var(--tinte);border-color:var(--akzent)}
/* Fremde Ansicht muss man SEHEN — sonst haelt man sie fuer die eigene. */
.fremdband{background:#fff4d6;border-bottom:1px solid #e8d08a;color:#6b5314;
  font-size:13px;padding:8px 20px;display:flex;align-items:center;gap:12px;
  justify-content:center}
.fremdband form{margin:0}
.fremdband button{background:#6b5314;color:#fff;padding:4px 10px;font-size:12px}

main{max-width:none;margin:22px 0 60px;padding:0 22px;width:100%}
/* Formulare und Einstellungen bleiben schmal — eine 2500 px breite Eingabezeile
   liest niemand gern. Listen und Tabellen nehmen den ganzen Platz. */
main.schmal{max-width:820px;margin:22px auto 60px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--schatten)}
.karte.warnung{border-left:3px solid var(--rot)}
.karte.wartet{border-left:3px solid var(--gelb)}

/* Kennzahlen + Raster */
.kzleiste{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:18px}
.kz .w{font-size:22px;font-weight:800;letter-spacing:-.02em}
.kz .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--grau)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:12px}
.f .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--grau)}
.f .w{font-weight:700;font-size:14.5px;margin-top:2px}

/* Bedienelemente */
button,.knopf{border:0;border-radius:10px;padding:9px 16px;font:600 13.5px inherit;cursor:pointer;
  background:var(--akzent);color:#fff;transition:filter .15s,transform .06s}
button:hover{filter:brightness(1.1)}button:active{transform:scale(.99)}
button.leise{background:#fff;color:var(--tinte);border:1px solid var(--linie);font-weight:500}
button.gruen{background:var(--gruen)}button.rot{background:#fff;color:var(--rot);border:1px solid #fecaca}
input,select,textarea{border:1px solid #d1d5db;border-radius:9px;padding:8px 11px;font:14px inherit;
  background:#fff;color:var(--tinte)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--akzent-weich);border-color:var(--akzent)}
label{font-size:12.5px;color:var(--grau)}
.zeile{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* Tabellen */
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--grau);
  font-weight:600;padding:0 10px 8px 0;border-bottom:1px solid var(--linie)}
td{padding:9px 10px 9px 0;border-bottom:1px solid #f3f4f6;vertical-align:top}
tr:last-child td{border-bottom:0}

/* Hinweise & Etiketten */
.hinweis{font-size:13px;border-radius:10px;padding:9px 12px;margin-top:10px}
.h-warn{background:var(--gelb-weich);border:1px solid #fde68a;color:var(--gelb)}
.h-ok{background:var(--gruen-weich);border:1px solid #bbf7d0;color:var(--gruen)}
.h-rot{background:var(--rot-weich);border:1px solid #fecaca;color:var(--rot)}
.pille{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;
  background:#f3f4f6;color:var(--grau)}
.pille.gruen{background:var(--gruen-weich);color:var(--gruen)}
.pille.rot{background:var(--rot-weich);color:var(--rot)}
.pille.blau{background:#eff6ff;color:var(--blau)}
.pille.gelb{background:var(--gelb-weich);color:var(--gelb)}
.klein{font-size:12.5px;color:var(--grau)}
/* EINE Definition. Vorher stand weiter unten eine zweite `.leer`-Regel, die
   diese hier ueberall ueberschrieb — der gestrichelte Kasten erschien nie. */
.leer{text-align:center;color:var(--grau);border:1px dashed #d1d5db;border-radius:var(--radius);
  padding:26px;background:rgba(255,255,255,.6)}
.liste .leer{border:0;border-radius:0;background:none;padding:26px 14px;
  color:var(--leise);font-size:13px}

/* Zweispaltig: Anfrage | Antwort (die Antwort darf etwas breiter sein) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
.split > .karte{margin-bottom:0}
@media(max-width:1000px){.split{grid-template-columns:1fr}}

/* Mail-Darstellung + Entitäten */
.mail{white-space:pre-wrap;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#fbfcfd;border:1px solid var(--linie);border-radius:12px;padding:14px;margin:0}
mark{border-radius:4px;padding:0 3px;font-weight:600}
mark.m-zeitraum{background:#dbeafe;color:#1d4ed8}
mark.m-stadt{background:#dcfce7;color:#15803d}
mark.m-personen{background:#ffedd5;color:#c2410c}
mark.m-einheiten{background:#f3e8ff;color:#7e22ce}
mark.m-budget{background:#ccfbf1;color:#0f766e}
mark.m-besonderes{background:#fee2e2;color:#b91c1c}
/* Was wir dem Kunden ZUGESAGT haben — gruen wie die Fahne links daneben.
   Beim Nachverhandeln muss man in einer Sekunde sehen, was schon versprochen
   ist, ohne die halbe Mail zu lesen. */
mark.m-zusage{background:#dcfce7;color:#166534;font-weight:700}

/* Editor mit farbiger Unterlegung */
.editor{position:relative}
.editor .unterlegung,.editor textarea{font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:14px;border:1px solid var(--linie);border-radius:12px;white-space:pre-wrap;word-wrap:break-word;
  margin:0;width:100%;min-height:360px;max-height:58vh;overflow:auto}
.editor .unterlegung{position:absolute;inset:0;background:#fbfcfd;color:var(--tinte);pointer-events:none}
.editor textarea{position:relative;background:transparent;color:transparent;caret-color:var(--tinte);resize:vertical}
.editor textarea::selection{background:#bfdbfe}
.betreff{font:600 13.5px/1.4 ui-sans-serif,system-ui;width:100%;margin-bottom:9px}

/* Blasen */
.blase{max-width:76%;border-radius:14px;padding:11px 14px;margin:8px 0;font-size:13.5px;white-space:pre-wrap}
.blase.kunde{background:#f3f4f6;margin-right:auto}
.blase.wir{background:#eff6ff;margin-left:auto}
.blase .meta{font-size:11px;color:var(--leise);margin-top:5px}

/* Handy: die Arbeitsflaeche muss in der Hand funktionieren — Vertrieb entscheidet unterwegs */
@media(max-width:760px){
  body{font-size:15px}
  .kopf .inner{flex-wrap:wrap;gap:10px;padding:10px 14px}
  nav{order:3;width:100%;gap:14px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  nav a{white-space:nowrap}
  .konto{font-size:12px}
  main{padding:0 14px;margin-top:14px}
  .karte{padding:16px;border-radius:14px}
  .kzleiste{gap:18px}
  .kz .w{font-size:19px}
  .raster{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
  .zeile{gap:8px}
  button,.knopf{padding:11px 16px}          /* Fingergroesse */
  input,select,textarea{font-size:16px}      /* verhindert Zoom beim Antippen (iOS) */
  table{display:block;overflow-x:auto;white-space:nowrap}
  .blase{max-width:92%}
  .editor .unterlegung,.editor textarea{min-height:260px;font-size:13px}
}
@media(max-width:420px){ .kopf .logo span:last-child{display:none} }

/* Kennzahl im Verdraengungs-Rechner — die Zahl muss man von weitem sehen,
   der Beleg darunter ist zum Nachlesen. */
.zahl{font-size:20px;font-weight:650;letter-spacing:-.4px;margin-top:2px}

/* ══ Drei Säulen: Liste | Anfrage | unsere Antwort ══════════════════════
   Abgelöst am 16.09.2026 den „Schreibtisch" (Ansage Jörn: die Deals-Ansicht
   ist die bessere Arbeitsfläche — Schreibtisch war auf Tempo optimiert, die
   Arbeit ist aber Lesen und Antworten). Vorbild ist der Mail-Posteingang:
   links die Liste, rechts der geöffnete Vorgang, und der besteht seinerseits
   aus Anfrage und Antwort nebeneinander. */
.drei{display:grid;grid-template-columns:330px minmax(0,1fr);gap:0;
  flex:1;min-height:0;align-items:stretch}
.spalte-liste{border-right:1px solid var(--linie);background:#fbfcfd;
  display:flex;flex-direction:column;min-height:0}
/* `max-width` und `margin:auto` muessen weg: Die Spalte IST ein <main> und erbte
   dadurch die 1320px-Begrenzung samt Zentrierung — auf breiten Bildschirmen stand
   der Inhalt dann eingeschnuert in der Mitte, waehrend links und rechts der
   Punktraster durchschien. */
.spalte-inhalt{overflow-y:auto;padding:14px 18px 90px;min-width:0;
  max-width:none;margin:0;width:100%}
.spalte-inhalt > .split:first-child{margin-top:0}

/* Karten-Raster fuer alles UNTER dem Anfrage/Antwort-Paar. Anders als `.split`
   (feste zwei Spalten) fuellt eine allein stehende Karte hier die ganze Zeile —
   sonst hing z. B. „Angebot" als schmale Karte links und rechts daneben war
   nichts, was verloren aussah. */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:12px;align-items:start;margin-top:12px}
.karten > .karte{margin-bottom:0}

/* Die zwei PMS-Knoepfe („absichern" / „angenommen") stehen untereinander statt
   nebeneinander: Beide tragen eine Erklaerzeile, und nebeneinander wurden die
   Knoepfe so schmal, dass die Beschriftung umbrach. */
.knopfreihe{display:flex;flex-direction:column;gap:12px}
.knopfreihe form{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.knopfreihe button{width:100%;padding:11px 14px;font-size:14px;text-align:left}

.liste-kopf{padding:10px 12px;border-bottom:1px solid var(--linie);background:#fff}
.reiter{display:flex;gap:4px;margin-bottom:8px}
.reiter a{font-size:13px;font-weight:600;color:var(--grau);text-decoration:none;
  padding:5px 10px;border-radius:8px}
.reiter a.an{background:var(--akzent-weich);color:var(--akzent)}
.suche{display:flex;gap:6px;margin:0}
.suche input,.suche select{border:1px solid var(--linie);border-radius:8px;
  padding:6px 9px;font-size:12.5px;background:#fff;min-width:0}
.suche input{flex:1}

.liste{overflow-y:auto;flex:1;min-height:0}
.liste .zeile{display:block;padding:11px 13px;border-bottom:1px solid var(--linie);
  text-decoration:none;color:inherit;cursor:pointer}
.liste .zeile:hover{background:#f4f7fa}
.liste .zeile.gewaehlt{background:var(--akzent-weich);
  box-shadow:inset 3px 0 0 var(--akzent)}
.zeile-kopf{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.zeile-kopf .wer{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeile-kopf .wann,.zeile .akteur{color:var(--leise);font-size:11.5px;white-space:nowrap}
.zeile-text{font-size:12.5px;color:var(--grau);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zeile-fuss{font-size:11.5px;color:var(--leise);margin-top:5px}
.punkt-status{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:5px;background:var(--leise);vertical-align:middle}
.s-ausnahme{background:var(--rot)}.s-angebot,.s-verhandlung{background:#d97706}
.s-gebucht,.s-bezahlt,.s-abgerechnet{background:var(--gruen)}
.s-verloren{background:#cbd5e1}
.zeile .akteur.bot{color:var(--akzent);font-weight:600}
.zeile .akteur.mensch{color:var(--gruen);font-weight:600}
.leerbereich{max-width:560px;margin-top:6vh}
.zahlenzeile{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-size:13px;color:var(--grau)}

/* Immer erreichbar: neuen Fall anlegen, von jeder Seite aus. */
.plus{position:fixed;right:22px;bottom:22px;z-index:800;width:52px;height:52px;
  border-radius:50%;background:var(--akzent);color:#fff;font-size:30px;line-height:50px;
  text-align:center;text-decoration:none;box-shadow:0 6px 20px rgba(2,48,71,.34);
  transition:transform .12s ease}
.plus:hover{transform:translateY(-2px)}

@media(max-width:1100px){
  .drei{grid-template-columns:1fr;height:auto}
  .spalte-liste{border-right:0;border-bottom:1px solid var(--linie);max-height:44vh}
  .spalte-inhalt{padding:14px}
}

/* Seitenkopf — eine Zeile, ueberall gleich: Titel, Beiwerk, rechts die Aktion.
   Vorher trug jede Seite ihre eigene Randberechnung als Inline-Stil, vier von
   dreizehn hatten gar keine Ueberschrift. */
.seitenzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.seitenzeile h1{margin:0}
.rechts{margin-left:auto}

/* ══ Schrittkette: in welchem Schritt steht der Vorgang? ═════════════════════
   Ansage Jörn (16.09.2026): Der Stand gehört nach ganz oben UND muss von dort
   aus änderbar sein. Eine reine Anzeige-Pille führt dazu, dass niemand den Stand
   pflegt — und dann stimmt die Liste links nicht mehr. Optisch bewusst eine
   zusammenhängende Leiste statt sieben Einzelknöpfe: Es ist ein Weg, kein Menü. */
.schrittzeile{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0}
.schritte{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0}
/* Neben dem Weg, nicht auf ihm: freihalten und verlieren sind in jedem Schritt
   moeglich und gehoeren deshalb abgesetzt — mit Abstand und eigener Rundung. */
.schrittzeile .abseits{display:flex;align-items:center;gap:8px;margin-left:14px}
.schrittzeile .abseits form{margin:0}

/* ACHTUNG Rangfolge: Die Zustaende MUESSEN genauso spezifisch geschrieben sein
   wie die Grundregel. Vorher hiess die Grundregel `.schrittzeile button.schritt`
   (zwei Klassen + Element) und der Zustand nur `.schritt.jetzt` (zwei Klassen) —
   damit gewann die Grundregel, und der aktuelle Schritt sah aus wie jeder
   andere. Die Hover-Regel war dagegen spezifisch genug und faerbte den Text
   weiss: weisse Schrift auf weissem Grund, ein leeres Kaestchen. */
.schrittzeile button.schritt{background:#fff;border:1px solid var(--linie);color:var(--grau);
  border-radius:0;padding:7px 13px;font:600 12.5px inherit;margin-left:-1px;
  white-space:nowrap;filter:none;transition:background .1s,color .1s,border-color .1s}
.schrittzeile button.schritt:first-child{border-radius:9px 0 0 9px;margin-left:0}
.schrittzeile .abseits button.schritt{border-radius:9px;margin-left:0}

/* Schon gegangen: gedeckt gruen, aber nicht laut — der Weg dahinter zaehlt nicht. */
.schrittzeile button.schritt.erledigt{color:var(--gruen);background:var(--gruen-weich);
  border-color:#bbf7d0}

/* HIER stehen wir. Gefuellt, eigene Rundung, leicht angehoben und ueber den
   Nachbarn — man soll den Stand aus drei Metern Entfernung sehen. */
.schrittzeile button.schritt.jetzt{background:var(--akzent);border-color:var(--akzent);
  color:#fff;border-radius:9px;position:relative;z-index:2;padding:8px 16px;
  box-shadow:0 2px 8px rgba(2,48,71,.28)}
.schrittzeile button.schritt.jetzt-rot{background:var(--rot);border-color:var(--rot);
  color:#fff;border-radius:9px;position:relative;z-index:2;
  box-shadow:0 2px 8px rgba(185,28,28,.26)}

/* Anfassbar: Wer mit der Maus darauf steht, sieht, dass ein Klick den Vorgang
   dorthin setzt. Bewusst gefuellt statt nur umrandet — ein blosser Rahmen sah
   nach Eingabefeld aus. */
.schrittzeile button.schritt:hover{background:var(--akzent-weich);color:var(--akzent);
  border-color:var(--akzent);border-radius:9px;position:relative;z-index:3;cursor:pointer}
.schrittzeile button.schritt.erledigt:hover{background:var(--akzent-weich);color:var(--akzent)}
/* Auf dem aktuellen Schritt passiert nichts — man ist schon da. */
.schrittzeile button.schritt.jetzt:hover{background:var(--akzent);color:#fff;
  border-color:var(--akzent);cursor:default}
.schrittzeile button.schritt.jetzt-rot:hover{background:var(--rot);color:#fff;
  border-color:var(--rot);cursor:default}

/* Eingeklappte Karten (Verlauf) sehen aus wie Karten, nehmen aber nur eine
   Zeile, solange niemand hineinschaut. */
details.karte > summary{cursor:pointer;list-style:none;font-weight:600;color:var(--grau);
  text-transform:uppercase;letter-spacing:.07em;font-size:12px}
details.karte > summary::-webkit-details-marker{display:none}
details.karte > summary::before{content:"▸ ";color:var(--leise)}
details.karte[open] > summary::before{content:"▾ "}

/* ══ Kopf der Deal-Seite — alles, was „wer und wo stehen wir" beantwortet ═════
   Ansage Jörn (16.09.2026): „wir müssen hier etwas Platz sparen." Vorher waren
   das drei Blöcke untereinander (Titelzeile, Firmen-Karte, Schrittkette) mit
   rund 210 Pixeln, bevor die erste Zahl kam — und die Karte wiederholte den
   Firmennamen aus der Überschrift und die Domain gleich zweimal. Jetzt: drei
   enge Zeilen ohne Karte, auf dem Punktraster. */
.deal-kopf{margin:0 0 12px;display:flex;flex-direction:column;gap:7px}
.deal-kopf h1{font-size:19px}
.deal-firma{display:flex;flex-wrap:wrap;align-items:center;gap:5px;line-height:1.35}
.deal-firma b{color:var(--tinte)}

/* Die Angebots-Karte ist eine Zahlenbank, kein Lesetext — sie darf enger
   sitzen, und der Endpreis bleibt trotzdem die groesste Zahl der Seite. */
.karte.angebot{padding:13px 18px 14px}
.karte.angebot .raster{gap:10px 14px}
.karte.angebot .f .w{font-size:14px}
.karte.angebot .f .l{font-size:10.5px}

/* Der Firmenname ist die Überschrift UND der Weg in die Akte. Blau wie ein
   gewöhnlicher Link wäre hier falsch — es ist zuerst der Titel der Seite. */
.deal-kopf h1 a{color:var(--tinte)}
.deal-kopf h1 a:hover{color:var(--akzent)}

/* Kartenkopf mit Aktionen rechts: Die Überschrift trägt, was man mit der Karte
   tun kann. Die zwei PMS-Knöpfe lagen vorher in einer eigenen Karte weit unten
   — die zwei wichtigsten Entscheidungen der Seite hinter dem längsten Weg. */
.karten-kopf{align-items:baseline;gap:12px;margin-bottom:9px}
.karten-kopf h2{margin:0}
.pms-knoepfe{display:flex;gap:8px;align-items:center}
.pms-knoepfe form{margin:0}
.pms-knoepfe button{padding:7px 13px;font-size:12.5px;white-space:nowrap}
@media(max-width:700px){
  .karten-kopf{flex-wrap:wrap}
  .pms-knoepfe{margin-left:0;width:100%}
  .pms-knoepfe form{flex:1}
  .pms-knoepfe button{width:100%}
}

/* Ein gesetzter Blocker ist ein Zustand, kein Angebot — er traegt Farbe. */
.schrittzeile button.schritt.gehalten{background:var(--gelb-weich);color:var(--gelb);
  border-color:#fde68a}
.schrittzeile button.schritt.gehalten:hover{background:#fde68a;color:#6b5314;
  border-color:#eab308}

/* Handlungsband: Wenn genau eine Sache dran ist, bekommt sie eine eigene Zeile
   mit Rand in der Markenfarbe. Bewusst selten — sobald zwei davon
   uebereinanderstehen, ist keine mehr dringend. */
.tatband{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-left:3px solid var(--gruen);background:var(--gruen-weich)}
.tatband form{margin-left:auto}
.tatband button{padding:11px 18px;font-size:14px}