/* ════════════════════════════════════════════════════════════════════
   Oberfläche von Lead-Enricher.

   Das Aussehen ist aus dem Schichtplaner übernommen (Michas anderes
   Projekt, /home/micha/Documents/Schichtplan): weißes Canvas, kühles
   Grau, DM Sans, flach mit Haarlinien statt Schatten, schwarze Pille
   für den aktiven Navigationspunkt, Outline-Pillen für Nebenaktionen.
   Die Token-Werte sind 1:1 von dort; die Token-*Namen* sind die von
   Lead-Enricher geblieben, damit keine der 24 Vorlagen angefasst
   werden musste.

   Eingebunden über {{ static_url('app.css') }}, nie mit festem Pfad —
   der Helfer hängt die Änderungszeit als ?v= an.
   ════════════════════════════════════════════════════════════════════ */

/* DM Sans (SIL OFL) — selbst gehostet, kein Google-Fonts-Request (DSGVO).
   Zwei Schnitte mit unicode-range: der zweite lädt nur nach, wenn wirklich
   ein Zeichen daraus vorkommt. */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000;
  font-display: swap; src: url("/static/fonts/DMSans-latin.woff2") format("woff2");
  unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
                 U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000;
  font-display: swap; src: url("/static/fonts/DMSans-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
                 U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Flächen */
  --canvas: #fff;
  --surface: #fff;
  --bg: #f7f8fa;
  --paper: var(--bg);
  --surface-2: #f2f3f5;
  --tray: #f2f3f5;

  /* Tinte, von dunkel nach hell */
  --ink: #0a0a0a;
  --text: var(--ink);
  --charcoal: #222;
  --text-2: #45515e;
  --text-3: #8e8e93;
  --stone: #8e8e93;
  --muted-ink: #a8aab2;

  /* Haarlinien. Getragen werden sie als inset-Ring, nicht als border —
     dann verschiebt sich beim Fokus nichts um einen Pixel. */
  --rule: #e5e7eb;
  --border: var(--rule);
  --rule-soft: #eaecf0;
  --border-strong: #d8dbe1;
  --haarlinie: inset 0 0 0 1px var(--rule);
  --haarlinie-weich: inset 0 0 0 1px var(--rule-soft);

  /* Marke: Blau. Es ist die Farbe für Verweise, Fokus, Fortschritt. */
  --accent: #1456f0;
  --accent-mid: #3b82f6;
  --accent-hover: #1d4ed8;
  --accent-deep: #1d4ed8;
  --accent-700: #17437d;
  --accent-line: #bfdbfe;
  --accent-soft: #e7edfe;

  /* Koralle ist der Ruf: der offene Schritt, die ungelesene Nachricht.
     Sonst nirgends — sie verliert ihre Wirkung, sobald sie schmückt. */
  --seal: #ff5530;
  --seal-hover: #e5431f;
  --seal-soft: #fff1ed;
  --seal-line: #ffd3c6;

  --purple: #a855f7; --purple-soft: #f3e8ff; --purple-line: #e3ccfd;
  --green: #1ba673; --green-soft: #e8ffea; --green-line: #bfe8d0;
  --amber: #8a4b00; --amber-soft: #fff4e5; --amber-line: #ffe0b8;
  --red: #d45656; --red-ink: #a33636; --red-soft: #fff6f6; --red-line: #f4d2d2;

  /* Die Leiste ist weiß wie die Karten — getrennt wird mit einer Linie. */
  --sb-bg: var(--canvas);
  --sb-border: var(--rule);
  --sb-text: var(--text-2);
  --sb-text-dim: var(--text-2);
  --sb-active-bg: var(--ink);
  --sb-active: #fff;

  --radius-lg: 16px; --radius: 12px; --radius-sm: 8px;
  --radius-xs: 6px; --pill: 9999px;

  /* Flach. Schatten sind für Schwebendes reserviert, nicht für Karten. */
  --schatten-flach: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px -10px rgba(10, 10, 10, .09);
  --schatten-hoch:  0 2px 6px rgba(10, 10, 10, .05), 0 22px 48px -16px rgba(10, 10, 10, .16);
  --schatten-fenster: 0 48px 96px -24px rgba(10, 10, 10, .32), 0 8px 24px -12px rgba(10, 10, 10, .16);
  --shadow-sm: var(--haarlinie);
  --shadow-md: var(--schatten-flach);
  --shadow-lg: var(--schatten-hoch);
  --ring: inset 0 0 0 2px var(--accent-deep);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-fluid: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1);

  --font-ui: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-ui);

  --leiste: 250px;
  --spurbreite: 1152px;
  --gutter: clamp(16px, 2.6vw, 24px);

  --z-grain: 1005; --z-bar: 1010; --z-tab: 1020; --z-skip: 1300;

  /* Altlasten-Aliase — Partials sprechen diese Namen direkt an. */
  --primary: var(--accent); --primary-dark: var(--accent-hover);
  --primary-soft: var(--accent-soft); --success: var(--green);
  --success-soft: var(--green-soft); --card: var(--surface);
  --muted: var(--text-2); --warn: var(--amber); --warn-soft: var(--amber-soft);
  --danger: var(--red); --danger-soft: var(--red-soft);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
  font-synthesis-weight: none; -webkit-font-smoothing: antialiased;
}

/* Eine Schrift, vier Gewichte: 400 Text, 500 betont, 600 Überschriften und
   Knöpfe, 700 für starke Hervorhebung im Fließtext. Mehr nicht. */
h1, h2, h3 {
  margin: 0; color: var(--ink); font-weight: 600; line-height: 1.2;
  letter-spacing: -.025em; text-wrap: balance;
}
h1 { font-size: 26px; letter-spacing: -.04em; line-height: 1.15; }
h2 { font-size: 19px; }
h3 { font-size: 16px; letter-spacing: -.02em; }
p, .hint, .wiz-lead { text-wrap: pretty; }
::selection { background: var(--accent-soft); color: var(--ink); }
a { color: var(--accent); text-underline-offset: 3px;
    transition: color .2s var(--ease-fluid); }
a:hover { color: var(--accent-hover); }

/* Augenbraue: die kleinste Schrift der Anwendung, immer über einer
   Überschrift, nie allein. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--text-2);
  background: var(--surface-2); border-radius: var(--pill);
  padding: 4px 11px 4px 10px; margin: 0 0 12px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--pill);
  background: var(--kind, var(--accent)); flex: none;
}
.eyebrow-sep { color: var(--muted-ink); padding: 0 6px; }

/* ═══ Gerüst: weiße Leiste links, graue Arbeitsfläche rechts ═════════ */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar {
  width: var(--leiste); flex: none; background: var(--canvas); color: var(--sb-text);
  box-shadow: inset -1px 0 0 var(--rule);
  display: flex; flex-direction: column; gap: 4px;
  padding: max(18px, env(safe-area-inset-top)) 12px
           max(16px, env(safe-area-inset-bottom)) 14px;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: hidden auto;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0;
         padding: 4px 8px 16px; text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 14px;
  font-weight: 600; letter-spacing: -.01em;
  background-color: var(--ink);
  background-image: linear-gradient(140deg, var(--ink) 0%, #2b3340 100%);
  box-shadow: 0 6px 16px -6px rgba(10, 10, 10, .6),
              inset 0 1px 1px rgba(255, 255, 255, .18);
}
.brand-name { color: var(--ink); font-size: 15px; font-weight: 600;
              letter-spacing: -.025em; white-space: nowrap; }

.nav-label {
  padding: 12px 12px 6px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-2);
  margin: 0;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: var(--radius); border: 0;
  background: none; color: var(--text-2); text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 500; text-align: left;
  cursor: pointer; position: relative;
  transition: background .22s var(--ease-fluid), color .22s var(--ease-fluid),
              transform .3s var(--ease-fluid);
}
.nav-item svg { flex: none; width: 18px; height: 18px; opacity: .8;
                stroke-width: 1.4px; }
.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item:active { transform: scale(.985); }
/* Aktiv ist eine schwarze Pille — der einzige gefüllte Punkt der Leiste. */
.nav-item.active {
  background: var(--ink); color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .16),
              0 10px 22px -12px rgba(10, 10, 10, .7);
}
.nav-item.active svg { opacity: 1; }

