/* Hallmark · shape: kept (the nine 3D-Rundgang pages keep their section order) · genre: editorial · theme: brand (locked in DESIGN.md) · redesign: restyle · job: hire, the enquiry in the hero, beside the prices and in the close
 * paper: oklch(95.6% 0.006 62) · accent: oklch(64.4% 0.192 41.7) · display: Plus Jakarta Sans 800 · body: Plus Jakarta Sans 400 · hero: Settled, left-aligned head, lede and actions · nav: from index.html · footer: from index.html · signature: the real tours, walkable from the dark band
 * axes: light/grotesk-heavy/chromatic-orange · posture: Restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R4 V3 · weakest: V, the pages keep their template order by request; the surfaces climb paper, paper-2, a well and the dark band so the seams differ */
/* Hallmark · reworded every en dash in copy, title, og text and FAQ schema to a comma, colon, "bis" or full stop · 19 names the dash */
/* Hallmark · reworded every middle-dot string ("Fitnessstudio · Hachen", the small notes, the close note) to commas or list items · 63 names it */
/* Hallmark · reworded the sticky bar to the home page's "Anrufen" and "Beratung" · DESIGN.md makes the chrome identical on every page */
/* Hallmark · dropped every eyebrow and hero badge ("Für wen?", "Live-Demos", "3D-Rundgänge · Arnsberg" and the rest) · 54 names them */
/* Hallmark · dropped the glued arrows and the "+" glyph in the FAQ rows · 63 names the arrows, the FAQ draws its own mark */
/* Hallmark · dropped the step numerals "01" to "04" as text, now a CSS counter on a real ol · 54 names the ordinal over a head */
/* Hallmark · dropped the icon tiles over the use-case, feature and point heads · 3 and 30a name them */
/* Hallmark · dropped the veiled hero background photos (hero-3d-schleier.jpg, hero-fitness-schleier.jpg) · they sat at 90 percent paper and showed nothing */
/* Hallmark · waive 39b · div.tour-facade with role=button, 333 to 512px tall · the facade is the poster of the real Matterport tour and the whole picture starts it, the 84px play disc is its visible control */
/* Hallmark · waive 49b · "Alle Projekte mit Ort, Datum und Scanpunkten ansehen" wraps to two lines at 320 · a real phrase naming what the Referenzen page holds, it cannot shorten without losing the Scanpunkte */
/* Hallmark · dismissed 49 · the FAQ questions are full-width row buttons that wrap by design, the row grows with the question as on index.html */
/* Hallmark · dismissed 59 · a restyle keeps every section of the live page in its order; the count is the owner's */
/* Hallmark · answered F21 · the h4 inside .tour-card is the hook main.js and track.js read for the lightbox and tracking title */
@import url("./site.css");


