@font-face { font-family: "Raleway"; font-weight: 400; font-display: swap; src: url("../fonts/raleway-400.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 500; font-display: swap; src: url("../fonts/raleway-500.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 600; font-display: swap; src: url("../fonts/raleway-600.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 700; font-display: swap; src: url("../fonts/raleway-700.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 800; font-display: swap; src: url("../fonts/raleway-800.woff2") format("woff2"); }

:root {
  --blue: #1e5f82;
  --blue-soft: #e8f0f5;
  --red: #d72850;
  --error: #a3122f;
  --peach: #e6b9a0;
  --peach-soft: #f5e3d7;
  --greyblue: #a5bfcd;
  --bg: #f6f3f1;
  --surface: #ffffff;
  --text: #24323d;
  --muted: #5f6b75;
  --line: #e7ebee;
  --border-input: #7d8b96;
  --border-soft: #d6dce0;
  --success-bg: #e6f3ec;
  --success-text: #276a42;
  --error-bg: #fbe5ea;
  --badge-text: #8a4f2c;
  --badge-muted-bg: #eef1f3; /* mit --muted als Schrift 4,8:1 */
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  --font: "Raleway", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
/* html bekommt bewusst keinen eigenen Hintergrund: Nur so wandert der body-Hintergrund auf die
   Leinwand (Canvas), und der Herz-Akzent (.brand-footer) mit z-index: -1 bleibt darüber sichtbar.
   Hätte html einen Hintergrund, würde der body-Hintergrund den Herz-Akzent verdecken. */
/* Versalziffern (Befund 4): Raleway setzt sonst Mediävalziffern („K01“ wirkt wie „Ko1“). font-feature-settings zusätzlich,
   weil die Kurzschreibweise font: (Knöpfe, Navigation) font-variant-numeric zurücksetzt, die Feature-Einstellung aber erbt. */
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.5; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
a { color: var(--blue); text-underline-offset: 3px; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); margin: 0; line-height: 1.15; }
h2 { font-size: 1.15rem; font-weight: 700; color: var(--blue); margin: 0 0 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.panel-blue :focus-visible { outline-color: #fff; }

/* Grundaufbau: Seitenleiste, Arbeitsbereich, rechte Spalte (UX 1.3, E1) */
:root { --sidebar-w: 256px; --rail-w: 72px; --aside-w: 300px; color-scheme: light; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--aside-w); gap: 16px; padding: 16px; }
/* Ohne Inhalt für die rechte Spalte (cockpit leer) gibt es nur zwei Spalten, sonst bliebe rechts eine leere Fläche */
.shell:has(> .cockpit:empty) { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.mobile-bar, .nav-backdrop, .sidebar-close { display: none; }
.sidebar { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; padding: 14px 10px 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--greyblue) transparent; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-logo { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 8px 12px; color: var(--blue); text-decoration: none; }
.sidebar-logo img { display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-name { font-size: 0.98rem; font-weight: 800; white-space: nowrap; letter-spacing: -0.01em; }
.brand-by { font-size: 0.72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-spacer { flex: 1; min-height: 8px; }
.sidebar form { margin: 0; }
.nav-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--text); background: none; border: 0; font: 600 0.95rem var(--font); text-decoration: none; cursor: pointer; text-align: left; }
.nav-link svg { width: 22px; height: 22px; flex: none; }
.nav-link:hover { background: var(--blue-soft); color: var(--blue); }
.nav-link.is-active { background: var(--blue); color: #fff; }
.nav-link-small { min-height: 40px; gap: 10px; font-size: 0.88rem; }
.nav-link-small svg { width: 19px; height: 19px; }
.sidebar-toggle[hidden] { display: none; }
.sidebar-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Kunden-Block: Kunde und Geschäftsjahr sichtbar, darunter alles, was je Kunde gilt (Navigation Variante A) */
.ctx-block { margin: 10px 0 6px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: #fbf9f8; display: flex; flex-direction: column; gap: 6px; }
.ctx-rail { display: none; }
.ctx-initial { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 800; font-size: 0.95rem; }
.ctx-head { display: flex; flex-direction: column; gap: 6px; }
.ctx-select { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 600; font-size: 0.9rem; }
.ctx-select:hover, .ctx-switch[open] > .ctx-select { border-color: var(--blue); color: var(--blue); }
.ctx-select svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.ctx-select .ctx-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-select svg:last-child { margin-left: auto; transition: transform 0.15s ease; }
.ctx-switch[open] > .ctx-select svg:last-child { transform: rotate(180deg); }
.ctx-name { font-size: 1rem; font-weight: 800; color: var(--blue); }
/* Im Fluss statt schwebend: Die Seitenleiste scrollt, ein schwebendes Menü würde an ihrem Rand abgeschnitten */
.ctx-switch .menu-list { position: static; min-width: 0; margin-top: 6px; box-shadow: none; }
.ctx-menu { display: flex; flex-direction: column; gap: 2px; }
.ctx-menu ul { list-style: none; margin: 0; padding: 0; }
.ctx-menu .ctx-options { max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.ctx-menu a { padding: 7px 10px; font-size: 0.9rem; overflow-wrap: anywhere; }
.ctx-menu .ctx-search { min-height: 38px; padding: 6px 10px; font-size: 0.9rem; margin-bottom: 4px; }
.ctx-group { margin: 6px 10px 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ctx-empty { margin: 4px 10px; font-size: 0.85rem; color: var(--muted); }
.ctx-menu .ctx-all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--blue); font-weight: 600; }
.ctx-years .menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ctx-years .menu-list a { text-align: center; padding: 7px 4px; }
.ctx-status { margin: 0; padding: 0 4px 2px; font-size: 0.8rem; color: var(--muted); }
.ctx-list .nav-link { min-height: 40px; gap: 10px; padding: 0 10px; font-size: 0.92rem; }
.ctx-list .nav-text { white-space: nowrap; }
.nav-lock { display: inline-flex; margin-left: auto; color: var(--muted); }
.nav-lock svg { width: 16px; height: 16px; }
.nav-link.is-active .nav-lock, .nav-link:hover .nav-lock { color: inherit; }

/* Zuletzt geöffnet: Titel und Kunde klein darunter */
.recent-nav { margin-top: 8px; }
.recent-heading { margin: 0; padding: 4px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.recent-link { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; text-decoration: none; line-height: 1.3; }
.recent-link:hover { background: var(--blue-soft); }
.recent-title { color: var(--text); font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-link:hover .recent-title { color: var(--blue); }
.recent-company { color: var(--muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Personen-Block unten: Kürzel, Name bzw. E-Mail, darin Konto und Abmelden */
.sidebar-person { border-top: 1px solid var(--line); padding-top: 10px; }
.person-id { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 0 6px; min-width: 0; }
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--peach-soft); color: var(--badge-text); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em; }
.avatar-large { width: 44px; height: 44px; font-size: 0.95rem; }
.person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.person-name { font-weight: 700; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-mail { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-actions { flex-direction: row; }
.person-actions > li { flex: 1; min-width: 0; }

/* Schmale Leiste (Rail): eingeklappt ab 1280px oder von 768 bis 1279px. Nur Symbole, die Texte bleiben für Screenreader;
   der Kunden-Block wird ein Symbol (Anfangsbuchstabe) mit Tooltip, Wechsler und „Zuletzt geöffnet“ entfallen. */
@media (min-width: 1280px) {
  .sidebar-closed .shell { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--aside-w); }
  .sidebar-closed .shell:has(> .cockpit:empty) { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .sidebar-closed .nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sidebar-closed .nav-link, .sidebar-closed .sidebar-logo { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar-closed .ctx-head, .sidebar-closed .recent-nav, .sidebar-closed .nav-lock { display: none; }
  .sidebar-closed .ctx-rail { display: flex; }
  .sidebar-closed .ctx-block { margin: 6px 0; padding: 4px 0; border-width: 1px 0; border-radius: 0; background: none; }
  .sidebar-closed .person-id { justify-content: center; padding: 0; }
  .sidebar-closed .person-actions { flex-direction: column; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .shell, .shell:has(> .cockpit:empty) { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-link, .sidebar-logo { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar-toggle { display: none; }
  .cockpit { grid-column: 2; }
  .ctx-head, .recent-nav, .nav-lock { display: none; }
  .ctx-rail { display: flex; }
  .ctx-block { margin: 6px 0; padding: 4px 0; border-width: 1px 0; border-radius: 0; background: none; }
  .person-id { justify-content: center; padding: 0; }
  .person-actions { flex-direction: column; }
}
/* Schmal (unter 768px): Kopfleiste mit Herz und Knopf „Menü“; die Seitenleiste öffnet als Panel von links mit allen
   Beschriftungen. Ohne Skript steht sie ausgeklappt oben (der Knopf bleibt dann verborgen). */
@media (max-width: 767px) {
  .shell, .shell:has(> .cockpit:empty) { display: flex; flex-direction: column; padding: 10px; }
  /* flex: none: In der Flex-Spalte der Shell darf die klebende Kopfleiste nicht schrumpfen, sobald der Inhalt länger
     ist als das Fenster. Der Halo in der Seitenfarbe deckt beim Scrollen die Lücke um die Leiste ab. */
  .mobile-bar { position: sticky; top: 0; z-index: 5; flex: none; min-height: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), 0 0 0 10px var(--bg); }
  .mobile-brand { display: flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 800; text-decoration: none; }
  .menu-toggle svg { width: 20px; height: 20px; }
  .sidebar { flex: none; }
  .sidebar-toggle { display: none; }
}
/* Mit Skript: die Seitenleiste als Panel von links, geöffnet über „Menü“. Ohne Skript (scripting: none) bleibt sie
   ausgeklappt oben stehen und der Knopf entfällt. */
@media (max-width: 767px) and (scripting: enabled) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(320px, 86vw); border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 10px 14px;
             transform: translateX(-105%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  .nav-open .sidebar { transform: none; visibility: visible; transition: transform 0.2s ease; box-shadow: 0 10px 40px rgba(36, 50, 61, 0.25); }
  .nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(36, 50, 61, 0.35); }
  .sidebar-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer; }
  .sidebar-close svg { width: 22px; height: 22px; }
}
@media (scripting: none) { .menu-toggle { display: none; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; }
/* Ohne Pfad und ohne Aktionen (Startseite) entfällt die Kopfzeile, sonst begänne der Arbeitsbereich tiefer als das Cockpit */
.topbar:not(:has(a, span, button, details, form)) { display: none; }
.topbar-tools { display: flex; gap: 8px; }
.main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cockpit { display: flex; flex-direction: column; gap: 16px; }
.cockpit:empty { display: none; }

/* App-Rahmen ab 768px: Die Seite selbst scrollt nicht, nur die Bereiche darin.
   Nur für den Bildschirm (screen), damit der Druck normal über mehrere Seiten läuft. */
@media screen and (min-width: 768px) {
  html, body.app { height: 100%; }
  /* clip statt hidden: hidden lässt Sprünge zu Ankern (#id) und scrollIntoView das Dokument verschieben, dann rutscht
     der ganze Rahmen nach oben und unten bleibt ein leerer Streifen. clip lässt gar kein Scrollen des Dokuments zu. */
  html:has(body.app), body.app { overflow: clip; }
  body.app { height: 100vh; height: 100dvh; position: relative; } /* relative: auch absolut positionierte Teile (z. B. sr-only) liegen im Rahmen und verlängern das Dokument nicht */
  .app .shell { height: 100vh; height: 100dvh; }
  .app .shell, .app .main, .app .cockpit { scrollbar-width: thin; scrollbar-color: var(--greyblue) transparent; }
}
/* Breit (ab 1280px): drei Spalten, Arbeitsbereich und Cockpit scrollen je für sich */
@media screen and (min-width: 1280px) {
  .app .shell { grid-template-rows: minmax(0, 1fr); }
  /* Negativer Rand plus Innenabstand: Der Scrollbereich reicht bis an den Fensterrand bzw. bis zur
     Mitte der Spaltenlücke, die Inhalte stehen wie zuvor. So werden Kartenschatten nicht abgeschnitten.
     Unten bleibt Luft, damit am Ende der Herz-Akzent unter der letzten Karte zu sehen ist. */
  .app .main, .app .cockpit { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -16px -8px; padding: 16px 8px 48px; }
}
/* Mittel (768 bis 1279px): Cockpit steht unter dem Arbeitsbereich, daher ein gemeinsamer
   Scrollbereich (die Shell). Die Seitenleiste klebt darin und überspannt beide Zeilen. Die Luft für
   den Herz-Akzent sitzt an der letzten Spalte, nicht an der Shell, sonst scrollt eine kurze Seite unnötig. */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .app .shell { overflow-y: auto; overscroll-behavior: contain; }
  .app .sidebar { grid-row: 1 / span 2; align-self: start; position: sticky; top: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
  .app .cockpit, .app .main:has(+ .cockpit:empty) { padding-bottom: 48px; }
}
/* Schmal (unter 768px): ebenfalls App-Rahmen. Die Seite scrollt nicht, die Shell scrollt in sich, die
   Seitenleiste (oben als Symbolzeile) klebt darin. Die Shell ist hier eine Flex-Spalte, weil ein Grid-Bereich
   die klebende Leiste auf ihre eigene Zeile begrenzen würde (Regeln dazu im Grundaufbau oben). */
@media screen and (max-width: 767px) {
  html, body.app { height: 100%; }
  html:has(body.app), body.app { overflow: clip; }
  body.app { height: 100vh; height: 100dvh; position: relative; } /* relative: auch absolut positionierte Teile (z. B. sr-only) liegen im Rahmen und verlängern das Dokument nicht */
  .app .shell { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--greyblue) transparent; }
}

/* Herz-Akzent: das Logo-Herz groß und sehr blass unten rechts, vom Fensterrand angeschnitten. Rein
   dekorativ, Klicks gehen durch. Seitenverhältnis wie s4i-herz.svg (55 : 42). */
.brand-footer { display: none; }
/* Ab 768px fest am Fensterrand hinter allen Inhalten. Die Karten sind deckend, das Herz zeigt sich
   nur in den Lücken. z-index: -1 malt es über dem Leinwand-Hintergrund, aber unter allem anderen.
   Fest positioniert und nach außen geschoben: Der Überstand erzeugt keinen Scrollbereich. */
@media screen and (min-width: 768px) {
  .brand-footer { display: block; position: fixed; right: -60px; bottom: -50px; z-index: -1;
                  width: 420px; aspect-ratio: 55 / 42; opacity: 0.1; pointer-events: none;
                  background: url("../brand/s4i-herz.svg") no-repeat center / contain; }
}
/* Schmal (unter 768px) bleibt der Akzent aus: Das Herz in der Icon-Leiste genügt, und die Seite
   wird nicht länger. Bei reduzierter Transparenz und im Druck ebenfalls aus. */
@media (prefers-reduced-transparency: reduce) { .brand-footer { display: none; } }
@media print { .brand-footer { display: none; } }

/* Bausteine */
.panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.panel-blue { background-color: var(--blue); color: #fff; }
.panel-blue .eyebrow { color: #cfe0ea; }
.panel-dashed { background: transparent; box-shadow: none; border: 2px dashed var(--peach); }
.eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.big { font-size: 2.4rem; font-weight: 800; line-height: 1; margin: 4px 0; }
.muted { color: var(--muted); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
             background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs { font-size: 0.85rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) { .grid-2 { grid-template-columns: 1fr; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px;
       font: 600 0.95rem var(--font); text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(215, 40, 80, 0.25); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-primary[disabled] { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn-secondary { background: var(--blue); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-soft); }
.btn-block { width: 100%; }

.search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.search > input { flex: 1 1 220px; min-width: 0; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-input); border-radius: var(--radius-sm);
                          font: 400 1rem var(--font); color: var(--text); background: #fff; }
textarea { min-height: 110px; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--blue); }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .help { font-size: 0.85rem; color: var(--muted); margin: 4px 0 0; }
.has-error input:not([type=checkbox]):not([type=radio]), .has-error select, .has-error textarea { border-color: var(--error); }
.error { color: var(--error); font-weight: 600; margin: 4px 0 0; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.table-wrap { overflow-x: auto; }
/* separate statt collapse: Nur so greifen abgerundete Ecken an Zellen (Zeilen-Hover) */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { text-align: left; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--peach-soft); color: var(--badge-text); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-muted { background: var(--badge-muted-bg); color: var(--muted); font-weight: 500; }

/* Klickbare Listenzeilen: Der echte Link steht in der ersten Zelle und wird per ::after über die
   ganze Zeile gezogen. Screenreader hören so einen Link pro Zeile, die Maus trifft überall. */
.table-nav tbody tr { position: relative; }
.table-nav { position: relative; } /* Sicherheitsnetz: ::after bleibt notfalls in der Tabelle */
.table-nav tbody td { transition: background-color 0.15s ease, border-color 0.15s ease; }
.row-link { color: var(--blue); font-weight: 700; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
/* Fokus zeigt die ganze Zeile statt nur den Linktext. Der Ring liegt auf der Fläche des Links,
   damit er überall gleich und mit runden Ecken erscheint (outline auf <tr> rendern nicht alle Browser). */
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { box-shadow: inset 0 0 0 3px var(--blue); }
.table-nav tbody tr:hover td,
.table-nav tbody tr:has(.row-link:focus-visible) td { background: var(--blue-soft); border-bottom-color: transparent; }
.table-nav tbody tr:hover td:first-child,
.table-nav tbody tr:has(.row-link:focus-visible) td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.table-nav tbody tr:hover td:last-child,
.table-nav tbody tr:has(.row-link:focus-visible) td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* Pfeilspalte: schmal, rechtsbündig, dezent; beim Hover blau und 2px nach rechts */
.table-nav .col-go { width: 1%; padding-left: 0; text-align: right; color: var(--muted); }
.table-nav .col-go svg { display: block; width: 18px; height: 18px; margin-left: auto; transition: transform 0.15s ease, color 0.15s ease; }
.table-nav tbody tr:hover .col-go,
.table-nav tbody tr:has(.row-link:focus-visible) .col-go { color: var(--blue); }
.table-nav tbody tr:hover .col-go svg,
.table-nav tbody tr:has(.row-link:focus-visible) .col-go svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .table-nav tbody td, .table-nav .col-go svg { transition: none; }
  .table-nav tbody tr:hover .col-go svg,
  .table-nav tbody tr:has(.row-link:focus-visible) .col-go svg { transform: none; }
}
.empty { color: var(--muted); margin: 0; padding-left: 44px; background: url("../brand/s4i-herz.svg") no-repeat left center / 30px auto; min-height: 30px; display: flex; align-items: center; }

.messages { display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.msg-success { background: var(--success-bg); color: var(--success-text); }
.msg-error { background: var(--error-bg); color: var(--error); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }

/* Anmeldung */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px;
        background: linear-gradient(135deg, #fbf3ee 0%, #f6ece6 45%, #eef3f6 100%); }
/* Das Logo-Herz groß und blass unten rechts, vom Fensterrand angeschnitten. Fest positioniert, damit es
   am Fenster klebt und der Überstand keinen Scrollbereich erzeugt. Die Karte liegt deckend darüber. */
.auth::before { content: ""; position: fixed; right: -60px; bottom: -50px; z-index: 0;
                width: clamp(320px, 40vw, 600px); aspect-ratio: 55 / 42; opacity: 0.14; pointer-events: none;
                background: url("../brand/s4i-herz.svg") no-repeat center / contain; }
@media (max-width: 767px) { .auth::before { width: 260px; right: -50px; bottom: -40px; } }
@media (prefers-reduced-transparency: reduce) { .auth::before { display: none; } }
@media print { .auth::before { display: none; } }
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--surface); border-radius: 24px; box-shadow: 0 10px 30px rgba(30, 95, 130, 0.12); padding: 32px; }
.auth-brand { margin-bottom: 18px; }
.auth-brand img { display: block; height: 28px; width: auto; }
.auth-app { display: block; margin-top: 6px; color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* Ergebnis */
.small { font-size: 0.85rem; }
.big .unit { font-size: 1rem; font-weight: 600; }
.grade { font-weight: 700; color: var(--blue); margin: 0 0 6px; }
.panel-blue .grade { color: #fff; }
.msg-warning { background: var(--peach-soft); color: var(--badge-text); } /* 5,2:1 */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--badge-muted-bg); border-radius: 999px; }
.tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; color: var(--text); font-weight: 600; text-decoration: none; }
.tab:hover { color: var(--blue); }
.tab.is-active { background: var(--surface); color: var(--blue); box-shadow: var(--shadow); }
.table .is-hidden td { color: var(--muted); }
.table .group-row th { padding-top: 18px; color: var(--blue); font-size: 0.85rem; }
.rank { margin: 0; padding-left: 1.2rem; }
.rank li { margin-bottom: 6px; }
.ring-wrap { position: relative; width: 120px; height: 120px; margin: 4px 0 8px; }
.score-ring { display: block; width: 120px; height: 120px; }
.score-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 12; }
.score-ring-value { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }
.ring-number { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 1.6rem; font-weight: 800; }

/* Menü (Geschäftsjahr, Kunde) als Links: kein automatischer Seitenwechsel (WCAG 3.2.2) */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; z-index: 10; list-style: none; margin: 4px 0 0; padding: 6px; min-width: 160px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); border: 1px solid var(--border-soft); }
.menu-list a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--text); }
.menu-list a:hover, .menu-list a[aria-current] { background: var(--blue-soft); color: var(--blue); font-weight: 700; }

/* Kategorien und Status (UX 1.4, K5, K9) */
:root {
  --cat-1-tint: #fbf3ee; --cat-1-mark: #8a4f2c;
  --cat-2-tint: #f5e3d7; --cat-2-mark: #b4572e;
  --cat-3-tint: #e8f0f5; --cat-3-mark: #3f7fa3;
  --cat-4-tint: #c9dae4; --cat-4-mark: #1e5f82; --cat-4-text: #164a66;
  --share-social: var(--blue); --share-strategic: #e0607f; --kh-ring: var(--red);
  --text-hero: 4rem;
}
.cat-pill { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
            padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.cat-0 { background: var(--cat-4-tint); color: var(--cat-4-text); }
.cat-1 { background: var(--cat-3-tint); color: var(--cat-3-mark); }
.cat-2 { background: var(--cat-2-tint); color: var(--cat-1-mark); }
.cat-3 { background: var(--cat-1-tint); color: var(--cat-1-mark); }
.cat-prefix { font-weight: 500; }
.pill { display: inline-flex; gap: 4px; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.pill-done { background: var(--success-bg); color: var(--success-text); }
.pill-open { background: var(--peach-soft); color: var(--badge-text); }
.pill-none { background: var(--badge-muted-bg); color: var(--muted); }
.pill-lock { background: var(--blue-soft); color: var(--blue); }
.pill-sub { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.badge-kh { background: var(--error-bg); color: var(--error); }
.area { display: inline-flex; align-items: center; gap: 6px; }
.area-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); margin-right: 3px; }
.area-list { list-style: none; margin: 0; padding: 0; }
.area-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; }
.area-row input[name=name] { flex: 1; min-width: 160px; }
.field input[type=color], .area-row input[type=color] { width: 56px; padding: 4px; cursor: pointer; }
.area-swatch { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; font-weight: 700; }
.lock { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 0.8rem; font-weight: 600; margin: 0; }
.logo-mini { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.logo-head { max-height: 40px; max-width: 160px; object-fit: contain; display: block; margin-bottom: 6px; }
.logo-preview { max-height: 80px; max-width: 240px; object-fit: contain; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }

/* Verweislisten: ganze Zeile klickbar mit Pfeil rechts, kein unterstrichener Text. Der echte Link steht in
   der Zeile und wird per ::after über die ganze Zeile gezogen (wie bei den Tabellen). */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 48px; padding: 8px 44px 8px 12px; border-bottom: 1px solid var(--line); border-radius: var(--radius-sm); transition: background-color 0.15s ease; }
.link-list li:last-child { border-bottom: 0; }
.link-list a { color: var(--blue); font-weight: 700; text-decoration: none; }
.link-list a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
.link-list a:focus-visible { outline: none; }
.link-list a:focus-visible::after { box-shadow: inset 0 0 0 3px var(--blue); }
.link-list li::after { content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--muted);
                       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
                       mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
                       transition: transform 0.15s ease, background-color 0.15s ease; }
.link-list li:hover, .link-list li:has(a:focus-visible) { background: var(--blue-soft); border-bottom-color: transparent; }
.link-list li:hover::after, .link-list li:has(a:focus-visible)::after { background: var(--blue); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .link-list li, .link-list li::after { transition: none; }
  .link-list li:hover::after, .link-list li:has(a:focus-visible)::after { transform: none; }
}

.segmented { display: inline-flex; border: 1px solid var(--blue); border-radius: 999px; padding: 0; margin: 0; overflow: hidden; }
.segmented label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; color: var(--blue); font-weight: 600; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:checked) { background: var(--blue); color: #fff; }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: -3px; }
table, .table td, .table .num, .big { font-variant-numeric: tabular-nums; }
.field:has(> input[type=checkbox]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; }
.field:has(> input[type=checkbox]) label { margin: 0; }
.field:has(> input[type=checkbox]) input { width: 20px; height: 20px; }

/* ===== Projekt-Assistent (UX S4, K8) ===== */
.pill-done, .pill-open { align-self: flex-start; }
.step-lead { margin: 0 0 20px; color: var(--muted); max-width: 70ch; }
.need { color: var(--red); font-weight: 800; }

/* Schrittbalken: drei gleich breite Schritte, der aktuelle ist blau, erledigte tragen ein Häkchen */
.stepper ol { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.stepper .step { flex: 1 1 0; min-width: 0; }
.stepper .step > a, .stepper .step > span { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 60px; padding: 10px 16px; border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: background-color 0.15s ease; }
.stepper .step > a:hover { background: var(--blue-soft); }
.step-number { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--badge-muted-bg); color: var(--muted); font-weight: 800; }
.step-number svg { width: 18px; height: 18px; }
.step-text { display: flex; flex-direction: column; min-width: 0; }
.step-label { font-weight: 700; line-height: 1.25; }
.step-state { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.stepper .step.is-current > a, .stepper .step.is-current > span { background: var(--blue); color: #fff; }
.step.is-current .step-number { background: rgba(255, 255, 255, 0.22); color: #fff; }
.step.is-current .step-state { color: #dbe8f0; }
.step.is-done .step-number { background: var(--success-bg); color: var(--success-text); }
.step.is-done .step-state { color: var(--success-text); }
.step.is-missing .step-number { background: var(--error-bg); color: var(--error); }
.step.is-missing .step-state { color: var(--error); }
@media (max-width: 767px) {
  .stepper ol { gap: 6px; }
  .stepper .step > a, .stepper .step > span { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; border-radius: var(--radius-sm); }
  .step-state { display: none; }
  .step-label { font-size: 0.8rem; }
}

/* Formularbereiche */
.wizard-panel h2 { font-size: 1.3rem; margin-bottom: 4px; }
.form-section { margin: 0 0 28px; }
.form-section h3 { font-size: 0.95rem; font-weight: 800; color: var(--blue); margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.field-wide { grid-column: 1 / -1; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .funding-table input[aria-invalid="true"] { border-color: var(--error); }
fieldset.field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.field > legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.counter { margin: 4px 0 0; text-align: right; }
.counter.is-over { color: var(--error); font-weight: 700; }
textarea { resize: vertical; }

/* Auswahl als Knopfreihe (Projekttyp, Wirkungsraum, Finanzierungsart). Die echten Radiofelder bleiben bedienbar. */
div.choice-group { display: flex; flex-wrap: wrap; gap: 8px; }
.field div.choice-group label { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 18px; border: 1px solid var(--border-input); border-radius: 999px; background: #fff; color: var(--text); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.field div.choice-group label:hover { border-color: var(--blue); background: var(--blue-soft); }
div.choice-group input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field div.choice-group label:has(input:checked) { background: var(--blue); border-color: var(--blue); color: #fff; }
.field div.choice-group label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.field div.choice-group label:has(input:disabled) { cursor: not-allowed; color: var(--muted); border-color: var(--border-soft); background: transparent; }
.field div.choice-group label:has(input:disabled:checked) { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
input:disabled, select:disabled { background: var(--badge-muted-bg); color: var(--muted); cursor: not-allowed; }

/* Hinweise im Formular */
.note { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--blue-soft); border-left: 4px solid var(--blue); }
.note > :last-child { margin-bottom: 0; }
.note-warn { background: var(--peach-soft); border-left-color: var(--red); }
.note-warn ul { margin: 6px 0 12px; padding-left: 1.2rem; }
.note-lock .lock { margin-right: 8px; }
.error-summary { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 2px solid var(--error); }
.error-summary-title { margin: 0 0 4px; font-weight: 800; color: var(--error); }
.error-summary .error { margin: 0 0 6px; }
.panel-alert { border: 2px solid var(--error); }
.panel-alert .eyebrow { color: var(--error); }
.hint-list { margin: 0; padding-left: 1.1rem; }
.hint-list li { margin-bottom: 6px; }

/* Projektjahre als Chips */
.years-preview { margin: 0 0 16px; }
.year-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 8px; padding: 0; }
.year-chips:empty::before { content: "Erst Geschäftsjahr und Laufzeit angeben."; color: var(--muted); font-size: 0.85rem; }
.year-chips li { padding: 6px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 0.85rem; font-weight: 600; }
.year-chips b { font-weight: 800; margin-right: 4px; }

/* Ziele des Unternehmens: Felder erscheinen erst, wenn das Kriterium angehakt ist */
.goal-row { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 16px 4px; margin: 0 0 12px; }
.goal-row .goal-toggle { margin-bottom: 12px; }
.goal-row .goal-toggle label { font-size: 1rem; }
.goal-row:has(input[type=checkbox]:checked) { border-color: var(--blue); background: var(--blue-soft); }
.goal-row:has(input[type=checkbox]:not(:checked)) .goal-fields { display: none; }
.more > summary, .internal > summary { cursor: pointer; font-weight: 600; margin: 12px 0; }
.internal { border-top: 1px solid var(--line); padding-top: 4px; }

/* Plan je Projektjahr: eine Zeile je Projektjahr */
.funding-table th, .funding-table td { vertical-align: top; }
.funding-table thead th { white-space: normal; }
.th-help { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.funding-table tbody th, .funding-table tfoot th { font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 700; padding: 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.funding-table tbody th .th-help { font-weight: 500; }
.funding-table td input { min-width: 100px; text-align: right; }
@media (max-width: 1279px) { .funding-table thead .th-help { display: none; } }
.funding-table .calc { padding-top: 22px; }
.cell-note:has([aria-label="kein Wert"]) { visibility: hidden; }
.cell-note { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.funding-table .total-col { font-weight: 800; color: var(--blue); }
.funding-table tfoot th, .funding-table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; background: var(--bg); padding-top: 12px; font-weight: 800; }
.funding-table tfoot td { color: var(--text); }
.funding-table tfoot .total-col { color: var(--blue); }
.funding-table .error { text-align: right; font-size: 0.8rem; }
@media (max-width: 767px) {
  .funding-table, .funding-table tbody, .funding-table tfoot, .funding-table tr, .funding-table td, .funding-table th { display: block; }
  .funding-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .funding-table tr { margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
  .funding-table tbody th, .funding-table tfoot th { padding: 0 0 8px; border: 0; }
  .funding-table td, .funding-table tfoot td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 6px 0; border: 0; text-align: right; background: none; }
  .funding-table td::before { content: attr(data-label); flex: 1 1 45%; text-align: left; font-weight: 600; font-size: 0.85rem; color: var(--muted); }
  .funding-table td input { flex: 1 1 50%; min-width: 0; }
  .funding-table .calc { padding-top: 6px; }
  .cell-note { flex: 1 1 100%; margin: 0; }
  .funding-table tfoot tr { background: var(--bg); }
}

/* Plan und Ist je Projektjahr: eine kleine Tabelle je Jahr (Angabe, Plan, Ist), nebeneinander wo Platz ist */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.year-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px 6px; min-width: 0; background: var(--surface); }
.year-card .table-wrap { margin: 0; }
.year-table { width: 100%; table-layout: fixed; }
.year-table caption { text-align: left; font-size: 1rem; color: var(--text); padding: 0 0 8px; }
.year-table caption .th-help { display: inline; margin-left: 8px; }
.year-table th, .year-table td { vertical-align: top; padding: 6px 6px; }
.year-table thead th { white-space: normal; }
.year-table tbody th, .year-table tfoot th { font-size: 0.88rem; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 600; white-space: normal; width: 34%; }
.year-table td input { width: 100%; min-width: 0; text-align: right; }
.year-table td input:not([type=checkbox]):not([type=radio]) { padding-left: 8px; padding-right: 8px; font-size: 0.92rem; }
.year-table .error { text-align: right; font-size: 0.8rem; }
.year-table tfoot td, .year-table tfoot th { border-top: 1px solid var(--line); border-bottom: 0; background: none; }
.year-table tfoot .calc-row:first-child th, .year-table tfoot .calc-row:first-child td { border-top: 2px solid var(--line); }
.year-table tfoot output { font-weight: 800; color: var(--blue); }
.year-table tfoot .is-count output { font-size: 1.05rem; }
.pill-source[hidden] { display: none; }
.pill-source[data-source="ist"] { background: var(--success-bg); color: var(--success-text); }
.pill-source[data-source="plan"] { background: var(--badge-muted-bg); color: var(--muted); }
.pill-source { margin-right: 6px; }

.reach-line { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 4px 0 6px; }
.avg-title { font-size: 1rem; margin: 0 0 4px; }
.reach-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 4px 0 8px; }
.reach-tiles .big { font-size: 2rem; }
.table-compact th, .table-compact td { padding-left: 8px; padding-right: 8px; }
.portfolio-table td.num { white-space: nowrap; }
.table-compact td.num { white-space: nowrap; }
.table-compact .group-start { border-left: 1px solid var(--line); }
.table-compact td .pill-source { margin-right: 4px; }

/* Fußleiste: bleibt am unteren Rand sichtbar, mit Speicherstand links und dem nächsten Schritt rechts */
.wizard-form { display: flex; flex-direction: column; gap: 16px; }
.wizard-footer { position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; background: var(--surface); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(30, 95, 130, 0.16), 0 0 0 1px var(--line); }
.wizard-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.wizard-buttons .btn { min-height: 40px; padding: 0 14px; font-size: 0.9rem; }
.btn-back { order: 1; }
.btn-later { order: 2; }
.btn-save { order: 3; }
.btn-next { order: 4; }
.save-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.save-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--greyblue); }
.save-status.is-saving .save-dot { background: var(--blue); animation: save-pulse 1s ease-in-out infinite; }
.save-status.is-saved { color: var(--success-text); }
.save-status.is-saved .save-dot { background: var(--success-text); }
.save-status.is-attention { color: var(--badge-text); }
.save-status.is-attention .save-dot { background: var(--badge-text); }
.save-status.is-error { color: var(--error); }
.save-status.is-error .save-dot { background: var(--error); }
@keyframes save-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .save-status.is-saving .save-dot { animation: none; } .stepper .step > a { transition: none; } }
@media (max-width: 767px) {
  .wizard-footer { bottom: 8px; padding: 10px 12px; }
  .wizard-buttons { width: 100%; }
  .btn-next { order: 0; }
  .wizard-buttons .btn { flex: 1 1 0; padding: 0 8px; }
  .wizard-buttons .btn-next { flex: 1 1 100%; }
  .wide-only { display: none; }
  .save-status { font-size: 0.85rem; }
}

/* Checkliste neben dem Formular */
.check-list { margin: 8px 0; }
.check-all { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-weight: 600; color: var(--success-text); }
.check-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--success-bg); }
.check-icon svg { width: 16px; height: 16px; }

/* Projektseite (UX S5) */
.year-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.year-switch a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue); text-decoration: none; font-weight: 600; background: var(--surface); }
.year-switch .ys-label { white-space: nowrap; }
.year-switch a { flex-wrap: wrap; }
.year-switch a:hover { background: var(--blue-soft); }
.year-switch a[aria-current] { background: var(--blue); color: #fff; }
.year-switch a[aria-current] .pill { background: #fff; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
/* Bearbeiten-Links: kein Unterstrich, als dezente Schaltfläche; der Hover färbt die Fläche */
.edit-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; color: var(--blue); font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.edit-link:hover { background: var(--blue-soft); }
.facts { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 6px 16px; margin: 0; }
.facts dt { font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 767px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 8px; } }
.table .is-selected td, .table .is-selected th { background: var(--blue-soft); }
.status-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-weight: 600; }
/* Hinweis auf den Entwurf: Text links, Schaltfläche rechts; schmal untereinander */
.setup-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--radius); background: var(--peach-soft); border-left: 6px solid var(--red); box-shadow: var(--shadow); }
.setup-banner > div { flex: 1 1 320px; }
.setup-banner h2 { color: var(--badge-text); margin: 0 0 2px; font-size: 1.05rem; }
.setup-banner p { margin: 0; color: var(--text); }
.setup-banner .btn { flex: none; }
@media (max-width: 767px) { .tabs { overflow-x: auto; scrollbar-width: none; } .tab { white-space: nowrap; } }

/* ===== Bewertung (UX S6, K3, K4) ===== */
.version-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.version-line .save-status:not(:empty)::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--greyblue); }
.version-line .save-status.is-saving::before { background: var(--blue); animation: save-pulse 1s ease-in-out infinite; }
.version-line .save-status.is-saved::before { background: var(--success-text); }
.version-line .save-status.is-error::before { background: var(--error); }
@media (prefers-reduced-motion: reduce) { .version-line .save-status.is-saving::before { animation: none; } }

.area-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.area-tabs[hidden] { display: none; }
.area-tabs [role=tab] { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--blue); background: var(--surface); color: var(--blue); font: 600 0.95rem var(--font); cursor: pointer; }
.area-tabs [role=tab]:hover { background: var(--blue-soft); }
.area-tabs [role=tab][aria-selected=true] { background: var(--blue); color: #fff; }
.tab-count { font-weight: 500; opacity: 0.85; }
.area-panel { display: flex; flex-direction: column; gap: 16px; }
.area-panel[hidden] { display: none; }
.area-panel > h2 { margin: 4px 0 0; }

.criterion fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.criterion legend { float: left; width: 100%; font-size: 1.1rem; font-weight: 700; color: var(--text); padding: 0; margin: 0 0 4px; scroll-margin-top: 80px; }
.criterion legend + * { clear: both; }
.criterion { scroll-margin-top: 80px; }
.criterion h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--text); }
.crit-key { color: var(--blue); font-weight: 800; margin-right: 6px; }
.statement { margin: 6px 0 14px; }
.field-label { font-weight: 700; }
.crit-state { display: inline-block; margin: 0 0 4px; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--badge-muted-bg); color: var(--muted); }
.crit-state[data-state=beantwortet] { background: var(--success-bg); color: var(--success-text); }
.crit-state[data-state=na] { background: var(--blue-soft); color: var(--blue); }
.crit-state[data-state=na_open] { background: var(--peach-soft); color: var(--badge-text); box-shadow: inset 0 0 0 1px var(--red); }
.crit-state:empty { display: none; }
.criterion:has(.crit-state[data-state=na_open]) { box-shadow: inset 4px 0 0 var(--red), var(--shadow); }

/* Antwortkarten: echte Radioknöpfe, optisch versteckt, aber per Tastatur erreichbar; die ganze Karte ist die Fläche */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.answer-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 14px 42px 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.answer-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.answer-card::before { content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-input); background: #fff center / 13px no-repeat; transition: background-color 0.15s ease, border-color 0.15s ease; }
.answer-card:hover { border-color: var(--blue); background: var(--blue-soft); }
.answer-card:hover::before { border-color: var(--blue); }
.answer-card:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.answer-card:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.answer-card:has(input:checked)::before { border-color: var(--blue); background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.card-label { font-weight: 700; overflow-wrap: anywhere; hyphens: auto; }
.card-text { font-size: 0.9rem; color: var(--muted); }
.card-points { margin-top: auto; align-self: flex-end; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.card-na { grid-column: 1 / -1; min-height: 56px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding-top: 10px; padding-bottom: 10px; border-style: dashed; }
.card-na::before { top: 50%; margin-top: -11px; }
@media (prefers-reduced-motion: reduce) { .answer-card, .answer-card::before { transition: none; } }

/* n. a.: Begründung erscheint ohne JavaScript; fehlt sie, bleibt das Kriterium offen und das steht sichtbar da */
.na-reason { display: none; margin: 12px 0 0; }
.criterion:has(input[value=na]:checked) .na-reason { display: block; }
.na-missing { display: none; margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--peach-soft); color: var(--badge-text); font-weight: 600; }
.na-reason:has(textarea:placeholder-shown) .na-missing { display: block; }
.na-reason:has(textarea:placeholder-shown) textarea { border-color: var(--red); }

.tip summary { cursor: pointer; font-weight: 600; color: var(--blue); margin-top: 12px; min-height: 32px; }
.tip p { margin: 6px 0 0; }
.internal-note { border-radius: var(--radius-sm); }
.internal-note[open] { background: var(--peach-soft); padding: 0 12px 4px; }
.internal-note[open] summary { margin-bottom: 4px; }
.internal-note-shown { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--peach-soft); }
.answer-shown { margin: 0 0 8px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--blue-soft); }
.criterion-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.criterion:not(:has(input[type=radio]:checked)) .btn-remove { display: none; }
.js .save-fallback { display: none; }
.criterion.is-saving { box-shadow: inset 4px 0 0 var(--greyblue), var(--shadow); }
.criterion.is-error { box-shadow: inset 4px 0 0 var(--error), var(--shadow); }
.criterion.is-flash { box-shadow: 0 0 0 3px var(--blue); }
@media (prefers-reduced-motion: no-preference) { .criterion { transition: box-shadow 0.3s ease; } }
.criterion.is-off { border: 1px dashed var(--border-soft); box-shadow: none; }
.off-list summary { cursor: pointer; color: var(--muted); font-weight: 600; min-height: 32px; }
.off-list .criterion { margin-top: 8px; }

/* Zwischenstand: rechte Spalte und, wo sie unter dem Inhalt steht, eine kompakte Leiste, die oben klebt */
.interim.is-busy [data-score] { opacity: 0.5; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 10px 0; }
.bar-row .bar { grid-column: 1 / -1; }
.bar { display: block; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; }
.bar-track { fill: var(--line); }
.bar-fill { fill: var(--blue); }
.progress { width: 100%; height: 10px; accent-color: var(--blue); }
.progress.is-done { accent-color: var(--success-text); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.side-row { margin: 8px 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg); }
.side-row p { margin: 0; }
.open-jumps a { display: inline-block; min-width: 32px; text-align: center; padding: 2px 6px; border-radius: 8px; background: var(--blue-soft); font-weight: 700; text-decoration: none; }
.open-jumps a:hover { background: var(--blue); color: #fff; }
.status-row { margin: 10px 0 0; }
.score-strip { display: none; }
@media (max-width: 1279px) {
  .score-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; position: sticky; top: 8px; z-index: 4; padding: 8px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 18px rgba(30, 95, 130, 0.16), 0 0 0 1px var(--line); font-size: 0.9rem; }
  .strip-score strong { font-size: 1.25rem; color: var(--blue); }
  .strip-label { color: var(--muted); }
}
@media (max-width: 767px) { .score-strip { top: 72px; } }

/* Zeile der Projektjahre auf der Projektseite: die Aktion steht dezent daneben */
.row-action { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.start-form { margin-top: 12px; }
@media (max-width: 479px) { .cards { grid-template-columns: 1fr; } .answer-card { min-height: 64px; } .card-points { margin-top: 0; } }

/* Ergebnis (UX S7, K4, K6): alles als Server-SVG, Werte stehen zusätzlich als Text daneben */
.result-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.result-grid > .panel { grid-column: span 6; }
.result-grid > .tile-score { grid-column: span 8; }
.result-grid > .tile-matrix { grid-column: span 4; grid-row: span 2; }
.result-grid > .tile-dims { grid-column: span 8; }
.result-grid > .tile-dims.tile-dims-full { grid-column: span 8; }
.result-grid > .tile-side { grid-column: span 4; }
.result-grid > .tile-wide { grid-column: 1 / -1; }
@media (max-width: 1279px) {
  .result-grid > .panel, .result-grid > .tile-score, .result-grid > .tile-matrix, .result-grid > .tile-dims,
  .result-grid > .tile-dims.tile-dims-full, .result-grid > .tile-side { grid-column: 1 / -1; grid-row: auto; }
}
.score-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 8px; }
.score-hero { background: var(--blue); color: #fff; border-radius: var(--radius); padding: 16px; flex: none; }
.score-hero .ring-wrap { margin: 0; }
.score-hero .ring-number { color: #fff; font-variant-numeric: tabular-nums; }
.score-meta { min-width: 0; flex: 1 1 220px; }
.score-meta p { margin: 0 0 6px; }
.bar-stacked { height: 16px; margin: 8px 0 4px; border-radius: 999px; overflow: hidden; } /* Rundung per CSS: rx im gestreckten SVG gäbe Ellipsen */
.share-first { fill: var(--share-social); }
.share-second { fill: var(--share-strategic); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--muted); margin: 4px 0 10px; }
.legend-first::before, .legend-second::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; background: var(--share-social); }
.legend-second::before { background: var(--share-strategic); }
.scale { display: block; width: 100%; height: 20px; }
.zone { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cat-zone-0 { fill: var(--cat-4-tint); } .cat-zone-1 { fill: var(--cat-3-tint); } .cat-zone-2 { fill: var(--cat-2-tint); } .cat-zone-3 { fill: var(--cat-1-tint); }
.cat-text-0 { fill: var(--cat-4-text); } .cat-text-1 { fill: var(--cat-3-mark); } .cat-text-2 { fill: var(--cat-2-mark); } .cat-text-3 { fill: var(--cat-1-mark); }
.scale-mark { fill: var(--text); }
.matrix { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 8px; }
.zone-label { font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.04em; }
.tick { font: 500 12px var(--font); fill: var(--muted); }
.axis-title { font: 700 12px var(--font); fill: var(--text); }
.point { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.point.is-kh { stroke: var(--kh-ring); stroke-width: 3; }
.point-label { font: 600 12px var(--font); fill: var(--text); }
.tile-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-content: start; }
.tile-dims > h2 { grid-column: 1 / -1; }
.dim-row h3 { font-size: 1rem; margin: 0; color: var(--text); }
.dim-row .big { color: var(--blue); }
.dim-row .bar { margin: 6px 0; }
@media (max-width: 767px) { .tile-dims { grid-template-columns: 1fr; } }
.levers { counter-reset: none; }
.levers li { gap: 4px 16px; flex-wrap: nowrap; align-items: flex-start; }
.lever-gain { flex: none; width: 80px; font-size: 1.5rem; font-weight: 800; color: var(--blue); display: flex; flex-direction: column; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lever-text { min-width: 0; }
.lever-text a { font-weight: 700; }
.score-info { margin-top: 8px; }
.score-info summary { cursor: pointer; font-weight: 600; color: var(--blue); min-height: 32px; }
.score-info ul { margin: 8px 0 0; padding-left: 1.2rem; }
.score-graphic { max-width: 100%; height: auto; }
.table caption { text-align: left; font-weight: 700; color: var(--blue); padding: 8px 10px; }
.table tbody th[scope=row] { text-align: left; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 600; padding: 12px 10px; }
.kpi-placeholder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kpi-placeholder h3 { font-size: 1rem; margin: 0 0 6px; }
.result-foot { margin: 0; }
.confirm { max-width: 720px; }
.confirm .msg p { margin: 0 0 8px; }
.confirm .msg p:last-child { margin-bottom: 0; }
.confirm .open-jumps { display: flex; flex-wrap: wrap; gap: 6px; }

/* Konfiguration (UX S10): Gewichte und Schalter je Kriterium, Vorschau, Versionsliste */
.source { font-size: 1.15rem; font-weight: 800; color: var(--blue); margin: 0 0 4px; }
.changes { margin: 0 0 12px; padding-left: 1.2rem; }
.changes li { margin-bottom: 4px; }
.preview h3 { font-size: 1rem; margin: 16px 0 6px; }
.preview .msg { margin-bottom: 8px; }
.versions { display: flex; flex-direction: column; gap: 2px; }
/* Versionszeilen: die ganze Zeile klappt auf, Pfeil rechts wie bei den Verweislisten */
.version { border-bottom: 1px solid var(--line); border-radius: var(--radius-sm); }
.version:last-child { border-bottom: 0; }
.version > summary { list-style: none; cursor: pointer; position: relative; min-height: 48px; padding: 8px 40px 8px 10px; border-radius: var(--radius-sm); display: flex; align-items: center; transition: background-color 0.15s ease; }
.version > summary::-webkit-details-marker { display: none; }
.version > summary:hover { background: var(--blue-soft); }
.version > summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--muted);
                            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
                            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
                            transition: transform 0.15s ease, background-color 0.15s ease; }
.version[open] > summary::after { transform: rotate(90deg); background: var(--blue); }
.version > summary:hover::after { background: var(--blue); }
.version-body { padding: 4px 10px 14px; }
.version-body p { margin: 0 0 8px; }
.version-body .changes { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .version > summary, .version > summary::after { transition: none; } }

/* Portfolio (UX S8): Tabelle als Textfassung der Diagramme. Schmal wird jede Zeile eine Karte. */
.portfolio-table .is-old td { background: var(--badge-muted-bg); }
.portfolio-table td { vertical-align: top; }
.portfolio-table .cell-title { min-width: 180px; }
@media (max-width: 767px) {
  .portfolio-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .portfolio-table, .portfolio-table tbody, .portfolio-table tr, .portfolio-table td { display: block; }
  .portfolio-table tbody tr { padding: 12px 36px 12px 12px; margin-bottom: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); }
  .portfolio-table tbody tr:hover { background: var(--blue-soft); }
  .portfolio-table td, .portfolio-table tbody tr:hover td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; background: transparent; text-align: right; }
  .portfolio-table td::before { content: attr(data-label); font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: left; flex: none; }
  .portfolio-table td.cell-title { display: block; text-align: left; min-width: 0; padding-bottom: 8px; }
  .portfolio-table td.cell-title::before, .portfolio-table td[data-label="Rang"]::before { display: none; }
  .portfolio-table td[data-label="Rang"] { position: absolute; top: 12px; right: 12px; width: auto; padding: 0; font-weight: 700; color: var(--muted); }
  .portfolio-table td.col-go { position: absolute; top: 50%; right: 8px; width: auto; padding: 0; transform: translateY(-50%); }
  .portfolio-table td.col-go::before { display: none; }
}

