/* 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);
}
/* Groesser gestellt, gemeinsam mit der Kopfleiste der Startseite.
   Eine Leiste, die man uebersieht, hat keinen Zweck. */
.top .wrap{display:flex;align-items:center;gap:24px;height:76px}
.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:16px;
  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:13.5px}
.brand:hover{text-decoration:none}
.nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav a{
  font-family:var(--mono);font-size:13.5px;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(auto-fit,minmax(228px,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}
}

/* ---------- Noch nicht fertig ---------- */
.soon{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);padding:3px 8px;display:inline-block;
}
.card .soon{align-self:flex-start;margin-top:auto}
.buybox .soon{margin-bottom:14px}
.buybox .why{font-size:13.5px;color:var(--dim);margin-top:14px;line-height:1.55}

/* ---------- Spielbare Demo ---------- */
.demo{border:1px solid var(--line);background:var(--panel);margin-top:26px}
.demo canvas{
  display:block;width:100%;aspect-ratio:16/9;background:var(--bg);
  border-bottom:1px solid var(--line);touch-action:none;cursor:pointer;
}
.demo canvas:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
.demo__bar{
  display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
}
.demo__bar .btn{padding:9px 18px;font-size:11px}
.demo__reg{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.demo__reg input[type=range]{
  width:104px;accent-color:#8FD8FF;background:transparent;cursor:pointer;
}
.demo__reg b{
  color:var(--blue);font-weight:500;min-width:70px;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.demo__stand{
  margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums;
}
.demo__hint{
  padding:13px 18px 15px;font-family:var(--mono);font-size:11.5px;
  line-height:1.85;color:var(--faint);margin:0;
}
.demo__hint b{color:var(--dim);font-weight:500}
@media (max-width:640px){
  .demo__stand{margin-left:0;width:100%}
  .demo__reg input[type=range]{width:88px}
}

/* ---------- Fuer wen ---------- */
.fuer{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 18px}
.fuer li{
  position:relative;padding:6px 0 6px 18px;font-size:14px;color:var(--dim);
  font-family:var(--mono);letter-spacing:.01em;line-height:1.5;
}
.fuer li::before{content:"";position:absolute;left:0;top:13px;
  width:7px;height:1px;background:var(--blue)}

/* ---------- Schrittfolge mit Bildern ---------- */
.schritte{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.schritte figure{margin:0}
.schritte img{width:100%;display:block;border:1px solid var(--line)}
.schritte figcaption{
  font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--faint);
  margin-top:10px;
}
.schritte figcaption b{color:var(--dim);font-weight:500}
@media (max-width:720px){.schritte{grid-template-columns:1fr}}


/* ---------- Kostenloser Download mit Anmeldung ----------
   Der Kasten ersetzt die Kaufbox. Er sammelt eine Adresse und gibt dafuer
   das Geraet her - das ist der ganze Handel, und er steht so auch da.
   Kein Rot, kein Ausrufezeichen: Warnungen wandern hier ins Blau. */
.gratis{border:1px solid var(--line);background:var(--panel);padding:22px;margin-top:28px}
.gratis .p{font-family:var(--mono);font-size:26px;color:var(--green);
  letter-spacing:.04em;line-height:1}
.gratis .p em{font-style:normal;color:var(--faint);font-size:13px;
  letter-spacing:.16em;display:block;margin-top:8px;text-transform:uppercase}
.gratis__feld{margin-top:18px}
/* Nur die Feldbeschriftung ist Versalien-Mono. Der Einwilligungstext
   darunter ist ebenfalls ein <label> - er muss lesbar bleiben, sonst
   steht die Rechtsgrundlage in Grossbuchstaben da und niemand liest sie. */
.gratis__feld label{display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.gratis input[type=email]{width:100%;box-sizing:border-box;background:var(--bg);
  border:1px solid var(--line);color:var(--fg);font:400 15px/1.4 var(--mono);
  padding:12px 13px;border-radius:0;outline:none;transition:border-color .2s}
.gratis input[type=email]:focus{border-color:var(--blue)}
.gratis input[type=email]::placeholder{color:var(--faint)}
.gratis__ok{display:flex;gap:10px;align-items:flex-start;margin-top:14px}
.gratis__ok input{margin:2px 0 0;accent-color:var(--blue);width:16px;height:16px;flex:none}
.gratis__ok span{font:400 12.5px/1.55 var(--sans);color:var(--dim)}
.gratis__ok a{color:var(--blue)}
.gratis .btn{margin-top:16px;width:100%;justify-content:center}
.gratis__klein{font-size:12px;color:var(--faint);margin-top:12px;line-height:1.6}
.gratis__mld{margin-top:16px;border:1px solid var(--line);border-left:2px solid var(--blue);
  background:var(--panel-2);padding:13px 15px;font:400 13px/1.6 var(--sans);color:var(--dim)}
.gratis__mld b{color:var(--fg);font-weight:500}
.gratis ul{list-style:none;margin:18px 0 0;padding:0}
.gratis li{position:relative;padding:9px 0 9px 18px;font:400 13px/1.5 var(--sans);
  color:var(--dim);border-top:1px solid var(--line-soft)}
.gratis li:first-child{border-top:0}
.gratis li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;
  background:var(--green)}

/* Spende: bewusst leise, unter dem Download und nicht daneben. */
.spende{border:1px solid var(--line-soft);background:var(--panel);padding:20px 22px;
  margin-top:22px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.spende p{margin:0;font:400 13.5px/1.65 var(--sans);color:var(--dim);flex:1 1 320px}
.spende p b{color:var(--fg);font-weight:500}
.spende .btn{flex:none}


/* ---------- Free / Pro ---------- */
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;align-items:start}
.wahl .gratis{margin-top:0}
/* Seit 17.9.2026 hat ein Bezahlgeraet nur noch EINE Karte (keine Demo daneben).
   Eine halbe Zeile mit leerer rechter Haelfte sieht aus wie ein Ladefehler —
   also nimmt die einzige Karte die volle Breite und bekommt eine Obergrenze,
   damit die Zeilen nicht zu lang zum Lesen werden. */
.wahl:has(> .gratis:only-child){grid-template-columns:minmax(0,560px)}
/* Im Kopf ist die Spalte schmal - dort untereinander */
.wahl.hoch{grid-template-columns:1fr}
.gratis.pro{border-color:rgba(95,227,168,.35)}
.gratis.pro .p{color:var(--green)}
.gratis.pro .btn{margin-top:16px;width:100%;justify-content:center}
.specs.vergleich td.k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.specs.vergleich td.k.pro{color:var(--green)}
.unlock-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;max-width:820px}
.unlock-schritte div{border:1px solid var(--line);background:var(--panel);padding:16px 16px 18px;
  display:flex;gap:12px;align-items:flex-start}
.unlock-schritte b{font-family:var(--mono);font-size:22px;line-height:1;color:var(--blue);font-weight:500}
.unlock-schritte span{font:400 13.5px/1.55 var(--sans);color:var(--dim)}
.unlock-schritte i{font-style:normal;color:var(--fg);font-family:var(--mono);font-size:12px;
  border:1px solid var(--line);padding:1px 5px}
.demo__pro{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.demo__pro input[type=text]{background:var(--bg);border:1px solid var(--line);color:var(--fg);
  font:400 12px/1.4 var(--mono);letter-spacing:.06em;padding:7px 10px;width:250px;
  border-radius:0;outline:none;text-transform:uppercase}
.demo__pro input[type=text]:focus{border-color:var(--blue)}
.demo__prostand{font:400 12px/1.5 var(--sans);color:var(--dim);flex:1 1 260px}
.demo.ist-pro .demo__prostand{color:var(--green)}
@media (max-width:760px){
  .wahl,.unlock-schritte{grid-template-columns:1fr}
  .demo__pro input[type=text]{width:100%}
}


/* ---------- Setlisten in der Demo ---------- */
.demo__sets{gap:6px}
.demo__sets button{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  background:transparent;border:1px solid var(--line);padding:8px 10px;cursor:pointer;margin-left:6px}
.demo__sets button[aria-pressed=true]{color:var(--bg);background:var(--blue);border-color:var(--blue)}

/* ---------- Drei Buehnen ---------- */
.szenen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.szene{border:1px solid var(--line);background:var(--panel);padding:16px 18px 20px}
.szene svg{display:block;width:100%;height:auto;background:var(--bg);border:1px solid var(--line-soft);margin-bottom:14px}
.szene svg *{fill:none;stroke:var(--fg);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.szene svg rect:not(.schirm){fill:var(--fg);stroke:none}
.szene svg .dim{stroke:var(--faint)}
.szene svg .licht{stroke:var(--blue);opacity:.5;stroke-dasharray:3 4}
.szene svg .schirm{fill:var(--panel-2);stroke:var(--blue)}
.szene svg .ziffer{fill:var(--green);stroke:none;font:600 13px ui-monospace,monospace;text-anchor:middle}
.szene b{display:block;font:600 15px/1.3 var(--sans);color:var(--fg);margin-bottom:6px}
.szene p{font:400 13.5px/1.6 var(--sans);color:var(--dim);margin:0}
@media (max-width:760px){.szenen{grid-template-columns:1fr}}

/* ---------- What's new ---------- */
.neu{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.neu div{border:1px solid var(--line);background:var(--panel);padding:14px 16px 16px}
.neu b{display:block;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.neu span{font:400 13.5px/1.55 var(--sans);color:var(--dim)}
@media (max-width:760px){.neu{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{margin-top:22px;border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;
  font:500 15px/1.4 var(--sans);color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 20px/1 var(--mono);color:var(--blue)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0;padding:0 0 18px;font:400 14px/1.65 var(--sans);color:var(--dim);max-width:70ch}
.faq code{font-family:var(--mono);font-size:12.5px;color:var(--fg)}

/* 0.4: Hinweis auf das Neue, direkt in der Kopfzeile des Produkts */
.prod .kind .kind__neu{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(143,216,255,.35)}
.prod .kind .kind__neu:hover{border-bottom-color:var(--blue)}
#stage .leiste{margin:22px 0 0}
#stage .leiste img{width:100%;height:auto;display:block;border:1px solid var(--line)}
#stage .leiste figcaption{margin-top:8px}

/* ====== Produktseite, zweite Fassung (16.9.2026): kurz, visuell, ein Screenshot als Held ======
   Muster wie bei den Guten (Hero + eine Zeile, großes Bild, drei bis vier Kacheln, Zahlen, Get).
   Präfix pz- ist neu — gegen alle Ebenen gegrept. */
.pz-hero{padding:64px 0 28px;text-align:center}
.pz-hero .kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.pz-hero h1{font-size:clamp(40px,7vw,84px);line-height:.95;letter-spacing:-.03em;margin:14px 0 18px}
.pz-hero .pz-satz{font-size:clamp(17px,1.9vw,22px);line-height:1.45;color:var(--dim);max-width:34ch;margin:0 auto}
.pz-hero .pz-satz b{color:var(--fg);font-weight:500}
.pz-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.pz-cta .pz-klein{flex-basis:100%;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.pz-held{margin:26px calc(50% - 50vw) 0;padding:0 18px}
.pz-held figure{max-width:1180px;margin:0 auto;border:1px solid var(--line);background:var(--panel);
  box-shadow:0 60px 120px -60px rgba(0,0,0,.9),0 0 0 1px rgba(143,216,255,.06) inset}
.pz-held img{display:block;width:100%;height:auto}
.pz-held figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:10px 14px;border-top:1px solid var(--line-soft)}
.pz-kacheln{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.pz-k{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:0;overflow:hidden;display:flex;flex-direction:column}
.pz-k .pz-bild{aspect-ratio:16/10;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line-soft);position:relative}
.pz-k .pz-bild img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:transform .6s var(--e-aus,ease),opacity .4s}
.pz-k:hover .pz-bild img{transform:scale(1.03);opacity:1}
.pz-k .pz-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,0) 60%,rgba(8,9,10,.55))}
.pz-k b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);padding:16px 18px 0}
.pz-k p{margin:8px 18px 18px;font-size:15px;line-height:1.5;color:var(--dim)}
.pz-k p strong{color:var(--fg);font-weight:500}
.pz-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);margin-top:8px}
.pz-zahlen div{background:var(--panel);padding:22px 18px}
.pz-zahlen b{display:block;font-family:var(--mono);font-size:clamp(26px,3vw,38px);font-weight:600;color:var(--fg);letter-spacing:-.02em}
.pz-zahlen span{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pz-zahlen div:first-child b{color:var(--green)}
.pz-zeile{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px 20px;border:1px solid var(--line);background:var(--panel);margin-top:8px}
.pz-zeile p{margin:0;font-size:14px;color:var(--dim);max-width:60ch}
@media (max-width:820px){.pz-kacheln{grid-template-columns:1fr}.pz-zahlen{grid-template-columns:repeat(2,1fr)}.pz-hero{padding-top:44px}}
@media (max-width:760px){.pz-held{margin:22px -18px 0;padding:0}}

/* ====== Bühne (16.9.2026): das Gerät steht vor seinem eigenen, unscharfen Abbild ======
   Muster wie bei Hypnus: volle Breite, das Bild selbst als weichgezeichneter Hintergrund,
   davor das scharfe Gerät mit tiefem Schatten. Kaltlicht: keine Rundungen, kein Rot. */
.pz-buehne{position:relative;margin:0 calc(50% - 50vw);padding:0 0 34px;overflow:hidden;isolation:isolate}
.pz-buehne__hg{position:absolute;inset:-12% -6%;z-index:-1;pointer-events:none;
  filter:blur(34px) saturate(1.25) brightness(.42);transform:translate3d(0,var(--para,0px),0) scale(1.08);will-change:transform}
.pz-buehne__hg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.pz-buehne::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0,rgba(8,9,10,.35) 22%,rgba(8,9,10,.25) 70%,var(--bg) 100%)}
.pz-buehne__i{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.pz-buehne .pz-hero{padding-top:74px}
.pz-buehne .pz-hero h1{text-shadow:0 8px 40px rgba(0,0,0,.6)}
.pz-buehne .pz-held{margin:30px calc(50% - 50vw) 0;padding:0 18px}
.pz-buehne .pz-held figure{box-shadow:0 90px 140px -70px rgba(0,0,0,1),0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(143,216,255,.08) inset;
  border-color:#26333B}
.pz-buehne .pz-held img{image-rendering:auto}
@media (max-width:760px){.pz-buehne__hg{filter:blur(22px) saturate(1.2) brightness(.4)}}

/* Reveal: erscheint beim Hineinscrollen, einmal, 24 px von unten. Ohne JS bleibt alles sichtbar. */
.js .pz-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--e-aus,cubic-bezier(.2,.7,.2,1)),transform .8s var(--e-aus,cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--v,0) * 90ms)}
.js .pz-reveal.an{opacity:1;transform:none}
.js .pz-staffel .pz-reveal:nth-child(2){--v:1}.js .pz-staffel .pz-reveal:nth-child(3){--v:2}.js .pz-staffel .pz-reveal:nth-child(4){--v:3}
@media (prefers-reduced-motion:reduce){.js .pz-reveal{opacity:1;transform:none;transition:none}.pz-buehne__hg{transform:none!important}}

/* ====== Messprotokoll (16.9.2026) — /measured/ ======
   Laborbericht, kein Werbetext: Tabelle mit Soll und Ist, Monospace für Zahlen,
   offene Punkte gleichwertig sichtbar. Kaltlicht: keine Rundungen, kein Rot —
   ein nicht bestandener Test ist bernstein, nicht Alarm. */
.mp-kopf{padding:60px 0 26px}
.mp-kopf h1{font-size:clamp(32px,5.4vw,56px);line-height:1;letter-spacing:-.03em;margin-bottom:18px}
.mp-ver{font-family:var(--mono);font-size:.38em;font-weight:400;color:var(--faint);letter-spacing:.08em;vertical-align:.5em;margin-left:.3em}
.mp-meta{display:flex;gap:1px;background:var(--line-soft);border:1px solid var(--line);margin-top:30px;flex-wrap:wrap}
.mp-meta div{background:var(--panel);padding:16px 20px;flex:1;min-width:150px}
.mp-meta b{display:block;font-family:var(--mono);font-size:15px;color:var(--fg);font-weight:500}
.mp-meta span{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.mp-t{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px}
.mp-t th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:500;padding:0 14px 9px 0;border-bottom:1px solid var(--line)}
.mp-t td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--dim)}
.mp-t td:first-child{color:var(--fg);width:44%}
.mp-t .soll{font-family:var(--mono);font-size:12.5px;color:var(--faint);width:24%}
.mp-t .ist{font-family:var(--mono);font-size:13px;color:var(--green);font-variant-numeric:tabular-nums}
.mp-t tr.offen .ist{color:#E8B86D}
.mp-t tr.offen td:first-child::after{content:"open";font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#E8B86D;border:1px solid rgba(232,184,109,.4);padding:1px 6px;margin-left:9px;vertical-align:2px}
.mp-offen p{color:var(--dim);font-size:15px;line-height:1.6;border-left:2px solid #E8B86D;padding-left:16px;margin-top:14px;max-width:72ch}
.mp-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);margin-top:8px}
.mp-k{display:block;background:var(--panel);padding:26px 24px;text-decoration:none;transition:background .2s}
.mp-k:hover{background:var(--panel-2);text-decoration:none}
.mp-k b{display:block;font-family:var(--mono);font-size:22px;letter-spacing:.06em;color:var(--fg);font-weight:500}
.mp-k__art{display:block;margin-top:8px;font-size:13.5px;color:var(--dim)}
.mp-k__lauf{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
/* Verweis von der Produktseite auf das Protokoll */
.mp-band{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:20px 22px;border:1px solid rgba(95,227,168,.28);background:linear-gradient(180deg,rgba(95,227,168,.05),transparent);margin-top:8px}
.mp-band p{margin:0;font-size:14.5px;color:var(--dim);max-width:62ch}
.mp-band p b{color:var(--green);font-weight:500}
@media (max-width:820px){.mp-liste{grid-template-columns:1fr}.mp-t td:first-child{width:auto}.mp-t .soll{display:none}}


/* ====== Fuer wen — Zeile eins (18.9.2026) ======
   Labelregel 2: fuer wen, und fuer wen nicht, steht ganz oben. Im zentrierten
   Produkt-Hero mittig, sonst linksbuendig mit gruenem Balken. Kein Rot, keine
   Rundung. */
.pz-fuer{font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:.02em;
  color:var(--fg);max-width:64ch;margin:18px auto 0;padding-left:14px;
  border-left:2px solid var(--green);text-align:left}
.pz-fuer em{font-style:normal;color:var(--faint)}
.pz-fuer b{font-weight:400;color:var(--fg)}
.pz-hero .pz-fuer{margin-left:auto;margin-right:auto}
:not(.pz-hero) > .pz-fuer{margin-left:0}

/* ====== Was NICHT gemessen ist (18.9.2026) ======
   Gehoert unter jede Zahlentafel. Das ist der Teil, den sonst niemand zeigt —
   deshalb steht er auf der Seite und nicht nur im Testbericht. Blau, weil
   Kaltlicht keine Warnfarbe kennt. */
.pz-offen{border:1px solid var(--line);border-top:0;background:var(--panel);margin-top:0}
.pz-offen > .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);padding:12px 18px 10px;
  border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.pz-offen ul{list-style:none;margin:0;padding:0}
.pz-offen li{display:flex;gap:18px;align-items:baseline;justify-content:space-between;
  padding:11px 18px;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--dim)}
.pz-offen li:last-child{border-bottom:0}
.pz-offen li span{font-family:var(--mono);font-size:12.5px;color:var(--blue);
  letter-spacing:.03em;text-align:right;flex:none;max-width:52%}
@media (max-width:620px){
  .pz-offen li{flex-direction:column;gap:4px}
  .pz-offen li span{text-align:left;max-width:100%}
}


/* ====== 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}


/* ====== Ebene v10 · Auswahl der Sektionsentwuerfe ====== */

/* Die neuen Sektionen bringen ihre eigenen Abstaende mit. Die Grundregel fuer
   <section> wuerde sie ein zweites Mal polstern und einen Strich ziehen.

   Die Huelle hiess zuerst `.ab` — und genau so heisst schon der A/B-Hoer-
   vergleich aus Ebene v3: `display:flex; width:fit-content; border:1px`.
   Jede Sektion der Startseite war dadurch nur so breit wie ihr Inhalt und
   rechts sichtbar abgeschnitten. Im Quelltext sah alles richtig aus; erst die
   Messung im Browser hat es gezeigt. Klassenname deshalb eindeutig gemacht. */
