/*
 * JoNa | Software – Homepage Hero (WS-4)
 * ---------------------------------------------------------------
 * Darstellung des Hero-Bereichs der Startseite. Der Hero wird als
 * native Gutenberg-Blöcke in der statischen Frontpage gepflegt
 * (Quell-Markup: scripts/content/home-hero.html, guarded durch
 * bootstrap.sh: WS-4-Guard + WS-5B-Polish-Upgrade (11g) +
 * WS-5B-Polish-2 Hero-Visual-v3-Upgrade (11i) mit Fingerprint-Guard).
 * Diese Datei liefert ausschließlich das Styling.
 *
 * Verantwortung:
 *   - design-system.css  = Tokens (--jona-*), Referenz für alle Werte.
 *   - home-hero.css      = Hero-Styling (diese Datei).
 *   - Gutenberg          = Inhalts-/Block-Struktur (Core-Blöcke, wp:html nur
 *                          für die dekorative Visual-Komposition).
 *
 * Struktur (verifiziert):
 *   .entry-content
 *     └─ .wp-block-group.jona-hero
 *        └─ .wp-block-columns
 *           ├─ .wp-block-column.jona-hero-copy   (Eyebrow, H1, Subline, Buttons, Tech-Chips)
 *           └─ .wp-block-column.jona-hero-visual (.jona-hero-visual-inner, aria-hidden)
 *              ├─ .jona-visual-grid              (2×2 Capability-Karten + Hub)
 *              │   ├─ .jona-visual-tile--tl/tr/bl/br  (Web-Apps · WordPress-Plugins ·
 *              │   │                                    APIs & Schnittstellen · Automatisierung)
 *              │   └─ .jona-visual-hub           (zentrales Schild-Badge, JoNa-Marke)
 *              └─ .jona-visual-signature         (grüne Kursiv-Notiz, dekorativ)
 *
 * Design-Richtung (WS-5B-Polish-2, Referenz-North-Star):
 *   - "Vier Capability-Karten, ein Kern": 2×2-Raster weißer Karten um ein
 *     zentrales Schild-Badge (JoNa-Häkchen) – die räumliche Beziehung ist
 *     sofort lesbar. Gestricheltes Kreuz nur in den Kartenabständen
 *     (dezent, kein großes Oval), keine Mono-Prozessleiste, keine
 *     Entwickler-Kryptik.
 *   - Der v2-Hintergrund-Blob (.jona-hero::before) ist ENTFERNT: Er
 *     erzeugte rechts einen hart abgeschnittenen hellen Glow (Desktop-
 *     Überstand und Mobile-Schatten/Überstand). Tiefe trägt jetzt allein
 *     die Visual-Fläche (in das Panel eingebetteter, auslaufender
 *     Radial-Verlauf – kann nicht über stehen).
 *   - H1 in JoNa-Navy, Spaltenverhältnis ≈ 57/43 (1.35fr/1fr).
 *
 * Version: 0.9.0 (WS-5B-Polish-2: Hero-Visual v3 Capability-Konstellation,
 * Mobile-Glow-Fix, Strip-Feinschliff)
 *
 * Wichtig zu den Breakpoints: In @media-Queries dürfen KEINE CSS-Variablen
 * (var()) stehen – die komplette Regel wird sonst vom Browser verworfen.
 * Deshalb stehen hier feste Pixel-Werte, die den Tokens entsprechen:
 *   --jona-breakpoint-sm = 690px  -> Mobile  max-width: 689px
 *   --jona-breakpoint-md = 1000px -> Desktop min-width: 1000px
 */

/* ------------------------------------------------------------------
 * H1-Eindeutigkeit auf der Startseite
 *
 * Blocksy rendert auf der Frontpage (statische Seite "startseite") einen
 * .entry-header mit <h1 class="page-title">Startseite</h1>. Damit die im
 * Hero enthaltene H1 die einzige H1 der Startseite bleibt (WAI/WCAG),
 * wird dieser Seiten-Titel-Header nur auf der Homepage ausgeblendet.
 * Auf Unterseiten bleibt die normale Seiten-H1 erhalten.
 */
