/* Oscillate Audio — Kaltlicht
   Ein einziges Stylesheet für den ganzen Shop.
   Farben nur hier ändern, nie in einzelnen Seiten. */

:root{
  --bg:#08090A;
  --panel:#0E1418;
  --panel-2:#111A20;
  --line:#1E272D;
  --line-soft:#161E23;
  --fg:#E4EFF5;
  --dim:#8B979F;
  --faint:#5F6B73;
  --blue:#8FD8FF;
  --green:#5FE3A8;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600}
p{margin:0}

/* ---------- Kopf ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(8,9,10,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;gap:24px;height:62px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand svg{display:block}
.brand .wm{
  font-family:var(--mono);font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.35;color:var(--fg);
}
.brand .wm span{font-weight:400;color:var(--faint);letter-spacing:.28em;display:block;font-size:12px}
.brand:hover{text-decoration:none}
.nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.nav a:hover{color:var(--fg);text-decoration:none}
.nav a.here{color:var(--blue)}

/* ---------- Abschnitte ---------- */
section{padding:64px 0;border-bottom:1px solid var(--line-soft)}
.lbl{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:14px;
}
.sec-h{font-size:clamp(22px,3.2vw,30px);line-height:1.2;letter-spacing:-.01em;margin-bottom:14px}
.lead{color:var(--dim);max-width:62ch;font-size:17px}

/* ---------- Hero ---------- */
.hero{padding:86px 0 72px;border-bottom:1px solid var(--line-soft)}
.hero h1{
  font-size:clamp(32px,6.2vw,60px);line-height:1.05;letter-spacing:-.025em;
  max-width:16ch;
}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lead{margin-top:22px;font-size:18px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:13px 22px;border:1px solid var(--blue);
  background:var(--blue);color:#06131B;cursor:pointer;transition:background .15s,border-color .15s;
}
.btn:hover{background:#A9E2FF;border-color:#A9E2FF;text-decoration:none}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.ghost:hover{background:rgba(143,216,255,.1)}
.btn.green{background:var(--green);border-color:var(--green);color:#04140D}
.btn.green:hover{background:#7BEBBA;border-color:#7BEBBA}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Produktraster ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.card{
  background:var(--panel);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:border-color .15s;
}
.card:hover{border-color:#2E3D46;text-decoration:none}
.card .art{
  aspect-ratio:1;background:var(--panel-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.card .art .kind{
  position:absolute;top:12px;left:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);padding:3px 7px;background:var(--bg);
}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:17px;letter-spacing:-.005em;color:var(--fg)}
.card p{font-size:14px;color:var(--dim);line-height:1.55;flex:1}
.card .price{
  font-family:var(--mono);font-size:14px;color:var(--blue);
  font-variant-numeric:tabular-nums;padding-top:8px;border-top:1px solid var(--line);margin-top:6px;
}
.card .price s{color:var(--faint);margin-right:8px}

/* ---------- Produktseite ---------- */
.prod{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;padding:56px 0}
.prod .visual{background:var(--panel);border:1px solid var(--line);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.prod .kind{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;display:block;
}
.prod h1{font-size:clamp(28px,4.6vw,44px);line-height:1.08;letter-spacing:-.02em}
.prod .sub{color:var(--dim);font-size:17px;margin-top:16px;max-width:46ch}
.buybox{border:1px solid var(--line);background:var(--panel);padding:20px;margin-top:28px}
.buybox .p{font-family:var(--mono);font-size:26px;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1}
.buybox .vat{font-size:12.5px;color:var(--faint);margin-top:6px}
.buybox .btn{margin-top:16px;width:100%;justify-content:center}
.buybox ul{list-style:none;margin:16px 0 0;padding:0}
.buybox li{
  font-size:13.5px;color:var(--dim);padding:6px 0 6px 20px;position:relative;
  border-top:1px solid var(--line-soft);
}
.buybox li:first-child{border-top:0}
.buybox li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;background:var(--green)}

.specs{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.specs th,.specs td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.specs th{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:500;width:34%;padding-right:20px;
}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

.player{background:var(--panel);border:1px solid var(--line);padding:16px 18px}
.player audio{width:100%;margin-top:12px}

/* ---------- Textseiten (Recht) ---------- */
.doc{max-width:70ch;padding:56px 0 20px}
.doc h1{font-size:clamp(26px,4vw,38px);line-height:1.15;letter-spacing:-.015em}
.doc h2{font-size:19px;margin:38px 0 10px;color:var(--fg)}
.doc h3{font-size:15px;margin:24px 0 6px;color:var(--dim);font-family:var(--mono);
  letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.doc p{margin-top:12px;color:var(--dim)}
.doc ul{margin:12px 0;padding-left:20px;color:var(--dim)}
.doc li{margin-bottom:7px}
.doc strong{color:var(--fg);font-weight:600}
.doc .updated{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:16px;
}
.doc .box{border:1px solid var(--line);background:var(--panel);padding:18px 20px;margin:24px 0}
.doc .box p:first-child{margin-top:0}

/* ---------- Fuß ---------- */
footer{padding:52px 0 64px;color:var(--faint);font-size:13.5px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
footer h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px;font-weight:500;
}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:7px}
footer a{color:var(--faint)}
footer a:hover{color:var(--fg)}
footer .fine{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);line-height:1.7}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .prod{grid-template-columns:1fr;gap:30px;padding:36px 0}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
  .top .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:12px}
  .nav{margin-left:0;flex-basis:100%;gap:18px;flex-wrap:wrap}
  .hero{padding:52px 0 46px}
  section{padding:46px 0}
  footer .cols{grid-template-columns:1fr}
}


/* ====== Motion-Ebene v1 (aus motion/v1/motion.css) ====== */
/* ===========================================================================
   Motion-Ebene v1 — wird von build1.py an stil.css angehaengt.
   Nichts hier überschreibt Farben aus stil.css; alle Werte kommen aus
   den vorhandenen Variablen.

   ACHTUNG: In dieser Datei niemals die Zeichenfolge schliessendes-style-Tag
   schreiben, auch nicht im Kommentar. Sobald das CSS irgendwo inline in eine
   Seite wandert, beendet sie dort das Style-Element und der komplette Rest
   der Datei erscheint als Text auf der Seite.
   =========================================================================== */

/* --- Grundzustand für Bewegung ------------------------------------------ */
:root{
  --e-aus: cubic-bezier(.16,1,.3,1);
  --e-weich: cubic-bezier(.4,0,.2,1);
}

/* --- Einblenden ----------------------------------------------------------
   Maske statt clip-path: eine Maske färbt, sie beschneidet nicht. Ein auf
   Breite null geclipptes Element gilt dem IntersectionObserver nie als
   sichtbar und blendet deshalb nie ein. (Falle F1)                        */

.rv{
  -webkit-mask-image:linear-gradient(0deg,#000 0 100%);
          mask-image:linear-gradient(0deg,#000 0 100%);
  -webkit-mask-size:100% 0%;  mask-size:100% 0%;
  -webkit-mask-position:0 100%; mask-position:0 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transform:translateY(14px);
  opacity:.001;
  transition:
    -webkit-mask-size 1s var(--e-aus),
            mask-size 1s var(--e-aus),
            transform 1s var(--e-aus),
            opacity .5s linear;
}
.rv.in{
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  transform:none; opacity:1;
}

/* Beats: gestaffelt, aber nie länger als eine halbe Sekunde Gesamtversatz */
.rv[data-beat="1"]{transition-delay:.09s}
.rv[data-beat="2"]{transition-delay:.18s}
.rv[data-beat="3"]{transition-delay:.27s}
.rv[data-beat="4"]{transition-delay:.36s}
.rv[data-beat="5"]{transition-delay:.45s}

/* --- Kopfzeile verdichtet sich beim Scrollen ---------------------------- */
.top{transition:height .35s var(--e-weich), background-color .35s linear}
.top .wrap{transition:height .35s var(--e-weich)}
body.gescrollt .top{border-bottom-color:#243039}
body.gescrollt .top .wrap{height:52px}
body.gescrollt .brand svg{transform:scale(.88)}
.brand svg{transition:transform .35s var(--e-weich);transform-origin:left center}

/* --- Oszillator im Kopfbereich ------------------------------------------
   Defensiv positioniert: eine ältere, spezifischere Regel im Stylesheet
   könnte das Canvas sonst in den Textfluss holen. (Falle B1)             */
.hero{position:relative;overflow:clip}
canvas.osz{
  position:absolute!important; inset:0!important;
  width:100%!important; height:100%!important;
  z-index:0!important; pointer-events:none;
  opacity:.9;
  /* Die Welle gehört NEBEN den Text, nicht hindurch. Ein senkrechter Schnitt
     reichte nicht mehr, seit die Überschrift auf 88 px gewachsen ist — die
     Welle lief durch „work at night". Jetzt wird eine Ellipse um den ganzen
     Textblock freigehalten; ausserhalb davon darf sie über die volle Höhe
     schwingen. */
  /* Zurück zum waagerechten Schnitt. Die Ellipse war eine schlechte Idee:
     ihre Radien hängen an der Höhe des Kopfbereichs, und der ist mit der
     Datenzeile aus v6 um gut hundert Pixel gewachsen. Dadurch wanderte die
     freigehaltene Fläche mit und drückte die Welle fast aus dem Bild.
     Ein waagerechter Verlauf hängt nur an der Breite — also an dem, wonach
     sich auch die Überschrift richtet. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0 40%,rgba(0,0,0,.22) 53%,#000 66%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0 40%,rgba(0,0,0,.22) 53%,#000 66%,#000 100%);
}
.hero .wrap{position:relative;z-index:1}

/* Schmale Schirme: der Text füllt die ganze Breite, also rutscht die Welle
   unter ihn statt daneben. */
@media (max-width:900px){
  .hero{padding-bottom:150px}
  canvas.osz{
    top:auto!important; bottom:0!important; height:150px!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);
            mask-image:linear-gradient(180deg,transparent 0,#000 45%);
  }
}

/* Überschrift zeilenweise aufdecken */
.wz{display:block;overflow:hidden;padding:0 .14em .16em;margin:0 -.14em -.16em}
.wz > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--e-aus);
}
.wz.in > span{transform:none}
.wz.fertig{overflow:visible}   /* kursive Überhänge nicht abschneiden (D1) */

/* --- Wellensignatur auf Produktkarten ----------------------------------- */
.card .art{position:relative}
canvas.sig{
  position:absolute!important; inset:0!important;
  width:100%!important; height:100%!important;
  z-index:0!important; pointer-events:none;
}
.card .art > svg{position:relative;z-index:1;transition:transform .5s var(--e-aus)}
.card:hover .art > svg{transform:scale(1.04)}
.card{transition:border-color .2s, transform .4s var(--e-aus)}
.card:hover{transform:translateY(-3px)}

/* --- Hörprobe mit Wellenform -------------------------------------------- */
.wf{margin-top:12px;position:relative}
.wf canvas{
  display:block;width:100%;height:64px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);
}
.wf .zeit{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;color:var(--faint);
  margin-top:7px;font-variant-numeric:tabular-nums;
}
.wf .hinweis{
  padding:20px 16px;border:1px dashed var(--line);color:var(--faint);
  font-size:13.5px;text-align:center;
}
.wf-knopf{
  display:inline-flex;align-items:center;gap:9px;margin-top:12px;
  background:transparent;border:1px solid var(--line);color:var(--fg);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 16px;cursor:pointer;transition:border-color .2s,color .2s;
}
.wf-knopf:hover{border-color:var(--blue);color:var(--blue)}

/* --- Kapitelverzeichnis rechts ------------------------------------------
   Eigener Grund, weil der Inhalt darunter durchzieht und der Kontrast
   sonst je nach Abschnitt zusammenbricht. (Falle F5)                      */
.kap{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);
  z-index:40;display:none;flex-direction:column;gap:14px;
}
@media (min-width:1100px){ .kap{display:flex} }
.kap a{
  display:flex;align-items:center;justify-content:flex-end;gap:11px;
  position:relative;color:var(--faint);text-decoration:none;
}
.kap a:hover{text-decoration:none}
.kap .t{
  position:absolute;right:100%;margin-right:11px;white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateX(6px);
  transition:opacity .25s,transform .25s;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  padding:3px 8px;margin-top:0;backdrop-filter:blur(4px);
}
/* Beschriftung NUR beim Zeigen. Dauerhaft eingeblendet liest sie sich über
   wechselndem Grund wie versprengter Text mitten im Layout. */
.kap a:hover .t,.kap a:focus-visible .t{opacity:1;transform:none}
.kap .m{
  width:9px;height:9px;border:1px solid currentColor;flex:none;
  transition:background-color .25s,border-color .25s,box-shadow .25s;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bg) 72%,transparent);
}
.kap a.an{color:var(--blue)}
.kap a.an .m{background:var(--blue);border-color:var(--blue)}

