/* Zeit — Designsystem tokens (from Figma "Designsystem - Zeit") */
:root{
  --primitive-white:#fff;--primitive-black:#000;--primitive-red:#e5000f;
  --primitive-grey-900:#171717;--primitive-grey-400:#a3a3a3;
  --bg-light:#fff;--bg-dark:#000;--bg-subtle:#f5f5f5;--bg-accent:#e5000f;
  --text-on-light:#000;--text-on-light-secondary:#6b6b6b;
  --text-on-dark:#fff;--text-on-dark-secondary:#a3a3a3;--text-accent:#e5000f;
  --border-on-light:#e5e5e5;--border-on-dark:#404040;--border-strong:#000;
  --radius:0;
  --space-8:8px;--space-12:12px;--space-16:16px;--space-24:24px;--space-28:28px;
  --space-40:40px;--space-48:48px;--space-56:56px;--space-64:64px;--space-80:80px;--space-96:96px;
  --layout-margin:clamp(16px,11.1vw,160px);
  --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);color:var(--text-on-light);background:var(--bg-light);line-height:1.5;font-size:15px}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--primitive-red);outline-offset:2px}

/* Type styles */
.t-display{font-weight:700;font-size:clamp(88px,11vw,160px);line-height:.94;letter-spacing:-.04em;text-transform:lowercase}
.t-headline{font-weight:700;font-size:clamp(30px,3.2vw,40px);line-height:1.2;letter-spacing:-.02em;text-transform:lowercase}
.t-title-l{font-weight:600;font-size:22px;line-height:28px;letter-spacing:-.01em;text-transform:lowercase}
.t-title-m{font-weight:600;font-size:20px;line-height:26px;letter-spacing:-.01em;text-transform:lowercase}
.t-lead{font-size:20px;line-height:30px}
.t-body-l{font-size:17px;line-height:26px}
.t-body-m{font-size:15px;line-height:23px}
.t-body-xs{font-size:13px;line-height:18px}
.t-label{font-weight:500;font-size:15px;line-height:20px;text-transform:lowercase}
.t-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase}
.t-tag{font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:14px;letter-spacing:.1em;text-transform:uppercase}
.t-code{font-family:var(--font-mono);font-weight:500;font-size:13px;line-height:18px}

/* Nav */
.nav{position:sticky;top:0;z-index:10;height:72px;background:var(--bg-light);border-bottom:1px solid var(--border-on-light);padding:0 var(--layout-margin);display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;line-height:24px;letter-spacing:-.02em;text-transform:lowercase}
.logo .mark{width:12px;height:12px;background:var(--bg-accent);flex:none}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{display:block;padding:26px 0;font-weight:500;text-transform:lowercase;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--text-accent)}
.nav-links a[aria-current=page]{color:var(--text-accent);border-bottom-color:var(--text-accent)}
.nav-toggle{display:none;background:none;border:1px solid var(--border-strong);padding:8px 12px;font:inherit;text-transform:lowercase;cursor:pointer}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;gap:0;background:var(--bg-light);border-bottom:1px solid var(--border-on-light);padding:8px var(--layout-margin) 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0}
}

/* Sections */
.section{padding:var(--space-96) var(--layout-margin);display:flex;flex-direction:column;gap:var(--space-40)}
.section--dark{background:var(--bg-dark);color:var(--text-on-dark)}
.section--subtle{background:var(--bg-subtle);border-top:1px solid var(--border-on-light)}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.section-header .title{display:flex;flex-direction:column;gap:var(--space-12)}
.section-header .eyebrow{color:var(--text-accent)}
.section-header .sub{color:var(--text-on-light-secondary);max-width:640px}
.link{font-weight:500;text-transform:lowercase}
.link:hover{color:var(--text-accent)}
@media (max-width:760px){.section{padding:64px var(--layout-margin)}}

