/* =========================================================
   steinhouse – Landingpage "Immobiliencheck"
   Design-Tokens abgeleitet von steinhouse.de
   ========================================================= */

/* ---------- Hausschrift: Avenir LT (wie auf steinhouse.de) ----------
   Zwei Schnitte, exakt wie im Original:
   35 Light  → Fließtext
   85 Heavy  → Überschriften, Buttons, Labels
   Lizenzhinweis siehe README.
------------------------------------------------------------------- */
@font-face {
  font-family: "Avenir LT";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/avenir-lt-w05_35-light.woff2") format("woff2"),
       url("../fonts/avenir-lt-w01_35-light.woff2") format("woff2");
}
@font-face {
  font-family: "Avenir LT";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/avenir-lt-w05_85-heavy.woff2") format("woff2"),
       url("../fonts/avenir-lt-w01_85-heavy.woff2") format("woff2");
}

:root {
  /* Farben */
  /* ----------------------------------------------------------------
     Hausfarbe. Aus dem hellen Blau (#08407F) ist ein dunkleres,
     etwas entsättigtes Blau geworden. Exakter Wert vom Kunden
     bestätigt (14.09.). Alles andere leitet sich davon ab:
     -dark und -light sind derselbe Farbton, nur dunkler bzw.
     heller – bei einer Änderung hier mit umrechnen.
     ---------------------------------------------------------------- */
  --navy:        #264257;
  --navy-dark:   #1B3040;
  --navy-light:  #355D7B;

  --btn:         var(--navy);
  --btn-hover:   var(--navy-dark);
  --blue-soft:   #DCE8FF;
  --ink:         #111111;
  --ink-70:      rgba(17, 17, 17, .70);
  --ink-55:      rgba(17, 17, 17, .55);
  --grey-bg:     #DFE6E9;
  --grey-soft:   #F6F6F8;
  --line:        #DEE3E8;
  --white:       #FFFFFF;
  --error:       #C0392B;

  /* Typografie – identisch zu steinhouse.de.
     "Avenir Next"/"Avenir" greift auf Apple-Geräten, falls der Webfont fehlt. */
  --font: "Avenir LT", "Avenir Next", "Avenir", "Segoe UI", Helvetica, Arial, sans-serif;

  /* Maße */
  --shell: 1220px;
  /* Neu: steinhouse arbeitet jetzt mit gerundeten Ecken (vorher 0).
     Der Kunde nennt einen einheitlichen Radius von 10px, deshalb
     liegen beide Tokens auf demselben Wert. Sie bleiben getrennt,
     falls Buttons und Flächen später doch auseinanderlaufen. */
  --radius: 10px;         /* Buttons, Eingabefelder, kleine Elemente */
  --radius-card: 10px;    /* Karten und Bildflächen */
  --shadow: 0 24px 60px rgba(22, 38, 52, .18);
  --shadow-sm: 0 6px 20px rgba(22, 38, 52, .10);
  --header-h: 88px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] muss jede display-Regel schlagen (Buttons, Nav, Schritte) */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  -webkit-tap-highlight-color: rgba(38, 66, 87, .12);
  font-size: 17.5px;
  font-weight: 300;          /* Avenir 35 Light – wie im Original */
  line-height: 1.64;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Es gibt nur zwei Schnitte: alles Hervorgehobene läuft auf Heavy. */
strong, b { font-weight: 800; }

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

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-dark); }

abbr[title] { text-decoration: none; color: var(--navy); }

/* Sichere Grundgröße für Icons. NIE auf width/height 100% setzen: ein SVG ohne
   eigene Größenregel würde sonst seinen Container komplett ausfüllen. Alle Icons
   bekommen weiter unten explizite Maße, das hier ist nur der Rückfall. */
svg { width: 1.15em; height: 1.15em; flex: none; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}
.shell-narrow { max-width: 860px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 14px 22px;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--btn);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 32px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .chev { font-size: .95em; letter-spacing: -.08em; transition: transform .2s var(--ease); }
.btn:hover .chev { transform: translateX(3px); }

