/*
Theme Name:   helloblack Child
Theme URI:    https://elementor.com/
Description:  helloblack Child is a child theme of Hello Elementor
Author:       Oliver Schwarz
Author URI:   https://elementor.com/
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v3 or later.
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Tags:         flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
Text Domain:  helloblack-child
*/

/* Add your custom styles here */

/* ==========================================================================
   POST TAGS — WordPress-Standard-Schlagwörter unter Beiträgen verstecken
   Die Tag-Ausgabe erfolgt über Hello Elementor / WP Core (div.post-tags).
   Wir nutzen stattdessen Elementor-Widgets für die Tag-Darstellung.
   ========================================================================== */
.post-tags {
	display: none;
}

/* ==========================================================================
   FIREFOX SCROLLBAR FIX — Doppelte Scrollbalken vermeiden
   Hello Elementor setzt overflow-y:auto auf main und .page-content.
   Firefox rendert dafür sichtbare Scrollbar-Tracks.
   ========================================================================== */
main#content.site-main,
.page-content {
	overflow-y: visible;
}

/* ==========================================================================
   INFOBOX WIDGET — Layout & Positionierung
   Icon-Position (top/left/right), vertikale Ausrichtung, Content-Ausrichtung
   ========================================================================== */

/* Basis — flex-direction, align-items, gap und text-align
   werden per Elementor-Selectors inline gesetzt (responsive) */
.hb-infobox {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}
.hb-infobox__icon {
	flex-shrink: 0;
	line-height: 1;
}
.hb-infobox__content {
	flex-grow: 1;
	min-width: 0;
}
.hb-infobox__title {
	margin-top: 0;
}
.hb-infobox__description p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   TEXT EDITOR — Listen (ul/ol) mit Absatzabstand
   Gleicher margin-bottom wie p-Tags im Text Editor Widget.
   Elementor setzt den Absatzabstand inline auf p — wir spiegeln das auf Listen.
   ========================================================================== */
.elementor-widget-text-editor .elementor-widget-container ul,
.elementor-widget-text-editor .elementor-widget-container ol {
	margin-bottom: var(--e-text-editor-paragraph-spacing, 1em);
}

/* ==========================================================================
   MEGAMENU FIX - Pointer Cursor für Dropdown-Elemente ohne Link
   ========================================================================== */
/* Für das klickbare DIV und alle Child-Elemente */
.e-n-menu-title.e-click,
.e-n-menu-title.e-click *,
.e-n-menu-title.e-click .e-n-menu-title-container,
.e-n-menu-title.e-click .e-n-menu-title-text {
	cursor: pointer !important;
}

/* ==========================================================================
   SCROLL LINE - Scroll-animierte Linie
   ========================================================================== */

/* Basis-Linie Container (Legacy + Widget) */
.scroll-line,
.helloblack-scroll-line {
	position: relative;
	width: 1px;
	height: 100%;
	background: transparent;
	border-radius: 0px;
	overflow: hidden;
	display: block;
}

/* Die animierte Füll-Linie (Legacy + Widget) */
.scroll-line__fill,
.helloblack-scroll-line__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* height wird durch JavaScript/inline-style gesteuert */
	background: #F26631;
	border-radius: 0px;
	transform-origin: top;
	will-change: transform;
}

/* ==========================================================================
   MEGA MENU - Hover & Active States für Menu-Items
   ========================================================================== */

/* Mega Menu Item Container Hover */
.elementor-location-header .e-n-menu-dropdown .elementor-element:hover {
	background-color: #f5f5f5;
	border-radius: 8px;
	transition: background-color 0.2s ease;
}

/* Active State für aktuellen Menüpunkt */
.elementor-location-header .e-n-menu-dropdown .elementor-element.current-menu-item,
.elementor-location-header .e-n-menu-dropdown .elementor-element.active {
	background-color: #f5f5f5;
	border-radius: 8px;
}

/* ==========================================================================
   MEGA MENU CTA - Icon links neben Text, Hover-Hintergrund
   Verwendung: Füge "mega-menu-cta" als CSS-Klasse zum CTA-Widget hinzu
   ========================================================================== */