/* Portfolio: Steuerung (GET-Formular, geht ohne JavaScript) und Diagramme */
.controls-box > summary { cursor: pointer; font-weight: 700; color: var(--blue); min-height: 32px; display: flex; align-items: center; gap: 10px; }
.controls-box[open] > summary { margin-bottom: 12px; }
.portfolio-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.portfolio-controls fieldset { margin: 0; }
.portfolio-controls legend { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0; margin: 0 0 4px; float: none; }
.portfolio-controls .segmented { display: flex; flex-wrap: wrap; border: 0; border-radius: 0; overflow: visible; background: none; }
.portfolio-controls .segmented label { border: 1px solid var(--blue); margin-left: -1px; }
.portfolio-controls .segmented label:first-of-type { border-radius: 999px 0 0 999px; margin-left: 0; }
.portfolio-controls .segmented label:last-of-type { border-radius: 0 999px 999px 0; }
.portfolio-controls .segmented input[disabled] + * , .portfolio-controls .segmented label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-soft); border-radius: 999px; cursor: pointer; background: var(--surface); }
.chip:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.chip:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.controls-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.portfolio-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } /* Matrix und Rangliste untereinander, volle Breite */
.portfolio-charts .matrix { max-width: 640px; }
.chart-scroll { overflow-x: auto; }
.ranking { display: block; width: 100%; height: auto; }
.rank-label, .rank-score { font: 600 13px var(--font); fill: var(--text); }
.rank-label.is-kh { fill: var(--red); }
.rank-row rect { transition: opacity 0.15s ease; }
.ranking a:hover .rank-row rect, .ranking a:focus-visible .rank-row rect { opacity: 0.8; }
.ranking a:focus-visible { outline: none; }
.ranking a:focus-visible .rank-row .rank-label, .ranking a:hover .rank-row .rank-label { text-decoration: underline; }
.color-legend { list-style: none; padding: 0; margin: 4px 0; }
.color-legend li { display: inline-flex; align-items: center; gap: 6px; }
.point { fill-opacity: 0.88; }
.matrix a:hover .point, .matrix a:focus-visible .point { fill-opacity: 1; stroke: var(--text); }
.matrix a:focus-visible { outline: none; }
.point-label { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
@media (max-width: 767px) {
  .portfolio-controls { align-items: stretch; }
  .portfolio-controls .segmented label { padding: 0 10px; font-size: 0.9rem; }
  .controls-actions { margin-left: 0; width: 100%; }
  .ranking { min-width: 560px; }
  .matrix .tick { font-size: 15px; }
  .matrix .axis-title { font-size: 15px; }
  .matrix .zone-label { font-size: 13px; }
  .matrix .point-label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .rank-row rect { transition: none; } }
.ranking .zone-label { font-size: 9.5px; letter-spacing: 0.02em; }
.controls-box > summary { list-style: none; }
.controls-box > summary::-webkit-details-marker { display: none; }
.controls-box > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease; }
.controls-box[open] > summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .controls-box > summary::after { transition: none; } }
.empty { column-gap: 0.3em; }

