/* KW Atelier – System-Seiten: geteilte Basis (Bühne, Band, Registerleiste).
   Bedingt geladen von Frontend\FrontendTemplates. Doku: assets/css/frontend/CLAUDE.md */

.kwat-view,
.kwat-view *,
.kwat-view *::before,
.kwat-view *::after {
	box-sizing: border-box;
}

/* ── Bühne: dieselbe Breite wie die Hülle, Abstand nach oben und zum Footer ──
   Der Seitenkopf ist full-bleed (siehe page-header.css); das Inhaltsband ist deshalb
   eine eigenständige Karte darunter – im Entwurf docken beide aneinander an, live
   fluchten ihre Kanten nicht (Kopf bis zum Viewport-Rand, Band bis --kwat-shell-max). */
.kwat-view {
	max-width: var(--kwat-shell-max);
	margin-inline: auto;
	padding-inline: var(--kwat-shell-pad);
	padding-block: var(--kwat-space-lg) var(--kwat-space-2xl);
	font-family: var(--kwat-font-body);
	color: var(--kwat-color-text);
}

/* ── Das Band: die Fläche, auf der jede Ansicht spielt ── */
.kwat-view__band {
	position: relative;
	padding: clamp(1.5rem, 1rem + 2vw, 3.25rem) clamp(1.25rem, 0.9rem + 2vw, 3.25rem) clamp(1.75rem, 1.2rem + 2.2vw, 3.5rem);
	background:
		radial-gradient(720px 320px at 90% -10%, color-mix(in srgb, var(--kwat-color-accent) 5%, transparent), transparent 60%),
		linear-gradient(160deg, var(--kwat-color-surface) 0%, var(--kwat-color-bg) 70%);
	border: 1px solid var(--kwat-color-border);
	border-radius: var(--kwat-radius-lg);
	overflow: clip;
}

/* Gold-Haarlinie an der Oberkante – dieselbe Signatur wie am Seitenkopf. */
.kwat-view__band::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--kwat-color-accent) 20%, var(--kwat-color-accent-hover) 50%, var(--kwat-color-accent) 80%, transparent);
}

/* ── Registerleiste: echte Reiter, geteilt von Suche und Chronik ──
   KEIN overflow-x: auto – CSS zieht die andere Achse dann automatisch auf `auto` mit,
   und der 1px-Fortsatz des aktiven Reiters löst einen sichtbaren Scrollbalken aus.
   Umbruch ist hier ohnehin besser (kein waagerechtes Scrollen nötig, WCAG-Reflow). */
.kwat-view__reg {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: flex-end;
	border-block-end: 1px solid var(--kwat-color-border-strong);
}

.kwat-view__tab {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--kwat-space-2);
	min-height: 44px;
	padding: 0.625rem 1.0625rem 0.6875rem;
	color: var(--kwat-color-text-muted);
	font-size: var(--kwat-text-sm);
	font-weight: 600;
	text-decoration: none;
	background: color-mix(in srgb, var(--kwat-color-page) 55%, transparent);
	border: 1px solid transparent;
	border-block-end: 0;
	border-radius: 7px 7px 0 0;
	transition: color var(--kwat-transition), background var(--kwat-transition);
}

.kwat-view__tab-count {
	font-size: var(--kwat-text-xs);
	color: color-mix(in srgb, var(--kwat-color-text-muted) 80%, transparent);
	font-variant-numeric: tabular-nums;
}

.kwat-view__tab[aria-current] {
	color: var(--kwat-color-text);
	background: color-mix(in srgb, var(--kwat-color-surface) 92%, var(--kwat-color-accent));
	border-color: var(--kwat-color-border-strong);
}

/* Der aktive Reiter schließt die Trennlinie – so hängt er wirklich am Kasten. */
.kwat-view__tab[aria-current]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	height: 1px;
	background: color-mix(in srgb, var(--kwat-color-surface) 92%, var(--kwat-color-accent));
}

.kwat-view__tab[aria-current] .kwat-view__tab-count {
	color: var(--kwat-color-accent-hover);
}

@media (hover: hover) {
	.kwat-view__tab:hover {
		color: var(--kwat-color-text);
		background: color-mix(in srgb, var(--kwat-color-surface) 60%, transparent);
	}
}

.kwat-view__tab:focus-visible {
	outline: 3px solid var(--kwat-color-accent-hover);
	outline-offset: -2px;
}

/* ── Geteilter Rückweg-/Textlink (Gold, unterstrichen) ── */
.kwat-view__back {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	min-height: 44px;
	color: var(--kwat-color-accent-hover);
	font-weight: 600;
	text-decoration: none;
	border-block-end: 1px solid color-mix(in srgb, var(--kwat-color-accent) 42%, transparent);
}

.kwat-view__back-icon {
	width: 0.95em;
	height: 0.95em;
	flex: none;
}

@media (hover: hover) {
	.kwat-view__back:hover {
		color: var(--kwat-color-text);
		border-color: var(--kwat-color-accent-hover);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kwat-view__tab {
		transition: none;
	}
}

@media (forced-colors: active) {
	.kwat-view__band {
		border: 1px solid CanvasText;
	}
}