/* Icon links, Titel + Beschreibung rechts daneben */
.mega-menu-cta .elementor-cta__content {
	display: grid !important;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 4px 12px;
}

/* Icon in erster Zeile, oben bündig mit Titel */
.mega-menu-cta .elementor-cta__icon {
	grid-row: 1 / 3;
}

/* Titel und Beschreibung linksbündig */
.mega-menu-cta .elementor-cta__title,
.mega-menu-cta .elementor-cta__description {
	text-align: left;
}

/* Hover- und Active-Hintergrund auf Content-Ebene (überschreibt Elementor skin-classic) */
.mega-menu-cta .elementor-cta {
	transition: background-color 0.2s ease;
	border-radius: 8px;
}

.mega-menu-cta .elementor-cta:hover .elementor-cta__content,
.mega-menu-cta.active .elementor-cta .elementor-cta__content {
	background-color: #F3F5F5 !important;
}

/* SVG-Icons: Original-Farben beibehalten (stroke statt fill) */
.mega-menu-cta .elementor-icon svg {
	fill: none !important;
}
.mega-menu-cta .elementor-icon svg path,
.mega-menu-cta .elementor-icon svg line,
.mega-menu-cta .elementor-icon svg rect,
.mega-menu-cta .elementor-icon svg polygon {
	stroke: #000 !important;
	fill: none !important;
}
.mega-menu-cta .elementor-icon svg circle {
	fill: #000 !important;
}

/* Parent Menu Item Active State (z.B. "Beratung" wenn Unterseite aktiv ist) */
.e-n-menu-title.parent-active .e-n-menu-title-text {
	color: #F26631 !important; /* Orange Farbe wie beim Hover */
}

/* ==========================================================================
   CTA BOX - Icon überlappt das Bild darüber
   Verwendung: Füge "cta-icon-overlap" als CSS-Klasse zum CTA-Widget hinzu
   Optional: "cta-icon-right" für Icon rechts ausgerichtet
   ========================================================================== */

/* Das CTA-Widget mit überlappenden Icon */
.cta-icon-overlap.elementor-widget-call-to-action {
	position: relative;
	z-index: 10;
}

/* Der Icon-Wrapper im CTA wird nach oben verschoben */
.cta-icon-overlap .elementor-icon-wrapper {
	position: relative;
	margin-top: -120px;
	z-index: 10;
}

/* Overflow auf dem CTA erlauben */
.cta-icon-overlap .elementor-cta {
	overflow: visible !important;
}

.cta-icon-overlap .elementor-cta__content {
	overflow: visible !important;
}

/* Icon rechts ausrichten - max-width nur für breite Spalten (2-Spalter) */
.cta-icon-right .elementor-icon-wrapper {
	display: flex !important;
	justify-content: flex-end !important;
	max-width: 404px;
	margin-left: auto;
	margin-right: auto;
}

.cta-icon-right .elementor-icon {
	margin-right: 15px;
}

