/* ImmoVid Website — Marineblau als Grundfläche, Gold als einziger Akzent, echte Objektvideos als Bildsprache. */
:root{
  --night:#091726;--deep:#0f2338;--brand:#1d3a5f;--brand-2:#2b5285;
  --gold:#c8a45a;--gold-1:#e0c283;--gold-ink:#231a08;
  --paper:#ffffff;--mist:#eef2f7;--line:#dbe2ea;
  --ink:#0c1723;--ink-2:#42566b;--ink-3:#5a6c80;
  --on-night:#eaf0f7;--on-night-2:#a9bace;--night-line:rgba(255,255,255,.14);
  --r:12px;--r-lg:20px;--ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,64px);--wrap:1280px;
  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;--body:'Geist',ui-sans-serif,system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.2vw,5.4rem)}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.2}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wrap{width:min(var(--wrap),100%);margin:0 auto;padding:0 var(--pad)}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-2);max-width:62ch;line-height:1.55}
.night .lede,.night p{color:var(--on-night-2)}
:focus-visible{outline:2px solid var(--night);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 5px var(--gold)}
.night :focus-visible,.deep :focus-visible,.hero :focus-visible,footer.site :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--gold-ink);padding:12px 18px;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* Flächen */
section{position:relative}
.night{background:var(--night);color:var(--on-night)}
.deep{background:var(--deep);color:var(--on-night)}
.mistbg{background:var(--mist)}
.pad-y{padding:clamp(72px,10vw,150px) 0}
.pad-y-s{padding:clamp(52px,7vw,96px) 0}

/* Marke */
.mark{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.03em}
.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-3px}
.mark svg{width:34px;height:34px;flex:none}
.mark svg .haus{stroke:var(--mark-fg,var(--gold))}
.mark svg .punkt{fill:var(--mark-dot,#fff)}
header.top.light:not(.solid) .mark,.auth .form .mark{--mark-fg:var(--brand,#24385B);--mark-dot:var(--gold)}
.mark .v{color:var(--gold)}

/* Kopf */
header.top{position:fixed;inset:0 0 auto;z-index:60;color:var(--on-night);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
header.top .bar{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:88px;transition:height .4s var(--ease)}
nav.main .mnav{display:none}
header.top::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);opacity:0;transition:opacity .5s var(--ease)}
header.top.solid::before{opacity:.55}
header.top.solid{background:rgba(9,23,38,.92);backdrop-filter:blur(16px) saturate(150%);box-shadow:0 1px 0 rgba(255,255,255,.1)}
header.top.solid .bar{height:68px}
header.top.light:not(.solid){color:var(--ink)}
header.top .progress{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-1));width:100%;transform:scaleX(var(--p,0));transform-origin:left;opacity:0;transition:opacity .4s}
header.top.solid .progress{opacity:1}
.mark svg{transition:transform .5s var(--ease)}
header.top a:hover .mark svg{transform:rotate(-4deg) scale(1.05)}
nav.main{display:flex;gap:calc(var(--gapx,15px) * 2);--gapx:clamp(9px,1.1vw,16px);margin-left:auto;font-size:.95rem;font-weight:500}
nav.main a{position:relative;padding:6px 0;opacity:.85;transition:opacity .2s}
nav.main a+a{margin-left:0}
nav.main a:not(:last-child)::before{content:'';position:absolute;right:calc(var(--gapx,15px) * -1);top:50%;translate:0 -50%;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.3}
nav.main a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav.main a:hover{opacity:1}nav.main a:hover::after,nav.main a[aria-current=page]::after{transform:scaleX(1)}
.top .acts{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border:1px solid currentColor;border-radius:9px;background:none;color:inherit;align-items:center;justify-content:center;cursor:pointer;opacity:.7}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:1.5px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* Schaltflächen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:.97rem;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),background .22s,color .22s,border-color .22s,box-shadow .22s;font-family:var(--body)}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn.gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 8px 26px -12px rgba(200,164,90,.9)}
.btn.gold:hover{background:var(--gold-1);box-shadow:0 14px 34px -12px rgba(200,164,90,.85)}
.btn.ghost{border-color:currentColor;opacity:.92}
/* Beim Überfahren nicht currentColor als Fläche nehmen: die Schriftfarbe wird im selben
   Block neu gesetzt, dadurch stand dunkler Text auf dunkler Fläche und der Knopf verschwand. */
