/*
Theme Name: RA-Flow
Theme URI: https://www.ra-flow.de/
Description: Block-Theme für die Produktwebsite von RA-Flow. Werte aus dem App-Designsystem (static/css/tokens.css), keine externen Schriften, Skripte oder CDNs.
Version: 1.15.34
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: ra-soft
License: Proprietär
*/

/* ---------------------------------------------------------------------------
   Nur, was theme.json nicht ausdrücken kann. Farben und Maße ausschließlich
   über --wp--preset--*-Variablen (Regel aus docs/design/DESIGNSYSTEM.md:
   keine Hex-Werte außerhalb der Token-Ebene).
   --------------------------------------------------------------------------- */

/* Selbst gehostete Schriften: Dateien nach assets/fonts/ legen und in
   theme.json unter fontFamilies[].fontFace eintragen – NICHT hier und NIE
   per Google-Fonts-CDN (IP-Übertragung an Dritte, LG München I, 3 O 17493/20). */

:root {
	--ra-radius: 6px;
	--ra-radius-lg: 12px;
	--ra-focus: #5E8CB5;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Sichtbarer Fokus – nicht entfernen (DESIGNSYSTEM.md §8). */
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--ra-focus);
	outline-offset: 2px;
}

.skip-link.screen-reader-text:focus { z-index: 100000; }

/* --- Kopfbereich ----------------------------------------------------------- */
.ra-site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.admin-bar .ra-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ra-site-header { top: 46px; } }
.ra-site-header .wp-block-button__link { padding: 0.7rem 1.2rem; font-size: 0.9375rem; }
@media (max-width: 599px) { .ra-site-header .ra-header-cta { display: none; } }
.ra-site-header .ra-header-aktion { gap: 1.25rem; align-items: center; }
.ra-site-header .ra-header-tel { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--wp--preset--color--ink); text-decoration: none; line-height: 1.2; white-space: nowrap; }
.ra-site-header .ra-header-tel svg { flex: none; padding: 0.45rem; box-sizing: content-box; border-radius: 999px; background: var(--wp--preset--color--primary-tint); color: var(--wp--preset--color--primary); }
.ra-site-header .ra-header-tel span { display: flex; flex-direction: column; }
.ra-site-header .ra-header-tel strong { font-size: 0.9375rem; font-weight: 600; }
.ra-site-header .ra-header-tel small { font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); }
.ra-site-header .ra-header-tel:hover strong { color: var(--wp--preset--color--primary); }
@media (max-width: 1199px) { .ra-site-header .ra-header-tel { display: none; } }

/* --- Wortmarke: fester Link zur Startseite, unabhängig vom Website-Titel --- */
.ra-brand { margin: 0; }
.ra-brand a {
	display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px;
	font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.ra-brand a::before {
	content: ""; width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px;
	background: var(--wp--preset--color--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8C39B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M5 7h14M5 7l-3 7a3 3 0 0 0 6 0L5 7zM19 7l-3 7a3 3 0 0 0 6 0l-3-7z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.ra-brand--hell a { color: var(--wp--preset--color--surface); }
.ra-brand--hell a::before { background-color: var(--wp--preset--color--primary); }

/* --- Augenbraue (Überzeile) ------------------------------------------------ */
.ra-eyebrow {
	font-size: 0.8125rem !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0;
}
.is-style-ra-night .ra-eyebrow { color: var(--wp--preset--color--accent); }

.ra-lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--wp--preset--color--ink-2); }
.ra-micro { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }

/* Sprungziele (/funktionen/#fristen, /#lokale-intelligenz) nicht unter der
   klebenden Kopfzeile verstecken. */
html { scroll-padding-top: 6rem; }

/* Lange deutsche Wörter („Wiedereinsetzung“) in schmalen Spalten mit Trennstrich
   umbrechen statt mitten im Wort ohne Strich. Braucht lang="de" am <html>, das
   WordPress aus der Website-Sprache setzt. */
:where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
	-webkit-hyphens: auto; hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
}

