/*
 * JoNa | Software – Homepage AI & Automation (WS-5E)
 * ---------------------------------------------------------------
 * Dunkles Pipeline-Band direkt unterhalb der Bento Services.
 * Visueller Midpage-Anker: tiefes JoNa-Navy-Band (Family brand-blue,
 * bewusst kein neutrales Anthrazit), klar verständlicher Drei-Stufen-
 * Prozess (Eingang -> Verarbeitung -> Aktion), JoNa-Grün als gezielter
 * Akzent. Bewusst ruhig und technisch – kein Hype, keine Fake-KPIs,
 * keine Dashboards, kein Cyberpunk/Neon.
 *
 * Inhalt:
 *   - scripts/content/home-ai-automation.html (versioniertes Gutenberg-
 *     Markup: Group + nativer Kopf/CTA + ein atomarer wp:html-Block für
 *     die Pipeline, Fingerprint `<!-- jona-ai-automation-pipeline v1 -->`).
 *   - Diese Datei liefert ausschließlich das Styling.
 *
 * Verantwortung (strikte Trennung, WS-5E):
 *   - design-system.css            = Tokens (--jona-*) + generische
 *                                    Dark-Surface-Utility (.jona-on-dark),
 *                                    Referenz.
 *   - home-ai-automation.css       = Layout/Styling dieser Sektion.
 *   - Gutenberg                    = Group + native Blöcke (Kopf, Rules,
 *                                    CTA) + ein wp:html-Ausnahmeblock für
 *                                    die Pipeline (Analogie zu WS-4/WS-5B/
 *                                    WS-5D – atomare Struktur, kein Custom
 *                                    Block).
 *
 * Layout-Entscheidung (WS-5E, dokumentiert):
 *   Variante B – Sektionskopf (Eyebrow/H2/Subline/Rules) oben, darunter
 *   die Pipeline über die volle Breite als 3-spaltige Stufen mit
 *   Verbindungslinien. Passt in die Dramaturgie: ruhiges helles Bento
 *   oben, danach ein breites dunkles Band als klarer Einschnitt.
 *   Tablet/Mobile stapeln die Stufen vertikal (keine Quetschung) und
 *   verbinden sie über eine feine vertikale Flow-Linie.
 *
 * Visueller Polish (WS-5E-Polish, 0.12.1 – dokumentiert):
 *   - Sektion liegt auf tiefem Navy (--jona-color-bg-navy -> -navy-deep)
 *     statt neutralem Anthrazit; dezentes Raster (Markenbezug Bento-Lead),
 *     kein Glow, kein Neon.
 *   - Phasen sind leichte, halbtransparente Navy-Surface-Module mit feiner
 *     Linie – sie lesen sich als ein Ablauf, nicht als drei Formulare.
 *   - Die mittlere Phase (KI) trägt den grünen Akzent (Label/Icon/Surface);
 *     Eingang und Aktion bleiben ruhig. JoNa-Grün bleibt gezielt.
 *   - Verbinder sind feine Flow-Linien mit Pfeil (Desktop horizontal,
 *     gestapelt vertikal).
 *   - Rules-Aussage ist ein leichter Callout mit dünner grüner Linie
 *     (kein großer grauer Block).
 *   - CTA nutzt das generische Button-System; die Dark-Anpassung liegt
 *     wiederverwendbar in design-system.css (.jona-on-dark), nicht als
 *     sektionsspezifischer Sonderbutton.
 *
 * CTA (dokumentiert):
 *   Primär „Automatisierung besprechen“ -> /kontakt/,
 *   Sekundär „Leistungen ansehen“ -> /leistungen/.
 *   Beide Ziele existieren (kein toter Link).
 *
 * Breakpoints FEST geschrieben (kein var() in @media – vgl. WS-4-Fix):
 *   --jona-breakpoint-sm = 690px  -> Mobile  max-width: 689px
 *   --jona-breakpoint-md = 1000px -> Desktop >= 1000px
 *
 * Version: 0.12.1 (WS-5E-Polish)
 */

/* ------------------------------------------------------------------
 * Sektion: vollbreites tiefes Navy-Band mit dezentem Raster und sanftem
 * Verlauf nach unten. Der kleine Top-Inset verhindert, dass die Kopfzeile
 * hart an der Bandkante klebt; unten der volle Gap zur nächsten (hellen)
 * Sektion. Bento Services trägt oben bereits den vollen Section-Gap.
 */
.jona-ai-automation {
	padding-block: var(--jona-space-6) var(--jona-space-section-gap-lg);
	background-color: var(--jona-color-bg-navy);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(180deg, var(--jona-color-bg-navy) 0%, var(--jona-color-bg-navy-deep) 100%);
	background-size: 32px 32px, 32px 32px, auto;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	color: var(--jona-color-inverse-text);
}