.btn-primary:hover { --btn-bg: var(--btn-hover); }
.btn-sm { padding: 12px 20px; font-size: .92rem; }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--btn);
  border-color: var(--btn);
}
.btn-outline:hover { --btn-bg: var(--btn); --btn-fg: #fff; }

.btn-light { --btn-bg: #fff; --btn-fg: var(--btn); }
.btn-light:hover { --btn-bg: var(--blue-soft); --btn-fg: var(--btn-hover); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-70);
  padding-inline: 8px;
  font-weight: 600;
}
.btn-ghost:hover { --btn-fg: var(--navy); background: transparent; }

.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Header ----------
   Wie steinhouse.de: Logo links, Kontaktdaten rechts.
   Ohne Navigation – jeder Link würde vom Check wegführen. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { flex: 0 0 auto; line-height: 0; }
.brand img { width: 218px; height: auto; }

.header-contact {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 0 0 auto;
}

.header-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.header-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: .93rem;
  white-space: nowrap;
}
.header-line svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--navy); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.header-line:first-of-type svg { fill: var(--navy); stroke: none; }
.header-line:hover { color: var(--navy); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
  color: #fff;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--navy);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(22, 38, 52, .92) 0%, rgba(22, 38, 52, .78) 42%, rgba(22, 38, 52, .30) 72%, rgba(22, 38, 52, .10) 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.eyebrow-dark {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--navy);
  letter-spacing: .16em;
  margin-bottom: 12px;
}

.hero h1 { margin-bottom: 22px; text-shadow: 0 2px 24px rgba(0, 0, 0, .22); }

.hero-lead {
  max-width: 38em;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: rgba(255, 255, 255, .92);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 30px 0 0;
  font-size: .96rem;
  color: rgba(255, 255, 255, .78);
}
.hero-meta a { color: #fff; text-underline-offset: 4px; }
/* Nur die Rufnummer darf nicht umbrechen – der Bewertungssatz schon. */
.hero-meta a[href^="tel:"] { white-space: nowrap; }
.hero-meta .sep { color: rgba(255, 255, 255, .45); }

/* ---------- Check-Card / Wizard ---------- */
.check-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.check-head {
  padding: 22px 30px 18px;
  background: var(--grey-soft);
  border-bottom: 1px solid var(--line);
}
.check-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.check-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
.check-step {
  margin: 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-55);
  white-space: nowrap;
}
.progress {
  height: 5px;
  background: #D9DEE4;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--navy);
  transition: width .35s var(--ease);
}

.check-form { padding: 28px 30px 26px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.step {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.step.is-active { display: block; animation: stepIn .28s var(--ease) both; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.step-q {
  display: block;
  padding: 0;
  margin: 0 0 6px;
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.step-hint {
  margin: 0 0 20px;
  font-size: .93rem;
  color: var(--ink-55);
}

/* Auswahlkacheln */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tile {
  position: relative;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  padding: 16px 10px;
  border: 2px solid var(--line);
  background: #fff;
  text-align: center;
  font-weight: 700;
  font-size: .97rem;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .15s var(--ease);
}
.tile input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.tile svg {
  width: 34px; height: 34px;
  fill: none; stroke: var(--navy); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s var(--ease);
}
.tile:hover { border-color: var(--navy); transform: translateY(-2px); }
.tile:has(input:checked) { border-color: var(--navy); background: #EEF2F6; }
.tile:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }

/* Formularfelder */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

/* Zwei gleich breite Felder nebeneinander (Wohn- und Grundstücksfläche) */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

/* PLZ schmal, Ort breit */
.grid-plz {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: 0 16px;
}

.field-hint {
  margin: 7px 0 0;
  font-size: .84rem;
  color: var(--ink-55);
}

label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
  font-size: .92rem;
}
.opt { font-weight: 400; color: var(--ink-55); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  width: 100%;
  padding: 14px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input::placeholder, textarea::placeholder { color: #A7AFB8; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(38, 66, 87, .16);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}
textarea { resize: vertical; min-height: 84px; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23264257' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 40px;
}

.input-unit { position: relative; }
.input-unit input { padding-right: 46px; }
.input-unit span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink-55);
  pointer-events: none;
}
/* Spinner ausblenden – Tastatureingabe bleibt möglich */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.field-error {
  margin: 7px 0 0;
  font-size: .86rem;
  font-weight: 700;
  color: var(--error);
}
.field-note {
  margin: 7px 0 0;
  font-size: .84rem;
  color: var(--ink-55);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-weight: 400;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--ink-70);
  cursor: pointer;
}
.checkbox input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--navy);
  cursor: pointer;
}
.check-consent { margin-top: 22px; }

