/* ZMK-OS Designsystem (Agent gestaltung, 27.09.2026)
   CI: Navy #1B263B · Bronze #8E7355 · Sand #D6CFC7 · Weiß · Schrift DM Sans (selbst gehostet, von der Seite eingebunden).
   Keine externen Ressourcen. Alle Effekte aus bei prefers-reduced-motion. */

@view-transition { navigation: auto; }

:root{
  --navy:#1B263B; --navy-2:#24324d; --bronze:#8E7355; --bronze-d:#76603f; --bronze-l:#cdb28c; --sand:#D6CFC7;
  --bg:#f4f1ed; --surface:#fff; --surface-2:#faf8f5; --ink:#1B263B; --muted:#5d6b7a; --line:#e6e0d8; --line-2:rgba(27,38,59,.07);
  --ok:#256b4c; --ok-bg:#e3f1ea; --warn:#7a5000; --warn-bg:#fff1d9; --err:#8a2c1c; --err-bg:#f7e4e0; --info:#2b4c7e; --info-bg:#e6edf8;
  --glass:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.35); --glass-navy:rgba(27,38,59,.80);
  --sk1:#ece7e1; --sk2:#f7f4f0;
  --sh-1:0 1px 2px rgba(27,38,59,.05),0 6px 18px rgba(27,38,59,.06);
  --sh-2:0 18px 40px rgba(27,38,59,.14),0 2px 6px rgba(27,38,59,.06);
  --sh-3:0 30px 80px rgba(10,16,28,.28),0 4px 12px rgba(10,16,28,.12);
  --r-card:16px; --r-big:24px; --r-pill:999px; --r-in:12px;
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:120ms; --t:280ms; --t-slow:420ms;
  --focus:0 0 0 3px rgba(142,115,85,.55);
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6b7a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1522; --surface:#172136; --surface-2:#1d2a43; --ink:#ece6df; --muted:#a9b3bf; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
    --ok:#86d6ae; --ok-bg:rgba(47,125,91,.24); --warn:#f1c77a; --warn-bg:rgba(200,140,20,.18); --err:#f4a99c; --err-bg:rgba(170,60,40,.26); --info:#aec6ee; --info-bg:rgba(60,100,170,.26);
    --glass:rgba(23,33,54,.66); --glass-line:rgba(255,255,255,.08);
    --sk1:#1d2a43; --sk2:#26355a;
    --sh-1:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.22);
    --sh-2:0 22px 48px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
    --focus:0 0 0 3px rgba(205,178,140,.6);
    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9b3bf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}
/* Bereiche, die immer hell bleiben (z. B. Karten mit dem Primärlogo auf Weiß) */
.zui-light{
  --surface:#fff; --surface-2:#faf8f5; --ink:#1B263B; --muted:#5d6b7a; --line:#e0d9cf; --line-2:rgba(27,38,59,.07);
  --ok:#256b4c; --ok-bg:#e3f1ea; --err:#8a2c1c; --err-bg:#f7e4e0; --sk1:#ece7e1; --sk2:#f7f4f0; --focus:0 0 0 3px rgba(142,115,85,.55);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6b7a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color:var(--ink); color-scheme:light;
}

