/* Frame layout sections and frame-ed blocks */

/* ============================================================
   VEREINSBLOCK — netzio-Stil (frame-ed-verein-block)
   Schwarzes Zwei-Spalten-Layout: Text links, Bild rechts
   Im TYPO3-Backend: Erscheinungsbild → Rahmen → "Vereinsblock – netzio"
   ============================================================ */

.frame-ed-verein-block {
  background: #000 !important;
  color: #fff;
  padding: 7rem 2rem !important;
}

/* Innen-Container zentriert + zweispaltig */
.frame-ed-verein-block .frame-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* Eyebrow-Label (Unterüberschrift / Subheader im Inhaltselement) */
.frame-ed-verein-block .frame-header .element-subheader {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #D4F525;
  margin-bottom: 1rem;
}

/* Hauptüberschrift — groß, Bebas Neue */
.frame-ed-verein-block .frame-header .element-header {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif !important;
  font-size: clamp(3.5rem, 7vw, 6rem) !important;
  font-weight: 400 !important;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff !important;
  margin-bottom: 1.8rem;
}

/* Grüner Keyword-Akzent: <em> im Heading-Text */
.frame-ed-verein-block .frame-header .element-header em {
  font-style: normal;
  color: #D4F525;
}

/* Fließtext */
.frame-ed-verein-block .frame-bodytext p {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  max-width: 45ch;
  margin-bottom: 2.5rem;
}

/* CTA-Link im Bodytext als Button stylen */
.frame-ed-verein-block .frame-bodytext a {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  background: #D4F525;
  padding: 0.9em 3em;
  margin-right: 1rem;
  margin-top: 0.5rem;
  transition: background 0.2s, transform 0.15s;
}

.frame-ed-verein-block .frame-bodytext a:hover {
  background: #c8eb10;
  transform: translateY(-2px);
}


/* ============================================================
   COUNTER-STRIPE — netzio-Stil (frame-ed-counter-stripe)
   4 Kennzahlen nebeneinander auf dunklem Hintergrund
   Im TYPO3-Backend: Erscheinungsbild → Rahmen → "Counter-Stripe – netzio"
   ============================================================
   Struktur im Inhaltselement (Text):
     Überschrift H2  → Zahl (z. B. "9")
     Unterüberschrift → Label (z. B. "Abteilungen")
   Vier solcher CE nebeneinander in einem Grid-Frame oder
   direkt als HTML-CE mit den Klassen unten.
   ============================================================ */

.frame-ed-counter-stripe {
  background: #191919 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4.5rem 2rem !important;
  color: #fff;
}

.frame-ed-counter-stripe .frame-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

/* Zahl (H2 im Inhaltselement) */
.frame-ed-counter-stripe .frame-header .element-header {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif !important;
  font-size: clamp(3rem, 6vw, 4.5rem) !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* Label (Unterüberschrift) */
.frame-ed-counter-stripe .frame-header .element-subheader {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  margin: 0;
}

/* ============================================================
   SUBHEADER POSITION — .subheader-above
   Opt-in via Backend: Inhalt-Reiter → Unterüberschrift-Klasse
   → "Subheader über Überschrift (Eyebrow)"
   Der Wert wird als CSS-Klasse auf <h3 class="element-subheader subheader-above">
   gerendert. :has() schaltet Flex auf dem .frame-header ein.
   ============================================================ */

.frame-header:has(.subheader-above) {
  display: flex;
  flex-direction: column;
}

.element-subheader.subheader-above,
.frame-subheader.subheader-above {
  order: -1;
}

/* ============================================================
   VEREIN-INTRO — netzio-Stil (#c81)
   Dunkle Sektion mit Eyebrow + großer Bebas-Neue-Überschrift
   + weißem Fließtext + CTA-Button.
   Eyebrow-Position: über Überschrift via subheader_class = "subheader-above"
   ============================================================ */

#c81 {
  background: #191919;
  padding: 5rem 0;
  color: rgba(255, 255, 255, 0.72);
}

#c81 .frame-subheader,
#c81 .element-subheader {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.8125rem;   /* 13 px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ed-red);
  margin-bottom: 0.6rem;
  margin-top: 0;
}

#c81 .frame-title,
#c81 .element-header {
  color: #ffffff;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1.06;
  margin-bottom: 1.5rem;
}

/* Fließtext: Paragraphen direkt in .textpic-item.textpic-text (kein .bodytext-Wrapper) */
#c81 .textpic-item.textpic-text > p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 700px;
  margin-bottom: 1rem;
}

/* CTA-Button – <a href="/probetraining" class="ed-cta-btn"> im letzten <p> */
#c81 a.ed-cta-btn {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--ed-red);
  color: #ffffff !important;
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  border-radius: 0;
  padding: 0.85em 3.2em;
  transition: background var(--ed-transition);
}

#c81 a.ed-cta-btn:hover,
#c81 a.ed-cta-btn:focus {
  background: var(--ed-red-dark);
  color: #ffffff !important;
}

/* ============================================================
   SPORTARTEN-GRID — .frame-ed-sport-grid
   <ul class="list-normal"> → responsive Card-Grid
   3 Spalten Desktop · 2 Tablet/Mobile
   ============================================================ */

.frame-ed-sport-grid {
  padding: 4rem 0;
}

.frame-ed-sport-grid .list-normal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 2rem;
}

