/* =============================================================================
   70-sp-ui.css — Bausteine der Produkt- und Bereichsseiten ( seit 2.6.0 )
   =============================================================================

   Die Seiten werden mit Enfold-Elementen gebaut. Jedes Element trägt im Feld
   „Custom CSS Class“ eine Klasse mit dem Präfix spu-, und nur dann greifen die
   Regeln dieser Datei. Eine Seite ohne spu-Klassen sieht deshalb genauso aus
   wie vor 2.6.0.

   Wo Enfold die eigene Klasse hinschreibt ( an Enfold 8.2 gemessen ):
     Farbabschnitt     → div.avia-section
     Spalte            → div.flex_column ( gleich hohe Spalten zusätzlich in
                         einem div.flex_column_table ohne eigene Klasse )
     Textblock         → div.avia_textblock ( innerhalb section.av_textblock_section )
     Spezialüberschrift→ div.av-special-heading
     Knopf             → div.avia-button-wrap ( der Link darin ist a.avia-button )
     Symbolliste       → div.avia-icon-list-container
     Iconbox           → article.iconbox
     Animierte Zahlen  → div.avia-animated-number
     Tabelle           → table.avia-data-table ( Hülle div.avia-data-table-wrap ohne Klasse )
     Code-Block        → div.avia_codeblock

   ⚠️ Alle Regeln beginnen mit #top, weil Enfold und 20-enfold.css mit #top
   arbeiten. Ohne #top gewinnt Enfolds Farbschema ( zum Beispiel
   „#top .main_color .avia-color-theme-color“ ) gegen jede Regel hier.

   ⚠️ Keine runden Ecken. Ralfs Vorgabe gilt ausnahmslos; jedes border-radius
   in dieser Datei ist 0.

   ⚠️ Enfolds gleich hohe Spalten sind eine Tabelle mit Platzhalter-Zellen
   ( div.av-flex-placeholder, 6 % breit ). Diese Datei macht daraus ein
   Flex-Raster mit festen Abständen und blendet die Platzhalter aus. Weil die
   Hülle keine eigene Klasse trägt, wählt :has() sie über ihre Spalten aus.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Abschnitte ( av_section mit spu-sec und genau einer Abschnittsklasse )
   -------------------------------------------------------------------------- */

#top .spu-sec {
	counter-reset: spu-step;
	border: 0;
	box-shadow: none;
	background-image: none;
	color: var(--spu-ink);
	font-family: var(--sp-font-body);
}

/* 2.6.1: Die Abschnitte übernehmen Breite und Rand von Enfolds .container,
   genau wie jeder andere Abschnitt der Website ( keine eigene Höchstbreite ).
   Auf dem Telefon gilt der Rand von 16 px weiter unten. */

/* Enfold setzt im Abschnitt „no-padding“ den Abstand schon auf 0; die Linie
   rechts vom Inhalt stammt aus dem Seitenleisten-Layout und entfällt hier. */
#top .spu-sec .content {
	padding-top: 104px;
	padding-bottom: 104px;
	border: 0;
}

#top .spu-sec .entry-content-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px 56px;
}

/* ⚠️ Enfolds Clearfix-Pseudoelemente würden im Flex-Container als leere
   Elemente mitgezählt und bekämen den Abstand dazu. */
#top .spu-sec .entry-content-wrapper::before,
#top .spu-sec .entry-content-wrapper::after,
#top .spu-sec .entry-content-wrapper > br,
#top .spu-sec .entry-content-wrapper > p:empty {
	display: none;
}

/* Spalten: Enfolds Breiten und Ränder entfallen. Die Breite ergibt sich aus
   dem Verhältnis der Spalten, der Abstand aus gap. Eine volle Spalte belegt
   immer eine eigene Zeile. */
#top .spu-sec .flex_column,
#top .spu-sec .flex_column_table {
	float: none;
	margin: 0;
	min-width: 0;
}

#top .spu-sec .entry-content-wrapper > .av_one_full,
#top .spu-sec .entry-content-wrapper > .flex_column_table {
	flex: 0 0 100%;
	width: 100%;
}

#top .spu-sec .entry-content-wrapper > .av_one_half    { flex: 1 1 320px; width: auto; }
#top .spu-sec .entry-content-wrapper > .av_one_third   { flex: 1 1 0;     width: auto; }
#top .spu-sec .entry-content-wrapper > .av_two_third   { flex: 2 1 0;     width: auto; }
#top .spu-sec .entry-content-wrapper > .av_one_fourth  { flex: 1 1 0;     width: auto; }
#top .spu-sec .entry-content-wrapper > .av_three_fourth{ flex: 3 1 0;     width: auto; }
#top .spu-sec .entry-content-wrapper > .av_two_fifth   { flex: 1 1 340px; width: auto; }
#top .spu-sec .entry-content-wrapper > .av_three_fifth { flex: 999 1 560px; width: auto; }

/* Gleich hohe Spalten als Flex-Raster. Der Abstand richtet sich nach dem
   Baustein in den Spalten ( Werte aus den Mockups ). */
#top .spu-sec .flex_column_table {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 56px;
}

#top .spu-sec .flex_column_table > .av-flex-placeholder {
	display: none;
}

#top .spu-sec .flex_column_table > .flex_column {
	display: block;
	flex: 1 1 0;
	width: auto;
}

#top .spu-sec .flex_column_table:has(> .spu-step)     { gap: 24px; }
#top .spu-sec .flex_column_table:has(> .spu-card)     { gap: 16px; }
#top .spu-sec .flex_column_table:has(> .spu-countcol) { gap: 0; }

/* Abstand der Elemente innerhalb einer Spalte. Enfolds eigene Außenabstände
   der Elemente werden zurückgesetzt, damit nur dieser Wert gilt. */
#top .spu-sec .flex_column > *,
#top .spu-sec .av-special-heading,
#top .spu-sec .avia_textblock,
#top .spu-sec .avia-icon-list-container,
#top .spu-sec .avia-data-table-wrap {
	margin-top: 0;
	margin-bottom: 0;
}

#top .spu-sec .flex_column > * + * {
	margin-top: 20px;
}

/* Abschnittsfarben */
#top .spu-sec.spu-sec-hero,
#top .spu-sec.spu-sec-cta {
	background: var(--spu-hero-bg);
	color: var(--spu-on-dark);
}

#top .spu-sec.spu-sec-light {
	background: #FFFFFF;
}

#top .spu-sec.spu-sec-grey {
	background: var(--spu-grey);
}

#top .spu-sec.spu-sec-band {
	background: var(--spu-steel-dark);
	color: var(--spu-on-dark);
}

#top .spu-sec.spu-sec-dark {
	background: var(--spu-ink);
	color: var(--spu-on-dark);
}

/* Abstände oben und unten. Der Kopfbereich beginnt ohne Abstand mit der
   Titelzeile; darunter folgen 80 px bis zum Inhalt. */
#top .spu-sec-hero .content {
	padding-top: 0;
	padding-bottom: 88px;
}