main > section.sekt{padding:0;border-bottom:0;background:none;display:block;
  width:auto;border:0;margin:0}

/* Kopfleiste: auf der Schauseite stand sie still, in der Seite klebt sie. */
.n7{position:sticky;top:0;z-index:900;
  background:rgba(8,9,10,.86);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)}
body.gescrollt .n7{border-bottom-color:var(--line)}

/* Der Fussbereich der Auswahl bringt seinen eigenen Rahmen mit — die
   Grundregel fuer <footer> setzt sonst noch einen Innenabstand obendrauf. */
body > footer.g8{padding-top:38px;padding-bottom:34px}

/* Die neue Navigation traegt weiter die Klasse `nav`, damit der weiche Sprung
   aus v7 sie findet. Damit erbt sie aber auch die Grundregeln der ALTEN
   Leiste — Monoschrift, Versalien, 22 px Abstand. Das faellt nicht als Fehler
   auf, es sieht nur ploetzlich anders aus als im Entwurf. Also hier gezielt
   zuruecknehmen, statt die Klasse wegzulassen und den Sprung zu verlieren. */
.n7 .nav{margin-left:auto;gap:6px;flex-basis:auto;align-items:center}
.n7 .nav a{font-family:var(--sans);font-size:12px;letter-spacing:normal;
  text-transform:none;color:inherit}
.n7 .nav a b{text-transform:none;letter-spacing:normal}
@media (max-width:760px){
  .n7 .nav{margin-left:0;flex-basis:100%;flex-wrap:wrap}
}

/* Kontrast der kleinen Auszeichnungsschrift.

   Gemessen am echten Bildpunkt lag `--faint` (#5F6B73) bei 3,64 : 1 gegen den
   Seitengrund. Verlangt sind 4,5 : 1, weil die Schrift nur 10 bis 11 px gross
   ist — und das betrifft jede Sektionsmarke, jede Datenzeile und den
   Feintext im Fussbereich, also die Stellen, die ohnehin schwer zu lesen sind.

   #6E7C86 bringt 5,05 : 1 auf dem Seitengrund und 4,5 : 1 auf den dunklen
   Karten. Die Marke wirkt dadurch kaum heller, ist aber lesbar. */
:root{--faint:#77848E}

/* Zehn- und elfstellige Auszeichnungsschrift reicht mit --faint immer noch
   nicht ueber 4,5 : 1, wenn sie auf einer dunklen Karte statt auf dem
   Seitengrund steht. Statt den Farbwert immer weiter aufzuhellen — was das
   ganze Bild flau macht — bekommt genau diese Groesse den naechsthelleren
   Ton. Gemessen 6,1 : 1 auf der dunkelsten Karte. */
.lbl,
.k1__s .lbl,.b4__wer span,.f9__l span,.f9__n span,.c6__s span,.g8__fein{
  color:var(--dim)}

/* Die Kapitelspur rechts: 21 px hohe Ziele. Zeigegeraete brauchen 24. */
.kap a{padding:8px;margin:-8px}

/* Die Leiste am unteren Rand auf dem Handy (Ebene v5): gemessen 18 px hohe
   Ziele. Das ist genau die Leiste, die man mit dem Daumen bedient. */
.mob a{min-height:48px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px}

/* Zeilenlaenge auf den Rechtsseiten und im Gratis-Text. Gemessen 81 bis 88
   Zeichen je Zeile — ab etwa 80 verliert das Auge beim Ruecksprung die Zeile,
   und ausgerechnet Lizenz und Widerruf will man nicht zweimal lesen muessen. */
.doc p,.doc li,.doc dd,#free-inhalt p,#free-inhalt li{max-width:68ch}
main .wrap > p,main .wrap > ul li{max-width:68ch}
/* Bildunterschriften laufen unter 1280 px breiten Aufnahmen ueber die volle
   Breite — gemessen bis 159 Zeichen in einer Zeile. */
figcaption.lbl{max-width:62ch}

/* Ein Knopf, der noch nicht geht ("Not available yet"), war auf .45 Deckkraft
   gesetzt. Damit sinkt die dunkle Schrift auf dem hellen Blau gegen den
   Seitengrund — gemessen 1,06 : 1, also praktisch unlesbar. Statt das ganze
   Element zu verblassen, bekommt der Zustand eigene Farben: Umriss statt
   Flaeche, ruhige Schrift. Gemessen 6,7 : 1, und man sieht trotzdem sofort,
   dass hier nichts zu holen ist. */
.btn[disabled],.btn:disabled{
  opacity:1;background:transparent;border-color:var(--line);
  color:var(--dim);cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover,.btn:disabled:hover{
  background:transparent;border-color:var(--line);color:var(--dim)}
.btn[disabled]::before,.btn:disabled::before{display:none}

/* Die Kaufleiste am unteren Rand auf dem Handy: der Kaufknopf war 41 px hoch
   gemessen. Genau dieser Knopf ist der letzte Schritt vor dem Geld. */
.kaufleiste .btn{min-height:44px}

/* Nur fuer Vorleseprogramme und die Kapitelspur — nicht zu sehen, aber
   vorhanden. clip-path statt display:none, weil Verstecktes sonst gar nicht
   erst vorgelesen wird. */
.nur-vorlesen{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* Die alte Wortmarke und die alten Spalten sind weg; was v7 dafuer an
   Regeln mitbringt, findet nichts mehr — das ist gewollt, nicht kaputt. */


/* ====== NAV 07 · Kanal ====== */

.n7{background:var(--bg);border-bottom:1px solid var(--line-soft)}
/* Groesser gestellt: die Leiste war fuer eine Marke, die man erst
   aufbaut, zu leise. Hoehe, Wortmarke und Menue steigen gemeinsam -
   einzeln kippt das Verhaeltnis. */
.n7__i{max-width:var(--wrap);margin:0 auto;padding:0 22px;height:84px;
  display:flex;align-items:center;gap:26px}
/* Die Wortmarke war 24 px hoch gemessen — als Tippflaeche zu wenig.
   Innenabstand hoch, Aussenabstand negativ zurueck, damit die Leiste
   optisch gleich bleibt. */
.n7__m{display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:11px 6px;margin:-11px -6px}
.n7__m span{font:700 21px/1 var(--anzeige);color:var(--fg);letter-spacing:-.012em}
.n7__m span i{font-style:normal;color:var(--blue);font-weight:600}
.n7 nav{margin-left:auto;display:flex;gap:6px}
.n7__k{text-decoration:none;padding:11px 17px 10px;border-radius:6px;
  display:flex;flex-direction:column;gap:7px;transition:background .22s}
.n7__k:hover{background:rgba(143,216,255,.06)}
.n7__k b{font:400 15px/1 var(--sans);color:var(--dim);font-weight:400;transition:color .2s}
.n7__k:hover b{color:var(--fg)}
.n7__pegel{display:flex;gap:2px;height:9px;align-items:flex-end}
.n7__pegel i{width:2px;background:var(--line);border-radius:1px;height:2px;
  transition:height .3s var(--e-aus),background .3s}
.n7__k:hover .n7__pegel i{background:var(--blue)}
.n7__k:hover .n7__pegel i:nth-child(1){height:4px;transition-delay:0s}
.n7__k:hover .n7__pegel i:nth-child(2){height:9px;transition-delay:.03s}
.n7__k:hover .n7__pegel i:nth-child(3){height:6px;transition-delay:.06s}
.n7__k:hover .n7__pegel i:nth-child(4){height:8px;transition-delay:.09s}
.n7__k:hover .n7__pegel i:nth-child(5){height:3px;transition-delay:.12s}
.n7__k:hover .n7__pegel i:nth-child(6){height:7px;transition-delay:.15s}
.n7__k:hover .n7__pegel i:nth-child(7){height:5px;transition-delay:.18s;background:var(--green)}
@media (max-width:760px){
  .n7__i{height:auto;padding:12px 18px;flex-wrap:wrap}
  .n7 nav{margin-left:0;width:100%;flex-wrap:wrap}
}


/* ====== HERO 03 · Vollbild ====== */

.hv{position:relative;min-height:min(88vh,720px);display:flex;align-items:flex-end;
  background:var(--bg);overflow:hidden}
.hv__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:60% 50%;opacity:.62;transform:scale(1.06)}
.hv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.85) 0,rgba(8,9,10,.15) 34%,
    rgba(8,9,10,.62) 68%,var(--bg) 100%)}
.hv__innen{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;width:100%;
  padding:0 22px 62px}
/* Die Marke steht auf dem hellsten Stueck des Fotos. In Markenblau waren es
   dort gemessen 3,73 : 1 — zu wenig fuer 10 px. Der hellere Blauton haelt den
   Akzent und kommt auf 4,6 : 1. (Erst im Einbau aufgefallen: auf der
   Schauseite lag darunter der ruhige Teil des Bildes.) */
