/* ==========================================================================
   Falk Stockhorst — ergaenzende Regeln

   Was hier NICHT hingehoert: Farben, Schriftgroessen, Abstaende, Layoutbreiten.
   Die stehen in theme.json und kommen als CSS Custom Properties heraus
   (--wp--preset--color--accent usw.). Diese Datei traegt nur, was theme.json
   nicht ausdruecken kann: Zustaende, Feinlayout, Bewegung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Fokus fuer die Tastatur

   Fehlte in den Entwuerfen vor S206 komplett — ohne Maus war die Seite nicht
   bedienbar. :focus-visible statt :focus, damit Mausklicks keinen Rahmen
   hinterlassen, die Tab-Navigation aber immer einen sichtbaren hat.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--custom--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.has-dark-background-color :focus-visible,
.has-dark-2-background-color :focus-visible,
.fs-footer :focus-visible {
	outline-color: var(--wp--custom--focus-on-dark);
}

/* Sprungmarke zum Inhalt — WordPress liefert den Link, das Theme die Sichtbarkeit */
.skip-link:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: 0.75rem 1.25rem;
	border-radius: 8px;
	z-index: 100000;
}

/* --------------------------------------------------------------------------
   2 · Kopfbereich
   -------------------------------------------------------------------------- */
.fs-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

@supports not (backdrop-filter: blur(1px)) {
	.fs-topbar { background: var(--wp--preset--color--base); }
}

.fs-topbar .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.fs-topbar .wp-block-site-title a:hover {
	color: var(--wp--custom--accent-text);
}

.fs-brand .wp-block-site-logo img {
	border-radius: 8px;
}

.fs-nav .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition: color 0.18s var(--wp--custom--ease);
}

.fs-nav .wp-block-navigation a:hover,
.fs-nav .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--ink);
}

/* Der CTA im Kopf ist kleiner als ein Fliesstext-Button — sonst dominiert er die Zeile */
.fs-nav__cta .wp-block-button__link {
	padding: 0.6rem 1.1rem;
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   3 · Fussbereich
   -------------------------------------------------------------------------- */
.fs-footer a {
	color: var(--wp--preset--color--on-dark-link);
	text-decoration: none;
}

.fs-footer a:hover {
	color: var(--wp--custom--on-dark-link-hover);
	text-decoration: underline;
}

.fs-footer__list {
	list-style: none;
	padding-left: 0;
	margin: 0.6rem 0 0;
}

.fs-footer__list li + li {
	margin-top: 0.4rem;
}

.fs-footer__rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin: 2.5rem 0 1.5rem;
}

/* --------------------------------------------------------------------------
   4 · Interaktions-Prinzip (Falk-Vorgabe S206)

   Jedes klickbare Element braucht eine Rueckmeldung. Hover geht immer Richtung
   mehr Kontrast: auf heller Flaeche dunkler, auf dunkler Flaeche heller.
   :active gibt zusaetzlich eine taktile Rueckmeldung.
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.18s var(--wp--custom--ease),
	            color 0.18s var(--wp--custom--ease),
	            transform 0.12s var(--wp--custom--ease);
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

/* Zweitrangiger Button: Rahmen statt Flaeche, fuellt sich beim Hover */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--accent);
	color: var(--wp--custom--accent-text);
	background: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--custom--accent-text-hover);
}

/* Auf dunklem Grund kehrt sich das um */
.has-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-dark-2-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--on-dark-link);
	color: var(--wp--preset--color--on-dark);
}

.has-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-dark-2-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--on-dark-link);
	color: var(--wp--preset--color--dark-2);
}

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

/* --------------------------------------------------------------------------
   5 · Karten und Flaechen
   -------------------------------------------------------------------------- */
.fs-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-card);
	transition: box-shadow 0.22s var(--wp--custom--ease),
	            transform 0.22s var(--wp--custom--ease),
	            border-color 0.22s var(--wp--custom--ease);
}

/* Nur anklickbare Karten heben sich an — sonst verspricht die Bewegung eine
   Interaktion, die es nicht gibt */
a.fs-card:hover,
.fs-card:has(a:hover) {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--hover);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   6 · Wiederkehrende Textrollen
   -------------------------------------------------------------------------- */

/* Kleine Kennzeichnung ueber einer Ueberschrift */
.fs-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