/* Eigene Kennzahlen: Karte je Kennzahl im Assistenten, Ansicht auf Projektseite und Ergebnis */
.kpi-list { display: grid; gap: 16px; margin-bottom: 16px; }
.kpi-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px 8px; background: var(--surface); min-width: 0; }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kpi-title { margin: 0; font-weight: 800; color: var(--text); }
.btn-small { min-height: 36px; padding: 0 14px; font-size: 0.88rem; }
.kpi-fields { margin-bottom: 8px; }
.kpi-table th, .kpi-table td { vertical-align: middle; }
.kpi-table tbody th .th-help { display: block; font-weight: 500; }
.kpi-table thead th:first-child { width: 22%; }
.kpi-table output { font-weight: 800; color: var(--blue); }
.kpi-new { border: 1px dashed var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.kpi-new h4 { margin: 0 0 8px; font-size: 0.95rem; }
.kpi-view + .kpi-view { margin-top: 16px; }
.kpi-view h3 { margin: 0 0 4px; font-size: 1rem; }
.kpi-view-table th[scope=row] { text-transform: none; letter-spacing: 0; font-size: 0.88rem; color: var(--text); font-weight: 600; }
.kpi-view-table .th-help { display: inline; margin-left: 6px; font-weight: 500; color: var(--muted); }
.att { white-space: nowrap; }
.att-bar { display: inline-block; width: 90px; vertical-align: middle; margin-right: 8px; }
.att-bar svg.bar { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; }
.kpi-result { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kpi-result li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(120px, 1fr); gap: 4px 16px; align-items: center; }
.kpi-result .kpi-name { font-weight: 700; margin: 0; }
.kpi-result .kpi-vals { margin: 0; color: var(--muted); font-size: 0.9rem; }
.kpi-result .att-bar { width: 100%; margin: 0 0 2px; }
.kpi-result .att-val { font-weight: 800; color: var(--blue); }
@media (max-width: 767px) {
  .kpi-head { align-items: flex-start; }
  .kpi-result li { grid-template-columns: 1fr; }
}
.kpi-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 767px) { .kpi-fields { grid-template-columns: 1fr; } }
.kpi-view-table tbody tr:last-child th { border-bottom: 0; }
.kpi-view-table tbody tr:last-child th { border-bottom: 0; }

