/* =============================================================================
   90-utilities.css — Bausteine für den Layout-Architekten
   =============================================================================

   Das sind die Klassen, die im Enfold-Layout-Architekten unter
   "Erweitert → Developer Settings → Custom CSS Class" in ein Element
   eingetragen werden. Damit lässt sich der Entwurf zusammenklicken,
   ohne HTML-Blöcke zu bauen — Text bleibt im Editor bearbeitbar.

   Die Klassen sind bewusst theme-unabhängig geschrieben (kein #top im
   Selektor), damit diese Datei zusammen mit 00-tokens.css auch auf
   Websites ohne Enfold funktioniert. Nur der kleine Block ganz unten
   ("Enfold-Verstärkung") ist Enfold-spezifisch.

   Namensschema: sp- = invoicePress.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Auszeichnungen
   -------------------------------------------------------------------------- */

/* Kleine Vorüberschrift mit Strich davor — "ECHTE AUSGABE, KEIN MOCKUP". */
.sp-eyebrow {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-eyebrow);
	color: var(--sp-brand);
	display: flex;
	align-items: center;
	gap: var(--sp-space-3);
	margin-bottom: var(--sp-space-4);
}

.sp-eyebrow::before {
	content: '';
	display: block;
	width: 22px;
	height: 1px;
	background: currentColor;
	flex: none;
}

/* Zentrierte Variante (für mittig gesetzte Abschnittsköpfe). */
.sp-eyebrow.sp-center {
	justify-content: center;
}

/* Auf dunklem Grund. */
.sp-on-dark .sp-eyebrow,
.sp-eyebrow.sp-on-dark {
	color: var(--sp-accent);
}

/* Eckiges Label mit Rahmen. */
.sp-tag {
	display: inline-block;
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	line-height: 1.4;
	color: var(--sp-ink-2);
	border: var(--sp-border-strong);
	border-radius: var(--sp-radius);
	padding: 4px 9px;
	white-space: nowrap;
}

.sp-tag.sp-tag-error {
	color: var(--sp-error);
	border-color: var(--sp-error);
}

.sp-tag.sp-tag-ok {
	color: var(--sp-ok);
	border-color: var(--sp-ok);
}

.sp-tag.sp-tag-invert {
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.35);
}

/* EN-16931-Kennung (BT-…/BG-…) als gefülltes Badge. */
.sp-bt {
	display: inline-block;
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-brand);
	background-color: var(--sp-brand-soft);
	border-radius: var(--sp-radius);
	padding: 2px 7px;
	white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   2. Flächen
   -------------------------------------------------------------------------- */

.sp-panel {
	background-color: var(--sp-panel);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
}

.sp-panel-alt {
	background-color: var(--sp-panel-alt);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
}

.sp-panel-pad {
	padding: var(--sp-space-6);
}

/* Haarlinien-Raster: Kacheln ohne doppelte Rahmen (die vier Kategorien).
   Auf die umgebende Color Section / den Wrapper setzen. */
.sp-hairline-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background-color: var(--sp-rule);
	border: var(--sp-border);
}

.sp-hairline-grid > * {
	background-color: var(--sp-panel);
	margin: 0;
}

@media only screen and (max-width: 767px) {
	.sp-hairline-grid {
		grid-template-columns: 1fr;
	}
}

.sp-divider {
	height: 1px;
	background-color: var(--sp-rule);
	border: 0;
	margin: var(--sp-space-6) 0;
}


/* -----------------------------------------------------------------------------
   3. Text
   -------------------------------------------------------------------------- */

/* Einleitungsabsatz, etwas größer als Fließtext. */
.sp-lede {
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-base);
	color: var(--sp-ink-2);
	max-width: 46ch;
}

.sp-measure {
	max-width: var(--sp-measure);
}

.sp-muted {
	color: var(--sp-ink-2);
}

.sp-quiet {
	color: var(--sp-ink-3);
}

.sp-text-brand {
	color: var(--sp-brand);
}

.sp-text-accent {
	color: var(--sp-accent);
}

/* Produktliste unter einer Kachel ("Viewer · Explainer · KoSIT-Validator"). */
.sp-meta-list {
	font-size: var(--sp-fs-sm);
	line-height: 1.9;
	color: var(--sp-ink-3);
}


