/* ==========================================================================
   SV STOCKSTADT – Stylesheet
   - Farb- & Typo-System
   - Layout (Grid, Container, Sections)
   - Header/Nav, Hero mit Parallax-Video
   - Cards (Match, Result, Club)
   - Buttons inkl. gewünschter Hover-Mask-Animation
   - Map Section, Footer
   - Utilities, Responsive, Motion-Reduction
   ========================================================================== */

/* ===== CSS Variablen (Vereinsfarben Grün/Weiß) ===== */
:root{
  --svs-green-900:#0c3b2e;
  --svs-green-700:#116a4b;
  --svs-green-500:#1ea364;
  --svs-green-400:#28b272;
  --svs-green-300:#48c789;
  --svs-green-200:#74d9a8;
  --svs-green-100:#dff7ea;

  --svs-white:#ffffff;
  --svs-black:#0a0a0a;
  --svs-neutral-900:#111317;
  --svs-neutral-800:#171a20;
  --svs-neutral-700:#1f2430;
  --svs-neutral-600:#2a3140;
  --svs-neutral-500:#3a465b;
  --svs-neutral-400:#51607a;
  --svs-neutral-300:#70819b;
  --svs-neutral-200:#9aacbf;
  --svs-neutral-100:#d8e0ea;

  --container: min(1200px, 92vw);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.25);
  --shadow-2: 0 14px 40px rgba(0,0,0,.35);
  --glass: rgba(255,255,255,.06);
  --glass-strong: rgba(255,255,255,.12);

  --font-display: ui-rounded, "SF Pro Rounded", "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-ui: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

  --pad-section: clamp(48px, 8vw, 120px);
  --pad-block: clamp(20px, 3vw, 36px);
  --vh: 1vh;
}

/* ===== Global Reset (light) ===== */
*{box-sizing:border-box}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}
html{background-color:#1f2120;scroll-behavior:smooth}
body{
  color:var(--svs-white);
  /* leicht transparente Seite-Gradient damit die HTML-Hintergrundfarbe (#1f2120) als unterste Ebene sichtbar wird */
  background: linear-gradient(180deg, rgba(17,19,23,0.85), rgba(23,26,32,0.85));
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Utilities ===== */
.container{width:var(--container);margin-inline:auto}
.section{padding-block:var(--pad-section)}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.h1{font: 800 clamp(28px,4.2vw,42px)/1.15 var(--font-display);letter-spacing:.2px;margin:0 0 8px}
h2,h3{font-family:var(--font-display);letter-spacing:.2px;margin:0 0 .3rem}
p{margin:.35rem 0 0;color:var(--svs-neutral-100)}
.accent{color:var(--svs-green-300)}
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.revealed{opacity:1;transform:translateY(0)}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ===== Header ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(10,10,10,.45);
  backdrop-filter: blur(10px);
  padding-block: 1rem;

  /* HIER anpassen: 100vw -> 100% */
  padding-inline: clamp(12px, calc((100% - var(--container)) / 2), 1rem);

  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand{display:flex;gap:.7rem;align-items:center;font:700 18px/1 var(--font-display)}
.brand span{letter-spacing:.3px}
.main-nav{display:flex;gap:1rem;align-items:center}
.nav-link{
  position: relative;
  padding:.5rem .9rem;border-radius:999px;
  color: rgba(255,255,255,0.72);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  transition: color 0.22s cubic-bezier(.4,1,.6,1), font-size 0.22s cubic-bezier(.4,1,.6,1);
  background: none;
  box-shadow: none;
  overflow: visible;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  width: 0%;
  opacity: 0.92;
  transition: left 0.38s cubic-bezier(.4,1,.6,1), right 0.38s cubic-bezier(.4,1,.6,1), width 0.38s cubic-bezier(.4,1,.6,1);
  pointer-events: none;
  z-index: 2;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: #fff;
  font-size: 1.16rem;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  left: 0;
  right: 0;
  width: 100%;
}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100vh;
  height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden; /* ensure clean cropping of fixed media */
  isolation:isolate;
}
.hero-media{
  position:fixed;
  top:0;left:0;
  width:100vw;
  height:100vh;
  z-index:-1; /* sit behind content */
}
.hero-video{
  position:absolute;
  inset:0;
  width:100vw;
  height: calc(var(--vh, 1vh) * 100);
  min-width:100vw;
  min-height: calc(var(--vh, 1vh) * 100);
  object-fit:cover;
  transform:translateZ(0);
  will-change:transform;
  filter: saturate(1.1) contrast(1.05);
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 90%, #000 99.5%, #000 100%),
    radial-gradient(70% 50% at 50% 40%, rgba(0,0,0,.2), rgba(0,0,0,.75)),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7));
  mix-blend-mode: multiply;
}
.hero-content{position:relative;text-align:center;z-index:2}
.hero-badge{margin-inline:auto;margin-bottom:14px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.hero-title{margin:0 0 6px;font:800 clamp(38px,6vw,64px)/1.03 var(--font-display)}
.hero-title small{display:block;font:600 clamp(14px,1.5vw,18px)/1.3 var(--font-ui);color:var(--svs-neutral-100);margin-top:.4rem}
.hero-subtitle{font-size:clamp(14px,1.3vw,18px);color:var(--svs-neutral-100);margin:.6rem auto 1.1rem;max-width:58ch}
.hero-actions{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}
.scroll-indicator{position:absolute;left:50%;bottom:18px;translate:-50% 0;opacity:.85;font-size:12px;color:var(--svs-neutral-100)}
.scroll-indicator .mouse{
  width:22px;height:34px;border:2px solid rgba(255,255,255,.55);border-radius:999px;margin:.35rem auto 0;position:relative
}
.scroll-indicator .mouse::after{
  content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;background:rgba(255,255,255,.55);
  border-radius:2px;translate:-50% 0;animation:wheel 1.8s infinite
}

/* ===== Buttons – transparente Basis + Mask-Fill Hover ===== */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@600&display=swap');

.button,
.btn,
.animated-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: 10rem;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  letter-spacing: normal;
  background-color: #354b37;            /* Grundfarbe */
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Smooth interactions */
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    background-color 220ms ease,
    box-shadow 220ms ease;
  will-change: transform;
  box-shadow: 0 6px 14px rgba(0,0,0,.20);
}