.btn.ghost:hover{background:#fff;color:var(--night);border-color:#fff;opacity:1}
header.top.light:not(.solid) .btn.ghost:hover,.mistbg .btn.ghost:hover{background:var(--night);color:#fff;border-color:var(--night)}
.btn.dark{background:var(--night);color:#fff}.btn.dark:hover{background:var(--brand)}
.btn.sm{height:44px;padding:0 18px;font-size:.9rem}
.arrow{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* Sektionskopf: Titel und Erklärung nebeneinander, ohne Etikett */
.shead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(34px,5vw,62px)}
.shead h2,.shead .page-title{max-width:15ch}
/* Einordnender Vorsatz über einer Überschrift. Bewusst nur an dieser einen Stelle,
   damit es eine Aussage bleibt und kein Muster über jedem Abschnitt wird. */
.vorsatz{font-family:var(--body);font-weight:600;font-size:1rem;color:var(--gold);margin-bottom:14px;letter-spacing:.005em}
.page-title{font-size:clamp(2rem,4.2vw,3.4rem)}
.shead .say{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.6;color:var(--ink-2);max-width:52ch}
.night .shead .say,.deep .shead .say{color:var(--on-night-2)}
@media(max-width:900px){.shead{grid-template-columns:1fr;align-items:start}}

/* Hero */
.hero{position:relative;min-height:min(94svh,900px);display:flex;align-items:flex-end;overflow:hidden;background:var(--night);color:var(--on-night);padding-top:76px}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg video,.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .bg video{position:absolute;inset:0}
.hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,23,38,.84) 0%,rgba(9,23,38,.66) 32%,rgba(9,23,38,.22) 64%,rgba(9,23,38,.34) 100%),linear-gradient(to top,rgba(9,23,38,.9) 6%,rgba(9,23,38,.12) 48%,rgba(9,23,38,.3) 100%)}
.hero .bg::before{content:'';position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(to top,var(--night),transparent);z-index:1}
.hero .in{position:relative;z-index:2;width:100%;padding-bottom:clamp(36px,5vw,64px);padding-top:clamp(40px,6vw,72px)}
.hero h1{max-width:13.5ch;font-size:clamp(2.7rem,7.4vw,6rem);line-height:.98}
.hero h1 .gold{color:var(--gold)}
.hero .sub{margin-top:22px;max-width:52ch;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--on-night-2)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* Filmstreifen */
.strip{background:var(--night);padding:0 0 clamp(30px,5vw,54px);position:relative;overflow:hidden;max-width:100vw}
.strip .rail{overflow:clip;width:100%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}.strip .rail.zieht{cursor:grabbing}.strip .track img{-webkit-user-drag:none;pointer-events:none}
.strip .track{display:flex;gap:14px;width:max-content;animation:slide 48s linear infinite;will-change:transform}
.strip .track img{width:clamp(210px,24vw,330px);aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--night-line);opacity:.82}
.strip:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.strip .track{animation:none}}
.strip .perf{display:flex;gap:14px;padding:14px 0;opacity:.35;overflow:clip}
.strip .perf i{width:26px;height:7px;border-radius:2px;background:var(--gold);flex:none}

