:root {
	--font: "Recursive", system-ui, sans-serif;
	--display: "Josefin Sans", "Recursive", system-ui, sans-serif;
	--sans: "MONO" 0, "CASL" 0; --mono: "MONO" 1, "CASL" 0;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--clr-background); color: var(--clr-text); }
body {
	font: 400 18px/1.5 var(--font); font-variation-settings: var(--sans);
	padding: calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.mono { font-variation-settings: var(--mono); }
.tool-container { width: min(100%, 64rem); margin: 0 auto; }

.pit-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid currentColor; padding-bottom: 0.4rem; margin-bottom: 2rem; }
.pit-kopf-rechts { display: flex; align-items: center; gap: 0.9rem; }

/* Hell/Dunkel */
.pit-modus { display: grid; place-items: center; width: 2rem; height: 2rem; margin: -0.4rem -0.4rem -0.4rem 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.pit-modus svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pit-modus .symbol-mond { fill: currentColor; stroke: none; }
.pit-modus:hover { color: var(--clr-primary); }
.pit-kopf p, .pit-feld label, .pit-label, .pit-status {
	font: 700 0.75rem/1.4 var(--display); font-variation-settings: normal; letter-spacing: 0.12em; text-transform: uppercase; margin: 0;
}
.tool-title {
	color: var(--clr-primary); font: 700 var(--titel)/1 var(--display); font-variation-settings: normal;
	margin: 0; letter-spacing: -0.01em;
}
/* Josefin Sans hat kein π: als SVG gezeichnet, Maße aus Josefin Bold (Versalhöhe 736, Strich 145 von 1000) */
.tool-title .pi { display: inline-block; height: 0.736em; width: 0.72em; fill: currentColor; vertical-align: baseline; }
.tool-subtitle { margin: 0 0 2.5rem; font-variation-settings: var(--mono); color: var(--clr-primary); font-size: 0.95rem; overflow-wrap: anywhere; }

/* Bedienung in einer Reihe: Schalter, Textfeld, Drehregler – alle gleich hoch */
.pit-steuerung { --h: 2.75rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.1rem; }
.pit-feld { display: flex; flex-direction: column; gap: 0.4rem; }
.pit-feld[hidden] { display: none; }
.pit-lbl { font: 700 0.75rem/1.4 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
#text-feld { flex: 1 1 9rem; min-width: 0; }
#text-feld input {
	width: 100%; height: var(--h); border: 1px solid currentColor; border-radius: 0; background: var(--clr-background); color: inherit;
	font: 600 1.1rem/1 var(--display); font-variation-settings: normal;
	/* Josefin sitzt hoch im Zeilenkasten: oben etwas mehr Innenabstand als unten */
	padding: 0.12em 0.75rem 0;
}
#text-feld input:focus { outline: none; border-color: var(--clr-primary); box-shadow: inset 0 0 0 1px var(--clr-primary); }

/* Schalter (.segment) */
.pit-schalter { height: var(--h); }
.pit-schalter button {
	display: grid; place-items: center; min-width: 2.75rem; padding: 0.15em 0.85rem 0;
	font: 600 1.05rem/1 var(--display); font-variation-settings: normal;
}
.pit-schalter .pi { height: 0.736em; width: 0.72em; fill: currentColor; margin-top: -0.15em; }
.pit-schalter button { grid-auto-flow: column; gap: 0.45rem; }
.pit-schalter .ico { width: 1.1rem; height: 1.1rem; margin-top: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pit-schalter .kurz { display: none; }

/* Handy: nur Schalter mit Icons, kompakt in einer Reihe; Textfeld darunter über die volle Breite */
@media (max-width: 40rem) {
	.pit-steuerung { --h: 2.5rem; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; align-items: center; gap: 0.6rem 0.4rem; }
	.pit-steuerung .pit-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.pit-feld { gap: 0; }
	#text-feld { grid-column: 1 / -1; grid-row: 2; }
	#text-feld input { font-size: 1rem; }
	.pit-schalter button { min-width: 2.65rem; padding: 0.1em 0.35rem 0; font-size: 0.9rem; }
	.pit-schalter .txt { display: none; }
	.pit-schalter .kurz { display: inline; }
	.pit-poti-zeile { gap: 0.3rem; }
	.pit-poti-wert { min-width: 1.9em; font-size: 0.9rem; }
	.pit-poti-wert .bpm { display: none; }
}

/* Drehregler: 270° Bahn, grüner Bogen bis zum Wert, Zeiger im Knopf */
.pit-poti-zeile { -webkit-user-select: none; user-select: none; display: flex; align-items: center; gap: 0.6rem; height: var(--h); }
.pit-poti { -webkit-user-select: none; user-select: none; width: var(--h); height: var(--h); cursor: ns-resize; touch-action: none; border-radius: 50%; }
.pit-poti svg { display: block; width: 100%; height: 100%; overflow: visible; }
.poti-bahn, .poti-wert { fill: none; stroke-width: 3; stroke-dasharray: 75 100; }
.poti-bahn { stroke: var(--clr-gray-border); }
.poti-wert { stroke: var(--clr-primary); stroke-linecap: butt; }
.poti-knopf { fill: var(--clr-background); stroke: currentColor; stroke-width: 1.2; }
.poti-zeiger { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pit-poti:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
.pit-poti:hover .poti-zeiger { stroke: var(--clr-primary); }
.pit-poti-wert { font: 600 1.05rem/1 var(--display); padding-top: 0.15em; white-space: nowrap; min-width: 4.2em; }

/* Titel mit Play/Pause rechts */
.pit-titelzeile { --titel: clamp(2.8rem, 11vw, 6rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.pit-play {
	flex: none; display: grid; place-items: center; width: clamp(3.2rem, 10vw, 5.5rem); aspect-ratio: 1;
	/* auf die Mitte der Versalien: die sitzen bei Josefin 0,118em über der Mitte des Zeilenkastens */
	transform: translateY(calc(var(--titel) * -0.118));
	padding: 0; border: 0; border-radius: 50%; background: var(--clr-primary); color: #fff; cursor: pointer;
}
.pit-play svg { width: 46%; height: 46%; fill: currentColor; }
.pit-play .icon-play { margin-left: 8%; }
.pit-play .icon-pause, .pit-play.laeuft .icon-play { display: none; }
.pit-play.laeuft .icon-pause { display: block; }
.pit-play:hover { background: rgb(0, 100, 0); }
.pit-play:focus-visible, .kanal:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }

/* Link teilen */
.pit-teilen-zeile { margin: 1rem 0 0; text-align: right; }
.pit-teilen {
	padding: 0.2rem 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; cursor: pointer;
	font: 700 0.75rem/1.4 var(--display); font-variation-settings: normal; letter-spacing: 0.12em; text-transform: uppercase;
}
.pit-teilen:hover, .pit-teilen.ok { color: var(--clr-primary); }
.pit-teilen:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }

/* Bühne */
.pit-anzeige { margin-top: 2rem; }
.pit-status { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid currentColor; padding-top: 0.4rem; }
.pit-buehne { display: grid; grid-template-columns: 8rem minmax(0, 1fr); margin-top: 0.5rem; }
#buehne { display: block; width: 100%; height: 350px; }

/* Kanäle links, je auf Höhe ihrer Bahn – Kästchen gefüllt = an, leer = stumm */
.pit-kanaele { position: relative; border-right: 1px solid currentColor; }
.kanal {
	position: absolute; left: 0; right: 0.5rem; transform: translateY(-50%);
	display: flex; align-items: baseline; gap: 0.6em; padding: 0.35rem 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
	font: 700 0.75rem/1 var(--display); font-variation-settings: normal; letter-spacing: 0.12em; text-transform: uppercase;
}
/* Kästchen steht auf der Grundlinie und ist so hoch wie die Versalien von Josefin (736/1000) */
.kanal::before { content: ""; flex: none; width: 0.736em; height: 0.736em; box-sizing: border-box; border: 1.5px solid currentColor; }
.kanal.active::before { background: var(--clr-primary); border-color: var(--clr-primary); }
button.kanal:not(.active) { text-decoration: line-through; }
.kanal:hover { color: var(--clr-primary); }
/* Ziffernzeile: nur Beschriftung, kein Schalter */
.kanal-info {
	cursor: default; padding-left: calc(0.736em + 0.6em); right: -1px; height: 22px; padding-bottom: 0; background: var(--clr-primary-light);
	/* Josefin-Versalien sitzen 0,118em über der Mitte des Zeilenkastens: um so viel nach unten rücken */
	align-items: center; padding-top: 0.236em;
}
.kanal-info::before { display: none; }
.kanal[hidden] { display: none; }
/* Zeichen: ohne Hinterlegung, nur die Ziffernzeile ist grün unterlegt */
#kanal-zeichen { background: none; right: 0.5rem; }
.kanal-info:hover { color: inherit; }

.pit-text { margin-top: 3rem; }
.pit-label { border-top: 1px solid currentColor; padding-top: 0.4rem; }
/* Fließtext in Josefin: kleine x-Höhe, darum etwas größer und mit mehr Durchschuss */
.pit-text p { max-width: 36em; margin: 0; font: 400 1.2rem/1.55 var(--display); font-variation-settings: normal; }
.pit-text .pit-label + p { margin-top: 1rem; }
/* Absätze ohne Abstand, ab dem zweiten mit Einzug von einer Schriftgröße */
.pit-text p + p { text-indent: 1em; }
/* Theorie: gleiche Größe, Hierarchie nur über den Schnitt (Light statt Regular) */
.pit-text .pit-theorie { font-weight: 300; margin-top: 1.55em; text-indent: 0; } /* eigener Block: eine Leerzeile Abstand, kein Einzug */
.pit-text a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pit-text a:hover { color: var(--clr-primary); }

@media (max-width: 30rem) {
	.pit-buehne { grid-template-columns: 6.4rem minmax(0, 1fr); }
	.kanal { font-size: 0.62rem; letter-spacing: 0.08em; }
}