/* Hallmark · shape: Studio Index · genre: editorial · theme: brand · redesign: full · job: hire, the call and the enquiry in the hero, the nav and 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: Stage (text 5, the live tour 7) · nav: edge-aligned bar, the four real pages, the phone and one quiet action · footer: index columns, the local landing pages are a real sitemap · signature: the InMotion tour walkable from the first screen
 * axes: light/grotesk-heavy/chromatic-orange · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a studio page argues with its work, so the hand-drawn browser and map in the hero went and the real tour took their place */
/* Hallmark · reworded the sticky bar label "Kostenlose Beratung" to "Beratung" · 72 names the cramped half-width button */
/* Hallmark · dropped the hero note "Unverbindlich · Antwort innerhalb von 24 Stunden" · 69 names it, the 24 hours stand in the figures and the close */
/* Hallmark · dropped the drawn map, the sketched arrow and the browser bar in the hero · 80 and 47a name them */
/* Hallmark · reworded "So einfach läuft's." to "So einfach läuft’s." · F1 names the straight quote */
/* Hallmark · reworded "Alle Bewertungen bei Google ansehen" to "Alle Google-Bewertungen ansehen" · 49b names the wrap at 320 */
/* Hallmark · dropped h4 · the h4 query in main.js and track.js reads only inside .tour-card and .ref-card, which this page never had; the old h4s are h3 now for F21 */
/* Hallmark · waive 77 · seven FAQ rows on columns 5 to 12 beside their head on 1 to 4 · layout.md names this Rows composition for an FAQ and the questions are the mass */
/* Hallmark · dismissed 25 · the step lines are one or two short sentences in a three-across Steps row, a caption-length lede */
/* Hallmark · reworded every en dash in copy, title and FAQ schema to a comma, colon or full stop · 19 names the dash */
@import url("./site.css");


/* ---------- Hero: Stage ---------- */
.hero { padding-block: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100dvh - 72px); padding-block: var(--space-2xl); }
.hero h1 { max-width: 12ch; font-size: clamp(2.75rem, 6vw + 0.5rem, 6.25rem); line-height: 1; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-2xl); }
.hero-tour { margin: 0; }
.hero-tour figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }


/* ---------- Arbeiten: Bento ---------- */
.work { padding-top: var(--section-gap-s); }
.work-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; margin-bottom: var(--space-2xl); }
.work-head-text { grid-column: 1 / 7; }
.work-head-text .lead { margin-top: var(--space-lg); }
.work-lead { grid-column: 8 / 13; }
.work-lead p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.work-facts { margin: var(--space-lg) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.work-facts li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.work-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: start; }
.work-card { margin: 0; }
.work-card img { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-card); }
.work-card--lead img { object-position: 50% 0; }
.work-card-body { display: grid; gap: var(--space-2xs); margin-top: var(--space-md); }
.work-card-body p { color: var(--color-ink-2); }
.work-tag { font-size: var(--text-sm); color: var(--color-ink-2); }


/* ---------- Leistungen: Zeilen ---------- */
.offer { background: var(--color-paper-2); }
.offer-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.offer-head { grid-column: 1 / 5; }
.offer-head .lead { margin-top: var(--space-md); }
.offer-rows { grid-column: 5 / 13; border-top: 1px solid var(--color-ink); }
.offer-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-lg); align-items: baseline; padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.offer-card h3 { font-size: var(--text-xl); }
.offer-card p { color: var(--color-ink-2); }
.offer-cta { justify-self: end; font-weight: 800; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.offer-card:hover .offer-cta { text-decoration-color: var(--color-ink); }
.offer-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.offer-card--pick h3 { color: var(--color-ink); }
.offer-card--pick { border-bottom-color: var(--color-ink); }

/* ---------- Ablauf ---------- */
.process { padding-bottom: var(--section-gap-s); }
.steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.step { position: relative; padding-top: var(--space-xl); counter-increment: schritt; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-rule); }
.step::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
.step h3::before { content: counter(schritt); display: block; margin-bottom: var(--space-md); font-size: var(--text-display-s); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.step.is-active h3::before, .step.is-done h3::before { color: var(--color-accent); }
.step p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 34ch; }

