/*
 * JoNa Digital Solutions – Designsystem (JDS-3)
 * ===========================================================================
 * ZENTRALE, VERSIONIERTE QUELLE FÜR ALLE PROJEKTWEITEN DESIGNWERTE.
 *
 * Verantwortung / Reihenfolge der Designquellen:
 *   1. Divi 5 Design Variables (Global Colors / Variables) – für Divi-Layouts
 *      (siehe docs/DIVI-DESIGN-VARIABLES.md; wird per scripts/divi-design-variables.sh
 *      aus DIESEN Tokens provisioniert).
 *   2. Divi globale vorgesehene Einstellungen (Content Width, Google Fonts aus).
 *   3. DIESE Datei – technische CSS-Basis und Fallback für alles, was Divi nicht abdeckt.
 *   4. Modulbezogene Ausnahme nur wenn nötig.
 *
 * Prinzip: EINE nachvollziehbare Designquelle. Keine Rohwerte in späteren
 * Layouts – ausschließlich `--jds-*`-Tokens verwenden. Kein Layout-Hardcoding
 * einzelner Seiten, keine Homepage-spezifischen Klassen.
 *
 * Keine externen Abhängigkeiten: keine Google Fonts, kein Icon-CDN,
 * keine externen Assets. Divi-Icons (ETmodules) werden lokal aus Divi geladen.
 *
 * Breakpoints (verbindlich):
 *   Mobile   < 690px   (--jds-breakpoint-sm)
 *   Tablet   690–999px
 *   Desktop  >= 1000px (--jds-breakpoint-md)
 *   Hinweis: var() ist in @media nicht erlaubt -> Rohwerte dort fest.
 *
 * Version: 0.5.0
 */

/* ===========================================================================
 * 1. FARBEN
 * ---------------------------------------------------------------------------
 * Markenfarben sind UNVERÄNDERT und verbindlich:
 *   JDS Navy  #1E3B5F · JDS Green #70A556 · JDS Gray #595959
 * Alle weiteren Werte sind nachvollziehbar daraus abgeleitet (Navy-/Grün-
 * Familie, neutrale kühle Grautöne). Keine zufälligen Farben, keine großen
 * Paletten.
 * =========================================================================== */
