/* ═══════════════════════════════════════════════════════
   ASV Hannover — Mobile CSS  (vollständiger Neubau)
   ═══════════════════════════════════════════════════════

   Philosophie:
   Die inline <style>-Blöcke in jeder HTML-Seite definieren
   das Desktop-Layout. Diese Datei übernimmt ALLES unterhalb
   von 1024px und wird auf allen Seiten geladen.

   Breakpoints:
     mobile  < 768px   ← Hauptziel: iPhone (alle Modelle)
     tablet  768–1023px
     desktop ≥ 1024px  (nur Hamburger-Ausblendung)

   iPhone-Safari-Fixes sind überall eingebaut.
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   iOS MODAL BODY LOCK
   overflow:hidden allein reicht auf iOS Safari nicht —
   position:fixed auf dem body verhindert Hintergrundscroll.
   Die JS-Modal-Handler setzen scroll-top und restoren ihn.
   ═══════════════════════════════════════════════════════ */
body.modal-open {
  position: fixed;
  width: 100%;
  overflow-y: scroll; /* verhindert Layout-Shift durch Scrollbar-Wegfall */
}

/* ═══════════════════════════════════════════════════════
   0.  SLIM FOOTER (Sub-Seiten)  — global, alle Größen
   ═══════════════════════════════════════════════════════ */

.site-footer--slim {
  background: #030303;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 28px 56px;
}

.footer-slim-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-slim-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer--slim .footer-brand-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f0ede5;
}

.footer-slim-sep {
  color: rgba(255, 255, 255, 0.18);
  font-family: 'IBM Plex Mono', monospace;
}

.footer-slim-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #1b8c3d;
}

.site-footer--slim .footer-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  border: none;
  padding: 0;
}

.site-footer--slim .footer-copy {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.18);
}

.site-footer--slim .footer-legal {
  display: flex;
  gap: 16px;
}

.site-footer--slim .footer-legal a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: color 0.2s;
  text-transform: uppercase;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.site-footer--slim .footer-legal a:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* Mobile: slim footer zentriert, 2 Zeilen */