/* Lesbarkeit: Fliesstext bekommt eine Zeilenlaenge, keine Bildschirmbreite */
.fs-measure {
	max-width: var(--wp--custom--messwert);
}

.fs-stars {
	color: var(--wp--preset--color--star);
	letter-spacing: 2px;
}

/* Rechtstexte: enger Zeilenabstand waere hier falsch, die Absaetze sind lang */
.fs-legal .wp-block-post-content > * {
	max-width: 78ch;
}

.fs-legal h2 {
	margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   7 · Bilder
   -------------------------------------------------------------------------- */
img,
svg {
	max-width: 100%;
	height: auto;
}

/* Die Professor-Motive sind freigestellt und brauchen einen Bodenschatten,
   sonst schweben sie. Als CSS statt eingebrannt, damit er zur Flaeche passt. */
.fs-motiv {
	position: relative;
}

.fs-motiv img {
	position: relative;
	z-index: 1;
}

.fs-motiv::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2%;
	width: 62%;
	height: 14px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center,
	            rgba(20, 24, 26, 0.20) 0%,
	            rgba(20, 24, 26, 0.08) 45%,
	            rgba(20, 24, 26, 0) 72%);
	filter: blur(2px);
	z-index: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   8 · Abschnitte (Patterns)
   -------------------------------------------------------------------------- */

/* Abschnitts-Breite.

   theme.json setzt contentSize auf 760px — richtig fuer Fliesstext, zu schmal fuer
   Abschnitte. Die Sektionen ziehen deshalb auf wideSize. Umgesetzt hier statt im
   Blockmarkup, damit die Breite an EINER Stelle steht und nicht in jedem Pattern. */
.fs-hero > .wp-block-columns,
.fs-trustbar__row,
.fs-leistungen > *,
.fs-cta > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
}

/* Im CTA-Band bleibt der Fliesstext lesbar schmal — aber linksbuendig an der
   Abschnitts-Kante, nicht mittig eingerueckt.

   S210: vorher stand hier margin-left:0. Das hat WordPress' eigene Zentrierung
   (margin-left:auto auf 1100px) ueberschrieben, und der Text klebte am
   Fensterrand bei 24 px — waehrend jeder Abschnitt darueber bei 170 px begann
   (gemessen, 1440er Fenster). Falk: "mit der Schrift auch erst anfangen wie es
   bei den anderen Elementen auch ist."

   Statt 0 jetzt genau der Abstand, der den Inhalt auf die 1100er-Kante schiebt.
   Sobald das Fenster schmaler als 1100 ist, wird der Term negativ und max()
   faengt ihn auf 0 ab — dann gilt wieder der Rand des Bandes. */
.fs-cta.wp-block-group > p,
.fs-cta.wp-block-group > h2,
.fs-cta.wp-block-group > .wp-block-buttons {
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important;
	margin-right: auto !important;
}

.fs-cta.wp-block-group > p {
	max-width: 52ch;
}

.fs-cta.wp-block-group > h2 {
	max-width: 22ch;
}

/* Trust-Bar — genau drei Punkte. Bei vier bricht die Zeile auf jeder Breite um,
   das war der Befund aus S207. */
