/* Fantasyterrain.de – Design-Upgrade. Nach style.css einbinden. Überschreibt nur Optik, keine IDs/Funktion. */
:root{--bk:#0d0d0d;--mute:#a29e97;--soft:#b9b5ae}
body{background:var(--bk);color:#fff}
a{color:var(--orange)}a:hover{color:var(--yellow)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.btn{min-height:44px}
.section,.section.cream{background:var(--bk);color:#fff}
.section-title{color:#fff}.section-sub{color:var(--silver)}
.hidden{display:none!important}

/* Header + WhatsApp-CTA */
.hdr-cta{padding:10px 20px;font-size:14px;white-space:nowrap;flex:none}
.nav a.nav-cta{display:none}
@media(max-width:1000px){.hdr-cta{display:none}.nav a.nav-cta{display:block;color:var(--orange);font-weight:700}}
.burger{min-width:44px;min-height:44px}

/* Hero */
.hero{--hh:min(903px,max(600px,calc(56.25vw + 110px)));background:var(--bk);overflow:hidden;min-height:var(--hh);align-items:flex-start;padding:clamp(60px,12vh,140px) 0 240px}
.hero-bg{position:absolute;top:0;right:0;width:min(100%,calc(var(--hh) * 1.7778));height:100%;object-fit:cover;object-position:right top;transition:opacity 1.8s ease;opacity:0;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0,#000 28%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero-bg.on{opacity:1}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.7) 38%,rgba(13,13,13,0) 62%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(13,13,13,0),var(--bk));pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero-grid{grid-template-columns:1fr}
.hero p{color:#f1ebe0}
.hero-dots{position:absolute;left:0;right:0;bottom:40px;z-index:2;display:flex;justify-content:center;gap:4px}
.hero-dots button{width:44px;height:44px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hero-dots button::before{content:"";width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transition:.15s}
.hero-dots button.on::before{background:var(--orange)}
@media(max-width:800px){.hero{min-height:0;padding:240px 0 80px}.hero-bg{left:0;right:auto;width:100%;height:320px;object-fit:contain;object-position:center top;-webkit-mask-image:none;mask-image:none}.hero-scrim{background:linear-gradient(180deg,rgba(13,13,13,.1) 0,rgba(13,13,13,.6) 40%,rgba(13,13,13,.95) 100%)}}

/* Rechner dunkel */
#rechner{margin-top:-1px;padding:24px 0 40px;background:linear-gradient(180deg,var(--bk) 0,rgba(13,13,13,0) 160px,rgba(13,13,13,0) calc(100% - 160px),var(--bk) 100%),radial-gradient(ellipse at 90% 18%,rgba(242,106,27,.22),transparent 55%),radial-gradient(ellipse at 0% 80%,rgba(214,43,26,.16),transparent 50%),repeating-linear-gradient(0deg,rgba(242,106,27,.05) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(242,106,27,.05) 0 1px,transparent 1px 40px),var(--bk)}
#rechner .panel{background:rgba(20,20,20,.92);border-color:#2a2a2a;box-shadow:0 0 0 1px rgba(242,106,27,.06),0 30px 70px -35px rgba(242,106,27,.55)}
#dropzone{background:repeating-linear-gradient(0deg,rgba(242,106,27,.07) 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,rgba(242,106,27,.07) 0 1px,transparent 1px 20px),#101010;border-color:rgba(242,106,27,.45);color:#a9a6a1}
#dropzone strong{color:#fff}
#dropzone:hover,#dropzone.drag{background-color:#1a110b;border-color:var(--orange)}
#rechner label{color:#b3afa8}
#rechner .viewer-note,#rechner .material-hint,#rechner .empty-note,#rechner .total-note,#rechner .cta-note,#rechner .disclaimer,#rechner .file-row{color:var(--mute)}
#rechner .disclaimer strong{color:#fff}
#rechner select,#rechner input[type=number],#rechner input[type=text]{background:#111;border-color:#353535;color:#fff}
#rechner .stat,#rechner .checkline{background:#1b1b1b}
#rechner .stat .k,#rechner .cl-text{color:var(--mute)}#rechner .stat .v,#rechner .cl-text b{color:#fff}
#rechner .breakdown{border-top-color:#2a2a2a}
#rechner .b-line{color:#b3afa8}#rechner .b-line b{color:#fff}
#rechner .swatch{border-color:#4a4a4a}#rechner .swatch.active{border-color:var(--orange)}
#rechner .swatch.custom{background:#111;color:#b3afa8}
#rechner .sample-btn{background:transparent;color:#fff;border-color:#4a4a4a}
#rechner .sample-btn:hover{background:#fff;color:var(--bk);border-color:#fff}
#rechner .total{background:linear-gradient(100deg,#1d0f07,#2b1206 60%,#3a1606);border:1px solid rgba(242,106,27,.55);box-shadow:0 0 34px -10px rgba(242,106,27,.7)}
#rechner .total .amt{text-shadow:0 0 18px rgba(255,194,26,.55)}
#rechner .file-row button{min-height:44px}

/* So läuft's – Scroll-Animation */
.morph{position:relative;height:300vh;background:var(--bk);color:#fff}
.morph .stick{position:sticky;top:76px;height:calc(100vh - 76px);overflow:hidden}
.morph .stage{position:absolute;inset:0}
.morph .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;transition:opacity .25s linear;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 58%,transparent 96%),linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 58%,transparent 96%),linear-gradient(90deg,transparent 0,#000 14%);-webkit-mask-composite:source-in;mask-composite:intersect}
.morph .stage img.m-real{opacity:.35}
.morph .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.6) 30%,rgba(13,13,13,0) 55%)}
.morph .copy{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 20px;height:100%;display:flex;flex-direction:column;justify-content:center}
.morph .copy>*{max-width:440px}
.morph h2{font-size:clamp(28px,4.4vw,48px);text-transform:uppercase}
.morph .copy p{color:var(--silver);margin:10px 0 0}
.morph ol{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px}
.morph li{display:flex;gap:14px;align-items:center;opacity:.35;transition:opacity .3s;font-size:18px}
.morph li.on{opacity:1}
.morph li b{flex:none;width:38px;height:38px;border-radius:50%;background:#2a2a2a;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .3s}
.morph li.on b{background:var(--yellow);color:#121212}
@media(max-width:800px){.morph li{font-size:15px}.morph .stage img{object-position:72% center}.morph .scrim{background:linear-gradient(180deg,rgba(13,13,13,.2) 0%,rgba(13,13,13,.55) 45%,rgba(13,13,13,.95) 100%)}.morph .copy{justify-content:flex-end;padding-bottom:40px}}

/* Nebel-Hintergrund über Vorteile + Leistungen */
.fluxwrap{position:relative;isolation:isolate;margin-top:-45vh;padding-top:45vh;pointer-events:none;z-index:2}
.fluxwrap>*{pointer-events:auto}
.fluxwrap::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg,rgba(13,13,13,0) 0,rgba(13,13,13,.5) 18vh,var(--bk) 42vh,var(--bk) 100%);z-index:-2}
.flux{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;filter:blur(2px);-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.25) 22vh,rgba(0,0,0,.7) 48vh,#000 70vh,#000 calc(100% - 14%),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.25) 22vh,rgba(0,0,0,.7) 48vh,#000 70vh,#000 calc(100% - 14%),transparent 100%)}
.fluxwrap .usp{border-top:0;background:transparent;padding:64px 0}
.fluxwrap .section{background:transparent}

/* Leistungen – Bento */
.bento{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:270px}
.bento .b-big{grid-column:span 2;grid-row:span 2}.bento .b-wide{grid-column:span 2}
.bcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:12px;overflow:hidden;background:rgba(10,10,10,.75);border:1px solid #262626;text-decoration:none;color:#fff;transition:box-shadow .25s,border-color .25s,transform .25s}
.bcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bcard.b-wide img{left:auto;right:0;width:auto;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%);mask-image:linear-gradient(90deg,transparent 0,#000 35%)}
.bcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.85) 100%)}
.bcard:hover img{transform:scale(1.04)}
.bcard:hover,.bcard:focus-visible{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 18px 50px -12px var(--acc);transform:translateY(-2px);color:#fff}
.bcard .dot{position:absolute;top:14px;left:14px;z-index:1;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.bcard .tx{position:relative;z-index:1;padding:16px 18px}
.bcard h3{margin:0 0 4px;font-size:16px;text-transform:uppercase}
.bcard p{display:none;margin:0 0 8px;font-size:14px;color:#e2ddd5;line-height:1.5}
.bcard.b-big p,.bcard.b-wide p{display:block}
.bcard .go{display:inline-block;padding:12px 0 0;min-height:44px;box-sizing:border-box;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
@media(max-width:800px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:240px}.bento .b-big{grid-column:1/-1}}
@media(max-width:520px){.bento{grid-template-columns:1fr}.bento>*{grid-column:auto!important;grid-row:auto!important}}
.steps-wrap{margin-top:24px}
.chips b,.chips i{background:transparent;border-color:var(--orange);color:var(--orange)}

/* Über mich / FAQ / Kontakt dunkel */
.seo{max-width:720px;margin:0 auto 44px}
.seo h3{font-size:20px;margin:28px 0 8px;color:#fff}.seo h3:first-child{margin-top:0}
.seo p{margin:0;color:var(--soft);line-height:1.7}
.seo a{font-weight:500}
.cat{background:#141414;border-color:#2a2a2a}.cat h3{color:#fff}.cat p{color:var(--soft)}
.cat a{display:inline-block;padding:12px 6px;min-height:44px;box-sizing:border-box}
#faq{background:linear-gradient(180deg,var(--bk) 0,#121212 50%,var(--bk) 100%)}
details{border-bottom-color:#2a2a2a}summary{color:#fff;min-height:44px;align-items:center}details p{color:var(--soft)}
#kontakt{padding-bottom:30px}
.contact-grid h4{color:var(--orange)}.contact-grid p{color:#e2ded7}
.contact-grid p a{display:inline-block;padding:11px 0;min-height:44px;box-sizing:border-box}
#kontakt label{color:#b3afa8}
#kontakt input,#kontakt textarea{background:#111;border-color:#353535;color:#fff}

/* Terrain-Beratung */
.brand-split{padding-top:40px;border-top:0;border-image:none}
.terr{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px;align-items:center;margin-top:8px}
.terr .stage{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 80px -30px var(--acc,#ffc21a);transition:box-shadow .6s}
.terr .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.terr .stage img.on{opacity:1}
.terr .lbl{position:absolute;left:16px;bottom:14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(13,13,13,.72);padding:5px 12px;border-radius:6px;border-left:3px solid var(--acc,#ffc21a)}
.terr .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.terr .tabs button{font:inherit;font-size:13px;color:#d3cfc8;background:transparent;border:1px solid #333;border-radius:20px;padding:8px 14px;min-height:44px;cursor:pointer;transition:.15s}
.terr .tabs button:hover{border-color:var(--acc);color:#fff}
.terr .tabs button.on{color:#fff;border-color:var(--acc);box-shadow:0 0 14px -2px var(--acc);background:rgba(255,255,255,.05)}
.terr h3{font-size:20px;margin:0 0 14px;text-transform:uppercase}
.terr ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.terr li{position:relative;padding-left:26px;color:#d3cfc8;line-height:1.5}
.terr li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
@media(max-width:900px){.terr{grid-template-columns:1fr}}
footer{background:var(--bk)}footer a{min-height:44px}

/* WhatsApp-Button */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;height:56px;min-width:56px;padding:0 15px;border-radius:30px;background:var(--orange);color:#fff;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 28px -4px rgba(242,106,27,.7),0 0 0 1px rgba(255,255,255,.12);transition:background .15s,transform .15s;animation:waPulse 3.2s ease-in-out 2s 3}
.wa:hover,.wa:focus-visible{background:var(--orange-d);color:#fff;transform:translateY(-2px)}
.wa svg{flex:none}.wa span{margin-left:10px;pointer-events:none}
@media(max-width:800px){.wa span{display:none}.wa{right:14px;bottom:14px}}
@keyframes waPulse{0%,100%{box-shadow:0 8px 28px -4px rgba(242,106,27,.7),0 0 0 0 rgba(242,106,27,.55)}50%{box-shadow:0 8px 28px -4px rgba(242,106,27,.7),0 0 0 14px rgba(242,106,27,0)}}
@media(prefers-reduced-motion:reduce){.wa{animation:none}.bcard,.bcard img,.terr .stage img{transition:none}}