body.home .entry-header {
	display: none;
}

/* ------------------------------------------------------------------
 * Sektion / Hintergrund
 *
 * Rein weiße Fläche (L0). Kein ::before-Blob mehr: der v2-Radiusverlauf
 * wurde an der Boxkante hart abgeschnitten und erzeugte rechts einen
 * "Überstand/Glow" (Desktop tote Zone, Mobile Störung). Gestaltung
 * passiert ausschließlich im Inhalt und in der Visual-Fläche.
 * Abstand nach unten bewusst kompakt – der Capability Strip übernimmt
 * die Überleitung (vgl. home-capability-strip.css).
 */
.jona-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--jona-space-8) var(--jona-space-5);
	background-color: var(--jona-color-surface);
}

@media (max-width: 689px) {
	.jona-hero {
		padding-block: var(--jona-space-7) var(--jona-space-4);
	}
}

@media (min-width: 690px) and (max-width: 999px) {
	.jona-hero {
		padding-block: var(--jona-space-7) var(--jona-space-4);
	}
}

/* ------------------------------------------------------------------
 * Raster (Text links / Visual rechts) – Desktop + Tablet zweispaltig,
 * Mobile einspaltig (Stack: Text zuerst, Visual darunter).
 * Text führt (≈57 %), Visual erklärt (≈43 %).
 */
.jona-hero .wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--jona-space-6);
	align-items: center;
	margin: 0;
}

.jona-hero .wp-block-column {
	flex: none;
	display: block;
	min-width: 0;
}

@media (max-width: 689px) {
	.jona-hero .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jona-space-5);
	}

	/* Beide Spalten volle verfügbare Breite – keine starren Desktop-Maße,
	 * kein horizontales Scrollen, keine zu schmalen Innenbereiche. */
	.jona-hero .wp-block-column {
		width: 100%;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------
 * Textspalte: Typografie & Zeilenbreiten (Tokens aus WS-2)
 */
.jona-hero-eyebrow {
	margin: 0 0 var(--jona-space-3);
	font-family: var(--jona-font-sans);
	font-size: var(--jona-font-size-sm);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jona-color-brand-blue);
}

/* H1 in JoNa-Navy (WS-5A §12 + Delta §5.1): bindet den Hero an die Marke;
 * Kontrast auf Weiß ≈ 13,5:1 (AA). Schriftgröße oben an der 3xl-Clamp-Skala. */
.jona-hero-title {
	max-width: 18em;
	margin: 0 0 var(--jona-space-4);
	color: var(--jona-color-brand-blue);
}

.jona-hero-subline {
	max-width: var(--jona-container-content);
	margin: 0 0 var(--jona-space-6);
	font-size: var(--jona-font-size-lg);
	line-height: var(--jona-line-height-base);
	color: var(--jona-color-text-secondary);
}

/* ------------------------------------------------------------------
 * CTAs
 *
 * Basis-Buttons kommen aus design-system.css. Der Sekundär-Button ist
 * ruhig (Neutral/Grau statt Blau – der Fill-Button bleibt der einzige
 * laute Akzent); beide CTAs tragen ein Pfeil-Suffix im Markup.
 */
.jona-hero .wp-block-buttons {
	gap: var(--jona-space-4);
	margin: 0;
}

.jona-hero .wp-block-button {
	margin: 0;
}

.jona-hero .wp-block-button__link {
	min-height: 44px;
}

.jona-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--jona-color-brand-gray);
	border-color: var(--jona-color-border-strong);
}

.jona-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.jona-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--jona-color-subtle-blue);
	color: var(--jona-color-brand-blue-dark);
	border-color: var(--jona-color-brand-blue);
}