/* Icon-Hintergrund mit Weichzeichner */
.cta-icon-overlap .elementor-icon {
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Bild-Bereich mit Abstand und abgerundeten Ecken */
.cta-icon-overlap .elementor-cta__bg.elementor-bg {
	margin: 0 auto;
	border-radius: 4px;
	max-width: min(404px, calc(100% - 60px));
}

/* Grauer Hintergrund-Block unter dem Bild */
.cta-icon-overlap .elementor-cta__bg-wrapper::before {
	content: "";
	background: #F5F5F5;
	display: block;
	height: 180px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	border-radius: 4px 4px 0px 0px;
}

/* SVG-Icon ohne Stroke */
.cta-icon-overlap .elementor-icon svg {
	stroke: none !important;
}

/* Optional: Auch Hover-Farbe für Hauptmenü definieren */
.e-n-menu-title:hover {
	color: #F26631;
	transition: color 0.2s ease;
}

/* ==========================================================================
   CTA OVERLAY CARD - Content als weiß-transparente Karte über dem Bild
   Verwendung: Füge "cta-overlay-card" als CSS-Klasse zum CTA-Widget hinzu
   ========================================================================== */

/* CTA-Widget: Hintergrund mit radialem Verlauf */
.cta-overlay-card .elementor-cta {
	overflow: visible !important;
	position: relative;
	background: radial-gradient(circle at 70% 50%, rgb(255, 255, 255) 15%, rgb(133, 158, 156) 100%);
}

/* Bild mit Innenabstand und abgerundeten Ecken */
.cta-overlay-card .elementor-cta__bg.elementor-bg {
	margin: 14px;
	border-radius: 8px;
}

/* Content-Bereich als weiß-transparente Karte, überlagert das Bild */
.cta-overlay-card .elementor-cta__content {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: 8px;
	padding: 24px !important;
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 30px;
	transform: translateY(-50%);
	width: 70%;
	display: grid !important;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 40px;
	row-gap: 5px;
	align-items: center;
}

/* Icon links positionieren (erstreckt sich über beide Zeilen) */
.cta-overlay-card .elementor-icon-wrapper {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
}

/* Titel rechts neben dem Icon */
.cta-overlay-card .elementor-cta__title {
	grid-column: 2;
	grid-row: 1;
}

/* Button rechts unter dem Titel */
.cta-overlay-card .elementor-cta__button-wrapper {
	grid-column: 2;
	grid-row: 2;
}

/* Langer Pfeil nach links vor dem Button-Text */
.cta-overlay-card .elementor-cta__button {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
}

/* Pfeil als inline SVG (browserunabhängig, pixelperfekt) */
.cta-overlay-card .elementor-cta__button::before {
	content: "";
	display: inline-block;
	width: 60px;
	height: 18px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='16' fill='none'%3E%3Cpath d='M8 1L1 8l7 7' stroke='%23F26631' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='1' y1='8' x2='74' y2='8' stroke='%23F26631' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

/* Beschreibung falls vorhanden */
.cta-overlay-card .elementor-cta__description {
	grid-column: 2;
}

/* SVG-Icon ohne Stroke */
.cta-overlay-card .elementor-icon svg {
	stroke: none !important;
}

/* --- Gespiegelte Variante: Content rechts, Bild links --- */

/* Verlauf spiegeln: weißer Kreis nach links */
.cta-overlay-right .elementor-cta {
	background: radial-gradient(circle at 30% 50%, rgb(255, 255, 255) 15%, rgb(133, 158, 156) 100%);
}

/* Content-Box rechts positionieren */
.cta-overlay-right .elementor-cta__content {
	left: auto;
	right: 30px;
}

/* Grid spiegeln: Icon rechts, Text+Button links */
.cta-overlay-right .elementor-cta__content {
	grid-template-columns: 1fr auto;
}

.cta-overlay-right .elementor-icon-wrapper {
	grid-column: 2;
	grid-row: 1 / -1;
}

.cta-overlay-right .elementor-cta__title {
	grid-column: 1;
	grid-row: 1;
	text-align: left;
}

.cta-overlay-right .elementor-cta__button-wrapper {
	grid-column: 1;
	grid-row: 2;
	justify-self: end;
}

/* Pfeil nach rechts statt links */
.cta-overlay-right .elementor-cta__button {
	flex-direction: row-reverse;
}

.cta-overlay-right .elementor-cta__button::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='16' fill='none'%3E%3Cpath d='M66 1l7 7-7 7' stroke='%23F26631' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='0' y1='8' x2='73' y2='8' stroke='%23F26631' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Beschreibung rechts */
.cta-overlay-right .elementor-cta__description {
	grid-column: 1;
	text-align: right;
}

/* --- Responsive: Content-Box breiter bei mittleren Auflösungen --- */
@media (max-width: 1440px) and (min-width: 1201px) {
	.cta-overlay-card .elementor-cta__content {
		width: 80%;
	}
	.cta-overlay-card .elementor-cta__button::before {
		width: 30px;
		height: 12px;
		background-size: auto 12px;
		background-position: left center;
	}
	.cta-overlay-right .elementor-cta__button::before {
		background-position: right center;
	}
}

/* --- Responsive: Verkürzte Pfeile und breitere Content-Box auf kleinen Screens --- */
@media (max-width: 578px) {
	.cta-overlay-card .elementor-cta__content {
		width: 80%;
		column-gap: 30px;
		padding: 14px !important;
	}
	/* Icon verkleinern */
	.cta-overlay-card .elementor-icon {
		font-size: 80px !important;
	}
	.cta-overlay-card .elementor-icon svg {
		width: 80px !important;
		height: 80px !important;
	}
	/* Pfeil ausblenden */
	.cta-overlay-card .elementor-cta__button::before {
		display: none;
	}
	/* Button über volle Breite, linksbündig unter Icon+Titel */
	.cta-overlay-card .elementor-cta__button-wrapper {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: start;
	}
	/* Gespiegelt: ebenfalls linksbündig */
	.cta-overlay-right .elementor-cta__button-wrapper {
		justify-self: start;
	}
}

/* ==========================================================================
   EQUAL HEIGHT CTA - Einheitliche Höhe für CTA-Boxen nebeneinander
   Verwendung: Füge "equal-height-cta" als CSS-Klasse zum Eltern-Container hinzu
   ========================================================================== */

/* CTA-Widgets auf volle Höhe des Eltern-Containers strecken */
.equal-height-cta .elementor-widget-call-to-action {
	align-self: stretch;
}

/* CTA-Link (direktes Kind, kein .elementor-widget-container) füllt volle Höhe */
.equal-height-cta .elementor-widget-call-to-action > .elementor-cta {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Content-Bereich füllt den verfügbaren Platz — Button rutscht nach unten */
.equal-height-cta .elementor-widget-call-to-action .elementor-cta__content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.equal-height-cta .elementor-widget-call-to-action .elementor-cta__button-wrapper {
	margin-top: auto;
}

/* ==========================================================================
   SHARING WIDGET - DSGVO-konformes Social Sharing (Repeater)
   ========================================================================== */

/* Hauptcontainer: Inline (row) oder untereinander (column) */
.helloblack-sharing {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* Heading */
.helloblack-sharing__heading {
	margin: 0;
	white-space: nowrap;
}

/* Button-Container */
.helloblack-sharing__buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* Item-Wrapper (Button + optionales Label) */
.helloblack-sharing__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* Einzelner Button (Kreis) — width+height über Elementor Control, div statt button */
.helloblack-sharing__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f0f0f0;
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
}

/* Icon-Container */
.helloblack-sharing__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	line-height: 0;
}

/* Inline SVG */
.helloblack-sharing__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	transition: fill 0.2s ease;
}

/* Fallback: img-Tag (für Nicht-SVGs) */
.helloblack-sharing__icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* Hover */
.helloblack-sharing__btn:hover {
	background-color: #F26631;
}

/* Label unter dem Button */
.helloblack-sharing__label {
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	transition: color 0.2s ease;
	white-space: nowrap;
}

/* Tooltip "Kopiert!" */
.helloblack-sharing__tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	background: #333;
	padding: 5px 10px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.helloblack-sharing__tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #333;
}

