/*
 Theme Name: Tennisverein TC am langen Steg
 Template: hello-elementor 
 Description: Child Theme für Hello Elementor
 Author: Valentin Paul
 Version: 1.0.0
 Author URI: https://calma.design
*/

@font-face {
  font-family: 'SportsNight';
  src: url('fonts/SF_Sports_Night.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SportsNightNS';
  src: url('fonts/SF_Sports_Night_NS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Expansiva';
  src: url('fonts/Expansiva_bold.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body{
    background-color: #fafafa !important;
}

.site-main{
    padding: 0rem 1rem !important;
}

@media (max-width: 1024px) and (min-width: 768px){
    .site-main{
        padding: 0rem 0.5rem !important;
    }
    h2{
      font-size: 2.25rem;
    }
}

@media (max-width: 767px){
    .site-main{
        padding: 0rem !important;
    }
       h2{
      font-size: 1.75rem !important;
    }
}


h1{
  font-family: 'SportsNight', sans-serif !important;
  margin-bottom: -10px !important;
  font-weight: 800 !important;
}

h2, h3, .price-tag{
  font-family: 'SportsNightNS', sans-serif !important;
  font-weight: 400 !important;
}

h4{
    font-family: "SportsNightNS", sans-serif !important;
    margin-bottom: -5px !important;
}

.elementor-widget-counter, .elementor-counter-number-wrapper{
  font-family: 'SportsNight', sans-serif !important;
  font-weight: 400;
}

.elementor-widget-heading{
    padding: 0.5rem 1rem !important
}

.nav-item .ekit-menu-nav-link{
    font-family: "SportsNightNS", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1em !important;
}


@media (max-width: 1024px) {
    body{
         overflow-wrap: break-word;
    }
    .nav-item ,.elementskit-mobile-builder-content{
        display: flex;
        justify-content: center;
    }
    .elementskit-navbar-nav .ekit-menu-nav-link{
            font-size: 1.5rem !important;
        }
    #nav-heading a{
  font-size: 1.5rem !important;    
}
  .heading-box{
    align-items: center;
  
  }
}


/* Grid-Wrapper */
.events-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

/* Card */
.event-card {
  /* background: var(--e-global-color-7e84aab); */
  background: var(--e-global-color-primary);
  color: #f5f5f5;
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 5vw, 3rem);
}

.event-card--perma {
  background: var(--e-global-color-7e84aab) !important;
  .event-card__title {
    color: var(--e-global-color-primary) !important;
  }
  .event-card__desc {
    color: var(--e-global-color-primary) !important;
  }
  .chip {
    color: var(--e-global-color-primary);
  }
}
/* Head */
.event-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.event-card__title {
  font-size: 1.1rem;
  letter-spacing: .06em;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  color: #f5f5f5 !important;
}
.event-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; 
  height: 3rem;
  min-width: 3rem;
  border-radius: 999px;
  background: var(--e-global-color-accent);
  color: #f5f5f5;
  text-decoration: none;
}

/* Description */
.event-card__desc {
  margin: 8px 0 12px;
  color: #f5f5f5;
  line-height: 1.5;
}

/* Media (Bild) */
.event-card__media {
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 12px;
}
.event-card__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Chips */
.event-card__chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto; /* chips nach unten drücken */
}
.event-card__chips .chip:nth-child(3) {
  grid-column: 1 / -1; /* location über volle Breite */
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: .95rem;
  color: #f5f5f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  border: 3px solid var(--e-global-color-accent);
}
.chip svg { flex: 0 0 auto; }

/* Responsive Tuning */
@media (min-width: 640px) {
  .event-card__title { font-size: 1.2rem; }
}

@media (max-width: 1024px){
  .events-cards{ grid-template-columns: 1fr; }
}

.empty-events-div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}









/* Grid mit Karten */
.teams-cards {
  display: grid;
  grid-template-columns: 1fr; /* eine Karte pro Zeile – wie im Screenshot */
  gap: 2rem;
}


/* Karte: 40% / 60% – immer eine Zeile */
.team-card{
  display:grid;
  grid-template-columns: 39% 59%;
  grid-template-areas: "left right";
  gap: 2%;
  align-items: stretch;           /* gleich hoch */
}

/* Zuordnungen */
.team-card__left{  grid-area:left;  }
.team-card__right{ grid-area:right; }

