@media (max-width: 768px) {
#contact .call-us, #contact .social-links{
	text-align: center ;
}
.widget a i{
	float: none !important;
}
.upcoming-text .matches {
	padding-top: 50px;
}

}
@media only screen and (min-width: 320px) and (max-width: 480px)  {
#map {
    background: rgba(0,0,0,0.4);
    margin-top: 50px;
}
}
@media only screen and (max-width: 768px) and (min-width: 320px)  {
#join .btn {
    margin: auto;
    width: 30%;
    margin-top: 20px;
}
}
@media only screen and (max-width: 990px) and (min-width: 320px)  {
#map {
    background: rgba(0,0,0,0.4);
    margin-top: 50px;
}
.upcoming-text .matches {
	padding-top: 50px;
}
}
@media (min-width: 768px) {
.gallery-item {
    margin: 12px -5px 12px -5px;
    padding: 0;
    overflow: hidden;
    height: 180px;
}
}

.container.blog-container.js-quickedit-main-content {
    padding-top: 96px; /* exakt Header-Hoehe; der sichtbare Abstand kommt aus #abteilungsbeschreibung (60px) */
    margin-bottom: 100px;
}

/* D10-Fix: Quick Edit (in D10 aus Core entfernt) lieferte frueher den
   Offset-Kontext. Fixierter Header darf Inhalt auf Nicht-Front-Seiten
   (Formulare, Login, Abteilungen, Galerien) nicht verdecken. */
body:not(.path-frontpage) .blog-container {
    padding-top: 96px; /* exakt Header-Hoehe */
    margin-bottom: 100px;
}

#about img {
    padding-right: 30px;
}

.widget a:hover{
	color: #000 !important;
}

.section-wrap {
    padding: 90px 0;
    overflow: hidden;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.page-404 h1 {
    font-size: 200px;
    line-height: 1.2;
}

.page-404 h2 {
    font-size: 32px;
    line-height: 1.2;
}

.page-404 p {
    font-size: 14px;
    line-height: 1.2;
}

.btn:hover, .btn:focus{
    color: #fff !important;
}

/* === In-Page-Anker (#verein, #aktuelles, #galerie, #sponsoren, #kontakt, #rechtliches) ===
   Browser-Agent live verifiziert (2026-06-03):
   - Sanftes Scrollen jetzt via JS-Handler (main.js, $.animate -96) fuer Nav-Klicks; CSS
     scroll-behavior:smooth wurde entfernt (vermeidet Ruckeln im Zusammenspiel mit jQuery-animate).
   - scroll-margin-top = exakte Header-Hoehe 96px -> native/Deep-Link-Anker landen buendig unter dem
     Header (vorher 160px). EIN Offset-Mechanismus (der scrollBy(-50)-Hack in main.js wurde entfernt).
   - padding-top der Anker-Sektionen 150px -> 60px (style.css setzt padding:150px 0) -> Ueberschrift
     sitzt hoeher, weniger blauer Leerraum darueber; unteres Padding (150px) bleibt = Sektionsabstand. */
:target,
[id] {
    scroll-margin-top: 96px;
}
/* GANZHEITLICH: Sektions-Abstand OBEN UND UNTEN fuer ALLE Theme-Sektionen vereinheitlichen (Startseite +
   Unterseiten). style.css setzt durchgehend padding:150px 0 (bzw. #mannschaft 150px 0 100px); hier
   symmetrisch auf padding:60px 0 (oben = unten) -> kein asymmetrischer Eindruck mehr. */
#verein,
#aktuelles,
#galerie,
#sponsoren,
#kontakt,
#rechtliches,
#abteilungsbeschreibung,
#abteilungszeiten,
#ansprechpartner,
#mannschaft,
#begegnungen,
#tabelle,
#geschichte .geschichtsabschnitt {
    padding: 60px 0;
}

/* === Design-Audit Quick-Wins (risikoarm) === */
/* Lesbarkeit: Body 14 -> 16px, mehr Zeilenhoehe */
body {
    font-size: 16px;
    line-height: 1.6;
}
/* Modernere Buttons: leicht abgerundet, ein Primaer-Akzent */
.btn,
.btn-custom,
.btn-primary,
.webform-button--submit {
    border-radius: 6px;
}
.btn-custom,
.btn-primary {
    background-color: #1a60ac;
    border-color: #1a60ac;
}
/* Mobil: groessere Tap-Targets im Burger-Menue */
@media (max-width: 991px) {
    #menu .nav > li > a,
    #menu .navbar-nav > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
        min-height: 44px;
    }
}

/* === Header-Layout: Logo inline links + Menue rechts, einzeilig ===
   Browser-Agent LIVE verifiziert (2026-06-03): CSS injiziert + DOM gemessen, dann persistiert.
   Mechanik: Menue laeuft ueber Bootstrap-Collapse (Burger <1000px). Ab >=1000px:
   .container als Flex-Zeile: Logo links in eigenem Bereich (margin-right 28px), Menue im Restbereich zentriert.
   - Unterstreichung a::after auf bottom:8px (war auf altes 32px-Linkpadding kalibriert -> lag quer im Text).
   - Dropdown 1. Ebene top:100% NUR fuer direkte Kinder (>li); verschachtelte Ebenen seitlich (top:0;left:100%).
   - Adaptiver Umbruch: Top-Level-Links white-space:normal -> mehrwortige Punkte ("Ueber uns","Mitglied werden")
     brechen bei Enge INNERHALB des Buttons um (statt Zeilen-Overflow); breit bleibt alles einzeilig.
   - Zusatz-Feintuning 1000-1100px: Margins/Padding leicht gestrafft. */
