/* MSC Nußloch – eigenständige Auswahlseite, Variante 1 FINAL */
:root{--night:#071625;--night2:#0b2034;--white:#fff;--muted:#aebfd1;--blue:#138bf6;--blue2:#42baff;--yellow:#ffe100}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);font-family:Arial,Helvetica,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #ffe168;outline-offset:5px}
.site-shell{min-height:100dvh;display:flex;flex-direction:column;overflow:clip;
  background-color:#071523;
  background-image:linear-gradient(180deg,rgba(3,14,26,.38) 0%,rgba(3,13,25,.43) 16%,rgba(3,15,28,.65) 47%,rgba(3,15,28,.88) 85%,#071523 100%),url("kartbahn-hintergrund.webp");
  background-position:center center,center 40%;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
}

.wrap{width:min(1380px,calc(100% - 64px));margin-left:auto;margin-right:auto}
.site-header{border-bottom:1px solid #32516b66;background:#061320be;backdrop-filter:blur(12px)}
.header-inner{max-width:1450px;margin:auto;padding:15px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;gap:14px;align-items:center;min-width:0}
.brand img{display:block;width:65px;height:65px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 4px 8px #0006)}
.brand-text{display:flex;flex-direction:column;gap:5px;white-space:nowrap}
.brand-text strong{font-size:28px;line-height:1;letter-spacing:-.8px;font-weight:900}
.brand-text strong span{color:#fff}
.brand-text small{color:#acc4dd;font-weight:700;font-size:11px;letter-spacing:1.15px;text-transform:uppercase}
.top-nav{display:flex;align-items:center;gap:12px}
.top-nav a{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.5px;padding:12px 18px;border-radius:9px;border:1px solid #6a8aaa66;background:#0b2a4566;transition:background .15s,border-color .15s}
.top-nav a:hover{border-color:#67bcf7;background:#13518480}
.top-nav a:last-child{background:#0b2a4566;border-color:#6a8aaa66}
.top-nav a:last-child:hover{background:#13518480;border-color:#67bcf7}
.top-nav span{font-size:18px;line-height:1}
main{flex:1}
.intro{text-align:center;padding-top:53px;padding-bottom:39px}
.overline{font-size:11px;letter-spacing:2.65px;color:#7fcaff;font-weight:900;margin:0 0 16px;display:inline-flex;align-items:center;gap:11px}
.overline-line{width:30px;height:3px;background:#23a5ff;transform:skewX(-25deg)}
h1{font-weight:950;font-style:italic;line-height:1.07;letter-spacing:-1.3px;font-size:clamp(29px,4vw,54px);margin:0;text-transform:uppercase}
h1 em{color:#40b8ff;font-style:inherit}
.intro-text{max-width:750px;margin:17px auto 0;font-size:16px;color:#c5d3e2;line-height:1.6}
.selection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px}
.selection-card{position:relative;min-height:555px;border-radius:19px;border:1px solid #769dc34f;overflow:hidden;display:block;isolation:isolate;background:#0e263b;box-shadow:0 20px 52px #0005;transition:transform .25s,border-color .25s,box-shadow .25s}
.selection-card:hover{transform:translateY(-5px);border-color:#77c5ff;box-shadow:0 28px 70px #0008}
.selection-card .card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:-2;transition:transform .65s}
.selection-card.club .card-image{object-position:48% 47%}
.selection-card.kart .card-image{object-position:49% 47%}
.selection-card:hover .card-image{transform:scale(1.055)}
.card-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#05142420 0%,#05142468 30%,#04111eea 70%,#04111efa 100%),linear-gradient(90deg,#05152566 0%,transparent 75%)}
.club .card-overlay{background:linear-gradient(180deg,#0b121e1a 0%,#06132265 31%,#05131de6 70%,#04111efa 100%),linear-gradient(90deg,#0f1c2255,transparent 74%)}
.corner-num{position:absolute;top:25px;left:27px;display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:1.7px;font-weight:900;color:#f0f9ff;text-shadow:0 1px 6px #000b}
.corner-line{height:1px;width:28px;background:#a9c7e0a6}
.card-content{position:absolute;left:0;right:0;bottom:0;padding:27px 32px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.card-category{font-size:11px;color:#addbff;font-weight:900;letter-spacing:1.8px;display:inline-flex;align-items:center;gap:10px;margin-bottom:12px}
.club .card-category{color:#fff0a6}
.category-dot{width:7px;height:7px;border-radius:50%;background:#43bdff;box-shadow:0 0 10px #35b8ff}
.club-dot{background:#ffe100;box-shadow:0 0 10px #ffe10088}
.card-title{display:block;font-size:clamp(32px,3.5vw,53px);line-height:1;letter-spacing:-1.2px;text-transform:uppercase;font-style:italic;font-weight:950;max-width:570px;text-shadow:0 3px 6px #0007}
.card-title span{color:#45baff}
.club .card-title span{color:#ffe67d}
.card-description{max-width:570px;font-size:15px;line-height:1.65;color:#e4edf6;margin-top:15px}
.card-tags{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0 22px}
.card-tags span{padding:7px 10px;background:#d5e7f614;border:1px solid #d5e7f624;border-radius:6px;font-size:10px;font-weight:700;color:#edf7ff}
.card-cta{width:100%;border-radius:9px;background:#164871;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 11px 11px 19px;color:white;letter-spacing:.4px;font-size:12px;font-weight:900;transition:background .2s}
.club .card-cta{background:#164871}
.selection-card:hover .card-cta{background:#149dff}
.arrow-circle{height:32px;width:32px;display:grid;place-items:center;background:#ffffff24;border-radius:6px;font-size:18px;flex-shrink:0}
.selection-hint{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:26px;margin-bottom:46px;color:#8ea9c3;text-align:center;font-size:12px;letter-spacing:.25px}
.hint-icon{color:#5bbaff;font-size:16px}
.site-footer{border-top:1px solid #2c4c6677;background:#04111e}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:23px}
.footer-info{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#a7bacb}
.footer-info strong{color:#e4eff7;font-size:12px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:#a8c6df}
.footer-links a:hover{text-decoration:underline;text-underline-offset:3px;color:white}
@media(max-width:1040px){.selection-card{min-height:550px}.card-content{padding:22px 22px 25px}.card-title{font-size:clamp(31px,4vw,44px)}.card-tags{margin:12px 0 18px}.intro{padding-top:46px}.wrap{width:min(1380px,calc(100% - 40px))}}
@media(max-width:760px){.selection{grid-template-columns:1fr;gap:18px}.selection-card{min-height:490px}.card-title{font-size:clamp(34px,7vw,52px)}.card-description{font-size:15px}.intro{padding-top:40px;padding-bottom:31px}.footer-inner{flex-direction:column;align-items:flex-start;gap:17px}.selection-hint{margin-bottom:36px}.top-nav{gap:8px}.top-nav a{padding:10px 12px;font-size:11px}}
@media(max-width:560px){.wrap{width:calc(100% - 30px)}.header-inner{padding:13px 15px;gap:10px}.brand img{width:48px;height:48px}.brand{gap:9px}.brand-text strong{font-size:20px}.brand-text small{font-size:8px;letter-spacing:.25px}.top-nav{display:none}.intro{padding-top:33px;padding-bottom:26px}.intro h1{font-size:clamp(29px,8vw,38px);letter-spacing:-.6px}.intro-text{font-size:14px;line-height:1.62;margin-top:13px}.overline{font-size:9px;letter-spacing:1.4px;margin-bottom:14px}.selection-card{min-height:490px;border-radius:13px}.corner-num{top:20px;left:20px}.card-content{padding:20px 19px 20px}.card-category{font-size:10px;letter-spacing:1px}.card-title{font-size:clamp(32px,9.5vw,43px)}.card-description{font-size:14px;margin-top:12px}.card-tags{margin:12px 0 17px}.card-tags span{font-size:10px}.card-cta{font-size:11px}.selection-hint{font-size:11px}.footer-links{gap:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Version 1.1 – Kartbahn als originaler, leicht abgedunkelter Seitenhintergrund. */
.intro h1{text-shadow:0 3px 12px rgba(0,0,0,.48)}
.intro-text{text-shadow:0 1px 6px rgba(0,0,0,.78)}
@media(max-width:760px){
  .site-shell{background-position:center center,54% center;
    background-image:linear-gradient(180deg,rgba(3,14,26,.69) 0%,rgba(3,13,25,.62) 18%,rgba(3,15,28,.78) 44%,rgba(3,15,28,.93) 82%,#071523 100%),url("kartbahn-hintergrund.webp")}
}


/* V1.2: mobile Kartbahn-Panoramafahrt.
   Auf Handy/Tablet bewegt sich die Original-Luftaufnahme langsam von rechts nach links.
   Die dunkle Ebene und die Auswahlkarten bleiben ruhig und gut lesbar. */
@media (max-width:760px) {
  .site-shell {
    position:relative;
    isolation:isolate;
    background:transparent;
  }
  .site-shell::before,
  .site-shell::after {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
  }
  .site-shell::before {
    z-index:-2;
    background-image:url("kartbahn-hintergrund.webp");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:100% 45%;
    animation:msc-strecke-pan 32s ease-in-out infinite alternate;
    will-change:background-position;
  }
  .site-shell::after {
    z-index:-1;
    background:linear-gradient(180deg,rgba(3,14,26,.54) 0%,rgba(3,13,25,.55) 24%,rgba(3,15,28,.72) 60%,rgba(3,15,28,.88) 100%);
  }
}
@keyframes msc-strecke-pan {
  from { background-position:100% 45%; }
  to   { background-position:0% 45%; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .site-shell::before {
    animation:none;
    background-position:50% 45%;
    will-change:auto;
  }
}


/* V1.4 – Text klar lesbar, ohne die Kartbahn durch eine große Hintergrundbox zu verdecken.
   Keine flächige Blende hinter der Überschrift; nur Schriftschatten und ein kleiner Kicker. */
.intro {
  position: relative;
  isolation: auto;
}
.intro::before,
.intro::after {
  content: none !important;
  display: none !important;
  background: none !important;
  backdrop-filter: none !important;
}
.intro .overline {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid rgba(128,204,255,.36);
  border-radius: 999px;
  background: rgba(4,18,35,.24);
  color: #9bdcff;
  text-shadow: 0 2px 5px rgba(0,0,0,.85);
}
.intro h1 {
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.95),
               0 5px 14px rgba(0,0,0,.82);
}
.intro h1 em {
  color: #51c4ff;
  text-shadow: 0 2px 3px rgba(0,0,0,.96),
               0 5px 12px rgba(0,0,0,.82);
}
.intro .intro-text {
  color: #f0f6fc;
  font-weight: 600;
  text-shadow: 0 1px 2px #000,
               0 3px 9px rgba(0,0,0,.96);
}
@media(max-width:560px) {
  .intro .overline { padding: 6px 10px; }
  .intro .intro-text { font-size: 14px; }
}

/* V1.6: Beide Karten-Buttons im ursprünglichen Vereinsblau; beide Header-Buttons im ursprünglichen Vereinsbereich-Stil. */



/* V1.8 – neues Strecken-Kart-Motiv im rechten Auswahlbereich */
.selection-card.kart .card-image {
  z-index:-2;
  object-fit:cover;
  object-position:73% 45%;
  transform:scale(1.005);
  filter:saturate(1.08);
  transition:transform .6s ease;
}
.selection-card.kart:hover .card-image {
  transform:scale(1.055);
}
.selection-card.kart .card-overlay {
  z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(3,13,23,.13) 0%,
      rgba(3,13,23,.18) 25%,
      rgba(3,13,23,.50) 52%,
      rgba(3,13,23,.88) 76%,
      rgba(3,13,23,.98) 100%),
    linear-gradient(90deg,rgba(3,13,23,.31) 0%,transparent 75%);
}
@media(max-width:760px){
  .selection-card.kart .card-image { object-position:78% 50%; }
}
@media(max-width:560px){
  .selection-card.kart .card-image { object-position:78% 42%; }
  .selection-card.kart .card-overlay {
    background:linear-gradient(180deg,
      rgba(3,13,23,.11) 0%,
      rgba(3,13,23,.17) 23%,
      rgba(3,13,23,.54) 49%,
      rgba(3,13,23,.90) 73%,
      rgba(3,13,23,.99) 100%);
  }
}