/* =============================================================================
   20-enfold.css — Brücke zwischen den Tokens und Enfolds Bausteinen
   =============================================================================

   Diese Datei bildet die Tokens auf die echten Avia-/ALB-Klassen ab, damit die
   Elemente aus dem "Erweiterten Layout Architekten" ohne HTML-Gebastel im
   richtigen Design erscheinen.

   Konvention: Selektoren beginnen mit #top (bzw. #top #wrap_all) — das ist
   Enfolds eigene Methode, die Theme-Styles ohne !important zu überschreiben.
   Enfold erzeugt pro Element zusätzliche Klassen der Form av-xxxxx-<hash>;
   die haben eine höhere Spezifität. Was im Layout-Architekten pro Element
   eingestellt wird, gewinnt also weiterhin — genau so ist es gedacht.

   Nur diese Datei ist Enfold-spezifisch. Auf einer Website mit einem anderen
   Theme lässt man sie weg.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Typografie global
   -------------------------------------------------------------------------- */

#top,
#top .avia_textblock,
#top p,
#top li {
	font-family: var(--sp-font-body);
}

#top h1,
#top h2,
#top h3,
#top h4,
#top h5,
#top h6,
#top .av-special-heading-tag {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-medium);
	letter-spacing: var(--sp-tracking-tight);
	line-height: var(--sp-lh-tight);
	color: var(--sp-ink);
}

#top code,
#top pre,
#top kbd,
#top samp {
	font-family: var(--sp-font-mono);
	font-size: 0.92em;
	background: var(--sp-panel-alt);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	padding: 1px 5px;
}

#top pre {
	padding: var(--sp-space-4);
	overflow-x: auto;
}

#top a {
	color: var(--sp-brand-dark);
	transition: color var(--sp-transition);
}

#top a:hover {
	color: var(--sp-accent);
}


/* -----------------------------------------------------------------------------
   2. Enfold-Farbsets
   -----------------------------------------------------------------------------
   Enfold vergibt pro Color Section eines dieser Sets. Wer im Layout-Architekten
   "Main/Alternate/Primary/Footer/Socket" wählt, bekommt damit automatisch die
   Markenfarben — ohne dass pro Element etwas eingestellt werden muss.
   -------------------------------------------------------------------------- */

#top .main_color {
	background-color: var(--sp-panel);
	color: var(--sp-ink);
	border-color: var(--sp-rule);
}

#top .alternate_color {
	background-color: var(--sp-paper);
	color: var(--sp-ink);
	border-color: var(--sp-rule);
}

/* "primary_color", das Farbset „Dunkles Band“ (Zahlenleiste, CTA), färbt Enfold selbst aus dem Farbschema
   „specialPress“ ( inc/enfold-colors.php ).
   ⚠️ Hier keine Regel mehr dafür. Bis 2.4.2 stand sie hier doppelt; seit Enfold das Band aus dem Schema schreibt, hätte eine
   Regel hier jede Änderung im Backend überstimmt. Fehlt das Band auf einer Site, ist dort das Schema nicht gespeichert:
   Enfold → Allgemeines Styling, Kachel „specialPress“ anklicken, speichern. */

#top #footer,
#top .footer_color {
	background-color: var(--sp-panel);
	color: var(--sp-ink-2);
	border-top: var(--sp-border);
}

#top #socket,
#top .socket_color {
	background-color: var(--sp-panel);
	color: var(--sp-ink-3);
	border-top: var(--sp-border);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
}


/* -----------------------------------------------------------------------------
   3. Abschnitte / Container
   -------------------------------------------------------------------------- */

#top .container {
	max-width: var(--sp-container);
}

#top .avia-section.avia-section-small .content {
	padding-top: var(--sp-space-7);
	padding-bottom: var(--sp-space-7);
}

#top .avia-section.avia-section-large .content {
	padding-top: var(--sp-space-9);
	padding-bottom: var(--sp-space-9);
}

/* Haarlinie statt Schlagschatten — passt zum flachen, eckigen Stil. */
#top .avia-section.avia-shadow {
	box-shadow: none;
	border-bottom: var(--sp-border);
}


/* -----------------------------------------------------------------------------
   4. Buttons (ALB-Element "Button")
   -----------------------------------------------------------------------------
   Enfold vergibt Farbvarianten als avia-color-*. Primär = Orange (Aktion),
   Sekundär/Theme = zurückhaltend mit Rahmen.
   -------------------------------------------------------------------------- */

