/*
 * SONTHEIMER – Basis und Komponenten
 * Verwendet ausschließlich die Tokens aus tokens.css. Keine festen Farb-/Größenwerte hier.
 * Maße in Kommentaren = Figma-Design-px (1920er Referenz).
 */

/* ============ Basis ============ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
	margin: 0;
	background: var(--s-white);
	color: var(--s-black);
	font-family: var(--s-font);
	font-weight: var(--w-light);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	letter-spacing: var(--ls-body-lg);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
strong, b { font-weight: var(--w-strong, var(--w-semibold)); }
/* Links – zentral (designsystem.md 19): websiteweit keine Unterstreichung, weder im Ruhezustand noch im Hover.
   Ruhe: Schriftton des Bereichs. Hover/Fokus/aktiv: weicher Wechsel in Gold – auf Hell abgedunkelt, auf Dunkel #af9268.
   Eigene Rollen (Navigation, Buttons, Aktuelles-Kacheln) regeln ihre Farbe selbst. */
a { color: inherit; text-decoration: none; }
:root { --link-hover: var(--s-link-hover-hell); }
.s-header, .s-section--dark, .s-values-band, .s-image { --link-hover: var(--s-link-hover); }
a:not([class]), .s-footer__tel { transition: color var(--dauer-hover) ease; }
a:not([class]):is(:hover, :focus-visible, :active),
.s-footer__tel:is(:hover, :focus-visible, :active) { color: var(--link-hover); }
/* Kontaktangaben: Symbol zieht den Farbwechsel mit */
.s-contact__icon { transition: color var(--dauer-hover) ease; }
.s-contact li:has(a:is(:hover, :focus-visible, :active)) .s-contact__icon { color: var(--link-hover); }
/* Links im Fließtext: ohne Unterstreichung erkennbar durch Schriftschnitt Medium (WCAG 1.4.1 – Hinweis nicht nur über Farbe) */
.s-form__hint a, .wp-block-post-content :is(p, li) a:not([class]) { font-weight: var(--w-medium); }
button { font: inherit; }

/* Sichtbarer Fokus (WCAG 2.4.7 / 2.4.11) */
:focus-visible { outline: 2px solid var(--s-focus-light); outline-offset: 3px; }
.s-section--dark :focus-visible,
.s-header :focus-visible,
.s-image :focus-visible { outline-color: var(--s-focus-dark); }

/* Sprunglink (nur bei Tastaturfokus sichtbar) */
.s-skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 1000;
	padding: 12px 18px; background: var(--s-white); color: var(--s-dark);
	font-weight: var(--w-medium); font-size: 16px; letter-spacing: 0;
}
.s-skip-link:focus { top: 16px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============ Layout ============ */
.s-container { width: var(--container); margin-inline: auto; }

.s-section { padding-block: var(--sp-section-top) var(--sp-section-bottom); }
.s-section--dark { background: var(--s-dark); color: var(--s-white); }
.s-section--light { background: var(--s-white); color: var(--s-black); }
.s-section--sand { background: var(--s-sand); color: var(--s-black); }
.s-section--after-text { padding-bottom: var(--sp-after-text); }   /* Sektion endet mit Text */
.s-section--flush-top { padding-top: 0; }

/* Zweispalter: linke Spalte bis Rasterspalte 5, rechte ab Rasterspalte 6 */
.s-split {
	display: grid;
	grid-template-columns: var(--col-6-start) 1fr;
	align-items: start;
}
.s-split > :first-child { padding-right: var(--grid-gap); }
@media (min-width: 1024px) {
	.s-intro .s-split > :last-child { max-width: var(--col-right-max); }
	.s-expertise .s-split > :first-child { max-width: calc(625 * var(--u)); }   /* Figma: Umbruch „Was die Zusammenarbeit / mit … / im Alltag …“ */
	.s-post__title { max-width: calc(655 * var(--u)); }   /* Roboto-Kalibrierung: Umbrüche wie im Design (Titelbox schmaler als Bild) */
	.s-band__quote-text { max-width: calc(1016 * var(--u)); }   /* Wendeltreppe: Textfläche bis zum rechten Inhaltsrand */
	.s-zusatz .s-lead { max-width: calc(555 * var(--u)); }            /* „Auch für / Arbeitnehmer:innen in / ausgewählten Fragen“ */
	.s-band__claim .s-display--wide { margin-top: calc(22 * var(--u)); }   /* Figma: Claim Leistungen sitzt 11 px unter der Bildmitte */
	.s-dialog__text { margin-right: calc(-20 * var(--u)); }        /* Figma: Textfläche Dialog reicht 20 px über den Inhaltsbereich (Umbruch „… mit Ihrem / Anliegen …“) */
	.s-card--feld .s-card__title { max-width: calc(538 * var(--u)); }   /* Leistungsfelder: Umbruch jeweils nach „&“ (z. B. „Praxis-Workshops & / Inhouse-Schulungen“) */
	.s-form { margin-left: calc(10 * var(--u)); margin-right: calc(-5 * var(--u)); }   /* Figma: Formularfelder x = 150–1785 */
	.s-list--vita {                                   /* Vita zweispaltig: Punkte 1–3 links, 4–6 rechts; eine Liste in Lesereihenfolge */
		display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column;
		column-gap: calc(140 * var(--u)); row-gap: calc(12 * var(--u));
	}
	.s-list.s-list--vita li + li { margin-top: 0; }
}
.s-intro { padding-bottom: var(--sp-after-text); }
.s-split--dialog { grid-template-columns: calc(625 * var(--u)) 1fr; }   /* Dialog: rechte Spalte bei x = 775 */

/* ============ Typografie-Bausteine ============ */
.s-eyebrow {
	font-size: var(--fs-eyebrow);
	line-height: var(--lh-eyebrow);
	font-weight: var(--w-rubrik, var(--w-medium));
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--s-gold);
	margin-bottom: var(--sp-eyebrow);
}
.s-section--light .s-eyebrow,
.s-section--sand .s-eyebrow { color: var(--s-gold-text); }
.s-eyebrow--wide { letter-spacing: var(--ls-eyebrow-wide); }
.s-eyebrow--sm { font-size: var(--fs-eyebrow-sm); line-height: var(--lh-lead); }

