/* =========================================================================
   Bayerische Liegenschaften — gemeinsames Stylesheet der Unterseiten
   (gleiches Gestaltungssystem wie die Startseite).
   ========================================================================= */

:root{
  --papier:        #FFFFFF;
  --papier-warm:   #FAFAF8;
  --dunst:         #F4F5F7;
  --silber:        #D1D5DB;
  --graphit:       #4A4A4A;
  --anthrazit:     #1A1A1A;
  --tiefschwarz:   #000000;
  --bayern-blau:   #00478B;
  --bayern-tief:   #00305C;
  --bayern-hell:   #D6E4F2;

  --serif: "Cormorant Garamond", "Cormorant Garamond Fallback", "Times New Roman", Times, serif;
  --sans:  "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;

  --page-pad: clamp(1.25rem, 4vw, 3rem);
  --max: 1440px;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Anker-Spruenge (z. B. #formular, Sprunglink #main) und per Tab
     angesteuerte Elemente landen nicht hinter der sticky Kopfleiste: Sie ist
     84px hoch (bis 1180px 81px); 96px lassen das Ziel mit 12 bzw. 15px Luft
     darunter stehen. Gleicher Wert in site-chrome.js (navOffset) und im
     Inline-CSS der Startseite. */
  scroll-padding-top: 96px;
  /* Vertikalen Scrollbar IMMER zeigen — auch wenn die Seite kuerzer als der
     Viewport ist. Damit ist die Viewport-Breite ueber alle Seiten konstant
     und die zentrierte Nav verschiebt sich beim Seitenwechsel nicht horizontal.
     overflow-y:scroll ist robuster als scrollbar-gutter, weil es in jedem
     Browser sofort und identisch wirkt. */
  overflow-y: scroll;
  scrollbar-gutter: stable; /* zusaetzlich, fuer Browser die's unterstuetzen */
}
/* Smooth-Scroll wird NICHT global aktiviert, weil das den manuellen
   window.scrollTo() in site-chrome.js (Hash-Form-Centering) behindert
   und auf langen Seiten ruckelt. Smooth-Scrolling laeuft programmatisch
   nur bei expliziten Aktionen ueber JS, jeweils mit prefers-reduced-motion-Check. */
body{
  background: var(--papier);
  color: var(--anthrazit);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 600px){
  /* Smartphone: ueberlange Woerter (Komposita, Schraegstrich-Ketten)
     brechen nur dann um, wenn sie sonst ueber den Rand ragen wuerden. */
  body{ overflow-wrap: break-word; }
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
/* Inhalts-Links auf Unterseiten (Links ohne eigene Komponenten-Klasse
   innerhalb von Sections): beim Hover/Fokus einheitlich im
   Liegenschaftsblau hervorheben. Nav, Buttons, Footer und sonstige
   Komponenten-Links behalten ihre eigenen Hover-Regeln. */
section a:not([class]){ transition: color .18s ease; }
section a:not([class]):hover,
section a:not([class]):focus-visible{ color: var(--bayern-blau); }

/* Sichtbarer Tastatur-Fokus (WCAG 2.4.7) — einheitlich sitewide.
   Zweifarbig: blauer Ring aussen, weisser Saum innen (box-shadow im
   Abstand zwischen Element und Ring). Auf hellen Flaechen wirkt der blaue
   Ring, auf dunklen/blauen Flaechen der weisse Saum. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 2px solid var(--bayern-blau);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
/* Dunkle und blaue Flaechen: weisser Ring aussen, dunkler Saum innen. */
footer :focus-visible{
  outline-color: #fff;
  box-shadow: 0 0 0 2px var(--anthrazit);
}
.cta-band.on-blue :focus-visible{
  outline-color: #fff;
  box-shadow: 0 0 0 2px var(--bayern-tief);
}
/* Ziel eines In-Seiten-Ankers: site-chrome.js setzt voruebergehend
   tabindex="-1" und data-anker-fokus, damit der naechste Tab im Abschnitt
   weitergeht. Programmatischer Fokus, kein Bedienelement, daher ohne Rahmen
   um den ganzen Abschnitt (wie main in cookie-banner.css). */
[data-anker-fokus]:focus{ outline: none; }

/* Skip-Link (WCAG 2.4.1): unsichtbar, bis er per Tab fokussiert wird.
   Fokussiert steht er fest im Fenster (fixed) ueber der Kopfleiste:
   absolut stuende er am Seitenanfang, und Umschalt+Tab vom Logo auf den
   Link sprang auf gescrollten Seiten nach oben. */
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 4000;
  background: var(--bayern-blau); color: #fff;
  padding: 12px 20px; font-family: var(--sans); font-size: 15px;
  font-weight: 500; line-height: 1.3;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible{
  position: fixed;
  left: 12px; top: 12px;
  outline: 2px solid var(--bayern-blau);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Anruf-Button (44px-Touch-Target): ab 1361px unsichtbar (dort steht die
   Nummer im Header), darunter statt der Nummer bzw. neben dem Hamburger. */
.nav__call{ display: none; }
@media (max-width: 1360px){
  .nav__call{
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--silber);
    color: var(--bayern-blau);
  }
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background: var(--bayern-blau); color: #fff; }

/* ---------- type primitives ---------- */
.serif{ font-family: var(--serif); font-weight: 400; letter-spacing: .01em; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--graphit); }
.eyebrow{
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--graphit);
}
.eyebrow--blue{ color: var(--bayern-blau); }

/* ---------- wrap ---------- */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--page-pad); }

/* ---------- NAV ---------- */
/* Die Kopfleiste bleibt beim Scrollen oben stehen (wie auf der Startseite).
   Auf den Unterseiten steckt .frame-top im Rahmen #site-nav, der genau so
   hoch ist wie die Leiste: Ein sticky .frame-top haette darin keinen Weg
   und liefe mit der Seite weg. Deshalb klebt dort der Rahmen selbst
   (direktes Kind von body); .frame-top klebt selbst nur, wo es direkt
   unter body steht (404, fehler). */
