/* Hallmark · shape: kept, each page keeps its order · genre: editorial · theme: brand (locked, DESIGN.md) · redesign: restyle · job: hire, the enquiry and the call in the hero 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: Settled, left on the container (/webseiten, /webdesign-sundern, /referenzen, /ueber-uns) · nav: edge-aligned bar copied from index.html · footer: index columns copied from index.html · signature: the real work, the Kleiner site and five walkable tours
 * axes: light/grotesk-heavy/chromatic-orange · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R5 V3 · weakest: V, a restyle keeps four old section orders; the paper changes, hairlines and the home page's head split carry the system instead of new compositions */
/* Hallmark · reworded every en dash in copy, title, description, og text and FAQ schema to a comma, colon or full stop, and the ranges 5–10 and 1–3 to "5 bis 10" and "1 bis 3" · 19 names the dash */
/* Hallmark · reworded every "A · B" meta line (ref types, tour types, the pricing notes, the close notes, the contact line) to commas, full stops or separate list items · 63 names the middle dot */
/* Hallmark · dropped every eyebrow badge and label over a heading ("Webseiten", "Das Problem", "Die Lösung", "Was du bekommst", "Referenzen", "Preise", "Ablauf", "Häufige Fragen", "Jetzt starten" and kin); the date "Stand September 2026" on /referenzen stays as a time line under the hero · 54 names the eyebrow */
/* Hallmark · dropped the glued arrows, the decorative status dots, the em-dash list markers, the icon tiles over feature heads and the .tilt and reveal-left/right effects · 63, 3 and the system's one reveal name them */
/* Hallmark · waive 39b · the tour-facade is a role=button preview 260 to 400px tall · each 3D-Rundgang tile is the picture you click, Tour starten loads the Matterport Rundgang in place */
/* Hallmark · reworded "Unsere Projekte – zum Durchklicken." to "Unsere Projekte zum Durchklicken." · 19 names the dash */
/* Hallmark · reworded "Kevin Ortlieb – scannt vor Ort" to "Kevin Ortlieb scannt vor Ort" · 19 names the dash */
/* Hallmark · reworded "Axel Kaiser – baut die Websites" to "Axel Kaiser baut die Websites" · 19 names the dash */
/* Hallmark · reworded "Lern uns kennen – am Telefon oder bei dir vor Ort." to "Lern uns kennen, am Telefon oder bei dir vor Ort." · 19 names the dash */
/* Hallmark · answered F21 · the five tour cards on /referenzen keep h4 under the h2 because main.js and track.js read .tour-card h4 for the lightbox and analytics names */
/* Hallmark · dismissed 49 · the FAQ questions are real sentences in the shared site.css row (as on index.html), a wrapped question stays one button */
/* Hallmark · dismissed 59 · /webseiten and /webdesign-sundern keep their ten sections in the order the restyle was asked to keep; merging is a full-depth change */
@import url("./site.css");


/* ---------- Pfad ---------- */
.breadcrumbs { padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.breadcrumbs li + li::before { content: "/"; color: var(--color-muted); }
.breadcrumbs a { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.22em; }
.breadcrumbs a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); }


/* ---------- Kopf der Seite ---------- */
main > .page-hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: var(--space-lg); }
.page-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.page-hero-time { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }


/* ---------- Abschnitte ---------- */
.band { background: var(--color-paper-2); }
.band-rule { border-top: 1px solid var(--color-rule); }
.section-header, .wide-intro { 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); }
.section-header h2, .wide-intro h2 { grid-column: 1 / 8; }
.section-header p, .wide-intro p { grid-column: 8 / 13; max-width: 52ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }

.two-col-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.two-col-intro > * > * + * { margin-top: var(--space-md); }
.two-col-intro > * > h2 + * { margin-top: var(--space-lg); }
.two-col-intro > * > .btn { margin-top: var(--space-xl); }
.two-col-intro > * > p { color: var(--color-ink-2); }

.text-link, .prose a, .tour-info p a, .about-text a:not(.link-tel), .two-col-intro p a, .small-note a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.text-link:hover, .prose a:hover, .tour-info p a:hover, .about-text a:not(.link-tel):hover, .two-col-intro p a:hover, .small-note a:hover { text-decoration-color: var(--color-ink); }
.small-note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); }


