/* Ernst & Ernst Immobilien AG — Website (One-Page, statisches HTML/CSS/JS) */

:root {
  /* Farben */
  --ink: #16212e;
  /* tiefes Navy (dunkle Sektionen, Text) */
  --ink-2: #1e2c3b;
  /* etwas heller */
  --ink-3: #2b3b4d;
  --sand: #e7dfd0;
  /* warmes Sandbeige (heller Hintergrund) */
  --sand-2: #efe9dd;
  --paper: #f6f2ea;
  /* off-white */
  --bronze: #a9885a;
  /* Bronze als Textfarbe: auf hellem Grund erreicht #a9885a nur 2.96:1.
     Dunkle Sektionen setzen die Variable unten wieder auf den hellen Ton,
     dort waere der dunkle Ton zu kontrastarm. */
  --bronze-text: #7a5f36;
  /* dezenter Akzent */
  --bronze-2: #c0a578;
  --line-dark: rgba(233, 225, 211, 0.18);
  --line-light: rgba(22, 33, 46, 0.14);
  /* Deckende Entsprechung von --line-light auf --paper. Noetig, wo ein
     Schatten hinter der Linie liegt: durch eine halbtransparente Linie
     scheint er durch und macht sie dunkler als die uebrigen. */
  --line-light-solid: #d6d4cf;
  --text-on-dark: #e9e1d3;
  --text-on-dark-soft: #b7bdc4;
  --text-on-light: #25323f;
  --text-on-light-soft: #525d69;

  /* Typo */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Maße */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 132px);
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-on-light);
  /* Navy als Grundfarbe → iOS-Überscroll oben/unten ist blau statt beige.
     Alle Sektionen setzen ihren eigenen Hintergrund, daher nur an den
     Scroll-Enden sichtbar. */
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  /* noetig, seit die Bilder width/height tragen: sonst uebernimmt der Browser
     die Attributhoehe als feste Hoehe und das Bild wird verzerrt */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Hilfsklassen */
/* Sprunglink für Tastatur-Nutzer: unsichtbar, bis er Fokus erhält. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--text-on-dark);
  font-size: 14px;
}

.skip-link:focus {
  left: 0;
}

/* nur fuer Screenreader: nimmt keinen Platz ein, bleibt aber vorlesbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sichtbarer Tastaturfokus ueberall; die Browser-Vorgabe geht auf dem
   dunklen Navy unter. Spezifischere Regeln weiter unten duerfen das
   ueberschreiben. */
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

/* Projekte-Sektion nur auf Desktop: oben etwas mehr Luft, unten etwas weniger. */
@media (min-width: 901px) {
  #projekte {
    padding-top: calc(var(--section-y));
    padding-bottom: calc(var(--section-y));
  }
}

.section--dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

.section--paper {
  background: var(--paper);
}

.section--sand {
  background: var(--sand);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze-text);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bronze);
  display: inline-block;
}

.section--dark .eyebrow {
  color: var(--bronze-2);
}

.section--dark .eyebrow::before {
  background: var(--bronze-2);
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: 0.005em;
}

h2.title {
  font-size: clamp(30px, 4.4vw, 52px);
  margin-bottom: 22px;
}

h3 {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600;
}

.lead {
  font-size: clamp(18px, 2vw, 21px);
  color: var(--text-on-light-soft);
  max-width: 60ch;
}

.section--dark .lead {
  color: var(--text-on-dark-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 600;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--text-on-dark);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.btn:hover {
  background: transparent;
  color: var(--ink);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--text-on-dark);
}

.btn--on-dark {
  border-color: var(--bronze-2);
  background: transparent;
  color: var(--text-on-dark);
}

.btn--on-dark:hover {
  background: var(--bronze-2);
  color: var(--ink);
}

/* Bild-Platzhalter (Konzept) */
/* Beige/graue Box mit Beschreibung dessen, was das finale Bild zeigt.     */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    repeating-linear-gradient(135deg, rgba(22, 33, 46, .035) 0 14px, rgba(22, 33, 46, .06) 14px 28px);
  border: 1px solid var(--line-light);
  color: var(--text-on-light-soft);
  padding: 22px;
  overflow: hidden;
  min-height: 240px;
}

/* Echtes Bild füllt den Platzhalter-Rahmen vollständig. */
.ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--sand-2);
  padding: 6px 11px;
  border: 1px solid var(--line-light);
}

.ph__desc {
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
}

.ph__desc strong {
  color: var(--text-on-light);
  font-weight: 600;
}

.ph--dark {
  background: repeating-linear-gradient(135deg, rgba(233, 225, 211, .04) 0 14px, rgba(233, 225, 211, .07) 14px 28px);
  border-color: var(--line-dark);
  color: var(--text-on-dark-soft);
}

.ph--dark .ph__tag {
  color: var(--text-on-dark);
  background: var(--ink-3);
  border-color: var(--line-dark);
}

.ph--dark .ph__desc strong {
  color: var(--text-on-dark);
}

/* Bei Ratio-Platzhaltern darf die Basis-min-height die Breite nicht
   über das Seitenverhältnis aufblähen (sonst horizontaler Überlauf). */
.ph--ratio-wide,
.ph--ratio-43,
.ph--ratio-portrait {
  min-height: 0;
  width: 100%;
}

.ph--ratio-wide {
  aspect-ratio: 16 / 7;
}

.ph--ratio-43 {
  aspect-ratio: 4 / 3;
}

.ph--ratio-portrait {
  aspect-ratio: 3 / 4;
}

/* Bronze-Rahmen nur auf Desktop: oberstes Bild (Über uns) 5px, Porträts 4px.
   .split__media davor -> höhere Spezifität als die spätere .ph--fade-right{border:0}. */
@media (min-width: 761px) {
  .split__media .ph--fade-right {
    border: 5px solid #a9885a;
    box-shadow: 0 7px 29px 0 rgba(100, 100, 111, .2);
  }

  .person__photo {
    border: 3px solid #a9885a;
  }

  /* Solarpanel-Bild (Nachhaltigkeit) füllt auf Desktop fast die ganze Sektionshöhe,
     wirft einen Schatten und wird per JS beim Scrollen bewegt (Parallax + Pin). */
  #nachhaltigkeit .split__media .ph {
    min-height: clamp(420px, 72vh, 680px);
  }
}

/* Solarbild ohne Rahmen, mit Schatten (Mobile + Desktop). */
#nachhaltigkeit .split__media .ph {
  border: 0;
  box-shadow: 0 24px 50px rgba(22, 33, 46, .3);
  will-change: transform;
}

/* Solar-Galerie */
/* Zwei gestapelte Ebenen auf der Buehne: die inaktive traegt das neue Bild
   und wird eingeblendet -> Crossfade ohne Aufblitzen. */
.solar__layer {
  opacity: 0;
  transition: opacity .5s ease;
}

.solar__layer.is-active {
  opacity: 1;
}

.solar__thumbs {
  display: none;
  gap: 12px;
  margin-top: 28px;
}

