/* IMMOTREND Vertrieb · immotrend.pro
   Markenfarben laut Markenrelaunch 2026. Keine weiteren Farbtöne. */

@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --logoblau: #27519b;
  --tiefblau: #1c3c78;
  --silber: #c9cccd;
  --hellblau: #e9eef6;
  --anthrazit: #1f2328;
  --weiss: #ffffff;
  --text: #333333;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --serif: "Merriweather", Georgia, serif;
  --breite: 1200px;
  --rand: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--text); background: var(--weiss); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--logoblau); }
h1, h2, h3, h4 { font-family: var(--sans); color: var(--anthrazit); margin: 0; }
p { margin: 0 0 1em; }
.innen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.zahl { font-variant-numeric: tabular-nums; }

/* Einheitliche Zonen jeder Sektion: Kennung, Überschrift, Einleitung, Inhalt */
.sektion { padding: clamp(72px, 10vw, 128px) 0; }
.sektion--hell { background: var(--hellblau); }
.sektion--dunkel { background: var(--tiefblau); color: rgba(255,255,255,.86); }
.sektion--dunkel h2, .sektion--dunkel h3 { color: var(--weiss); }
.kennung { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--logoblau); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.kennung::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.sektion--dunkel .kennung { color: var(--silber); }
.titel { font-size: clamp(30px, 4.2vw, 50px); font-weight: 700; line-height: 1.08; text-transform: uppercase; letter-spacing: -.01em; max-width: 18ch; }
.einleitung { font-size: clamp(17px, 1.6vw, 19px); max-width: 62ch; margin-top: 24px; }
.kopf { margin-bottom: clamp(40px, 6vw, 64px); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 16px 28px; border: 1px solid var(--logoblau); background: var(--logoblau); color: var(--weiss); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.knopf:hover { background: var(--tiefblau); border-color: var(--tiefblau); }
.knopf--hell { background: var(--weiss); color: var(--tiefblau); border-color: var(--weiss); }
.knopf--hell:hover { background: var(--hellblau); border-color: var(--hellblau); }
.knopf--rahmen { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.7); }
.knopf--rahmen:hover { background: rgba(255,255,255,.12); border-color: var(--weiss); }
.knopf svg { width: 16px; height: 16px; }

/* Kopfzeile */
.kopfzeile { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .25s, box-shadow .25s; }
.kopfzeile .innen { display: flex; align-items: center; justify-content: space-between; height: 76px; max-width: 1400px; }
.marke { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.marke img { height: 30px; width: auto; }
.marke .weiss { display: block; } .marke .farbig { display: none; }
.marke span { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--weiss); border-left: 1px solid rgba(255,255,255,.5); padding-left: 16px; text-transform: uppercase; }
.navigation { display: flex; align-items: center; gap: 30px; }
.navigation a { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--weiss); text-decoration: none; }
.navigation a:hover { opacity: .75; }
.navigation .knopf { padding: 11px 18px; font-size: 12px; }
.kopfzeile.fest { background: var(--weiss); box-shadow: 0 1px 0 rgba(31,35,40,.08); }
.kopfzeile.fest .marke .weiss { display: none; } .kopfzeile.fest .marke .farbig { display: block; }
.kopfzeile.fest .marke span { color: var(--logoblau); border-color: var(--silber); }
.kopfzeile.fest .navigation a:not(.knopf) { color: var(--anthrazit); }
.kopfzeile.fest .knopf--rahmen { color: var(--logoblau); border-color: var(--logoblau); }
.kopfzeile.fest .knopf--rahmen:hover { background: var(--hellblau); }
.menue-knopf { display: none; background: none; border: 0; padding: 8px; color: var(--weiss); cursor: pointer; }
.kopfzeile.fest .menue-knopf { color: var(--anthrazit); }

/* Titelbild */
.titelbild { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: var(--weiss); overflow: hidden; }
.titelbild img.bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.titelbild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,60,120,.55) 0%, rgba(28,60,120,.15) 38%, rgba(28,60,120,.78) 100%); }
.titelbild .innen { position: relative; z-index: 1; padding-bottom: clamp(56px, 9vh, 104px); max-width: 1400px; }
.titelbild .kennung { color: var(--weiss); }
.titelbild h1 { color: var(--weiss); font-size: clamp(38px, 6.6vw, 86px); line-height: 1.02; font-weight: 700; text-transform: uppercase; letter-spacing: -.015em; max-width: 15ch; }
.titelbild p { font-size: clamp(17px, 1.7vw, 20px); max-width: 52ch; margin: 28px 0 36px; color: rgba(255,255,255,.92); }
.titelbild .aktionen { display: flex; flex-wrap: wrap; gap: 14px; }

