/* VetAgent — Entwurfs-Stylesheet
   Tokens aus Anhang A.1 des Architekturleitfadens, ergänzt nach
   docs/development/ui-entwuerfe/00-designsystem.md.

   Eine Datei für alle fünf Screens. In der Umsetzung wandert das nach
   packages/ui; hier bleibt es eine Datei, damit der Entwurf ohne Build-Kette
   anzusehen ist. */

/* ─────────────────────────────────────────────── Tokens */
:root{
  /* Die Markenfarben von vetexperts.de, am 21.09.2026 aus den gemalten
     Stilen der Seite ausgelesen — nicht aus dem Gedaechtnis und nicht aus
     einem Screenshot gepipettet. Die Namen sind ihre, damit ein Abgleich
     moeglich bleibt:

       brand-petrol     #2A6B71   Ueberschriften, Raender, dunkle Flaechen
       brand-turquoise  #2D858F   Knoepfe, Links, Akzent
       brand-mint       #2BB8A6   heller Akzent, Hervorhebung im Fliesstext
       brand-steel      #5D8EA2   ruhiger Zweitakzent
       surface-gray     #F5F7F6   Flaechenton

     `--brand-teal` hiess hier schon immer #2D858F und ist damit identisch
     mit `brand-turquoise`. Es bleibt als Alias stehen, damit die fuenf
     bestehenden Screens nicht angefasst werden muessen. */
  --brand-petrol:#2A6B71; --brand-turquoise:#2D858F;
  --brand-mint:#2BB8A6;   --brand-steel:#5D8EA2;
  --surface-gray:#F5F7F6;

  /* Mint auf Petrol sind 2,47:1 — zu wenig fuer jeden Text. WCAG 1.4.3
     verlangt 4,5:1, fuer grossen Text (ab 18,66px fett oder 24px) 3:1.
     Diese Aufhellung kommt auf 3,40:1 und ist damit fuer Ueberschriften
     zulaessig, fuer Fliesstext weiterhin nicht. Wer Mint auf dunklem Grund
     braucht, nimmt das hier — und fuer kleinen Text Weiss. */
  --mint-auf-dunkel:#75D1C5;

  --brand-navy:#1A2F5E; --brand-teal:var(--brand-turquoise); --brand-teal-600:#1C8F97; --brand-teal-50:#E9F6F6;
  --vetagent:#3D3B8E; --radar-navy:#041A31; --radar-blue:#77C0F7; --radar-orange:#EF8B36;
  --ink:#1B2430; --ink-2:#4B5563; --ink-3:#6B7280; --line:#DCE3EA; --surface:#F5F8FA; --bg:#fff;
  --success:#047857; --warning:#B45309; --destructive:#B91C1C; --info:#1D4ED8;

  /* Der Leitfaden nennt für #2D858F 4,6:1 — rechnerisch sind es 4,32:1 und
     damit unter AA für normalen Text. --primary-ink ist die Textvariante. */
  --primary-ink:#27767F; --primary-hover:#21666E; --primary-soft:var(--brand-teal-50);
  --line-strong:#7F8FA1; --focus:var(--vetagent);

  --status-new:var(--success);      --status-new-soft:#DCFCE7;
  --status-active:var(--info);      --status-active-soft:#DBEAFE;
  --status-changed:var(--warning);  --status-changed-soft:#FEF3C7;
  --status-stale:var(--ink-2);      --status-stale-soft:#E5E7EB;
  --accent-soft:#E4E3F5;

  /* Weiche Flaechen der Bewerberstrecke (Entwurf „VetExperts Connect",
     05.10.2026): je eine Flaeche mit ihrer Textfarbe. Jede Textfarbe hat
     auf ihrer Flaeche mindestens 4,5:1 (gerechnet am 09.10.2026: Teal
     4,76, Sand 5,85, Rose 6,85, Mint 5,83). */
  --pastel-teal:var(--brand-teal-50); --pastel-teal-ink:var(--primary-ink);
  --pastel-sand:#FBF5EA;  --pastel-sand-ink:#7A5A1E;
  --pastel-rose:#FAEFF1;  --pastel-rose-ink:#8E3445;
  --pastel-mint:#EAF7F1;  --pastel-mint-ink:#1F6B4F;

  /* Kandidatenreise in drei Schritten (Entwurf „VetExperts Connect |
     Kandidatenreise im Opt-in-Prozess", 19.10.2026). Zwei weitere Flaechen
     fuer die Kacheln „Karriereberatung" und „VetRadar" (bis 25.10.2026
     „Fort- und Weiterbildung"), je mit Textfarbe ab 4,5:1 (gerechnet am
     19.10.2026: Pfirsich 6,59, Flieder 6,82). Das Orange traegt das „!" der Ueberschrift und die Zeichen auf
     Pfirsich: 3,37:1 auf Weiss -- genug fuer grossen Text und Grafik
     (WCAG 1.4.3/1.4.11), nicht fuer Fliesstext. */
  --pastel-peach:#FFF4EA; --pastel-peach-ink:#8A4510;
  --pastel-lilac:#F3EFFC; --pastel-lilac-ink:#5B3FA8;
  --akzent-orange:#E06A00;
  /* Das helle Blau der Karte „CV-Generator" (Entwurf Seite 3) mit Textfarbe
     6,27:1, und der Fleck hinter Luci (Entwurf Seite 1, aus dem Bild
     gemessen) -- er nimmt den Rand des Ausschnitts auf. */
  --pastel-blue:#EEF6FC; --pastel-blue-ink:#1F5F8B;
  --pastel-sky:#E0F4FA;

  /* Fachbereichsfarben für <CandidateMark> */
  --field-kleintier:#0F766E;   --field-kleintier-soft:#CCFBF1;
  --field-pferd:#92400E;       --field-pferd-soft:#FEF3C7;
  --field-nutztier:#4D7C0F;    --field-nutztier-soft:#ECFCCB;
  --field-exoten:#6D28D9;      --field-exoten-soft:#EDE9FE;
  --field-gemischt:#1E40AF;    --field-gemischt-soft:#DBEAFE;
  --field-unbekannt:var(--ink-2); --field-unbekannt-soft:#E5E7EB;

  --radius:10px; --radius-sm:6px; --radius-lg:14px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgb(27 36 48/.06),0 1px 3px rgb(27 36 48/.08);
  --shadow-sheet:0 -4px 24px rgb(27 36 48/.16);
  /* Bis zum 21.09.2026 fehlten diese beiden. `login.html` und die Meldung
     in `api.js` benutzten sie trotzdem — CSS meldet das nicht, es setzt
     die Eigenschaft einfach nicht. Die Anmeldemaske hatte deshalb keinen
     Hintergrund und die Meldung keinen Schatten, und beides sah aus wie
     eine Gestaltungsentscheidung. */
  --shadow-md:0 4px 16px rgb(27 36 48/.10),0 1px 3px rgb(27 36 48/.08);
  --bg-muted:#EDF2F6;
  --touch:44px; --sidebar-w:240px; --topbar-h:56px; --bottomnav-h:64px;

  /* Die Schriften der Marke (`assets/fonts.css`, selbst ausgeliefert).
     `Onest` fuer alles, `Fraunces` fuer Ueberschriften mit Anspruch —
     dieselbe Aufteilung wie auf vetexperts.de. `Inter` bleibt als erster
     Ersatz: Die fuenf bestehenden Screens sind darin gesetzt und aendern
     ihre Zeilenumbrueche nicht, solange sie sie findet. */
  --font:"Onest","Inter",system-ui,-apple-system,sans-serif;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;

  /* Bewegung an einer Stelle. Wer sie abstellt, stellt sie ueberall ab —
     und `prefers-reduced-motion` weiter unten tut genau das. */
  --dauer:.22s; --dauer-lang:.5s;
  --kurve:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--surface);color:var(--ink);font-size:14px;line-height:20px;
     -webkit-font-smoothing:antialiased;font-feature-settings:"cv05","cv08","ss03"}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
