/*
Theme Name: DigitalAblauf
Theme URI: https://digitalablauf.de/
Description: Child-Theme von Twenty Twenty-Five für digitalablauf.de – Landingpage nach Vorlage, Farben und Schrift nach Brand-Guide.
Author: DigitalAblauf
Template: twentytwentyfive
Version: 0.2.8
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: digitalablauf
*/

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }
main [id] { scroll-margin-top: 88px; }

/* ---------- Kopfzeile (klebt oben) ---------- */
header.wp-block-template-part:has(.da-kopf) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
.da-kopf {
	/* bewusst ohne backdrop-filter: der macht die Kopfzeile zum Bezugsrahmen für
	   position:fixed – das Handy-Menü wäre dann nur so hoch wie die Kopfzeile */
	background: var(--wp--preset--color--nachtblau);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0.85rem 1.5rem;
}
.da-kopf > .wp-block-group { max-width: 1200px; margin-inline: auto; }
.da-kopf .da-logo img { display: block; height: auto; }
/* Farbe am Menü setzen: WordPress lässt die Links mit höherer Priorität erben */
.da-kopf .wp-block-navigation { font-size: 0.95rem; font-weight: 600; color: var(--wp--preset--color--nebelblau); }
.da-kopf .wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }
.da-kopf .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.da-kopf .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible { color: #fff; }
/* Handy-Menü: bildschirmfüllend, große Links, Termin-Knopf unten */
/* :not(.has-background) hebt die Priorität über die WordPress-Vorgabe (weißes Menü) –
   gilt auch für im Editor gespeicherte Kopfzeilen ohne eigene Menüfarbe */
.da-kopf .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.da-kopf .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--nachtblau);
	color: #fff;
	padding: 1.25rem 1.5rem 2rem;
}
.da-kopf .wp-block-navigation__responsive-container-open,
.da-kopf .wp-block-navigation__responsive-container-close { color: #fff; }
.da-kopf .wp-block-navigation__responsive-container-open svg,
.da-kopf .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.da-kopf .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem !important;
	align-items: stretch !important;
	gap: 0 !important;
}
.da-kopf .is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}
.da-kopf .is-menu-open .wp-block-navigation-item { width: 100%; }
.da-kopf .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.da-kopf .is-menu-open .da-nav-knopf { margin-top: 2rem; }
.da-kopf .is-menu-open .da-nav-knopf .wp-block-navigation-item__content.wp-block-navigation-item__content {
	background: #fff;
	color: var(--wp--preset--color--logo-blau);
	border: 0;
	border-radius: 12px;
	text-align: center;
	font-size: 1.05rem;
}
/* Der Termin-Knopf im Menü erscheint nur im aufgeklappten Handy-Menü */
.da-kopf .wp-block-navigation__responsive-container:not(.is-menu-open) .da-nav-knopf { display: none; }
.da-kopf .wp-block-button__link { padding: 0.65rem 1.2rem; font-size: 0.9rem; }
@media (max-width: 781px) {
	.da-kopf .da-kopf-knopf { display: none; }
	.da-kopf .da-logo img { width: 190px !important; }
}