/* Hero */
.hero{padding:var(--space-96) var(--layout-margin);background:var(--bg-dark);color:var(--text-on-dark);display:flex;align-items:center;justify-content:space-between;gap:var(--space-64)}
.hero .copy{max-width:640px;display:flex;flex-direction:column;align-items:flex-start}
.hero .eyebrow-row{display:flex;align-items:center;gap:10px;color:var(--text-on-dark-secondary)}
.hero .eyebrow-row .accent{width:24px;height:2px;background:var(--bg-accent)}
.hero .lead{color:var(--text-on-dark-secondary);max-width:560px}
.hero .graphic{width:400px;height:400px;flex:none}
.hero .actions{display:flex;gap:var(--space-12);flex-wrap:wrap}
@media (max-width:1100px){.hero{flex-direction:column;align-items:flex-start}.hero .graphic{width:min(400px,100%);height:auto}}

/* Buttons (auf schwarzer Fläche; Rot nur als Fokus-Ring) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);height:48px;padding:0 var(--space-24);font:inherit;font-weight:500;font-size:15px;line-height:20px;text-transform:lowercase;white-space:nowrap;cursor:pointer;border:0;border-radius:var(--radius);background:var(--bg-light);color:var(--text-on-light)}
.btn:hover{background:#e5e5e5}
.btn--primary{border-radius:999px}
.btn--tertiary{background:var(--primitive-grey-400);color:var(--text-on-light)}
.btn--tertiary:hover{background:#8a8a8a}
.btn--ghost{background:transparent;color:var(--text-on-dark)}
.btn--ghost:hover{background:#171717}
.btn--m{height:40px;padding:0 20px;font-size:14px}
.btn--s{height:32px;padding:0 14px;font-size:13px}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-24)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:var(--bg-light);border:1px solid var(--border-on-light);display:flex;flex-direction:column;color:inherit}
a.card:hover{border-color:var(--border-strong)}
.card .visual{height:160px;background:var(--primitive-grey-900);position:relative}
.card .visual .shape{position:absolute;left:28px;top:68px;width:64px;height:64px}
.card .body{padding:var(--space-24) var(--space-28) var(--space-28);display:flex;flex-direction:column;gap:10px}
.card .title-row{display:flex;align-items:center;justify-content:space-between}
.card .title-row .num{color:var(--text-on-light-secondary)}
.card .desc{color:var(--text-on-light-secondary)}
.role-card{background:var(--bg-light);border:1px solid var(--border-on-light);padding:var(--space-28);display:flex;flex-direction:column;gap:var(--space-16)}
.role-card .desc{color:var(--text-on-light-secondary)}
.badge{display:inline-flex;padding:6px 10px;border:1px solid var(--border-strong);align-self:flex-start;margin-bottom:8px}
.badge--dark{border-color:var(--text-on-dark)}

/* Footer */
.footer{background:var(--bg-dark);color:var(--text-on-dark);padding:72px var(--layout-margin) var(--space-40);display:flex;flex-direction:column;gap:var(--space-56)}
.footer .top{display:flex;justify-content:space-between;gap:var(--space-40);flex-wrap:wrap}
.footer .brand{display:flex;flex-direction:column;gap:var(--space-16);max-width:320px}
.footer .brand p{color:var(--text-on-dark-secondary)}
.footer .columns{display:flex;gap:var(--space-80);flex-wrap:wrap}
.footer .col{display:flex;flex-direction:column;gap:14px;list-style:none}
.footer .col li:first-child{color:var(--text-on-dark-secondary);margin-bottom:4px}
.footer .col a{font-weight:500;text-transform:lowercase}
.footer .col a:hover{color:var(--text-accent)}
.footer .divider{height:1px;background:var(--border-on-dark)}
.footer .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--text-on-dark-secondary)}
.footer .bottom a{text-decoration:underline;text-underline-offset:3px}.footer .bottom a:hover{color:var(--text-on-dark)}

