/* ANNA · Büro-Konto.
 *
 * Gestaltung nach **`frag-anna-website/PROMPT.md` §12 (Marke und Gestaltung)** — demselben Konzept, nach dem
 * die Website gebaut ist. Farben §12.2, Typografie §12.3, eigene Note §12.4, Raster und Formen §12.5,
 * Bauteile §12.6, Bewegung §12.7. Die Werte sind übernommen, nicht nachempfunden.
 *
 * Wer hier etwas ändert, sieht dort nach: Ein Kunde sieht beide Oberflächen am selben Tag, und nichts wirkt
 * billiger als zwei Grüntöne, die fast gleich sind.
 *
 * Eigene Klassennamen (k-…), damit das Konto ein eigener Einstiegspunkt bleibt und kein CSS der Website lädt.
 */
@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2009, U+2011, U+2018-201E, U+2022, U+2026, U+202F, U+2032-2033, U+20AC, U+2190-2193, U+2212, U+2248, U+2264-2265;
}

/* ─── Grundlage ──────────────────────────────────────────────
   Farben, Abstände, Radien, Schatten und Kurve kommen aus dem geteilten Regelwerk:
   `/assets/gestaltung/tokens.css`, unveränderte Kopie aus `_gemeinsam/gestaltung/`, gepflegt von der
   Website-Werft. Hier steht **kein einziger Farbwert** — taucht einer auf, ist das ein Fehler.
   Die Schrift bindet die App selbst ein (oben), weil die Markenquelle bei uns liegt. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
.k-koerper {
  margin: 0; background: var(--papier); color: var(--nacht);
  font: 400 1rem/1.6 var(--schrift);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-optical-sizing: auto;
}
img, svg, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 2px; border-radius: var(--r-8); }
::selection { background: var(--gruen-zart); color: var(--nacht); }

/* ─── §12.3 Typografie ─────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-weight: 600; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(1.55rem, 1vw + 1.15rem, 2rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: var(--a2); }
h2 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.01em; margin: var(--a6) 0 var(--a3); }
h3 { font-size: 1rem; line-height: 1.4; margin: var(--a4) 0 0; font-weight: 600; }
/* §12.4, erster Punkt: Der grüne Punkt als Satzzeichen — nur H1, sonst nirgends. */
.k-inhalt > h1::after, .k-schmal > h1::after { content: "."; color: var(--gruen-tief); }  /* --gruen erreicht auf Weiß nur 3.55:1; --gruen-tief ist der Token für Farbe auf Weiß */
p { margin: 0; text-wrap: pretty; }
a { color: var(--gruen-tief); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gruen-druck); }
code { font-family: var(--mono); font-size: .92em; }
.k-lead { font-size: clamp(1rem, .25vw + .95rem, 1.125rem); line-height: 1.55; color: var(--schiefer); margin: 0 0 var(--a4); }
.k-klein { font-size: .875rem; line-height: 1.5; letter-spacing: .005em; color: var(--schiefer); }
.k-mitte { text-align: center; margin-top: var(--a4); }
/* Links in kleinen Absätzen sind Ziele, keine Fußnoten: volle Tippfläche (Regelwerk: 44 px). */
.k-mitte a, .k-hilfe a, .k-klein a, .konto-ruhig a, .k-gruppe-text a, .k-hinweis a, .k-zurueck a { display: inline-block; min-height: 44px; line-height: 44px; }
/* Mehrzeilige Links behalten ihre Zeilenhöhe, bekommen die Fläche über Innenabstand. */
.k-gruppe-text a, .k-hinweis a { line-height: 1.55; padding: 11px 0; }
.k-abtrenner { border-top: 1px solid var(--linie); padding-top: var(--a4); }
/* Zahlen und Vorgangsnummern (§12.3) */
.k-kachel-wert, .k-tabelle td { font-variant-numeric: tabular-nums; }
.k-tabelle code {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-8); background: var(--papier);
  font-family: var(--schrift); font-weight: 500; letter-spacing: .04em; white-space: nowrap;
}
/* Der Schlüssel wird abgetippt, wenn die Kamera nicht will: dicktengleiche Schrift, die 0 von O trennt. */
.k-schluessel {
  display: inline-block; margin-top: var(--a2); padding: 8px 12px; border-radius: var(--r-8); background: var(--papier);
  font-family: var(--mono); font-weight: 500; letter-spacing: .08em; word-spacing: .2em;
}
/* Der QR-Code ist der Normalweg, also groß genug zum Abfotografieren, mit weißem Rand bis an die Kante. */
.k-qr {
  width: 220px; max-width: 100%; margin: var(--a3) 0; padding: 0; border-radius: var(--r-12);
  border: 1px solid var(--linie); overflow: hidden; color: var(--nacht); background: var(--weiss);
}
.k-qr svg { width: 100%; height: auto; }

/* ─── §12.6 Knöpfe ─────────────────────────────────────────── */
.k-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; margin-top: var(--a4); padding: 0 22px;
  border-radius: var(--r-12); border: 1.5px solid transparent;
  background: var(--gruen-tief); color: var(--weiss); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s var(--kurve), border-color .18s var(--kurve), transform .12s var(--kurve), box-shadow .18s var(--kurve);
}
.k-knopf:hover { background: var(--gruen-druck); color: var(--weiss); }
.k-knopf:active { transform: translateY(1px); background: var(--gruen-druck); }
.k-knopf.k-zweit { background: var(--weiss); color: var(--nacht); border-color: var(--nacht-20); }
.k-knopf.k-zweit:hover { background: var(--papier); color: var(--nacht); border-color: var(--nacht-30); }
.k-knopf.k-zweit:active { background: var(--papier-druck); }
.k-knopf.k-klein { min-height: 44px; margin: 0; padding: 0 16px; font-size: .9375rem; }
.k-textknopf {
  background: none; border: 0; padding: 0; min-height: 44px; color: var(--gruen-tief);
  font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .18s var(--kurve);
}
.k-textknopf:hover { color: var(--gruen-druck); }
.k-textknopf:active { transform: translateY(1px); }
.k-aktionen { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: center; margin-top: var(--a3); }
.k-aktionen .k-knopf { margin-top: 0; }
@media (max-width: 599px) {
  .k-knopf { min-height: 56px; } .k-knopf.k-klein { min-height: 44px; }
  /* Am Handy darf die Beschriftung umbrechen: Ein Knopf mit langem Text schiebt sonst die Seite auf. */
  .k-knopf { white-space: normal; max-width: 100%; text-align: center; padding: 10px 18px; }
}

/* ─── Felder (Radius 8 wie §12.5, Fokusring §12.6) ─────────── */
.k-form { display: flex; flex-direction: column; gap: var(--a1); }
/* »display: block«, weil die Beschriftung über dem Feld steht und nicht daneben: Ein <label> ist von
   Haus aus inline, und mit einem Feld daneben statt darunter liest sich ein Formular wie ein Tabellenblatt. */
.k-label { display: block; font-size: .9375rem; font-weight: 500; margin-top: var(--a3); }
.k-label input, .k-label select { display: block; margin-top: 6px; }
.k-eingabe {
  width: 100%; min-height: 48px; padding: 11px 15px;
  font: inherit; font-size: 1rem; color: var(--nacht); background: var(--weiss);
  border: 1.5px solid var(--linie); border-radius: var(--r-8);
  transition: border-color .18s var(--kurve), box-shadow .18s var(--kurve);
}
.k-eingabe:hover { border-color: var(--nacht-20); }
.k-eingabe:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-zart); }
/* Markierter Text muss man sehen. Die Vorgabe des Browsers verliert auf unserem hellen Grün fast jeden
   Kontrast — im Passwortfeld sah eine Auswahl aus wie ein Schatten. */
::selection { background: var(--gruen-tief); color: var(--weiss); }
.k-eingabe::selection, .k-eingabe *::selection { background: var(--gruen-tief); color: var(--weiss); }
select.k-eingabe {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2744' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}
.k-ziffern { font-size: 1.4rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.k-schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: var(--a1); font-size: .9375rem; color: var(--nacht); cursor: pointer; }
.k-schalter input { width: 20px; height: 20px; accent-color: var(--gruen-tief); flex: none; cursor: pointer; }
.k-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--a3); }
.k-schmal-feld { flex: 0 1 180px; }
.k-name { flex: 1 1 220px; }
.k-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); }
.k-zeile .k-knopf { margin-top: 0; }
.k-tun { align-items: flex-end; gap: var(--a3); margin-top: var(--a2); }
.k-tun .k-label { margin-top: 0; }
.k-faktor .k-eingabe { flex: 0 0 132px; width: 132px; letter-spacing: .18em; text-align: center; }
.k-postenzeile { align-items: end; }

/* ─── Hinweise ─────────────────────────────────────────────── */
.k-hinweis { margin: 0 0 var(--a4); padding: 16px 20px; border-radius: var(--r-12); background: var(--papier); font-size: .9375rem; line-height: 1.55; color: var(--nacht); }
.k-hinweis.k-gut { background: var(--gruen-zart); }
.k-hinweis.k-fehler { background: var(--fehler-zart); color: var(--fehler); font-weight: 500; }
/* »Warnung« ist nicht »Fehler«: Hier ist nichts kaputt, es fehlt nur noch ein Schritt. */
.k-hinweis.k-warnung { background: var(--papier); border-left: 3px solid var(--warn); }
.k-merke { margin: var(--a5) 0 0; padding: 16px 20px; background: var(--gruen-zart); border-radius: var(--r-12); font-size: .9375rem; }
.k-leer { padding: 24px; background: var(--weiss); border: 1px dashed var(--linie); border-radius: var(--r-20); color: var(--schiefer); }
.k-fehlt { color: var(--fehler); font-weight: 500; }
.k-tarif { margin: 0 0 var(--a4); padding: 14px 18px; background: var(--gruen-zart); border-radius: var(--r-12); font-size: .9375rem; line-height: 1.55; }
/* §12.6 Etikett */
.k-etikett {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--papier); color: var(--schiefer); font-size: .75rem; font-weight: 500; line-height: 1; white-space: nowrap;
}
.k-etikett.k-etikett-gut { background: var(--gruen-zart); color: var(--gruen-tief); }
.k-etikett.k-etikett-warn { background: var(--warn-zart); color: var(--warn); }

/* ─── Tor: Anmelden, Konto anlegen, zweiter Faktor ──────────
   Links die Bühne in der Marke, rechts das Formular. Für viele Büros ist das der erste Bildschirm von ANNA. */
.k-tor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.k-buehne {
  position: relative; overflow: hidden;
  /* Auf einem 27-Zoll-Schirm wäre die Bühne sonst 1300 px breit und der Text stünde verloren am linken
     Rand. Die Fläche läuft weiterhin bis zur Kante, der Inhalt rückt an die Mittellinie. */
  display: flex; flex-direction: column; justify-content: center; gap: var(--a5);
  padding: clamp(32px, 4vw, 64px);
  background-color: var(--nacht);   /* deckende Grundfarbe unter dem Verlauf: sonst misst jede Kontrastprüfung gegen Weiß */
  background-image: radial-gradient(120% 120% at 15% 0%, var(--nacht-2) 0%, var(--nacht) 55%, var(--nacht-tief) 100%);
  color: var(--weiss);
}
/* §12.4, dritter Punkt: Flurkarten-Hintergrund — dieselbe Datei und derselbe Startwert wie im Website-Hero. */
.k-flurkarte { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  /* Auf der hellen Seite schwächer als im Hero: Dort liegt Inhalt darüber, hier ist viel freie Fläche —
     bei gleicher Deckkraft würde das Muster zum Bild statt zum Untergrund. */
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 85% 95% at 50% 45%, #000 30%, transparent 88%);
  mask-image: radial-gradient(ellipse 85% 95% at 50% 45%, #000 30%, transparent 88%); }
.k-flurkarte-dunkel { opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 10%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 10%, transparent 80%); }
.k-buehne-inhalt, .k-tor-rechts > *:not(.k-flurkarte) { position: relative; z-index: 1; }
/* Der Inhalt der Bühne rückt an die Mittellinie, bleibt darin aber linksbündig. */
.k-buehne-inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a5); width: 100%; max-width: 560px; margin-left: auto; }
.k-buehne-marke { width: clamp(128px, 11vw, 160px); height: auto; opacity: .96; }
/* Das Logo führt zurück zur Hauptseite. Der Link sitzt um das Bild, nicht daneben: Wer zurück will,
   tippt aufs Logo. Die Polsterung macht aus dem 25 px hohen Karten-Logo eine Tippfläche über 44 px. */
.k-heim { display: inline-block; border-radius: var(--r-12); }
.k-heim:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 4px; }
.k-heim-buehne { display: block; }
.k-heim-karte { display: none; }
.k-buehne-titel { font-size: clamp(1.6rem, 1.1vw + 1rem, 2.25rem); line-height: 1.15; letter-spacing: -.015em; margin: 0; max-width: 18ch; }
.k-buehne-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a4); max-width: 46ch; }
/* §12.4, zweiter Punkt: Grenzpunkt an jedem Knoten statt eines beliebigen Häkchens */
.k-buehne-punkte li { position: relative; padding-left: var(--a6); font-size: .875rem; line-height: 1.55; color: var(--auf-dunkel-2); }
.k-buehne-punkte li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--gruen-hell); background: var(--nacht);
}
.k-buehne-punkte li::after {
  content: ""; position: absolute; left: 5px; top: calc(.5em + 12px); bottom: -22px; width: 1.5px; background: var(--linie-dunkel);
}
.k-buehne-punkte li:last-child::after { display: none; }
.k-tor-rechts { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 56px); }
/* Rechts dasselbe von der anderen Seite: Die Karte steht an der Mittellinie, nicht am Bildschirmrand. */
.k-tor-rechts > *:not(.k-flurkarte) { max-width: 460px; margin-right: auto; margin-left: 0; }
.k-schmal { width: 100%; max-width: 460px; padding: clamp(24px, 2.2vw, 36px); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-28); box-shadow: var(--schatten-buehne); }
.k-karte-marke { display: block; height: auto; }
.k-tor-fuss { width: 100%; max-width: 460px; margin: var(--a5) 0 0; text-align: center; font-size: .8125rem; color: var(--schiefer); }
.k-tor-fuss a { color: var(--schiefer); display: inline-block; padding: 12px 8px; }
.k-tor-fuss .k-feedback { padding: 12px 8px; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* L300: Bricht die Reihe am Handy um, stünde ein Punkt allein am Zeilenanfang. Dort fallen die Punkte weg, die Einträge stehen mit Abstand. */
@media (max-width: 480px) {
  .k-tor-fuss { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; }
  .k-tor-fuss .k-trenner { display: none; }
}
.k-fuss-wege .k-feedback { padding: 0; font-size: inherit; text-decoration: none; }
.k-fuss-wege .k-feedback:hover, .k-tor-fuss .k-feedback:hover { color: var(--gruen-tief); text-decoration: underline; }
.k-schritte { padding-left: 20px; color: var(--schiefer); }
.k-schritte li { margin-bottom: var(--a3); }
.k-schluessel { font-family: var(--mono); font-size: 1rem; letter-spacing: .1em; padding: 10px 14px; border-radius: var(--r-8); margin-top: 6px; }
.k-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--a2); list-style: none; padding: var(--a4); margin: 0 0 var(--a5); background: var(--papier); border-radius: var(--r-12); font-family: var(--mono); }
.k-abbruch { margin-top: var(--a2); }
@media (max-width: 900px) {
  .k-tor { grid-template-columns: 1fr; }
  .k-buehne { display: none; }
  .k-heim-karte { display: block; padding: 10px 0; margin-bottom: calc(var(--a5) - 10px); }
  .k-schmal { box-shadow: var(--schatten-1); border-radius: var(--r-20); }
  .k-tor-rechts > *:not(.k-flurkarte) { margin-inline: auto; }
}

/* ─── Rahmen mit Leiste ────────────────────────────────────── */
.k-kopf { display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; padding: var(--a2) var(--a5); background: var(--weiss); border-bottom: 1px solid var(--linie); }
/* Das echte Logo statt einer nachgebauten Wortmarke: Es ist die Marke, und es liegt ohnehin bereit. */
.k-marke { display: inline-flex; align-items: center; min-height: 48px; padding-right: var(--a3); border-right: 1px solid var(--linie); }
.k-marke img { width: 104px; height: auto; }
.k-buero { font-weight: 500; }
/* Person mit Zeichen: Ein Kreis mit Initialen sagt auf einen Blick, in wessen Konto man ist. */
.k-person {
  margin-left: auto; color: var(--schiefer); font-size: .875rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px 4px 4px; border-radius: 999px;
  transition: background-color .18s var(--kurve), color .18s var(--kurve);
}
.k-person:hover { color: var(--nacht); background: var(--papier); }
.k-person:active { transform: translateY(1px); }
.k-avatar {
  display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
  border-radius: 50%; background: var(--gruen-zart); color: var(--gruen-tief);
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
}
.k-person-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.k-person-text b { font-weight: 500; color: var(--nacht); font-size: .9375rem; }
.k-person-text small { font-size: .75rem; color: var(--schiefer); }

/* ─── Unter der Navigation: Hilfe ────────────────────────────
   Bei jedem Dienst, den ein Büro kennt, steht sie an dieser Stelle. */
/* »margin: auto« schob die Karte ans untere Ende der Spalte — auf einer langen Seite lag sie tausend
   Pixel unter dem letzten Menüpunkt und gehörte optisch zu nichts mehr. Sie steht jetzt dort, wo sie
   hingehört: direkt unter der Navigation, die als Ganzes mitscrollt. */
.k-nav-fuss { margin: var(--a2) var(--a3) var(--a4); }
.k-hilfe-karte { padding: 14px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-12); }
/* L417 (Jonathan 30.09.2026: »das geht geiler«): ruhig, eine Bewegung. Der Zustand ist eine leise Zeile mit Punkt, keine Pille;
   darunter Titel, die Zusage aus dem Tarif und zwei gleich gewichtete Knöpfe in voller Breite (die Leiste ist schmal). */
