/* Klangkistli — kindgerecht, große Touch-Flächen, kräftige Farben.
   Farbtokens folgen der mana-Konvention (12 --color-*, HSL-Channels).
   Vorerst inline gevendort (Kern hat keine Build-Kette); Adoption von
   @mana/themes als Variante kommt mit dem ersten Deploy. */
:root {
	--color-background: 35 100% 97%;
	--color-foreground: 220 25% 18%;
	--color-surface: 0 0% 100%;
	--color-surface-hover: 25 80% 92%;
	--color-muted: 25 30% 90%;
	--color-muted-foreground: 220 12% 45%;
	--color-border: 25 25% 82%;
	--color-primary: 25 100% 50%;
	--color-primary-foreground: 0 0% 100%;
	--color-error: 0 84% 60%;
	--color-success: 142 71% 45%;
	--color-warning: 38 95% 52%;

	/* fröhliche Reihenfarben für die Drum-Stimmen */
	--row-0: 0 85% 62%;
	--row-1: 35 95% 55%;
	--row-2: 50 95% 55%;
	--row-3: 150 65% 48%;
	--row-4: 265 70% 65%;
	--row-5: 190 80% 50%;
	--row-6: 320 70% 62%;
	--row-7: 95 55% 48%;
	--row-8: 30 55% 45%;
	--row-9: 215 70% 62%;

	--wave-color: hsl(265 70% 65%);
}

* {
	box-sizing: border-box;
}

/* Inline-SVG-Icons (icons.js + statisch im HTML): erben Farbe via currentColor. */
.ic {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* [hidden] muss display-Klassen (.transport: flex) schlagen, sonst leaken
   die Modus-Container/Footer modusübergreifend. */
[hidden] {
	display: none !important;
}

html,
body {
	margin: 0;
}

body {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	background: hsl(var(--color-background));
	color: hsl(var(--color-foreground));
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* --- Kopf --- */
.top {
	padding: 0.85rem 1rem 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	justify-content: space-between;
}
.logo {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.toolbar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.name-input {
	font: inherit;
	font-weight: 600;
	padding: 0.4rem 0.7rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.75rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
	max-width: 13rem;
}
.name-input:focus {
	outline: none;
	border-color: hsl(var(--color-primary));
}
.top-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.tool-btn {
	font-size: 1.25rem;
	line-height: 1;
	padding: 0.45rem 0.55rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.75rem;
	background: hsl(var(--color-surface));
	cursor: pointer;
	transition: transform 0.06s ease, background-color 0.1s ease;
}
.tool-btn:disabled {
	opacity: 0.35;
	cursor: default;
}
.tool-btn:hover {
	background: hsl(var(--color-surface-hover));
}
.tool-btn:active {
	transform: scale(0.92);
}

/* --- Menü (selten gebrauchte Aktionen) --- */
.menu-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
}
.menu-card {
	position: absolute;
	bottom: calc(5.5rem + env(safe-area-inset-bottom));
	right: 0.75rem;
	background: hsl(var(--color-surface));
	border: 2px solid hsl(var(--color-border));
	border-radius: 1rem;
	box-shadow: 0 12px 40px hsl(var(--color-foreground) / 0.18);
	padding: 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 16rem;
	max-width: 90vw;
	max-height: 70vh;
	overflow-y: auto;
}
.menu-card .name-input {
	width: 100%;
	margin-bottom: 0.3rem;
}
.menu-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-align: left;
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.6rem 0.7rem;
	border: none;
	border-radius: 0.6rem;
	background: transparent;
	color: hsl(var(--color-foreground));
	cursor: pointer;
}
.menu-item:hover {
	background: hsl(var(--color-surface-hover));
}
.menu-item:active {
	transform: scale(0.98);
}
.menu-item-danger {
	color: hsl(var(--color-error));
}
.mi-ic {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: hsl(var(--color-muted-foreground));
}
.mi-label { flex: 1; min-width: 0; }
.mi-check {
	display: none;
	margin-left: auto;
	color: hsl(var(--color-primary));
}
.menu-item.toggle.active { color: hsl(var(--color-primary)); }
.menu-item.toggle.active .mi-ic { color: hsl(var(--color-primary)); }
.menu-item.toggle.active .mi-check { display: inline-flex; }
.menu-item-danger .mi-ic { color: hsl(var(--color-error)); }

/* kleine Bestätigung */
.toast {
	position: fixed;
	left: 50%;
	top: 0.75rem;
	transform: translateX(-50%) translateY(-150%);
	background: hsl(var(--color-foreground));
	color: hsl(var(--color-background));
	padding: 0.55rem 1rem;
	border-radius: 0.9rem;
	font-weight: 700;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
	pointer-events: none;
}
.toast.show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	visibility: visible;
}

