/* Kernwerk Digital · Layout: Aufmaß/Bauplan. Helle Steinfläche, anthrazitfarbene Bänder, Maßlinien als wiederkehrendes Detail. */
@font-face { font-family: "Manrope"; src: url("fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --anthrazit: #202020;
  --anthrazit-2: #2a2926;
  --stein: #B9A27C;
  --stein-text: #7a6646;
  --offwhite: #F5F3EF;
  --stein-hell: #ebe6dc;
  --grau: #686763;
  --grau-hell: #a9a6a0;
  --linie: #d9d2c4;
  --weiss: #ffffff;
  --font-head: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  --step-4: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem);
  --radius: 4px;
  --max: 1160px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--offwhite); color: var(--anthrazit); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--anthrazit); }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--stein); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--anthrazit); color: var(--weiss); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow { font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stein-text); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 28px; height: 9px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.sub { color: var(--grau); font-size: 1.08rem; max-width: 60ch; margin-top: 16px; }
.small { font-size: 0.88rem; color: var(--grau); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; text-decoration: none; padding: 14px 22px; border-radius: var(--radius); border: 2px solid var(--anthrazit); background: var(--anthrazit); color: var(--offwhite); cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; }
.btn:hover { transform: translateY(-2px); background: #000; }
.btn-small { padding: 9px 16px; font-size: 0.9rem; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--anthrazit); }
.btn-ghost:hover { background: var(--anthrazit); color: var(--offwhite); }
.dark .btn, .site-header .btn { background: var(--stein); border-color: var(--stein); color: var(--anthrazit); }
.dark .btn:hover, .site-header .btn:hover { background: #cbb690; }
.btn-ghost-dark { background: transparent; color: var(--anthrazit); border-color: var(--linie); }
.btn-ghost-dark:hover { background: var(--stein-hell); }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--anthrazit); color: var(--offwhite); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--offwhite); }
.logo-mark { width: 34px; height: 34px; color: #000; flex: none; }
.logo-mark rect:first-child { fill: #2f2e2b; }
.logo-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-head); }
.logo-text b { font-weight: 800; letter-spacing: 0.12em; font-size: 1.05rem; }
.logo-text small { font-weight: 600; letter-spacing: 0.42em; font-size: 0.62rem; color: var(--stein); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a:not(.btn) { color: #d8d4cc; text-decoration: none; font-size: 0.93rem; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--weiss); }
.nav-toggle { display: none; background: transparent; color: var(--offwhite); border: 1.5px solid #555; border-radius: var(--radius); padding: 8px 14px; font: 600 0.9rem var(--font-head); cursor: pointer; }

/* Hero */
.hero { padding-block: clamp(48px, 7vw, 96px) 0; background:
  linear-gradient(var(--offwhite), transparent 85%),
  repeating-linear-gradient(90deg, transparent 0 47px, #e7e1d6 47px 48px),
  repeating-linear-gradient(0deg, transparent 0 47px, #e7e1d6 47px 48px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.035em; }
.hero h1 span { color: var(--stein-text); }
.lead { font-size: 1.15rem; color: #4a4946; max-width: 52ch; margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 16px; font-size: 0.9rem; color: var(--grau); display: flex; gap: 8px; align-items: center; }
.hero-note::before { content: ""; width: 8px; height: 8px; background: var(--stein); flex: none; }

.hero-visual { min-width: 0; }
.blueprint { position: relative; padding: 34px 40px 46px 10px; }
.bp-browser { background: var(--weiss); border: 1.5px solid var(--anthrazit); border-radius: 6px; box-shadow: 14px 14px 0 var(--stein-hell); overflow: hidden; animation: rise .8s ease both; }
.bp-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1.5px solid var(--anthrazit); background: var(--offwhite); }
.bp-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--anthrazit); }
.bp-bar span { margin-left: 10px; font-size: 0.72rem; color: var(--grau); background: var(--weiss); border: 1px solid var(--linie); padding: 2px 10px; border-radius: 3px; }
.bp-page { padding: 0 0 18px; }
.bp-nav { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.bp-nav b { width: 54px; height: 10px; background: var(--anthrazit); }
.bp-nav span { width: 34px; height: 6px; background: var(--linie); }
.bp-nav em { margin-left: auto; font-style: normal; font-size: 0.66rem; font-weight: 700; background: var(--stein); padding: 4px 9px; border-radius: 3px; }
.bp-hero { background: var(--anthrazit); color: var(--offwhite); padding: 26px 18px; display: grid; gap: 9px; }
.bp-hero strong { font-family: var(--font-head); font-size: clamp(1rem, 0.7rem + 1vw, 1.45rem); line-height: 1.15; max-width: 14ch; }
.bp-line { display: block; height: 6px; width: 78%; background: #4a4844; }
.bp-line.short { width: 52%; }
.bp-btns { display: flex; gap: 8px; margin-top: 6px; }
.bp-btns em { font-style: normal; font-size: 0.66rem; font-weight: 700; background: var(--stein); color: var(--anthrazit); padding: 5px 10px; border-radius: 3px; }
.bp-btns em.o { background: transparent; border: 1px solid #666; color: var(--offwhite); }
.bp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 16px 0; }
.bp-tiles span { height: 46px; border: 1.5px solid var(--linie); border-top: 4px solid var(--stein); }
.bp-phone { position: absolute; right: 4px; bottom: 6px; width: 30%; min-width: 110px; aspect-ratio: 9 / 18; background: var(--weiss); border: 1.5px solid var(--anthrazit); border-radius: 16px; padding: 12px 8px; display: grid; align-content: start; gap: 8px; box-shadow: -10px 10px 0 rgba(32,32,32,.08); animation: rise .8s .2s ease both; }
.bp-notch { width: 34%; height: 5px; margin: 0 auto 4px; background: var(--anthrazit); border-radius: 3px; }
.bp-ph-hero { background: var(--anthrazit); color: var(--offwhite); padding: 12px 8px; border-radius: 4px; display: grid; gap: 6px; }
.bp-ph-hero strong { font-family: var(--font-head); font-size: 0.72rem; }
.bp-ph-hero .bp-line { width: 90%; height: 4px; }
.bp-ph-call { background: var(--stein); font: 700 0.62rem var(--font-head); text-align: center; padding: 7px 4px; border-radius: 4px; }
.bp-ph-tile { height: 26px; border: 1.5px solid var(--linie); border-left: 3px solid var(--stein); }

.dim { position: absolute; font: 600 0.68rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stein-text); animation: fade .6s .7s ease both; }
.dim span { background: var(--offwhite); padding: 0 6px; white-space: nowrap; }
.dim::before { content: ""; position: absolute; border-color: var(--stein); border-style: solid; }
.dim-a { left: 10px; right: 40px; top: 6px; text-align: center; }
.dim-a::before { left: 0; right: 0; top: 8px; height: 9px; border-width: 0 1.5px; background: linear-gradient(var(--stein), var(--stein)) center / 100% 1.5px no-repeat; z-index: -1; }
.dim-a span { position: relative; }
.dim-b { right: -6px; bottom: 6px; writing-mode: vertical-rl; transform: rotate(180deg); height: 58%; display: flex; align-items: center; justify-content: center; }
.dim-b::before { top: 0; bottom: 0; left: 50%; width: 9px; transform: translateX(-50%); border-width: 1.5px 0; background: linear-gradient(var(--stein), var(--stein)) center / 1.5px 100% no-repeat; z-index: -1; }
.dim-b span { position: relative; }
.dim-c { left: -4px; top: 46%; }
.dim-c span { display: none; }
.dim-c::before { display: none; }

.ruler { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--anthrazit); position: relative; }
.ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--anthrazit) 0 1.5px, transparent 1.5px 12px); }
.ruler li { padding: 24px 12px 30px 0; display: grid; gap: 2px; border-right: 1px solid var(--linie); padding-left: 16px; }
.ruler li:first-child { padding-left: 0; }
.ruler li:last-child { border-right: 0; }
.ruler b { font-family: var(--font-head); font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ruler span { font-size: 0.86rem; color: var(--grau); }

/* Sections */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.split > * { min-width: 0; }
.dark { background: var(--anthrazit); color: var(--offwhite); }
.dark .eyebrow { color: var(--stein); }
.dark .sub, .dark .small { color: var(--grau-hell); }
.tinted { background: var(--stein-hell); }

.problem { border-top: 1px solid var(--linie); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.checklist li { padding: 20px 0 20px 44px; border-bottom: 1px solid var(--linie); position: relative; color: #4a4946; }
.checklist li:first-child { border-top: 1px solid var(--linie); }
.checklist li::before { content: "✕"; position: absolute; left: 0; top: 19px; width: 26px; height: 26px; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: var(--offwhite); background: var(--anthrazit); border-radius: 50%; }
.checklist b { color: var(--anthrazit); display: block; font-family: var(--font-head); font-size: 1.05rem; }

/* Vorher / Nachher */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tabs button { font: 700 0.95rem var(--font-head); padding: 11px 18px; border-radius: var(--radius); border: 1.5px solid #4a4844; background: transparent; color: #d8d4cc; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--offwhite); color: var(--anthrazit); border-color: var(--offwhite); }
.tabs button:hover:not([aria-selected="true"]) { border-color: var(--stein); color: var(--weiss); }

.ba-stage { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 6px; overflow: hidden; border: 1.5px solid #4a4844; container-type: inline-size; user-select: none; background: var(--weiss); touch-action: pan-y; }
.mock { position: absolute; inset: 0; }
.mock.before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ex { position: absolute; inset: 0; display: none; }
.ba[data-ex="dach"] .ex-dach, .ba[data-ex="holz"] .ex-holz, .ba[data-ex="elektro"] .ex-elektro { display: block; }
.ex-notes { display: none; }
.ba[data-ex="dach"] .ex-notes[data-ex="dach"], .ba[data-ex="holz"] .ex-notes[data-ex="holz"], .ba[data-ex="elektro"] .ex-notes[data-ex="elektro"] { display: grid; }

.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--stein); pointer-events: none; z-index: 3; }
.ba-handle span { position: absolute; top: 50%; font-family: system-ui, sans-serif; left: 50%; transform: translate(-50%, -50%); background: var(--stein); color: var(--anthrazit); font-size: 0.7rem; letter-spacing: 2px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.35); border: 3px solid var(--anthrazit); }
.ba-label { position: absolute; bottom: 12px; z-index: 4; font: 700 0.72rem var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; pointer-events: none; }
.ba-label.l { left: 12px; background: #fff; color: #202020; border: 1px solid #999; }
.ba-label.r { right: 12px; background: var(--stein); color: var(--anthrazit); }
.ba-fict { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; font: 600 0.7rem var(--font-body); background: rgba(32,32,32,.85); color: var(--offwhite); padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 5; margin: 0; -webkit-appearance: none; appearance: none; }
.ba-range:focus-visible + * { outline: none; }
.ba-stage:has(.ba-range:focus-visible) { outline: 3px solid var(--stein); outline-offset: 3px; }

.ba-notes { margin-top: 22px; }
.ex-notes { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ex-notes li { color: var(--grau-hell); font-size: 0.95rem; padding-top: 14px; border-top: 2px solid var(--stein); }
.ex-notes b { color: var(--offwhite); }
.disclaimer { margin-top: 30px; font-size: 0.8rem; color: #8f8c86; }

/* Mock-Inhalte: alles in cqw, damit die Mockups mitskalieren */
.mock .ex { font-size: 1.6cqw; line-height: 1.4; overflow: hidden; }
/* alte Seiten */
.old-dach { background: #c0c0c0; font-family: "Times New Roman", Times, serif; color: #000; padding: 1.5cqw; }
.o-title { text-align: center; font-size: 3.4cqw; font-weight: bold; color: #000080; font-family: "Comic Sans MS", "Comic Sans", cursive; }
.o-marquee { background: #ffff00; color: #c00000; margin: 1cqw 0; overflow: hidden; white-space: nowrap; font-weight: bold; font-size: 1.7cqw; padding: .3cqw 0; }
.o-marquee span { display: inline-block; padding-left: 100%; animation: marquee 14s linear infinite; }
.o-table { width: 100%; border: 3px outset #fff; background: #fff; border-collapse: separate; border-spacing: 2px; font-size: 1.55cqw; }
.o-table td { border: 1px inset #999; padding: 1cqw; vertical-align: top; }
.o-side { width: 18%; background: #e0e0ff; color: #0000ee; line-height: 1.9; }
.o-thumbs { display: flex; gap: .8cqw; margin-top: 1.4cqw; }
.o-thumbs i { width: 7cqw; height: 5cqw; background: linear-gradient(135deg, #8a5a3c, #b98a6a); border: 2px solid #000; }
.o-foot { margin-top: 1.2cqw; text-align: center; font-size: 1.3cqw; color: #333; }

.old-holz { background: #fff; font-family: Arial, Helvetica, sans-serif; color: #000; }
.o-frame { display: grid; grid-template-columns: 20% 1fr; height: 100%; }
.o-left { background: #2e5e2e; color: #fff; padding: 1.4cqw; display: flex; flex-direction: column; gap: .6cqw; font-size: 1.6cqw; border-right: 4px ridge #9c9; }
.o-left u { color: #ffff99; }
.o-main { padding: 2cqw; font-size: 1.6cqw; background: #fffbe6; }
.o-main h4 { font: bold 3cqw Georgia, serif; color: #2e5e2e; text-decoration: underline; margin-bottom: 1.4cqw; letter-spacing: 0; }
.o-main p { margin-bottom: 1.2cqw; text-align: justify; }
.o-small { font-size: 1.3cqw; color: #777; font-style: italic; }

.old-elektro { background: #000; color: #ffff00; font-family: "Courier New", monospace; text-align: center; padding: 3cqw 4cqw; }
.o-blink { font-size: 5cqw; font-weight: bold; color: #ff0; text-shadow: 3px 3px 0 #f00; animation: blink 1.2s steps(2, start) infinite; }
.o-construction { margin: 2cqw auto; display: inline-block; background: repeating-linear-gradient(45deg, #ff0 0 2cqw, #000 2cqw 4cqw); color: #fff; font-weight: bold; font-size: 2.6cqw; padding: 1cqw 3cqw; text-shadow: 2px 2px 0 #000; }
.old-elektro p { font-size: 2cqw; margin-top: 1.5cqw; }
.o-link { color: #0ff; }

/* neue Seiten */
.ex .m-nav { display: flex; align-items: center; gap: 2.4cqw; padding: 1.8cqw 3cqw; font-family: var(--font-body); font-size: 1.35cqw; }
.ex .m-nav b { font-family: var(--font-head); font-size: 1.8cqw; margin-right: auto; letter-spacing: -0.01em; }
.ex .m-nav em { font-style: normal; font-weight: 700; padding: .7cqw 1.4cqw; border-radius: .5cqw; }
.ex .m-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3cqw; align-items: center; padding: 3cqw; }
.ex .m-hero small { font-size: 1.2cqw; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.ex .m-hero h3 { font-family: var(--font-head); font-size: 4.4cqw; line-height: 1.05; letter-spacing: -0.03em; margin: 1cqw 0 1.2cqw; font-weight: 800; }
.ex .m-hero p { font-size: 1.5cqw; max-width: 42ch; }
.ex .m-btns { display: flex; gap: 1.2cqw; margin-top: 2cqw; }
.ex .m-btns em { font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 1.35cqw; padding: 1cqw 1.8cqw; border-radius: .5cqw; }
.ex .m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; padding: 0 3cqw; }
.ex .m-tiles span { padding: 1.6cqw; font-size: 1.25cqw; border-radius: .5cqw; display: grid; gap: .3cqw; }
.ex .m-tiles b { font-family: var(--font-head); font-size: 1.7cqw; }

.new-dach { background: #1d1f22; color: #f2efe9; }
.new-dach .m-nav { border-bottom: 1px solid #ffffff1a; color: #c9c5bd; }
.new-dach .m-nav b { color: #fff; }
.new-dach .m-nav em { background: #B9A27C; color: #1d1f22; }
.new-dach .m-hero small { color: #B9A27C; }
.new-dach .m-hero p { color: #bdb9b1; }
.new-dach .m-btns em { background: #B9A27C; color: #1d1f22; }
.new-dach .m-btns em.o { background: transparent; border: 1px solid #ffffff44; color: #fff; }
.new-dach .m-tiles span { background: #26292d; border-top: .4cqw solid #B9A27C; color: #a9a59d; }
.new-dach .m-tiles b { color: #fff; }

.new-holz { background: #f4efe6; color: #2b2118; }
.new-holz .m-nav b { color: #2b2118; }
.new-holz .m-nav em { background: #2b2118; color: #f4efe6; }
.new-holz .m-hero small { color: #8a5a3c; }
.new-holz .m-btns em { background: #8a5a3c; color: #fff; }
.m-wood { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; height: 22cqw; }
.m-wood span { border-radius: .6cqw; background: repeating-linear-gradient(100deg, #b98a5e 0 .7cqw, #a87a50 .7cqw 1.1cqw, #c49a6c 1.1cqw 2cqw); }
.m-wood span:nth-child(2) { background: repeating-linear-gradient(80deg, #7a5236 0 .6cqw, #6b4630 .6cqw 1.2cqw, #845a3c 1.2cqw 2cqw); }
.m-wood span:nth-child(3) { background: #2b2118; }
.m-wood span:nth-child(4) { background: repeating-linear-gradient(95deg, #d6b48a 0 .8cqw, #c9a57a .8cqw 1.3cqw); }
.new-holz .m-tiles span { background: #fff; border: 1px solid #e3d9c8; color: #6b5a48; }

.new-elektro { background: #fafaf7; color: #202020; }
.new-elektro .m-nav { border-bottom: 1px solid #e6e3dc; color: #555; }
.new-elektro .m-nav em.alert { background: #c0392b; color: #fff; }
.new-elektro .m-hero small { color: #7a6646; }
.new-elektro .m-hero p { color: #555; }
.new-elektro .m-btns em { background: #202020; color: #fff; }
.new-elektro .m-btns em.o { background: #B9A27C; color: #202020; }
.m-bolt { width: 70%; justify-self: center; }
.new-elektro .m-tiles span { background: #fff; border: 1px solid #e6e3dc; border-left: .5cqw solid #B9A27C; color: #666; }

/* Paket */
.price-grid { display: grid; grid-template-columns: 0.85fr 1.15fr 0.9fr; gap: 0; border: 1.5px solid var(--anthrazit); background: var(--weiss); }
.price-grid > * { padding: clamp(24px, 3vw, 40px); min-width: 0; }
.price-card { background: var(--anthrazit); color: var(--offwhite); display: flex; flex-direction: column; gap: 6px; }
.price-name { font: 700 0.8rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--stein); }
.price { display: flex; align-items: flex-start; gap: 4px; font-family: var(--font-head); line-height: 1; margin-top: 10px; }
.price .amount { font-size: clamp(4rem, 3rem + 4vw, 6.2rem); font-weight: 800; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.price .cur { font-size: 2rem; font-weight: 700; margin-top: 10px; color: var(--stein); }
.price-meta { color: var(--grau-hell); margin-bottom: 22px; }
.price-card .btn { margin-top: auto; background: var(--stein); border-color: var(--stein); color: var(--anthrazit); }
.price-foot { font-size: 0.84rem; color: var(--grau-hell); margin-top: 12px; }
.incl { border-right: 1px solid var(--linie); }
.incl h3, .excl h3 { margin-bottom: 18px; }
.ticks, .dashes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { padding-left: 30px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2.5px solid var(--stein-text); border-bottom: 2.5px solid var(--stein-text); transform: rotate(-45deg); }
.dashes li { padding-left: 24px; position: relative; color: var(--grau); }
.dashes li::before { content: "+"; position: absolute; left: 0; font-weight: 700; color: var(--stein-text); }
.excl { background: var(--offwhite); }
.excl .small { margin-top: 18px; }
.footnote { margin-top: 16px; }

/* Ablauf */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.steps li { padding: 0 24px 0 0; position: relative; }
.steps li::before { content: ""; position: absolute; top: 23px; left: 48px; right: 0; height: 1.5px; background: repeating-linear-gradient(90deg, var(--anthrazit) 0 6px, transparent 6px 11px); }
.steps li:last-child::before { display: none; }
.step-n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 800 1.2rem var(--font-head); background: var(--anthrazit); color: var(--offwhite); position: relative; margin-bottom: 22px; }
.steps li:first-child .step-n { background: var(--stein); color: var(--anthrazit); }
.steps h3 { margin-bottom: 10px; }
.steps p { color: #4a4946; font-size: 0.97rem; }

/* Quiz */
.quiz { background: var(--weiss); border: 1.5px solid var(--anthrazit); padding: clamp(24px, 4vw, 44px); box-shadow: 12px 12px 0 var(--stein-hell); }
.quiz-count { font: 700 0.78rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--stein-text); }
.quiz-bar { height: 6px; background: var(--stein-hell); margin: 12px 0 26px; }
.quiz-bar span { display: block; height: 100%; width: 0; background: var(--anthrazit); transition: width .3s ease; }
.quiz-text { font: 700 var(--step-2) / 1.2 var(--font-head); letter-spacing: -0.02em; min-height: 3.6em; text-wrap: balance; }
.quiz-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.quiz-btns .btn { flex: 1 1 160px; }
.quiz-score { font: 800 var(--step-4) / 1 var(--font-head); letter-spacing: -0.04em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.quiz-verdict { color: #4a4946; margin-top: 14px; max-width: 52ch; }

/* Vertrauen */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid #45433f; }
.trust-grid > div { padding: 28px 24px 28px 0; border-right: 1px solid #45433f; }
.trust-grid > div + div { padding-left: 24px; }
.trust-grid > div:last-child { border-right: 0; }
.trust-grid h3 { margin-bottom: 10px; color: var(--weiss); }
.trust-grid p { color: var(--grau-hell); font-size: 0.95rem; }
.about { display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: center; margin-top: clamp(48px, 6vw, 80px); padding: 32px; background: var(--anthrazit-2); border-left: 4px solid var(--stein); }
.about-photo { aspect-ratio: 1; max-width: 100%; border-radius: 50%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #34332f 0 8px, #2f2e2b 8px 16px); color: var(--grau-hell); font: 600 0.8rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; border: 2px dashed #5a5853; }
.about-text { min-width: 0; }
.about-quote { font: 600 1.2rem / 1.45 var(--font-head); color: var(--offwhite); }
.about-name { margin-top: 14px; color: var(--stein); font-weight: 600; font-size: 0.92rem; }

/* FAQ */
.faq { border-top: 1.5px solid var(--anthrazit); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font: 700 1.08rem var(--font-head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--anthrazit), var(--anthrazit)) center / 100% 2px no-repeat, linear-gradient(var(--anthrazit), var(--anthrazit)) center / 2px 100% no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--stein-text); }
.faq details p { padding: 0 44px 22px 0; color: #4a4946; max-width: 64ch; }

/* Kontakt */
.contact-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.contact-points li { padding-left: 28px; position: relative; color: #d8d4cc; }
.contact-points li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid var(--stein); border-bottom: 2.5px solid var(--stein); transform: rotate(-45deg); }
.form { background: var(--offwhite); color: var(--anthrazit); padding: clamp(22px, 4vw, 40px); border-radius: var(--radius); display: grid; gap: 16px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 600 0.86rem var(--font-head); }
.field input, .field select, .field textarea { font: 400 1rem var(--font-body); padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--weiss); color: var(--anthrazit); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--anthrazit); box-shadow: 0 0 0 3px var(--stein-hell); }
.field textarea { resize: vertical; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; color: var(--grau); }
.consent input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--anthrazit); }
.hp { position: absolute; left: -9999px; }
.f-check-note { font-size: 0.86rem; background: var(--stein-hell); padding: 10px 14px; border-left: 3px solid var(--stein); }
.form-status { font-size: 0.92rem; background: var(--stein-hell); padding: 12px 14px; }

/* Footer */
.site-footer { background: #161616; color: var(--grau-hell); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 0.9rem; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer-row p { margin-top: 8px; }
.logo-text.light { color: var(--offwhite); }
.site-footer nav { display: flex; gap: 22px; }
.site-footer a { color: #d8d4cc; text-decoration: none; }
.site-footer a:hover { color: var(--weiss); }

/* Rechtstexte */
.legal { padding-block: clamp(48px, 7vw, 96px); }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: var(--step-3); font-weight: 800; margin-bottom: 24px; }
.legal h2 { font-size: var(--step-1); margin: 34px 0 10px; }
.legal p, .legal li { color: #3e3d3a; margin-bottom: 10px; }
.legal .notice { background: #fff6dd; border: 2px dashed #d4a72c; padding: 16px 18px; margin-bottom: 28px; color: #5a4300; }
.ph { background: #fff1c2; padding: 0 4px; border-radius: 2px; }
.thanks { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.thanks .lead { margin-inline: auto; }

/* Animation */
@keyframes rise { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: .001; } to { opacity: 1; } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes blink { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .o-marquee span { padding-left: 0; }
}

/* Responsive */
@media (max-width: 960px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; }
  .price-grid { grid-template-columns: 1fr 1fr; }
  .price-card { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .steps li:nth-child(2)::before { display: none; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid > div:nth-child(2) { border-right: 0; }
  .trust-grid > div:nth-child(3) { padding-left: 0; }
  .trust-grid > div:nth-child(n+3) { border-top: 1px solid #45433f; }
  .ruler { grid-template-columns: repeat(3, 1fr); }
  .ruler li:nth-child(3) { border-right: 0; }
  .ruler li:nth-child(4) { padding-left: 0; }
  .ruler li:nth-child(n+4) { border-top: 1px solid var(--linie); }
}
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--anthrazit); flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px)); border-top: 1px solid #3a3936; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid #333; font-size: 1rem; }
  .nav .btn { margin-top: 16px; }
  .site-header { position: sticky; }
  .header-row { position: relative; }
}
@media (max-width: 640px) {
  .price-grid { grid-template-columns: 1fr; }
  .incl { border-right: 0; border-bottom: 1px solid var(--linie); }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps li::before { display: none; }
  .steps li { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; padding: 0; }
  .steps li .step-n { grid-row: span 2; margin: 0; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid > div, .trust-grid > div + div { padding: 22px 0; border-right: 0; border-top: 1px solid #45433f; }
  .ex-notes { grid-template-columns: 1fr; gap: 14px; }
  .f-row { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; padding: 24px; gap: 22px; }
  .ruler { grid-template-columns: 1fr 1fr; }
  .ruler li { padding-left: 14px !important; border-right: 1px solid var(--linie) !important; border-top: 1px solid var(--linie); }
  .ruler li:nth-child(odd) { padding-left: 0 !important; }
  .ruler li:nth-child(even) { border-right: 0 !important; }
  .ruler li:nth-child(-n+2) { border-top: 0; }
  .ruler li:last-child { grid-column: 1 / -1; border-right: 0 !important; }
  .blueprint { padding: 30px 26px 30px 0; }
  .dim-a span { font-size: 0.6rem; }
  .hero-cta .btn { flex: 1 1 100%; }
}

@media (max-width: 640px) { .ba-label { bottom: 8px; font-size: 0.62rem; padding: 3px 7px; } .ba-label.l { left: 8px; } .ba-label.r { right: 8px; } .ba-fict { top: auto; bottom: 8px; font-size: 0.62rem; } .ba-handle span { width: 38px; height: 38px; } }

/* Referenz */
.about.ref { grid-template-columns: minmax(0, 300px) 1fr; }
.ref-frame { border: 1.5px solid #4a4844; border-radius: 6px; overflow: hidden; background: #1a1a19; }
.ref-frame .bp-bar { background: #2f2e2b; border-bottom-color: #4a4844; }
.ref-frame .bp-bar i { border-color: #777; }
.ref-frame .bp-bar span { background: #1a1a19; border-color: #4a4844; color: var(--grau-hell); }
.ref-body { padding: 22px 30px 14px; }
.ref-body svg { display: block; width: 100%; }
.about-name a { color: var(--stein); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.about-name a:hover { color: var(--weiss); }
@media (max-width: 640px) { .about.ref { grid-template-columns: 1fr; } .ref-frame { max-width: 300px; } }