/* Every page: fonts, tokens, type, brand components, buttons, header, menu, footer. Home-only parts live in
   home.css, subpage layout in sub.css. Fonts are self-hosted (no request to Google): Space Mono and JetBrains
   Mono, SIL Open Font License 1.1, see /fonts/OFL-*.txt and scripts/fonts.md. */
@font-face{font-family:"Space Mono";src:url("/static/SpaceMono-400.2403277a38.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/static/SpaceMono-700.fe4b980816.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/static/JetBrainsMono-var.cfae1184cd.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --ink:#0f1411; --ink-t:rgba(15,20,17,0); --deep:#13311f;
  --grey:#e3e6e1; --paper:#fbfbf8; --white:#ffffff; --mid:#667066;
  --neon:#c8ff4a; --moss:#2d6a3e; --crimson:#b0264b;
  --display:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --tone-fg:var(--paper); --tone-chip:var(--paper); --tone-chip-fg:var(--ink); --tone-line:var(--paper);
  --glass:rgba(15,20,17,.62); --glass-line:rgba(251,251,248,.16);
  --gutter:16px; --maxw:1680px;
}
@media (min-width:1024px){:root{--gutter:32px}}
@media (min-width:2200px){:root{--gutter:48px;--maxw:2040px}}
html[data-tone="light"]{ --tone-fg:var(--ink); --tone-chip:var(--moss); --tone-chip-fg:var(--white); --tone-line:var(--ink); --glass:rgba(251,251,248,.72); --glass-line:rgba(255,255,255,.75); }
html[data-tone="light"] header .button-primary{--tone-chip:var(--ink);--tone-chip-fg:var(--paper)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--paper);background:var(--ink);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
@media (min-width:1600px){body{font-size:14px;line-height:1.55}}
@media (min-width:2200px){body{font-size:15px}}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
ul,ol{list-style:none}
/* Focus: neon on dark, ink on light surfaces (neon on white is invisible). Light components set --focus. */
:focus-visible{outline:2px solid var(--focus,var(--neon));outline-offset:3px}
/* Sections that receive focus after an in-page jump do not draw a ring around the whole section. */
[tabindex="-1"]:focus{outline:none}
html[data-tone="light"] header{--focus:var(--ink)}
img,svg,canvas{display:block}
button,input,select,textarea{font:inherit;color:inherit;background:transparent;border-radius:0}
::placeholder{color:currentColor;opacity:.5}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:10001;padding:12px 16px;background:var(--neon);color:var(--ink);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.skip-link:focus{top:16px;outline:2px solid var(--ink);outline-offset:2px;transition:top .15s}
mark.ph{background:transparent;color:inherit;outline:1px dashed currentColor;outline-offset:2px;padding:0 2px}

/* ---------- type ---------- */
.is-h1{font-family:var(--display);font-size:clamp(1.75rem,3.4vw,3rem);line-height:1;font-weight:700;letter-spacing:-.01em;text-transform:uppercase}
.is-h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.1;font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.is-h3{font-family:var(--display);font-size:1.5rem;line-height:1.1;font-weight:700;text-transform:uppercase}
.is-h4{font-family:var(--display);font-size:1.125rem;line-height:1.2;font-weight:700;text-transform:uppercase}
.is-h6{font-family:var(--display);font-size:1.125rem;line-height:1.25;font-weight:700;text-transform:uppercase}
@media (min-width:1280px){.is-h6{font-size:1.25rem}}
@media (min-width:1920px){.is-h1{font-size:clamp(3rem,2.5vw,4.5rem)}.is-h2{font-size:clamp(2.25rem,1.9vw,3rem)}}
/* Small phones: Space Mono caps are wide; keep two-line headlines inside a 288 px column. */
@media (max-width:400px){.is-h1{font-size:clamp(1.375rem,7.4vw,1.75rem)}}
.text-pretty{text-wrap:pretty}
.text-balance{text-wrap:balance}

/* ---------- supertitle chip, headline with thread, list squares ---------- */
.supertitle{display:flex;flex-direction:row;align-items:stretch;gap:4px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.supertitle .chip{display:flex;align-items:center;padding:2px 12px;min-height:28px;background:var(--tone-chip);color:var(--tone-chip-fg);white-space:nowrap}
.supertitle .b2,.supertitle .b1{display:block;min-height:28px;background:var(--tone-chip);flex-shrink:0}
.supertitle .b2{width:8px}.supertitle .b1{width:4px}
.supertitle .num{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:2px solid var(--tone-chip);color:var(--tone-chip);margin-right:-2px;font-size:11px;flex-shrink:0}
.supertitle .num svg{width:14px;height:14px}
@media (max-width:400px){.supertitle .chip{white-space:normal;padding:4px 10px}}
.tone-paper{--tone-chip:var(--paper);--tone-chip-fg:var(--ink);--tone-line:var(--paper)}
.tone-moss{--tone-chip:var(--moss);--tone-chip-fg:var(--white);--tone-line:var(--ink)}
.tone-neon{--tone-chip:var(--neon);--tone-chip-fg:var(--ink);--tone-line:var(--neon)}
.dash{display:block;height:6px;width:120px;flex-shrink:0;background:linear-gradient(to left,var(--tone-line),transparent)}
.dash--paper{--tone-line:var(--paper)}
.dash--ink{--tone-line:var(--ink)}
@media (max-width:640px){.dash{height:4px;width:44px}.hl .row{gap:10px}}
.hl{display:flex;flex-direction:column;width:100%}
.hl .row{display:flex;align-items:center;gap:16px;width:100%}
.hl .row>span{flex-shrink:1;min-width:0}
.blinkbox{width:12px;height:12px;border:1.5px solid var(--tone-fg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.blinkbox i{display:block;width:8px;height:8px;background:var(--tone-fg);animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
/* Static neon square: the list point of the brand (no frame, so it never reads as a checkbox). */
.sq{display:block;width:8px;height:8px;background:var(--neon);flex-shrink:0}

/* ---------- buttons ---------- */
.button{position:relative;display:flex;width:fit-content;align-items:center;gap:16px;min-height:44px;padding:12px 24px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--tone-fg);transition:scale .15s;cursor:pointer;white-space:nowrap}
.button .l1,.button .l2{position:absolute;background:var(--tone-fg);transition:width .3s ease,height .3s ease}
.button>.l1,.button>.l2{width:10px;height:1px;transform:rotate(-45deg)}
.button>.l1{top:0;left:-3px;transform-origin:top right}
.button>.l2{bottom:0;right:-3px;transform-origin:bottom left}
.button .lines1>.l1,.button .lines1>.l2{width:calc(100% - 8px);height:1px}
.button .lines1>.l1{top:0;left:7px}
.button .lines1>.l2{bottom:0;right:7px}
.button .lines2{display:flex;justify-content:center}
.button .lines2>.l1,.button .lines2>.l2{width:1px;height:calc(100% - 7px)}
.button .lines2>.l1{bottom:0;left:0}
.button .lines2>.l2{top:0;right:0}
@media (hover:hover){.button:hover .lines1>.l1,.button:hover .lines1>.l2{width:calc(100% - 32px)}}
.button:active{scale:.95}
.button .btn-text{display:block}
.button.fixed-paper{--tone-fg:var(--paper)}
.button.fixed-ink{--tone-fg:var(--ink)}
@media (max-width:400px){.button{white-space:normal;padding:12px 18px}}
.button-primary{display:inline-flex;align-items:center;height:44px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:color .3s;width:fit-content}
.button-primary svg{height:44px;width:9px;fill:var(--tone-chip);transition:fill .3s;flex-shrink:0}
.button-primary .btn-text{display:flex;align-items:center;height:100%;padding:0 16px;margin:0 -1px;background:var(--tone-chip);color:var(--tone-chip-fg);transition:background .3s,color .3s}
.button-primary .t-short{display:none}
.hero-primary{--tone-chip:var(--neon);--tone-chip-fg:var(--ink)}
.ink-primary{--tone-chip:var(--ink);--tone-chip-fg:var(--paper)}
.nav-link{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.nav-link .btn-text{display:block}

/* ---------- header: one glass bar, so nav text never sits on the 3D scene or on content ---------- */
header{position:fixed;top:0;left:0;z-index:50;width:100%;padding:16px 0;color:var(--tone-fg);transition:color .3s,padding .3s}
header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);border-bottom:1px solid var(--glass-line);transition:background .4s,border-color .4s}
header.scrolled{padding:10px 0}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gutter);max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto}
header .logo{display:flex;align-items:center;min-height:44px}
header .logo svg{height:24px;width:auto}
header .right{display:flex;align-items:center;gap:12px}
header .menu{display:none;align-items:center;gap:12px}
header .menu .nav-link{padding:12px 0}
@media (min-width:1024px){header .menu{display:flex}}
header .menu .sep{opacity:.6;font-family:var(--mono);font-size:12px}
.lang-switch{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:12px;letter-spacing:.06em;border:1px solid currentColor;opacity:.85}
.lang-switch:hover{opacity:1}
header .lang-switch{display:none}
@media (min-width:1024px){header .lang-switch{display:flex;margin-left:8px}}
/* The hero has the one primary button, so the header button is an outline bracket. */
.hdr-cta{margin-left:8px}
.hdr-cta .btn-text{background:transparent;color:var(--tone-fg);box-shadow:inset 0 1px 0 var(--tone-fg),inset 0 -1px 0 var(--tone-fg)}
.hdr-cta svg{fill:var(--tone-fg)}
@media (hover:hover){.hdr-cta:hover .btn-text{background:var(--tone-fg);color:var(--ink)}html[data-tone="light"] .hdr-cta:hover .btn-text{color:var(--paper)}}
.menu-btn{display:flex;align-items:center;height:44px;padding:0 12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--tone-fg);border:1px solid currentColor;cursor:pointer}
/* The menu button stays on every width: its panel holds Impressum and Datenschutz, so both are two clicks away
   from anywhere on the long home page (§ 5 DDG, Art. 12 DSGVO). */
