/* Hero "Bühne" für mediatech.ch (Agent HERO, Fassung 19, 03.10.2026). Nur auf der Startseite geladen.
   Grundlage ist die heutige Bühne der Startseite: weinroter Verlauf, warmes 44px-Raster, Glasbühne mit
   Lichtschein unter dem Produkt (hero-rail.css). Neu: Suche und Einstiege, vier Welten mit je eigenem Instrument.
   Abstände aus der Fibonacci-Reihe 8, 13, 21, 34, 55, 89. Bewegung nur ohne prefers-reduced-motion. */
/* ---------- Schutzschicht gegen Shop-CSS (Fassung 19b, 04.10.2026; Estebans Wort: "das patchbay im rack ist nun weiss statt alu anthrazit").
   Steht bewusst am ANFANG: setzt die Grundwerte der Vorschau, alle späteren Regeln der Bühne überschreiben sie wie gewohnt.
   Die Knöpfe der Bühne tragen die Klasse mth-btn-eigen (enthält "btn-"): damit greift die Shopregel button:not([class*="btn-"])
   (Hintergrund #efecec, Schriftfarbe #333e48) nicht mehr; mt-skip-tap nimmt sie aus der pauschalen 44-px-Mindesthöhe des Shops,
   die Bühne regelt ihre Tastengrössen selbst. ---------- */
.mth { letter-spacing: normal; }
.mth h2 { line-height: 1.5; }
.mth label { font-size: inherit; font-weight: 400; line-height: 1.5; margin-bottom: 0; }
.mth b, .mth strong { font-weight: bolder; }
.mth button { font-family: Arial, sans-serif; font-size: 13.3333px; line-height: normal; color: #000; }
.mth a.mth__alle { text-decoration: underline; }
.mth { overflow-wrap: normal; word-break: normal; } /* der Shop bricht Wörter mitten im Wort (Patchpane ls) */

.mth {
  --wein-0: #180705; --wein-1: #351310; --wein-2: #5a2017; --wein: #823a2d;
  --glut: #c0492f; --glut-hell: #f08a6c;
  --text-hell: #fbf3f0; --text-gedimmt: #d9bdb5; --text-leise: #b8988f;
  --preis: #45e3b0; --pegel: #3fe08f; --pegel-gelb: #f3c94b; --rot: #ff5a45;
  --glas: rgba(255, 255, 255, .07); --kante: rgba(255, 255, 255, .12);
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
  --f-mess: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --s1: 8px; --s2: 13px; --s3: 21px; --s4: 34px; --s5: 55px; --s6: 89px;
  --r: 8px;

  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(115% 80% at 18% 18%, rgba(196, 90, 68, .16) 0%, rgba(196, 90, 68, 0) 46%),
    radial-gradient(120% 120% at 92% 105%, rgba(130, 58, 45, .42) 0%, rgba(130, 58, 45, 0) 55%),
    linear-gradient(135deg, var(--wein-0) 0%, var(--wein-1) 55%, var(--wein-2) 100%);
  color: var(--text-hell);
  font-family: var(--f-text); font-size: 16px; line-height: 1.5;
  padding: var(--s5) 16px 0; margin: 0;
}
.mth, .mth *, .mth *::before, .mth *::after { box-sizing: border-box; }
.mth a { color: inherit; }
.mth [hidden] { display: none !important; }
.mth :focus-visible { outline: 3px solid var(--glut-hell); outline-offset: 3px; border-radius: 4px; }
.mth::before { /* warmes Raster wie heute, weich maskiert */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(210, 120, 100, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(210, 120, 100, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 28% 30%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 28% 30%, #000 0%, transparent 72%);
}
.mth__innen { max-width: 1320px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s4); }
.mth__oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }

/* ---------- Eingang ---------- */
.mth__eingang { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.mth__vorzeile {
  display: inline-flex; align-items: center; gap: var(--s1); align-self: flex-start;
  font-family: var(--f-mess); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-gedimmt); border: 1px solid var(--kante); border-radius: 999px; padding: 5px var(--s2);
  background: rgba(0, 0, 0, .18);
}
.mth__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); }
.mth__live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 90, 69, .6); animation: mth-puls-ring 2s ease-out infinite; }
@keyframes mth-puls-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(4.25); opacity: 0; } }
@keyframes mth-puls { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 69, .6); } 100% { box-shadow: 0 0 0 13px rgba(255, 90, 69, 0); } }
.mth h1 {
  margin: 0; color: var(--text-hell); text-transform: none;
  font-family: var(--f-display); font-weight: 900; font-stretch: 118%;
  font-size: clamp(36px, 4.3vw, 64px); line-height: .98; letter-spacing: -.01em; text-wrap: balance;
}
.mth h1 .z { display: block; animation: mth-hoch .7s cubic-bezier(.2, .8, .2, 1) both; }
.mth h1 .z2 { color: var(--glut-hell); animation-delay: .12s; }
@keyframes mth-hoch { from { transform: translateY(21px); opacity: .25; } to { transform: none; opacity: 1; } }
.mth__unter { margin: 0; max-width: 34em; color: var(--text-gedimmt); font-size: 18px; text-wrap: pretty; }
.mth__unter b { color: var(--text-hell); font-weight: 600; }

