/*
Theme Name: Astra Child - Foerster Diether
Template: astra
Description: Child-Theme für die Kanzlei-Site. Alle Custom-CSS-Anpassungen gehören hierher, nicht ins Astra-Parent-Theme.
Version: 1.0.1792938449503
Text Domain: astra-child
*/

/* Custom-CSS-Anpassungen ab hier ergänzen. */

/* Team-Portraitfotos (2026-09-01): ersetzen die bisherigen Kreis-Platzhalter
   (dashed Rahmen + Kamera-Icon) in gleicher Größe (160x160, rund).
   Selektor "img.team-portrait-photo" (statt nur ".team-portrait-photo") + !important
   auf border-radius nötig: Elementors frontend.min.css setzt ".elementor img{border-radius:0}"
   mit Spezifität (0,1,1) - eine reine Klassen-Regel (0,1,0) verliert dagegen unabhängig
   von der Ladereihenfolge (vgl. Fallstrick #27 zu ähnlichen Spezifitäts-Fallen). */
img.team-portrait-photo {
	display: block;
	width: 160px;
	height: 160px;
	max-width: 160px;
	border-radius: 50% !important;
	object-fit: cover;
}

/* Blauer Streifen ganz oben, site-weit auf JEDER Seite (Kundenwunsch 2026-08-28).
   Auf body statt einem Elementor/Astra-Wrapper, da body garantiert das äußerste
   Element auf jeder Seite ist (auch auf Seiten ohne Elementor-Hero) und #masthead
   KEIN position:fixed/sticky hat, also normal darunter einreiht - kein Risiko,
   dass der Header den Streifen verdeckt. */
body {
	border-top: 7px solid #2F354B;
}

/* Segoe-UI-Systemschrift-Wunsch des Kunden (2026-08-28): Windows-Nutzer sehen Segoe UI,
   alle anderen bekommen weiterhin Inter als Fallback. NUR Fließtext/Navigation/Buttons -
   die große Barlow-Condensed-Headline bleibt bewusst unangetastet.
   Elementors eigenes "Custom Font"-Feld kann KEINEN Mehrfach-Font-Stack halten (setzt den
   kompletten String fälschlich in EIN Anführungszeichen, z.B. font-family:"Segoe UI, Inter" -
   ungültig, Segoe UI würde nie greifen). Deshalb hier per Klasse überschrieben, an allen
   Widgets ergänzt, die zuvor "Inter" fest im Elementor-Feld gesetzt hatten. */
.segoe-ui-stack,
.segoe-ui-stack .elementor-heading-title,
.segoe-ui-stack .elementor-button {
	font-family: "Segoe UI", "Inter", sans-serif !important;
}
/* Elementor-Kit-globale "Text"/"Accent"-Typografie (z.B. Footer-Copyright-Widgets, die per
   __globals__ statt eigenem Font-Feld gebunden sind) - hier reicht ein Custom-Property-
   Override, da Elementors generierte Regel ohnehin "var(--e-global-typography-text-font-family)"
   referenziert. "Primary"/"Secondary" (Barlow Condensed, Überschriften) bleiben unangetastet. */
.elementor-kit-823 {
	--e-global-typography-text-font-family: "Segoe UI", "Inter";
	--e-global-typography-accent-font-family: "Segoe UI", "Inter";
}

/* Fachgebiete-Kacheln: echte 3D-Flip-Cards (2026-08-28).
   Ersetzt den vorherigen TOTEN Hover-Code (Fallstrick #21: _css_classes="fachgebiet-kachel"
   rendert bei Elementor-CONTAINERN in dieser Installation nie, siehe PROJECT_STATUS.md) -
   jetzt über die zuverlässigen, automatisch vergebenen .elementor-element-<ID>-Klassen der
   5 Kachel-Container plus eigene _element_id auf den neuen Front/Back-Face-Containern.
   Geprüft: Ultimate-Addons-Plugin ist nicht installiert, Elementors "flip-box"-Widget ist
   nur eine Pro-Werbe-Platzhalter-Komponente (Elementor\Modules\Promotions), keine echte
   Funktion in der Kostenlos-Version - deshalb eigene CSS/JS-Lösung (JS in functions.php,
   Funktion astra_child_fachgebiete_flip_cards). */
.elementor-element-79cb5f94,
.elementor-element-3cab9c8d,
.elementor-element-11af298d,
.elementor-element-6fc5981e,
.elementor-element-181cd369 ,
.elementor-element-c20c975 {
	perspective: 1200px;
}
/* Cursor zeigt den aktivierbaren Zustand an - bewusst getrennt vom Rest, damit im
   deaktivierten Zustand (siehe unten) kein "klickbar"-Signal an die Kachel geht. */