.helloblack-sharing__btn--copy.is-copied .helloblack-sharing__tooltip {
	opacity: 1;
}

/* ==========================================================================
   AUTO-NUMMERIERUNG - Automatische Nummern für Tabs und Akkordion
   ========================================================================== */

/* Counter für beide - füge die Klasse "auto-number" zum Widget hinzu */
.auto-number {
	counter-reset: item-counter;
}

/* Zähle jedes Tab-Item */
.auto-number .e-n-tab-title,
.auto-number .elementor-tab-title {
	counter-increment: item-counter;
}

/* Zähle jedes Akkordion-Item */
.auto-number .e-n-accordion-item-title,
.auto-number .elementor-accordion-title {
	counter-increment: item-counter;
}

/* Vertikale Ausrichtung oben statt mittig */
.auto-number .e-n-tab-title,
.auto-number .e-n-accordion-item-title {
	align-items: flex-start !important;
}

/* Text-Container auch auf flex-start setzen */
.auto-number .e-n-tab-title-text,
.auto-number .e-n-accordion-item-title-text {
	display: flex !important;
	align-items: flex-start !important;
	line-height: 1.4 !important;
}

/* Füge Nummer vor dem Tab/Akkordion-Title ein */
.auto-number .e-n-tab-title-text::before,
.auto-number .e-n-accordion-item-title-text::before {
	content: counter(item-counter, decimal-leading-zero);
	color: #F26631;
	margin-right: 15px;
	flex-shrink: 0;
}

