/* ==========================================================
   TTG Bingen-Münster-Sarmsheim
   Hauptstylesheet
========================================================== */

:root {
    --ttg-purple: #4E467A;
    --ttg-purple-dark: #403A65;
    --ttg-yellow: #FFD200;
    --ttg-white: #FFFFFF;
    --ttg-accent: #6f2c91;
    --ttg-purple-light:var(--ttg-purple-light)
}

.section-default {
    background-color: #F8F7F3;
}

main {
    background-color: #F8F7F3;
    background:
        linear-gradient(
        180deg,
        #ffffff 0%,
        #faf8fc 45%,
        #f4effa 100%);
    }

/* Farbe für den ganzen body */    
body {
    background: #5A5288 !important;
}

/* Farbe für den Seiteninhalt */
#page-content {
    background-color:  #FFFFFF;
}

/* Farbe für die Section */
.section.section-default{

    background: #FFFFFF;

    border-radius:32px 32px 0 0;
    /* beginn main */
    margin-top:0px;

    position:relative;

    z-index:10;

}


.ttg-divider-section {
    background: #ffffff;
    padding: 2rem 0 3rem;
}

.ttg-divider {
    height: 24px;
    background: var(--ttg-purple);
    border-top: 2px solid var(--ttg-yellow);
    border-bottom: 2px solid var(--ttg-yellow);
    border-radius: 8px;
}



/* ==========================================================
   1. Navigation
========================================================== */

.navbar-mainnavigation .navbar-brand-image img {
    max-height: 110px !important;
    margin-top: 1px;
}

.navbar-mainnavigation {
    background-color: var(--ttg-purple) !important;
    border-bottom: 6px solid var(--ttg-yellow); 
    min-height: 120px;
}

.navbar-mainnavigation .nav-link {
    color: white !important;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition:
        color .2s ease,
        border-color .2s ease;
}

.navbar-mainnavigation .nav-link:hover,
.navbar-mainnavigation .nav-item.active .nav-link {
    color: var(--ttg-yellow) !important;
    border-bottom-color: var(--ttg-yellow);
}

.navbar-mainnavigation .navbar-brand {
    margin-right: 2rem;
}

.navbar-mainnavigation .nav-item {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.navbar-mainnavigation .nav-link-toggle {
    margin-left: 0;
    padding-left: 2px;
    padding-right: 0;
}

@media (min-width: 992px) {

    #mainnavigation {
        display: flex !important;
    }

}

.navbar-mainnavigation .navbar-nav {
    width: auto !important;
    margin-left: auto !important;
    position: relative;
    top: 30px;
}

/* aktiver Navigationsbalken */
.navbar-mainnavigation .nav-link.nav-link-main:before {
    background: var(--ttg-yellow) !important;
    height: 4px !important;
}

.navbar-mainnavigation .dropdown-menu {
    background-color: var(--ttg-purple);
    border: 2px solid var(--ttg-yellow);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    padding: .5rem 0;
    margin-top: -2px !important;
}

.navbar-mainnavigation .dropdown-item {
    color: var(--ttg-purple)!important;
}

.navbar-mainnavigation .dropdown-item:hover,
.navbar-mainnavigation .dropdown-item:focus {
    background-color: var(--ttg-yellow);
    color: var(--ttg-purple) !important;
}

.navbar-mainnavigation .dropdown-menu .nav-link,
.navbar-mainnavigation .dropdown-menu .dropdown-item {
    color: var(--ttg-white) !important;
}

.navbar-mainnavigation .dropdown-menu .nav-link:hover,
.navbar-mainnavigation .dropdown-menu .dropdown-item:hover {
    background-color: var(--ttg-yellow) !important;
    color: var(--ttg-purple) !important;
}


/* ==========================================================
   2. Breadcrumb
========================================================== */

.breadcrumb-section {
    min-height: 34px;
    padding: 4px 0 !important;

    display: flex;
    align-items: center;

    background-color: var(--ttg-purple);
    color: var(--ttg-white);

    border-bottom: 2px solid var(--ttg-yellow);
}

/* Breadcrumb selbst */
.breadcrumb {
    margin-bottom: 0;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Einzelne Einträge */
.breadcrumb-item {
    padding: 0;
}

/* Aktuelle Seite */
.breadcrumb-item,
.breadcrumb-item a {
    color: var(--ttg-white) !important;
}

.breadcrumb-item a:hover {
    color: var(--ttg-yellow) !important;
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--ttg-yellow) !important;
    font-weight: 700;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.7);
}

/* ==========================================================
   3. Footer
========================================================== */

