/* ==========================================================================
   Frauenhaus Südpfalz - Komponentenklassen (.fhs-*)

   Gestaltungsrichtung B "Unter dem Dach" (docs/design-richtung-b.md,
   Stand 08.09.2026). Diese Datei ersetzt das Karten-Kit aus Etappe 1 durch
   ein Layout-System: eine Achse, Linien statt Karten, genau zwei Flächen.

   Grundregeln, die hier durchgesetzt werden:
   - Eine Achse: jede Sektion ist 5/7 geteilt (Überschrift links, haftend ab
     980 px, Inhalt rechts) auf 1240 px. Keine 600-px-Mittelspalte.
   - Volle Breite nur: Hero, FBS-Band, Konto-Element, Footer.
   - Trennung über 1 px Linie (--fhs-linie), nicht über Kartenränder.
   - Radius 6 px nur an Buttons, Formularfeldern und dem Konto-Element.
   - Keine Schatten, keine Verläufe, keine Glasflächen, keine schiefen Kanten,
     keine Icons, keine Pfeile in Buttons, keine Eyebrow-Label.
   - Bewegung nur bei Hover und Fokus.

   Alle Werte kommen aus theme.json über die Aliase in style.css (--fhs-*).
   Klassen-Dokumentation mit Beispiel-Markup: handoff/L/README.md.

   Inhalt
   1.  Sektionen, Achse, Sektionsmarke
   2.  Flächen auf Schiefer, .fhs-hero
   3.  .fhs-notfall         Notfallzeile (ersetzt das Kastenband)
   4.  .fhs-sprachen        Sprach-Einstiege
   5.  .fhs-telefon         Telefon-Element
   6.  .fhs-schritte        Nummerierte Schritte
   7.  .fhs-wege            Zwei Wege
   8.  .fhs-stellen         Anlaufstellen als Liste
   9.  .fhs-konto           Konto-Element auf Schiefer
   10. .fhs-meldungen       Aktuelles
   11. Buttons (zwei Stile) und .fhs-hinweis
   12. .fhs-sticky-bar, .fhs-exit, Header-Aktionen
   13. .fhs-footer
   14. Hilfsklassen, Lesespalte (.fhs-textseite)
   15. Vollflaechen auf der Bahn der Sektionen, Leerzustand Aktuelles
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Eigene Maße dieser Datei

   Die Displaygrößen für Rufnummern und Schrittzahlen stehen nicht in
   theme.json, weil sie keine Überschriften sind. Sie leiten sich aus der
   Skala ab: Nummer groß 40 bis 60 px, Nummer 28 bis 34 px (Vorgabe
   docs/design-richtung-b.md Abschnitt 7, Punkt 9: damals Barlow, seit v1.2 Figtree, etwa 34 px).
   -------------------------------------------------------------------------- */
:root {
	--fhs-fs-nummer-gross: clamp(2.5rem, 1.7935rem + 3.1413vw, 3.75rem);
	--fhs-fs-nummer: clamp(1.75rem, 1.5109rem + 1.0625vw, 2.125rem);
	/* Kleine H2-Stufe (UX-Audit 08.09.2026, Befunde 3 und 5): Ueberschriften in der
	   Lesespalte und im Footer gliedern, tragen aber keine Sektion. Sie laufen in
	   H3-Groesse (22 bis 26 px), damit nur zwei H2-Groessen auf der Seite stehen:
	   Sektions-H2 (30 bis 46 px) und diese. */
	--fhs-fs-h2-klein: var(--fhs-fs-h3);
	/* Sektionsabstand (UX-Audit Befund 9): vorher 2.6rem + 4vw, also 99 px bei
	   1440 px und 112 px ab 1760 px. Jetzt 56 px bis 533 px Viewport, 83 px bei
	   1440 px, 88 px ab 1600 px. Zwei Sektionen trennen damit mindestens 112 px
	   plus Linie; nichts klebt. Obergrenze bewusst im unteren Bereich der Vorgabe
	   (56 bis 112 px, docs/design-richtung-b.md Abschnitt 4). */
	--fhs-sektion-abstand: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
	--fhs-achse-abstand: clamp(2rem, 1.2rem + 3.5vw, 4rem);
	--fhs-haft-abstand: var(--fhs-space-xl);
	/* Eine Hoehe fuer alle Buttons (UX-Audit Befund 4): Kern-Buttons, Exit-Button
	   des Plugins und die Elemente der Aktionsleiste. Vorgabe 52 bis 60 px. */
	--fhs-button-hoehe: 56px;
	/* Hoehe der Aktionsleiste: Button plus Innenabstand oben und unten. */
	--fhs-leiste-hoehe: calc(var(--fhs-button-hoehe) + 2 * var(--fhs-space-s));
	/* Lesespalte: Inhaltsbreite aus theme.json (44 rem), etwa 70 Zeichen. */
	--fhs-lesespalte: var(--wp--style--global--content-size, 44rem);
	/* Linie auf dunklem Grund: Papier mit 28 Prozent Deckkraft, rein dekorativ. */
	--fhs-linie-invers: rgba(255, 252, 249, 0.28);
}

/* --------------------------------------------------------------------------
   1. Sektionen, Achse, Sektionsmarke

   .fhs-sektion            Group-Block, senkrechter Abstand und Seitenrand.
   .fhs-sektion--flaeche   markiert die beiden erlaubten Flächen (FBS-Band,
                           Konto-Element); sie bekommen keine Trennlinie.
   .fhs-achse              Columns-Block mit zwei Spalten im Verhältnis 5/7.
   .fhs-achse__kopf        linke Spalte, enthält nur die Überschrift.
   .fhs-achse__inhalt      rechte Spalte, enthält alles Übrige.
   -------------------------------------------------------------------------- */
.fhs-sektion {
	padding-top: var(--fhs-sektion-abstand);
	padding-bottom: var(--fhs-sektion-abstand);
	padding-left: var(--fhs-space-l);
	padding-right: var(--fhs-space-l);
	/* Nachbesserung 08.09.2026 (gemessen auf der Box): Die Sektionen liefen im
	   Inhaltscontainer (704 px), dadurch blieben der Achse nur 280 px fuer die
	   Ueberschrift und 392 px fuer den Inhalt. Sie brauchen die breite Bahn.
	   WordPress setzt die Begrenzung ueber :where() mit Spezifitaet 0, deshalb
	   genuegt hier die Klasse ohne !important. */
	max-width: var(--wp--style--global--wide-size, 77.5rem);
	margin-left: auto;
	margin-right: auto;
}

/* UX-Audit 08.09.2026, Befund 3 (gemeinsame linke Kante): Im Artikel von
   GeneratePress (.inside-article) hat der Inhalt schon einen Seitenrand, und
   der Seitentitel (H1) steht an genau dieser Kante. Die 24 px der Sektion
   kaemen obendrauf und rueckten Dachstrich, H2 und Inhalt gegenueber der H1
   ein. Deshalb entfaellt der eigene Seitenrand hier. Volle Flaechen (alignfull)
   behalten ihn, weil sie bis an den Bildschirmrand laufen. */
.inside-article .fhs-sektion:not(.alignfull) {
	padding-left: 0;
	padding-right: 0;
}

/* UX-Audit Befund 6: Im Seiten-Wrapper .fhs-seite (constrained) begrenzt
   WordPress jedes Kind ohne eigene Klasse auf die Inhaltsbreite (704 px) und
   zentriert es. Die Notfallzeile oben auf /hilfe-im-notfall/ und die Lesespalte
   der Einleitung laufen deshalb wie die Sektionen auf der breiten Bahn. */
.fhs-seite > .fhs-notfall,
.fhs-seite > .fhs-textseite {
	max-width: var(--wp--style--global--wide-size, 77.5rem);
}

/* Die Achse fuellt ihre Sektion und ragt nicht ueber sie hinaus
   (die alignwide-Regel fuer Spalten wuerde sonst 80 px zugeben). */
.fhs-sektion .fhs-achse {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Trennung zwischen zwei aufeinanderfolgenden Sektionen: eine Linie, keine Karte. */
.fhs-sektion + .fhs-sektion {
	border-top: 1px solid var(--fhs-linie);
}

.fhs-sektion--flaeche + .fhs-sektion,
.fhs-sektion + .fhs-sektion--flaeche {
	border-top: 0;
}

/* Fläche 1 von 2: das FBS-Band auf Orange-Hell (Schiefer darauf 10,45:1). */
.fhs-band {
	background-color: var(--fhs-orange-light);
	color: var(--fhs-ink);
}

.fhs-achse.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fhs-space-l);
	margin-bottom: 0;
}

.fhs-achse > .wp-block-column {
	min-width: 0;
}

.fhs-achse__kopf > * {
	margin-top: 0;
}

.fhs-achse__inhalt > * {
	margin-top: 0;
	margin-bottom: var(--fhs-space-l);
}

.fhs-achse__inhalt > :last-child {
	margin-bottom: 0;
}