@media (max-width: 767px) {
  .site-footer--slim {
    /* Kein extra padding-bottom — body hat bereits padding-bottom:80px für Chatbot */
    padding: 24px 16px 28px;
  }

  .footer-slim-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .footer-slim-brand {
    justify-content: center;
  }

  .site-footer--slim .footer-bottom {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .site-footer--slim .footer-legal {
    justify-content: center;
    gap: 20px;
  }
}

/* Streetsports logo im Footer */
.footer-ss-logo {
  height: 32px;
  width: auto;
  display: block;
  opacity: 0.85;
  flex-shrink: 0;
  /* Kein Filter — Original-Farben behalten */
}

/* ASV-Logo im slim Footer aller Sub-Pages */
.footer-asv-logo {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(27, 140, 61, 0.3);
  flex-shrink: 0;
  display: block;
}

/* Streetsports hero: auf Mobile kürzer — zweite Sektion soll unten lugen.
   section.hero--streetsports hat höhere Spezifität als .hero (Element+Klasse),
   um den generischen .hero { height:100svh } in Section 6 zu überschreiben.  */
@media (max-width: 767px) {
  section.hero--streetsports {
    height: 72svh !important;
    min-height: 320px !important;
    max-height: 600px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   1.  GLOBALE SAFARI / iOS FIXES  (alle Bildschirmgrößen)
   ═══════════════════════════════════════════════════════ */

/* Verhindert automatische Schriftgrößen-Anpassung durch iOS */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Kein horizontales Scrollen, iOS Overscroll-Hintergrund = Seitenfarbe */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  background-color: #080808; /* verhindert weißen/schwarzen iOS-Bounce-Streifen */
}
html {
  overscroll-behavior-y: none; /* kein iOS-Bounce-Effekt */
}

/* Bilder nie breiter als ihr Container */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Verhindert Tap-Highlight-Blitz auf iOS */
a, button, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Alle Bilder sofort sichtbar (kein opacity:0 Trap) */
img[loading="lazy"] {
  opacity: 1;
}

/* iOS: Form-Inputs zoomen nicht in Felder hinein wenn font-size < 16px */
input, select, textarea {
  font-size: max(16px, 1em);
}


/* ═══════════════════════════════════════════════════════
   1.  HAMBURGER-BUTTON  (global, alle Seiten)
   ═══════════════════════════════════════════════════════ */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 600;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ═══════════════════════════════════════════════════════
   2.  MOBILES NAV-DRAWER  (global, alle Seiten)
   ═══════════════════════════════════════════════════════ */

.mobile-nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  top: 56px; /* Tiger-Bar 5px + Nav 56px */
  background: rgba(5, 5, 5, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 9998;
  flex-direction: column;
  padding: 28px 24px max(40px, calc(28px + env(safe-area-inset-bottom)));
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

/* Chatbot: immer über dem iOS Home-Indicator / Safari-Chrome */
#asv-cb {
  bottom: max(24px, env(safe-area-inset-bottom)) !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE FORM GLOBALS — gilt für alle Seiten
   ═══════════════════════════════════════════════════════ */

/*
 * iOS Safari zoomt automatisch ein wenn ein Input font-size < 16px hat.
 * Diese Regel verhindert das auf allen Formularen seitenübergreifend.
 */
@media (max-width: 768px) {
  input, select, textarea,
  .uni-form-input, .uni-form-select,
  .camp-form-input, .camp-form-select,
  .fg input, .fg select, .fg textarea {
    font-size: 16px !important;
  }

  /* Touch-Targets: mindestens 44px hoch (Apple HIG) */
  input, select, textarea,
  .uni-form-input, .uni-form-select,
  .camp-form-input, .camp-form-select,
  .fg input, .fg select {
    min-height: 48px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Buttons in Formularen: breiter + höher auf Mobile */
  .uni-form-submit, .camp-form-submit,
  .btn-next, .btn-prev {
    min-height: 52px;
    font-size: 15px !important;
  }

  /* Mitmachen: Radio + Check Items größer zum Antippen */
  .radio-opt {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  .check-item {
    padding: 16px !important;
  }
  .chk-box, .sparte-chk {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }

  /* Mitmachen: Sparte-Cards stacked, mehr Platz zum Tippen */
  .sparte-card {
    padding: 18px 14px !important;
  }
  .sparte-name {
    font-size: 16px !important;
  }

  /* Klasse-Cards: volle Breite, gut lesbar */
  .klasse-price {
    font-size: 28px !important;
  }

  /* Modals: weniger seitlicher Padding auf kleinen Screens */
  .uni-form,
  .camp-form {
    padding: 20px 16px !important;
  }

  /* Camp info box */
  .camp-modal-scroll > div:first-child {
    padding: 16px !important;
  }

  /* Ländercode + Telefon: kein Zusammenquetschen */
  #uniPhoneCode, #campPhoneCode, #telefonCode {
    width: 100px !important;
    min-width: 100px !important;
  }
}

/* Chatbot verschwindet wenn Drawer offen */
body.drawer-open #asv-cb {
  display: none !important;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-nav-link:active,
.mobile-nav-link:focus {
  color: #fff;
}

.mobile-nav-link.active {
  color: #1B8C3D;
}

.mobile-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 24px;
  padding: 0 24px;
  background: #1B8C3D;
  color: #fff;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-nav-lang {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Lang-Buttons im Drawer: gut sichtbar auf dunklem Hintergrund */
.mobile-nav-lang .lang-btn {
  flex: 1;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-nav-lang .lang-btn.active,
.mobile-nav-lang .lang-btn:focus {
  color: #22c55e;
  border-color: rgba(27, 140, 61, 0.6);
  background: rgba(27, 140, 61, 0.1);
}


/* ═══════════════════════════════════════════════════════
   3.  SPRACH-SWITCHER  (global)
   ═══════════════════════════════════════════════════════ */

.asv-lang-switcher {
  display: inline-flex;
  align-items: center;
}


/* ═══════════════════════════════════════════════════════
   4.  DESKTOP: Hamburger ausblenden, Drawer deaktivieren
   ═══════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .nav-hamburger        { display: none !important; }
  .mobile-nav-drawer    { display: none !important; }
}


/* ═══════════════════════════════════════════════════════
   5.  TABLET  768px – 1023px
   ═══════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Nav */
  nav, .nav, .nav-in    { padding: 0 32px !important; }
  .nav-links            { gap: 20px !important; font-size: 9px !important; }
  .nav-cta              { padding: 8px 16px !important; font-size: 9px !important; }
  .nav-hamburger        { display: flex !important; }
  .nav-links,
  .nav-cta              { display: none !important; }
  .mobile-nav-drawer    { display: flex !important; }

  /* Allgemeines Padding */
  section, .sec, .wrap  { padding-left: 32px !important; padding-right: 32px !important; }
  .w                    { padding: 0 32px !important; }

  /* Hero (index) */
  .hero-content         { padding: 0 32px 80px !important; max-width: 100% !important; }
  .hero-headline        { font-size: clamp(56px, 9vw, 96px) !important; }

  /* Pillar-Layout: große Karte links, Stack rechts */
  .pillars-row--a       { grid-template-columns: 1.4fr 1fr !important; gap: 3px !important; }
  .pillar--large        { height: 440px !important; }
  .pillar--small        { height: 220px !important; }
  .pillar--banner       { height: 180px !important; }

  /* News */
  .news-grid            { grid-template-columns: 1fr !important; }
  .news-featured        { height: 340px !important; }
  .news-strips          { gap: 2px !important; }

  /* Footer */
  .site-footer          { padding: 60px 32px 40px !important; }
  .footer-top           { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .footer-bottom        { flex-direction: column !important; gap: 12px !important; text-align: center !important; }

  /* Dabei */
  .dabei-section        { padding: 80px 32px !important; }
  .dabei-grid           { grid-template-columns: 1fr !important; gap: 2px !important; }

  /* Galerie */
  .gallery-section      { padding: 60px 32px !important; }
  .gallery-strip        { gap: 6px !important; }
  .gallery-item         { width: 220px !important; height: 160px !important; }

  /* SP Logos */
  .sp-logos-row         { flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; }
}


/* ═══════════════════════════════════════════════════════
   6.  MOBILE  < 768px  (Hauptziel: iPhone)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── 6a. NAV ─────────────────────────────────────── */

  nav, .nav, .nav-in {
    padding: 0 16px !important;
    height: 56px !important;
  }

  .nav-links, .nav-cta  { display: none !important; }
  .nav-hamburger        { display: flex !important; }
  .mobile-nav-drawer    { display: flex !important; }
  .asv-lang-switcher    { display: none !important; } /* nur Footer */

  .nav-logo-asv         { font-size: 18px !important; letter-spacing: 3px !important; }
  .nav-logo-city        { font-size: 7px !important;  letter-spacing: 2px !important; }
  .nav-logo-divider     { display: none !important; }


  /* ── 6b. HERO-SLIDER (index.html) ───────────────── */

  .hero {
    height: 100svh !important;      /* svh = small viewport height, kein iOS-Bar-Problem */
    min-height: 560px !important;
    max-height: 900px !important;
    margin-top: 0 !important;
  }

  .hero-content {
    padding: 0 16px 72px !important;
    max-width: 100% !important;
  }

  .hero-status {
    font-size: 8px !important;
    letter-spacing: 2px !important;
    margin-bottom: 16px !important;
  }

  .hero-headline {
    font-size: clamp(48px, 14vw, 72px) !important;
    letter-spacing: -1px !important;
    line-height: 0.88 !important;
    margin-bottom: 16px !important;
  }

  .hero-headline--compact {
    font-size: clamp(40px, 12vw, 60px) !important;
  }

  .hero-sub {
    font-size: 12px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  .hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .btn-primary, .btn-outline {
    width: 100% !important;
    text-align: center !important;
    padding: 16px 20px !important;
    font-size: 10px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Slide-Counter ausblenden */
  .slide-counter        { display: none !important; }

  /* Ken-Burns-Animation auf Mobile deaktivieren → Performance */
  .slide-img            { animation: none !important; }


  /* ── 6c. ALLGEMEINES SECTION-PADDING ────────────── */

  section,
  .sec,
  .pillars,
  .news,
  .dabei-section,
  .gallery-section,
  .site-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section:not(.hero):not(.gallery-section),
  .sec {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .w { padding: 0 !important; }


  /* ── 6d. SECTION HEADINGS ───────────────────────── */

  .section-heading,
  .pillars-title,
  .news-title,
  .sp-title,
  .gallery-title,
  .dabei-headline {
    font-size: clamp(34px, 11vw, 52px) !important;
    letter-spacing: -1px !important;
    line-height: 0.9 !important;
  }

  .section-label,
  .pillars-label,
  .news-label,
  .sp-label,
  .gallery-label {
    font-size: 8px !important;
    letter-spacing: 2px !important;
  }


  /* ── 6e. PILLAR-SEKTION (Vier Säulen) ───────────── */

  .pillars {
    padding: 56px 16px !important;
  }

  .pillars-header {
    margin-bottom: 28px !important;
  }

  /* Desktop: 2-spaltig + Stack. Mobile: alles einzeln */
  .pillars-row,
  .pillars-row--a {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-bottom: 3px !important;
  }

  .pillars-stack {
    flex-direction: column !important;
    gap: 3px !important;
  }

  /* Karten-Höhen: feste px durch relative Höhe ersetzen */
  .pillar--large  { height: 280px !important; }
  .pillar--small  { height: 200px !important; }
  .pillar--banner {
    height: auto !important;
    min-height: 240px !important;
  }

  .pillar-content--banner {
    padding: 24px 20px !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .pillar-banner-right {
    display: none !important; /* rechter Dekor-Text mobil nicht nötig */
  }

  /* Pillar image brighter on mobile */
  .pillar-img {
    filter: brightness(0.62) contrast(1.05) !important;
  }

  /* Pillar-Texte skalieren */
  .pillar-name {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.0 !important;
  }

  .pillar-name--banner {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }

  .pillar-desc {
    font-size: 10px !important;
    line-height: 1.6 !important;
  }

  /* Pillar-Arrows auf Touch immer sichtbar (kein Hover auf Mobile) */
  .pillar-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }


  /* ── 6f. NEWS-SEKTION ───────────────────────────── */

  .news {
    padding: 56px 16px !important;
  }

  .news-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .news-all {
    align-self: flex-start !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Nebeneinander → untereinander */
  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    margin-bottom: 3px !important;
  }

  .news-featured {
    height: 300px !important;
  }

  .news-featured-content {
    padding: 16px !important;
  }

  .news-headline {
    font-size: clamp(18px, 5.5vw, 26px) !important;
    line-height: 1.15 !important;
  }

  .news-sub        { display: none !important; } /* Platz sparen */
  .news-read       { opacity: 1 !important; transform: none !important; } /* kein hover auf touch */

  .news-strips {
    flex-direction: column !important;
    gap: 2px !important;
  }

  .news-strip {
    padding: 16px !important;
    min-height: 64px !important;
  }

  .news-strip-title {
    font-size: clamp(13px, 3.5vw, 16px) !important;
    white-space: normal !important;
  }

  .news-strip-desc { display: none !important; }


  /* ── 6g. SOCIAL-PROOF / PARTNER-SEKTION ─────────── */

  .sp-header {
    padding: 40px 16px 28px !important;
  }

  .sp-quotes {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px 40px !important;
  }

  .sp-quote {
    padding: 24px 20px !important;
  }

  .sp-quote-text {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .sp-quote-person {
    gap: 10px !important;
  }

  /* Logos: horizontal scroll statt wrap */
  .sp-logos-section {
    padding: 32px 0 40px !important;
  }

  .sp-logos-label {
    padding: 0 16px !important;
    margin-bottom: 20px !important;
  }

  .sp-logos-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 32px !important;
    padding: 16px !important;
  }

  .sp-logo-img,
  .sp-logo-lg,
  .sp-logo-lg-inv {
    height: 64px !important;
    max-width: 140px !important;
    flex-shrink: 0 !important;
  }


  /* ── 6h. GALERIE-STRIP ──────────────────────────── */

  .gallery-section {
    padding: 48px 0 48px 16px !important;
  }

  .gallery-header {
    padding-right: 16px !important;
    margin-bottom: 24px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .gallery-header-left {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .gallery-strip {
    gap: 6px !important;
  }

  .gallery-item,
  .gallery-img-wrap {
    width: 180px !important;
    height: 140px !important;
    flex-shrink: 0 !important;
  }


  /* ── 6i. DABEI-SEKTION (Komm. Mach mit. Bleib.) ── */

  .dabei-section {
    padding: 56px 16px !important;
  }

  .dabei-headline {
    font-size: clamp(42px, 13vw, 64px) !important;
    margin-bottom: 40px !important;
    padding-bottom: 28px !important;
  }

  .dabei-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  .dabei-card {
    padding: 28px 20px 24px !important;
    gap: 14px !important;
  }

  .dabei-num {
    font-size: 56px !important;
  }

  .dabei-title {
    font-size: 24px !important;
  }

  .dabei-body {
    font-size: 11px !important;
  }

  .dabei-link {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
    font-size: 11px !important;
  }

  .iban-block {
    font-size: 10px !important;
    line-height: 1.7 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }


  /* ── 6j. FOOTER ─────────────────────────────────── */

  .site-footer {
    padding: 48px 16px 96px !important; /* 96px: Platz für Chatbot-Button */
  }

  .footer-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    margin-bottom: 40px !important;
  }

  .footer-brand-name   { font-size: 18px !important; }
  .footer-brand-sub    { font-size: 8px !important; margin-bottom: 12px !important; }
  .footer-tagline      { font-size: 9px !important; max-width: 100% !important; margin-bottom: 16px !important; }

  .footer-social-row   { flex-wrap: wrap !important; gap: 8px !important; }
  .footer-s-btn        { font-size: 9px !important; min-height: 40px !important; }

  .footer-col-title    { font-size: 8px !important; margin-bottom: 12px !important; }

  .footer-list         { gap: 14px !important; } /* größere Touch-Targets */
  .footer-list a       { font-size: 10px !important; min-height: 44px !important; display: flex !important; align-items: center !important; }

  .footer-contact-item { font-size: 10px !important; line-height: 2.0 !important; }

  .footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
    padding-top: 20px !important;
  }

  .footer-copy         { font-size: 8px !important; }

  .footer-legal {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  .footer-legal a      { font-size: 9px !important; min-height: 44px !important; display: flex !important; align-items: center !important; }

  /* Sprach-Buttons im Footer */
  .lang-switcher       { gap: 8px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .lang-btn            { padding: 8px 12px !important; font-size: 9px !important; min-height: 40px !important; }


  /* ── 6k. SUB-SEITEN HEROES ──────────────────────── */

  /* Verein, Teams etc. */
  .page-hero {
    height: auto !important;
    min-height: 60vh !important;
    max-height: none !important;
    padding-top: 56px !important;
    margin-top: 0 !important;
  }

  .page-hero-content {
    padding: 0 16px 40px !important;
    max-width: 100% !important;
  }

  .page-hero-title {
    font-size: clamp(48px, 14vw, 80px) !important;
    letter-spacing: -2px !important;
    line-height: 0.88 !important;
    margin-bottom: 16px !important;
  }

  .page-hero-sub {
    font-size: 12px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
  }

  .page-hero-breadcrumb {
    font-size: 8px !important;
    letter-spacing: 2px !important;
    margin-bottom: 16px !important;
  }

  .page-hero-eyebrow {
    font-size: 8px !important;
    letter-spacing: 3px !important;
    margin-bottom: 12px !important;
  }

  /* Dekor-Jahreszahl rechts ausblenden */
  .page-hero-founded { display: none !important; }

  /* Projekte & Sponsoren Hero */
  .hero-projekte,
  .hero-sponsoren {
    min-height: 0 !important;
    padding-top: 56px !important;
  }

  .hero-sponsoren {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  .hero-sponsoren .hero-img {
    width: 100% !important;
    top: 0; right: 0; bottom: 0;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    filter: brightness(0.4) saturate(0.6) !important;
    background-position: center top !important;
    position: absolute !important;
    z-index: 0;
  }

  .hero-sponsoren .hero-overlay {
    background: linear-gradient(to bottom, rgba(15,15,15,0.45) 0%, rgba(15,15,15,0.97) 68%) !important;
    z-index: 1;
  }

  .hero-projekte .hero-content,
  .hero-sponsoren .hero-content {
    padding: 32px 16px 40px !important;
  }

  /* Projekts- & Sponsoren-Hero Headline */
  .hero-projekte .hero-headline,
  .hero-sponsoren .hero-headline {
    font-size: clamp(32px, 10vw, 52px) !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  .hero-quote {
    font-size: 10px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Projekts-Statistiken */
  .hero-stats {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
    margin-top: 20px !important;
  }

  .hero-stat-n {
    font-size: clamp(28px, 8vw, 44px) !important;
  }

  .hero-stat-l {
    font-size: 8px !important;
    letter-spacing: 1px !important;
  }

  .hero-stat-sep { display: none !important; }

  /* Presse Hero */
  .hero-presse {
    min-height: 360px !important;
    padding-top: 56px !important;
  }

  /* Streetsports Hero */
  .hero--streetsports .hero-bg {
    object-position: right center !important;
  }


  /* ── 6l. STREETSPORTS SPEZIFISCH ────────────────── */

  .ss-formats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .ss-events-list      { gap: 12px !important; }

  .ss-event-card {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px 16px !important;
  }

  .event-bar {
    height: auto !important;
    min-height: 48px !important;
    font-size: 8px !important;
    letter-spacing: 1px !important;
    padding: 8px 14px !important;
    overflow-x: hidden !important;       /* no side-scroll — wrap instead */
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 4px 10px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .event-bar-logo { display: none !important; }  /* save ~58px — always show text */

  .event-bar-sep { display: none !important; }


  /* ── 6m. VEREIN: MISSION + VORSTAND ─────────────── */

  .mission {
    padding: 56px 16px !important;
  }

  .mission-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .mission-headline {
    font-size: clamp(36px, 11vw, 52px) !important;
    line-height: 0.92 !important;
  }

  .mission-text {
    font-size: 13px !important;
    line-height: 1.75 !important;
  }

  .vorstand-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Vorstand-Card */
  .vorstand-card,
  .team-card {
    padding: 20px 14px !important;
  }

  .vorstand-role,
  .team-role {
    font-size: 7px !important;
    letter-spacing: 2px !important;
  }

  .vorstand-name,
  .team-name {
    font-size: 16px !important;
  }


  /* ── 6n. PROJEKTE: BENTO-GRID ───────────────────── */

  .bento-grid,
  .bc-grid,
  [class*="bento"] {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .bc-card {
    min-height: 200px !important;
    padding: 24px 20px !important;
  }

  /* bc-img in bento is position:absolute;inset:0 — keep it that way on mobile */
  .bc-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0.80 !important;
  }


  /* ── 6o. MITMACHEN: FORMULAR ────────────────────── */

  .form-wrap,
  .form-area,
  .form-layout {
    flex-direction: column !important;
    padding: 24px 16px 48px !important;
    max-width: 100% !important;
  }

  .form-sidebar { display: none !important; } /* Sidebar mobil weglassen */

  .form-grid,
  .fg-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    padding: 14px 12px !important;
    font-size: 14px !important; /* 16px wäre ideal aber 14 kein Zoom */
    min-height: 52px !important;
  }

  .form-field textarea {
    min-height: 100px !important;
  }

  .form-field label {
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }

  .btn-submit,
  .form-submit {
    width: 100% !important;
    min-height: 56px !important;
    font-size: 11px !important;
  }

  /* SEPA */
  .sepa-block {
    padding: 20px 16px !important;
    font-size: 10px !important;
    line-height: 1.8 !important;
  }

  /* Success Screen */
  .success-wrap {
    padding: 32px 16px 60px !important;
  }


  /* ── 6p. GALERIE-SEITE ──────────────────────────── */

  .gal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3px !important;
  }

  .gal-item {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }


  /* ── 6q. PRESSE-SEITE ───────────────────────────── */

  .presse-grid,
  .press-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .press-card,
  .presse-card {
    padding: 20px 16px !important;
  }

  .press-card-title,
  .presse-card-title {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    line-height: 1.25 !important;
  }


  /* ── 6r. TABELLEN → horizontal scrollbar ────────── */

  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }


  /* ── 6s. ALLGEMEINE TOUCH-VERBESSERUNGEN ─────────── */

  /* Mindest-Touch-Target Apple HIG: 44×44px */
  a:not(.mobile-nav-link):not(.mobile-nav-cta):not(.footer-list a) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  button:not(.nav-hamburger):not(.lang-btn) {
    min-height: 44px;
  }

  /* Kein Ken-Burns / komplexe Animationen auf Mobile */
  @media (prefers-reduced-motion: no-preference) {
    .slide-img,
    .pillar-img {
      animation: none !important;
      transition: none !important;
    }
  }

  /* Kein globales Body-Padding-Bottom — Tiger soll am Bildschirmrand liegen.
     Jeder Footer-Typ bekommt eigene bottom-Padding für den Chatbot-Button. */
  body {
    padding-bottom: 0 !important;
  }

  /* Slim-Footer: genug Platz unter dem letzten Link für den Chatbot-Button
     (54px Button-Höhe + 20px vom Rand = 74px; mit Sicherheit 88px)        */
  .site-footer--slim {
    padding-bottom: 88px !important;
  }

}


/* ═══════════════════════════════════════════════════════
   7.  KLEIN-MOBILE ANPASSUNGEN  < 390px  (iPhone SE etc.)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 389px) {

  .hero-headline {
    font-size: clamp(40px, 13vw, 56px) !important;
  }

  .dabei-headline {
    font-size: clamp(38px, 12vw, 52px) !important;
  }

  .pillar--large  { height: 240px !important; }
  .pillar--small  { height: 180px !important; }

  .vorstand-grid,
  .team-grid {
    grid-template-columns: 1fr !important; /* Einzelspalte auf sehr kleinen Geräten */
  }

  .gal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dabei-link {
    font-size: 10px !important;
    padding: 12px 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   8.  DRUCK
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   9.  PHASE 2 — SEITEN-SPEZIFISCHE ERGÄNZUNGEN
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── INDEX: AWARDS/STATS-STRIP ──────────────────────
     Desktop: repeat(4, 1fr) → Mobile: 2×2 Grid          */
  .awards-strip {
    padding: 32px 16px !important;
    overflow-x: auto !important;
  }

  .awards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
  }

  .award-card {
    padding: 0 0 0 16px !important;
    border-left-width: 1px !important;
  }

  .award-card:first-child {
    padding-left: 16px !important;
    border-left: 1px solid rgba(27,140,61,0.2) !important;
  }

  .award-title {
    font-size: clamp(18px, 5vw, 24px) !important;
  }


  /* ── INDEX: KALENDER-SEKTION ────────────────────────
     Desktop: 2-Spalten 1.2fr 1fr → Mobile: 1-Spalte     */
  .cal {
    padding: 48px 16px 0 !important;
  }

  .cal-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
  }

  .cal-title {
    font-size: clamp(32px, 10vw, 48px) !important;
  }

  .cal-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-bottom: 48px !important;
  }

  .cal-week-item {
    grid-template-columns: 44px 1fr auto !important;
    gap: 12px !important;
    padding: 16px 0 !important;
  }

  .cal-day {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .cal-sport { font-size: 10px !important; }
  .cal-time  { font-size: 9px !important; white-space: nowrap !important; }


  /* ── INDEX: GALLERY-ITEMS ───────────────────────────
     Feste px-Breiten auf Items kliren → kleinere Werte   */
  .gallery-item,
  .gallery-item:nth-child(odd),
  .gallery-item:nth-child(even),
  .gallery-item--wide {
    width: 220px !important;
    height: 300px !important;
  }


  /* ── PROJEKTE: BENTO-GRID ───────────────────────────
     Desktop: komplexes 3-Spalten-Grid mit Grid-Positionen
     Mobile:  einzelne Spalte, alle Positionen zurücksetzen */
  .bento {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    max-width: 100% !important;
  }

  /* Alle grid-column / grid-row Zuweisungen entfernen */
  .bc-schul,
  .bc-kita,
  .bc-gew1,
  .bc-gew2,
  .bc-weitere {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* "Weitere" Karte: auf Mobile vertikal statt horizontal */
  .bc-weitere {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 24px 20px !important;
    min-height: 180px !important;
  }

  /* Bento-Karten: Höhe nicht mehr fixiert */
  .bc {
    min-height: 280px !important;
    padding: 20px 16px !important;
  }

  /* Lighter overlay on mobile so background images are actually visible */
  .bc .bc-overlay {
    background: linear-gradient(
      to top,
      rgba(5,5,5,0.95) 0%,
      rgba(5,5,5,0.65) 45%,
      rgba(5,5,5,0.00) 80%
    ) !important;
  }

  .bc-title {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  /* Projekte S3 (grüne Brand-Sektion) */
  .s3 {
    padding: 56px 16px !important;
  }

  .s3-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Projekte S4 Quotes */
  .s4-inner-header {
    padding: 0 16px !important;
    margin-bottom: 36px !important;
  }

  .s4-quote-wrap {
    padding: 0 16px !important;
  }

  /* Quote-Block: on mobile hide quote-mark, collapse to 1 column */
  .s4-quote-block {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 20px !important;
  }

  .s4-quote-mark {
    display: none !important;
  }

  /* Quote text must sit in column 1 (base CSS sets grid-column:2) */
  .s4-quote {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Author spans full width below quote */
  .s4-quote-author {
    grid-row: 2 !important;
    grid-column: 1 !important;
    align-self: auto !important;
    padding-top: 20px !important;
    margin-top: 4px !important;
  }


  /* ── STREETSPORTS: PROGRAM-CARDS-GRID ───────────────
     Desktop: 3-spaltig gleich → sieht OK aus
     Mobile:  2+1 Layout:
              [ Streetliga | Mitternacht ]
              [    Schulprojekte (voll)  ]
     → Karte 3 bekommt volle Breite + min-height damit
       alle Karten visuell gleich gewichtig wirken        */
  .ss-prog-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 28px !important;
  }

  /* Alle 3 Karten: einheitliche Mindesthöhe */
  .ss-prog-grid > * {
    min-height: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  /* Letzte Karte (Schulprojekte) volle Breite */
  .ss-prog-grid > *:last-child {
    grid-column: 1 / -1 !important;
    min-height: 90px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* ── STREETSPORTS: CONTENT-SECTIONS ─────────────────
     Desktop: Bild | Text (1fr 1fr, gap:60px)
     Mobile:  Bild oben → Text unten, gestapelt          */
  .ss-content-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Bild-Block zuerst, Text darunter */
  .ss-content-grid > div[style*="order:1"],
  .ss-content-grid > div:first-child {
    order: -1 !important;
  }

  /* Bild-Container auf Mobile */
  .ss-content-grid [style*="aspect-ratio:4/3"] {
    border-radius: 12px !important;
  }

  /* Dekor-Corner-Elemente ausblenden (zu eng auf Mobile) */
  .ss-content-grid [style*="position:absolute;top:-8px"],
  .ss-content-grid [style*="position:absolute;bottom:-8px"] {
    display: none !important;
  }

  /* Time-Badge position anpassen */
  .ss-content-grid [style*="position:absolute;top:20px;right:-16px"] {
    right: 12px !important;
    font-size: 11px !important;
    padding: 7px 12px !important;
  }

  /* Section-Padding auf Mobile */
  #streetliga,
  #mitternacht,
  #schule {
    padding: 48px 16px !important;
  }

  /* Headline in Sections kleiner */
  #streetliga h2,
  #mitternacht h2,
  #schule h2 {
    font-size: clamp(34px, 10vw, 52px) !important;
    margin-bottom: 16px !important;
  }

  /* Stats-Row: Abstände reduzieren */
  #streetliga [style*="display:flex;gap:32px"] {
    gap: 20px !important;
    margin-bottom: 24px !important;
  }

  /* CTAs volle Breite */
  #streetliga a[style*="background:var(--g)"],
  #mitternacht a[style*="background:var(--r)"],
  #schule a[style*="background:var(--y)"] {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
  }

  /* Streetsports Hero */
  .hero-ss {
    height: 56vh !important;
    min-height: 320px !important;
  }

  .hero-ss .hero-content,
  .ss-hero-content {
    padding: 0 16px 40px !important;
  }

  /* Format-Cards auf Streetsports */
  .format-card,
  .ss-format-card {
    padding: 24px 16px !important;
  }


  /* ── VEREIN: NETZWERK + CTA GRIDS ──────────────────  */
  .netz-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3px !important;
  }

  .cta-grid {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  /* Vorstand: auf sehr kleinen Geräten 2-spaltig bleibt ok,
     aber Karten-Inhalt anpassen */
  .v-card-avatar {
    width: 56px !important;
    height: 56px !important;
  }

  .v-card--first .v-card-avatar {
    width: 72px !important;
    height: 72px !important;
  }

  .v-card-name {
    font-size: clamp(14px, 4vw, 18px) !important;
  }


  /* ── PRESSE: ARTIKEL-GRID ───────────────────────────  */
  .press-grid,
  .articles-grid,
  .news-archive-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ZDF-Featured — Layout und Thumb werden in Section 12 vollständig überschrieben */
  .zdf-feature {
    flex-direction: column !important;
    gap: 0 !important;
  }


  /* ── TEAMS-SEITE: SPARTEN-ÜBERSICHT ────────────────  */
  .sparten-tabs,
  .team-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }

  .sparten-tabs::-webkit-scrollbar { display: none; }

  .sparten-tab,
  .team-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 44px !important;
    padding: 0 16px !important;
  }

  .players-grid,
  .team-players-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

}


/* ═══════════════════════════════════════════════════════
   10.  TABLET-ERGÄNZUNGEN (Phase 2)
   ═══════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

  .awards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 32px !important;
  }

  .bento {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 6px !important;
  }

  .bc-schul,
  .bc-kita,
  .bc-gew1,
  .bc-gew2,
  .bc-weitere {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .bc {
    min-height: 260px !important;
  }

  .s3-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .vorstand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .netz-cols {
    grid-template-columns: repeat(2, 1fr) !important;
  }

}


/* ═══════════════════════════════════════════════════════
   12.  PHASE 3 — GALERIE · MITMACHEN · TEAMS · FUSSBALL
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── GALERIE: HERO + MASONRY ─────────────────────────── */

  .hero-gal {
    padding-top: 56px !important;  /* Tiger 5px + Nav 56px */
    margin-top: 0 !important;
    min-height: 36vh !important;
  }

  .hero-gal-content {
    padding: 0 16px 36px !important;
  }

  .hero-h1 {
    font-size: clamp(42px, 13vw, 64px) !important;
    line-height: 0.9 !important;
    letter-spacing: -1px !important;
  }

  .gallery-section {
    padding: 40px 16px 64px !important;
  }

  /* Lightbox-Buttons verstecken (Swipe reicht) */
  .lb-prev, .lb-next {
    display: none !important;
  }

  /* Galerie-Hero: "Momente" in Grün (em-Tag) */
  .hero-h1 em {
    color: #22c55e !important;
    font-style: italic !important;
  }


  /* ── MITMACHEN: TOUCH-TARGETS ────────────────────────── */

  .toggle-row {
    flex-direction: column !important;
    border: none !important;
    gap: 8px !important;
  }

  .toggle-btn {
    min-height: 48px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 9px !important;
  }

  .radio-opt {
    min-height: 48px !important;
    padding: 10px 14px !important;
  }

  .sparte-card {
    padding: 16px 12px !important;
  }

  .sparte-name {
    font-size: 15px !important;
  }

  .btn-prev, .btn-next {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 9px !important;
  }

  /* DSGVO Modal: vollständig sichtbar auf kleinen Screens */
  .dsgvo-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .dsgvo-box {
    max-height: 92svh !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .dsgvo-head {
    padding: 20px 16px 14px !important;
  }

  .dsgvo-body {
    padding: 16px 16px 28px !important;
  }

  .dsgvo-title {
    font-size: 24px !important;
  }

  /* Beitrag-Box volle Breite */
  .beitrag-box {
    max-width: 100% !important;
    padding: 20px 16px !important;
  }


  /* ── TEAMS: HERO ─────────────────────────────────────── */

  .hero-teams {
    min-height: 55svh !important;
    padding-top: 56px !important;
  }

  /* 2-Spalten-Grid → eine Spalte */
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 28px 16px 36px !important;
    gap: 0 !important;
  }

  /* Rechter Bereich (schwebende Karten / Logos) ausblenden */
  .hero-right-slot,
  .hero-scratch-overlay {
    display: none !important;
  }

  .hero-left {
    max-width: 100% !important;
  }

  /* Tab-Navigation: horizontales Scrollen */
  .tab-nav {
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    top: 56px !important;  /* mobiler Offset: Tiger + Nav */
  }

  .tab-nav::-webkit-scrollbar { display: none !important; }

  .tab-btn {
    padding: 14px 18px !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 48px !important;
  }

  /* Kader-Scroll-Section */
  .kader-header {
    padding: 0 16px 24px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .kader-section {
    padding: 56px 0 48px !important;
  }

  /* cards are in a horizontal scroll already — just reduce left padding */
  .kader-scroll {
    padding: 16px 16px 24px !important;
    gap: 10px !important;
  }

  .kader-card {
    width: 200px !important;
  }

  /* Liga-Section: Foto + Widgets */
  .liga-photo-block {
    height: 260px !important;
  }

  .liga-photo-label {
    left: 16px !important;
    bottom: 20px !important;
  }

  .liga-photo-label-title {
    font-size: clamp(28px, 9vw, 44px) !important;
    line-height: 0.92 !important;
  }

  .liga-photo-label-eyebrow {
    font-size: 8px !important;
    letter-spacing: 3px !important;
  }

  .liga-widgets {
    grid-template-columns: 1fr !important;
  }

  .liga-widget-box {
    padding: 32px 16px !important;
  }

  /* Fokus-Section */
  .fokus-section {
    padding: 56px 16px 64px !important;
  }

  .fokus-header {
    max-width: 100% !important;
    margin-bottom: 36px !important;
  }

  .fokus-title {
    font-size: clamp(38px, 12vw, 60px) !important;
  }


  /* ── FUSSBALL: HERO + SEITEN ──────────────────────────── */

  /* hero-title: war clamp(70px,12vw,150px) → viel zu groß */
  .hero-title {
    font-size: clamp(48px, 14vw, 80px) !important;
    line-height: 0.9 !important;
  }

  /* Geister-Text überläuft → ausblenden */
  .hero-ghost {
    display: none !important;
  }

  /* U32-Titel: war clamp(70px,10vw,120px) */
  .u32-title {
    font-size: clamp(48px, 13vw, 76px) !important;
    margin-bottom: 16px !important;
  }

  /* U32-Section: linke Seite Padding */
  .u32-left {
    padding: 40px 16px 36px !important;
  }

  /* Spieltag Überschrift */
  .spieltag-title {
    font-size: clamp(34px, 10vw, 52px) !important;
    margin-bottom: 28px !important;
  }

  /* Training Überschrift */
  .training-title {
    font-size: clamp(34px, 10vw, 52px) !important;
    margin-bottom: 24px !important;
  }

  /* ── PROJEKTE: STATS-PADDING OVERFLOW FIX ─────────── */

  /* Hero-Stat hatte padding-right:40px → überläuft auf Mobile */
  .hero-stat {
    padding: 0 12px 0 0 !important;
  }

  /* Quote mit border-left passt schon, nur font etwas kleiner */
  .hero-quote {
    font-size: 10px !important;
    max-width: 100% !important;
    padding-left: 12px !important;
  }


  /* ── PRESSE: HERO ─────────────────────────────────── */

  .hero-presse {
    min-height: 52svh !important;
    padding-top: 56px !important;
  }

  /* hero-left benutzt 80px left padding → auf Mobile 16px */
  .hero-presse .hero-left,
  .presse-hero-left {
    padding: 28px 16px 32px !important;
    max-width: 100% !important;
  }

  /* Stat-Sidebar rechts ausblenden */
  .hero-presse .hero-right {
    display: none !important;
  }


  /* ── PRESSE: MEDIENSPIEGEL ────────────────────────── */

  .medienspiegel {
    padding: 40px 16px !important;
  }

  .ms-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
    padding-bottom: 20px !important;
  }

  .ms-note {
    text-align: left !important;
    max-width: 100% !important;
  }

  /* ZDF Featured: 2-Spalten → einspaltig, Thumbnail als echtes Bild */
  .zdf-feature {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* Cinema: feste Höhe 220px + overflow:hidden — klemmt das Bild unten ab */
  .zdf-cinema {
    display: block !important;
    height: 220px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Overlay, Play-Button, ZDF-Badge und Timer ausblenden */
  .zdf-overlay,
  .zdf-play-btn,
  .zdf-source-badge,
  .zdf-timer {
    display: none !important;
  }

  /* Thumbnail: position:static, aber HÖHER als der Container (330px > 220px).
     Die unteren ~110px (wo Wasserzeichen liegt) werden durch overflow:hidden abgeklemmt.
     object-position:top center → wir sehen immer den oberen Bildbereich.           */
  .zdf-thumb {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 330px !important;
    object-fit: cover !important;
    object-position: top center !important;
    filter: brightness(0.85) !important;
    display: block !important;
    margin-top: 0 !important;
  }

  /* Gradient-Fade: weicher Übergang von Bild zu Hintergrund unten */
  .zdf-cinema::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to bottom, transparent 0%, #050505 100%);
    z-index: 2;
    pointer-events: none;
  }

  .zdf-info {
    padding: 20px 16px 24px !important;
  }

  .zdf-title {
    font-size: clamp(22px, 7vw, 36px) !important;
  }

  /* Presse-Grid (externe Berichterstattung): 4 → 2 Spalten */
  .presse-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }

  /* Artikel-Grid (Vereinsberichte): 3 → 1 Spalte */
  .artikel-grid {
    grid-template-columns: 1fr !important;
  }

  /* SAT1 Feature Card: nebeneinander → gestapelt */
  .sat1-card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  .sat1-badge {
    width: fit-content !important;
  }

  /* Partner-Section */
  .partner-section {
    padding: 48px 16px !important;
  }

  .partner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pressekontakt */
  .pressekontakt {
    padding: 48px 16px !important;
  }

  .pk-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .pk-card {
    padding: 24px 20px !important;
  }

  .pk-heading {
    font-size: clamp(28px, 9vw, 44px) !important;
  }

  /* Medienkit */
  .medienkit {
    padding: 48px 16px !important;
  }

  .mk-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .mk-grid {
    grid-template-columns: 1fr !important;
  }

  /* Sponsoren */
  .sponsoren {
    padding: 56px 16px !important;
  }

  .sp-logos-row2 {
    gap: 32px !important;
  }

  .sp-logo-img2,
  .sp-logo-lg2,
  .sp-logo-lg2-inv {
    height: 100px !important;
    max-width: 220px !important;
    flex-shrink: 0 !important;
  }

  /* News modal auf Mobile */
  .news-modal {
    width: 100vw !important;
    max-height: 90svh !important;
    border-radius: 0 !important;
  }

  .nm-header {
    padding: 24px 16px 16px !important;
  }

  .nm-body {
    padding: 20px 16px 28px !important;
  }


  /* Fußball CTA-Buttons: Stack auf Mobile */
  .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .cta-btn {
    justify-content: center !important;
    padding: 16px 24px !important;
    min-height: 52px !important;
  }

  .cta-title {
    font-size: clamp(36px, 11vw, 56px) !important;
  }

  /* Tabellen-Zeilen: verkürzen */
  .table-row {
    grid-template-columns: 20px 1fr 28px 28px 28px 28px 36px !important;
    gap: 2px !important;
    padding: 8px 10px !important;
    font-size: 8px !important;
  }

}


/* ── TEAMS + GALERIE: TABLET-ERGÄNZUNGEN ────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Teams hero auf Tablet */
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 40px 32px !important;
  }

  .hero-right-slot { display: none !important; }

  .tab-nav        { padding: 0 32px !important; }

  .kader-header   { padding: 0 32px 32px !important; }
  .kader-scroll   { padding: 16px 32px 24px !important; }

  .liga-widgets   { grid-template-columns: 1fr !important; }
  .liga-widget-box{ padding: 40px 32px !important; }

  .fokus-section  { padding: 64px 32px 80px !important; }

  /* Galerie auf Tablet */
  .hero-gal-content { padding: 0 32px 40px !important; }
  .gallery-section  { padding: 40px 32px 60px !important; }

}


/* ═══════════════════════════════════════════════════════
   10b. LEGAL PAGES  (Datenschutz & Impressum)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Hero-Bereich: section selbst unter die fixierte Nav schieben.
     Mobile-Nav: top 5px + height 56px = 61px.
     margin-top schiebt den Section-Hintergrund unter die Nav;
     padding-top gibt dann genug Luft nach unten.               */
  .hero-legal {
    margin-top: 56px !important;
    padding: 40px 16px 48px !important;
  }

  /* Langer Titel nicht abschneiden: kleinere Schrift + Umbruch */
  .hero-legal h1 {
    font-size: clamp(28px, 9vw, 46px) !important;
    line-height: 1 !important;
    word-break: break-word !important;
    hyphens: auto !important;
    overflow-wrap: anywhere !important;
  }

  /* Breadcrumb & Eyebrow kompakter */
  .hero-breadcrumb {
    font-size: 8px !important;
    letter-spacing: 2px !important;
    margin-bottom: 14px !important;
  }
  .hero-eyebrow {
    font-size: 8px !important;
    letter-spacing: 3px !important;
    margin-bottom: 10px !important;
  }

  /* Fließtext-Bereich: 80px 56px → 32px 16px */
  .legal-content {
    padding: 32px 16px 60px !important;
  }

  /* Preamble & Kontaktbox seitlich */
  .legal-preamble {
    padding: 20px 16px !important;
  }
  .legal-contact-box {
    padding: 16px !important;
    font-size: 11px !important;
  }

  /* Abschnitt-Überschriften */
  .legal-section h2 {
    font-size: 22px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   13.  PHASE 4 — VEREIN: FEHLENDE SEKTIONEN
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── TIMELINE ───────────────────────────────────────── */

  .timeline-section {
    padding: 56px 0 56px 16px !important;
  }

  .timeline-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 32px !important;
    padding-right: 16px !important;
  }

  /* Karten etwas schmaler → mehr Karten sichtbar beim Scrollen */
  .tl-card {
    width: 260px !important;
    height: 360px !important;
  }

  .tl-card--wide {
    width: 300px !important;
  }

  .tl-card-content {
    padding: 20px 16px 24px !important;
  }

  .tl-year {
    font-size: 48px !important;
  }


  /* ── STATS BAR (grüner Streifen, 4-spaltig) ─────────── */

  .stats-bar {
    padding: 32px 16px !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Trennlinie zwischen linken + rechten Paaren */
  .stat {
    padding: 20px 16px !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .stat:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .stat:nth-child(1),
  .stat:nth-child(2) {
    border-top: none !important;
  }

  .stat-num {
    font-size: clamp(36px, 10vw, 52px) !important;
    letter-spacing: -1px !important;
  }

  .stat-label {
    font-size: 8px !important;
    letter-spacing: 1px !important;
    line-height: 1.5 !important;
  }


  /* ── DNA-GRID (4-spaltig → 2-spaltig) ──────────────── */

  .dna-section {
    padding: 56px 16px !important;
  }

  .dna-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3px !important;
  }

  .dna-card {
    padding: 24px 16px 28px !important;
  }

  .dna-card-num {
    font-size: 56px !important;
  }

  .dna-card-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }

  .dna-card-title {
    font-size: 20px !important;
  }

  .dna-card-text {
    font-size: 8.5px !important;
  }


  /* ── VORSTAND: Sektion + Karten-Innenabstand ────────── */

  .vorstand {
    padding: 56px 16px !important;
  }

  .vorstand-title {
    font-size: clamp(36px, 11vw, 56px) !important;
    margin-bottom: 24px !important;
  }

  /* v-card: 36px 32px → 20px 14px (passt in 2-Spalten-Layout) */
  .v-card {
    padding: 20px 14px !important;
  }

  .v-card-contacts {
    gap: 6px !important;
    margin-top: 12px !important;
  }

  /* Email links: long addresses must wrap, not overflow the card */
  .v-card-contact-link {
    align-self: stretch !important;         /* full card width */
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    font-size: 7px !important;              /* slightly smaller so it fits */
  }


  /* ── NETZWERK: Sektion + Karten ─────────────────────── */

  .netz-section {
    padding: 56px 16px !important;
  }

  .netz-title {
    font-size: clamp(36px, 11vw, 56px) !important;
  }

  /* netz-col: 36px 32px → 20px 14px */
  .netz-col {
    padding: 24px 14px !important;
  }


  /* ── QUOTE-SECTION ───────────────────────────────────── */

  .quote-section {
    padding: 64px 16px !important;
  }

  /* Riesiges Anführungszeichen (200px) → auf Mobile ausblenden */
  .quote-mark {
    font-size: 80px !important;
    margin-bottom: -16px !important;
    letter-spacing: -4px !important;
  }

  /* Quote-Text: clamp(24px,3vw,38px) → auf ≤480px = 24px, genug */
  .quote-text {
    font-size: clamp(20px, 5.5vw, 30px) !important;
    line-height: 1.35 !important;
    margin-bottom: 24px !important;
  }

  .quote-attr {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .quote-attr-line {
    display: none !important;
  }

  .quote-attr-name {
    font-size: 8px !important;
  }

  .quote-attr-role {
    font-size: 8px !important;
  }


  /* ── CTA-SECTION (verein.html): Sektion-Padding ─────── */

  .cta-section {
    padding: 64px 16px !important;
  }

  /* cta-grid ist bereits 1-spaltig via Section 6 — nur Karte innen */
  .cta-card {
    padding: 28px 20px !important;
  }

}


/* ═══════════════════════════════════════════════════════
   14.  TEAMS — BOXFITNESS x3-INFO-GRID
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .x3-inner {
    padding: 0 16px !important;
    gap: 32px !important;
  }

  /* 3 Spalten → 1 Spalte, gestapelt */
  .x3-grid {
    grid-template-columns: 1fr !important;
    border: 1px solid rgba(239, 68, 68, 0.12) !important;
  }

  .x3-card {
    padding: 28px 20px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.1) !important;
  }

  .x3-card:last-child {
    border-bottom: none !important;
  }

  .x3-headline {
    font-size: clamp(38px, 11vw, 56px) !important;
  }

  /* b4-info-row auf Mobile einspaltig */
  .b4-info-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

}


