/* ==========================================================================
   Palka & Nemetz Immobilien
   Headline: Ranoe Light (selbst gehostet) · Fließtext: Satoshi
   Markenblau: #14243C (aus dem Logo)
   ========================================================================== */

@font-face {
  font-family: 'Ranoe';
  src: url('../fonts/Ranoefamily-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Satoshi als Variable Font — eine Datei (42 KB) deckt 300–900 ab und
   ersetzt damit die drei statischen Schnitte (zusammen 79 KB). */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --navy-900: #0C1626;
  --navy-800: #14243C;
  --navy-600: #2A3D57;
  --navy-400: #4A4E57;
  --navy-200: #C9CFD8;
  --cream-100: #FAF8F6;
  --cream-200: #F2EDE8;
  --cream-300: #E5DCD2;
  --white: #FFFFFF;

  --fg: var(--navy-800);
  --muted: var(--navy-400);

  --serif: 'Ranoe', 'Iowan Old Style', Georgia, serif;
  --sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(3rem, 7vw, 6rem);
  --fs-h1: clamp(2.5rem, 5.4vw, 4.25rem);
  --fs-h2: clamp(2.5rem, 5.2vw, 4.5rem);
  --fs-h3: clamp(1.375rem, 2.1vw, 1.875rem);
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.1875rem);
  --fs-meta: 0.875rem;
  --fs-eyebrow: 0.625rem;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(5rem, 10vw, 8rem);

  --ease: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 260ms;
  --nav-h: 92px;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--sans);
  font-size: 1.03125rem;
  line-height: 1.7;
  font-weight: 400;
  color: var(--fg);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .brandbar :focus-visible { outline-color: var(--cream-200); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-800); color: var(--cream-200);
  padding: .75rem 1.25rem; font-size: .875rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   3. Typografie
   ========================================================================== */
h1, h2, h3, h4, .serif {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.022em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
p { text-wrap: pretty; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--muted);
}
.on-dark .eyebrow { color: rgba(242, 237, 232, .55); }

/* Feiner Strich, der beim Einblenden aufzieht */
.eyebrow--line { display: flex; align-items: center; gap: .875rem; }
.eyebrow--line::after {
  content: ''; height: 1px; flex: 1; max-width: 5rem;
  background: currentColor; opacity: .45;
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-out) 240ms;
}
[data-reveal].is-in .eyebrow--line::after,
.is-in.eyebrow--line::after { transform: scaleX(1); }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--muted); }
.on-dark .lead { color: rgba(242, 237, 232, .72); }

/* ==========================================================================
   4. Layout
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--section); }
.on-dark { background: var(--navy-800); color: var(--cream-200); }
.on-dark h2, .on-dark h3 { color: var(--cream-200); }

.sec-head { max-width: 52rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.sec-head .eyebrow { margin-bottom: 1.25rem; }
.sec-head .lead { margin-top: 1.5rem; max-width: 44rem; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center;
  font-family: var(--sans);
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 1.0625rem 2rem;
  border: 1px solid transparent; border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn > * { position: relative; z-index: 1; }

/* Heller Wisch von links */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--white);
  transform: translateX(-101%);
  transition: transform 520ms var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }

/* Inhalt: driftet minimal zum Cursor (magnetisch, gesetzt von main.js) */
.btn__c {
  display: inline-flex; align-items: center; gap: .75em;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 480ms var(--ease-out);
}
.btn.is-magnet .btn__c { transition-duration: 120ms; }

/* Label tauscht beim Hover die Zeile */
.btn__t { position: relative; display: block; overflow: hidden; }
.btn__t > span {
  display: block;
  transition: transform 560ms var(--ease-out);
}
.btn__t > span + span {
  position: absolute; inset: 0;
  transform: translateY(105%);
}
.btn:hover .btn__t > span:first-child,
.btn:focus-visible .btn__t > span:first-child { transform: translateY(-105%); }
.btn:hover .btn__t > span + span,
.btn:focus-visible .btn__t > span + span { transform: translateY(0); }

/* Pfeil wandert raus, ein zweiter kommt nach */
.btn .arrow { position: relative; display: block; width: 1em; overflow: hidden; }
.btn .arrow > span { display: block; transition: transform 560ms var(--ease-out); }
.btn .arrow > span + span { position: absolute; inset: 0; transform: translateX(-120%); }
.btn:hover .arrow > span:first-child,
.btn:focus-visible .arrow > span:first-child { transform: translateX(120%); }
.btn:hover .arrow > span + span,
.btn:focus-visible .arrow > span + span { transform: translateX(0); }

.btn--solid   { background: var(--cream-200); color: var(--navy-800); }
.btn--outline { border-color: rgba(242, 237, 232, .45); color: var(--cream-200); }
.btn--outline:hover { color: var(--navy-800); border-color: var(--white); }
.btn--navy    { background: var(--navy-800); color: var(--cream-200); }
.btn--navy:hover { color: var(--navy-800); }
.btn--ghost   { border-color: var(--navy-200); color: var(--navy-800); }
.btn--ghost:hover { border-color: var(--navy-800); }
.btn--navy::before, .btn--ghost::before { background: var(--cream-200); }

/* ==========================================================================
   6. Scroll-Reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Zeilenweiser Aufbau von Überschriften.
   main.js zerlegt den Text in Zeilen und setzt --i je Zeile. */
