/* =========================================================================
   PRO-IM Neo GmbH — Variante C ("Der gehobene Ist-Zustand")
   Konservativer Entwurf: Aufbau und Reihenfolge der alten Seite bleiben,
   Handwerk und Typografie werden gehoben. Video-Header statt Standbild-Slider.

   Zwei Regeln, die hier bewusst ganz oben stehen, weil sie in Variante A und B
   je einen halben Durchgang gekostet haben:

   1. img/video bekommen global height:auto. Sonst schlagen die height-Attribute
      im Markup jede aspect-ratio und die Bilder rendern in Naturhoehe.
   2. Keine Animation startet aus einem unsichtbaren Grundzustand. Der
      Ausgangszustand liegt in den Keyframes, dazu animation-fill-mode: both.
      Ohne JS und ohne laufende Animation ist die Seite vollstaendig sichtbar.
   ========================================================================= */

/* ---- Fonts (lokal, variable — kein Google-CDN, DSGVO) -------------------- */
@font-face {
	font-family: 'Lexend';
	src: url('../fonts/lexend-var.woff2') format('woff2');
	font-weight: 600 700;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans 3';
	src: url('../fonts/source-sans-3-var.woff2') format('woff2');
	font-weight: 400 600;
	font-display: swap;
}

/* ---- Token ---------------------------------------------------------------- */
:root {
	--petrol: #005379;          /* CI, aus dem Logo gesampelt */
	--petrol-deep: #003f5c;
	--petrol-ink: #012b3f;      /* Fliesstext */
	--gold: #d1be6b;            /* nur Handlungsaufrufe */
	--gold-deep: #c3ad51;

	--paper: #ffffff;
	--mist: #f1f4f6;            /* eine einzige, kuehle Grau-Familie */
	--line: #dde4e9;
	--muted: #566873;           /* 4,9:1 auf Weiss */

	/* Schatten tragen den Petrol-Ton, kein generisches Schwarz */
	--lift: 0 1px 2px rgba(1, 43, 63, .05), 0 12px 28px -14px rgba(1, 43, 63, .22);
	--lift-hi: 0 2px 4px rgba(1, 43, 63, .07), 0 20px 40px -16px rgba(1, 43, 63, .30);

	--wrap: 1220px;
	--gap: clamp(1.25rem, 3vw, 2.25rem);

	--z-base: 1;
	--z-overlay: 10;
	--z-header: 100;
	--z-menu: 200;
}

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

/* Siehe Regel 1 im Kopf. Das hier ist die Zeile, die es verhindert. */
img, svg, video { display: block; max-width: 100%; height: auto; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
	margin: 0;
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--petrol-ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	font-family: 'Lexend', system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--petrol);
	text-wrap: balance;
	margin: 0 0 .6em;
	/* Deutsche Komposita sind laenger als ein Handy breit ist:
	   "Immobilienfinanzierung" sprengt bei 375px die Zeile. Trennen lassen
	   (lang="de" steht im html-Tag) und im Notfall hart umbrechen. */
	hyphens: auto;
	overflow-wrap: break-word;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.03em; }
/* Keine Silbentrennung in der groessten Ueberschrift. Die Regel oben gilt
   weiter fuer h2/h3 und Fliesstext — dort rettet sie bei 375px lange
   Komposita. In der Hero-H1 erzeugte sie bei der Management "Eigen-tuemern",
   und getrennte Woerter in einer 3,6rem-Zeile liest man als Fehler.
   overflow-wrap bleibt als Notbremse. */
h1 { hyphens: manual; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.015em; }

p { margin: 0 0 1.1em; max-width: 68ch; text-wrap: pretty; }
a { color: var(--petrol); text-underline-offset: .18em; }