.fhs-achse__inhalt p,
.fhs-achse__inhalt li {
	max-width: 42em;
}

@media (min-width: 980px) {
	.fhs-achse.wp-block-columns {
		grid-template-columns: 5fr 7fr;
		gap: var(--fhs-achse-abstand);
	}

	/* Die Überschrift bleibt stehen, solange die Sektion läuft. */
	.fhs-achse__kopf :is(h2, h3) {
		position: sticky;
		top: var(--fhs-haft-abstand);
	}
}

/* Sektionsmarke: kurzer Dachstrich über der Überschrift, 120 x 14 px.
   Aus CSS gezeichnet (clip-path), damit kein weiteres Bild nötig ist.
   Ohne clip-path bleibt ein schlichter Strich stehen.

   UX-Audit 08.09.2026, Befund 3: Die Marke steht auch ueber der H1 jeder
   Unterseite, also ueber dem Seitentitel von GeneratePress (.page h1.entry-title;
   der Blog-Index hat die Body-Klasse blog, nicht page, und bleibt frei) und
   ueber der H1 im Inhalt der Lesespalte (English, Arabisch) und ueber der H1
   "Aktuelles" des Blog-Index (.fhs-seitentitel, functions.php Abschnitt 7).
   So beginnt jede Seite mit derselben Marke wie jede Sektion der Startseite;
   die Startseite selbst traegt im Hero das grosse Dach-Bild statt der kleinen
   Marke. */
.fhs-achse__kopf > :is(h2, h3)::before,
.fhs-dachmarke::before,
.page h1.entry-title::before,
.fhs-seitentitel .page-title::before,
.fhs-textseite > h1::before {
	content: "";
	display: block;
	width: var(--fhs-dach-marke);
	max-width: 100%;
	height: 14px;
	margin-bottom: var(--fhs-space-m);
	background-color: var(--fhs-orange);
	clip-path: polygon(0 100%, 50% 0, 100% 100%, 92% 100%, 50% 16%, 8% 100%);
}

/* Auf Orange-Hell wäre das Logo-Orange nicht mehr erkennbar (1,58:1). */
.fhs-band .fhs-achse__kopf > :is(h2, h3)::before,
.fhs-band .fhs-dachmarke::before {
	background-color: var(--fhs-orange-dark);
}

/* --------------------------------------------------------------------------
   2. Flächen auf Schiefer (Hero, Konto-Element, dunkles Telefon-Element)

   Weiß auf Schiefer 12,35:1, Orange-Hell auf Schiefer 10,45:1,
   Logo-Orange auf Schiefer 4,74:1 (geprüft, auch für Fließtext).
   Orange-Dunkel hat auf Schiefer nur 1,83:1 und wird dort nie für Text
   verwendet; Links und Fokusringe sind hier weiß.
   -------------------------------------------------------------------------- */
.fhs-konto,
.fhs-telefon--dunkel {
	background-color: var(--fhs-schiefer);
	color: var(--fhs-white);
}

.fhs-konto :is(h2, h3, h4),
.fhs-telefon--dunkel :is(h2, h3, h4) {
	color: var(--fhs-white);
}

.fhs-konto a:not(.wp-block-button__link),
.fhs-telefon--dunkel a:not(.wp-block-button__link) {
	color: var(--fhs-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.fhs-konto a:not(.wp-block-button__link):hover,
.fhs-konto a:not(.wp-block-button__link):focus-visible,
.fhs-telefon--dunkel a:not(.wp-block-button__link):hover,
.fhs-telefon--dunkel a:not(.wp-block-button__link):focus-visible {
	color: var(--fhs-orange-light);
	text-decoration-thickness: 2px;
}

.fhs-konto :focus-visible,
.fhs-telefon--dunkel :focus-visible {
	outline-color: var(--fhs-white);
}

/* 2a. .fhs-hero - Startbereich

   Group.fhs-hero (alignfull) > Columns.fhs-hero__raster (alignwide)
     > Column .fhs-hero__text  : Claim, H1, Lead, Buttons, Notfallzeile
     > Column .fhs-hero__bild  : HTML-Block mit dach-licht.svg
   Mobil steht der Text zuerst, das Bild darunter (DOM-Reihenfolge). */
.fhs-hero {
	/* Entwurf v1.2: Orange hell statt Schiefer (Rueckmeldung Johannes 04.10.2026:
	   die Schiefer-Flaeche wirkte bedrohlich; Fragebogen 9.3). */
	background-color: var(--fhs-orange-light);
	color: var(--fhs-ink);
	border-bottom: 1px solid var(--fhs-linie);
	padding-top: clamp(2.5rem, 1.8rem + 3vw, 5rem);
	padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 5rem);
	padding-left: var(--fhs-space-l);
	padding-right: var(--fhs-space-l);
}

.fhs-hero__raster.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fhs-space-xl);
	align-items: center;
	margin-bottom: 0;
}

.fhs-hero__raster > .wp-block-column {
	min-width: 0;
}

.fhs-hero__text > * {
	margin-top: 0;
	margin-bottom: var(--fhs-space-l);
}

.fhs-hero__text > :last-child {
	margin-bottom: 0;
}

/* Claim: klein über der Überschrift, Orange-Dunkel auf Orange-Hell 4,94:1. */
.fhs-hero__claim {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--fhs-fs-gross);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--fhs-orange-dark);
	margin-bottom: var(--fhs-space-s);
}

/* H1 in Schiefer auf Orange-Hell (10,45:1). */
.fhs-hero h1 {
	color: var(--fhs-schiefer);
	max-width: 12em;
	margin-bottom: var(--fhs-space-l);
}

.fhs-hero__lead {
	max-width: 40ch;
	font-size: var(--fhs-fs-gross);
	color: var(--fhs-ink);
}

/* Notfallzeile: ein Satz unter den Buttons, durch eine Linie abgesetzt. */
.fhs-hero__notfall {
	max-width: 52ch;
	padding-top: var(--fhs-space-l);
	border-top: 1px solid var(--fhs-linie);
	font-size: var(--fhs-fs-fliesstext);
	color: var(--fhs-ink);
}

.fhs-hero__bild {
	align-self: center;
}

.fhs-hero__bild svg,
.fhs-hero__bild img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 34rem;
	margin-left: auto;
}

@media (min-width: 980px) {
	.fhs-hero__raster.wp-block-columns {
		/* Text 55 Prozent, Bild 45 Prozent (Vorgabe Richtung B). */
		grid-template-columns: 55fr 45fr;
		gap: var(--fhs-achse-abstand);
	}
}

@media (max-width: 979px) {
	.fhs-hero__bild svg,
	.fhs-hero__bild img {
		max-width: 26rem;
		margin-left: 0;
	}
}

/* --------------------------------------------------------------------------
   3. .fhs-notfall - Notfallzeile

   Kein Kastenband mehr (Umbau-Liste Punkt 3). Ein Satz mit beiden Nummern
   als tel:-Links, abgesetzt durch eine Linie. Auf Unterseiten steht die
   Zeile über das GP-Element vor dem Footer.

   Markup: <section class="fhs-notfall"> Paragraph .fhs-notfall__satz
           + Paragraph .fhs-notfall__zusatz </section>
   -------------------------------------------------------------------------- */
.fhs-notfall {
	padding-top: var(--fhs-space-l);
	padding-bottom: var(--fhs-space-l);
	border-top: 1px solid var(--fhs-linie);
	border-bottom: 1px solid var(--fhs-linie);
	color: var(--fhs-ink);
}

.fhs-notfall > * {
	margin-top: 0;
	margin-bottom: var(--fhs-space-s);
}

.fhs-notfall > :last-child {
	margin-bottom: 0;
}

.fhs-notfall__satz {
	font-size: var(--fhs-fs-gross);
	max-width: none; /* seit 29.10.2026 zwei feste Zeilen (Polizei / Hilfetelefon), keine Begrenzung mehr */
}

.fhs-notfall__satz .fhs-tel,
.fhs-hero__notfall .fhs-tel {
	font-weight: 700;
}

.fhs-notfall__zusatz {
	font-size: var(--fhs-fs-klein);
	color: var(--fhs-ink);
}

/* Kompakte Fassung vor dem Footer der Unterseiten. */
.fhs-notfall--kompakt {
	border-bottom: 0;
}

.fhs-notfall-footer {
	padding-top: var(--fhs-space-xl);
	padding-left: var(--fhs-space-l);
	padding-right: var(--fhs-space-l);
}

/* --------------------------------------------------------------------------
   4. .fhs-sprachen - Sprach-Einstiege

   List (ul.fhs-sprachen) mit drei Listenpunkten: English / العربية /
   Leichte Sprache. Textlinks in einer Zeile, keine Kästen.
   -------------------------------------------------------------------------- */
.fhs-sprachen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fhs-space-s) var(--fhs-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fhs-fs-fliesstext);
}

.fhs-sprachen li {
	margin: 0;
	padding: 0;
}

