/* Trausnitz Immobilien – /wertermittlung/ v2, Struktur 1:1 von der Brauer
   Immobilien Referenzseite (erbschaft/) übernommen. Farben/Font auf
   Trausnitz umgestellt (siehe unten), Inhalte werden schrittweise ersetzt. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/dm-sans-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/dm-sans-v15-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/dm-sans-v15-latin-900.woff2') format('woff2');
}

:root {
  --tn-dark:   #161515;
  --tn-gray:   #54595F;
  --tn-text:   #444444;
  /* Kernfarbe = das Trausnitz-Navy, das auf /umzug/ und /wertermittlung/
     bereits als --wine/--navy für Buttons, Kacheln und Akzente läuft
     (siehe css/style.css, css/wert-trausnitz.css), statt des roten
     Elementor-Accents von der Hauptseite. */
  --tn-accent: #1a2744;
  --tn-accent-light: #253460;
  /* Zweiter Markenton (Häkchen, X-Icons, Zahlen-Leiste): das echte
     Rot/Bordeaux von trausnitz-immobilien.de als Highlight-Akzent neben
     dem Navy, nicht als Kernfarbe für Buttons/Kacheln. */
  --tn-red: #890610;
  --tn-bg-light: #FBFBFB;
  --font-header: 'DM Sans', sans-serif;
}

body.pg-wertermittlung-verkauf { font-family: var(--font-header); }
body.pg-wertermittlung-verkauf .gmap-reviews-h2 {
  font-size: 1.9rem; font-weight: 700; color: var(--tn-dark); max-width: 640px; margin: 0 auto 64px; line-height: 1.3;
}