.k-hilfe-stand { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: .75rem; font-weight: 500; color: var(--schiefer); }
.k-hilfe-stand .k-punkt { margin: 0; width: 7px; height: 7px; flex: none; }
.k-hilfe-titel { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.k-hilfe-text { margin-top: 4px; font-size: .8125rem; line-height: 1.5; color: var(--schiefer); }
.k-hilfe-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.k-hilfe-knoepfe > * { min-width: 0; }
.k-hilfe-knopf { width: 100%; justify-content: flex-start; padding: 0 14px; font-size: .875rem; }
.k-hilfe-knopf span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.k-hilfe-sym { flex: none; width: 18px; height: 18px; opacity: .8; }
.k-melden > summary.k-hilfe-knopf, .k-melden > summary.k-hilfe-knopf:hover { list-style: none; color: var(--nacht); }
.k-melden[open] > summary.k-hilfe-knopf { border-color: var(--gruen-tief); }
.k-melden-betrieb { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--a2); font-size: .8125rem; line-height: 1.4; cursor: pointer; }
.k-melden-betrieb input { flex: none; margin-top: 2px; }

/* ─── Fußzeile ───────────────────────────────────────────────
   Impressum und Datenschutz gehören auf jede Seite, nicht nur auf die offenen. */
.k-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a4);
  max-width: 1180px; margin: var(--a7) 0 0; padding-top: var(--a4); border-top: 1px solid var(--linie);
  font-size: .8125rem; color: var(--schiefer);
}
/* Der Weg zur Hauptseite ist ein Link wie jeder andere: Er braucht eine Tippfläche, nicht nur eine
   Schrifthöhe. Ohne die Polsterung waren es 21 px. */
.k-fuss-marke .k-heim { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0 -4px; }
.k-fuss-marke b { color: var(--nacht); font-weight: 600; }
.k-fuss-wege { display: flex; flex-wrap: wrap; gap: var(--a3); }
.k-fuss-wege a { color: var(--schiefer); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.k-fuss-wege a:hover { color: var(--gruen-tief); text-decoration: underline; }
/* Nicht mehr ans rechte Ende geschoben: Auf einem breiten Schirm stand die Firmenzeile allein unter der
   Vorschauspalte, während alles andere links klebte. Zusammen gelesen wird sie ohnehin. */
.k-fuss-klein { margin-left: 0; }
.k-wechsel select { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--linie); border-radius: var(--r-8); font: inherit; background: var(--weiss); }
/* »stretch« statt »start«: Sonst endet die Navigationsspalte am letzten Eintrag und der Hilfe-Block
   hängt in der Luft statt unten zu stehen. */
/* L417: 276 statt 252 px. Der längste Menüpunkt (»Leistungen und Preise« mit Neu-Zeichen) ist 251 px breit und schob die Leiste
   11 px auf, darunter stand ein waagrechter Scrollbalken (Jonathan 30.09.2026). */
.k-raster { display: grid; grid-template-columns: 276px 1fr; align-items: stretch; gap: 0; min-height: calc(100vh - 72px); }
.k-raster > * { min-width: 0; }  /* sonst schiebt die scrollende Leiste am Handy die ganze Seite auf */
.k-nav { display: flex; flex-direction: column; min-width: 0; align-self: start; position: sticky; top: 0;
  max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.k-nav ul { list-style: none; margin: 0; padding: var(--a4) var(--a3); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.k-nav ul a {
  /* relative: Das unsichtbare Vorlese-Wort (»neu: 6«, absolut) hängt sonst an der Leiste und entkommt am Handy der scrollenden
     Reiterzeile; die Leiste selbst wurde dann 677 statt 360 px breit (L417, gemessen). */
  position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-8); color: var(--nacht);
  text-decoration: none; font-size: .9375rem; font-weight: 500; white-space: nowrap;   /* »Leistungen und Preise« bricht sonst um */
  transition: background-color .18s var(--kurve), color .18s var(--kurve);
}
/* §12.6 Symbole: eigene Linien-Symbole, 24 px, Strich 1,75, runde Enden — wie im Modul */
.k-nav ul a::before {
  content: ""; width: 22px; height: 22px; flex: none; opacity: .75;
  background: currentColor; -webkit-mask: var(--sym) center / 22px no-repeat; mask: var(--sym) center / 22px no-repeat;
}
.k-nav ul a:hover { background: var(--papier); color: var(--nacht); }
.k-nav ul a:active { background: var(--linie); }   /* sichtbarer Druck-Zustand, wie bei jedem anderen Bauteil */
.k-nav ul a.an { background: var(--gruen-zart); color: var(--gruen-druck); font-weight: 600; }
.k-nav ul a.an::before { opacity: 1; }
/* Der Arbeitsbereich bekommt eine Breite, nicht den ganzen Bildschirm.
   Auf einem 27-Zoll-Schirm wäre ein Eingabefeld sonst 1400 px breit: unlesbar, und es sieht aus, als hätte
   niemand hingeschaut. Alles bleibt in einer Spalte, die man in einem Blick erfasst. */
/* Der Arbeitsbereich steht mittig in seiner Spalte. Zentriert wird **er**, nicht jedes Element darin:
   Sonst rutscht eine schmale Überschrift in die Mitte, während die Karten daneben links stehen. */
/* »width: 100%« ist nötig: Ein Raster-Kind mit »margin: auto« richtet sich sonst nach seinem breitesten
   Inhalt statt nach der Spalte, und eine Tabelle schiebt am Handy die ganze Seite auf. */
.k-inhalt { width: 100%; max-width: calc(1180px + 2 * clamp(16px, 3vw, 40px)); margin-inline: auto; padding: var(--a6) clamp(16px, 3vw, 40px) var(--a8); }
.k-inhalt > * { max-width: 1180px; }
.k-inhalt > h1, .k-inhalt > .k-lead { max-width: 46ch; }

/* ─── Gruppen ────────────────────────────────────────────────
   Zusammengehörige Einstellungen stehen in einer Karte mit Überschrift, statt in einer langen Reihe
   gleich aussehender Felder. Das ist der Unterschied zwischen einem Formular und einer Oberfläche. */
.k-gruppe {
  max-width: 1180px; margin: 0 0 var(--a4); padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 32px);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-20); box-shadow: var(--schatten-1);
}
.k-gruppe > h2 { margin: 0 0 var(--a1); font-size: 1.0625rem; }
.k-gruppe > .k-gruppe-text { margin: 0 0 var(--a4); color: var(--schiefer); font-size: .9375rem; max-width: 62ch; }
.k-gruppe > .konto-abschnitt:first-of-type { margin-top: var(--a3); }
/* Eine Textzeile über die volle Breite liest niemand gern: Eingaben bleiben so breit wie nötig. */
/* Felder füllen ihre Karte. Vorher standen sie bei 640 px still, während die Karte bis 726 px ging:
   links 33 px Rand, rechts 119 px. Begrenzt wird jetzt die Karte, nicht das Feld darin. */
.k-gruppe .k-eingabe, .k-gruppe textarea { max-width: 100%; }
.k-gruppe .k-eingabe.k-breit-feld { max-width: none; }

/* ─── Kacheln, Tabellen, Karten (§12.6) ────────────────────── */
.k-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--a3); margin: var(--a5) 0 var(--a2); }
.k-kachel { display: flex; flex-direction: column; gap: 2px; padding: 20px 24px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-20); box-shadow: var(--schatten-1); }
.k-kachel-wert { font-size: 2rem; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.k-kachel-titel { font-weight: 500; font-size: .9375rem; }
.k-kachel-unter { color: var(--schiefer); font-size: .8125rem; }
/* Anteile als Balken: In »8 von 23« steckt eine Zahl, in einem Balken eine Ordnung. Die Zahl steht
   trotzdem daneben — ein Balken ohne Zahl ist eine Behauptung. */
.k-anteile { list-style: none; margin: var(--a3) 0 0; padding: 0; display: grid; gap: var(--a2); }
.k-anteile li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 220px); align-items: center; gap: var(--a3); }
.k-anteile b { display: block; font-weight: 500; font-size: .9375rem; }
.k-anteile small { display: block; color: var(--schiefer); font-size: .8125rem; }
progress.k-balken { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--papier); }
progress.k-balken::-webkit-progress-bar { background: var(--papier); border-radius: 999px; }
progress.k-balken::-webkit-progress-value { background: var(--gruen-tief); border-radius: 999px; }
progress.k-balken::-moz-progress-bar { background: var(--gruen-tief); border-radius: 999px; }
@media (max-width: 560px) { .k-anteile li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

.k-rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linie); border-radius: var(--r-20); background: var(--weiss); }
.k-rollen .k-tabelle { min-width: 540px; }
.k-tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.k-tabelle th, .k-tabelle td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.k-tabelle thead th { background: var(--papier); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--nacht); }
.k-tabelle tbody tr:last-child > * { border-bottom: 0; }
.k-tabelle td .k-textknopf { min-height: 36px; padding: var(--a1) 0; font-size: .875rem; }
.k-tabelle td form { margin: 0; }
/* Zweitzeile in einer Zelle: »889« und »5 von 5« klebten zu »8895«, weil small inline blieb. In einer
   Tabelle mit Zahlen ist das nicht nur unschön, sondern liest sich als falscher Wert. */
.k-tabelle td > small, .k-tabelle td > b + small { display: block; margin-top: 3px; color: var(--schiefer); font-size: .8125rem; line-height: 1.45; }
.k-tabelle td > b { display: block; font-weight: 600; }
.k-summe { margin-top: var(--a3); }
.k-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--a3); margin: var(--a4) 0 var(--a2); }
.k-karte { display: flex; flex-direction: column; padding: 28px 32px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-20); box-shadow: var(--schatten-1); }
.k-karte h3, .k-karte h2 { margin: 0 0 var(--a1); font-size: 1.15rem; }
/* Der Abstand gilt für gestapelte Karten. In einem Raster hat das Raster schon seinen »gap« — dort schob
   diese Regel jede Karte außer der ersten um 16 px nach unten: drei Karten nebeneinander, drei
   verschiedene Oberkanten, drei verschiedene Unterkanten und Knöpfe auf drei Höhen. */
.k-karte + .k-karte { margin-top: var(--a3); }
.k-karten > .k-karte + .k-karte, .k-kacheln > .k-karte + .k-karte { margin-top: 0; }
.k-karte > p:last-child { margin-bottom: 0; }
.k-karte .k-knopf { margin-top: auto; align-self: flex-start; }
/* In einer Reihe liegen die Code-Blöcke auf gleicher Höhe, damit auch die Knöpfe darunter auf einer Linie
   liegen. Zwei Zeilen sind das Maß; ein einzeiliger Link füllt die zweite Zeile mit Luft. */
.k-karten .k-code { min-height: calc(2 * 1.7em + 32px); display: flex; align-items: center; }
/* §12.6 Code-Block: nachtblaue Fläche, Monospace, nur Weiß und Grün-hell */
.k-code {
  margin: var(--a3) 0; padding: 16px 18px; border-radius: var(--r-12); overflow-x: auto;
  background: var(--nacht); color: var(--auf-dunkel-2); font-family: var(--mono); font-size: .8125rem; line-height: 1.7; max-width: 100%;
}
.k-code code { color: inherit; }
.k-lang { max-height: 340px; overflow-y: auto; white-space: pre-wrap; }
.k-domains { list-style: none; margin: var(--a3) 0; padding: 0; display: grid; gap: var(--a2); }
.k-domains li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a3); padding: 16px 20px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-12); }
.k-domains form { margin: 0; }
.k-pflichtlink { display: inline-block; padding: 11px 0; word-break: break-all; }

/* ─── Abschnitte (Leistungen, Empfänger, Team) ─────────────── */
.k-leistung { margin: var(--a3) 0; padding: 24px 28px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-20); box-shadow: var(--schatten-1); }
.k-preisart { flex: 1 1 200px; color: var(--schiefer); font-size: .875rem; }
.k-preis { margin-top: var(--a3); border-top: 1px solid var(--linie); padding-top: var(--a2); }
.k-preis summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
  font-weight: 500; color: var(--gruen-tief); padding: 6px 0;
  transition: color .18s var(--kurve);
}
.k-preis summary:hover { color: var(--gruen-druck); }
/* Der Nebenweg bleibt zugeklappt: Das Passwort ist ein Angebot, kein Schritt. */
.k-aufklapp { margin-top: var(--a5); border-top: 1px solid var(--linie); padding-top: var(--a2); }
.k-aufklapp summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
  font-weight: 500; color: var(--gruen-tief); font-size: .9375rem;
  transition: color .18s var(--kurve);
}
.k-aufklapp summary:hover { color: var(--gruen-druck); }
.k-aufklapp summary:active { transform: translateY(1px); }
.k-preisform { margin-top: var(--a3); display: grid; gap: var(--a3); }
.k-preisform h3 { margin: var(--a3) 0 0; }
.k-zusatz { margin: var(--a1) 0 var(--a2); }
.k-stand { margin-left: auto; white-space: nowrap; }

/* ─── Zustand ──────────────────────────────────────────────── */
.k-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; background: var(--schiefer); }
.k-punkt-gut { background: var(--gruen); }
.k-punkt-warnung { background: var(--warn); }
.k-punkt-achtung { background: var(--warn); }
.k-punkt-hinweis { background: var(--nacht-20); }   /* neutral: eine Zahl, keine Mahnung */
.k-hinweisliste { list-style: none; margin: var(--a3) 0 0; padding: 0; display: grid; gap: var(--a2); }
.k-hinweisliste li { padding: 16px 20px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-12); font-size: .9375rem; box-shadow: var(--schatten-1); min-width: 0; overflow-wrap: anywhere; }   /* Fundstellen mit langen Adressen brechen um, statt die Karte zu sprengen (Wächter-Seite, 390 px) */
/* »Achtung« ist nicht »Fehler«: --warn ist die Farbe dafür, --warn-zart ihr Hintergrund (beide vom Regelwerk seit 20.09.2026). */
.k-hinweisliste li.k-achtung { border-color: var(--warn); background: var(--warn-zart); }
.k-hinweisliste li a { display: inline-block; margin-left: 6px; min-height: 44px; line-height: 44px; }
.k-filter { align-items: flex-end; gap: var(--a3); margin: var(--a5) 0 var(--a4); }
.k-filter .k-label { margin-top: 0; }
.k-filter .k-knopf { margin-top: 0; }

/* ─── Aussehen und Einbauen ────────────────────────────────── */
/* Formular und Vorschau als ein Block, nicht zwei an die Bildschirmränder geschobene Hälften. */
.k-zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 372px); gap: var(--a4); align-items: start; max-width: 1180px; }
.k-vorschau { position: sticky; top: var(--a4); height: 640px; border: 1px solid var(--linie); border-radius: var(--r-28); overflow: hidden; background: var(--weiss); box-shadow: var(--schatten-2); }
.k-vorschau iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 1000px) { .k-zweispalt { grid-template-columns: 1fr; } .k-vorschau { position: static; height: 520px; } }

@media (max-width: 760px) {
  /* Kopfzeile am Handy in zwei festen Zeilen: oben »anna … Abmelden«, darunter Büro und Person. */
  .k-kopf { gap: var(--a2) var(--a3); padding: var(--a2) var(--a4); }
  /* Nur die Marke **in der Kontoleiste**: Ohne diese Einschränkung galt die Reihenfolge auch für den
     Assistenten-Kopf, und dort stand das Logo am Telefon plötzlich rechts neben dem Stand. */
  .k-kopf .k-marke { order: 1; }
  .k-kopf form[action$="abmelden"] { order: 2; margin-left: auto; }
  .k-buero { order: 3; font-size: .9375rem; }
  .k-wechsel { order: 4; }
  .k-person { order: 5; margin-left: auto; font-size: .8125rem; }
  .k-raster { grid-template-columns: 1fr; }
  /* Am Handy wird die Leiste zur Reiterzeile. Die Spalten-Flexbox von oben muss dafür weg, sonst kann
     das scrollende ul seine Breite nicht begrenzen und schiebt die ganze Seite auf. */
  /* FB280 (M23): Die Reiterzeile klebt auch am Handy; ohne eigenen Hintergrund schien der Inhalt beim Scrollen durch, Schrift auf Schrift. */
  .k-nav { display: block; min-height: 0; min-width: 0; z-index: 3; background: var(--papier); border-bottom: 1px solid var(--linie); }
  .k-nav ul { display: flex; overflow-x: auto; padding: var(--a2) var(--a3); }
  .k-nav-fuss { display: none; }   /* Hilfe steht dann in der Fußzeile */
  .k-nav ul a { white-space: nowrap; }
  /* Ein Sprungziel (etwa /konto/anleitung#<code> aus einer Meldungsmail, L244) darf nicht unter der klebenden Reiterzeile
     (62 px gemessen) verschwinden. */
  :target { scroll-margin-top: calc(62px + var(--a3)); }
  .k-inhalt { padding: var(--a5) var(--a4) var(--a7); }
  /* Vier Kennzahlen untereinander wären eine Bildschirmlänge — zwei nebeneinander sind auf einen Blick erfassbar. */
  .k-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2); }
  .k-kachel { padding: 16px 18px; }
  .k-kachel-wert { font-size: 1.5rem; }
  .k-filter .k-schmal-feld { flex: 1 1 140px; }
  .k-leistung, .k-karte { padding: 20px; }
  h2 { margin-top: var(--a6); }
}

/* ─── §12.7 Bewegung ───────────────────────────────────────────
   Nur CSS und IntersectionObserver, keine Bibliothek. Einblenden mit 12 px Versatz, gestaffelt 60 ms.
   Der Inhalt ist ohne JavaScript sichtbar: Erst die Klasse »js« am <html> schaltet die Bewegung ein.
   Kein weiches Scrollen (Lenis) — das Konto ist ein Werkzeug, in dem man Tabellen liest und Formulare
   ausfüllt; entkoppeltes Scrollen nähme dort die direkte Kontrolle. */