/* Jede gerade Karte spiegeln: 60% links / 40% rechts */
.team-card:nth-child(even){
  grid-template-columns: 59% 39%;
  grid-template-areas: "right left";
}

/* Linke Spalte (40%) – Hintergrundbild */
.team-card__left {
  position: relative;
  min-height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0f0f center/cover no-repeat; /* Fallback + default cover */
}

/* Overlay-Texte auf dem Bild */
.team-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
  color: var(--e-global-color-7e84aab) !important;
  justify-content: center;
  background: #0f0f0fbc !important;
}
.team-card__overline {
  margin-bottom: 0.5rem;
}
.team-card__title {
  margin: 0;
  font-size: 2.5rem !important;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--e-global-color-7e84aab) !important;
}
.team-card__subtitle { margin-top: 6px; opacity: .95; }

/* Badge oben rechts */
.team-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: #c8ff2e;
  color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* Rechte Spalte (60%) – Panel */
.team-card__right {
  background: #171717;
  color: var(--e-global-color-7e84aab) !important;
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

/* H4-Überschriften im Panel */
.team-panel__heading {
  margin: 0 0 4px;
  font-weight: 400 !important;
  font-size: 1.25rem !important; /* h4-Größe anpassen */
   color: var(--e-global-color-7e84aab) !important;
}
.team-panel__text {
  color: #d6d6d6;
}

.team-panel__block{
    gap: 4px !important;
    display: flex;
    flex-direction: column;
}

/* Responsive: unter 900px untereinander */
@media (max-width: 900px) {
  .team-card { grid-template-columns: 1fr; }
  .team-card__left { min-height: 200px; }
  .team-card__left,
  .team-card__right {
    grid-column: auto !important;
  }
}


.price-tag .elementor-heading-title{
    font-family: "SportsNightNS", sans-serif !important;
    font-weight: 400 !important;
}

/* ====== TABLET (Elementor-Standard: 768–1024px) ====== */
@media (max-width: 1024px) and (min-width: 768px){
  .team-card{
    grid-template-columns: 45% 55%;
    grid-template-areas: "left right" !important;
  }
  .team-card:nth-child(even){
    grid-template-columns: 55% 45%;
    grid-template-areas: "right left" !important;
  }
}

/* ====== MOBILE (<= 767px) — untereinander, immer Left zuerst ====== */
@media (max-width: 767px){
  .team-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right";
  }
  .team-card:nth-child(even){
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"; /* Reihenfolge fest: Overlay zuerst, Panel danach */
  }
  .team-card__left{ min-height: 200px; } /* optional etwas kleiner mobil */
}

@media (max-width: 767px){
#mannschaften{
        padding: 0rem 0.85rem;
}
       .headliine-hero{
    position: relative !important;
}
}




/* Grid: Desktop 3, Tablet 2, Mobil 1 */
.cards-grid{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* Tablet (Elementor-Standard 768–1024) */
@media (max-width:1024px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

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

/* Card */
.card{
  background: var(--e-global-color-7e84aab);
  border:1px solid #e9e9e9;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Media */
.card__media{ 
    display:inline-block; 
    overflow: hidden;
}
.card__img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  max-height: 18rem;
  overflow: hidden;
  transition: transform 0.4s ease; 
}

.card__img:hover{
  transform: scale(1.05);
}

/* Body */
.card__body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position: relative;
}

.icon-article{
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--e-global-color-accent);
    position: absolute;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 99rem;
}

.icon-article:hover{
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-accent);}

/* Meta (Datum) */
.card__meta{
  display:flex; align-items:center; gap:8px;
  color:#515151; font-size:.92rem;
}

/* Titel */
.card__title{
  margin:0;
  font-size:1.1rem;
  line-height:1.3;
  max-width: 80%;
}
.card__title a{
  color:#1f1f1f; text-decoration:none;
}
.card__title a:hover{ 
    text-decoration:underline; 
   color: #1f1f1fd4;
}

/* Auszug */
.card__excerpt{
  color:#313131; margin:0;
}

/* Button (optional) */
.card__button{
  margin-top:auto;
  align-self:flex-start;
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  background:#111; color:#fff; text-decoration:none;
}
.card__button:hover{ opacity:.92; }

/* Container */
.cards-pagination {
  margin-top: 32px;
  text-align: center;
  font-family: inherit;
}