/* Überschriften */
.footer-section-content h1,
.footer-section-content h2,
.footer-section-content h3,
.footer-section-content h4,
.footer-section-content h5,
.footer-section-content h6 {
    color: var(--ttg-white);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.footer-section-content-column {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.4;
}

.footer-section-content {
    background-color: var(--ttg-purple) !important;
    color: var(--ttg-white);
    border-top: 6px solid var(--ttg-yellow);
}

.footer-section-content a {
    color: var(--ttg-white);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-section-content a:hover {
    color: var(--ttg-yellow);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

/* Links beim Überfahren */
.footer-section-content a:hover {
    color: var(--ttg-yellow);
}

/* Copyright-Bereich */
.footer-section-meta {
    background-color: #403A65 !important;
    color: var(--ttg-white);
}

/* Footer Service-Liste */
.footer-section-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-section-content li {
    margin-bottom: 4px;
}

/* Footer Links */
.footer-section-content a:hover {
    color: var(--ttg-yellow);
    text-decoration: none;
}

.footer-section-content .footer-section-content-column a:hover {
    color: var(--ttg-yellow) !important;
}


/* Absätze in allen drei Footer-Spalten */
.footer-section-content-column p {
    margin-top: 0;
    margin-bottom: 8px;
}

/* Letzter Absatz ohne zusätzlichen Abstand */
.footer-section-content-column p:last-child {
    margin-bottom: 0;
}

/* Service-Liste ebenfalls gleichmäßig */
.footer-section-content-column ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.footer-section-content-column li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.footer-section-content-column li:last-child {
    margin-bottom: 0;
}

.footer-section-content a:hover {
    color: var(--ttg-yellow) !important;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}


/* ==========================================================
   4. Formulare
========================================================== */

/* Nachrichtenfeld größer */
form textarea.form-control {
    min-height: 180px;
    resize: vertical;
}

/* Senden-Button */
form button[type="submit"],
form input[type="submit"] {
    background-color: #51487f;
    border-color: #51487f;
    color: #fff;
    font-weight: 600;
}

/* Senden-Button Hover */
form button[type="submit"]:hover,
form button[type="submit"]:focus,
form input[type="submit"]:hover,
form input[type="submit"]:focus {
    background-color: #40386b;
    border-color: #40386b;
    color: #fff;
}


/* ==========================================================
   5. Leaflet
========================================================== */
/* ==========================================================
   6. Venue Cards
========================================================== */

#spielstaetten-map {
    width: 100%;
    height: 550px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0rem;
    /* outline: 3px solid #5b2a86; */
    border-radius: 12px;
}

.ttg-popup {
    min-width: 240px;
}

.ttg-popup h5 {
    margin: 0 0 .6rem;
    color: #6f42c1;
    font-weight: 600;
}

.ttg-popup p {
    margin-bottom: .75rem;
    line-height: 1.4;
}

.ttg-popup .btn {
    width: 100%;
}

.hall-note {
    margin: .75rem 0;
    padding: .5rem .75rem;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: .25rem;
    font-size: .9rem;
}

.ttg-placeholder{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    min-height:240px;

    background:#f8f9fa;

    color:#888;

    font-size:1.2rem;

    font-weight:600;

    border-right:1px solid #dee2e6;
    /*aspect-ratio:16/10;*/

    border:2px dashed #d8d8d8;

    border-radius:12px;

    background:#fafafa;

    color:#999;
}

.ttg-card {

    height:100%;

    display:flex;
    position: relative;
    flex-direction:column;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.25s;
}

.ttg-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: #5b2a86;   /* Lila */
}
.ttg-card::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 4px;
    background: #ffd200;   /* TTG-Gelb */
}
.ttg-card:hover{

    transform:translateY(-5px);

    box-shadow:0 16px 30px rgba(0,0,0,.12);
}

.ttg-card-top{

    height:4px;

    background:#6f2c91;
}

.ttg-title{

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:1.25rem;

    line-height:1.3;
}

.ttg-content{

    padding:2rem;

    display:flex;

    flex-direction:column;

    height:100%;
}

/* Bild */

.ttg-image{

    margin-top:auto;

    margin-bottom:1.5rem;
}

.ttg-image img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    border-radius:12px;

    display:block;
}

.ttg-placeholder-icon{

    font-size:2.8rem;

    margin-bottom:.75rem;
}

.ttg-placeholder-text{

    font-size:.95rem;

    font-weight:600;
}


.ttg-placeholder span{

    margin-top:15px;

    font-size:1rem;
}

/* Inhalt */

/* Adresse */

.ttg-address{

    display:flex;

    gap:.75rem;

    margin-bottom:1.25rem;
}

.ttg-icon{

    font-size:1.1rem;

    color:#6f2c91;
}