@media (prefers-reduced-motion: no-preference) {
  /* Nichts wird versteckt: Die Klasse kommt erst, wenn das Element in Sicht gerät — kein Aufblitzen,
     kein Inline-Skript (die CSP des Kontos erlaubt keines) und ohne JavaScript ist alles einfach da. */
  .k-da { animation: k-auf .45s var(--kurve) both; animation-delay: var(--verzug, 0ms); }
  @keyframes k-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* §12.6 Symbole der Navigation — erzeugt mit Seite::symbolRegeln(), damit Pfad und Stil an einer Stelle stehen */
.k-sym-hilfe::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M9.5%209.5a2.5%202.5%200%201%201%203.2%202.4c-.5.2-.7.6-.7%201.1v.5%22%2F%3E%3Cpath%20d%3D%22M12%2016.8v.2%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-einrichten::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h10%22%2F%3E%3Cpath%20d%3D%22M4%2012h10%22%2F%3E%3Cpath%20d%3D%22M4%2018h7%22%2F%3E%3Cpath%20d%3D%22m16%2015%202.5%202.5L23%2013%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-uebersicht::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%229%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%225%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2212%22%20width%3D%227%22%20height%3D%229%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2216%22%20width%3D%227%22%20height%3D%225%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-eingangsbuch::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v14H4z%22%2F%3E%3Cpath%20d%3D%22M4%2014h4l1.5%202.5h5L16%2014h4%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-leistungen::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18%22%2F%3E%3Cpath%20d%3D%22M5%207h14%22%2F%3E%3Cpath%20d%3D%22M5%207l-2%206a3.2%203.2%200%200%200%204%200Z%22%2F%3E%3Cpath%20d%3D%22M19%207l2%206a3.2%203.2%200%200%201-4%200Z%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-aussehen::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M12%203.5a8.5%208.5%200%200%201%200%2017c-1.4%200-2-.9-2-1.8%200-1.6%201.6-1.7%201.6-3.2%200-1-.8-1.8-1.8-1.8H7.5A4%204%200%200%201%203.5%209.7%208.5%208.5%200%200%201%2012%203.5Z%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-einbauen::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%208l-5%204%205%204%22%2F%3E%3Cpath%20d%3D%22M15%208l5%204-5%204%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-zustellung::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3.5%207%208.5%206%208.5-6%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-texte::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h8l4%204v14H6z%22%2F%3E%3Cpath%20d%3D%22M14%203v4h4%22%2F%3E%3Cpath%20d%3D%22M9%2013h6M9%2017h4%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-tarif::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203.5h12v17l-2.4-1.6-2.4%201.6-2.4-1.6L8.4%2020.5%206%2018.9z%22%2F%3E%3Cpath%20d%3D%22M9.5%208.5h5M9.5%2012.5h5%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-team::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M3.5%2020a5.5%205.5%200%200%201%2011%200%22%2F%3E%3Cpath%20d%3D%22M16%205.5a3.2%203.2%200%200%201%200%205%22%2F%3E%3Cpath%20d%3D%22M17.5%2014.5a5.5%205.5%200%200%201%203%205.5%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-bueros::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V9.2l6-3.4%206%203.4V20%22%2F%3E%3Cpath%20d%3D%22M16%2012.5h4V20%22%2F%3E%3Cpath%20d%3D%22M2.5%2020h19%22%2F%3E%3Cpath%20d%3D%22M8.5%2020v-3.6h3V20%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-interessenten::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019.5c0-3%202.7-5%206-5s6%202%206%205%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M15.5%209.8%2017.4%2011.7%2021%208%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-protokoll::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M12%207v5.2l3.2%202%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-betrieb::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10%22%2F%3E%3Cpath%20d%3D%22M10%2020V4%22%2F%3E%3Cpath%20d%3D%22M16%2020v-7%22%2F%3E%3Cpath%20d%3D%22M22%2020H2%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-leads::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5%2020a7%207%200%200%201%2014%200%22%2F%3E%3Cpath%20d%3D%22M19%204v4M17%206h4%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-mails::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3.5%207%208.5%206%208.5-6%22%2F%3E%3Cpath%20d%3D%22M17%203v4%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-einstellungen::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h16%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M4%2016h16%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2216%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-marketing::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%203v4M16%203v4%22%2F%3E%3Cpath%20d%3D%22m8.5%2015.5%202.2%202.2%204.8-4.8%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-waechter::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%205%206v5.5c0%204.3%203%208.2%207%209.5%204-1.3%207-5.2%207-9.5V6z%22%2F%3E%3Cpath%20d%3D%22m9%2012.2%202%202%204-4.2%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-rechtsquellen::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5A2.5%202.5%200%200%201%206.5%203H20v15H6.5A2.5%202.5%200%200%200%204%2020.5z%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2011h6%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-demo::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M10%208.5v4l3.5-2z%22%2F%3E%3Cpath%20d%3D%22M8%2020h8%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-betreiberteam::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M3.5%2020a5.5%205.5%200%200%201%2011%200%22%2F%3E%3Cpath%20d%3D%22M16%205.5a3.2%203.2%200%200%201%200%205%22%2F%3E%3Cpath%20d%3D%22M17.5%2014.5a5.5%205.5%200%200%201%203%205.5%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-rueckmeldungen::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5h16v10H9l-4%203.5v-3.5H4z%22%2F%3E%3Cpath%20d%3D%22M8.5%209.5h7M8.5%2012.5h4.5%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-rechnungsvorlage::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203.5h9l3%203V20.5H6z%22%2F%3E%3Cpath%20d%3D%22M9%209h6M9%2012h6M9%2015.5h3.5M15%2015.5h0%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-martin::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206a2.5%202.5%200%200%201%202.5-2.5h11A2.5%202.5%200%200%201%2020%206v7.5a2.5%202.5%200%200%201-2.5%202.5H9.5L5%2020v-4.2A2.5%202.5%200%200%201%204%2013.5z%22%2F%3E%3Cpath%20d%3D%22M8%208.5h8M8%2011.5h5%22%2F%3E%3C%2Fsvg%3E")}
.k-sym-sigi::before{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22m15.3%2015.3%205.2%205.2%22%2F%3E%3Cpath%20d%3D%22m7.5%2012.5%202-2%201.8%201.6%202.4-3%22%2F%3E%3C%2Fsvg%3E")}

/* ─── Zustandsseiten (geschafft, unterwegs, abgelaufen) ────── */
.k-zeichen { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: var(--a4); }
.k-zeichen svg { width: 26px; height: 26px; }
/* Die Adresse, an die es ging: der Anker der Seite. Ohne sie merkt niemand einen Tippfehler. */
.k-an {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--a2); padding: 12px 16px;
  background: var(--papier); border-radius: var(--r-12); font-size: .9375rem;
}
.k-an span { color: var(--schiefer); font-size: .8125rem; flex: none; }
.k-an b { min-width: 0; overflow-wrap: anywhere; }
.k-abzeichen {
  display: inline-block; margin: 0 0 var(--a4); padding: 4px 12px; border-radius: 999px;
  background: var(--gruen-zart); color: var(--gruen-tief); font-size: .8125rem; font-weight: 500;
}
/* Was jetzt zu tun ist, als Folge statt als Textwand. */
.k-ablauf { list-style: none; margin: 0 0 var(--a4); padding: 0; display: grid; gap: var(--a2); font-size: .9375rem; color: var(--schiefer); }
.k-ablauf li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.k-schritt-nr {
  display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--weiss); border: 1.5px solid var(--linie);
  font-size: .75rem; font-weight: 600; color: var(--nacht); font-variant-numeric: tabular-nums;
}
.k-zeichen-gut { background: var(--gruen-tief); color: #fff; }
.k-zeichen-warten { background: var(--gruen-zart); color: var(--gruen-tief); }
.k-zeichen-aus { background: var(--papier); color: var(--schiefer); }
.k-kasten { margin: 0 0 var(--a5); padding: 16px 20px; background: var(--papier); border-radius: var(--r-12); font-size: .9375rem; line-height: 1.55; }
.k-kasten b { display: block; }
.k-weiter { margin: 0; }
.k-weiter .k-knopf { margin-top: 0; }
.k-hilfe { margin-top: var(--a5); padding-top: var(--a4); border-top: 1px solid var(--linie); }

/* Passwortfeld mit Auge */
.k-passwort { position: relative; display: flex; }
.k-passwort .k-eingabe { padding-right: 56px; }
.k-auge {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--r-8); background: none; color: var(--schiefer); cursor: pointer;
  transition: color .18s var(--kurve), background-color .18s var(--kurve);
}
.k-auge:hover { color: var(--nacht); background: var(--papier); }
.k-auge svg { width: 21px; height: 21px; }

/* ─── Einstellungen als Liste ───────────────────────────────────────────────
   Eine Zeile je Sache: was es ist, in welchem Zustand es ist, und die Bedienung erst beim Aufklappen.
   Vorher standen hier vier Karten mit offenen Formularen untereinander, darunter zwei gleich aussehende
   Code-Felder — man musste raten, welches wozu gehört. Wer täglich mit Laien zu tun hat, baut so:
   ruhige Liste, Zustand in Klartext, ein Weg je Zeile. */
/* **Eigener Name (23.09.2026).** Diese Liste hieß »k-einstellungen« wie das Einstellungsformular der
   Aussehen-Seite. Drei Regeln, ein Selektor, alle auf oberster Ebene — die letzte gewann, und das war
   »gap: 0« fürs Formular. Gemessen: vier Karten mit 0 px Abstand, obwohl hier 8 px standen. */
.k-zugang-liste { display: grid; gap: var(--a4); margin-top: var(--a6); max-width: 720px; }
.k-zugang-liste > * { min-width: 0; }
.k-einstellung { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-20);
  box-shadow: var(--schatten-1); overflow: hidden; }
.k-einstellung-kopf { display: flex; align-items: flex-start; gap: var(--a4); padding: var(--a5); }
.k-einstellung-was { min-width: 0; flex: 1 1 auto; }
.k-einstellung-was b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--nacht); }
/* Eine Zeile Fließtext soll man lesen können, ohne die Zeile zu verlieren: rund 62 Zeichen, nicht 85. */
.k-einstellung-was small { display: block; max-width: 62ch; margin-top: 6px; color: var(--schiefer);
  font-size: .875rem; line-height: 1.6; }
/* **Der Zustand steht auf der Grundlinie des Titels, nicht in der Mitte der Karte.**
   Mit `align-self: center` hing er an der Kartenhöhe: gemessen 33, 11, 21 und 11 px unter der
   Titel-Oberkante — vier Karten, vier Höhen. Das liest sich als Unruhe, bevor man die Wörter liest. */
.k-einstellung-stand { flex: none; align-self: flex-start; margin-top: 1px; padding: 5px 14px; border-radius: 999px;
  background: var(--papier); color: var(--schiefer); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
/* --gruen-tief erreicht auf --gruen-zart nur 4,47:1, knapp unter den nötigen 4,5. --gruen-druck ist der
   nächstdunklere Ton aus dem Regelwerk (5,7:1). Eigentlich fehlt dort ein Token »Grün auf zartem Grün«,
   so wie --warn-zart gefehlt hat; der Website-Werft gemeldet. */
.k-einstellung-stand.k-ist-gut { background: var(--gruen-zart); color: var(--gruen-druck); }
.k-einstellung-mehr { border-top: 1px solid var(--linie); }
.k-einstellung-mehr > summary { display: flex; align-items: center; min-height: 54px; padding: 0 var(--a5);
  color: var(--gruen-tief); font-size: .875rem; font-weight: 500; cursor: pointer; list-style: none;
  transition: background-color .18s var(--kurve); }
.k-einstellung-mehr > summary::-webkit-details-marker { display: none; }
.k-einstellung-mehr > summary::after { content: ""; width: 15px; height: 15px; margin-left: auto; opacity: .6;
  background: currentColor; -webkit-mask: var(--sym-pfeil) center/contain no-repeat; mask: var(--sym-pfeil) center/contain no-repeat;
  transform: rotate(90deg); transition: transform .18s var(--kurve); }
.k-einstellung-mehr[open] > summary::after { transform: rotate(-90deg); }
.k-einstellung-mehr > summary:hover { background: var(--papier); }
.k-einstellung-form { padding: var(--a2) var(--a5) var(--a5); border-top: 1px solid var(--linie); }
.k-einstellung-form .k-form { margin-top: var(--a3); }
/* Der Weg, der etwas wegnimmt, steht unten und abgesetzt — nie neben dem Knopf, der etwas einrichtet. */
.k-einstellung-weg { margin-top: var(--a4); padding-top: var(--a3); border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3); }
@media (max-width: 560px) {
  .k-einstellung-kopf { flex-direction: column; gap: var(--a2); padding: var(--a4); }
  .k-einstellung-stand { align-self: flex-start; margin-top: 0; }
  .k-einstellung-mehr > summary { padding: 0 var(--a4); }
  .k-einstellung-form { padding: var(--a2) var(--a4) var(--a4); }
}

/* ─── Gefunden: was ANNA schon erledigt hat ─────────────────────────────────
   Drei Zeilen mit Haken statt drei leeren Feldern. Der Unterschied ist nicht Zierde: Ein Formular fragt,
   eine Fundliste berichtet. Wer etwas gefunden hat, legt es vor — Felder kommen erst, wenn wirklich
   etwas fehlt. */
.k-funde { list-style: none; margin: var(--a5) 0 var(--a4); padding: 0; display: grid; gap: 2px; }
.k-fund { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--a3); align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--linie); }
.k-fund:last-child { border-bottom: 0; }
.k-fund-haken { width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--gruen-tief);
  -webkit-mask: none; position: relative; }
.k-fund-haken::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px;
  border: 2px solid var(--weiss); border-top: 0; border-left: 0; transform: rotate(42deg); }
.k-fund-text { min-width: 0; }
.k-fund-text b { display: block; font-size: .8125rem; font-weight: 600; color: var(--schiefer); text-transform: none; }
.k-fund-wert { display: block; margin-top: 1px; font-size: .9375rem; color: var(--nacht); overflow-wrap: anywhere; }
.k-fund-text small { display: block; margin-top: 2px; color: var(--schiefer); font-size: .8125rem; line-height: 1.45; }

/* Die beiden Pflichtlinks gehören zusammen: ein Rahmen um beide sagt »das ist eine Sache«, nicht zwei. */
.k-abgleich-gruppe { margin: var(--a3) 0 var(--a4); padding: var(--a3) var(--a4) var(--a1); border: 1px solid var(--linie);
  border-radius: var(--r-20); background: var(--weiss); }
.k-abgleich-gruppe .k-label:first-child { margin-top: 0; }

/* Angaben als Liste: Bezeichnung klein darüber, Wert darunter. Eine Tabelle wäre hier zu schwer, und
   zwei Spalten brechen auf dem Handy ohnehin um. */
.k-angaben { margin: var(--a3) 0 0; display: grid; gap: var(--a2); }
.k-angabe { padding-bottom: var(--a2); border-bottom: 1px solid var(--linie); }
.k-angabe:last-child { border-bottom: 0; padding-bottom: 0; }
.k-angabe dt { font-size: .8125rem; color: var(--schiefer); }
.k-angabe dd { margin: 2px 0 0; font-size: .9375rem; color: var(--nacht); overflow-wrap: anywhere; }
.k-buero-link { display: block; text-decoration: none; color: inherit; }
/* **Eigene Zeile, sonst verschmilzt es.** »Vermessungsbüro MustermannBaden-Württemberg« liest das Auge
   als ein Wort — genau der Fehler, den die Website-Werft uns gemeldet hat. Ihre Prüfung findet ihn hier
   nicht, weil sie `small` nicht mitprüft; gemeldet ist das. */
.k-buero-link small { display: block; margin-top: 2px; }
.k-buero-link:hover b { text-decoration: underline; }
/* Der Link, den das Büro bekommen hat — leise, aber vollständig: Wer beim Einbauen hilft, liest ihn vor. */
.k-buero-link-adresse { display: block; margin-top: 3px; font-family: var(--mono); font-size: .75rem;
  color: var(--schiefer); overflow-wrap: anywhere; }
/* Welche Nachricht der Strecke schon heraus ist. Grau heißt »noch nicht«, nicht »fehlt«: Eine Mail an
   Tag 21 fehlt an Tag 9 nicht, sie ist noch nicht dran. */
.k-mailspalte { white-space: normal; }
/* Weiß statt Papier als Grund: Auf dem getönten Papier kam Schiefer auf 4,47:1 und damit knapp unter die
   Schwelle. Ein Etikett, das man nicht lesen kann, ist kein Etikett. */
.k-mailpunkt { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: var(--r-8);
  background: var(--weiss); border: 1px solid var(--linie); color: var(--schiefer);
  font-size: .6875rem; line-height: 1.6; white-space: nowrap; }
/* **--gruen-druck, nicht --gruen-tief.** Tief auf Zart ergibt 4,46:1 und liegt damit knapp unter der
   Schwelle — gemessen von der Prüfung des Regelwerks, nicht geschätzt. Für Flächen und Knöpfe ist die
   Kombination in Ordnung, für 11-px-Text nicht. */
.k-mailpunkt-raus { background: var(--gruen-zart); border-color: var(--gruen-zart); color: var(--gruen-druck); font-weight: 500; }
/* Die zwei Wege nebeneinander, solange Platz ist: Code und QR gehören zusammen, wenn man beim Einbauen
   hilft — der eine für die Website, der andere fürs Telefon des Kunden. */
.k-b-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--a4); align-items: start; margin-top: var(--a4); }
.k-b-wege .k-code { margin: var(--a1) 0 var(--a2); }
.k-b-wege .k-a-qr { width: 148px; margin: var(--a1) 0 0; }
.k-zurueck { margin: 0 0 var(--a2); font-size: .875rem; }
/* Was nicht rückgängig zu machen ist, sieht auch so aus — aber erst hier unten, nicht die ganze Seite. */
.k-gefahr { border-color: var(--fehler); }
.k-gefahr h2 { color: var(--fehler); }
.k-gefahr-knopf { background: var(--fehler); }
.k-gefahr-knopf:hover { filter: brightness(1.08); }

/* Eine Zustandsseite im Arbeitsbereich: Der Inhalt bleibt schmal wie auf der Karte, sonst zieht sich
   ein Satz über 900 Pixel und liest sich wie ein Aushang. */
.k-zustand-schmal { max-width: 520px; }
.k-zustand-schmal .k-zeichen { margin-top: 0; }

/* ─── Das Mitbringsel am Ende der Einrichtung ───────────────────────────────
   Wer fertig ist, nimmt seinen Link mit. Die Ordnung ist die ganze Sache: **ein** Radius (--r-20 für die
   Karten, --r-12 für alles darin), zwei gleich breite Karten nebeneinander, in jeder eine Überschrift,
   der Inhalt, ein Fuß. Vorher standen hier ein gerahmter QR-Kasten, ein Code-Block und zwei Knöpfe in
   drei verschiedenen Rundungen — und zwei davon (10px, 16px) gibt es im Regelwerk gar nicht. */
.k-a-einbau { margin-top: var(--a5); padding-top: var(--a4); border-top: 1px solid var(--linie); }
.k-a-link { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--a2); margin: var(--a2) 0 var(--a4); }
.k-a-link code { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; padding: 0 16px;
  border: 1px solid var(--linie); border-radius: var(--r-12); background: var(--weiss);
  font-family: var(--mono); font-size: .875rem; overflow-wrap: anywhere; }