.fs-trustbar__item {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.fs-trustbar__item strong {
	color: var(--wp--preset--color--ink);
}

/* Leistungsraster: zwei Reihen, die erste breiter. Auto-fit statt fester
   Spaltenzahl, damit zwischen den Breakpoints nichts zerreisst. */
.fs-bento {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.25rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Sieben Kacheln, die frueher als 2+3+2 mit drei verschiedenen Breiten standen
   (S209, Falk: „die Kaesten sollten moeglichst gleich gross sein"). Das las sich
   zufaellig statt gestaltet. Jetzt: die dunkle Beratungs-Kachel als Anker ueber
   die volle Breite, darunter zwei Reihen aus je drei identischen Kacheln.
   Eine Hervorhebung, sechs Gleiche — statt sieben Sondergroessen. */
@media (min-width: 900px) {
	.fs-bento {
		grid-template-columns: repeat(6, 1fr);
	}

	.fs-bento > .fs-tile:nth-child(1) { grid-column: span 6; }
	.fs-bento > .fs-tile:nth-child(n + 2) { grid-column: span 2; }

	/* Die Kacheln der beiden Dreierreihen sind gleich hoch — die Anker-Kachel
	   nicht, sie ist flach und breit. */
	.fs-bento > .fs-tile:nth-child(n + 2) {
		min-height: 210px;
	}
}

.fs-tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* WordPress zentriert jedes Kind eines constrained-Layouts:

     :where(.is-layout-constrained) > :where(:not(.alignleft)…) {
       margin-left: auto !important; margin-right: auto !important; }

   In einer Flex-Spalte schrumpfen die Ueberschriften auf ihre Textbreite und
   werden dadurch mittig gesetzt — sie sollen aber am linken Kachelrand stehen.
   Weil die Kernregel selbst !important traegt, hilft hoehere Spezifitaet nicht;
   nur dasselbe Mittel kommt dagegen an. */
.fs-tile.wp-block-group > *,
.fs-tile.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	align-self: stretch;
	max-width: none;
}

.fs-tile > *:first-child {
	margin-top: 0;
}

/* Der Weiterlese-Link sitzt immer unten, egal wie lang der Text darueber ist */
.fs-tile__go {
	margin-top: auto;
	padding-top: 0.75rem;
	font-weight: 600;
}

.fs-tile__go a {
	text-decoration: none;
}

.fs-tile__go a:hover {
	text-decoration: underline;
}

.fs-tile--dark .fs-tile__go a {
	color: var(--wp--preset--color--on-dark-link);
}

/* Hinweis-Pille ueber einer Kachel-Ueberschrift */
.fs-pill {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 20px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--custom--accent-text-hover);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
}

/* Hero */
.fs-hero__title {
	text-wrap: balance;
}

.fs-motiv-card {
	box-shadow: var(--wp--preset--shadow--karte);
}

/* --------------------------------------------------------------------------
   Hero-Grafiken der Leistungsseiten (S210)

   Falk: im Kopf jeder Leistungsseite gehoert eine Grafik zur Dienstleistung,
   keine Professor-Figur. Die sieben Grafiken stammen aus den Entwuerfen
   (entwurf-leistungsseite-*.html) und sind als Inline-SVG gesetzt — nicht als
   Datei, weil sie ihre Farben aus den Theme-Variablen ziehen und ein <img>
   die nicht erbt. Ausserdem verweigert WordPress SVG-Uploads.
   -------------------------------------------------------------------------- */
.fs-motiv-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Die Beschriftungen in den Grafiken: dieselbe Mono-Schrift wie in den
   Entwuerfen, damit Achsen- und Stationsnamen nicht wie Fliesstext wirken. */
/* Alle Beschriftungen ueber einen Kamm: einige Grafiken tragen font-size als
   Attribut im SVG (10.5 bis 12), das war nach der Schrift-Anhebung in S210 der
   kleinste Text der Seite. CSS schlaegt das Praesentationsattribut.

   NUR die Groesse — die Farbe gehoert der Grafik. Beim ersten Versuch stand
   hier auch fill: muted, und weil CSS das Attribut schlaegt, wurde jede
   Beschriftung grau: weisse Schrift auf dem gruenen Balken kam auf 1,37:1
   (Falk, gleiche Stunde: "Kontrast im Kasten rechts im gruenen Element zu
   gering"). Ein Eingriff, der mehr kaputt macht als er richtet. */
.fs-motiv-svg text {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px;
}

.fs-motiv-svg .m-label {
	fill: var(--wp--preset--color--muted);
}

.fs-motiv-svg .m-label-b {
	font-size: 13.5px;
	font-weight: 600;
}

/* Der Bodenschatten aus Abschnitt 4 gilt den freigestellten Figuren. Unter
   einem Diagramm waere er ein Schatten ohne Koerper. */
.fs-motiv--grafik::after {
	content: none;
}

/* CTA-Band: der Innenabstand kommt vom Block, der Text bleibt lesbar schmal */
.fs-cta > * {
	max-width: 46ch;
}

.fs-cta .wp-block-buttons {
	max-width: var(--wp--style--global--wide-size);
}

/* --------------------------------------------------------------------------
   9 · Leistungsseiten
   -------------------------------------------------------------------------- */

/* Der Abschnitt selbst wird zentriert, nicht nur sein Inhalt.

   fs-sektion traegt align:full im Block, ist per max-width aber auf 1100
   begrenzt — beides zusammen ist widerspruechlich. WordPress zieht jedes
   alignfull-Kind mit margin-left:-24px aus dem Innenabstand des Elternteils
   heraus; bei einem Element, das trotzdem nur 1100 breit wird, klebt es
   dadurch links statt in der Mitte zu stehen. Auf "Ueber mich" begann der
   Abschnitt so bei 0 statt bei 170 px (S210, Falk: Ausrichtungsfehler).
   Der zweite Selektor schlaegt die WordPress-Regel um eine Klasse. */
.fs-sektion {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.has-global-padding > .fs-sektion.alignfull {
	margin-inline: auto;
}

.fs-sektion > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
}

/* Zwei- und dreispaltige Raster. auto-fit statt fester Spaltenzahl, damit
   zwischen den Breakpoints nichts zerreisst. */
.fs-grid-2,
.fs-grid-3 {
	display: grid;
	gap: 1.25rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Feste Spaltenzahl statt auto-fit. Gemessen S209: `auto-fit` machte aus
   `.fs-grid-2` bei 1100 px drei Spalten — vier Karten standen dann als 3+1 mit
   einer Waise in der zweiten Zeile. Der Klassenname sagt jetzt die Wahrheit. */
.fs-grid-2 { grid-template-columns: repeat(2, 1fr); }
.fs-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Zaehler vor einer Ueberschrift: Mono, damit die Ziffern gleich breit
   untereinander stehen */
.fs-num {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	color: var(--wp--custom--accent-text);
	margin: 0 0 0.35rem;
	letter-spacing: 0.02em;
}

/* Kundenzitat in den Ausgangslage-Karten */
.fs-zitat {
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.6rem;
	text-wrap: pretty;
}

/* Ablauf: eine Zeile je Schritt, Dauer rechts */
.fs-ablauf {
	display: grid;
	gap: 0.75rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.fs-ablauf__kopf {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin: 0;
	font-weight: 600;
}

.fs-ablauf__kopf .fs-num {
	margin: 0;
}

.fs-ablauf__kopf .fs-dauer {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.fs-ablauf__zeile > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
}

/* FAQ als natives details/summary — aufklappbar ohne eine Zeile JavaScript */
.fs-faq {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-card);
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
}

.fs-faq summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.fs-faq summary::-webkit-details-marker {
	display: none;
}

.fs-faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--wp--custom--accent-text);
	transition: transform 0.2s var(--wp--custom--ease);
}

