:root{
    --pink:#e6007e;
    --blue:#1f6feb;

    --bg:#f6f7fb;
    --card:rgba(255,255,255,.92);
    --text:#0b1222;
    --muted:#475569;
    --line:rgba(15,23,42,.10);

    --shadow:0 20px 70px rgba(15,23,42,.12);
    --shadow2:0 14px 40px rgba(15,23,42,.10);
    --radius-xl:26px;
    --container:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:Manrope,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    color:var(--text);
    background:
            radial-gradient(900px 520px at 12% 10%,rgba(230,0,126,.12),transparent 60%),
            radial-gradient(900px 520px at 88% 16%,rgba(31,111,235,.12),transparent 60%),
            radial-gradient(900px 520px at 70% 85%,rgba(230,0,126,.08),transparent 58%),
            var(--bg);
}

img{max-width:100%;display:block}

.container{
    width:min(var(--container),calc(100% - 40px));
    margin:0 auto;
}

.header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(12px);
    background:rgba(246,247,251,.82);
    border-bottom:1px solid var(--line);
}

.nav{
    width:min(var(--container),calc(100% - 40px));
    margin:0 auto;
    height:66px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.nav__link{
    font-size:14px;
    font-weight:800;
    letter-spacing:.2px;
    padding:10px 14px;
    border-radius:999px;
    text-decoration:none;
    color:#111827;
    border:1px solid transparent;
    transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.nav__link:hover{
    background:rgba(15,23,42,.06);
    transform:translateY(-1px);
}

.nav__link.is-active{
    background:rgba(230,0,126,.12);
    border-color:rgba(230,0,126,.25);
}

.hero{
    position:relative;
    overflow:hidden;
    padding:190px 0 170px;
    background:url("../assets/img/bike-hero.png") center/cover no-repeat;
    min-height:86vh;
}

.hero__content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:980px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--pink);
    opacity:.30;
    z-index:1;
    pointer-events:none;
}

.hero__title{
    margin:0;
    font-size:64px;
    letter-spacing:-1.4px;
    line-height:1.05;
    font-weight:800;
    color:#fff;
}

.hero__subtitle{
    display:inline-block;
    margin:0;
    font-weight:800;
    letter-spacing:.6px;
    color:#fff;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(31,111,235,.18);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 10px 28px rgba(15,23,42,.12);
}

.hero__lead{
    margin:0;
    color:rgba(255,255,255,.92);
    line-height:1.75;
    font-size:19px;
    max-width:880px;
}

.section{padding:78px 0}

.section--alt{
    border-top:1px solid rgba(15,23,42,.08);
    border-bottom:1px solid rgba(15,23,42,.08);
    background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,0));
}

.h2{
    text-align:center;
    margin:0 0 44px;
    font-size:46px;
    letter-spacing:-.8px;
    line-height:1.14;
    font-weight:650;
    color:rgba(11,18,34,.82);
}

.h2--section{
    margin:0 0 44px;
    font-weight:650;
    color:rgba(11,18,34,.80);
}

.h3{
    margin:0 0 14px;
    font-size:22px;
    letter-spacing:-.2px;
    font-weight:650;
    color:rgba(11,18,34,.88);
}

.centerText{
    max-width:900px;
    margin:0 auto 30px;
    text-align:center;
    color:rgba(71,85,105,.95);
    line-height:1.75;
    font-size:16.5px;
}

.cards3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    align-items:start;
}

.hoverCard{
    align-self:start;
    position:relative;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(15,23,42,.10);
    border-top:5px solid rgba(230,0,126,.85);
    border-radius:var(--radius-xl);
    padding:18px 18px 16px;
    box-shadow:var(--shadow2);
    transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,border-top-color .14s ease;
    min-height:120px;
    cursor:default;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content:center;
}

.hoverCard::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:var(--radius-xl);
    background:
            radial-gradient(700px 160px at 20% 0%,rgba(230,0,126,.12),transparent 55%),
            radial-gradient(700px 160px at 80% 0%,rgba(31,111,235,.12),transparent 55%);
    opacity:0;
    transition:opacity .14s ease;
    pointer-events:none;
}

.hoverCard__title{
    margin:0;
    font-size:20px;
    font-weight:650;
    text-align:center;
}

.hoverCard__more{
    width:100%;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .22s ease,opacity .18s ease;
    color:rgba(71,85,105,.98);
    line-height:1.75;
    margin-top:0;
    text-align:center;
}

.hoverCard__more p{margin:0}

.hoverCard:hover,
.hoverCard:focus-visible{
    border-top-color:rgba(31,111,235,.85);
}

