/* tenderscore.css — das Erscheinungsbild der Web-Oberflaeche. Eine Datei,
   kein Build-Schritt, kein Framework.
   Stand 2026-09-15: Grundlage ist design/handoff/2026-09-15/tenderscore.css
   (Claude Design, auf der Fassung vom 13.09. aufgebaut). Uebernommen mit
   allen Regeln; am Ende wieder angehaengt, was das Paket nicht kannte
   (Aufklapper-Farben, Abstaende Wochenmail/Profil-loeschen) und was es fuer
   Seiten nach dem 13.09. braucht (Abmelden im Konto-Menue, Suchformular,
   Sortier-Umschalter). Umbruchregel vom 13.09. unveraendert: Datum,
   Tageszahl, Wert, Ort, Quelle ohne Silbentrennung (.fest, .ganz, .frist).
   Regel aus CLAUDE.md: Losfelder werden nicht hier und nicht im Template
   formatiert, sondern in vergabe.formatters. */
:root{
  --bg:#f4f3f0; --surface:#ffffff; --ink:#1d2024; --muted:#5f656b; --line:#d9d6d0; --line-strong:#b9b4ab;
  --line-weich:#ece9e4;
  --accent:#255b7c; --accent-hover:#1a4560; --accent-soft:#e4eef4; --accent-soft-line:#c8d9e4; --focus:#255b7c; --focus-weich:#8fb9d6;
  --ok-bg:#e9f2ea; --ok-ink:#215d37; --ok-line:#c2dac8;
  --wait-bg:#faf3dc; --wait-ink:#6a4f04; --wait-line:#e4d39d;
  --err-bg:#f8e7e4; --err-ink:#8d2a20; --err-line:#e5bab3;
  --chip-bg:#eceff2; --chip-ink:#374350; --chip-line:#cfd6dc;
  --font:-apple-system,"Segoe UI",system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:6px; --schatten:0 1px 2px rgba(29,32,36,.04); --maxw:940px;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5;font-variant-numeric:tabular-nums}
*{box-sizing:border-box}

/* Silbentrennung und Notumbruch nur, wo Fliesstext steht: Titel und
   Auftraggeber. Datum, Tageszahl, Wert, Ort, Quelle tragen .fest. */
.trennbar,.card h3 a,td[data-l="Los"],td[data-l="Auftraggeber"]{hyphens:auto;overflow-wrap:break-word}
.fest{white-space:nowrap;hyphens:none}
.ganz{hyphens:none}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
/* Fokusring in --focus = Akzent (17.10.2026, Gegenpruefung Preisseite): mind. 3:1 gegen jede helle Flaeche, auf der er
   liegt (tests/test_fokusring.py); vorher #8fb9d6 mit 2,1:1 auf Weiss. Auf den dunklen Flaechen weiss, in deren hellen
   Klappen (Konto-Menue, Profilwahl) wieder Akzent. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.top :focus-visible,.lp .hero :focus-visible{outline-color:#fff}
.top .klappe :focus-visible{outline-color:var(--focus)}   /* aufgeklappte Menues der Kopfleiste sind hell */
.page{max-width:var(--maxw);margin:0 auto;padding:0 24px 48px}

/* ---- Kopf ----------------------------------------------------------- */
/* Ziele mindestens 44 px hoch in Kopf- und Fussleiste, app-weit und in jeder Breite (Auftrag 20.10.2026, WCAG 2.5.5):
   Marke, Reiter, Profilwaehler, Abmelden, Konto, Gast-Knoepfe, die Eintraege beider Klappen, die Fusslinks. Marke
   und Fusslinks haben keinen sichtbaren Kasten: negativer Rand, die Trefferflaeche waechst, die Zeile nicht. Am
   Desktop bleibt der Kopf 61 px hoch (min-height 58 px), am Handy wird er so hoch wie auf den Seiten des Assistenten
   seit dem 19.10. (123 statt 104 px mit Profilwaehler). Waechter: tests/test_kopf_fuss_ziele.py. */
.top{background:var(--accent-hover);border-bottom:3px solid var(--accent)}
.top .page{display:flex;align-items:center;gap:26px;min-height:58px;padding-top:0;padding-bottom:0;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.015em;color:#fff;text-decoration:none;font-size:18px;
  display:inline-flex;align-items:center;min-height:44px;margin:-8px 0}
.brand:hover{color:#fff}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--accent-soft);font-size:15px;padding:7px 12px;border-radius:var(--r);border:1px solid transparent;
  display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a.aktiv{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:600}
.top .rechts{margin-left:auto;display:flex;gap:10px;align-items:center;position:relative}
.top .rechts .btn{border-color:rgba(255,255,255,.3);background:transparent;color:#fff;min-height:44px}
.top .rechts .btn:hover{background:rgba(255,255,255,.1);color:#fff}
.top .rechts .btn.primaer{background:#fff;border-color:#fff;color:var(--accent-hover)}

/* Konto-Knopf mit Aufklappmenue (ersetzt Abmelden-Knopf und Profil-Reiter).
   Aufklappen ohne JS: <details class="konto-menue"><summary>…</summary>…  */
.konto-menue{position:relative}
.konto-menue>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px 4px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:14px;min-height:44px}
.konto-menue>summary::-webkit-details-marker{display:none}
.konto-menue>summary::after{content:"▾";font-size:10px;opacity:.8}
.konto-menue[open]>summary{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.konto-menue .initialen{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:14px;background:var(--accent-soft);color:var(--accent-hover);font-size:12px;font-weight:700}
.konto-menue .klappe{position:absolute;top:calc(100% + 9px);right:0;z-index:20;width:264px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(29,32,36,.16);padding:6px;
  display:flex;flex-direction:column;gap:2px}
.konto-menue .kopf{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin:0 0 4px;display:flex;flex-direction:column;gap:2px}
.konto-menue .kopf b{font-size:14px;font-weight:650}
.konto-menue .kopf span{font-size:13px;color:var(--muted)}
.konto-menue .klappe a,.konto-menue .klappe button{font:inherit;font-size:14px;text-align:left;width:100%;
  padding:8px 10px;border-radius:var(--r);border:1px solid transparent;background:transparent;color:var(--ink);
  text-decoration:none;cursor:pointer;display:flex;align-items:center;min-height:44px}
.konto-menue .klappe a:hover,.konto-menue .klappe button:hover{background:var(--bg);color:var(--ink)}
.konto-menue .klappe a.aktiv{background:var(--accent-soft);border-color:var(--accent-soft-line);color:var(--accent-hover);font-weight:600}
.konto-menue .gruppe{border-top:1px solid var(--line);margin:4px 0 0;padding-top:4px}
.konto-menue .gruppe>span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:650;padding:4px 10px 2px}
.konto-menue .abmelden button{color:var(--err-ink);font-weight:600}
.rolle{align-self:flex-start;margin-top:4px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-hover);background:var(--accent-soft);border:1px solid var(--accent-soft-line);border-radius:999px;padding:2px 8px}

/* ---- Typo ----------------------------------------------------------- */
h1{font-size:28px;line-height:1.2;font-weight:650;margin:32px 0 14px;letter-spacing:-.015em;text-wrap:pretty}
h2{font-size:18px;line-height:1.3;font-weight:650;margin:26px 0 10px}
h3{font-size:16.5px;line-height:1.4;font-weight:650;margin:0}
p{margin:0 0 12px;text-wrap:pretty}
.muted{color:var(--muted)}
.klein{font-size:14px}
.meta{color:var(--muted);font-size:14px}
.kontext{display:block;font-size:13px;color:var(--muted);letter-spacing:.02em;margin:32px 0 0}
.kontext + h1{margin-top:2px}

/* ---- Knoepfe -------------------------------------------------------- */
.btn,button{font:inherit;font-size:14px;line-height:1;padding:0 14px;min-height:36px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover,button:hover{border-color:var(--accent);color:var(--accent)}
.btn.primaer,button.primaer{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primaer:hover,button.primaer:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn.gross,button.gross{font-size:15px;min-height:44px;padding:0 20px}
/* Daumen hoch / runter — ersetzen „passt" / „passt nicht" */
.btn.ok,button.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink);min-width:44px}
.btn.ok:hover,button.ok:hover{border-color:var(--ok-ink);color:var(--ok-ink)}
.btn.nein,button.nein{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink);min-width:44px}
.btn.nein:hover,button.nein:hover{border-color:var(--err-ink);color:var(--err-ink)}
.btn svg,button svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.btn.gefahr,button.gefahr{background:var(--err-ink);border-color:var(--err-ink);color:#fff;font-weight:600}
.btn.gefahr:hover,button.gefahr:hover{background:var(--err-ink);border-color:var(--err-ink);color:#fff;filter:brightness(1.1)}
.reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- Karten --------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 12px;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--schatten)}
.card h3{font-size:16.5px;line-height:1.4;font-weight:650}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--accent);text-decoration:underline}
.card .kopfzeile{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.card .kopfzeile h3{flex:1 1 320px;min-width:0}
/* Auftraggeber zuerst, dunkel und halbfett — er war vorher nicht vom Ort zu unterscheiden */
.card .meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.card .meta .auftraggeber{color:var(--ink);font-weight:600;hyphens:auto;overflow-wrap:break-word}
.card .meta .punkt{color:var(--line-strong)}
/* Score als Badge */
.score{display:inline-flex;align-items:baseline;gap:5px;font-size:13px;font-weight:650;color:var(--accent-hover);
  background:var(--accent-soft);border:1px solid var(--accent-soft-line);border-radius:var(--r);padding:4px 10px;white-space:nowrap}
.score .wort{font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* Frist-Ampel: Stufe kommt aus dem Kontext (eng <=10 Tage, mittel <=25, sonst weit) */
.frist{white-space:nowrap;font-size:13px;font-weight:600;border-radius:4px;padding:2px 8px;border:1px solid}
.frist.eng{color:var(--err-ink);background:var(--err-bg);border-color:var(--err-line)}
.frist.mittel{color:var(--wait-ink);background:var(--wait-bg);border-color:var(--wait-line)}
.frist.weit{color:var(--ok-ink);background:var(--ok-bg);border-color:var(--ok-line)}
/* Zeilenhoehe stabil: mit Rand 20 px, unter der Titelzeile (23 px) — mit 18 px
   Zeilenhoehe waren es 22 px und die Zeile wurde 1 px hoeher (2026-09-15). */
.award-chip{display:inline-block;vertical-align:middle;font-size:12px;font-weight:550;line-height:16px;padding:1px 9px;
  border-radius:9px;background:var(--chip-bg);border:1px solid var(--chip-line);color:var(--chip-ink);margin-left:8px;hyphens:none}
.subs-row{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;border-top:1px solid var(--line-weich);padding-top:8px}
.subs-row details summary{cursor:pointer;color:var(--accent);list-style:none}
.subs-row details summary::-webkit-details-marker{display:none}
.subs-row details summary::before{content:"▸ ";font-size:11px}
.subs-row details[open] summary::before{content:"▾ "}
.subs-row details[open]{flex-basis:100%}
.subs-body{margin:6px 0 2px;color:var(--ink);font-size:14px}
.award-row{padding:5px 0;border-top:1px solid var(--line-weich)}
.award-row.cancelled{color:var(--err-ink)}
.card .aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px}
.card form{margin:0}
.card .aktionen form{display:inline}
.card textarea{margin-top:2px}

/* ---- Hinweiskaesten -------------------------------------------------- */
.hinweis{border:1px solid;border-radius:var(--r);padding:12px 16px;margin:0 0 16px;font-size:15px;
  background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.hinweis.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.hinweis.warten{background:var(--wait-bg);border-color:var(--wait-line);color:var(--wait-ink)}
.hinweis.fehler,p.warn,.warn{background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-ink);
  border-radius:var(--r);padding:12px 16px;margin:0 0 16px;font-size:15px}
.hinweis strong{font-weight:650}
.hinweis a,.warn a{color:inherit}
/* Vorschau im Profilformular: als Akzentkasten statt Fliesstext */
#vorschau .vorschau,.kasten-akzent{background:var(--accent-soft);border:1px solid var(--accent-soft-line);
  border-left:3px solid var(--accent);border-radius:var(--r);padding:12px 14px;font-size:15px}