@media (max-width: 991px) {
  .frame-ed-sport-grid .list-normal {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .frame-ed-sport-grid .list-normal {
    gap: 0.625rem;
  }
}

.frame-ed-sport-grid .list-normal li {
  margin: 0;
  padding: 0;
}

/* Bootstrap Package setzt manchmal ::before-Bullets */
.frame-ed-sport-grid .list-normal li::before {
  display: none;
}

.frame-ed-sport-grid .list-normal li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  background: #ffffff;
  color: var(--ed-dark);
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow);
  transition: background var(--ed-transition), color var(--ed-transition),
              box-shadow var(--ed-transition), transform var(--ed-transition);
}

.frame-ed-sport-grid .list-normal li a::after {
  content: '→';
  font-size: 0.95rem;
  opacity: 0.35;
  transition: opacity var(--ed-transition), transform var(--ed-transition);
}

.frame-ed-sport-grid .list-normal li a:hover {
  background: var(--ed-red);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 44, 44, 0.22);
}

.frame-ed-sport-grid .list-normal li a:hover::after {
  opacity: 1;
  transform: translateX(4px);
}

/* ============================================================
   CTA-BANNER — .frame-ed-cta-banner
   Roter Hintergrund · Text links / Buttons rechts (Grid)
   Buttons netzio-rechteckig, Bebas Neue, kein Radius
   ============================================================ */

.frame-ed-cta-banner {
  background: var(--ed-red) !important;
  padding: 3.5rem 0;
}

/* Zweispaltiges Grid: Überschrift+Text links, Buttons rechts */
.frame-ed-cta-banner .frame-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 3.5rem;
}

.frame-ed-cta-banner .frame-header {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.frame-ed-cta-banner .frame-inner > p:first-of-type {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
}

/* Button-Absatz: rechte Spalte, vertikal über beide Zeilen zentriert */
.frame-ed-cta-banner .frame-inner > p:last-of-type {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 0;
}

.frame-ed-cta-banner .element-header {
  color: #ffffff;
}

/* Buttons netzio-Stil */
.frame-ed-cta-banner .btn {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  border-radius: 0 !important;
  padding: 0.75em 2.5em;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  transition: background var(--ed-transition), color var(--ed-transition),
              border-color var(--ed-transition);
}

.frame-ed-cta-banner .btn-light {
  background: #ffffff;
  color: var(--ed-red);
  border-color: #ffffff;
}

.frame-ed-cta-banner .btn-light:hover,
.frame-ed-cta-banner .btn-light:focus {
  background: var(--ed-dark);
  color: #ffffff;
  border-color: var(--ed-dark);
}

.frame-ed-cta-banner .btn-outline-light {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.frame-ed-cta-banner .btn-outline-light:hover,
.frame-ed-cta-banner .btn-outline-light:focus {
  background: #ffffff;
  color: var(--ed-red);
  border-color: #ffffff;
}

/* Mobile: einspaltiges Layout */
@media (max-width: 767px) {
  .frame-ed-cta-banner .frame-inner {
    grid-template-columns: 1fr;
  }

  .frame-ed-cta-banner .frame-inner > p:last-of-type {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.625rem;
  }
}

/* Trennlinie zwischen den Zellen */
.frame-ed-counter-stripe .frame-inner > * + * {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .frame-ed-verein-block .frame-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .frame-ed-counter-stripe .frame-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .frame-ed-counter-stripe .frame-inner > * + * {
    border-left: none;
  }

  .frame-ed-counter-stripe .frame-inner > *:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .frame-ed-counter-stripe .frame-inner > *:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
  }
}

@media (max-width: 480px) {
  .frame-ed-verein-block {
    padding: 4rem 1.25rem !important;
  }

  .frame-ed-counter-stripe {
    padding: 3rem 1.25rem !important;
  }
}

/* ============================================================
   ENGAGEMENT-SEKTION — .frame-ed-engagement
   Hintergrund: var(--ed-bg), zweispaltige Aufteilung
   ============================================================ */
.frame-ed-engagement {
  padding: 5rem 0;
}

.frame-ed-engagement .frame-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0.25rem 4.5rem;
  align-items: center;
}

.frame-ed-engagement .frame-header {
  grid-column: 1;
  grid-row: 1 / 3;
  padding-left: 1.5rem;
  border-left: 3px solid var(--ed-red);
  align-self: center;
  margin-bottom: 0;
}

.frame-ed-engagement .element-header {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  color: var(--ed-dark);
  line-height: 1.1;
  margin-bottom: 0;
}

.frame-ed-engagement .frame-inner > p {
  grid-column: 2;
  color: var(--ed-dark);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 0.875rem;
}

.frame-ed-engagement .frame-inner > p a {
  color: var(--ed-red);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: gap var(--ed-transition), color var(--ed-transition);
}

.frame-ed-engagement .frame-inner > p a:hover {
  color: var(--ed-red-dark);
  gap: 0.55em;
}

/* Mobile */
@media (max-width: 767px) {
  .frame-ed-engagement .frame-inner {
    grid-template-columns: 1fr;
  }

  .frame-ed-engagement .frame-header {
    grid-row: auto;
    margin-bottom: 1.25rem;
  }

  .frame-ed-engagement .frame-inner > p {
    grid-column: 1;
  }
}