/* =============================================================================
   base.css — V2 Reset, Basis-Elemente, Layout-Primitives, A11y-Floor.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-body); font-size:var(--fs-body); font-weight:400;
  line-height:var(--lh-body); color:var(--ink-body); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh;
}
img,picture,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

/* ---- Display-Typo (condensed uppercase — die V2-Stimme) ---- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:var(--lh-snug);
  text-transform:uppercase;letter-spacing:var(--tr-display);text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
h4{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h4);line-height:var(--lh-snug)}
p{text-wrap:pretty}
strong,b{font-weight:600}

/* Prosa */
.prose{max-width:var(--container-text)}
.prose p+p{margin-top:var(--s4)}
.prose a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--signal-700)}

/* ---- Layout-Primitives ---- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.container--text{max-width:var(--container-text)}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.5rem,1.5rem+2vw,4rem)}
.section--dark{background:var(--ink);color:var(--chalk)}
.section--void{background:var(--void);color:var(--chalk)}
.section--paper2{background:var(--paper-2)}

.grid{display:grid;gap:var(--gutter)}
.grid>*{min-width:0}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

.stack>*+*{margin-top:var(--s4)}
.stack-lg>*+*{margin-top:var(--s6)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}

/* ---- A11y-Floor ---- */
.skip-link{position:absolute;left:var(--s3);top:-60px;z-index:var(--z-toast);
  background:var(--signal);color:#fff;padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  font-weight:600;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:var(--s3)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
:focus:not(:focus-visible){outline:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- Utilities ---- */
.text-center{text-align:center}
.dim{color:var(--ink-dim)}
.dim-on-dark{color:var(--chalk-dim)}
.nowrap{white-space:nowrap}
.hide-desktop{display:none}
@media(max-width:860px){.hide-mobile{display:none!important}.hide-desktop{display:revert}}

/* Kinetisches Label (uppercase, gesperrt) — V2-Pendant zum V1-Eyebrow */
.kicker{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-body);
  font-weight:600;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--signal)}
.kicker--flare{color:var(--flare)}
.kicker--chalk{color:var(--chalk-dim)}
.kicker::before{content:"";width:1.5rem;height:3px;background:currentColor;flex:none;
  transform:skewX(-20deg)}   /* kinetischer Schräg-Tick */