:root {
  --text: #283033;
  --muted: #4f5d5a;
  --brand: #34484d;
  --accent: #805019;
  --dark: #28383c;
  --paper: #f2f3ef;
  --metal: #d6ddda;
  --mist: #e5eae8;
  --steel: #34484d;
  --brass: #805019;
  --graphite: #283033;
  --line: #bac5c1;
  --white: #fff;
  --radius: 6px;
  --shadow: 0 16px 40px rgba(41, 50, 53, .1);
  --max: 1180px;
}

body { background: var(--paper); color: var(--text); }
figure { margin: 0; }
.betreiber { background: #0b3c66; }
.kopf { background: rgba(244, 241, 233, .97); }
.marke { color: var(--steel); }
.marke small { color: #536260; }
.navigation { gap: 18px; }
.navigation a { font-size: 14px; }
.einordnung { color: #7b4e17; }

.wohnstrassen-banner {
  position: relative;
  height: 120px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.wohnstrassen-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.hero { padding: 32px 0 38px; }
.hero-journal {
  display: grid;
  grid-template-areas: "text bild" "wege wege";
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 26px 44px;
  align-items: center;
}
.hero-text {
  grid-area: text;
  min-width: 0;
  padding: 15px 25px 15px 22px;
  border-left: 4px solid var(--brass);
}
.hero h1 {
  max-width: 620px;
  margin-bottom: 17px;
  font-size: clamp(40px, 4.2vw, 52px);
}
.hero p { max-width: 640px; margin: 0; color: #455653; }
.journalbild {
  position: relative;
  overflow: hidden;
  border: 6px solid var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.journalbild::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .6);
  pointer-events: none;
}
.journalbild img { width: 100%; height: 100%; object-fit: cover; }
.hero-bild { grid-area: bild; height: 312px; }
.hero-bild img { object-position: 50% 50%; }

.zufahrtslinie {
  grid-area: wege;
  display: grid;
  grid-template-columns: 1.22fr 1fr .82fr;
  border-block: 1px solid var(--line);
  background: var(--white);
}
.zufahrtslinie a {
  position: relative;
  min-width: 0;
  padding: 18px 23px 17px 29px;
  border-right: 1px solid var(--line);
  text-decoration: none;
}
.zufahrtslinie a::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--brass);
}
.zufahrtslinie a:first-child { color: var(--white); background: var(--steel); }
.zufahrtslinie a:first-child::before { background: #f0c98d; }
.zufahrtslinie a:last-child { border-right: 0; }
.zufahrtslinie strong, .zufahrtslinie span { display: block; }
.zufahrtslinie strong { color: var(--steel); font-size: 17px; }
.zufahrtslinie a:first-child strong { color: var(--white); }
.zufahrtslinie span { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.zufahrtslinie a:first-child span { color: #dbe9e7; }
.zufahrtslinie a:hover strong { text-decoration: underline; text-underline-offset: 5px; }

.domainnotiz { background: var(--white); border-block: 1px solid var(--line); }
.domainnotiz-innen {
  display: grid;
  grid-template-columns: minmax(155px, .28fr) minmax(0, .72fr);
  gap: 54px;
  align-items: start;
}
.spur-label {
  position: relative;
  display: block;
  padding-top: 16px;
  color: var(--brass);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-top: 4px solid var(--brass);
}
.spur-label::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -32px;
  width: 32px;
  height: 4px;
  background: var(--metal);
}
.domainnotiz h2 { margin-bottom: 20px; }
.domainnotiz p { max-width: 810px; margin: 0 0 17px; }
.domainnotiz p:last-child { margin-bottom: 0; color: var(--muted); }

.eigentuemer { padding-bottom: 64px; }
.eigentuemer-journal {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);
  gap: 62px;
  align-items: start;
}
.eigentuemer-text { min-width: 0; }
.eigentuemer-text > p { max-width: 740px; }
.garagenprofil { margin: 31px 0; border-top: 1px solid var(--line); }
.garagenprofil article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 25px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}
.garagenprofil article > span {
  color: var(--brass);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.garagenprofil h3, .garagenprofil p { margin: 0; }
.garagenprofil h3 { color: var(--steel); font-size: 18px; }
.garagenprofil p { margin-top: 5px; color: var(--muted); font-size: 16px; }
.eigentuemer-bild { aspect-ratio: 4 / 3; align-self: center; }
.eigentuemer-bild img { object-position: 50% 50%; }
.wohnformen-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 48px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--steel);
  background: var(--white);
}
.wohnformen-band article { padding: 27px 30px; }
.wohnformen-band article + article { border-left: 1px solid var(--line); }
.wohnformen-band span {
  color: var(--brass);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.wohnformen-band p { margin: 8px 0 0; }

.fachgrenze { padding: 27px 0; color: var(--white); background: var(--steel); }
.fachgrenze-innen {
  display: grid;
  grid-template-columns: .38fr .62fr;
  gap: 42px;
  align-items: center;
}
.fachgrenze strong { color: #f4d69f; font-size: 17px; }
.fachgrenze p { margin: 0; color: #e1ecea; font-size: 15px; }

.kaeufer { background: #e3e7e4; }
.kaeufer-journal {
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}
.kaeufer-bild { aspect-ratio: 4 / 3; }
.kaeufer-bild img { object-position: 51% 50%; }
.kaeufer-text {
  padding: 20px 0 20px 25px;
  border-left: 4px solid var(--brass);
}
.kaeufer-text p { max-width: 670px; }
.knopf { border-radius: 4px; }
.knopf:hover { background: #26383c; border-color: #26383c; }
.knopf-sekundaer { color: var(--white); background: var(--brass); border-color: var(--brass); }
.knopf-sekundaer:hover { background: #623c0f; border-color: #623c0f; }

.awz-vertrauen { padding: 50px 0; color: var(--white); background: #405257; }
.awz-vertrauen .einordnung { color: #f2d49b; }
.awz-vertrauen h2 { margin: 0 0 8px; color: var(--white); }
.awz-vertrauen p { max-width: 600px; margin: 0; color: #dbe8e6; }
.awz-innen {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 56px;
  align-items: center;
}
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
.kennzahlen div { padding-left: 15px; border-left: 1px solid rgba(255,255,255,.38); }
.kennzahlen dt { font-size: 18px; font-weight: 800; }
.kennzahlen dd { margin: 3px 0 0; color: #c8dcda; font-size: 13px; }

.formular-bereich { background: var(--metal); color: var(--text); }
.formular-bereich .einordnung { color: #6f4310; }
.formular-einleitung h2 { color: var(--steel); }
.formular-einleitung p { color: #435451; }
.formular {
  position: relative;
  border: 1px solid #aeb9b5;
  border-top: 5px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.auswahl label { border-radius: 4px; }
.eingabe {
  display: block;
  width: 100%;
  margin: -10px 0 18px;
  padding: 13px 14px;
  border: 1px solid #65736f;
  border-radius: 4px;
  background: var(--white);
  color: var(--text);
}
textarea.eingabe { min-height: 150px; resize: vertical; }
.eingabe[aria-invalid="true"] { border-color: #a32121; box-shadow: 0 0 0 2px rgba(163,33,33,.16); }
.zustimmung input[aria-invalid="true"] { outline: 3px solid #a32121; outline-offset: 2px; }
.honigfeld {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.kontakt {
  color: var(--white);
  background: var(--dark);
  border-top: 5px solid var(--brass);
}
.kontakt .einordnung, .kontaktdaten a span { color: #f2d49b; }
.kontakt h2 { color: var(--white); }
.kontakt-name { color: #dbe7e5; }
.kontaktdaten a {
  display: block;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.4);
  text-decoration: none;
}
.kontaktdaten a span {
  display: block;
  font-size: 12px;
  font-style: normal;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.footer { background: var(--graphite); }
.footer-innen { flex-wrap: wrap; }
.symbolbild { border-radius: 2px; }
.kontakt :focus-visible, .footer :focus-visible, .awz-vertrauen :focus-visible, .fachgrenze :focus-visible { outline-color: #f4dca9; }

@media (max-width: 1020px) {
  .navigation { gap: 13px; }
  .hero-journal { gap: 24px 30px; }
  .hero h1 { font-size: 43px; }
  .eigentuemer-journal { gap: 40px; }
  .kaeufer-journal { gap: 42px; }
  .awz-innen { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .wohnstrassen-banner { height: 92px; }
  .wohnstrassen-banner img { object-position: 56% 54%; }
  .hero { padding-top: 30px; }
  .hero-journal { display: flex; flex-direction: column; align-items: stretch; }
  .hero-text { order: 1; padding: 0 0 0 17px; }
  .hero-bild { order: 2; height: 224px; }
  .zufahrtslinie { order: 3; grid-template-columns: 1fr; }
  .zufahrtslinie a { border-right: 0; border-bottom: 1px solid var(--line); }
  .zufahrtslinie a:last-child { border-bottom: 0; }
  .hero h1, .abschnitt h2, .kontakt h2 { hyphens: manual; overflow-wrap: normal; word-break: normal; }
  .domainnotiz-innen, .eigentuemer-journal, .garagenprofil article, .kaeufer-journal, .fachgrenze-innen { grid-template-columns: 1fr; }
  .domainnotiz-innen { gap: 25px; }
  .spur-label { max-width: 230px; }
  .spur-label::after { display: none; }
  .eigentuemer-journal { gap: 32px; }
  .eigentuemer-text { order: 1; }
  .eigentuemer-bild { order: 2; }
  .garagenprofil article { gap: 5px; }
  .wohnformen-band { grid-template-columns: 1fr; }
  .wohnformen-band article + article { border-left: 0; border-top: 1px solid var(--line); }
  .fachgrenze-innen { gap: 7px; }
  .kaeufer-text { order: 1; padding-left: 17px; }
  .kaeufer-bild { order: 2; }
  .kennzahlen { grid-template-columns: 1fr; }
  .kennzahlen div { padding: 7px 0 7px 16px; }
  .formular { padding: 24px 18px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 34px; }
  .hero-bild { height: 214px; }
  .hero-bild img { object-position: 54% 50%; }
  .zufahrtslinie a { padding: 16px 18px 16px 27px; }
  .wohnformen-band article { padding: 23px 20px; }
}

@media (max-width: 340px) {
  .marke { font-size: 16px; }
  .marke small { font-size: 9px; }
  .hero h1 { font-size: 31px; }
  .hero-text, .kaeufer-text { padding-left: 12px; }
  .zufahrtslinie strong { font-size: 16px; }
  .garagenprofil h3 { font-size: 17px; }
}

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