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

:root {
  --bg: #fcfcfc;
  --bg-tint: #e7edf4;
  --bg-leise: #f1f4f8;
  --dunkel: #0b1a30;
  --dunkel-linie: #29394f;
  --marke: #174891;
  --marke-hell: #2f6ac4;
  --text: #0b1a30;
  --text-hell: #fcfcfc;
  --text-gedeckt: #5a6472;
  --text-leise: #97a0ad;
  --linie: #e4e6ea;

  --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --mass-xs: 12px;
  --mass-sm: 18px;
  --mass-md: 20px;
  --mass-lg: 24px;
  --mass-xl: 40px;
  --mass-2xl: 48px;
  --mass-3xl: 96px;
  --mass-4xl: 128px;

  --rund-sm: 4px;
  --rund-md: 12px;
  --rund-bild: 24px;
  --rund-voll: 999px;

  --kopf-hoehe: 80px;
  --ease: cubic-bezier(.25, 1, .5, 1);
  --ease-weit: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 820px) {
  :root { --kopf-hoehe: 64px; }
}

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

/* Ohne das legt iOS beim Tippen ein graues Rechteck über Knopf und Link */
html { -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--schrift);
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::selection { background: var(--marke); color: #fff; }

:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 3px;
  border-radius: var(--rund-sm);
}

/* Typo-Grundraster: groß läuft eng, klein läuft weit */
.titel-xl {
  font-weight: 500;
  font-size: clamp(38px, 6.6vw, 92px);
  line-height: .95;
  letter-spacing: -.045em;
}

.titel-l {
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1;
  letter-spacing: -.04em;
}

.fliess {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-gedeckt);
}

.fliess + .fliess { margin-top: 1.1em; }

/* Buttons */
.pille {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--rund-voll);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.pille > span { position: relative; z-index: 1; }

.pille--dunkel { background: var(--dunkel); color: var(--text-hell); }
.pille--glas { background: rgba(11, 26, 48, .08); backdrop-filter: blur(10px); color: var(--text); }
.pille--hell { background: var(--bg); color: var(--text); }

@media (pointer: fine) {
  .pille::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--marke);
    opacity: 0;
    transition: opacity .3s var(--ease);
  }
  .pille:hover::before { opacity: 1; }
  .pille:hover { color: var(--text-hell); }
}

/* Kopfzeile */
.kopfzeile {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mass-lg);
  z-index: 20;
  background: transparent;
  transform: translate3d(0, -100%, 0);
  transition: transform 1.1s var(--ease), background-color .3s var(--ease);
}

.js .kopfzeile.ist-da,
html:not(.js) .kopfzeile { transform: translateZ(0); }

.kopfzeile__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 18px 0;
}

.kopfzeile__logo img { width: 126px; height: auto; }
.kopfzeile__logo .logo--weiss { display: none; }

.kopfzeile__aktion { display: flex; align-items: center; gap: 10px; }

/* Startseite: über dem Hero trägt die Kopfzeile das weiße Logo */
.js .kopfzeile.ueber-hero:not(.menue-offen) .kopfzeile__logo .logo--blau { display: none; }
.js .kopfzeile.ueber-hero:not(.menue-offen) .kopfzeile__logo .logo--weiss { display: block; }
.js .kopfzeile.ueber-hero:not(.menue-offen) .menue-knopf span::before,
.js .kopfzeile.ueber-hero:not(.menue-offen) .menue-knopf span::after { background: var(--text-hell); }

/* Bei offenem Drawer ist die Kopfzeile weiß -> Logo blau, X dunkel */
.kopfzeile.menue-offen { background: var(--bg); }

/* Menü-Knopf (zwei Striche) + Drawer */
.menue-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  position: relative;
  z-index: 21;
}

.menue-knopf span { position: relative; display: block; width: 26px; height: 8px; }

.menue-knopf span::before,
.menue-knopf span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}

.menue-knopf span::before { top: 0; }
.menue-knopf span::after { top: 6px; }

.menue-knopf[aria-expanded="true"] span::before { transform: translateY(3px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span::after { transform: translateY(-3px) rotate(-45deg); }

.mobilnav {
  position: fixed;
  inset: 0;
  z-index: 19;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), visibility 0s .3s;
}

.mobilnav.ist-offen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s var(--ease);
}