/* ---------- Abschnitte ---------- */
.da-sektion {
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-top: 0 !important;
}
.da-hell { background: var(--wp--preset--color--papier); color: var(--wp--preset--color--nachtblau); }
.da-weiss { background: #fff; color: var(--wp--preset--color--nachtblau); }
.da-dunkel { background: var(--wp--preset--color--nachtblau); color: #fff; }
.da-dunkel h1, .da-dunkel h2, .da-dunkel h3 { color: #fff; }
.da-dunkel p, .da-dunkel li { color: var(--wp--preset--color--nebelblau); }
.da-grenze-oben { border-top: 1px solid rgba(255, 255, 255, 0.07); }

.da-kopfbereich { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.da-kopfbereich p:not(.da-eyebrow) { max-width: 42rem; margin-inline: auto; font-size: 1.125rem; }
.da-hell .da-kopfbereich p:not(.da-eyebrow),
.da-weiss .da-kopfbereich p:not(.da-eyebrow) { color: var(--wp--preset--color--grau); }

.da-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--logo-blau);
	margin-bottom: 0.75rem !important;
}
.da-dunkel .da-eyebrow { color: var(--wp--preset--color--linienblau); }

.da-sektion h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 0; }
.da-akzent { color: var(--wp--preset--color--logo-blau); }
.da-dunkel .da-akzent { color: var(--wp--preset--color--linienblau); }
.da-leise { color: var(--wp--preset--color--grau); }

/* ---------- Hero ---------- */
.da-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--wp--preset--color--nachtblau);
	background-image:
		radial-gradient(ellipse 60% 55% at 78% 30%, rgba(142, 160, 216, 0.2), transparent 70%),
		radial-gradient(ellipse 45% 50% at 5% 95%, rgba(44, 68, 140, 0.55), transparent 70%);
	padding-top: clamp(4rem, 9vw, 8rem);
}
/* Raster, das zur Mitte hin sichtbar ist und zu den Rändern ausläuft */
.da-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 60px 60px;
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 40%, #000 30%, transparent 80%);
	mask-image: radial-gradient(ellipse 75% 70% at 60% 40%, #000 30%, transparent 80%);
	pointer-events: none;
}
/* Weicher Übergang zum nächsten Abschnitt */
.da-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(142, 160, 216, 0.35), transparent);
}
.da-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.25rem); line-height: 1.05; font-weight: 900; letter-spacing: -0.015em; margin: 0 0 1.5rem; }
.da-hero h1 .da-akzent {
	background: linear-gradient(100deg, #C9D3F0 0%, var(--wp--preset--color--linienblau) 55%, #6F86D0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.da-hero .da-einleitung { font-size: 1.2rem; line-height: 1.6; max-width: 36rem; margin-bottom: 2.25rem !important; }
.da-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(142, 160, 216, 0.35);
	background: rgba(142, 160, 216, 0.1);
	color: var(--wp--preset--color--hellblau) !important;
	font-size: 0.85rem;
	font-weight: 700;
	margin-bottom: 2rem !important;
}
.da-pill::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--linienblau);
	box-shadow: 0 0 0 4px rgba(142, 160, 216, 0.18);
}
/* Diagramm in einer Glasfläche */
.da-hero figure.da-hero-bild {
	position: relative;
	margin: 0 auto;
	max-width: 520px;
	padding: 1.25rem;
	border-radius: 24px;
	border: 1px solid rgba(142, 160, 216, 0.2);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
	box-shadow: 0 40px 80px -40px rgba(5, 10, 30, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.da-hero figure.da-hero-bild img { display: block; width: 100% !important; height: auto; }
/* Produktzeile: Schaltwerk */
.da-hero-produkt { margin: 2.5rem 0 0 !important; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); max-width: 36rem; }
.da-hero-produkt a {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	color: var(--wp--preset--color--nebelblau);
	text-decoration: none;
	font-size: 0.95rem;
}
.da-hero-produkt img { width: 28px; height: 28px; flex: none; }
.da-hero-produkt strong { color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.da-hero-produkt-neu {
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: rgba(142, 160, 216, 0.18);
	border: 1px solid rgba(142, 160, 216, 0.35);
	color: var(--wp--preset--color--hellblau);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.da-hero-produkt a::after { content: "→"; color: var(--wp--preset--color--linienblau); transition: transform 0.2s ease; }
.da-hero-produkt a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.da-hero-produkt a:hover::after { transform: translateX(3px); }
.da-hero-produkt a:focus-visible { outline: 2px solid var(--wp--preset--color--linienblau); outline-offset: 4px; border-radius: 6px; }
/* Handy: Diagramm unter den Text statt ausblenden, Knöpfe in voller Breite */
@media (max-width: 781px) {
	.da-hero { padding-top: 3rem; padding-bottom: 3.5rem; }
	.da-hero .wp-block-columns { gap: 2.5rem; }
	.da-hero .da-pill { font-size: 0.75rem; padding: 0.4rem 0.85rem; margin-bottom: 1.5rem !important; }
	.da-hero .da-einleitung { font-size: 1.05rem; }
	.da-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.da-hero .wp-block-buttons .wp-block-button,
	.da-hero .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }
	.da-hero figure.da-hero-bild { padding: 0.75rem; border-radius: 18px; max-width: 420px; }
	.da-hero-produkt { margin-top: 2rem !important; }
}

/* ---------- Knöpfe ---------- */
.wp-block-button__link { transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.da-dunkel .is-style-outline .wp-block-button__link {
	border: 1px solid rgba(195, 204, 234, 0.5);
	color: #fff;
	background: transparent;
}
.da-dunkel .is-style-outline .wp-block-button__link:hover { border-color: #fff; background: rgba(255, 255, 255, 0.05); }
.wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--linienblau); outline-offset: 3px; }

/* ---------- Fokus: Rahmen nur bei Tastaturbedienung ----------
   WordPress zeigt bei jedem :focus einen Rahmen – auch nach Antippen oder Klicken,
   z. B. am ersten Menülink, weil das Handy-Menü beim Öffnen den Fokus dorthin setzt.
   Für Maus und Touch blenden wir ihn aus, für die Tastatur (:focus-visible) bleibt
   er deutlich sichtbar (Barrierefreiheit, WCAG 2.4.7). */
.wp-site-blocks :focus:not(:focus-visible) { outline: none; }
/* Safari zeigt den Rahmen auch nach Antippen, wenn WordPress den Fokus setzt (Handy-Menü):
   nach Maus/Touch (Klasse da-zeiger, siehe functions.php) grundsätzlich ohne Rahmen */
html.da-zeiger .wp-site-blocks :focus { outline: none; }
.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible,
.wp-site-blocks summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--logo-blau);
	outline-offset: 3px;
	border-radius: 4px;
}
.da-dunkel a:focus-visible,
.da-dunkel button:focus-visible,
.da-kopf a:focus-visible,
.da-kopf button:focus-visible,
.da-fuss a:focus-visible { outline-color: var(--wp--preset--color--linienblau); }