.navbadge {
  margin-left: auto; flex: none; min-width: 20px; height: 20px; padding: 0 7px;
  border-radius: var(--pill); background: var(--seal); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 20px; text-align: center;
}
.nav-item.active .navbadge { background: rgba(255, 255, 255, .18); color: #fff; }
.tabbar a { position: relative; }
.tabdot {
  position: absolute; top: 5px; right: calc(50% - 16px);
  width: 8px; height: 8px; border-radius: var(--pill); background: var(--seal);
  box-shadow: 0 0 0 2px var(--canvas);
}

.sidebar .spacer { flex: 1; min-height: 12px; }
.sidebar-foot {
  box-shadow: inset 0 1px 0 var(--rule); padding-top: 12px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-width: 0;
  border-radius: var(--radius); transition: background .22s var(--ease-fluid);
}
.user-chip:hover { background: var(--bg); }
.avatar {
  width: 32px; height: 32px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 11px;
  font-weight: 600; letter-spacing: .02em; background: var(--accent);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22);
}
.user-mail { font-size: 12.5px; color: var(--text-2); overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot button {
  --btn-bg: transparent; --btn-fg: var(--text-2);
  width: 100%; justify-content: flex-start; box-shadow: none;
  padding: 9px 12px; border-radius: var(--radius); font-size: 14px; font-weight: 500;
}
.sidebar-foot button:hover { --btn-bg: var(--bg); --btn-fg: var(--ink);
                             box-shadow: none; transform: none; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content main {
  width: 100%; max-width: var(--spurbreite); margin: 0 auto;
  padding: 0 22px 72px; animation: seite-ein .42s var(--ease-fluid) backwards;
}
@keyframes seite-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ Seitenkopf ════════════════════════════════════════════════════ */
.pagehead {
  width: 100%; max-width: var(--spurbreite); margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 22px 20px;
  animation: seite-ein .42s var(--ease-fluid) backwards;
}
.pagehead-row {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 12px 20px;
}
.pagehead h1 { font-size: 26px; font-weight: 600; letter-spacing: -.04em;
               line-height: 1.15; }
.page-sub { margin: 5px 0 0; color: var(--text-2); font-size: 14px;
            max-width: 68ch; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ═══ Kennzahlen ════════════════════════════════════════════════════ */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
        margin-top: 20px; }
.kpis:empty { display: none; }
@media (max-width: 980px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--canvas); border-radius: var(--radius);
  box-shadow: var(--haarlinie); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  transition: box-shadow .28s var(--ease-fluid);
}
@media (hover: hover) {
  .kpi:hover { box-shadow: var(--haarlinie), var(--schatten-flach); }
}
.kpi-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: var(--text-2);
}
.kpi-value { font-size: 27px; font-weight: 600; letter-spacing: -.04em;
             line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 13px; font-weight: 500; color: var(--text-2);
                   letter-spacing: 0; }
.kpi-sub { font-size: 12px; color: var(--text-2); overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.kpi-bar { height: 4px; border-radius: var(--pill); background: var(--surface-2);
           overflow: hidden; margin-top: 8px; }
.kpi-bar > div { height: 100%; border-radius: var(--pill); background: var(--accent);
                 transition: width .6s var(--ease-fluid); }

/* ═══ Karten: weiß, Haarlinie, flach ════════════════════════════════ */
.card {
  background: var(--canvas); border: 0; border-radius: var(--radius-lg);
  box-shadow: var(--haarlinie); padding: 20px 22px; margin: 0 0 14px;
}
.card h2 { font-size: 18px; margin: 0 0 4px; display: flex; align-items: center; }
.card h3 { font-size: 15px; }
.card .hint { color: var(--text-2); font-size: 13.5px; margin: 0 0 16px;
              max-width: 70ch; }
.step-num {
  display: inline-flex; width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  flex: none; align-items: center; justify-content: center; margin-right: 10px;
}

/* ═══ Knöpfe: Pillen ════════════════════════════════════════════════
   Grundform ist die Outline-Pille. Was in den Vorlagen `button`/`.btn`
   heißt, ist bei uns die Hauptaktion — die trägt deshalb die Tinte, und
   `.secondary` bekommt die Outline-Form. */
button, .btn {
  --btn-bg: var(--ink); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--btn-bg); color: var(--btn-fg); border: 0;
  border-radius: var(--pill); padding: 9px 18px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; cursor: pointer; text-decoration: none; position: relative;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .16), 0 8px 20px -8px rgba(10, 10, 10, .4);
  transition: transform .28s var(--ease-fluid), box-shadow .28s var(--ease-fluid),
              background .2s var(--ease-fluid), color .2s var(--ease-fluid);
}
button:hover, .btn:hover {
  --btn-bg: var(--charcoal);
  box-shadow: 0 2px 4px rgba(10, 10, 10, .18), 0 14px 28px -10px rgba(10, 10, 10, .45);
}
button:active, .btn:active { transform: scale(.97); }
button:disabled, .btn:disabled { opacity: .45; pointer-events: none; }

button.secondary, .btn.secondary {
  --btn-bg: var(--canvas); --btn-fg: var(--ink);
  box-shadow: var(--haarlinie);
}
button.secondary:hover, .btn.secondary:hover {
  --btn-bg: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong);
}
button.ghost, .btn.ghost {
  --btn-bg: transparent; --btn-fg: var(--text-2); box-shadow: none;
}
button.ghost:hover, .btn.ghost:hover {
  --btn-fg: var(--ink); background: rgba(10, 10, 10, .045); box-shadow: none;
}
button.big, .btn.big { padding: 12px 24px; font-size: 15px; }
button.klein, .btn.klein { padding: 6px 14px; font-size: 13px; }

button:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-deep); outline-offset: 2px;
}

/* ═══ Formulare ════════════════════════════════════════════════════ */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=date], input:not([type]),
select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--canvas); border: 0; border-radius: var(--radius-sm);
  box-shadow: var(--haarlinie); min-height: 40px; padding: 9px 13px;
  transition: box-shadow .22s var(--ease-fluid), background .22s var(--ease-fluid);
}
input:hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
input:focus, select:focus, textarea:focus {
  box-shadow: inset 0 0 0 2px var(--accent-deep); outline: none;
}
textarea { resize: vertical; min-height: 96px; padding: 11px 13px; line-height: 1.55; }
label { display: block; color: var(--text-2); font-size: 13px; font-weight: 500;
        margin: 14px 0 6px; }
label > input, label > select, label > textarea { margin-top: 6px; }
input[type=checkbox] { width: 18px; height: 18px; min-height: 0; box-shadow: none;
                       accent-color: var(--accent); cursor: pointer; }
input[type=range] { accent-color: var(--accent); box-shadow: none; padding: 0;
                    min-height: 0; cursor: pointer; }
input[type=file] { box-shadow: none; padding-left: 0; font-size: 13.5px;
                   color: var(--text-2); }
input[type=file]::file-selector-button {
  background: var(--canvas); color: var(--ink); border: 0;
  border-radius: var(--pill); box-shadow: var(--haarlinie);
  padding: 8px 16px; margin-right: 12px; font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer;
  transition: background .2s var(--ease-fluid), box-shadow .2s var(--ease-fluid);
}
input[type=file]::file-selector-button:hover {
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong);
}
select {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235f5f5f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 13px center; background-repeat: no-repeat;
}
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0 0 8px; color: var(--text-2); font-size: 13px; font-weight: 600; }

/* ═══ Tabellen: Register mit Haarlinien ════════════════════════════ */
table { border-collapse: collapse; width: 100%; font-size: 13.5px;
        font-variant-numeric: tabular-nums; }
th {
  text-align: left; padding: 10px 14px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--text-2);
  white-space: nowrap; background: var(--canvas);
  box-shadow: inset 0 -1px 0 var(--rule);
}
td { padding: 11px 14px; vertical-align: middle; max-width: 220px;
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     box-shadow: inset 0 -1px 0 var(--rule-soft); }
tbody tr { transition: background .18s var(--ease-fluid); }
tr:hover td { background: var(--bg); }
tr:last-child td { box-shadow: none; }
td strong { font-weight: 600; }

