/* Labor: Mitmach-Flaechen und abspielbare Grafiken der Web-Hefte (26.10.2026).
   Nur Bildschirm. Im Druck und in den PDFs bleibt die ruhige Grafik stehen.
   Farben aus den Heft-Tokens (:root im Heft-CSS), keine eigenen. */

@font-face{font-family:"Phosphor-Light";src:url("/_assets/phosphor/Phosphor-Light.woff2") format("woff2");
  font-weight:normal;font-style:normal;font-display:block;}
.lb-i{font-family:"Phosphor-Light"!important;font-style:normal;font-weight:normal;line-height:1;
  speak:never;display:inline-block;font-size:15px;}
.lb-i[data-i="play"]::before{content:"\e3d0";}
.lb-i[data-i="stop"]::before{content:"\e46c";}
.lb-i[data-i="flask"]::before{content:"\e79e";}
.lb-i[data-i="keys"]::before{content:"\e9c8";}
.lb-i[data-i="tap"]::before{content:"\e29a";}
.lb-i[data-i="repeat"]::before{content:"\e3f6";}
.lb-i[data-i="zurueck"]::before{content:"\e038";}

/* Bedienfarbe bleibt der Heft-Akzent (Dorian 26.10.: Farbstil nicht anfassen).
   Aus gray-os uebernommen: Uebergangskurve, Druckgefuehl, Chip fuer Schalter. */
.labor,.spur-leiste{--lf:var(--accent);--ease:cubic-bezier(0.22,1,0.36,1);}

/* Mitmach-Flaeche unter einer Grafik */
.labor{margin:6px 0 28px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);padding:12px 14px 14px;}
.labor-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 10px;font-family:var(--mono);
  font-size:11px;letter-spacing:var(--tw);text-transform:uppercase;color:var(--text-2);}
.labor-kopf .lb-i{font-size:14px;color:var(--lf);}
.labor-kopf b{flex-basis:100%;margin-top:3px;font-family:var(--font);font-size:15px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--text);}
.labor svg{display:block;width:100%;height:auto;overflow:visible;}
/* Nur auf den Griffen ist Scrollen gesperrt, sonst scrollt die Seite ueber der Grafik weiter (Critic R2). */
.labor .zieh{touch-action:pan-y;cursor:grab;}
.labor .zieh circle{touch-action:none;}
.labor .zieh:active{cursor:grabbing;}
.labor-text{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--text-2);min-height:1.5em;}
.labor-text b{color:var(--text);font-weight:500;}

/* Bedienzeile */
.labor-regler{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px;}
.lb{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line-2);
  border-radius:999px;background:transparent;color:var(--text);font-family:var(--mono);
  font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;line-height:1.3;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease),transform 90ms var(--ease);}
.lb:hover{border-color:color-mix(in srgb,var(--lf) 55%,transparent);}
.lb:active{transform:translateY(1px);}
.lb:focus-visible,.lw button:focus-visible,.lr input:focus-visible,.seq button:focus-visible{
  outline:2px solid var(--lf);outline-offset:3px;}
/* Ton laeuft: das Pad leuchtet (gefuellt). Automatik an: Chip, Umriss plus gedimmte Flaeche, nie voll. */
.lb[aria-pressed="true"]{background:var(--lf);border-color:var(--lf);color:#000;}
.lb.schalter[aria-pressed="true"]{background:color-mix(in srgb,var(--lf) 13%,transparent);color:var(--lf);}
.lb.taste{padding:12px 20px;font-size:12px;}
.lb.taste.an{background:var(--lf);border-color:var(--lf);color:#000;}
.lw{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;}
.lw button{transition:color .15s var(--ease),background .15s var(--ease);border:0;background:transparent;color:var(--text-2);padding:7px 11px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;line-height:1.3;}
.lw button:hover{color:var(--text);}
/* Auswahl: Cyan-Umriss mit leichter Toenung statt weisser Vollflaeche, damit die Grafik das Hellste bleibt. */
.lw button[aria-pressed="true"]{background:rgba(133,248,246,0.15);color:var(--accent);font-weight:600;}
.lw-halter{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lw-name{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-2);}
.lr{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-2);}
.lr input{width:130px;accent-color:var(--lf);margin:0;}
.lr span{min-width:7.2em;}
.lr output{min-width:5.5em;color:var(--text);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0.02em;}
.lw button.einheit{text-transform:none;letter-spacing:0.03em;}

/* Abspielbare Grafik: Leiste direkt unter dem Bild, vor der Bildunterschrift */
.spur-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 2px;max-width:620px;}
/* Spur-Schalter: einzelne Chips, Punkt in der Farbe der Zeile. Stumm = Punkt leer, Name durchgestrichen. */
.spur-chips{display:inline-flex;flex-wrap:wrap;gap:6px;}
.spur-chips .chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line-2);
  border-radius:999px;background:transparent;color:var(--text-2);font-family:var(--mono);font-size:11.5px;
  letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;line-height:1.3;
  transition:color .15s var(--ease),border-color .15s var(--ease);}
