/**
Theme Name: SUP-Child
Author: S&P
Description: Child-Theme für den S&P-Relaunch auf Basis von Astra
Version: 1.0.147
Text Domain: sup-child
Template: astra
*/

/* 3-Tier-Breiten: Astras Layout-Variablen mit den Briefing-Werten belegen */
.entry-content[data-ast-blocks-layout] {
	--wp--custom--ast-content-width-size: 780px;
	--wp--custom--ast-wide-width-size: 1140px;
}

/* Buttons: sanfter Hover-Übergang */
.wp-block-button__link,
.ast-button {
	transition: background-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.ast-button {
		transition: none;
	}
}

/* Fokusring (Tastatur): gewinnt gegen Astras dotted outline */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--green, #1E9B6B);
	outline-offset: 2px !important;   /* T62 18.15: gegen Element-Regeln mit Offset 0 */
}

/* Astras dotted-Rahmen bei Maus-Fokus unterdrücken
   (Tastatur-Fokus behält den Ring über :focus-visible) */
:is(a, button):focus:not(:focus-visible) {
	outline: none;
}

/* ↗ an externen Menü-Links — Original-Icon aus Figma als Maske */
.main-header-menu a[target="_blank"]::after,
.ast-mobile-popup-drawer a[target="_blank"]::after,
.site-footer a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 6px;
	position: relative;
	top: -4px;
	background-color: var(--wp--preset--color--slate, #647584);
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.03984 8.79546L6.67572e-05 7.75L6.3012 1.4375H1.47166L1.48302 3.8147e-06H8.78416V7.30682H7.33529L7.34666 2.47728L1.03984 8.79546Z' fill='%23647584'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.03984 8.79546L6.67572e-05 7.75L6.3012 1.4375H1.47166L1.48302 3.8147e-06H8.78416V7.30682H7.33529L7.34666 2.47728L1.03984 8.79546Z' fill='%23647584'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ↗ im Footer: gedämpftes Footer-Grau statt Slate (lt. Figma-Node) */
.site-footer a[target="_blank"]::after {
	background-color: #9EADC2;
}

/* Trennstrich vor dem Brand-Switch-Link (nur Desktop-Menü) */
.main-header-menu .menu-item-brandswitch {
	border-left: 1px solid var(--wp--preset--color--border, #E0E8F0);
	margin-left: 12px;   /* + 12px Padding des Nachbarlinks = 24 zur Pipe */
	padding-left: 12px;  /* + 12px eigenes Link-Padding = 24 zum Text   */
}

/* Brandswitch-Trennstrich nur im Desktop-Header
   (.ast-header-break-point setzt Astra, sobald der mobile Header aktiv ist) */
.ast-header-break-point .menu-item-brandswitch {
	border-left: none;
	margin-left: 0;
	padding-left: 0;
}

/* Telefon-Icon in der Topbar-Pill — Figma-Original als Maske,
   färbt sich über currentColor mit dem Button-Text (auch bei Hover/Fokus) */
.ast-header-button-1 .ast-custom-button::before {
	content: "";
	display: block;
flex: 0 0 16px;
width: 16px;
height: 16px;
background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2.66666H3.33333C2.97971 2.66666 2.64057 2.80714 2.39052 3.05719C2.14048 3.30724 2 3.64638 2 4C2.15803 6.60049 3.26234 9.05323 5.10455 10.8954C6.94677 12.7377 9.39951 13.842 12 14C12.3536 14 12.6928 13.8595 12.9428 13.6095C13.1929 13.3594 13.3333 13.0203 13.3333 12.6667V10L10 8.66666L9 10.3333C7.55231 9.61936 6.38064 8.44768 5.66667 7L7.33333 6L6 2.66666Z' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2.66666H3.33333C2.97971 2.66666 2.64057 2.80714 2.39052 3.05719C2.14048 3.30724 2 3.64638 2 4C2.15803 6.60049 3.26234 9.05323 5.10455 10.8954C6.94677 12.7377 9.39951 13.842 12 14C12.3536 14 12.6928 13.8595 12.9428 13.6095C13.1929 13.3594 13.3333 13.0203 13.3333 12.6667V10L10 8.66666L9 10.3333C7.55231 9.61936 6.38064 8.44768 5.66667 7L7.33333 6L6 2.66666Z' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Topbar-Pill ist ein Button, kein Inline-Link — keine Unterstreichung
   (am Anker selbst, das innere Div kann sie nicht aufheben) */
.ast-header-button-1 a {
	text-decoration: none;
}

/* Topbar-Label „Persönlicher Kontakt": 15/500/1.5 (T62 18.11),
   Abstand zur Telefon-Pill */
.ast-header-html-1 {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: #FFFFFF;
	margin-right: 14px;
}

/* ---------- Footer ---------- */

/* Labels (Kontakt, Standorte) und Widget-Titel: Versalien
   13/600, letter-spacing 0.52 px (T62 14 + 18.8) */
.site-footer .sup-footer-label,
.site-footer .widget-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.52px;
	text-transform: uppercase;
	color: #9EADC2;
	margin-bottom: 12px;
}

.site-footer .sup-footer-brand {
	font-size: 18px;
	font-weight: 700;
	color: #FFFFFF;
	margin-bottom: 8px;
}

/* Footer-Fließtext: gedämpftes Hellblau lt. Figma-Node
   (nicht in der Foundations-Tabelle — als Footer-Sonderwert geführt) */
.site-footer {
	color: #9EADC2;
}

/* Footer-Links: weiß, ohne Unterstreichung, Hover grün */
.site-footer a {
	color: #FFFFFF;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--green, #1E9B6B);
}

/* Standorte-Grid: 5 Spalten, mobil 2 */
.sup-standorte {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 767px) {
	.sup-standorte { grid-template-columns: repeat(2, 1fr); }
}

/* Trennlinien zwischen den Footer-Ebenen — nur über die Contentbreite,
   daher am inneren 1200er-Wrapper statt am full-bleed Zeilen-Container */
.site-footer .ast-builder-grid-row-container:not(:first-child) .ast-builder-grid-row {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 28px;
}

/* Mobiler Footer: 20px Seitenabstand; gestapelte Spalten der
   3-Spalten-Zeile mit gleichmäßigem Abstand, ohne Rest-Margin unten;
   Standorte schließen ohne Linie im 32px-Rhythmus an */
@media (max-width: 767px) {
	.site-footer .ast-builder-grid-row {
		padding-left: 20px;
		padding-right: 20px;
	}
	.site-footer .ast-builder-grid-row-container:first-child .ast-builder-grid-row {
		row-gap: 32px;
		padding-bottom: 32px;
	}
	.site-footer .ast-builder-grid-row-container:first-child .footer-widget-area {
		margin-top: 0;
		margin-bottom: 0;
	}
	.site-footer .ast-builder-grid-row-container:nth-child(2) .ast-builder-grid-row {
		border-top: none;
		padding-top: 0;
	}
}

/* Nur das Rechts-Menü in der Bottom-Bar läuft horizontal */
.site-footer .menu-footer-rechtliches-container .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Linklisten (Leistungen, Die Kanzlei): gleicher Zeilenabstand
   wie im Standorte-Grid (10px) */
.site-footer .footer-widget-area .menu li {
	margin-bottom: 10px;
}

/* Ausnahme: das horizontale Rechts-Menü braucht keinen Zeilenabstand */
.site-footer .menu-footer-rechtliches-container .menu li {
	margin-bottom: 0;
}

.site-footer .ast-footer-copyright {
	text-align: left;
	color: #9EADC2;
}

/* Legal-Zeile und Copyright: 13/400/1.3 (T62 18.9) */
.site-footer .menu-footer-rechtliches-container .menu a,
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
}

/* ---------- Startseite / Hero ---------- */

/* Container-Tier (1200): für Elemente, die volle Contentbreite brauchen.
   Ohne Alignment-Zusatz nutzen — die Klasse übersteuert die 780er-
   Standardbegrenzung der umgebenden Gruppe (deren :where-Regel hat
   Spezifität 0) */
.sup-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.sup-container img {
	width: 100%;
	height: auto;
	display: block;
}

/* Seiten starten mit Full-Bleed-Heroes direkt am Header und enden
   am Footer — Astras Container-Innenabstand oben/unten entfernen */
.page .site-content .ast-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* Foto und Textfläche stoßen lt. Node direkt aneinander —
   Layout-Gap und Bild-Margin dazwischen entfernen */
.sup-hero-text {
	margin-top: 0 !important;
}
.entry-content > .wp-block-image:first-child {
	margin-bottom: 0;
}

/* Mobil-Hero: 16:9 lt. Node (Desktop bleibt 10:3 aus der Bilddatei) */
@media (max-width: 767px) {
	.home .entry-content > .wp-block-image:first-child img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
		width: 100%;
	}
}

