/* Olymp Relaunch: gemeinsame Basis fuer Startseite und Unterseiten */
:root{--bg:#07080b;--f1:#0e1015;--f2:#14171e;--l:#232733;--t:#eceef2;--t2:#a2a6ae;--t3:#6f7480;--g:#d6ae58;--g2:#e9c97c;--gbg:rgba(214,174,88,.12);--gr:#5cc28b;
  --gold:linear-gradient(135deg,#f7e0a0,#d6ae58 45%,#8f6a22);
  --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cc28b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--t);font-family:Poppins,system-ui,sans-serif}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{overflow-x:hidden;overflow-x:clip}
a{color:inherit;text-decoration:none}
p{color:var(--t2);line-height:1.65}
.w{max-width:1240px;margin:0 auto;padding:0 28px}

/* Haken: flach und gruen */
.haken{list-style:none;padding:0;margin:0}
.haken li{position:relative;padding:6px 0 6px 30px;color:var(--t)}
.haken li:before,.hk:before{content:'';position:absolute;left:0;top:9px;width:18px;height:18px;background:var(--haken) center/contain no-repeat}
.hk{position:relative;padding-left:26px}
.hk:before{top:50%;margin-top:-9px}

/* Buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:#16120a;font-weight:700;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;border-radius:999px;padding:17px 30px;border:0;cursor:pointer;font-family:inherit;
  box-shadow:0 10px 42px rgba(214,174,88,.38),0 0 0 1.3px rgba(214,174,88,.4);transition:transform .25s,box-shadow .25s;animation:glow 2.6s ease-in-out infinite}
.btn:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:glanzlauf 3.8s ease-in-out infinite}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 54px rgba(214,174,88,.55),0 0 0 1.3px rgba(214,174,88,.6)}
.btn .pf{transition:transform .25s}
.btn:hover .pf{transform:translateX(4px)}
@keyframes glow{50%{box-shadow:0 10px 60px rgba(214,174,88,.6),0 0 0 6px rgba(214,174,88,.12)}}
@keyframes glanzlauf{0%,60%{left:-60%}100%{left:130%}}
.btn.s{background:transparent;color:var(--t);box-shadow:0 0 0 1.3px rgba(255,255,255,.18);animation:none}
.btn.s:after{display:none}
.btn.s:hover{box-shadow:0 0 0 1.3px var(--g)}
.btn.k{padding:11px 18px;font-size:12px;letter-spacing:1.2px}
.mikro{display:block;margin-top:14px;font-size:13px;color:var(--t3)}

/* Ueberschriften */
.eyebrow{display:inline-flex;gap:10px;align-items:center;color:var(--g);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.eyebrow:before{content:'';width:28px;height:1px;background:var(--g)}
h2{font-size:clamp(36px,5.4vw,72px);line-height:1.02;font-weight:800;margin:16px 0 18px;letter-spacing:-.035em}
h2.mittel{font-size:clamp(30px,3.8vw,52px)}
h2 .zl{display:block;overflow:hidden;padding-bottom:.08em}
h2 .zl>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
h2 .zl+.zl>span{transition-delay:.14s}
.da h2 .zl>span{transform:none}
.gold{background:linear-gradient(90deg,#f7e0a0,#d6ae58 30%,#8f6a22 50%,#d6ae58 70%,#f7e0a0);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glanztext 7s linear infinite}
@keyframes glanztext{to{background-position:200% center}}
section.block{padding:110px 0}
.kopf-block{max-width:1000px}
.kopf-block p{font-size:18px;max-width:640px}
.mitte{text-align:center;margin:0 auto}
.mitte p{margin-left:auto;margin-right:auto}
.auf{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.auf.da{opacity:1;transform:none}
.platzbild{position:relative;overflow:hidden;background:radial-gradient(80% 70% at 30% 20%,rgba(214,174,88,.22),transparent 65%),linear-gradient(160deg,#1b1f28,#0c0e13);display:flex;align-items:center;justify-content:center;color:rgba(214,174,88,.55);font-size:44px}
.platzbild:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);background-size:250% 100%;animation:schimmer 4.5s linear infinite}
@keyframes schimmer{from{background-position:150% 0}to{background-position:-100% 0}}
.platz{position:absolute;z-index:1;left:12px;top:12px;font-size:11px;color:#9fd7ff;border:1px dashed rgba(120,180,255,.5);border-radius:6px;padding:2px 7px;background:rgba(7,8,11,.55)}
.chip{font-size:11px;border:1px solid var(--l);border-radius:99px;padding:2px 9px;color:var(--t2);white-space:nowrap}
.chip.g{color:var(--g);border-color:rgba(214,174,88,.4)}
.chip.gr{color:var(--gr);border-color:rgba(92,194,139,.45);background:rgba(92,194,139,.08)}

/* ---------- Olymp-Kranz als Wasserzeichen ---------- */
.muster{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--bg) 0%,#111215 22%,#18191d 60%,#111215 82%,var(--bg) 100%)}
/* Kranz-Muster 1:1 von olympagency.com (weisse Kraenze, 4 % Deckkraft). Bewusst ohne Animation (David: sonst seekrank) */
.muster:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/relaunch/olymp-muster.svg) 0 0/200px 200px repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.kranz-gross{position:absolute;z-index:-1;pointer-events:none;width:min(620px,90vw);aspect-ratio:450/401;background:url(/assets/relaunch/kranz.svg) center/contain no-repeat;opacity:.06}
.goldlicht{position:absolute;inset:0 -10%;z-index:-1;pointer-events:none;background:radial-gradient(38% 42% at 30% 38%,rgba(214,174,88,.26),transparent 72%),radial-gradient(34% 40% at 72% 66%,rgba(214,174,88,.18),transparent 72%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);animation:goldtreiben 18s ease-in-out infinite alternate}
@keyframes goldtreiben{to{transform:translate3d(4%,3%,0) scale(1.06)}}

/* ---------- Kopfleiste mit Navigation ---------- */
.kopfleiste{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.kopfleiste.fest{background:rgba(7,8,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.07)}
.kopfleiste .innen{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1240px;margin:0 auto;padding:16px 28px;transition:padding .3s}
.kopfleiste.fest .innen{padding-top:10px;padding-bottom:10px}
.kopfleiste .logo img{width:124px;display:block}
.menu{display:flex;gap:4px;align-items:center;font-size:14px;color:var(--t2)}
.menu>a,.menu .dd>button{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;transition:color .2s,background .2s}
.menu>a:hover,.menu .dd:hover>button{color:var(--t);background:rgba(255,255,255,.05)}
.menu .dd{position:relative}
.menu .dd>button:after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.menu .dd:hover>button:after{transform:rotate(225deg) translateY(-2px)}
.dd .runter{position:absolute;top:100%;left:-10px;min-width:280px;padding:10px;background:#11141a;border:1px solid var(--l);border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.dd:hover .runter,.dd:focus-within .runter{opacity:1;visibility:visible;transform:none}
.runter a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--t);font-size:14px}
.runter a:hover{background:rgba(214,174,88,.08)}
.runter a i{font-style:normal;width:30px;height:30px;border-radius:9px;background:var(--gbg);color:var(--g);display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}
.runter a small{display:block;color:var(--t3);font-size:12px}
.kopfleiste .rechts{display:flex;gap:10px;align-items:center}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--l);background:rgba(255,255,255,.03);cursor:pointer;position:relative}
.burger i,.burger:before,.burger:after{content:'';position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--t);transition:transform .3s,opacity .3s}
.burger:before{top:15px}.burger i{top:21px}.burger:after{top:27px}
.offen .burger:before{transform:translateY(6px) rotate(45deg)}
.offen .burger i{opacity:0}
.offen .burger:after{transform:translateY(-6px) rotate(-45deg)}
.schublade{display:none}
.kopfleiste.offen{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border-bottom-color:transparent}

/* ---------- Video (Klick laedt Vimeo) ---------- */
.vbox{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#000;border:1px solid rgba(214,174,88,.3);cursor:pointer}
.vbox img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease,opacity .4s}
.vbox:hover img{transform:scale(1.04);opacity:.85}
.vbox .play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(214,174,88,.2),0 12px 40px rgba(0,0,0,.5);transition:transform .3s;animation:glow 2.6s ease-in-out infinite}
.vbox:hover .play{transform:scale(1.1)}
.vbox .play:after{content:'';margin-left:5px;border-left:19px solid #16120a;border-top:11px solid transparent;border-bottom:11px solid transparent}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Grosser CTA mit Teamfoto ---------- */
.gross-cta{position:relative;isolation:isolate;overflow:hidden;padding:150px 0 140px;text-align:center}
.gross-cta .foto{position:absolute;inset:-8px 0;z-index:-2;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);background:url(/assets/relaunch/team1.webp) center 30%/cover no-repeat;transform:scale(1.08);transition:transform 2.4s ease}
.gross-cta.da .foto{transform:scale(1)}
.gross-cta:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 50%,rgba(7,8,11,.55),rgba(7,8,11,.8))}
.gross-cta h2{font-size:clamp(40px,6vw,86px);margin:22px auto 22px}
.gross-cta p{font-size:19px;max-width:620px;margin:0 auto 36px;color:#c8cbd2}
.gross-cta .btn{font-size:15px;padding:20px 38px}

/* ---------- Footer / klebende Leiste ---------- */
footer{border-top:1px solid rgba(255,255,255,.06);padding:34px 0 110px;color:var(--t3);font-size:13px}
.fuss{padding-top:64px;background:linear-gradient(180deg,var(--bg),#0b0c0f)}
.fuss-gitter{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:34px}
.fuss-gitter b{display:block;color:var(--t);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.fuss-gitter a,.fuss-gitter span{display:block;color:var(--t2);font-size:14px;padding:4px 0;line-height:1.5}
.fuss-gitter a:hover{color:var(--g)}
.fuss-marke img{display:block;margin-bottom:14px}
.fuss-marke p{font-size:14px;margin:0 0 16px;color:var(--t2)}
.fuss-gitter a.fuss-google{display:inline-flex;align-items:center;gap:10px;background:var(--f1);border:1px solid var(--l);border-radius:12px;padding:8px 12px}
.fuss-google b{display:inline;margin:0;letter-spacing:0;text-transform:none;font-size:14px}
.fuss-google span{display:inline;padding:0}
.fuss-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--l);margin-top:44px;padding-top:22px;font-size:13px}
.fuss-unten a:hover{color:var(--t)}
@media (max-width:980px){.fuss-gitter{grid-template-columns:1fr 1fr}.fuss-marke{grid-column:1/-1}}
@media (max-width:600px){.fuss-gitter{gap:26px}}
footer a:hover{color:var(--t)}
.hinweis{color:#9fd7ff}
.klebe{position:fixed;left:50%;bottom:18px;z-index:40;transform:translate(-50%,140%);display:flex;align-items:center;gap:18px;background:rgba(14,16,21,.92);backdrop-filter:blur(12px);border:1px solid rgba(214,174,88,.35);border-radius:999px;padding:8px 8px 8px 24px;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:transform .5s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.klebe.an{transform:translate(-50%,0)}
.klebe span{font-size:14px;font-weight:600}
.klebe small{color:var(--t3);font-weight:400;margin-left:6px}

@media (max-width:1060px){
  .menu,.kopfleiste .rechts .s{display:none}
  .burger{display:block}
  .schublade{display:block;position:fixed;inset:0;z-index:49;background:rgba(7,8,11,.97);backdrop-filter:blur(14px);padding:90px 20px 30px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .kopfleiste.offen+.schublade{opacity:1;visibility:visible}
  .schublade b{display:block;margin:22px 0 6px;font-size:12px;color:var(--g);letter-spacing:.16em;text-transform:uppercase}
  .schublade a{display:block;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.06);font-size:16px}
  .schublade .btn{display:flex;margin-top:24px;border:0}
}
@media (max-width:600px){
  .w{padding:0 16px}
  .kopfleiste .innen{padding:12px 16px}
  .kopfleiste .logo img{width:108px}
  .kopfleiste .rechts>.btn{display:none}
  .btn{padding:16px 22px;font-size:13px;letter-spacing:1.2px}
  section.block{padding:76px 0}
  .gross-cta{padding:110px 0 100px}
  .gross-cta .btn{width:100%;padding:18px 20px}
  .klebe{left:12px;right:12px;transform:translateY(140%);justify-content:space-between;padding-left:18px}
  .klebe.an{transform:none}
  .klebe small{display:none}
  .klebe span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .klebe .btn{padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .auf,h2 .zl>span{transform:none;opacity:1}
}