/* ==========================================================================
   TABS → AKKORDION - Chevron-Pfeile im Akkordion-Modus
   Wenn ein Tab-Widget zum Akkordion wird, erscheinen Auf/Zu-Pfeile rechts.
   Ansteuerung über Wrapper-Klasse e-n-tabs-{breakpoint} + Media Query.
   Breakpoints: mobile=576, mobile_extra=767, tablet=1024, tablet_extra=1200, laptop=1440
   ========================================================================== */

/* Chevron-Pfeil Basis-Styles (versteckt, bis Breakpoint greift) */
.e-n-tabs .e-n-tab-title::after {
	content: "";
	display: none;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-left: auto;
	/* Chevron nach unten (geschlossen) — #F26631 Stroke */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 8L12 16L4 8' stroke='%23F26631' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
	transition: transform 0.3s ease;
}

/* Pfeil nach oben drehen wenn Tab aktiv/offen ist */
.e-n-tabs .e-n-tab-title[aria-selected="true"]::after {
	transform: rotate(180deg);
}

/* Chevron sichtbar per Breakpoint — Wrapper-Klasse bestimmt den Breakpoint */
@media (max-width: 1440px) {
	.e-n-tabs-laptop > .e-n-tabs .e-n-tab-title::after { display: inline-block; }
}
@media (max-width: 1200px) {
	.e-n-tabs-tablet_extra > .e-n-tabs .e-n-tab-title::after { display: inline-block; }
}
@media (max-width: 1024px) {
	.e-n-tabs-tablet > .e-n-tabs .e-n-tab-title::after { display: inline-block; }
}
@media (max-width: 767px) {
	.e-n-tabs-mobile_extra > .e-n-tabs .e-n-tab-title::after { display: inline-block; }
}
@media (max-width: 576px) {
	.e-n-tabs-mobile > .e-n-tabs .e-n-tab-title::after { display: inline-block; }
}

/* Fallback: Falls Elementor e-collapse setzt */
.e-n-tabs.e-collapse .e-n-tab-title::after {
	display: inline-block;
}

/* ==========================================================================
   BILDUNTERSCHRIFTEN — max. Breite begrenzen
   ========================================================================== */
.elementor-widget-image .widget-image-caption {
	max-width: 1060px;
}
.elementor-widget-image figure.wp-caption {
	max-width: 1060px;
}

/* ==========================================================================
   BREADCRUMB - Rank Math Breadcrumb Styling
   ========================================================================== */

/* Container: Standard-Absatz-Margin entfernen */
.rank-math-breadcrumb p {
	margin: 0;
}

/* Dark (Standard) */
.rank-math-breadcrumb a,
.rank-math-breadcrumb .last {
	font-family: "Fira Mono", sans-serif;
	font-size: clamp(0.75rem, 0.6607rem + 0.2857vw, 0.875rem);
	color: #06141A;
	transition: color .3s ease;
}
.rank-math-breadcrumb a {
	font-weight: 400;
}
.rank-math-breadcrumb a:hover {
	color: #F26631;
}
.rank-math-breadcrumb .separator {
	display: inline;
	font-size: 16px;
	color: #F26631;
}