h1,h2,h3{letter-spacing:-.01em}
/* Grundgröße für jedes Inline-Icon. Alle .klasse-svg-Regeln weiter unten sind
   spezifischer und überschreiben das; ohne diese Zeile fällt ein Icon ohne
   gestylten Elternknoten auf seine natürliche Größe zurück. */
svg{width:16px;height:16px;flex:none;stroke-width:2}

/* ─────────────────────────────────────────────── Shell */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;overflow:hidden}
.sidebar{background:var(--bg);border-right:1px solid var(--line);display:flex;flex-direction:column;
         height:100vh;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px 24px;font-size:20px;font-weight:700;
       letter-spacing:-.02em;color:var(--brand-navy);text-decoration:none}
/* Die offiziellen Marken liegen als PNG vor — echte Vektoren gibt es nicht,
   siehe packages/ui/brand/HERKUNFT.md. Deshalb feste Maximalbreiten statt
   beliebiger Skalierung. */
.brandlogo{display:block;width:100%;max-width:132px;height:auto;margin:0 auto}
.nav{padding:0 10px;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);
       color:var(--ink-2);text-decoration:none;font-weight:500;min-height:var(--touch);position:relative}
.nav a:hover{background:var(--surface)}
.nav a[aria-current]{background:var(--primary-soft);color:var(--primary-ink);font-weight:600;
                     box-shadow:inset 3px 0 0 var(--primary-ink)}
