/* ============================================================
   ACHTUNG BEIM AENDERN DIESER DATEI

   vercel.json laesst den Browser Stylesheet und Skripte ein Jahr
   unveraendert behalten (max-age=31536000, immutable). Der einzige
   Weg, eine neue Fassung auszuliefern, ist die Versionsnummer in
   der Adresse:

       <link ... href="/assets/css/style.css?v=14">
       <script src="/assets/js/main.js?v=14">

   Nach jeder Aenderung hier ODER an einer Datei unter assets/js
   muss ?v= in ALLEN HTML-Dateien hochgezaehlt werden. Ohne das
   sehen wiederkehrende Besucher die alte Fassung - unter Umstaenden
   bis zu einem Jahr lang. Auch api/kontakt.js verweist auf das
   Stylesheet, die Fehlerseite dort gehoert also mit hochgezaehlt.

   Aktueller Stand: v=14
   ============================================================ */

/* ---------- Schriften, selbst ausgeliefert ----------
   Bewusst nicht ueber Google Fonts: die dynamische Einbindung uebertraegt
   die IP-Adresse jedes Besuchers an Google. Das LG Muenchen I hat dafuer
   am 20.01.2022 (3 O 17493/20) Schadensersatz zugesprochen, weil die
   lokale Einbindung das mildere Mittel ist. Damit entfaellt der Punkt. */
/* ---------- Schriften, selbst ausgeliefert ----------
   Bewusst nicht ueber Google Fonts: die dynamische Einbindung uebertraegt
   die IP-Adresse jedes Besuchers an Google. Das LG Muenchen I hat dafuer
   am 20.01.2022 (3 O 17493/20) Schadensersatz zugesprochen, weil die
   lokale Einbindung das mildere Mittel ist. Damit entfaellt der Punkt.

   Es sind variable Schriften: eine Datei deckt den ganzen Bereich von
   400 bis 700 ab. Vorher lag dieselbe Datei vier- bzw. zweimal unter
   verschiedenen Namen hier, und der Browser lud sie entsprechend oft -
   auf der Startseite dreimal Inter und zweimal Lora, jedes Mal
   bytegleich. Ein Gewichtsbereich statt fester Werte behebt das.

   latin-ext wird nur geladen, wenn ein Zeichen daraus auf der Seite
   vorkommt. Deutsche Umlaute liegen in latin, die Datei bleibt also
   im Regelfall ungeladen. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/lora-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/lora-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/lora-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/lora-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Farben ----------
   Alle Flaechen sind aus der Logofarbe #08668b gerechnet, damit nichts
   gegen die Marke arbeitet: der abgesetzte Ton ist dasselbe Petrol zu 15%
   ueber Weiss, die Linie zu 25%, das dunkle Band dasselbe Petrol zu 55%
   ueber Schwarz. Das Logo kennt nur Petrol, Weiss und Schwarz - ein warmer
   Gegenton hat darin nichts zu suchen.
   Das eigentliche Problem war nie die Farbe, sondern die Helligkeit: die
   Seite lag in L*-Werten fast durchgehend zwischen 94 und 99, der Wechsel
   der Sektionen war unsichtbar und zwischen hell und Fusszeile fehlte
   jeder Mittelton. Jetzt: 99 hell, 91 abgesetzt, 24 als Anker, 20 unten. */
:root {
  --brand: #08668b;
  --brand-dark: #054f6c;
  --ink: #14313d;
  --muted: #4a5e66;
  --bg: #fbfcfc;      /* L* 99 */
  --bg-alt: #dae8ee;  /* L* 91 - Logofarbe zu 15%, vorher #e9f0f3 mit L* 94 */
  --line: #c1d9e2;    /* L* 85 - Logofarbe zu 25% */
  --tief: #0d3d52;    /* L* 24 - der fehlende Mittelton, siehe .section-dunkel */
  --footer: #0b3547;  /* L* 20 */
  --max: 1240px;

  /* Rundungen als Stufen statt zweier zufaelliger Werte. 2-3px lag in der
     Zone, die weder scharf noch weich wirkt - das liess die Seite alt
     aussehen. */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Tiefe statt Haarlinien: Flaechen werden durch Licht getrennt, nicht
     durch Rahmen. Drei Stufen reichen - ruhend, angehoben, schwebend.
     Etwas kraeftiger als urspruenglich, damit weisse Karten auch auf
     hellem Grund noch stehen und nicht schweben. */
  --shadow-sm: 0 1px 2px rgba(20, 49, 61, .05), 0 2px 6px rgba(20, 49, 61, .06);
  --shadow-md: 0 2px 6px rgba(20, 49, 61, .06), 0 8px 20px rgba(20, 49, 61, .09);
  --shadow-lg: 0 4px 12px rgba(20, 49, 61, .07), 0 20px 44px rgba(20, 49, 61, .15);

  /* Lora traegt die Ueberschriften: Antiqua fuer Herkunft und Handwerk.
     Inter fuer alles Gelesene - bei 13 bis 16px ruhiger und schmaler als
     eine geometrische Grotesk, tritt neben der Antiqua zurueck. */
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;

  /* Hoehe der Kopfzeile - oben am Seitenanfang und zusammengeschoben beim
     Scrollen. Steht hier, weil auch die Sprungmarken den Wert brauchen. */
  --kopf-gross: 96px;
  --kopf-klein: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/*
  Das hidden-Attribut blendet ein Element nur ueber die Voreinstellung des
  Browsers aus, und die verliert gegen jede eigene display-Regel. Genau das
  ist mit der Bestaetigung des Kontaktformulars passiert: sie steht auf
  display:flex und war dadurch von Anfang an sichtbar, obwohl im HTML
  "hidden" stand. Diese Regel stellt sicher, dass hidden immer gewinnt -
  sonst haengt es davon ab, ob eine Klasse zufaellig display setzt.
*/
[hidden] { display: none !important; }

/* Sprungmarken landen sonst unter der klebenden Kopfzeile. */
[id] { scroll-margin-top: calc(var(--kopf-klein) + 20px); }

html {
  scroll-behavior: smooth;
  /* Verhindert, dass iOS im Querformat die Schrift eigenmaechtig vergroessert */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* verhindert das Springen, wenn mobile Browserleisten ein- und ausfahren */
}

a { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-dark); }
::selection { background: var(--brand); color: #fff; }

/* Sichtbarer Fokus fuer Tastaturbedienung - :focus-visible trifft nur die
   Tastatur, Mausklicks loesen den Ring nicht aus. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
.site-footer :focus-visible,
.cta-band :focus-visible { outline-color: #fff; }

img, svg { display: block; max-width: 100%; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ---------- Header ----------
   Eine Zeile: Marke links, Navigation rechts auf derselben Linie. Weil der
   Kopf oben klebt, kostet er dauerhaft Bildschirmhoehe - deshalb schrumpft
   er beim Scrollen von --kopf-gross auf --kopf-klein und das Wappen mit
   ihm. Die Aktionen liegen nicht mehr hier, sondern in .kontakt-dock. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Farbwert an --bg gekoppelt statt eigener Ton - beim Umstellen der
     Hintergrundfarbe war der Kopf sonst minimal daneben. */
  background: rgba(251, 252, 252, .86);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 40px;
  min-height: var(--kopf-gross);
  transition: min-height .3s ease;
}
.site-header.is-scrolled .header-inner { min-height: var(--kopf-klein); }
.site-header.is-scrolled .brand-logo { height: 46px; }