body:not(.fachgebiete-flip-disabled) .elementor-element-79cb5f94,
body:not(.fachgebiete-flip-disabled) .elementor-element-3cab9c8d,
body:not(.fachgebiete-flip-disabled) .elementor-element-11af298d,
body:not(.fachgebiete-flip-disabled) .elementor-element-6fc5981e,
body:not(.fachgebiete-flip-disabled) .elementor-element-181cd369 ,
body:not(.fachgebiete-flip-disabled) .elementor-element-c20c975 {
	cursor: pointer;
}
#flip-inner-62de83d,
#flip-inner-0a839c9,
#flip-inner-2289075,
#flip-inner-4dfd7de,
#flip-inner-e4cdf5f ,
#flip-inner-c20c975 {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.55s ease;
	transform-style: preserve-3d;
}
#flip-front-62de83d,
#flip-front-0a839c9,
#flip-front-2289075,
#flip-front-4dfd7de,
#flip-front-e4cdf5f,
#flip-front-c20c975,
#flip-back-62de83d,
#flip-back-0a839c9,
#flip-back-2289075,
#flip-back-4dfd7de,
#flip-back-e4cdf5f ,
#flip-back-c20c975 {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 8px;
}
#flip-front-62de83d,
#flip-front-0a839c9,
#flip-front-2289075,
#flip-front-4dfd7de,
#flip-front-e4cdf5f ,
#flip-front-c20c975 {
	background-color: #2F354B;
}
#flip-back-62de83d,
#flip-back-0a839c9,
#flip-back-2289075,
#flip-back-4dfd7de,
#flip-back-e4cdf5f ,
#flip-back-c20c975 {
	background-color: #FFFFFF;
	border: 1px solid #2F354B;
	transform: rotateY(180deg);
}
/* Hover-Flip auf Desktop bewusst entfernt (2026-09-13, Kundenwunsch): Karten oeffnen jetzt einheitlich per Klick/Tap auf allen Geraeten, siehe astra_child_fachgebiete_flip_cards() in functions.php (Akkordeon: nur eine Karte gleichzeitig offen). */
/* Mobil (Tap) und Tastatur (Enter/Space): dauerhafter Toggle-Zustand per JS,
   siehe astra_child_fachgebiete_flip_cards() in functions.php - gibt bei deaktiviertem
   Schalter gar kein Script aus, diese Klasse kann dann ohnehin nie gesetzt werden;
   der body-Präfix ist die zusätzliche CSS-seitige Absicherung. */
body:not(.fachgebiete-flip-disabled) #flip-inner-62de83d.is-flipped,
body:not(.fachgebiete-flip-disabled) #flip-inner-0a839c9.is-flipped,
body:not(.fachgebiete-flip-disabled) #flip-inner-2289075.is-flipped,
body:not(.fachgebiete-flip-disabled) #flip-inner-4dfd7de.is-flipped,
body:not(.fachgebiete-flip-disabled) #flip-inner-e4cdf5f.is-flipped ,
body:not(.fachgebiete-flip-disabled) #flip-inner-c20c975.is-flipped {
	transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
	#flip-inner-62de83d,
	#flip-inner-0a839c9,
	#flip-inner-2289075,
	#flip-inner-4dfd7de,
	#flip-inner-e4cdf5f ,
	#flip-inner-c20c975 {
		transition: none;
	}
}

/* One-Pager: sanftes Scrollen zu den Sprunganker-Sections */
html {
	scroll-behavior: smooth;
}

/* Header-Navigation: Hover-Zustand für die Menülinks */
.main-header-menu .menu-item > a {
	transition: color 0.2s ease;
}
@media (hover: hover) {
	.main-header-menu .menu-item > a:hover {
		color: #4A5273 !important;
		text-decoration: underline;
	}
}
.main-header-menu .menu-item > a:active {
	color: #4A5273 !important;
	text-decoration: underline;
}

/* Footer-Navigation (Impressum/Datenschutz/Cookie-Richtlinie): Hover-Zustand */
#colophon .main-header-menu .menu-item > a,
.site-footer .main-header-menu .menu-item > a {
	transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
	text-decoration: underline;
	text-decoration-color: transparent;
}
@media (hover: hover) {
	#colophon .main-header-menu .menu-item > a:hover,
	.site-footer .main-header-menu .menu-item > a:hover {
		opacity: 0.75;
		text-decoration-color: currentColor;
	}
}
#colophon .main-header-menu .menu-item > a:active,
.site-footer .main-header-menu .menu-item > a:active {
	opacity: 0.75;
	text-decoration-color: currentColor;
}