.nav svg{width:20px;height:20px;flex:none;stroke-width:1.75}
.nav .badge{margin-left:auto;background:var(--status-new-soft);color:var(--status-new);
            font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill)}
.loc{margin-top:auto;padding:12px}
.loc-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px;display:flex;gap:10px;
          align-items:center;background:var(--bg)}
.loc-card .t{font-weight:600;font-size:13px}
.loc-card .s{font-size:12px;color:var(--ink-3)}

.main{min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{min-height:var(--topbar-h);background:var(--bg);border-bottom:1px solid var(--line);
        display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex:none;z-index:30}
.topbar h1{font-size:18px;line-height:26px;font-weight:600}
.topbar p{font-size:13px;color:var(--ink-3)}
.avatar{width:32px;height:32px;border-radius:var(--radius-pill);background:var(--brand-navy);color:#fff;
        display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
      color:var(--primary-ink);text-decoration:none}
.back svg{width:15px;height:15px;stroke-width:2.2}

.scroll{overflow-y:auto;flex:1;min-height:0}
.page{padding:20px 24px 32px;max-width:1360px}

/* ─────────────────────────────────────────────── Bausteine */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
      box-shadow:var(--shadow-card)}
.card-head{padding:16px 18px 0;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card-head h2{font-size:16px;line-height:24px;font-weight:600}
.card-head a{font-size:13px;font-weight:600;color:var(--primary-ink);text-decoration:none;white-space:nowrap}
.card-body{padding:14px 18px 18px}

.contextline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);
             padding:12px 24px;border-bottom:1px solid var(--line);background:var(--bg);flex:none}
.contextline b{color:var(--ink-2);font-weight:600}
.contextline svg{width:14px;height:14px;stroke-width:2}

.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.split32{display:grid;grid-template-columns:3fr 2fr;gap:16px}
.split-profile{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}

/* KPI */
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
     display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;
     box-shadow:var(--shadow-card);transition:border-color .12s}
.kpi:hover{border-color:var(--line-strong)}
.kpi .ic{width:40px;height:40px;border-radius:var(--radius);display:grid;place-items:center;flex:none;
         background:var(--primary-soft);color:var(--primary-ink)}
.kpi .ic svg{width:20px;height:20px;stroke-width:1.9}
.kpi .v{font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.02em}
.kpi .l{font-size:14px;color:var(--ink-2);font-weight:500}
.kpi .h{font-size:12px;color:var(--ink-3);margin-top:3px}
.kpi.amber .ic{background:var(--status-changed-soft);color:var(--status-changed)}
.kpi.green .ic{background:var(--status-new-soft);color:var(--status-new)}
.kpi.indigo .ic{background:var(--accent-soft);color:var(--vetagent)}

