:root {
  --text: #20262e;
  --muted: #555d63;
  --bg: #f6f4ec;
  --soft: #e3ece5;
  --line: #c7ccc7;
  --brand: #234c84;
  --accent: #234c84;
  --dark: #183763;
  --radius: 0 24px 0 24px;
  --shadow: 0 16px 42px rgba(32, 38, 46, .09);
  --max: 1200px;
  --weiss: #ffffff;
  --sonne: #f0c15b;
  --sand: #ede1c8;
  --auswahl: #e6edf7;
  --eingaberand: #6b6f73;
  --fokus: #005a9c;
  --fehler: #9c2335;
  --abschluss: #1b2d3d;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.rahmen { width: min(var(--max), calc(100% - 48px)); }
.bildrahmen { margin: 0; border-radius: var(--radius); box-shadow: none; }
.betreiber { background: var(--dark); color: var(--weiss); }
.kopf { background: rgba(255, 255, 255, .97); border-bottom-color: var(--line); }
.kopf-innen { min-height: 70px; }
.marke { color: var(--brand); font-size: 25px; line-height: 1; overflow-wrap: normal; }
.marke small { margin-top: 6px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.navigation { gap: 24px; }
.navigation a { color: var(--text); }
.navigation a:hover { color: var(--brand); }
.menue-schalter { border-color: var(--eingaberand); border-radius: 8px; color: var(--text); background: var(--weiss); }

.wege-band {
  position: relative;
  height: 132px;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.wege-band img { height: 100%; object-fit: cover; object-position: 50% 52%; }

.mittelpunkt-hero { padding: 44px 0 40px; background: var(--bg); }
.hero-kopf { max-width: 940px; }
.einordnung { color: var(--brand); letter-spacing: .085em; }
.hero h1,
.abschnitt h2,
.awz-vertrauen h2,
.kontakt h2,
.formular-einleitung h2 {
  font-family: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 760;
}

.hero h1 {
  max-width: 900px;
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(46px, 4.5vw, 52px);
  line-height: 1.07;
  letter-spacing: -.035em;
}

.hero-kopf > p { max-width: 900px; margin: 0; color: var(--muted); font-size: 18px; }

.hero-buehne {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(245px, 1fr);
  gap: 0;
  align-items: stretch;
  margin-top: 28px;
}

.hero .hero-hauptbild { height: 320px; border-radius: 0 24px 0 24px; }
.hero-hauptbild img { height: 100%; object-fit: cover; object-position: 52% 50%; }
.begriff {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 28px 30px 34px;
  border-left: 5px solid var(--sonne);
  background: var(--sand);
}
.wegpunkt {
  position: absolute;
  left: -9px;
  top: 38px;
  width: 13px;
  height: 13px;
  background: var(--brand);
}
.begriff strong { display: block; margin-bottom: 9px; color: var(--text); font-size: 19px; line-height: 1.3; }
.begriff p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.handlungszeile {
  display: grid;
  grid-template-columns: 1.15fr 1.1fr auto;
  gap: 14px;
  align-items: stretch;
  margin-top: 24px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
}

.knopf {
  min-height: 50px;
  border-radius: 8px;
  border-color: var(--brand);
  background: var(--brand);
  color: var(--weiss);
}
.knopf:hover { border-color: var(--dark); background: var(--dark); }
.knopf-sekundaer { background: transparent; color: var(--brand); }
.knopf-sekundaer:hover { border-color: var(--brand); background: #f7e6b2; color: var(--brand); }
.mitarbeit-weg,
.textweg {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  color: var(--brand);
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.abschnitt { padding: 84px 0; }
.abschnitt h2 { color: var(--text); font-size: clamp(34px, 3.5vw, 40px); }

.eigentuemer-mittelpunkt { background: var(--soft); }
.eigentuemer-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: 68px;
  align-items: start;
}
.eigentuemer-text > p { max-width: 710px; margin: 0; color: var(--muted); }
.eigentuemer-bild { aspect-ratio: 7 / 5; margin-top: 42px; }
.eigentuemer-bild img { height: 100%; object-fit: cover; object-position: 57% 49%; }

.situationsweg {
  position: relative;
  margin-top: 34px;
  padding-left: 30px;
}
.situationsweg::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  bottom: 12px;
  width: 2px;
  background: var(--sonne);
}
.situationsweg article {
  position: relative;
  display: block;
  padding: 0 0 23px;
}
.situationsweg article:last-child { padding-bottom: 0; }
.situationsweg article > span {
  position: absolute;
  left: -30px;
  top: 8px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--brand);
  background: var(--soft);
}
.situationsweg h3 { margin: 0 0 4px; font-size: 20px; }
.situationsweg p { margin: 0; color: var(--muted); font-size: 16px; }

.immobilienfelder { background: var(--bg); }
.immobilienfelder-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 12px 64px;
  align-items: end;
  margin-bottom: 36px;
}
.immobilienfelder-kopf .einordnung,
.immobilienfelder-kopf h2 { grid-column: 1; }
.immobilienfelder-kopf h2 { margin-bottom: 0; }
.immobilienfelder-kopf p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding-left: 22px;
  border-left: 4px solid var(--sonne);
  color: var(--muted);
}
.immobilienfelder-liste { border-block: 1px solid var(--line); }
.immobilienfelder-liste article {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: 34px;
  align-items: baseline;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.immobilienfelder-liste article:last-child { border-bottom: 0; }
.immobilienfelder-liste h3,
.immobilienfelder-liste p { margin: 0; }
.immobilienfelder-liste h3 { color: var(--brand); }
.immobilienfelder-liste p { color: var(--muted); font-size: 16px; }
.fachgrenze {
  display: grid;
  grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr);
  gap: 34px;
  margin-top: 28px;
  padding: 22px 24px;
  border-left: 5px solid var(--brand);
  background: var(--sand);
}
.fachgrenze strong,
.fachgrenze p { margin: 0; }
.fachgrenze p { color: var(--muted); font-size: 16px; }