.s-lead {                          /* Rolle „Lead“: fette Einleitung/Kurzaussage im Text – SemiBold 40/70 */
	font-size: var(--fs-lead-text, var(--fs-lead));
	line-height: var(--lh-lead-text, var(--lh-body-lg));
	font-weight: var(--w-lead, var(--w-statement, var(--w-semibold)));
}
h1.s-lead { font-size: var(--fs-lead); line-height: var(--lh-body-lg); font-weight: var(--w-h1, var(--w-semibold)); }                       /* Seiten-H1 (Start, Leistungen) */
h3.s-lead, .s-zusatz .s-lead, .s-kontakt .s-lead--tight { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--w-headline, var(--w-semibold)); }   /* Headlines innerhalb der Rubriken */
.s-lead--tight { line-height: var(--lh-lead); }   /* 40/60 */

.s-text p + p,
.s-text p + .s-lead,
.s-text .s-lead + p { margin-top: var(--sp-paragraph); }
.s-text .s-lead + p.s-lead--follow { margin-top: 0; }

.s-display {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	font-weight: var(--w-statement, var(--w-medium));
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
}

/* ============ Header ============ */
.s-header {
	position: relative;
	z-index: 50;
	background: var(--s-dark);
	color: var(--s-white);
	height: var(--header-h);
}
.s-header__inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.s-header__logo { display: block; line-height: 0; margin-left: calc(10 * var(--u)); } /* Figma: Logo bei x = 150, Inhalt bei 140 */
.s-header__logo img { width: max(170px, calc(391 * var(--u))); height: auto; }

.s-nav__list {
	display: flex;
	gap: calc(100 * var(--u));
	list-style: none;
	margin: 0;
	padding: 0;
}
.s-nav__link {
	display: inline-block;
	padding-block: 8px;                                  /* Zielgröße ≥ 24 px (WCAG 2.5.8) */
	font-size: var(--fs-nav);
	line-height: 1.2;
	font-weight: var(--w-medium);
	letter-spacing: var(--ls-nav);
	margin-right: calc(-1 * var(--ls-nav));             /* Laufweite nach letztem Buchstaben ausgleichen */
	text-transform: uppercase;
	text-decoration: none;
	color: var(--s-white);
	transition: color .2s ease;
}
.s-nav__link:hover,
.s-nav__link[aria-current="page"] { color: var(--s-gold); }

.s-nav__toggle { display: none; }

/* ============ Hero (Titelbild mit Wortmarke) ============ */
.s-image { position: relative; overflow: hidden; background: var(--s-dark); }
.s-image picture, .s-image img { width: 100%; height: 100%; }
.s-image img { object-fit: cover; }
.s-image--overlay-25::after,
.s-image--overlay-4375::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.s-image--overlay-25::after { background: var(--s-overlay-25); }
.s-image--overlay-4375::after { background: var(--s-overlay-4375); }

.s-hero { height: var(--hero-h); }
.s-hero__wordmark {
	position: absolute;
	z-index: 1;
	left: 0; right: 0;
	top: 49.5%;                      /* Figma: Oberkante Zeilenbox bei 535,5 von 1082 px */
	margin: 0;
	text-align: center;
	color: var(--s-white);
	font-weight: var(--w-light);
	text-transform: uppercase;
}
.s-hero__wordmark-main {
	display: block;
	font-size: var(--fs-wordmark);
	line-height: var(--lh-wordmark);
	letter-spacing: var(--ls-wordmark);
	padding-left: var(--ls-wordmark);           /* mittig trotz Laufweite */
}
.s-hero__wordmark-main .s-gold { color: var(--s-gold); }
.s-hero__wordmark-sub {
	display: block;
	margin-top: calc(27.5 * var(--u));
	font-size: var(--fs-wordmark-sub);
	line-height: var(--lh-wordmark-sub);
	letter-spacing: var(--ls-wordmark-sub);
	padding-left: var(--ls-wordmark-sub);
}

/* ============ Vollbild / Bild mit Claim ============ */
.s-band { height: var(--image-band-h); }
.s-band__claim {
	position: absolute; z-index: 1; inset: 0;
	display: flex; align-items: center;
	color: var(--s-white);
}
.s-band__claim .s-display { width: var(--container); margin-inline: auto; }

/* ============ Intro / Wertebox ============ */
/* Wertebereich: graue Fläche als durchgehende Bühne über die volle Breite, Werte zentriert darauf */
.s-values-band { background: var(--s-dark-box); padding-block: var(--sp-rhythm); }
.s-values {
	text-align: center;
	color: var(--s-gold);
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	font-weight: var(--w-statement, var(--w-regular));
	letter-spacing: var(--ls-display-values);
	text-transform: uppercase;
}
.s-values { padding-left: var(--ls-display-values); }   /* zentriert trotz Laufweite */

/* ============ Zitat ============ */
.s-quote-wrap { max-width: calc(1120 * var(--u)); }
.s-quote, .s-quote__by { display: inline; }
.s-quote {
	font-size: var(--fs-lead);
	line-height: var(--lh-body-lg);
	font-weight: var(--w-statement, var(--w-semibold));
}
.s-quote__by {
	margin-left: calc(25 * var(--u));
	font-size: var(--fs-body-sm);
	font-weight: var(--w-light);
	white-space: nowrap;
}

/* ============ Karten hell (2er) ============ */
.s-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-card-gap);
	margin-top: var(--sp-block);
}
/* Karten: Höhe aus dem Inhalt (keine feste Mindesthöhe), gleiche Innenabstände */
.s-card {
	background: var(--s-sand);
	padding: var(--sp-card-top) var(--sp-card-x) var(--sp-card-bottom);
}
/* Leistungsfelder: Titel und Liste je Reihe auf gleicher Linie (Subgrid), auch bei unterschiedlich langen Titeln */
.s-cards--felder .s-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.s-card__title {
	font-size: var(--fs-lead);
	line-height: var(--lh-card-title);
	font-weight: var(--w-headline, var(--w-semibold));
	color: var(--s-gold-text);
	margin-bottom: var(--sp-card-title);
	align-self: start;
}
.s-card p { font-size: var(--fs-body-md); line-height: var(--lh-body-md); letter-spacing: var(--ls-body); }
.s-card p + p { margin-top: var(--sp-card-paragraph); }

.s-paragraph-wide { max-width: var(--measure-text, calc(1500 * var(--u))); margin-top: var(--sp-block); }

/* ============ Liste (Expertise) ============ */
.s-list { list-style: none; margin: 0; padding: 0 0 0 calc(11 * var(--u)); }
.s-list li { position: relative; }
.s-list li::before {
	content: "•";
	position: absolute;
	left: calc(-30 * var(--u));
	font-weight: var(--w-semibold);
}