/* Bilanz */
.bilanz { background: var(--tiefblau); color: var(--weiss); }
.bilanz .innen { display: grid; grid-template-columns: repeat(4, 1fr); }
.bilanz .wert { padding: 40px 24px; border-left: 1px solid rgba(255,255,255,.14); }
.bilanz .wert:first-child { border-left: 0; padding-left: 0; }
.bilanz strong { display: block; font-family: var(--sans); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; }
.bilanz span { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--silber); }

/* Raster für Karten */
.raster { display: grid; gap: 1px; background: var(--silber); border: 1px solid var(--silber); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.karte { background: var(--weiss); padding: clamp(28px, 3vw, 40px); }
.karte .nr { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--logoblau); letter-spacing: .1em; }
.karte h3 { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 14px 0 12px; line-height: 1.35; }
.karte p { font-size: 15.5px; margin: 0; }

/* Zwei Wege */
.weg { background: var(--weiss); padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; }
.weg .art { font-family: var(--sans); font-size: 12px; letter-spacing: .18em; color: var(--logoblau); font-weight: 600; text-transform: uppercase; }
.weg h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; text-transform: uppercase; margin: 10px 0 18px; }
.weg ul { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--silber); }
.weg li { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--anthrazit); padding: 14px 0 14px 30px; border-bottom: 1px solid var(--silber); position: relative; }
.weg li::before { content: ""; position: absolute; left: 0; top: 21px; width: 14px; height: 7px; border-left: 2px solid var(--logoblau); border-bottom: 2px solid var(--logoblau); transform: rotate(-45deg); }

/* Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); counter-reset: schritt; border-top: 1px solid rgba(255,255,255,.22); }
.ablauf li { position: relative; padding: 34px 20px 0 0; counter-increment: schritt; }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--sans); font-weight: 700; font-size: 28px; color: var(--weiss); display: block; margin-bottom: 18px; }
.ablauf li::after { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--weiss); }
.ablauf h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.4; margin-bottom: 10px; }
.ablauf p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.78); }

/* Projekte */
.projekte { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.projekt { display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--silber); }
.projekt .foto { aspect-ratio: 4 / 3; overflow: hidden; }
.projekt .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.projekt:hover .foto img { transform: scale(1.03); }
.projekt .text { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.projekt .art { font-family: var(--sans); font-size: 11.5px; letter-spacing: .16em; font-weight: 600; color: var(--logoblau); text-transform: uppercase; }
.projekt h3 { font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 8px 0 12px; }
.projekt p { font-size: 15px; flex: 1; }
.projekt dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 0; border-top: 1px solid var(--silber); }
.projekt dl div { padding-top: 16px; }
.projekt dt { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,35,40,.55); }
.projekt dd { margin: 4px 0 0; font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--anthrazit); }
.hinweis { font-size: 13.5px; color: rgba(31,35,40,.65); margin-top: 28px; }
.sektion--dunkel .hinweis { color: rgba(255,255,255,.6); }

/* Argumente */
.argumente { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--silber); border: 1px solid var(--silber); }
.argument { background: var(--weiss); padding: clamp(28px, 3.4vw, 44px); }
.argument .art { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; font-weight: 600; color: var(--logoblau); text-transform: uppercase; }
.argument h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; margin: 8px 0 20px; }
.argument table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.argument th { font-family: var(--sans); text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,35,40,.6); font-weight: 600; padding: 14px 16px 14px 0; vertical-align: top; width: 34%; border-top: 1px solid var(--silber); }
.argument td { padding: 12px 0; border-top: 1px solid var(--silber); vertical-align: top; line-height: 1.6; }