/* Das Wappen traegt die Marke, deshalb bekommt es Groesse und Luft. */
.brand { display: flex; align-items: center; gap: 16px; flex: none; }
.brand-logo { height: 60px; width: auto; flex: none; transition: height .3s ease; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
/* Der Schriftzug bleibt serifenlos - er ist Logo, nicht Ueberschrift. Die
   Laufweite war mit .44em so weit, dass man Buchstaben statt Wort las. */
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: .2em; color: var(--ink); }
.brand-sub { font-size: 10px; font-weight: 600; letter-spacing: .3em; color: var(--brand); }

/* margin-left: auto statt flex: 1 - die Punkte sollen rechts stehen und
   nicht auf der freien Flaeche zwischen Marke und Rand schwimmen. */
/* Acht Punkte brauchen nebeneinander rund 945px. Schriftgrad und Abstand
   sind so gewaehlt, dass das iPad im Querformat (1024px) sie noch zeigt -
   mit 14px und 26px Abstand waeren es 1016px und damit zu viel. */
.nav { display: flex; align-items: center; gap: clamp(15px, 1.8vw, 24px); margin-left: auto; }
.nav a { position: relative; font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); }
/* Ein kurzer Strich unter dem Wort zeigt den Ort an - Farbe allein ist bei
   sieben Punkten in einer Reihe zu leise. */
.nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--brand);
}

/* ---------- Kontaktleiste ----------
   Anrufen und Bewerten stehen nicht mehr im Kopf, sondern durchgehend am
   unteren Rand - vom Seitenanfang bis zum Ende, ohne Javascript.
   Damit sie am Seitenende nichts verdeckt, bekommt die Fusszeile unten
   Platz in ihrer Hoehe. Die Regel haengt am Nachbarn: nur Seiten, die die
   Leiste wirklich tragen, reservieren den Streifen. */
.kontakt-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(251, 252, 252, .92);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
}
.kontakt-dock .btn { border-radius: var(--r-pill); padding: 12px 22px; font-size: 13.5px; }
.kontakt-dock .btn-call { padding: 12px 18px; }

/* 57px Leiste plus 24px Abstand zum Rand, aufgerundet auf 72px zusaetzlich
   zum Polster, das die Fusszeile schon hat. */
.kontakt-dock + .site-footer { padding-bottom: 72px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  margin: 4px 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn { box-shadow: 0 1px 2px rgba(8, 102, 139, .2), 0 4px 10px rgba(8, 102, 139, .14); }
.btn:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 2px 4px rgba(8, 102, 139, .22), 0 8px 20px rgba(8, 102, 139, .2); }
.btn-lg { padding: 16px 30px; font-size: 14px; }
.btn-invert { background: #fff; color: var(--brand); font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .16); }
.btn-invert:hover { background: #e3eff4; color: var(--brand); box-shadow: 0 4px 18px rgba(0, 0, 0, .22); }

/* Anrufen steht als Umriss neben der gefuellten Hauptaktion: gleiche
   Geometrie, geringeres Gewicht - sonst konkurrieren zwei Schaltflaechen
   um dieselbe Aufmerksamkeit. Das Polster ist um die Rahmenbreite kleiner,
   damit beide exakt gleich hoch sind. */
/* Anrufen ist die zweite Wahl, nicht die zweite Hauptaktion: getoente
   Flaeche statt Umriss, kein Rahmen, kein Schatten. Dadurch traegt nur eine
   Schaltflaeche Gewicht - und das Logo bekommt seinen Platz zurueck. */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: rgba(8, 102, 139, .08);
  color: var(--brand);
  border: 0;
  box-shadow: none;
}
.btn-call:hover { background: rgba(8, 102, 139, .16); color: var(--brand-dark); box-shadow: none; }
.btn-call svg { fill: currentColor; flex: none; }

.link-underline {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand);
  border-bottom: 1px solid #b7cfd9;
  padding-bottom: 3px;
  white-space: nowrap;
}
.link-underline:hover { border-bottom-color: var(--brand); }

/* ---------- Typography helpers ---------- */

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .35em;
  color: var(--brand);
  margin-bottom: 16px;
}

/* Antiqua braucht andere Werte als eine Grotesk: etwas mehr Zeilenabstand,
   dafuer leicht negative Laufweite, sonst wirken grosse Zeilen auseinander
   gezogen. Grosse Ueberschriften stehen im leichteren Schnitt - 600 wird bei
   50px zu fett. */
/* Deutsche Komposita wie "Sondereigentumsverwaltung" sprengen auf schmalen
   Geraeten jede Zeile. break-word faengt das ab, die Silbentrennung greift
   ueber lang="de" im html-Element. */
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); overflow-wrap: break-word; }
h1 { font-size: clamp(32px, 5vw, 62px); line-height: 1.1; font-weight: 500; letter-spacing: -.02em; text-wrap: pretty; }
h2 { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.18; font-weight: 600; letter-spacing: -.015em; text-wrap: pretty; }
h3 { font-size: 19px; line-height: 1.4; font-weight: 600; }

.lead { font-size: 19px; line-height: 1.6; color: var(--muted); }

main { flex: 1; }

/* ---------- Hero ---------- */

/* Typografischer Einstieg statt halber Bildflaeche: traegt sich allein,
   solange keine Fotos da sind, und wirkt nicht wie eine Leerstelle. Ein
   Hintergrundbild kann spaeter in .hero-bg gelegt werden, ohne dass sich
   am Text etwas aendert. */
.hero {
  position: relative;
  padding: clamp(80px, 10.5vw, 160px) 0 clamp(72px, 9vw, 128px);
  overflow: hidden;
}
.hero h1 {
  margin-bottom: 28px;
  max-width: 17ch;
  font-size: clamp(32px, 7.5vw, 84px);
  line-height: 1.06;
}
/* Ein kursives Wort traegt die ganze Zeile - Lora hat dafuer einen echten
   Kursivschnitt, keine schraeggestellte Normalschrift. */