/* ═══════════════════════════════════════════════════════
   15.  TEAMS — TRAININGSZEITEN TABELLE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* 2-spaltig (links: text/tabelle | rechts: trainer-fotos) → einspaltig */
  .training-inner {
    grid-template-columns: 1fr !important;
  }

  .training-left {
    padding: 48px 20px 40px !important;
  }

  /* Trainer-Fotos-Block unter Tabelle */
  .training-right {
    grid-template-columns: 1fr 1fr !important;
    min-height: 260px !important;
    align-self: auto !important;
  }

  .trainer-card {
    min-height: 200px !important;
  }

  /* Tabellenzeilen: 4 Spalten → 2 Spalten (Tag+Zeit | Ort+Trainer) */
  .training-row {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 4px 12px !important;
    padding: 14px 0 !important;
  }

  /* Header-Row ausblenden auf Mobile – Inhalt spricht für sich */
  .training-row--header {
    display: none !important;
  }

  .training-day {
    font-size: 17px !important;
  }

  .training-time {
    font-size: 11px !important;
    text-align: right !important;
  }

  .training-loc {
    font-size: 10px !important;
    grid-column: 1 !important;
    opacity: 0.65 !important;
  }

  .training-coach {
    font-size: 14px !important;
    text-align: right !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

}