#top .spu-sec-hero .entry-content-wrapper {
	align-items: center;
	gap: 80px 64px;
}

#top .spu-sec-band .content,
#top .spu-sec-dark .content {
	padding-top: 96px;
	padding-bottom: 96px;
}

#top .spu-sec-cta .content {
	padding-top: 88px;
	padding-bottom: 88px;
}

/* Ein Band, das nur Zahlen trägt, ist im Mockup The Viewer niedriger ( 56 px ). */
#top .spu-sec-band:has(.spu-countcol) .content {
	padding-top: 56px;
	padding-bottom: 56px;
}

/* Schrift auf dunklem Grund. Enfolds Farbschema färbt Überschriften, Absätze
   und Links einzeln; deshalb werden sie hier einzeln zurückgesetzt. */
#top .spu-sec-hero :is(h1, h2, h3, h4, strong, b),
#top .spu-sec-cta :is(h1, h2, h3, h4, strong, b),
#top .spu-sec-band :is(h1, h2, h3, h4, strong, b),
#top .spu-sec-dark :is(h1, h2, h3, h4, strong, b) {
	color: var(--spu-on-dark);
}

#top .spu-sec-hero p,
#top .spu-sec-cta p {
	color: var(--spu-on-dark-2);
}

#top .spu-sec-band p {
	color: var(--spu-on-band);
}

#top .spu-sec-dark p {
	color: #C9D2DC;
}

#top .spu-sec-hero .avia_textblock a,
#top .spu-sec-cta .avia_textblock a,
#top .spu-sec-band .avia_textblock a,
#top .spu-sec-dark .avia_textblock a {
	color: var(--spu-on-dark);
	text-decoration: underline;
}

/* Fließtext auf Hell ( Textblöcke ohne eigene spu-Klasse ) */
#top .spu-sec-light .avia_textblock:not([class*="spu-"]) p,
#top .spu-sec-grey .avia_textblock:not([class*="spu-"]) p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--sp-ink-2);
}

#top .spu-sec-light .avia_textblock:not([class*="spu-"]) p strong,
#top .spu-sec-grey .avia_textblock:not([class*="spu-"]) p strong {
	color: var(--spu-ink);
}

#top .spu-sec .avia_textblock p {
	margin: 0;
}

#top .spu-sec .avia_textblock p + p {
	margin-top: 14px;
}


/* -----------------------------------------------------------------------------
   2. Titelzeile im Kopfbereich ( [sp_titlebar] in einem Textblock spu-titlebar-wrap )
   -------------------------------------------------------------------------- */

/* Unter der Body-Klasse sp-has-hero ( functions.php ) steht die Titelleiste
   im Kopfbereich; Enfolds eigener heller Streifen entfällt. */
#top.sp-has-hero .title_container,
.sp-has-hero #top .title_container,
.sp-has-hero .title_container {
	display: none;
}

#top .spu-titlebar-wrap > p:empty {
	display: none;
}

#top .spu-titlebar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

#top .spu-titlebar__title {
	font-family: var(--sp-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--spu-on-dark);
}

/* ⚠️ 20-enfold.css setzt „#top .breadcrumb, #top .breadcrumb a“ in Mono,
   11 px und Versalien. Im Kopfbereich gilt Fließtext in 13 px. */
#top .spu-titlebar__crumbs,
#top .spu-titlebar__crumbs .breadcrumb,
#top .spu-titlebar__crumbs .breadcrumb a,
#top .spu-titlebar__crumbs .breadcrumb span,
#top .spu-titlebar__crumbs .sep {
	font-family: var(--sp-font-body);
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--spu-on-dark-3);
}

/* ⚠️ Enfold stellt .breadcrumb in der Titelleiste absolut; im Kopfbereich
   steht sie im Fluss. */
#top .spu-titlebar__crumbs .breadcrumb {
	position: static;
	width: auto;
	margin: 0;
	line-height: 1.5;
	text-align: left;
}

#top .spu-titlebar__crumbs .breadcrumb .trail-end {
	color: var(--spu-on-dark);
}

#top .spu-titlebar__crumbs .breadcrumb a:hover,
#top .spu-titlebar__crumbs .breadcrumb a:focus-visible {
	color: var(--spu-on-dark);
}


/* -----------------------------------------------------------------------------
   3. Vorüberschrift, Überschriften, Einleitung
   -------------------------------------------------------------------------- */

/* ⚠️ Die Testseiten tragen die bestehende Klasse sp-eyebrow ( 90-utilities.css,
   mit Strich davor ). Innerhalb eines spu-Abschnitts gilt die neue Form ohne
   Strich; außerhalb bleibt sp-eyebrow, wie es war. */
#top .spu-eyebrow,
#top .spu-sec .sp-eyebrow {
	display: block;
	margin-bottom: 0;
	font-family: var(--sp-font-mono);
	font-size: 12px;
	font-weight: var(--sp-fw-medium);
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--spu-steel-dark);
}

#top .spu-sec .sp-eyebrow::before,
#top .spu-eyebrow::before {
	content: none;
	display: none;
}

#top .spu-eyebrow p,
#top .spu-sec .sp-eyebrow p {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

#top .spu-sec-hero :is(.spu-eyebrow, .sp-eyebrow),
#top .spu-sec-cta :is(.spu-eyebrow, .sp-eyebrow),
#top .spu-sec-dark :is(.spu-eyebrow, .sp-eyebrow) {
	color: var(--spu-orange);
}

/* Auf dem blauen Band erreicht das Logo-Orange nur 2,33:1. ⚠️ Das im Auftrag
   genannte helle Orange #FFD3A3 erreicht dort gemessen nur 4,12:1 und damit
   nicht die verlangten 4,5:1; #FFE2C2 erreicht 4,61:1. */
#top .spu-sec-band :is(.spu-eyebrow, .sp-eyebrow) {
	color: #FFE2C2;
}

/* Spezialüberschriften: Enfolds Zierlinien, float und Großschreibung entfallen. */
#top .spu-sec .av-special-heading:is(.spu-h1, .spu-h2, .spu-h2s, .spu-h3) {
	padding: 0;
	width: 100%;
}

#top .av-special-heading:is(.spu-h1, .spu-h2, .spu-h2s, .spu-h3) .special-heading-border {
	display: none;
}

#top .av-special-heading:is(.spu-h1, .spu-h2, .spu-h2s, .spu-h3) .av-special-heading-tag {
	float: none;
	margin: 0;
	padding: 0;
	font-family: var(--sp-font-display);
	font-weight: 600;
	text-transform: none;
	text-wrap: balance;
	color: inherit;
}

#top .spu-sec-light .av-special-heading .av-special-heading-tag,
#top .spu-sec-grey .av-special-heading .av-special-heading-tag {
	color: var(--spu-ink);
}

#top .av-special-heading.spu-h1 .av-special-heading-tag {
	font-size: clamp(32px, 2.4vw + 20px, 52px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--spu-on-dark);
}

#top .av-special-heading.spu-h1 .sp-hl {
	color: var(--spu-orange);
}