/* -----------------------------------------------------------------------------
   4. Zahlenband (dunkler Abschnitt mit den animierten Zahlen)
   -----------------------------------------------------------------------------
   Aufbau im Layout-Architekten:
     Color Section (Farbschema "primary_color"), Custom CSS Class: sp-statband
     darin je Spalte ein "Animierte Zahlen"-Element.
   Die Spaltentrenner kommen aus 20-enfold.css.
   -------------------------------------------------------------------------- */

.sp-statband {
	background-color: var(--sp-ink);
	color: var(--sp-ink-invert);
}

.sp-stat-number {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-2xl);
	line-height: 1;
	letter-spacing: var(--sp-tracking-tight);
	color: var(--sp-ink-invert);
}

.sp-stat-label {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--sp-radius);
	display: inline-block;
	padding: 4px 9px;
	margin-top: var(--sp-space-2);
}


/* -----------------------------------------------------------------------------
   5. Rechnungs-Vorschaukarte (Nachbau der (e)Invoice-Viewer-Ausgabe)
   -----------------------------------------------------------------------------
   Für den Abschnitt "Echte Ausgabe, kein Mockup". Als Code-Block im
   Layout-Architekten einsetzbar — oder als Vorlage, wenn die Karte später
   direkt vom Viewer-Shortcode gerendert wird.
   -------------------------------------------------------------------------- */

.sp-invoice-card {
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	overflow: hidden;
	background-color: var(--sp-panel);
}

.sp-invoice-card__head {
	background-color: var(--sp-brand-dark);
	color: #fff;
	padding: var(--sp-space-5) var(--sp-space-5);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--sp-space-4);
	flex-wrap: wrap;
}

.sp-invoice-card__number {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: 26px;
	line-height: 1.1;
	margin-top: var(--sp-space-1);
}

.sp-invoice-card__meta {
	display: flex;
	gap: var(--sp-space-5);
	margin-top: var(--sp-space-3);
	font-size: var(--sp-fs-sm);
}

.sp-invoice-card__meta dt,
.sp-invoice-card__meta-label {
	color: rgba(255, 255, 255, 0.7);
	font-weight: var(--sp-fw-normal);
	margin: 0;
}

.sp-invoice-card__meta dd,
.sp-invoice-card__meta-value {
	color: #fff;
	font-weight: var(--sp-fw-semibold);
	margin: 0;
}

/* Zahlbetrag-Kachel in Orange. */
.sp-invoice-card__total {
	background-color: var(--sp-accent);
	color: #fff;
	border-radius: var(--sp-radius);
	padding: var(--sp-space-3) var(--sp-space-4);
	text-align: right;
}

.sp-invoice-card__total-label {
	font-family: var(--sp-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
}

.sp-invoice-card__total-value {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-bold);
	font-size: var(--sp-fs-lg);
	font-variant-numeric: tabular-nums;
}

.sp-invoice-card__body {
	padding: var(--sp-space-4) var(--sp-space-5);
	display: flex;
	justify-content: space-between;
	gap: var(--sp-space-5);
	flex-wrap: wrap;
	font-size: var(--sp-fs-sm);
}

.sp-field-label {
	display: block;
	font-family: var(--sp-font-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-3);
	margin-bottom: 3px;
}


/* -----------------------------------------------------------------------------
   6. Prüfbericht-Fundstellen (Validation Explainer)
   -------------------------------------------------------------------------- */

/* Kopfzeile mit dem Gesamturteil. */
.sp-verdict {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-space-4);
	padding: var(--sp-space-4) var(--sp-space-5);
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-base);
	border-radius: var(--sp-radius);
}

.sp-verdict-fail {
	background-color: var(--sp-error);
	color: #fff;
}

.sp-verdict-ok {
	background-color: var(--sp-ok);
	color: #fff;
}

.sp-verdict-warn {
	background-color: var(--sp-warn);
	color: #fff;
}

/* Einzelne Fundstelle. */
.sp-finding {
	border-top: var(--sp-border);
	padding: var(--sp-space-4) var(--sp-space-5);
}

.sp-finding:first-child {
	border-top: 0;
}

.sp-finding__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-space-3);
}

.sp-finding__code {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	color: var(--sp-ink-3);
	letter-spacing: var(--sp-tracking-wide);
}