/* Vertriebsleitung */
.leitung { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.leitung .portrait { aspect-ratio: 4 / 5; background: var(--tiefblau) url("../img/va-wohnen.jpg") center / cover; position: relative; }
.leitung .portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,60,120,.15), rgba(28,60,120,.85)); }
.leitung .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.leitung .portrait .name { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; color: var(--weiss); }
.leitung .portrait .name strong { display: block; font-family: var(--sans); font-size: 26px; font-weight: 700; text-transform: uppercase; line-height: 1.15; }
.leitung .portrait .name span { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--silber); }
.zitat { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.6; color: var(--anthrazit); margin: 0 0 28px; padding-left: 28px; border-left: 2px solid var(--logoblau); }
.kontaktzeile { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.kontaktzeile .knopf--leise { background: transparent; color: var(--logoblau); }
.kontaktzeile .knopf--leise:hover { background: var(--hellblau); }

/* Partnerportal */
.portal { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.funktionen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); }
.funktion { background: var(--tiefblau); padding: 28px; }
.funktion .nr { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--silber); }
.funktion h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; margin: 10px 0 8px; letter-spacing: .03em; }
.funktion p { font-size: 14.5px; margin: 0; color: rgba(255,255,255,.76); }

/* Partner werden */
.anfrage { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.schritte { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: s; border-top: 1px solid var(--silber); }
.schritte li { counter-increment: s; padding: 20px 0 20px 56px; position: relative; border-bottom: 1px solid var(--silber); }
.schritte li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 20px; font-family: var(--sans); font-weight: 700; color: var(--logoblau); }
.schritte strong { font-family: var(--sans); font-weight: 700; text-transform: uppercase; font-size: 14px; color: var(--anthrazit); display: block; letter-spacing: .03em; }
.schritte span { font-size: 15px; }
.formular { background: var(--weiss); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--silber); }
.formular .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formular label { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(31,35,40,.7); margin-bottom: 6px; }
.formular .feld { margin-bottom: 18px; }
.formular input, .formular select, .formular textarea { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--anthrazit); background: var(--weiss); border: 1px solid var(--silber); border-radius: 0; padding: 13px 14px; appearance: none; }
.formular select { background-image: linear-gradient(45deg, transparent 50%, var(--logoblau) 50%), linear-gradient(135deg, var(--logoblau) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--logoblau); outline-offset: -1px; }
.formular .einwilligung { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 13.5px; line-height: 1.6; margin: 8px 0 24px; }
.formular .einwilligung input { width: 18px; height: 18px; margin-top: 3px; appearance: auto; padding: 0; }
.formular .info { background: var(--hellblau); border-left: 3px solid var(--logoblau); padding: 16px 18px; font-size: 14.5px; margin-bottom: 24px; }
.formular .info strong { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tiefblau); display: block; margin-bottom: 2px; }
.versteckt { position: absolute; left: -9999px; }