:root {
	/* --- Markenfarben (verbindlich) --- */
	--jds-navy: #1e3b5f;        /* JDS Navy – Primärfarbe */
	--jds-green: #70a556;       /* JDS Green – Akzent (dekorativ/Flächen/Icons) */
	--jds-gray: #595959;        /* JDS Gray – neutraler Sekundärton */

	/* --- Navy-Familie (abgeleitet aus --jds-navy) --- */
	--jds-navy-dark: #162a43;   /* Hover/Active auf hell */
	--jds-navy-deep: #132742;   /* tiefe Bänder, Verlauf nach unten */
	--jds-navy-band: #1b3350;   /* großflächige dunkle Sektionen */
	--jds-navy-soft: #35618f;   /* Kanten/Hover auf dunklem Grund (aufhellen) */

	/* --- Grün-Familie (abgeleitet aus --jds-green) --- */
	/* Für Text/Buttons auf hell: Marken-Grün erreicht auf Weiß nur 2.91:1 und
	 * ist damit für Text ungeeignet. Deshalb die dunklere Ableitung (5.06:1).
	 * Marken-Grün bleibt für Akzente, Icons, Flächen, größere Elemente. */
	--jds-green-dark: #4c7a3a;

	/* --- Text ---
	 * Typografische Farbhierarchie auf HELLEN Flächen:
	 *   Headings      -> --jds-heading  (JDS Navy  #1E3B5F)
	 *   Primärtext    -> --jds-text     (JDS Navy Deep #132742 = --jds-navy-deep)
	 *   Sekundärtext  -> --jds-text-muted (Muted Gray #5A6470)
	 *   Akzent        -> --jds-green / --jds-green-dark
	 * Kein fast-schwarzer Neutralton: --jds-text referenziert bewusst den
	 * vorhandenen Navy-Farbton (kein zweiter, unabhängiger Farbwert). */
	--jds-heading: var(--jds-navy);       /* Überschriften auf hellen Flächen (11.38:1) */
	--jds-text: var(--jds-navy-deep);     /* Primärtext (15.04:1 auf Weiß) */
	--jds-text-muted: #5a6470;            /* Sekundärtext (6.01:1 auf Weiß) */
	--jds-text-inverse: #ffffff;          /* Text auf Navy (11.38:1) */
	--jds-text-inverse-muted: rgba(255, 255, 255, 0.78); /* Sekundärtext auf dunklem Grund */
	--jds-text-on-green: #1c2b14;         /* dunkler Text auf Marken-Grün (5.13:1) */

	/* --- Flächen --- */
	--jds-white: #ffffff;
	--jds-bg: #ffffff;                    /* Standard-Seitenhintergrund */
	--jds-bg-soft: #f4f6f8;               /* sehr helles Grau */
	--jds-bg-blue-soft: #e8ebef;          /* Navy 10% über Weiß */
	--jds-bg-green-soft: #eef4eb;         /* Grün 12% über Weiß */

	/* --- Borders / Trenner --- */
	--jds-border: #d9dfe6;
	--jds-border-strong: #8b94a1;
	--jds-border-on-dark: rgba(255, 255, 255, 0.16);

	/* --- Akzent-/Interaktionsflächen --- */
	--jds-accent-tint: rgba(112, 165, 86, 0.14);

	/* --- Flächen auf dunklem Grund (für Sektionen mit Navy-Hintergrund) --- */
	--jds-surface-on-dark: rgba(255, 255, 255, 0.06);
	--jds-surface-on-dark-strong: rgba(255, 255, 255, 0.1);

	/* --- Fokus --- */
	--jds-focus: var(--jds-navy);
	--jds-focus-on-dark: #8fb8ff;

	/* --- Legacy-Aliase (JDS-1-Kompatibilität) ---
	 * Nur Umbenennungen, KEINE neuen Farben. Kanonische Namen sind die
	 * kurzen Tokens oben. */
	--jds-color-brand-navy: var(--jds-navy);
	--jds-color-brand-green: var(--jds-green);
	--jds-color-brand-gray: var(--jds-gray);
	--jds-color-ink: var(--jds-text);
	--jds-color-text-secondary: var(--jds-text-muted);
	--jds-color-bg: var(--jds-bg);
	--jds-color-bg-muted: var(--jds-bg-soft);
	--jds-color-surface: var(--jds-white);
	--jds-color-surface-muted: var(--jds-bg-soft);
	--jds-color-border: var(--jds-border);
	--jds-color-border-strong: var(--jds-border-strong);
	--jds-color-inverse-text: var(--jds-text-inverse);
	--jds-color-accent: var(--jds-green);
	--jds-color-accent-strong: var(--jds-green-dark);
	--jds-color-link: var(--jds-navy);
	--jds-color-link-hover: var(--jds-navy-dark);
	--jds-color-focus-ring: var(--jds-focus);
	--jds-color-focus-ring-dark-bg: var(--jds-focus-on-dark);
	--jds-color-subtle-blue: var(--jds-bg-blue-soft);
	--jds-color-bg-navy: var(--jds-navy-band);
	--jds-color-bg-navy-deep: var(--jds-navy-deep);
	--jds-color-brand-blue-soft: var(--jds-navy-soft);
}

/* ===========================================================================
 * 2. TYPOGRAFIE
 * ---------------------------------------------------------------------------
 * System-Font-Stack (Inter-artig, neutral, technisch) – KEINE externe
 * Font-Abhängigkeit, datenschutzfreundlich, gute Darstellung auf
 * macOS/iOS, Windows, Android. Mono nur für technische Labels.
 * Responsive Skalierung über clamp(); Mobile bleibt gut lesbar (>= 15px).
 * =========================================================================== */
