/* Flötenfeuer Intonationstrainer – Stimmgerät. Ergänzungen zu werkzeuge.css des Rhythmusfeuer-Themes (.rfw …) */

.ffi-tuner {
	--ffi-gut: #0a951f;
	--ffi-knapp: #f08c00;
	--ffi-daneben: #de2a29;
	--ffi-grau: #5d6b62;
}
.ffi-tuner .rf-rhythmus__erw-hinweis { margin-top: 8px; }
.ffi-tuner__stimmungen small { line-height: 1.15; }

.ffi-tuner__steuerung { display: flex; justify-content: center; margin: 22px 0 6px; }
.ffi-tuner__status { text-align: center; font-weight: 700; margin: 10px 0 14px; min-height: 1.4em; }

/* Anzeige: Ton | Zeiger | Griff */
.ffi-tuner__anzeige {
	display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 16px; align-items: center;
	background: var(--rfw-hell, #f3fbef); border: 3px solid var(--rfw-linie, #d5e9cd); border-radius: 18px;
	padding: 18px 16px; transition: border-color .15s;
}
.ffi-tuner__anzeige[data-lage="gut"] { border-color: var(--ffi-gut); }
.ffi-tuner__anzeige[data-lage="knapp"] { border-color: var(--ffi-knapp); }
.ffi-tuner__anzeige[data-lage="daneben"] { border-color: var(--ffi-daneben); }
.ffi-tuner__anzeige.is-still { border-color: var(--rfw-linie, #d5e9cd); }
.ffi-tuner__anzeige.is-still .ffi-tuner__ton,
.ffi-tuner__anzeige.is-still .ffi-tuner__griff,
.ffi-tuner__anzeige.is-still .ffi-tuner__zeiger,
.ffi-tuner__anzeige.is-still .ffi-tuner__wert { opacity: .4; }

.ffi-tuner__ton { text-align: center; transition: opacity .2s; }
.ffi-tuner__noten { color: var(--rfw-dunkel, #002c5d); min-height: 96px; display: flex; justify-content: center; align-items: center; }
.ffi-tuner__noten svg { width: 110px; max-width: 100%; height: auto; display: block; }
.ffi-tuner__name strong { display: block; font-family: var(--rf-font-head); font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; color: var(--rfw-dunkel, #002c5d); }
.ffi-tuner__art { display: block; min-height: 1.3em; margin-top: 4px; font-weight: 700; color: var(--ffi-knapp); }

.ffi-tuner__messer { text-align: center; }
.ffi-tuner__skala { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.ffi-tuner__bahn { fill: none; stroke: #fff; stroke-width: 26; }
.ffi-tuner__knapp { fill: none; stroke: rgba(240, 140, 0, .28); stroke-width: 26; }
.ffi-tuner__zone { fill: none; stroke: rgba(10, 149, 31, .45); stroke-width: 26; }
.ffi-tuner__strich { stroke: var(--rfw-dunkel, #002c5d); stroke-width: 2; opacity: .55; }
.ffi-tuner__skala text { font-family: var(--rf-font-head); font-size: 17px; fill: var(--ffi-grau); }
.ffi-tuner__skala text.ffi-tuner__seite { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.ffi-tuner__zeiger { transition: transform .09s linear; }
.ffi-tuner__zeiger line { stroke: var(--rfw-dunkel, #002c5d); stroke-width: 6; stroke-linecap: round; }
.ffi-tuner__zeiger circle { fill: var(--rfw-dunkel, #002c5d); }
[data-lage="gut"] .ffi-tuner__zeiger line { stroke: var(--ffi-gut); }
[data-lage="knapp"] .ffi-tuner__zeiger line { stroke: var(--ffi-knapp); }
[data-lage="daneben"] .ffi-tuner__zeiger line { stroke: var(--ffi-daneben); }

.ffi-tuner__wert { margin: 2px 0 0; display: flex; justify-content: center; align-items: baseline; gap: 6px; color: var(--rfw-dunkel, #002c5d); }
.ffi-tuner__cent { font-family: var(--rf-font-head); font-size: clamp(2.8rem, 8vw, 3.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ffi-tuner__wert span { font-weight: 700; }
.ffi-tuner__urteil { margin: 4px 0 0; font-family: var(--rf-font-head); font-size: 1.7rem; line-height: 1.1; text-transform: uppercase; color: var(--ffi-grau); min-height: 1.1em; }
[data-lage="gut"] .ffi-tuner__urteil, [data-lage="gut"] .ffi-tuner__cent { color: var(--ffi-gut); }
[data-lage="knapp"] .ffi-tuner__urteil, [data-lage="knapp"] .ffi-tuner__cent { color: var(--ffi-knapp); }
[data-lage="daneben"] .ffi-tuner__urteil, [data-lage="daneben"] .ffi-tuner__cent { color: var(--ffi-daneben); }
.ffi-tuner__hz { margin: 4px 0 0; font-size: .82rem; color: var(--ffi-grau); min-height: 1.2em; font-variant-numeric: tabular-nums; }

.ffi-tuner__griff { text-align: center; transition: opacity .2s; }
.ffi-tuner__griff-titel { margin: 0 0 6px; font-weight: 700; font-size: .9rem; color: var(--ffi-grau); }
.ffi-tuner__loecher { color: var(--rfw-dunkel, #002c5d); min-height: 40px; }
.ffi-tuner__loecher svg { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto; }
.ffi-tuner__hand { display: flex; justify-content: space-around; max-width: 230px; margin: 2px auto 0; font-size: .72rem; color: var(--ffi-grau); }
.ffi-tuner__griff.is-leer .ffi-tuner__hand, .ffi-tuner__griff.is-leer .ffi-tuner__griff-titel { display: none; }
.ffi-tuner__tipp { margin: 8px 0 0; font-size: .85rem; line-height: 1.35; color: var(--rf-text, #17262a); text-align: left; }
.ffi-tuner__tipp:empty { display: none; }

.ffi-tuner__raum { margin: 16px 0 0; font-size: .92rem; background: #eaf2fb; border-left: 4px solid var(--rfw-dunkel, #002c5d); padding: .5em .8em; border-radius: 8px; }
.ffi-tuner__info { margin: 10px 0 0; font-size: .82rem; color: var(--ffi-grau); }

/* Noch kein Ton gehört: nur die Skala */
.ffi-tuner__anzeige.is-leer { grid-template-columns: 1fr; grid-template-areas: none; }
.ffi-tuner__anzeige.is-leer .ffi-tuner__ton, .ffi-tuner__anzeige.is-leer .ffi-tuner__griff, .ffi-tuner__anzeige.is-leer .ffi-tuner__hz { display: none; }

@media (max-width: 760px) {
	.ffi-tuner__anzeige { grid-template-columns: 1fr 1fr; grid-template-areas: "messer messer" "ton griff"; }
	.ffi-tuner__messer { grid-area: messer; }
	.ffi-tuner__ton { grid-area: ton; }
	.ffi-tuner__griff { grid-area: griff; }
}
@media (max-width: 420px) {
	.ffi-tuner__anzeige { padding: 14px 10px; gap: 10px; }
	.ffi-tuner__noten { min-height: 80px; }
	.ffi-tuner__noten svg { width: 90px; }
	.ffi-tuner__urteil { font-size: 1.45rem; }
}
@media (max-width: 760px) {
	.ffi-tuner__anzeige.is-leer .ffi-tuner__messer { grid-area: auto; }
}