.spur-chips .chip:hover{color:var(--text);border-color:var(--accent-line);}
.spur-chips .chip i{width:8px;height:8px;border-radius:50%;flex:none;}
.spur-chips .chip.aus{color:var(--text-3);text-decoration:line-through;}
.spur-chips .chip.aus i{background:transparent!important;box-shadow:inset 0 0 0 1px var(--text-3);}
.spur-chips .chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.spur-hinweis{font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-2);}
svg .spur-kopf{pointer-events:none;}
/* Was gerade klingt, bekommt einen hellen Rand. Aufhellen machte die Pastellfarben weiss. */
svg rect.spur-an{stroke:#f4f5f7;stroke-width:1.6px;stroke-opacity:0.95;}

/* Step-Sequenzer: echte Knoepfe statt Grafik, damit Tastatur und Daumen gehen */
.seq{display:grid;grid-template-columns:52px repeat(16,minmax(0,1fr));gap:3px;}
.seq .grp{margin-left:7px;}
.seq .nm{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  align-self:center;white-space:nowrap;overflow:hidden;}
.seq .nr{font-family:var(--mono);font-size:9.5px;color:var(--text-3);text-align:center;}
.seq .nr.eins{color:var(--text-2);}
.seq-wisch{display:none;}
/* Leere Felder tragen die Spurfarbe schwach, damit man beim Selbsteingeben sieht, welche Zeile welche ist. */
.seq button{height:30px;min-width:0;border:1px solid color-mix(in srgb,var(--zf) 30%,transparent);border-radius:3px;
  background:color-mix(in srgb,var(--zf) 7%,transparent);padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.seq button.schlag{border-color:color-mix(in srgb,var(--zf) 55%,transparent);}
.seq button[aria-pressed="true"]{background:var(--zf,var(--accent));border-color:var(--zf,var(--accent));}
.seq button.jetzt{box-shadow:0 0 0 1px var(--text) inset;}
.seq button[aria-pressed="true"].jetzt{box-shadow:0 0 0 2px #000 inset,0 0 0 3px var(--text) inset;}

@media (max-width:720px){
  .labor{margin-left:-6px;margin-right:-6px;padding:11px 10px 12px;}
  .lr{width:100%;}
  .lr{min-height:44px;}
  .lr input{flex:1;width:auto;height:44px;}
  .lb{padding:11px 15px;font-size:12px;}
  .lw button{padding:11px 12px;font-size:11.5px;}
  .spur-chips{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  .spur-chips .chip{padding:10px 13px;font-size:10.5px;}
  .seq{grid-template-columns:40px repeat(16,minmax(0,1fr));gap:2px;}
  .seq .grp{margin-left:4px;}
  .seq .nm{font-size:9.5px;letter-spacing:0;}
  .seq .nr{font-size:8.5px;}
  .seq .nr:not(.eins){visibility:hidden;}
  .seq button{height:36px;}
  /* Vier Schalter in einer Pille brachen in eine zweite Zeile und sahen kaputt aus. */
  .lw.vier{display:grid;grid-template-columns:1fr 1fr;border-radius:12px;}
  /* 16 Felder auf 340 px waren 17 px breit. Mobil feste 26 px und seitlich wischen,
     der Spurname bleibt dabei links stehen. */
  .seq{grid-template-columns:44px repeat(16,26px);overflow-x:auto;padding-bottom:4px;}
  .seq-wisch{display:block;margin-top:4px;}
  .seq .nm{position:sticky;left:0;z-index:1;background:var(--surface);}
  /* Tippziele am Telefon mindestens 44 px hoch (Critic R4). */
  .lb,.lw button,.spur-chips .chip{min-height:44px;}
  .lw button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;}
  .labor-mehr summary{min-height:44px;display:flex;align-items:center;padding:0;}
  .seq{grid-template-columns:44px repeat(16,32px);padding-bottom:10px;scroll-behavior:smooth;}
  .seq button{height:44px;}
}
.stimm-legende{font-size:13px;line-height:1.5;color:var(--text-2);margin-top:6px;}
.stimm-legende span{display:inline-flex;align-items:center;gap:6px;margin-right:12px;white-space:nowrap;}
.stimm-legende i{width:10px;height:10px;border-radius:50%;flex:none;}
.stimm-legende i.voll{background:#85f8f6;}
.stimm-legende i.puls{border:1.5px solid #edcabd;animation:stimm-puls 1.2s ease-in-out infinite;}
@keyframes stimm-puls{50%{transform:scale(0.55);}}
@media (prefers-reduced-motion:reduce){.stimm-legende i.puls{animation:none;}}
@media print{.labor,.spur-leiste,.spur-kopf{display:none!important;}}
.labor-mehr{margin-top:10px;}
.labor-mehr summary{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-2);cursor:pointer;padding:6px 0;}
.labor-mehr summary:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
/* Antippbare SVG-Zeilen/Kacheln: kein Browser-Fokusring nach Antippen, Cyan nur fuer Tastatur. */
.labor svg [tabindex]:focus{outline:none;}
.labor svg [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}