/* =====================================================================
   verein.css  (kommentierte Vollversion – INTERN UI + HERO Glasbox aktiv)
   Stand: 2026-02-24

   ZIEL
   - WordPress (Astra Free) ist Shell (Header/Footer/Menü)
   - Inhalte kommen als statische HTML-Fragmente aus /content/...
   - Assets (CSS/JS/IMG) liegen unter /content-assets/...

   NEU in dieser Version (nach deinem Wunsch)
   ---------------------------------------------------------------------
   HERO:
   - Schriftfarbe in Hero immer WEISS (kein Mix mit schwarz)
   - Option C (Glasdesign/Content-Box) ist AKTIV (Desktop + Mobile)
   - Option A (Gradient Overlay) ist als Kommentar enthalten
   - Option B (Text-Shadow) ist als Kommentar enthalten
     -> Du kannst A/B bei Bedarf zusätzlich aktivieren, C bleibt aktiv.

   INTERN UI:
   - Account-Chip (Header rechts): .verein-account-chip
   - Intern-Info-Bar (oben im Content): .verein-intern-infobar
   - Optionale "Intern"-Badges für Dashboard-Kacheln

   WICHTIGE ABHÄNGIGKEITEN (damit nichts kaputt geht)
   ---------------------------------------------------------------------
   (A) HERO (Startseite)
       Erwartet:
         <section class="verein-section verein-section--hero">
           <div class="verein-hero">
             <img ...>
             <div class="verein-hero__content">...</div>
           </div>
         </section>

       Wichtig:
       - Das <img> muss direktes Child sein: .verein-hero > img

   (B) GRUPPEN / CARDS
       Erwartet:
         <div class="verein-grid">
           <div class="verein-card">
             <img ...>
             <div class="verein-card__body">...</div>
           </div>
         </div>

       Regeln:
       - .verein-card img bekommt eine feste Preview-Höhe,
         sonst werden Bilder je nach Quelle "riesig".

   (C) TERMINE (Kacheln/Liste)
       Erwartet:
         <ul class="verein-events">
           <li class="verein-event">
             <div class="verein-event__date">...</div>
             <div class="verein-event__info">...</div>s
             <a class="verein-link" ...>Details</a>
           </li>
         </ul>

       Regeln:
       - Desktop: 3-Spalten-Grid (Datum / Info / Link)
       - Mobile: 2 Spalten + Link in neue Zeile

   (D) NEWS
       Erwartet (mit Thumbnail):
         <div class="verein-news-list">
           <article class="verein-news-item">
             <img class="verein-news-thumb" ...>
             <div class="verein-news-content">...</div>
           </article>
         </div>

       Wichtig:
       - Wenn du News ohne Thumbnail renderst, gibt es zwei Optionen:
         1) Du lässt img weg, aber fügst pro Item die Klasse
            "verein-news-item--no-thumb" hinzu (siehe CSS unten),
         2) oder du nutzt immer ein Placeholder Thumbnail.

   ===================================================================== */


/* =====================================================================
   1) DESIGN TOKENS / VARIABLEN
   - Vereinsfarbe: #75B837 (Apfelgrün)
   ===================================================================== */
:root{
  --verein-primary: #75B837;
  --verein-primary-ink: #0c2a06;
  --verein-text: #1b1b1b;
  --verein-muted: #666;

  --verein-bg: #ffffff;
  --verein-surface: #f6f7f8;

  --verein-event-bg: #E8F4D8;
  --verein-event-co: #2F4F1E;

  --verein-border: rgba(0,0,0,0.10);
  --verein-shadow: 0 10px 25px rgba(0,0,0,0.08);

  --verein-radius: 16px;
  --verein-radius-sm: 12px;

  --verein-container: 1100px;
  
  --verein-sticky-top: 40px;
}


/* =========================================================
   PATCH: Header überlappt Content (Astra/WP Shell)
   Ziel:
   - Standardseiten: Abstand unter Header
   - Hero-Bereich: optional bündig (ohne doppelte Luft)
   Hinweis:
   - Diese Regeln gehören in deine verein.css (am Ende), NICHT in Astra.
   ========================================================= */