.form-status {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: #FDECEA;
  border-left: 3px solid var(--error);
  font-size: .9rem;
  font-weight: 600;
  color: #8C2A1F;
}

/* Aktionen */
.check-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.check-actions [data-next], .check-actions [data-submit] { margin-left: auto; }

.check-foot {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-55);
}
.check-foot svg {
  width: 17px; height: 17px; flex: 0 0 17px;
  margin-top: 1px;
  fill: none; stroke: var(--navy); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Erfolg */
.step-success { text-align: center; padding: 12px 0 8px; }
.success-mark {
  width: 66px; height: 66px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  background: #EAF3E9;
  border-radius: 50%;
}
.success-mark svg {
  width: 32px; height: 32px;
  fill: none; stroke: #2E7D32; stroke-width: 2.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.step-success h2 { font-size: 1.5rem; }
.success-lead { color: var(--ink-70); }
.success-list {
  margin: 20px auto 26px;
  padding: 0;
  list-style: none;
  max-width: 34em;
  text-align: left;
  font-size: .94rem;
  color: var(--ink-70);
}
.success-list li {
  position: relative;
  padding: 7px 0 7px 26px;
}
.success-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 16px;
  width: 7px; height: 7px;
  background: var(--navy);
}

/* ---------- Trustbar ---------- */
.trustbar {
  background: var(--navy);
  color: #fff;
}
.trustbar-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-block: 44px;
}
.trust-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.trust-item span {
  font-size: .93rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 8vw, 108px) 0; }
.section-grey { background: var(--grey-soft); }

.section-title { max-width: 22ch; }
.section-lead {
  max-width: 62ch;
  font-size: 1.08rem;
  color: var(--ink-70);
  margin-bottom: 46px;
}

.section-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 46px;
}
.section-cta-note { font-size: .9rem; color: var(--ink-55); }

.section-note { margin-top: 40px; }
.link-arrow {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 2px;
}
.link-arrow .chev { letter-spacing: -.08em; }

/* Ablauf-Schritte */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.steps-grid li {
  padding: 34px 30px 36px;
  background: var(--grey-soft);
  border-top: 3px solid var(--navy);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.step-num {
  display: block;
  margin-bottom: 14px;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
  opacity: .28;
  letter-spacing: -.03em;
}
.steps-grid h3 { margin-bottom: .45em; }
.steps-grid p { color: var(--ink-70); font-size: .97rem; margin: 0; }

/* ---------- Marktdaten ----------
   Ortsvergleich mit Spannenbalken. Umschaltbar zwischen Haus und Wohnung. */
.markt-tabs {
  display: inline-flex;
  gap: 0;
  margin-bottom: 28px;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
}
.markt-tabs button {
  padding: 12px 24px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.markt-tabs button + button { border-left: 1.5px solid var(--navy); }
.markt-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.markt-tabs button:hover[aria-selected="false"] { background: #EAEEF2; }

.markt-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.markt-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2.4fr) auto minmax(130px, auto);
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.markt-row.is-heim {
  background: rgba(38, 66, 87, .07);
  padding-inline: 20px;
  margin-inline: -20px;
}
.markt-row.is-heim .markt-ort { color: var(--navy); }

.markt-ort { font-weight: 800; font-size: .98rem; }

.markt-bar {
  position: relative;
  height: 10px;
  background: #E4E8ED;
}
.markt-span {
  position: absolute;
  top: 0; bottom: 0;
  background: #A8C0DC;
}
.markt-dot {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 22px;
  margin-left: -1.5px;
  transform: translateY(-50%);
  background: var(--navy);
}

.markt-wert {
  text-align: right;
  white-space: nowrap;
  font-size: 1.05rem;
}
.markt-wert strong { font-weight: 800; color: var(--navy); }
.markt-wert span { font-size: .78em; color: var(--ink-55); }

.markt-spanne {
  text-align: right;
  white-space: nowrap;
  font-size: .88rem;
  color: var(--ink-55);
}

.stat-source {
  margin-top: 16px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-55);
  max-width: 78ch;
}

/* ---------- Kundenstimmen ---------- */
.stimmen-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
.stimmen-head .section-title { margin-bottom: 0; }
.stimmen-meta { margin: 0; font-size: .95rem; color: var(--ink-55); }
.stimmen-meta a { text-underline-offset: 3px; }

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 30px 28px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.quote blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote blockquote::before { content: "„"; }
.quote blockquote::after  { content: "”"; }
.quote figcaption {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 800;
  font-size: .93rem;
}
.quote figcaption span { font-weight: 300; color: var(--ink-55); }

/* ---------- Qualifikationen ---------- */
.credentials {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.credentials li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: .93rem;
  color: var(--ink-70);
}
.credentials li::before {
  content: "";
  position: absolute;
  left: 2px; top: 12px;
  width: 11px; height: 6px;
  border-left: 2.2px solid var(--navy);
  border-bottom: 2.2px solid var(--navy);
  transform: rotate(-45deg);
}

/* Split-Sektionen */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.split-reverse .split-media { order: 2; }
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 74% 55%;
  /* Bilder folgen der neuen Kachel-Rundung der Hauptseite. */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.split-media.portrait img { aspect-ratio: 4 / 5; object-position: 50% 22%; }
/* Das Gespraechsbild ist bereits auf 4:5 beschnitten - hier darf nichts mehr
   weggenommen werden, sonst fehlen die Haende. Zwei Klassen im Selektor, weil
   die Regel darueber sonst gewinnt. */
.split-media.portrait-gespraech img { object-position: 50% 50%; }
.split-copy p { color: var(--ink-70); }
.split-copy .role {
  margin-top: -.6em;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
.split-copy blockquote {
  margin: 26px 0;
  padding-left: 22px;
  border-left: 3px solid var(--navy);
  font-size: 1.12rem;
  line-height: 1.55;
  font-weight: 600;
}
.split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.check-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  position: relative;
  padding: 9px 0 9px 34px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-70);
  font-size: .98rem;
}
.check-list li:last-child { border-bottom: 0; }
.check-list-note {
  margin-top: 22px;
  font-size: .93rem;
  color: var(--ink-55);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 12px;
  height: 7px;
  border-left: 2.4px solid var(--navy);
  border-bottom: 2.4px solid var(--navy);
  transform: rotate(-45deg);
}

