/* ── Schrift ────────────────────────────────────────────────
   Selbst gehostet: kein externer Aufruf, kein Datenschutz-Thema.
   Instrument Serif traegt die Aussagen, Geist den Fliesstext,
   Geist Mono alles Technische — Aktenzeichen, Jahreszahlen, Marken. */
@font-face{font-family:"Grk Serif";src:url("schrift/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Grk";src:url("schrift/Geist-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Grk";src:url("schrift/Geist-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Grk";src:url("schrift/Geist-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Grk Mono";src:url("schrift/GeistMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}

:root{
  --grund:#080B09; --flaeche:#0E1512; --gruen:#075C3C; --gold:#E3B24C; --glanz:#F7E3AE;
  --text:#E9EDEA; --text2:#97A39C;
  --linie:rgba(233,237,234,.09); --lichtkante:rgba(233,237,234,.2); --goldlinie:rgba(227,178,76,.62);
  --mono:"Grk Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Grk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Grk Serif",Georgia,"Times New Roman",serif;
  --spalte:min(1060px,100% - clamp(40px,12vw,112px));
  --luft:clamp(100px,15vh,180px);
}
@media (prefers-color-scheme: light){
  :root{
    --grund:#F1F1EC; --flaeche:#FAFAF7; --gold:#7A5A14; --glanz:#C9A44E;
    --text:#151D18; --text2:#57635C;
    --linie:rgba(21,29,24,.14); --lichtkante:rgba(21,29,24,.22); --goldlinie:rgba(122,90,20,.62);
  }
}
*{box-sizing:border-box;}
body{margin:0;background:var(--grund);color:var(--text);
  font-family:var(--sans);font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  position:relative;overflow-x:hidden;}
/* Tiefe statt Volltonfläche: ein einzelner, sehr flacher Grünschimmer hinter dem Kopf,
   darüber eine feine Körnung. Beides erzeugt, nichts geladen. */
body::before{content:"";position:absolute;top:0;left:0;right:0;height:150vh;pointer-events:none;z-index:0;
  background:radial-gradient(120% 62% at 50% -8%, rgba(7,92,60,.20), transparent 62%);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
header,main,footer{position:relative;z-index:1;}
@media (prefers-color-scheme: light){
  body::before{background:radial-gradient(120% 62% at 50% -8%, rgba(7,92,60,.10), transparent 62%);}
  body::after{opacity:.02;}
}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.06;
  margin:0;text-wrap:balance;}
h3{font-family:var(--sans);font-weight:600;letter-spacing:-.011em;line-height:1.25;margin:0;}
p{text-wrap:pretty;}
a{color:var(--text);text-decoration-color:var(--goldlinie);text-underline-offset:3px;}
a:hover{color:var(--gold);}
::selection{background:rgba(7,92,60,.5);}
.spalte{width:var(--spalte);margin:0 auto;}
section{padding-top:var(--luft);}
.marke{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text2);margin:0 0 18px;}
.fliess{font-size:17.5px;line-height:1.7;margin:0;}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease;}
.reveal.an{opacity:1;transform:none;}

/* ── Kopf ───────────────────────────────────────────────── */
header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:26px clamp(20px,6vw,56px);border-bottom:1px solid var(--linie);}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:400;
  letter-spacing:.005em;font-size:23px;}
.logo i{width:11px;height:11px;border-radius:3px;background:var(--gruen);display:inline-block;}

.hinweis{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);margin:0;}

/* ── Bühne: die Patentfigur wird beim Scrollen enthüllt ─── */
.buehne{height:230vh;position:relative;margin-top:clamp(48px,8vh,96px);}
.buehne .halt{position:sticky;top:0;height:100vh;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:clamp(20px,3vw,44px);padding:0 clamp(20px,6vw,56px);
  width:min(1240px,100%);margin:0 auto;}
.buehne .bild{grid-column:2;position:relative;height:66vh;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:18px;}
.buehne figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text2);text-align:center;flex:0 0 auto;}
.buehne img{height:100%;width:auto;display:block;min-height:0;
  /* Die Figur baut sich von unten nach oben auf — Scrollposition steuert die Maske. */
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 var(--auf,0%),transparent calc(var(--auf,0%) + 9%));
  mask-image:linear-gradient(to top,#000 0%,#000 var(--auf,0%),transparent calc(var(--auf,0%) + 9%));}
.buehne .satz{max-width:26ch;font-size:clamp(15px,1.25vw,16.5px);line-height:1.7;color:var(--text2);
  opacity:calc(var(--auf-n,0) * 1.4 - .25);transition:opacity .3s linear;}
.buehne .satz.li{grid-column:1;justify-self:end;text-align:right;}
.buehne .satz.re{grid-column:3;}
@media (max-width:900px){
  .buehne{height:auto;}
  .buehne .halt{position:static;height:auto;grid-template-columns:1fr;padding:48px clamp(20px,6vw,56px);}
  .buehne .bild{grid-column:1;height:auto;}
  .buehne img{width:100%;height:auto;-webkit-mask-image:none;mask-image:none;}
  .buehne .satz{grid-column:1;max-width:none;text-align:left;opacity:1;justify-self:start;}
}

/* ── Karten ─────────────────────────────────────────────── */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;}
.karte{position:relative;overflow:hidden;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:10px;padding:28px 26px;transition:border-color .45s ease;}
.karte:hover{border-color:var(--goldlinie);}
.karte::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--lichtkante),transparent);}
.karte h3{font-size:19px;margin:0 0 12px;}
.karte p{font-size:16px;line-height:1.65;margin:0;}