.k-a-link .k-knopf { flex: none; }

/* **Einer der Wege, nicht beide.** Nebeneinander waren es zwei Karten; sobald der Block schmaler wurde
   als 268 px mal zwei — und im Fenster ist er das immer —, standen sie untereinander und die Summe ihrer
   Höhen ergab einen Scrollbalken. Dabei braucht kaum jemand beide gleichzeitig. Also: ein Segment oben,
   darunter das gewählte Fach. Statt der Summe zählt jetzt das Höhere von beiden.

   Beide Fächer liegen in **derselben Grid-Zelle** und das ungewählte wird mit visibility versteckt, nicht
   mit display:none. So steht die Höhe von Anfang an fest und der Kasten springt beim Umschalten nicht —
   ein springender Kasten ist genau das, wonach es sich wieder nach Scrollen anfühlt. */
.k-a-waehler { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
/* Die Schiene ist so breit, wie ihre zwei Wörter es verlangen, und sitzt in der Mitte. Über die volle
   Breite gezogen wird aus einer Wahl eine Werkzeugleiste. */
.k-a-waehler .k-a-wahl { grid-row: 1; width: max-content; max-width: 100%; margin: 0 auto var(--a3); }
/* Die Radios liegen vor dem Segment statt in den Labels — nur so erreichen die Geschwister-Selektoren
   weiter unten auch die Fächer. Sichtbar versteckt, aber nicht display:none: sonst wären sie mit der
   Tastatur nicht erreichbar, und das Konto muss sich ohne Maus bedienen lassen. */
.k-a-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
/* Das Label umschließt hier kein Eingabefeld, also erbt es auch nicht dessen Zeigefinger. */
.k-a-wahl label { cursor: pointer; }
#weg-qr:checked ~ .k-a-wahl label[for="weg-qr"] span,
#weg-code:checked ~ .k-a-wahl label[for="weg-code"] span {
  background: var(--weiss); color: var(--nacht); font-weight: 500; box-shadow: var(--schatten-1); }
/* Der Fokus-Ring sitzt am Segment, nicht am versteckten Radio — sonst zeigt die Tastaturbedienung auf
   einen Punkt, an dem nichts zu sehen ist. */
#weg-qr:focus-visible ~ .k-a-wahl label[for="weg-qr"] span,
#weg-code:focus-visible ~ .k-a-wahl label[for="weg-code"] span {
  outline: 2px solid var(--gruen-tief); outline-offset: -2px; }
.k-a-fach { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; padding: var(--a3);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-20);
  visibility: hidden; }
#weg-qr:checked ~ .k-a-fach-qr, #weg-code:checked ~ .k-a-fach-code { visibility: visible; }
.k-a-fach > .k-klein { margin: var(--a2) 0 0; }
/* **QR und Erklärung nebeneinander.** Untereinander stand der Code allein in einer Fläche, die dreimal
   so breit war wie er, und darunter eine Zeile am linken Rand — viel Leere und zwei Achsen. Nebeneinander
   füllen sie den Kasten, sind eine Sache statt zwei und sparen dabei eine Etage Höhe. Am Telefon ist
   dafür kein Platz, dort rutscht der Text wieder unter den Code. */
.k-a-fach-qr { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--a4); text-align: left; }
.k-a-fach-qr > .k-klein { margin: 0; max-width: 22ch; }
/* 140 px: groß genug, um es vom Bildschirm abzufotografieren, klein genug, dass der Abschluss auf eine
   Fläche passt. Gedruckt wird ohnehin das SVG, und das kennt keine Pixel. */
.k-a-qr { width: 140px; flex: none; aspect-ratio: 1; }
.k-a-qr svg { width: 100%; height: 100%; display: block; }
@media (max-width: 520px) { .k-a-fach-qr { flex-direction: column; text-align: center; gap: var(--a3); } }
/* Zwei kurze Wörter passen auch am Telefon nebeneinander. Die allgemeine Regel stellt Segmente unter
   560 px untereinander — richtig für »privat und beruflich«, hier aber zerfällt die Schiene dabei in
   zwei Kästen, von denen einer keiner mehr ist. */
@media (max-width: 560px) {
  .k-a-waehler .k-a-wahl { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
}
.k-a-code { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--r-12); font-size: .75rem; line-height: 1.6; }
.k-a-fach-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); margin-top: var(--a3); }
.k-a-fach-fuss .k-klein { margin: 0; }

/* Schutz einrichten */
.k-app { margin: var(--a2) 0; }
.k-inline { display: inline; }
/* min-height: 0 machte aus einem Textknopf mitten im Satz eine 26-px-Tippfläche. Im Satz ist das richtig,
   alleinstehend nicht — deshalb gilt es nur, wenn wirklich Text danebensteht. Am Handy zählt jeder Knopf. */
.k-inline .k-textknopf { min-height: 0; padding: 4px 0; }
@media (max-width: 560px) { .k-inline .k-textknopf { min-height: 44px; } }
.k-schritte li b { display: block; margin-bottom: var(--a1); }

/* ─── Bauteile aus dem geteilten Regelwerk ───────────────────
   Die Website zeigt eine Vorschau des Kontos (`frag-anna-website/bausteine/konto.mjs`), und die ist der
   Maßstab: Farbkreise statt Hex-Feld, Segmentwahl statt Klappliste, Schalter statt Häkchen, eine Liste
   statt einer Tabelle. Die Formen kommen aus `/assets/gestaltung/konto.css` und werden hier **nicht
   nachgebaut**, sondern benutzt. Geändert wird nur, was ein Schaubild nicht braucht und eine Anwendung
   schon: Tippflächen ab 44 px und Schrift in Arbeitsgröße.

   **Seit 20.09.2026 sind die Maße Variablen des Regelwerks** — auf unsere Meldung hin. Die vier Werte
   unten ersetzen, was wir vorher Regel für Regel überschrieben haben; Form, Farbe, Schatten und
   Übergänge kommen unverändert von dort und ändern sich mit. Der Unterschied ist kein Versehen: Bei der
   Website ist die Ansicht eine Abbildung im Verkaufstext, hier eine Oberfläche, in der jemand eine
   Stunde arbeitet. */
:root {
  --konto-leiste: 64px;
  --konto-nav: 232px;
  --konto-schrift: 1rem;
  --konto-ziel: 44px;
}
.konto-abschnitt { font-size: .75rem; margin: var(--a5) 0 var(--a2); }
.konto-abschnitt > span { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.konto-abschnitt:first-child { margin-top: 0; }
.konto-ruhig { font-size: .875rem; }
.konto-liste li { min-height: 56px; padding: 10px 16px; }
.konto-liste b { font-size: .9375rem; }
.konto-liste small { font-size: .8125rem; }
.konto-status { font-size: .8125rem; }
.konto-status--warnung i { background: var(--warn); }
/* In der Tabelle darf die Lage umbrechen: »Formular nimmt nichts an: Pflichtlinks fehlen« passt sonst
   in keine Spalte, und abgeschnitten wäre der Satz genau dort unbrauchbar, wo er gebraucht wird. */
.k-tabelle .k-lage { white-space: normal; align-items: flex-start; line-height: 1.4; }
.k-tabelle .k-lage i { margin-top: 5px; flex: none; }
.konto-status--aus i { background: var(--schiefer); }
/* Farbkreis im Schaubild: optisch 32 px wie im Regelwerk, Tippfläche 44 px durch einen unsichtbaren Rand.
   Nur für echte Knöpfe: In unserer Farbwahl sind die Kreise Spans in einem 44-px-Label und bekommen ihre
   Maße von dort, sonst ragen sie über ihr Label hinaus. */
button.konto-farbe { width: 44px; height: 44px; padding: 6px; background-clip: content-box; }
button.konto-farbe.an { box-shadow: inset 0 0 0 6px var(--weiss), inset 0 0 0 8px var(--nacht); }
.konto-farben { gap: 4px; align-items: center; }
.konto-wahl button { min-height: 44px; padding: 0 16px; font-size: .875rem; }
.konto-schalter { min-height: 48px; }
.konto-schalter > span:last-child { font-size: .9375rem; }
/* Eine Erläuterung unter der Beschriftung braucht eine eigene Zeile, sonst klebt sie am Satz davor. */
.konto-schalter > span:last-child > small { display: block; margin-top: 2px; color: var(--schiefer); font-size: .8125rem; line-height: 1.45; }
.konto-eingabe input { min-height: 44px; font-size: .9375rem; }
.konto-feld > span:first-child { font-size: .8125rem; }
.konto-vorschau b { font-size: 1.375rem; }
.konto-leistungen button { min-height: 52px; font-size: .9375rem; padding: 10px 14px; }
.konto-leistungen small { font-size: .75rem; }
.konto-felder { gap: var(--a2); }
/* Eigene Farbe: derselbe Kreis, nur mit dem Farbwähler des Systems dahinter. */
.k-eigene-farbe { position: relative; width: 44px; height: 44px; flex: none; }
.k-eigene-farbe input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.k-eigene-farbe span {
  display: flex; align-items: center; justify-content: center; position: absolute; inset: 6px;
  border-radius: 50%; border: 1.5px dashed var(--nacht-20); color: var(--schiefer); pointer-events: none;
  font-size: 1.125rem; line-height: 1;
}
.k-eigene-farbe span::before { content: "+"; }
.k-eigene-farbe.an span { border-style: solid; border-color: var(--nacht); color: var(--nacht); }
.k-eigene-farbe input:focus-visible + span { outline: 2px solid var(--nacht); outline-offset: 3px; }

/* ─── Info-Box ───────────────────────────────────────────────
   Erklärt, wo etwas Erklärung braucht, ohne den Bildschirm mit Fließtext zu füllen. Zeigt sich beim
   Überfahren **und** beim Tabben: Eine Erklärung, die nur die Maus findet, gibt es für die Hälfte der
   Menschen nicht. Ohne JavaScript ebenfalls sichtbar, weil alles an :hover und :focus-visible hängt. */
/* Der Ring ist 20 px groß, der Knopf darum 44 px: Ein Fragezeichen in Ringgröße trifft am Handy niemand
   mit dem Daumen. Die negativen Ränder sorgen dafür, dass die größere Fläche keine Zeile aufbläht. */
.k-info { position: relative; display: inline-flex; vertical-align: middle; margin: -12px 0 -12px -6px; }
.k-info > button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--schiefer);
  font-size: .6875rem; font-weight: 700; line-height: 1; letter-spacing: 0; cursor: help;
  transition: color .18s var(--kurve);
}
.k-info > button::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 1.5px solid var(--nacht-20); border-radius: 50%;
  transition: border-color .18s var(--kurve), background-color .18s var(--kurve);
}
.k-info > button:hover { color: var(--gruen-tief); }
.k-info > button:hover::before { border-color: var(--gruen-tief); background: var(--gruen-zart); }
.k-info > button:focus-visible { outline: none; }
.k-info > button:focus-visible::before { outline: 3px solid var(--gruen-hell); outline-offset: 2px; border-color: var(--gruen-tief); }
.k-info > span {
  position: absolute; bottom: calc(100% - 4px); left: 4px; z-index: 30;
  width: max-content; max-width: min(320px, calc(100vw - 48px)); padding: 12px 14px;
  background: var(--nacht); color: var(--auf-dunkel-2); border-radius: var(--r-12); box-shadow: var(--schatten-2);
  font-size: .8125rem; line-height: 1.5; font-weight: 400; text-align: left; letter-spacing: 0; text-transform: none;
  /* »display: none«, nicht nur durchsichtig: Ein unsichtbares Element zählt sonst weiter zur Seitenbreite
     und erzeugt am Handy einen waagerechten Balken, den niemand erklären kann. */
  display: none;
}
.k-info > span::after {
  content: ""; position: absolute; top: 100%; left: 12px;
  border: 6px solid transparent; border-top-color: var(--nacht);
}
.k-info > span b { color: var(--weiss); }
.k-info:hover > span, .k-info > button:focus-visible + span { display: block; transform: translateY(0); }
/* Am Handy ist links kein Platz mehr: dann von rechts einhängen. */
@media (max-width: 599px) { .k-info > span { left: auto; right: 0; }
  .k-info > span::after { left: auto; right: 12px; } }
/* Segmentwahl als Formularfeld: dieselbe Form wie im Regelwerk, aber mit Radios darin, damit sie
   auch ohne JavaScript wählt und absendet. */
/* Dieselbe Kante wie die Felder darüber: Eine Auswahl, die sich nach ihrem Text richtet, endet mitten im
   Nichts, während das Feld darüber bis zum Kartenrand geht.

   **Alle Felder exakt gleich breit.** Vorher stand hier `flex: 1 1 auto`: Damit ist die Grundbreite die
   Textbreite, und der übrige Platz wird nur verteilt — »privat und beruflich« bekam 446 px, »nur privat«
   390 px. Der Unterschied wandert mit der Auswahl, weil das gewählte Feld fett wird, und sieht aus wie
   ein Wackeln. Ein Raster mit `1fr`-Spalten kennt die Textlänge nicht und teilt gleichmäßig.

   Unter 560 px stehen die Felder untereinander: Vier Segmente auf einer Handy-Breite ergäben je 85 px,
   und »Systemschrift« passt da nicht hinein. Gleich breit bleiben sie auch dann. */
.k-wahl { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 100%; margin-top: 6px; }
@media (max-width: 560px) { .k-wahl { grid-auto-flow: row; grid-auto-columns: auto; } }
.k-wahl label > span { width: 100%; justify-content: center; }
.k-wahl label { position: relative; display: inline-flex; min-width: 0; }
.k-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.k-wahl span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-8);
  color: var(--schiefer); font-size: .875rem; text-align: center; line-height: 1.25;
  transition: background-color .18s var(--kurve), color .18s var(--kurve);
}
.k-wahl label:hover span { color: var(--nacht); }
.k-wahl input:checked + span { background: var(--weiss); color: var(--nacht); font-weight: 500; box-shadow: var(--schatten-1); }
.k-wahl input:focus-visible + span { outline: 3px solid var(--gruen-hell); outline-offset: -1px; }
.k-wahl input:disabled + span { opacity: .5; }
.k-wahl input:active + span { transform: translateY(1px); }
/* Farbwahl als Radios: ohne JavaScript wählbar, mit JavaScript färbt sie die Vorschau sofort. */
.k-farbwahl { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* Nur die Kreise selbst ansprechen (»> label >«): Ein loser Selektor auf span trifft sonst auch den
   Block »eigene Farbe« daneben und reißt ihn aus der Zeile. */
.k-farbwahl > label:not(.k-eigene-wahl) { position: relative; display: inline-flex; width: 44px; height: 44px; flex: none; }
.k-farbwahl > label:not(.k-eigene-wahl) > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.k-farbwahl > label:not(.k-eigene-wahl) > span {
  display: block; position: absolute; inset: 6px; width: auto; height: auto; padding: 0;
  border-radius: 50%; background: var(--f); pointer-events: none;
  transition: box-shadow .15s var(--kurve), transform .15s var(--kurve);
}
.k-farbwahl > label:not(.k-eigene-wahl):hover > span { transform: scale(1.08); }
.k-farbwahl > label:not(.k-eigene-wahl) > input:checked + span { box-shadow: 0 0 0 2px var(--weiss), 0 0 0 4px var(--nacht); }
.k-farbwahl > label:not(.k-eigene-wahl) > input:focus-visible + span { outline: 2px solid var(--nacht); outline-offset: 4px; }
/* Die Farbwerte der fünf Vorschläge stehen **nur** im Regelwerk (`.konto-farbe.k1` bis `.k5`) und in
   `Aussehen::FARBVORSCHLAEGE`. Hier werden sie benutzt, nicht wiederholt: zwei Listen von Farben laufen
   sonst auseinander, und ein style-Attribut ginge wegen »style-src 'self'« ohnehin nicht. */
.k-eigene-wahl { display: inline-flex; margin-left: 2px; position: relative; min-width: 0; }
.k-eigene-wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.k-eigene-wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--schiefer); }
.k-eigene-wahl input:checked + span { color: var(--nacht); font-weight: 500; }
.k-eigene-wahl input:focus-visible + span { outline: 3px solid var(--gruen-hell); outline-offset: 2px; border-radius: var(--r-8); }
/* Einstellungsformular: Abschnitte statt einer Feldwüste. */
.k-einstellungen { display: flex; flex-direction: column; gap: 0; }
.k-einstellungen .k-eingabe + .k-eingabe { margin-top: var(--a1); }
.k-einstellungen .k-label { margin-top: var(--a2); }
.k-einstellungen .konto-schalter { margin-top: var(--a4); }
.k-vorschau-spalte { position: sticky; top: var(--a4); display: flex; flex-direction: column; }
.k-vorschau-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); }
.k-vorschau-kopf .konto-abschnitt { margin: 0 0 var(--a2); }
/* »noch nicht gespeichert«: Die Vorschau ist der Datenbank voraus, und das darf man sehen. */
.k-vorschau-stand {
  padding: 3px 10px; border-radius: 999px; background: var(--warn-zart); color: var(--warn);
  font-size: .75rem; font-weight: 500; white-space: nowrap;
}
.k-vorschau-spalte .k-vorschau { position: static; height: clamp(520px, 62vh, 760px); }
.k-vorschau-leer { display: flex; align-items: center; justify-content: center; padding: var(--a5); background: var(--papier); }
.k-vorschau-leer .k-leerzustand { padding: 0; }
.k-mini-hinweis { margin-top: var(--a2); }
@media (max-width: 1000px) { .k-vorschau-spalte { position: static; } }
/* Raster-Kinder dürfen schrumpfen. Ohne »min-width: 0« hält ein Grid-Item seine Inhaltsbreite, und ein
   langer Beschriftungstext schiebt am Handy die ganze Seite auf. */
