/* Funktionsseiten im Stil von pim-shopware.de - Abschnittsnavigation, nummerierte Abschnitte, Karten, Bewertungen, Video-Slider */
main.fs{--fs-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
html:has(main.fs){scroll-padding-top:0}
/* Sprungziel: Abschnittsnummer steht 24px unter der Leiste (Leiste ca. 47px, Abschnitt oben 96px bzw. mobil 64px Innenabstand) */
main.fs .pim-section{scroll-margin-top:calc(var(--fs-hdr,97px) + 47px + 24px - 96px)}
@media (max-width:700px){main.fs .pim-section{scroll-margin-top:calc(var(--fs-hdr,93px) + 44px + 20px - 64px)}}

/* Sprungleiste */
.section-nav{position:sticky;top:var(--fs-hdr,97px);z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.section-nav .container{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:9px;padding-bottom:9px;scroll-behavior:smooth}
.section-nav .container::-webkit-scrollbar{display:none}
.section-nav a{flex:0 0 auto;display:inline-flex;align-items:center;padding:7px 14px;border-radius:100px;font-size:13.5px;font-weight:600;line-height:1;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.section-nav a:hover{background:var(--bg-2);color:var(--navy)}
.section-nav a[aria-current="true"]{background:var(--navy);color:#fff}
.section-nav a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Abschnittskopf mit Sechseck-Nummer */
main.fs .pim-section-head{display:grid;grid-template-columns:80px minmax(0,760px);gap:28px;max-width:none;align-items:start}
.section-num{font-family:'Manrope',system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;width:72px;height:62.35px;display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-weight:700;font-size:20px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
main.fs .pim-eyebrow{font-family:var(--fs-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--primary);font-weight:600;gap:0;margin-bottom:14px}
main.fs .pim-eyebrow::before{display:none}
main.fs .pim-section-lead a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
main.fs .pim-section-head h2{overflow-wrap:break-word;hyphens:auto}

/* Karten */
main.fs .pim-feat{border-radius:12px;padding:28px 26px;position:relative}
main.fs .pim-feat:hover{border-color:var(--primary-200,#bcd3f5);transform:translateY(-2px);box-shadow:0 10px 28px rgba(21,101,216,.10)}
main.fs .pim-feat-label{font-family:var(--fs-mono);font-size:11px;letter-spacing:.14em;border-top:0;padding:0;margin-bottom:10px;color:var(--primary)}
main.fs .pim-feat-label.coral,main.fs .pim-feat-label.navy{color:var(--primary)}
main.fs .pim-feat h3{font-size:19px}

/* Bewertungen */
.rv-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 28px}
.rv-score{font-size:40px;font-weight:800;color:var(--navy);line-height:1}
.rv-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0 -4px;padding:4px}
.rv-viewport::-webkit-scrollbar{display:none}
.rv-viewport:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:10px}
.rv-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;align-items:stretch}
.rv-card{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:26px 24px;margin:0}
.rv-stars{display:flex;gap:3px;margin-bottom:14px}
.rv-star{width:17px;height:17px;flex:0 0 auto;fill:var(--coral);display:block}
.rv-star.off{fill:var(--line)}
.rv-title{font-weight:700;font-size:17px;line-height:1.35;color:var(--navy);margin:0 0 10px}
.rv-text{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 18px}
.rv-author{margin:auto 0 0;font-weight:600;font-size:14px;color:var(--navy);border-top:1px solid var(--line);padding-top:14px}
.rv-meta{display:block;font-family:var(--fs-mono,monospace);font-size:12px;font-weight:400;color:var(--muted);margin-top:3px}
.rv-controls{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:16px;margin-top:26px}.rv-nav{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;padding:0;border:0;border-radius:0;cursor:pointer;background:#1565d8;color:#fff;box-shadow:none;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transition:background .15s,transform .15s}.rv-nav:hover:not(:disabled){background:#0f4fb0}.rv-nav:active:not(:disabled){transform:scale(.94)}.rv-nav:focus-visible{outline:none;background:#0a1b35}.rv-nav:disabled{background:#e6e9f0;color:#5b6478;cursor:default;transform:none;opacity:1}.rv-nav svg{width:18px;height:18px;display:block}.rv-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.rv-dot{width:8px;height:8px;padding:0;border:0;border-radius:100px;background:#e6e9f0;cursor:pointer;transition:width .2s,background .2s}.rv-dot[aria-current="true"]{width:24px;background:#1565d8}

/* Video-Slider wie auf pim-shopware.de */


main.fs .staw-slider .staw-slider-playicon svg{margin-left:0}
main.fs .staw-slider-track:has(> .staw-slider-slide:only-child) + .staw-slider-nav{grid-template-columns:1fr}
main.fs .staw-slider-track:has(> .staw-slider-slide:only-child) + .staw-slider-nav .staw-slider-btn,
main.fs .staw-slider-track:has(> .staw-slider-slide:only-child) + .staw-slider-nav .staw-slider-meta{display:none}
.fs-videolinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:22px 0 0;font-size:14.5px;font-weight:600}
.fs-videolinks a{color:var(--primary);text-decoration:none}.fs-videolinks a::after{content:" \2192"}.fs-videolinks a:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:1024px){.rv-track{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:700px){
.section-nav a{font-size:13px;padding:6px 12px}
main.fs .pim-section-head{grid-template-columns:1fr;gap:16px}
.section-num{width:58px;height:50.23px;font-size:17px}
main.fs .pim-feat{padding:22px 18px}
.rv-track{grid-auto-columns:100%;gap:16px}
.rv-card{padding:22px 20px}
}
@media (max-width:600px){
main.fs .staw-slider .staw-slider-playicon{top:auto;left:auto;right:10px;bottom:10px;width:44px;height:44px;margin:0}
main.fs .staw-slider .staw-slider-playicon svg{width:22px;height:22px}
main.fs .staw-slider .staw-slider-badge{left:10px;bottom:10px;padding:4px 10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.section-nav .container,.rv-viewport{scroll-behavior:auto}.section-nav a,.rv-nav{transition:none}}

@media (max-width:700px){.rv-controls{grid-template-columns:40px 1fr 40px;gap:10px}.rv-nav{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.rv-nav,.rv-dot{transition:none}}
main.fs .fv{margin:40px 0 0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}main.fs .pim-section:not(.alt) .fv{background:var(--bg-2)}main.fs .fv-stage{position:relative;padding:0 0 46px;min-width:0}main.fs .fv-stage::before{content:"";position:absolute;right:4%;top:-18px;width:150px;height:150px;background:var(--primary);opacity:.1;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}main.fs .fv-back{position:relative;display:block;width:84%;height:auto;border-radius:10px;box-shadow:0 18px 40px -14px rgba(10,31,74,.32)}main.fs .fv-front{position:absolute;right:0;bottom:0;width:56%;height:auto;max-height:82%;object-fit:cover;object-position:left top;border-radius:10px;border:4px solid #fff;box-shadow:0 24px 50px -10px rgba(10,31,74,.42)}main.fs .fv-stat{position:absolute;left:-10px;bottom:6px;background:var(--navy);color:#fff;border-radius:12px;padding:11px 15px;font-size:13px;line-height:1.3;font-weight:600;box-shadow:0 12px 26px rgba(10,31,74,.25);z-index:2}main.fs .fv-stat strong{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff}main.fs .fv-body{min-width:0}main.fs .fv-eb{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--primary);font-weight:600;margin-bottom:12px}main.fs .fv-steps{list-style:none;counter-reset:fv;margin:0 0 18px;padding:0}main.fs .fv-steps li{counter-increment:fv;position:relative;padding:0 0 10px 40px;margin:0;font-size:15px;line-height:1.45;color:var(--ink)}main.fs .fv-steps li::before{content:counter(fv);position:absolute;left:0;top:-2px;width:27px;height:24px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:12.5px;font-weight:700;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}main.fs .fv-lab{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:8px}main.fs .fv-chips{display:flex;flex-wrap:wrap;gap:7px}main.fs .fv-chips span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.3}main.fs .fv-chips span::before{content:"";flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:#1a8f5a url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M6 10.3l2.7 2.7 5.4-5.6%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/12px no-repeat}main.fs .fv-more{display:inline-block;margin-top:16px;font-weight:700;font-size:14.5px}@media (max-width:1100px){main.fs .fv{grid-template-columns:1fr;gap:24px}}@media (max-width:640px){main.fs .fv{padding:18px;border-radius:14px}main.fs .fv-back{width:100%}main.fs .fv-front{display:none}main.fs .fv-stage{padding-bottom:0}main.fs .fv-stage::before{display:none}main.fs .fv-stat{position:relative;left:auto;bottom:auto;display:inline-block;margin:-22px 0 0 12px}}
.section-nav.fl .container{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px);mask-image:linear-gradient(90deg,transparent 0,#000 56px)}
.section-nav.fr .container{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent 100%)}
.section-nav.fl.fr .container{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)}