/* ═══════════════════════════════════════════════
   Online-Hörtest & Hörverlust-Simulator
   ═══════════════════════════════════════════════ */

/* ── TOOL-RAHMEN (Test & Simulator) ── */
.tool-section { background: var(--dark); }
.tool-frame {
  background: var(--darker);
  border: 1px solid rgba(209,175,52,0.18);
  margin-top: 3rem;
  position: relative;
  min-height: 560px;
  display: flex; flex-direction: column;
}
.tool-stepper { display: flex; align-items: flex-start; padding: 1.8rem 2.4rem 0; }
.tool-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 70px; }
.tool-step-dot {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(232,226,216,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: rgba(232,226,216,0.45);
  transition: all 0.3s;
}
.tool-step-name { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,226,216,0.35); text-align: center; }
.tool-step-line { flex: 1; height: 1px; background: rgba(232,226,216,0.15); margin-top: 17px; max-width: 90px; transition: background 0.3s; }
.tool-step.aktiv .tool-step-dot { border-color: var(--gold-1); color: var(--gold-1); }
.tool-step.aktiv .tool-step-name { color: var(--cream); }
.tool-step.fertig .tool-step-dot { background: var(--gold-grad); border-color: transparent; color: var(--darker); font-weight: 700; }
.tool-step.fertig + .tool-step-line { background: var(--gold-1); }

.tool-screen { display: none; flex: 1; padding: 3rem 3.5rem; }
.tool-screen.aktiv { display: flex; flex-direction: column; justify-content: center; animation: toolIn 0.45s ease; }
@keyframes toolIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tool-screen h3 { max-width: 760px; margin-left: auto; margin-right: auto; font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 300; line-height: 1.2; color: var(--cream); margin-bottom: 1.2rem; }
.tool-screen h3 em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tool-text { font-size: 1.02rem; line-height: 1.75; color: rgba(232,226,216,0.72); max-width: 640px; }
.tool-text + .tool-text { margin-top: 0.9rem; }
.tool-text strong { color: var(--cream); font-weight: 600; }
.tool-small { font-size: 0.82rem; line-height: 1.6; color: rgba(232,226,216,0.45); max-width: 640px; margin-top: 1.4rem; }
.tool-center { text-align: center; }
.tool-center .tool-text, .tool-center .tool-small { margin-left: auto; margin-right: auto; }
.tool-fakten { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; margin: 2.2rem 0 2.4rem; }
.tool-fakt { text-align: center; }
.tool-fakt b { display: block; font-size: 1.5rem; font-weight: 300; color: var(--gold-1); }
.tool-fakt span { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(232,226,216,0.5); }

.tool-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
.tool-checks { list-style: none; display: flex; flex-direction: column; gap: 1.6rem; }
.tool-checks li { display: grid; grid-template-columns: 44px 1fr; gap: 1.1rem; align-items: start; }
.tool-checks .nr {
  width: 38px; height: 38px; border-radius: 50%; background: var(--gold-grad); color: var(--darker);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem;
}
.tool-checks strong { color: var(--cream); font-weight: 600; display: block; margin-bottom: 0.2rem; }
.tool-checks span { font-size: 0.92rem; line-height: 1.6; color: rgba(232,226,216,0.65); }
.tool-mini-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }

.tool-btn {
  font-family: var(--serif); cursor: pointer;
  padding: 0.55rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--cream); border: 1px solid rgba(232,226,216,0.3);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.tool-btn:hover { border-color: var(--gold-1); color: var(--gold-1); }
.tool-btn.an { background: var(--gold-1); border-color: var(--gold-1); color: var(--darker); }
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
button.btn-primary, button.btn-ghost { font-family: var(--serif); cursor: pointer; text-transform: uppercase; }
button.btn-primary { border: none; }
button.btn-ghost { border: 1px solid rgba(232,226,216,0.4); background: transparent; }
button.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.tool-nav { display: flex; align-items: center; gap: 1rem; padding: 0 2.4rem 2rem; min-height: 3.4rem; }
.tool-nav .rechts { display: flex; gap: 0.8rem; margin-left: auto; }

/* Ohr-Intro */
.ohr-intro { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; max-width: 760px; margin: 0 auto; width: 100%; }
.ohr-intro .ueber { font-size: 0.85rem; color: rgba(232,226,216,0.55); margin-bottom: 0.6rem; }
.ohr-svg { width: 220px; height: auto; }
.ohr-svg.rechts { transform: scaleX(-1); }