[data-split] { text-wrap: pretty; }
[data-split] .ln { display: block; overflow: hidden; }
[data-split] .ln > i {
  display: block;
  font-style: normal;
  transform: translateY(112%);
  transition: transform 1000ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 95ms);
}
[data-split].is-in .ln > i { transform: none; }
/* Vor dem Zerlegen nicht sichtbar aufblitzen lassen — nur wenn JS aktiv ist,
   sonst bliebe die Überschrift ohne JavaScript dauerhaft unsichtbar. */
.js [data-split]:not([data-ready]) { visibility: hidden; }

/* ==========================================================================
   7. Brandbar
      Endzustand: [ Button ]  [ LOGO mittig ]  [ Button ]
      Logo und beide Buttons starten im Hero und wandern beim Scrollen
      auf ihre Plätze (Messung + Interpolation in main.js).
   ========================================================================== */
.brandbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  overflow: visible;
  pointer-events: none;
}
.brandbar__bg {
  position: absolute; inset: 0;
  background: rgba(20, 36, 60, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: var(--bg-o, 0);
  border-bottom: 1px solid rgba(242, 237, 232, .12);
}

.brandbar__inner {
  position: relative; height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.brandbar__inner > * { pointer-events: auto; }

.bb-left  { justify-self: start; }
.bb-right { justify-self: end; position: relative; }
.bb-logo  { justify-self: center; }

/* Logo-SVG ist 623,61 × 118,92 — bei 190px also rund 36px hoch,
   passt mit Luft in den 92px-Balken.

   Wichtig für die Schärfe: Das Logo wird immer in seiner GRÖSSTEN Größe
   gerendert (der Hero-Größe, von main.js in --logo-w geschrieben) und beim
   Scrollen nur noch verkleinert. Würde man umgekehrt vorgehen, rastert der
   Browser das SVG einmal in Leistengröße — will-change und translate3d legen
   das Element auf eine eigene Ebene — und zieht dieses Bitmap im Hero auf das
   Doppelte auf. Genau das sah man als Pixeln.

   Damit die Leiste ihr Raster behält, obwohl das Bild viel größer ist als
   der Platz darin: Der Anker hat eine feste Größe und das Bild liegt
   absolut positioniert und zentriert darüber. Es steht damit vollständig
   außerhalb des Textflusses — seine Breite kann das Layout nicht mehr
   beeinflussen, egal wie groß --logo-w wird.

   (Eine frühere Fassung löste das über negative Ränder. Sie scheiterte an
   der globalen Regel `img { max-width: 100% }` weiter oben: Die begrenzte
   das Bild auf die Breite des Ankers, also auf Leistengröße, während der
   negative Rand weiter mit der vollen Hero-Breite rechnete. Ergebnis war
   genau das gemeldete Bild — zu klein und nach links versetzt. Deshalb
   steht unten ausdrücklich max-width: none.) */
.brandbar__logo {
  --logo-bar: 190px;
  --logo-w: var(--logo-bar);
  position: relative;
  display: block;
  width: var(--logo-bar);
  /* 623,61 : 118,92 — als calc statt aspect-ratio, damit es auch auf
     älteren Browsern exakt stimmt. */
  height: calc(var(--logo-bar) * 118.92 / 623.61);
  transform-origin: center center;
  will-change: transform;
}
.brandbar__logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--logo-w);
  height: auto;
  transform: translate(-50%, -50%);
  max-width: none;   /* globale Bildregeln dürfen hier nicht eingreifen */
}

.bb-act { transform-origin: center center; will-change: transform; }
.bb-act.btn { font-size: .6875rem; padding: .8125rem 1.25rem; letter-spacing: .09em; }

/* Sitzt am Rahmen der Leiste, nicht am rechten Button — sonst wandert er mit
   diesem aus dem Bild, sobald der Platz eng wird. */
.brandbar__burger {
  display: none;
  position: absolute; right: var(--gutter); top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
  opacity: var(--menu-o, 0);
  pointer-events: none;
}
.brandbar__burger span {
  display: block; height: 1.5px; background: var(--cream-200);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
.brandbar__burger span:nth-child(1) { width: 26px; }
.brandbar__burger span:nth-child(2) { width: 18px; }
.brandbar__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.brandbar__burger[aria-expanded='true'] span:nth-child(2) { width: 26px; transform: translateY(-3.75px) rotate(-45deg); }

.drawer {
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  background: var(--navy-800);
  padding: .5rem var(--gutter) 2rem;
  display: flex; flex-direction: column;
  pointer-events: auto;
  border-bottom: 1px solid rgba(242, 237, 232, .1);
}
.drawer a {
  color: var(--cream-200); font-size: 1.0625rem; padding: .875rem 0;
  border-bottom: 1px solid rgba(242, 237, 232, .1);
}
.drawer a:last-child { border-bottom: none; }
/* display:flex würde sonst das hidden-Attribut aushebeln */
.drawer[hidden] { display: none; }

/* ==========================================================================
   8. Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  /* Unten mehr Polster als oben: der mittig stehende Inhalt rückt dadurch
     nach oben, ohne dass er am Rand klebt. */
  padding-block: calc(var(--nav-h) + 1.5rem) 6.5rem;
  color: var(--cream-200);
  background: var(--navy-900);
  overflow: hidden;
}
.hero__media { position: absolute; inset: -6% 0; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--par, 0px), 0) scale(var(--parS, 1));
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,22,38,.70) 0%, rgba(12,22,38,.40) 34%, rgba(12,22,38,.86) 100%),
    radial-gradient(120% 80% at 50% 45%, rgba(12,22,38,0) 0%, rgba(12,22,38,.55) 100%);
}