/* Home-Link: Text durch Haus-Icon ersetzen */
.rank-math-breadcrumb a:first-of-type {
	font-size: 0;
	display: inline-flex;
	align-items: center;
}
.rank-math-breadcrumb a:first-of-type::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	transform: translateY(3px);
	background-color: #06141A;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 10.5V6.5C7.5 6.36739 7.44732 6.24021 7.35355 6.14645C7.25979 6.05268 7.13261 6 7 6H5C4.86739 6 4.74021 6.05268 4.64645 6.14645C4.55268 6.24021 4.5 6.36739 4.5 6.5V10.5' stroke='white'/%3E%3Cpath d='M1.5 5.00024C1.49997 4.85477 1.53167 4.71105 1.59289 4.5791C1.65412 4.44715 1.7434 4.33014 1.8545 4.23624L5.3545 1.23624C5.53499 1.08369 5.76368 1 6 1C6.23632 1 6.46501 1.08369 6.6455 1.23624L10.1455 4.23624C10.2566 4.33014 10.3459 4.44715 10.4071 4.5791C10.4683 4.71105 10.5 4.85477 10.5 5.00024V9.50024C10.5 9.76546 10.3946 10.0198 10.2071 10.2073C10.0196 10.3949 9.76522 10.5002 9.5 10.5002H2.5C2.23478 10.5002 1.98043 10.3949 1.79289 10.2073C1.60536 10.0198 1.5 9.76546 1.5 9.50024V5.00024Z' stroke='white'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 10.5V6.5C7.5 6.36739 7.44732 6.24021 7.35355 6.14645C7.25979 6.05268 7.13261 6 7 6H5C4.86739 6 4.74021 6.05268 4.64645 6.14645C4.55268 6.24021 4.5 6.36739 4.5 6.5V10.5' stroke='white'/%3E%3Cpath d='M1.5 5.00024C1.49997 4.85477 1.53167 4.71105 1.59289 4.5791C1.65412 4.44715 1.7434 4.33014 1.8545 4.23624L5.3545 1.23624C5.53499 1.08369 5.76368 1 6 1C6.23632 1 6.46501 1.08369 6.6455 1.23624L10.1455 4.23624C10.2566 4.33014 10.3459 4.44715 10.4071 4.5791C10.4683 4.71105 10.5 4.85477 10.5 5.00024V9.50024C10.5 9.76546 10.3946 10.0198 10.2071 10.2073C10.0196 10.3949 9.76522 10.5002 9.5 10.5002H2.5C2.23478 10.5002 1.98043 10.3949 1.79289 10.2073C1.60536 10.0198 1.5 9.76546 1.5 9.50024V5.00024Z' stroke='white'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-color .3s ease;
}
.rank-math-breadcrumb a:first-of-type:hover::before {
	background-color: #F26631;
}

/* ==========================================================================
   KNOWLEDGE TAGS GRID — Shortcode [knowledge_tags]
   ========================================================================== */

/* Widget-Container auf volle Breite strecken (Elementor align-items:center Override) */
.elementor-widget-shortcode:has(.knowledge-tags-grid) {
	width: 100%;
	align-self: stretch;
}

/* Grid Container */
.knowledge-tags-grid {
	display: grid;
	grid-template-columns: repeat(var(--ktg-columns, 3), 1fr);
	gap: 16px;
	width: 100%;
}

/* Einzelnes Tag-Item (Button) */
.knowledge-tag-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 24px;
	min-height: 50px;
	background: #E7ECEB;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

/* Icon links */
.knowledge-tag-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	object-fit: contain;
	border-radius: 0 !important;
	display: block;
}

/* Tag-Name */
.knowledge-tag-name {
	flex: 1;
	font-family: "Nunito Sans", sans-serif;
	font-size: clamp(1rem, 1rem + 0vw, 1rem);
	font-weight: 400;
	color: #0C2733;
	line-height: 1em;
	transition: color .2s ease;
}

/* Pfeil rechts (15×16) */
.knowledge-tag-arrow {
	flex-shrink: 0;
	width: 15px;
	height: 16px;
	color: #F26631;
	transition: color .2s ease, transform .2s ease;
}

/* Hover: Text + Arrow Farbe */
.knowledge-tag-item:hover .knowledge-tag-name {
	color: #D4592B;
}
.knowledge-tag-item:hover .knowledge-tag-arrow {
	color: #D4592B;
	transform: translateX(3px);
}

