/* Hallmark · shape: Offer Page (the work, the price, the way), shared with /webseiten · genre: editorial · theme: brand (locked, DESIGN.md) · redesign: full · job: hire, the enquiry and the call in the hero, beside each size and at 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, a walkable tour 7) · nav: edge-aligned bar copied from index.html · footer: index columns copied from index.html · signature: five real tours you can walk through on the page
 * axes: light/grotesk-heavy/chromatic-orange · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: V, it shares the offer-page grammar with /webseiten on purpose; the tour wall is what only this page has */
/* Hallmark · dropped the sections "Matterport-3D-Rundgang oder 360°-Fotos?", "Für jede Branche. Für jeden Standort." (its links live on in "Für deine Branche, in deiner Nähe."), "Warum 3D mehr bringt als Fotos." and "Was bei jedem Rundgang dabei ist." (now one line under the prices) · Axel asked for less text and more to see */
/* Hallmark · reworded the prices 890, 1.490 and ab 2.490 € to 990, 1.690 and ab 2.490 €, and the h1 to "3D-Rundgang erstellen lassen. Ab 990 €." · Axel's price plan "Preismodell: Basis plus Add-ons" (30.10.2026), column Neu */
@import url("./webseiten.css");

/* ---------- Kopf ---------- */
.dr-hero-tour { margin: 0; }
.dr-hero-tour .tour-facade { aspect-ratio: 16 / 11; }
.dr-hero-tour figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- Rundgang-Wand ---------- */
.dr-touren { background: var(--color-band); color: var(--color-band-ink); }
.dr-touren h2, .dr-touren h3 { color: var(--color-band-ink); }
.dr-touren-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.dr-touren-head h2 { grid-column: 1 / 7; }
.dr-touren-head .lead { grid-column: 8 / 13; color: var(--color-band-ink-2); }
.dr-touren-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.dr-tour { margin: 0; }
.dr-tour--gross { grid-column: 1 / -1; }
.dr-tour .tour-facade { aspect-ratio: 16 / 10; }
.dr-tour--gross .tour-facade { aspect-ratio: 21 / 9; }
.dr-tour h3 { margin-top: var(--space-md); font-size: var(--text-lg); }
.dr-tour p { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-band-ink-2); }
.dr-touren .more-link a { color: var(--color-band-ink); }

/* ---------- Preise: Zusatz ---------- */
.dr-immer { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); max-width: 75ch; }

/* ---------- Ablauf ---------- */
.dr-ablauf h2 { margin-bottom: var(--space-2xl); }
.dr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Branchen und Orte ---------- */
.dr-wo { background: var(--color-paper-2); }
.dr-wo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.dr-wo-grid h2 { grid-column: 1 / 6; }
.dr-wo-links { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.dr-wo-links > div { display: grid; align-content: start; border-top: 1px solid var(--color-ink); }
.dr-wo-h { padding: var(--space-sm) 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.dr-wo-links a { white-space: nowrap; display: flex; align-items: center; min-height: 52px; border-top: 1px solid var(--color-rule); color: var(--color-ink); font-size: var(--text-lg); font-weight: 800; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.dr-wo-links a:hover { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }

/* ---------- Schmal ---------- */
@media (max-width: 60rem) {
  .dr-touren-head, .dr-wo-grid { grid-template-columns: minmax(0, 1fr); }
  .dr-touren-head h2, .dr-touren-head .lead, .dr-wo-grid h2, .dr-wo-links { grid-column: 1 / -1; }
  .dr-touren-grid { grid-template-columns: minmax(0, 1fr); }
  .dr-tour--gross .tour-facade { aspect-ratio: 16 / 10; }
  .dr-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .dr-wo-links { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dr-wo-links a { transition: none; }
}
.dr-hero h1 { max-width: 15ch; font-size: clamp(2.5rem, 3.8vw + 0.75rem, 4.75rem); }