/* ── Konstanz-Vergleich ─────────────────────────────────── */
.vgl{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,5vw,56px);margin-top:56px;}
.vgl figure{margin:0;}
.vgl svg{width:100%;height:auto;display:block;color:var(--text);}
.vgl figcaption{margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--text2);text-align:center;}
.vgl .rahmen,.vgl .sattel,.vgl .masspfeil,.vgl .hilf-oben,.vgl .hilf-unten{transition:transform 1.3s cubic-bezier(.4,0,.2,1);}
.vgl .rad{opacity:.22;}
/* Beide Rahmen federn gleich weit ein (24 px). Links bleibt der Sattel in Ruhe stehen,
   waehrend der Rahmen wegfedert — der Abstand waechst um 30 %. Rechts folgt der Sattel
   dem Rahmen exakt: der Pfeil wandert mit, wird aber nicht laenger. Das ist die Erfindung.
   Die gestrichelte Ruhelage bleibt in beiden stehen und macht den Unterschied messbar. */
.vgl.laeuft .li .rahmen,.vgl figure:hover .li .rahmen{transform:translateY(24px);}
.vgl.laeuft .li .masspfeil,.vgl figure:hover .li .masspfeil{transform:scaleY(1.19);}
.vgl.laeuft .li .hilf-unten,.vgl figure:hover .li .hilf-unten{transform:translateY(24px);}
.vgl.laeuft .re .rahmen,.vgl figure:hover .re .rahmen{transform:translateY(24px);}
.vgl.laeuft .re .sattel,.vgl figure:hover .re .sattel{transform:translateY(24px);}
.vgl.laeuft .re .masspfeil,.vgl figure:hover .re .masspfeil{transform:translateY(24px);}
.vgl.laeuft .re .hilf-oben,.vgl figure:hover .re .hilf-oben{transform:translateY(24px);}
.vgl.laeuft .re .hilf-unten,.vgl figure:hover .re .hilf-unten{transform:translateY(24px);}
.hilf-oben,.hilf-unten{stroke:currentColor;stroke-width:1;fill:none;opacity:.4;}
.geist{stroke:currentColor;stroke-width:1;fill:none;stroke-dasharray:2.5 3.5;opacity:.3;}
.masspfeil{transform-box:fill-box;transform-origin:50% 0%;stroke:var(--gold);stroke-width:2.1;
  fill:none;stroke-linecap:round;stroke-linejoin:round;}
.delta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;fill:var(--gold);opacity:0;transition:opacity .5s ease .8s;}
.vgl.laeuft .delta,.vgl figure:hover .delta{opacity:1;}

/* ── Querschnitt ────────────────────────────────────────── */
@keyframes oval{from{transform:scale(1,1);}to{transform:scale(1.14,.7);}}
.quer{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,5vw,56px);margin-top:64px;}
.quer svg{width:170px;flex:0 0 auto;color:var(--text);}
.quer .verformt{transform-box:fill-box;transform-origin:50% 50%;animation:oval 3.8s ease-in-out infinite alternate;animation-play-state:paused;}
.quer.an .verformt{animation-play-state:running;}

/* ── Patentfiguren ──────────────────────────────────────── */
.figuren{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:12px;max-width:660px;}
.figuren figure{margin:0;background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;
  padding:22px 18px 16px;transition:border-color .5s ease,transform .5s ease;}
.figuren figure:hover{border-color:var(--goldlinie);transform:translateY(-3px);}
.figuren img{display:block;width:100%;height:auto;aspect-ratio:5/8;object-fit:contain;}
.figuren figcaption{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--text2);text-align:center;}
@media (prefers-color-scheme: light){.figuren img{filter:invert(1) hue-rotate(180deg) saturate(.8);}}