/* Reiter „Texte“ der Konfiguration: aufklappbare Zeile je Kriterium */
.text-group { margin: 0 0 24px; }
.text-group h2 { font-size: 1rem; margin: 0 0 8px; color: var(--blue); }
.text-rows { display: grid; gap: 4px; }
.text-row { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); }
.text-row > summary { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-height: 48px; padding: 8px 14px; cursor: pointer; list-style: none; border-radius: var(--radius-sm); transition: background-color 0.15s ease; }
.text-row > summary::-webkit-details-marker { display: none; }
.text-row > summary:hover { background: var(--blue-soft); }
.text-row > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.tr-key { font-weight: 800; color: var(--blue); min-width: 2.2rem; }
.tr-name { flex: 1 1 12rem; min-width: 0; font-weight: 600; }
.tr-chevron { margin-left: auto; color: var(--muted); display: inline-flex; }
.tr-chevron svg { display: block; width: 18px; height: 18px; transition: transform 0.15s ease; }
.text-row[open] > summary .tr-chevron svg { transform: rotate(90deg); }
.text-row[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.text-row-body { padding: 12px 14px 14px; display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.text-row-body .field:first-child, .text-row-body .field:nth-child(2), .text-row-body > .btn { grid-column: 1 / -1; }
.text-row-body textarea { width: 100%; min-height: 3.2rem; resize: vertical; }
.text-row-body .btn { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .text-row > summary, .tr-chevron svg { transition: none; } }
.narrow-only { display: none; }
@media (max-width: 767px) {
  .narrow-only { display: inline; }
  .kpi-table thead th { font-size: 0.68rem; letter-spacing: 0; padding-left: 4px; padding-right: 4px; }
  .kpi-table th, .kpi-table td { padding-left: 4px; padding-right: 4px; }
  .kpi-table thead th:first-child { width: 14%; }
  .kpi-table thead th:nth-child(2), .kpi-table thead th:nth-child(3) { width: 31%; }
  .kpi-table thead th:last-child { width: 24%; }
  .kpi-table tbody th .th-help { display: none; }
}

/* ===== Nächster Schritt als großer Knopf ===== */
.next-banner { background: var(--blue-soft); border-left-color: var(--blue); }
.next-banner h2 { color: var(--blue); }
.btn-large { min-height: 52px; padding: 0 28px; font-size: 1.05rem; }

/* ===== Kategorien mit Namen (Gesamtbewertung, Ausgewogenheit) ===== */
.cat-pair { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cat-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cat-label { font-size: 0.75rem; font-weight: 500; color: var(--muted); min-width: 7em; cursor: help; }

/* ===== Kundenliste: ein Stand, nächster Schritt ===== */
.nowrap { white-space: nowrap; }
.mark-approved { display: inline-flex; vertical-align: middle; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--success-bg); color: var(--success-text); cursor: help; }
.mark-approved svg { width: 100%; height: 100%; }
.table-nav .next-link { position: relative; z-index: 1; font-weight: 600; white-space: nowrap; }
.btn.sr-only { min-height: 0; }

/* ===== Hinweis „Ist unvollständig“ (gelb, nur Hinweis, ändert keine Rechnung) ===== */
.note-ist { margin: 10px 0 8px; padding: 10px 14px; border-radius: var(--radius-sm); background: #fff4d6; border-left: 4px solid #c98a00; color: #5c4100; font-size: 0.9rem; } /* 8,1:1 */
.note-ist[hidden] { display: none; }

/* Schmale Bildschirme: Beschriftungen im Assistenten brechen um, statt abgeschnitten zu werden */
@media (max-width: 479px) {
  .year-table.kpi-table tbody th, .year-table.kpi-table tfoot th { width: 40%; font-size: 0.8rem; overflow-wrap: anywhere; hyphens: auto; padding-left: 2px; padding-right: 4px; }
  .year-table.kpi-table td { padding-left: 3px; padding-right: 3px; }
  .year-table.kpi-table td input:not([type=checkbox]):not([type=radio]) { padding-left: 6px; padding-right: 6px; font-size: 0.88rem; }
}
/* Plan und Ist je Projektjahr auf dem Telefon: Die Beschriftung steht über den Feldern in voller Breite (kein Umbruch mitten im
   Wort), darunter Plan und Ist nebeneinander mit eigener Beschriftung. Wörter trennt der Browser bei Bedarf (lang="de"). */
@media (max-width: 767px) {
  .year-table:not(.kpi-table), .year-table:not(.kpi-table) tbody, .year-table:not(.kpi-table) tfoot { display: block; }
  .year-table:not(.kpi-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .year-table:not(.kpi-table) caption { display: block; }
  .year-table:not(.kpi-table) tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .year-table:not(.kpi-table) tbody tr:last-child, .year-table:not(.kpi-table) tfoot tr:last-child { border-bottom: 0; }
  .year-table:not(.kpi-table) tbody th, .year-table:not(.kpi-table) tfoot th { grid-column: 1 / -1; width: auto; padding: 0 0 4px; border: 0; font-size: 0.92rem; overflow-wrap: break-word; hyphens: auto; }
  .year-table:not(.kpi-table) td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  .year-table:not(.kpi-table) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .year-table:not(.kpi-table) td[colspan] { grid-column: 1 / -1; }
  .year-table:not(.kpi-table) tfoot tr { background: none; }
  .year-table:not(.kpi-table) tfoot .calc-row:first-child th, .year-table:not(.kpi-table) tfoot .calc-row:first-child td { border-top: 0; }
  .year-table:not(.kpi-table) tfoot tr:first-child { border-top: 2px solid var(--line); }
}

/* Bewertungsseite: Tastenhinweis nur mit JavaScript (nur dann gibt es die Tasten), Knopf am Ende des Bereichs */
.js-only { display: none; }
.js .js-only { display: block; }
.keys-tip { margin: 0; }
.area-next { display: flex; justify-content: flex-end; margin: 16px 0 0; }
/* Hinweis nach dem letzten Kriterium eines Bereichs: bleibt am unteren Rand sichtbar, bis man ihn nutzt */
.flow-hint { position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; background: var(--surface); border-radius: var(--radius); border-left: 4px solid var(--red); box-shadow: 0 8px 24px rgba(30, 95, 130, 0.16), 0 0 0 1px var(--line); }
.flow-hint[hidden] { display: none; }
.flow-text { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .flow-hint:not([hidden]) { animation: flow-in 0.25s ease-out; } }
@keyframes flow-in { from { opacity: 0; transform: translateY(8px); } }

/* Ziele von Ankern (z. B. #id_partner) sitzen nicht ganz oben am Rand des Scrollbereichs */
.app .field, .app .form-section { scroll-margin-top: 24px; }

/* Schritt „Kennzahlen“: Karte je Kennzahl mit Kennung, Hinweis „So wird gemessen“, Gesamtziel und Zusammenfassung */
.kpi-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.kpi-code { display: inline-block; flex: none; padding: 1px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; }
.kpi-card.is-reserved { border-color: var(--greyblue); }
.kpi-hint { margin: 0 0 10px; color: var(--muted); font-size: 0.88rem; }
.kpi-hint-label { font-weight: 700; color: var(--text); margin-right: 6px; }
.kpi-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .kpi-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .kpi-fields { grid-template-columns: 1fr; } }
.kpi-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 20px; align-items: end; margin: 10px 0 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--blue-soft); }
.kpi-summary .eyebrow { margin: 0 0 2px; }
.kpi-sum-value { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 1.25rem; font-weight: 800; color: var(--blue); }
.kpi-sum-value output { font-weight: 800; }
.kpi-summary .att-bar { width: 110px; margin: 0; }
.btn-add-kpi { margin: 4px 0 6px; }
.reach-text { margin: 4px 0 8px; font-weight: 600; }
.kpi-result .kpi-total { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.kpi-result .kpi-code, .kpi-view .kpi-code { font-size: 0.72rem; padding: 0 8px; }
.kpi-view-table + .kpi-view-table { margin-top: 8px; }
.kpi-result .kpi-total .att-bar { width: 90px; margin: 0 8px 0 0; }
.kpi-result .kpi-total { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }

/* Finanzierungsfelder je Kunde: feste Felder als ruhige Chips, eigene Felder als Zeilen; abgeschaltete treten zurück */
.chip-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-weight: 600; font-size: 0.9rem; }
.ff-list > li { border-bottom: 1px solid var(--line); }
.ff-list > li:last-child { border-bottom: 0; }
.ff-list .is-off input[name=name] { color: var(--muted); }
.ff-row { gap: 10px; }
.ff-count { flex: 1 1 auto; min-width: 120px; }
.ff-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.year-table .row-extra th { font-weight: 600; }

/* Projektverlauf: Zeitleiste mit senkrechter Linie und Punkten; jede Karte ist als Ganzes zum Bearbeiten klickbar */
.notes-timeline { list-style: none; margin: 18px 0 14px; padding: 0; }
.note-item { position: relative; padding: 0 0 14px 34px; }
.note-item::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: -6px; width: 2px; background: var(--line); }
.note-item:last-child { padding-bottom: 0; }
.note-item:last-child::before { display: none; }
.note-dot { position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid #a9b4bd; box-sizing: border-box; }
.note-item.is-public .note-dot { border-color: var(--blue); background: var(--blue-soft); }
.note-card { position: relative; padding: 12px 48px 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: background-color 0.15s ease, border-color 0.15s ease; }
.note-card:hover, .note-card:has(.row-link:focus-visible) { background: var(--blue-soft); border-color: transparent; }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.note-title { margin: 0 0 4px; font-size: 1.02rem; }
.note-text { margin: 0; color: var(--text); }
.note-go { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); transition: transform 0.15s ease, color 0.15s ease; }
.note-go svg { display: block; width: 18px; height: 18px; }
.note-card:hover .note-go, .note-card:has(.row-link:focus-visible) .note-go { color: var(--blue); transform: translateX(2px); }
.note-visibility { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .note-card, .note-go { transition: none; }
  .note-card:hover .note-go, .note-card:has(.row-link:focus-visible) .note-go { transform: none; }
}
@media (max-width: 480px) {
  .note-item { padding-left: 28px; }
  .note-card { padding-right: 40px; }
}
.section-head .btn { flex: none; white-space: nowrap; }

