/* Szenen: Auftakt mit Wortmarke und Kartenstapel (Start), Antipp-Demo (Aufsteller),
   Seitenaufbau (Websites), Schnittplatz (Videoschnitt), Kartenbühne (Designs). */

/* =========================================================
   START — Wortmarke, Leistungswahl, Kartenstapel
   Die Wortmarke füllt die Fensterbreite. Darunter wählen drei Zeilen die
   Leistung; die gewählte Karte kommt im Stapel nach vorn. Reines CSS über
   :has(), damit es ohne JavaScript und per Tastatur geht; Übergänge statt
   Keyframes, damit schnelles Umschalten nie springt.
   ========================================================= */
.auftakt{ padding:clamp(10px,1.4vw,20px) 0 clamp(40px,6vw,80px); overflow:clip; }
.wortmarke-gross{ font-family:var(--schmal-schrift); font-weight:900; font-size:29.6vw; line-height:.76; text-transform:uppercase;
  text-align:center; white-space:nowrap; margin:0 0 .02em; letter-spacing:-.005em; user-select:none; overflow:hidden; padding-top:.04em; }
.wortmarke-gross span{ display:inline-block; animation:aufsteigen calc(var(--takt)*6) var(--aus) both; }
.wortmarke-gross span:nth-child(2){ animation-delay:calc(var(--takt)*.35); } .wortmarke-gross span:nth-child(3){ animation-delay:calc(var(--takt)*.7); }
.wortmarke-gross span:nth-child(4){ animation-delay:calc(var(--takt)*1.05); } .wortmarke-gross span:nth-child(5){ animation-delay:calc(var(--takt)*1.4); }
.wortmarke-gross span:nth-child(6){ animation-delay:calc(var(--takt)*1.75); } .wortmarke-gross span:nth-child(7){ animation-delay:calc(var(--takt)*2.1); }
.wortmarke-gross span:nth-child(8){ animation-delay:calc(var(--takt)*2.45); }
/* Das Quadrat aus dem Logo schließt die Wortmarke ab wie ein Punkt. */
.wortmarke-gross .punkt{ display:inline-block; width:.125em; height:.125em; margin-left:.035em; background:var(--akzent);
  animation:aufsteigen calc(var(--takt)*6) var(--aus) calc(var(--takt)*2.8) both; }
@keyframes aufsteigen{ from{ transform:translateY(105%); } }

.buehne-start{ margin:clamp(8px,1vw,14px) var(--aussen) 0; border-radius:var(--rund); background:var(--papier);
  padding:clamp(28px,4.4vw,72px) 0 clamp(36px,5vw,80px); }
.auftakt-raster{ display:grid; gap:clamp(40px,5vw,64px); }
.auftakt-raster > *{ min-width:0; }
@media (min-width:960px){ .auftakt-raster{ grid-template-columns:1.1fr .9fr; align-items:center; } }

.wahl-blatt{ margin-top:40px; border-top:1px solid var(--linie); }
.wahl-blatt label{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  min-height:72px; padding:10px 0; border-bottom:1px solid var(--linie); cursor:pointer; position:relative; }
.wahl-blatt input{ position:absolute; opacity:0; width:1px; height:1px; }
.wahl-blatt label:has(input:focus-visible){ outline:2.5px solid var(--akzent); outline-offset:3px; border-radius:8px; }
.wahl-blatt .kasten,.wahl-blatt .zeile-name{ transition:transform calc(var(--takt)*2) var(--aus),background-color var(--takt) ease; }
.wahl-blatt label:has(input:checked) .kasten,.wahl-blatt label:has(input:checked) .zeile-name{ transform:translateX(10px); }
.wahl-blatt .zeile-name{ font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:500; letter-spacing:-.035em; line-height:1; }
.wahl-blatt .zeile-notiz{ font-size:.95rem; color:var(--tinte-weich); text-align:right; }
@media (max-width:520px){ .wahl-blatt .zeile-notiz{ display:none; } .wahl-blatt label{ grid-template-columns:auto 1fr; } }