/* Hero: dezenter, pulsierender Scroll-Hinweis (Chevron) am unteren Rand.
   Schlagschatten macht ihn kontrastunabhängig vom Bildinhalt lesbar (weiß bleibt
   erkennbar auf hellen UND dunklen Bildbereichen, ohne eigenes Hintergrund-Element). */
.hero-scroll-hint {
	animation: hero-scroll-bounce 1.8s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
@keyframes hero-scroll-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50% { transform: translateY(8px); opacity: 1; }
}
/* Barrierefreiheit: Bewegung stoppen, wenn das Betriebssystem reduzierte Bewegung
   wünscht (WCAG 2.3.3). Chevron bleibt sichtbar (opacity 1), nur die Bounce-Animation
   entfällt - kein Inhaltsverlust, nur der bewegte Effekt wird entfernt. */
@media (prefers-reduced-motion: reduce) {
	.hero-scroll-hint {
		animation: none;
		opacity: 1;
	}
}

/* Barrierefreiheit: sichtbar für Sehende versteckt, aber für Screenreader vorhanden
   (Standard-"visually hidden"-Pattern). Genutzt u.a. für die Text-Alternative der
   reinen Unicode-Sterne (★) bei den Bewertungen. */
.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;
}

/* Barrierefreiheit: einheitlicher, deutlich sichtbarer Fokus-Rahmen in der
   Primärfarbe #2F354B statt der schwachen/uneinheitlichen Browser-Standards
   (Astra setzt teils outline:0, teils "outline:thin dotted" - beides schwer
   erkennbar). :focus-visible statt :focus, damit der Ring nur bei Tastatur-
   Fokus erscheint, nicht bei jedem Maus-Klick. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-button:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #2F354B !important;
	outline-offset: 2px;
}
/* Auf dunklem Untergrund (Off-Canvas-Menü, Navy-Verlauf) waere ein navyfarbener
   Ring unsichtbar - dort Weiß statt Primärfarbe. */
.main-header-menu.stack-on-mobile a:focus-visible {
	outline-color: #FFFFFF !important;
}

/* ===== Header-Neuaufbau: EIN Bereich, Logo ragt ins Hero-Foto ===== */

/* Header liegt über dem Hero (Logo darf sichtbar ins Foto hineinragen). */
#masthead {
	position: relative;
	z-index: 100;
	overflow: visible;
}
#ast-desktop-header,
.ast-main-header-wrap,
.ast-primary-header-bar,
.main-header-bar-navigation,
.site-header-primary-section-left,
.ast-builder-grid-row {
	overflow: visible;
}

/* Logo bleibt in voller Größe, ragt aber ca. 30% seiner Höhe unten heraus. */
.custom-logo-link {
	position: relative;
	z-index: 101;
	display: block;
}
.custom-logo-link img.custom-logo {
	margin-bottom: -45px; /* ~30% von 150px Logo-Höhe */
	position: relative;
	z-index: 101;
}

/* Rechte Kopfzeile: Kontakt + Trenner + Navigation in EINER Zeile, rechtsbündig. */
.header-combined-right {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}

/* Navigationslinks: animierte, einwachsende Unterlinie statt sofortiger Unterstreichung. */
.header-html-nav-link {
	position: relative;
	transition: color 0.2s ease;
	text-decoration: none !important;
}
.header-html-nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0%;
	height: 1px;
	background-color: #4A5273;
	transition: width 0.25s ease;
}
@media (hover: hover) {
	.header-html-nav-link:hover {
		color: #4A5273 !important;
	}
	.header-html-nav-link:hover::after {
		width: 100%;
	}
}
.header-html-nav-link:active {
	color: #4A5273 !important;
}
.header-html-nav-link:active::after {
	width: 100%;
}

@media (max-width: 544px) {
	.header-combined-right {
		justify-content: flex-start;
	}
	.header-html-nav-link {
		margin-left: 0 !important;
		margin-right: 16px;
	}
}

/* ===== Mobile-Korrekturen ===== */