/* Chips */
.chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-pill);
      border:1px solid transparent;display:inline-flex;align-items:center;gap:5px}
.chip.new{background:var(--status-new-soft);color:var(--status-new)}
.chip.active{background:var(--status-active-soft);color:var(--status-active)}
.chip.changed{background:var(--status-changed-soft);color:var(--status-changed)}
.chip.stale{background:var(--status-stale-soft);color:var(--status-stale)}
/* Mehrere Chips nebeneinander. Mit Umbruch: Eine Zeile aus Chips ist genau
   die Stelle, an der ein Telefon sonst seitwaerts scrollt. */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{font-size:11px;line-height:15px;padding:2px 7px;border-radius:var(--radius-sm);
     background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-weight:500;
     display:inline-flex;align-items:center;gap:3px}
.tag.qual{background:#ECFDF5;border-color:#A7F3D0;color:var(--success)}
.tag.qual svg{width:11px;height:11px;stroke-width:2.5}
.tag.muted{color:var(--ink-3);background:transparent;border-style:dashed}
.echo span{font-size:12px;line-height:16px;padding:3px 9px;border-radius:var(--radius-pill);
           background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}

/* AI-Badge — Art. 50 Kennzeichnung */
.aibadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
         padding:2px 8px;border-radius:var(--radius-pill);color:var(--vetagent);
         border:1px solid var(--vetagent);background:var(--accent-soft)}
.aibadge svg{width:11px;height:11px;stroke-width:2.2}

/* Das Gegenstueck: gerechnet, nicht formuliert.
 *
 * Die Wochenzusammenfassung trug bis zum 20.09.2026 ein KI-Abzeichen und den
 * Satz „Formulierung generiert". Der Text kommt aus einer Vorlage mit den
 * eigenen Zahlen der Praxis — es ist nie ein Modell gelaufen, und es gibt
 * keinen `ai_job` dazu. Ein Abzeichen, das nicht stimmt, entwertet das
 * richtige: Wenn ueberall „KI" steht, sagt es an der Stelle nichts mehr, an
 * der es nach Art. 50 stehen MUSS. Deshalb ein eigenes, ruhiges Etikett. */
.calcbadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
           padding:2px 8px;border-radius:var(--radius-pill);color:var(--ink-2);
           border:1px solid var(--line);background:var(--surface)}
.calcbadge svg{width:11px;height:11px;stroke-width:2.2}

/* Provenienz
   Fliesstext, kein Flex-Kasten.

   Bis zum 21.09.2026 war das `display:flex;align-items:center`. In einem
   Flex-Kasten wird JEDES Kindelement ein eigenes Flex-Element — und die
   Herkunftszeilen enthalten <b> fuer die Zahlen. Aus einem Satz wurden
   damit sieben Elemente in EINER Zeile, denn `flex-wrap` ist
   voreingestellt `nowrap`. Auf breiten Schirmen passte das; bei 360px
   ragte `zugaenge.html` 56px aus dem Dokument, und die ganze Seite liess
   sich seitwaerts schieben.

   Inline statt Flex: Der Satz bricht um, wo er umbrechen soll, und das
   Symbol sitzt in der ersten Zeile davor. Betrifft 11 Seiten. */
.prov{font-size:11px;line-height:15px;color:var(--ink-3)}
.prov svg{width:11px;height:11px;stroke-width:2;flex:none;
          vertical-align:-1px;margin-right:4px}

/* CandidateMark — ersetzt das Foto (Feld-Whitelist, Kap. 5.2) */
.mark{border-radius:50%;display:grid;place-items:center;position:relative;flex:none}
.mark .mono{font-weight:600;letter-spacing:-.01em}
.mark .glyph{position:absolute;right:-2px;bottom:-2px;border-radius:50%;background:var(--bg);
             display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg)}
