/* Tool 07 - Stimmgerät (Tuner) */
#tool-stimmgeraet {
  --tuner-bg: #0d0d12;
  --tuner-ok: #4caf50;
  --tuner-flat: #f44336;
  --tuner-sharp: #2196f3;
}

#tuner-container {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 20px 50px -20px rgba(92,21,23,.08);
}

.tool-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--plum);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-sub::after {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  background: var(--line);
}

.tool-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--plum-deep);
  margin: 0 0 10px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.controls-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.controls-row select {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.btn-start {
  padding: 10px 20px;
  background: var(--plum);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-start:hover {
  background: #6b1c1e;
}

.btn-start.is-active {
  background: var(--ink);
}

.btn-start:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.status-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-bottom: 15px;
  min-height: 1.2em;
}

.status-hint.error {
  color: var(--tuner-flat);
}

.status-hint.ok {
  color: var(--tuner-ok);
}

.display-screen {
  background: var(--tuner-bg);
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  color: white;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
  border: 2px solid #222;
}

.note-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 15px;
}

.note-large {
  font-size: 4.5rem;
  font-weight: bold;
  font-family: var(--font-mono);
  line-height: 1;
  transition: color 0.1s;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.note-target {
  font-size: 1.5rem;
  color: #888;
  font-family: var(--font-mono);
}

.note-large.perfect {
  color: var(--tuner-ok);
  text-shadow: 0 0 15px var(--tuner-ok);
}

.note-large.flat {
  color: var(--tuner-flat);
}

.note-large.sharp {
  color: var(--tuner-sharp);
}

.note-large.neutral {
  color: #888;
}

.details {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #aaa;
  margin-bottom: 20px;
}

.details span {
  color: #fff;
}

.bars-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-bottom: 20px;
}

.bar-col {
  display: flex;
  gap: 5px;
  height: 32px;
}

.bar-col#tunerBarsLeft {
  flex-direction: row-reverse;
}

.bar {
  width: 10px;
  border-radius: 2px;
  opacity: 0.9;
}

.bar.perfect {
  background: var(--tuner-ok);
  box-shadow: 0 0 12px var(--tuner-ok);
}

.bar.orange {
  background: #ff9800;
  box-shadow: 0 0 10px #ff9800;
}

.bar.flat,
.bar.sharp {
  background: var(--tuner-flat);
  box-shadow: 0 0 10px var(--tuner-flat);
}

.level-wrap {
  width: 100%;
  height: 6px;
  background: #222;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 15px;
}

.level-bar {
  height: 100%;
  width: 0%;
  background: var(--tuner-ok);
  transition: width 0.05s linear;
}