:root {
  --text: #28292d;
  --muted: #5b5859;
  --bg: #fffdf8;
  --soft: #f2e2df;
  --line: #c9c3bc;
  --brand: #7a3048;
  --accent: #7a3048;
  --dark: #27485c;
  --radius: 6px;
  --shadow: 0 15px 38px rgba(45, 53, 64, .09);
  --max: 1180px;
  --weiss: #ffffff;
  --arkadenhimmel: #e4ecef;
  --basalt: #2d3540;
  --eingaberand: #756e69;
  --fokus: #00617a;
  --fokus-dunkel: #ffe2a3;
}

body { background: var(--bg); color: var(--text); }
.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, 253, 248, .97); border-bottom-color: var(--line); }
.kopf-innen { min-height: 70px; }
.marke { color: var(--brand); font-size: 25px; line-height: 1; }
.marke small { margin-top: 6px; color: var(--muted); font-size: 10px; letter-spacing: .13em; }
.navigation { gap: 23px; }
.navigation a { color: var(--text); }
.navigation a:hover { color: var(--brand); }
.menue-schalter { border-color: var(--eingaberand); border-radius: 4px; color: var(--text); background: var(--bg); }

.fassadenband {
  position: relative;
  height: 126px;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--arkadenhimmel);
}
.fassadenband img { height: 100%; object-fit: cover; object-position: 50% 50%; }