/* --- Hauptbereich --- */
main {
	flex: 1;
	padding: 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* --- Szenen-Filmstreifen: pro Takt eine Szene nebeneinander ----------------- */
/* Horizontal wisch-/scrollbar mit Snap; jede Szene = volle Breite. Die Höhe
   wächst mit dem Inhalt, damit die Seite (nicht der Streifen) vertikal scrollt. */
.scenes {
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* Firefox */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.scenes::-webkit-scrollbar { display: none; } /* WebKit/Blink */
.scene {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.panel {
	background: hsl(var(--color-surface));
	border: 2px solid hsl(var(--color-border));
	border-radius: 1.25rem;
	padding: 1rem;
	max-width: none;
	margin: 0;
	box-shadow: 0 6px 24px hsl(var(--color-foreground) / 0.06);
}
.panel-title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: hsl(var(--color-muted-foreground));
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Klappbare Bereiche (Beat / Melodie) */
.panel-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0;
	margin: 0 0 0.75rem;
	background: transparent;
	border: none;
	cursor: pointer;
	font: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	color: hsl(var(--color-muted-foreground));
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: left;
}
.chev {
	display: inline-block;
	font-size: 0.85em;
	transition: transform 0.15s ease;
}
.panel.collapsed .panel-head { margin-bottom: 0; }
.panel.collapsed .chev { transform: rotate(-90deg); }
.panel.collapsed > .grid { display: none; }
.panel.collapsed > .stimme { display: none; }
/* Melodiespur-Klappen */
.chev-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	padding: 0.2rem 0.3rem;
	color: hsl(var(--color-muted-foreground));
}
.chev-btn .chev { transition: transform 0.15s ease; }
.mel-track.collapsed .chev-btn .chev { transform: rotate(-90deg); }
.mel-track.collapsed > .mel-body { display: none; }
.mel-track.collapsed .mel-head { margin-bottom: 0; }

/* --- Raster --- */
.grid {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.row-label {
	width: 6.5rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
	font-size: 0.9rem;
}
/* Spur-Kopf: Name oben, Schalter (Solo/Stumm/Entfernen) darunter — Name + Schalter
   stecken in einem Element links neben dem Raster. */
.row-head {
	flex: 0 0 6.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}
.row-head .row-label { width: 100%; }
.row-name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* klickbar → umbenennbar, sieht aber wie Text aus */
	font: inherit;
	font-weight: 700;
	color: inherit;
	text-align: left;
	background: transparent;
	border: none;
	padding: 0.1rem 0.25rem;
	margin: -0.1rem -0.25rem;
	border-radius: 0.4rem;
	cursor: text;
}
.row-name:hover { background: hsl(var(--color-muted)); }
.row-name-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	font: inherit;
	font-weight: 700;
	padding: 0.1rem 0.25rem;
	border: 2px solid hsl(var(--color-primary));
	border-radius: 0.4rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
}
/* Spur-Steuerung (Solo/Stumm/Entfernen): eigene Spalte zwischen Label und Raster,
   damit der Name links Platz behält. Im Melodiekopf wird sie rechts angedockt. */
.row-ctrls {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	flex: 0 0 auto;
}
.mel-head .row-ctrls { margin-left: auto; }
.track-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border: none;
	border-radius: 0.45rem;
	background: transparent;
	color: hsl(var(--color-muted-foreground));
	cursor: pointer;
	opacity: 0.5;
	transition: background-color 0.1s ease, opacity 0.1s ease;
}
.track-btn:hover { background: hsl(var(--color-muted)); opacity: 1; }
.track-mute.active {
	opacity: 1;
	color: hsl(var(--color-error));
	background: hsl(var(--color-error) / 0.14);
}
.track-solo.active {
	opacity: 1;
	color: hsl(38 90% 42%);
	background: hsl(var(--color-warning) / 0.18);
}
/* Solo bleibt überall versteckt, bis es in den Einstellungen aktiviert wird.
   Höhere Spezifität als .track-btn, damit display:none nicht überschrieben wird. */
.track-btn.track-solo { display: none; }
body.solo-on .track-btn.track-solo { display: inline-flex; }
.drum-remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: hsl(var(--color-muted-foreground));
	cursor: pointer;
}
.drum-remove:hover {
	background: hsl(var(--color-muted));
	color: hsl(var(--color-error));
}
.drum-add-wrap { margin-top: 0.5rem; }
.drum-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
	max-height: 11rem;
	overflow-y: auto;
}
.drum-chip {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font: inherit;
	font-weight: 700;
	padding: 0.45rem 0.7rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.7rem;
	background: hsl(var(--color-surface));
	cursor: pointer;
}
.row-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}
.cells {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: 0.16rem; /* eng → die Kacheln werden größer */
	flex: 1;
}

.cell {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	max-height: 3.8rem; /* bei Vollbreite breit, aber Höhe gedeckelt → kompakt */
	min-width: 0;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.55rem;
	background: hsl(var(--color-muted));
	cursor: pointer;
	padding: 0;
	transition: transform 0.06s ease, background-color 0.1s ease;
	touch-action: pan-x pan-y; /* Wischen/Scrollen erlaubt; Malen läuft über die Maus */
}
/* 4er-Beat-Gruppen: jeder zweite Vierer minimal dunkler → ein Takt = 4 Kacheln. */
.cell.beat-alt {
	background: hsl(25 28% 84%);
}
.cell.beat-start {
	border-color: hsl(var(--color-muted-foreground) / 0.45);
}
.cell:active {
	transform: scale(0.92);
}

/* Beat-Zelle: Füllstand = Anschlag-Lautstärke (--vel 0..1), Farbe = Reihenfarbe. */
.cell-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--vel, 0) * 100%);
	background-color: hsl(var(--drum-color, 25 100% 50%));
	transition: height 0.08s ease;
	pointer-events: none;
}
/* Aktive Zelle: Rand bleibt sichtbar — dunklere Tönung derselben Farbe, damit
   die Kästchen-Kontur nicht in der gleichfarbigen Füllung verschwindet. */
.grid:not(.grid-melody) .cell.on { border-color: color-mix(in srgb, hsl(var(--drum-color, 25 100% 50%)) 60%, #000); }
/* Roll/Ratchet: helle Trennstriche im Füllstand zeigen 2/3/4 schnelle Schläge. */
.cell.roll-2 .cell-fill { background-image: linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.85) 48% 52%, transparent 52%); }
.cell.roll-3 .cell-fill { background-image: linear-gradient(90deg, transparent 31%, rgba(255, 255, 255, 0.85) 31% 35%, transparent 35% 64%, rgba(255, 255, 255, 0.85) 64% 68%, transparent 68%); }
.cell.roll-4 .cell-fill { background-image: linear-gradient(90deg, transparent 23%, rgba(255, 255, 255, 0.85) 23% 27%, transparent 27% 48%, rgba(255, 255, 255, 0.85) 48% 52%, transparent 52% 73%, rgba(255, 255, 255, 0.85) 73% 77%, transparent 77%); }