#site-nav{ position: sticky; top: 0; z-index: 40; }
.frame-top{
  position: sticky; top: 0; z-index: 40;
  background: var(--papier);
  border-bottom: 1px solid var(--silber);
  /* GPU-Promotion: zwingt den Browser, die Nav in einer eigenen
     Compositing-Layer zu halten. Verhindert Sub-Pixel-Repaint-Glitches
     beim Seitenwechsel (sichtbar als horizontales Ruckeln). */
  transform: translateZ(0);
  will-change: transform;
}
/* Im Rahmen genuegt relative Lage (Bezugspunkt fuer den Drawer, top: 100%). */
#site-nav > .frame-top{ position: relative; }
/* Logo, Links und Schaltflaechen der Leiste stehen immer im Blick. Sie
   liegen aber im Bereich von scroll-padding-top (96px): Beim Fokussieren
   (Tab, Umschalt+Tab) verschob der Browser deshalb die Seite um rund eine
   halbe Bildschirmhoehe. Der negative Rand hebt das fuer die Leiste auf;
   das Menue (eigener Scrollbereich) ist ausgenommen. Gleiche Regel im
   Inline-CSS der Startseite. */
.frame-top > .nav *, .err-bar *{ scroll-margin-top: -96px; }
/* Fallback: Ist die Nav nicht im HTML vorhanden, reserviert der leere
   Host trotzdem die Hoehe der spaeter injizierten Nav — kein Layout-Shift. */
#site-nav:empty{
  display: block;
  min-height: 84px; /* = fertige Kopfleiste: .nav 83px + Linie; bis 1180px 81px */
  border-bottom: 1px solid var(--silber);
  background: color-mix(in srgb, var(--papier) 92%, transparent);
}
/* Rechte Spalte (.nav__cta) und Zeile haben je Breakpoint schon die Masse
   der fertigen Kopfleiste. Malt der Browser eine erst halb eingelesene
   Leiste (gestreamtes HTML: Anruf- oder Menue-Schaltflaeche fehlen noch),
   stehen Logo, Links und Schaltflaeche trotzdem an ihrer Endposition.
   Gemessen (Inter 500, 14px):
     ab 1361px   Nummer 128 + 14 + Schaltflaeche 226,42 = 368,42px, Zeile 47px
     1181–1360   Schaltflaeche 226,42 + 14 + Anruf 44   = 284,42px, Zeile 47px
     bis 1180    Anruf 44 + 14 + Menue 40              = 98px,     Zeile 44px
   minmax(…, auto): Ist der Inhalt breiter (andere Schrift, Textzoom), waechst
   die Spalte wie bisher. Gleiche Werte im Inline-CSS der Startseite. */