#top .av-special-heading.spu-h2 .av-special-heading-tag {
	font-size: clamp(26px, 1.6vw + 14px, 36px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

#top .av-special-heading.spu-h2s .av-special-heading-tag {
	font-size: clamp(22px, 0.8vw + 15px, 26px);
	line-height: 1.2;
}

#top .av-special-heading.spu-h3 .av-special-heading-tag {
	font-size: 20px;
	line-height: 1.25;
}

#top .spu-lede p {
	max-width: 620px;
	font-size: 18px;
	line-height: 1.6;
}

#top .spu-sec-light .spu-lede p,
#top .spu-sec-grey .spu-lede p {
	color: var(--sp-ink-2);
}


/* -----------------------------------------------------------------------------
   4. Knöpfe ( av_button mit spu-b und einer Variante )
   -------------------------------------------------------------------------- */

/* Mehrere Knöpfe stehen nebeneinander mit 10 px Abstand und brechen bei
   Platzmangel um. Der Rand rechts und unten erzeugt den Abstand, weil die
   Knöpfe Geschwister der übrigen Elemente der Spalte sind. */
#top .avia-button-wrap.spu-b {
	display: inline-block;
	float: none;
	vertical-align: top;
	margin: 0 10px 10px 0;
}

#top .spu-sec .flex_column > .avia-button-wrap.spu-b {
	margin-top: 24px;
}

#top .avia-button-wrap.spu-b .avia-button {
	display: inline-flex;
	align-items: center;
	float: none;
	min-width: 0;
	min-height: 40px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	font-family: var(--sp-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	transition: background-color var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition);
}

#top .avia-button-wrap.spu-b .avia-button .avia_iconbox_title {
	color: inherit;
}

#top .avia-button-wrap.spu-b--primary .avia-button {
	background: var(--spu-orange);
	color: var(--spu-ink);
	border-bottom: 2px solid var(--spu-orange-dark);
}

#top .avia-button-wrap.spu-b--primary .avia-button:hover,
#top .avia-button-wrap.spu-b--primary .avia-button:focus-visible {
	background: var(--spu-orange-dark);
	color: var(--spu-ink);
}

#top .avia-button-wrap.spu-b--ghost .avia-button {
	background: transparent;
	color: var(--spu-on-dark);
	border: 1px solid rgba(255, 255, 255, 0.55);
}

#top .avia-button-wrap.spu-b--ghost .avia-button:hover,
#top .avia-button-wrap.spu-b--ghost .avia-button:focus-visible {
	background: rgba(255, 255, 255, 0.10);
	border-color: var(--spu-on-dark);
	color: var(--spu-on-dark);
}

#top .avia-button-wrap.spu-b--ink .avia-button {
	background: var(--spu-ink);
	color: var(--spu-on-dark);
}

#top .avia-button-wrap.spu-b--ink .avia-button:hover,
#top .avia-button-wrap.spu-b--ink .avia-button:focus-visible {
	background: var(--spu-steel-deep);
	color: var(--spu-on-dark);
}

#top .avia-button-wrap.spu-b--outline .avia-button {
	background: transparent;
	color: var(--spu-ink);
	border: 1px solid var(--sp-rule-strong);
}

#top .avia-button-wrap.spu-b--outline .avia-button:hover,
#top .avia-button-wrap.spu-b--outline .avia-button:focus-visible {
	border-color: var(--spu-ink);
	color: var(--spu-ink);
}

/* Der Textlink-Knopf: ohne Fläche und Rahmen, mit kleinem Innenabstand wie
   im Mockup ( 12 px ). */
#top .avia-button-wrap.spu-b--link .avia-button {
	padding: 0 12px;
	background: transparent;
	color: var(--spu-steel-dark);
}

#top .avia-button-wrap.spu-b--link .avia-button:hover,
#top .avia-button-wrap.spu-b--link .avia-button:focus-visible {
	background: transparent;
	text-decoration: underline;
}

#top .spu-sec-hero .avia-button-wrap.spu-b--link .avia-button,
#top .spu-sec-cta .avia-button-wrap.spu-b--link .avia-button,
#top .spu-sec-band .avia-button-wrap.spu-b--link .avia-button,
#top .spu-sec-dark .avia-button-wrap.spu-b--link .avia-button {
	color: var(--spu-on-dark);
}

/* In Karten steht der Link unten bündig und ohne Innenabstand. */
#top .spu-sec .flex_column.spu-card > .avia-button-wrap.spu-b--link {
	margin: auto 0 0;
	padding-top: 12px;
}

#top .spu-card .avia-button-wrap.spu-b--link .avia-button {
	min-height: 0;
	padding: 0;
}

#top .spu-card--ink .avia-button-wrap.spu-b--link .avia-button {
	color: var(--spu-orange);
}

#top .avia-button-wrap.spu-b .avia-button:focus-visible {
	outline: var(--sp-focus-width) solid var(--sp-focus-color);
	outline-offset: var(--sp-focus-offset);
}


/* -----------------------------------------------------------------------------
   5. Häkchenlisten ( Symbolliste spu-trust auf Dunkel, spu-perks auf Hell )
   -------------------------------------------------------------------------- */

#top .spu-trust .avia-icon-list,
#top .spu-perks .avia-icon-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .spu-trust {
	padding-top: 8px;
}

#top .spu-perks {
	padding-top: 24px;
	border-top: 1px solid var(--sp-rule);
}

#top .spu-perks .avia-icon-list {
	gap: 16px 40px;
}

#top .spu-trust .avia-icon-list li,
#top .spu-perks .avia-icon-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	float: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	clear: none;
}

/* Enfolds Symbol im Kreis entfällt; an seiner Stelle steht ein Häkchen als
   Maske, eingefärbt über background-color. */
#top .spu-trust .iconlist_icon,
#top .spu-perks .iconlist_icon {
	position: static;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--spu-orange);
	box-shadow: none;
	opacity: 1;
	transform: none;
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMTJsNSA1TDIwIDciLz48L3N2Zz4=") center / contain no-repeat;
	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMTJsNSA1TDIwIDciLz48L3N2Zz4=") center / contain no-repeat;
}

#top .spu-perks .iconlist_icon {
	background: var(--spu-steel-dark);
}

#top .spu-trust .iconlist_icon > *,
#top .spu-perks .iconlist_icon > *,
#top .spu-trust .iconlist-timeline,
#top .spu-perks .iconlist-timeline,
#top .spu-trust .entry-footer,
#top .spu-perks .entry-footer {
	display: none;
}

#top .spu-trust .article-icon-entry,
#top .spu-perks .article-icon-entry,
#top .spu-trust .iconlist_content_wrap,
#top .spu-perks .iconlist_content_wrap {
	min-height: 0;
	margin: 0;
	padding: 0;
}

#top .spu-trust .av_iconlist_title,
#top .spu-perks .av_iconlist_title {
	margin: 0;
	padding: 0;
	font-family: var(--sp-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--spu-on-dark-2);
}

#top .spu-perks .av_iconlist_title {
	font-size: 15px;
	font-weight: 500;
	color: var(--spu-ink);
}