/* Grüner Akzentstrich (40×4, Radius 2 lt. §5): linksbündig auf der
   780er-Lesespalte — Versatz = halber Rest der Gruppenbreite;
   !important kontert Cores zwangszentrierendes margin !important */
[data-ast-blocks-layout] .wp-block-separator.sup-akzentstrich {
	width: 40px;
	height: 4px;
	background-color: var(--wp--preset--color--green, #1E9B6B);
	border: 0;
	border-radius: 2px;
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: max(0px, calc((100% - 780px) / 2)) !important;
	opacity: 1;
}

/* Hero-Lead (Start, Team, Karriere): 1.125rem/400/1.5 (T62 3) */
:is(.sup-hero-text, .sup-team-hero) h1 ~ p {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
}

/* H1 mobil: Zeilenhöhe 1.15 (T62 15).
   !important gegen spätere .sup-team-hero/.sup-stellen-hero-Regeln (1.1)
   und Inline-Zeilenhöhen aus dem Editor */
@media (max-width: 767px) {
	:is(.sup-hero-text, .sup-team-hero, .sup-stellen-hero, .sup-leistungen-hero) h1 {
		line-height: 1.15 !important;
	}
}

/* Sektions-H2 (Preset „Display Section"): Zeilenhöhe 120 % lt. Figma-Stil
   Display/H2-Section — überall, nicht nur dort, wo sie inline gesetzt ist (T62 5) */
h2.has-display-section-font-size {
	line-height: 1.2;
}

/* Hero-Textgruppe mobil: 32/44 statt 40/60 lt. Node.
   !important nötig, weil der Editor Gruppen-Paddings als
   Inline-Style ausgibt */
@media (max-width: 767px) {
	.sup-hero-text {
		padding-top: 32px !important;
		padding-bottom: 44px !important;
	}
}

/* ---------- Kennzahlen-Strip ---------- */

.sup-kennzahlen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin: 0;
	text-align: center;
}
@media (min-width: 768px) {
	.sup-kennzahlen {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Jede Kennzahl: Icon oben, Zahl in der Mitte, Label unten —
   im Markup steht dt (Label) vor dd (Zahl) für sinnvolle
   Screenreader-Reihenfolge; order dreht nur die Optik */
.sup-kennzahl {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sup-kennzahl__icon  { order: 1; }
.sup-kennzahl__wert  { order: 2; }
.sup-kennzahl__label { order: 3; }

.sup-kennzahl__icon {
	height: 26px;               /* Icons lt. Export 26×26 */
	margin-bottom: 12px;
	color: var(--wp--preset--color--green, #1E9B6B);
}
.sup-kennzahl__icon svg {
	height: 100%;
	width: auto;
	display: block;
}

.sup-kennzahl__wert {
	font-size: 2.5rem;               /* 40 lt. Node */
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1;
	margin: 0;
}

.sup-kennzahl__label {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);  /* 15 ✓ lt. Node */
	font-weight: 500;
	line-height: 1.5;
	color: #C7D4E3;                  /* lt. Node; nicht in Foundations */
}

/* ---------- CTA „Persönliche Beratung" ---------- */

/* Mobil: Sektions-Padding 44/44 statt 60/60 lt. Node (!important gegen
   Inline-Style); Abstand Logo → Button verdichtet (16 = Platzhalter,
   Node-Messung ausstehend) */
@media (max-width: 767px) {
	.sup-cta-beratung .wp-block-image {
		margin-bottom: 16px;
	}
	.sup-cta-beratung .wp-block-buttons {
		margin-top: 0;
	}
}

/* ---------- Unsere Leistungen ---------- */

ul.sup-leistungen-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;                      /* Abstand zwischen Einträgen lt. Node */
}
.sup-leistungen-liste li {
	position: relative;
	padding-left: 19px;             /* 7px Punkt + 12px Gap lt. Node */
	margin: 0;
}
.sup-leistungen-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;                     /* optisch mittig zur Titelzeile — feinjustieren */
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--green, #1E9B6B);
}
.sup-leistungen-liste li strong {
	color: var(--wp--preset--color--navy, #0C2440);
	font-weight: 600;               /* T62 11: Titel/Jahreszahlen Semi Bold */
}

/* Pfeil-Links — EINE Regel für alle (T62 17), auch Desktop:
   Arrow-Links, Zurück-Link, Mitgliedschaften. 15/600/1.4 Grün.
   Selektor spiegelt Astras .ast-single-post .entry-content a
   (0-2-1) — gleiche Spezifität, spätere Datei gewinnt */
.sup-arrow-link,
.sup-back-link {
	line-height: 1.4;
}
[data-ast-blocks-layout] .sup-arrow-link a,
[data-ast-blocks-layout] .sup-back-link a,
[data-ast-blocks-layout] .sup-mitglied-liste a {
	color: var(--wp--preset--color--green, #1E9B6B);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
/* Hover der Pfeil-Links: siehe „T62 Runde 2 – Links" am Dateiende */

/* ---------- Bewertungs-Section (§5.1) ---------- */

ul.sup-bewertungen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1098px;
	margin: 40px auto 0;            /* 40 = Abstand H2 → Karten lt. Node */
	padding: 0;
	list-style: none;
}
@media (max-width: 767px) {
	ul.sup-bewertungen {
		grid-template-columns: 1fr;
	}
}

/* Karte: Outline-Treatment lt. Surface-Regelwerk — kein Schatten */
.sup-bewertung-karte {
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid var(--wp--preset--color--border, #E0E8F0);
	border-radius: 12px;
	padding: 28px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.sup-bewertung-logo svg,
.sup-bewertung-logo img {
	height: 24px;                   /* Logo-Regel §5.1: feste Höhe, natürliche Breite */
	width: auto;
	display: block;
}

.sup-bewertung-karte .sup-bewertung-score {
	font-size: 2.5rem;              /* 40 Bold lt. Node — wie Kennzahlen-Zahl */
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--navy, #0C2440);
	margin: 0;
}

/* Anteilige Sterne: zwei identische Reihen übereinander,
   die volle wird per width-Prozent beschnitten (4,7 = 94%) */
.sup-sterne-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sup-sterne {
	position: relative;
	width: 102px;                   /* 5×18 + 4×3 Gap lt. Node */
	height: 18px;
}
.sup-sterne-reihe {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 3px;
}
.sup-sterne-reihe svg {
	width: 18px;
	height: 18px;
	flex: none;
}
.sup-sterne-leer  { color: var(--wp--preset--color--border, #E0E8F0); }
.sup-sterne-voll  {
	color: #FF9933;
	overflow: hidden;
}

.sup-sterne-wrap .sup-bewertung-anzahl {
	font-size: 0.9375rem;
	line-height: 1;        /* Box = Zeichenhöhe → Flex-Zentrierung trifft optisch */
	color: var(--wp--preset--color--slate, #647584);
	margin: 0;
}

/* ---------- Werte-Liste ---------- */

ul.sup-werte {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;                      /* Startwert — Spaltenabstand Redesign */
	list-style: none;
	margin: 40px auto 0 !important; /* 40 = Abstand H2 → Grid lt. Node */
	padding: 0;
	max-width: 1140px !important;   /* Redesign: Präsentationsbreite — HTML-Block kennt kein alignwide */
}

ul.sup-werte > li + li {
	border-left: 1px solid var(--wp--preset--color--border, #E0E8F0);
	padding-left: 40px;             /* Startwert — symmetrisch zum Gap */
}

@media (max-width: 767px) {
	ul.sup-werte {
		grid-template-columns: 1fr;
		gap: 24px;                  /* Startwert Redesign */
	}
	ul.sup-werte > li + li {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border, #E0E8F0);
		padding-left: 0;
		padding-top: 24px;          /* Startwert Redesign */
	}
}

.sup-wert-icon {
	margin-bottom: 24px;            /* Startwert — am Node messen */
}
.sup-wert-icon svg {
	width: 48px;
	height: 48px;
	display: block;
}

ul.sup-werte h3 {
	font-size: 1rem;                /* Display/H3 Card: 16 Bold lt. Typo-Tabelle */
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--navy, #0C2440);
	margin: 0 0 8px;
}
ul.sup-werte p {
	line-height: 1.5;
	margin: 0;
}

/* ---------- Auszeichnungen & Mitgliedschaften ---------- */

ul.sup-auszeichnungen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 24px 0 0;               /* Abstand H2 → Leiste lt. Node */
	padding: 0;
}
ul.sup-auszeichnungen img {
	max-height: 95px;               /* Slot-Höhe lt. Node */
	width: auto;
	display: block;
}
/* Querformat-Logos (HAV): niedrigere Normhöhe als die Hochformat-Badges */
ul.sup-auszeichnungen img.sup-logo-quer {
	max-height: 42.5px;
}

/* Standard-Sektionen: mobil 44/44 lt. Briefing §2.5
   (Klasse sup-section an jeder Sektionsgruppe; Ausnahme Hero 32/44) */
@media (max-width: 767px) {
	.sup-section {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}
}

/* ---------- Leistungsseite ---------- */

/* Volltrenner zwischen Prosa-Blöcken (780×1, Border-Token).
   Astras height:0-Reset wird per Attribut-Spiegel geschlagen */
[data-ast-blocks-layout] .wp-block-separator.sup-divider {
	width: 100%;
	max-width: 780px;
	height: 1px;
	background-color: var(--wp--preset--color--border, #E0E8F0);
	border: 0;
	margin: 32px auto;              /* Startwert — Blockabstand am Node messen */
	opacity: 1;
}

/* --- Hero-Bild (Startseite + Team): Seitenverhältnis lt. Node --- */
.sup-hero-img img {
	width: 100%;
	aspect-ratio: 10 / 3 !important;   /* Desktop 1200×360 */
	object-fit: cover;
}

@media (max-width: 767px) {
	.sup-hero-img img {
		aspect-ratio: 16 / 9 !important;   /* Mobil 390×219 */
	}
}

/* Mobil-Ausschnitt nach rechts verschieben (Motiv rückt nach links), z. B. Karriere.
   Zusatzklasse am Bild-Block: sup-hero-mobil-rechts — Wert lt. Figma feinjustieren */
@media (max-width: 767px) {
	.sup-hero-img.sup-hero-mobil-rechts img {
		object-position: 70% 50%;
	}
}

/* Bio-Heroes mobil: Bildausschnitt je Person lt. Figma
   (gemessen bei 390 px; Prozentwerte gelten für alle Mobilbreiten).
   Zusatzklasse am Bild-Block. Bei neuem Porträt neu messen. */
@media (max-width: 767px) {
	.sup-hero-img.sup-hero-pos-schulz img      { object-position: 53.5% 50%; }
	.sup-hero-img.sup-hero-pos-korth img       { object-position: 62.5% 50%; }
	.sup-hero-img.sup-hero-pos-langenstein img { object-position: 59% 50%; }
	.sup-hero-img.sup-hero-pos-klimke img      { object-position: 59.5% 50%; }
}

/* Hero-Bild: Desktop Container-Breite (1200) auf Light-Fläche, mobil Full-Bleed */
figure.sup-hero-img {
	background-color: var(--wp--preset--color--light, #F4F7FA);
}

@media (min-width: 768px) {
	.sup-hero-img img {
		display: block;
		width: min(1200px, 100%) !important;
		margin-left: auto;
		margin-right: auto;
		border-radius: 0 0 12px 12px;
	}
}

/* --- Seiten-Heroes ohne bzw. unter dem Foto (Leistungen, Team, Bios, Karriere) ---
   Einheitlich lt. Figma: Desktop 40/60, mobil 32/44.
   !important schlägt Astras 48er-Default für Gruppen mit Hintergrund
   und alte Inline-Werte aus dem Editor */
	 .sup-leistungen-hero,
	 .sup-team-hero {
	 	padding-top: 40px !important;
	 	padding-bottom: 60px !important;
	 }
	 @media (max-width: 767px) {
	 	.sup-leistungen-hero,
	 	.sup-team-hero {
	 		padding-top: 32px !important;
	 		padding-bottom: 44px !important;
	 	}
	 }

	 /* Rechtsseiten-Kopf (Impressum, Datenschutz …): nur H1, daher
	    symmetrisch — Desktop 40/40, mobil 32/32 */
	 .sup-content-hero {
	 	padding-top: 40px !important;
	 	padding-bottom: 40px !important;
	 }
	 @media (max-width: 767px) {
	 	.sup-content-hero {
	 		padding-top: 32px !important;
	 		padding-bottom: 32px !important;
	 	}
	 }

/* Zeilenhöhe lt. Team-Node 110 % — nach Stil-Klärung ggf. zentralisieren */
.sup-team-hero h1 {
	line-height: 1.1;
}

/* --- Team: Anwälte-Grid --- */
.sup-team-card img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border, #E0E8F0);
}

.sup-team-card h3 {
	font-size: 16px;
	font-weight: 700;               /* T62 18.5 */
	line-height: 1.3;
	margin: 12px 0 4px;          /* Startwerte — Karten-Gaps am Node prüfen */
}

.sup-team-card p {
	font-size: 13px;
	line-height: 1.25;
	margin: 0 0 4px;
	color: var(--wp--preset--color--body, #425568);
}

/* Startwert — Sektions-Gap vor „Weiteres Team", am Node zu verifizieren */
.sup-team-grid {
	margin-bottom: 40px;
}

/* --- Team: Weiteres Team --- */

.sup-team-mini {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sup-team-mini img {
	width: 72px !important;
	height: 90px !important;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--border, #E0E8F0);
	flex: 0 0 auto;
}

.sup-team-mini .wp-block-image,
.sup-team-mini figure {
	flex: 0 0 72px;
	width: 72px;
	margin: 0;
}

.sup-team-mini h3 {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 4px;
}

.sup-team-mini p {
	font-size: 13px;
	line-height: 1.25;
	margin: 0;
	color: var(--wp--preset--color--body, #425568);
}

.sup-team-mini-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.sup-team-mini-grid > .sup-team-mini,
[data-ast-blocks-layout] .sup-team-mini-grid > .sup-team-mini {
	margin: 0;
}

.sup-team-mini > *,
[data-ast-blocks-layout] .sup-team-mini > * {
	margin: 0 !important;
}

.sup-team-mini-grid,
[data-ast-blocks-layout] .sup-team-mini-grid {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (max-width: 767px) {
	.sup-team-mini-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Karriere-CTA --- */
.sup-karriere-cta h2 {
	margin-bottom: 12px;    /* Startwert — Frame-Gap am Node prüfen */
}

.sup-karriere-cta .wp-block-buttons {
	margin-top: 24px;       /* Startwert */
}

/* --- Bio: Profil-Link-Liste --- */
.sup-link-liste p {
	margin: 0;
}

.sup-link-liste p + p {
	margin-top: 8px;        /* gap 8 lt. Node */
}

/* Liste direkt nach H2 (z. B. Bio-Werdegang): Gap lt. Node */
h2 + .sup-leistungen-liste,
[data-ast-blocks-layout] h2 + .sup-leistungen-liste {
	margin-top: 12px;
}

/* --- Bio: Autoren-Zitat (Navy) --- */
.sup-zitat blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.sup-zitat blockquote::before {
	content: '„';
	display: block;
	font-size: 52px;
	font-weight: 700;
	line-height: 0.6;
	color: var(--wp--preset--color--green, #1E9B6B);
	margin-bottom: 16px;
}

.sup-zitat blockquote p {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--white, #FFFFFF);
	margin: 0 0 12px;
}

.sup-zitat blockquote cite,
.sup-zitat .wp-block-quote__citation {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	font-style: normal !important;
	color: var(--wp--preset--color--green, #1E9B6B) !important;
}

/* --- Bio: Publikationen --- */
.sup-pub-item {
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px solid var(--wp--preset--color--border, #E0E8F0);
}

.sup-pub-item h3 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 4px;
}

.sup-pub-item p:not(.sup-arrow-link) {
	font-size: 13px;                /* T62 18.6 */
	line-height: 1.3;
	color: var(--wp--preset--color--slate, #647584);
	margin: 0;
}

.sup-pub-item .sup-arrow-link {
	margin: 8px 0 0;
}

/* --- Karriere: Stellen-Karten --- */
.sup-stellen-karte {
	background-color: var(--wp--preset--color--light, #F4F7FA);
	border: 1px solid var(--wp--preset--color--border, #E0E8F0);
	border-radius: 12px;
	padding: 20px;
}

.sup-stellen-karte h3 {
	font-size: 16px;                /* T62 18.1 */
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 4px;
}

.sup-stellen-karte p {
	font-size: 15px;                /* T62 18.2: Teaser 15/400/1.5 */
	line-height: 1.5;
	margin: 0;
}

.sup-stellen-karte p:first-of-type {
	font-size: 13px;
	line-height: 1.4;               /* Meta-Zeile bleibt unverändert */
	color: var(--wp--preset--color--slate, #647584);
	margin-bottom: 12px;
}

.sup-stellen-karte .sup-arrow-link,
[data-ast-blocks-layout] .sup-stellen-karte .sup-arrow-link {
	margin-top: 12px;
}

/* --- Karriere: Ansprechpartner-Mail --- */
.sup-team-mini .sup-mail-link {
	margin-top: 4px;
}

.sup-team-mini .sup-mail-link a,
[data-ast-blocks-layout] .sup-team-mini .sup-mail-link a {
	color: var(--wp--preset--color--green, #1E9B6B);
	font-weight: 400;               /* T62 18.3 */
	text-decoration: none;
}

/* --- Stellen-Detail: Hero ---
   Lt. Figma: oben 16, Zurück-Link → H1 24 (4 + 20), unten 60 (mobil 44).
   !important schlägt Astras 48er-Default für Gruppen mit Hintergrund */
.sup-stellen-hero {
	padding-top: 16px !important;
	padding-bottom: 60px !important;
}
.sup-stellen-hero .sup-back-link {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.sup-stellen-hero .sup-back-link + h1 {
	margin-top: 24px !important;
}

.sup-stellen-hero h1 {
	line-height: 1.1;
}

/* Meta-Zeile „Kiel · …" direkt unter der H1: 15/500/1.5 (T62 18.4).
   !important nötig gegen die Preset-Klasse (has-…-font-size, selbst !important) */
.sup-stellen-hero :is(h1, .sup-akzentstrich) + p {
	 	font-size: 15px !important;
	 	font-weight: 500;
	 	line-height: 1.5;
	 }

@media (max-width: 767px) {
		.sup-stellen-hero {
	 		padding-top: 16px !important;
	 		padding-bottom: 44px !important;
	 	}
}

/* --- Rechts-/Content-Seiten (Impressum, Datenschutz …) --- */

.sup-content-hero h1 {
	line-height: 1.2;
}

.sup-content-body,
[data-ast-blocks-layout] .sup-content-body {
	padding-top: 56px;
	padding-bottom: 56px;
}

.sup-content-body h2 {
	margin: 28px 0 8px;
}

.sup-content-body h2:first-child {
	margin-top: 0;
}

@media (max-width: 767px) {
	.sup-content-body,
	[data-ast-blocks-layout] .sup-content-body {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* --- Smart Header (alle Geräte): aktiver Header fixiert, Primary gleitet hinter die Topbar --- */
body.sup-smart-active #masthead {
	padding-top: var(--sup-header-h, 0px);   /* Platzhalter für den fixierten Header */
}

body.sup-smart-active .sup-smart-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	pointer-events: none;                    /* leere Fläche unter der Topbar nicht blockieren */
}

body.admin-bar.sup-smart-active .sup-smart-header {
	top: var(--wp-admin--admin-bar--height, 32px);   /* eingeloggt: unter die Adminleiste */
}

body.sup-smart-active .sup-smart-header .ast-above-header-wrap {
	position: relative;
	z-index: 2;
	pointer-events: auto;
}

body.sup-smart-active .sup-smart-header .ast-main-header-wrap {
	position: relative;
	z-index: 1;
	pointer-events: auto;
	will-change: transform, opacity;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

body.sup-smart-active .sup-smart-header .ast-mobile-header-content {
	pointer-events: auto;
}

body.sup-smart-hidden .sup-smart-header .ast-main-header-wrap {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s ease-in, opacity 0.2s ease-in;
}

body.sup-smart-active::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 80;                       /* unter dem Header (90), über dem Content */
	background: rgba(12, 36, 64, 0);
	pointer-events: none;
	transition: background 0.3s ease;
}

body.sup-smart-active.sup-menu-open::after {
	background: rgba(12, 36, 64, 0.65);
}

/* Primary Header (Logo-Zeile): Schattenkante lt. Figma statt Trennlinie.
   position/z-index, damit Hero und Content den Schatten nicht überdecken */
#masthead .ast-primary-header-bar {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--white, #FFFFFF);
	border-bottom: 0;
	box-shadow: 0 2px 8px 0 rgba(12, 36, 64, 0.08);
}

/* Header-Zeile: Logo ohne Zusatzluft, damit die Höhe aus dem Customizer
   exakt greift (lt. Figma Desktop 72, mobil 64; Logo vertikal zentriert) */
#masthead .ast-primary-header-bar .ast-site-identity {
	padding-top: 0;
	padding-bottom: 0;
}

/* Topbar: Container der Telefon-Pill ohne Zeilen-/Grundlinienluft */
.ast-above-header-bar .ast-builder-html-element,
.ast-above-header-bar .ast-builder-html-element > p {
	display: flex;
	align-items: center;
	margin: 0;
}

/* Topbar: Telefon-Pill exakt nach Figma (165 × 28) */
.ast-above-header-bar .ast-header-button-1 .ast-custom-button-link {
	display: flex;
}
#masthead .ast-above-header-bar .ast-header-button-1 .ast-custom-button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	border-radius: 100px;
}

/* Topbar mobil: Figma-Höhe 56 px (8 + 40 + 8) */
#ast-mobile-header .ast-above-header-bar .ast-builder-grid-row {
	min-height: 40px;
	align-items: center;
}

/* Stellen-Karten: gesamte Karte klickbar (Stretched Link) */
.sup-stellen-karte,
[data-ast-blocks-layout] .sup-stellen-karte {
	position: relative;
}
.sup-stellen-karte a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Mobilmenü: Trennlinien mit 20 px Einzug links/rechts (Figma „Nav offen") */
#ast-mobile-header .main-header-menu > .menu-item {
	margin-left: 20px;
	margin-right: 20px;
}
#ast-mobile-header .main-header-menu > .menu-item > .menu-link {
	padding: 16px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #0C2440;
}
/* letzter Punkt ohne Trennlinie (wie Figma) */
#ast-mobile-header .main-header-menu > .menu-item:last-child > .menu-link {
	border-bottom: 0;
}

/* Buttons mobil über die volle Lesespalte, Text mittig (Klasse sup-btn-mobil-voll) */
@media (max-width: 767px) {
	.sup-btn-mobil-voll,
.sup-btn-mobil-voll .uagb-buttons__wrap,
.sup-btn-mobil-voll .wp-block-uagb-buttons-child,
.sup-btn-mobil-voll .wp-block-button,
.sup-karriere-cta .wp-block-button {
		width: 100% !important;
		max-width: 100% !important;
	}
	.sup-btn-mobil-voll .uagb-buttons__wrap {
		display: flex !important;
	}
	.sup-btn-mobil-voll .uagb-buttons-repeater,
.sup-btn-mobil-voll .wp-block-button__link,
.sup-karriere-cta .wp-block-button__link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: 100% !important;
	min-height: 52px;
	padding: 0 24px !important;
	box-sizing: border-box;
	text-align: center;
	}
}

/* Bio-Seiten: Mitgliedschaften als Arrow-Link-Liste (Figma „Content/Link") */
.sup-leistungen-liste.sup-mitglied-liste,
[data-ast-blocks-layout] .sup-leistungen-liste.sup-mitglied-liste {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sup-leistungen-liste.sup-mitglied-liste li,
[data-ast-blocks-layout] .sup-leistungen-liste.sup-mitglied-liste li {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0;
	padding-bottom: 0;
}
.sup-mitglied-liste a::after {
	content: " →";
}

/* ==========================================================
   T62 Runde 2 – Interaktionszustände (18b)
   ========================================================== */

/* 18.14 Button Primary-Grün (Recruiting), Hover: #17845B, Label Weiß.
   !important nötig, weil die Preset-Klasse has-green-background-color
   selbst !important setzt */
.wp-block-button .wp-block-button__link.has-green-background-color:hover {
	background-color: #17845B !important;
	border-color: #17845B !important;
	color: #FFFFFF !important;
}

/* 18.13 Button Primary-Orange, Hover: #E88A2A, Label Navy.
   Aktuell keine Instanz auf S&P — Regel vorbereitet */
.wp-block-button .wp-block-button__link.has-orange-background-color:hover {
	background-color: #E88A2A !important;
	border-color: #E88A2A !important;
	color: var(--wp--preset--color--navy, #0C2440) !important;
}

/* --- T62 Runde 2 – Links (nur Inhaltsbereich; Header/Footer bleiben außen vor) --- */

/* 18.17 Fließtext-Links immer unterstrichen (Buttons ausgenommen).
   Offset 4px schon im Ruhezustand, damit die Linie beim Hover nicht springt */
[data-ast-blocks-layout] a:where(:not(.wp-element-button, .uagb-buttons-repeater)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* UI-Links ohne Unterstreichung im Ruhezustand: Pfeil-Links, Zurück-Link,
   Mitgliedschaften, Mail-Link der Ansprechpartner-Karte, Stellen-Karten */
[data-ast-blocks-layout] :is(.sup-arrow-link, .sup-back-link, .sup-mitglied-liste, .sup-mail-link, .sup-stellen-karte) a {
	text-decoration: none;
}

/* 18.16 Alle Links, Hover: Navy + Unterstreichung 2px / Abstand 4px.
   Greift dank Karten-Stretched-Link auch beim Hover über die ganze Stellen-Karte */
[data-ast-blocks-layout] a:where(:not(.wp-element-button, .uagb-buttons-repeater)):hover,
[data-ast-blocks-layout] :is(.sup-arrow-link, .sup-back-link, .sup-mitglied-liste, .sup-mail-link, .sup-stellen-karte) a:hover {
	color: var(--wp--preset--color--navy, #0C2440);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 18.18 Desktop-Navigation, Hover: unterstrichen, Farbe bleibt Navy */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover {
	color: var(--wp--preset--color--navy, #0C2440);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 18.19 Mobilmenü, aktiver Punkt: Zeilenfläche Light, Text Navy.
   box-shadow verlängert die Fläche über den 20-px-Einzug bis an den Rand,
   ohne Layout oder Trennlinien zu verschieben */
#ast-mobile-header .main-header-menu > :is(.current-menu-item, .current-menu-ancestor) > .menu-link {
	background-color: var(--wp--preset--color--light, #F4F7FA);
	box-shadow: -20px 0 0 var(--wp--preset--color--light, #F4F7FA), 20px 0 0 var(--wp--preset--color--light, #F4F7FA);
	color: var(--wp--preset--color--navy, #0C2440);
}

/* ==========================================================
   Complianz-Banner – Variante B (Akzeptieren gefüllt, Ablehnen gerahmt)
   Grundfarben/Radien kommen aus den Complianz-Einstellungen,
   hier nur Typo, Layout und Feinheiten. !important gegen
   Complianz' generiertes Banner-CSS.
   ========================================================== */
.cmplz-cookiebanner {
	font-family: var(--wp--preset--font-family--inter) !important;
	box-shadow: 0 8px 24px rgba(12, 36, 64, 0.12), 0 2px 6px rgba(12, 36, 64, 0.08) !important;
}

/* Kopf: Flex statt Complianz-Raster — Titel links, Schließen rechts, auch mobil */
.cmplz-cookiebanner .cmplz-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}
.cmplz-cookiebanner .cmplz-header .cmplz-logo {
	display: none !important;
}
.cmplz-cookiebanner .cmplz-header .cmplz-title {
	display: block !important;
	flex: 1 1 auto !important;
	text-align: left !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--navy, #0C2440) !important;
}

/* Meldung 14/1.5 */
.cmplz-cookiebanner .cmplz-message {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* Leerzeilen der Einstellungsansicht nur zeigen, wenn die Kategorien offen sind */
.cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-divider,
.cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-links.cmplz-information {
	display: none !important;
}

/* Buttons: Akzeptieren + Ablehnen nebeneinander, Einstellungen darunter —
   flex-direction erzwingt die Zeile auch mobil */
.cmplz-cookiebanner .cmplz-buttons {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	height: 44px !important;
	min-width: 0 !important;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-accept,
.cmplz-cookiebanner .cmplz-buttons .cmplz-deny {
	flex: 1 1 calc(50% - 4px) !important;
	width: auto !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences {
	flex: 1 1 100% !important;
	width: auto !important;
	height: 40px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* Ablehnen: 2-px-Rand, damit er neben dem gefüllten Button nicht verblasst */
.cmplz-cookiebanner .cmplz-buttons .cmplz-deny {
	border-width: 2px !important;
}

/* Links 13 px */
.cmplz-cookiebanner .cmplz-links .cmplz-link {
	font-size: 13px !important;
}

/* Kategorien in der Einstellungsansicht: S&P-Tokens lt. Skizze.
   „Immer aktiv" in #157D56 = 4,76:1 auf Light (AA) — #17845B läge bei 4,35:1 */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: var(--wp--preset--color--light, #F4F7FA) !important;
	border: 1px solid var(--wp--preset--color--border, #E0E8F0) !important;
	border-radius: 8px !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--navy, #0C2440) !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-always-active {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #157D56 !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-icon svg {
	fill: var(--wp--preset--color--navy, #0C2440) !important;
	color: var(--wp--preset--color--navy, #0C2440) !important;
}

/* Schließen-✕: kein Fokusring beim automatischen Fokus, den Complianz beim
   Öffnen setzt — nur bei echter Tastaturbedienung (html.sup-kbd, per JS) */
.cmplz-cookiebanner .cmplz-close:focus-visible {
	outline: none !important;
}
html.sup-kbd .cmplz-cookiebanner .cmplz-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--green, #1E9B6B) !important;
	outline-offset: 2px !important;
}