/* KW Atelier – Hülle-Basis (immer, ZUERST geladen): Reset, Container-Tokens, Site-Design-Autorität, Skip-Link. Gescoped .kwat-*. Tokens: tokens.css. Doku: assets/css/frontend/CLAUDE.md */

/* ── Hülle-Reset (Hello-Reset ist abgeschaltet) ──────────────────────── */
/* WICHTIG: Jeder Hülle-Baustein, der NICHT in .kwat-nav steckt, braucht seinen
   eigenen box-sizing-Reset (sie sind Geschwister, keine Nav-Kinder). Sonst addiert
   `width:100%` + Padding über den Viewport hinaus → horizontaler Scrollbalken. */
.kwat-nav,
.kwat-nav *,
.kwat-nav *::before,
.kwat-nav *::after,
.kwat-prenav,
.kwat-prenav *,
.kwat-prenav *::before,
.kwat-prenav *::after,
.kwat-search,
.kwat-search *,
.kwat-search *::before,
.kwat-search *::after,
.kwat-mobile,
.kwat-mobile *,
.kwat-mobile *::before,
.kwat-mobile *::after {
	box-sizing: border-box;
}

/* Hello-Korrektur (Ursache, nicht Symptom): der Standard-Inhaltscontainer
   `main.site-main` bekommt von Hello bei schmalen Viewports `width` + seitliches
   Padding mit `box-sizing: content-box` und ein `margin-right: -20px` → seine
   Border-Box wird ~20px breiter als der Viewport (horizontaler Scrollbalken @≤375px).
   `border-box` legt das Padding nach INNEN → der Container passt exakt, ohne Hellos
   Margins/Zentrierung anzutasten. KW Atelier ist die Site-Autorität (zähmt Hello
   bereits an anderer Stelle). Bewusst KEIN globales `overflow-x: hidden` (würde echte
   künftige Überläufe nur verstecken). */
main.site-main {
	box-sizing: border-box;
}

/* ── Container-Breite: full-bleed Leiste, Inhalt wächst mit (große Schirme) ── */
:root {
	--kwat-shell-max: 1760px;
	--kwat-shell-pad: clamp(1rem, 3vw, 3rem);
	--kwat-nav-h: 84px;
	--kwat-nav-h-scrolled: 64px;
	/* Die beiden Gold-Haarlinien der Leiste. Sie zählen zur sichtbaren Höhe – wer
	   etwas unter der Leiste verankert, muss sie mitrechnen (Mobil-Kasten). */
	--kwat-nav-rule: 1px;
	/* Höhe der mobilen Aktionsleiste – Inhalte darüber brauchen so viel Polster
	   nach unten, sonst endet ihre letzte Zeile hinter der fixen Leiste. */
	--kwat-botbar-h: 80px;
	/* PreNav-Höhe: Fallback, bis prenav.js die echte Höhe misst (Sticky-Offset). */
	--kwat-prenav-h: 42px;
	--kwat-prenav-bg: color-mix(in srgb, var(--kwat-color-bg) 78%, #000);
	--kwat-prenav-fg: color-mix(in srgb, var(--kwat-color-text) 80%, var(--kwat-color-text-muted));
	/* Bernstein-Ton für „Schließt bald": Gold + Danger aus den Tokens gemischt. */
	--kwat-prenav-warning: color-mix(in srgb, var(--kwat-color-accent) 62%, var(--kwat-color-danger));
	/* Höhe der WP-Adminleiste (nur für eingeloggte Vorschau gesetzt). */
	--kwat-adminbar: 0px;
	/* Karteikarten-Papier der Hülle (Navigations-Karte, Mobil-Kasten, Wochenplan).
	   Bewusst marken-fremd wie Autorenkarte und Gästebuch – auf diesem Papier hat
	   Gold nur 1,8:1, deshalb tragen Verweise dort Marineblau. */
	--kwat-paper: #f0e6d2;
	--kwat-paper-2: #e6dac2;
	--kwat-paper-ink: #2f2a24;
	--kwat-paper-ink-soft: #5d5449;
	--kwat-paper-rule: #cbbb9c;
	--kwat-paper-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
}

/* ── Seiten-Grundlage: KW Atelier als Site-Design-Autorität ──────────────
   Hellos Stylesheet ist abgeschaltet → der Inhaltsbereich (body / main.site-main)
   wäre sonst weiß mit schwarzem Times-Default (gemessen). Wir liefern den dunklen
   Marken-Hintergrund + lesbare Basis-Typografie (wie KW Lobby/Biohof). Alle Werte
   stammen aus den Design-Tab-Tokens (color_page/color_text/font_body) → dort editierbar.
   Die Leinwand ist die DUNKELSTE Schicht (#1c1f22); die Hülle-Bänder und Sektionen
   (--kwat-color-bg/-surface) liegen heller darüber → geschichtete Tiefe (Mockup).
   Elementor-Sektionen mit eigenem Hintergrund/Typografie übersteuern das wie gehabt.
   Bewusste, dokumentierte Ausnahme von „nur .kwat-*" (siehe assets/css/CLAUDE.md). */
body {
	background-color: var(--kwat-color-page);
	color: var(--kwat-color-text);
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-base);
	line-height: 1.6;
}