:root {
	--jds-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--jds-font-heading: var(--jds-font-sans);
	--jds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
		"Liberation Mono", monospace;

	/* Größen: mobile Untergrenze -> Desktop-Obergrenze (clamp) */
	--jds-font-size-h1: clamp(2.125rem, 1.15rem + 3.9vw, 4rem);      /* 34 -> 64 */
	--jds-font-size-h2: clamp(1.625rem, 1.05rem + 2.2vw, 2.75rem);   /* 26 -> 44 */
	--jds-font-size-h3: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem);   /* 20 -> 28 */
	--jds-font-size-h4: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem); /* 18 -> 22 */
	--jds-font-size-body-lg: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem); /* 17 -> 20 */
	--jds-font-size-body: clamp(1rem, 0.97rem + 0.14vw, 1.125rem);     /* 16 -> 18 */
	--jds-font-size-body-sm: 0.9375rem;                                /* 15 */
	--jds-font-size-xs: 0.75rem;                                       /* 12 – nur UI-/Label-Text */
	--jds-font-size-eyebrow: 0.8125rem;                                /* 13 */
	--jds-font-size-button: 1rem;                                      /* 16 */
	--jds-font-size-mono: 0.875rem;                                    /* 14 */

	/* Gewichte */
	--jds-font-weight-regular: 400;
	--jds-font-weight-medium: 500;
	--jds-font-weight-semibold: 600;
	--jds-font-weight-bold: 700;

	/* Zeilenhöhen */
	--jds-line-height-h1: 1.08;
	--jds-line-height-h2: 1.14;
	--jds-line-height-h3: 1.24;
	--jds-line-height-h4: 1.3;
	--jds-line-height-body: 1.65;
	--jds-line-height-body-lg: 1.55;
	--jds-line-height-ui: 1.2;

	/* Letter-Spacing */
	--jds-letter-spacing-h1: -0.02em;
	--jds-letter-spacing-h2: -0.015em;
	--jds-letter-spacing-h3: -0.01em;
	--jds-letter-spacing-eyebrow: 0.08em;

	/* Maximale Textbreite (Lesbarkeit) */
	--jds-measure: 68ch;
	--jds-measure-tight: 58ch;
}

/* ===========================================================================
 * 3. LAYOUT / CONTENT WIDTH
 * ---------------------------------------------------------------------------
 * Gegen das Homepage-Konzept bewertet: breite Split-/Bento-Sektionen brauchen
 * ~1200px, Full-Width-Bänder ~1360px, Fließtext ~760px.
 * ACHTUNG: Divi 5 rendert den Modul-Container standardmäßig auf 1080px.
 * Damit beide Quellen übereinstimmen, wird Divis `content_width` auf
 * --jds-content-width gesetzt (siehe scripts/divi-design-variables.sh).
 * =========================================================================== */
:root {
	--jds-content-wide: 1360px;   /* Full-Width-/Band-ähnliche Bereiche */
	--jds-content-width: 1200px;  /* regulärer Container (== Divi content_width) */
	--jds-content-text: 760px;    /* Fließtext / Textspalten */
	--jds-content-narrow: 640px;  /* schmale Textbereiche */

	/* Horizontaler Container-Abstand (mobil -> desktop) */
	--jds-gutter: clamp(16px, 4vw, 32px);

	/* Legacy-Aliase (JDS-1-Kompatibilität) – keine neuen Werte. */
	--jds-container-wide: var(--jds-content-wide);
	--jds-container-content: var(--jds-content-text);
	--jds-container-narrow: var(--jds-content-narrow);
}

/* ===========================================================================
 * 4. SPACING
 * ---------------------------------------------------------------------------
 * Abgestufte 4px-Skala (xs…4xl). Keine zufälligen Einzelwerte.
 * Sektionsabstände, Card-Padding und Grid-Gaps sind eigene Tokens.
 * =========================================================================== */
:root {
	--jds-space-2xs: 6px;
	--jds-space-xs: 8px;
	--jds-space-sm: 12px;
	--jds-space-md: 16px;
	--jds-space-lg: 24px;
	--jds-space-xl: 32px;
	--jds-space-2xl: 48px;
	--jds-space-3xl: 64px;
	--jds-space-4xl: 96px;

	/* Sektionen */
	--jds-section-space: clamp(56px, 7vw, 112px);      /* Standard: 56 mob / 112 desk */
	--jds-section-space-sm: clamp(40px, 5vw, 72px);    /* kompakte Sektionen */
	--jds-section-space-lg: clamp(72px, 9vw, 144px);   /* Hero / große Bänder */

	/* Komponenten */
	--jds-card-padding: clamp(20px, 2.2vw, 32px);
	--jds-grid-gap: clamp(16px, 2vw, 32px);
	--jds-inline-gap: clamp(8px, 1vw, 16px);
	--jds-stack-gap: clamp(12px, 1.5vw, 20px);
}