.button:hover,
.btn:hover,
.animated-button:hover {
  transform: scale(1.06);
  background-color: #2a3c2b;            /* etwas dunkler beim Hover */
  box-shadow: 0 12px 24px rgba(0,0,0,.26);
}

/* Klick/Pressed: Touch und Maus ohne Hover */
.button:active,
.btn:active,
.animated-button:active {
  transform: scale(0.98);
  box-shadow: 0 6px 14px rgba(0,0,0,.20);
}

/* Klick/Pressed während Hover (fühlt sich „eingedrückt“ an) */
.button:hover:active,
.btn:hover:active,
.animated-button:hover:active {
  transform: scale(1.02);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

/* Tastaturfokus sichtbar machen */
.button:focus-visible,
.btn:focus-visible,
.animated-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  /* Optional: leichte Farbe beim Fokus */
  /* background-color: #2f4331; */
}

/* Bevorzugt reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .button,
  .btn,
  .animated-button {
    transition: background-color 0.01ms linear, box-shadow 0.01ms linear;
  }
}

/* ===== Hero (unified rules to avoid duplicate overrides) ===== */
.hero{
  position:relative;
  min-height:100vh;
  height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden; /* keep consistent cropping */
  isolation:isolate;
}

.hero-media{
  /* Anchor the media to the viewport so dynamic browser chrome doesn't push it down */
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  pointer-events:none; /* avoid accidental taps */
}

.hero-video{
  position:absolute;
  top:0; left:0;
  width:100vw;
  /* Use the JS-updated --vh variable to respect mobile browser chrome */
  height: calc(var(--vh, 1vh) * 100);
  min-width:100vw;
  min-height: calc(var(--vh, 1vh) * 100);
  object-fit:cover;
  /* Keep the top edge visible when object-fit crops the video */
  object-position: top center !important;
  transform:translateZ(0);
  will-change:transform;
  filter: saturate(1.1) contrast(1.05);
  transform-origin: top center; /* ensures parallax transforms keep top anchored */
}

.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 90%, #000 99.5%, #000 100%),
    radial-gradient(70% 50% at 50% 40%, rgba(0,0,0,.2), rgba(0,0,0,.75)),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7));
  mix-blend-mode: multiply;
}