/* Ton-Einstellungen (Rechtsklick / Longpress auf eine Beat-Zelle) */
.cell-menu {
	position: fixed;
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.7rem;
	min-width: 12rem;
	background: hsl(var(--color-surface));
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.9rem;
	box-shadow: 0 10px 30px hsl(var(--color-foreground) / 0.18);
}
.cm-title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 800;
}
.cm-section {
	font-size: 0.8rem;
	font-weight: 700;
	color: hsl(var(--color-muted-foreground));
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.cm-rolls {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.3rem;
}
.cm-roll {
	font: inherit;
	font-weight: 700;
	padding: 0.45rem 0;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.6rem;
	background: hsl(var(--color-surface));
	cursor: pointer;
}
.cm-roll.active {
	background: hsl(var(--color-primary));
	border-color: hsl(var(--color-primary));
	color: #fff;
}
.cm-vel {
	width: 100%;
}
.cm-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font: inherit;
	font-weight: 700;
	padding: 0.5rem;
	border: 2px solid hsl(var(--color-error) / 0.5);
	border-radius: 0.6rem;
	background: transparent;
	color: hsl(var(--color-error));
	cursor: pointer;
}

/* Melodie-Zellen: ein Farbton pro Tonhöhe (per --note-hue gesetzt) */
.row-label-note {
	justify-content: center;
	font-size: 1.05rem;
	color: hsl(var(--color-muted-foreground));
}
.cell-note.on {
	background: hsl(var(--note-hue, 200) 75% 58%);
	border-color: hsl(var(--note-hue, 200) 75% 58%);
}
/* Piano-Roll: mehrere Zellen einer Note zu einem Balken verbinden */
.grid-melody .cells { gap: 0.12rem; }
.cell-note.note-start { border-radius: 0.55rem 0 0 0.55rem; }
.cell-note.note-mid { border-radius: 0; }
.cell-note.note-end { border-radius: 0 0.55rem 0.55rem 0; }
.cell-note.prev { opacity: 0.55; }

/* Melodiespur-Kopf: Instrument-Auswahl + Entfernen + Spur hinzufügen */
.mel-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0 0.5rem;
}
.instr-select {
	font: inherit;
	font-weight: 700;
	padding: 0.4rem 0.7rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.7rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
}
.mel-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border: none;
	border-radius: 0.5rem;
	background: transparent;
	color: hsl(var(--color-muted-foreground));
	cursor: pointer;
}
.mel-remove:hover { background: hsl(var(--color-muted)); color: hsl(var(--color-error)); }
.chord-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.35rem 0.6rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.6rem;
	background: transparent;
	color: hsl(var(--color-muted-foreground));
	cursor: pointer;
}
.chord-btn.active {
	background: hsl(var(--color-primary));
	border-color: hsl(var(--color-primary));
	color: hsl(var(--color-primary-foreground));
}
.mel-add {
	margin-top: 0.6rem;
	font: inherit;
	font-weight: 700;
	padding: 0.55rem 0.9rem;
	border: 2px dashed hsl(var(--color-border));
	border-radius: 0.8rem;
	background: transparent;
	color: hsl(var(--color-muted-foreground));
	cursor: pointer;
}

/* Tempo im Menü */
.menu-tempo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0.3rem 0.5rem;
}
.menu-tempo .mt-ic { display: inline-flex; align-items: center; color: hsl(var(--color-muted-foreground)); }
.menu-tempo input[type='range'] {
	flex: 1;
	accent-color: hsl(var(--color-primary));
}
.menu-tempo .tempo-value {
	min-width: 2.2rem;
	text-align: right;
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: hsl(var(--color-muted-foreground));
}

/* Lauflicht */
.cell.playing {
	box-shadow: 0 0 0 3px hsl(var(--color-foreground) / 0.35) inset;
}
.cell.on.playing {
	box-shadow: 0 0 0 3px hsl(var(--color-surface)) inset, 0 0 12px 2px hsl(var(--color-primary) / 0.6);
}

/* --- Transport (unten verankert) --- */
.transport {
	position: sticky;
	bottom: 0;
	background: hsl(var(--color-surface));
	border-top: 2px solid hsl(var(--color-border));
	padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	box-shadow: 0 -6px 24px hsl(var(--color-foreground) / 0.06);
}
.tempo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: none;
	margin: 0 auto;
	width: 100%;
}
.tempo-icon {
	font-size: 1.4rem;
}
.tempo input[type='range'] {
	flex: 1;
	height: 2rem;
	accent-color: hsl(var(--color-primary));
}
.tempo-value {
	min-width: 2.5rem;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: hsl(var(--color-muted-foreground));
}

.buttons {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
	max-width: none;
	margin: 0 auto;
	width: 100%;
}
/* Sekundär-Knöpfe im Transport (Rückgängig/Wiederholen/Menü) */
.t-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	padding: 0.5rem 0;
	border: none;
	border-radius: 1rem;
	background: hsl(var(--color-muted));
	color: hsl(var(--color-foreground));
	cursor: pointer;
	transition: transform 0.06s ease, background-color 0.1s ease;
}
.t-btn:hover { background: hsl(var(--color-surface-hover)); }
.t-btn:active { transform: scale(0.92); }
.t-btn:disabled { opacity: 0.35; cursor: default; }
.btn-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 1.5rem;
	font-weight: 800;
	padding: 0.9rem 0.5rem;
	border: none;
	border-radius: 1rem;
	cursor: pointer;
	color: hsl(var(--color-primary-foreground));
	transition: transform 0.06s ease, filter 0.1s ease;
}
.btn-text {
	font-size: 1rem;
}
.btn:active {
	transform: scale(0.96);
}
.btn:disabled {
	opacity: 0.4;
	cursor: default;
}
.btn-play {
	background: hsl(var(--color-success));
}
.btn-play.active {
	background: hsl(var(--color-primary));
}
.btn-stop {
	background: hsl(var(--color-muted-foreground));
}
.btn-clear {
	background: hsl(var(--color-error));
}

