/* Sideways Motorsport – globale Stile.
   Die meisten Gestaltungswerte stehen (wie im Claude-Design-Entwurf) direkt im Markup.
   Hier: Grundlagen, Werte je Bildschirmbreite, Hover-/Fokus-Zustände und Barrierefreiheit. */

html{scroll-behavior:smooth;scroll-padding-top:60px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:#fff;color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:#0b5cad;text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(11,92,173,.18)}
img{max-width:100%}

/* Werte, die von der Bildschirmbreite abhängen (im Entwurf per JavaScript gesetzt) */
:root{
  --hero-aspect:16/9; --gal-cols:4; --gal-row:calc((100cqw - 30px) / 4 / 1.5);
  --desc-pad:calc(clamp(78px,12vw,112px) + clamp(12px,3vw,28px) + 4px);
  --m-wrap-place:center; --m-wrap-pad:clamp(10px,3vw,40px); --m-max-h:calc(100dvh - 32px);
  --m-radius:34px; --m-img-pos:sticky; --lb-max-h:calc(100dvh - 164px); --thumb-x:translateX(0%);
}
html[lang="en"]{--thumb-x:translateX(100%)}
@media (max-width:733px){
  :root{--hero-aspect:4/5; --gal-cols:2; --gal-row:calc((100cqw - 10px) / 2 / 1.5); --desc-pad:4px;
    --m-wrap-place:end center; --m-wrap-pad:0; --m-max-h:calc(100dvh * 0.92); --m-radius:28px 28px 0 0; --m-img-pos:relative}
  .nur-desktop-modal{display:none!important}
}
@media (min-width:734px){.nur-mobil-modal{display:none!important}}
@media (max-width:833px){.nur-desktop{display:none!important}}
@media (min-width:834px){.nur-mobil{display:none!important}}

/* KI-Kennzeichnung */
.ki-label{position:absolute;display:flex;align-items:center;font-size:10px;font-weight:500;letter-spacing:0.02em;line-height:1.2;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,0.34);backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);border:0.5px solid rgba(255,255,255,0.6);box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.8), 0 1px 6px rgba(0,0,0,0.06);color:rgba(29,29,31,0.8)}

