/* ═══════════════════════════════════════════════════════════════
   ZERLEGT — Konstruktionsstudie
   Hellwig Digital Solutions

   Baut auf dem kinetic-showcase-System auf: die Gates (fx / pin /
   smooth), die Reveal-Grammatik und die gepinnten Bühnen sind
   unverändert übernommen. Neu sind Palette, Typografie und die
   Sektionen — hier ohne ein einziges Foto, nur Typo, Vektor und 3D.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Token ─────────────────────────────────────────────── */
:root {
  --bg:       #08090b;
  --bg-2:     #0d0f13;
  --bg-3:     #14171d;
  --linie:    rgba(230,236,245,0.12);
  --linie-2:  rgba(230,236,245,0.22);

  --text:     #eef2f8;
  --text-mid: #9aa3b2;
  --text-low: #626b7a;

  --akzent:      #9ec5ff;
  --akzent-tief: #5b86c4;

  --sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Tight", "Inter", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 0.7s;
  --dur-2: 1.1s;
  --dur-3: 1.7s;

  --gut: clamp(1.25rem, 5vw, 5rem);
  --max: 92rem;
}

/* ── 2 · Grundlagen ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, blockquote, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 6.6vw, 6rem);
}
.display .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.display .line > span { display: block; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* Technisches Raster als Grundflächen-Textur, rein dekorativ */
.raster {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--linie) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linie) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity: 0.5;
}
.raster--fein { background-size: 42px 42px; opacity: 0.28; }
.schein {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 34%, rgba(158,197,255,0.14), transparent 70%);
}

/* ── 3 · Bewegung (Gates unverändert aus dem Bausatz) ──────── */
.scroll-root { width: 100%; }
html.smooth .scroll-content { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }

html.pin .sec[data-pin] { position: relative; }
html.pin .sec[data-pin] > .pin {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100vh; overflow: hidden; will-change: transform;
}

[data-parallax] > img { transform: translate3d(0, var(--py, 0px), 0) scale(var(--pz, 1)); }
html.fx [data-parallax] { overflow: hidden; }

.preloader { display: none; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js [data-reveal="rise"]  { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
  html.js [data-reveal="plain"] { opacity: 0; }
  html.js [data-reveal="mask"]  { clip-path: inset(0 0 100% 0); }
  /* Deckung nur an beobachtete Zeilen — der Hero-Auftakt animiert
     allein die Verschiebung und bliebe sonst für immer unsichtbar. */
  html.js .display .line > span { transform: translate3d(0, 108%, 0); }
  html.js [data-reveal="line"] > span { transform: translate3d(0, 108%, 0); opacity: 0; }

  html.js [data-reveal] {
    transition: opacity var(--dur-2) var(--ease) var(--rd, 0ms),
                transform var(--dur-2) var(--ease) var(--rd, 0ms),
                filter var(--dur-2) var(--ease) var(--rd, 0ms),
                clip-path var(--dur-3) var(--ease) var(--rd, 0ms);
  }
  html.js [data-reveal="line"] > span {
    transition: transform var(--dur-2) var(--ease) var(--rd, 0ms),
                opacity var(--dur-1) var(--ease) var(--rd, 0ms);
  }
  html.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }
  html.js [data-reveal="line"].is-in > span { transform: none; opacity: 1; }

  html.js .lead-in { opacity: 0; transform: translate3d(0, 22px, 0); animation: leadIn var(--dur-2) var(--ease) var(--d, 0s) both; }
  html.js .hero__title .line.lead-in { transform: none; opacity: 1; animation: none; }
  html.js .hero__title .line.lead-in > span { transform: translate3d(0, 108%, 0); animation: leadUp var(--dur-3) var(--ease) var(--d, 0s) both; }
  @keyframes leadIn { to { opacity: 1; transform: none; } }
  @keyframes leadUp { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }

  html.js.is-first .preloader {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
    background: var(--bg); animation: plOut 0.9s var(--ease) 2s both;
  }
  .preloader__inner { display: grid; justify-items: center; gap: 1.2rem; }
  .preloader__mark { width: 3rem; height: 3rem; }
  .pl-line {
    stroke: var(--akzent); stroke-width: 2; fill: none;
    stroke-dasharray: 120; stroke-dashoffset: 120;
    animation: plDraw 1.1s var(--ease-io) both;
  }
  .pl-line:nth-child(2) { animation-delay: 0.18s; }
  .pl-line:nth-child(3) { animation-delay: 0.3s; }
  .preloader__word {
    font-family: var(--display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(1rem, 3vw, 1.5rem); letter-spacing: 0.5em; color: var(--text);
    clip-path: inset(0 100% 0 0); animation: plWipe 1s var(--ease) 0.5s both;
  }
  .preloader__bar { display: block; width: 6rem; height: 1px; background: var(--linie); }
  .preloader__bar > i { display: block; height: 100%; background: var(--akzent); transform: scaleX(0); transform-origin: left; animation: plBar 1.6s var(--ease-io) 0.3s both; }
  @keyframes plDraw { to { stroke-dashoffset: 0; } }
  @keyframes plWipe { to { clip-path: inset(0 0 0 0); } }
  @keyframes plBar  { to { transform: scaleX(1); } }
  @keyframes plOut  { to { opacity: 0; visibility: hidden; } }
}

/* ── 4 · Rahmen ────────────────────────────────────────────── */
.draftbar {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem var(--gut);
  background: var(--bg-3); color: var(--text-mid);
  border-bottom: 1px solid var(--linie);
  font-size: 0.7rem; line-height: 1.35;
}
.draftbar strong { color: var(--text); font-weight: 500; }
.draftbar__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); }