/* --- Modus-Umschalter --- */
.modes {
	display: flex;
	gap: 0.3rem;
	background: hsl(var(--color-muted));
	padding: 0.25rem;
	border-radius: 0.85rem;
}
.mode-btn {
	font: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.45rem 0.9rem;
	border: none;
	border-radius: 0.65rem;
	background: transparent;
	color: hsl(var(--color-muted-foreground));
	cursor: pointer;
}
.mode-btn.active {
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
	box-shadow: 0 1px 4px hsl(var(--color-foreground) / 0.12);
}

/* --- Studio: Beat-Quellen --- */
.beat-sources {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.src-btn {
	flex: 1;
	min-width: 7rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	font: inherit;
	font-weight: 700;
	font-size: 1.6rem;
	padding: 0.9rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 1rem;
	background: hsl(var(--color-surface));
	cursor: pointer;
}
.src-btn span {
	font-size: 0.9rem;
}
.src-btn:active {
	transform: scale(0.97);
}

/* --- Studio: geladener Beat + Wellenform --- */
.beat-loaded {
	margin-top: 0.9rem;
}
.wave {
	width: 100%;
	height: 80px;
	background: hsl(var(--color-muted));
	border-radius: 0.6rem;
	display: block;
}
.beat-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
	font-weight: 600;
}
.bpm-box {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: hsl(var(--color-muted-foreground));
}
.bpm-box strong {
	color: hsl(var(--color-foreground));
	font-variant-numeric: tabular-nums;
}
.mini-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-size: 0.85rem;
	padding: 0.35rem 0.45rem;
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.5rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-muted-foreground));
	cursor: pointer;
}

