/* KLINIKER BRÜCKE – Design-Tokens und Basisregeln
   Quelle: Design System „KLINIKER BRÜCKE/tokens“ (Dark Mode First).
   Gestaltung von Seiten erfolgt in Elementor (Kit-Globals + Global Classes kb-*).
   Hier nur, was Elementor nicht abdeckt: Tokens als CSS-Variablen, Grundfläche,
   Links, Fokus, Auswahl, reduzierte Bewegung. */

:root {
	/* Farben */
	--kb-executive-blue: #051c30;
	--kb-porzellanweiss: #F7F7F5;
	--kb-electric-cyan: #5ce1e6;
	--kb-neutral-grey: #8A99A6;
	--kb-blue-raised: #0a2a45;
	--kb-white: #FFFFFF;
	--kb-card-border: rgba(247, 247, 245, 0.5);
	--kb-rule: rgba(247, 247, 245, 0.18);
	--kb-grid-line: rgba(247, 247, 245, 0.1);
	--kb-grid-line-cyan: rgba(92, 225, 230, 0.1);

	/* Typografie */
	--kb-font-display: "Manrope", "Segoe UI", Arial, sans-serif;
	--kb-font-body: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
	--kb-fs-h1: 56px;
	--kb-fs-h2: 36px;
	--kb-fs-h3: 24px;
	--kb-fs-body-lg: 18px;
	--kb-fs-body: 16px;
	--kb-fs-caption: 14px;
	--kb-fs-label: 13px;
	--kb-lh-body: 1.5;
	--kb-lh-heading: 1.15;
	--kb-ls-label: 0.08em;

	/* Abstände und Raster */
	--kb-space-1: 4px;
	--kb-space-2: 8px;
	--kb-space-3: 12px;
	--kb-space-4: 16px;
	--kb-space-5: 24px;
	--kb-space-6: 32px;
	--kb-space-7: 48px;
	--kb-space-8: 64px;
	--kb-space-9: 96px;
	--kb-space-10: 128px;
	--kb-container-max: 1200px;
	--kb-content-max: 800px;
	--kb-grid-gap: 24px;

	/* Form und Bewegung */
	--kb-radius-sm: 2px;
	--kb-radius-md: 4px;
	--kb-radius-pill: 999px;
	--kb-motion-fast: 150ms;
	--kb-motion-slow: 250ms;
	--kb-ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
	--kb-focus-ring: 2px solid var(--kb-electric-cyan);
}

html {
	background-color: var(--kb-executive-blue);
}

body {
	background-color: var(--kb-executive-blue);
	color: var(--kb-porzellanweiss);
	font-family: var(--kb-font-body);
	font-size: var(--kb-fs-body);
	line-height: var(--kb-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kb-font-display);
	line-height: var(--kb-lh-heading);
	color: var(--kb-porzellanweiss);
}

/* Links: Porzellanweiß, unterstrichen; Cyan nur aktiv/Hover */
a {
	color: var(--kb-porzellanweiss);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--kb-motion-fast) var(--kb-ease-calm);
}

a:hover,
a:active {
	color: var(--kb-electric-cyan);
}

/* Fokus: sichtbarer Cyan-Ring, min. 2px (Kap. 10) */
:focus-visible {
	outline: var(--kb-focus-ring);
	outline-offset: 3px;
}

::selection {
	background: var(--kb-electric-cyan);
	color: var(--kb-executive-blue);
}

/* Helle Ausnahmefläche: Klasse kb-light auf einem Container */
.kb-light {
	background-color: var(--kb-porzellanweiss);
	color: var(--kb-executive-blue);
}

.kb-light h1, .kb-light h2, .kb-light h3,
.kb-light h4, .kb-light h5, .kb-light h6,
.kb-light a {
	color: var(--kb-executive-blue);
}

.kb-light :focus-visible {
	outline-color: var(--kb-executive-blue);
}

/* Neural Grid (Kap. 6): feines Linienraster, 1px, 8 % Deckkraft.
   Klasse kb-neural-grid auf einem Container setzen. */
.kb-neural-grid {
	background-image:
		linear-gradient(rgba(247, 247, 245, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(247, 247, 245, 0.08) 1px, transparent 1px);
	background-size: 64px 64px;
	background-position: center top;
}

/* Sprungmarken: Abstand für den fixierten Header (ca. 72-77 px), damit
   Überschriften nach einem Klick auf #anker nicht darunter verschwinden */
[id] {
	scroll-margin-top: 88px;
}

/* Video-Platzhalter und Video-Rahmen: festes 16:9, verhindert Layoutsprünge (CLS) */
.kb-video-frame {
	aspect-ratio: 16 / 9;
	width: 100%;
}

/* Prozesslinie (Infografik aus Containern):
   Container .kb-steps enthält mehrere .kb-step, jede mit Nummer (.kb-step-num).
   Desktop: Linie waagerecht durch die Knoten. Tablet/Handy: senkrecht links. */
.kb-steps {
	position: relative;
	--kb-step-w: 18%; /* Breite eines Schritts, muss zur Elementor-Breite passen */
}

.kb-steps--3 {
	--kb-step-w: 30%;
}

.kb-steps--4 {
	--kb-step-w: 22%;
}

.kb-steps::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 24px;
	/* endet in der Mitte des letzten Knotens (Schrittbreite minus halber Knoten) */
	right: calc(var(--kb-step-w) - 24px);
	height: 1px;
	background: rgba(247, 247, 245, 0.35);
	z-index: 0;
}

.kb-step {
	position: relative;
	z-index: 1;
}

.kb-step-num .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--kb-electric-cyan);
	border-radius: 50%;
	background: var(--kb-executive-blue);
	color: var(--kb-porzellanweiss);
}

.kb-step-num--final .elementor-heading-title {
	background: var(--kb-electric-cyan);
	color: var(--kb-executive-blue);
}

/* Senkrechte Timeline auf allen Breiten (z. B. Projekte, 11 Schritte).
   Schritte im Abstand von 24 px, Linie je Schritt bis zum nächsten Knoten. */
.kb-steps--vertical::before {
	display: none;
}

.kb-steps--vertical .kb-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 48px;
	bottom: -24px;
	left: 24px;
	width: 1px;
	background: rgba(247, 247, 245, 0.35);
	z-index: -1;
}

/* Tablet/Handy: senkrechte Linie je Schritt, vom Knoten bis zum nächsten Knoten
   (32px = Zeilenabstand zwischen den Schritten) */
@media (max-width: 1024px) {
	.kb-steps::before {
		display: none;
	}

	.kb-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 48px;
		bottom: -32px;
		left: 24px;
		width: 1px;
		background: rgba(247, 247, 245, 0.35);
		z-index: -1;
	}
}

/* Burger-Menü: Tippfläche mindestens 48 × 48 px (Touch-Ziel) */
.elementor-menu-toggle {
	min-width: 48px;
	min-height: 48px;
	justify-content: center;
}

/* Calm Motion: bei reduzierter Bewegung alles statisch */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}