.kaeufer-weg { background: var(--weiss); }
.kaeufer-raster {
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(0, .95fr);
  gap: 68px;
  align-items: center;
}
.kaeufer-bild { aspect-ratio: 7 / 5; }
.kaeufer-bild img { height: 100%; object-fit: cover; object-position: 49% 51%; }
.kaeufer-text p { color: var(--muted); }
.kaeufer-text p:last-of-type { margin-bottom: 18px; }
.kaeufer-text .textweg { justify-content: flex-start; padding-inline: 0; }

.awz-vertrauen { padding: 43px 0; background: var(--sonne); color: var(--text); }
.awz-vertrauen-innen {
  display: grid;
  grid-template-columns: minmax(290px, .85fr) minmax(0, 1.15fr);
  gap: 58px;
  align-items: center;
}
.awz-vertrauen .einordnung { color: var(--brand); }
.awz-vertrauen h2 { margin: 0; color: var(--text); font-size: 30px; line-height: 1.18; }
.awz-fakten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.awz-fakten li { padding-left: 18px; border-left: 2px solid var(--brand); }
.awz-fakten strong,
.awz-fakten span { display: block; }
.awz-fakten strong { color: var(--text); font-size: 21px; }
.awz-fakten span { margin-top: 3px; color: var(--text); font-size: 14px; }

