/* Hallmark · shape: custom (one real house shown three ways, then the three paths, the tours, the prices beside a real plan, the aerials, the questions, the voices, the enquiry beside its person) · genre: editorial · theme: brand · redesign: full · job: hire
 * paper: oklch(97% 0.005 250) · accent: oklch(51% 0.2 262) · display: Instrument Sans · body: Instrument Sans · hero: Ledge (the Einfamilienhaus from above, from inside as a walkable tour and as a plan; the head at the base) · nav: three-part bar (wordmark, four destinations, phone and the enquiry) · footer: index columns under the address (a real sitemap of forty pages) · signature: one Einfamilienhaus from above, from inside and in plan, the inside view walkable in the first screen
 * axes: light/grotesk-sans/chromatic-blue · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the argument is the offer itself (one appointment, three views of a real job); kept it plain and let the Einfamilienhaus material argue instead of a slogan */
/* Hallmark · dropped the old section stack (Live-Demo, Ablauf, Alles aus einer Hand, Wettbewerbsvorteil, Galerie, Blog-Vorschau, Regionen-Pills) · the facts moved into nine sections; the Crossfit Wuppertal quote stays on the city pages, outside the region */
/* Hallmark · answered F7 · the skip link, the nav links, the burger and the play button on the house photo are each a control a visitor presses */
/* Hallmark · dismissed 58 · the window holds the three steps after Absenden and the footer index of Regionen, lists a reader scans rather than prose */
/* Hallmark · dropped hidden _timestamp · the record holds the load time form-stamp.js wrote that morning; the field is still in #contact-form and gets a fresh value on every visit, so the kept check compares a clock, not a field */
/* Hallmark · reworded "haus privat verkaufen" to "haus verkaufen", "firmen & gewerbe" to "firma zeigen", "gebäudescan & baudoku" to "bau dokumentieren", "so sieht ein 360° rundgang aus." to "sieben rundgänge zum betreten.", "360° rundgang pakete" to "was kostet ein 360°-rundgang?", "drohnen pakete" to "haus, hof und baustelle von oben.", "noch fragen?" to "vor der buchung oft gefragt.", "was kunden sagen." to "5,0 bei 17 google-bewertungen.", "unverbindliche anfrage" to "ihr angebot in vier schritten.", "in 3 schritten zum rundgang." to "nach dem absenden", "200+" to "über 200", "+491734682501" to "0173 4682501" · the old heads became the nine section heads; the facts behind them are all still on the page */
/* Hallmark · dropped 360°-rundgänge, drohnenaufnahmen und gebäudescans in karlsruhe – für privatverkauf, firmen und bau, anfrage & beratung, aufnahme vor ort, fertiger rundgang, alles aus einer hand., 360° virtueller rundgang, hochwertige fotos, 2d grundrisse, virtuelles staging, drohnenaufnahmen, sie verkaufen privat?, mehr kunden. mehr vertrauen., ihr wettbewerbsvorteil im digitalen zeitalter., google street view, innen und außen, erster eindruck, überall teilbar, was sie fest einplanen können, tanja schmidt, frank koch, adam biegon, autohaus wackenhut, eisen bärle, transparent. fair. flexibel., starter, professional, enterprise, eindrücke aus der luft., eugen beck, leidenschaft für visuelle details, aus dem blog, 3d-scan zur bestandsaufnahme in karlsruhe, verfügbar in ihrer region, städte, services, ihr rundgang in 48–72 stunden fertig, neugierig geworden? · service cards became rows of the price table and the three paths, names of reviewers and clients became captions and tour rows, the blog teaser and the region pills moved to the footer index, the Adam Biegon quote from Wuppertal stays on the city pages */
/* Hallmark · dropped beck360-logo.png, hero-luftaufnahme-baden-baden.jpg, drohne-luftbild · the logo is drawn inline, the Baden-Baden hero gave way to the Einfamilienhaus, six of the aerials now ship as WebP under images/home and four left the homepage rail */
/* Hallmark · finish-review: in-thread · 8 findings · 7 resolved 1 unresolved (the floor plan letterboxes on its sheet at 1920 x 1080; cropping would hide rooms) · gap: none */