.solar__thumb {
  flex: 0 1 96px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  overflow: hidden;
  opacity: .62;
  transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}

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

.solar__thumb:hover,
.solar__thumb:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.solar__thumb.is-active {
  opacity: 1;
  border-color: var(--bronze);
}

/* Mobile: statt Buehne + Thumbnails laeuft ein Band aller Bilder durch. */
.solar__band {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  /* Per Drag durchblaetterbar (JS): Text-/Bildauswahl darf nicht stoeren. */
  user-select: none;
  -webkit-user-select: none;
}

.solar__band img {
  width: 76vw;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 24px 50px rgba(22, 33, 46, .3);
  -webkit-user-drag: none;
  pointer-events: none;
}

@media (min-width: 761px) {
  .solar__band {
    display: none;
  }

  .solar__thumbs {
    display: flex;
  }
}

@media (max-width: 760px) {
  .solar__stage {
    display: none;
  }

  /* Das Band ist viel breiter als der Viewport. Absolut positioniert, damit
     seine Breite NICHT in die Spaltenbreite einfliesst - sonst wird das
     Grid so breit wie das Band und der Text laeuft aus dem Bild. */
  #nachhaltigkeit .split__media {
    position: relative;
    overflow: visible;
    height: 57vw;
    /* 76vw Bildbreite im Verhaeltnis 4:3 */
  }

  .solar__band {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* HEADER */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 76px;
  transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}

.site-header.is-scrolled {
  background: rgba(22, 33, 46, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line-dark);
  height: 64px;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--text-on-dark);
}

.brand__mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bronze-2);
  color: var(--bronze-2);
  letter-spacing: 0.02em;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}

/* Wortmarke und Zeichen sind die Original-Konturen aus den Logo-Dateien des
   Kunden (media/marke/). Die Schrift selbst ist nicht als Webfont lizenziert;
   als Maske uebernehmen die Flaechen die Textfarbe wie Schrift. */
.marke {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--marke) no-repeat center / contain;
  mask: var(--marke) no-repeat center / contain;
}

/* Das Zeichen steht als eingebettetes SVG statt als Maske: als Maske wirkte
   es beim Scrollen kleiner, sobald die Kopfzeile Hintergrund und
   backdrop-filter bekommt. Ein SVG wird in beiden Zuständen als Vektor
   gezeichnet. */
.marke-ee {
  display: block;
  width: 31px;
  height: auto;
  aspect-ratio: 749.18 / 283.48;
}

.marke--name {
  --marke: url("../media/marke/ernst-ernst.svg");
  width: 140px;
  aspect-ratio: 1054 / 115;
}

.marke--zusatz {
  --marke: url("../media/marke/immobilien-ag.svg");
  width: 92.7px;
  aspect-ratio: 698 / 68;
  margin: 5px 0 0 3px;
  color: var(--text-on-dark-soft);
}

/* Firmenname im Fliesstext: Text bleibt fuer Kopieren, Suche und Screenreader
   erhalten, sichtbar ist die Originalkontur. Hoehe so, dass die Versalhoehe
   der Kontur (92 % der Grafik) der Versalhoehe der umgebenden Schrift
   entspricht; die Unterlaenge des N (6 %) reicht unter die Grundlinie. */
.firmenname {
  display: inline-block;
  height: .79em;
  aspect-ratio: 1054 / 115;
  vertical-align: -.05em;
  overflow: hidden;
  white-space: nowrap;
  /* Text aus dem Feld schieben statt einfaerben: die Maske braucht die
     geerbte Textfarbe als currentColor. */
  text-indent: 110%;
  background-color: currentColor;
  -webkit-mask: url("../media/marke/ernst-ernst.svg") no-repeat center / contain;
  mask: url("../media/marke/ernst-ernst.svg") no-repeat center / contain;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  color: var(--text-on-dark);
  font-size: 14px;
  letter-spacing: 0.02em;
  position: relative;
  padding-block: 4px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--bronze-2);
  transition: width .25s ease;
}

.nav a:hover::after {
  width: 100%;
}

/* Sprachwahl: Globus mit Ausklappliste neben der Navigation. Auf Mobile
   steht sie im Burger-Menü (.lang-menu-mobile); Seiten ohne Burger
   (Rechtsseiten) behalten den Globus in der Kopfzeile. */
.nav {
  margin-left: auto;
}

.lang-menu {
  position: relative;
  margin-left: 26px;
}

.lang-menu__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  color: var(--text-on-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.lang-menu__btn:hover,
.lang-menu__btn:focus-visible,
.lang-menu__btn[aria-expanded="true"] {
  color: var(--bronze-2);
  background: rgba(255, 255, 255, .16);
}

/* Buchstabenabstand haengt hinten Luft an; ausgleichen, damit die Pill
   links und rechts gleich wirkt */
.lang-menu__btn span {
  margin-right: -.14em;
}

.globus {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.lang-menu__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  z-index: 130;
}

.lang-menu__list[hidden] {
  display: none;
}

.lang-menu__list a {
  display: block;
  padding: 9px 18px;
  color: var(--text-on-dark);
  font-size: 14px;
}

.lang-menu__list a:hover,
.lang-menu__list a:focus-visible {
  color: var(--bronze-2);
  background: rgba(255, 255, 255, .04);
}

.lang-menu__list a[aria-current="true"],
.lang-menu-mobile a[aria-current="true"] {
  color: var(--bronze-2);
  font-weight: 600;
}

/* Sprachzeile im Burger-Menü */
.lang-menu-mobile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  color: var(--text-on-dark-soft);
}

.lang-menu-mobile a {
  font-size: 16px;
  color: var(--text-on-dark-soft);
}

.lang-menu-mobile a + a {
  padding-left: 14px;
  border-left: 1px solid var(--line-dark);
}

/* Knapp über dem Burger-Umbruch braucht die Sprachwahl den Platz */
@media (max-width: 1160px) {
  .nav {
    gap: 22px;
  }
}

@media (max-width: 1080px) {
  .nav {
    gap: 18px;
  }

  .lang-menu {
    margin-left: 18px;
  }
}

@media (max-width: 1000px) {
  /* Mit Burger-Menü wandert die Sprachwahl dort hinein */
  .site-header:has(.nav-toggle) .lang-menu {
    display: none;
  }

  .site-header .lang-menu {
    margin-left: auto;
  }
}

