/* 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 „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}
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)}
  /* `.bereich` gehoert hierher, nicht nur `.brand` und `.loc`.
     Der Bereichswechsler (VetAgent/VetExperts) blieb in der 64px hohen
     Fussleiste stehen und nahm dort 145 von 360 Pixeln ein. Die fuenf
     Navigationspunkte teilten sich den Rest — „Anfragen" lag bei x=373,
     also vollstaendig ausserhalb des Schirms. Die Leiste hat
     `overflow:hidden`, eine Wischgeste half also auch nicht: Der Punkt war
     mit keiner Geste erreichbar. Sieben Seiten.

     Er ist nicht verloren, sondern wandert in den Kopf — siehe
     `.topbar .bereich` weiter unten. */
  .brand,.loc,.sidebar .bereich{display:none}
  .nav{flex-direction:row;padding:0;width:100%;gap:0}
  .nav a{flex:1;flex-direction:column;gap:3px;justify-content:center;font-size:10px;font-weight:600;
         padding:6px 0;border-radius:0;min-height:0}
  .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}
}

/* ── Bereichswechsler ──────────────────────────────────────────────────────
 *
 * Eine Praxis hat zwei Oberflächen und dieselbe Anmeldung: VetAgent, wo sie
 * selbst sucht, und den VetExperts-Bereich, wo sie ihre Stellen übergibt und
 * die vorgestellten Personen sieht. Bis zum 20.09.2026 gab es zwischen
 * beiden keinen Weg — man musste die Adresse kennen. Der Knopf „Vakanz
 * anlegen" auf der Übersicht zeigte ins Leere, und wer den Bereich doch
 * fand, kam nicht zurück.
 *
 * Deshalb ein Wechsler und keine gemeinsame Navigationsleiste: Die beiden
 * Bereiche gehören verschiedenen Marken und verschiedenen Verträgen. Sie
 * nebeneinanderzustellen wäre bequemer und würde verdecken, dass der eine
 * ein Werkzeug ist und der andere eine Dienstleistung. */
.bereich{display:flex;margin:0 14px 16px;padding:3px;gap:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.bereich a{flex:1;text-align:center;padding:6px 4px;border-radius:calc(var(--radius-sm) - 3px);
  font-size:12px;font-weight:600;color:var(--ink-3);text-decoration:none;white-space:nowrap}
/* `--ink` und nicht `--ink-1`: Die Skala heisst --ink / --ink-2 / --ink-3, ein
   `--ink-1` ist nie definiert worden. Ohne Rückfallwert blieb die Farbe auf
   dem geerbten Wert stehen — der aktive Bereichsreiter hob sich damit nicht
   ab, und genau das soll er. */
.bereich a:hover{color:var(--ink)}
.bereich a[aria-current]{background:var(--bg);color:var(--ink);
  box-shadow:var(--shadow-sm, 0 1px 2px rgb(0 0 0/.08))}

/* ─────────────────────────────────────────── 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;
  }
}

/* ─────────────────────────────── Bereichswechsler auf schmalen Schirmen
   Auf breiten Schirmen steht er in der Seitenleiste. Dort bleibt er; diese
   Zeile ist dann nicht da. Siehe `bereichswechslerMobil()` in app.js. */
.bereich-mobil{display:none}
@media (max-width:767px){
  .bereich-mobil{display:block;flex:none;background:var(--bg);
                 border-bottom:1px solid var(--line);padding:8px 16px}
  .bereich-mobil .bereich{margin:0}
}

/* ─────────────────────────────── Breite Tabellen in schmalen Karten
   Eine Karte mit `overflow:hidden` schneidet ab, was nicht hineinpasst —
   ohne Scrollbalken, ohne Hinweis, ohne Weg dorthin.

   Die Kandidatentabelle hat acht Spalten und braucht 981px. Die Karte hat
   bei 768px Fensterbreite 478px, bei 900px noch 610px — vier bis fuenf
   Spalten waren weg, darunter „Aktionen". Der Kartenumbau fuer Telefone
   greift erst unter 768px; dazwischen lag ein Loch von rund 500 Pixeln
   Fensterbreite, in dem die Tabelle weder umgebaut noch erreichbar war.

   Ein verschobener Umbruchpunkt haette das Loch nur verschoben: Damit die
   Tabelle ungeschnitten passt, braeuchte es rund 1260px. Also schiebt sie
   sich, und zwar in ihrem eigenen Bereich — die Seite bleibt stehen.

   Unter 768px bleibt es beim Kartenumbau: Acht Spalten seitwaerts schieben
   ist auf einem Telefon keine Bedienung. */
.tabelle-schiebe{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:767px){
  /* Der Kartenumbau macht die Tabelle schmal genug; ein Schiebebereich
     erzeugte hier nur einen Balken ohne Weg. */
  .tabelle-schiebe{overflow-x:visible}
}

/* 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} }