.fhs-sprachen a {
	display: inline-flex;
	align-items: center;
	min-height: var(--fhs-target);
	color: var(--fhs-orange-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.fhs-sprachen a:hover,
.fhs-sprachen a:focus-visible {
	color: var(--fhs-orange-hover);
	text-decoration-thickness: 2px;
}

.fhs-sprachen [lang="ar"] {
	/* Schriftdatei nur bei arabischem Inhalt, siehe style.css Abschnitt 1. */
	font-size: 1.05em;
	line-height: var(--wp--custom--line-height--arabic);
	unicode-bidi: isolate;
}

/* 4a. .fhs-zugang - Zugangszeile über dem Header

   GP-Hook-Element (content/elements/zugangszeile.html, Projektleitung 08.09.2026):
   Leichte Sprache, English, العربية, Sicher surfen. Schmale Zeile auf Papier mit
   einer Linie darunter, Inhalt rechtsbündig auf Header-Breite. Kein Kasten,
   kein Farbband. Schiefer auf Papier 12,08:1. */
.fhs-zugang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0 var(--fhs-space-l);
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--fhs-space-l);
	background-color: var(--fhs-papier);
	border-bottom: 1px solid var(--fhs-linie);
	font-size: var(--fhs-fs-klein);
}

.fhs-zugang__link {
	display: inline-flex;
	align-items: center;
	/* 36 px Zeile (Rueckmeldung Johannes 08.09.2026: Kopf zu hoch); Zielgroesse
	   nach WCAG 2.5.8 ist 24 px, die Links liegen mit 32 px Luft nebeneinander. */
	min-height: 36px;
	padding: 4px 0;
	color: var(--fhs-schiefer);
	font-size: var(--fhs-fs-klein);
	text-decoration: none;
}

.fhs-zugang__link:hover,
.fhs-zugang__link:focus-visible {
	color: var(--fhs-orange-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.fhs-zugang__link[lang="ar"] {
	/* Keine eigene Schriftdatei fuer ein Navigationswort: die Schrift des Geraets
	   genuegt und spart 73 KB auf jeder Seite (siehe style.css Abschnitt 1). */
	font-size: 1.05em;
	line-height: var(--wp--custom--line-height--arabic);
	unicode-bidi: isolate;
}

/* Die Zeile hat keinen eigenen Rand, sie liegt direkt auf dem Seitengrund.
   Damit sie nicht am Bildschirmrand klebt, bekommt der Wrapper die Breite. */
@media (max-width: 600px) {
	.fhs-zugang {
		justify-content: flex-start;
		gap: 0 var(--fhs-space-m);
	}
}

/* --------------------------------------------------------------------------
   5. .fhs-telefon - Telefon-Element

   Bezeichnung klein, Nummer sehr groß in Figtree, Button darunter,
   Rückruf-Regel als kleiner Text. Zwei Fassungen:
   .fhs-telefon           auf Papier, oben und unten eine Linie
   .fhs-telefon--dunkel   auf Schiefer, Radius 6 px

   Markup: Group.fhs-telefon > Paragraph .fhs-telefon__label
           > Paragraph .fhs-telefon__nummer (tel:-Link)
           > Buttons (ein Button "Anrufen")
           > Paragraph .fhs-telefon__hinweis
   -------------------------------------------------------------------------- */
.fhs-telefon {
	padding-top: var(--fhs-space-l);
	padding-bottom: var(--fhs-space-l);
	border-top: 1px solid var(--fhs-linie);
	border-bottom: 1px solid var(--fhs-linie);
}

.fhs-telefon--dunkel {
	padding: var(--fhs-space-xl) var(--fhs-space-l);
	border: 0;
	border-radius: var(--fhs-radius);
}

.fhs-telefon > * {
	margin-top: 0;
	margin-bottom: var(--fhs-space-m);
}

.fhs-telefon > :last-child {
	margin-bottom: 0;
}

.fhs-telefon__label {
	font-size: var(--fhs-fs-klein);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--fhs-ink);
	margin-bottom: var(--fhs-space-xs);
}

.fhs-telefon--dunkel .fhs-telefon__label {
	color: var(--fhs-orange-light);
}

.fhs-telefon__nummer {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--fhs-fs-nummer-gross);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--fhs-space-m);
}

/* Orange-Dunkel auf Papier 5,71:1; im dunklen Element Logo-Orange auf Schiefer 4,74:1. */
.fhs-telefon__nummer a {
	color: var(--fhs-orange-dark);
	text-decoration: none;
	white-space: nowrap;
}

.fhs-telefon__nummer a:hover,
.fhs-telefon__nummer a:focus-visible {
	color: var(--fhs-orange-hover);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.12em;
}

.fhs-telefon--dunkel .fhs-telefon__nummer a {
	color: var(--fhs-orange);
}

.fhs-telefon--dunkel .fhs-telefon__nummer a:hover,
.fhs-telefon--dunkel .fhs-telefon__nummer a:focus-visible {
	color: var(--fhs-orange-light);
	text-decoration: underline;
	text-decoration-thickness: 3px;
}

.fhs-telefon__hinweis {
	max-width: 46ch;
	font-size: var(--fhs-fs-fliesstext);
}

.fhs-telefon--dunkel .fhs-telefon__hinweis {
	color: var(--fhs-white);
}

/* --------------------------------------------------------------------------
   6. .fhs-schritte - nummerierte Schritte

   List-Block (geordnet) mit der Klasse fhs-schritte. Die Zahl kommt aus
   einem CSS-Zähler, damit sie groß in Figtree gesetzt werden kann; die
   Semantik der geordneten Liste bleibt erhalten.
   -------------------------------------------------------------------------- */
.fhs-schritte {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fhs-schritt;
}

.fhs-schritte > li {
	counter-increment: fhs-schritt;
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: var(--fhs-space-m);
	margin: 0;
	padding: var(--fhs-space-l) 0;
	border-top: 1px solid var(--fhs-linie);
	max-width: none;
}

.fhs-schritte > li:last-child {
	border-bottom: 1px solid var(--fhs-linie);
}

.fhs-schritte > li::before {
	content: counter(fhs-schritt);
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--fhs-fs-nummer);
	font-weight: 600;
	line-height: 1;
	color: var(--fhs-orange-dark);
	font-variant-numeric: tabular-nums;
}

/* .fhs-zeilen: kurze Zeilen ohne Nummer, nur durch Linien getrennt
   (Abschnitt "Wir sind für Frauen da, wenn ..."). List-Block, ungeordnet. */
.fhs-zeilen {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fhs-zeilen > li {
	margin: 0;
	padding: var(--fhs-space-m) 0;
	border-top: 1px solid var(--fhs-linie);
	font-size: var(--fhs-fs-fliesstext);
	max-width: none;
}

/* Leerer Platzhalter fuer das Foerderlogo im Footer, solange das Logo fehlt (TODO ausgeblendet). */
.fhs-footer__foerderlogo:empty {
	display: none;
}

/* Grosse Zeilen nur fuer "Wir sind fuer Frauen da, wenn ..." auf der Startseite.
   Auf den Unterseiten stehen die Listen zwischen normalen Absaetzen und
   bekommen deren Groesse (Rueckmeldung Johannes 29.10.2026). */
.fhs-zeilen--gross > li {
	font-size: var(--fhs-fs-gross);
}

/* Gewaltformen unter "... sie Gewalt erleben." (Rueckmeldung Frauenhaus 29.10.2026):
   eigene Zeilen in Fliesstextgroesse unter der grossen Zeile. */
.fhs-zeilen__formen {
	display: block;
	margin-top: var(--fhs-space-s);
	font-size: var(--fhs-fs-fliesstext);
}

.fhs-zeilen > li:last-child {
	border-bottom: 1px solid var(--fhs-linie);
}

/* .fhs-liste: Einträge mit eigener Überschrift, nur durch Linien getrennt
   (Notfallseite, "Was Sie jetzt tun können"). Group mit Group-Kindern. */
.fhs-liste__eintrag {
	padding: var(--fhs-space-l) 0;
	border-top: 1px solid var(--fhs-linie);
}

.fhs-liste > .fhs-liste__eintrag:last-child {
	border-bottom: 1px solid var(--fhs-linie);
}

.fhs-liste__eintrag > * {
	margin-top: 0;
	margin-bottom: var(--fhs-space-s);
}

.fhs-liste__eintrag > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. .fhs-wege - zwei Wege (Angehörige, Fachstellen)

   Columns.fhs-wege > 2 x Column: H3, Absatz, Button.
   Linien statt Kacheln; mobil untereinander.
   -------------------------------------------------------------------------- */
.fhs-wege.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fhs-space-l);
	margin-bottom: 0;
}

.fhs-wege > .wp-block-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-top: var(--fhs-space-l);
	border-top: 1px solid var(--fhs-linie);
}

.fhs-wege > .wp-block-column > * {
	margin-top: 0;
	margin-bottom: var(--fhs-space-m);
}