/* --- Schalter für Bewegung ---------------------------------------------- */
.rm-schalter{
  background:transparent;border:1px solid var(--line);color:var(--faint);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;cursor:pointer;margin-top:18px;
}
.rm-schalter:hover{border-color:var(--dim);color:var(--dim)}

/* --- Zahlen, die mitlaufen ---------------------------------------------- */
.zahl{font-variant-numeric:tabular-nums}

/* ===========================================================================
   Ruhemodus — greift bei Systemeinstellung UND per Schalter.
   Nichts bleibt unsichtbar, nichts bewegt sich.
   =========================================================================== */
body.rm .rv,
body.rm .rv.in{
  -webkit-mask-image:none!important; mask-image:none!important;
  transform:none!important; opacity:1!important; transition:none!important;
}
body.rm .wz > span{transform:none!important;transition:none!important}
body.rm .card:hover{transform:none}
body.rm .card:hover .art > svg{transform:none}
body.rm .top .wrap,body.rm .brand svg{transition:none}
body.rm canvas.osz{opacity:.5}

@media (prefers-reduced-motion:reduce){
  .rv,.rv.in{
    -webkit-mask-image:none!important; mask-image:none!important;
    transform:none!important; opacity:1!important; transition:none!important;
  }
  .wz > span{transform:none!important;transition:none!important}
  .card:hover{transform:none}
}