.hero__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; width: 100%;
}
.hero__slot { flex: none; }
/* Größe des Logos im Hero. Der Platzhalter bestimmt sie — main.js misst ihn
   und skaliert das echte Logo aus der Leiste hierher.

   Das Logo ist mit 624 : 119 sehr breit und liegt dadurch optisch schnell
   unter dem Claim. Deshalb großzügiger als eine übliche Bildbreite: 38vw
   statt 30, und die Obergrenze so hoch, dass es auch auf einem großen
   Monitor Präsenz behält. */
.hero__slot--logo {
  /* 20 % kleiner als zuvor (war 290/34vw/520). */
  width: clamp(232px, 27.2vw, 416px);
  aspect-ratio: 624 / 119;
  /* Mehr Luft nach unten schiebt das Logo im mittig stehenden Block nach
     oben und trennt es zugleich deutlicher vom Claim. */
  margin-bottom: clamp(3rem, 7vh, 5rem);
}

/* Flache Schirme — etwa 1280 × 720 — brauchen den Platz für Claim, Text
   und die beiden Schaltflächen. Dort etwas zurücknehmen. */
@media (max-height: 760px) {
  .hero__slot--logo {
    width: clamp(216px, 22.4vw, 336px);
    margin-bottom: clamp(2rem, 5vh, 3.25rem);
  }
}

/* Die zwei Buttons stehen im Hero deutlich weiter auseinander */
.hero__actions {
  display: flex; align-items: center;
  gap: clamp(1.25rem, 7vw, 6rem);
  margin-top: clamp(2.25rem, 5vh, 3.5rem);
}
.hero__slot--act { flex: none; }

.hero__claim { color: var(--cream-200); margin-bottom: 1.5rem; }
.hero__text {
  max-width: 44rem;
  font-size: var(--fs-lead); line-height: 1.62;
  color: rgba(242, 237, 232, .78);
}
.hero__claim, .hero__text {
  opacity: var(--fade, 1);
  transform: translate3d(0, var(--fadeY, 0px), 0);
  will-change: opacity, transform;
}

/* Einlauf beim Laden */
.hero__claim { animation: rise 1100ms var(--ease-out) both 160ms; }
.hero__text  { animation: rise 1100ms var(--ease-out) both 300ms; }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

.hero__cue {
  position: absolute; bottom: 2.25rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2; width: 1px; height: 54px;
  background: rgba(242, 237, 232, .25);
  overflow: hidden; opacity: var(--fade, 1);
}
.hero__cue span { position: absolute; inset: 0; background: var(--cream-200); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ==========================================================================
   9. Leistungen
   ========================================================================== */
/* Keine Boxen: versetzte Zeilen, Bild randabfallend, Text eingerückt.
   Die Zeilen liegen bewusst außerhalb von .container. */
.leistungen { background: var(--cream-100); }

.lz-list { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 7rem); }

.lz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* 16:9 — flacher als zuvor (erst 5:4, dann 3:2). Bei halber Bildschirmbreite
   baute schon 3:2 mehr Höhe auf, als die drei Blöcke tragen. */
.lz__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-300); }
.lz__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1400ms var(--ease-out);
}
.lz:hover .lz__media img { transform: scale(1.045); }

/* Schmaler als zuvor (war 38rem): kuerzere Zeilen lesen sich besser und der
   Textblock baut Hoehe auf — sonst steht er als flacher Streifen neben dem Bild. */
.lz__body {
  padding-inline: clamp(1.5rem, 6vw, 5rem);
  max-width: 30rem;
}
.lz:nth-child(even) .lz__media { order: 2; }
.lz:nth-child(even) .lz__body { justify-self: end; }

/* Haarlinie ueber der Ueberschrift — dieselbe Kante wie bei den News-Kacheln
   weiter unten. Sie gibt dem Text eine Oberkante, statt ihn frei schweben
   zu lassen. */
.lz__body h3 {
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: 1rem;
}
.lz__body h3::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--cream-300);
}
.lz__body p { color: var(--muted); font-size: var(--fs-lead); line-height: 1.66; }

/* ==========================================================================
   9b. News
   ========================================================================== */
.news { background: var(--white); }

.news-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

/* Kurze Mitteilungen ohne Bild. Die Linie oben gibt der Kachel eine Kante —
   sonst stünde der Text ohne jeden Halt im Weiß. */
.nw {
  display: flex; flex-direction: column;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-300);
}

.nw__datum {
  display: block;
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy-200);
  margin-bottom: .875rem;
}
.nw__body h3 { margin-bottom: .75rem; }
.nw__body p { color: var(--muted); font-size: .96875rem; line-height: 1.7; }

/* Ohne Bild rückt der Text an die Oberkante und bekommt eine Haarlinie */

/* ==========================================================================
   10. Referenzen — zweizeilige, endlos laufende Bildleiste
       Kein Text, bis die Maus auf einem Bild steht.
   ========================================================================== */
.referenzen { overflow: hidden; }
.referenzen .container { position: relative; z-index: 2; }