.formular-bereich { padding: 78px 0; background: var(--bg); color: var(--text); }
.formular-mitte { max-width: 780px; }
.formular-einleitung { margin-bottom: 28px; padding-left: 22px; border-left: 5px solid var(--sonne); }
.formular-bereich .formular-einleitung .einordnung { color: var(--brand); }
.formular-einleitung h2 { margin: 0 0 12px; color: var(--text); font-size: 40px; line-height: 1.1; }
.formular-einleitung p { max-width: 680px; margin: 0; color: var(--muted); }
.formular {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 0 24px 0 24px;
  background: var(--weiss);
  color: var(--text);
  box-shadow: var(--shadow);
}
.auswahl label {
  border-color: var(--eingaberand);
  border-radius: 8px;
  color: var(--text);
  padding-left: 34px;
}
.auswahl label::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--eingaberand);
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--weiss);
}
.auswahl label:has(input:checked) { border-color: var(--brand); background: var(--auswahl); box-shadow: inset 0 0 0 2px var(--brand); }
.auswahl label:has(input:checked)::before { border: 4px solid var(--brand); }
.auswahl label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.feld { display: block; margin-bottom: 0; font-weight: 700; }
.eingabe {
  display: block;
  width: 100%;
  margin: 7px 0 18px;
  padding: 13px 14px;
  border: 1px solid var(--eingaberand);
  border-radius: 8px;
  background: var(--weiss);
  color: var(--text);
}
textarea.eingabe { min-height: 150px; resize: vertical; }
.eingabe::placeholder { color: var(--muted); opacity: 1; }
.eingabe[aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 2px rgba(156, 35, 53, .18); }
.zustimmung input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--fehler); }
.freiwillig { border-color: var(--line); }
.zustimmung a { color: var(--brand); font-weight: 750; }
.formular .knopf { width: 100%; border-color: var(--brand); background: var(--brand); }
.formular .knopf:hover { border-color: var(--dark); background: var(--dark); }
.vertraulichkeit { color: var(--muted); }
.formular-fehler { color: var(--fehler); }
.honigfeld {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.kontakt { padding: 52px 0 58px; background: var(--dark); color: var(--weiss); }
.kontakt-innen { align-items: center; }
.kontakt .einordnung { color: var(--sonne); }
.kontakt h2 { margin: 0 0 8px; color: var(--weiss); }
.kontakt-name { color: var(--weiss); }
.kontaktdaten { font-style: normal; }
.kontaktdaten a {
  display: grid;
  gap: 2px;
  color: var(--weiss);
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.kontaktdaten span { color: var(--sonne); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.footer { background: var(--abschluss); color: var(--weiss); }
.footer-innen { flex-wrap: wrap; }
.footer a { color: var(--weiss); }
.bildhinweis { color: #f1f4f6; }
.symbolbild { background: rgba(27, 45, 61, .9); color: var(--weiss); }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.kontakt :focus-visible,
.footer :focus-visible,
.betreiber :focus-visible { outline-color: var(--sonne); }

@media (max-width: 1000px) {
  .hero-buehne { grid-template-columns: minmax(0, 2.65fr) minmax(235px, 1fr); }
  .eigentuemer-raster,
  .kaeufer-raster { gap: 44px; }
  .awz-vertrauen-innen { gap: 36px; }
}

@media (max-width: 900px) {
  .menue-schalter { display: block; }
  .navigation {
    display: none;
    position: absolute;
    right: 0;
    left: 0;
    top: 100%;
    padding: 16px 24px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--weiss);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
  }
  .navigation[data-offen="true"] { display: flex; }
  .navigation a { display: flex; min-height: 44px; align-items: center; }
  .hero-buehne,
  .eigentuemer-raster,
  .kaeufer-raster,
  .awz-vertrauen-innen { grid-template-columns: 1fr; }
  .hero-buehne { width: min(100%, 760px); }
  .hero .hero-hauptbild { order: 1; width: 100%; height: clamp(205px, 40vw, 320px); aspect-ratio: auto; }
  .begriff { order: 2; min-height: auto; }
  .handlungszeile { grid-template-columns: 1.15fr 1fr; }
  .mitarbeit-weg { grid-column: 1 / -1; }
  .eigentuemer-text { order: 1; }
  .eigentuemer-bild { order: 2; width: min(100%, 620px); margin-top: 0; }
  .kaeufer-text { order: 1; }
  .kaeufer-bild { order: 2; width: min(100%, 620px); }
  .immobilienfelder-kopf { display: block; }
  .immobilienfelder-kopf p { margin-top: 22px; }
  .awz-vertrauen-innen { gap: 28px; }
}

@media (max-width: 650px) {
  .rahmen { width: calc(100% - 28px); }
  .wege-band { height: 110px; }
  .wege-band img { object-position: 49% 52%; }
  .mittelpunkt-hero { padding: 34px 0 36px; }
  .hero h1 { font-size: clamp(34px, 10.6vw, 38px); line-height: 1.08; overflow-wrap: normal; hyphens: none; }
  .hero-kopf > p { font-size: 17px; }
  .hero .hero-hauptbild { min-height: 215px; aspect-ratio: auto; }
  .hero-hauptbild img { object-position: 54% 50%; }
  .begriff { padding: 22px 20px 22px 26px; }
  .handlungszeile { grid-template-columns: 1fr; gap: 10px; }
  .mitarbeit-weg { grid-column: auto; }
  .abschnitt { padding: 58px 0; }
  .abschnitt h2 { font-size: clamp(28px, 8.7vw, 32px); overflow-wrap: normal; hyphens: none; }
  .eigentuemer-bild img { object-position: 59% 48%; }
  .situationsweg { padding-left: 27px; }
  .situationsweg article > span { left: -27px; }
  .immobilienfelder-liste article,
  .fachgrenze { grid-template-columns: 1fr; gap: 7px; }
  .immobilienfelder-liste h3 { font-size: 20px; }
  .fachgrenze { padding: 21px 19px; }
  .kaeufer-bild img { object-position: 50% 50%; }
  .awz-fakten { grid-template-columns: 1fr; gap: 13px; }
  .awz-fakten li { padding: 3px 0 3px 15px; }
  .formular-bereich { padding: 58px 0; }
  .formular-einleitung { padding-left: 16px; }
  .formular-einleitung h2 { font-size: 32px; }
  .formular { padding: 24px 18px; }
}

@media (max-width: 360px) {
  .rahmen { width: calc(100% - 22px); }
  .marke { font-size: 20px; }
  .marke small { max-width: 180px; letter-spacing: .055em; }
  .hero h1 { font-size: 32px; }
  .hero .hero-hauptbild { min-height: 205px; }
  .knopf { padding-inline: 12px; }
  .abschnitt h2,
  .awz-vertrauen h2,
  .kontakt h2 { font-size: 26px; line-height: 1.2; overflow-wrap: normal; hyphens: none; }
  .formular { padding-inline: 14px; }
  .kontaktdaten a,
  .footer { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}