/* Sunfield Glamour – reines Design-Overlay für Codunaro. Ändert keine Inhalte. Keine Fonts/CDNs. */
:root{
  --sg-ink:#10181d; --sg-slate:#272F35; --sg-mint:#BAE3D6;
  --sg-teal:#0B7A73; --sg-teal-2:#12B3A4; --sg-brass:#B8924A; --sg-brass-2:#E6C98A;
  --sg-glass:rgba(255,255,255,.62); --sg-glass-line:rgba(255,255,255,.7);
  --sg-shadow:0 1px 2px rgba(16,24,29,.06),0 10px 28px -10px rgba(16,24,29,.22),0 28px 60px -28px rgba(11,122,115,.28);
  --sg-shadow-up:0 2px 4px rgba(16,24,29,.08),0 22px 44px -14px rgba(16,24,29,.30),0 40px 80px -30px rgba(11,122,115,.38);
  --sg-ease:cubic-bezier(.22,.8,.24,1);
}
html{scroll-behavior:smooth}
body{
  background-image:
    radial-gradient(900px 520px at 88% -6%,rgba(18,179,164,.16),transparent 62%),
    radial-gradient(700px 480px at -8% 18%,rgba(184,146,74,.12),transparent 60%),
    url('/brand/texture.svg');
  background-attachment:fixed;
}
::selection{background:var(--sg-teal);color:#fff}

/* Kopfleiste aus Glas */
.top,.legal-header{backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.top{background:rgba(247,251,249,.78)!important;border-bottom:1px solid rgba(39,47,53,.10);box-shadow:0 8px 30px -18px rgba(16,24,29,.35);position:sticky}
.top:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--sg-brass),var(--sg-teal-2),transparent);opacity:.55}
.navlinks a{position:relative;padding:6px 2px}
.navlinks a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--sg-teal-2),var(--sg-brass));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sg-ease)}
.navlinks a:hover:after,.navlinks a:focus-visible:after{transform:scaleX(1)}
.brand{transition:transform .35s var(--sg-ease)}
.brand:hover{transform:translateY(-1px)}

