/* happiness-consultants – Effekte + moderne Buttons (v8). Wird NACH dem Seitenstil geladen.
   Regel (Anton, 17.10.2026): keine schwarzen Buttons. Alle Bewegungen aus bei "weniger Bewegung". */
:root{
  --grad-haupt:linear-gradient(120deg,#D3106E 0%,#E6177A 35%,#FF5A6E 70%,#FF8A3D 100%);
  --grad-gelb:linear-gradient(120deg,#FFD23F 0%,#FFB238 55%,#FF9F43 100%);
  --grad-rand:linear-gradient(120deg,#E6177A,#6B35D6 55%,#FF8A3D);
}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;border:0;
  background:var(--grad-haupt);background-size:200% 100%;background-position:0 0;color:#fff;
  box-shadow:0 12px 26px -12px rgba(230,23,122,.75),inset 0 1px 0 rgba(255,255,255,.35);
  transform:translate(var(--bx,0px),var(--by,0px));
  transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s,background-position .6s,color .2s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.btn::after{content:"→";display:inline-block;font-weight:700;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.btn:hover{background-position:100% 0;transform:translate(var(--bx,0px),calc(var(--by,0px) - 3px));
  box-shadow:0 18px 34px -14px rgba(230,23,122,.85),inset 0 1px 0 rgba(255,255,255,.4)}
.btn:hover::before{transform:translateX(130%)}
.btn:hover::after{transform:translateX(5px)}
.btn:active{transform:translate(var(--bx,0px),var(--by,0px)) scale(.97);box-shadow:0 6px 14px -8px rgba(230,23,122,.8)}
.btn--gelb{background:var(--grad-gelb);background-size:200% 100%;color:#3A1240;box-shadow:0 12px 26px -12px rgba(255,159,67,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--gelb:hover{box-shadow:0 18px 34px -14px rgba(255,159,67,.95),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--weiss{color:#B80D5E;border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad-rand) border-box;
  box-shadow:0 12px 26px -16px rgba(107,53,214,.55)}
.btn--weiss:hover{background:linear-gradient(#FFF1F7,#FFF1F7) padding-box,var(--grad-rand) border-box;box-shadow:0 18px 34px -16px rgba(107,53,214,.6)}
.diskret .btn{box-shadow:0 14px 34px -12px rgba(230,23,122,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.diskret .btn--weiss{box-shadow:0 14px 34px -16px rgba(255,211,230,.6)}
/* Klick-Welle */
.welle-klick{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;transform:scale(0);animation:welle .6s ease-out forwards;z-index:0}
@keyframes welle{to{transform:scale(1);opacity:0}}

/* Stimmungs-Check: Glas-Buttons */
.wahl button{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);position:relative;overflow:hidden;transition:background .25s,color .25s,transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.wahl button:hover{transform:translateY(-2px)}
.wahl button[aria-pressed="true"]{background:#fff;color:#5223B0;border-color:#fff;box-shadow:0 10px 26px -10px rgba(255,255,255,.8)}
.tipp a{display:inline-flex;gap:6px;text-decoration:none;background:var(--grad-haupt);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* Etiketten (Pillen) nicht mehr schwarz */
.pille{background:linear-gradient(120deg,#6B35D6,#B80D5E)}

/* Sprachwahl, Anmelden */
.sprache summary{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad-rand) border-box}
.sprache ul{border:0;box-shadow:0 24px 50px -20px rgba(107,53,214,.45),0 0 0 1px rgba(107,53,214,.12)}
.sprache li a[aria-current]{background:var(--grad-gelb)}

/* ---------- Kopf, Fortschritt ---------- */
.fortschritt{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-rand);z-index:60;pointer-events:none}
header{transition:box-shadow .3s,background .3s}
header.klein{box-shadow:0 10px 30px -18px rgba(43,15,46,.45)}

/* ---------- Hero ---------- */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(3deg);animation:wortRein .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
@keyframes wortRein{to{opacity:1;transform:none}}
.hero h1 .unter{background-size:0 100%;background-repeat:no-repeat;animation:marker 1s .9s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes marker{to{background-size:100% 100%}}
.hero h1 .unter.w{animation:wortRein .8s cubic-bezier(.2,.8,.2,1) forwards,marker 1s cubic-bezier(.6,.1,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 120ms),1s}
.hero h1.fertig .w{opacity:1;transform:none;animation:none}
.hero h1.fertig .unter{background-size:100% 100%}
.blob{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sticker{animation:schweben 5s ease-in-out infinite}
.sticker.s2{animation-delay:-2.5s}
@keyframes schweben{50%{translate:0 -10px}}
.funken{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.funken i{position:absolute;font-style:normal;opacity:.5;animation:treiben var(--d,14s) linear infinite;animation-delay:var(--v,0s)}
@keyframes treiben{from{transform:translateY(40px) rotate(0)}to{transform:translateY(-520px) rotate(360deg)}}
.hero .wrap{position:relative;z-index:1}

/* ---------- Kacheln & Karten: 3D-Neigung mit Glanz ---------- */
.neig{transform-style:preserve-3d;will-change:transform}
.glanz{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.38),transparent 45%)}
.neig:hover .glanz{opacity:1}
.kachel svg{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.kachel:hover svg{transform:rotate(14deg) scale(1.15)}
.karte{transition:transform .25s,box-shadow .25s}
.karte img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.karte:hover img{transform:scale(1.06)}
.karte{position:relative}
.karte .bild-rahmen{overflow:hidden}

/* Gestaffeltes Einblenden */
.js .staffel:not(.sicht) > *{opacity:0;transform:translateY(26px) scale(.97)}
.js .staffel > *{transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}

/* Geschützter Bereich: Lichtkegel folgt der Maus */
.diskret::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--sx,70%) var(--sy,30%),rgba(255,211,230,.12),transparent 60%)}
.sk{transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .3s}
.sk:hover{background:rgba(255,255,255,.12)}
.sk .zu svg{animation:wackeln 3.5s ease-in-out infinite;transform-origin:50% 0}
@keyframes wackeln{0%,80%,100%{rotate:0}85%{rotate:-14deg}90%{rotate:12deg}95%{rotate:-6deg}}

/* Newsletter-Kreise schweben, Konfetti */
.news::before{animation:kreisA 9s ease-in-out infinite}
.news::after{animation:kreisB 11s ease-in-out infinite}
@keyframes kreisA{50%{transform:translate(40px,-30px) scale(1.08)}}
@keyframes kreisB{50%{transform:translate(-30px,30px) scale(.92)}}
.konfetti{position:fixed;width:10px;height:14px;border-radius:3px;pointer-events:none;z-index:70}

/* Anmeldeseite */
.reiter{border:0;background:#fff;box-shadow:inset 0 0 0 2px rgba(107,53,214,.18)}
.reiter button{transition:background .3s,color .3s}
.reiter button[aria-selected="true"]{background:var(--grad-haupt);color:#fff;box-shadow:0 8px 20px -10px rgba(230,23,122,.8)}
.raus{background:var(--grad-gelb);color:#3A1240;box-shadow:0 10px 24px -10px rgba(255,159,67,.9);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.raus:hover{transform:translateY(-2px)}
.info::after{animation:kreisB 10s ease-in-out infinite}
input[type=text],input[type=email],input[type=password]{transition:border-color .2s,box-shadow .2s}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{outline:0;border-color:#E6177A;box-shadow:0 0 0 4px rgba(230,23,122,.18)}

@media (prefers-reduced-motion:reduce){
  .hero h1 .w{opacity:1;transform:none;animation:none}
  .hero h1 .unter{background-size:100% 100%;animation:none}
  .funken{display:none}
  .js .staffel:not(.sicht) > *{opacity:1;transform:none}
}