.ttg-address-text{

    line-height:1.5;

    font-size:.95rem;
}

/* Hinweis */

.ttg-note{

    background:#f8f9fa;

    border-left:4px solid #6f2c91;

    padding:.9rem;

    border-radius:8px;

    margin-bottom:1.5rem;
}

.ttg-note strong{

    display:block;

    margin-bottom:.4rem;
}

.ttg-note p{

    margin:0;
}

/* Buttons */

.ttg-buttons{
    display:flex;
    gap:.5rem;
}

.ttg-buttons .btn{
    flex:0 1 auto;
    width:48%;
    border-radius:50px;
    padding:.6rem .8rem;
    font-size:.9rem;
}

.ttg-title {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ttg-title-icon {
    font-size: 2.4rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Beide Buttons  hier nur eingefügt */

.ttg-buttons .btn,
.ttg-buttons .btn:visited {
    background-color: #5b2a86;
    border-color: #5b2a86;
    color: #fff;
}

.ttg-buttons .btn:hover,
.ttg-buttons .btn:focus {
    background-color: #ffd200;
    border-color: #ffd200;
    color: #5b2a86;
}

.ttg-card {
    transition: all 0.3s ease;
}

.ttg-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.ttg-venues {
    margin-top: 1.5rem;
}

/* Abstand zwischen Karte und Karten-Grid */
.ttg-map-wrapper {
    margin-bottom: 2rem;
}

/* Button des Popups bei Spielstätten  */
.ttg-popup-btn,
.ttg-popup-btn:visited {
    width: 100%;
    background: #4E467A;
    border: 2px solid #4E467A;
    color: #FFFFFF !important;
    font-weight: 600;
    border-radius: 30px;
    transition: all .25s ease;
}

.ttg-popup-btn:hover,
.ttg-popup-btn:focus {
    background: #FFD200;
    border-color: #FFD200;
    color: #4E467A !important;
}

.ttg-popup-btn:active {
    background: #E6BE00;
    border-color: #E6BE00;
    color: #4E467A !important;
}


/* ==========================================================
    Hero - Content Block
========================================================== */
.ttg-hero {

    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 0px;
}

.ttg-hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.ttg-hero-content {
    background: rgba(91, 42, 134, 0.75);

    backdrop-filter: blur(4px);

    padding: 2rem;

    border-left: 5px solid var(--ttg-yellow);

    border-radius: 0 12px 12px 0;
}



.ttg-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0,75rem;

    min-width: 320px;

    padding: 10px 20px;

    border: 2px solid #FFD200;
    border-radius: 6px;

    background: rgba(78, 70, 122, 0.15);
    backdrop-filter: blur(2px);

    color: #ffffff;
    text-decoration: none;

    font-weight: 600;
    font-size: 1.0rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    transition: all .25s ease;
}

.ttg-hero-button:hover {
    background: rgba(255,210,0,0.15);
    border-color: #FFD200;
    box-shadow: 0 0 16px rgba(255, 210, 0, 0, 0.45);
    transform: translateY(-2px);
    color: #ffffff;
    text-decoration: none;
}

.ttg-hero-button::before {
    content: "🏓";
    color: #FFD200;
    font-size: 1.3rem;
}

.ttg-hero-button::after {
    content: "→";
    color: #FFD200;
    font-size: 1.5rem;
    font-weight: 700;
}

.ttg-hero-cta {
    position: absolute;
    left: 16%;
    bottom: 33%;
    transform: translateX(-50%);
}

/* ==========================================================
    Tischtennisball
========================================================== */

/* ==========================================================
   STORY
   TTG Design System
========================================================== */

.ttg-story {
    padding: 3.5rem 0 5rem;
    background: transparent;
}

/* ----------------------------------------------------------
   Überschrift
---------------------------------------------------------- */

.ttg-story-title {

    text-align: center;

    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.0;

    color: var(--ttg-purple);

    margin-bottom: 0.8rem;

}

.ttg-story-intro {

    max-width: 700px;
    margin: 0 auto 1.0rem;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #666;
}

/* ----------------------------------------------------------
   TT Ball
---------------------------------------------------------- */

.ttg-ball {

    position: relative;

    width: 100%;
    max-width: 340px;

    margin: 0 auto;

    transition: transform .3s ease;

}

.ttg-ball:hover {

    transform: translateY(-8px);

}

.ttg-ball-image {

    display: block;

    width: 100%;
    height: auto;

}

.ttg-ball-content {

    position: absolute;

    top: 18%;
    left: 14%;
    right: 14%;
    bottom: 18%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}

.ttg-ball-content h3 {

    margin: 0 0 .35rem;

    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;

    color: var(--ttg-purple);

    text-align: center;
        min-height: 3.4rem;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    text-align: center;

    color: var(--ttg-purple);

}

.ttg-ball-content p {

    margin: 0;

    max-width: 80%;

    font-size: .96rem;

    line-height: 1.45;

    color: #555;

}
border-radius:-balls {

    max-width: 1200px;

    margin: 0 auto;

}
/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width:991px){

    .ttg-story{

        padding:3.5rem 0 4rem;

    }

    .ttg-story-title{

        font-size:2.6rem;

    }

    .ttg-ball{

        max-width:290px;

    }

}

