@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 300; src: url(schrift/outfit-300.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 400; src: url(schrift/outfit-400.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 500; src: url(schrift/outfit-500.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 600; src: url(schrift/outfit-600.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 700; src: url(schrift/outfit-700.woff2) format("woff2"); }
/* Farben und Schriften nach dem CD-Manual der Kammer, Stand 10/2026 */
.ci {
  --ci-rot: #e30613; --ci-dunkelrot: #ae0f0a; --ci-gruen: #79ac2b; --ci-dunkelgruen: #4a6c1a; --ci-anthrazit: #4a4a49;
  --ci-akzent: var(--ci-rot); --ci-akzent-tief: var(--ci-dunkelrot); --ci-akzent-zart: #f4c9cb; --ci-akzent-hauch: #fcebec;
  --ci-verlauf-rot: linear-gradient(55deg, var(--ci-dunkelrot), var(--ci-rot)); --ci-verlauf-gruen: linear-gradient(55deg, var(--ci-dunkelgruen), var(--ci-gruen));
  --ci-gruen-hauch: #eef5e4; --ci-grau-hauch: #f6f5f3;
  --ci-orange: #ff9100; --ci-orange-text: #9a5700; --ci-orange-hauch: #fff3e0;
  --ci-grau: #5c5b59; --ci-grau-hell: #6f6e6b; --ci-linie: #d3d1cd; --ci-linie-2: #e8e6e2;
  --ci-text: #2b2b2a; --ci-text-2: #4a4a49; --ci-text-3: #67665f; --ci-seite: #f4f3f1; --ci-flaeche: #ffffff;
  --ci-ok: #3d5915; --ci-ok-hauch: #eef5e4; --ci-fehler: #a3001a; --ci-fehler-hauch: #fde8ea;
  --ci-schatten: 0 1px 0 rgb(43 42 40 / 0.04), 0 12px 32px -22px rgb(43 42 40 / 0.32);
  --ci-schatten-hoch: 0 28px 64px -28px rgb(43 42 40 / 0.38), 0 0 0 1px rgb(43 42 40 / 0.05);
  --ci-glas: rgb(255 255 255 / 0.8); --ci-glas-blur: blur(24px) saturate(1.4);
  --ci-schrift: "Outfit", Aptos, Arial, sans-serif;
  --aus: cubic-bezier(0.22, 1, 0.36, 1);
  /* NL-Design-System: Basis-Variablen auf die Kammer-CI */
  --basis-text-font-family-default: var(--ci-schrift);
  --basis-heading-font-family: var(--basis-text-font-family-default); --basis-form-control-font-family: var(--basis-text-font-family-default);
  --basis-color-accent-1-inverse-bg-default: var(--ci-akzent); --basis-color-accent-1-inverse-bg-hover: #c8090f; --basis-color-accent-1-inverse-bg-active: var(--ci-akzent-tief);
  --basis-color-accent-1-inverse-color-default: #fff; --basis-color-accent-1-inverse-color-hover: #fff; --basis-color-accent-1-inverse-color-active: #fff;
  --basis-color-accent-1-color-default: var(--ci-akzent-tief); --basis-color-accent-1-color-hover: #8f0c08; --basis-color-accent-1-color-active: #760a06;
  --basis-color-accent-1-bg-default: var(--ci-akzent-hauch); --basis-color-accent-1-bg-hover: #f9dcde; --basis-color-accent-1-bg-active: var(--ci-akzent-zart);
  --basis-color-accent-1-border-default: var(--ci-akzent); --basis-color-accent-1-border-hover: var(--ci-akzent-tief); --basis-color-accent-1-border-subtle: var(--ci-akzent-zart);
  --basis-color-default-color-document: var(--ci-text); --basis-color-default-color-subtle: var(--ci-text-3);
  --basis-color-default-border-subtle: var(--ci-linie-2); --basis-color-default-border-default: var(--ci-linie);
  --basis-color-default-bg-document: var(--ci-flaeche);
  --basis-focus-outline-color: var(--ci-anthrazit); --basis-focus-background-color: transparent;
  /* Fokus zeigt der Umriss; Farbe und Fläche der Knöpfe bleiben dabei (sonst dunkle Schrift auf Rot) */
  --utrecht-button-primary-action-focus-color: #fff; --utrecht-button-primary-action-focus-background-color: var(--ci-akzent);
  --utrecht-button-secondary-action-focus-color: var(--ci-akzent-tief); --utrecht-button-secondary-action-focus-background-color: #fff;
  --utrecht-button-subtle-focus-color: var(--ci-akzent-tief); --utrecht-button-subtle-focus-background-color: transparent;
  --utrecht-button-border-radius: 999px; --utrecht-button-text-transform: none; --utrecht-button-font-weight: 600;
  --utrecht-button-font-size: 15px; --utrecht-button-min-block-size: 44px;
  --utrecht-button-padding-inline-start: 24px; --utrecht-button-padding-inline-end: 24px; --utrecht-button-icon-gap: 8px;
  --utrecht-table-cell-padding-block-start: 18px; --utrecht-table-cell-padding-block-end: 18px;
  --utrecht-table-cell-padding-inline-start: 22px; --utrecht-table-cell-padding-inline-end: 22px;
  --utrecht-table-header-cell-font-size: 12px; --utrecht-table-header-cell-text-transform: uppercase;
  --utrecht-table-header-cell-color: var(--ci-grau); --utrecht-table-header-background-color: var(--ci-grau-hauch);
  --utrecht-table-header-border-block-end-width: 1px; --utrecht-table-header-border-block-end-color: var(--ci-linie-2);
  --utrecht-table-border-color: var(--ci-linie-2); --utrecht-table-header-cell-font-weight: 700;
  min-height: 100vh; background: var(--ci-seite); color: var(--ci-text);
  font-family: var(--basis-text-font-family-default); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.ci .i { flex: none; }
.ci a:not([class]) { color: var(--ci-akzent-tief); }
.ci :focus-visible { outline: 3px solid var(--ci-anthrazit); outline-offset: 2px; border-radius: 8px; }
.ci .utrecht-button { letter-spacing: 0.01em; gap: 8px; transition: background 0.2s var(--aus), box-shadow 0.2s var(--aus), transform 0.2s var(--aus); }
.ci .utrecht-button--primary-action { background-image: var(--ci-verlauf-rot); box-shadow: 0 8px 18px -10px rgb(174 15 10 / 0.7); }
.ci .utrecht-button--primary-action:hover { transform: translateY(-1px); }
.ci .utrecht-button--secondary-action { background: #fff; color: var(--ci-akzent-tief); border: 2px solid var(--ci-akzent-zart); }
.ci .utrecht-button--secondary-action:hover { border-color: var(--ci-akzent); }
.ci .utrecht-button--subtle { background: transparent; color: var(--ci-akzent-tief); border: 0; }
/* Kopf: schwebende Glaskarte wie auf aknr.de */
.ci-kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; height: 72px; padding: 0 32px;
  background: var(--ci-glas); backdrop-filter: var(--ci-glas-blur); border-block-end: 1px solid rgb(43 42 40 / 0.06);
  box-shadow: 0 0 10px rgb(61 61 61 / 0.12); }
.ci-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ci-grau); }
.ci-logo img { height: 48px; width: auto; display: block; }
.ci-logo span { padding-inline-start: 14px; border-inline-start: 1px solid var(--ci-linie); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ci-suche { flex: 0 1 460px; margin-inline: auto; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px;
  border-radius: 999px; background: var(--ci-grau-hauch); border: 1px solid var(--ci-linie-2); color: var(--ci-text-3); font: inherit; cursor: text; }
.ci-suche span { flex: 1; text-align: start; }
.ci-suche kbd { font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--ci-linie-2); color: var(--ci-grau); }
.ci-kopf__rechts { display: flex; align-items: center; gap: 12px; }
/* Neu-Knopf im Kopf bewusst klein (Max, 01.10.2026): Hauptaktionen gehören auf die Seite, nicht in den Kopf */
.ci-kopf .utrecht-button { --utrecht-button-min-block-size: 34px; --utrecht-button-font-size: 12px; --utrecht-button-padding-inline-start: 12px;
  --utrecht-button-padding-inline-end: 14px; gap: 5px; box-shadow: none; letter-spacing: 0.01em;
  min-block-size: 34px; block-size: 34px; padding-block: 0; padding-inline: 12px 14px; font-size: 12px; }
.ci-kopf .utrecht-button .i { width: 15px; height: 15px; }
.ci-rund { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--ci-grau-hell); }
.ci-rund:hover { background: var(--ci-akzent-hauch); color: var(--ci-akzent-tief); }
.ci-punkt { position: absolute; top: 7px; right: 7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--ci-rot); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.ci-ich { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.25; }
.ci-ich small { display: block; color: var(--ci-text-3); }
/* Leiste links im Stil von Social */
.ci-koerper { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
.ci-leiste { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 8px; border-inline-end: 1px solid var(--ci-linie-2); background: #fff; }
.ci-leiste a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 88px; padding: 6px 0 8px;
  border-radius: 14px; color: var(--ci-grau); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.ci-leiste a .ci-pille { display: grid; place-items: center; width: 56px; height: 32px; border-radius: 999px; transition: background 0.2s var(--aus); }
.ci-leiste a:hover .ci-pille { background: var(--ci-grau-hauch); }
.ci-leiste a[aria-current="page"] { color: var(--ci-akzent-tief); }
.ci-leiste a[aria-current="page"] .ci-pille { background: var(--ci-akzent-hauch); color: var(--ci-akzent); }
.ci-leiste small { position: absolute; top: 2px; right: 12px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: var(--ci-akzent); color: #fff; }
.ci-leiste hr { width: 48px; border: 0; border-top: 1px solid var(--ci-linie-2); margin: 10px 0; }
.ci-leiste .ci-leise { opacity: 0.65; }
.ci-inhalt { padding: 52px 64px 160px; max-width: 1400px; min-width: 0; }
/* Seitenkopf */
.ci-dach { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ci-dunkelgruen); }
.ci-h1 { margin: 0; font-size: 42px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: var(--ci-akzent); }
.ci-unter { margin: 14px 0 0; color: var(--ci-text-2); font-size: 17px; }
.ci-seitenkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-block-end: 44px; }
.ci-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Kennzahlen */
.ci-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-block-end: 40px; }
.ci-zahl { padding: 24px 26px; border-radius: 20px; background: #fff; box-shadow: var(--ci-schatten); border: 1px solid rgb(43 42 40 / 0.05); }
.ci-zahl p { margin: 0; font-size: 13px; font-weight: 600; color: var(--ci-text-3); }
.ci-zahl b { display: block; margin-top: 10px; font-size: 30px; line-height: 1.1; font-weight: 600; color: var(--ci-text); font-variant-numeric: tabular-nums; }
.ci-zahl small { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.ci-zahl--gut small { color: var(--ci-ok); } .ci-zahl--warn b { color: var(--ci-orange-text); } .ci-zahl--warn small { color: var(--ci-orange-text); }
.ci-balken { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--ci-akzent-hauch); overflow: hidden; }
.ci-balken i { display: block; height: 100%; border-radius: inherit; background: var(--ci-verlauf-rot); }
/* Karte mit Werkzeugen und Tabelle */
.ci-karte { background: #fff; border-radius: 22px; box-shadow: var(--ci-schatten); border: 1px solid rgb(43 42 40 / 0.05); }
.ci-karte__kopf { padding: 24px 28px 0; }
.ci-segmente { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ci-grau-hauch); border: 1px solid var(--ci-linie-2); }
.ci-segmente button { font: inherit; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ci-text-2); cursor: pointer; transition: background 0.2s var(--aus), transform 0.15s var(--aus); }
.ci-segmente button[aria-selected="true"], .ci-segmente button[aria-checked="true"] { background: #fff; color: var(--ci-akzent-tief); box-shadow: 0 1px 2px rgb(43 42 40 / 0.12), 0 0 0 1px rgb(43 42 40 / 0.06); }
.ci-segmente em { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--ci-akzent-hauch); color: var(--ci-akzent-tief); }
.ci-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 28px 22px; }
.ci-feld { display: flex; align-items: center; gap: 8px; flex: 0 1 340px; height: 42px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ci-linie); background: #fff; color: var(--ci-text-3); }
.ci-feld:focus-within { border-color: var(--ci-akzent); box-shadow: 0 0 0 4px rgb(227 6 19 / 0.14); }
.ci-feld .utrecht-textbox { border: 0 !important; box-shadow: none !important; padding: 0 !important; min-block-size: 0; background: transparent; font-size: 15.5px; }
.ci-feld .utrecht-textbox:focus { outline: none; }
.ci-chip { font: inherit; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--ci-linie); background: #fff; color: var(--ci-text-2); cursor: pointer;
  transition: transform 0.15s var(--aus), background 0.2s var(--aus), border-color 0.2s var(--aus); }