.fs-faq[open] summary::after {
	content: "−";
}

.fs-faq summary:hover {
	color: var(--wp--custom--accent-text);
}

.fs-faq p {
	color: var(--wp--preset--color--muted);
	margin: 0.75rem 0 0;
	max-width: 64ch;
}

/* --------------------------------------------------------------------------
   10 · Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.fs-topbar__inner {
		gap: 0.75rem;
	}

	/* Der Kopf-CTA verschwindet auf kleinen Schirmen — dort uebernimmt der
	   Abschluss-CTA am Seitenende. Zwei konkurrierende Buttons in einer
	   40-Pixel-Zeile treffen beide nicht. */
	.fs-nav__cta {
		display: none;
	}
}

@media (max-width: 782px) {
	/* Im Hero steht das Motiv unter dem Text, nicht daneben — sonst wird beides
	   zu schmal, um zu wirken */
	.fs-hero .wp-block-column {
		flex-basis: 100% !important;
	}

	.fs-bento > .fs-tile:nth-child(-n + 3) {
		min-height: 0;
	}
}

@media (max-width: 600px) {
	.fs-footer__top {
		gap: 2rem;
	}

	.fs-trustbar__row {
		gap: 0.6rem;
	}

	.fs-cta {
		border-radius: 0;
	}
}

/* --------------------------------------------------------------------------
   11 · Logo

   Als Inline-SVG im Header statt als Site-Logo aus der Mediathek: WordPress
   verweigert SVG-Uploads aus gutem Grund (sie koennen Skripte enthalten), und
   inline spart den Request. Die Wortmarke liegt als Pfade vor — der Betrachter
   braucht die Schrift nicht.
   -------------------------------------------------------------------------- */
.fs-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

.fs-logo {
	height: 38px;
	width: auto;
	transition: opacity 0.18s var(--wp--custom--ease);
}

.fs-brand:hover .fs-logo {
	opacity: 0.78;
}

@media (max-width: 600px) {
	.fs-logo { height: 30px; }
}