/* ====== Motion-Ebene v2 (aus motion/v2/motion2.css) ====== */
/* ===========================================================================
   Motion-Ebene v2 — Scroll-Inszenierung und Detailarbeit.
   Setzt v1 voraus. Wird von build2.py an stil.css angehaengt.

   ACHTUNG: in dieser Datei niemals ein schliessendes style-Tag schreiben,
   auch nicht im Kommentar — es beendet beim Inlinen das Style-Element.
   =========================================================================== */

/* --- Textmarkierung in Markenfarbe -------------------------------------- */
::selection{background:var(--green);color:#04140D}

/* =========================================================================
   1 · Signalkette — gepinnte Scroll-Story
   Die Umschaltbedingung steht WOERTLICH genauso im Skript. Wer sie hier
   aendert, muss sie dort mitaendern, sonst scrubbt das Skript ueber einen
   Fortschritt, den es ohne Pinning nicht mehr gibt. (Falle B6)
   ====================================================================== */
.kette{padding:0;border-bottom:1px solid var(--line-soft);height:300vh;position:relative}
.kette__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.kette__grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:48px;align-items:center;width:100%}
.kette__text .lbl{margin-bottom:12px}
.kette__text .sec-h{margin-bottom:10px}

.kette__schritte{list-style:none;margin:26px 0 0;padding:0;counter-reset:k}
.kette__schritte li{
  position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line-soft);
  opacity:.34;transition:opacity .35s var(--e-weich);
}
.kette__schritte li::before{
  counter-increment:k;content:counter(k);
  position:absolute;left:0;top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--faint);
  transition:color .35s;
}
.kette__schritte li::after{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--blue);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--e-aus);
}
.kette__schritte li.an{opacity:1}
.kette__schritte li.an::before{color:var(--blue)}
.kette__schritte li.an::after{transform:scaleY(1)}
.kette__schritte b{display:block;font-size:16px;font-weight:600;margin-bottom:2px}
.kette__schritte span{display:block;font-size:14px;color:var(--dim);line-height:1.55}

.kette__buehne{position:relative;background:var(--panel);border:1px solid var(--line);padding:22px}
.kette__c{display:block;width:100%;height:min(46vh,340px)}
.kette__achse{
  display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--faint);
}

/* Kein Platz zum Pinnen: in den normalen Fluss zurueckfallen.
   Bedingung identisch im Skript. */
@media (max-width:900px), (max-height:700px){
  .kette{height:auto;padding:56px 0}
  .kette__pin{position:static;height:auto;display:block}
  .kette__grid{grid-template-columns:1fr;gap:28px}
  .kette__c{height:220px}
  .kette__schritte li{opacity:1}
  .kette__schritte li::after{transform:scaleY(1)}
}

/* =========================================================================
   2 · Fortschritt als Welle unter der Kopfzeile
   ====================================================================== */
.fortschritt{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--blue) 0 var(--p,0%),transparent var(--p,0%));
  opacity:0;transition:opacity .3s;
}
body.gescrollt .fortschritt{opacity:.9}

/* =========================================================================
   3 · Produktkarte — Abspielkopf beim Zeigen
   Nur EIN Effekt je Element: der Kopf laeuft, die Karte selbst bleibt ruhig.
   ====================================================================== */
.card .art::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--green),transparent);
  left:0;opacity:0;z-index:2;pointer-events:none;
}
.card:hover .art::after,.card:focus-visible .art::after{
  animation:kopf 1.5s var(--e-weich) infinite;
}
@keyframes kopf{
  0%{left:0;opacity:0}
  8%{opacity:.9}
  92%{opacity:.9}
  100%{left:100%;opacity:0}
}
.card .art .kind{z-index:3}

/* =========================================================================
   4 · Knopf — Wische von unten, Beschriftung bleibt lesbar
   ====================================================================== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:0;
  transform:translateY(101%);
  transition:transform .34s var(--e-aus),opacity .34s linear;
}
.btn.ghost:hover::before{transform:none;opacity:.12}
.btn.ghost:hover{background:transparent}

/* Kaufknopf laedt: die Wellenlinie laeuft, solange Paddle oeffnet */
.btn.laedt{color:transparent!important;pointer-events:none}
.btn.laedt::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(6,19,27,.55) 0 2px,transparent 2px 9px);
  animation:schieben .9s linear infinite;
}
@keyframes schieben{to{background-position:9px 0}}

/* =========================================================================
   5 · Tabellenzeilen — Haarlinie zieht sich beim Erscheinen auf
   ====================================================================== */
.specs tr{position:relative}
.specs th,.specs td{border-bottom-color:transparent}
.specs tr::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--line-soft);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--e-aus);
}
.specs tr.in::after,body.rm .specs tr::after{transform:scaleX(1)}
.specs tr:last-child::after{display:none}
.specs tr td,.specs tr th{transition:color .3s}
.specs tr:hover td{color:var(--fg)}

/* =========================================================================
   6 · Kaufkasten bleibt am Bildschirm, solange die Seite lang ist
   ====================================================================== */
@media (min-width:861px) and (min-height:720px){
  .prod > div:last-child{align-self:start;position:sticky;top:86px}
}

/* =========================================================================
   7 · Seitenuebergang — nur wo der Browser es kann
   ====================================================================== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root){animation:vt-raus .22s var(--e-weich) both}
::view-transition-new(root){animation:vt-rein .3s var(--e-aus) both}
@keyframes vt-raus{to{opacity:0}}
@keyframes vt-rein{from{opacity:0;transform:translateY(8px)}}

/* =========================================================================
   8 · Ruhemodus
   ====================================================================== */
body.rm .card:hover .art::after{animation:none;opacity:0}
body.rm .btn::before{transition:none}
body.rm .btn.laedt::after{animation:none}
body.rm .kette{height:auto;padding:56px 0}
body.rm .kette__pin{position:static;height:auto;display:block}
body.rm .kette__grid{gap:28px}
body.rm .kette__schritte li{opacity:1}
body.rm .kette__schritte li::after{transform:scaleY(1)}
body.rm .fortschritt{display:none}

@media (prefers-reduced-motion:reduce){
  .card:hover .art::after{animation:none;opacity:0}
  .btn::before{transition:none}
  .specs tr::after{transform:scaleX(1);transition:none}
}


/* ====== Motion-Ebene v3 (aus motion/v3/motion3.css) ====== */
/* ===========================================================================
   Motion-Ebene v3 — Geräteseiten anfassbar machen.
   Setzt v1 und v2 voraus. Wird von build3.py an stil.css angehaengt.

   ACHTUNG: in dieser Datei niemals ein schliessendes style-Tag schreiben,
   auch nicht im Kommentar.
   =========================================================================== */

/* --- Sprungmarke -------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#06131B;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 18px;
}
.skip:focus{left:0;text-decoration:none}

/* =========================================================================
   1 · Regler-Demonstrator
   ====================================================================== */