/* ============ Buttons ============ */
.s-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-button); }
.s-button,
.wp-block-button.is-style-sontheimer .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: calc(22 * var(--u));
	min-height: var(--button-h);
	padding: 0 var(--button-px);
	background: var(--s-gold-button);
	color: var(--s-white);
	border: 0;
	border-radius: 0;
	font-size: var(--fs-button);
	line-height: 1.2;
	font-weight: var(--w-semibold);
	letter-spacing: var(--ls-nav);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease;
}
.s-button--mixed, .wp-block-button.is-style-sontheimer.s-button--mixed .wp-block-button__link { text-transform: none; }      /* „Zum Kontaktformular“ – Schreibweise laut Design */
.s-button::after,
.wp-block-button.is-style-sontheimer .wp-block-button__link::after {
	content: "";
	width: max(16px, calc(25 * var(--u)));
	height: max(14px, calc(21 * var(--u)));
	flex: none;
	background: currentColor;
	-webkit-mask: url("../img/pfeil.svg") center / contain no-repeat;
	        mask: url("../img/pfeil.svg") center / contain no-repeat;
	transition: transform .2s ease;
}
.s-button:hover,
.wp-block-button.is-style-sontheimer .wp-block-button__link:hover { background: var(--s-gold-text); color: var(--s-white); }
.s-button:hover::after,
.wp-block-button.is-style-sontheimer .wp-block-button__link:hover::after { transform: translateX(4px); }
.s-actions.wp-block-buttons { gap: 0; }
.s-actions .wp-block-button { display: flex; }   /* keine zusätzliche Zeilenhöhe unter dem Button (Höhe exakt 62) */

/* ============ Dialog ============ */
.s-dialog .s-eyebrow { margin-bottom: var(--sp-group); }   /* „DIALOG“ und Headline bilden eine Gruppe */
.s-dialog__title { margin-bottom: calc(37 * var(--u)); }
.s-contact { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.s-contact li { display: flex; align-items: center; gap: calc(23 * var(--u)); }
.s-contact__icon { width: max(20px, calc(34 * var(--u))); height: auto; flex: none; }
/* Kontaktangaben: Linkgestaltung zentral („Links“, oben) */

/* Dialog-Variante Profil/Leistungen (Figma-Maße dieser Seiten) */

/* ============ Footer ============ */
.s-footer {
	position: relative;
	background: var(--s-sand);
	min-height: var(--footer-h);
	color: var(--s-black);
	overflow: hidden;
}
.s-footer__bg { position: absolute; inset: 0; }
.s-footer__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.s-footer__inner {
	position: relative;
	padding-block: calc(109 * var(--u)) calc(90 * var(--u));
	font-size: var(--fs-footer);
	line-height: var(--lh-footer);
	letter-spacing: var(--ls-body);
}
.s-footer address { font-style: normal; font-weight: var(--w-regular); }
.s-footer__brand { text-transform: uppercase; }
.s-footer__contact { margin-top: calc(30 * var(--u)); font-weight: var(--w-light); }
.s-footer__contact a { display: inline-block; padding-block: 3px; margin-block: -3px; }   /* Zielgröße ≥ 24 px ohne Zeilenversatz – Linkgestaltung zentral („Links“) */
.s-footer__legal {
	margin-top: calc(57 * var(--u));
	font-size: var(--fs-legal);
	line-height: var(--lh-legal);
	letter-spacing: 0;
	font-weight: var(--w-light);
}
.s-footer__legal a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.s-footer__sep { margin-inline: 0.35em; }

/* ============ Nach oben (Zurück zum Seitenanfang) – zentrale Komponente, Skript assets/js/nach-oben.js ============
   Kleiner Pfeil unten rechts, 44 × 44 px Touchfläche, eckig wie alle Bedienelemente. Erscheint erst nach ca. einer Bildschirmhöhe.
   --nach-oben-unten / --nach-oben-rechts: Abstand zum Bildschirmrand – bei Jupus-Chatbot/Cookie-Dialog auf Staging anpassen. */
:root {
	--nach-oben-rechts: max(16px, calc(40 * var(--u)));
	--nach-oben-unten: max(16px, calc(40 * var(--u)));
	--nach-oben-flaeche: rgba(22, 22, 22, 0.78);   /* --s-dark, leicht transparent */
}
.s-nach-oben {
	position: fixed; right: var(--nach-oben-rechts); bottom: var(--nach-oben-unten); z-index: 40;
	display: grid; place-items: center;
	width: 44px; height: 44px; padding: 0;
	background: var(--nach-oben-flaeche); color: var(--s-gold);
	border: 1px solid rgba(175, 146, 104, 0.45); border-radius: 0;
	cursor: pointer;
	opacity: 0; visibility: hidden; translate: 0 8px;
	transition: opacity 400ms ease, translate 400ms ease, visibility 0s linear 400ms, background-color var(--dauer-hover) ease, border-color var(--dauer-hover) ease;
}
.s-nach-oben svg { width: 18px; height: 18px; transition: translate var(--dauer-hover) ease; }
.s-nach-oben.is-sichtbar { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.s-nach-oben:focus-visible { outline: 2px solid var(--s-gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.s-nach-oben:hover { background: var(--s-dark); border-color: var(--s-gold); }
	.s-nach-oben:hover svg { translate: 0 -2px; }
}
@media (prefers-reduced-motion: reduce) {
	.s-nach-oben, .s-nach-oben svg { translate: none; }
}

/* ============ Profil ============ */
.s-display--name {                                   /* „JULIA SONTHEIMER“ – Medium 85/125, Laufweite 45 % */
	font-weight: var(--w-h1, var(--w-medium));
	color: var(--s-gold);
	line-height: 1.4706;
	letter-spacing: 0.45em;
	margin-bottom: var(--sp-title);
}
.s-lead--medium { font-weight: var(--w-lead, var(--w-statement, var(--w-medium))); }
.s-lead.s-lead--gemischt { font-weight: var(--w-lead-rest, var(--w-lead, var(--w-statement, var(--w-semibold)))); }   /* Profil-Lead: erster Satz <strong>, Rest im Lead-Schnitt bzw. --w-lead-rest */

/* Bild mit Zitat (Wendeltreppe) */
.s-band--quote { height: calc(1065 * var(--u)); }
.s-band__quote {
	position: absolute; z-index: 1; left: 0; right: 0;
	bottom: calc(125 * var(--u));
	color: var(--s-white);
}
.s-band__quote-inner { width: var(--container); margin-inline: auto; }
.s-band__quote figure, .s-band--quote { margin: 0; }
.s-band__quote-text { margin: 0; }
.s-band__quote-by { font-style: normal; }
/* Rolle „Bildzitat“ (designsystem.md 16): Zitat Bold, Quellenangabe Light darunter; Breite je Bildkomposition */
.s-band__quote-text {
	margin-left: calc(624 * var(--u));              /* Lage im Bild unverändert (Figma) */
	font-size: var(--fs-quote-img);
	line-height: var(--lh-quote-img);
	font-weight: var(--w-statement, var(--w-medium));
	letter-spacing: var(--ls-quote-img);
	text-wrap: balance;                              /* ruhige, ausgeglichene Zeilen */
}
.s-band__quote-by {
	display: block;
	margin-top: var(--sp-quote-by);
	font-size: var(--fs-quote-by);
	line-height: 1.5;
	font-weight: var(--w-light);
	letter-spacing: var(--ls-quote-by);
}

/* Haltung – 3 dunkle Bildkarten */
.s-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(38 * var(--u)); }
.s-card-dark {
	background: var(--s-dark-raised);
	min-height: calc(947 * var(--u));
	padding: calc(19 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u));
}
.s-card-dark__img { aspect-ratio: 487 / 378; overflow: hidden; }
.s-card-dark__img img { width: 100%; height: 100%; object-fit: cover; }
.s-card-dark__title {
	margin: calc(38 * var(--u)) 0 calc(5 * var(--u)) calc(6 * var(--u));
	font-size: var(--fs-lead);
	line-height: var(--lh-card-title);
	font-weight: var(--w-headline, var(--w-semibold));
	color: var(--s-gold);
}
.s-card-dark p {
	margin-left: calc(6 * var(--u));
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	letter-spacing: var(--ls-body);
}

/* Vita */
.s-vita__name { font-weight: var(--w-light); }
.s-vita__name strong { font-weight: var(--w-strong, var(--w-semibold)); }
.s-list--vita {
	margin-top: var(--sp-paragraph);
	padding-left: calc(63 * var(--u));
}
.s-list--vita li + li { margin-top: calc(12 * var(--u)); }
.s-list--vita li::before { left: calc(-33 * var(--u)); font-weight: var(--w-light); font-size: 0.6em; line-height: 2.9; }

/* Leistungsmodelle */
.s-model + .s-model { margin-top: var(--sp-teil); }
.s-model__title { margin-bottom: 0; }
.s-model__sub {
	margin-top: calc(-9 * var(--u));
	font-size: max(15px, calc(30 * var(--u)));
	line-height: var(--lh-body-md);
	font-weight: var(--w-rubrik, var(--w-medium));
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--s-gold);
}
.s-model__text { margin-top: calc(28 * var(--u)); }