/* --- Gruppen-Stile (register_block_style in functions.php) ----------------- */
.wp-block-group.is-style-ra-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ra-radius-lg);
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	box-shadow: var(--wp--preset--shadow--card);
}
.wp-block-group.is-style-ra-night {
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--night-text);
}
.wp-block-group.is-style-ra-night :where(h1, h2, h3, h4, strong) { color: var(--wp--preset--color--surface); }
.wp-block-group.is-style-ra-night a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--surface); }
.wp-block-group.is-style-ra-cta {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-line);
	border-radius: 16px;
	padding: clamp(1.75rem, 1rem + 3vw, 4rem);
}
.wp-block-group.is-style-ra-cta :where(h1, h2, h3, strong) { color: var(--wp--preset--color--surface); }

/* Text auf dunklen Flächen: Hilfsklassen mit fester Farbe (.ra-lead,
   .ra-micro, .ra-eyebrow) würden sonst dunkles Grau bzw. Justizblau auf
   Nacht/Justizblau setzen. Kontraste: night-text auf night ≈ 10:1,
   primary-line auf primary ≈ 9:1, accent auf beiden ≥ 6:1. */
.is-style-ra-night .ra-lead, .is-style-ra-night .ra-micro { color: var(--wp--preset--color--night-text); }
.is-style-ra-cta .ra-lead, .is-style-ra-cta .ra-micro { color: var(--wp--preset--color--primary-line); }
.is-style-ra-cta .ra-eyebrow { color: var(--wp--preset--color--accent); }
.is-style-ra-cta a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--surface); }
:is(.is-style-ra-night, .is-style-ra-cta) .wp-block-list.is-style-ra-check li::before { border-color: var(--wp--preset--color--accent); }

/* Zusammenspiel: Beteiligte als Plaketten, Ablauf als Zeitleiste */
.ra-lane { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
.ra-lane--software { background: var(--wp--preset--color--primary-tint); color: var(--wp--preset--color--primary); }
.ra-lane--ki { background: #F3EAD7; color: #5E4A1F; }
.ra-lane--mensch { background: #E8F3EC; color: #145638; }
.wp-block-list.is-style-ra-flow { list-style: none; padding: 0; margin: 1rem 0 2rem; counter-reset: ra-flow; border-left: 2px solid var(--wp--preset--color--line); }
.wp-block-list.is-style-ra-flow li { counter-increment: ra-flow; position: relative; padding: 0 0 1.5rem 2.75rem; margin: 0; }
.wp-block-list.is-style-ra-flow li::before {
	content: counter(ra-flow); position: absolute; left: -1.05rem; top: 0; width: 2rem; height: 2rem; border-radius: 999px;
	display: grid; place-items: center; font-weight: 700; font-size: 0.875rem;
	background: var(--wp--preset--color--surface); border: 2px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary);
}
.wp-block-list.is-style-ra-flow .ra-lane { margin-bottom: 0.35rem; }

/* Entlastung: Bisher / Mit RA-Flow */
.ra-routine p { margin: 0.5rem 0 0; }
.ra-routine p:last-child { color: var(--wp--preset--color--ink); }

/* Lernende Pseudonymisierung: helle Karte im dunklen KI-Abschnitt */
.is-style-ra-night .ra-pseudo { color: var(--wp--preset--color--ink); margin-top: 2rem; }
.is-style-ra-night .ra-pseudo :where(h3, strong) { color: var(--wp--preset--color--ink); }
.is-style-ra-night .ra-pseudo .ra-eyebrow { color: var(--wp--preset--color--primary); }
.is-style-ra-night .ra-pseudo .wp-block-list.is-style-ra-check li::before { border-color: var(--wp--preset--color--ok); }

/* Drei Ebenen (dunkler Grund): helle Karten */
.is-style-ra-night .ra-level-card { color: var(--wp--preset--color--ink); }
.is-style-ra-night .ra-level-card :where(h3, strong) { color: var(--wp--preset--color--ink); }
.is-style-ra-night .ra-level-card .ra-micro { color: var(--wp--preset--color--ink-2); }

/* Automatisierungsgrad: Stufen, die letzte Karte markiert die feste Grenze */
.ra-levels-light > * { margin: 0 !important; border-top: 3px solid var(--wp--preset--color--primary) !important; }
.ra-levels-light > .ra-limit { border-top-color: var(--wp--preset--color--ok) !important; background: #F2F8F4 !important; }
.ra-levels-light h3 { margin: 0.25rem 0 0.5rem; font-size: 1.1875rem; }

/* Autonomiestufen im KI-Abschnitt (dunkler Grund) */
.ra-levels > * { border-top: 2px solid var(--wp--preset--color--accent); padding-top: 1.25rem; margin: 0 !important; }
.ra-levels h3 { margin: 0.25rem 0 0.5rem; }

/* Pilotprogramm: Hinweis im Hero */
.ra-pilot-hint { margin-top: 0.25rem; }
.ra-pilot-hint a { display: inline-block; padding: 0.55rem 1rem; border-radius: 999px; background: var(--wp--preset--color--primary-tint); border: 1px solid var(--wp--preset--color--primary-line); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.ra-pilot-hint a:hover { background: var(--wp--preset--color--surface); }

/* Vorteile: letzte Kachel als Aufruf */
.ra-tiles > .ra-tile-cta { background: var(--wp--preset--color--primary-tint); }

/* Karten-Raster mit Haarlinien (Funktionsbereiche) */
.ra-tiles { gap: 1px !important; background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ra-radius-lg); overflow: hidden; }
.ra-tiles > * { background: var(--wp--preset--color--surface); padding: 1.75rem; margin: 0 !important; }
.ra-tiles h3 a { text-decoration: none; color: inherit; }
.ra-tiles h3 a::after { content: ""; position: absolute; inset: 0; }
.ra-tiles > * { position: relative; }
.ra-tiles > *:hover { background: var(--wp--preset--color--surface-muted); }

/* Belegleiste */
.ra-facts .ra-fact-value { font-family: var(--wp--preset--font-family--serif); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--wp--preset--color--primary); margin: 0; }
.ra-facts .ra-fact-label { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); margin-top: 0.25rem; }
.ra-facts .ra-fact-value { -webkit-hyphens: manual; hyphens: manual; }
.ra-facts .ra-fact-value a { color: inherit; text-decoration: none; }
.ra-facts .ra-fact-value a:hover, .ra-facts .ra-fact-value a:focus-visible { text-decoration: underline; }

/* --- Button-Stil auf dunklem Grund ----------------------------------------- */
.wp-block-button.is-style-ra-inverse .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.wp-block-button.is-style-ra-inverse .wp-block-button__link:hover { background: var(--wp--preset--color--primary-tint); }
.is-style-ra-night .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--surface); border-color: var(--ra-focus); }