/* Ungestaltete Inhalts-Überschriften (Hellos `.site-main`) erben die Marken-Schrift,
   damit nicht Times-Serif neben Hanken steht. `:where()` = 0 Spezifität → Elementor
   und jede eigene Regel übersteuert mühelos. */
:where(.site-main) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--kwat-font-heading);
	color: var(--kwat-color-text);
	line-height: 1.15;
}

/* Reine Inhalts-Links (ohne Klasse = kein Elementor/Theme-Element) golden statt
   Default-Blau (Kontrast auf Dunkel). Elementor-Links tragen Klassen → unberührt. */
:where(.site-main) a:not([class]) {
	color: var(--kwat-color-accent);
}

:where(.site-main) a:not([class]):hover {
	color: var(--kwat-color-accent-hover);
}

/* ── Seite still stellen, solange ein Overlay offen ist ──────────────────
   Ein modaler <dialog> sperrt das Scrollen NICHT von selbst (gemessen: Mausrad 580px,
   Taste „Ende" 4964px hinter dem offenen Menü). Wer es schloss, stand woanders auf der
   Seite. `scrollbar-gutter` hält dabei die Breite konstant, sonst springt das Layout in
   dem Moment, in dem der Balken verschwindet. */
html:has(.kwat-mobile[open]),
html:has(.kwat-search[open]) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* ── Skip-Link ───────────────────────────────────────────────────────── */
.kwat-skip-link {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transform: translateY(-120%);
	margin: var(--kwat-space-2);
	padding: var(--kwat-space-3) var(--kwat-space-4);
	background: var(--kwat-color-accent);
	color: var(--kwat-color-text-inverse);
	font-family: var(--kwat-font-body);
	font-weight: 600;
	border-radius: var(--kwat-radius-sm);
	text-decoration: none;
	transition: transform var(--kwat-transition);
}

.kwat-skip-link:focus {
	transform: translateY(0);
}

.kwat-main-anchor {
	display: block;
	height: 0;
	scroll-margin-top: var(--kwat-nav-h);
}

/* ── Geteilte CTA-Knopf-Optik (`.kwat-nav__cta`) ─────────────────────────
   Basis-Optik des Gold-Handlungsknopfes – von Navigation, Botbar UND Hero
   genutzt (Markup-Klasse historisch „nav__cta"). Liegt in der immer geladenen
   Basis, damit der Knopf auch ohne aktive Navigation gestylt ist (z. B. der
   Hero-CTA). Kontextspezifische Varianten (`--bar`, Botbar) bleiben in
   navigation.css. */
.kwat-nav__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	min-height: 44px;
	padding: 0 var(--kwat-space-5);
	background: linear-gradient(180deg, var(--kwat-color-accent-hover), var(--kwat-color-accent));
	color: var(--kwat-color-text-inverse);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--kwat-radius-md);
	box-shadow: var(--kwat-shadow-cta);
	transition: transform var(--kwat-transition);
}

.kwat-nav__cta-icon {
	width: 1.1em;
	height: 1.1em;
}

@media (hover: hover) {
	.kwat-nav__cta:hover {
		transform: translateY(-1px);
	}
}