.marquee {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex; flex-direction: column;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  /* Ränder weich auslaufen lassen */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.mq-row { overflow: hidden; }
.mq-track {
  display: flex;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  width: max-content;
  animation: mq-left var(--speed, 64s) linear infinite;
  will-change: transform;
}
.mq-row--reverse .mq-track { animation-name: mq-right; }

@keyframes mq-left  { from { transform: translate3d(0,0,0); }        to { transform: translate3d(-50%,0,0); } }
@keyframes mq-right { from { transform: translate3d(-50%,0,0); }     to { transform: translate3d(0,0,0); } }

/* Anhalten, sobald die Maus in der Leiste ist */
.marquee:hover .mq-track { animation-play-state: paused; }

.mq-item {
  position: relative; flex: none;
  width: clamp(230px, 24vw, 340px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-900);
}
/* <picture> ist nur eine Hülle um das Bild. Ohne diese Regel wäre sie ein
   Inline-Kasten, an dem sich die Prozenthöhe des Bildes nicht mehr messen
   kann — die Kachel bliebe leer. */
.mq-item picture,
.lz__media picture,
.nw__media picture,
.person__img picture { display: block; width: 100%; height: 100%; }

.mq-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.92);
  transition: transform 900ms var(--ease-out), filter 500ms var(--ease);
}
.mq-item:hover img, .mq-item:focus-visible img {
  transform: scale(1.06);
  filter: saturate(1) brightness(.42);
}

.mq-info {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1rem, 1.6vw, 1.5rem);
  color: var(--cream-200);
  opacity: 0;
  transition: opacity 380ms var(--ease);
  pointer-events: none;
}
.mq-item:hover .mq-info, .mq-item:focus-visible .mq-info { opacity: 1; }

.mq-info h3 {
  font-size: 1.0625rem; line-height: 1.22; color: var(--cream-200);
  margin-bottom: .375rem;
  transform: translateY(10px);
  transition: transform 460ms var(--ease-out) 60ms;
}
.mq-info span {
  font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 237, 232, .7);
  transform: translateY(10px);
  transition: transform 460ms var(--ease-out) 120ms;
}
.mq-item:hover .mq-info h3, .mq-item:hover .mq-info span,
.mq-item:focus-visible .mq-info h3, .mq-item:focus-visible .mq-info span { transform: none; }

/* ==========================================================================
   11. Unternehmen
   ========================================================================== */
.unternehmen { background: var(--cream-100); }
/* Feste Spaltenbreite statt halber Container: Bei 1240 px Inhalt wären die
   Porträts sonst 544 px breit und 680 px hoch — zwei Passfotos in Plakatgröße.
   Ab 980 px greift die einspaltige Fassung (siehe Abschnitt 17). */
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 21rem));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Ohne Rahmen und Fläche — nur Bild, Hairline, Text */
.person__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-300); }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 1200ms var(--ease-out); filter: saturate(.94); }
.person:hover .person__img img { transform: scale(1.04); }
.person__body { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--cream-300); }
.person__body h3 { margin-bottom: .25rem; }
.person__rolle {
  display: block; font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.25rem;
}
.person__kontakt { display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; }
.person__kontakt a { color: var(--navy-800); border-bottom: 1px solid var(--navy-200); width: fit-content; transition: border-color var(--dur) var(--ease); }
.person__kontakt a:hover { border-color: var(--navy-800); }

/* ==========================================================================
   12. Kontakt
   ========================================================================== */
.kontakt-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.kontakt-liste { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.kontakt-liste > div { display: flex; flex-direction: column; gap: .25rem; }
.kontakt-liste .k-label {
  font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(242,237,232,.5);
}
.kontakt-liste .k-wert { font-size: 1.0625rem; }
.kontakt-liste a { border-bottom: 1px solid rgba(242,237,232,.3); width: fit-content; transition: border-color var(--dur) var(--ease); }
.kontakt-liste a:hover { border-color: var(--cream-200); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-meta); font-weight: 500; letter-spacing: .02em; color: rgba(242,237,232,.75); }
/* Nur Grundlinie statt Kasten */
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem;
  color: var(--cream-200);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 237, 232, .26);
  border-radius: 0;
  padding: .75rem 0;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(242,237,232,.32); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--cream-200);
}
.field select option { color: #14243C; }

/* Objektbezug: sichtbar, aber erkennbar nicht zum Ausfüllen gedacht.
   Kein disabled — disabled-Felder werden nicht mitgesendet. */
.field--objekt input[readonly] {
  background: rgba(242, 237, 232, .07);
  border-color: rgba(242, 237, 232, .28);
  color: rgba(242, 237, 232, .92);
  font-weight: 500;
  cursor: default;
}
.field--objekt input[readonly]:focus {
  border-color: rgba(242, 237, 232, .45);
  outline: none;
}
.field--objekt label::after {
  content: " · wird mitgesendet";
  font-weight: 400;
  opacity: .55;
}
.form__hp { position: absolute; left: -9999px; }
.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; color: rgba(242,237,232,.7); }
.consent input { width: 18px; height: 18px; flex: none; margin-top: .2rem; accent-color: var(--cream-200); }
.consent a { border-bottom: 1px solid rgba(242,237,232,.35); }

.form__status { grid-column: 1 / -1; font-size: .9375rem; padding: .875rem 1rem; border-radius: 1px; }
.form__status--ok { background: rgba(242,237,232,.12); border: 1px solid rgba(242,237,232,.35); }
.form__status--err { background: rgba(220, 120, 110, .14); border: 1px solid rgba(220, 120, 110, .5); }

.map { margin-top: clamp(3rem, 6vw, 5rem); position: relative; aspect-ratio: 21 / 8; background: var(--navy-900); overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__consent {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: 2rem;
  background: var(--navy-900);
}
.map__consent p { max-width: 34rem; font-size: .9375rem; color: rgba(242,237,232,.7); }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.footer { background: var(--navy-900); color: rgba(242,237,232,.62); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(242,237,232,.14); }
/* Fußzeile trägt das Signet, nicht die Wortmarke */
.footer__logo img { width: 78px; height: auto; }
.footer__cols { display: flex; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; }
.footer__cols h4 { font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,237,232,.45); margin-bottom: 1rem; }
.footer__cols li { margin-bottom: .5rem; font-size: .9375rem; }
.footer__cols a:hover { color: var(--cream-200); }
/* Ein Kanal neben drei Kontaktwegen — zurückhaltend, aber auf Tastatur und
   Fingerkuppe erreichbar: die Fläche ist größer als das Zeichen. */