/* ---------- Pfad ---------- */
.breadcrumbs { max-width: var(--container); margin-inline: auto; padding: var(--space-lg) var(--gutter) 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-muted); }
.breadcrumbs a { color: var(--color-ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.breadcrumbs [aria-current] { color: var(--color-ink); }


/* ---------- Hero: Settled ---------- */
main > section.page-hero { padding-block: var(--space-2xl); }
main > section.page-hero + section { padding-top: var(--section-gap-s); }
.page-hero-content { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.page-hero h1 { max-width: 22ch; font-size: var(--text-display-s); }
.page-hero-content > p { margin-top: var(--space-lg); max-width: 56ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
.page-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }

.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--container); margin: 0 auto; padding: var(--space-2xl) var(--gutter) var(--section-gap-s); }
.stat-item { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) var(--space-lg) 0; border-top: 1px solid var(--color-ink); border-left: 1px solid var(--color-rule); }
.stat-item:first-child { padding-left: 0; border-left: 0; }
.stat-item:last-child { padding-right: 0; }
.stat-num { font-size: var(--text-display-s); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { font-size: var(--text-sm); color: var(--color-ink-2); }


/* ---------- Flächen ---------- */
.plate--alt { background: var(--color-paper-2); }
.plate--rule > .container { padding-top: 0; }
main > section.plate--rule { padding-top: 0; }
main > section.plate--rule > .container::before { content: ""; display: block; height: 1px; margin-bottom: var(--section-gap); background: var(--color-rule); }
.plate--band { background: var(--color-band); color: var(--color-band-ink); }
.plate--band h2, .plate--band h3, .plate--band h4 { color: var(--color-band-ink); }
.plate--band .lead, .plate--band p { color: var(--color-band-ink-2); }
.plate--band a:not(.btn) { color: var(--color-band-ink); }
.plate--band :focus-visible { outline-color: var(--color-band-ink); }

.d1 { --i: 1; } .d2 { --i: 2; } .d3 { --i: 3; } .d4 { --i: 4; }
.tilt { transform: none !important; }
.tilt-glare { display: none; }


/* ---------- Einstieg: zwei Spalten ---------- */
.two-col-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.two-col-intro > :first-child { grid-column: 1 / 7; }
.two-col-intro > :last-child { grid-column: 8 / 13; }
.two-col-intro h2 { margin-bottom: var(--space-lg); }
.two-col-intro p + p { margin-top: var(--space-md); }
.two-col-intro p { color: var(--color-ink-2); }
.two-col-intro .btn { margin-top: var(--space-xl); }

.points, .local-facts { margin: 0; border-top: 1px solid var(--color-ink); }
.point, .local-fact { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.point-title, .local-fact dt { font-size: var(--text-lg); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.point p, .local-fact dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); }


/* ---------- Für wen, Leistungsumfang ---------- */
.usecase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.usecase-card, .feature-card { display: block; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); color: var(--color-ink); text-decoration: none; }
.feature-card { border-top-color: var(--color-rule); }
.usecase-card p, .feature-card p { margin-top: var(--space-sm); color: var(--color-ink-2); }
a.usecase-card { border-top-width: 2px; transition: border-color var(--dur-short) var(--ease-out); }
a.usecase-card:hover { border-top-color: var(--color-accent); }
a.usecase-card:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a.usecase-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.small-note { margin-top: var(--space-2xl); max-width: 75ch; font-size: var(--text-sm); color: var(--color-ink-2); }
.small-note + .small-note { margin-top: var(--space-sm); }
.small-note a, .prose a, .faq-a-inner a, .tour-open-link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.small-note a:hover, .prose a:hover { text-decoration-color: currentColor; }


/* ---------- Vergleich ---------- */
.comparison-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.comparison-col { padding: var(--space-xl); border-radius: var(--radius-card); }
.comparison-col.before { padding-inline: 0; border-top: 1px solid var(--color-ink); border-radius: 0; }
.comparison-col.after { background: var(--color-paper-3); }
.comparison-list { margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.comparison-list li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.comparison-col.before .comparison-list li { color: var(--color-ink-2); }
.comparison-list li:last-child { border-bottom: 0; }


/* ---------- Rundgänge: das dunkle Band ---------- */
.tour-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.tour-grid--2, .tour-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tour-card { min-width: 0; }
.tour-facade .facade-label { position: absolute; left: var(--space-sm); bottom: var(--space-sm); z-index: var(--z-raised); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-band); color: var(--color-band-ink); font-size: var(--text-sm); font-weight: 800; }
.tour-facade.loaded .facade-label { display: none; }
.tour-facade.is-website { cursor: default; }
.tour-facade.is-website .facade-bg { background: var(--color-paper-3) url("../img/ref-landgasthof-kleiner.jpg") center top / cover no-repeat; }
.tour-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-md); }
.tour-info h4 { margin: 0; font-size: var(--text-title); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.tour-info .tour-type { font-size: var(--text-sm); }
.tour-info p { max-width: 60ch; }
.ref-tags { display: flex; flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-band-ink-2); }
.tag + .tag::before { content: ",\00a0"; }
.tour-open-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-weight: 800; }
.tour-open-link svg { flex-shrink: 0; }
.plate--band .tour-open-link:hover { text-decoration-color: var(--color-band-ink); }