.sp-finding__title {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-snug);
	color: var(--sp-ink);
	margin-top: var(--sp-space-2);
}

/* Ist-/Soll-Werte als Badge-Reihe. */
.sp-finding__values {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-2);
	margin-top: var(--sp-space-2);
}


/* -----------------------------------------------------------------------------
   7. Hilfsklassen
   -------------------------------------------------------------------------- */

.sp-mono {
	font-family: var(--sp-font-mono);
}

.sp-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.sp-flush {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.sp-no-print {
	/* Regel steht in 10-base.css im @media print */
}

/* Nur für Screenreader. */
.sp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* -----------------------------------------------------------------------------
   8. Enfold-Verstärkung
   -----------------------------------------------------------------------------
   Enfold setzt auf Spalten und Sections eigene Abstände/Hintergründe. Die
   folgenden Regeln sorgen dafür, dass die obigen Klassen sich auch innerhalb
   des Layout-Architekten durchsetzen. Beim Einsatz ohne Enfold ist dieser
   Block wirkungslos und kann bleiben.
   -------------------------------------------------------------------------- */

#top .sp-hairline-grid > .flex_column {
	margin-left: 0;
	width: auto;
	padding: var(--sp-space-6);
}

#top .sp-panel.flex_column,
#top .sp-panel-alt.flex_column {
	padding: var(--sp-space-6);
}

#top .sp-statband .avia-animated-number {
	margin-bottom: 0;
}

#top .sp-eyebrow {
	color: var(--sp-brand);
}

#top .primary_color .sp-eyebrow,
#top .sp-statband .sp-eyebrow {
	color: var(--sp-accent);
}

/* --------------------------------------------------------------------------
   .sp-shot - Produkt-Screenshots
   Die Screenshots kommen in unterschiedlichen Seitenverhaeltnissen an. Steht
   ein Screenshot allein in einer Section, wird er vollstaendig gezeigt. Steht
   er dagegen in einer mehrspaltigen Reihe, wuerden unterschiedlich hohe Bilder
   die Spalten gegeneinander verschieben - dort wird deshalb auf ein
   einheitliches Format zugeschnitten. Das Format ist bewusst breiter als die
   breiteste Vorlage, damit nur oben/unten und nie seitlich beschnitten wird -
   seitlicher Beschnitt wuerde Beschriftungen abschneiden. Oben verankert, weil
   dort die Kopfzeile des Screenshots sitzt. Auf schmalen Viewports stehen die
   Spalten untereinander, dann entfaellt der Zuschnitt wieder.
   -------------------------------------------------------------------------- */

.sp-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	background: var(--sp-panel);
}

#top .sp-shot .avia-image-container-inner,
#top .sp-shot .avia_image {
	border-radius: var(--sp-radius);
}

#top .flex_column .sp-shot img {
	aspect-ratio: 21 / 10;
	object-fit: cover;
	object-position: top center;
}

@media only screen and (max-width: 767px) {
	#top .flex_column .sp-shot img {
		aspect-ratio: auto;
	}
}


/* --------------------------------------------------------------------------
   Icon-Box-Reihen auf gleiche Hoehe
   Enfold laesst die Spalten einer Reihe floaten, jede Box ist daher nur so
   hoch wie ihr eigener Text - bei sichtbarem Rahmen enden drei Kaesten dann
   auf drei verschiedenen Hoehen. :has() greift genau die Reihen heraus, die
   Icon-Boxen enthalten, macht sie zur Flexbox und laesst die Kaesten auf die
   Hoehe der hoechsten wachsen. Eyebrow und Ueberschrift stehen in derselben
   Reihe und werden deshalb ausdruecklich auf volle Breite gesetzt.
   Browser ohne :has() zeigen weiterhin das bisherige Bild.
   -------------------------------------------------------------------------- */

#top .entry-content-wrapper:has(> .flex_column > .iconbox) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

#top .entry-content-wrapper:has(> .flex_column > .iconbox) > *:not(.flex_column) {
	flex: 0 0 100%;
}

#top .entry-content-wrapper:has(> .flex_column > .iconbox) > .flex_column {
	display: flex;
	flex-direction: column;
}

/* Die Icon-Box traegt oben einen Eigenabstand. Mit height:100% ragte sie
   genau um diesen Betrag unten aus der Spalte heraus und lief in das,
   was danach kam. flex:1 laesst sie stattdessen den Rest ausfuellen. */