/* Docs pages */
.page-head{padding:var(--space-64) var(--layout-margin);border-bottom:1px solid var(--border-on-light);display:flex;flex-direction:column;gap:var(--space-12)}
.page-head .eyebrow{color:var(--text-accent)}
.page-head .sub{color:var(--text-on-light-secondary);max-width:640px}
.doc{padding:var(--space-64) var(--layout-margin);display:flex;flex-direction:column;gap:var(--space-64)}
.doc h2{margin-bottom:var(--space-16)}
.doc p.note{color:var(--text-on-light-secondary);max-width:640px;margin-bottom:var(--space-24)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-16)}
.swatch{border:1px solid var(--border-on-light)}
.swatch .chip{height:96px}
.swatch .meta{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.swatch .meta span:last-child{color:var(--text-on-light-secondary)}
table.tokens{width:100%;border-collapse:collapse}
table.tokens th,table.tokens td{text-align:left;padding:12px 0;border-bottom:1px solid var(--border-on-light);vertical-align:top}
table.tokens th{font-weight:500;color:var(--text-on-light-secondary);font-size:13px}
.type-row{display:grid;grid-template-columns:200px 1fr;gap:var(--space-24);padding:var(--space-24) 0;border-bottom:1px solid var(--border-on-light);align-items:baseline}
@media (max-width:760px){.type-row{grid-template-columns:1fr}}
.type-row .meta{color:var(--text-on-light-secondary)}
.spacing-row{display:flex;align-items:flex-end;gap:var(--space-16);flex-wrap:wrap}
.spacing-row .bar{background:var(--primitive-red)}
.spacing-row .cell{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.stage{background:var(--bg-dark);padding:var(--space-40);display:flex;gap:var(--space-16);flex-wrap:wrap;align-items:center}
.stage--light{background:var(--bg-subtle);border:1px solid var(--border-on-light)}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-24)}
.spec .item{border:1px solid var(--border-on-light);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-12)}
.spec .item .desc{color:var(--text-on-light-secondary)}
.ds-input{height:48px;padding:0 16px;border:1px solid var(--border-strong);border-radius:0;font:inherit;font-size:15px;background:var(--bg-light);min-width:240px}
.ds-toggle{width:44px;height:24px;background:var(--primitive-grey-400);position:relative;display:inline-block}
.ds-toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff}
.ds-toggle.on{background:var(--primitive-black)}.ds-toggle.on::after{left:22px}
.list{list-style:none;display:flex;flex-direction:column;gap:12px}
.list li{padding-left:20px;position:relative;color:var(--text-on-light-secondary)}
.list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--primitive-red)}