.demo__grid{
  display:grid;grid-template-columns:1.35fr .65fr;gap:26px;align-items:stretch;
  margin-top:26px;
}
.demo__buehne{background:var(--panel);border:1px solid var(--line);padding:18px;min-width:0}
.demo__c{display:block;width:100%;height:min(38vh,280px)}
.demo__achse{
  display:flex;justify-content:space-between;margin-top:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--faint);
}
.demo__legende{
  display:flex;gap:18px;margin-top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--faint);
}
.demo__legende span{display:flex;align-items:center;gap:7px}
.demo__legende i{width:14px;height:2px;display:block}
.demo__legende .ref{background:repeating-linear-gradient(90deg,#6E8291 0 5px,transparent 5px 9px)}
.demo__legende .jetzt{background:var(--blue)}

.demo__regler{
  background:var(--panel);border:1px solid var(--line);padding:18px;
  display:flex;flex-direction:column;gap:20px;min-width:0;
}
.regler{display:block}
.regler__kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:10px;
}
.regler__wert{color:var(--blue);font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* Schieber: eigene Gestaltung, aber ein echtes input[type=range] darunter —
   damit Tastatur, Vorlesesoftware und Berührung ohne Zutun funktionieren. */
.regler input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:28px;background:transparent;cursor:pointer;margin:0;display:block;
}
.regler input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--line);border:0;
}
.regler input[type=range]::-moz-range-track{height:2px;background:var(--line);border:0}
.regler input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:22px;margin-top:-10px;border-radius:1px;
  background:var(--blue);border:0;
  box-shadow:0 0 0 4px rgba(143,216,255,.14);
  transition:box-shadow .18s,background .18s;
}
.regler input[type=range]::-moz-range-thumb{
  width:14px;height:22px;border-radius:1px;background:var(--blue);border:0;
  box-shadow:0 0 0 4px rgba(143,216,255,.14);
}
.regler input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(143,216,255,.2)}
.regler input[type=range]:active::-webkit-slider-thumb{background:var(--green)}
.regler input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--green)}
.regler input[type=range]:focus{outline:none}

.demo__fuss{
  display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:6px;
  flex-wrap:wrap;
}
.demo__hinweis{font-size:12px;color:var(--faint);line-height:1.5}

@media (max-width:860px){
  .demo__grid{grid-template-columns:1fr}
  .demo__c{height:220px}
}

/* =========================================================================
   2 · A/B-Umschalter im Abspieler
   ====================================================================== */
.ab{display:flex;gap:0;margin-top:12px;border:1px solid var(--line);width:fit-content}
.ab button{
  background:transparent;border:0;border-right:1px solid var(--line);
  color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:color .18s,background .18s;
}
.ab button:last-child{border-right:0}
.ab button.an{background:var(--blue);color:#06131B}
.ab button:hover:not(.an){color:var(--fg);background:rgba(143,216,255,.08)}
.ab-hinweis{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.5}

/* =========================================================================
   3 · Ruhemodus
   ====================================================================== */
body.rm .regler input[type=range]::-webkit-slider-thumb{transition:none}


/* ====== Motion-Ebene v4 (aus motion/v4/motion4.css) ====== */
/* ===========================================================================
   Motion-Ebene v4 — HUD.
   Die Seite verhaelt sich wie der Bildschirm eines Messgeraets: Eckwinkel,
   eine Statusleiste mit echten Werten, ein Raster das auf den Zeiger
   reagiert, und Reveals die wie ein Zeilendurchlauf aussehen.

   Setzt v1 bis v3 voraus. Kein schliessendes style-Tag in dieser Datei.
   =========================================================================== */

/* =========================================================================
   1 · Rasterfeld im Hintergrund
   Liegt hinter allem. Eigener Grund ist nicht noetig, weil body den setzt.
   ====================================================================== */
canvas.raster{
  position:fixed!important;inset:0!important;
  width:100%!important;height:100%!important;
  z-index:0!important;pointer-events:none;opacity:.55;
}
body > header,body > main,body > footer,body > .kap,body > .hud,body > .fortschritt{
  position:relative;z-index:1;
}
body > header.top{z-index:50}
body > .kap{z-index:40}

/* =========================================================================
   2 · Eckwinkel — der Rahmen des Geraets
   ====================================================================== */
.hud{position:fixed;inset:0;z-index:45;pointer-events:none;display:none}
@media (min-width:900px){ .hud{display:block} }

.hud__ecke{
  position:absolute;width:16px;height:16px;
  border:1px solid rgba(143,216,255,.34);
}
.hud__ecke.ol{top:70px;left:14px;border-right:0;border-bottom:0}
.hud__ecke.or{top:70px;right:14px;border-left:0;border-bottom:0}
.hud__ecke.ul{bottom:44px;left:14px;border-right:0;border-top:0}
.hud__ecke.ur{bottom:44px;right:14px;border-left:0;border-top:0}

/* =========================================================================
   3 · Statusleiste
   Eigener deckender Grund — der Inhalt zieht darunter durch und der Kontrast
   waere sonst je nach Abschnitt nicht mehr gegeben. (Falle F5)
   ====================================================================== */
.hud__leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:46;
  display:none;align-items:center;gap:22px;
  height:30px;padding:0 18px;
  background:rgba(8,9,10,.94);
  border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  pointer-events:none;
}
@media (min-width:900px){
  .hud__leiste{display:flex}
  body{padding-bottom:30px}
}
.hud__feld{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hud__feld b{font-weight:500;color:var(--dim);letter-spacing:.16em}
.hud__feld i{font-style:normal;color:var(--blue);font-variant-numeric:tabular-nums}
.hud__feld.rechts{margin-left:auto}
.hud__sicht{width:74px;height:14px;display:block}
.hud__trenner{width:1px;height:12px;background:var(--line);flex:none}

/* Pegel: kein Zierrat, sondern die Scrollgeschwindigkeit */
.hud__pegel{display:flex;gap:2px;align-items:flex-end;height:12px}
.hud__pegel span{
  width:3px;background:var(--line);
  transition:background .12s linear,height .12s linear;
}

/* =========================================================================
   4 · Zeilendurchlauf beim Einblenden
   Ein heller Strich laeuft einmal ueber die Ueberschrift, waehrend sie
   aufdeckt — wie ein Bildaufbau auf einer Roehre.
   ====================================================================== */
.sec-h{position:relative}
.rv.sec-h::after,.sec-h.rv-scan::after{
  content:"";position:absolute;left:-4px;right:-4px;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  opacity:0;pointer-events:none;
}
.rv.in.sec-h::after,.sec-h.rv-scan.in::after{
  animation:scanzeile 1s var(--e-aus) .1s both;
}
@keyframes scanzeile{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:.9}
  85%{opacity:.55}
  100%{opacity:0;transform:translateY(100%)}
}

/* =========================================================================
   5 · Karten bekommen HUD-Ecken und einen Datenstreifen
   ====================================================================== */