/* =====================================================================
   2) BASE / TYPOGRAFIE / GRUNDLAYOUT
   ===================================================================== */
.verein-page{
  color: var(--verein-text);
}

.verein-container{
  max-width: var(--verein-container);
  margin: 0 auto;
  padding: 0 18px;
}

.site-content,
.verein-content-wrapper{
  padding-top: 180px;
}

@media (max-width: 768px){
  .site-content,
  .verein-content-wrapper{
    padding-top: 80px;
  }
}

.verein-section{
  padding: 42px 0;
}

.verein-section h1,
.verein-section h2,
.verein-section h3{
  line-height: 1.15;
  margin: 24px 0 12px;
  padding: 10px;
}

.verein-section h1 {
  margin: 0 0 24px;
  line-height: 1.15;
}

.verein-section h2 {
  margin: 32px 0 12px;
  line-height: 1.15;
}

.verein-section h3 {
  margin: 24px 0 10px;
  line-height: 1.15;
}

.verein-section p{
  margin: 0 0 12px;
  color: var(--verein-text);
  padding: 10px;
}

.verein-note{
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--verein-muted);
}

/* =====================================================================
   3) LINKS UND BUTTONS
   - Buttons nutzen !important um Theme-Linkfarben zu überschreiben.
   ===================================================================== */
.verein-link{
  color: var(--verein-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.verein-link:hover{
  color: var(--verein-primary);
}

.wpcf7-form-control,
.verein-button{
  display: flex;
  background: var(--verein-primary);
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.08);
}
.wpcf7-form-control,
.verein-button:hover{
  filter: brightness(0.95);
}


/* =====================================================================
   4) HERO (STARTSEITE) – Option C AKTIV (Glasdesign)
   ---------------------------------------------------------------------
   PROBLEM:
   - Bilder sind mal hell, mal dunkel -> Text kann unlesbar werden.

   DEINE ENTSCHEIDUNG:
   - Hero-Schrift soll immer WEISS sein.
   - Option C (Glasdesign/Content-Box) soll aktiv sein (PC + Mobile).
   - Option A/B als Kommentar (bei Bedarf zusätzlich aktivierbar).

   Option C (AKTIV):
   - Wir legen eine halbtransparente Content-Box über das Bild.
   - Vorteil: maximale Lesbarkeit unabhängig vom Bild.
   - Nachteil: weniger "pures" Bild, aber dafür robust.

   Option A (Kommentar):
   - starker Gradient Overlay (bildfreundlich)
   Option B (Kommentar):
   - Text-Shadow (stabilisiert bei unruhigen Bildern)
   ===================================================================== */
.verein-section--hero{
  padding-top: 28px;
  padding-bottom: 28px;
  margin-top: 0px
}

@media (max-width: 768px){
  .verein-section--hero{
    padding-top: 28px;
    padding-bottom: 28px;
    margin-top: 0px
  }
}

/* Bühne */
.verein-hero{
  display: grid;
  align-items: end;
  overflow: hidden;
  border-radius: var(--verein-radius);
  min-height: 420px;
  box-shadow: var(--verein-shadow);
}

/* Bild vollflächig */
.verein-hero > img{
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

/* Option A (Kommentar): Gradient Overlay – nur nutzen, wenn du zusätzlich
   eine sehr starke Bildabdunklung möchtest. Dann AUSKOMMENTIEREN:
-----------------------------------------------------------------------
.verein-hero::before{
  content: "";
  grid-area: 1 / 1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0.0)
  );
}
--------------------------------------------------------------------- */

/* Content über Bild – immer weiß */
.verein-hero__content{
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;

  /* Option C (AKTIV): Glasbox */
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(3px);

  border-radius: 12px;
  padding: 22px 22px 20px;
  margin: 18px;

  max-width: 760px;
  color: #fff;
}

/* Hero Typografie: immer weiß */
.verein-hero__content h1,
.verein-hero__content p,
.verein-hero__content a{
  color: #fff;
}

/* Option B (Kommentar): Text-Shadow – falls du zusätzlich Kanten willst
-----------------------------------------------------------------------
.verein-hero__content h1,
.verein-hero__content p{
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.verein-hero__content h1{
  text-shadow: 0 3px 12px rgba(0,0,0,0.65);
}
--------------------------------------------------------------------- */

.verein-hero__content h1{
  margin-bottom: 10px;
}

.verein-hero__content p{
  opacity: 0.92;
}

.verein-hero__content .verein-link{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.verein-hero__content .verein-button,
.verein-hero__content .verein-link{
  display: flex;
  margin-right: 12px;
  margin-top: 1em;
}

/* =====================================================================
   5) INTERN UI (Account-Chip + Info-Bar)
   ---------------------------------------------------------------------
   Ziel:
   - Auf jeder Seite schnell sichtbar, ob man eingeloggt ist und als wer.
   - Account-Chip passt in den Header rechts (Astra Free: Textlink).
   - Info-Bar steht oben im internen Content (Support-freundlich).
   ===================================================================== */

/* ----------------------------
   5.1 Account-Chip (Header)
----------------------------- */
.verein-account-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);

  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  color: var(--verein-text);
  line-height: 1;
}

.verein-account-chip:hover{
  background: rgba(0,0,0,0.08);
  color: var(--verein-text);
}

.verein-account-chip__user{ font-weight: 700; }
.verein-account-chip__role{
  opacity: 0.75;
  font-weight: 500;
}

/* Eingeloggt: grünlich hervorheben */
.verein-account-chip[data-login="true"]{
  background: rgba(117,184,55,0.15);
  border-color: rgba(117,184,55,0.35);
  color: #1f3a0e;
}

@media (max-width: 768px){
  .verein-account-chip{
    font-size: 0.8rem;
    padding: 5px 9px;
  }
}

/* ----------------------------
   5.2 Intern-Info-Bar (Content)
----------------------------- */
.verein-intern-infobar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;

  margin-bottom: 18px;
  padding: 12px 14px;

  border-radius: 12px;

  background: rgba(117,184,55,0.12);
  border: 1px solid rgba(117,184,55,0.35);

  font-size: 0.9rem;
}