.hoverCard.is-open{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
    border-color:rgba(230,0,126,.16);
    border-top-color:rgba(31,111,235,.85);
    justify-content:flex-start;
}

.hoverCard.is-open::before{opacity:1}

.hoverCard.is-open .hoverCard__more{
    max-height:260px;
    opacity:1;
    margin-top:12px;
}

.centerCard{
    max-width:920px;
    margin:0 auto;
    text-align:center;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(15,23,42,.10);
    border-radius:var(--radius-xl);
    padding:26px;
    box-shadow:var(--shadow2);
    line-height:1.75;
    color:rgba(71,85,105,.98);
}

.centerCard .h3{
    color:var(--text);
    margin-bottom:10px;
}

.centerCard__actions{
    display:flex;
    justify-content:center;
    margin-top:16px;
}

.meta{
    margin:18px 0 0;
    color:#334155;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    border-radius:999px;
    font-weight:800;
    text-decoration:none;
    border:1px solid rgba(15,23,42,.12);
    background:rgba(255,255,255,.9);
    color:#0f172a;
    transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
    box-shadow:0 10px 28px rgba(15,23,42,.06);
}

.btn:hover{
    transform:translateY(-1px);
    border-color:rgba(230,0,126,.18);
}

.twoCols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.panel{
    background:rgba(255,255,255,.90);
    border:1px solid rgba(15,23,42,.10);
    border-radius:var(--radius-xl);
    padding:24px;
    box-shadow:var(--shadow2);
    text-align:left;
}

.panel p{
    margin:0;
    color:rgba(71,85,105,.98);
    line-height:1.8;
}

.panel--pink{border-top:5px solid rgba(230,0,126,.85)}
.panel--blue{border-top:5px solid rgba(31,111,235,.85)}

.titleNote{
    display:inline-block;
    margin-left:8px;
    font-weight:700;
    color:rgba(71,85,105,.92);
    font-size:15px;
    letter-spacing:.2px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.65);
    vertical-align:middle;
}

.stackGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.stackCard{
    background:rgba(255,255,255,.90);
    border:1px solid rgba(15,23,42,.10);
    border-radius:var(--radius-xl);
    padding:18px;
    box-shadow:var(--shadow2);
    text-align:center;
}

.stackCard p{
    margin:0;
    color:rgba(71,85,105,.98);
    line-height:1.6;
}

.spacer{height:80px}

.sectionSplit{
    height:0;
    border-top:1px solid var(--line);
    margin:70px 0;
}

@media (max-width:980px){
    .hero__title{font-size:44px}
    .hero{padding:96px 0 56px}
    .cards3{grid-template-columns:1fr}
    .twoCols{grid-template-columns:1fr}
    .resultsGrid{grid-template-columns:1fr}
    .stackGrid{grid-template-columns:1fr 1fr}
    .h2{font-size:38px}
}

@media (max-width:520px){
    .nav{gap:6px}
    .nav__link{padding:9px 10px;font-size:13px}
    .hero__lead{font-size:16.5px}
    .titleNote{display:inline-block;margin-left:0;margin-top:8px}
}