.ci-chip:hover { border-color: var(--ci-akzent); color: var(--ci-akzent-tief); }
.ci-chip--an { background: var(--ci-akzent-hauch); border-color: var(--ci-akzent-zart); color: var(--ci-akzent-tief); }
.ci-rechts { margin-inline-start: auto; }
.ci-tabelle { overflow-x: auto; border-top: 1px solid var(--ci-linie-2); }
.ci .utrecht-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
.ci .utrecht-table__header-cell { letter-spacing: 0.06em; white-space: nowrap; }
.ci thead .utrecht-table__header-cell { font-weight: 700; padding-block: 12px; }
.ci tbody .utrecht-table__row { transition: background 0.15s var(--aus); }
.ci tbody .utrecht-table__row:hover { background: var(--ci-grau-hauch); }
.ci tbody .utrecht-table__row--selected { background: var(--ci-akzent-hauch); }
.ci tbody .utrecht-table__header-cell { letter-spacing: 0; font-weight: 400; text-transform: none; font-size: inherit; color: inherit; background: transparent; }
.ci tbody td, .ci tbody th { border-block-end: 1px solid var(--ci-linie-2); vertical-align: middle; }
.ci tbody tr:last-child td, .ci tbody tr:last-child th { border-block-end: 0; }
.ci-name { display: flex; align-items: center; gap: 12px; }
.ci-name a { color: var(--ci-text); font-weight: 700; text-decoration: none; background-image: linear-gradient(rgb(121 172 43 / 0.6), rgb(121 172 43 / 0.6));
  background-size: 0 4px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size 0.25s var(--aus); }