/* Vergleich Foto / Video */
.compare{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--night);aspect-ratio:16/9;box-shadow:0 40px 80px -40px rgba(9,23,38,.55);touch-action:pan-y;cursor:ew-resize;user-select:none}
.compare>img,.compare>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-drag:none}
.compare .after{clip-path:inset(0 0 0 var(--x,50%))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--gold);z-index:3;pointer-events:none}
.compare .handle::after{content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;background:var(--gold);box-shadow:0 8px 26px rgba(0,0,0,.4)}
.compare .handle svg{position:absolute;top:50%;left:50%;translate:-50% -50%;width:26px;height:26px;stroke:var(--gold-ink);stroke-width:2;fill:none;z-index:1}
.compare .tag{position:absolute;bottom:16px;z-index:4;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(9,23,38,.72);color:#fff;padding:7px 13px;border-radius:99px;backdrop-filter:blur(6px)}
.compare .tag.l{left:16px}.compare .tag.r{right:16px;background:var(--gold);color:var(--gold-ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(30px,5vw,80px);align-items:center}
.split h2{font-size:clamp(1.9rem,3vw,2.8rem)}
.split.rev{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
@media(max-width:940px){.split,.split.rev{grid-template-columns:1fr}}

/* Ablauf */
.steps{display:flex;flex-direction:column;gap:clamp(48px,7vw,110px);margin-top:clamp(40px,6vw,80px)}
/* Der Text steht oben in zwei Spalten, die Aufnahme darunter über die volle Breite.
   Die Ausschnitte sind flach, daneben gestellt blieben sie zu klein zum Lesen. */
.step{display:block}
.step>div:first-child{max-width:64ch}
.step .shot{margin-top:clamp(24px,3vw,42px)}
.ergebnis{margin:clamp(24px,3vw,42px) 0 0}
.ergebnis .player{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--night);box-shadow:0 34px 70px -38px rgba(12,23,35,.55)}
.ergebnis video{width:100%;height:auto;display:block}
.ergebnis .play{position:absolute;inset:0;margin:auto;width:108px;height:108px;border:0;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 44px -14px rgba(0,0,0,.6);transition:transform .25s var(--ease),opacity .25s,visibility 0s}
.ergebnis .play svg{width:44px;height:44px;fill:currentColor}
.ergebnis .play:hover{transform:scale(1.07)}
.ergebnis .player::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(9,23,38,.45),transparent 55%);pointer-events:none;transition:opacity .3s}
.ergebnis .player.laeuft .play{opacity:0;visibility:hidden;transform:scale(.8)}
.ergebnis .player.laeuft::after{opacity:0}
.ergebnis .sound{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(9,23,38,.72);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .3s,background .2s}
.ergebnis .sound svg{width:20px;height:20px}
.ergebnis .player.laeuft .sound{opacity:1}
.ergebnis .sound:hover{background:var(--gold);color:var(--gold-ink)}
.ergebnis .sound[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
@media(max-width:620px){.ergebnis .play{width:68px;height:68px}.ergebnis .play svg{width:28px;height:28px}}
.ergebnis figcaption{margin-top:12px;font-size:.92rem;color:var(--ink-3);max-width:60ch}
.step .no{font-family:var(--display);font-weight:700;font-size:clamp(3.2rem,6vw,5rem);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--gold);margin-bottom:18px;display:block}
.night .step .no{-webkit-text-stroke-color:var(--gold)}
.step p{margin-top:14px;color:var(--ink-2);max-width:52ch}
.step h3{max-width:34ch}
.step .shot{position:relative}
.step .shot img{width:100%;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 34px 70px -38px rgba(12,23,35,.55);background:var(--paper)}
.step .shot::before{content:'';position:absolute;inset:-14px -14px auto auto;width:88px;height:88px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);opacity:.5;border-radius:0 var(--r) 0 0}
.step ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.step li{font-size:.98rem;color:var(--ink-2);padding:11px 0;border-top:1px solid var(--line);line-height:1.5}
.step li:last-child{padding-bottom:0}
@media(max-width:940px){.step{grid-template-columns:1fr}.step h3{max-width:none}}

/* Zahlen */
.bars{display:flex;flex-direction:column;gap:22px;margin-top:38px}
.bar-row .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;font-size:.95rem}
.bar-row b{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:-.02em}
.bar-row .track{height:12px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bar-row .track i{display:block;height:100%;border-radius:99px;background:var(--brand-2);transform:scaleX(var(--v,1));transform-origin:left;transition:transform 1.1s var(--ease)}
.bar-row.us .track i{background:linear-gradient(90deg,var(--gold),var(--gold-1))}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--night-line);border:1px solid var(--night-line);border-radius:var(--r);overflow:hidden;margin-top:clamp(36px,5vw,58px)}
.metrics div{background:var(--night);padding:22px 16px}
.metrics b{display:block;white-space:nowrap;font-family:var(--display);font-size:clamp(1.55rem,2.2vw,2.1rem);letter-spacing:-.03em;color:var(--gold)}
.metrics span{display:block;margin-top:4px;font-size:.85rem;line-height:1.4;color:var(--on-night-2)}
@media(max-width:620px){.metrics{grid-template-columns:1fr}}

/* Funktionsliste */
.feats{columns:2;column-gap:clamp(34px,5vw,80px);margin-top:clamp(30px,4vw,48px)}
.feats>div{break-inside:avoid;padding:22px 0;border-top:1px solid var(--line);transition:border-color .3s}
.feats>div:hover{border-top-color:var(--gold)}
.feats h3{font-family:var(--body);font-weight:600;font-size:1.06rem;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px}
.feats h3::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;translate:0 -2px}
.feats p{margin-top:7px;color:var(--ink-2);font-size:.97rem;max-width:44ch}
.night .feats>div{border-top-color:var(--night-line)}
@media(max-width:760px){.feats{columns:1}}