/* Nav dropdowns (Figma: Menu=foundations / components) */
.nav-links > li{position:relative}
.dropdown{display:none;position:absolute;top:100%;left:-20px;width:240px;background:var(--bg-light);border:1px solid var(--border-on-light);padding:16px 20px;list-style:none;flex-direction:column;z-index:20}
.dropdown a{display:block;padding:10px 0;border:0;font-weight:500;text-transform:lowercase;color:var(--text-on-light)}
.dropdown a:hover{color:var(--text-accent)}
@media (min-width:761px){
  .has-menu:hover > .dropdown,.has-menu:focus-within > .dropdown{display:flex}
  .has-menu:hover > a,.has-menu.open > a{color:var(--text-accent)}
  .has-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:4px}
}
.has-menu.open > .dropdown{display:flex}
@media (max-width:760px){
  .dropdown{position:static;width:auto;border:0;border-left:2px solid var(--border-on-light);padding:0 0 4px 16px;margin:0 0 8px}
  .dropdown a{padding:8px 0}
  .has-menu > .dropdown{display:flex}
}
/* Dark page header (Figma PageHeader, Display/L) */
.page-head--dark{background:var(--bg-dark);color:var(--text-on-dark);border-bottom:0;padding:var(--space-80) var(--layout-margin)}
.page-head--dark .eyebrow-row{display:flex;align-items:center;gap:10px;color:var(--text-on-dark-secondary)}
.page-head--dark .eyebrow-row .accent{width:24px;height:2px;background:var(--bg-accent)}
.page-head--dark .sub{color:var(--text-on-dark-secondary);max-width:720px}
.t-display-l{font-weight:700;font-size:clamp(56px,7vw,96px);line-height:1;letter-spacing:-.03em;text-transform:lowercase}
/* Button states from Figma */
.btn:hover{background:#e5e5e5}.btn:active{background:#a3a3a3}
.btn--tertiary:hover{background:#c4c4c4}.btn--tertiary:active{background:#d9d9d9}
.btn--ghost:hover{background:#171717}.btn--ghost:active{background:#404040}
.btn[disabled],.btn[disabled]:hover{background:#404040;color:#a3a3a3;opacity:1}
.btn.is-focus{outline:2px solid var(--primitive-red);outline-offset:2px}
.btn.is-hover{background:#e5e5e5}.btn--tertiary.is-hover{background:#c4c4c4}.btn--ghost.is-hover{background:#171717}
.btn.is-pressed{background:#a3a3a3}.btn--tertiary.is-pressed{background:#d9d9d9}.btn--ghost.is-pressed{background:#404040}
.matrix{border:1px solid var(--border-on-light);overflow-x:auto}
.matrix table{border-collapse:collapse;width:100%;min-width:760px}
.matrix th{text-align:left;padding:14px 24px;color:var(--text-on-light-secondary);border-bottom:1px solid var(--border-on-light)}
.matrix td{padding:20px 24px;background:var(--bg-dark);border-bottom:1px solid var(--border-on-dark)}
.matrix td:first-child{color:var(--text-on-dark);background:var(--bg-dark)}
.demo-card{border:1px solid var(--border-on-light)}
.demo-card .demo{background:var(--bg-dark);height:128px;display:flex;align-items:center;justify-content:center}
.demo-card .demo--light{background:var(--bg-subtle)}
.demo-card .body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px}
.demo-card .body .desc{color:var(--text-on-light-secondary)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-24)}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-4{grid-template-columns:1fr}}
.ds-textarea{min-height:120px;padding:12px 16px;border:1px solid var(--border-strong);font:inherit;font-size:15px;min-width:280px;resize:vertical;border-radius:0}
.ds-check{display:inline-flex;align-items:center;gap:10px;font-weight:500;text-transform:lowercase}
.ds-check .box{width:20px;height:20px;border:1px solid var(--border-strong);display:inline-block;position:relative;background:#fff}
.ds-check .box.on{background:#000}.ds-check .box.on::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ds-check .radio{border-radius:50%}.ds-check .radio.on::after{border:0;width:8px;height:8px;background:#fff;left:5px;top:5px;transform:none;border-radius:50%}
.ds-select{height:48px;padding:0 44px 0 16px;border:1px solid var(--border-strong);font:inherit;font-size:15px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center;-webkit-appearance:none;appearance:none;border-radius:0;min-width:240px}
.ds-search{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px;border:1px solid var(--border-strong);background:#fff;min-width:280px}
.ds-search input{border:0;outline:0;font:inherit;font-size:15px;flex:1;background:transparent}
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--border-strong);font-weight:500;font-size:13px;text-transform:lowercase;background:#fff}
.chip.on{background:#000;color:#fff}
.chip .x{font-size:14px;line-height:1}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-16)}
.icon-cell{border:1px solid var(--border-on-light);padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-on-light-secondary)}
.icon-cell svg{width:24px;height:24px;stroke:#000;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contrast{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-16)}
.contrast .pair{padding:20px;border:1px solid var(--border-on-light);display:flex;flex-direction:column;gap:6px}
.subnav{display:flex;gap:24px;flex-wrap:wrap;padding:16px var(--layout-margin);border-bottom:1px solid var(--border-on-light)}
.subnav a{font-weight:500;text-transform:lowercase;color:var(--text-on-light-secondary)}
.subnav a[aria-current=page]{color:var(--text-accent)}
.subnav a:hover{color:var(--text-on-light)}
/* swatch chip must not inherit the Chip component styles */
.swatch .chip{display:block;height:96px;width:auto;padding:0;border:0;font-size:inherit}