/* Aktuelles – gesetzte Beiträge, zwei Spalten */
.s-aktuelles { padding-bottom: var(--sp-after-text); }
.s-posts {
	display: grid;
	grid-template-columns: calc(750 * var(--u)) calc(750 * var(--u));
	column-gap: calc(97 * var(--u));
	row-gap: calc(68 * var(--u));   /* Kacheln zeilenweise 1 | 2, 3 | 4 … (DOM- = Tastatur- = Lesereihenfolge) */
	margin-top: var(--sp-block);
	align-items: start;
}
.s-post { display: block; text-decoration: none; color: var(--s-black); }
.s-post__img { aspect-ratio: 750 / 400; overflow: hidden; background: var(--s-sand); }
.s-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.s-post__title {
	margin-top: calc(45 * var(--u));
	font-size: var(--fs-lead);
	line-height: var(--lh-card-title);
	font-weight: var(--w-headline, var(--w-bold));
	color: var(--s-gold-text);
	letter-spacing: var(--ls-body);
}
.s-post__sub { margin-top: calc(13 * var(--u)); font-size: var(--fs-body-md); line-height: var(--lh-body-md); letter-spacing: var(--ls-body); }
.s-post__date { display: block; margin-top: calc(3 * var(--u)); font-size: var(--fs-meta); line-height: 2.5; letter-spacing: var(--ls-body); }
/* Aktuelles-Kacheln: Hover der Headline siehe motion.css (Rolle „Aktuelles“) */
.s-post:hover .s-post__img img { transform: scale(1.02); }

/* Q&A-Liste (nur freigegebene Einträge) */
.s-qa__list { border-top: 1px solid var(--s-offwhite); }
.s-qa__item {
	display: grid;
	grid-template-columns: var(--col-6-start) 1fr;
	align-items: center;
	min-height: calc(159 * var(--u));
	padding-block: calc(30 * var(--u));
	border-bottom: 1px solid var(--s-offwhite);
}
.s-qa__q {
	padding-right: var(--grid-gap);
	font-size: var(--fs-lead);
	line-height: var(--lh-card-title);
	font-weight: var(--w-headline, var(--w-semibold));
	color: var(--s-gold);
	letter-spacing: var(--ls-body);
}
.s-qa__a { font-size: var(--fs-body-md); line-height: var(--lh-body-md); letter-spacing: var(--ls-body); }

/* Sektionen mit besonderem Anfang/Ende (Rhythmus-Tokens, designsystem.md 16) */
.s-hero + .s-section { padding-top: calc(var(--sp-opening) - var(--trim-eyebrow)); }      /* Seitenöffnung nach dem Headerbild */
.s-hero + .s-profil-intro { padding-top: calc(var(--sp-opening) - var(--trim-display)); }
.s-profil-intro { padding-top: calc(var(--sp-rhythm) - var(--trim-display)); }   /* beginnt mit „JULIA SONTHEIMER“ */
.s-modelle, .s-leistungen-intro { padding-bottom: var(--sp-after-text); }          /* enden mit Text */

/* ============ Leistungen ============ */
.s-display--wide { letter-spacing: 0.35em; }        /* Claim „JURISTISCHE KLARHEIT …“ (Figma 0,35 em) */

/* Intro: Titel 3-zeilig, „Leistungen“ (H1) links, Text rechts ab x = 799 */
.s-leistungen-intro .s-split { grid-template-columns: calc(654 * var(--u)) 1fr; }

/* Formen der Zusammenarbeit */
.s-formen__title { font-size: var(--fs-lead); line-height: var(--lh-body-lg); font-weight: var(--w-headline, var(--w-medium)); color: var(--s-gold); letter-spacing: var(--ls-body-lg); }
.s-formen p + .s-formen__title,
.s-formen p + p { margin-top: var(--sp-paragraph); }

/* Die Leistungsfelder – 6 helle Karten (2er-Raster 790 × 655, Abstand 55) */
.s-cards--felder { margin-top: 0; }
.s-list--feld { padding-left: calc(31 * var(--u)); font-size: var(--fs-body-md); line-height: var(--lh-body-md); letter-spacing: var(--ls-body); }
.s-list--feld li + li { margin-top: calc(12 * var(--u)); }
.s-list--feld li::before { left: calc(-22 * var(--u)); font-weight: var(--w-light); }