/* Kontakt-Icons im Mobile-Header (statt ausgeschriebenem Text) */
.header-mobile-contact-icons {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-right: 12px;
}
.header-mobile-contact-icons a {
	color: #2F354B;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}
@media (hover: hover) {
	.header-mobile-contact-icons a:hover {
		color: #4A5273;
	}
}
.header-mobile-contact-icons a:active {
	color: #4A5273;
}

/* Logo-Überlapp proportional zur größeren Mobil-Logogröße (85px, ~30%) */
@media (max-width: 544px) {
	.custom-logo-link img.custom-logo {
		margin-bottom: -25px;
	}
}

/* Hero Mobil: Text-Block - klare Trennung vom Header (beide hell/EDEFF4, sonst kein
   erkennbarer Übergang). HINWEIS: Elementor-Container ignorieren das _css_classes-Feld
   in dieser Installation (nur Widgets respektieren es, siehe Fallstrick #19 in
   PROJECT_STATUS.md) - deshalb Ansteuerung über die automatisch vorhandene
   .elementor-element-<ID>-Klasse statt einer eigenen Custom-Klasse. */
.elementor-element-43c4877 {
	border-top: 1px solid rgba(47, 53, 75, 0.15);
}

/* Hero Mobil: eigenständiger Foto-Block (kein Hintergrundbild mehr, echtes <img>) -
   volle Breite, kein Text/Overlay/Verlauf darauf. Seitenverhältnis 16:10 (2026-08-25,
   war 4:5) macht den Block spürbar niedriger. Bei 16:10 (1,6) ist die Box jetzt BREITER
   im Verhältnis als das Quellbild (2560x1656, Ratio 1,55) - anders als beim vorherigen
   4:5-Verhältnis (0,8, damals schmaler als das Bild) wird die Box-Breite jetzt zur
   deckenden Dimension, wodurch echtes VERTIKALES Cropping entsteht. object-position:
   center top verankert dabei oben (Köpfe bleiben erhalten), unten wird beschnitten
   (Beine fallen weg) - kein Zoom-Hack mehr nötig, object-position wirkt hier normal. */
.elementor-element-245ee15 {
	overflow: hidden;
	position: relative;
}
.hero-mobile-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Scroll-Chevron auf Mobil (2026-08-25 wieder ergänzt, ging beim 3-Block-Umbau verloren,
   da der alte Chevron 97ad6af im jetzt mobil-versteckten Foto-Overlay-Hero 5ad210e sitzt).
   Eigener Klon (66a68cc) am Ende des Foto-Blocks, absolut positioniert/zentriert.
   WICHTIG: Zentrierung über margin-left (nicht transform:translateX), da .hero-scroll-hint
   selbst schon transform:translateY per Keyframe-Animation nutzt - zwei gleichzeitige
   transform-Werte auf demselben Element würden sich gegenseitig überschreiben statt
   sich zu addieren. */
.hero-mobile-scroll-hint {
	position: absolute;
	bottom: 16px;
	left: 50%;
	margin-left: -14px; /* halbe Icon-Größe (28px) */
	z-index: 2;
}

/* Ausgeklapptes Mobil-Menü: Off-Canvas-Panel von RECHTS (2026-08-25 von randlosem
   Dropdown-Block umgebaut). Breakpoint 921px = Astras eigener Header-Breakpoint
   (ast-header-break-point, live per @media(max-width:921px) in der Astra-CSS-Ausgabe
   verifiziert) - unterhalb davon rendert Astra den Hamburger/Popup-Modus, oberhalb die
   normale horizontale Desktop-Nav (.main-header-menu ist dieselbe UL für beide, deshalb
   Scoping zwingend nötig).
   STACKING-KONTEXT-FALLSTRICK: .main-header-menu ist ein Nachfahre von #masthead, das
   selbst position:relative+z-index gesetzt hat und dadurch einen eigenen Stacking-Context
   aufmacht - ein fixed-positioniertes Kind bleibt trotz "escaped" Sichtposition INNERHALB
   dieses Contexts gefangen. Ohne Gegenmaßnahme würde das hochgezogene Panel (hoher
   z-index) den Schließen-Button (X, ebenfalls Nachfahre von #masthead, aber ohne eigenen
   z-index) optisch verdecken. Fix: Toggle-Button bekommt einen NOCH höheren z-index als
   das Panel, innerhalb desselben Contexts. */
@media (max-width: 921px) {
	#masthead {
		z-index: 999999;
	}
	.ast-mobile-menu-trigger-fill {
		position: relative;
		z-index: 10000;
	}
	/* .ast-primary-header-bar hat bereits eigenes position:relative+z-index:4 und macht
	   dadurch einen EIGENEN Stacking-Context auf. Der Toggle-Button steckt als dessen
	   Nachfahre darin fest - sein z-index:10000 gilt nur INNERHALB dieses Contexts, nach
	   außen (Vergleich mit dem Panel, das AUSSERHALB dieser Bar liegt) zählt nur der
	   Eintrittswert 4 der Bar selbst. Deshalb zusätzlich die Bar selbst anheben. */
	.ast-primary-header-bar {
		position: relative;
		z-index: 10001;
	}
	/* KRITISCH: Astra schaltet diesen Wrapper (enthält NUR das Menü, sonst nichts) per
	   display:none/block um, nicht per Klasse am Panel selbst. Ein Vorfahre mit
	   display:none entfernt ALLES darunter komplett aus dem Render-Tree - auch ein
	   position:fixed-Kind, das eigentlich "aus dem Fluss escaped" - dadurch gibt es beim
	   Öffnen keinen vorherigen gerenderten Frame, von dem aus die transform-transition
	   animieren könnte (sie "poppt" sofort in den Endzustand). Fix: Wrapper dauerhaft
	   sichtbar lassen, das eigentliche Ein-/Ausblenden übernimmt jetzt vollständig unser
	   translateX-Transform auf dem Panel selbst. */
	.ast-mobile-header-content {
		display: block !important;
		height: 0 !important;
		min-height: 0 !important;
		overflow: visible !important;
		background: transparent !important;
	}
	.main-header-menu.stack-on-mobile {
		position: fixed;
		/* Header-Höhe live bei 360/390/414px gemessen (identisch: 89,15625px, da sich das
		   Mobil-Header-Layout innerhalb dieser Breiten nicht ändert) - Panel beginnt jetzt
		   ERST unterhalb des Headers, statt Logo/Icons zu überlappen. */
		top: 89.15625px;
		right: 0;
		width: 80%;
		height: calc(100vh - 89.15625px);
		height: calc(100dvh - 89.15625px);
		margin: 0;
		padding: 32px 28px 32px;
		background: linear-gradient(160deg, #2F354B 0%, #4A5273 100%);
		box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.35s ease-out;
		z-index: 9999;
	}
	body.ast-main-header-nav-open .main-header-menu.stack-on-mobile {
		transform: translateX(0);
	}
	.main-header-menu.stack-on-mobile .menu-item {
		padding: 18px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.main-header-menu.stack-on-mobile .menu-item:last-child {
		border-bottom: none;
	}
	.main-header-menu.stack-on-mobile .menu-link {
		color: #FFFFFF !important;
		font-size: 21px;
	}
	.main-header-menu.stack-on-mobile .menu-item > a:hover,
	.main-header-menu.stack-on-mobile .menu-item > a:active {
		color: #FFFFFF !important;
		opacity: 0.7;
	}

	/* Abdunkelndes Overlay hinter dem Panel (DOM-Element aus functions.php, wp_footer-Hook -
	   Sichtbarkeit rein per CSS über die von Astra gesetzte Body-Klasse ast-main-header-nav-open,
	   Schließen-per-Klick per kleinem JS im selben Hook, siehe dort). */
	.ast-mobile-menu-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease-out;
		z-index: 9998;
	}
	body.ast-main-header-nav-open .ast-mobile-menu-overlay {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Kontakt-Links in der Header-Zeile (Tel./Mail): dezenter Hover */
.header-combined-contact a,
.header-combined-right > span a {
	transition: opacity 0.2s ease;
}
@media (hover: hover) {
	.header-combined-contact a:hover,
	.header-combined-right > span a:hover {
		opacity: 0.65;
	}
}
.header-combined-contact a:active,
.header-combined-right > span a:active {
	opacity: 0.65;
}

/* Team-Section: Fachgebiete als gestaltete Liste statt Fließtext */
.fachgebiete-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fachgebiete-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 12px;
	line-height: 1.6;
}
.fachgebiete-list li:last-child {
	margin-bottom: 0;
}
.fachgebiete-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #4A5273;
}

/* Impressum-Redesign (2026-08-26): gestapelte Label+Text-Blöcke statt Word-Tabelle.
   Typografie/Abstände zentral hier gepflegt statt einzeln je Widget - Textänderungen
   künftig direkt im jeweiligen Text-Editor-Widget, ohne CSS anzufassen. */
.impressum-label .elementor-heading-title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 32px;
	font-weight: 300;
	line-height: 1.3em;
	color: #2F354B;
	margin: 0 0 12px 0;
	-webkit-hyphens: auto;
	hyphens: auto;
}
@media (max-width: 1024px) {
	.impressum-label .elementor-heading-title {
		font-size: 24px;
	}
}
.elementor-element.impressum-section {
	font-family: 'Segoe UI', 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #2F354B;
	padding-bottom: 28px;
	/* !important nötig: Elementors .e-con .elementor-widget:not(:last-child)-Regel
	   setzt --kit-widget-spacing (Basis für margin-block-end) mit Spezifität (0,3,0) -
	   höher als jeder erreichbare Klassen-Selektor auf dem Widget selbst. */
	margin-bottom: 36px !important;
	border-bottom: 1px solid rgba(47, 53, 75, 0.18);
}
.impressum-section p {
	margin: 0 0 1em 0;
}
.impressum-section p:last-child {
	margin-bottom: 0;
}
.impressum-section ul {
	margin: 0 0 1em 0;
	padding-left: 20px;
}
.impressum-section h3 {
	font-family: 'Segoe UI', 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #2F354B;
	margin: 24px 0 8px 0;
}
.impressum-section h3:first-child {
	margin-top: 0;
}
.impressum-section a {
	color: #2F354B;
	text-decoration: underline;
}
@media (hover: hover) {
	.impressum-section a:hover {
		color: #4A5273;
	}
}


