/* ============================================================================
   base.css — Reset, Typografie-Primitive, Raster, Reveal-Zustände, Utilities
   Liest ausschliesslich Tokens aus tokens.css.
   ========================================================================== */

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:where(h1,h2,h3,h4,p){overflow-wrap:break-word}

html,body{height:auto}
/* Auf der horizontalen Buehne erzeugt der Platzhalter die Dokumenthoehe.
   Seitliches Ueberlaufen darf es dabei nie geben. */
html.is-horizontal,html.is-horizontal body{overflow-x:hidden}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ff-body);
  font-weight:var(--fw-body);
  font-size:var(--fs-b1);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  transition:background-color var(--t-m) var(--e-in-out), color var(--t-m) var(--e-in-out);
}
body.is-locked{overflow:hidden}

::selection{background:var(--c-ink);color:var(--c-paper)}
[data-theme="noir"] ::selection{background:var(--c-chalk);color:var(--c-noir)}

:focus-visible{
  outline:var(--rule) solid var(--accent);
  outline-offset:3px;
}

/* Scrollbar dezent halten, ohne sie zu verstecken */
@supports (scrollbar-width: thin){
  html{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
}

/* ---------- Typografie-Primitive ----------------------------------------- */
.fe-display{
  font-family:var(--ff-display);
  font-weight:var(--fw-display);
  text-transform:uppercase;
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  font-feature-settings:"kern" 1;
}
.fe-caps{
  font-family:var(--ff-caps);
  font-weight:var(--fw-caps);
  text-transform:uppercase;
  letter-spacing:var(--tracking-caps);
  line-height:var(--leading-caps);
  font-size:var(--fs-cap);
}
.fe-mono{font-family:var(--ff-mono);font-size:var(--fs-cap-s);letter-spacing:.06em}

.t-d0{font-size:var(--fs-d0)}  .t-d1{font-size:var(--fs-d1)}
.t-d2{font-size:var(--fs-d2)}  .t-d3{font-size:var(--fs-d3)}
.t-d4{font-size:var(--fs-d4)}
.t-lead{font-size:var(--fs-lead);line-height:1.45;color:var(--fg-body);max-width:var(--maxw-lead)}
.t-body{font-size:var(--fs-b1);color:var(--fg-body);max-width:var(--maxw-text)}
.t-small{font-size:var(--fs-b2);color:var(--fg-muted);max-width:var(--maxw-text)}
.t-muted{color:var(--fg-muted)}
.t-accent{color:var(--accent)}
.t-balance{text-wrap:balance}

/* ---------- Layout ------------------------------------------------------- */
.fe-shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.fe-section{position:relative;padding-block:var(--section-y);background:var(--bg);color:var(--fg)}
.fe-section--tall{padding-block:var(--section-y-l)}
.fe-section--flush{padding-block:0}

.fe-grid{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  gap:var(--gutter);
}
@media (max-width:900px){ .fe-grid{--grid-cols:6} }
@media (max-width:560px){ .fe-grid{--grid-cols:2} }

/* Spalten-Utilities: .col-1 … .col-12 / .start-1 … .start-12 */
.col-1{grid-column:span 1}  .col-2{grid-column:span 2}  .col-3{grid-column:span 3}
.col-4{grid-column:span 4}  .col-5{grid-column:span 5}  .col-6{grid-column:span 6}
.col-7{grid-column:span 7}  .col-8{grid-column:span 8}  .col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
.start-2{grid-column-start:2} .start-3{grid-column-start:3} .start-4{grid-column-start:4}
.start-5{grid-column-start:5} .start-6{grid-column-start:6} .start-7{grid-column-start:7}
.start-8{grid-column-start:8}
@media (max-width:900px){
  [class*="col-"]{grid-column:span 6}
  [class*="start-"]{grid-column-start:auto}
  .m-col-3{grid-column:span 3} .m-col-2{grid-column:span 2}
}
@media (max-width:560px){
  [class*="col-"]{grid-column:span 2}
  .s-col-1{grid-column:span 1}
}

.fe-stack{display:flex;flex-direction:column}
.fe-stack>*+*{margin-top:var(--stack,var(--s-5))}
.fe-row{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.fe-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}

/* ---------- Linien & Marken ---------------------------------------------- */
.fe-hair{height:var(--hair);width:100%;background:var(--line);border:0}
.fe-rule{height:var(--rule);width:4rem;background:currentColor}
.fe-tricolor{display:flex;height:var(--rule);width:7.5rem}
.fe-tricolor span{flex:1}
.fe-tricolor span:nth-child(1){background:var(--brand-hp-blue)}
.fe-tricolor span:nth-child(2){background:var(--brand-hp-white);outline:var(--hair) solid var(--line)}
.fe-tricolor span:nth-child(3){background:var(--brand-hp-red)}

/* ============================================================================
   REVEAL-SYSTEM  —  bidirektional (rein beim Runter-, raus beim Hochscrollen)
   Markup:  <div data-fe-reveal="up">…</div>
            <div data-fe-reveal="mask" data-fe-delay="2">…</div>
   Zustand: .is-in wird von motion.js gesetzt/entfernt.
   ========================================================================== */
[data-fe-reveal]{
  --d: calc(var(--stagger) * var(--fe-i, 0));
  will-change:transform,opacity,clip-path;
}
@media (prefers-reduced-motion: no-preference){
  [data-fe-reveal]{
    transition:
      opacity   var(--t-l) var(--e-out) var(--d),
      transform var(--t-l) var(--e-out) var(--d),
      clip-path var(--t-xl) var(--e-out) var(--d),
      filter    var(--t-l) var(--e-out) var(--d);
  }
}
/* Ausgangszustände */
[data-fe-reveal="up"]     {opacity:0;transform:translate3d(0,var(--reveal-dist),0)}
[data-fe-reveal="down"]   {opacity:0;transform:translate3d(0,calc(var(--reveal-dist) * -1),0)}
[data-fe-reveal="left"]   {opacity:0;transform:translate3d(calc(var(--reveal-dist) * -1),0,0)}
[data-fe-reveal="right"]  {opacity:0;transform:translate3d(var(--reveal-dist),0,0)}
[data-fe-reveal="fade"]   {opacity:0}
[data-fe-reveal="scale"]  {opacity:0;transform:scale(.94)}
[data-fe-reveal="mask"]   {clip-path:inset(0 0 100% 0)}
[data-fe-reveal="mask-x"] {clip-path:inset(0 100% 0 0)}
[data-fe-reveal="wipe"]   {clip-path:inset(0 0 0 0);opacity:0;transform:translate3d(0,2rem,0)}
[data-fe-reveal="line"]   {transform:scaleX(0);transform-origin:left center}
[data-fe-reveal="line-y"] {transform:scaleY(0);transform-origin:top center}
[data-fe-reveal="blur"]   {opacity:0;filter:blur(14px);transform:translate3d(0,1.5rem,0)}

/* Zielzustand */
[data-fe-reveal].is-in{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 0 0 0);
}
[data-fe-reveal="line"].is-in,[data-fe-reveal="line-y"].is-in{transform:scale(1)}