.verein-intern-infobar strong{ font-weight: 700; }
.verein-intern-infobar__who{ font-weight: 700; }

.verein-intern-infobar__role,
.verein-intern-infobar__scope,
.verein-intern-infobar__season{
  opacity: 0.8;
}

.verein-intern-infobar__sep{
  opacity: 0.4;
}

.verein-intern-infobar__actions{
  margin-left: auto;
  display: flex;
  gap: 10px;
}

@media (max-width: 640px){
  .verein-intern-infobar{
    flex-direction: column;
    align-items: flex-start;
  }
  .verein-intern-infobar__actions{
    margin-left: 0;
    margin-top: 6px;
  }
}

/* ----------------------------
   5.3 Optional: kleine Badges auf internen Kacheln
----------------------------- */
.verein-page .verein-card[data-allow]{
  position: relative;
}

.verein-page .verein-card[data-allow]::after{
  content: "Intern";
  position: absolute;
  top: 10px;
  right: 10px;

  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  padding: 3px 6px;
  border-radius: 6px;

  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.55);
}


/* =====================================================================
   6) GRIDS UND CARDS (Gruppen)
   ===================================================================== */
.verein-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

@media (max-width: 980px){
  .verein-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .verein-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.verein-card{
  background: var(--verein-bg);
  border: 1px solid var(--verein-border);
  border-radius: var(--verein-radius);
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
  overflow: hidden; /* wichtig, damit Bildradius sauber wirkt */
}

.verein-card__body{
  padding: 14px 14px 16px;
}

.verein-card__body h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.verein-card__body p{
  margin: 0 0 10px;
  color: var(--verein-muted);
}

/* Card-Previewbilder stabilisieren */
.verein-card img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* =====================================================================
   7) TERMINE (KACHELN/LISTE)
   ===================================================================== */