/* ---------- Heimvorteil: drei Zeilen ---------- */
.home-points { border-top: 1px solid var(--color-ink); }
.home-point { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.home-point h3 { font-size: var(--text-lg); }
.home-point p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.two-col-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* ---------- Problem: drei Spalten ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.problem-card { padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.problem-card p { margin-top: var(--space-sm); color: var(--color-ink-2); }


/* ---------- Vorher und nachher ---------- */
.comparison-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.comparison-col { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.comparison-col.after { border-top: 2px solid var(--color-accent); }
.comparison-label { font-size: var(--text-sm); font-weight: 800; }
.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 li { color: var(--color-muted); }


/* ---------- Leistungen: zwei Reihen ----------
   .tilt bleibt als Haken für main.js stehen, die Kippbewegung ist hier abgeschaltet (DESIGN.md: eine Einblendung, sonst Ruhe). */
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.feature-card { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.feature-card.tilt { transform: none !important; }
.tilt-glare { display: none; }
.feature-card p { margin-top: var(--space-sm); color: var(--color-ink-2); }


/* ---------- Referenz: Bild und Text ---------- */
.ref-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; }
.ref-feature-media { position: relative; min-height: 480px; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3) url("../img/ref-landgasthof-kleiner.jpg") center / cover no-repeat; }
.ref-feature-media--photo { background: var(--color-paper-3); }
.ref-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.ref-feature-flag { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-raised); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 800; }
.ref-feature-body { display: flex; flex-direction: column; align-items: flex-start; }
.ref-feature-body h3 { font-size: var(--text-2xl); }
.ref-meta { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.ref-feature-body > p:not([class]) { margin-top: var(--space-lg); color: var(--color-ink-2); }
.ref-feature-facts { width: 100%; margin: var(--space-lg) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.ref-feature-facts li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.ref-feature-body .small-note { margin-top: var(--space-lg); }
.ref-feature-body .btn { margin-top: var(--space-xl); }


/* ---------- Preise: drei Spalten an Linien ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.pricing-card { display: flex; flex-direction: column; padding: var(--space-xl) var(--space-xl) 0; border-left: 1px solid var(--color-rule); }
.pricing-card:first-child { padding-left: 0; border-left: 0; }
.pricing-card:last-child { padding-right: 0; }
.pricing-label { font-size: var(--text-title); }
.pricing-price { display: grid; gap: var(--space-2xs); margin-top: var(--space-lg); }
.pricing-from, .pricing-period { font-size: var(--text-sm); color: var(--color-ink-2); }
.pricing-amount { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.pricing-features { flex: 1; margin: var(--space-lg) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.pricing-features li { padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.full-btn { width: 100%; margin-top: var(--space-xl); }


/* ---------- Ablauf: vier Schritte ---------- */
.process-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.process-step { padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.process-circle { margin-bottom: var(--space-md); font-size: var(--text-display-s); font-weight: 800; 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); }


/* ---------- Rundgänge: zwei groß, drei klein ---------- */
.tour-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.tour-card { grid-column: span 2; min-width: 0; }
.tour-card:nth-child(-n+2) { grid-column: span 3; }
.tour-card .tour-facade { aspect-ratio: 16 / 10; }
.facade-label { position: absolute; left: var(--space-sm); bottom: var(--space-sm); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); }
.tour-card .tour-facade.loaded .facade-label { display: none; }
.tour-info { margin-top: var(--space-md); }
.tour-info h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-title); font-weight: 800; line-height: 1.2; letter-spacing: var(--tracking-display); text-wrap: balance; }
.tour-type { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.tour-info > p:not([class]) { margin-top: var(--space-sm); color: var(--color-ink-2); }
.ref-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-sm); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.tour-open-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin-top: var(--space-xs); color: var(--color-ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.tour-open-link:hover { text-decoration-color: var(--color-ink); }
.tour-open-link svg { flex-shrink: 0; }


/* ---------- Text und Tabelle ---------- */
.prose { max-width: 68ch; line-height: 1.65; color: var(--color-ink-2); }
.prose > * + * { margin-top: var(--space-md); }
.table-wrap { margin-block: var(--space-xl); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); color: var(--color-ink); }
.data-table caption { padding-bottom: 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; font-weight: 400; vertical-align: top; }
.data-table thead th { border-bottom-color: var(--color-ink); font-weight: 800; white-space: nowrap; }
.data-table tbody th { font-weight: 800; }
.data-table td:last-child, .data-table thead th:last-child { padding-right: 0; text-align: right; font-variant-numeric: tabular-nums; }


/* ---------- Über uns ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; }
.about-portrait-frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.about-portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.about-names { display: block; margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 800; }
.about-names small { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); }
.about-text > * + * { margin-top: var(--space-md); }
.about-text > h2 + * { margin-top: var(--space-lg); }
.about-text > p { color: var(--color-ink-2); }
.local-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; }
.local-fact { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.local-fact dt { font-size: var(--text-lg); font-weight: 800; line-height: 1.3; }
.local-fact dd { margin: var(--space-xs) 0 0; max-width: 40ch; 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-2xl) var(--space-3xl); align-items: start; }
.closing-text h2 { max-width: 16ch; }
.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 (max-width: 60rem) {
  .section-header, .wide-intro, .two-col-intro, .ref-feature, .about, .closing-grid { grid-template-columns: minmax(0, 1fr); }
  .section-header h2, .section-header p, .wide-intro h2, .wide-intro p { grid-column: 1 / -1; }
  .problem-grid, .features-grid, .local-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .comparison-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .process-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
  .ref-feature-media { min-height: 0; aspect-ratio: 4 / 3; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .pricing-card, .pricing-card:first-child, .pricing-card:last-child { padding: var(--space-xl) 0; border-left: 0; }
  .pricing-card + .pricing-card { border-top: 1px solid var(--color-rule); }
  .tour-grid { grid-template-columns: minmax(0, 1fr); }
  .tour-card, .tour-card:nth-child(-n+2) { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .process-wrap { grid-template-columns: minmax(0, 1fr); }
}