.hv__marke{font:500 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:#CDE9FB;display:block;margin-bottom:20px}
.hv h1{font-family:var(--anzeige);font-variation-settings:"wdth" 124;font-weight:800;
  font-size:clamp(44px,9vw,116px);line-height:.9;letter-spacing:-.042em;
  color:#fff;margin:0 0 28px;max-width:12ch;
  text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hv h1 em{font-style:normal;color:var(--blue)}
.hv__satz{font:400 17px/1.55 var(--sans);color:#B6C2CB;margin:0 0 30px;max-width:40ch;
  text-shadow:0 1px 20px rgba(0,0,0,.7)}
.hv__unten{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hv__scroll{font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:10px}
.hv__scroll::before{content:"";width:34px;height:1px;background:var(--dim);
  animation:zieh 2.4s var(--e-weich) infinite}
@keyframes zieh{0%,100%{transform:scaleX(.4);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}
@media (max-width:640px){
  .hv{min-height:74vh}
  .hv__innen{padding:0 18px 42px}
  .hv h1{max-width:9ch}
}


/* ====== PROD 02 · Gerätefronten ====== */

.p2{background:var(--grund-2);padding:78px 22px 86px}
.p2__i{max-width:var(--wrap);margin:0 auto}
.p2 h2{font:800 clamp(30px,4vw,50px)/1 var(--anzeige);font-variation-settings:"wdth" 112;
  letter-spacing:-.03em;color:var(--fg);margin:10px 0 14px}
.p2__vor{font:400 17px/1.6 var(--text);color:var(--dim);max-width:58ch;margin:0 0 40px}
.p2__gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.p2__g{display:block;text-decoration:none;position:relative;
  background:linear-gradient(168deg,#18222A,#0C1216);
  border:1px solid #26333B;border-radius:11px;padding:15px;
  box-shadow:0 34px 60px -38px #000,inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .45s var(--e-aus),box-shadow .45s var(--e-aus),border-color .3s}
.p2__g:hover{transform:translateY(-6px);border-color:#3A4C58;
  box-shadow:0 46px 70px -40px #000,inset 0 1px 0 rgba(255,255,255,.08)}
.p2__g::before,.p2__g::after{content:"";position:absolute;top:8px;width:6px;height:6px;
  border-radius:50%;background:radial-gradient(circle at 33% 33%,#54646E,#19232A);
  box-shadow:inset 0 0 2px #000}
.p2__g::before{left:8px}.p2__g::after{right:8px}
.p2__schirm{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0,#0D171D,#05090C);
  border:1px solid #1C262C;box-shadow:inset 0 0 30px rgba(0,0,0,.85);
  display:grid;place-items:center;margin-bottom:14px}
.p2__schirm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.34;transition:opacity .4s}
.p2__g:hover .p2__schirm img{opacity:.5}
.p2__schirm svg{position:relative;width:52%;height:52%;filter:drop-shadow(0 0 18px rgba(143,216,255,.35))}
.p2__art{position:absolute;top:9px;left:9px;z-index:2;
  font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);background:rgba(8,9,10,.7);padding:5px 7px;border-radius:3px;
  border:1px solid rgba(143,216,255,.25)}
.p2__b{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.p2__b b{font:600 17px/1.15 var(--sans);color:var(--fg)}
.p2__b span{margin-left:auto;font:500 15px/1 var(--mono);color:var(--blue)}
.p2__g p{font:400 13px/1.55 var(--sans);color:var(--dim);margin:0 0 14px}
.p2__regler{display:flex;gap:9px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}
.p2__r{width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#2E3B44,#111A1F);
  border:1px solid #33424C;position:relative;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.p2__r::after{content:"";position:absolute;left:50%;top:3px;width:1.6px;height:8px;
  background:var(--blue);transform-origin:50% 10px;border-radius:1px}
.p2__r:nth-child(1)::after{transform:translateX(-50%) rotate(-38deg)}
.p2__r:nth-child(2)::after{transform:translateX(-50%) rotate(22deg)}
.p2__r:nth-child(3)::after{transform:translateX(-50%) rotate(64deg);background:var(--green)}
@media (max-width:820px){.p2__gitter{grid-template-columns:1fr;gap:18px}
  .p2{padding:50px 18px 58px}}
/* Spotlight: das neueste Gerät groß, mit echtem Screenshot — vor dem Katalog */
.p2s{position:relative;border:1px solid #26333B;background:linear-gradient(168deg,#141C22,#0B1013);margin:0 0 26px;
  display:grid;grid-template-columns:1.35fr .65fr;overflow:hidden;box-shadow:0 44px 80px -48px #000}
.p2s__bild{position:relative;min-height:320px;background:#05090C;display:block}
.p2s__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:.95}
.p2s__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,16,19,0) 70%,rgba(11,16,19,.85))}
.p2s__text{padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center}
.p2s__neu{font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.p2s__text h3{font:800 clamp(30px,3.6vw,46px)/1 var(--anzeige);font-variation-settings:"wdth" 112;letter-spacing:-.03em;color:var(--fg);margin:12px 0 10px}
.p2s__text p{font:400 15px/1.55 var(--text);color:var(--dim);margin:0 0 18px}
.p2s__text p b{color:var(--fg);font-weight:500}
.p2s__zahlen{display:flex;gap:18px;margin:0 0 22px;flex-wrap:wrap}
.p2s__zahlen span{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.p2s__zahlen span b{display:block;font:600 22px/1 var(--mono);color:var(--blue);letter-spacing:-.02em;margin-bottom:4px}
.p2s__cta{display:flex;gap:10px;flex-wrap:wrap}
.p2s__cta a{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border:1px solid var(--blue);color:#04141C;background:var(--blue)}
.p2s__cta a.leise{background:transparent;color:var(--blue)}
.p2s__cta a:hover{filter:brightness(1.1)}
@media (max-width:820px){.p2s{grid-template-columns:1fr}.p2s__bild{min-height:200px}.p2s__bild::after{background:linear-gradient(180deg,rgba(11,16,19,0) 60%,rgba(11,16,19,.9))}.p2s__text{padding:22px 18px 24px}}


/* ====== BAND 04 · Zitatkarte ====== */

.b4{background:var(--bg);padding:84px 22px 90px}
.b4__k{max-width:820px;margin:0 auto;position:relative;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:52px 46px 40px;
  box-shadow:0 44px 80px -50px #000}
.b4__k::before{content:"\201C";position:absolute;top:-6px;left:26px;
  font:800 130px/1 var(--anzeige);color:var(--blue);opacity:.16;pointer-events:none}
.b4 p{font:400 clamp(20px,2.6vw,31px)/1.42 var(--anzeige);font-variation-settings:"wdth" 100;
  color:var(--fg);margin:0 0 30px;letter-spacing:-.014em;position:relative}
.b4 p em{font-style:normal;color:var(--blue)}
.b4__wer{display:flex;align-items:center;gap:15px;padding-top:24px;
  border-top:1px solid var(--line-soft)}
.b4__bild{width:46px;height:46px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  border:1px solid var(--line);background:var(--panel-2);display:grid;place-items:center}
.b4__bild img{width:100%;height:100%;object-fit:cover}
.b4__wer b{display:block;font:600 15px/1.2 var(--sans);color:var(--fg)}
.b4__wer span{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
@media (max-width:640px){.b4{padding:54px 18px 60px}.b4__k{padding:38px 24px 28px}}


/* ====== ÜBER 07 · Werkstatt ====== */

.u7{position:relative;min-height:min(76vh,600px);display:flex;align-items:flex-end;
  background:var(--bg);overflow:hidden}
.u7 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.u7::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0,transparent 22%,rgba(8,9,10,.88) 70%,var(--bg))}
.u7__i{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;width:100%;
  padding:0 22px 56px}
.u7 h2{font:800 clamp(30px,5vw,64px)/1 var(--anzeige);font-variation-settings:"wdth" 116;
  letter-spacing:-.036em;color:#fff;margin:12px 0 20px;max-width:16ch;
  text-shadow:0 2px 34px rgba(0,0,0,.6)}
.u7 p{font:400 16.5px/1.65 var(--sans);color:var(--dim);margin:0;max-width:50ch}
.u7 p+p{margin-top:12px}
@media (max-width:640px){.u7{min-height:62vh}.u7__i{padding:0 18px 40px}}


/* ====== KAUF 06 · Vier Siegel ====== */

.c6{background:var(--bg);padding:0 22px}
.c6__i{max-width:var(--wrap);margin:0 auto;padding:46px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.c6__g{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.c6__s{padding:0 26px;border-right:1px solid var(--line-soft);text-align:center}
.c6__s:first-child{padding-left:0}
.c6__s:last-child{border-right:0;padding-right:0}
.c6__ring{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--blue);
  display:grid;place-items:center;margin:0 auto 14px;transition:.3s}
.c6__s:hover .c6__ring{background:rgba(143,216,255,.1);
  box-shadow:0 0 20px -4px rgba(143,216,255,.6)}
.c6__s:last-child .c6__ring{border-color:var(--green)}
.c6__ring svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--blue)}
.c6__s:last-child .c6__ring svg{color:var(--green)}
.c6__s b{display:block;font:600 15px/1.3 var(--sans);color:var(--fg);margin-bottom:6px}
.c6__s span{font:400 12.5px/1.5 var(--sans);color:var(--faint)}
@media (max-width:760px){
  .c6__g{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .c6__s{padding:0 16px}
  .c6__s:nth-child(2){border-right:0}
}


/* ====== FUSS 08 · Nur das Nötige ====== */

.g8{background:var(--bg);border-top:1px solid var(--line-soft);padding:38px 22px 34px;
  text-align:center}
.g8__i{max-width:640px;margin:0 auto}
/* Tippflaechen: gemessen waren die Rechtslinks 42 x 12 px — auf dem Handy
   nicht sicher zu treffen. 44 px sind das Mindestmass. Die Hoehe kommt aus
   Innenabstand, der negative Aussenabstand holt den optischen Platz zurueck,
   damit die Zeile trotzdem schmal aussieht. */
.g8__m{display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;
  text-decoration:none;padding:10px 4px}
.g8__m b{font:700 14px/1 var(--anzeige);color:var(--fg)}
.g8__m b i{font-style:normal;color:var(--blue);font-weight:600}
.g8 nav{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  margin:0 0 8px}
.g8 nav a{font:400 12px/1 var(--sans);color:var(--dim);text-decoration:none;
  padding:16px 10px;display:inline-flex;align-items:center;min-height:44px}
.g8 nav a:hover{color:var(--blue)}
/* Fliesstext braucht eine Grenze: gemessen 106 Zeichen je Zeile, das liest
   sich muehsam. 68 Zeichen sind die obere Grenze fuer bequemes Lesen. */
.g8__fein{font:400 11px/1.75 var(--sans);color:var(--faint);margin:0 auto;
  max-width:62ch}
@media (max-width:640px){.g8 nav{gap:2px}.g8 nav a{padding:16px 8px}}


/* ====== Motion-Ebene v11 (aus motion/v11/motion11.css) ====== */
/* ======================================================================
   Motion-Ebene v11 — Show auf der Produktseite
   ----------------------------------------------------------------------
   1 · Bühne: die spielbare Anzeige steht als Objekt im Raum
   2 · Raum: gepinnte Scroll-Inszenierung Laptop → Gerät → Fenster
   3 · Abstand: wie groß ist die Zahl aus 2, 5, 10 Metern
   4 · Feinschliff: freie Leiste, magnetische Knöpfe, Kartenneigung, Count-in
   Alles hat einen body.rm-Zweig. Null border-radius, kein Rot.
   ====================================================================== */

/* ---------- 1 · Bühne ---------- */
.buehne{position:relative;margin-top:26px;
  /* Die Maske blendet nur aus, sie beschneidet nicht — deshalb clip dazu. */
  overflow:clip}
.buehne__raum{position:relative;perspective:1600px;perspective-origin:50% 38%;
  padding:34px 0 0}
.buehne__objekt{position:relative;z-index:2;transform-style:preserve-3d;
  transform:rotateX(var(--rx,9deg)) rotateY(var(--ry,-11deg)) translateZ(0);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);will-change:transform}
.buehne__objekt .demo{margin-top:0;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(143,216,255,.06)}
.buehne.flach .buehne__objekt{transform:rotateX(0) rotateY(0)}
.buehne.zieht .buehne__objekt{transition:none}
/* Spiegelung: eine gespiegelte Kopie der Leinwand, unter das Objekt gelegt */
.buehne__spiegel{position:absolute;left:0;right:0;z-index:1;display:block;
  width:100%;height:auto;opacity:.22;pointer-events:none;
  transform:rotateX(var(--rx,9deg)) rotateY(var(--ry,-11deg)) translateZ(0);
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .4s;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 55%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 55%);
  filter:blur(1px)}
.buehne.flach .buehne__spiegel{opacity:.10;transform:none}
/* Podest und Lichtkegel */
.buehne__podest{position:absolute;left:8%;right:8%;bottom:-6px;height:70px;z-index:0;
  background:radial-gradient(60% 100% at 50% 100%,rgba(143,216,255,.14),transparent 70%);
  pointer-events:none}
.buehne__linie{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--blue) 50%,var(--line) 80%,transparent);
  opacity:.6;pointer-events:none}
.buehne__licht{position:absolute;left:50%;top:-40px;width:60%;height:120%;z-index:0;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,rgba(143,216,255,.07),transparent 70%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.buehne__fuss{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:26px;font:400 11.5px/1.7 var(--mono);color:var(--faint);
  letter-spacing:.04em}
.buehne__fuss b{color:var(--dim);font-weight:500}
.buehne__fuss .buehne__winkel{font-variant-numeric:tabular-nums;color:var(--blue)}
@media (max-width:760px),(pointer:coarse){
  .buehne__fuss{display:none}
}
@media (max-width:760px){
  .buehne__raum{perspective:none;padding-top:10px}
  .buehne__objekt,.buehne__spiegel{transform:none!important}
  .buehne__spiegel,.buehne__licht{display:none}
}
body.rm .buehne__objekt,body.rm .buehne__spiegel{transition:none;transform:none!important}
body.rm .buehne__spiegel{display:none}

/* ---------- 2 · Raum (gepinnt) ---------- */
.raum{position:relative;border-top:1px solid var(--line);
  margin:0 -22px;padding:0 22px;background:var(--bg)}
.raum__lauf{height:320vh;position:relative}
.raum__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(300px,.85fr) 1.15fr;gap:40px;
  align-items:center;max-width:var(--wrap);margin:0 auto}
.raum__text .sec-h{margin-top:12px}
.raum__beats{position:relative;margin-top:22px;min-height:150px}
.raum__beats p{position:absolute;left:0;top:0;margin:0;max-width:44ch;
  font:400 16px/1.65 var(--sans);color:var(--dim);
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.raum__beats p b{color:var(--fg);font-weight:500;display:block;margin-bottom:6px;
  font-size:19px;letter-spacing:-.01em}
.raum__beats p.an{opacity:1;transform:none}
.raum__takt{display:flex;gap:6px;margin-top:26px}
.raum__takt i{display:block;width:34px;height:3px;background:var(--line);
  transition:background .3s}
.raum__takt i.an{background:var(--blue)}
.raum__takt i.war{background:var(--faint)}

.raum__szene{position:relative;height:min(62vh,560px);
  perspective:1400px;perspective-origin:50% 40%}
.raum__szene > *{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);will-change:transform,opacity}
/* Laptop: gezeichnet, nicht fotografiert */
.raum__laptop{width:min(520px,80%);aspect-ratio:16/11;
  transform-origin:50% 50%}
.raum__lcd{position:absolute;inset:0 0 12% 0;border:2px solid var(--line);
  background:#0b0d0f;overflow:hidden}
.raum__lcd::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 0 22%,rgba(143,216,255,.05) 22% 22.2%,transparent 22.2%),
    repeating-linear-gradient(180deg,transparent 0 21px,rgba(255,255,255,.035) 21px 22px);
  }
.raum__leiste{position:absolute;left:0;right:0;top:0;height:9%;
  background:var(--panel);border-bottom:1px solid var(--line)}
.raum__winzig{position:absolute;right:3%;top:2.4%;
  font:500 clamp(7px,1.1vw,10px)/1 var(--mono);letter-spacing:.06em;color:#9fb0ba;
  padding:2px 5px;border:1px solid #2a3540;background:#141b20}
.raum__winzig.hell{color:var(--blue);border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(143,216,255,.18),0 0 24px rgba(143,216,255,.45)}
.raum__basis{position:absolute;left:-4%;right:-4%;bottom:0;height:11%;
  background:linear-gradient(180deg,#151b20,#0c1013);border:1px solid var(--line);
  border-top:0}
.raum__basis::after{content:"";position:absolute;left:44%;right:44%;top:0;height:4px;
  background:#1f2a31}
/* Gerätefront und Fenster */
.raum__geraet{width:min(300px,52%);opacity:0}
.raum__geraet img,.raum__schirm img{display:block;width:100%;height:auto;
  border:1px solid var(--line)}
.raum__schirm{width:min(640px,96%);opacity:0}
.raum__schirm::after{content:"";position:absolute;left:14%;right:14%;bottom:-13px;
  height:1px;background:var(--line)}
.raum__schirm::before{content:"";position:absolute;left:47%;right:47%;bottom:-12px;
  height:12px;background:var(--line)}
.raum__zweit{position:absolute;right:0;bottom:6%;width:22%;aspect-ratio:16/10;
  border:1px solid var(--line);background:var(--panel);opacity:0;
  transform:translateX(30px)}
.raum__zweit::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(143,216,255,.12),transparent 60%)}
.raum__etikett{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;opacity:0;transition:opacity .4s}
.raum__etikett.an{opacity:1}
/* Das Etikett ist auch ein Kind der Szene - die Zentrierregel oben
   wuerde es in die Mitte ziehen, mitten auf die Geraetefront. */
.raum__szene > .raum__etikett{top:auto;bottom:-30px;transform:translateX(-50%)}

/* Fließmodus: dieselbe Bedingung wie im Skript, wörtlich. */
@media (max-width:900px),(max-height:700px){
  .raum__lauf{height:auto}
  .raum__pin{position:static;height:auto;overflow:visible;grid-template-columns:1fr;
    gap:26px;padding:52px 0 20px}
  .raum__beats{min-height:0}
  .raum__beats p{position:static;opacity:1;transform:none;margin-top:16px}
  .raum__takt{display:none}
  .raum__szene{height:auto;perspective:none;display:grid;gap:18px}
  .raum__szene > *{position:static;transform:none!important;opacity:1!important;
    width:100%;max-width:520px;margin:0 auto}
  .raum__laptop{height:auto}
  .raum__zweit,.raum__etikett{display:none}
}
body.rm .raum__lauf{height:auto}
body.rm .raum__pin{position:static;height:auto;grid-template-columns:1fr}
body.rm .raum__beats p{position:static;opacity:1;transform:none;margin-top:16px}
body.rm .raum__szene{height:auto;display:grid;gap:18px;perspective:none}
body.rm .raum__szene > *{position:static;transform:none!important;opacity:1!important;
  width:100%;max-width:520px;margin:0 auto}
body.rm .raum__takt,body.rm .raum__zweit,body.rm .raum__etikett{display:none}

/* ---------- 3 · Abstand ---------- */
.abstand{padding:70px 0 80px;max-width:var(--wrap);margin:0 auto}
.abstand__kopf{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:end;
  justify-content:space-between}
.abstand__wahl{display:flex;gap:6px}
.abstand__wahl button{font:500 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);background:transparent;
  border:1px solid var(--line);padding:11px 16px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.abstand__wahl button:hover{color:var(--fg);border-color:var(--faint)}
.abstand__wahl button[aria-pressed=true]{color:var(--bg);background:var(--blue);
  border-color:var(--blue)}
.abstand__buehne{margin-top:28px;border:1px solid var(--line);background:var(--panel);
  display:grid;grid-template-columns:1fr 1fr;min-height:340px;position:relative;
  overflow:hidden}
.abstand__buehne::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--line)}
.abstand__seite{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:36px 20px 56px;gap:0}
.abstand__seite > .lbl{position:absolute;left:18px;top:16px}
.abstand__objekt{display:flex;align-items:center;justify-content:center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-origin:50% 50%}
.abstand__ableton{font:500 100px/1 var(--mono);color:#9fb0ba;letter-spacing:.02em;
  padding:.1em .22em;border:.03em solid #2a3540;background:#141b20;
  font-variant-numeric:tabular-nums}
.abstand__cue{display:block;width:100px;height:auto}
.abstand__mass{position:absolute;left:18px;right:18px;bottom:16px;
  display:flex;justify-content:space-between;
  font:400 11px/1.5 var(--mono);letter-spacing:.08em;color:var(--faint)}
.abstand__mass b{color:var(--blue);font-weight:500;font-variant-numeric:tabular-nums}
.abstand__satz{margin:20px 0 0;font:400 14.5px/1.65 var(--sans);color:var(--dim);
  max-width:70ch}
.abstand__satz b{color:var(--fg);font-weight:500}
.abstand__seite{min-width:0}
.abstand__objekt{width:100px;height:100px}
@media (max-width:760px){
  .raum{margin:0 -18px;padding:0 18px}
  .abstand__buehne{grid-template-columns:1fr;min-height:0}
  .abstand__buehne::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px}
  .abstand__seite{min-height:220px}
}
body.rm .abstand__objekt{transition:none}

/* ---------- 4 · Feinschliff ---------- */
/* Freie Leiste: erscheint, wenn der Download-Kasten aus dem Bild ist */
.freileiste{position:fixed;left:0;right:0;bottom:var(--hud-unten,0px);z-index:60;
  transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
  background:rgba(14,20,24,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.freileiste.an{transform:none}
.freileiste__i{max-width:var(--wrap);margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:18px}
.freileiste__nm{font:600 15px/1 var(--anzeige,var(--sans));color:var(--fg);
  letter-spacing:-.01em}
.freileiste__pr{font:500 11px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);margin-left:4px}
.freileiste .btn{margin-left:auto;padding:11px 20px;font-size:11px}
@media (max-width:760px){
  .freileiste__i{padding:10px 16px;gap:10px}
  .freileiste__pr{display:none}
  .freileiste .btn{white-space:nowrap}
}
/* Magnet: nur die Tippfläche folgt, wenige Pixel — mehr sieht billig aus */
.btn{will-change:transform}
body.rm .btn{transform:none!important}
/* Karte auf der Startseite neigt sich zum Zeiger */
/* Kartenneigung entfernt (08.09.2026) */
body.rm .p2__g{transform:none!important}
/* Count-in: einmal je Sitzung, unter einer Sekunde */
.countin{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .35s;pointer-events:none}
.countin.weg{opacity:0}
.countin svg{width:min(26vw,190px);height:auto;display:block}
.countin svg polygon{fill:var(--line);transition:fill .08s}
.countin svg polygon.an{fill:var(--fg)}
.countin__u{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  font:500 10px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
body.rm .countin{display:none}


/* ====== Motion-Ebene v12 (aus motion/v12/motion12.css) ====== */
/* ======================================================================
   Motion-Ebene v12 — Startseite lebt, Film als Kino
   ----------------------------------------------------------------------
   1 · Hero: CUE läuft live hinter der Überschrift (Ambient-Anzeige)
   2 · Produktkarte: Gerät, das beim Überfahren aufwacht — kein Kippen
   3 · Signalkette: Live → Locators → CUE → Bühne, mit laufendem Puls
   4 · Werkstatt: Zeitleiste und ehrliche Zahlen im Über-uns
   5 · Kino: der Film auf der Produktseite, Vollbild mit Kapiteln
   Keine Neigungen (Wunsch vom 08.09.2026). Alles mit body.rm-Zweig.
   ====================================================================== */

/* ---------- 1 · Hero ---------- */
.hv__cue{position:absolute;inset:0;z-index:0;overflow:hidden;
  opacity:.78;transform:translateY(var(--hv-y,0px));will-change:transform}
/* Auf breiten Schirmen sitzt die Anzeige rechts neben dem Text — die
   Ziffer soll neben der Ueberschrift stehen, nicht dahinter. */
@media (min-width:900px){
  .hv h1{max-width:9ch}
  .hv__satz{max-width:36ch}
  .hv__cue{left:46%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
    mask-image:linear-gradient(90deg,transparent,#000 22%)}
}
.hv__cue canvas{display:block;width:100%;height:100%}
/* Lichtfleck folgt dem Zeiger — Helligkeit, keine Neigung */
.hv__licht{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,45%),
    rgba(143,216,255,.13),transparent 60%);
  opacity:0;transition:opacity .6s}
.hv:hover .hv__licht{opacity:1}
/* Das Foto bleibt als Ruhe-Fassung und als Rückfall */
.hv__foto{transition:opacity .8s}
.hv.lebt .hv__foto{opacity:0}
body.rm .hv__cue{display:none}
body.rm .hv.lebt .hv__foto{opacity:.62}
.hv__band{position:absolute;left:0;right:0;bottom:0;z-index:1;height:38%;
  background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}

/* ---------- 2 · Produktkarte als Gerät ---------- */
.p2__live{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s}
.p2__live canvas{display:block;width:100%;height:100%}
.p2__g:hover .p2__live,.p2__g:focus-visible .p2__live,.p2__g.wach .p2__live{opacity:1}
.p2__g:hover .p2__schirm svg,.p2__g.wach .p2__schirm svg{opacity:0}
.p2__schirm svg{transition:opacity .4s;z-index:0}
.p2__g:hover .p2__schirm img,.p2__g.wach .p2__schirm img{opacity:.08}
/* Der Chip wechselt beim Aufwachen von der Gattung zum Zustand */
.p2__art::after{content:"";}
/* Der Chip weicht, sobald die Anzeige laeuft - deren Kopfzeile sagt schon,
   was es ist. Zwei Beschriftungen uebereinander sind eine zu viel. */
.p2__g:hover .p2__art,.p2__g.wach .p2__art{opacity:0}
.p2__art{transition:opacity .3s}
/* Regler bekommen eine LED, die beim Aufwachen angeht */
.p2__r::before{content:"";position:absolute;left:50%;bottom:-7px;width:4px;height:4px;
  margin-left:-2px;background:var(--line);transition:background .3s,box-shadow .3s}
.p2__g:hover .p2__r::before,.p2__g.wach .p2__r::before{background:var(--green);
  box-shadow:0 0 8px rgba(95,227,168,.8)}
.p2__g:hover .p2__r:nth-child(1)::before{transition-delay:0s}
.p2__g:hover .p2__r:nth-child(2)::before{transition-delay:.08s}
.p2__g:hover .p2__r:nth-child(3)::before{transition-delay:.16s}
/* Aufforderung am unteren Rand des Schirms */
.p2__auf{position:absolute;right:10px;bottom:9px;z-index:3;
  font:500 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg);background:rgba(8,9,10,.72);padding:6px 8px;
  border:1px solid rgba(143,216,255,.35);opacity:0;transform:translateY(4px);
  transition:opacity .3s,transform .3s}
.p2__g:hover .p2__auf,.p2__g.wach .p2__auf{opacity:1;transform:none}
/* KEIN Kippen: die Karte hebt sich nur, wie in v10 vorgesehen */
.p2__g{transform-style:flat!important}
@media (pointer:coarse){
  .p2__live{opacity:1}
  .p2__schirm svg{opacity:0}
  .p2__schirm img{opacity:.08}
  .p2__auf{opacity:1;transform:none}
}
body.rm .p2__live{display:none}
body.rm .p2__g:hover .p2__schirm svg{opacity:1}

/* ---------- 3 · Signalkette ---------- */
.signal{background:var(--bg);border-top:1px solid var(--line-soft);
  padding:58px 22px 64px}
.signal__i{max-width:var(--wrap);margin:0 auto}
.signal__kopf{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;margin-bottom:22px}
.signal h2{font:800 clamp(22px,2.8vw,32px)/1.1 var(--anzeige);
  font-variation-settings:"wdth" 112;letter-spacing:-.028em;color:var(--fg);margin:8px 0 0}
.signal__hint{font:400 12px/1.6 var(--mono);color:var(--faint);letter-spacing:.04em}
.signal__svg{display:block;width:100%;height:auto;overflow:visible}
.signal__svg .weg{fill:none;stroke:var(--line);stroke-width:1.5}
.signal__svg .weg--an{fill:none;stroke:var(--blue);stroke-width:1.5;
  stroke-dasharray:60 1200;stroke-dashoffset:60;opacity:.9}
.signal__svg .knoten rect{fill:var(--panel);stroke:var(--line);stroke-width:1;
  transition:stroke .3s}
.signal__svg .knoten text{font:500 11px var(--mono);letter-spacing:.16em;fill:var(--dim);
  text-transform:uppercase;transition:fill .3s}
.signal__svg .knoten .u{font:400 10px var(--sans);letter-spacing:0;fill:var(--faint);
  text-transform:none}
.signal__svg .knoten.an rect{stroke:var(--blue)}
.signal__svg .knoten.an text{fill:var(--fg)}
.signal__svg .knoten.an .u{fill:var(--dim)}
.signal__svg .puls{fill:var(--green);filter:drop-shadow(0 0 6px rgba(95,227,168,.9))}
.signal__svg .knoten.war rect{stroke:var(--faint)}
@media (max-width:760px){
  .signal{padding:44px 18px 48px}
  .signal__svg{min-width:560px}
  .signal__roll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
body.rm .signal__svg .puls{display:none}
body.rm .signal__svg .weg--an{stroke-dasharray:none;opacity:.5}

/* ---------- 4 · Werkstatt ---------- */
.u7 img{will-change:transform;transform:translateY(var(--u7-y,0px)) scale(1.06)}
body.rm .u7 img{transform:none}
.u7__zeit{list-style:none;margin:28px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.u7__zeit li{position:relative;padding:18px 18px 20px 0;
  opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
.u7__zeit li + li{padding-left:18px;border-left:1px solid var(--line)}
.u7__zeit li.an{opacity:1;transform:none}
.u7__zeit li:nth-child(2){transition-delay:.15s}
.u7__zeit li:nth-child(3){transition-delay:.3s}
.u7__zeit b{display:block;font:500 10px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.u7__zeit span{font:400 13.5px/1.55 var(--sans);color:var(--dim)}
.u7__zahlen{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.u7__zahlen div{display:flex;flex-direction:column;gap:4px}
.u7__zahlen b{font:600 28px/1 var(--anzeige);letter-spacing:-.02em;color:var(--fg);
  font-variant-numeric:tabular-nums}
.u7__zahlen span{font:400 11px/1.4 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
@media (max-width:760px){
  .u7__zeit{grid-template-columns:1fr}
  .u7__zeit li + li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}
body.rm .u7__zeit li{opacity:1;transform:none;transition:none}

/* ---------- 5 · Kino ---------- */
.kino__rahmen{position:relative;margin-top:24px;cursor:pointer}
.kino__rahmen video{width:100%;display:block;border:1px solid var(--line);background:#000}
.kino__auf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:12px;pointer-events:none;
  font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg);
  background:rgba(8,9,10,.7);padding:12px 18px;border:1px solid rgba(143,216,255,.4);
  opacity:0;transition:opacity .3s}
.kino__rahmen:hover .kino__auf{opacity:1}
.kino__auf i{display:block;width:0;height:0;border-left:9px solid var(--blue);
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.kino__kap{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.kino__kap button{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);background:var(--panel);border:1px solid var(--line);
  padding:10px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;
  transition:color .2s,border-color .2s}
.kino__kap button b{font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.kino__kap button:hover{color:var(--fg);border-color:var(--faint)}
.kino__kap button.an{color:var(--fg);border-color:var(--blue)}
.kino__kap button.an b{color:var(--blue)}
.kino__kap button.demo{margin-left:auto;color:var(--green);border-color:rgba(95,227,168,.35)}
dialog.kino{border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100vw;height:100vh;height:100svh;margin:0}
dialog.kino::backdrop{background:rgba(8,9,10,.96)}
dialog.kino .kino__buehne{width:100%;height:100%;display:grid;
  grid-template-rows:1fr auto;gap:14px;padding:28px 22px;box-sizing:border-box}
dialog.kino video{width:100%;height:100%;object-fit:contain;background:#000;
  border:1px solid var(--line)}
dialog.kino .kino__zu{position:absolute;right:22px;top:18px;
  font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--line);
  padding:10px 14px;cursor:pointer}
dialog.kino .kino__zu:hover{color:var(--fg);border-color:var(--faint)}
dialog.kino .kino__kap{max-width:var(--wrap);margin:0 auto;width:100%}


/* ====== Motion-Ebene v13 (aus motion/v13/motion13.css) ====== */
/* ======================================================================
   Motion-Ebene v13 — 3D-Landschaft, Labor, Bänder, Bildmarke, kleine Karte
   ====================================================================== */

/* ---------- 1 · Hero: Landschaft hinten, CUE als schwebendes Panel ---------- */
.hv__land{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hv__land canvas{display:block;width:100%;height:100%}
.hv{min-height:min(94vh,820px)}
/* Die Anzeige aus v12 wird vom Hintergrund zum Objekt: ein Panel rechts,
   in fester Perspektive (keine Neigung zum Zeiger), das leicht schwebt. */
.hv__cue{inset:auto;left:auto;right:4%;top:15%;width:min(40%,600px);aspect-ratio:16/9;
  opacity:1;border:1px solid rgba(143,216,255,.22);background:var(--bg);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(8,9,10,.6),
             0 0 80px -20px rgba(143,216,255,.25);
  -webkit-mask-image:none;mask-image:none;
  transform:perspective(1400px) rotateY(-9deg) translateY(var(--hv-y,0px)) translateY(var(--schwebe,0px));
  animation:hv-schweben 7s ease-in-out infinite;z-index:1}
.hv__cue::after{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:18px;
  background:radial-gradient(50% 100% at 50% 0,rgba(143,216,255,.22),transparent 70%)}
@keyframes hv-schweben{0%,100%{--schwebe:0px}50%{--schwebe:-10px}}
@property --schwebe{syntax:"<length>";inherits:false;initial-value:0px}
.hv__band{z-index:1}
.hv__innen{z-index:3}
.hv::after{z-index:2}
@media (max-width:899px){
  .hv__cue{position:absolute;inset:0;width:auto;aspect-ratio:auto;opacity:.5;
    border:0;box-shadow:none;transform:none;animation:none}
  .hv__cue::after{display:none}
}
body.rm .hv__cue{animation:none;transform:perspective(1400px) rotateY(-9deg)}
body.rm .hv__land{display:none}

@media (min-width:900px){.hv h1{font-size:clamp(44px,7.6vw,100px)}}

/* ---------- 2 · Labor ---------- */
.labor{background:var(--bg);border-top:1px solid var(--line-soft);padding:64px 22px 70px}
.labor__i{max-width:var(--wrap);margin:0 auto}
.labor__kopf{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;margin-bottom:24px}
.labor h2{font:800 clamp(24px,3vw,36px)/1.1 var(--anzeige);font-variation-settings:"wdth" 112;
  letter-spacing:-.028em;color:var(--fg);margin:8px 0 0}
.labor__p{font:400 15px/1.65 var(--sans);color:var(--dim);margin:0}
.labor__p b{color:var(--fg);font-weight:500}
.labor__rack{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.labor__mod{border:1px solid var(--line);background:var(--panel);position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.labor__mod .lbl{position:absolute;left:14px;top:12px;z-index:2}
.labor__mod canvas{display:block;width:100%;height:220px;background:var(--bg);
  border-bottom:1px solid var(--line)}
.labor__leiste{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 14px}
.labor__leiste button{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--line);padding:9px 12px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.labor__leiste button:hover{color:var(--fg);border-color:var(--faint)}
.labor__leiste button[aria-pressed=true]{color:var(--bg);background:var(--blue);border-color:var(--blue)}
.labor__leiste button[data-hoeren]{margin-left:auto;color:var(--green);border-color:rgba(95,227,168,.4)}
.labor__leiste button[data-hoeren][aria-pressed=true]{background:var(--green);color:var(--bg)}
.labor__reg{display:flex;align-items:center;gap:10px;font:500 10px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.labor__reg input[type=range]{width:150px;accent-color:#8FD8FF;background:transparent}
.labor__reg b{color:var(--blue);font-weight:500;min-width:58px;font-variant-numeric:tabular-nums}
.labor__werte{font:400 11px/1.6 var(--mono);color:var(--faint);letter-spacing:.08em;
  padding:0 14px 12px;text-transform:uppercase}
@media (max-width:900px){
  .labor__kopf,.labor__rack{grid-template-columns:1fr}
  .labor__mod canvas{height:170px}
}

/* ---------- 3 · Bänder ---------- */
.band3d{height:140px;position:relative;overflow:hidden;pointer-events:none;
  background:var(--bg)}
.band3d canvas{display:block;width:100%;height:100%}
.band3d::before,.band3d::after{content:"";position:absolute;top:0;bottom:0;width:18%;z-index:1;
  pointer-events:none}
.band3d::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.band3d::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
@media (max-width:760px){.band3d{height:90px}}

/* ---------- 4 · Bildmarke im Über-uns ---------- */
.marke3d{width:200px;height:150px;margin:0 0 18px;position:relative}
.marke3d canvas{display:block;width:100%;height:100%}
.marke3d::after{content:"";position:absolute;left:20%;right:20%;bottom:6px;height:14px;
  background:radial-gradient(50% 100% at 50% 0,rgba(143,216,255,.16),transparent 70%)}

/* ---------- 5 · Produktkarte: ein Gerät, nicht ein Bildschirm ---------- */
.p2__gitter{grid-template-columns:repeat(auto-fill,minmax(280px,360px))!important;
  justify-content:start}
.p2__gitter .p2__g{max-width:360px}
/* Daneben ehrlicher Ausblick */
.p2__naechst{border:1px dashed var(--line);padding:22px 22px 24px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:10px;min-height:200px;color:var(--faint)}
.p2__naechst b{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.p2__naechst p{font:400 13.5px/1.55 var(--sans);color:var(--dim);margin:0;max-width:34ch}
.p2__naechst a{color:var(--blue);font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;margin-top:6px}
.p2__naechst a:hover{text-decoration:underline}


/* ====== Motion-Ebene v14 (aus motion/v14/motion14.css) ====== */
/* ======================================================================
   Motion-Ebene v14 — Design-Runde vom 08.09.2026
   2 Scroll-Kamera · 3 Rack-Labor · 4 Fenster-Pin · 5 Farbwelt Amber ·
   6 Ladesequenz · 7 Front-Karte mit Reglern · 8 Footer-Welle
   ====================================================================== */

/* ---------- 5 · Farbwelt „Warm Amber" ---------- */
/* Dieselbe Seite, andere Bühnenstimmung. Nur die Tokens wechseln; die
   Canvas-Zeichnungen lesen sie beim Umschalten neu (oa:thema). */
html[data-thema="amber"]{
  --blue:#F5B36B;--green:#BFE07A;--fg:#F3ECE2;--dim:#A2978A;--faint:#6E655A;
  --panel:#14110D;--panel-2:#1B1610;--line:#2B241B;--line-soft:#1E1913}
html[data-thema="amber"] .btn{background:var(--blue);border-color:var(--blue)}
html[data-thema="amber"] .btn:hover{background:#FFC98A;border-color:#FFC98A}
html[data-thema="amber"] .btn.green{background:var(--green);border-color:var(--green)}
.thema{display:inline-flex;gap:0;border:1px solid var(--line);margin-left:14px;vertical-align:middle}
.thema button{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);background:transparent;border:0;padding:8px 10px;cursor:pointer}
.thema button[aria-pressed=true]{color:var(--bg);background:var(--blue)}
.thema button + button{border-left:1px solid var(--line)}
/* Übergang beim Umschalten - kurz, sonst wirkt es wie ein Fehler */
html.thema-wechsel *{transition:background-color .5s,color .5s,border-color .5s!important}

/* ---------- 2 · Scroll-Kamera: die Landschaft trägt die ganze Seite ---------- */
/* Die Landschaft liegt fest hinter allem; Abschnitte sind Glasscheiben
   darüber. Beim Scrollen sinkt die Kamera, die Fläche zieht durch. */
.hv__land.fest{position:fixed;inset:0;z-index:0;opacity:var(--land-o,1);
  transition:opacity .4s}
body.hat-land > main,body.hat-land > section,body.hat-land > footer,
body.hat-land > .band3d,body.hat-land > .labor,body.hat-land > .signal{position:relative;z-index:1}
body.hat-land .hv{background:transparent}
body.hat-land .p2,body.hat-land .signal,body.hat-land .labor,body.hat-land .band3d,
body.hat-land .sekt,body.hat-land .u7,body.hat-land .c6,body.hat-land footer,
body.hat-land .b4,body.hat-land .f8{background-color:rgba(8,9,10,.84)}
html[data-thema="amber"] body.hat-land .p2,html[data-thema="amber"] body.hat-land .signal,
html[data-thema="amber"] body.hat-land .labor,html[data-thema="amber"] body.hat-land .band3d,
html[data-thema="amber"] body.hat-land .sekt,html[data-thema="amber"] body.hat-land .u7,
html[data-thema="amber"] body.hat-land .c6,html[data-thema="amber"] body.hat-land footer{
  background-color:rgba(12,10,7,.86)}
/* Abschnitte kommen als Objekte aus der Tiefe - Skalierung, keine Neigung */
.sekt.tief,.p2.tief,.signal.tief,.labor.tief,.u7.tief,.c6.tief{
  opacity:0;transform:scale(.97) translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.sekt.tief.da,.p2.tief.da,.signal.tief.da,.labor.tief.da,.u7.tief.da,.c6.tief.da{opacity:1;transform:none}
body.rm .tief{opacity:1;transform:none;transition:none}
body.rm .hv__land.fest{display:none}

/* ---------- 3 · Labor als Rack ---------- */
.labor__rack{position:relative;grid-template-columns:1fr 1fr 1fr}
.labor__mod{padding-top:0}
/* Schrauben in den Ecken */
.labor__mod::before,.labor__mod::after,.labor__mod .schr::before,.labor__mod .schr::after{
  content:"";position:absolute;width:7px;height:7px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#5A6A74,#1A2329);box-shadow:inset 0 0 2px #000,0 1px 0 rgba(255,255,255,.06)}
.labor__mod::before{left:6px;top:6px}.labor__mod::after{right:6px;top:6px}
.labor__mod .schr::before{left:6px;bottom:6px}.labor__mod .schr::after{right:6px;bottom:6px}
.labor__mod .lbl{left:20px;top:11px}
/* Buchsen */
.labor__buchse{position:absolute;bottom:-9px;width:14px;height:14px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 50% 50%,#05080A 35%,#2A353D 40%,#0E1418 60%);
  border:1px solid var(--faint)}
.labor__buchse.aus{right:14px}.labor__buchse.ein{left:14px}
.labor__kabel{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.labor__kabel path{fill:none;stroke-width:3;stroke-linecap:round}
.labor__kabel .k1{stroke:var(--blue);opacity:.8}
.labor__kabel .k2{stroke:var(--green);opacity:.8}
.labor__kabel .schatten{stroke:#000;opacity:.5;stroke-width:5}
/* Envelope-Modul */
.labor__env canvas{height:220px}
.labor__env .labor__leiste{gap:6px 12px}
.labor__env .labor__reg input[type=range]{width:64px}
.labor__env .labor__reg b{min-width:34px}
@media (max-width:900px){
  .labor__rack{grid-template-columns:1fr}
  .labor__kabel{display:none}
  .labor__buchse{display:none}
  .labor__env canvas{height:170px}
}

/* ---------- 4 · Fenster-Pin auf der Produktseite ---------- */
.wachsen{position:relative;margin:0 -22px;padding:0 22px;border-top:1px solid var(--line);
  background:var(--bg)}
.wachsen__lauf{height:280vh;position:relative}
.wachsen__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.wachsen__objekt{position:relative;width:var(--wb,260px);aspect-ratio:16/9;border:1px solid var(--line);
  background:var(--bg);box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
  transition:width .05s linear}
.wachsen__objekt canvas{display:block;width:100%;height:100%}
.wachsen__text{position:absolute;left:22px;bottom:34px;max-width:38ch;z-index:2}
.wachsen__text .sec-h{margin-top:12px}
.wachsen__text p{position:absolute;left:0;top:100%;margin:12px 0 0;font:400 15px/1.6 var(--sans);color:var(--dim);
  max-width:38ch;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.wachsen__text p.an{opacity:1;transform:none}
.wachsen__text{bottom:110px}
@media (max-width:900px),(max-height:700px){
  .wachsen__text{bottom:auto}
  .wachsen__text p{position:static;opacity:1;transform:none}
}
body.rm .wachsen__text p{position:static;opacity:1;transform:none}
.wachsen__mass{position:absolute;right:22px;bottom:34px;text-align:right;z-index:2;
  font:500 12px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.wachsen__mass b{display:block;font:600 34px/1 var(--anzeige);letter-spacing:-.02em;color:var(--fg);
  font-variant-numeric:tabular-nums}
.wachsen__ecke{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);opacity:0;transition:opacity .3s}
.wachsen__objekt.zieht .wachsen__ecke{opacity:1}
@media (max-width:900px),(max-height:700px){
  .wachsen__lauf{height:auto}
  .wachsen__pin{position:static;height:auto;flex-direction:column;gap:22px;padding:52px 0}
  .wachsen__objekt{width:100%!important}
  .wachsen__text,.wachsen__mass{position:static;max-width:none;text-align:left}
}
@media (max-width:760px){.wachsen{margin:0 -18px;padding:0 18px}}
body.rm .wachsen__lauf{height:auto}
body.rm .wachsen__pin{position:static;height:auto;flex-direction:column;gap:22px;padding:52px 0}
body.rm .wachsen__objekt{width:100%!important}
body.rm .wachsen__text,body.rm .wachsen__mass{position:static}

/* ---------- 6 · Ladesequenz: die Bildmarke baut sich auf ---------- */
.lade{position:fixed;inset:0;z-index:210;background:var(--bg);display:flex;align-items:center;
  justify-content:center;pointer-events:none;transition:opacity .4s}
.lade.weg{opacity:0}
.lade svg{width:min(28vw,180px);height:auto;overflow:visible}
.lade .welle{fill:none;stroke:var(--blue);stroke-width:1.2;opacity:.35;
  stroke-dasharray:200;stroke-dashoffset:200;animation:lade-welle .55s ease-out forwards}
.lade .stiel{stroke:var(--blue);stroke-width:3;stroke-linecap:round;
  transform-origin:center 32px;transform:scaleY(0);animation:lade-stiel .3s ease-out forwards}
.lade .punkt{fill:var(--blue);transform-box:fill-box;transform-origin:center;transform:scale(0);
  animation:lade-punkt .25s cubic-bezier(.2,.8,.2,1.4) forwards}
.lade .punkt.gruen{fill:var(--green)}
@keyframes lade-welle{to{stroke-dashoffset:0}}
@keyframes lade-stiel{to{transform:scaleY(1)}}
@keyframes lade-punkt{to{transform:scale(1)}}
body.rm .lade{display:none}

/* ---------- 7 · Produktkarte als echte Front ---------- */
.p2__schirm{aspect-ratio:260/169}
.p2__live.front{opacity:1}
/* Nur die CUE-Karte traegt eine gerechnete Front - bei den anderen Karten (HALO, CAIRN)
   blieb der Schirm dadurch leer (11.9.2026). Ausblenden nur, wo die Front wirklich liegt. */
.p2__g[href="/products/cue.html"] .p2__schirm svg,.p2__g[href="/products/cue.html"] .p2__schirm img{display:none}
.p2__g:not([href="/products/cue.html"]) .p2__schirm img{opacity:.55}
/* Echte Geraete-Fronten (16.9.2026): scharf, voll sichtbar, kein Motiv-Icon darueber, Ausschnitt oben links */
.p2__schirm img.geraet{opacity:1;object-position:left top}
.p2__g:hover .p2__schirm img.geraet{opacity:1}
.p2__schirm:has(img.geraet) svg{display:none}
.p2__schirm:has(img.geraet){box-shadow:inset 0 0 0 1px rgba(143,216,255,.08)}
.p2__art{display:none}
.p2__regler{align-items:flex-end;gap:14px}
.p2__r{cursor:ns-resize;touch-action:none;position:relative}
.p2__r::after{transform:translateX(-50%) rotate(var(--rot,0deg));transform-origin:50% 10px}
.p2__r i{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:5px;
  font:500 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;font-style:normal}
.p2__r.aktiv i{color:var(--blue)}
.p2__regler{padding-bottom:16px}
.p2__auf{display:none}
.p2__g:hover .p2__r::before,.p2__g.wach .p2__r::before{background:var(--green);box-shadow:0 0 8px rgba(95,227,168,.8)}

/* ---------- 8 · Footer-Welle ---------- */
.fuss__welle{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.fuss__welle canvas{display:block;width:100%;height:100%}
footer{position:relative}
body.rm .fuss__welle{display:none}


/* ====== Ebene v16 — Aufraeumen ====== */
/* Demo ohne Buehnen-Tilt: flach, ohne Spiegel, Podest, Licht */
.buehne__raum{perspective:none!important;padding-top:0!important}
.buehne__objekt{transform:none!important;transition:none!important}
.buehne__spiegel,.buehne__podest,.buehne__licht,.buehne__linie,.buehne__fuss{display:none!important}
/* Kompakte Abschnitte auf der Produktseite */
.kompakt .lead{font-size:14.5px;max-width:64ch}
.kompakt .sec-h{font-size:clamp(20px,2.4vw,26px)}
.kompakt .zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.kompakt .zwei figure{margin:0}
.kompakt .zwei img{width:100%;height:auto;border:1px solid var(--line);display:block}
.kompakt .zwei figcaption{margin-top:8px}
.kompakt .specs{margin-top:16px;font-size:13.5px}
.kompakt .schritte{margin-top:16px}
.kompakt .schritte img{max-width:100%}
@media (max-width:760px){.kompakt .zwei{grid-template-columns:1fr}}


/* ====== Motion-Ebene v17 (aus motion/v17/motion17.css) ====== */
/* ======================================================================
   Motion-Ebene v17 — Durchgang vom 09.09.2026
   Landschaft nur im Hero · Hero-Schrift leicht statt breit · Über uns ohne
   Zeitleiste, mit Instagram · Scroll-Show: Fortschrittslinie, Wortmasken,
   Abschnitts-Einblendung, Zeigerlicht, Laufband, Karten-Glanz, Cover-Parallax
   ====================================================================== */

/* ---------- Hero: die Schrift ---------- */
/* Archivo Expanded 800 war die Faust. Jetzt IBM Plex Sans Light, gross,
   eng gesetzt - die Zahl im Panel ist das Schwere, die Zeile das Leichte.
   "not the studio" in Medium und Blau, damit der Gegensatz Gewicht hat. */
.hv h1{font-family:var(--sans);font-variation-settings:normal;font-weight:300;
  font-size:clamp(46px,8.2vw,112px);line-height:.96;letter-spacing:-.035em;
  max-width:11ch;color:#F3F8FB}
.hv h1 em{font-weight:500;color:var(--blue);letter-spacing:-.03em}
@media (min-width:900px){.hv h1{font-size:clamp(50px,6.5vw,96px)}}
/* Wörter kommen einzeln aus einer Maske */
.hv h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.hv h1 .w > span{display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;transition-delay:var(--d,0s)}
.hv h1.auf .w > span{transform:none;opacity:1}
.hv__satz,.hv__unten{opacity:0;transform:translateY(14px);transition:opacity .8s .55s,transform .8s .55s cubic-bezier(.2,.8,.2,1)}
.hv.auf .hv__satz,.hv.auf .hv__unten{opacity:1;transform:none}
body.rm .hv h1 .w > span,body.rm .hv__satz,body.rm .hv__unten{transform:none;opacity:1;transition:none}
/* Das Panel atmet: leichtes Schweben, kein Kippen */
.hv__cue{animation:v17-schweben 9s ease-in-out infinite}
@keyframes v17-schweben{0%,100%{translate:0 0}50%{translate:0 -10px}}
body.rm .hv__cue{animation:none}
/* Ein Lichtstreif zieht alle paar Sekunden ueber das Panel */
.hv__cue::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);
  transform:translateX(-120%);animation:v17-streif 7s ease-in-out 2s infinite}
@keyframes v17-streif{0%,70%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
body.rm .hv__cue::before{display:none}

/* ---------- Fortschrittslinie oben ---------- */
.v17-lauf{position:fixed;left:0;top:0;height:2px;width:100%;z-index:220;pointer-events:none;
  transform-origin:left;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--blue),var(--green))}

/* ---------- Zeigerlicht ---------- */
/* Ein weicher Lichtfleck, der dem Zeiger folgt - Licht, keine Neigung.
   mix-blend-mode screen, damit er auf Schwarz aufhellt und auf Weiss nichts tut. */
.v17-licht{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;
  pointer-events:none;z-index:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(143,216,255,.09) 0%,rgba(143,216,255,.035) 35%,transparent 70%);
  mix-blend-mode:screen;transition:opacity .6s;will-change:transform}
html[data-thema="amber"] .v17-licht{background:radial-gradient(circle,rgba(245,179,107,.09) 0%,rgba(245,179,107,.035) 35%,transparent 70%)}
.v17-licht.an{opacity:1}
@media (pointer:coarse){.v17-licht{display:none}}
body.rm .v17-licht{display:none}

/* ---------- Abschnitte kommen aus der Tiefe ---------- */
.v17-auf{opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.v17-auf.da{opacity:1;transform:none}
body.rm .v17-auf{opacity:1;transform:none;transition:none}

/* ---------- Ueberschriften: Wort fuer Wort aus der Maske ---------- */
.v17-wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.v17-wort > span{display:inline-block;transform:translateY(105%);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.da .v17-wort > span,.v17-fertig .v17-wort > span{transform:none}
body.rm .v17-wort > span{transform:none;transition:none}

/* ---------- Zitat: Wörter leuchten nacheinander auf ---------- */
.b4__k > p .v17-z{opacity:.18;transition:opacity .5s;transition-delay:var(--d,0s)}
.b4__k > p.da .v17-z{opacity:1}
body.rm .b4__k > p .v17-z{opacity:1;transition:none}

/* ---------- Laufband: fuer wen ---------- */
.v17-band{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;background:var(--bg);position:relative;z-index:1}
.v17-band__spur{display:flex;gap:0;width:max-content;animation:v17-band 46s linear infinite}
.v17-band:hover .v17-band__spur{animation-play-state:paused}
.v17-band span{font:500 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--faint);
  padding:0 34px;white-space:nowrap;display:inline-flex;align-items:center;gap:34px}
.v17-band span::after{content:"";width:5px;height:5px;background:var(--blue);opacity:.55}
.v17-band span:nth-child(4n)::after{background:var(--green)}
@keyframes v17-band{to{transform:translateX(-50%)}}
body.rm .v17-band__spur{animation:none}

/* ---------- Produktkarte: Glanz beim Zeigen ---------- */
.p2__g{overflow:hidden}
.p2__g::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(143,216,255,.10) 50%,transparent 60%);
  transform:translateX(-130%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.p2__g:hover::after{transform:translateX(130%)}
.p2__g{transition:box-shadow .5s,border-color .5s}
.p2__g:hover{box-shadow:0 30px 80px -40px rgba(143,216,255,.35);border-color:rgba(143,216,255,.35)}

/* ---------- Ueber uns: ohne Zeitleiste, mit Instagram ---------- */
.u7__insta{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:12px 16px 12px 12px;
  border:1px solid var(--line);text-decoration:none;color:var(--fg);
  transition:border-color .3s,background .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.u7__insta:hover{border-color:var(--blue);background:rgba(143,216,255,.05);transform:translateY(-2px)}
.u7__insta svg{width:28px;height:28px;flex:none}
.u7__insta b{display:block;font:500 13px/1.3 var(--sans)}
/* 19.09.2026: line-height 1 war der Fehler. Auf dem Handy bricht die
   Unterzeile um, und mit Zeilenhoehe 1 stand die zweite Zeile unter
   dem Rahmen statt darin. Dazu darf der Kasten nicht breiter werden
   als die Spalte, und das Zeichen gehoert nach oben statt in die
   Mitte, sobald zwei Zeilen daneben stehen. */
.u7__insta span{display:block;font:400 10px/1.45 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:5px}
@media (max-width:640px){
  .u7__insta{display:flex;align-items:flex-start;max-width:100%;padding:14px 14px 15px 12px}
  .u7__insta svg{margin-top:2px}
  .u7__insta span{letter-spacing:.12em}
}
.u7__insta:hover span{color:var(--blue)}
/* Fuss: das Instagram-Zeichen neben den Links */
.g8 nav a.g8__insta{display:inline-flex;align-items:center;gap:8px}
.g8 nav a.g8__insta svg{width:15px;height:15px}

/* ---------- Produktseite: Cover gleitet, Titel kommt ---------- */
.prod .visual .cover{will-change:transform;transition:transform .12s linear}
.prod .visual{box-shadow:0 40px 120px -50px rgba(143,216,255,.35)}


/* ====== Motion-Ebene v18 (aus motion/v18/motion18.css) ====== */
/* Motion-Ebene v18 (16.9.2026) — der Hero zeigt alle Geraete: die Flotte.
   Vier echte Fronten (2x/4x gerendert) als gestaffelte, leicht gekippte Karten rechts,
   Text links. Kaltlicht: keine Rundungen, kein Rot; atmen statt blinken. */
.hv__foto{display:none}
.hv{min-height:min(90vh,820px)}
.hv__flotte{position:absolute;right:4%;top:7%;width:min(50%,720px);aspect-ratio:1.28;z-index:3;   /* ueber .hv::after (z2): die Fronten bleiben hell */
  perspective:1500px;transform:translateY(var(--hv-y,0px))}
.hv__flotte .buehne{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(calc(-9deg + var(--mx,0) * 5deg)) rotateX(calc(var(--my,0) * -4deg));
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fl{position:absolute;display:block;border:1px solid #26333B;background:var(--panel);overflow:hidden;
  transform:translateZ(var(--z,0px)) translateY(var(--schwebe,0px));transform-style:preserve-3d;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 12px 30px -12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(143,216,255,.06);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s,filter .7s,opacity .7s;
  filter:brightness(.95) saturate(.98);text-decoration:none;color:var(--fg);
  animation:fl-schweben var(--dauer,8s) ease-in-out infinite;animation-delay:var(--phase,0s)}
.fl img{display:block;width:100%;height:auto}
/* Namensschild: nur die Karte, die gerade vorne steht, nennt sich.
   Das ist nicht nur ruhiger — es loest auch ein echtes Problem: liegen alle vier
   Schilder gleichzeitig da, verdeckt die naechste Karte immer das Schild der
   vorigen, und der Besucher liest halbe Woerter. Mit nur einem sichtbaren Schild
   gibt es nur einen Fall zu pruefen, und der ist durch --z-vorn garantiert. */
.fl .fl__tag{position:absolute;left:0;bottom:0;display:flex;gap:10px;align-items:baseline;
  padding:7px 10px;background:rgba(8,9,10,.88);border-top:1px solid rgba(143,216,255,.14);border-right:1px solid rgba(143,216,255,.14);
  font:600 10px/1.35 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg);
  max-width:100%;flex-wrap:wrap;   /* das Schild bleibt IMMER in seiner Karte — sonst haengt es bei schmalen Fenstern rechts heraus */
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.fl .fl__tag span{font-weight:400;color:var(--dim);letter-spacing:.08em;text-transform:none;font-size:11px}
.fl.vorn .fl__tag,.fl:hover .fl__tag{opacity:1;transform:none}
.fl.vorn,.fl:hover{filter:brightness(1) saturate(1);z-index:5;
  box-shadow:0 70px 120px -40px rgba(0,0,0,1),0 0 0 1px rgba(143,216,255,.25),0 0 60px -20px rgba(143,216,255,.25)}
/* Feste Tiefe statt --z + Zuschlag: die vordere Karte ist IMMER die vorderste,
   egal welche es gerade ist. Sonst stuende eine Karte mit kleinem --z auch als
   "vorn" noch hinter SCREE — und ihr Schild waere verdeckt. */
.fl:hover{transform:translateZ(164px) translateY(var(--schwebe,0px))}
.fl.vorn{transform:translateZ(150px) translateY(var(--schwebe,0px))}
.fl.vorn:hover{transform:translateZ(164px) translateY(var(--schwebe,0px))}
.hv__flotte.hat-vorn .fl:not(.vorn):not(:hover){filter:brightness(.8) saturate(.92)}
/* Anordnung (gemessen, nicht geschaetzt — siehe Messung unten):
   Jede Karte traegt ihr Namensschild unten links. Die Staffelung ist so gelegt,
   dass KEINE Karte das Schild einer anderen verdeckt, und dass die unterste Karte
   (HALO, sehr breit und flach) rechts von der Ueberschrift bleibt. Wer hier Werte
   aendert, misst danach nach: werkzeug/hero_messen.py sagt, ob es noch stimmt.
      Seitenverhaeltnisse der Fronten: CUE 1.78 · CAIRN 1.53 · HALO 4.79 · SCREE 1.54
   --z staffelt die Tiefe; grosses --z schiebt die Karte durch die Perspektive nach
   aussen, deshalb hat SCREE (rechts) bewusst Luft zum rechten Rand. */
.fl--cue{left:0;top:0;width:44%;--z:10px;--phase:0s;--dauer:8s}
.fl--cairn{left:40%;top:8%;width:60%;--z:60px;--phase:-2s;--dauer:9s}
.fl--halo{left:20%;top:62%;width:62%;--z:30px;--phase:-4s;--dauer:7.5s}
.fl--scree{left:62%;top:58%;width:36%;--z:110px;--phase:-6s;--dauer:8.5s}
/* SILT lag bis zum 19.09.2026 hinten links (left:-3%, top:44%) und ragte damit
   in die Ueberschrift: gemessen 118 px Ueberlappung mit dem H1-Kasten bei
   1440 px, 53 bei 1280, 32 bei 1680. Auf der gezeichneten Leinwand fiel das
   kaum auf, vor dem Film sah die Karte abgeschnitten aus.
   Die neue Lage ist nicht geschaetzt: 90 Stellungen wurden auf 1280/1440/1680
   durchgemessen, uebrig blieben die ohne Textueberlappung, ohne verdecktes
   Namensschild und ohne Ueberstand. Aus denen ist das hier die, die noch zur
   Gruppe gehoert statt allein zu stehen. Wer sie aendert, misst nach:
   werkzeug/hero_messen.py. */
.fl--silt{left:18%;top:80%;width:30%;--z:120px;--phase:-3s;--dauer:9.5s}
@keyframes fl-schweben{0%,100%{--schwebe:0px}50%{--schwebe:-9px}}
/* Text links bekommt Platz */
.hv__innen{max-width:var(--wrap)}
.hv h1{max-width:12ch}
@media (min-width:900px){.hv h1{font-size:clamp(44px,5.2vw,76px)}}
.hv__satz{max-width:44ch}
.hv__unten .btn.ghost{background:transparent;color:var(--blue)}
@media (max-width:1100px){.hv__flotte{width:min(50%,620px);top:12%}}
@media (max-width:900px){
  .hv{min-height:auto;padding-top:24px;flex-direction:column;align-items:stretch}   /* Flotte oben, Text darunter */
  .hv__land,.hv__band{display:none}
  .hv__flotte{position:relative;right:auto;top:auto;width:auto;aspect-ratio:auto;perspective:none;margin:8px 18px 18px;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;order:2;transform:none}
  .hv__flotte .buehne{position:static;display:contents;transform:none}
  .fl{position:static;width:auto!important;transform:none!important;animation:none;filter:none}
  /* ohne Zeigegeraet gibt es kein "vorn" — hier nennt sich jede Karte selbst */
  .fl .fl__tag{opacity:1;transform:none;white-space:normal;flex-wrap:wrap;gap:3px 8px;max-width:100%}
  .fl--halo{grid-column:1/-1}
  .hv__innen{position:relative;order:1;padding-bottom:12px}
  .hv::after{display:none}
}
/* Unter 560 px ist die Karte schmaler als der Beisatz — dann nur der Name.
   Gemessen mit werkzeug/hero_messen.py, nicht geschaetzt. */
@media (max-width:560px){.fl .fl__tag span{display:none}}
body.rm .fl{animation:none;transition:none}
body.rm .hv__flotte .buehne{transform:rotateY(-9deg)}


/* ====== Motion-Ebene v19 (aus motion/v19/motion19.css) ====== */
/* ======================================================================
   Motion-Ebene v19 — Durchgang vom 17.09.2026
   Gewaehlt auf der Schauseite lab/hero-varianten.html:
     Schrift 5 — Bricolage Grotesque Light fuer die Hero-Ueberschrift
                 (v17 setzte IBM Plex Sans Light, v18 nur die Groesse)
     Welle 2  — Hoehenlinien statt Spektrum-Landschaft als Kulisse
                (die Leinwand liegt seit v14 fest hinter der ganzen Seite,
                 also traegt sie die Karte auch unter dem Hero)
   Dazu: die Flotte wird greifbar — Tiefenschaerfe beim Zeigen, Lichtstreif,
   Eckwinkel, und ein Klick holt die Front gross nach vorn mit Panel; der
   zweite Klick (oder der Knopf) oeffnet die Produktseite.
   ====================================================================== */

/* ---------- 1 · Die Ueberschrift ---------- */
/* Bricolage Grotesque: Display mit Kanten, leicht kondensiert, optische
   Groesse 72. Light fuer die erste Zeile, Bold fuer "show their work" —
   der Gegensatz traegt die Zeile, nicht die Farbe allein. */
.hv h1{font-family:"Bricolage Grotesque",var(--sans);font-weight:200;
  font-size:clamp(46px,5.5vw,82px);line-height:.92;letter-spacing:-.035em;
  max-width:12ch;color:#F3F8FB;font-variation-settings:"opsz" 72}
.hv h1 em{font-weight:700;color:var(--blue);letter-spacing:-.035em;font-style:normal}
@media (min-width:900px){.hv h1{font-size:clamp(46px,5.5vw,82px)}}
@media (max-width:560px){.hv h1{font-size:clamp(38px,10.5vw,52px);max-width:14ch}}

/* ---------- 2 · Flotte: Zeigen ---------- */
/* Das Schweben lief in v18 ueber eine Custom Property in der transform
   (--schwebe). Eine Animation auf einer nicht registrierten Custom Property
   wird nicht interpoliert und erzwingt in jedem Bild eine Stilneuberechnung
   der Karte samt Bild und Schatten — gemessen: 33 ms je Bild statt 16,7 ms,
   und beim Zeigen sprang es auf 116 ms. Jetzt schwebt die Karte ueber die
   eigene Eigenschaft `translate` (vom Compositor erledigt), und `transform`
   traegt nur noch die Tiefe. Beides setzt der Browser zusammen. */
.fl{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .5s,filter .5s,opacity .45s;
  transform:translateZ(var(--z,0px));
  animation:fl19-schweben var(--dauer,8s) ease-in-out infinite;
  animation-delay:var(--phase,0s);
  will-change:transform,translate;backface-visibility:hidden}
@keyframes fl19-schweben{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* Die Buehne haengt nicht mehr an --mx/--my: motion19.js schreibt ihre
   Drehung in jedem Bild selbst (rAF), weil eine Transition auf einer
   Custom Property beim Zeigen nachzieht und zuckt (C3). */
.hv__flotte .buehne{transform:rotateY(-9deg);transition:none;will-change:transform}
/* Tiefenschaerfe: wer angesehen wird, kommt — die anderen treten zurueck.
   Das unscharfe Zuruecktreten ist der eigentliche Effekt; ohne ihn sieht
   das Vorkommen der einen Karte nach nichts aus. */
/* Zurueckgetreten wird ueber Helligkeit und Tiefe, NICHT mehr ueber blur():
   ein Weichzeichner auf drei grossen Ebenen in einer 3D-Buehne kostete beim
   Zeigen gemessen 50 ms je Bild statt 33 — das war das Wackeln. Dieselbe
   Aussage, ein Drittel billiger. */
.hv__flotte:hover .fl:not(:hover):not(.zoom),
.hv__flotte:focus-within .fl:not(:focus-visible):not(.zoom){
  filter:brightness(.5) saturate(.72);
  transform:translateZ(calc(var(--z,0px) - 52px)) scale(.985)}
.fl:hover,.fl:focus-visible,.fl.vorn:hover,.fl.vorn:focus-visible{transform:translateZ(186px) scale(1.015);
  box-shadow:0 80px 130px -40px rgba(0,0,0,1),0 0 0 1px rgba(143,216,255,.34),
             0 0 80px -18px rgba(143,216,255,.3)}
.fl:focus-visible{outline:none}
/* v18 hing an .fl.vorn noch --schwebe in der transform — hier ohne */
.fl.vorn{transform:translateZ(150px)}
/* Eckwinkel ziehen sich in die Karte — Messgeraet statt Rahmen */
.fl::before,.fl::after{content:"";position:absolute;width:34px;height:34px;pointer-events:none;
  z-index:6;border-color:var(--blue);opacity:0;
  transition:opacity .35s,top .45s cubic-bezier(.2,.8,.2,1),left .45s cubic-bezier(.2,.8,.2,1),
             bottom .45s cubic-bezier(.2,.8,.2,1),right .45s cubic-bezier(.2,.8,.2,1)}
.fl::before{top:14px;left:14px;border-top:1px solid;border-left:1px solid}
.fl::after{bottom:14px;right:14px;border-bottom:1px solid;border-right:1px solid}
.fl:hover::before,.fl:focus-visible::before{opacity:1;top:6px;left:6px}
.fl:hover::after,.fl:focus-visible::after{opacity:1;bottom:6px;right:6px}
/* Ein Lichtstreif laeuft EINMAL durch, wenn der Zeiger kommt oder die
   Karte nach vorn tritt. Am Ende auf 0 — ein stehender Streif waere ein
   Schleier auf dem Bild (und wuerde die Karte rechts ueberragen). */
.fl__streif{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%);
  transform:translateX(-120%)}
.fl:hover .fl__streif,.fl.vorn .fl__streif{
  animation:fl19-streif 1.05s cubic-bezier(.3,.7,.2,1)}
@keyframes fl19-streif{0%{opacity:1;transform:translateX(-120%)}92%{opacity:1}
  100%{opacity:0;transform:translateX(120%)}}
/* Das Schild sagt, dass der Klick etwas tut */
.fl__oeff{margin-left:auto;padding-left:12px;color:var(--blue);font-weight:500;letter-spacing:.16em;
  opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.fl:hover .fl__oeff,.fl:focus-visible .fl__oeff{opacity:1;transform:none}
.fl .fl__tag{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),background .4s}
.fl:hover .fl__tag{background:rgba(8,9,10,.94);border-top-color:rgba(143,216,255,.3)}

/* ---------- 3 · Flotte: Klick holt die Front nach vorn ---------- */
.hv__flotte::after{content:"";position:absolute;inset:-40vh -40vw;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 70% 40%,rgba(4,6,8,.55),rgba(4,6,8,.86) 70%);
  opacity:0;transition:opacity .5s}
.hv__flotte.hat-zoom::after{opacity:1;pointer-events:auto}
/* Die Buehne ueber den Schleier heben: sie ist wegen ihres transform ein
   eigener Stapelkontext, das z-index der Karte wirkt nur INNERHALB. Ohne
   das liegt der Schleier auf der gezoomten Karte. */
.hv__flotte.hat-zoom .buehne{z-index:2}
/* Beim Zoom steht die Buehne still — kein Neigen zum Zeiger */
.hv__flotte.hat-zoom .buehne{transform:none}
.hv__flotte.hat-zoom .fl:not(.zoom){
  opacity:.14;filter:brightness(.4) saturate(.6);pointer-events:none;
  transform:translateZ(calc(var(--z,0px) - 120px)) scale(.96)}
.fl.zoom{z-index:9;left:50%;top:39%;width:min(74%,600px);
  transform:translate(-50%,-50%) translateZ(280px);animation:none;translate:0 0;
  filter:brightness(1.05) saturate(1.02);
  box-shadow:0 90px 160px -40px rgba(0,0,0,1),0 0 0 1px rgba(143,216,255,.4),
             0 0 120px -20px rgba(143,216,255,.32)}
.fl.zoom .fl__tag{opacity:1;transform:none}
/* Der Reihenwechsel (v18, alle 4,5 s) laeuft weiter, soll aber im Zoom
   nichts bewegen: hier wird "vorn" wirkungslos gemacht. */
.hv__flotte.hat-zoom .fl.vorn:not(.zoom){transform:translateZ(calc(var(--z,0px) - 120px))}
.hv__flotte.hat-zoom .fl.vorn .fl__streif{animation:none}
/* Das Panel haengt NICHT in der 3D-Buehne — sonst wird die Schrift weich */
.fl__panel{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%) translateY(10px);
  z-index:10;width:min(74%,600px);padding:13px 16px 15px;background:rgba(8,9,10,.94);
  border:1px solid rgba(143,216,255,.22);opacity:0;pointer-events:none;
  transition:opacity .4s .1s,transform .5s .1s cubic-bezier(.2,.8,.2,1)}
.hv__flotte.hat-zoom .fl__panel{opacity:1;transform:translateX(-50%);pointer-events:auto}
.fl__panel b{display:block;font:600 11px/1.2 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg)}
.fl__panel p{margin:6px 0 0;font:400 13px/1.45 var(--sans);color:var(--dim);max-width:52ch}
.fl__panel .zeile{display:flex;gap:14px;align-items:center;margin-top:11px;flex-wrap:wrap}
.fl__panel .art{font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.fl__panel .zu{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.fl__panel a.auf{margin-left:auto;padding:9px 14px;border:1px solid var(--blue);color:var(--blue);
  font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  transition:background .25s,color .25s}
.fl__panel a.auf:hover,.fl__panel a.auf:focus-visible{background:var(--blue);color:#06121A}
/* Auf dem Handy liegt die Flotte als Raster, da gibt es keinen Zoom */
@media (max-width:900px){
  .fl__panel{display:none}
  .fl::before,.fl::after{display:none}
  .fl__oeff{opacity:1;transform:none}
}
body.rm .fl__streif{animation:none;display:none}
body.rm .fl:hover,body.rm .fl:focus-visible{transform:none}


/* ====== Motion-Ebene v20 (aus motion/v20/motion20.css) ====== */
/* ======================================================================
   Motion-Ebene v20 — Durchgang vom 17.09.2026
   Die Karten in "What we make" leben. CUE hatte seine gerechnete Front
   schon (v14, cue-demo.js); HALO, CAIRN und SCREE zeigten ein Standbild.
   Jetzt bekommt jedes Gerät sein eigenes Instrument in Bewegung:
     HALO  — das TAIL-Feld: Ausklangkurve, Laufpunkt, zwei Pegel
     CAIRN — der Raum: Messringe, Decay-Ring, atmende Spektrumblume, Sweep
     SCREE — Spektrum mit drei Splits und vier Bandtafeln mit Pegeln
   Gezeichnet, nicht abgefilmt: dieselben Zahlen wie in v13/v19 (Signal →
   FFT), dieselben Beschriftungen wie im Gerät.
   ====================================================================== */

.p2__live20{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .6s;
  pointer-events:none}
.p2__live20 canvas{display:block;width:100%;height:100%}
/* Sobald die Anzeige läuft, IST sie das Bild der Karte — das Standbild und
   das Motiv-Icon darunter würden nur durchscheinen. */
.p2__g.lebt20 .p2__live20{opacity:1}
.p2__g.lebt20 .p2__schirm img,.p2__g.lebt20 .p2__schirm svg{opacity:0}
.p2__g.lebt20 .p2__art{opacity:0;transition:opacity .4s}
/* Beim Zeigen tritt die Anzeige einen Hauch hervor — mehr braucht es nicht,
   die Karte hebt sich schon. */
.p2__g.lebt20:hover .p2__live20{filter:brightness(1.08)}
.p2__g.lebt20 .p2__live20{transition:opacity .6s,filter .4s}
/* Ruhemodus: die Anzeige bleibt aus — dann muss aber das Standbild zurueck,
   sonst steht die Karte leer da (gemessen: Bild auf opacity 0, Leinwand aus). */
body.rm .p2__live20{display:none}
body.rm .p2__g.lebt20 .p2__schirm img{opacity:1}
body.rm .p2__g.lebt20 .p2__schirm svg{opacity:1}
body.rm .p2__g.lebt20 .p2__art{opacity:1}

/* ---------- Produktseiten: das erste Feld der Kachelreihe lebt ----------
   Auf halo/cairn/scree steht als erste Kachel genau das Feld, das hier
   gezeichnet wird (Tail · Herz · Bands). Der Kasten ist 16:10, die Anzeige
   4:3 — sie wird gleichmaessig eingepasst und zentriert, nicht gedehnt.
   Kein z-index: so bleibt der Verlauf aus .pz-bild::after darueber liegen,
   der die Unterkante fuer die Schrift abdunkelt. */
.pz-bild .pz-live20{position:absolute;inset:0;pointer-events:none}
.pz-bild .pz-live20 canvas{display:block;width:100%;height:100%}
.pz-bild.lebt20 img{opacity:0}
.pz-k:hover .pz-bild.lebt20 .pz-live20{filter:brightness(1.08)}
.pz-bild .pz-live20{transition:filter .4s}
body.rm .pz-bild .pz-live20{display:none}
body.rm .pz-bild.lebt20 img{opacity:.92}


/* ====== Motion-Ebene v22 (aus motion/v22/motion22.css) ====== */
/* ======================================================================
   Motion-Ebene v22 — die Dramaturgie der Produktseiten, 18.09.2026

   Vorbild ist die Art, wie Minimal Audio eine Produktseite baut, uebersetzt
   in Kaltlicht. Drei Eingriffe, alle im Stil, keiner im Inhalt:

     1 · Der Geraetename steht IM Satz, nicht darueber. Eine Zeile, die man
         vorlesen kann, statt einer Marke mit Untertitel.
     2 · Die Abschnitte bekommen eine Stimme: grosse, eng gesetzte Versalien.
         Eine Ueberschrift, die man ueber den Raum liest, nicht ueberfliegt.
     3 · Aus der Kachelreihe werden breite Bloecke im Wechsel — Bild und
         Text nebeneinander, Seite um Seite, statt vier gleicher Quadrate.
         Das Markup bleibt, wie es ist: v20 haengt seine lebende Anzeige
         weiter an dieselbe erste Kachel.
   ====================================================================== */

/* ---------- 1 · Der Name im Satz ---------- */
.pz-hero h1{
  font-size:clamp(30px,5.4vw,62px);line-height:1.04;letter-spacing:-.03em;
  max-width:19ch;margin:16px auto 0;text-wrap:balance;
}
/* Der Strich unter dem Namen als Unterstreichung, nicht als Rahmen: bei
   einer Ueberschrift mit line-height 1.04 rutscht ein border-bottom in die
   naechste Zeile (gesehen auf der CAIRN-Seite). */
.pz-hero h1 .nm{
  font-family:var(--mono);font-weight:600;letter-spacing:.01em;
  text-decoration:underline;text-decoration-color:var(--green);
  text-decoration-thickness:3px;text-underline-offset:.14em;
}
.pz-hero h1 .weich{color:var(--dim)}
/* Der bisherige Satz wird zum Nachsatz: kleiner, ruhiger, eine Stufe tiefer. */
.pz-hero .pz-satz{font-size:clamp(15px,1.5vw,17px);color:var(--dim);max-width:52ch;margin-top:18px}
.pz-hero .pz-satz b{color:var(--fg);font-weight:400}

/* CUE hat einen zweispaltigen Kopf ohne .pz-hero — dieselbe Stimme, links. */
.top ~ main h1,.wrap > div > h1{text-wrap:balance}
main h1 .nm{font-family:var(--mono);font-weight:600;letter-spacing:.01em;
  text-decoration:underline;text-decoration-color:var(--green);
  text-decoration-thickness:3px;text-underline-offset:.14em}
main h1 .weich{color:var(--dim)}

/* ---------- 2 · Die Abschnitte bekommen eine Stimme ---------- */
.sec-h{
  font-size:clamp(26px,4.4vw,50px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;font-weight:700;max-width:18ch;margin-bottom:18px;
}
/* Das kleine Label darueber bleibt die Einordnung, jetzt mit mehr Luft. */
.lbl{margin-bottom:12px}

/* ---------- 3 · Kacheln werden Bloecke ---------- */
.pz-kacheln{grid-template-columns:1fr;gap:0}
.pz-k{
  display:grid;grid-template-columns:1.06fr .94fr;gap:40px;align-items:center;
  padding:44px 0;border-bottom:1px solid var(--line-soft);
}
.pz-k:last-child{border-bottom:0}
/* Im breiten Block bestimmt das Bild seine eigene Hoehe. Die 16:10-Box aus
   der Kachelzeit wuerde es hier beschneiden: die Bilder haben sehr
   unterschiedliche Formate (von 16:10 bis 4:1), und ein Ausschnitt daraus
   zeigt vier Kanalzuege in Grossaufnahme statt des Geraets. */
.pz-k .pz-bild{grid-row:1 / span 2;align-self:center;aspect-ratio:auto;min-height:0}
.pz-k .pz-bild img{position:static;width:100%;height:auto;object-fit:fill}
.pz-k:hover .pz-bild img{transform:none}
.pz-k b{
  display:block;font-size:clamp(23px,3.2vw,38px);line-height:1.05;
  letter-spacing:-.02em;text-transform:uppercase;font-weight:700;color:var(--fg);
  align-self:end;margin:0;
}
.pz-k p{align-self:start;margin-top:14px;font-size:16px;line-height:1.6;color:var(--dim);max-width:46ch}
.pz-k p strong{color:var(--fg);font-weight:400}
/* Jede zweite Zeile dreht sich um — der Blick wandert, statt zu rastern. */
.pz-k:nth-child(even) .pz-bild{grid-column:2;grid-row:1 / span 2}
.pz-k:nth-child(even) b,.pz-k:nth-child(even) p{grid-column:1}
/* Ohne Kachelrahmen braucht das Bild seinen eigenen Rahmen. */
.pz-k .pz-bild{border:1px solid var(--line);background:var(--panel)}
.pz-k:hover .pz-bild{border-color:#2E3D46}

@media (max-width:860px){
  .pz-k{grid-template-columns:1fr;gap:18px;padding:30px 0}
  .pz-k .pz-bild,.pz-k:nth-child(even) .pz-bild{grid-row:auto;grid-column:1;min-height:0}
  .pz-k:nth-child(even) b,.pz-k:nth-child(even) p{grid-column:1}
  .sec-h{font-size:clamp(24px,7vw,34px)}
  .pz-hero h1{font-size:clamp(28px,8vw,40px)}
}


/* ====== Motion-Ebene v24 (aus motion/v24/motion24.css) ====== */
/* ======================================================================
   Motion-Ebene v24 — Stille Linien, 18.09.2026

   Das Stilblatt zum neuen Hero-Grund. Zwei Dinge, mehr braucht es nicht:

     1 · Praesenz. Der Grund steht auf 62 % Deckkraft — der Wert, auf den
         sich die Schauseite (site/lab/hero-hintergrund.html, Regler oben
         rechts) eingependelt hat. Darueber draengt er sich vor die
         Ueberschrift, darunter bleibt von den Konturen nichts uebrig.
     2 · Sichtbar ist nur die Leinwand von v24. Die frueheren liegen in
         einem stillgelegten Behaelter (siehe motion24.js) und zeichnen
         nicht mehr — die Regel hier ist das Netz darunter, falls eine
         Ebene ihre Leinwand spaeter wieder herausholt.
   ====================================================================== */

.hv__land{opacity:.62;transition:opacity .4s}
/* Die Scroll-Kamera aus v14 ist aus (if (false) ...). Sollte sie je wieder
   angehen, multipliziert sich ihr --land-o mit der Praesenz, statt sie zu
   ueberschreiben — sonst springt der Grund beim Scrollen auf volle Staerke. */
.hv__land.fest{opacity:calc(.62 * var(--land-o,1))}

.hv__land canvas{display:none}
.hv__land canvas.wf24{display:block;width:100%;height:100%}

/* Im Ruhemodus steht ein Standbild. Ein Standbild wirkt kraeftiger als
   dieselbe Zeichnung in Bewegung — deshalb eine Spur zurueckgenommen. */
body.rm .hv__land{opacity:.5}


/* ====== Motion-Ebene v25 (aus motion/v25/motion25.css) ====== */
/* ======================================================================
   Motion-Ebene v25 — Fuehrung, 18.09.2026

   Vorbild: wie minimal.audio eine Seite fuehrt. Ein Geraet vorn statt
   vier gleichberechtigter, eine Zeile, die den Abschnitt traegt, ein
   Katalog zum Durchziehen statt eines Briefmarkenrasters, und ein Preis,
   der beim Lesen nicht verschwindet.

   Der Hero-GRUND gehoert v24 ("Stille Linien") — hier wird er nicht
   angefasst. Hier geht es nur um die Geraete davor.
   ====================================================================== */

/* ---------- 1 · Ein Geraet vorn ---------- */
.fl--cairn{left:34%;top:12%;width:66%;--z:120px}
.fl--cue,.fl--halo,.fl--scree,.fl--silt{filter:saturate(.8) brightness(.74);opacity:.64}
.hv__flotte:hover .fl--cue,.hv__flotte:hover .fl--halo,.hv__flotte:hover .fl--scree,
.hv__flotte:hover .fl--silt{
  filter:none;opacity:.92}
.fl--cairn .fl__tag{font-size:13px}
/* Die Preismarke am vorderen Geraet — der Unterschied zwischen einer
   Bildergalerie und einem Laden. */
.fl__preis{position:absolute;left:14px;top:14px;z-index:4;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:#04140D;background:var(--green);padding:5px 10px;pointer-events:none}
.fl__preis em{font-style:normal;color:rgba(4,20,13,.6);margin-left:7px;font-weight:400}
@media (max-width:820px){
  .fl--cairn{left:12%;top:14%;width:82%}
  .fl__preis{font-size:10px;padding:4px 8px}
}

/* ---------- 2 · Die Zeile, die den Abschnitt traegt ---------- */
.p2 h2{font-size:clamp(34px,6.4vw,86px);line-height:.98;letter-spacing:-.035em;
  text-transform:uppercase;max-width:15ch}
.p2__vor{font-size:clamp(16px,1.5vw,19px);max-width:52ch;margin-top:18px}

/* ---------- 3 · Der Katalog als Raster ---------- */
/* Vorher lag hier eine Zeile zum Durchziehen mit zwei Pfeilen. Gemessen am
   18.09.2026 bei 1512 px: von vier Karten waren drei zu sehen, die vierte
   (SCREE) lag halb ausserhalb — wer nicht scrollte, sah das Geraet nicht.
   Vier Geraete sind kein Katalog, den man durchblaettert; sie passen in ein
   Raster, und dann ist jedes Geraet sofort da. Die Pfeile baut motion25.js
   seitdem nicht mehr. */
.p2__reihe{position:relative;margin-top:44px}
.p2__gitter{
  display:grid;grid-auto-flow:row;gap:22px;overflow:visible;padding:4px;margin:0 -4px;
  /* Das !important steht hier, weil eine fruehere Ebene den Katalog auf
     `repeat(auto-fill,minmax(280px,360px)) !important` festgenagelt hat.
     Gemessen bei 1512 px: zwei Spalten a 360 px in einem 1088 px breiten
     Kasten — das rechte Drittel blieb leer. */
  /* Drei Spalten statt zwei: bei zwei waren die Karten 529 px breit und
     der Schirm darin 529x331 — zu gross fuer eine Uebersicht (Jonas,
     18.09.2026). Mit auto-fit passt sich die Zahl der Spalten an, wenn
     Geraete dazukommen: bei 1088 px Innenbreite sind es drei a 348 px. */
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
  justify-content:stretch}
/* Grosse Karten heisst: die laufende Anzeige darin wird wirklich sichtbar. */
.p2__g .p2__schirm{aspect-ratio:16/10}
/* Die Karten laufen nicht ins Uferlose, wenn nur zwei Geraete uebrig sind */
.p2__gitter .p2__g{max-width:520px}
@media (max-width:820px){
  .p2__gitter{grid-template-columns:minmax(0,1fr)!important;gap:18px}
}

/* ---------- 4 · Die Kaufleiste faehrt mit ---------- */
/* Die Leiste sitzt UNTER der Kopfleiste, nicht davor: die Kopfleiste liegt
   auf z-index 900, und eine Kaufleiste, die den Weg zu den anderen Geraeten
   verdeckt, gewinnt nichts. --kl-top setzt motion25.js aus der gemessenen
   Kopfhoehe — die aendert sich beim Scrollen. */
.kl{position:fixed;left:0;right:0;top:var(--kl-top,72px);z-index:880;
  transform:translateY(-140%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
  background:rgba(8,9,10,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);border-top:1px solid var(--line-soft)}
.kl.da{transform:none}
.kl__i{max-width:var(--wrap);margin:0 auto;padding:11px 24px;
  display:flex;align-items:center;gap:16px}
.kl__n{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.2em;color:var(--fg)}
.kl__s{font-size:13.5px;color:var(--dim);margin-left:4px}
.kl__p{margin-left:auto;font-family:var(--mono);font-size:15px;color:var(--green);letter-spacing:.06em}
.kl .btn{padding:10px 18px;font-size:11px}
@media (max-width:760px){.kl__s{display:none}.kl__i{padding:9px 16px;gap:10px}}
body.rm .kl{transition:none}

/* ---------- 5 · Hoerplaetze ---------- */
.hoer{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:26px}
.hoer__k{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}
.hoer__b{position:relative;aspect-ratio:16/9;background:var(--panel-2);border-bottom:1px solid var(--line)}
.hoer__b canvas{position:absolute;inset:0;width:100%;height:100%}
.hoer__s{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border:1px solid var(--line);background:rgba(8,9,10,.72);
  color:var(--fg);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s}
.hoer__s:hover{border-color:var(--green)}
.hoer__m{padding:13px 15px 15px}
.hoer__q{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hoer__w{font-size:15.5px;font-weight:600;margin-top:3px}
.hoer__ab{display:flex;gap:1px;margin-top:11px;background:var(--line);border:1px solid var(--line)}
.hoer__ab button{flex:1;background:var(--panel-2);border:0;color:var(--dim);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 0}
.hoer__ab button[aria-pressed="true"]{background:var(--green);color:#04140D}


/* ====== Motion-Ebene v26 (aus motion/v26/motion26.css) ====== */
/* ======================================================================
   Motion-Ebene v26 — der Hero wird bedienbar, 18.09.2026
   ----------------------------------------------------------------------
   Zwei Fehler, die Jonas gemeldet hat. Beide gemessen mit Playwright auf
   1512×950, bevor etwas geaendert wurde.

   1 · HALO liess sich gar nicht anklicken, SCREE nur am rechten Rand, und
       "Open device →" im Panel tat nichts.
       Ursache: .hv__innen (der Textblock links) liegt auf z-index 3, genau
       wie .hv__flotte, steht aber SPAETER im Baum — also deckt er die
       Flotte ab. Gemessen: .hv__innen 216,448 → 1296,905; HALO liegt bei
       883,496 → 1325,596, also vollstaendig darunter. Das Panel mit dem
       Knopf liegt bei 825,588 — auch darunter.
       Behebung: der Kasten laesst Klicks durch, seine Kinder nicht.
       Nach der Aenderung oeffnen alle vier Geraete ihre Seite (gemessen).

   2 · Die gezoomte Karte sprang hin und her.
       Ursache: v18 holt alle 4,5 s eine andere Karte nach vorn (.vorn).
       Traegt die gezoomte Karte dieses .vorn und faehrt der Zeiger
       darueber, gewinnt `.fl.vorn:hover` (0,3,0) gegen `.fl.zoom` (0,2,0)
       — die Karte springt aus der Mitte zurueck an ihren Platz. Gemessen:
       825,227 → 1088,375, also 262 px zur Seite und 148 px nach unten, und
       beim Wegfahren wieder zurueck. Genau das Wackeln.
       Behebung: die Zoom-Lage schlaegt jede Kombination aus .vorn und
       :hover. Zusaetzlich haelt eine Karte, ueber der der Zeiger steht,
       ihr Schweben an — was man gleich anklickt, soll stillstehen.

   NICHT in dieser Ebene: gezeichnete Geraetefronten im Hero. Sie waren
   kurz drin und sind am selben Tag wieder raus — siehe die Notiz in
   motion/v26/GEZEICHNETE_FRONTEN.md. Im Hero stehen die echten Geraete.
   ====================================================================== */

/* ---------- 1 · Der Textblock laesst die Flotte durch ---------- */
/* Nur der Kasten wird durchlaessig. Alles, was man liest, anfasst oder
   markiert, bleibt es nicht — sonst waere die Ueberschrift nicht mehr
   auswaehlbar und die beiden Knoepfe nicht mehr klickbar. */
.hv__innen{pointer-events:none}
.hv__marke,.hv h1,.hv__satz,.hv__unten,.hv__scroll{pointer-events:auto}

/* ---------- 2 · Die gezoomte Karte steht still ---------- */
/* Die Auswahl ist absichtlich ueberbestimmt: sie muss jede Kombination aus
   .vorn und :hover schlagen, sonst faellt die Karte im Zoom auf die
   Hover-Lage zurueck und springt. */
.hv__flotte .fl.zoom,
.hv__flotte .fl.zoom:hover,
.hv__flotte .fl.zoom:focus-visible,
.hv__flotte .fl.zoom.vorn,
.hv__flotte .fl.zoom.vorn:hover,
.hv__flotte .fl.zoom.vorn:focus-visible,
.hv__flotte:hover .fl.zoom,
.hv__flotte:focus-within .fl.zoom{
  left:50%;top:39%;width:min(74%,600px);
  transform:translate(-50%,-50%) translateZ(280px);
  translate:0 0;animation:none;
  filter:brightness(1.05) saturate(1.02)}
/* Kein Lichtstreif auf der Karte, die gerade gross vorn steht */
.hv__flotte.hat-zoom .fl.zoom .fl__streif{animation:none;opacity:0}
/* Was man gleich anklickt, soll nicht wegschweben */
.fl:hover,.fl:focus-within{animation-play-state:paused}

/* ---------- 3 · Die Preismarke deckt kein Geraet zu ---------- */
/* v25 setzt sie oben links — dort steht auf der echten CAIRN-Front das
   eigene Wortzeichen samt "Oscillate Audio". Unten rechts liegt nichts,
   und das Namensschild der Karte sitzt unten links. */
.hv__flotte .fl__preis{left:auto;right:14px;top:auto;bottom:14px}


/* ---------- 4 · Die Gearaetekarte blendet sauber um ---------- */
/* Beim Zeigen sollte das echte Geraetebild die laufende Zeichnung abloesen.
   Es tat beides gleichzeitig: `.p2__g:hover .p2__schirm img.geraet{opacity:1}`
   (0,4,1) schlaegt `.p2__g.lebt20 .p2__schirm img{opacity:0}` (0,3,1), waehrend
   `.p2__g.lebt20 .p2__live20{opacity:1}` weiterlief. Zeichnung und Foto lagen
   uebereinander — im Bild sah das aus wie ein Fehler, und es war einer.
   Jetzt gilt: Zeiger drauf = das echte Geraet, ganz, und sonst nichts. */
.p2__g.lebt20:hover .p2__live20,
.p2__g.lebt20:focus-within .p2__live20{opacity:0}
.p2__g.lebt20:hover .p2__schirm img,
.p2__g.lebt20:focus-within .p2__schirm img{opacity:1}
/* Und ganz zu sehen, nicht angeschnitten: die Karte ist 16:10, die Fronten
   sind 1,53 bis 1,78 — ohne das faellt bei HALO der halbe Kasten weg. */
.p2__g.lebt20:hover .p2__schirm img,
.p2__g.lebt20:focus-within .p2__schirm img{
  object-fit:contain;object-position:center;background:#0A0F13}


/* ---------- 5 · Der Kaufweg steht im Kopf der Produktseite ---------- */
/* Vorbild minimal.audio: Name, ein Satz, Preis und Knopf stehen zusammen im
   ersten Bild. Auf cue.html standen dort zwei grosse Kaesten (Free / $19),
   zusammen 850 px hoch — der Film begann erst bei y=1884, also nach zwei
   Bildschirmhoehen. Die ausfuehrliche Gegenueberstellung steht unveraendert
   weiter unten unter #pro und #get; hier oben steht nur noch die Zeile. */
.kaufzeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;
  padding:16px 18px;border:1px solid var(--line);background:var(--panel)}
.kaufzeile__preis{display:flex;flex-direction:column;gap:3px;margin-right:6px}
.kaufzeile__preis b{font:600 26px/1 var(--mono);color:var(--fg);letter-spacing:-.01em}
.kaufzeile__preis span{font:400 10.5px/1.3 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.kaufzeile .btn{margin:0}
@media (max-width:560px){
  .kaufzeile{gap:10px}
  .kaufzeile__preis{width:100%}
  .kaufzeile .btn{flex:1 1 auto;text-align:center}
}

/* ---------- 6 · Der Preis auf der Geraetekarte bricht um ---------- */
/* Bei drei Spalten ist die Karte 345 px breit; "Free · with the newsletter"
   lief bis an die Kante. Name und Preis duerfen jetzt umbrechen. */
.p2__b{flex-wrap:wrap}
.p2__b span{font-size:12.5px}


/* ---------- 7 · Sprungmarken landen unter der Kopfleiste ---------- */
/* Die Kopfleiste steht fest und ist 85 px hoch. Ohne diesen Abstand
   schneidet sie jede angesprungene Ueberschrift oben ab — beim Klick auf
   "Try it in your browser" fehlte die erste Zeile von "THIS IS THE REAL
   THING, RUNNING HERE". */
main section[id],main [id^="s"],.prod,#try,#get,#stage,#raum,#hear,#presets{
  scroll-margin-top:104px}


/* ====== Motion-Ebene v27 (aus motion/v27/motion27.css) ====== */
/* ======================================================================
   Motion-Ebene v27 — Kulissen aus Film, 19.09.2026

   Der Hero-Grund wechselt von den Stillen Linien (v24) auf eine Reihe
   kurzer Filme. Die Leinwand von v24 bleibt, sie liegt seit v14 fest
   hinter der GANZEN Seite und traegt die Abschnitte darunter weiter —
   im Hero deckt der Film sie zu. Man sieht die Linien also erst, wenn
   der Hero nach oben aus dem Bild gelaufen ist.

   Drei Entscheidungen, die hier im Stilblatt haengen:

   1 · Die Farbwelt steckt in den Dateien, nicht in CSS. Ein filter()
       auf einem laufenden Video kostet in jedem Bild eine Farbrechnung
       ueber die volle Flaeche; die gleiche Gradation ist beim Rendern
       einmal bezahlt. Die Clips sind entsaettigt, kuehl verschoben und
       abgedunkelt aus dem Rohmaterial gebacken (siehe HERKUNFT.md).

   2 · Ueberblendet wird ueber opacity, sonst nichts. opacity ist das
       Einzige, was der Compositor ohne Neuzeichnen kann — jede andere
       Blende (filter, clip-path, Maske) zieht die Videoflaeche in jedem
       Bild durch den Maler.

   3 · Der Schleier ist EIN Element mit gestapelten Verlaeufen, kein
       Stapel aus Elementen. Er traegt die Lesbarkeit der Ueberschrift;
       ohne ihn steht weisse Schrift auf wechselndem Grund.
   ====================================================================== */

/* ---------- 1 · Die Kulisse selbst ---------- */
.kul{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:transparent;contain:paint}
.kul .kul__bild,.kul .kul__f{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  /* .u7 img und .u7 img{transform:...} aus v12 gelten sonst auch hier */
  transform:none;will-change:auto;border:0}
.kul .kul__bild{z-index:0;opacity:1;transition:opacity 1s ease}
.kul.laeuft .kul__bild{opacity:0}
.kul .kul__f{z-index:1;opacity:0;transition:opacity 1.05s ease}
.kul .kul__f.an{opacity:1}
.kul__schleier{position:absolute;inset:0;z-index:2;display:block}

/* Ein sehr feines Zeilenraster: der Grund bleibt eine Anzeige, kein Foto.
   Statisch, also einmal gezeichnet und danach gratis. */
.kul__schleier::after{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(143,216,255,.045) 0 1px,transparent 1px 4px)}

/* ---------- 2 · Hero ---------- */
/* Deckend, damit die Leinwand von v24 im Hero wirklich weg ist. */
.kul--hero{background:#05070A}
.kul--hero .kul__schleier{
  background:
    /* oben Grund fuer die Kopfleiste, unten Uebergang in die Seite */
    linear-gradient(180deg,rgba(5,7,10,.62) 0,rgba(5,7,10,.14) 26%,
                    rgba(5,7,10,.14) 52%,rgba(5,7,10,.54) 84%,rgba(8,9,10,.98) 100%),
    /* nur die Textspalte links wird abgedunkelt, und sie laeuft frueh aus */
    linear-gradient(100deg,rgba(5,7,10,.80) 0,rgba(5,7,10,.44) 26%,
                    rgba(5,7,10,.06) 56%,rgba(5,7,10,0) 72%),
    /* die untere linke Ecke traegt Satz und Knoepfe */
    radial-gradient(76% 64% at 8% 86%,rgba(5,7,10,.66),rgba(5,7,10,0) 72%)}
/* Eine Spur Kaltlicht ueber dem Ganzen — die Marke faerbt den Grund. */
.kul--hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(85% 70% at 26% 26%,rgba(143,216,255,.09),rgba(143,216,255,0) 62%)}

/* Auf dem Handy nimmt v18 dem Hero die feste Hoehe (Flotte oben, Text
   darunter). Ein Grund, der nur 300 px hoch ist, wirkt wie ein Fehler —
   deshalb hier wieder eine Mindesthoehe, aber ohne die 90vh vom Schirm. */
@media (max-width:900px){
  .hv{min-height:min(88vh,720px)}
  .kul--hero .kul__schleier{
    background:
      linear-gradient(180deg,rgba(5,7,10,.66) 0,rgba(5,7,10,.24) 26%,
                      rgba(5,7,10,.44) 66%,rgba(8,9,10,.98) 100%)}
}

/* ---------- 3 · Zitatkarte (Claim) ---------- */
.b4{position:relative;overflow:hidden}
.b4 > .kul{z-index:0}
.b4__k{position:relative;z-index:1}
/* Hier traegt der Film keine Aussage, er ist Textur. Deshalb weit zurueck. */
.b4 .kul .kul__f.an{opacity:.55}
.b4 .kul__schleier{
  background:
    linear-gradient(180deg,rgba(8,9,10,.94) 0,rgba(8,9,10,.60) 42%,rgba(8,9,10,.94) 100%),
    radial-gradient(100% 90% at 50% 50%,rgba(8,9,10,.30),rgba(8,9,10,.86) 92%)}
/* Die Leinwand von v24 schien bisher durch die Karte. Mit Film darunter
   waeren es zwei Bewegungen auf derselben Flaeche — eine reicht. */
body.hat-land .b4{background-color:rgba(8,9,10,.95)}

/* ---------- 4 · Werkstatt (About) ---------- */
/* Hatte bis zum 19.09.2026 auch einen Film zwischen Foto und Verlauf. Wieder
   raus, auf Ansage: das Foto der Konsole reicht dort, ein Film darunter war
   eine Bewegung zu viel. Die zwei Regeln bleiben als Netz, falls build27 die
   Kulisse je wieder einhaengt. */
.u7 > .kul{z-index:0}
.u7 .kul .kul__f.an{opacity:.52}

/* ---------- 5 · Kontrast neu ausgelegt (19.09.2026) ---------- */
/* Der Hero hatte drei Schleier uebereinander: .hv::after (aus dem Grundstil),
   .hv__band (v12) und seit v27 den der Kulisse. Nachgerechnet kam hinter der
   Ueberschrift noch etwa ein Siebtel des Films durch, im Bereich der Flotte
   ein Drittel — der Film war da, aber niemand sah ihn.

   Die beiden alten Schleier sind fuer eine gezeichnete Leinwand gemacht: die
   hat ihre eigene, gleichmaessige Helligkeit. Ein Film hat sie nicht. Also
   entscheidet ab hier EINE Stelle ueber den Kontrast im Hero, .kul__schleier,
   und Schrift und Gerätefronten kommen im Gegenzug nach vorn. Gerechnet:
   hinter der Ueberschrift kommen jetzt rund 28 Prozent durch, bei der Flotte
   ueber 80.

   :has() statt eines pauschalen display:none — faellt die Kulisse je weg
   (Bewegung reduzieren laesst sie stehen, ein Rueckbau nicht), sind die
   alten Schleier von selbst wieder da. */
.hv:has(.kul--hero)::after,
.hv:has(.kul--hero) .hv__band{display:none}

/* Die Schrift traegt sich selbst, statt sich auf den Schleier zu verlassen.
   Der Schatten ist weit und weich: auf ruhigem Grund sieht man ihn nicht,
   auf einer hellen Stelle im Film haelt er die Kante. */
.hv h1{color:#FBFDFE;text-shadow:0 2px 30px rgba(3,5,7,.80),0 1px 4px rgba(3,5,7,.55)}
.hv h1 em{color:#A9E4FF}
.hv__marke{color:#A3B3BD}
.hv__satz{color:#C9D8E0;text-shadow:0 1px 18px rgba(3,5,7,.85)}
.hv__scroll{color:#93A4AE}
/* Der Geisterknopf stand vorher auf nichts. Auf Film braucht er einen Grund. */
.hv__unten .btn.ghost{background:rgba(5,7,10,.52);border-color:rgba(143,216,255,.55)}

/* Die Fronten: heller, und mit einer Kante, die sie vom Film abhebt. */
.fl{filter:brightness(1.06) saturate(1.02);border-color:#33454F;
  box-shadow:0 44px 92px -30px rgba(0,0,0,.98),0 14px 34px -12px rgba(0,0,0,.86),
             inset 0 0 0 1px rgba(143,216,255,.10)}
.fl.vorn,.fl:hover{filter:brightness(1.14) saturate(1.05)}
/* Die zurueckgetretenen Karten duerfen nicht mehr so tief fallen: auf dunklem
   Grund war .8 eine Nuance, vor einem hellen Bild waere es ein Loch. */
.hv__flotte.hat-vorn .fl:not(.vorn):not(:hover){filter:brightness(.94) saturate(.98)}
.hv__flotte:hover .fl:not(:hover):not(.zoom),
.hv__flotte:focus-within .fl:not(:focus-visible):not(.zoom){filter:brightness(.64) saturate(.82)}
@media (max-width:900px){
  /* v18 setzt hier filter:none; die Regel oben wuerde sie ueberschreiben,
     also wird sie hier bewusst gesetzt statt zufaellig geerbt. */
  .fl{filter:brightness(1.04) saturate(1.02)}
}

/* ---------- 6 · Was erst vor dem Film auffiel ---------- */
/* Die Preismarke (v25, im Hero seit v26 unten rechts) und das Namensschild
   der Karte (v18, unten links) sitzen auf derselben Kante. Bei CAIRN ist das
   Schild lang genug, dass sich beide treffen: bei 1280 px stand "$9.99 once"
   auf dem Wort "places". Auf dem dunklen Grund ging das unter, vor dem
   helleren Film nicht mehr.
   Die Marke bleibt unten rechts — oben links liegt auf der echten Front das
   Wortzeichen, dorthin kann sie nicht zurueck. Also bekommt das Schild
   rechts Platz. Auf dem Handy ist die Karte dafuer zu schmal; dort wandert
   die Marke nach oben, wo im Raster nichts liegt. */
@media (min-width:901px){
  /* 140 px, nicht 96: die Marke ist 113 px breit und sitzt 14 px vom Rand.
     Bei 96 lag sie noch 32 px auf dem Wort "places". Gemessen bei 1280. */
  .hv__flotte .fl:has(.fl__preis) .fl__tag{padding-right:140px}
}
/* Und das zweite Problem derselben Ecke: steht gerade eine andere Karte
   vorn, liegt sie ueber CAIRNs unterer rechter Ecke — dann war von
   "$9.99 once" ein halbes Wort zu sehen. v18 hat das fuer die
   Namensschilder geloest, indem sich nur die vordere Karte nennt; die
   Preismarke kam spaeter dazu und war von der Regel nicht erfasst.
   Jetzt gilt sie fuer beide: die Karte, die vorn steht, nennt ihren Namen
   UND ihren Preis. Vorn heisst translateZ(150px), also liegt nichts
   darueber. */
.hv__flotte .fl__preis{opacity:0;transition:opacity .45s ease}
.hv__flotte .fl.vorn .fl__preis,
.hv__flotte .fl:hover .fl__preis,
.hv__flotte .fl.zoom .fl__preis{opacity:1}
body.rm .hv__flotte .fl__preis{opacity:1;transition:none}
@media (max-width:900px){
  .hv__flotte .fl__preis{top:10px;bottom:auto;right:10px}
}

/* ---------- 7 · Das Bedienteil im Hero ---------- */
/* Pflicht, nicht Zierde: ein Film, der von selbst startet, laenger als
   fuenf Sekunden laeuft und neben Text steht, braucht eine Stelle zum
   Anhalten (WCAG 2.2.2). Weil es sie geben muss, zeigt sie gleich den
   Stand — vier Marken, die laufende faellt mit, ein Klick springt.
   Es haengt an .hv, nicht in der Kulisse: die hat z-index 0 und damit
   einen eigenen Stapelkontext, aus dem ein Knopf nicht nach vorn kaeme. */
.flm{position:absolute;right:4%;bottom:24px;z-index:4;
  display:flex;align-items:center;gap:14px;padding:8px 12px;
  background:rgba(5,7,10,.62);border:1px solid rgba(143,216,255,.18);
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease,border-color .3s}
.flm.da{opacity:1;transform:none}
.flm:hover{border-color:rgba(143,216,255,.36)}
.flm__halt{display:inline-flex;align-items:center;gap:8px;padding:4px 2px;
  background:none;border:0;color:var(--dim);font:inherit;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:color .25s}
.flm__halt:hover,.flm__halt:focus-visible{color:var(--blue)}
.flm__zeichen{width:9px;height:10px;flex:none;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.flm__halt.aus .flm__zeichen{width:0;height:0;border:0;
  border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.flm__spur{display:flex;gap:6px}
.flm__m{position:relative;display:block;width:26px;height:10px;padding:0;border:0;overflow:hidden;
  background:rgba(143,216,255,.16);cursor:pointer;transition:background .25s}
.flm__m:hover,.flm__m:focus-visible{background:rgba(143,216,255,.38)}
.flm__m i{position:absolute;inset:0;display:block;background:var(--blue);
  transform:scaleX(0);transform-origin:left center}
/* Die Fuellung folgt timeupdate (viermal je Sekunde). Ohne die kurze
   Ueberblendung sieht man die Stufen. */
.flm__m.an i{transition:transform .3s linear}
.flm__nr{letter-spacing:.14em}
@media (max-width:900px){
  /* Auf dem Handy laeuft ein Clip in Schleife — eine einzelne Marke waere
     eine Anzeige ohne Aussage. Bleibt der Knopf, und der muss bleiben. */
  .flm{right:12px;bottom:auto;top:8px;gap:0;padding:6px 10px}
  .flm__spur,.flm__nr{display:none}
}
body.rm .flm{display:none}

/* ---------- 8 · Ruhemodus ---------- */
/* Wer Bewegung abbestellt hat, bekommt das Standbild. Die Videos werden
   dann gar nicht erst angelegt (motion27.js steigt vorher aus) — die
   Regel hier ist das Netz darunter. */
body.rm .kul .kul__f{display:none}
body.rm .kul.laeuft .kul__bild{opacity:1}


/* ====== Motion-Ebene v28 (aus motion/v28/motion28.css) ====== */
/* ======================================================================
   Motion-Ebene v28 — bedienbar, 19.09.2026

   Kapitelspur, Tastatur-Legende, Kopierknopf. Alles drei ist Bedienung,
   nicht Bewegung — deshalb steht hier kaum eine Animation, und was es
   gibt, ist eine Blende, keine Verschiebung.

   Die Spur braucht einen eigenen Grund. Sie steht fest, der Inhalt zieht
   darunter durch; ohne Grund misst man dort Kontraste um 1:1, sobald ein
   helles Bild vorbeikommt. Der Verlauf nach rechts ist dieser Grund.
   ====================================================================== */

/* ---------- 1 · Kapitelspur ---------- */
.ksp{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
  display:none;flex-direction:column;align-items:flex-end;gap:2px;
  padding:14px 14px 14px 46px;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,7,10,0) 0,rgba(5,7,10,.62) 46%,rgba(5,7,10,.78) 100%)}
/* Ab 1180 px, nicht 1100: die Produktseiten fuellen 1080 px Breite, und
   die Spur braucht rechts davon Luft. */
@media (min-width:1180px){.ksp{display:flex}}
.ksp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ksp__t{display:flex;align-items:center;justify-content:flex-end;gap:12px;
  width:100%;padding:6px 0;background:none;border:0;cursor:pointer;pointer-events:auto;
  font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);transition:color .25s}
/* Die Beschriftung steht NUR beim Zeigen auf die Spur und beim Tastatur-
   Fokus. Am 19.09.2026 stand sie auch fuer den aktiven Abschnitt — und lag
   damit auf den Produktseiten bei 1280 px auf der Ueberschrift ("CAIRN IS A
   REVERB BUILT F…" quer ueber "twenty-five measured places"). In Ruhe ist
   die Spur eine Skala: Striche, der laufende lang und blau. Das reicht. */
.ksp__b{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;white-space:nowrap}
.ksp:hover .ksp__b,.ksp__t:focus-visible .ksp__b{opacity:1;transform:none}
/* Ohne Beschriftung braucht die Spur in Ruhe auch keinen Grund — der kaeme
   sonst als dunkler Streifen ueber den Inhalt. Er kommt mit dem Zeiger. */
.ksp{background:none}
.ksp::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:linear-gradient(90deg,rgba(5,7,10,0) 0,rgba(5,7,10,.72) 40%,rgba(5,7,10,.86) 100%)}
.ksp:hover::before,.ksp:focus-within::before{opacity:1}
/* Der Strich ist die Skala eines Reglers: kurz, die laufende Stelle lang. */
.ksp__s{display:block;width:14px;height:1px;flex:none;background:currentColor;
  transition:width .3s cubic-bezier(.2,.8,.2,1),background .25s}
.ksp__t:hover,.ksp__t:focus-visible{color:var(--dim)}
.ksp__t:hover .ksp__s{width:22px}
.ksp__t.an{color:var(--fg)}
.ksp__t.an .ksp__s{width:30px;height:2px;background:var(--blue)}
.ksp__hilfe{margin-top:12px;padding:5px 8px;background:none;cursor:pointer;pointer-events:auto;
  border:1px solid var(--line);color:var(--faint);
  font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  transition:color .25s,border-color .25s}
.ksp__hilfe:hover,.ksp__hilfe:focus-visible{color:var(--blue);border-color:var(--blue)}
body.rm .ksp__b,body.rm .ksp__s{transition:none}

/* ---------- 2 · Tastatur-Legende ---------- */
/* Sitzt ueber der HUD-Leiste, nicht darauf. */
.lgd{position:fixed;right:18px;bottom:52px;z-index:41;
  min-width:232px;padding:14px 16px 15px;
  background:rgba(8,9,10,.96);border:1px solid rgba(143,216,255,.24);
  box-shadow:0 30px 60px -30px #000;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s,transform .25s,visibility .25s}
.lgd.da{opacity:1;visibility:visible;transform:none}
.lgd b{display:block;margin-bottom:10px;
  font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.lgd dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.lgd dt{font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;color:var(--fg);white-space:nowrap}
.lgd dd{margin:0;font:400 12px/1.3 var(--sans);color:var(--dim)}
@media (max-width:1099px){.lgd{display:none}}
body.rm .lgd{transition:none}

/* ---------- 3 · Adresse kopieren ---------- */
.kop{margin-left:10px;padding:3px 7px;background:none;cursor:pointer;
  border:1px solid var(--line);color:var(--faint);
  font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  transition:color .2s,border-color .2s}
.kop:hover,.kop:focus-visible{color:var(--blue);border-color:var(--blue)}
.kop.ok{color:var(--green);border-color:var(--green)}

/* ---------- 4 · Tippziele auf dem Handy ---------- */
/* Gemessen am 19.09.2026 auf 375 und 430 px: der Pause-Knopf im Hero 18 px
   hoch, der Kopierknopf 17, die Fusszeilen-Links 15, "Join the list" 11,
   die Dry/Processed-Schalter 27. Unter 28 px trifft ein Daumen daneben.
   Hier bekommt jedes davon Hoehe, ohne dass sich das Bild aendert: die
   Flaeche waechst, nicht die Schrift. */
@media (max-width:900px){
  .flm__halt{min-height:34px;padding:6px 8px}
  .kop{padding:9px 10px}
  .g8 nav a{display:inline-block;padding:8px 4px}
  .p2__naechst a{display:inline-block;padding:10px 0}
  .kind__neu{display:inline-block;padding:8px 0}
  .ab button,.hoer__ab button{min-height:38px}
}


/* ====== Motion-Ebene v29 (aus motion/v29/motion29.css) ====== */
/* ======================================================================
   Motion-Ebene v29 — die Geraeteseiten, 19.09.2026

   Fuenf Seiten, ein Auftritt. Bisher hatte die Startseite eine Buehne mit
   Tiefe (v18/v19) und die Geraeteseiten ein flaches Bild. Hier bekommen
   sie dasselbe Vokabular:

     1 Buehne     Die Gerätefront steht in einer Perspektive, neigt sich
                  zum Zeiger, traegt einen Lichtstreif und Messwinkel in
                  den Ecken. Beim ersten Erscheinen laeuft EINMAL eine
                  Messlinie ueber die Front — das Geraet wird "eingelesen".
     2 Zahlen     Die Kennzahlen zaehlen hoch, wenn sie ins Bild kommen.
     3 Kacheln    Beim Zeigen laeuft eine Abtastlinie ueber das Feld.
     4 Nummern    Jeder Abschnitt traegt seine Nummer — dieselbe wie in
                  der HUD-Leiste und der Kapitelspur.
     5 SILT lebt  Die vier SILT-Felder werden gezeichnet wie bei HALO,
                  CAIRN und SCREE (v20/v23). Stilblatt dazu unten.

   Regeln wie immer: keine Rundung, keine Warnfarbe, opacity/transform
   statt Filter auf grossen Flaechen, und jeder Effekt hat einen
   body.rm-Zweig.
   ====================================================================== */

/* ---------- 1 · Buehne ---------- */
.b29-raum{perspective:1400px}
/* Kein preserve-3d: kein Kind steht in der Tiefe, und ohne die Regel
   darf der Browser die Ebene flach zusammenlegen (gemessen +2 Bilder/s). */
.b29{position:relative;will-change:transform;transition:box-shadow .5s}
/* Die Neigung zum Zeiger stand hier vom 19.09. bis zum 19.09.2026 — ein
   paar Stunden. Rueckmeldung: "too much". Geblieben sind die Perspektive
   (fuer die Messlinie), die Messwinkel und der einmalige Einlese-Lauf. */
.b29 > img,.b29 > .cover{backface-visibility:hidden}
/* Messwinkel in den vier Ecken — acht Verlaeufe, ein Element. */
.b29__ecken{position:absolute;inset:8px;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .6s .9s;
  --e:18px;--d:1px;--f:var(--blue);
  background:
    linear-gradient(var(--f),var(--f)) left top/var(--e) var(--d) no-repeat,
    linear-gradient(var(--f),var(--f)) left top/var(--d) var(--e) no-repeat,
    linear-gradient(var(--f),var(--f)) right top/var(--e) var(--d) no-repeat,
    linear-gradient(var(--f),var(--f)) right top/var(--d) var(--e) no-repeat,
    linear-gradient(var(--f),var(--f)) left bottom/var(--e) var(--d) no-repeat,
    linear-gradient(var(--f),var(--f)) left bottom/var(--d) var(--e) no-repeat,
    linear-gradient(var(--f),var(--f)) right bottom/var(--e) var(--d) no-repeat,
    linear-gradient(var(--f),var(--f)) right bottom/var(--d) var(--e) no-repeat}
.b29.an .b29__ecken{opacity:.75}
/* Der Lichtstreif: gross, weich, per transform bewegt (Compositor). */
/* 140 % statt 200 %: die Ebene ist die groesste auf der Seite, und sie
   wird je Bild zusammengesetzt. Gemessen: 7 Bilder/s Unterschied. */
.b29__licht{position:absolute;left:-20%;top:-20%;width:140%;height:140%;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .5s;will-change:transform;
  background:radial-gradient(34% 30% at 50% 50%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%)}
.b29__licht{display:none}   /* Lichtstreif ging mit der Neigung */
/* Die Messlinie: laeuft einmal, wenn die Front ins Bild kommt. Danach steht
   sie am rechten Rand mit Deckkraft 0 — nicht entfernt, damit ein zweiter
   Lauf (z. B. nach Ruhemodus aus) nur die Klasse braucht. */
.b29__scan{position:absolute;top:0;bottom:0;left:0;width:2px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(143,216,255,0),var(--blue) 30%,var(--blue) 70%,rgba(143,216,255,0));
  box-shadow:0 0 18px 2px rgba(143,216,255,.45);opacity:0;transform:translateX(0)}
.b29__scan::after{content:"";position:absolute;top:0;bottom:0;left:2px;width:90px;
  background:linear-gradient(90deg,rgba(143,216,255,.12),rgba(143,216,255,0))}
.b29.an .b29__scan{animation:b29-scan 1.25s cubic-bezier(.4,0,.2,1) .15s forwards}
@keyframes b29-scan{
  0%{opacity:0;transform:translateX(0)}
  8%{opacity:1}
  92%{opacity:1}
  100%{opacity:0;transform:translateX(calc(var(--b29-b,1000px) - 2px))}}
/* Ohne Zeiger (Handy, Tablet) keine Neigung, aber die Messlinie und die
   Winkel bleiben — sie erzaehlen dasselbe ohne Bewegung des Geraets. */

body.rm .b29__scan{animation:none;opacity:0}
body.rm .b29__ecken{transition:none;opacity:.75}
body.rm .b29__licht{display:none}

/* ---------- 2 · Zahlen ---------- */
.pz-zahlen b{font-variant-numeric:tabular-nums}
.pz-zahlen b.z29{color:var(--dim);transition:color .4s}
.pz-zahlen b.z29.fertig{color:var(--fg)}
.pz-zahlen div:first-child b.z29.fertig{color:var(--green)}

/* ---------- 3 · Kacheln ---------- */
.pz-k{position:relative;transition:border-color .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.pz-k:hover{border-color:rgba(143,216,255,.32);transform:translateY(-3px)}
.pz-k .pz-bild::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;z-index:2;
  pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(143,216,255,0),rgba(143,216,255,.9) 30%,rgba(143,216,255,.9) 70%,rgba(143,216,255,0));
  box-shadow:0 0 14px 1px rgba(143,216,255,.4)}
.pz-k:hover .pz-bild::before{animation:k29-scan .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes k29-scan{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1}
  100%{opacity:0;transform:translateX(calc(100cqw - 2px))}}
.pz-k .pz-bild{container-type:inline-size}
/* 19.09.2026, Rueckmeldung: die Sperrung beim Zeigen (.16em -> .2em) zog
   "ON THE GRID" auseinander, bis es zu gross wirkte. Weg damit — die Farbe
   reicht. */
.pz-k b{transition:color .3s}
@media (hover:none){.pz-k:hover{transform:none}.pz-k:hover .pz-bild::before{animation:none}}
body.rm .pz-k,body.rm .pz-k b{transition:none}
body.rm .pz-k:hover{transform:none}
body.rm .pz-k:hover .pz-bild::before{animation:none}

/* ---------- 4 · Nummern ---------- */
.nr29{display:inline-block;margin-right:10px;padding-right:10px;border-right:1px solid var(--line);
  font:500 inherit;color:var(--blue);letter-spacing:.14em;font-style:normal}

/* ---------- 5 · SILT lebt ---------- */
/* Dasselbe Kleid wie v20/v23 (.pz-live20/.lebt20), keine neuen Regeln
   noetig. Nur die Amber-Koerner: SILT selbst zeichnet Bewegungskoerner in
   Amber — das ist die Front, nicht ein Thema der Seite. */

/* ---------- 6 · Der Grund hinter dem Hero ---------- */
/* Die Weichzeichnung steckt seit Fassung 2 in der Datei (motion/bilder.py).
   Der CSS-Filter hier war der teuerste Posten der Geraeteseiten: 12 statt
   39 Bilder/s, im Stand, weil ein Filter auf einer zusammengesetzten Ebene
   in jedem Bild neu gerechnet wird. Die Parallaxe (--para) bleibt — die
   ist ein transform und kostet nichts. Gilt fuer alle Breiten. */
.pz-buehne__hg{filter:none}
@media (max-width:760px){.pz-buehne__hg{filter:none}}


/* ====== Motion-Ebene v30 (aus motion/v30/motion30.css) ====== */
/* ======================================================================
   Motion-Ebene v30 — Feinschliff, 19.09.2026

   Ueber die ganze Seite, von oben bis unten: Knoepfe, Verweise, Felder,
   Ausklapper, Marken. Alles klein, alles mit Grund, nichts davon laenger
   als eine halbe Sekunde. Die Regel dieser Ebene: eine Reaktion sagt
   "ich habe dich gehoert" — sie fuehrt nichts auf.

     1 Knoepfe      Druckpunkt beim Klicken; der Geisterknopf bekommt beim
                    Zeigen einen zweiten Rahmen (Messrahmen), nicht mehr Farbe.
     2 Verweise     Der Strich unter einem Link zeichnet sich von links,
                    statt einfach da zu sein.
     3 Marke        Die acht Punkte der Bildmarke sind eine Welle. Beim
                    Zeigen laufen sie einmal durch. (Und wer "oscillate"
                    tippt, sieht sie laenger schwingen.)
     4 Ausklapper   Die Fragen auf der CUE-Seite oeffnen weich; das Plus
                    dreht sich zum Kreuz, statt gegen ein Minus getauscht
                    zu werden.
     5 Felder       Ein Eingabefeld zieht beim Fokus eine Linie unter sich.
     6 Beschriftung Der Strich vor jeder Abschnitts-Beschriftung zeichnet
                    sich, wenn der Abschnitt ins Bild kommt.
     7 Tabellen     Die Zeile unter dem Zeiger hebt sich, die Kopfspalte
                    wird blau.
     8 Siegel       Die vier Ringe unter "How buying works" drehen beim
                    Zeigen eine Vierteldrehung.
   ====================================================================== */

/* ---------- 1 · Knoepfe ---------- */
.btn,.kop,.flm__halt,.flm__m,.ksp__t,.ksp__hilfe,.hoer__ab button,.ab button,.demo button{
  transition-property:background,border-color,color,box-shadow,transform,outline-color,outline-offset;
  transition-duration:.18s}
.btn:active,.kop:active,.flm__halt:active,.ksp__hilfe:active,.hoer__ab button:active,.ab button:active{
  transform:translateY(1px)}
.btn:not(.ghost):active{box-shadow:0 4px 12px -10px rgba(143,216,255,.5)}
/* Der zweite Rahmen: Messrahmen statt mehr Fuellung. outline statt eines
   Pseudo-Elements, weil ::after auf .btn dem Ladezustand (.laedt) gehoert. */
.btn.ghost,.kop,.ksp__hilfe{outline:1px solid rgba(143,216,255,0);outline-offset:0}
.btn.ghost:hover,.kop:hover,.ksp__hilfe:hover{outline-color:rgba(143,216,255,.32);outline-offset:4px}
.btn.ghost:focus-visible{outline:2px solid var(--green);outline-offset:3px}   /* Fokus schlaegt Zeigen */
.btn .pfeil,.btn svg{transition:transform .25s}
.btn:hover .pfeil,.btn:hover svg{transform:translateX(3px)}

/* ---------- 2 · Verweise ---------- */
p a:not(.btn),li a:not(.btn),td a,.faq a,.g8 nav a,.fine a,.gratis__klein a,.pz-fuer a,.kind__neu{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s cubic-bezier(.2,.8,.2,1),color .2s;
  padding-bottom:1px}
p a:not(.btn):hover,li a:not(.btn):hover,td a:hover,.faq a:hover,.g8 nav a:hover,.fine a:hover,
.gratis__klein a:hover,.pz-fuer a:hover,.kind__neu:hover{text-decoration:none;background-size:100% 1px}
/* Der Neu-Verweis im Kopf hatte schon einen festen Strich — der weicht dem gezeichneten. */
.prod .kind .kind__neu{border-bottom:0}

/* ---------- 3 · Marke ---------- */
/* Die Wortmarke ist ein Link, und der globale a:hover unterstrich sie. Eine
   Marke unterstreicht man nicht — die Welle in den Punkten ist die Antwort. */
.n7__m:hover,.g8__m:hover{text-decoration:none}
.n7__m svg circle,.g8__m svg circle{transform-box:fill-box;transform-origin:center}
.n7__m:hover svg circle,.g8__m:hover svg circle,body.schwingt .n7__m svg circle{
  animation:m30-welle 1.05s cubic-bezier(.4,0,.2,1) both}
body.schwingt .n7__m svg circle{animation-iteration-count:4}
.n7__m svg circle:nth-of-type(1),.g8__m svg circle:nth-of-type(1){animation-delay:0ms}
.n7__m svg circle:nth-of-type(2),.g8__m svg circle:nth-of-type(2){animation-delay:55ms}
.n7__m svg circle:nth-of-type(3),.g8__m svg circle:nth-of-type(3){animation-delay:110ms}
.n7__m svg circle:nth-of-type(4),.g8__m svg circle:nth-of-type(4){animation-delay:165ms}
.n7__m svg circle:nth-of-type(5),.g8__m svg circle:nth-of-type(5){animation-delay:220ms}
.n7__m svg circle:nth-of-type(6),.g8__m svg circle:nth-of-type(6){animation-delay:275ms}
.n7__m svg circle:nth-of-type(7),.g8__m svg circle:nth-of-type(7){animation-delay:330ms}
.n7__m svg circle:nth-of-type(8),.g8__m svg circle:nth-of-type(8){animation-delay:385ms}
@keyframes m30-welle{0%{transform:translateY(0)}30%{transform:translateY(-5px)}
  65%{transform:translateY(3px)}100%{transform:translateY(0)}}

/* ---------- 4 · Ausklapper ---------- */
.faq summary::after{transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq summary:hover::after{color:var(--fg)}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--fg)}
.faq details .faq__i{overflow:hidden}
.faq details p{margin:0}

/* ---------- 5 · Felder ---------- */
.gratis input[type=email],.demo__pro input[type=text]{
  background-image:linear-gradient(var(--blue),var(--blue));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:border-color .2s,background-size .35s cubic-bezier(.2,.8,.2,1)}
.gratis input[type=email]:focus,.demo__pro input[type=text]:focus{background-size:100% 2px;outline:none}

/* ---------- 6 · Beschriftung ---------- */
/* Eigene Marke (html.v30) statt html.js: die setzt pz.js, und das laeuft nur
   auf den vier pz-Seiten. Auf Start- und CUE-Seite blieb der Strich sonst
   einfach stehen — kein Fehler, aber auch kein Zeichnen. */
.v30 .lbl::before{transform:scaleX(0);transform-origin:left center;transition:transform .55s .08s cubic-bezier(.2,.8,.2,1)}
.v30 .lbl.da30::before{transform:none}
body.rm .lbl::before{transform:none;transition:none}

/* ---------- 7 · Tabellen ---------- */
.specs tr{transition:background .22s}
.specs tr:hover{background:rgba(143,216,255,.035)}
.specs th{transition:color .22s}
.specs tr:hover th{color:var(--blue)}

/* ---------- 8 · Siegel ---------- */
.c6__ring{transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.c6__s:hover .c6__ring{transform:rotate(90deg);border-color:var(--green);box-shadow:0 0 0 4px rgba(95,227,168,.08)}
.c6__s b{transition:color .25s}
.c6__s:hover b{color:var(--green)}

/* ---------- 8b · Der Hinweis ---------- */
.tipp30{position:fixed;right:18px;bottom:52px;z-index:41;padding:9px 12px;
  background:rgba(8,9,10,.96);border:1px solid rgba(143,216,255,.24);
  font:400 11px/1.3 var(--sans);color:var(--dim);
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none}
.tipp30.da{opacity:1;transform:none}
.tipp30 b{display:inline-block;min-width:16px;padding:1px 5px;margin:0 2px;text-align:center;
  border:1px solid var(--line);font:500 10px/1.3 var(--mono);color:var(--fg)}

/* ---------- 9 · Ruhemodus ---------- */
body.rm .n7__m:hover svg circle,body.rm .g8__m:hover svg circle,body.rm.schwingt .n7__m svg circle{animation:none}
body.rm .c6__s:hover .c6__ring{transform:none}
body.rm .btn:hover svg,body.rm .btn:hover .pfeil{transform:none}