/* ===== Cockpit (Startseite) =====
   Ruhig im s4I-Stil: ein blauer Kopf mit Gruß und Schnellaktionen, große Aufgabenkarten (die erste ist hervorgehoben:
   „das ist als Nächstes dran“), Wirkung mit Mini-Matrix, Hinweise rechts. Bewegung nur als sanftes Einblenden. */
.hero { position: relative; border-radius: var(--radius); padding: 28px 28px 24px; color: #fff; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 24px;
        background: radial-gradient(120% 140% at 100% 0%, rgba(230, 185, 160, 0.38) 0%, rgba(230, 185, 160, 0) 55%), linear-gradient(135deg, #1b5776 0%, #1e5f82 45%, #2a7499 100%);
        box-shadow: 0 10px 28px rgba(30, 95, 130, 0.22); }
.hero-text { min-width: 0; }
.hero-date { margin: 0 0 6px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #d4e4ee; }
.hero h1 { color: #fff; font-size: 2.1rem; }
.hero-sentence { margin: 8px 0 0; font-size: 1.1rem; font-weight: 500; color: #eaf2f7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 600 0.92rem var(--font); color: #fff; text-decoration: none; cursor: pointer; list-style: none;
            background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.34); transition: background-color 0.15s ease; }
.hero-btn::-webkit-details-marker { display: none; }
.hero-btn svg { width: 18px; height: 18px; flex: none; }
.hero-btn:hover { background: rgba(255, 255, 255, 0.26); }
.hero-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero-menu { position: relative; }
.hero-menu .menu-list { right: auto; left: 0; min-width: 220px; max-height: 280px; overflow-y: auto; }

.cp-section { display: flex; flex-direction: column; gap: 10px; }
.cp-title { margin: 0 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.task-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.task-card { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30, 95, 130, 0.12); }
.task-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); }
.task-icon svg { width: 22px; height: 22px; }
.task-count { margin: 10px 0 0; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--blue); font-variant-numeric: tabular-nums; }
.task-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.task-text { margin: 0; color: var(--muted); font-size: 0.92rem; }
.task-sample { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); overflow-wrap: anywhere; }
.task-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 18px; border-radius: 999px; font: 600 0.92rem var(--font); text-decoration: none;
            background: var(--blue-soft); color: var(--blue); transition: background-color 0.15s ease; }
