/* =====================================================================
   dj-verbindungstest.css — „Verbindung testen“ im DJ-Bereich (27.09.2026)
   Gilt nur unter .djvt. Radien 3/4/6 px, keine Kapseln, Magenta nur für
   LIVE/ON AIR, Cyan = Signal/Fokus, Gelb = Hinweis, Rot = Übersteuerung.
   ===================================================================== */
.djvt { display: grid; gap: 18px; margin-bottom: 18px; }
.djvt__kopf { display: grid; gap: 0; }
.djvt__raster { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
@media (max-width: 960px) {
  .djvt__raster { grid-template-columns: minmax(0, 1fr); }
  /* Handy: Sobald der Test läuft, steht die Anzeige oben – der DJ soll nicht scrollen müssen */
  .djvt-anzeige:not([data-zustand="aus"]) { order: -1; }
}
.djvt .djvt-schritte { grid-template-columns: minmax(0, 1fr); }
.djvt .djvt-schritte > li:last-child .dj-3schritte__nr { background: var(--ru-cyan); }
.djvt-frei { color: var(--ru-cyan); }
.djvt-zugang > div { grid-template-columns: 96px minmax(0, 1fr) auto; }
.djvt-zugang dd.djvt-wie { font: 500 13px/1.4 var(--ru-f-text); color: var(--ru-paper-70); }

/* Anzeige */
.djvt-anzeige { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 18px; border: 1px solid var(--ru-line-2);
  border-radius: var(--ru-r-2); background: rgba(13,10,31,.55); transition: border-color .3s, box-shadow .3s; }
.djvt-anzeige[data-zustand="signal"] { border-color: var(--ru-cyan); box-shadow: inset 3px 0 0 var(--ru-cyan); }
.djvt-anzeige[data-zustand="stille"], .djvt-anzeige[data-zustand="verloren"] { border-color: var(--dj-gelb); box-shadow: inset 3px 0 0 var(--dj-gelb); }
.djvt-anzeige[data-zustand="abgelehnt"] { border-color: var(--dj-rot); box-shadow: inset 3px 0 0 var(--dj-rot); }
.djvt-slotwarn { margin: 0; }

/* Ampel */
.djvt-ampel { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; }
.djvt-ampel__licht { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ru-r-1);
  border: 1.5px solid var(--ru-line); }
.djvt-ampel__licht i { width: 14px; height: 14px; border-radius: 50%; background: var(--ru-paper-50); }
.djvt-ampel__titel { font: 900 clamp(20px, 2.2vw, 26px)/1.05 var(--ru-f-disp); text-transform: uppercase; letter-spacing: -.02em; overflow-wrap: anywhere; }
.djvt-ampel .dj-text { margin-top: 4px !important; }
[data-zustand="wartet"] .djvt-ampel__licht, [data-zustand="verbunden"] .djvt-ampel__licht { border-color: var(--ru-cyan); }
[data-zustand="wartet"] .djvt-ampel__licht i, [data-zustand="verbunden"] .djvt-ampel__licht i { background: var(--ru-cyan); animation: djvt-puls 1.4s ease-in-out infinite; }
[data-zustand="signal"] .djvt-ampel__licht { background: var(--ru-cyan); border-color: var(--ru-cyan); }
[data-zustand="signal"] .djvt-ampel__licht i { width: 18px; height: 10px; border-radius: 0; background: none; border: solid var(--ru-ink); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
[data-zustand="signal"] .djvt-ampel__titel { color: var(--ru-cyan); }
[data-zustand="stille"] .djvt-ampel__licht, [data-zustand="verloren"] .djvt-ampel__licht { border-color: var(--dj-gelb); }
[data-zustand="stille"] .djvt-ampel__licht i, [data-zustand="verloren"] .djvt-ampel__licht i { background: var(--dj-gelb); }
[data-zustand="stille"] .djvt-ampel__titel, [data-zustand="verloren"] .djvt-ampel__titel { color: var(--dj-gelb); }
[data-zustand="abgelehnt"] .djvt-ampel__licht { border-color: var(--dj-rot); }
[data-zustand="abgelehnt"] .djvt-ampel__licht i { background: var(--dj-rot); }
[data-zustand="abgelehnt"] .djvt-ampel__titel { color: var(--dj-rot); }
@keyframes djvt-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .djvt-ampel__licht i { animation: none !important; } }

.djvt-format { font: 600 12px/1.5 var(--ru-f-mono); letter-spacing: .04em; color: var(--ru-paper); background: rgba(245,239,230,.06);
  border-radius: 3px; padding: 7px 10px; overflow-wrap: anywhere; }

/* Pegel L/R: −60 … 0 dBFS. Unterer Balken = RMS (kräftig), dahinter Spitze (blass), Strich = Spitzenhaltung */
.djvt-meter { display: grid; gap: 6px; }
.djvt-meter__kanaele { display: grid; gap: 8px; }
.djvt-kanal { display: grid; grid-template-columns: 16px minmax(0, 1fr) 54px; gap: 10px; align-items: center; }
.djvt-kanal__name { font: 700 11px/1 var(--ru-f-mono); color: var(--ru-paper-70); }
.djvt-kanal__wert { font: 600 12px/1 var(--ru-f-mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--ru-paper); }
.djvt-balken { position: relative; height: 22px; border-radius: 3px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(60% - 1px), rgba(245,239,230,.22) calc(60% - 1px) 60%, transparent 60%),
    linear-gradient(90deg, transparent calc(98.333% - 1px), rgba(255,77,46,.5) calc(98.333% - 1px) 98.333%, transparent 98.333%),
    rgba(245,239,230,.07); }