/* --------------------------------------------------------------------------
   12 · Kontaktformular (WPForms)

   WPForms bringt eigene Styles mit, die nichts von unserem Design wissen —
   der Absende-Knopf kommt in Grau, die Felder in fremden Radien. Hier wird
   das auf die Design-Tokens gezogen, damit das Formular nicht wie ein
   Fremdkoerper auf der Seite sitzt.
   -------------------------------------------------------------------------- */
.wpforms-container {
	margin: 0 !important;
	max-width: none;
}

.wpforms-form .wpforms-field {
	padding: 0 0 1.1rem;
}

.wpforms-form .wpforms-field-label {
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	color: var(--wp--preset--color--ink) !important;
	margin-bottom: 0.4rem !important;
}

.wpforms-form .wpforms-required-label {
	color: var(--wp--custom--bad) !important;
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form select,
.wpforms-form textarea {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 10px !important;
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--ink) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	padding: 0.7rem 0.85rem !important;
	transition: border-color 0.18s var(--wp--custom--ease),
	            box-shadow 0.18s var(--wp--custom--ease);
}

.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-soft) !important;
	outline: none !important;
}

.wpforms-form textarea {
	min-height: 170px;
}

/* Die Einwilligung ist kein gewoehnliches Feld: Kaestchen und Text gehoeren
   auf eine Zeile, der Text bleibt lesbar klein */
.wpforms-form .wpforms-field-checkbox ul li label {
	font-size: 0.9rem !important;
	color: var(--wp--preset--color--muted) !important;
	line-height: 1.5 !important;
}

.wpforms-form .wpforms-field-description {
	font-size: 0.85rem !important;
	color: var(--wp--preset--color--muted) !important;
}

/* Der Absende-Knopf ist derselbe Knopf wie ueberall sonst auf der Seite */
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
	background: var(--wp--preset--color--accent) !important;
	border: 0 !important;
	border-radius: 10px !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	padding: 0.85rem 1.6rem !important;
	cursor: pointer;
	transition: background-color 0.18s var(--wp--custom--ease),
	            transform 0.12s var(--wp--custom--ease);
}

.wpforms-form button[type="submit"]:hover,
.wpforms-form .wpforms-submit:hover {
	background: var(--wp--custom--accent-hover) !important;
}

.wpforms-form button[type="submit"]:active,
.wpforms-form .wpforms-submit:active {
	background: var(--wp--custom--accent-active) !important;
	transform: translateY(1px);
}

.wpforms-form button[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--custom--focus) !important;
	outline-offset: 2px;
}

/* Fehlermeldungen in der Warnfarbe, nicht im WPForms-Rot */
.wpforms-form label.wpforms-error {
	color: var(--wp--custom--bad) !important;
	font-size: 0.85rem !important;
}

.wpforms-form .wpforms-confirmation-container-full {
	background: var(--wp--preset--color--accent-soft) !important;
	border: 1px solid var(--wp--preset--color--accent) !important;
	border-radius: var(--wp--custom--radius-card) !important;
	color: var(--wp--preset--color--ink) !important;
	padding: 1.25rem 1.5rem !important;
}

/* --------------------------------------------------------------------------
   13 · Startseiten-Abschnitte (S209)
   -------------------------------------------------------------------------- */

/* Vier Schritte nebeneinander. Feste Spaltenzahl statt auto-fit: bei vier
   Elementen wuerde auto-fit zwischen den Breakpoints 3+1 stellen — ein
   Waisenkind in der zweiten Reihe. */
.fs-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Die Schritte tragen keine Kartenoptik — sie stehen auf dem hellen Band und
   grenzen sich nur durch die Linie oben ab. Sonst sieht der Abschnitt aus wie
   eine zweite Auflage des Leistungsrasters. */
.fs-schritt {
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 0.9rem;
}

.fs-schritt h3 {
	margin: 0.15rem 0 0.4rem;
}

.fs-schritt p:last-child {
	margin-bottom: 0;
}

/* Bewertungen: die Karten stehen im Raster gleich hoch, deshalb waechst das
   Zitat und die Namenszeile sitzt auf gleicher Grundlinie. */
.fs-stimme {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	height: 100%;
}

.fs-stimme > * {
	margin: 0 !important;
	max-width: none;
}

.fs-stimme .fs-zitat {
	flex: 1;
	text-wrap: pretty;
}

.fs-wer strong {
	color: var(--wp--preset--color--ink);
}