.hero h1 em { font-style: italic; font-weight: 500; color: var(--brand); }
.hero .lead { margin-bottom: 40px; max-width: 52ch; }

.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
/* Langsames Heranfahren: gibt einem Standbild die Anmutung eines Films,
   ohne dass gefilmtes Material noetig waere. Greift, sobald in .hero-bg ein
   Foto oder Video liegt. */
@keyframes langsam-heran {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
.hero-bg video, .hero-bg img { animation: langsam-heran 22s ease-out forwards; }

/* Beim Scrollen einblenden. Die Klasse setzt das Skript, nicht das HTML -
   ohne JavaScript bleibt der Inhalt also sichtbar statt unsichtbar. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .6, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Bildflaechen ----------
   Bewusst ueber Seitenverhaeltnisse statt fester Pixelhoehen: die Flaeche
   waechst mit der Spaltenbreite mit, und echte Fotos werden auf jeder
   Bildschirmgroesse gleich angeschnitten. */

.ratio-square { aspect-ratio: 1 / 1; }
.ratio-photo { aspect-ratio: 3 / 2; }
.ratio-wide { aspect-ratio: 16 / 9; }
.ratio-portrait { aspect-ratio: 4 / 5; }

/* Rahmen fuer freistehende Fotos ausserhalb von Karten und Galerien */
.bild-rahmen { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); }
.bild-rahmen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Media placeholders ---------- */

.media {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dfeaef 0%, #c3d9e2 100%);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
/* Wo der Rahmen schon rundet und beschneidet, darf die Flaeche darin nicht
   ein zweites Mal runden - sonst sitzt Rundung in Rundung. */
.listing-media .media, .ref-media .media { border-radius: 0; }
.media-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #3f5f6b;
  text-align: center;
  padding: 0 20px;
}
.media-circle { border-radius: 50%; width: 150px; height: 150px; flex: none; }

/* ---------- Stats ---------- */

.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Als dunkles Band braucht die Zahlenzeile keine Trennlinien mehr - die
   Flaeche trennt selbst. Das Petrol der Marke waere hier zu dunkel, die
   Ziffern bekommen deshalb einen aufgehellten Ton. */