.task-card .task-btn { margin-top: auto; }
.task-card .task-sample + .task-btn, .task-card .task-text + .task-btn { margin-top: 14px; }
.task-btn svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.task-btn:hover svg { transform: translateX(2px); }
.task-btn:hover { background: #d7e5ee; }
.task-card.is-first { background: var(--blue); color: #fff; box-shadow: 0 10px 26px rgba(30, 95, 130, 0.28); }
.task-card.is-first .task-icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.task-card.is-first .task-count, .task-card.is-first .task-title { color: #fff; }
.task-card.is-first .task-text, .task-card.is-first .task-sample { color: #dbe8f0; }
.task-card.is-first .task-btn { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(215, 40, 80, 0.3); }
.task-card.is-first .task-btn:hover { background: #c4234a; }
.task-card.is-first :focus-visible { outline-color: #fff; }
.all-done { display: flex; align-items: center; gap: 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.all-done p { margin: 0; }
.all-done-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--success-bg); color: var(--success-text); }
.all-done-icon svg { width: 26px; height: 26px; }
.all-done-title { font-size: 1.25rem; font-weight: 800; color: var(--success-text); }

.impact-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.impact-head h2 { margin: 0; }
.text-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-weight: 600; text-decoration: none; }
.text-link svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.text-link:hover svg { transform: translateX(2px); }
.impact-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 250px); gap: 20px 28px; align-items: center; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.stat { background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; min-width: 0; }
.stat dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stat dd { margin: 0; }
.stat dd:not(.stat-sub) { margin-top: 4px; font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--blue); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-sub { margin-top: 2px; font-size: 0.8rem; color: var(--muted); }
.mini-matrix { margin: 0; text-align: center; }
.mini-matrix .matrix { max-width: 250px; margin-bottom: 6px; }
.mini-matrix .tick, .mini-matrix .zone-label, .mini-matrix .axis-title { display: none; }
.mini-matrix .point { stroke-width: 1.5; }
.mini-matrix .point.is-kh { stroke-width: 2.5; }
.mini-matrix-empty { display: grid; place-items: center; aspect-ratio: 1; max-width: 250px; margin: 0 auto; padding: 20px; border: 2px dashed var(--peach); border-radius: var(--radius); }
.mini-matrix-empty p { margin: 0; }

.recent-list li > a { min-width: 0; }
.recent-when { margin-left: auto; white-space: nowrap; }

.hints h2 { margin-bottom: 12px; }
.hint-list2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hint { position: relative; display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--bg); transition: background-color 0.15s ease; }
.hint:hover, .hint:has(.hint-link:focus-visible) { background: var(--blue-soft); }
.hint-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--peach-soft); color: var(--badge-text); }
.hint-icon svg { width: 19px; height: 19px; }
.hint-body { min-width: 0; }
.hint-text { margin: 0; font-weight: 700; line-height: 1.35; }
.hint-detail { margin: 2px 0 0; font-size: 0.85rem; color: var(--muted); }
.hint-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.hint-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
.hint-link:focus-visible { outline: none; }
.hint-link:focus-visible::after { box-shadow: inset 0 0 0 3px var(--blue); }
.hint-link svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.hint:hover .hint-link svg { transform: translateX(2px); }