.sozial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-top: .75rem; margin-left: -10px;
  color: var(--cream-200);
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.sozial:hover, .sozial:focus-visible { opacity: 1; }

.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.75rem; font-size: .8125rem; }
.footer__bottom nav { display: flex; gap: 1.5rem; }

/* ==========================================================================
   14. Unterseiten
   ========================================================================== */
.page-hero {
  background: var(--navy-800); color: var(--cream-200);
  padding-block: calc(var(--nav-h) + clamp(4rem, 9vw, 7rem)) clamp(4rem, 9vw, 7rem);
}
.page-hero h1 { color: var(--cream-200); margin-block: 1rem 1.25rem; }
/* Ohne diese Regeln erben Eyebrow und Lead das Warmgrau für helle Flächen —
   auf dem marineblauen Grund wäre das kaum lesbar. */
.page-hero .eyebrow { color: rgba(242, 237, 232, .55); }
.page-hero .lead    { color: rgba(242, 237, 232, .78); max-width: 44rem; }
.page-hero p        { color: rgba(242, 237, 232, .78); }

.platzhalter { border: 1px dashed var(--navy-200); padding: clamp(2rem, 5vw, 3.5rem); background: var(--cream-100); }
.platzhalter h2 { margin-bottom: 1rem; }
.platzhalter ul { margin-top: 1.25rem; display: grid; gap: .625rem; }
.platzhalter li { position: relative; padding-left: 1.5rem; color: var(--muted); }
.platzhalter li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--navy-200); }

/* ==========================================================================
   14b. Objektsuche — Filter, Kacheln, Detailseite
   ========================================================================== */
.objektsuche { background: var(--cream-100); }