.verein-events{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
}

/* Desktop: 3-Spalten-Grid */
.verein-event{
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--verein-bg);
  border: 1px solid var(--verein-border);
  border-radius: var(--verein-radius);
}


/* Datumskachel */
.verein-event-detail--flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.verein-event-detail__timebox,
.verein-event-detail__datebox,
.verein-event__date{
  width: 80px;
  text-align: center;
  border-radius: 15px;
  background: var(--verein-event-bg);
  color: var(--verein-event-co);
  border: 1px solid var(--verein-border);
  padding: 10px 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.verein-event__day{
  display: block;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
}

.verein-event__time{
  display: block;
  font-weight: 800;
  font-size: 1.0rem;
  line-height: 1.1;
}

.verein-event__scale,
.verein-event__month{
  display: block;
  font-size: 0.9rem;
  color: var(--verein-muted);
}

/* Titel/Meta */
.verein-event__title{
  font-weight: 700;
  margin-bottom: 4px;
}

.verein-event__meta{
  color: var(--verein-muted);
  font-size: 0.95rem;
}

/* CTA rechts */
.verein-event .verein-link{
  white-space: nowrap;
}

.verein-event__meta--audience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: .4rem;
}

.verein-event__audience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
}

.verein-event__audience-text {
  font-size: .9rem;
  line-height: 1.25;
  color: inherit;
  opacity: .92;
}

.verein-audience-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .70rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .82rem;
  line-height: 1;
  border: 2px solid transparent;
  white-space: nowrap;
}

.verein-audience--all {
  background: #E8F5E9;
  color: #2E7D32;
  border-color: #2E7D32;
}

.verein-audience--bergwichtel {
  background: #FFF1E6;
  color: #C96A28;
  border-color: #F4A261;
}

.verein-audience--kindergarde {
  background: #FFF8DB;
  color: #9A7A00;
  border-color: #E9C46A;
}

.verein-audience--juniorengarde {
  background: #E6F7F4;
  color: #1E6F66;
  border-color: #2A9D8F;
}

.verein-audience--moritzberggarde {
  background: #EAF2FF;
  color: #2458B8;
  border-color: #4D96FF;
}

.verein-audience--berghexen {
  background: #FCEAF1;
  color: #A63D66;
  border-color: #C94F7C;
}

.verein-audience--zipfelstuermer {
  background: #FFF0E6;
  color: #9C541F;
  border-color: #C66A2B;
}

.verein-audience--multi {
  background: #F3F4F6;
  color: #374151;
  border-color: #9CA3AF;
}

/* =====================================================================
   8) NEWS (optional Thumbnail links)
   ===================================================================== */
.verein-news-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 14px;
}

@media (max-width: 768px) {
  .verein-news-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* News Card Grundform */
.verein-news-item{
  background: var(--verein-bg);
  border: 1px solid var(--verein-border);
  border-radius: 18px;
  padding: 20px 22px;
}

/* Layout mit Thumbnail: Bild links, Text rechts */
.verein-news-item{
  grid-template-columns: 140px 1fr;
  align-items: start;
}

/* Wenn du mal ein Item ohne Thumbnail hast:
   -> gib dem <article> zusätzlich die Klasse "verein-news-item--no-thumb"
   -> dann wird es wieder einspaltig.
*/
.verein-news-item--no-thumb{
  grid-template-columns: 1fr;
}

/* Thumbnail (optional) */
.verein-news-thumb{
  width: 100%;
  height: 100%;      /* etwas höher, wirkt ruhiger bei breiterem Bild */
  object-fit: contain;
  border-radius: 12px;
  display: block;
  object-position: 50% 0%;
}

.verein-news-content h3{
  margin-top: 0;
}

.verein-news-item h2,
.verein-news-item h3{
  margin: 0 0 10px;
}

.verein-meta{
  color: var(--verein-muted);
  font-size: 0.95rem;
}

/* Hover nur auf Desktop */
@media (hover: hover){
  .verein-news-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.08);
    transition: all 0.18s ease;
  }
}