/* --- Studio: Aufnahme --- */
.rec-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.btn-rec {
	background: hsl(var(--color-error));
	flex: 0 0 auto;
	min-width: 11rem;
}
.btn-rec.active {
	animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
	50% { filter: brightness(1.25); }
}
.monitor {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	color: hsl(var(--color-muted-foreground));
}
.meter {
	flex: 1;
	min-width: 6rem;
	height: 0.85rem;
	background: hsl(var(--color-muted));
	border-radius: 0.5rem;
	overflow: hidden;
}
.meter-fill {
	height: 100%;
	width: 0%;
	background: hsl(var(--color-success));
	transition: width 0.05s linear;
}
.takes {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.take {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.7rem;
	background: hsl(var(--color-muted));
	border-radius: 0.65rem;
	font-weight: 600;
}
.take input[type='checkbox'] {
	width: 1.2rem;
	height: 1.2rem;
	flex: 0 0 auto;
}
.take-name {
	flex: 1;
	min-width: 4rem;
	font: inherit;
	font-weight: 600;
	padding: 0.3rem 0.5rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	background: transparent;
	color: hsl(var(--color-foreground));
}
.take-name:focus {
	outline: none;
	border-color: hsl(var(--color-border));
	background: hsl(var(--color-surface));
}
.take-vol {
	flex: 0 0 5.5rem;
	width: 5.5rem;
	accent-color: hsl(var(--color-success));
}
.btn-export {
	background: hsl(var(--color-primary));
}
.export-opts {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	max-width: none;
	margin: 0 auto;
	width: 100%;
	font-weight: 600;
	color: hsl(var(--color-muted-foreground));
}

/* --- Studio: Klang (Vocal-Effekte) --- */
.klang-row {
	margin-bottom: 0.8rem;
}
.klang-preset {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
}
.klang-select {
	font: inherit;
	font-weight: 600;
	padding: 0.45rem 0.7rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.65rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
}
.klang-sliders {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.klang-sliders label {
	display: grid;
	grid-template-columns: 4rem 1fr;
	align-items: center;
	gap: 0.75rem;
	font-weight: 600;
	color: hsl(var(--color-muted-foreground));
}
.klang-sliders input[type='range'] {
	width: 100%;
	height: 1.6rem;
	accent-color: hsl(var(--color-primary));
}
.hint {
	margin: 0;
	color: hsl(var(--color-muted-foreground));
	font-size: 1.05rem;
	line-height: 1.5;
}

/* --- Stimme-Panel (Aufnahme direkt neben Beat & Melodie) --- */
.stimme {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.stimme-rec {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.stimme-take {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-wrap: wrap;
}
.stimme-take .wave {
	height: 60px;
	flex: 1;
	min-width: 12rem;
}
.stimme-take-ctl {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.v-vol-label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 1.1rem;
}
/* Versatz/Latenz-Ausgleich der Stimme: Icon · Beschriftung · Regler · ms · Reset */
.v-offset {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex: 1 1 16rem;
	min-width: 12rem;
	color: hsl(var(--color-muted-foreground));
}
.v-offset-ic { display: inline-flex; flex: 0 0 auto; }
.v-offset-cap { font-weight: 700; flex: 0 0 auto; }
.v-offset input[type='range'] { flex: 1; min-width: 6rem; }
.v-offset-val {
	flex: 0 0 auto;
	min-width: 3.6rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: hsl(var(--color-foreground));
}
.stimme-fx {
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.7rem;
	padding: 0.3rem 0.7rem;
	background: hsl(var(--color-surface));
}
.stimme-fx summary {
	cursor: pointer;
	font-weight: 700;
	padding: 0.35rem 0;
	color: hsl(var(--color-muted-foreground));
}
.stimme-fx[open] summary { margin-bottom: 0.4rem; }
.stimme-note {
	margin: 0;
	font-size: 0.85rem;
	color: hsl(var(--color-muted-foreground));
	font-weight: 600;
}

/* ============================================================
   Live spielen (eigene Seite): Klaviatur + MPC-Drumpads
   ============================================================ */
body.live-open #viz { display: none; }
#live-main {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: radial-gradient(circle at 50% 30%, hsl(220 26% 20%), hsl(222 30% 12%));
	color: hsl(0 0% 92%);
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0.5rem 1rem;
	gap: 0.7rem;
}
/* Dunkles Instrument-Layout: Kopfzeile/Texte hell halten */
#live-main .st-title { color: hsl(25 100% 62%); }
#live-main .st-back { background: hsl(220 20% 26%); color: hsl(0 0% 92%); border-color: hsl(220 16% 36%); }
#live-main .klang-preset { color: hsl(0 0% 88%); font-weight: 600; }
#live-main .live-tip { color: hsl(0 0% 68%); }
.live-tabs { margin-left: auto; display: flex; gap: 0.3rem; background: hsl(220 20% 24%); padding: 0.25rem; border-radius: 0.7rem; }
.live-tab {
	font: inherit;
	font-weight: 700;
	padding: 0.4rem 0.9rem;
	border: none;
	border-radius: 0.55rem;
	background: transparent;
	color: hsl(0 0% 72%);
	cursor: pointer;
}
.live-tab.active { background: hsl(220 24% 34%); color: hsl(25 100% 64%); }
.live-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.live-view[hidden] { display: none !important; }
.live-bar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.live-oct { display: flex; gap: 0.3rem; }
#live-main .live-oct .mini-btn { background: hsl(220 20% 26%); color: hsl(0 0% 88%); border-color: hsl(220 16% 36%); }
.live-tip { font-size: 0.9rem; }

/* Klaviatur — füllt die ganze Breite (bis zu den Seiten), vertikal zentriert */
.live-piano {
	position: relative;
	width: 100%;
	max-width: none;
	height: clamp(13rem, 56vh, 26rem);
	margin: auto 0; /* vertikal zentriert; horizontal volle Breite */
	user-select: none;
	touch-action: manipulation;
}
.piano-whites { display: flex; height: 100%; gap: 2px; }
.piano-key {
	border: none;
	cursor: pointer;
	font: inherit;
	padding: 0;
}
.piano-key.white {
	flex: 1;
	background: linear-gradient(hsl(0 0% 100%), hsl(0 0% 93%));
	border: 1px solid hsl(220 15% 60%);
	border-radius: 0 0 0.5rem 0.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 0.5rem;
	box-shadow: 0 4px 6px hsl(220 30% 8% / 0.45);
}
.piano-key.white.hit { background: linear-gradient(hsl(25 100% 70%), hsl(25 100% 60%)); }
.key-lbl { font-size: 0.74rem; font-weight: 700; color: hsl(220 14% 42%); pointer-events: none; }
.piano-key.black {
	position: absolute;
	top: 0;
	height: 62%;
	width: calc(100% / 15 * 0.6);
	transform: translateX(-50%);
	background: linear-gradient(hsl(220 16% 26%), hsl(222 24% 10%));
	border-radius: 0 0 0.35rem 0.35rem;
	box-shadow: 0 3px 5px hsl(220 30% 5% / 0.6);
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 0.3rem;
}
.piano-key.black.hit { background: linear-gradient(hsl(25 100% 62%), hsl(25 100% 50%)); }
.key-lbl-b { font-size: 0.6rem; font-weight: 700; color: hsl(0 0% 78%); pointer-events: none; }
.piano-key.black.hit .key-lbl-b { color: hsl(0 0% 100%); }

/* MPC-Drumpads */
.live-mpc {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 0.6rem;
}
.mpc-pad {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 4rem;
	border: none;
	border-radius: 1rem;
	background: hsl(var(--pad-color, 25 90% 55%));
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	box-shadow: 0 3px 0 hsl(220 25% 18% / 0.25);
	transition: transform 0.06s, filter 0.06s;
}
.mpc-ic { display: flex; }
.mpc-ic .ic { width: 26px; height: 26px; }
.mpc-lbl { font-size: 0.82rem; }
.mpc-key {
	position: absolute;
	top: 0.4rem; right: 0.5rem;
	font-size: 0.7rem;
	opacity: 0.8;
	background: hsl(0 0% 100% / 0.25);
	border-radius: 0.3rem;
	padding: 0.05rem 0.3rem;
}
.mpc-pad.hit, .mpc-pad.held { transform: translateY(2px) scale(0.97); filter: brightness(1.2); box-shadow: 0 1px 0 hsl(220 25% 18% / 0.25); }

/* --- Song-Bibliothek (Overlay) --- */
.songs-new {
	width: 100%;
	margin: 0.4rem 0 0.8rem;
}
.songs-list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	max-height: 60vh;
	overflow-y: auto;
}
.song-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.7rem;
	padding: 0.3rem 0.4rem;
}
.song-item.active {
	border-color: hsl(var(--color-primary, 25 100% 50%));
	background: hsl(var(--color-surface-hover));
}
.song-open {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	background: transparent;
	border: none;
	cursor: pointer;
	font: inherit;
	text-align: left;
	padding: 0.35rem 0.4rem;
	min-width: 0;
}
.song-name {
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.song-name-ic { display: inline-flex; align-items: center; gap: 0.4rem; }
.song-name-ic .ic { color: hsl(var(--color-primary)); flex: 0 0 auto; }
.song-date {
	font-size: 0.78rem;
	color: hsl(var(--color-muted-foreground));
	font-variant-numeric: tabular-nums;
}
/* Reiter Grooves | Songs im Vorlagen-Overlay */
.tpl-tabs {
	display: flex;
	gap: 0.4rem;
	margin: 0.2rem 0 0.5rem;
}
.tpl-tab {
	flex: 1;
	font: inherit;
	font-weight: 700;
	padding: 0.45rem 0.6rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.6rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-muted-foreground));
	cursor: pointer;
}
.tpl-tab.active {
	background: hsl(var(--color-primary));
	border-color: hsl(var(--color-primary));
	color: hsl(var(--color-primary-foreground));
}
.tpl-tab:active { transform: scale(0.96); }
/* Song-Zeile mit Erklärung (zweizeilig) */
.song-open-top { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; }
.song-open-top .song-name { flex: 1; }
.song-blurb {
	font-size: 0.82rem;
	line-height: 1.3;
	color: hsl(var(--color-muted-foreground));
	white-space: normal;
	margin-top: 0.15rem;
}