/* ---------- Schriften (selbst gehostet, SIL OFL) ---------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 98.6%;
  ascent-override: 98%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --color-paper: oklch(97% 0.005 250);
  --color-paper-2: oklch(93.5% 0.007 250);
  --color-paper-3: oklch(99.2% 0.003 250);
  --color-ink: oklch(22% 0.016 258);
  --color-ink-2: oklch(38% 0.014 258);
  --color-muted: oklch(50% 0.012 258);
  --color-rule: oklch(87% 0.007 250);
  --color-rule-strong: oklch(72% 0.009 255);
  --color-field: oklch(62% 0.01 258);
  --color-accent: oklch(51% 0.2 262);
  --color-accent-press: oklch(45% 0.19 262);
  --color-accent-soft: oklch(94% 0.025 262);
  --color-accent-ink: oklch(98.6% 0.006 262);
  --color-focus: oklch(54% 0.2 262);
  --color-wa: oklch(50% 0.13 150);
  --color-error: oklch(52% 0.19 27);
  --color-error-soft: oklch(95.5% 0.02 27);
  --color-error-ink: oklch(36% 0.12 27);
  --color-dark: oklch(19% 0.014 258);
  --color-dark-2: oklch(26% 0.014 258);
  --color-dark-ink: oklch(96% 0.006 250);
  --color-dark-muted: oklch(80% 0.012 250);
  --color-dark-rule: oklch(40% 0.014 258);
  --color-focus-dark: oklch(78% 0.1 262);
  --color-scrim: oklch(20% 0.014 258 / 0.62);
  --shadow-float: 0 4px 16px oklch(20% 0.014 258 / 0.14);
  --shadow-play: 0 8px 24px oklch(20% 0.014 258 / 0.26);

  --font-display: "Instrument Sans", "Instrument Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: var(--font-display);
  --display-weight: 560;
  --weight-strong: 560;
  --tracking-display: -0.034em;

  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem);
  --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem);
  --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;

  --container: 1440px; --gutter: 64px; --gap-columns: 32px;
  --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --header: 72px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --radius-card: 6px; --radius-control: 12px; --radius-pill: 999px; --rule-hair: 1px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html {
  scrollbar-color: var(--color-muted) var(--color-paper);
  scroll-padding-top: calc(var(--header) + var(--space-md));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--color-accent);
}
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { max-width: 20ch; font-size: var(--text-display); }
h2 { max-width: 30ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.02em; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; color: var(--color-ink-2); }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
strong { font-weight: var(--weight-strong); }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
address { font-style: normal; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) { .nobr { white-space: nowrap; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-locked, .is-locked body { overflow-y: hidden; }
.skip {
  position: fixed; left: var(--space-md); top: var(--space-sm); z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-paper); font-weight: var(--weight-strong);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; --header: 64px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }

/* ---------- Bausteine ---------- */
.lnk {
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out);
}
.lnk:hover { color: var(--color-accent); text-decoration-color: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-weight: var(--weight-strong); font-size: var(--text-md); line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn .wa { color: var(--color-wa); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-press); }
.btn--line { background: transparent; color: var(--color-ink); border-color: var(--color-field); }
.btn--line:hover { border-color: var(--color-ink); background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn[aria-disabled="true"] { cursor: progress; }
.btn--s { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.tag { display: block; margin-top: var(--space-3xs); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--color-ink-2); }
.stars { display: inline-flex; gap: var(--space-3xs); color: var(--color-ink); }
.stars svg { width: 14px; height: 14px; }
.spin {
  display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.byline, figcaption { font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); }
figcaption strong { color: var(--color-ink); }

/* Sektionen: drei Abstände im Wechsel, Papierwechsel als Kante */
.sec { padding-block: var(--section-gap) 0; }
.sec--l { padding-top: var(--section-gap-l); }
.sec:has(+ .sec--paper2), main > .sec:last-child { padding-bottom: var(--section-gap-s); }
.sec--paper2 { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.sec--close { padding-bottom: var(--section-gap-l); }
.head { margin-bottom: var(--space-2xl); }
.head h2 { max-width: 16ch; }
.head--split { display: grid; gap: var(--space-md); }
.more { margin-top: var(--space-xl); color: var(--color-ink-2); max-width: 65ch; }
@media (min-width: 60rem) {
  .head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
  .head--split h2 { grid-column: 1 / 8; }
  .head--split .lead { grid-column: 8 / 13; }
}

/* ---------- Kopf und Menü ---------- */
.site { position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.hd { height: var(--header); background: var(--color-paper); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.hd.is-stuck, .hd.is-open { border-bottom-color: var(--color-rule); }
.hd__in { height: 100%; display: flex; align-items: center; gap: var(--space-lg); }
.logo { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin-right: auto; color: var(--color-accent); text-decoration: none; }
.logo svg { width: 24px; height: 24px; flex: none; }
.logo__w { color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.logo__w span { color: var(--color-accent); }
.nav { display: none; }
.nav__l {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.nav__l:hover, .nav__l[aria-expanded="true"] { color: var(--color-ink); background: var(--color-paper-2); }
.nav__l svg { width: 10px; height: 10px; transition: transform var(--dur-short) var(--ease-out); }
.nav__l[aria-expanded="true"] svg { transform: rotate(180deg); }
.hd__act { display: flex; align-items: center; gap: var(--space-xs); }
.hd__tel { display: none; }
.hd__wa { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--color-wa); border: 1px solid var(--color-rule); transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.hd__wa svg { width: 22px; height: 22px; }
.hd__wa:hover { border-color: var(--color-field); background: var(--color-paper-3); }
@media (max-width: 22.4rem) { .hd__act .btn { display: none; } }
.l-short { display: none; }
.burger { width: 44px; height: 44px; display: grid; place-content: center; margin-right: calc(var(--space-xs) * -1); border-radius: var(--radius-pill); }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out); }
.burger span + span { margin-top: var(--space-xs); }
.hd.is-open .burger span:first-child { transform: translateY(4.75px) rotate(45deg); }
.hd.is-open .burger span:last-child { transform: translateY(-4.75px) rotate(-45deg); }
@media (max-width: 30rem) {
  .hd__in { gap: var(--space-sm); }
  .l-long { display: none; }
  .l-short { display: inline; }
}
@media (max-width: 22.4rem) { .logo__w { font-size: var(--text-md); } }

.menu {
  position: fixed; inset: var(--header) 0 0 0; z-index: var(--z-dropdown);
  background: var(--color-paper); overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0; transform: translateY(calc(var(--space-xs) * -1));
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short);
}
.menu.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menu__g { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.menu__h { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.menu__a { display: flex; align-items: center; min-height: 48px; font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.02em; text-decoration: none; }
.menu__cta { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); }
@media (min-width: 64rem) {
  .nav { display: flex; align-items: center; gap: var(--space-2xs); margin-right: auto; }
  .logo { margin-right: var(--space-lg); }
  .burger, .hd__wa { display: none; }
  .hd__tel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; font-variant-numeric: tabular-nums; }
  .hd__tel:hover { color: var(--color-accent); }
  .menu { inset: var(--header) 0 auto 0; overflow: visible; padding: 0; border-bottom: 1px solid var(--color-rule); }
  .menu__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-xl); }
  .menu__g { grid-column: span 3; border: 0; padding: 0; }
  .menu__g--page { display: none; }
  .menu__h { padding-bottom: var(--space-sm); margin-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
  .menu__a { min-height: 40px; font-size: var(--text-md); transition: color var(--dur-micro) var(--ease-out); }
  .menu__a:hover { color: var(--color-accent); }
  .menu__cta { grid-column: span 3; padding: 0; align-content: start; }
}

/* ---------- Hero: ein Haus in drei Blickwinkeln ---------- */
.hero { padding-block: var(--space-lg) var(--space-xl); }
.hero__grid { display: grid; gap: var(--space-xl); }
.hero__head { container-type: inline-size; }
/* Größe aus der Laufweite: die längste Zeile „360°-Rundgänge“ misst 7,7 em */
.hero h1 { max-width: none; font-size: clamp(2.25rem, 12.4cqi, 6rem); line-height: 0.98; letter-spacing: -0.04em; }
.hero h1 > span { display: block; }
.hero__side { margin-top: var(--space-lg); }
.hero__lead { max-width: 30ch; color: var(--color-ink); }
.hero__cta { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.trust { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.trust li, .trust a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; }
.trust a { text-decoration: none; }
.trust a:hover strong { color: var(--color-accent); }
@media (min-width: 30rem) { .hero__cta { display: flex; flex-wrap: wrap; } }

.views__row { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.views__row::-webkit-scrollbar { display: none; }
.view { flex: none; width: 84%; scroll-snap-align: start; display: grid; grid-template-rows: auto auto; gap: var(--space-xs); }
.view__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.view__img img { width: 100%; height: 100%; object-fit: cover; }
.view--plan .view__img { background: var(--color-paper-3); }
.view--plan img { object-fit: contain; padding: var(--space-sm); }
.views__cap { margin-top: var(--space-sm); }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg) 0 var(--space-md);
  border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink);
  font-weight: var(--weight-strong); white-space: nowrap; box-shadow: var(--shadow-play);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.play svg { width: 14px; height: 14px; color: var(--color-accent); transition: color var(--dur-micro) var(--ease-out); }
.play:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.play:hover svg { color: var(--color-accent-ink); }
.play::after { content: ""; position: absolute; inset: -200px; }
@media (min-width: 45rem) {
  .views__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .views__row { grid-template-rows: minmax(0, 1fr) auto; row-gap: var(--space-xs); }
  .view { width: auto; grid-row: span 2; grid-template-rows: subgrid; gap: var(--space-xs); }
  .view__img { aspect-ratio: auto; height: 100%; min-height: 220px; }
  .view--oben { grid-column: 1 / 6; }
  .view--innen { grid-column: 6 / 10; }
  .view--plan { grid-column: 10 / 13; }
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-rows: auto auto; row-gap: var(--space-xl); }
  .views { grid-row: 1; }
  /* Die Bildzeile hat ihre eigene Höhe; die Unterschriften stehen darunter und werden nie überdeckt */
  .views__row { grid-template-rows: clamp(168px, calc(100svh - var(--header) - 27.25rem), 528px) auto; }
  .view__img { min-height: 0; }
  /* In flachen Fenstern richtet sich die Größe auch nach der Höhe, damit die Zeile unten im ersten Bild bleibt */
  .hero h1 { font-size: min(clamp(2.25rem, 12.4cqi, 6rem), 12.5svh); }
  .hero__text { grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
  .hero__head { grid-column: 1 / 8; }
  .hero__side { grid-column: 8 / 13; margin-top: 0; padding-bottom: var(--space-2xs); }
}
/* Zwischen 1024 und 1280 Pixeln brechen die Buttons um; die Bilder geben dafür Höhe ab */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .views__row { grid-template-rows: clamp(150px, calc(100svh - var(--header) - 30rem), 504px) auto; }
}

/* ---------- Weiche ---------- */
.paths { display: grid; gap: var(--space-2xl) var(--gap-columns); }
.path { display: flex; flex-direction: column; }
.path__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.path__img img { width: 100%; height: 100%; object-fit: cover; }
.path figcaption { margin-top: var(--space-xs); }
.path h3 { margin-top: var(--space-lg); font-size: var(--text-xl); }
.path h3 a { text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.path h3 a:hover { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 2px; }
.path > p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.path__links { margin-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.path__links a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--color-rule); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.path__links a:hover { color: var(--color-accent); }
.path__price { margin-top: auto; padding-top: var(--space-md); font-weight: var(--weight-strong); font-size: var(--text-lg); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
@media (min-width: 60rem) {
  .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); row-gap: 0; }
  .path { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
  .path__price { margin-top: 0; }
}

/* ---------- Rundgänge ---------- */
.tours { border-top: 1px solid var(--color-rule-strong); }
.tour {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-2xs) var(--space-md);
  align-items: center; padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule);
}
.tour__img { grid-row: 1 / span 4; align-self: start; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.tour__img img { width: 100%; height: 100%; object-fit: cover; }
.tour__name { font-size: var(--text-lg); max-width: none; }
.tour__place, .tour__kind { font-size: var(--text-sm); color: var(--color-muted); }
.tour__go { justify-self: start; margin-top: var(--space-xs); }
@media (min-width: 60rem) {
  .tour { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-sm); }
  .tour__img { grid-row: auto; grid-column: 1 / 3; }
  .tour__name { grid-column: 3 / 7; font-size: var(--text-title); }
  .tour__place { grid-column: 7 / 9; font-size: var(--text-md); color: var(--color-ink-2); }
  .tour__kind { grid-column: 9 / 11; font-size: var(--text-md); color: var(--color-ink-2); }
  .tour__go { grid-column: 11 / 13; justify-self: end; margin: 0; }
}