@media (prefers-reduced-motion: no-preference) {
  .hero, .task-card, .all-done { animation: cp-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .task-card { animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
}
@keyframes cp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .task-card, .task-btn svg, .text-link svg, .hint-link svg, .hero-btn { transition: none; } .task-card:hover { transform: none; } }

@media (max-width: 767px) {
  .hero { padding: 20px 18px; }
  .hero h1 { font-size: 1.6rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .hero-actions > .hero-btn, .hero-actions > .hero-menu { min-width: 0; }
  .hero-btn { width: 100%; padding: 0 12px; font-size: 0.88rem; }
  .hero-menu .menu-list { min-width: 200px; }
  .task-count { font-size: 2.4rem; }
  .impact-body { grid-template-columns: 1fr; }
  .stat dd:not(.stat-sub) { font-size: 1.4rem; white-space: nowrap; }
  .recent-when { margin-left: 0; flex-basis: 100%; }
}

/* ===== Konfiguration: Kriterien als Karten (Schalter „zählt“, Gewicht als Segmente, „Zählt bei“ als Pillen) =====
   Ohne Skript bleiben Zahlenfeld und Kästchen; das Skript (kriterien.js) setzt Schalter und Segmente darüber. */
.config-form { display: flex; flex-direction: column; gap: 16px; }
.config-intro { margin: 0 4px; color: var(--muted); max-width: 70ch; }
.crit-group-head { margin-bottom: 12px; }
.crit-group-head h2 { margin: 0; font-size: 1.2rem; }
.crit-sum { font-weight: 600; color: var(--muted); }
.crit-group-text { margin: 2px 0 0; font-size: 0.9rem; color: var(--muted); }
.crit-scroll { container-type: inline-size; }
.crit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crit-labels, .crit { display: grid; grid-template-columns: minmax(0, 1fr) 56px 176px 262px; grid-template-areas: "main switch weight counts"; align-items: center; column-gap: 14px; }
.crit-labels { padding: 0 14px 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.crit-labels span:nth-child(2) { text-align: center; }
.crit { padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); transition: background-color 0.2s ease, border-color 0.2s ease; }
.crit-main { grid-area: main; display: flex; align-items: center; gap: 12px; min-width: 0; }
.crit-switch-slot { grid-area: switch; display: flex; justify-content: center; }
.crit-weight { grid-area: weight; min-width: 0; }
.crit-counts { grid-area: counts; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.crit-main .crit-key { flex: none; display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-weight: 800; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.crit-title { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.crit-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.crit-new { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--peach-soft); color: var(--badge-text); font-size: 0.74rem; font-weight: 600; }
.crit-counts-label { display: none; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.crit-warn { flex-basis: 100%; color: var(--badge-text); }

/* ausgeschaltet: ruhig zurückgenommen, aber weiter bedienbar */
.crit.is-off { background: transparent; border-style: dashed; }
.crit.is-off .crit-key { background: var(--badge-muted-bg); color: var(--muted); }
.crit.is-off .crit-name { color: var(--muted); font-weight: 500; }
.crit.is-off .crit-counts { opacity: 0.62; }
.crit.is-off .crit-counts:hover, .crit.is-off .crit-counts:focus-within { opacity: 1; }

/* Gewicht ohne Skript: das Zahlenfeld */
.crit-weight-field label { display: block; margin: 0 0 4px; font-size: 0.8rem; font-weight: 600; }
.crit-weight-field input { width: 84px; text-align: right; }
.crit-weight-field .error { font-size: 0.8rem; }
.has-js .crit:not([data-invalid]) .crit-weight-field { display: none; }

/* Schalter */
.crit-switch { position: relative; display: grid; place-items: center; width: 56px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.crit-switch-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--border-input); transition: background-color 0.2s ease; }
.crit-switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.3, 1); }
.crit-switch[aria-checked="true"] .crit-switch-track { background: var(--blue); }
.crit-switch[aria-checked="true"] .crit-switch-thumb { transform: translateX(18px); }
.crit-switch:hover .crit-switch-track { filter: brightness(0.92); }
.crit-switch:focus-visible { outline: 3px solid var(--blue); outline-offset: -2px; border-radius: 999px; }

/* Gewicht als Segmente */
.crit-seg { display: flex; border: 1px solid var(--blue); border-radius: 999px; overflow: hidden; background: var(--surface); }
.crit-seg[hidden], .crit-off-text[hidden], .config-bar[hidden] { display: none; }
.crit-seg-btn { flex: 1 1 0; min-width: 34px; min-height: 40px; padding: 0 6px; border: 0; background: none; color: var(--blue); font: 700 0.95rem var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.crit-seg-btn + .crit-seg-btn { border-left: 1px solid var(--blue-soft); }
.crit-seg-btn:hover { background: var(--blue-soft); }
.crit-seg-btn.is-selected { background: var(--blue); color: #fff; }
.crit-seg-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.crit-seg-btn.is-selected:focus-visible { outline-color: #fff; }
.crit-off-text { display: block; text-align: center; font-size: 0.85rem; color: var(--muted); }
.crit-weight:not(:has(.crit-seg)) .crit-off-text { display: none; }

/* „Zählt bei“: zwei Pillen, echte Kästchen darin */
.pill-toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 11px; border: 1px solid var(--border-input); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; font-size: 0.86rem; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.pill-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.pill-toggle-text::before { content: ""; display: inline-block; position: relative; top: 1px; width: 0; margin-right: 0; overflow: hidden; transition: width 0.15s ease; }
.pill-toggle:has(input:checked) { background: var(--blue); border-color: var(--blue); color: #fff; }
.pill-toggle:has(input:checked) .pill-toggle-text::before { content: "✓"; width: 1em; margin-right: 5px; font-weight: 800; }
.pill-toggle:hover:not(.is-locked) { border-color: var(--blue); }
.pill-toggle:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.pill-toggle.is-locked { cursor: not-allowed; border-style: dashed; border-color: var(--border-soft); background: transparent; color: var(--muted); }
.pill-toggle.is-locked:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); border-style: solid; color: var(--blue); }
.pill-toggle-lock { display: inline-flex; }
.pill-toggle-lock svg { width: 14px; height: 14px; }

/* Leiste unten: erscheint, sobald sich etwas geändert hat */
.config-bar { position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px 10px 18px; background: var(--surface); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(30, 95, 130, 0.18), 0 0 0 1px var(--line); }
.config-bar-text { margin: 0; }
.has-js .config-actions { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .config-bar:not([hidden]) { animation: cp-rise 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .crit, .crit-switch-track, .crit-switch-thumb, .crit-seg-btn, .pill-toggle { transition: none; } }

/* schmal (Container unter 640 px, also auch das Telefon): eine kompakte Karte je Kriterium */
@container (max-width: 640px) {
  .crit-labels { display: none; }
  .crit { grid-template-columns: minmax(0, 1fr) 56px; grid-template-areas: "main switch" "weight weight" "counts counts"; row-gap: 8px; padding: 12px; }
  .crit-seg-btn { min-height: 44px; }
  .crit-counts-label { display: inline; flex-basis: 100%; }
  .pill-toggle { min-height: 44px; }
  .crit.is-off .crit-weight { margin-top: -4px; }
  .crit-off-text { text-align: left; }
}
@media (max-width: 767px) {
  .crit-group { padding: 16px 14px; }
  .config-bar { bottom: 8px; padding-left: 14px; }
  .config-bar .btn { flex: 1 1 100%; }
}

/* ===== Texte: gleiche Sprache wie die Kriterien (Karten, saubere aufklappbare Zeilen) ===== */
.text-group.panel { margin: 0; }
.text-group h2 { margin: 0 0 4px; font-size: 1.2rem; color: var(--blue); }
.text-group-text { margin: 0 0 12px; font-size: 0.9rem; color: var(--muted); }
.text-rows { gap: 8px; }
.text-row { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.text-row[open] { border-color: var(--blue); box-shadow: 0 6px 18px rgba(30, 95, 130, 0.1); }
.text-row > summary { min-height: 52px; gap: 6px 12px; padding: 8px 14px; }
.text-row .tr-key { display: grid; place-items: center; flex: none; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-weight: 800; font-size: 0.85rem; }
.text-row .tr-name { flex: 1 1 10rem; font-weight: 600; overflow-wrap: anywhere; }
.text-row[open] > summary { border-bottom-color: var(--line); }
.text-row-body label { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .text-row { transition: none; } }
@media (max-width: 767px) { .text-group.panel { padding: 16px 14px; } .text-row > summary { padding: 8px 12px; } .text-row-body { padding: 12px; } }

/* ===== Projektliste: sortierbare Köpfe, „Nächster Schritt“ als Knopf, Spaltenwähler ===== */
.list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.list-bar > .search { flex: 1 1 420px; min-width: 0; }
.table th .th-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; border-radius: 6px; transition: color 0.15s ease; }
.table th .th-sort:hover, .table th .th-sort.is-active { color: var(--blue); }
.table th .th-sort:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.table th .th-sort svg { flex: none; width: 14px; height: 14px; }
.table-nav .next-btn { position: relative; z-index: 1; min-height: 34px; padding: 0 14px; white-space: nowrap; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.table-nav .next-btn:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.table-nav .next-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.col-chooser { position: relative; flex: none; }
.col-chooser > summary { list-style: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.col-chooser > summary::-webkit-details-marker { display: none; }
.col-chooser > summary svg { width: 18px; height: 18px; }
.col-chooser > summary:hover, .col-chooser[open] > summary { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.col-chooser > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.col-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(440px, calc(100vw - 32px)); max-height: min(75vh, 720px); overflow-y: auto; padding: 18px; background: var(--surface); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(30, 95, 130, 0.18), 0 0 0 1px var(--line); }
.col-title { margin: 0 0 2px; font-size: 1.05rem; }
.col-list { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.col-item { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); transition: background-color 0.2s ease, border-color 0.2s ease; }
.col-item.is-off { background: transparent; border-style: dashed; }
.col-item.is-off .col-name { color: var(--muted); font-weight: 500; }
.col-check { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "box name" ". hint"; align-items: center; column-gap: 10px; padding: 8px 0; min-height: 44px; cursor: pointer; }
.col-check input { grid-area: box; width: 20px; height: 20px; margin: 0; }
.col-check.is-locked { cursor: default; }
.col-check.is-locked svg { grid-area: box; width: 18px; height: 18px; color: var(--muted); }
.col-name { grid-area: name; font-weight: 600; line-height: 1.3; }
.col-hint { grid-area: hint; font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
.col-move { flex: none; display: flex; }
.col-move-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--blue); cursor: pointer; transition: background-color 0.15s ease; }
.col-move-btn svg { width: 18px; height: 18px; }
.col-move-btn:hover:not(:disabled) { background: var(--blue-soft); }
.col-move-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.col-move-btn:disabled { color: var(--border-soft); cursor: not-allowed; }
.col-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.col-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 767px) {
  .list-bar > .archive-toggle { flex: 1 1 100%; }
  .col-chooser { flex: 1 1 100%; }
  .col-chooser > summary { width: 100%; }
  .col-panel { position: static; width: auto; max-height: none; margin-top: 8px; padding: 16px 14px; }
  .col-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .col-chooser > summary, .col-item, .col-move-btn, .table-nav .next-btn, .table th .th-sort { transition: none; } }

/* ===== Antworten aus dem Vorjahr: Angebot beim Start, Marke an der Antwort, Leiste je Bereich ===== */
.carry-offer { max-width: 62ch; margin: 4px 0 0; }
.carry-offer p { margin: 0 0 6px; }
.start-form { display: flex; flex-wrap: wrap; gap: 8px; }
.crit-carried { display: inline-block; margin: 0 0 4px 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--peach-soft); color: var(--badge-text); }
.criterion:has(.crit-carried) { box-shadow: inset 4px 0 0 var(--peach), var(--shadow); }
.criterion:has(.crit-state[data-state=na_open]):has(.crit-carried) { box-shadow: inset 4px 0 0 var(--red), var(--shadow); }
.carried-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--peach-soft); color: var(--badge-text); }
.carried-bar p { margin: 0; font-weight: 600; }
@media (max-width: 767px) { .carried-bar .btn { flex: 1 1 100%; } }

/* ===== Archivieren: ausgegraute Zeilen, Hinweis, Menü „Mehr“ ===== */
.archive-toggle.is-on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.table .is-archived td { color: var(--muted); }
.table .is-archived .row-link { color: var(--muted); font-weight: 600; }
.table .is-archived .area-dot, .table .is-archived .cat-pair { opacity: 0.55; }
.table-nav .restore-btn { position: relative; z-index: 1; white-space: nowrap; }
.table-nav .col-go form { margin: 0; }
.table-nav tbody tr.is-archived:hover .col-go { color: var(--muted); }
.archive-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.archive-note form { margin: 0; }
.head-menu { position: relative; }
.head-menu > summary { list-style: none; cursor: pointer; }
.head-menu > summary::-webkit-details-marker { display: none; }
.head-menu[open] > summary { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.head-menu .menu-list { right: 0; left: auto; min-width: 200px; }
.menu-list form { margin: 0; }
.menu-list .menu-btn { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: none; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.menu-list .menu-btn:hover { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.menu-list .menu-btn:focus-visible, .menu-list a:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.restore-form { display: inline; margin: 0; }
.table-nav .is-archived .restore-btn { margin-top: 6px; }

/* Konto-Seiten (Befund 6): Übersicht und allauth-Seiten mit denselben Karten und Knöpfen wie die App */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.account-panel > h2:first-child { margin-bottom: 8px; }
.account-panel p { margin: 0 0 12px; }
.account-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.account-panel-head h2 { margin: 0; }
.account-panel-head .pill { margin-left: auto; }
.account-narrow { max-width: 640px; }
.actions-start { justify-content: flex-start; flex-wrap: wrap; }
.btn-danger { color: var(--error); }
.btn-danger:hover { border-color: var(--error); background: var(--error-bg); }
.plain-list { list-style: none; margin: 0 0 8px; padding: 0; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mail-row:last-child { border-bottom: 0; }
.mail-address { font-weight: 700; }
.inline-form { display: inline; margin: 0; }
.totp-setup { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 24px; align-items: start; }
.totp-qr { display: block; width: 216px; height: 216px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
@media (max-width: 640px) { .totp-setup { grid-template-columns: 1fr; } }
textarea.codes { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; min-height: 0; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.account-form .actions { justify-content: flex-start; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
/* allauth-Seiten ohne Anmeldung (Code-Eingabe, Passwort vergessen) stehen in der Anmeldekarte: Kopf ohne eigene Karte */
.auth-card .page-head { background: none; box-shadow: none; padding: 0; margin-bottom: 12px; }
.auth-card .page-head .eyebrow { display: none; }

/* Fehlerseiten (404, 403, 500): eigenständig in der Anmeldekarte */
.error-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--blue); font-weight: 800; text-decoration: none; }
.error-card h1 { margin-bottom: 12px; }
.error-card p { margin: 0 0 16px; }