@media (min-width:1000px){
  /* Header-Container voll ausnutzen: Logo links, Menue rechts */
  #menu .container{display:flex;align-items:center;flex-wrap:nowrap;width:100%;max-width:none;padding-left:24px;padding-right:24px}
  /* Logo links in eigenem Bereich + Sicherheitsabstand rechts (2x vertikaler Abstand 14px = 28px);
     restlicher Bereich (flex:1) nimmt den Platz ein, Menue darin zentriert. */
  #menu .navbar-header{float:none;display:flex;align-items:center;width:auto;flex:0 0 auto;margin:0;margin-right:28px}
  #menu .navbar-collapse{flex:1 1 auto;display:flex!important;justify-content:center!important;padding-right:0;width:auto}
  /* Wrapper hart auf Flex+Center; Float/Margin des Menues (Bootstrap .navbar-right{float:right!important}) neutralisieren */
  #menu .region-navigation-collapsible{display:flex!important;justify-content:center!important;width:100%;float:none!important}
  /* WICHTIG: Zwischen-Block #block-hauptnavigation (war display:block, width:100%) muss auf Inhaltsbreite
     schrumpfen, sonst fuellt es den Wrapper und es gibt nichts zu zentrieren -> Menue sass links.
     (Browser-Agent live verifiziert: 1600/1300 gleiche Gaps; 1100/1010 schrumpft adaptiv, kein Overflow.) */
  #menu #block-hauptnavigation{flex:0 1 auto!important;width:auto!important;max-width:100%!important;float:none!important;margin:0!important}
  #menu #superfish-main{float:none!important;margin:0 auto!important;width:auto!important;justify-content:center!important;display:flex;flex-wrap:nowrap;align-items:center}
  #menu #superfish-main>li{float:none;display:flex;align-items:center;margin:0 2px}
  /* Umbruch INNERHALB der Menuepunkte erlauben (z.B. "Mitglied werden") statt Zeilen-Overflow */
  #menu #superfish-main>li>a{white-space:normal;padding:12px 2px;line-height:1.2;text-align:center;font-size:14px}

  /* Unterstreichung direkt unter den Text (6px, damit zweizeilige Punkte die Headerhoehe nicht aufblaehen) */
  #menu #superfish-main>li>a::after{bottom:6px!important}

  /* 1. Ebene: Dropdown direkt unter dem Linktext */
  #menu #superfish-main>li:hover>ul,
  #menu #superfish-main>li.sfHover>ul{top:100%!important;left:0!important}

  /* 2.+ Ebene: seitliches Ausklappen, oben buendig */
  #menu #superfish-main ul li:hover>ul,
  #menu #superfish-main ul li.sfHover>ul{top:0!important;left:100%!important}

  /* Submenue-Typografie */
  #menu #superfish-main ul li>a{font-size:14px;padding:10px 18px;line-height:1.3;white-space:normal}
}

/* Enger Bereich (1000-1100px): Abstaende leicht straffen, damit der umgebrochene Header sicher passt */
@media (min-width:1000px) and (max-width:1100px){
  #menu .container{padding-left:14px;padding-right:14px}
  #menu #superfish-main>li{margin:0 1px}
  #menu #superfish-main>li>a{padding-left:1px;padding-right:1px}
}

/* Sprungziele nicht hinter dem fixierten Header */
.page-title, main, .region-content { scroll-margin-top: 104px; }

/* Lesbarkeit: Fliesstext / News-Body auf 16px (Audit: war 12-14px) */
.field-content, article p, .field--name-body { font-size: 16px; line-height: 1.6; }

/* Tap-Target: Login-/Formularfelder mobil >= 44px */
@media (max-width: 768px) {
    form input[type="text"],
    form input[type="password"],
    form input[type="email"] { min-height: 44px; }
}

/* === Mobil-Menue (<1000px): geoeffnetes Superfish-Accordion als vollflaechige, opake Overlay ===
   Browser-Agent LIVE verifiziert (2026-06-03, 984x774). Superfish baut #superfish-main-accordion
   erst UNTER dem 1000px-Breakpoint (darum bei 1158px nicht sichtbar). Nur im .in (offen)-Zustand:
   opak weiss + volle Viewporthoehe, damit die Startseite nicht durchscheint; interner Scroll +
   40px Abstand nach dem letzten Punkt.
   HINWEIS: 96px in beiden calc() = Hoehe der Logo-Zeile; bei Theme-Aenderung an BEIDEN Stellen mitziehen. */
@media (max-width:999px){
  #bs-example-navbar-collapse-1.in #superfish-main-accordion{position:static!important;height:auto!important;overflow:visible!important}

  #menu #bs-example-navbar-collapse-1{
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Vollflaechige, opake Ueberlagerung + Abstand nach dem letzten Punkt */
  #menu #bs-example-navbar-collapse-1.in{
    min-height:calc(100vh - 96px);
    background:#fff;
    padding-bottom:40px;
  }

  #superfish-main-accordion ul,
  #superfish-main-accordion li{float:none!important;width:auto!important;position:static!important}
  #superfish-main-accordion li{display:block!important}
  #superfish-main-accordion>li{border-bottom:1px solid #e5e7eb}
  #superfish-main-accordion>li:last-child{border-bottom:none}
  #superfish-main-accordion>li>a,
  #superfish-main-accordion>li>.nolink{display:block;padding:14px 24px;font-size:16px;line-height:1.3;white-space:nowrap}
  #superfish-main-accordion ul li>a,
  #superfish-main-accordion ul li>.nolink{display:block;padding:11px 24px 11px 44px;font-size:14px;line-height:1.3;white-space:nowrap}
  #superfish-main-accordion ul ul li>a,
  #superfish-main-accordion ul ul li>.nolink{padding-left:62px;font-size:13px;white-space:nowrap}
  /* Graue Untermenue-Hintergruende entfernt -> Untermenues weiss wie das uebrige Menue.
     (Border der aufgeklappten Ebene kommt aus 'li.sf-expanded > ul' weiter unten; Hover-Feedback
     aus 'a:hover / span.nolink:hover' bleibt erhalten.) */
  #superfish-main-accordion ul li+li{border-top:1px solid rgba(0,35,72,0.06)}
}