/* ===========================================================================
 * 5. BORDER RADIUS
 * ---------------------------------------------------------------------------
 * Moderat gerundete Cards (weich, aber nicht "bubble-artig"),
 * Buttons dürfen pill-artig sein.
 * =========================================================================== */
:root {
	--jds-radius-none: 0;
	--jds-radius-small: 6px;
	--jds-radius-medium: 10px;
	--jds-radius-large: 16px;
	--jds-radius-pill: 999px;

	/* Alias (JDS-1-Kompatibilität) */
	--jds-radius-sm: var(--jds-radius-small);
	--jds-radius-md: var(--jds-radius-medium);
	--jds-radius-lg: var(--jds-radius-large);
	--jds-radius-full: var(--jds-radius-pill);
}

/* ===========================================================================
 * 6. SCHATTEN
 * ---------------------------------------------------------------------------
 * Maximal drei, dezent und weich. Cards arbeiten primär über Weißraum,
 * Background und Border – der Schatten ist nur eine feine Tiefen-Andeutung.
 * =========================================================================== */
:root {
	--jds-shadow-subtle: 0 1px 2px rgba(16, 24, 40, 0.05);
	--jds-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05),
		0 8px 24px -14px rgba(16, 24, 40, 0.16);
	--jds-shadow-elevated: 0 12px 32px -14px rgba(16, 24, 40, 0.22);

	/* Alias (JDS-1-Kompatibilität) */
	--jds-shadow-sm: var(--jds-shadow-subtle);
	--jds-shadow-md: var(--jds-shadow-card);
}

/* ===========================================================================
 * 7. BORDERS / TRANSITIONEN / FOKUS
 * =========================================================================== */
:root {
	--jds-border-width: 1px;

	--jds-transition-fast: 120ms ease;
	--jds-transition-base: 180ms ease;
	--jds-transition-slow: 280ms ease;

	--jds-focus-ring-color: var(--jds-focus);
	--jds-focus-ring-color-dark-bg: var(--jds-focus-on-dark);
	--jds-focus-ring-width: 2px;
	--jds-focus-ring-offset: 2px;

	/* Breakpoints (Referenz; in @media fest ausgeschrieben) */
	--jds-breakpoint-sm: 690px;
	--jds-breakpoint-md: 1000px;
}

/* ===========================================================================
 * 8. BUTTON-SYSTEM
 * ---------------------------------------------------------------------------
 * PRIMARY   – Grüner CTA. Weiß auf Marken-Grün wäre 2.91:1 (zu wenig), daher
 *             Fläche = --jds-green-dark (5.06:1). Marken-Grün bleibt Akzent.
 * SECONDARY – Navy gefüllt bzw. Outline.
 * LIGHT     – für dunkle Flächen (Navy-Bänder).
 * LINK      – Text-CTA "Mehr erfahren →".
 * Touch-Ziele: min. 48px Höhe.
 * =========================================================================== */
:root {
	--jds-btn-radius: var(--jds-radius-pill);
	--jds-btn-radius-square: var(--jds-radius-medium);
	--jds-btn-padding-x: clamp(20px, 2vw, 28px);
	--jds-btn-padding-y: 13px;
	--jds-btn-min-height: 48px;
	--jds-btn-font-size: var(--jds-font-size-button);
	--jds-btn-font-weight: var(--jds-font-weight-semibold);
	--jds-btn-gap: var(--jds-space-xs);
	--jds-btn-border-width: 1px;

	/* Primary */
	--jds-btn-primary-bg: var(--jds-green-dark);
	--jds-btn-primary-bg-hover: #3f6630;
	--jds-btn-primary-text: var(--jds-white);
	--jds-btn-primary-border: var(--jds-green-dark);

	/* Secondary */
	--jds-btn-secondary-bg: var(--jds-navy);
	--jds-btn-secondary-bg-hover: var(--jds-navy-dark);
	--jds-btn-secondary-text: var(--jds-white);
	--jds-btn-secondary-border: var(--jds-navy);

	/* Secondary Outline (heller Grund) */
	--jds-btn-outline-bg: transparent;
	--jds-btn-outline-bg-hover: var(--jds-bg-blue-soft);
	--jds-btn-outline-text: var(--jds-navy);
	--jds-btn-outline-border: var(--jds-border-strong);

	/* Light (auf dunklem Grund) */
	--jds-btn-light-bg: var(--jds-white);
	--jds-btn-light-bg-hover: var(--jds-bg-blue-soft);
	--jds-btn-light-text: var(--jds-navy);
	--jds-btn-light-border: var(--jds-white);

	/* Light Outline (auf dunklem Grund) */
	--jds-btn-light-outline-bg: transparent;
	--jds-btn-light-outline-bg-hover: rgba(255, 255, 255, 0.1);
	--jds-btn-light-outline-text: var(--jds-white);
	--jds-btn-light-outline-border: var(--jds-border-on-dark);

	/* Link-CTA */
	--jds-btn-link-text: var(--jds-navy);
	--jds-btn-link-text-hover: var(--jds-navy-dark);
}