/* Bekommt etwas in einem noch nicht eingeblendeten Block den Tastaturfokus,
   muss der Block sofort sichtbar sein. Die Buehne faehrt zwar nach, braucht
   dafuer aber mehrere hundert Millisekunden — solange bediente man sonst ein
   unsichtbares Element. */
[data-fe-reveal]:focus-within{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}

/* Einmalig statt bidirektional */
[data-fe-once].is-done{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}

/* ---------- Split-Text (von motion.js erzeugt) --------------------------- */
.fe-split{display:block}
/* Padding schafft Platz fuer Diakritika (Ä Ö Ü Ł Ą Ę Ś Ż Ź Ć Ń Ș Ț),
   der negative Rand nimmt den optischen Zuwachs wieder heraus. */
.fe-split__line{display:block;overflow:hidden;padding:.16em 0 .06em;margin:-.14em 0 -.05em}
.fe-split__inner{
  display:block;
  transform:translate3d(0,110%,0) rotate(2deg);
  transition:transform var(--t-xl) var(--e-out) calc(var(--stagger) * var(--fe-l,0));
  will-change:transform;
}
.is-in .fe-split__inner{transform:translate3d(0,0,0) rotate(0)}
.fe-split__word{display:inline-block;overflow:hidden;vertical-align:top}
.fe-split__char{
  display:inline-block;
  transform:translate3d(0,105%,0);
  transition:transform var(--t-l) var(--e-out) calc(18ms * var(--fe-c,0));
}
.is-in .fe-split__char{transform:none}

/* ---------- Scrub-Variablen ---------------------------------------------- */
/* motion.js schreibt --p (0…1) und --pc (-1…1, zentriert) auf [data-fe-scrub] */
[data-fe-scrub]{--p:0;--pc:0}

/* ---------- Utilities ---------------------------------------------------- */
.u-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-skip{
  position:fixed;top:0;left:0;z-index:var(--z-loader);
  transform:translateY(-120%);
  background:var(--c-ink);color:var(--c-paper);
  padding:var(--s-3) var(--s-5);font-family:var(--ff-caps);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--fs-cap);
  transition:transform var(--t-s) var(--e-out);
}
.u-skip:focus{transform:translateY(0)}
/* Sprungziele bekommen tabindex="-1", damit der Fokus dort landen kann —
   der Fokusrahmen waere an einem ganzen Panel aber sinnlos. */
.panel[tabindex="-1"]:focus{outline:none}
.u-hide{display:none!important}
.u-noselect{user-select:none}
@media (max-width:900px){ .u-hide\@m{display:none!important} }
@media (min-width:901px){ .u-hide\@d{display:none!important} }

/* ---------- Filmkorn über der gesamten Seite ----------------------------- */
.fe-grain{
  position:fixed;inset:-50%;z-index:var(--z-overlay);
  pointer-events:none;opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  animation:fe-grain-shift 900ms steps(3) infinite;
}
[data-theme="noir"] .fe-grain,body.is-noir .fe-grain{mix-blend-mode:screen;opacity:calc(var(--grain-opacity) * .8)}
@keyframes fe-grain-shift{
  0%{transform:translate3d(0,0,0)} 33%{transform:translate3d(-2%,1%,0)} 66%{transform:translate3d(1%,-2%,0)} 100%{transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion: reduce){ .fe-grain{animation:none} }