/* Pegel-Regler */
.pegel { max-width: 680px; margin: 2.5rem auto 0; width: 100%; }
.pegel-kopf { display: flex; justify-content: center; align-items: center; gap: 0.7rem; font-size: 0.95rem; color: var(--cream); margin-bottom: 1.6rem; letter-spacing: 0.04em; }
.puls { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-1); opacity: 0.2; transition: opacity 0.08s; }
.puls.an { opacity: 1; box-shadow: 0 0 12px rgba(209,175,52,0.7); }
.pegel-zeile { display: grid; grid-template-columns: 52px 1fr 52px; gap: 1.2rem; align-items: center; }
.pegel-knopf {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(209,175,52,0.5);
  background: transparent; color: var(--gold-1); font-size: 1.6rem; line-height: 1; cursor: pointer; font-family: var(--serif);
  transition: background 0.2s, color 0.2s;
}
.pegel-knopf:hover { background: var(--gold-1); color: var(--darker); }
.pegel input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; }
.pegel input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--gold-1) var(--p,0%), rgba(232,226,216,0.15) var(--p,0%)); }
.pegel input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(232,226,216,0.15); }
.pegel input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--gold-1); }
.pegel input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); margin-top: -12px; box-shadow: 0 2px 10px rgba(0,0,0,0.4); border: 3px solid var(--gold-1); }
.pegel input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--cream); border: 3px solid var(--gold-1); }
.pegel-ticks { display: flex; justify-content: space-between; padding: 0.4rem 72px 0; font-size: 0.7rem; color: rgba(232,226,216,0.35); }
.pegel-nichts { display: block; margin: 1.8rem auto 0; background: none; border: none; color: rgba(232,226,216,0.5); font-family: var(--serif); font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pegel-nichts:hover { color: var(--gold-1); }
.pegel-fortschritt { text-align: center; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232,226,216,0.4); margin-top: 1.6rem; }
.pegel-fortschritt i { display: inline-block; width: 22px; height: 3px; margin: 0 2px; background: rgba(232,226,216,0.15); vertical-align: middle; }
.pegel-fortschritt i.ok { background: var(--gold-1); }

/* Ergebnis */
.erg-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 640px; margin: 2.2rem auto 0; width: 100%; }
.gauge { text-align: center; position: relative; }
.gauge svg { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
.gauge-text { position: absolute; left: 0; right: 0; bottom: 4%; }
.gauge-ohr { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(232,226,216,0.5); }
.gauge-wert { font-size: 1.1rem; font-weight: 600; color: var(--cream); margin-top: 0.2rem; }
.erg-audiogramm { max-width: 640px; margin: 2.4rem auto 0; width: 100%; }
.erg-audiogramm svg { width: 100%; height: auto; display: block; }
.erg-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; justify-content: center; font-size: 0.78rem; color: rgba(232,226,216,0.55); margin-top: 0.6rem; }
.erg-aktionen { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }

/* ── SIMULATOR ── */
.sim-kopf { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-end; justify-content: space-between; padding: 2rem 2.4rem 0; }
.sim-gruppe .label { margin-bottom: 0.7rem; }
.sim-profile { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim-buehne { padding: 2.2rem 2.4rem 2.4rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; flex: 1; }
.sim-tisch { position: relative; aspect-ratio: 16 / 11; max-width: 560px; width: 100%; margin: 0 auto; }
.sim-tisch-platte {
  position: absolute; left: 20%; right: 20%; top: 30%; bottom: 26%;
  border-radius: 50%; border: 1px solid rgba(209,175,52,0.25);
  background: radial-gradient(ellipse at center, rgba(209,175,52,0.08), transparent 70%);
}
.sim-person { position: absolute; text-align: center; width: 120px; transform: translate(-50%, -50%); transition: transform 0.3s; }
.sim-person .kreis {
  width: 64px; height: 64px; margin: 0 auto 0.5rem; border-radius: 50%;
  border: 1.5px solid rgba(232,226,216,0.25); display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: rgba(232,226,216,0.6); background: var(--dark); transition: all 0.3s;
}
.sim-person .name { font-size: 0.9rem; color: var(--cream); }
.sim-person .rolle { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,226,216,0.4); }
.sim-person.spricht .kreis { border-color: var(--gold-1); color: var(--darker); background: var(--gold-grad); box-shadow: 0 0 0 8px rgba(209,175,52,0.12), 0 0 30px rgba(209,175,52,0.35); }
.sim-person.spricht { transform: translate(-50%, -50%) scale(1.06); }
.sim-person.ich .kreis { border-style: dashed; border-color: rgba(209,175,52,0.6); color: var(--gold-1); }
.sim-untertitel { min-height: 5rem; margin-top: 1.4rem; text-align: center; font-size: 1.05rem; line-height: 1.6; color: var(--cream); font-style: italic; padding: 0 1rem; transition: opacity 0.3s; }
.sim-untertitel .wer { display: block; font-style: normal; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 0.3rem; }
.sim-untertitel.verborgen { visibility: hidden; }

