/* ==========================================================================
   KIO516 – Portwell
   Einzige Quelle der Wahrheit für Styles. Keine Inline-Styles im Markup,
   kein hartes Styling in den Element-Klassen (Leitfaden §9).

   Aufbau:
     1. Design-Tokens
     2. Umgebungs-Resets (Bricks/WordPress-Defaults neutralisieren)
     3. Layout-Primitive (Container, Section)
     4. Typografie-Basis
     5. Komponenten (je Sektion ein Block, wächst mit dem Bau)
     6. Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens

   Farben: 1:1 aus den Figma-Variablen (Primitives + Semantic Collection).
   Typografie, Radien, Abstaende: aus dem Design-Context der Startseite.
   Nichts hiervon ist geschaetzt.

   Regel fuer den Bau: Sektionen benutzen die SEMANTISCHEN Tokens
   (--kio-bg-*, --kio-text-*, --kio-action-*), nicht die Primitives. Ein
   Farbwechsel im Design ist damit eine Zeile, kein Suchlauf.
   -------------------------------------------------------------------------- */

:root {
	/* --- Primitives ------------------------------------------------------ */
	--kio-purple-300: #4500f9;
	--kio-purple-400: #a11eff;
	--kio-purple-500: #8552fa;
	--kio-purple-600: #8752fa;   /* fast identisch mit 500 – im Design pruefen */
	--kio-purple-700: #6006ed;
	--kio-purple-800: #512ca7;
	--kio-purple-900: #09011a;

	--kio-neutral-0:   #ffffff;
	--kio-neutral-100: #fdfdfe;
	--kio-neutral-200: #f6f6f6;
	--kio-neutral-400: #d9d9d9;
	--kio-neutral-500: #b6b6b6;
	--kio-neutral-600: #414141;
	--kio-neutral-700: #202020;
	--kio-neutral-800: #161616;
	--kio-neutral-900: #000000;

	--kio-neon: #d9ff00;

	/* --- Semantisch ------------------------------------------------------ */
	--kio-bg-primary:   var(--kio-neutral-0);
	--kio-bg-secondary: var(--kio-neutral-200);
	--kio-bg-dark:      var(--kio-neutral-800);
	--kio-bg-darkest:   var(--kio-purple-900);
	--kio-bg-brand:     var(--kio-purple-700);

	--kio-surface-card:      var(--kio-neutral-0);
	--kio-surface-card-dark: var(--kio-neutral-700);
	--kio-surface-overlay:   var(--kio-purple-900);

	--kio-text-primary:   var(--kio-neutral-700);
	--kio-text-secondary: var(--kio-neutral-600);
	--kio-text-on-dark:   var(--kio-neutral-0);
	--kio-text-brand:     var(--kio-purple-700);
	--kio-text-link:      var(--kio-purple-700);
	--kio-text-muted:     var(--kio-neutral-500);

	--kio-border-default: var(--kio-neutral-200);
	--kio-border-subtle:  var(--kio-neutral-400);
	--kio-border-brand:   var(--kio-purple-700);
	--kio-border-on-dark: var(--kio-neutral-0);
	--kio-border-accent:  var(--kio-neon);

	--kio-action-primary:       var(--kio-purple-700);
	--kio-action-primary-hover: var(--kio-purple-800);
	--kio-action-secondary:     var(--kio-purple-400);
	--kio-action-accent:        var(--kio-neon);

	/* --- Schrift ---------------------------------------------------------
	   --kio-font-headline traegt die Hausschrift der beiden 48px-H1.
	   Solange die Datei fehlt, greift der Rueckfall auf die Arbeitsschrift;
	   der Tausch ist genau diese eine Zeile.                              */
	--kio-font-headline: 'Portwell', 'Google Sans Flex', system-ui, sans-serif;
	--kio-font-body:     'Google Sans Flex', system-ui, -apple-system, sans-serif;
	--kio-font-mono:     'Google Sans Code', ui-monospace, SFMono-Regular, monospace;

	--kio-fw-light:  300;
	--kio-fw-normal: 400;
	--kio-fw-medium: 500;

	/* Skala: die Bruchwerte des Designs (14.22 / 19.02 / 23.04) stammen aus
	   skalierten Komponenten-Instanzen und sind auf ganze Pixel gerundet. */
	--kio-fs-12: 12px;   /* Eyebrow klein (Termine), Meta */
	--kio-fs-14: 14px;   /* Karten-Fliesstext */
	--kio-fs-15: 15px;
	--kio-fs-16: 16px;   /* Eyebrow, Basis */
	--kio-fs-18: 18px;
	--kio-fs-19: 19px;
	--kio-fs-23: 23px;   /* Karten-Ueberschriften */
	--kio-fs-26: 26px;
	--kio-fs-32: 32px;
	--kio-fs-36: 36px;   /* H2 Sektionen */
	--kio-fs-48: 48px;   /* H1 */

	--kio-lh-20: 20px;
	--kio-lh-24: 24px;
	--kio-lh-38: 38px;   /* H2 */

	/* --- Raster ----------------------------------------------------------
	   Figma: 12 Spalten, Spaltenbreite 70px, Offset 0, Gutter 36px.
	   Inhaltsbreite = 12 x 70 + 11 x 36 = 1236px. Gegengeprueft an der
	   Startseite: Inhalt laeuft von x=138 bis x=1374, das sind exakt 1236px.
	   Die Spaltenbreite ist im Design fix, im Browser darf sie mitwachsen –
	   das Verhaeltnis Spalte:Gutter bleibt ueber 1fr erhalten.            */
	--kio-spalten: 12;
	--kio-gutter: 36px;
	--kio-inhalt-max: 1236px;
	--kio-inhalt-pad: clamp(20px, 4vw, 32px);

	/* --- Abstaende -------------------------------------------------------
	   Aus dem Design gemessen: getoente Sektionen haben 78-80px Innenabstand
	   oben und unten, Eyebrow zu H2 sind 27px, H2 zu Inhalt 61px.         */
	--kio-sec-y: clamp(48px, 6vw, 80px);
	--kio-gap-eyebrow: 11px;
	--kio-gap-titel: 24px;
	--kio-gap-6: 6px;
	--kio-gap-8: 8px;
	--kio-gap-12: 12px;
	--kio-gap-16: 16px;
	--kio-gap-24: 24px;
	--kio-gap-32: 32px;
	--kio-gap-40: 40px;

	/* --- Radien ----------------------------------------------------------
	   Haeufigkeit im Design: 10px (30x), 8px (29x), 32px (12x), 16px (8x),
	   50px (5x, Pillen), 12px (4x).                                       */
	--kio-radius-8:  8px;
	--kio-radius-10: 10px;
	--kio-radius-12: 12px;
	--kio-radius-16: 16px;
	--kio-radius-32: 32px;
	--kio-radius-pille: 50px;

	/* --- Bewegung -------------------------------------------------------- */
	--kio-transition: 180ms ease;

	/* Headerhoehe – steuert scroll-margin-top der Anker. Wird gesetzt,
	   sobald der Header gebaut ist. */
	--kio-header-h: 96px;
}