.hero-content{position:relative;text-align:center;z-index:2}
.hero-badge{margin-inline:auto;margin-bottom:14px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.hero-title{margin:0 0 6px;font:800 clamp(38px,6vw,64px)/1.03 var(--font-display)}
.hero-title small{display:block;font:600 clamp(14px,1.5vw,18px)/1.3 var(--font-ui);color:var(--svs-neutral-100);margin-top:.4rem}
.hero-subtitle{font-size:clamp(14px,1.3vw,18px);color:var(--svs-neutral-100);margin:.6rem auto 1.1rem;max-width:58ch}
.hero-actions{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}
.scroll-indicator{position:absolute;left:50%;bottom:18px;translate:-50% 0;opacity:.85;font-size:12px;color:var(--svs-neutral-100)}
.scroll-indicator .mouse{
  width:22px;height:34px;border:2px solid rgba(255,255,255,.55);border-radius:999px;margin:.35rem auto 0;position:relative
}
.scroll-indicator .mouse::after{
  content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;background:rgba(255,255,255,.55);
  border-radius:2px;translate:-50% 0;animation:wheel 1.8s infinite
}

/* ===== Match Card / Countdown ===== */
.next-match .match-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding: clamp(18px,3vw,28px);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
}
.match-header{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:16px
}
.club{display:flex;gap:.6rem;align-items:center}
.club span{font:700 clamp(16px,2.2vw,22px)/1 var(--font-display)}
.vs{font:800 20px/1 var(--font-display);color:var(--svs-neutral-100);padding:.5rem 1rem;border-radius:999px;border:1px dashed rgba(255,255,255,.25)}

.match-body{display:grid;gap:18px;align-items:center}
.countdown{
  display:flex;
  gap:28px;
  justify-content:center;
  flex-wrap:wrap;
}
.timebox{
  min-width:200px;
  min-height:110px;
  display:grid;
  place-items:center;
  padding:1.2rem 1.2rem;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  transition: transform 0.22s cubic-bezier(.4,1.6,.6,1), box-shadow 0.22s cubic-bezier(.4,1.6,.6,1);
  cursor: pointer;
}

.timebox:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 0.5rem rgba(72,199,137,0.25), 0 4px 28px 0 rgba(72,199,137,0.18), 0 4px 18px rgba(0,0,0,.18);
  border-color: var(--svs-green-300);
}

.timebox span{
  font: 900 clamp(38px,7vw,64px)/1.05 var(--font-display);
  letter-spacing:1.5px;
}
.timebox label{
  font-size:18px;
  color:var(--svs-neutral-100);
  margin-top:8px;
  font-weight:600;
  letter-spacing:.5px;
}

.match-meta{
  display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin:0;padding:0;list-style:none
}
.match-meta strong{color:var(--svs-green-200)}
.match-actions{display:flex;gap:.9rem;justify-content:center;margin-top:12px;flex-wrap:wrap}

/* ===== Last Result ===== */
.last-result {
  background: #142118;
}
.last-result .result-card{
  background:linear-gradient(180deg,rgba(255, 255, 255, 0.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding: clamp(18px,3vw,28px);
  box-shadow: var(--shadow-1);
}
.result-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:8px}
.result-head .pair{display:grid;grid-template-columns:auto auto auto;gap:14px;align-items:center}
.team{display:flex;gap:.6rem;align-items:center}
.team span{font:700 18px/1 var(--font-display)}
.score{font:800 clamp(28px,5.2vw,44px)/1 var(--font-display)}
.score .divider{padding:0 .2rem;color:var(--svs-neutral-100)}
.result-body .stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:18px 0;
  list-style:none;
  padding:0;
}
.result-body .stats li{
  background:rgba(255, 255, 255, 0.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:1.2rem 1rem;
  min-height:80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition: transform 0.22s cubic-bezier(.4,1.6,.6,1), box-shadow 0.22s cubic-bezier(.4,1.6,.6,1), border-color 0.22s cubic-bezier(.4,1.6,.6,1);
  cursor: pointer;
}

.result-body .stats li:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 0.5rem rgba(72,199,137,0.22), 0 4px 18px rgba(0,0,0,.13);
  border-color: var(--svs-green-300);
}
.summary{color:var(--svs-neutral-100)}