/* Liste im Inline-Flex */
.cards-pagination ul {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Buttons allgemein */
.cards-pagination a,
.cards-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;                /* voll rund */
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  text-decoration: none;
}

/* Aktive Seite */
.cards-pagination .current {
  background: #111;
  border-color: #111;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* Hover */
.cards-pagination a:hover {
  background: #f6f6f6;
  border-color: #ccc;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Prev/Next extra hervorheben */
.cards-pagination .prev,
.cards-pagination .next {
  padding: 0 18px;
  font-weight: 600;
}

/* Mobile: Buttons kleiner machen */
@media (max-width: 600px) {
  .cards-pagination a,
  .cards-pagination span {
    min-width: 36px;
    height: 36px;
    font-size: 0.85rem;
    padding: 0 10px;
  }
}


.single-post{
    padding-top: 4rem;
}
.single-headline{
    font-size: 3rem !important;
    font-family: "SportsNight", sans-serif !important;
    font-weight: 800 !important;
    color: #fafafa !important;
}

.single-date .elementor-shortcode{
    color: white !important;
}


.post-slider-wrap { position: relative; }
.post-slider__img { width: 100%; height: auto; display: block; transition: transform .35s ease; }
@media (hover:hover) and (pointer:fine) {
  .swiper-slide a:hover .post-slider__img { transform: scale(1.02); }
}
/* Optional: Nav-Buttons etwas „sichtbarer“ machen */
.swiper-button-prev, .swiper-button-next { filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }


.post-slider-wrap { position: relative; }
.post-slider__img { width: 100%; height: auto; display: block; transition: transform .35s ease; }
@media (hover:hover) and (pointer:fine) {
  .swiper-slide a:hover .post-slider__img { transform: scale(1.02); }
}

.swiper-button-prev, .swiper-button-next { 
    width: 2.5rem !important;
    height: 2.5rem !important;
    background-color: var(--e-global-color-accent) !important;
    border-radius: 100%;
 }

.swiper-button-prev:after,.swiper-button-next:after{
    font-size: 1.5rem !important;
}
.swiper-button-prev:after{
    margin-left: -5px !important;
}
.swiper-button-next:after{
    margin-right: -5px !important;
}

.post-slider__img{
  border-radius: 15px !important;
}

.swiper-button-prev,.swiper-button-next{
    color: black !important;
}

.swiper-pagination-bullet-active{
    background-color: black !important;
}


.elementor-590 .elementor-element.elementor-element-103d2b6d{
    padding-bottom: 0rem !important;
}

.elementor-element-4885ea31{
    margin-bottom: -6rem !important;
}

.post-652{
    margin-top: 6rem !important;
    h1{
        font-size: 2.5rem !important;
    }
}




/* ====== ACCORDION (CPT) ====== */
/* Container unter der Headline zentrieren (breite anpassen) */
.elementor-shortcode .v-acc.v-acc--cols{
  --acc-accent: #bde00e;   /* Lime */
  --acc-dark:   #1f1f1f;   /* Schwarz */
  --acc-pill:   #ececec;   /* Grau (zu) */
  --acc-text:   #1f1f1f;

  max-width: 1100px;       /* optional: unter der Headline einrasten */
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2 Spalten */
  gap: 28px;                       /* Abstand zwischen Spalten */
  align-items: start;
}

.elementor-shortcode .v-acc__col{
  display: flex;
  flex-direction: column;
  gap: 16px;                       /* vertikal innerhalb der Spalte */
  min-width: 0;
}

@media (max-width: 767px){
  .elementor-shortcode .v-acc.v-acc--cols{
    grid-template-columns: 1fr;    /* Mobil: 1 Spalte */
    gap: 18px;
  }
}

/* Headings neutralisieren */
.elementor-shortcode .v-acc__heading{ margin: 0; }

/* =============================
   Trigger (Pill)
   ============================= */
.elementor-shortcode .v-acc__trigger{
  /* alle Button-Defaults aus Theme/Elementor entfernen */
  all: unset;
  box-sizing: border-box;

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 18px;
  background: var(--acc-pill) !important;   /* geschlossen */
  border-radius: 20px;
  color: var(--acc-text);
  cursor: pointer;

  /* harte Resets gegen fremde Ränder/Schatten */
  border: none !important;
  outline: none;
  box-shadow: none !important;
}

.elementor-shortcode .v-acc__trigger[aria-expanded="true"]{
  background: var(--acc-accent) !important; /* geöffnet */
}

.elementor-shortcode .v-acc__trigger:hover{
  filter: brightness(.985);
}

/* Tastaturfokus sichtbar, aber ohne „grüne Outline“ im Normalzustand */
.elementor-shortcode .v-acc__trigger:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--acc-accent) 55%, transparent);
  outline-offset: 2px;
}