.card{position:relative}
.card__winkel{
  position:absolute;width:11px;height:11px;pointer-events:none;
  border:1px solid var(--green);opacity:0;
  transition:opacity .22s var(--e-weich),transform .3s var(--e-aus);
}
.card__winkel.a{top:-1px;left:-1px;border-right:0;border-bottom:0;transform:translate(5px,5px)}
.card__winkel.b{top:-1px;right:-1px;border-left:0;border-bottom:0;transform:translate(-5px,5px)}
.card__winkel.c{bottom:-1px;left:-1px;border-right:0;border-top:0;transform:translate(5px,-5px)}
.card__winkel.d{bottom:-1px;right:-1px;border-left:0;border-top:0;transform:translate(-5px,-5px)}
.card:hover .card__winkel,.card:focus-visible .card__winkel{opacity:.85;transform:none}

.card__daten{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;gap:14px;padding:7px 12px;
  background:linear-gradient(0deg,rgba(8,9,10,.96),rgba(8,9,10,.7) 70%,transparent);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
  opacity:0;transform:translateY(6px);
  transition:opacity .26s var(--e-weich),transform .26s var(--e-aus);
  pointer-events:none;
}
.card:hover .card__daten,.card:focus-visible .card__daten{opacity:1;transform:none}
.card__daten em{font-style:normal;color:var(--blue)}

/* =========================================================================
   6 · Kaufkasten als Geraetefenster
   ====================================================================== */
.buybox{position:relative}
.buybox::before,.buybox::after{
  content:"";position:absolute;width:13px;height:13px;
  border:1px solid rgba(143,216,255,.4);pointer-events:none;
}
.buybox::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.buybox::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* =========================================================================
   7 · Ruhemodus
   ====================================================================== */
body.rm canvas.raster{opacity:.28}
body.rm .rv.in.sec-h::after,body.rm .sec-h.rv-scan.in::after{animation:none;opacity:0}
body.rm .card__winkel{transition:none}
body.rm .card__daten{transition:none}
body.rm .hud__pegel span{transition:none}

@media (prefers-reduced-motion:reduce){
  .rv.in.sec-h::after,.sec-h.rv-scan.in::after{animation:none;opacity:0}
  .card__winkel,.card__daten{transition:none}
}


/* ====== Motion-Ebene v5 (aus motion/v5/motion5.css) ====== */
/* ===========================================================================
   Motion-Ebene v5 — Telefon und Tablet.
   Bis hierher war alles fuer grosse Schirme gebaut. Diese Ebene gibt kleinen
   Geraeten eine eigene Bedienung statt einer geschrumpften.

   Setzt v1 bis v4 voraus. Kein schliessendes style-Tag in dieser Datei.
   =========================================================================== */

/* =========================================================================
   1 · Kopfzeile bleibt einzeilig, Navigation wandert nach unten
   Vorher brach die Navigation auf eine zweite Zeile um und die klebende
   Kopfzeile frass 110 Pixel Hoehe — auf einem Telefon ein Fuenftel des Bildes.
   ====================================================================== */
@media (max-width:620px){
  .top .wrap{height:56px;flex-wrap:nowrap;gap:12px;padding-top:0;padding-bottom:0}
  .top .nav{display:none}
  body.gescrollt .top .wrap{height:50px}
  body{padding-bottom:54px}
}

/* Untere Leiste als echte Navigation — im selben HUD-Ton wie am Rechner */
.mob{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;
  background:rgba(8,9,10,.96);
  border-top:1px solid var(--line);
  backdrop-filter:blur(10px);
  padding-bottom:env(safe-area-inset-bottom,0);
}
@media (max-width:620px){ .mob{display:block} }

.mob__reihe{display:flex}
.mob a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:54px;padding:8px 4px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;
  border-right:1px solid var(--line-soft);
  position:relative;
}
.mob a:last-child{border-right:0}
.mob a:hover,.mob a:active{text-decoration:none;color:var(--fg)}
.mob a.an{color:var(--blue)}
.mob a.an::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:2px;background:var(--blue);
}
.mob svg{display:block;width:17px;height:17px;flex:none}

/* =========================================================================
   2 · Karten ohne Zeigegeraet
   Auf Touch gibt es kein :hover — der Datenstreifen wuerde nie erscheinen.
   ====================================================================== */
@media (hover:none){
  .card__daten{opacity:1;transform:none;
    background:linear-gradient(0deg,rgba(8,9,10,.94),rgba(8,9,10,.55) 76%,transparent)}
  .card__winkel{opacity:.4;transform:none}
  .card:active .card__winkel{opacity:1}
  .card .art::after{display:none}   /* Abspielkopf braucht einen Zeiger */
}

/* =========================================================================
   3 · Signalkette als Schrittfolge
   Im Fluss-Modus zeigte sie nur den Endzustand — die Geschichte fiel weg.
   Auf kleinen Schirmen wird daraus eine Folge zum Antippen.
   ====================================================================== */