/* Complianz-generierte Rechtsdokumente (Cookie-Richtlinie etc.) hell gestalten - global body-bg (navy) sonst durchscheinend */
body.cmplz-document article.ast-article-single {
	background:#FFFFFF !important;
	max-width:760px;
	margin:0 auto !important;
	padding:60px 20px 80px 20px !important;
	float:none !important;
}
body.cmplz-document article.ast-article-single,
body.cmplz-document article.ast-article-single p,
body.cmplz-document article.ast-article-single li,
body.cmplz-document article.ast-article-single div {
	color:#2F354B !important;
	font-family:Inter,sans-serif !important;
	font-size:16px !important;
	line-height:1.7 !important;
}
body.cmplz-document article.ast-article-single h1 {
	color:#2F354B !important;
	font-family:'Barlow Condensed',sans-serif !important;
	font-weight:300 !important;
}
body.cmplz-document article.ast-article-single h2,
body.cmplz-document article.ast-article-single h3 {
	color:#2F354B !important;
	font-family:'Barlow Condensed',sans-serif !important;
	font-weight:300 !important;
	margin-top:40px !important;
	padding-top:20px !important;
	border-top:1px solid rgba(47,53,75,0.12) !important;
}
body.cmplz-document article.ast-article-single a {
	color:#2F354B !important;
	text-decoration:underline;
}
body.cmplz-document article.ast-article-single em,
body.cmplz-document article.ast-article-single i {
	color:#4A5273 !important;
}