.jds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jds-btn-gap);
	min-height: var(--jds-btn-min-height);
	padding: var(--jds-btn-padding-y) var(--jds-btn-padding-x);
	font-family: var(--jds-font-sans);
	font-size: var(--jds-btn-font-size);
	font-weight: var(--jds-btn-font-weight);
	line-height: var(--jds-line-height-ui);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: var(--jds-btn-border-width) solid transparent;
	border-radius: var(--jds-btn-radius);
	transition: background-color var(--jds-transition-fast),
		border-color var(--jds-transition-fast),
		color var(--jds-transition-fast),
		transform var(--jds-transition-fast);
}

.jds-btn--primary {
	background-color: var(--jds-btn-primary-bg);
	border-color: var(--jds-btn-primary-border);
	color: var(--jds-btn-primary-text);
}

.jds-btn--primary:hover,
.jds-btn--primary:focus-visible {
	background-color: var(--jds-btn-primary-bg-hover);
	border-color: var(--jds-btn-primary-bg-hover);
}

.jds-btn--secondary {
	background-color: var(--jds-btn-secondary-bg);
	border-color: var(--jds-btn-secondary-border);
	color: var(--jds-btn-secondary-text);
}

.jds-btn--secondary:hover,
.jds-btn--secondary:focus-visible {
	background-color: var(--jds-btn-secondary-bg-hover);
	border-color: var(--jds-btn-secondary-bg-hover);
}

.jds-btn--outline {
	background-color: var(--jds-btn-outline-bg);
	border-color: var(--jds-btn-outline-border);
	color: var(--jds-btn-outline-text);
}

.jds-btn--outline:hover,
.jds-btn--outline:focus-visible {
	background-color: var(--jds-btn-outline-bg-hover);
	border-color: var(--jds-navy);
}

.jds-btn--light {
	background-color: var(--jds-btn-light-bg);
	border-color: var(--jds-btn-light-border);
	color: var(--jds-btn-light-text);
}

.jds-btn--light:hover,
.jds-btn--light:focus-visible {
	background-color: var(--jds-btn-light-bg-hover);
	border-color: var(--jds-btn-light-bg-hover);
}

.jds-btn--light-outline {
	background-color: var(--jds-btn-light-outline-bg);
	border-color: var(--jds-btn-light-outline-border);
	color: var(--jds-btn-light-outline-text);
}

.jds-btn--light-outline:hover,
.jds-btn--light-outline:focus-visible {
	background-color: var(--jds-btn-light-outline-bg-hover);
	border-color: var(--jds-green);
}

.jds-btn--link {
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--jds-btn-link-text);
	text-decoration: none;
	text-underline-offset: 0.18em;
}

.jds-btn--link:hover,
.jds-btn--link:focus-visible {
	color: var(--jds-btn-link-text-hover);
	text-decoration: underline;
}

.jds-btn[disabled],
.jds-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* ===========================================================================
 * 9. CARD-SYSTEM
 * ---------------------------------------------------------------------------
 * Vier wiederverwendbare Typen. Cards arbeiten primär über Weißraum,
 * Background und Border; Hover nur dezent (Border/Shadow/leichte Translation).
 * Keine starken Effekte.
 * =========================================================================== */