/* =====================================================================
   8) FOOTER / NEWSLETTER (optional)
   ===================================================================== */
.verein-newsletter{
  max-width: 360px;
}
.verein-newsletter h3{
  margin: 0 0 5px;
}
.verein-newsletter p{
  margin: 0 0 5px;
  color: var(--verein-muted);
}
.verein-newsletter__hint{
  font-size: 0.8rem;
  color: var(--verein-muted);
  opacity: 0.85;
}

/* Optional: Footer Padding (wenn du den Footer "luftiger" willst) */
.site-footer{
  padding-top: 50px;
  padding-bottom: 35px;
}


/* =====================================================================
   9) RESPONSIVE BREAKPOINTS
   - 980px: Gruppen-Grid -> 1 Spalten
   - 768px: Mobile Layout (Hero niedriger, Termine umbrechen, News Bild oben)
   ===================================================================== */

@media (max-width: 768px){

  .verein-section{
    padding: 34px 0;
  }

  /* HERO: etwas niedriger + kleinere Box */
  .verein-hero{
    min-height: 320px;
    border-radius: var(--verein-radius-sm);
  }
  .verein-hero > img{
    object-position: center 10%;
  }
  .verein-hero__content{
    margin: 14px;
    padding: 16px;
    max-width: 100%;
    border-radius: 10px;
  }

  /* Gruppen */
  .verein-card{
    border-radius: var(--verein-radius-sm);
  }
  .verein-card img{
    height: 140px;
  }

  /* Termine Mobile: 2 Spalten + Link unterhalb */
  .verein-event{
    grid-template-columns: 76px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .verein-event .verein-link{
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 8px;
  }

  /* News Mobile: Bild oben */
  .verein-news-list{
    gap: 16px;
  }
  .verein-news-item{
    grid-template-columns: 1fr;
    padding: 16px;
    border-radius: 14px;
  }
  .verein-news-thumb{
    height: 100%;
  }

  /* Footer */
  .site-footer{
    padding-top: 35px;
    padding-bottom: 25px;
  }

}

/* =========================================================
   Astra Transparent Header: Content nach unten schieben
   (feste Werte, stabil, betrifft nur Seiten mit Transparent Header)
   ========================================================= */

body.ast-theme-transparent-header #content,
body.ast-theme-transparent-header .site-content {
  padding-top: 200px; /* Desktop: anpassen an deine Headerhöhe */
}

@media (max-width: 768px) {
  body.ast-theme-transparent-header #content,
  body.ast-theme-transparent-header .site-content {
    padding-top: 130px; /* Mobile: anpassen */
  }
}

/* Bonus: Anker-Links (#termine etc.) nicht unter Header verstecken */
body.ast-theme-transparent-header [id] {
  scroll-margin-top: 210px;
}
@media (max-width: 768px) {
  body.ast-theme-transparent-header [id] {
    scroll-margin-top: 140px;
  }
}

/* =========================================================
   Menüpunkt "Login" als Button
   ========================================================= */
@media (min-width: 769px) {

  .main-header-menu .menu-intern {
    display: flex;
    align-items: center;
  }

  .main-header-menu .menu-intern > a {
    display: inline-flex !important;
    align-items: center;
    height: auto !important;
    padding: 6px 14px;
    line-height: 1;

    border: 2px solid #75B837;
    color: #75B837 !important;
    background: transparent;

    border-radius: 999px;
    font-weight: 700;
    margin-left: 12px;

    transition: all 120ms ease;
    white-space: nowrap;
  }

  .main-header-menu .menu-intern > a:hover {
    background: #75B837;
    color: #fff !important;
  }
}

.main-header-menu .menu-intern > a::before {
  content: "🔒";
  margin-right: 6px;
  font-size: 14px;
  line-height: 1;
}

/* Featured größer */
.verein-events--featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 26px;
}