/* ═══════════════════════════════════════════════════════
   16.  TEAMS — BASKETBALL / BOXFITNESS CTA (b5 / x5)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* B5 – Basketball Probetraining CTA */
  .b5-inner {
    grid-template-columns: 1fr !important;
    padding: 48px 20px !important;
    gap: 28px !important;
  }

  .b5-headline {
    font-size: clamp(36px, 11vw, 56px) !important;
  }

  .b5-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .b5-btn {
    flex: 1 1 140px !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* X5 – Boxfitness Probetraining CTA */
  .x5-inner {
    grid-template-columns: 1fr !important;
    padding: 48px 20px !important;
    gap: 28px !important;
  }

  .x5-headline {
    font-size: clamp(36px, 11vw, 56px) !important;
  }

  .x5-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .x5-btn {
    flex: 1 1 140px !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    white-space: normal !important;
    text-align: center !important;
  }

}


/* ═══════════════════════════════════════════════════════
   17.  PROJEKTE — GWENDOLIN QUOTE (TABLET)
        Base layout already uses 2-col + author below;
        tablet just needs correct grid-column for quote.
   ═══════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

  .s4-quote {
    grid-row: 1 !important;
    grid-column: 2 !important;
  }

  .s4-quote-author {
    grid-column: 2 !important;  /* align with quote text, not full-span */
  }

}


/* ═══════════════════════════════════════════════════════
   18.  STREETSPORTS — MITMACHEN SECTION PADDING
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Reduce the 80px 56px inline padding to mobile-friendly values */
  #mitmachen > div[style] {
    padding: 56px 20px !important;
  }

  /* Countdown CTA button: full-width on mobile */
  #mitmachen a[style*="background:var(--g)"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
  }

}


/* ═══════════════════════════════════════════════════════
   11.  DRUCK
   ═══════════════════════════════════════════════════════ */

@media print {
  nav, .event-bar,
  #asv-cb, .mobile-nav-drawer {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    padding-bottom: 0 !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10px;
    color: #666;
  }
}