/* Hinweis auf die andere Sprachfassung (js/sprachhinweis.js) */
.lang-hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 32px);
  padding: 12px 14px 12px 20px;
  background: var(--ink);
  color: var(--text-on-dark);
  border: 1px solid var(--line-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font-size: 14px;
  transform: translate(-50%, 16px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}

.lang-hint.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.lang-hint a {
  color: var(--bronze-2);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-hint__close {
  border: 0;
  background: none;
  color: var(--text-on-dark-soft);
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}

@media (max-width: 520px) {
  .lang-hint {
    flex-wrap: wrap;
    gap: 6px 14px;
    width: calc(100% - 32px);
  }

  .lang-hint span {
    flex: 1 1 100%;
  }

  .lang-hint__close {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-hint {
    transition: none;
  }
}


.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  position: relative;
  z-index: 130;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--text-on-dark);
  margin: 6px 0;
  transition: transform .3s ease, opacity .2s ease;
  transform-origin: center;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* MOBILE-VOLLBILDMENÜ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  /* Eintraege oben anhaengen statt vertikal zentrieren: der Abstand zum Logo
     bleibt so immer gleich. --menu-top ist die gemessene Kopfzeilenhoehe,
     die js/main.js beim Oeffnen setzt (Fallback: ungescrollte Hoehe). */
  justify-content: flex-start;
  padding: calc(var(--menu-top, 76px) + 8px) var(--gutter) 40px;
  /* Acht Eintraege plus Fuss passen auf kleinen Geraeten nicht immer ins
     Fenster; ohne Scrollen waere die Fusszeile dort unerreichbar. */
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 9vw, 44px);
  line-height: 1.25;
  color: var(--text-on-dark);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  transform: translateY(14px);
}

.mobile-menu.is-open .mobile-menu__nav a {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .4s ease;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(1) {
  transition-delay: .08s;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(2) {
  transition-delay: .13s;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(3) {
  transition-delay: .18s;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(4) {
  transition-delay: .23s;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(5) {
  transition-delay: .28s;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(6) {
  transition-delay: .33s;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(7) {
  transition-delay: .38s;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(8) {
  transition-delay: .43s;
}

.mobile-menu__nav .mm-no {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--bronze-2);
}

.mobile-menu__foot {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu__foot a {
  font-size: 16px;
  color: var(--text-on-dark-soft);
}

.mobile-menu__foot a:hover {
  color: var(--bronze-2);
}

.section--dark,
.site-footer,
.mobile-menu,
.hero {
  --bronze-text: var(--bronze);
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 1000px) and (max-height: 700px) {
  .mobile-menu__nav a {
    font-size: clamp(26px, 8vw, 40px);
    padding: 7px 0;
  }

  .mobile-menu__foot {
    margin-top: 24px;
  }
}

/* HERO */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  /* dynamische Viewport-Höhe: füllt auf Mobile die volle Höhe,
                          passt sich der ein-/ausblendenden Browserleiste an.
                          Die fixe Navbar (76px) liegt darüber (padding-top), zählt nicht mit. */
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--text-on-dark);
  padding-top: 76px;
  overflow: hidden;
}

/* Mobile: Hintergrundbild bis ganz nach unten - 100lvh statt 100dvh, damit es
   auch hinter der ein-/ausblendenden Browserleiste liegt und nie ein Streifen
   der naechsten Sektion durchblitzt. */
@media (max-width: 760px) {
  .hero {
    /* Reihenfolge = Fallback-Kette. Auf iOS/Android ist 100vh ohnehin die
       grosse Viewporthoehe (Leiste eingeklappt), deckt also auch aeltere
       Browser ohne lvh-Support ab. */
    min-height: 100vh;
    min-height: 100lvh;
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dunkler Verlauf (links/unten stärker) → Headline bleibt gut lesbar */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 30, 42, .90) 0%, rgba(20, 30, 42, .70) 42%, rgba(20, 30, 42, .42) 100%),
    linear-gradient(0deg, rgba(20, 30, 42, .80) 0%, rgba(20, 30, 42, 0) 50%);
}

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(40px, 7vw, 86px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hero h1 em {
  font-style: italic;
  color: var(--bronze-2);
}

.hero__sub {
  margin: 28px 0 38px;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--text-on-dark-soft);
  max-width: 56ch;
}

.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--bronze-2), transparent);
}

/* Desktop: statt des Strichs ein Pfeil, Label schwebt sanft auf und ab. */
.hero__scroll__arrow {
  display: none;
  width: 22px;
  height: 40px;
  color: var(--bronze-2);
}

@media (min-width: 761px) {
  .hero__scroll::after {
    display: none;
  }

  .hero__scroll__arrow {
    display: block;
  }

  .hero__scroll__label {
    animation: hero-bob 2.6s ease-in-out infinite;
  }

  /* Beim Scrollen ausblenden, ganz oben wieder da (Klasse setzt das JS). */
  .hero__scroll {
    transition: opacity .4s ease, transform .4s ease;
  }

  .hero__scroll.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
    pointer-events: none;
  }
}

@keyframes hero-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll__label {
    animation: none;
  }
}

/* ÜBER UNS */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.split--reverse .split__media {
  order: 2;
}

/* Bild füllt auf Desktop die volle Höhe der Textspalte (statt 4:3-Kachel). */
@media (min-width: 761px) {
  .split {
    align-items: stretch;
  }

  .split__media .ph {
    height: 100%;
    aspect-ratio: auto;
  }
}

.fact b {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  display: block;
  color: var(--ink);
}

.fact span {
  font-size: 13px;
  color: var(--text-on-light-soft);
  letter-spacing: .02em;
}

/* LEISTUNGEN */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light-solid);
  box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0;
}

.card {
  background: var(--paper);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .25s ease;
}

.card:hover {
  background: var(--sand-2);
}

.card h3 {
  color: var(--ink);
}

.card p {
  margin: 0;
  color: var(--text-on-light-soft);
  font-size: 15.5px;
}

/* WERTE */
.values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.value {
  padding: 34px 22px 8px;
}

/* Werte als Box (Stichpunkte links): leicht heller als der Navy-Hintergrund,
   vertikal gestapelt mit feinen Trennlinien. */
/* Doppelte Auswahl mit Absicht: die Reaktionsregeln weiter unten setzen dem
   allgemeinen Werte-Raster zwei Spalten und wuerden eine einfache Auswahl
   hier ueberstimmen. Die Box bleibt immer einspaltig. */
.values.values--box {
  position: relative;
  grid-template-columns: 1fr;
  background: var(--ink-2);
  box-shadow: 0 7px 29px 0 rgba(0, 0, 0, 0.2);
  padding: 15px 26px;
  margin-top: 26px;
}

/* Desktop: Werte-Box als 3D-Kippkarte. js/main.js setzt --rx/--ry (Neigung)
   und --gx/--gy (Lichtpunkt) aus der Mausposition; ohne Maus oder bei
   reduzierter Bewegung bleibt die Box flach. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .values.values--box {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
    will-change: transform;
  }

  .values.values--box.is-tilting {
    transition: transform .08s linear, box-shadow .3s ease;
    box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.26);
  }

  /* Lichtreflex, folgt der Maus */
  .values.values--box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .05), transparent 55%);
    opacity: 0;
    transition: opacity .35s ease;
  }

  .values.values--box.is-tilting::after {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  /* Text unter der Box ueber die volle Breite laufen lassen. */
  #werte .quote,
  #werte .lead {
    max-width: none;
  }
}

.values--box .value {
  padding: 10px 0;
}

/* Trennlinie unten an jeder Zelle ausser der letzten. */
.values--box .value:not(:last-of-type) {
  border-bottom: 1px solid var(--line-dark);
}