.k-gruppe > *, .k-preisform > *, .k-einstellungen > *, .k-felder > * { min-width: 0; }
/* Die Aktionsleiste steht unter den Gruppen, nicht in einer davon: Sie gilt für die ganze Seite. */
.k-tun-leiste { margin-top: var(--a4); }
.k-einstellungen .k-gruppe:last-of-type { margin-bottom: 0; }
/* Leistungen: links die Liste, rechts die gewählte. Die Liste ist schmaler als die Arbeitsfläche. */
.k-leistungen-raster { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.k-leistungsliste { position: sticky; top: var(--a4); }
/* Jede Zeile gleich hoch: Name oben, Vermerk darunter. Nebeneinander wuchs die Zeile mit der Länge des
   Namens — aus zehn Leistungen wurde eine Treppe. */
.k-leistungsliste a {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 62px; padding: 10px 14px; background: var(--weiss); color: var(--nacht);
  font-size: .9375rem; font-weight: 500; text-decoration: none; box-shadow: inset 3px 0 0 transparent;
  transition: background-color .15s var(--kurve), box-shadow .15s var(--kurve);
}
.k-leistungsliste-text { display: grid; gap: 1px; min-width: 0; }
.k-leistungsliste-text b { font-weight: 500; overflow-wrap: anywhere; }
.k-leistungsliste a:hover { background: var(--papier); color: var(--nacht); }
.k-leistungsliste a.an { background: var(--gruen-zart); box-shadow: inset 3px 0 0 var(--gruen-tief); }
.k-leistungsliste small { color: var(--schiefer); font-size: .75rem; font-weight: 400; }
.k-aus-vermerk { color: var(--schiefer); font-size: .75rem; font-weight: 400; }
/* Gruppenkopf der Leistungsliste (L280): Titel und Anzahl, kein Link. */
.k-leistungsliste-kopf { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 6px; background: var(--weiss);
  color: var(--schiefer); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.k-leistungsliste-kopf span { font-variant-numeric: tabular-nums; }
/* L396a Neu bei ANNA: Die Farbe --neu (gestaltung/tokens.css) heißt nur »neu« und steht nirgends sonst im Konto (Gestaltungsprüfung).
   Die Bausteine o-neu-flaeche, o-etikett--neu und o-neu-punkt kommen aus oberflaeche.css; hier nur, wie sie mit den Konto-Teilen zusammengehen:
   Gruppe und Hinweis sind hier weiß oder papierfarben, die neue Fläche muss das überschreiben. */
.k-gruppe.o-neu-flaeche, .k-hinweis.o-neu-flaeche { background: var(--neu-zart); border-left: 3px solid var(--neu); }
.k-leistungsgruppe { list-style: none; margin: 0; padding: 0; }
.k-leistungsgruppe + .k-leistungsgruppe { border-top: 1px solid var(--linie); }
.k-leistungsgruppe.o-neu-flaeche { border-radius: 0; }
.k-leistungsgruppe.o-neu-flaeche .k-leistungsliste-kopf, .k-leistungsgruppe.o-neu-flaeche a:not(.an):not(:hover) { background: transparent; }
.k-leistungsliste-text .o-etikett { height: 20px; padding: 0 8px; margin-left: 4px; font-size: .6875rem; }
.k-nav-neu { margin-left: auto; }
.k-neu-liste { list-style: none; margin: var(--a3) 0 var(--a4); padding: 0; display: grid; gap: var(--a3); }
.k-neu-liste li { display: flex; align-items: baseline; gap: 10px; line-height: 1.55; }
.k-neu-liste .o-etikett { flex: none; }
.k-preisvorschau { margin: 0 0 var(--a4); }
/* Was an einem Preismodell auffällt, bevor es jemand veröffentlicht. Zwei Stufen: »fehler« widerspricht
   sich selbst (Mindestbetrag über dem Höchstbetrag), »warnung« rechnet zwar, aber vermutlich anders als
   gemeint. Beides steht neben der Vorschau, weil man dort hinsieht. */
/* Die drei Phasen nebeneinander: Welche gerade läuft, sieht man an der Fläche, nicht an einem Häkchen.
   Jede trägt ihre eigene Adresse — es wird umgeschaltet, nicht getauscht (Änderung 025). */
/* Die drei Dokumente als Karten. Ein Büro, das einer Aufsichtsbehörde etwas schicken muss, sucht hier
   nach Dokumenten — also stehen hier Dokumente und nicht ein Absatz mit zwei Knöpfen darunter. */
.k-akten { display: grid; gap: 12px; margin: 0 0 var(--a4); }
@media (min-width: 880px) { .k-akten { grid-template-columns: repeat(3, 1fr); } }
/* **Symmetrie heißt: gleiche Zeilen, nicht nur gleiche Höhe.** Die Karten waren gleich hoch — die
   Prüfung war grün —, aber innen lief alles auseinander: Ein zweizeiliger Titel schob Fassung, Text und
   Knöpfe nach unten, und die Knöpfe standen auf drei verschiedenen Linien. Also bekommt jede Zeile ihren
   festen Platz: Titel zwei Zeilen hoch, Fassung eine, Text füllt den Rest, Knöpfe sitzen unten. */
.k-akte { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 18px;
  border: 1px solid var(--linie); border-radius: var(--r-12); background: var(--flaeche); }
.k-akte-kopf { display: block; }
.k-akte-kopf h3 { margin: 0; font-size: .98rem; line-height: 1.35;
  min-height: calc(2 * 1.35em); display: flex; align-items: flex-start; }
.k-akte-fassung { display: block; font-size: .76rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.k-akte-text { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-2); }
.k-akte-wege { display: flex; gap: 8px; flex-wrap: wrap; align-self: end; }

/* ─── Rechtsdokumente: AVV, TOM-Anlage, Vollmachtsvorlage ─────────────────────────────────────────
   Die erste Fassung war eine Bleiwüste: richtige Inhalte, aber nichts, woran das Auge sich festhält
   (Jonathan am 23.09.2026: »das ist nicht schön, geht schöner!«). Ein Rechtsdokument liest niemand von
   oben nach unten — man sucht eine Stelle. Also ein ruhiger Kopf, ein Verzeichnis zum Springen,
   nummerierte Abschnitte, und Zahlen als Marken statt im Fließtext. */
.k-doc { max-width: 58rem; }
.k-doc-kopf { padding: 0 0 var(--a5); }
.k-doc-kopf h1 { margin-bottom: 4px; }
.k-doc-unter { margin: 0 0 12px; color: var(--text-2); font-size: 1.02rem; line-height: 1.5; }
.k-doc-fassung { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--a4); }
.k-doc-stand { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: var(--gruen-zart); color: var(--gruen-druck); font-size: .8rem; font-weight: 600; }
.k-doc-stand-leise { background: var(--flaeche-2); color: var(--text-2); font-weight: 500; }
.k-doc-wege { margin: 0; }

/* Das Verzeichnis: eine Spalte auf dem Handy, zwei ab Tablet. Jede Zeile trägt ihre Nummer. */
.k-doc-verzeichnis { display: grid; gap: 2px; margin: 0 0 var(--a5); padding: 10px;
  border: 1px solid var(--linie); border-radius: var(--r-20); background: var(--flaeche); }
@media (min-width: 720px) { .k-doc-verzeichnis { grid-template-columns: 1fr 1fr; } }
.k-doc-sprung { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 12px; border-radius: var(--r-12);
  color: var(--text); text-decoration: none; font-size: .92rem; transition: background .15s; }
.k-doc-sprung:hover, .k-doc-sprung:focus-visible { background: var(--flaeche-2); }
.k-doc-sprung i { flex: none; min-width: 2.1rem; color: var(--text-2); font-style: normal;
  font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 600; }

.k-doc-teil { scroll-margin-top: 16px; }
@media (min-width: 761px) { :target { scroll-margin-top: var(--a4); } }
/* Technisches im Konto (Ampel-Karten, Wächter) bricht um: Ein Anfrage-Entwurf mit langen Absätzen oder eine lange Beleg-Adresse
   schob die Wächter-Seite sonst auf 3072 px (L246, Gestaltungsprüfung »Überlauf 1280«). */
.k-inhalt pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.k-doc-teil h2 { display: flex; align-items: baseline; gap: 12px; }
.k-doc-nr { flex: none; min-width: 2.4rem; color: var(--gruen-druck); font-style: normal; font-size: .82rem;
  font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.k-doc-absatz { margin: 0 0 12px; line-height: 1.62; color: var(--text); }
.k-doc-absatz:last-child { margin-bottom: 0; }
.k-doc-abs { color: var(--text-2); font-style: normal; font-variant-numeric: tabular-nums; }

/* Abläufe: nummerierte Schritte mit großer Ziffer. Für die 72 Stunden, die man der Reihe nach liest. */
.k-doc-schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 14px; }
/* Drei Kinder, zwei Spalten: Die Ziffer steht links, Titel und Text teilen sich die rechte Spalte.
   Ohne die ausdrückliche Zuweisung landet der Titel in der Ziffernspalte und bricht Buchstabe für
   Buchstabe um — so gesehen am 23.09.2026, bevor jemand es lesen musste. */
.k-doc-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: 12px; row-gap: 2px; align-items: start; }
.k-doc-schritte li::before { content: counter(schritt); grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--gruen-zart); color: var(--gruen-druck); font-size: .86rem; font-weight: 700; }
.k-doc-schritte > li > b { grid-column: 2; grid-row: 1; align-self: center; min-height: 2.2rem; display: flex; align-items: center; }
.k-doc-schritte > li > span { grid-column: 2; grid-row: 2; line-height: 1.6; color: var(--text-2); }

/* Die vier Gruppen aus Art. 32 als Raster statt als Absatzkette. */
.k-doc-raster { display: grid; gap: 14px; }
@media (min-width: 760px) { .k-doc-raster { grid-template-columns: 1fr 1fr; } }
.k-doc-gruppe { padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--r-12); background: var(--flaeche-2); }
.k-doc-gruppe h3 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-druck); }
.k-doc-punkt { margin-bottom: 10px; }
.k-doc-punkt:last-child { margin-bottom: 0; }
.k-doc-punkt b { display: block; font-size: .92rem; }
.k-doc-punkt span { display: block; font-size: .88rem; line-height: 1.55; color: var(--text-2); }

.k-doc-tabelle td:first-child { max-width: 18rem; }
.k-doc-frist { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--flaeche-2);
  font-size: .8rem; font-weight: 600; white-space: nowrap; }

/* Die Vollmachtsvorlage im Wortlaut: wie ein Dokument, nicht wie eine Seite. */
.k-doc-doktitel { margin: 0 0 2px; font-size: 1.1rem; font-weight: 700; }
.k-doc-dokunter { margin: 0 0 16px; color: var(--text-2); }
/* **Platzhalter sollen auffallen.** In der ersten Fassung waren sie grauer Text auf grauem Grund und im
   Fließtext kaum zu finden (Jonathan am 23.09.2026: »die Platzhalter besser markieren und sichtbarer
   hervorheben«). Sie sind das Einzige, was eine Vorlage von einem fertigen Dokument unterscheidet — also
   tragen sie jetzt Farbe, eine gestrichelte Kante und geschweifte Klammern, wie im Quelltext. */
.k-doc-platz { display: inline-block; margin: 0 2px; padding: 1px 7px; border-radius: var(--r-8);
  background: var(--warn-zart); border: 1px dashed var(--warn); color: #7A5214;
  font-style: normal; font-size: .88em; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.k-doc-platz::before { content: "{"; opacity: .55; margin-right: 1px; }
.k-doc-platz::after { content: "}"; opacity: .55; margin-left: 1px; }
@media print {
  .k-doc-wege, .k-doc-verzeichnis, .k-zurueck { display: none; }
  .k-doc-teil { break-inside: avoid; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
  .k-doc { max-width: none; }
}
.k-doc-fuss { margin: var(--a5) 0 0; padding-top: var(--a4); border-top: 1px solid var(--linie);
  color: var(--text-2); font-size: .88rem; line-height: 1.55; }

/* »empfohlen« an einer Wahlkarte: eine Marke, keine Warnung. Sie sagt, was wir raten, und nimmt nichts weg. */
.k-empfohlen { flex: none; align-self: flex-start; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--gruen-zart); color: var(--gruen-druck); font-size: .72rem; font-style: normal; font-weight: 600; }
.k-wahlkarte b { display: inline; }
.k-phasen { list-style: none; margin: 0 0 var(--a4); padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .k-phasen { grid-template-columns: repeat(3, 1fr); } }
.k-phase { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-12);
  border: 1px solid var(--linie); background: var(--flaeche); }
.k-phase-an { border-color: var(--gruen); background: var(--gruen-zart); }
.k-phase-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.k-phase-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.k-phase-form .k-eingabe { flex: 1 1 160px; min-width: 0; }
.k-preispruefung { list-style: none; margin: 0 0 var(--a4); padding: 0; display: grid; gap: 8px; }
.k-preispruefung li { padding: 10px 14px; border-radius: var(--r-12); font-size: .9rem; line-height: 1.45; }
.k-pruef-fehler { background: var(--fehler-zart); border-left: 3px solid var(--fehler); }
.k-pruef-warnung { background: var(--warn-zart); border-left: 3px solid var(--warn); }
/* »hinweis« ist keine Warnung, sondern eine Auskunft: Kein hinterlegter Preis ist der Regelfall, nicht
   ein Mangel. Grau statt gelb — wer alles gelb macht, bekommt bald nichts mehr gelesen. */
.k-pruef-hinweis { background: var(--flaeche-2); border-left: 3px solid var(--linie); color: var(--text-2); }
.k-preisfelder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.k-staffelzeile { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; margin-bottom: var(--a2); }
@media (max-width: 1000px) { .k-leistungen-raster { grid-template-columns: minmax(0, 1fr); } .k-leistungsliste { position: static; } }
/* Empfänger: eine ruhige Zeile je Adresse, wie in der Konto-Vorschau der Website. */
.k-empfaenger { padding: var(--a3) 0; border-bottom: 1px solid var(--linie); }
.k-empfaenger:last-of-type { border-bottom: 0; }
.k-empfaenger-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); flex-wrap: wrap; }
.k-empfaenger-wer { min-width: 0; }
.k-empfaenger-wer b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.k-empfaenger-wer small { display: block; color: var(--schiefer); font-size: .8125rem; }
.k-empfaenger .k-aufklapp { margin-top: var(--a2); }
.k-empfaenger .k-aufklapp + .k-aufklapp { margin-top: 0; border-top: 0; }
/* Leerer Zustand: Statt eines grauen Satzes sagt die Seite, was jetzt zu tun ist. */
/* **Der Leerzustand ist die erste Ansicht jedes neuen Nutzers.** Ein ruhiges Zeichen, ein Satz, ein Weg —
   statt eines grauen Absatzes, der nur feststellt, dass nichts da ist (NACHTRAG-GESTALTUNG-APP.md). */
.k-leerzustand { padding: var(--a6) 0 var(--a5); text-align: center; }
.k-leer-zeichen { display: block; width: 44px; height: 44px; margin: 0 auto var(--a3);
  background: var(--flaeche-2); border-radius: var(--r-12); }
.k-leer-zeichen::before { content: ""; display: block; width: 100%; height: 100%;
  background: var(--text-2); -webkit-mask: var(--sym) center / 22px 22px no-repeat; mask: var(--sym) center / 22px 22px no-repeat; }
.k-leerzustand .k-gruppe-text { max-width: 34rem; margin-left: auto; margin-right: auto; }
.k-leer-weg { margin: var(--a4) 0 0; }
.k-leerzustand h2 { margin: 0 0 var(--a1); font-size: 1.0625rem; }
.k-leerzustand .k-gruppe-text { margin: 0 auto; max-width: 48ch; }
.k-filter .k-rechts-weg { margin-left: auto; }
.k-summe { margin-top: var(--a3); }
/* Woher eine Angabe stammt: Status-Punkt, Quelle, Fassung. Ruhig, weil es selten jemanden interessiert,
   und nachlesbar, weil es im Zweifel sehr wohl jemanden interessiert. */
.k-quelle { display: flex; align-items: flex-start; gap: var(--a3); padding: 14px 16px; background: var(--papier); border-radius: var(--r-12); }
.k-quelle b { display: block; font-weight: 500; font-size: .9375rem; }
.k-quelle small { display: block; color: var(--schiefer); font-size: .8125rem; }
.k-quelle .konto-status { margin-top: 3px; }

/* ─── Einführungs-Assistent ──────────────────────────────────
   Der Fortschritt ist gemessen, nicht gezählt: Die Balkenbreite kommt aus einer Klasse, weil ein
   style-Attribut unter »style-src 'self'« nicht durchkäme. */
.k-fortschritt { height: 8px; border-radius: 999px; background: var(--linie); overflow: hidden; margin: var(--a2) 0 var(--a4); }
.k-fortschritt-balken { display: block; height: 100%; border-radius: 999px; background: var(--gruen-tief); transition: width .45s var(--kurve); }
.k-b0 { width: 0; } .k-b10 { width: 10%; } .k-b20 { width: 20%; } .k-b30 { width: 30%; } .k-b40 { width: 40%; }
.k-b50 { width: 50%; } .k-b60 { width: 60%; } .k-b70 { width: 70%; } .k-b80 { width: 80%; } .k-b90 { width: 90%; } .k-b100 { width: 100%; }
.k-fortschritt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a3); }
.k-fortschritt-zahl { font-size: .875rem; font-weight: 500; color: var(--schiefer); }

.k-schritte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a1); counter-reset: schritt; }
.k-schritt {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: var(--a3);
  padding: var(--a3); border-radius: var(--r-12); border: 1px solid transparent;
  transition: background-color .18s var(--kurve), border-color .18s var(--kurve);
}
.k-schritt-dran { background: var(--gruen-zart); border-color: var(--gruen-hell); }
.k-schritt-zeichen {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--weiss); border: 1.5px solid var(--linie); color: var(--schiefer);
  font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.k-schritt-zeichen svg { width: 18px; height: 18px; }
.k-schritt-dran .k-schritt-zeichen { border-color: var(--gruen-tief); color: var(--gruen-tief); }
.k-schritt-fertig .k-schritt-zeichen { background: var(--gruen-tief); border-color: var(--gruen-tief); color: var(--weiss); }
.k-schritt-text { min-width: 0; }
.k-schritt-text b { display: block; font-weight: 500; font-size: .9375rem; }
.k-schritt-text small { display: block; margin-top: 2px; color: var(--schiefer); font-size: .8125rem; line-height: 1.5; }
.k-schritt-fertig .k-schritt-text b { color: var(--schiefer); }
.k-schritt-fertig .k-schritt-text small { display: none; }   /* erledigt braucht keine Erklärung mehr */
.k-schritt-tun { display: flex; align-items: center; min-height: 32px; }
.k-schritt-tun .k-knopf { margin-top: 0; }
.k-einrichtung-weg { margin-top: var(--a4); }

