/*
Theme Name: Fürer Custom
Theme URI: https://fuerer.ch/
Author: Fürer AG
Description: Relaunch-Theme der Fürer AG. Gebäudetechnik nachhaltig innovativ. Farb- und Schriftwerte aus dem bestehenden Auftritt fuerer.ch übernommen.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: fuerer-custom
*/

/* ==========================================================================
   Designtoken – übernommen aus dem Elementor-Kit von fuerer.ch
   ========================================================================== */
:root {
	--fuerer-primary: #C90019;
	/* Dunkle Variante mit demselben Helligkeitsabstand wie zuvor (L* −9). */
	--fuerer-primary-dark: #A10014;
	--fuerer-secondary: #54595F;
	--fuerer-text: #202020;
	/* Der Akzent lag bei Orange. Er ist jetzt Schwarz – dieselbe Farbe wie der
	   Fliesstext, damit Überfahr-Zustände ruhig bleiben und nichts neben Rot
	   um Aufmerksamkeit konkurriert. Auf dunklem Grund greift --fuerer-akzent-hell. */
	/* Voll Schwarz, nicht das leicht aufgehellte Schwarz des Fliesstextes –
	   der Überfahr-Zustand soll sich deutlich absetzen. */
	--fuerer-schwarz: #000000;
	--fuerer-accent: var(--fuerer-schwarz);
	--fuerer-akzent-hell: rgba(255, 255, 255, .72);
	--fuerer-white: #FFFFFF;
	--fuerer-paper: #F5F5F4;
	--fuerer-paper-strong: #ECECEA;
	--fuerer-line: rgba(32, 32, 32, .14);
	/* Markenverlauf: drei Lichtquellen über dunklem Weinrot. Einmal definiert,
	   damit Kennzahlenblock, Notfallband und Notfallblock dieselbe Fläche
	   tragen und eine Änderung an einer Stelle genügt. */
	--fuerer-verlauf-grund: #7c1f2d;
	--fuerer-verlauf:
		radial-gradient(70% 60% at 62% 4%,
			rgba(255, 110, 58, .90) 10%,
			rgba(247, 140, 80, .55) 30%,
			rgba(240, 110, 55, 0) 65%),
		radial-gradient(95% 85% at 55% 10%,
			rgba(224, 96, 52, .40) 0%,
			rgba(224, 96, 52, 0) 62%),
		radial-gradient(58% 78% at 6% 86%,
			rgba(205, 20, 18, .90) 0%,
			rgba(205, 20, 18, 0) 65%);
	--fuerer-ink-inverse: rgba(255, 255, 255, .78);

	--fuerer-font: "Raleway", "Helvetica Neue", Arial, sans-serif;
	--fuerer-container: 1480px;
	--fuerer-container-narrow: 980px;
	--fuerer-gutter: clamp(1.25rem, 5.5vw, 5rem);
	--fuerer-section-space: clamp(3rem, 7vw, 6.5rem);
	--fuerer-radius: 2px;
	--fuerer-box-radius: 1rem;        /* Rahmen der Boxen auf fuerer.ch */
	--fuerer-box-border: #EF5325;     /* oranger Rahmen */
	--fuerer-flyout-bg: #F9F6F6;      /* Grund des Menü-Flyouts */
	--fuerer-flyout-link: #55595C;
	/* Früher ein eigenes Rot (#DD2B28) aus dem Elementor-Bestand. Seit das CI-Rot
	   feststeht, folgt das Flyout ihm – zwei Rottöne nebeneinander lesen sich
	   als Fehler, nicht als Absicht. */
	--fuerer-flyout-hover: var(--fuerer-primary);
	--fuerer-header-height: 138px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--fuerer-white);
	color: var(--fuerer-text);
	font-family: var(--fuerer-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--fuerer-primary); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: var(--fuerer-accent); }

:focus-visible { outline: 3px solid var(--fuerer-accent); outline-offset: 2px; }
/* Auf dunklen Flächen wäre ein schwarzer Fokusrahmen nicht zu sehen. */
.site-header :focus-visible,
.rail :focus-visible,
.overlay :focus-visible,
.site-footer :focus-visible,
.ci-bg :focus-visible,
.banner :focus-visible,
.section--cta .cta :focus-visible { outline-color: #fff; }

h1, h2, h3, h4 { font-family: var(--fuerer-font); margin: 0 0 .5em; color: var(--fuerer-text); }
h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 200; line-height: 1.05; color: var(--fuerer-primary); }
h2 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); font-weight: 300; line-height: 1.25; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 400; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }
h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
h4 { font-size: 1.2rem; font-weight: 600; line-height: 1.3; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .5em; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--fuerer-primary); color: #fff; padding: .75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

.shell {
	width: 100%;
	max-width: var(--fuerer-container);
	margin-inline: auto;
	padding-inline: var(--fuerer-gutter);
}
.shell--narrow { max-width: var(--fuerer-container); }
.shell--narrow > * { max-width: min(var(--fuerer-container-narrow), 100%); }

/* ==========================================================================
   Kopfbereich – transparent über dem Banner, wie auf fuerer.ch
   ========================================================================== */
/* Der Kopfbereich bleibt beim Scrollen oben stehen – wie auf fuerer.ch. Über
   dem Banner liegt er zunächst frei; ab 80 Pixel Scrollstrecke legt ihn das
   Skript auf ein dunkles Band («is-fixiert»), damit die weisse Schrift auch
   über hellen Bildern lesbar bleibt. */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 60;
	padding-block: 25px;
	/* «transform» stammt aus dem Wegschieben beim Runterscrollen, die übrigen
	   Eigenschaften aus dem dunklen Band ab 80 Pixeln – beide Verhalten laufen
	   zusammen. */
	transition: transform .5s ease, padding-block .3s ease, background-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-fixiert {
	padding-block: 10px;
	background-color: rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.site-header .custom-logo-link,
.site-header .site-brand img,
.site-header .custom-logo { transition: width .3s ease, height .3s ease; }
.site-header.is-fixiert .site-brand img,
.site-header.is-fixiert .custom-logo { width: 72px; height: 72px; }

@media (prefers-reduced-motion: reduce) {
	.site-header, .site-header .custom-logo { transition: none; }
}
.site-header--hidden { transform: translateY(-100%); }
/* Das dunkle Band trägt «.site-header.is-fixiert» – siehe oben. */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 5px; }

/* Ohne Banner steht nichts unter dem Kopfbereich, über das er sich legen
   könnte – dann braucht der Inhalt oben Platz, sonst läuft die erste Zeile
   hinter das Logo. */
body.no-banner { padding-top: 140px; }
@media (max-width: 1024px) { body.no-banner { padding-top: 104px; } }

.site-brand img, .custom-logo { width: 100px; height: 100px; object-fit: contain; }
.custom-logo-link { display: block; line-height: 0; }
.site-brand__text { display: block; text-decoration: none; }
.site-brand__name {
	display: inline-block; background: var(--fuerer-primary); color: #fff;
	padding: .9rem 1.1rem; font-size: 1.35rem; font-weight: 700;
}

.site-header__tools { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4.5rem); }
.header-tool {
	display: inline-flex; align-items: center; gap: .7rem;
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; font-size: 1.25rem; font-weight: 400; line-height: 1.2;
	color: #fff; text-decoration: none; white-space: nowrap;
}
/* Kopfzeilen-Schaltflächen stehen weiss über dem Banner – dort hellt der
   Überfahr-Zustand auf, statt abzudunkeln. */
.header-tool:hover, .header-tool:focus-visible, .header-tool[aria-expanded="true"] { color: var(--fuerer-akzent-hell); }
.header-tool__icon { display: flex; }

/* Der Kopfbereich ist auf jeder Seite transparent und liegt über dem Banner. */

/* ==========================================================================
   Schnellzugriffe am rechten Rand
   ========================================================================== */
.rail { position: fixed; right: 0; top: 30%; z-index: 55; }
.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rail__item { margin: 0; }
.rail__link {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
	width: 74px; min-height: 66px; padding: .6rem .35rem;
	background: var(--fuerer-primary); color: #fff !important; text-decoration: none;
	border-radius: 6px 0 0 6px;
	transition: background .18s ease;
	/* Gleiche Darstellung für Verweis und Schaltfläche */
	font: inherit; line-height: 1.2; text-align: center;
	border: 0; margin: 0; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	box-sizing: border-box;
}
/* Beim Überfahren schwarz statt orange – der Wechsel ist deutlicher und
   nimmt dem Rot des Grundzustands nichts weg. */
.rail__link:hover,
.rail__link:focus-visible { background: var(--fuerer-schwarz); }
.rail__label { font-size: .72rem; letter-spacing: .02em; }



/* Die frühere .ci-bg-Umsetzung mit Rauschebene und durchgehendem !important
   ist entfallen. Die gültige Definition steht weiter unten: derselbe Verlauf,
   ohne Körnung und ohne !important, damit sich Ausnahmen normal
   überschreiben lassen. */


