/* Vergleichsseite Matterport-Alternative (Robin 27.10.2026). Eigene Teile in den Farben der Website; das nachgestellte Beispiel
   eines Rundgangs aus Kamera-Scans steht bewusst in neutralem Grau ohne Gold und ohne Logo (Robin 25.10.2026: fremde Verfahren
   nie im eigenen Design). */
.page-matterport .mp-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-text); }
.page-matterport .mp-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.page-matterport .mp-kicker-dark { color: var(--brass-on-dark); }

/* Kopf: Text links, Film rechts (mobil untereinander) */
.mp-hero { position: relative; isolation: isolate; color: var(--on-dark); background: radial-gradient(1100px 520px at 80% 10%, #2a2e33 0%, var(--dark) 60%); padding-block: clamp(104px, 13vw, 150px) clamp(48px, 7vw, 88px); }
.mp-hero-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.mp-hero-title { font-size: clamp(2.05rem, 4.4vw, 3.7rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.06; max-width: 17ch; margin: 0 0 .45em; }
.mp-hero .crumbs { margin-bottom: 18px; }
@media (min-width: 1000px) { .mp-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* Filme (Werbefilme aus der Engine) */
.mp-film { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #1d2024; box-shadow: 0 30px 60px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .06); }
.mp-film-video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Nachgestellter Kamera-Scan-Rundgang: neutral (Grau, Systemschrift), klar als Beispiel gekennzeichnet */
.mp-demo-section { background: var(--surface-2); }
.mp-demo-grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 1000px) { .mp-demo-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mp-demo { --mp-ui: #f2f2f2; --mp-ui-text: #2b2b2b; --mp-ui-line: #d4d4d4; --mp-ui-muted: #5c5c5c;
  margin: 0; border: 1px solid var(--mp-ui-line); border-radius: 12px; overflow: hidden; background: var(--mp-ui); color: var(--mp-ui-text); font-family: var(--font-body); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) { .mp-demo { --mp-ui: #262626; --mp-ui-text: #e9e9e9; --mp-ui-line: #3d3d3d; --mp-ui-muted: #b5b5b5; } }
.mp-demo-bar, .mp-demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; font-size: .88rem; }
.mp-demo-bar { border-bottom: 1px solid var(--mp-ui-line); }
.mp-demo-foot { border-top: 1px solid var(--mp-ui-line); }
.mp-demo-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--mp-ui-text); color: var(--mp-ui); font-weight: 600; letter-spacing: .02em; }
.mp-demo-hint, .mp-pano-status { color: var(--mp-ui-muted); margin: 0; }
.mp-pano-status { color: var(--mp-ui-text); font-weight: 600; }
.mp-demo-pp { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--mp-ui-line); border-radius: 999px; background: transparent; color: var(--mp-ui-text); font: inherit; cursor: pointer; }
.mp-demo-pp[hidden] { display: none; }
.mp-pp-pause, .mp-pp-play { display: inline-flex; }
.mp-demo-pp[aria-pressed="false"] .mp-pp-play, .mp-demo-pp[aria-pressed="true"] .mp-pp-pause { display: none; }
.mp-demo-pp:focus-visible, .mp-pano:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mp-demo-note { margin: 0; padding: 10px 14px 14px; font-size: .84rem; line-height: 1.5; color: var(--mp-ui-muted); }

.mp-pano { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #cfcfcf; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (max-width: 640px) { .mp-pano { aspect-ratio: 1 / 1; } }
.mp-pano-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-pano-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.mp-pano-canvas:active { cursor: grabbing; }
.mp-pano.is-live .mp-pano-still { visibility: hidden; }
/* Kreise am Boden: Knopf 64 px (Klickfläche), sichtbarer Kreis perspektivisch flach (--flat) */
.mp-hot { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 50%; }
.mp-hot::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 4px 14px rgba(0, 0, 0, .25); transform: scaleY(var(--flat, .5)); transition: background .2s ease, transform .2s ease; }
.mp-hot:hover::before { background: rgba(255, 255, 255, .55); }
.mp-hot:focus-visible { outline: none; }
.mp-hot:focus-visible::before { box-shadow: 0 0 0 3px var(--focus), 0 4px 14px rgba(0, 0, 0, .25); background: rgba(255, 255, 255, .55); }
.mp-hot.is-off { opacity: 0; pointer-events: none; }
.mp-hot.is-next::before { animation: mp-pulse 1s ease-in-out infinite; }
@keyframes mp-pulse { 50% { background: rgba(255, 255, 255, .7); } }
@media (prefers-reduced-motion: reduce) { .mp-hot.is-next::before { animation: none; } }

/* Erklärung neben dem Beispiel: was der Punkt bedeutet und wie es bei Immovisio ist */
.mp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.mp-point { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.mp-point-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 500; }
.mp-point h3 { margin: 6px 0 6px; font-size: 1.15rem; font-weight: 500; }
.mp-point p { margin: 0 0 8px; color: var(--text-2); }
.mp-point .mp-point-us { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--text); font-weight: 500; }
.mp-point-us .icon { color: var(--brass-text); margin-top: 4px; }

/* So bei Immovisio */
.mp-ours-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .mp-ours-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.mp-checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.mp-checks li { display: flex; gap: 10px; align-items: flex-start; }
.mp-checks .icon { color: var(--brass-on-dark); margin-top: 2px; }

/* Unterschiede: Text mit Gegenüberstellung, daneben Film oder Kostenkarte; am PC abwechselnd links und rechts */
.mp-diff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.mp-diff { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 1000px) {
  .mp-diff { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .mp-diff:nth-child(even) .mp-diff-text { order: 2; }
  .mp-diff.is-text { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}
.mp-diff-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brass-tint); color: var(--brass-text); margin-bottom: 14px; }
.mp-diff h3 { margin: 0 0 14px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 450; }
.mp-diff-them, .mp-diff-us { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; margin: 0 0 12px; }
.mp-diff-them { color: var(--text-2); }
.mp-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--text-2); white-space: nowrap; }
.mp-tag-us { border-color: transparent; background: var(--brass-tint); color: var(--brass-text); }