#top .avia-button {
	font-family: var(--sp-font-body);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-sm);
	letter-spacing: 0;
	border-radius: var(--sp-radius);
	border-width: var(--sp-border-width);
	border-style: solid;
	padding: 13px 24px;
	text-shadow: none;
	transition: background-color var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition);
}

#top .avia-button.avia-size-large {
	font-size: var(--sp-fs-base);
	padding: 15px 28px;
}

#top .avia-button.avia-size-small {
	font-size: var(--sp-fs-xs);
	padding: 9px 16px;
}

/* Primär: Orange, gefüllt. */
#top .avia-button.avia-color-primary,
#top .avia-button.avia-color-theme-color {
	background-color: var(--sp-accent);
	border-color: var(--sp-accent);
	color: #fff;
}

#top .avia-button.avia-color-primary:hover,
#top .avia-button.avia-color-theme-color:hover {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
	color: #fff;
}

/* Sekundär: nur Rahmen. */
#top .avia-button.avia-color-secondary,
#top .avia-button.avia-color-theme-color-subtle,
#top .avia-button.avia-color-silver {
	background-color: transparent;
	border-color: var(--sp-rule-strong);
	color: var(--sp-ink);
}

#top .avia-button.avia-color-secondary:hover,
#top .avia-button.avia-color-theme-color-subtle:hover,
#top .avia-button.avia-color-silver:hover {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
	color: #fff;
}

/* Auf dunklen Abschnitten: heller Rahmen-Button. */
#top .primary_color .avia-button.avia-color-secondary,
#top .primary_color .avia-button.avia-color-silver {
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

#top .primary_color .avia-button.avia-color-secondary:hover,
#top .primary_color .avia-button.avia-color-silver:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--sp-ink);
}


/* -----------------------------------------------------------------------------
   5. Special Heading (ALB-Element "Besondere Überschrift")
   -------------------------------------------------------------------------- */

#top .av-special-heading {
	margin-bottom: var(--sp-space-4);
}

#top .av-special-heading .av-subheading {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-base);
	color: var(--sp-ink-2);
	max-width: var(--sp-measure);
}

/* Enfolds Trennlinie neben der Überschrift auf eine Haarlinie reduzieren. */
#top .av-special-heading .special-heading-border,
#top .av-special-heading .special-heading-inner-border {
	border-color: var(--sp-rule);
	opacity: 1;
}


/* -----------------------------------------------------------------------------
   6. Icon Box (ALB-Element "Icon Box") — die vier Kategorie-Kacheln
   -----------------------------------------------------------------------------
   Hinweis: Auf der aktuellen Startseite noch nicht im Einsatz. Diese Regeln
   greifen, sobald die erste Icon Box im Layout-Architekten angelegt wird —
   dann bitte einmal gegenprüfen.
   -------------------------------------------------------------------------- */

#top .iconbox {
	border-radius: var(--sp-radius);
}

#top .iconbox .iconbox_content {
	background-color: var(--sp-panel);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	padding: var(--sp-space-6);
}

#top .iconbox .iconbox_content_title {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: 17px;
	letter-spacing: 0;
	margin-bottom: var(--sp-space-3);
	color: var(--sp-ink);
}

#top .iconbox .iconbox_content_container {
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-base);
	color: var(--sp-ink-2);
}

#top .iconbox .iconbox_icon {
	border-radius: var(--sp-radius);
	color: var(--sp-brand-dark);
	background: transparent;
}

/* Enfold rendert die Icons als Inline-SVG und färbt sie per fill/stroke ein
   (nicht per "color") — Theme-Regeln wie ".main_color.iconbox_top ...
   { fill: var(--enfold-main-color-constant-font) }" setzen sonst Weiß und
   machen die Icons auf hellem Grund unsichtbar. Deshalb hier explizit
   überschreiben, mit !important gegen die gleich-spezifischen Theme-Regeln. */
#top .iconbox .iconbox_icon.avia-svg-icon svg,
#top .iconbox .iconbox_icon.avia-svg-icon svg path {
	fill: var(--sp-brand) !important;
	stroke: var(--sp-brand) !important;
}

