/*
Theme Name: initiiera-erfolgreich
Description: Animiertes Theme für initiiera-erfolgreich, Online-Marketing
Version: 2.0
Author: initiiera-erfolgreich
Text Domain: initiera
*/
:root{--navy:#212047;--teal:#5BAEA0;--teal-d:#2F7F72;--mint:#E7F3F0;--bg:#FFFFFF;--muted:#55557A;--soft:#E4E8EF}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--navy);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.05;letter-spacing:-.03em;margin:0 0 .5em}
h1{font-size:clamp(2.8rem,8vw,6.2rem);font-weight:850}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800}
h3{font-size:1.3rem;font-weight:750}
p{max-width:62ch}
.accent{color:var(--teal-d)}
/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 1px 0 var(--soft)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;flex-direction:column;gap:3px}
.logo img{display:block;height:30px;width:auto}
.legal{font-size:.78rem;font-weight:500;letter-spacing:.01em;color:var(--muted);line-height:1}
.legal b{font-weight:800;color:var(--navy)}
.brand{display:flex;flex-direction:column;gap:6px}
.brand .legal{font-size:1rem}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.nav a{text-decoration:none;font-weight:550;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:14px 28px;border-radius:999px;font:inherit;font-weight:650;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{background:var(--teal-d);transform:translateY(-3px);box-shadow:0 10px 24px rgba(47,127,114,.3)}
.nav .btn{padding:9px 20px;color:#fff}
.btn.teal{background:var(--teal);color:var(--navy)}.btn.teal:hover{background:#fff;color:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);margin-left:8px}
.btn.ghost:hover{background:var(--navy);color:#fff}
/* Hero */
.hero{position:relative;overflow:hidden;padding:110px 0 120px}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:11ch}
.hero p{font-size:1.25rem;color:var(--muted);margin:26px 0 38px;max-width:52ch}
.waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.waves path{fill:none;stroke:var(--teal);stroke-linecap:round}
.waves .w1{stroke-width:16;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
.waves .w2{stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s .6s cubic-bezier(.6,0,.2,1) forwards;opacity:.55}
.waves g{animation:float 9s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes float{50%{transform:translateY(14px)}}
.rise>*{opacity:0;transform:translateY(28px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.rise>*:nth-child(1){animation-delay:.1s}.rise>*:nth-child(2){animation-delay:.3s}.rise>*:nth-child(3){animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}
/* Marquee */
.marquee{background:var(--navy);color:#fff;overflow:hidden;padding:18px 0;font-weight:750;font-size:1.3rem;letter-spacing:-.01em}
.marquee .track{display:flex;width:max-content;animation:slide 28s linear infinite}
.marquee span{padding:0 28px;white-space:nowrap}
.marquee span::after{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--teal);margin-left:56px}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}
/* Sections */
.section{padding:96px 0}
.lead{font-size:1.15rem;color:var(--muted)}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;counter-reset:s}
.steps li{background:var(--mint);border-radius:24px;padding:34px;transition:transform .3s,box-shadow .3s}
.steps li:hover{transform:translateY(-8px);box-shadow:0 18px 36px rgba(33,32,71,.12)}
.steps li::before{counter-increment:s;content:"0" counter(s);display:block;font-size:3rem;font-weight:850;color:var(--teal);letter-spacing:-.04em;line-height:1;margin-bottom:18px}
.steps p{color:var(--muted);margin:0}
.numbers{background:var(--teal);color:var(--navy)}
.numbers .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-top:36px}
.numbers strong{display:block;font-size:clamp(2.8rem,6vw,4.4rem);font-weight:850;letter-spacing:-.04em;line-height:1}
.numbers span{font-weight:550}
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px;align-items:center}
.blob{aspect-ratio:1;max-width:420px;width:100%;background:var(--navy);overflow:hidden;display:block;animation:morph 10s ease-in-out infinite;justify-self:center}
.blob img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
@keyframes morph{0%,100%{border-radius:60% 40% 55% 45%/50% 55% 45% 50%}50%{border-radius:42% 58% 40% 60%/58% 42% 58% 42%}}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;margin-top:40px}
.avatar{aspect-ratio:1;background:var(--mint);display:grid;place-items:center;font-size:3.5rem;font-weight:850;color:var(--teal-d);margin-bottom:14px;border-radius:50% 50% 50% 12%;transition:border-radius .5s,background .3s,color .3s}
.person:hover .avatar{border-radius:12% 50% 50% 50%;background:var(--teal);color:var(--navy)}
.person h3{margin:0;font-size:1.15rem}.person small{color:var(--muted)}
.cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:32px;padding:72px 40px;text-align:center}
.cta h2{max-width:20ch;margin:0 auto 28px;position:relative}
.cta .btn{position:relative}
.cta .btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px #fff}.cta .btn.ghost:hover{background:#fff;color:var(--navy)}
.cta svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.cta svg path{fill:none;stroke:var(--teal);stroke-width:10;stroke-linecap:round;animation:float 8s ease-in-out infinite}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:56px}
.contact a{color:var(--teal-d);font-weight:650}
.form{display:grid;gap:14px}
.form label{font-weight:650;font-size:.95rem}
.form input,.form textarea{width:100%;padding:12px 14px;margin-top:4px;border:1.5px solid var(--soft);border-radius:12px;background:#fff;color:var(--navy);font:inherit;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(91,174,160,.2);outline:none}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px}
.notice{padding:14px 18px;border-radius:12px;background:var(--mint);margin-bottom:16px;font-weight:650}
.site-footer{padding:40px 0;border-top:1px solid var(--soft);color:var(--muted);font-size:.92rem}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}
.site-footer img{height:22px;width:auto;display:block}
.content{padding:70px 0}.content .wrap{max-width:760px}
@media(max-width:760px){.nav li:not(:last-child){display:none}.hero{padding:70px 0 80px}.btn.ghost{margin:12px 0 0}.cta{padding:52px 24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal,.rise>*{opacity:1;transform:none}.waves path{stroke-dashoffset:0!important}}

.avatar.photo{padding:0;overflow:hidden;background:var(--mint)}
.avatar.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.person:hover .avatar.photo{background:var(--mint)}
.person:hover .avatar.photo img{transform:scale(1.06)}
.skills{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.skills li{font-size:.8rem;font-weight:650;background:var(--mint);color:var(--teal-d);padding:3px 10px;border-radius:999px}
.person small{display:block}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:start}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:36px}
.service{border:2px solid var(--navy);border-radius:24px;padding:32px;transition:background .3s,color .3s,transform .3s}
.service:hover{background:var(--navy);color:#fff;transform:translateY(-6px)}
.service:hover small,.service:hover p{color:#D4DAEA}
.service small{display:block;color:var(--teal-d);font-weight:650;margin-bottom:14px}
.service p{margin:0;color:var(--muted)}
.values{list-style:none;margin:24px 0;padding:0;display:grid;gap:16px}
.values li{padding-left:18px;border-left:3px solid var(--teal);color:var(--muted)}
.values strong{display:block;color:var(--navy)}
.form select{width:100%;padding:12px 14px;margin-top:4px;border:1.5px solid var(--soft);border-radius:12px;background:#fff;color:var(--navy);font:inherit}
.form select:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 4px rgba(91,174,160,.2)}
.legal-page h1{font-size:clamp(2rem,5vw,3rem)}
.legal-page h2{font-size:1.4rem;margin-top:2em}
.legal-page p{color:var(--muted)}
.legal-page a{color:var(--teal-d);font-weight:650}
.legal-page h3{font-size:1.1rem;margin-top:1.6em}
.legal-page ul{color:var(--muted);padding-left:1.2em}
.legal-page li{margin:.3em 0}