.value b {
  /* Gleiche Schrift wie die Beschreibung darunter (.value span). */
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-on-dark);
  display: block;
}

.value span {
  font-size: 13.5px;
  color: var(--text-on-dark-soft);
}

.quote {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.25;
  max-width: 22ch;
  margin: 0 0 12px;
}

.quote em {
  color: var(--bronze-2);
  font-style: italic;
}

/* PROJEKTE */
/* Horizontaler Scroll-Slider */
/* Wrapper trägt die seitlichen Fade-Hinweise (rein visuell, kein Text). */
.projects-wrap {
  position: relative;
}

.projects-wrap::before,
.projects-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 46px;
  /* endet oberhalb der Fortschrittsleiste */
  width: 64px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.projects-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--paper), rgba(246, 242, 234, 0));
}

.projects-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--paper), rgba(246, 242, 234, 0));
}

.projects-wrap.has-prev::before {
  opacity: 1;
}

.projects-wrap.has-next::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  .projects-wrap::before,
  .projects-wrap::after {
    transition: none;
  }
}

/* Auf Mobile keinen seitlichen Fade zeigen. */
@media (max-width: 900px) {

  .projects-wrap::before,
  .projects-wrap::after {
    display: none;
  }
}

.projects {
  display: flex;
  align-items: stretch;
  gap: 28px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  cursor: default;
  /* Native Scrollleiste ausblenden — wir zeigen unten eine eigene,
     stets sichtbare Fortschrittsleiste. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.projects::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.projects.is-grabbing {
  cursor: default;
  user-select: none;
  scroll-behavior: auto;
}

.projects.is-grabbing img {
  pointer-events: none;
}

/* Eigene Scroll-Fortschrittsleiste (Desktop + Mobile, bleibt sichtbar) */
.projects__bar {
  position: relative;
  height: 6px;
  margin-top: 54px;
  /* etwas tiefer gesetzt */
  margin-bottom: 24px;
  /* mehr Abstand zur nächsten Sektion */
  border-radius: 100px;
  background: rgba(22, 33, 46, .12);
  cursor: pointer;
  touch-action: none;
}

.projects-wrap.is-static .projects__bar {
  display: none;
}

.projects__bar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  border-radius: 100px;
  background: var(--bronze);
  transition: background .2s ease;
}

.projects__bar:hover .projects__bar-thumb,
.projects.is-grabbing~.projects__bar .projects__bar-thumb {
  background: var(--bronze-2);
}

.project {
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(280px, 80vw, 360px);
  /* nicht markierbar: die Karten werden gezogen, dabei wuerde sonst Text
     mitselektiert werden */
  -webkit-user-select: none;
  user-select: none;
}

/* Auf Mobile beim Wischen einrasten; auf Desktop frei ziehen (kein Snap). */
@media (max-width: 900px) {
  .projects {
    scroll-snap-type: x mandatory;
  }

  .project {
    scroll-snap-align: start;
  }
}

/* Bild-Karussell pro Projekt */
.pcar {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  background: var(--sand-2);
}

/* Waagrechtes Wischen gehoert dem Bild-Karussell, nicht dem Projekte-Slider
   darunter; senkrecht scrollt weiterhin die Seite. Die Klasse setzt
   js/main.js nur dort, wo es mehrere Bilder gibt und die Wisch-Handler
   wirklich haengen - sonst entstuende eine tote Zone. */
.pcar--swipe {
  touch-action: pan-y;
}

.pcar__track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform .45s ease;
}

/* waehrend des Ziehens folgt die Spur dem Finger ohne Nachlauf */
.pcar__track.is-dragging {
  transition: none;
}

.pcar__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: repeating-linear-gradient(135deg, rgba(22, 33, 46, .035) 0 14px, rgba(22, 33, 46, .06) 14px 28px);
}

.pcar__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  z-index: 3;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  background: rgba(246, 242, 234, .88);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
}

/* Pfeile erst beim Hover (bzw. Tastaturfokus) über dem Bild einblenden */
.pcar:hover .pcar__nav,
.pcar:focus-within .pcar__nav {
  opacity: 1;
}

.pcar__nav:hover {
  background: var(--paper);
}

.pcar__nav--prev {
  left: 12px;
}

.pcar__nav--next {
  right: 12px;
}

.pcar__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.pcar__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Kraeftig genug, um sich auch auf unruhigen Bildstellen zu behaupten */
  background: rgba(22, 33, 46, .5);
  /* Weicher heller Hof, damit die Punkte sich vom Bild abheben. Zwei Lagen:
     die innere traegt ihn per spread erst deckend auf, die aeussere blendet
     ihn weit aus. */
  box-shadow:
    0 0 10px 1px rgba(255, 255, 255, .75),
    0 0 26px 8px rgba(255, 255, 255, .34);
  transition: background .2s ease, transform .2s ease;
}

.pcar__dot.is-active {
  background: var(--bronze);
  transform: scale(1.25);
}

.pcar--single .pcar__nav,
.pcar--single .pcar__dots {
  display: none;
}

.project__body {
  padding: 3px 4px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project__meta {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze-text);
  margin-bottom: 16px;
}

/* Ort staerker als die Projektphase daneben */
.project__ort {
  font-weight: 600;
}

.project h3 {
  color: var(--ink);
  font-size: 22px;
  margin-bottom: 9px;
}

.project p:last-of-type {
  margin: 0;
  font-size: 15px;
  color: var(--text-on-light-soft);
}

.project__status {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 5px 12px;
  border: 1px solid var(--line-light);
  color: var(--text-on-light-soft);
}

/* REFERENZEN */
.refs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  margin-top: 12px;
}

.ref {
  background: var(--ink);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  font-family: var(--serif);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  color: var(--text-on-dark);
  letter-spacing: .01em;
  transition: background .25s ease, color .25s ease;
}

.ref:hover {
  background: var(--ink-3);
  color: var(--bronze-2);
}

.refs-note {
  font-size: 12.5px;
  color: var(--text-on-dark-soft);
  margin-top: 22px;
}

.refs-note code {
  font-size: 11.5px;
  color: var(--bronze-2);
  background: rgba(233, 225, 211, .06);
  padding: 2px 6px;
}

/* Endlos-Laufband (rechts → links) */
.marquee {
  margin-top: 32px;
  overflow: hidden;
  position: relative;
  background: #d8d2c5;
  /* gedämpft aufgehellt (nicht stark weiss) */
  border-radius: 4px;
  /* Scrollwert kommt per JS als --line-scroll; Hover ueberschreibt ihn hier. */
  --line-p: var(--line-scroll, 0);
}

.marquee.line-full {
  --line-p: 1;
}

/* Nur waehrend Hover-Wechsel animieren - beim Scrollen soll die Linie
   dem Scrollwert ohne Nachlauf folgen. Klasse setzt das JS. */
.marquee.line-anim .marquee__line {
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

/* Untere Bronze-Linie: wächst per JS (--line-p 0->1) von rechts nach links. */
.marquee__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #a9885a;
  z-index: 3;
  /* über Track und Kanten-Fades */
  transform: scaleX(var(--line-p, 0));
  transform-origin: right center;
  /* Aufbau von rechts nach links */
  pointer-events: none;
}