/* Bildstrecke mit echten Objekten */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(30px,4vw,52px)}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--mist);box-shadow:0 1px 0 rgba(12,23,35,.06)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease),filter .55s var(--ease);filter:saturate(.94)}
.gallery figure:hover img{transform:scale(1.04);filter:saturate(1.06)}
.gallery figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-size:.9rem;font-weight:500;z-index:1;text-shadow:0 1px 16px rgba(0,0,0,.85);translate:0 4px;opacity:.92;transition:translate .45s var(--ease),opacity .45s}
.gallery figure:hover figcaption{translate:0 0;opacity:1}
.gallery figure::after{content:'';position:absolute;inset:auto 0 0;height:52%;background:linear-gradient(to top,rgba(9,23,38,.72),transparent)}
.gallery .w3{grid-column:span 3;aspect-ratio:3/2}
.gallery .w2{grid-column:span 2;aspect-ratio:1/1}
@media(max-width:840px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery .w3,.gallery .w2,.gallery .w6{grid-column:span 1;aspect-ratio:4/3}}

/* Zitat / Aussage */

/* Portal-Sektion */
.portalcard{color:var(--on-night);background:linear-gradient(160deg,var(--deep),var(--night));border:1px solid var(--night-line);border-radius:var(--r-lg);padding:clamp(26px,3.5vw,44px);position:relative;overflow:hidden}
.portalcard::after{content:'';position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(200,164,90,.22),transparent 68%)}
.swatches{display:flex;gap:10px;margin-top:22px;position:relative;z-index:1}
.swatches i{width:40px;height:40px;border-radius:10px;border:1px solid var(--night-line)}
.portalcard ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.portalcard li{display:flex;gap:11px;align-items:flex-start;color:var(--on-night-2)}
.portalcard li svg{width:19px;height:19px;flex:none;margin-top:4px;color:var(--gold);stroke-width:2.2}

