:root{
--navy:#07111f;
--navy2:#0d2038;
--blue:#123a63;
--orange:#ff6b16;
--orange2:#ff934d;
--orange-dark:#9b3d00;
--white:#fff;
--mist:#eef3f8;
--ink:#111d2c;
--muted:#566579;
--line:#d8e0e9;
--red:#ae1c28;
--nlblue:#21468b;
--radius:18px;
--shadow:0 22px 60px rgba(7,17,31,.13)}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
background:#fff;
color:var(--ink);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:16px;
line-height:1.68;
-webkit-text-size-adjust:100%;
overflow-x:hidden;
-webkit-font-smoothing:antialiased}
img{
max-width:100%;
height:auto}
a{
color:inherit;
text-decoration:none}
.wrap{
width:min(1180px,calc(100% - 36px));
margin-inline:auto}
.skip-link{
position:fixed;
top:-100px;
left:16px;
background:#fff;
color:#000;
padding:12px 18px;
z-index:9999;
border-radius:8px}
.skip-link:focus{
top:12px}
.site-header{
position:sticky;
top:0;
z-index:50;
background:rgba(7,17,31,.97);
color:#fff;
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.1)}
.admin-bar .site-header{
top:32px}
.header-inner{
min-height:82px;
display:flex;
align-items:center;
gap:30px}
.brand{
display:inline-flex;
align-items:center;
gap:10px;
line-height:1}
.brand-mark{
width:42px;
height:42px;
border:2px solid var(--orange);
border-radius:13px;
display:grid;
place-items:center;
color:var(--orange);
font-weight:950;
font-size:1.4rem;
transform:skew(-8deg)}
.brand b,.brand strong{
font-size:.88rem;
letter-spacing:.04em}
.brand strong{
color:var(--orange)}
.brand small{
display:block;
margin-top:5px;
font-size:.54rem;
letter-spacing:.2em;
color:#b6c4d4}
.main-nav{
margin-left:auto;
display:flex;
align-items:center;
gap:24px}
.main-nav a{
font-size:.86rem;
font-weight:750;
color:#dbe5ef;
min-height:44px;
display:inline-flex;
align-items:center;
position:relative}
.main-nav a:after{
content:"";
position:absolute;
left:0;
right:100%;
bottom:5px;
height:2px;
background:var(--orange);
transition:.25s}
.main-nav a:hover:after,.main-nav a:focus-visible:after{
right:0}
.header-cta{
min-height:44px;
padding:11px 16px;
border:1px solid var(--orange);
border-radius:999px;
color:#fff;
font-weight:850;
font-size:.82rem;
display:inline-flex;
align-items:center;
gap:8px}
.header-cta span{
color:var(--orange)}
.menu-toggle{
display:none;
background:none;
border:0;
color:#fff;
min-width:48px;
min-height:48px}
.race-line{
height:4px;
display:flex;
position:sticky;
top:82px;
z-index:49}
.admin-bar .race-line{
top:114px}
.race-line i{
flex:1}
.race-line i:nth-child(1){
background:var(--red)}
.race-line i:nth-child(2){
background:#fff}
.race-line i:nth-child(3){
background:var(--nlblue)}

.hero{
min-height:690px;
background:var(--navy) url('../images/sportmassageolie-hero-1800.webp') center/cover no-repeat;
position:relative;
color:#fff;
display:flex;
align-items:center;
overflow:hidden}
.hero:after{
content:"";
position:absolute;
inset:auto 0 0;
height:160px;
background:linear-gradient(transparent,var(--navy))}
.hero-shade{
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(7,17,31,.98) 0%,rgba(7,17,31,.91) 31%,rgba(7,17,31,.34) 65%,rgba(7,17,31,.04) 100%)}
.hero-inner{
position:relative;
z-index:2;
padding:90px 0 125px}
.hero-copy{
max-width:700px}
.eyebrow{
margin:0 0 18px;
display:flex;
align-items:center;
gap:11px;
color:var(--orange);
font-size:.73rem;
font-weight:900;
letter-spacing:.17em;
text-transform:uppercase}
.eyebrow i{
width:28px;
height:3px;
background:currentColor}
.eyebrow.dark{
color:var(--orange-dark)}
h1,h2,h3{
font-family:Impact,"Arial Narrow",ui-sans-serif,sans-serif;
text-transform:uppercase;
letter-spacing:.015em;
line-height:.98;
margin:0}
h1{
font-size:clamp(3.4rem,7.8vw,7.1rem);
max-width:820px}
.hero h1{
font-style:italic;
text-shadow:0 8px 32px rgba(0,0,0,.36)}
.hero-copy>p:not(.eyebrow){
max-width:650px;
font-size:1.13rem;
color:#d9e3ec;
line-height:1.7}
.hero-actions{
display:flex;
align-items:center;
gap:26px;
margin-top:32px;
flex-wrap:wrap}
.button{
min-height:50px;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--orange);
color:#101722;
padding:14px 22px;
border:0;
border-radius:10px;
font-weight:950;
text-transform:uppercase;
letter-spacing:.04em;
box-shadow:0 11px 28px rgba(255,107,22,.22);
cursor:pointer}
.button:hover,.button:focus-visible{
background:#ff8640;
transform:translateY(-1px)}
.ghost-link{
color:#fff;
font-weight:850;
min-height:44px;
display:inline-flex;
align-items:center;
gap:8px}
.ghost-link b{
color:var(--orange)}
.hero-proof{
display:flex;
gap:26px;
margin-top:38px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.17);
max-width:650px}
.hero-proof span{
font-size:.8rem;
color:#aebfd0}
.hero-proof b{
font-family:Impact,sans-serif;
font-size:1.5rem;
color:#fff;
margin-right:5px}
.score-strip{
background:var(--navy);
color:#d8e2ec;
border-top:1px solid rgba(255,255,255,.1)}
.score-strip .wrap{
display:grid;
grid-template-columns:repeat(4,1fr)}
.score-strip span{
padding:19px 16px;
border-right:1px solid rgba(255,255,255,.1);
font-size:.82rem;
font-weight:750}
.score-strip b{
color:var(--orange);
margin-right:8px}

.section{
padding:96px 0}
.section-heading{
max-width:760px;
margin-bottom:40px}
.section-heading.row{
max-width:none;
display:flex;
align-items:end;
justify-content:space-between;
gap:30px}
.section-heading h2{
font-size:clamp(2.2rem,5vw,4.4rem)}
.section-heading>p:not(.eyebrow){
color:var(--muted);
font-size:1.05rem}
.finder-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:74px;
align-items:start}
.finder{
background:var(--mist);
padding:28px;
border-radius:var(--radius);
box-shadow:var(--shadow);
display:grid;
grid-template-columns:1fr 1fr;
gap:16px}
.finder label{
display:grid;
gap:7px}
.finder label span,.calculator label span{
font-size:.77rem;
text-transform:uppercase;
letter-spacing:.08em;
font-weight:900}
.finder select,.calculator input{
width:100%;
min-height:50px;
padding:0 13px;
border:1px solid #bdcad7;
background:#fff;
border-radius:9px;
font:inherit;
color:var(--ink)}
.dark-button{
background:var(--navy);
color:#fff;
box-shadow:none}
.finder-result{
grid-column:1/-1;
background:#fff;
border-left:4px solid var(--orange);
padding:18px}
.finder-result span{
font-size:.68rem;
color:var(--orange);
font-weight:900;
letter-spacing:.16em}
.finder-result strong{
display:block;
font-size:1.15rem}
.finder-result p{
margin:4px 0 0;
color:var(--muted);
font-size:.88rem}
.dark-section{
background:var(--navy);
color:#fff}
.dark-section .section-heading h2{
max-width:760px}
.cluster-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px}
.cluster-card{
padding:24px;
border:1px solid rgba(255,255,255,.13);
border-radius:14px;
min-height:260px;
display:flex;
flex-direction:column;
background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
transition:.25s}
.cluster-card:hover{
transform:translateY(-5px);
border-color:var(--orange);
background:rgba(255,107,22,.06)}
.cluster-card>span{
font-family:Impact,sans-serif;
font-size:2rem;
color:var(--orange)}
.cluster-card small{
color:#8fa3b9;
font-weight:800}
.cluster-card h3{
font-size:1.65rem;
margin:20px 0 10px}
.cluster-card p{
color:#b7c5d3;
font-size:.91rem}
.cluster-card b{
margin-top:auto;
color:var(--orange);
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.06em}