@media (max-width:767px){

    .ttg-story-title{

        font-size:2.1rem;

    }

    .ttg-story-intro{

        margin-bottom:2rem;

    }

    .ttg-ball{

        max-width:240px;

    }

}


/* ----------------------------------------------------------
   TT Table
---------------------------------------------------------- */
.tablecard-block {
    display: flex;
    justify-content: center;
    margin: 3rem 0;
}

.tt-table {
    position: relative;
    width: 100%;
    max-width: 700px;
}

.tt-table-svg {
    display: block;
    width: 100%;
    height: auto;
}

.tt-table-content {
    position: absolute;
    inset: 0;
}

.tt-table-headline {
    position: absolute;

    top: 19%;
    left: 50%;
    transform: translateX(-50%);

    color: black;

    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
text-shadow:
    0 1px 2px rgba(0,0,0,0.35)
    z-index: 20;
}

.tt-table-text{
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    position:absolute;
    top:46%;
    left:50%;
    transform:translate(-50%,-50%);
    width:60%;
    text-align:center;
        text-shadow:
        -1px -1px 0 rgba(0,0,0,.75),
         1px -1px 0 rgba(0,0,0,.75),
        -1px  1px 0 rgba(0,0,0,.75),
         1px  1px 0 rgba(0,0,0,.75),
         0px  2px 4px rgba(0,0,0,.35);
    }

    .tt-line {
    line-height: 1.2;
}

/* obere Zeile */
.line-top{
    font-size:1.4rem;
    color:#ffffff;
    margin-bottom:0.6rem;
}

/* Mittelpunkt */
.line-main{
    font-size:2rem;
    font-weight:700;
    color:var(--ttg-yellow);
    margin-bottom:0.6rem;
    letter-spacing:.03em;
}

/* untere Zeile */
.line-bottom{
    font-size:1.4rem;
    color:#ffffff;
}

#page-content {
        max-width: 1600px;

    margin: 0 auto;
    background: #40395F !important;
        box-shadow:
        0 0 40px rgba(0,0,0,.05);

}

main {
    background: transparent !important;
    min-height: 80vh;
}


.section-default {
    max-width: 1280px;
    margin: 0 auto;
background-color: #4E467A;
    border-radius: 0;
}
.section.section-default{
        border-radius: 0;
}

/* FACEBOOK Icon*/
.ttg-facebook-icon {
    font-size: 32px;
    color: #fff;
    display: inline-block;
    transition: transform .2s ease, color .2s ease;
}

.ttg-facebook-icon:hover {
    color: #FFD200;
    transform: scale(1.1);
}

/* FOOTER */
/* Footer Links */
/* Footer Links */
#page-footer a {
    color: #fff !important;
    text-decoration: none;
    display: inline-block;
    transition: color .2s ease, transform .2s ease;
}

#page-footer a::before {
    content: "›";
    color: #FFD200;
    font-size: 1.4em;
    font-weight: 750;
    margin-right: 0.4rem;
    vertical-align: -0.05em;
}

#page-footer a:hover {
    color: #FFD200 !important;
    transform: translateX(6px);
}

#page-footer a:hover::before {
    color: #fff;
}


/* =========================================================
   Trainingskarten
   ========================================================= */

.ttg-training-card {
    border: 1px solid #e5e5e5;
    border-top: 5px solid var(--ttg-yellow);
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 0;
    background: #f3f0fa;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    min-height: 260px;
    flex-direction: column;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
    }