/* Abschluss */
.abschluss { position: relative; color: var(--weiss); overflow: hidden; }
.abschluss img.bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abschluss::after { content: ""; position: absolute; inset: 0; background: rgba(28,60,120,.82); }
.abschluss .innen { position: relative; z-index: 1; padding-top: clamp(80px, 12vw, 140px); padding-bottom: clamp(80px, 12vw, 140px); text-align: center; }
.abschluss h2 { color: var(--weiss); font-size: clamp(30px, 4.4vw, 54px); font-weight: 700; text-transform: uppercase; line-height: 1.08; max-width: 20ch; margin: 0 auto; }
.abschluss p { max-width: 54ch; margin: 24px auto 36px; color: rgba(255,255,255,.88); }
.abschluss .aktionen { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* Fußzeile */
.fusszeile { background: var(--anthrazit); color: rgba(255,255,255,.7); font-family: var(--sans); font-size: 13px; line-height: 1.8; }
.fusszeile .innen { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 40px; }
.fusszeile img { height: 30px; width: auto; margin-bottom: 20px; }
.fusszeile h4 { color: var(--weiss); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.fusszeile a { color: rgba(255,255,255,.7); text-decoration: none; display: block; }
.fusszeile a:hover { color: var(--weiss); }
.fusszeile .unten { border-top: 1px solid rgba(255,255,255,.12); }
.fusszeile .unten .innen { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; padding-bottom: 22px; font-size: 12px; }
.fusszeile .unten a { display: inline; margin-left: 24px; }

/* Einblenden beim Scrollen */
.einblenden { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.einblenden.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .einblenden { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Unterseiten */
.unterseite { padding: 150px 0 100px; }
.unterseite h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; text-transform: uppercase; margin-bottom: 36px; }
.unterseite h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin: 32px 0 8px; }
.unterseite .innen { max-width: 820px; }

/* Responsiv */
@media (max-width: 1100px) {
  .ablauf { grid-template-columns: repeat(4, 1fr); row-gap: 40px; }
  .navigation a:not(.knopf) { display: none; }
}
@media (max-width: 900px) {
  .bilanz .innen { grid-template-columns: repeat(2, 1fr); }
  .bilanz .wert:nth-child(3) { border-left: 0; padding-left: 0; }
  .bilanz .wert { border-top: 1px solid rgba(255,255,255,.14); }
  .bilanz .wert:nth-child(-n+2) { border-top: 0; }
  .raster--3, .projekte { grid-template-columns: 1fr 1fr; }
  .leitung, .portal, .anfrage, .argumente { grid-template-columns: 1fr; }
  .leitung .portrait { max-width: 460px; }
  .fusszeile .innen { grid-template-columns: 1fr 1fr; }
  .menue-knopf { display: block; }
  .navigation { display: none; }
  .navigation.offen { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--weiss); border-top: 1px solid var(--silber); box-shadow: 0 12px 24px rgba(31,35,40,.08); padding: 8px var(--rand) 20px; }
  .navigation.offen a:not(.knopf) { display: block; color: var(--anthrazit); padding: 14px 0; border-bottom: 1px solid var(--hellblau); }
  .navigation.offen .knopf { margin-top: 14px; }
  .navigation.offen .knopf--rahmen { color: var(--logoblau); border-color: var(--logoblau); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .raster--3, .raster--2, .projekte, .funktionen { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .formular .zeile { grid-template-columns: 1fr; gap: 0; }
  .marke span { display: none; }
  .fusszeile .innen { grid-template-columns: 1fr; }
  .fusszeile .unten a { margin: 0 16px 0 0; }
  .titelbild .aktionen .knopf { width: 100%; }
}

/* Feinschliff */
.bilanz strong { white-space: nowrap; font-size: clamp(26px, 3vw, 38px); }
.projekt dl { grid-template-columns: auto auto auto; justify-content: space-between; column-gap: 12px; }
.projekt dd { white-space: nowrap; font-size: 14px; }
.formular .einwilligung { font-family: var(--serif); font-weight: 300; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); }
.abschluss .kennung { color: var(--silber); }
.abschluss .kennung::before { display: none; }
@media (max-width: 640px) { .bilanz strong { font-size: 26px; } }
.projekt .foto { position: relative; }
.projekt .foto img { position: absolute; inset: 0; }
.titelbild .innen { padding-top: 120px; }
.bilanz span { display: block; line-height: 1.5; margin-top: 6px; }
@media (max-width: 640px) { .titelbild h1 { font-size: 36px; } .titelbild p { font-size: 16px; } }
.projekte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .projekte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .projekte { grid-template-columns: minmax(0, 1fr); } }
.projekt .text { padding: 26px 24px; }
.projekt dt { letter-spacing: .08em; font-size: 10px; }
.projekt dd { font-size: 13.5px; }
.projekt dl { column-gap: 8px; }

/* Kennzahlen wie Hauptseite */
.bilanz { background: var(--weiss); color: var(--anthrazit); }
.bilanz .innen { display: block; }
.kacheln { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 48px; align-items: start; }
.kachel { min-height: 210px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 18px 40px rgba(28,60,120,.14); }
.kachel .kn { font-family: var(--sans); font-weight: 700; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; white-space: nowrap; }
.kachel .kn sup { font-size: .36em; font-weight: 600; margin-left: 4px; vertical-align: top; position: relative; top: .1em; }
.kachel .kl { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.45; margin-top: 40px; }
.k1, .k4 { background: var(--hellblau); color: var(--tiefblau); }
.k2, .k6 { background: var(--logoblau); color: var(--weiss); }
.k3, .k5 { background: var(--tiefblau); color: var(--weiss); }
.k2, .k4, .k6 { margin-top: 56px; }
.bilanz-zusatz { margin-top: 36px; font-size: 15px; color: var(--anthrazit); }
.bilanz-zusatz strong { font-family: var(--sans); color: var(--logoblau); }
@media (max-width: 1100px) { .kacheln { grid-template-columns: repeat(3, 1fr); } .k2, .k4, .k6 { margin-top: 0; } .k2, .k5 { margin-top: 32px; } }
@media (max-width: 640px) { .kacheln { grid-template-columns: repeat(2, 1fr); gap: 12px; } .kachel { min-height: 160px; } .k2, .k5 { margin-top: 0; } .k2, .k4, .k6 { margin-top: 24px; } }

/* Fußzeile wie Hauptseite */
.fusszeile { background: var(--tiefblau); color: rgba(255,255,255,.75); }
.fusszeile a { color: rgba(255,255,255,.75); }
.fusszeile .unten { border-top-color: rgba(255,255,255,.16); }

/* Kontaktknöpfe in einer Reihe */
.kontaktzeile { flex-wrap: nowrap; gap: 12px; }
.kontaktzeile .knopf { padding: 16px 22px; white-space: nowrap; }
.kontaktzeile .knopf--symbol { padding: 0; width: 54px; flex: 0 0 54px; }
.kontaktzeile .knopf--symbol svg { width: 22px; height: 22px; }
@media (max-width: 1200px) { .kontaktzeile .knopf { padding: 16px 16px; letter-spacing: .08em; } }
@media (max-width: 560px) { .kontaktzeile { flex-wrap: wrap; } }

/* Porträt */
.leitung .portrait img { object-position: center 20%; }
.leitung .portrait::after { z-index: 1; background: linear-gradient(180deg, rgba(28,60,120,0) 55%, rgba(28,60,120,.82) 100%); }

/* Vor Ort */
.galerie { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 12px; margin-top: 48px; }
.galerie figure { margin: 0; overflow: hidden; }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.galerie figure:hover img { transform: scale(1.03); }
.galerie .g1 { grid-row: 1 / 3; }
.galerie .g2 { grid-column: 2 / 4; }
@media (max-width: 900px) { .galerie { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 200px 200px; } .galerie .g1 { grid-row: auto; grid-column: 1 / 3; } .galerie .g2 { grid-column: 1 / 3; } }
.bilanz .bilanz-zusatz strong { display: inline; font-size: inherit; white-space: nowrap; }
.kontaktzeile .knopf--mail svg { display: none; }
@media (max-width: 560px) {
  .kontaktzeile { flex-wrap: nowrap; }
  .kontaktzeile .knopf:first-child { flex: 1 1 auto; padding: 16px 12px; }
  .kontaktzeile .knopf--mail { padding: 0; width: 54px; flex: 0 0 54px; }
  .kontaktzeile .knopf--mail span { display: none; }
  .kontaktzeile .knopf--mail svg { display: block; width: 22px; height: 22px; }
}
.kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .kachel { padding: 18px 14px; } .kachel .kn { font-size: 24px; } .kachel .kl { font-size: 12px; } }
.galerie .g2 img { object-position: center 30%; }
@media (max-width: 900px) { .galerie .g2 img { object-position: center 25%; } }
@media (max-width: 900px) { .marke span { display: block; } .marke { gap: 12px; } .marke span { padding-left: 12px; font-size: 10.5px; } }
@media (max-width: 380px) { .kopfzeile .innen { padding-left: 16px; padding-right: 16px; } .marke img { height: 26px; } }
@media (max-width: 400px) {
  .ablauf { grid-template-columns: minmax(0, 1fr); }
  .projekt dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 4px; }
  .projekt dd { white-space: normal; }
}
@media (max-width: 1000px) { .leitung, .portal, .anfrage, .argumente { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .argument dl, .argument dl div { grid-template-columns: minmax(0, 1fr); } .argument dt, .argument dd { min-width: 0; overflow-wrap: anywhere; } .kontaktzeile { gap: 8px; } .kontaktzeile .knopf:first-child { padding: 16px 8px; letter-spacing: .04em; font-size: 12px; } .kontaktzeile .knopf--symbol, .kontaktzeile .knopf--mail { width: 48px; flex-basis: 48px; } }
@media (max-width: 400px) { .argument { padding: 22px 16px; } .argument th { width: 38%; padding-right: 10px; letter-spacing: .06em; } .argument td { overflow-wrap: anywhere; } }
html, body { overflow-x: clip; }

/* Kennzahlen: übernommen von immotrend.com */
.tiles-k { position: relative; margin-top: clamp(50px, 6vw, 90px); }
.tk { position: absolute; border-radius: 10px; color: var(--weiss); padding: clamp(18px, 1.8vw, 28px); display: flex; flex-direction: column; justify-content: space-between; box-shadow: rgba(20,35,80,.22) 0 30px 60px; transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s; opacity: 0; translate: 0 40px; }
.tk:hover { transform: translateY(-6px); box-shadow: rgba(20,35,80,.28) 0 38px 70px; }
.tiles-k.go .tk { opacity: 1; translate: 0 0; transition: opacity .9s cubic-bezier(.22,.61,.36,1), translate .9s cubic-bezier(.22,.61,.36,1), transform .5s, box-shadow .5s; }
.tiles-k.go .t2 { transition-delay: .08s; } .tiles-k.go .t3 { transition-delay: .16s; } .tiles-k.go .t4 { transition-delay: .24s; } .tiles-k.go .t6 { transition-delay: .32s; } .tiles-k.go .t5 { transition-delay: .4s; }
.tk-n { font-family: var(--sans); font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-n sup { font-size: .42em; vertical-align: top; position: relative; top: .12em; margin-left: 4px; letter-spacing: 0; white-space: nowrap; }
.tk-l { font-family: var(--sans); font-size: clamp(14px, 1.2vw, 18px); line-height: 1.35; font-weight: 600; }
.tk.t1, .tk.t4 { color: var(--tiefblau); background: var(--hellblau); }
.tk.t2, .tk.t5 { background: var(--logoblau); }
.tk.t3, .tk.t6 { background: var(--tiefblau); }
@media (min-width: 901px) {
  .tiles-k { height: clamp(500px, 42vw, 640px); }
  .tk.t1 { left: 0; top: 16%; width: 21%; height: 58%; z-index: 1; }
  .tk.t2 { left: 20.5%; top: 54%; width: 20.5%; height: 48%; z-index: 2; }
  .tk.t3 { left: 36%; top: 0; width: 21%; height: 58%; z-index: 3; }
  .tk.t4 { left: 51%; top: 38%; width: 22%; height: 54%; z-index: 4; }
  .tk.t6 { left: 67%; top: 4%; width: 27%; height: 44%; z-index: 5; }
  .tk.t5 { left: 83%; top: 46%; width: 17%; height: 44%; z-index: 6; }
  .tk-n { font-size: clamp(32px, 3.4vw, 56px); }
}
@media (max-width: 900px) {
  .tiles-k { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
  .tk { position: static; min-height: 150px; }
  .tk-n { font-size: clamp(28px, 9vw, 44px); }
}
@media (max-width: 380px) { .tk { padding: 16px 14px; min-height: 130px; } .tk-n { font-size: 26px; } .tk-l { font-size: 13px; } }

.mrd { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid var(--silber); }
.bs-eb { display: block; font-family: var(--sans); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(31,35,40,.6); }
.mrd-t h3 { margin: 6px 0 12px; font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 34px); color: var(--tiefblau); }
.mrd-t p { margin: 0 0 18px; line-height: 1.7; }
.pfeil { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--sans); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--logoblau); }
.pfeil::after { content: "⟶"; font-size: 18px; letter-spacing: 0; transition: transform .3s; }
.pfeil:hover::after { transform: translateX(6px); }
.mrd-lab { display: flex; justify-content: space-between; gap: 16px; font-family: var(--sans); font-size: 14px; color: rgba(31,35,40,.6); margin-bottom: 12px; }
.mrd-lab b { color: var(--tiefblau); font-size: clamp(18px, 1.6vw, 24px); margin-right: 4px; font-variant-numeric: tabular-nums; }
.mrd-lab span:last-child { text-align: right; }
.mrd-bar { position: relative; height: 10px; background: var(--hellblau); border-radius: 5px; overflow: hidden; }
.mrd-bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--logoblau), var(--tiefblau)); border-radius: 5px; transition: width 2.4s cubic-bezier(.22,.61,.36,1); }
.mrd.go .mrd-bar > span { width: 98.5%; }
.mrd-bar::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1.5%; background: var(--logoblau); border-radius: 0 5px 5px 0; opacity: 0; }
.mrd.go .mrd-bar::after { animation: mrdP 1.8s ease-in-out 2.6s infinite; }
@keyframes mrdP { 0%, 100% { opacity: 0; } 50% { opacity: .45; } }
.mrd-f { margin: 20px 0 0; font-size: 14.5px; color: rgba(31,35,40,.6); }
@media (max-width: 900px) { .mrd { grid-template-columns: minmax(0,1fr); align-items: start; } }
@media (max-width: 560px) { .mrd-lab b { display: block; margin: 0 0 2px; } }
@media (prefers-reduced-motion: reduce) { .tk { opacity: 1; translate: none; } .mrd-bar > span { transition: none; width: 98.5%; } .mrd.go .mrd-bar::after { animation: none; } }

/* Team: Foto und Knöpfe schließen unten bündig ab */
@media (min-width: 1001px) { .leitung { align-items: end; } }
.mrd-lab b { font-family: var(--sans); font-weight: 700; }
@media (max-width: 900px) { .tk-n { font-size: clamp(26px, 7.6vw, 42px); } .tk-n sup { margin-left: 2px; } }