/* Sunfield Glamour – reines Design, keine Inhalte/Funktionen. Nach studio.css laden. */
:root{--sun:#e0b45f;--sun-d:#9a7230;--deep:#17211f;--ease:cubic-bezier(.22,.8,.24,1);--glass:rgba(255,253,248,.72);--shadow-s:0 2px 4px #1f2a2412,0 10px 24px -12px #1f2a2433;--shadow-l:0 2px 6px #1f2a2412,0 30px 60px -28px #1f2a245c}
body{background:radial-gradient(1100px 520px at 85% -80px,#f4dfae88,transparent 70%),radial-gradient(900px 500px at -10% 18%,#e9eedc88,transparent 70%),var(--cream);background-attachment:fixed}
.topbar{z-index:15;background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #dcd3bd;box-shadow:0 8px 30px -22px #1f2a2455}
.nav{min-height:76px}
.brand img{transition:transform .6s var(--ease)}.brand:hover img{transform:rotate(90deg) scale(1.06)}
.nav nav a{transition:color .25s}.nav nav a:after{content:'';position:absolute;left:0;bottom:-8px;width:100%;height:2px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}.nav nav a:hover:after,.nav nav a:focus-visible:after{transform:scaleX(1)}.nav nav a[aria-current=page]:after{width:100%;transform:scaleX(1);bottom:-8px}
@media(min-width:761px){.topbar{position:sticky;top:0}}
/* Knöpfe */
.button{position:relative;overflow:hidden;isolation:isolate;border-radius:999px;padding:12px 28px;box-shadow:0 10px 22px -12px #17211f99;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s}
.button:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.button:hover{transform:translateY(-3px);box-shadow:0 18px 30px -14px #17211fbb}.button:hover:before{transform:translateX(120%)}.button:active{transform:translateY(0) scale(.98)}
.button.light:hover{background:#fff}.button.secondary{backdrop-filter:blur(6px);background:#ffffff66}.button.secondary:hover{background:#fff;border-color:var(--sun-d)}
.text-link,.text-button{transition:border-color .25s,gap .35s var(--ease),color .25s}.text-link:hover,.text-button:hover{border-color:var(--sun-d);gap:24px;color:var(--sun-d)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #8a6420;outline-offset:4px;box-shadow:0 0 0 6px #fffdf8}
/* Hero */
.hero{perspective:1400px}
.hero h1{background:linear-gradient(180deg,#17211f 40%,#3b4a44);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 em{background:linear-gradient(100deg,#8a6420,#e0b45f 35%,#8a6420 60%,#c79a45);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 7s ease-in-out infinite alternate}
.eyebrow{color:#7a5f2b}
.art-window{border-radius:14px;border-color:#e3dcc8;box-shadow:var(--shadow-l),0 0 0 8px #ffffff55;transform:rotateY(-10deg) rotateX(5deg) rotate(-2deg);transform-style:preserve-3d;transition:transform .8s var(--ease),box-shadow .8s var(--ease);animation:float 9s ease-in-out infinite}
.hero-art:hover .art-window{transform:rotateY(0) rotateX(0) rotate(0) translateY(-6px);animation-play-state:paused}
.hero-art:before{content:'';position:absolute;inset:8% -6% -4% 10%;background:radial-gradient(closest-side,#f0cf82aa,transparent);filter:blur(30px);z-index:-1;animation:glow 8s ease-in-out infinite alternate}
.hero>*{animation:rise .9s var(--ease) both}.hero>*:nth-child(2){animation-delay:.15s}
/* Karten */
.start-card,.price-card,.step,.proof,.drafts>*,.digital-start-card,.price-block,.trust-grid>*,.start-grid>*,.proof-grid>*,.limits-grid>*{border-radius:14px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s,background .3s}
.start-card,.price-card,.step{box-shadow:var(--shadow-s);background-image:linear-gradient(160deg,#ffffffcc,#fffdf800 60%)}
.start-card:hover,.price-card:hover,.step:hover{transform:translateY(-8px) perspective(900px) rotateX(2deg);box-shadow:var(--shadow-l);border-color:#d6b878}
.price-card-featured{box-shadow:var(--shadow-l),0 0 0 2px #e0b45f66}
.number{color:var(--sun-d)}
.quote-band,.digital-start,.digital-start-offer{border-radius:18px;box-shadow:var(--shadow-l)}
.quote-band{background-image:radial-gradient(600px 240px at 90% 0,#e0b45f33,transparent 70%)}
.sample-window,.brief-paper{border-radius:14px;box-shadow:var(--shadow-l);transition:transform .6s var(--ease)}
.sample-window:hover{transform:translateY(-6px)}
.field input,.field select,.field textarea,input,select,textarea{border-radius:10px;transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{border-color:var(--sun-d);box-shadow:0 0 0 4px #e0b45f44}
.faq details{transition:background .3s}.faq details:hover{background:#ffffff88}
.footer{background-image:linear-gradient(180deg,transparent,#e0b45f14)}
/* Stripe-Karten: nur Optik */
.stripe-zahlung{border-radius:18px;background:linear-gradient(160deg,#ffffffcc,#f6f1e2cc);box-shadow:var(--shadow-l);border-color:#e0d6bd}
.stripe-karte{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}.stripe-karte:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
/* Einblenden beim Scrollen (nur wo der Browser es kann; Inhalt bleibt sonst sichtbar) */
@supports (animation-timeline:view()){.section-head,.start-card,.price-card,.step,.proof,.sample-window,.stripe-karte{animation:rise both linear;animation-timeline:view();animation-range:entry 0% cover 28%}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes float{50%{translate:0 -10px}}
@keyframes glow{to{opacity:.55;transform:scale(1.08)}}
@keyframes sheen{to{background-position:100% 0}}
@media(max-width:760px){.nav{min-height:64px;gap:14px}.art-window{transform:rotate(-2deg);animation:none}.button{min-height:50px}.start-card:hover,.price-card:hover,.step:hover{transform:none}.hero h1{letter-spacing:-2px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.art-window{transform:rotate(-2deg)}.button:hover,.start-card:hover,.price-card:hover,.step:hover,.stripe-karte:hover{transform:none}}
@media(prefers-contrast:more){.hero h1,.hero h1 em{-webkit-text-fill-color:currentColor;background:none}}