/* Kostenkarte */
.mp-cost { display: grid; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
@media (min-width: 640px) { .mp-cost { grid-template-columns: 1fr 1fr; } }
.mp-cost-them, .mp-cost-us { padding: clamp(18px, 2.5vw, 28px); }
.mp-cost-them { background: var(--surface-2); color: var(--text-2); }
.mp-cost-us { box-shadow: inset 0 0 0 2px var(--brass); }
.mp-cost-label { margin: 0 0 12px; font-weight: 600; color: var(--text); }
.mp-cost-us .compare-mark { color: var(--text); }
.mp-cost-price { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--text); }
.mp-cost ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .96rem; }
.mp-cost-them li { padding-left: 14px; position: relative; }
.mp-cost-them li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.mp-cost-us li { display: flex; gap: 8px; align-items: flex-start; }
.mp-cost-us .icon { color: var(--brass-text); margin-top: 3px; }

/* Vergleichstabelle (Stil des Startseiten-Vergleichs), nur zwei Spalten */
.mp-compare-table { min-width: 620px; }

/* Fair: wann was passt */
.mp-fair-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .mp-fair-grid { grid-template-columns: 1fr 1fr; } }
.mp-fair-card { padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.mp-fair-card h3 { margin: 0 0 14px; font-size: 1.3rem; font-weight: 500; }
.mp-fair-card ul { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.mp-fair-card li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.mp-fair-card li .icon { margin-top: 4px; color: var(--text-2); }
.mp-fair-them { background: var(--surface-2); }
.mp-fair-us { box-shadow: inset 0 0 0 2px var(--brass), var(--shadow); }
.mp-fair-us li { color: var(--text); }
.mp-fair-us li .icon { color: var(--brass-text); }
.mp-fair-us .btn { margin-top: 20px; }

/* Markenhinweis */
.mp-legal { padding-block: 20px 28px; background: var(--surface-2); border-top: 1px solid var(--line); }
.mp-legal p { margin: 0; font-size: .86rem; color: var(--text-2); max-width: 80ch; }
.mp-hero .hero-facts { grid-template-columns: 1fr; display: grid; }
.mp-compare-table { table-layout: fixed; }
.mp-compare-table thead .compare-corner { width: 22%; }

/* Antwortkasten „Kurz gesagt“ (Suchmaschinen und KI-Assistenten zitieren solche Absätze): direkt unter dem Kopf, ruhig, gut lesbar */
.mp-answer { padding-block: clamp(32px, 5vw, 56px) 0; }
.mp-answer-box { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mp-answer-title { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 450; }
.mp-answer-text { margin: 0; font-size: 1.08rem; line-height: 1.65; max-width: 72ch; }
.mp-answer-facts { display: grid; gap: 10px 24px; margin: 4px 0 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mp-answer-facts div { border-left: 2px solid var(--brass); padding-left: 12px; }
.mp-answer-facts dt { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.mp-answer-facts dd { margin: 2px 0 0; font-weight: 500; }
.mp-answer-updated { margin: 0; font-size: .86rem; color: var(--text-2); }

/* „Die Gründe liegen auf der Hand“: fünf Gründe auf einen Blick vor den Unterschieden im Einzelnen */
.mp-reasons { list-style: none; margin: 0 0 clamp(40px, 6vw, 72px); padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mp-reason { padding: 20px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--brass); }
.mp-reason-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brass-tint); color: var(--brass-text); margin-bottom: 12px; }
.mp-reason h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 500; }
.mp-reason p { margin: 0; color: var(--text-2); font-size: .97rem; }