/* Zusage Design Tokens — Quelle: Designsystem tokens/colors.css, typography.css, layout.css (Stand 18.09.2026) */
:root{
--primary-50:#eaf5ef;--primary-100:#cbe8d9;--primary-200:#9bd3b8;--primary-300:#62bc93;--primary-400:#3cbd82;
--primary-500:#17936a;--primary-600:#0f7a52;--primary-700:#0c6544;--primary-800:#0a5c3d;--primary-900:#07452e;
--primary:var(--primary-600);--primary-on-dark:var(--primary-400);--primary-hover:var(--primary-700);--primary-press:var(--primary-800);
--secondary-100:#eceef1;--secondary-200:#d3d6dd;--secondary-300:#a7aab4;--secondary-400:#7c8190;--secondary-500:#565c6b;
--secondary-600:#3b3f49;--secondary-700:#23262e;--secondary-800:#14161c;--secondary-900:#101318;
--secondary:var(--secondary-800);--secondary-hover:var(--secondary-700);--secondary-press:var(--secondary-900);
--neutral-0:#fffefb;--neutral-50:#f4f2ec;--neutral-100:#e9e7e0;--neutral-200:#dcdad3;--neutral-300:#c6c3b9;
--success-600:#0f7a52;--success-400:#3cbd82;--success-50:#eaf5ef;
--warning-600:#a86f16;--warning-400:#e0a534;--warning-50:#faf1dd;
--danger-600:#b4402c;--danger-400:#e0523c;--danger-50:#fbeae6;
--info-600:#1f5f87;--info-400:#4a92bd;--info-50:#e7f1f7;
--surface-page:var(--neutral-50);--surface-card:var(--neutral-0);--surface-sunken:var(--neutral-100);
--surface-inverse:var(--secondary-900);--surface-accent:var(--primary-600);--surface-accent-subtle:var(--primary-50);
--text-body:var(--secondary-800);--text-muted:var(--secondary-500);--text-subtle:var(--secondary-400);
--text-on-dark:var(--neutral-0);--text-on-dark-muted:var(--secondary-400);--text-on-accent:var(--neutral-0);
--text-accent:var(--primary-600);--text-accent-on-dark:var(--primary-400);
--border-hairline:var(--neutral-200);--border-strong:var(--secondary-300);--border-on-dark:var(--secondary-700);--border-accent:var(--primary-600);
--ink:var(--secondary-800);--ink-2:var(--secondary-500);--ink-deep:var(--secondary-900);--paper:var(--neutral-50);--card:var(--neutral-0);--line:var(--neutral-200);
--green:var(--primary-600);--green-light:var(--primary-400);--green-dark:var(--primary-800);--accent:var(--primary-600);--accent-on-dark:var(--primary-400);
--app-icon-bg:var(--secondary-900);--nav-active-bg:var(--surface-accent-subtle);--nav-active-ink:var(--primary-700);
--color-scheme:light;
--font-core:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-reading:"Source Serif 4",Georgia,serif;
--font-mono:"JetBrains Mono",ui-monospace,monospace;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--radius-sm:3px;--radius-md:5px;--radius-lg:8px;--radius-pill:999px;--radius-tile:24%;
--rail-width:4px;--icon-grid:24px;--icon-stroke:1.75;
--shadow-card:0 1px 2px rgba(20,22,28,.06);--shadow-raised:0 2px 6px rgba(20,22,28,.08);--shadow-menu:0 10px 28px rgba(20,22,28,.16);
--focus-ring:0 0 0 3px rgba(15,122,82,.32);
--control-height:44px;--control-height-sm:36px;
}
[data-theme="dark"]{
--nav-active-bg:transparent;--nav-active-ink:var(--primary-400);
--surface-page:#0c0e12;--surface-card:var(--secondary-800);--surface-sunken:var(--secondary-700);--surface-inverse:var(--neutral-50);
--surface-accent:var(--primary-600);--surface-accent-subtle:#132a20;
--text-body:var(--neutral-0);--text-muted:var(--secondary-300);--text-subtle:var(--secondary-400);
--text-on-dark:var(--secondary-800);--text-on-dark-muted:var(--secondary-500);--text-on-accent:var(--neutral-0);
--text-accent:var(--primary-400);--text-accent-on-dark:var(--primary-600);
--border-hairline:#2b3039;--border-strong:var(--secondary-600);--border-on-dark:var(--neutral-200);--border-accent:var(--primary-400);
--primary-hover:var(--primary-500);--primary-press:var(--primary-600);--secondary-hover:var(--secondary-600);--secondary-press:var(--secondary-700);
--success-50:#12281e;--warning-50:#2c2312;--danger-50:#2d1713;--info-50:#132430;
--success-600:var(--primary-400);--warning-600:var(--warning-400);--danger-600:var(--danger-400);--info-600:var(--info-400);
--ink:var(--neutral-0);--ink-2:var(--secondary-300);--ink-deep:var(--neutral-50);--paper:#0c0e12;--card:var(--secondary-800);--line:#2b3039;
--green:var(--primary-400);--accent:var(--primary-400);--app-icon-bg:var(--neutral-0);
--color-scheme:dark;
}
input::placeholder,textarea::placeholder{font:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:var(--text-subtle);opacity:1}