@media (max-width:900px), (max-height:700px){
  .kette__schritte li{
    opacity:.4;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .kette__schritte li.an{opacity:1}
  .kette__schritte li::after{transform:scaleY(0)}
  .kette__schritte li.an::after{transform:scaleY(1)}
  .kette__buehne{order:-1;margin-bottom:4px}
  .kette__grid{display:flex;flex-direction:column}
  .kette__schritte li:focus-visible{outline:2px solid var(--green);outline-offset:2px}
}

/* =========================================================================
   4 · Kaufleiste auf Produktseiten
   Auf dem Telefon steht der Preis ganz oben und der Rest der Seite ist lang.
   Diese Leiste holt ihn zurueck, sobald der Kaufkasten aus dem Bild ist.
   ====================================================================== */
.kaufleiste{
  position:fixed;left:0;right:0;bottom:54px;z-index:59;
  display:none;align-items:center;gap:14px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  background:rgba(14,20,24,.97);
  border-top:1px solid var(--line);
  backdrop-filter:blur(10px);
  transform:translateY(120%);
  transition:transform .32s var(--e-aus);
}
.kaufleiste.an{transform:none}
@media (max-width:620px){ .kaufleiste{display:flex} }
.kaufleiste__text{min-width:0;flex:1}
.kaufleiste__nm{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kaufleiste__pr{font-family:var(--mono);font-size:17px;color:var(--blue);line-height:1.2}
.kaufleiste .btn{padding:12px 18px;flex:none}

/* =========================================================================
   5 · Feinschliff auf kleinen Schirmen
   ====================================================================== */
@media (max-width:620px){
  .hero{padding:44px 0 130px}
  .hero h1{font-size:clamp(30px,8.4vw,42px)}
  .hero .lead{font-size:16px}
  .hero .cta{gap:10px}
  .hero .cta .btn{flex:1;justify-content:center;min-width:0}
  .btn{padding:14px 18px}                       /* Tippflaeche mind. 44 px */
  section{padding:40px 0}
  .wrap{padding:0 18px}
  .lead{font-size:16px}
  .prod{padding:26px 0}
  .prod .visual{aspect-ratio:4/3}
  .specs th{width:40%;padding-right:14px}
  .doc{padding:36px 0 12px}
  footer{padding:40px 0 30px}
  .kap{display:none}
}

/* Sehr schmal: Zahlenwerte nicht umbrechen lassen */
@media (max-width:380px){
  .buybox .p{font-size:23px}
  .mob a{font-size:8px;letter-spacing:.06em}
}

/* =========================================================================
   6 · Tippflächen
   An der Live-Adresse gemessen: die Navigationslinks waren 18 Pixel hoch,
   22 Ziele unter der 44-Pixel-Marke. Auf einem Tablet ist das zu wenig.
   Die Höhe kommt über Polsterung, nicht über Schriftgröße — das Aussehen
   bleibt gleich, nur die Trefferfläche wächst.
   ====================================================================== */
.nav a{
  display:inline-flex;align-items:center;
  padding:13px 4px;margin:-13px 0;      /* 18 px → 44 px, ohne Layoutversatz */
}
footer li a{display:inline-block;padding:5px 0;margin:-5px 0}   /* → 28 px */
footer li{margin-bottom:9px}
.rm-schalter{padding:12px 15px}                                  /* → 44 px */
.kap a{padding:6px;margin:-6px}                                  /* → 21 px */
.mob a{min-height:54px}                                          /* bereits ok */

/* Auf schmalen Schirmen zählt es doppelt */
@media (max-width:620px){
  .doc ul li a,.card .price{padding:2px 0}
}

/* =========================================================================
   7 · Ruhemodus
   ====================================================================== */
body.rm .kaufleiste{transition:none}
@media (prefers-reduced-motion:reduce){ .kaufleiste{transition:none} }


/* ====== Motion-Ebene v6 (aus motion/v6/motion6.css) ====== */
/* ===========================================================================
   Motion-Ebene v6 — Gestaltung.

   Bis hierher war die Seite sauber, aber stimmlos: eine Schriftfamilie, eine
   Spalte, ein Grundton. Diese Ebene gibt ihr eine Anzeigeschrift mit Breite,
   bricht die starre Spalte auf und macht aus dem flachen Schwarz eine
   Oberflaeche.

   Setzt v1 bis v5 voraus. Kein schliessendes style-Tag in dieser Datei.
   =========================================================================== */

:root{
  --anzeige:"Archivo","Archivo Expanded",var(--sans);
  --grund-2:#0B0E11;          /* zweiter Sektionsgrund */
  --kante:rgba(255,255,255,.055);  /* Kantenlicht auf Flaechen */
}

/* =========================================================================
   1 · Anzeigeschrift
   Archivo im Breitschnitt: technisch, mit Präsenz, und weit weg von der
   Standardgrotesk, die auf jeder zweiten Seite steht. Die Mono bleibt die
   Stimme der Messwerte — sie war nie das Problem.
   ====================================================================== */
.hero h1,
.prod h1,
.doc h1,
.sec-h,
.card h3,
.kette__schritte b{
  font-family:var(--anzeige);
  font-variation-settings:"wdth" 116;
  font-weight:700;
  letter-spacing:-.014em;
}

.hero h1{
  font-variation-settings:"wdth" 121;
  font-weight:800;
  line-height:.96;
  letter-spacing:-.032em;
  max-width:13ch;
}
/* Die Groesse NUR ab Tablet setzen. v5 hatte fuer Telefone bereits
   clamp(30px,8.4vw,42px) definiert — steht aber frueher in der Datei und
   wuerde bei gleicher Spezifitaet von einer spaeteren Ebene ueberschrieben.
   Der Stapelpruefer hat genau das gemeldet. */
@media (min-width:621px){
  .hero h1{font-size:clamp(44px,7.4vw,88px)}
}
.hero h1 em{
  color:var(--blue);
  font-style:normal;
  /* Der betonte Teil laeuft schmaler — dadurch bekommt die Zeile Rhythmus,
     statt als ein Block zu stehen. */
  font-variation-settings:"wdth" 104;
}

.sec-h{font-size:clamp(24px,3.6vw,38px);line-height:1.06;letter-spacing:-.022em}
.prod h1{font-size:clamp(32px,5vw,54px);line-height:1;letter-spacing:-.028em}
.card h3{font-size:19px;font-variation-settings:"wdth" 110;letter-spacing:-.01em}
.doc h1{font-size:clamp(28px,4.4vw,44px);line-height:1.04}

/* Fliesstext etwas grosszuegiger — er trug vorher die ganze Last */
.lead{font-size:17.5px;line-height:1.62;color:#9FAAB3}
.hero .lead{font-size:19px;max-width:46ch;color:#A8B3BC}

/* Kennzeichnungen bekommen mehr Luft und einen Strich davor */
.lbl{position:relative;padding-left:26px}
.lbl::before{
  content:"";position:absolute;left:0;top:.52em;width:16px;height:1px;
  background:var(--blue);opacity:.55;
}

/* =========================================================================
   2 · Korn
   Reines Schwarz sieht auf grossen Schirmen aus wie ein Loch. Ein sehr
   feines Korn macht daraus eine Flaeche, die Licht haelt.
   ====================================================================== */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ body::after{opacity:.03} }

/* =========================================================================
   3 · Sektionen bekommen Rhythmus
   Vorher: gleiche Breite, gleiche Kante, gleicher Grund — die Seite las sich
   als ein einziges langes Feld.
   ====================================================================== */
main > section:nth-of-type(even){background:var(--grund-2)}
main > section{border-bottom:1px solid var(--line-soft);position:relative}

/* Kennzeichnung wandert auf breiten Schirmen in die Seitenspalte, wie auf
   einem Datenblatt. Der Text beginnt dadurch weiter innen und die starre
   Kante bricht auf. */
@media (min-width:1180px){
  main > section > .wrap{position:relative}
  main > section > .wrap > .lbl{
    position:absolute;left:-172px;top:6px;width:150px;
    text-align:right;padding-left:0;margin:0;
  }
  main > section > .wrap > .lbl::before{left:auto;right:0;top:-14px;width:34px}
  main > section > .wrap{padding-left:24px}
}

/* =========================================================================
   4 · Kopfbereich
   Unter den Knöpfen standen 200 Pixel Leere. Eine Datenzeile schliesst den
   Block ab und sagt nebenbei das Wichtigste.
   ====================================================================== */
.hero{padding:72px 0 0}
.hero .cta{margin-top:38px}

.hero__daten{
  display:flex;flex-wrap:wrap;gap:0;margin-top:64px;
  border-top:1px solid var(--line);
}
.hero__daten div{
  flex:1 1 0;min-width:150px;padding:18px 22px 22px 0;
  border-right:1px solid var(--line-soft);
}
.hero__daten div:last-child{border-right:0}
.hero__daten b{
  display:block;font-family:var(--anzeige);font-variation-settings:"wdth" 112;
  font-weight:700;font-size:23px;color:var(--fg);line-height:1.1;
  letter-spacing:-.015em;
}
.hero__daten span{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
@media (max-width:620px){
  .hero__daten{margin-top:40px}
  .hero__daten div{flex-basis:50%;padding:14px 14px 16px 0}
  .hero__daten div:nth-child(2){border-right:0}
  .hero__daten b{font-size:19px}
}

/* =========================================================================
   5 · Aussagenband
   Ein Bruch über die volle Breite. Die Seite braucht eine Stelle, an der
   sie nicht argumentiert, sondern behauptet.
   ====================================================================== */
.band{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 180% at 50% 0%,rgba(143,216,255,.055),transparent 62%),
    var(--bg);
  padding:clamp(56px,9vw,110px) 0;text-align:center;position:relative;
}
.band p{
  font-family:var(--anzeige);font-variation-settings:"wdth" 108;
  font-weight:600;
  font-size:clamp(21px,3.1vw,34px);line-height:1.24;letter-spacing:-.018em;
  max-width:22ch;margin:0 auto;color:var(--fg);text-wrap:balance;
}
.band p em{font-style:normal;color:var(--blue)}
.band cite{
  display:block;margin-top:22px;font-style:normal;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}

/* =========================================================================
   6 · Flaechen bekommen eine Kante
   Ein Kasten ohne Kantenlicht liegt nicht auf der Seite, er ist ein Loch
   darin. Eine helle Linie oben genügt.
   ====================================================================== */
.card,.buybox,.demo__buehne,.demo__regler,.kette__buehne,.player,.doc .box{
  background-image:linear-gradient(180deg,var(--kante) 0 1px,transparent 1px);
}
.buybox,.demo__buehne,.demo__regler,.kette__buehne{
  box-shadow:0 1px 0 rgba(0,0,0,.45), 0 14px 34px -22px rgba(0,0,0,.9);
}

/* =========================================================================
   7 · Produktkarten als Geräteblenden
   ====================================================================== */
.cards{gap:20px;align-items:start}
.card{
  background:linear-gradient(180deg,#0F161B 0%,#0B1014 100%);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.95);
}
/* Versetzt statt in Reih und Glied — der Blick bekommt einen Weg */
@media (min-width:861px){
  .cards > .card:nth-child(2){margin-top:34px}
  .cards > .card:nth-child(3){margin-top:16px}
}

.card .art{
  aspect-ratio:4/3;
  background:
    radial-gradient(120% 150% at 50% 0%,rgba(143,216,255,.06),transparent 60%),
    #090D10;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 14px rgba(0,0,0,.7);
}
.card .art::before{
  /* Feine Zeilenstruktur — die Fläche liest sich als Bildschirm, nicht als Feld */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
}
.card .kind{
  background:rgba(8,9,10,.86);backdrop-filter:blur(3px);
  border-color:#26333B;
}
.card .body{padding:18px 20px 20px;gap:8px}
.card p{font-size:14.5px;line-height:1.55}

/* Preis als geprägtes Schild statt als Zeile */
.card .price{
  border-top:1px solid var(--line);margin-top:10px;padding-top:12px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:17px;font-variant-numeric:tabular-nums;
}
.card .price::after{
  content:"→";color:var(--faint);font-size:15px;
  transition:transform .3s var(--e-aus),color .3s;
}
.card:hover .price::after{transform:translateX(5px);color:var(--blue)}

/* =========================================================================
   8 · Knöpfe mit mehr Gewicht
   ====================================================================== */
.btn{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  padding:15px 24px;
}
.hero .cta .btn{padding:17px 28px;font-size:12px}
.btn:not(.ghost){box-shadow:0 10px 26px -14px rgba(143,216,255,.55)}

/* =========================================================================
   9 · Ruhemodus
   ====================================================================== */
body.rm .card:hover .price::after{transform:none}


/* ====== Motion-Ebene v7 (aus motion/v7/motion7.css) ====== */
/* ===========================================================================
   Motion-Ebene v7 — Cover, Fußbereich, Zustand in der Navigation.

   Bis hierher bestand die Seite ausschliesslich aus gezeichneten Linien. Das
   war stimmig, aber duenn: eine Produktseite ohne Bild verkauft nichts. Die
   Cover sind erzeugt statt fotografiert — sie zeigen das Signal, das das
   jeweilige Produkt ausmacht.

   Setzt v1 bis v6 voraus. Kein schliessendes style-Tag in dieser Datei.
   =========================================================================== */

/* =========================================================================
   1 · Cover auf den Produktkarten
   ====================================================================== */
.card .art{overflow:hidden}
.card .art .cover{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 52%;
  z-index:0;
  transform:scale(1.02);
  transition:transform 1.1s var(--e-aus),filter .5s var(--e-weich);
  filter:saturate(.92) contrast(1.04);
}
.card:hover .art .cover,.card:focus-visible .art .cover{
  transform:scale(1.06);
  filter:saturate(1.05) contrast(1.08);
}
/* Die gezeichnete Signatur liegt jetzt ueber dem Bild — leiser, sie ist
   Bewegung, nicht Motiv. */
.card canvas.sig{opacity:.42;mix-blend-mode:screen}
/* Das kleine Symbol wird nicht mehr gebraucht, das Cover traegt die Marke */
.card .art > svg{display:none}
/* Unterkante abdunkeln, damit der Datenstreifen immer lesbar bleibt */
.card .art::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(0deg,rgba(6,8,10,.92),transparent);
  z-index:1;pointer-events:none;
  /* v4 hatte hier den Abspielkopf — der wandert eine Ebene tiefer */
  width:auto;top:auto;opacity:1;animation:none;
}
.card:hover .art::after{animation:none}
.card .art .kind{z-index:3}
.card .card__daten{z-index:4}

/* Abspielkopf wandert auf einen eigenen Träger, damit der Verlauf oben bleibt */
.card__kopf{
  position:absolute;top:0;bottom:0;width:1px;left:0;z-index:2;opacity:0;
  background:linear-gradient(180deg,transparent,var(--green),transparent);
  pointer-events:none;
}
.card:hover .card__kopf,.card:focus-visible .card__kopf{
  animation:kopf 1.9s var(--e-weich) infinite;
}
body.rm .card:hover .card__kopf{animation:none;opacity:0}

/* =========================================================================
   2 · Cover auf den Produktseiten
   ====================================================================== */
.prod .visual{position:relative;overflow:hidden;padding:0}
.prod .visual .cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) contrast(1.04);
}
.prod .visual > svg{display:none}
.prod .visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}