.mobilnav__feld {
  position: absolute;
  inset: 0;
  background: var(--bg);
  padding: calc(var(--kopf-hoehe) + var(--mass-2xl)) var(--mass-2xl) var(--mass-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-weit);
}

.mobilnav.ist-offen .mobilnav__feld { clip-path: inset(0 0 0 0); }

.mobilnav__feld > a {
  padding: 24px 0;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
  border-bottom: 1px solid var(--linie);
  opacity: 0;
  transform: translateY(30px);
  transition: color .3s var(--ease), opacity .55s var(--ease-weit), transform .55s var(--ease-weit);
}

.mobilnav__feld > a:last-of-type { border-bottom: 0; }
.mobilnav__feld > a[aria-current="page"] { color: var(--marke); }

@media (pointer: fine) {
  .mobilnav__feld > a:hover { color: var(--marke); }
}

.mobilnav__aktion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--mass-2xl);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .55s var(--ease-weit), transform .55s var(--ease-weit);
}

.mobilnav.ist-offen .mobilnav__feld > a,
.mobilnav.ist-offen .mobilnav__aktion { opacity: 1; transform: none; }

.mobilnav.ist-offen .mobilnav__feld > a:nth-child(1) { transition-delay: .14s; }
.mobilnav.ist-offen .mobilnav__feld > a:nth-child(2) { transition-delay: .20s; }
.mobilnav.ist-offen .mobilnav__feld > a:nth-child(3) { transition-delay: .26s; }
.mobilnav.ist-offen .mobilnav__feld > a:nth-child(4) { transition-delay: .32s; }
.mobilnav.ist-offen .mobilnav__aktion { transition-delay: .4s; }
.mobilnav__aktion .pille { width: 100%; max-width: 320px; height: 52px; }

@media (max-width: 820px) {
  .mobilnav__feld { padding: calc(var(--kopf-hoehe) + var(--mass-xl)) var(--mass-lg) var(--mass-2xl); }
  .mobilnav__aktion .pille { max-width: none; }
}

@media (max-width: 820px) {
  .kopfzeile { padding: 0 12px; }
  .kopfzeile__logo img { width: 102px; }
  .kopfzeile__aktion .pille { display: none; }
}

/* Bühne (Startseite): Foto liegt fest, Inhalt scrollt darüber */
.buehne-bild {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--dunkel) url("../img/hero-1672.jpg") center / cover no-repeat;
}

/* schmaler Ausschnitt: etwas nach rechts, sonst steht die Gebäudekante am Rand */
@media (max-width: 700px) {
  .buehne-bild { background-position: 58% center; }
}

/* Dunkelblauer Schleier in der Markenfarbe, unten dichter für die Schrift */
.buehne-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 26, 48, .30) 0%, rgba(11, 26, 48, .28) 45%, rgba(11, 26, 48, .62) 100%),
    rgba(11, 26, 48, .42);
}

.buehne {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 140px var(--mass-lg) var(--mass-2xl);
  color: var(--text-hell);
}

.buehne__inhalt { display: flex; flex-direction: column; align-items: center; gap: var(--mass-lg); }
.buehne__titel span { display: block; }

.buehne__aktion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: var(--mass-sm);
}
.buehne__aktion .pille--glas {
  background: rgba(11, 26, 48, .28);
  color: var(--text-hell);
  box-shadow: inset 0 0 0 1px rgba(252, 252, 252, .38);
}
@media (pointer: fine) { .buehne__aktion .pille--glas:hover { color: var(--text-hell); } }

/* Abschnitte */
.abschnitt { padding: var(--mass-4xl) var(--mass-2xl); background: var(--bg); }
.abschnitt--leise { background: var(--bg-leise); }
.abschnitt--schmal { padding-top: var(--mass-3xl); padding-bottom: var(--mass-3xl); }

.abschnitt__kopf { max-width: 760px; margin-bottom: var(--mass-3xl); }
.abschnitt__kopf .fliess { margin-top: var(--mass-lg); }

.eyebrow {
  display: block;
  margin-bottom: var(--mass-lg);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marke);
}

@media (max-width: 820px) {
  .abschnitt { padding: 64px var(--mass-lg); }
  .abschnitt__kopf { margin-bottom: 48px; }
}