/* ---------- Über uns: Split ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.about-portrait { margin: 0; }
.about-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
.about-portrait figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.about-text .lead { margin-top: var(--space-lg); }
.about-text p:not(.lead) { margin-top: var(--space-md); color: var(--color-ink-2); }
.about-text p:last-child { margin-top: var(--space-xl); }

/* ---------- Nachprüfbar: Band ---------- */
.proof { background: var(--color-band); color: var(--color-band-ink); padding-block: var(--section-gap-s); }
.proof h2, .proof h3 { color: var(--color-band-ink); }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-2xl) 0 0; }
.figure-cell { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-xs); padding: 0 var(--space-lg); border-left: 1px solid var(--color-band-rule); }
.figure-cell:first-child { padding-left: 0; border-left: 0; }
.figure-cell:last-child { padding-right: 0; }
.fact-num { margin: 0; font-size: var(--text-display); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact-label { font-size: var(--text-sm); color: var(--color-band-ink-2); }
.voices-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; margin-top: var(--space-4xl); }
.voices-head h3 { grid-column: 1 / 7; font-size: var(--text-section); max-width: 20ch; }
.voices-head p { grid-column: 8 / 13; color: var(--color-band-ink-2); }
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.voice { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); margin: 0; padding-top: var(--space-lg); border-top: 2px solid var(--color-accent); }
.voice blockquote { margin: 0; font-size: var(--text-lg); line-height: 1.45; hanging-punctuation: first; }
.voice blockquote::before { content: "„"; }
.voice blockquote::after { content: "“"; }
.voice figcaption { display: grid; gap: var(--space-3xs); }
.voice-name { font-weight: 800; }
.voice-src { font-size: var(--text-sm); color: var(--color-band-ink-2); }
.voice .sterne { margin-bottom: calc(var(--space-sm) - var(--space-xl)); }
.voice blockquote { flex-grow: 1; }
.voices-nav, .voices-nav:not([hidden]) { display: none; }
.proof .more-link a { color: var(--color-band-ink); }


/* ---------- 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; }
.closing-text h2 { max-width: 14ch; }
.closing-text .lead { margin-top: var(--space-lg); }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }


/* ---------- Schmal ---------- */
@media (min-width: 100rem) {
  .tour-facade { aspect-ratio: 1 / 1; }
  .hero h1 { font-size: 6.25rem; } /* 7rem brach „Besseres.“ vor dem Punkt um (Spalte 507 px), 09.11.2026 */
}
@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero-actions { margin-top: var(--space-xl); }
  .head-split, .offer-layout, .voices-head { grid-template-columns: minmax(0, 1fr); }
  .head-split h2, .head-split .lead, .offer-head, .offer-rows, .voices-head h3, .voices-head p { grid-column: 1 / -1; }
  .work-head, .work-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .work-head-text, .work-lead { grid-column: 1 / -1; }
  .work-card img { height: auto; aspect-ratio: 16 / 10; }
  .offer-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .offer-cta { justify-self: start; margin-top: var(--space-xs); }
  .steps, .voices { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .about-grid, .closing-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .figure-cell:nth-child(3) { padding-left: 0; border-left: 0; }
  .figure-cell:nth-child(2) { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .fade-up { opacity: 1; transform: none; transition: none; }
  .btn, .tour-facade .facade-play, .faq-arrow, .nav-toggle span, .sticky-cta, .whatsapp-fab, .nav, .offer-card, .link-tel, .more-link a { transition: none; }
}

/* ---------- Umschauen (js/umschauen.js) ----------
   Der Hero-Rundgang dreht beim Laden einmal den Blick durch den Raum und folgt
   danach der Maus. Ohne Skript und bei reduzierter Bewegung: Standbild. */
.hero-tour .tour-facade.is-umschauen .facade-bg { will-change: transform; transform-origin: 50% 50%; }
.hero-tour .tour-facade.loaded .facade-bg { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-tour .tour-facade .facade-bg { transform: none !important; }
}