/* === Mobil-Fixes (Browser-Agent live verifiziert, 2026-06-03) === */
@media only screen and (max-width:1000px) and (min-width:320px){
  /* (a) Weißer Abstand unter dem Header: 50px-Top-Margin des Slider-Containers .intro entfernen
     (kollabierte durch die Wrapper und schob den Inhalt nach unten). */
  .intro{margin-top:0}
  /* (b) Inhalts-Offset an die echte Navbar-Hoehe (96px) statt 100px -> Bild buendig unter dem Header. */
  .js-quickedit-main-content{padding-top:96px}
  /* Trennlinien zwischen den Haupt-Menuepunkten im mobilen Accordion (nur oberste Ebene via >li). */
  #menu .navbar-nav.sf-accordion>li{border-bottom:1px solid #e0e0e0}
  #menu .navbar-nav.sf-accordion>li:last-child{border-bottom:none}

  /* Aktuelles/Blog-Block NUR mobil: Eintraege volle Breite (unabhaengig vom angehaengten Bild).
     Ursache: span.field-content ist display:inline + .blog-item float:left ohne Breite -> der Eintrag
     schrumpft auf die Bildbreite. WICHTIG: nur mobil - der Desktop nutzt das Float-Grid! */
  .view-blog .views-field-nothing .field-content{display:block}
  /* volle Breite + mehr Abstand zwischen "Weiterlesen" und der Trennlinie (war padding-bottom:20px) */
  .view-blog .blog-item{float:none!important;width:100%!important;padding-bottom:36px}
  /* Immer das GANZE Bild zeigen statt 190px-Ausschnitt (Theme: .thumbnail height:190px + img object-fit:cover) */
  .view-blog .blog-item .thumbnail{height:auto!important;overflow:visible!important}
  .view-blog .blog-item img{height:auto!important;object-fit:contain}
}

/* === Kontakt-Footer: ADRESSE-Block (Titel "ADRESSE" + Wert) konsistent ausrichten ===
   style.css erzwingt #kontakt #block-googlemaps h2{text-align:left} -> Titel links, Wert (col-md-6
   text-center) zentriert -> uneinheitlich. Loesung am SELBEN Mobil/Non-Mobil-Breakpoint wie der Rest
   der Seite (1000px = Umschaltpunkt Menue->Burger), KEIN eigener Breakpoint:
   Non-Mobile (>=1000px): Titel + Wert ZENTRIERT;  Mobile (<1000px): beides LINKS (Wert unter dem
   Titel, Block buendig unter TELEFON). custom.css laedt nach style.css -> overridet bei gleicher Spezifitaet. */
@media (min-width:1000px){
  #kontakt #block-googlemaps h2,
  #kontakt #block-googlemaps .field__item,
  #kontakt #block-googlemaps .field__item h4{text-align:center}
}
@media (max-width:999px){
  #kontakt #block-googlemaps h2,
  #kontakt #block-googlemaps .field__item,
  #kontakt #block-googlemaps .field__item h4{text-align:left}
}

/* === Aktuelles/Blog NUR Non-Mobile (>=1001px): "Weiterlesen" an die Bildunterkante ausrichten ===
   Non-Mobile-Layout: Bild links (.col-md-3, quadratisch), Text rechts (.col-md-9). ".more" wird
   absolut an die UNTERKANTE des Bildes gesetzt: Bildunterkante = .blog-item padding-top (40px, aus
   style.css .blog-item{padding:40px 0 20px}) + Thumbnail-Hoehe (190px) = 230px; translateY(-100%)
   richtet die Unterkante von "Weiterlesen" darauf aus. .col-md-9 auf static, damit .more am
   .blog-item ankert statt an der Textspalte. Komplementaer zum Mobil-Blog-Fix (max-width:1000px).
   (Browser-Agent live verifiziert.) HINWEIS/fragil: haengt an festen 40px/190px + setzt voraus,
   dass der Teasertext kuerzer als das Bild ist (sonst Overlap). */
@media (min-width:1001px){
  .view-blog .blog-item{position:relative}
  .view-blog .blog-item .col-md-9{position:static}
  .view-blog .blog-item .more{position:absolute;right:15px;top:calc(40px + 190px);transform:translateY(-100%);float:none;margin:0}
}

/* === Galerie: weisses Aufblitzen beim schnellen Scrollen verhindern ===
   Der blaue Galerie-Hintergrund lag nur auf dem Views-Block (#block-...gallery...); darunter ist
   der body weiss -> beim schnellen Scrollen paintet kurz Weiss durch (<500ms, reines Paint-Timing).
   Fix: Blau auch auf den Galerie-Container + dessen direkte Wrapper. Geteilte Eltern
   (.region-content/<section>) bewusst NICHT, da sie andere Sektionen mit umschliessen.
   (Browser-Agent live verifiziert: durchgehend blau, kein Weiss mehr.) */
#galerie, #galerie > div {
  background-color: rgb(26, 96, 172);
}

/* "Alle Bilder ansehen"-Button (Galerie-Startseite): weisse Schrift auf solidem SVV-Blau,
   ohne Rahmen, ohne Hover-Animation. (Inline-Style wurde aus dem Template entfernt.) */
#galerie .gallery-all-btn,
#galerie .gallery-all-btn:hover,
#galerie .gallery-all-btn:focus,
#galerie .gallery-all-btn:active {
  background-color: #1a60ac !important;
  background-image: none;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
  font-weight: 600;
  /* gleiche Schriftart wie die Galerie-Ueberschrift (#galerie h2 nutzt 'FFJustLefthand') */
  font-family: 'FFJustLefthand', cursive !important;
  /* nur nuanciert kleiner als die Headings (#galerie h2 = 50px): 44px Desktop, 34px <=1000px (s.u.) */
  font-size: 44px !important;
  line-height: 1.15;
}
@media (max-width: 1000px) {
  /* Headings sind hier 40px (style.css:1716ff) -> Button nuanciert kleiner: 34px */
  #galerie .gallery-all-btn { font-size: 34px !important; }
}