/* Die Karte auf der Übersicht: dasselbe in kurz. */
.k-einrichtung-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a4); }
.k-einrichtung-zahl {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  min-width: 76px; padding: 10px 14px; border-radius: var(--r-12); background: var(--gruen-zart);
  color: var(--gruen-tief); font-size: 1.5rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
/* »von 6« ist klein und steht auf zartem Grün: --gruen-tief erreicht dort nur 4.47:1, also eine Spur
   dunkler. Knapp daneben ist auch daneben. */
.k-einrichtung-zahl small { font-size: .6875rem; font-weight: 500; margin-top: 2px; color: var(--gruen-druck); }
.k-einrichtung-karte .k-fortschritt { margin-top: var(--a4); }
@media (max-width: 599px) {
  .k-schritt { grid-template-columns: 32px minmax(0, 1fr); }
  .k-schritt-tun { grid-column: 2; }
}

/* ─── Einführungs-Assistent: eine Aufgabe auf dem Bildschirm ──
   Kein Raster, keine Leiste, keine Kennzahlen. Wer einrichtet, soll einrichten. */
.k-assistent { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--papier); }

/* ─── Der Assistent als Fenster über dem Konto ───────────────────────────────
   Als eigene Seite riss der Assistent den Arbeitsplatz weg: Man war plötzlich woanders und musste sich
   zurückfinden. Als Fenster bleibt das Konto sichtbar dahinter — deshalb hat es Ecken, einen Schatten und
   Luft ringsum, statt randlos zu werden. */
.k-dlg { width: min(720px, calc(100vw - 2 * var(--a4))); max-height: min(86vh, 900px); padding: 0; overflow: auto;
  border: 0; border-radius: var(--r-20); background: var(--weiss); box-shadow: 0 32px 80px -24px rgba(9, 24, 43, .45), 0 2px 8px rgba(9, 24, 43, .08); }
.k-dlg::backdrop { background: rgba(9, 24, 43, .42); backdrop-filter: blur(3px); }
.k-dlg .k-assistent { min-height: 0; background: var(--weiss); border-radius: inherit; }
/* Im Fenster ist der Kopf schon der Rahmen: Marke und Fortschritt genügen, die eigene Kopfzeile wäre eine
   zweite Zeile mit derselben Aussage. */
.k-dlg .k-a-kopf { padding: var(--a3) var(--a5) var(--a2); background: transparent; border-bottom: 0; }
.k-dlg .k-a-buehne { padding: var(--a4) var(--a5) var(--a5); max-width: none; }
.k-dlg .k-a-punkte { padding-bottom: var(--a4); }
.k-dlg-zu { position: sticky; top: 0; float: right; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px;
  margin: 10px 10px -40px 0; border: 0; border-radius: 50%; background: transparent; color: var(--schiefer); cursor: pointer; }
.k-dlg-zu:hover { background: var(--papier); color: var(--nacht); }
.k-dlg-zu svg { width: 19px; height: 19px; }
.k-dlg-laedt { cursor: progress; }
/* Die Rückfrage vor dem Verlassen: klein, mittig, drei klare Wege. */
.k-dlg-frage { width: min(460px, calc(100vw - 2 * var(--a4))); padding: var(--a5); text-align: center; }
.k-dlg-frage h2 { font-size: 1.25rem; }
.k-dlg-frage p { margin-top: var(--a2); color: var(--schiefer); }
.k-dlg-frage .k-aktionen { justify-content: center; margin-top: var(--a4); }
.k-dlg-frage .k-textknopf { margin-top: var(--a3); }
.k-dlg-laedt .k-assistent { opacity: .55; transition: opacity .15s var(--kurve); }
@media (max-width: 640px) {
  /* Am Telefon ist ein Fenster mit Rand nur ein kleinerer Bildschirm: unten andocken, volle Breite. */
  .k-dlg { width: 100vw; max-width: none; max-height: 92dvh; margin: auto auto 0; border-radius: var(--r-20) var(--r-20) 0 0; }
  .k-dlg .k-a-kopf { padding: var(--a3) var(--a3) var(--a2); }
  .k-dlg .k-a-buehne { padding: var(--a3) var(--a3) var(--a4); }
}
@media (prefers-reduced-motion: no-preference) {
  .k-dlg[open] { animation: k-dlg-auf .22s var(--kurve) both; }
  @keyframes k-dlg-auf { from { opacity: 0; transform: translateY(12px) scale(.985); } }
}
.k-a-kopf { display: flex; align-items: center; gap: var(--a4); padding: var(--a2) clamp(16px, 4vw, 40px); background: var(--weiss); border-bottom: 1px solid var(--linie); }
.k-a-kopf .k-marke { border-right: 0; }
.k-a-stand { margin-left: auto; font-size: .875rem; font-weight: 500; color: var(--schiefer); font-variant-numeric: tabular-nums; }
.k-a-weg { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--schiefer); text-decoration: none; }
.k-a-weg:hover { color: var(--gruen-tief); text-decoration: underline; }
.k-a-balken { margin: 0; height: 4px; border-radius: 0; background: var(--linie); }
.k-a-buehne { width: 100%; max-width: 560px; margin: 0 auto; padding: clamp(28px, 6vh, 64px) clamp(16px, 4vw, 40px) var(--a6); }
.k-a-etikett { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gruen-tief); margin-bottom: var(--a1); }
.k-a-buehne h1 { font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.125rem); }
.k-a-form { margin-top: var(--a5); }
.k-a-tun { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a4); margin-top: var(--a5); }
.k-a-tun .k-knopf { margin-top: 0; }
/* Die Punkte unten sagen, wie weit es noch ist, ohne eine Zahl zu betonen. */
.k-a-punkte { display: flex; justify-content: center; gap: 8px; padding: 0 0 var(--a6); margin-top: auto; }
.k-a-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--nacht-20); }
.k-a-punkt-fertig { background: var(--gruen-tief); }
.k-a-punkt-dran { background: var(--gruen-tief); transform: scale(1.45); }
.k-a-leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2px var(--a4); }
.k-a-leistungen .konto-schalter > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.k-a-leistungen small { color: var(--schiefer); font-size: .75rem; }
.k-a-fertig { text-align: center; }
.k-a-fertig .k-zeichen { margin: 0 auto var(--a4); }
.k-a-fertig .k-aktionen { justify-content: center; }
.k-a-fertig .k-lead { margin-inline: auto; max-width: 44ch; }
.k-a-weglegen { margin-top: var(--a6); }

/* ─── Der schlanke Abschluss ────────────────────────────────────────────────
   Nimmt das Formular Anfragen an, steht der Link im Mittelpunkt und alles andere muss mit ihm auf eine
   Fläche passen. Gespart wird an Etagen, nicht an Inhalt: Das Häkchen rückt in die Überschrift, der
   Einbau-Block verliert seine Trennlinie, die Schritte klappen auf. */
/* **Eine Achse.** Alles im Abschluss sitzt auf derselben Mitte: Zeichen, Überschrift, Satz, Link,
   Segmentwahl, Kasten, Knopf, Fuß. Vorher war die Überschrift mittig, das Etikett darunter linksbündig
   und die Knöpfe wieder mittig — drei Achsen auf einem Bildschirm, und genau das liest sich als
   Unordnung. Einzige Ausnahme ist der Einbau-Code: Quelltext beginnt links, immer. */
.k-a-fertig .k-zeichen-mittel { width: 36px; height: 36px; margin: 0 auto var(--a2); }
.k-a-fertig .k-zeichen-mittel svg { width: 19px; height: 19px; }
.k-a-schlank .k-lead { margin-bottom: 0; }
/* Der Block steht hier nicht unter einem Abschluss, sondern ist der Abschluss — die Trennlinie würde
   ihn von der Überschrift trennen, zu der er gehört. */
.k-a-schlank .k-a-einbau { margin-top: var(--a4); padding-top: 0; border-top: 0; text-align: center; }
/* Gleiche Kante für Feld, Schiene und Kasten: Was übereinander steht, endet übereinander. */
.k-a-schlank .k-a-link { justify-content: center; }
.k-a-schlank .k-a-fach-code { text-align: left; }
.k-a-schlank .k-a-tat { justify-content: center; margin-top: var(--a3); }
/* **Der Fuß ist eine Zeile.** Ausgang und Hinweis, durch einen Punkt getrennt; das Weglegen darunter,
   klein und ohne eigenen Abstandsblock. Drei Nebensachen in drei Etagen bekamen vorher zusammen mehr
   Platz als der Link, um den es geht. */
.k-a-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin-top: var(--a4); color: var(--schiefer); }
.k-a-fuss-punkt { color: var(--nacht-20); }
/* Die Tippfläche bleibt bei 44 px — sie kostet die Zeile ein paar Pixel Höhe, aber ein Ausgang, den
   man am Telefon dreimal treffen muss, ist kein Ausgang. `line-height` statt Zeilenhöhe: Der Satz
   daneben soll dadurch nicht auseinandergezogen werden. */
.k-a-fuss a { min-height: 44px; display: inline-flex; align-items: center; line-height: 1.5; font-weight: 500; }
/* Zwei Dinge, nicht drei: der Ausgang und ein ruhiger Satz. Das Weglegen steht beim Aufklapp-Bereich,
   zu dem es gehört. */
.k-a-schlank .k-a-offen .k-a-weglegen { margin-top: var(--a3); text-align: center; }
.k-a-schlank .k-a-offen .k-textknopf { font-size: .8125rem; color: var(--schiefer); }
.k-a-schlank .k-a-offen { margin-top: var(--a4); padding-top: var(--a3); text-align: left; }
.k-a-schlank .k-a-offen summary { justify-content: center; }
/* Der Fuß steht jetzt unter dem Aufklapp-Bereich, nicht mehr darin — dann braucht er dort auch keine
   zweite Trennlinie. */
.k-a-schlank .k-a-offen + .k-a-fuss { margin-top: var(--a3); }
.k-a-schlank > .k-a-weglegen { margin-top: var(--a2); }
.k-a-schlank .k-a-weglegen .k-textknopf { font-size: .8125rem; color: var(--schiefer); }
/* Startbildschirm: erst zeigen, was kommt, dann anfangen. */
/* »Was danach anders ist«: kein Warnkasten, sondern ein ruhiger Hinweis mit Pfeil — er sagt eine Folge an,
   keine Bedingung (AUFTRAG-KONTO-VERSTAENDLICHKEIT §3.2). */
/* Eine Wahl zwischen wenigen Wegen, jeder mit einem Satz dazu. Karten statt Radiozeilen: Wer zwischen
   drei Möglichkeiten entscheidet, liest erst, was sie bedeuten, und tippt dann. */
.k-wahlkarten { display: grid; gap: var(--a2); margin-top: var(--a4); }
.k-wahlkarte { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--a3); align-items: start;
  padding: 14px 16px; border: 1.5px solid var(--linie); border-radius: var(--r-12); cursor: pointer; background: var(--weiss); }
.k-wahlkarte:hover { border-color: var(--nacht-20); }
.k-wahlkarte:has(input:checked) { border-color: var(--gruen-tief); background: var(--gruen-zart); }
.k-wahlkarte input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gruen-tief); }
.k-wahlkarte b { display: block; font-weight: 600; }
.k-wahlkarte small { display: block; margin-top: 2px; color: var(--schiefer); font-size: .875rem; line-height: 1.5; }
.k-lang-feld { min-height: 180px; font-size: .9375rem; line-height: 1.6; resize: vertical; }

.k-a-ergebnis { display: flex; gap: 10px; margin-top: var(--a3); padding: 12px 14px; border-radius: var(--r-12);
  background: var(--gruen-zart); color: var(--gruen-druck); font-size: .9375rem; line-height: 1.5; }
.k-a-ergebnis-sym { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: currentColor;
  -webkit-mask: var(--sym-pfeil) center / 13px no-repeat; mask: var(--sym-pfeil) center / 13px no-repeat; }
:root { --sym-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13m-5-6 6 6-6 6'/%3E%3C/svg%3E"); }

.k-a-vorschau-liste { list-style: none; margin: var(--a5) 0 0; padding: 0; display: grid; gap: var(--a1); }
.k-a-vorschau-liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; gap: var(--a3); padding: 10px 0; }
.k-a-vorschau-liste li + li { border-top: 1px solid var(--linie); }
.k-a-nr { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--papier); color: var(--schiefer); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.k-a-vorschau-liste b { display: block; font-weight: 500; font-size: .9375rem; }
.k-a-vorschau-liste small { display: block; color: var(--schiefer); font-size: .8125rem; line-height: 1.5; }
.k-a-zurueck { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: var(--schiefer); font-size: .875rem; text-decoration: none; }
.k-a-zurueck:hover { color: var(--nacht); text-decoration: underline; }
.k-a-gruppensatz { margin-bottom: var(--a2); }
/* Farbe mit Bild daneben: eine Farbe ohne Vorschau ist ein Hex-Wert. */
.k-a-farbe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 210px); gap: var(--a5); align-items: start; }
.k-a-farbe .konto-mini-modul { position: sticky; top: var(--a4); }
@media (max-width: 719px) { .k-a-farbe { grid-template-columns: minmax(0, 1fr); } .k-a-farbe .konto-mini-modul { position: static; max-width: 280px; } }
.k-a-vl-fertig .k-a-nr { background: var(--gruen-tief); color: var(--weiss); }
.k-a-vl-fertig .k-a-nr svg { width: 14px; height: 14px; }
.k-a-vl-fertig b { color: var(--schiefer); font-weight: 400; }
/* Die Ziffer ist klein: --gruen-tief erreicht auf zartem Grün nur 4.47:1, also eine Spur dunkler. */
.k-a-vl-dran .k-a-nr { background: var(--gruen-zart); color: var(--gruen-druck); }
.k-a-vl-dran b { color: var(--nacht); }

/* Am Ende sind die fünf Schritte Wege zurück, keine Aufzählung: ganze Zeile anklickbar, Pfeil rechts. */
.k-a-nochmal { margin-top: var(--a6); }
.k-a-vl-wahl { margin-top: var(--a2); }
/* Wichtig: Das »li« ist sonst selbst ein Raster mit einer 28-px-Spalte — der Link landete darin und jedes
   Wort bekam eine eigene Zeile. Hier trägt der Link das Raster, das »li« nur noch die Trennlinie. */
.k-a-vl-wahl li { display: block; padding: 0; }
.k-a-vl-wahl li a { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: var(--a3);
  margin-inline: calc(-1 * var(--a2)); padding: 10px var(--a2); border-radius: var(--r-12); text-decoration: none; color: inherit; }
.k-a-vl-wahl li a::after { content: ""; width: 7px; height: 7px; border: solid var(--nacht-20); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.k-a-vl-wahl li a:hover { background: var(--papier); }
.k-a-vl-wahl li a:hover::after { border-color: var(--gruen-tief); }
.k-a-vl-wahl li a:hover b { color: var(--nacht); }
/* Warten auf die Bestätigung: Der Punkt pulsiert leise, damit sichtbar ist, dass etwas läuft. */
.k-a-warten { margin: var(--a5) 0; }
.k-a-puls { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--schiefer); }
.k-a-puls-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--gruen-tief); animation: k-puls 1.6s var(--kurve) infinite; }
@keyframes k-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .k-a-puls-punkt { animation: none; } }
/* Schritte mit Vorschau brauchen Platz. Der Text bleibt trotzdem in Lesebreite. */
.k-a-buehne-breit { max-width: 880px; }
/* **Der Abschluss braucht mehr Breite als ein Formularschritt und weniger als eine Tabelle.** Auf
   Lesebreite (560 px) bricht der Link mitten im Wort um und QR und Text drängeln sich; im Fenster hat er
   720 px und sieht richtig aus. Als Seite bekommt er dieselbe Weite.
   Dazu `margin-block: auto`: Der Assistent ist eine Spalte über die volle Höhe, und ein kurzer Abschluss
   klebte oben an einem Bildschirm, der zu zwei Dritteln leer blieb. In der Mitte steht er wie ein
   Ergebnis und nicht wie ein Rest. */
.k-a-buehne-abschluss { max-width: 720px; margin-block: auto; }
.k-a-buehne-breit > h1, .k-a-buehne-breit > .k-lead, .k-a-buehne-breit > .k-a-etikett { max-width: 30ch; }
.k-a-buehne-breit .k-a-farbe { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--a6); }
/* Markenblick: Farben von der eigenen Website holen. */
.k-a-screener { padding: var(--a3) 0 var(--a4); }
.k-a-screener-zeile { gap: var(--a2); align-items: flex-end; margin-bottom: var(--a2); }
.k-a-screener-zeile .k-knopf { margin-top: 0; }
.k-a-gefunden { padding: var(--a3); margin-bottom: var(--a3); background: var(--papier); border-radius: var(--r-12); }
.k-a-gefunden .k-farbwahl { margin-top: var(--a1); }
.k-gefundene-farbe { display: block; position: absolute; inset: 6px; border-radius: 50%; background: var(--f); pointer-events: none; }
.k-a-gefunden input:checked + .k-gefundene-farbe { box-shadow: 0 0 0 2px var(--weiss), 0 0 0 4px var(--nacht); }
/* Gemerkte Geräte: ruhige Liste, wie überall im Konto. */
.k-geraete { list-style: none; margin: var(--a2) 0; padding: 0; }
.k-geraete li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.k-geraete li:last-child { border-bottom: 0; }
.k-geraete b { display: block; font-weight: 500; font-size: .9375rem; }
.k-geraete small { display: block; color: var(--schiefer); font-size: .8125rem; }

/* »Uns schreiben«: ein Feld in der Seitenleiste statt eines mailto-Links (23.09.2026).
   Ein Aufklapper, kein Fenster — so steht das Feld auch ohne JavaScript da, und der Weg zum
   Rückruf bleibt daneben. Jonathan: »nicht diese hilfe-at-Geschichte, direkt ein Feld«. */
.k-melden > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  list-style: none; color: var(--gruen-tief); }
.k-melden > summary::-webkit-details-marker { display: none; }
.k-melden > summary:hover { color: var(--gruen-druck); }
.k-melden-form { margin-top: var(--a2); }
.k-melden-form textarea.k-eingabe { width: 100%; min-height: 96px; resize: vertical; }
.k-melden-form .k-label { margin-bottom: var(--a1); }
.k-melden-fuss { margin: var(--a2) 0 0; font-size: .75rem; line-height: 1.5; color: var(--schiefer); }
.k-melden-form .k-aktionen { margin-top: var(--a2); }