/* ── Deckblatt (Foto-Hero + Foto-Box) ───────────────────────── */
.hb3 {
  position: relative; background-size: cover; background-position: center;
  padding: 48px 24px 96px;
}
.hb3-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,21,21,.62) 0%, rgba(22,21,21,.48) 45%, rgba(22,21,21,.66) 100%);
}
.hb3-inner {
  position: relative; z-index: 1; max-width: 1160px; margin: 0 auto;
  display: flex; gap: 68px; align-items: center; flex-wrap: wrap;
}
.hb3-text { flex: 1 1 480px; min-width: 300px; color: #fff; }
.hb3-logo-wrap {
  display: inline-block; background: #fff; padding: 8px 14px;
  border-radius: 10px; margin-bottom: 22px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.hb3-logo { height: 38px; width: auto; display: block; }
.hb3-kicker {
  display: block; width: max-content; max-width: 100%; box-sizing: border-box;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; white-space: normal;
  background: #fff; color: var(--tn-dark);
  padding: 8px 16px; border-radius: 20px; margin: 0 0 30px 0;
}
.hb3-h1 {
  font-family: var(--font-header); font-size: clamp(1.6rem, 3.1vw, 2.1rem); font-weight: 700;
  line-height: 1.32; color: #fff; margin: 0 0 20px; max-width: 92%;
}
.hb3-lead { font-size: .98rem; line-height: 1.7; color: rgba(255,255,255,.85); max-width: 480px; margin: 0 0 36px; }
.hb3-lead strong { color: #fff; }
.hb3-cta {
  display: inline-block; background: var(--tn-accent); color: #fff; font-weight: 700; font-size: .95rem;
  padding: 16px 30px; border-radius: 8px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.35); transition: transform .15s ease, filter .15s ease;
}
.hb3-cta:hover { transform: translateY(-2px); filter: brightness(.92); }

.hb3-photo-col { position: relative; flex: 1 1 380px; min-width: 280px; }
.hb3-photo-box {
  width: 100%; height: 420px; border-radius: 6px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.hb3-photo-box img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.hb3-checks { list-style: none; margin: 22px 0 0; padding: 0; }
.hb3-checks li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; font-weight: 600; color: #fff; margin-bottom: 10px; }
.hb3-checks li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: #fff; }

/* ── Erfolge in Zahlen ──────────────────────────────────────── */
.stats-bar { background: var(--tn-accent); padding: 44px 24px; }
.stats-bar-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats-bar-inner > div { min-width: 0; }
.stats-bar b { display: block; font-weight: 700; font-size: 1.9rem; color: #fff; }
.stats-bar span { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.85); overflow-wrap: break-word; }

.page-body { background: #fff; }
.funnel-anchor { max-width: 640px; margin: 0 auto; padding: 88px 24px 8px; }

@media (max-width: 900px) {
  .hb3-inner { justify-content: center; text-align: center; }
  .hb3-text { text-align: center; }
  .hb3-h1 { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hb3-lead { margin-left: auto; margin-right: auto; }
  .hb3-kicker { margin-left: auto; margin-right: auto; }
  .hb3-photo-box { height: 320px; }
}
@media (max-width: 639px) {
  .hb3 { padding: 40px 20px 56px; }
  .hb3-kicker { font-size: .7rem; padding: 7px 14px; }
  .hb3-h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .hb3-cta { display: block; text-align: center; }
  .stats-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .funnel-anchor { padding-top: 56px; }
  .hb3-hide-mobile { display: none; }
}

/* Funnel-Karte, wenn sie frei auf der Seite steht statt im Foto-Hero. */
.funnel-anchor .wert-card2 {
  max-width: 640px;
  background: #fff; border-radius: var(--r, 16px);
  box-shadow: 0 10px 34px rgba(0,0,0,.18);
  padding: 44px 48px;
}
.funnel-anchor .wert-card2 .fn-choices,
.funnel-anchor .wert-card2 .fn-fields,
.funnel-anchor .wert-card2 .fn-consent {
  max-width: 560px;
}
@media (max-width: 767px) {
  .funnel-anchor .wert-card2 { padding: 24px 22px; }
}

/* Akzentfarbe für Buttons/Kacheln/Auswahl auf dieser Seite (statt Rot aus
   dem Grund-Template): einheitlich Trausnitz-Bordeaux. */
body.pg-wertermittlung-verkauf .fn-next,
body.pg-wertermittlung-verkauf .fn-sub,
body.pg-wertermittlung-verkauf .fn-bar-fill {
  background: var(--tn-accent); color: #fff;
}
body.pg-wertermittlung-verkauf .fn-next:hover,
body.pg-wertermittlung-verkauf .fn-sub:not(:disabled):hover {
  background: var(--tn-accent); filter: brightness(.9);
}
body.pg-wertermittlung-verkauf .wert-card2 .fn-inp:focus,
body.pg-wertermittlung-verkauf .wert-phone-row:focus-within,
body.pg-wertermittlung-verkauf .wert-card2 .fn-choice.fn-choice-radio:hover,
body.pg-wertermittlung-verkauf .wert-card2 .fn-choice.fn-choice-radio.sel {
  border-color: var(--tn-accent);
}
body.pg-wertermittlung-verkauf .wert-card2 .fn-choice.fn-choice-radio.sel .fn-choice-radio-dot { border-color: var(--tn-accent); }
body.pg-wertermittlung-verkauf .wert-card2 .fn-choice.fn-choice-radio.sel .fn-choice-radio-dot::after { background: var(--tn-accent); }
body.pg-wertermittlung-verkauf .wert-tiles .fn-choice.fn-choice-tile {
  background: var(--tn-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tn-accent) 28%, transparent);
}
body.pg-wertermittlung-verkauf .wert-tiles .fn-choice.fn-choice-tile:hover {
  box-shadow: 0 10px 22px color-mix(in srgb, var(--tn-accent) 36%, transparent);
}
body.pg-wertermittlung-verkauf .wert-tiles .fn-choice-tile-label,
body.pg-wertermittlung-verkauf .wert-tiles .fn-choice.fn-choice-tile.sel .fn-choice-tile-label {
  background: var(--tn-accent); color: #fff;
}

/* ── Pain-Sektion 2-spaltig ─────────────────────────────────── */
.pn { max-width: 1120px; margin: 130px auto; padding: 0 24px; }
.pn-h2 { font-size: 1.9rem; font-weight: 700; color: var(--tn-dark); margin-bottom: 24px; }
.pn-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: start; }
.pn-text p { font-size: .96rem; line-height: 1.75; color: var(--tn-text); font-weight: 500; margin: 0 0 14px; }
.pn-text p strong { color: var(--tn-dark); font-weight: 800; }
.pn-questions-label { font-weight: 800; color: var(--tn-dark); font-size: 1rem; margin: 22px 0 6px; }
.pn-x-list { list-style: none; margin: 12px 0 0; padding: 0; }
.pn-x-list li { display: flex; align-items: center; gap: 11px; font-size: .93rem; line-height: 1.5; margin-bottom: 13px; color: var(--tn-text); font-weight: 600; }
.pn-x-list li .x { flex-shrink: 0; width: 20px; height: 20px; color: var(--tn-red); }
.pn-photo { width: 100%; height: 440px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.pn-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.pn-caption { text-align: center; font-size: .85rem; font-weight: 600; color: var(--tn-dark); margin: 0 0 10px; }
.pn-badges { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 30px; }
.pn-badges img { height: 100px; width: auto; display: block; }
.pn-badges img.pn-badge-google { height: 115px; }
.pn-badges img.pn-badge-wkdb { height: 116px; }
.pn-cta-wrap { text-align: center; margin-top: 64px; }
.pn-cta {
  display: inline-block; background: var(--tn-accent); color: #fff; font-weight: 700; font-size: .9rem;
  padding: 14px 28px; border-radius: 8px; text-decoration: none;
}
.pn-cta:hover { filter: brightness(.9); }

@media (max-width: 767px) {
  .pn-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Fallstudien / echte Kundenstimmen ──────────────────────── */
/* Überschrift jetzt hier statt über den Google-Bewertungen (Kundenwunsch
   2026-09-22) - eigener, engerer Abstand statt der Section-Innenabstände. */
body.pg-wertermittlung-verkauf .cs-heading { margin: 90px auto 32px; padding: 0 24px; max-width: 900px; }
.cs.cs-first { margin-top: 20px; }
.cs { max-width: 1120px; margin: 130px auto; padding: 0 24px; }
.cs-card {
  background: #fff; border-radius: var(--r, 16px); box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 40px;
}
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cs-photo-col { display: flex; flex-direction: column; gap: 18px; }
.cs-alt .cs-photo-col { order: 2; }
.cs-alt .cs-text-col { order: 1; }
.cs-photo { width: 100%; height: 300px; border-radius: 12px; overflow: hidden; }
.cs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-cta {
  display: inline-block; background: var(--tn-accent); color: #fff; font-weight: 700; font-size: .88rem;
  padding: 13px 24px; border-radius: 8px; text-decoration: none; margin-top: 20px;
}
.cs-cta:hover { filter: brightness(.9); }
.cs-stars { color: #fbbc04; font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 10px; display: block; }
.cs-quote blockquote { font-size: 1.1rem; font-weight: 700; line-height: 1.4; color: var(--tn-dark); margin: 0; }
.cs-block { margin-bottom: 18px; }
.cs-block h4 { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tn-accent); margin: 0 0 6px; }
.cs-block p { font-size: .93rem; line-height: 1.7; color: var(--tn-text); font-weight: 500; margin: 0; }
.cs-attribution { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: var(--tn-gray); }
.cs-attribution strong { display: block; color: var(--tn-dark); font-size: .95rem; margin-bottom: 2px; }
.cs-avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1.5px solid #d8d8d8;
}

@media (max-width: 767px) {
  .cs-card { padding: 24px; }
  .cs-grid { grid-template-columns: 1fr; gap: 24px; }
  .cs-alt .cs-photo-col, .cs-alt .cs-text-col { order: initial; }
}

/* ── Prozess in 3 Schritten ─────────────────────────────────── */
.tl4 { max-width: 900px; margin: 130px auto; padding: 0 24px; }
.tl4-heading { text-align: center; font-size: 1.9rem; font-weight: 700; color: var(--tn-dark); max-width: 640px; margin: 0 auto 64px; line-height: 1.3; }
.tl4-track { position: relative; }
.tl4-line-bg, .tl4-line-fill {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
}
.tl4-line-bg { background: #e5e1da; }
.tl4-line-fill { background: var(--tn-dark); height: 0; transition: height .1s linear; }
.tl4-item { position: relative; width: 50%; padding: 0 52px 90px 0; }
.tl4-item:last-child { padding-bottom: 0; }
.tl4-item-alt { margin-left: 50%; padding: 0 0 90px 52px; }
.tl4-badge {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 8px; background: var(--tn-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; z-index: 2;
}
.tl4-item .tl4-badge { right: -20px; }
.tl4-item-alt .tl4-badge { left: -20px; }
.tl4-card { background: #fff; border-radius: var(--r, 16px); box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 28px; }
.tl4-card img { width: 100%; height: auto; display: block; margin-bottom: 22px; }
.tl4-card img.tl4-img-sm { width: 93%; margin-left: auto; margin-right: auto; }
.tl4-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--tn-dark); margin: 0 0 10px; }
.tl4-card p { font-size: .92rem; line-height: 1.65; color: var(--tn-text); font-weight: 500; margin: 0 0 10px; }
.tl4-card p:last-child { margin-bottom: 0; }
.tl4-cta-wrap { text-align: center; margin-top: 56px; }

@media (max-width: 767px) {
  .tl4-line-bg, .tl4-line-fill { left: 20px; }
  .tl4-item, .tl4-item-alt { width: 100%; margin-left: 0; padding: 0 0 56px 56px; }
  .tl4-item .tl4-badge, .tl4-item-alt .tl4-badge { left: 0; right: auto; }
}

/* Heller Footer statt der Standard-Footervariante. */
body.pg-wertermittlung-verkauf .footer-mini { background: var(--tn-bg-light); border-top: 1px solid #ececec; }
body.pg-wertermittlung-verkauf .footer-mini-logo img { filter: none; }
body.pg-wertermittlung-verkauf .wert-duration-bold { font-weight: 800; }
body.pg-wertermittlung-verkauf .wert-reviews-text { display: flex; align-items: center; justify-content: center; gap: 18px; }
body.pg-wertermittlung-verkauf .wert-reviews-glogo { width: 25px; height: 25px; flex-shrink: 0; }
body.pg-wertermittlung-verkauf .footer-mini-copy { color: var(--tn-gray); }
body.pg-wertermittlung-verkauf .footer-mini-madeby { color: var(--tn-gray); }
body.pg-wertermittlung-verkauf .footer-mini-madeby:hover { color: var(--tn-dark); }
body.pg-wertermittlung-verkauf .footer-mini-divider { background: rgba(0,0,0,.08); }
body.pg-wertermittlung-verkauf .footer-mini-links a { color: var(--tn-gray); }
body.pg-wertermittlung-verkauf .footer-mini-links a:hover { color: var(--tn-dark); }

/* Google-Bewertungen ohne eigene Überschrift jetzt näher an die Fallstudien
   herangezogen (Kundenwunsch 2026-09-22) - kein eigener Innenabstand oben
   mehr, der Abstand kommt allein vom margin-bottom der letzten Fallstudie. */
.gmap-reviews.gmap-reviews-tight { padding-top: 0; }