/* dt.css — die Konsole und der Ablauf des Determinationstests.
   engine.css bleibt unangetastet: Test 1–3 laufen damit. */

.dt-konsole { max-width: min(98vw, 860px); margin: 0 auto 16px; }
.dt-konsole--gesperrt { pointer-events: none; opacity: .96; }

/* --- Reizbildschirm oben ---
   Ein DUNKLES Feld mit allen Reiz-Laempchen (Martins Skizze). Aus sind sie fast schwarz;
   der aktive Reiz leuchtet in seiner Farbe auf. So sieht man, WO der Reiz kommt, nicht nur
   eine einzelne Lampe in der Mitte. */
.dt-display {
  position: relative;
  background: #2b3138;
  border-radius: 12px;
  padding: 22px 24px;
  margin: 0 0 14px;
  /* unten buendig: Pedale und Gitter teilen sich die untere Kante (Martin, 21.07.). */
  display: flex; gap: 22px; align-items: flex-end; justify-content: center;
}
/* Zwei Reihen zu je fuenf Laempchen. */
.dt-reizgrid { display: flex; flex-direction: column; gap: 18px; }
.dt-reizrow { display: flex; gap: 20px; align-items: center; }

/* Ein Laempchen: aus = dunkel, an = leuchtet in --an (mit Schein). 30 % groesser (52 px). */
.dt-lamp {
  width: 52px; height: 52px; border-radius: 50%;
  background: #171b20;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55);
}
.dt-lamp--an {
  background: var(--an, #f4f4f4);
  box-shadow: 0 0 18px 5px var(--an, #f4f4f4), inset 0 1px 2px rgba(255,255,255,.45);
}
/* Pedallichter links und rechts, unten buendig mit der unteren Reihe, etwas groesser. */
.dt-lamp-pedal { width: 42px; height: 96px; border-radius: 10px; }

.dt-display-text {
  position: absolute; bottom: 4px; width: 100%; text-align: center;
  font-size: 12px; color: #8b97a6;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Countdown 3 - 2 - 1 - Los! mittig ÜBER dem Reizfeld. Aus, solange leer. */
.dt-countdown {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  font: 700 68px/1 Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #f4f4f4; text-shadow: 0 3px 14px rgba(0,0,0,.55);
  letter-spacing: 1px; pointer-events: none;
}
.dt-countdown--an { display: flex; }

/* --- Mittelreihe: Pedal | Tafel | Pedal --- */
.dt-reihe {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}

/* Die Tafel - WEISS wie die echte Schuhfried-Konsole (Martins Screenshot). Leicht
   abgerundet, dezenter Schatten, damit sie wie ein Geraet und nicht wie eine Webseite
   wirkt. */
.dt-tafel {
  position: relative;
  flex: 1 1 auto;
  background: #fbfbfb;
  border: 1px solid #e3e6ea;
  border-radius: 30px / 40px;      /* organisch, wie das Gehaeuse */
  box-shadow: 0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 #fff;
}

/* Unser Logo oben rechts in der Ecke der Tafel. Klein. */
.dt-logo {
  position: absolute; top: 10px; right: 14px; z-index: 2;
  height: 15px; width: auto; opacity: .92;
  pointer-events: none; user-select: none;
}

/* Die Flaeche haelt den Bogen ueber ein festes Seitenverhaeltnis - so bleiben die
   Positionen auf jeder Breite gleich. */
.dt-flaeche { position: relative; width: 100%; aspect-ratio: 8 / 5; }
.dt-pos { position: absolute; transform: translate(-50%, -50%); }

/* Die Farbtasten - kraeftige, glaenzende Knoepfe wie am Geraet. Der weisse Lichtpunkt oben
   ist bewusst dezent (frueher wusch er die Farbe aus, sodass die Tasten fast weiss wirkten -
   Martin, 21.07.); die Farbe bleibt jetzt satt. */
.dt-taste {
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  box-shadow: 0 3px 6px rgba(0,0,0,.30),
              inset 0 4px 7px rgba(255,255,255,.22),
              inset 0 -5px 9px rgba(0,0,0,.24);
  touch-action: manipulation;
  transition: filter .06s;
}
/* Der weisse Knopf braucht einen sichtbaren Ring, sonst verschwindet er auf der hellen
   Konsole - genau wie im Original, wo er einen grauen Rand hat. */
.dt-taste--rand {
  box-shadow: 0 0 0 2px #b6bdc5, 0 3px 6px rgba(0,0,0,.22),
              inset 0 -4px 8px rgba(0,0,0,.10);
}
/* Normaler Tastendruck: kurz etwas dunkler, kein Schrumpfen, kein Aufblitzen
   (Martin, 21.07.). Gilt fuer Farbtasten und Tonbalken gleich. */
.dt-taste:active, .dt-taste--echo { filter: brightness(.88); }
.dt-taste:focus-visible { outline: 3px solid #e8730c; outline-offset: 3px; }

/* Tontasten: zwei Balken uebereinander in der Mitte. Wie im Original ist der obere HELLER
   (hoher Ton) und der untere DUNKLER (tiefer Ton) - so sieht man den Unterschied auch ohne
   Ton. */
.dt-toene { display: flex; flex-direction: column; gap: 9px; }
.dt-ton {
  width: 82px; height: 22px; border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.14), 0 2px 4px rgba(0,0,0,.22);
}
.dt-ton[data-id="hoch"] { background: #6b7682; }   /* heller = hoher Ton */
.dt-ton[data-id="tief"] { background: #262d35; }   /* dunkler = tiefer Ton */

/* Die Beschriftung IN den Tasten steht nur in der Uebungsphase - im Test sind die Tasten
   unbeschriftet, wie am echten Geraet (Martin, 21.07.). Die aria-label bleibt fuer
   Screenreader immer erhalten. */
.dt-ton::after {
  content: attr(aria-label);
  display: none;
  font-size: 10px; line-height: 24px; text-align: center; font-family: Inter, sans-serif;
}
.dt-ton[data-id="hoch"]::after { color: #1c222a; }
.dt-ton[data-id="tief"]::after { color: #cbd3db; }
.dt-konsole--uebung .dt-ton::after { display: block; }

/* Die Zahlentasten - einzeln positioniert (ueber .dt-pos), Attrappe wie am Universal-Panel.
   Kleine dunkle Kreise mit weisser Ziffer, nicht anklickbar. */
.dt-zahl {
  width: 20px; height: 20px; border-radius: 50%;
  background: #1c222a; color: #eef1f4;
  font: 600 10.5px/20px Inter, sans-serif; text-align: center;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.15);
}
.dt-zahl--sonder { background: #e8a41c; }

/* Pedale links und rechts neben der Tafel (Martins Anordnung). Fusstasten: hoch, gerundet.
   Mit deutlichem Rand, damit sie kraeftiger wirken (Martin, 21.07.). */
.dt-pedal {
  align-self: stretch;
  width: 64px; min-height: 150px; border-radius: 16px;
  background: linear-gradient(180deg, #dfe3e8, #bcc3cb);
  border: 2px solid #9aa3ac;
  box-shadow: 0 4px 8px rgba(0,0,0,.26), inset 0 2px 3px rgba(255,255,255,.5);
}
/* Auch die Pedalbeschriftung nur in der Uebung - im Test unbeschriftet. */
.dt-pedal::after {
  content: attr(aria-label);
  display: none; font-size: 11px; color: #47525d; padding: 10px 4px 0;
  text-align: center; font-family: Inter, sans-serif; line-height: 1.25;
}
.dt-konsole--uebung .dt-pedal::after { display: block; }

/* --- Laufanzeige waehrend des Tests --- */
.dt-lauf {
  display: flex; justify-content: space-between; gap: 12px;
  max-width: min(96vw, 720px); margin: 0 auto 10px;
  font-size: 14px; color: #5d6b78;
  font-variant-numeric: tabular-nums;
}
.dt-lauf b { color: #1f3a4d; }

/* --- Regel- und Ergebnisbausteine --- */
.dt-regelkasten {
  border-left: 3px solid #1f6feb; background: #f5f8fd;
  border-radius: 0 8px 8px 0; padding: 12px 14px; margin: 16px 0;
}
.dt-regelkasten strong { display: block; margin: 8px 0 6px; }
.dt-regelkasten p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.dt-regelkasten p:last-child { margin-bottom: 0; }

.dt-kennzahlen { margin: 0 0 18px; border-top: 1px solid #e3e8ee; }
.dt-kennzahlen p {
  display: flex; justify-content: space-between; gap: 12px; margin: 0;
  padding: 8px 2px; border-bottom: 1px solid #f0f3f6; font-size: 14px;
}
.dt-kennzahlen b { font-variant-numeric: tabular-nums; }

.dt-laengen { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 18px; }
@media (min-width: 520px) { .dt-laengen { grid-template-columns: repeat(3, 1fr); } }
.dt-wahl { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dt-wahl .lt-knopf { width: 100%; }
.dt-wahl small { color: #6b7787; font-size: 12px; }

/* Die Rueckmeldezeile in der Uebung - laeuft fortlaufend, ohne Bestaetigen. */
.dt-feedback {
  text-align: center; font-size: 14px; margin: 8px 0 4px; min-height: 20px;
  color: #5d6b78;
}
.dt-feedback--gut { color: #2f7d4f; font-weight: 600; }
.dt-feedback--daneben { color: #c0392b; font-weight: 600; }
/* 3 – 2 – 1 – Los! vor dem ersten Reiz: gross und ruhig, damit klar ist, wann es losgeht. */
.dt-feedback--count { font-size: 44px; font-weight: 700; color: #1f3a4d; min-height: 52px; }

/* Uebungs-Kenntlichmachung wie bei Test 3 */
.dt-uebungsband {
  background: #2f9e44; color: #fff; border-radius: 6px; padding: 9px 14px;
  margin: 0 0 14px; font-size: 14px; text-align: center; line-height: 1.4;
}
.dt-uebungsband strong { font-weight: 700; }

/* --- Signal-Übersicht auf dem ersten Schirm --- */
.dt-signale { margin: 6px 0 4px; }
/* Kopfhörer-Hinweis: gelb abgesetzt, damit er auffällt - ohne Ton fehlen zwei Reize. */
.dt-kopfhoerer {
  background: #fff8e6; border-left: 3px solid #e8a41c; border-radius: 0 8px 8px 0;
  padding: 11px 14px; margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #5d4b1f;
}
.dt-kopfhoerer strong { color: #7a5c12; }
.dt-legende { display: flex; flex-direction: column; gap: 12px; }
.dt-legende-zeile { display: flex; align-items: flex-start; gap: 12px; }
.dt-legende-ikon {
  font-size: 20px; line-height: 1.35; flex: 0 0 auto; width: 26px; text-align: center;
}
.dt-legende-block { display: flex; flex-direction: column; gap: 8px; }
.dt-legende-text { font-size: 14px; line-height: 1.5; color: #3d4854; }
.dt-swatches { display: flex; gap: 5px; flex: 0 0 auto; align-items: center; padding-top: 1px; }
.dt-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.dt-swatch--rand { box-shadow: 0 0 0 1px #b6bdc5 inset; }
.dt-probehoer { display: flex; flex-wrap: wrap; gap: 8px; }
/* Die Probehör-Knöpfe: klein und inline, NICHT die breiten lt-knopf-Balken. */
.dt-probehoer .dt-probe-knopf {
  width: auto; display: inline-flex; align-items: center; margin: 0;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  background: #eef2f7; color: #1f3a4d; border: 1px solid #cfd8e2;
  border-radius: 8px; box-shadow: none;
}
.dt-probehoer .dt-probe-knopf:hover { background: #e4eaf1; }
.dt-probehoer .dt-probe-knopf:active { filter: brightness(.96); }

@media (max-width: 520px) {
  .dt-reihe { gap: 6px; }
  .dt-tafel { padding: 14px 12px; }
  .dt-taste { width: 46px; height: 46px; }
  .dt-pedal { width: 40px; height: 78px; }
  .dt-ton { width: 58px; }
}