/* ---------- Preise ---------- */
.price { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.price > * { min-width: 0; }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.ptable { width: 100%; min-width: 34rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ptable th, .ptable td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--color-rule); }
.ptable thead th { padding-bottom: var(--space-md); font-size: var(--text-title); font-weight: var(--display-weight); letter-spacing: -0.02em; border-bottom-color: var(--color-rule-strong); white-space: nowrap; }
.ptable tbody th { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.ptable tbody td { color: var(--color-ink); }
.ptable__price th, .ptable__price td { padding-block: var(--space-md); }
.ptable__price td { font-size: var(--text-2xl); font-weight: var(--display-weight); letter-spacing: -0.03em; white-space: nowrap; }
.ptable tfoot th, .ptable tfoot td { border-bottom: 0; padding-top: var(--space-md); font-weight: var(--weight-strong); }
.ptable th:first-child { position: sticky; left: 0; z-index: var(--z-base); background: var(--color-paper-2); padding-right: var(--space-lg); }
.notes { margin-top: var(--space-lg); display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 68ch; }
.plan { aspect-ratio: 6 / 5; display: grid; place-items: center; padding: var(--space-lg); background: var(--color-paper-3); border-radius: var(--radius-card); }
.plan img { max-height: 100%; width: auto; }
.price__plan figcaption { margin-top: var(--space-sm); }
@media (min-width: 64rem) {
  .price { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .price__table { grid-column: 1 / 9; }
  .price__plan { grid-column: 9 / 13; }
  .ptable { min-width: 0; }
}

/* ---------- Luftbilder ---------- */
.rail {
  display: flex; gap: var(--gap-columns); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: none; scroll-snap-align: start; height: clamp(240px, 38vw, 520px); }
.rail figure { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-xs); }
.rail img { height: 100%; width: auto; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-2); }
.rail .rail__tall img { aspect-ratio: 9 / 16; }
.offers { margin-top: var(--space-2xl); border-bottom: 1px solid var(--color-rule); }
.offer { display: grid; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.offer:first-child { border-top-color: var(--color-rule-strong); }
.offer h3 { font-size: var(--text-lg); }
.offer > p:not(.offer__price) { grid-column: 1 / -1; color: var(--color-ink-2); max-width: 52ch; }
.offer__price { grid-row: 1; grid-column: 2; font-weight: var(--weight-strong); font-size: var(--text-lg); white-space: nowrap; }
.offer__go { grid-column: 1 / -1; justify-self: start; min-height: 32px; display: inline-flex; align-items: center; font-weight: var(--weight-strong); }
@media (min-width: 60rem) {
  .offer { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-lg); }
  .offer__name { grid-column: 1 / 4; }
  .offer > p:not(.offer__price) { grid-column: 4 / 9; grid-row: 1; }
  .offer__price { grid-column: 9 / 11; font-size: var(--text-xl); }
  .offer__go { grid-column: 11 / 13; grid-row: 1; justify-self: end; }
}