/* Pflichtangabe nach § 5b Abs. 3 UWG — leise, aber lesbar. Nicht entfernen. */
.fs-hinweis {
	max-width: 88ch;
	margin-top: 0.75rem !important;
	line-height: 1.5;
}

/* Passt das fuer dich? — zwei Spalten auf hellem Band. Der Kontrast kommt vom
   Seiten-Hintergrund, die Unterscheidung von der Linie oben. */
.fs-passt__spalte {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}

.fs-passt__spalte--ja {
	border-top: 3px solid var(--wp--preset--color--accent);
}

.fs-passt__spalte--nein {
	border-top: 3px solid var(--wp--preset--color--muted);
}

.fs-passt__spalte h3 {
	margin-top: 0;
}

/* Aufzaehlungen mit Zeichen statt Punkt: das Haekchen traegt hier Bedeutung,
   deshalb steht es im Inhalt und nicht als Hintergrundbild. */
.fs-liste {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.fs-liste li {
	position: relative;
	padding-left: 1.7rem;
	margin-bottom: 0.65rem;
	color: var(--wp--preset--color--muted);
}

.fs-liste li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
}

.fs-liste--ja li::before {
	content: "✓";
	color: var(--wp--custom--accent-text);
}

.fs-liste--nein li::before {
	content: "–";
	color: var(--wp--preset--color--muted);
}

/* FAQ: Aufklapper links, Motiv rechts */
.fs-faq-motiv {
	text-align: center;
}

.fs-faq-motiv img {
	max-width: 220px;
	height: auto;
	margin-inline: auto;
}

/* Sprechblase mit Zipfel — der Zipfel zeigt auf die Figur darunter */
.fs-blase {
	position: relative;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--custom--accent-text-hover);
	border-radius: 14px;
	padding: 0.8rem 1rem;
	margin-bottom: 1.5rem !important;
	text-align: left;
}

.fs-blase::after {
	content: "";
	position: absolute;
	left: 2rem;
	bottom: -9px;
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid var(--wp--preset--color--accent-soft);
}

/* Personen-Teaser */
.fs-person__reihe img {
	max-width: 320px;
	height: auto;
	margin-inline: auto;
	display: block;
}

.fs-person h2 {
	margin-top: 0.2rem;
}

/* Ersteinschaetzung: eine hervorgehobene Flaeche statt eines weiteren Bandes —
   das Angebot soll sich vom Fliesstext der Seite abheben, ohne dem dunklen
   Abschluss-CTA direkt davor die Wirkung zu nehmen. */
.fs-erst__panel {
	box-shadow: var(--wp--preset--shadow--karte);
}

.fs-erst__panel h2 {
	margin-top: 0;
}

.fs-erst__motiv {
	text-align: center;
}

.fs-erst__motiv img {
	max-width: 190px;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.fs-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 782px) {
	/* Die Motive sind Beiwerk: auf schmalen Schirmen kosten sie nur Scrollweg */
	.fs-faq-motiv,
	.fs-erst__motiv {
		display: none;
	}

	.fs-person__reihe img {
		max-width: 220px;
	}
}

@media (max-width: 520px) {
	.fs-grid-4 {
		grid-template-columns: 1fr;
	}
}

/* Alles in den Startseiten-Abschnitten steht linksbuendig — aber an der
   Abschnitts-Kante, nicht am Fensterrand.

   S210, Falk: "Die Startseite hat einige Fehler in den Ausrichtungen."
   Gemessen bei 1440 px: Hero, Trust-Bar und Leistungen begannen bei 170 px,
   diese sechs Abschnitte bei 24 px — 146 px zu weit links, also ein sichtbarer
   Versatz mitten auf der Seite. Ursache war dieselbe wie im CTA-Band: das
   margin-left:0 sollte das Zentrieren verhindern und hat dabei auch die
   Ausrichtung auf die 1100er-Spalte mitgenommen.

   max() loest beides: linksbuendig innerhalb des Abschnitts UND auf derselben
   Kante wie alle uebrigen. Sobald das Fenster schmaler als 1100 ist, faellt der
   Term auf 0 und es gilt wieder der Rand. */
.fs-arbeitsweise > *,
.fs-bewertungen > *,
.fs-passt > *,
.fs-faq-sektion > *,
.fs-person > *,
.fs-erst > * {
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important;
	margin-right: auto !important;
}

