/* Magnolia Group – Onepager + Objektseite
   Schrift: DIN Pro, lokal eingebunden (Lizenz liegt beim Kunden)
   Maßstab: Design-PDF 1920 px breit, 1600 px Inhalt. Größen und Abstände skalieren
   per vw und erreichen bei 1920 px die aus der Vorlage gemessenen Werte. */

@font-face {
  font-family: "DIN Pro";
  src: url("fonts/dinpro-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("fonts/dinpro-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("fonts/dinpro-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --schwarz: #1D1D1B;
  --grau: #B4B4B4;
  --dunkel: #2B2B2B;
  --weiss: #FFFFFF;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "DIN Pro", Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: var(--schwarz);
  background: var(--weiss);
  font-size: clamp(18px, 1.146vw, 22px); /* Vorlage: 22 px bei 1920 */
  line-height: 2.4;                       /* Vorlage: 53 px Zeilenabstand */
  min-height: 100vh;                      /* kurze Seiten (Rechtstexte): Footer bleibt unten */
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

img { display: block; width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
p a { text-decoration: underline; text-underline-offset: 3px; }

.wrap {
  max-width: 1696px; /* 1600px Inhalt + Innenabstand */
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* ---------- Typografie ---------- */

h1, h2 {
  font-size: clamp(46px, 5.2vw, 80px); /* Vorlage: 80 px */
  font-weight: 300;
  line-height: 1.05;
}

.subline {
  font-size: clamp(20px, 1.67vw, 32px); /* Vorlage: 32 px */
  font-weight: 400;
  line-height: 1.4;
  margin-top: 8px;
}

.fliesstext { margin-top: clamp(28px, 5.6vw, 108px); }
.fliesstext p + p { margin-top: 2.4em; } /* eine Leerzeile, wie in der Vorlage */
.zwei > div > .fliesstext:first-child { margin-top: 0; }

.label {
  font-size: clamp(15px, 1.1vw, 21px); /* Vorlage: 21–23 px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.label-satz { text-transform: none; letter-spacing: 0; }

/* ---------- Header ---------- */

.kopf { padding-block: clamp(24px, 4.17vw, 80px); }

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

.logo { display: block; }

.logo-bild {
  display: block;
  height: clamp(56px, 5.5vw, 92px);
  width: auto;
}

/* Footer: schwarzes Logo-PNG auf dunklem Grund weiss invertieren */
.logo-bild-invers { filter: invert(1); }

.burger {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 4px;
  color: inherit;
}

.burger svg {
  display: block;
  width: clamp(40px, 3.2vw, 61px); /* Vorlage: 61 px */
  height: auto;
}

/* ---------- Overlay-Navigation ---------- */

.uebermenu {
  position: fixed;
  inset: 0;
  background: var(--weiss);
  z-index: 20;
  display: none;
  overflow-y: auto;
}

body.menu-offen .uebermenu { display: block; }
body.menu-offen { overflow: hidden; }

.uebermenu .wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-block: clamp(24px, 4.17vw, 80px);
}

.uebermenu-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.schliessen {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  padding: 4px 10px;
  color: inherit;
}

.uebermenu nav {
  margin: auto 0;
  padding-block: 40px;
  display: grid;
  gap: 6px;
}

.uebermenu nav a {
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 300;
  line-height: 1.35;
  color: var(--schwarz);
}

.uebermenu nav a:hover { color: var(--grau); }

/* ---------- Sektionen ---------- */

.abschnitt { padding-block: clamp(56px, 7.3vw, 140px); } /* Vorlage: ~280 px zwischen Sektionen */
.abschnitt-hero { padding-top: 0; padding-bottom: 0; }
.abschnitt-intro {
  padding-top: clamp(48px, 7.8vw, 150px);
  padding-bottom: clamp(24px, 2.9vw, 56px);
}
/* Teambild gehört optisch zu Projektmanagement: viel Luft davor, wenig danach */
.abschnitt-team { padding-bottom: 0; }
#projektmanagement { padding-top: clamp(40px, 5.2vw, 100px); }
.abschnitt-adressen { padding-top: clamp(16px, 1.9vw, 37px); }
/* Objektseite: engere bzw. weitere Übergänge laut Detail-PDF */
.abschnitt-eng { padding-top: clamp(30px, 3.4vw, 65px); }
.abschnitt-weit { padding-top: clamp(80px, 13.5vw, 260px); }

section[id] { scroll-margin-top: 20px; }

.intro {
  font-size: clamp(20px, 1.65vw, 32px); /* Vorlage: 32 px, 60 px Zeilenabstand */
  line-height: 1.9;
  max-width: 66%;
}
.intro p + p { margin-top: 1.9em; }

/* Zweispalter: Bilder sitzen in der Vorlage immer an der Achse bei 966 px.
   Text links + Bild rechts: 716 / 90 / 794. Bild links + Text rechts: 806 / 90 / 704. */
.zwei {
  display: grid;
  grid-template-columns: 716fr 794fr;
  gap: clamp(40px, 4.7vw, 90px);
  align-items: start;
}

.zwei-bild-links { grid-template-columns: 806fr 704fr; }
.zwei-mittig { align-items: center; }

/* Text links + Nummernliste rechts: Liste beginnt an der Textkante der Bild-links-Sektionen */
.zwei-nummern {
  grid-template-columns: 716fr 706fr;
  column-gap: clamp(40px, 9.27vw, 178px);
}

/* Städteliste (Objekt-Showcase) */
.staedte {
  list-style: none;
  padding-top: clamp(0px, 4.95vw, 95px); /* Vorlage: Liste beginnt 118 px unter Bildoberkante */
}
.staedte li {
  font-size: clamp(40px, 4.27vw, 82px); /* Vorlage: 82 px */
  font-weight: 300;
  line-height: 1.2;
  color: var(--grau);
}
.staedte li.aktiv { color: var(--schwarz); }
.staedte button {
  font: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.staedte button:hover, .staedte button:focus-visible { color: var(--schwarz); }
.staedte button:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 6px; }

.objekt-anzeige img { transition: opacity 0.2s ease; }
.objekt-anzeige img.wechselt { opacity: 0; }

.teaser { margin-top: clamp(24px, 3.1vw, 60px); }

.knopf {
  display: inline-block;
  margin-top: clamp(20px, 1.9vw, 37px);
  padding: 12px 72px;
  border: 1px solid var(--schwarz);
  background: var(--weiss);
  color: var(--schwarz);
  font-size: inherit;
  line-height: 1.4;
}

.knopf:hover { background: var(--schwarz); color: var(--weiss); }

/* Kennzahlen (Vertrieb) */
.kennzahlen {
  margin-top: clamp(36px, 3.5vw, 66px);
  display: grid;
  gap: clamp(24px, 2.9vw, 55px);
}

.kennzahl-wert {
  font-size: clamp(38px, 3.23vw, 62px); /* Vorlage: 62 px */
  font-weight: 300;
  line-height: 1.1;
}

/* Nummernlisten (01/02/03) */
.nummern {
  display: grid;
  gap: clamp(36px, 4.9vw, 94px);
  padding-top: clamp(0px, 13vw, 249px); /* erste Zeile auf Höhe der ersten Fließtextzeile */
}

.nummer-titel {
  font-size: clamp(30px, 3.23vw, 62px); /* Vorlage: 62 px, versal */
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
}

/* ---------- Adressen ---------- */

.adressen {
  display: grid;
  grid-template-columns: 806fr 704fr;
  gap: clamp(40px, 4.7vw, 90px);
  align-items: start;
}

.adressen-stapel {
  display: grid;
  gap: clamp(40px, 7.1vw, 137px);
}

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

.fuss {
  background: var(--dunkel);
  color: var(--weiss);
  font-size: clamp(16px, 1.25vw, 24px); /* Vorlage: 24 px */
  padding-block: clamp(56px, 6.25vw, 120px);
  margin-top: clamp(24px, 2.9vw, 55px);
}

.fuss .wrap {
  display: grid;
  grid-template-columns: 380fr 352fr 496fr 252fr; /* Spaltenkanten der Vorlage: 160 / 580 / 972 / 1508 */
  column-gap: clamp(24px, 2.1vw, 40px);
  row-gap: clamp(32px, 3.7vw, 70px);
  align-items: start;
}

.fuss .logo-bild { height: 48px; }

/* Sub-Footer: Unternehmen der Gruppe links, Copyright rechts */
.fuss .fuss-unten {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 4vw, 80px);
  padding-top: clamp(24px, 2vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.fuss-gruppe {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.fuss-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  opacity: 0.6;
}
.fuss-marken { display: flex; align-items: center; gap: 40px; }
.fuss-marken a { display: block; }
.fuss-marken img { display: block; height: 32px; width: auto; }
.fuss-marken a:hover { opacity: 0.7; }
.fuss-copyright { margin: 0; line-height: 1.62; opacity: 0.6; }

.fuss nav { display: grid; gap: 0; line-height: 1.62; }
.fuss nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sozial {
  margin-top: 8px; /* Icons optisch auf Höhe der ersten Menüzeile */
  display: flex;
  gap: 22px;
  align-items: center;
}

.sozial svg { width: 22px; height: 22px; display: block; }
.sozial a:hover { opacity: 0.7; }

/* ---------- Objekt-Detailseite ---------- */

.objekt-hero {
  align-items: center;
  padding-top: clamp(30px, 6.15vw, 118px);
  padding-bottom: clamp(20px, 3vw, 57px);
}

.info-block { padding-top: clamp(0px, 3vw, 58px); }

.info-block h3 {
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 400;
  line-height: 1.3;
}
.info-block h3 + p { margin-top: 6px; }
.info-block p + h3,
.info-block .fliesstext + h3 { margin-top: clamp(24px, 2.2vw, 40px); }
.info-block h3 + .fliesstext { margin-top: clamp(12px, 1.4vw, 24px); }

.bildstapel {
  display: grid;
  gap: clamp(40px, 4.7vw, 90px);
}

.zwei-weit {
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8.6vw, 165px);
}

.h2-mittel { font-size: clamp(34px, 3.4vw, 60px); line-height: 1.15; }
.h2-mittel + .fliesstext { margin-top: clamp(28px, 3vw, 56px); }

/* ---------- Rechtsseiten ---------- */

.abschnitt-rechtstext { padding-top: clamp(8px, 0.8vw, 16px); } /* Kopfabstand wie Startseite (Header-Innenabstand) */
.abschnitt-rechtstext h1 {
  font-size: clamp(30px, 2.5vw, 48px); /* Rechtsseiten: kleiner als die Sektionsüberschriften */
  line-height: 1.15;
}
.rechtstext {
  max-width: 66%;
  margin-top: clamp(24px, 2.1vw, 40px);
  line-height: 1.8; /* lange Rechtstexte: enger als der Fließtext der Startseite */
}
.rechtstext p + p, .rechtstext ul + p { margin-top: 1em; }
.rechtstext h2 {
  font-size: clamp(20px, 1.35vw, 26px); /* Zwischenüberschrift im Rechtstext, nicht die Sektionsgröße */
  font-weight: 400;
  line-height: 1.3;
  margin-top: clamp(28px, 2.6vw, 48px);
}
.rechtstext h3 {
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  margin-top: clamp(22px, 1.9vw, 36px);
}
.rechtstext h4 {
  font-size: inherit;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 1.4em;
}
.rechtstext h2 + p, .rechtstext h3 + p, .rechtstext h4 + p { margin-top: 6px; }
.rechtstext h2 + h3 { margin-top: 12px; }
.rechtstext h3 + h4 { margin-top: 8px; }
.rechtstext ul { margin-top: 1em; padding-left: 1.3em; }
.rechtstext li + li { margin-top: 0.6em; }
.rechtstext a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

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

@media (max-width: 1024px) {
  body { line-height: 2; }
  .zwei, .zwei-bild-links, .zwei-nummern, .zwei-weit { grid-template-columns: 1fr; }
  .zwei-mittig { align-items: start; }
  .info-block { padding-top: 0; }
  .zwei > .bild-erst { order: -1; }
  .nummern { padding-top: 0; }
  .staedte { padding-top: 0; }
  .intro, .rechtstext { max-width: 100%; }
  .fuss .wrap { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 3.7vw, 70px); }

  /* Gestapelt braucht es weniger Luft: Sektionen 40 + 40, Absätze gut eine Zeile */
  .abschnitt { padding-block: 40px; }
  .abschnitt-hero { padding-block: 0; }
  .abschnitt-team { padding-bottom: 0; }
  .abschnitt-adressen { padding-top: 16px; }
  .abschnitt-eng { padding-top: 30px; }
  .intro p + p { margin-top: 1.2em; }
  .fliesstext p + p { margin-top: 1.4em; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .h2-mittel { font-size: min(30px, 7.8vw); }
  .zwei-weit { gap: 40px; }
  .adressen { grid-template-columns: 1fr; }
  .fuss .wrap { grid-template-columns: 1fr; }
  .fuss .fuss-unten { display: grid; gap: 28px; justify-items: start; }
  .fuss-gruppe { display: grid; gap: 18px; }
  .knopf { display: block; text-align: center; }

  /* Mobil-Abstände: Sektionen 32 + 32 (sichtbar ~72 px), Bild zu Text 32, Hero zu Intro 24 */
  .abschnitt { padding-block: 32px; }
  .abschnitt-hero { padding-block: 0; }
  .abschnitt-team { padding-bottom: 0; }
  .abschnitt-adressen { padding-top: 16px; }
  .abschnitt-eng { padding-top: 24px; }
  .abschnitt-intro { padding-top: 24px; padding-bottom: 16px; }
  .intro p + p { margin-top: 1em; }
  #projektmanagement { padding-top: 32px; }
  .abschnitt-weit { padding-top: 48px; }
  .zwei { gap: 32px; }
  .zwei-weit { gap: 40px; }
  .adressen, .adressen-stapel, .bildstapel { gap: 32px; }
  .nummern { gap: 32px; }

  /* Headlines viewport-relativ, damit lange Worte einzeilig bleiben */
  h1, h2 { font-size: min(42px, 10.4vw); }
  .staedte li,
  .uebermenu nav a { font-size: min(40px, 10.4vw); }
  .kennzahl-wert { font-size: min(34px, 8.8vw); }
  .nummer-titel { font-size: min(30px, 8vw); }
}