/* ---------- Fragen ---------- */
.faq-wrap { display: grid; gap: var(--space-xl); }
.faq-wrap__head .byline { margin-top: var(--space-md); }
.faq { border-top: 1px solid var(--color-rule-strong); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: var(--space-lg); align-items: center;
  min-height: 64px; padding-block: var(--space-md);
  font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.015em; font-weight: var(--weight-strong);
  transition: color var(--dur-micro) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq__x { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-field); }
.faq__x::before, .faq__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--dur-short) var(--ease-out); }
.faq__x::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq__x::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 var(--space-2xl) var(--space-lg) 0; color: var(--color-ink-2); }
.faq details:not([open]) .faq__a { display: none; }
.faq__a .lnk, .ptable .lnk { white-space: nowrap; }
@media (min-width: 60rem) {
  .faq-wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .faq-wrap__head { grid-column: 1 / 5; }
  .faq { grid-column: 5 / 13; }
}

/* ---------- Stimmen ---------- */
.rating { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.rating .lnk { min-height: 32px; display: inline-flex; align-items: center; }
.statement blockquote p { font-size: clamp(1.75rem, 3.4vw + 0.5rem, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: var(--display-weight); text-wrap: balance; }
.statement figcaption { margin-top: var(--space-lg); font-size: var(--text-md); }
@media (min-width: 60rem) { .statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); } .statement > * { grid-column: 1 / 10; } }
.voices { display: grid; gap: var(--space-2xl) var(--gap-columns); margin-top: var(--space-3xl); }
.voice blockquote p { font-size: var(--text-xl); line-height: 1.3; letter-spacing: -0.015em; }
/* Das öffnende Anführungszeichen hängt nur dort in den Rand, wo der Rand 64px breit ist */
@media (min-width: 60rem) { .statement blockquote p, .voice blockquote p, .vw__quote p { text-indent: -0.4em; } }
.voice figcaption { margin-top: var(--space-md); }
.logos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); align-items: center; }
.logos li { display: grid; place-items: center start; height: 48px; }
.logos img { max-height: 36px; width: auto; max-width: 100%; filter: grayscale(1); opacity: 0.78; mix-blend-mode: multiply; }
.logos figcaption { margin-top: var(--space-lg); }
.wm { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .voices { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .voice { grid-column: 1 / 6; }
  .logos { grid-column: 7 / 13; }
}

/* ---------- Anfrage ---------- */
.ask { display: grid; gap: var(--space-xl); }
.me { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.me__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.me__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.me figcaption { font-size: var(--text-md); color: var(--color-ink-2); max-width: 32ch; }
.ask__next h3 { font-size: var(--text-lg); }
.steps { counter-reset: step; margin-top: var(--space-md); border-top: 1px solid var(--color-rule-strong); }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--space-xl) minmax(0, 1fr); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); }
.steps li::before { content: counter(step); font-weight: var(--weight-strong); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.direct { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 40ch; }
@media (min-width: 64rem) {
  .ask { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
  .ask__me { grid-column: 1 / 5; grid-row: 1; }
  .ask__next { grid-column: 1 / 5; grid-row: 2; }
  .ask__form { grid-column: 6 / 13; grid-row: 1 / span 2; }
  .me { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .me__img { max-width: 320px; }
}

.cfg { background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
@media (min-width: 40rem) { .cfg { padding: var(--space-xl); } }
.cfg__head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.prog { position: relative; width: 56px; height: 56px; }
.prog svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.prog__bg { fill: none; stroke: var(--color-rule); stroke-width: 2; }
.prog__fg { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 150.8; stroke-dashoffset: 113.1; transition: stroke-dashoffset var(--dur-long) var(--ease-out); }
.prog__t { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.cfg__title { font-size: var(--text-title); }
.cfg__count { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }
.cfg__title:focus { outline: none; }
.cfg .nojs, .nojs p { margin-top: var(--space-sm); }
/* Fieldsets bleiben Block-Elemente; Legenden gefloatet, damit Abstände überall greifen */
.cfg__step { display: block; padding-top: var(--space-lg); }
.cfg__step > * + * { margin-top: var(--space-lg); }
.cfg__step > legend + * { margin-top: 0; clear: both; }
.cfg.is-ready .cfg__step:not(.is-on) { display: none; }
.no-js-legend { float: left; width: 100%; margin-bottom: var(--space-md); font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.015em; }
.cfg.is-ready .no-js-legend { position: absolute !important; float: none; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grp > legend { float: left; width: 100%; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.grp > legend + * { clear: both; }
.fld { display: grid; gap: var(--space-xs); }
.fld > label { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.opt { font-weight: 400; color: var(--color-muted); margin-left: var(--space-2xs); }
.inp {
  width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-3); color: var(--color-ink);
  border: 1px solid var(--color-field); border-radius: var(--radius-control);
  font-size: var(--text-md); line-height: 1.3;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}
textarea.inp { min-height: 104px; resize: vertical; }
.inp::placeholder { color: var(--color-muted); opacity: 1; }
.inp:hover { border-color: var(--color-ink-2); }
.inp:focus { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.inp:disabled { opacity: 0.55; cursor: not-allowed; }
.inp[aria-invalid="true"] { border-color: var(--color-error); }
.fld__err { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }
.fld__hint { font-size: var(--text-sm); color: var(--color-muted); }
.row2 { display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) { .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tiles { display: grid; gap: var(--space-xs); }
@media (min-width: 30rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { position: relative; display: block; }
.tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tile span {
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: 52px; height: 100%; padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-3); border: 1px solid var(--color-field); border-radius: var(--radius-control);
  font-weight: var(--weight-strong); line-height: 1.25;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.tile span::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--color-field); background: var(--color-paper-3);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.tile:hover span { border-color: var(--color-ink-2); }
.tile input:checked + span { border-color: var(--color-accent); background: var(--color-accent-soft); }
.tile input:checked + span::before { border-color: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-paper-3), inset 0 0 0 10px var(--color-accent); }
.tile input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile input:active + span { transform: translateY(1px); }
.tile input:disabled + span { opacity: 0.55; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* Auf dem Telefon wird die Mehrfachauswahl eine ruhige Liste statt eines Flatterrands */
@media (max-width: 30rem) { .chips--multi { display: grid; grid-template-columns: minmax(0, 1fr); } }
.chips .tile span { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); }
.chips .tile span::before { display: none; }
.chips .tile input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper-3); }
.chips--multi .tile span::before {
  display: block; width: 14px; height: 14px; border: 0; border-radius: 0; box-shadow: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2.5v9M2.5 7h9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2.5v9M2.5 7h9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.chips--multi .tile input:checked + span::before {
  box-shadow: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.8 7.3l2.7 2.7 5.7-6.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.8 7.3l2.7 2.7 5.7-6.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cfg__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.cfg__sum b { font-weight: var(--weight-strong); color: var(--color-ink); }
.cfg__sum b + b::before { content: ", "; font-weight: 400; color: var(--color-ink-2); }
.cfg__sum button { margin-left: auto; min-height: 32px; font-weight: var(--weight-strong); text-decoration: underline; text-underline-offset: 0.16em; }
.cfg__nav { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.cfg__nav .btn { margin-left: auto; }
.cfg__back { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding-right: var(--space-xs); font-weight: var(--weight-strong); color: var(--color-ink-2); }
.cfg__back svg { width: 18px; height: 18px; }
.cfg__back:hover { color: var(--color-ink); }
.cfg__legal { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.cfg__alert { margin-top: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-control); background: var(--color-error-soft); color: var(--color-error-ink); }
.cfg__alert b { display: block; font-weight: var(--weight-strong); }
.cfg__alert a { color: inherit; font-weight: var(--weight-strong); text-decoration: underline; }
.cfg__alert:focus { outline: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.nojs { display: none; }
html:not(.js) .nojs { display: block; }
html:not(.js) [data-cfg] { display: none; }
@media (max-width: 26rem) { .cfg__nav .btn { flex: 1; } }

/* ---------- Leistungsseiten: Kopf ---------- */
.ph { padding-block: var(--space-lg) var(--section-gap-s); }
.ph__grid { display: grid; gap: var(--space-xl) var(--gap-columns); align-items: end; }
.ph h1 { max-width: 12ch; font-size: clamp(2.5rem, 5.2vw + 1rem, 5.5rem); line-height: 0.98; letter-spacing: -0.04em; }
.ph h1 span { display: block; }
.ph .lead { margin-top: var(--space-lg); max-width: 36ch; color: var(--color-ink); }
.ph__fig .view__img { aspect-ratio: 4 / 3; }
.ph__fig figcaption { margin-top: var(--space-xs); }
@media (min-width: 64rem) {
  .ph__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ph__text { grid-column: 1 / 7; }
  .ph__fig { grid-column: 7 / 13; }
}

/* ---------- Rechenbeispiel und Checkliste ---------- */
.calcwrap { display: grid; gap: var(--space-xl) var(--gap-columns); align-items: start; }
.calc, .magnet { background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
@media (min-width: 40rem) { .calc, .magnet { padding: var(--space-xl); } }
.calc label { display: block; font-weight: var(--weight-strong); }
.calc__val { display: block; margin-top: var(--space-2xs); font-size: var(--text-2xl); font-weight: var(--display-weight); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc input[type="range"] { --fill: 16%; width: 100%; height: 44px; margin-top: var(--space-xs); background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--color-accent) var(--fill), var(--color-rule) var(--fill)); }
.calc input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--color-accent) var(--fill), var(--color-rule) var(--fill)); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--color-paper-3); border: 2px solid var(--color-accent); }
.calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--color-paper-3); border: 2px solid var(--color-accent); }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.calc__ends { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-muted); }
.calc__rows { margin-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.calc__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.calc__rows dt { color: var(--color-ink-2); }
.calc__rows dd { font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__rows .calc__save dd { font-size: var(--text-xl); color: var(--color-accent); }
.calc__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.magnet h3 { font-size: var(--text-title); }
.magnet > p, .magnet__ok p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.magnet form { margin-top: var(--space-lg); }
.magnet__row { display: grid; gap: var(--space-sm); }
@media (min-width: 30rem) { .magnet__row { grid-template-columns: minmax(0, 1fr) auto; } }
.magnet__fine { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.magnet__err { margin-top: var(--space-sm); color: var(--color-error); }
.magnet__ok:focus { outline: none; }
.magnet__files { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.magnet form > .fld + .fld { margin-top: var(--space-md); }
.magnet form > .btn { margin-top: var(--space-lg); }
/* Freiwilliges Häkchen zur Nachfass-Mail (Double-Opt-in), nicht vorausgewählt */
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; margin-top: var(--space-md); }
.consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.consent input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.consent p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.consent label { cursor: pointer; }
@media (min-width: 64rem) {
  .calcwrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .calc { grid-column: 1 / 7; }
  .magnet { grid-column: 7 / 13; }
}

/* Art statt Preis in einer Angebotszeile (Rundgang-Beispiele) */
.offer .offer__kind { font-size: var(--text-md); font-weight: 400; color: var(--color-ink-2); white-space: normal; }

/* Einzelnes Kästchen unter einer Auswahl (z. B. Zusatzleistung) */
.tile--wide { margin-top: var(--space-md); }
.tile--wide span::before { border-radius: 4px; }

/* ---------- Gegenüberstellung, Merkmale, Galerie ---------- */
.duo { display: grid; gap: var(--space-2xl) var(--gap-columns); }
.duo h3 { font-size: var(--text-lg); }
.duo__list { margin-top: var(--space-md); border-top: 1px solid var(--color-rule-strong); }
.duo__list li { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.duo__list strong { display: block; font-weight: var(--weight-strong); }
.duo__list span { display: block; margin-top: var(--space-3xs); color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .duo > :first-child { grid-column: 1 / 6; }
  .duo > :last-child { grid-column: 7 / 13; }
}
.gallery { display: grid; gap: var(--space-lg) var(--gap-columns); margin-top: var(--space-2xl); }
.gallery figure img { width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-paper-2); }
.gallery figcaption { margin-top: var(--space-xs); }
.gallery__plan img { background: var(--color-paper-3); border: 1px solid var(--color-rule); }
@media (min-width: 45rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gallery > figure { grid-column: span 2; }
  .gallery > .gallery__plan { grid-column: span 3; }
}
.gallery__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 70ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.feat { display: grid; gap: 0 var(--gap-columns); margin-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.feat li { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.feat strong { display: block; }
.feat span { color: var(--color-ink-2); }
@media (min-width: 45rem) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .feat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Danke ---------- */
.thanks { padding-block: var(--space-2xl) var(--section-gap); }
.thanks__grid { display: grid; gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.thanks h1 { max-width: 13ch; font-size: clamp(2.5rem, 4.6vw + 1rem, 5rem); line-height: 1; letter-spacing: -0.04em; }
.thanks .lead { margin-top: var(--space-lg); max-width: 34ch; color: var(--color-ink); }
.thanks__h { margin-top: var(--space-2xl); font-size: var(--text-lg); }
.thanks .steps { max-width: 34rem; }
.thanks__ask { margin-top: var(--space-xl); color: var(--color-ink-2); }
.thanks__go { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.thanks__more { margin-top: var(--space-xl); max-width: 44ch; color: var(--color-ink-2); }
/* Kopf ohne Navigation: die Kontakte stehen trotzdem rechts */
.hd__in > .logo + .hd__act { margin-left: auto; }
@media (max-width: 30rem) { .thanks__go .btn { flex: 1 1 100%; } }
@media (min-width: 60rem) {
  .thanks { padding-top: var(--space-3xl); }
  .thanks__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .thanks__text { grid-column: 1 / 8; }
  .thanks__me { grid-column: 9 / 13; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .thanks__me .me__img { max-width: 360px; }
}

/* ---------- Fuß ---------- */
.ft { border-top: 1px solid var(--color-rule-strong); padding-block: var(--space-3xl) calc(var(--space-xl) + env(safe-area-inset-bottom)); font-size: var(--text-sm); }
.ft__grid { display: grid; gap: var(--space-xl) var(--gap-columns); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft__about { grid-column: 1 / -1; display: grid; gap: var(--space-sm); color: var(--color-ink-2); }
.ft__about .logo { margin: 0 0 var(--space-xs); justify-self: start; }
.ft__h { margin-bottom: var(--space-xs); color: var(--color-muted); }
.ft a { text-decoration: none; }
.ft a:hover { color: var(--color-accent); text-decoration: underline; }
.ft__col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-ink); }
.ft__about p a { text-decoration: underline; text-decoration-color: var(--color-rule-strong); }
.ft__legal { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-muted); }
@media (min-width: 60rem) {
  .ft__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ft__about { grid-column: 1 / 5; align-content: start; }
  .ft__grid > .ft__col:nth-of-type(1) { grid-column: 6 / 9; }
  .ft__grid > .ft__col:nth-of-type(2) { grid-column: 9 / 11; }
  .ft__grid > .ft__col:nth-of-type(3) { grid-column: 11 / 13; }
}

/* ---------- Rundgang in groß ---------- */
.vw {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--color-dark); color: var(--color-dark-ink);
}
.vw::backdrop { background: var(--color-scrim); }
.vw[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.vw__bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--gutter); padding-top: max(var(--space-sm), env(safe-area-inset-top)); border-bottom: 1px solid var(--color-dark-rule); }
.vw__id { margin-right: auto; min-width: 0; }
.vw__t { font-size: var(--text-lg); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.vw__m { font-size: var(--text-sm); color: var(--color-dark-muted); }
.vw__tools { display: flex; align-items: center; gap: var(--space-xs); }
.vw__open { display: none; min-height: 44px; align-items: center; padding: 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-dark-ink); }
.vw__open:hover { text-decoration: underline; }
.vw__close { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-dark-rule); color: var(--color-dark-ink); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.vw__close svg { width: 20px; height: 20px; }
.vw__close:hover { background: var(--color-dark-ink); color: var(--color-dark); }
.vw :focus-visible { outline-color: var(--color-focus-dark); }
.vw__stage { position: relative; background: var(--color-dark-2); }
.vw__stage img, .vw__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vw__stage iframe { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.vw__stage.is-live iframe { opacity: 1; }
.vw__load { position: absolute; left: 50%; top: 50%; z-index: var(--z-raised); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-scrim); color: var(--color-dark-ink); font-size: var(--text-sm); white-space: nowrap; }
.vw__stage.is-live .vw__load { display: none; }
.vw__quote { padding: var(--space-md) var(--gutter) max(var(--space-md), env(safe-area-inset-bottom)); border-top: 1px solid var(--color-dark-rule); display: grid; gap: var(--space-2xs); }
.vw__quote p { max-width: 75ch; color: var(--color-dark-ink); }
.vw__quote figcaption { color: var(--color-dark-muted); }
@media (min-width: 40rem) { .vw__open { display: inline-flex; } }

/* ---------- Bewegung: ein Setzen im Hero, ein Einblenden darunter ---------- */
@media (prefers-reduced-motion: no-preference) {
  .settle { animation: settle 0.6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes settle { from { opacity: 0; transform: translateY(var(--space-xs)); } to { opacity: 1; transform: none; } }

  .js-reveal .rv:not(.in) { opacity: 0; transform: translateY(var(--space-xs)); }
  /* Übergang nur beim Erscheinen: das Verstecken beim Laden passiert ohne Animation */
  .js-reveal .rv.in { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }

  .cfg__step.is-on { animation: step var(--dur-long) var(--ease-out) both; }
  @keyframes step { from { opacity: 0; transform: translateX(var(--space-md)); } to { opacity: 1; transform: none; } }
  .cfg__step.is-on.is-back { animation-name: stepback; }
  @keyframes stepback { from { opacity: 0; transform: translateX(calc(var(--space-md) * -1)); } to { opacity: 1; transform: none; } }

  .faq details[open] .faq__a { animation: fade var(--dur-long) var(--ease-out) both; }
  .vw[open], .vw[open]::backdrop { animation: fade var(--dur-short) var(--ease-out) both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site, .play, .vw { display: none !important; }
}

/* ---------- Hotels, Gastro, Gewerbe ---------- */
@media (min-width: 64rem) { .feat--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feat li > span + span { display: block; margin-top: var(--space-xs); }
.offer__tag { display: block; margin-bottom: var(--space-3xs); font-size: var(--text-sm); font-weight: 400; color: var(--color-accent); }
.duo h2 + .lead { margin-top: var(--space-md); }
.logos--row { margin-top: var(--space-2xl); }
.reel { justify-self: start; width: min(100%, 20rem); }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-2); }
.reel figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .voices--3 .voice { grid-column: span 4; }
  .voices--2 .voice:nth-child(2) { grid-column: 7 / 12; }
  .voices--3 { align-items: start; }
  .logos--row { margin-top: var(--space-3xl); }
  .logos--row ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Drohne: Film, Luftbilder, Über mich, Einsatzgebiet ---------- */
.film { position: relative; margin-top: var(--space-2xl); aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: var(--color-dark-2); }
.film video, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); background: var(--color-scrim); color: var(--color-dark-ink); font-weight: var(--weight-strong); }
.film__start::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.film__start:hover { background: var(--color-dark); }
.film__text { margin-top: var(--space-lg); color: var(--color-ink-2); }
.film__text ul { margin-block: var(--space-xs); padding-left: 1.2em; list-style: disc; }
.film__text a:not(.btn) { color: inherit; }
.shots { display: grid; gap: var(--space-md) var(--gap-columns); margin-top: var(--space-2xl); }
.shots img { width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-paper-2); }
@media (min-width: 45rem) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shot-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); }
.shot-links p { color: var(--color-ink-2); }
.shot-links a { text-decoration: none; font-weight: var(--weight-strong); border-bottom: 1px solid currentColor; }
.about-image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); }
.about__text p + p { margin-top: var(--space-sm); }
.about__text .trust { margin-top: var(--space-lg); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); padding-top: var(--space-md); }
.stats dd { font-size: var(--text-xl); font-weight: var(--weight-strong); }
.stats dt { order: 2; font-size: var(--text-sm); color: var(--color-ink-2); }
.stats div { display: flex; flex-direction: column-reverse; gap: var(--space-3xs); }
.places { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); font-size: var(--text-lg); }
.places li:first-child { font-weight: var(--weight-strong); }
.pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.pics img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-2); }
.pics .pics__big { grid-column: 1 / -1; }
@media (min-width: 60rem) { .pics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); } .pics .pics__big { grid-column: span 2; grid-row: span 2; } }
.offer__note { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); }
.duo--below { margin-top: var(--space-2xl); }
.sub-h { margin-top: var(--space-xl); font-size: var(--text-lg); }
.offer > .offer__list { grid-column: 1 / -1; display: grid; gap: var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.offer__list li { padding-left: 0.9em; position: relative; }
.offer__list li::before { content: "–"; position: absolute; left: 0; }
@media (min-width: 60rem) { .offer > .offer__list { grid-column: 4 / 9; grid-row: 2; } }
.pics { grid-auto-flow: dense; }
@media (min-width: 60rem) { .pics .pics__wide { grid-column: span 2; } .pics .pics__wide { position: relative; } .pics .pics__wide img { position: absolute; inset: 0; aspect-ratio: auto; } }
.film__start { min-height: 56px; padding: var(--space-sm) var(--space-xl); font-size: var(--text-lg); }
.crumbs { margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.crumbs a { color: inherit; }
@media (min-width: 45rem) {
  .shots--pair { grid-template-columns: 5fr 8fr; align-items: start; }
}
.shots__tall img { aspect-ratio: 9 / 16; object-fit: cover; }
.ph--sq .view__img img { object-position: 50% 30%; }

/* ---------- Allgemeine Inhaltsbausteine (umgesetzte Seiten) ---------- */
.sec .container > .more { margin-top: var(--space-lg); max-width: 70ch; }
.sec .container > .sub-h { margin-top: var(--space-3xl); }
.sec .container > .sub-h + .more { margin-top: var(--space-sm); }
.ticks { margin-top: var(--space-md); max-width: 70ch; border-top: 1px solid var(--color-rule-strong); }
.ticks li { position: relative; padding: var(--space-sm) 0 var(--space-sm) 1.4em; border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); }
.ticks li::before { content: "–"; position: absolute; left: 0; color: var(--color-ink); }
.feat .ticks { margin-top: var(--space-xs); border-top: 0; }
.feat .ticks li { padding-block: var(--space-3xs); border-bottom: 0; }
.feat li > span { display: block; }
.feat li > span + span { margin-top: var(--space-xs); }
.feat__price { font-weight: var(--weight-strong); color: var(--color-ink); }
.tbl-wrap { margin-top: var(--space-xl); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th, .tbl td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule); }
.tbl thead th { border-bottom: 1px solid var(--color-rule-strong); font-weight: var(--weight-strong); }
.tbl td { color: var(--color-ink-2); }
.figs { margin-top: var(--space-xl); max-width: 56rem; }
.figs img { width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-paper-2); }
.figs figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.film--plain { aspect-ratio: auto; background: none; }
.film--plain video { position: static; width: 100%; height: auto; border-radius: var(--radius-card); }
.film--narrow { max-width: 60rem; }
.film--narrow + .film__text { max-width: 60rem; }
.quote { margin-top: var(--space-xl); max-width: 60ch; font-size: var(--text-xl); line-height: 1.3; }
.figs img { width: auto; max-width: 100%; max-height: 80svh; }
.shot-links a { display: inline-flex; align-items: center; min-height: 32px; }
.tbl-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.offer__price { white-space: normal; text-wrap: balance; }
@media (min-width: 60rem) { .offer__price { padding-right: var(--space-sm); } }
.sec .container > .stats { max-width: 48rem; }
.places--plain li:first-child { font-weight: inherit; }