/* ---------- Karten ---------- */
.da-karte {
	background: #fff;
	border: 1px solid #E3E6EE;
	border-radius: 18px;
	padding: 2rem !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.da-karte:hover { border-color: rgba(44, 68, 140, 0.35); box-shadow: 0 18px 40px -24px rgba(44, 68, 140, 0.35); }
.da-karte h3 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.da-karte p { color: var(--wp--preset--color--grau); margin: 0; }
.da-karte .da-nummer {
	font-size: 4.5rem;
	font-weight: 900;
	line-height: 1;
	color: var(--wp--preset--color--hellblau);
	margin: 0 0 1rem !important;
}

.da-karte-dunkel {
	position: relative;
	background: var(--wp--preset--color--karte-dunkel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	padding: 2.5rem 2.5rem 2.5rem 3rem !important;
}
.da-karte-dunkel::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2rem;
	bottom: 2rem;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(var(--wp--preset--color--logo-blau), var(--wp--preset--color--linienblau));
}
.da-karte-dunkel h3 { font-size: 1.6rem; margin: 0 0 1rem; }

.da-statement {
	background: var(--wp--preset--color--nachtblau);
	color: #fff;
	border-radius: 28px;
	padding: 3rem 2.5rem !important;
	text-align: center;
}
.da-statement p { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; line-height: 1.3; }
/* Akzent im Statement: hell und mit Verlauf, damit er auf Nachtblau trägt (vorher Logo-Blau, kaum lesbar) */
.da-statement .da-akzent {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 1.2em;
	font-weight: 900;
	background: linear-gradient(100deg, #E6EAF5 0%, var(--wp--preset--color--linienblau) 60%, #6F86D0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
@media (max-width: 781px) {
	.da-statement { padding: 2.25rem 1.25rem !important; border-radius: 22px; }
	.da-statement p { font-size: 1.3rem; }
	.da-statement .da-akzent { font-size: 1.45em; line-height: 1.15; margin-top: 0.6rem; }
}

/* Problem-Karten: 01 oben mittig, darunter 02–04 in einer Reihe */
#problem .wp-block-group.is-layout-grid:has(> .da-karte) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#problem .wp-block-group.is-layout-grid > .da-karte:first-child { grid-column: 2; grid-row: 1; }
#problem .wp-block-group.is-layout-grid > .da-karte:not(:first-child) { grid-row: 2; }
@media (max-width: 1023px) {
	#problem .wp-block-group.is-layout-grid:has(> .da-karte) { grid-template-columns: 1fr; }
	#problem .wp-block-group.is-layout-grid > .da-karte:first-child,
	#problem .wp-block-group.is-layout-grid > .da-karte:not(:first-child) { grid-column: auto; grid-row: auto; }
}

/* Haken-Liste */
.da-haken { list-style: none; padding-left: 0; margin: 1.5rem 0 2rem; }
.da-haken li { position: relative; padding-left: 2rem; margin-bottom: 0.7rem; }
.da-haken li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--linienblau);
	background: radial-gradient(circle, var(--wp--preset--color--linienblau) 30%, transparent 32%);
}
.da-hell .da-haken li::before, .da-weiss .da-haken li::before { border-color: var(--wp--preset--color--logo-blau); background: radial-gradient(circle, var(--wp--preset--color--logo-blau) 30%, transparent 32%); }

/* Vorgehen */
/* Raster auf genau 3 Spalten festlegen, damit die Schritte mittig stehen
   (auto-fill ließ rechts eine leere vierte Spalte) */
.wp-block-group.is-layout-grid:has(> .da-schritt) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 781px) {
	.wp-block-group.is-layout-grid:has(> .da-schritt) { grid-template-columns: 1fr; }
}
.da-schritt { text-align: center; }
.da-schritt-zahl {
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.5rem !important;
	border-radius: 18px;
	border: 1px solid rgba(142, 160, 216, 0.35);
	background: rgba(142, 160, 216, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--wp--preset--color--hellblau) !important;
}
.da-schritt h3 { font-size: 1.25rem; margin: 0.4rem 0 1rem; }
.da-schritt p { font-size: 0.95rem; max-width: 18rem; margin-inline: auto; }