/* === /galerie (Standalone-Seite) wie der Galeriebereich der Startseite ===
   Drupal rendert auf /galerie zusaetzlich einen dunklen Seitentitel <h1 class="page-title">Galerie</h1>
   UEBER der blauen Sektion (die bereits ihr eigenes <h2>Galerie</h2> hat) -> doppelte, dunkle Ueberschrift.
   Fix: (1) den redundanten Seitentitel-Block ausblenden, (2) Sektions-Heading weiss (Theme hatte
   #galerie h2 color:#fff auskommentiert), (3) oben Platz fuer den fixierten 96px-Header schaffen
   (der Seitentitel lieferte vorher den Abstand). Nur auf .path-galerie -> Startseite unberuehrt. */
.path-galerie .block-page-title-block { display: none; }
.path-galerie #galerie { padding-top: 120px; }
#galerie h2 { color: #fff !important; }

/* === Cookie-Einstellungen (eu_cookie_compliance Withdraw-Tab) am LINKEN Rand statt zentriert ===
   Modul fixiert den Tab unten mit position:absolute; left:50%; transform:translate(-50%,-100%).
   Hier links ausrichten; die vertikale Verschiebung (-100%, sitzt ueber der Leiste) bleibt. */
.eu-cookie-withdraw-tab {
  left: 0 !important;
  right: auto !important;
  transform: translate(0, -100%) !important;
  /* Optik aus dem Banner-Redesign (Browser-Agent): Corporate-Blau, abgerundete Oberkante. */
  background: #1a60ac !important;
  color: #fff !important;
  border-radius: 0 8px 0 0 !important;   /* nur rechte Oberecke runden (Tab sitzt am linken Rand) */
  font-weight: 600 !important;
  padding: 8px 14px !important;
}

/* Nicht-verlinkte Eltern-Menuepunkte (<span class="nolink">: Kinderturnen, Senioren, Junioren,
   Boule, Fussball, Damen-Fitness, "Fuer die Kleinen", "Angebote fuer Helferstunden") identisch zu
   den verlinkten Dropdown-Eintraegen stylen. Die Theme-Regeln greifen nur auf <a> -> ohne dies
   fielen die nolink-spans auf graue Default-Optik zurueck (Problem "Kinderturnen sieht kaputt aus"). */
.sfHover ul a,
.sfHover ul span.nolink {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  color: rgb(0, 35, 72);
  background-color: #fff;
  font-size: 14px; /* einheitlich mit den Link-Eintraegen (Bootstrap .dropdown-menu = 14px); war 16px */
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgb(0, 35, 72);
  display: block;
}
.sfHover ul span.nolink { cursor: default; }
/* Sicher gegen Superfish/Hover-Spezifitaet: alle Dropdown-Eintraege einheitlich 14px */
#menu .dropdown-menu a,
#menu .dropdown-menu span.nolink { font-size: 14px; }

/* Top-Level-Menuepunkte OHNE Link (nolink-Spans, z.B. Helferstunden/Gaststaette seit Stage B):
   Drupal/Superfish rendert sie als <span> statt <a>. Die Basisregel gibt Top-Level-<span> sowohl 18px
   Schrift ALS AUCH padding 42px/32px (Box 91px) -> Text vertikal verschoben; der <a>-Reduktions-
   Selektor (14px + padding 12px 2px) greift nicht auf Spans. Hier beides angleichen.
   #superfish-main = nur Desktop-Menue (Mobil-Akkordeon #superfish-main-accordion bleibt unberuehrt). */
#menu #superfish-main > li > span.nolink {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  padding: 12px 2px;
}

/* === Dropdown-Design (Desktop, Superfish-Hauptmenue #superfish-main) — ueberarbeitet ===
   Weisser Container mit Radius + weichem Marken-Schatten; Eintraege mit ruhigem Padding, Markenfarbe
   #002348 (= rgb(0,35,72)), abgerundetem Hover-Fill (navy/weiss) und Chevron bei Flyout-Eltern.
   NUR Desktop (>=1000px) -> das per JS gebaute Mobil-Akkordeon (#superfish-main-accordion) bleibt
   unberuehrt. Selektor #menu #superfish-main (2 IDs) + !important setzen sich sicher gegen die
   Legacy-.sfHover-Regel (oben) und die Superfish-Basisstile durch. Entwurf vom Browser-Agent. */
@media (min-width: 1000px) {
  /* Container: weiss, runde Ecken, weicher Schatten */
  #menu #superfish-main ul {
    background: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 35, 72, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    padding: 6px 0 !important;
    min-width: 220px !important;
    margin-top: 6px;
    overflow: visible;
  }
  /* Flyout (3. Ebene) sauber am Elternpunkt andocken */
  #menu #superfish-main ul ul {
    margin-top: -6px;
    margin-left: 2px;
  }
  /* Listenelemente: keine Trennlinien, volle Breite */
  #menu #superfish-main ul li {
    border: none !important;
    background: transparent !important;
    width: 100% !important;
  }
  /* Eintraege: einheitliches Padding, Markenfarbe, runde Hover-Flaeche, Oswald */
  #menu #superfish-main ul li a,
  #menu #superfish-main ul li span.nolink {
    display: block !important;
    padding: 10px 20px !important;
    margin: 1px 6px !important;
    color: #002348 !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    border: none !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  /* Hover / aktiv: Markenfarbe gefuellt, weisse Schrift */
  #menu #superfish-main ul li a:hover,
  #menu #superfish-main ul li a:focus,
  #menu #superfish-main ul li.sfHover > a,
  #menu #superfish-main ul li.sfHover > span.nolink,
  #menu #superfish-main ul li a.is-active {
    background: #002348 !important;
    color: #ffffff !important;
  }
  /* Flyout-Eltern (z.B. Fussball, Senioren): Platz fuer Chevron */
  #menu #superfish-main ul li.menuparent > a,
  #menu #superfish-main ul li.menuparent > span.nolink {
    position: relative !important;
    padding-right: 36px !important;
  }
  /* Chevron-Indikator rechts */
  #menu #superfish-main ul li.menuparent > a::after,
  #menu #superfish-main ul li.menuparent > span.nolink::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: translateY(-65%) rotate(-45deg) !important;
    opacity: 0.55 !important;
    background: transparent !important;
  }
}