.fhs-wege > .wp-block-column > :last-child {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: var(--fhs-space-s);
}

.fhs-wege :is(h2, h3) {
	font-size: var(--fhs-fs-h3);
}

@media (min-width: 700px) {
	.fhs-wege.wp-block-columns {
		grid-template-columns: 1fr 1fr;
		gap: var(--fhs-space-xl);
	}
}

/* --------------------------------------------------------------------------
   8. .fhs-stellen - Anlaufstellen als Liste

   Group.fhs-stellen > je Stelle eine Group.fhs-stelle:
     H3 .fhs-stelle__name, Paragraph .fhs-stelle__nummer (tel:-Link),
     Paragraph .fhs-stelle__zusatz (Adresse, E-Mail, Webadresse)
   Drei Spalten, große Nummern, Linien statt Boxen.
   -------------------------------------------------------------------------- */
.fhs-stellen {
	/* Nachbesserung 08.09.2026: mehrspaltig, damit die Liste nicht als langer
	   Streifen läuft (Richtung B, Umbau-Liste Punkt 9). */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--fhs-space-l) var(--fhs-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fhs-stellen--detail {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--fhs-space-xl) var(--fhs-space-l);
}

.fhs-stelle {
	padding-top: var(--fhs-space-m);
	border-top: 1px solid var(--fhs-linie);
}

.fhs-stelle > * {
	margin-top: 0;
	margin-bottom: var(--fhs-space-s);
	max-width: none;
}

.fhs-stelle > :last-child {
	margin-bottom: 0;
}

.fhs-stelle__name {
	font-size: var(--fhs-fs-h3);
	line-height: var(--wp--custom--line-height--heading);
}

.fhs-stelle__nummer {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--fhs-fs-nummer);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--display);
	font-variant-numeric: tabular-nums;
}

.fhs-stelle__nummer a {
	color: var(--fhs-orange-dark);
	text-decoration: none;
	white-space: nowrap;
}

.fhs-stelle__nummer a:hover,
.fhs-stelle__nummer a:focus-visible {
	color: var(--fhs-orange-hover);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.12em;
}

.fhs-stelle__zusatz {
	font-size: var(--fhs-fs-klein);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. .fhs-konto - Konto-Element auf Schiefer (Fläche 2 von 2)

   Group.fhs-konto (alignfull) > Columns.fhs-achse
     > .fhs-achse__kopf: H2
     > .fhs-achse__inhalt: Absatz, List .fhs-konto__daten, Buttons
   -------------------------------------------------------------------------- */
.fhs-konto {
	padding: var(--fhs-sektion-abstand) var(--fhs-space-l);
}

.fhs-konto__daten {
	margin: 0;
	padding: 0;
	list-style: none;
	font-variant-numeric: tabular-nums;
}

.fhs-konto__daten li {
	margin: 0;
	padding: var(--fhs-space-s) 0;
	border-top: 1px solid var(--fhs-linie-invers);
	max-width: none;
}

.fhs-konto__daten li:last-child {
	border-bottom: 1px solid var(--fhs-linie-invers);
}

/* Bezeichnung klein und in Orange-Hell (10,45:1), Wert weiß (12,35:1). */
.fhs-konto__daten strong {
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--fhs-fs-klein);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--fhs-orange-light);
}

.fhs-konto__daten .fhs-konto__wert {
	font-size: var(--fhs-fs-gross);
	font-weight: 600;
	color: var(--fhs-white);
}

/* --------------------------------------------------------------------------
   10. .fhs-meldungen - Aktuelles

   Der Latest-Posts-Block zeigt zwei Meldungen. Linien statt Karten; die
   Darstellung sieht auch mit einer einzigen Meldung vollständig aus.
   -------------------------------------------------------------------------- */
.fhs-meldungen.wp-block-latest-posts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--fhs-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fhs-meldungen.wp-block-latest-posts__list > li {
	padding-top: var(--fhs-space-m);
	border-top: 1px solid var(--fhs-linie);
	max-width: none;
}

.fhs-meldungen .wp-block-latest-posts__post-title {
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--fhs-fs-h3);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
	margin-bottom: var(--fhs-space-s);
}

.fhs-meldungen .wp-block-latest-posts__post-excerpt {
	font-size: var(--fhs-fs-fliesstext);
	margin: 0;
}

/* --------------------------------------------------------------------------
   11. Buttons - genau zwei Stile

   Primär (ohne Stilklasse): Orange-Dunkel, weiße Schrift (5,84:1).
   Rahmen (.is-style-fhs-sekundaer): 2 px Schiefer, Schrift Schiefer,
   durchsichtiger Grund (12,08:1 auf Papier).
   Auf Schiefer bleibt Primär wie er ist, der Rahmen wird weiß.
   Höhe --fhs-button-hoehe (56 px), Radius 6 px, Schrift 18 bis 20 px,
   Hover nie nur über Farbe. Dieselbe Hoehe gilt fuer den Exit-Button und die
   Aktionsleiste (Abschnitt 12).

   .fhs-hinweis steht als kleiner Text neben einem Button, nie im Button
   (Umbau-Liste Punkt 7: "(Seite folgt)" raus aus den Beschriftungen).
   -------------------------------------------------------------------------- */
.wp-block-button a.wp-block-button__link,
.wp-block-button button.wp-block-button__link,
.wp-block-button .wp-block-button__link.wp-element-button {
	min-height: var(--fhs-button-hoehe);
	padding: 12px 28px;
	border-radius: var(--fhs-radius);
	font-size: var(--fhs-fs-fliesstext);
}

/* Rahmen-Stil */
.wp-block-button.is-style-fhs-sekundaer .wp-block-button__link {
	border-color: var(--fhs-schiefer);
	background-color: transparent;
	color: var(--fhs-schiefer);
}

.wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:hover,
.wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:focus-visible,
.wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:active {
	border-color: var(--fhs-schiefer);
	background-color: var(--fhs-schiefer);
	color: var(--fhs-white);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Auf Schiefer: Rahmen und Schrift weiß, Grund durchsichtig. */
.fhs-konto .wp-block-button.is-style-fhs-sekundaer .wp-block-button__link,
.fhs-telefon--dunkel .wp-block-button.is-style-fhs-sekundaer .wp-block-button__link {
	border-color: var(--fhs-white);
	background-color: transparent;
	color: var(--fhs-white);
}

.fhs-konto .wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:hover,
.fhs-konto .wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:focus-visible,
.fhs-konto .wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:active,
.fhs-telefon--dunkel .wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:hover,
.fhs-telefon--dunkel .wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:focus-visible,
.fhs-telefon--dunkel .wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:active {
	border-color: var(--fhs-white);
	background-color: var(--fhs-white);
	color: var(--fhs-schiefer);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Kleiner Hinweis neben einem Button, zum Beispiel [TODO: Seite folgt]. */
.fhs-hinweis {
	display: block;
	margin-top: var(--fhs-space-s);
	font-size: var(--fhs-fs-klein);
}

/* --------------------------------------------------------------------------
   12. .fhs-sticky-bar, .fhs-exit, Header-Aktionen

   Die Leiste bleibt wie gebaut (genau zwei Elemente: Telefon und Seite
   verlassen), nur der Grund ist jetzt Schiefer statt Creme. Auf Schiefer
   ist der Exit-Button ein weißer Rahmen, damit er sich vom Grund abhebt;
   das Plugin selbst bleibt unverändert.
   -------------------------------------------------------------------------- */
.fhs-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100010;
	display: flex;
	align-items: stretch;
	gap: var(--fhs-space-s);
	min-height: var(--fhs-bar-height);
	padding: var(--fhs-space-s);
	padding-bottom: calc(var(--fhs-space-s) + env(safe-area-inset-bottom, 0px));
	background-color: var(--fhs-schiefer);
	border-top: 2px solid var(--fhs-orange);
}

.fhs-sticky-bar > * {
	flex: 1 1 0;
	margin: 0;
}

.fhs-sticky-bar__tel,
.fhs-sticky-bar .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--fhs-button-hoehe);
	padding: var(--fhs-space-s) var(--fhs-space-m);
	border: 2px solid var(--fhs-orange-light);
	border-radius: var(--fhs-radius);
	background-color: var(--fhs-orange-dark);
	color: var(--fhs-white);
	font-size: var(--fhs-fs-fliesstext);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--button);
	text-decoration: none;
	white-space: nowrap;
}