#top .entry-content-wrapper:has(> .flex_column > .iconbox) > .flex_column > .iconbox {
	height: auto;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Der sichtbare Rahmen sitzt nicht auf .iconbox, sondern auf .iconbox_content -
   erst diese Zeile laesst also den Kasten selbst mitwachsen. */

#top .entry-content-wrapper:has(> .flex_column > .iconbox) > .flex_column > .iconbox > .iconbox_content {
	flex: 1 1 auto;
}


/* -----------------------------------------------------------------------------
   Knopfpaar im Abschluss-Abschnitt nebeneinander
   -----------------------------------------------------------------------------
   Enfold gibt jeden av_button als eigenen Block aus, zwei zentrierte Knoepfe
   stapeln sich deshalb untereinander. In den sp-cta-Abschnitten stehen immer
   genau zwei (Weiterfuehrung + Kauf), die gehoeren auf eine Zeile. Unter 768px
   wieder untereinander, sonst wird es zu eng. */
#top .sp-cta .entry-content-wrapper { text-align: center; }

#top .sp-cta .avia-button-wrap.avia-button-center {
	display: inline-block;
	margin: 6px 5px 0;
	vertical-align: middle;
}

@media only screen and (max-width: 767px) {
	#top .sp-cta .avia-button-wrap.avia-button-center {
		display: block;
		margin: 8px auto 0;
	}
}

/* Preisangabe unter den Kauf-Buttons ([sp_price]) */
#top .sp-cta .sp-price-note {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.85;
}
#top .sp-price {
	font-weight: 600;
	white-space: nowrap;
}
#top .sp-price ins {
	text-decoration: none;
}
#top .sp-price del {
	font-weight: 400;
	opacity: 0.6;
}
#top .sp-price .wc-gzd-additional-info,
#top .sp-price small {
	display: inline;
	font-weight: 400;
	font-size: inherit;
}

/* Enfold-Kontaktformular an die Marke angleichen */
#top .avia_ajax_form input[type="submit"] {
	background-color: var(--sp-accent);
	border-color: var(--sp-accent);
	color: #ffffff;
	font-weight: var(--sp-fw-semibold);
	letter-spacing: 0.01em;
}
#top .avia_ajax_form input[type="submit"]:hover,
#top .avia_ajax_form input[type="submit"]:focus {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
	color: #ffffff;
}
#top .avia_ajax_form .form_element label {
	font-weight: var(--sp-fw-semibold);
}
#top .avia_ajax_form .required {
	color: var(--sp-accent);
}

/* Begriff-und-Erklaerung-Listen in Inhaltsabschnitten.
   Der Begriff steht fett und in Textfarbe, die Erklaerung daneben;
   ab Tabletbreite zweispaltig mit Haarlinie je Zeile. */
#top .sp-deflist { margin: 0; }
#top .sp-deflist dt {
	font-weight: var(--sp-fw-bold);
	color: var(--sp-ink);
	margin: var(--sp-space-4) 0 0;
}
#top .sp-deflist dt:first-of-type { margin-top: 0; }
#top .sp-deflist dd {
	margin: 2px 0 0;
	color: var(--sp-ink-2);
}
#top .primary_color .sp-deflist dt { color: var(--sp-ink-invert); }
#top .primary_color .sp-deflist dd { color: rgba(255, 255, 255, 0.78); }

@media only screen and (min-width: 768px) {
	#top .sp-deflist {
		display: grid;
		grid-template-columns: 220px 1fr;
		column-gap: var(--sp-space-6);
	}
	#top .sp-deflist dt,
	#top .sp-deflist dd {
		margin: 0;
		padding: 14px 0;
		border-top: 1px solid var(--sp-rule);
	}
	#top .sp-deflist dt { grid-column: 1; }
	#top .sp-deflist dd { grid-column: 2; }
	#top .sp-deflist dt:first-of-type,
	#top .sp-deflist dd:first-of-type { border-top: 0; padding-top: 0; }
	#top .primary_color .sp-deflist dt,
	#top .primary_color .sp-deflist dd { border-top-color: var(--sp-rule-invert); }
}