/* --- Listen-Stile ---------------------------------------------------------- */
.wp-block-list.is-style-ra-check { list-style: none; padding-left: 0; }
.wp-block-list.is-style-ra-check li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
.wp-block-list.is-style-ra-check li::before {
	content: ""; position: absolute; left: 0; top: 0.35em; width: 1.1rem; height: 0.6rem;
	border-left: 2.2px solid var(--wp--preset--color--ok); border-bottom: 2.2px solid var(--wp--preset--color--ok);
	transform: rotate(-45deg) scale(0.8); transform-origin: left top; translate: 0.15rem 0.35rem;
}
.wp-block-list.is-style-ra-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.625rem; }
.wp-block-list.is-style-ra-chips li {
	margin: 0; padding: 0.55rem 1rem; border-radius: 999px; font-size: var(--wp--preset--font-size--small); font-weight: 500;
	background: var(--wp--preset--color--primary-tint); border: 1px solid var(--wp--preset--color--primary-line); color: var(--wp--preset--color--primary);
}
.wp-block-list.is-style-ra-steps { list-style: none; padding: 0; counter-reset: ra-step; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.wp-block-list.is-style-ra-steps li { counter-increment: ra-step; border-top: 2px solid var(--wp--preset--color--accent); padding-top: 1.5rem; margin: 0; }
.wp-block-list.is-style-ra-steps li::before { content: counter(ra-step, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--serif); font-weight: 700; color: var(--wp--preset--color--accent); margin-bottom: 0.5rem; }

/* --- Häufige Fragen (core/details) ----------------------------------------- */
.ra-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 1.25rem 0; margin: 0; }
.ra-faq .wp-block-details:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.ra-faq .wp-block-details summary { font-weight: 600; font-size: 1.1875rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; align-items: center; }
.ra-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ra-faq .wp-block-details summary::after { content: "+"; color: var(--wp--preset--color--primary); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.ra-faq .wp-block-details[open] summary::after { content: "–"; }
.ra-faq .wp-block-details > :not(summary) { color: var(--wp--preset--color--ink-2); max-width: 46rem; }

/* --- Platzhalter: fehlende Angaben, die nicht erfunden werden dürfen ------- */
.ra-ph {
	outline: 1.5px dashed #B4761A; outline-offset: 2px;
	background: #FDF3E0; color: #7A4B00;
}
.ra-ph-box {
	min-height: 20rem; display: grid; place-items: center; text-align: center; padding: 1.5rem;
	border-radius: var(--ra-radius-lg);
	outline: 1.5px dashed #B4761A; background: #FDF3E0; color: #7A4B00;
}

/* --- Über uns: Porträt-Platzhalter ----------------------------------------- */
.ra-portrait { min-height: 14rem; aspect-ratio: 4 / 3; margin-bottom: 1rem; }

/* --- Produktbild ----------------------------------------------------------- */
.ra-product-shot img { width: 100%; height: auto; }
/* Hauptüberschriften (H1, auch Seitentitel): ohne Silbentrennung, mit
   ausgeglichenen Zeilen. Größe einheitlich über theme.json (höchstens 2,75 rem). */
h1, .wp-block-post-title { -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
.ra-product.is-vertically-aligned-top { padding-top: 2.25rem; }
.ra-product .is-style-ra-check { margin-top: 1.5rem; }
.ra-product img { border-radius: var(--ra-radius-lg); border: 1px solid var(--wp--preset--color--line); box-shadow: var(--wp--preset--shadow--product); }

/* --- Demo-Formular (inc/demo-form.php) ------------------------------------- */
.ra-form { display: grid; gap: 1.1rem; }
.ra-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.1rem; min-width: 0; }
.ra-form legend, .ra-form label { font-size: 0.9375rem; font-weight: 600; display: block; margin-bottom: 0.35rem; }
.ra-form .ra-optional { font-weight: 400; color: var(--wp--preset--color--ink-muted); }
.ra-form input[type="text"], .ra-form input[type="email"], .ra-form input[type="tel"], .ra-form select {
	width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 0.875rem; font: inherit; font-size: 1rem;
	border: 1px solid #CFC8BA; border-radius: var(--ra-radius); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink);
}
.ra-form input:focus, .ra-form select:focus { border-color: var(--wp--preset--color--primary); outline: 3px solid var(--wp--preset--color--primary-line); }
.ra-form .ra-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.ra-chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.ra-chips label { margin: 0; font-weight: 500; }
.ra-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ra-chips span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
	border: 1.5px solid var(--wp--preset--color--primary-line); color: var(--wp--preset--color--primary); background: var(--wp--preset--color--surface);
}
.ra-chips input:checked + span { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); }
.ra-chips input:checked + span::before { content: "✓\00a0"; }
.ra-chips input:focus-visible + span { outline: 3px solid var(--ra-focus); outline-offset: 2px; }
.ra-form .ra-submit, .ra-form .ra-next {
	min-height: 54px; width: 100%; border: 0; border-radius: var(--ra-radius); cursor: pointer; font: inherit; font-weight: 600; font-size: 1.0625rem;
	background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface);
}
.ra-form .ra-submit:hover, .ra-form .ra-next:hover { background: var(--wp--preset--color--primary-dark); }
.ra-form .ra-back { min-height: 54px; padding: 0 1.25rem; border: 1.5px solid var(--wp--preset--color--primary); border-radius: var(--ra-radius); background: transparent; color: var(--wp--preset--color--primary); font: inherit; font-weight: 600; cursor: pointer; }
.ra-form .ra-actions { display: flex; gap: 0.75rem; }
/* „Zurück“ behält seine Breite, der Absende-Knopf füllt den Rest der Zeile. */
.ra-form .ra-actions .ra-back { flex: none; white-space: nowrap; }
.ra-form .ra-actions .ra-submit { flex: 1 1 auto; width: auto; min-width: 0; }
.ra-form .ra-progress { height: 6px; border-radius: 999px; background: var(--wp--preset--color--primary-tint); overflow: hidden; }
.ra-form .ra-progress > span { display: block; height: 100%; width: 50%; background: var(--wp--preset--color--primary); transition: width .2s ease; }
.ra-form[data-step="2"] .ra-progress > span { width: 100%; }
.ra-form .ra-hp { position: absolute !important; left: -9999px !important; }
.ra-form .ra-note { font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--ink-muted); margin: 0; }
.ra-form .ra-consent { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: var(--wp--preset--color--ink-2); margin: 0; }
.ra-form .ra-consent input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--wp--preset--color--primary); }
.ra-form .ra-consent input:focus-visible { outline: 3px solid var(--ra-focus); outline-offset: 2px; }
.ra-form .ra-erste-ebene { font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--ink-muted); border-top: 1px solid var(--wp--preset--color--line); padding-top: 0.75rem; }
.ra-form .ra-erste-ebene__titel { font-weight: 600; color: var(--wp--preset--color--ink-2); margin: 0 0 0.35rem; }
.ra-form .ra-erste-ebene dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 0 0 0.5rem; }
.ra-form .ra-erste-ebene dt { font-weight: 600; color: var(--wp--preset--color--ink-2); }
.ra-form .ra-erste-ebene dd { margin: 0; }
@media (max-width: 480px) { .ra-form .ra-erste-ebene dl { grid-template-columns: 1fr; } .ra-form .ra-erste-ebene dd { margin-bottom: 0.35rem; } }
.ra-form-msg { padding: 1rem 1.25rem; border-radius: var(--ra-radius); margin-bottom: 1rem; }
.ra-form-msg--ok { background: #E8F3EC; color: #145638; border: 1px solid #C9E2D3; }
.ra-form-msg--err { background: #FBEDEB; color: #8E2019; border: 1px solid #EFCFC9; }

/* --- Kontaktkasten mit Rückruf und Kurzleiste Vertragspartner ------------- */
.ra-kontakt { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--wp--preset--color--primary-line); border-radius: var(--ra-radius); background: var(--wp--preset--color--primary-tint); }
.ra-kontakt p { margin: 0 0 0.35rem; }
.ra-kontakt__titel { font-weight: 600; }
.ra-kontakt .ra-form-msg { margin: 0.5rem 0 0; }
.ra-rueckruf summary { cursor: pointer; font-weight: 600; color: var(--wp--preset--color--primary); }
.ra-rueckruf[open] summary { margin-bottom: 1rem; }
.ra-vertragspartner-kurz { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--wp--preset--color--ink-muted); }
/* Ohne JavaScript sind beide Schritte sichtbar; die Schritt-Steuerung blendet
   nur aus, wenn assets/js/demo-form.js geladen ist (Klasse .ra-js). */