/* ---------- Barrierefreiheit ---------- */
/* Sichtbarer Tastaturfokus – auch für Elemente mit all:unset */
:focus-visible{outline:2px solid #0b5cad!important;outline-offset:3px!important}
.fokus-hell:focus-visible{outline-color:#fff!important}
#inhalt:focus,#inhalt:focus-visible{outline:none!important}
/* Nur für Screenreader */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Bezugsrahmen für unsichtbare Screenreader-Texte in Slidern (verhindert Überbreite) */
[data-card],a{position:relative}
/* Lange Wörter in Überschriften auf schmalen Bildschirmen trennen (z. B. „Datenschutzerklärung“) */
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Sprunglink */
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:#1d1d1f;color:#fff;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:600;transition:top .2s}
.skip-link:focus{top:12px;text-decoration:none}
/* Links im Fließtext zusätzlich unterstreichen (nicht nur Farbe) */
main p a{text-decoration:underline;text-underline-offset:3px}
/* Ausgegraute Pfeile an Slider-Enden */
[aria-disabled="true"]{cursor:default!important}
/* Eingeklappte Bereiche */
[data-panel][inert]{visibility:hidden}
[data-panel]:not([inert]){visibility:visible}
/* Pause-Schalter Partner-Slider */
.pause-btn{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.06);color:#1d1d1f;display:grid;place-items:center;font-size:15px}
.pause-btn:hover{background:rgba(0,0,0,0.1)}
/* Formularfelder */
.feld:focus{border-color:#0b5cad!important;box-shadow:0 0 0 4px rgba(11,92,173,0.15)!important}
/* Bodyscroll-Sperre bei offenen Dialogen */
html.gesperrt{overflow:hidden}
[hidden]{display:none!important}

/* ---------- Hover-, Klick- und Fokus-Zustände aus dem Entwurf ---------- */
.fx-h1:hover{text-decoration:none !important;background:#0a4f96 !important}
.fx-h1:active{transform:scale(0.97) !important}
.fx-h2:active{opacity:0.7 !important}
.fx-h3:active{opacity:0.7 !important}
.fx-h4:active{opacity:0.6 !important}
.fx-h5:hover{background:rgba(11,92,173,0.06) !important}
.fx-h5:active{transform:scale(0.97) !important}
.fx-h6:hover{background:rgba(0,0,0,0.1) !important}
.fx-h6:active{transform:scale(0.92) !important}
.fx-h7:hover{background:rgba(0,0,0,0.1) !important}
.fx-h7:active{transform:scale(0.92) !important}
.fx-h8:hover{transform:scale(1.015) !important}
.fx-h8:active{transform:scale(0.985) !important}
.fx-h9:hover{background:rgba(0,0,0,0.1) !important}
.fx-h9:active{transform:scale(0.92) !important}
.fx-h10:hover{background:rgba(0,0,0,0.1) !important}
.fx-h10:active{transform:scale(0.92) !important}
.fx-h11:hover{transform:scale(1.012) !important}
.fx-h11:active{transform:scale(0.988) !important}
.fx-h12:focus-visible{outline:2px solid #0b5cad !important;outline-offset:3px !important}
.fx-h13:hover{transform:scale(1.04) !important}
.fx-h14:hover{background:rgba(0,0,0,0.1) !important}
.fx-h14:active{transform:scale(0.92) !important}
.fx-h15:hover{background:rgba(0,0,0,0.1) !important}
.fx-h15:active{transform:scale(0.92) !important}
.fx-h16:hover{transform:translateY(-3px) !important;box-shadow:0 12px 30px rgba(0,0,0,0.08) !important;text-decoration:none !important}
.fx-h17:hover{text-decoration:none !important;background:#0a4f96 !important}
.fx-h17:active{transform:scale(0.97) !important}
.fx-h18:hover{text-decoration:none !important;transform:translateY(-4px) !important;box-shadow:0 18px 40px rgba(0,0,0,0.10) !important}
.fx-h18:active{transform:scale(0.98) !important}
.fx-h19:hover{text-decoration:none !important;background:#f0f4fa !important}
.fx-h19:active{transform:scale(0.97) !important}
.fx-h20:hover{text-decoration:none !important;transform:scale(1.01) !important}
.fx-h20:active{transform:scale(0.99) !important}
.fx-h21:hover{text-decoration:none !important;transform:scale(1.01) !important}
.fx-h21:active{transform:scale(0.99) !important}
.fx-h22:hover{text-decoration:none !important;transform:scale(1.015) !important}
.fx-h22:active{transform:scale(0.985) !important}
.fx-h23:hover{text-decoration:underline !important}
.fx-h24:hover{background:rgba(255,255,255,0.92) !important}
.fx-h24:active{transform:scale(0.92) !important}
.fx-h24:focus-visible{outline:2px solid #0b5cad !important;outline-offset:2px !important}
.fx-h25:hover{background:rgba(0,0,0,0.06) !important}
.fx-h25:active{transform:scale(0.9) !important}
.fx-h26:hover{background:rgba(0,0,0,0.06) !important}
.fx-h26:active{transform:scale(0.9) !important}
.fx-h27:active{transform:scale(0.92) !important}
.fx-h27:focus-visible{outline:2px solid #0b5cad !important;outline-offset:2px !important}
.fx-n1:hover{color:#000 !important;text-decoration:none !important}
.fx-n2:hover{text-decoration:none !important}
.fx-n3:hover{text-decoration:none !important}
.fx-n4:hover{text-decoration:none !important;background:#000 !important}
.fx-n4:active{transform:scale(0.96) !important}
.fx-n5:active{opacity:0.6 !important}
.fx-n6:hover{background:rgba(0,0,0,0.1) !important}
.fx-n7:active{opacity:0.6 !important}
.fx-n7:hover{text-decoration:none !important}
.fx-n8:hover{text-decoration:none !important}
.fx-n9:hover{text-decoration:none !important}
.fx-f1:hover{text-decoration:none !important}
.fx-f2:hover{text-decoration:none !important}
.fx-k1:focus-visible{border-color:#0b5cad !important;box-shadow:0 0 0 4px rgba(11,92,173,0.16) !important}
.fx-k2:focus-visible{border-color:#0b5cad !important;box-shadow:0 0 0 4px rgba(11,92,173,0.16) !important}
.fx-k3:hover{background:#0a4f96 !important}
.fx-k3:active{transform:scale(0.97) !important}
.fx-k3:focus-visible{box-shadow:0 0 0 4px rgba(11,92,173,0.25) !important}
.fx-k4:hover{text-decoration:underline !important}
.fx-p1:hover{text-decoration:none !important;background:#0a4f96 !important}
.fx-p1:active{transform:scale(0.97) !important}
.fx-p2:hover{transform:translate(-50%,-50%) scale(1.1) !important}
.fx-p3:active{transform:scale(0.96) !important}