:root {
	--jds-card-bg: var(--jds-white);
	--jds-card-border-color: var(--jds-border);
	--jds-card-border-width: var(--jds-border-width);
	--jds-card-radius: var(--jds-radius-large);
	--jds-card-shadow: var(--jds-shadow-card);
	--jds-card-shadow-hover: var(--jds-shadow-elevated);
	--jds-card-padding-lg: clamp(24px, 2.6vw, 40px);
	--jds-card-icon-size: 28px;
	--jds-card-icon-container: 56px;
	--jds-card-heading-gap: var(--jds-space-sm);
	--jds-card-translate-hover: -2px;

	/* Brand Cards (JoNa | Protect / JoNa | Software) */
	--jds-card-brand-accent: var(--jds-green);
	--jds-card-brand-bg: var(--jds-bg);
	--jds-card-brand-radius: var(--jds-radius-large);

	/* Project Cards */
	--jds-card-project-media-ratio: 16 / 10;
	--jds-card-project-bg: var(--jds-white);

	/* Process / Feature Cards (nummeriert, ruhig) */
	--jds-card-process-bg: var(--jds-bg-soft);
	--jds-card-process-radius: var(--jds-radius-medium);
	--jds-card-process-index-size: 40px;
}

.jds-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--jds-card-heading-gap);
	background-color: var(--jds-card-bg);
	border: var(--jds-card-border-width) solid var(--jds-card-border-color);
	border-radius: var(--jds-card-radius);
	box-shadow: var(--jds-card-shadow);
	padding: var(--jds-card-padding);
	transition: box-shadow var(--jds-transition-base),
		border-color var(--jds-transition-base),
		transform var(--jds-transition-base);
}

.jds-card--service:hover,
.jds-card--service:focus-within {
	box-shadow: var(--jds-card-shadow-hover);
	border-color: var(--jds-border-strong);
	transform: translateY(var(--jds-card-translate-hover));
}

.jds-card--brand {
	background-color: var(--jds-card-brand-bg);
	border-radius: var(--jds-card-brand-radius);
	padding: var(--jds-card-padding-lg);
}

.jds-card--brand::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background-color: var(--jds-card-brand-accent);
	border-radius: var(--jds-radius-pill);
}

.jds-card--project {
	background-color: var(--jds-card-project-bg);
	overflow: hidden;
	padding: 0;
}

.jds-card--project .jds-card__media {
	aspect-ratio: var(--jds-card-project-media-ratio);
	width: 100%;
	background-color: var(--jds-bg-soft);
	object-fit: cover;
}

.jds-card--project .jds-card__body {
	padding: var(--jds-card-padding);
}

.jds-card--process {
	background-color: var(--jds-card-process-bg);
	border-radius: var(--jds-card-process-radius);
	box-shadow: none;
}

.jds-card--process .jds-card__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jds-card-process-index-size);
	height: var(--jds-card-process-index-size);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-navy);
	color: var(--jds-text-inverse);
	font-family: var(--jds-font-mono);
	font-size: var(--jds-font-size-mono);
	font-weight: var(--jds-font-weight-semibold);
}

.jds-card__title {
	margin: 0 0 var(--jds-card-heading-gap);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	font-weight: var(--jds-font-weight-semibold);
	color: var(--jds-heading);
}

.jds-card__text {
	margin: 0;
	color: var(--jds-text-muted);
}

/* ===========================================================================
 * 10. ICON-SYSTEM
 * ---------------------------------------------------------------------------
 * Bevorzugt Divi-eigene Icons (ETmodules, lokal aus Divi geladen). Für eigene
 * SVGs: lokal unter assets/images/icons/ ablegen, keine externe CDN.
 * Keine Emojis als UI-Icons. Größe/Hülle/Farbe immer über diese Tokens.
 * =========================================================================== */
:root {
	--jds-icon-size-sm: 18px;
	--jds-icon-size-md: 22px;
	--jds-icon-size-lg: 28px;
	--jds-icon-color: var(--jds-navy);
	--jds-icon-color-accent: var(--jds-green);
	--jds-icon-container-size: 48px;
	--jds-icon-stroke: 1.5px;
}

.jds-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jds-icon-size-md);
	height: var(--jds-icon-size-md);
	flex: 0 0 auto;
	color: var(--jds-icon-color);
}

.jds-icon--accent {
	color: var(--jds-icon-color-accent);
}

.jds-icon--container {
	width: var(--jds-icon-container-size);
	height: var(--jds-icon-container-size);
	border-radius: var(--jds-radius-medium);
	background-color: var(--jds-bg-blue-soft);
	color: var(--jds-icon-color);
}