/* Alle Karten liegen in derselben Rasterzelle: die Höhe richtet sich nach dem längsten Inhalt. */
.stapel{ display:grid; width:min(80%,440px); margin:80px auto 0; }
@media (min-width:960px){ .stapel{ margin-top:60px; } }
.blatt{
  grid-area:1 / 1; min-width:0; min-height:min(540px,112vw); padding:clamp(22px,3.4vw,32px); display:flex; flex-direction:column;
  border-radius:calc(var(--rund) - 2px); box-shadow:0 30px 60px -36px rgba(16,17,19,.55);
  transition:transform calc(var(--takt)*3) var(--aus);
  animation:ablegen calc(var(--takt)*4) var(--aus) both;
}
.b-gelb{ background:var(--aprikose); } .b-gruen{ background:var(--nebel); }
@keyframes ablegen{ from{ opacity:0; transform:translateY(-70px) rotate(10deg) scale(1.05); } }
/* seite.js führt den Wechsel selbst aus (Mischbewegung); der CSS-Übergang bleibt der Weg ohne JavaScript. */
.js-stapel .blatt{ transition:none; }
/* Während des Wechsels ist der Inhalt aller Karten lesbar; danach blenden die hinteren wieder aus. */
.js-stapel .blatt-inhalt{ transition:opacity calc(var(--takt)*1.5) ease,visibility 0s calc(var(--takt)*1.5); }
.js-stapel.wechselt .blatt-inhalt{ visibility:visible; opacity:1; transition:opacity calc(var(--takt)*.75) ease,visibility 0s; }

/* Lagen: vorn, mitte, hinten */
.auftakt:has(#b-auf:checked) .b-gelb,.auftakt:has(#b-web:checked) .b-gruen,.auftakt:has(#b-video:checked) .b-rosa{
  z-index:3; transform:rotate(-1.5deg); animation-delay:calc(var(--takt)*3); }
.auftakt:has(#b-auf:checked) .b-gruen,.auftakt:has(#b-web:checked) .b-rosa,.auftakt:has(#b-video:checked) .b-gelb{
  z-index:2; transform:translate(10%,-8%) rotate(6deg); animation-delay:calc(var(--takt)*1.5); }
.auftakt:has(#b-auf:checked) .b-rosa,.auftakt:has(#b-web:checked) .b-gelb,.auftakt:has(#b-video:checked) .b-gruen{
  z-index:1; transform:translate(-9%,-15%) rotate(-7deg); }