/* ===== Map Section ===== */
.map-section .map-wrap{
  display:grid;gap:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding: clamp(14px,2.8vw,20px);
  box-shadow: var(--shadow-1);
}
#gmap{
  width:100%;height:min(70vh,520px);
  border:0;border-radius:12px;box-shadow:var(--shadow-1)
}
.map-actions{display:flex;gap:.9rem;flex-wrap:wrap}
.map-note{font-size:12px;color:var(--svs-neutral-100);margin:0}

/* ===== Club grid ===== */
.club-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:32px;

  /* Keep grid items aligned at the top so scaling one card doesn't shift or stretch others */
  align-items: start;
}
.club-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding: clamp(14px,2.6vw,20px);
  box-shadow: var(--shadow-1);
  position:relative;
  overflow:hidden;
  transition: transform 0.22s cubic-bezier(.4,1.6,.6,1), box-shadow 0.22s cubic-bezier(.4,1.6,.6,1);
  cursor:pointer;

  /* Create an isolated stacking context for each card so scaling one doesn't visually affect siblings */
  isolation: isolate;
  will-change: transform;
  transform-origin: center top;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display:flex;
  flex-direction:column;
}
.club-card .club-more {
  opacity: 0;
  max-height: 0;
  transition: opacity 0.22s ease, max-height 0.22s ease;
  font-size: 15px;
  color: var(--svs-neutral-100);
  margin-top: 10px;
  pointer-events: none;
}

/* Nur die einzelne Card skalieren/fokusieren, nicht alle */
.club-card:hover,
.club-card:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 0 0 0.5rem rgba(72,199,137,0.18), 0 8px 32px rgba(72,199,137,0.10), 0 4px 18px rgba(0,0,0,.18);
  border-color: var(--svs-green-300);
  z-index: 2;
}

/* Nur die .club-more der gehovten/fokussierten Card öffnen */
.club-card:hover .club-more,
.club-card:focus-visible .club-more {
  opacity: 1;
  max-height: 200px;
  pointer-events: auto;
}

.club-card h3{margin:0 0 6px;font:700 20px/1.2 var(--font-display)}
.club-card p{margin:0;color:var(--svs-neutral-100)}