.ttg-training-card:hover {
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Überschrift / Wochentag
   --------------------------------------------------------- */

.ttg-training-header {
    background: #4E467A;
    color: #fff;
    padding: 0.9rem 1.25rem;
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Karteninhalt
   --------------------------------------------------------- */

.ttg-training-body {
    padding: 1.25rem;
}


/* ---------------------------------------------------------
   Trainingsort
   --------------------------------------------------------- */

.ttg-training-hall {
    font-size: 1.35rem;
    font-weight: 700;
    color: #4E467A;
    margin-bottom: 1.15rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e5e5;
}

.hall-label {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 0.3rem;
}


/* ---------------------------------------------------------
   Trainingszeiten
   --------------------------------------------------------- */

.training-slot {
    padding: 0.85rem 1rem;
    border-radius: 10px !important;
    margin-bottom: 0.7rem;
    background: #f8f9fa;
    border-left: 6px solid #ddd;
}

.training-slot:last-child {
    margin-bottom: 0;
}

.training-slot:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}


/* ---------------------------------------------------------
   Uhrzeit
   --------------------------------------------------------- */

.training-time {
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 700;
    color: #222;
}


/* ---------------------------------------------------------
   Trainingsart
   --------------------------------------------------------- */

.training-type {
    margin-top: 0.25rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #666;
}


/* =========================================================
   Farben der Trainingsarten
   ========================================================= */

   .training-blau {
    border-left-color: #3d8ef0;
    background:  #e2efff;
}

.training-gruen {
    border-left-color: #34a56f;
    background: #e6f7ed;
}

.training-gelb {
    border-left-color: #e0b500;
    background: #fff8df;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 767px) {

    .ttg-training-card {
        min-height: 0;
    }

    .ttg-training-header {
        padding: 0.85rem 1rem;
        font-size: 1.2rem;
    }

    .ttg-training-body {
        padding: 1rem;
    }

    .ttg-training-hall {
        font-size: 1.25rem;
    }
}


/* =========================================================
   Trainingsübersicht
   ========================================================= */

.ttg-training-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 460px));
    justify-content: center;
    gap: 1.5rem;
}

.ttg-training-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
}

.ttg-training-column > * {
    width: 100%;
}


/* Tablet */

@media (max-width: 991px) {
    .ttg-training-grid {
        gap: 1.5rem;
    }

    .ttg-training-column {
        gap: 1.5rem;
    }
}


/* Smartphone */

@media (max-width: 767px) {
    .ttg-training-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .ttg-training-column {
        gap: 1.5rem;
    }
}

/* Footer 4 Spalten */

.ttg-footer-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem;
}

@media (max-width: 991px) {
    .ttg-footer-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .ttg-footer-row {
        grid-template-columns: 1fr;
    }
}

.ttg-footer-column:nth-child(1)
{
    padding-top: .0rem;
    margin-left: .2rem;
}

.ttg-footer-column:nth-child(1) p {
    line-height: 1.6;
    margin-bottom: .4rem;
}


.ttg-footer-column:nth-child(2)
{
    padding-top: 2.1rem;
    margin-left: 2.2rem;
}

.ttg-footer-column:nth-child(2) p {

    margin-top: 1.5rem;
    margin-bottom: .4rem;
    line-height: .4;
}

.ttg-footer-column:nth-child(3)
{
    padding-top: 2.1rem;
    margin-left: 3rem;
}

.ttg-footer-column:nth-child(3) p {

    margin-top: 1.3rem;
    margin-bottom: .4rem;
    line-height: .4;
}

.ttg-footer-column:nth-child(3) li {

    margin-top: 1.3rem;
    margin-bottom: .4rem;
    line-height: .6;
}


.ttg-footer-column:nth-child(4) {
    margin-top: 32px;
    margin-left: -0.9rem
}

.ttg-footer-column:nth-child(4) ul {
    margin-top: -0.70rem;
    margin-bottom: .4rem;
    line-height: 1.2;
}

.ttg-footer-column:nth-child(4) li {
    margin-top: 0.0rem;
    margin-bottom: .4rem;
    line-height: 1.2;
}
/* Footer abstand links  */

.section-row.ttg-footer-row{
    display: grid !important;
    grid-template-columns: repeat(4, minimax(0, 1fr)); 
    gap: 2.5rem;
}

.ttg-footer-column:last-child {
    padding-top: 1.5rem;
}

.ttg-footer-column p {
    line-height: 1.3;
    margin-bottom: 3.25;
}

.ttg-footer-column h5 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.ttg-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ttg-footer-links li {
    margin-bottom: 0.5rem;
}

.ttg-footer-links a {
    text-decoration: none;
}


@media (max-width: 991px) {
    .ttg-footer-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .ttg-footer-row {
        grid-template-columns: 1fr;
    }
}

.ttg-footer-column h3 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Facebook Footer */

.ttg-footer-column h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
     margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.ttg-facebook-icon {
    margin-top: 2rem;
}

.ttg-facebook-icon a {
    color: #ffffff;
    font-size: 2.5rem;
    text-decoration: none;
}

.ttg-facebook-icon a:hover {
    color: #FFD200;
}


.ttg-footer-column p {
    line-height: 1.3;
    margin-bottom: 3.25;
}