/* Leistungsspalten: 1px-Linie statt Karten */
.saeulen { display: flex; gap: var(--mass-xl); }

.saeule {
  flex: 1;
  min-width: 0;
  padding-left: var(--mass-lg);
  border-left: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: var(--mass-md);
}

.saeule h3 { font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.saeule p { font-size: 16px; line-height: 1.5; color: var(--text-gedeckt); }

@media (max-width: 1100px) {
  .saeulen { flex-wrap: wrap; gap: 32px; }
  .saeule { flex: 1 1 calc(50% - 16px); min-width: 240px; }
}

@media (max-width: 700px) {
  .saeulen { flex-direction: column; gap: 0; }
  .saeule {
    flex: 1 1 100%;
    padding: 0 0 32px;
    border-left: 0;
    border-bottom: 1px solid var(--linie);
    margin-bottom: 32px;
  }
  .saeule:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
}

/* Bild + Text nebeneinander */
.duo { display: flex; align-items: center; gap: 96px; }

.duo__bild {
  flex: 1 1 55%;
  border-radius: var(--rund-bild);
  overflow: hidden;
  background: var(--marke);
  aspect-ratio: 8 / 5;
}

.duo__bild img { width: 100%; height: 100%; object-fit: cover; }

.duo__text { flex: 1 1 45%; display: flex; flex-direction: column; gap: var(--mass-lg); }
.duo__text .pille { align-self: flex-start; margin-top: var(--mass-md); }

@media (max-width: 1000px) {
  .duo { flex-direction: column; gap: 40px; align-items: stretch; }
  .duo__bild { aspect-ratio: 2 / 1; border-radius: var(--rund-md); }
}

/* Aufklapp-Liste (Leistungen, Fragen) */
.klapp { border-top: 1px solid var(--linie); }
.klapp__punkt { border-bottom: 1px solid var(--linie); }

.klapp__kopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mass-lg);
  padding: 32px 0;
  text-align: left;
}

.klapp__titel {
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -.025em;
  transition: color .3s var(--ease);
}

.klapp__zeichen {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--dunkel);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .klapp__zeichen {
    background: linear-gradient(155deg, rgba(252, 252, 252, .75), rgba(231, 237, 244, .35));
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
      inset 0 1px 1px rgba(252, 252, 252, .9),
      inset 0 0 0 1px rgba(11, 26, 48, .1),
      0 6px 16px -8px rgba(11, 26, 48, .45);
  }

  .klapp__punkt.ist-offen .klapp__zeichen {
    background: linear-gradient(155deg, rgba(47, 106, 196, .5), rgba(23, 72, 145, .28));
    box-shadow:
      inset 0 1px 1px rgba(252, 252, 252, .75),
      inset 0 0 0 1px rgba(23, 72, 145, .35),
      0 8px 20px -8px rgba(23, 72, 145, .55);
  }

  .klapp__punkt.ist-offen .klapp__zeichen::before,
  .klapp__punkt.ist-offen .klapp__zeichen::after { background: var(--marke); }

  @media (pointer: fine) {
    .klapp__kopf:hover .klapp__zeichen {
      background: linear-gradient(155deg, rgba(252, 252, 252, .9), rgba(47, 106, 196, .22));
      box-shadow:
        inset 0 1px 1px rgba(252, 252, 252, .95),
        inset 0 0 0 1px rgba(23, 72, 145, .3),
        0 10px 22px -10px rgba(23, 72, 145, .5);
    }
    .klapp__kopf:hover .klapp__zeichen::before,
    .klapp__kopf:hover .klapp__zeichen::after { background: var(--marke); }
  }
}

.klapp__zeichen::before,
.klapp__zeichen::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--text-hell);
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease);
}

.klapp__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .klapp__zeichen::before,
  .klapp__zeichen::after { background: var(--dunkel); }
}

.klapp__punkt.ist-offen .klapp__zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }

@media (pointer: fine) {
  .klapp__kopf:hover .klapp__titel { color: var(--marke); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .klapp__punkt.ist-offen .klapp__zeichen { background: var(--marke); }
  @media (pointer: fine) {
    .klapp__kopf:hover .klapp__zeichen { background: var(--marke); }
  }
}

.klapp__koerper {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s var(--ease);
}

html:not(.js) .klapp__koerper { max-height: none; }

.klapp__innen { padding-bottom: 40px; max-width: 820px; }
.klapp__innen .fliess + ul { margin-top: var(--mass-lg); }

.klapp__liste { display: flex; flex-direction: column; gap: 12px; }

.klapp__liste li {
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-gedeckt);
}

.klapp__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--marke);
}

/* Link-Karten */
.karten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }

.karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  background: var(--bg);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.karte h3 { font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.karte p { font-size: 15px; line-height: 1.5; color: var(--text-gedeckt); transition: color .3s var(--ease); }
.karte__pfeil { margin-top: auto; padding-top: 20px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--marke); transition: color .3s var(--ease); }

@media (pointer: fine) {
  a.karte:hover { background: var(--marke); color: var(--text-hell); }
  a.karte:hover p,
  a.karte:hover .karte__pfeil { color: rgba(252, 252, 252, .8); }
}

@media (max-width: 820px) {
  .karten { grid-template-columns: 1fr; }
  .karte { padding: 24px; }
}

/* Dunkler Schlussruf */
.schlussruf {
  background: var(--dunkel);
  color: var(--text-hell);
  padding: var(--mass-4xl) var(--mass-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--mass-2xl);
  border-bottom: 1px solid var(--dunkel-linie);
}

.schlussruf__titel span { display: block; }
.schlussruf p { max-width: 620px; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.3; color: #9fb0c6; }
.schlussruf__aktion { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 820px) {
  .schlussruf { padding: 64px var(--mass-lg); gap: 32px; }
}

/* Fußzeile */
.fuss { background: var(--dunkel); color: var(--text-hell); }

.fuss__wege { display: flex; border-bottom: 1px solid var(--dunkel-linie); }

.fuss__weg {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mass-lg);
  height: 180px;
  padding: 0 var(--mass-2xl);
  border-right: 1px solid var(--dunkel-linie);
  overflow: hidden;
}

.fuss__weg:last-child { border-right: 0; }

.fuss__weg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease);
}

.fuss__weg > * {
  position: relative;
  z-index: 1;
  transition: transform .7s var(--ease), color .7s var(--ease);
}

.fuss__weg span {
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: -.03em;
}

.fuss__weg .fuss__pfeil { font-size: 26px; }

@media (pointer: fine) {
  .fuss__weg:hover::before { transform: scaleX(1); }
  .fuss__weg:hover span { color: var(--dunkel); transform: translateX(10px); }
  .fuss__weg:hover .fuss__pfeil { color: var(--dunkel); transform: translateX(6px); }
}

.fuss__boden { padding: var(--mass-2xl) var(--mass-2xl) var(--mass-lg); display: flex; flex-direction: column; gap: var(--mass-2xl); }
.fuss__logo { margin-top: var(--mass-lg); }
.fuss__logo img { width: 100%; display: block; }

.fuss__meta {
  display: flex;
  align-items: center;
  gap: var(--mass-lg);
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-leise);
}

.fuss__meta a { position: relative; padding: 8px 0; color: var(--text-hell); }

.fuss__meta a::after {
  content: "";
  position: absolute;
  inset: auto 0 5px 0;
  height: 1px;
  background: var(--marke-hell);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease);
}

@media (pointer: fine) {
  .fuss__meta a:hover::after { transform: scaleX(1); }
}

.fuss__meta .fuss__ort { margin-right: auto; }

/* eigene Zeile unter den Rechtslinks, damit die Wortmarke mittig steht */
.fuss__bau {
  width: fit-content;
  margin: 14px auto 0;
  display: flex;
  justify-content: center;
  padding: 14px 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 26px rgba(0, 0, 0, .22);
  opacity: .85;
  transition: opacity .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}

/* der Unterstrich der Textlinks würde sich sonst über die ganze Zeile ziehen */
.fuss__meta .fuss__bau::after { content: none; }
/* schlägt das Zeilen-Padding der Fußlinks, sonst klebt die Pille am Bild */
.fuss__meta .fuss__bau { padding: 22px 68px; }
/* die Wortmarke liegt schwarz mit Alphakanal vor und wird für den dunklen Fuß umgedreht */
.fuss__bau img { display: block; width: 330px; height: auto; filter: brightness(0) invert(1); }

