/* BuildGuard Facility: Schild-Interface. Farben aus dem Logo: Schwarzblau, Chrom, elektrisches Blau. */
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #05070d; --bg-2: #090e18; --panel: #0b111d; --panel-2: #101827;
  --line: rgba(130, 170, 225, .17); --line-strong: rgba(110, 196, 232, .42);
  --blue-deep: #1a5aa8; --blue: #2c7cd2; --blue-bright: #3491e9; --cyan: #6ec4e8;
  --silver: #c9d1dc; --chrome-1: #f6f8fb; --chrome-2: #9eabbd;
  --text: #e8edf5; --muted: #a2afc2; --ok: #58d6a6; --warn: #f0b95a;
  --radius: 4px; --cut: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.65 var(--body); overflow-x: hidden; }
body::before { /* Technisches Raster, läuft zu den Rändern aus */
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 10%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 10%, #000 20%, transparent 75%);
}
body::after { /* Lichtschein, folgt dem Zeiger */
  content: ""; position: fixed; left: var(--cx, 50vw); top: var(--cy, 20vh); width: 620px; height: 620px; z-index: -1; pointer-events: none;
  transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(52, 145, 233, .13), transparent 62%);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #fff; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; }
h3 { font-size: 1.22rem; font-weight: 600; }
small { font-size: .84em; color: var(--muted); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: .6em 1em; background: var(--blue); color: #fff; }
.skip:focus { top: 12px; }
.muted { color: var(--muted); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon.big { width: 3rem; height: 3rem; color: var(--blue-bright); margin-bottom: .5rem; }
kbd { font: 500 .72rem var(--mono); padding: .1em .45em; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }

.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 780px; }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; }
.section-tight { padding: clamp(1.5rem, 4vw, 3rem) 0; }
.section-head { max-width: 780px; margin-bottom: 2.25rem; }
.section-head.center { text-align: center; margin-inline: auto; }
.split > .section-head, .split div > .section-head { margin-bottom: 1.25rem; }
.title { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 600; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--silver); }
.eyebrow { font: 500 .78rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin: 0 0 .8rem; }
.display { font-size: clamp(2.15rem, 5.2vw, 4.1rem); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; }
.chrome { /* Verlauf wie das Chrom im Logo */
  background: linear-gradient(176deg, var(--chrome-1) 22%, var(--chrome-2) 62%, #e6ebf2 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grid-2, .grid-3, .grid-4 { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split-form { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

/* ---------- Kopfzeile ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px var(--blue-bright); }
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  background: rgba(5, 7, 13, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s;
  view-transition-name: site-header;
}
.is-scrolled .site-header { border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); flex: none; }
.brand img { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(52, 145, 233, .4)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong { font: 700 1.04rem var(--display); letter-spacing: .05em; color: var(--silver); }
.brand-text em { font-style: normal; color: var(--blue-bright); }
.brand-text small { font: 500 .6rem var(--mono); letter-spacing: .44em; color: var(--muted); margin-top: .3em; }
.nav { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.nav a { position: relative; padding: .5em .8em; color: var(--silver); font-size: .95rem; transition: color .2s; }
.nav > a::after, .nav-group > a::after { content: ""; position: absolute; left: .8em; right: .8em; bottom: .2em; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.nav a:hover { color: #fff; }
.nav > a:hover::after, .nav-group:hover > a::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: #fff; }
.nav-group { position: relative; }
.nav-sub { position: absolute; top: 100%; left: 0; min-width: 170px; padding: .4rem; background: var(--panel-2); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s var(--ease); }
.nav-sub a { display: block; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.palette-open { display: inline-flex; align-items: center; gap: .45rem; padding: .42em .55em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.palette-open:hover { color: #fff; border-color: var(--line-strong); }
.nav-toggle { display: none; padding: .45em; color: var(--text); background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }

/* ---------- Schaltflächen ---------- */
.btn {
  --mx: 0px; --my: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .82em 1.35em; overflow: hidden; cursor: pointer; font: 600 .98rem var(--display); letter-spacing: .01em; border: 1px solid transparent;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transform: translate(var(--mx), var(--my)); transition: transform .25s var(--ease), background .2s, color .2s, filter .2s;
}
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); }
.btn:hover::before { transform: translateX(120%); transition: transform .7s var(--ease); }
.btn-primary { background: linear-gradient(135deg, var(--blue-deep), var(--blue) 60%, var(--blue-bright)); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(1.12); }
.btn-ghost { background: rgba(120, 170, 230, .09); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(120, 170, 230, .18); color: #fff; }
.btn-small { padding: .6em 1em; font-size: .9rem; }
.btn[disabled] { opacity: .6; cursor: wait; }

/* ---------- Tafeln mit abgeschnittenen Ecken ---------- */
.panel { position: relative; isolation: isolate; padding: clamp(1.25rem, 2.4vw, 1.9rem); --gx: 50%; --gy: 0%; transform-style: preserve-3d; transition: transform .25s var(--ease); }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: var(--cut); background: linear-gradient(135deg, var(--line-strong), rgba(120, 160, 220, .12) 42%, rgba(52, 145, 233, .34)); }
.panel::after { content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut); background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(52, 145, 233, .13), transparent 60%), var(--panel); }
.service h3 { margin-bottom: .35em; }
.service p { margin: 0; }
.service .checks { margin-bottom: 1.2rem; }
.service-small { padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: .9rem; }
.service-small h3 { font-size: 1rem; margin: 0; }
.service-small .icon-tile { margin: 0; }
.icon-tile { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1rem; color: var(--cyan); background: rgba(52, 145, 233, .12); clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%); flex: none; }
.statement h3 { font-size: 1.45rem; }
.statement-end { margin: 1.2rem 0 0; font: 500 1.05rem var(--display); color: var(--cyan); }
.checks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.checks li { display: flex; gap: .6rem; align-items: flex-start; }
.checks .icon { color: var(--blue-bright); margin-top: .2em; width: 1.05em; height: 1.05em; stroke-width: 2.2; }
.checks small { display: block; line-height: 1.45; margin-top: .2em; }
.checks-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Startbereich ---------- */
.hero { position: relative; min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; padding: 2rem 0 4.5rem; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; animation: fade-in 1.4s .2s forwards; }
.hero-content { position: relative; pointer-events: none; }
.hero-content a { pointer-events: auto; }
.hero-content .display { max-width: 12.6em; font-size: clamp(2.1rem, 4.1vw, 3.55rem); }
.nb { white-space: nowrap; }
.hero-claim { font: 500 clamp(1.25rem, 2.6vw, 1.85rem) var(--display); margin: .2em 0 0; color: var(--silver); }
.hero-claim span { color: var(--blue-bright); text-shadow: 0 0 22px rgba(52, 145, 233, .55); }
.stats { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 2.5rem 0 0; }
.stats div { border-left: 2px solid var(--blue); padding-left: .85rem; }
.stats dt { font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stats dd { margin: .15em 0 0; font: 500 1.05rem var(--display); }
.stats b { font-size: 1.85rem; font-weight: 600; color: #fff; }
.hero-labels { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .45rem; font: 500 .72rem var(--mono); letter-spacing: .03em; color: var(--cyan); white-space: nowrap; will-change: transform; transition: opacity .35s; }
.hero-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hero-label span { padding: .2em .55em; background: rgba(9, 14, 24, .78); border: 1px solid var(--line-strong); }
.scroll-hint { position: absolute; left: 50%; bottom: 1.25rem; width: 24px; height: 40px; border: 1px solid var(--line-strong); border-radius: 14px; }
.scroll-hint span { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--cyan); border-radius: 2px; animation: scroll-dot 1.8s infinite var(--ease); }
.page-hero { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero .display { font-size: clamp(2rem, 4.6vw, 3.5rem); max-width: 22em; }
.page-hero .lead { max-width: 46em; }
.page-hero-scan { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(52, 145, 233, .1) 50%, transparent); background-size: 100% 260px; background-repeat: no-repeat; animation: page-scan 7s linear infinite; }

/* ---------- Pakete ---------- */
.packages { align-items: stretch; }
.package { display: flex; flex-direction: column; }
.package header { margin-bottom: 1.1rem; }
.package-name { font-size: 2rem; font-weight: 600; margin-bottom: .25em; }
.price { margin: 0 0 .7rem; font-size: .95rem; color: var(--silver); }
.price b { font: 600 1.55rem var(--display); color: #fff; }
.price span { color: var(--muted); }
.price-small b { font-size: 1.1rem; color: var(--cyan); }
.finder-result .price { font: 600 1.35rem var(--display); color: var(--cyan); }
.price-row td b { display: block; font: 600 1.1rem var(--display); color: #fff; white-space: nowrap; }
.price-row td small { font-size: .78rem; }
.price-row th, .price-row td { background: rgba(52, 145, 233, .1); }
#zusatz .service { display: flex; flex-direction: column; align-items: flex-start; }
#zusatz .service .checks { flex: 1; align-content: start; width: 100%; }
#zusatz .price { margin-bottom: 1rem; }
.package .checks { flex: 1; align-content: start; margin-bottom: 1.4rem; font-size: .97rem; }
.package .btn { align-self: stretch; }
.package.is-featured::before { background: linear-gradient(135deg, var(--cyan), var(--blue) 45%, var(--blue-bright)); }
.package.is-featured::after { background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(52, 145, 233, .22), transparent 60%), var(--panel-2); }
.tab-bar { display: inline-flex; gap: .35rem; padding: .3rem; margin-bottom: 1.25rem; border: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.tab-bar button { display: inline-flex; align-items: center; gap: .5rem; padding: .55em 1em; color: var(--muted); font: 500 .95rem var(--display); background: transparent; border: 0; cursor: pointer; transition: .2s; }
.tab-bar button[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--blue-deep), var(--blue)); }
.mini-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; animation: rise .5s var(--ease); }
.mini-pack { display: flex; flex-direction: column; gap: .45rem; color: var(--text); padding-right: 3.2rem; }
.mini-pack:hover { color: #fff; }
.mini-pack .eyebrow { margin: 0; }
.mini-pack strong { font: 600 1.7rem var(--display); }
.mini-pack > .icon { position: absolute; right: 1.2rem; top: 1.3rem; color: var(--cyan); transition: transform .25s var(--ease); }
.mini-pack:hover > .icon { transform: translateX(4px); }
.compare-tools { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .92rem; color: var(--silver); }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 38px; height: 20px; border: 1px solid var(--line-strong); position: relative; transition: .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; background: var(--silver); transition: .25s var(--ease); }
.switch input:checked + span { background: rgba(52, 145, 233, .35); }
.switch input:checked + span::after { left: 21px; background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); background: var(--bg-2); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .96rem; }
th, td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: center; }
thead th { font: 600 1.05rem var(--display); color: #fff; background: var(--panel-2); }
tbody th, thead th:first-child { text-align: left; font-weight: 500; font-family: var(--body); }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(52, 145, 233, .08); }
td .icon.yes { color: var(--ok); stroke-width: 2.4; }
td .icon.no { color: #4c5a70; }
.compare.only-diff tr[data-same] { display: none; }
.fineprint { font-size: .84rem; color: var(--muted); margin: .7rem 0 0; }
.notice { display: flex; gap: 1.1rem; padding: 1.4rem 1.6rem; background: rgba(240, 185, 90, .07); border: 1px solid rgba(240, 185, 90, .35); border-left-width: 3px; }
.notice > .icon { color: var(--warn); margin-top: .2em; }
.notice h2 { font-size: 1.15rem; }
.notice p { color: var(--silver); font-size: .98rem; }
.notice p:last-child { margin: 0; }

/* ---------- Bericht-Demo ---------- */
.report { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 3vw, 2.25rem); align-items: stretch; }
.report-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.report-top .eyebrow { margin: 0; }
.chip { font: 500 .72rem var(--mono); padding: .25em .6em; border: 1px solid var(--line-strong); color: var(--silver); text-transform: uppercase; letter-spacing: .05em; }
.chip.ok { color: var(--ok); border-color: rgba(88, 214, 166, .5); }
.chip.warn { color: var(--warn); border-color: rgba(240, 185, 90, .55); }
.report-card h3 { font-size: 1.4rem; }
.report-list { display: grid; gap: .4rem; margin: 1rem 0; }
.report-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .7rem; font-size: .92rem; color: var(--silver); background: rgba(120, 170, 230, .06); border: 0; text-align: left; font-family: inherit; cursor: pointer; transition: background .2s; width: 100%; }
.report-row:hover, .report-row.is-active { background: rgba(52, 145, 233, .2); color: #fff; }
.report-row b { font: 500 .78rem var(--mono); color: var(--ok); }
.report-row.warn b { color: var(--warn); }

/* ---------- Paket-Finder ---------- */
.finder { max-width: 780px; margin-inline: auto; min-height: 340px; }
.finder-bar { height: 2px; background: var(--line); margin-bottom: 1.5rem; }
.finder-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .45s var(--ease); }
.finder-step { animation: rise .45s var(--ease); }
.finder-q { font: 500 clamp(1.3rem, 2.5vw, 1.7rem)/1.2 var(--display); margin-bottom: 1.1rem; }
.finder-options { display: grid; gap: .6rem; }
.finder-option { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .85rem 1.05rem; color: var(--text); font: 500 1rem var(--body); text-align: left; background: rgba(120, 170, 230, .06); border: 1px solid var(--line); cursor: pointer; transition: .2s var(--ease); }
.finder-option:hover, .finder-option:focus-visible { background: rgba(52, 145, 233, .2); border-color: var(--line-strong); transform: translateX(4px); }
.finder-option small { display: block; margin-top: .1em; }
.finder-back { margin-top: 1rem; padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: .92rem; }
.finder-back:hover { color: #fff; }
.finder-result h3 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; color: #fff; margin-bottom: .2em; }
.finder-result .actions { margin-top: 1.25rem; }

/* ---------- Radar ---------- */
.radar-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.radar { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; margin-inline: auto; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(44, 124, 210, .13), transparent 70%); border: 1px solid var(--line-strong); }
.radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.radar-ring { fill: none; stroke: var(--line); }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 76%, rgba(110, 196, 232, .3)); animation: spin 6s linear infinite; }
.radar-town circle { fill: var(--blue-bright); transition: r .2s; }
.radar-town text { fill: var(--silver); font: 500 13px var(--body); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.radar-town.is-home circle { fill: var(--cyan); }
.radar-town.is-hit circle { fill: #fff; r: 7; }
.radar-town.is-hit text { fill: #fff; font-weight: 700; }
.radar-pulse { fill: none; stroke: var(--cyan); animation: radar-pulse 2.6s infinite; transform-box: fill-box; transform-origin: center; }
.radar-search { margin-bottom: 1.25rem; }
.radar-search label { display: block; font-weight: 600; margin-bottom: .45rem; }
.input-row { display: flex; gap: .5rem; }
.radar-result { min-height: 1.6em; margin: .55rem 0 0; font-size: .95rem; color: var(--cyan); }
.town-list { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.town-list li { padding: .18em .6em; font-size: .86rem; color: var(--silver); border: 1px solid var(--line); }

/* ---------- Ablauf ---------- */
.timeline { --fill: 0; position: relative; list-style: none; margin: 0; padding: 0 0 0 3.6rem; display: grid; gap: 1.5rem; max-width: 780px; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 1.25rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--line); }
.timeline::after { background: linear-gradient(var(--cyan), var(--blue)); transform: scaleY(var(--fill)); transform-origin: 50% 0; box-shadow: 0 0 10px var(--blue-bright); }
.timeline li { position: relative; }
.timeline h3 { margin-bottom: .2em; }
.timeline p { margin: 0; }
.step-no { position: absolute; left: -3.6rem; top: -.1rem; z-index: 1; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; font: 600 .86rem var(--mono); color: #fff; background: var(--panel-2); border: 1px solid var(--line-strong); clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%); }

/* ---------- Häufige Fragen ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font: 500 1.08rem var(--display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--cyan); transition: transform .25s var(--ease); transform: rotate(90deg); }
.faq[open] summary .icon { transform: rotate(-90deg); }
.faq p { color: var(--silver); padding-bottom: .5rem; animation: rise .35s var(--ease); }

/* ---------- Über uns ---------- */
.founder { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.portrait { margin: 0; position: relative; clip-path: var(--cut); }
.portrait img { width: 100%; }
.portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(transparent, rgba(5, 7, 13, .92)); }
.portrait figcaption strong { font: 600 1.2rem var(--display); }
.portrait figcaption span { font: 500 .76rem var(--mono); color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; }
.reference { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.reference img { width: 100%; clip-path: var(--cut); }

/* ---------- Partner: Laufband ---------- */
.marquee-section { overflow: hidden; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee ul { display: flex; gap: .7rem; width: max-content; list-style: none; margin: 0; padding: 0; animation: marquee 60s linear infinite; }
.marquee:hover ul { animation-play-state: paused; }
.marquee li { padding: .6em 1.15em; white-space: nowrap; color: var(--silver); background: rgba(120, 170, 230, .07); border: 1px solid var(--line); font-family: var(--display); }

/* ---------- Kontakt ---------- */
.contact-card { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; padding: 1rem 1.25rem; color: var(--text); font: 500 1.05rem var(--display); overflow-wrap: anywhere; }
.contact-card > .icon { color: var(--cyan); width: 1.5em; height: 1.5em; }
.contact-card small { display: block; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.contact-line { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; color: var(--silver); overflow-wrap: anywhere; }
.wizard { padding: clamp(1.25rem, 3vw, 2.25rem); }
.wizard-steps { display: flex; justify-content: space-between; gap: .5rem; list-style: none; margin: 0 0 .6rem; padding: 0; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.wizard-steps .is-active { color: var(--cyan); }
.wizard-bar { height: 2px; background: var(--line); margin-bottom: 1.5rem; }
.wizard-bar span { display: block; height: 100%; width: 33.34%; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .45s var(--ease); }
.wizard-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.js .wizard-step { display: none; }
.js .wizard-step.is-active { display: block; animation: rise .4s var(--ease); }
legend { font: 500 1.3rem var(--display); margin-bottom: 1rem; padding: 0; }
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .55rem; margin-bottom: 1.2rem; }
.chip-radio input { position: absolute; opacity: 0; }
.chip-radio span { display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; background: rgba(120, 170, 230, .06); border: 1px solid var(--line); cursor: pointer; transition: .2s; font-size: .96rem; }
.chip-radio span:hover { border-color: var(--line-strong); }
.chip-radio input:checked + span { background: rgba(52, 145, 233, .25); border-color: var(--cyan); color: #fff; }
.chip-radio input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.field { display: block; margin-bottom: 1rem; min-width: 0; }
.field > span { display: block; margin-bottom: .35rem; font-size: .92rem; color: var(--silver); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 1rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
  width: 100%; padding: .72rem .85rem; color: var(--text); font: 400 1rem var(--body); background: rgba(5, 7, 13, .7); border: 1px solid var(--line); border-radius: 0; transition: border-color .2s, box-shadow .2s;
}
select option { background: var(--panel); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(110, 196, 232, .18); }
.is-invalid input, input.is-invalid { border-color: #ff7a7a; }
.trap { position: absolute; left: -9999px; }
.consent { display: flex; gap: .65rem; font-size: .88rem; color: var(--silver); cursor: pointer; }
.consent input { margin-top: .25em; accent-color: var(--blue-bright); flex: none; width: 1.05em; height: 1.05em; }
.consent.is-invalid { color: #ff9b9b; }
.wizard-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.4rem; }
.wizard-nav [data-next], .wizard-nav [data-submit] { margin-left: auto; }
.wizard-error { color: #ff9b9b; margin: 1rem 0 0; font-size: .95rem; }
.wizard-done { text-align: center; padding: 2rem 0; animation: rise .5s var(--ease); }
.wizard-done:focus { outline: none; }
.wizard-done .icon { margin-inline: auto; }
.cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.75rem); clip-path: var(--cut); background: linear-gradient(120deg, #123c74, var(--blue-deep) 55%, #1f6dbf); }
.cta-band .title { font-size: clamp(1.45rem, 2.8vw, 2.05rem); }
.cta-band p { margin: 0; color: #dbe7f6; }
.cta-band .btn-primary { background: #fff; color: #0f3d78; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 800px; }
.legal h2 { font-size: 1.3rem; margin-top: 2em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.02rem; margin: 1.5em 0 .3em; color: var(--cyan); }
.legal p, .legal li { color: var(--silver); }

/* ---------- Fußzeile ---------- */
.site-footer { margin-top: clamp(3rem, 6vw, 5rem); padding: 3rem 0 1.5rem; border-top: 1px solid var(--line); background: var(--bg-2); font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 2rem; }
.footer-grid .brand { margin-bottom: 1rem; }
.footer-grid nav a { display: block; margin-top: .45rem; color: var(--silver); }
.footer-grid nav a:hover, .contact-line:hover { color: #fff; }
.site-footer .eyebrow { margin-bottom: .4rem; font-size: .74rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.footer-base a { margin-left: 1.1rem; color: var(--silver); }
.footer-base a:first-child { margin-left: 0; }
.mobile-bar { display: none; }

/* ---------- Schnellsuche ---------- */
.palette { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding: 12vh 1rem 1rem; background: rgba(3, 5, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in .18s; }
.palette[hidden] { display: none; }
.palette-box { width: min(560px, 100%); background: var(--panel-2); border: 1px solid var(--line-strong); box-shadow: 0 20px 70px rgba(0, 0, 0, .6); animation: rise .25s var(--ease); }
.palette-input { display: flex; align-items: center; gap: .65rem; padding: .3rem 1rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.palette-input input { border: 0; background: transparent; padding: .7rem 0; }
.palette-input input:focus { box-shadow: none; }
.palette-list { max-height: 44vh; overflow-y: auto; padding: .35rem; }
.palette-item { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; color: var(--text); }
.palette-item small { font: 500 .72rem var(--mono); align-self: center; }
.palette-item.is-active, .palette-item:hover { background: rgba(52, 145, 233, .22); color: #fff; }
.palette-hint { margin: 0; padding: .55rem 1rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- Bewegung ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease) var(--delay, 0ms), transform .75s var(--ease) var(--delay, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal].panel.is-in { transition: transform .25s var(--ease), opacity .75s var(--ease) var(--delay, 0ms); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@keyframes fade-in { to { opacity: 1; } from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes page-scan { from { background-position: 0 -260px; } to { background-position: 0 calc(100% + 260px); } }
@keyframes hot-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes radar-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

/* Seitenübergang: Abtastlinie zwischen den Seiten (Chrome, Edge, Safari) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 960px) {
  :root { --header-h: 66px; }
  .nav-toggle { display: inline-flex; }
  .palette-open kbd { display: none; }
  .nav { position: fixed; inset: var(--header-h) 0 0; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.5rem 6rem; overflow-y: auto; background: rgba(5, 7, 13, .97); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .4s var(--ease), visibility .4s; margin: 0; }
  .nav.is-open { clip-path: inset(0); visibility: visible; }
  .nav a { padding: .8rem 0; font: 500 1.35rem var(--display); border-bottom: 1px solid var(--line); }
  .nav > a::after, .nav-group > a::after { display: none; }
  .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 0 1rem; background: none; border: 0; }
  .nav-sub a { font-size: 1rem; color: var(--muted); }
  .header-actions .btn { display: none; }
  .split-form, .founder, .report, .radar-layout, .reference { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-bottom: 5.5rem; align-items: flex-end; }
  .hero-labels { display: none; }
  .hero-canvas { opacity: .55 !important; animation: none; }
  .scroll-hint { display: none; }
  body { padding-bottom: 62px; }
  .mobile-bar { position: fixed; inset: auto 0 0; z-index: 45; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(9, 14, 24, .96); border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem 0; font-size: .76rem; color: var(--silver); }
  .mobile-bar .icon { color: var(--cyan); }
}
@media (hover: none) { body::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee ul { flex-wrap: wrap; width: auto; animation: none; }
  .radar-sweep, .page-hero-scan { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media print {
  .site-header, .mobile-bar, .palette, .hero-canvas, .site-footer nav { display: none; }
  body { background: #fff; color: #000; }
  .chrome { color: #000; background: none; }
}

/* ==================== Kompakte Seite: Preise, Rechner, neue Effekte ==================== */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.anchor { display: block; position: relative; top: calc(-1 * var(--header-h)); height: 0; }
.nb { white-space: nowrap; }
.hero-content button { pointer-events: auto; }
.hero-status { min-height: 1.5em; margin: .8rem 0 0; font: 500 .85rem var(--mono); color: var(--cyan); }
.hero-status a { text-decoration: underline; pointer-events: auto; }
.hero-label.is-done span::after { content: " ✓"; color: var(--ok); }
.hero-label.is-done::before { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.btn[disabled] { cursor: progress; }
.ripple { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .5); pointer-events: none; animation: ripple .65s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(26); opacity: 0; } }

/* Großes Laufband */
.band { overflow: hidden; padding: .7rem 0; border-block: 1px solid var(--line); background: rgba(9, 14, 24, .6); white-space: nowrap; }
.band > div { display: inline-block; font: 700 clamp(1.8rem, 5vw, 3.4rem)/1.1 var(--display); letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1px rgba(110, 196, 232, .55); will-change: transform; }

/* Wörter gleiten ein */
.js [data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-words] .w > span { display: inline-block; transform: translateY(110%); transition: transform .8s var(--ease) calc(var(--i) * 45ms); }
.js [data-words].words-in .w > span { transform: none; }

/* Klappkarten */
.flip { perspective: 1100px; cursor: pointer; border-radius: var(--radius); outline-offset: 4px; }
.flip-in { display: grid; min-height: 176px; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.flip:hover .flip-in, .flip:focus-visible .flip-in, .flip.is-flipped .flip-in { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; }
.flip-a h3 { margin: 0; }
.flip-b { transform: rotateY(180deg); color: var(--silver); }
.flip-b::after { background: radial-gradient(420px circle at 50% 0%, rgba(52, 145, 233, .24), transparent 70%), var(--panel-2); }
.flip-b p { margin: 0; }
@media (hover: none) { .flip:hover .flip-in { transform: none; } .flip.is-flipped:hover .flip-in { transform: rotateY(180deg); } }

/* Scroll-Geschichte */
.story { position: relative; padding: clamp(3rem, 6vw, 5rem) 0; }
.story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.story-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.story-steps li { display: flex; gap: 1rem; align-items: flex-start; opacity: .38; transition: opacity .4s; }
.story-steps li.is-on { opacity: 1; }
.story-steps .step-no { position: static; flex: none; }
.story-steps h3 { margin: .1em 0 .15em; }
.story-steps p { margin: 0; }
.story-art { width: 100%; max-height: 62vh; fill: none; stroke: rgba(150, 200, 250, .75); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(52, 145, 233, .45)); }
.story-art path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 1)); }
.story-shield { stroke: var(--cyan); stroke-width: 3; }
.story-shield path:first-child { fill: var(--bg); fill-opacity: var(--d, 1); } /* Verdeckt die Dachlinien hinter dem Schild */
.js .story.is-live { height: 260vh; padding: 0; }
.js .story.is-live .story-pin { position: sticky; top: var(--header-h); min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; }
.js .story.is-live .story-grid { width: min(1200px, 100% - 2.5rem); }

/* Preisschalter */
.pricing-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-bottom: 1.4rem; }
.segment { --i: 0; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; background: var(--bg-2); border: 1px solid var(--line-strong); isolation: isolate; }
.segment-thumb { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: linear-gradient(135deg, var(--blue-deep), var(--blue)); box-shadow: 0 0 18px rgba(52, 145, 233, .45); transform: translateX(calc(var(--i) * 100%)); transition: transform .4s var(--ease); }
.segment button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55em 1.1em; color: var(--silver); font: 500 .95rem var(--display); background: none; border: 0; cursor: pointer; white-space: nowrap; transition: color .25s; }
.segment button[aria-pressed="true"] { color: #fff; }
.price-alt { margin: -.35rem 0 .7rem; font-size: .86rem; color: var(--muted); }
.price-alt.is-year { color: var(--ok); }
.mini-pack .price, .mini-pack .price-alt { margin: 0; }
.mini-pack .price b { font-size: 1.3rem; }
.more { margin-bottom: 1.2rem; border-top: 1px solid var(--line); }
.more summary { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; font: 500 .95rem var(--display); color: var(--cyan); cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary .icon { transform: rotate(90deg); transition: transform .3s var(--ease); }
.more[open] summary .icon { transform: rotate(-90deg); }
.more .checks { font-size: .92rem; animation: rise .35s var(--ease); }
.package .checks { flex: none; }
.package > .checks { flex: 1; }
.package .btn { margin-top: auto; }
.split-calc { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }

/* Preisrechner */
.calc-out { display: grid; gap: .5rem; margin: .4rem 0 .8rem; }
.calc-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem .7rem; background: rgba(120, 170, 230, .07); }
.calc-out dt { color: var(--silver); font-size: .92rem; }
.calc-out dd { margin: 0; font: 600 1.2rem var(--display); color: #fff; white-space: nowrap; }
.calc-out .is-save dd { color: var(--ok); }
.calc .btn { width: 100%; }
.calc output { color: #fff; font-weight: 600; }
input[type="range"] { --fill: 0%; width: 100%; height: 6px; margin: .6rem 0; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--blue-bright) var(--fill), var(--line) var(--fill)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: #fff; border: 3px solid var(--blue-bright); border-radius: 50%; box-shadow: 0 0 12px var(--blue-bright); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 3px solid var(--blue-bright); border-radius: 50%; }

/* Über uns */
.sub { font-size: 1.1rem; margin: 1.3rem 0 .6rem; color: var(--cyan); }
.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.tag-list li { padding: .25em .7em; font-size: .9rem; color: var(--silver); border: 1px solid var(--line); background: rgba(120, 170, 230, .06); }
.partner-marquee { margin: 1.5rem 0 2rem; }
.partner-end { align-items: center; }

/* Fußzeile kompakt */
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; }
.footer-contact { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.footer-contact .contact-line { margin: 0; }
.footer-base { margin-top: 1.5rem; }

/* Schild als Fortschritt */
.shield-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 48px; height: 50px; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.shield-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.shield-top svg { width: 100%; height: 100%; fill: rgba(9, 14, 24, .85); stroke-linecap: round; stroke-linejoin: round; }
.shield-top path { stroke-width: 5; }
.shield-base { stroke: var(--line-strong); }
.shield-fill { fill: none; stroke: var(--cyan); stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px var(--blue-bright)); }
.shield-arrow { fill: none; stroke: #fff; }

/* Zeiger-Ring */
.cursor { position: fixed; left: -16px; top: -16px; z-index: 80; width: 32px; height: 32px; border: 1px solid rgba(110, 196, 232, .7); border-radius: 50%; pointer-events: none; will-change: transform; }
.cursor::after { content: ""; position: absolute; inset: 0; border-radius: 50%; transition: transform .25s var(--ease), background .25s; }
.cursor.is-big::after { transform: scale(1.7); background: rgba(52, 145, 233, .16); box-shadow: 0 0 0 1px rgba(110, 196, 232, .4); }

/* Intro */
.intro { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: var(--bg); pointer-events: none; transition: opacity .45s, transform .45s var(--ease); }
.intro.is-out { opacity: 0; transform: scale(1.06); }
.intro svg { width: min(26vw, 150px); fill: none; stroke: var(--blue-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px var(--blue-bright)); }
.intro path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw .8s var(--ease) forwards; }
.intro path + path { animation-delay: .4s; animation-duration: .4s; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 960px) {
  .story-grid, .split-calc { grid-template-columns: minmax(0, 1fr); }
  .story-art { display: none; }
  .story-steps li { opacity: 1; }
  .shield-top { bottom: calc(70px + env(safe-area-inset-bottom)); right: .9rem; width: 42px; height: 44px; }
  .segment { flex: 1 1 100%; }
  .segment button { font-size: .9rem; padding: .55em .5em; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .story-steps li { opacity: 1; }
  .band > div { white-space: normal; }
  .js [data-words] .w > span { transform: none; }
}

/* ==================== Ohne JavaScript alles lesbar ==================== */
.js [data-pricing]:not([data-ready]) [data-panel="gewerbe"] { display: none; }
html:not(.js) .pricing-controls, html:not(.js) .calc, html:not(.js) [data-hero-scan], html:not(.js) .compare-tools { display: none; }
html:not(.js) .packages[data-panel="gewerbe"], html:not(.js) .mini-packs[data-panel="gewerbe"], html:not(.js) .table-scroll[data-panel="gewerbe"] { margin-top: 1.25rem; }

/* Klappkarten: Hinweis, dass die Karte mehr zeigt */
.flip-a { position: relative; }
.flip-arrow { position: absolute; right: 1rem; bottom: 1rem; width: 18px; height: 18px; color: var(--cyan); opacity: .75; transition: transform .3s var(--ease); }
.flip:hover .flip-arrow { transform: translateX(3px); }

/* ==================== Handy kompakter ==================== */
@media (max-width: 960px) {
  .story-art { display: block; order: -1; width: min(100%, 340px); max-height: 32vh; margin: 0 auto; }
}
@media (max-width: 720px) {
  /* Karten zum Wischen statt endlos untereinander. Die nächste Karte schaut am Rand hervor. */
  .swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: .85rem; margin-inline: -1.25rem; padding: .25rem 1.25rem 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { scroll-snap-align: center; min-width: 0; }

  /* Leistungen zweispaltig */
  .flips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .flip { min-width: 0; }
  .flip-in { min-height: 138px; grid-template-columns: minmax(0, 1fr); }
  .flip-face { min-width: 0; }
  .flip-a h3 { hyphens: auto; overflow-wrap: break-word; }
  .flip-face { padding: .9rem; }
  .flip-a h3 { font-size: .88rem; line-height: 1.25; padding-right: .4rem; }
  .flip-a .icon-tile { margin-bottom: .6rem; }
  .flip-b p { font-size: .84rem; line-height: 1.4; }
  .flip-arrow { right: .7rem; bottom: .7rem; width: 15px; height: 15px; }

  /* Vergleich passt ohne Seitwärtsscrollen auf den Bildschirm */
  table { min-width: 0; table-layout: fixed; font-size: clamp(.68rem, 3.05vw, .76rem); }
  th, td { padding: .55rem .1rem; overflow-wrap: break-word; }
  tbody th, thead th:first-child { width: 34%; padding-left: .55rem; padding-right: .25rem; text-align: left; font-size: inherit; }
  thead th { font-size: .82rem; }
  .price-row td b { font-size: .8rem; white-space: normal; }
  .price-row td small { font-size: .66rem; }
  td .icon { width: 16px; height: 16px; }

  /* Überschrift bleibt über dem Gebäude gut lesbar */
  .hero-canvas { opacity: .42; }
  .hero-labels { display: none; }

  .footer-contact { flex-direction: column; }
}

/* ==================== Themenseiten ==================== */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; font: 500 .8rem var(--mono); color: var(--muted); }
.crumbs a { color: var(--silver); }
.crumbs a:hover { color: #fff; }
.land-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.land-block { margin-bottom: 2.2rem; }
.land-block:last-child { margin-bottom: 0; }
.land-block a { color: var(--cyan); text-decoration: underline; text-underline-offset: .15em; }
.land-h2 { margin: 0 0 .7rem; font: 600 clamp(1.25rem, 2.2vw, 1.55rem)/1.2 var(--display); color: #fff; }
.land-note { margin: 0; padding: 1rem 1.2rem; color: var(--silver); border-left: 3px solid var(--blue-bright); background: rgba(52, 145, 233, .08); }
.land-side { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.land-side .btn { width: 100%; margin: .4rem 0 1rem; }
.land-side .contact-line { display: flex; margin: .3rem 0 0; }
.situations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.situation { display: flex; flex-direction: column; gap: .4rem; color: var(--text); }
.situation .icon-tile { margin-bottom: .5rem; }
.situation strong { font: 600 1.12rem/1.25 var(--display); color: #fff; }
.situation > .icon { margin-top: auto; padding-top: .4rem; color: var(--cyan); transition: transform .3s var(--ease); }
.situation:hover > .icon { transform: translateX(4px); }
.footer-links { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.footer-links a { color: var(--silver); }
.footer-links a:hover { color: #fff; }
.site-footer .footer-base { margin-top: 1.1rem; }
@media (max-width: 960px) {
  .land-grid { grid-template-columns: minmax(0, 1fr); }
  .land-side { position: static; }
}

/* ==================== 3D-Haus im Bericht-Beispiel ==================== */
.report-stage { position: relative; min-height: clamp(330px, 37vw, 480px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.report-stage.is-dragging { cursor: grabbing; }
.report-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hotspot { position: absolute; left: 0; top: 0; z-index: 2; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; will-change: transform; }
.hotspot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 2px solid #fff; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 1px rgba(5, 7, 13, .65), 0 2px 8px rgba(5, 7, 13, .75); transition: transform .2s var(--ease), box-shadow .2s; }
.hotspot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid #fff; border-radius: 50%; animation: spot-ring 2.2s infinite; pointer-events: none; }
.hotspot.is-warn::before { background: var(--warn); }
.hotspot:hover::before { transform: scale(1.2); }
.hotspot.is-active::before { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 0 16px rgba(150, 225, 255, .9); }
.hotspot:focus-visible { outline: none; }
.hotspot:focus-visible::before { box-shadow: 0 0 0 3px var(--cyan), 0 0 16px var(--cyan); }
.hotspot-name { position: absolute; left: calc(50% + 15px); top: 50%; padding: .12em .5em; color: #fff; font: 500 .72rem var(--mono); white-space: nowrap; background: rgba(5, 7, 13, .86); border: 1px solid var(--line-strong); opacity: 0; transform: translateY(-50%); transition: opacity .2s; pointer-events: none; }
.hotspot.is-left .hotspot-name { left: auto; right: calc(50% + 15px); }
.hotspot:hover .hotspot-name, .hotspot:focus-visible .hotspot-name, .hotspot.is-active .hotspot-name { opacity: 1; }
.house-hint { position: absolute; left: .7rem; bottom: .5rem; color: var(--muted); font: 500 .72rem var(--mono); pointer-events: none; transition: opacity .4s; }
.report-stage.was-dragged .house-hint { opacity: 0; }
.report-card [data-report-text] { min-height: 4.9em; }
@keyframes spot-ring { 0% { transform: scale(.65); opacity: .85; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hotspot::after { animation: none; opacity: .5; } }
@media (max-width: 720px) { .hotspot-name { font-size: .66rem; } }