/** Eigene Stylesheets TSV Zirndorf Leichtathlatik
2026-07-15 - mg created**/


.article-info {
font-size:12px;
}

.page-item.active .page-link {
background-color:#cb2424;
border-color: #cb2424;
}



.clear {
  clear: both;
}

/** Terminkalender Wettkämpfe **/
.eventlist th {
  color: #FFF;
  background-color: #cb2424;
  border-bottom: solid 1px #999;
}
.eventlist a:link {
  color: #cb2424;
}
.eventlist a:visited {
  color: #cb2424;
}

/** Tabelle Flohmarkt **/
.jlist-table thead {
  color: #FFF;
  background-color: #ba5c44;
  border-bottom: solid 1px #999;
}

/** Athletenseiten **/
table.liste {
  width: 100%;
}
table.liste th {
  width: 30%;
  border-top: solid 1px #999;
  border-bottom: solid 1px #999;
  background-color: transparent;
  color: #000;
}
table.liste tr:hover {
  background-color: #ba5c44;
  color: #fff;
}
table.liste tr:hover a {
  color: #fff;
}
table.steckbrief {
  line-height: 2;
  width: 100%;
  margin-top: 1em;
}
table.steckbrief th {
  vertical-align: top;
  table-layout: auto;
  background-color: transparent;
  color: #444;
}
table.steckbrief td em {
  font-style: normal;
  display: block;
  padding-top: 0.33em;
}

.links {
  float: left;
  margin-right: 10px;
}
.links img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.center-athleten {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.container-athleten {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/** Abstand Text zu eingefügten Bildern in Beiträgen **/
.abstand {
  margin-top: 5px;
  margin-right: 15px;
  margin-bottom: 5px;
  float: left;
}

span.addtocart-button span.addtocart-button-disabled {
  color: #000;
}

/** Webshop - Aenderung der Schriftfarbe der Tabelle zu schwarz im Warenkorb **/
.vm-cart-item-name,
.vm-cart-item-sku,
.vm-cart-item-basicprice,
.vm-cart-item-quantity,
.priceColor2,
.vm-cart-item-total {
  color: gray;
}

/** Webshop - Uebersichtsseite den Text der Kurzbeschreibung zentrieren **/
.product_s_desc {
  text-align: center;
}

/** Webshop - Uebersichtsseite den Text des Preises zentrieren und bold **/
.product-price {
  text-align: center;
  float: none;
  font-weight: bold;
}

/** Webshop - Uebersichtsseite die Auswahlfelder der Variante rechtsbündig machen **/
.product-field-display {
  text-align: right;
}

img.jg_photo, .jg_minis a img {
  margin: auto;
}

.vm-product-media-container {
  margin-left: auto;
  width: 58%;
}


/* Stil für das Aufklapp-Icon */
.icon::before {
  content: "\25BC"; /* Unicode für ein nach unten zeigendes Dreieck */
  display: inline-block;
  transform: rotate(-90deg);
  transition: transform 0.2s;
}

/* Stil für das Icon, wenn das Details-Element geöffnet ist */
details[open] .icon::before {
  transform: rotate(0deg);
}

summary {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* CSS-Stil für das Team Wettkampfbüro */
details summary {
  background-color: #cb2424;
  color: white;
  text-align: center;
}

/* Stile für Bild in Kontaktformular */
.thumbnail > img {
  width: 200px;
}
.thumbnail {
  border: none;
}



.fa-facebook::before {
  content: "\f082";
}




/* --- Modernes, klares Tabellendesign OHNE Überschriftenleiste --- */

/* 1. Die Haupttabelle modern und luftig gestalten */
#sp-component table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e0e0e0 !important;
    background-color: #ffffff !important;
}

/* 2. Alle Zellen absolut einheitlich formatieren */
#sp-component table td,
#sp-component table th {
    padding: 14px 18px !important;
    line-height: 1.4 !important;
    color: #333333 !important;
    border-bottom: 1px solid #eeeeee !important;
    background-color: transparent !important; /* Verhindert ungewollte Hintergrundfarben */
    text-align: left !important;
    font-weight: normal !important;
}

/* 3. Letzte Zeile braucht keinen unteren Trennstrich mehr */
#sp-component table tr:last-child td {
    border-bottom: none !important;
}