/* ---------- Grundlage ---------- */
.zui, .zui *, .zui *::before, .zui *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.zui{ margin:0; min-height:100vh; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-tap-highlight-color:transparent; }
body.zui::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 45% at 88% 8%, rgba(142,115,85,.05), transparent 70%),
    radial-gradient(45% 40% at 4% 96%, rgba(142,115,85,.05), transparent 70%),
    linear-gradient(180deg, #ece6de 0%, #f5f2ee 38%, #fbfaf8 100%); }
@media (prefers-color-scheme:dark){
  body.zui::before{ background:
    radial-gradient(55% 45% at 88% 8%, rgba(142,115,85,.08), transparent 70%),
    radial-gradient(45% 40% at 4% 96%, rgba(142,115,85,.06), transparent 70%),
    linear-gradient(180deg, #121b2c 0%, #0e1522 60%, #0b111c 100%); }
}
.zui ::selection{ background:rgba(142,115,85,.28); }
.zui a{ color:inherit; }
.zui a.m, .zui .link{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(142,115,85,.55); text-underline-offset:3px; }
.zui a.m:hover, .zui .link:hover{ text-decoration-color:var(--bronze); }
.zui :focus-visible{ outline:none; box-shadow:var(--focus); border-radius:10px; }
.zui .muted{ color:var(--muted); font-size:13px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Glas ---------- */
.glass{ background:var(--glass); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); box-shadow:inset 0 0 0 1px var(--glass-line), var(--sh-1); }

/* ---------- Navigationsleiste (klebt, Glas) ---------- */
.zn{ position:sticky; top:0; z-index:50; view-transition-name:zn; display:flex; align-items:center; gap:10px; height:60px;
  padding:0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); color:#fff;
  background:var(--glass-navy); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid transparent; transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), -webkit-backdrop-filter var(--t), backdrop-filter var(--t); }
.zui-scrolled .zn{ -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%); border-bottom-color:rgba(255,255,255,.10); box-shadow:0 10px 30px rgba(10,16,28,.20); }
.zn a{ color:#fff; text-decoration:none; }
.zn-back, .zn-btn{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px 0 10px; border-radius:var(--r-pill); font-size:15px; font-weight:500; color:#fff; transition:background var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.zn-btn{ padding:0 16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.30); }
.zn-back svg{ width:18px; height:18px; }
.zn-back:hover, .zn-btn:hover{ background:rgba(255,255,255,.12); }
.zn-back:active, .zn-btn:active{ transform:scale(.97); }
.zn-brand{ font-weight:700; letter-spacing:.2px; font-size:16px; padding-left:6px; }
.zn-title{ position:absolute; left:50%; top:50%; transform:translate(-50%,-30%); opacity:0; font-size:16px; font-weight:600; white-space:nowrap; pointer-events:none; max-width:46vw; overflow:hidden; text-overflow:ellipsis; transition:opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.zui-scrolled .zn-title{ opacity:1; transform:translate(-50%,-50%); }
.zn-r{ margin-left:auto; display:flex; align-items:center; gap:10px; font-size:14px; color:#dbe4ee; }

/* ---------- Kopfbereich mit großem Titel ---------- */
.zh{ position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:14px 24px 76px; view-transition-name:zh; }
.zh::after{ content:""; position:absolute; right:-12%; top:-60%; width:58%; height:220%; pointer-events:none; background:radial-gradient(closest-side, rgba(205,178,140,.16), transparent); }
.zh-in{ position:relative; z-index:1; max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:18px; }
.zh-logo{ width:64px; height:64px; flex:none; display:block; }
.zh-eyebrow{ margin:0 0 4px; font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--bronze-l); }
.zh h1{ margin:0; font-size:34px; line-height:1.1; font-weight:700; letter-spacing:-.02em; }
.zh-sub{ margin:8px 0 0; max-width:780px; font-size:15px; color:#c8d3df; }
.zh-in > *{ animation:zrise var(--t-slow) var(--ease) both; }
.zh-in > *:nth-child(2){ animation-delay:60ms; }

/* ---------- Inhalt ---------- */
.zm{ position:relative; max-width:1120px; margin:-48px auto 56px; padding:0 24px; }
.zf{ max-width:1120px; margin:0 auto 32px; padding:0 24px; font-size:12.5px; color:var(--muted); }

/* ---------- Karten ---------- */
.zui .card{ position:relative; background:var(--surface); border-radius:var(--r-card); padding:20px 22px; margin-bottom:16px; border:1px solid var(--line-2); box-shadow:var(--sh-1); scroll-margin-top:132px; }
.zui .card h2, .zui .card-t{ display:block; margin:0 0 12px; font-size:19px; font-weight:700; letter-spacing:-.01em; }

/* ---------- Kacheln (Hover-Anhebung, Licht-Reflex) ---------- */
.tile{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:10px; min-height:160px; padding:22px; border-radius:var(--r-card); background:var(--surface); color:inherit; text-decoration:none; border:1px solid var(--line-2); box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.tile::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none; transition:opacity var(--t) var(--ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(205,178,140,.24), transparent 46%); }
a.tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:rgba(142,115,85,.35); }
a.tile:hover::before{ opacity:1; }
a.tile:active{ transform:translateY(-1px) scale(.98); transition-duration:var(--t-fast); }
a.tile:focus-visible{ box-shadow:var(--sh-2), var(--focus); border-radius:var(--r-card); }

/* ---------- Knöpfe ---------- */
.zui button, .btn{ -webkit-appearance:none; appearance:none; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin:0; padding:0 20px;
  font:inherit; font-size:15px; font-weight:600; line-height:1.2; text-align:center; text-decoration:none; color:#fff; cursor:pointer; user-select:none; -webkit-user-select:none;
  border:0; border-radius:var(--r-pill); background-color:#7d654a; background-image:linear-gradient(180deg,#86694b,#76603f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(118,96,63,.26);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease), opacity var(--t); }
.zui button:hover, .btn:hover{ background-color:#6d573c; background-image:linear-gradient(180deg,#7a6045,#6a5538); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(118,96,63,.32); }
.zui button:active, .btn:active{ transform:scale(.97); }
.zui button:focus-visible, .btn:focus-visible{ box-shadow:var(--focus); border-radius:var(--r-pill); }
.zui button:disabled, .btn:disabled, .btn[disabled]{ opacity:.45; cursor:default; transform:none; box-shadow:none; }
.zui button.s, .btn.s, .btn-sec{ color:var(--ink); background-color:var(--surface); background-image:none; box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px rgba(27,38,59,.05); }
.zui button.s:hover, .btn.s:hover, .btn-sec:hover{ background-color:var(--surface-2); background-image:none; box-shadow:inset 0 0 0 1px rgba(142,115,85,.45), 0 4px 12px rgba(27,38,59,.08); }
.zui td button{ font-size:13px; padding:0 14px; }

/* ---------- Eingaben ---------- */
.zui input:not([type=checkbox]):not([type=radio]):not([type=file]), .zui select, .zui textarea{
  width:100%; min-height:44px; padding:10px 14px; font:inherit; font-size:16px; color:var(--ink);
  background-color:var(--surface); border:1px solid var(--line); border-radius:var(--r-in);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t); }
.zui select{ -webkit-appearance:none; appearance:none; padding-right:36px; background-image:var(--chev); background-repeat:no-repeat; background-position:right 14px center; }
.zui textarea{ min-height:88px; resize:vertical; }
.zui input:hover, .zui select:hover, .zui textarea:hover{ border-color:rgba(142,115,85,.45); }
.zui input:focus, .zui select:focus, .zui textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(27,38,59,.12); border-radius:var(--r-in); }
@media (prefers-color-scheme:dark){ .zui input:focus, .zui select:focus, .zui textarea:focus{ border-color:var(--bronze-l); box-shadow:0 0 0 4px rgba(205,178,140,.18); } }
.zui-light input:focus, .zui-light select:focus{ border-color:var(--navy)!important; box-shadow:0 0 0 4px rgba(27,38,59,.12)!important; }
.zui input::placeholder, .zui textarea::placeholder{ color:#8a939e; }
.zui input[type=checkbox], .zui input[type=radio]{ accent-color:var(--bronze); width:18px; height:18px; margin:0; }
.zui label{ display:block; margin:0 0 6px; font-size:13px; font-weight:500; color:var(--muted); }

/* ---------- Tabellen ---------- */
.tbl{ overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--surface); border-radius:var(--r-card); border:1px solid var(--line-2); box-shadow:var(--sh-1); margin-bottom:16px; }
.card .tbl{ box-shadow:none; border:1px solid var(--line); margin-bottom:10px; }
.zui table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; background:transparent; }
.zui th, .zui td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.zui th{ font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--muted); background:var(--surface-2); white-space:nowrap; }
.zui tbody tr:last-child > td{ border-bottom:0; }
.zui tbody tr{ transition:background-color var(--t) var(--ease); }
.zui tr.row{ cursor:pointer; }
.zui tr.row:hover{ background:var(--surface-2); }
.zui tr.det > td{ background:var(--surface-2); padding:16px 18px; animation:zdrop var(--t) var(--ease) both; }

/* ---------- Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap; background:var(--surface-2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-2); }
.chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; flex:none; }
.chip.ok, .chip.hochgeladen, .chip.eingerichtet{ background:var(--ok-bg); color:var(--ok); }
.chip.warn, .chip.hochgeladen_teilweise, .chip.eingeladen, .chip.neu_eingeladen{ background:var(--warn-bg); color:var(--warn); }
.chip.info, .chip.angesehen{ background:var(--info-bg); color:var(--info); }
.chip.navy, .chip.unterschrieben_eingegangen{ background:var(--navy); color:#fff; }
.chip.err, .chip.fehlt, .chip.gesperrt, .chip.abgelehnt{ background:var(--err-bg); color:var(--err); }
@media (prefers-color-scheme:dark){ .chip.navy, .chip.unterschrieben_eingegangen{ background:#2c3d60; } }

/* ---------- Segment-Steuerung ---------- */
.seg{ position:relative; display:inline-flex; max-width:100%; overflow-x:auto; scrollbar-width:none; padding:3px; border-radius:var(--r-pill); background:rgba(118,118,128,.14); }
.seg::-webkit-scrollbar{ display:none; }
.seg > a, .seg > button{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:var(--r-pill); font:inherit; font-size:14px; font-weight:500; white-space:nowrap; color:var(--ink); text-decoration:none; background:none!important; box-shadow:none!important; transition:color var(--t) var(--ease), opacity var(--t); }
.seg > a.on, .seg > button.on{ font-weight:600; }
.seg > [hidden]{ display:none; }
.seg-ind{ position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:var(--r-pill); background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.06); transition:transform var(--t-slow) var(--ease), width var(--t-slow) var(--ease), opacity var(--t); }
.seg-bar{ position:sticky; top:68px; z-index:40; display:flex; justify-content:center; margin:0 0 16px; pointer-events:none; }
.seg-bar .seg{ pointer-events:auto; background:var(--glass); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); box-shadow:inset 0 0 0 1px var(--glass-line), var(--sh-1); }
.seg-bar .seg-ind{ background:var(--navy); }
.seg-bar .seg > a.on, .seg-bar .seg > button.on{ color:#fff; }

/* ---------- Skeleton ---------- */
.skel{ display:block; height:14px; border-radius:8px; background:linear-gradient(90deg, var(--sk1) 0%, var(--sk2) 40%, var(--sk1) 80%); background-size:300% 100%; animation:zshim 1.4s ease-in-out infinite; }
.skel + .skel{ margin-top:8px; }
.skel-row > td{ padding:16px 14px; }

/* ---------- Toast ---------- */
.toast-host{ position:fixed; left:50%; bottom:max(24px, env(safe-area-inset-bottom)); translate:-50% 0; z-index:100; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast{ pointer-events:auto; max-width:min(92vw,520px); padding:12px 20px; border-radius:var(--r-pill); font:500 14px/1.35 var(--font); color:#fff; background:rgba(27,38,59,.86); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), var(--sh-3); animation:ztin var(--t-slow) var(--ease) both; }
.toast.err{ background:rgba(138,44,28,.92); }
.toast.out{ animation:ztout var(--t) var(--ease) both; }

/* ---------- Sheet ---------- */
.sheet-bg{ position:fixed; inset:0; z-index:90; background:rgba(14,21,34,.34); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:zfade var(--t) var(--ease) both; }
.sheet{ position:fixed; z-index:91; left:50%; bottom:0; translate:-50% 0; width:min(640px,100%); max-height:88vh; overflow:auto; padding:22px 22px max(22px, env(safe-area-inset-bottom)); border-radius:var(--r-big) var(--r-big) 0 0; color:var(--ink); background:var(--glass); -webkit-backdrop-filter:blur(30px) saturate(170%); backdrop-filter:blur(30px) saturate(170%); box-shadow:inset 0 0 0 1px var(--glass-line), var(--sh-3); animation:zsheet var(--t-slow) var(--ease) both; }
.sheet::before{ content:""; display:block; width:40px; height:5px; margin:-8px auto 14px; border-radius:3px; background:rgba(120,120,128,.35); }
.sheet h2{ margin:0 0 12px; font-size:20px; }
@media (min-width:700px){ .sheet{ bottom:auto; top:50%; translate:-50% -50%; border-radius:var(--r-big); } .sheet::before{ display:none; } }
.sheet-bg.out{ animation:zfadeout var(--t) var(--ease) both; }
.sheet.out{ animation:zsheetout var(--t) var(--ease) both; }

/* ---------- Kanban (für Recruiting-Ausbau vorbereitet) ---------- */
.kb{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 2px 16px; -webkit-overflow-scrolling:touch; }
.kb-col{ flex:0 0 272px; scroll-snap-align:start; }
.kb-card{ cursor:grab; }
.kb-card.dragging{ cursor:grabbing; transform:scale(1.03) rotate(1deg); box-shadow:var(--sh-3); z-index:5; }
.kb-gap{ border-radius:12px; border:2px dashed rgba(142,115,85,.45); background:rgba(142,115,85,.06); min-height:56px; transition:min-height var(--t) var(--ease); }

/* ---------- Gestaffeltes Einblenden ---------- */
.zui-js .zr-pre{ opacity:0; transform:translateY(8px); }
.zr-in{ animation:zrise var(--t-slow) var(--ease) both; animation-delay:var(--zr-d,0ms); }

/* ---------- Seitenübergänge ---------- */
::view-transition-old(root), ::view-transition-new(root){ animation-duration:280ms; animation-timing-function:cubic-bezier(.2,.8,.2,1); }

@keyframes zrise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes zdrop{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@keyframes zfade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes zfadeout{ from{ opacity:1; } to{ opacity:0; } }
@keyframes zshim{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@keyframes ztin{ from{ opacity:0; transform:translateY(16px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes ztout{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(10px) scale(.97); } }
@keyframes zsheet{ from{ opacity:0; transform:translateY(24px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes zsheetout{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(24px) scale(.98); } }

/* ---------- Handy ---------- */
@media (max-width:640px){
  .zh{ padding:10px 16px 68px; }
  .zh-in{ gap:14px; align-items:flex-start; }
  .zh-logo{ width:52px; height:52px; }
  .zh h1{ font-size:28px; }
  .zh-sub{ font-size:14px; }
  .zm{ padding:0 16px; }
  .zf{ padding:0 16px; }
  .zui .card{ padding:18px 16px; }
  .zn-title{ max-width:40vw; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms!important; animation-delay:0s!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .zui-js .zr-pre{ opacity:1; transform:none; }
  @view-transition { navigation:none; }
}