/* -----------------------------------------------------------------------------
   6. Kasten rechts im Kopfbereich ( Textblock spu-panel )
   -------------------------------------------------------------------------- */

#top .spu-panel {
	background: rgba(11, 18, 32, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-top: 3px solid var(--spu-steel);
}

#top .spu-panel__head {
	padding: 16px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	font-family: var(--sp-font-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--spu-on-dark-3);
}

#top .spu-panel__body {
	padding: 20px 24px 24px;
}

#top .spu-panel__body > * + * {
	margin-top: 12px;
}

#top .spu-panel .spu-panel__title {
	font-family: var(--sp-font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--spu-on-dark);
}

#top .spu-panel__body p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--spu-on-dark-2);
}

#top .spu-panel__body strong {
	color: var(--spu-on-dark);
}

/* Steckbrief: Begriff links, Wert rechts */
#top .spu-panel__body:has(> .spu-facts-dl) {
	padding: 8px 24px 16px;
}

#top .spu-facts-dl {
	margin: 0;
}

#top .spu-facts-dl > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	font-size: 15px;
	line-height: 1.5;
}

#top .spu-facts-dl dt {
	margin: 0;
	font-weight: 400;
	color: var(--spu-on-dark-3);
}

#top .spu-facts-dl dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	color: var(--spu-on-dark);
}


/* -----------------------------------------------------------------------------
   7. Legende und Werkzeugraster ( spu-legend, spu-tools )
   -------------------------------------------------------------------------- */

#top .spu-tool,
#top .spu-legend li {
	--spu-stage: var(--spu-steel);
	--spu-stage-fg: var(--spu-on-dark);
}

/* ⚠️ Die Grundregel oben hat mit „li“ ein Element mehr in der Spezifität; die
   Stufen müssen deshalb ebenso genau benannt sein, sonst bleibt jedes
   Quadrat der Legende stahlblau. */
#top :is(.spu-tool, .spu-legend li).is-lesen     { --spu-stage: var(--spu-steel);      --spu-stage-fg: var(--spu-on-dark); }
#top :is(.spu-tool, .spu-legend li).is-pruefen   { --spu-stage: var(--spu-steel-deep); --spu-stage-fg: var(--spu-on-dark); }
#top :is(.spu-tool, .spu-legend li).is-absichern { --spu-stage: var(--spu-ink);        --spu-stage-fg: var(--spu-on-dark); }
#top :is(.spu-tool, .spu-legend li).is-bezahlen  { --spu-stage: var(--spu-orange);     --spu-stage-fg: var(--spu-ink); }

#top .spu-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .spu-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sp-ink-2);
}

#top .spu-legend li::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background: var(--spu-stage);
}

#top .spu-tools-wrap {
	padding-top: 16px;
}

#top .spu-tools {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

/* Kleine Karte: Symbol links oben, Stufe rechts oben, darunter Name und Text. */
#top .spu-tool {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-content: start;
	gap: 10px 12px;
	min-width: 0;
	padding: 22px 20px;
	background: #FFFFFF;
	border: 1px solid var(--sp-rule);
	border-top: 3px solid var(--spu-stage);
	color: var(--spu-ink);
	text-decoration: none;
	transition: border-color var(--sp-transition), transform var(--sp-transition);
}

#top .spu-tool:hover,
#top .spu-tool:focus-visible {
	border-color: var(--spu-steel);
	border-top-color: var(--spu-stage);
	transform: translateY(-2px);
	text-decoration: none;
}

#top .spu-tool:focus-visible {
	outline: var(--sp-focus-width) solid var(--sp-focus-color);
	outline-offset: var(--sp-focus-offset);
}

#top .spu-tool__icon {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--spu-stage);
	color: var(--spu-stage-fg);
}

#top .spu-tool__icon::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--spu-icon) center / contain no-repeat;
	mask: var(--spu-icon) center / contain no-repeat;
}

#top .spu-tool__tag {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: center;
	font-family: var(--sp-font-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-ink-2);
}

#top .spu-tool__name,
#top .spu-tool__text,
#top .spu-tool__chips,
#top .spu-tool__more {
	grid-column: 1 / -1;
}

#top .spu-tool__name {
	padding-top: 4px;
	font-family: var(--sp-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--spu-ink);
}

#top .spu-tool__text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--sp-ink-2);
}

/* Große Karte: zwei Spalten breit, zwei Zeilen hoch, auf Dunkel. */
#top .spu-tool--feature {
	grid-column: span 2;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px;
	background: var(--spu-ink);
	border: 0;
	color: var(--spu-on-dark);
}

#top .spu-tool--feature:hover,
#top .spu-tool--feature:focus-visible {
	border: 0;
}

#top .spu-tool--feature .spu-tool__icon {
	width: 56px;
	height: 56px;
	background: var(--spu-steel);
	color: var(--spu-on-dark);
}

#top .spu-tool--feature .spu-tool__icon::before {
	width: 28px;
	height: 28px;
}

#top .spu-tool--feature .spu-tool__tag {
	justify-self: auto;
	align-self: flex-start;
	padding-top: 8px;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--spu-orange);
}

#top .spu-tool--feature .spu-tool__name {
	padding-top: 0;
	font-size: 32px;
	line-height: 1.15;
	color: var(--spu-on-dark);
}

#top .spu-tool--feature .spu-tool__text {
	flex-grow: 1;
	max-width: 440px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--spu-on-dark-2);
}

#top .spu-tool__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#top .spu-tool__chips i {
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-family: var(--sp-font-mono);
	font-size: 12px;
	font-style: normal;
	line-height: 1.4;
	color: var(--spu-on-dark);
}

#top .spu-tool__more {
	font-size: 14px;
	font-weight: 600;
	color: var(--spu-orange);
}

/* Symbole je Werkzeug. ⚠️ Die Daten-URIs müssen base64 sein: die Firewall des
   Hosters entfernt „http:“ aus Daten-URIs, und der xmlns-Wert jedes SVG
   enthält diese Zeichenfolge. Pfade aus dem Auftrag, Strich 1,8, runde Enden. */