@media (pointer: fine) {
  .fuss__bau:hover { opacity: 1; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); }
}

@media (max-width: 820px) {
  .fuss__wege { flex-direction: column; }
  .fuss__weg { height: 76px; padding: 0 var(--mass-lg); border-right: 0; border-bottom: 1px solid var(--dunkel-linie); }
  .fuss__weg:last-child { border-bottom: 0; }
  .fuss__boden { padding: var(--mass-2xl) var(--mass-lg) var(--mass-lg); }
  .fuss__meta .fuss__ort { margin-right: 0; width: 100%; }
  .fuss__meta .fuss__bau { margin-top: 14px; padding: 16px 34px; }
  .fuss__bau img { width: 230px; }
}

/* Unterseiten-Kopf */
.unterkopf {
  padding: calc(var(--kopf-hoehe) + 96px) var(--mass-2xl) var(--mass-3xl);
  border-bottom: 1px solid var(--linie);
}

.unterkopf__inhalt { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; flex-wrap: wrap; }
.unterkopf__lead { max-width: 620px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; color: var(--text-gedeckt); }

.unterkopf__bild {
  margin-top: var(--mass-3xl);
  border-radius: var(--rund-bild);
  overflow: hidden;
  background: var(--marke);
  aspect-ratio: 8 / 3;
}

.unterkopf__bild img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 820px) {
  .unterkopf { padding: calc(var(--kopf-hoehe) + 48px) var(--mass-lg) 48px; }
  .unterkopf__bild { margin-top: 40px; aspect-ratio: 3 / 2; border-radius: var(--rund-md); }
}

/* Kontakt */
.kontakt-raster { display: flex; gap: 96px; flex-wrap: wrap; }
.kontakt-block { display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.kontakt-block h2 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--marke); margin-bottom: 12px; }
.kontakt-block p, .kontakt-block a { font-size: 19px; line-height: 1.5; }
.kontakt-block a { position: relative; }
.kontakt-block a::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: var(--marke);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease);
}
@media (pointer: fine) { .kontakt-block a:hover::after { transform: scaleX(1); } }

@media (max-width: 820px) { .kontakt-raster { gap: 48px; } }

.lageplan { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mass-xl); }

.lageplan__karte {
  width: 100%;
  aspect-ratio: 8 / 3;
  height: auto;
  border: 0;
  display: block;
  border-radius: var(--rund-bild);
  background: var(--marke);
}

.lageplan__freigabe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mass-lg);
  padding: var(--mass-xl);
  text-align: center;
  background: var(--bg-leise);
  border: 1px solid var(--linie);
}

.lageplan__hinweis { max-width: 480px; font-size: 15px; line-height: 1.6; color: var(--text-gedeckt); }
.lageplan__hinweis a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lageplan__knopf { border: 0; font: inherit; cursor: pointer; }

@media (max-width: 1000px) {
  .lageplan__karte { aspect-ratio: 3 / 2; border-radius: var(--rund-md); }
  .lageplan__freigabe { padding: var(--mass-lg); }
}

.einwilligung {
  position: fixed;
  left: var(--mass-lg);
  right: var(--mass-lg);
  bottom: var(--mass-lg);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--mass-xl);
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 26px;
  border-radius: var(--rund-md);
  background: var(--dunkel);
  color: var(--text-hell);
  box-shadow: 0 18px 48px rgba(8, 15, 30, .3);
}

.einwilligung[hidden] { display: none; }
.einwilligung__text { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.einwilligung__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.einwilligung__aktion { display: flex; gap: 12px; flex-shrink: 0; }
.einwilligung__aktion .pille { border: 0; font: inherit; cursor: pointer; }

.einwilligung__aktion .pille--glas {
  background: rgba(252, 252, 252, .1);
  color: var(--text-hell);
  box-shadow: inset 0 0 0 1px rgba(252, 252, 252, .38);
}

@media (pointer: fine) { .einwilligung__aktion .pille--glas:hover { color: var(--text-hell); } }

@media (max-width: 800px) {
  .einwilligung { flex-direction: column; align-items: stretch; gap: var(--mass-lg); }
  .einwilligung__aktion { justify-content: flex-start; }
}

/* Rechtstexte */
.rechtstext { max-width: 820px; }
.rechtstext h2 { font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; margin: 48px 0 16px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-weight: 500; font-size: 19px; margin: 32px 0 12px; }
.rechtstext p, .rechtstext li { font-size: 17px; line-height: 1.6; color: var(--text-gedeckt); }
.rechtstext p + p { margin-top: 14px; }
.rechtstext ul { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.rechtstext li { position: relative; padding-left: 22px; }
.rechtstext li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--marke); }
.rechtstext a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: fine) { .rechtstext a:hover { color: var(--marke); } }