/* === Mobil-Menue-Verbesserungen (<1000px): kein Doppelbalken, Ausklapp-Pfeile, Platzhalter wie Links ===
   Browser-Agent verifiziert. Steht spaeter im Source -> overridet die Basis-Accordion-Regeln oben. */
@media (max-width:999px){
  /* (1) Doppel-Border weg: Linie nur am DIREKT aufgeklappten Submenue (statt an jedem ul) */
  #superfish-main-accordion ul { border-left: none !important; }
  #superfish-main-accordion li.sf-expanded > ul { border-left: 3px solid rgba(0,35,72,0.18) !important; }

  /* (2) Volle Breite erzwingen (Superfish shrink-wrappt im Accordion) + Ausklapp-Chevron nur bei menuparent */
  #superfish-main-accordion,
  #superfish-main-accordion > ul,
  #superfish-main-accordion ul { float: none !important; width: 100% !important; }
  #superfish-main-accordion li { display: block !important; width: 100% !important; float: none !important; position: relative !important; }
  #superfish-main-accordion li > a,
  #superfish-main-accordion li > span { display: block !important; width: 100% !important; box-sizing: border-box; }
  #superfish-main-accordion li.menuparent > a,
  #superfish-main-accordion li.menuparent > span { padding-right: 44px !important; }
  #superfish-main-accordion li.menuparent::after {
    content: "\203A"; position: absolute; right: 24px; top: 0; height: 2.7em;
    display: flex; align-items: center; transform: rotate(90deg); transition: transform .2s;
    font-size: 20px; color: rgba(0,35,72,0.55); pointer-events: none;
  }
  #superfish-main-accordion li.menuparent.sf-expanded::after { transform: rotate(-90deg); }

  /* (3) Platzhalter (nolink, z.B. Boule) wie echte Links: Pointer + voller Hover-Hintergrund */
  #superfish-main-accordion span.nolink { color: inherit !important; cursor: pointer !important; }
  #superfish-main-accordion a:hover,
  #superfish-main-accordion span.nolink:hover { background-color: rgba(0,35,72,0.06) !important; }
}

/* === Mobil-Galerie (<768px): zweispaltig statt einspaltig + leichtes Spacing (Browser-Agent verifiziert) ===
   col-xs-12 wuerde volle Breite (einspaltig) ergeben -> Thumbnail unscharf hochskaliert. 50% -> nahe
   nativer Groesse, schaerfer, bessere Ausschnitte. */
@media (max-width:767px){
  #galerie .gallery-items > [class*="col-"] {
    width: 50% !important;
    float: left !important;
    padding: 0 6px !important;
  }
  #galerie .gallery-item { margin-bottom: 12px !important; }
}

/* === Mobil (<1000px): horizontaler Innenabstand fuer Inhalts-Container ===
   .container ist fluid + .row hat negative Margins -> Text klebte ~12px am Viewport-Rand.
   Header (#menu .container) hat eigene Regeln; #galerie ausgespart (eigene Mobil-Galerie-Regel). */