#top .spu-tool__icon[data-icon="viewer"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNiAzaDlsNCA0djE0SDZ6IE0xNSAzdjRoNCBNOSAxMmg3IE05IDE2aDciLz48L3N2Zz4="); }
#top .spu-tool__icon[data-icon="inbound-check"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCAxM2wyLThoMTJsMiA4djZINHogTTQgMTNoNWwxIDJoNGwxLTJoNSIvPjwvc3ZnPg=="); }
#top .spu-tool__icon[data-icon="identifier-check"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA2aDE4djEySDN6IE03IDEwaDQgTTcgMTRoNiBNMTUgMTBoM3Y0aC0zeiIvPjwvc3ZnPg=="); }
#top .spu-tool__icon[data-icon="hybrid-check"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA0aDh2MTJINHogTTEyIDhoOHYxMmgtOHoiLz48L3N2Zz4="); }
#top .spu-tool__icon[data-icon="invoice-monitor"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA2aDE2djE0SDR6IE00IDEwaDE2IE04IDN2NSBNMTYgM3Y1Ii8+PC9zdmc+"); }
#top .spu-tool__icon[data-icon="technical-details"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyAxMmE5IDkgMCAxIDAgMTggMGE5IDkgMCAxIDAgLTE4IDAgTTEyIDExdjYgTTEyIDd2MSIvPjwvc3ZnPg=="); }
#top .spu-tool__icon[data-icon="epc-qr-code"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA0aDZ2Nkg0eiBNMTQgNGg2djZoLTZ6IE00IDE0aDZ2Nkg0eiBNMTQgMTRoMnYyaC0yeiBNMTggMThoMnYyaC0yeiBNMTggMTRoMiBNMTQgMjBoMiIvPjwvc3ZnPg=="); }
#top .spu-tool__icon[data-icon="visualizer"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyA5VjNoMTB2NiBNNyAxN0g0VjloMTZ2OGgtMyBNNyAxNGgxMHY3SDd6Ii8+PC9zdmc+"); }
#top .spu-tool__icon[data-icon="vampire-js-validator"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA0aDE2djE2SDR6IE04IDEybDMgMyA1LTYiLz48L3N2Zz4="); }
#top .spu-tool__icon[data-icon="vampire-explorer"] { --spu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCAxMWE3IDcgMCAxIDAgMTQgMGE3IDcgMCAxIDAgLTE0IDAgTTE2IDE2bDUgNSIvPjwvc3ZnPg=="); }


/* -----------------------------------------------------------------------------
   8. Prozessband ( ol.spu-process im blauen Band )
   -------------------------------------------------------------------------- */

#top .spu-process-wrap {
	padding-top: 20px;
}

#top .spu-process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .spu-process > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0 24px 24px 0;
	list-style: none;
}

#top .spu-process > li > b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: #FFFFFF;
	font-family: var(--sp-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--spu-ink);
}

#top .spu-process > li:nth-child(4) > b {
	background: var(--spu-orange);
}

/* Linie von der Nummer bis zum Spaltenrand mit Pfeilspitze ( 10 × 14 px ). */
#top .spu-process > li::before {
	content: "";
	position: absolute;
	top: 31px;
	left: 76px;
	right: 34px;
	height: 2px;
	background: rgba(255, 255, 255, 0.45);
}

#top .spu-process > li::after {
	content: "";
	position: absolute;
	top: 25px;
	right: 24px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid rgba(255, 255, 255, 0.45);
}

#top .spu-process > li:nth-child(3)::before {
	background: var(--spu-orange);
}

#top .spu-process > li:nth-child(3)::after {
	border-left-color: var(--spu-orange);
}

#top .spu-process > li:last-child::before,
#top .spu-process > li:last-child::after {
	content: none;
}

#top .spu-process > li > strong {
	padding-top: 4px;
	font-family: var(--sp-font-display);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--spu-on-dark);
}

#top .spu-process > li p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--spu-on-band);
}

/* ⚠️ wpautop legt um die Schildchen ein <p>; die Selektoren dürfen deshalb
   nicht mit „> span“ arbeiten. */
#top .spu-process > li > p:has(> span) {
	margin: 0;
}

#top .spu-process > li span {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 4px;
}

#top .spu-process > li span i {
	padding: 5px 10px;
	background: rgba(11, 18, 32, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.30);
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	color: var(--spu-on-dark);
}


/* -----------------------------------------------------------------------------
   9. Schritte, Label, Beispieldateien, Hinweis, App-Rahmen
   -------------------------------------------------------------------------- */

#top .spu-sec .flex_column.spu-step {
	padding-top: 20px;
	border-top: 3px solid var(--spu-ink);
	counter-increment: spu-step;
}

/* ⚠️ Enfold nutzt ::before jeder Spalte als Clearfix und macht es unsichtbar
   ( visibility: hidden, Breite und Höhe 0, overflow: hidden ). Für die Nummer
   muss das alles zurückgenommen werden. */
#top .spu-sec .flex_column.spu-step::before {
	content: counter(spu-step, decimal-leading-zero);
	display: block;
	visibility: visible;
	overflow: visible;
	width: auto;
	height: auto;
	margin-bottom: 14px;
	font-family: var(--sp-font-mono);
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
	color: var(--spu-orange);
}

#top .spu-sec .spu-step .avia_textblock p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sp-ink-2);
}

#top .spu-step .avia_textblock p strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--sp-font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--spu-ink);
}

#top .spu-step .avia_textblock p br {
	display: none;
}

#top .spu-label {
	margin-top: 24px;
	font-family: var(--sp-font-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sp-ink-2);
}

#top .spu-sec .flex_column > .av_textblock_section:has(> .spu-label) {
	margin-top: 44px;
}

#top .spu-label p {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Beispieldateien: Karte mit Dateisymbol ( Blatt mit umgeknickter Ecke ). */
#top .spu-files ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .spu-files li {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

#top .spu-files a {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: center;
	gap: 3px 16px;
	min-height: 76px;
	height: 100%;
	padding: 12px 16px 12px 14px;
	background: #FFFFFF;
	border: 1px solid var(--sp-rule);
	color: var(--spu-ink);
	text-decoration: none;
	transition: border-color var(--sp-transition), transform var(--sp-transition);
}

#top .spu-files a:hover,
#top .spu-files a:focus-visible {
	border-color: var(--spu-steel);
	transform: translateY(-2px);
}

#top .spu-files a::before {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 44px;
	height: 52px;
	padding-bottom: 7px;
	background: var(--spu-steel);
	clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
	font-family: var(--sp-font-mono);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #FFFFFF;
}

#top .spu-files .is-xml a::before {
	content: "XML";
	background: var(--spu-steel);
}

#top .spu-files .is-pdf a::before {
	content: "PDF";
	background: var(--spu-error);
}

#top .spu-files a strong {
	grid-column: 2;
	align-self: end;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--spu-ink);
}

#top .spu-files a span {
	grid-column: 2;
	align-self: start;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--sp-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sp-ink-3);
}

#top .spu-note p,
#top .spu-sec .spu-note p {
	max-width: 760px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sp-ink-2);
}

/* Der App-Rahmen ohne Fensterleiste und ohne versetzten Schatten. Nur in
   spu-Abschnitten, damit ältere Seiten mit sp-app-frame unverändert bleiben. */
#top .spu-sec .sp-app-frame {
	border: 1px solid var(--sp-rule-strong);
	background: var(--sp-paper);
	box-shadow: none;
}

#top .spu-sec .sp-app-frame::before {
	content: none;
	display: none;
}


/* -----------------------------------------------------------------------------
   10. Leiste mit Knöpfen ( volle Spalte spu-strip )
   -------------------------------------------------------------------------- */

#top .spu-sec .flex_column.spu-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 20px 24px;
	background: var(--spu-grey);
	border: 1px solid var(--sp-rule);
}

#top .spu-sec .flex_column.spu-strip > * {
	margin: 0;
}