/* Fix: Mobile-Menu-Toggle war weiss auf weissem Header unsichtbar/blass */
.menu-toggle, .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
	color: #2F354B !important;
	background-color: #2F354B !important;
}


/* Fix: Nav-Menü brach um, seit Kontaktzeile in derselben Header-Zeile steht - weniger Padding pro Link */
#ast-hf-menu-1 > li > a {
	padding: 0 10px !important;
}
.ast-builder-menu-1 { flex-shrink: 0 !important; }


.ast-builder-menu-1 {
	flex-shrink: 0 !important;
}




/* Fix: Kontaktzeile und Nav-Menue ueberlappten sich in der kombinierten Header-Zeile (korrekte Klasse) */
.ast-header-html {
	font-size: 13px !important;
	padding-right: 24px !important;
	box-sizing: border-box !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 1 !important;
	min-width: 0 !important;
}
.ast-builder-menu-1 {
	flex-shrink: 0 !important;
}


/* Nav-Menue: Bold + dunkelblau, deutlich von der duennen Kontaktzeile abgesetzt */
#ast-hf-menu-1 > li > a {
	font-weight: 700 !important;
	color: #2F354B !important;
	font-size: 16px !important;
}

/* Kontaktzeile kompakter, damit Header nicht mehr ueber den Viewport-Rand hinauslaeuft */
.ast-header-html {
	font-size: 12px !important;
}
.ast-header-html .fd-contact-link:last-child {
	margin-right: 16px !important;
}


/* Mobile-Logo vergroessert (Customizer) - proportionaler Ueberstand + Abstand analog zum Burger-Icon */
@media (max-width: 544px) {
	.custom-logo-link img.custom-logo {
		margin-bottom: -33px !important;
		margin-top: 12px !important;
	}
	.ast-mobile-menu-buttons-minimal .menu-toggle {
		margin-top: 12px !important;
	}
}