.ra-js .ra-form[data-step="1"] .ra-step-2, .ra-js .ra-form[data-step="2"] .ra-step-1 { display: none; }
html:not(.ra-js) .ra-form :is(.ra-next, .ra-back, .ra-stepcount) { display: none; }

/* --- Technologie & Sicherheit ------------------------------------------- */
.ra-developer { border-top: 4px solid var(--wp--preset--color--accent) !important; }
.ra-hq-facts { margin: 1.25rem 0; padding: 1.25rem 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); gap: 1rem !important; }
.ra-statement { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.4; font-weight: 600; color: var(--wp--preset--color--ink); }

/* --- Ratgeber: Pillar und Satelliten (inc/cluster.php) ------------------- */
.ra-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }
.ra-breadcrumbs li + li::before { content: "›"; margin-right: 0.5rem; color: var(--wp--preset--color--ink-muted); }
.ra-breadcrumbs a { color: var(--wp--preset--color--ink-2); }
.ra-article-meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); gap: 0.35rem !important; }
.ra-article-meta p { margin: 0; }
.ra-article-meta .wp-block-post-author-name::after { content: " ·"; }
.ra-article > .wp-block-post-content { font-size: 1.125rem; line-height: 1.7; }
.ra-article > .wp-block-post-content :where(h2) { margin-top: 2.5em; scroll-margin-top: 6rem; }
.ra-article > .wp-block-post-content :where(h3) { margin-top: 1.75em; }
.ra-article > .wp-block-post-content :where(p, li) { max-width: 44rem; }
.ra-aside { position: sticky; top: 6.5rem; align-self: flex-start; display: grid; gap: 1.5rem; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 781px) { .ra-aside { position: static; } }
.ra-toc, .ra-cluster-nav { border-left: 2px solid var(--wp--preset--color--line); padding-left: 1rem; }
.ra-toc__title, .ra-cluster-nav__title { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); }
.ra-toc ol, .ra-cluster-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ra-toc a, .ra-cluster-nav a { color: var(--wp--preset--color--ink-2); text-decoration: none; }
.ra-toc a:hover, .ra-cluster-nav a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
.ra-cluster-nav [aria-current] { font-weight: 600; color: var(--wp--preset--color--primary); }
.ra-cluster-nav__pillar { font-weight: 600; }
.ra-summary { border-left: 4px solid var(--wp--preset--color--primary) !important; }
.ra-summary__title { margin: 0; }
.ra-hint { background: var(--wp--preset--color--primary-tint) !important; border-color: var(--wp--preset--color--primary-line) !important; }
.ra-hint p { margin: 0.25rem 0; }
.ra-author-box { padding: 1.5rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ra-radius-lg); }
.ra-rule { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin: 3rem 0 2rem; opacity: 1; }