/* ------------------------------------------------------------------
 * Tech-Zeile als Mono-Chips (Delta §5.1/§6.2)
 *
 * Eine Zeile kleiner Chips – Atem, kein Beiwerk.
 * Mobil wrap-fähig (2 Zeilen ok).
 */
.jona-hero-tech {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jona-space-2);
	align-items: center;
	margin: var(--jona-space-5) 0 0;
}

.jona-hero-tech p {
	margin: 0;
}

.jona-hero-tech__label {
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	color: var(--jona-color-text-secondary);
}

.jona-hero-tech__item {
	display: inline-flex;
	align-items: center;
	padding: var(--jona-space-1) var(--jona-space-3);
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	color: var(--jona-color-brand-blue);
	background-color: var(--jona-color-subtle-blue);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-full);
}

/* ------------------------------------------------------------------
 * Hero-Visual v3: Capability-Konstellation ("Vier Karten, ein Kern")
 *
 * Referenz-North-Star: vier Capability-Karten (Web-Apps · WordPress-
 * Plugins · APIs & Schnittstellen · Automatisierung) in einem 2×2-
 * Raster, in dessen Mitte das JoNa-Schild-Badge (Häkchen-Marke) sitzt.
 * Die räumliche Beziehung (vier Module, ein Kern) ist ohne Kanten-
 * Connectoren sofort lesbar; ein feines gestricheltes Kreuz in den
 * Kartenabständen (nur auf Desktop) bindet die Karten an den Kern.
 * Rein dekorativ (aria-hidden im Markup), keine Fake-KPIs, keine
 * Mini-Dashboards, keine Mono-Prozessleiste, keine externen Assets.
 */
.jona-hero-visual-inner {
	position: relative;
	display: block;
	padding: var(--jona-space-6);
	background-color: var(--jona-color-bg-muted);
	/* Weicher Blau-Anstieg HINTER den Karten, vollständig in die Fläche
	 * eingebettet (closest-side + transparente Endfarbe) – kein Glow
	 * kann über die Panelgrenze stehen. */
	background-image: radial-gradient(
		closest-side circle at 62% 30%,
		var(--jona-color-subtle-blue),
		rgba(244, 246, 248, 0) 100%
	);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-lg);
	box-shadow: var(--jona-shadow-sm);
}

.jona-visual-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--jona-space-4) var(--jona-space-5);
}

/* Gestricheltes Kreuz in den Kartenabständen (nur Desktop): liegt unter
 * den undurchsichtigen Karten und ist deshalb ausschließlich in den
 * Fugen sichtbar – dechiffriert die Beziehung "Module → Kern", ohne
 * konstruiert zu wirken. */
.jona-visual-grid::before,
.jona-visual-grid::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.jona-visual-grid::before {
	top: 50%;
	left: 8%;
	right: 8%;
	border-top: 2px dashed var(--jona-color-border);
}

.jona-visual-grid::after {
	left: 50%;
	top: 8%;
	bottom: 8%;
	border-left: 2px dashed var(--jona-color-border);
}

/* Capability-Karten */
.jona-visual-tile {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--jona-space-3);
	padding: var(--jona-space-4);
	min-width: 0;
	background-color: var(--jona-color-surface);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-md);
	box-shadow: var(--jona-shadow-sm);
}

.jona-visual-tile--tl { grid-column: 1; grid-row: 1; }
.jona-visual-tile--tr { grid-column: 2; grid-row: 1; }
.jona-visual-tile--bl { grid-column: 1; grid-row: 2; }
.jona-visual-tile--br { grid-column: 2; grid-row: 2; }

/* Icon im getönten Kreis (JoNa-Grün; WordPress-Anteil in Marken-Blau) */
.jona-visual-tile__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--jona-radius-full);
	background-color: var(--jona-color-accent-tint);
	color: var(--jona-color-accent-strong);
}

.jona-visual-tile__icon--blue {
	background-color: var(--jona-color-subtle-blue);
	color: var(--jona-color-brand-blue);
}

.jona-visual-tile__icon svg {
	width: 22px;
	height: 22px;
}