/* Einblenden beim Scrollen */
.js .zeig {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s var(--ease-weit), transform 1s var(--ease-weit);
}

.js .zeig.ist-sichtbar { opacity: 1; transform: none; }

.js .zeig--tief {
  opacity: 0;
  transform: perspective(1000px) translateX(30%) translate3d(-140px, 60px, 0) rotateY(42deg) rotateX(24deg);
  transition: opacity 1.3s var(--ease-weit), transform 1.3s var(--ease-weit);
}

.js .zeig--tief.ist-sichtbar {
  opacity: 1;
  transform: perspective(1000px) translateX(0) translateZ(0) rotateY(0) rotateX(0);
}

/* auf schmalen Displays würde der Titel links aus dem Bild kippen */
@media (max-width: 700px) {
  .js .zeig--tief { transform: translate3d(0, 48px, 0); }
  .js .zeig--tief.ist-sichtbar { transform: none; }
}

/* Am Telefon läuft der Satz sonst über die halbe Seite: eine Stufe kleiner,
   engere Abstände, damit vor allem die Rechtstexte überschaubar bleiben. */
@media (max-width: 700px) {
  body { font-size: 16px; }

  .titel-xl { font-size: clamp(30px, 8.4vw, 40px); letter-spacing: -.035em; }
  .titel-l { font-size: clamp(25px, 6.8vw, 34px); letter-spacing: -.03em; }
  .fliess { font-size: 16px; line-height: 1.5; }

  .abschnitt { padding: 52px var(--mass-lg); }
  .abschnitt__kopf { margin-bottom: 34px; }
  .unterkopf { padding: calc(var(--kopf-hoehe) + 36px) var(--mass-lg) 36px; }
  .unterkopf__lead { font-size: 16px; }

  .saeule h3 { font-size: 18px; }
  .saeule p, .karte p { font-size: 15px; }
  .karte h3 { font-size: 17px; }
  .klapp__titel { font-size: 19px; }
  .klapp__liste li { font-size: 15px; }
  .schlussruf p { font-size: 16px; line-height: 1.45; }
  .kontakt-block p, .kontakt-block a { font-size: 17px; }

  .rechtstext h2 { font-size: 20px; margin: 34px 0 12px; }
  .rechtstext h3 { font-size: 17px; margin: 24px 0 10px; }
  .rechtstext p, .rechtstext li { font-size: 15px; line-height: 1.55; }
  .rechtstext p + p { margin-top: 12px; }
  .rechtstext ul { gap: 8px; }

  .fuss__weg { height: 64px; }
  .fuss__meta { font-size: 13px; }
}

.js .zeig--verzug-1.ist-sichtbar { transition-delay: .1s; }
.js .zeig--verzug-2.ist-sichtbar { transition-delay: .2s; }
.js .zeig--verzug-3.ist-sichtbar { transition-delay: .3s; }

/* Seitenübergang */
.schleier {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--dunkel);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}

.schleier__logo { width: min(200px, 42vw); height: auto; }

.js.laedt .schleier {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s var(--ease);
}

.js.intro .schleier__logo { animation: markeRein 1s var(--ease-weit) both; }

@keyframes markeRein {
  0%   { opacity: 0; transform: translateY(14px) scale(.955); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .zeig,
  .js .zeig--tief,
  .js .zeig.ist-sichtbar,
  .js .zeig--tief.ist-sichtbar {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .kopfzeile { transform: translateZ(0); transition: none; }
  .schleier { display: none; }

  .mobilnav__feld { clip-path: none; }
  .mobilnav__feld > a,
  .mobilnav__aktion { opacity: 1; transform: none; transition-delay: 0s; }

  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}