/* =========================================================
   Trainingsübersicht – 2-Spalten-Grid
   ========================================================= */

.ttg-training-section {
    background: #ffffff;
    padding: 2rem;
    border-radius: 18px;
    margin-bottom: 2rem;
}

.ttg-training-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 550px));
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2rem;
    margin-bottom: 15rem;
    background: #ffffff;;
}

.ttg-training-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
}

.ttg-training-column > * {
    width: 100%;
}

/* Tablet */
@media (max-width: 991px) {
    .ttg-training-grid {
        gap: 1.5rem;
    }

    .ttg-training-column {
        gap: 1.5rem;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .ttg-training-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .ttg-training-column {
        gap: 1.5rem;
    }
}


/* =========================================================
   Mannschaftskontakt
   ========================================================= */

.ttg-contact-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
    border-top: 4px solid #FFD200;
    margin-top: 2rem;
}

.ttg-contact-card:first-child {
    margin-top: 2rem;
}

.ttg-contact-card {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 1200px;
    margin: 1.5rem auto;
}

.ttg-contact-body {
    display: grid;
    grid-template-columns: 140px 340px 340px;
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: start;
}

.ttg-contact-header {
    background: #4E467A;
    color: #fff;
    padding: 1rem 1.25rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.ttg-contact-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #e9ecef;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: .9rem;
    color: #666;
}

.ttg-contact-details {
    padding-left: 1.5rem;
    min-width: 0;
}

.ttg-contact-name {
    color: #4E467A;
    margin-bottom: .25rem;
    font-size: 1.4rem;
}

.ttg-contact-role {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #666;
}

.ttg-contact-address,
.ttg-contact-email,
.ttg-contact-phone,
.ttg-contact-mobile {
    margin-bottom: .45rem;
}

.ttg-contact-contacts {
    display: flex;
    flex-direction: column;
    gap: .0rem;
    min-width: 120px;

}

.ttg-contact-email a,
.ttg-contact-phone a,
.ttg-contact-mobile a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.ttg-contact-email a:hover,
.ttg-contact-phone a:hover,
.ttg-contact-mobile a:hover {
    color: #4E467A;
}

.ttg-contact-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}


@media (max-width: 768px) {

    .ttg-contact-body {
        grid-template-columns: 1fr;
    }

    .ttg-contact-photo {
        margin: 0 auto;
    }
}

/* =========================================================
   Mannschaftskontakt ENDE
   ========================================================= */

/* =========================================================
   Vereinsvorstand
  ========================================================= */

.ttg-board-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
    border-top: 4px solid #FFD200;
    margin-top: 2rem;
}

.ttg-board-card:first-child {
    margin-top: 2rem;
}

.ttg-board-card {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 1200px;
    margin: 1.5rem auto;
}

.ttg-board-body {
    display: grid;
    grid-template-columns: 140px 340px 340px;
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: start;
}

.ttg-board-header {
    background: #4E467A;
    color: #fff;
    padding: 1rem 1.25rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.ttg-board-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #e9ecef;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: .9rem;
    color: #666;
}

.ttg-board-details {
    padding-left: 1.5rem;
    min-width: 0;
}

.ttg-board-name {
    color: #4E467A;
    margin-bottom: .25rem;
    font-size: 1.4rem;
}

.ttg-board-role {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #666;
}

.ttg-board-address,
.ttg-board-email,
.ttg-board-phone,
.ttg-board-mobile {
    margin-bottom: .45rem;
}

.ttg-board-contacts {
    display: flex;
    flex-direction: column;
    gap: .0rem;
    min-width: 120px;

}

.ttg-board-email a,
.ttg-board-phone a,
.ttg-board-mobile a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.ttg-board-email a:hover,
.ttg-board-phone a:hover,
.ttg-board-mobile a:hover {
    color: #4E467A;
}
.ttg-board-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}


@media (max-width: 768px) {

    .ttg-board-body {
        grid-template-columns: 1fr;
    }

    .ttg-board-photo {
        margin: 0 auto;
    }
}

/* =========================================================
   Vereinsvorstand ENDE
   ========================================================= */

/* ==========================================================
   TTGBMS Sponsor Card Small
========================================================== */

.ttg-sponsorcard_small-link {
    text-decoration: none;
    display: block;
}

.ttg-sponsorcard_small {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transition: all .25s ease;
}

.ttg-sponsorcard_small:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0,0,0,.15);
}

.ttg-sponsorcard_small-header {
    background: var(--ttg-purple);
    color: #fff;
    padding: 1rem 1.25rem;
    font-weight: 700;
}