/* ── Zeitstrahl und Angaben ─────────────────────────────── */
.zeile{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--linie);}
.zeile:last-child{border-bottom:1px solid var(--linie);}
.zeile b{font-family:var(--mono);font-size:16px;font-weight:400;
  background:linear-gradient(100deg,var(--gold) 12%,var(--glanz) 46%,var(--gold) 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.zeile.offen b{color:var(--text2);}
.zeile p{margin:0;font-size:16.5px;line-height:1.6;}
.angaben{display:flex;flex-direction:column;max-width:720px;}
.angaben>div{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:16px;padding:14px 0;
  border-top:1px solid var(--linie);align-items:baseline;}
.angaben>div:last-child{border-bottom:1px solid var(--linie);}
.angaben span:first-child{font-size:14.5px;color:var(--text2);}

.todo{font-family:var(--mono);font-size:11.5px;color:var(--text2);
  border:1px dashed var(--linie);border-radius:6px;padding:5px 10px;display:inline-block;}
body[data-todos="aus"] .todo{display:none;}

footer{border-top:1px solid var(--linie);margin-top:var(--luft);
  padding:28px clamp(20px,6vw,56px);display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;align-items:baseline;}
footer span{font-size:14px;color:var(--text2);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  /* Ohne Bewegung ist dies die Fassung, die der Nutzer sieht — sie muss vollständig sein:
     Figur offen, Text sichtbar, Bühne als ruhiger Standbild-Auftritt. */
  .buehne{height:auto;}
  .buehne .halt{position:static;height:auto;width:min(1240px,100%);margin:0 auto;
    padding:clamp(48px,8vh,96px) clamp(20px,6vw,56px);}
  .buehne .bild{height:auto;}
  .buehne img{width:100%;max-width:440px;height:auto;margin:0 auto;
    -webkit-mask-image:none;mask-image:none;}
  .buehne .satz{opacity:1;}
  .vgl .rahmen,.vgl .sattel,.vgl .masspfeil{transition:none;}
  .quer .verformt{animation:none;transform:scale(1.14,.7);transform-box:fill-box;transform-origin:50% 50%;}
  .delta{opacity:1;transition:none;}
}

/* ── Stand der Technik ──────────────────────────────────── */
.befunde{display:grid;gap:1px;background:var(--linie);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);}
.befund{background:var(--grund);display:grid;grid-template-columns:64px 1fr;
  column-gap:clamp(16px,3vw,40px);row-gap:0;padding:30px 0;align-items:start;}
.befund .ziffer{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--gold);padding-top:4px;}
.befund h3{grid-column:2;font-size:20px;margin:0 0 10px;}
.befund p{grid-column:2;margin:0;font-size:16.5px;line-height:1.65;color:var(--text2);max-width:58ch;}
.befund.gewicht p{color:var(--text);}
.befund em{font-style:normal;color:var(--gold);}
.zitat{margin:56px 0 0;padding:0 0 0 clamp(20px,4vw,40px);border-left:1px solid var(--goldlinie);}
.zitat blockquote{margin:0;font-family:var(--serif);font-size:clamp(21px,2.3vw,30px);line-height:1.4;
  letter-spacing:-.008em;color:var(--text);max-width:34ch;}
.zitat figcaption{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text2);}
@media (max-width:640px){.befund{grid-template-columns:1fr;gap:8px;}
  .befund h3,.befund p{grid-column:1;}}

/* ── Erfüllungsmatrix ───────────────────────────────────── */
.matrix{margin-top:56px;}
.mtabelle{display:grid;font-size:14.5px;overflow-x:auto;}
.mtabelle>div{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(112px,1fr));
  gap:0;border-top:1px solid var(--linie);}
.mtabelle>div:last-child{border-bottom:1px solid var(--linie);}
.mtabelle span{padding:15px 14px;line-height:1.4;display:flex;align-items:center;}
.mkopf{border-top:none !important;}
.mkopf span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text2);align-items:flex-end;padding-bottom:12px;}
.mkopf span.uns{color:var(--gold);}
.mtabelle span:first-child{color:var(--text);}
.mtabelle span:not(:first-child){justify-content:center;text-align:center;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.04em;color:var(--text2);}
.mtabelle span.ja{color:var(--text);}
.mtabelle span.ja::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;margin-right:9px;flex:0 0 auto;}
.mtabelle span.nein{color:var(--text2);opacity:.55;}
.mtabelle span.nein::before{content:"";width:7px;height:1px;background:currentColor;margin-right:9px;flex:0 0 auto;}
.mtabelle span.offen{color:var(--text2);opacity:.3;}
.mtabelle span.uns{background:color-mix(in srgb, var(--gold) 6%, transparent);color:var(--gold);}
.mtabelle>div:hover span:not(.uns){background:rgba(233,237,234,.02);}
@media (prefers-color-scheme: light){.mtabelle span.uns{background:rgba(150,112,31,.07);}}