/* Weiche Kanten in Panel-Farbe (Logos laufen sauber aus) */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  z-index: 2;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, #d8d2c5, rgba(216, 210, 197, 0));
}

.marquee::after {
  right: 0;
  background: linear-gradient(270deg, #d8d2c5, rgba(216, 210, 197, 0));
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}

/* Click-and-Drag (Auto-Scroll läuft weiter, kein Hover-Stopp) */
.marquee {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.marquee.is-dragging {
  cursor: default;
}

.ref-logo {
  -webkit-user-drag: none;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.ref-logo {
  flex: 0 0 auto;
  height: 42px;
  width: auto;
  max-width: 172px;
  object-fit: contain;
  margin: 30px clamp(28px, 5vw, 56px);
  /* Nicht farbig, aber mit Innenkontrast → Text/Symbole bleiben sichtbar */
  filter: grayscale(1);
  opacity: .82;
  transition: opacity .25s ease;
}

.ref-logo:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  /* Kein automatischer Lauf; Band bleibt aber per Drag bewegbar (JS: speed 0). */
  .marquee__track {
    animation: none;
  }
}

/* TEAM */
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 5vw, 56px);
}

.person {
  display: grid;
  /* minmax(0,…): verhindert, dass lange Wörter (z.B. "Verwaltungsratspräsident")
     die Textspalte über min-content aufblähen und die Foto-Spalte zusammendrücken.
     So bleiben beide Porträts immer gleich breit. */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.person__photo {
  min-height: 0;
}

/* Desktop: Mandate-Dropdown weg; stattdessen Porträt anklickbar (Flip-Karte). */
@media (min-width: 761px) {
  .person .mandates {
    display: none;
  }

  .person__photo {
    cursor: pointer;
  }
}

/* Personen-Flip-Karte (Modal) */
.person-modal[hidden] {
  display: none;
}

.person-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  perspective: 1400px;
  /* echte 3D-Tiefe -> sauberes Backface-Culling, kein Flackern */
  /* Fade in/out des gesamten Overlays (Karte macht nur Zoom+Flip). */
  opacity: 0;
  transition: opacity .35s ease;
}

.person-modal.is-open {
  opacity: 1;
}

.person-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 17, 24, .72);
  opacity: 0;
  transition: opacity .35s ease;
}

.person-modal.is-open .person-modal__backdrop {
  opacity: 1;
}

.pm-card {
  position: relative;
  width: min(430px, 92vw);
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transform: scale(.9) rotateY(0deg);
  will-change: transform;
  /* KEIN opacity hier! opacity auf preserve-3d flacht den 3D-Kontext ab und
     zerstört den Flip. Der Fade läuft über .person-modal (siehe unten). */
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.person-modal.is-open .pm-card {
  transform: scale(1) rotateY(0deg);
}

.person-modal.is-open .pm-card.is-flipped {
  transform: scale(1) rotateY(180deg);
}

.pm-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 4px solid #a9885a;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.pm-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-back {
  transform: rotateY(180deg);
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 0;
  overflow: hidden;
}

/* Gescrollt wird der innere Bereich; die native Leiste ist komplett aus.
   Grund: Pfeil-Buttons lassen sich nicht in allen Engines abschalten und
   weder ::-webkit-scrollbar-thumb noch scrollbar-color sind animierbar.
   Die sichtbare Leiste ist darum das Overlay .pm-scroll (siehe unten). */
.pm-scrollarea {
  height: 100%;
  padding: 30px 28px;
  overflow-y: auto;
  /* Traegt den Fokus beim Oeffnen (tabindex="-1"), damit Tastatur-Scrollen
     sofort in der Karte landet - aber ohne sichtbaren Fokusring. */
  outline: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pm-scrollarea::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.pm-scroll {
  position: absolute;
  top: 12px;
  right: 7px;
  bottom: 12px;
  width: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}

.pm-scroll.is-visible {
  opacity: 1;
}

.pm-scroll__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 100px;
  background: var(--bronze-2);
  will-change: transform, height;
}

@media (prefers-reduced-motion: reduce) {
  .pm-scroll {
    transition: none;
  }
}

.pm-back .pm-name {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 600;
  /* fest gesetzt, sonst waechst der Absatzabstand (1em) mit der Schrift mit */
  margin: 10px 0 25px;
}

.pm-back .pm-role {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze-2);
  margin: 6px 0 14px;
  font-weight: 700;
}

.pm-back .pm-intro {
  font-size: 14.5px;
  color: var(--text-on-dark-soft);
  margin: 0 0 18px;
}

.pm-back .pm-mand-title {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze-2);
  /* deutlich abgesetzt vom Einleitungstext darueber */
  margin: 30px 0 5px;
}

.pm-back .mandates__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ohne Aufzaehlungszeichen: die Karte gibt es nur auf Desktop, dort sind
   die Trennlinien Struktur genug. Grid bleibt (nur eine Spalte), sonst
   reisst der Zeilenkasten des font-size:0-Wrappers die Zeilen auseinander. */
.pm-back .mandates__list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-dark);
}

.pm-back .mandates__list li:last-child {
  border-bottom: 0;
}

.pm-back .mandates__list .m-dot {
  display: none;
}

.pm-back .mandates__list .m-role {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-on-dark);
}

.pm-back .mandates__list .m-org {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-on-dark-soft);
}

/* Verlauf am unteren Kartenrand: zeigt an, dass weitere Mandate folgen.
   Der Pfeil tippt sanft nach unten an; er liegt ueber dem Inhalt, faengt
   aber keine Klicks ab. */
.pm-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: linear-gradient(to top, rgba(22, 33, 46, .97) 30%, rgba(22, 33, 46, 0));
}

.pm-fade.is-visible {
  opacity: 1;
}

.pm-fade__chev {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 13px;
  height: 13px;
  margin-left: -7px;
  border-right: 1.5px solid var(--bronze-2);
  border-bottom: 1.5px solid var(--bronze-2);
  transform: rotate(45deg);
  animation: pm-chev 1.8s ease-in-out infinite;
}

@keyframes pm-chev {

  0%,
  100% {
    transform: translateY(-3px) rotate(45deg);
    opacity: .55;
  }

  50% {
    transform: translateY(3px) rotate(45deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-fade__chev {
    animation: none;
    transform: rotate(45deg);
    opacity: .8;
  }
}

.pm-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-on-dark);
  font-size: 24px;
  line-height: 1;
  border-radius: 50%;
  transition: background .2s ease, color .2s ease;
}

.pm-close:hover {
  background: var(--bronze-2);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .pm-card {
    transition: opacity .2s ease;
  }

  .person-modal.is-open .pm-card.is-flipped {
    transform: rotateY(180deg);
  }
}

/* Klick-Hinweis unter den Porträts (nur Desktop, da Flip-Karte desktop-only). */
.team-hint {
  display: none;
}