/* Komponenten des Designsystems, statisch nachgebaut: Button, Field, TextField, TextArea, Select */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);height:var(--control-height);padding:0 var(--space-6);font-family:var(--font-core);font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1;border-radius:var(--radius-md);cursor:pointer;transition:background .15s,border-color .15s,transform .08s;box-sizing:border-box}
.ds-btn:active{transform:translateY(1px)}
.ds-btn--sm{gap:var(--space-2);height:var(--control-height-sm);padding:0 var(--space-4);font-size:13px}
.ds-btn--full{width:100%}
.ds-btn--primary{background:var(--primary-600);color:var(--text-on-accent);border:1px solid var(--primary-600)}
.ds-btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.ds-btn--secondary{background:var(--surface-card);color:var(--text-body);border:1px solid var(--border-strong)}
.ds-btn--secondary:hover{background:var(--surface-sunken);border-color:var(--secondary-300)}
.ds-btn--ghost{background:transparent;color:var(--text-body);border:1px solid transparent}
.ds-btn--ghost:hover{background:var(--surface-sunken)}
.ds-btn--danger{background:var(--danger-600);color:var(--text-on-accent);border:1px solid var(--danger-600)}
.ds-btn--danger:hover{background:#9c3626;border-color:#9c3626}
.ds-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.ds-icon{display:block;flex:none}
.ds-field{display:grid;gap:var(--space-2);min-width:0}
.ds-label{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-core);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.ds-req{color:var(--danger-600)}
.ds-shell{display:flex;align-items:center;gap:var(--space-3);min-width:0;height:var(--control-height);padding:0 var(--space-4);background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-md);font-family:var(--font-core);font-size:15px;color:var(--text-body);box-sizing:border-box}
.ds-shell:focus-within{box-shadow:var(--focus-ring);border-color:var(--border-accent)}
.ds-shell input{border:0;background:transparent;font:inherit;color:inherit;flex:1;min-width:0;outline:none;padding:0;margin:0}
.ds-shell--select{position:relative;cursor:pointer;overflow:hidden}
.ds-shell select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:inherit;flex:1;min-width:0;width:100%;text-overflow:ellipsis;outline:none;cursor:pointer;padding:0;margin:0}
.ds-shell select option{color:var(--secondary-800);background:var(--neutral-0)}
.ds-textarea{height:auto;display:block;width:100%;padding:var(--space-3) var(--space-4);resize:vertical;line-height:1.45;outline:none}
.ds-textarea:focus{box-shadow:var(--focus-ring);border-color:var(--border-accent)}
.ds-if{display:contents}
.ds-if.is-off{display:none}
[data-click]{-webkit-tap-highlight-color:transparent}
@media (max-width:1023px){.ds-if[data-if="isWide"]{display:none}}
@media (min-width:1024px){.ds-if[data-if="isNarrow"],.ds-if[data-if="menuOpen"]{display:none}}