.ttg-sponsorcard_small-body {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.ttg-sponsorcard_small-logo {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.ttg-sponsorcard_small-footer {
    height: 6px;
    background: var(--ttg-yellow);
}

.ttg-sponsorcard_small-accent {
    height: 6px;
    background: var(--ttg-yellow);
}

/* ==========================================================
   TTGBMS Sponsor Card Small ENDE
========================================================== */

/* =========================================
   TTG NEWS CARDS
   ========================================= */

.ttg-news-cards {
    margin: 3rem 0;
}

.ttg-section-title {
    text-align: center;
    margin-bottom: 0.75rem;
    color: #4E467A;
    font-weight: 700;
}

.ttg-section-intro {
    text-align: center;
    margin-bottom: 2rem;
    color: #666;
}

/* Karte */



/* Bild */

.ttg-news-card-image {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.ttg-news-card-image img {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ttg-news-image {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
}

/* Inhalt */

.ttg-news-card-body {
    padding: 1.5rem;

    display: flex;
    flex-direction: column;
    flex-grow: 1;
}




/* Datum */

.ttg-news-date {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 0.75rem;
}

/* Titel */

.ttg-news-title {
    color: #4E467A;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

/* Teaser */

.ttg-news-teaser {
    color: #444;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Footer */

.ttg-news-footer {
    margin-top: auto;
}

/* Weiterlesen-Link */

.ttg-news-link {
    color: #4E467A;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.ttg-news-link:hover {
    color: #FFD200;
}
/* Abstand unter der gelben Navigationslinie */

/* ANFANG TTG BUTTON AUF DER NEWS DETAIL SEITE */
.ttg-back-button {
    margin: 2rem 0;
}

.ttg-back-button .btn {
    background-color: #4E467A;
    border-color: #4E467A;
    color: #fff;
}

.ttg-back-button .btn:hover {
    background-color: #FFD200;
    border-color: #FFD200;
    color: #4E467A;
}

/* ENDE TTG BUTTON AUF DER NEWS DETAIL SEITE */

/* =========================
   TTG MultiCard
   ========================= */

.ttg-multicard {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
 
box-shadow: 0 10px 25px rgba(0,0,0,.08);
transition: all .25s ease;

    margin: 30px;
    position: relative;

      min-height: 650px;

    display: flex;
    flex-direction: column;
}

/* Gelber Streifen */
.ttg-multicard-accent {
    height: 6px;
    background: var(--ttg-yellow);
}


/* Header */

.ttg-multicard-header {
    background: #4E467A;

    color: #fff;
    text-align: center;
    font-weight: 700;

    padding: .8rem 1rem;
    }

.ttg-multicard:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
}


/* Bild */

.ttg-multicard-image {
    text-align: center;
    padding: 1.5rem;
}

.ttg-multicard-img {
    max-width: 100%;
    height: auto;
}

/* Inhalt */

.ttg-multicard-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 2rem;
    }

.ttg-multicard-title {
    color: #4E467A;
    margin-bottom: 1rem;
}

.ttg-multicard-text {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.ttg-multicard-footer {
    margin-top: 1rem;
}

.ttg-multicard-footer {
    margin-top: auto;
}


/* =========================
   TTG MultiCard ENDE
   ========================= */



/* ANFANG - Button von News Detail auf Aktuelles Seite */
.ttg-news-navigation {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ttg-news-nav-button {
    display: inline-block;
    background: #4E467A;
    color: #fff !important;
    padding: .6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.ttg-news-nav-button:hover {
    background: #FFD200;
    color: #4E467A !important;
}
/* ENDE - Button von News Detail auf Aktuelles Seite */

.ttg-news-list-title a {
    color: #000;
    text-decoration: none;
    font-weight: 700;
}

.ttg-news-list-title a:hover {
    color: #FFD200;
}


/* =====================================
   NEWS ARCHIV
   ===================================== */

.news-list-view .article {
    padding: 2rem 0;
    border-bottom: 1px solid #d8d8d8;
}

.news-list-view .news-img-wrap {
    flex: 0 0 280px;
}

.news-list-view .news-img-wrap img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.news-list-view .header,
.news-list-view .teaser-text,
.news-list-view .footer {
    flex: 1;
}

.news-list-view .header h3 {
    margin-bottom: 1rem;
}

.news-list-view .header h3 a {
    color: #000;
    text-decoration: none;
    font-weight: 700;
}

.news-list-view .header h3 a:hover {
    color: #FFD200;
}

.news-list-date {
    color: #000;
    font-weight: 700;
}

.news-list-view .more {
    color: #4E467A;
    font-weight: 700;
    text-decoration: none;
}

.news-list-view .more:hover {
    color: #FFD200;
}

/* Erweiterung desNews Daails mit 3 weiteren Bilder */
.ttg-gallery {
    margin-top: 3rem;
}

.ttg-gallery h3 {
    color: #4E467A;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.ttg-gallery-item {
    text-align: center;
}

.ttg-gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.ttg-gallery-item img:hover {
    transform: scale(1.03);
}

.ttg-gallery-caption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    min-height: 2.8em;
    text-align: center;
}

/* Tablet */
@media (max-width: 991px) {
    .ttg-gallery .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Smartphone */
@media (max-width: 576px) {
    .ttg-gallery .row {
        grid-template-columns: 1fr;
    }
}

/* ENDE der Galery in den Detailseiten */

.ttg-gallery {
    max-width: 100%;
}

.ttg-gallery .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ttg-gallery .col-md-4 {
    flex: 0 0 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
}


/* ======================================
   TTGBMS News Card
====================================== */

.ttg-news-card {
    background: #f3f0f6;
    border: 1px solid #d8d8d8;
    border-radius: 16px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    height: 100%;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: all .25s ease;
}

.ttg-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

.ttg-news-card-header {
    background: #4E467A;
    color: #fff;

    padding: 1rem 1.5rem;

    font-size: 1.1rem;
    font-weight: 700;
}

.ttg-news-card-accent {
    height: 6px;
    background: var(--ttg-yellow);
}

.ttg-news-card-body {
    padding: 1.5rem;
}

.ttg-news-card .header h1 {
    color: #4E467A;
    font-weight: 700;
    margin-bottom: .5rem;
}

.ttg-news-card .footer {
    margin-bottom: 1.5rem;
    color: #666;
}

.news-single .news-date {
    color: #666;
    font-size: 0.9rem;
}

.ttg-gallery-item img {
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.news-single h1 {
    color: #4E467A;
    font-weight: 700;
}
.news-single .news-list-date,
.news-single time {
    color: #6c757d;
    font-weight: 500;
}


main {
    padding-top: 2rem;
    padding-bottom: 2.1rem;
}

.section.section-default {
    background-color: #F3F2F8;
}

/* ==========================================================
   TTGBMS Download Card
========================================================== */
.ttg-downloadcard {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    margin-bottom: 1.5rem;
    margin: 2rem 2rem;
    padding: 0;
}

.ttg-downloadcard-header {
    background: var(--ttg-purple);
    color: #fff;
    font-weight: 700;
    padding: 1rem 1.5rem;
}

.ttg-downloadcard-accent {
    height: 6px;
    background: var(--ttg-yellow);
}

.ttg-downloadcard-body {
    padding: 1.5rem;
}

.ttg-downloadcard-footer {
    margin-top: 1rem;
}

.ttg-downloadcard + .ttg-downloadcard {
    margin-top: 1.5rem;
}

.ttg-downloadcard-meta {
    display: flex;
    align-items: center;
    gap: .5rem;

    font-size: .9rem;
    font-weight: 600;
    color: #666;

    margin-bottom: 1rem;
}


.ttg-downloadcard-footer {
    margin-top: 1rem;
}

.ttg-downloadcard-footer .ttg-news-link i {
    margin-right: .4rem;
}

/* ==========================================================
   TTGBMS Download Card ENDE
========================================================== */

/* =====================================
   TTG Page Header
   ===================================== */

.ttg-pageheader {
    margin: 2rem 0 3rem 0;
}

.ttg-pageheader-header {
    background: var(--ttg-purple);

    color: #fff;
    text-align: center;
    font-weight: 700;

    padding: 1rem;
    font-size: 1.6rem;
}

.ttg-pageheader-accent {
    height: 6px;
    background: var(--ttg-yellow);
}

.ttg-pageheader-body {
    padding: 1.5rem 0;
}

.ttg-pageheader-teaser {
    text-align: center;

    max-width: 900px;
    margin: 0 auto;

    font-size: 1.15rem;
    line-height: 1.7;
    color: #555;
    font-weight: 400;
}

.ttg-pageheader {
    margin: 0 0 3rem 0;
}

/* =====================================
   TTG Page Header ENDE
   ===================================== */



/* ==========================================================
   TTGBMS Grid 3 Col
========================================================== */
.ttg-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.ttg-grid3 {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 992px) {
    .ttg-grid3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ttg-grid3 {
        grid-template-columns: 1fr;
    }
}



/* ==========================================================
   TTGBMS Grid 3 Col ENDE
========================================================== */


/* News Archiv - überschreibung wegen spezifizität  */

.news-list-view .ttg-news-list-title a {
    color: #000 !important;
    text-decoration: none;
}

.news-list-view .ttg-news-list-title a:hover {
    color: var(--ttg-purple) !important;
}