/* --- Visualizer (Frequenz-Balken, sitzt als Hintergrund hinter dem Inhalt) --- */
.viz {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1; /* hinter allem Inhalt, über dem Body-Hintergrund */
	pointer-events: none;
	opacity: 0.6;
}
.viz[hidden] { display: none; }

/* --- Mini-Mixer (Overlay) --- */
.mx-channels {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 0.6rem;
}
.mx-ch {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.mx-name {
	flex: 0 0 8.5rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	min-width: 0;
}
.mx-name .row-icon { flex: 0 0 auto; }
.mx-name span:last-child {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.mx-ch .track-btn { width: 2.1rem; height: 2.1rem; opacity: 0.6; }
.mx-vol {
	flex: 1;
	min-width: 5rem;
}
.mx-mute {
	flex: 0 0 auto;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.35rem 0.5rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.6rem;
	background: hsl(var(--color-surface));
	cursor: pointer;
	opacity: 0.45;
}
.mx-mute.active {
	opacity: 1;
	border-color: hsl(var(--color-error));
	background: hsl(var(--color-error) / 0.14);
}

/* --- Beatbox-Trigger + Overlay --- */
.bauen-tools {
	max-width: none;
	margin: 0 auto 0.75rem;
	display: flex;
	justify-content: flex-end;
}
.tool-pill {
	font: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.5rem 0.9rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 999px;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
	cursor: pointer;
}
.tool-pill:active { transform: scale(0.96); }

/* --- Takt-Leiste (Song aus mehreren Takten) --- */
.bars {
	max-width: none;
	margin: 0 auto 0.6rem;
	display: flex;
	gap: 0.4rem;
	align-items: center;
	overflow-x: auto;
	padding: 0.1rem;
}
.bar-chip,
.bar-add,
.bar-del {
	flex: 0 0 auto;
	height: 2.4rem;
	font: inherit;
	font-weight: 800;
	border-radius: 0.6rem;
	cursor: pointer;
}
.bar-add,
.bar-del {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: hsl(var(--color-muted-foreground));
}
.bar-chip {
	min-width: 2.4rem;
	border: 2px solid hsl(var(--color-border));
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
}
.bar-chip.bar-labeled {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
	padding: 0 0.5rem;
	line-height: 1;
}
.bar-chip .bar-num { font-size: 0.85rem; }
.bar-chip .bar-label {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.75;
}
.bar-chip.active .bar-label { opacity: 0.95; }
.bar-chip.active {
	background: hsl(var(--color-primary));
	border-color: hsl(var(--color-primary));
	color: hsl(var(--color-primary-foreground));
}
.bar-add {
	width: 2.4rem;
	border: 2px dashed hsl(var(--color-border));
	background: transparent;
	color: hsl(var(--color-muted-foreground));
}
.bar-del {
	margin-left: auto;
	width: 2.4rem;
	font-size: 1.1rem;
	border: none;
	background: transparent;
}
.bar-chip:active,
.bar-add:active { transform: scale(0.92); }

.overlay {
	position: fixed;
	inset: 0;
	background: hsl(220 25% 12% / 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 50;
}
.overlay-card {
	background: hsl(var(--color-background));
	border-radius: 1.25rem;
	padding: 1.25rem;
	max-width: 540px;
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	position: relative;
	box-shadow: 0 20px 60px hsl(220 25% 12% / 0.4);
}
.overlay-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border: none;
	border-radius: 50%;
	background: hsl(var(--color-muted));
	cursor: pointer;
}
.overlay-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 1.4rem; }
.overlay-title .ic { color: hsl(var(--color-primary)); }
.bb-h3 { margin: 1.1rem 0 0.4rem; font-size: 1.05rem; }
.hint-sm { font-size: 0.85rem; color: hsl(var(--color-muted-foreground)); font-weight: 500; }

.bb-teach {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.bb-teach-btn {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font: inherit;
	font-weight: 700;
	padding: 0.5rem 0.7rem;
	border: 2px solid hsl(var(--color-border));
	border-radius: 0.75rem;
	background: hsl(var(--color-surface));
	cursor: pointer;
}
.bb-teach-btn .bb-ic { display: inline-flex; align-items: center; }
.bb-teach-btn .bb-mark { display: inline-flex; align-items: center; color: hsl(var(--color-muted-foreground)); }
.bb-teach-btn.taught { border-color: hsl(var(--color-success)); }
.bb-teach-btn.taught .bb-mark { color: hsl(var(--color-success)); }
.bb-teach-btn.rec { border-color: hsl(var(--color-error)); animation: pulse 0.8s infinite; }

.bb-result { margin-top: 1rem; }
#bb-rec, #sm-rec { width: 100%; margin-top: 0.5rem; }
.sens-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.7rem;
	font-weight: 600;
	color: hsl(var(--color-muted-foreground));
}
.sens-row input[type='range'] {
	flex: 1;
	height: 1.6rem;
	accent-color: hsl(var(--color-primary));
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

@media (max-width: 560px) {
	.row-label {
		width: 2.4rem;
	}
	/* Schmal: Kopfspalte so breit wie die Schalterreihe; Name bleibt sichtbar
	   (gekürzt) und antippbar, da er keine Extra-Breite mehr kostet. */
	.row-head {
		flex-basis: 5.4rem;
	}
	.row-name {
		font-size: 0.8rem;
	}
	.row-label-note {
		width: 2.4rem;
		font-size: 0.95rem;
	}
	.track-btn { width: 1.55rem; height: 1.55rem; }
	.drum-remove { width: 1.55rem; height: 1.55rem; }
	.cells {
		gap: 0.1rem;
	}
	.t-btn { width: 2.7rem; }
	.btn-text {
		display: none;
	}
}


/* ============================================================
   Studio-Modus (Aufnehmen, DAW-leicht) — Stufe T
   ============================================================ */
body.studio-open #viz { display: none; }       /* Visualizer im Studio aus */

#studio-main {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: hsl(var(--color-background));
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0.7rem 0.6rem;
	gap: 0.5rem;
	--st-head-w: 9.5rem;
	--st-lane-h: 5rem;
}
#studio-main[hidden] { display: none !important; }

.st-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
}
.st-back {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font: inherit;
	font-weight: 700;
	padding: 0.4rem 0.6rem;
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.6rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
	cursor: pointer;
}
.st-title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 1.1rem;
	color: hsl(var(--color-primary));
}
.st-zoom { margin-left: auto; display: flex; gap: 0.3rem; }
.st-zoom .t-btn { width: 2.3rem; font-size: 1.3rem; font-weight: 700; }