.ci-name a:hover { background-size: 100% 4px; }
.ci-name small { display: block; font-size: 14px; color: var(--ci-text-3); }
.ci-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: var(--av-f); color: var(--av-t); }
.ci-avatar--gross { width: 84px; height: 84px; font-size: 28px; font-weight: 800; box-shadow: 0 0 0 5px #fff, 0 10px 30px -14px rgb(43 42 40 / 0.5); }
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  white-space: nowrap; background: var(--ci-grau-hauch); color: var(--ci-grau); border: 1px solid var(--ci-linie-2); }
.ci-tag--akzent { background: var(--ci-akzent-hauch); color: var(--ci-akzent-tief); border-color: var(--ci-akzent-zart); }
.ci-tag--orange { background: var(--ci-orange-hauch); color: var(--ci-orange-text); border-color: #ffd8a8; }
.ci-tag--gruen { background: var(--ci-ok-hauch); color: var(--ci-ok); border-color: #d3e6b8; }
.ci-tag--rot { background: var(--ci-fehler-hauch); color: var(--ci-fehler); border-color: #f6c5cc; }
.ci-prio { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font-size: 13.5px; font-weight: 800; }
.ci-prio--A { background: var(--ci-akzent-hauch); color: var(--ci-akzent-tief); box-shadow: inset 0 0 0 1px var(--ci-akzent-zart); }
.ci-prio--B { background: var(--ci-akzent-hauch); color: var(--ci-akzent-tief); }
.ci-prio--C { background: var(--ci-grau-hauch); color: var(--ci-grau); }
.ci-warn { color: var(--ci-orange-text); font-weight: 700; }
.ci-leise { color: var(--ci-text-3); }
.ci-nowrap { white-space: nowrap; }
.ci-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 28px; border-top: 1px solid var(--ci-linie-2); }
.ci-seiten { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-seiten a, .ci-seiten span, .ci-seiten button { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px;
  text-decoration: none; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--ci-text-2); border: 1px solid var(--ci-linie-2); background: #fff; cursor: pointer; }
.ci-seiten button:disabled { opacity: 0.4; cursor: default; }
.ci-seiten a:not([aria-current]):hover, .ci-seiten button:not(:disabled):not([aria-current]):hover { border-color: var(--ci-akzent-zart); color: var(--ci-akzent-tief); }
.ci-seiten a[aria-current="page"], .ci-seiten button[aria-current="page"] { background: var(--ci-akzent); color: #fff; border-color: var(--ci-akzent); }
.ci-seiten span { color: var(--ci-text-3); border-color: transparent; background: transparent; cursor: default; }
.ci .utrecht-checkbox { width: 18px; height: 18px; accent-color: var(--ci-akzent); }
/* Auswahl-Leiste, schwebt unten wie in Social */
.ci-sammel { position: fixed; left: 50%; bottom: 26px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 20px;
  border-radius: 999px; background: var(--ci-anthrazit); color: #fff; box-shadow: var(--ci-schatten-hoch);
  transform: translate(-50%, 140%); opacity: 0; transition: transform 0.35s var(--aus), opacity 0.2s; }
.ci-sammel--an { transform: translate(-50%, 0); opacity: 1; }
.ci-sammel b { margin-inline-end: 6px; }
.ci-sammel button { font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; background: rgb(255 255 255 / 0.12); color: #fff;  transition: transform 0.15s var(--aus), background 0.2s var(--aus);}
.ci-sammel button.ci-haupt { background: var(--ci-verlauf-rot); color: #fff; }
/* Person */
.ci-pfad { display: flex; align-items: center; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 14.5px; color: var(--ci-text-3); }
.ci-pfad a { color: var(--ci-akzent-tief); font-weight: 600; text-decoration: none; }
.ci-profil { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px; padding: 104px 36px 34px; margin-block-end: 28px; }
.ci-profil::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 74px;
  background: var(--ci-verlauf-rot); }
.ci-profil::after { content: ""; position: absolute; inset: 0 0 auto auto; width: 320px; height: 74px; opacity: 0.22;
  background-image: radial-gradient(circle, #fff 1.6px, transparent 2px); background-size: 14px 14px; }
.ci-profil > * { position: relative; z-index: 1; }
.ci-profil .ci-avatar--gross { align-self: flex-start; margin-top: -62px; }
.ci-profil__text { flex: 1 1 360px; }
.ci-profil__text .ci-h1 { font-size: 34px; }
.ci-profil__rolle { margin: 4px 0 10px; color: var(--ci-text-2); font-size: 17px; }
.ci-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ci-text-2); }
.ci-meta li { display: inline-flex; align-items: center; gap: 6px; }
.ci-profil .ci-reihe { align-self: flex-end; }
.ci-reiter { display: flex; gap: 10px; margin: 0 0 28px; border-bottom: 1px solid var(--ci-linie-2); overflow-x: auto; }
.ci-reiter button { font: inherit; font-size: 15.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border: 0; background: none;
  color: var(--ci-text-3); cursor: pointer; border-bottom: 4px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ci-reiter button[aria-selected="true"] { color: var(--ci-akzent-tief); border-bottom-color: var(--ci-akzent); }
.ci-reiter em { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--ci-akzent-hauch); color: var(--ci-akzent-tief); }
.ci-hinweis { display: flex; align-items: center; gap: 16px; padding: 18px 24px; margin-block-end: 28px; border-radius: 18px;
  background: var(--ci-akzent-hauch); border: 1px solid var(--ci-akzent-zart); color: var(--ci-anthrazit); }
.ci-hinweis .ci-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--ci-akzent); flex: none; }
.ci-hinweis p { margin: 0; flex: 1; } .ci-hinweis small { display: block; color: var(--ci-grau); }
.ci-hinweis a { color: var(--ci-akzent-tief); font-weight: 700; white-space: nowrap; }
.ci-zwei { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.ci-block { padding: 30px 34px; margin-block-end: 28px; }
.ci-block h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 20px; font-weight: 500; color: var(--ci-akzent); }
.ci .utrecht-data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin: 0; }
.ci .utrecht-data-list__item { padding: 15px 0; border-bottom: 1px solid var(--ci-linie-2); }
.ci .utrecht-data-list__item-key { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ci-grau-hell); }
.ci .utrecht-data-list__item-value { margin: 2px 0 0; font-size: 16px; }
.ci .utrecht-data-list__item-value a { color: var(--ci-akzent-tief); font-weight: 600; text-decoration: none; }
.ci-zeit { list-style: none; margin: 0; padding: 0; }
.ci-zeit li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; position: relative; }
.ci-zeit li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 2px; width: 2px; background: var(--ci-linie-2); }
.ci-zeit .ci-symbol { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--ci-akzent-hauch); color: var(--ci-akzent); }
.ci-zeit .ci-symbol--notiz { background: var(--ci-orange-hauch); color: var(--ci-orange-text); }
.ci-zeit .ci-symbol--geburtstag { background: #fde8ea; color: var(--ci-fehler); }
.ci-zeit p { margin: 0; } .ci-zeit time { margin-inline-start: 8px; font-size: 13.5px; color: var(--ci-text-3); }
.ci-zeit .ci-text { margin-top: 2px; color: var(--ci-text-2); }
.ci-liste { list-style: none; margin: 0; padding: 0; }
.ci-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--ci-linie-2); }
.ci-liste li:last-child { border-bottom: 0; }
.ci-ja { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ci-ok); }
.ci-person-klein { display: flex; align-items: center; gap: 12px; }
.ci-person-klein small { display: block; color: var(--ci-text-3); }
.ci-einwilligung { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--ci-ok-hauch); color: var(--ci-ok); }
.ci-einwilligung b { color: #2e4410; } .ci-einwilligung small { display: block; }
.ci-unten { margin-top: 48px; font-size: 13px; color: var(--ci-text-3); }
.ci-unten a { color: var(--ci-akzent-tief); }
.ci-sprung { position: fixed; left: 16px; top: 10px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--ci-anthrazit); color: #fff;
  font-weight: 700; transform: translateY(-160%); transition: transform 0.2s var(--aus); }