/* ---- Formulare ------------------------------------------------------- */
label{display:block;font-size:13px;color:var(--muted);font-weight:600;margin:0 0 4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],select,textarea{
  font:inherit;font-size:16px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--ink);width:100%;min-height:42px}
select{min-height:38px}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:2px solid var(--focus-weich);outline-offset:0}
/* Kaestchen und Optionsfelder haben keinen sichtbaren Rand: dort der volle Ring (Gegenpruefung 17.10.2026) */
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.feld{margin:0 0 16px}
.feld .hilfe{font-size:13px;color:var(--muted);margin:4px 0 0}
.feld.kurz input{width:140px}
.form-schmal{max-width:420px}
/* Formularkarte: Felder auf weisser Flaeche statt frei auf dem Hintergrund */
.formkarte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:16px;box-shadow:var(--schatten)}
.formkarte .abschnitt{border-top:1px solid var(--line-weich);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1.3;padding:5px 6px 5px 11px;border-radius:14px;
  background:var(--accent-soft);border:1px solid var(--accent-soft-line);color:var(--ink);margin:0 6px 6px 0;hyphens:none}
.chip .level{font-size:12px;color:var(--muted);white-space:nowrap}
.chip button{border:0;background:transparent;color:var(--muted);min-height:22px;width:22px;justify-content:center;padding:0;font-size:14px;cursor:pointer}
.chip button:hover{color:var(--err-ink)}
/* Treffer der CPV-Suche sind Knoepfe (2026-09-27): Haken und ausgegraut, wenn schon im Profil; Klick schaltet um */
.hit,button.hit{display:block;width:100%;text-align:left;padding:9px 12px 9px 34px;min-height:44px;border:0;border-radius:0;
  border-bottom:1px solid var(--line-weich);background:transparent;font:inherit;font-size:15px;line-height:1.4;text-decoration:none;color:var(--ink);position:relative}
.hit:hover,button.hit:hover{background:var(--accent-soft);color:var(--ink);border-color:var(--line-weich)}
.hit .level{color:var(--muted);font-size:13px}
.hit .bereich{display:block;color:var(--muted);font-size:13px}
.hit .haken{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;color:var(--ok-ink);visibility:hidden}
.hit.gewaehlt{color:var(--muted);background:var(--bg)}
.hit.gewaehlt .haken{visibility:visible}
.hit.gewaehlt:hover{background:var(--err-bg);color:var(--err-ink)}
.hit[disabled]{opacity:.7}
.cpv-suche{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cpv-suche input{flex:1 1 220px}
#cpv-zaehler{white-space:nowrap}
.cpv-rueckmeldung{min-height:20px;margin:-8px 0 8px;color:var(--ok-ink)}
.cpv-rueckmeldung:not(:empty){animation:cpv-weg 5s forwards}
@keyframes cpv-weg{0%,70%{opacity:1}100%{opacity:0}}
#cpv-hits{border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;overflow:hidden}
#cpv-hits:empty{border:0}
#cpv-chips{display:flex;flex-wrap:wrap;margin:0 0 4px}
.vorschau{font-size:14px;margin:8px 0 0}
.zwei-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

/* ---- Tabellen -------------------------------------------------------- */
/* Wrapper .tabelle um jedes <table>: Rahmen, Radius, waagerechtes Scrollen */
.tabelle{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;box-shadow:var(--schatten);margin:0 0 20px}
table{border-collapse:collapse;width:100%;font-size:15px}
thead tr{background:#f7f6f3}
th{padding:10px 12px;text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:650;white-space:nowrap;hyphens:none;border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-bottom:1px solid var(--line-weich);text-align:left;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td[data-l="Frist"]{font-weight:600}
/* Kennzahlkarten (Betriebsseite) */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 24px}
.kennzahlen .kz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  display:flex;flex-direction:column;gap:2px;box-shadow:var(--schatten)}
.kennzahlen .kz b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:650}
.kennzahlen .kz .wert{font-size:26px;font-weight:650;letter-spacing:-.01em}
.kennzahlen .kz span{font-size:13px;color:var(--muted)}
/* Statuszelle in Tabellen */
.status{font-size:13px;font-weight:650;border-radius:4px;padding:2px 8px;border:1px solid}
.status.ok{color:var(--ok-ink);background:var(--ok-bg);border-color:var(--ok-line)}
.status.warn{color:var(--wait-ink);background:var(--wait-bg);border-color:var(--wait-line)}
.status.fehler{color:var(--err-ink);background:var(--err-bg);border-color:var(--err-line)}

/* ---- Listen ---------------------------------------------------------- */
.profil-liste{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.profil-liste li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;box-shadow:var(--schatten)}
.profil-liste li a{font-weight:650;font-size:16px;color:var(--ink);text-decoration:none}
.profil-liste li a:hover{color:var(--accent);text-decoration:underline}
.zaehler{font-size:13px;font-weight:600;color:var(--ok-ink);background:var(--ok-bg);border:1px solid var(--ok-line);
  border-radius:999px;padding:4px 10px;white-space:nowrap}
dl.impressum{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:0}
dl.impressum dt{font-weight:650;font-size:13px;color:var(--muted)}
dl.impressum dd{margin:0}
address.anbieter{font-style:normal;line-height:1.6;margin:0 0 14px}
.quellen{margin:0 0 28px;padding-left:18px;display:flex;flex-direction:column;gap:8px}

