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

/* Hintergrund bewusst ohne #top: gleiche Spezifitaet wie Enfolds
   dynamic_avia, aber spaeter geladen. So gewinnt diese Regel gegen die
   Voreinstellung und verliert gegen eine im Abschnitt gesetzte
   Wunschfarbe (.avia-section.av-xxxx) -- genau wie es sein soll. */
.main_color { background-color: var(--sp-panel); }
#top .main_color {
	color: var(--sp-ink);
	border-color: var(--sp-rule);
}

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

/* "primary_color" wird als dunkles Band verwendet (Zahlenleiste, CTA). */
.primary_color { background-color: var(--sp-ink); }
#top .primary_color,
#top .primary_color .avia_textblock,
#top .primary_color p {
	color: var(--sp-ink-invert);
	border-color: var(--sp-rule-invert);
}

#top .primary_color h1,
#top .primary_color h2,
#top .primary_color h3,
#top .primary_color h4,
#top .primary_color .av-special-heading-tag {
	color: var(--sp-ink-invert);
}

#top .primary_color a:not(.avia-button) {
	color: var(--sp-accent);
}

#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);
	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);
	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);
}

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

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

#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%;
}

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