/* ---------- Filter ---------- */
.filter {
  background: var(--white);
  border: 1px solid var(--cream-300);
  padding: clamp(1.25rem, 2.6vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.filter__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem 1.25rem;
}
.filter__feld { display: flex; flex-direction: column; gap: .5rem; }
.filter__feld label {
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.filter__feld input, .filter__feld select {
  font: inherit; font-size: .96875rem;
  color: var(--navy-800); background: transparent;
  border: 0; border-bottom: 1px solid var(--navy-200);
  border-radius: 0; padding: .5rem 0;
  transition: border-color var(--dur) var(--ease);
}
.filter__feld input:focus, .filter__feld select:focus {
  outline: none; border-bottom-color: var(--navy-800);
}
.filter__feld input::placeholder { color: var(--navy-200); }

.filter__fuss {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--cream-300);
}
.filter__zuruecksetzen {
  font-size: .875rem; color: var(--muted);
  border-bottom: 1px solid var(--navy-200);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter__zuruecksetzen:hover { color: var(--navy-800); border-color: var(--navy-800); }

.filter__sort { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.filter__sort label {
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.filter__sort select {
  font: inherit; font-size: .9375rem; color: var(--navy-800);
  background: transparent; border: 0; border-bottom: 1px solid var(--navy-200);
  padding: .375rem 0;
}
.filter__sort select:focus { outline: none; border-bottom-color: var(--navy-800); }

.treffer { font-size: .9375rem; color: var(--muted); margin-bottom: 1.75rem; }
.treffer strong { color: var(--navy-800); font-weight: 500; }

/* ---------- Objektkacheln ---------- */
.obj-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.obj__link { display: block; height: 100%; }
.obj__media {
  position: relative; aspect-ratio: 4 / 3;
  overflow: hidden; background: var(--cream-300);
}
/* Formatfüllend: Das Bild wird so weit vergrößert, bis der Rahmen gefüllt ist,
   und an den Kanten beschnitten — nie eingepasst mit Rändern. min-width/height
   fangen den Fall ab, dass ein Bild kleiner als der Rahmen geliefert wird. */
.obj__media img {
  width: 100%; height: 100%;
  min-width: 100%; min-height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 1200ms var(--ease-out);
}
.obj:hover .obj__media img { transform: scale(1.05); }
.obj__kein-bild { width: 100%; height: 100%; background: var(--cream-300); }

.obj__marke {
  position: absolute; left: 0; bottom: 0;
  background: var(--navy-800); color: var(--cream-200);
  font-size: .625rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .5rem .875rem;
}

.obj__body { padding-top: 1.375rem; }
.obj__ort {
  display: block; font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .75rem;
}
.obj__body h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: .875rem; }
.obj__preis {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: 1rem;
}
.obj__daten {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  padding-top: .875rem; border-top: 1px solid var(--cream-300);
  font-size: .875rem; color: var(--muted);
}
.obj__daten b { font-weight: 500; color: var(--navy-800); }

.blaettern {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.blaettern__stand { font-size: .875rem; color: var(--muted); }

/* ---------- Detailseite ---------- */
.page-hero--objekt { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.zurueck {
  display: inline-block; margin-bottom: 1.5rem;
  font-size: .875rem; color: rgba(242, 237, 232, .7);
  border-bottom: 1px solid rgba(242, 237, 232, .3);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.zurueck:hover { color: var(--cream-200); border-color: var(--cream-200); }

/* --- Objektgalerie -------------------------------------------------------
   Randabfallende Bildleiste mit Einrastpunkten. Das Schieben erledigt der
   Browser (scroll-snap): Ohne JavaScript bleibt die Galerie bedienbar, per
   Wischen, Trackpad oder Tastatur. main.js legt nur Pfeile und Zaehler dazu.  */
/* Am Schreibtisch so breit wie der Textblock darunter — also genau die
   Innenmaße von .container, nur ohne dessen Polster, damit die Bilder bündig
   mit Text und Faktenkasten abschließen. Am Telefon läuft sie über die volle
   Breite (siehe Abschnitt 17). Die Galerie steht deshalb ausserhalb von
   .container: sonst liesse sich der Rand hochkant nicht auflösen. */
.og {
  position: relative;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--container) - 2 * var(--gutter));
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  background: var(--cream-200);
}

/* Raster statt Flexbox: grid-auto-columns: 100% legt jede Spalte auf die
   volle Breite der Spur fest — unabhängig davon, wie der Browser den Inhalt
   misst. Mit flex-basis: 100% hing die Breite an der Berechnung des
   Flexrahmens, und auf schmalen Schirmen rutschten die Bilder untereinander. */
.og__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.og__spur::-webkit-scrollbar { display: none; }
.og__spur:focus-visible { outline: 2px solid var(--navy-800); outline-offset: -4px; }

.og__bild {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  aspect-ratio: 16 / 9;
  /* Nur eine Notbremse für sehr breite, flache Fenster. Enger gefasst
     würde der Rahmen die Fotos zusätzlich beschneiden. */
  max-height: 88vh;
  background: var(--cream-300);
}
.og__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ein einziges Bild braucht weder Einrasten noch Pfeile. */
.og--einzeln .og__spur { overflow: hidden; }

.og__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  font-size: 1.125rem; line-height: 1;
  color: var(--cream-200);
  background: rgba(17, 32, 56, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.og__pfeil:hover { background: rgba(17, 32, 56, .85); }
.og__pfeil:focus-visible { outline: 2px solid var(--cream-200); outline-offset: 3px; }
.og__pfeil[disabled] { opacity: .3; cursor: default; }
.og__pfeil--zurueck { left: 0; }
.og__pfeil--vor { right: 0; }

.og__zaehler {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: .5rem 1rem;
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .18em;
  color: var(--cream-200);
  background: rgba(17, 32, 56, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .og__spur { scroll-behavior: auto; }
}

.od-gitter { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.od-text h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-block: 2rem 1rem; }
.od-text h2:first-child { margin-top: 0; }
.od-text p { color: var(--muted); margin-bottom: 1rem; }
.od-text ul, .od-text ol { margin: 1rem 0 1rem 1.25rem; color: var(--muted); }
.od-text li { margin-bottom: .375rem; list-style: disc; }

.od-fakten {
  background: var(--cream-200);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  position: sticky; top: calc(var(--nav-h) + 1.5rem);
}
.od-preis {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1;
  letter-spacing: -.015em;
  padding-bottom: 1.25rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--cream-300);
}
.od-liste { display: grid; grid-template-columns: auto 1fr; gap: .625rem 1.5rem; font-size: .9375rem; }
.od-liste dt { color: var(--muted); }
.od-liste dd { font-weight: 500; text-align: right; }
.od-anfrage { margin-top: 1.75rem; width: 100%; justify-content: center; }
.od-hinweis { font-size: .75rem; color: var(--muted); margin-top: 1.25rem; line-height: 1.5; }

@media (max-width: 980px) {
  .obj-gitter { grid-template-columns: repeat(2, 1fr); }
  .od-gitter { grid-template-columns: 1fr; }
  .od-fakten { position: static; }
  /* Hochkant über die volle Bildschirmbreite, mit etwas mehr Luft zur
     Überschrift darunter — randabfallend rückt das Bild sonst zu nah heran. */
  .og { width: 100%; max-width: none; margin-bottom: clamp(3.25rem, 12vw, 5rem); }
  /* 16:9 wirkt hier wie ein Streifen — etwas mehr Höhe tut den Fotos gut. */
  .og__bild { aspect-ratio: 3 / 2; }
  .og__pfeil { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 640px) {
  .obj-gitter { grid-template-columns: 1fr; }
  .filter__sort { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   14c. Investment — Icons statt Fotos
   ========================================================================== */
.anlage { background: var(--cream-100); }

/* ---------- Kategoriefilter ---------- */
.kat-filter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.75rem, 1.4vw, 1rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.kat {
  display: flex; flex-direction: column; align-items: center; gap: .625rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) 1rem;
  background: var(--white);
  border: 1px solid var(--cream-300);
  color: var(--muted);
  text-align: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease), transform 400ms var(--ease-out);
}
.kat:hover { border-color: var(--navy-200); color: var(--navy-800); transform: translateY(-3px); }
.kat--aktiv { background: var(--navy-800); border-color: var(--navy-800); color: var(--cream-200); }
.kat--aktiv:hover { color: var(--cream-200); }
.kat--leer { opacity: .55; }

.kat .anlage-icon { width: 40px; height: 40px; }
.kat__name { font-size: .875rem; font-weight: 500; letter-spacing: .01em; line-height: 1.3; }
.kat__zahl {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  opacity: .6;
}
/* „Alle" hat kein Icon — Höhe trotzdem angleichen */
.kat:first-child { justify-content: center; }

/* ---------- Objektliste ---------- */
.anl-liste { display: flex; flex-direction: column; }

.anl {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.2vw, 2.5rem);
  border-top: 1px solid var(--cream-300);
}
.anl:last-child { border-bottom: 1px solid var(--cream-300); }

.anl__icon {
  display: grid; place-items: center;
  width: 88px; height: 88px;
  border: 1px solid var(--cream-300);
  background: var(--white);
  color: var(--navy-800);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.anl:hover .anl__icon { border-color: var(--navy-200); background: var(--cream-200); }
.anl__icon .anlage-icon { width: 52px; height: 52px; }

.anl__kat {
  display: block;
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .75rem;
}
.anl__status {
  display: inline-block; margin-left: .5rem;
  border: 1px solid var(--navy-200); border-radius: 100px;
  padding: .125rem .625rem;
  letter-spacing: .12em;
}
.anl__body h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); margin-bottom: .75rem; }
.anl__body p { color: var(--muted); line-height: 1.7; max-width: 52ch; }

.anl__mehr {
  display: inline-block; margin-top: 1rem;
  font-size: .875rem; font-weight: 500;
  border-bottom: 1px solid var(--navy-200);
  transition: border-color var(--dur) var(--ease);
}
.anl__mehr:hover { border-color: var(--navy-800); }

.anl__zahlen {
  display: flex; flex-direction: column; align-items: flex-end; gap: .375rem;
  text-align: right; min-width: 11rem;
}
.anl__preis {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -.01em; line-height: 1.1;
}
.anl__preis--anfrage { font-size: 1.0625rem; color: var(--muted); }
.anl__flaeche { font-size: .875rem; color: var(--muted); }
.anl__anfrage { margin-top: .875rem; }

.anl-hinweis {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cream-200);
  border-left: 2px solid var(--navy-800);
}
.anl-hinweis p { color: var(--muted); max-width: 60ch; }
.anl-hinweis strong { color: var(--navy-800); font-weight: 500; }

@media (max-width: 980px) {
  .kat-filter { grid-template-columns: repeat(3, 1fr); }
  .anl { grid-template-columns: 64px 1fr; }
  .anl__icon { width: 64px; height: 64px; }
  .anl__icon .anlage-icon { width: 38px; height: 38px; }
  .anl__zahlen {
    grid-column: 2; align-items: flex-start; text-align: left;
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--cream-300); width: 100%;
  }
  .anl__anfrage { margin-top: 1rem; }
}
@media (max-width: 560px) {
  .kat-filter { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   15. Rechtsseiten
   ========================================================================== */
.legal { max-width: 46rem; }
.legal h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--cream-300);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { margin-top: 1rem; color: var(--muted); }
.legal ul { margin-top: 1rem; display: grid; gap: .5rem; }
.legal li { position: relative; padding-left: 1.5rem; color: var(--muted); }
.legal li::before { content: ''; position: absolute; left: 0; top: .75em; width: 8px; height: 1px; background: var(--navy-200); }
.legal a { border-bottom: 1px solid var(--navy-200); transition: border-color var(--dur) var(--ease); }
.legal a:hover { border-color: var(--navy-800); }
.legal .adr { margin-top: 1rem; line-height: 1.8; color: var(--muted); }
.legal .adr strong { color: var(--fg); font-weight: 500; }
.legal .stand { margin-top: 3rem; font-size: .8125rem; color: var(--navy-200); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em; background: var(--cream-200);
  padding: .1em .4em; border-radius: 2px;
}
/* Schaltfläche, die wie ein Textlink aussehen soll */
.legal-link {
  color: inherit; font: inherit;
  border-bottom: 1px solid var(--navy-200);
  transition: border-color var(--dur) var(--ease);
}
.legal-link:hover { border-color: var(--navy-800); }
.footer__bottom nav button {
  font: inherit; color: inherit;
  transition: color var(--dur) var(--ease);
}
.footer__bottom nav button:hover { color: var(--cream-200); }

/* ==========================================================================
   16. Cookie-Banner
   ========================================================================== */
.cc {
  position: fixed;
  left: var(--gutter); bottom: var(--gutter);
  z-index: 200;
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  background: var(--navy-800);
  color: var(--cream-200);
  border: 1px solid rgba(242, 237, 232, .16);
  padding: clamp(1.5rem, 2.4vw, 1.875rem);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6);
  transform: translateY(calc(100% + var(--gutter) + 2rem));
  opacity: 0;
  transition: transform 700ms var(--ease-out), opacity 500ms var(--ease);
}
.cc.is-open { transform: none; opacity: 1; }
.cc[hidden] { display: none; }

.cc__title {
  font-family: var(--serif); font-weight: 300;
  font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em;
  margin-bottom: .75rem;
}
.cc__text { font-size: .875rem; line-height: 1.65; color: rgba(242, 237, 232, .74); }
.cc__text a { border-bottom: 1px solid rgba(242, 237, 232, .35); }
.cc__text a:hover { border-color: var(--cream-200); }

/* Annehmen und Ablehnen bewusst gleich gewichtet */
.cc__actions { display: flex; gap: .625rem; margin-top: 1.375rem; }
.cc__btn {
  flex: 1 1 0;
  justify-content: center;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500;
  padding: .9375rem 1rem;
  border: 1px solid rgba(242, 237, 232, .55);
  color: var(--cream-200);
  border-radius: 1px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cc__btn:hover { background: var(--cream-200); color: var(--navy-800); border-color: var(--cream-200); }

.cc__more {
  display: inline-block; margin-top: 1rem;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242, 237, 232, .6);
  border-bottom: 1px solid rgba(242, 237, 232, .3);
  padding-bottom: 2px;
}
.cc__more:hover { color: var(--cream-200); border-color: var(--cream-200); }

/* Detaileinstellungen */
.cc__details { margin-top: 1.5rem; border-top: 1px solid rgba(242, 237, 232, .16); padding-top: 1.25rem; }
.cc__details[hidden] { display: none; }

.cc__cat { display: flex; gap: 1rem; align-items: flex-start; padding-block: .875rem; }
.cc__cat + .cc__cat { border-top: 1px solid rgba(242, 237, 232, .1); }
.cc__cat h3 { font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: .01em; color: var(--cream-200); }
.cc__cat p { font-size: .8125rem; line-height: 1.55; color: rgba(242, 237, 232, .6); margin-top: .25rem; }

/* Schalter */
.cc__sw { flex: none; position: relative; width: 42px; height: 24px; margin-top: .125rem; }
.cc__sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc__sw span {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(242, 237, 232, .16);
  border: 1px solid rgba(242, 237, 232, .3);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  pointer-events: none;
}
.cc__sw span::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream-200);
  transition: transform var(--dur) var(--ease);
}
.cc__sw input:checked + span { background: var(--cream-200); border-color: var(--cream-200); }
.cc__sw input:checked + span::after { transform: translateX(18px); background: var(--navy-800); }
.cc__sw input:disabled + span { opacity: .45; }
.cc__sw input:disabled { cursor: default; }
.cc__sw input:focus-visible + span { outline: 2px solid var(--cream-200); outline-offset: 3px; }