/* Preise */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px;margin-top:clamp(36px,5vw,56px);align-items:stretch}
.price{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px 30px;display:flex;flex-direction:column;position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.price:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(12,23,35,.4)}
.price.best{border-color:var(--gold);border-width:1.5px;box-shadow:0 30px 70px -38px rgba(29,58,95,.55)}
@media(min-width:900px){.price.best{transform:translateY(-14px)}}
.price .flag{position:absolute;top:-13px;left:28px;background:var(--brand);color:#fff;font-size:.76rem;font-weight:600;padding:5px 13px;border-radius:99px;letter-spacing:.02em}
.price h3{font-family:var(--display);font-size:1.35rem}
.price .amount{display:flex;align-items:baseline;gap:8px;margin:16px 0 4px}
.price .amount b{font-family:var(--display);font-size:clamp(2.2rem,3.6vw,2.8rem);letter-spacing:-.035em}
.price .amount span{color:var(--ink-3);font-size:.95rem}
.price .setup{font-size:.93rem;color:var(--ink-2);padding:12px 14px;background:var(--mist);border-radius:10px;margin:14px 0 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.price .setup s{color:var(--ink-3)}
.price .setup b{color:var(--ink);font-weight:600}
.price .setup .save{font-family:var(--mono);font-size:.76rem;background:var(--gold);color:var(--gold-ink);padding:3px 8px;border-radius:99px;font-weight:600}
.price ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.price li{display:flex;gap:10px;font-size:.96rem;color:var(--ink-2);align-items:flex-start}
.price li svg{width:18px;height:18px;margin-top:3px;flex:none;color:var(--gold);stroke-width:2.4}
.price .btn{width:100%}
/* Hinweis für Büros, denen keines der Pakete passt */
.passt{margin-top:clamp(26px,3vw,40px);padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r);background:var(--paper);display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.passt h3{font-family:var(--body);font-weight:600;font-size:1.12rem;letter-spacing:-.01em}
.passt p{margin-top:8px;color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:62ch}
.passt .btn{flex:none}
@media(max-width:620px){.passt .btn{width:100%}}
.note-line{margin-top:26px;font-size:.93rem;color:var(--ink-3);text-align:center}
.note-line a{display:inline-block;padding:6px 2px}
footer.site ul a{display:inline-block;padding:5px 0}
footer.site li{margin:0}

/* Sprachschalter. Die Sprache bestimmt auch die Währung, deshalb steht das Zeichen
   nur auf breiten Geräten dabei, auf schmalen wäre es zu eng. */
.langswitch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid currentColor;border-radius:999px;opacity:.75;flex:none}
.langswitch a{display:inline-flex;align-items:center;height:38px;padding:0 13px;border-radius:999px;font-size:.82rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;transition:background .2s,color .2s,opacity .2s}
header.top .langswitch a[aria-current]{background:var(--gold);color:var(--gold-ink)}
header.top:not(.solid).light .langswitch{border-color:var(--line);opacity:1}
@media(max-width:900px){
  /* Auf schmalen Geräten steht der Schalter neben dem Menüknopf, gleich hoch wie er,
     und zeigt nur die Sprache. */
  .top .acts .langswitch{display:inline-flex;height:44px;padding:2px;border-radius:12px}
  .top .acts .langswitch a{height:38px;padding:0 11px;border-radius:10px;font-size:.84rem}
  nav.main .mnav .langswitch{display:none}
}

/* Weg zur Lizenz: drei Schritte, die kein Formular sind */
.weg{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:0 clamp(34px,4vw,70px)}
.weg>div{padding:28px 0 6px;border-top:2px solid var(--gold)}
.weg h3{font-family:var(--body);font-weight:600;font-size:1.12rem;letter-spacing:-.012em;line-height:1.3}
.weg p{margin-top:10px;color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:42ch}

/* Fragen, die vor dem Kauf kommen. Offen lesbar, kein Aufklappen. */
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:0 clamp(38px,5vw,84px)}
.qa>div{padding:26px 0;border-top:1px solid var(--line)}
.qa h3{font-family:var(--body);font-weight:600;font-size:1.08rem;line-height:1.35;letter-spacing:-.011em;text-wrap:balance}
.qa p{margin-top:9px;color:var(--ink-2);font-size:1rem;line-height:1.62;max-width:46ch;text-wrap:pretty}
.qa .kern{color:var(--ink);font-weight:600;font-size:inherit}
@media(max-width:620px){.qa>div{padding:20px 0}}

/* Rechner */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,54px);align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.5vw,42px)}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.calc input[type=range]{width:100%;accent-color:var(--brand);height:30px}
.calc .big{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.035em;color:var(--brand)}
.calc .res{display:flex;flex-direction:column;gap:14px}
.calc .res .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.calc .res .row:last-child{border-bottom:0}

/* FAQ */
.faq{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:600;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:22px;height:22px;position:relative;margin-top:3px}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;background:var(--gold);inset:50% 0 auto;height:2px;transition:transform .3s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{padding:0 0 24px;color:var(--ink-2);max-width:74ch}

/* Abschluss-Band */
.cta-band{background:linear-gradient(140deg,var(--brand) 0%,var(--night) 62%);color:var(--on-night);border-radius:var(--r-lg);padding:clamp(34px,5vw,70px);display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::after{content:'';position:absolute;left:-60px;bottom:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(200,164,90,.2),transparent 70%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{max-width:22ch}

/* Formular */
form.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px)}
.f{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.f label{font-size:.9rem;font-weight:600;color:var(--ink-2)}
.f input,.f textarea,.f select{font:inherit;font-size:1rem;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.f textarea{min-height:130px;resize:vertical;line-height:1.5}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,58,95,.13)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.f2{grid-template-columns:1fr}}
.formnote{font-size:.9rem;color:var(--ink-3);margin-top:14px}
.hp{position:absolute;left:-9999px}
.msg{padding:14px 16px;border-radius:10px;font-size:.95rem;margin-bottom:18px}
.msg.ok{background:#e8f4ec;color:#15633c}
.msg.bad{background:#fdecea;color:#8c2118}

/* Anmeldeseite */
.auth{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.auth .side{background:var(--night);color:var(--on-night);padding:clamp(30px,4vw,60px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth .side video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.auth .side::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(9,23,38,.72),rgba(9,23,38,.95))}
.auth .side>*{position:relative;z-index:1}
.auth .form{display:grid;place-items:center;padding:clamp(30px,5vw,60px) var(--pad)}
.auth .box{width:min(420px,100%)}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth .side{display:none}}

/* Fußbereich */
footer.site{background:var(--night);color:var(--on-night-2);padding-top:clamp(50px,6vw,80px)}
footer.site .perf{display:flex;gap:14px;padding-bottom:36px;opacity:.3;overflow:clip}
footer.site .perf i{width:30px;height:7px;border-radius:2px;background:var(--gold);flex:none}
footer.site .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;padding-bottom:44px}
@media(max-width:840px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{font-family:var(--body);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-night);opacity:.55;margin-bottom:16px;font-weight:600}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:.96rem}
footer.site a:hover{color:var(--gold)}
footer.site .mark{color:var(--on-night);margin-bottom:14px}
footer.site .base{border-top:1px solid var(--night-line);padding:22px 0 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem}