/* ⚠️ Wie bei den Schritten: Enfolds Clearfix macht ::before einer Spalte
   unsichtbar und 0 × 0 groß. */
#top .spu-sec .flex_column.spu-strip::before {
	content: "HTML";
	visibility: visible;
	overflow: visible;
	flex: 0 0 40px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 40px;
	height: 48px;
	margin-right: 6px;
	padding-bottom: 6px;
	background: var(--spu-steel-dark);
	clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
	font-family: var(--sp-font-mono);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: #FFFFFF;
}

#top .spu-strip > .av_textblock_section {
	flex: 1 1 420px;
	min-width: 0;
	margin-right: 6px;
}

#top .spu-strip__text p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sp-ink-2);
}

#top .spu-strip__text p strong {
	color: var(--spu-ink);
}

#top .spu-strip .avia-button-wrap.spu-b,
#top .spu-sec .flex_column.spu-strip > .avia-button-wrap.spu-b {
	margin: 0;
}

#top .spu-strip .avia-button-wrap.spu-b .avia-button {
	padding: 0 18px;
}


/* -----------------------------------------------------------------------------
   11. Zahlen auf dem Band ( Spalten spu-countcol mit Animierten Zahlen spu-count )
   -------------------------------------------------------------------------- */

#top .spu-sec .flex_column.spu-countcol {
	padding: 8px 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

#top .avia-animated-number.spu-count {
	margin: 0;
	text-align: left;
}

#top .spu-count .avia-animated-number-title {
	display: block;
	margin: 0;
	font-family: var(--sp-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	color: var(--spu-on-dark);
}

#top .spu-count .avia-animated-number-title .avia-single-number {
	font: inherit;
	color: inherit;
}

/* Die dritte Zahl ( Beispielrechnungen ) steht in Orange. Zwischen den
   Spalten liegen Enfolds Platzhalter, deshalb zählt der Selektor sie mit. */
#top .spu-countcol.first + * + .spu-countcol + * + .spu-countcol .avia-animated-number-title,
#top .spu-count.is-accent .avia-animated-number-title {
	color: var(--spu-orange);
}

#top .spu-count .avia-animated-number-content {
	margin-top: 8px;
}

/* ⚠️ 20-enfold.css setzt die Beschriftung animierter Zahlen in Mono-Versalien
   ( #top .avia-animated-number .avia-animated-number-content p ). Hier gilt
   Fließtext; die Klasse .spu-count macht die Regel genauer. */
#top .avia-animated-number.spu-count .avia-animated-number-content p {
	margin: 0;
	font-family: var(--sp-font-body);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
	font-size: 14px;
	line-height: 1.45;
	color: var(--spu-on-band);
}

#top .spu-count .avia-animated-number-icon,
#top .spu-count .avia-animated-number-circle {
	display: none;
}


/* -----------------------------------------------------------------------------
   12. Karten ( Spalten spu-card, dunkle Variante spu-card--ink )
   -------------------------------------------------------------------------- */

#top .spu-sec .flex_column.spu-card {
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
	background: #FFFFFF;
	border: 1px solid var(--sp-rule);
	border-top: 3px solid var(--spu-steel);
}

#top .spu-sec .flex_column.spu-card > * + * {
	margin-top: 12px;
}

#top .spu-tag {
	font-family: var(--sp-font-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spu-steel-dark);
}

#top .spu-tag p {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

#top .spu-sec .spu-card .avia_textblock:not([class*="spu-"]) p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sp-ink-2);
}

#top .spu-sec .flex_column.spu-card--ink {
	background: var(--spu-ink);
	border-color: var(--spu-ink);
	border-top-color: var(--spu-orange);
	color: var(--spu-on-dark);
}

#top .spu-card--ink .spu-tag {
	color: var(--spu-orange);
}

#top .spu-sec .spu-card--ink .av-special-heading .av-special-heading-tag {
	color: var(--spu-on-dark);
}

#top .spu-sec .spu-card--ink .avia_textblock:not([class*="spu-"]) p {
	color: #C9D2DC;
}


/* -----------------------------------------------------------------------------
   13. Bildschirmansicht und Kurzablauf ( spu-shot, spu-miniflow )
   -------------------------------------------------------------------------- */

#top .spu-shot {
	border: 1px solid var(--sp-rule-strong);
}

#top .avia_codeblock.spu-shot {
	background: var(--sp-paper);
	font-family: var(--sp-font-mono);
	font-size: 13px;
	color: var(--sp-ink-2);
}

#top .spu-shot img {
	display: block;
	border-radius: 0;
}

/* Die Spalten neben einer Bildschirmansicht stehen mittig zueinander. */
#top .spu-sec .entry-content-wrapper:has(.spu-shot) {
	align-items: center;
}

#top .spu-miniflow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
	counter-reset: spu-mini;
}

#top .spu-miniflow > li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 12px 0 0;
	border-top: 3px solid var(--spu-ink);
	list-style: none;
	counter-increment: spu-mini;
}

#top .spu-miniflow > li::before {
	content: counter(spu-mini);
	font-family: var(--sp-font-mono);
	font-size: 22px;
	line-height: 1;
	color: var(--spu-orange);
}

#top .spu-miniflow > li b {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--spu-ink);
}

#top .spu-miniflow > li span {
	font-size: 13px;
	line-height: 1.5;
	color: var(--sp-ink-2);
}


/* -----------------------------------------------------------------------------
   14. Merkmale im dunklen Abschnitt ( Spalten spu-featcol mit Iconbox spu-feat )
   -------------------------------------------------------------------------- */

/* Vier Zellen mit 1 px Fugen: die Fugen sind der Hintergrund der Hülle, der
   zwischen den Zellen durchscheint. */
#top .spu-sec .flex_column_table:has(> .spu-featcol) {
	gap: 1px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

#top .spu-sec .flex_column.spu-featcol {
	padding: 28px 24px;
	background: var(--spu-ink);
}

#top .iconbox.spu-feat {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: left;
}

#top .iconbox.spu-feat .iconbox_content {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

#top .iconbox.spu-feat .entry-content-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

#top .iconbox.spu-feat .iconbox_icon {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--spu-steel);
	box-shadow: none;
	line-height: 1;
	font-size: 22px;
	color: var(--spu-on-dark);
	transform: none;
}

/* ⚠️ 20-enfold.css färbt jedes Iconbox-Symbol mit !important in --sp-brand.
   Auf der stahlblauen Fläche wäre das Symbol damit unsichtbar; die höhere
   Spezifität hier ( .spu-feat ) nimmt das mit !important zurück. */
#top .iconbox.spu-feat .iconbox_icon.avia-svg-icon svg,
#top .iconbox.spu-feat .iconbox_icon.avia-svg-icon svg path {
	width: 22px;
	height: 22px;
	fill: currentColor !important;
	stroke: currentColor !important;
}

#top .iconbox.spu-feat .iconbox_icon.avia-svg-icon svg path {
	width: auto;
	height: auto;
}