/* Kennzahlen */
.da-kennzahl { text-align: center; }
.da-kennzahl .da-wert { font-size: 2.6rem; font-weight: 900; line-height: 1.1; color: var(--wp--preset--color--nachtblau); }

/* Platzhalter für Inhalte, die noch fehlen */
.da-platzhalter { border-style: dashed !important; border-color: #9AA8D6 !important; }
.da-dunkel .da-platzhalter { border-color: rgba(142, 160, 216, 0.5) !important; }

/* Zitate */
.da-zitat blockquote, .da-zitat .wp-block-quote { border: 0; padding: 0; margin: 1rem 0; font-style: italic; }

/* ---------- FAQ ---------- */
.da-faq .wp-block-details {
	background: #fff;
	border: 1px solid #E3E6EE;
	border-radius: 14px;
	padding: 1.1rem 1.5rem;
	margin-bottom: 0.9rem;
}
.da-faq .wp-block-details summary { font-weight: 700; cursor: pointer; font-size: 1.05rem; }
.da-faq .wp-block-details[open] summary { color: var(--wp--preset--color--logo-blau); margin-bottom: 0.6rem; }
.da-faq .wp-block-details p { color: var(--wp--preset--color--grau); margin: 0; }

/* ---------- Kontakt ---------- */
.da-kontakt-karte {
	background: var(--wp--preset--color--karte-dunkel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	padding: 2.5rem !important;
	text-align: center;
}
.da-kontakt-karte img { margin-inline: auto; }

/* ---------- Fußzeile ---------- */
.da-fuss {
	background: var(--wp--preset--color--tiefnacht);
	color: var(--wp--preset--color--nebelblau);
	padding: 4rem 1.5rem 2rem;
	font-size: 0.95rem;
}
.da-fuss h4 { color: #fff; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; }
.da-fuss a { color: var(--wp--preset--color--nebelblau); text-decoration: none; }
.da-fuss a:hover { color: #fff; }
.da-fuss ul { list-style: none; padding: 0; margin: 0; }
.da-fuss li { margin-bottom: 0.5rem; }
.da-fuss .da-fuss-unten { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.5rem; margin-top: 3rem; font-size: 0.8rem; }

/* ---------- Schaltwerk-Karte (Marke Schaltwerk: Signet, Wortmarke, Leiterbahnen mit offenen Lötaugen; einfarbig weiß auf Dunkel) ---------- */
.da-karte-schaltwerk { overflow: hidden; min-height: 22rem; }
.da-karte-schaltwerk::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-opacity='.32'%3E%3Cpath d='M400 30H310L286 54V100'/%3E%3Cpath d='M400 90H350L330 110V150L306 174V196'/%3E%3Cpath d='M400 150H380L360 170V226'/%3E%3Cpath d='M262 260V222L242 202V158'/%3E%3Cpath d='M200 260V240L180 220V188'/%3E%3Cpath d='M400 210H388'/%3E%3C/g%3E%3Cg stroke-opacity='.6'%3E%3Ccircle cx='286' cy='106' r='4.4'/%3E%3Ccircle cx='306' cy='202' r='4.4'/%3E%3Ccircle cx='360' cy='232' r='4.4'/%3E%3Ccircle cx='242' cy='152' r='4.4'/%3E%3Ccircle cx='180' cy='182' r='4.4'/%3E%3Ccircle cx='382' cy='210' r='4.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / min(100%, 28rem) auto;
	pointer-events: none;
}
.da-karte-schaltwerk > * { position: relative; z-index: 1; }
.da-marke-schaltwerk { gap: 0.9rem; margin-bottom: 1.25rem; align-items: center; }
.da-marke-schaltwerk figure { margin: 0; }
.da-marke-schaltwerk img { display: block; width: 56px; height: 56px; }
.da-karte-schaltwerk .da-wortmarke { margin: 0 !important; font-size: 1.75rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
/* Platz für spätere Inhalte (Text, Liste, Knopf) – im Editor einfach Blöcke hineinsetzen */
.da-schaltwerk-inhalt { margin-top: 1rem; }

/* ---------- Leistungs-Karten: gleiche Höhen + Aufwertung ---------- */
/* Jede Karte teilt die Zeilen des Rasters (Subgrid): Eyebrow, Überschrift, Text, Liste und Knopf
   stehen in allen Karten auf gleicher Höhe, egal wie lang die Texte sind. */
.da-karte-leistung {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	row-gap: 0;
	overflow: hidden;
	background:
		radial-gradient(120% 70% at 100% 0%, rgba(142, 160, 216, 0.16), transparent 60%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%),
		var(--wp--preset--color--karte-dunkel);
	box-shadow: 0 28px 48px -30px rgba(5, 10, 30, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.da-karte-leistung:hover {
	transform: translateY(-4px);
	border-color: rgba(142, 160, 216, 0.4);
	box-shadow: 0 34px 56px -30px rgba(5, 10, 30, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.da-karte-leistung > * { position: relative; z-index: 1; width: 100%; max-width: none !important; margin-inline: 0 !important; margin-block: 0; justify-self: stretch; }
.da-karte-leistung h3 { margin: 0 0 1rem; }
.da-karte-leistung > p:not(.da-eyebrow) { margin: 0; }
.da-karte-leistung .da-haken { margin: 1.5rem 0 1.75rem; }
/* Eyebrow als Marke mit Punkt */
.da-karte-leistung .da-eyebrow {
	justify-self: start;
	width: fit-content;
	margin: 0 0 1.1rem;
	padding: 0.35rem 0.8rem 0.35rem 0.7rem;
	border-radius: 999px;
	background: rgba(142, 160, 216, 0.12);
	border: 1px solid rgba(142, 160, 216, 0.22);
}
.da-karte-leistung .da-eyebrow::before {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.55rem;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--linienblau);
	vertical-align: 0.08em;
}
/* Knopfzeile mit Trennlinie, unten bündig */
.da-karte-leistung .wp-block-buttons { align-self: end; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
/* Große Ziffer als Wasserzeichen oben rechts */
.da-karte-nr-1::after, .da-karte-nr-2::after {
	position: absolute;
	right: 1.75rem;
	top: 1.1rem;
	font-size: 5.5rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(142, 160, 216, 0.1);
	pointer-events: none;
}
.da-karte-nr-1::after { content: "01"; }
.da-karte-nr-2::after { content: "02"; }
/* Schaltwerk-Karte: Zeilen im selben Raster (Marke = Überschriftzeile, Inhalt = Text + Liste) */
.da-karte-schaltwerk .da-eyebrow { grid-row: 1; }
.da-karte-schaltwerk .da-marke-schaltwerk { grid-row: 2; display: flex; flex-wrap: nowrap; align-items: center; margin: 0 0 1rem; }
/* Leiterbahnen enden oberhalb der Knopfzeile */
.da-karte-schaltwerk::after { inset: 0 0 7.5rem 0; background-position: right bottom; }
.da-karte-schaltwerk .da-schaltwerk-inhalt { grid-row: 3 / span 2; }
.da-karte-schaltwerk .wp-block-buttons { grid-row: 5; }
.da-karte-leistung .da-platzhalter .wp-block-button__link { border-style: dashed; }
/* Ohne Subgrid-Unterstützung: Knöpfe per Flex unten halten */
@supports not (grid-template-rows: subgrid) {
	.da-karte-leistung { display: flex; flex-direction: column; grid-row: auto; }
	.da-karte-leistung .wp-block-buttons { margin-top: auto; }
}
/* Einspaltig (Handy): Zeilen nicht mit Nachbarkarten teilen */
@media (max-width: 781px) {
	.da-karte-leistung { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
	.da-karte-leistung .wp-block-buttons { margin-top: auto; }
}

/* ---------- Schaltwerk-Abschnitt (Marke Schaltwerk: Signet in Markenblau #2563eb, Leiterbahnen in Anthrazit #3A3F47 mit offenen Lötaugen) ---------- */
#schaltwerk .da-schaltwerk-signet { margin: 0 auto 1.25rem !important; }
#schaltwerk .da-schaltwerk-signet img { display: block; width: 64px; height: 64px; }
/* Leiterbahnen im Hintergrund des Abschnitts: unten rechts und (gespiegelt) oben links aus den Ecken */
#schaltwerk.da-sektion {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' fill='none' stroke='%233A3F47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform=''%3E%3Cg stroke-opacity='.15'%3E%3Cpath d='M400 60H330L306 84V120'/%3E%3Cpath d='M400 120H360L340 140V180L316 204V222'/%3E%3Cpath d='M400 180H384L368 196V236'/%3E%3Cpath d='M282 260V236L262 216V188'/%3E%3Cpath d='M226 260V246L210 230V214'/%3E%3Cpath d='M400 24H250L226 48V70'/%3E%3Cpath d='M150 260V250L130 230V160L110 140V118'/%3E%3C/g%3E%3Cg stroke-opacity='.32'%3E%3Ccircle cx='306' cy='126' r='4.4'/%3E%3Ccircle cx='316' cy='228' r='4.4'/%3E%3Ccircle cx='368' cy='242' r='4.4'/%3E%3Ccircle cx='262' cy='182' r='4.4'/%3E%3Ccircle cx='210' cy='208' r='4.4'/%3E%3Ccircle cx='226' cy='76' r='4.4'/%3E%3Ccircle cx='110' cy='112' r='4.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' fill='none' stroke='%233A3F47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(400 260) scale(-1 -1)'%3E%3Cg stroke-opacity='.15'%3E%3Cpath d='M400 60H330L306 84V120'/%3E%3Cpath d='M400 120H360L340 140V180L316 204V222'/%3E%3Cpath d='M400 180H384L368 196V236'/%3E%3Cpath d='M282 260V236L262 216V188'/%3E%3Cpath d='M226 260V246L210 230V214'/%3E%3Cpath d='M400 24H250L226 48V70'/%3E%3Cpath d='M150 260V250L130 230V160L110 140V118'/%3E%3C/g%3E%3Cg stroke-opacity='.32'%3E%3Ccircle cx='306' cy='126' r='4.4'/%3E%3Ccircle cx='316' cy='228' r='4.4'/%3E%3Ccircle cx='368' cy='242' r='4.4'/%3E%3Ccircle cx='262' cy='182' r='4.4'/%3E%3Ccircle cx='210' cy='208' r='4.4'/%3E%3Ccircle cx='226' cy='76' r='4.4'/%3E%3Ccircle cx='110' cy='112' r='4.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: right bottom, left top;
	background-size: min(28vw, 20rem) auto, min(28vw, 20rem) auto;
}
#schaltwerk .da-schaltwerk-raster > .da-karte { position: relative; background-color: #fff; }
#schaltwerk .da-schaltwerk-raster > .da-karte:hover { border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 18px 40px -24px rgba(37, 99, 235, 0.35); }
#schaltwerk .da-leise { text-align: center; max-width: 42rem; margin: 2.5rem auto 0; }
/* Knopf mittig, links und rechts laufen Leiterbahnen heran und enden in offenen Lötaugen */
.da-knopf-linien { display: flex; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.da-knopf-linien::before, .da-knopf-linien::after {
	content: "";
	flex: 1 1 0;
	max-width: 18rem;
	height: 12px;
	background-repeat: no-repeat;
}
.da-knopf-linien::before {
	background-image:
		radial-gradient(circle at calc(100% - 6px) 50%, transparent 3.2px, #3A3F47 3.4px, #3A3F47 5px, transparent 5.3px),
		linear-gradient(90deg, rgba(58, 63, 71, 0), rgba(58, 63, 71, 0.55));
	background-size: 100% 100%, calc(100% - 11px) 2px;
	background-position: 0 0, 0 50%;
}
.da-knopf-linien::after {
	background-image:
		radial-gradient(circle at 6px 50%, transparent 3.2px, #3A3F47 3.4px, #3A3F47 5px, transparent 5.3px),
		linear-gradient(270deg, rgba(58, 63, 71, 0), rgba(58, 63, 71, 0.55));
	background-size: 100% 100%, calc(100% - 11px) 2px;
	background-position: 0 0, 100% 50%;
}
.da-knopf-linien .wp-block-button { flex: none; }
@media (max-width: 781px) {
	#schaltwerk.da-sektion { background-size: 12rem auto, 12rem auto; }
	.da-knopf-linien { gap: 0.6rem; }
	#schaltwerk .da-schaltwerk-signet img { width: 56px; height: 56px; }
}

/* ---------- Handy-Feinschliff Leistungen und Schaltwerk ---------- */
@media (max-width: 781px) {
	.da-karte-nr-1::after, .da-karte-nr-2::after { font-size: 3.75rem; top: 0.9rem; right: 1.25rem; }
	.da-karte-leistung .da-eyebrow { font-size: 0.68rem; letter-spacing: 0.1em; white-space: nowrap; }
	/* Schaltwerk-Karte: Bahnen kleiner und nur im unteren Bereich über der Knopfzeile */
	.da-karte-schaltwerk { min-height: 0; }
	.da-karte-schaltwerk .da-schaltwerk-inhalt { min-height: 7rem; }
	.da-karte-schaltwerk::after { inset: auto 0 6.5rem 0; height: 7rem; background-size: auto 100%; }
	.da-karte-schaltwerk .da-wortmarke { font-size: 1.5rem; }
	/* Schaltwerk-Abschnitt: Bahnen in den Ecken kleiner, damit sie die Knopflinien nicht kreuzen */
	#schaltwerk.da-sektion { background-size: 9rem auto, 9rem auto; }
}

/* ---------- Leistungen: zwei Karten mittig, Leiterbahnen unten rechts ---------- */
.wp-block-group.is-layout-grid:has(> .da-karte-leistung):not(:has(> .da-karte-schaltwerk)) {
	grid-template-columns: repeat(2, minmax(0, 26rem));
	justify-content: center;
}
.da-karte-nr-1, .da-karte-nr-2 {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' fill='none' stroke='%238EA0D8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-opacity='.28'%3E%3Cpath d='M400 60H330L306 84V120'/%3E%3Cpath d='M400 120H360L340 140V180L316 204V222'/%3E%3Cpath d='M400 180H384L368 196V236'/%3E%3Cpath d='M282 260V236L262 216V188'/%3E%3Cpath d='M226 260V246L210 230V214'/%3E%3C/g%3E%3Cg stroke-opacity='.6'%3E%3Ccircle cx='306' cy='126' r='4.4'/%3E%3Ccircle cx='316' cy='228' r='4.4'/%3E%3Ccircle cx='368' cy='242' r='4.4'/%3E%3Ccircle cx='262' cy='182' r='4.4'/%3E%3Ccircle cx='210' cy='208' r='4.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / 18rem auto,
		radial-gradient(120% 70% at 100% 0%, rgba(142, 160, 216, 0.16), transparent 60%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%),
		var(--wp--preset--color--karte-dunkel);
}
@media (max-width: 781px) {
	.wp-block-group.is-layout-grid:has(> .da-karte-leistung):not(:has(> .da-karte-schaltwerk)) { grid-template-columns: 1fr; }
	.da-karte-nr-1, .da-karte-nr-2 { background-size: 10rem auto, auto, auto, auto; }
}

/* Zweizeilige Überschrift, untere Zeile nach rechts versetzt */
.da-versetzt .da-akzent { display: inline-block; white-space: nowrap; transform: translateX(1.5em); }
@media (max-width: 781px) { .da-versetzt .da-akzent { transform: translateX(0.35em); } }