/* Zweite Reihe der Kachel-Gruppe in Orange — per Custom CSS Class steuerbar. */
#top .sp-icon-accent .iconbox_icon {
	color: var(--sp-accent);
}

#top .sp-icon-accent .iconbox_icon.avia-svg-icon svg,
#top .sp-icon-accent .iconbox_icon.avia-svg-icon svg path {
	fill: var(--sp-accent) !important;
	stroke: var(--sp-accent) !important;
}


/* -----------------------------------------------------------------------------
   7. Icon List (ALB-Element "Icon Liste") — der "Warum"-Abschnitt
   -------------------------------------------------------------------------- */

#top .avia-icon-list .iconlist_icon {
	background-color: transparent;
	color: var(--sp-brand-dark);
	border-radius: var(--sp-radius);
}

/* Gleicher SVG-fill/stroke-Fix wie bei der Icon Box oben. */
#top .avia-icon-list .iconlist_icon.avia-svg-icon svg,
#top .avia-icon-list .iconlist_icon.avia-svg-icon svg path {
	fill: var(--sp-brand) !important;
	stroke: var(--sp-brand) !important;
}

#top .avia-icon-list .iconlist_title,
#top .avia-icon-list .avia_iconlist_title {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-base);
	color: var(--sp-ink);
}

#top .avia-icon-list .iconlist_content,
#top .avia-icon-list p {
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-base);
	color: var(--sp-ink-2);
}


/* -----------------------------------------------------------------------------
   8. Number Counter (ALB-Element "Animierte Zahlen") — das dunkle Zahlenband
   -----------------------------------------------------------------------------
   Im Layout-Architekten: Color Section auf "primary_color" + darin die
   animierten Zahlen. Ebenfalls noch nicht auf der Live-Seite im Einsatz.
   -------------------------------------------------------------------------- */

#top .avia-animated-number {
	color: inherit;
}

#top .avia-animated-number .avia-single-number {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: 28px;
	letter-spacing: var(--sp-tracking-tight);
	color: var(--sp-ink-invert);
}

/* Enfold verschachtelt hier tatsächlich die Zahl selbst in dieses Element
   (nicht die Beschriftung darunter - die sitzt separat in
   .avia-animated-number-content p). Eine Umrandung/Badge-Optik landet also
   ungewollt um die Ziffern statt um ein Label - deshalb hier bewusst kein
   Rahmen/Padding/Hintergrund, nur die Zahl selbst normal fließen lassen. */
#top .avia-animated-number .avia-animated-number-title {
	display: block;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
}

#top .avia-animated-number .avia-animated-number-content p {
	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);
	margin-top: var(--sp-space-2);
}

/* Einzelne Zahl hervorheben: Custom CSS Class "sp-number-accent". */
#top .sp-number-accent .avia-single-number {
	color: var(--sp-accent);
}

/* Trennlinien zwischen den Spalten des Zahlenbands. */
#top .primary_color .sp-statband .flex_column:not(:last-child) {
	border-right: 1px solid var(--sp-rule-invert);
}


/* -----------------------------------------------------------------------------
   9. Header & Hauptnavigation
   -------------------------------------------------------------------------- */

#top #header,
#top #header_main {
	border-bottom: var(--sp-border);
	box-shadow: none;
}

#top #header .av-main-nav > li > a {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-medium);
	color: var(--sp-ink);
	letter-spacing: 0;
}

#top #header .av-main-nav > li > a:hover,
#top #header .av-main-nav > li.current-menu-item > a,
#top #header .av-main-nav > li.current_page_item > a {
	color: var(--sp-brand-dark);
}

/* Aktiver Menüpunkt bekommt eine Unterstreichung statt einer Hintergrundfläche. */
#top #header .av-main-nav > li.current-menu-item > a .avia-menu-fx,
#top #header .av-main-nav > li.current_page_item > a .avia-menu-fx {
	background-color: var(--sp-accent);
	height: 2px;
}

/* Menü-Button (letzter Menüpunkt als Button, Enfold-Option "av-menu-button"). */
#top #header .av-main-nav > li.av-menu-button-colored > a .avia-menu-text {
	background-color: var(--sp-accent);
	border-color: var(--sp-accent);
	border-radius: var(--sp-radius);
	color: #fff;
	font-weight: var(--sp-fw-semibold);
}

#top #header .av-main-nav > li.av-menu-button-colored > a:hover .avia-menu-text {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
}