/* --------------------------------------------------------------------------
   2. Umgebungs-Resets

   Drei Bricks/WordPress-Defaults verfälschen jeden 1:1-Nachbau eines Designs
   (Leitfaden §9.2). Sie werden hier auf der Root-Klasse neutralisiert, nicht
   global – damit fremde Plugin-Ausgaben unberührt bleiben.
   -------------------------------------------------------------------------- */

/* Bricks vererbt global line-height 1.7, Überschriften zusätzlich 1.4.
   Design-Dateien setzen keine → normal. */
.kio-page {
	line-height: normal;
}

.kio-page :where(h1, h2, h3, h4, h5, h6) {
	line-height: normal;
	margin: 0;
}

.kio-page :where(p, ul, ol, figure, blockquote) {
	margin: 0;
}

/* Bricks stylt generische Tags per Element-Selektor (Leitfaden §4.3).
   Eigene Klassen ohne diese Properties erben Serif, VERSAL und zentriert. */
.kio-page blockquote {
	margin: 0;
	padding-left: 0;
	border-left: 0;
	font-family: inherit;
	font-size: inherit;
}

.kio-page blockquote cite {
	font-family: inherit;
	font-style: normal;
	text-transform: none;
	opacity: 1;
}

.kio-page figcaption {
	text-align: left;
}

.kio-page img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   3. Layout-Primitive

   Bricks' section/container/block rendern als
   display:flex; flex-direction:column; align-items:center|flex-start.
   Ein max-width-Kind darin schrumpft auf Inhaltsbreite → „alles zu eng"
   (Leitfaden §4.1). width:100% ist der entscheidende Teil.
   -------------------------------------------------------------------------- */

.kio-page .kio-inner {
	display: block;
	width: 100%;
	max-width: var(--kio-inhalt-max);
	margin-inline: auto;
	padding-inline: var(--kio-inhalt-pad);
}

/* Volle Breite ohne Seitenpolster – für randlose Bühnen. */
.kio-page .kio-inner--voll {
	max-width: none;
	padding-inline: 0;
}

/* Bricks-Section bringt eigenes Padding mit; Sektionsrhythmus zentral. */
.kio-page .kio-sec {
	padding-block: var(--kio-sec-y);
}

.kio-page .kio-sec--flach {
	padding-block: 0;
}