@media (min-width: 761px) {
  .team-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 0;
    font-size: 14px;
    color: var(--text-on-light-soft);
  }

  .team-hint svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: inherit;
    /* gleiche Farbe wie der Text */
  }

  /* Sektion unten enger, damit unter dem Hinweis nicht so viel Platz bleibt. */
  #team {
    padding-bottom: calc(var(--section-y) - 48px);
  }
}

.person__name {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  color: var(--ink);
}

.person__role {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* bewusst der helle Ton wie der Portraet-Rahmen daneben */
  color: var(--bronze);
  margin: 6px 0 16px;
}

.person__intro {
  font-size: 15px;
  color: var(--text-on-light-soft);
  margin: 0 0 18px;
}

/* Mandate-Aufklapp-Funktion (flexibel: 2 oder beliebig viele Einträge) */
.mandates {
  border-top: 1px solid var(--line-light);
}

.mandates__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  padding: 16px 0;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}

/* Pfeil als gezeichneter Winkel statt Schriftzeichen: gleiche Strichstaerke
   wie der uebrige Feinstrich, unabhaengig von der Schriftart. */
.mandates__toggle .chev {
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--bronze-text);
  border-bottom: 1.5px solid var(--bronze-text);
  /* der Winkel steht auf der Spitze; der Versatz haelt ihn auf der Textlinie */
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s ease;
}

.mandates__toggle[aria-expanded="true"] .chev {
  transform: translateY(1px) rotate(225deg);
}

.mandates__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.mandates__panel.is-open {
  grid-template-rows: 1fr;
}

.mandates__inner {
  overflow: hidden;
}

.mandates__list {
  list-style: none;
  margin: 0;
  padding: 0 0 18px;
}

.mandates__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-light);
}

.mandates__list li:last-child {
  border-bottom: 0;
}

/* Der Wrapper-Span enthält das Komma + Whitespace zwischen Rolle und
   Organisation. Auf 0 setzen, damit nur die beiden Zeilen sichtbar sind
   (Rolle als Titel, Organisation als Unterzeile). */
.mandates__list li>span:last-child {
  font-size: 0;
}

.mandates__list .m-dot {
  /* wie die Rolle rechts daneben */
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.mandates__list .m-role {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.mandates__list .m-org {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-on-light-soft);
}

/* bra4jewellery als Link mit Icon am Ende. */
.mandates__list .m-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  color: var(--bronze-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}

.mandates__list .m-link svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.mandates__list .m-link:hover {
  color: var(--bronze-2);
}

.pm-back .mandates__list .m-link {
  color: var(--bronze-2);
}

.pm-back .mandates__list .m-link:hover {
  color: var(--text-on-dark);
}

.is-placeholder {
  opacity: .72;
  font-style: italic;
}

/* KONTAKT */
.contact {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst ist die Mindestbreite des Inhalts das
     Spaltenminimum und die Spalte wird breiter als der Kontaktbereich */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 72px);
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.contact-line {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
}

.contact-line .lbl {
  flex: 0 0 96px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze-2);
  padding-top: 3px;
}

.contact-line a,
.contact-line span {
  color: var(--text-on-dark);
  font-size: 16px;
}

.contact-line a:hover {
  color: var(--bronze-2);
}

.form {
  display: grid;
  gap: 18px;
  min-width: 0;
  align-content: start;
  /* Zeilen nicht auf Spaltenhöhe strecken -> Abstände bleiben fix, kein Springen beim Kartenladen */
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field label {
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}

/* Formular-Beschriftungen (Labels/Legenden) nicht markierbar; Eingaben bleiben es. */
.form label,
.form legend {
  -webkit-user-select: none;
  user-select: none;
}

.field input,
.field textarea {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  background: transparent;
  border: 0;
  border: 1px solid var(--line-dark);
  color: var(--text-on-dark);
  padding: 11px 2px;
  transition: border-color .25s ease;
}

/* iOS zoomt beim Antippen in Felder unter 16px hinein und bleibt nach dem
   Drehen des Geraets in diesem Massstab haengen. Nur auf Touchgeraeten;
   mit Maus bleibt es bei 15px. */
@media (hover: none) and (pointer: coarse) {

  .field input,
  .field textarea {
    font-size: 16px;
  }
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--bronze-2);
}

/* Ungültiges/fehlendes Feld: rote Border (auch im Fokus). */
.field input.is-invalid,
.field textarea.is-invalid,
.field input.is-invalid:focus,
.field textarea.is-invalid:focus {
  border-color: #e05a5a;
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

/* Anrede: Radiogruppe mit eigener Punktauswahl (Herr / Frau / k.A.) */
.anrede {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
  /* fieldset-Mindestbreite verhindern */
}

.anrede legend {
  padding: 0;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  margin-bottom: 9px;
}

.anrede__options {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.anrede .radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-on-dark);
  text-transform: none;
  /* nicht das Uppercase von .field label erben */
  letter-spacing: normal;
}

.anrede .radio input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: transparent;
  display: inline-block;
  flex: 0 0 auto;
  transition: border-color .2s ease;
}

.anrede .radio input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bronze-2);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease;
}

.anrede .radio input:checked {
  border-color: var(--bronze-2);
}

.anrede .radio input:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

.anrede .radio input:focus-visible {
  outline: 2px solid var(--bronze-2);
  outline-offset: 2px;
}

.form__note {
  font-size: 12.5px;
  color: var(--text-on-dark-soft);
}

.form__note a {
  color: inherit;
  text-decoration: underline;
}

/* Honeypot-Feld: für Menschen unsichtbar, für Bots ein Köder. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Statusmeldung nach dem Absenden */
.form__status {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.form__status.is-ok {
  color: #7fc9a0;
}

.form__status.is-error {
  color: #e39a9a;
}

.form__row {
  display: grid;
  /* Eingabefelder bringen eine recht grosse Mindestbreite mit */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.map-ph {
  margin-top: 40px;
}

/* Karte – Consent-Einbettung */
.map-embed {
  margin-top: 40px;
  position: relative;
  aspect-ratio: 16 / 9;
  /* Box hat vorher (Consent) wie nachher (Karte) dieselbe Größe */
  container-type: size;
  /* Consent-Text + Abstände skalieren mit der Boxhöhe (cqh) */
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-2);
}

/* Gezeichnete Karte (MapLibre). Die helle Grundflaeche des Stils steht schon
   vor der ersten Kachel, damit es beim Aufbau nicht dunkel aufblitzt. */
.map-embed--live {
  background: #f7f7f5;
}

.map-embed .maplibregl-map {
  width: 100%;
  height: 100%;
  font: inherit;
}

/* Quellenangabe (ODbL-Pflicht): dezent, aber klar lesbar */
/* Die Quellenangabe ist Lizenzpflicht und muss klar lesbar bleiben. Zwei
   Fallstricke: der Kontaktbereich vererbt seine helle Schrift hinein, und
   maplibre-gl.css wird erst beim Oeffnen der Karte nachgeladen - steht also
   nach dieser Datei. Darum die genauere Auswahl und die eigene Farbe. */
.map-embed .maplibregl-ctrl.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, .92);
  font-size: 10.5px;
  line-height: 1.5;
  padding: 1px 8px;
}