.fhs-sticky-bar__tel:hover,
.fhs-sticky-bar__tel:focus-visible,
.fhs-sticky-bar__tel:active {
	border-color: var(--fhs-white);
	background-color: var(--fhs-orange-hover);
	color: var(--fhs-white);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.fhs-sticky-bar :focus-visible {
	outline-color: var(--fhs-white);
}

/* Exit in der Leiste: weißer Rahmen auf Schiefer (12,35:1). */
.fhs-sticky-bar .fhs-exit {
	width: 100%;
	min-height: var(--fhs-button-hoehe);
	margin: 0;
	border: 2px solid var(--fhs-white);
	border-radius: var(--fhs-radius);
	background-color: transparent;
	color: var(--fhs-white);
}

.fhs-sticky-bar .fhs-exit:hover,
.fhs-sticky-bar .fhs-exit:active {
	background-color: var(--fhs-white);
	color: var(--fhs-schiefer);
}

/* Platz am Seitenende, damit die Leiste den Footer nicht verdeckt.
   Die Leiste ist so hoch wie Button plus Innenabstand (72 px), nicht mehr
   nur --fhs-bar-height (56 px), seit die Buttons einheitlich 56 px haben. */
body:has(.fhs-sticky-bar) {
	padding-bottom: calc(var(--fhs-leiste-hoehe) + var(--fhs-space-m));
	scroll-padding-bottom: calc(var(--fhs-leiste-hoehe) + var(--fhs-space-m));
}

.fhs-has-sticky-bar {
	padding-bottom: calc(var(--fhs-leiste-hoehe) + var(--fhs-space-m));
}

@media (min-width: 769px) {
	.fhs-sticky-bar {
		display: none;
		left: auto;
		right: var(--fhs-space-l);
		top: 0;
		bottom: auto;
		min-height: 0;
		padding: var(--fhs-space-s);
		border-top: 0;
		border-bottom: 2px solid var(--fhs-orange);
		border-radius: 0 0 var(--fhs-radius) var(--fhs-radius);
	}

	.fhs-sticky-bar > * {
		flex: 0 0 auto;
	}

	.fhs-sticky-bar__tel,
	.fhs-sticky-bar .fhs-exit {
		width: auto;
	}

	.fhs-scrolled .fhs-sticky-bar {
		display: flex;
	}

	body:has(.fhs-sticky-bar),
	.fhs-has-sticky-bar {
		padding-bottom: 0;
		scroll-padding-bottom: 0;
	}
}

@media (min-width: 769px) and (scripting: none) {
	.fhs-sticky-bar {
		display: flex;
	}
}

/* Header-Aktionen: Platzierung wie gebaut, Radius auf 6 px und Fläche auf
   Schiefer angeglichen (das Plugin liefert Graphit und 12 px). */
/* Der Exit-Button kommt aus dem Plugin und traegt dort Graphit als Rueckfall.
   Hier wird er auf die Palette der Webseite gezogen (Schiefer, Radius 6 px),
   damit nicht zwei fast gleiche Dunkeltoene auf einer Seite stehen.
   Nachbesserung 08.09.2026. */
.fhs-exit {
	--fhs-exit-flaeche: var(--fhs-schiefer);
	/* Quality Gate 08.09.2026: Das Plugin kennt jetzt Variablen fuer Hoehe,
	   Innenabstand, Schrift und Zeilenhoehe (fhs-exit.css). Die Doppelklasse
	   .fhs-exit.fhs-exit unten bleibt als Sicherheitsnetz fuer ein noch
	   gecachtes Plugin-CSS ohne diese Variablen. */
	--fhs-exit-hoehe: var(--fhs-button-hoehe);
	--fhs-exit-innen: 12px 28px;
	--fhs-exit-schriftgroesse: var(--fhs-fs-fliesstext);
	--fhs-exit-zeilenhoehe: var(--wp--custom--line-height--button);
	--fhs-exit-schrift: var(--fhs-white);
	--fhs-exit-radius: var(--fhs-radius);
}

/* UX-Audit 08.09.2026, Befund 4: Der Exit-Button war 48 px hoch mit 10/20 px
   Innenabstand, alle anderen Buttons 56 px mit 12/28 px. Das Plugin kennt fuer
   Hoehe und Innenabstand keine Variable (nur Flaeche, Schrift, Radius) und
   schreibt seine Masse mit a.fhs-exit (Spezifitaet 0,1,1). Die Doppelklasse
   .fhs-exit.fhs-exit (0,2,0) gewinnt unabhaengig von der Ladereihenfolge, ohne
   !important. Schriftgroesse und Zeilenhoehe wie bei den Kern-Buttons, damit
   auch die Beschriftung auf einer Hoehe sitzt. Wunsch an das Plugin: eigene
   Variablen --fhs-exit-hoehe und --fhs-exit-innen (Snippet in handoff/UX). */
.fhs-exit.fhs-exit,
.wp-block-button.is-style-fhs-exit .wp-block-button__link {
	min-height: var(--fhs-button-hoehe);
	padding: 12px 28px;
	border-radius: var(--fhs-radius);
	font-size: var(--fhs-fs-fliesstext);
	line-height: var(--wp--custom--line-height--button);
}

/* In der Aktionsleiste bleibt der Innenabstand schmaler, damit Telefon und
   Exit bei 390 px nebeneinander passen; die Hoehe ist dieselbe. */
.fhs-sticky-bar .fhs-exit.fhs-exit {
	padding: var(--fhs-space-s) var(--fhs-space-m);
}

.fhs-header-aktionen {
	display: flex;
	align-items: center;
	gap: var(--fhs-space-m);
	margin-left: auto;
}

.fhs-header-aktionen .fhs-exit {
	margin: 0;
	flex: 0 0 auto;
	order: 2;
}

.fhs-header-aktionen .fhs-exit,
.fhs-header-aktionen .fhs-exit:link,
.fhs-header-aktionen .fhs-exit:visited {
	background-color: var(--fhs-schiefer);
	color: var(--fhs-white);
}

.fhs-header-aktionen .fhs-exit:hover,
.fhs-header-aktionen .fhs-exit:active {
	background-color: var(--fhs-ink);
	color: var(--fhs-white);
}

.fhs-header-tel {
	display: inline-flex;
	align-items: center;
	min-height: var(--fhs-target);
	padding: var(--fhs-space-s) var(--fhs-space-m);
	border-radius: var(--fhs-radius);
	color: var(--fhs-orange-dark);
	font-size: var(--fhs-fs-fliesstext);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

.fhs-header-tel:hover,
.fhs-header-tel:focus-visible {
	background-color: var(--fhs-orange-light);
	color: var(--fhs-orange-hover);
	text-decoration-thickness: 2px;
}

/* Die Header-Aktionen hängen als erstes Kind im Flex-Header, damit sie im
   Tab-Fokus vor Logo und Navigation liegen; visuell stehen sie rechts.

   Nachbesserung 08.09.2026: Sechs Menüpunkte, Logo, Telefon und Exit passen bei
   1440 px nicht in eine Zeile (gemessen: 697 px Platz, 784 px Bedarf). Statt die
   Navigation umbrechen zu lassen, ist der Kopf jetzt bewusst zweizeilig geordnet:
   oben Logo mit Telefon und Exit, darunter die Navigation über die volle Breite.
   Das hält die Nummer im Kopf (Schutzregel CLAUDE.md 5.1) und nimmt dem Menü
   den Druck. */
.inside-header {
	flex-wrap: wrap;
	align-items: center;
	row-gap: var(--fhs-space-xs);
}

/* Rueckmeldung Johannes 08.09.2026: Der Kopf war mit 275 px bis zum Hero zu
   hoch (Zugangszeile 45, Logo-Zeile 96, Navigation 65, Artikel-Innenabstand 40).
   GeneratePress setzt 20 px Innenabstand oben und unten und 60 px Zeilenhoehe
   fuer Menuepunkte. Jetzt 12 px und 44 px: Zugangszeile 37, Logo-Zeile 80,
   Navigation 49, zusammen 166 px. Mobil dieselben 12 px bei 30 px Seitenrand. */
.site-header .inside-header {
	padding-top: 12px;
	padding-bottom: 12px;
}

.inside-header .main-navigation .main-nav > ul > li > a,
.inside-header .main-navigation .menu-toggle {
	line-height: 44px;
}

.inside-header .fhs-header-aktionen {
	order: 10;
}

/* Rueckmeldung Johannes 08.09.2026 (Kopf zu hoch, drei Baender): Die
   Zugangszeile (Leichte Sprache, English, Arabisch, Sicher surfen) steht jetzt
   in der Logo-Zeile zwischen Logo und Aktionen statt als eigenes Band darueber
   (Hook generate_before_header_content, content/import.sh). Der Kopf hat damit
   zwei Zeilen: Logo, Zugaenge, Telefon, Exit / Navigation. Das kommt der
   Vorgabe "Kopf auf eine Zeile" aus docs/design-richtung-b.md so nah, wie es
   sechs Menuepunkte plus Telefon und Exit auf 1120 px zulassen. */
.inside-header .fhs-zugang {
	order: 5;
	flex: 0 1 auto;
	max-width: none;
	margin: 0 var(--fhs-space-l) 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
}

.nav-float-right .inside-header .fhs-header-aktionen {
	margin-left: 0;
}

/* Navigation in die zweite Zeile, linksbündig unter dem Logo. */
.inside-header .main-navigation {
	order: 20;
	flex: 1 0 100%;
	margin-left: 0;
	border-top: 1px solid var(--fhs-linie);
	padding-top: var(--fhs-space-xs);
}

.inside-header .main-navigation .main-nav > ul {
	justify-content: flex-start;
	gap: 0;
}

/* Etwas kompakter, damit die sechs Punkte sicher in eine Zeile passen. */
.inside-header .main-navigation .main-nav > ul > li > a {
	font-size: 1.0625rem;
	padding-left: var(--fhs-space-s);
	padding-right: var(--fhs-space-s);
}

.inside-header .main-navigation .main-nav > ul > li:first-child > a {
	padding-left: 0;
}

/* Header-Logo als SVG über die GP-Option (functions.php). */
.site-header .site-logo img,
.site-header .header-image {
	height: 56px;
	width: auto;
	max-width: none;
}

@media (max-width: 768px) {
	.site-header .site-logo img,
	.site-header .header-image {
		height: 44px;
	}

	/* Rueckmeldung Johannes 08.09.2026 (Kopf zu hoch): GeneratePress gibt den
	   Menue-Schalter mobil in einem eigenen Wrapper aus, der ebenfalls die
	   Klasse .main-navigation traegt. Die Zwei-Zeilen-Regel oben zog ihn in eine
	   dritte Zeile ueber die volle Breite. Jetzt steht er rechts neben dem Logo;
	   die eigentliche Navigation (#site-navigation) bleibt eine volle Zeile,
	   ist aber leer, bis der Schalter sie oeffnet, und braucht bis dahin weder
	   Linie noch Abstand. */
	.inside-header .mobile-menu-control-wrapper {
		order: 10;
		flex: 0 0 auto;
		margin-left: auto;
		border-top: 0;
		padding-top: 0;
	}

	/* Zugangszeile mobil als eigene erste Zeile ueber Logo und Schalter. */
	.inside-header .fhs-zugang {
		order: -1;
		flex: 1 0 100%;
		/* Vier Links auf 330 px: gleichmaessig verteilt, ohne festen Abstand,
		   damit "Sicher surfen" nicht in eine zweite Zeile faellt. */
		justify-content: space-between;
		gap: 0;
		margin: 0 0 var(--fhs-space-xs);
		border-bottom: 1px solid var(--fhs-linie);
	}

	.inside-header .mobile-menu-control-wrapper .menu-toggle {
		flex: 0 0 auto;
	}

	.inside-header #site-navigation:not(.toggled) {
		border-top: 0;
		padding-top: 0;
	}

	/* In der geoeffneten Liste stehen alle Punkte gleich eingerueckt; die
	   Desktop-Regel (erster Punkt ohne linken Abstand) gilt hier nicht. */
	.inside-header .main-navigation .main-nav > ul > li:first-child > a {
		padding-left: var(--fhs-space-s);
	}

	.fhs-header-aktionen {
		gap: var(--fhs-space-s);
	}

	.fhs-header-aktionen .fhs-header-tel {
		display: none;
	}

	/* Nur ein sichtbarer Exit pro Seite (WCAG 2.4.3). */
	body:has(.fhs-sticky-bar) .fhs-header-aktionen .fhs-exit {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   13. .fhs-footer

   Group.fhs-footer (alignfull, Schiefer) > Columns (4):
   1 Marke, 2 Kontakt, 3 Im Notfall, 4 Seiten (Sprungmarken)
   > List .fhs-footer__zugaenge
   > Group.fhs-footer__unten (Förderlogo-Platz, Impressum, Datenschutz)
   Weiß auf Schiefer 12,35:1, Orange-Hell auf Schiefer 10,45:1.
   -------------------------------------------------------------------------- */
.fhs-footer {
	background-color: var(--fhs-schiefer);
	color: var(--fhs-white);
	padding: var(--fhs-space-xxl) var(--fhs-space-l) var(--fhs-space-xl);
	font-size: var(--fhs-fs-fliesstext);
}

/* Spaltenueberschriften (UX-Audit 08.09.2026, Befund 5): semantisch H2, weil
   der Footer nach dem Hauptinhalt kommt und seine Spalten fuer Screenreader
   gliedert (Ueberschriftenliste: Kontakt, Im Notfall, Seiten). Sichtbar laufen
   sie in der kleinen H2-Stufe (--fhs-fs-h2-klein, 22 bis 26 px), damit sie
   nicht mit den Sektions-H2 (30 bis 46 px) konkurrieren. Die Stufe haengt an
   der Klasse .fhs-footer__titel (content/elements/footer.html); der allgemeine
   Selektor faengt Ueberschriften ohne Klasse auf. */
.fhs-footer :is(h1, h2, h3, h4, h5, h6),
.fhs-footer .fhs-footer__titel {
	font-family: var(--wp--preset--font-family--figtree);
	color: var(--fhs-white);
	font-size: var(--fhs-fs-h2-klein);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
	margin-bottom: var(--fhs-space-m);
	padding-bottom: var(--fhs-space-s);
	border-bottom: 1px solid var(--fhs-linie-invers);
}

.fhs-footer p,
.fhs-footer li {
	color: var(--fhs-white);
	margin-bottom: var(--fhs-space-s);
}

.fhs-footer a:not(.wp-block-button__link) {
	color: var(--fhs-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.fhs-footer a:not(.wp-block-button__link):hover,
.fhs-footer a:not(.wp-block-button__link):focus-visible {
	color: var(--fhs-orange-light);
	text-decoration-thickness: 2px;
}

.fhs-footer :focus-visible {
	outline-color: var(--fhs-white);
}

.fhs-footer .wp-block-columns {
	gap: var(--fhs-space-xl);
	margin-bottom: var(--fhs-space-xl);
}

/* Logo im Footer: auf Schiefer ist das Dach sichtbar, die Wortmarke (graphit)
   nicht. Deshalb liegt das Logo auf einer kleinen weißen Fläche. */
.fhs-footer__logo {
	display: inline-block;
	background-color: var(--fhs-white);
	border-radius: var(--fhs-radius);
	padding: var(--fhs-space-m);
	margin-bottom: var(--fhs-space-m);
}

.fhs-footer__logo img,
.fhs-footer__logo svg {
	display: block;
	height: 56px;
	width: auto;
}

.fhs-footer__claim {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--fhs-fs-gross);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--fhs-orange-light);
}

.fhs-footer__hinweis {
	font-size: var(--fhs-fs-klein);
	color: var(--fhs-orange-light);
}

.fhs-footer__notfall a {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--fhs-fs-gross);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* UX-Audit Befund 7: "Hilfetelefon Gewalt gegen / Frauen: 116 016" brach so,
   dass die Nummer mit einem einzelnen Wort in der zweiten Zeile stand. Die
   Klasse haelt das letzte Wort der Bezeichnung und die Nummer zusammen
   (siehe .fhs-zusammen in Abschnitt 14); der Umbruch faellt davor. */
.fhs-footer__notfall .fhs-zusammen {
	white-space: nowrap;
}

/* Sprungmarken: die neun Menüpunkte als Textlinks, eine Spalte. */
.fhs-footer__seiten {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fhs-footer__seiten li {
	margin: 0;
	padding: 0;
}

.fhs-footer__seiten a {
	display: inline-block;
	padding: 6px 0;
}

/* Zugänge (English, العربية, Leichte Sprache) als eigene Zeile. */
.fhs-footer__zugaenge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fhs-space-s) var(--fhs-space-l);
	margin: 0 0 var(--fhs-space-l);
	padding: var(--fhs-space-m) 0 0;
	border-top: 1px solid var(--fhs-linie-invers);
	list-style: none;
	font-size: var(--fhs-fs-fliesstext);
}

.fhs-footer__zugaenge li {
	margin: 0;
}

.fhs-footer__zugaenge [lang="ar"] {
	line-height: var(--wp--custom--line-height--arabic);
	unicode-bidi: isolate;
}

.fhs-footer__unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fhs-space-m) var(--fhs-space-l);
	margin-top: var(--fhs-space-l);
	padding-top: var(--fhs-space-l);
	border-top: 1px solid var(--fhs-linie-invers);
	font-size: var(--fhs-fs-klein);
}