/* Leistungsseiten: die Inhalts-Sektionen liefen auf contentSize (760px) und
   standen als schmale Saeule zwischen randlosem Hero und randlosem CTA.
   Gemessen S209. Sie gehoeren auf dieselbe Breite wie das Leistungsraster. */
.fs-sektion {
	max-width: var(--wp--style--global--wide-size) !important;
}

/* Aber: Fliesstext direkt in einer Sektion bleibt auf Lesebreite. 1100px
   Zeilenlaenge liest niemand gern. */
.fs-sektion > p,
.fs-sektion > ul,
.fs-sektion > ol {
	max-width: var(--wp--custom--messwert);
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   14 · Hauptmenue mit Untermenue (S209)
   -------------------------------------------------------------------------- */

/* "Leistungen" ist ein Schalter ohne eigenes Ziel und wird deshalb als <button>
   ausgegeben — der erbt weder Schriftfarbe noch Groesse vom Menue. */
.fs-nav .wp-block-navigation__submenu-icon,
.fs-nav .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-size: inherit;
	transition: color 0.18s var(--wp--custom--ease);
}

.fs-nav .wp-block-navigation-submenu__toggle:hover,
.fs-nav .wp-block-navigation-item:has(.wp-block-navigation__submenu-container a[aria-current]) > .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--ink);
}

/* Die Klappliste als Karte im Theme-Stil statt im WordPress-Grundstil */
.fs-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-card);
	box-shadow: var(--wp--preset--shadow--karte);
	padding: 0.4rem 0;
	min-width: 15rem;
}

.fs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	font-size: 0.95rem;
}

.fs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--custom--accent-text-hover);
}

/* Im aufgeklappten Mobil-Menue steht die Liste flach untereinander — dort waere
   die Karte ein Kasten im Kasten. */
.fs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 0.5rem;
}

.fs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   15 · Raster-Ausrichtung (S209)
   -------------------------------------------------------------------------- */

/* Der Block-Editor setzt jedem Kind einen oberen Abstand (blockGap). In einem
   Raster ist dieser Abstand kein Abstand mehr, sondern ein Versatz: die Karten
   einer Zeile starten dann auf verschiedenen Hoehen und enden nur zufaellig
   buendig. Gemessen S209 bei „Das bekommst du" — 24 px Versatz zwischen der
   ersten und den beiden folgenden Karten. Der Abstand kommt vom Raster (gap),
   nicht von den Kindern. */
.fs-grid-2 > *,
.fs-grid-3 > *,
.fs-grid-4 > *,
.fs-bento > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Karten einer Zeile sind gleich hoch — sonst liest sich das Raster als
   Unordnung, ohne dass man benennen kann, woran es liegt. */
.fs-grid-2,
.fs-grid-3,
.fs-grid-4 {
	align-items: stretch;
}

.fs-grid-2 > .fs-card,
.fs-grid-3 > .fs-card,
.fs-grid-4 > .fs-card,
.fs-grid-2 > .fs-passt__spalte,
.fs-grid-3 > .fs-stimme {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Im Flusslayout tragen die Kinder ihre Abstaende selbst — hier muessen sie
   nach der Nullstellung oben wieder hergestellt werden. */
.fs-grid-2 > .fs-card > * + *,
.fs-grid-3 > .fs-card > * + *,
.fs-grid-4 > .fs-card > * + * {
	margin-top: 0.6rem;
}

/* Der Fliesstext in einer Karte waechst, damit die Fusszeile unten steht */
.fs-grid-2 > .fs-card > p:last-child,
.fs-grid-3 > .fs-card > p:last-child {
	margin-bottom: 0;
}

/* Drei Karten auf zwei Spalten ergeben immer 2+1 — eine Waise. Gemessen S209
   bei 820 px auf acht Abschnitten. Deshalb bleibt das Dreierraster dreispaltig,
   bis der Platz wirklich nicht mehr reicht, und springt dann direkt auf eine
   Spalte. Kein Zwischenschritt, der eine Waise erzeugt. */
@media (max-width: 780px) {
	.fs-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.fs-grid-2 { grid-template-columns: 1fr; }
}

/* Dasselbe fuer das Leistungsraster: unter 900 px greift die Sechs-Spalten-Regel
   nicht mehr, dann standen sieben Kacheln als 2+2+2+1. Die Anker-Kachel nimmt
   jetzt beide Spalten, die sechs uebrigen ergeben glatte Dreierpaare. */
@media (max-width: 899px) {
	.fs-bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.fs-bento > .fs-tile:nth-child(1) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.fs-bento {
		grid-template-columns: 1fr;
	}
}

/* Karten sind jetzt Flex-Spalten (fuer gleiche Hoehen). Damit schrumpfen ihre
   Kinder auf die Inhaltsbreite — und WordPress' `margin-inline: auto` aus dem
   constrained-Layout zentriert sie dann. Erst im Bild gesehen: Nummer und
   Ueberschrift standen mittig, der Fliesstext darunter links. */
.fs-grid-2 > .fs-card > *,
.fs-grid-3 > .fs-card > *,
.fs-grid-4 > .fs-card > *,
.fs-grid-3 > .fs-stimme > *,
.fs-grid-2 > .fs-passt__spalte > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
	align-self: stretch;
}