.mark.sm{width:32px;height:32px} .mark.sm .mono{font-size:13px} .mark.sm .glyph{display:none}
.mark.md{width:44px;height:44px} .mark.md .mono{font-size:18px}
.mark.md .glyph{width:18px;height:18px} .mark.md .glyph svg{width:11px;height:11px}
.mark.lg{width:64px;height:64px} .mark.lg .mono{font-size:26px}
.mark.lg .glyph{width:24px;height:24px} .mark.lg .glyph svg{width:15px;height:15px}
.mark.xl{width:88px;height:88px} .mark.xl .mono{font-size:36px}
.mark.xl .glyph{width:32px;height:32px} .mark.xl .glyph svg{width:20px;height:20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
     border-radius:var(--radius-sm);font-size:14px;font-weight:600;text-decoration:none;
     border:1px solid transparent;white-space:nowrap}
.btn svg{width:16px;height:16px;stroke-width:2}
.btn.primary{background:var(--primary-ink);color:#fff}
.btn.primary:hover{background:var(--primary-hover)}
.btn.secondary{background:var(--bg);border-color:var(--line-strong);color:var(--ink)}
.btn.secondary:hover{background:var(--surface)}
.btn.ghost{color:var(--primary-ink)}
.btn.lg{height:46px;font-size:15px;width:100%}
.btn.sm{height:32px;font-size:13px;padding:0 12px}
.iconbtn{width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;
         color:var(--ink-3);flex:none}
.iconbtn:hover{background:var(--primary-soft);color:var(--primary-ink)}
.iconbtn svg{width:17px;height:17px;stroke-width:1.8}
.iconbtn[aria-pressed=true]{color:var(--primary-ink);background:var(--primary-soft)}

/* Hinweise */
.notice{padding:11px 12px;border-radius:var(--radius);display:flex;gap:10px;align-items:flex-start;
        font-size:13px}
.notice svg{width:16px;height:16px;flex:none;margin-top:1px;stroke-width:2}
.notice.changed{background:var(--status-changed-soft);border:1px solid #FCD9A0;color:#7C3F06}
.notice.changed a{color:#7C3F06;font-weight:600}
.notice.info{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.footnote{border-top:1px solid var(--line);padding:12px 20px;background:var(--surface);font-size:12px;
          color:var(--ink-3);display:flex;gap:8px;align-items:flex-start;flex:none}
.footnote svg{width:14px;height:14px;flex:none;margin-top:1px;stroke-width:2}
.footnote b{color:var(--ink-2);font-weight:600}

/* VetExperts-Banner */
.vebanner{background:linear-gradient(100deg,var(--primary-soft),#fff 70%);
          border:1px solid #BEE3E5;border-radius:var(--radius);padding:16px 18px;
          display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.vebanner .t{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vebanner .s{font-size:13px;color:var(--ink-2);margin-top:3px}
.vebanner .neu{font-size:11px;font-weight:700;background:var(--vetagent);color:#fff;
               padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap}
/* In einer schmalen Seitenspalte rutscht der Knopf unter den Text, statt die
   Textspalte auf wenige Wörter pro Zeile zu quetschen. */
.vebanner > div{flex:1 1 240px}

/* Feed */
.feed{display:flex;flex-direction:column}
.feed-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:flex-start}
.feed-item:first-child{border-top:none}
.feed-ic{width:32px;height:32px;border-radius:var(--radius-pill);display:grid;place-items:center;flex:none}
.feed-ic svg{width:16px;height:16px;stroke-width:2}
.feed-t{font-size:14px;font-weight:600;line-height:20px}
.feed-s{font-size:13px;color:var(--ink-2);line-height:18px}
.feed-time{font-size:12px;color:var(--ink-3);margin-left:auto;white-space:nowrap;padding-left:8px}

/* Tabelle */
table{width:100%;border-collapse:collapse}
thead th{font-size:12px;font-weight:600;color:var(--ink-3);text-align:left;padding:10px 12px;
         border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg)}
thead th.sortable{cursor:pointer}
thead th.sortable::after{content:"↕";margin-left:5px;opacity:.45}
thead th[aria-sort=ascending]::after{content:"↑";opacity:1;color:var(--primary-ink)}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th.kachel-kopf{width:40px}
.alle-waehlen{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.nur-kachel{display:none}
tbody tr:hover{background:var(--surface)}
.cell-profile{display:flex;gap:11px;align-items:center}
.cell-name{font-size:14px;font-weight:600;line-height:19px}
.cell-sub{font-size:13px;color:var(--ink-2);line-height:18px}
.num{text-align:right;font-weight:600;white-space:nowrap}

/* Merklisten-Eintrag */
.wl{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:14px 16px;
    box-shadow:var(--shadow-card)}
.wl+.wl{margin-top:12px}
.wl-head{display:flex;gap:12px;align-items:flex-start}
.wl-body{flex:1;min-width:0}
.wl-change{margin-top:10px;padding:8px 10px;border-radius:var(--radius-sm);
           background:var(--status-changed-soft);color:#7C3F06;font-size:13px;
           display:flex;gap:8px;align-items:flex-start}
.wl-change svg{width:14px;height:14px;flex:none;margin-top:2px;stroke-width:2}
.wl-note{margin-top:10px;background:var(--surface);border:1px solid var(--line);
         border-radius:var(--radius-sm);padding:9px 11px;font-size:13px;color:var(--ink)}
.wl-note .lbl{font-size:11px;font-weight:600;color:var(--ink-3);margin-bottom:3px}
.wl-steps{margin-top:10px;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-2)}
.wl-steps label{display:flex;align-items:center;gap:8px}
.wl-req{margin-top:10px;font-size:13px;display:flex;align-items:center;gap:7px;color:var(--ink-2)}

/* Profil */
.p-head{display:flex;gap:20px;align-items:flex-start}
.p-name{font-size:24px;line-height:32px;font-weight:600}
.p-sub{font-size:16px;color:var(--ink-2);margin-top:3px}
.p-meta{font-size:14px;color:var(--ink-2);margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.p-section{margin-top:16px}
.p-section h3{font-size:12px;font-weight:600;color:var(--ink-3);margin-bottom:8px;
              display:flex;align-items:center;gap:8px}
.p-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.p-fact{background:var(--surface);border-radius:var(--radius-sm);padding:10px 12px}
.p-fact .k{font-size:11px;color:var(--ink-3)}
.p-fact .v{font-size:14px;font-weight:600;margin-top:2px}
.meter{display:flex;gap:3px;margin:8px 0 6px}
.meter i{height:8px;flex:1;border-radius:2px;background:var(--line)}
.meter i.on{background:var(--primary-ink)}
.srcrow{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;
        border-top:1px solid var(--line)}
.srcrow:first-of-type{border-top:none}
.srcrow .s{color:var(--ink-3);white-space:nowrap}
.sticky-col{position:sticky;top:0}

/* Karte */
.mapwrap{position:relative;background:#EAF0F3;overflow:hidden}
.mapsvg{position:absolute;inset:0;width:100%;height:100%}
.mapctl{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:6px}
.mapctl button{width:36px;height:36px;background:var(--bg);border:1px solid var(--line-strong);
               border-radius:var(--radius-sm);display:grid;place-items:center;box-shadow:var(--shadow-card)}
.attrib{position:absolute;right:8px;bottom:6px;font-size:11px;color:var(--ink-3);
        background:rgb(255 255 255/.8);padding:2px 6px;border-radius:4px}
.maplegend{position:absolute;right:16px;top:16px;background:var(--bg);border:1px solid var(--line);
           border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow-card);font-size:12px}
.maplegend div{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.maplegend div+div{margin-top:6px}
.dot{width:10px;height:10px;border-radius:50%;flex:none}

/* Leerzustand — bei dünner Datenlage in Welle 1 produktkritisch */
.empty{text-align:center;padding:40px 24px;color:var(--ink-2)}
.empty .ic{width:52px;height:52px;border-radius:var(--radius-pill);background:var(--surface);
           display:grid;place-items:center;margin:0 auto 14px;color:var(--ink-3)}
.empty .ic svg{width:24px;height:24px;stroke-width:1.6}
.empty h3{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:6px}
.empty p{font-size:14px;max-width:420px;margin:0 auto 16px}

/* ─────────────────────────────────────────────── Mobil (Kap. 4.8) */
@media (max-width:1180px){ .split32{grid-template-columns:1fr} .split-profile{grid-template-columns:1fr} }
@media (max-width:900px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr} }

@media (max-width:767px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:var(--bottomnav-h);
           flex-direction:row;border-right:none;border-top:1px solid var(--line);z-index:60;
           padding-bottom:env(safe-area-inset-bottom)}
  .brand,.loc{display:none}
  /* Acht Punkte seit dem 22.10.2026 (eine Leiste statt zwei Bereichen). Auf
     360px geteilt waeren das 45px je Punkt -- „Vorgestellte Personen" in
     10px Schrift auf vier Zeilen. Die Leiste schiebt sich deshalb selbst
     seitwaerts, die Seite bleibt stehen; der aktive Punkt wird beim Laden
     ins Bild gerueckt (app.js, `seitenleiste`). */
  .nav{flex-direction:row;padding:0;width:100%;gap:0;overflow-x:auto;
       scrollbar-width:none;overscroll-behavior-x:contain}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:1 0 auto;min-width:72px;flex-direction:column;gap:3px;justify-content:center;
         font-size:10px;font-weight:600;padding:6px 8px;border-radius:0;min-height:0;
         white-space:nowrap}
  .nav a[aria-current]{background:none;box-shadow:inset 0 2px 0 var(--primary-ink)}
  .nav svg{width:22px;height:22px}
  .nav .badge{position:absolute;top:2px;right:calc(50% - 20px);margin:0;font-size:10px;padding:0 5px}
  .main{height:100dvh;padding-bottom:var(--bottomnav-h)}
  .topbar{padding:0 16px;min-height:52px}
  .topbar p{display:none}
  .page{padding:14px 14px 24px}
  .g4,.g2{grid-template-columns:1fr}
  .p-facts{grid-template-columns:repeat(2,1fr)}
  .contextline{padding:10px 16px;font-size:12px}
  table{display:block}
  thead{display:none}
  tbody,tr,td{display:block;width:100%}
  tbody tr{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:4px 0}
  tbody td{border:none;padding:4px 12px;text-align:left}
  /* Label links, Wert rechts — eine Zeile pro Feld statt zwei. Die Profilzelle
     bleibt zweizeilig, sie trägt Name und Berufsgruppe. */
  tbody td[data-label]{display:flex;gap:12px;align-items:baseline;justify-content:space-between}
  tbody td[data-label]::before{content:attr(data-label);font-size:11px;color:var(--ink-3);flex:none}
  tbody td[data-label] > *{text-align:right}
  tbody td[data-label="Profil"]{display:block}
  tbody td[data-label="Profil"]::before{display:block;margin-bottom:2px}
  tbody td[data-label="Profil"] > *{text-align:left}
}

/* ─────────────────────────────────────────── Bewegung
   Vier Bausteine, mehr braucht der Entwurf nicht. Sie stehen hier und
   nicht je Seite, damit „modern" nicht heisst, dass jede Seite eine eigene
   Vorstellung davon hat.

   Regel fuer alles hier: Bewegung erklaert eine Veraenderung, sie kuendigt
   sie nicht an. Nichts dreht sich, nichts huepft, nichts wiederholt sich
   ohne Anlass. Eine Anmeldemaske, die Aufmerksamkeit auf sich zieht,
   nimmt sie dem Feld, in das jemand tippen soll. */

@keyframes vi-auf {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:none }
}
@keyframes vi-ein {
  from { opacity:0 } to { opacity:1 }
}

/* Gestaffelter Auftritt. `--i` setzt die Seite je Element; ohne den Wert
   startet alles zugleich, und das ist ein gueltiger Zustand und kein
   Fehler. */
.vi-auf{animation:vi-auf var(--dauer-lang) var(--kurve) both;
        animation-delay:calc(var(--i,0) * 70ms)}
.vi-ein{animation:vi-ein var(--dauer-lang) var(--kurve) both;
        animation-delay:calc(var(--i,0) * 70ms)}

/* Der Wechsel zwischen zwei Schritten derselben Maske. Kein Auf- und
   Zuklappen: Die Hoehe aendert sich, und eine Hoehenanimation auf `auto`
   ist entweder gelogen oder ruckelt. */
.vi-schritt-rein{animation:vi-auf var(--dauer) var(--kurve) both}

/* Wer weniger Bewegung eingestellt hat, bekommt keine. Das ist eine
   Systemeinstellung und keine Vorliebe: Vestibulaere Stoerungen und
   Migraene sind der Grund, aus dem es sie gibt. Die Seite bleibt
   vollstaendig — sie erscheint nur sofort statt nacheinander. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ─────────────────────────────── Breite Tabellen: Karten statt Schieben
   Bis zum 22.10.2026 schob sich eine zu breite Tabelle in ihrem eigenen
   Bereich seitwaerts — auf dem Desktop schon unter rund 1260px
   Fensterbreite (Kandidaten: 981px Tabelle in 890px bei 1180px). Vorgabe
   des Nutzers: Auch auf dem Desktop scrollt keine Tabelle seitwaerts.

   Der Umbau haengt deshalb nicht am Fenster, sondern am Platz, den die
   Tabelle wirklich hat (Container-Abfrage): Neben Seitenleiste und Rand
   bleibt bei 1180px Fenster ein ganz anderer Platz als auf einem Telefon,
   und genau das entscheidet. Reicht er nicht, wird jede Zeile eine Karte —
   dieselben Regeln wie fuer Telefone weiter oben. Jede Zelle braucht dafuer
   ihr `data-label`. */
.tabelle-platz{container:tabelle / inline-size}
@container tabelle (max-width:999px){
  table{display:block}
  thead{display:none}
  /* „Alle auswählen" bleibt erreichbar: Vom Kopf bleibt die Zelle mit
     `kachel-kopf` stehen, als Zeile ueber den Kacheln. Ohne sie gab es
     zwischen Telefon und 1260px Fenster keine Mehrfachauswahl. */
  thead:has(.kachel-kopf){display:block}
  thead:has(.kachel-kopf) tr{display:flex}
  thead th:not(.kachel-kopf){display:none}
  thead th.kachel-kopf{width:auto;border:none;padding:12px 12px 0;background:none}
  .nur-kachel{display:inline}
  /* Kacheln: auf dem Telefon eine Spalte, daneben so viele, wie Platz ist.
     Eine einzige Karte ueber 900px zoege Beschriftung und Wert so weit
     auseinander, dass man die Zeile nicht mehr liest. */
  tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
        gap:12px;padding:12px}
  td{display:block;width:100%}
  tbody tr{display:block;border:1px solid var(--line);border-radius:var(--radius);
           margin:0;padding:4px 0;background:var(--bg)}
  tbody td{border:none;padding:4px 12px;text-align:left}
  /* Beschriftung links, alle Teile des Werts gesammelt rechts — mit
     `space-between` landete bei zwei Teilen (Fachrichtung + Schwerpunkt)
     der erste mitten in der Zeile. */
  tbody td[data-label]{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;
                       justify-content:flex-end}
  tbody td[data-label]::before{content:attr(data-label);font-size:11px;color:var(--ink-3);
                               flex:none;margin-right:auto}
  tbody td[data-label] > *{text-align:right}
  tbody td[data-label="Profil"],tbody td[data-label="Quelle"],tbody td[data-label="Mandant"]{display:block}
  tbody td[data-label="Profil"]::before,tbody td[data-label="Quelle"]::before,
  tbody td[data-label="Mandant"]::before{display:block;margin-bottom:2px}
  tbody td[data-label="Profil"] > *,tbody td[data-label="Quelle"] > *,
  tbody td[data-label="Mandant"] > *{text-align:left}
}

/* Die Produktversion (Regel 8). Klein, unten in der Seitenleiste — wer sie
   sucht, findet sie; wer sie nicht sucht, wird nicht abgelenkt. */
.version{font-size:11px;color:var(--ink-3);padding:8px 4px 0;text-align:center}
@media (max-width:767px){ .version{display:none} }