/* Ablaufdiagramm (Mermaid-SVG im Codeblock).
   Das Theme faerbt b und strong in der Akzentfarbe; im Diagramm sollen die
   fetten Zeilen die Farbe ihres Kastens behalten. */
#top .sp-flow-diagram b,
#top .sp-flow-diagram strong { color: inherit; font-weight: var(--sp-fw-semibold); }
#top .sp-flow-diagram p { margin: 0; }
#top .sp-flow-diagram { margin-block: var(--sp-space-5); }
#top .sp-flow-diagram svg { max-width: none; }

/* Vergleichstabelle. Enfold streift die Zeilen abwechselnd ein; hier soll
   die Tabelle ruhig bleiben und nur die Schlusszeile hervortreten. */
#top .sp-compare table { width: 100%; border-collapse: collapse; margin: 0; }
#top .sp-compare thead th {
	background: transparent;
	color: var(--sp-ink-3);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	letter-spacing: var(--sp-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: var(--sp-fw-medium);
	border: 0;
	border-bottom: 1px solid var(--sp-rule-strong);
	padding: 10px 14px;
}
#top .sp-compare tbody tr,
#top .sp-compare tbody tr:nth-child(2n) { background: transparent; }
#top .sp-compare tbody td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--sp-rule);
	padding: 14px;
	color: var(--sp-ink-2);
	vertical-align: top;
}
#top .sp-compare tbody td:first-child { color: var(--sp-ink); }
#top .sp-compare tbody tr:last-child td {
	border-bottom: 0;
	background: var(--sp-accent-soft);
	color: var(--sp-ink);
}
@media only screen and (max-width: 767px) {
	#top .sp-compare { overflow-x: auto; }
	#top .sp-compare table { min-width: 520px; }
}

/* Folgt auf eine Icon-Box-Reihe noch Fliesstext oder ein Knopf, klebt das
   in der Flexbox direkt am unteren Rand der Kaesten. */
#top .entry-content-wrapper:has(> .flex_column > .iconbox) > .flex_column ~ *:not(.flex_column) {
	margin-top: 30px;
}

/* Nummerierte Ablaufschritte. Die Nummer steht als eigene Marke links,
   der Schritt darunter in zwei Ebenen: Was passiert, und was das bedeutet. */
#top .sp-steps {
	list-style: none;
	counter-reset: sp-step;
	margin: 0;
	padding: 0;
}
#top .sp-steps li {
	counter-increment: sp-step;
	position: relative;
	margin: 0;
	padding: 18px 0 18px 58px;
	border-top: 1px solid var(--sp-rule);
	color: var(--sp-ink-2);
	line-height: var(--sp-lh-base);
}
#top .sp-steps li:first-child { border-top: 0; padding-top: 0; }
#top .sp-steps li::before {
	content: counter(sp-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 18px;
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-medium);
	letter-spacing: 0.06em;
	color: var(--sp-accent);
}
#top .sp-steps li:first-child::before { top: 0; }
#top .sp-steps li > strong {
	display: block;
	color: var(--sp-ink);
	font-weight: var(--sp-fw-bold);
	margin-bottom: 2px;
}
@media only screen and (max-width: 767px) {
	#top .sp-steps li { padding-left: 42px; }
}


/* Folgt auf eine Spaltenreihe noch Text, klebt er ohne diesen Abstand am
   unteren Rand der Kaesten. Gilt fuer alle Reihen, nicht nur Icon-Boxen. */
#top .entry-content-wrapper > .flex_column ~ *:not(.flex_column):not(br) {
	clear: both;
	padding-top: 30px;
}


/* ------------------------------------------------------------------
   Preistabellen
   Wie die Vergleichstabelle, aber ohne hervorgehobene Schlusszeile --
   auf der Preisseite ist keine Zeile die Pointe. Zahlenspalten stehen
   rechts und in der Monospace, damit sich Betraege untereinander lesen.
   ------------------------------------------------------------------ */