@media (max-width: 999px){
  .blog-container .container,
  #verein > .container,
  #geschichte .container,
  #abteilungsbeschreibung > .container,
  #abteilungszeiten > .container,
  #ansprechpartner > .container,
  #mannschaft > .container,
  #begegnungen > .container,
  #tabelle > .container,
  #aktuelles > .container,
  #sponsoren > .container,
  #kontakt > .container,
  #rechtliches > .container,
  .inhaltsseite-page > .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* === FuPa-Widgets — SVV-Corporate-Design + Layout-Fixes ===
   Die FuPa-Widgets rendern client-seitig als HTML mit eigenen .fp-*-Klassen (CSS von
   widget-api.fupa.net, nur per Override beeinflussbar -> daher !important). Entwurf vom Browser-Agent,
   hier ins Theme uebernommen + GESCOPED: Die Farb-Inversion gilt NUR fuer die Tabelle
   (#fupa_widget_tabelle, blauer #tabelle-Bereich). Begegnungen (#begegnungen) und Mannschaft
   (#mannschaft) liegen auf WEISS -> dort KEINE weisse Schrift (waere unsichtbar), nur Layout. */

/* 1. Layout-Fix (alle Widgets): Container nicht auf width:0 zusammenfallen lassen
   (sonst wurde der Mannschaftskader zur 150px-Spalte gequetscht und lief rechts raus). */
.fp-widget-views,
.fp-widget-view,
.fp-view,
.fp-team-squad-view,
.fp-team-standings-view,
.fp-team-matches-view {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.fp-widget-view { justify-content: flex-start !important; }

/* Mannschaftskader: jede Positionsgruppe volle Breite, Spieler im responsiven Raster */
.fp-team-squad-view-position-group { width: 100% !important; }
.fp-team-squad-view-position-group-players {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}
.fp-team-squad-viewlink,
.fp-team-squad-view-player-wrapper { width: 100% !important; max-width: 100% !important; }
.fp-team-squad-view-player-image { width: 100% !important; height: auto !important; }

/* 2. Tabelle invertiert (NUR #fupa_widget_tabelle = blauer Bereich): transparenter Hintergrund,
   ALLE Texte weiss (robust via *), neutrales Zebra (unabhaengig von Zonen), EINHEITLICHE Trennlinien
   und farbige Zonen-Balken (Auf-/Abstieg/eigener Verein). Browser-Agent-Entwurf, hier auf die Tabelle
   gescoped (Agent schrieb global -> haette die weissen Bereiche Begegnungen/Mannschaft getroffen). */
#fupa_widget_tabelle,
#fupa_widget_tabelle * { color: #fff !important; }
#fupa_widget_tabelle .fp-team-standings-view { background: transparent !important; }

/* Neutrales Zebra ueber :nth-of-type(even) (NICHT ueber die Zonenklassen) */
#fupa_widget_tabelle .fp-table-row { background: rgba(255, 255, 255, 0.05) !important; }
#fupa_widget_tabelle .fp-team-link:nth-of-type(even) .fp-table-row { background: rgba(255, 255, 255, 0.10) !important; }

/* Trennlinien EINHEITLICH: volle Breite, 1px, dezentes transluzentes Weiss
   (FuPa-Default war nur 658px breit + hellgrau -> wirkte mal weiss, mal dunkelblau) */
#fupa_widget_tabelle .fp-table-separator {
  width: 100% !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Auf-/Abstiegszonen: farbiger linker Balken + leichte Toenung. FuPa vergibt fp-up*/fp-down*/
   fp-root-entity automatisch je Liga & Saison -> keine Platznummern hartkodiert. */
#fupa_widget_tabelle .fp-table-row.fp-up1 { background: rgba(46, 204, 113, 0.22) !important; box-shadow: inset 4px 0 0 0 #2ecc71 !important; }
#fupa_widget_tabelle .fp-table-row.fp-up2 { background: rgba(46, 204, 113, 0.12) !important; box-shadow: inset 4px 0 0 0 rgba(46, 204, 113, 0.6) !important; }
#fupa_widget_tabelle .fp-table-row.fp-down1 { background: rgba(231, 76, 60, 0.12) !important; box-shadow: inset 4px 0 0 0 rgba(231, 76, 60, 0.6) !important; }
#fupa_widget_tabelle .fp-table-row.fp-down2 { background: rgba(231, 76, 60, 0.22) !important; box-shadow: inset 4px 0 0 0 #e74c3c !important; }
#fupa_widget_tabelle .fp-table-row.fp-root-entity { background: rgba(255, 255, 255, 0.20) !important; box-shadow: inset 4px 0 0 0 #ffd200 !important; font-weight: 700 !important; }

/* Footer transparent (nur Tabelle) */
#fupa_widget_tabelle .fp-widget-footer.fp-widget-footer-container { background: transparent !important; }
#fupa_widget_tabelle .fp-widget-footer a { color: rgba(255, 255, 255, 0.85) !important; }

/* === Inhaltsseite (generischer Seitentyp): gethemte, lesbare Infoseite ===
   Node-Canonical-Seite. Drupal-Seitentitel-Block ausblenden (Titel kommt als H1 aus dem Template),
   oben Platz fuer den fixierten 96px-Header. Nur fuer diesen Seitentyp (.page-node-type-inhaltsseite). */
.page-node-type-inhaltsseite .block-page-title-block { display: none; }
.inhaltsseite-page { padding-top: 120px; padding-bottom: 80px; }
/* Seiten-Heading EXAKT wie die Theme-Section-h2 (Abteilung/#ansprechpartner): zentriert, 50px/40px,
   Handschrift-Font, Gewicht 600 — alles !important + #inhaltsseite (ID), weil die Theme-Heading-Regeln
   selbst !important sind. Farbe Corporate-Navy #002348 (Inhaltsseite hat IMMER weissen Hintergrund ->
   navy; ersetzt die alternierende .region-content .block:nth-child(even/odd) h1-Regel, die das h1 sonst
   auch mal weiss faerben koennte = unsichtbar auf Weiss). Teil der einheitlichen FFJustLefthand-Regel. */
#inhaltsseite .section-title h1 {
  font-family: 'FFJustLefthand', cursive !important;
  font-size: 50px !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-transform: uppercase !important;   /* DER eigentliche Fix: Theme macht h2 uppercase, h1 nicht */
  color: #002348 !important;
  margin: 10px 0 15px;
  padding-bottom: 20px;
}
@media (max-width: 1000px) {
  #inhaltsseite .section-title h1 { font-size: 40px !important; }
}
.inhaltsseite-page .field--name-field-image { margin-bottom: 24px; }
.inhaltsseite-page .field--name-field-image img { max-width: 100%; height: auto; border-radius: 6px; }
.inhaltsseite-page .field--name-body { font-size: 16px; line-height: 1.75; }
/* Body-Bilder responsiv: fuellen hoechstens die Inhaltsbreite (kein horizontaler Scroll trotz fester
   width="…"-Attribute) und wachsen dank erhaltener width-Angabe nur bis zur natuerlichen Groesse, nicht
   darueber (kein Hochskalieren). Ansprechpartner-Fotos ausgenommen (eigenes rundes Format). */
.inhaltsseite-page .field--name-body img {
  max-width: 100% !important;
  height: auto !important;
}
/* Ansprechpartner-Karten wie auf Abteilungsseiten: das #ansprechpartner-Styling (.ansprechpartner-item:
   rundes Foto, Name, Rolle) greift bereits aus style.css. Hier nur das 150px-Sektionspadding fuer den
   Seitenkontext zaehmen + die Karten als zentrierte, umbrechende Reihe anordnen. */
.inhaltsseite-page #ansprechpartner { padding: 30px 0 0; }
.inhaltsseite-page .ansprechpartner-wrapper { display: flex; flex-wrap: wrap; justify-content: center; }

/* === Consent-Platzhalter fuer externe Embeds (FuPa, Google Maps) — DSGVO ===
   Helle Box, lesbar sowohl auf weissem (Begegnungen/Mannschaft) als auch blauem (#tabelle/#kontakt) Bereich. */
.svv-consent-placeholder {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px dashed rgba(0, 35, 72, 0.25);
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  color: #002348;
  max-width: 520px;
  margin: 0 auto;
}
.svv-consent-accept {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 16px;
  background: #1a60ac;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.svv-consent-accept:hover { background: #14508f; }

/* === Cookie-Banner-Redesign (eu_cookie_compliance, Kategorien-Modus) ===
   Vorher: fixe 700px-Box, padding-loser linksbuendiger Inhalt, alle Buttons gleich hellgrau ohne
   Hierarchie, englische Labels. Neu: volle Breite, zentrierter 980px-Inhalt, Corporate-Blau #1a60ac
   (echte Theme-Sekundaerfarbe, 15x in style.css) mit #0779bf-Akzentkante, Kategorien als responsive
   Karten (flex 1 1 240px -> bricht auf schmal um), Primaer/Sekundaer-Buttons. Entwurf + DOM-/Funktions-
   test vom Browser-Agent. Der .eu-cookie-withdraw-tab-Block des Agenten ist oben in die Links-Ausricht-
   Regel integriert (damit left:0 erhalten bleibt). */
#sliding-popup,
#sliding-popup.sliding-popup-bottom {
  width: 100% !important;
  left: 0 !important; right: 0 !important;
  /* KEIN bottom hier setzen! Das Modul blendet das Banner per JS ueber inline 'bottom' ein/aus
     (animate({bottom:0}) zeigen, {bottom:-height} verstecken). Ein 'bottom: 0 !important' wuerde diese
     Animation ueberschreiben -> Banner liesse sich nach einer Wahl nicht mehr ausblenden. */
  background: #1a60ac !important;                 /* Corporate-Blau */
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25) !important;
  border-top: 3px solid #0779bf !important;       /* Akzent-Blau */
}
#sliding-popup .eu-cookie-compliance-banner {
  width: 100% !important; max-width: 980px !important;
  margin: 0 auto !important; padding: 24px 28px 28px !important;  /* unten 28px Luft -> Buttons kleben nicht */
  box-sizing: border-box !important;
}
#sliding-popup .popup-content.info {
  display: block !important; max-width: none !important; padding: 0 !important;
}
#sliding-popup .eu-cookie-compliance-message h2 {
  font-size: 20px !important; line-height: 1.3 !important;
  margin: 0 0 8px !important; color: #fff !important;
}
#sliding-popup .eu-cookie-compliance-message p {
  font-size: 14px !important; line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.92) !important; margin: 0 0 16px !important;
}
/* Kategorien als Karten in responsiver Reihe */
#sliding-popup #eu-cookie-compliance-categories {
  display: flex !important; flex-wrap: wrap !important;
  gap: 12px !important; margin: 0 0 20px !important;
}
#sliding-popup .eu-cookie-compliance-category {
  flex: 1 1 240px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important; padding: 12px 14px !important; margin: 0 !important;
}
#sliding-popup .eu-cookie-compliance-category > div:first-child {
  display: flex !important; align-items: center !important; gap: 8px !important;
}
#sliding-popup .eu-cookie-compliance-category-checkbox {
  width: 18px !important; height: 18px !important;
  accent-color: #fff !important; cursor: pointer !important; margin: 0 !important;
}
#sliding-popup .eu-cookie-compliance-category label {
  font-size: 15px !important; font-weight: 700 !important;
  color: #fff !important; cursor: pointer !important;
}
#sliding-popup .eu-cookie-compliance-category-description {
  font-size: 12.5px !important; line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.82) !important; margin: 6px 0 0 !important; padding: 0 !important;
}
/* Drei Aktions-Buttons, ALLE identisch (solides Weiss, blaue Schrift) und IMMER gleich breit. Drei Zonen,
   an den Header gekoppelt:
   - < 600px: gestapelt, volle Breite.
   - 600px bis < 1000px: gestapelt, gleiche feste Breite (360px), Block zentriert.
   - >= 1000px (Header voll sichtbar = Superfish-Desktop, siehe @media-Grenzen in style.css/oben):
     EINE Reihe, alle Buttons gleich breit (220px), Block zentriert.
   Setzt das Template-Override voraus (alle drei Buttons gemeinsam in #popup-buttons). #popup-buttons (ID)
   liefert die noetige Spezifitaet -> schlaegt Modul-/Theme-Button-Regeln (Klassenregel verlor sonst trotz
   !important gegen die ID). */