/* Zusatzleistung – Zweispalter und 6 Zeilen (nicht verlinkt) */
.s-split--zusatz { grid-template-columns: calc(625 * var(--u)) 1fr; }
.s-zusatz__intro { font-size: var(--fs-body-md); line-height: 2; letter-spacing: var(--ls-body); }   /* 30 / 60 */
.s-zeilen { margin-top: var(--sp-block); border-top: 1px solid var(--s-offwhite); }
.s-zeile {
	display: grid;
	grid-template-columns: var(--col-6-start) 1fr;
	align-items: center;
	min-height: calc(159 * var(--u));
	padding-block: calc(30 * var(--u));
	border-bottom: 1px solid var(--s-offwhite);
}
.s-zeile__title {
	padding-right: var(--grid-gap);
	font-size: var(--fs-lead);
	line-height: var(--lh-card-title);
	font-weight: var(--w-headline, var(--w-semibold));
	color: var(--s-gold);
	letter-spacing: var(--ls-body);
}
.s-zeile__text { font-size: var(--fs-body-md); line-height: var(--lh-body-md); letter-spacing: var(--ls-body); }

/* ============ Kontakt ============ */
.s-kontakt__h1 {                                     /* „Kontakt“ – Gold SemiBold 40/70 */
	font-size: var(--fs-lead);
	line-height: var(--lh-body-lg);
	font-weight: var(--w-strong, var(--w-semibold));   /* „Kontakt“ Bold (Freigabe 03.10.) */
	letter-spacing: var(--ls-body);
	color: var(--s-gold);
	margin-bottom: var(--sp-group);
}
.s-leistungen-intro h1.s-lead { font-weight: var(--w-strong, var(--w-semibold)); }   /* „Leistungen“ Bold, analog zu „Kontakt“ (Freigabe 03.10.) */
.s-kontakt__rechts { padding-top: calc(5 * var(--u)); }
.s-kontakt__betont { font-weight: var(--w-strong, var(--w-semibold)); }
.s-contact--large { margin-top: var(--sp-block); font-size: var(--fs-contact, var(--fs-body-lg)); line-height: var(--lh-contact, var(--lh-body-lg)); letter-spacing: var(--ls-contact, var(--ls-body-lg)); }   /* Rolle „Kontaktangaben“ */
.s-contact--large li { gap: max(16px, calc(60 * var(--u))); }
.s-contact--large .s-contact__icon { width: max(18px, 0.85em); }   /* Symbol proportional zur Rolle Kontaktangaben (85 % der Schriftgröße) */
.s-kontakt .s-kontakt__formtitel { margin-top: var(--sp-teil); }   /* zweite Rubrik in derselben Sektion */

/* Formular: Felder #fafafa, eckig – 1636 × 100, 2 × 800 × 100 (Abstand 36), Nachricht 1636 × 666; Beschriftungen immer sichtbar (designsystem.md 7) */
.s-form__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(36 * var(--u)); row-gap: max(20px, calc(35 * var(--u))); }
.s-field--name, .s-field--nachricht { grid-column: 1 / -1; }
.s-field__label {
	display: block;
	margin-bottom: max(6px, calc(12 * var(--u)));
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--w-regular);
	letter-spacing: var(--ls-body);
	color: var(--s-offwhite);
}
.s-field__input {
	display: block;
	width: 100%;
	height: max(48px, calc(100 * var(--u)));
	margin: 0;
	padding: 0 max(12px, calc(25 * var(--u)));
	background: var(--s-feld-flaeche);   /* nur die Fläche ist transparent, Text bleibt voll deckend (Finetuning 03.10.) */
	color: var(--s-white);
	caret-color: var(--s-white);
	color-scheme: dark;
	border: 1px solid var(--s-feld-kontur);
	border-radius: 0;
	outline: 1px solid transparent; outline-offset: 0;
	transition: border-color var(--dauer-hover) ease, outline-color var(--dauer-hover) ease;
	font-family: var(--s-font);
	font-size: var(--fs-eingabe);          /* Eingabetypografie zentral: Roboto Light, 18 / 17 / 16 px, Zeilenhöhe 1,5 */
	line-height: var(--lh-eingabe);
	font-weight: var(--w-light);
	letter-spacing: var(--ls-body);
	-webkit-appearance: none;
	appearance: none;
}
textarea.s-field__input { height: max(200px, calc(666 * var(--u))); padding-block: max(10px, calc(20 * var(--u))); resize: vertical; }
/* Fokus: goldene Kontur (Rahmen + 1 px Umriss = 2 px, ohne Layoutverschiebung, ohne Schatten) */
.s-field__input:focus { border-color: var(--s-gold); outline: 1px solid var(--s-gold); outline-offset: 0; }
.s-field.is-invalid .s-field__input { border-color: var(--s-gold); }   /* Fehler: Goldkontur + Fehlertext mit Symbol am Feld */
/* Browser-Autofill: gleiche Fläche und weiße Schrift statt Browser-Gelb/-Blau */
.s-field__input:-webkit-autofill,
.s-field__input:-webkit-autofill:hover,
.s-field__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--s-white);
	-webkit-box-shadow: 0 0 0 1000px var(--s-feld-autofill) inset;
	box-shadow: 0 0 0 1000px var(--s-feld-autofill) inset;
	caret-color: var(--s-white);
	transition: background-color 9999s ease 0s;
}
/* Autofill-Vorschau und -Text in derselben Schrift (Chrome/Safari setzen sonst eigene Systemschrift) */
.s-field__input:-webkit-autofill::first-line { font-family: var(--s-font); font-size: var(--fs-eingabe); font-weight: var(--w-light); }
.s-field__error {
	display: flex; gap: 10px; align-items: flex-start;
	margin-top: 10px;
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	letter-spacing: var(--ls-body);
	color: var(--s-offwhite);
}
.s-field__error[hidden], .s-form__summary[hidden] { display: none; }
.s-field__icon { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.2em; }
.s-form__summary {
	margin-bottom: max(24px, calc(40 * var(--u)));
	padding: 16px 24px;
	border: 2px solid var(--s-gold);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
	letter-spacing: var(--ls-body);
	color: var(--s-offwhite);
}
.s-form__summary ul { margin: 8px 0 0; padding-left: 1.2em; }
.s-form__summary:focus { outline: 2px solid var(--s-gold); outline-offset: 3px; }
.s-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-form__hint {
	margin-top: max(20px, calc(35 * var(--u)));
	font-size: var(--fs-meta);          /* Fußnotenhinweis: kleiner und zurückgenommen (Finetuning 03.10.) */
	line-height: var(--lh-hint);
	letter-spacing: var(--ls-body);
	color: var(--s-white-75);
}
.s-field__req { font-size: var(--fs-meta); color: var(--s-white-75); }   /* „(Pflichtfeld)“ kleiner und dezenter als die Beschriftung */
.s-form__actions { display: flex; justify-content: center; margin-top: var(--sp-button); }
.s-button--senden { justify-content: center; width: max(200px, calc(315 * var(--u))); min-height: max(48px, calc(92 * var(--u))); padding: 0; cursor: pointer; }
.s-button--senden::after { display: none; }
.s-form-done { padding-block: max(24px, calc(40 * var(--u))); }
.s-form-done:focus { outline: none; }
.s-form-done .s-lead { margin-bottom: 8px; }