.cc__save { margin-top: 1.25rem; width: 100%; justify-content: center; }

@media (max-width: 560px) {
  .cc { left: 0; right: 0; bottom: 0; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; }
  .cc__actions { flex-direction: column; }
}

/* ==========================================================================
   17. Responsiv
   ========================================================================== */
@media (max-width: 980px) {
  .news-liste { grid-template-columns: 1fr; gap: 2.5rem; }
  .lz { grid-template-columns: 1fr; }
  .lz__media { aspect-ratio: 16 / 10; }
  .lz:nth-child(even) .lz__media { order: 0; }
  .lz__body { padding-inline: var(--gutter); padding-top: 1.75rem; max-width: none; }
  .lz-list { gap: clamp(3rem, 8vw, 4.5rem); }
  .team { grid-template-columns: 1fr; gap: 3rem; }
  .person__img { aspect-ratio: 3 / 2; }
  .kontakt-grid { grid-template-columns: 1fr; }
  .map { aspect-ratio: 4 / 3; }
}

/* Ab hier wird es eng: Buttons weichen dem Menü, Logo bleibt mittig */
@media (max-width: 1080px) {
  .bb-act.btn { font-size: .625rem; padding: .75rem 1rem; letter-spacing: .07em; }
  .bb-act.btn .arrow { display: none; }
  .brandbar__logo { --logo-bar: 168px; }
}