@media (max-width:600px){
  .auftakt:has(#b-auf:checked) .b-gruen,.auftakt:has(#b-web:checked) .b-rosa,.auftakt:has(#b-video:checked) .b-gelb{ transform:translate(5%,-8%) rotate(4deg); }
  .auftakt:has(#b-auf:checked) .b-rosa,.auftakt:has(#b-web:checked) .b-gelb,.auftakt:has(#b-video:checked) .b-gruen{ transform:translate(-4%,-15%) rotate(-5deg); }
}
/* Inhalt der hinteren Karten ist weder sichtbar noch ansteuerbar */
.blatt-inhalt{ display:flex; flex-direction:column; flex:1; visibility:hidden; opacity:0;
  transition:opacity var(--takt) ease,visibility 0s var(--takt); }
.auftakt:has(#b-auf:checked) .b-gelb .blatt-inhalt,.auftakt:has(#b-web:checked) .b-gruen .blatt-inhalt,
.auftakt:has(#b-video:checked) .b-rosa .blatt-inhalt{ visibility:visible; opacity:1;
  transition:opacity calc(var(--takt)*2) ease var(--takt),visibility 0s; }

.blatt-kopf{ display:flex; justify-content:space-between; font-size:.8rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte-weich); }
/* Auf der vorderen Karte steht der Name schon groß darunter; hinten ist er das Einzige, was man liest. */
.auftakt:has(#b-auf:checked) .b-gelb .blatt-name,.auftakt:has(#b-web:checked) .b-gruen .blatt-name,
.auftakt:has(#b-video:checked) .b-rosa .blatt-name{ visibility:hidden; }
.blatt h2{ font-size:clamp(2.2rem,5vw,3.1rem); margin:22px 0 10px; }
.blatt .zeilen{ margin-top:4px; }
.blatt .zeilen > div{ padding:10px 0; grid-template-columns:4.6em 1fr; }
.blatt .zeilen dd{ font-size:1rem; line-height:1.35; font-weight:400; }
@media (max-width:600px){ .blatt .zeilen > div{ grid-template-columns:3.3em 1fr; } }
.blatt .zeilen dd.gross{ font-size:clamp(3.2rem,9vw,4.6rem); font-weight:500; line-height:.95; }
.blatt .zeilen dd.wort{ font-size:clamp(1.9rem,5.4vw,2.5rem); line-height:1; }
.blatt .knopf{ white-space:nowrap; flex:none; padding:0 20px; }
.blatt-fuss{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:22px; }
.blatt .stempel{ animation:stempeln calc(var(--takt)*1.5) var(--aus) calc(var(--takt)*8) both; }
@keyframes stempeln{ from{ opacity:0; transform:rotate(-4deg) scale(1.5); } }
@media (max-width:420px){ .blatt .stempel{ display:none; } }

/* Laufband mit den Branchen: gleichmäßige Bewegung, hält bei „Bewegung reduzieren" an. */
.laufband{ overflow:hidden; padding:clamp(28px,4vw,48px) 0; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.laufband-spur{ display:flex; width:max-content; gap:0; animation:laufen 38s linear infinite; }
.laufband span{ font-size:clamp(1.6rem,3vw,2.4rem); font-weight:500; letter-spacing:-.03em; white-space:nowrap; padding:0 .55em;
  display:inline-flex; align-items:center; gap:1.1em; }
.laufband span::after{ content:''; width:.3em; height:.3em; border-radius:50%; background:var(--akzent); }
@keyframes laufen{ to{ transform:translateX(-50%); } }
@media (hover:hover) and (pointer:fine){ .laufband:hover .laufband-spur{ animation-play-state:paused; } }

/* =========================================================
   AUFSTELLER — Antipp-Demo
   Ein Handy nähert sich dem NFC-Feld, Wellen laufen, der Hinweis erscheint.
   Erklärt in fünf Sekunden, was der Aufsteller tut. Läuft dreimal, dann Ruhe.
   ========================================================= */
.tresen{ position:relative; width:fit-content; max-width:100%; margin:0 auto; padding:0 9% 26px; }
.staender{ position:relative; padding:12px 12px 0; background:rgba(255,255,255,.4);
  border:1.5px solid rgba(255,255,255,.9); border-bottom:0; border-radius:6px 6px 0 0; box-shadow:0 30px 50px -28px rgba(16,17,19,.5); }
.staender .karte{ font-size:clamp(7px,2.05vw,12.5px); margin:0 auto; box-shadow:none; }
.sockel{ height:18px; margin:0 -6%; background:#101113; border-radius:4px; box-shadow:0 14px 22px -10px rgba(16,17,19,.6); }
.wellen{ position:absolute; left:63%; top:71%; width:96px; height:96px; margin:-48px 0 0 -48px; pointer-events:none; }
.wellen span{ position:absolute; inset:0; border-radius:50%; border:2.5px solid var(--akzent); opacity:0;
  animation:welle 4.8s var(--aus) 3; }
.wellen span:nth-child(2){ animation-delay:.32s; } .wellen span:nth-child(3){ animation-delay:.64s; }
@keyframes welle{ 0%,24%{ transform:scale(.25); opacity:0; } 32%{ opacity:.9; } 58%,100%{ transform:scale(1.15); opacity:0; } }
.handy{ position:absolute; left:60%; top:58%; width:36%; aspect-ratio:9/18; background:#101113;
  border-radius:22px; padding:7px; box-shadow:0 30px 40px -18px rgba(16,17,19,.6);
  transform:translate(90%,40%) rotate(14deg); opacity:0; animation:handy 4.8s var(--hin-her) 3; }
@keyframes handy{ 0%{ transform:translate(90%,40%) rotate(14deg); opacity:0; }
  22%,78%{ transform:translate(8%,6%) rotate(5deg); opacity:1; }
  100%{ transform:translate(90%,40%) rotate(14deg); opacity:0; } }
.handy-schirm{ height:100%; border-radius:16px; background:#fff; overflow:hidden; position:relative; }
.handy-hinweis{ position:absolute; left:7px; right:7px; top:9px; background:#101113; color:#fff; border-radius:11px;
  padding:9px 10px; font-size:.72rem; line-height:1.25; font-weight:500;
  transform:translateY(-130%); animation:hinweis 4.8s var(--aus) 3; }
.handy-hinweis .sterne-reihe{ display:flex; margin-bottom:3px; }
@keyframes hinweis{ 0%,40%{ transform:translateY(-130%); } 48%,80%{ transform:none; } 90%,100%{ transform:translateY(-130%); } }
.nochmal{ display:block; margin:18px auto 0; font:inherit; font-weight:500; color:var(--tinte); background:none; border:0;
  text-decoration:underline; text-underline-offset:.22em; min-height:44px; cursor:pointer; }

/* =========================================================
   DESIGNS — Kartenbühne
   ========================================================= */
.buehne{ background:var(--grund); border-radius:calc(var(--rund) - 6px); padding:clamp(24px,4vw,48px) 16px; display:grid; place-items:center; }
body.gelb .band:not(.band-papier) .buehne{ background:var(--papier); }
.buehne .karte{ font-size:clamp(7.6px,2.35vw,10px); }
.stil{ display:grid; gap:20px; align-content:start; }
.stil > h3{ font-size:1.9rem; font-weight:500; letter-spacing:-.035em; line-height:1; margin:0; }
.stil p{ color:var(--tinte-weich); margin:0; }
.fotos{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:820px){ .fotos{ grid-template-columns:repeat(5,1fr); } }
.fotos figure{ margin:0; }
.fotos img{ border-radius:16px; aspect-ratio:4/5; object-fit:cover; object-position:50% 56%; width:100%; }
.fotos figcaption{ font-size:.92rem; margin-top:10px; color:var(--tinte-weich); }
.fotos figcaption b{ color:var(--tinte); display:block; font-weight:600; }

/* =========================================================
   WEBSITES — eine Seite baut sich auf
   Die Blöcke erscheinen in der Reihenfolge, in der ein Besucher sie liest.
   ========================================================= */
.geraete{ position:relative; padding:0 0 40px 0; }
.browser{ background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 40px 70px -40px rgba(16,17,19,.55); }
.browser-leiste{ display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--linie); }
.browser-leiste i{ width:10px; height:10px; border-radius:50%; background:rgba(16,17,19,.16); }
.browser-leiste span{ margin-left:10px; flex:1; border-radius:8px; background:rgba(16,17,19,.06); font-size:.8rem; padding:5px 12px; color:var(--tinte-weich); }
.mini{ padding:20px; display:grid; gap:14px; font-size:.82rem; line-height:1.35; }
.mini-nav{ display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.mini-nav span:last-child{ display:flex; gap:12px; font-weight:400; color:var(--tinte-weich); }
.mini-titel{ font-size:2rem; font-weight:500; letter-spacing:-.04em; line-height:1; }
.mini-knopf{ justify-self:start; background:#101113; color:#fff; font-weight:500; padding:9px 14px; border-radius:8px; }
.mini-bild{ height:96px; border-radius:12px; background:linear-gradient(120deg,var(--nebel),var(--aprikose)); }
.mini-liste{ display:grid; gap:0; }
.mini-liste div{ display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--linie); }
.mini-sterne{ font-weight:600; }
.handy-web{ position:absolute; right:-6px; bottom:0; width:34%; min-width:138px; background:#101113; border-radius:24px; padding:7px;
  box-shadow:0 24px 40px -18px rgba(16,17,19,.6); }
.handy-web .mini{ background:#fff; border-radius:18px; padding:14px 12px; font-size:.68rem; gap:9px; }
.handy-web .mini-titel{ font-size:1.25rem; } .handy-web .mini-bild{ height:54px; border-radius:8px; }
.js .geraete[data-zeig] .mini > *{ clip-path:inset(0 0 100% 0); opacity:0;
  transition:clip-path calc(var(--takt)*3) var(--aus),opacity calc(var(--takt)*2) ease; }
.js .geraete[data-zeig].da .mini > *{ clip-path:inset(0); opacity:1; }
.js .geraete[data-zeig] .mini > :nth-child(2){ transition-delay:calc(var(--takt)*2); }
.js .geraete[data-zeig] .mini > :nth-child(3){ transition-delay:calc(var(--takt)*4); }
.js .geraete[data-zeig] .mini > :nth-child(4){ transition-delay:calc(var(--takt)*6); }
.js .geraete[data-zeig] .mini > :nth-child(5){ transition-delay:calc(var(--takt)*8); }
.js .geraete[data-zeig] .mini > :nth-child(6){ transition-delay:calc(var(--takt)*10); }
.js .geraete[data-zeig] .handy-web{ transform:translateY(30px); opacity:0;
  transition:transform calc(var(--takt)*3) var(--aus) calc(var(--takt)*6),opacity calc(var(--takt)*2) ease calc(var(--takt)*6); }
.js .geraete[data-zeig].da .handy-web{ transform:none; opacity:1; }

/* =========================================================
   VIDEOSCHNITT — der Schnittplatz
   Links das Handy mit dem Bild, rechts die Zeitleiste wie im Schnittprogramm: vier Clips, darunter die
   Musik mit vier Beats als orange Linien, darüber die Schnittmarken als dunkle Dreiecke, dazu ein
   Abspielkopf. Bei „Auf dem Beat" stehen die Dreiecke genau auf den Linien. Bei „Irgendwo" rutschen sie
   weg, und die rote Fläche zeigt den Abstand. Die Lampe im Handy blinkt auf jedem Beat, das Bild
   wechselt auf jedem Schnitt: liegen beide zusammen, sitzt es. seite.js stellt die Uhr und setzt die
   Schnittpositionen (--s1 bis --s4); ohne JavaScript steht das Standbild im Zustand „Auf dem Beat".
   ========================================================= */
.schnittplatz{ display:grid; gap:32px; align-items:center; }
@media (min-width:820px){ .schnittplatz{ grid-template-columns:minmax(200px,270px) 1fr; gap:56px; } }
.pult{ min-width:0; }
.telefon{ width:min(100%,270px); margin:0 auto; aspect-ratio:9/16; background:#101113; border-radius:38px; padding:10px;
  box-shadow:0 40px 70px -34px rgba(16,17,19,.7); }
.leinwand{ position:relative; height:100%; border-radius:29px; overflow:hidden; background:#fff; }
.szene{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; opacity:0; padding:18px; }
.szene.an{ opacity:1; }
.leinwand.punch .szene.an{ animation:punch calc(var(--takt)*2) var(--aus); }
@keyframes punch{ from{ transform:scale(1.09); } }
.szene b{ font-size:2.1rem; font-weight:500; letter-spacing:-.04em; line-height:1; }
/* Die vier Szenen tragen dieselben Farben wie die vier Clips in der Zeitleiste: vier Helligkeitsstufen von dunkel
   nach hell. Orange bleibt dem Beat vorbehalten. */
.s1,.c1{ background:#1D1F22; color:#F2F2EF; }
.s2,.c2{ background:#55626E; color:#F2F2EF; }
.s3,.c3{ background:#A3B3C0; color:#101113; }
.s4,.c4,.c4b{ background:var(--nebel); color:#101113; }
.untertitel{ position:absolute; left:10px; right:10px; bottom:32px; text-align:center; font-weight:600; font-size:1rem; margin:0; }
.untertitel span{ background:#101113; color:#fff; padding:4px 10px; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.beat-lampe{ position:absolute; z-index:2; top:16px; left:0; right:0; margin:0 auto; width:max-content; display:flex; align-items:center; gap:8px;
  padding:6px 13px 6px 10px; border-radius:999px; background:rgba(16,17,19,.86); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.beat-lampe i{ width:11px; height:11px; border-radius:50%; background:var(--akzent); opacity:.35; }

.urteil{ display:flex; align-items:center; gap:12px; margin:0 0 24px; font-size:1.2rem; font-weight:500; letter-spacing:-.015em; line-height:1.3; }
.urteil .z-haken,.urteil .z-kreuz{ display:contents; }
.urteil .z-kreuz,.urteil.daneben .z-haken{ display:none; }
.urteil.daneben .z-kreuz{ display:contents; }
.urteil.daneben .kasten{ background:var(--fehler); border-color:var(--fehler); }

.zeitleiste{ position:relative; padding:20px 0 36px; --s1:0%; --s2:25%; --s3:50%; --s4:75%; }
.zl-clips{ position:relative; height:66px; }
.clip{ position:absolute; inset:0; transition:clip-path calc(var(--takt)*3) var(--aus); }
.clip span{ position:absolute; inset:0; display:flex; align-items:center; padding-left:14px; font-size:.82rem; font-weight:600;
  transition:transform calc(var(--takt)*3) var(--aus); }
.c1{ clip-path:inset(0 calc(100% - var(--s2) + 2px) 0 calc(var(--s1) + 2px) round 9px); } .c1 span{ transform:translateX(var(--s1)); }
.c2{ clip-path:inset(0 calc(100% - var(--s3) + 2px) 0 calc(var(--s2) + 2px) round 9px); } .c2 span{ transform:translateX(var(--s2)); }
.c3{ clip-path:inset(0 calc(100% - var(--s4) + 2px) 0 calc(var(--s3) + 2px) round 9px); } .c3 span{ transform:translateX(var(--s3)); }
.c4{ clip-path:inset(0 2px 0 calc(var(--s4) + 2px) round 9px); } .c4 span{ transform:translateX(var(--s4)); }
/* Der vierte Clip läuft über das Ende der Schleife hinaus und reicht vorn bis zum ersten Schnitt. */
.c4b{ clip-path:inset(0 calc(100% - var(--s1) + 2px) 0 2px round 9px); }
@media (max-width:520px){ .clip span{ padding-left:8px; font-size:.72rem; } }

.zl-musik{ display:grid; grid-template-columns:repeat(64,1fr); gap:2px; height:60px; align-items:center; margin-top:12px; }
.zl-musik i{ background:var(--tinte); opacity:.5; height:calc(var(--h,20)*1%); border-radius:2px; }
.zl-musik i.schlag{ background:var(--akzent); opacity:1; }

/* Abstand zwischen Beat und Schnitt: jede Zone reicht vom Beat bis zum verspäteten Schnitt dahinter. */
.zl-fehler{ position:absolute; left:0; right:0; top:20px; bottom:36px; pointer-events:none; z-index:2; }
.zl-fehler i{ position:absolute; inset:0; transition:clip-path calc(var(--takt)*3) var(--aus); background:rgba(179,32,15,.26); }
.f1{ clip-path:inset(0 calc(100% - var(--s1)) 0 0%); }
.f2{ clip-path:inset(0 calc(100% - var(--s2)) 0 25%); }
.f3{ clip-path:inset(0 calc(100% - var(--s3)) 0 50%); }
.f4{ clip-path:inset(0 calc(100% - var(--s4)) 0 75%); }

.zl-beats{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.zl-beats i{ position:absolute; top:14px; bottom:12px; width:2px; margin-left:-1px; background:var(--akzent); }
.b1{ left:0; } .b2{ left:25%; } .b3{ left:50%; } .b4{ left:75%; }
.zl-beats b{ font-style:normal; position:absolute; bottom:-12px; left:-11px; width:24px; height:24px; border-radius:50%; background:var(--akzent); color:#FFFFFF;
  font-size:.78rem; font-weight:700; line-height:1; display:grid; place-items:center; }

.zl-schnitte{ position:absolute; left:0; right:0; top:0; height:86px; pointer-events:none; z-index:4; }
.zl-schnitte i{ position:absolute; inset:0; transition:transform calc(var(--takt)*3) var(--aus); }
.m1{ transform:translateX(var(--s1)); } .m2{ transform:translateX(var(--s2)); } .m3{ transform:translateX(var(--s3)); } .m4{ transform:translateX(var(--s4)); }
.zl-schnitte i::before{ content:''; position:absolute; left:-8px; top:2px; width:16px; height:12px; background:var(--tinte); clip-path:polygon(0 0,100% 0,50% 100%); }
.zl-schnitte i::after{ content:''; position:absolute; left:-1px; top:12px; bottom:0; width:2px; background:var(--tinte); }

.zl-kopf{ position:absolute; z-index:5; top:8px; bottom:30px; left:0; width:3px; margin-left:-1.5px; border-radius:2px; background:var(--tinte);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9); will-change:transform; }
.zl-kopf::before{ content:''; position:absolute; top:-6px; left:-5px; width:13px; height:13px; border-radius:50%; background:var(--tinte);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9); }

.legende{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 24px; margin:6px 0 0; padding:0; font-size:.9rem; color:var(--tinte-weich); }
.legende li{ display:inline-flex; align-items:center; gap:9px; }
.legende li::before{ content:''; width:14px; height:14px; flex:none; }
.l-beat::before{ border-radius:50%; background:var(--akzent); }
.l-schnitt::before{ background:var(--tinte); clip-path:polygon(0 0,100% 0,50% 100%); }
.l-fehler::before{ border-radius:3px; background:rgba(179,32,15,.34); }

.bedienung{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; }
.regler{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px; border-radius:14px; background:rgba(16,17,19,.07); }
.regler button{ font:inherit; font-weight:500; color:var(--tinte); background:transparent; min-height:46px; padding:0 18px;
  border:0; border-radius:10px; cursor:pointer; transition:background-color var(--takt) ease,transform calc(var(--takt)*.75) var(--aus); }
.regler button[aria-pressed="true"]{ background:var(--tinte); color:var(--papier); }
.regler button:active,.knopf-leise:active{ transform:scale(.97); }
.knopf-leise{ font:inherit; font-weight:500; color:var(--tinte); background:transparent; min-height:56px; padding:0 20px; cursor:pointer;
  border:1.5px solid var(--linie); border-radius:14px;
  transition:background-color var(--takt) ease,color var(--takt) ease,transform calc(var(--takt)*.75) var(--aus); }
.knopf-leise[data-ton][aria-pressed="true"]{ background:var(--akzent); border-color:var(--akzent); color:#FFFFFF; }

@media (prefers-reduced-motion:reduce){
  .handy{ opacity:1; transform:translate(8%,6%) rotate(5deg); }
  .handy-hinweis{ transform:none; }
  .wellen{ display:none; }
  .laufband-spur{ animation:none; }
}