/* Leistungs-Karten */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.card {
  padding: 32px 28px 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.card-icon {
  width: 34px; height: 34px;
  margin-bottom: 18px;
  fill: none; stroke: var(--navy); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.card p { margin: 0; color: var(--ink-70); font-size: .97rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  list-style: none;
  padding: 22px 48px 22px 0;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 12px;
  height: 12px;
  border-right: 2.2px solid var(--navy);
  border-bottom: 2.2px solid var(--navy);
  transform: rotate(45deg);
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 34px; }
.faq summary:hover { color: var(--navy); }
.faq-body {
  padding: 0 40px 24px 0;
  color: var(--ink-70);
  font-size: .99rem;
}

/* ---------- CTA-Band ---------- */
.cta-band {
  background: var(--navy);
  color: #fff;
}
/* Das Fassadenmotiv aus dem Aufmacher schliesst die Seite wieder. Der Verlauf
   darueber haelt den Text lesbar: links, wo die Schrift sitzt, deckt er fast
   voll, nach rechts gibt er das Motiv frei. Die Navy-Flaeche bleibt als
   Rueckfall bestehen, falls das Bild nicht laedt. */
.cta-band-bild {
  position: relative;
  background-image:
    linear-gradient(100deg,
      rgba(38, 66, 87, .96) 0%,
      rgba(38, 66, 87, .92) 42%,
      rgba(38, 66, 87, .72) 72%,
      rgba(38, 66, 87, .58) 100%),
    url("../img/cta-fassade.jpg");
  background-size: cover;
  background-position: 68% 50%;
  background-repeat: no-repeat;
}
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: clamp(48px, 6vw, 76px);
}
.cta-inner h2 { max-width: 18ch; margin-bottom: .35em; }
.cta-inner p { color: rgba(255, 255, 255, .82); margin: 0; }
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.cta-tel { color: rgba(255, 255, 255, .82); font-size: .93rem; }
.cta-tel:hover { color: #fff; }

/* ---------- Footer ----------
   Nachgebaut nach steinhouse.de: weiße Fläche ohne Trennlinien, durchgehend
   14 px in Schwarz, Logo und Anschrift links, Einzugsgebiet daneben,
   Mitgliedschaften rechts, Rechtliches zentriert am Fuß. */
.site-footer {
  background: var(--white);
  color: #000;
  font-size: 14px;
  line-height: 1.2;
}
.footer-inner {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 400px;
  gap: 40px;
  padding-block: 60px 30px;
}

.site-footer p { margin: 0 0 17px; }
.site-footer a { color: #000; text-decoration: none; }
.site-footer a:hover { color: #000; text-decoration: underline; }

.footer-logo { width: 230px; margin-bottom: 34px; }
.footer-firma { font-weight: 800; }

.footer-gebiet-titel { font-weight: 800; margin-bottom: 22px; }
.footer-gebiet ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.7;
}

/* Mitgliedschaften und Bewertungssiegel */
/* Anordnung wie im Original: Immobilienjunioren und das ImmoScout-Siegel
   nebeneinander, die beiden Kammern darunter in derselben Spalte. */
.footer-siegel {
  display: grid;
  grid-template-columns: 132px auto;
  gap: 24px 26px;
  align-items: start;
  justify-items: start;
}
.siegel-junioren { grid-area: 1 / 1; }
.siegel-scout    { grid-area: 1 / 2 / span 3 / 3; }
.siegel-ingkh    { grid-area: 2 / 1; }
.siegel-ihk      { grid-area: 3 / 1; }
.siegel-junioren { width: 128px; height: auto; }
.siegel-ingkh    { width: 132px; height: auto; }
.siegel-ihk      { width: 152px; height: auto; }
/* Die Siegel verlinken auf die jeweilige Kammer bzw. das Netzwerk. Die Breite
   sitzt am Link, das Bild fuellt ihn – sonst verliert das Rasterfeld sein Mass. */
.siegel-link { display: block; transition: opacity .15s ease; }
.siegel-link img { display: block; width: 100%; height: auto; }
.siegel-link:hover { opacity: .78; text-decoration: none; }
.siegel-scout {
  width: 236px;
  max-width: 100%;
  height: 156px;
  border: 0;
  display: block;
}

.footer-fuss {
  padding-bottom: 44px;
  text-align: center;
}
.footer-hoch {
  display: inline-flex;
  padding: 8px;
  margin-bottom: 18px;
}
.footer-hoch svg {
  width: 34px; height: 34px;
  fill: none; stroke: var(--navy); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.footer-recht {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
}
.footer-copy { margin: 0; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .header-contact { gap: 18px; }
  .header-line { font-size: .88rem; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
}

@media (max-width: 960px) {
  :root { --header-h: 74px; }

  .header-lines { display: none; }
  .brand img { width: 180px; }

  /* Der Check rückt direkt unter die Headline – ohne langes Scrollen.
     `display: contents` löst .hero-copy auf, damit sich die einzelnen
     Textblöcke um die Karte herum sortieren lassen. */
  .hero-inner {
    display: flex;
    flex-direction: column;
    /* Muss das align-items: center des Desktop-Grids überschreiben –
       in der Spalte würde es sonst alles horizontal zentrieren. */
    align-items: stretch;
    gap: 0;
  }
  .hero-copy   { display: contents; }
  .eyebrow     { order: 1; align-self: flex-start; }
  .hero h1     { order: 2; }
  .hero-lead   { order: 3; margin-bottom: 26px; max-width: 40em; }
  .check-card  { order: 4; }
  .hero-meta   { order: 5; margin-top: 28px; }

  .trustbar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
  .steps-grid, .cards, .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid { gap: 4px; }
  .markt-row { grid-template-columns: minmax(130px, 1fr) minmax(0, 1.8fr) auto; }
  .markt-spanne { grid-column: 2 / -1; text-align: left; margin-top: -6px; }


  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split-reverse .split-media { order: 0; }
  .split-media.portrait img { aspect-ratio: 4 / 3; }
  /* Beim Gespraechsbild wuerde ein 4:3-Ausschnitt Kopf oder Haende kappen.
     Es behaelt darum auch einspaltig sein Hochformat, nur flacher. */
  .split-media.portrait-gespraech img { aspect-ratio: 4 / 4.4; }

  .footer-inner { grid-template-columns: 210px minmax(0, 1fr); gap: 32px 30px; }
  .footer-siegel { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 26px; }

  /* Ab hier laeuft der Text bis weit nach rechts, wo der schraege Verlauf das
     Motiv freigibt - fuer Fliesstext reicht der Kontrast dort nicht mehr.
     Unterhalb von 960 px deckt der Verlauf darum flaechig ab; das Motiv bleibt
     als ruhige Struktur sichtbar. */
  .cta-band-bild {
    background-image:
      linear-gradient(180deg,
        rgba(38, 66, 87, .95) 0%,
        rgba(38, 66, 87, .89) 100%),
      url("../img/cta-fassade.jpg");
    background-position: 72% 50%;
  }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .shell { padding-inline: 18px; }

  /* Lange Komposita wie „Eigentumswohnungen" oder „Grundstücksfläche" sonst
     reißen auf schmalen Schirmen hässliche Lücken. */
  p, li, blockquote, .step-hint, .field-hint { hyphens: auto; }
  h1, h2, h3, .step-q { hyphens: manual; text-wrap: balance; }

  /* Kompakteres vertikales Raster – die Seite ist auf dem Handy sonst sehr lang */
  .section { padding: 52px 0; }
  .trustbar-inner { padding-block: 36px; }
  .regions, .credentials { margin-top: 26px; }
  .footer-inner { padding-block: 44px 32px; }
  .section-lead { margin-bottom: 32px; }
  .cta-inner { padding-block: 44px; }

  .hero { padding-top: 36px; }

  .check-head { padding: 18px 20px 15px; }
  .check-form { padding: 22px 20px 22px; }
  .step-q { font-size: 1.18rem; }

  .tiles, .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-height: 100px; }
  .grid-plz { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: 0 12px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }

  /* Fingerfreundliche Ziele: mindestens 44 px hoch */
  .hero-meta a,
  .cta-tel,
  .stimmen-meta a {
    display: inline-block;
    padding-block: 11px;
  }
  /* Auf dem Handy sind Rufnummer und Adresse Primärhandlungen – hier weicht
     die Fußzeile bewusst vom engen Zeilenmaß des Originals ab. */
  .site-footer a { display: inline-block; padding-block: 15px; }
  /* Die Siegel sind schon von sich aus grosse Ziele; 15 px wie bei den
     Textlinks wuerden das Raster unnoetig auseinanderziehen. 6 px reichen,
     damit auch das flache IHK-Logo ueber 44 px Tiefe kommt. */
  .site-footer .siegel-link { display: block; padding-block: 6px; }
  .site-footer .footer-adresse p:last-child { line-height: 1.1; }
  .hero-meta { gap: 0 12px; }
  .footer-recht { gap: 14px; align-items: center; }
  .checkbox { padding-block: 4px; }
  .checkbox input { width: 24px; height: 24px; flex-basis: 24px; }

  .check-actions { flex-wrap: wrap; gap: 10px; }
  .check-actions .btn { flex: 1 1 auto; justify-content: center; }
  .check-actions [data-prev] { flex: 0 0 auto; }

  .trustbar-inner { grid-template-columns: minmax(0, 1fr); }
  .steps-grid, .cards, .quotes { grid-template-columns: minmax(0, 1fr); }
  .cards, .quotes { gap: 16px; }
  .markt-tabs { display: flex; width: 100%; }
  .markt-tabs button { flex: 1; padding: 12px 10px; font-size: .88rem; }
  .markt-row { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 18px 0; }
  .markt-bar { grid-column: 1 / -1; order: 3; }
  .markt-spanne { grid-column: 1 / -1; order: 4; text-align: left; margin-top: 0; }
  .markt-row.is-heim { padding-inline: 14px; margin-inline: -14px; }
  .stimmen-head { flex-direction: column; align-items: flex-start; gap: 14px; }

  .section-cta { flex-direction: column; align-items: stretch; }
  .section-cta .btn { justify-content: center; }
  .split-actions .btn { flex: 1 1 100%; justify-content: center; }

  .cta-inner { flex-direction: column; align-items: flex-start; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 44px 16px; }
  .footer-logo { width: 190px; margin-bottom: 26px; }
  .footer-siegel { gap: 22px; }
  /* Kurzes Label, damit der Button neben dem Logo Platz hat. Ohne ihn wäre
     die klebende Kopfzeile auf dem Handy 75 px ohne jede Handlung. */
  .brand img { width: 148px; }
  .header-inner { gap: 12px; min-height: 68px; }
  .header-cta { padding: 12px 16px; font-size: .86rem; gap: 6px; min-height: 46px; }
  .header-cta .lang { display: none; }
}

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

/* ---------- Druck ---------- */
@media print {
  .site-header, .cta-band, .check-actions { display: none !important; }
  .hero { color: var(--ink); padding-block: 20px; }
  .hero-media { display: none; }
  body { font-size: 12pt; }
}