/* ==========================================================================
   Overlays – Suche und Menu über den ganzen Bildschirm
   ========================================================================== */


   .overlay {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(0, 0, 0, .8);
	overflow-y: auto; overscroll-behavior: contain;
	animation: overlay-in .25s ease;
}
.overlay[hidden] { display: none; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.overlay__panel { min-height: 100vh; background: var(--fuerer-flyout-bg); box-shadow: 2px 8px 23px 3px rgba(0,0,0,.2); }
.overlay__panel--white { background: #fff; }
.overlay__head { display: flex; align-items: center; gap: 1.5rem; padding-block: 25px; }
.overlay__brand img, .overlay__brand .custom-logo { width: 100px; height: 100px; }
.overlay__title { font-size: 1.25rem; color: var(--fuerer-secondary); }
.overlay__emergency {
	display: inline-flex; align-items: center; gap: .7rem; margin-inline-start: auto;
	color: var(--fuerer-flyout-hover); text-decoration: none;
	font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 700; white-space: nowrap;
}
.overlay__emergency:hover { color: var(--fuerer-akzent-hell); }
.overlay__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; padding: 0; margin-inline-start: 1.5rem;
	background: none; border: 0; color: #3A3F57; cursor: pointer;
}
.overlay__head .overlay__title + .overlay__close { margin-inline-start: auto; }

/* Schliessen in den bildschirmfüllenden Ebenen – Suche und Menü. Das Kreuz ist
   ein gedrehtes Pluszeichen als Füllfläche und lässt sich nicht dicker
   zeichnen; Sichtbarkeit kommt deshalb aus dem Rahmen. Quadrat mit einer
   gerundeten Ecke, wie die Boxen und Eingabefelder der Seite. Gefüllt wird es
   erst beim Überfahren – dann ganz in Schwarz, dieselbe Bewegung wie bei den
   Schaltflächen und den Symbolen am rechten Rand. Das kleine Kontaktfenster
   bleibt unberührt: Dort steht das Kreuz dicht am Inhalt.

   Das Zeichen behält seine 56 px: Der Pfad füllt nur rund ein Drittel seines
   viewBox, verkleinert man das Bild, bleibt ein Pünktchen übrig. */
.overlay__panel:not(.overlay__panel--dialog) .overlay__close {
	width: 60px; height: 60px;
	border: 1px solid var(--fuerer-primary);
	border-radius: 0 0.75rem 0 0;
	background: none; color: var(--fuerer-primary);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.overlay__panel:not(.overlay__panel--dialog) .overlay__close:hover,
.overlay__panel:not(.overlay__panel--dialog) .overlay__close:focus-visible {
	background: var(--fuerer-schwarz);
	border-color: var(--fuerer-schwarz);
	color: #fff;
}

.overlay__close:hover { color: #787878; }
.overlay__body { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.overlay__claim {
	font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2;
	color: var(--fuerer-primary); margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
	padding-bottom: clamp(1.5rem, 2.5vw, 2rem); border-bottom: 1.9px solid #BFBFBF;
}

.flyout__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
.flyout__list > li { margin: 0; min-width: 0; }
.flyout__list > li > a {
	display: block; margin-bottom: .85rem;
	color: var(--fuerer-text); text-decoration: none;
	font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.flyout__list > li > a:hover { color: var(--fuerer-flyout-hover); }
.flyout__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.flyout__list .sub-menu li { margin: 0; }
.flyout__list .sub-menu a { display: block; padding: .35rem 0; color: var(--fuerer-flyout-link); text-decoration: none; font-size: 1rem; }
.flyout__list .sub-menu a:hover { color: var(--fuerer-flyout-hover); }

.overlay__quick {
	display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1.9px solid #BFBFBF;
}
.quick-card {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.1rem 1.25rem; text-decoration: none;
	color: var(--fuerer-text); background: #fff;
	border: 1px solid var(--fuerer-box-border); border-radius: var(--fuerer-box-radius);
}
.quick-card:hover { border-color: var(--fuerer-primary); color: var(--fuerer-primary); }
.quick-card__icon { color: var(--fuerer-primary); display: flex; }
.quick-card__title { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }

.search-form__label { display: block; margin-bottom: 1rem; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 200; line-height: 1.1; }
.search-form__row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; max-width: 900px; }
.search-form__input {
	flex: 1 1 320px; min-width: 0;
	border: 1px solid var(--fuerer-box-border); border-radius: 0 0.75rem 0 0;
	background: #fff; padding: .85rem 1rem; font: inherit;
	font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--fuerer-text);
}
.search-form__input:focus { outline: 0; border-color: var(--fuerer-primary); }
.overlay__hint { margin-top: 2rem; color: var(--fuerer-secondary); font-size: .95rem; }

/* «Suche» im Suchfenster trägt die Werte der H1: gleiche Schriftgrösse, gleiche
   dünne Schnittstärke, gleiches Rot. Ausgezeichnet bleibt es ein <span> – die
   Ebene liegt über einer Seite, die ihre eigene H1 schon hat, und eine zweite
   würde die Gliederung des Dokuments verfälschen. */
/* Der Inhalt der Suchebene steht mittig im Bildschirm statt oben angeklebt.
   Die Fläche ist bildschirmhoch; Kopfzeile und Rumpf rücken als eine Gruppe in
   die Mitte. Wird der Inhalt höher als der Bildschirm – kleine Fenster,
   eingeblendete Tastatur –, schiebt «auto» ihn wieder nach oben, statt ihn
   oben abzuschneiden. */
.overlay--search .overlay__panel {
	display: flex; flex-direction: column; justify-content: safe center;
}
.overlay--search .overlay__body { padding-block: 0 clamp(1.5rem, 3vw, 2.5rem); }

.overlay--search .overlay__title {
	font-size: clamp(1.6rem, 4vw, 2.5rem);
	font-weight: 200;
	line-height: 1.05;
	color: var(--fuerer-primary);
}

body.overlay-open { overflow: hidden; }

@media (max-width: 1024px) {
	.header-tool--emergency .header-tool__label { font-size: 1.05rem; }
	/* Die Schnellzugriffe rutschen an den unteren Rand; der Inhalt bekommt Platz dafür. */
	.rail { top: auto; bottom: 0; left: 0; right: 0; }
	.rail__list { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; }
	.rail__link { width: 100%; border-radius: 0; min-height: 60px; }
	body { padding-bottom: 62px; }
	.overlay { bottom: 62px; }
}
@media (max-width: 700px) {
	.site-brand img, .custom-logo { width: 58px; height: 58px; }
	.overlay__brand img, .overlay__brand .custom-logo { width: 58px; height: 58px; }
	.site-header { padding-block: 14px; }
	.site-header__tools { gap: 1.1rem; }
	.header-tool__label { display: none; }
	/* Die Notfallnummer bleibt stehen – sie ist der wichtigste Weg zum Betrieb. */
	.header-tool--emergency { gap: .4rem; }
	.header-tool--emergency .header-tool__label {
		display: inline; font-size: .92rem; font-weight: 600;
	}
	.overlay__emergency { font-size: 1rem; }
}

/* ==========================================================================
   Schaltflächen
   ========================================================================== */
.button {
	display: inline-block;
	/* Der schwarze Grund wird als Verlauf über die rote Fläche gezogen; die
	   Breite wächst beim Überfahren von links nach rechts. */
	background-color: var(--fuerer-primary);
	background-image: linear-gradient(to right, var(--fuerer-schwarz), var(--fuerer-schwarz));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: #fff !important;
	padding: .85rem 1.6rem;
	border: 0; border-radius: var(--fuerer-radius);
	font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em;
	text-decoration: none;
	transition: background-size .38s cubic-bezier(.2, .7, .3, 1), color .25s ease;
}
.button:hover, .button:focus-visible { background-size: 100% 100%; color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
	.button { transition: background-color .2s ease, color .2s ease; }
	.button:hover, .button:focus-visible { background-color: var(--fuerer-schwarz); }
}
.button--small { padding: .5rem 1.1rem; font-size: .8rem; }
.button--emergency { background: var(--fuerer-primary); font-size: clamp(1.4rem, 4vw, 2rem); padding: .7rem 1.6rem; letter-spacing: .02em; min-height: 56px; }
.link-more { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; text-decoration: none; }
.link-more::after { content: " →"; }

/* ==========================================================================
   Seitenkopf
   ========================================================================== */
.breadcrumb { margin: 0 0 clamp(2rem, 4vw, 3.5rem); font-size: .9rem; color: var(--fuerer-primary); text-align: start; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li[aria-current] { font-weight: 700; }
.breadcrumb li + li::before { content: "\2192"; margin-right: .45rem; color: var(--fuerer-primary); }
.breadcrumb a { color: var(--fuerer-primary); text-decoration: none; }
.breadcrumb a:hover { color: var(--fuerer-primary); }

.page-header { padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-header__inner > * { min-width: 0; }
.page-header__inner--with-image { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; text-align: start; }
.page-header { text-align: center; }
.page-header__title { max-width: min(35ch, 100%); margin-inline: auto; }

/* Blatt-Symbol über der Überschrift, wie auf der Startseite von fuerer.ch */
.page-header__icon { display: block; margin: 0 auto .9rem; color: var(--fuerer-primary); line-height: 0; }
.page-header__inner--with-image .page-header__icon { margin-inline: 0; }

/* Introtext laeuft zweispaltig und linksbuendig – zentrierter Fliesstext
   ueber die volle Breite liest sich schlecht. */
.answer-block {
	font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.65; color: var(--fuerer-secondary);
	max-width: min(96ch, 100%); margin: 1.5rem auto 0; text-align: start;
}
/* Zweispaltig ist der Normalfall und je Seite abschaltbar (Feld «Antwortblock
   zweispaltig»). Die Mindestbreite von 20rem lässt die zweite Spalte auf
   schmalen Schirmen von selbst entfallen. */
.answer-block--spalten { columns: 20rem 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
/* Einspaltig braucht der Absatz eine lesbare Zeilenlänge – 96 Zeichen sind das
   Mass für zwei Spalten, nicht für eine. */
.answer-block:not(.answer-block--spalten) { max-width: min(72ch, 100%); }
.answer-block p { margin-top: 0; }
.answer-block > :first-child { margin-top: 0; }
.answer-block p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .answer-block { columns: 1; } }
.page-header__inner--with-image .answer-block { columns: 1; margin-inline: 0; }

/* Auf einer Stellenausschreibung ist der Text unter der H1 ein Zweizeiler.
   Zwei Spalten zerlegen ihn in zwei Fetzen, statt ihn lesbar zu machen –
   deshalb hier einspaltig und in engerem Satzspiegel. */
.page--stelle .answer-block { columns: 1; max-width: min(70ch, 100%); }
.page-header__media img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.emergency-bar {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
	margin-top: 2rem; padding: 1rem 1.25rem;
	background-color: var(--fuerer-verlauf-grund);
	background-image: var(--fuerer-verlauf);
	background-repeat: no-repeat; background-size: cover; background-position: center;
	color: #fff;
}
.emergency-bar__label { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8rem; }
.emergency-bar__number { color: #fff !important; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; text-decoration: none; }
.emergency-bar__note { font-size: .85rem; color: rgba(255,255,255,.85); }

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.section { padding-block: clamp(2.25rem, 4.5vw, 4rem); }
.section + .section { padding-top: 0; }
.section--facts + .section, .section--cta + .section, .section--contact + .section { padding-top: clamp(2.25rem, 4.5vw, 4rem); }
.section__heading { max-width: min(35ch, 100%); }
.section__heading--small { text-transform: none; letter-spacing: .01em; color: #fff; }
.section__intro { font-size: 1rem; color: var(--fuerer-secondary); max-width: min(68ch, 100%); }
.section__footnote { font-size: .85rem; color: var(--fuerer-secondary); }
.section__more { margin-top: 2rem; }

.prose { max-width: min(72ch, 100%); }
.prose h3 { margin-top: 2rem; }
.prose strong { font-weight: 700; }
.prose a { font-weight: 600; }

/* Fakten – im Quelltext ausgeschriebene Endzahlen, keine Zähler-Animation */
/* Der Abschnitt ist nur noch Rahmen; die Fläche trägt der innere Block, damit
   der Verlauf auf Containerbreite endet und nicht über die ganze Seite läuft. */
/* Weniger Abstand als bei anderen Abschnitten: Der Block ist eine Fläche,
   kein Kapitel – er soll näher an den Inhalt rücken. */
.section--facts { padding-block: clamp(1.25rem, 2.5vw, 2.25rem) !important; }
.facts-flaeche.ci-bg { color: #fff; }
.facts-flaeche.ci-bg .section__heading--small { color: rgba(255,255,255,.62); }
.facts > *, .cards > *, .contact-grid > *, .reference-grid > * { min-width: 0; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid #fff; border-left: 1px solid #fff; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Auf schmalen Schirmen stehen zwei Angaben nebeneinander. */
@media (max-width: 699px) {
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Bleibt am Schluss ein Eintrag allein, nimmt er die ganze Zeile ein. */
	.facts > .facts__item:last-child:nth-child(odd) { grid-column: span 2; }
}

/* Sieben Angaben füllen zwei Zeilen ohne Lücke: drei und vier.
   Fünf standen früher hier als drei und zwei – sie stehen jetzt in einer
   Zeile, siehe «facts--einzeilig». */
@media (min-width: 1000px) {
	.facts--7 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
	.facts--7 > .facts__item { grid-column: span 3; }
	.facts--7 > .facts__item:nth-child(-n+3) { grid-column: span 4; }
}
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts__item { margin: 0; padding: 1.6rem 1.5rem; border-right: 1px solid #fff; border-bottom: 1px solid #fff; font-size: 1.02rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.facts__item strong { display: block; color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin-bottom: .35rem; }

.check-list { list-style: none; padding: 0; display: grid; gap: .9rem; max-width: min(80ch, 100%); }
.check-list > li { position: relative; padding-left: 2rem; margin: 0; }
.section--list .shell > .check-list {
	max-width: 100%;
	display: grid; gap: .75rem clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.check-list > li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 12px; height: 12px; background: var(--fuerer-primary);
}

/* Ablauf: Schritte stehen nebeneinander, die Nummer traegt den Block. */
.steps {
	list-style: none; padding: 0; margin-top: 1.75rem;
	display: grid; gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.steps > * { min-width: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps__item {
	margin: 0; padding: clamp(1.25rem, 2.2vw, 1.9rem);
	background: #fff; position: relative;
	display: flex; flex-direction: column; gap: .35rem;
}
.steps__number {
	display: block; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 200; line-height: 1;
	color: var(--fuerer-primary); margin-bottom: .5rem;
}
.steps__body { display: flex; flex-direction: column; gap: .35rem; }
.steps__title { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin: 0; color: var(--fuerer-text); }
.steps__text { margin: 0; font-size: .95rem; line-height: 1.55; }
.steps__duration { margin: .35rem 0 0; font-size: .82rem; color: var(--fuerer-secondary); }
@media (max-width: 620px) {
	.steps { grid-template-columns: 1fr; }
	.steps__item { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
	.steps__number { margin-bottom: 0; font-size: 2.4rem; }
}

.table-scroll { overflow-x: auto; max-width: 100%; }
.data-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .95rem; }
.data-table th, .data-table td { border-bottom: 1px solid var(--fuerer-line); padding: .85rem 1rem; text-align: left; vertical-align: top; }
.data-table thead th { background: var(--fuerer-paper); font-weight: 700; border-bottom-width: 2px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Auf dem Schirm stehen höchstens drei Kacheln nebeneinander – fünf Einträge
   ergeben so drei und zwei. Die beiden in der unteren Zeile nehmen dann je die
   halbe Breite ein. */
@media (min-width: 1000px) {
	.cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cards > li { grid-column: span 2; }
	/* Bei genau fünf Kacheln stehen zwei gross oben, drei darunter. */
	.cards > li:first-child:nth-last-child(5),
	.cards > li:first-child:nth-last-child(5) + li { grid-column: span 3; }
	/* Vier Kacheln ohne Bild stehen zwei mal zwei statt drei und eine allein. */
	.cards--anzahl-4:not(.cards--bilder) > li { grid-column: span 3; }
	/* Zwei Kacheln teilen sich die Breite, statt eine leere Spalte zu lassen. */
	.cards--anzahl-2 > li { grid-column: span 3; }
	/* Vier Bildkarten stehen in einer Reihe – drei und eine allein sähe verloren aus. */
	.cards--anzahl-4.cards--bilder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cards--anzahl-4.cards--bilder > li { grid-column: auto; }
}
@media (min-width: 700px) and (max-width: 999px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card__icon { display: flex; gap: .6rem; color: var(--fuerer-primary); line-height: 0; margin-bottom: .75rem; }
/* Auf schmalen Schirmen stehen Kacheln untereinander – nebeneinander bleibt
   für den Text zu wenig Platz. */
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card { margin: 0; background: var(--fuerer-paper); display: flex; flex-direction: column; border-bottom: 4px solid var(--fuerer-primary); }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: 1.5rem; }
.card__title { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: .6rem; }
.card__title a { text-decoration: none; color: var(--fuerer-text); }
.card__title a:hover { color: var(--fuerer-primary); }
/* Lauftext steht überall auf 1rem – in Kacheln, Bändern und Einleitungen
   gleichermassen. Kleiner gesetzt sind nur noch Auszeichnungen: Untertitel,
   Ansprechpersonen, Öffnungszeiten, Kennzahlen. */
.card__text { margin: 0; color: var(--fuerer-secondary); font-size: 1rem; }

.reference-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reference-grid { grid-template-columns: 1fr; } }
.reference-card { margin: 0; padding: 1.35rem 1.5rem; background: var(--fuerer-paper); border-left: 4px solid var(--fuerer-primary); }
.reference-card__title { font-size: 1.05rem; text-transform: none; font-weight: 700; margin-bottom: .3rem; }
.reference-card__title a { text-decoration: none; color: var(--fuerer-text); }
.reference-card__meta { margin: 0; font-size: .88rem; color: var(--fuerer-secondary); }

/* Verweisliste: eine Zeile je Beitrag, Titel als Link, darunter der Zusatz.
   Wächst mit jedem neuen Artikel, ohne unübersichtlich zu werden. */
.related-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fuerer-line); max-width: var(--fuerer-lauftext, 100%); }
.related-list > li { margin: 0; border-bottom: 1px solid var(--fuerer-line); }
.related-list__link {
	display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: center;
	padding: 1rem 0; text-decoration: none; color: inherit;
}
.related-list__link::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; color: var(--fuerer-primary); font-size: 1.15rem; transition: transform .2s ease; }
.related-list__titel { grid-column: 1; font-weight: 600; color: var(--fuerer-text); }
.related-list__note { grid-column: 1; margin-top: .2rem; font-size: .92rem; color: var(--fuerer-secondary); }
.related-list__link:hover .related-list__titel, .related-list__link:focus-visible .related-list__titel { color: var(--fuerer-primary); }
.related-list__link:hover::after, .related-list__link:focus-visible::after { transform: translateX(4px); }

/* Der Handlungsaufruf gehört zur selben Familie wie das Notfallband und
   trägt deshalb dieselbe Verlaufsfläche. */
.section--cta .cta {
	background-color: var(--fuerer-verlauf-grund);
	background-image: var(--fuerer-verlauf);
	background-repeat: no-repeat; background-size: cover; background-position: center;
	color: #fff;
	padding: clamp(1.75rem, 3.2vw, 2.75rem);
	border-radius: var(--fuerer-box-radius);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
}
.section--cta .cta { align-items: stretch; }
.section--cta .cta__heading { color: #fff; font-weight: 300; margin: 0; flex: 1 1 24ch; align-self: flex-start; }
.section--cta .cta__text { color: rgba(255, 255, 255, .92); margin: .5rem 0 0; flex: 1 1 100%; font-size: 1rem; order: 1; }
.section--cta .cta__action { margin: 0; flex: 0 0 auto; align-self: flex-end; }
@media (max-width: 700px) {
	.section--cta .cta {
		flex-direction: column; align-items: flex-start;
		gap: .6rem; padding: 1.25rem 1.25rem 1.5rem;
	}
	.section--cta .cta__heading { font-size: 1.2rem; line-height: 1.3; flex: 0 0 auto; }
	.section--cta .cta__text { margin: 0; font-size: .92rem; line-height: 1.5; }
	.section--cta .cta__action { order: 2; align-self: flex-start; margin-top: .3rem; }
	.section--cta .cta .button { padding: .6rem 1.15rem; font-size: .8rem; }
}
.section--cta .cta .button { background-color: #fff; color: var(--fuerer-primary) !important; font-weight: 700; }
/* Die Schrift wechselt schneller als der Grund einläuft, damit sie nie kurz
   rot auf Schwarz steht. */
.section--cta .cta .button { transition: background-size .38s cubic-bezier(.2, .7, .3, 1), color .12s ease; }
.section--cta .cta .button:hover, .section--cta .cta .button:focus-visible { color: #fff !important; }

/* Der Notfallblock steht als schmales rotes Band über die volle Breite. */
.section--cta-emergency .cta {
	background-color: var(--fuerer-verlauf-grund);
	background-image: var(--fuerer-verlauf);
	background-repeat: no-repeat; background-size: cover; background-position: center;
	color: #fff; border: 0;
	/* Gleiche Breite wie die Kundenstimmen, Aufteilung zwei Drittel zu einem. */
	max-width: min(108ch, 100%); margin-inline: auto;
	padding: clamp(1.75rem, 3.2vw, 2.75rem);
	border-radius: var(--fuerer-box-radius); ;
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: center; gap: .35rem clamp(1.5rem, 3.5vw, 3rem);
}
.section--cta-emergency .shell--narrow > .cta { max-width: min(108ch, 100%); }
.section--cta-emergency .cta__heading { grid-column: 1; grid-row: 1; color: #fff; font-size: clamp(1.15rem, 2vw, 1.5rem); margin: 0; }
.section--cta-emergency .cta__text { grid-column: 1; grid-row: 2; color: rgba(255, 255, 255, .92); margin: 0; font-size: 1rem; line-height: 1.55; }
.section--cta-emergency .cta__note { color: rgba(255, 255, 255, .82); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
/* Die Nummer steht ohne Fläche und ohne Unterstrich; das Symbol führt sie an. */
.cta__notruf {
	display: inline-flex; align-items: center; gap: .7rem;
	color: #fff !important; text-decoration: none;
}
.cta__notruf-icon { line-height: 0; opacity: .85; }
.cta__notruf-nummer {
	font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 300; letter-spacing: .03em;
	white-space: nowrap;
}
.cta__notruf:hover .cta__notruf-nummer { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.cta__heading { margin-bottom: .5rem; }
.cta__text { max-width: min(62ch, 100%); color: inherit; }
/* Links im Boxtext (Telefonnummern) müssen auf dem roten Verlauf lesbar bleiben. */
.section--cta .cta__text a { color: #fff; text-decoration: underline; text-underline-offset: .15em; white-space: nowrap; }
.section--cta .cta__text a:hover { text-decoration-thickness: 2px; }
.section--cta-dezent .cta__text a { color: var(--fuerer-primary); }
.cta__action { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.cta__note { font-size: .9rem; color: var(--fuerer-secondary); }
.section--cta-emergency .cta__note { color: rgba(255,255,255,.8); }

.note { background: var(--fuerer-paper); border-left: 4px solid var(--fuerer-secondary); padding: 1.1rem 1.35rem; margin: 0; color: var(--fuerer-secondary); }
.editor-warning { background: #FFF6E5; border-left: 4px solid var(--fuerer-accent); padding: 1rem 1.25rem; font-size: .92rem; }

.faq { display: grid; gap: .75rem; margin-top: 1.5rem; }
.faq__item {
	background: #fff; border: 1px solid var(--fuerer-box-border);
	border-radius: var(--fuerer-box-radius); overflow: hidden;
}
.faq__item.is-open { border-color: var(--fuerer-primary); }
.faq__heading { margin: 0; font-size: 1rem; text-transform: none; }
.faq__question {
	display: block; width: 100%; text-align: left;
	background: none; border: 0; padding: 1.1rem 3.25rem 1.1rem clamp(1.1rem, 2vw, 1.6rem);
	font: inherit; font-size: 1.02rem; font-weight: 600; color: var(--fuerer-text);
	cursor: pointer; position: relative;
}
.faq__question:hover { color: var(--fuerer-primary); }
.faq__question::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--fuerer-primary); font-size: 1.6rem; font-weight: 300; line-height: 1; }
.faq__item.is-open .faq__question::after { content: "–"; }
.faq__answer { padding: 0 clamp(1.1rem, 2vw, 1.6rem); color: var(--fuerer-secondary); } /* Antworten laufen über die volle Breite des Akkordeons. */
.faq__answer p { margin: 0; }
.faq__item--collapsible .faq__answer {
	display: grid; grid-template-rows: 0fr; padding-bottom: 0;
	transition: grid-template-rows .5s ease, padding-bottom .5s ease;
}
.faq__item--collapsible .faq__answer > p { overflow: hidden; min-height: 0; }
.faq__item--collapsible.is-open .faq__answer { grid-template-rows: 1fr; padding-bottom: 1.25rem; }

.contact-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.contact-card { background: var(--fuerer-paper); padding: 1.75rem; }
.contact-card__name { font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; }
.contact-card__subtitle { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.contact-card__line--emergency { font-weight: 600; }
.hours-list, .site-footer__hours { list-style: none; padding: 0; margin: 0; }
.hours-list li, .site-footer__hours li { display: flex; gap: .75rem; justify-content: space-between; border-bottom: 1px solid var(--fuerer-line); padding: .4rem 0; margin: 0; font-size: .93rem; }
.contact-map-note { margin-top: 1.5rem; }

.last-reviewed { max-width: var(--fuerer-container); margin: 0 auto; padding: 0 var(--fuerer-gutter) clamp(1rem, 2vw, 1.75rem); font-size: .85rem; color: var(--fuerer-secondary); }

/* ==========================================================================
   Fusszeile
   ========================================================================== */
.site-footer { background: #E6E8E4; color: var(--fuerer-text); margin-top: var(--fuerer-section-space); }
.site-footer a { color: var(--fuerer-text); text-decoration: none; }
.site-footer a:hover { color: var(--fuerer-primary); }
.site-footer__name { color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: .5rem; }
.site-footer__contact--emergency { border-left: 3px solid var(--fuerer-primary); padding-left: .85rem; }
.site-footer__hours li { border-color: var(--fuerer-line); }

/* ==========================================================================
   Reaktionsfähigkeit
   ========================================================================== */
@media (max-width: 980px) {
	.page-header__inner--with-image { grid-template-columns: 1fr; }
}


@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
	.site-header, .site-footer, .overlay { display: none; }
	.faq__item--collapsible .faq__answer { grid-template-rows: 1fr; padding-bottom: 1.25rem; }
	.faq__item--collapsible .faq__answer > p { overflow: visible; }
}


/* ==========================================================================
   Fussbereich nach dem Vorbild von fuerer.ch
   Vier Handlungsblöcke auf hellem Grund, darunter die Menüspalten mit den
   Öffnungszeiten, zuunterst soziale Netze, Rechtliches und Vermerk.
   ========================================================================== */

.footer-actions { background: #F7F7F7; }
.footer-main { background: #E6E8E4; }

.footer-actions__grid {
	display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.footer-actions__grid > * { min-width: 0; }
.footer-action p { color: var(--fuerer-text); font-size: 1rem; line-height: 1.5; margin-bottom: .7rem; }
.footer-action__icon { display: block; color: var(--fuerer-primary); line-height: 0; margin-bottom: 1rem; }
.footer-action__title {
	font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
	color: var(--fuerer-text); margin-bottom: .8rem;
}
.footer-action a { color: var(--fuerer-text); }
.footer-action a:hover { color: var(--fuerer-primary); }
.footer-action__more { margin-top: 1rem; }
.footer-action__more a { color: var(--fuerer-primary); }
.link-arrow { color: var(--fuerer-primary); font-weight: 500; text-decoration: none; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--fuerer-accent); }
.footer-action__nap { margin-bottom: .7rem; }
.footer-action__nap strong { color: var(--fuerer-text); font-weight: 700; }
.footer-action__nap--emergency { border-left: 3px solid var(--fuerer-primary); padding-left: .8rem; }
.footer-action__emergency-number { font-size: 1.2rem; font-weight: 700; }

/* Menüspalten und Öffnungszeiten stehen in einer Reihe. */
.footer-main__grid {
	display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
	grid-template-columns: minmax(0, 4fr) minmax(0, 1.35fr);
	padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.footer-main__grid > * { min-width: 0; }
.footer-main__title,
.site-footer__menu > li > a {
	display: block; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em;
	font-weight: 700; color: var(--fuerer-text); text-decoration: none; margin-bottom: 1rem;
}
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.site-footer__menu > li { margin: 0; }
.site-footer__menu .sub-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer__menu .sub-menu li { margin: 0; }
.site-footer__menu .sub-menu a { font-size: 1rem; line-height: 1.5; color: var(--fuerer-secondary); text-decoration: none; }
.site-footer__menu .sub-menu a:hover { color: var(--fuerer-primary); }

.footer-hours { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; font-size: 1rem; line-height: 1.5; }
.footer-hours dt { margin: 0; color: var(--fuerer-text); }
.footer-hours dd { margin: 0; color: var(--fuerer-secondary); }
.site-footer__note { margin-top: 1rem; font-size: .95rem; line-height: 1.5; color: var(--fuerer-secondary); }

/* Untere Leiste: soziale Netze, Rechtliches, Vermerk */
.site-footer__bar { background: #E6E8E4; border-top: 1px solid rgba(0, 0, 0, .08); font-size: .95rem; color: var(--fuerer-secondary); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center; padding-block: 1rem; }
.site-footer__bar p { margin: 0; }
.site-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
.site-footer__legal li { margin: 0; }
.site-footer__legal a { color: var(--fuerer-secondary); text-decoration: none; }
.site-footer__legal a:hover { color: var(--fuerer-primary); }

/* Soziale Netze wie auf fuerer.ch: 1 px roter Rahmen, oben rechts gerundet;
   beim Überfahren schwarze Fläche mit weissem Zeichen. */
.social-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.social-list li { margin: 0; }
.site-footer .social-list__link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 47px; height: 47px; padding: 11px; box-sizing: border-box;
	background: none; color: var(--fuerer-flyout-hover);
	border: 1px solid var(--fuerer-flyout-hover); border-radius: 0 0.75rem 0 0;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.site-footer .social-list__link:hover,
.site-footer .social-list__link:focus-visible {
	background: var(--fuerer-schwarz); border-color: var(--fuerer-schwarz); color: #fff;
}

@media (max-width: 980px) {
	.footer-actions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-main__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.footer-actions__grid { grid-template-columns: 1fr; }
	.site-footer__bar-inner { justify-content: flex-start; }
}

/* ==========================================================================
   Grosser Banner am Seitenanfang
   ========================================================================== */
.banner { position: relative; background: var(--fuerer-text); overflow: hidden; }
.banner__track { position: relative; }
.banner__slide { position: relative; display: none; }
.banner__slide.is-active { display: block; }
.banner--slider .banner__slide { animation: banner-fade .5s ease; }
@keyframes banner-fade { from { opacity: .35; } to { opacity: 1; } }

.banner { --banner-bildhoehe: clamp(480px, 70vh, 760px); }
.banner--large { --banner-bildhoehe: max(100svh, 560px); }
.banner--medium { --banner-bildhoehe: clamp(480px, 70vh, 760px); }
.banner--compact { --banner-bildhoehe: clamp(360px, 50vh, 540px); }
/* Schmales Band, etwa für eine einzelne Stellenausschreibung: genug, um den
   Kopfbereich zu tragen, zu wenig, um vom Inhalt abzulenken. */
.banner--klein { --banner-bildhoehe: clamp(190px, 28vh, 300px); }
/* Banner ohne Motiv: Die Verlaufsfläche ersetzt das Bild. Der Textrahmen
   bekommt keine eigene Fläche mehr – auf dem Verlauf wäre er ein Kasten im
   Kasten. Die Höhe kommt aus dem Inhalt, nicht aus einem fehlenden Bild. */
.banner--ohne-bild {
	background-color: var(--fuerer-verlauf-grund);
	background-image: var(--fuerer-verlauf);
	background-repeat: no-repeat; background-size: cover; background-position: center;
}
.banner--ohne-bild .banner__slide { min-height: var(--banner-bildhoehe); display: flex; }
.banner--ohne-bild .banner__content { position: static; background: none; }
.banner--ohne-bild .banner__inner-frame {
	background: none; border: 0; padding-inline: 0;
	/* Der Weichzeichner des Bannerrahmens zeichnet auf dem Verlauf ein
	   helleres Rechteck – hier gibt es kein Bild, das er beruhigen müsste. */
	-webkit-backdrop-filter: none; backdrop-filter: none;
	max-width: min(56ch, 100%);
}
/* Ohne Bild bleibt der Banner flach: Die Überschrift trägt die Höhe, also
   fällt sie kleiner aus als über einem Motiv. */
.banner--ohne-bild .banner__heading { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.banner--ohne-bild .banner__text { font-size: 1rem; }
.banner__image { width: 100%; height: var(--banner-bildhoehe); object-fit: cover; display: block; }

.banner__content {
	position: absolute; inset: 0;
	display: flex; align-items: center;
	background: rgba(0, 0, 0, var(--banner-overlay, .19));
	padding-top: var(--fuerer-header-height);
}
.banner__dots { z-index: 2; }
.banner__inner { color: #fff; max-width: var(--fuerer-container); width: 100%; }
.banner__kicker {
	margin: 0 0 .75rem; font-size: .85rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .18em; color: #fff;
}
.banner__heading {
	margin: 0 0 1rem; max-width: min(20ch, 100%);
	font-size: clamp(1.9rem, 4.6vw, 3.5rem); font-weight: 200; line-height: 1.05; color: #fff;
}
.banner__text { margin: 0; max-width: min(52ch, 100%); font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(255,255,255,.92); }
.banner__action { margin: 1.75rem 0 0; }

/* Aufzaehlung im Bannertext – eingerueckte Punkte wie auf fuerer.ch */
.banner__text ul { margin: .5rem 0; padding-left: 1.6rem; list-style: disc; }
.banner__text ul li { margin: 0; padding: 0; }
.banner__text ol { margin: .5rem 0; padding-left: 1.6rem; }
.banner__text p { margin: 0 0 .6rem; }
.banner__text > :last-child { margin-bottom: 0; }

/* Schriftgrössen je Bannerhöhe: Der Textblock soll den Bildausschnitt füllen,
   ihn aber nie sprengen. Gross bleibt der Startseite vorbehalten. */
.banner--medium .banner__kicker { margin-bottom: .55rem; font-size: .78rem; letter-spacing: .16em; }
.banner--medium .banner__heading {
	margin-bottom: .75rem; max-width: min(17ch, 100%);
	font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.1;
}
.banner--medium .banner__text { max-width: min(46ch, 100%); font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.55; }
.banner--medium .banner__action { margin-top: 1.25rem; }
/* Zwei gleichwertige Wege stehen nebeneinander, nicht untereinander. */
.banner__action { display: flex; flex-wrap: wrap; gap: .6rem .75rem; }
.banner .button--sekundaer { background: rgba(255,255,255,.12); color: var(--fuerer-white); border-color: var(--fuerer-white); }
.banner .button--sekundaer:hover { background: var(--fuerer-white); color: var(--fuerer-text); }

.banner--compact .banner__kicker { margin-bottom: .45rem; font-size: .72rem; letter-spacing: .14em; }
.banner--compact .banner__heading {
	margin-bottom: .6rem; max-width: min(16ch, 100%);
	font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.12;
}
.banner--compact .banner__text { max-width: min(42ch, 100%); font-size: .95rem; line-height: 1.5; }
.banner--compact .banner__action { margin-top: 1rem; }

.banner__dots { position: absolute; left: 0; right: 0; bottom: 1.25rem; display: flex; justify-content: center; gap: .6rem; }
.banner__dot {
	width: 20px; height: 12px; padding: 0; border: 1px solid #fff; background: transparent;
	border-radius: 2px; cursor: pointer;
}
.banner__dot:hover { background: rgba(255, 255, 255, .35); }
.banner__dot.is-active { background: var(--fuerer-primary); border-color: var(--fuerer-primary); }
.banner + .page-header { padding-top: clamp(1.75rem, 3.5vw, 3rem); }

@media (max-width: 980px) {
	.banner { background: var(--fuerer-paper); }
	.banner__slide { position: relative; }
	.banner__content { position: static; background: none; padding: 0; display: block; }
	.banner__inner { max-width: 100%; }
	.banner__dots { position: static; padding: 1rem 0; background: none; }
	.banner__dot { border-color: var(--fuerer-secondary); }

	/* Der Rahmen entfällt; er teilt sich in Auszeichnung mit Titel über dem
	   Bild und einen Kasten mit rotem Rahmen darunter. Die Auswahl ist bewusst
	   spezifischer als die Regel im Abschnitt «Boxen», die weiter unten steht. */
	.banner .banner__inner-frame,
	.banner--medium .banner__inner-frame,
	.banner--compact .banner__inner-frame {
		border: 0; background: none; border-radius: 0; padding: 0; max-width: 100%;
	}

	/* Auszeichnung und Titel liegen auf dem Bild. */
	.banner__lead {
		position: absolute; left: 0; right: 0; top: calc(var(--fuerer-header-height) - 20px);
		padding-inline: var(--fuerer-gutter);
		text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
	}
	.banner__kicker { color: #fff; }
	.banner__heading, .banner--medium .banner__heading, .banner--compact .banner__heading { color: #fff; }

	/* Der Text steht darunter in einem Kasten mit rotem Rahmen. */
	.banner__box {
		/* Rundherum derselbe Abstand zwischen grauer Fläche und rotem Rahmen.
		   Seitlich wird die Einrückung der Hülle herausgerechnet. */
		--kasten-luft: 1.5rem;
		margin: var(--kasten-luft) calc(var(--kasten-luft) - var(--fuerer-gutter));
		padding: 1.1rem 1.25rem 1.35rem;
		background: none;
		border: 1px solid var(--fuerer-primary);
		border-radius: 0 0.75rem 0 0;
	}
	.banner__text, .banner--medium .banner__text, .banner--compact .banner__text { color: var(--fuerer-text); }
	.banner__text ul li { color: var(--fuerer-text); }
	.banner__action { margin-top: 1rem; }
	.referenz__zeitraum { color: var(--fuerer-secondary); }

	/* Auszeichnung und Titel stehen wahlweise oben oder unten im Bild.
	   Beide Angaben rechnen von der Oberkante des Bildes, weil der Textkasten
	   unter dem Bild zur selben Fläche gehört. */
	.banner__slide--mobil-oben .banner__lead {
		top: calc(var(--fuerer-header-height) - 20px); bottom: auto;
	}
	.banner__slide--mobil-unten .banner__lead {
		/* Genug Abstand, damit der Titel nicht in die Punkte des Bildwechslers läuft. */
		top: calc(var(--banner-bildhoehe) - 62px - 12rem); bottom: auto;
	}

	/* Die Punkte des Bildwechslers liegen auf dem Bild, oberhalb der
	   Schnellzugriffe am unteren Rand (die Leiste ist 62 px hoch). */
	.banner__dots {
		position: absolute; left: 0; right: 0; z-index: 3;
		top: calc(var(--banner-bildhoehe) - 62px - 2.75rem); bottom: auto;
		padding: 0; background: none;
	}
	.banner__dot { border-color: #fff; }
}


/* ==========================================================================
   Boxen mit Rahmen – Werte aus dem Auftritt fuerer.ch
   (1 px Rahmen in Akzentorange, 20 px Radius, weisser Grund)
   ========================================================================== */
/* Nur die Ecke oben rechts ist gerundet – wie bei allen übrigen Flächen. */
.contact-card, .reference-card, .steps__item, .note, .quick-card, .cta {
	border-radius: 0 0.75rem 0 0;
}
.card {
	background: #fff; border: 1px solid var(--fuerer-box-border); border-bottom-width: 1px;
	border-radius: 0 0.75rem 0 0;
	overflow: hidden;
}
.card:hover { border-color: var(--fuerer-primary); }
.card__media img { border-radius: 0; }
.contact-card, .reference-card, .steps__item {
	background: #fff; /* border: 1px solid var(--fuerer-box-border); */
}
.reference-card { border-left-width: 1px; }
.note { background: #fff; border: 1px solid var(--fuerer-secondary); border-left-width: 1px; }
.section--cta .cta { border: 0; }
.data-table { border-radius: var(--fuerer-box-radius); overflow: hidden; }
.facts { border-radius: var(--fuerer-box-radius); overflow: hidden; }
.editor-warning { border-radius: var(--fuerer-box-radius); }

/* Banner: Textblock im weissen Rahmen, wie auf der Startseite von fuerer.ch */
.banner__inner-frame {
	border: 1px solid rgba(255, 255, 255, .85);
	background: rgba(0, 0, 0, .3);
	border-radius: 0 0.75rem 0 0;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	max-width: min(70ch, 100%);
}
.banner--medium .banner__inner-frame { padding: clamp(1.25rem, 2.6vw, 2.25rem); max-width: min(70ch, 100%); }
.banner--compact .banner__inner-frame { padding: clamp(1rem, 2vw, 1.6rem); max-width: min(70ch, 100%); }

/* Ab Tabletbreite bekommt der Rahmen eine Milchglasfläche: Was hinter ihm
   liegt, wird leicht unscharf. Der Text steht dadurch auch über unruhigen
   Motiven ruhig, ohne dass die Fläche dunkler werden muss – gerade beim
   Anlagenbuch auf der Geschichte-Seite, wo dichte Handschrift unter dem Text
   liegt. Auf schmalen Schirmen bleibt es aus: Dort füllt der Rahmen fast die
   Breite, und der Weichzeichner kostet auf Mobilgeräten spürbar Leistung.
   Ohne Unterstützung im Browser bleibt schlicht die deckende Fläche. */
@media (min-width: 701px) {
	@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
		.banner__inner-frame {
			-webkit-backdrop-filter: blur(4px) saturate(115%);
			backdrop-filter: blur(4px) saturate(115%);
			background: rgba(0, 0, 0, .22);
		}
	}
}

/* Auf schmalen Schirmen wird der Rahmen flacher, damit das Bild sichtbar bleibt */
@media (max-width: 700px) {
	.banner__inner-frame, .banner--medium .banner__inner-frame, .banner--compact .banner__inner-frame { padding: 1.1rem 1.25rem; max-width: 100%; }
	.banner__heading, .banner--medium .banner__heading, .banner--compact .banner__heading { font-size: clamp(1.35rem, 6.5vw, 1.9rem); max-width: 100%; }
	.banner__text, .banner--medium .banner__text, .banner--compact .banner__text { font-size: .95rem; max-width: 100%; }
}


/* ==========================================================================
   Bilderblock – Bilder, Alt-Texte und Unterschriften kommen aus ACF
   ========================================================================== */
.image-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); margin-top: 1.75rem; }
.image-grid > * { min-width: 0; }
.image-grid--two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.image-grid--three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.image-grid__item { margin: 0; }
.image-grid__item img {
	width: 100%; height: auto; display: block;
	border-radius: var(--fuerer-box-radius);
	border: 1px solid var(--fuerer-box-border);
}
.image-grid--landscape .image-grid__item img { aspect-ratio: 3 / 2; object-fit: cover; }
.image-grid--wide .image-grid__item img { aspect-ratio: 16 / 9; object-fit: cover; }
.image-grid--square .image-grid__item img { aspect-ratio: 1 / 1; object-fit: cover; }
.image-grid--portrait .image-grid__item img { aspect-ratio: 3 / 4; object-fit: cover; }
.image-grid__caption { margin-top: .6rem; font-size: .88rem; line-height: 1.5; color: var(--fuerer-secondary); }


/* ==========================================================================
   Symbole im Block «Auf einen Blick»
   ========================================================================== */
.facts__item { display: flex; flex-direction: column; gap: .75rem; }
.facts__icon { display: block; /* color: var(--fuerer-primary); */ color: #FFF; line-height: 0; }
.facts__body > :last-child { margin-bottom: 0; }


/* ==========================================================================
   Kontakt-Fenster (Schnellzugriff «Kontakt»)
   ========================================================================== */
.overlay--dialog { display: grid; place-items: center; padding: 1.5rem; }
.overlay__backdrop {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border: 0; padding: 0; background: transparent; cursor: pointer;
}
.overlay__panel--dialog {
	position: relative; width: min(560px, 100%); height: auto; min-height: 0; max-height: 85vh; overflow-y: auto;
	background: var(--fuerer-flyout-bg); border-radius: var(--fuerer-box-radius);
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.overlay__panel--dialog .overlay__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0; }
.overlay__panel--dialog .overlay__body { padding: 1.5rem 0 0; }
.overlay__title { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.25rem; color: var(--fuerer-primary); }
.overlay__title-icon { color: var(--fuerer-primary); line-height: 0; }
.overlay__panel--dialog .overlay__close { color: var(--fuerer-flyout-link); }

.dialog__intro { margin: 0 0 1.25rem; color: var(--fuerer-secondary); }
.dialog__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.dialog__way { display: flex; align-items: flex-start; gap: .9rem; }
.dialog__way-icon { color: var(--fuerer-primary); line-height: 0; flex: 0 0 auto; margin-top: .15rem; }
.dialog__way-text { display: block; }
.dialog__way-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fuerer-secondary); }
.dialog__way-value { font-size: 1.05rem; color: var(--fuerer-text); text-decoration: none; font-weight: 600; }
a.dialog__way-value:hover { color: var(--fuerer-primary); }

.dialog__hours { margin-top: 1.75rem; }
.dialog__hours-title { font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-bottom: .6rem; color: var(--fuerer-secondary); }
.dialog__action { margin: 1.75rem 0 0; }
.dialog__hours .hours { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; margin: 0; }
.dialog__hours .hours__day { margin: 0; color: var(--fuerer-secondary); font-size: .93rem; }
.dialog__hours .hours__time { margin: 0; font-size: .93rem; }

/* Häufige Fragen mittig ausrichten */
.section--faq .section__heading { text-align: center; margin-inline: auto; }
.section--faq .section__intro { text-align: center; margin-inline: auto; }
/* Fragenblock und Handlungsaufforderung stehen mittig und gleich breit. */
.section--faq .shell--narrow > *,
.section--cta .shell--narrow > * { margin-inline: auto; }
/* Der Notfallblock ist so breit wie die Kundenstimmen. */
.section--cta-emergency .shell--narrow > * { max-width: min(108ch, 100%); }


/* ==========================================================================
   Ansprechpartner – Porträt links, Angaben rechts (wie auf fuerer.ch)
   ========================================================================== */
.section__heading--centered { text-align: center; margin-inline: auto; }
.people { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.people > * { min-width: 0; }
/* Eine oder zwei Personen stehen mittig unter dem zentrierten Titel, statt links am Rand zu kleben. */
.people:has(> .person:only-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.people:has(> .person:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 520px)); justify-content: center; }
@media (max-width: 760px) { .people:has(> .person:nth-child(2):last-child) { grid-template-columns: minmax(0, 560px); } }
.person { margin: 0; display: flex; gap: clamp(1rem, 2vw, 1.5rem); align-items: flex-start; }
.person__portrait { margin: 0; flex: 0 0 clamp(110px, 14vw, 150px); }
.person__portrait img { width: 100%; height: auto; display: block; border-radius: 0 var(--fuerer-box-radius) 0 0; object-fit: cover; aspect-ratio: 3 / 4; }
.person__body { min-width: 0; }
.person__name { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin: 0 0 .25rem; }
.person__role { margin: 0 0 .5rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fuerer-primary); }
.person__function { margin: 0 0 .75rem; font-size: .93rem; line-height: 1.55; color: var(--fuerer-secondary); }
.person__contact { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; } /* Telefonnummer steht unter dem Mail-Link. */
.person__phone { font-weight: 600; text-decoration: none; color: var(--fuerer-text); }
.person__phone:hover { color: var(--fuerer-primary); }
@media (max-width: 480px) { .person { flex-direction: column; } .person__portrait { flex-basis: auto; max-width: 160px; } }


/* ==========================================================================
   Karrierebereich – Teaser, Stellen, Vorteile, Stimmen
   ========================================================================== */
.section__intro--centered { text-align: center; margin-inline: auto; }
/* Zweispaltige Einleitung – je Abschnitt wählbar. Zentriert gesetzter Text
   über zwei Spalten läse sich schlecht, deshalb rückt er links aus.
   Die Mindestbreite lässt die zweite Spalte auf schmalen Schirmen entfallen. */
.section__intro--spalten {
	columns: 20rem 2; column-gap: clamp(2rem, 4vw, 3.5rem);
	text-align: start; max-width: min(104ch, 100%);
}
.section__intro--spalten > * { break-inside: avoid; }

.teasers { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.teasers > * { min-width: 0; }
.teaser {
	margin: 0; background: #fff; border: 1px solid var(--fuerer-box-border);
	border-radius: 0 var(--fuerer-box-radius) 0 0; overflow: hidden;
	display: flex; flex-direction: column;
}
.teaser:hover { border-color: var(--fuerer-primary); }
.teaser__media img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.teaser__body { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.teaser__kicker { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--fuerer-primary); font-weight: 600; }
.teaser__heading { margin: 0; font-size: clamp(1.2rem, 2vw, 1.55rem); text-transform: none; letter-spacing: 0; font-weight: 300; }
.teaser__text { margin: 0; color: var(--fuerer-secondary); }
.teaser__action { margin: auto 0 0; padding-top: .75rem; }

.jobs { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.jobs > * { min-width: 0; }
.job {
	margin: 0; position: relative; background: #fff;
	border: 1px solid var(--fuerer-box-border); border-radius: var(--fuerer-box-radius);
	padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: .6rem;
}
.job__download { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--fuerer-primary); line-height: 0; }
.job__download:hover { color: var(--fuerer-accent); }
.job__title { margin: 0; padding-right: 2.5rem; font-size: 1.1rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.job__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.job__tag { font-size: .8rem; padding: .2rem .7rem; border: 1px solid var(--fuerer-line); border-radius: 999px; color: var(--fuerer-secondary); }
.job__text { margin: 0; font-size: .95rem; color: var(--fuerer-secondary); }
.job__action { margin: auto 0 0; padding-top: .5rem; }
.jobs__empty { margin-top: 1.5rem; color: var(--fuerer-secondary); text-align: center; }

/* Vorteile wie auf fuerer.ch: Symbol und Beschriftung nebeneinander. Die
   Symbole tragen die Aussage mit – sie sind deshalb deutlich grösser als der
   Text, nicht bloss ein Aufzählungszeichen. Das Raster hält die Beschriftungen
   spaltenweise auf einer Linie, statt sie ausfransen zu lassen. */
.benefits {
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.benefits > * { min-width: 0; }
.benefit { margin: 0; display: flex; flex-direction: row; align-items: center; gap: .9rem; text-align: left; }
.benefit__icon { color: var(--fuerer-primary); line-height: 0; flex: 0 0 auto; }
.benefit__icon svg { width: 44px; height: 44px; display: block; }
.benefit__label { font-size: 1rem; line-height: 1.35; color: var(--fuerer-text); }

@media (max-width: 620px) {
	.benefits { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
	.benefit__icon svg { width: 36px; height: 36px; }
}

.quotes { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.quotes > * { min-width: 0; }
.quote { margin: 0; background: var(--fuerer-paper); border-radius: var(--fuerer-box-radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.quote__text { margin: 0 0 1.25rem; padding: 0; border: 0; font-size: 1.05rem; line-height: 1.6; color: var(--fuerer-text); }
.quote__text::before { content: "«"; color: var(--fuerer-primary); }
.quote__text::after { content: "»"; color: var(--fuerer-primary); }
.quote__person { display: flex; align-items: center; gap: .9rem; }
.quote__image { border-radius: 50%; width: 56px; height: 56px; object-fit: cover; }
.quote__meta { display: flex; flex-direction: column; }
.quote__name { font-weight: 600; }
.quote__role { font-size: .85rem; color: var(--fuerer-secondary); }

/* Nur für Screenreader sichtbar */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

/* Aufzählung mit Symbolen */
.icon-list {
	--icon-list-luecke: clamp(.75rem, 1.4vw, 1.15rem);
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--icon-list-luecke);
	max-width: 100%;
}
/* Der Block darf die volle Breite der Hülle nutzen, nicht nur die Textspalte. */
.section--list .shell--narrow > .icon-list { max-width: 100%; }
.icon-list > li {
	flex: 1 1 150px; min-width: 0; margin: 0;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem;
	padding: clamp(1.1rem, 2vw, 1.6rem) clamp(.75rem, 1.4vw, 1.1rem);
	background: #fff;
	/* Die Felder sind nicht anklickbar – deshalb kein Zustand beim Überfahren,
	   die vormalige Hervorhebung ist der Normalzustand. */
	border: 1px solid var(--fuerer-primary);
	border-radius: 0 0.75rem 0 0;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
}
.icon-list__icon {
	flex: 0 0 auto; width: 54px; height: 54px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--fuerer-primary); background: var(--fuerer-paper);
	border-radius: 0 0.75rem 0 0; line-height: 0;
}
.icon-list__text { min-width: 0; line-height: 1.5; font-size: .92rem; }
/* Auf dem Schirm stehen bis zu sechs Felder nebeneinander. */
/* Die Felder füllen die Zeile über die ganze Breite der Hülle; ab sieben
   Einträgen bricht die Reihe um. */
@media (min-width: 1000px) {
	.icon-list > li { flex: 1 1 calc((100% - 5 * var(--icon-list-luecke)) / 6); }
}
/* Ausserhalb der Startseite tragen die Felder ganze Sätze – dort stehen
   höchstens drei nebeneinander, auf mittleren Schirmen zwei. Eine
   unvollständige letzte Reihe bleibt mittig. */
@media (min-width: 621px) {
	body:not(.home) .icon-list > li { flex: 0 1 calc((100% - var(--icon-list-luecke)) / 2); }
}
@media (min-width: 1000px) {
	body:not(.home) .icon-list > li { flex: 0 1 calc((100% - 2 * var(--icon-list-luecke)) / 3); }
}
@media (max-width: 620px) {
	.icon-list > li { flex-direction: row; align-items: center; text-align: start; max-width: 100%; flex-basis: 100%; }
}

/* Bis fünf Angaben stehen nebeneinander in einer Zeile. Fünf Spalten sind eng,
   deshalb rücken Polster, Schrift und Symbol in dieser Darstellung enger
   zusammen – der Block soll eine Zusammenfassung bleiben und nicht selbst zum
   Kapitel werden. */
@media (min-width: 900px) {
	.facts--einzeilig { grid-template-columns: repeat(var(--facts-spalten, 4), minmax(0, 1fr)) !important; }
	.facts--1 { --facts-spalten: 1; }
	.facts--2 { --facts-spalten: 2; }
	.facts--3 { --facts-spalten: 3; }
	.facts--4 { --facts-spalten: 4; }
	.facts--5 { --facts-spalten: 5; }

	.facts--einzeilig .facts__item { padding: 1.15rem 1.1rem; gap: .5rem; font-size: .95rem; line-height: 1.45; }
	.facts--einzeilig .facts__item strong { font-size: .98rem; margin-bottom: .25rem; }
	.facts--einzeilig .facts__icon svg { width: 24px; height: 24px; }
	/* Bei fünf Spalten noch eine Spur enger. */
	.facts--einzeilig.facts--5 .facts__item { padding: 1rem .95rem; font-size: .92rem; }
}


/* ==========================================================================
   Zweispaltiger Fliesstext
   Für Abschnitte mit mehreren Absätzen Lauftext und ohne Bild. Absätze werden
   nicht auseinandergerissen: «break-inside: avoid» hält jeden zusammen, so
   dass die Spalten an Absatzgrenzen umbrechen statt mitten im Satz.
   Die Mindestbreite von 20rem sorgt dafür, dass auf schmalen Schirmen von
   selbst wieder eine Spalte übrig bleibt – ohne eigenen Medienabschnitt.
   ========================================================================== */
.prose--spalten {
	/* .prose deckelt sonst auf 72ch – das ist das Mass für EINE Spalte. Zwei
	   Spalten brauchen ihn doppelt, sonst stünden beide gequetscht in der
	   linken Hälfte und rechts bliebe die Fläche leer. */
	max-width: min(118ch, 100%);
	columns: 20rem 2;
	column-gap: clamp(2rem, 4vw, 3.5rem);
}
.prose--spalten > * { break-inside: avoid; }
.prose--spalten > :first-child { margin-top: 0; }

/* Die Überschrift steht über beiden Spalten, nicht in der ersten. */
.section--text-spalten .section__heading { max-width: 62ch; }


/* ==========================================================================
   Kennzahlen – die Übersicht aller veraltenden Zahlen
   Nutzt die bestehende Datentabelle. Eigen ist nur die Gruppenüberschrift
   und die Kennzeichnung überholter Werte, die ausschliesslich die Redaktion
   sieht.
   ========================================================================== */
.kennzahlen__gruppe { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 .75rem; font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.kennzahlen__gruppe:first-of-type { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.kennzahlen th[scope="row"] { font-weight: 400; }
.kennzahlen__ueberholt { background: rgba(201, 0, 25, .06); }
.kennzahlen__ueberholt em { color: var(--fuerer-primary); font-style: normal; font-weight: 600; }


/* ==========================================================================
   Produkte – die konkreten Systeme je Bereich
   Bewusst ohne eigene Gestaltung: Es sind die Kacheln der Startseite. Hier
   steht nur, was der Zusammenhang braucht – die Energiequelle als kleine
   Zeile über dem Namen, und etwas Luft nach der Überschrift.
   ========================================================================== */
.produkte { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.produkt__quelle { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--fuerer-primary); margin-bottom: .3rem; }
.produkte .card__text p { margin: 0 0 .6rem; }
.produkte .card__text > :last-child { margin-bottom: 0; }


/* ==========================================================================
   Ausgezeichnete Absätze als Blöcke
   Für Abschnitte, in denen jeder Absatz mit einem Stichwort beginnt – etwa die
   Filtermerkmale auf der Referenzseite. Das Stichwort wird zur Überschrift,
   der Rest zum Text.

   Bewusst ohne eigene Gestaltung: Die Blöcke sind die Kacheln der Startseite
   (.cards/.card). Hier steht nur, was der Zusammenhang braucht – Abstand zum
   Fliesstext und ein etwas engeres Raster, damit auch vier Blöcke in eine
   Reihe passen.
   ========================================================================== */
.textbloecke { margin: 1.5rem 0 0; }
.section--text-bloecke .prose + .textbloecke { margin-top: 1.5rem; }
.section--text-bloecke .textbloecke + .prose { margin-top: clamp(1.25rem, 2.5vw, 2rem); }


/* ==========================================================================
   Zeitstrahl – Werte aus der Seite «Geschichte» auf fuerer.ch
   (Linie 3 px in #B4BABE, Punkt 30 px mit weissem Ring, Karte weiss mit
    2 px Rahmen und oben rechts gerundeter Ecke, Zeiger zur Linie hin)

   Der Strahl liegt in zwei Lagen übereinander: Die graue Grundlinie reicht
   über die volle Höhe, darüber wächst eine dunkle Füllung mit dem
   Scrollfortschritt. Ihre Höhe steht in --timeline-fortschritt und wird in
   site.js gesetzt. Bleibt das Skript aus, ist die Füllung null und die
   Grundlinie steht für sich – der Zeitstrahl liest sich dann statisch, aber
   vollständig.
   ========================================================================== */
.timeline {
	--timeline-linie: #B4BABE;
	--timeline-punkt: #ADADAD;
	--timeline-datum: #3A3F57;
	--timeline-fortschritt: 0px;
	list-style: none; margin: 2.5rem 0 0; padding: 0; position: relative;
}
.timeline::before,
.timeline::after {
	content: ""; position: absolute; top: 0; left: 50%;
	width: 3px; margin-left: -1.5px;
}
.timeline::before { bottom: 0; background: var(--timeline-linie); }
.timeline::after  { height: var(--timeline-fortschritt); background: var(--timeline-datum); }

/* Punkt und Zeiger sitzen auf halber Kartenhöhe, nicht am oberen Rand –
   so führt die Linie mittig durch jede Station. */
.timeline__item {
	position: relative; margin: 0 0 20px;
	display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center;
	column-gap: 25px;
}
.timeline__item > * { min-width: 0; }
.timeline__marker {
	grid-column: 2; grid-row: 1; justify-self: center;
	/* Die Füllung des Strahls ist ein ::after und liegt damit in der
	   Malreihenfolge zuletzt – ohne eigene Ebene liefe sie über die Punkte.
	   Punkt und Karte heben sich deshalb heraus, die Linie zieht dahinter durch. */
	position: relative; z-index: 1;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--timeline-punkt);
	border: 5px solid var(--fuerer-page, #fff);
	transition: border-color .25s linear, background-color .25s linear;
}
.timeline__date {
	grid-row: 1; margin: 0;
	/* Die Jahreszahl ist der Ankerpunkt der Station – sie darf so gross sein wie
	   ein Kartentitel, sonst liest man sie erst nach dem Text. */
	font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 300; line-height: 1.1;
	color: var(--timeline-datum); transition: color .25s linear;
}

/* Erreichte Stationen: der Ring um den Punkt und das Jahr nehmen das CI-Rot an.
   Auf fuerer.ch ist das ein eigenes Rot (#DD2B28); hier folgt es dem CI-Wert,
   damit auf einer Seite nur ein Rot vorkommt. */
.timeline__item.ist-aktiv .timeline__marker { border-color: var(--fuerer-primary); }
.timeline__item.ist-aktiv .timeline__date,
.timeline__item.ist-aktiv .timeline__card-date { color: var(--fuerer-primary); }

.timeline__card {
	grid-row: 1; margin: 0; position: relative; z-index: 1;
	background: #fff; color: var(--fuerer-text);
	border: 2px solid var(--fuerer-schwarz);
	border-radius: 0 var(--fuerer-box-radius) 0 0;
	padding: 40px 20px;
}

/* Zeiger von der Karte zur Linie: zwei Dreiecke übereinander, das hintere in
   der Rahmenfarbe, das vordere in der Füllfarbe – so bekommt die Spitze
   denselben Rand wie die Karte. */
.timeline__card::before,
.timeline__card::after {
	content: ""; position: absolute; top: 50%; width: 0; height: 0;
	transform: translateY(-50%);
}
.timeline__card::before {
	border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.timeline__card::after {
	border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.timeline__item--links .timeline__card { grid-column: 1; }
.timeline__item--links .timeline__date { grid-column: 3; text-align: left; }
.timeline__item--links .timeline__card::before {
	right: -12px; border-left: 12px solid var(--fuerer-schwarz);
}
.timeline__item--links .timeline__card::after {
	right: -9px; border-left: 10px solid #fff;
}
.timeline__item--rechts .timeline__card { grid-column: 3; }
.timeline__item--rechts .timeline__date { grid-column: 1; text-align: right; }
.timeline__item--rechts .timeline__card::before {
	left: -12px; border-right: 12px solid var(--fuerer-schwarz);
}
.timeline__item--rechts .timeline__card::after {
	left: -9px; border-right: 10px solid #fff;
}

.timeline__card-date { display: none; }
.timeline__media { margin: 0 0 20px; }
.timeline__media img { width: 100%; height: auto; display: block; }
.timeline__title {
	margin: 0 0 .75rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--fuerer-secondary);
}
.timeline__text p { margin: 0 0 .75rem; }
.timeline__text > :last-child { margin-bottom: 0; }
.timeline__text strong { font-weight: 700; color: var(--fuerer-text); }

/* Karten fahren beim Erreichen von ihrer Seite herein. Die Klasse setzt das
   Skript – ohne JavaScript greift die Regel nie, und alle Karten stehen von
   Anfang an da. */
@media (prefers-reduced-motion: no-preference) {
	.timeline--animiert .timeline__card {
		opacity: 0; transition: opacity .5s ease, transform .5s ease;
	}
	.timeline--animiert .timeline__item--links .timeline__card  { transform: translateX(-1.5rem); }
	.timeline--animiert .timeline__item--rechts .timeline__card { transform: translateX(1.5rem); }
	.timeline--animiert .timeline__item.ist-sichtbar .timeline__card { opacity: 1; transform: none; }
}

/* Schmale Schirme: einspaltig, Linie links, Jahr in der Karte */
@media (max-width: 860px) {
	.timeline::before,
	.timeline::after { left: 15px; margin-left: -1.5px; }
	.timeline__item { grid-template-columns: 30px 1fr; column-gap: 1.25rem; }
	.timeline__marker { grid-column: 1; }
	.timeline__date { display: none; }
	.timeline__item--links .timeline__card,
	.timeline__item--rechts .timeline__card { grid-column: 2; }
	.timeline__card { padding: 24px 18px; }
	.timeline__card-date { display: block; margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 300; line-height: 1.1; color: var(--timeline-datum); transition: color .25s linear; }
	/* Alle Karten stehen rechts, der Zeiger deshalb immer links. */
	.timeline__item--links .timeline__card::before,
	.timeline__item--rechts .timeline__card::before {
		left: -12px; right: auto; border-left: none; border-right: 12px solid var(--fuerer-schwarz);
	}
	.timeline__item--links .timeline__card::after,
	.timeline__item--rechts .timeline__card::after {
		left: -9px; right: auto; border-left: none; border-right: 10px solid #fff;
	}
	.timeline--animiert .timeline__item--links .timeline__card,
	.timeline--animiert .timeline__item--rechts .timeline__card { transform: translateX(1rem); }
}


/* ==========================================================================
   Team – Reiter und Porträtkacheln, Aufbau wie auf fuerer.ch
   (Kachel 0 40px 0 0 gerundet, Namensbalken auf rgba(0,0,0,.5),
    beim Überfahren deckt eine Fläche die Kachel mit den Ausbildungen)
   ========================================================================== */
.team-tabs__leiste {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem;
	margin-top: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--fuerer-line);
}
.team-tabs__reiter {
	background: none; border: 2px solid var(--fuerer-primary); padding: 13px 20px;
	font: inherit; font-size: .95rem; color: var(--fuerer-text);
	cursor: pointer; border-radius: 0 .75rem 0 0; transition: color .2s ease, border-color .2s ease;
}
.team-tabs__reiter:hover { color: var(--fuerer-primary); }
.team-tabs__reiter.is-active { color: #999; border-color: #999; cursor: default; }

/* Ohne Skript bleiben alle Bereiche sichtbar. */
.team-tabs--aktiv .team-gruppe { display: none; }
.team-tabs--aktiv .team-gruppe.is-active { display: block; }

.team-gruppe { margin-top: clamp(2rem, 4vw, 3rem); }
.team-gruppe__titel {
	margin: 0 0 .75rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); text-transform: none;
	letter-spacing: 0; font-weight: 700; color: var(--fuerer-text); text-align: center;
}
/* Was der Bereich verantwortet – gepflegt an der Abteilung selbst. */
.team-gruppe__text {
	margin: 0 auto 1.75rem; max-width: min(80ch, 100%); text-align: center;
	font-size: 1rem; line-height: 1.6; color: var(--fuerer-secondary);
}
.team-liste {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 30px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .team-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .team-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-liste > * { min-width: 0; }
.team-karte {
	position: relative; margin: 0; height: 400px; overflow: hidden;
	border-radius: 0 0.75rem 0 0; background: var(--fuerer-secondary);
}
.team-karte__bild {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center top; display: block;
}
.team-karte__fuss {
	position: absolute; left: 0; bottom: 0; width: 100%;
	background: rgba(0, 0, 0, .5); color: #fff;
	padding: 10px 20px 15px; transition: opacity .35s ease;
}
.team-karte__name { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: #fff; }
.team-karte__rolle { margin: .25rem 0 0; font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, .9); }

.team-karte__hover {
	position: absolute; inset: 0; border-radius: 0 0.75rem 0 0;
	background: var(--fuerer-primary); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 1.25rem 20px; gap: .5rem;
	opacity: 0; transition: opacity .35s ease;
}
.team-karte--mit-hover:hover .team-karte__hover,
.team-karte--mit-hover:focus-within .team-karte__hover { opacity: 1; }
.team-karte--mit-hover:hover .team-karte__fuss { opacity: 0; }
.team-karte__hover-name { margin: 0; font-weight: 600; font-size: 1.05rem; }
.team-karte__qualifikation { margin: 0; font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .95); }
.team-karte__kontakt { margin: .35rem 0 0; font-size: .88rem; }
.team-karte__kontakt a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.team-karte__kontakt a:hover { text-decoration: underline; }
.team-karte__kontakt svg { flex: 0 0 auto; }

/* Auf Geräten ohne Zeigegerät sind die Angaben dauerhaft sichtbar. */
@media (hover: none) {
	.team-karte { height: auto; min-height: 400px; }
	.team-karte__hover { position: static; opacity: 1; background: rgba(0, 0, 0, .55); min-height: 400px; }
	.team-karte__fuss { display: none; }
}

/* ==========================================================================
   Gewerke und Ansprechpersonen
   ========================================================================== */
.gewerk-liste { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--fuerer-line); border: 1px solid var(--fuerer-line); border-radius: var(--fuerer-box-radius); overflow: hidden; }
.gewerk-zeile {
	margin: 0; background: #fff; padding: clamp(1.1rem, 2.2vw, 1.6rem);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem 2rem; align-items: center;
}
.gewerk-zeile > * { min-width: 0; }
.gewerk-zeile__titel { margin: 0; font-size: 1.05rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.gewerk-zeile__titel a { text-decoration: none; color: var(--fuerer-text); }
.gewerk-zeile__titel a:hover { color: var(--fuerer-primary); }
.gewerk-zeile__text { margin: .3rem 0 0; font-size: .9rem; color: var(--fuerer-secondary); }
.gewerk-zeile__hinweis { margin: 0; font-size: .92rem; color: var(--fuerer-secondary); }
.gewerk-zeile__personen { display: grid; gap: 1rem; }
.gewerk-person { display: flex; align-items: center; gap: .8rem; }
.gewerk-person__bild { width: 64px; height: 64px; border-radius: 0 0.75rem 0 0; object-fit: cover; object-position: center top; flex: 0 0 auto; }
.gewerk-person__name { margin: 0; font-weight: 600; font-size: .98rem; }
.gewerk-person__rolle { margin: 0; font-size: .82rem; color: var(--fuerer-secondary); }
.gewerk-person__kontakt { margin: .15rem 0 0; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
@media (max-width: 760px) { .gewerk-zeile { grid-template-columns: 1fr; } }


/* ==========================================================================
   Referenzen – Übersicht und Projektseite
   ========================================================================== */
.ref-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--fuerer-line); }
/* Auf dem Telefon würden neun Knöpfe vier Zeilen füllen und das Raster nach
   unten drücken. Sie laufen deshalb in einer Zeile und lassen sich seitlich
   schieben – die Bildlaufleiste bleibt verborgen, das Wischen nicht. */
@media (max-width: 640px) {
	.ref-filter {
		flex-wrap: nowrap; justify-content: flex-start;
		overflow-x: auto; scroll-snap-type: x proximity;
		scrollbar-width: none; -ms-overflow-style: none;
		gap: .6rem; padding-bottom: 1.25rem;
		/* Bündig mit dem Rasterrand, aber am Ende noch Luft zum Wischen. */
		margin-inline: calc(var(--fuerer-gutter) * -1); padding-inline: var(--fuerer-gutter);
	}
	.ref-filter::-webkit-scrollbar { display: none; }
	.ref-filter__knopf { flex: 0 0 auto; scroll-snap-align: start; }
}
/* Verweis am Fuss einer Kategoriekachel. */
.card__filter { margin: .9rem 0 0; }
.ref-filter__knopf {
	background: none; border: 2px solid var(--fuerer-primary); padding: 11px 18px;
	font: inherit; font-size: .92rem; color: var(--fuerer-text); cursor: pointer;
	border-radius: 0 .75rem 0 0; transition: color .2s ease, border-color .2s ease;
}
.ref-filter__knopf:hover { color: var(--fuerer-primary); }
.ref-filter__knopf.is-active { color: #999; border-color: #999; cursor: default; }
.ref-filter__zahl { margin-left: .5rem; font-size: .82rem; color: var(--fuerer-secondary); }

.ref-raster {
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .ref-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ref-raster { grid-template-columns: 1fr; } }
.ref-raster > * { min-width: 0; }
.ref-karte { margin: 0; }
.ref-karte[hidden] { display: none; }
.ref-karte__link {
	display: block; position: relative; height: 100%;
	background: #fff; border: 1px solid var(--fuerer-box-border);
	border-radius: 0 0.75rem 0 0; overflow: hidden; text-decoration: none; color: inherit;
	transition: border-color .2s ease;
}
.ref-karte__link:hover { border-color: var(--fuerer-primary); }
.ref-karte__bild { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.ref-karte__inhalt { display: block; padding: 1.1rem 1.25rem 1.4rem; }
.ref-karte__titel { display: block; font-weight: 600; line-height: 1.35; color: var(--fuerer-text); }
.ref-karte__link:hover .ref-karte__titel { color: var(--fuerer-primary); }
.ref-karte__unter { display: block; margin-top: .35rem; font-size: .9rem; line-height: 1.45; color: var(--fuerer-secondary); }
.ref-karte__meta { display: block; margin-top: .5rem; font-size: .82rem; color: var(--fuerer-secondary); }

/* Fehlt das Hauptbild, stünde eine leere weisse Box im Raster. Statt dessen
   trägt die Kachel dieselbe Verlaufsfläche wie das Kundendienstband und die
   Handlungsaufrufe – so bleibt sie eine Fläche und kein Loch. Die Höhe hält
   die Reihe zusammen: Sie entspricht dem Bild, das hier fehlt. */
.ref-karte--ohne-bild .ref-karte__link {
	background-color: var(--fuerer-verlauf-grund);
	background-image: var(--fuerer-verlauf);
	background-repeat: no-repeat; background-size: cover; background-position: center;
	border-color: transparent;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 15rem;
}
.ref-karte--ohne-bild .ref-karte__link:hover { border-color: transparent; }
.ref-karte--ohne-bild .ref-karte__titel,
.ref-karte--ohne-bild .ref-karte__link:hover .ref-karte__titel { color: #fff; }
.ref-karte--ohne-bild .ref-karte__unter { color: rgba(255, 255, 255, .92); }
.ref-karte--ohne-bild .ref-karte__meta { color: rgba(255, 255, 255, .82); }

.referenz__zeitraum { margin: 1rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .9); }
.referenz__untertitel { margin: 0; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--fuerer-secondary); text-align: center; }
.referenz__raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.referenz__raster > * { min-width: 0; }
.referenz__gewerke { margin-top: 1.5rem; font-size: .95rem; color: var(--fuerer-secondary); }
.referenz__gewerke-titel { font-weight: 600; color: var(--fuerer-text); }
.referenz__daten { background: var(--fuerer-paper); border-radius: 0 0.75rem 0 0; padding: clamp(1.25rem, 2.5vw, 1.9rem); }
.referenz__daten-titel { margin: 0 0 1rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--fuerer-secondary); }
.referenz__liste { margin: 0; display: grid; gap: .75rem 1rem; }
.referenz__liste dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fuerer-secondary); }
.referenz__liste dd { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.5; }
.referenz__navigation-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--fuerer-line); }
.link-arrow--zurueck::after { content: none; }
.link-arrow--zurueck::before { content: "← "; }
@media (max-width: 860px) { .referenz__raster { grid-template-columns: 1fr; } }


/* ==========================================================================
   Logoreihe der Partner – farbig, in gleich grossen Feldern mit feinem Rahmen
   ========================================================================== */
/* Kippschalter zwischen den beiden Gruppen – Aufbau wie auf fuerer.ch:
   Beschriftung, Schalter, Beschriftung; rot im einen, orange im anderen Zustand. */
.logo-umschalter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px; margin-top: 2rem; }
.logo-umschalter__label { font-size: 1rem; color: var(--fuerer-secondary); transition: color .2s ease; }
.logo-umschalter__label.is-active { color: var(--fuerer-text); font-weight: 600; }
.logo-umschalter__schalter {
	position: relative; display: inline-block; width: 52px; height: 34px;
	padding: 0; border: 0; border-radius: 20px; cursor: pointer;
	background: var(--fuerer-primary); transition: background .4s ease;
}
.logo-umschalter__schalter[aria-checked="true"] { background: var(--fuerer-accent); }
.logo-umschalter__knopf {
	position: absolute; top: 4px; left: 4px; width: 26px; height: 26px;
	background: #fff; border-radius: 15px; transition: transform .4s ease;
}
.logo-umschalter__schalter[aria-checked="true"] .logo-umschalter__knopf { transform: translateX(18px); }

.logo-gruppe { margin-top: 1.75rem; }
.logo-gruppe__titel {
	margin: 0 0 1.25rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em;
	font-weight: 600; color: var(--fuerer-secondary); text-align: center;
}
/* Ohne Skript stehen beide Gruppen untereinander. */
.logo-umschalter--aktiv ~ .logo-gruppe { display: none; }
.logo-umschalter--aktiv ~ .logo-gruppe.is-active { display: block; }
.logo-umschalter--aktiv ~ .logo-gruppe .logo-gruppe__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.logo-liste {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(.4rem, 1.2vw, 1rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 700px)  { .logo-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .logo-liste { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.logo-liste__item {
	margin: 0; display: flex; align-items: center; justify-content: center;
	aspect-ratio: 3 / 2; padding: .9rem;
	background: #fff; border: 1px solid var(--fuerer-line);
	transition: border-color .2s ease;
}
.logo-liste__item img {
	max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
	object-fit: contain;
}

/* Engagements: Logo mit Namen darunter, in grösseren Kacheln. */
.logo-liste--namen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.25rem); }
@media (min-width: 700px)  { .logo-liste--namen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .logo-liste--namen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.logo-liste--namen .logo-liste__item {
	flex-direction: column; justify-content: flex-start; gap: .9rem;
	aspect-ratio: auto; padding: 1.5rem 1.25rem 1.25rem;
	border-top-right-radius: 1.25rem;
}
.logo-liste--namen .logo-liste__item img { max-height: 84px; margin-block: auto; }
.logo-liste__name {
	display: block; margin-top: auto; text-align: center;
	font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--fuerer-text);
}
.logo-liste__link {
	display: flex; flex-direction: column; align-items: center; gap: .9rem;
	width: 100%; height: 100%; text-decoration: none; color: inherit;
}
.logo-liste--namen .logo-liste__item:hover,
.logo-liste--namen .logo-liste__item:focus-within { border-color: var(--fuerer-primary); }
.logo-liste__link:hover .logo-liste__name,
.logo-liste__link:focus-visible .logo-liste__name { color: var(--fuerer-primary); }


/* ==========================================================================
   Stimmen als Bildwechsler
   ========================================================================== */
.quotes-slider { position: relative; }
/* Es steht immer genau eine Stimme im Blick – auf jedem Schirm. */
.quotes-slider .quotes {
	margin-top: 2rem;
	display: grid; grid-template-columns: none;
	grid-auto-flow: column; grid-auto-columns: 100%;
	gap: 0;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; -ms-overflow-style: none;
}
.quotes-slider .quotes::-webkit-scrollbar { display: none; }
.quotes-slider .quote {
	scroll-snap-align: center; scroll-snap-stop: always;
	max-width: min(108ch, 100%); margin-inline: auto;
	text-align: center;
}
.quotes-slider .quote__text { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.6; }
.quotes-slider .quote__person { justify-content: center; }

/* Unter der Stimme stehen Punkte; Pfeile gibt es nicht. */
.quotes-slider__punkte { display: flex; justify-content: center; gap: .6rem; margin-top: 1.75rem; }
.quotes-slider__punkt {
	width: 20px; height: 12px; padding: 0; cursor: pointer;
	background: transparent; border: 1px solid var(--fuerer-secondary); border-radius: 2px;
	transition: background .18s ease, border-color .18s ease;
}
.quotes-slider__punkt:hover { background: rgba(0, 0, 0, .12); }
.quotes-slider__punkt.is-active { background: var(--fuerer-primary); border-color: var(--fuerer-primary); cursor: default; }

/* «Zahlen»: der ausgezeichnete Wert steht gross, ohne Symbol darüber. */
.facts--zahlen .facts__item { align-items: center; text-align: center; padding-block: 2rem; }
.facts--zahlen .facts__item strong {
	display: block; color: #fff; font-size: clamp(2.1rem, 4.5vw, 3.4rem);
	font-weight: 200; line-height: 1; margin-bottom: .75rem; letter-spacing: -.01em;
}
.facts--zahlen .facts__body { line-height: 1.5; color: rgba(255, 255, 255, .8); }
@media (max-width: 699px) {
	.facts--zahlen .facts__item { padding: 1.4rem 1rem; }
	.facts--zahlen .facts__item strong { font-size: 1.9rem; }
}

/* Untertitel der Kacheln – eine Zeile Haltung unter dem Titel */
.card__subtitle {
	margin: -.25rem 0 .6rem; font-size: .95rem; line-height: 1.4;
	font-weight: 600; color: var(--fuerer-primary);
}

/* Die Zahlen fahren beim Erscheinen sanft ein. Der Wert selbst bleibt dabei
   unverändert im Quelltext – es wird nichts hochgezählt. */
.facts--zahlen .facts__item strong { display: block; transform-origin: center bottom; }
.facts--zahlen .facts__item .facts__body { position: relative; }
/* Der verdeckte Anfangszustand gilt nur, wenn das Skript läuft – sonst blieben
   die Zahlen unsichtbar. */
@media (prefers-reduced-motion: no-preference) {
	html.js-an .facts--zahlen .facts__item strong,
	html.js-an .facts--zahlen .facts__item .facts__body {
		opacity: 0; transform: translateY(14px);
		transition: opacity .6s ease var(--verzoegerung, 0ms), transform .6s cubic-bezier(.2, .7, .3, 1) var(--verzoegerung, 0ms);
	}
	html.js-an .facts--zahlen .facts__item .facts__body {
		transition-delay: calc(var(--verzoegerung, 0ms) + 120ms);
	}
	html.js-an .facts--zahlen .facts__item.ist-sichtbar strong,
	html.js-an .facts--zahlen .facts__item.ist-sichtbar .facts__body { opacity: 1; transform: none; }
}

/* Feiner roter Strich unter der Zahl, der mitwächst. */
.facts--zahlen .facts__item strong::after {
	content: ""; display: block; height: 2px; width: 48px; margin: .6rem auto 0;
	background: var(--fuerer-primary);
	transition: width .7s cubic-bezier(.2, .7, .3, 1) calc(var(--verzoegerung, 0ms) + 180ms);
}
html.js-an .facts--zahlen .facts__item strong::after { width: 0; }
html.js-an .facts--zahlen .facts__item.ist-sichtbar strong::after { width: 48px; }


/* ==========================================================================
   Referenzen als Bildwechsler – Angaben links, Bild rechts, ein Projekt je Ansicht
   ========================================================================== */
.ref-slider { position: relative; margin-top: 2rem; }
.section--referenzen + .section--text .prose { max-width: min(70ch, 100%); margin-inline: auto; text-align: center; }
.ref-spur {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; -ms-overflow-style: none;
}
.ref-spur::-webkit-scrollbar { display: none; }
.ref-slide {
	margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
	display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center;
}
.ref-slide__inhalt { min-width: 0; }

/* Auf dem Schirm liegt der Textkasten leicht über dem Bild. */
@media (min-width: 900px) {
	.ref-slide {
		grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0;
		padding-block: 1.5rem;
	}
	/* Das Bild nimmt gut die Hälfte ein, der Textkasten schiebt sich nur eine
	   Spalte darüber. */
	.ref-slide__bild { grid-column: 7 / -1; grid-row: 1; }
	.ref-slide__inhalt {
		grid-column: 1 / 8; grid-row: 1; z-index: 2;
		background: var(--fuerer-paper); border-radius: 0 0.75rem 0 0;
		padding: clamp(1.5rem, 3vw, 2.5rem);
		box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	}
}
.ref-slide__ort { margin: 0 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--fuerer-primary); }
.ref-slide__titel { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2.2vw, 1.8rem); text-transform: none; letter-spacing: 0; font-weight: 300; }
.ref-slide__unter { margin: 0 0 1rem; color: var(--fuerer-secondary); line-height: 1.55; }
.ref-slide__daten { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .9rem; }
.ref-slide__daten dt { margin: 0; color: var(--fuerer-secondary); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.ref-slide__daten dd { margin: 0; }
.ref-slide__mehr { margin: 0; }
.ref-slide__bild { margin: 0; }
.ref-slide__bild img {
	width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover;
	border: 0; border-radius: 0 0.75rem 0 0;
}

/* ==========================================================================
   Team-Teaser – gleicher Aufbau wie eine Referenzfolie, nur ohne Wechsler
   (Textkasten schiebt sich ab 900 px eine Rasterspalte über das Bild)
   ========================================================================== */
.team-teaser {
	margin-top: 2rem;
	display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center;
}
.team-teaser__inhalt { min-width: 0; }
@media (min-width: 900px) {
	.team-teaser {
		grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0;
		padding-block: 1.5rem;
	}
	.team-teaser__bild { grid-column: 7 / -1; grid-row: 1; }
	.team-teaser__inhalt {
		grid-column: 1 / 8; grid-row: 1; z-index: 2;
		background: var(--fuerer-paper); border-radius: 0 0.75rem 0 0;
		padding: clamp(1.5rem, 3vw, 2.5rem);
		box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	}
}
.team-teaser__kicker { margin: 0 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--fuerer-primary); }
.team-teaser__titel { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2.2vw, 1.8rem); text-transform: none; letter-spacing: 0; font-weight: 300; }
.team-teaser__text { margin: 0 0 1rem; color: var(--fuerer-secondary); line-height: 1.55; }
.team-teaser__daten { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .9rem; }
.team-teaser__daten dt { margin: 0; color: var(--fuerer-secondary); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.team-teaser__daten dd { margin: 0; }
/* Zwei Verweise nebeneinander, auf schmalen Schirmen untereinander. */
.team-teaser__mehr { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; }
.team-teaser__bild { margin: 0; }
.team-teaser__bild img {
	width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover;
	/* Der Textkasten schiebt sich über den linken Bildrand. Bei einem Gebäude
	   fällt das nicht auf, bei einem Gruppenbild schon – deshalb liegt der
	   Ausschnitt links statt mittig. Verdeckt wird dann das leere Lager am
	   Bildrand und nicht die Belegschaft. */
	object-position: left center;
	border: 0; border-radius: 0 0.75rem 0 0;
}


/* Pfeile und Punkte stehen gemeinsam unter dem Projekt – so überdeckt nichts
   den Text. */
/* Die Pfeile stehen oben rechts im Bildwechsler, die Punkte darunter. */
.ref-slider__pfeile { display: none; position: absolute; top: 0; right: 0; z-index: 3; gap: .5rem; }
.ref-slider--aktiv .ref-slider__pfeile { display: flex; }
.ref-slider__steuerung { display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; }
.ref-slider__pfeil {
	display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
	background: #fff; color: var(--fuerer-primary);
	border: 1px solid var(--fuerer-box-border); border-radius: 0 0.75rem 0 0;
	cursor: pointer; padding: 0;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ref-slider--aktiv .ref-slider__pfeil { display: inline-flex; }
.ref-slider__pfeile .ref-slider__pfeil:first-child { border-radius: 0.75rem 0 0 0; }
@media (min-width: 900px) { .ref-slider { padding-top: 3.5rem; } }
.ref-slider__pfeil:hover:not(:disabled) { background: var(--fuerer-primary); border-color: var(--fuerer-primary); color: #fff; }
.ref-slider__pfeil:disabled { opacity: .3; cursor: default; }

.ref-slider__punkte { display: flex; justify-content: center; gap: .6rem; }
.ref-slider__punkt {
	width: 20px; height: 12px; padding: 0; cursor: pointer;
	background: transparent; border: 1px solid var(--fuerer-secondary); border-radius: 2px;
	transition: background .18s ease, border-color .18s ease;
}
.ref-slider__punkt:hover { background: rgba(0, 0, 0, .12); }
.ref-slider__punkt.is-active { background: var(--fuerer-primary); border-color: var(--fuerer-primary); cursor: default; }
.ref-slider .section__more { margin-top: 1.5rem; text-align: center; }

@media (max-width: 899px) {
	/* Bild oben, der Textkasten schiebt sich von unten leicht darüber. */
	.ref-slide { grid-template-columns: 1fr; gap: 0; }
	.ref-slide__bild { order: -1; }
	.ref-slide__bild img { aspect-ratio: 3 / 2; }
	.ref-slide__inhalt {
		position: relative; z-index: 2;
		margin: -2.5rem 1rem 0;
		padding: 1.25rem 1.25rem 1.5rem;
		background: var(--fuerer-paper); border-radius: 0 0.75rem 0 0;
	}
	/* Auf schmalen Schirmen führen die Punkte durch die Projekte. */
	.ref-slider--aktiv .ref-slider__pfeile { display: none; }
}

/* Der Einleitungstext des Partnerblocks läuft auf dem Schirm zweispaltig. */
@media (min-width: 860px) {
	.section--logos .section__intro {
		text-align: start; max-width: 100%; margin-inline: 0;
		columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem);
	}
	.section--logos .section__intro br { display: none; }
}
.gewerk-person__name a { color: inherit; text-decoration: none; }
.gewerk-person__name a:hover { color: var(--fuerer-primary); }


/* ==========================================================================
   Fassungen der Kachelblöcke – ausschliesslich Rot, Grau und Weiss
   ========================================================================== */

/* Weiss mit rotem Balken: für das eigene Leistungsangebot */
.cards--weiss .card {
	background: #fff; border: 1px solid var(--fuerer-line);
	border-bottom: 4px solid var(--fuerer-primary);
	border-radius: 0 0.75rem 0 0;
	transition: border-color .5s ease, box-shadow .5s ease;
}
.cards--weiss .card:hover { border-color: var(--fuerer-line); border-top-color: var(--fuerer-primary); box-shadow: 0 10px 26px rgba(0, 0, 0, .07); }
.cards--weiss .card__icon { color: var(--fuerer-primary); }

/* Grau ohne Rahmen: für die Leistungsschritte */
.section--cards-grau { background: var(--fuerer-paper); }
.section--cards-grau .section__heading,
.section--cards-grau .section__intro { color: var(--fuerer-text); }
.cards--grau .card {
	background: #fff; border: 0; border-radius: 0 0.75rem 0 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.cards--grau .card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .09); }
.cards--grau .card__icon { color: var(--fuerer-primary); }
.cards--grau .card__title a { color: var(--fuerer-text); }
.cards--grau .card__title a:hover { color: var(--fuerer-primary); }

/* Der graue Block schliesst direkt an den weissen an. */
/* Zwei Klassen, damit die Regel gegen «.section + .section { padding-top: 0 }»
   ankommt – sonst klebt die Überschrift an der grauen Kante. */
.section.section--cards-grau {
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem);
	margin-block: clamp(2rem, 4vw, 3.5rem);
}
.section--cards-grau + .section { padding-top: clamp(2.25rem, 4.5vw, 4rem); }
/* Nachsatz unter den Kacheln – gleicher Abschnitt, gleicher Hintergrund. */
.cards__nachsatz { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: min(80ch, 100%); }
.cards__nachsatz p { margin: 0; line-height: 1.6; }
.card__person { margin: auto 0 0; padding-top: .9rem; font-size: .9rem; }
.card__person a, .card__mail a { display: inline-flex; align-items: center; gap: .45rem; }
.card__mail { margin: .35rem 0 0; font-size: .9rem; }
.card__mail a { color: var(--fuerer-primary); text-decoration: none; }
.card__mail a:hover { color: var(--fuerer-accent); text-decoration: underline; }


/* ==========================================================================
   Startseite: Überschriften und Einleitungen stehen auf dem Schirm mittig
   ========================================================================== */
@media (min-width: 900px) {
	body.home .section__heading,
	body.home .section__intro {
		text-align: center; margin-inline: auto;
	}
	/* Der zweispaltige Einleitungstext des Partnerblocks bleibt linksbündig,
	   sonst laufen die Spalten optisch auseinander. */
	body.home .section--logos .section__intro { text-align: start; }
}
.contact-card__more { margin: 1rem 0 0; }
.section--cta-emergency .cta__action {
	grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: stretch;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
	border-left: 1px solid rgba(255, 255, 255, .35);
	padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
	text-align: center;
}
@media (max-width: 760px) {
	.section--cta-emergency .cta { grid-template-columns: 1fr; }
	.section--cta-emergency .cta__action {
		grid-column: 1; grid-row: auto; align-items: flex-start; margin-top: 1rem;
		border-left: 0; border-top: 1px solid rgba(255, 255, 255, .35);
		padding-left: 0; padding-top: 1rem;
	}
}


/* ==========================================================================
   Schlagwörter – benennende Felder ohne Verweis
   ========================================================================== */
.tag-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-liste__item {
	margin: 0; padding: .25rem .6rem;
	background: #fff; border: 1px solid var(--fuerer-line);
	border-radius: 0 0.75rem 0 0;
	font-size: .78rem; line-height: 1.35; color: var(--fuerer-secondary);
}
.tag-liste__nachsatz { margin: 1.25rem 0 0; color: var(--fuerer-secondary); max-width: min(80ch, 100%); }
/* Die Wortfelder schliessen dicht an den Kontaktblock an; nach unten folgt
   mehr Luft zum nächsten Abschnitt. */
.section.section--tags { padding-block: clamp(.25rem, .8vw, .6rem) clamp(2.25rem, 4.5vw, 3.75rem); }
body.home .tag-liste { justify-content: center; }
body.home .tag-liste__nachsatz { text-align: center; margin-inline: auto; }
.card__kopf { margin: 0; display: block; }

/* Dezente Handlungsaufforderung: heller Kasten, mittig, ohne Rot als Fläche */
.section--cta-dezent .cta {
	background: var(--fuerer-paper); color: var(--fuerer-text);
	/* Ohne Rahmen: Die getönte Fläche grenzt den Block schon ab, die Linie
	   darüber liest sich als zweite Kante. */
	border-radius: 0 0.75rem 0 0;
	max-width: min(80ch, 100%); margin-inline: auto;
	padding: clamp(1.4rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
	display: block; text-align: center;
}
.section--cta-dezent .cta__heading { color: var(--fuerer-text); font-weight: 300; margin: 0 0 .6rem; }
.section--cta-dezent .cta__text { color: var(--fuerer-secondary); margin: 0 auto; max-width: min(66ch, 100%); font-size: 1rem; line-height: 1.6; }
.section--cta-dezent .cta__action { margin: 1.25rem 0 0; justify-content: center; }
.section--cta-dezent .cta .button { background-color: var(--fuerer-primary); color: #fff !important; }
.section--cta-dezent .cta .button:hover, .section--cta-dezent .cta .button:focus-visible { background-size: 100% 100%; }
.section--cta-dezent .cta__note { color: var(--fuerer-secondary); }

.contact-card__area { color: var(--fuerer-secondary); line-height: 1.55; }
.contact-card__area p { margin: 0 0 .75rem; }
.contact-card__area > :last-child { margin-bottom: 0; }

/* Hinweis beim Umschalter: erscheint beim Überfahren und bei Tastaturfokus. */
.logo-umschalter__feld { position: relative; display: inline-flex; }
.logo-umschalter__label { cursor: pointer; }
.logo-umschalter__label:focus-visible { outline: 2px solid var(--fuerer-primary); outline-offset: 3px; border-radius: 2px; }
.logo-umschalter__hinweis {
	position: absolute; bottom: calc(100% + .6rem); left: 50%; transform: translateX(-50%) translateY(4px);
	z-index: 5; width: max-content; max-width: 260px;
	padding: .5rem .75rem; background: var(--fuerer-text); color: #fff;
	font-size: .82rem; line-height: 1.4; text-align: center;
	border-radius: 0 0.75rem 0 0;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.logo-umschalter__hinweis::after {
	content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-top-color: var(--fuerer-text);
}
.logo-umschalter__label:hover + .logo-umschalter__hinweis,
.logo-umschalter__label:focus-visible + .logo-umschalter__hinweis {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (max-width: 620px) { .logo-umschalter__hinweis { max-width: 200px; } }

/* Verweise in Kacheltiteln tragen einen kleinen roten Pfeil, damit erkennbar
   bleibt, dass sich das Wort anklicken lässt. */
.card__title a,
.gewerk-zeile__titel a { display: inline; text-decoration: none; }
.card__title a::after,
.gewerk-zeile__titel a::after {
	content: "\2192";
	color: var(--fuerer-primary);
	font-weight: 400; letter-spacing: 0;
	display: inline-block; margin-left: .4em;
	transition: transform .18s ease;
}
.card__title a:hover::after,
.card__title a:focus-visible::after,
.gewerk-zeile__titel a:hover::after,
.gewerk-zeile__titel a:focus-visible::after { transform: translateX(3px); }
.card__title a:hover,
.gewerk-zeile__titel a:hover { color: var(--fuerer-primary); }

/* Textabschnitt mit Bild daneben: zwei gleich breite Spalten. Unter 900 px
   stapeln beide, das Bild wandert dabei unter den Text – es soll die
   Überschrift nicht vom zugehörigen Absatz trennen. */
.section--text-mit-bild .text-media {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.section--text-mit-bild .text-media--links .text-media__text { order: 2; }
.section--text-mit-bild .text-media--links .text-media__figur { order: 1; }

.text-media__figur { margin: 0; position: sticky; top: 6rem; }
.text-media__figur img {
	width: 100%; height: auto; display: block;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--fuerer-radius);
}
.text-media__legende {
	margin-top: .6rem; font-size: .85rem; line-height: 1.45;
	color: var(--fuerer-secondary);
}

@media (max-width: 900px) {
	.section--text-mit-bild .text-media,
	.section--text-mit-bild .text-media--links { grid-template-columns: 1fr; }
	.section--text-mit-bild .text-media--links .text-media__text,
	.section--text-mit-bild .text-media--links .text-media__figur { order: initial; }
	.text-media__figur { position: static; }
	.text-media__figur img { aspect-ratio: 16 / 9; }
}

/* Der Stellentitel führt auf die Ausschreibung – mit demselben Pfeil wie die
   Kacheltitel, damit erkennbar bleibt, dass dahinter mehr steht. */
.job__title a { color: inherit; text-decoration: none; }
.job__title a::after {
	content: "\2192"; color: var(--fuerer-primary); font-weight: 400;
	display: inline-block; margin-left: .35em; transition: transform .18s ease;
}
.job__title a:hover { color: var(--fuerer-primary); }
.job__title a:hover::after, .job__title a:focus-visible::after { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   Einzelne Stellenausschreibung – Aufbau wie auf fuerer.ch: zentrierter Kopf
   mit Merkmalen, Einleitung und den beiden Schaltflächen, darunter Aufgabe,
   Profil und Benefits. Der Textteil steht auf hellem Grund als abgesetzter
   Block: Eine Ausschreibung ist ein Dokument, kein Fliesstext auf der Seite.
   --------------------------------------------------------------------------- */
.stelle__merkmale {
	list-style: none; margin: 1.1rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: .4rem 1.75rem; font-size: .92rem; color: var(--fuerer-secondary);
}
.stelle__merkmale li { display: inline-flex; gap: .35rem; }
.stelle__merkmale span { font-weight: 600; color: var(--fuerer-text); }

.section--stelle .shell--narrow > * { margin-inline: auto; }

.stelle__lead {
	font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5;
	font-weight: 600; color: var(--fuerer-text); margin: 0 0 1.1rem; text-align: center;
}
.stelle__einleitung { font-size: 1.05rem; line-height: 1.65; margin: 0 0 1rem; text-align: center; }
.stelle__firmentext { color: var(--fuerer-secondary); line-height: 1.65; margin: 0; text-align: center; }

.stelle__aktionen {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: .75rem 1rem; margin: 2rem 0 0;
}
.button--sekundaer {
	background: transparent; color: var(--fuerer-primary);
	border: 1px solid var(--fuerer-primary);
}
.button--sekundaer:hover { background: var(--fuerer-primary); color: var(--fuerer-white); }

/* Der eigentliche Ausschreibungstext, abgesetzt auf hellem Grund. */
.stelle__block {
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
	background: var(--fuerer-paper);
	border-bottom: 4px solid var(--fuerer-primary);
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.stelle__block-titel {
	margin: 0 0 .9rem; font-size: 1.1rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	padding-bottom: .55rem; border-bottom: 2px solid var(--fuerer-primary);
}
.stelle__block + .stelle__block { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.stelle__liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.stelle__liste li { position: relative; padding-left: 1.5rem; line-height: 1.55; }
.stelle__liste li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: .5rem; height: .5rem; border-radius: 999px; background: var(--fuerer-primary);
}

.stelle__fuss { margin-top: clamp(2rem, 3.5vw, 2.75rem); text-align: center; }
.stelle__zurueck { margin-top: 1rem; font-size: .9rem; text-align: center; }

@media (max-width: 620px) {
	.stelle__merkmale { justify-content: flex-start; gap: .3rem 1rem; }
	.stelle__lead, .stelle__einleitung, .stelle__firmentext { text-align: left; }
	.stelle__aktionen { justify-content: stretch; }
	.stelle__aktionen .button { flex: 1 1 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Hervorgehobene Teaser: rot, mit kleinem Vorschaubild statt grossem Aufmacher.
   Für Verteiler, die sofort ins Auge fallen sollen – etwa die beiden Wege in
   den Karrierebereich. Das Bild begleitet, es trägt nicht.
   --------------------------------------------------------------------------- */
.teasers--prominent { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.teasers--prominent .teaser {
	background: var(--fuerer-primary); color: var(--fuerer-white);
	border: 0; border-bottom: 0;
	display: grid; grid-template-columns: clamp(200px, 22%, 190px) minmax(0, 1fr); align-items: stretch;
	transition: transform .18s ease, box-shadow .18s ease;
}
.teasers--prominent .teaser:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.teasers--prominent .teaser__media { height: 100%; }
.teasers--prominent .teaser__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.teasers--prominent .teaser__body {  gap: .35rem; justify-content: center; }
.teasers--prominent .teaser__kicker {
	margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(255,255,255,.85);
}
.teasers--prominent .teaser__heading { margin: 0; color: var(--fuerer-white); font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.25; }
.teasers--prominent .teaser__text { color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.5; }
.teasers--prominent .teaser__action { margin-top: .4rem; }
.teasers--prominent .link-arrow { color: var(--fuerer-white); font-weight: 600; }
.teasers--prominent .link-arrow:hover { color: rgba(255,255,255,.8); }

@media (max-width: 520px) {
	.teasers--prominent .teaser { grid-template-columns: 110px minmax(0, 1fr); }
}

/* Sprungmarken: sanft scrollen und unter dem Kopfbereich anhalten, statt
   dahinter zu verschwinden. Wer Bewegung reduziert hat, springt weiterhin. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.section[id], [id^="team-"] { scroll-margin-top: 142px; }
@media (max-width: 1024px) { .section[id] { scroll-margin-top: 96px; } }

/* ---------------------------------------------------------------------------
   Ablauf als Fluss: Schritte untereinander, jede Nummer in einem roten Kreis,
   dazwischen ein Pfeil zum nächsten Schritt. Anders als das Raster funktioniert
   das bei jeder Anzahl Schritte – ein Raster lässt in der letzten Reihe Lücken
   und der Pfeil zeigte dort ins Leere.
   --------------------------------------------------------------------------- */
.steps--fluss {
	--fluss-luecke: clamp(1rem, 2vw, 1.5rem);
	display: flex; gap: var(--fluss-luecke);
}
.steps--fluss .steps__item {
	background: transparent; padding: 0; position: relative;
	display: flex; flex-direction: column; /* align-items: center; text-align: center; */
	flex: 1 1 0;
}
.steps--fluss .steps__number {
	display: grid; place-items: center;
	width: 3.25rem; height: 3.25rem; margin: 0;
	border-radius: 999px; background: var(--fuerer-primary); color: var(--fuerer-white);
	font-size: 1.15rem; font-weight: 700; line-height: 1;
	position: relative; z-index: 1;
}
.steps--fluss .steps__body { padding-bottom: .35rem; }
.steps--fluss .steps__title { text-transform: none; letter-spacing: 0; font-size: 1.05rem; }

/* Die graue Linie verbindet die Nummern-Kreise horizontal auf ihrer Mitte;
   der Pfeil sitzt an ihrem Ende, unmittelbar vor dem nächsten Kreis. */
.steps--fluss .steps__item + .steps__item::before {
	content: ""; position: absolute;
	top: 1.625rem; right: calc(50% + 1.875rem);
	width: calc(100% + var(--fluss-luecke) - 3.75rem); height: 2px;
	transform: translateY(-50%);
	/* background: var(--fuerer-line); */
}
.steps--fluss .steps__item + .steps__item::after {
	content: "\2192"; position: absolute;
	top: 1.625rem; right: calc(50% + 1.7rem);
	transform: translateY(-50%);
	color: var(--fuerer-primary); font-size: 1.35rem; line-height: 1;
}

@media (max-width: 700px) {
	.steps--fluss { flex-direction: column; gap: 1.75rem; }
	.steps--fluss .steps__item + .steps__item::before,
	.steps--fluss .steps__item + .steps__item::after { content: none; }
}

/* ---------------------------------------------------------------------------
   Markenfläche: warmer Farbverlauf aus drei Lichtquellen über einer dunklen
   Grundfarbe. Bewusst ohne Filmkorn – die Körnung der Vorlage kostet eine
   zusätzliche Ebene und bringt auf einem Kennzahlenblock nichts.
   --------------------------------------------------------------------------- */
.ci-bg {
	position: relative; isolation: isolate;
	background-color: var(--fuerer-verlauf-grund);
	background-image: var(--fuerer-verlauf);
	background-repeat: no-repeat; background-size: cover; background-position: center;
	color: var(--fuerer-white);
}
.ci-bg .section__heading { color: var(--fuerer-white); }

/* Kennzahlen: die Zahl trägt, der Satz erklärt. Ohne Symbole.

   Der Standard-Faktenblock ist ein Raster aus dunklen Feldern: «.facts» trägt
   eine weiss-transparente Fläche, die durch die 1-Pixel-Lücken als Trennlinien
   scheint. Auf dem Farbverlauf soll der Verlauf durchscheinen – Fläche, Rahmen
   und Radius fallen deshalb weg. Die Trennung übernehmen feine Linien an den
   Feldern selbst.

   Fünf Werte stehen auf dem Desktop in einer Reihe. Die Zahlen bleiben
   entsprechend zurückhaltend: Der Block ordnet ein, er ist nicht der Auftritt. */
.facts--zahlen {
	gap: 0;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.facts--zahlen .facts__item {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	text-align: center; padding: clamp(1.1rem, 2vw, 1.5rem) clamp(.5rem, 1vw, .85rem);
	background: none; border-radius: 0; gap: 0;
}

.facts--zahlen .facts__item strong {
	display: block; color: var(--fuerer-white);
	/* Die Werte bleiben einzeilig – «5 Gewerke» oder «seit 1971» über zwei
	   Zeilen liest sich nicht mehr wie eine Zahl. Die Grösse folgt deshalb der
	   Spaltenbreite, nicht dem Wunsch nach Maximalgrösse. */
	white-space: nowrap;
	font-size: clamp(1.55rem, 2.35vw, 2.3rem); font-weight: 200; line-height: 1.1;
	letter-spacing: -.01em; margin-bottom: .5rem;
}
.facts--zahlen .facts__item strong::after {
	content: ""; display: block; height: 2px; width: 34px;
	margin: .5rem auto 0; background: var(--fuerer-white);
}
/* Gleiche Schriftgrösse wie die Angaben auf den Unterseiten – der Block soll
   sich nicht kleiner lesen, nur weil die Zahlen darüber gross sind. */
.facts--zahlen .facts__body { font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.section--facts.ci-bg { padding-block: clamp(1.75rem, 3vw, 2.75rem); }

/* Für fünf Angaben gilt sonst ein Sonderraster (drei plus zwei über zwölf
   Spalten, mit !important). Für die Zahlen ist eine durchgehende Reihe
   gewollt – deshalb hier ausdrücklich zurückgesetzt. */
@media (min-width: 1100px) {
	.facts.facts--zahlen { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
	.facts.facts--zahlen > .facts__item { grid-column: auto !important; }
}

@media (max-width: 1099px) {
	.facts.facts--zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.facts.facts--zahlen > .facts__item { grid-column: auto !important; }
}
@media (max-width: 639px) {
	.facts.facts--zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.facts--zahlen .facts__item { padding: 1rem .6rem; }
	.facts--zahlen .facts__item strong { font-size: 1.7rem; }
}

/* ---------------------------------------------------------------------------
   Menü-Flyout: alles auf eine Bildschirmhöhe
   Auf dem Desktop soll das Menü ohne Scrollen lesbar sein. Der Aufbau ist
   deshalb eine Spalte über die volle Höhe: Kopf und Claim bleiben fest, die
   Navigation nimmt den freien Raum, die vier Handlungswege stehen unten.
   Erst wenn der Platz nicht reicht, scrollt der mittlere Teil.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.overlay--menu .overlay__panel {
		min-height: 100vh; height: 100vh;
		display: flex; flex-direction: column;
	}
	.overlay--menu .overlay__head { flex: 0 0 auto; padding-block: 18px; }
	.overlay--menu .overlay__body {
		flex: 1 1 auto; min-height: 0;
		display: flex; flex-direction: column;
		padding-block: 1rem 1.5rem;
	}
	.overlay--menu .overlay__claim {
		flex: 0 0 auto;
		font-size: clamp(1.15rem, 1.6vw, 1.5rem);
		margin-bottom: 1.25rem; padding-bottom: 1rem;
	}
	.overlay--menu .flyout { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

	/* Fünf Spalten statt vier: Die Menüpunkte werden kürzer, nicht länger. */
	.overlay--menu .flyout__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.25rem clamp(1rem, 2vw, 2rem);
	}
	.overlay--menu .flyout__list > li > a { margin-bottom: .45rem; font-size: .92rem; }
	.overlay--menu .flyout__list .sub-menu a { padding: .18rem 0; font-size: .9rem; line-height: 1.35; }

	.overlay--menu .overlay__aktionen { flex: 0 0 auto; }
}

/* Die vier Handlungswege im Flyout: schmaler als in der Fusszeile, ohne die
   Notfallzeile – die steht im Kopf des Flyouts bereits. */
.overlay__aktionen {
	display: grid; gap: clamp(.75rem, 1.5vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	padding-top: clamp(1rem, 2vw, 1.5rem);
	border-top: 1.9px solid #BFBFBF;
}
.overlay__aktionen > * { min-width: 0; }
.footer-action--flyout { font-size: .88rem; }
.footer-action--flyout .footer-action__icon { margin-bottom: .5rem; }
.footer-action--flyout .footer-action__title { font-size: .95rem; margin-bottom: .35rem; }
.footer-action--flyout p { font-size: .85rem; line-height: 1.45; margin-bottom: .4rem; }
.footer-action--flyout .footer-action__more { margin-bottom: 0; }

@media (max-width: 1023px) {
	.overlay__aktionen { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Flyout-Navigation in vier Spalten
   Die Zuordnung steckt im Markup (siehe overlay-menu.php), nicht im Raster –
   ein reines Raster würde die drei Punkte der dritten Spalte auf verschiedene
   Zeilenhöhen ziehen, sobald die erste Spalte länger wird.
   --------------------------------------------------------------------------- */
.flyout__spalten {
	display: grid; gap: clamp(1.25rem, 2.5vw, 2.5rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
}
.flyout__spalten > * { min-width: 0; }
.flyout__spalte { display: flex; flex-direction: column; gap: 1.4rem; }

.flyout__titel {
	display: block; margin-bottom: .5rem;
	color: var(--fuerer-text); text-decoration: none;
	font-size: .92rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.flyout__titel:hover, .flyout__titel:focus-visible { color: var(--fuerer-flyout-hover); }
.flyout__unter { list-style: none; margin: 0; padding: 0; }
.flyout__unter li { margin: 0; }
.flyout__unter a {
	display: block; padding: .18rem 0;
	color: var(--fuerer-flyout-link); text-decoration: none;
	font-size: .9rem; line-height: 1.35;
}
.flyout__unter a:hover, .flyout__unter a:focus-visible { color: var(--fuerer-flyout-hover); }
/* Dritte Ebene: Unter «Gebäudetechnik» tragen die fünf Bereiche die
   Gliederung. Sie stehen deshalb kräftiger als ihre Unterseiten, die
   eingerückt und eine Spur kleiner folgen – damit die Bereiche als
   übergeordnete Struktur lesbar bleiben. */
.flyout__unter > li > a { font-weight: 600; color: var(--fuerer-text); }
.flyout__unter--tief { margin: .1rem 0 .45rem; padding-left: .85rem; border-left: 1px solid var(--fuerer-line); }
.flyout__unter--tief > li > a { font-weight: 400; font-size: .85rem; color: var(--fuerer-flyout-link); }
.flyout__unter--tief > li > a:hover, .flyout__unter--tief > li > a:focus-visible { color: var(--fuerer-flyout-hover); }

@media (max-width: 1023px) {
	.flyout__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.flyout__spalten { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   «Auf einen Blick» auf dem Farbverlauf – auf allen Seiten gleich.
   Die Linienführung folgt der Referenz: ein durchgehendes Gitter aus weissen
   Haarlinien mit Aussenrahmen. Oben und links trägt sie die Liste, rechts und
   unten jedes Feld – so entsteht kein doppelter Strich zwischen zwei Feldern.
   Die Felder selbst bleiben ohne Fläche, damit der Verlauf durchscheint;
   Polsterung und Schriftgrössen bleiben kompakt.
   --------------------------------------------------------------------------- */
/* Der Verlaufsblock steht auf Containerbreite und bringt eigenen Innenabstand mit. */
.facts-flaeche.ci-bg {
	padding: clamp(1.75rem, 3.2vw, 2.75rem);
	border-radius: var(--fuerer-box-radius); ;
}
.facts-flaeche.ci-bg .section__heading--small {
	color: rgba(255, 255, 255, .75);
	margin-bottom: clamp(.75rem, 1.5vw, 1.25rem);
}
.facts-flaeche.ci-bg .facts {
	background: none; gap: 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .55);
	border-left: 1px solid rgba(255, 255, 255, .55);
	/* Kein Radius und kein Beschnitt: Ein abgerundeter Rahmen kappt die geraden
	   Haarlinien an den Ecken, was besonders bei fünf Spalten auffällt. Ein
	   technisches Raster verträgt scharfe Ecken ohnehin besser. */
	border-radius: 0; overflow: visible;
}
.facts-flaeche.ci-bg .facts__item {
	background: none; border-radius: 0;
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, .55);
	border-bottom: 1px solid rgba(255, 255, 255, .55);
	padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(.9rem, 1.6vw, 1.25rem);
	font-size: .92rem; line-height: 1.45; gap: .5rem;
}
.facts-flaeche.ci-bg .facts__icon { color: rgba(255, 255, 255, .85); }
/* Nur die Angaben-Darstellung: Die Zahlen bringen ihre eigene Grösse mit.
   Ohne das :not() gewinnt diese Regel mit drei Klassen gegen «.facts--zahlen»
   mit zweien – und die Zahlen blieben klein. */
.facts-flaeche.ci-bg .facts:not(.facts--zahlen) .facts__item strong { font-size: .95rem; margin-bottom: .2rem; }

/* Der Zahlenblock trägt dasselbe Gitter wie die übrigen «Auf einen Blick»-
   Bereiche – gleiche Linienstärke, gleicher Aussenrahmen. Er behält nur seine
   eigene Typografie und die fünf Spalten. */

@media (max-width: 620px) {
	.facts-flaeche.ci-bg .facts__item { padding: .8rem .9rem; }
}

/* ---------------------------------------------------------------------------
   Zwei Spalten nebeneinander. Beide beginnen auf derselben Höhe, damit die
   Überschriften eine Linie bilden. Unter 900 px stapeln sie – die linke zuerst,
   weil dort das Bild die Aussage trägt.
   --------------------------------------------------------------------------- */
.zwei-spalten {
	display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}
.zwei-spalten__spalte { min-width: 0; }
.zwei-spalten__spalte > .section__heading { margin-top: 0; }
.zwei-spalten__figur { margin: clamp(1rem, 2vw, 1.5rem) 0 0; }
.zwei-spalten__figur img {
	width: 100%; height: auto; display: block;
	border-radius: var(--fuerer-radius);
}
.zwei-spalten__legende {
	margin-top: .6rem; font-size: .85rem; line-height: 1.45;
	color: var(--fuerer-secondary);
}

/* Erst bei wirklich schmalen Fenstern stapeln – bei 900 px griff die Regel
   schon bei halbierten Fenstern und bei 150 Prozent Zoom. */
@media (max-width: 700px) {
	.zwei-spalten { grid-template-columns: 1fr; }
}
/* Damit das Diagramm im schmalen Fenster nicht die ganze Breite füllt. */
@media (max-width: 700px) {
	.zwei-spalten__figur img { max-width: 480px; }
}

/* ---------------------------------------------------------------------------
   Ablauf als farbige Blöcke: Grund im Footergrau, rote Kante oben und rote
   Ziffern. Hebt sich von weissen und umrandeten Kacheln ab, ohne die Seite
   zu dominieren. Sieben Schritte stehen vier und drei nebeneinander.
   --------------------------------------------------------------------------- */
.steps--farbig .steps__item {
	background: #E6E8E4; /* Grau des Footers */
	border-top: 3px solid var(--fuerer-primary);
	border-radius: 0 0 12px 12px;
}
.steps--farbig .steps__number { font-size: clamp(2rem, 3.4vw, 2.75rem); color: var(--fuerer-primary); }
.steps--farbig .steps__text a { color: var(--fuerer-primary); }
@media (min-width: 1100px) {
	.steps--farbig:has(> .steps__item:nth-child(7):last-child),
	.steps--farbig:has(> .steps__item:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Lauftext und Überschriften brechen erst bei drei Vierteln der Seitenbreite
   um. Gilt für Text,
   der direkt im Seitenraster steht – nicht für Text in Spalten neben Bildern
   oder Faktenboxen, der dort ohnehin schmaler ist. Auf kleineren Schirmen
   bleiben die bisherigen Zeichenbegrenzungen.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
	:root { --fuerer-lauftext: 75%; }
	.shell > .prose:not(.prose--spalten),
	.section__intro,
	.answer-block:not(.answer-block--spalten),
	.check-list,
	.cards__nachsatz,
	.section--referenzen + .section--text .prose,
	.page-header__title,
	.section__heading,
	.section--text-spalten .section__heading { max-width: var(--fuerer-lauftext); }
}

/* Ablauf ohne eigene Überschrift gehört zum Text davor (und zum Nachsatz
   danach): Die Abschnitte rücken zusammen, statt je den vollen Abstand zu
   halten. */
.section--text:has(+ .section--steps.section--ohne-titel) { padding-bottom: 0; }
.section--steps.section--ohne-titel { padding-top: clamp(1rem, 2vw, 1.5rem); }
.section--steps.section--ohne-titel .steps { margin-top: 0; }
.section--steps:has(+ .section--text.section--ohne-titel) { padding-bottom: 0; }
.section--steps + .section--text.section--ohne-titel { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
/* Dasselbe für Aufzählungen ohne eigene Überschrift. */
.section--text:has(+ .section--list.section--ohne-titel) { padding-bottom: 0; }
.section--list.section--ohne-titel { padding-top: clamp(1rem, 2vw, 1.5rem); }
.section--list.section--ohne-titel > .shell > :first-child { margin-top: 0; }
.section--list:has(+ .section--text.section--ohne-titel) { padding-bottom: 0; }
.section--list + .section--text.section--ohne-titel { padding-top: clamp(1.25rem, 2.5vw, 2rem); }