/* ---- Startseite ------------------------------------------------------ */
.hero{padding:44px 0 8px;display:flex;flex-direction:column;gap:18px;max-width:660px}
.hero .marke{align-self:flex-start;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-soft-line);border-radius:999px;padding:5px 12px}
.hero h1{font-size:38px;line-height:1.15;letter-spacing:-.02em;margin:0}
.hero p{font-size:18px;line-height:1.55;color:var(--ink);margin:0}
.dreispalt{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:36px 0 0}
.dreispalt .kachel{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.dreispalt .kachel.gruen{border-top-color:var(--ok-ink)}
.dreispalt .kachel.gelb{border-top-color:var(--wait-ink)}
.dreispalt .kachel strong{font-size:15px}
.dreispalt .kachel span{font-size:14px;color:var(--muted)}

/* Landingpage (2026-09-23): Abschnitte unter dem Hero, im bestehenden Erscheinungsbild. */
.lp-abschnitt{margin:44px 0 0;max-width:760px}
.lp-abschnitt h2{font-size:23px;line-height:1.25;margin:0 0 14px;letter-spacing:-.01em}
.lp-einleitung{font-size:16.5px;line-height:1.55;margin:0 0 14px}
.lp-schritte{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.55}
.lp-liste{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:16px;line-height:1.5}
.lp-stufen{margin:0 0 18px;display:grid;grid-template-columns:max-content 1fr;gap:10px 18px;font-size:16px;line-height:1.5}
.lp-stufen dt{font-weight:650;color:var(--accent-hover);white-space:nowrap}
.lp-stufen dd{margin:0}
.lp-bild{margin:6px 0 16px;max-width:760px}
.lp-bild img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.lp-bild figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.lp-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.lp-zahlen div{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.lp-zahlen .zahl{font-size:24px;font-weight:700;color:var(--ink)}
.lp-zahlen div span:last-child{font-size:14px;color:var(--muted);line-height:1.4}
.lp-stand{font-size:13px;margin:8px 0 0}
.lp-vertraege{margin:14px 0 0;max-width:72ch}
/* Kostenlos und Premium (Preisseite, 2026-10-14): zwei Karten auf der Startseite, die Tabelle auf /abo; Inhalt aus
   vergabe.leistungen. Premium dezent hervorgehoben: Rand in der Akzentfarbe, Spalte hellblau. Nur Farben der
   Palette (Kontrast AA wie die Landingpage), keine Schrift und kein Bild von aussen; der Haken ist ein Zeichen. */
.preis-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:4px 0 0;align-items:stretch}
.preis-karte{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px 22px 20px;
  display:flex;flex-direction:column;box-shadow:var(--schatten)}
.preis-karte.premium{border:2px solid var(--accent);padding:21px 21px 19px;box-shadow:0 6px 18px rgba(37,91,124,.12)}
.preis-karte h3{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.preis-karte.premium h3{color:var(--accent)}
.preis-betrag{margin:6px 0 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.preis-betrag .betrag{font-size:34px;line-height:1.1;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.preis-betrag .takt{font-size:16px;color:var(--muted)}
.preis-betrag .zusatz{flex-basis:100%;font-size:13.5px;color:var(--muted)}
.preis-alles{margin:0 0 10px;font-size:14px;font-weight:650;color:var(--accent-hover)}
.preis-liste{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15.5px;line-height:1.45}
.preis-liste li{position:relative;padding-left:28px}
.preis-liste li::before{content:"✓";content:"✓" / "";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--ok-bg);color:var(--ok-ink);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.preis-karte.premium .preis-liste li::before{background:var(--accent-soft);color:var(--accent)}
.preis-aktion{margin:auto 0 0}
.preis-aktion .btn{width:100%;justify-content:center}
.preis-fuss{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;font-size:15px}
.preis-fuss a{font-weight:600}
.lp .lp-s-preis > .preis-karten{max-width:none}
.preis-tabelle-rahmen{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--schatten);margin:0 0 18px}
.preis-tabelle{width:100%;border-collapse:collapse;font-size:15px}
.preis-tabelle th,.preis-tabelle td{padding:12px 14px;border-bottom:1px solid var(--line-weich);text-align:left;vertical-align:top;
  text-transform:none;letter-spacing:normal;white-space:normal;color:var(--ink);font-size:15px}
.preis-tabelle thead th{font-size:15px;font-weight:700;background:#faf9f7;vertical-align:bottom}
.preis-tabelle .stufe{text-align:center;width:130px;vertical-align:middle}
.preis-tabelle thead .stufe{vertical-align:bottom}
.preis-tabelle .preis-kopf{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:2px}
.preis-tabelle .premium{background:var(--accent-soft)}
.preis-tabelle thead .premium{color:var(--accent-hover);border-bottom:2px solid var(--accent)}
.preis-tabelle tbody th{font-weight:400}
.preis-tabelle tbody th strong{display:block;font-weight:600}
.preis-tabelle tbody th span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.preis-tabelle tbody tr:last-child th,.preis-tabelle tbody tr:last-child td{border-bottom:0}
.preis-tabelle .ja{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;
  background:var(--ok-bg);color:var(--ok-ink);font-weight:700;font-size:13px}
.preis-tabelle .premium .ja{background:var(--surface);color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft-line)}
.preis-tabelle .nein{color:var(--muted);font-weight:600}
.preis-zusatz{font-size:14.5px;color:var(--muted);margin:0 2px 12px}
.preis-buchen{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:0 0 8px}
.preis-buchen > p{margin:0 0 10px}
.preis-buchen > p:last-child,.preis-buchen form:last-child{margin-bottom:0}
@media (max-width:640px){
  .preis-karten{grid-template-columns:minmax(0,1fr)}
  .preis-karte{padding:18px 16px}
  .preis-karte.premium{padding:17px 15px}
  /* Tabelle am Handy gestapelt: Funktion oben, darunter „Kostenlos“ und „Premium“ als Beschriftung (data-l) */
  .preis-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .preis-tabelle,.preis-tabelle tbody{display:block}
  .preis-tabelle tbody tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-weich)}
  .preis-tabelle tbody tr:last-child{border-bottom:0}
  .preis-tabelle tbody th{grid-column:1/-1;border-bottom:0;padding:12px 14px 4px}
  .preis-tabelle td.stufe{display:flex;align-items:center;gap:8px;width:auto;border-bottom:0;padding:6px 14px 12px;
    background:transparent;font-size:13.5px;color:var(--muted)}
  .preis-tabelle td.stufe::before{content:attr(data-l)}
  .preis-tabelle td.premium::before{color:var(--accent-hover);font-weight:600}
}
@media (max-width:600px){
  .lp-abschnitt{margin-top:34px}
  .lp-abschnitt h2{font-size:20px}
  .lp-stufen{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .lp-stufen dd{margin-bottom:10px}
}

/* Landingpage, Farbe (2026-09-23, vom Betreiber gewaehlt): Akzentflaechen aus der bestehenden
   Palette — Kopf in der Akzentfarbe mit heller Schrift, „So funktioniert es" hellblau, das Brett
   weiss, „Preis" hellgelb, Schritte mit farbigen Ziffern. Alle Regeln unter .lp, dem Wurzelelement
   der Landingpage; nichts davon greift in der Anwendung. Farbflaechen laufen per box-shadow +
   clip-path ueber die volle Breite — kein 100vw, also kein Ueberlauf am Handy. Kontrast AA gemessen
   (reports/2026-09-23-landingpage-farbe.md). */
.lp .hero,.lp .lp-s-so,.lp .lp-s-brett,.lp .lp-s-preis{clip-path:inset(0 -100vmax)}
.lp .hero{background:var(--accent);box-shadow:0 0 0 100vmax var(--accent);color:#fff;max-width:none;padding:40px 0 36px}
.lp .hero h1,.lp .hero p{color:#fff;max-width:660px}
.lp .hero .marke{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.lp .hero .btn.primaer{background:#fff;border-color:#fff;color:var(--accent-hover)}
.lp .hero .btn:not(.primaer){background:transparent;border-color:#fff;color:#fff}
.lp .lp-s-so{background:var(--accent-soft);box-shadow:0 0 0 100vmax var(--accent-soft);max-width:none;margin-top:0;padding:32px 0}
.lp .lp-s-so > *{max-width:760px}
.lp .lp-s-brett{background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);max-width:none;padding:32px 0;margin-top:44px}
.lp .lp-s-brett > *{max-width:760px}
.lp .lp-s-preis{background:var(--wait-bg);box-shadow:0 0 0 100vmax var(--wait-bg);max-width:none;padding:32px 0}
.lp .lp-s-preis > *{max-width:760px}
.lp .lp-s-preis .muted{color:var(--wait-ink)}
.lp .lp-schritte{list-style:none;padding-left:0;counter-reset:lpschritt}
.lp .lp-schritte li{counter-increment:lpschritt;position:relative;padding-left:46px;min-height:32px}
.lp .lp-schritte li::before{content:counter(lpschritt);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.lp .lp-zahlen div{border-top-color:var(--ok-ink)}


/* ---- Statusseiten ---------------------------------------------------- */
.statuskarte{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:8px;max-width:520px}
.statuskarte.ok{border-top-color:var(--ok-ink)}
.statuskarte.warten{border-top-color:var(--wait-ink)}
.statuskarte.fehler{border-top-color:var(--err-ink)}
.statuskarte .art{font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.statuskarte.ok .art{color:var(--ok-ink)}
.statuskarte.warten .art{color:var(--wait-ink)}
.statuskarte.fehler .art{color:var(--err-ink)}
.statuskarte h1{font-size:20px;margin:0;letter-spacing:-.01em}
/* Karte, die mit h2 beginnt (Kasten des Profil-Assistenten auf der Antwortseite der Registrierung): ohne den Abstand
   des h2 darueber, wie das h1 der Karte davor (Befund 8 der Bilder vom 19.10.2026). Keine andere Statuskarte beginnt
   mit h2. */
.statuskarte>h2:first-child{margin:0}

/* ---- Anforderungen, Aehnliche ---------------------------------------- */
.anford{font-size:14.5px;line-height:1.5}
.anford h4{font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:10px 0 3px}
.anford ul{margin:0;padding-left:18px}
.anford li{margin:0 0 3px}
.anford details summary{cursor:pointer;color:var(--ink)}
.anford li:has(> details){list-style:none}
.anford details p{margin:4px 0 0}
.aehnliche{margin:0;padding-left:18px;font-size:14px}
.aehnliche li{margin:0 0 6px}
.subs{font-size:14px;color:var(--muted)}
/* „Warum dieser Treffer" (2026-09-16): Satz in Textfarbe, Zahlen klein und grau */
.warum-satz{color:var(--ink);margin:0 0 4px}
.teilscores{font-size:12.5px;color:var(--muted)}
/* Suche (2026-09-16): Los steht schon in der Trefferliste des gewaehlten Profils */
.card .treffer-hinweis{font-size:13.5px;color:var(--accent);margin:2px 0 0}
/* Aufhebung (E1): aufgehoben rot, angekuendigt oder ausgesetzt wie „warten" */
.aufhebung-hinweis{font-size:13.5px;font-weight:600;color:var(--wait-ink);margin:2px 0 0}
.aufhebung-hinweis.aufgehoben{color:var(--err-ink)}
/* Ankündigung (Ex ante, 0092): wie der Hinweis „Aufhebung angekündigt“ */
.ex-ante-hinweis{font-size:13.5px;font-weight:600;color:var(--wait-ink);margin:2px 0 0}
.subs-row a.subs{text-decoration:underline;color:var(--accent)}
.award-body{margin:6px 0 2px;font-size:14px}
code{font-size:.9em;background:var(--chip-bg);padding:1px 4px;border-radius:3px}

/* ---- Fuss ------------------------------------------------------------ */
/* Zwei Gruppen (Verzeichnis; Ratgeber und Rechtstexte), die als Ganzes umbrechen (SEO-Schritt 1, 21.10.2026). 24 px
   zwischen den Zeilen: 20 px Zeile plus 24 px sind die 44 px eines Ziels, zwei Zeilen ueberlappen sich nicht. */
.fuss{border-top:1px solid var(--line);margin-top:40px;padding-top:14px;font-size:13px;color:var(--muted);display:flex;gap:24px;flex-wrap:wrap;
  align-items:center}
.fuss-gruppe{display:inline-flex;flex-wrap:wrap;align-items:center;gap:24px 8px}
/* 44 px Trefferflaeche, 12 px ueber und unter der Schrift; die Zeile bleibt 20 px hoch (negativer Rand). */
.fuss a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}

/* ---- Handy ----------------------------------------------------------- */
@media (max-width:600px){
  .page{padding:0 14px 28px}
  h1{font-size:24px;margin:20px 0 12px}
  .hero h1{font-size:28px}
  .card{padding:14px}
  .card .aktionen button{min-height:44px}
  .btn,button{min-height:44px}
  .nav{gap:2px}
  .nav a{padding:8px 10px;font-size:14px}
  .konto-menue .klappe{width:min(264px,calc(100vw - 28px))}
  .feld.kurz input{width:100%}
  .zwei-spalten{grid-template-columns:repeat(1,minmax(0,1fr))}
  /* Tabellen stapeln (Beschriftung aus data-l) — nur .tabelle.stapeln (Fristen).
     Tabellen ohne data-l (/admin) wurden sonst zu Kaesten „Kopf" und „Werte"
     getrennt; sie scrollen stattdessen waagerecht im Rahmen. */
  .tabelle.stapeln{border:0;background:transparent;box-shadow:none;overflow:visible}
  .stapeln table,.stapeln thead,.stapeln tbody,.stapeln tr,.stapeln th,.stapeln td{display:block}
  .stapeln thead{display:none}
  .stapeln tr{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px 12px;margin:0 0 8px}
  .stapeln td{border:0;padding:2px 0}
  .stapeln tbody tr:last-child td{border-bottom:0}
  .stapeln td[data-l]::before{content:attr(data-l) " ";color:var(--muted);font-size:13px}
}
/* Unter 390 px bricht die Kopfleiste um, „Konto" steht links in der zweiten Zeile; die Klappe hing rechts an „Konto"
   und ragte 61 px links ueber den Bildrand (S2 des Schlusslaufs vom 19.10.2026, 320 px). Hier haengt sie an der
   Kopfleiste: unter ihrer Unterkante, rechts buendig mit dem Seitenrand (14 px wie .page). */
@media (max-width:389px){
  .top .page{position:relative}
  .top .rechts,.top .konto-menue{position:static}
  .top .konto-menue .klappe{top:100%;right:14px}
}

/* ---- Aus der Fassung vom 13.09., im Paket nicht enthalten ------------- */
.subs-row details summary.subs{color:var(--muted)}
.subs-row details .subs{margin:4px 0 2px;color:var(--ink)}
#wochenmail{margin-top:20px}
#profil-loeschen{margin-top:12px}
/* Vorschau im Profilformular: partials/vorschau.html hat keine eigene
   Wurzel, #vorschau .vorschau aus dem Paket griffe ins Leere. Der Kasten
   sitzt deshalb auf dem gefuellten Container — hx-* bleibt unberuehrt. */
#vorschau:not(:empty){background:var(--accent-soft);border:1px solid var(--accent-soft-line);
  border-left:3px solid var(--accent);border-radius:var(--r);padding:12px 14px;font-size:15px;margin:0 0 8px}
#vorschau:not(:empty) p:last-child{margin-bottom:0}
/* Konto-Menue ohne Initialen-Kreis: Knopf mit gleichmaessigem Innenabstand. */
.konto-menue>summary{padding:6px 12px}
/* Profilformular: Ueberschriften in den Abschnitten der Formularkarte ohne Aussenabstand. */
.formkarte .abschnitt h2{margin:0}
.formkarte .feld{margin:0}
/* Frist-Ampel in der Fristen-Tabelle: Tageszahl bleibt eine Zeile (Umbruchregel). */
td .frist{display:inline-block}

/* ---- Nacharbeit nach den ersten Bildern (2026-09-15) ------------------ */
/* Suchformular: alle Beschriftungen ueber dem Feld, Knopf unten buendig. */
.suche .reihe{align-items:flex-end}
.suche .reihe label{display:flex;flex-direction:column;gap:4px;margin:0}
.suche .reihe select,.suche .reihe input[type=date]{width:auto}
/* „merken" in der Suche: Profilauswahl und Knopf in einer Zeile. */
.card .aktionen form.merken{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card .aktionen select{width:auto;min-height:36px}
@media (max-width:600px){
  /* Kopfleiste: Marke und Konto in der ersten Zeile, Reiter darunter. */
  .top .page{gap:8px 12px;padding-top:8px;padding-bottom:8px}
  .top .rechts{order:1}
  .top .nav{order:2;flex-basis:100%}
  .nav a{padding:6px 8px}
  /* Metazeile: untereinander statt mit Trennpunkten, die am Zeilenanfang landen. */
  .card .meta{flex-direction:column;align-items:flex-start;gap:3px}
  .card .meta .punkt{display:none}
}
/* Aufgeklappte Bloecke („Was brauche ich", Zuschlaege, Aehnliche) sind
   Flex-Elemente der .subs-row; mit min-width:auto wurden sie so breit wie das
   laengste unteilbare Wort in den Nachweistexten — bei 375 px lief die Seite
   auf 904 px (2026-09-15 gemessen). Daten und Fristen bleiben ungetrennt
   (.fest ist nowrap, das hebt overflow-wrap nicht auf). */
.subs-row details{min-width:0;max-width:100%}
.subs-body,.award-body{overflow-wrap:break-word}
/* Abmelden direkt in der Kopfleiste neben „Konto" (2026-09-15): gleiche Bauart
   wie die Kopfleisten-Knoepfe fuer Gaeste, hell auf dunkel. */
.top .rechts form.abmelden{margin:0}
.top .rechts form.abmelden button{border-color:rgba(255,255,255,.3);background:transparent;color:#fff;min-height:44px}
.top .rechts form.abmelden button:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}
/* Statuskarte mit Abstand zur Kopfleiste — sie beginnt ohne h1 davor und
   klebte an der Unterkante (live gesehen 2026-09-15, „Wir kennen diesen Link nicht"). */
.statuskarte{margin-top:28px}
/* Hinweis zur Mail unter dem Kasten der Antwortseite der Registrierung
   (auth_generisch_ok.html): p hat keinen oberen Rand, .statuskarte keinen
   unteren — gemessen 0 px (Befund 9 der Gegenpruefung, 19.10.2026). */
.kasten-mail{margin-top:16px}

/* Profilwaehler in der Kopfleiste (2026-09-15, web/nav.py): Menue bei
   mehreren Profilen, nur der Name bei einem. Lange Namen mit Auslassung. */
.top .profilwahl{position:relative;font-size:14px}
.top .profilwahl>summary,.top .profilwahl.einzeln{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;min-height:44px}
.top .profilwahl>summary{list-style:none;cursor:pointer}
.top .profilwahl>summary::-webkit-details-marker{display:none}
.top .profilwahl>summary::after{content:"▾";font-size:10px;opacity:.8}
.top .profilwahl[open]>summary{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.top .profilwahl .name{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.top .profilwahl .klappe{position:absolute;top:calc(100% + 7px);left:0;z-index:20;min-width:240px;max-width:min(360px,calc(100vw - 28px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(29,32,36,.16);
  padding:6px;display:flex;flex-direction:column;gap:2px}
.top .profilwahl .klappe a{padding:8px 10px;border-radius:var(--r);color:var(--ink);text-decoration:none;font-size:14px;
  display:flex;align-items:center;min-height:44px}
.top .profilwahl .klappe a:hover{background:var(--bg)}
.top .profilwahl .klappe a.aktiv{background:var(--accent-soft);color:var(--accent-hover);font-weight:600}
/* Frist in eigener Zeile unter der Metazeile, immer an derselben Stelle. */
.card .frist-zeile{margin-top:-2px}
@media (max-width:600px){
  .top .profilwahl{order:2;flex-basis:100%}
  .top .nav{order:3}
  .top .profilwahl .name{max-width:calc(100vw - 90px)}
}
@media (max-width:600px){
  /* Fuenf Reiter in einer Zeile bei 375 px (sonst brach „Fristen" allein um). */
  .nav{gap:0}
  .nav a{padding:6px 7px;font-size:13.5px}
}
@media (min-width:601px){
  /* Desktop: Marke, Profilwaehler, fuenf Reiter, Abmelden und Konto in einer
     Zeile (Inhaltsbreite 892 px). Mit gap 26, Reiter-Innenabstand 12 und
     Namen bis 220 px waren es 1011 px — Abmelden/Konto brachen in eine
     zweite Zeile. Voller Name im aufgeklappten Menue. Unter ~940 px
     Fensterbreite brechen Reiter und Konto in eine zweite Zeile. */
  .top .page{gap:12px}
  .nav a{padding:7px 8px}
  /* 130 px bei fuenf Reitern; mit vier (ohne „Alle Profile") ist Platz fuer 200. */
  .top .profilwahl .name{max-width:200px}
}
@media (min-width:941px){
  /* Eine Zeile, auch mit fuenf Reitern (2026-09-30): seit „Vertragsenden" (28.09., nur mit Zugang)
     brauchten Marke, Waehler mit langem Namen, fuenf Reiter und Abmelden/Konto 934 px bei 892 px
     Inhaltsbreite — Abmelden und Konto rutschten in eine zweite Zeile. Statt fester Breiten gibt nur der
     Name im Waehler nach (mit „…"; voll im Menue und im Seitenkopf), alles andere behaelt seine Breite.
     Unter 941 px Fensterbreite bricht die Leiste um wie bisher. Waechter: deploy/pruefung/angemeldet.mjs
     prueft die Leiste auch mit einem langen Profilnamen. */
  .top .page{flex-wrap:nowrap}
  .top .brand,.top .nav,.top .rechts{flex-shrink:0}
  .top .profilwahl{min-width:0;flex:0 1 auto}
  .top .profilwahl>summary{max-width:100%;box-sizing:border-box}
  .top .profilwahl .name{min-width:0}
}
/* „Neues Profil" als letzter Eintrag im Profilwaehler, von den Profilen abgesetzt. */
.top .profilwahl .klappe a.neu{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r);color:var(--accent-hover);font-weight:600}
@media (max-width:600px){
  /* Zwei Zeilen statt drei (2026-09-15, 137 -> 104 px bei 375): oben Marke,
     Abmelden, Konto; darunter der Waehler (Name gekuerzt, voll im Menue und
     im Seitenkopf) neben den vier Reitern. Der Umbruch ist ein Pseudo-Element,
     nur wenn ein Waehler da ist — sonst bekaeme der Kopf ohne Anmeldung eine
     leere Zeile. min-width haelt den Waehler aus der oberen Zeile, falls
     :has fehlt. */
  .top .page:has(.profilwahl)::after{content:"";order:2;flex-basis:100%;height:0}
  .top .profilwahl{order:3;flex:1 1 0;min-width:96px}
  .top .profilwahl>summary{max-width:100%;box-sizing:border-box}
  .top .profilwahl .name{max-width:none;min-width:0}
  .top .nav{order:4;flex:0 0 auto}
  .nav a{padding:6px 4px}
}
@media (max-width:479px){
  /* Fuenf Reiter mit „Vertragsenden" (2026-09-28): die Reiterzeile ist wischbar statt umzubrechen —
     die Kopfleiste bleibt bei zwei Zeilen. Kein sichtbarer Balken; weiches Ausblenden am rechten
     Rand, solange rechts noch etwas steht (Klasse mehr-rechts, gesetzt vom Skript in base.html). */
  .top .profilwahl{flex:1 1 0;max-width:44%}
  .top .nav{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;position:relative;scroll-padding:0 24px}
  /* Neben dem Waehler bekommt die Reiterzeile ihre volle Breite, hoechstens Seite minus 108 px (min-width 96 px des
     Waehlers plus 12 px Spalt, Regeln bis 600 px); der Waehler kuerzt den Namen. So stehen Suche bis Fristen ab
     360 px mit vier Reitern ganz im Bild, ab 390 px mit fuenf (Premium) (Sichtpruefung Paket 2, Befund 1:
     „Fristen" bei 390 px abgeschnitten); „Vertragsenden" bleibt wischbar. Ohne Waehler wie bisher.
     Ausnahme ohne Premium (seit 24.10.2026): vor „Suche" steht die Pille „Premium" (rund 81 px); vier Reiter (221 px)
     plus Pille passen bei 390 px nicht in die 254 px der Zeile (362 px Inhalt minus 108), „Fristen" bleibt dort
     wischbar (das Skript rueckt den aktiven Reiter ins Bild). Eine schmalere Pille (10 px, rund 68 px) aendert das
     nicht (289 px), deshalb keine zweite Pillenform. Breiten mit der System-Schrift gemessen (Pruefung 24.10.2026,
     reports/2026-10-24-suche-premium/bau.md); Entscheidung des Nutzers offen. */
  .top .page:has(.profilwahl) .nav{flex:0 0 auto;max-width:calc(100% - 108px)}
  .top .nav::-webkit-scrollbar{display:none}
  .top .nav a{flex:0 0 auto;white-space:nowrap}
  .top .nav.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  /* ist die Zeile gewischt, links ebenso weich statt eines halb abgeschnittenen Reiters */
  .top .nav.mehr-links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px);
    mask-image:linear-gradient(90deg,transparent,#000 20px)}
  .top .nav.mehr-links.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 28px),transparent)}
  /* Pille „Premium" am Reiter „Suche" nur ab 480 px: vier Reiter plus Pille (302 px) passen nicht in die
     Reiterzeile (254 px bei 390 px), „Fristen" laege in der Maske (Pruefung 24.10.2026, Befund 1, Option b) */
  .top .nav .premium-zeichen{display:none}
}
/* Aufklapper der Loskarte untereinander (2026-09-15): nebeneinander sprang
   ein geoeffneter „Was brauche ich" auf volle Breite und schob die anderen
   um; untereinander bleibt die Liste ruhig. */
.subs-row{flex-direction:column;align-items:flex-start;gap:6px}
.subs-row details,.subs-row details[open]{flex-basis:auto;width:100%}
/* Lange Nachweistexte: aufgeklappt nur der volle Text, die Kurzfassung
   weicht „weniger anzeigen" (ohne JavaScript, partials/anforderungen.html). */
.anford details.lang>summary .zu{display:none;color:var(--accent);font-size:13px}
.anford details.lang[open]>summary .kurz{display:none}
.anford details.lang[open]>summary .zu{display:inline}
/* „merken" wird zum Haken, sobald das Los auf der Merkliste steht. */
.gemerkt{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:var(--r);
  border:1px solid var(--line);color:var(--ok, #2f6f3e);font-size:14px;white-space:nowrap}
/* Fristen: Herkunft und „von Merkliste nehmen" je Zeile. */
.tabelle td .herkunft{display:block}
.tabelle td button.klein{display:block;margin-top:4px;padding:4px 8px;font-size:13px}
/* Wonach entschieden wird (2026-09-15): knappe Zeile unter der Frist, Satz im Block. */
.anford .zuschlag-satz{margin:0 0 3px}
.anford .zuschlag-formel{margin:3px 0 6px}
/* ---- Ablauf der Merkliste (2026-09-21, Migration 0043) ----------------
   Ein Reiter je Stufe, die aktive in voller Breite (seit 2026-09-21 abends;
   vorher vier Spalten nebeneinander, zu eng). Kein Ziehen: jede Karte hat
   einen Knopf zur naechsten Stufe und einen leisen zurueck. */
.reiter{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.reiter a{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;text-decoration:none;white-space:nowrap;color:var(--muted);font-size:15px;
  padding:9px 14px 8px;border:1px solid transparent;border-bottom:0;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1px}
.reiter a:hover{color:var(--accent)}
.reiter a.aktiv{color:var(--ink);font-weight:650;background:var(--surface);border-color:var(--line);border-bottom:1px solid var(--surface)}
.reiter a .frist-naechste{font-size:12.5px;font-weight:400;color:var(--muted)}
.ablauf .zahl{display:inline-block;min-width:22px;text-align:center;font-size:12px;font-weight:650;color:var(--accent-hover);background:var(--accent-soft);border:1px solid var(--accent-soft-line);border-radius:999px;padding:1px 7px;vertical-align:middle}
.stufe .leer{font-size:13.5px;margin:4px 2px 8px}
.stufe .card.klein{padding:12px 13px;margin:0 0 10px}
.stufe .card.klein h3{font-size:16px}
.stufe .card.klein .meta{font-size:13.5px}
.stufe .frist-zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stufe .frist-zeile .seit{font-size:12.5px}
.stufe .feld{margin:6px 0 4px}
.stufe textarea{min-height:44px}
.stufe .aktionen.schritte{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:6px 10px;margin-top:8px;border-top:1px solid var(--line-weich);padding-top:8px}
.stufe .aktionen.schritte form{display:block}
button.leise{background:transparent;border-color:transparent;color:var(--muted);font-size:13px;padding:4px 6px}
button.leise:hover{color:var(--accent);border-color:var(--line)}
.stufe .ergebnis{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:13.5px}
.stufe .ergebnis form{display:inline}
.stufe .ergebnis button.klein{padding:4px 10px;font-size:13px}
.stufe .ergebnis button.gewaehlt{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink);font-weight:650}
@media (max-width:600px){
  .reiter a{padding:8px 10px 7px;font-size:14px}
  .stufe .aktionen.schritte{flex-direction:column;align-items:stretch}
  .stufe .aktionen.schritte button{width:100%}
}
/* Die Frist-Ampel darf umbrechen, sonst ragt sie am Handy aus der Karte. */
.stufe .frist-zeile .frist{white-space:normal}

/* „Was brauche ich" (Gestaltung 2026-09-24, reports/2026-09-24-was-brauche-ich.md):
   oben Fristen und Zuschlag als Kaesten, darunter der Fortschrittsbalken, dann
   die Eckdaten als Raster (Bezeichnung links, Wert rechts), dann die Gruppen als
   Aufklapper mit Stand. Pruefzeile: Text links, die drei Knoepfe rechts als eine
   Schaltflaeche (am Handy darunter), mindestens 44 px hoch; der Zustand faerbt den
   linken Rand der Zeile und den gewaehlten Knopf. */
.anford-uebersicht{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:2px 0 10px}
.anford-uebersicht section{background:var(--accent-soft);border:1px solid var(--accent-soft-line);border-radius:var(--r);padding:10px 12px;min-width:0}
.anford-uebersicht h4{margin:0 0 6px;color:var(--accent-hover)}
.anford-uebersicht ul{margin:0}
.anford-uebersicht .zuschlag-ohne{margin:6px 0 2px;font-weight:600}
.anford-raster{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0}
.anford-raster dt{color:var(--muted);font-size:13px;font-weight:600;padding-top:1px}
.anford-raster dd{margin:0;min-width:0;overflow-wrap:break-word}
.anford-weitere{padding:10px 12px;margin:0 0 4px;background:var(--bg);border:1px solid var(--line-weich);border-radius:var(--r)}
/* Fortschrittsbalken statt der Zaehlzeile: die Zaehlzeile steht nur am zugeklappten Block */
.anford-details[open]>summary .pz-stand{display:none}
.pz-fortschritt{margin:0 0 12px}
.pz-fortschritt:empty{display:none}
.pz-balken{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--line-weich);border:1px solid var(--line)}
.pz-teil-habe{background:var(--ok-ink)}
.pz-teil-klaeren{background:#9a7209}
.pz-teil-fehlt{background:var(--err-ink)}
.pz-teil-offen{background:transparent}
.pz-legende{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;font-size:13px}
.pz-l::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;
  border:1px solid var(--line-strong)}
.pz-l-habe::before{background:var(--ok-ink);border-color:var(--ok-ink)}
.pz-l-klaeren::before{background:#9a7209;border-color:#9a7209}
.pz-l-fehlt::before{background:var(--err-ink);border-color:var(--err-ink)}
/* Gruppen als Aufklapper, der Stand rechts in der Ueberschrift */
.anford details.anford-gruppe{border:1px solid var(--line);border-radius:var(--r);margin:8px 0 0;background:var(--surface)}
.anford details.anford-gruppe>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:12px;min-height:44px;padding:8px 12px;font-weight:600}
.anford details.anford-gruppe>summary::-webkit-details-marker{display:none}
.anford .gruppe-titel::before{content:"▸";display:inline-block;width:16px;color:var(--muted)}
.anford details.anford-gruppe[open]>summary .gruppe-titel::before{content:"▾"}
.gruppe-stand{font-weight:500;font-size:13px;color:var(--muted);white-space:nowrap}
.gruppe-stand.fertig{color:var(--ok-ink)}
.anford-zeilen{padding:0 12px 4px}
/* .subs-row setzt ▸ vor jede summary — im Block zeichnen Gruppen und lange Texte ihr eigenes Zeichen */
.subs-row .anford details>summary::before{content:none}
/* Pruefzeile */
.anford .pz{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:start;
  margin:0;padding:10px 0 10px 12px;border-left:3px solid transparent;border-bottom:1px solid var(--line-weich)}
.anford .anford-zeilen .pz:last-child{border-bottom:0}
.anford .pz-text{min-width:0;overflow-wrap:break-word}
.anford .pz-habe{border-left-color:var(--ok-ink)}
.anford .pz-fehlt{border-left-color:var(--err-ink)}
.anford .pz-klaeren{border-left-color:#9a7209}
.anford .pz-knoepfe{display:inline-flex;gap:0;margin:0}
.anford .pz-knoepfe button.klein{min-height:44px;padding:0 14px;font-size:14px;border-radius:0;margin-left:-1px;white-space:nowrap}
.anford .pz-knoepfe button.klein:first-child{border-radius:var(--r) 0 0 var(--r);margin-left:0}
.anford .pz-knoepfe button.klein:last-child{border-radius:0 var(--r) var(--r) 0}
.anford .pz-knoepfe button.klein:hover,.anford .pz-knoepfe button.gewaehlt{position:relative;z-index:1}
.anford .pz-knoepfe button.gewaehlt{font-weight:650}
.anford .pz-habe .pz-knoepfe button.gewaehlt{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.anford .pz-fehlt .pz-knoepfe button.gewaehlt{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.anford .pz-klaeren .pz-knoepfe button.gewaehlt{background:var(--wait-bg);border-color:var(--wait-line);color:var(--wait-ink)}
.anford .pz-marke{margin:0;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);white-space:nowrap}
.anford .pz-habe .pz-marke{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.anford .pz-fehlt .pz-marke{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.anford .pz-klaeren .pz-marke{background:var(--wait-bg);border-color:var(--wait-line);color:var(--wait-ink)}
.pz-stand{font-weight:400;color:var(--muted)}
/* Feste Angaben (Rueckfragen, Oeffnung) duerfen in der Karte umbrechen, statt ueber den Rand zu laufen. */
.stufe .anford .fest{white-space:normal}
/* Lange Texte: sichtbarer Hinweis statt Aufklapp-Zeichen */
.anford details.lang>summary{list-style:none;cursor:pointer}
.anford details.lang>summary::-webkit-details-marker{display:none}
.anford details.lang>summary .kurz::after{content:" ganzen Text zeigen";color:var(--accent);font-size:13px;white-space:nowrap}
@media (max-width:640px){
  .anford .pz{grid-template-columns:1fr;padding-left:10px}
  .anford .pz-knoepfe{display:flex;width:100%}
  .anford .pz-knoepfe button.klein{flex:1 1 0;padding:0 4px;font-size:13.5px;white-space:normal;line-height:1.2}
  .anford .pz-marke{justify-self:start}
  .anford-raster{grid-template-columns:1fr;gap:0}
  .anford-raster dd{margin:0 0 6px}
  .anford-zeilen{padding:0 10px 4px}
}

/* Stufe „Prüfen" (2026-09-21, Migration 0045): Rueckfragenfrist ueber dem Block,
   Ausgang „Verwerfen" mit Grund — aufgeklappt eine eigene Zeile unter den Knoepfen. */
.stufe .frist-zeile.rueckfragen{margin-top:4px}
.stufe details.verwerfen{flex:1 1 300px;min-width:0}
.stufe details.verwerfen>summary{cursor:pointer;list-style:none;display:inline-block;padding:7px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);font-size:14px}
.stufe details.verwerfen>summary::-webkit-details-marker{display:none}
.stufe details.verwerfen>summary:hover{border-color:var(--err-line);color:var(--err-ink)}
.stufe details.verwerfen .gruende{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:13.5px}
.stufe details.verwerfen .gruende form{display:inline}
.stufe details.verwerfen .gruende button.klein{padding:4px 10px;font-size:13px}
@media (max-width:600px){.stufe details.verwerfen>summary{display:block;text-align:center;min-height:44px;line-height:28px}}
/* Stufe „In Bearbeitung" (2026-09-21, Migration 0046): Frist als Countdown, Eckdaten als
   eigene Zeilen, Aufgabenliste mit Haekchen. */
.stufe .countdown{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;white-space:normal;padding:8px 12px;margin:6px 0 8px;font-weight:400}
.stufe .countdown .gross{font-size:22px;font-weight:700;line-height:1.2}
.stufe .countdown .datum{font-size:14px;font-weight:600}
.stufe dl.eckdaten{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:0 0 8px;font-size:14.5px}
.stufe dl.eckdaten dt{color:var(--muted)}
.stufe dl.eckdaten dd{margin:0;overflow-wrap:break-word}
.stufe .unterlagen{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Fristen (2026-09-22): „gebunden bis" als Beschriftung vor dem Bindefrist-Ende beworbener Lose. */
.tabelle td .art{font-size:12.5px;font-weight:400;white-space:nowrap}
@media (max-width:600px){.tabelle.stapeln td .art{display:none}}   /* am Handy steht die Beschriftung schon aus data-l */
/* Bezahlter Zugang (2026-09-22): Hinweis ueber der Liste, Stand und Karte auf /abo. */
.abo-hinweis{font-size:13.5px;color:var(--muted);margin:0 2px 12px}
.card .brett-hinweis{font-size:13.5px;margin:6px 0 2px}
.card .brett-hinweis a{color:var(--accent);text-decoration:none}
.card .brett-hinweis a:hover{text-decoration:underline}
/* E3 (2026-09-30): die Hinweiszeile ist ein POST-Knopf (merkt), sieht aber aus wie der Link vorher. */
.card .brett-hinweis button{font:inherit;border:0;background:transparent;padding:2px 0;min-height:0;color:var(--accent);
  text-align:left;line-height:1.35;display:inline;cursor:pointer}
.card .brett-hinweis button:hover{text-decoration:underline;color:var(--accent)}
/* Premium-Zeichen am Knopf fuer Konten ohne Premium (22.10.2026, C): Text in einer Pille wie .rolle, nicht unterstrichen.
   Seit 24.10.2026 dieselbe Pille am Reiter „Suche" der Kopfleiste (Entscheidung des Nutzers): dort ist der Reiter
   inline-flex, das Leerzeichen vor „Suche" faellt weg, der Abstand kommt aus dem rechten Rand. */
.card .brett-hinweis .premium-zeichen,.top .nav .premium-zeichen{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.5;color:var(--accent-hover);background:var(--accent-soft);
  border:1px solid var(--accent-soft-line);border-radius:999px;padding:0 7px;margin-right:2px;vertical-align:1px}
.top .nav .premium-zeichen{margin-right:6px}
.abo-stand{padding:10px 14px;border-radius:8px;border:1px solid var(--line-weich);background:var(--surface);margin:0 0 16px}
.abo-stand.aktiv{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
/* Kaufbox auf /abo (Stripe Teil 3, Schritt 4, Bedingung 3): Knopf und Satz in einer Zeile mit Abstand, am Handy
   untereinander; Abstand zwischen Kauf- und Portalformular; die zwei Kaestchen als lesbare Saetze mit dem Haken
   links. Nur Elemente im Kauf- und Portalformular, die es mit Schalter aus nicht gibt (tests/test_abo_kaufbox.py). */
.preis-buchen .abo-aktion{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.preis-buchen .abo-kauf ~ .abo-aktion{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-weich)}
.abo-kauf .feld{margin:0 0 10px}
.abo-kauf .feld label{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:400;color:var(--ink);
  margin:0;line-height:1.45;cursor:pointer}
.abo-kauf .feld input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0}
.abo-kauf .feld .feldfehler{margin:4px 0 0 28px}
.abo-kauf .abo-aktion{margin-top:4px}
/* Grund der Weiterleitung auf /abo (22.10.2026, B): ueber dem Stand, mit Sprung zum Kasten */
.abo-grund{padding:10px 14px;border-radius:8px;border:1px solid var(--accent-soft-line);background:var(--accent-soft);
  color:var(--ink);margin:0 0 12px}
.abo-meldung{padding:10px 14px;border-radius:8px;border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok-ink);margin:0 0 12px}
/* Stufe „Beworben" (2026-09-22): Warten — gebunden bis, Oeffnung, seit wann; drei Ergebnis-Knoepfe
   als Ausgang direkt an der Karte. */
.stufe .warten{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;white-space:normal;padding:8px 12px;margin:6px 0 8px;
  background:var(--surface-2,var(--surface));border:1px solid var(--line-weich);border-radius:8px}
.stufe .warten .gross{font-size:20px;font-weight:700;line-height:1.2}
.stufe .warten .datum{font-size:14px;font-weight:600}
.stufe .warten .seit{font-size:13px;flex-basis:100%}
.stufe .ergebnis.ausgang{border-top:1px solid var(--line-weich);padding-top:8px}
.stufe .ergebnis.ausgang button.klein{padding:7px 14px;font-size:14px}
@media (max-width:600px){.stufe .ergebnis.ausgang .frage{flex-basis:100%}.stufe .ergebnis.ausgang form{flex:1 1 auto}
  .stufe .ergebnis.ausgang button.klein{width:100%;min-height:44px}}
/* Stufe „Abgeschlossen" (2026-09-22): Bilanz ueber der Liste, Ergebnis mit Datum, Zuschlag. */
.stufe .bilanz{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:2px 2px 12px;font-size:14.5px}
.stufe .bilanz .quote{font-weight:700;font-size:16px}
.stufe .abschluss{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;white-space:normal;padding:8px 12px;margin:6px 0 8px;
  border:1px solid var(--line-weich);border-radius:8px;background:var(--surface-2,var(--surface))}
.stufe .abschluss .gross{font-size:20px;font-weight:700;line-height:1.2}
.stufe .abschluss.zusage{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.stufe .abschluss.absage{background:var(--err-bg,var(--surface));border-color:var(--err-line);color:var(--err-ink)}
.stufe .zuschlag{margin:0 0 8px;font-size:14.5px;overflow-wrap:break-word}
.stufe .zuschlag .label{color:var(--muted)}
.stufe .zuschlag.offen{font-size:13.5px}
.aufgaben{border-top:1px solid var(--line-weich);margin:4px 0 8px;padding-top:8px}
.aufgaben h4{font-size:14.5px;margin:0 0 6px}
.aufgaben .aufg-stand{font-weight:400;color:var(--muted)}
.aufgaben .leer{font-size:13.5px;margin:0 0 6px}
.aufg-liste{list-style:none;margin:0 0 8px;padding:0}
.aufg-liste .aufg{display:flex;align-items:flex-start;gap:8px;padding:4px 0;border-bottom:1px solid var(--line-weich)}
.aufg-liste .aufg:last-child{border-bottom:0}
.aufg-haken{flex:0 0 auto;width:24px;height:24px;min-height:0;padding:0;line-height:20px;text-align:center;font-weight:700;
  border:1.5px solid var(--line-strong);border-radius:5px;background:var(--surface);color:var(--ok-ink)}
.aufg.erledigt .aufg-haken{background:var(--ok-bg);border-color:var(--ok-line)}
.aufg-text{flex:1 1 auto;min-width:0;overflow-wrap:break-word;font-size:14.5px;padding-top:2px}
.aufg.erledigt .aufg-text{color:var(--muted);text-decoration:line-through}
.aufg-weg{flex:0 0 auto;min-height:0;padding:0 6px;font-size:18px;line-height:22px}
.aufg-neu{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.aufg-neu input[type=text]{flex:1 1 220px;min-width:0}
@media (max-width:600px){
  .aufg-haken{width:32px;height:32px;line-height:28px}
  .aufg-weg{padding:4px 10px}
  .stufe dl.eckdaten{grid-template-columns:minmax(0,1fr)}
  .stufe dl.eckdaten dt{margin-top:4px}
}

/* ---- KI-Assistent (2026-09-25, reports/2026-09-25-ki-assistent-plan.md) ----
   Ein Fenster fuer alle Seiten: am Desktop eine Leiste rechts ueber dem Inhalt,
   am Handy ueber die volle Hoehe. Gefuellt von kontextbezogenen Knoepfen. */
.assistent{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;z-index:40;background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(29,32,36,.14);display:flex;flex-direction:column}
.assistent[hidden]{display:none}
.assistent-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 10px;align-items:center;padding:10px 16px 12px;
  border-bottom:1px solid var(--line);background:var(--accent-soft)}
.assistent-kopf .ki-symbol{grid-column:1;grid-row:1;width:22px;height:22px;color:var(--accent)}
.assistent-kopf strong{grid-column:2;grid-row:1;font-size:16px;color:var(--accent-hover)}
.assistent-kopf button{grid-column:3;grid-row:1 / span 3;align-self:start;min-height:44px}
.assistent-kopf .aufgabe{grid-column:2;grid-row:2;font-size:14px;font-weight:600;color:var(--ink);margin:2px 0 0}
.assistent-kopf .aufgabe .muted{font-weight:400}
.assistent-kopf .bezug{grid-column:2;grid-row:3;font-size:13px;color:var(--muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assistent-kopf .bezug:empty,.assistent-kopf .aufgabe:empty{display:none}
#assistent-inhalt{overflow-y:auto;padding:14px 16px 24px;flex:1}
.assistent-aufgabe h2{margin:0 0 8px;font-size:18px}
.assistent-aufgabe h3{margin:16px 0 6px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.assistent-hinweis{font-size:13px;color:var(--muted);background:var(--bg);border:1px solid var(--line-weich);
  border-radius:var(--r);padding:8px 10px;margin:0 0 12px}
.assistent-aufgabe textarea{min-height:140px}
.assistent-aufgabe button{min-height:44px}
.assistent button[disabled]{opacity:.5;cursor:not-allowed}
.assistent-vorschlaege{list-style:none;padding:0;margin:0}
.assistent-vorschlaege li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line-weich)}
.assistent-vorschlaege .vorschlag-text{min-width:0;overflow-wrap:break-word}
.assistent-vorschlaege button{flex:0 0 auto}
.assistent-text{margin:0 0 8px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--bg);
  border-radius:0 var(--r) var(--r) 0;white-space:pre-wrap}
.assistent-entwurf{margin:0 0 8px;padding:10px 12px;border:1px solid var(--line-weich);border-radius:var(--r);
  background:var(--bg);white-space:pre-wrap;overflow-wrap:break-word;font:inherit}
.anford .pz-assistent{grid-column:1 / -1;margin:0}
.anford .pz-assistent button.klein{min-height:44px}
.assistent-filter{border-collapse:collapse;margin:0 0 10px}
.assistent-filter th{text-align:left;font-weight:600;padding:4px 12px 4px 0;white-space:nowrap}
.assistent-filter td{padding:4px 0}
.assistent-nicht{margin:0 0 8px;padding-left:18px}
.assistent-einstieg{margin:4px 0 10px}
.assistent-einstieg button{min-height:44px}
@media (max-width:640px){
  .assistent{width:100%;border-left:0}
  .assistent-vorschlaege li{flex-wrap:wrap}
}
/* Aufgabe 2: Frag die Ausschreibung — nur Zitate, mit Fundstelle */
.frag-einstieg{margin:8px 0 0}
.frag-einstieg button,.frag-knopf{min-height:44px}
.assistent-austausch{border-top:1px solid var(--line);padding:12px 0 4px}
.assistent-frage{margin:0 0 8px}
.assistent-zitat{margin:0 0 8px;padding:8px 12px;border-left:3px solid var(--accent);background:var(--bg);
  border-radius:0 var(--r) var(--r) 0;overflow-wrap:break-word;white-space:pre-wrap}
.assistent-zitat .fundstelle{display:block;margin-top:4px;font-size:12px;color:var(--muted);white-space:normal}
.assistent-nicht{margin:0 0 8px;padding:8px 12px;border:1px dashed var(--line-strong);border-radius:var(--r);color:var(--ink)}
.assistent-melden{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 0}
.assistent-melden button{min-height:44px}
.assistent-aufgabe input[type=text]{min-height:44px}

/* ---- Gemeinsames Zeichen des Assistenten (Entwurf 2026-09-27, Variante B; reports/2026-09-27-assistent-design) ----
   ki-knopf: Text-Knopf mit Symbol an den fuenf Einstiegen; ki-mini: in Listen nur das Zeichen mit Tooltip
   (data-tip, dazu title und aria-label). Farben aus der Palette, Kontrast AA (Bericht, Abschnitt Barrierefreiheit). */
.ki-symbol{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ki-symbol .stern{fill:currentColor;stroke:none}
button.ki-knopf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-soft-line);color:var(--accent-hover);font-weight:600;font-size:14px}
button.ki-knopf:hover{background:#d6e5ee;border-color:var(--accent);color:var(--accent-hover)}
button.ki-knopf .ki-symbol{color:var(--accent)}
button.ki-mini{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-height:36px;padding:0;
  border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-soft-line);color:var(--accent-hover);flex:0 0 auto}
button.ki-mini .ki-symbol{width:20px;height:20px}
button.ki-mini:hover{background:#d6e5ee;border-color:var(--accent)}
button.ki-mini[data-tip]:hover::after,button.ki-mini[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;right:0;top:calc(100% + 6px);
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;line-height:1.3;padding:5px 9px;border-radius:4px;white-space:nowrap;z-index:5;box-shadow:var(--schatten)}
.assistent-einstieg{margin:4px 0 10px}
@media (max-width:600px){
  button.ki-mini{width:44px;height:44px;min-height:44px}
  button.ki-mini[data-tip]:hover::after,button.ki-mini[data-tip]:focus-visible::after{left:0;right:auto}
}

/* ---- Oeffentliche Ausschreibungsseiten (SEO-Stufe 2, 2026-09-27) ---- */
.brotkrumen{margin:22px 0 -18px;font-size:13.5px;color:var(--muted)}
.brotkrumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 6px}
.brotkrumen li+li::before{content:"›";margin-right:6px;color:var(--line-strong)}
.brotkrumen a{color:var(--accent);text-decoration:none}
.brotkrumen a:hover{text-decoration:underline}
.brotkrumen [aria-current]{color:var(--muted)}
.as h2{margin-top:30px}
.as-eck{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:0 0 8px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.as-eck dt{color:var(--muted);font-size:14px}
.as-eck dd{margin:0;overflow-wrap:break-word}
.as-eck.klein{padding:10px 12px;font-size:14.5px;margin:6px 0 10px}
.as-text p{margin:0 0 10px;max-width:72ch;overflow-wrap:break-word;hyphens:auto}
.as-los{border-top:1px solid var(--line);padding:14px 0 4px}
.as-los h3{margin:0 0 4px;font-size:16.5px}
.as-cpv{margin:0;padding-left:0;list-style:none}
.as-cpv li{margin:0 0 3px}
.as-aufruf{margin:28px 0 8px;padding:16px 18px;background:var(--accent-soft);border:1px solid var(--accent-soft-line);border-radius:var(--r);
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.as-aufruf p{margin:0;flex:1 1 320px}
.as-liste{margin:0 0 12px;padding-left:0;list-style:none}
ol.as-liste{counter-reset:none}
.as-liste li{padding:10px 0;border-bottom:1px solid var(--line-weich)}
.as-liste li>a{display:block;font-weight:600;color:var(--ink);text-decoration:none}
.as-liste li>a:hover{color:var(--accent);text-decoration:underline}
.as-liste .meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:3px}
.as-liste .meta .punkt{color:var(--line-strong)}
.as-einleitung{max-width:72ch}
.as-zweige{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px}
.as-zweige.spalte{display:block}
.as-zweige.spalte li{padding:5px 0;border-bottom:1px solid var(--line-weich);display:flex;justify-content:space-between;gap:12px}
.as-vertraege{margin:0 0 20px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);max-width:72ch}
.as-vertraege h2{font-size:15px;margin:0 0 4px}
.as-vertraege p{margin:0 0 8px}
.as-stellen{margin:24px 0 0;max-width:72ch}
.as-stellen h2{font-size:17px;margin:0 0 6px}
.as-quartale{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14.5px}
.as-blaettern{display:flex;gap:14px;align-items:center;margin:14px 0 4px}
@media (max-width:600px){
  .as-eck{grid-template-columns:minmax(0,1fr);gap:0}
  .as-eck dt{margin-top:8px}
  .as-eck dt:first-child{margin-top:0}
}

/* ---- Auftraggeber folgen (2026-09-29, Migration 0075) ------------------ */
/* Knopf auf der oeffentlichen Seite: ein Link, kein Skript; am Handy steht der Satz unter dem Knopf. */
.folgen-knopf,.partner-knopf{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:12px 0 20px}
.folgen-knopf .btn,.partner-knopf .btn{min-height:44px;font-weight:600}
.folgen-knopf .muted{font-size:14px;flex:1 1 260px}
.folgen-karte{max-width:600px}
.folgen-karte .warn p{margin:0 0 6px}
.folgen-wahl{margin:4px 0;display:flex;flex-direction:column;gap:10px}
.folgen-wahl fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.folgen-wahl legend{font-size:13px;color:var(--muted);font-weight:600;padding:0;margin:0 0 6px}
.folgen-profil{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 8px;align-items:center;margin:0;padding:10px 12px;
  min-height:44px;border:1px solid var(--line);border-radius:var(--r);font-size:15px;font-weight:400;color:var(--ink);cursor:pointer}
.folgen-profil input{width:18px;height:18px;margin:0}
.folgen-profil .name{font-weight:600;overflow-wrap:break-word}
.folgen-profil .stand{grid-column:2;font-size:13.5px;color:var(--muted)}
.folgen-profil.gesperrt{background:var(--bg);cursor:default}
.folgen-profil.gesperrt .name{color:var(--muted)}
.folge .folge-kopf{display:flex;gap:10px 16px;align-items:flex-start;justify-content:space-between}
.folge .folge-kopf h2{margin:0;font-size:17px}
.folge .folge-kopf h2 a{color:var(--ink);text-decoration:none}
.folge .folge-kopf h2 a:hover{color:var(--accent);text-decoration:underline}
.folge .folge-kopf form{flex:0 0 auto}
.folge>.meta{margin:2px 0 0}
.folge.ruht{background:var(--bg)}
.folge .as-liste{margin:8px 0 0}
.folge .as-liste li:last-child{border-bottom:0}
.folge .as-liste form.merken{display:inline;margin:0 0 0 auto}
.folge .as-liste .gemerkt,.folge .as-liste a.weiter{margin-left:auto}
.folge .as-liste a.weiter{white-space:nowrap;font-size:14px}
@media (max-width:600px){
  .folge .as-liste .meta{align-items:flex-start}
  .folge .as-liste form.merken,.folge .as-liste .gemerkt,.folge .as-liste a.weiter{margin-left:0}
  .folge .as-liste a.weiter{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- Auslaufende Vertraege (2026-09-28) ------------------------------- */
.ve-zahl{font-size:16px;margin:0 0 4px}
.ve-hinweis{margin:0 0 14px}
.ve-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:0 0 16px}
.ve-filter label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:13px;color:var(--muted)}
.ve-zeitraum{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.ve-zeitraum a{padding:8px 14px;font-size:14px;color:var(--ink);text-decoration:none;border-right:1px solid var(--line)}
.ve-zeitraum a:last-child{border-right:0}
.ve-zeitraum a.aktiv{background:var(--accent-soft);font-weight:600}
.ve-filter label.ve-bau{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--ink);min-height:38px}
.ve-filter label.ve-bau input{width:18px;height:18px;margin:0}
/* Sieben Spalten in der Seitenbreite: feste Aufteilung. Getrennt wird nur in den Textspalten, ueber die
   Klasse .trennbar (tests/test_web_umbruch.py); der Tabellenkopf darf hier umbrechen. */
.vertragsende table{table-layout:fixed;width:100%}
.vertragsende th{white-space:normal;hyphens:manual}
.vertragsende th:nth-child(1){width:17%}
.vertragsende th:nth-child(2){width:21%}
.vertragsende th:nth-child(3){width:15%}
.vertragsende th:nth-child(4){width:16%}
.vertragsende th:nth-child(5){width:14%}
.vertragsende th:nth-child(6){width:9%}
.vertragsende th:nth-child(7){width:8%}
.vertragsende .ve-wert{white-space:normal;overflow-wrap:normal;hyphens:none}   /* Betrag bricht nur am Leerzeichen */
.vertragsende td .subs{display:inline-block;font-size:12.5px;color:var(--muted);white-space:nowrap}
.ve-hinweis-bau{margin:0 0 14px}
.ve-mehr{margin:12px 0 0;text-align:center}
.ve-mehr button{min-height:40px;padding:8px 18px}
@media (max-width:600px){
  .ve-filter{align-items:stretch}
  .ve-zeitraum{display:flex;width:100%}
  .ve-zeitraum a{flex:1 1 0;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 6px}
  .ve-filter label,.ve-filter select{width:100%}
  .ve-filter label.ve-bau{min-height:44px}
  .ve-filter button{min-height:44px;width:100%}
  .vertragsende .ve-ende{font-weight:600}
  .vertragsende .ve-ende::before{font-weight:400}
}

/* Kalender-Abo auf der Seite Fristen (D5, 2026-09-30): Abschnitt unter der Tabelle, der Link nur einmal. */
.kalender-abo #kalender-link{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.kalender-abo .aktionen form{margin:0}
.kalender-abo .kalender-apps{margin:8px 0 4px;padding-left:18px}
.kalender-abo .kalender-apps li{margin-bottom:4px}

/* ---- Seiten-Abo (2026-10-04) ------------------------------------------- */
/* Kasten auf Sammel- und Ausschreibungsseiten (partials/seitenabo_kasten.html): serverseitig gerendert, ohne Skript.
   Feld und Knopf mit fester Mindesthoehe, damit nichts springt (Lighthouse, CLS); am Handy steht der Knopf in voller
   Breite unter dem Feld. .unsichtbar: Beschriftung nur fuer Screenreader. .seitenabo-falle: das versteckte Feld
   gegen Bots, ausserhalb des Bildschirms (nicht display:none, das ueberspringen manche Bots). */
.seitenabo{margin:18px 0 20px;padding:14px 16px;background:var(--accent-soft);border:1px solid var(--accent-soft-line);
  border-radius:var(--r);max-width:72ch}
/* Auf der Ausschreibungsseite so breit wie der Hinweis darueber und der Aufruf darunter (Frage 3, 05.10.2026); auf der
   Sammelseite bleibt 72ch wie Einleitung und Vertragskasten. Nur Breite, feste Regel: nichts springt. */
.as .seitenabo{max-width:none}
.seitenabo p{margin:0 0 10px}
.seitenabo p.klein{margin:10px 0 0}
.seitenabo-zeile{display:flex;flex-wrap:wrap;gap:8px}
.seitenabo-zeile input[type=email]{flex:1 1 240px;width:auto;min-height:44px}
.seitenabo-zeile button{flex:0 0 auto;min-height:44px;padding:0 18px}
.unsichtbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0}
.seitenabo-falle{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:600px){
  .seitenabo-zeile button{width:100%}
}

/* ---- Nachweis-Mappe (Teil D, 2026-10-05) -------------------------------- */
/* Seite „Nachweise" (nachweise.html, partials/nachweis_eintrag.html): je Eintrag eine Karte mit Name, Datum, Stand und
   „Löschen" in einer Zeile, darunter der Aufklapper „Ändern" über die ganze Breite; am Handy alles untereinander.
   Die Farbe des Stands kommt aus .status (ok, warn, fehler), Warnfarben nur hier (N23). Im Formular „hinzufügen" werden
   Nummer und Bezeichnung gedimmt, wenn die gewählte Art sie nicht hat (:has(); ohne Unterstützung bleibt alles normal,
   die Route prüft ohnehin; ein Feld mit Fehler nie). .feldfehler: der Satz unter einem Feld nach 422. */
.nachweis-einleitung{max-width:72ch}
.nachweis-schluss{margin-top:20px;max-width:72ch}
.nachweis-kalender{margin-top:20px;max-width:72ch}
.nachweis-kalender+.nachweis-schluss{margin-top:8px}
.nachweis-liste{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.nachweis-liste>li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1.6fr) auto;gap:4px 14px;align-items:start;
  box-shadow:var(--schatten)}
.nachweis-liste .nw-name{font-weight:650}
.nachweis-liste .nw-stand .status{display:inline-block;line-height:1.4}
.nachweis-liste .nw-stand .muted{font-size:14px}
.nachweis-liste .nw-loeschen{margin:0}
.nachweis-liste .nw-aendern{grid-column:1/-1}
.nachweis-liste .nw-aendern>summary{cursor:pointer;color:var(--accent);font-size:14px;width:max-content}
.nachweis-liste .nw-aendern[open]>summary{margin-bottom:10px}
.nachweis-form .zwei-spalten{gap:0 16px}
.nachweis-form>.hilfe,.nachweis-form .hilfe{font-size:13px;color:var(--muted);margin:-8px 0 0}
.nachweis-form .feld .hilfe{margin:4px 0 0}
.feldfehler{font-size:13.5px;color:var(--err-ink);margin:4px 0 0}
/* Feld mit Fehler: roter Rand (Befund 2 der Bilder vom 19.10.2026, alle Formulare). [aria-invalid] allein verlor gegen
   die Grundregel der Felder (input[type=text],… oben, hoehere Spezifitaet): der Rand blieb grau. Mit dem Elementnamen
   gleichauf und spaeter in der Datei gewinnt die Regel, auch gegen input:focus — im Fokus bleibt der Rand rot, den
   Fokus zeigt der Ring (outline). Die Regeln der Nachweis-Mappe darunter fragen [aria-invalid] ueber :has, sie
   bleiben, wie sie waren. */
[aria-invalid="true"],input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--err-ink)}
.nachweis-neu .nachweis-form:has(select[name=art] option:checked:not([value=praequalifikation]))
  .nw-nummer:not(:has([aria-invalid="true"])),
.nachweis-neu .nachweis-form:has(select[name=art] option:checked:not([value=zertifikat]):not([value=sonstiges]))
  .nw-bezeichnung:not(:has([aria-invalid="true"])){
  opacity:.55}   /* ein Feld mit Fehler (422) bleibt voll sichtbar, auch bei anderer Art (Bild 3, Schritt 6) */
@media (max-width:600px){
  .nachweis-liste>li{grid-template-columns:minmax(0,1fr);padding:12px 14px}
  .nachweis-liste .nw-loeschen button{min-height:44px}
}
/* Am Los (Schritt 5, partials/nachweis_stand.html): Stand der Mappe zur Frist im Block „Was brauche ich" bzw. als
   Aufklapper „Ihre Nachweise". Neutral, ohne Warnfarbe und ohne Hervorhebung (N23): die Mappe weiss nicht, ob die
   Ausschreibung einen Nachweis verlangt. Das Zeichen vor der zugeklappten Liste setzt diese Regel selbst, weil
   .subs-row .anford es im Block abschaltet. */
.nachweis-am-los{margin:10px 0 0;padding:10px 12px;background:var(--bg);border:1px solid var(--line-weich);
  border-radius:var(--r);overflow-wrap:break-word}
.nachweis-am-los p{margin:0 0 4px}
.nachweis-am-los .nal-titel{font-weight:650}
.nachweis-am-los ul{margin:4px 0;padding-left:18px}
.nachweis-am-los li{margin:0 0 3px}
.nachweis-am-los .nal-name{font-weight:600}
.nachweis-am-los .nal-pruefen{color:var(--muted);font-size:13.5px;margin:6px 0 0}
/* Leere Mappe (F-D1, 17.10.2026): kein Kasten, nur die Zeile „bitte prüfen" mit dem Link im Block */
.nal-leer{color:var(--muted);font-size:13.5px;margin:10px 0 0}
.nachweis-am-los details.nal-mehr>summary{cursor:pointer;color:var(--accent);list-style:none}
.nachweis-am-los details.nal-mehr>summary::-webkit-details-marker{display:none}
.subs-row .nachweis-am-los details.nal-mehr>summary::before,.nachweis-am-los details.nal-mehr>summary::before{
  content:"▸ ";font-size:11px}
.subs-row .nachweis-am-los details.nal-mehr[open]>summary::before,.nachweis-am-los details.nal-mehr[open]>summary::before{
  content:"▾ "}