/* ===== Footer ===== */
.site-footer{padding-top:40px;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.04));
  /* ensure footer is visible above other stacked layers */
  position: relative;
  z-index: 120;
  padding-bottom: 28px;
}
.footer-grid{
  display:grid;grid-template-columns: auto 1fr auto;gap:12px;align-items:center
}
.footer-brand{display:flex;gap:.6rem;align-items:center}
.footer-brand strong{font:800 16px/1 var(--font-display)}
.footer-menu{display:flex;gap:.9rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.footer-menu a{color:var(--svs-neutral-100)}
.footer-menu a:hover{color:var(--svs-white)}

/* Angepasst: kein grüner Rand mehr auf Footer-Buttons */
.footer-cta .btn{border-color:white}
.footer-cta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

.cookie-settings-btn{
  font:600 12px/1 var(--font-display);
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:var(--svs-neutral-100);
  cursor:pointer;
}
.cookie-settings-btn:hover{color:var(--svs-white);border-color:rgba(255,255,255,.6)}

.legal{padding:10px 0 22px;text-align:center;color:var(--svs-neutral-200);font-size:12px}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .result-body .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 700px) {
  .result-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .result-head .pair {
    grid-template-columns: 1fr;
    gap: 6px;
    justify-items: center;
  }
  .score {
    font-size: 32px !important;
    margin: 0 auto;
  }
  .team span {
    font-size: 16px !important;
    text-align: center;
  }
  .match-header{grid-template-columns:1fr 40px 1fr}
  .club-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-cta{align-items:flex-start}
  /* Zeige den Brand-Text auch auf kleinen Bildschirmen */
  .brand span{display:inline-block}
}
@media (max-width:600px){
  /* Mobile: Stapel-Anordnung für Match-Header (SV Stockstadt / VS / Gegner), zentriert */
  .match-header {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* Clubs in voller Breite, Inhalt zentrieren */
  .match-header .club {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    gap: 6px;
  }

  /* VS Pill prominent und zentriert */
  .match-header .vs {
    order: 2;
    margin: 0;
    padding: .4rem .8rem;
    font-size: 18px;
  }

  /* Explizite Reihenfolge: Home (1), VS (2), Away (3) */
  .match-header .club:first-child { order: 1; }
  .match-header .club:last-child { order: 3; }

  /* Teamname zentrieren und besser lesbar machen */
  .club span, .team span {
    text-align: center !important;
    display: block;
    font-size: 16px;
  }

  /* Wappen/Bilder mittig und nicht zu groß */
  .match-header .club img, .club img {
    max-width: 84px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-video{animation:none;transform:none}
  [data-reveal]{transition:none}
}

/* ===== Breitere WhatsApp-Button im Footer ===== */
.footer-cta .btn.animated-button {
  min-width: 220px;
  justify-content: center;
  padding-left: 2.2rem;
  padding-right: 2.2rem;
}

.next-match {
  /* Zurückgesetzt: reines Schwarz, kein Verlauf */
  background: #000;
}

/* Feinabstimmung: dezent leichter Gegenverlauf an der Oberkante der letzten Spiel-Sektion
   so treffen sich Schwarz (unten von .next-match) und Grün (oben von .last-result) weich in der Mitte. */
.section.last-result.alt,
section.last-result.alt,
.last-result.section.alt {
  /*background: linear-gradient(to top,
    rgba(20,33,24,0) 0%,
    rgba(20,33,24,0.18) 6%,
    rgba(20,33,24,0.4) 18%,
    rgba(20,33,24,0.65) 40%,
    #142118 100%
  ) !important;*/
  background-color: #050805 ;
}

/* --- Klare, einfarbige Sektionen (keine Verläufe) --- */
/* Verein (club-section) - ruhiges, angenehm dunkles Grau */
section.club-section,
section.club-section.alt,
.section.club-section.alt {
  background-image: none !important;
  background-color: #1d1f21 !important; /* angenehm, leicht wärmeres Grau */
}

/* Anfahrt / Map - sehr dunkles Grau im Hintergrund */
section.map-section,
section.map-section.alt,
.section.map-section.alt {
  background-image: none !important;
  background-color: #242427 !important; /* dunkles, beruhigendes Grau */
}

/* Stelle sicher, dass die Map-Box selbst keinen Verlauf hat */
.map-section .map-wrap{
  background-image: none !important;
  background-color: #0b0b0f !important;
  border:1px solid rgba(255,255,255,.06);
}

.map-placeholder{
  display:none;
  min-height:400px;
  padding:20px;
  text-align:center;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.18);
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--svs-neutral-100);
}
.map-placeholder.is-active{display:flex}
#gmap.is-hidden{display:none}

.btn.is-disabled,
.animated-button.is-disabled{
  opacity:.45;
  filter:grayscale(1);
  pointer-events:none;
  cursor:not-allowed;
}

.cookie-banner{
  position:fixed;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:10000;
  max-width:920px;
  margin:0 auto;
  padding:18px 20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#0f1114;
  color:var(--svs-white);
  box-shadow:0 16px 48px rgba(0,0,0,.45);
}
.cookie-banner h3{margin:0 0 8px;font:700 18px/1.2 var(--font-display)}
.cookie-banner p{margin:0 0 14px;color:var(--svs-neutral-100);font-size:14px;line-height:1.5}
.cookie-banner__link{color:var(--svs-white);text-decoration:underline}
.cookie-banner__actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btn{
  appearance:none;
  border-radius:999px;
  padding:.6rem 1rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.3);
  background:transparent;
  color:var(--svs-white);
  cursor:pointer;
}
.cookie-btn--primary{
  background:var(--svs-green-400);
  border-color:var(--svs-green-400);
  color:#07140c;
}
.cookie-btn--ghost{background:transparent}
.cookie-btn:focus-visible{outline:2px solid var(--svs-green-300);outline-offset:2px}

@media (max-width: 600px){
  .cookie-banner{left:12px;right:12px;bottom:12px}
  .cookie-banner__actions{flex-direction:column}
  .cookie-btn{width:100%}
}

/* Letztes Spiel (result) - mittleres dunkles Grau */
section.last-result,
section.last-result.alt,
.last-result.section.alt {
  background-image: none !important;
  background-color: #121416 !important; /* dezentes, neutrales Grau */
}
/* Card innen transparent machen, damit die Sektion-Farbe vollständig sichtbar ist */
.last-result .result-card{
  background: transparent !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow: var(--shadow-1);
}

