/* =========================================================================
   PRO-IM Management GmbH
   Uebernommen aus dem Schwesterprojekt der PRO-IM Neo GmbH (Variante C) und
   dort angepasst, wo die Management andere Bauteile hat: Galerie, Lightbox,
   Consent-Banner und Propstack-Gate sind entfallen, dazugekommen sind
   .objekte, .objekt-daten, .office__initialen, .card__symbol und .img--voll.

   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 (max-width: 17ch) erzeugte sie am 29.08.2026
   "Eigen-tuemern", und getrennte Woerter in einer 3,6rem-Zeile liest man als
   Fehler, nicht als Typografie.
   overflow-wrap bleibt als Notbremse: Ein Wort, das partout nicht passt,
   bricht dann hart statt aus dem Kasten zu laufen. */
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 (Kontaktkarten, 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 hat dessen inline-flex ueberschrieben — das Pfeil-Icon von
   "Route planen" brach dadurch in die naechste Zeile. Aufgefallen am
   29.08.2026 im Screenshot, nicht in einer Pruefung. */
.contact__card a:not(.tlink), .office a:not(.tlink),
.foot a[href^="tel:"], .foot a[href^="mailto:"] {
	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; }
/* Ueber die Hoehe bemessen, nicht ueber die Breite. Das Neo-Logo war ein PNG
   im Verhaeltnis 3,5:1, das Management-Logo ist ein SVG mit 2,15:1 — bei den
   geerbten 148px Breite waere es 69px hoch und wuerde die 76px hohe Kopfzeile
   sprengen. Die Hoehe ist hier die Groesse, auf die es ankommt. */
.head__logo img { width: auto; height: 44px; }

.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__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: var(--z-base);
	/* Standbild statt Video (die Neo hat eins, hier gibt es keins).
	   damit der Ruecksprung nicht als Schnitt auffaellt. Kurz halten — in der
	   Blende ist der Header eine reine Farbflaeche. */
	transition: opacity .45s ease;
}

/* 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, .78);
}
/* Ohne diese Regel erbt der Link das Petrol aus der Grundregel fuer a — dunkel
   auf dunklem Kopfbild, praktisch unlesbar. Faellt beim Draufschauen sofort
   auf und ist durch keine der geerbten Pruefungen gefallen: die Kontrast-
   pruefung sah nur Fliesstext und Knoepfe an. Seit dem 28.08. deckt sie jeden
   Link ab. */