/* Bricks-Block hat width:100% als Default. Inhaltsbreite Flex-Gruppen
   sprengen sonst die Reihe (Leitfaden §2.1). */
.kio-page .kio-auto {
	width: auto;
}

/* Flex-Reihen: Bricks-Default ist Spalte → Zeile erzwingen. */
.kio-page .kio-reihe {
	flex-direction: row;
}

/* 12-Spalten-Raster als wiederverwendbares Primitiv.
   Kinder positionieren sich ueber --von / --spanne, damit im Markup keine
   Inline-Styles und keine Spaltenklassen-Flut entstehen. */
.kio-page .kio-grid {
	display: grid;
	grid-template-columns: repeat(var(--kio-spalten), minmax(0, 1fr));
	gap: var(--kio-gutter);
	width: 100%;
}

.kio-page .kio-grid > * {
	grid-column: var(--von, auto) / span var(--spanne, var(--kio-spalten));
	min-width: 0;
}

/* Unterhalb des Tablet-Knicks traegt ein 12-Spalten-Raster nicht mehr:
   die Spalten werden schmaler als der Text braucht. Zwei Zustaende statt
   einer Kette von Zwischenstufen (Leitfaden §9.6). */
@media (max-width: 860px) {
	.kio-page .kio-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.kio-page .kio-grid > * {
		grid-column: 1 / -1;
	}
}

/* Ankersprünge dürfen nicht unter dem Sticky-Header verschwinden
   (Leitfaden §4.6). Wert folgt der tatsächlichen Headerhöhe. */
.kio-page [id] {
	scroll-margin-top: var(--kio-header-h, 96px);
}

/* --------------------------------------------------------------------------
   4. Typografie-Basis
   Familien und Skala kommen aus dem Design-Handoff.
   -------------------------------------------------------------------------- */

.kio-page {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: var(--kio-font-body);
	font-weight: var(--kio-fw-light);
	font-size: var(--kio-fs-16);
	color: var(--kio-text-primary);
	background-color: var(--kio-bg-primary);
}

/* H1: die beiden grossen Ueberschriften. Einzelne Woerter sind im Design
   neongelb hervorgehoben – dafuer .kio-mark, nicht <em> oder <strong>:
   die Hervorhebung ist rein visuell, keine semantische Betonung. */
.kio-page .kio-h1 {
	font-family: var(--kio-font-headline);
	font-weight: var(--kio-fw-normal);
	font-size: var(--kio-fs-48);
	line-height: normal;
}

/* H2: Sektions-Ueberschriften, 36px auf 38px Zeilenhoehe. */
.kio-page .kio-h2 {
	font-family: var(--kio-font-body);
	font-weight: var(--kio-fw-medium);
	font-size: var(--kio-fs-36);
	line-height: var(--kio-lh-38);
}

/* H3: Karten-Ueberschriften. */
.kio-page .kio-h3 {
	font-family: var(--kio-font-body);
	font-weight: var(--kio-fw-medium);
	font-size: var(--kio-fs-23);
	line-height: normal;
}

.kio-page .kio-mark {
	color: var(--kio-neon);
}

/* Eyebrow-Label im Muster „> text". Das Zeichen kommt aus CSS, nicht aus
   dem Inhalt – im Backend tippt niemand ein „>", und Vorlesesoftware liest
   kein Grosser-als-Zeichen vor. */
.kio-page .kio-eyebrow {
	display: block;
	font-family: var(--kio-font-mono);
	font-weight: var(--kio-fw-normal);
	font-size: var(--kio-fs-16);
	line-height: normal;
	text-transform: lowercase;
	color: var(--kio-text-brand);
}

.kio-page .kio-eyebrow::before {
	content: '> ';
}

/* Auf dunklem Grund kehren Eyebrow und Text um. */
.kio-page .kio-invers .kio-eyebrow,
.kio-page .kio-invers {
	color: var(--kio-text-on-dark);
}

/* Standard-Kopf einer Sektion: Eyebrow + Ueberschrift + optionaler Text. */
.kio-page .kio-kopf {
	display: flex;
	flex-direction: column;
	gap: var(--kio-gap-eyebrow);
}

.kio-page .kio-kopf__text {
	margin-top: var(--kio-gap-titel);
	font-size: var(--kio-fs-16);
	line-height: var(--kio-lh-24);
	color: var(--kio-text-secondary);
}

/* --------------------------------------------------------------------------
   5. Komponenten
   Je Sektion ein Block, in derselben Reihenfolge wie die Element-Dateien.
   Wächst mit dem Bau.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */

.kio-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Bewegung nur, wenn der Besucher sie nicht abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
	.kio-page *,
	.kio-page *::before,
	.kio-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}