/* ===========================================================================
 * 11. SECTION-BACKGROUNDS
 * ---------------------------------------------------------------------------
 * Bewusst wenige Varianten für einen rhythmischen Seitenaufbau. Nicht jede
 * Sektion anders gestalten.
 * =========================================================================== */
.jds-section {
	padding-block: var(--jds-section-space);
}

.jds-section--tight {
	padding-block: var(--jds-section-space-sm);
}

.jds-section--hero {
	padding-block: var(--jds-section-space-lg);
}

.jds-section--white {
	background-color: var(--jds-bg);
}

.jds-section--soft-gray {
	background-color: var(--jds-bg-soft);
}

.jds-section--soft-blue {
	background-color: var(--jds-bg-blue-soft);
}

.jds-section--soft-green {
	background-color: var(--jds-bg-green-soft);
}

.jds-section--navy {
	background-color: var(--jds-navy-band);
	color: var(--jds-text-inverse);
}

.jds-section--navy-deep {
	background-color: var(--jds-navy-deep);
	background-image: linear-gradient(
		180deg,
		var(--jds-navy-band) 0%,
		var(--jds-navy-deep) 100%
	);
	color: var(--jds-text-inverse);
}

.jds-section--navy h1,
.jds-section--navy h2,
.jds-section--navy h3,
.jds-section--navy h4,
.jds-section--navy h5,
.jds-section--navy h6,
.jds-section--navy-deep h1,
.jds-section--navy-deep h2,
.jds-section--navy-deep h3,
.jds-section--navy-deep h4,
.jds-section--navy-deep h5,
.jds-section--navy-deep h6 {
	color: var(--jds-text-inverse);
}

/* ===========================================================================
 * 12. CONTAINER & GENERISCHE BAUSTEINE
 * =========================================================================== */
.jds-container {
	width: 100%;
	max-width: var(--jds-content-width);
	margin-inline: auto;
	padding-inline: var(--jds-gutter);
}

.jds-container--wide {
	max-width: var(--jds-content-wide);
}

.jds-container--text {
	max-width: var(--jds-content-text);
}

.jds-container--narrow {
	max-width: var(--jds-content-narrow);
}

/* Legacy-Alias (JDS-1-Kompatibilität) */
.jds-container-content {
	max-width: var(--jds-content-text);
}

.jds-container-narrow {
	max-width: var(--jds-content-narrow);
}

/* Eyebrow / Label */
.jds-eyebrow {
	display: inline-block;
	font-family: var(--jds-font-sans);
	font-size: var(--jds-font-size-eyebrow);
	font-weight: var(--jds-font-weight-semibold);
	line-height: var(--jds-line-height-ui);
	letter-spacing: var(--jds-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--jds-green-dark);
}

.jds-section--navy .jds-eyebrow,
.jds-section--navy-deep .jds-eyebrow,
.jds-on-dark .jds-eyebrow {
	color: var(--jds-green);
}

/* Text-Utilities */
.jds-text-secondary {
	color: var(--jds-text-muted);
}

.jds-text-lead {
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
	max-width: var(--jds-measure);
}

.jds-measure {
	max-width: var(--jds-measure);
}

.jds-mono {
	font-family: var(--jds-font-mono);
	font-size: var(--jds-font-size-mono);
}

/* Dark-Surface-Utility */
.jds-on-dark {
	color: var(--jds-text-inverse);
}

.jds-on-dark :focus-visible {
	outline-color: var(--jds-focus-ring-color-dark-bg);
}

/* ===========================================================================
 * 12b. GLOBAL SHELL (Header/Footer) – wiederverwendbare Shell-Werte
 * ---------------------------------------------------------------------------
 * Logo-/Banner-Seitenverhältnisse stammen aus den echten Brand-Assets
 * (siehe docs/BRAND-ASSETS.md): Logo 2000×792, Banner 3430×696.
 * Regel: immer nur eine Dimension begrenzen (width/max-width) + height:auto.
 * =========================================================================== */