/* ============ Responsiv ============ */
@media (max-width: 1023px) {
	.s-cards-3 { grid-template-columns: 1fr; gap: 24px; }
	.s-card-dark { min-height: 0; display: grid; grid-template-columns: 40% 1fr; column-gap: 24px; padding: 16px; }
	.s-card-dark__img { grid-row: span 2; }
	.s-card-dark__title { margin-top: 8px; }
	.s-posts { grid-template-columns: 1fr 1fr; column-gap: 24px; }
	.s-band__quote-text { margin-left: 0; max-width: none; }
	.s-qa__item { grid-template-columns: 1fr; gap: 8px; }
	.s-zeile { grid-template-columns: 1fr; gap: 8px; }
	.s-split, .s-split--dialog, .s-leistungen-intro .s-split, .s-split--zusatz { grid-template-columns: 1fr; }
	.s-split > :first-child { padding-right: 0; margin-bottom: var(--sp-paragraph); }
	.s-cards { grid-template-columns: 1fr; }
	.s-list--feld li + li { margin-top: 8px; }
	.s-zeile { min-height: 0; padding-block: 20px; }
	.s-quote-wrap { max-width: none; }
	.s-paragraph-wide { max-width: none; }
	.s-list { padding-left: 22px; }
	.s-list li::before { left: -20px; }
}

@media (max-width: 767px) {
	.s-card-dark { grid-template-columns: 1fr; }
	.s-card-dark__img { grid-row: auto; }
	.s-posts { grid-template-columns: 1fr; row-gap: 40px; }
	.s-display--name { letter-spacing: 0.15em; }
	.s-band--quote { height: auto; aspect-ratio: 4 / 5; }
	.s-band__quote { bottom: 32px; }
	.s-list--vita { padding-left: 24px; }
	.s-list--vita li::before { left: -20px; }
	:root { --header-h: 72px; }
	.s-header__logo img { width: 170px; }

	/* Mobilmenü */
	.s-nav__toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 48px; height: 48px; margin-right: -12px;
		background: none; border: 0; color: var(--s-white); cursor: pointer;
	}
	.s-nav__toggle-bars, .s-nav__toggle-bars::before, .s-nav__toggle-bars::after {
		display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: transform .2s ease, opacity .2s ease;
	}
	.s-nav__toggle-bars::before, .s-nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
	.s-nav__toggle-bars::before { top: -7px; }
	.s-nav__toggle-bars::after { top: 7px; }
	.s-nav__toggle[aria-expanded="true"] .s-nav__toggle-bars { background: transparent; }
	.s-nav__toggle[aria-expanded="true"] .s-nav__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
	.s-nav__toggle[aria-expanded="true"] .s-nav__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

	.s-nav__panel {
		display: none;
		position: absolute; left: 0; right: 0; top: var(--header-h);
		background: var(--s-dark);
		padding: 8px 20px 28px;
		border-top: 1px solid rgba(250, 250, 250, .15);
	}
	.s-nav.is-open .s-nav__panel { display: block; }
	.s-nav__list { flex-direction: column; gap: 4px; }
	.s-nav__link { padding-block: 12px; font-size: 18px; }

	/* gesperrte Versalien: geringere Laufweite, damit nichts überläuft (WCAG 1.4.10) */
	.s-eyebrow--wide { letter-spacing: 0.15em; }
	.s-eyebrow { letter-spacing: 0.12em; }
	.s-display { letter-spacing: 0.08em; }
	.s-values { letter-spacing: 0.15em; padding-left: 0.15em; font-size: 28px; }

	.s-hero, .s-band { height: auto; aspect-ratio: 4 / 5; }
	.s-band--plain { aspect-ratio: 4 / 5; }
	.s-hero__wordmark { top: auto; bottom: 14%; }
	.s-band__claim { align-items: flex-end; padding-bottom: 40px; }

	.s-quote__by { display: block; margin: 8px 0 0; white-space: normal; }
	.s-actions { justify-content: stretch; }
	.s-button, .s-actions .wp-block-button, .wp-block-button.is-style-sontheimer .wp-block-button__link { width: 100%; justify-content: space-between; }
	.s-button, .wp-block-button.is-style-sontheimer .wp-block-button__link { letter-spacing: 0.08em; padding: 10px 18px; line-height: 1.3; text-align: left; }   /* Schriftgröße bleibt 18,75 px (Kontrast „große Schrift“), lange Texte dürfen umbrechen */

	.s-form__grid { grid-template-columns: 1fr; }
	.s-button--senden { width: 100%; justify-content: center; }
	/* Kontaktangaben Smartphone: über Token --fs-contact (tokens.css) */
	.s-footer { min-height: 0; }
	.s-footer__inner { padding-block: 56px 40px; }
}

/* Textbreite für Fließtext über die volle Containerbreite (nur gesetzt, wenn das Designsystem --measure-text definiert) */
.s-profil-intro .s-text > p,
.s-profil .s-text > p,
.s-formen .s-container > p,
.s-aktuelles .s-container > p,
.s-vita__name,
.s-model__text { max-width: var(--measure-text, none); }
.s-list--vita { max-width: var(--measure-vita, var(--measure-text, none)); }
.s-profil-intro .s-text > p.s-lead,
.s-profil .s-text > p.s-lead { max-width: var(--measure-lead, var(--measure-text, none)); }

/* ============ Beitragsvorlage (Blogartikel, designsystem.md 22) ============
   Minimal: globaler Header, Datum, Artikel in einer Lesespalte auf der Inhaltsachse, globaler Footer.
   Bestehende Inhalte bleiben unverändert; die Typografie kommt ausschließlich aus dem Designsystem –
   alte Inline-Formate aus Enfold/Editor (Farben, Schriftschnitte, Schriftgrößen) wirken deshalb nicht. */