#sliding-popup #popup-buttons.eu-cookie-compliance-buttons {
  display: flex !important;
  flex-direction: column !important;     /* gestapelt (Standard = Zone 600-999) */
  align-items: center !important;        /* Block + Buttons horizontal zentriert */
  gap: 12px !important;
  float: none !important; clear: both !important;
  /* Modul-CSS setzt .eu-cookie-compliance-buttons auf max-width:40% (+ float:right) -> Container war nur
     ~40% breit und stand links; align-items:center zentrierte dann nur INNERHALB dieser linken Spalte.
     Hier auf volle Breite zwingen, damit die Zentrierung ueber den ganzen Inhaltsbereich greift. */
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important; padding: 0 !important;
}
#sliding-popup #popup-buttons button {
  background: #fff !important;
  color: #1a60ac !important;
  border: 2px solid #fff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: filter .15s ease !important;
  width: 100% !important;
  max-width: 360px !important;           /* Zone 600-999: gleiche, zentrierte Breite */
}
#sliding-popup #popup-buttons button:hover { filter: brightness(0.94) !important; }
/* Banner zeigt IMMER dieselben 3 Buttons (Auswahl akzeptieren / Alle ablehnen / Alle akzeptieren).
   eu_cookie_compliance blendet nach Zustimmung (initPopup) den Reject-Button via .visually-hidden aus
   und zeigt stattdessen den In-Popup-Withdraw-Button — beides hier neutralisieren:
   (a) In-Popup-Withdraw-Button NIE zeigen (Widerruf laeuft ueber "Alle ablehnen"). */