/* --- Mobile Aktionsleiste -------------------------------------------------- */
.ra-mobile-cta { display: none; }
@media (max-width: 781px) {
	.ra-mobile-cta {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 -6px 18px rgba(16, 42, 65, 0.10);
	}
	.ra-mobile-cta .wp-block-buttons, .ra-mobile-cta .wp-block-button, .ra-mobile-cta .wp-block-button__link { width: 100%; }
	.ra-mobile-cta .wp-block-buttons { flex-wrap: nowrap; gap: 0.5rem; }
	.ra-mobile-cta .wp-block-button { flex: 1 1 0; }
	.ra-mobile-cta .wp-block-button.is-style-outline { flex: 0 0 auto; width: auto; }
	body:has(.ra-mobile-cta) { padding-bottom: 80px; }
}

/* --- Produktvideo (16:9 freihalten, damit beim Laden nichts springt) ------- */
.ra-video video {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--night);
	border: 1px solid var(--wp--preset--color--line); border-radius: 8px;
	box-shadow: 0 8px 24px rgba(16, 42, 65, 0.10);
}
.ra-video figcaption { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }
#video .ra-details { margin-top: 1.25rem; }
#video .wp-block-buttons { margin-top: 1rem; }
/* Klickfläche über dem gezeichneten Button der Schlusstafel (assets/js/video-cta.js) */
.ra-video-frame { position: relative; }
.ra-video-cta {
	position: absolute; display: block; border-radius: 8px;
	font-size: 0; color: transparent; text-decoration: none;
}
.ra-video-cta[hidden] { display: none; }
.ra-video-cta:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
.ra-video-cta:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* --- Bildschirmfotos aus der Anwendung ------------------------------------ */
.ra-screen img {
	border: 1px solid var(--wp--preset--color--line); border-radius: 8px;
	box-shadow: 0 8px 24px rgba(16, 42, 65, 0.10);
}
.ra-screen figcaption { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }
.is-style-ra-cta .ra-screen figcaption { color: var(--wp--preset--color--primary-line); }