:root {
	--jds-logo-ratio: 2.5253;              /* 2000 / 792 */
	--jds-banner-ratio: 4.9282;            /* 3430 / 696 */
	--jds-logo-width-desktop: 150px;
	--jds-logo-width-tablet: 132px;
	--jds-logo-width-mobile: 116px;

	/* JDS-12: kompakter Mobile-Header (nur < 690px). Eigene Tokens, damit Tablet
	 * (64px/132px) und Footer (--jds-logo-width-mobile) unverändert bleiben.
	 * Keine Safe-Area-Verdopplung: es wird bewusst KEIN env(safe-area-inset-*)
	 * und kein viewport-fit=cover genutzt (Content bleibt im Safe Area). */
	--jds-header-height-mobile-compact: 56px;
	--jds-logo-width-header-mobile: 128px;

	--jds-header-height-desktop: 80px;
	--jds-header-height-mobile: 64px;
	--jds-header-z: 100;

	/* Abstand, den Sticky-Header/anchor-Ziele berücksichtigen müssen. */
	--jds-anchor-offset: var(--jds-header-height-desktop);
}

/* ===========================================================================
 * 13. BASIS (bewusst schlank – Divi liefert das Layout)
 * ---------------------------------------------------------------------------
 * Diese Datei wird nach Divi geladen und setzt die globale Typografie auf die
 * JoNa-Tokens. Keine Layout-/Modul-Overrides.
 * =========================================================================== */
body {
	font-family: var(--jds-font-sans);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
	color: var(--jds-text);
	background-color: var(--jds-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--jds-font-heading);
	font-weight: var(--jds-font-weight-semibold);
	/* Überschriften auf hellen Flächen: JDS Navy.
	 * Dark-Surface-Komponenten setzen bewusst Inverse-Farben (siehe unten). */
	color: var(--jds-heading);
	margin: 0 0 var(--jds-space-md);
}

h1 {
	font-size: var(--jds-font-size-h1);
	line-height: var(--jds-line-height-h1);
	font-weight: var(--jds-font-weight-bold);
	letter-spacing: var(--jds-letter-spacing-h1);
}

h2 {
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
}

h3 {
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
}

h4 {
	font-size: var(--jds-font-size-h4);
	line-height: var(--jds-line-height-h4);
}

/* Links im Inhalt: Farbe UND Unterstreichung (nicht nur Farbe). */
.entry-content a:not(.wp-element-button):not(.jds-btn),
.jds-content a:not(.wp-element-button):not(.jds-btn) {
	color: var(--jds-navy);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.entry-content a:not(.wp-element-button):not(.jds-btn):hover,
.jds-content a:not(.wp-element-button):not(.jds-btn):hover {
	color: var(--jds-navy-dark);
}

::selection {
	background-color: var(--jds-bg-blue-soft);
	color: var(--jds-text);
}

/* Globaler Keyboard-Fokus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--jds-focus-ring-width) solid var(--jds-focus-ring-color);
	outline-offset: var(--jds-focus-ring-offset);
}

.jds-section--navy :focus-visible,
.jds-section--navy-deep :focus-visible {
	outline-color: var(--jds-focus-ring-color-dark-bg);
}

/* ===========================================================================
 * 14. RESPONSIVE
 * ---------------------------------------------------------------------------
 * Mobile ist ein eigener Layoutzustand, keine geschrumpfte Desktop-Version.
 * Rohwerte fest (var() ist in @media nicht erlaubt).
 *
 *   Gutter:          mob 16 · tab 24 · desk bis 32
 *   Section-Spacing: mob 56 · tab 72 · desk bis 112
 *   Card-Padding:    mob 20 · tab 24 · desk bis 32/40
 *   Skalierung H1/H2: über clamp() (siehe Typografie)
 * =========================================================================== */
@media (max-width: 689px) {
	:root {
		--jds-gutter: 16px;
		--jds-section-space: 56px;
		--jds-section-space-sm: 40px;
		--jds-section-space-lg: 72px;
		--jds-card-padding: 20px;
		--jds-grid-gap: 16px;
	}

	/* Buttons mobil: große Touch-Ziele, gut lesbar */
	.jds-btn {
		min-height: 48px;
	}
}

@media (min-width: 690px) and (max-width: 999px) {
	:root {
		--jds-gutter: 24px;
		--jds-section-space: 72px;
		--jds-section-space-sm: 48px;
		--jds-section-space-lg: 96px;
		--jds-card-padding: 24px;
		--jds-grid-gap: 24px;
	}
}

/* Reduced Motion: keine animierte Informationsvermittlung */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}