.platzkante-hero { padding: 42px 0 38px; background: var(--bg); }
.platz-einstieg {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(470px, 1.14fr);
  gap: 58px;
  align-items: start;
}
.platz-leittext { padding-top: 14px; }
.einordnung { color: var(--brand); letter-spacing: .1em; }
.hero h1,
.abschnitt h2,
.awz-vertrauen h2,
.kontakt h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}
.hero h1 {
  max-width: 650px;
  margin: 0 0 21px;
  color: var(--text);
  font-size: clamp(44px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.hero p { max-width: 620px; margin-bottom: 0; color: var(--muted); font-size: 18px; }
.platz-bildspalte { display: grid; gap: 0; }
.hero .platz-hauptbild { height: 308px; border-radius: 6px 6px 0 0; }
.platz-hauptbild img { height: 100%; object-fit: cover; object-position: 52% 50%; }
.radius-hinweis {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  padding: 18px 21px;
  border-left: 4px solid var(--brand);
  background: var(--arkadenhimmel);
}
.radius-hinweis strong { color: var(--text); }
.radius-hinweis p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.platz-wege {
  display: grid;
  grid-template-columns: 1.25fr 1.05fr auto;
  gap: 14px;
  align-items: stretch;
  margin-top: 25px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.knopf { min-height: 50px; border-radius: 4px; border-color: var(--brand); background: var(--brand); color: var(--weiss); }
.knopf:hover { background: #61243a; border-color: #61243a; }
.knopf-sekundaer { background: transparent; color: var(--brand); }
.knopf-sekundaer:hover { background: #f2e2df; color: #61243a; }
.mitarbeit-weg {
  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: 74px 0; }
.abschnitt h2 { color: var(--text); font-size: clamp(32px, 3.5vw, 40px); }
.lageprofil { background: var(--weiss); }
.lageprofil-kopf {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 44px;
  align-items: end;
  margin-bottom: 30px;
}
.lageprofil-kopf .einordnung { margin: 0 0 8px; }
.lageprofil-kopf h2 { margin: 0; }
.lageprofil-zeilen { border-bottom: 1px solid var(--line); }
.lageprofil-zeilen article {
  display: grid;
  grid-template-columns: 54px 240px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.lageprofil-zeilen article > span { color: var(--brand); font-size: 13px; font-weight: 800; letter-spacing: .11em; }
.lageprofil-zeilen h3,
.lageprofil-zeilen p { margin: 0; }
.lageprofil-zeilen p { color: var(--muted); font-size: 16px; }

.eigentuemer-platzkante { background: var(--soft); }
.eigentuemer-raster {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 68px;
  align-items: center;
}
.eigentuemer-bild { aspect-ratio: 7 / 5; }
.eigentuemer-bild img { height: 100%; object-fit: cover; object-position: 50% 47%; }
.eigentuemer-text p { margin: 0; color: var(--muted); }
.platz-situationen { margin-top: 45px; border-bottom: 1px solid rgba(91, 88, 89, .34); }
.platz-situationen article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 22px;
  padding: 17px 0;
  border-top: 1px solid rgba(91, 88, 89, .34);
}
.platz-situationen article > span { color: var(--brand); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.platz-situationen h3 { margin: 0 0 4px; font-size: 20px; }
.platz-situationen p { margin: 0; color: var(--muted); font-size: 16px; }

.hausbuch { background: var(--bg); }
.hausbuch-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 34px;
}
.hausbuch-kopf .einordnung,
.hausbuch-kopf h2 { grid-column: 1; }
.hausbuch-kopf h2 { margin-bottom: 0; }
.hausbuch-kopf p { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-left: 20px; border-left: 3px solid var(--brand); color: var(--muted); }
.hausbuch-register { border-bottom: 1px solid var(--line); }
.hausbuch-register article {
  display: grid;
  grid-template-columns: 120px 260px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
  padding: 23px 0;
  border-top: 1px solid var(--line);
}
.hausbuch-register article > span { color: var(--brand); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hausbuch-register h3,
.hausbuch-register p { margin: 0; }
.hausbuch-register p { color: var(--muted); font-size: 16px; }
.fachgrenze { margin-top: 28px; padding: 22px 24px; border-left: 4px solid var(--dark); background: var(--arkadenhimmel); }
.fachgrenze h3 { margin: 0 0 5px; }
.fachgrenze p { margin: 0; color: var(--muted); font-size: 16px; }

.kaeufer-arkade { background: var(--arkadenhimmel); }
.kaeufer-raster {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr);
  gap: 58px;
  align-items: center;
}
.kaeufer-text p { color: var(--muted); }
.kaeufer-text p:last-child { margin-bottom: 0; }
.kaeufer-bild { aspect-ratio: 7 / 5; }
.kaeufer-bild img { height: 100%; object-fit: cover; object-position: 54% 50%; }

.awz-vertrauen { padding: 44px 0; background: var(--basalt); color: var(--weiss); }
.awz-vertrauen-innen { display: grid; grid-template-columns: .82fr 1.18fr; gap: 58px; align-items: center; }
.awz-vertrauen .einordnung { color: var(--fokus-dunkel); }
.awz-vertrauen h2 { margin: 0; color: var(--weiss); font-size: 31px; line-height: 1.2; }
.awz-fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.awz-fakten strong,
.awz-fakten span { display: block; }
.awz-fakten strong { color: var(--weiss); font-size: 21px; }
.awz-fakten span { margin-top: 3px; color: #f1f5f7; font-size: 14px; }

.formular-bereich { padding: 76px 0; background: var(--bg); color: var(--text); }
.formular-raster { grid-template-columns: .72fr 1.28fr; gap: 62px; }
.formular-einleitung { padding-left: 23px; border-left: 4px solid var(--brand); }
.formular-einleitung h2 { color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: 40px; }
.formular-einleitung p { color: var(--muted); }
.formular { border: 1px solid var(--line); border-radius: 6px; background: var(--weiss); color: var(--text); box-shadow: var(--shadow); }
.auswahl label {
  border-color: var(--eingaberand);
  border-radius: 4px;
  color: var(--text);
  padding-left: 32px;
}
.auswahl label::before {
  content: "";
  position: absolute;
  left: 11px;
  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: #f7edf0; 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; }
.eingabe {
  display: block;
  width: 100%;
  margin: 7px 0 18px;
  padding: 13px 14px;
  border: 1px solid var(--eingaberand);
  border-radius: 4px;
  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: #8d1f2d; box-shadow: 0 0 0 2px rgba(141, 31, 45, .18); }
.zustimmung input[aria-invalid="true"] { box-shadow: 0 0 0 2px #8d1f2d; }
.freiwillig { border-color: var(--line); }
.zustimmung a { color: var(--brand); font-weight: 750; }
.formular .knopf { background: var(--brand); }
.formular .knopf:hover { background: #61243a; }
.vertraulichkeit { color: var(--muted); }
.formular-fehler { color: #8d1f2d; }
.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: 50px 0 58px; background: var(--soft); color: var(--text); }
.kontakt .einordnung { color: var(--brand); }
.kontakt h2 { color: var(--text); }
.kontakt-name { color: var(--muted); }
.kontaktdaten { font-style: normal; }
.kontaktdaten a { display: grid; gap: 2px; color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kontaktdaten span { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.footer { background: var(--dark); color: var(--weiss); }
.footer-innen { flex-wrap: wrap; }
.footer a { color: var(--weiss); }
.bildhinweis { color: #f2f6f7; }
.symbolbild { background: rgba(40, 41, 45, .86); color: var(--weiss); }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.awz-vertrauen :focus-visible,
.footer :focus-visible { outline-color: var(--fokus-dunkel); }

@media (max-width: 1000px) {
  .platz-einstieg { grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); gap: 38px; }
  .hero .platz-hauptbild { height: 292px; }
  .radius-hinweis { grid-template-columns: 145px 1fr; }
  .eigentuemer-raster,
  .kaeufer-raster { gap: 42px; }
}

@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(--bg);
    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; }
  .platz-einstieg,
  .eigentuemer-raster,
  .kaeufer-raster,
  .awz-vertrauen-innen,
  .formular-raster { grid-template-columns: 1fr; }
  .platz-leittext { padding-top: 0; }
  .platz-bildspalte { width: min(100%, 760px); }
  .hero .platz-hauptbild { order: 0; }
  .radius-hinweis { order: 1; }
  .platz-wege { grid-template-columns: 1.15fr 1fr; }
  .mitarbeit-weg { grid-column: 1 / -1; }
  .eigentuemer-raster { display: flex; flex-direction: column; align-items: stretch; }
  .eigentuemer-text { order: 1; }
  .eigentuemer-bild { order: 2; width: min(100%, 700px); }
  .kaeufer-bild { width: min(100%, 700px); }
  .lageprofil-kopf { grid-template-columns: 1fr; gap: 4px; }
  .hausbuch-kopf { display: block; }
  .hausbuch-kopf p { margin-top: 22px; }
  .awz-vertrauen-innen,
  .formular-raster { gap: 34px; }
}

@media (max-width: 650px) {
  .rahmen { width: calc(100% - 28px); }
  .fassadenband { height: 108px; }
  .fassadenband img { object-position: 51% 51%; }
  .platzkante-hero { padding: 33px 0 36px; }
  .hero h1 { font-size: clamp(33px, 10.5vw, 38px); line-height: 1.08; overflow-wrap: normal; hyphens: auto; }
  .hero p { font-size: 17px; }
  .hero .platz-hauptbild { height: 222px; }
  .platz-hauptbild img { object-position: 56% 49%; }
  .radius-hinweis { grid-template-columns: 1fr; gap: 5px; padding: 17px 18px; }
  .platz-wege { grid-template-columns: 1fr; gap: 10px; }
  .mitarbeit-weg { grid-column: auto; }
  .abschnitt { padding: 56px 0; }
  .abschnitt h2 { font-size: clamp(28px, 8.4vw, 32px); overflow-wrap: normal; hyphens: auto; }
  .lageprofil-zeilen article { grid-template-columns: 38px minmax(0, 1fr); gap: 8px 12px; }
  .lageprofil-zeilen h3 { grid-column: 2; }
  .lageprofil-zeilen p { grid-column: 2; }
  .eigentuemer-bild img { object-position: 55% 45%; }
  .platz-situationen article { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .platz-situationen h3 { font-size: 18px; }
  .hausbuch-register article { grid-template-columns: 1fr; gap: 5px; }
  .hausbuch-register article > span { margin-bottom: 3px; }
  .fachgrenze { padding: 21px 19px; }
  .kaeufer-bild img { object-position: 53% 48%; }
  .awz-fakten { grid-template-columns: 1fr; gap: 14px; }
  .formular-bereich { padding: 56px 0; }
  .formular-einleitung { padding-left: 16px; }
  .formular-einleitung h2 { font-size: 32px; }
}

@media (max-width: 360px) {
  .rahmen { width: calc(100% - 22px); }
  .marke { font-size: 20px; }
  .marke small { max-width: 176px; letter-spacing: .065em; }
  .hero h1 { font-size: 32px; }
  .hero .platz-hauptbild { height: 205px; }
  .knopf { padding-inline: 13px; }
  .awz-vertrauen h2 { font-size: 25px; line-height: 1.2; overflow-wrap: normal; hyphens: none; }
  .kontakt h2 { font-size: 27px; line-height: 1.2; overflow-wrap: normal; hyphens: none; }
}

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