/* Ausnahme: die Pille ist ein Etikett, kein Absatz — sie behaelt ihre Breite */
.fs-grid-2 > .fs-card > .fs-pill,
.fs-grid-3 > .fs-card > .fs-pill,
.fs-grid-4 > .fs-card > .fs-pill {
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   16 · Kontaktband auf jeder Seite (S209)
   -------------------------------------------------------------------------- */

/* Falks Vorgabe: das Formular gehoert unter jede Seite, damit niemand fuer eine
   Anfrage erst woanders hin springen muss. Der Sprung ist die haeufigste Stelle,
   an der eine Anfrage verloren geht. */

/* S210: gleiche Korrektur wie im CTA-Band. Ueberschrift, Text und Formular
   begannen bei 24 px statt an der Abschnitts-Kante bei 170 px, weil
   margin-left:0 die Zentrierung von WordPress ausgehebelt hat. */
.fs-kontaktband > * {
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important;
	margin-right: auto !important;
}

/* Der Vorspann bleibt auf Lesebreite — die 1100 des Bandes gelten dem Formular,
   nicht dem Fliesstext darueber. */
.fs-kontaktband > p {
	max-width: 62ch;
}

/* Das Formular kommt als Shortcode und traegt seine eigene Breite mit. Ohne
   diese Zeile beginnt es zwar an der richtigen Kante, laeuft rechts aber 146 px
   ueber die Abschnitts-Kante hinaus (gemessen S210: 1246 statt 1100). */
.fs-kontaktband > .wpforms-container {
	max-width: var(--wp--style--global--wide-size);
}

.fs-kontaktband h2 {
	margin-top: 0;
}

/* Das Formular als eigene Flaeche mit Rand — vorher stand es ohne Begrenzung im
   Seitenfluss und wirkte wie loser Text mit Eingabefeldern (Falk, S209). */
.fs-kontaktband .wpforms-container,
.fs-leistung .wpforms-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-card);
	box-shadow: var(--wp--preset--shadow--karte);
	padding: 1.75rem 1.75rem 1.5rem;
	margin-top: 0 !important;
}

@media (max-width: 600px) {
	.fs-kontaktband .wpforms-container,
	.fs-leistung .wpforms-container {
		padding: 1.25rem 1rem 1rem;
	}
}

/* Auswahlfeld und Eingabefelder auf gleiche Hoehe und Breite (S209).
   Vorher: das <select> schnitt seinen eigenen Text unten ab, weil WPForms ihm
   eine feste Hoehe gibt, die zum Innenabstand oben nicht passt. Und die
   Textfelder waren schmaler als das Nachrichtenfeld — im Bild las sich das als
   Treppe statt als Formular. */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form select,
.wpforms-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.wpforms-form select {
	height: auto !important;
	min-height: 3rem;
	line-height: 1.4 !important;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--muted) 50%),
	                  linear-gradient(135deg, var(--wp--preset--color--muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.6rem !important;
}

/* Auf breiten Schirmen stehen die kurzen Felder nebeneinander — ein Formular in
   einer einzigen langen Spalte wirkt laenger als es ist. */
@media (min-width: 720px) {
	.fs-kontaktband .wpforms-form .wpforms-field-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1.25rem;
	}

	.fs-kontaktband .wpforms-form .wpforms-field-textarea,
	.fs-kontaktband .wpforms-form .wpforms-field-checkbox,
	.fs-kontaktband .wpforms-form .wpforms-field-gdpr-checkbox,
	.fs-kontaktband .wpforms-form .wpforms-field-select {
		grid-column: 1 / -1;
	}
}