/* ── Das Werk — skelettierter Schnitt, vom Nutzer bewegt ── */
.werk{margin-top:72px;padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px) clamp(24px,3vw,36px);
  background:linear-gradient(180deg,rgba(7,92,60,.09),transparent 62%),var(--flaeche);
  border:1px solid var(--linie);border-radius:14px;position:relative;overflow:hidden;}
.werk::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--goldlinie),transparent);}
.werkkopf{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-bottom:clamp(16px,2vw,28px);}
.wtaste{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);background:transparent;border:1px solid var(--goldlinie);border-radius:999px;
  padding:9px 18px;cursor:pointer;transition:background .35s ease,color .35s ease;}
.wtaste:hover{background:var(--gold);color:var(--grund);}
#wsvg{width:100%;max-width:640px;height:auto;display:block;margin:0 auto;
  touch-action:none;cursor:grab;color:var(--text);}
#wsvg.zieht{cursor:grabbing;}

.wfedernd{transform:translateY(calc(var(--ein,0) * 38px));}
.wfedernd,.wstuetze{transition:transform .12s linear;}
.werk.sanft .wfedernd{transition:transform 1.1s cubic-bezier(.4,0,.2,1);}

.wrohr{fill:rgba(233,237,234,.04);stroke:currentColor;stroke-width:2;}
.wstuetze{fill:color-mix(in srgb, var(--gold) 10%, transparent);stroke:var(--gold);stroke-width:2;}
.wlager{fill:color-mix(in srgb, var(--gold) 22%, transparent);stroke:var(--gold);stroke-width:1.2;}
.wklemme{fill:rgba(7,92,60,.55);stroke:var(--gruen);stroke-width:1.6;}
.wsattel{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;}
.wstummel{fill:none;stroke-width:2.6;stroke-linecap:round;}
.wtretlager{fill:none;stroke:currentColor;stroke-width:2.4;opacity:.6;}
.wgriff{fill:var(--gold);opacity:.9;}
.wpfeilchen{stroke:var(--grund);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.wruhe{stroke:currentColor;stroke-width:1;fill:none;stroke-dasharray:3 4;opacity:.26;}
.wmass{stroke:var(--gold);stroke-width:2;fill:none;stroke-linecap:round;}
.wmasstext{fill:var(--text2);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-anchor:end;}
.wmasstext.gross{fill:var(--gold);font-size:17px;letter-spacing:.02em;}
.wetikett{fill:var(--text2);font-family:var(--mono);font-size:12px;letter-spacing:.04em;}
.wetikett.fest{fill:var(--text2);}

.wfuss{max-width:64ch;margin:clamp(18px,2.5vw,30px) auto 0;}
.wfuss p{margin:0;font-size:15.5px;line-height:1.65;color:var(--text2);}
.wfuss b{color:var(--text);font-weight:500;}
.wfuss .wquelle{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;}

@media (prefers-reduced-motion: reduce){
  .wfedernd,.werk.sanft .wfedernd{transition:none;}
}

/* ── Ausdruck ───────────────────────────────────────────────
   Die Abschnitte blenden sich per Scroll-Beobachter ein (.reveal → .an).
   Wer druckt, ohne vorher durch die Seite gescrollt zu haben, würde die noch
   nicht ausgelösten Abschnitte mit opacity:0 aufs Papier bringen — also leer.
   Der Druck erzwingt deshalb den Endzustand, statt sich auf den Beobachter zu
   verlassen. Bedienelemente entfallen, Papier kennt keine Knöpfe. */
@media print{
  .reveal{opacity:1 !important;transform:none !important;}
  .buehne{height:auto !important;}
  .buehne .halt{position:static !important;height:auto !important;}
  .buehne img{-webkit-mask-image:none !important;mask-image:none !important;}
  .buehne .satz{opacity:1 !important;}
  .wtaste{display:none;}
  .vgl figure,.karte,.befund,.werk,figure{break-inside:avoid;page-break-inside:avoid;}
  h1,h2,h3{break-after:avoid;page-break-after:avoid;}
  body::before,body::after{display:none;}
}