.head {
  position: fixed; top: var(--bar, 2.4rem); left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem var(--gut); color: var(--text);
  transition: transform 0.55s var(--ease);
}
.head.is-hidden { transform: translateY(-160%); }
.head__brand { display: flex; align-items: center; gap: 0.6rem; }
.head__mark { width: 1.15rem; height: 1.15rem; }
.head__mark path { stroke: var(--akzent); stroke-width: 3; fill: none; }
.head__word { font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; font-size: 1rem; }
.head__nav { display: none; gap: 2rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); }
.head__nav a { transition: color var(--dur-1) var(--ease); }
.head__nav a:hover { color: var(--text); }
.head__burger { display: grid; gap: 5px; align-content: center; width: 2.4rem; height: 2.4rem; padding: 0.55rem; background: none; border: 0; cursor: pointer; }
.head__burger span { display: block; height: 1px; background: currentColor; transition: transform var(--dur-1) var(--ease); }
.head__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.head__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 105;
  display: grid; align-content: center; gap: 0.5rem; padding: var(--gut);
  background: var(--bg-2);
  font-family: var(--display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(2rem, 11vw, 3.2rem);
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-1) var(--ease), visibility var(--dur-1);
}
.mnav.is-open { visibility: visible; opacity: 1; }

/* ── 5 · Sektionen ─────────────────────────────────────────── */
.sec { position: relative; }
.sec--full { min-height: 100vh; display: grid; }

/* 5.1 Auftakt */
.hero { grid-template-rows: 1fr auto; align-items: end; overflow: hidden; }
.hero__inner { position: relative; padding-block: 9rem 2rem; align-self: end; }
.hero__title { margin-block: 1rem 1.6rem; max-width: 14em; }
.hero__sub { max-width: 46ch; color: var(--text-mid); }
.hero__daten { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem); margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
.hero__daten div { display: grid; gap: 0.2rem; }
.hero__daten b { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; }
.hero__daten span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); }
.hero__foot {
  position: relative; display: flex; justify-content: space-between; align-items: end; gap: 1rem;
  padding-bottom: 2rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low);
}
.hero__scrollhint { display: grid; justify-items: start; gap: 0.6rem; }
.hero__scrollhint > i { display: block; width: 1px; height: 3rem; background: linear-gradient(var(--akzent), transparent); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js .hero__scrollhint > i { animation: hint 2.4s var(--ease-io) infinite; transform-origin: top; }
  @keyframes hint { 0%,100% { transform: scaleY(0.35); opacity: 0.4; } 45% { transform: scaleY(1); opacity: 1; } }
}