@media (min-width: 690px) and (max-width: 999px) {
	.jona-ai-automation {
		padding-block: var(--jona-space-5) var(--jona-space-section-gap-md);
		background-size: 28px 28px, 28px 28px, auto;
	}
}

@media (max-width: 689px) {
	.jona-ai-automation {
		padding-block: var(--jona-space-4) var(--jona-space-section-gap-sm);
		background-size: 24px 24px, 24px 24px, auto;
	}
}

/* Innere Breite begrenzen (Container), Gutters aus dem Designsystem. */
.jona-ai-automation__inner {
	width: 100%;
	max-width: var(--jona-container-wide);
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
}

@media (min-width: 690px) and (max-width: 999px) {
	.jona-ai-automation__inner {
		padding-inline: var(--jona-space-gutter-md);
	}
}

@media (max-width: 689px) {
	.jona-ai-automation__inner {
		padding-inline: var(--jona-space-gutter-sm);
	}
}

/* ------------------------------------------------------------------
 * Head: Eyebrow + H2 + Subline (native Gutenberg-Blöcke).
 * Auf dunklem Grund: Eyebrow in JoNa-Grün (Kontrast auf Navy ~7:1),
 * H2 in Weiß, Subline hell und ruhig.
 */
.jona-ai-automation .jona-ai-automation__eyebrow {
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jona-color-accent);
	margin-block: 0 var(--jona-space-2);
}

.jona-ai-automation__title {
	font-size: var(--jona-font-size-2xl);
	color: var(--jona-color-inverse-text);
	margin-block: 0 var(--jona-space-3);
}

.jona-ai-automation__subline {
	color: rgba(255, 255, 255, 0.82);
	max-width: 64ch;
	margin-block: 0;
}

/* ------------------------------------------------------------------
 * Rules-vs-AI-Aussage: kurze, sachliche Abgrenzung. Leichter Callout mit
 * dünner grüner Linie links – bewusst kein großer grauer Block.
 * Information nie nur über Farbe (Text bleibt vollständig lesbar).
 */
.jona-ai-automation__rules {
	display: inline-block;
	margin-block: var(--jona-space-4) 0;
	padding: var(--jona-space-2) var(--jona-space-4);
	border-left: 2px solid var(--jona-color-accent);
	background-color: rgba(255, 255, 255, 0.04);
	border-radius: 0 var(--jona-radius-md) var(--jona-radius-md) 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--jona-font-size-sm);
	font-weight: var(--jona-font-weight-medium);
	max-width: 60ch;
}

/* ------------------------------------------------------------------
 * Pipeline (atomarer wp:html-Block): 3 Phasen + 2 Verbinder.
 * Desktop: Grid mit 1fr / Auto / 1fr / Auto / 1fr – Phasen gleich
 * hoch (stretch), Verbinder als schmale Spalten mit Flow-Linie + Pfeil.
 */
.jona-ai-automation__pipeline {
	display: grid;
	grid-template-columns: 1fr 40px 1fr 40px 1fr;
	align-items: stretch;
	gap: 0;
	margin-block-start: var(--jona-space-5);
}

/* Phase-Modul: leichte, halbtransparente Navy-Surface mit feiner Linie.
 * Bewusst niedrige Kartenhöhe (kompakter Innenabstand), damit die drei
 * Stufen als ein Ablauf und nicht als drei schwere Karten lesen. */
.jona-ai-automation__phase {
	display: flex;
	flex-direction: column;
	gap: var(--jona-space-4);
	padding: var(--jona-space-5);
	background-color: rgba(255, 255, 255, 0.055);
	border: var(--jona-border-width) solid rgba(255, 255, 255, 0.12);
	border-radius: var(--jona-radius-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.jona-ai-automation__phase-head {
	display: flex;
	align-items: center;
	gap: var(--jona-space-2);
}

.jona-ai-automation__phase-label {
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.jona-ai-automation__phase-head svg {
	flex: none;
	width: 22px;
	height: 22px;
	color: rgba(255, 255, 255, 0.72);
	margin-left: auto;
}

.jona-ai-automation__phase-title {
	font-size: var(--jona-font-size-lg);
	color: var(--jona-color-inverse-text);
	margin-block: 0;
}

.jona-ai-automation__phase-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--jona-space-2);
}

.jona-ai-automation__phase-list li {
	position: relative;
	padding-left: var(--jona-space-5);
	color: rgba(255, 255, 255, 0.88);
}

/* Dezenter neutraler Punkt als Marker (zusätzlich zur Textliste lesbar).
 * Neutral gehalten, damit Grün wirklich nur den KI-Schritt markiert. */
.jona-ai-automation__phase-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: var(--jona-radius-full);
	background-color: rgba(255, 255, 255, 0.34);
}