/* Responsive nav: mobile dropdown */
.nav-toggle{ display:none; background:transparent; border:0; font-size:22px; color:var(--svs-white); padding:6px; border-radius:6px; }

@media (max-width:899px){
  .nav-toggle{ display:block; }
  .main-nav{ display:none; position:fixed; top:56px; right:12px; background:rgba(0,0,0,0.86); padding:10px; border-radius:10px; flex-direction:column; gap:8px; z-index:200; min-width:200px; box-shadow: 0 8px 36px rgba(0,0,0,0.6); }
  .main-nav.open{ display:flex; }
  .main-nav .nav-link{ padding:.6rem .9rem; display:block; }
}

@media (min-width:900px){
  .nav-toggle{ display:none; }
  .main-nav{ display:flex; position:static; background:transparent; padding:0; }
}

/* League table (theme-matching styles moved from index.html) */
.league-table thead tr{background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));}
.league-table th{font-weight:700;font-family:var(--font-display);font-size:.95rem}
.league-table td{padding:10px;border-top:1px solid rgba(255,255,255,0.04);color:var(--svs-neutral-100);position:relative;transition:background-color .28s ease, transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;}
.league-table tr:nth-child(even) td{background:rgba(70, 70, 70, 0.07)}
.league-table .team-name{font-weight:600;color:var(--svs-white)}
/* Highlight: Hintergrund der Team-Spalte für SV Stockstadt */
.league-table tr.is-svs {
  background-color: #243d32 !important;
  color: var(--svs-white) !important;
}

/* Damit Textfarbe auch in Links oder speziellen Spalten stimmt: */
.league-table tr.is-svs td {
  color: var(--svs-white) !important;
}

/* Hover-Effekt: Zeile hebt sich von den anderen ab (sheen/float) */
/* Tabelle so vorbereiten, dass Zeilen Platz zum Ausdehnen haben */
.league-table {
  border-collapse: separate;
  border-spacing: 0 4px; /* etwas vertikaler Abstand zwischen Zeilen */
  width: 100%;
}

/* Sanfte Übergänge für Animationen */
.league-table tbody tr {
  transition: 
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Zellen-Übergang für Farbe/Text */
.league-table tbody td {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover-Effekt für jede Zeile */
.league-table tbody tr:hover {
  transform: scale(1.015, 1.08); /* leicht breiter UND höher */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 2; /* über Nachbarn legen */
}

/* Farbe bei Hover */
.league-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.037);
  color: var(--svs-white);
}

/* Spezieller Hover für SVS-Zeile */
.league-table tr.is-svs:hover td {
  background-color: #2e4f45 !important;
  color: var(--svs-white) !important;
}

/* Kleinere Übergangsoptimierung für mobile */
@media (max-width:720px){ .league-table{min-width:600px;} }

/* Verhindere Scrollbars beim Hover der League-Tabelle (behalte Hover-Animation unverändert) */
/* Falls die Tabelle in einem Wrapper mit Klasse .table-scroll liegt, erlauben wir horizontales Scrollen, aber sichtbare Vertikal-Überläufe
   damit gehoverte Zeilen außerhalb der Tabellenfläche schweben können ohne Scrollbars zu erzeugen. */
.table-scroll {
  overflow-x: auto;          /* falls schmaler Viewport: horizontal scrollen erlauben */
  overflow-y: visible;       /* vertikale Überläufe (Hover-Lift) sichtbar lassen, nicht als Scrollbars behandeln */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;     /* Firefox: Scrollleisten ausblenden */
}
.table-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Falls kein .table-scroll vorhanden ist, stellen wir sicher, dass die unmittelbaren Eltern der Tabelle
   keine horizontale Scrollleiste anzeigen, die beim Hovern sichtbar werden würde. */
.last-result,
.last-result .result-card,
.last-result .table-wrap {
  overflow-x: hidden; /* horizontales Scrollen unterbinden, verhindert horizontale Scrollbars beim Scale-Hover */
}

/* Sicherheit: die Tabelle selbst und Zeilen bekommen eine isolierte Stacking-Context, damit Lift nicht das Layout verschiebt */
.league-table {
  isolation: isolate; /* verhindert, dass transformierte Kinder das Layout der Umgebung beeinflussen */
}
.league-table tbody tr {
  transform-origin: center; /* konsistenter Ursprung für die Hover-Transformation */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}