/* --- Aufklappbare Funktionsbereiche (/funktionen/) ------------------------ */
.ra-details {
	border: 1px solid var(--wp--preset--color--line); border-radius: 8px;
	background: var(--wp--preset--color--surface); padding: 0.75rem 1rem;
}
.ra-details > summary {
	cursor: pointer; font-weight: 600; color: var(--wp--preset--color--primary);
}
.ra-details > summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }
.ra-details[open] > summary { margin-bottom: 0.75rem; }

/* --- Fußbereich ------------------------------------------------------------ */
.ra-footer ul { list-style: none; }
.ra-footer li { margin-bottom: 0.5rem; }
.ra-footer .ra-footer-rule { border: 0; border-top: 1px solid #27547C; opacity: 1; }
.ra-footer a { color: var(--wp--preset--color--night-text); text-decoration: none; }
.ra-footer a:hover { color: var(--wp--preset--color--surface); text-decoration: underline; }
.ra-footer .ra-footer-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #93A9BE; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Kriterientabelle „So erfüllt RA-Flow diese Kriterien“ in Ratgeber-Beiträgen (1.15.34) */
.ra-kriterien table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ra-kriterien th, .ra-kriterien td { text-align: left; vertical-align: top; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.ra-kriterien thead th { border-bottom-width: 2px; }
.ra-kriterien td:first-child { width: 32%; }
@media (max-width: 600px) { .ra-kriterien td:first-child { width: auto; } .ra-kriterien th, .ra-kriterien td { padding: 0.5rem; } }