/* Zwischen 768 und 1279 Pixeln stehen die Menüpunkte enger ( seit 2.6.9 ).
   Enfold gibt jedem Punkt 13 px Rand links und rechts bei 13 px Schrift
   ( gemessen am 04.11.2026 auf einvoice4s.de ). 9 px Rand und 12,5 px
   Schrift rücken dort bei 1100 px den ersten Menüpunkt um 72 px nach rechts
   ( fünf Menüpunkte und die Lupe ), und das ganze Logo passt wieder.
   ⚠️ Unter 768 px nicht anfassen: dort ist auf jeder Website das
   Burger-Menü an, und die Regel träfe nur noch die Burger-Liste. */
@media only screen and (min-width: 768px) and (max-width: 1279px) {
	#top #header .av-main-nav > li > a {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 12.5px;
	}
}

/* Untermenüs eckig und mit Haarlinie. */
#top #header .av-main-nav ul {
	border-radius: var(--sp-radius);
	border: var(--sp-border);
	box-shadow: none;
}


/* -----------------------------------------------------------------------------
   10. Sprachumschalter (Polylang)
   -----------------------------------------------------------------------------
   Polylang setzt .lang-item auf die Menüpunkte und language-de/-en/-fr auf
   den Body. Gestaltung wie im Entwurf: kleine, eckige Kürzel, aktive Sprache
   invertiert.
   -------------------------------------------------------------------------- */

#top #header .av-main-nav > li.lang-item > a,
#top #header .av-main-nav > li.av-language-switch-item > a {
	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);
	padding-left: var(--sp-space-2);
	padding-right: var(--sp-space-2);
}

#top #header .av-main-nav > li.lang-item > a .avia-menu-text,
#top #header .av-main-nav > li.av-language-switch-item > a .avia-menu-text {
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	padding: 5px 9px;
	color: var(--sp-ink-3);
	display: inline-block;
	line-height: 1;
}

#top #header .av-main-nav > li.lang-item.current-lang > a .avia-menu-text,
#top #header .av-main-nav > li.av-language-switch-item.avia_current_lang > a .avia-menu-text {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
	color: #fff;
}

/* Flaggen ausblenden — im Entwurf stehen Kürzel, keine Flaggen. */
#top #header .av-main-nav > li.lang-item img.iclflag,
#top #header .av-main-nav > li.lang-item .lang-item-flag {
	display: none;
}


/* -----------------------------------------------------------------------------
   11. Footer & Socket
   -------------------------------------------------------------------------- */

#top #footer .widgettitle {
	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: var(--sp-ink-3);
	margin-bottom: var(--sp-space-4);
}

#top #footer .widget ul li {
	border: 0;
	padding: 0 0 9px 0;
	font-size: var(--sp-fs-sm);
}

#top #footer a,
#top #socket a {
	color: var(--sp-ink-2);
}

#top #footer a:hover,
#top #socket a:hover {
	color: var(--sp-accent);
}

#top #socket .container {
	padding-top: var(--sp-space-5);
	padding-bottom: var(--sp-space-5);
}


/* -----------------------------------------------------------------------------
   12. Weitere ALB-Elemente
   -------------------------------------------------------------------------- */

/* Promo-Box */
#top .av_promobox {
	background-color: var(--sp-panel);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	box-shadow: none;
}

/* Tabellen */
#top .avia-table,
#top table {
	border-radius: var(--sp-radius);
	border-color: var(--sp-rule);
}

#top table th {
	background-color: var(--sp-panel-alt);
	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: var(--sp-ink-3);
}

#top table td {
	font-size: var(--sp-fs-sm);
	border-color: var(--sp-rule);
}

/* Toggles / Akkordeon */
#top .togglecontainer .single_toggle .toggler {
	background-color: var(--sp-panel);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-base);
	color: var(--sp-ink);
}

#top .togglecontainer .single_toggle .toggler.activeTitle {
	border-bottom-color: transparent;
	color: var(--sp-brand-dark);
}

#top .togglecontainer .toggle_content {
	border: var(--sp-border);
	border-top: 0;
	border-radius: var(--sp-radius);
	font-size: var(--sp-fs-sm);
	color: var(--sp-ink-2);
}

/* Tabs */
#top .av-tab-section .av-tab-section-tab-title-container .av-section-tab-title {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	border-radius: var(--sp-radius);
}