.stackCard--icon{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.iconRow{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    min-height:96px;
}

.iconGrid{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    min-height:96px;
}

.iconGrid--tools{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:center;
    justify-items:center;
    min-height:96px;
}

.iconRow img,
.iconGrid img{
    width:56px;
    height:56px;
    object-fit:contain;
}

.iconRow img[src$=".png"],
.iconGrid img[src$=".png"]{
    width:60px;
    height:60px;
}

.shotsSimple{
    display:grid;
    grid-template-columns:1fr;
    gap:46px;
    align-items:start;
    margin-top:22px;
}

.shotSimple{
    margin:0;
    display:grid;
    grid-template-columns:480px minmax(320px,520px);
    gap:34px;
    align-items:center;
    justify-content:center;
}

.shotSimple__img{
    width:100%;
    max-width:360px;
    margin:0 auto;
    border-radius:18px;
    overflow:hidden;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:var(--shadow2);
}

.shotSimple__img img{
    width:100%;
    height:auto;
    display:block;
}

.shotSimple__caption{
    margin:0;
    text-align:center;
    justify-self:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-self:stretch;
}

.shotSimple__caption strong{
    display:block;
    font-size:18px;
    color:var(--text);
    margin-bottom:10px;
}

.shotSimple__caption p{
    margin:0 auto;
    max-width:520px;
    color:rgba(71,85,105,.98);
    line-height:1.85;
    font-size:16px;
}

@media (max-width:980px){
    .shotSimple{
        grid-template-columns:1fr;
        gap:16px;
    }

    .shotSimple__img{
        max-width:380px;
    }

    .shotSimple__caption{
        margin-top:16px;
        align-self:auto;
        justify-content:flex-start;
    }
}

.shotsWide{
    display:grid;
    grid-template-columns:1fr;
    gap:52px;
    align-items:start;
    margin-top:22px;
}

.shotWide{
    margin:0;
    display:grid;
    grid-template-columns:480px minmax(320px,520px);
    gap:34px;
    align-items:center;
    justify-content:center;
}

.shotWide__img{
    width:480px;
    border-radius:18px;
    overflow:hidden;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:var(--shadow2);
}

.shotWide__img img{
    width:100%;
    height:auto;
    display:block;
}

.shotWide__img--pair{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:12px;
}

.shotWide__img--pair img{
    width:100%;
    height:auto;
    display:block;
    border-radius:12px;
    background:#fff;
    border:1px solid rgba(15,23,42,.10);
}

.shotWide__caption{
    margin:0;
    text-align:center;
    justify-self:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-self:stretch;
}

.shotWide__caption strong{
    display:block;
    font-size:18px;
    color:var(--text);
    margin-bottom:10px;
}

.shotWide__caption p{
    margin:0 auto;
    max-width:520px;
    color:rgba(71,85,105,.98);
    line-height:1.85;
    font-size:16px;
}

@media (max-width:980px){
    .shotsSimple{
        grid-template-columns:1fr;
        gap:40px;
    }

    .shotWide{
        grid-template-columns:1fr;
        gap:16px;
    }

    .shotWide__img{
        width:100%;
        max-width:680px;
        margin:0 auto;
    }

    .shotWide__caption{
        margin-top:16px;
    }

    .shotWide__img{
        width:100%;
        max-width:640px;
    }
}

@media (max-width:560px){
    .shotWide__img--pair{
        grid-template-columns:1fr;
    }
}

.shotSimple__caption p{
    min-height:140px;
}

.teamGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px 28px;
    margin-top:40px;
}

.teamCard{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.teamAvatar{
    width:160px;
    height:160px;
    border-radius:50%;
    overflow:hidden;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 14px 40px rgba(15,23,42,.10);
    transition:transform .2s ease, box-shadow .2s ease;
}

.teamAvatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.teamCard:hover .teamAvatar{
    transform:translateY(-6px);
    box-shadow:0 20px 55px rgba(15,23,42,.18);
}

.teamCard h3{
    margin:0;
    font-size:18px;
    font-weight:650;
    color:var(--text);
}

.teamCard p{
    margin:0;
    font-size:15px;
    color:rgba(71,85,105,.95);
}

@media (max-width:980px){
    .teamGrid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:560px){
    .teamGrid{
        grid-template-columns:1fr;
    }
}

.hoverCard{--icon-bg:rgba(230,0,126,.16);--icon-bd:rgba(230,0,126,.28)}
.hoverCard.is-open{--icon-bg:rgba(31,111,235,.16);--icon-bd:rgba(31,111,235,.30)}

.hoverCard{justify-content:flex-start;padding-top:22px}

.hoverCard__icon{
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--icon-bg);
    border:1px solid var(--icon-bd);
    box-shadow:0 14px 30px rgba(15,23,42,.10);
    margin:6px auto 14px;
    transition:background .14s ease,border-color .14s ease,transform .14s ease;
}

.hoverCard.is-open .hoverCard__icon{transform:translateY(-1px)}

.hoverCard__icon img{
    width:34px;
    height:34px;
    object-fit:contain;
}

#ergebnisse { padding:78px 0; }
#ergebnisse > section.section { padding:0; }


.footer{
    padding:28px 0;
    background: rgba(230,0,126,.12);
    border-top: 1px solid rgba(15,23,42,.10);
}

.footer__inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
}

.footer a{
    color:#fff;
    text-decoration:none;
}

.footer a:hover{
    text-decoration:underline;
}

.dot{
    color:#fff;
    margin:0 4px;
}

.footer__logo img{
    height:55px;
    width:auto;
}

#ergebnisse,
#team{
    background:
            radial-gradient(900px 520px at 12% 10%, rgba(230,0,126,.12), transparent 60%),
            radial-gradient(900px 520px at 88% 16%, rgba(31,111,235,.12), transparent 60%),
            radial-gradient(900px 520px at 70% 85%, rgba(230,0,126,.08), transparent 58%),
            var(--bg);
}