/* ═══ Pillen, Marken, Hinweise ═════════════════════════════════════ */
.pill {
  display: inline-flex; align-items: center; gap: 7px; border-radius: var(--pill);
  padding: 4px 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2); box-shadow: none;
}
.pill.ok { background: var(--green-soft); color: #0f6b4a; }
.pill.off { background: var(--surface-2); color: var(--text-3); }
.pill.on { background: var(--green-soft); color: #0f6b4a; }
.pill.warn { background: var(--amber-soft); color: var(--amber); }
.badge {
  display: inline-block; border-radius: var(--pill); padding: 3px 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  background: var(--surface-2); color: var(--text-2);
}
.badge.new { background: var(--seal-soft); color: #b4341a; }
.badge.conf-high { background: var(--green-soft); color: #0f6b4a; }
.badge.conf-mid { background: var(--amber-soft); color: var(--amber); }
.badge.conf-low { background: var(--red-soft); color: var(--red-ink); }
.badge.off { background: var(--surface-2); color: var(--text-3); }
.dot { width: 7px; height: 7px; border-radius: var(--pill); display: inline-block;
       flex: none; vertical-align: 1px; }
.oc-icon svg { display: block; }

/* ═══ Layout-Helfer ════════════════════════════════════════════════ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 10px; }
.fieldcard {
  border-radius: var(--radius); padding: 12px 14px; background: var(--bg);
  box-shadow: var(--haarlinie-weich); display: flex; flex-direction: column; gap: 3px;
  transition: box-shadow .22s var(--ease-fluid), background .22s var(--ease-fluid);
}
.fieldcard:hover { background: var(--canvas); box-shadow: var(--haarlinie); }
.fieldcard .count { font-size: 12.5px; color: var(--text-2); }
.progress { height: 5px; border-radius: var(--pill); background: var(--surface-2);
            overflow: hidden; }
.progress > div { height: 100%; border-radius: var(--pill); background: var(--accent);
                  transition: width .6s var(--ease-fluid); }
.error {
  background: var(--red-soft); color: var(--red-ink); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--red-line); padding: 11px 14px;
  font-size: 13.5px; margin-bottom: 14px;
}
.muted { color: var(--text-2); font-size: 12.5px; }
.measure { max-width: 72ch; }
.cost { font-variant-numeric: tabular-nums; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.field-note, .rolehint { color: var(--text-3); font-size: 11.5px; }
.field-note { margin: 5px 0 0; }
.sec-title {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--text-2); margin: 28px 0 12px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: 14px; top: -60px; z-index: var(--z-skip);
  background: var(--ink); color: #fff; border-radius: var(--pill);
  padding: 10px 18px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  box-shadow: var(--schatten-hoch); transition: top .35s var(--ease-fluid);
}
.skiplink:focus { top: 14px; }

/* ═══ Dialoge ══════════════════════════════════════════════════════ */
dialog {
  border: 0; border-radius: var(--radius-lg); max-width: 720px; width: 92%;
  padding: 24px; background: var(--canvas); color: var(--ink);
  box-shadow: var(--schatten-fenster);
}
dialog::backdrop { background: rgba(10, 10, 10, .38);
                   backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(-45deg) translateY(-1px);
  transition: transform .3s var(--ease-fluid);
}
details[open] > summary::before { transform: rotate(45deg) translateY(-2px); }
.htmx-indicator { opacity: 0; transition: opacity .2s var(--ease-fluid); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ═══ Roter Faden ══════════════════════════════════════════════════
   Die einzige Stelle, an der die Anwendung von sich aus etwas einfordert —
   deshalb Koralle, und deshalb sonst nirgends. */
.faden {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--seal-soft); box-shadow: inset 0 -1px 0 var(--seal-line);
  padding: 10px 22px; font-size: 13.5px;
}
.faden-count {
  flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11px;
  color: #b4341a; background: var(--canvas); border-radius: var(--pill);
  padding: 3px 10px; letter-spacing: .04em;
}
.faden-text { min-width: 0; color: var(--ink); }
.faden .btn { --btn-bg: var(--seal); --btn-fg: #fff; padding: 7px 15px;
              font-size: 13px; box-shadow: 0 8px 20px -10px rgba(255, 85, 48, .7); }
.faden .btn:hover { --btn-bg: var(--seal-hover); }
.faden-rest { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.faden-rest a, .faden-rest button {
  --btn-bg: transparent; --btn-fg: var(--text-2);
  font-size: 12.5px; padding: 0; box-shadow: none; font-weight: 500;
}
.faden-rest a:hover, .faden-rest button:hover {
  --btn-fg: var(--ink); background: none; box-shadow: none; transform: none;
  text-decoration: underline;
}

.chain { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.chain li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px;
            color: var(--text-2); }
.chain-num {
  flex: none; width: 22px; height: 22px; border-radius: var(--pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; background: var(--surface-2);
  color: var(--text-2);
}
.chain strong { color: var(--ink); font-weight: 600; }

/* ═══ Offene Punkte auf /start ═════════════════════════════════════ */
.oblist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
          max-width: 860px; }
.ob {
  display: flex; gap: 14px; align-items: flex-start; background: var(--canvas);
  border-radius: var(--radius); box-shadow: var(--haarlinie); padding: 16px 18px;
  transition: box-shadow .28s var(--ease-fluid);
}
.ob.is-done { background: transparent; box-shadow: var(--haarlinie-weich); }
.ob-mark {
  flex: none; width: 28px; height: 28px; border-radius: var(--pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; background: var(--surface-2);
  color: var(--text-2);
}
.ob.is-done .ob-mark { background: var(--green-soft); color: #0f6b4a; }
.ob-body { flex: 1; min-width: 0; }
.ob-title { font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.ob.is-done .ob-title { color: var(--text-2); }
.ob-hint { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); max-width: 62ch; }
.ob-act { flex: none; align-self: center; }
/* Genau ein Schritt ist dran — der bekommt den Rufton. */
.ob.is-next {
  background: var(--canvas);
  box-shadow: inset 0 0 0 1.5px var(--seal-line), var(--schatten-flach);
}
.ob.is-next .ob-mark { background: var(--seal); color: #fff; }
.ob.is-next .ob-title { font-size: 16px; }
.ob-now {
  display: inline-block; margin-left: 10px; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: #b4341a;
  vertical-align: 2px;
}

/* ═══ Gestapelte Auswahl ═══════════════════════════════════════════ */
.optionlist { display: grid; gap: 10px; max-width: 760px; }
.option-card {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: var(--canvas); border: 0; border-radius: var(--radius);
  box-shadow: var(--haarlinie); padding: 18px 20px; cursor: pointer;
  color: var(--ink); font: inherit; white-space: normal;
  transition: box-shadow .28s var(--ease-fluid), transform .28s var(--ease-fluid);
}
.option-card:hover { box-shadow: var(--haarlinie), var(--schatten-flach);
                     transform: translateY(-1px); }
.option-card:active { transform: scale(.995); }
.option-card.primary { box-shadow: inset 0 0 0 1.5px var(--accent-line),
                                   var(--schatten-flach); }
.option-card .oc-icon {
  flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid;
  place-items: center; font-size: 18px; background: var(--surface-2);
  color: var(--text-2); transition: background .22s var(--ease-fluid),
                                    color .22s var(--ease-fluid);
}
.option-card.primary .oc-icon, .option-card:hover .oc-icon {
  background: var(--ink); color: #fff;
}
.option-card .oc-body { flex: 1; min-width: 0; }
.option-card .oc-title, .option-card .oc-sub { display: block; }
.option-card .oc-title { font-size: 16px; font-weight: 600; letter-spacing: -.025em;
                         margin: 0 0 3px; line-height: 1.3; }
.option-card .oc-sub { font-size: 13.5px; font-weight: 400; color: var(--text-2);
                       margin: 0; line-height: 1.5; }
.option-card .oc-foot { display: flex; align-items: center; gap: 10px;
                        flex-wrap: wrap; margin-top: 14px; }
.option-aside { margin-top: 28px; max-width: 760px; }
.option-aside > h3 {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--text-2); margin: 0 0 10px;
}
.option-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-radius: var(--radius); background: var(--bg);
  box-shadow: var(--haarlinie-weich); padding: 11px 14px;
  transition: background .22s var(--ease-fluid);
}
.option-row:hover { background: var(--canvas); box-shadow: var(--haarlinie); }
.option-row + .option-row { margin-top: 8px; }
.option-row .or-name { display: flex; align-items: center; gap: 9px; font-size: 13.5px;
                       font-weight: 600; flex: 1 1 150px; min-width: 0; }
.option-row form { display: flex; align-items: center; gap: 9px; margin: 0;
                   flex-wrap: wrap; }
.option-row select { width: auto; min-width: 180px; }

/* ═══ Leere Zustände ═══════════════════════════════════════════════ */
.emptystate { display: grid; justify-items: center; text-align: center; gap: 4px;
              padding: 56px 24px; color: var(--text-2); }
.emptystate .es-mark {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 10px; background: var(--surface-2); color: var(--text-3);
}
.emptystate strong { font-size: 17px; font-weight: 600; color: var(--ink);
                     letter-spacing: -.025em; }
.emptystate p { margin: 0; font-size: 13.5px; max-width: 44ch; }
.emptystate .es-act { margin-top: 16px; }
.emptybox {
  border-radius: var(--radius); background: var(--bg);
  box-shadow: var(--haarlinie-weich); padding: 18px; color: var(--text-2);
  font-size: 13.5px;
}

/* ═══ Assistent ════════════════════════════════════════════════════ */
.wizbar {
  position: sticky; top: 0; z-index: var(--z-bar);
  background: rgba(247, 248, 250, .85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 -1px 0 var(--rule);
}
.wizbar-inner { max-width: var(--spurbreite); margin: 0 auto; padding: 8px 22px;
                display: flex; align-items: center; gap: 14px; }
.wiz-track { height: 2px; background: var(--surface-2); overflow: hidden; }
.wiz-fill { height: 100%; width: 5%; background: var(--accent);
            border-radius: 0 var(--pill) var(--pill) 0;
            transition: width .6s var(--ease-fluid); }
.wiz-shell { max-width: 880px; margin: 32px auto 0; }
.wiz-step { display: none; }
.wiz-step.active { display: block; animation: seite-ein .42s var(--ease-fluid); }
.wiz-kicker {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--text-2); background: var(--surface-2);
  border-radius: var(--pill); padding: 4px 12px 4px 10px;
}
.wiz-kicker::before { content: ""; width: 6px; height: 6px; flex: none;
                      border-radius: var(--pill); background: var(--accent); }
.wiz-title { font-size: clamp(24px, 3.2vw, 34px); font-weight: 600;
             letter-spacing: -.045em; line-height: 1.12; margin: 0 0 10px; }
.wiz-lead { color: var(--text-2); font-size: 15px; max-width: 60ch; margin: 0 0 28px;
            line-height: 1.55; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center;
           gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.wiz-nav .nav-hint { flex-basis: 100%; margin: 0; }

.wiz-steps { display: flex; align-items: center; gap: 6px; flex: 1;
             overflow-x: auto; min-width: 0; scrollbar-width: none; }
.wiz-steps::-webkit-scrollbar { display: none; }
.check-item {
  --btn-bg: transparent; --btn-fg: var(--ink);
  display: flex; align-items: center; gap: 9px; padding: 5px 10px;
  border-radius: var(--pill); white-space: nowrap; box-shadow: none;
  font-weight: 500; font-size: 13px;
}
.check-item:hover { background: var(--canvas); box-shadow: var(--haarlinie);
                    transform: none; }
.check-dot {
  width: 24px; height: 24px; border-radius: var(--pill); flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; background: var(--surface-2);
  color: var(--text-2);
  transition: background .3s var(--ease-fluid), color .3s var(--ease-fluid);
}
.check-item.now .check-dot { background: var(--ink); color: #fff; }
.check-item.done .check-dot { background: var(--green); color: #fff; }
.check-text { display: flex; flex-direction: column; line-height: 1.28;
              text-align: left; }
.check-text b { font-size: 12.5px; font-weight: 600; }
.check-text small { font-size: 10.5px; font-weight: 400; color: var(--text-3); }
.check-item.done .check-text small { color: var(--green); }
.check-sep { flex: 0 1 22px; min-width: 10px; height: 1px; background: var(--rule); }
.check-sep.done { background: var(--green-line); }
@media (max-width: 760px) { .check-text small { display: none; } }

/* Der Weiter-Knopf hatte beides falsch herum: er sah tot aus und war trotzdem
   klickbar, ohne je zu sagen, was fehlt. Jetzt gibt es genau zwei Zustände —
   gesperrt, dann steht der Grund daneben; oder frei, dann ist er schwarz. */
.wiz-nav-rechts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                  justify-content: flex-end; flex: 1; min-width: 0; }
.wiz-need { font-size: 13px; color: var(--text-2); text-align: right;
            line-height: 1.35; transition: color .3s var(--ease-fluid); }
.wiz-need:empty { display: none; }
.wiz-need::before { content: "\21b3\00a0"; color: var(--seal); font-weight: 600; }

button.wiz-fwd { --btn-bg: var(--ink); --btn-fg: #fff; }
button.wiz-fwd:disabled, button.wiz-fwd.gesperrt,
.btn.gesperrt[aria-disabled="true"] {
  /* Nicht das 45-Prozent-Gespenst von button:disabled: gesperrt heißt lesbar,
     sonst weiß niemand, was der Knopf überhaupt anbietet. */
  --btn-bg: var(--surface-2); --btn-fg: var(--text-3);
  box-shadow: var(--haarlinie); opacity: 1;
  pointer-events: auto; cursor: not-allowed; animation: none;
}
button.wiz-fwd.next-step { --btn-bg: var(--ink); --btn-fg: #fff;
                           box-shadow: 0 1px 2px rgba(10, 10, 10, .16),
                                       0 10px 24px -10px rgba(10, 10, 10, .5); }

/* Schritte in der Leiste, deren Grundlage fehlt: sichtbar noch nicht erreicht,
   aber anklickbar — der Klick führt dorthin, wo etwas zu tun ist. */
.check-item.gesperrt { opacity: .45; }
.check-item.gesperrt:hover { opacity: 1; }
/* … und dort leuchtet die Bedingung kurz auf, statt still zu bleiben. */
.pocht { animation: pocht 1.1s var(--ease-fluid) 2; }
@keyframes pocht {
  0%, 100% { color: var(--text-2); }
  35%      { color: var(--seal); }
}
/* Pro Bildschirm pulsiert genau EIN Knopf: der nächste Schritt. */
.next-step { animation: next-pulse 2.8s var(--ease-fluid) infinite; }
@keyframes next-pulse {
  0%   { outline: 3px solid rgba(255, 85, 48, .38); outline-offset: 1px; }
  70%  { outline: 3px solid rgba(255, 85, 48, 0);   outline-offset: 13px; }
  100% { outline: 3px solid rgba(255, 85, 48, 0);   outline-offset: 13px; }
}

/* ═══ Gründer-Flow ═════════════════════════════════════════════════ */
.understand {
  display: flex; gap: 14px; align-items: flex-start; background: var(--accent-soft);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.understand .icon {
  flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-size: 15px;
}
.understand .label { font-size: 10px; font-weight: 600; text-transform: uppercase;
                     letter-spacing: .16em; color: var(--accent-700); margin: 0 0 3px; }
.understand p.text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }

/* Quittung: der gelesene Plan ist auf dem Zielgruppen-Bildschirm nur noch
   Voraussetzung, nicht Aufgabe — deshalb Haarlinie statt blauem Kasten. */
.quittung {
  display: flex; gap: 13px; align-items: flex-start; background: var(--canvas);
  border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--haarlinie);
}
.quittung .q-haken {
  flex: none; width: 22px; height: 22px; border-radius: var(--pill);
  background: var(--green); color: #fff; display: grid; place-items: center;
  font-size: 12px; margin-top: 1px;
}
.quittung .q-text { flex: 1; min-width: 0; }
.q-label { font-size: 10px; font-weight: 600; text-transform: uppercase;
           letter-spacing: .16em; color: var(--text-3); margin: 0 0 3px; }
.q-summary { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.q-meta { margin: 4px 0 0; font-size: 11.5px; color: var(--text-3); }
.q-wechsel { flex: none; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 620px) {
  /* Ohne feste Basis schrumpft der Text neben dem Knopf auf zwei Wörter je
     Zeile, statt ihn in die nächste Zeile zu schicken. */
  .quittung { flex-wrap: wrap; }
  .quittung .q-text { flex: 1 1 calc(100% - 35px); }
  .q-wechsel { margin-left: 35px; }
}

/* Die Bibliothek startet zugeklappt: der Bildschirm soll mit den Vorschlägen
   anfangen und sich nur füllen, wenn jemand mehr will. */
.verfahren { margin-top: 14px; }
.verfahren > summary { cursor: pointer; font-size: 12.5px; color: var(--text-2);
  list-style: none; }
.verfahren > summary::before { content: "›"; display: inline-block; margin-right: 6px;
  transition: transform .15s; }
.verfahren[open] > summary::before { transform: rotate(90deg); }
.verfahren > summary:hover { color: var(--accent); }
.verfahren.offen > summary { color: var(--ink); font-weight: 550; }
.verfahren .v-frage { display: block; font-size: 13px; }
.verfahren .hint { font-size: 12.5px; color: var(--text-2); }
.bibliothek { margin-top: 16px; }
/* Aufklapp-Marke kommt von der Hausregel für <details> weiter oben — hier nur
   die Typografie. Eine eigene Marke daneben hatte sich mit ihr überlagert. */
.bibliothek > summary {
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; padding: 5px 0;
}
.bibliothek > summary:hover { color: var(--accent); }
.bibliothek .chip-input { margin-top: 8px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.split.three { grid-template-columns: 1fr 1fr 1fr; margin-top: 0; }
@media (max-width: 900px) { .split.three { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
/* Zielgruppen wählen: zwei Kästen, nummeriert, mit Pfeil dazwischen. Vorher
   leuchtete das Ergebnisfeld und der Kasten mit der Aufgabe war grau — genau
   verkehrt herum. Jetzt ist der laut, in dem etwas zu tun ist, und das
   Ergebnisfeld hellt auf, sobald etwas drin steht. */
.split.zg { gap: 30px; align-items: start; }
@media (max-width: 760px) { .split.zg { gap: 14px; } }
.zg-quelle, .zg-auswahl {
  border-radius: var(--radius); padding: 16px 18px;
  transition: background .22s var(--ease-fluid), box-shadow .22s var(--ease-fluid);
}
.zg-quelle { background: var(--canvas); position: relative;
             box-shadow: inset 0 0 0 1.5px var(--accent-line), var(--schatten-flach); }
.zg-auswahl { background: var(--bg); box-shadow: var(--haarlinie-weich); }
.zg-auswahl.hat-inhalt { background: var(--canvas);
                         box-shadow: inset 0 0 0 1.5px var(--green-line); }
/* Der Pfeil sitzt in der Lücke und zeigt, wohin ein Klick die Branche schiebt. */
@media (min-width: 761px) {
  .zg-quelle::after {
    content: "\2192"; position: absolute; right: -21px; top: 20px;
    width: 12px; text-align: center; color: var(--text-3); font-size: 15px;
    line-height: 1;
  }
}
.zg-titel { display: flex; align-items: center; gap: 9px; margin: 0 0 5px;
            font-size: 13.5px; font-weight: 600; color: var(--ink);
            letter-spacing: -.01em; }
.zg-nr { flex: none; width: 20px; height: 20px; border-radius: var(--pill);
         background: var(--surface-2); color: var(--text-2); display: grid;
         place-items: center; font-size: 11px; font-weight: 600;
         transition: background .22s var(--ease-fluid), color .22s var(--ease-fluid); }
.zg-quelle .zg-nr { background: var(--accent); color: #fff; }
.zg-auswahl.hat-inhalt .zg-nr { background: var(--green); color: #fff; }
.zg-titel .count-badge { margin-left: auto; background: var(--ink); color: #fff;
                         border-radius: var(--pill); font-size: 10.5px;
                         padding: 2px 8px; font-weight: 600; }
.zg-auswahl.hat-inhalt .count-badge { background: var(--green); }
.zg-sub { margin: 0 0 13px; font-size: 12.5px; color: var(--text-2);
          line-height: 1.45; }
/* „Noch unsicher?" — Markierung unter der Auswahl, bewusst leise */
.zg-unsicher { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); }
.zg-unsicher label { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; font-weight: 550; cursor: pointer; }
.zg-unsicher input[type=checkbox] { width: 16px; height: 16px; margin: 0;
  accent-color: var(--accent); }
.zg-unsicher .hint { font-size: 12.5px; line-height: 1.45; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  --btn-bg: var(--canvas); --btn-fg: var(--ink);
  border-radius: var(--pill); padding: 6px 13px; font-size: 13px; font-weight: 500;
  box-shadow: var(--haarlinie); line-height: 1.4;
}
.chip:hover { --btn-bg: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.chip.add { --btn-bg: transparent; --btn-fg: var(--text-2);
            box-shadow: inset 0 0 0 1px var(--border-strong); }
.chip.add:hover { --btn-fg: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip.on { --btn-bg: var(--ink); --btn-fg: #fff; box-shadow: none; }
.chip.on:hover { --btn-bg: var(--charcoal); box-shadow: none; }
.chip.on:hover::after { content: " ✕"; font-size: 10.5px; }
.chip-input {
  box-shadow: inset 0 0 0 1px var(--border-strong) !important;
  border-radius: var(--pill) !important; background: transparent !important;
  width: 180px !important; padding: 6px 13px !important; min-height: 0 !important;
  font-size: 13px !important;
}
.chip-input:focus { background: var(--canvas) !important;
                    box-shadow: inset 0 0 0 2px var(--accent-deep) !important; }

.result-bar { display: flex; justify-content: space-between; align-items: center;
              flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
              gap: 12px; }
.group-card {
  border-radius: var(--radius); background: var(--canvas); overflow: hidden;
  box-shadow: var(--haarlinie);
  transition: opacity .28s var(--ease-fluid), box-shadow .28s var(--ease-fluid);
}
.group-card:hover { box-shadow: var(--haarlinie), var(--schatten-flach); }
.group-card:has(.group-head input:not(:checked)) { opacity: .45; }
.group-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer;
  background: var(--bg); box-shadow: inset 0 -1px 0 var(--rule); margin: 0;
  font-size: 14px; font-weight: 600; color: var(--ink); text-transform: none;
  letter-spacing: 0;
}
.group-head .group-name { flex: 1; font-size: 13.5px; letter-spacing: -.02em;
                          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-head .count-badge { background: var(--ink); color: #fff;
                           border-radius: var(--pill); font-size: 10.5px;
                           padding: 2px 8px; font-weight: 600; }
.company-row { display: flex; align-items: center; gap: 9px; padding: 8px 14px;
               font-size: 12.5px; box-shadow: inset 0 -1px 0 var(--rule-soft); }
.company-row:last-of-type { box-shadow: none; }
.company-row .c-name { flex: 1; overflow: hidden; text-overflow: ellipsis;
                       white-space: nowrap; }
.company-row .c-meta { color: var(--text-3); font-size: 11.5px; flex: none; }
.company-more { padding: 8px 14px; font-size: 11.5px; color: var(--text-2);
                background: var(--bg); }

/* ═══ Eingangstür ══════════════════════════════════════════════════ */
.auth-screen {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: clamp(24px, 5vw, 56px) 22px; background: var(--bg);
}
.auth-split {
  width: 100%; max-width: 1040px; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.auth-story { color: var(--text-2); min-width: 0; }
.auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center;
              margin-bottom: 10px; }
.auth-story .auth-brand { justify-content: flex-start; margin-bottom: 28px; }
.auth-brand .brand-mark { width: 42px; height: 42px; border-radius: 14px; font-size: 16px; }
.auth-brand .brand-name { color: var(--ink); font-size: 17px; font-weight: 600;
                          letter-spacing: -.03em; }
.auth-claim {
  font-size: clamp(30px, 4.2vw, 46px); font-weight: 600; letter-spacing: -.045em;
  line-height: 1.08; color: var(--ink); margin: 0 0 16px; text-wrap: balance;
}
.auth-claim em { font-style: normal; color: var(--accent); }
.auth-story > p { font-size: 15.5px; line-height: 1.6; color: var(--text-2);
                  max-width: 46ch; margin: 0 0 24px; }
.auth-story .chain { gap: 12px; }
.auth-story .chain li { font-size: 13.5px; }
.auth-cta { display: inline-flex; margin-top: 26px; }
.auth-cta-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-3); }
.auth-panel {
  width: 100%; max-width: 400px; background: var(--canvas); border: 0;
  border-radius: var(--radius-lg); padding: 30px 28px 24px;
  box-shadow: var(--haarlinie), var(--schatten-hoch);
}
.auth-split .auth-panel { max-width: none; }
.auth-panel .hint { text-align: center; color: var(--text-2); font-size: 13.5px; }
.auth-panel .auth-heading { margin: 0 0 4px; font-size: 21px; font-weight: 600;
                            letter-spacing: -.035em; }
.auth-panel .auth-heading + .hint { text-align: left; margin: 0 0 18px; font-size: 13px; }
.auth-foot { text-align: center; color: var(--text-3); font-size: 11.5px; margin-top: 20px; }
.authbox { max-width: 420px; margin: 9vh auto; padding: 0 16px; }
.authbox .card { padding: 28px; }
.authnote { margin-top: 16px; background: var(--bg); border-radius: var(--radius);
            box-shadow: var(--haarlinie-weich); padding: 18px 20px; color: var(--text-2); }
.authnote-lead { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 500;
                 line-height: 1.5; }
.authnote .chain { margin-top: 14px; gap: 9px; }
.authnote .chain li { font-size: 12.5px; }
.authnote-foot { margin: 14px 0 0; font-size: 11.5px; color: var(--text-3); }
.rolehint { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 5px;
            font-size: 12.5px; }
.rolehint strong { color: var(--ink); font-weight: 600; margin-right: 5px; }
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; gap: 28px; max-width: 440px; }
  .auth-story .chain { display: none; }
  .auth-claim { font-size: 30px; }
}

/* ═══ Erstanmeldung: ein Fenster, eine Frage (D-015) ═══════════════ */
.wk-backdrop {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 24px;
  background: #0a0a0a;
  animation: seite-ein .42s var(--ease-fluid);
}
.wk-dialog {
  width: 100%; max-width: 580px; max-height: 88dvh; overflow: hidden auto;
  background: var(--canvas); border-radius: 20px;
  box-shadow: var(--schatten-fenster);
}
.wk-track { height: 2px; background: var(--surface-2); overflow: hidden;
            border-radius: 20px 20px 0 0; }
.wk-fill { height: 100%; background: var(--accent);
           transition: width .6s var(--ease-fluid); }
.wk-body { padding: 32px 36px; animation: seite-ein .42s var(--ease-fluid); }
.wk-count {
  display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font-size: 10px;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.wk-count .brand-mark { width: 24px; height: 24px; border-radius: 8px; font-size: 10px; }
.wk-count-sep { color: var(--muted-ink); }
.wk-count .wk-phase { color: var(--accent); }
.wk-title { font-size: clamp(24px, 3.2vw, 32px); font-weight: 600;
            letter-spacing: -.045em; line-height: 1.12; margin: 0 0 10px; }
.wk-lead { color: var(--text-2); font-size: 14.5px; margin: 0 0 26px; line-height: 1.55; }
.wk-sub { font-size: 13px; font-weight: 600; margin: 24px 0 10px; color: var(--ink); }
.wk-opt { font-weight: 400; color: var(--text-3); }
.wk-under { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .5);
            text-align: center; }
.wk-under a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.wk-under a:hover { color: #fff; text-decoration: underline; }
.wk-form input, .wk-form textarea { font-size: 15px; }
.wk-form label { margin: 16px 0 6px; }
.wk-form > label:first-child { margin-top: 0; }
.wk-pair { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.wk-pair label { margin-top: 0; }
.wk-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
          margin-top: 28px; }
.wk-nav .btn.big { flex: 1; }
.wk-nav .btn.ghost { flex: none; }
.wk-skip { flex-basis: 100%; font-size: 12.5px; color: var(--text-3);
           text-decoration: none; }
.wk-skip:hover { color: var(--text-2); text-decoration: underline; }

.wk-roles { display: grid; gap: 9px; }
button.wk-role {
  --btn-bg: var(--canvas); --btn-fg: var(--ink);
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--haarlinie);
  font-weight: 500; justify-content: flex-start; white-space: normal;
}
button.wk-role:hover { --btn-bg: var(--canvas);
                       box-shadow: var(--haarlinie), var(--schatten-flach);
                       transform: translateY(-1px); }
.wk-role-dot { width: 10px; height: 10px; border-radius: var(--pill); flex: none; }
.wk-role-body { display: grid; gap: 1px; min-width: 0; }
.wk-role-label { font-size: 16px; font-weight: 600; letter-spacing: -.03em;
                 line-height: 1.3; }
.wk-role-line { font-size: 13px; font-weight: 400; color: var(--text-2); }
.wk-role-go { margin-left: auto; flex: none; color: var(--text-3);
              transition: transform .3s var(--ease-fluid), color .3s var(--ease-fluid); }
button.wk-role:hover .wk-role-go { color: var(--ink); transform: translateX(3px); }
.pv-startup { background: var(--accent); }
.pv-coach { background: var(--green); }
.pv-institution { background: var(--purple); }

.wk-invite, .wk-flash {
  border-radius: var(--radius); padding: 11px 14px; font-size: 12.5px;
  background: var(--green-soft); color: #0f6b4a; margin: 0 0 20px;
  display: flex; align-items: center; gap: 9px; font-weight: 500;
}
.wk-flash svg { flex: none; }
.wk-flash span { color: var(--text-2); font-weight: 400; }
.wk-echo { display: flex; align-items: center; gap: 9px; margin: -4px 0 20px;
           font-size: 12.5px; color: var(--text-2); }
.wk-echo .kind-pill { font-size: 11px; }
.wk-echo a { color: var(--text-3); text-decoration: none; margin-left: auto; }
.wk-echo a:hover { color: var(--accent); text-decoration: underline; }
.wk-tagcount { font-size: 12.5px; color: var(--text-3); margin: 10px 0 0;
               font-variant-numeric: tabular-nums; }
.wk-tagcount.full { color: var(--accent); font-weight: 600; }
.wk-block + .wk-block { margin-top: 24px; padding-top: 22px;
                        box-shadow: inset 0 1px 0 var(--rule); }
.wk-matches { display: grid; gap: 10px; }
.wk-matches .matchcard .mc-actions { margin-top: 11px; }
.wk-actions {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; background: var(--canvas); margin: 20px -36px -32px;
  padding: 16px 36px 20px; box-shadow: 0 -14px 24px -20px rgba(10, 10, 10, .3);
}
.wk-actions .btn.big { flex: 1; }
.wk-actions .wk-skip { flex: none; }
@media (max-width: 560px) {
  .wk-backdrop { padding: 0; gap: 0; justify-content: flex-start; background: var(--canvas); }
  .wk-dialog { max-width: none; max-height: none; min-height: 100dvh; overflow: visible;
               border-radius: 0; box-shadow: none; }
  .wk-track { border-radius: 0; }
  .wk-body { padding: 24px 18px 28px; }
  .wk-actions { margin: 20px -18px -28px; padding: 14px 18px 16px; }
  .wk-actions .btn.big { flex-basis: 100%; }
  .wk-actions .wk-skip { display: none; }
  .wk-under { padding: 0 18px 22px; color: var(--text-3); background: var(--canvas); }
  .wk-under a { color: var(--text-2); }
  .wk-nav .btn.big { order: 1; flex-basis: 100%; }
  .wk-nav .btn.ghost { order: 2; }
  .wk-nav .wk-skip { order: 3; flex-basis: auto; margin-left: auto; }
}

/* ═══ Netzwerk: Rollen, Steckbrief, Spinnennetz ════════════════════
   Drei Rollenfarben, die auch als 7-px-Punkt unterscheidbar bleiben.
   `netzwerk.js` liest sie über ein Probe-Element aus genau diesen
   Klassen — keine Hex-Werte im Skript. */
.kind-startup { --kind: var(--accent); --kind-soft: var(--accent-soft);
                --kind-line: var(--accent-line); }
.kind-coach { --kind: var(--green); --kind-soft: var(--green-soft);
              --kind-line: var(--green-line); }
.kind-institution { --kind: var(--purple); --kind-soft: var(--purple-soft);
                    --kind-line: var(--purple-line); }
.kind-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 10px; border-radius: var(--pill);
  background: var(--kind-soft, var(--surface-2)); color: var(--kind, var(--text-2));
  white-space: nowrap;
}
.kind-pill .dot { width: 6px; height: 6px; background: var(--kind, var(--text-3)); }

.fieldgroup { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldgroup > legend { padding: 0; }
.fg-legend { font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.tagpick { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 4px; }
.tagpick label {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  border-radius: var(--pill); padding: 7px 14px; font-size: 13px; font-weight: 500;
  color: var(--ink); background: var(--canvas); cursor: pointer; user-select: none;
  box-shadow: var(--haarlinie);
  transition: background .2s var(--ease-fluid), box-shadow .2s var(--ease-fluid),
              color .2s var(--ease-fluid);
}
.tagpick label:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.tagpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.tagpick input:checked + span { color: #fff; }
.tagpick label:has(input:checked) { background: var(--ink); color: #fff; box-shadow: none; }
.tagpick label:has(input:focus-visible) { outline: 2px solid var(--accent-deep);
                                          outline-offset: 2px; }
/* Bedarf ist die andere Richtung als Angebot — dieselbe Liste, andere Farbe. */
.tagpick.want label:has(input:checked) { background: var(--accent); }

.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
@media (max-width: 760px) { .formgrid { grid-template-columns: 1fr; } }
.formgrid .wide { grid-column: 1 / -1; }
.savebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           margin-top: 20px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--rule); }
/* Der Steckbrief ist lang — der Speichern-Knopf stand ganz unten außer Sicht. */
#profile-form .savebar {
  position: sticky; bottom: 0; z-index: 5; background: var(--canvas);
  margin: 20px -22px -20px; padding: 14px 22px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 -12px 22px -20px rgba(10, 10, 10, .3);
}
.saved-note { font-size: 12.5px; color: var(--green); font-weight: 600; }

.matchcard {
  border-radius: var(--radius); background: var(--canvas); padding: 16px 18px;
  display: flex; gap: 15px; align-items: flex-start; box-shadow: var(--haarlinie);
  transition: box-shadow .28s var(--ease-fluid), transform .28s var(--ease-fluid);
}
.matchcard + .matchcard { margin-top: 10px; }
.matchcard:hover { box-shadow: var(--haarlinie), var(--schatten-flach);
                   transform: translateY(-1px); }
.matchcard .mc-body { flex: 1; min-width: 0; }
.matchcard h3 { margin: 0 0 2px; font-size: 16px; font-weight: 600;
                letter-spacing: -.03em; line-height: 1.3; }
.matchcard h3 a { color: inherit; text-decoration: none; }
.matchcard h3 a:hover { color: var(--accent); }
.matchcard .mc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                      margin-bottom: 6px; }
.matchcard .mc-line { font-size: 13.5px; color: var(--text-2); margin: 0 0 10px;
                      line-height: 1.5; }
.matchcard .mc-actions { display: flex; gap: 8px; align-items: center;
                         flex-wrap: wrap; margin-top: 12px; }
/* Die Begründung ist das Produkt, nicht die Zahl. */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.reasons li { position: relative; padding-left: 18px; font-size: 12.5px;
              color: var(--text-2); line-height: 1.5; }
.reasons li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 4px;
  border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green);
  transform: rotate(-45deg);
}
.score {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid;
  place-items: center; font-size: 16px; font-weight: 600; color: var(--ink);
  letter-spacing: -.04em; position: relative;
  background: conic-gradient(var(--kind, var(--accent)) calc(var(--pct, 0) * 1%),
                             var(--surface-2) 0);
}
.score::after { content: ""; position: absolute; inset: 4px; border-radius: 50%;
                background: var(--canvas); }
.score span { position: relative; z-index: 1; }
.score small { position: relative; z-index: 1; font-size: 8.5px; font-weight: 600;
               text-transform: uppercase; letter-spacing: .1em; color: var(--text-3);
               display: block; text-align: center; margin-top: -2px; }

.netgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
           gap: 12px; align-items: start; }
@media (max-width: 1000px) { .netgrid { grid-template-columns: 1fr; } }
.web-wrap { position: relative; border-radius: var(--radius-lg); background: var(--canvas);
            overflow: hidden; box-shadow: var(--haarlinie); }
.web-wrap svg { display: block; width: 100%; height: 470px; touch-action: none;
                cursor: grab; }
.web-wrap.is-small svg { height: 290px; }
.web-wrap svg:active { cursor: grabbing; }
.web-edge { stroke: var(--rule); fill: none; }
.web-edge.vorschlag { stroke-dasharray: 4 5; stroke: var(--border-strong); }
.web-edge.nachbarschaft { stroke-dasharray: 2 6; }
.web-edge.aktiv { stroke: var(--green); }
.web-edge.angefragt { stroke: var(--seal); stroke-dasharray: 6 4; }
.web-node { cursor: pointer; }
.web-node circle { stroke: var(--canvas); stroke-width: 2.5;
                   transition: r .3s var(--ease-fluid); }
.web-node text { font-family: var(--font-ui); font-size: 11px; font-weight: 500;
                 fill: var(--ink); paint-order: stroke; stroke: var(--canvas);
                 stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.web-node.dim { opacity: .3; }
.web-node.selected circle { stroke: var(--ink); stroke-width: 2.5; }
.web-legend { display: flex; gap: 15px; flex-wrap: wrap; align-items: center;
              padding: 11px 15px; box-shadow: inset 0 1px 0 var(--rule);
              background: var(--canvas); font-size: 12px; color: var(--text-2); }
.web-legend span { display: inline-flex; align-items: center; gap: 6px; }
.web-empty { display: grid; place-items: center; text-align: center; padding: 72px 24px; }

.nodepanel { border-radius: var(--radius-lg); background: var(--canvas); padding: 16px;
             min-height: 180px; box-shadow: var(--haarlinie); }
.nodepanel h3 { margin: 0 0 3px; font-size: 17px; letter-spacing: -.03em; }
.nodepanel p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 10px; }
.nodepanel dt { font-size: 10.5px; font-weight: 600; color: var(--text-2);
                margin: 14px 0 5px; text-transform: uppercase; letter-spacing: .13em; }
.nodepanel dd { margin: 0; font-size: 13.5px; }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.taglist .tag { font-size: 11.5px; font-weight: 500; border-radius: var(--pill);
                padding: 4px 10px; background: var(--surface-2); color: var(--text-2); }
.taglist .tag.hit { background: var(--green-soft); color: #0f6b4a; }

/* ═══ Businessplan-Baukasten ═══════════════════════════════════════ */
.planlist { max-width: 780px; }
.planstep { border-radius: var(--radius); background: var(--canvas); padding: 15px 17px;
            box-shadow: var(--haarlinie);
            transition: box-shadow .28s var(--ease-fluid); }
.planstep + .planstep { margin-top: 10px; }
.planstep:focus-within { box-shadow: var(--haarlinie), var(--schatten-flach); }
.planstep.done { box-shadow: inset 0 0 0 1px var(--green-line); }
.planstep label { display: flex; align-items: center; gap: 10px; font-size: 15px;
                  font-weight: 600; letter-spacing: -.02em; color: var(--ink);
                  margin: 0 0 9px; text-transform: none; }
.planstep textarea { min-height: 92px; }
.planstep .num {
  display: inline-flex; width: 22px; height: 22px; flex: none;
  border-radius: var(--pill); align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-2);
}
.planstep .num::before { content: "\2022"; font-size: 13px; line-height: 1; }
.planstep.done .num { background: var(--green-soft); color: #0f6b4a; }
.planstep.done .num::before { content: "\2713"; font-size: 11px; }
.planstep-fold { padding: 0; }
.planstep-fold > summary { display: flex; align-items: center; gap: 10px;
                           padding: 13px 17px; cursor: pointer; font-size: 15px;
                           font-weight: 600; letter-spacing: -.02em;
                           border-radius: var(--radius);
                           transition: background .2s var(--ease-fluid); }
.planstep-fold > summary::before { content: none; }
.planstep-fold > summary::after {
  content: ""; margin-left: auto; flex: none; width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease-fluid);
}
.planstep-fold[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.planstep-fold > summary:hover { background: var(--bg); }
.planstep-fold[open] > summary { box-shadow: inset 0 -1px 0 var(--rule);
                                 border-radius: var(--radius) var(--radius) 0 0; }
.planstep-fold .fold-body { padding: 14px 17px 16px; }
.plan-more { font-size: 10.5px; font-weight: 600; text-transform: uppercase;
             letter-spacing: .16em; color: var(--text-2); margin: 26px 0 10px; }
.plan-shortcut {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-radius: var(--radius); background: var(--bg);
  box-shadow: var(--haarlinie-weich); padding: 13px 16px; margin-bottom: 14px;
  font-size: 13.5px; color: var(--text-2);
}
.plan-shortcut .btn { margin-left: auto; }
.progress-line { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
                 font-size: 13.5px; color: var(--text-2); }
.progress-line .bar { flex: 1; min-width: 120px; height: 5px; border-radius: var(--pill);
                      background: var(--surface-2); overflow: hidden; }
.progress-line .bar i { display: block; height: 100%; background: var(--accent);
                        transition: width .6s var(--ease-fluid); }

/* ═══ Postfach ═════════════════════════════════════════════════════ */
.inbox-group + .inbox-group { margin-top: 34px; }
.inbox-group > h2 { display: flex; align-items: center; gap: 10px; font-size: 18px;
                    margin: 0 0 12px; }
.inbox-group > h2 .count { font-size: 10.5px; font-weight: 600; color: var(--text-2);
                           background: var(--surface-2); border-radius: var(--pill);
                           padding: 3px 9px; }
.quote { padding-left: 13px; margin: 10px 0 0; font-size: 14px; color: var(--text-2);
         line-height: 1.55; box-shadow: inset 2px 0 0 var(--border-strong); }
.thread { display: flex; flex-direction: column; gap: 10px; max-height: 52vh;
          overflow-y: auto; padding: 3px; }
.msg { max-width: 76%; border-radius: var(--radius); padding: 10px 14px;
       background: var(--canvas); box-shadow: var(--haarlinie); font-size: 14px;
       line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.msg.mine { align-self: flex-end; background: var(--ink); color: #fff; box-shadow: none; }
.msg .msg-meta { display: block; margin-top: 5px; font-size: 10.5px; color: var(--text-3);
                 text-transform: uppercase; letter-spacing: .1em; }
.msg.mine .msg-meta { color: rgba(255, 255, 255, .55); }
.msg.unseen { box-shadow: inset 0 0 0 1.5px var(--seal-line); }
.sendbox { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
.sendbox textarea { flex: 1; min-height: 68px; }

/* ═══ Einladungen, Programm, Verwaltung ════════════════════════════ */
.invitelink { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
              background: var(--bg); border-radius: var(--radius);
              box-shadow: var(--haarlinie-weich); padding: 11px 13px; margin-top: 10px; }
.invitelink code { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; color: var(--ink);
                   font-variant-numeric: tabular-nums; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px; }
.barlist { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.barlist li { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px;
              align-items: center; font-size: 13.5px; }
.barlist .bar-label { color: var(--text-2); }
.barlist .bar-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink);
                  letter-spacing: -.02em; }
.barlist .bar-track { grid-column: 1 / -1; height: 5px; border-radius: var(--pill);
                      background: var(--surface-2); overflow: hidden; }
.barlist .bar-fill { display: block; height: 100%; background: var(--accent);
                     transition: width .6s var(--ease-fluid); }
.barlist li.gap .bar-fill { background: var(--amber); }
.admintable td:first-child { max-width: 320px; white-space: normal; }
.admintable td, .admintable th { vertical-align: top; }
.admintable tr.gedimmt td { color: var(--text-3); }
.admintable tr.gedimmt td:first-child a { color: var(--text-2); }

/* ═══ Hilfe-Panel ══════════════════════════════════════════════════ */
dialog.help {
  position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh;
  width: min(420px, 94vw); max-width: none; border: 0; border-radius: 0;
  overflow-y: auto; padding: 22px 24px calc(24px + env(safe-area-inset-bottom));
  background: var(--canvas); box-shadow: var(--schatten-hoch);
}
dialog.help[open] { animation: help-in .42s var(--ease-fluid); }
@keyframes help-in { from { transform: translateX(40px); opacity: 0; } }
.help-head { display: flex; justify-content: space-between; align-items: center;
             margin-bottom: 4px; }
.help-head strong { font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
dialog.help h3 { font-size: 10.5px; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .16em; color: var(--text-2); margin: 22px 0 7px; }
dialog.help p { font-size: 13.5px; color: var(--text-2); margin: 0 0 7px; line-height: 1.55; }
button.nav-item { box-shadow: none; }
button.nav-item:hover { transform: none; box-shadow: none; }

/* ═══ Fragezeichen-Kreise ══════════════════════════════════════════
   Die Anwendung stellt Fragen, deren Antwort später viel bestimmt — die
   Zielgruppe steuert die Firmensuche, Angebot und Bedarf das Matching.
   Wer da rät, rät sich durch die halbe Anwendung. */
.hilfe { position: relative; display: inline-block; vertical-align: middle;
         margin-left: 7px; }
.hilfe-knopf {
  --btn-bg: var(--canvas); --btn-fg: var(--text-2);
  width: 18px; height: 18px; min-height: 0; padding: 0; border-radius: var(--pill);
  box-shadow: var(--haarlinie); font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: 0; text-transform: none;
}
.hilfe-knopf:hover { --btn-bg: var(--surface-2); --btn-fg: var(--ink);
                     box-shadow: inset 0 0 0 1px var(--border-strong); }
.hilfe-knopf[aria-expanded="true"] { --btn-bg: var(--ink); --btn-fg: #fff;
                                     box-shadow: none; }
/* Nach rechts geöffnet: die Kreise stehen am Zeilenanfang, eine zentrierte
   Blase liefe links aus der Karte heraus. */
.hilfe-bubble {
  position: absolute; z-index: var(--z-bar); top: calc(100% + 10px); left: -9px;
  display: block; width: max-content; max-width: min(320px, calc(100vw - 44px));
  background: var(--ink); color: rgba(255, 255, 255, .85);
  border-radius: var(--radius); padding: 12px 15px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 400; line-height: 1.55;
  letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: var(--schatten-hoch);
  animation: hilfe-in .3s var(--ease-fluid);
}
.hilfe-bubble[hidden] { display: none; }
@keyframes hilfe-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.hilfe-bubble::before { content: ""; position: absolute; top: -4px; left: 13px;
                        width: 9px; height: 9px; background: var(--ink);
                        border-radius: 2px; transform: rotate(45deg); }
.hilfe-text { display: block; }
.hilfe-bsp { display: block; margin-top: 10px; padding-top: 10px;
             box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
             color: rgba(255, 255, 255, .95); }
.hilfe-bsp-label { display: block; font-size: 9.5px; font-weight: 600;
                   text-transform: uppercase; letter-spacing: .16em;
                   color: rgba(255, 255, 255, .45); margin-bottom: 4px; }
label .hilfe, .kpi-label .hilfe, .fg-legend .hilfe { letter-spacing: 0; }
/* Kein Platz mehr nach rechts? Dann öffnet sie nach links. Die Klasse setzt
   das Skript beim Öffnen, nachdem es gemessen hat. */
.hilfe-bubble.nach-links { left: auto; right: -9px; }
.hilfe-bubble.nach-links::before { left: auto; right: 13px; }

/* ═══ Seitenwechsel ohne Weißblitz ═════════════════════════════════
   Die Leiste bekommt einen eigenen Namen und wird dadurch aus der
   Überblendung des Inhalts herausgenommen — sie bleibt beim Wechsel
   stehen. Browser ohne Unterstützung navigieren wie bisher. */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: leiste; }
.tabbar { view-transition-name: reiter; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .26s; animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
::view-transition-old(leiste), ::view-transition-new(leiste),
::view-transition-old(reiter), ::view-transition-new(reiter) { animation-duration: .2s; }
@supports (view-transition-name: none) {
  .content main, .pagehead { animation: none; }
}

/* ═══ Mobil: schwebende Navigationsinsel ═══════════════════════════ */
.tabbar {
  display: none; position: fixed; z-index: var(--z-tab);
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-radius: var(--pill); padding: 5px;
  justify-content: space-around; align-items: stretch;
  box-shadow: var(--schatten-hoch), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; flex: 1; max-width: 130px; min-height: 46px; padding: 5px 8px;
  border-radius: var(--pill); text-decoration: none; color: rgba(255, 255, 255, .6);
  font-size: 10px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  transition: background .28s var(--ease-fluid), color .28s var(--ease-fluid);
}
.tabbar a.active { color: #fff; background: rgba(255, 255, 255, .14); }
.tabbar svg { flex: none; }
/* Der Platzhalter für den Postfach-Punkt ist leer, bis htmx ihn füllt. Als
   leeres Flex-Kind zählt er sonst eine Lücke mit und schiebt Symbol und
   Beschriftung dieses einen Reiters aus der Reihe. */
.tabbar a > span:not([class]):empty { display: none; }

/* Seiten ohne Gerüst (CRM-Popups) */
body > main { max-width: 1100px; margin: 32px auto 56px; padding: 0 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ═══ Mobil ════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  html, body { overflow-x: clip; }
  .shell { flex-direction: column; }
  /* Die Leiste wird zur schlanken Kopfzeile: nur Marke und Konto. Die
     Navigation wandert in die Insel unten. */
  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: var(--z-bar);
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px 16px; overflow: visible;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 -1px 0 var(--rule);
  }
  .brand { padding: 0; }
  .brand-mark { width: 32px; height: 32px; border-radius: 11px; font-size: 12px; }
  .nav-label, .sidebar .nav, .sidebar .spacer { display: none; }
  .sidebar-foot { box-shadow: none; padding-top: 0; margin-top: 0; min-width: 0;
                  flex-direction: row; align-items: center; gap: 6px; margin-left: auto; }
  .user-chip { padding: 0; min-width: 0; flex: 0 1 auto; }
  .user-mail { max-width: 110px; font-size: 12px; }
  .sidebar-foot button { width: auto; }
  .tabbar { display: flex; }
  .content main { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

  .pagehead { padding-top: 18px; }
  .pagehead h1 { font-size: 22px; }
  .faden { padding: 10px 16px; gap: 9px 10px; }
  .faden-text { flex: 1 1 150px; }
  .faden-rest { margin-left: 0; gap: 14px; }
  .ob { flex-wrap: wrap; }
  .ob-act { flex-basis: 100%; align-self: stretch; }
  .ob-act .btn { width: 100%; }
  .card { padding: 16px 15px; }
  .content main, .pagehead, .wizbar-inner { padding-left: 16px; padding-right: 16px; }
  .wiz-shell { margin-top: 22px; }

  /* Kennzahlen: Wischleiste mit Rasterung statt 2×2-Block */
  .kpis { display: flex; overflow-x: auto; gap: 10px; margin: 16px -16px 0;
          padding: 2px 16px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .kpis::-webkit-scrollbar { display: none; }
  .kpi { min-width: 176px; flex: none; scroll-snap-align: start; }

  /* Touch-Ziele: 44 px, 16-px-Felder (verhindert iOS-Auto-Zoom) */
  button, .btn { min-height: 44px; padding: 11px 18px; }
  .chip { min-height: 40px; }
  .check-item { min-height: 40px; }
  input[type=text], input[type=email], input[type=password], input[type=search],
  input:not([type]), select, textarea { font-size: 16px; min-height: 44px; }
  input[type=file] { min-height: 0; }
  .hilfe-knopf { min-height: 0; width: 20px; height: 20px; padding: 0; }

  dialog { width: 94%; padding: 18px; }
  dialog.help { width: min(420px, 94vw); }
  .option-card { padding: 15px 14px; gap: 12px; }
  .web-wrap svg { height: auto; aspect-ratio: 760 / 560; }
  .tagpick label { min-height: 40px; }
  .matchcard { padding: 14px; gap: 11px; }
  .thread { max-height: none; }
  .msg { max-width: 88%; }
  .sendbox { flex-direction: column; align-items: stretch; }
  .score { width: 46px; height: 46px; font-size: 15px; }
  #profile-form .savebar { bottom: calc(74px + env(safe-area-inset-bottom));
                           margin: 20px -15px -16px; padding: 12px 15px; }
  .result-bar { align-items: flex-start; }

  /* Auf schmalen Schirmen wird aus der Blase eine Leiste am unteren Rand:
     die Beschriftungen stehen links, und die Kennzahlen liegen in einer
     Wischleiste, die eine absolut gesetzte Blase abschneiden würde. */
  .hilfe-bubble {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom)); top: auto;
    width: auto; max-width: none; z-index: var(--z-tab);
    font-size: 13.5px; padding: 15px 17px; border-radius: var(--radius-lg);
  }
  .hilfe-bubble::before { content: none; }
}
@media (max-width: 480px) {
  .user-mail { display: none; }
  .tabbar a { font-size: 9.5px; }
}

/* ── Steckbrief bestätigen (Schritt 4) ───────────────────────────────────── */
.bestaetigen .b-block { padding: 12px 0; border-top: 1px solid var(--border); }
.bestaetigen .b-block:first-child { border-top: 0; padding-top: 0; }
.bestaetigen .b-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-size: 14px; }
.bestaetigen .b-kopf .pill { margin-left: auto; }
.bestaetigen .b-freigabe input[type=checkbox] { width: 18px; height: 18px; margin: 0;
  accent-color: var(--accent); }
.bestaetigen .b-frage { background: var(--accent-soft, #eef3ff); margin-top: 6px;
  padding: 14px 16px 16px; border-radius: 10px; border-top: 0; }
.bestaetigen .chips label.chip { cursor: pointer; user-select: none; }