@media (max-width: 900px) {
  :root { --nav-h: 74px; }

  /* Das Logo wandert hier nicht mit, sondern klebt von Anfang an oben.
     Deshalb entfällt der Platzhalter im Hero — sonst bliebe dort eine Lücke. */
  .hero__slot--logo { display: none; }
  .hero { padding-block: calc(var(--nav-h) + 1.5rem) 3.5rem; }

  /* Die Leiste ist von der ersten Sekunde an lesbar, weil das Logo
     dauerhaft darin sitzt. */
  .brandbar__bg { opacity: max(var(--bg-o, 0), .18); }
  .brandbar__logo { --logo-bar: 148px; }

  /* Die beiden Schaltflächen sind zusammen breiter als der Schirm. Blieben sie
     im Raster, schöbe die rechte Spalte sich aus dem Bild — und den Menüknopf
     gleich mit. Dann gäbe es auf einer Unterseite gar keine Navigation mehr.
     Deshalb hängen sie hier aus dem Raster aus: Das Logo steht mittig, der
     Menüknopf am Rand. */
  .brandbar__inner { grid-template-columns: 1fr; }
  .bb-left, .bb-right {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    justify-self: auto;
  }

  /* Auf der Startseite leben die beiden Schaltflächen im Hero — main.js
     verschiebt sie dorthin. Auf jeder anderen Seite gibt es keinen Hero,
     also auch keinen Platz für sie; dort führt das Menü zu denselben zwei
     Zielen. */
  body:not(.ist-start) .bb-act { display: none; }

  /* Der Menüknopf ist auf schmalen Schirmen der einzige Weg durch die Seite.
     Er hängt deshalb nicht mehr an einer Variablen, die JavaScript setzt —
     bleibt das aus, wäre die Seite unbedienbar. */
  .brandbar__burger {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }

  .hero__actions { flex-direction: column; gap: .875rem; }
  .hero__text { font-size: 1rem; }
  .mq-item { width: clamp(190px, 46vw, 260px); }

  /* Menü: dieselben zwei Wege wie am Schreibtisch, nichts sonst */
  .drawer { padding-block: 1rem 1.75rem; gap: .75rem; }
  .drawer a {
    border: 1px solid rgba(242, 237, 232, .4);
    border-radius: 1px;
    padding: 1rem 1.25rem;
    text-align: center;
    font-size: .8125rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
  }
  /* Beide Wege gleich gewichtet — im Menü gibt es keinen Grund, einen davon
     zurückzunehmen. */
  .drawer a { background: var(--cream-200); color: var(--navy-800); border-color: var(--cream-200); }
}

@media (max-width: 700px) {
  .form { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-split] .ln > i { transform: none; }
  .hero__cue span { animation: none; }
  .mq-track { animation: none !important; }
  .hero__claim, .hero__text { animation: none; }
}