.jona-visual-tile__body {
	display: flex;
	flex-direction: column;
	gap: var(--jona-space-1);
	min-width: 0;
}

.jona-visual-tile__name {
	font-family: var(--jona-font-sans);
	font-size: var(--jona-font-size-sm);
	font-weight: var(--jona-font-weight-semibold);
	line-height: var(--jona-line-height-tight);
	color: var(--jona-color-ink);
	/* Keine eingeschobene Silbentrennung (vermeidet „Schnitt-stellen“).
	 * Bestehende Bindestriche („WordPress-Plugins“) bleiben als sauberer,
	 * natürlicher Umbruchpunkt erhalten; kein Mid-Word-Bruch. */
	overflow-wrap: break-word;
	hyphens: none;
}

.jona-visual-tile__desc {
	font-family: var(--jona-font-sans);
	font-size: var(--jona-font-size-xs);
	line-height: 1.45;
	color: var(--jona-color-text-secondary);
}

/* Zentraler Kern: JoNa-Schild-Badge, exakt über der Kreuzung der
 * Kartenabstände (absolut zentriert, zeigt auf den Schnittpunkt). */
.jona-visual-hub {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.jona-visual-hub__badge {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: var(--jona-radius-full);
	background-color: var(--jona-color-surface);
	border: 2px solid var(--jona-color-brand-blue);
	box-shadow: var(--jona-shadow-md);
	color: var(--jona-color-brand-blue);
}

.jona-visual-hub__badge svg {
	width: 34px;
	height: 34px;
}

/* Label nur in der vereinfachten Tablet-/Mobile-Variante (Kopfzeile);
 * auf Desktop spricht das Marken-Schild für sich. */
.jona-visual-hub__label {
	display: none;
}

/* Grüne Kursiv-Notiz (Signatur, vgl. Referenz "Ideen. Code. Wirkung."):
 * Dekorativ (innerhalb des aria-hidden-Wrappers), sparsam dosiert. */
.jona-visual-signature {
	margin: var(--jona-space-5) 0 0;
	text-align: right;
	font-family: var(--jona-font-sans);
	font-style: italic;
	font-size: var(--jona-font-size-sm);
	line-height: var(--jona-line-height-ui);
	color: var(--jona-color-accent-strong);
	transform: rotate(-1deg);
}

/* ------------------------------------------------------------------
 * Tablet (690–999 px): eigenständige, kompakte Variante.
 *
 * Die Überlagerung (absolut zentriertes Schild über der Kartenkreuzung)
 * braucht Raum; auf Tablet wird die Komposition zur ruhigen Kopfzeile:
 * Schild-Badge + Label oben, darunter 2×2-Karten (Icon + Titel).
 * Kein gestricheltes Kreuz, keine Signatur, keine gequetschten
 * Beschreibungen, kein horizontaler Overflow.
 */
@media (min-width: 690px) and (max-width: 999px) {
	.jona-hero-visual-inner {
		padding: var(--jona-space-5);
	}

	.jona-visual-grid {
		gap: var(--jona-space-4);
	}

	.jona-visual-grid::before,
	.jona-visual-grid::after {
		display: none;
	}

	.jona-visual-hub {
		position: static;
		grid-column: 1 / -1;
		grid-row: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--jona-space-3);
	}

	.jona-visual-hub__badge {
		width: 40px;
		height: 40px;
		border-width: var(--jona-border-width);
	}

	.jona-visual-hub__badge svg {
		width: 22px;
		height: 22px;
	}

	.jona-visual-hub__label {
		display: block;
		font-family: var(--jona-font-mono);
		font-size: var(--jona-font-size-xs);
		font-weight: var(--jona-font-weight-semibold);
		letter-spacing: 0.02em;
		color: var(--jona-color-brand-blue);
	}

	.jona-visual-tile--tl { grid-column: 1; grid-row: 2; }
	.jona-visual-tile--tr { grid-column: 2; grid-row: 2; }
	.jona-visual-tile--bl { grid-column: 1; grid-row: 3; }
	.jona-visual-tile--br { grid-column: 2; grid-row: 3; }

	.jona-visual-tile {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jona-space-2);
	}

	/* Tablet-Karten sind schmal (ca. 110 px): eine Textstufe kleiner
	 * verhindert 3-Zeilen-Umbrüche ("Word-/Press-/Plugins"). */
	.jona-visual-tile__name {
		font-size: var(--jona-font-size-xs);
	}

	.jona-visual-tile__desc {
		display: none;
	}

	.jona-visual-signature {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Mobile (<690 px): eigenständiger Stack, Text zuerst.
 *
 * Reihenfolge: Eyebrow → H1 → Subline → CTAs → Tech-Chips → Visual →
 * (darunter der Strip). Das Visual ist mobil kein verkleinerter
 * Desktop: Kopfzeile mit kleinem Schild-Badge + Label, darunter ein
 * 2×2-Kartenraster (Icon + Titel) über die volle Breite. Keine
 * gestrichelten Connectoren, keine Beschreibungen, keine Signatur –
 * nichts wird gequetscht, nichts steht über.
 */
@media (max-width: 689px) {
	.jona-hero-visual-inner {
		padding: var(--jona-space-5);
	}

	.jona-visual-grid {
		gap: var(--jona-space-3);
	}

	.jona-visual-grid::before,
	.jona-visual-grid::after {
		display: none;
	}

	.jona-visual-hub {
		position: static;
		grid-column: 1 / -1;
		grid-row: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--jona-space-3);
	}

	.jona-visual-hub__badge {
		width: 40px;
		height: 40px;
		border-width: var(--jona-border-width);
	}

	.jona-visual-hub__badge svg {
		width: 22px;
		height: 22px;
	}

	.jona-visual-hub__label {
		display: block;
		font-family: var(--jona-font-mono);
		font-size: var(--jona-font-size-xs);
		font-weight: var(--jona-font-weight-semibold);
		letter-spacing: 0.02em;
		color: var(--jona-color-brand-blue);
	}

	.jona-visual-tile--tl { grid-column: 1; grid-row: 2; }
	.jona-visual-tile--tr { grid-column: 2; grid-row: 2; }
	.jona-visual-tile--bl { grid-column: 1; grid-row: 3; }
	.jona-visual-tile--br { grid-column: 2; grid-row: 3; }

	.jona-visual-tile {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jona-space-2);
		padding: var(--jona-space-3);
	}

	.jona-visual-tile__desc {
		display: none;
	}

	.jona-visual-signature {
		display: none;
	}

	.jona-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.jona-hero .wp-block-button__link {
		width: 100%;
	}

	.jona-hero .wp-block-button.is-style-outline .wp-block-button__link {
		background-color: var(--jona-color-surface);
	}

	/* H1 mobil: Navy, etwas kleiner + luftiger statt flach auf 28px –
	 * harmonischere Umbrüche, bleibt kraftvoll. */
	.jona-hero-title {
		font-size: clamp(1.5rem, 4.5vw, 1.75rem);
		line-height: 1.35;
	}

	.jona-hero-subline {
		font-size: var(--jona-font-size-base);
		line-height: 1.55;
		margin-bottom: var(--jona-space-5);
	}

	/* Tech-Chips mobil: kompakter, weiterhin wrap-fähig (2 Zeilen ok). */
	.jona-hero-tech {
		gap: var(--jona-space-2);
		margin-top: var(--jona-space-4);
	}
}

/* ------------------------------------------------------------------
 * Accessibility & Reduced Motion
 *
 * - Kein Hover-only / keine Animation als Informationsträger.
 * - Transitionen (falls vorhanden) auf Minimum bei reduced-motion
 *   (Globalregel des Designsystems greift zusätzlich).
 */
@media (prefers-reduced-motion: reduce) {
	.jona-hero *,
	.jona-hero *::before,
	.jona-hero *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}