.hero__note a { color: #fff; text-decoration-color: var(--gold); }

/* ---- Vertrauensleiste ----------------------------------------------------- */
.trust {
	background: var(--petrol);
	color: #fff;
	padding-block: 1.4rem;
}
/* auto-fit statt fester Spaltenzahl: Das Neo-Theme hatte vier Vertrauenspunkte
   und deshalb repeat(4, 1fr). Hier sind es drei — die rutschten damit in drei
   Viertel der Breite, und "Unabhaengig von Unternehmensanbindungen" brach
   mitten im Satz um. Die Spaltenzahl soll sich nach den Punkten richten, nicht
   umgekehrt. */
.trust__in {
	display: grid; gap: 1rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	align-items: center;
}
/* Kein flex: Auszeichnung und Text gehoeren in eine Zeile und sollen zusammen
   umbrechen. Als Flex-Container wurden <strong> und der Textknoten zwei
   getrennte Kaesten — das "von" landete allein in der zweiten Zeile. */
.trust__item {
	font-size: .9rem; line-height: 1.35;
	color: rgba(255, 255, 255, .92);
	margin: 0;
}
.trust__item strong { margin-right: .35rem; }
.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 */
.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 */
/* ---- 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. */
/* ---- 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;
}
/* Portraits auf Kartenbreite statt der 76px aus dem Neo-Theme. Dort waren es
   drei Bueros mit einem Ansprechpartner — hier ist das Team der Inhalt, und
   dafuer waren die Kacheln zu klein (Justin, 28.08.2026). Die Bestandsseite
   zeigte sie ebenfalls gross.
   aspect-ratio statt fester Hoehe: die Quellen haben leicht verschiedene
   Seitenverhaeltnisse (1104x944, 1920x1581, 1088x896), und ohne festen
   Rahmen stuenden die Karten unterschiedlich hoch nebeneinander. */
.office img {
	width: 100%; height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* 28 % statt Mitte: Gesichter sitzen im oberen Drittel, mittig
	   beschnitten wuerde die Stirn abgeschnitten. */
	object-position: center 28%;
	border-radius: 6px;
	margin-bottom: 1.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) --------------------------------------------------- */
/* ---- 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; }

/* Galerie, Lightbox, Consent-Banner und iframe-Einbettungen sind mit dem
   uebrigen Neo-Erbe entfernt — diese Seite laedt nichts Fremdes und hat
   folgerichtig keinen Banner. Zwei uebersehene Restbloecke (.embed__rahmen,
   .consent__aktionen) sind am 29.08.2026 nachgezogen; kein Markup nutzte sie. */

/* ---- 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__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__bg { transition: none; }
	.card:hover, .refs figure:hover img, .seals img:hover,
	.notiz:hover .notiz__bild img { transform: none; }
}

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

/* ---- Objektdaten auf den Referenzkarten -----------------------------------
   Schluessel-Wert-Paare. Als <dl> ausgezeichnet, weil es genau das ist — und
   weil Screenreader Begriff und Wert dann zusammen vorlesen. Keine der
   vorhandenen Klassen passt: .facts ist eine Hakenliste, .stat eine einzelne
   grosse Zahl. */
.objekt-daten { margin: .35rem 0 0; display: grid; gap: .55rem; }
.objekt-daten > div {
	display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem;
	align-items: baseline;
	border-top: 1px solid var(--line);
	padding-top: .55rem;
}
.objekt-daten dt {
	font-size: .84rem; letter-spacing: .04em; text-transform: uppercase;
	color: var(--muted);
}
.objekt-daten dd { margin: 0; font-weight: 500; }

/* Unter 380 px wird die zweispaltige Zeile zu eng — dann untereinander. */
@media (max-width: 380px) {
	.objekt-daten > div { grid-template-columns: 1fr; gap: .1rem; }
}

/* ---- Initialen statt Portrait --------------------------------------------
   Vier der acht Teammitglieder haben kein Foto. Die Bestandsseite fuellt die
   Luecke mit KI-erzeugten Silhouetten ("A_digital_placeholder_image_features_
   a_female_silh..."). Das sieht billig aus und behauptet ausserdem ein Bild,
   wo keines ist. Eine Initialenkachel ist ehrlicher, ruhiger — und macht die
   Luecke sichtbar, statt sie zu kaschieren.
   Deckel: sobald echte Portraits da sind, wird die Kachel durch ein <img>
   ersetzt; die Masse sind dieselben wie bei .office img. */
.office__initialen {
	/* Exakt die Masse von .office img — sonst stehen Karten mit und ohne Foto
	   unterschiedlich hoch nebeneinander und die Luecke sieht nach Fehler aus
	   statt nach Absicht. */
	width: 100%; aspect-ratio: 4 / 3;
	border-radius: 6px;
	margin-bottom: 1.1rem;
	display: grid; place-items: center;
	background: var(--petrol);
	color: #fff;
	font-family: 'Lexend', system-ui, sans-serif;
	font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; letter-spacing: .04em;
	/* aria-hidden im Markup: der Name steht direkt darunter, die Initialen
	   waeren fuer den Screenreader nur eine zweite, schlechtere Fassung. */
	user-select: none;
}

/* ---- Symbol auf einer Karte ------------------------------------------------
   Die fuenf casavi-Symbole. Groesse gehoert ins CSS, nicht in die Attribute:
   width/height im Markup beschreiben die Datei (220 px, fuer die Aufloesung des
   Bildschirms), die Anzeigegroesse regelt die Seite. Stand die Groesse nur im
   Attribut, lag sie bei genau 110 px und liess sich nicht mehr anpassen —
   check.mjs faellt darueber ("height schlaegt nicht aspect-ratio"). */
.card__symbol {
	width: 3.4rem; height: auto;
	margin-bottom: .9rem;
}

/* ---- Google-Bewertung als Plakette auf dem Bild ---------------------------
   Uebernommen aus dem Neo-Theme (dort .split__stamp). Die Sterne sind Schmuck
   und per aria-hidden ausgeblendet — die Aussage steht als Text darunter.

   ACHTUNG Spezifitaet: `.bewertung span` faerbt allen Text grau. Die Sterne
   muessen deshalb mit Elternklasse davor genannt werden, sonst verlieren sie
   und stehen grau statt golden da. Im Neo-Theme ist genau das zweimal
   passiert. */
.bewertung {
	position: absolute; right: -.9rem; bottom: -1.4rem;
	background: var(--paper);
	border-radius: 4px;
	padding: 1.1rem 1.35rem;
	box-shadow: var(--lift-hi);
	max-width: 16rem;
}
.bewertung__sterne {
	display: flex; align-items: center; gap: .45rem;
	font-size: 1.05rem; letter-spacing: .06em;
	margin-bottom: .3rem;
}
.bewertung .bewertung__sterne,
.bewertung .bewertung__sterne span { color: var(--gold-deep); }
.bewertung strong {
	display: block;
	font-family: 'Lexend', sans-serif; font-size: 1.6rem;
	color: var(--petrol);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.bewertung span { font-size: .8125rem; color: var(--muted); }
.bewertung__g { flex: none; }

/* Auf schmalen Schirmen nicht mehr ueberlappend, sonst deckt die Plakette das
   halbe Bild zu. */
@media (max-width: 700px) {
	.bewertung { position: static; margin-top: 1rem; max-width: none; }
}

/* ---- Bild, das nicht beschnitten werden darf -----------------------------
   `.split__media img` presst jedes Bild in 4:3 und schneidet mit object-fit:
   cover den Ueberstand ab. Fuer Fotos ist das richtig — bei einer Grafik
   schneidet es Inhalt weg. Das Systembild (Scalara/casavi/Vulcavo) ist
   quadratisch, und die obere Kachel verlor dabei ihren Kopf.
   contain statt cover, und das Seitenverhaeltnis kommt aus der Datei. */
/* ---- Anfahrtskarte -------------------------------------------------------
   Zwei Probleme auf einmal (Justin, 29.08.2026): Die Karte "schwebte im
   leeren Raum" — sie ist eine Zeichnung mit weissem Grund auf hellgrauer
   Sektion, ohne Kante war nicht zu sehen, wo sie aufhoert. Und sie war nicht
   anklickbar.
   Der Rahmen fasst sie ein, die Beschriftung macht die Klickbarkeit sichtbar.
   contain statt cover: Ein Lageplan darf nicht beschnitten werden, sonst
   fehlt die Strassenbeschriftung am Rand. */
.karte {
	display: block; position: relative;
	border: 1px solid var(--line);
	border-radius: 6px; overflow: hidden;
	background: var(--paper);
	transition: border-color .2s, box-shadow .2s;
}
.karte img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	border-radius: 0;
	display: block;
}
/* Weiss auf Schatten, nicht Petrol: Die Karte hat unten einen dunklen
   Wasserbereich (Schiersteiner Hafen), auf dem ein petrolfarbener Knopf
   praktisch verschwand. Weiss mit Schatten haelt sich gegen jeden
   Kartenausschnitt — auch wenn die Grafik spaeter getauscht wird. */
.karte__aktion {
	position: absolute; inset-inline-end: .75rem; inset-block-end: .75rem;
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .45rem .8rem;
	background: var(--paper); color: var(--petrol);
	font-family: 'Lexend', sans-serif;
	font-size: .8125rem; font-weight: 600;
	border-radius: 4px;
	box-shadow: var(--lift);
}
.karte:hover, .karte:focus-visible {
	border-color: var(--gold);
	box-shadow: var(--lift);
}
.karte:hover .karte__aktion, .karte:focus-visible .karte__aktion {
	background: var(--gold); color: var(--petrol-ink);
}

.split__media img.img--voll {
	aspect-ratio: auto;
	object-fit: contain;
	background: var(--mist);
}

/* ---- Objektliste: Bild links, Zahlen rechts ------------------------------
   WARUM NICHT DIE KARTEN VON OBEN:
   Vier der sechs Objektfotos liegen nur in 468x297 vor — das ist die
   Originalgroesse in der WordPress-Mediathek von 2018, groesser existieren sie
   nicht (Mediathek am 28.08.2026 abgefragt). In der dreispaltigen Kartenreihe
   waeren sie 382 px breit dargestellt, also 1,2-fach. Auf jedem heutigen
   Bildschirm sieht das matschig aus, und ausgerechnet das groesste Objekt
   (Gummersbach, 301 Einheiten) traf es.

   Zwei Spalten statt drei, Bild links statt ueber der Karte: Das Foto ist
   damit rund 200 px breit — bei 468 px Vorlage also 2,3-fach und scharf. Die
   Zahlen bekommen gleichzeitig mehr Platz, und darum geht es auf dieser Seite.

   Sobald bessere Fotos da sind, kann das wieder auf die grossen Karten. */
.objekte { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
.objekt {
	display: grid; grid-template-columns: 34% 1fr;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
}
.objekt__bild { position: relative; }
.objekt__bild img {
	width: 100%; height: 100%;
	object-fit: cover;
	/* Gebaeude stehen im Bild oben, Strasse und Autos unten. */
	object-position: center 40%;
}
.objekt__num {
	position: absolute; left: 0; bottom: 0;
	background: var(--petrol); color: #fff;
	font-family: 'Lexend', sans-serif; font-size: .8rem; font-weight: 600;
	padding: .3rem .6rem;
}
.objekt__text { padding: 1.4rem 1.5rem 1.5rem; }
.objekt__text h3 { margin-bottom: .2rem; }

@media (max-width: 860px) {
	.objekte { grid-template-columns: 1fr; }
}
/* Unter 520 px wird die Bildspalte zu schmal — dann Bild oben, Text darunter.
   Feste Hoehe, weil das Bild sonst seine Naturhoehe annimmt und die Karte
   sprengt. */
@media (max-width: 520px) {
	.objekt { grid-template-columns: 1fr; }
	.objekt__bild { height: 190px; }
}