/* Beat-Quelle — kompakt */
.st-beatbox {
	flex: 0 0 auto;
	background: hsl(var(--color-surface));
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.8rem;
	padding: 0.6rem 0.8rem;
}
.st-beat-empty .buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.st-beat-empty .hint { margin: 0; }
.st-beat-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; }
.st-beat-name { font-weight: 700; font-size: 1rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-beat-wavecv {
	width: 100%;
	height: 38px;
	background: hsl(var(--color-muted) / 0.5);
	border-radius: 0.5rem;
}
.st-bpm-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.45rem; }
.st-bpm-field { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.st-bpm-field input {
	width: 4.5rem;
	font: inherit;
	font-weight: 700;
	padding: 0.3rem 0.45rem;
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.5rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-foreground));
}
.st-bpm-value { color: hsl(var(--color-muted-foreground)); font-weight: 700; }

/* Arrangieren: füllt den Rest des Bildschirms */
.st-arrange {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.st-transport {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
}
.st-transport .btn { min-width: auto; padding: 0.5rem 0.9rem; }
.st-transport .btn-rec { min-width: auto; }
.st-transport-spacer { flex: 1; }

/* Timeline */
.st-timeline {
	flex: 1 1 auto;
	min-height: 0;
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.8rem;
	overflow: hidden;
	background: hsl(var(--color-background));
}
.st-scroll {
	height: 100%;
	overflow: auto;
	position: relative;
}
.st-rows { position: relative; }

/* Lineal (sticky oben) */
.st-ruler {
	position: sticky;
	top: 0;
	z-index: 4;
	display: flex;
	height: 24px;
	width: max-content;
	min-width: 100%;
}
.st-ruler-corner {
	position: sticky;
	left: 0;
	z-index: 5;
	flex: 0 0 var(--st-head-w);
	width: var(--st-head-w);
	background: hsl(var(--color-surface));
	border-right: 1px solid hsl(var(--color-border));
	border-bottom: 1px solid hsl(var(--color-border));
	display: flex;
	align-items: center;
	padding-left: 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	color: hsl(var(--color-muted-foreground));
}
.st-ruler-track {
	position: relative;
	height: 100%;
	background: hsl(var(--color-muted) / 0.4);
	border-bottom: 1px solid hsl(var(--color-border));
}
.st-bar-tick {
	position: absolute;
	top: 0; bottom: 0;
	border-left: 1px solid hsl(var(--color-border));
	padding-left: 0.2rem;
	font-size: 0.7rem;
	color: hsl(var(--color-muted-foreground));
	font-weight: 700;
}

/* Zeile = Kopf (sticky links) + Spur */
.st-row {
	display: flex;
	height: var(--st-lane-h);
	border-bottom: 1px solid hsl(var(--color-border));
}
.st-row.active .st-lane { background-color: hsl(var(--color-surface-hover) / 0.35); }
.st-row-beat { background-color: hsl(var(--color-muted) / 0.25); }

.st-head {
	position: sticky;
	left: 0;
	z-index: 3;
	flex: 0 0 var(--st-head-w);
	width: var(--st-head-w);
	background: hsl(var(--color-surface));
	border-right: 1px solid hsl(var(--color-border));
	padding: 0.3rem 0.45rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	justify-content: center;
}
.st-head.active { background: hsl(var(--color-surface-hover)); box-shadow: inset 4px 0 0 hsl(var(--color-primary)); }
.st-head-beat { flex-direction: row; align-items: center; gap: 0.5rem; }
.st-head-beat .st-head-name { font-weight: 700; }
.st-head-top { display: flex; align-items: center; gap: 0.25rem; }
.st-head-name-input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-weight: 700;
	font-size: 0.82rem;
	border: none;
	background: transparent;
	color: hsl(var(--color-foreground));
	padding: 0;
}
.st-head-del {
	flex: 0 0 auto;
	width: 1.2rem; height: 1.2rem;
	border: none;
	background: transparent;
	color: hsl(var(--color-muted-foreground));
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
}
.st-head-del:hover { color: hsl(var(--color-error)); }
.st-head-ctl { display: flex; align-items: center; gap: 0.3rem; }
.st-head-vol { flex: 1; min-width: 2rem; }
.st-mini {
	width: 1.5rem; height: 1.5rem;
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.4rem;
	background: hsl(var(--color-surface));
	color: hsl(var(--color-muted-foreground));
	font-weight: 700;
	font-size: 0.78rem;
	cursor: pointer;
	flex: 0 0 auto;
	line-height: 1;
}
.st-mini.active { background: hsl(var(--color-primary)); color: hsl(var(--color-primary-foreground)); border-color: hsl(var(--color-primary)); }
.st-head-fx {
	width: 100%;
	font: inherit;
	font-size: 0.74rem;
	padding: 0.12rem 0.25rem;
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.4rem;
	background: hsl(var(--color-surface));
}