/* =========================================================================
   3 · Fußbereich bekommt ein Ende
   Vorher lief die Seite einfach aus. Eine grosse, leise Wortmarke schliesst
   sie ab — dieselbe Geste wie eine Rückseite auf einer Plattenhülle.
   ====================================================================== */
.fuss__marke{
  margin-top:52px;padding-top:34px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
}
.fuss__marke span{
  font-family:var(--anzeige);font-variation-settings:"wdth" 123;
  font-weight:800;
  font-size:clamp(38px,10.5vw,132px);line-height:.82;letter-spacing:-.045em;
  color:transparent;
  -webkit-text-stroke:1px #1F2A31;
  user-select:none;
}
.fuss__marke em{
  font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding-bottom:10px;white-space:nowrap;
}
@media (max-width:620px){
  .fuss__marke{margin-top:34px;padding-top:24px}
  .fuss__marke em{display:none}
}

/* =========================================================================
   4 · Navigation zeigt, wo man ist
   ====================================================================== */
.nav a{position:relative}
.nav a::after{
  content:"";position:absolute;left:4px;right:4px;bottom:8px;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--e-aus);
}
.nav a:hover::after,.nav a.hier::after{transform:scaleX(1)}
.nav a.hier{color:var(--blue)}
body.rm .nav a::after{transition:none}