/* Responsive: Tablet 2 Spalten */
@media (max-width: 1024px) {
	.knowledge-tags-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Responsive: Mobile 1 Spalte */
@media (max-width: 576px) {
	.knowledge-tags-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   KNOWLEDGE READ MORE — Shortcode [knowledge_read_more]
   ========================================================================== */

.knowledge-read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.knowledge-read-more-text {
	font-family: "Nunito Sans", sans-serif;
	font-size: clamp(1rem, 1rem + 0vw, 1rem);
	font-weight: 400;
	color: #F26631;
	line-height: 1;
	transition: color .2s ease;
}

.knowledge-read-more-arrow {
	flex-shrink: 0;
	display: block;
	transition: transform .2s ease;
}

.knowledge-read-more-arrow path {
	transition: stroke .2s ease;
}

.knowledge-read-more:hover .knowledge-read-more-text {
	color: #D4592B;
}

.knowledge-read-more:hover .knowledge-read-more-arrow {
	transform: translateX(4px);
}

.knowledge-read-more:hover .knowledge-read-more-arrow path {
	stroke: #D4592B;
}

/* ==========================================================================
   AKKORDEON MIT NUMMERN — Klasse: accordion-numbered
   ========================================================================== */

/* Nummerierungs-Span in Titel: orange + Abstand */
.accordion-numbered .e-n-accordion-item-title h1 span,
.accordion-numbered .e-n-accordion-item-title h2 span,
.accordion-numbered .e-n-accordion-item-title h3 span,
.accordion-numbered .e-n-accordion-item-title h4 span,
.accordion-numbered .e-n-accordion-item-title h5 span,
.accordion-numbered .e-n-accordion-item-title h6 span,
.accordion-numbered .e-n-accordion-item-title p span,
.accordion-numbered .e-n-accordion-item-title div span,
.accordion-numbered .e-n-accordion-item-title > span span {
	margin-right: 15px;
	color: #F26631;
}

/* Aufgeklapptes Item: untere Ecken nicht rund */
.accordion-numbered .e-n-accordion-item-title[aria-expanded="true"] {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* ==========================================================================
   WPML + ELEMENTOR POPUP CENTERING FIX
   WPML injiziert auf der Standardsprache zusätzliche DOM-Elemente,
   die Elementors Dialog-Library bei der Berechnung der horizontalen
   Position stören. Dieser Fix erzwingt die korrekte Zentrierung
   NUR für das Such-Popup (ID 5240). Die mobile Navigation (ID 5300)
   wird bewusst ausgenommen, damit sie rechtsbündig bleibt.
   ========================================================================== */
#elementor-popup-modal-5240 .dialog-widget-content {
	left: 50% !important;
	transform: translateX(-50%) !important;
}

/* ==========================================================================
   MOBILE NAVIGATION (CSS-Klasse .mobile-nav auf dem Menü-Widget)
   Styling für das Off-Canvas Menü: Typografie-Hierarchie,
   Einrückung der 2. Ebene, CSS-Trenner.
   Klasse .mobile-nav wird in Elementor auf das Nav-Menu-Widget
   im Popup gesetzt (Erweitert → CSS-Klassen). Greift für DE + EN.
   ========================================================================== */

/* 1. Ebene: Größere Schrift (Bodytext XL) */
.mobile-nav .elementor-nav-menu > li > a {
	font-size: 22px !important;
}

/* 2. Ebene (Sub-Menu): Kleinere Schrift (Bodytext L) + Einrückung */
.mobile-nav .elementor-nav-menu ul.sub-menu > li > a {
	font-size: 18px !important;
}
.mobile-nav .elementor-nav-menu ul.sub-menu {
	padding-left: 20px !important;
}

/* Trenner: CSS-Klasse .menu-separator auf einem leeren Menüpunkt */
.mobile-nav .elementor-nav-menu > li.menu-separator {
	font-size: 0 !important;
	line-height: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	margin-top: 30px !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	border: none !important;
}
.mobile-nav .elementor-nav-menu > li.menu-separator > a {
	display: none !important;
}

/* ==========================================================================
   LOOP GRID: RESPONSIVE POST-ANZAHL
   Klasse .limit-posts-responsive auf dem Loop Grid Widget.
   Reduziert die sichtbaren Items:
   6 → 5 (≤1200px), 6 → 4 (≤1024px), 6 → 3 (≤767px).
   Posts werden serverseitig weiterhin geladen (SEO-neutral).
   ========================================================================== */
@media (max-width: 1200px) {
	.limit-posts-responsive .e-loop-item:nth-of-type(n+6) {
		display: none;
	}
}
@media (max-width: 1024px) {
	.limit-posts-responsive .e-loop-item:nth-of-type(n+5) {
		display: none;
	}
}
@media (max-width: 767px) {
	.limit-posts-responsive .e-loop-item:nth-of-type(n+4) {
		display: none;
	}
}