/* Titel in der Pill */
.elementor-shortcode .v-acc__title{
  font-weight: 400;
  line-height: 1.2;
  color: var(--acc-dark);
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================
   Icon rechts (Kreis + +/-)
   ============================= */
.elementor-shortcode .v-acc__icon svg{
  width: 28px; height: 28px; display: inline-block; flex: 0 0 auto;
}

.elementor-shortcode .v-acc__icon circle{
  transition: fill 300ms ease;
}

.elementor-shortcode .v-acc__icon .v-acc__icon-plus,
.elementor-shortcode .v-acc__icon .v-acc__icon-cross{
  display: none;                 /* Grundzustand */
  stroke-linecap: round;
  stroke-width: 1.75;
  transition: stroke 300ms ease;
}

/* Eingeklappt: grüner Kreis + SCHWARZES PLUS (cross = +) */
.elementor-shortcode .v-acc__trigger[aria-expanded="false"] .v-acc__icon circle{
  fill: var(--acc-accent);
}
.elementor-shortcode .v-acc__trigger[aria-expanded="false"] .v-acc__icon .v-acc__icon-cross{
  display: block !important;
  stroke: var(--acc-dark);
}

/* Ausgeklappt: dunkler Kreis + WEISSES MINUS (plus = –) */
.elementor-shortcode .v-acc__trigger[aria-expanded="true"] .v-acc__icon circle{
  fill: var(--acc-dark);
}
.elementor-shortcode .v-acc__trigger[aria-expanded="true"] .v-acc__icon .v-acc__icon-plus{
  display: block;
  stroke: #fff;
}

/* =============================
   Panel (weiß, vollbreit unter Pill) – SMOOTH 400ms
   Wichtig: [hidden] überschreiben, sonst kein Transition möglich
   ============================= */

/* 1) hidden NICHT vollständig verstecken, damit Animation möglich bleibt */
.elementor-shortcode .v-acc__panel[hidden]{
  display: block;        /* UA-Styles überschreiben (sonst display:none) */
  visibility: hidden;    /* im „zu“-Zustand unsichtbar */
}

/* 2) Grundzustand: „zu“ (animierbare Properties) */
.elementor-shortcode .v-acc__panel{
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;                 /* Abstand zur Pill */
  border-radius: 14px;

  overflow: hidden;
  max-height: 0;                    /* Höhe animieren */
  padding: 0 18px;                  /* oben/unten 0 im zu-Zustand */
  opacity: 0;

  transition:
    max-height 250ms ease,
    padding    400ms ease,
    opacity    300ms ease;

  will-change: max-height, padding, opacity;
}

/* 3) Offen-Zustand: wenn hidden entfernt wurde */
.elementor-shortcode .v-acc__panel:not([hidden]){
  /* max-height groß genug wählen, damit der größte Inhalt reinpasst */
  max-height: 1000px;               /* bei Bedarf auf 1200–2000px erhöhen */
  padding: 12px 18px 18px;          /* weiches „Aufklappen“ */
  opacity: 1;
  visibility: visible;
}

.elementor-shortcode .v-acc__line{
  margin: 0 0 6px;
  color: #2a2a2a;
}
.elementor-shortcode .v-acc__line:last-child{ margin-bottom: 0; }

/* Accessibility: Reduced Motion respektieren */
@media (prefers-reduced-motion: reduce){
  .elementor-shortcode .v-acc__panel{
    transition: none !important;
  }
  .elementor-shortcode .v-acc__icon circle,
  .elementor-shortcode .v-acc__icon .v-acc__icon-plus,
  .elementor-shortcode .v-acc__icon .v-acc__icon-cross{
    transition: none !important;
  }
}



.single-post-title{
    font-size: 2.5rem !important;
    font-family: "SportsNight", sans-serif !important;
    font-weight: 800 !important;
    color: #ececec !important;
    line-height: 1.2;
}

.single-post-date{
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #ececec !important;
}