.ci-sprung:focus-visible { transform: none; }
.ci-nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) { .ci-zwei { grid-template-columns: 1fr; } .ci .utrecht-data-list { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .ci-koerper { display: block; } .ci-leiste { display: none; } .ci-inhalt { padding: 28px 18px 120px; }
  .ci-suche, .ci-ich > span:not(.ci-avatar), .ci-logo span { display: none; }
  .ci-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ci-zahl { padding: 16px 18px; } .ci-zahl b { font-size: 24px; } .ci-h1 { font-size: 32px; } .ci-weg { display: none; }
  .ci-kopf { padding: 0 14px; gap: 10px; } .ci-kopf__rechts { margin-inline-start: auto; gap: 6px; }
  .ci-kopf .utrecht-button { font-size: 0; letter-spacing: 0; gap: 0; --utrecht-button-padding-inline-start: 12px; --utrecht-button-padding-inline-end: 12px; }
  .ci-hinweis { flex-wrap: wrap; } .ci-hinweis p { flex: 1 1 200px; }
}
/* Rückmeldung schon beim Drücken, nicht erst beim Loslassen */
.ci-chip:active, .ci-rund:active, .ci-segmente button:active, .ci-sammel button:active { transform: scale(0.96); background: var(--ci-akzent-hauch); }
.ci-leiste a:active .ci-pille { transform: scale(0.94); background: var(--ci-akzent-hauch); }
.ci .utrecht-button:active { transform: scale(0.98); }
.ci-rund { transition: transform 0.15s var(--aus), background 0.2s var(--aus); }
.ci-leiste a .ci-pille { transition: transform 0.15s var(--aus), background 0.2s var(--aus); }
@media (max-width: 760px) {
  /* Trefferflächen am Telefon mindestens 44 px */
  .ci-rund { width: 44px; height: 44px; }
  .ci-chip { height: 44px; }
  .ci-segmente button { min-height: 44px; }
  .ci-sammel button { height: 44px; }
  .ci-kopf .utrecht-button { min-block-size: 44px; block-size: 44px; min-inline-size: 44px; justify-content: center; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ci * { transition: none !important; } .ci *:active { transform: none !important; } }
/* Weniger Transparenz: Glas wird dicht, ohne Unschärfe */
@media (prefers-reduced-transparency: reduce) { .ci { --ci-glas: #ffffff; --ci-glas-blur: none; } }
/* Mehr Kontrast: kräftigere gedämpfte Schrift und sichtbare Ränder */
@media (prefers-contrast: more) {
  .ci { --ci-text-2: #2b2b2a; --ci-text-3: #3e3e3d; --ci-grau-hell: #4a4a49; --ci-grau: #3e3e3d; --ci-linie: #8a8884; --ci-linie-2: #b1aea9; }
  .ci-karte { border-color: var(--ci-linie); box-shadow: none; }
  .ci-tag, .ci-chip, .ci-segmente, .ci-feld, .ci-suche { border-color: var(--ci-linie); }
}