.s-beitrag { padding-bottom: var(--sp-section-bottom); }   /* endet mit dem Kontakt-Button */
.s-beitrag__spalte { max-width: var(--measure-beitrag); }
.s-beitrag__datum { display: block; font-size: var(--fs-meta); line-height: 2.5; letter-spacing: var(--ls-body); }
.s-beitrag__titel,
.s-beitrag__inhalt h1 {
	margin-top: var(--sp-group);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	font-weight: var(--w-headline);
	letter-spacing: var(--ls-body);
	color: var(--s-black);
}
.s-beitrag__spalte > * { margin-block: 0; }   /* Abstände nur aus dem Designsystem, nicht aus dem WordPress-Standardabstand */
.s-beitrag__titel { margin-bottom: calc(var(--sp-beitrag-abschnitt) * 0.7); }
.s-beitrag__inhalt > h1:first-child + * { margin-top: calc(var(--sp-beitrag-abschnitt) * 0.7); }
.s-beitrag__inhalt h2 {
	margin-top: var(--sp-beitrag-abschnitt);
	font-size: var(--fs-beitrag-h2);
	line-height: var(--lh-lead);
	font-weight: var(--w-headline);
	letter-spacing: var(--ls-body);
	color: var(--s-gold-text);          /* Bold ≥ 18,7 px = große Schrift (WCAG), 3,5 : 1 ≥ 3 : 1 */
}
.s-beitrag__inhalt h3,
.s-beitrag__inhalt h4 {
	margin-top: calc(var(--sp-beitrag-abschnitt) * 0.7);
	font-size: var(--fs-beitrag-h3);
	line-height: var(--lh-lead);
	font-weight: var(--w-headline);
	letter-spacing: var(--ls-body);
	color: var(--s-black);
}
.s-beitrag__inhalt :is(p, ul, ol, blockquote, figure, table) { margin-top: var(--sp-beitrag-absatz); }
.s-beitrag__inhalt :is(h2, h3, h4) + :is(p, ul, ol, blockquote, figure, table) { margin-top: calc(var(--sp-beitrag-absatz) * 0.6); }
.s-beitrag__inhalt > :first-child:not(h1) { margin-top: 0; }
.s-beitrag__inhalt :is(p, li) { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.s-beitrag__inhalt :is(ul, ol) { padding-left: 1.4em; }
.s-beitrag__inhalt li + li,
.s-beitrag__inhalt li > :is(ul, ol) { margin-top: 0.35em; }
.s-beitrag__inhalt li::marker { color: var(--s-gold-text); }
.s-beitrag__inhalt li[style*="list-style-type: none"]::marker { content: none; }
.s-beitrag__inhalt blockquote { margin-inline: 0; padding-left: 1.2em; border-left: 2px solid var(--s-gold); }
.s-beitrag__inhalt figure img { height: auto; }
.s-beitrag__inhalt table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-md); }
.s-beitrag__inhalt :is(th, td) { padding: 0.5em 0.75em 0.5em 0; border-bottom: 1px solid var(--s-sand); text-align: left; vertical-align: top; }
/* Altformate neutralisieren: Inline-Farben/-Schnitte und Schriftgrößen-Klassen aus Enfold bzw. dem Editor */
.s-beitrag__inhalt [style*="color"] { color: inherit !important; }
.s-beitrag__inhalt :is(h1, h2, h3, h4)[style*="font-weight"] { font-weight: var(--w-headline) !important; }
.s-beitrag__inhalt :is(p, li)[style*="font-weight"] { font-weight: var(--w-light) !important; }
.s-beitrag__inhalt :is(h1, h2, h3, h4) :is(strong, b) { font-weight: inherit; }
.s-beitrag__inhalt [class*="-font-size"] { font-size: inherit !important; }
.s-beitrag__inhalt :is(p, li)[class*="-font-size"] { font-size: var(--fs-body-lg) !important; }
/* Standard-CTA am Beitragsende (Teil der Vorlage): linksbündig an der Textachse, Abstand wie Inhalt → Button */
.s-actions--start { justify-content: flex-start; }
.s-beitrag__spalte > .s-beitrag__cta { margin-top: var(--sp-button); }

/* ============ Rechtstexte (Impressum, Datenschutz – designsystem.md 23) ============
   Gleiche Lesespalte und Typografie wie die Beitragsvorlage, ohne Datum und ohne CTA.
   Die Texte stecken teils in alten Container-Divs eines früheren Baukastens; diese bleiben, tragen aber keine Gestaltung. */
.s-rechtstext .s-beitrag__inhalt h1 { margin-top: 0; }
.s-rechtstext .s-beitrag__inhalt h1 + * { margin-top: calc(var(--sp-beitrag-abschnitt) * 0.7); }
.s-rechtstext .s-beitrag__inhalt div > :first-child:not(h1, h2, h3) { margin-top: 0; }
.s-rechtstext .s-beitrag__inhalt div + div > :is(h2, h3):first-child { margin-top: var(--sp-beitrag-abschnitt); }
.s-rechtstext .s-beitrag__inhalt div + div > p:first-child { margin-top: var(--sp-beitrag-absatz); }
.s-rechtstext .s-beitrag__inhalt [style*="font-size"] { font-size: inherit !important; }
.s-rechtstext .s-beitrag__inhalt [style*="text-align"] { text-align: inherit !important; }
.s-rechtstext .s-beitrag__inhalt hr { height: 0; border: 0; border-top: 1px solid var(--s-sand); margin: var(--sp-beitrag-abschnitt) 0 0; }
.s-rechtstext .s-beitrag__inhalt hr + :is(h2, h3) { margin-top: var(--sp-beitrag-abschnitt); }
.s-rechtstext .s-beitrag__inhalt a:not([class]) { overflow-wrap: anywhere; }
/* H1 am Artikelanfang: fester Abstand zum Datum (WordPress setzt das erste Element sonst auf 0) – 1.2.4 */
.s-beitrag__inhalt > h1:first-child { margin-top: var(--sp-group); }
.s-rechtstext .s-beitrag__inhalt > h1:first-child { margin-top: 0; }

/* Impressum: Credits (Konzeption/Bildnachweise) – dezent abgesetzt am Ende, alle Geräte (05.10.2026) */
.s-rechtstext .s-rt-credits { margin-top: var(--sp-beitrag-abschnitt); padding-top: calc(var(--sp-beitrag-abschnitt) * 0.7); border-top: 1px solid var(--s-sand); }
.s-rechtstext .s-rt-credits > :first-child { margin-top: 0; }