/* ---------- Preise ---------- */
.sqm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sqm-card { display: flex; flex-direction: column; padding: var(--space-xl) var(--space-xl) 0; border-top: 1px solid var(--color-ink); border-left: 1px solid var(--color-rule); }
.sqm-card:first-child { padding-left: 0; border-left: 0; }
.sqm-card:last-child { padding-right: 0; }
.sqm-card.highlight { border-top: 3px solid var(--color-accent); }
.sqm-range { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.sqm-price { margin-top: var(--space-lg); font-size: var(--text-display-s); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sqm-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.sqm-list { flex: 1; margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.sqm-list li { padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.full-btn { width: 100%; margin-top: var(--space-xl); }


/* ---------- Ablauf ---------- */
.process-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.process-step { padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); counter-increment: schritt; }
.process-step h3::before { content: counter(schritt, decimal-leading-zero); display: block; margin-bottom: var(--space-md); font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.process-step p { margin-top: var(--space-sm); color: var(--color-ink-2); }


/* ---------- Abschluss ---------- */
.closing { background: var(--color-paper-2); border-top: 1px solid var(--color-rule); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.cta-inner h2 { max-width: 14ch; }
.cta-inner .lead { margin-top: var(--space-lg); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }


/* ---------- Ratgeber (Kosten) ---------- */
.toc { max-width: 68ch; margin-bottom: var(--space-3xl); padding-top: var(--space-md); border-top: 1px solid var(--color-ink); font-size: var(--text-sm); }
.toc strong { display: block; margin-bottom: var(--space-xs); }
.toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--gap-columns); }
.toc li { break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.22em; }
.toc a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.prose { max-width: 68ch; }
.prose > p, .prose li { max-width: 60ch; }
.prose > .lead { margin-bottom: var(--space-xl); }
.prose h2 { margin-top: var(--space-3xl); margin-bottom: var(--space-lg); scroll-margin-top: var(--space-3xl); }
.prose h3 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.prose p + p, .prose ul + p, .prose ol + p, .prose .table-wrap + p { margin-top: var(--space-md); }
.prose ul, .prose ol { margin: var(--space-md) 0 0; padding-left: var(--space-lg); }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-ink-2); }
.table-wrap { margin-block: var(--space-xl); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table caption { caption-side: bottom; padding-top: var(--space-sm); text-align: left; color: var(--color-ink-2); }
.data-table th, .data-table td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.data-table thead th { border-bottom: 1px solid var(--color-ink); font-weight: 800; white-space: nowrap; }
.data-table tbody th { font-weight: 800; }
.data-table td:last-child, .data-table th:last-child { padding-right: 0; }
.definition { margin-block: var(--space-lg); padding-block: var(--space-md); border-block: 1px solid var(--color-rule); }
.author-box { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--color-ink); font-size: var(--text-sm); }
.meta-line { color: var(--color-ink-2); }


/* ---------- Schmal ---------- */
@media (max-width: 60rem) {
  .two-col-intro, .closing-grid, .comparison-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .two-col-intro > :first-child, .two-col-intro > :last-child { grid-column: 1 / -1; }
  .head-split { grid-template-columns: minmax(0, 1fr); }
  .head-split h2, .head-split .lead { grid-column: 1 / -1; }
  .usecase-grid, .process-wrap, .tour-grid, .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sqm-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .sqm-card, .sqm-card:first-child, .sqm-card:last-child { padding: var(--space-lg) 0 0; border-left: 0; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .stat-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat-item:nth-child(2) { padding-right: 0; }
}
@media (max-width: 40rem) {
  .usecase-grid, .process-wrap, .tour-grid, .tour-grid--2, .tour-grid--4, .features-grid { grid-template-columns: minmax(0, 1fr); }
  .comparison-col.after { padding: var(--space-lg); }
  .toc ol { columns: 1; overflow-x: auto; }
  .toc a { font-size: var(--text-xs); white-space: nowrap; }
  .data-table th, .data-table td { padding-right: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  a.usecase-card { transition: none; }
}