.st-lane {
	position: relative;
	height: 100%;
	background: repeating-linear-gradient(90deg, transparent, transparent calc(100% - 1px), hsl(var(--color-border) / 0.4) calc(100% - 1px), hsl(var(--color-border) / 0.4) 100%);
}
.st-lane-beat { background-color: hsl(var(--color-muted) / 0.3); }

.st-clip {
	position: absolute;
	top: 5px;
	bottom: 5px;
	border-radius: 0.5rem;
	background: hsl(var(--color-primary) / 0.18);
	border: 1.5px solid hsl(var(--color-primary));
	overflow: hidden;
	cursor: grab;
	touch-action: none;
}
.st-clip.dragging { cursor: grabbing; opacity: 0.85; z-index: 5; }
.st-clip-beat {
	background: hsl(265 70% 65% / 0.18);
	border-color: hsl(265 70% 65%);
	cursor: default;
}
.st-clip-wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.st-clip-label {
	position: absolute;
	left: 0.3rem; top: 0.2rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: hsl(var(--color-foreground));
	pointer-events: none;
}
.st-clip-del {
	position: absolute;
	right: 2px; top: 2px;
	width: 1.2rem; height: 1.2rem;
	border: none;
	border-radius: 0.3rem;
	background: hsl(var(--color-surface) / 0.85);
	color: hsl(var(--color-error));
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
}
.st-playhead {
	position: absolute;
	top: 24px;
	bottom: 0;
	width: 2px;
	background: hsl(var(--color-error));
	pointer-events: none;
	z-index: 6;
}

/* Kontextmenü (Rechtsklick / Langdruck auf einen Clip) */
.st-ctx {
	position: fixed;
	z-index: 100;
	min-width: 9rem;
	background: hsl(var(--color-surface));
	border: 1px solid hsl(var(--color-border));
	border-radius: 0.6rem;
	box-shadow: 0 8px 24px hsl(220 25% 18% / 0.18);
	padding: 0.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.st-ctx-item {
	font: inherit;
	font-weight: 600;
	text-align: left;
	padding: 0.5rem 0.7rem;
	border: none;
	border-radius: 0.4rem;
	background: transparent;
	color: hsl(var(--color-foreground));
	cursor: pointer;
}
.st-ctx-item:hover { background: hsl(var(--color-surface-hover)); }
.st-ctx-item.danger { color: hsl(var(--color-error)); }

/* ============================================================
   Startseite (Kachel-Übersicht) + Bauen-Kopfzeile
   ============================================================ */
body.home-open #viz { display: none; }

.home {
	min-height: 100vh;
	width: 100%;          /* nötig: margin:auto auf Flex-Kind unterdrückt sonst das Stretchen → Inhaltsbreite */
	max-width: 60rem;
	margin: 0 auto;
	padding: 2.2rem 1.2rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 1.7rem;
}
.home[hidden] { display: none !important; }
.home-head { text-align: center; }
.home-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.9rem;
	font-weight: 800;
	color: hsl(var(--color-primary));
}
.home-tag {
	margin: 0.45rem 0 0;
	color: hsl(var(--color-muted-foreground));
	font-size: 1.05rem;
}
.home-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}
.tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	text-align: left;
	padding: 1.3rem;
	border: 1px solid hsl(var(--color-border));
	border-top: 5px solid hsl(var(--tile-accent, var(--color-primary)));
	border-radius: 1.1rem;
	background: hsl(var(--color-surface));
	cursor: pointer;
	font: inherit;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px hsl(220 25% 18% / 0.12); }
.tile:active { transform: translateY(0); }
.tile-ic {
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: hsl(var(--tile-accent) / 0.14);
	color: hsl(var(--tile-accent));
}
.tile-title { font-size: 1.12rem; font-weight: 800; color: hsl(var(--color-foreground)); }
.tile-desc { color: hsl(var(--color-muted-foreground)); font-size: 0.92rem; line-height: 1.35; }
.tile-1 { --tile-accent: 25 100% 50%; }
.tile-2 { --tile-accent: 265 70% 60%; }
.tile-3 { --tile-accent: 190 80% 45%; }
.tile-4 { --tile-accent: 0 85% 62%; }
.tile-5 { --tile-accent: 150 60% 42%; }
.tile-6 { --tile-accent: 320 70% 58%; }

/* Bauen-Seite: schlanke Kopfzeile mit Zurück + Studio-Sprung */
.bauen-top {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0 0.7rem;
}
.bauen-top-title { font-weight: 800; color: hsl(var(--color-primary)); }
#bauen-to-studio { margin-left: auto; }