/* 5.2 Statement */
.stmt { padding-block: clamp(5rem, 15vh, 11rem); }
.stmt__title { margin-block: 1.2rem clamp(2.5rem, 7vw, 4rem); max-width: 16em; }
.stmt__spalten { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; color: var(--text-mid); max-width: 68rem; }

/* 5.3 Explosionszeichnung */
.explode { background: var(--bg-2); }
.explode__stage { display: grid; }
.explode__canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.explode.is-gl .explode__canvas { opacity: 1; }
.explode__canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.explode__labels { position: absolute; inset: 0; pointer-events: none; display: none; }
.explode.is-gl .explode__labels { display: block; }
.phone-label {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: baseline; gap: 0.55rem;
  padding-left: 3.4rem; opacity: 0;
  white-space: nowrap; transition: opacity 0.35s linear;
  /* Die Schilder liegen im Raum und überschneiden sich zwangsläufig.
     Der dunkle Hof hält sie auch dann lesbar. */
  text-shadow: 0 0 10px var(--bg), 0 0 4px var(--bg), 0 0 2px var(--bg);
}
.phone-label::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 3rem; height: 1px; background: var(--akzent-tief);
}
.phone-label b { font-family: var(--mono); font-size: 0.66rem; color: var(--akzent); font-weight: 400; }
.phone-label span {
  display: grid; gap: 0.12rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--text-low);
}
.phone-label i { font-style: normal; font-family: var(--display); font-weight: 500; font-size: 0.95rem; color: var(--text); letter-spacing: -0.01em; }
.phone-label--links { padding-left: 0; padding-right: 3.4rem; flex-direction: row-reverse; }
.phone-label--links::before { left: auto; right: 0; }
.phone-label--links span { justify-items: end; text-align: right; }

.explode__fallback {
  display: grid; align-content: center; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr; padding: clamp(5rem, 12vh, 8rem) var(--gut);
  position: relative;
}
.explode.is-gl .explode__fallback { display: none; }
.stapel { position: relative; height: 16rem; }
.stapel span {
  position: absolute; left: 50%; top: calc(var(--i) * 2.1rem);
  width: 8rem; height: 4.6rem; margin-left: -4rem;
  border: 1px solid var(--linie-2); border-radius: 0.7rem;
  background: linear-gradient(160deg, rgba(158,197,255,0.07), transparent);
  transform: skewY(-16deg) skewX(12deg);
}
.stapel__liste { display: grid; gap: 0.55rem; font-size: 0.92rem; }
.stapel__liste li { display: flex; gap: 0.9rem; align-items: baseline; padding-bottom: 0.55rem; border-bottom: 1px solid var(--linie); }
.stapel__liste b { font-family: var(--mono); font-size: 0.68rem; color: var(--akzent); font-weight: 400; }
.stapel__liste i { font-style: normal; color: var(--text-low); font-size: 0.8rem; margin-left: auto; }

.explode__ui { position: relative; align-self: start; padding-top: clamp(5rem, 11vh, 7rem); pointer-events: none; }
html.pin .explode__ui { position: absolute; inset: 0 0 auto 0; }
.explode__h { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; font-size: clamp(1.8rem, 4.4vw, 3.2rem); margin-top: 0.6rem; }
.explode__hint { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-low); margin-top: 0.8rem; }
.explode__prog {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(2rem, 6vh, 3.5rem);
  display: flex; align-items: center; gap: 1.2rem;
}
html:not(.pin) .explode__prog { display: none; }
.explode__zahl { flex: none; font-family: var(--mono); font-size: 0.75rem; }
.explode__zahl b { color: var(--akzent); font-weight: 400; }
.explode__zahl i { color: var(--text-low); font-style: normal; }
.explode__bar { flex: 1 1 auto; height: 1px; background: var(--linie); }
.explode__bar > i { display: block; height: 100%; background: var(--akzent); transform: scaleX(0); transform-origin: left; }