/* Die zweite Box steht auf Orange mit dunklem Symbol. */
#top .spu-featcol.first + * + .spu-featcol .iconbox_icon {
	background: var(--spu-orange);
	color: var(--spu-ink);
}

#top .iconbox.spu-feat .iconbox_content_title {
	margin: 0;
	padding: 0;
	font-family: var(--sp-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--spu-on-dark);
}

#top .iconbox.spu-feat .iconbox_content_container {
	margin-top: 12px;
}

#top .iconbox.spu-feat .iconbox_content_container p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #C9D2DC;
}


/* -----------------------------------------------------------------------------
   15. Hinweiskasten ( Textblock spu-notice )
   -------------------------------------------------------------------------- */

#top .spu-notice {
	max-width: 860px;
	padding: 20px 24px;
	border: 1px solid var(--sp-rule);
	border-top: 3px solid var(--spu-orange);
}

#top .spu-sec-hero .spu-notice,
#top .spu-sec-band .spu-notice,
#top .spu-sec-dark .spu-notice,
#top .spu-sec-cta .spu-notice {
	border-color: rgba(255, 255, 255, 0.2);
	border-top-color: var(--spu-orange);
}

#top .spu-sec .flex_column > .av_textblock_section:has(> .spu-notice) {
	margin-top: 24px;
}

#top .spu-notice p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sp-ink-2);
}

#top .spu-notice p + p {
	margin-top: 6px;
}

#top .spu-notice p:first-child {
	font-size: 16px;
	font-weight: 600;
	color: var(--spu-ink);
}

#top .spu-sec-dark .spu-notice p,
#top .spu-sec-band .spu-notice p,
#top .spu-sec-hero .spu-notice p,
#top .spu-sec-cta .spu-notice p {
	color: #C9D2DC;
}

#top .spu-sec-dark .spu-notice p:first-child,
#top .spu-sec-band .spu-notice p:first-child,
#top .spu-sec-hero .spu-notice p:first-child,
#top .spu-sec-cta .spu-notice p:first-child {
	color: var(--spu-on-dark);
}


/* -----------------------------------------------------------------------------
   16. Vergleichstabelle ( av_table spu-table )
   -------------------------------------------------------------------------- */

/* Die Hülle trägt keine eigene Klasse; sie bekommt Rahmen und den
   waagerechten Bildlauf, damit nur die Tabelle scrollt und nie die Seite. */
#top .avia-data-table-wrap:has(> .spu-table) {
	margin-top: 16px;
	overflow-x: auto;
	border: 1px solid var(--sp-rule);
}

#top .spu-sec .flex_column > .avia-data-table-wrap:has(> .spu-table) {
	margin-top: 36px;
}

#top table.avia-data-table.spu-table {
	width: 100%;
	min-width: 720px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: #FFFFFF;
	font-family: var(--sp-font-body);
	font-size: 15px;
	line-height: 1.5;
}

/* ⚠️ 20-enfold.css setzt jede Tabellenkopfzelle in Mono-Versalien 11 px
   ( #top table th ); die Vergleichstabelle nimmt das zurück. */
#top .avia-data-table.spu-table th,
#top .avia-data-table.spu-table td {
	font-family: var(--sp-font-body);
	text-transform: none;
	letter-spacing: 0;
	padding: 13px 20px;
	border: 0;
	border-top: 1px solid var(--sp-rule);
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	color: var(--spu-ink);
	background: transparent;
}

#top .avia-data-table.spu-table tr.avia-heading-row th,
#top .avia-data-table.spu-table thead th {
	padding: 14px 20px;
	border-top: 0;
	background: var(--spu-ink);
	font-weight: 600;
	color: var(--spu-on-dark);
}

#top .avia-data-table.spu-table tr.avia-heading-row th:last-child,
#top .avia-data-table.spu-table thead th:last-child {
	background: var(--spu-steel-dark);
}

#top .avia-data-table.spu-table th:nth-child(2) { width: 170px; }
#top .avia-data-table.spu-table th:nth-child(3) { width: 240px; }

#top .avia-data-table.spu-table tr {
	background: #FFFFFF;
}

#top .avia-data-table.spu-table tr.avia-heading-row ~ tr:nth-child(odd) {
	background: var(--sp-panel-alt);
}

#top .avia-data-table.spu-table td:nth-child(2) {
	font-weight: 600;
	color: var(--spu-ink);
}

/* „–“ in der zweiten Spalte markiert functions.php mit spu-no
   ( CSS kann eine Zelle nicht nach ihrem Text auswählen ). */
#top .avia-data-table.spu-table td.spu-no {
	color: #8A93A3;
}

#top .avia-data-table.spu-table td:nth-child(3) {
	font-weight: 600;
	color: var(--spu-steel-deep);
}


/* -----------------------------------------------------------------------------
   17. Abschlussband ( spu-sec-cta ) mit Knöpfen ( Spalte spu-cta-btns )
   -------------------------------------------------------------------------- */

#top .spu-sec-cta .entry-content-wrapper {
	align-items: center;
	gap: 32px 40px;
}

#top .spu-sec-cta .entry-content-wrapper > .av_two_third,
#top .spu-sec-cta .entry-content-wrapper > .av_three_fifth {
	flex: 999 1 520px;
}

#top .spu-sec-cta .flex_column > * + * {
	margin-top: 16px;
}

#top .spu-sec-cta .spu-lede p {
	max-width: 640px;
	font-size: 16px;
}

#top .spu-sec .entry-content-wrapper > .flex_column.spu-cta-btns {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

#top .spu-sec .flex_column.spu-cta-btns > .avia-button-wrap.spu-b {
	margin: 0;
}


/* -----------------------------------------------------------------------------
   18. Bereichskarten der Startseite einvoicetools.de ( eth-* )
   -----------------------------------------------------------------------------
   Bisher als <style> in den Startseiten 224 ( DE ) und 226 ( EN ). Gegenüber
   der Vorlage steht --spu-grey statt --sp-brand-soft als Fläche und
   --spu-orange statt des Akzent-Orange. ⚠️ Die Vorlage hatte runde Ecken
   ( 10, 8 und 999 px ); nach Ralfs Vorgabe sind alle Ecken hier 0.
   -------------------------------------------------------------------------- */