.mth__suche { display: flex; flex-direction: column; gap: var(--s1); margin: 0; }
.mth__suche label { font-family: var(--f-mess); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-gedimmt); margin: 0; }
.mth__feld { display: flex; align-items: stretch; background: #fff; border-radius: var(--r); box-shadow: 0 21px 55px -21px rgba(0, 0, 0, .75); transition: box-shadow .2s; }
.mth__feld:focus-within { box-shadow: 0 0 0 3px var(--glut-hell), 0 21px 55px -21px rgba(0, 0, 0, .75); }
.mth .mth__feld input[type="search"] {
  flex: 1; min-width: 0; border: 0; background: transparent; color: #1b1210; box-shadow: none; height: auto;
  font: 500 18px/1.2 var(--f-text); padding: var(--s3); outline: none; border-radius: var(--r) 0 0 var(--r);
}
.mth .mth__feld input::placeholder { color: #6e5f5b; }
/* electro färbt Knöpfe über eine lange :not()-Kette grau; hier hart überstimmen */
.mth .mth__feld button {
  border: 0 !important; cursor: pointer; margin: 5px; border-radius: 5px; padding: 0 var(--s3); height: auto; min-height: 0;
  background: linear-gradient(135deg, var(--glut), var(--wein)) !important; color: #fff !important;
  font: 700 16px/1 var(--f-text); text-transform: none; letter-spacing: 0; box-shadow: none;
  display: inline-flex; align-items: center; gap: var(--s1); transition: filter .2s, transform .2s;
}
.mth .mth__feld button:hover { filter: brightness(1.12); }
.mth .mth__feld button:active { transform: scale(.97); }
.mth__hilfe { font-size: 14px; color: var(--text-leise); margin: 0; }

.mth__wege { display: flex; flex-wrap: wrap; gap: var(--s1); }
.mth a.mth__weg {
  display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2); border-radius: 999px; text-decoration: none;
  border: 1px solid var(--kante); background: rgba(0, 0, 0, .18); color: var(--text-hell); font-size: 15px; font-weight: 500;
  transition: border-color .2s, background .2s, transform .2s;
}
.mth a.mth__weg:hover { border-color: var(--glut-hell); background: rgba(240, 138, 108, .14); transform: translateY(-2px); color: var(--text-hell); }
.mth__weg svg { width: 16px; height: 16px; flex: none; }
.mth__weg--deal svg, .mth__weg--trend svg { color: var(--glut-hell); }

.mth__anzeige { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--kante); border: 1px solid var(--kante); border-radius: var(--r); overflow: hidden; }
.mth__wert { background: rgba(24, 7, 5, .55); padding: var(--s2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mth__zahl { font-family: var(--f-mess); font-weight: 700; font-size: clamp(20px, 2vw, 28px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mth__wert:nth-child(2) .mth__zahl { color: var(--pegel); }
.mth__was { font-size: 13px; color: var(--text-gedimmt); }

/* ---------- Rampenlicht: die heutige Glasbühne mit Produkt ---------- */
.mth__rampe { min-width: 0; position: relative; display: flex; flex-direction: column; gap: var(--s2); }
.mth__rampe-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.mth__rampe-titel { font-family: var(--f-mess); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-gedimmt); }
.mth a.mth__alle { font-size: 14px; font-weight: 600; color: var(--text-hell); text-decoration-color: var(--glut-hell); text-underline-offset: 3px; }
.mth__buehne { position: relative; display: grid; }
.mth__deal {
  grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s3); align-items: center;
  padding: var(--s3); border-radius: 18px; text-decoration: none; color: var(--text-hell);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 42%, rgba(0, 0, 0, .16) 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 34px rgba(0, 0, 0, .38);
  opacity: 0; visibility: hidden; transform: translateX(13px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s;
}
.mth__deal.ist-an { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.mth__deal-bild { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 233px; }
.mth__deal-bild::before { /* warmes Führungslicht hinter dem Produkt, wie heute */
  content: ""; position: absolute; inset: 0 -8px 13px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 130, 102, .42), rgba(224, 130, 102, 0) 100%);
  animation: mth-glut 4s ease-in-out infinite alternate;
}
@keyframes mth-glut { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
.mth__deal-bild::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 70%; height: 13px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.mth__deal-bild img { position: relative; z-index: 1; max-width: 100%; width: 100%; height: auto; max-height: 233px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 13px 21px rgba(0, 0, 0, .45)); }
.mth__deal.ist-an .mth__deal-bild img { animation: mth-schweben 6s ease-in-out infinite alternate; }
@keyframes mth-schweben { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.mth__deal-text { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.mth__spar { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--glut), var(--wein)); padding: 5px var(--s2); border-radius: 999px; }
.mth__deal-name { font-family: var(--f-display); font-weight: 800; font-stretch: 105%; font-size: 21px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mth__deal-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1); }
.mth__deal-preis s { color: var(--text-leise); font-size: 14px; }
.mth__deal-preis b { font-family: var(--f-display); font-weight: 900; font-size: clamp(26px, 2.3vw, 34px); line-height: 1; color: var(--preis); font-variant-numeric: tabular-nums; }
.mth__deal-preis small { font-size: 12px; color: var(--text-leise); width: 100%; }
.mth__lager { font-size: 13px; color: var(--pegel); display: inline-flex; align-items: center; gap: 5px; }
.mth__lager::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.mth__kaufen { align-self: flex-start; margin-top: 5px; display: inline-flex; gap: var(--s1); align-items: center; font-weight: 700; padding: var(--s2) var(--s3); border-radius: var(--r); background: linear-gradient(135deg, var(--glut), var(--wein)); color: #fff; transition: filter .2s; }
.mth__deal:hover .mth__kaufen { filter: brightness(1.15); }
.mth__punkte { display: flex; gap: var(--s1); justify-content: center; }
.mth .mth__punkt { width: 34px; height: 4px; padding: 0; border: 0 !important; border-radius: 2px; background: rgba(255, 255, 255, .22) !important; cursor: pointer; position: relative; overflow: hidden; min-height: 0; }
.mth .mth__punkt.ist-an::after { content: ""; position: absolute; inset: 0; background: var(--preis); transform-origin: left; animation: mth-lauf var(--takt, 6s) linear forwards; }
@keyframes mth-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Vier Welten, jede mit eigenem Instrument ---------- */
.mth__welten-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.mth h2.mth__welten-titel { margin: 0; color: var(--text-hell); font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 21px; text-transform: none; }
.mth__welten-hinweis { font-family: var(--f-mess); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }
.mth__welten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.mth a.welt {
  position: relative; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; text-decoration: none; color: var(--text-hell);
  background: rgba(15, 4, 3, .55); border: 1px solid var(--kante); border-radius: var(--r); padding: var(--s2);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s;
}
.mth a.welt:hover, .mth a.welt:focus-visible { transform: translateY(-5px); border-color: var(--glut-hell); box-shadow: 0 21px 34px -21px rgba(240, 138, 108, .6); color: var(--text-hell); }
.welt__kopf { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mess); font-size: 11px; letter-spacing: .08em; color: var(--text-leise); }
.welt__instr { position: relative; height: 89px; border-radius: 5px; overflow: hidden; background: #0d0403; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.welt__fuss { display: flex; align-items: flex-end; gap: var(--s1); }
.welt__bild { flex: none; width: 55px; height: 35px; border-radius: 4px; background: #fff; overflow: hidden; display: grid; place-items: center; }
.welt__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.welt__zahl { font-family: var(--f-mess); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.welt__zahl small { display: block; font-family: var(--f-text); font-weight: 400; font-size: 12px; color: var(--text-leise); }
.welt__name { font-size: 14px; font-weight: 600; line-height: 1.25; min-height: 2.5em; text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; }
.welt__pfeil { font-size: 13px; color: var(--glut-hell); font-weight: 600; }

/* Audio: Pegelanzeige mit Fader */
.instr-audio { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 21px; gap: 5px; padding: var(--s1); }
.instr-audio i { position: relative; border-radius: 2px; background: repeating-linear-gradient(0deg, #1c0a08 0 4px, #120605 4px 6px); overflow: hidden; }
.instr-audio i::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 60%);
  background: linear-gradient(0deg, var(--pegel) 0 60%, var(--pegel-gelb) 60% 85%, var(--rot) 85%);
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 6px); mask: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 6px);
  transform-origin: bottom; animation: mth-vu var(--d, 1.2s) ease-in-out infinite alternate;
}
@keyframes mth-vu { 0% { transform: scaleY(.55); } 35% { transform: scaleY(1); } 60% { transform: scaleY(.7); } 100% { transform: scaleY(.9); } }
.instr-audio b { position: relative; justify-self: center; width: 4px; border-radius: 2px; background: #050101; }
.instr-audio b::after { content: ""; position: absolute; left: 50%; bottom: 55%; width: 21px; height: 13px; transform: translateX(-50%); border-radius: 3px; background: linear-gradient(180deg, #f4ece9, #a8958f); box-shadow: 0 3px 5px rgba(0, 0, 0, .5); transition: bottom .6s cubic-bezier(.2, .8, .2, 1); }
.mth a.welt:hover .instr-audio b::after { bottom: 70%; }

/* Video: Monitor mit REC, Zeitcode und Wellenform */
.instr-video { background: #050202; }
.instr-video .rec { position: absolute; left: var(--s1); top: 6px; display: flex; align-items: center; gap: 5px; font-family: var(--f-mess); font-size: 11px; font-weight: 700; color: #fff; z-index: 2; }
.instr-video .rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); animation: mth-rec 1s steps(1) infinite; }
@keyframes mth-rec { 50% { opacity: .15; } }
.instr-video .tc { position: absolute; right: var(--s1); top: 6px; font-family: var(--f-mess); font-size: 11px; color: var(--text-gedimmt); font-variant-numeric: tabular-nums; z-index: 2; }
.instr-video .raster { position: absolute; inset: 0; background-image: linear-gradient(rgba(69, 227, 176, .10) 1px, transparent 1px); background-size: 100% 13px; }
.instr-video svg { position: absolute; left: 0; bottom: 5px; width: 200%; height: 55px; animation: mth-welle 4s linear infinite; }
.instr-video svg path { fill: none; stroke: var(--preis); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(69, 227, 176, .7)); }
@keyframes mth-welle { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.instr-video .ecken { position: absolute; inset: 21px 13px 8px; border: 1px solid rgba(255, 255, 255, .25); -webkit-mask: linear-gradient(#000 0 0) top left / 13px 13px no-repeat, linear-gradient(#000 0 0) top right / 13px 13px no-repeat, linear-gradient(#000 0 0) bottom left / 13px 13px no-repeat, linear-gradient(#000 0 0) bottom right / 13px 13px no-repeat; mask: linear-gradient(#000 0 0) top left / 13px 13px no-repeat, linear-gradient(#000 0 0) top right / 13px 13px no-repeat, linear-gradient(#000 0 0) bottom left / 13px 13px no-repeat, linear-gradient(#000 0 0) bottom right / 13px 13px no-repeat; }

/* Licht (Saal): drei Moving Heads mit wanderndem Strahl und Farbwechsel */
.instr-licht { background: linear-gradient(180deg, #0a0302, #1a0806); }
.instr-licht i { position: absolute; top: -2px; width: 13px; height: 8px; border-radius: 0 0 4px 4px; background: #3a2a27; z-index: 2; }
.instr-licht i::after {
  content: ""; position: absolute; top: 6px; left: 50%; width: 55px; height: 110px; transform-origin: 50% 0; translate: -50% 0;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--c, #ffd27a) 0%, transparent 92%); opacity: .75; mix-blend-mode: screen;
  animation: mth-schwenk var(--d, 3.4s) ease-in-out infinite alternate, mth-farbe 9s linear infinite;
}
.instr-licht i:nth-child(1) { left: 18%; --d: 3.1s; }
.instr-licht i:nth-child(2) { left: 50%; --d: 3.9s; --c: #ff7a5c; }
.instr-licht i:nth-child(2)::after { animation-delay: -1.3s, -3s; animation-direction: alternate-reverse, normal; }
.instr-licht i:nth-child(3) { left: 82%; --d: 3.4s; --c: #f6f0e8; }
.instr-licht i:nth-child(3)::after { animation-delay: -.6s, -6s; }
.instr-licht i { translate: -50% 0; }
@keyframes mth-schwenk { from { rotate: -26deg; } to { rotate: 26deg; } }
@keyframes mth-farbe { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(-40deg) saturate(1.3); } }
.instr-licht .boden { position: absolute; left: 0; right: 0; bottom: 0; height: 13px; background: radial-gradient(60% 100% at 50% 100%, rgba(255, 190, 140, .35), transparent); }

/* Draussen: Subwoofer-Membran mit Bassdruck und Akkuanzeige */
.instr-aussen { display: flex; align-items: center; justify-content: space-around; gap: var(--s1); padding: var(--s1); background: radial-gradient(80% 120% at 30% 50%, #2a0d0a, #0d0403); }
.instr-aussen .membran { position: relative; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle, #3a2a27 0 18%, #140706 19% 30%, #2b1d1b 31% 62%, #0a0302 63% 70%, #3a2a27 71%); box-shadow: inset 0 0 0 2px #4a3632; animation: mth-bass .5s cubic-bezier(.3, 0, .2, 1) infinite; }
.instr-aussen .membran::before, .instr-aussen .membran::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--glut-hell); opacity: 0; animation: mth-welle-ring 1s ease-out infinite; }
.instr-aussen .membran::after { animation-delay: .5s; }
@keyframes mth-bass { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.07); } }
@keyframes mth-welle-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.instr-aussen .akku { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.instr-aussen .akku-hals { width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: #8a7671; }
.instr-aussen .akku-zellen { display: flex; flex-direction: column-reverse; gap: 2px; padding: 3px; width: 26px; border: 2px solid #8a7671; border-radius: 4px; }
.instr-aussen .akku-zellen span { height: 8px; border-radius: 1px; background: var(--pegel); opacity: .2; animation: mth-laden 3.4s steps(1) infinite; }
.instr-aussen .akku-zellen span:nth-child(2) { animation-delay: .85s; }
.instr-aussen .akku-zellen span:nth-child(3) { animation-delay: 1.7s; }
.instr-aussen .akku-zellen span:nth-child(4) { animation-delay: 2.55s; }
@keyframes mth-laden { 0% { opacity: .2; } 25%, 100% { opacity: 1; } }
.instr-aussen .akku-zellen span { animation-fill-mode: both; }
.instr-aussen .blitz { font-size: 11px; font-family: var(--f-mess); color: var(--text-leise); }

/* ---------- Laufband: Hauptbereiche mit Link- und Aktivitäts-LEDs wie am Switch ---------- */
.mth__band { margin: var(--s5) -16px 0; border-top: 2px solid var(--glut); background: rgba(10, 3, 2, .72); overflow: hidden; white-space: nowrap; }
.mth__band-innen { display: inline-flex; gap: var(--s4); padding-block: var(--s2); animation: mth-band 55s linear infinite; }
.mth__band:hover .mth__band-innen { animation-play-state: paused; }
.mth .mth__band a { display: inline-flex; align-items: center; gap: var(--s1); font-family: var(--f-mess); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-gedimmt); text-decoration: none; }
.mth .mth__band a b { color: var(--text-hell); font-weight: 700; }
.mth .mth__band a:hover b { color: var(--glut-hell); }
.mth__band .led { display: inline-flex; gap: 3px; }
.mth__band .led::before, .mth__band .led::after { content: ""; width: 6px; height: 6px; border-radius: 1px; }
.mth__band .led::before { background: var(--pegel); box-shadow: 0 0 5px var(--pegel); }
.mth__band .led::after { background: var(--pegel-gelb); box-shadow: 0 0 5px var(--pegel-gelb); animation: mth-akt var(--d, .7s) steps(2) infinite; }
@keyframes mth-akt { 50% { opacity: .15; } }
@keyframes mth-band { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Einbettung in die Startseite: volle Breite, unter die Navigation gezogen wie die alte Hero ---------- */
.mt-homepage-v3 section.mt-section.mth { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: var(--s5) 16px 0; }
@media (min-width: 1200px) {
  body.page-template-template-homepage-v3 .mt-homepage-v3 section.mt-section.mth { margin-top: -94px; padding-top: calc(94px + var(--s4)); }
}

/* ---------- Breiten ---------- */
@media (max-width: 1080px) {
  .mth__oben { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .mth__welten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mth, .mt-homepage-v3 section.mt-section.mth { padding-top: var(--s4); }
  .mth h1 { font-size: 34px; }
  .mth__unter { font-size: 16px; }
  .mth .mth__feld input[type="search"] { padding: var(--s2); font-size: 16px; }
  .mth .mth__feld button span { display: none; }
  .mth a.mth__weg { font-size: 14px; padding: 5px var(--s2); }
  .mth__wert { padding: var(--s1); }
  .mth__was { font-size: 12px; }
  .mth__deal { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s2); }
  .mth__deal-bild { min-height: 144px; }
  .mth__deal-bild img { max-height: 144px; }
  .mth__deal-preis b { font-size: 28px; }
  .mth__welten { gap: var(--s1); }
  .mth a.welt { padding: var(--s1); }
  .welt__instr { height: 55px; }
  .instr-aussen .membran { width: 44px; height: 44px; }
  .instr-licht i::after { width: 34px; height: 70px; }
  .instr-video svg { height: 34px; }
  .welt__name { min-height: 0; font-size: 13px; }
  .welt__pfeil, .mth__welten-hinweis, .welt__bild, .welt__kopf span + span, .instr-aussen .blitz { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mth, .mth *, .mth *::before, .mth *::after { animation: none !important; transition: none !important; }
  .instr-aussen .akku-zellen span { opacity: 1; }
}

/* =====================================================================
   Feinschliff (Fassung 3, 02.10.2026): Material, Mikrotypografie, Details.
   Radien nur 5, 8, 13, 21. Schatten in zwei Stufen. Bewegung nur über transform und opacity.
   ===================================================================== */
.mth { --schatten-1: 0 8px 21px -8px rgba(0, 0, 0, .55); --schatten-2: 0 21px 55px -21px rgba(0, 0, 0, .75); }
.mth__zahl, .welt__zahl, .mth__deal-preis b, .instr-video .tc { font-variant-numeric: tabular-nums lining-nums; }

/* Filmkorn, sehr leise: gibt dem Weinrot Stofflichkeit statt flacher Fläche */
.mth::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Bühne: Lichtkegel von oben auf das Angebot, Glasreflex, weicher Lichtabfall */
.mth__buehne::before {
  content: ""; position: absolute; left: 8%; right: 34%; top: -89px; height: 233px; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 214, 190, .16), rgba(255, 214, 190, 0) 70%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); filter: blur(8px);
}
.mth__deal { border-radius: 21px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .25), var(--schatten-2); overflow: hidden; }
.mth__deal::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .10) 46%, rgba(255, 255, 255, .02) 52%, transparent 60%);
  transform: translateX(-60%); opacity: 0;
}
.mth__deal.ist-an::after { animation: mth-reflex 1.6s .2s cubic-bezier(.3, .6, .2, 1) both; }
.mth__deal.ist-an:hover::after { animation: mth-reflex2 1.2s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes mth-reflex { 0% { transform: translateX(-60%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
@keyframes mth-reflex2 { 0% { transform: translateX(-60%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
.mth__deal-bild::after { width: 62%; height: 8px; bottom: 3px; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }
.mth__deal-name { letter-spacing: -.005em; text-wrap: balance; }
.mth__deal-preis { column-gap: 5px; }
.mth__deal-preis span { font-size: 13px; font-weight: 700; color: var(--preis); letter-spacing: .04em; }
.mth__deal-preis s { margin-right: 3px; text-decoration-thickness: 1px; }
.mth__spar { box-shadow: var(--schatten-1), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mth__kaufen { border-radius: 8px; box-shadow: var(--schatten-1), inset 0 1px 0 rgba(255, 255, 255, .22); min-height: 44px; }
/* Striche als 44px hohe Trefferflächen, sichtbar bleibt der feine Strich */
.mth .mth__punkte { gap: 0; }
.mth .mth__punkt { height: 44px; width: 44px; background: transparent !important; }
.mth .mth__punkt::before { content: ""; position: absolute; left: 5px; right: 5px; top: 20px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.mth .mth__punkt.ist-an::after { inset: 20px 5px auto 5px; height: 4px; border-radius: 2px; }
.mth .mth__punkt:hover::before { background: rgba(255, 255, 255, .45); }

/* Suche: Knopf folgt dem Zeiger ein wenig (Skript), Glanzkante */
.mth__feld { border-radius: 13px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--schatten-2); }
.mth .mth__feld input[type="search"] { border-radius: 13px 0 0 13px; }
.mth .mth__feld button { border-radius: 8px; min-height: 44px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 8px rgba(0, 0, 0, .25); transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .2s; }
.mth a.mth__weg { min-height: 44px; padding-inline: var(--s3); }
.mth__anzeige { border-radius: 13px; }
.mth__wert { padding: var(--s2) var(--s3); }

/* Welten: einheitliche Kante, gestaffelter Auftritt, Instrument leuchtet beim Zeigen auf */
.mth a.welt { border-radius: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--schatten-1); animation: mth-auftritt .6s cubic-bezier(.2, .8, .2, 1) both; }
.mth a.welt:nth-child(2) { animation-delay: .08s; }
.mth a.welt:nth-child(3) { animation-delay: .16s; }
.mth a.welt:nth-child(4) { animation-delay: .24s; }
@keyframes mth-auftritt { from { transform: translateY(13px); opacity: .35; } to { transform: none; opacity: 1; } }
.welt__instr { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 8px 21px rgba(0, 0, 0, .55); transition: filter .35s, box-shadow .35s; }
.mth__welten:hover a.welt:not(:hover) .welt__instr { filter: saturate(.55) brightness(.75); }
.mth a.welt:hover .welt__instr, .mth a.welt:focus-visible .welt__instr { filter: saturate(1.2) brightness(1.15); box-shadow: inset 0 0 0 1px rgba(240, 138, 108, .45), inset 0 8px 21px rgba(0, 0, 0, .55), 0 0 21px rgba(240, 138, 108, .25); }
.welt__kopf span:first-child { color: var(--glut-hell); }
.welt__fuss { align-items: center; }
.welt__bild { border-radius: 5px; box-shadow: var(--schatten-1); }
.welt__zahl { font-size: 21px; letter-spacing: -.02em; }
.welt__lager { font-size: 12px; color: var(--pegel); display: inline-flex; align-items: center; gap: 5px; }
.welt__lager::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }
.welt__pfeil { display: inline-flex; gap: 5px; transition: gap .25s; }
.mth a.welt:hover .welt__pfeil { gap: 8px; }

/* Pegel: Spitzenwert-Strich hält kurz oben, Fader-Kappe aus gebürstetem Metall */
.instr-audio i em { position: absolute; left: 0; right: 0; bottom: calc(var(--h, 60%) - 2px); height: 2px; background: var(--rot); box-shadow: 0 0 5px var(--rot); animation: mth-spitze calc(var(--d, 1.2s) * 2) ease-out infinite; z-index: 1; }
@keyframes mth-spitze { 0%, 55% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(13px); opacity: .35; } }
.instr-audio b::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, rgba(0, 0, 0, .06) 1px 2px),
    linear-gradient(180deg, #f6f1ee 0%, #c9bcb7 48%, #8f7d77 52%, #d8ccc7 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* Monitor: Mittellinie und Skalenstriche wie am Oszilloskop */
.instr-video .mitte { position: absolute; left: 13px; right: 13px; top: 55%; height: 1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 13px); }
.instr-video .raster { background-image: linear-gradient(rgba(69, 227, 176, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(69, 227, 176, .06) 1px, transparent 1px); background-size: 100% 13px, 34px 100%; }
.instr-video .tc { color: #fff; text-shadow: 0 0 5px rgba(255, 255, 255, .35); }

/* Licht: Kanalnummern wie am Lichtpult, Scheinwerfergehäuse mit Kante */
.instr-licht .dmx { position: absolute; left: 0; right: 0; bottom: 3px; display: grid; grid-template-columns: repeat(3, 1fr); font-family: var(--f-mess); font-size: 9px; letter-spacing: .06em; color: rgba(255, 230, 220, .8); text-align: center; z-index: 3; }
.instr-licht i { background: linear-gradient(180deg, #5a4642, #2a1d1b); box-shadow: 0 2px 3px rgba(0, 0, 0, .6); }

/* Draussen: Sicke mit Tiefe */
.instr-aussen .membran { box-shadow: inset 0 0 0 2px #4a3632, inset 0 -8px 13px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05); }

@media (max-width: 640px) {
  .welt__instr { height: 72px; }
  .instr-licht i::after { width: 44px; height: 89px; }
  .instr-video svg { height: 44px; }
  .instr-aussen .membran { width: 55px; height: 55px; }
  .instr-licht .dmx { font-size: 8px; }
  .mth a.welt { padding: var(--s2) var(--s1); }
  .welt__zahl { font-size: 18px; }
  .mth__buehne::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mth .mth__feld button { transform: none; }
  .mth__deal::after { display: none; }
}
/* Nachbesserung nach Augenschein: Preis und Währung bleiben auf einer Zeile, Zahlenfelder mobil ohne Umbruch */
.mth__deal-preis s { width: 100%; }
@media (max-width: 640px) {
  .mth__wert { padding: var(--s1); }
  .mth__zahl { font-size: 18px; letter-spacing: -.03em; white-space: nowrap; }
}

/* =====================================================================
   Rampenlicht (Fassung 4, 02.10.2026): sichtbarer Scheinwerfer über dem Angebot.
   Gehäuse mit Bügel und glühender Linse, Lichtkegel mit weichen Kanten und Staub,
   heller Lichtfleck auf dem Produkt. Beim Wechsel schwenkt der Kegel kurz und flackert.
   Ohne Bewegung: der Kegel steht ruhig und hell.
   ===================================================================== */
.mth__buehne::before { content: none; } /* alter flacher Kegel aus Fassung 3 */
.mth__rampe { padding-top: 55px; --spot-x: 27%; }
.mth__rampe-kopf { position: relative; z-index: 4; }
.mth__rampe-titel { color: var(--text-hell); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.mth__spot { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* Gehäuse: Traverse, Bügel, Kopf, Linse */
.mth__spot .traverse { position: absolute; top: 0; left: 0; right: 0; height: 8px; border-radius: 5px; background: repeating-linear-gradient(90deg, #4d3a36 0 13px, #2b1f1d 13px 21px); box-shadow: 0 2px 5px rgba(0, 0, 0, .5); opacity: .9; }
.mth__spot .lampe { position: absolute; top: 5px; left: var(--spot-x); width: 55px; height: 47px; translate: -50% 0; transform-origin: 50% 8px; rotate: var(--neigung, 0deg); transition: rotate .9s cubic-bezier(.3, .7, .2, 1); }
.mth__spot .lampe::before { /* Bügel */
  content: ""; position: absolute; left: 5px; right: 5px; top: 0; height: 26px; border: 3px solid #6b5651; border-bottom: 0; border-radius: 13px 13px 0 0;
}
.mth__spot .kopf {
  position: absolute; left: 8px; right: 8px; top: 10px; height: 31px; border-radius: 8px 8px 13px 13px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #7a6560 0%, #3a2b28 55%, #1c1312 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 8px rgba(0, 0, 0, .55);
}
.mth__spot .kopf::after { /* Linse */
  content: ""; position: absolute; left: 3px; right: 3px; bottom: -3px; height: 8px; border-radius: 50%;
  background: radial-gradient(closest-side, #fffaf0, #ffd9a8 55%, #f0a060);
  box-shadow: 0 0 8px 3px rgba(255, 220, 170, .9), 0 0 34px 13px rgba(255, 196, 140, .45);
}

/* Lichtkegel: aus der Linse nach unten, weiche Kanten, oben hell, unten verlaufend */
.mth__spot .kegel {
  position: absolute; top: 46px; left: var(--spot-x); width: min(377px, 70%); height: calc(100% - 89px);
  translate: -50% 0; transform-origin: 50% 0; rotate: var(--neigung, 0deg);
  transition: rotate .9s cubic-bezier(.3, .7, .2, 1);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(255, 220, 180, .22), transparent 70%),
    linear-gradient(180deg, rgba(255, 232, 200, .36) 0%, rgba(255, 214, 170, .17) 45%, rgba(255, 200, 150, .06) 85%, transparent 100%);
  filter: blur(5px); mix-blend-mode: screen;
}
/* Staub im Licht: winzige Punkte, die langsam durch den Kegel sinken */
.mth__spot .staub {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, #fff8ec 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 10%, #fff3e0 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 45% 70%, #fffaf2 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 55%, #ffeedd 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 35% 90%, #fff8ec 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 45%, #fff 50%, transparent 51%);
  background-size: 89px 89px, 144px 144px, 110px 110px, 72px 72px, 130px 130px, 55px 55px;
  animation: mth-staub 21s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 95%); mask-image: linear-gradient(180deg, #000 10%, transparent 95%);
}
@keyframes mth-staub { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 13px 89px, -8px 144px, 5px 110px, -5px 144px, 8px 130px, 0 110px; } }

/* Lichtfleck auf dem Produkt: warm, hell in der Mitte, weich auslaufend */
.mth__deal-bild::before {
  inset: -21px -21px 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 190, .55), rgba(240, 160, 120, .28) 45%, rgba(224, 130, 102, 0) 100%);
}
.mth__deal-bild img { filter: drop-shadow(0 13px 21px rgba(0, 0, 0, .5)) brightness(1.06); }

/* Wechsel: Kegel flackert und schwenkt kurz nach (Skript setzt .schwenk) */
.mth__spot.schwenk .kegel, .mth__spot.schwenk .kopf::after { animation: mth-flacker .9s steps(1) both; }
@keyframes mth-flacker { 0% { opacity: .35; } 10% { opacity: 1; } 18% { opacity: .55; } 26% { opacity: 1; } 40% { opacity: .8; } 55%, 100% { opacity: 1; } }
.mth__spot.schwenk { --neigung: 7deg; }

@media (max-width: 1080px) { .mth__rampe { --spot-x: 30%; } }
@media (max-width: 640px) {
  .mth__rampe { --spot-x: 50%; padding-top: 55px; }
  .mth__spot .kegel { width: 89%; height: 300px; }
  .mth__deal-bild::before { inset: -13px -13px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mth__spot .lampe, .mth__spot .kegel { rotate: 0deg !important; }
  .mth__spot .staub { opacity: .4; }
}

/* =====================================================================
   Sieben Kanäle (Fassung 5, 02.10.2026): Kanalzug wie am Mischpult.
   Ab 1200 Pixel stehen alle sieben nebeneinander, darunter wischt man
   durch einen Streifen mit Einrasten. Jeder Kanal hat sein eigenes Instrument.
   ===================================================================== */
.mth__welten { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1); padding-top: var(--s1); }
.mth a.welt { padding: var(--s2) var(--s1) var(--s2); gap: 5px; }
.mth a.welt:nth-child(5) { animation-delay: .32s; }
.mth a.welt:nth-child(6) { animation-delay: .40s; }
.mth a.welt:nth-child(7) { animation-delay: .48s; }
.welt__kopf { gap: 5px; }
.welt__kopf span:last-child { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welt__instr { height: 89px; margin-bottom: 3px; }
.welt__name { font-family: var(--f-display); font-weight: 800; font-stretch: 108%; font-size: 17px; line-height: 1.1; min-height: 0; letter-spacing: -.005em; }
.welt__unter { font-size: 12px; line-height: 1.3; color: var(--text-leise); min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.welt__zahl { font-size: 18px; margin-top: 3px; }
.welt__zahl small { display: inline; margin-left: 5px; }
.welt__pfeil { margin-top: auto; padding-top: 5px; }
.instr-licht i::after { width: 44px; height: 89px; }

/* IP: Switch-Front mit Link- und Aktivitätsleuchten, darunter laufender Durchsatz */
.instr-ip { background: linear-gradient(180deg, #221614, #0d0605); padding: var(--s1); display: flex; flex-direction: column; gap: 5px; }
.instr-ip .ports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.instr-ip .ports i { position: relative; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #050202 0 55%, #1d1311 55%); box-shadow: inset 0 0 0 1px #4a3a37; }
.instr-ip .ports i::before, .instr-ip .ports i::after { content: ""; position: absolute; top: 2px; width: 5px; height: 3px; border-radius: 1px; }
.instr-ip .ports i::before { left: 2px; background: var(--pegel); box-shadow: 0 0 5px var(--pegel); }
.instr-ip .ports i::after { right: 2px; background: var(--pegel-gelb); box-shadow: 0 0 5px var(--pegel-gelb); animation: mth-akt var(--d, .6s) steps(2) infinite; }
.instr-ip .ports i.frei::before, .instr-ip .ports i.frei::after { background: #3a2a27; box-shadow: none; animation: none; }
.instr-ip .last { position: relative; flex: 1; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); }
.instr-ip .last { display: flex; align-items: flex-end; gap: 2px; width: 200%; animation: mth-welle 6s linear infinite; }
.instr-ip .last b { flex: 1; border-radius: 1px 1px 0 0; background: linear-gradient(0deg, rgba(69, 227, 176, .35), var(--preis)); }

/* Venues Indoor: Line Array am Bügel in J-Kurve, Schall breitet sich aus */
.instr-pa { background: radial-gradient(90% 120% at 30% 40%, #2a100c, #0d0403); }
.instr-pa .buegel { position: absolute; left: 21%; top: 6px; width: 34px; height: 4px; border-radius: 2px; background: #8a7671; }
.instr-pa .array { position: absolute; left: 21%; top: 11px; width: 34px; }
.instr-pa .array i {
  display: block; height: 10px; margin-bottom: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #2f2321 0 2px, #171010 2px 4px);
  box-shadow: inset 0 0 0 1px #5a4642, 0 2px 3px rgba(0, 0, 0, .5);
  transform-origin: 0 0; transform: translateX(calc(var(--n) * var(--n) * .4px)) rotate(calc(var(--n) * var(--n) * .5deg));
}
.instr-pa .schall { position: absolute; left: calc(21% + 21px); top: 21px; width: 55px; height: 55px; border-radius: 50%; border: 2px solid transparent; border-right-color: var(--glut-hell); opacity: 0; animation: mth-schall 1.6s ease-out infinite; }
.instr-pa .schall.s2 { animation-delay: .8s; }
@keyframes mth-schall { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

/* Gastro und Haushalt: Kühlung mit drehendem Lüfter, Thermometer und Frost */
.instr-klima { display: flex; align-items: center; justify-content: space-around; padding: var(--s1); background: radial-gradient(90% 120% at 30% 50%, #12222a, #070c0f); }
.instr-klima .luefter { position: relative; width: 55px; height: 55px; border-radius: 50%; box-shadow: inset 0 0 0 2px #45606b, inset 0 0 13px rgba(127, 214, 255, .25); animation: mth-dreh 1.4s linear infinite; }
.instr-klima .luefter i { position: absolute; left: 50%; top: 50%; width: 21px; height: 10px; margin: -5px 0 0 0; border-radius: 0 10px 10px 0; background: linear-gradient(90deg, #9ad8ee, #5d9bb0); transform-origin: 0 50%; }
.instr-klima .luefter i:nth-child(2) { transform: rotate(120deg); }
.instr-klima .luefter i:nth-child(3) { transform: rotate(240deg); }
.instr-klima .luefter::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #c9e9f4; }
@keyframes mth-dreh { to { transform: rotate(360deg); } }
.instr-klima .thermo { position: relative; width: 8px; height: 55px; border-radius: 4px; background: #0c1418; box-shadow: inset 0 0 0 1px #45606b; overflow: hidden; }
.instr-klima .thermo span { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 34%; border-radius: 3px; background: linear-gradient(0deg, #7fd6ff, #c9f0ff); animation: mth-kuehl 4s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes mth-kuehl { from { transform: scaleY(1.2); } to { transform: scaleY(.8); } }
.instr-klima .flocken { position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: radial-gradient(1.4px 1.4px at 20% 20%, #e6f8ff 50%, transparent 51%), radial-gradient(1px 1px at 70% 40%, #e6f8ff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 40% 80%, #e6f8ff 50%, transparent 51%);
  background-size: 55px 55px, 89px 89px, 72px 72px; animation: mth-staub 13s linear infinite; }

/* Unter 1200 Pixel: Kanalstreifen zum Wischen, rastet je Kanal ein */
@media (max-width: 1199px) {
  .mth__welten {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(199px, 28%);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0;
    padding-bottom: var(--s2); scrollbar-width: thin; scrollbar-color: var(--glut) transparent;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .mth a.welt { scroll-snap-align: start; min-height: 44px; }
  .mth__welten.am-ende { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 640px) {
  .mth__welten { grid-auto-columns: 72%; }
  .welt__instr { height: 89px; }
  .instr-licht i::after { width: 44px; height: 89px; }
  .mth__welten-hinweis { display: inline; }
  .welt__kopf span + span { display: inline; }
}
/* Namen: zweizeiliger Platz, unten bündig, damit Zahlen aller Kanäle auf einer Linie stehen */
.welt__name { min-height: 2.2em; display: flex; align-items: flex-end; }
@media (max-width: 640px) { .mth__welten-zusatz { display: none; } }

/* =====================================================================
   Fassung 6 (02.10.2026): saubere Überblendung im Rampenlicht.
   Das alte Angebot ist ganz weg, bevor das neue erscheint (erst aus, dann ein).
   Titel höchstens drei Zeilen; die Bühne ist so hoch wie das grösste Angebot, nichts springt.
   ===================================================================== */
.mth__deal { transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.mth__deal.ist-an { transition: opacity .45s ease .25s, transform .6s cubic-bezier(.2, .8, .2, 1) .25s, visibility 0s linear .25s; }
.mth .mth__deal-name {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; max-height: calc(3 * 1.15em); overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
}
.mth__deal-text { align-self: center; }
.mth__prozent { margin-left: 5px; padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, .28); }
.mth__rampe-kopf { gap: var(--s2); }
.mth__rampe-titel { margin-right: auto; }
.mth__zaehler { font-family: var(--f-mess); font-size: 12px; letter-spacing: .08em; color: var(--text-gedimmt); font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.mth h1 .z2 { font-size: .86em; line-height: 1.04; margin-top: 5px; }
@media (max-width: 640px) { .mth__zaehler { display: none; } }
@media (prefers-reduced-motion: reduce) { .mth__deal, .mth__deal.ist-an { transition: none !important; } }

/* =====================================================================
   Fassung 7 (02.10.2026, Estebans Foto vom Schwenk: "erzeugt noch einen Rahmen").
   1. Der Kegel wird erst ausgeschnitten und DANN weichgezeichnet (Weichzeichner auf der Hülle,
      Form im Kind). Vorher schnitt clip-path nach dem blur und liess harte gerade Kanten stehen.
   2. Produkt steht auf einem weichen Sockel, Schatten nur nach unten, Farben unverändert (kein Aufhellen).
   3. Suchknopf schliesst bündig ans Feld an, kein weisser Rand mehr, kein Mitwandern.
      Fokusring nur für die Tastatur (:focus-visible), innen liegend.
   ===================================================================== */
.mth__spot .kegel { clip-path: none; background: none; filter: blur(13px); }
.mth__spot .kegel::before {
  content: ""; position: absolute; inset: 0; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(255, 220, 180, .22), transparent 70%),
    linear-gradient(180deg, rgba(255, 232, 200, .38) 0%, rgba(255, 214, 170, .18) 45%, rgba(255, 200, 150, .06) 85%, transparent 100%);
}
.mth__deal-bild img { filter: drop-shadow(0 13px 13px rgba(0, 0, 0, .32)); }
.mth__deal-bild::after {
  width: 78%; height: 21px; bottom: -3px; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255, 236, 214, .14), rgba(255, 236, 214, 0) 70%),
    radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.mth__feld { overflow: hidden; }
.mth .mth__feld button {
  margin: 0 !important; transform: none !important; border-radius: 0 13px 13px 0 !important;
  align-self: stretch; padding: 0 var(--s4); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18) !important;
}
.mth .mth__feld button:focus { outline: none; }
.mth .mth__feld button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.mth .mth__feld input[type="search"]:focus-visible { outline: none; }
@media (max-width: 640px) { .mth .mth__feld button { padding: 0 var(--s3); } }

/* =====================================================================
   Fassung 8 (02.10.2026): Patchbay statt Laufband, Produkte darunter,
   und eine eigene Handyfassung (360 bis 430 Pixel, Tablet 768).
   ===================================================================== */
.mth__band { display: none; } /* altes Laufband, falls noch irgendwo im Markup */

/* ---------- Patchbay: Rack mit Ohren, Schrauben, gebürstetem Metall ---------- */
.mth__patch { max-width: 1320px; margin: var(--s5) auto 0; padding-bottom: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.patch__rack {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: stretch;
  border-radius: 8px; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #4a3c39 0%, #2c2220 48%, #241b19 52%, #3a2e2b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .5), var(--schatten-2);
}
.patch__ohr { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-block: var(--s2); background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, .25)); }
.patch__ohr i { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8ddd9, #8a7671 60%, #4a3a37); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 1px rgba(255, 255, 255, .15); position: relative; }
.patch__ohr i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; height: 1px; background: #3a2a27; transform: rotate(35deg); }
.patch__ports { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: rgba(0, 0, 0, .35); }

.mth button.port {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; min-height: 144px; padding: var(--s2) var(--s1) var(--s2);
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .15)), #2a201e; color: var(--text-hell);
  transition: background .25s;
}
.mth button.port:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(0, 0, 0, .1)), #33272a; }
.mth button.port:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.port__nr { align-self: flex-start; font-family: var(--f-mess); font-size: 11px; letter-spacing: .08em; color: var(--text-leise); }
.port__buchse { position: relative; width: 44px; height: 34px; margin-top: 3px; border-radius: 3px; background: linear-gradient(180deg, #0c0605 0 62%, #1f1513 62%); box-shadow: inset 0 0 0 2px #5a4642, inset 0 3px 5px rgba(0, 0, 0, .8); }
.port__buchse::before { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 5px; border-radius: 1px; background: #3a2a27; } /* Rastnase */
.port__led { position: absolute; top: 3px; width: 8px; height: 4px; border-radius: 1px; background: #3a2a27; transition: background .2s, box-shadow .2s; }
.port__led--link { left: 4px; }
.port__led--akt { right: 4px; }
.port.ist-an .port__led--link { background: var(--pegel); box-shadow: 0 0 6px var(--pegel); }
.port.ist-an .port__led--akt { background: var(--pegel-gelb); box-shadow: 0 0 6px var(--pegel-gelb); animation: mth-akt .5s steps(2) infinite; }
.port__kabel { position: absolute; left: 50%; bottom: 8px; width: 26px; height: 21px; margin-left: -13px; border-radius: 3px 3px 2px 2px; opacity: 0; transform: translateY(-34px);
  background: linear-gradient(180deg, #d1c7c3, #8f817c); box-shadow: 0 3px 5px rgba(0, 0, 0, .6); pointer-events: none; }
.port__kabel::before { /* Kabel nach oben */ content: ""; position: absolute; left: 50%; bottom: 100%; width: 8px; height: 55px; margin-left: -4px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #a83a26, var(--glut-hell) 45%, #a83a26); }
.port__kabel::after { /* Knickschutz */ content: ""; position: absolute; left: 50%; bottom: 100%; width: 13px; height: 8px; margin-left: -6px; border-radius: 2px; background: #5a2017; }
.port.ist-an .port__kabel { opacity: 1; transform: none; animation: mth-stecken .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes mth-stecken { 0% { opacity: 0; transform: translateY(-34px); } 60% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
.port__name { font-size: 13px; font-weight: 600; line-height: 1.25; text-wrap: balance; margin-top: 3px; }
.port__zahl { font-family: var(--f-mess); font-weight: 700; font-size: 14px; color: var(--text-gedimmt); font-variant-numeric: tabular-nums; }
.port.ist-an { background: linear-gradient(180deg, rgba(240, 138, 108, .16), rgba(0, 0, 0, .1)), #33221f; }
.port.ist-an .port__zahl { color: var(--pegel); }
.port.ist-an::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--glut-hell); }

.patch__status { margin: 0; display: flex; align-items: center; gap: var(--s1); font-family: var(--f-mess); font-size: 13px; letter-spacing: .04em; color: var(--text-hell); min-height: 21px; }
.patch__status-led { width: 8px; height: 8px; border-radius: 50%; background: var(--pegel); box-shadow: 0 0 8px var(--pegel); flex: none; }

/* Produkte des gewählten Ports: Streifen mit Einrasten */
.patch__tafel[hidden] { display: none !important; }
.patch__reihe { display: grid; grid-auto-flow: column; grid-auto-columns: 199px; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 5px 2px var(--s2); scrollbar-width: thin; scrollbar-color: var(--glut) transparent; min-height: 322px; }
.mth a.ware {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--text-hell);
  background: rgba(15, 4, 3, .55); border: 1px solid var(--kante); border-radius: 13px; padding: var(--s1) var(--s1) var(--s2);
  box-shadow: var(--schatten-1); transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s;
}
.mth a.ware:hover, .mth a.ware:focus-visible { transform: translateY(-3px); border-color: var(--glut-hell); color: var(--text-hell); }
.ware__bild { aspect-ratio: 300 / 189; max-width: 100%; border-radius: 8px; background: #fff; overflow: hidden; display: block; }
.ware__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ware__name { font-size: 13px; font-weight: 600; line-height: 1.3; min-height: 3.9em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-inline: 3px; }
.ware__preis { font-family: var(--f-display); font-weight: 900; font-size: 18px; color: var(--preis); padding-inline: 3px; font-variant-numeric: tabular-nums; }
.ware__preis small { font-family: var(--f-text); font-weight: 500; font-size: 11px; color: var(--text-leise); }
.ware__lager { font-size: 12px; color: var(--pegel); padding-inline: 3px; }
.mth a.ware--alle { justify-content: center; align-items: center; gap: var(--s1); text-align: center; font-weight: 700; font-size: 15px; background: linear-gradient(135deg, rgba(192, 73, 47, .35), rgba(130, 58, 45, .35)); min-height: 44px; }
.mth a.ware--alle span:last-child { font-size: 21px; color: var(--glut-hell); }

/* Schwebender Suchknopf (nur Handy, erscheint, wenn die Suche ausser Sicht ist) */
.mth__suchknopf {
  position: fixed; right: 16px; bottom: calc(21px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: 55px; height: 55px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--glut), var(--wein)); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 21px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mth__suchknopf[hidden] { display: none; }
.mth__suchknopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Antippen zeigt dasselbe wie Zeigen (kein Wissen nur hinter Hover) */
.mth a.welt:active .welt__instr { filter: saturate(1.2) brightness(1.15); }
.mth a.welt:active { border-color: var(--glut-hell); }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .patch__ports { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mth button.port { min-height: 133px; }
}

/* ---------- Handy: eigene Reihenfolge und Masse ---------- */
@media (max-width: 640px) {
  .mth { --s5: 34px; }
  .mth__oben { display: flex; flex-direction: column; gap: var(--s3); }
  .mth__eingang { display: contents; }
  .mth__vorzeile { order: 1; font-size: 11px; }
  .mth h1 { order: 2; font-size: clamp(30px, 8.6vw, 38px); }
  .mth__unter { order: 3; font-size: 15px; }
  .mth__suche { order: 4; }
  .mth__wege { order: 5; }
  .mth__rampe { order: 6; }
  .mth__anzeige { order: 7; }
  .mth .mth__feld input[type="search"] { min-height: 55px; font-size: 16px; /* 16 px: so verlangt es auch der Shop (mobile-polish.css, !important), und iOS zoomt nicht */ }
  .mth .mth__feld button { min-width: 55px; }
  .mth__hilfe { font-size: 13px; }
  .mth__wege { display: grid; grid-template-columns: 1fr 1fr; }
  .mth a.mth__weg { justify-content: center; }

  /* Rampenlicht: Karte kompakt, Licht von oben auf das Bild */
  .mth__rampe { padding-top: 55px; }
  .mth__deal { padding: var(--s2); }
  .mth__deal-bild { min-height: 160px; }
  .mth__deal-bild img { max-height: 160px; }
  .mth__deal-name { font-size: 18px; }
  .mth__kaufen { align-self: stretch; justify-content: center; min-height: 55px; font-size: 16px; }

  /* Kanäle: Streifen mit 2,3 sichtbaren Kanälen, Instrumente kompakt, laufen weiter */
  .mth__welten { grid-auto-columns: 42%; }
  .welt__instr { height: 72px; }
  .welt__name { font-size: 15px; min-height: 2.2em; }
  .welt__unter { font-size: 11px; }
  .welt__zahl { font-size: 16px; }
  .welt__zahl small { display: block; margin-left: 0; }
  .welt__lager { font-size: 11px; }
  .welt__kopf span + span { display: none; }
  .instr-licht i::after { width: 34px; height: 72px; }
  .instr-licht .dmx span:nth-child(2) { visibility: hidden; }
  .instr-ip .ports { grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .instr-ip .ports i { height: 13px; }
  .instr-aussen .membran, .instr-klima .luefter { width: 44px; height: 44px; }

  /* Patchbay: Ports als Streifen zum Wischen, Produkte darunter quer */
  .patch__rack { grid-template-columns: 21px minmax(0, 1fr) 21px; }
  .patch__ohr i { width: 8px; height: 8px; }
  .patch__ports { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .patch__ports::-webkit-scrollbar { display: none; }
  .mth button.port { scroll-snap-align: start; min-height: 128px; }
  .patch__status { font-size: 12px; }
  .patch__reihe { grid-auto-columns: 64%; min-height: 300px; }

  /* Leichter für schwache Telefone: kein Korn, kein Staub, schwächerer Weichzeichner */
  .mth::after, .mth__spot .staub { display: none; }
  .mth__spot .kegel { filter: blur(21px); } /* schmaler Bildschirm: Kegel steiler, darum weicher zeichnen, sonst zeigt er Kanten */
}
@media (max-width: 380px) {
  .mth__welten { grid-auto-columns: 46%; }
  .patch__ports { grid-auto-columns: 46%; }
  .patch__reihe { grid-auto-columns: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .port.ist-an .port__kabel { animation: none !important; opacity: 1; transform: none; }
}
/* Bühnenhöhe fest: das Bildfeld hat eine feste Höhe, damit kein Angebot die Bühne verändert (auch nicht beim Nachladen) */
.mth__deal-bild { height: 233px; min-height: 0; }
.mth__deal-bild img { max-height: 100%; }
@media (max-width: 640px) { .mth__deal-bild { height: 160px; } }

/* =====================================================================
   Fassung 9 (03.10.2026): Produkte im 19-Zoll-Multiview-Monitor.
   Rackohren mit Schrauben, Rahmen, Kopfleiste mit Quelle und Zeitcode,
   Kacheln wie am Multiviewer (Eingangsnummer, Tally, Tonbalken, Bauchbinde).
   Bereichswechsel = kurzer Quellenwechsel. Ohne Bewegung: sofort.
   ===================================================================== */
.mth__patch .patch__reihe { display: none; }
.mv { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; border-radius: 8px; overflow: hidden;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3d3230 0%, #241b19 50%, #2f2523 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), var(--schatten-2); }
.mv__ohr { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-block: var(--s3); background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, .25)); }
.mv__ohr i { width: 13px; height: 13px; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 35%, #e8ddd9, #8a7671 60%, #4a3a37); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.mv__ohr i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; height: 1px; background: #3a2a27; transform: rotate(-30deg); }
.mv__gehaeuse { padding: var(--s1) var(--s2) var(--s2); display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.mv__leiste { display: flex; align-items: center; gap: var(--s2); min-height: 21px; font-family: var(--f-mess); font-size: 12px; letter-spacing: .06em; color: var(--text-gedimmt); }
.mv__lampe { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 8px var(--rot); flex: none; }
.mv__quelle { color: var(--text-hell); font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv__tc { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-hell); }
.mv__marke { color: var(--text-leise); white-space: nowrap; }
.mv__schirm { position: relative; border-radius: 5px; padding: 5px; background: #050202; box-shadow: inset 0 0 0 2px #120a09, inset 0 0 34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
.mv__schirm::after { /* Glasreflex auf dem Bildschirm */ content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .06), transparent 35%); }
.mv__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.mth a.kachel { position: relative; display: block; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; text-decoration: none; color: var(--text-hell); background: #fff; outline-offset: -3px; }
.mth a.kachel:hover, .mth a.kachel:focus-visible { color: var(--text-hell); }
.mth a.kachel:hover::after, .mth a.kachel:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--rot); pointer-events: none; }
.kachel__bild { position: absolute; inset: 18px 0 44px; display: grid; place-items: center; padding: 5px 8px 3px; }
.kachel__bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.kachel__kopf { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 3px 5px; font-family: var(--f-mess); font-size: 10px; letter-spacing: .06em; color: #fff; background: rgba(12, 4, 3, .94); }
.kachel__tally { width: 13px; height: 6px; border-radius: 2px; background: #2f7a52; box-shadow: 0 0 5px rgba(63, 224, 143, .6); }
.kachel__tally.ist-live, .mth a.kachel:hover .kachel__tally { background: var(--rot); box-shadow: 0 0 6px var(--rot); }
.kachel__pegel { position: absolute; right: 3px; top: 21px; bottom: 50px; width: 8px; display: flex; gap: 1px; align-items: flex-end; }
.kachel__pegel b { flex: 1; height: 100%; background: linear-gradient(0deg, var(--pegel) 0 60%, var(--pegel-gelb) 60% 85%, var(--rot) 85%); transform-origin: bottom; animation: mth-vu var(--d, 1.1s) ease-in-out infinite alternate; opacity: .9; }
.kachel__info { position: absolute; left: 0; right: 0; bottom: 0; min-height: 44px; padding: 3px 5px 3px; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; background: rgba(16, 6, 5, .95); border-top: 1px solid rgba(255, 255, 255, .12); }
.kachel__name { font-size: 11px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel__unten { display: flex; justify-content: space-between; align-items: baseline; gap: 5px; }
.kachel__preis { font-family: var(--f-mess); font-weight: 700; font-size: 13px; color: var(--preis); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kachel__preis small { font-family: var(--f-text); font-weight: 500; font-size: 9px; color: var(--text-gedimmt); }
.kachel__lager { font-size: 10px; color: var(--pegel); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.kachel__lager::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mth a.mv__alle { margin-top: var(--s1); min-height: 44px; display: flex; justify-content: center; align-items: center; gap: var(--s1); border-radius: 5px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--text-hell); background: linear-gradient(135deg, rgba(192, 73, 47, .45), rgba(130, 58, 45, .45)); border: 1px solid var(--kante); }
.mth a.mv__alle:hover { border-color: var(--glut-hell); color: var(--text-hell); }
.mth a.mv__alle span:last-child { color: var(--glut-hell); font-size: 18px; }
/* Quellenwechsel: kurz schwarz, dann bauen sich die Kacheln nacheinander auf */
.mv__schirm.umschalten .patch__tafel:not([hidden]) .kachel { animation: mv-ein .35s ease both; }
.mv__schirm.umschalten .kachel:nth-child(2) { animation-delay: .03s; } .mv__schirm.umschalten .kachel:nth-child(3) { animation-delay: .06s; }
.mv__schirm.umschalten .kachel:nth-child(4) { animation-delay: .09s; } .mv__schirm.umschalten .kachel:nth-child(5) { animation-delay: .12s; }
.mv__schirm.umschalten .kachel:nth-child(6) { animation-delay: .15s; } .mv__schirm.umschalten .kachel:nth-child(7) { animation-delay: .18s; }
.mv__schirm.umschalten .kachel:nth-child(8) { animation-delay: .21s; }
@keyframes mv-ein { 0% { opacity: 0; filter: brightness(3) saturate(0); } 40% { opacity: 1; } 100% { opacity: 1; filter: none; } }

@media (max-width: 1080px) { .mv__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mv__marke { display: none; } }
@media (max-width: 640px) {
  .mv { grid-template-columns: 13px minmax(0, 1fr) 13px; }
  .mv__ohr i { width: 8px; height: 8px; }
  .mv__gehaeuse { padding: 5px 5px 8px; }
  /* Handy: Seiten mit je 2 x 2 Kacheln zum Wischen */
  .mv__raster { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc(50% - 2px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mv__raster::-webkit-scrollbar { display: none; }
  .mth a.kachel { scroll-snap-align: start; aspect-ratio: 4 / 5; }
  .kachel__bild { inset: 0 0 55px; }
  .kachel__info { min-height: 55px; }
  .kachel__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .kachel__unten { flex-direction: column; align-items: flex-start; gap: 0; }
  .mv__tc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mv__schirm.umschalten .kachel { animation: none !important; } }

/* =====================================================================
   Fassung 10 (03.10.2026): das interaktive Rack.
   Oben eine Rackleuchte (immer an; Farbe, Helligkeit, Volume, Klickton), darunter ein
   19-Zoll-Touchscreen mit den sieben Kanälen, Kabel hinunter zum Portfeld, darunter der
   Multiview-Monitor. Licht nur über Verläufe, kein schwerer Weichzeichner.
   ===================================================================== */
.rack {
  --licht-rgb: 255, 206, 150;
  position: relative; isolation: isolate; max-width: 1320px; margin: var(--s5) auto 0; padding: var(--s1) 0 var(--s2);
  display: flex; flex-direction: column; gap: var(--s1); border-radius: 13px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .65) 0 5px, transparent 5px 13px) left 13px top 0 / 8px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .65) 0 5px, transparent 5px 13px) right 13px top 0 / 8px 100% no-repeat,
    linear-gradient(90deg, #4a3c39 0 34px, #120807 34px calc(100% - 34px), #4a3c39 calc(100% - 34px));
  box-shadow: 0 34px 89px -34px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.rack[data-licht="kalt"] { --licht-rgb: 190, 222, 255; }
.rack[data-licht="rot"] { --licht-rgb: 255, 96, 72; }
.rack::after { /* Lichtschein der Leuchte auf die Rackfront, weich nach unten auslaufend */
  content: ""; position: absolute; left: 0; right: 0; top: 55px; height: 610px; z-index: 3; pointer-events: none; border-radius: 13px 13px 0 0;
  background: radial-gradient(75% 100% at 50% 0%, rgba(var(--licht-rgb), calc(.30 * var(--hell))), rgba(var(--licht-rgb), 0) 70%);
  mix-blend-mode: screen;
}
.rack[data-licht="wechsel"]::after, .rack[data-licht="wechsel"] .leuchte__balken { animation: rack-wechsel 8s linear infinite; }
@keyframes rack-wechsel { to { filter: hue-rotate(360deg); } }

.rack__einheit, .rack .patch__rack, .rack .mv { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: stretch; border-radius: 5px; }
.rack__ohr { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-block: var(--s1); background: linear-gradient(90deg, #3a2e2b, #5a4a46 50%, #3a2e2b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.rack__ohr i { width: 13px; height: 13px; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 35%, #e8ddd9, #8a7671 60%, #4a3a37); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.rack__ohr i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; height: 1px; background: #3a2a27; transform: rotate(40deg); }

/* Rackleuchte (1 HE) */
.leuchte {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s1) var(--s2);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px), linear-gradient(180deg, #4a3c39, #2a201e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.leuchte__kopf { position: relative; flex: 0 0 233px; height: 21px; border-radius: 5px; background: linear-gradient(180deg, #6b5a56, #2a201e); box-shadow: 0 3px 5px rgba(0, 0, 0, .5); }
.leuchte__balken { position: absolute; left: 8px; right: 8px; bottom: -2px; height: 5px; border-radius: 3px; background: rgb(var(--licht-rgb)); box-shadow: 0 0 13px 3px rgba(var(--licht-rgb), calc(.9 * var(--hell))), 0 13px 34px 8px rgba(var(--licht-rgb), calc(.35 * var(--hell))); opacity: calc(.5 + .5 * var(--hell)); }
.leuchte__regler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); flex: 1 1 auto; min-width: 0; }
.leuchte__farben { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.leuchte__farben legend { float: left; margin-right: var(--s1); padding: 0; font-family: var(--f-mess); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-gedimmt); line-height: 44px; }
.leuchte__farben label { position: relative; cursor: pointer; }
.leuchte__farben input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.leuchte__farben span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-hell); background: rgba(0, 0, 0, .35); border: 1px solid var(--kante); }
.leuchte__farben input:checked + span { background: linear-gradient(135deg, var(--glut), var(--wein)); border-color: var(--glut-hell); }
.leuchte__farben input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.leuchte__regel { display: inline-flex; align-items: center; gap: var(--s1); font-family: var(--f-mess); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-gedimmt); margin: 0; }
.leuchte__regel input[type="range"] { width: 144px; height: 44px; margin: 0; accent-color: var(--glut-hell); background: transparent; cursor: pointer; }
.mth button.leuchte__ton { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; padding: 0 var(--s2); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-hell); background: rgba(0, 0, 0, .35); border: 1px solid var(--kante); display: inline-flex; align-items: center; gap: 5px; }
.mth button.leuchte__ton[aria-pressed="true"] { background: linear-gradient(135deg, var(--glut), var(--wein)); border-color: var(--glut-hell); }
.mth button.leuchte__ton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Touchscreen (5 HE) mit den sieben Kanälen */
.touch { padding: var(--s1); background: linear-gradient(180deg, #1c1312, #0b0606); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px #000; }
.touch__glas { position: relative; overflow: hidden; border-radius: 5px; padding: var(--s2) var(--s2) var(--s1); background: radial-gradient(120% 80% at 50% 0%, #2a110d, #120706); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 34px rgba(0, 0, 0, .7); }
.touch__glas::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(165deg, rgba(255, 255, 255, .07), transparent 30%); }
.touch__punkt { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(255, 255, 255, .7); animation: touch-tipp .5s ease-out forwards; }
@keyframes touch-tipp { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.rack .mth__welten-wrap { display: flex; flex-direction: column; gap: var(--s1); }

/* Kabel vom Touchscreen hinunter zum Portfeld */
.rack__kabel { position: relative; height: 55px; margin: -8px 34px -8px; z-index: 2; pointer-events: none; }
.rack__kabel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rack__kabel path { fill: none; stroke-width: 6px; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)); }
.rack__kabel .k1 { stroke: #c0492f; } .rack__kabel .k2 { stroke: #d9a33a; } .rack__kabel .k3 { stroke: #2f9a6a; }
.rack__kabel .stecker { position: absolute; bottom: -3px; width: 13px; height: 13px; margin-left: -6px; border-radius: 2px; background: linear-gradient(180deg, #d1c7c3, #8f817c); box-shadow: 0 2px 3px rgba(0, 0, 0, .6); }
.rack__kabel .s1 { left: 12%; } .rack__kabel .s2 { left: 40%; } .rack__kabel .s3 { left: 88%; }

/* Portfeld und Monitor im Rack: Überschrift und Status rücken von den Schienen weg */
.rack .mth__patch { margin: 0; padding: 0; gap: var(--s1); max-width: none; }
.rack .mth__patch > .mth__welten-kopf, .rack .patch__status { padding-inline: 47px; }
.rack .mth__patch > .mth__welten-kopf { padding-top: var(--s1); }

/* Volume: Pegel, Tonbalken, Durchsatz und Wellenform folgen dem Regler (ohne Layoutverschiebung) */
.rack .instr-audio i, .rack .kachel__pegel, .rack .instr-ip .last { transform-origin: bottom; scale: 1 max(.06, var(--volumen)); }
.rack .instr-video svg { scale: 1 max(.06, var(--volumen)); transform-origin: center; }
.rack .instr-pa .schall, .rack .instr-aussen .membran::before, .rack .instr-aussen .membran::after { opacity: var(--volumen); }
.rack[data-stumm] .instr-aussen .membran { animation-play-state: paused; }

/* Portfeld mit zehn Ports */
.rack .patch__ports { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.rack .port__name { font-size: 12px; }

@media (max-width: 1199px) { .rack .patch__ports { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .leuchte__kopf { flex-basis: 100%; } }
@media (max-width: 640px) {
  .rack { margin-top: var(--s4); background: linear-gradient(90deg, #4a3c39 0 13px, #120807 13px calc(100% - 13px), #4a3c39 calc(100% - 13px)); }
  .rack__einheit, .rack .patch__rack, .rack .mv { grid-template-columns: 13px minmax(0, 1fr) 13px; }
  .rack__ohr i { width: 8px; height: 8px; }
  .leuchte { padding: var(--s1); gap: var(--s1); }
  .leuchte__regler { gap: var(--s1); }
  .leuchte__farben { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .leuchte__farben legend { float: none; grid-column: 1 / -1; line-height: 1.4; }
  .leuchte__farben span { width: 100%; justify-content: center; }
  .leuchte__regel { width: 100%; justify-content: space-between; }
  .leuchte__regel input[type="range"] { width: 62%; }
  .mth button.leuchte__ton { width: 100%; justify-content: center; }
  .touch { padding: 5px; }
  .touch__glas { padding: var(--s1) var(--s1) 5px; }
  .rack__kabel { margin-inline: 13px; height: 34px; }
  .rack .mth__patch > .mth__welten-kopf, .rack .patch__status { padding-inline: 21px; }
  .rack .patch__ports { grid-template-columns: none; }
  .rack::after { height: 377px; }
}
@media (prefers-reduced-motion: reduce) { .rack[data-licht="wechsel"]::after, .rack[data-licht="wechsel"] .leuchte__balken { animation: none !important; } }
/* Überschriften im Rack liegen auf dem dunklen Rackgrund (eigene Fläche, damit der Kontrast sicher stimmt) */
.rack .mth__patch > .mth__welten-kopf, .rack .patch__status { background: #120807; margin-inline: 34px; padding-inline: 13px; }
@media (max-width: 640px) { .rack .mth__patch > .mth__welten-kopf, .rack .patch__status { margin-inline: 13px; padding-inline: 8px; } }
.welt__name { hyphens: manual; -webkit-hyphens: manual; }

/* =====================================================================
   Fassung 11 (03.10.2026): die Rackleuchte als Hardware.
   Zwei Schwanenhalslampen oben am Rack werfen Lichtkegel auf die Front, eine 1-HE-Bedieneinheit
   mit beleuchteten Tasten, Drehknöpfen mit LED-Kranz und Anzeige, Kippschalter für den Ton.
   ===================================================================== */
.rack { padding-top: 55px; }
.rack::after { top: 21px; }
/* Schwanenhalslampen */
.rack__lampen { position: absolute; left: 0; right: 0; top: 0; height: 89px; z-index: 4; pointer-events: none; }
.schwanenhals { position: absolute; top: -21px; width: 89px; height: 89px; }
.schwanenhals.sh-links { left: 18%; }
.schwanenhals.sh-rechts { right: 18%; transform: scaleX(-1); }
.schwanenhals svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.schwanenhals .hals { fill: none; stroke: #6b5a56; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 1.2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.schwanenhals .kopf { fill: #3a2e2b; stroke: #8a7671; stroke-width: 1; }
.schwanenhals .linse { fill: rgb(var(--licht-rgb)); filter: drop-shadow(0 0 4px rgba(var(--licht-rgb), .95)) drop-shadow(0 0 13px rgba(var(--licht-rgb), calc(.7 * var(--hell)))); opacity: calc(.55 + .45 * var(--hell)); }
.kegel-g { /* Lichtkegel schräg nach unten auf die Front */
  position: absolute; left: 58px; top: 21px; width: 233px; height: 377px; transform-origin: 0 0; transform: rotate(-24deg);
  background: linear-gradient(180deg, rgba(var(--licht-rgb), calc(.34 * var(--hell))), rgba(var(--licht-rgb), 0) 92%);
  clip-path: polygon(0 0, 13% 0, 100% 100%, 0 100%); filter: blur(13px); mix-blend-mode: screen; transform: rotate(-24deg) translateX(-21px);
}
.rack[data-licht="wechsel"] .kegel-g, .rack[data-licht="wechsel"] .linse { animation: rack-wechsel 8s linear infinite; }

/* Bedieneinheit 1 HE */
.leuchte { gap: var(--s2) var(--s3); padding: var(--s1) var(--s2); align-items: stretch; position: relative;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2px), linear-gradient(180deg, #5a4a46 0%, #3a2e2b 46%, #2c2220 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .55); }
.leuchte__kopf, .leuchte__regler { display: none; } /* Fassung 10 */
.leuchte__power { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-family: var(--f-mess); font-size: 9px; letter-spacing: .12em; color: #e0cdc7; padding-right: var(--s2); border-right: 1px solid rgba(0, 0, 0, .35); box-shadow: 1px 0 0 rgba(255, 255, 255, .08); }
.leuchte__power i { width: 8px; height: 8px; border-radius: 50%; background: var(--pegel); box-shadow: 0 0 8px var(--pegel); }
.leuchte__feld { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); flex: 1; min-width: 0; }
.feld { display: flex; align-items: center; gap: var(--s1); }
.feld__titel { font-family: var(--f-mess); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ece0db; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); writing-mode: vertical-rl; transform: rotate(180deg); }

/* Leuchttasten */
.tasten { display: flex; gap: 5px; }
.mth button.taste {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 55px; height: 55px; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; padding-bottom: 6px;
  background: linear-gradient(180deg, #4a403e, #262020); box-shadow: 0 3px 0 #120c0b, 0 4px 6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .08s, box-shadow .08s;
}
.mth button.taste:active, .mth button.taste[aria-checked="true"] { transform: translateY(2px); box-shadow: 0 1px 0 #120c0b, 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 13px rgba(var(--taste-rgb), .25); }
.mth button.taste:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.taste[data-farbe="warm"] { --taste-rgb: 255, 196, 120; }
.taste[data-farbe="kalt"] { --taste-rgb: 170, 214, 255; }
.taste[data-farbe="rot"] { --taste-rgb: 255, 90, 69; }
.taste[data-farbe="wechsel"] { --taste-rgb: 255, 255, 255; }
.taste__led { position: absolute; top: 8px; left: 13px; right: 13px; height: 5px; border-radius: 2px; background: rgba(var(--taste-rgb), .22); }
.taste[data-farbe="wechsel"] .taste__led { background: linear-gradient(90deg, #ff5a45, #f3c94b, #3fe08f, #7fd6ff, #c07bff); opacity: .35; }
.taste[aria-checked="true"] .taste__led { background: rgb(var(--taste-rgb)); box-shadow: 0 0 8px rgba(var(--taste-rgb), .95); }
.taste[aria-checked="true"][data-farbe="wechsel"] .taste__led { opacity: 1; background: linear-gradient(90deg, #ff5a45, #f3c94b, #3fe08f, #7fd6ff, #c07bff); }
.taste__text { font-family: var(--f-mess); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #efe4e0; }
.taste[aria-checked="true"] .taste__text { color: #fff; text-shadow: 0 0 6px rgba(var(--taste-rgb), .8); }

/* Drehknöpfe mit LED-Kranz und Anzeige */
.drehknopf { --anteil: .5; position: relative; width: 55px; height: 55px; border-radius: 50%; cursor: grab; touch-action: none; flex: none; }
.drehknopf:active { cursor: grabbing; }
.drehknopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.drehknopf__ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 225deg, var(--glut-hell) 0 calc(var(--anteil) * 270deg), rgba(255, 255, 255, .14) calc(var(--anteil) * 270deg) 270deg, transparent 270deg);
  -webkit-mask: repeating-conic-gradient(from 225deg, #000 0 7deg, transparent 7deg 13.5deg), radial-gradient(circle, transparent 56%, #000 57%); -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(from 225deg, #000 0 7deg, transparent 7deg 13.5deg) intersect, radial-gradient(circle, transparent 56%, #000 57%);
  filter: drop-shadow(0 0 3px rgba(240, 138, 108, .6)); }
.drehknopf__kappe { position: absolute; inset: 9px; border-radius: 50%; transform: rotate(calc(-135deg + var(--anteil) * 270deg));
  background: radial-gradient(circle at 35% 30%, #fbf6f4, #c9bfbc 35%, #8d8380 70%, #5e5654), conic-gradient(from 0deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .15), rgba(255, 255, 255, .25), rgba(0, 0, 0, .15), rgba(255, 255, 255, .25));
  background-blend-mode: overlay; box-shadow: 0 3px 5px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(0, 0, 0, .15); }
.drehknopf__kappe::after { content: ""; position: absolute; left: 50%; top: 3px; width: 3px; height: 13px; margin-left: -1.5px; border-radius: 2px; background: #1b100e; }
.lcd { position: relative; min-width: 44px; padding: 5px 6px; border-radius: 3px; font-family: var(--f-mess); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-align: right; color: #ffb547; text-shadow: 0 0 6px rgba(255, 181, 71, .7); background: #120a04; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .1); font-variant-numeric: tabular-nums; }
.lcd::before { content: "888"; position: absolute; right: 6px; color: rgba(255, 181, 71, .1); text-shadow: none; }

/* Kippschalter mit LED */
.mth button.kippschalter { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 44px; height: 55px; border-radius: 5px; background: radial-gradient(circle at 50% 50%, #1a1414 0 13px, #3a302e 14px), #2a2220; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(0, 0, 0, .5); }
.mth button.kippschalter:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kippschalter__hebel { position: absolute; left: 50%; top: 50%; width: 10px; height: 26px; margin: -26px 0 0 -5px; border-radius: 5px; transform-origin: 50% 100%; transform: rotate(155deg);
  background: linear-gradient(90deg, #8d8380, #f4efed 45%, #8d8380); box-shadow: 0 3px 4px rgba(0, 0, 0, .6); transition: transform .12s; }
.kippschalter[aria-checked="true"] .kippschalter__hebel { transform: rotate(25deg); }
.kippschalter__led { width: 8px; height: 8px; border-radius: 50%; background: #2a1d1b; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.rack[data-ton] .kippschalter__led { background: var(--pegel); box-shadow: 0 0 8px var(--pegel); }

@media (max-width: 1080px) { .leuchte__feld { gap: var(--s2); } }
@media (max-width: 640px) {
  .rack { padding-top: 55px; }
  .schwanenhals { width: 55px; height: 55px; top: -8px; }
  .schwanenhals.sh-links { left: 8%; } .schwanenhals.sh-rechts { right: 8%; }
  .kegel-g { left: 34px; top: 13px; width: 144px; height: 233px; filter: blur(8px); }
  .leuchte { flex-direction: column; padding: var(--s1); }
  .leuchte__power { flex-direction: row; border-right: 0; padding: 0; }
  .leuchte__feld { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .feld--licht { grid-column: 1 / -1; }
  .tasten { flex: 1; justify-content: space-between; }
  .mth button.taste { width: auto; flex: 1; height: 55px; }
  .feld--knopf { flex-direction: column; }
  .feld--knopf .feld__titel, .feld--ton .feld__titel { writing-mode: horizontal-tb; transform: none; }
  .feld--licht .feld__titel { writing-mode: horizontal-tb; transform: none; }
  .feld--licht { flex-direction: column; align-items: stretch; }
  .drehknopf { width: 89px; height: 89px; }
  .drehknopf__kappe { inset: 13px; }
  .feld--ton { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .rack[data-licht="wechsel"] .kegel-g, .rack[data-licht="wechsel"] .linse { animation: none !important; } .mth button.taste, .kippschalter__hebel { transition: none !important; } }

/* =====================================================================
   Fassung 11b (03.10.2026): Kabel ordentlich gepatcht, nichts baumelt.
   Drei Kabel stecken unten rechts im Touchscreen, laufen als Bündel in die Kabelführung (D-Ringe)
   und kommen von dort direkt in die Ports: rot = gewählter Bereich (wird beim Wechsel umgesteckt),
   grün fest in Netzwerk und Server, gelb fest in Telco und UCC.
   ===================================================================== */
.rack__kabel { display: none; }
.schwanenhals { top: -13px; width: 72px; height: 72px; }
.rack .touch { position: relative; padding-bottom: 21px; }
.touch__buchsen { position: absolute; right: 55px; bottom: 3px; display: flex; gap: 5px; }
.touch__buchsen i { width: 13px; height: 13px; border-radius: 2px; background: #050202; box-shadow: inset 0 0 0 2px #5a4642; position: relative; }
.touch__buchsen i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 3px; border-radius: 1px; background: var(--pegel); box-shadow: 0 0 5px var(--pegel); }
.rack .mth__patch { position: relative; }
.rack .mth__patch > .mth__welten-kopf { height: 55px; padding-top: 0; align-items: center; }
.kabel-buendel { position: absolute; right: 89px; top: -21px; height: 81px; display: flex; gap: 5px; z-index: 1; pointer-events: none; }
.kabel-buendel i { width: 8px; height: 100%; border-radius: 4px; box-shadow: inset -2px 0 0 rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .5); }
.kabel-buendel i::before { /* Stecker in der Touchscreen-Buchse */ content: ""; position: absolute; margin: -3px 0 0 -3px; width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #d1c7c3, #8f817c); }
.k-rot { background: #c0492f; } .k-gelb { background: #d9a33a; } .k-gruen { background: #2f9a6a; }
.kabelbar { position: relative; z-index: 2; height: 34px; margin-bottom: -8px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2px), linear-gradient(180deg, #4a3c39, #2a201e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 5px rgba(0, 0, 0, .5); }
.kabelbar__adern { position: absolute; left: 34px; right: 89px; top: 11px; display: flex; flex-direction: column; gap: 2px; }
.kabelbar__adern i { height: 4px; border-radius: 2px; }
.kabelbar__ringe { position: absolute; left: 34px; right: 34px; top: 4px; bottom: 4px; display: flex; justify-content: space-between; padding-inline: 21px; }
.kabelbar__ringe i { width: 21px; height: 26px; border: 3px solid #8a7671; border-top: 0; border-radius: 0 0 11px 11px; box-shadow: 0 2px 2px rgba(0, 0, 0, .5); }
/* Stecker in den Ports: kurzes Kabelstück nach oben in die Kabelführung */
.port__kabel::before { height: 34px; }
.port--gruen .port__kabel, .port--gelb .port__kabel { opacity: 1; transform: none; }
.port--gruen .port__kabel::before { background: linear-gradient(90deg, #22744f, #2f9a6a 45%, #22744f); }
.port--gelb .port__kabel::before { background: linear-gradient(90deg, #a87b26, #d9a33a 45%, #a87b26); }
.port--gruen .port__kabel::after { background: #1d5e40; } .port--gelb .port__kabel::after { background: #7a5a1c; }
.port--gruen .port__led--link, .port--gelb .port__led--link { background: var(--pegel); box-shadow: 0 0 6px var(--pegel); }
.port.ist-an .port__kabel::before { background: linear-gradient(90deg, #a83a26, var(--glut-hell) 45%, #a83a26); }
.port.ist-an .port__kabel::after { background: #5a2017; }
.patch__hilfe { color: var(--text-gedimmt); }
@media (max-width: 640px) {
  .touch__buchsen { right: 34px; }
  .kabel-buendel { right: 55px; }
  .rack .mth__patch > .mth__welten-kopf { height: 55px; }
  .kabelbar__adern { left: 13px; right: 55px; }
  .kabelbar__ringe { left: 13px; right: 13px; padding-inline: 8px; }
  .kabelbar__ringe i:nth-child(n+6) { display: none; }
  .patch__hilfe { display: none; }
}
/* Nachbesserung: Stecker sitzen je Kabel, Buchsen genau über dem Bündel */
.kabel-buendel i { position: relative; }
.kabel-buendel i::before { left: -3px; top: 0; margin: 0; }
.touch__buchsen { right: 47px; }
.touch__buchsen i { width: 13px; }
.kabel-buendel { gap: 5px; }
@media (max-width: 640px) { .touch__buchsen { right: 29px; } }
@media (max-width: 640px) {
  .rack .mth__patch > .mth__welten-kopf { padding-right: 89px; }
  .rack .mth__patch .mth__welten-titel { font-size: 18px; }
  .kabel-buendel { right: 34px; }
  .touch__buchsen { right: 8px; }
  .instr-video .rec { font-size: 0; gap: 0; }
  .instr-video .tc { font-size: 10px; }
}

/* =====================================================================
   Fassung 11c (03.10.2026, Estebans Foto: "man sieht die Produktbilder nicht ganz").
   Kachel 4:3, schmale Kopfzeile, Bild ganz (contain) auf hellem Grund, Pegel in eigener Randspalte
   rechts ausserhalb des Bildes, Titel höchstens zwei Zeilen unter dem Bild.
   Ports: Beschriftung immer ganz sichtbar (Handy 2 Spalten statt Wischstreifen).
   ===================================================================== */
.mth a.kachel { aspect-ratio: auto; display: grid; grid-template-rows: 16px auto auto; grid-template-columns: minmax(0, 1fr) 13px; background: #fbfaf9; }
.kachel__kopf { position: static; grid-column: 1 / -1; padding: 0 5px; height: 16px; font-size: 9px; }
.kachel__bild { position: static; inset: auto; grid-column: 1; aspect-ratio: 4 / 3; padding: 8px; display: grid; place-items: center; overflow: hidden; }
.kachel__bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.kachel__pegel { position: static; grid-column: 2; grid-row: 2; width: auto; padding: 8px 3px; background: #1a0f0d; display: flex; gap: 1px; align-items: flex-end; }
.kachel__info { position: static; grid-column: 1 / -1; min-height: 0; padding: 5px 6px 6px; }
.kachel__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
@media (max-width: 640px) {
  .mth a.kachel { aspect-ratio: auto; }
  .kachel__bild { inset: auto; }
  .kachel__info { min-height: 0; }
  /* Ports als zwei Spalten, jede Beschriftung ganz sichtbar */
  .rack .patch__ports { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
  .rack .mth button.port, .mth .rack button.port { min-height: 55px; flex-direction: row; justify-content: flex-start; text-align: left; gap: var(--s1); padding: var(--s1); }
  .rack .port__nr { align-self: center; }
  .rack .port__buchse { flex: none; width: 34px; height: 26px; margin: 0; }
  .rack .port__name { font-size: 12px; margin: 0; flex: 1; min-width: 0; }
  .rack .port__zahl { font-size: 12px; }
  .rack .port__kabel { width: 21px; height: 16px; margin-left: -10px; bottom: 5px; }
  .rack .port__kabel::before { height: 21px; }
}
.kachel__kopf { grid-row: 1; } .kachel__bild { grid-row: 2; } .kachel__pegel { grid-row: 2; } .kachel__info { grid-row: 3; }
/* Bild füllt sein Feld vollständig aus und wird darin ganz gezeigt (contain), unabhängig vom Seitenverhältnis */
.kachel__bild { position: relative; display: block; }
.kachel__bild img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-width: none; max-height: none; object-fit: contain; }
/* Handy: Kacheln je Seite in Leserichtung (01 02 / 03 04), obwohl der Streifen spaltenweise füllt */
@media (max-width: 640px) {
  .mv__raster .kachel:nth-child(4n+1) { order: 1; } .mv__raster .kachel:nth-child(4n+2) { order: 3; }
  .mv__raster .kachel:nth-child(4n+3) { order: 2; } .mv__raster .kachel:nth-child(4n+4) { order: 4; }
  .mv__raster .kachel:nth-child(n+5) { order: 5; }
  .mv__raster .kachel:nth-child(6) { order: 7; } .mv__raster .kachel:nth-child(7) { order: 6; } .mv__raster .kachel:nth-child(8) { order: 8; }
  .mth a.mv__alle { font-size: 13px; text-align: center; padding-inline: 8px; }
}

/* =====================================================================
   Fassung 12 (03.10.2026): die Regie gegenüber der Bühne.
   Oben endet die Bühne, ein Trichter aus Wänden und Boden führt in den dunklen Regieraum.
   Einzige Lichtquelle ist die Rackleuchte: ihr Licht färbt Rack, Kabel und Umgebung, der Rest bleibt dunkel.
   Helligkeit dimmt Raum und Rackgehäuse wirklich; Texte stehen auf eigenen, selbstleuchtenden Flächen (AA).
   Nur Verläufe und Masken, kein Weichzeichner im Raum.
   ===================================================================== */
.regie, .rack { --licht-rgb: 255, 206, 150; }
.regie[data-licht="kalt"], .rack[data-licht="kalt"] { --licht-rgb: 190, 222, 255; }
.regie[data-licht="rot"], .rack[data-licht="rot"] { --licht-rgb: 255, 96, 72; }
.regie {
  position: relative; isolation: isolate; margin: var(--s5) -16px 0; padding: 233px 16px 89px; overflow: hidden;
  background: #040101;
}
/* Trichter: Übergang von der Bühne, Wände laufen zum Rack zusammen, Boden mit Fluchtlinien */
.regie__trichter { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.regie__trichter::before { /* Bühne oben geht in Dunkel über */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 233px;
  background: linear-gradient(180deg, rgba(90, 32, 23, .55) 0%, rgba(24, 7, 5, .9) 45%, #040101 100%);
}
.regie__streulicht { position: absolute; left: 10%; right: 10%; top: 0; height: 144px; background: radial-gradient(60% 100% at 50% 0%, rgba(240, 138, 108, .16), transparent 70%); }
.wand { position: absolute; top: 89px; bottom: 0; width: 28%; }
.wand--l { left: 0; background: linear-gradient(90deg, #0b0403 0%, #160907 60%, rgba(22, 9, 7, 0) 100%); clip-path: polygon(0 0, 100% 21%, 100% 80%, 0 100%); }
.wand--r { right: 0; background: linear-gradient(270deg, #0b0403 0%, #160907 60%, rgba(22, 9, 7, 0) 100%); clip-path: polygon(0 21%, 100% 0, 100% 100%, 0 80%); }
.regie__boden { position: absolute; left: 0; right: 0; bottom: 0; height: 233px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 89px),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, .02));
  transform: perspective(377px) rotateX(55deg); transform-origin: bottom; }
/* Licht der Leuchte im Raum: Lichtpool um das Rack und Spiegelung am Boden, folgt Farbe und Helligkeit */
.regie::before {
  content: ""; position: absolute; left: 50%; top: 144px; width: min(1600px, 140%); height: 1300px; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 50% 18%, rgba(var(--licht-rgb), calc(.22 * var(--hell))), rgba(var(--licht-rgb), calc(.06 * var(--hell))) 55%, rgba(var(--licht-rgb), 0) 75%);
}
.regie::after { /* Spiegelung am Boden unter dem Rack */
  content: ""; position: absolute; left: 50%; bottom: 21px; width: min(1100px, 90%); height: 89px; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--licht-rgb), calc(.18 * var(--hell))), transparent 70%);
}
.regie[data-licht="wechsel"]::before, .regie[data-licht="wechsel"]::after { animation: rack-wechsel 8s linear infinite; }
/* Gehäuse wird mit der Helligkeit dunkler oder heller (Texte liegen auf eigenen Flächen) */
.regie .rack {
  margin-top: 0;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .65) 0 5px, transparent 5px 13px) left 13px top 0 / 8px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .65) 0 5px, transparent 5px 13px) right 13px top 0 / 8px 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, #5a4a46 calc(var(--hell) * 100%), #0e0807) 0 34px, #0d0605 34px calc(100% - 34px), color-mix(in srgb, #5a4a46 calc(var(--hell) * 100%), #0e0807) calc(100% - 34px));
  box-shadow: 0 0 0 1px rgba(var(--licht-rgb), calc(.18 * var(--hell))), 0 34px 89px -21px rgba(0, 0, 0, .95);
}
.regie .rack__ohr { background: linear-gradient(90deg, color-mix(in srgb, #3a2e2b calc(var(--hell) * 100%), #0a0606), color-mix(in srgb, #6b5853 calc(var(--hell) * 100%), #120b0a) 50%, color-mix(in srgb, #3a2e2b calc(var(--hell) * 100%), #0a0606)); }
.regie .leuchte { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2px), linear-gradient(180deg, color-mix(in srgb, #6b5853 calc(var(--hell) * 100%), #161010) 0%, color-mix(in srgb, #3a2e2b calc(var(--hell) * 100%), #0c0808) 100%); }
.regie .kabelbar { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2px), linear-gradient(180deg, color-mix(in srgb, #5a4a46 calc(var(--hell) * 100%), #120b0a), color-mix(in srgb, #2a201e calc(var(--hell) * 100%), #080505)); }
.regie .rack::after { height: 900px; background: radial-gradient(70% 100% at 50% 0%, rgba(var(--licht-rgb), calc(.34 * var(--hell))), rgba(var(--licht-rgb), 0) 72%); }
/* Mischpultkante der Regie vorne, kaum sichtbar */
.regie__pult { position: relative; max-width: 1320px; height: 34px; margin: var(--s3) auto 0; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, #2a201e calc(var(--hell) * 100%), #080505), #050202); box-shadow: 0 -1px 0 rgba(var(--licht-rgb), calc(.25 * var(--hell))); }
.regie__pult i { position: absolute; left: 8%; right: 8%; top: 13px; height: 3px; background: repeating-linear-gradient(90deg, rgba(63, 224, 143, .5) 0 3px, transparent 3px 21px, rgba(240, 138, 108, .45) 21px 24px, transparent 24px 34px); opacity: .7; }
@media (max-width: 640px) {
  .regie { padding: 144px 16px 55px; margin-top: var(--s4); }
  .regie__trichter::before { height: 144px; }
  .wand { width: 16%; top: 55px; }
  .regie__boden { display: none; }
  .regie::before { width: 200%; height: 900px; top: 89px; }
}
@media (prefers-reduced-motion: reduce) { .regie[data-licht="wechsel"]::before, .regie[data-licht="wechsel"]::after { animation: none !important; } }
/* Im Regieraum steht das Rack etwas schmaler, damit rundherum Raum bleibt */
.regie .rack { max-width: 1232px; }
.regie__pult { max-width: 1232px; }
/* Lichtpool liegt über den Wänden (sonst decken die Wände ihn zu) und reicht bis in die Raumecken */
.regie::before { z-index: 0; background: radial-gradient(60% 50% at 50% 16%, rgba(var(--licht-rgb), calc(.26 * var(--hell))), rgba(var(--licht-rgb), calc(.12 * var(--hell))) 45%, rgba(var(--licht-rgb), 0) 80%); }
.wand--l { background: linear-gradient(90deg, rgba(11, 4, 3, .92) 0%, rgba(22, 9, 7, .7) 60%, rgba(22, 9, 7, 0) 100%); }
.wand--r { background: linear-gradient(270deg, rgba(11, 4, 3, .92) 0%, rgba(22, 9, 7, .7) 60%, rgba(22, 9, 7, 0) 100%); }
.regie > .rack, .regie > .regie__pult { position: relative; z-index: 1; }
.regie::before { background: radial-gradient(62% 52% at 50% 16%, rgba(var(--licht-rgb), calc(.42 * var(--hell))), rgba(var(--licht-rgb), calc(.2 * var(--hell))) 45%, rgba(var(--licht-rgb), 0) 82%); }
/* Lichtpool oben weich auslaufen lassen (keine Kante am Rand der Fläche) */
.regie::before { top: 55px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 233px); mask-image: linear-gradient(180deg, transparent 0, #000 233px); }

/* =====================================================================
   Fassung 13 (03.10.2026, Estebans Foto: "hier gibt es noch Rechtecke").
   Licht nur noch als weicher Verlauf: kein Ausschneiden (clip-path) mehr, die Kegel sind konische
   Verläufe mit breiten Rändern, unten maskiert, sie enden als Lichtfleck auf der Leuchtenplatte und
   reichen nicht über den Touchscreen. Kein leerer Kasten über der Leuchte: die Lampen sitzen auf der
   Oberkante des Racks. Die Raumwände sind ein weicher Vignettenverlauf statt Dreiecken.
   ===================================================================== */
.regie .rack { padding-top: var(--s1); }
.regie .rack__lampen { top: auto; bottom: 100%; height: 72px; }
.regie .schwanenhals { top: auto; bottom: -8px; }
.kegel-g {
  clip-path: none; filter: none; transform: none;
  left: 50%; top: 62px; width: 233px; height: 120px; margin-left: -60px;
  background: conic-gradient(from 150deg at 26% 0%, rgba(var(--licht-rgb), 0) 0deg, rgba(var(--licht-rgb), calc(.26 * var(--hell))) 16deg, rgba(var(--licht-rgb), calc(.3 * var(--hell))) 24deg, rgba(var(--licht-rgb), calc(.22 * var(--hell))) 32deg, rgba(var(--licht-rgb), 0) 50deg);
  -webkit-mask-image: radial-gradient(70% 100% at 26% 0%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 100% at 26% 0%, #000 30%, transparent 100%);
}
/* Lichtfleck der Lampen auf der Leuchtenplatte */
.regie .leuchte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(22% 140% at 20% 0%, rgba(var(--licht-rgb), calc(.22 * var(--hell))), transparent 70%),
    radial-gradient(22% 140% at 80% 0%, rgba(var(--licht-rgb), calc(.22 * var(--hell))), transparent 70%);
}
.regie .rack::after { top: 0; }
/* Raum: weiche Vignette statt Wanddreiecken, Boden nur als sanfter Verlauf */
.wand { display: none; }
.regie__trichter::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 65% at 50% 52%, transparent 55%, rgba(0, 0, 0, .7) 100%); }
.regie__boden { transform: none; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025)); }
@media (max-width: 640px) {
  .regie .rack__lampen { height: 55px; }
  .kegel-g { width: 144px; height: 89px; margin-left: -34px; top: 46px; }
}

/* =====================================================================
   Fassung 14 (03.10.2026): Verkabelung wie in einem echten Rack.
   Patchfeld (1 HE) mit Beschriftungsstreifen, darunter ein waagrechter Kabelmanager mit einem Finger
   unter jedem Port, rechts ein senkrechter Kabelkanal neben den Einheiten. Jedes Kabel: Stecker im Port,
   fällt gerade nach unten in den Finger, läuft verdeckt im Manager, steigt im Kanal zum Touchscreen.
   Nie quer über die Front einer anderen Einheit. Ab 1200 Pixel; darunter nur die Stecker in den Ports.
   ===================================================================== */
/* alte Kabel aus Fassung 11b */
.kabel-buendel, .kabelbar, .rack .mth__patch > .mth__welten-kopf { display: none !important; }
/* Etikettenstreifen statt leerer Platte */
.patch__mitte { display: flex; flex-direction: column; min-width: 0; }
.mth h2.patch__etikett {
  align-self: flex-start; margin: 5px 0 5px 8px; padding: 2px 13px; border-radius: 2px;
  font-family: var(--f-mess); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-stretch: normal;
  color: #1b1210; background: linear-gradient(180deg, #f4efe6, #e2dacb); box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
/* Port: Beschriftung oben, Buchse unten, Stecker kommt von unten */
.rack button.port { justify-content: flex-start; padding-bottom: var(--s1); min-height: 133px; }
.rack .port__buchse { order: 9; margin-top: auto; }
.rack .port__nr { order: 1; } .rack .port__name { order: 2; } .rack .port__zahl { order: 3; }
.rack .port__kabel { display: none; }
.port__stecker { position: absolute; left: 50%; top: 13px; width: 26px; margin-left: -13px; height: 34px; opacity: 0; pointer-events: none; transform: translateY(13px); transition: opacity .2s, transform .2s; }
.port__stecker::before { /* Steckerkörper mit Rastnase */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; border-radius: 2px 2px 1px 1px; background: linear-gradient(180deg, #e8e2df, #a9a09d); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.port__stecker::after { /* Knickschutz in Kabelfarbe */ content: ""; position: absolute; left: 6px; right: 6px; top: 16px; bottom: 0; border-radius: 0 0 4px 4px; background: var(--kabel, #c0492f); }
.port.ist-an .port__stecker, .port--gruen .port__stecker, .port--gelb .port__stecker { opacity: 1; transform: none; }
.port--gruen { --kabel: #2f9a6a; } .port--gelb { --kabel: #d9a33a; } .port.ist-an { --kabel: #c0492f; }
.port.ist-an .port__stecker { animation: stecker-rein .45s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes stecker-rein { 0% { opacity: 0; transform: translateY(21px); } 60% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }
.port.stecker-raus .port__stecker { animation: stecker-raus .25s ease-in both; }
@keyframes stecker-raus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(21px); } }
.port--gruen .port__led--link, .port--gelb .port__led--link, .port.ist-an .port__led--link { background: var(--pegel); box-shadow: 0 0 6px var(--pegel); }
.port--gruen .port__led--akt, .port--gelb .port__led--akt { background: var(--pegel-gelb); box-shadow: 0 0 6px var(--pegel-gelb); animation: mth-akt .7s steps(2) infinite; }

/* Waagrechter Kabelmanager (1 HE): ein Finger genau unter jedem Port, Bürste verdeckt die Kabel */
.kabelmanager { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; height: 34px; margin-top: calc(-1 * var(--s1)); position: relative; z-index: 4; }
.km__mitte { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1px; background: #120b0a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.km__mitte i { position: relative;
  background:
    linear-gradient(90deg, transparent calc(50% - 10px), #6b5a56 calc(50% - 10px) calc(50% - 7px), transparent calc(50% - 7px) calc(50% + 7px), #6b5a56 calc(50% + 7px) calc(50% + 10px), transparent calc(50% + 10px)) top / 100% 13px no-repeat,
    repeating-linear-gradient(90deg, #1f1715 0 1px, #2a201e 1px 2px) bottom / 100% 21px no-repeat; }
.km__mitte i::after { /* Bürstenspalt in der Mitte jedes Fingers */ content: ""; position: absolute; left: calc(50% - 7px); right: calc(50% - 7px); bottom: 0; height: 21px; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px); }
/* Senkrechter Kabelkanal rechts neben den Einheiten, Lage setzt das Skript */
.kanal-v { position: absolute; right: 0; width: 34px; z-index: 4; pointer-events: none; display: none;
  background: repeating-linear-gradient(180deg, #2c2220 0 13px, rgba(18, 11, 10, .35) 13px 21px); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08), inset -1px 0 0 rgba(0, 0, 0, .5); border-radius: 3px; }
/* Kabel als Linien (Lage berechnet das Skript), unter Manager und Kanal */
.rack__verkabelung { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; display: none; }
.rack__verkabelung path { fill: none; stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
.rack__verkabelung .k-rot { stroke: #c0492f; } .rack__verkabelung .k-gelb { stroke: #d9a33a; } .rack__verkabelung .k-gruen { stroke: #2f9a6a; }
.rack__verkabelung path.legen { transition: stroke-dashoffset .5s ease-out; }
/* Buchsen am rechten Ohr des Touchscreens */
.rack .touch__buchsen { right: auto; left: auto; bottom: auto; }
.rack__touch { position: relative; }
.touch__ausgang { position: absolute; right: 3px; bottom: 13px; display: flex; flex-direction: column; gap: 5px; z-index: 5; }
.touch__ausgang i { width: 26px; height: 10px; border-radius: 2px; background: #050202; box-shadow: inset 0 0 0 2px #5a4642; }
.touch__buchsen { display: none; }

@media (min-width: 1200px) {
  .regie .rack { padding-right: 34px; }
  .rack__verkabelung, .kanal-v { display: block; }
}
@media (max-width: 1199px) {
  .kabelmanager, .touch__ausgang { display: none; }
}
@media (max-width: 640px) {
  .mth h2.patch__etikett { font-size: 11px; margin-left: 5px; }
  .rack button.port { min-height: 55px; }
  .rack .port__buchse { order: 0; margin-top: 0; }
  .port__stecker { top: 50%; left: 30px; margin-top: -13px; height: 26px; width: 21px; }
  .port__stecker::before { height: 13px; } .port__stecker::after { top: 13px; }
}
@media (prefers-reduced-motion: reduce) { .port.ist-an .port__stecker, .port.stecker-raus .port__stecker { animation: none !important; } .rack__verkabelung path.legen { transition: none; } }

/* Multiview ohne Tonbalken: das Bild nimmt die ganze Breite */
.kachel__bild { grid-column: 1 / -1; }
.mth a.kachel { grid-template-columns: minmax(0, 1fr); }
/* Kabel sichtbar zwischen Stecker und Finger; Bürste lässt die Adern durchscheinen */
.kabelmanager { margin-top: 0; }
.km__mitte { background: rgba(18, 11, 10, .55); }
.km__mitte i { background:
    linear-gradient(90deg, transparent calc(50% - 10px), #6b5a56 calc(50% - 10px) calc(50% - 7px), transparent calc(50% - 7px) calc(50% + 7px), #6b5a56 calc(50% + 7px) calc(50% + 10px), transparent calc(50% + 10px)) top / 100% 13px no-repeat,
    repeating-linear-gradient(90deg, rgba(31, 23, 21, .78) 0 1px, rgba(42, 32, 30, .78) 1px 2px) bottom / 100% 21px no-repeat; }

/* =====================================================================
   Fassung 15 (03.10.2026): Bedienteil nur Licht, Dimmer und Pan. Pegel und Animationen laufen in fester
   Stärke. Nur der gewählte Port ist gesteckt (ein rotes Kabel); kein Port wirkt dauerhaft gewählt.
   Pan schwenkt beide Lampen, Kegel, Lichtfleck auf der Platte und Lichtschein im Raum.
   ===================================================================== */
.rack .instr-audio i, .rack .kachel__pegel, .rack .instr-ip .last, .rack .instr-video svg { scale: none; }
.rack .instr-pa .schall, .rack .instr-aussen .membran::before, .rack .instr-aussen .membran::after { opacity: 1; }
.leuchte__feld { justify-content: flex-start; gap: var(--s3) var(--s5); }
.feld--knopf .drehknopf { width: 72px; height: 72px; }
.feld--knopf .drehknopf__kappe { inset: 11px; }
.feld--knopf .lcd { font-size: 21px; min-width: 62px; padding: 8px; }
.lcd--pan { text-align: center; }
.drehknopf--pan .drehknopf__ring { background: conic-gradient(from 225deg, rgba(255, 255, 255, .14) 0 min(135deg, calc(var(--anteil) * 270deg)), var(--glut-hell) min(135deg, calc(var(--anteil) * 270deg)) max(135deg, calc(var(--anteil) * 270deg) + 6deg), rgba(255, 255, 255, .14) max(135deg, calc(var(--anteil) * 270deg) + 6deg) 270deg, transparent 270deg); }
.drehknopf__skala { position: absolute; left: -5px; right: -5px; bottom: -8px; display: flex; justify-content: space-between; font-family: var(--f-mess); font-size: 9px; font-weight: 700; color: #e0cdc7; pointer-events: none; }
.regie .schwanenhals svg { transform-origin: 44px 89px; transition: transform .6s cubic-bezier(.3, .7, .2, 1); transform: rotate(calc(var(--pan, 0) * 22deg)); }
.regie .schwanenhals.sh-rechts svg { transform: rotate(calc(var(--pan, 0) * -22deg)); }
.regie .kegel-g { translate: calc(var(--pan, 0) * 144px) 0; transition: translate .6s cubic-bezier(.3, .7, .2, 1); }
.regie .schwanenhals.sh-rechts .kegel-g { translate: calc(var(--pan, 0) * -144px) 0; }
.regie .leuchte::after { background:
    radial-gradient(22% 140% at calc(20% + var(--pan, 0) * 18%) 0%, rgba(var(--licht-rgb), calc(.22 * var(--hell))), transparent 70%),
    radial-gradient(22% 140% at calc(80% + var(--pan, 0) * 18%) 0%, rgba(var(--licht-rgb), calc(.22 * var(--hell))), transparent 70%); }
.regie .rack::after { background: radial-gradient(60% 100% at calc(50% + var(--pan, 0) * 34%) 0%, rgba(var(--licht-rgb), calc(.34 * var(--hell))), rgba(var(--licht-rgb), 0) 72%); }
.regie::before, .regie::after { left: calc(50% + var(--pan, 0) * 22%); }
.port--gruen, .port--gelb { --kabel: #c0492f; }
.port:not(.ist-an) .port__led--link, .port:not(.ist-an) .port__led--akt { background: #3a2a27; box-shadow: none; animation: none; }
@media (max-width: 640px) {
  .leuchte__feld { grid-template-columns: 1fr 1fr; }
  .feld--knopf { flex-direction: column; align-items: center; }
  .feld--knopf .drehknopf { width: 89px; height: 89px; }
}
@media (prefers-reduced-motion: reduce) { .regie .schwanenhals svg, .regie .kegel-g { transition: none !important; } }

/* =====================================================================
   Fassung 16 (03.10.2026): Weg von der Bühne durch den Saal in die Regie, ohne Naht.
   Der weinrote Grund der Bühne läuft durch; die Regie dunkelt ihn mit einem langen Verlauf ab.
   Bühnenkante mit Fusslichtern und Lichtschein auf den Saalboden, Saalboden mit Fluchtlinien,
   Ganglichter, Publikum als Schattenriss im Dunst, hinten das Podest der Regie mit dem Rack.
   Gestell symmetrisch: Kabelkanal steht ausserhalb der rechten Schiene.
   ===================================================================== */
.regie { margin-top: var(--s3); padding-top: 322px;
  background: linear-gradient(180deg, rgba(4, 1, 1, 0) 0, rgba(4, 1, 1, .35) 89px, rgba(4, 1, 1, .8) 233px, #040101 377px); }
.regie__trichter::before { content: none; }
.regie__trichter::after { top: 233px; background: radial-gradient(75% 65% at 50% 45%, transparent 55%, rgba(0, 0, 0, .6) 100%); }
.regie__trichter > i { position: absolute; display: block; pointer-events: none; }
/* Bühnenkante: Bühnenboden von vorn, weiche Kanten, Reihe Fusslichter, Lichtschein nach unten */
.buehnenkante { left: 0; right: 0; top: 13px; height: 34px;
  background: linear-gradient(180deg, rgba(150, 66, 48, 0) 0, rgba(150, 66, 48, .45) 5px, rgba(96, 36, 26, .7) 11px, rgba(40, 13, 10, .85) 18px, rgba(22, 7, 5, .6) 26px, rgba(22, 7, 5, 0) 34px); }
.buehnenkante b { position: absolute; left: 3%; right: 3%; top: 15px; height: 5px;
  background: radial-gradient(circle, rgba(255, 220, 170, .95) 0 1.5px, rgba(255, 190, 130, .35) 2.5px, transparent 3.5px) 0 0 / 34px 5px repeat-x; }
.buehnenkante::after { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 233px;
  background: radial-gradient(70% 100% at 50% 0%, rgba(255, 170, 120, .16), rgba(255, 170, 120, .05) 45%, transparent 75%); }
/* Saal: Boden mit Fluchtlinien, Dunst, Gänge, Publikum */
.saal-dunst { left: 10%; right: 10%; top: 34px; height: 233px; background: radial-gradient(60% 70% at 50% 20%, rgba(240, 150, 110, .1), transparent 70%); }
.saal-boden { left: -10%; right: -10%; top: 40px; height: 300px; transform: perspective(377px) rotateX(58deg); transform-origin: top;
  background: repeating-linear-gradient(90deg, rgba(255, 220, 200, .028) 0 1px, transparent 1px 55px), linear-gradient(180deg, rgba(60, 22, 16, .35), rgba(4, 1, 1, 0));
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.saal-gang { top: 55px; width: 5px; height: 233px; translate: 0 var(--tiefe, 0px);
  background: radial-gradient(circle, rgba(255, 190, 120, .55) 0 1.5px, transparent 2.5px) 0 0 / 5px 21px repeat-y;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.saal-gang--l { left: 34%; transform: rotate(14deg); transform-origin: top; }
.saal-gang--r { right: 34%; transform: rotate(-14deg); transform-origin: top; }
.saal-publikum { left: 0; right: 0; top: 89px; height: 110px; opacity: .75; translate: 0 var(--tiefe, 0px);
  background:
    radial-gradient(9px 11px at 50% 100%, #070202 98%, transparent 100%) 0 21px / 34px 34px repeat-x,
    radial-gradient(10px 12px at 50% 100%, #050101 98%, transparent 100%) 17px 55px / 34px 34px repeat-x,
    radial-gradient(11px 13px at 50% 100%, #040101 98%, transparent 100%) 6px 89px / 38px 34px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(180deg, #000 60%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.regie__streulicht { top: 13px; }
/* Podest der Regie unter dem Rack */
.regie__pult { margin-top: 0; height: 21px; border-radius: 0; background: linear-gradient(180deg, color-mix(in srgb, #3a2c29 calc(var(--hell) * 100%), #0a0606), #050202); box-shadow: 0 -1px 0 rgba(var(--licht-rgb), calc(.3 * var(--hell))), 0 21px 34px rgba(0, 0, 0, .8); }
.regie__pult i { top: 8px; }

/* Symmetrisches Gestell: keine Zusatzspalte rechts; Kabelkanal ausserhalb der Schiene */
.regie .rack { padding-right: 0; }
.kanal-v { right: auto; left: calc(100% + 6px); width: 30px; border-radius: 5px;
  background: repeating-linear-gradient(180deg, #2c2220 0 13px, #0c0807 13px 21px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 3px 8px rgba(0, 0, 0, .6); }
.touch__ausgang { right: 9px; bottom: 34px; }
.touch__ausgang i { width: 16px; height: 13px; border-radius: 2px; background: #050202; box-shadow: inset 0 0 0 2px #6b5853; }
@media (min-width: 1200px) and (max-width: 1319px) { .rack__verkabelung, .kanal-v { display: none !important; } }

@media (max-width: 640px) {
  .regie { padding-top: 144px; background: linear-gradient(180deg, rgba(4, 1, 1, 0) 0, rgba(4, 1, 1, .6) 89px, #040101 160px); }
  .saal-publikum, .saal-gang, .saal-boden { display: none; }
  .buehnenkante b { background-size: 21px 5px; }
}
@media (prefers-reduced-motion: reduce) { .saal-publikum, .saal-gang { translate: none; } }
/* Bühnenkante weicher: Glanzkante über 13 px aufbauen, damit keine Naht entsteht */
.buehnenkante { height: 44px; background: linear-gradient(180deg, rgba(150, 66, 48, 0) 0, rgba(150, 66, 48, .16) 6px, rgba(120, 48, 36, .32) 13px, rgba(70, 24, 18, .42) 21px, rgba(30, 10, 8, .3) 32px, rgba(22, 7, 5, 0) 44px); }
.buehnenkante b { top: 19px; }
.buehnenkante::after { top: 24px; }
@media (max-width: 640px) { .buehnenkante b { background: radial-gradient(circle, rgba(255, 220, 170, .8) 0 1px, rgba(255, 190, 130, .25) 2px, transparent 3px) 0 0 / 21px 5px repeat-x; } }
/* Lichtschein der Fusslichter weich beginnen lassen; Publikum lockerer und leiser (Schattenriss, keine Naht) */
.buehnenkante::after { top: 13px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 21px); mask-image: linear-gradient(180deg, transparent, #000 21px); }
.saal-publikum { opacity: .5;
  background:
    radial-gradient(8px 10px at 50% 100%, #070202 98%, transparent 100%) 0 21px / 47px 34px repeat-x,
    radial-gradient(9px 11px at 50% 100%, #050101 98%, transparent 100%) 23px 55px / 47px 34px repeat-x,
    radial-gradient(10px 12px at 50% 100%, #040101 98%, transparent 100%) 11px 89px / 52px 34px repeat-x; }
/* Bühnenkante noch sanfter: Glanz über 21 px aufbauen und über 34 px abbauen */
.buehnenkante { height: 55px; background: linear-gradient(180deg, rgba(150, 66, 48, 0) 0, rgba(140, 58, 42, .1) 8px, rgba(120, 48, 36, .2) 15px, rgba(96, 34, 26, .26) 21px, rgba(60, 20, 15, .2) 34px, rgba(30, 10, 8, .1) 44px, rgba(22, 7, 5, 0) 55px); }
.buehnenkante b { top: 22px; }
.regie__streulicht { -webkit-mask-image: linear-gradient(180deg, transparent, #000 34px); mask-image: linear-gradient(180deg, transparent, #000 34px); }
.saal-dunst { -webkit-mask-image: linear-gradient(180deg, transparent, #000 34px); mask-image: linear-gradient(180deg, transparent, #000 34px); }

/* =====================================================================
   Fassung 17 (03.10.2026): Detailarbeit an Saal, Licht und Rack.
   Eine Kamera: wir stehen an der Regie und schauen zur Bühne; hinten (oben) ist klein und dicht,
   vorn (unten) gross. Licht kommt aus zwei Richtungen: warm von der Bühne (Gegenlicht auf das Publikum)
   und warm von der Rackleuchte (nur das Rack und seine Umgebung). Der Saal dazwischen ist kühl dunkel.
   ===================================================================== */
.regie__trichter::after, .saal-dunst, .saal-boden, .saal-gang, .saal-publikum, .buehnenkante, .regie__streulicht { display: none !important; }
.saal { position: absolute; left: 0; right: 0; top: 0; height: 322px; overflow: hidden; pointer-events: none; }
.saal > i, .saal b, .saal .lippe, .saal .gang, .saal .reihe { position: absolute; display: block; }
/* Boden mit Fluchtlinien zur Bühnenmitte, Farbverlauf warm (Bühne) zu kühl dunkel (Saal) */
.saal__boden { left: 0; right: 0; top: 40px; bottom: 0;
  background:
    repeating-conic-gradient(from 176deg at 50% -55%, rgba(255, 215, 195, .045) 0 .3deg, transparent .3deg 3.2deg),
    linear-gradient(180deg, rgba(70, 26, 19, .42) 0, rgba(28, 24, 30, .38) 45%, rgba(10, 10, 14, .2) 80%, rgba(4, 1, 1, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 21px, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 21px, #000 70%, transparent); }
.saal__dunst { left: 5%; right: 5%; top: 30px; height: 200px; background: radial-gradient(60% 80% at 50% 0%, rgba(235, 150, 110, .14), rgba(235, 150, 110, .04) 50%, transparent 75%); }
.saal__nebel { left: 0; right: 0; top: 160px; bottom: 0; background: linear-gradient(180deg, rgba(4, 1, 1, 0), rgba(4, 1, 1, .55) 70%, rgba(4, 1, 1, .8)); }

/* Bühnenlippe: Oberseite (streifend beleuchtet) und Front, leicht gebogen, unten weich in den Boden */
.lippe { left: -2%; right: -2%; top: 8px; height: 46px; }
.lippe__oben { left: 0; right: 0; top: 0; height: 12px; border-radius: 50% 50% 0 0 / 7px 7px 0 0;
  background: linear-gradient(180deg, rgba(190, 92, 64, 0), rgba(190, 92, 64, .22) 45%, rgba(160, 66, 46, .42) 100%); }
.lippe__front { left: 0; right: 0; top: 12px; height: 34px; border-radius: 0 0 50% 50% / 0 0 9px 9px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 89px),
    linear-gradient(180deg, rgba(34, 11, 8, .95) 0, rgba(20, 6, 5, .9) 45%, rgba(14, 4, 3, .45) 75%, rgba(14, 4, 3, 0) 100%); }
/* Fusslichter: Gehäuse, Linse mit Schein, Lichtkegel nach oben auf die Bühne, Lichtfleck vor der Lippe */
.fuss { left: var(--x); top: 7px; width: 14px; height: 7px; translate: -50% 0; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #3a2622, #0d0605); box-shadow: 0 2px 2px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
.fuss::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 44px; height: 38px; translate: -50% 0;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 200, 140, calc(.32 * var(--i))), rgba(255, 200, 140, 0) 75%); }
.fuss::after { content: ""; position: absolute; left: 50%; top: 2px; width: 8px; height: 3px; translate: -50% 0; border-radius: 50%;
  background: rgba(255, 228, 182, calc(.55 + .45 * var(--i)));
  box-shadow: 0 0 5px 2px rgba(255, 196, 128, calc(.55 * var(--i))), 0 14px 21px 9px rgba(255, 170, 110, calc(.11 * var(--i))); }

/* Gänge: Stufenlichter am Boden mit Lichtfleck, hinten dicht und klein, vorn weit und gross */
.stufe { left: var(--x); top: calc(50px + var(--y)); width: calc(10px * var(--s)); height: calc(4px * var(--s)); translate: -50% 0;
  border-radius: 1px; background: #1a100e; box-shadow: 0 1px 1px rgba(0, 0, 0, .7); }
.stufe::after { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: calc(2px * var(--s)); border-radius: 1px;
  background: rgba(255, 200, 140, .85); box-shadow: 0 calc(5px * var(--s)) calc(9px * var(--s)) calc(4px * var(--s)) rgba(255, 170, 110, .2); }

/* Publikum: Reihen mit Gegenlicht von der Bühne, Sitzlehnen vor den Schultern, Dunst zwischen den Reihen */
.reihe { left: 0; right: 0; top: calc(50px + var(--y)); height: 0; }
.reihe::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(44px * var(--s));
  background: linear-gradient(180deg, rgba(120, 50, 36, 0), rgba(120, 50, 36, calc(.12 - var(--n) * .02))); }
.p { --haut: #070303; --rand: rgba(190, 96, 66, calc(.62 - var(--n) * .07));
  left: var(--x); bottom: 0; width: calc(22px * var(--s) * var(--w)); height: calc(30px * var(--s) * var(--h)); translate: -50% 0; transform-origin: 50% 100%;
  background:
    linear-gradient(180deg, rgba(150, 70, 50, .32) 0 1px, #0b0403 1px) 50% 100% / 108% 27% no-repeat,
    radial-gradient(circle at 50% 27%, var(--haut) 0 25%, var(--rand) 27%, transparent 31%),
    radial-gradient(52% 46% at 50% 100%, var(--haut) 0 92%, var(--rand) 96%, transparent 100%); }
.p--dutt { background:
    linear-gradient(180deg, rgba(150, 70, 50, .32) 0 1px, #0b0403 1px) 50% 100% / 108% 27% no-repeat,
    radial-gradient(circle at 50% 8%, var(--haut) 0 10%, var(--rand) 12%, transparent 15%),
    radial-gradient(circle at 50% 27%, var(--haut) 0 24%, var(--rand) 26%, transparent 30%),
    radial-gradient(52% 46% at 50% 100%, var(--haut) 0 92%, var(--rand) 96%, transparent 100%); }
.p--locken { background:
    linear-gradient(180deg, rgba(150, 70, 50, .32) 0 1px, #0b0403 1px) 50% 100% / 108% 27% no-repeat,
    radial-gradient(circle at 50% 26%, var(--haut) 0 31%, var(--rand) 33%, transparent 37%),
    radial-gradient(52% 46% at 50% 100%, var(--haut) 0 92%, var(--rand) 96%, transparent 100%); }
.p--kappe { background:
    linear-gradient(180deg, rgba(150, 70, 50, .32) 0 1px, #0b0403 1px) 50% 100% / 108% 27% no-repeat,
    radial-gradient(40% 7% at 62% 21%, var(--haut) 0 90%, transparent 100%),
    radial-gradient(circle at 50% 27%, var(--haut) 0 25%, var(--rand) 27%, transparent 31%),
    radial-gradient(52% 46% at 50% 100%, var(--haut) 0 92%, var(--rand) 96%, transparent 100%); }
/* Telefon hoch über dem Kopf: Rückseite dunkel, Bildschirmschein streut auf Hand und Kopf */
.p--telefon::before { content: ""; position: absolute; left: 66%; bottom: 52%; width: calc(2.5px * var(--s)); height: calc(18px * var(--s)); background: var(--haut); transform: rotate(14deg); transform-origin: bottom; border-radius: 2px; }
.p--telefon::after { content: ""; position: absolute; left: calc(66% + 3px * var(--s)); bottom: calc(52% + 17px * var(--s)); width: calc(6px * var(--s)); height: calc(10px * var(--s)); border-radius: 1px;
  background: #0c0d12; box-shadow: 0 0 calc(10px * var(--s)) calc(2px * var(--s)) rgba(170, 210, 255, .42), inset 0 0 0 1px rgba(210, 230, 255, .35);
  animation: telefon-flackern 11s steps(1) infinite; animation-delay: calc(var(--v) * -1); }
@keyframes telefon-flackern { 0%, 88%, 100% { opacity: 1; } 90% { opacity: .55; } 93% { opacity: .9; } 95% { opacity: .5; } }
.p--hand::before { content: ""; position: absolute; left: 22%; bottom: 55%; width: calc(3px * var(--s)); height: calc(20px * var(--s)); background: var(--haut); transform: rotate(-10deg); transform-origin: bottom; border-radius: 2px; }
.p--hand::after { content: ""; position: absolute; left: calc(22% - 4px * var(--s)); bottom: calc(55% + 18px * var(--s)); width: calc(8px * var(--s)); height: calc(9px * var(--s)); border-radius: 40% 40% 45% 45%; background: var(--haut); box-shadow: 0 -1px 0 var(--rand); }
.p--wiegt { animation: publikum-wiegen 9s ease-in-out infinite alternate; animation-delay: calc(var(--v) * -1); }
@keyframes publikum-wiegen { from { rotate: -1.4deg; } to { rotate: 1.4deg; } }

/* Kein harter Rand am Ende des Saals: Regie-Hintergrund dunkelt erst unter dem Publikum ab */
.regie { background: linear-gradient(180deg, rgba(4, 1, 1, 0) 0, rgba(4, 1, 1, .25) 110px, rgba(4, 1, 1, .7) 260px, #040101 360px); }
.regie::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 280px); mask-image: linear-gradient(180deg, transparent 0, #000 280px); }

/* Rack: Deckel mit Lüftungsschlitzen und Schienenkappen, Lampen stehen darauf (mit Kontaktschatten) */
.regie .rack { padding-top: 0; }
.rack__deckel { position: relative; height: 21px; border-radius: 8px 8px 2px 2px; z-index: 2;
  background:
    radial-gradient(14% 160% at calc(18% + 36px + var(--pan, 0) * 30px) 0%, rgba(var(--licht-rgb), calc(.35 * var(--hell))), transparent 70%),
    radial-gradient(14% 160% at calc(82% - 36px + var(--pan, 0) * 30px) 0%, rgba(var(--licht-rgb), calc(.35 * var(--hell))), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, color-mix(in srgb, #7a6a66 calc(var(--hell) * 100%), #1a1312), color-mix(in srgb, #3a2e2b calc(var(--hell) * 100%), #0b0807));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 5px rgba(0, 0, 0, .6); }
.rack__deckel::after { content: ""; position: absolute; left: 34%; right: 34%; top: 7px; height: 7px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .7) 0 13px, transparent 13px 21px); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4); }
.rack__kappe { position: absolute; top: -3px; width: 34px; height: 24px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, color-mix(in srgb, #5a4a46 calc(var(--hell) * 100%), #120c0b), #1a1210); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 3px rgba(0, 0, 0, .6); }
.rack__kappe--l { left: 0; } .rack__kappe--r { right: 0; }
.rack__kappe::after { content: ""; position: absolute; left: 50%; top: 7px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8ddd9, #8a7671 60%, #4a3a37); }
.schwanenhals::after { content: ""; position: absolute; left: 22px; bottom: -3px; width: 28px; height: 6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); }
.regie .schwanenhals { bottom: -1px; }
.schwanenhals .kern { fill: #fffaf0; filter: drop-shadow(0 0 3px rgba(255, 240, 210, .95)); opacity: calc(.6 + .4 * var(--hell)); }
.regie .kegel-g { background: conic-gradient(from 150deg at 26% 0%, rgba(var(--licht-rgb), 0) 0deg, rgba(var(--licht-rgb), calc(.4 * var(--hell))) 16deg, rgba(var(--licht-rgb), calc(.48 * var(--hell))) 24deg, rgba(var(--licht-rgb), calc(.36 * var(--hell))) 32deg, rgba(var(--licht-rgb), 0) 50deg); }
/* Lichtflecken der Lampen auf der Rackfront mit Heisspunkt, folgen Farbe, Dimmer und Pan */
.lampe-pool { position: absolute; top: 0; width: 377px; height: 260px; z-index: 5; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 248, 236, calc(.32 * var(--hell))) 0, transparent 12%),
    radial-gradient(50% 62% at 50% 0%, rgba(var(--licht-rgb), calc(.5 * var(--hell))) 0, rgba(var(--licht-rgb), calc(.2 * var(--hell))) 38%, rgba(var(--licht-rgb), 0) 78%); }
.lampe-pool--l { left: calc(18% + 57px - 188px + var(--pan, 0) * 60px); }
.lampe-pool--r { right: calc(18% + 57px - 188px - var(--pan, 0) * 60px); }
.rack[data-licht="wechsel"] .lampe-pool { animation: rack-wechsel 8s linear infinite; }
/* Podest der Regie: Gummikante, Front mit feinem Lichtband, Kontaktschatten des Racks */
.regie__pult { position: relative; max-width: none; margin: 0 -16px; height: 55px; border-radius: 0;
  background:
    linear-gradient(180deg, #0b0b0b 0 3px, color-mix(in srgb, #3a2c29 calc(var(--hell) * 80%), #0a0606) 3px 13px, #0d0807 13px, #060303 100%);
  box-shadow: 0 -1px 0 rgba(var(--licht-rgb), calc(.3 * var(--hell))); }
.regie__pult::before { content: ""; position: absolute; left: 50%; top: 2px; width: min(1232px, calc(100% - 32px)); height: 13px; translate: -50% 0;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, .85), transparent); }
.regie__pult i { top: 30px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(190, 210, 240, .35) 15%, rgba(190, 210, 240, .45) 50%, rgba(190, 210, 240, .35) 85%, transparent); opacity: 1; }
/* Siebensegment-Anzeigen: Wert rechtsbündig, unbeleuchtete Segmente sehr schwach und deckungsgleich */
.lcd { text-align: right; white-space: pre; --lcd-pad: 8px; padding: 8px var(--lcd-pad); }
.lcd::before { content: "888"; position: absolute; left: auto; right: var(--lcd-pad); top: 8px; color: rgba(255, 181, 71, .08); text-shadow: none; }
.feld--knopf .lcd, .lcd--pan { text-align: right; min-width: 62px; }
.lcd--pan::before { content: "888"; }
.mth::after { opacity: .05; }

@media (max-width: 640px) {
  .saal { height: 144px; }
  .reihe, .gang { display: none !important; }
  .saal__nebel { top: 70px; }
  .lippe { top: 6px; }
  .regie { background: linear-gradient(180deg, rgba(4, 1, 1, 0) 0, rgba(4, 1, 1, .5) 70px, #040101 150px); }
  .lampe-pool { width: 240px; height: 170px; }
  .lampe-pool--l { left: calc(8% + 44px - 120px + var(--pan, 0) * 40px); }
  .lampe-pool--r { right: calc(8% + 44px - 120px - var(--pan, 0) * 40px); }
}
@media (prefers-reduced-motion: reduce) { .p--wiegt, .p--telefon::after, .rack[data-licht="wechsel"] .lampe-pool { animation: none !important; } }
/* Fassung 17, zweiter Durchgang: Publikum organisch (Schulter an Schulter, Grösse in vw, senkrechter Versatz,
   Gegenlicht nur als feiner Saum oben), Dunst hinter jeder Reihe, Gänge deutlicher, Lippe mit Kante. */
.p { width: calc(1.55vw * var(--s) * var(--w)); height: calc(2.1vw * var(--s) * var(--h)); bottom: calc(var(--dy) * 1px * var(--s));
  --rand: rgba(190, 100, 70, calc(.34 - var(--n) * .04)); }
.p, .p--dutt, .p--locken, .p--kappe { background-image:
    linear-gradient(180deg, rgba(130, 60, 44, .14) 0 1px, #0b0403 1px),
    radial-gradient(circle at 50% 27%, var(--haut) 0 25%, var(--rand) 26.5%, transparent 29%),
    radial-gradient(54% 48% at 50% 100%, var(--haut) 0 93%, var(--rand) 96%, transparent 100%);
  background-size: 112% 24%, auto, auto; background-position: 50% 100%, 0 0, 0 0; background-repeat: no-repeat; }
.p--dutt { background-image:
    linear-gradient(180deg, rgba(130, 60, 44, .14) 0 1px, #0b0403 1px),
    radial-gradient(circle at 54% 8%, var(--haut) 0 10%, var(--rand) 11.5%, transparent 14%),
    radial-gradient(circle at 50% 27%, var(--haut) 0 24%, var(--rand) 25.5%, transparent 28%),
    radial-gradient(54% 48% at 50% 100%, var(--haut) 0 93%, var(--rand) 96%, transparent 100%);
  background-size: 112% 24%, auto, auto, auto; background-position: 50% 100%, 0 0, 0 0, 0 0; }
.p--locken { background-image:
    linear-gradient(180deg, rgba(130, 60, 44, .14) 0 1px, #0b0403 1px),
    radial-gradient(34% 30% at 50% 27%, var(--haut) 0 88%, var(--rand) 94%, transparent 100%),
    radial-gradient(54% 48% at 50% 100%, var(--haut) 0 93%, var(--rand) 96%, transparent 100%); }
.p--kappe { background-image:
    linear-gradient(180deg, rgba(130, 60, 44, .14) 0 1px, #0b0403 1px),
    radial-gradient(38% 6% at 64% 20%, var(--haut) 0 90%, transparent 100%),
    radial-gradient(circle at 50% 27%, var(--haut) 0 25%, var(--rand) 26.5%, transparent 29%),
    radial-gradient(54% 48% at 50% 100%, var(--haut) 0 93%, var(--rand) 96%, transparent 100%);
  background-size: 112% 24%, auto, auto, auto; background-position: 50% 100%, 0 0, 0 0, 0 0; }
.reihe::before { height: calc(3.2vw * var(--s)); background: linear-gradient(180deg, rgba(150, 64, 44, 0), rgba(150, 64, 44, calc(.17 - var(--n) * .022)) 70%, rgba(150, 64, 44, 0)); }
.stufe { width: calc(14px * var(--s)); height: calc(5px * var(--s)); z-index: 2; }
.stufe::after { background: rgba(255, 210, 150, .95); box-shadow: 0 0 3px 1px rgba(255, 196, 128, .7), 0 calc(6px * var(--s)) calc(12px * var(--s)) calc(6px * var(--s)) rgba(255, 170, 110, .28); }
.lippe__oben { height: 13px; background: linear-gradient(180deg, rgba(200, 98, 68, 0), rgba(200, 98, 68, .3) 40%, rgba(215, 120, 86, .62) 85%, rgba(120, 44, 32, .7) 100%); }
.lippe__front { top: 13px; background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 89px),
    linear-gradient(180deg, rgba(255, 170, 120, .18) 0 1px, rgba(30, 9, 7, .97) 1px, rgba(18, 5, 4, .9) 50%, rgba(14, 4, 3, .4) 80%, rgba(14, 4, 3, 0) 100%); }
.fuss { top: 8px; }
.lcd::before { color: rgba(255, 181, 71, .055); }
.saal .gang { left: 0; right: 0; top: 0; bottom: 0; z-index: 3; }
@media (max-width: 640px) {
  .leuchte__power { box-shadow: none; }
  .fuss:nth-child(3n+2) { display: none; }
}
.saal__dunst { -webkit-mask-image: linear-gradient(180deg, transparent, #000 34px); mask-image: linear-gradient(180deg, transparent, #000 34px); }

/* Fassung 17, dritter Durchgang (Estebans Wörter 03.10.):
   - Blocksatz mit Silbentrennung für Fliesstext; wo eine Zeile zu grosse Lücken hätte, schaltet das Skript auf
     ausgeglichenen Flattersatz um (Klasse ohne-blocksatz). Überschriften und kurze Beschriftungen bleiben.
   - Angebotskarte: Zeilen über die ganze Breite (Ersparnis links, Prozent rechts; alter Preis links, Preis rechts
     mit CHF inkl. MwSt. darunter; Verfügbarkeit links, Knopf rechts), Ränder nach Fibonacci.
   - Handy bis 768: kein Einleitungstext, oben direkt Bühne und Angebot, dann Suche; Überschrift nur für Vorleser. */
.blocksatz { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 2; overflow-wrap: normal; }
.blocksatz.ohne-blocksatz { text-align: left; text-wrap: balance; }
.mth__deal-text { align-self: stretch; justify-content: center; gap: var(--s1); min-width: 0; }
.mth__deal-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); }
.mth__deal-kopf .mth__spar { align-self: auto; }
.mth__deal-kopf .mth__prozent { margin: 0; font-size: 12px; font-weight: 800; color: #fff; padding: 5px var(--s2); border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.mth .mth__deal-name { -webkit-line-clamp: 3; }
.mth__deal-preis { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: nowrap; gap: var(--s1); }
.mth__deal-preis s { width: auto; margin: 0 0 6px; }
.mth__preisblock { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.mth__preisblock small { width: auto; font-size: 11px; color: var(--text-leise); }
.mth__deal-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.mth__deal-fuss .mth__kaufen { align-self: auto; margin: 0; }
@media (max-width: 768px) {
  .mth__oben { display: flex; flex-direction: column; gap: var(--s3); }
  .mth__eingang { display: contents; }
  .mth__vorzeile, .mth__unter, .mth__hilfe { display: none !important; }
  .mth h1 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
  .mth__rampe { order: 1; padding-top: 55px; }
  .mth__suche { order: 2; }
  .mth__wege { order: 3; }
  .mth__anzeige { order: 4; }
  .mt-homepage-v3 section.mt-section.mth, .mth { padding-top: var(--s2); }
  .mth__deal { grid-template-columns: minmax(0, 1fr); padding: var(--s2) var(--s3) var(--s3); }
  .mth__deal-fuss { flex-direction: column; align-items: stretch; }
  .mth__deal-fuss .mth__kaufen { justify-content: center; min-height: 55px; }
}
.saal { contain: layout paint; }

/* =====================================================================
   Fassung 18 (03.10.2026): echte Truss über der Bühne und DMX-Steuerung im Rack.
   Truss: 4-Punkt-Boxtruss (290er Bauart) aus Aluminium mit Gurten, Diagonalen, Verbindern und Endplatten,
   an zwei Kettenzügen. Das Skript baut das Fachwerk passend zur Breite (echte Linien, messbar).
   Daran: der Rampenlicht-Spot und vier Moving Heads mit Halbschellen und Sicherungsseil.
   DMX-Pult (2 HE) im Rack: Master, Farbe, Pan, Tilt als Fader, vier Szenen, Strobe (aus; nie bei
   reduzierter Bewegung), Anzeige Universe und Adresse. Es steuert die Moving Heads.
   ===================================================================== */
.mth { --buehne-master: .8; --mh-farbe: 30; --mh-pan: 0; --mh-tilt: .5; }
.truss { position: absolute; left: 0; right: 0; top: 13px; height: 55px; z-index: 2; pointer-events: none; }
.truss svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.truss .gurt { stroke: url(#mth-alu); stroke-width: 4; stroke-linecap: round; }
.truss .gurt--hinten { stroke: #6f6461; stroke-width: 3; }
.truss .diagonale { stroke: #b9b0ad; stroke-width: 1.6; }
.truss .diagonale--hinten { stroke: #5d5250; stroke-width: 1.2; }
.truss .verbinder { fill: #d8d1ce; stroke: #4a403e; stroke-width: .8; }
.truss .endplatte { fill: #8f8582; stroke: #3a302e; stroke-width: 1; }
.truss .kette { stroke: #9c9290; stroke-width: 2; stroke-dasharray: 3 2; }
.truss .motor { fill: #1c1716; stroke: #4a403e; stroke-width: 1; }
.truss .glanz { stroke: rgba(255, 236, 214, .55); stroke-width: 1; }
/* Moving Heads: Halbschelle, Bügel, Kopf mit Linse; Strahl folgt Master, Farbe, Pan und Tilt */
.mh { position: absolute; top: calc(13px + 55px - 6px); left: var(--x); width: 34px; height: 44px; translate: -50% 0; z-index: 3; pointer-events: none; }
.mh__schelle { position: absolute; left: 11px; top: 0; width: 12px; height: 7px; border-radius: 2px; background: linear-gradient(180deg, #c9c1be, #6f6461); }
.mh__seil { position: absolute; left: 22px; top: -4px; width: 7px; height: 13px; border: 1.5px solid #c9c1be; border-radius: 4px; border-left-color: transparent; }
.mh__buegel { position: absolute; left: 4px; top: 7px; width: 26px; height: 21px; border: 3px solid #2a2322; border-top-width: 5px; border-radius: 3px 3px 9px 9px; }
.mh__kopf { position: absolute; left: 9px; top: 15px; width: 16px; height: 21px; border-radius: 5px; background: linear-gradient(90deg, #1a1514, #3a302e 50%, #1a1514);
  transform-origin: 50% 20%; rotate: calc(var(--mh-pan) * 1deg * var(--dir, 1)); }
.mh__kopf::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -2px; height: 5px; border-radius: 50%;
  background: hsl(var(--mh-farbe) 100% 80%); box-shadow: 0 0 calc(8px * var(--buehne-master)) calc(3px * var(--buehne-master)) hsl(var(--mh-farbe) 100% 70% / calc(.9 * var(--buehne-master)));
  opacity: calc(.25 + .75 * var(--buehne-master)); }
.mh__strahl { position: absolute; left: 50%; top: 34px; width: 233px; height: calc(233px + var(--mh-tilt) * 233px); translate: -50% 0; transform-origin: 50% 0;
  rotate: calc(var(--mh-pan) * 1deg * var(--dir, 1));
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, hsl(var(--mh-farbe) 100% 70% / calc(.22 * var(--buehne-master))) 9deg, hsl(var(--mh-farbe) 100% 76% / calc(.3 * var(--buehne-master))) 12deg, hsl(var(--mh-farbe) 100% 70% / calc(.22 * var(--buehne-master))) 15deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); mix-blend-mode: screen; z-index: -1; }
.mth[data-strobe] .mh__strahl, .mth[data-strobe] .mh__kopf::after { animation: dmx-strobe .5s steps(1) infinite; }
@keyframes dmx-strobe { 50% { opacity: .1; } }
/* Spot hängt an der Truss */
@media (min-width: 769px) { .mth__oben { align-items: start; } .mth__rampe { padding-top: 89px; } .mth__spot .traverse { display: none; } }
.mth__spot .lampe::after { content: ""; position: absolute; left: 50%; top: -40px; width: 3px; height: 40px; margin-left: -1.5px; background: linear-gradient(#c9c1be, #6f6461); }

/* DMX-Pult im Rack (2 HE) */
.dmx { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s4); padding: var(--s2) var(--s3);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2px), linear-gradient(180deg, color-mix(in srgb, #4a3c39 calc(var(--hell) * 100%), #120c0b), color-mix(in srgb, #241b19 calc(var(--hell) * 100%), #080505));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.dmx__titel { font-family: var(--f-mess); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ece0db; }
.dmx__lcd { display: flex; flex-direction: column; gap: 2px; min-width: 144px; padding: 8px 13px; border-radius: 3px; background: #0d1a10; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
  font-family: var(--f-mess); font-size: 12px; letter-spacing: .06em; color: #7dffa8; text-shadow: 0 0 5px rgba(125, 255, 168, .6); white-space: nowrap; }
.dmx__fader { display: flex; gap: var(--s2); }
.dmx__kanal { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dmx__kanal label { font-family: var(--f-mess); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #e0cdc7; }
.dmx__bahn { position: relative; width: 44px; height: 89px; border-radius: 3px; cursor: grab; touch-action: none; }
.dmx__bahn::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 4px; margin-left: -2px; border-radius: 2px; background: #050202; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dmx__bahn::after { content: ""; position: absolute; left: 50%; bottom: calc(6px + var(--wert, .5) * 64px); width: 30px; height: 13px; margin-left: -15px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, rgba(0, 0, 0, .06) 1px 2px), linear-gradient(180deg, #f6f1ee, #a8958f); box-shadow: 0 3px 5px rgba(0, 0, 0, .55); }
.dmx__bahn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dmx__szenen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.mth button.dmx__taste { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; padding: 5px 8px; border-radius: 4px; text-align: center;
  font-family: var(--f-mess); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #efe4e0;
  background: linear-gradient(180deg, #4a403e, #262020); box-shadow: 0 3px 0 #120c0b, inset 0 1px 0 rgba(255, 255, 255, .18); }
.mth button.dmx__taste[aria-checked="true"], .mth button.dmx__taste[aria-pressed="true"] { transform: translateY(2px); box-shadow: 0 1px 0 #120c0b, inset 0 0 13px rgba(240, 138, 108, .4); color: #fff; }
.mth button.dmx__taste:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mth a.dmx__shop { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s2); border-radius: 4px; text-decoration: none;
  font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--glut), var(--wein)); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
@media (max-width: 1080px) { .dmx { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .dmx { grid-template-columns: 1fr; padding: var(--s2); }
  .dmx__fader { justify-content: space-between; }
  .mh:nth-of-type(n+4) { display: none; }
  .truss { top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .mth[data-strobe] .mh__strahl, .mth[data-strobe] .mh__kopf::after { animation: none !important; } }

.rack .patch__ports, .km__mitte { grid-template-columns: repeat(11, minmax(0, 1fr)); }
@media (max-width: 1199px) { .rack .patch__ports { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rack .patch__ports { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Platz unter der Truss: Moving Heads hängen frei, Inhalt beginnt darunter; Spot hängt an einem Rohr */
@media (min-width: 769px) {
  .mt-homepage-v3 section.mt-section.mth, .mth { padding-top: 144px; }
  .mth__spot .lampe::after { top: -80px; height: 80px; }
}
@media (max-width: 768px) {
  .mt-homepage-v3 section.mt-section.mth, .mth { padding-top: 55px; }
  .mh:nth-of-type(2), .mh:nth-of-type(3) { display: none; }
  .mth__spot .lampe::after { display: none; }
}
.mth__spot .traverse { display: none; }
@media (max-width: 768px) { .mh:nth-of-type(4) { display: block; } }
/* Strahlen etwas kräftiger, damit der Master sichtbar wirkt (Text bleibt auf eigener Fläche lesbar) */
.mh__strahl { background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, hsl(var(--mh-farbe) 100% 70% / calc(.3 * var(--buehne-master))) 9deg, hsl(var(--mh-farbe) 100% 78% / calc(.42 * var(--buehne-master))) 12deg, hsl(var(--mh-farbe) 100% 70% / calc(.3 * var(--buehne-master))) 15deg, transparent 24deg); }
/* Leistung: Strahlen ohne Mischmodus (Mischen kostet viel Rechenzeit), gleiche Wirkung auf dunklem Grund */
.mh__strahl { mix-blend-mode: normal; }
.truss, .mh { contain: layout paint; }
.mh { contain: none; } /* Strahl und Linsenschein liegen ausserhalb des Kastens */

/* =====================================================================
   Fassung 19 (03.10.2026): Scheinwerfer hängen sichtbar an der Truss; Schwanenhals-Licht kommt aus der Linse.
   Lage von Schellen, Abhängungen und Lichtkegeln setzt das Skript aus den echten Elementen (Untergurt, Linse).
   ===================================================================== */
/* Spot: Schelle um den Untergurt, Bolzen, Abhängung bis zum Bügel, Sicherungsseil um den Gurt */
.mth__spot .lampe::after { content: none !important; }
.aufhaengung { position: absolute; left: 50%; bottom: calc(100% - 2px); width: 22px; margin-left: -11px; height: var(--stange, 34px); pointer-events: none;
  background: linear-gradient(90deg, transparent 9px, #7d726f 9px, #e8e1de 10.5px, #8d8380 12px, transparent 13px); }
.aufhaengung .schelle, .mh__schelle { position: absolute; left: 3px; top: -6px; width: 16px; height: 12px; border-radius: 4px; box-sizing: border-box;
  border: 2.5px solid #d8d1ce; background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 -1px 4px rgba(255, 236, 214, calc(.25 + .35 * var(--buehne-master, .8))); }
.aufhaengung .schelle::after, .mh__schelle::after { content: ""; position: absolute; right: -6px; top: 2px; width: 5px; height: 5px; border-radius: 1px; background: #b9b0ad; box-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.aufhaengung .sicherung, .mh__seil { position: absolute; left: 1px; top: -9px; width: 9px; height: 26px; box-sizing: border-box; border: 1.5px solid #c9c1be; border-radius: 5px; border-right-color: transparent; background: none; }
/* Moving Heads: Schelle sitzt auf dem Untergurt (Lage per Skript), Bügel direkt darunter */
.mh { top: var(--mh-oben, 49px); }
.mh__schelle { left: 9px; }
.mh__seil { left: 20px; }
.mh__buegel { top: 6px; }
/* Schwanenhals: Drehpunkt am Fuss, Kegel im Rack an der Linse */
.regie .schwanenhals svg { transform-origin: 49.4% 100%; transition: none; transform: rotate(calc(var(--pan, 0) * -22deg)); }
.regie .schwanenhals.sh-rechts svg { transform: rotate(calc(var(--pan, 0) * 22deg)); }
.kegel-g { display: none !important; }
.lampen-kegel { position: absolute; left: 0; top: 0; width: 233px; height: 190px; margin-left: -116.5px; z-index: 5; pointer-events: none; transform-origin: 50% 0;
  background: conic-gradient(from 167deg at 50% 0%, rgba(var(--licht-rgb), 0) 0deg, rgba(var(--licht-rgb), calc(.34 * var(--hell))) 10deg, rgba(var(--licht-rgb), calc(.44 * var(--hell))) 13deg, rgba(var(--licht-rgb), calc(.34 * var(--hell))) 16deg, rgba(var(--licht-rgb), 0) 26deg);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.rack[data-licht="wechsel"] .lampen-kegel { animation: rack-wechsel 8s linear infinite; }
.lampe-pool--l, .lampe-pool--r { left: 0; right: auto; margin-left: -188.5px; }
@media (max-width: 640px) { .lampen-kegel { width: 144px; height: 120px; margin-left: -72px; } .lampe-pool--l, .lampe-pool--r { margin-left: -120px; } }
@media (prefers-reduced-motion: reduce) { .rack[data-licht="wechsel"] .lampen-kegel { animation: none !important; } }

/* Fassung 19, Ports: nur Rackbereiche; 19"-Geräte zuerst und hervorgehoben (Estebans Wort 03.10.2026) */
.rack .patch__ports, .km__mitte { grid-template-columns: repeat(var(--ports, 11), minmax(0, 1fr)); }
@media (max-width: 1199px) { .rack .patch__ports { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rack .patch__ports { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mth button.port.port--hervor { background: linear-gradient(180deg, rgba(255, 196, 120, .14), rgba(0, 0, 0, .12)), #2e2620; box-shadow: inset 0 0 0 1px rgba(255, 196, 120, .45); }
.mth button.port.port--hervor .port__name { color: #ffd9a8; font-weight: 700; }
.mth button.port.port--hervor .port__nr::after { content: "★"; margin-left: 3px; color: #ffc478; }
.mv__alle--still { margin: 0; cursor: default; }

/* =====================================================================
   Fassung 19, Show (03.10.2026): Lichtmaschine im Skript (Pan und Tilt mit Beschleunigung wie echte Köpfe, Zoom,
   Farbmischung, Intensitätskurve, Szenenprogramme), Dunst, Lichtflecken mit Gobo, Kamerabild im DMX-Pult.
   ===================================================================== */
.mth[data-strobe] .mh__strahl, .mth[data-strobe] .mh__kopf::after { animation: none !important; } /* Strobe macht die Lichtmaschine, höchstens 8 Hz */
.mh { --mhc: hsl(32 70% 66%); --mhk: hsl(32 70% 86%); }
.mh__kopf { rotate: 0deg; }
.mh__kopf::after { background: var(--mhk); box-shadow: 0 0 9px 3px var(--mhc); opacity: var(--mhi, .8); }
.mh__strahl { height: 466px; rotate: 0deg; scale: 1 .78; opacity: .8; will-change: transform, opacity;
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--mhc) 32%, transparent) 8deg, color-mix(in srgb, var(--mhc) 48%, transparent) 12deg, color-mix(in srgb, var(--mhc) 32%, transparent) 16deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 55%, transparent 100%); }
.mh__strahl::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 174deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--mhk) 18%, transparent) 2.5deg, color-mix(in srgb, var(--mhk) 40%, transparent) 5deg, color-mix(in srgb, var(--mhk) 40%, transparent) 7deg, color-mix(in srgb, var(--mhk) 18%, transparent) 9.5deg, transparent 12deg); } /* Kern ohne harte Kante */
.mh__fleck { position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mhk) 70%, transparent), color-mix(in srgb, var(--mhc) 35%, transparent) 55%, transparent); overflow: hidden; }
.mh__fleck b { position: absolute; inset: 0; border-radius: 50%; opacity: var(--gobo, 0);
  background: repeating-conic-gradient(from 0deg, rgba(0, 0, 0, .55) 0 14deg, transparent 14deg 30deg), radial-gradient(closest-side, transparent 30%, rgba(0, 0, 0, .5) 31% 36%, transparent 37%); }
.buehne-dunst { position: absolute; left: 0; right: 0; top: 0; height: 610px; z-index: 1; pointer-events: none; opacity: var(--dunst, .2);
  background: radial-gradient(60% 40% at 30% 30%, rgba(255, 240, 230, .09), transparent 70%), radial-gradient(50% 35% at 75% 45%, rgba(255, 240, 230, .07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='233' height='233'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .92 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, auto, 610px 610px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 55%, transparent); mask-image: linear-gradient(180deg, transparent, #000 13%, #000 55%, transparent); }
@media (max-width: 640px) { .buehne-dunst { height: 377px; } .mh__strahl { height: 288px; } }
/* DMX-Pult: Kopf mit Anzeige und Shoplink, Kamerabild, Fader, Szenen */
.dmx { grid-template-columns: auto auto auto minmax(0, 1fr); }
.dmx__kopf { display: flex; flex-direction: column; gap: 8px; }
.dmx__kopf .dmx__shop { align-self: stretch; }
.dmx__szenen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dmx__cam { position: relative; margin: 0; width: 220px; aspect-ratio: 16 / 9; border-radius: 4px; padding: 3px; background: #050303;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #2e2624, inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 13px rgba(0, 0, 0, .5); }
.dmx__cam canvas { display: block; width: 100%; height: 100%; border-radius: 2px; background: #000; }
.cam__leiste { position: absolute; left: 3px; right: 3px; top: 3px; display: flex; gap: 8px; align-items: center; padding: 2px 5px; font-family: var(--f-mess); font-size: 8px; font-weight: 700; letter-spacing: .08em; color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent); }
.cam__tally { display: inline-flex; align-items: center; gap: 3px; }
.cam__tally i { width: 6px; height: 6px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 5px #ff2a2a; }
.cam__tc { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { .dmx { grid-template-columns: auto auto; } .dmx__szenen { grid-column: 1 / -1; } }
@media (max-width: 640px) { .dmx { grid-template-columns: 1fr; } .dmx__cam { width: 100%; } .dmx__szenen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aufhaengung { transform-origin: 50% 100%; rotate: calc(-1 * var(--neigung, 0deg)); transition: inherit; } /* Abhängung bleibt senkrecht, der Bügel schwenkt */
/* Gobo hellt nur auf, nie ab: dunkle Speichen über Text waren schlecht lesbar (Fassung 19 Nachbesserung) */
.mh__fleck { background: none; }
.mh__fleck::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: calc(1 - .85 * var(--gobo, 0));
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mhk) 70%, transparent), color-mix(in srgb, var(--mhc) 35%, transparent) 55%, transparent); }
.mh__fleck b { opacity: var(--gobo, 0); background: radial-gradient(closest-side, color-mix(in srgb, var(--mhk) 80%, transparent), color-mix(in srgb, var(--mhc) 40%, transparent) 60%, transparent);
  -webkit-mask-image: repeating-conic-gradient(#000 0 16deg, transparent 16deg 30deg); mask-image: repeating-conic-gradient(#000 0 16deg, transparent 16deg 30deg); }
/* Fassung 19, Kacheln zurück zum Originalbild (Estebans Wort 03.10.2026): kein Freistellen, kein Studiohintergrund; der Bildbereich hat
   die Randfarbe des Bildes, so entsteht weder Rahmen noch Kasten im Kasten. object-fit contain, kein Beschnitt. */
.mth a.kachel .kachel__bild { background: var(--kachel-grund, #fff); }
.mth a.kachel .kachel__bild img { object-fit: contain; }
/* =====================================================================
   Fassung 19, Nachbesserung (03.10.2026)
   ===================================================================== */
/* Moving Heads: echte Linse im Kopf; Strahl und Lichtfleck setzt das Skript genau in deren Mitte (gleiche Drehung wie der Kopf) */
.mh__kopf::after { content: none; }
.mh__linse { position: absolute; left: 3px; right: 3px; bottom: -2px; height: 5px; border-radius: 50%; background: var(--mhk); box-shadow: 0 0 9px 3px var(--mhc); opacity: var(--mhi, .8); }
.mth .mh:not(.mh--aus) { display: block !important; }
.mth .mh.mh--aus { display: none !important; }
/* Anzeigen mit fester Breite (Fibonacci), Text wird gekürzt, nichts daneben verschiebt sich */
.dmx { grid-template-columns: 233px 220px max-content minmax(0, 1fr); }
.dmx__kopf { width: 233px; }
.dmx__lcd { width: 233px; min-width: 0; box-sizing: border-box; overflow: hidden; }
.dmx__lcd span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 1199px) { .dmx { grid-template-columns: 233px 220px; } .dmx__fader { grid-column: 1 / -1; } }
@media (max-width: 640px) { .dmx { grid-template-columns: minmax(0, 1fr); } .dmx__kopf, .dmx__lcd { width: 100%; } }
.mv__leiste { display: grid; grid-template-columns: 8px 233px minmax(0, 1fr) max-content; }
.mv__quelle { width: 233px; min-width: 0; }
.mv__tc { margin-left: 0; justify-self: end; }
@media (max-width: 1080px) { .mv__leiste { grid-template-columns: 8px 233px minmax(0, 1fr); } }
@media (max-width: 640px) { .mv__leiste { grid-template-columns: 8px minmax(0, 1fr); } .mv__quelle { width: auto; } }
.feld--knopf .lcd, .lcd--pan { width: 62px; min-width: 0; box-sizing: border-box; overflow: hidden; }
@media (min-width: 641px) { .leuchte__feld { display: grid; grid-template-columns: max-content max-content max-content; justify-content: start; } }
.mh .mh__strahl { z-index: 1; } /* Strahl über dem Kopf: die Spitze liegt sichtbar in der Linsenmitte (Estebans Wort: Kegel neben den Lampen) */
/* Bühne beginnt im Shop unter Kopf und Menü (Fassung 19b): die Hero wird ab 1200 px nicht mehr unter die Navigation gezogen,
   sonst liegt die Menüleiste über der Truss. Am Shop-Menü selbst ändert sich nichts. */
@media (min-width: 1200px) {
  body.page-template-template-homepage-v3 .mt-homepage-v3 section.mt-section.mth { margin-top: 0; padding-top: 144px; }
}
/* Portnamen: an Silbengrenzen trennen statt in die Zahl zu laufen oder mitten im Wort zu brechen (390 px: Patch-panels, Rack-schränke) */
.mth .port__name { hyphens: auto; -webkit-hyphens: auto; min-width: 0; }
/* =====================================================================
   Fassung 19b, Tempo (04.10.2026). Optik gleich, weniger Arbeit für den Browser:
   - Endlosanimationen stehen still, bis die Seite geladen ist (Klasse mth--los, gesetzt nach load im Leerlauf)
     und solange ihr Bereich nicht im Bild ist (data-ruhe, per IntersectionObserver).
   - Staub und Flocken wandern per transform (je Ebene ein Element, genau ein Kachelmass je Umlauf wie vorher).
   - Köpfe und Spot werden per transform an Gurt und Raster gerückt, nicht per top/left (kein Layoutsprung).
   ===================================================================== */
.mth:not(.mth--los) *, .mth:not(.mth--los) *::before, .mth:not(.mth--los) *::after,
.mth [data-ruhe] *, .mth [data-ruhe] *::before, .mth [data-ruhe] *::after { animation-play-state: paused !important; }
.mth__spot .staub { background: none; animation: none; overflow: hidden; }
.mth__spot .staub i, .instr-klima .flocken i { position: absolute; left: calc(-1 * var(--g)); top: calc(-1 * var(--g)); width: calc(100% + 2 * var(--g)); height: calc(100% + 2 * var(--g));
  background-size: var(--g) var(--g); will-change: transform; } /* je Ebene eigene Keyframes ohne Variablen: nur so rechnet der Compositor sie */
.mth__spot .staub i:nth-child(1) { --g: 89px; --dx: 13px; --dy: 89px; background-image: radial-gradient(1.2px 1.2px at 20% 30%, #fff8ec 50%, transparent 51%); }
.mth__spot .staub i:nth-child(2) { --g: 144px; --dx: -8px; --dy: 144px; background-image: radial-gradient(1px 1px at 70% 10%, #fff3e0 50%, transparent 51%); }
.mth__spot .staub i:nth-child(3) { --g: 110px; --dx: 5px; --dy: 110px; background-image: radial-gradient(1.4px 1.4px at 45% 70%, #fffaf2 50%, transparent 51%); }
.mth__spot .staub i:nth-child(4) { --g: 72px; --dx: -5px; --dy: 144px; background-image: radial-gradient(1px 1px at 85% 55%, #ffeedd 50%, transparent 51%); }
.mth__spot .staub i:nth-child(5) { --g: 130px; --dx: 8px; --dy: 130px; background-image: radial-gradient(1.2px 1.2px at 35% 90%, #fff8ec 50%, transparent 51%); }
.mth__spot .staub i:nth-child(6) { --g: 55px; --dx: 0px; --dy: 110px; background-image: radial-gradient(1px 1px at 60% 45%, #fff 50%, transparent 51%); }
.instr-klima .flocken { background: none; animation: none; overflow: hidden; }
.instr-klima .flocken i { --t: 13s; }
.instr-klima .flocken i:nth-child(1) { --g: 55px; --dx: 13px; --dy: 89px; background-image: radial-gradient(1.4px 1.4px at 20% 20%, #e6f8ff 50%, transparent 51%); }
.instr-klima .flocken i:nth-child(2) { --g: 89px; --dx: -8px; --dy: 144px; background-image: radial-gradient(1px 1px at 70% 40%, #e6f8ff 50%, transparent 51%); }
.instr-klima .flocken i:nth-child(3) { --g: 72px; --dx: 5px; --dy: 110px; background-image: radial-gradient(1.2px 1.2px at 40% 80%, #e6f8ff 50%, transparent 51%); }
.mh { transform: translate(var(--mh-dx, 0px), var(--mh-dy, 0px)); }
.mth__spot { transform: translateY(var(--spot-hub, 0px)); }
.mth__spot .kegel { height: calc(100% - 89px - var(--spot-hub, 0px)); }
@media (prefers-reduced-motion: reduce) { .mth__spot .staub i, .instr-klima .flocken i { animation: none !important; } }
/* Strahl liegt per translate an der Linse (Skript), Grundlage oben links im Kopfkasten; ohne Skript wie bisher mittig unter dem Kopf */
.mh .mh__strahl { left: 0; top: 0; translate: calc(-50% + 17px) 34px; }
/* Strahlen erst zeigen, wenn das Skript sie an die Linse gesetzt hat (sonst springen sie beim Laden: Layoutverschiebung) */
.mth:not(.mth--licht) .mh__strahl { visibility: hidden; }
/* Einmalige Bewegungen (Auftritt der Überschrift, Glanz auf dem Angebot, Stecker, Kabel, Kachelwechsel, Flackern beim Schwenk)
   laufen immer gleich ab, auch vor dem Laden und ausserhalb des Bildes; angehalten werden nur die Endlosanimationen. */
.mth .mth h1 .z, .mth h1 .z, .mth .mth__deal.ist-an::after, .mth a.welt, .mth .mth__spot .kegel, .mth .mth__spot .kopf::after,
.mth .port .port__kabel, .mth .patch__tafel .kachel, .mth .port .port__stecker { animation-play-state: running !important; }
@keyframes mth-staub-s1 { from { transform: translate(0, 0); } to { transform: translate(13px, 89px); } }
@keyframes mth-staub-s2 { from { transform: translate(0, 0); } to { transform: translate(-8px, 144px); } }
@keyframes mth-staub-s3 { from { transform: translate(0, 0); } to { transform: translate(5px, 110px); } }
@keyframes mth-staub-s4 { from { transform: translate(0, 0); } to { transform: translate(-5px, 144px); } }
@keyframes mth-staub-s5 { from { transform: translate(0, 0); } to { transform: translate(8px, 130px); } }
@keyframes mth-staub-s6 { from { transform: translate(0, 0); } to { transform: translate(0px, 110px); } }
@keyframes mth-staub-f1 { from { transform: translate(0, 0); } to { transform: translate(13px, 89px); } }
@keyframes mth-staub-f2 { from { transform: translate(0, 0); } to { transform: translate(-8px, 144px); } }
@keyframes mth-staub-f3 { from { transform: translate(0, 0); } to { transform: translate(5px, 110px); } }
.mth__spot .staub i:nth-child(1) { animation: mth-staub-s1 21s linear infinite; }
.mth__spot .staub i:nth-child(2) { animation: mth-staub-s2 21s linear infinite; }
.mth__spot .staub i:nth-child(3) { animation: mth-staub-s3 21s linear infinite; }
.mth__spot .staub i:nth-child(4) { animation: mth-staub-s4 21s linear infinite; }
.mth__spot .staub i:nth-child(5) { animation: mth-staub-s5 21s linear infinite; }
.mth__spot .staub i:nth-child(6) { animation: mth-staub-s6 21s linear infinite; }
.instr-klima .flocken i:nth-child(1) { animation: mth-staub-f1 13s linear infinite; }
.instr-klima .flocken i:nth-child(2) { animation: mth-staub-f2 13s linear infinite; }
.instr-klima .flocken i:nth-child(3) { animation: mth-staub-f3 13s linear infinite; }