/* 5.4 Bauteile — seitwärts laufende Bahn */
.ablauf { background: var(--bg); }
.ablauf__stage { display: grid; align-content: center; gap: clamp(1.5rem, 4vh, 3rem); padding-block: clamp(3rem, 8vh, 5rem); }
.ablauf__title { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; font-size: clamp(1.7rem, 4.2vw, 3rem); margin-top: 0.7rem; }
.ablauf__viewport { overflow: hidden; }
.ablauf__track { display: flex; gap: clamp(1rem, 2.4vw, 2rem); padding-inline: var(--gut); }
html.pin .ablauf__track { will-change: transform; }
.ablauf__station { flex: 0 0 auto; width: min(80vw, 21rem); display: grid; gap: 0.6rem; align-content: start; }
/* Breite in vw, damit die Bahn auf jedem Schirm ein Vielfaches der
   Fensterbreite lang bleibt — mit rem-Deckel schrumpft der Weg. */
html.pin .ablauf__station { width: max(16rem, 32vw); opacity: calc(0.4 + 0.6 * var(--near, 1)); transition: opacity 0.25s linear; }
.teil { border: 1px solid var(--linie); border-radius: 0.9rem; background: linear-gradient(165deg, rgba(158,197,255,0.06), transparent 60%); padding: 1.2rem; margin-bottom: 0.5rem; }
.teil svg { width: 100%; height: auto; }
.t-linie { fill: none; stroke: var(--akzent-tief); stroke-width: 1.6; }
.t-fill { fill: rgba(158,197,255,0.16); stroke: var(--akzent); stroke-width: 1; }
.t-mass { fill: none; stroke: var(--text-low); stroke-width: 1; stroke-dasharray: 3 3; }
.ablauf__nr { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; color: var(--akzent); }
.ablauf__station h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.ablauf__txt { color: var(--text-mid); font-size: 0.92rem; }
.ablauf__foot { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.ablauf__step { flex: none; font-family: var(--mono); font-size: 0.74rem; }
.ablauf__step b { color: var(--akzent); font-weight: 400; }
.ablauf__step i { font-style: normal; color: var(--text-low); margin-left: 0.4rem; }
.ablauf__bar { flex: 1 1 auto; height: 1px; background: var(--linie); }
.ablauf__bar > i { display: block; height: 100%; background: var(--akzent); transform: scaleX(0); transform-origin: left; }
.ablauf__label { flex: none; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mid); }
html:not(.pin) .ablauf__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.pin) .ablauf__station { scroll-snap-align: start; }
html:not(.pin) .ablauf__track { transform: none !important; }

/* 5.5 Technische Daten */
.daten { padding-block: clamp(5rem, 14vh, 10rem); background: var(--bg-2); }
.daten__title { margin-block: 1.2rem clamp(2.5rem, 6vw, 4rem); }
.daten__liste { display: grid; gap: 0; grid-template-columns: 1fr; }
.daten__liste > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0.2rem; border-top: 1px solid var(--linie); }
.daten__liste > div:last-child { border-bottom: 1px solid var(--linie); }
.daten__liste dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); }
.daten__liste dd { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; font-size: clamp(1.4rem, 3vw, 2.1rem); }
.daten__liste dd span { font-family: var(--mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--text-low); margin-left: 0.4rem; }