/* Mittlere Phase = KI-Schritt: trägt den gezielten grünen Akzent
 * (Surface, Linie, Label, Icon). Eingang/Aktion bleiben ruhig neutral. */
.jona-ai-automation__phase--ai {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(112, 165, 86, 0.42);
}

.jona-ai-automation__phase--ai .jona-ai-automation__phase-label {
	color: var(--jona-color-accent);
}

.jona-ai-automation__phase--ai .jona-ai-automation__phase-head svg {
	color: var(--jona-color-accent);
}

/* Verbinder: feine Flow-Linie mit Pfeil. Desktop horizontal über die
 * Verbinderspalte, gestapelt vertikal (siehe Media-Queries unten). */
.jona-ai-automation__connector {
	position: relative;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, 0.5);
}

.jona-ai-automation__connector::before {
	content: "";
	position: absolute;
	left: var(--jona-space-1);
	right: var(--jona-space-1);
	top: 50%;
	height: var(--jona-border-width);
	background-color: rgba(255, 255, 255, 0.16);
}

.jona-ai-automation__connector svg {
	position: relative;
	width: 26px;
	height: 26px;
}

/* ------------------------------------------------------------------
 * CTA: Layout der nativen Buttons. Die Farb-/Zustandsanpassung auf
 * dunklem Grund übernimmt die generische Utility `.jona-on-dark`
 * (design-system.css) – kein sektionsspezifischer Sonderbutton.
 */
.jona-ai-automation__cta {
	margin-block-start: var(--jona-space-6);
	gap: var(--jona-space-3);
}

.jona-ai-automation__cta .wp-block-button__link {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Tablet (690–999 px): Pipeline vertikal stapeln (keine Quetschung).
 * Reihenfolge: Eingang -> (Verbindung) -> Verarbeitung -> (Verbindung)
 * -> Aktion; jede Phase volle Breite. Die Verbinder werden zu einer
 * feinen vertikalen Flow-Linie (Pfeil um 90° gedreht).
 */
@media (min-width: 690px) and (max-width: 999px) {
	.jona-ai-automation__pipeline {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.jona-ai-automation__connector {
		padding-block: var(--jona-space-1);
	}

	.jona-ai-automation__connector::before {
		left: 50%;
		right: auto;
		top: 0;
		bottom: 0;
		width: var(--jona-border-width);
		height: auto;
		transform: translateX(-50%);
	}

	/* Pfeil nach unten (SVG um 90° drehen). */
	.jona-ai-automation__connector svg {
		transform: rotate(90deg);
	}
}

/* ------------------------------------------------------------------
 * Mobile (< 690 px): Pipeline vollständig vertikal, volle Breite,
 * kein horizontaler Overflow, keine Mini-Spalten. Kompaktere Innen-
 * abstände, damit das dunkle Band nicht wie ein endloser Block wirkt.
 */
@media (max-width: 689px) {
	.jona-ai-automation__pipeline {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.jona-ai-automation__connector {
		padding-block: var(--jona-space-1);
	}

	.jona-ai-automation__connector::before {
		left: 50%;
		right: auto;
		top: 0;
		bottom: 0;
		width: var(--jona-border-width);
		height: auto;
		transform: translateX(-50%);
	}

	.jona-ai-automation__connector svg {
		transform: rotate(90deg);
	}

	.jona-ai-automation__phase {
		padding: var(--jona-space-4);
	}

	.jona-ai-automation__phase-title {
		font-size: var(--jona-font-size-base);
	}

	.jona-ai-automation__rules {
		margin-block: var(--jona-space-4) 0;
	}

	.jona-ai-automation__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.jona-ai-automation__cta .wp-block-button,
	.jona-ai-automation__cta .wp-block-button__link {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * Accessibility & Reduced Motion
 * - Globaler :focus-visible-Ring aus design-system.css greift; auf
 *   dunklem Grund liefert die generische `.jona-on-dark`-Utility den
 *   hellen Ring. Zusätzlich hier ein Fallback, falls die Utility-Klasse
 *   einmal fehlen sollte (A11y-Sicherheitsnetz).
 * - Globales prefers-reduced-motion (design-system.css) reduziert
 *   Transitionen.
 */
.jona-ai-automation :focus-visible {
	outline-color: var(--jona-color-focus-ring-dark-bg);
}

@media (prefers-reduced-motion: reduce) {
	.jona-ai-automation *,
	.jona-ai-automation *::before,
	.jona-ai-automation *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}