.crumbs{
display:flex;
gap:9px;
align-items:center;
padding-top:22px;
padding-bottom:22px;
font-size:.78rem;
color:#6b7888;
overflow:auto;
white-space:nowrap}
.crumbs a:hover{
text-decoration:underline}
.page-hero{
background:linear-gradient(135deg,var(--navy),#102b4b);
color:#fff;
padding:78px 0;
position:relative;
overflow:hidden}
.page-hero:after{
content:"";
position:absolute;
width:330px;
height:330px;
border:80px solid rgba(255,107,22,.09);
border-radius:50%;
right:-80px;
top:-120px}
.page-hero-grid{
display:grid;
grid-template-columns:1.7fr .7fr;
gap:60px;
align-items:end;
position:relative;
z-index:1}
.page-hero h1{
font-size:clamp(3rem,6.5vw,6rem);
font-style:italic}
.page-hero p:not(.eyebrow){
max-width:760px;
color:#cfdae5;
font-size:1.08rem}
.page-hero aside{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
padding:22px;
border-radius:14px;
border-top:4px solid var(--orange)}
.page-hero aside span{
font-size:.69rem;
color:var(--orange);
font-weight:900;
letter-spacing:.13em}
.page-hero aside strong{
display:block;
margin-top:7px;
line-height:1.45}
.reviewed{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:22px}
.reviewed span{
font-size:.72rem!important;
color:#9fb1c4!important;
text-transform:uppercase;
letter-spacing:.05em}
.reviewed span+span:before{
content:"•";
margin-right:18px;
color:var(--orange)}

.article{
background:#fff}
.article-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:70px;
align-items:start}
.content-block{
display:grid;
grid-template-columns:58px 1fr;
gap:20px;
padding:0 0 42px;
margin-bottom:42px;
border-bottom:1px solid var(--line)}
.block-number{
font-family:Impact,sans-serif;
font-size:1.7rem;
color:var(--orange);
padding-top:4px}
.content-block h2{
font-size:clamp(1.8rem,3vw,2.7rem);
text-transform:none;
font-family:ui-sans-serif,system-ui,sans-serif;
letter-spacing:-.035em;
line-height:1.06}
.content-block p{
color:#3c4b5e;
font-size:1.02rem}
.article-aside{
position:sticky;
top:120px;
display:grid;
gap:18px}
.albert-card{
background:var(--orange);
padding:24px;
border-radius:14px;
color:#111821;
transform:rotate(-1deg)}
.albert-card span,.shop-card span,.article-aside nav>span{
font-size:.68rem;
letter-spacing:.13em;
font-weight:950}
.albert-card h3{
font-family:ui-sans-serif,system-ui,sans-serif;
text-transform:none;
line-height:1.12;
font-size:1.38rem;
margin:10px 0}
.albert-card p{
font-size:.88rem;
margin-bottom:0}
.article-aside nav{
border:1px solid var(--line);
border-radius:14px;
padding:20px}
.article-aside nav>span{
color:var(--muted);
display:block;
margin-bottom:10px}
.article-aside nav a{
display:flex;
justify-content:space-between;
gap:10px;
padding:11px 0;
border-top:1px solid var(--line);
font-size:.85rem;
font-weight:750}
.article-aside nav a b{
color:var(--orange)}
.shop-card{
background:var(--navy);
color:#fff;
border-radius:14px;
padding:24px;
display:block}
.shop-card span{
color:var(--orange)}
.shop-card strong{
display:block;
font-size:1.08rem;
line-height:1.35;
margin:9px 0}
.shop-card em{
font-style:normal;
color:#91a8bf;
font-size:.78rem}
.comparison,.calculator,.sources{
margin:55px 0;
padding:28px;
background:var(--mist);
border-radius:16px}
.comparison h2,.calculator h2,.sources h2{
font-size:2rem;
margin-bottom:20px}
.table-scroll{
overflow-x:auto}
table{
width:100%;
border-collapse:collapse;
background:#fff}
th,td{
text-align:left;
padding:14px;
border-bottom:1px solid var(--line);
vertical-align:top}
th{
background:var(--navy);
color:#fff;
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.06em}
.comparison>p{
font-size:.8rem;
color:var(--muted)}
.calculator form{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px}
.calculator label{
display:grid;
gap:6px}
.calculator button{
grid-column:1/2}
.calculator output{
grid-column:2/4;
background:#fff;
border-left:4px solid var(--orange);
padding:12px 17px}
.calculator output b,.calculator output span{
display:block}
.calculator output b{
font-size:1.5rem}
.sources{
display:grid;
gap:10px}
.sources h2{
margin:0 0 12px}
.sources a{
background:#fff;
padding:15px;
display:flex;
justify-content:space-between;
gap:15px;
border-radius:8px}
.sources a span{
color:var(--orange);
font-size:.8rem;
font-weight:800}

.faq-section{
background:var(--mist)}
.faq-grid{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:70px}
.faq-title{
font-size:clamp(2rem,9.5vw,3.15rem);
line-height:1.02;
overflow-wrap:normal;
word-break:normal;
hyphens:none}
.faq-title span{
display:block;
white-space:nowrap}
.faq-list details{
background:#fff;
border-radius:12px;
margin-bottom:10px;
border:1px solid var(--line);
overflow:hidden}
.faq-list summary{
min-height:54px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:15px 18px;
cursor:pointer;
font-weight:850;
list-style:none}
.faq-list summary::-webkit-details-marker{
display:none}
.faq-list summary span{
color:var(--orange);
font-size:1.3rem}
.faq-list details[open] summary span{
transform:rotate(45deg)}
.faq-list details p{
margin:0;
padding:0 18px 18px;
color:var(--muted)}
.related{
background:#fff}
.related-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px}
.related-grid a{
border:1px solid var(--line);
border-radius:14px;
padding:22px;
display:flex;
flex-direction:column;
min-height:270px;
transition:.2s}
.related-grid a:hover{
border-color:var(--orange);
transform:translateY(-3px);
box-shadow:var(--shadow)}
.related-grid span{
font-size:.68rem;
color:var(--orange);
font-weight:900;
letter-spacing:.09em}
.related-grid h3{
font-family:ui-sans-serif,system-ui,sans-serif;
text-transform:none;
line-height:1.14;
font-size:1.25rem;
margin:14px 0}
.related-grid p{
color:var(--muted);
font-size:.86rem}
.related-grid b{
margin-top:auto;
color:var(--orange);
font-size:.78rem}
.conversion{
background:linear-gradient(110deg,#0e2947,var(--navy));
color:#fff;
padding:64px 0;
border-top:4px solid var(--orange)}
.conversion .wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:45px}
.conversion h2{
font-size:clamp(2.3rem,5vw,4.5rem)}
.conversion p:not(.eyebrow){
color:#b9c7d5;
max-width:700px}
.site-footer{
background:#050c16;
color:#a9b8c7;
padding:60px 0 25px}
.footer-grid{
display:grid;
grid-template-columns:1.5fr .7fr .7fr;
gap:70px}
.footer-brand{
display:flex;
gap:10px;
align-items:center;
color:#fff}
.footer-brand span{
width:38px;
height:38px;
border:2px solid var(--orange);
border-radius:10px;
display:grid;
place-items:center;
color:var(--orange);
font-weight:950}
.footer-grid nav{
display:grid;
align-content:start;
gap:9px}
.footer-grid nav strong{
color:#fff;
margin-bottom:7px}
.footer-grid nav a{
font-size:.85rem}
.footer-grid nav a:hover{
color:var(--orange)}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.1);
padding-top:20px;
margin-top:45px;
display:flex;
justify-content:space-between;
gap:20px;
font-size:.72rem}

.knowledge-index{
padding-top:45px}
.index-controls{
position:sticky;
top:87px;
background:rgba(255,255,255,.96);
z-index:10;
padding:18px 0;
border-bottom:1px solid var(--line);
backdrop-filter:blur(12px)}
.index-controls label{
display:grid;
gap:7px;
max-width:600px}
.index-controls label span{
font-weight:900;
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.08em}
.index-controls input{
min-height:52px;
border:2px solid var(--navy);
border-radius:10px;
padding:0 15px;
font:inherit}
.filter-row{
display:flex;
gap:8px;
overflow-x:auto;
padding-top:13px}
.filter-row button{
white-space:nowrap;
border:1px solid var(--line);
background:#fff;
padding:9px 13px;
border-radius:999px;
font-weight:800;
cursor:pointer}
.filter-row button.active{
background:var(--navy);
color:#fff;
border-color:var(--navy)}
.topic-list{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
padding-top:35px}
.topic-item{
border:1px solid var(--line);
border-radius:14px;
padding:20px;
min-height:230px;
display:flex;
flex-direction:column}
.topic-item:hover{
border-color:var(--orange);
box-shadow:var(--shadow)}
.topic-item>span{
font-size:.65rem;
color:var(--orange);
font-weight:900;
letter-spacing:.1em}
.topic-item h2{
font-family:ui-sans-serif,system-ui,sans-serif;
text-transform:none;
line-height:1.1;
font-size:1.25rem;
margin:16px 0 8px}
.topic-item p{
font-size:.85rem;
color:var(--muted)}
.topic-item b{
margin-top:auto;
color:var(--orange);
font-size:.76rem}
.no-results{
text-align:center;
padding:45px;
color:var(--muted)}
.error-page{
padding:130px 0;
min-height:70vh}
.error-page h1{
font-size:clamp(3rem,7vw,6rem)}

/* Mobile-first basis: 320px en groter. Grotere schermen worden uitsluitend
   met min-width uitgebreid, zodat mobiel nooit een desktopcorrectie is. */
.admin-bar .site-header{
top:46px}
.header-inner{
min-height:72px;
gap:10px}
.race-line{
top:72px}
.admin-bar .race-line{
top:118px}
.brand b,.brand strong{
font-size:.77rem}
.brand small{
font-size:.48rem}
.brand-mark{
width:38px;
height:38px}
.brand{
min-width:0}
.main-nav{
position:fixed;
inset:76px 0 auto;
margin-left:0;
padding:16px 18px 22px;
display:none;
flex-direction:column;
align-items:stretch;
gap:2px;
background:var(--navy);
border-bottom:1px solid rgba(255,255,255,.15)}
.main-nav.open{
display:flex}
.main-nav a,.main-nav a:link,.main-nav a:visited{
padding:8px 4px;
font-size:1rem;
color:#fff;
opacity:1}
.menu-toggle{
display:block;
margin-left:auto}
.menu-toggle span{
display:block;
width:24px;
height:2px;
background:#fff;
margin:5px}
.menu-toggle em{
position:absolute;
clip:rect(0 0 0 0)}
.header-cta{
display:none}
.wrap{
width:min(100% - 24px,1180px)}
.hero{
min-height:720px;
background-image:url('../images/sportmassageolie-hero-900.webp');
background-position:68% center}
.hero-inner{
padding:76px 0 110px}
.hero-shade{
background:linear-gradient(90deg,rgba(7,17,31,.98) 0%,rgba(7,17,31,.82) 58%,rgba(7,17,31,.5) 100%)}
h1{
font-size:clamp(2.55rem,13.5vw,5rem);
overflow-wrap:anywhere;
text-wrap:balance}
h2,h3{
overflow-wrap:anywhere}
.hero-copy>p:not(.eyebrow){
font-size:1rem}
.hero-proof{
gap:13px;
flex-wrap:wrap}
.score-strip .wrap{
grid-template-columns:1fr 1fr}
.score-strip span{
padding:14px 8px;
font-size:.72rem}
.section{
padding:68px 0}
.finder-grid,.faq-grid,.page-hero-grid,.article-grid{
grid-template-columns:1fr}
.finder{
grid-template-columns:1fr;
padding:19px}
.filter-row button{
min-height:44px}
.table-scroll table{
min-width:640px}
.comparison,.calculator,.sources{
padding:20px}
.finder-result{
grid-column:1}
.section-heading.row{
display:block}
.section-heading.row .ghost-link{
margin-top:15px}
.cluster-grid,.related-grid,.topic-list{
grid-template-columns:1fr}
.cluster-card{
min-height:220px}
.page-hero{
padding:56px 0}
.page-hero h1{
font-size:clamp(2.9rem,14vw,4.7rem)}
.reviewed{
gap:8px}
.reviewed span{
width:100%}
.reviewed span+span:before{
display:none}
.content-block{
grid-template-columns:1fr;
gap:5px;
padding-bottom:30px;
margin-bottom:30px}
.article-aside{
position:static;
grid-template-columns:1fr}
.faq-grid{
gap:25px}
.calculator form{
grid-template-columns:1fr}
.calculator button,.calculator output{
grid-column:1}
.sources a{
display:grid}
.conversion .wrap{
display:block}
.conversion .button{
margin-top:20px}
.footer-grid{
grid-template-columns:1fr;
gap:35px}
.footer-bottom{
display:grid}
.index-controls{
top:77px}
.topic-item{
min-height:200px}

@media(min-width:721px){
.admin-bar .site-header{
top:32px}
.header-inner{
min-height:82px;
gap:30px}
.race-line{
top:82px}
.admin-bar .race-line{
top:114px}
.brand b,.brand strong{
font-size:.88rem}
.brand small{
font-size:.54rem}
.brand-mark{
width:42px;
height:42px}
.main-nav{
inset:86px 0 auto}
.wrap{
width:min(1180px,calc(100% - 36px))}
.hero{
min-height:680px;
background-position:64% center}
.hero-inner{
padding:90px 0 125px}
.hero-shade{
background:linear-gradient(90deg,rgba(7,17,31,.98),rgba(7,17,31,.7))}
h1{
font-size:clamp(3.4rem,7.8vw,7.1rem);
overflow-wrap:normal}
.hero-copy>p:not(.eyebrow){
font-size:1.13rem}
.hero-proof{
gap:26px;
flex-wrap:nowrap}
.score-strip .wrap{
grid-template-columns:repeat(4,1fr)}
.score-strip span{
padding:19px 16px;
font-size:.82rem}
.section{
padding:96px 0}
.section-heading.row{
display:flex}
.section-heading.row .ghost-link{
margin-top:0}
.finder{
grid-template-columns:1fr 1fr;
padding:28px}
.comparison,.calculator,.sources{
padding:28px}
.finder-result{
grid-column:1/-1}
.cluster-grid,.related-grid{
grid-template-columns:repeat(2,1fr)}
.topic-list{
grid-template-columns:repeat(2,1fr)}
.cluster-card{
min-height:260px}
.page-hero{
padding:78px 0}
.page-hero h1{
font-size:clamp(3rem,6.5vw,6rem)}
.page-hero aside{
max-width:620px}
.reviewed{
gap:18px}
.reviewed span{
width:auto}
.reviewed span+span:before{
display:inline;
content:"•"}
.content-block{
grid-template-columns:58px 1fr;
gap:20px;
padding-bottom:42px;
margin-bottom:42px}
.article-aside{
grid-template-columns:repeat(3,1fr)}
.faq-grid{
gap:70px}
.calculator form{
grid-template-columns:repeat(3,1fr)}
.calculator button{
grid-column:1/2}
.calculator output{
grid-column:2/4}
.sources a{
display:flex}
.conversion .wrap{
display:flex}
.conversion .button{
margin-top:0}
.footer-grid{
grid-template-columns:1.5fr .7fr .7fr;
gap:70px}
.footer-bottom{
display:flex}
.index-controls{
top:87px}
.topic-item{
min-height:230px}
}

@media(min-width:981px){
.main-nav{
position:static;
inset:auto;
margin-left:auto;
padding:0;
display:flex;
flex-direction:row;
align-items:center;
gap:24px;
background:transparent;
border-bottom:0}
.main-nav a,.main-nav a:link,.main-nav a:visited{
padding:0;
font-size:.86rem;
color:#fff}
.menu-toggle{
display:none}
.header-cta{
display:inline-flex}
.hero{
min-height:690px;
background-image:url('../images/sportmassageolie-hero-1800.webp');
background-position:center}
.hero-shade{
background:linear-gradient(90deg,rgba(7,17,31,.98) 0%,rgba(7,17,31,.91) 31%,rgba(7,17,31,.34) 65%,rgba(7,17,31,.04) 100%)}
.finder-grid{
grid-template-columns:1fr 1fr}
.cluster-grid,.related-grid{
grid-template-columns:repeat(4,1fr)}
.page-hero-grid{
grid-template-columns:1.7fr .7fr}
.article-grid{
grid-template-columns:minmax(0,1fr) 320px}
.article-aside{
position:sticky;
top:120px;
grid-template-columns:1fr}
.faq-grid{
grid-template-columns:.8fr 1.2fr}
.topic-list{
grid-template-columns:repeat(3,1fr)}
}

@media(prefers-reduced-motion:reduce){
*{
scroll-behavior:auto!important;
transition:none!important;
animation:none!important}
}

.finder-result span,.block-number,.article-aside nav a b,.sources a span,.faq-list summary span,.related-grid span,.related-grid b,.topic-item>span,.topic-item b{
color:var(--orange-dark)}