/* Bilder eckig lassen */
#top .avia-image-container .avia_image,
#top .avia-image-container img {
	border-radius: var(--sp-radius);
}

/* Breadcrumb */
#top .breadcrumb,
#top .breadcrumb a {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-3);
}


/* -----------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 989px) {

	#top .avia-section.avia-section-large .content {
		padding-top: var(--sp-space-7);
		padding-bottom: var(--sp-space-7);
	}

	/* Trennlinien im Zahlenband stören, sobald umgebrochen wird. */
	#top .primary_color .sp-statband .flex_column:not(:last-child) {
		border-right: 0;
		border-bottom: 1px solid var(--sp-rule-invert);
	}
}

@media only screen and (max-width: 767px) {

	#top h1,
	#top .av-special-heading-tag {
		font-size: var(--sp-fs-2xl);
	}

	#top .avia-button,
	#top .avia-button.avia-size-large {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}


/* -----------------------------------------------------------------------------
   8. CTA-Sektion mit dunklem Hintergrund (custom_class="sp-cta")
   -----------------------------------------------------------------------------
   Enfolds "custom_font"-Attribut auf av_heading/av_button erzeugt hier kein
   inline style im Markup, die Textfarbe bleibt also die normale (dunkle)
   Theme-Farbe und ist auf dem dunklen custom_bg unsichtbar. Deshalb gezielt
   für diese eine Sektion überschreiben statt global auf einen dunklen
   Hintergrund zu setzen.
   -------------------------------------------------------------------------- */

#top .sp-cta .av-special-heading-tag,
#top .sp-cta .sp-cta-text,
#top .sp-cta .sp-cta-text p {
	color: #ffffff;
}

#top .sp-cta .avia-button.avia-color-theme-color-subtle {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.55);
}

#top .sp-cta .avia-button.avia-color-theme-color-subtle:hover {
	color: var(--sp-ink);
	background-color: #ffffff;
	border-color: #ffffff;
}


/* -----------------------------------------------------------------------------
   9. Echte Screenshots (Invoice Viewer / Validation Explainer)
   -----------------------------------------------------------------------------
   Ersetzt die frueheren handgecodeten Nachbauten im Abschnitt "Echte Ausgabe,
   kein Mockup" durch echte Browser-Screenshots der Live-Demos. Rahmen/Schatten
   sorgen dafuer, dass sie sich wie eine Karte in den Abschnitt einfuegen.
   -------------------------------------------------------------------------- */

#top .sp-invoice-card-shot img,
#top .sp-verdict-shot img {
	border-radius: var(--sp-radius);
	border: var(--sp-border);
	box-shadow: 0 8px 24px rgba(11, 18, 32, 0.08);
	width: 100%;
	height: auto;
}


/* -----------------------------------------------------------------------------
   10. Header -- Logo-Hoehe & Sprachumschalter
   -----------------------------------------------------------------------------
   Das Logo (Icon + Wortmarke + Tagline) ist ein <img>, kein einzeiliger Text --
   Enfolds line-height:88px-Trick zur vertikalen Zentrierung greift bei einem
   Block-Element nicht. Der Wrapper bekommt daher echtes Flexbox-Centering auf
   voller Header-Hoehe; das Bild selbst wird auf Menue-Zeilenhoehe begrenzt.
   Enfold schreibt selbst ein inline style="max-height: 88px" auf das <img>
   (aus der Theme-Option "Logo Hoehe"). Inline-Styles schlagen jede externe
   Regel unabhaengig von deren Spezifitaet -- hier ist !important daher die
   einzig wirksame Ausnahme von der Datei-Konvention oben, nicht ihre Aufhebung.

   Der Header schrumpft beim Scrollen von 88px auf 44px, Enfold interpoliert
   dabei die Inline-Hoehe. min() bedient beide Zustaende mit einer Regel: oben
   greift die feste Obergrenze von 42px, im geschrumpften Header die 72% der
   dann nur noch 44px hohen Kopfzeile, also rund 32px wie bisher.
   -------------------------------------------------------------------------- */

#top #header_main .logo img {
	width: auto;
	height: auto;
	max-height: min(42px, 72%) !important;
}

#top #header_main .logo a {
	display: flex;
	align-items: center;
	height: 100%;
}