/* 4. Dezenter Wechselhintergrund (Zebra-Muster) für den schnellen Überblick */
#sp-component table tr:nth-of-type(even) td {
    background-color: #f8f9fa !important;
}

/* 5. Moderner Hover-Effekt: Zeile färbt sich beim Drüberfahren dezent ein */
#sp-component table tr:hover td {
    background-color: #f1f3f5 !important;
    transition: background-color 0.15s ease !important;
}

/* 6. Links in der Tabelle (Berichtstitel) sauber stylen */
#sp-component table td a {
    color: #222222 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Beim Drüberfahren mit der Maus wird der Text rot und unterstrichen */
#sp-component table td a:hover {
    color: #cb2424 !important; /* Dein Vereinsrot als Akzent */
    text-decoration: underline !important;
}

/* 7. Zuverlässige Mobil-Optimierung für Smartphones */
@media screen and (max-width: 768px) {
    #sp-component table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Sponsoren Mobile-Ansicht (4er Reihe) standardmäßig Schwarz-Weiß & Zentriert */
#tsv-top-sponsoren {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

#tsv-top-sponsoren img {
    filter: grayscale(100%) !important;
    opacity: 0.6 !important;
    transition: filter 0.3s ease, opacity 0.3s ease !important;
    height: 35px !important; /* Standardhöhe für Desktop */
    width: auto !important;
    margin: 15px !important;
}

/* Sponsoren Mobile-Ansicht werden farbig beim Drüberfahren (Hover) */
#tsv-top-sponsoren img:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* --- Spezielle Optimierung für die mobile Ansicht (Handys) --- */
@media screen and (max-width: 767px) {
    #tsv-top-sponsoren a {
        /* Jedes der 4 Elemente bekommt exakt 50% Breite minus etwas Platz für Abstände */
        flex: 0 0 calc(50% - 20px) !important;
        max-width: calc(50% - 20px) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    #tsv-top-sponsoren img {
        height: 28px !important;  /* Macht die Logos auf dem Handy schlanker */
        margin: 10px 0 !important; /* Weniger Abstand nach oben/unten, kein seitlicher Abstand nötig */
        max-width: 100% !important;/* Verhindert, dass übergroße Logos ausbrechen */
        object-fit: contain !important;
    }
}




/* Sponsoren Desktop-Ansicht standardmäßig Schwarz-Weiß */
#tsv-footer-sponsoren img {
    filter: grayscale(100%) !important;
    opacity: 0.6 !important;
    transition: filter 0.3s ease, opacity 0.3s ease !important;
}

/* Sponsoren Desktop-Ansicht werden farbig beim Drüberfahren (Hover) */
#tsv-footer-sponsoren img:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}


.headliner{
    font-weight: 600 !important;
    text-transform: uppercase !important; /* Macht den Text zu Großbuchstaben */
    font-size: 0.9em !important;          /* Leicht verkleinert, damit es nicht schreit */
    letter-spacing: 1.5px !important;     /* Breiterer Zeichenabstand */
    color: #444444 !important;            /* Edles Dunkelgrau statt hartem Schwarz */
}


/* Styling für die Zitat-Box */
blockquote.zitat-box {
    background-color: #f9f9f9;
    border-left: 4px solid #eb4947; /* Tipp: Ersetzen Sie #007bff durch Ihre Joomla-Template-Farbe */
    padding: 15px 20px;
    margin: 1.5em 0;
    font-style: italic;
    color: #333333;
    border-radius: 0 4px 4px 0;
}

/* Styling für den Text innerhalb der Box */
blockquote.zitat-box p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Styling für die Quellen-/Autorenangabe */
blockquote.zitat-box footer {
    display: block;
    font-size: 0.9rem;
    margin-top: 10px;
    color: #666666;
    font-style: normal; /* Autor nicht kursiv, für besseren Kontrast */
}
blockquote.zitat-box .autor {
    display: block; /* Damit es in eine neue Zeile rutscht */
    margin-top: 10px;
    font-size: 0.9rem;
    font-style: normal; /* Aufrecht, nicht kursiv */
    color: #666;
    text-align: right; /* Oft schöner bei Zitaten */
}