/* Überschriften */
h1:not(.hero h1){background:linear-gradient(120deg,#10181d 0%,#27424a 55%,#0B7A73 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.legal-hero h1{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
.eyebrow:not(.hero .eyebrow),.legal-label{background:linear-gradient(90deg,var(--sg-teal),var(--sg-brass));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:800}
.legal-label{background:none!important;-webkit-text-fill-color:var(--sg-brass-2)!important;color:var(--sg-brass-2)!important}
em{color:var(--sg-teal)}

/* Hero: dunkle Bühne bleibt, nur sanfte Tiefe */
.hero .split{perspective:1400px}
.hero{box-shadow:0 30px 60px -30px rgba(16,24,29,.6)}
.hero .btn:not(.ghost){background-image:linear-gradient(135deg,#5AD9C5 0%,#BAE3D6 100%)!important;color:#10181d!important;border-color:transparent}
.hero .btn:not(.ghost):hover{box-shadow:0 18px 34px -12px rgba(90,217,197,.7),0 0 0 3px rgba(230,201,138,.5)!important}
.hero .btn.ghost{background:rgba(34,39,51,.8);color:#fff9ef;border:1px solid rgba(255,249,239,.4)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff9ef;box-shadow:0 14px 26px -12px rgba(0,0,0,.6)}

/* Karten: Glas + Tiefe + Hover-Anhebung */
.legal-card,.clarity-choice,.stripe-karte,.tier,.bausteine>li,.card,.window,.scope-result,.tool-pick,.faq details,details{
  background-color:var(--sg-glass);
  border:1px solid var(--sg-glass-line);
  box-shadow:var(--sg-shadow);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .45s var(--sg-ease),box-shadow .45s var(--sg-ease),border-color .3s;
  position:relative;
}
.legal-card,.tier,.bausteine>li,.stripe-karte,.card,.window,.scope-result{border-radius:18px}
.clarity-choice{border-radius:16px;overflow:hidden}
.clarity-choice:before,.tier:before,.bausteine>li:before,.stripe-karte:before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;border-radius:inherit;
  background:linear-gradient(90deg,var(--sg-teal-2),var(--sg-brass));opacity:0;transition:opacity .35s}
.clarity-choice:hover,.tier:hover,.bausteine>li:hover,.stripe-karte:hover,.card:hover,.tool-pick:hover{
  transform:translateY(-6px) rotateX(2deg);box-shadow:var(--sg-shadow-up);border-color:rgba(11,122,115,.35)}
.clarity-choice:hover:before,.tier:hover:before,.bausteine>li:hover:before,.stripe-karte:hover:before{opacity:1}
.clarity-choice:hover .clarity-arrow{transform:translateX(6px)}
.clarity-arrow{transition:transform .35s var(--sg-ease);color:var(--sg-teal)}
.legal-card:hover{box-shadow:var(--sg-shadow-up)}
.window{transform:perspective(1400px) rotateY(-5deg) rotateX(3deg);transform-style:preserve-3d;box-shadow:0 40px 80px -30px rgba(16,24,29,.45),0 0 0 1px rgba(255,255,255,.6) inset;overflow:hidden}
.window:hover{transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-4px)}
.windowbar{background:linear-gradient(180deg,#2f3a41,#1b2227)!important;color:#d7efe8!important}
.windowbar i{box-shadow:0 0 6px currentColor}
.stepflow article{border-top:0;position:relative;padding:26px 24px;border-radius:18px;background:var(--sg-glass);box-shadow:var(--sg-shadow);transition:transform .45s var(--sg-ease),box-shadow .45s var(--sg-ease)}
.stepflow article:before{content:'';position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--sg-teal-2),var(--sg-brass))}
.stepflow article:hover{transform:translateY(-5px);box-shadow:var(--sg-shadow-up)}
.stepflow span{font-weight:800;color:var(--sg-brass)}
details{border-radius:14px;margin:10px 0;padding:2px 18px}
details[open]{box-shadow:var(--sg-shadow-up)}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center}

/* Preise */
.price,.stripe-betrag,.preis{background:linear-gradient(120deg,#10181d,var(--sg-teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Knöpfe: Verlauf, Glanz, Anhebung (Ziele und Texte unverändert) */
.btn,.legal-button,.stripe-knopf{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--sg-ease),box-shadow .3s var(--sg-ease),background-position .5s var(--sg-ease),border-color .3s;
}
.btn:not(.ghost):not(.hero .btn),.legal-button:not(.secondary),.stripe-knopf{
  background-image:linear-gradient(135deg,#1b2a31 0%,#0B7A73 100%);background-size:160% 100%;background-position:0 0;
  color:#fff;border-color:rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 22px -10px rgba(11,122,115,.7);
}
.btn:not(.ghost):hover,.legal-button:not(.secondary):hover,.stripe-knopf:hover{
  background-position:100% 0;transform:translateY(-3px) scale(1.015);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 32px -12px rgba(11,122,115,.8),0 0 0 3px rgba(230,201,138,.35);
}
.btn:before,.legal-button:before,.stripe-knopf:before{
  content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .7s var(--sg-ease)}
.btn:hover:before,.legal-button:hover:before,.stripe-knopf:hover:before{left:130%}
.btn.ghost,.legal-button.secondary{background:rgba(255,255,255,.55);border:1px solid rgba(11,122,115,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn.ghost:hover,.legal-button.secondary:hover{transform:translateY(-3px);border-color:var(--sg-teal);box-shadow:0 14px 26px -12px rgba(11,122,115,.5)}
.btn:active,.legal-button:active,.stripe-knopf:active{transform:translateY(0) scale(.99)}
.legal-hero .legal-button{background:#fff;color:var(--sg-ink);background-image:none}
.legal-hero .legal-button.secondary{background:transparent;color:#fff}

/* Rechtsseiten-Kopf */
.legal-hero{background:linear-gradient(135deg,#10181d 0%,#223a40 60%,#0B7A73 130%);box-shadow:var(--sg-shadow-up);border:1px solid rgba(255,255,255,.08)}
.legal-hero:after{border-color:rgba(230,201,138,.35);animation:sg-float 12s ease-in-out infinite alternate}
.legal-nav a{transition:background .25s,transform .25s var(--sg-ease)}
.legal-nav a:hover{transform:translateX(4px);background:rgba(186,227,214,.45)}

/* Formulare */
input,select,textarea{transition:box-shadow .25s,border-color .25s}
input:focus,select:focus,textarea:focus{border-color:var(--sg-teal)!important;box-shadow:0 0 0 4px rgba(18,179,164,.22)}

/* Fokus gut sichtbar */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--sg-brass)!important;outline-offset:4px;box-shadow:0 0 0 6px rgba(16,24,29,.85)}

/* Fußzeile */
.site-footer{background:linear-gradient(180deg,transparent,rgba(39,47,53,.06))}

/* Einblend-Animation (JS setzt .sg-in) */
.sg-js .sg-reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s var(--sg-ease),transform .8s var(--sg-ease)}
.sg-js .sg-reveal.sg-in{opacity:1;transform:none}
@keyframes sg-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-30px,24px,0) scale(1.08)}}
@keyframes sg-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .reveal>*{animation:sg-rise .9s var(--sg-ease) both}
.hero .reveal>*:nth-child(2){animation-delay:.08s}.hero .reveal>*:nth-child(3){animation-delay:.16s}.hero .reveal>*:nth-child(4){animation-delay:.24s}.hero .reveal>*:nth-child(5){animation-delay:.32s}

/* Handy */
@media (max-width:760px){
  .window{transform:none}
  .clarity-choice:hover,.tier:hover,.bausteine>li:hover,.stripe-karte:hover{transform:none}
    body{background-attachment:scroll}
  .btn,.legal-button,.stripe-knopf{min-height:48px}
  .legal-card{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sg-js .sg-reveal{opacity:1;transform:none}
  .window{transform:none}
  .btn:hover,.legal-button:hover,.stripe-knopf:hover,.clarity-choice:hover,.tier:hover,.stripe-karte:hover{transform:none}
}
@media (forced-colors:active){.btn,.legal-button,.stripe-knopf{border:2px solid ButtonText}h1,.price,.eyebrow{-webkit-text-fill-color:CanvasText;color:CanvasText}}
@media print{body{background:#fff}.top{position:static}h1,.price,.eyebrow{-webkit-text-fill-color:#000;color:#000}}
/* Auf-/Zuklapp-Zeichen, da das Standard-Dreieck durch flex entfällt */
summary{list-style:none;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(11,122,115,.12);color:var(--sg-teal);font-weight:700;transition:transform .3s var(--sg-ease)}
details[open]>summary:after{content:'–';transform:rotate(180deg)}