.djvt-balken > i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; clip-path: inset(0 100% 0 0); transition: clip-path .09s linear; }
/* Farbverlauf über die feste Skala: bis −24 gedämpft, −24…−6 Cyan, −6…−1 Gelb, darüber Rot */
.djvt-balken__rms, .djvt-balken__spitze {
  background: linear-gradient(90deg, rgba(0,229,255,.45) 0 60%, var(--ru-cyan) 60% 90%, var(--dj-gelb) 90% 98.333%, var(--dj-rot) 98.333%);
  background-size: 100% 100%; }
.djvt-balken__spitze { opacity: .35; }
.djvt-balken__rms { top: 4px !important; bottom: 4px !important; }
.djvt-balken__halt { width: 3px !important; clip-path: none !important; left: 0; margin-left: -1.5px; background: var(--ru-paper); transition: left .09s linear !important; }
.djvt-balken__halt.rot { background: var(--dj-rot); }
.djvt-skala { position: relative; height: 14px; margin: 0 64px 0 26px; font: 500 10px/1 var(--ru-f-mono); color: var(--ru-paper-50); }
.djvt-skala span { position: absolute; left: var(--p); transform: translateX(-50%); white-space: nowrap; }
.djvt-skala span:first-child { transform: none; }
.djvt-skala span:last-child { transform: translateX(-100%); }
@media (max-width: 560px) {
  .djvt-skala span:nth-child(2), .djvt-skala span:nth-child(5) { display: none; }
  .djvt-kanal { grid-template-columns: 14px minmax(0, 1fr) 48px; gap: 8px; }
  .djvt-skala { margin: 0 56px 0 22px; }
}

/* Ansage zum Pegel */
.djvt-urteil { border-left: 3px solid var(--ru-cyan); padding: 4px 0 4px 12px; display: grid; gap: 4px; }
.djvt-urteil__titel { font: 800 15px/1.35 var(--ru-f-text); color: var(--ru-paper); overflow-wrap: anywhere; }
.djvt-urteil[data-pegel="gut"] { border-left-color: var(--ru-cyan); }
.djvt-urteil[data-pegel="gut"] .djvt-urteil__titel { color: var(--ru-cyan); }
.djvt-urteil[data-pegel="leise"], .djvt-urteil[data-pegel="laut"], .djvt-urteil[data-pegel="stille"] { border-left-color: var(--dj-gelb); }
.djvt-urteil[data-pegel="leise"] .djvt-urteil__titel, .djvt-urteil[data-pegel="laut"] .djvt-urteil__titel, .djvt-urteil[data-pegel="stille"] .djvt-urteil__titel { color: var(--dj-gelb); }
.djvt-urteil[data-pegel="clip"] { border-left-color: var(--dj-rot); }
.djvt-urteil[data-pegel="clip"] .djvt-urteil__titel { color: var(--dj-rot); }

/* ON AIR im eigenen Slot */
.djvt-onair { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--ru-line); border-radius: var(--ru-r-2); background: var(--dj-flaeche-2); }
.djvt-onair__kopf { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: center; }
.djvt-onair__punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--ru-paper-50); }
.djvt-onair__titel { font: 900 clamp(22px, 2.6vw, 32px)/1 var(--ru-f-disp); text-transform: uppercase; letter-spacing: -.02em; overflow-wrap: anywhere; }
.djvt-onair[data-zustand="ja"] { border-color: var(--ru-magenta); box-shadow: inset 3px 0 0 var(--ru-magenta), 0 0 0 1px var(--ru-magenta);
  background: linear-gradient(135deg, rgba(255,43,214,.16), rgba(26,20,64,.55) 60%); }
.djvt-onair[data-zustand="ja"] .djvt-onair__punkt { background: var(--ru-magenta); animation: djvt-puls 1.4s ease-in-out infinite; }
.djvt-onair[data-zustand="ja"] .djvt-onair__titel { color: var(--ru-magenta); }
.djvt-onair[data-zustand="nein"], .djvt-onair[data-zustand="andere"] { border-color: var(--dj-gelb); box-shadow: inset 3px 0 0 var(--dj-gelb); }
.djvt-onair[data-zustand="nein"] .djvt-onair__punkt, .djvt-onair[data-zustand="andere"] .djvt-onair__punkt { background: var(--dj-gelb); }
.djvt-meter--klein .djvt-balken { height: 14px; }
.djvt-meter--klein .djvt-balken__rms { top: 3px !important; bottom: 3px !important; }

/* Anleitungen */
.djvt .djvt-anl { margin-top: 0; }
.djvt.ist-signal { border-color: var(--ru-cyan); }