@media (min-width: 900px) {
  .verein-events--featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   TERMINSEITE – Aktuell / Nächste / Archiv (nur visuell)
   ========================================================= */

/* Überschriften-Abstände */
.verein-section h2 {
  margin-top: 28px;
  margin-bottom: 14px;
}

/* ---------- AKTUELLE TERMINE (Highlight) ---------- */
.verein-events--current {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

@media (min-width: 900px) {
  .verein-events--current {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* aktuelle Karte hervorheben */
.verein-event--current {
  border: 2px solid #75B837;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  background: #fff;
}

/* Badge „Heute“ optional */
.verein-event--current .verein-event__title::after {
  content: " Aktuell";
  font-size: 12px;
  font-weight: 800;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #75B837;
  color: #fff;
}

/* ---------- NÄCHSTE TERMINE ---------- */
.verein-events--nextlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 26px;
}

@media (min-width: 900px) {
  .verein-events--nextlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* optional leichter Rahmen für Zukunft */
.verein-event--next {
  border: 1px solid rgba(0,0,0,0.08);
}

/* ---------- ARCHIV ---------- */
.verein-events--archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 900px) {
  .verein-events--archive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Archiv visuell zurücknehmen */
.verein-event--past {
  opacity: 0.55;
  filter: grayscale(0.25);
  border: 1px dashed rgba(0,0,0,0.15);
  background: #fafafa;
}

/* Archiv-Label */
.verein-event--past .verein-event__title::after {
  content: " Archiv";
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  color: rgba(0,0,0,0.6);
}

/* ---------- Datum visuell stärken ---------- */
.verein-event__date {
  background: var(--verein-event-bg);
  color: var(--verein-event-co);
  border-radius: 15px;
  padding: 10px 10px;
  min-width: 60px;
  text-align: center;
  font-weight: 700;
}

/* Für aktuelle Termine Datum grün */
.verein-event--current .verein-event__date {
  background: #75B837;
}


/* =========================================================
   NEWS – Layout Patch v2 (PC verbessert, Mobile bleibt wie gewünscht)
   Ziele:
   - Datum immer ÜBER dem Artikel (volle Breite)
   - Thumbnail am PC breiter
   - Mehr Abstand zwischen Thumbnail und Headline/Text
   Voraussetzung (empfohlen):
   - Datum-Zeile als eigenes Element vor dem Body:
     <article ...>
       <div class="verein-news-date-line">..</div>
       <div class="verein-news-item__body"> ... </div>
     </article>
   ========================================================= */

/* Card-Grundlayout: vertikaler Stack (Datum oben, Body darunter) */
.verein-news-item{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column; /* wichtig: Datum kann nicht neben dem Bild landen */
  gap: 10px;
}

/* Datum immer volle Breite oben */
.verein-news-date-line{
  font-size: 13px;
  font-weight: 700;
  color: #2f4f1e;
  margin: 0;            /* keine seitlichen Verschiebungen */
}

/* Aktuelle News – Datum grün */
.verein-news-item--current .verein-news-date-line{
  color: #75B837;
}

/* Body: Bild links, Text rechts */
.verein-news-item__body{
  display: grid;
  grid-template-columns: 1fr;  /* mobile default */
  gap: 18px;                  /* mehr Luft zwischen Bild und Text */
  align-items: start;
}

/* Desktop: Thumbnail breiter */
@media (min-width: 769px){
  .verein-news-item__body{
    grid-template-columns: 240px 1fr; /* breiter als vorher */
    gap: 22px;                        /* mehr Abstand Bild↔Text */
  }
}

/* Thumbnail */
.verein-news-thumb{
  width: 100%;
  height: 100%;      /* etwas höher, wirkt ruhiger bei breiterem Bild */
  object-fit: contain;
  border-radius: 12px;
  display: block;
  object-position: 50% 0%;
}

/* Mobile: untereinander + höheres Bild */
@media (max-width: 640px){
  .verein-news-item__body{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .verein-news-thumb{
    height: 100%;
  }
}

/* Textbereich: etwas mehr Luft nach oben (damit Headline nicht „klebt“) */
.verein-news-content{
  padding-top: 2px;
}

.verein-news-content h3{
  margin: 0 0 8px 0;   /* mehr Abstand nach unten */
  font-size: 18px;
  line-height: 1.25;
}

.verein-news-content p{
  margin: 0 0 12px 0;  /* mehr Luft vor Link */
  color: rgba(0,0,0,0.75);
}

/* Vorschau Badge */
.verein-badge{
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

.verein-badge--current{
  background: #75B837;
  color: #fff;
  border: 1px solid rgba(117,184,55,0.55);
}

.verein-badge--preview{
  background: #E8F4DB;
  color: #2f4f1e;
  border: 1px solid rgba(117,184,55,0.35);
}

.verein-badge--archive{
  background: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.75);
  border: 1px solid rgba(0,0,0,0.12);
}

/* Archiv ruhiger */
.verein-news-item--archive{
  opacity: 0.62;
  filter: grayscale(0.15);
  background: #fafafa;
  box-shadow: none;
}

/* Aktuell stärker hervorheben */
.verein-news-item--current{
  border: 2px solid #75B837;
}


/* =========================================================
   Verein-Sponsoren: Kacheln (Tiles)
   ========================================================= */
.verein-sponsor__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 400px;
  padding: 40px;
}

.verein-sponsor__logo {
  display: block;
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 980px) {
  .verein-sponsor__logo {
    max-height: 300px;
  }
}

.verein-sponsor__name {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.sponsor-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.verein-sponsor__text {
  line-height: 1.2;
  margin: 0 0 12px;
}

.verein-sponsor__link {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  margin: 0 0 12px;
}

@media (max-width: 980px) {
  .sponsor-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .sponsor-tiles {
    grid-template-columns: 1fr;
  }
}

/* Card-Link */
a.verein-sponsor__card {
  display: block;
  text-decoration: none;
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

a.verein-sponsor__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* =========================================================
   Verein-Übersicht: Kacheln (Tiles)
   ========================================================= */
.verein-cards {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

/* Card-Link */
a.verein-card {
  display: block;
  text-decoration: none;
  border-radius: 16px;
  padding: 18px;
  padding-inline: 20px; /* links + rechts */
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

a.verein-button {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.verein-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px) {
  .verein-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .verein-tiles {
    grid-template-columns: 1fr;
  }
}

/* Card-Link */
a.verein-tile {
  display: block;
  text-decoration: none;
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

a.verein-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* Inhalte */
.verein-tile__title {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 8px 0;
  color: #111;
}

.verein-tile__text {
  color: rgba(0,0,0,0.75);
  line-height: 1.5;
  margin: 0 0 14px 0;
}

.verein-tile__cta {
  font-weight: 800;
  color: #75B837; /* Vereinsgrün */
}

/* Sticky für DEIN Archiv-Markup */
.verein-archive-sticky {
  position: sticky;
  top: var(--verein-sticky-top, 0px);
  z-index: 50;
}

/* optional hübscher Hintergrund */
.verein-archive-sticky__top,
.verein-archive-sticky__sub {
  background: rgba(232,232,232,.5);
  color:#fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 10px 14px;
  
}

/* wichtig: Hash-Sprung nicht unter Sticky verschwinden lassen */
.verein-news-item{
  scroll-margin-top: calc(var(--verein-sticky-top, 0px) + 16px);
}

/* falls Astra irgendwo overflow setzt (häufiger Sticky-Killer) */
.verein-section--news-archive,
.verein-section--news-archive .verein-container{
  overflow: visible;
}

.verein-range-tiles__dash,
.verein-archive-sticky__title,
.verein-archive-sticky__page {
  font-weight: 600;
  padding: 10px;
  color: var(--verein-primary);
}

/* Thumbnail */
.verein-roll-thumb{
  width: 100%;
  height: 260px;      /* etwas höher, wirkt ruhiger bei breiterem Bild */
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Mobile: untereinander + höheres Bild */
@media (max-width: 640px){
  .verein-roll-thumb{
    height: 220px;
  }
}