/* ── Betreiber-Bereich (L155) ─────────────────────────────────────────────────────────────── */
.k-nav-gruppe { padding: 14px 12px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--schiefer); }
.k-nav-gruppe:first-child { padding-top: 2px; }
@media (max-width: 760px) {
  /* Am Telefon läuft die Leiste quer; eine Überschrift wird dort ein ruhiger Trenner. */
  .k-nav-gruppe { padding: 0 6px 0 12px; align-self: center; font-size: .65rem; white-space: nowrap; border-left: 1px solid var(--linie); }
  .k-nav-gruppe:first-child { border-left: 0; padding-left: 4px; }
}
.k-strecke { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.k-strecke li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-12); }
.k-strecke .k-wann { font-size: .8rem; color: var(--schiefer); }
.k-strecke b { display: block; }
.k-strecke small { color: var(--schiefer); }
.k-marke-stand { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; background: var(--papier); color: var(--schiefer); }
/* Eine Farbe je Zustand, im ganzen Bereich gleich (Blaupause). */
.k-marke-stand.gesendet { background: var(--gruen-zart); color: var(--gruen-druck); }
.k-marke-stand.faellig { background: #FFF4E5; color: #8A4B00; }
.k-marke-stand.geplant { background: #EAF1FB; color: #1F4E8C; }
.k-marke-stand.entfaellt { background: var(--papier); color: var(--schiefer); }
.k-marke-stand.gesperrt { background: #FDECEA; color: #9B1C12; }
@media (max-width: 560px) { .k-strecke li { grid-template-columns: minmax(0, 1fr) auto; } .k-strecke .k-wann { grid-column: 1 / -1; } }
.k-lead-karten { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.k-lead-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-12); padding: 14px 16px; }
.k-lead-karte > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; }
.k-lead-karte > summary::-webkit-details-marker { display: none; }
.k-lead-karte > summary b { overflow-wrap: anywhere; }
.k-lead-karte > summary small { color: var(--schiefer); }
.k-lead-karte[open] { box-shadow: 0 10px 30px -18px rgba(14,39,68,.35); }
.k-lead-karte dl { margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; font-size: .875rem; }
.k-lead-karte dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.k-lead-karte dt { color: var(--schiefer); }
.k-lead-karte dd { margin: 0; overflow-wrap: anywhere; }
.k-stufe { margin: var(--a5, 28px) 0 var(--a3, 12px); display: flex; align-items: baseline; gap: 10px; }
.k-stufe h2 { margin: 0; font-size: 1.05rem; }
.k-stufe span { color: var(--schiefer); font-size: .875rem; }
.k-mail-vorschau { width: 100%; height: 640px; border: 1px solid var(--linie); border-radius: var(--r-12); background: #fff; }
/* »Vorschau« ist ein Link im Kleingedruckten, am Telefon aber eine Tippfläche: 44 px hoch, ohne die Zeile aufzublähen. */
.k-strecke small a, .k-tabelle td a { display: inline-block; padding: 14px 4px; margin: -14px 0; }
a.k-lead-karte { display: grid; gap: 4px; color: inherit; text-decoration: none; }
a.k-lead-karte small { color: var(--schiefer); }
a.k-lead-karte:hover { border-color: var(--gruen-druck); }

/* Kunden finden (L157): Suche vorn und breit, »Wo es hakt« als ruhige Liste, eigene Büros zugeklappt. */
.k-kunden-filter { flex-wrap: wrap; }
.k-kunden-filter .k-suche { flex: 2 1 240px; }
.k-kunden-filter .k-suche input { width: 100%; }
.k-haken-liste { list-style: none; margin: var(--a3) 0 0; padding: 0; display: grid; gap: 8px; }
.k-haken-liste li { display: grid; gap: 2px; padding: 12px 16px; background: var(--warn-zart); border-left: 3px solid var(--warn); border-radius: var(--r-8); }
.k-haken-liste a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--nacht); text-decoration: none; }
.k-haken-liste a:hover b { text-decoration: underline; }
.k-haken-liste span { color: var(--schiefer); font-size: .875rem; }
.k-eigene > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; }
.k-eigene > summary::-webkit-details-marker { display: none; }
.k-eigene > summary h2 { margin: 0; }
.k-eigene > summary h2::before { content: "▸ "; color: var(--schiefer); }
.k-eigene[open] > summary h2::before { content: "▾ "; }
.k-eigene > summary span { color: var(--schiefer); font-size: .875rem; }
.k-lage + small { display: block; color: var(--schiefer); margin-top: 4px; }

/* Mail bearbeiten (L164): links der Text, rechts die Mail, wie sie hinausgeht. Unter 900 px untereinander. */
.k-mail-text { min-height: 320px; line-height: 1.5; font-family: inherit; }
.k-mail-vorschau { width: 100%; height: 720px; border: 1px solid var(--linie); border-radius: var(--r-12); background: var(--weiss); }
.k-zurueck a { display: inline-block; padding: 12px 0; }
@media (max-width: 900px) {
  .k-mail-vorschau { height: 560px; }
}

.k-form.k-inline { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: end; }
.k-form.k-inline .k-label { margin: 0; }
.k-marke-stand.faellig { background: var(--gold-hell, #FBEFD2); color: var(--nacht); }

/* Aufklapper in Karten (Verlauf, Anleitung): die Zeile ist eine Tippfläche, also mindestens 44 px hoch. */
details.k-klein > summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--a2); cursor: pointer; }



/* ─── Bausteine der Website-Werft auf den Betreiber-Seiten (GESETZ-APP-OBERFLAECHE.md, L193) ────────────
   Die Bausteine (Präfix o-) kommen aus gestaltung/oberflaeche.css und werden dort gepflegt; hier steht nur,
   was die App um sie herum braucht. Vorher stand hier ein eigener Block k-einst-* mit denselben Bausteinen;
   der ist weg (§4.7: lokale Sonderwege nur, bis der Baustein an der Quelle steht). */
.k-inhalt > .o-seite { max-width: 1160px; margin: 0; padding: 0; background: transparent; }
.k-inhalt > .o-seite > .o-kopf > h1::after { content: none; }   /* §3: H1 ohne Punkt */
.o-seite > .o-hinweis { margin-bottom: var(--a6); }
.o-seite > .o-klein { margin-top: var(--a6); }
.o-seite .o-hinweis .k-info { margin: -12px 0 -12px 0; }
/* Mit JavaScript speichert das Umlegen selbst; der Knopf erscheint nur, wenn eine Zahl geändert und noch nicht übernommen ist. */
html.js [data-uebernehmen] { display: none; }
html.js [data-geaendert] [data-uebernehmen] { display: inline-flex; }
.o-zeile > .o-feld { min-width: 0; }
.o-zeile-tun > form { display: contents; }
.o-seite details > summary.o-textknopf { list-style: none; }
.o-seite details > summary.o-textknopf::-webkit-details-marker { display: none; }
.o-seite details > .o-klein { margin-top: var(--a2); }

/* ─── Redaktionsplan mit den o-Bausteinen (L195, GESETZ-APP-OBERFLAECHE.md §6.2) ──────────────────────────
   Chips, Beitragskarten, Kalender und leere Zustände kommen aus oberflaeche.css; hier nur die Formulare in den
   Karten; die LinkedIn-Vorschau ist seit dem 26.09.2026 der Baustein o-vorschau der Werft. */
.o-hauptspalte { min-width: 0; display: grid; gap: var(--a4); align-content: start; }
a.o-chip, a.o-tag { text-decoration: none; }
.o-felder { display: grid; gap: var(--a3); }
.o-abschnitt { display: grid; gap: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--linie); }
.o-zeile--block { grid-template-columns: minmax(0, 1fr); }
.o-wahlen { display: grid; gap: 4px; margin-top: var(--a2); }
.o-wahl { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 6px 0; cursor: pointer; }
.o-wahl input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gruen-tief); flex: none; }
.o-beitrag-fuss form, .o-zeile-tun form, .o-hinweis form { display: contents; }
.o-beitrag-koerper .o-hinweis { flex-wrap: wrap; }
.o-beitrag-koerper .o-hinweis > p { flex: 1 1 240px; }
.o-beitrag-koerper .o-textfeld, .o-felder .o-textfeld { width: 100%; }
.o-sprung { margin-top: var(--a2); }

/* ─── Überblick, Kunden, Mails mit den o-Bausteinen (L197) ────────────────────────────────────────────────
   Kennzahlen als Reihe leiser Karten (§5 kartenSymmetrie: .o-kennzahlen), Filter als Feldraster, Angaben als Liste. */
.o-kachel { display: flex; flex-direction: column; gap: 4px; padding: var(--a4) var(--a5); }
.o-kachel .o-klein { margin-top: auto; }
.o-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--a3); align-items: end; border-bottom: 1px solid var(--linie); }
.o-filter-suche { grid-column: 1 / -1; }
.o-filter-knoepfe { grid-column: 1 / -1; }
/* L422: konto.js versteckt den Knopf eines Sofort-Formulars mit hidden; .o-knopf setzt display selbst und schlug das Attribut (Baustein-Vorschlag an Uschi). */
.o-knopf[hidden] { display: none; }
.o-angaben { display: grid; gap: 6px; margin: var(--a2) 0 0; }
.o-angaben > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 8px; font-size: .9375rem; }
.o-angaben dt { color: var(--schiefer); }
.o-angaben dd { margin: 0; overflow-wrap: anywhere; }
.o-kunden td { vertical-align: top; }
.o-kunden td > .o-klein { display: block; }
.o-kunden .o-etikett { margin: 2px 2px 2px 0; }
.o-eigene > summary { display: flex; align-items: center; }
.o-eigene[open] > summary { border-bottom: 1px solid var(--linie); }
@media (max-width: 599px) { .o-kunden td > .o-klein { grid-column: 2; } }

/* ─── Martin (L198, GESETZ §6.3): Ideen-Zeile mit aufklappbarem »Beitrag daraus machen«, Lesespalte, Datumsfeld ── */
.o-zeile-voll { grid-column: 1 / -1; }
.o-zeile-voll > summary.o-knopf { width: fit-content; }
/* FB103 (»Beitrag daraus machen«): seit 02.10.2026 in der Stammfassung (oberflaeche.css .o-mehr > summary:not(.o-knopf)), keine Ausnahme mehr hier. */
/* Kurz für dich (KONZEPT-HR-CENTER §10.3a): der Block oben in der Karte, ruhig abgesetzt. */
.k-kurz { border-left: 3px solid var(--gruen-hell); padding: 4px 0 4px var(--a3); margin-bottom: var(--a4); }
.k-kurz > * + * { margin-top: var(--a2); }
.o-zeile-voll[open] > summary.o-knopf { margin-bottom: var(--a3); }
.o-zeile-voll > .o-beitrag-text, .o-zeile-voll > .o-beitrag-fuss, .o-zeile-voll > details, .o-zeile-voll > p, .o-zeile-voll > div { margin-top: var(--a3); }
.o-lesespalte { max-width: 62ch; }
.o-datum-feld { width: 14ch; }
.o-gruppe-kopf > .o-klein { white-space: nowrap; }
.o-kunden { table-layout: fixed; width: 100%; }
@media (max-width: 599px) { .o-kunden th { width: auto; } }
.o-kunden .o-zahl-spalte, .o-kunden .o-etikett { white-space: normal; }   /* in der festen Tabelle bricht auch die Zahl und das Etikett um, statt in die Nachbarzelle zu laufen */
.o-kunden .o-etikett { height: auto; min-height: 24px; padding: 2px 10px; line-height: 1.3; }
/* `.o-seite a { color: --gruen-tief }` aus oberflaeche.css schlägt die Knopf- und Chip-Farben, sobald ein Knopf ein Link ist
/* Kundentabelle mit fünf Spalten (Werft-Nachtrag §2.12): Wortbruch nur bei Daten ohne Leerzeichen, nie im Lesetext. */
.o-kennzahlen { margin-bottom: var(--a7); }
.o-kunden th, .o-kunden td { white-space: normal; }
.o-kunden th:nth-child(1) { width: 34%; } .o-kunden th:nth-child(2) { width: 16%; } .o-kunden th:nth-child(3) { width: 20%; } .o-kunden th:nth-child(4) { width: 12%; }
.o-kunden .o-mails { margin-top: 4px; }
/* Datei-Knopf (Martin, Fotos): der Knopf ist das Label, das Wählen lädt hoch; ohne JavaScript erscheint »Hochladen« daneben. */
.o-zeile-tun label.o-knopf:focus-within { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.o-vorschau--mail .k-mail-vorschau { margin-top: 6px; }
.o-nebeneinander > .o-vorschau--lang { position: static; }   /* eine Vorschau, die länger als das Fenster ist, klebt nicht (Werft §2.17) */

/* ─── Einrichten wie das Bild auf der Website (Jonathan, 26.09.2026; L208) ─────────────────────────────────────────
   Die volle Größe steht seit d4949f31 an der Quelle (`konto-schritte--voll`, `konto-fortschritt--voll`,
   `konto-fortschritt-0…100`). Hier bleibt nur die Seitenfläche und die Kopfzeile. */
.k-einrichten { max-width: 820px; }
.k-einrichten-karte { padding: clamp(20px, 4vw, 40px); }
.k-einrichten-karte .o-kopf { margin-bottom: 0; }
.k-einrichten .o-kopf h1 { margin-bottom: var(--a4); }
.k-einrichten .konto-fortschritt-text { font-size: 1rem; margin-bottom: 12px; }
.k-einrichten .konto-fortschritt-text span { margin-left: 10px; }
.k-einrichten .k-einrichten-fuss { margin-top: 20px; }
.k-unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (max-width: 480px) {
  .k-einrichten .konto-fortschritt-text span { display: block; margin: 2px 0 0; }
}

/* **Etwas klappt nicht?** (L286): klein im Fuß, Tippfläche 44 px; der Dialog als natives <dialog>, am Handy ein Blatt von unten. */
.k-feedback { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: .8125rem; color: var(--schiefer); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.feedback-dialog { width: calc(100% - 32px); max-width: 460px; padding: var(--a5); border: 1px solid var(--linie); border-radius: var(--r-12); background: var(--weiss); color: var(--nacht); box-shadow: 0 24px 60px -24px rgba(14,39,68,.45); }
.feedback-dialog::backdrop { background: rgba(14,39,68,.38); }
.feedback-form h2 { margin: 0 0 var(--a2); font-size: 1.15rem; }
.feedback-form label { display: block; margin: var(--a4) 0 var(--a2); font-weight: 600; }
.feedback-form textarea { min-height: 110px; resize: vertical; }
.feedback-hinweis { margin: var(--a3) 0 0; font-size: .875rem; line-height: 1.5; color: var(--schiefer); }
.feedback-hinweis a { color: var(--gruen-tief); }
.feedback-antwort { min-height: 1.4em; margin: var(--a3) 0 0; font-weight: 600; }
.feedback-knoepfe { display: flex; gap: var(--a3); justify-content: flex-end; }
.feedback-knoepfe .k-knopf { margin-top: var(--a3); }
@media (max-width: 600px) {
  .feedback-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--r-12) var(--r-12) 0 0; }
  .feedback-knoepfe .k-knopf { flex: 1; }
}


/* ─── Glossar auf »Rechtsquellen« (Jonathan 30.09.2026: »das muss auch hübscher werden«): je Thema eine Karte mit Symbol, der Begriff fett in
   Nachtblau, darunter der Satz in Schiefer, großzügig; ab 900 px zwei Spalten. Das ⓘ im Konto zeigt denselben Satz und springt hierher. ── */
.k-begriffe-suche { max-width: 420px; }
.k-begriffe-gruppen { display: grid; gap: var(--a5); }
@media (min-width: 900px) { .k-begriffe-gruppen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.k-begriffe-gruppe { border: 1px solid var(--linie); border-radius: var(--r-12); padding: var(--a5); background: var(--weiss); }
.k-begriffe-gruppe[hidden] { display: none; }
.k-begriffe-gruppe h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--a4); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-tief); }
.k-begriffe-gruppe h3 svg { width: 22px; height: 22px; flex: none; color: var(--gruen); }
.k-begriffe-gruppe dl { margin: 0; display: grid; gap: var(--a5); }
.k-begriff[hidden] { display: none; }
.k-begriff dt { font-size: 1.0625rem; font-weight: 700; color: var(--nacht); }
.k-begriff dd { margin: 6px 0 0; color: var(--schiefer); line-height: 1.6; max-width: 62ch; }
.k-begriff-beispiel { display: block; margin-top: 6px; font-size: .8125rem; color: var(--schiefer); }
.k-begriff-beispiel::before { content: ""; display: inline-block; width: 8px; height: 1.5px; margin: 0 8px 3px 0; background: var(--gruen); }
.k-begriff:target { outline: 2px solid var(--gruen); outline-offset: 8px; border-radius: var(--r-8); }
/* Das ⓘ: im Text klein, als Tippfläche 44 px (die Ränder gleichen die Größe im Zeilenfluss aus). */
.k-begriff-info { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px -12px -12px -8px; vertical-align: middle; color: var(--gruen-tief); text-decoration: none; font-size: 1rem; }
.k-begriff-info:hover, .k-begriff-info:focus-visible { color: var(--gruen-druck); }

/* Seitenteilung (§3a, 30.09.2026): höchstens 50 Einträge je Seite, »Neuere · Seite X von Y · Ältere«. */
.k-blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a4); margin-top: var(--a4); color: var(--schiefer); font-size: .875rem; }

/* Layoutsystem des Kontos (§3a Nr. 9, Uschi/Jonathan 30.09.2026: »da stimmen die Abstände noch nicht«). EINE Inhaltsspalte: Die Hülle des
   Regelwerks (o-inhalt, 840 bzw. 1160 px, mittig) liegt im Konto in k-inhalt und bringt dort weder eigene Breite noch eigene Mitte mit.
   So steht jede Seite an derselben Kante neben der Leiste; gemessen im Eindampf-Test (kante, kanten). */