/* Logo ohne Schriftzug ( seit 2.6.9 ). Die Klasse sp-logo-compact setzt
   assets/js/sp-header-fit.js an <html>, wenn das Menü dem Logo zu nahe kommt,
   und schreibt das Seitenverhältnis des sichtbaren Teils als --sp-logo-ratio
   an das Bild. object-fit zeigt dann nur den linken Teil in unveränderter
   Größe; Markenzeichen und Name bleiben, der Schriftzug entfällt.

   ⚠️ aspect-ratio OHNE „auto“. Mit „auto“ gewönne das natürliche
   Seitenverhältnis der Datei, und das Bild bliebe so breit wie vorher. */
.sp-logo-compact #top #header_main .logo img {
	aspect-ratio: var(--sp-logo-ratio);
	object-fit: cover;
	object-position: left center;
}

/* ⚠️ Auf dem Telefon begrenzt Enfold das Logo über die Breite, nicht über die
   Höhe. Mit dem neuen Seitenverhältnis allein wüchse das Bild deshalb wieder
   auf 42 px Höhe und läge unter Lupe und Burger ( so gemessen am 04.11.2026
   auf einvoiceTools.de bei 375 px ). Das Skript hat die Höhe des ganzen Bildes
   vorher gemessen; aus ihr und dem Seitenverhältnis ergibt sich die Breite.
   ⚠️ Die Breite, nicht die Höhe: Enfold setzt hier „height: auto !important“
   ( layout.css, .responsive .logo img ). Oberhalb von 768 px darf die Regel
   nicht gelten, weil Enfold den Kopf dort beim Scrollen verkleinert. */
@media only screen and (max-width: 767px) {
	.sp-logo-compact #top #header_main .logo img {
		width: calc(var(--sp-logo-h) * var(--sp-logo-ratio));
	}
}

/* Burger-Menü, wenn auch das kurze Logo nicht reicht ( seit 2.6.9 ). Die
   Klasse sp-nav-burger setzt ebenfalls sp-header-fit.js. Es sind Enfolds
   eigene zwei Regeln für „Menü immer als Burger“ ( html_burger_menu in
   css/layout.css ).
   ⚠️ Die Lupe trägt auch die Klasse menu-item. Die zweite Regel hat dieselbe
   Spezifität wie die erste und muss deshalb hinter ihr stehen. */
.sp-nav-burger.js_active #top #avia-menu > li.menu-item {
	display: none;
}

.sp-nav-burger.js_active #top #avia-menu > li.av-burger-menu-main,
.sp-nav-burger.js_active #top #avia-menu > li.menu-item-search-dropdown {
	display: block;
}

/* Sprachumschalter (DE/EN) im "Telefonnummer/Infotext"-Slot des Headers --
   scharfe Ecken, JetBrains Mono, wie im Mockup spezifiziert. Das Markup dazu
   liegt ohne Inline-Styles in den Theme-Optionen, nur mit der Klasse
   sp-lang-switch / is-active. */
#top .sp-lang-switch {
	display: flex;
	align-items: center;
	gap: 2px;
	font-family: var(--sp-font-mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

#top .sp-lang-switch a {
	display: inline-block;
	padding: 5px 9px;
	text-decoration: none;
	color: var(--sp-ink-3);
	border: 1px solid var(--sp-rule);
}

#top .sp-lang-switch a.is-active {
	background: var(--sp-ink);
	color: #ffffff;
	border-color: var(--sp-ink);
}


/* -----------------------------------------------------------------------------
   11. Title-/Breadcrumb-Leiste ("Home" + "Du bist hier: ...")
   -----------------------------------------------------------------------------
   Enfold positioniert die Breadcrumb absolut (top:28px), was sie von der Hoehe
   des H1 daneben entkoppelt. Der Container wird stattdessen zur Flex-Zeile;
   Enfolds eigene Clearfix-Pseudoklasse (::before/::after) wuerde dabei als
   drittes, unsichtbares Flex-Kind mitgezaehlt und muss deshalb neutralisiert
   werden. Die Ueberschrift bekommt die Marken-Schriftart.
   -------------------------------------------------------------------------- */

#top .title_container .container::before,
#top .title_container .container::after {
	content: none;
	display: none;
}

#top .title_container .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#top .title_container .main-title,
#top .title_container .breadcrumb {
	margin: 0;
}