.sim-schalter { display: flex; border: 1px solid rgba(209,175,52,0.4); width: 100%; }
.sim-schalter button {
  flex: 1; padding: 1.1rem 0.8rem; font-family: var(--serif); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; border: none; color: rgba(232,226,216,0.6); cursor: pointer; transition: all 0.25s;
}
.sim-schalter button.an { background: var(--gold-grad); color: var(--darker); font-weight: 600; }
.sim-steuer { display: flex; flex-direction: column; gap: 1.5rem; }
.sim-play { display: flex; align-items: center; gap: 1.1rem; }
.sim-play-btn {
  width: 66px; height: 66px; border-radius: 50%; border: none; background: var(--gold-grad); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: transform 0.2s;
}
.sim-play-btn:hover { transform: scale(1.05); }
.sim-play-btn svg { width: 24px; height: 24px; fill: var(--darker); }
.sim-zeit { flex: 1; }
.sim-balken { height: 6px; background: rgba(232,226,216,0.15); border-radius: 3px; overflow: hidden; cursor: pointer; }
.sim-balken div { height: 100%; width: 0; background: var(--gold-1); }
.sim-zeit-text { font-size: 0.75rem; color: rgba(232,226,216,0.45); margin-top: 0.5rem; letter-spacing: 0.06em; }
.sim-optionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sim-mini-audio svg { width: 100%; height: auto; display: block; }
.sim-hinweis { font-size: 0.8rem; line-height: 1.55; color: rgba(232,226,216,0.45); }
.sim-hinweis a { color: var(--gold-1); }

/* ── TEASER: HÖRTEST & SIMULATOR ── */
.hoertools { background: var(--dark); }
.hoertools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3.5rem; }
.hoertool-card {
  background: var(--darker);
  border: 1px solid rgba(209,175,52,0.15);
  padding: 2.8rem 2.4rem;
  display: flex; flex-direction: column;
  transition: border-color 0.3s, transform 0.3s;
}
.hoertool-card:hover { border-color: rgba(209,175,52,0.45); transform: translateY(-4px); }
.hoertool-card h3 { font-size: 1.55rem; font-weight: 300; color: var(--cream); margin: 0 0 1rem; }
.hoertool-card p { font-size: 0.98rem; line-height: 1.75; color: rgba(232,226,216,0.72); margin-bottom: 1.2rem; }
.hoertool-meta { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,226,216,0.45); margin-bottom: 1.8rem; }
.hoertool-card .btn-primary, .hoertool-card .btn-ghost { margin-top: auto; align-self: flex-start; }
.hoertool-wave { display: flex; align-items: center; gap: 4px; height: 44px; margin-bottom: 1.6rem; }
.hoertool-wave i { display: block; width: 3px; background: var(--gold-1); border-radius: 2px; opacity: 0.85; }
.hoertool-wave.gedaempft i:nth-child(n+9) { opacity: 0.2; }

/* ── NAV: HÖRTEST-LINK & FOOTER ── */
.cta-nav-wrap { display: flex; align-items: center; gap: 1.8rem; }
.nav-hoertest {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(209,175,52,0.5);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nav-hoertest:hover { color: var(--gold-1); border-color: var(--gold-1); }
footer a.footer-tool { color: var(--gold-1); }

@media (max-width: 900px) {
  .tool-frame { min-height: 0; }
  .tool-stepper { padding: 1.4rem 1rem 0; }
  .tool-step { min-width: 54px; }
  .tool-step-name { font-size: 0.56rem; letter-spacing: 0.05em; }
  .tool-screen { padding: 2.2rem 1.3rem; }
  .tool-split, .ohr-intro, .sim-buehne { grid-template-columns: 1fr; gap: 2rem; }
  .ohr-intro { text-align: center; }
  .ohr-svg { width: 140px; margin: 0 auto; }
  .tool-nav { padding: 0 1.3rem 1.6rem; }
  .pegel-zeile { grid-template-columns: 44px 1fr 44px; gap: 0.7rem; }
  .pegel-knopf { width: 44px; height: 44px; }
  .pegel-ticks { padding: 0.4rem 52px 0; }
  .erg-gauges { gap: 0.6rem; }
  .gauge-ohr { font-size: 0.6rem; }
  .gauge-wert { font-size: 0.78rem; }
  .gauge-text { bottom: -14%; }
  .erg-gauges { margin-bottom: 1.2rem; }
  .erg-legende-info { flex-basis: 100%; text-align: center; }
  .sim-steuer { order: -1; }
  .sim-person .rolle { font-size: 0.56rem; letter-spacing: 0.05em; }
  .sim-person[data-person="Anna"] { left: 14% !important; }
  .sim-person[data-person="Thomas"] { left: 84% !important; }
  .sim-kopf, .sim-buehne { padding-left: 1.2rem; padding-right: 1.2rem; }
  .sim-person { width: 92px; }
  .sim-person .kreis { width: 50px; height: 50px; font-size: 1rem; }
  .hoertools-grid { grid-template-columns: 1fr; }
  .hoertool-card { padding: 2.2rem 1.6rem; }
}
@media (max-width: 480px) {
  .cta-nav-wrap { gap: 0.9rem; }
  .nav-hoertest { font-size: 0; }
  .nav-hoertest::before { content: "Hörtest"; font-size: 0.72rem; letter-spacing: 0.08em; }
  .tool-step-name { display: none; }
  .tool-nav .btn-primary, .tool-nav .btn-ghost { width: auto; padding: 0.85rem 1.2rem; }
}