.k-inhalt .o-inhalt, .k-inhalt .o-inhalt.o-inhalt--breit { max-width: none; margin: 0; padding: 0; }
/* Seitenkopf: Titel → Einleitung 12 px, Einleitung → Reiter 24 px, Kopf → Inhalt 32 px (Tokens a3, a5, a6). Reiter stehen IM Kopf. */
.k-inhalt .o-kopf { gap: var(--a3); margin-bottom: var(--a6); }
.k-inhalt .o-kopf > .k-reiter { margin-top: var(--a3); }
/* Filter sind ein eigener Baustein, keine Reiter (Regel filter_reiter): eine Zeile mit Namen, leichtere, kleinere Knöpfe. */
.k-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin-bottom: var(--a5); }
.k-filter-name { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--schiefer); margin-right: var(--a1); }
.k-filter .o-chip { min-height: 36px; padding: 0 12px; font-size: .875rem; border-radius: var(--r-8); background: transparent; }
.k-filter .o-chip[aria-current], .k-filter .o-chip[aria-pressed="true"] { background: var(--papier-druck); color: var(--nacht); border-color: var(--nacht-30); }
@media (max-width: 599px) { .k-filter .o-chip { min-height: 44px; } }
/* Kalender (Uschi/Jonathan 30.09.2026): feste Zellenhöhe, damit keine Zeile springt; heute nur durch Rahmen und Farbe (o-tag--heute). */
.k-inhalt .o-kalender-tage .o-tag { height: 52px; min-height: 52px; }
.k-legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); }
.k-legende .o-tag-punkte { display: inline-flex; height: auto; }
/* Wächter (Uschi/Jonathan 30.09.2026): Bereichskarten kompakt, Titel links und Zustand rechts in EINER Zeile, dichter untereinander. */
.k-wacht .o-gruppe + .o-gruppe { margin-top: var(--a3); }
.k-wacht .o-beitrag > summary { display: flex; align-items: center; gap: var(--a3); padding-block: var(--a3); }
.k-wacht .o-beitrag > summary .o-beitrag-titel { order: 1; flex: 1; min-width: 0; }
.k-wacht .o-beitrag > summary .o-beitrag-meta { order: 2; flex-wrap: nowrap; }
.k-wacht .o-beitrag > summary .o-beitrag-pfeil { order: 3; flex: none; }
/* Wächter-Kette (Uschi/Jonathan 01.10.2026): Das Etikett steht allein rechts, in jeder Zeile an derselben Stelle, auch am Handy (die Zeile bleibt
   zweispaltig, statt die Bedienung unter den Satz zu schieben); die eine Aktion steht unter dem Satz. Gemessen: Eindampf wacht_achse. */
.k-wacht .k-wzeile { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.k-wacht .k-wzeile > .o-zeile-tun { justify-content: flex-end; flex-wrap: nowrap; }
/* Handgriff-Liste (06.10.2026): lange Gesetzesnamen (»Baugebührenordnung«) liefen bei 360 px unter das Etikett; wie beim Protokoll umbrechen, mit Silbentrennung. */
.k-wacht .k-wzeile > .o-zeile-was { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.k-jetzt-dran { margin: 12px 0 0; }
/* Kennzahlen unter einem Wächter-Bereich (Uschi 06.10.2026): o-heute ist als Nebenspalte gebaut (ab 1200 px untereinander in .o-mit-neben, 280 px).
   Unter dem Inhalt eines Bereichs steht er in voller Breite, dort gehören die Zahlen ab 600 px nebeneinander. Gemessen: Eindampf wacht_kennzahlen. */
@media (min-width: 600px) { .k-bereich .o-beitrag-koerper > .o-heute { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
@container (max-width: 560px) {
  .k-wacht .k-wzeile { grid-template-columns: minmax(0, 1fr) auto; }
  .k-wacht .k-wzeile > .o-zeile-tun { justify-content: flex-end; }
  /* Handgriff-Liste (Foto 360 px, 06.10.2026): neben dem Etikett blieben 150 px für Satz und Ablage. Nur der Titel steht neben dem Etikett (Achse bleibt,
     wacht_achse); Satz, Ablage und »Mehr« laufen darunter über die volle Breite, mit demselben Abstand wie bisher in der Spalte. */
  #handgriffe .k-wzeile { row-gap: 4px; }
  #handgriffe .k-wzeile > .o-zeile-was { display: contents; }
  #handgriffe .k-wzeile > .o-zeile-was > * { grid-column: 1 / -1; }
  #handgriffe .k-wzeile > .o-zeile-was > b { grid-column: 1; grid-row: 1; min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
  #handgriffe .k-wzeile > .o-zeile-tun { grid-column: 2; grid-row: 1; align-self: start; }
}
.k-hauptaktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); margin-top: var(--a3); }
/* Knopf-Regression (Jonathan 02.10.2026, »hässlich«): oberflaeche.css gibt Links in Zeilentexten »padding: 12px 0; margin: -12px 0« für eine große
   Tippfläche (.o-zeile-was a hat Spezifität 0,1,1 und schlägt .o-knopf mit 0,1,0). Ein Link-Knopf dort verlor damit seinen Innenabstand und rückte
   12 px an den Text darüber. Knöpfe behalten immer ihre eigene Form; die Stammfassung bekommt dieselbe Ausnahme (:not(.o-knopf)) von der Website-Werft. */
.o-klein a.o-knopf, .o-zeile-was a.o-knopf, .o-einleitung a.o-knopf, .o-tabelle td a.o-knopf { display: inline-flex; padding: 0 20px; margin: 0; }
.k-hauptaktion > form { display: contents; }
/* Gruppenzeilen der Wächter-Karten (Uschi 02.10.2026): links Kurzname und Grund, rechts die Aktion in fester Breite; Abstand zwischen den Zeilen. */
.k-gliste { list-style: none; margin: var(--a3) 0 0; padding: 0; display: grid; gap: 0; }
.k-gzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--a3) var(--a4); padding: var(--a3) 0; }
.k-gzeile + .k-gzeile { border-top: 1px solid var(--linie); }
.k-gzeile-was { min-width: 0; color: var(--schiefer); }
.k-gzeile-was > b { color: var(--nacht); }
.k-gzeile-aktion { display: flex; align-items: center; justify-content: flex-end; gap: var(--a3); flex-wrap: wrap; }
.k-gzeile-aktion > form { display: contents; }
.k-gzeile-aktion > .k-ablage-zeile { min-width: 16rem; }
.k-knopf-fest { min-width: 11.5rem; }
.k-wartet { font-size: .875rem; color: var(--schiefer); }
@container (max-width: 560px) { .k-gzeile { grid-template-columns: minmax(0, 1fr); } .k-gzeile-aktion { justify-content: flex-start; } }
.k-hauptaktion > .k-ablage-zeile, .k-hauptaktion > .k-antwort { flex: 1 1 100%; }
.k-ablage-zeile { display: grid; gap: var(--a2); }
.k-ablage-zeile > a { width: fit-content; }
/* Ablagefeld: die ganze Fläche ist die Dateiauswahl, und eine Datei lässt sich hineinziehen (konto.js). */
.k-ablage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 72px; padding: 14px 16px;
  border: 2px dashed var(--nacht-30); border-radius: var(--r-12); background: var(--weiss); text-align: center; cursor: pointer; transition: border-color .15s var(--kurve), background .15s var(--kurve); }
.k-ablage:hover, .k-ablage--ueber { border-color: var(--gruen-tief); background: var(--gruen-zart); }
.k-ablage:focus-within { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.k-ablage-text { font-weight: 600; color: var(--nacht); }
.k-ablage-klein { font-size: .875rem; color: var(--schiefer); }
.k-ablage-datei { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.k-js .k-ohne-js { display: none; }
.k-ablage-form { display: grid; gap: var(--a2); }
.k-antwort > summary { width: fit-content; list-style: none; }
.k-antwort > summary::-webkit-details-marker { display: none; }
.k-antwort[open] > summary { margin-bottom: var(--a3); }
.k-antwort fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--a2); }
/* Kunden: der Aufklapper der eigenen Büros mit Innenabstand wie jede Kartenzeile (Uschi/Jonathan 30.09.2026). */
.k-inhalt .o-eigene > summary { padding: var(--a4) var(--a5); }
/* Überblick (Uschi/Jonathan 30.09.2026): »Diese Woche« als eine ruhige Zeile unter der Zeile »jetzt«. */
.o-seite .k-woche { margin: var(--a3) 0 var(--a6); }
/* Reiter: der Fokus-Rand von o-chips (-2px) fällt unten weg, sonst ist der Abstand zum Inhalt 30 statt 32 px (Messung reiter_abstand). */
.k-inhalt .o-kopf > .k-reiter { margin-bottom: 0; }
/* Kalender: die Pfeile nicht am Kartenrand (Messung rand, mindestens 12 px). */
.k-inhalt .o-kalender.o-karte-inhalt { padding: var(--a4); }
.k-legende > span { display: inline-flex; align-items: center; gap: var(--a1); white-space: nowrap; }
/* Protokoll des Betriebs (01.10.2026): Prüfsummen, Adressen und Kennungen ohne Leerzeichen brechen um, statt die Seite bei 390 px zu sprengen. */
.k-protokoll-liste .o-zeile-was { min-width: 0; overflow-wrap: anywhere; }
/* Bereichszeilen (Jonathan 01.10.2026 über Uschi: »hinten aufgeräumter«): links Titel und grau die Kurzinfo darunter, rechts nur das Etikett mit fester
   Breite und der Pfeil. So liegen alle Etiketten einer Liste genau übereinander (§3a Nr. 9, geprüft in gestaltung.mjs). */
details.o-beitrag.k-bereich > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--a3); row-gap: 2px; align-items: center; padding-block: var(--a3); }
details.o-beitrag.k-bereich > summary .o-beitrag-titel { grid-column: 1; grid-row: 1; min-width: 0; }
details.o-beitrag.k-bereich > summary .k-bereich-kurz { grid-column: 1; grid-row: 2; font-size: .875rem; color: var(--schiefer); overflow-wrap: anywhere; }
details.o-beitrag.k-bereich > summary .o-beitrag-meta { grid-column: 2; grid-row: 1 / 3; flex-wrap: nowrap; }
details.o-beitrag.k-bereich > summary .o-beitrag-meta .o-etikett { width: 7rem; justify-content: center; }
details.o-beitrag.k-bereich > summary .o-beitrag-pfeil { grid-column: 3; grid-row: 1 / 3; }
/* Kennzahl-Tabellen (Jonathan 01.10.2026 über Uschi: »Symmetrie einhalten«): ein Raster für alle Tabellen einer Seite. Erste Spalte flexibel, danach feste,
   gleich breite Zahlenspalten, rechtsbündig; so liegen gleichnamige Spalten genau untereinander (§3a Nr. 9, gestaltung.mjs »Spalten übereinander«). */
.o-tabelle.k-kennzahlen { table-layout: fixed; }
.o-tabelle.k-kennzahlen th.o-zahl-spalte { width: 8.5rem; }
/* Karten mit Tabelle schneiden an den runden Ecken ab; sonst ragte der hinterlegte Tabellenkopf als Linie über die Karte hinaus. */
.o-karte:has(> .o-tabelle), .o-karte:has(> details > .o-tabelle) { overflow: hidden; }
/* Team (Jonathan 01.10.2026 über Uschi, »Abstände sauber, Steve Jobs«): gleiche Abstände zwischen den Blöcken, je Mitglied eine Zeile in Inhaber-Höhe, rechts eine
   kompakte Rollen-Auswahl auf derselben Achse wie »Immer«, daneben das ⋯-Menü. */
.k-team { display: grid; gap: var(--a5); }
.k-team > * { margin: 0; }
.k-team-jetzt > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a3); cursor: pointer; }
.k-team-jetzt > summary::-webkit-details-marker { display: none; }
.k-team-jetzt > summary:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 4px; border-radius: var(--r-12); }
.k-team-jetzt > .k-team-neu { margin-top: var(--a4); }
.k-team-jetzt[open] > summary .o-knopf { display: none; }
.k-team-zeile { min-height: 72px; }
.k-team-zeile .o-zeile-tun { flex-wrap: nowrap; gap: var(--a2); }
.k-team-rolle { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; justify-content: flex-end; }
.k-team-rolle select.o-eingabe, .k-team-achse { width: 9.5rem; }
.k-team-achse { display: flex; margin-right: calc(44px + var(--a2)); }
.k-team-fuss { margin-top: var(--a4); }
.k-team-schmal { max-width: 16rem; }
.k-team-paar { display: grid; gap: var(--a3); }
@media (min-width: 720px) { .k-team-paar { grid-template-columns: 1fr 1fr; } }
.k-team-saetze { display: grid; gap: 4px; margin-top: 6px; }
.k-team-pflicht { display: inline-flex; align-items: center; gap: var(--a2); min-height: 44px; }
.k-team-knoepfe { justify-content: flex-end; }
.k-menue { position: relative; }
.k-menue > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-12);
  font-size: 1.25rem; line-height: 1; color: var(--schiefer); cursor: pointer; }
.k-menue > summary::-webkit-details-marker { display: none; }
.k-menue > summary:hover, .k-menue[open] > summary { background: var(--papier); color: var(--nacht); }
.k-menue > summary:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.k-menue-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 15rem; display: grid; padding: var(--a2) var(--a3);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-12); box-shadow: var(--schatten-1); }
.k-menue-liste .o-textknopf { min-height: 44px; text-align: left; }
@media (max-width: 599px) {
  .k-team-zeile .o-zeile-tun { justify-content: flex-start; }
  .k-team-achse { width: auto; margin-right: 0; }
  .k-menue-liste { left: 0; right: auto; }
}

/* ── Fachbegriffe erklären (Copy-Regel 01.10.2026, Konto\Erklaeren): Mini-»!« hinter dem Begriff, 44 px Tippfläche ohne die Zeile zu sprengen. ── */
.k-erklaer { position: relative; }
.k-erklaer-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -14px -14px -14px -12px;
  vertical-align: middle; border: 0; padding: 0; cursor: help; color: var(--nacht); font-family: inherit; font-weight: 700; font-size: .75rem; line-height: 1;
  background: radial-gradient(circle, var(--linie) 0 8px, transparent 8.5px); border-radius: 50%; }
.k-erklaer-knopf:hover, .k-erklaer-knopf[aria-expanded="true"] { background: radial-gradient(circle, var(--gruen-hell) 0 8px, transparent 8.5px); }
.k-erklaer-knopf:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: -8px; }
.k-erklaer-text { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: min(16rem, 80vw); padding: 8px 12px;
  border-radius: var(--r-12); background: var(--nacht); color: var(--weiss); font-size: .85rem; font-weight: 500; line-height: 1.35; white-space: normal; }
.k-erklaer:hover > .k-erklaer-text, .k-erklaer-knopf[aria-expanded="true"] + .k-erklaer-text { display: block; }
@media print {
  .k-erklaer-knopf, .k-erklaer-text { display: none !important; }
  .k-erklaer::after { content: " (" attr(data-erklaerung) ")"; }
}

/* Upload-Fazit (Prüf-Steckbrief §4): je Schritt ein Zeichen in fester Spalte, der Text daneben; Farbe nur am Zeichen. */
.k-fazit { display: grid; gap: var(--a2); }
.k-fazit-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.k-fazit-liste > li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--a2); align-items: start; overflow-wrap: anywhere; }
.k-fazit-zeichen { font-weight: 700; text-align: center; }
.k-fazit--gut .k-fazit-zeichen { color: var(--gruen-druck); }
.k-fazit--fehler .k-fazit-zeichen { color: var(--fehler); }
.k-fazit--warn .k-fazit-zeichen { color: var(--warn-tief); }
/* Ergebnis in der Karte, an der gehandelt wurde (Gesetz »kein Sprung«, 02.10.2026). */
.k-ergebnis-in-karte { margin: var(--a2) 0; }

/* ─── Formulare im Konto: Abstände aus EINER Stelle (Uschi 02.10.2026, Foto Meldepostfach) ────────────────────────────────────────
   Label → eigene Box 6 px (.o-feld), Box → nächstes Label 16 px, letzte Box → Knopfreihe 20 px, Knopfreihe → Ergebnis ≥ 12 px.
   gestaltung.mjs misst es in jedem Formular (formular-regeln.mjs). */
.o-felder, form.o-karte-inhalt { display: grid; gap: var(--a4); }
.o-felder > .o-knoepfe, form.o-karte-inhalt > .o-knoepfe { margin-top: var(--a1); }
/* Ein Knopf als direktes Kind eines solchen Formulars bleibt so breit wie sein Inhalt (Grid zieht sonst auf volle Breite; Foto Jonathan 02.10. 17:54, Sigi). */
.o-felder > :is(button, .o-knopf), form.o-karte-inhalt > :is(button, .o-knopf) { justify-self: start; }

/* ─── Einstellungen: Zeile mit Pfeil zum Blatt (Entwurf 2, Jonathan 02.10.2026) ─────────────────────────────────────────────────── */
/* Tippfläche 44 px am Link selbst (Gestaltung misst das Element, nicht ::after); die Zeile hat dafür 24 px Polster, damit der Link 12 px vom Kartenrand bleibt. */
.k-zeile-blatt { position: relative; padding-top: 24px; padding-bottom: 24px; }
.o-zeile-was a.k-blatt-link { display: inline-block; padding: 12px 0; margin: -12px 0; color: inherit; text-decoration: none; }
.k-blatt-link::after { content: ""; position: absolute; inset: 0; }
.k-zeile-blatt:hover b, .k-blatt-link:focus-visible { color: var(--gruen-tief); }
.k-zustand { font-size: .875rem; color: var(--schiefer); }
.k-pfeil { width: 20px; height: 20px; flex: none; color: var(--schiefer); transform: rotate(-90deg); }
.k-zurueck { display: inline-block; padding: 12px 0; margin: -12px 0 var(--a1); }
.k-heute-gruppe + .k-heute-gruppe { margin-top: var(--a4); }
.k-meldepostfach { display: grid; gap: var(--a4); }
.k-zeile-hinweis { grid-column: 1 / -1; font-size: .875rem; color: var(--schiefer); }
/* ⓘ in Zeilen der Einstellungen: Tippfläche ragt nur 8 px über die Zeile hinaus, sonst liegt sie in der letzten Zeile 9 px am Kartenrand (Eindampf »rand«, Blatt Sigi). */
.o-zeile-was .k-info { margin-top: -8px; margin-bottom: -8px; }
.k-zugang[open] > summary, .k-neu-geraet[open] > summary { margin-bottom: var(--a4); }
.k-zuarbeiter > summary.o-zeile { display: block; }

/* Schalter-Karte auf der Büro-Seite im Betreiber-Bereich (FB287): vier Ein/Aus-Zeilen statt vier Kästen, Abstand und Breite wie eine Gruppe. */
.k-schalterkarte { max-width: 1180px; margin: 0 0 var(--a4); }