#top .title_container .breadcrumb {
	position: static;
}

/* Enfold setzt auf .main-title eine min-height von 36px, waehrend die
   Textzeile selbst nur rund 19-21px hoch ist. Der H1-Kasten wird per Flexbox
   zwar mittig ausgerichtet, der Text sitzt darin aber oben buendig - dadurch
   steht der Seitentitel ca. 9px hoeher als der Breadcrumb. min-height: 0
   laesst den Kasten auf Zeilenhoehe schrumpfen, erst dadurch zentriert die
   Flexbox tatsaechlich den sichtbaren Text. */
#top .title_container .main-title {
	font-family: var(--sp-font-display);
	font-weight: 700;
	line-height: 1.3;
	min-height: 0;
}

/* -----------------------------------------------------------------------------
   11. Einheitliche Größen und Klassen statt Element-Einstellungen
   (17.10.2026) Überschriften, Buttons und Textbausteine tragen in den Seiten
   keine eigenen Größen, Farben oder Inline-Styles mehr. Alles Aussehen kommt
   von hier. Wer eine Größe ändern will, ändert sie hier - nicht im Element.
   -------------------------------------------------------------------------- */

/* Überschriften-Stufen der Besonderen Überschrift.
   h1 = Seitentitel im Hero, h2 = Abschnitt, Karten-Raster kleiner.
   clamp() verkleinert auf schmalen Bildschirmen stufenlos. */
#top .av-special-heading h1.av-special-heading-tag {
  font-size: clamp(30px, 2.2vw + 14px, var(--sp-fs-3xl));
}

#top .av-special-heading h2.av-special-heading-tag {
  font-size: clamp(24px, 1.5vw + 13px, var(--sp-fs-2xl));
}

#top .sp-tools-grid .av-special-heading h2.av-special-heading-tag {
  font-size: var(--sp-fs-xl);
}

/* Bildunterschrift über einem Screenshot (früher als h1 mit 22 px gesetzt) */
#top .sp-shot-caption .av-special-heading-tag {
  font-size: var(--sp-fs-lg);
  font-weight: var(--sp-fw-medium);
}

/* Hervorgehobenes Wort im Titel: <span class="sp-hl"> */
#top .sp-hl {
  color: var(--sp-brand-dark);
}

/* Screenshots in Textblöcken nicht verzerren */
#top .sp-shot img {
  aspect-ratio: auto;
  object-fit: contain;
}

/* Code-Beispiele umbrechen statt seitlich zu scrollen */
#top pre.sp-mono {
  white-space: pre-wrap;
  word-break: break-all;
}

/* Button unter dem Text einer Icon-Box */
#top .iconbox_content .avia-button {
  margin-top: var(--sp-space-3);
}

/* Hinweisbox "blau" in den Farben der Marke statt im Enfold-Blau */
#top .avia_message_box.avia-color-blue {
  background-color: var(--sp-brand-soft);
  border-color: var(--sp-brand);
  color: var(--sp-ink);
}

#top .avia_message_box.avia-color-blue .avia_message_box_icon,
#top .avia_message_box.avia-color-blue a {
  color: var(--sp-brand-dark);
}

/* Aus dem Enfold-Quick-CSS übernommen: Enfold setzt hier eigene Werte,
   die nur mit !important zurückgenommen werden. */
#top .avia-animated-number .avia-animated-number-title {
  display: block !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   13. Ergänzungen aus dem Quick-CSS ( seit 2.6.0 )
   -----------------------------------------------------------------------------
   Bisher im Quick-CSS von invoicePress.de. ⚠️ Der Abstand vor Zwischen-
   überschriften gilt nicht in den neuen Abschnitten ( .spu-sec ), weil diese
   ihre Abstände in 70-sp-ui.css selbst festlegen; dort würden 72 px mit
   !important jede Überschrift nach einer Spalte verschieben.
   -------------------------------------------------------------------------- */

/* 72 px Abstand zwischen Boxen und der nächsten Zwischenüberschrift */
.entry-content-wrapper .flex_column + .av-special-heading:not(.spu-sec *) {
	margin-top: 72px !important;
}

/* Knopf in Iconboxen in eigener Zeile, mittig */
.iconbox_content_container .avia-button {
	display: table !important;
	width: auto !important;
	max-width: 100%;
	margin: 16px auto 0 !important;
}