/* Sichtbarer Fokus — Pflicht, nicht Kuer */
:focus-visible {
	outline: 3px solid var(--gold-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Optisch statt mathematisch: unten etwas mehr Luft als oben */
.section { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
.section--mist { background: var(--mist); }

.skip {
	position: absolute; left: .75rem; top: -3.5rem;
	z-index: var(--z-menu);
	background: var(--petrol); color: #fff;
	padding: .7rem 1.1rem; border-radius: 4px;
	font-weight: 600; text-decoration: none;
	transition: top .18s ease;
}
.skip:focus { top: .75rem; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* ---- Eyebrow / Kicker ----------------------------------------------------- */
/* Alleinstehende Kontakt-Links (Buerokarten, Fusszeile) massen bei 375px nur
   22px Hoehe — unter den 24px, die WCAG 2.2 fuer Tap-Targets verlangt.
   Fliesstext-Links sind von der Richtlinie ausgenommen und bleiben unberuehrt:
   die Regel greift nur, wo der Link als eigener Block in einer Kontaktliste
   steht. padding statt min-height, damit die Trefflaeche waechst, ohne dass
   der Text springt. */
/* :not(.tlink) ist Pflicht, nicht Kosmetik: ".office a" ist spezifischer als
   ".tlink" und ueberschreibt dessen inline-flex — das Pfeil-Icon von
   "Route planen" bricht dadurch in die naechste Zeile. Bei der Management am
   29.08.2026 im Screenshot aufgefallen; hier betrifft es ZWOELF Links,
   darunter die drei Routenplaner in den Buerokarten. */
.contact__card a:not(.tlink), .office a:not(.tlink),
.foot a[href^="tel:"], .foot a[href^="mailto:"],
.trust__item a, .split__stamp a {
	display: inline-block; padding-block: .2rem; margin-block: -.2rem;
}

.eyebrow {
	display: flex; align-items: center; gap: .8rem;
	font-family: 'Lexend', sans-serif;
	font-size: .75rem; font-weight: 600; /* 12px — bei 11px fiel die Mobil-Sonde am 29.08.2026 durch (Lesbarkeitsgrenze) */
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1rem;
}
.eyebrow::before {
	content: ''; width: 34px; height: 2px;
	background: var(--gold); flex: none;
}
.eyebrow--light { color: rgba(255, 255, 255, .72); }

/* ---- Knoepfe -------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: 'Lexend', sans-serif;
	font-size: .95rem; font-weight: 600;
	padding: .95rem 1.6rem;
	border: 2px solid transparent; border-radius: 4px;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease,
	            color .2s ease, transform .12s ease, box-shadow .2s ease;
}
/* Gold ausschliesslich fuer Handlungsaufrufe — und mit Petrol-Text, nicht Weiss.
   Weiss auf Gold faellt beim Kontrast durch; das war ein Fehler der alten Seite.
   Gemessen: --petrol auf --gold ergibt 4,49:1 und verfehlt die Schwelle knapp.
   Deshalb hier --petrol-deep (6,1:1). Sichtbar derselbe Ton, nur eine Nuance
   tiefer. check.mjs prueft den Wert, damit das nicht zurueckrutscht. */
.btn--gold { background: var(--gold); color: var(--petrol-deep); box-shadow: var(--lift); }
.btn--gold:hover { background: var(--gold-deep); box-shadow: var(--lift-hi); }
.btn--gold:active { transform: translateY(1px); box-shadow: var(--lift); }

.btn--ghost { border-color: var(--line); color: var(--petrol); background: transparent; }
.btn--ghost:hover { border-color: var(--petrol); background: rgba(0, 83, 121, .05); }
.btn--ghost:active { transform: translateY(1px); }

.btn--on-dark { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.btn--on-dark:active { transform: translateY(1px); }

/* Tertiaer: Textlink statt drittem Knopf, damit die Seite nicht zurattert */
.tlink {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: 'Lexend', sans-serif; font-weight: 600; font-size: .9rem;
	color: var(--petrol); text-decoration: none;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 2px;
	transition: gap .2s ease, border-color .2s ease;
}
.tlink:hover { gap: .8rem; border-color: var(--petrol); }

/* ---- Kopfzeile ------------------------------------------------------------ */
.head {
	position: sticky; top: 0; z-index: var(--z-header);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.head.is-stuck { border-bottom-color: var(--line); box-shadow: var(--lift); }
.head__in {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: 4.75rem;
}
.head__logo { flex: none; }
.head__logo img { width: 148px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.nav a {
	font-family: 'Lexend', sans-serif;
	font-size: .9rem; font-weight: 600;
	color: var(--petrol-ink); text-decoration: none;
	padding-block: .4rem;
	border-bottom: 2px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}
.nav a:hover { color: var(--petrol); border-bottom-color: var(--gold); }
/* Aktuelle Seite — build.mjs setzt aria-current="page" */
.nav a[aria-current] { color: var(--petrol); border-bottom-color: var(--gold); }

/* Aufklappmenue "Weitere Leistungen" — natives <details>, siehe build.mjs.
   Der Pfeil ist der einzige Zusatz; den Systemmarker blenden wir aus. */
.nav__mehr { position: relative; }
.nav__mehr > summary {
	font-family: 'Lexend', sans-serif;
	font-size: .9rem; font-weight: 600;
	color: var(--petrol-ink);
	padding-block: .4rem;
	border-bottom: 2px solid transparent;
	display: inline-flex; align-items: center; gap: .35rem;
	cursor: pointer; list-style: none;
	transition: color .18s ease, border-color .18s ease;
}
.nav__mehr > summary::-webkit-details-marker { display: none; }
.nav__mehr > summary:hover,
.nav__mehr[open] > summary { color: var(--petrol); border-bottom-color: var(--gold); }
/* Eine Unterseite ist offen — dieselbe Goldlinie wie bei aria-current */
.nav__mehr[data-aktiv] > summary { color: var(--petrol); border-bottom-color: var(--gold); }
.nav__pfeil { transition: transform .18s ease; }
.nav__mehr[open] .nav__pfeil { transform: rotate(180deg); }

.nav__klapp {
	position: absolute; top: calc(100% + .55rem); left: -1rem;
	z-index: var(--z-menu);
	display: flex; flex-direction: column;
	min-width: 12rem;
	background: var(--paper);
	border: 1px solid var(--line); border-radius: 6px;
	box-shadow: var(--lift-hi);
	padding: .35rem 0;
}
.nav__klapp a {
	padding: .6rem 1.1rem;
	border-bottom: none; border-left: 2px solid transparent;
}
.nav__klapp a:hover,
.nav__klapp a[aria-current] { border-bottom-color: transparent; border-left-color: var(--gold); background: var(--mist); }

.head__cta { flex: none; }

.burger {
	display: none; margin-left: auto;
	background: none; border: 1px solid var(--line); border-radius: 4px;
	padding: .55rem .7rem; cursor: pointer; color: var(--petrol);
}

/* ---- Hero mit Video ------------------------------------------------------- */
.hero {
	position: relative;
	min-height: min(100dvh, 46rem);   /* dvh statt vh: kein Springen auf iOS */
	display: flex; align-items: flex-end;
	/* Grundfarbe unter dem Video: solange es laedt, ist hier Petrol statt Weiss. */
	background: var(--petrol-deep);
	overflow: hidden;
	isolation: isolate;
}
.hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: var(--z-base);
	/* Hier stand eine opacity-Transition fuer die Blende am Schleifenpunkt.
	   Beides ist am 28.08.2026 entfallen: Der Clip laeuft jetzt als Pendel
	   (vorwaerts und rueckwaerts in einer Datei) und schliesst sich damit von
	   selbst. Begruendung ausfuehrlich in main.js beim Video. */
}

/* Zwei Verlaeufe statt eines flachen Schleiers: unten Petrol fuer die Lesbarkeit,
   oben ein leichter Zug, damit die Kopfzeile Halt bekommt. */
.hero::after {
	content: ''; position: absolute; inset: 0;
	z-index: calc(var(--z-base) + 1);
	background:
		linear-gradient(to top, rgba(1, 43, 63, .90) 0%, rgba(1, 43, 63, .55) 38%, rgba(1, 43, 63, .10) 70%),
		linear-gradient(to bottom, rgba(1, 43, 63, .35), transparent 30%);
}
.hero__in {
	position: relative; z-index: var(--z-overlay);
	padding-block: clamp(3rem, 9vw, 6.5rem);
	color: #fff;
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero__lead {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: rgba(255, 255, 255, .90);
	max-width: 54ch;
	margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__note {
	margin: 1.6rem 0 0;
	font-size: .875rem;
	color: rgba(255, 255, 255, .72);
}

/* ---- Vertrauensleiste ----------------------------------------------------- */
.trust {
	background: var(--petrol);
	color: #fff;
	padding-block: 1.4rem;
}
.trust__in {
	display: grid; gap: 1rem 2rem;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
}
.trust__item {
	display: flex; align-items: center; gap: .7rem;
	font-size: .9rem; line-height: 1.35;
	color: rgba(255, 255, 255, .92);
}
.trust__item svg { flex: none; width: 22px; height: 22px; color: var(--gold); }
.trust__item b {
	display: block;
	font-family: 'Lexend', sans-serif; font-weight: 600;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* ---- Zweispalter (Unternehmen) ------------------------------------------- */
.split {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
}
.split__media { position: relative; }
.split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}
/* Kleine Ueberlappung statt Elemente, die flach nebeneinander stehen */
.split__stamp {
	position: absolute; right: -.9rem; bottom: -1.4rem;
	background: var(--paper);
	border-radius: 4px;
	padding: 1rem 1.25rem;
	box-shadow: var(--lift-hi);
	max-width: 15rem;
}
.split__stamp strong {
	display: block;
	font-family: 'Lexend', sans-serif; font-size: 1.6rem;
	color: var(--petrol);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.split__stamp span { font-size: .8125rem; color: var(--muted); }

/* Google-Bewertung als Plakette auf dem Bild. Die Sterne sind Schmuck und
   per aria-hidden ausgeblendet — die Aussage steht im Text darunter.

   ACHTUNG Spezifitaet: Weiter oben faerbt `.split__stamp span` (0,1,1) allen
   Text grau. `.split__sterne` allein (0,1,0) verliert dagegen — die Sterne
   waren deshalb grau statt golden. Deshalb hier mit Elternklasse davor. */
.split__stamp--google { padding: 1.1rem 1.35rem; }
/* Das innere span muss mitgenannt werden: `.split__stamp span` greift auch
   dort und faerbt sonst genau die Sterne wieder grau. Zweimal in dieselbe
   Falle getreten — deshalb hier ausgeschrieben statt auf Vererbung gehofft. */
.split__stamp .split__sterne,
.split__stamp .split__sterne span {
	color: var(--gold-deep);
}
.split__stamp .split__sterne {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: 1.05rem;
	letter-spacing: .08em;
	line-height: 1;
	margin-bottom: .5rem;
}
.split__stamp .google-g { flex: none; }
.split__stamp--google strong { margin-bottom: .15rem; }

.facts { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: .7rem; }
.facts li {
	display: grid; grid-template-columns: 1.35rem 1fr; gap: .75rem;
	align-items: start;
	font-size: 1rem;
}
.facts svg { width: 1.35rem; height: 1.35rem; color: var(--gold-deep); margin-top: .18rem; }

/* ---- Leistungen ----------------------------------------------------------- */
.cards {
	display: grid; gap: var(--gap);
	grid-template-columns: repeat(3, 1fr);
}
.card {
	display: flex; flex-direction: column;
	background: var(--paper);
	border-radius: 6px;
	overflow: hidden;
	/* Kein Rahmen plus Schatten plus Weiss gleichzeitig — nur eine feine Linie,
	   der Schatten kommt erst beim Hover dazu. */
	border: 1px solid var(--line);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); border-color: transparent; }
.card__media { position: relative; }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__num {
	position: absolute; left: 0; bottom: 0;
	background: var(--petrol); color: #fff;
	font-family: 'Lexend', sans-serif; font-weight: 600;
	font-size: .8125rem; letter-spacing: .1em;
	padding: .45rem .85rem;
	font-variant-numeric: tabular-nums;
}
.card__body {
	display: flex; flex-direction: column; flex: 1;
	padding: 1.6rem 1.5rem 1.75rem;
}
.card__body h3 { margin-bottom: .5rem; }
.card__body p { font-size: .975rem; color: var(--muted); }
/* Links unten buendig, egal wie lang der Text darueber ist */
.card__foot { margin-top: auto; padding-top: 1.1rem; }

/* ---- Zitat ---------------------------------------------------------------- */
.quote { background: var(--petrol); color: #fff; }
.quote__in {
	display: grid; gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: 260px 1fr;
	align-items: center;
}
.quote__portrait {
	width: 260px; aspect-ratio: 3 / 4;
	object-fit: cover; object-position: top center;
	border-radius: 6px;
}
.quote blockquote {
	margin: 0;
	font-family: 'Lexend', sans-serif;
	font-weight: 600;
	font-size: clamp(1.2rem, 2.1vw, 1.65rem);
	line-height: 1.42;
	letter-spacing: -.015em;
	color: #fff;
	text-wrap: pretty;
}
.quote blockquote p { max-width: 44ch; }
.quote figcaption { margin-top: 1.5rem; font-size: .95rem; color: rgba(255, 255, 255, .78); }
.quote figcaption strong {
	display: block;
	font-family: 'Lexend', sans-serif;
	color: #fff; font-size: 1.05rem;
}

/* ---- Zahlen --------------------------------------------------------------- */
/* Drei Zahlen, nicht mehr vier — "37 Jahre Laufzeit" ist raus (26.08.2026). */
.stats {
	display: grid; gap: var(--gap);
	grid-template-columns: repeat(3, 1fr);
}
.stat { border-top: 2px solid var(--gold); padding-top: 1.25rem; }
.stat__num {
	font-family: 'Lexend', sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 2.9rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--petrol);
	font-variant-numeric: tabular-nums;  /* Ziffern springen beim Zaehlen nicht */
	display: block;
}
.stat__label { margin: .6rem 0 0; font-size: .9375rem; color: var(--muted); }

/* ---- Auszeichnungen ------------------------------------------------------- */
/* Statische Leiste, bewusst kein Karussell mit Autoplay */
.seals {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}
.seals img {
	height: 92px; width: auto;
	filter: saturate(.9);
	transition: transform .25s ease, filter .25s ease;
}
.seals img:hover { transform: scale(1.04); filter: saturate(1); }

/* ---- Auszeichnungen nach Jahr --------------------------------------------- */
/* Vier Jahrgaenge nebeneinander, das neueste links. Jeder Jahrgang traegt seine
   zwei Siegel als Paar. Die Siegel haben unterschiedliche Seitenverhaeltnisse
   (Rosette hoch, Tafel schmal), deshalb steuert die Hoehe die Groesse, nicht
   die Breite. */
.ehren {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
}
.ehren__jahr {
	padding-top: 1.25rem;
	border-top: 2px solid var(--line);
}
/* Das laufende Jahr bekommt die Goldlinie — ein Akzent, nicht vier. */
.ehren__jahr--aktuell { border-top-color: var(--gold); }
.ehren__marke {
	margin: 0 0 1.25rem;
	font-family: 'Lexend', sans-serif;
	font-weight: 700; font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
.ehren__jahr--aktuell .ehren__marke { color: var(--petrol); }
.ehren__paar {
	display: flex; align-items: flex-end; justify-content: center;
	gap: clamp(.5rem, 1.5vw, 1rem);
	min-height: 118px;
}
.ehren__paar img {
	height: clamp(84px, 8vw, 118px);
	width: auto;
	transition: transform .3s ease;
}
.ehren__jahr:hover .ehren__paar img { transform: translateY(-3px); }
.ehren__text {
	margin: 1.1rem auto 0; max-width: 22ch;
	font-size: .8125rem; line-height: 1.45; color: var(--muted);
}

/* ---- Referenzen ----------------------------------------------------------- */
/* Wechselnde Formate statt vier identischer Kacheln — ein grosses Bild links
   ueber beide Reihen, daneben ein breites und zwei kleine. Feste Reihenhoehe
   statt aspect-ratio je Figur, sonst reissen Luecken ins Raster. */
.refs {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(150px, 17vw, 215px);
}
.refs figure { margin: 0; overflow: hidden; border-radius: 6px; }
.refs figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.refs figure:nth-child(2) { grid-column: span 2; }
.refs img {
	width: 100%; height: 100%;
	object-fit: cover; border-radius: 6px;
	transition: transform .5s ease;
}
.refs figure:hover img { transform: scale(1.03); }

/* ---- Standorte ------------------------------------------------------------ */
.offices { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.office {
	display: flex; flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1.75rem 1.5rem;
}
.office img {
	width: 76px; height: 76px;
	object-fit: cover; object-position: top center;
	/* Squircle statt Kreis — weniger generisch, immer noch ruhig */
	border-radius: 14px;
	margin-bottom: 1rem;
}
.office h3 { margin-bottom: .15rem; font-size: 1.15rem; }
.office__role { margin: 0 0 1rem; font-size: .875rem; color: var(--muted); }
.office address { font-style: normal; font-size: .95rem; color: var(--petrol-ink); }
.office address a { text-decoration: none; font-weight: 600; }
.office address a:hover { text-decoration: underline; }
.office__foot { margin-top: auto; padding-top: 1.25rem; }

/* ---- Kontakt -------------------------------------------------------------- */
.contact { background: var(--petrol-deep); color: #fff; }
.contact h2 { color: #fff; }
.contact p { color: rgba(255, 255, 255, .85); }
.contact__in {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
}
.contact__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.5rem; }
.contact__card {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 6px;
	padding: 1.75rem;
}
.contact__card dl { margin: 0; display: grid; gap: 1rem; }
.contact__card dt {
	font-family: 'Lexend', sans-serif;
	font-size: .75rem; font-weight: 600; /* 12px — bei 11px fiel die Mobil-Sonde am 29.08.2026 durch (Lesbarkeitsgrenze) */
	letter-spacing: .18em; text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
.contact__card dd {
	margin: .2rem 0 0;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}
.contact__card dd a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--gold); }
.contact__card dd a:hover { border-bottom-width: 2px; }

/* ---- Fusszeile ------------------------------------------------------------ */
.foot {
	background: var(--petrol-ink);
	color: rgba(255, 255, 255, .68);
	padding-block: 3rem 2rem;
	font-size: .9rem;
}
.foot__in { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr; }
.foot h3 {
	color: #fff; font-size: .8125rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	margin-bottom: .9rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__logo { width: 132px; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .9; }
.foot__legal {
	margin-top: 2.5rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
	align-items: center;
	font-size: .8125rem;
}
.foot__legal p { margin: 0; }

/* =========================================================================
   Bausteine der Unterseiten
   ========================================================================= */

/* ---- Kopfband der Unterseiten -------------------------------------------- */
/* Ruhiges Petrol-Band statt Video — das Video bleibt der Startseite vorbehalten,
   sonst nutzt sich der Effekt auf neun Seiten ab. */
.page-hero {
	background: var(--petrol);
	color: #fff;
	padding-block: clamp(3rem, 7vw, 5rem) clamp(3.25rem, 7.5vw, 5.5rem);
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero__sub {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	color: rgba(255, 255, 255, .88);
	max-width: 60ch;
	margin: 0;
}

/* ---- Fliesstext (Impressum, Datenschutz) --------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.prose h3 { margin-top: 1.75rem; font-size: 1.1rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4rem; }
.prose address { font-style: normal; margin-bottom: 1.1em; }
.prose__meta {
	margin-top: 2.5rem; padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-size: .875rem; color: var(--muted);
}

/* ---- Nummerierte Schritte ------------------------------------------------- */
.numbered { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.numbered__item { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.1rem; }
.numbered__num {
	display: grid; place-items: center;
	width: 2.75rem; height: 2.75rem;
	border-radius: 8px;
	background: var(--petrol); color: #fff;
	font-family: 'Lexend', sans-serif; font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.numbered__item h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.numbered__item p { margin: 0; font-size: .975rem; color: var(--muted); }

/* ---- Zeitstrahl (Bauen) --------------------------------------------------- */
.timeline {
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: grid; gap: 0;
	grid-template-columns: repeat(5, 1fr);
}
.timeline__step {
	position: relative;
	padding: 2.75rem 1.25rem 0 0;
	counter-increment: schritt;
}
/* Die Linie liegt hinter den Punkten, die Punkte sitzen darauf */
.timeline__step::before {
	content: ''; position: absolute;
	left: 0; top: 1rem; right: 0; height: 2px;
	background: var(--line);
}
.timeline__step:last-child::before { right: calc(100% - 1rem); }
.timeline__step::after {
	content: counter(schritt);
	position: absolute; left: 0; top: 0;
	width: 2rem; height: 2rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--petrol); color: #fff;
	font-family: 'Lexend', sans-serif; font-weight: 600; font-size: .8125rem;
	font-variant-numeric: tabular-nums;
}
.timeline { counter-reset: schritt; }
.timeline__step h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.timeline__step p { font-size: .925rem; color: var(--muted); margin: 0; }

/* ---- Seitenkarte (Fakten, Hinweise) --------------------------------------- */
.aside-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1.75rem;
}
.aside-card + .aside-card { margin-top: 1.25rem; }
.aside-card h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.aside-card p:last-child, .aside-card ul:last-child { margin-bottom: 0; }
.aside-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.aside-card li { font-size: .95rem; }
/* Gold-Variante: nur als Hinweisrahmen, nicht als Flaeche — Gold bleibt den
   Handlungsaufrufen vorbehalten. */
.aside-card--gold { border-left: 4px solid var(--gold); background: var(--mist); }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { max-width: 78ch; margin-top: 2rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	display: flex; align-items: flex-start; gap: 1rem;
	padding: 1.15rem 0;
	cursor: pointer;
	font-family: 'Lexend', sans-serif; font-weight: 600;
	font-size: 1.05rem; color: var(--petrol);
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: ''; flex: none; margin-left: auto;
	width: 12px; height: 12px; margin-top: .45rem;
	border-right: 2px solid var(--gold-deep);
	border-bottom: 2px solid var(--gold-deep);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--petrol-deep); }
.faq details p { margin: 0 0 1.25rem; color: var(--muted); max-width: 70ch; }

/* ---- Beitragsliste (Aktuelles) -------------------------------------------- */
/* Untereinander, nicht als Kachelraster: vier Beitraege in drei Spalten wirken
   wie ein Archiv mit Luecken. Eine Liste bleibt richtig, egal wie viele es sind. */
.notizen { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--line); }
/* Flex statt Raster mit fester Bildspalte: faellt bei einem Beitrag ohne
   Beitragsbild einfach zusammen, statt eine leere Spalte stehen zu lassen. */
.notiz {
	padding: clamp(1.75rem, 4vw, 2.5rem) 0;
	border-bottom: 1px solid var(--line);
	display: flex; align-items: flex-start; gap: clamp(1.25rem, 3vw, 2rem);
}
.notiz__text { flex: 1 1 0; min-width: 0; }
.notiz__bild {
	flex: none; width: clamp(9rem, 18vw, 13rem);
	overflow: hidden; border-radius: 6px;
	border: 1px solid var(--line);
}
.notiz__bild img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.notiz:hover .notiz__bild img { transform: scale(1.03); }
.notiz__datum {
	margin: 0 0 .6rem;
	font-family: 'Lexend', sans-serif;
	font-size: .8125rem; font-weight: 600;
	letter-spacing: .06em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.notiz__titel { font-size: clamp(1.25rem, 2.2vw, 1.65rem); margin: 0 0 .7rem; max-width: 32ch; }
.notiz__titel a { color: inherit; text-decoration: none; }
.notiz__titel a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.notiz__anriss { color: var(--muted); margin-bottom: 1rem; }
.notiz__mehr { margin: 0; }

/* ---- Beitragsbild im Kopf eines Beitrags ---------------------------------- */
/* Steht in der Textspalte (.prose, 74ch) und damit in derselben Breite wie der
   Text — kein zweites Layoutmuster nur fuer Beitragsseiten. */
.beitrag__bild { margin: 0 0 2rem; }
.beitrag__bild img {
	width: 100%; border-radius: 6px; display: block;
	border: 1px solid var(--line);
}

/* ---- Anrisse auf der Startseite ------------------------------------------- */
/* Kleines Vorschaubild links, Datum und Titel rechts. Die ganze Kachel ist ein
   Link — deshalb liegen alle Kindelemente als <span>/<time> darin, nicht als
   Blockelemente mit eigenem Link. */
.anrisse {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: 1rem;
}
.anriss { margin: 0; }
.anriss__link {
	display: flex; align-items: center; gap: 1rem;
	text-decoration: none; color: inherit;
	padding: .85rem; margin: -.85rem;
	border-radius: 6px;
	transition: background .18s ease;
}
.anriss__link:hover { background: var(--mist); }
.anriss__bild {
	flex: none; width: 5.5rem;
	aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: 5px; border: 1px solid var(--line);
	display: block;
}
.anriss__text { display: block; min-width: 0; }
.anriss__datum {
	display: block; margin-bottom: .3rem;
	font-family: 'Lexend', sans-serif;
	font-size: .75rem; font-weight: 600;
	letter-spacing: .06em; color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.anriss__titel {
	display: block;
	font-family: 'Lexend', sans-serif;
	font-size: .975rem; font-weight: 600; line-height: 1.35;
	color: var(--petrol-ink);
}
.anriss__link:hover .anriss__titel {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* ---- Interview ------------------------------------------------------------ */
.interview > div + div { margin-top: 2.25rem; }
.interview h3 {
	font-size: 1.1rem;
	padding-left: 1rem;
	border-left: 3px solid var(--gold);
	margin-bottom: .7rem;
}
.interview p:last-child { margin-bottom: 0; }

/* ---- Bildreihe (Bauen) ---------------------------------------------------- */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); margin-top: 2rem; }
.gallery figure { margin: 0; border-radius: 6px; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---- Galerie mit Lightbox ------------------------------------------------- */
/* Spaltenweises Masonry ueber CSS-Columns: braucht kein JS und kein Raster-
   Nachrechnen. Preis: die Lesereihenfolge laeuft spaltenweise, nicht zeilenweise.
   Bei einer Bildergalerie ohne Reihenfolge ist das ohne Bedeutung. */
.masonry { columns: 4 240px; column-gap: 1rem; }
.masonry__item {
	display: block; break-inside: avoid;
	margin-bottom: 1rem; border-radius: 6px; overflow: hidden;
	position: relative;
}
.masonry__item img { width: 100%; transition: transform .45s ease; }
.masonry__item:hover img { transform: scale(1.04); }
.masonry__item::after {
	content: ''; position: absolute; inset: 0;
	background: rgba(1, 43, 63, 0);
	transition: background .25s ease;
}
.masonry__item:hover::after { background: rgba(1, 43, 63, .18); }

dialog.lightbox {
	border: none; padding: 0; background: transparent;
	max-width: min(94vw, 1300px); max-height: 94dvh;
	overflow: visible;
}
dialog.lightbox::backdrop { background: rgba(1, 43, 63, .92); }
dialog.lightbox img {
	max-width: 100%; max-height: 88dvh;
	width: auto; height: auto;
	border-radius: 6px;
	margin-inline: auto;
}
.lightbox__close {
	position: absolute; top: -2.75rem; right: 0;
	background: none; border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 4px; color: #fff;
	width: 2.25rem; height: 2.25rem;
	display: grid; place-items: center;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .15); border-color: #fff; }

/* ---- Eingebettete Fremddienste mit Consent-Gate --------------------------- */
/* Propstack sagt ausdruecklich, dass sie nichts einstellen koennen und die
   Einwilligung von der Webseite geloest werden muss (Support-Antwort vom
   18.12.2025). Also: der iframe kommt erst nach Klick in die Seite. Vorher
   steht kein src im Markup und es geht keine Anfrage an leadfisher.propstack.de.
   Das ist echtes Content-Blocking, kein Banner mit Feigenblatt. */
.embed {
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
	overflow: hidden;
}
.embed__gate { padding: clamp(1.75rem, 4vw, 2.75rem); }
.embed__gate h3 { margin-bottom: .6rem; }
.embed__gate p { color: var(--muted); font-size: .975rem; }
.embed__gate .btn { margin-top: .6rem; }
.embed__hinweis {
	margin: 1rem 0 0;
	font-size: .8125rem;
	color: var(--muted);
}
.embed__rahmen { display: none; }
.embed.is-geladen .embed__gate { display: none; }
.embed.is-geladen .embed__rahmen { display: block; }
.embed__rahmen iframe {
	display: block;
	width: 100%;
	min-height: 450px;
	border: 0;
}
/* Skript-Einbettung (Europace-Zinsrechner): kein iframe, das Element waechst
   mit seinem Inhalt. Keine Mindesthoehe noetig — nur etwas Luft, solange das
   Skript noch laedt, damit die Seite nicht springt. */
.embed__rahmen--skript { min-height: 320px; padding: clamp(1rem, 2vw, 1.5rem); }

/* Die Objektliste ist deutlich hoeher als der Wertrechner und schwankt stark:
   gemessen 1043 px bei 1120 px Breite, 2473 px auf dem Handy. Feste Werte waeren
   hier falsch — das Widget meldet seine Hoehe per postMessage, main.js setzt sie.
   Der Wert hier ist nur die Ueberbrueckung, bis die Meldung eintrifft. */
.embed__rahmen--liste iframe { min-height: 800px; }
@media (max-width: 780px) {
	.embed__rahmen--liste iframe { min-height: 1600px; }
}

/* ---- Consent-Banner ------------------------------------------------------- */
/* Fest am unteren Rand, aber kein Vollbild-Overlay: Der Besucher soll die Seite
   weiter lesen koennen. Kein z-index-Wettruesten — 300 liegt ueber der
   Kopfzeile (100) und unter nichts anderem. */
.consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 300;
	padding: clamp(.75rem, 2vw, 1.5rem);
	display: flex;
	justify-content: center;
}
/* [hidden] muss gewinnen — sonst liegt der Banner unsichtbar ueber der Seite
   und schluckt Klicks. Genau dieser Fehler steckte in Entwurf A. */
.consent[hidden] { display: none; }

.consent__karte {
	width: min(100%, 46rem);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--lift-hi);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}
.consent__titel {
	font-family: 'Lexend', sans-serif;
	font-size: 1.05rem;
	color: var(--petrol);
	margin: 0 0 .5rem;
}
.consent__text {
	font-size: .9375rem;
	color: var(--petrol-ink);
	margin: 0 0 1.1rem;
	max-width: none;
}
.consent__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
.consent__aktionen .btn { font-size: .9rem; padding: .75rem 1.3rem; }
.consent__fuss {
	margin: 1rem 0 0;
	font-size: .8125rem;
	color: var(--muted);
	max-width: none;
}

/* Knopf in der Fusszeile, sieht aus wie die Links daneben */
.foot__einstellungen {
	font: inherit;
	color: rgba(255, 255, 255, .78);
	background: none;
	border: 0;
	/* 21px Hoehe fiel bei der Mobil-Sonde durch (WCAG 2.2: 24px). Trefflaeche
	   ueber padding, Ausgleich ueber margin — der Text bleibt, wo er war.
	   padding-block MUSS hinter dem padding: 0 stehen: das Shorthand setzt
	   sonst alles zurueck. Genau so ist der erste Fix am 29.08.2026 wirkungslos
	   verpufft, gefunden vom neuen Tap-Target-Check. */
	padding: 0;
	padding-block: .2rem; margin-block: -.2rem;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: .18em;
}
.foot__einstellungen:hover { color: #fff; }

@media (max-width: 480px) {
	.consent__aktionen .btn { width: 100%; justify-content: center; }
}

/* ---- Formular ------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .4rem; }
.field label {
	font-family: 'Lexend', sans-serif;
	font-size: .8125rem; font-weight: 600;
	letter-spacing: .04em; color: var(--petrol);
}
.field .pflicht { color: var(--muted); font-weight: 400; }
.field input, .field textarea, .field select {
	font: inherit; font-size: 1rem;
	color: var(--petrol-ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: .8rem .9rem;
	width: 100%;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #b9c6cf; }
.field input:focus, .field textarea:focus, .field select:focus {
	border-color: var(--petrol);
	box-shadow: 0 0 0 3px rgba(0, 83, 121, .12);
	outline: none;
}
/* Fehler erst zeigen, wenn geprueft wurde — nicht beim Tippen ab Zeichen eins */
.field.is-fehler input, .field.is-fehler textarea { border-color: #a4272b; }
.field__fehler {
	font-size: .8125rem; color: #a4272b;
	display: none;
}
.field.is-fehler .field__fehler { display: block; }

/* Hinweiszeile statt Einwilligungshaken — wie im alten Formular. */
.form__hinweis { font-size: .875rem; color: var(--muted); margin: 0; }

.form__consent { display: grid; grid-template-columns: 1.15rem 1fr; gap: .75rem; align-items: start; }
.form__consent input { width: 1.15rem; height: 1.15rem; margin-top: .28rem; }
.form__consent label { font-size: .9rem; font-weight: 400; color: var(--petrol-ink); font-family: inherit; letter-spacing: 0; }

/* Honigtopf gegen Bots: fuer Menschen unsichtbar, aber nicht display:none —
   manche Bots ueberspringen versteckte Felder gezielt. */
.form__hp {
	position: absolute; left: -9999px;
	width: 1px; height: 1px; overflow: hidden;
}

.form__status {
	padding: 1rem 1.15rem;
	border-radius: 4px;
	border-left: 4px solid var(--gold);
	background: var(--mist);
	font-size: .95rem;
	display: none;
}
.form__status.is-sichtbar { display: block; }

/* ---- Bewegung ------------------------------------------------------------- */
/* Hier stand eine Einblendung beim Scrollen (.reveal.is-in mit @keyframes rise).
   ENTFERNT am 26.08.2026, nach zwei Fehlerrunden.

   Warum: Mit _diagnose.mjs gemessen starteten 25 von 25 Animationen auf
   Elementen, die bereits im Sichtbereich standen. Der Besucher sah den Inhalt,
   dann sprang er auf opacity 0 und blendete sich ein — das wirkt wie eine
   doppelt abgespielte Animation. Ein groesserer rootMargin brachte es nur von
   25 auf 17 herunter.

   Der Kern: Eine Einblendung darf nicht sichtbar sein, wenn sie startet, und
   muss fertig sein, wenn das Element erscheint. Sie ist damit eine Animation,
   die niemand sehen soll — also ueberfluessig. Dieser Entwurf ist der ruhigste
   der drei; Leben bekommt er aus dem Video, den hochzaehlenden Zahlen und den
   Hover-Zustaenden.

   Die .reveal-Klassen bleiben als stiller Haken im Markup. Ohne diese Regel
   tun sie nichts. */

/* ---- Responsiv ------------------------------------------------------------ */
@media (max-width: 1080px) {
	.anrisse { grid-template-columns: repeat(2, 1fr); }
	.trust__in { grid-template-columns: repeat(2, 1fr); }
	.cards, .offices { grid-template-columns: repeat(2, 1fr); }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.foot__in { grid-template-columns: 1fr 1fr; }
	.gallery { grid-template-columns: repeat(2, 1fr); }
	/* Zeitstrahl waagerecht braucht Platz — ab hier zwei Reihen */
	.timeline { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
}

@media (max-width: 960px) {
	.nav { gap: 1.1rem; }
	.nav a, .nav__mehr > summary { font-size: .85rem; }
}

@media (max-width: 900px) {
	/* Zwischen 768 und 1120px brach in Variante A die Navigation um.
	   Hier weicht zuerst die Telefon-Pille, dann die Navigation. */
	.head__cta { display: none; }
}

@media (max-width: 780px) {
	.nav {
		display: none;
		position: absolute; inset-inline: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--paper);
		border-block: 1px solid var(--line);
		padding: .5rem 1.25rem 1.25rem;
		box-shadow: var(--lift);
	}
	.nav.is-open { display: flex; }
	.nav > a { padding-block: .85rem; border-bottom: 1px solid var(--line); }
	.nav > a:last-child { border-bottom: none; }
	.burger { display: block; }
	.head { position: relative; }

	/* Im Burger klappt "Weitere Leistungen" nach unten auf, statt zu schweben —
	   ein schwebendes Feld in einem ohnehin ausgeklappten Menue waere doppelt. */
	.nav__mehr { border-bottom: 1px solid var(--line); }
	.nav__mehr:last-child { border-bottom: none; }
	.nav__mehr > summary { padding-block: .85rem; width: 100%; justify-content: space-between; }
	.nav__klapp {
		position: static;
		border: none; border-radius: 0; box-shadow: none;
		background: transparent;
		min-width: 0; padding: 0 0 .5rem;
	}
	.nav__klapp a { padding: .6rem 0 .6rem 1rem; }

	.split, .quote__in, .contact__in { grid-template-columns: 1fr; }
	.split__media { order: -1; }
	.split__stamp { right: 1rem; bottom: -1.25rem; }
	.cards, .offices { grid-template-columns: 1fr; }
	.quote__portrait { width: 180px; }
	/* Vier Jahrgaenge nebeneinander sind auf dem Handy zu schmal — zwei Reihen. */
	.ehren { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
	.refs { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; }
	.refs figure:nth-child(n) { grid-column: auto; grid-row: auto; }
	.foot__in { grid-template-columns: 1fr; }
	.seals img { height: 68px; }

	/* Zeitstrahl senkrecht: Linie links, Punkte darauf */
	.timeline { grid-template-columns: 1fr; row-gap: 0; }
	.timeline__step { padding: 0 0 1.75rem 3rem; }
	.timeline__step::before {
		left: .95rem; top: 0; right: auto; bottom: 0;
		width: 2px; height: auto;
	}
	.timeline__step:last-child::before { bottom: calc(100% - 1rem); right: auto; }
	.form__row { grid-template-columns: 1fr; }
	.masonry { columns: 2 150px; }
	.anrisse { grid-template-columns: 1fr; gap: .5rem; }
	/* Vorschaubild in der Uebersicht nach oben, sonst bleiben vom Titel
	   auf 375 px nur noch zwei Woerter pro Zeile. */
	.notiz { flex-direction: column; gap: 1.25rem; }
	.notiz__bild { width: 100%; }
}

@media (max-width: 420px) {
	.trust__in { grid-template-columns: 1fr; }
	.stats { grid-template-columns: 1fr; }
	.hero__actions .btn { width: 100%; justify-content: center; }
}

/* ---- Reduzierte Bewegung -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	/* Das Video laeuft dann nicht — main.js pausiert es und zeigt das Standbild. */
	.hero__video { transition: none; }
	.card:hover, .refs figure:hover img, .seals img:hover,
	.notiz:hover .notiz__bild img { transform: none; }
}

/* ---- Druck ---------------------------------------------------------------- */
@media print {
	.head, .hero__video, .burger { display: none; }
	.hero, .trust, .quote, .contact, .foot { background: #fff !important; color: #000 !important; }
	.hero h1, .contact h2 { color: #000 !important; }
}