/* ============ Nur Smartphone (05.10.2026) – Desktop und Tablet unverändert ============ */
@media (max-width: 767px) {
	/* Rechtstexte: zusammengehörende Zeilen (Adresse, Kontakt) als Block, fette Absätze als Zwischenüberschrift */
	.s-rechtstext .s-beitrag__inhalt .s-rt-zeile + .s-rt-zeile { margin-top: 0; }
	.s-rechtstext .s-beitrag__inhalt .s-rt-titel { margin-top: calc(var(--sp-beitrag-abschnitt) * 0.7); }
	.s-rechtstext .s-beitrag__inhalt .s-rt-titel + * { margin-top: calc(var(--sp-beitrag-absatz) * 0.6); }
	/* Footer: „© … Sontheimer.Arbeitsrecht“ in Zeile 1, „Impressum | Datenschutz“ in Zeile 2 – der erste Trenner wird zum Zeilenumbruch */
	.s-footer__legal > .s-footer__sep:not(.s-footer__sep ~ .s-footer__sep) { display: block; height: 0; margin: 0; overflow: hidden; }
}

/* Wortmarke „groß“ im Titelbild – nur Profil und Kontakt (Baustein-Attribut wortmarke: gross, 08.10.2026).
   Gleiche Position, Schrift, Laufweite und Farben; nur die Größe kommt aus den eigenen Tokens. */
.s-hero--wortmarke-gross .s-hero__wordmark-main { font-size: var(--fs-wordmark-gross); }
.s-hero--wortmarke-gross .s-hero__wordmark-sub { font-size: var(--fs-wordmark-gross-sub); }

/* ============ Profil: Kooperation & Karriere, Leistungen: Q&A-Kapitel (08.10.2026) – nur bestehende Bausteine ============ */
.s-kooperation .s-container > p,
.s-karriere .s-container > p { max-width: var(--measure-text, none); }
.s-kooperation .s-container > p + p { margin-top: var(--sp-paragraph); }
.s-cards--3 { grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-block); }
@media (max-width: 1023px) { .s-cards--3 { grid-template-columns: 1fr; } }
/* Q&A als eigenes Kapitel (Dienstvertragsrecht): Rubrik + Unterzeile als Gruppe, dann die Liste */
.s-qa--kapitel .s-eyebrow { margin-bottom: var(--sp-group); }
.s-qa__unterzeile { margin-bottom: var(--sp-eyebrow); font-size: var(--fs-lead); font-weight: var(--w-headline, var(--w-semibold)); color: var(--s-white); }

/* Große Desktop-Breiten (> 1440 px, 08.10.2026): Bildflächen behalten ihre Höhe (812 px), werden aber breiter –
   dadurch beschneidet object-fit: cover oben und unten stärker. Nur Bilder mit eigenem Fokuspunkt („fokus_breit“
   in inc/bilder.php, Personen mit Kopf weit oben) werden vertikal anders ausgerichtet. Bis 1440 px entsteht kein
   zusätzlicher Beschnitt, die Ausrichtung ist dort wirkungslos – 1440 px, Tablet und Smartphone bleiben unverändert. */
@media (min-width: 1441px) {
	.s-image img[style*="--bild-fokus-breit"],
	.s-footer__bg img[style*="--bild-fokus-breit"] { object-position: var(--bild-fokus-breit); }
}
/* Profil-Titelbild (> 1440 px): Höhe wächst mit der Breite weiter wie bis 1440 px (1082 / 1920), damit Kopf und Wortmarke
   in derselben Komposition wie bei 1440 px stehen – nur Titelbilder mit „proportional_breit“, andere Seiten unverändert. */
@media (min-width: 1441px) {
	.s-hero:has(img[data-breit-proportional]) { height: calc(100vw * 1082 / 1920); }
}

/* ============ Final Polish (12.10.2026) – nur bestehende Rollen ============ */
/* Leistungen: kompakter Kontakt-Aufruf nach den Leistungsfeldern (Rolle Lead + Fließtext + Standard-CTA) */
.s-cta-kompakt { margin-top: var(--sp-block); max-width: var(--measure-text, none); }
.s-cta-kompakt__frage { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--w-headline, var(--w-semibold)); }
.s-cta-kompakt__text { margin-top: calc(var(--sp-paragraph) * 0.4); }
.s-cta-kompakt .s-actions { justify-content: flex-start; margin-top: calc(var(--sp-button) * 0.7); }
@media (max-width: 767px) { .s-cta-kompakt .s-actions { justify-content: stretch; } }
/* Profil: „Legal Partner on Demand / Gezielte Unterstützung“ auf Sand (12.10.2026) – Rhythmus hell/dunkel nach Verschiebung von „Karriere & Netzwerk“.
   Rubrik in Gold für hellen Grund (bestehende Regel), Unterzeile im dunkleren Gold für Text auf Hell (≥ 4,5 : 1). */
.s-section--sand .s-model__sub { color: var(--s-link-hover-hell); }
/* Footer als kompakte „Visitenkarte“ (12.10.2026), einspaltig – Abstände gezielt zwischen den Gruppen, gemessen als sichtbarer
   Abstand zwischen den Textzeilen: Adresse → Telefon ca. 22 px · Telefon → E-Mail → Website ca. 5 px · Website → Icons ca. 9 px ·
   Icons → © / Impressum / Datenschutz ca. 27 px. LinkedIn und Instagram eng nebeneinander (ca. 9 px). Bild und Texte unverändert. */
.s-footer__contact { margin-top: 18px; line-height: 1.5; }
.s-footer__social { display: flex; align-items: center; gap: 3px; margin-top: 7px; }   /* sichtbarer Abstand der Symbole ca. 9 px (inkl. Zielflächen-Rand je 3 px) */
.s-footer__social a { display: inline-flex; padding: 3px; margin: -3px 0; color: var(--s-black); transition: color var(--dauer-hover) ease; }
.s-footer__social a:first-child { margin-left: -3px; }   /* Symbol bündig zur Textkante, Zielfläche 24 px */
.s-footer__social a:is(:hover, :focus-visible, :active) { color: var(--link-hover); }
.s-footer__social svg { width: 18px; height: 18px; display: block; }
.s-footer__legal { margin-top: 20px; }
@media (max-width: 767px) {
	/* © / Impressum / Datenschutz ist mobil zweizeilig: Zeilenhöhe kompakter, Abschlussabstand zu den Icons bleibt ca. 27 px */
	.s-footer__legal { line-height: 1.6; margin-top: 24px; }
}