.map-embed .maplibregl-ctrl-attrib,
.map-embed .maplibregl-ctrl-attrib-inner {
  color: var(--text-on-light);
}

.map-embed .maplibregl-ctrl-attrib-inner a {
  color: var(--bronze-text);
}

/* Marker: schlichter Punkt in der Hausfarbe, weisser Ring als Kontrast */
.map-pin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bronze);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(22, 33, 46, .4);
  cursor: default;
}

/* Consent-Overlay füllt die Box exakt; die Größen richten sich nach der Boxhöhe,
   damit der Text immer in die 16:9-Box passt — egal wie schmal das Gerät ist.
   --mh/--mw werden gemessen und gesetzt; ohne JS greifen die Containermaße. */
.map-consent {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(var(--mh, 100cqh) * .03);
  text-align: left;
  padding: calc(var(--mh, 100cqh) * .10) calc(var(--mw, 100cqw) * .06);
  border: 0;
  color: var(--text-on-dark);
  background:
    linear-gradient(0deg, rgba(22, 33, 46, .88), rgba(22, 33, 46, .55)),
    repeating-linear-gradient(135deg, rgba(233, 225, 211, .04) 0 14px, rgba(233, 225, 211, .07) 14px 28px);
}

.map-consent__title {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  font-size: clamp(16px, calc(var(--mh, 100cqh) * .10), 24px);
}

.map-consent__hint {
  color: var(--text-on-dark-soft);
  max-width: 48ch;
  line-height: 1.35;
  font-size: clamp(10.5px, calc(var(--mh, 100cqh) * .06), 14px);
  padding-bottom: 20px;
}

.map-consent__cta {
  -webkit-appearance: none;
  appearance: none;
  /* kein iOS-Standard-Button-Look */
  margin-top: calc(var(--mh, 100cqh) * .01);
  padding: clamp(8px, calc(var(--mh, 100cqh) * .05), 12px) clamp(16px, calc(var(--mw, 100cqw) * .06), 24px);
  font-weight: 600;
  letter-spacing: .05em;
  font-size: clamp(12px, calc(var(--mh, 100cqh) * .06), 14px);
  background: var(--bronze-2);
  color: var(--ink);
  border: 1px solid var(--bronze-2);
  transition: background .25s ease, color .25s ease;
}

.map-consent__cta:hover {
  background: transparent;
  color: var(--bronze-2);
}

.map-embed__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--bronze-2);
}

.map-embed__link:hover {
  text-decoration: underline;
}

/* FOOTER */
.site-footer {
  background: var(--ink);
  color: var(--text-on-dark-soft);
  border-top: 1px solid var(--line-dark);
}

.site-footer .wrap {
  padding-block: 56px 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.footer-grid h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze-2);
  margin: 0 0 16px;
  font-weight: 600;
}

.footer-grid a {
  color: var(--text-on-dark-soft);
  font-size: 15px;
  line-height: 2;
}

.footer-grid a:hover {
  color: var(--text-on-dark);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
}

.footer-bottom .legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* LEGAL PAGES */
/* Kurze Seiten: die Kopfzeile bekommt ihre Trennlinie dauerhaft. Sonst
   haengt sie an der Klasse is-scrolled, die js/main.js erst ab 40 px
   Scrollweg setzt - auf einer Seite, die nie scrollt, also nie. */
.page--fill .site-header {
  background: rgba(22, 33, 46, .96);
  box-shadow: 0 1px 0 var(--line-dark);
}

/* Fuss knapper als auf der Startseite: hier steht nur die Schlusszeile. */
.page--fill .site-footer .wrap {
  padding-block: 26px 22px;
}

/* Kurze Seiten: Fuss an den unteren Fensterrand statt direkt unter den Text.
   svh statt vh, damit die Adressleiste auf dem Handy nichts abschneidet. */
.page--fill {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.page--fill main {
  flex: 1 0 auto;
}

.page--fill .site-footer {
  margin-top: auto;
}

/* Fehlerseite (404): dunkle Buehne, Inhalt mittig zwischen Kopf und Fuss */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Oben angesetzt statt mittig: die Ziffer soll dicht unter der Kopfzeile
     stehen, den Rest des Fensters fuellt der Abstand zum Fuss. Die Abstaende
     haengen zusaetzlich an der Fensterhoehe, damit die Seite auch auf flachen
     Fenstern ohne Scrollen hineinpasst. */
  /* max(): die Kopfzeile ist fest und 64 px hoch - darunter darf der
     Abstand nie fallen, sonst verschwindet die Ziffer dahinter */
  padding-top: max(76px, min(14vh, 118px));
  padding-bottom: clamp(20px, 5vh, 60px);
}

.notfound__code {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 128px;
  line-height: 1;
  color: var(--bronze-2);
  opacity: .35;
  margin: clamp(28px, 7.5vh, 76px) 0 clamp(28px, 7.5vh, 76px);
}

.notfound .title {
  font-size: clamp(22px, min(4.6vw, 6vh), 52px);
}

.notfound__text {
  max-width: 46ch;
  font-size: clamp(14px, min(1.35vw, 2.2vh), 19px);
}

/* Flache Fenster (Handy quer, kleine Notebooks): der Fuss ist auf einer
   Seite ohne eigenen Inhalt der groesste Brocken. Er wird hier flacher,
   damit die Seite ohne Scrollen ins Bild passt. */
@media (max-height: 520px) {
  .page--fill .notfound {
    padding-top: 76px;
    padding-bottom: 6px;
  }

  /* die Ziffer bringt bei fester Groesse ihre volle Zeilenhoehe mit; hier
     genuegt der Schriftkoerper, und die Abstaende folgen der Fensterhoehe */
  .page--fill .notfound__code {
    line-height: .92;
    margin-block: clamp(2px, 1vh, 16px) clamp(6px, 1.6vh, 16px);
  }

  .page--fill .notfound .title {
    font-size: clamp(20px, min(4.6vw, 5.4vh), 34px);
  }

  .page--fill .notfound__text {
    line-height: 1.4;
  }

  /* Fuss so flach wie moeglich, ohne gedraengt zu wirken */
  .page--fill .site-footer .wrap {
    padding-block: 6px 6px;
  }

  .page--fill .footer-bottom {
    padding-top: 6px;
  }

}


@media (max-height: 700px) {
  .page--fill .site-footer .wrap {
    padding-block: clamp(14px, 4vh, 56px) clamp(12px, 3vh, 30px);
  }

  .page--fill .notfound__code {
    margin-block: clamp(10px, 2.5vh, 32px);
  }
}

@media (max-width: 760px) {
  .notfound {
    padding-top: max(76px, min(11vh, 68px));
    padding-bottom: clamp(20px, 4vh, 36px);
  }

  /* Auf dem Handy nutzt die Ueberschrift die volle Spaltenbreite. */
  .notfound .title {
    font-size: clamp(26px, 8.8vw, 44px);
  }
}