/* Kontaktzeile im Header: Hover-Farbe (das <style>-Tag im Astra-Customizer-Feld hatte den kompletten CSS-Code als sichtbaren Text ins Element gerendert - das war die Wurzelursache fuer die falsche Breite) */
.fd-contact-link, .fd-contact-link:visited { color: #2F354B !important; }
.fd-contact-link:hover, .fd-contact-link:focus, .fd-contact-link:active { color: #4A5273 !important; text-decoration: underline !important; }



/* Kontakt-Icons (Telefon/Umschlag) per CSS-Hintergrundbild, da <svg>-Tags aus dem Customizer-HTML-Feld gefiltert werden */
.fd-tel::before, .fd-mail::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: contain;
}
.fd-tel::before {
	background-image: 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='M6.6 10.8C8 13.6 10.4 16 13.2 17.4L15.4 15.2C15.7 14.9 16.1 14.8 16.5 15C17.7 15.4 19 15.6 20.3 15.6C20.9 15.6 21.4 16.1 21.4 16.7V20.3C21.4 20.9 20.9 21.4 20.3 21.4C10.7 21.4 2.6 13.3 2.6 3.7C2.6 3.1 3.1 2.6 3.7 2.6H7.3C7.9 2.6 8.4 3.1 8.4 3.7C8.4 5 8.6 6.3 9 7.5C9.2 7.9 9.1 8.3 8.8 8.6L6.6 10.8Z' stroke='%232F354B' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fd-mail::before {
	background-image: 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%3Crect x='2' y='4' width='20' height='16' rx='2' stroke='%232F354B' stroke-width='1.8'/%3E%3Cpath d='M2 6L12 13L22 6' stroke='%232F354B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* Kontaktzeile mittig in ihrer eigenen Grid-Zelle zentrieren (echte Grid-Struktur: Logo | Kontakt-Zelle | Nav) */
.site-header-primary-section-center {
	justify-content: center !important;
}











/* Echter Fix: Astra erzwingt gleiche Breite fuer beide Rand-Spalten (= Bedarf der breiteren Seite), wodurch beim Logo Luft bleibt, bei der Nav aber nicht. Grid-Columns explizit auf "auto 1fr auto" setzen: Logo und Nav bekommen nur ihren eigenen Bedarf, die mittlere Kontaktzeile-Spalte den gesamten Rest - dadurch ist sie automatisch responsiv mittig zwischen Logo und Nav. */
.ast-grid-center-col-layout {
	grid-template-columns: auto 1fr auto !important;
}


/* Footer-Links (Impressum/Datenschutz/Cookie-Richtlinie): kein Hover-Signal vorhanden - Unterstreichung ergaenzen (einheitliches Konzept mit Nav) */
.hfe-nav-menu a:hover, .hfe-nav-menu a:focus {
	text-decoration: underline !important;
}


/* Doppeltes Foto bei Mobile: Hero_Mobil_Foto (500ea90c) ist jetzt ueberfluessig, da das Foto direkt in Hero_Mobil_Text integriert wurde. Elementors eigene "Auf Mobil ausblenden"-Einstellung hat nicht zuverlaessig gegriffen - daher robuster, direkter CSS-Override. */
@media (max-width: 767px) {
	.elementor-element-500ea90c {
		display: none !important;
	}
}


/* Fliesstext-Links (z.B. Team-Bio-Mitgliedschaften): anders als .fd-contact-link
   permanente Unterstreichung, da hier kein anderer Hinweis (Icon/Position) auf
   Klickbarkeit hindeutet - konsistent mit Hauptnavigation als Vorbild. */
.fd-inline-link, .fd-inline-link:visited {
	color: #2F354B !important;
	text-decoration: underline !important;
}
.fd-inline-link:hover, .fd-inline-link:focus, .fd-inline-link:active {
	color: #4A5273 !important;
	text-decoration: underline !important;
}


/* Flip-Card-Zitat (Rueckseite Fachgebiete): eigene Klasse, damit die
   Astra/Theme-Standardstile fuer <blockquote> (aus den Bewertungen) hier nicht
   zusaetzlich greifen - das verursachte vorher eine zu hohe Akzentlinie. 2026-09-14. */
.fd-flip-quote {
	margin: 0 !important;
	padding: 0 0 0 12px !important;
	border-left: 3px solid #4A5273 !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
}


/* Fachgebiete-Flip-Cards: EINHEITLICHE Kartenhoehe fuer alle 6 (Kundenwunsch
   2026-09-14: individuelle Hoehen sahen im geschlossenen Raster uneinheitlich
   aus). Hoehe bemessen am groessten Bedarf (Steuerrecht ~315px) + Puffer.
   Die Signatur-Fusszeile sitzt dank justify-content:space-between auf der
   Rueckseite garantiert immer am unteren Rand, unabhaengig davon, wie viel
   Platz der Text darueber braucht. */
.elementor-element-118b7205,
.elementor-element-9ac7f66,
.elementor-element-18eb910e,
.elementor-element-6cfcd3bd,
.elementor-element-7d12d284,
.elementor-element-3c75d14e {
	min-height: 320px !important;
	height: 320px !important;
	padding: 0 !important;
}



/* Fachgebiete-Flip-Cards Rueckseite: space-between erzwungen, damit die
   Signatur-Fusszeile IMMER am unteren Rand sitzt, unabhaengig von der
   Textlaenge darueber. Elementors eigene flex_justify_content-Einstellung ist
   im Modell korrekt auf space-between gesetzt, wird aber in der generierten
   CSS-Ausgabe nicht zuverlaessig uebernommen (wie schon bei min-height) -
   deshalb hier direkt erzwungen. 2026-09-14. */
.elementor-element-268801dc,
.elementor-element-da634e9,
.elementor-element-1b81e1ce,
.elementor-element-72e0be15,
.elementor-element-78935285,
.elementor-element-72936579 {
	justify-content: space-between !important;
	align-items: stretch !important;
}


/* Fachgebiete-Flip-Cards: Kopfbereich (Frage+Zitat) fuellt den verfuegbaren
   Platz oberhalb der Signatur-Fusszeile und zentriert seinen Inhalt darin.
   Vorher stand bei kuerzeren Texten eine unschoene leere Luecke zwischen
   Zitat und Fusszeile (space-between auf Ebene der Rueckseite). Jetzt wirkt
   der Freiraum gleichmaessig um Frage+Zitat verteilt. 2026-09-14 Kundenwunsch. */
.elementor-element-f4e2cdf,
.elementor-element-d5cd3f0,
.elementor-element-026fbac,
.elementor-element-f59ffbb,
.elementor-element-c7c1bfb,
.elementor-element-1f228e8 {
	flex-grow: 1 !important;
	justify-content: center !important;
}

/* A11y (WCAG 1.4.4/1.4.10/1.4.12), 2026-10-25: Fachgebiete-Karten wachsen mit dem Inhalt (min. 320 px),
   Vorder- und Rückseite liegen im Raster übereinander statt absolut in fester Höhe. Rückbau: diesen Block bis
   "Ende A11y-Karten" entfernen. */
.elementor-element-118b7205,
.elementor-element-9ac7f66,
.elementor-element-18eb910e,
.elementor-element-6cfcd3bd,
.elementor-element-7d12d284,
.elementor-element-3c75d14e {
	height: auto !important;
	min-height: 320px !important;
}
#flip-inner-62de83d,
#flip-inner-0a839c9,
#flip-inner-2289075,
#flip-inner-4dfd7de,
#flip-inner-e4cdf5f,
#flip-inner-c20c975 {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	flex-grow: 1 !important;
	align-self: stretch !important;
	height: auto !important;
	min-height: 320px !important;
}
#flip-front-62de83d,
#flip-back-62de83d,
#flip-front-0a839c9,
#flip-back-0a839c9,
#flip-front-2289075,
#flip-back-2289075,
#flip-front-4dfd7de,
#flip-back-4dfd7de,
#flip-front-e4cdf5f,
#flip-back-e4cdf5f,
#flip-front-c20c975,
#flip-back-c20c975 {
	position: static !important;
	grid-area: 1 / 1 !important;
	height: auto !important;
	min-height: 320px !important;
	box-sizing: border-box !important;
}
/* WCAG 1.4.12: lange Wörter in den Zitaten trennen statt mitten im Wort umbrechen. */
.fd-flip-quote {
	hyphens: auto !important;
}
/* Ende A11y-Karten */

/* A11y (WCAG 1.3.1), 2026-10-25: Hero-Überschrift Desktop ist jetzt ein echtes h1, Untertitel der Region-Sektion ein Absatz.
   Zeilenhöhe bleibt wie zuvor (1.2), damit sich das Layout nicht verschiebt. Rückbau: Block bis "Ende A11y-Überschriften" entfernen. */
.elementor-widget-heading.elementor-element-222dba48 h1.elementor-heading-title,
.elementor-widget-heading.elementor-element-38b7c72 p.elementor-heading-title {
	line-height: 1.2em;
}
/* Ende A11y-Überschriften */

/* A11y (WCAG 1.3.1), 2026-10-25: Seitentitel der Datenschutzhinweise ist ein echtes h1. Schrift wie zuvor beim h3 (48/28/20 px, 600, Zeilenhöhe 1.3em).
   Rückbau: Block bis "Ende A11y-Titel-Datenschutz" entfernen und im Elementor-Widget e33de01 wieder h3 wählen. */
.elementor-widget-heading.elementor-element-e33de01 h1.elementor-heading-title {
	font-family: Montserrat, sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: normal;
}
@media (max-width: 921px) {
	.elementor-widget-heading.elementor-element-e33de01 h1.elementor-heading-title {
		font-size: 28px;
	}
}
@media (max-width: 543px) {
	.elementor-widget-heading.elementor-element-e33de01 h1.elementor-heading-title {
		font-size: 20px;
	}
}
/* Ende A11y-Titel-Datenschutz */