.fhs-footer__unten > * {
	margin: 0;
}

/* Platzhalter für das Förderlogo, bis die Datei vorliegt (TODO 7 in CLAUDE.md). */
.fhs-footer__foerderlogo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 12rem;
	min-height: 4rem;
	padding: var(--fhs-space-s) var(--fhs-space-m);
	border: 1px dashed var(--fhs-orange-light);
	border-radius: var(--fhs-radius);
	color: var(--fhs-orange-light);
	font-size: var(--fhs-fs-klein);
}

.fhs-footer__unten .fhs-footer__links a {
	margin-right: var(--fhs-space-m);
	display: inline-block;
	min-height: var(--fhs-target);
	line-height: var(--fhs-target);
}

@media (max-width: 781px) {
	.fhs-footer {
		padding-top: var(--fhs-space-xl);
	}

	.fhs-footer .wp-block-columns {
		gap: var(--fhs-space-l);
	}
}

/* --------------------------------------------------------------------------
   14. Hilfsklassen
   -------------------------------------------------------------------------- */

/* Sichtbarer Platzhalter für fehlende Informationen: [TODO: ...] bleibt erkennbar. */
.fhs-todo {
	display: inline-block;
	padding: 0 var(--fhs-space-xs);
	border: 1px dashed var(--fhs-orange-dark);
	border-radius: 4px;
	color: var(--fhs-orange-dark);
	font-weight: 600;
}