#top .eth-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
#top .eth-c { grid-column: span 3; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sp-rule, #D5D8DE); border-radius: 0; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
#top .eth-c:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(11, 18, 32, .35); }
#top .eth-c.s2 { grid-column: span 2; }
#top .eth-shot { display: block; height: 190px; background-color: var(--spu-grey, #F3F4F6); background-repeat: no-repeat; background-size: 118% auto; background-position: 50% 44%; text-decoration: none !important; border-bottom: 1px solid var(--sp-rule, #D5D8DE); }
#top .eth-c.s2 .eth-shot { height: 150px; }
#top .eth-b { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
#top .eth-k { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sp-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sp-brand, #5F8FA8); }
#top .eth-k span { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 0; background: var(--spu-grey, #F3F4F6); color: var(--sp-brand-ink, #2F5A72); }
#top .eth-k em { margin-left: auto; font-style: normal; color: var(--sp-ink-3, #656D80); }
#top .eth-b h3 { margin: 4px 0 0 !important; font-size: 24px !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; }
#top .eth-b h3::after,
#top .eth-b h3::before { display: none !important; }
#top .eth-b p { margin: 0; color: var(--sp-ink-2, #4A5468); font-size: 15px; line-height: 1.55; }
#top .eth-l { list-style: none !important; margin: 4px 0 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
#top .eth-l li { display: inline-flex !important; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
#top .eth-l li::before { display: none !important; }
#top .eth-l a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--sp-rule, #D5D8DE); border-radius: 0; font-size: 13px; color: var(--sp-ink, #0B1220) !important; text-decoration: none !important; background: #fff; }
#top .eth-l a:hover { border-color: var(--sp-brand, #5F8FA8); background: var(--spu-grey, #F3F4F6); }
#top .eth-l i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 0; }
#top .eth-l i.f { background: #E7F6EE; color: #067647; }
#top .eth-l i.k { background: var(--sp-accent-soft, #FFEEE4); color: #B5480A; }
#top .eth-go { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--spu-orange, #F28C1B) !important; text-decoration: none !important; }
#top .eth-go:hover { text-decoration: underline !important; }
#top .eth-api .eth-shot { background: #0E1A24; color: #CFE3EE; font: 12.5px/1.6 var(--sp-font-mono); padding: 18px 20px; overflow: hidden; white-space: nowrap; }
#top .eth-api .eth-shot b { color: var(--spu-orange, #F28C1B); font-weight: 600; }
#top .eth-api .eth-shot u { text-decoration: none; color: #7FC4A0; }


/* -----------------------------------------------------------------------------
   19. Schmalere Bildschirme
   -------------------------------------------------------------------------- */

/* Tablet quer und kleiner: Raster mit vier Spalten werden zweispaltig. */
@media only screen and (max-width: 989px) {

	#top .spu-tools,
	#top .spu-files ul,
	#top .spu-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#top .spu-tool--feature {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	#top .spu-process {
		row-gap: 24px;
	}

	/* Bei zwei Spalten zeigt die Linie der zweiten Stufe ins Leere. */
	#top .spu-process > li:nth-child(2n)::before,
	#top .spu-process > li:nth-child(2n)::after {
		content: none;
	}

	#top .spu-sec .flex_column_table:has(> .av_one_fourth) {
		flex-wrap: wrap;
	}

	#top .spu-sec .flex_column_table:has(> .av_one_fourth) > .flex_column {
		flex: 1 1 calc(50% - 16px);
	}

	#top .spu-sec .flex_column_table:has(> .spu-featcol) > .flex_column {
		flex-basis: calc(50% - 1px);
	}

	#top .spu-sec .flex_column_table:has(> .spu-countcol) {
		row-gap: 24px;
	}

	#top .eth-c,
	#top .eth-c.s2 {
		grid-column: span 3;
	}
}

/* Telefon und Tablet hoch: alles untereinander, Abstände etwa halbiert,
   16 px Rand. ⚠️ Enfold setzt den Container hier auf 85 % Breite und die
   Spalten auf 100 % mit 20 px Abstand unten; beides wird übersteuert. */
@media only screen and (max-width: 767px) {

	.responsive #top #wrap_all .spu-sec > .container {
		width: 100%;
		max-width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}

	#top .spu-sec .content {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	#top .spu-sec-hero .content {
		padding-top: 0;
		padding-bottom: 44px;
	}

	#top .spu-sec-band .content,
	#top .spu-sec-dark .content,
	#top .spu-sec-band:has(.spu-countcol) .content {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	#top .spu-sec-cta .content {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	#top .spu-sec .entry-content-wrapper,
	#top .spu-sec-cta .entry-content-wrapper {
		gap: 28px;
	}

	#top .spu-sec-hero .entry-content-wrapper {
		gap: 40px;
	}

	.responsive #top #wrap_all .spu-sec .flex_column,
	.responsive #top #wrap_all .spu-sec .entry-content-wrapper > .flex_column,
	.responsive #top #wrap_all .spu-sec .flex_column_table > .flex_column {
		flex: 0 0 100%;
		width: 100%;
		margin: 0;
	}

	.responsive #top #wrap_all .spu-sec .flex_column_table {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 28px;
	}

	.responsive #top #wrap_all .spu-sec .flex_column_table:has(> .spu-card) {
		gap: 16px;
	}

	.responsive #top #wrap_all .spu-sec .flex_column_table:has(> .spu-featcol) {
		gap: 1px;
	}

	.responsive #top #wrap_all .spu-sec .flex_column_table:has(> .spu-countcol) {
		gap: 20px;
	}

	#top .spu-tools,
	#top .spu-files ul,
	#top .spu-process,
	#top .spu-miniflow {
		grid-template-columns: minmax(0, 1fr);
	}

	#top .spu-tool--feature {
		padding: 24px;
	}

	#top .spu-tool--feature .spu-tool__name {
		font-size: 26px;
	}

	#top .spu-process > li::before,
	#top .spu-process > li::after {
		content: none;
	}

	#top .spu-process > li {
		padding-right: 0;
	}

	.responsive #top #wrap_all .spu-sec .entry-content-wrapper > .flex_column.spu-cta-btns {
		justify-content: flex-start;
	}

	#top .spu-sec .flex_column.spu-strip::before {
		margin-right: 100%;
	}

	/* ⚠️ Enfold stellt eine Tabelle mit avia_responsive_table auf dem Telefon
	   als Liste dar und blendet die Kopfzeile aus. Die Vergleichstabelle
	   bleibt eine Tabelle und scrollt in ihrem Rahmen waagerecht. */
	.responsive #top div .avia_responsive_table .avia-data-table.spu-table {
		display: table;
		border: 0;
	}

	.responsive #top div .avia_responsive_table .avia-data-table.spu-table tbody {
		display: table-row-group;
	}

	.responsive #top div .avia_responsive_table .avia-data-table.spu-table tr {
		display: table-row;
	}

	.responsive #top div .avia_responsive_table .avia-data-table.spu-table td,
	.responsive #top div .avia_responsive_table .avia-data-table.spu-table th,
	.responsive #top div .avia_responsive_table .avia-data-table.spu-table tr:first-child th {
		display: table-cell;
		text-align: left;
		border-top: 1px solid var(--sp-rule);
	}

	.responsive #top div .avia_responsive_table .avia-data-table.spu-table tr:first-child th {
		border-top: 0;
	}

	.responsive #top div .avia_responsive_table .avia-data-table.spu-table td::before {
		content: none;
		display: none;
	}

	#top .eth-g {
		grid-template-columns: 1fr;
	}

	#top .eth-c,
	#top .eth-c.s2 {
		grid-column: auto;
	}

	#top .eth-shot {
		height: 170px;
	}
}

@media (prefers-reduced-motion: reduce) {

	#top .spu-tool:hover,
	#top .spu-files a:hover,
	#top .eth-c:hover {
		transform: none;
	}
}