.legal-page {
  padding-top: 120px;
}

.legal-page h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 550;
  color: var(--ink);
  margin-bottom: 10px;
}

/* Auf dem Handy nutzt die Seitenueberschrift die volle Spaltenbreite. Der
   Faktor ist so gewaehlt, dass der laengste Titel (Datenschutzerklaerung)
   auch auf 320 px breiten Geraeten einzeilig bleibt. */
@media (max-width: 760px) {
  .legal-page h1 {
    font-size: min(9.9vw, 46px);
  }

  /* kurze Titel duerfen groesser stehen - sie stossen nicht an den Rand */
  .legal-page h1.legal-title--kurz {
    font-size: min(20vw, 46px);
  }
}

.legal-page h2 {
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 500;
  color: var(--ink);
  margin: 38px 0 15px;
}

.legal-page h3 {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 500;
    margin: 27px 0 12px;
}

.legal-page p,
.legal-page address {
  font-style: normal;
  color: var(--text-on-light-soft);
  margin: 0 0 12px;
}

.legal-page .back {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 14px;
  color: var(--bronze-text);
}

.legal-meta {
  font-size: 13px;
  color: var(--text-on-light-soft);
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
}

/* ANIMATION */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Variante: von rechts einfahren (für das grosse „Über uns"-Bild,
   damit es nicht wie der übrige Inhalt von oben nach oben kommt). */
.reveal-x {
  opacity: 0;
  transform: translateX(64px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal-x.is-in {
  opacity: 1;
  transform: none;
}

/* Bild ohne Rahmen (Desktop: kein Verlauf). */
.ph--fade-right {
  border: 0;
}

/* Mobile: kein Fade, reguläre (vertikale) Animation, Bild randlos an
   den linken/rechten Bildschirmrand andocken (kein Margin). */
@media (max-width: 760px) {
  .ph--fade-right {
    /* Full-Bleed ohne vw (iOS-sicher): nur die Wrap-Innenabstände
       negativ ausgleichen, damit das Bild bündig an beide Ränder dockt. */
    width: auto;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    border-radius: 0;
  }

  .reveal-x {
    transform: translateY(24px);
  }

  /* Kein beiger Abstand mehr unter dem Bild … */
  #ueber {
    padding-bottom: 0;
  }

  /* Scrollabhängiger Fade: --ft/--fb (je 0–1) kommen aus main.js.
     Über dem Bild → oberer Fade (--ft, in Sand), darunter → unterer
     Fade (--fb, in Paper). Bildmitte mittig → beide 0 (kein Fade). */
  .ph--fade-right::before,
  .ph--fade-right::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 30%;
    z-index: 2;
    /* über dem Bild liegen, sonst ist der obere Fade verdeckt */
    pointer-events: none;
  }

  .ph--fade-right::before {
    /* Oberkante → Sand */
    top: 0;
    background: linear-gradient(to top, rgba(231, 223, 208, 0), var(--sand) 90%);
    opacity: var(--ft, 0);
  }

  .ph--fade-right::after {
    /* Unterkante → Paper */
    bottom: 0;
    background: linear-gradient(to bottom, rgba(246, 242, 234, 0), var(--paper) 90%);
    opacity: var(--fb, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-x {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .values {
    grid-template-columns: repeat(2, 1fr);
  }

  .value {
    border-bottom: 1px solid var(--line-dark);
  }

  .value:last-of-type {
    border-bottom: 0;
  }

  .projects {
    grid-template-columns: 1fr 1fr;
  }

  .team {
    grid-template-columns: 1fr;
    /* deutlich mehr Luft zwischen den beiden Personen, sonst klebt das
       zweite Portraet am Mandate-Aufklapper der ersten */
    row-gap: 56px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop-Nav rechtzeitig durch Burger ersetzen, damit die Kopfleiste
   nie gequetscht wirkt. */
@media (max-width: 1000px) {
  .nav {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  /* Kopfleiste auf Mobile immer sichtbar (auch ganz oben, nicht nur beim Scrollen) */
  .site-header {
    background: rgba(22, 33, 46, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 var(--line-dark);
  }
}

/* Schließen-Button (X) über dem Overlay halten */
body.menu-open .site-header {
  z-index: 140;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {

  .split,
  .contact,
  .person {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--reverse .split__media {
    order: 0;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .projects {
    grid-template-columns: 1fr;
  }

  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Team: Porträt-Platzhalter nicht übergross stapeln */
  .person {
    gap: 22px;
  }

  .person__name {
    font-size: 32px;
    /* fest gesetzt, sonst waechst der Absatzabstand (1em) mit der Schrift mit */
    margin: 0 0 20px;
  }

  .mandates__toggle .chev {
    margin-right: 24px;
  }

  .person__photo {
    max-width: 260px;
  }

  .hero__scroll {
    display: none;
  }
}

/* Markentext stufenweise ausblenden, je enger das Fenster wird */
@media (max-width: 600px) {
  .marke--zusatz {
    display: none;
  }

  /* Zusatz „Immobilien AG" ausblenden */
}

@media (max-width: 430px) {
  .brand__name {
    display: none;
  }

  /* nur noch das E&E-Zeichen */

  .values {
    grid-template-columns: 1fr;
  }

  .value {
    border-right: 0;
  }

  .site-header {
    height: 60px;
  }
}

/* BILD-LIGHTBOX (ph__img) */
/* Klick auf ein .ph__img öffnet es zentriert und vergrössert über der
   Seite; der Hintergrund verdunkelt sich, Scrollen ist gesperrt.          */

/* Nur Desktop: Zeigegeraet mit echtem Hover/Pointer. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .pcar .ph__img {
    cursor: zoom-in;
  }
}

.lb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--ink, #16212e);
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s ease;
}

.lb-backdrop.is-open {
  opacity: .92;
  pointer-events: auto;
  cursor: zoom-out;
}

.lb-img {
  position: fixed;
  z-index: 901;
  margin: 0;
  display: block;
  object-fit: cover;
  pointer-events: none;
  transition:
    top .42s cubic-bezier(.22, .78, .2, 1),
    left .42s cubic-bezier(.22, .78, .2, 1),
    width .42s cubic-bezier(.22, .78, .2, 1),
    height .42s cubic-bezier(.22, .78, .2, 1);
}

.lb-close {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 902;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(233, 225, 211, .25);
  border-radius: 50%;
  background: rgba(233, 225, 211, .1);
  color: var(--text-on-dark, #e9e1d3);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease .12s, background .2s ease, transform .2s ease;
}

.lb-close.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lb-close:hover {
  background: rgba(233, 225, 211, .22);
  transform: rotate(90deg);
}

/* Scroll-Sperre: kein overflow:hidden, damit der Scrollbalken bestehen
   bleibt und im Hintergrund nichts verrutscht. Das Blockieren uebernimmt
   main.js per Event. Nur der Cursor signalisiert die Sperre.            */
body.lb-open {
  cursor: zoom-out;
}

@media (max-width: 760px) {
  .lb-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-img {
    transition-duration: .01ms;
  }
}