/* ---------- Blog ----------
 * Artikel: Kopf mit Kurzantwort und Bild, Inhaltsverzeichnis neben dem Fließtext,
 * Kasten „So hilft Beck360“, Fragen (Bausteine .faq von oben), Autor, weitere Artikel.
 * Übersicht: Filter nach Zielgruppe (assets/js/blog.js) und Karten.
 * Ohne JavaScript bleibt der Filter verborgen und alle Karten sind sichtbar. */
.post__head { padding-block: var(--space-lg) var(--space-2xl); }
.post__grid { display: grid; gap: var(--space-xl) var(--gap-columns); align-items: end; }
.post__kicker { margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-accent); }
.post h1 { max-width: 24ch; font-size: clamp(2rem, 2.2vw + 1.25rem, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; }
.post__meta { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.answer { margin-top: var(--space-xl); max-width: 46rem; padding: var(--space-md) var(--space-lg); background: var(--color-paper-3); border: 1px solid var(--color-rule); border-left: 3px solid var(--color-accent); border-radius: var(--radius-card); }
.answer__h { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink); }
.answer p:not(.answer__h) { margin-top: var(--space-2xs); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink); }
.post__fig img { width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-paper-2); }
.post__fig figcaption { margin-top: var(--space-xs); }
.post__body { display: grid; gap: var(--space-xl) var(--gap-columns); padding-bottom: var(--section-gap-s); }
.toc { align-self: start; border-top: 1px solid var(--color-rule-strong); padding-top: var(--space-sm); }
.toc__h { font-size: var(--text-sm); color: var(--color-muted); }
.toc ol { margin-top: var(--space-xs); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 1.75em minmax(0, 1fr); align-items: center; min-height: 40px; padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.toc a::before { content: counter(toc); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.toc a:hover { color: var(--color-accent); }
.prose { min-width: 0; max-width: 44rem; }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { margin-top: var(--space-2xl); max-width: 28ch; font-size: clamp(1.625rem, 1.1vw + 1.2rem, 2.25rem); line-height: 1.12; letter-spacing: -0.03em; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-xl); font-size: var(--text-lg); }
.prose > ul, .prose > ol { padding-left: 1.3em; max-width: 62ch; }
.prose > ul { list-style: disc; }
.prose > ol { list-style: decimal; }
.prose > ul li + li, .prose > ol li + li { margin-top: var(--space-2xs); }
.prose li::marker { color: var(--color-muted); }
.prose a:not(.btn) { text-decoration: underline; text-decoration-color: var(--color-rule-strong); }
.prose a:not(.btn):hover { color: var(--color-accent); text-decoration-color: currentColor; }
.prose > figure, .prose > .pair, .prose > .embed { margin-top: var(--space-xl); }
.prose figure img { width: auto; max-width: 100%; max-height: 80svh; border-radius: var(--radius-card); background: var(--color-paper-2); }
.prose figcaption { margin-top: var(--space-xs); }
.prose .tbl-wrap { margin-top: var(--space-lg); }
.prose .tbl caption { caption-side: bottom; padding-top: var(--space-sm); text-align: left; font-size: var(--text-sm); color: var(--color-muted); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
.pair img { width: 100%; max-height: none; }
.embed { padding: var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-card); }
.embed__act { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.embed__note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-card); background: var(--color-dark-2); }
.help { margin-top: var(--space-2xl); padding: var(--space-lg); background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.prose .help h2 { margin-top: 0; font-size: var(--text-xl); }
.help > p:not([class]) { margin-top: var(--space-sm); color: var(--color-ink-2); }
.help__price { margin-top: var(--space-md); font-size: var(--text-2xl); font-weight: var(--display-weight); letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.help__price span { display: block; margin-top: var(--space-3xs); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--color-ink-2); }
.help .actions { margin-top: var(--space-lg); }
.help .actions .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--space-xs); }
@media (max-width: 40rem) { .help .actions .btn { flex: 1 1 100%; } }
.help__more { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.prose .faq { margin-top: var(--space-lg); }
.prose .faq__a { padding-right: 0; }
.prose .faq__a p { max-width: 62ch; }
.author { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-md); align-items: start; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.author__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.author__img img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 12%; }
.author__name { font-weight: var(--weight-strong); }
.author p + p { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.author .author__date { font-size: var(--text-sm); color: var(--color-muted); }
.related { margin-top: var(--space-2xl); }
.prose .related h2 { font-size: var(--text-xl); }
.related ul { margin-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.prose .related li a { display: flex; align-items: center; min-height: 48px; padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); text-decoration: none; }
@media (min-width: 64rem) {
  .post__head { padding-top: var(--space-xl); }
  .post__grid, .post__body { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .post__text { grid-column: 1 / 8; }
  .post__fig { grid-column: 8 / 13; }
  .toc { grid-column: 1 / 4; position: sticky; top: calc(var(--header) + var(--space-lg)); }
  .prose { grid-column: 4 / 12; }
}

/* Übersicht */
.blog-top { padding-block: var(--space-lg) var(--space-2xl); }
.blog-top h1 { max-width: 16ch; font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem); line-height: 1; letter-spacing: -0.04em; }
.blog-top .lead { margin-top: var(--space-lg); }
.filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }
.filter__b { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-field); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink); background: transparent; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.filter__b:hover { border-color: var(--color-ink); }
.filter__b[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper-3); }
.filter__status { margin-top: var(--space-sm); min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.cards { display: grid; gap: var(--space-2xl) var(--gap-columns); padding-bottom: var(--section-gap-s); }
.card { position: relative; display: flex; flex-direction: column; }
.card__img { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__for { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-accent); }
.card h2 { margin-top: var(--space-xs); max-width: none; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.02em; }
.card h2 a { text-decoration: none; }
.card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.card:hover h2 a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 2px; }
.card__text { margin-top: var(--space-xs); color: var(--color-ink-2); }
.card .meta { margin-top: auto; padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.card__for .card__date { font-weight: 400; color: var(--color-muted); }
.blog-cta { margin-top: 0; }
.post__head .crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
@media (min-width: 45rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media print { .toc, .filter, .related { display: none !important; } }