.nav{
  max-width: var(--max); margin: 0 auto;
  padding: 18px var(--page-pad);
  display: grid; grid-template-columns: auto 1fr minmax(368.421875px, auto);
  grid-template-rows: minmax(47px, auto);
  align-items: center; gap: 32px;
}
.brand{ display:flex; align-items:center; }
.brand__logo{ height: 40px; width: auto; max-width: none; display: block; }
.nav__links{
  display: flex; justify-content: center; gap: 36px;
  font-size: 13px; font-weight: 500; color: var(--anthrazit);
}
.nav__links a{ position: relative; padding: 4px 0; transition: color .2s ease; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background: var(--bayern-blau);
  transition: right .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover{ color: var(--bayern-blau); }
.nav__links a:hover::after{ right: 0; }
.nav__links a.is-current{ color: var(--bayern-blau); }
.nav__links a.is-current::after{ right: 0; transition: none; }
.nav__cta{ display:flex; align-items:center; gap: 14px; }
.nav__phone{
  font-family: var(--mono); font-size: 11px;
  color: var(--graphit); letter-spacing: .06em;
  /* Stabile Mindestbreite: 17 Zeichen mono + Letter-Spacing + Puffer.
     Verhindert horizontalen Sprung der zentrierten Nav-Links, wenn der
     Mono-Fallback (Menlo/Consolas) eine andere Glyphen-Breite hat als
     JetBrains Mono nach dem Font-Swap. */
  min-width: 128px;
  display: inline-block;
  text-align: right;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  background: var(--bayern-blau); color: #fff;
  border: 1px solid var(--bayern-blau);
  transition: background .2s ease, color .2s ease, transform .2s ease;
  cursor: pointer;
}
.btn:hover{ background: var(--bayern-tief); }
.btn .arrow{ transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arrow{ transform: translateX(4px); }
.btn--ghost{
  background: transparent; color: var(--anthrazit);
  border: 1px solid var(--silber);
}
.btn--ghost:hover{ border-color: var(--anthrazit); background: transparent; color: var(--anthrazit); }
.btn--on-blue{
  background: #fff; color: var(--bayern-blau);
  border-color: #fff;
}
.btn--on-blue:hover{ background: var(--bayern-hell); color: var(--bayern-tief); }

/* Hamburger-Toggle — nur unter 901px sichtbar */
.nav__toggle{
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent; border: 0; cursor: pointer;
  position: relative;
}
.nav__toggle-bar{
  position: absolute; left: 8px; right: 8px;
  height: 1.5px; background: var(--anthrazit);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav__toggle-bar:nth-child(1){ top: 13px; }
.nav__toggle-bar:nth-child(2){ top: 19px; }
.nav__toggle-bar:nth-child(3){ top: 25px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){ top: 19px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2){ opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){ top: 19px; transform: rotate(-45deg); }

/* Drawer — vom Header herunterklappend, Full-Width unter Nav-Leiste */
.nav__drawer{
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papier);
  border-bottom: 1px solid var(--silber);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  animation: navDrawerIn .25s cubic-bezier(.2,.7,.2,1);
  /* Die Leiste steht beim Oeffnen immer oben (sticky), die Seite ist
     gesperrt: Reicht der Platz darunter nicht (Smartphone quer), scrollt
     das Menue in sich. 80px = Oberkante des Menues bis 1180px (nur dort
     gibt es das Menue): Es beginnt bei y=80, seine Unterkante faellt so
     genau auf die Fensterunterkante. */
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Beim Tabben durch das scrollende Menue holt der Browser den Menuepunkt
     nur bis an den Rand: Der Fokusring (2px Linie + 2px Abstand, darin der
     2px-Saum) lag dann ausserhalb und wurde abgeschnitten. 8px = Ring 4px
     + 4px Luft. */
  scroll-padding-block: 8px;
}
@keyframes navDrawerIn{
  from{ opacity: 0; transform: translateY(-8px); }
  to  { opacity: 1; transform: translateY(0); }
}
.nav__drawer-inner{
  max-width: var(--max); margin: 0 auto;
  padding: 12px var(--page-pad) 24px;
  display: flex; flex-direction: column; gap: 0;
}
.nav__drawer-link{
  display: block;
  padding: 16px 0;
  font-size: 16px; font-weight: 500;
  color: var(--anthrazit);
  border-bottom: 1px solid var(--dunst);
  letter-spacing: .01em;
  transition: color .2s ease, padding-left .2s ease;
}
.nav__drawer-link:hover,
.nav__drawer-link.is-current{ color: var(--bayern-blau); padding-left: 4px; }
.nav__drawer-cta{
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 20px;
  padding-top: 8px;
}
.nav__drawer-phone{
  font-family: var(--mono); font-size: 13px;
  color: var(--graphit); letter-spacing: .06em;
  padding: 8px 0;
}
.nav__drawer .btn{ justify-content: center; padding: 14px 20px; font-size: 14px; }

/* Scroll-Sperre, solange das Menue offen ist (site-chrome.js setzt die
   Klasse nav-open an html und body). Gesperrt wird html, denn html scrollt
   die Seite (overflow-y: scroll). overflow: hidden an body haette das
   Scrollen nicht verhindert, body aber zum eigenen Scroll-Container
   gemacht: Die sticky Kopfleiste waere dann mit der Seite weggelaufen.
   scroll-padding-top: 0, solange das Menue offen ist: Die Menuepunkte
   liegen im Bereich von scroll-padding-top (96px). Beim Tabben durch das
   Menue schob der Browser sonst die gesperrte Seite darunter (overflow:
   hidden verhindert nur das Scrollen durch Rad und Wischen, nicht das
   Scrollen zum fokussierten Element). */
@media screen and (max-width: 1180px){
  html.nav-open{ overflow: hidden; scroll-padding-top: 0; }
}

/* Die volle Navigation (Logo, sieben Links, Telefonnummer, Schaltflaeche)
   braucht rund 1.320px Breite. Darunter wuerden Links und Schaltflaeche
   umbrechen bzw. ueber den Rand ragen, daher:
   1181–1360px  Anruf-Button statt ausgeschriebener Nummer, engere Abstaende;
   bis 1180px   Menue-Schaltflaeche mit Drawer wie auf dem Smartphone. */
@media (min-width: 1181px) and (max-width: 1360px){
  .nav{ gap: 24px; grid-template-columns: auto 1fr minmax(284.421875px, auto); }
  .nav__links{ gap: 24px; }
  .nav__phone{ display: none; }
}
@media (max-width: 1180px){
  #site-nav:empty{ min-height: 81px; }
  .nav{ grid-template-columns: auto 1fr minmax(98px, auto); grid-template-rows: minmax(44px, auto); gap: 16px; }
  .nav__links{ display: none; }
  .nav__phone{ display: none; }
  .nav__cta .btn{ display: none; }
  .nav__toggle{ display: block; }
  /* Anruf- und Menue-Schaltflaeche rechts (die Link-Spalte ist leer) */
  .nav__cta{ grid-column: 3; }
}
/* Wird das Fenster bei offenem Menue breiter gezogen: Drawer ausblenden
   (die Schaltflaeche ist dann ausgeblendet; die Scroll-Sperre gilt nur
   bis 1180px, site-chrome.js schliesst das Menue zusaetzlich). */
@media (min-width: 1181px){
  .nav__drawer{ display: none !important; }
}
@media (max-width: 480px){
  .brand__logo{ height: 32px; }
}

/* =========================================================================
   PAGE HEAD — hero shared across all subpages
   Two-column masthead with crumb, eyebrow, display headline, lede.
   ========================================================================= */
.page-head{
  max-width: var(--max); margin: 0 auto;
  padding: clamp(56px, 10vh, 120px) var(--page-pad) clamp(48px, 7vh, 96px);
  position: relative;
}
.crumb{
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  font-family: var(--mono); font-size: 12px; color: var(--graphit);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 32px;
}
.crumb a{ color: var(--graphit); }
.crumb a:hover{ color: var(--bayern-blau); }
.crumb .sep{ color: var(--silber); }
.crumb .here{ color: var(--bayern-blau); min-width: 0; overflow-wrap: anywhere; }

.page-head__grid{
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.page-head__sect{
  font-family: var(--mono); font-size: 11px;
  color: var(--bayern-blau); letter-spacing: .14em;
}
.page-head__title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -.014em;
  color: var(--anthrazit);
  max-width: 18ch;
}
.page-head__title em{ color: var(--bayern-blau); font-style: italic; }
.page-head__lede{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.45;
  color: var(--graphit);
  max-width: 34ch;
  margin: 0;
}
.page-head__actions{
  margin-top: 28px;
  display: flex; gap: 14px; flex-wrap: wrap;
}

@media (max-width: 900px){
  .page-head__grid{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* =========================================================================
   Section primitives
   ========================================================================= */
section{ position: relative; }
.sect-head{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 48px;
  padding: clamp(72px, 10vh, 120px) 0 clamp(36px, 5vh, 60px);
  align-items: baseline;
}
.sect-head .num{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bayern-blau);
  letter-spacing: .14em;
}
.sect-head h2{
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--anthrazit);
  max-width: 24ch;
}
.sect-head h2 em{ color: var(--bayern-blau); font-style: italic; }
@media (max-width: 700px){
  .sect-head{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---------- Essay body (three-column editorial) ---------- */
.essay{
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 48px;
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(56px, 8vh, 96px);
  align-items: start;
  border-top: 1px solid var(--silber);
}
.essay.no-top{ border-top: 0; }
.essay__aside{
  font-family: var(--mono); font-size: 11px;
  color: var(--graphit); letter-spacing: .1em; line-height: 1.7;
}
.essay__aside span{ display:block; }
.essay__aside .ref{ color: var(--bayern-blau); margin-top: 14px; }
.essay__lead{
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.35;
  color: var(--anthrazit);
  font-weight: 400;
  max-width: 28ch;
  margin: 0;
}
/* Zweizeilige Initiale: Oberkante buendig mit den Schrift-Oberkanten
   der Nachbarspalten (rund 0,2 em unter der Zeilenoberkante), Grundlinie
   auf der Grundlinie von Zeile 2, Float endet vor Zeile 3 (Hoehe
   .75 x 3.38 = 2,54 em < 2 Zeilen = 2,7 em). Werte in Chrome gemessen. */
.essay__lead.dropcap::first-letter{
  font-family: var(--serif);
  font-size: 3.38em;
  float: left;
  line-height: .75;
  padding: 0 .08em 0 0;
  color: var(--bayern-blau);
  font-weight: 500;
}
/* 901-1050px: Die Leadschrift steht hier auf ihrem Minimum (21px), die
   Nachbarspalten behalten ihre Groesse; die Initiale stand dadurch 2-3px
   ueber der Textspalte. Sie wird minimal kleiner und um denselben Betrag
   tiefer gesetzt: Oberkante zwischen den Schrift-Oberkanten von Rand- und
   Textspalte, Grundlinie unveraendert auf Zeile 2
   (padding-top = (3,38 - 3,27) x 0,69 / 3,27 em; 0,69 = Lage der Grundlinie
   in der .75-Zeilenbox). Werte in Chrome gemessen. */
@media (min-width: 901px) and (max-width: 1050px){
  .essay__lead.dropcap::first-letter{ font-size: 3.27em; padding-top: .0232em; }
}
.essay__body{
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--graphit);
}
/* Erstes Element ohne Abstand nach oben (auch Listen): die Textspalte
   beginnt auf derselben Hoehe wie Randspalte und Lead. */
.essay__body > :first-child{ margin-top: 0; }
.essay__body p{ margin: 0 0 1em; }
.essay__body p:last-child{ margin-bottom: 0; }
.essay__body strong{ color: var(--anthrazit); font-weight: 500; }

/* Vergleichstabellen (Ratgeber): maschinenlesbar UND lesefreundlich. */
.compare-table{
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: 14.5px;
}
.compare-table caption{
  caption-side: top;
  text-align: left;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--graphit);
  padding-bottom: 10px;
}
.compare-table th, .compare-table td{
  padding: 10px 12px;
  border: 1px solid var(--silber);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th{
  font-weight: 500; color: var(--anthrazit);
  background: var(--dunst);
}
.compare-table tbody th{ font-weight: 400; color: var(--graphit); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{ font-weight: 500; color: var(--anthrazit); }

/* Stand-/Autor-Zeile im Ratgeber-Kopf (E-E-A-T / Aktualitaetssignal). */
.page-head__stand{
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; color: var(--graphit);
  margin: 14px 0 0;
}

/* Links im Fliesstext und in Textlisten sind auch ohne Hover als Link
   erkennbar (WCAG 1.4.1): duenne Unterstreichung 1px im Liegenschaftsblau,
   3px Abstand, die Textfarbe bleibt. Hover/Fokus wie bisher ueber die
   globale Regel `section a:not([class])` (Liegenschaftsblau). Gleiche
   Werte wie die Verweise der Verkaufswege (immobilie-verkaufen) und die
   Stellentitel (jobs); gleiche Regel im Inline-CSS der Startseite.
   Getroffen werden nur Textbausteine. Ohne Unterstreichung bleiben
   Kopfleiste, Menue, Fusszeile, Brotkrumen, Schaltflaechen (.btn),
   Karten und Kacheln samt ihrer Kontaktzeilen (Telefon und E-Mail der
   Geschaeftsfuehrer, Regel unten), Teaser-Titel (.pillar__title),
   Linklisten mit Pfeil (.situations__list, .err-links) und die
   Formularmeldung (.form-status, eigene Unterstreichung in
   Meldungsfarbe). Neuer Textbaustein mit Links: hier aufnehmen. */
.essay__body a:not(.btn),
.essay__aside a:not(.btn),
.faq-a a:not(.btn),
.pillar__body a:not(.btn),
.step__body a:not(.btn),
.cta-band p a:not(.btn),
.page-head__stand a:not(.btn),
.lead-form .hint a:not(.btn),
.map-credit a:not(.btn),
.err-call a:not(.btn),
.err-text a:not(.btn),
.cookie-banner__body a:not(.btn){
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bayern-blau);
  text-underline-offset: 3px;
}
/* Auf blauem Band waere die blaue Linie unsichtbar: dort in Textfarbe. */
.cta-band.on-blue p a:not(.btn){ text-decoration-color: currentColor; }
/* Kontaktzeilen der Geschaeftsfuehrer-Karten (Team: Telefon und E-Mail in
   .pillar__proof, innerhalb von .pillar__body) ohne Unterstreichung: Sie
   sind in Liegenschaftsblau abgesetzt und stehen je allein in einer Zeile
   (GF: keine Unterstreichung in Kacheln und Karten). Der Fliesstext
   daneben bleibt unterstrichen. */
.pillar__proof a:not(.btn){ text-decoration: none; }

@media (max-width: 900px){
  .essay{ grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px){
  /* Vergleichstabelle auf schmalen Bildschirmen: kompakter, Texte duerfen
     mit Silbentrennung umbrechen, Beschriftungen notfalls auch innerhalb
     eines Wortes. Zahlen in den Datenzellen werden nie zerteilt. */
  .compare-table{ font-size: 13.5px; }
  .compare-table th, .compare-table td{
    padding: 8px 7px;
    -webkit-hyphens: auto; hyphens: auto;
  }
  .compare-table th{ overflow-wrap: anywhere; }
}

/* ---------- Pillar list (stacked editorial) ---------- */
.pillars{ border-top: 1px solid var(--silber); }
.pillar{
  display: grid;
  grid-template-columns: 120px 1fr 1.1fr;
  gap: 48px;
  padding: clamp(40px, 6vh, 64px) 0;
  border-bottom: 1px solid var(--silber);
  align-items: start;
  transition: background .4s ease;
}
.pillar:hover{ background: linear-gradient(to right, transparent, var(--dunst) 40%, transparent); }
.pillar__num{
  font-family: var(--mono); font-size: 11px;
  color: var(--bayern-blau); letter-spacing: .12em;
}
.pillar__title{
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.05;
  font-weight: 400;
  color: var(--anthrazit);
  margin: 0;
  letter-spacing: -.005em;
  max-width: 16ch;
}
.pillar__title em{ color: var(--bayern-blau); font-style: italic; }
.pillar__body{
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--graphit);
  max-width: 42ch;
}
.pillar__body strong{ color: var(--anthrazit); font-weight: 500; }
.pillar__proof{
  margin-top: 16px;
  font-family: var(--mono); font-size: 11px;
  color: var(--bayern-blau); letter-spacing: .08em;
  display: flex; align-items: center; gap: 10px;
  width: fit-content;
}
.pillar__proof::before{ content:""; width: 24px; height: 1px; background: var(--bayern-blau); flex-shrink: 0; }
@media (max-width: 900px){
  .pillar{ grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 36px 0; }
}

/* ---------- FAQ accordion ---------- */
.faq-list{
  border-top: 1px solid var(--silber);
  border-bottom: 1px solid var(--silber);
}
.faq-item{ border-bottom: 1px solid var(--silber); }
.faq-item:last-child{ border-bottom: 0; }

/* Nie zwei Linien uebereinander ohne Inhalt dazwischen: Beginnt die
   Folgesektion mit ihrer eigenen Oberlinie ueber die volle Breite
   (.pillars, .process, .cta-band ohne Blau), entfaellt die Abschlusslinie
   des letzten Blocks davor (letzte Saeule bzw. FAQ-Liste); es bleibt die
   Sektionslinie wie an allen anderen Sektionsuebergaengen. Steht nach dem
   Block noch Inhalt (z. B. die Vertiefungen auf "Immobilie verkaufen")
   oder folgt eine Sektion ohne Oberlinie, bleibt die Linie stehen.
   Browser ohne :has() ignorieren die Regel und zeigen wie bisher beide. */
section:has(+ :is(.pillars, .process, .cta-band:not(.on-blue))) > .wrap:last-child > :is(.pillar, .faq-list):last-child{
  border-bottom: 0;
}
.faq-q{
  width: 100%;
  display: grid;
  /* Gleiches Raster wie .sect-head (120px + 48px): Frage und Antwort
     beginnen auf der Kante der Ueberschriften. */
  grid-template-columns: 120px 1fr 24px;
  gap: 48px;
  align-items: center;
  padding: 24px 0;
  text-align: left;
  color: var(--anthrazit);
  font-family: var(--serif);
  font-size: clamp(19px, 1.45vw, 24px);
  font-weight: 400;
  line-height: 1.22;
  transition: color .25s ease;
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker{ display: none; }
.faq-q:hover{ color: var(--bayern-blau); }
.faq-q .fq-num{ font-family: var(--mono); font-size: 11px; color: var(--graphit); letter-spacing: .12em; }
.faq-q .plus{ width: 16px; height: 16px; position: relative; justify-self: end; }
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position: absolute; background: currentColor; left: 50%; top: 50%;
}
.faq-q .plus::before{ width: 16px; height: 1px; transform: translate(-50%,-50%); }
.faq-q .plus::after{ width: 1px; height: 16px; transform: translate(-50%,-50%); transition: transform .3s ease; }
.faq-item[open] .plus::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq-a{
  display: grid;
  grid-template-columns: 120px 1fr 24px;
  gap: 48px;
  padding: 0 0 24px;
}
.faq-a > div{
  grid-column: 2;
  font-size: 15px; line-height: 1.65; color: var(--graphit);
  /* volle Breite bis vor die Plus-Spalte, Blocksatz mit Silbentrennung */
  text-align: justify;
  -webkit-hyphens: auto; hyphens: auto;
}
@media (max-width: 700px){
  .faq-q, .faq-a{ grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; }
  .faq-q .fq-num{ display: none; }
  .faq-a > div{ grid-column: 1 / 2; }
}

/* ---------- Stellenangebote (Jobs): aufklappbar wie die FAQ ----------
   Gleiches Raster wie .faq-q/.faq-a, Titel auf der Kante der
   Ueberschriften. Kein .faq-list-Wrapper: mehrere Stellen duerfen
   gleichzeitig offen sein. */
.job-list{ border-top: 1px solid var(--silber); border-bottom: 1px solid var(--silber); }
.job__title{ margin: 0; font: inherit; color: inherit; }
.job__a > div{ text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.job__lead{ margin: 0 0 28px; max-width: 68ch; font-size: 15.5px; line-height: 1.65; color: var(--anthrazit); }
.job__cols{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.job__h{
  margin: 0 0 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bayern-blau);
}
.job__list{ margin: 0; padding: 0 0 0 1.1em; }
.job__list li{ margin: 0 0 8px; padding-left: .2em; }
.job__list li:last-child{ margin-bottom: 0; }
.job__list li::marker{ color: var(--bayern-blau); }
.job__apply{ margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--silber); color: var(--anthrazit); }
.job__apply a{ white-space: nowrap; }
@media (max-width: 1100px){
  .job__cols{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- CTA band ---------- */
.cta-band{
  border-top: 1px solid var(--silber);
  padding: clamp(64px, 10vh, 120px) 0;
}
.cta-band.on-blue{
  background: var(--bayern-blau);
  color: #fff;
  border-top: 0;
}
.cta-band__grid{
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.cta-band__grid .num{
  font-family: var(--mono); font-size: 11px;
  color: var(--bayern-blau); letter-spacing: .14em;
}
.cta-band.on-blue .cta-band__grid .num{ color: var(--bayern-hell); }
.cta-band h3{
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--anthrazit);
  max-width: 18ch;
}
.cta-band.on-blue h3{ color: #fff; }
.cta-band h3 em{ color: var(--bayern-blau); font-style: italic; }
.cta-band.on-blue h3 em{ color: var(--bayern-hell); }
.cta-band p{
  font-size: 16px; line-height: 1.6; color: var(--graphit); max-width: 40ch;
  margin: 0 0 22px;
}
.cta-band.on-blue p{ color: var(--bayern-hell); }
.cta-band .actions{ display: flex; gap: 14px; flex-wrap: wrap; }
/* Inhalts-Links auf blauem Band: Blau-auf-Blau vermeiden. */
.cta-band.on-blue a:not([class]):hover,
.cta-band.on-blue a:not([class]):focus-visible{ color: #fff; text-decoration: underline; }
@media (max-width: 900px){
  .cta-band__grid{ grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---------- Inline form ---------- */
.lead-form{
  position: relative;
  display: grid;
  /* minmax(0,1fr): die Spalten duerfen schmaler werden als der
     Mindestinhalt der Felder — sonst ragt das Formular auf Smartphones
     ueber den Rand. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 20px;
  padding: 28px;
  background: var(--papier-warm);
  border: 1px solid var(--silber);
}
.lead-form label{
  display: block;
  font-family: var(--mono);
  /* 12.5px statt 10.5px: bessere Lesbarkeit */
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--graphit);
  margin-bottom: 8px;
}
.lead-form input,
.lead-form select,
.lead-form textarea{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 11px 12px;
  /* 16px verhindert den iOS-Safari-Autozoom beim Fokussieren */
  font: inherit; font-size: 16px;
  color: var(--anthrazit);
  background: #fff;
  border: 1px solid var(--silber);
  border-radius: 0;
  transition: border-color .2s ease;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus{
  border-color: var(--bayern-blau);
}
.lead-form .full{ grid-column: 1 / -1; }
.lead-form textarea{ min-height: 110px; resize: vertical; }
.lead-form .contact-note{
  margin: 8px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--graphit);
}
.lead-form .submit-row{
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 4px;
}
.lead-form .hint{
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  line-height: 1.6;
  color: var(--graphit);
}
/* Link im Hinweis: Unterstreichung ueber die Fliesstext-Regel (oben). */
/* Pflichtfeld-Stern */
.lead-form .req{ color: var(--bayern-blau); margin-left: 1px; font-weight: 500; }
/* Honeypot — visuell und funktional unsichtbar fuer reale Nutzer */
.lead-form .hp{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  pointer-events: none;
}
/* Loading-State auf dem Submit-Button */
.lead-form .btn[disabled],
.lead-form.is-sending .btn{
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}
.lead-form.is-sending .btn .btn__label::after{ content: " — sende …"; }

/* Kontaktgruppe „Telefon oder E-Mail“ (fieldset + legend): Rahmen und
   Abstaende des Browsers neutralisieren, damit die Gruppe im Raster der
   .lead-form aussieht wie zwei normale Felder nebeneinander. Die Legende
   uebernimmt die Optik der Feldbeschriftungen. */
.lead-form fieldset{
  grid-column: 1 / -1;
  margin: 0; padding: 0; border: 0;
  min-width: 0;            /* Browser-Standard min-content verhindern */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 20px;
}
.lead-form legend{
  display: block;
  max-width: 100%;
  padding: 0 0 12px;
  white-space: normal;
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.5;
  color: var(--graphit);
}
.lead-form fieldset > :not(div){ grid-column: 1 / -1; }
.lead-form fieldset > .contact-note{ margin: 0; }
.lead-form fieldset > .contact-note:last-child{ margin-top: -8px; }

/* Formularfelder bewusst ohne eigenes scroll-margin-top: Beim Fokus per
   Zeiger (Klick oder Fingertipp auf Feld oder Beschriftung) scrollt der
   Browser dann nur, wenn das Feld nicht sichtbar ist (scroll-padding-top
   96px), und die Seite bleibt unter dem Zeiger stehen. Beim Fokus per
   Tastatur und durch die Formularpruefung beim Absenden stellt
   site-chrome.js (keepFieldLabelsVisible) Beschriftung bzw. Legende unter
   der Kopfleiste frei und holt das Feld samt Fokusring ganz ins Bild. */

/* Formularmeldungen (Fehler / Erfolg), gesetzt per JavaScript.
   [hidden] blendet aus; leer bleibt die Meldung ohne sichtbare Flaeche,
   damit ein vorhandener Live-Bereich angesagt werden kann. */
.form-status{
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--bayern-blau);
  background: var(--papier-warm);
  color: var(--anthrazit);
  font-size: 14.5px; line-height: 1.5;
}
.form-status[hidden]{ display: none; }
.form-status:empty{ padding: 0; border: 0; background: none; }
/* leer im Formularraster: aus dem Raster nehmen, damit kein Leerabstand
   entsteht (bleibt als Live-Bereich erhalten) */
.lead-form > .form-status:empty{ position: absolute; }
.form-status a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-status a[href^="tel:"]{ white-space: nowrap; }
.form-status--error{
  background: #FCE8E8;
  color: #8B1F1F;
  border-left-color: #B00020;
}
.form-status--ok{
  background: var(--bayern-hell);
  color: var(--bayern-tief);
  border-left-color: var(--bayern-blau);
}

@media (max-width: 700px){
  .lead-form{ grid-template-columns: minmax(0, 1fr); }
  .lead-form fieldset{ grid-template-columns: minmax(0, 1fr); }
  /* Hinweistext und Absende-Schaltflaeche untereinander statt
     nebeneinander, damit nichts ueber den Rand gedrueckt wird. */
  .lead-form .submit-row{ flex-direction: column; align-items: stretch; }
  .lead-form .submit-row .btn{ justify-content: center; }
}
@media (max-width: 480px){
  .lead-form{ padding: 20px 16px; }
}

/* ---------- Three-step process ---------- */
.process{ border-top: 1px solid var(--silber); padding-bottom: clamp(56px, 8vh, 100px); }
.steps{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border-top: 1px solid var(--silber);
  position: relative;
}
.step{
  padding: 32px 32px 40px 0;
  border-right: 1px solid var(--silber);
}
.step:last-child{ border-right: 0; padding-right: 0; }
/* Linker Innenabstand nur fuer Spalte 2 und 3. Die erste Spalte jeder
   Zeile (auch IV in der zweiten Zeile) bleibt buendig linksgesetzt,
   exakt auf einer vertikalen Linie mit Schritt I. */
.steps .step:not(:nth-child(3n+1)){ padding-left: 32px; }
.step__num{
  font-family: var(--serif); font-size: 56px;
  line-height: 1; color: var(--bayern-blau);
  font-weight: 500; letter-spacing: -.02em;
}
.step__when{
  font-family: var(--mono); font-size: 12px;
  color: var(--graphit); letter-spacing: .14em; margin-top: 10px;
}
.step__title{
  margin: 20px 0 12px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15;
  color: var(--anthrazit);
}
.step__body{ font-size: 14.5px; line-height: 1.6; color: var(--graphit); max-width: 34ch; }
@media (max-width: 900px){
  .steps{ grid-template-columns: 1fr; }
  .step{ border-right: 0; border-bottom: 1px solid var(--silber); padding: 24px 0; }
  .steps .step:not(:nth-child(3n+1)){ padding-left: 0; }
  .step:last-child{ border-bottom: 0; }
}

/* ---------- FOOTER ---------- */
footer{ background: var(--anthrazit); color: #cfd3db; }
.foot-top{
  max-width: var(--max); margin: 0 auto;
  padding: 64px var(--page-pad) 36px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.foot-brand{ max-width: 36ch; }
.foot-brand .wm{
  font-family: var(--serif); font-size: 28px;
  color: #fff; line-height: 1.05;
  letter-spacing: .02em; margin: 0 0 12px;
}
/* Wortmarke einheitlich: beide Woerter aufrecht und weiss wie "Bayerische" */
.foot-brand .wm em{ color: inherit; font-style: inherit; }
.foot-brand p{ font-size: 13.5px; line-height: 1.6; color: #9aa0aa; margin: 0; }
.foot-col h5{
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bayern-hell);
}
.foot-col ul{ list-style: none; padding: 0; margin: 0; }
.foot-col li{ font-size: 13px; padding: 4px 0; }
.foot-col a{ color: #cfd3db; transition: color .2s ease; }
.foot-col a:hover{ color: #fff; }
.foot-bar{
  max-width: var(--max); margin: 0 auto;
  padding: 24px var(--page-pad) 40px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: center;
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; color: #9aa0aa;
}
.foot-bar .legal{ display: flex; gap: 20px; justify-content: center; }
.foot-bar a{ color: #9aa0aa; transition: color .2s ease; }
.foot-bar a:hover{ color: #fff; }
@media (max-width: 900px){
  .foot-top{ grid-template-columns: 1fr 1fr; }
  .foot-brand{ grid-column: 1 / -1; }
  .foot-bar{ grid-template-columns: 1fr; text-align: center; }
  .foot-bar .legal{ flex-wrap: wrap; }
}

/* ---------- reveal ----------
   Einblenden beim Scrollen nur mit JavaScript: Das Kopfskript setzt
   html.js, site-chrome.js vergibt .in-view. Ohne JavaScript bleibt alles
   sichtbar. :where() haelt die Spezifitaet wie bisher bei einer Klasse,
   damit seitenspezifische Ausnahmen (z. B. Portfolio) weiter greifen;
   Browser ohne :where() ignorieren die Regel und zeigen alles sofort. */
:where(html.js) .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity: 1; transform: none; }
/* Ohne JavaScript auch seitenspezifische Verstecke aufheben. */
html:not(.js) .reveal{ opacity: 1; transform: none; }

/* ---------- trust list (used on about + evaluation) ---------- */
.trust-list{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  column-gap: 24px;
  border-top: 1px solid var(--silber);
}
.trust-list li{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--silber);
  align-items: baseline;
}
.trust-list .t-num{ font-family: var(--mono); font-size: 10px; color: var(--graphit); letter-spacing: .14em; }
.trust-list .t-txt{
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.3; color: var(--anthrazit); font-weight: 400;
}
.trust-list .t-big{
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 26px);
  color: var(--bayern-blau); font-weight: 500;
}
/* Smartphone: Kennzahl unter die Beschriftung statt in eine dritte
   Spalte — lange Werte sprengen sonst die Breite. */
@media (max-width: 600px){
  .trust-list{ grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; }
  .trust-list li{ column-gap: 16px; row-gap: 2px; }
  .trust-list .t-big{ grid-column: 2; }
}

/* =========================================================================
   Schmale Bildschirme: lange Komposita in Ueberschriften trennen
   (lang="de"), nur bei langen Woertern; Fallback ist der Umbruch ueber
   overflow-wrap am body.
   ========================================================================= */
@media (max-width: 600px){
  .page-head__title, .sect-head h2, .pillar__title, .cta-band h3,
  .step__title, .essay__lead, .faq-q, .page-head__lede,
  .trust-list .t-txt, .trust-list .t-big{
    -webkit-hyphens: auto; hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
  .btn{ max-width: 100%; }
}

/* =========================================================================
   Ohne JavaScript: mobiles Menue ist nicht bedienbar (Schaltflaeche
   braucht JS). Stattdessen die Hauptlinks als umbrechende Zeile zeigen.
   Die dadurch mehrzeilige Leiste klebt nicht oben (sie wuerde viel
   Bildschirm belegen und Anker-Ziele verdecken). Nicht betroffen sind 404
   und fehler: Sie haben kein #site-nav und kein Menue, ihre Leiste
   (.frame-top mit .err-bar: Logo und Telefonnummer) bleibt ohne JS auch
   bis 1180px einzeilig und klebt bei jeder Breite oben (sticky).
   ========================================================================= */
@media (max-width: 1180px){
  html:not(.js) #site-nav{ position: relative; }
  html:not(.js) .nav__toggle{ display: none; }
  /* ohne Menue-Schaltflaeche steht nur der Anruf-Button rechts */
  html:not(.js) .nav{ row-gap: 6px; grid-template-columns: auto 1fr auto; }
  html:not(.js) .nav__links{
    display: flex; flex-wrap: wrap; justify-content: flex-start;
    gap: 0 18px;
    grid-column: 1 / -1; grid-row: 2;
  }
  html:not(.js) .nav__links a{ padding: 10px 0; }
  html:not(.js) .nav__cta{ grid-column: 3; grid-row: 1; }
}

/* =========================================================================
   Reduzierte Bewegung (prefers-reduced-motion): Inhalte sofort sichtbar,
   keine Einblend-, Schiebe- oder Drehanimationen.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav__drawer{ animation: none; }
  .nav__links a, .nav__links a::after, .nav__toggle-bar,
  .nav__drawer-link, .btn, .btn .arrow, .faq-q, .faq-q .plus::after,
  .pillar, section a:not([class]), .foot-col a, .foot-bar a,
  .lead-form input, .lead-form select, .lead-form textarea{ transition: none; }
  .btn:hover .arrow{ transform: none; }
}

/* =========================================================================
   Erzwungene Farben (z. B. Windows-Kontrastdesigns): Striche, die nur aus
   einer Hintergrundfarbe bestehen (Menue-Schaltflaeche, FAQ-Plus,
   Markierung der aktuellen Seite), sonst unsichtbar.
   ========================================================================= */
@media (forced-colors: active){
  .nav__toggle-bar, .faq-q .plus::before, .faq-q .plus::after,
  .pillar__proof::before{ forced-color-adjust: none; background: CanvasText; }
  .nav__links a::after{ forced-color-adjust: none; background: LinkText; }
  .nav__toggle{ border: 1px solid ButtonText; }
}

/* =========================================================================
   Druck / „Als PDF speichern“: alle Inhalte sichtbar, keine Navigation,
   keine Ueberlagerungen, dunkle Flaechen hell, schwarze Schrift.
   ========================================================================= */
@media print{
  :root{ --graphit: #333; --silber: #999; --dunst: #ddd; }
  @page{ margin: 16mm 14mm; }
  html{ overflow: visible; scroll-padding-top: 0; background: #fff !important; }
  body{ background: #fff !important; color: #000; overflow: visible !important; }

  /* Einblend-Abschnitte immer sichtbar */
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Navigation, Menue, Cookie-Hinweis, Seitenuebergang ausblenden;
     das Logo bleibt als Kopf der ersten Seite stehen. */
  .skip-link, .nav__links, .nav__cta, .nav__toggle, .nav__drawer,
  .cookie-banner, .cookie-modal, #bl-pt-boot-cover, .bl-pt,
  .page-head__actions, .cta-band .actions,
  .lead-form .submit-row .btn, .foot-col, .foot-bar .legal{ display: none !important; }
  .frame-top{
    position: static; transform: none; will-change: auto;
    border-bottom: 1px solid #999;
  }
  /* Kopfleiste im Druck nicht sticky: nur am Anfang der ersten Seite */
  #site-nav, #site-nav > .frame-top{ position: static; }
  .nav{ display: block; padding: 0 0 10px; }
  #site-nav:empty{ display: none; }

  /* Einspaltige Raster als Bloecke setzen: Raster lassen sich beim
     Seitenumbruch schlecht teilen und hinterlassen sonst grosse Luecken. */
  .page-head__grid, .essay, .pillar, .cta-band__grid{ display: block; }
  .page-head__grid > * + *, .essay > * + *, .pillar > * + *,
  .cta-band__grid > * + *{ margin-top: 14px; }

  /* Abstaende fuer Papier verdichten */
  .page-head{ padding: 24px 0 16px; }
  .wrap, .nav, .foot-top, .foot-bar{ padding-left: 0; padding-right: 0; }
  .sect-head{ padding: 28px 0 12px; }
  .essay, .cta-band, .process{ padding-top: 20px; padding-bottom: 20px; }
  .pillar{ padding: 18px 0; }
  .pillar:hover{ background: none; }

  /* Farbige Flaechen ohne Hintergrunddruck lesbar halten */
  .btn, .btn--on-blue{ background: none !important; color: #000 !important; border-color: #000 !important; }
  .cta-band.on-blue{ background: none !important; color: #000; border-top: 1px solid #999; }
  .cta-band.on-blue h3, .cta-band.on-blue h3 em, .cta-band.on-blue p,
  .cta-band.on-blue .cta-band__grid .num{ color: #000; }
  footer{ background: none !important; color: #000; border-top: 1px solid #999; }
  .foot-top{ display: block; padding-top: 14px; padding-bottom: 6px; border-bottom: 0; }
  .foot-brand{ max-width: none; }
  .foot-brand .wm, .foot-brand .wm em{ color: #000; font-size: 18px; margin-bottom: 4px; }
  .foot-brand p, .foot-bar, .foot-bar a{ color: #333; }
  .foot-bar{ display: block; padding-top: 0; padding-bottom: 0; }
  .foot-bar span{ display: block; }

  /* Umbrueche: Ueberschriften nicht vom Folgetext trennen, kleine
     Bausteine nicht zerteilen */
  h1, h2, h3, h4, .sect-head, .pillar__title, .faq-q{ break-after: avoid; page-break-after: avoid; }
  .faq-item, .step, .trust-list li, .compare-table,
  .foot-top, .foot-bar{ break-inside: avoid; page-break-inside: avoid; }
  p, li{ orphans: 3; widows: 3; }
  .faq-q .plus{ display: none; }
  img{ break-inside: avoid; }
}
/* Geschlossene FAQ-Antworten im Druck mit ausgeben (Browser mit
   ::details-content; eigene Regel, damit aeltere Browser nur diese
   eine Regel verwerfen). */
@media print{
  details::details-content{ content-visibility: visible; display: block; }
}