/* Reveals: sichtbar per Default, erst mit JS versteckt */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv-img{opacity:0;transform:scale(1.03);clip-path:inset(0 0 12% 0)}
.js .rv-img.in{opacity:1;transform:none;clip-path:inset(0 0 0 0);transition:opacity .9s var(--ease),transform 1.1s var(--ease),clip-path 1.1s var(--ease)}
@media (prefers-reduced-motion:reduce){.js .rv-img{opacity:1;transform:none;clip-path:none}}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

@media(max-width:900px){
  /* Das Menue deckt den ganzen Bildschirm und faehrt geschlossen vollstaendig heraus.
     Frueher begann es erst unter der Kopfzeile, wodurch sein Rand im geschlossenen Zustand
     Logo und Menueknopf verdeckte. Logo und Knopf liegen jetzt darueber. */
  nav.main{position:fixed;inset:0;flex-direction:column;background:var(--night);padding:calc(var(--navtop,72px) + 12px) var(--pad) 28px;gap:0;transform:translateY(-101%);transition:transform .38s var(--ease);color:var(--on-night);overflow:auto;justify-content:flex-start}
  nav.main.open{transform:none}
  header.top .bar>a:first-child,.top .acts{position:relative;z-index:2}
  /* Kein Weichzeichner auf schmalen Geraeten: er macht die Kopfzeile zum Bezugsrahmen,
     worauf das feststehende Menue auf Kopfzeilenhoehe zusammenfaellt. */
  header.top.solid{backdrop-filter:none;background:rgba(9,23,38,.98)}
  nav.main a{padding:16px 0;border-bottom:1px solid var(--night-line);font-size:1.06rem;opacity:1}
  nav.main a::after{display:none}
  nav.main a:not(:last-child)::before{display:none}
  nav.main .mnav{display:flex;gap:10px;padding-top:18px}
  nav.main .mnav .btn{flex:1}
  .burger{display:flex}
  /* Das Menü liegt fest im Bild und nimmt keinen Platz mehr ein, deshalb muss die
     Knopfgruppe selbst nach rechts rücken. Sonst klebt sie am Logo. */
  .top .acts{margin-left:auto}
  .top .acts .btn{display:none}
  header.top .bar{height:72px}
  header.top.solid .bar{height:64px}
  .hero{min-height:auto;padding-top:72px}
  .hero .in{padding-top:clamp(70px,22vw,120px);padding-bottom:clamp(36px,9vw,56px)}
  .hero h1{font-size:clamp(2.35rem,10.5vw,3.3rem)}
  .hero .sub{margin-top:18px;font-size:1.02rem}
  .hero .cta{margin-top:26px;gap:10px}
  .hero .cta .btn{width:100%}
  .split,.split.rev,.step,.two,.calc,.guide{grid-template-columns:1fr}
  .shead{grid-template-columns:1fr;align-items:start;gap:14px}
  .step .no{font-size:2.9rem;margin-bottom:10px}
  .step .shot::before{display:none}
  .cta-band{flex-direction:column;align-items:flex-start}
  .cta-band .btn{width:100%}
  .compare .tag{font-size:.66rem;padding:5px 9px;bottom:10px}
  .compare .tag.l{left:10px}.compare .tag.r{right:10px}
  .compare .handle::after{width:44px;height:44px}
  footer.site .cols{gap:28px}
}
@media(max-width:560px){
  .prices{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .price .amount b{font-size:2.1rem}
}
@media(prefers-reduced-motion:reduce){.js .rv,.js .rv-img{opacity:1;transform:none;clip-path:none}}