/* Auf dunklen Flächen wäre Orange-Dunkel nicht lesbar (1,83:1 auf Schiefer). */
.fhs-footer .fhs-todo,
.fhs-konto .fhs-todo,
.fhs-telefon--dunkel .fhs-todo,
.has-schiefer-background-color .fhs-todo,
.has-graphite-background-color .fhs-todo,
.has-ink-background-color .fhs-todo,
.has-exit-background-color .fhs-todo {
	border-color: var(--fhs-white);
	color: var(--fhs-white);
}

/* Telefonnummern im Fließtext: nicht trennen, Tabellenziffern. */
.fhs-tel {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Wortgruppe, die nicht getrennt werden darf (Bezeichnung plus Nummer). */
.fhs-zusammen {
	white-space: nowrap;
}

/* Lesbare Zeilenlänge für lange Textseiten (Impressum, Datenschutz, Sicher surfen). */
.fhs-lesbreite {
	max-width: var(--fhs-lesespalte);
}

/* Einleitungssatz direkt unter der Seitenüberschrift. */
.fhs-einleitung {
	font-size: var(--fhs-fs-gross);
	max-width: var(--fhs-lesespalte);
}

/* Lesespalte (.fhs-textseite) fuer Impressum, Datenschutz, Sicher surfen,
   English, Arabisch, Platzhalterseiten und die Einleitung der Notfallseite.

   UX-Audit 08.09.2026, Befund 3: Diese Seiten hatten drei linke Kanten (H1 des
   Seitentitels, H2, Absaetze), weil der Group-Block im Layout "constrained"
   jedes Kind auf seine eigene max-width zentriert (margin auto !important) und
   die Sektion 24 px Seitenrand zugab. Jetzt: Group im Layout "default" (keine
   Zentrierung durch WordPress), kein eigener Seitenrand, alle Kinder auf die
   Inhaltsbreite (44 rem, etwa 70 Zeichen) an der Startkante ausgerichtet.
   Damit stehen H1, H2, H3, Absaetze, Listen und Aufklappbereiche auf derselben
   Linie wie der Seitentitel von GeneratePress. margin-inline statt
   margin-left, damit die arabische Seite (dir="rtl") an der rechten Kante
   ausrichtet. Die Gruppe selbst fuellt ihre Umgebung; im Seiten-Wrapper
   .fhs-seite bekommt sie in Abschnitt 1 die breite Bahn.

   Verworfen: Achse 5/7 wie auf der Startseite. Impressum und Datenschutz
   bestehen aus sechs bis neun kurzen Abschnitten mit zwei bis fuenf Absaetzen;
   als Sektionen mit haftender Ueberschrift wuerden sie die Seiten auf das
   Dreifache strecken, ohne dass die Haftung etwas bringt. */
.fhs-textseite {
	max-width: 100%;
	margin: 0;
	padding: var(--fhs-space-s) 0 var(--fhs-space-xl);
}

.fhs-textseite > * {
	max-width: var(--fhs-lesespalte);
	margin-inline: 0;
}

.fhs-textseite > h1 {
	margin-top: 0;
	margin-bottom: var(--fhs-space-l);
}

/* Kleine H2-Stufe: Der Seitentitel ist die einzige grosse Ueberschrift der
   Seite; die Gliederung darunter laeuft in H3-Groesse mit Luft davor. */
.fhs-textseite h2 {
	font-size: var(--fhs-fs-h2-klein);
	line-height: var(--wp--custom--line-height--heading);
	margin-top: var(--fhs-space-xl);
	margin-bottom: var(--fhs-space-m);
}

.fhs-textseite h3 {
	font-size: var(--fhs-fs-gross);
	line-height: var(--wp--custom--line-height--heading);
	margin-top: var(--fhs-space-l);
	margin-bottom: var(--fhs-space-s);
}

.fhs-textseite > .wp-block-details {
	padding: var(--fhs-space-m) 0;
	border-top: 1px solid var(--fhs-linie);
}

.fhs-textseite > .wp-block-details summary {
	display: flex;
	align-items: center;
	min-height: var(--fhs-target);
	font-weight: 600;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   15. Vollflaechen auf der Bahn der Sektionen (Quality Gate 08.09.2026)

   Hero, Band, Konto und Footer laufen als alignfull bis an den Bildschirmrand.
   Ihr inneres Raster (alignwide) bekam von WordPress max-width
   calc(100% + 80px) und stand deshalb bei 24 px vom Rand, waehrend die
   Sektionen im GeneratePress-Container bei 160 px (1440), 40 px (1024) und
   30 px (390) beginnen (gemessen auf der Box, handoff/UX Abschnitt 9 Punkt 2).
   Jetzt: Seitenrand der Flaeche wie der Innenabstand des GP-Artikels (40 px,
   mobil 30 px) und das Raster hoechstens so breit wie der Inhalt des
   Containers (1200 px minus 2 x 40 px = 1120 px; Customizer Layout >
   Container). Damit teilen alle Kanten der Startseite eine Linie. Aendert
   sich die Containerbreite im Customizer, ist --fhs-bahn anzupassen.
   Steht am Ende der Datei, damit die Regel gegen die Grundregeln der
   Abschnitte 1, 2a, 9 und 13 gewinnt (gleiche Spezifitaet, spaetere Quelle).
   -------------------------------------------------------------------------- */
:root {
	--fhs-bahn: 70rem;
	--fhs-bahn-rand: 40px;
}

@media (max-width: 768px) {
	:root {
		--fhs-bahn-rand: 30px;
	}
}

.fhs-hero,
.fhs-band,
.fhs-konto,
.fhs-footer {
	padding-left: var(--fhs-bahn-rand);
	padding-right: var(--fhs-bahn-rand);
}

.fhs-hero > .fhs-hero__raster,
.fhs-band > .fhs-achse,
.fhs-konto > .fhs-achse,
.fhs-footer > .alignwide {
	max-width: min(var(--fhs-bahn), 100%);
	margin-left: auto;
	margin-right: auto;
}

/* Startseite: Der Artikel von GeneratePress hat 40 px Innenabstand oben und
   einen weissen Grund; ueber dem Hero (alignfull, Schiefer) blieb davon ein
   weisser Streifen auf Papier stehen. Auf der Startseite entfaellt er, der
   Hero beginnt direkt unter der Navigation. */
.home .inside-article {
	padding-top: 0;
}

/* GeneratePress setzt 20 px zwischen Kopf und Hauptbereich; auf der Startseite
   blieb davon ein heller Spalt zwischen Navigation und Hero. */
.home .site-main {
	margin-top: 0;
}

/* Leerzustand von Aktuelles (functions.php Abschnitt 7): GeneratePress gibt
   Seitentitel und Inhalt als zwei weisse Kaesten mit 20 px Luft aus. Ohne
   Meldung wirken sie wie zwei Karten; hier ruecken sie zu einer Flaeche
   zusammen. Mit Meldungen bleibt die Liste von GP unveraendert. */
.blog .fhs-seitentitel:has(+ .fhs-leerzustand) {
	margin-bottom: 0;
	padding-bottom: 0;
}

.fhs-leerzustand > .inside-article {
	padding-top: var(--fhs-space-m);
}

/* --------------------------------------------------------------------------
   16. Motive, Icons und Kleinteile aus dem Entwurf v1.2 (12.10.2026)

   Quelle: Design-Leinwand von Anna (Grafik JA KLAR), Dateien unter
   assets/img/motive/ (handgezeichnete Motive) und assets/img/icons/
   (Linien-Icons 24 x 24, Strich Schiefer bzw. Weiss, Akzent Orange).
   Masse wie im Entwurf: Motiv unter der H2 260 px, im Inhalt 360 bis 420 px,
   Icon 32 px im weichen Kreis von 56 px.
   -------------------------------------------------------------------------- */
.fhs-motiv img {
	display: block;
	width: 100%;
	height: auto;
}

.fhs-motiv--kopf {
	width: 260px;
	max-width: 70%;
	margin-top: var(--fhs-space-xl);
}

.fhs-motiv--inhalt {
	width: 420px;
	max-width: 100%;
}

.fhs-motiv--mittel {
	width: 360px;
	max-width: 100%;
}

.fhs-motiv--klein {
	width: 240px;
	max-width: 100%;
	margin-top: var(--fhs-space-m);
}

/* Unterstreichung im Pinselstrich unter einem Wort der H1 */
.fhs-unterstrichen {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.fhs-unterstrichen::after {
	content: "";
	position: absolute;
	left: -2%;
	bottom: -0.16em;
	width: 100%;
	height: 0.32em;
	background: url("../img/motive/unterstreichung.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}

/* Stern hinter einer Ueberschrift (Band der Frauenberatungsstelle) */
.fhs-mit-stern::after {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-left: 0.15em;
	vertical-align: top;
	background: url("../img/motive/stern.svg") no-repeat center / contain;
}

/* Weicher Kreis fuer Icons */
.fhs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%;
	background: var(--fhs-orange-light);
}

.fhs-icon img {
	display: block;
	width: 32px;
	height: 32px;
}

.fhs-icon--dunkel {
	background: rgba(255, 252, 249, 0.10);
}

/* Schritte: Nummer, Icon, Text (Icon als Hintergrund, Markup bleibt eine Liste) */
.fhs-schritte > li {
	grid-template-columns: 2.5rem 56px minmax(0, 1fr);
	align-items: center;
}

.fhs-schritte > li::before {
	order: -2;
}

.fhs-schritte > li::after {
	content: "";
	order: -1;
	width: 56px;
	height: 56px;
	border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%;
	background: var(--fhs-orange-light) no-repeat center / 32px 32px;
}

.fhs-schritte > li:nth-child(1)::after { background-image: url("../img/icons/anrufen.svg"); }
.fhs-schritte > li:nth-child(2)::after { background-image: url("../img/icons/dolmetscherin.svg"); }
.fhs-schritte > li:nth-child(3)::after { background-image: url("../img/icons/treffpunkt.svg"); }
.fhs-schritte > li:nth-child(4)::after { background-image: url("../img/icons/ankommen.svg"); }

/* Zwei Wege: Icon ueber der H3 */
.fhs-wege .fhs-icon {
	margin-bottom: var(--fhs-space-s);
}

/* Spenden: drei Verwendungszwecke als Icon-Reihe */
.fhs-symbole {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fhs-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fhs-symbole > li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	max-width: none;
	font-size: 18px;
	line-height: 1.35;
	color: var(--fhs-orange-light);
}

@media (max-width: 600px) {
	.fhs-symbole {
		grid-template-columns: 1fr;
		gap: var(--fhs-space-m);
	}

	.fhs-symbole > li {
		flex-direction: row;
		align-items: center;
	}
}

/* Pfeil vor einem Button (Sicher surfen) */
.fhs-mit-pfeil {
	align-items: center;
}

.fhs-mit-pfeil::before {
	content: "";
	flex: 0 0 auto;
	width: 72px;
	height: 54px;
	background: url("../img/motive/pfeil.svg") no-repeat center / contain;
}

/* Motiv neben dem Einleitungssatz, nur auf breiten Bildschirmen.
   Review Anna 18.10.2026: Absolut positioniert lag es auf der Notfallseite
   über Linie und Notfallzeile. Jetzt im Textfluss wie im Entwurf v1.2:
   Einleitung links, Motiv rechts daneben, beide mittig zueinander. */
.fhs-titelmotiv {
	display: none;
}

@media (min-width: 980px) {
	.fhs-textseite:has(> .fhs-titelmotiv) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 240px;
		column-gap: var(--fhs-space-xl);
		align-items: center;
	}

	.fhs-textseite:has(> .fhs-titelmotiv) > * {
		grid-column: 1;
	}

	.fhs-textseite > .fhs-titelmotiv {
		display: block;
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 240px;
		max-width: none;
	}

	.fhs-titelmotiv img {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* --------------------------------------------------------------------------
   17. Kontaktformulare (fhs-core, Shortcode [fhs_kontaktformular])

   Felder mindestens so hoch wie Buttons (56 px), 2 px Rahmen in Schiefer
   (12,08:1 auf Papier, Nicht-Text-Kontrast >= 3:1). Fehler in Orange-Dunkel
   mit Text, nie nur über Farbe. Honeypot unsichtbar und nicht erreichbar.
   -------------------------------------------------------------------------- */
.fhs-formular {
	display: grid;
	gap: var(--fhs-space-m);
	margin-top: var(--fhs-space-m);
}

/* Nach dem Absenden springt die Seite zum Formular. Auf breiten Bildschirmen
   liegt dann oben die feste Aktionsleiste; sie darf die Meldung nicht verdecken. */
.fhs-formular,
#an-das-frauenhaus,
#an-die-frauenberatungsstelle {
	scroll-margin-top: calc(var(--fhs-leiste-hoehe) + var(--fhs-space-m));
}

.fhs-formular__feld {
	display: grid;
	gap: var(--fhs-space-xs);
}

.fhs-formular label {
	font-weight: 600;
	color: var(--fhs-schiefer);
}

.fhs-formular__pflicht,
.fhs-formular__frei {
	font-weight: 400;
	color: var(--fhs-ink);
}

.fhs-formular input[type="text"],
.fhs-formular textarea {
	width: 100%;
	min-height: var(--fhs-button-hoehe);
	padding: 12px 14px;
	border: 2px solid var(--fhs-schiefer);
	border-radius: var(--fhs-radius);
	background: var(--fhs-white);
	color: var(--fhs-ink);
	font: inherit;
	font-size: var(--fhs-fs-fliesstext);
	line-height: 1.5;
}

.fhs-formular textarea {
	min-height: 12rem;
	resize: vertical;
}

.fhs-formular [aria-invalid="true"] {
	border-color: var(--fhs-orange-dark);
	border-width: 3px;
}

.fhs-formular__feld--wahl {
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: start;
	column-gap: var(--fhs-space-s);
}

.fhs-formular__feld--wahl .fhs-formular__fehler {
	grid-column: 1 / -1;
}

.fhs-formular input[type="checkbox"] {
	width: 28px;
	height: 28px;
	margin: 2px 0 0;
	accent-color: var(--fhs-orange-dark);
}

.fhs-formular__feld--wahl label {
	font-weight: 400;
	color: var(--fhs-ink);
}

.fhs-formular__fehler {
	margin: 0;
	color: var(--fhs-orange-dark);
	font-weight: 600;
}

.fhs-formular__fehler::before {
	content: "Fehler: ";
}

.fhs-formular__meldung {
	padding: var(--fhs-space-m);
	border-left: 6px solid var(--fhs-orange-dark);
	background: var(--fhs-orange-light);
	color: var(--fhs-ink);
}

.fhs-formular__meldung p,
.fhs-formular__meldung ul {
	margin: 0;
}

.fhs-formular__meldung ul {
	margin-top: var(--fhs-space-xs);
	padding-left: 1.25em;
}

.fhs-formular--fertig {
	padding: var(--fhs-space-m);
	border-left: 6px solid var(--fhs-schiefer);
	background: var(--fhs-orange-light);
}

.fhs-formular--fertig p {
	margin: 0;
}

.fhs-formular--fertig p + p {
	margin-top: var(--fhs-space-xs);
}

.fhs-formular__titel {
	font-weight: 600;
	color: var(--fhs-schiefer);
}

.fhs-formular .wp-block-buttons {
	margin: 0;
}

.fhs-formular .wp-block-button__link {
	border: 0;
	cursor: pointer;
}

/* Honeypot: aus dem Fluss und für Screenreader verborgen (aria-hidden im HTML). */
.fhs-formular__falle {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   18. Feinschliff nach dem Review von Anna (18.10.2026, Desktop)

   - Buttons direkt nach Listen, Anlaufstellen und Kontodaten hatten keinen
     Abstand (Absätze bringen ihren eigenen mit, Listen nicht).
   - Symbole über den Kontodaten klebten an der ersten Linie.
   - Unter der letzten Linie der Schritte fehlte Luft.
   - Notfallzeile: Satz und Zusatz hatten verschiedene Breiten und standen
     zentriert, dadurch zwei linke Kanten. Jetzt beide linksbündig an der
     Kante des Inhalts.
   - Kurze Abschnitte der Unterseiten: Motiv unter dem Text statt unter der
     Überschrift, damit rechts keine leere Fläche bleibt (.fhs-motiv--nachtext).
   -------------------------------------------------------------------------- */
:where(.fhs-stellen, .fhs-konto__daten, .fhs-meldungen, .wp-block-latest-posts, .wp-block-list, .fhs-schritte, .fhs-symbole) + .wp-block-buttons {
	margin-top: var(--fhs-space-l);
}

.fhs-symbole {
	margin-bottom: var(--fhs-space-l);
}

.fhs-schritte + * {
	margin-top: var(--fhs-space-l);
}

.fhs-notfall {
	text-align: start;
}

.fhs-notfall > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.fhs-notfall-footer > .fhs-notfall {
	max-width: var(--fhs-bahn);
	margin-inline: auto !important;
}

.fhs-motiv--nachtext {
	width: 260px;
	max-width: 70%;
	margin-top: var(--fhs-space-l);
}