/* =========================================================================
   5 · Ruhemodus
   ====================================================================== */
body.rm .card .art .cover{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .card .art .cover{transition:none}
  .card:hover .art .cover{transform:scale(1.02)}
  .card:hover .card__kopf{animation:none;opacity:0}
}


/* ====== Motion-Ebene v8 (aus motion/v8/motion8.css) ====== */
/* ===========================================================================
   Motion-Ebene v8 — Fotografie.

   Die Bilder sind auf die Markenskala gelegt (Duotone) und werden nur dort
   eingesetzt, wo sie etwas sagen: Geraete hinter einer Behauptung, ein Pult
   neben „von einer Person gebaut", ein Mischer beim Gratis-Pack.

   Setzt v1 bis v7 voraus. Kein schliessendes style-Tag in dieser Datei.
   =========================================================================== */

/* =========================================================================
   1 · Foto hinter dem Aussagenband
   ====================================================================== */
.band{overflow:hidden;isolation:isolate}
.band__foto{
  position:absolute;inset:-8% 0;width:100%;height:116%;
  object-fit:cover;z-index:-2;
  opacity:.5;
  will-change:transform;
}
.band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 130% at 50% 42%,rgba(8,9,10,.55),rgba(8,9,10,.94) 72%),
    linear-gradient(180deg,var(--bg),transparent 22%,transparent 78%,var(--bg));
}
.band p{position:relative}

/* =========================================================================
   2 · Über-Abschnitt wird zweispaltig
   ====================================================================== */
@media (min-width:861px){
  #about > .wrap{
    display:grid;grid-template-columns:1fr .82fr;gap:52px;align-items:center;
  }
  #about > .wrap > .lbl{grid-column:1;grid-row:1}
  #about > .wrap > .sec-h,#about > .wrap > .lead{grid-column:1}
  #about .about__bild{grid-column:2;grid-row:1 / span 4;align-self:stretch}
}
.about__bild{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  min-height:260px;
  box-shadow:0 22px 50px -30px rgba(0,0,0,.95);
}
.about__bild img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.4s var(--e-aus);
}
.about__bild:hover img{transform:scale(1.07)}
.about__bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 55%,rgba(8,9,10,.55)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
}
.about__bild figcaption{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
@media (max-width:860px){
  .about__bild{margin-top:26px;aspect-ratio:16/10;min-height:0}
}

/* =========================================================================
   3 · Gratis-Pack bekommt ein Band
   ====================================================================== */
#free{position:relative;overflow:hidden}
#free .free__foto{
  position:absolute;right:0;top:0;bottom:0;width:52%;
  object-fit:cover;z-index:0;opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%,#000 100%);
          mask-image:linear-gradient(90deg,transparent,#000 42%,#000 100%);
}
#free > .wrap{position:relative;z-index:1}
#free .lead{max-width:44ch}
@media (max-width:860px){
  #free .free__foto{width:100%;opacity:.2;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);
            mask-image:linear-gradient(180deg,transparent,#000 60%)}
}

/* =========================================================================
   4 · Zusammenhangsbild auf den Produktseiten
   ====================================================================== */
.kontext{
  position:relative;margin:0;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/9;
  background:var(--panel);
  box-shadow:0 20px 46px -30px rgba(0,0,0,.95);
}
.kontext img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.4s var(--e-aus);
}
.kontext:hover img{transform:scale(1.06)}
.kontext::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 52%,rgba(8,9,10,.72)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
}
.kontext figcaption{
  position:absolute;left:16px;right:16px;bottom:13px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}
.kontext figcaption em{font-style:normal;color:var(--blue)}

/* =========================================================================
   5 · Ruhemodus
   ====================================================================== */
body.rm .band__foto{transform:none!important}
body.rm .about__bild img,body.rm .kontext img{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .about__bild img,.kontext img{transition:none}
  .about__bild:hover img,.kontext:hover img{transform:scale(1.03)}
}


/* ====== Motion-Ebene v9 (aus motion/v9/motion9.css) ====== */
/* ===========================================================================
   Motion-Ebene v9 — Kopfbereich mit Foto.

   Der Modularsynth liegt hinter der Überschrift, die gezeichnete Welle
   darüber. Das ist der Kern der Marke in einem Bild: das Signal, über das
   Gerät gelegt, aus dem es kommt.

   Setzt v1 bis v8 voraus. Kein schliessendes style-Tag in dieser Datei.
   =========================================================================== */

.hero{isolation:isolate}

.hero__foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  z-index:0;
  /* .42 war gemessen zu dunkel — im Aufbau lag der hellste Punkt der rechten
     Bildhaelfte bei 46 von 255, das Geraet war nur noch ein Fleck. */
  opacity:.55;
  filter:saturate(1.02) contrast(1.06);
  /* 8 % Uebergroesse: der Parallaxversatz darf bis 3 % laufen, ohne dass
     eine Kante frei wird. Ohne diese Reserve blitzt beim Scrollen der
     Seitengrund unter dem Bild durch. */
  transform:scale(1.08);
  will-change:transform;
}
/* Kein "erst unsichtbar, dann per Skript einblenden" — sonst haengt das
   Bild daran, dass motion9.js laedt. Ein Bild, das noch nicht da ist,
   malt ohnehin nichts; der Kopfbereich bleibt so lange einfach schwarz. */

/* Schleier: links deckend, damit die Überschrift steht; nach rechts offen,
   damit das Gerät sichtbar bleibt. Oben und unten weich gegen die Seite. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg) 0 12%,rgba(8,9,10,.90) 32%,rgba(8,9,10,.50) 56%,rgba(8,9,10,.22) 100%),
    linear-gradient(180deg,var(--bg) 0,transparent 13%,transparent 66%,var(--bg) 100%);
}

/* Die Welle liegt ÜBER dem Foto — sie ist die Zeichnung auf dem Gerät.
   v1 setzt z-index mit !important, also hier ebenso. */
canvas.osz{z-index:2!important;opacity:.95!important}
.hero .wrap{z-index:3}

/* Auf dem Foto braucht der Fließtext mehr Tinte als auf blankem Schwarz */
.hero .lead{color:#B6C2CB}
.hero__daten span{color:#7E8A93}

/* Schmale Schirme: das Foto rutscht nach unten, wo auch die Welle sitzt */
@media (max-width:900px){
  .hero__foto{opacity:.38;object-position:78% 50%}
  .hero::before{
    background:
      linear-gradient(180deg,var(--bg) 0 6%,rgba(8,9,10,.88) 28%,rgba(8,9,10,.62) 68%,var(--bg) 100%);
  }
}

/* =========================================================================
   Ruhemodus
   ====================================================================== */
body.rm .hero__foto{transform:none!important}