@media (max-width:480px){.hdr-cta .t-long{display:none}.hdr-cta .t-short{display:inline}.hdr-cta .btn-text{padding:0 10px}header .right{gap:8px}}

/* ---------- mobile menu: a modal <dialog> sliding in from the right ---------- */
dialog.mpanel{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:var(--ink);color:var(--paper);padding:20px 24px 28px;transform:translateX(100%);transition:transform .32s var(--ease);flex-direction:column;justify-content:space-between;gap:24px;overflow-y:auto}
dialog.mpanel[open]{display:flex}
dialog.mpanel.open{transform:none}
dialog.mpanel::backdrop{background:rgba(15,20,17,.6)}
html:has(dialog.mpanel[open]){overflow:hidden}
.mpanel .mtop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mpanel .mclose{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--paper);height:44px;padding:0 14px;cursor:pointer;color:var(--paper);margin-left:auto}
.mpanel .mlinks{display:flex;flex-direction:column;gap:6px}
.mpanel .mlinks a{font-family:var(--display);font-size:clamp(1.5rem,7vw,2.25rem);font-weight:700;text-transform:uppercase;line-height:1.1;display:flex;align-items:center;gap:14px;min-height:48px}
.mpanel .mlinks a i{display:block;width:28px;height:4px;background:linear-gradient(to left,var(--neon),transparent);flex-shrink:0}
.mpanel .mfoot{font-size:12px;color:rgba(251,251,248,.72);display:flex;flex-direction:column;gap:8px}
.mpanel .mfoot a{text-decoration:underline;text-underline-offset:3px}
@media (max-height:500px) and (orientation:landscape){
  dialog.mpanel{padding:12px 24px 16px;justify-content:flex-start}
  .mpanel .mlinks{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
  .mpanel .mlinks a{font-size:min(6vw,7vh,1.75rem);min-height:44px}
}

/* ---------- footer ---------- */
.bottom{display:flex;flex-direction:column;align-items:center;position:relative;z-index:20;padding:0 var(--gutter) var(--gutter);background:linear-gradient(180deg,var(--grey) 0%,#edf0ea 45%,#e8efe2 100%);color:var(--ink)}
.big-logo{font-family:var(--display);font-size:20vw;line-height:.75;margin:-.05em 0 -4vw;font-weight:700;text-transform:uppercase;white-space:nowrap;letter-spacing:-.02em;padding-top:24px}
@media (min-width:1280px){.big-logo{font-size:min(22vw,24rem)}}
.big-logo .c{display:inline-block;width:.62em;text-align:center}
footer{width:100%;max-width:var(--maxw);position:relative;z-index:20;color:var(--ink);--focus:var(--ink)}
footer .box{display:flex;flex-direction:column;gap:32px;background:var(--white);position:relative;padding:32px 24px 0;margin-top:24px;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px))}
.big-logo+footer .box{margin-top:0}
@media (min-width:640px){footer .box{padding:40px 32px 0}}
@media (min-width:1024px){footer .box{padding:48px 64px 0}}
footer .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:640px){footer .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}footer .col3{grid-column:1/-1}}
@media (min-width:1024px){footer .cols{grid-template-columns:minmax(220px,1.2fr) minmax(170px,.7fr) minmax(280px,1.1fr);gap:48px}footer .col3{grid-column:auto}}
@media (min-width:1280px){footer .cols{gap:96px}}
footer .col1{display:flex;flex-direction:column;gap:24px}
footer .flogo-link{display:inline-flex;min-height:44px;align-items:center;align-self:flex-start}
footer .flogo{height:28px;width:auto}
footer .col1 p{font-size:13px;max-width:420px}
footer .col2,footer .col3{display:flex;flex-direction:column;gap:20px}
footer .col2 .links{display:flex;flex-direction:column;gap:0}
footer .col2 .links a{display:flex;align-items:center;min-height:40px;width:fit-content}
footer .form-note{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--mid);letter-spacing:.02em}
footer .form-note .sq{background:var(--moss)}
footer .mail-line{font-size:12.5px;color:var(--mid)}
footer .mail-line a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
footer .legal{display:flex;flex-direction:column;gap:12px;padding:28px 0 32px;border-top:1px dashed var(--ink);font-size:12px}
@media (min-width:640px){footer .legal{padding:40px 0 48px}}
@media (min-width:1024px){footer .legal{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}}
footer .legal .mid{display:flex;gap:16px;align-items:center}
footer .legal .mid a,footer .legal .mail{display:flex;align-items:center;min-height:40px}
footer .legal .vsep{height:12px;width:1px;background:var(--ink)}
footer .legal .mail{width:fit-content}

/* ---------- scroll reveals: only when JavaScript runs, and never hiding focused content ---------- */
.js [data-fade]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-fade].in{opacity:1;transform:none}
.js [data-fade]:focus-within{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js [data-fade]{opacity:1;transform:none}}