#top .sp-pricetable table { width: 100%; border-collapse: collapse; margin: 0; }
#top .sp-pricetable thead th {
	background: transparent;
	color: var(--sp-ink-3);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	letter-spacing: var(--sp-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: var(--sp-fw-medium);
	border: 0;
	border-bottom: 1px solid var(--sp-rule-strong);
	padding: 10px 14px;
	vertical-align: bottom;
}
#top .sp-pricetable tbody tr,
#top .sp-pricetable tbody tr:nth-child(2n) { background: transparent; }
#top .sp-pricetable tbody td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--sp-rule);
	padding: 14px;
	color: var(--sp-ink-2);
	vertical-align: top;
}
#top .sp-pricetable tbody td:first-child { color: var(--sp-ink); font-weight: var(--sp-fw-medium); }
#top .sp-pricetable tbody tr:last-child td { border-bottom: 0; }
#top .sp-pricetable th.num,
#top .sp-pricetable td.num {
	text-align: right;
	font-family: var(--sp-font-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#top .sp-pricetable td.num { color: var(--sp-ink); }
#top .sp-pricetable tbody tr.sp-total td {
	background: var(--sp-accent-soft);
	color: var(--sp-ink);
	border-bottom: 0;
}
#top .sp-pricetable caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 10px;
	color: var(--sp-ink-3);
	font-size: var(--sp-fs-sm);
}
#top .sp-pricetable + .sp-pricetable { margin-top: 40px; }
@media only screen and (max-width: 767px) {
	#top .sp-pricetable { overflow-x: auto; }
	#top .sp-pricetable table { min-width: 520px; }
}

/* Grosse Einzelzahl mit Bezeichner darunter -- Tagessatz, Kennzahlen. */
#top .sp-figure {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 50px;
	align-items: flex-start;
}
#top .sp-figure > div { min-width: 140px; }
#top .sp-figure .sp-figure-n {
	display: block;
	font-family: var(--sp-font-mono);
	font-size: 34px;
	line-height: 1.1;
	color: var(--sp-accent);
	font-variant-numeric: tabular-nums;
}
#top .sp-figure .sp-figure-l {
	display: block;
	margin-top: 6px;
	font-size: var(--sp-fs-sm);
	color: var(--sp-ink-3);
}

/* Kennzahl und Tabelle stehen sonst aufeinander. */
#top .sp-figure { margin-bottom: 34px; }
#top .sp-pricetable { margin-top: 14px; }

/* ------------------------------------------------------------------
   Bildschirmfotos aus den Werkzeugen
   Eine Oberflaeche hat einen eigenen Rand; ohne Rahmen franst sie auf
   dem hellen Grund aus. Bildunterschrift direkt darunter, ruhig.
   ------------------------------------------------------------------ */
#top .sp-shot .avia_image,
#top .sp-shot img {
	border: 1px solid var(--sp-rule-strong);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 12px 30px rgba(17, 24, 39, 0.07);
	display: block;
	width: 100%;
	height: auto;
}
#top .sp-shot { margin-bottom: 14px; }
#top .sp-shot-caption {
	margin-top: 0;
	margin-bottom: 44px;
	color: var(--sp-ink-3);
	font-size: var(--sp-fs-sm);
	line-height: 1.55;
}
#top .sp-shot-caption strong { color: var(--sp-ink-2); }
#top .sp-shot-caption:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Anmerkungen unter einer Tabelle
   Eine Definitionsliste direkt unter einer Preistabelle liest sich wie
   eine zweite Tabelle mit falschen Spalten. Als abgesetzte Karten ist
   sofort klar: das ist Kommentar, keine weitere Zeile.
   ------------------------------------------------------------------ */
#top .sp-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
	margin-top: 46px;
}
#top .sp-notes > div {
	border: 1px solid var(--sp-rule);
	border-top: 2px solid var(--sp-accent);
	background: var(--sp-panel);
	padding: 24px 26px 26px;
}
#top .sp-notes h4 {
	margin: 0 0 10px;
	font-size: var(--sp-fs-md);
	line-height: 1.3;
	color: var(--sp-ink);
	text-transform: none;
	letter-spacing: 0;
}
#top .sp-notes p {
	margin: 0;
	color: var(--sp-ink-2);
	font-size: var(--sp-fs-base);
	line-height: 1.6;
}
#top .sp-notes p + p { margin-top: 10px; }
#top .sp-pricetable + .sp-notes { margin-top: 46px; }
@media only screen and (max-width: 767px) {
	#top .sp-notes { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
}