/* 5.6 Material — gepinnte Sequenz */
.tenets { background: var(--bg); }
.tenets__stage { display: grid; align-content: center; }
.tenets__grid { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 6vw, 5rem); grid-template-columns: 1fr; align-items: start; padding-block: clamp(4rem, 12vh, 8rem); }
.tenets__nav { display: grid; gap: 0.5rem; margin-top: 1.3rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.tenets__nav li { display: flex; gap: 0.9rem; align-items: baseline; color: var(--text-low); transition: color var(--dur-1) var(--ease); }
.tenets__nav li span { font-size: 0.64rem; letter-spacing: 0.2em; }
.tenets__nav li.is-on { color: var(--text); }
.tenets__nav li.is-on span { color: var(--akzent); }
.tenets__panelwrap { position: relative; }
html.pin .tenets__panelwrap { min-height: 12rem; }
html.pin .tenets__panel { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 20px, 0); pointer-events: none;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
html.pin .tenets__panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.tenets__panel { display: grid; gap: 1rem; max-width: 46ch; }
.tenets__panel + .tenets__panel { margin-top: 2.5rem; }
html.pin .tenets__panel + .tenets__panel { margin-top: 0; }
.tenets__kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-low); }
.tenets__h { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.02; }
.tenets__panel p:not(.tenets__kicker) { color: var(--text-mid); }
.tenets__media { display: none; }
html.pin .tenets__media { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 32vw; max-width: 28rem; overflow: hidden; z-index: 1; }
.mat { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.mat.is-on { opacity: 1; }
.mat--titan  { background: conic-gradient(from 210deg at 60% 40%, #2b3038, #6a7280, #2b3038, #8f97a3, #2b3038); }
.mat--glas   { background: linear-gradient(150deg, rgba(158,197,255,0.35), rgba(8,9,11,0.9) 55%), repeating-linear-gradient(60deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 9px); }
.mat--alu    { background: repeating-linear-gradient(100deg, #3a3f47 0 3px, #4a5058 3px 6px); }
.mat--kreis  { background: radial-gradient(circle at 50% 50%, rgba(158,197,255,0.28), transparent 62%), repeating-radial-gradient(circle at 50% 50%, transparent 0 16px, rgba(230,236,245,0.1) 16px 17px); }

/* 5.7 Schluss */
.schluss { padding-block: clamp(6rem, 18vh, 12rem); overflow: hidden; }
.schluss__inner { position: relative; display: grid; gap: 1.6rem; justify-items: start; max-width: 60rem; }
.schluss__inner p { color: var(--text-mid); max-width: 60ch; }
.btn {
  min-height: 3rem; padding: 0.85rem 1.8rem; margin-top: 0.6rem;
  border: 1px solid var(--linie-2); border-radius: 100px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  display: inline-flex; align-items: center;
}
.btn:hover { background: var(--akzent); color: var(--bg); border-color: var(--akzent); }

.foot { background: var(--bg-2); border-top: 1px solid var(--linie); padding-block: 2rem; }
.foot__note p { font-size: 0.7rem; line-height: 1.6; color: var(--text-low); max-width: 100ch; }
.foot__note strong { color: var(--text-mid); font-weight: 500; }

/* ── 6 · Schirme ───────────────────────────────────────────── */
@media (min-width: 48rem) {
  .stmt__spalten { grid-template-columns: 1fr 1fr; }
  .daten__liste { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 6vw, 5rem); }
  .explode__fallback { grid-template-columns: 1fr 1.2fr; align-items: center; }
  .stapel { height: 20rem; }
  html.pin .tenets__grid { grid-template-columns: 1fr 1.2fr; padding-right: 34vw; }
  .tenets__grid { grid-template-columns: 1fr 1.4fr; }
}
@media (min-width: 62rem) {
  .head__nav { display: flex; }
  .head__burger { display: none; }
  .mnav { display: none; }
}
@media (max-width: 47.99rem) {
  .draftbar { font-size: 0.62rem; }
  .hero__foot { font-size: 0.6rem; }
}