.stats.section-dunkel { border-top: 0; border-bottom: 0; }
.stats.section-dunkel .stat-num { color: #7fc6e0; }
.stats .container {
  padding-top: 44px;
  padding-bottom: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.stat { display: flex; align-items: baseline; gap: 14px; }
.stat-num { font-family: var(--font-display); font-size: 34px; font-weight: 500; color: var(--brand); }
.stat-label { font-size: 13.5px; color: var(--muted); }

/* ---------- Sections ---------- */

/* Abstand waechst mit dem Bildschirm mit, statt ueberall 96px zu sein -
   das erzeugt den Rhythmus, der vorher fehlte. */
.section { padding: clamp(72px, 8vw, 124px) 0; }
.section-alt { background: var(--bg-alt); }

/* ---------- Dunkles Band ----------
   Der Anker gegen die Helligkeit: ein Streifen pro Seite, der Gewicht
   traegt. Statt jede Regel doppelt zu schreiben, werden die Farbtoken
   innerhalb des Bandes umdefiniert - so greift die Umstellung auch dort,
   wo eine Farbe inline im HTML als var(--muted) steht.
   Achtung: --muted gilt hier fuer alles im Band. Eine weisse Karte darin
   braeuchte die hellen Werte zurueck; bisher steht keine darin. */
.section-dunkel {
  background: var(--tief);
  --ink: #ffffff;
  --muted: #b3c8d2;
  --line: rgba(255, 255, 255, .14);
  color: #b3c8d2;
}
.section-dunkel h1,
.section-dunkel h2,
.section-dunkel h3 { color: #fff; }
.section-dunkel .eyebrow { color: #7fc6e0; }
/* Die gefuellte Marken-Schaltflaeche verschwindet auf dunklem Petrol -
   hier traegt Weiss die Handlung. */
.section-dunkel .btn { background: #fff; color: var(--brand-dark); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.section-dunkel .btn:hover { background: #e3eff4; color: var(--brand-dark); box-shadow: 0 4px 18px rgba(0, 0, 0, .24); }
.section-dunkel :focus-visible { outline-color: #fff; }
.section-head { margin-bottom: clamp(36px, 4vw, 60px); }
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* ---------- Cards ---------- */

.card {
  background: #fff;
  padding: 34px 30px;
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Nur fuer Zeigergeraete: auf dem Handy loest ein Tippen den Hover aus und
   die Karte bleibt danach angehoben stehen, bis man woanders hintippt. */
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
.card-num { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--brand); margin-bottom: 18px; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }

.card-outline { border: 1px solid var(--line); background: transparent; box-shadow: none; }
.card-outline:hover { background: #fff; box-shadow: var(--shadow-md); }

/* Die Verwaltung erbringt nicht Fleischhauer Immobilien selbst, sondern die
   gemeinsame Gesellschaft. Deshalb eine eigene Karte ueber die volle Breite
   statt einer gleichrangigen neben den anderen Leistungen - das trennt die
   Zustaendigkeit auch optisch. */
.card-partner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  border-left: 3px solid var(--brand);
}
.card-partner p { max-width: 60ch; }
.card-partner .btn { flex: none; }

/* ---------- Partnermarke CASTELLAN ---------- */

/* Das Zeichen liegt als SVG vor, der Schriftzug bleibt Text. CASTELLAN setzt
   ihn in Playfair Display; eine Schrift nachzuladen waere fuer ein Wort zu
   teuer und wuerde die Ladezeit der ganzen Seite belasten. Georgia trifft die
   Anmutung und liegt auf Windows, macOS und iOS bereits vor. */
/* Blockelement mit fit-content statt inline-flex: sonst haengt unter dem
   Zeichen die Zeilenhoehe der umgebenden Zeile als sichtbare Luecke. */
.castellan-lockup {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.castellan-lockup img { height: 40px; width: auto; display: block; flex: none; }
.castellan-wort {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #1a1a1a;
  /* Der Buchstabenabstand haengt rechts am letzten Zeichen und wuerde die
     Marke sonst aus der Mitte schieben. */
  margin-right: -.22em;
}
@media (hover: hover) {
  .castellan-lockup:hover .castellan-wort { color: var(--brand); }
}

/* Im dunklen Band und im Fuss steht die Marke auf tiefem Grund. */
.section-dunkel .castellan-wort,
.cta-band .castellan-wort { color: #fff; }

/* ---------- Listings ---------- */

.listing {
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) {
  .listing:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
  .listing:hover .media, .listing:hover .listing-media img { transform: scale(1.06); }
}
/* Das Bild zieht im Rahmen langsam auf, waehrend die Karte sich hebt - zwei
   Geschwindigkeiten, damit die Bewegung nicht mechanisch wirkt. */
.listing-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.listing-media .media, .listing-media img { transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.listing-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}
.tag-kauf { background: var(--brand); color: #fff; }
.tag-miete { background: #fff; color: var(--brand); }
.listing-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kennzeichnung fuer Musterobjekte - entfaellt automatisch, sobald die
   Datenquelle echte Objekte ohne "muster": true liefert. */
.listing-demo {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(20, 49, 61, .82);
  color: #fff;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.listing-body { padding: 24px 24px 26px; }
.listing-body h3 { margin-bottom: 6px; font-size: 17.5px; }
.listing-body h3 a { color: inherit; }
.listing-body h3 a:hover { color: var(--brand); }

/* Die ganze Karte klickbar machen, ohne die ganze Karte zu verlinken: der
   Link liegt auf der Ueberschrift, sein Pseudoelement deckt die Karte ab.
   Ein <a> um alles herum liest sich mit Screenreader als ein einziger,
   endloser Linkname - so bleibt der Name die Ueberschrift. */
.listing-klickbar { position: relative; }
.listing-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.listing-klickbar:focus-within { box-shadow: var(--shadow-lg); }
/* Pflichtangaben nach 87 GEG - leise gesetzt, aber lesbar. Sie sollen die
   Karte nicht dominieren und trotzdem vorhanden sein. */
.listing-energie {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.listing-mehr {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
}
.listing-mehr::after { content: ' \2192'; }
@media (hover: hover) {
  .listing-klickbar:hover .listing-mehr { color: var(--brand-dark); }
}
.listing-facts { font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.listing-price { font-size: 17px; font-weight: 700; color: var(--brand); }
/* Lade-, Leer- und Fehlermeldung der Objektliste, spannt sich ueber das Raster */
.listing-status {
  grid-column: 1 / -1;
  padding: 32px 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
}

/* Hinweisbox, z. B. Kennzeichnung der Musterobjekte */
.notice {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r);
  padding: 18px 22px;
  margin-bottom: 36px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}
.notice strong { color: var(--ink); font-weight: 600; }

/* ---------- Filter chips ---------- */

.chips { display: flex; gap: 10px; margin-bottom: 44px; flex-wrap: wrap; }
.chip {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  background: #fff;
  color: var(--muted);
  border: 1px solid #d3dde1;
  transition: all .18s ease;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Prozess-Schritte ---------- */

.steps { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.step {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 600;
}
.step-body h3 { margin-bottom: 8px; font-size: 19px; }
.step-body p { font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 68ch; }

/* ---------- Referenzen ---------- */

.grid-2-ref { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.ref {
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .ref:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.ref-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ref-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Bildergalerie ----------
   Alle Bilder liegen uebereinander, nur das aktive ist sichtbar. Die
   Bedienelemente setzt das Skript, nicht das HTML: ohne JavaScript bleibt
   schlicht das erste Bild stehen statt einer toten Schaltflaeche. Kein
   Hover-Zoom hier - die Flaeche wird bedient, nicht nur betrachtet. */
.galerie img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}
.galerie img.is-active { opacity: 1; }

.galerie-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  opacity: .8;
  transition: opacity .2s ease, background .2s ease;
}
.galerie:hover .galerie-nav { opacity: 1; }
.galerie-nav:hover { background: #fff; }
.galerie-nav svg { width: 16px; height: 16px; fill: currentColor; }
.galerie-vor { right: 12px; }
.galerie-zurueck { left: 12px; }

.galerie-punkte {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}
.galerie-punkt {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: width .25s ease, background .2s ease;
}
.galerie-punkt.is-active { width: 18px; background: #fff; }
/* Sichtbar bleiben 7px, antippbar sind 34px - sonst trifft man die Punkte
   auf dem Handy nicht. */
.galerie-punkt::after { content: ''; position: absolute; inset: -14px -5px; }
.ref-body { padding: 28px 30px 32px; }
.ref-body h2 { font-size: 21px; margin-bottom: 12px; }
.ref-body p { font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ---------- Objekt-Detailseite ----------
   Eine Vorlage fuer alle Objekte. Links der Text, rechts eine Spalte mit
   Eckdaten, Energieausweis und Kosten - die Spalte laeuft beim Scrollen
   mit, damit Preis und Zahlen beim Lesen der Beschreibung sichtbar
   bleiben. */

.objekt-zurueck { margin: 28px 0 22px; font-size: 14px; }
.objekt-zurueck a { font-weight: 500; color: var(--muted); }
.objekt-zurueck a::before { content: '\2190\00a0'; }
.objekt-zurueck a:hover { color: var(--brand); }

.objekt-kopf { margin-bottom: 30px; }
.objekt-marken { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* Die Marke sitzt sonst absolut im Bildrahmen - hier steht sie in der Zeile. */
.objekt-marken .listing-tag { position: static; }
.objekt-ort { font-size: 14px; font-weight: 500; color: var(--muted); }
.objekt-kopf h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin-bottom: 18px; }
.objekt-preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.objekt-preis-zahl { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 500; color: var(--brand); }
.objekt-preis-zusatz { font-size: 13.5px; color: var(--muted); }

.objekt-galerie {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 48px;
}
/* Ohne Fotos wuerden 16:9 ueber die volle Breite rund 630px leere Flaeche
   ergeben - ein Platzhalter darf nicht die halbe Seite fuellen. */
.objekt-galerie-ohne { aspect-ratio: auto; height: 190px; box-shadow: none; }
.objekt-galerie-leer { border-radius: 0; }

.objekt-raster {
  display: grid;
  /* minmax(0, ...) auf beiden Spalten: sonst kann ein langer Wert die
     Datenspalte breiter schieben als das Raster erlaubt. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 56px;
  align-items: start;
  padding-bottom: 80px;
}

.objekt-text h2 { font-size: 22px; margin: 0 0 16px; }
.objekt-text h2 ~ h2 { margin-top: 40px; }
.objekt-text p { font-size: 16px; line-height: 1.75; color: var(--muted); margin-bottom: 16px; }
.objekt-liste { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.objekt-liste li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
/* Haken statt Punkt: die Liste zaehlt auf, was vorhanden ist. */
.objekt-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* position: sticky mit align-items: start am Raster - sonst wird die Spalte
   auf die volle Zeilenhoehe gestreckt und klebt an nichts. */
.objekt-spalte { position: sticky; top: calc(var(--kopf-klein) + 20px); display: grid; gap: 20px; }
.objekt-kasten {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-sm);
}
.objekt-kasten h2 {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 18px;
}

/* minmax(0, ...) auf beiden Spalten, damit kein langer Wert das Raster
   aufspreizt - sonst laeuft der Kasten auf dem Handy seitlich hinaus. */
.objekt-daten {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 9px 20px;
  font-size: 14.5px;
}
.objekt-daten dt { color: var(--muted); }
.objekt-daten dd {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
  overflow-wrap: break-word;
}

.objekt-klasse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.objekt-klasse-label { font-size: 14.5px; color: var(--muted); }
.objekt-klasse-wert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
}
/* Die Skala des Energieausweises von Gruen nach Rot. Die Toene sind so
   gewaehlt, dass Weiss darauf lesbar bleibt - reines Gelb waere es nicht. */
.klasse-aplus, .klasse-a { background: #1c7a3e; }
.klasse-b { background: #3f8b2c; }
.klasse-c { background: #6b8b1e; }
.klasse-d { background: #8a7a12; }
.klasse-e { background: #9c6212; }
.klasse-f { background: #a84c18; }
.klasse-g { background: #a83420; }
.klasse-h { background: #96222a; }

.objekt-provision, .objekt-fehlt {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}
.objekt-fehlt { margin-top: 0; padding-top: 0; border-top: 0; }

.objekt-anfrage { background: var(--bg-alt); border-radius: var(--r-lg); padding: 44px 48px; margin-bottom: 90px; }
.objekt-anfrage-innen { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.objekt-anfrage h2 { font-size: 26px; margin-bottom: 10px; }
.objekt-anfrage p { font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 52ch; }
.objekt-anfrage-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

.objekt-fehler { max-width: 60ch; padding: 90px 0 110px; }
.objekt-fehler h1 { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 18px; }
.objekt-fehler p { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin-bottom: 30px; }
.objekt-fehler-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Ratgeber ----------
   Beitraege und Checklisten liegen als echte HTML-Seiten vor und nicht in
   einer Datenquelle: Suchmaschinen sollen sie lesen koennen, und dafuer
   muss der Text im Quelltext stehen. Ein neuer Beitrag heisst deshalb:
   Datei anlegen und hier eine Kachel ergaenzen. */

.beitraege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.beitrag {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) {
  .beitrag:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
  .beitrag:hover .beitrag-bild img { transform: scale(1.06); }
}
.beitrag:focus-within { box-shadow: var(--shadow-lg); }
.beitrag-bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-alt); }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.beitrag-kategorie {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.beitrag-koerper { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
/* h2 auf der Ratgeber-Uebersicht, h3 im Ratgeber-Block der Startseite: dort
   steht bereits eine Abschnittsueberschrift darueber, hier ist die Kachel die
   oberste Ebene unter der H1. Gleiche Gestalt, richtige Rangfolge. */
.beitrag-koerper h2,
.beitrag-koerper h3 { font-size: 18px; line-height: 1.35; margin-bottom: 10px; letter-spacing: 0; }
.beitrag-koerper h2 a,
.beitrag-koerper h3 a { color: inherit; }
.beitrag-koerper h2 a::after,
.beitrag-koerper h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.beitrag-koerper h2 a:hover,
.beitrag-koerper h3 a:hover { color: var(--brand); }
.beitrag-koerper p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-bottom: 18px; }
.beitrag-meta {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.beitrag-meta span + span::before { content: '\00b7\00a0'; }

/* Checklisten sehen anders aus als Beitraege - sie sind kein Text zum
   Lesen, sondern etwas zum Mitnehmen. */
.beitrag-checkliste { background: var(--tief); --muted: #b3c8d2; --line: rgba(255,255,255,.14); }
.beitrag-checkliste .beitrag-koerper h2,
.beitrag-checkliste .beitrag-koerper h3 { color: #fff; }
.beitrag-checkliste .beitrag-koerper h2 a:hover,
.beitrag-checkliste .beitrag-koerper h3 a:hover { color: #7fc6e0; }
.beitrag-checkliste .beitrag-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  aspect-ratio: 3 / 2;
}
.beitrag-haken { display: grid; gap: 11px; }
.beitrag-haken span {
  display: block;
  width: 96px;
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .16);
  position: relative;
}
.beitrag-haken span::before {
  content: '';
  position: absolute;
  left: -26px;
  top: -3px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, .3);
}
/* Die ersten beiden abgehakt - das zeigt in einem Bild, was das Ding ist. */
.beitrag-haken span:nth-child(-n+2)::after {
  content: '';
  position: absolute;
  left: -22px;
  top: 1px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #7fc6e0;
  border-bottom: 2px solid #7fc6e0;
  transform: rotate(-45deg);
}

/* ---------- Beitragsseite ---------- */

.artikel { max-width: 720px; margin: 0 auto; padding-bottom: 90px; }
.artikel-kopf { margin-bottom: 40px; }
.artikel-meta { font-size: 13px; color: var(--muted); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.artikel-meta span + span::before { content: '\00b7\00a0'; }
.artikel h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin-bottom: 20px; }
.artikel .lead { font-size: 18px; }
.artikel h2 { font-size: 25px; margin: 48px 0 16px; }
.artikel h3 { font-size: 18.5px; margin: 32px 0 10px; }
.artikel p { font-size: 16.5px; line-height: 1.75; color: var(--muted); margin-bottom: 18px; }
.artikel ul, .artikel ol { margin: 0 0 22px 22px; }
.artikel li { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin-bottom: 9px; }
.artikel strong { color: var(--ink); font-weight: 600; }
.artikel table { width: 100%; border-collapse: collapse; margin: 8px 0 26px; font-size: 15.5px; }
.artikel th, .artikel td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.artikel th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.artikel td:last-child, .artikel th:last-child { text-align: right; }
.artikel-tabelle { overflow-x: auto; }
.artikel-quelle { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Kasten fuer den einen Satz, der im Text haengenbleiben soll. */
.merksatz {
  background: var(--bg-alt);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 22px 26px;
  margin: 30px 0;
}
.merksatz p { margin: 0; font-size: 16px; color: var(--ink); }

/* Register der zustaendigen Aemter. Bewusst keine Tabelle: Anschriften
   brechen auf dem Telefon sonst in eine waagerechte Rolle, und genau dort
   werden sie gebraucht - unterwegs, vor der Tuer. */
.amt-liste {
  margin: 30px 0;
  border-top: 1px solid var(--line);
}
.amt {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3px 26px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.amt-zweck {
  grid-row: span 2;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  /* Ohne das schiebt sich ein langes Wort wie ERBSCHAFTSTEUER aus seiner
     Spalte heraus und laeuft in den Namen daneben. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.amt-name { margin: 0; min-width: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.amt-name a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.amt-name a:hover { color: var(--brand); }
.amt-adresse { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

@media (max-width: 640px) {
  .amt { grid-template-columns: 1fr; gap: 3px; }
  .amt-zweck { grid-row: auto; margin-bottom: 5px; }
}

.artikel-fuss {
  margin-top: 54px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.artikel-fuss h2 { font-size: 21px; margin: 0 0 10px; }
.artikel-fuss p { margin-bottom: 22px; }
.artikel-fuss-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

/* Verwandte Beitraege. Wer bis hierher gelesen hat, steckt mitten in einem
   Vorhaben - der naechste Schritt gehoert genau hier hin und nicht erst
   zurueck auf der Uebersicht. */
.artikel-weiter { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.artikel-weiter h2 {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.artikel-weiter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.artikel-weiter li { border-bottom: 1px solid var(--line); }
.artikel-weiter li:first-child { border-top: 1px solid var(--line); }
.artikel-weiter a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.artikel-weiter a:hover { color: var(--brand); }
.artikel-weiter a::after { content: '\2192'; color: var(--brand); font-weight: 400; flex: none; }
.artikel-weiter .weiter-art {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

/* ---------- Checkliste ----------
   Zum Ausdrucken gedacht, deshalb der Bogen in Papierbreite und die
   eigenen Regeln unter @media print weiter unten. */

.checkliste { max-width: 760px; margin: 0 auto; padding-bottom: 90px; }
.checkliste-blatt {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 48px 52px 44px;
  box-shadow: var(--shadow-md);
}
.checkliste-marke {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--brand);
}
.checkliste-marke img { height: 52px; width: auto; }
.checkliste-marke .brand-name { font-size: 15px; }
.checkliste-marke .brand-sub { font-size: 9.5px; }
.checkliste-blatt h1 { font-size: 27px; line-height: 1.25; margin-bottom: 10px; }
.checkliste-vorspann { font-size: 15px; line-height: 1.65; color: var(--muted); margin-bottom: 34px; }
.checkliste-gruppe { margin-bottom: 30px; }
.checkliste-gruppe h2 {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.checkliste-punkte { list-style: none; display: grid; gap: 12px; }
.checkliste-punkte li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.55; }
/* Ein echtes Kaestchen zum Ankreuzen - auf Papier wie am Schirm. */
.checkliste-punkte li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  border: 1.5px solid #9bb3bd;
  border-radius: 3px;
}
.checkliste-punkte em { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 3px; }
.checkliste-fuss {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
.checkliste-fuss strong { color: var(--ink); }
.checkliste-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.checkliste-oben { margin: 0 0 20px; }
.btn-download { display: inline-flex; align-items: center; gap: 9px; }
.btn-download svg { fill: currentColor; flex: none; }

/* ---------- CTA band ---------- */

.cta-band { background: var(--brand); padding: 80px 0; }
.cta-band .container {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: 16px; font-size: clamp(27px, 3vw, 36px); font-weight: 500; }
.cta-band p { font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, .82); max-width: 52ch; margin-bottom: 34px; }
.cta-band .brand-mark { height: 108px; width: auto; margin-bottom: 28px; }

/* ---------- Page header ---------- */

.page-head { padding: 80px 0 0; }
.page-head h1 { margin-bottom: 20px; }
.page-head .lead { margin-bottom: 40px; max-width: 62ch; }

/* Nur vertikaler Abstand - der seitliche kommt von .container und bleibt so
   auf schmalen Geraeten mit allen anderen Seiten synchron. */
.page-block { padding-top: 80px; padding-bottom: 88px; }

/* ---------- About ---------- */

.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.about-text { display: flex; flex-direction: column; gap: 22px; }
.about-text p { font-size: 16.5px; line-height: 1.75; color: var(--muted); }

.person { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.person-row { flex-direction: row; align-items: center; gap: 28px; }
.person-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.person-role { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* ---------- Contact ---------- */

.contact-split { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 34px; }
.contact-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--brand); margin-bottom: 10px; }
.contact-value { font-size: 16px; line-height: 1.7; color: var(--ink); }
.contact-value a { display: inline-block; line-height: 1.9; }

/* Standortkarte. Der Rahmen rundet und beschneidet, das eingebettete
   Kartenfenster selbst kann keine runden Ecken. */
.map-frame {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--bg-alt);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-note { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.form-wrap { background: #fff; padding: 44px; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Anrede braucht nur Platz fuer "Bitte wählen", Vor- und Nachname teilen
   sich den Rest zu gleichen Teilen. */
.form-row-name { grid-template-columns: minmax(116px, .62fr) 1fr 1fr; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
input, select, textarea {
  background: #fff;
  border: 1px solid #d3dde1;
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-family: inherit;
  /* Nicht kleiner als 16px: iOS Safari zoomt sonst beim Antippen ins Feld
     hinein und der Besucher muss danach wieder herauswischen. */
  font-size: 16px;
  color: var(--ink);
}
textarea { resize: vertical; }
/* Solange "Bitte wählen" steht, ist die Auswahl leer und damit ungueltig -
   der Platzhalter soll dann auch wie einer aussehen und nicht wie eine
   getroffene Angabe. */
select:required:invalid { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.checkbox-label {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--muted);
}
/* Das Pflichtfeld muss sich treffen lassen: die Standardgroesse liegt auf
   dem Handy bei rund 13px. Wer es nicht trifft, kann nicht absenden. */
.checkbox-label input {
  margin-top: 1px;
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--brand);
}
form .btn { align-self: flex-start; padding: 16px 32px; font-size: 14px; }

.form-heading { font-size: 23px; margin-bottom: 26px; }
/* Aus dem Blickfeld statt display:none - manche Bots ueberspringen Felder,
   die ausdruecklich verborgen sind. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-fehler {
  background: #fdf2f2;
  border: 1px solid #f0c9c9;
  border-left: 3px solid #b3261e;
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #7a1c16;
}
/* ---------- Bestaetigung nach dem Absenden ----------
   Sie steht an der Stelle des Formulars, im selben weissen Kasten. Damit
   der Wechsel nicht zu uebersehen ist, bekommt sie einen eigenen Grund in
   Markenfarbe, einen gezeichneten Haken und deutlich mehr Hoehe als die
   zwei Zeilen davor. */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 40px 28px 36px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-alt), #fff 62%);
}
.form-success:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.erfolg-haken {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 6px 18px rgba(8, 102, 139, .28);
}
.erfolg-haken svg { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
/* Der Haken zeichnet sich einmal, wenn der Kasten erscheint. Die Laenge des
   Pfades ist rund 46 Einheiten; etwas Zugabe schadet nicht. */
.erfolg-haken svg path { stroke-dasharray: 52; stroke-dashoffset: 52; animation: haken .45s .12s ease-out forwards; }
@keyframes haken { to { stroke-dashoffset: 0; } }
.form-success h3 { font-size: 25px; margin: 0; }
.erfolg-lead { max-width: 44ch; font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.erfolg-daten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 44px;
  width: 100%;
  margin: 6px 0 2px;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.erfolg-daten dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.erfolg-daten dd { font-size: 15px; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.erfolg-hinweis { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 40ch; }
.form-success .btn { align-self: center; }

@media (prefers-reduced-motion: reduce) {
  .erfolg-haken svg path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--footer); color: rgba(255, 255, 255, .75); }
.footer-main {
  padding: 64px 32px 56px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.footer-brand .brand-logo { height: 38px; }
.footer-brand .brand-name { color: #fff; font-size: 14px; }
.footer-brand .brand-sub { color: rgba(255, 255, 255, .65); font-size: 9px; }
.footer-main p { font-size: 14px; line-height: 1.7; max-width: 44ch; }
/* Partnerhinweis auf die gemeinsame Verwaltungsgesellschaft - bewusst leise,
   er gehoert zur Absenderkennung und nicht ins Leistungsversprechen. */
.footer-partner {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
}
.footer-partner a { color: rgba(255, 255, 255, .9); border-bottom: 1px solid rgba(255, 255, 255, .3); }
.footer-partner a:hover { color: #fff; border-bottom-color: #fff; }

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-heading { font-size: 11px; font-weight: 700; letter-spacing: .3em; color: rgba(255, 255, 255, .5); margin-bottom: 6px; }
.footer-col a, .footer-col span { font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.6; }
.footer-col a:hover { color: #fff; }
/* Groesse haengt an font-size, damit die Icons zur Textgroesse daneben passen */
.social { display: flex; gap: .6em; margin-top: 20px; font-size: 14px; }
.social a {
  width: 2em;
  height: 2em;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background .15s ease, border-color .15s ease;
}
.social a:hover { background: #fff; border-color: #fff; }
.social svg { width: .9em; height: .9em; fill: rgba(255, 255, 255, .85); transition: fill .15s ease; }
.social a:hover svg { fill: var(--footer); }

/* Social auf hellem Grund (Kontaktseite) */
.social-light a { border-color: #d3dde1; }
.social-light a:hover { background: var(--brand); border-color: var(--brand); }
.social-light svg { fill: var(--brand); }
.social-light a:hover svg { fill: #fff; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-bottom .container {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
}
.footer-bottom a { color: rgba(255, 255, 255, .55); }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: 24px; }

/* ---------- Legal pages ---------- */

.legal { padding: 80px 0 96px; }
.legal .prose { max-width: 72ch; }
.legal h2 { font-size: 22px; margin: 40px 0 14px; }
.legal h3 { font-size: 17px; margin: 26px 0 10px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px 20px; }
/* Art. 21 Abs. 4 DSGVO verlangt, dass auf das Widerspruchsrecht in
   verstaendlicher und von anderen Informationen getrennter Form
   hingewiesen wird - deshalb ein abgesetzter Block. */
.widerspruch {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r);
  background: #fff;
  padding: 22px 26px;
  margin: 30px 0;
}
.widerspruch h3 { margin: 0 0 12px; font-size: 18px; }
.widerspruch p:last-child { margin-bottom: 0; }
.legal li { margin-bottom: 6px; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* Zwischenschritt statt Sprung von drei auf eine Spalte: sonst wird jede
     Objektkarte auf dem Tablet ueber die volle Breite gezogen. */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

/* ---------- Kopfzeile auf schmalen Schirmen ----------
   Marke und Navigation nebeneinander brauchen rund 930px: 237px fuer Wappen
   und Schriftzug, 587px fuer sieben Punkte, dazu Abstand und Rand. Darunter
   klappt die Navigation unter die Kopfzeile. flex-wrap gibt ihr dort eine
   eigene Zeile, ohne dass sie im Quelltext woanders stehen muesste.
   1023 statt 1024, damit das iPad im Querformat die Punkte noch zeigt. */
@media (max-width: 1023px) {
  /* Bis 900px steht das Formular noch in der schmalen rechten Spalte. Drei
     Felder nebeneinander waeren dort rund 100px breit; deshalb rutscht der
     Nachname in eine eigene Zeile. */
  .form-row-name { grid-template-columns: minmax(116px, .8fr) 1fr; }
  .form-row-name > :last-child { grid-column: 1 / -1; }

  .header-inner { min-height: var(--kopf-klein); }
  .site-header.is-scrolled .header-inner { min-height: 64px; }
  .brand-logo { height: 50px; }
  .site-header.is-scrolled .brand-logo { height: 42px; }

  /* 42px ergaeben Polster und Striche von allein - die 44px sind die
     Untergrenze, ab der eine Flaeche zuverlaessig zu treffen ist. */
  .nav-toggle { display: block; margin-left: auto; min-width: 44px; min-height: 44px; }
  .nav {
    display: none;
    flex: 0 0 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-bottom: 10px;
    border-top: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  /* 13px Polster plus 15px Zeile ergibt rund 46px Antippflaeche. */
  .nav a { padding: 13px 0; font-size: 15px; }
  /* Untereinander gestapelt hat der Strich keine Bedeutung mehr. */
  .nav a[aria-current="page"]::after { display: none; }

  /* Neben der 360px breiten Datenspalte bliebe fuer den Text zu wenig
     uebrig - ab hier stehen die Daten ueber der Beschreibung, weil Preis
     und Flaeche zuerst gelesen werden. */
  .objekt-raster { grid-template-columns: 1fr; gap: 40px; }
  .objekt-spalte { position: static; order: -1; }

  .beitraege { grid-template-columns: repeat(2, 1fr); }
  .checkliste-blatt { padding: 36px 32px 32px; }
}

@media (max-width: 900px) {
  .hero h1 { max-width: 100%; }
  .split, .about-split, .contact-split { grid-template-columns: 1fr; gap: 44px; }
  .grid-2-ref { grid-template-columns: 1fr; }

  /* Sobald die Spalten stapeln, laufen die Bildflaechen ueber die volle
     Breite. Ein quadratisches Feld waere dann meterhoch, deshalb hier
     einheitlich flacher. */
  .ratio-square, .ratio-photo, .ratio-wide, .ratio-portrait { aspect-ratio: 3 / 2; }

  /* Antippflaechen auf Fingergroesse. Die Social-Symbole haengen an der
     Schriftgroesse, deshalb genuegt hier ein Wert: 2em ergibt 40px. */
  .social { font-size: 20px; }
  .galerie-nav { width: 44px; height: 44px; }
  .galerie-nav svg { width: 18px; height: 18px; }
  .step { gap: 20px; padding: 24px 0; }
  .step-num { width: 44px; height: 44px; font-size: 17px; }
  .stats .container { grid-template-columns: 1fr; gap: 20px; }
  .section { padding: 72px 0; }
}

@media (max-width: 767px) {
  /* 40px Mindestabstand zwischen Marke und Menuetaste sind hier zu viel:
     bei 320px bleiben sonst nur 6px uebrig. */
  .header-inner { gap: 0 16px; min-height: 68px; }
  .site-header.is-scrolled .header-inner { min-height: 60px; }
  .brand { gap: 12px; }
  .brand-logo { height: 46px; }
  .site-header.is-scrolled .brand-logo { height: 40px; }
  .brand-name { font-size: 15px; letter-spacing: .18em; }
  .brand-sub { font-size: 9.5px; }

  /* Aus der schwebenden Insel wird eine Leiste am unteren Rand: dort liegt
     sie im Daumenbereich und verdeckt seitlich keinen Text. */
  .kontakt-dock {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    gap: 10px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(20, 49, 61, .1);
  }
  .kontakt-dock .btn,
  .kontakt-dock .btn-call { flex: 1; padding: 14px 10px; justify-content: center; text-align: center; }
  /* Die Leiste ist hier rund 65px hoch und liegt direkt am Rand. */
  .kontakt-dock + .site-footer { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .cta-band .brand-mark { height: 84px; }
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-wrap { padding: 28px 22px; }
  .footer-main { grid-template-columns: 1fr; gap: 36px; padding: 48px 20px 40px; }
  .footer-bottom .container { flex-direction: column; gap: 12px; }
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Neben der Menuetaste steht jetzt nur noch die Marke - der Schriftzug
     passt deshalb auch auf schmalen Geraeten daneben und muss nicht mehr
     ausgeblendet werden. Gerechnet bei 320px: 40 Wappen + 12 Abstand +
     134 Schriftzug + 44 Menuetaste + 40 Rand = 270px. */
  .header-inner { min-height: 62px; }
  .brand-logo { height: 40px; }
  .site-header.is-scrolled .brand-logo { height: 36px; }
  .brand-name { font-size: 14px; letter-spacing: .16em; }

  /* Beide Beschriftungen bleiben lesbar: 320px reichen fuer "Anrufen" und
     "Immobilie bewerten" nebeneinander, wenn das Polster schmaler wird.
     Ein Symbol ohne Wort waere hier Ratespiel. */
  .kontakt-dock { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .kontakt-dock .btn,
  .kontakt-dock .btn-call { padding: 14px 8px; font-size: 13px; }

  /* Porträt und Kontaktdaten nebeneinander lassen bei 320px Breite keine
     nutzbare Textspalte uebrig - deshalb hier untereinander. */
  .person-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .media-circle { width: 112px; height: 112px; }

  /* Fusszeilenlinks bekommen Hoehe, damit sie sich treffen lassen. */
  .footer-col { gap: 4px; }
  .footer-col a { padding: 7px 0; }
  .footer-col a, .footer-col span { overflow-wrap: anywhere; }

  /* Lange Komposita in grossen Ueberschriften trennen statt ueberlaufen. */
  h1, h2 { hyphens: auto; }

  /* Objektseite: zwei Spalten Ausstattung ergeben bei 320px Wortsalat. */
  .objekt-liste { grid-template-columns: 1fr; }
  .objekt-galerie { aspect-ratio: 4 / 3; border-radius: var(--r); }
  .objekt-kasten { padding: 22px 20px 20px; }
  .objekt-anfrage { padding: 32px 22px; border-radius: var(--r); }
  .objekt-anfrage-knoepfe { width: 100%; }
  .objekt-anfrage-knoepfe .btn { flex: 1; text-align: center; justify-content: center; }

  .beitraege { grid-template-columns: 1fr; }
  .checkliste-blatt { padding: 28px 22px 26px; border-radius: var(--r); }
  .checkliste-marke img { height: 42px; }
  .artikel h1 { hyphens: auto; }
}

/* ---------- Druck ----------
   Aus der Checkliste wird ein Blatt: alles, was zur Website gehoert, faellt
   weg - Kopfzeile, Navigation, Fusszeile, Kontaktleiste, der Zurueck-Link
   und die Schaltflaechen. Uebrig bleibt der Bogen mit Logo und Anschrift.

   Bewusst werden hier KEINE Schriftgroessen und Farben umgestellt: das
   gedruckte Blatt soll genau so aussehen wie der Bogen am Schirm. Nur
   Rahmen, Rundung und Schatten fallen weg, weil sie auf Papier nichts
   verloren haben. */
@media print {
  .site-header, .site-footer, .kontakt-dock, .checkliste-knoepfe,
  .checkliste-oben, .objekt-zurueck, .nav-toggle, .cta-band, .artikel-weiter,
  .artikel-fuss { display: none !important; }

  html, body { background: #fff; }
  .container { max-width: none; padding: 0; }
  .checkliste { max-width: none; padding: 0; }
  .checkliste-blatt {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  /* Ohne diese Zeile wirft der Browser die Farbflaechen weg - das Logo
     waere dann ein grauer Schemen und die Ueberschriften schwarz. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Eine Gruppe soll nicht mitten im Seitenumbruch auseinanderfallen, und
     eine Ueberschrift nicht allein am Seitenende stehen. */
  .checkliste-gruppe { break-inside: avoid; }
  .checkliste-gruppe h2 { break-after: avoid; }
  .checkliste-punkte li { break-inside: avoid; }
  .checkliste-fuss { break-inside: avoid; }

  a { color: inherit; text-decoration: none; }
  a[href]::after { content: ''; }
  @page { size: A4; margin: 15mm 14mm; }
}

/* Wer im System "Bewegung reduzieren" gesetzt hat, bekommt keine Animationen
   und keinen weichen Bildlauf - das loest bei Betroffenen Schwindel aus. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .listing:hover, .ref:hover, .card:hover { transform: none; }
  .listing:hover .media, .ref:hover .media { transform: none; }
  .hero-bg video, .hero-bg img { animation: none; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; }
}