/* =============================================================================
   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-dark);
	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-dark);
	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-dark);
}

.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-dark);
}

#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 > .iconbox {
	height: 100%;
	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;
}

/* Folgt auf eine Icon-Box-Reihe noch Fliesstext, klebt dieser in der
   Flexbox direkt am unteren Rahmen der Kaesten. Diese Zeile gibt ihm den
   Abstand zurueck, den er im normalen Float-Layout haette. */
#top .entry-content-wrapper:has(> .flex_column > .iconbox) > .flex_column ~ *:not(.flex_column) {
	margin-top: 30px;
}



/* -----------------------------------------------------------------------------
   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;
}