/* Folgt auf die Karten noch eine Erlaeuterung, braucht sie Luft. */
#top .avia_textblock:has(> .sp-notes) { margin-bottom: 26px; }
/* Bildschirmfoto: der Mauszeiger soll zeigen, dass es sich vergroessern laesst. */
#top .sp-shot a { cursor: zoom-in; display: block; }

/* ------------------------------------------------------------------
   Rechtstexte (Impressum, Datenschutzerklaerung)
   Langer Fliesstext mit vielen Zwischenueberschriften. Schmale Spalte,
   klare Hierarchie, sonst liest das niemand zu Ende.
   ------------------------------------------------------------------ */
#top .sp-legaltext { max-width: 760px; }
#top .sp-legaltext h2 {
	margin: 58px 0 16px;
	font-size: var(--sp-fs-xl);
	line-height: 1.25;
	color: var(--sp-ink);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sp-rule-strong);
}
#top .sp-legaltext h2:first-child { margin-top: 0; }
#top .sp-legaltext h3 {
	margin: 34px 0 10px;
	font-size: var(--sp-fs-md);
	line-height: 1.35;
	color: var(--sp-ink);
}
#top .sp-legaltext h4 { margin: 24px 0 8px; font-size: var(--sp-fs-base); color: var(--sp-ink); }
#top .sp-legaltext p { margin: 0 0 14px; color: var(--sp-ink-2); }
#top .sp-legaltext ul,
#top .sp-legaltext ol { margin: 0 0 18px 22px; color: var(--sp-ink-2); }
#top .sp-legaltext li { margin-bottom: 6px; }
#top .sp-legaltext a { word-break: break-word; }
#top .sp-legaltext strong { color: var(--sp-ink); }

/* Rechtstexte stehen komplett in einer Spalte -- Eyebrow, Ueberschrift
   und Fliesstext an derselben Kante. Sonst sieht der eingerueckte Text
   nach Fehler aus statt nach Absicht. */
#top .sp-legal .entry-content-wrapper { max-width: 760px; }

/* ------------------------------------------------------------------
   Diagonaler Hero
   Der Abschnitt traegt die Farbe der Site, eine weisse Diagonale schneidet
   die obere linke Haelfte frei. Lag bisher als Quick-CSS in jeder Site
   einzeln; hier steht es einmal fuer das ganze Netzwerk.
   Klasse am Abschnitt: 'specialpress-polygon' (Bestand) oder 'sp-diagonal'.
   ------------------------------------------------------------------ */
#top .specialpress-polygon,
#top .sp-diagonal {
	position: relative;
	overflow: hidden;
	background-image: none !important;
}
#top .specialpress-polygon::before,
#top .sp-diagonal::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sp-panel);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	z-index: 1;
}
#top .specialpress-polygon .container,
#top .sp-diagonal .container {
	position: relative;
	z-index: 2;
}
/* Der Text sitzt in der weissen Haelfte, also in Tinte -- nicht in Weiss. */
#top .specialpress-polygon h1,
#top .specialpress-polygon h2,
#top .specialpress-polygon .av-special-heading-tag,
#top .sp-diagonal h1,
#top .sp-diagonal h2,
#top .sp-diagonal .av-special-heading-tag { color: var(--sp-ink); }
#top .specialpress-polygon .avia_textblock,
#top .specialpress-polygon .avia_textblock p,
#top .sp-diagonal .avia_textblock,
#top .sp-diagonal .avia_textblock p { color: var(--sp-ink-2); }
/* Auf schmalen Schirmen wird aus der Diagonale ein Band -- sonst laeuft
   die Schrift ueber die Kante. */
@media only screen and (max-width: 767px) {
	#top .specialpress-polygon::before,
	#top .sp-diagonal::before { clip-path: polygon(0 0, 100% 0, 100% 62%, 0 82%); }
}

/* Der Text im diagonalen Hero sitzt in der weissen Haelfte. Ohne Begrenzung
   laeuft die Ueberschrift ueber die Kante ins Farbfeld -- frueher fiel das
   nicht auf, weil der Text hell und kaum sichtbar war. */
@media only screen and (min-width: 990px) {
	#top .specialpress-polygon .container > .template-page,
	#top .sp-diagonal .container > .template-page { max-width: 42%; }
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
	#top .specialpress-polygon .container > .template-page,
	#top .sp-diagonal .container > .template-page { max-width: 62%; }
}