#sliding-popup #popup-buttons .eu-cookie-withdraw-button { display: none !important; }
/* (b) Reject-Button IMMER sichtbar (das modulseitige .visually-hidden ueberschreiben; Breite/Styling
   kommen aus der #popup-buttons-button-Regel). */
#sliding-popup #popup-buttons .eu-cookie-compliance-reject-button {
  position: static !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
}
/* < 600px: gestapelt in voller Breite (kein max-width-Cap). */
@media (max-width: 599px) {
  #sliding-popup #popup-buttons button { max-width: none !important; }
}
/* >= 1000px (Header voll sichtbar): EINE zentrierte Reihe, alle Buttons gleich breit. */
@media (min-width: 1000px) {
  #sliding-popup #popup-buttons.eu-cookie-compliance-buttons {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  #sliding-popup #popup-buttons button { width: 220px !important; max-width: 220px !important; }
}

/* Withdraw-Banner (aufgeklappter "Cookie-Einstellungen"-Tab): nutzt .eu-cookie-withdraw-banner +
   .eu-cookie-compliance-content (NICHT .eu-cookie-compliance-banner) -> die Consent-Button-Regel greift
   hier nicht. Inhalt wie der Consent-Banner zentrieren (980px) + gleiches Spacing (24/28/28), damit Text
   und Button nicht am Rand kleben. Button weiss gefuellt: es ist die EINZIGE Aktion im Banner -> darf
   prominent sein (zuvor Outline -> auf Wunsch nun gefuellt wie "Alle akzeptieren"). */
.eu-cookie-withdraw-banner .eu-cookie-compliance-content {
  width: 100% !important; max-width: 980px !important;
  margin: 0 auto !important; padding: 24px 28px 28px !important;
  box-sizing: border-box !important;
}
.eu-cookie-withdraw-button,
.eu-cookie-withdraw-button.button--primary {
  background: #fff !important;
  color: #1a60ac !important;
  border: 2px solid #fff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  text-transform: none !important;
  box-shadow: none !important;
  margin-top: 4px !important;
  transition: filter .15s ease !important;
}
.eu-cookie-withdraw-button:hover {
  filter: brightness(0.94) !important;
}

/* === Einheitliche Ueberschriftenfarbe: ALLE FFJustLefthand-Headings, die NICHT weiss sind, auf
   Corporate-Navy #002348 (Vorgabe). Diese Sektionen liegen auf hellem Hintergrund und hatten teils
   keine explizite Farbe -> erbten dunkles Default-Grau/Schwarz; hier vereinheitlicht.
   BEWUSST NICHT enthalten (bleiben weiss, eigene Regeln):
     #corporate-slider h3, #tabelle h2, #galerie h2 (custom.css:352), #kontakt-Headings (blaue Sektion);
   .geschichtsabschnitt h2 faerbt sich bereits per :nth-child (even=#002348 / odd=weiss) selbst.
   #inhaltsseite .section-title h1 wird oben in seiner eigenen Regel auf #002348 gesetzt.
   AUSNAHME: #verein h2 ("Herzlich Willkommen beim SVV!") liegt auf der Startseite auf einem dunklen
   Luftbild (Inline-Hintergrund DJI_*.jpg) -> bleibt WEISS (Regel direkt darunter). */
#abteilungsbeschreibung h2,
#abteilungsbeschreibung h3,
#abteilungszeiten h2,
#ansprechpartner h2,
#mannschaft h2,
#begegnungen h2,
#sponsoren h2,
#newsarchiv .section-title h2,
#aktuelles .section-title h2,
#rechtliches h2 {
  color: #002348 !important;
}

/* Abteilungs-/Team-Sektionen ohne eigenen Hintergrund erben die Blau/Weiss-Streifung der Bloecke
   (.region-content .block:nth-child(odd) = #1A60AC + weisser Text; style.css:101). Die #002348-Regel
   oben gilt daher nur fuer die HELLEN (even) Bloecke; auf den BLAUEN (odd) Bloecken muessen die
   Headings weiss sein. Hoehere Spezifitaet (ID im odd-Kontext) gewinnt. Nur Subseiten-IDs ->
   Startseite unberuehrt. */
.region-content .block:nth-child(odd) #abteilungsbeschreibung h2,
.region-content .block:nth-child(odd) #abteilungsbeschreibung h3,
.region-content .block:nth-child(odd) #abteilungszeiten h2,
.region-content .block:nth-child(odd) #ansprechpartner h2,
.region-content .block:nth-child(odd) #begegnungen h2 {
  color: #fff !important;
}

/* "Über uns"-Willkommen liegt auf dunklem Luftbild -> weiss. */
#verein h2 {
  color: #fff !important;
}

/* === #ansprechpartner-Sektion (z.B. /vorstandschaft, Sponsoren-Unterseiten) horizontal mittig ===
   Messung (Browser-Agent): Heading ~49px nach rechts versetzt. Ursache: '#ansprechpartner .row' ist
   Flexbox mit justify-content:center UND die Spalte hat col-md-offset-1 (margin-left 8.33% ≈ 99px) ->
   DOPPELTER Versatz: Flexbox zentriert die Spalte und die Offset-Marge schiebt sie zusaetzlich nach
   rechts. Fix: Offset-Marge ab md aufheben -> Flexbox zentriert sauber (deckungsgleich mit der
   VORSTANDSCHAFT-Spalte bei x=134). Breite zur Konsistenz auf 83.3% halten (gleiche Inhaltsbreite
   wie #inhaltsseite). VORSTANDSCHAFT selbst ist bereits mittig (kein Flex-Row) -> keine Aenderung. */
@media (min-width: 992px) {
  #ansprechpartner .col-md-10.col-md-offset-1 { width: 83.333333%; margin-left: 0; }
}