/* Seite */
*{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:88px}
    body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-core);-webkit-font-smoothing:antialiased}
    a{color:var(--text-accent);text-decoration:none}
    a:hover{color:var(--text-body)}
    @keyframes zusage-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
    @keyframes zs-show{0%,24.9%{opacity:1;visibility:visible}25%,100%{opacity:0;visibility:hidden}}
    @keyframes zs-drift-a{0%{transform:rotateY(-3.5deg) rotateX(2deg) scale(1.03)}25%,100%{transform:rotateY(2deg) rotateX(-1deg) scale(1)}}
    @keyframes zs-drift-b{0%{transform:rotateY(3deg) rotateX(-1.5deg) scale(1)}25%,100%{transform:rotateY(-2deg) rotateX(1.5deg) scale(1.03)}}
    @keyframes zs-in-170{0%,14.17%{opacity:0}15%,100%{opacity:1}}
    @keyframes zs-in-175{0%,14.58%{opacity:0}15.4%,100%{opacity:1}}
    @keyframes zs-in-180{0%,15%{opacity:0}15.8%,100%{opacity:1}}
    @keyframes zs-in-190{0%,15.83%{opacity:0}16.7%,100%{opacity:1}}
    @keyframes zs-in-200{0%,16.67%{opacity:0}17.5%,100%{opacity:1}}
    @keyframes zs-in-210{0%,17.5%{opacity:0}18.3%,100%{opacity:1}}
    @keyframes zs-in-270{0%,22.5%{opacity:0}23.3%,100%{opacity:1}}
    @keyframes zs-out-30{0%,2.5%{opacity:1}2.6%,100%{opacity:0}}
    @keyframes zs-out-175{0%,14.58%{opacity:1}15.4%,100%{opacity:0}}
    @keyframes zs-out-180{0%,15%{opacity:1}15.8%,100%{opacity:0}}
    @keyframes zs-out-200{0%,16.67%{opacity:1}17.5%,100%{opacity:0}}
    @keyframes zs-win-30-80{0%,2.5%{opacity:0}2.6%,6.67%{opacity:1}6.7%,100%{opacity:0}}
    @keyframes zs-win-80-130{0%,6.67%{opacity:0}6.7%,10.83%{opacity:1}10.9%,100%{opacity:0}}
    @keyframes zs-win-130-170{0%,10.83%{opacity:0}10.9%,14.17%{opacity:1}14.2%,100%{opacity:0}}
    @keyframes zs-win-130-200{0%,10.83%{opacity:0}11.2%,16.67%{opacity:1}16.8%,100%{opacity:0}}
    @keyframes zs-win-170-200{0%,14.17%{opacity:0}14.6%,16.67%{opacity:1}16.8%,100%{opacity:0}}
    @keyframes zs-dim-80-200{0%,6.67%{opacity:1}7%,16.67%{opacity:.35}17%,100%{opacity:1}}
    @keyframes zs-rip-90{0%,7.3%{opacity:0;transform:scale(.3)}7.5%{opacity:.9;transform:scale(.4)}10.5%,100%{opacity:0;transform:scale(1.4)}}
    @keyframes zs-rip-190{0%,15.6%{opacity:0;transform:scale(.3)}15.83%{opacity:.9;transform:scale(.4)}18.8%,100%{opacity:0;transform:scale(1.4)}}
    @keyframes zs-rip-170{0%,13.9%{opacity:0;transform:scale(.3)}14.17%{opacity:.9;transform:scale(.4)}17.2%,100%{opacity:0;transform:scale(1.4)}}
    @keyframes zs-rip-260{0%,21.4%{opacity:0;transform:scale(.3)}21.67%{opacity:.9;transform:scale(.4)}24.7%,100%{opacity:0;transform:scale(1.4)}}
    @keyframes zs-s1-cur{0%{transform:translate(700px,300px);animation-timing-function:cubic-bezier(.3,.6,.2,1)}6.67%,11.67%{transform:translate(1212px,388px);animation-timing-function:cubic-bezier(.3,.6,.2,1)}15%,100%{transform:translate(1100px,500px)}}
    @keyframes zs-s1-menu{0%,8.33%{opacity:0;transform:scaleY(.94)}9.17%,16.67%{opacity:1;transform:scaleY(1)}17%,100%{opacity:0;transform:scaleY(1)}}
    @keyframes zs-s2-cur{0%{transform:translate(700px,460px);animation-timing-function:cubic-bezier(.3,.6,.2,1)}5.83%,6.67%{transform:translate(1040px,712px);animation-timing-function:cubic-bezier(.4,.2,.2,1)}15.83%,100%{transform:translate(730px,622px)}}
    @keyframes zs-s2-ghost{0%,6.67%{opacity:0;transform:translate(0,0) rotate(0)}7%{opacity:.94;transform:translate(0,0) rotate(0);animation-timing-function:cubic-bezier(.4,.2,.2,1)}15.83%{opacity:.94;transform:translate(-310px,-90px) rotate(-1.5deg)}16.67%,100%{opacity:0;transform:translate(-310px,-90px) rotate(0)}}
    @keyframes zs-s2-shift{0%,16.67%{transform:translate(0,0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}18.33%,100%{transform:translate(0,86px)}}
    @keyframes zs-s3-press{0%,13.33%{transform:scale(1)}13.8%{transform:scale(.9)}14.5%,100%{transform:scale(1)}}
    @keyframes zs-s3-shift{0%,15.83%{transform:translate(0,0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}17.5%,100%{transform:translate(0,72px)}}
    @keyframes zs-s4-cur{0%{transform:translate(600px,400px);animation-timing-function:cubic-bezier(.3,.6,.2,1)}5%{transform:translate(302px,526px)}9.17%,10%{transform:translate(414px,526px);animation-timing-function:cubic-bezier(.3,.6,.2,1)}13.33%,14.6%{transform:translate(58px,382px);animation-timing-function:cubic-bezier(.3,.6,.2,1)}20.83%,100%{transform:translate(812px,216px)}}
    @keyframes zs-s4-sel{0%,5%{opacity:1;transform:scaleX(0)}9.17%,14.58%{opacity:1;transform:scaleX(1)}15%,100%{opacity:0;transform:scaleX(1)}}
    @keyframes zs-s4-press{0%,21.67%{transform:scale(1)}22.1%{transform:scale(.95)}22.5%,100%{transform:scale(1)}}
    @keyframes zs-ab-fill-0{0%,0%{transform:scaleY(0)}14.66%,100%{transform:scaleY(1)}}
    @keyframes zs-ab-node-0{0%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1.3)}3%,100%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1)}}
    @keyframes zs-ab-text-0{0%,100%{color:var(--text-body)}}
    @keyframes zs-ab-badge-0{0%,14.66%{opacity:1}15.46%,100%{opacity:0}}
    @keyframes zs-ab-fill-1{0%,14.66%{transform:scaleY(0)}29.33%,100%{transform:scaleY(1)}}
    @keyframes zs-ab-node-1{0%,14.56%{background:var(--surface-card);border-color:var(--border-strong);color:transparent;transform:scale(1)}14.66%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1.3)}17.66%,100%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1)}}
    @keyframes zs-ab-text-1{0%,14.66%{color:var(--text-subtle)}16.66%,100%{color:var(--text-body)}}
    @keyframes zs-ab-badge-1{0%,14.66%{opacity:0}15.46%,29.33%{opacity:1}30.13%,100%{opacity:0}}
    @keyframes zs-ab-fill-2{0%,29.33%{transform:scaleY(0)}43.99%,100%{transform:scaleY(1)}}
    @keyframes zs-ab-node-2{0%,29.23%{background:var(--surface-card);border-color:var(--border-strong);color:transparent;transform:scale(1)}29.33%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1.3)}32.33%,100%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1)}}
    @keyframes zs-ab-text-2{0%,29.33%{color:var(--text-subtle)}31.33%,100%{color:var(--text-body)}}
    @keyframes zs-ab-badge-2{0%,29.33%{opacity:0}30.13%,43.99%{opacity:1}44.79%,100%{opacity:0}}
    @keyframes zs-ab-fill-3{0%,43.99%{transform:scaleY(0)}58.65%,100%{transform:scaleY(1)}}
    @keyframes zs-ab-node-3{0%,43.89%{background:var(--surface-card);border-color:var(--border-strong);color:transparent;transform:scale(1)}43.99%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1.3)}46.99%,100%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1)}}
    @keyframes zs-ab-text-3{0%,43.99%{color:var(--text-subtle)}45.99%,100%{color:var(--text-body)}}
    @keyframes zs-ab-badge-3{0%,43.99%{opacity:0}44.79%,58.65%{opacity:1}59.45%,100%{opacity:0}}
    @keyframes zs-ab-fill-4{0%,58.65%{transform:scaleY(0)}73.31%,100%{transform:scaleY(1)}}
    @keyframes zs-ab-node-4{0%,58.55%{background:var(--surface-card);border-color:var(--border-strong);color:transparent;transform:scale(1)}58.65%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1.3)}61.65%,100%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1)}}
    @keyframes zs-ab-text-4{0%,58.65%{color:var(--text-subtle)}60.65%,100%{color:var(--text-body)}}
    @keyframes zs-ab-badge-4{0%,58.65%{opacity:0}59.45%,73.31%{opacity:1}74.11%,100%{opacity:0}}
    @keyframes zs-ab-fill-5{0%,73.31%{transform:scaleY(0)}87.98%,100%{transform:scaleY(1)}}
    @keyframes zs-ab-node-5{0%,73.21%{background:var(--surface-card);border-color:var(--border-strong);color:transparent;transform:scale(1)}73.31%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1.3)}76.31%,100%{background:var(--primary-600);border-color:var(--primary-600);color:var(--text-on-accent);transform:scale(1)}}
    @keyframes zs-ab-text-5{0%,73.31%{color:var(--text-subtle)}75.31%,100%{color:var(--text-body)}}
    @keyframes zs-ab-badge-5{0%,73.31%{opacity:0}74.11%,100%{opacity:1}}
    @keyframes zs-type{0%,3.33%{transform:scaleX(0);animation-timing-function:steps(12,end)}9.33%,100%{transform:scaleX(1)}}
    @keyframes zs-type-caret{0%,3.33%{transform:translateX(0);animation-timing-function:steps(12,end)}9.33%,100%{transform:translateX(108px)}}
    @keyframes zs-out-170{0%,14.17%{opacity:1}14.2%,100%{opacity:0}}
    @keyframes zs-ab-grow-0{0%,14.66%{max-height:84px}17.66%,100%{max-height:0px}}
    @keyframes zs-ab-desc-0{0%,14.16%{opacity:1}16.16%,100%{opacity:0}}
    @keyframes zs-ab-grow-1{0%,14.66%{max-height:0px}17.66%,29.33%{max-height:84px}32.33%,100%{max-height:0px}}
    @keyframes zs-ab-desc-1{0%,16.16%{opacity:0}18.66%,28.83%{opacity:1}30.83%,100%{opacity:0}}
    @keyframes zs-ab-grow-2{0%,29.33%{max-height:0px}32.33%,43.99%{max-height:84px}46.99%,100%{max-height:0px}}
    @keyframes zs-ab-desc-2{0%,30.83%{opacity:0}33.33%,43.49%{opacity:1}45.49%,100%{opacity:0}}
    @keyframes zs-ab-grow-3{0%,43.99%{max-height:0px}46.99%,58.65%{max-height:84px}61.65%,100%{max-height:0px}}
    @keyframes zs-ab-desc-3{0%,45.49%{opacity:0}47.99%,58.15%{opacity:1}60.15%,100%{opacity:0}}
    @keyframes zs-ab-grow-4{0%,58.65%{max-height:0px}61.65%,73.31%{max-height:84px}76.31%,100%{max-height:0px}}
    @keyframes zs-ab-desc-4{0%,60.15%{opacity:0}62.65%,72.81%{opacity:1}74.81%,100%{opacity:0}}
    @keyframes zs-ab-grow-5{0%,73.31%{max-height:0px}76.31%,100%{max-height:84px}}
    @keyframes zs-ab-desc-5{0%,74.81%{opacity:0}77.31%,100%{opacity:1}}
    @keyframes zs-rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @media (prefers-reduced-motion:reduce){[data-theme] *{animation-play-state:paused!important}}
.hov-1:hover{background:var(--secondary-700)}
.hov-2:hover{background:var(--secondary-700)}
.hov-3:hover{background:var(--surface-sunken)}
.hov-4:hover{background:var(--surface-sunken)}