/* ==== BUTTONS / CTA ==== */

/*Base-Styling Buttons */
.btn {
    display: inline-flex; 
    padding: .7rem 2rem;
    align-items: center;
    text-align: center;
    text-decoration: none;
    font-weight: var(--font-regular); 
    line-height: 1; 
    cursor: pointer;
    border-radius: var(--radius); 
    transition: all 0.3s ease; 
    border: 2px solid transparent; 
}


/* --- BUTTON 1: PRIMÄR / DUNKELBLAU --- */
.btn-1 {
    background-color: var(--primary-1);
    color: var(--white); 
}


.btn-1:hover,
.btn-1:focus {

    background-color: var(--secondary-3); 
    box-shadow: 0 4px 10px var(--shadow); 
    transform: translateY(-1px);
}
/* --- BUTTON 2: SEKUNDÄR / WEISS MIT BLAUEM RAND --- */
.btn-2 {
    background-color: var(--white);
    color: var(--primary-2);
    border-color: var(--primary-1); 
}
.btn-2:hover,
.btn-2:focus {
    /* Hover: Hintergrund wird Hellblau, Schrift wird Dunkelblau */
    background-color: var(--primary-3-light);
    color: var(--primary-1); /* Dunkelblaue Schrift */
    border-color: var(--primary-3); 
    box-shadow: 0 2px 5px rgba(31, 55, 104, 0.1); 
    transform: translateY(-1px);
}

/* --- BUTTON 3: SEKUNDÄR / HELLBLAU --- */

.btn-3 {
    background-color: var(--primary-3);
    color: var(--white); 
}

.btn-3:hover,
.btn-3:focus {

    background-color: var(--secondary-3); 
    box-shadow: 0 4px 10px var(--shadow); 
    transform: translateY(-1px);
}

/* Vorangestelle Icons */

.before{
    position: relative;    /* Ohne das fliegt das Icon irgendwo auf der Seite herum */
    padding-left: 30px;   /* Platz für das Icon */
    display: block;        /* Sicherstellen, dass es kein Inline-Element ist */
}

.before::before {
    content: ""; /* Muss vorhanden sein! */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block; /* WICHTIG */
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.address::before{background-image: url('../images/icons/map-pin_icon.svg');}
.phone::before{background-image: url('../images/icons/phone_icon.svg');}
.opening::before{background-image: url('../images/icons/clock_icon.svg');}
.phone-white::before{background-image: url('../images/icons/phone_white_icon.svg');}
.mail::before{background-image: url('../images/icons/mail_icon.svg');}



/* === HEader === */
.highlight{
    color:var(--primary-3);
}


/* === HERO-Sektion ==*/
.hero-content{
    margin-bottom: 1rem;
}

.hero-buttons{
    justify-content: space-evenly;

}


/* ==== Vorteile === */


.vorteile-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: .5rem;
    margin-top: 2rem;
   
}

.vorteile-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    text-align: left;
     padding: var(--padding-16-32);
    border: 1px solid var(--primary-2-light);
    border-radius: var(--radius);
    height: 100%;
    background-color: var(--white);
}

.vorteile-card:last-of-type,
.vorteile-card:last-of-type h3{
    border: none;
    background-color: var(--primary-1);
    color: var(--white);
}


.vorteile-card:hover,
.vorteile-card:focus
{

    box-shadow: 0 4px 10px var(--shadow-blue); 
    transform: translateY(-1px);
}

.vorteile-card h3 {
    display: block;
    margin-top: 0;

    margin-block-start: 0;
    font-weight: var(--font-semibold);
    margin-top: 1rem;}

    .vorteil-icon{
    width: auto; 
    height: 3rem;
    margin-bottom: 1rem;
    display: block;
}

/* === Bildungsangebote Kurzübersicht === */

.bildungsangebot_card-grid {
    display: grid;
    /* Auf Desktop 3 Spalten (wie bei den Standorten gewünscht) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.bildungsangebot_card {
    position: relative; /* Wichtig für den Stretched Link */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: 1px solid var(--primary-2-light);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    /* max-height: 20rem; <- Entfernt, falls der Text mal länger ist, sonst schneidet es ab */
    background-color: var(--white);
    /* Keine Transition für Schatten/Transform nötig, da wir sie nicht mehr nutzen */
}

/* Hover-Logik: Nur die Link-Farbe und der Pfeil reagieren */
.bildungsangebot_card:hover .card-link {
    color: var(--primary-3); 
    transform: translateX(5px);
}

.bildungsangebot_card-icon {
    width: 100%;
    height: 180px; /* Feste Höhe für die Bilder */
    object-fit: cover;
    object-position: center;
    display: block;
}

.bildungsangebot_card h3,
.bildungsangebot_card p,
.bildungsangebot_card .bildungsangebot_card_btn {
    padding-left: var(--padding-8-16);
    padding-right: var(--padding-8-16);
}

.bildungsangebot_card h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.bildungsangebot_card p {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.bildungsangebot_card .bildungsangebot_card_btn {
    padding-bottom: 1.5rem;
    margin-top: auto; /* Schiebt den Link immer an den unteren Rand */
}
.card-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    color: var(--primary-1);
    transition: all 0.3s ease;
}

.main-link .stretched-link { /* Dient nur dazzu das die gesammte karte klickbar ist */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* Das Span braucht keinen Inhalt, es dient nur als Fläche */
}



/*=== CTA-small ===*/

.cta_small{
    color: var(--white);
    background-color: var(--primary-1);
    margin-top: 2rem;
    padding-top: var(--padding-16-32);
    padding-bottom:var(--padding-16-32);
    border-radius: var(--radius);
    text-align: center;



 .cta_small-buttons{
    margin-top: 1rem;
    gap: 1rem;
    justify-content: center;
 }
}
.cta_small-buttons .btn{
    align-items: center;
    justify-content: center;
}
.cta_small-buttons a{
    padding-left: 3rem;
    align-content: center;
}
.cta_small-buttons .btn::before{
    margin-left: 1rem;
}


/* == Standorte ==*/ 
.standort_card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2rem;
   
}
    .standort_card,
    .standort_card_last{
     display: flex;
    flex-direction: column;

    flex: 1 1 calc(33% - 1.5rem);
    min-height: 300px;

    padding:var(--padding-8-16);
    border-radius: var(--radius);
    border: 1px solid var(--primary-2-light);
    transition: all 0.3s ease;
    background-color: var(--white);

    display: flex;
    flex-direction: column;
}

.standort_card:hover,
.standort_card:focus
{

      box-shadow: 0 4px 10px var(--shadow); 
    transform: translateY(-1px);
    
}

.standort-info {
    position: relative;
    padding-left: 2rem; /* Platz für das Icon links */
}

.standort_card_last {
    flex-grow: 1;
    background-color: var(--primary-3-light);
    border: none;
    color: var(--primary-1);
    font-size: var(--font-h3);
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: 200px;     /* Damit sie eine schöne Präsenz hat */
}

.icon-wrapper{
    background-color: var(--white);
    padding: 1rem 2rem 1rem 2rem;
    border-radius: 100%;
}

.icon-wrapper svg {
    width: 4rem;
    height: 100%;
}

/*=== AKTUELLE TERMINE ==*/

.termine_card-grid{
    margin-top: 2rem;
}
.termine_card{
    margin-bottom: 0.5rem;
    position: relative;
    border: 1px solid var(--primary-2-light);
    border-radius: var(--radius);
    height: auto;
    background-color: var(--white);
}
.termine-badge{
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 6px 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff; /* Weißer Text für alle */
    z-index: 10;
    border-radius: var(--radius); /* Schicke abgerundete Ecke unten rechts */
}

/* NEWS = Dunkelblau */
.badge-news {
    background-color: var(--primary-1); 
}

/* TRAINING = Orange */
.badge-training {
    background-color: var(--secondary-1);
}

/* VERANSTALTUNG (Event) = Lila */
.badge-event {
    background-color: var(--secondary-3);
}

.termine_card-icon {
    width: 100%;
    height: 180px; /* Feste Höhe für die Bilder */
    object-fit: cover;
    object-position: center;
    display: block;
    border-top-left-radius:var(--radius);
    border-top-right-radius: var(--radius);
}
.termine-info p {
    margin: 0;           /* Entfernt den Standard-Abstand des p-Tags */
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
}

.termine-info strong {
    font-weight: 700;    /* Sicherstellen, dass fett auch wirklich fett ist */
}

.termine-info em {
    font-style: italic;  /* Kursiv-Styling */
}

.termine_content{
    padding: .5rem;
}

/* 1. Der Bereich für die Details (standardmäßig unsichtbar) */
.termine-details-extra {
    display: none;       /* Wichtig: Startet unsichtbar */
    padding-top: 10px;
    color: var(--text-dark);
}
.termine-details-extra.is-open{
    display: block;
}

/* 2. Styling für den "Mehr erfahren" Button */
.btn-more {
    display:block;
    background: none;    /* Kein Hintergrund wie bei btn-1 */
    border: none;        /* Kein Rahmen */
    color: var(--primary-1);
    font-weight: bold;
    cursor: pointer;
    padding: 0;          /* Kein Padding, soll wie ein Link aussehen */
    text-decoration: underline;
    display:block;
    margin-left: auto;   /* Schiebt den Button nach rechts */
    margin-right: 1.5rem; /* Gleicher Abstand zum Rand wie dein restlicher Text */
    margin-top: 10px;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.btn-more:hover {
    color: var(--primary-3);
    text-decoration: none; /* Unterstreichung weg beim Hover für Feedback */
}

.termin-details{
    background-color: var(--primary-4-light);
   border-left: 8px solid var(--primary-1);
   border-radius: var(--radius);
}

.termin-details{
   padding:var(--padding-8-16);
   margin-top: 1rem;
}
.termine_card .btn-1 {
    display: block;    /* Damit Margin funktioniert */
    width: fit-content; /* Der Button soll nur so breit wie sein Text sein */
    margin-left: auto;  /* Schiebt den Button nach rechts */
    margin-right: 0.5rem;
    margin-top: 1rem;   /* Ein bisschen Abstand nach oben zum Text */
}



/*=== CTA-Gross ===*/


#cta-gross img{
    max-width: 33%;
    max-height: auto;
}

.cta-gross-container{
    text-align: center;
}
.cta-btn{
    display: inline-block; 
    padding: .7rem 2rem;
    font-size: 2.2rem;
    font-weight: var(--font-light);
    line-height: 1; 
    color: var(--primary-2);
    text-align: center;
    text-decoration: none;
    
    cursor: pointer;
    transition: all 0.3s ease; 
    border: 1px solid var(--primary-2); 
}

.cta-btn:hover,
.cta-btn:focus {

    background-color: var(--primary-1); 
    color: var(--white);
    box-shadow: 0 4px 10px var(--shadow); 
    transform: translateY(-1px);
}

/* === FAQ === */
.faq{
        margin-top: 2rem;
}
.faq_fragen{
        margin-top: 2rem;
}
.faq-input {
  display: none;
}

.faq-question {
  display: block;
  padding: 1em;
  color: var(--primary-1);
  font-weight: var(--font-semibold);
  border-top: 2px solid var(--primary-1);
  cursor: pointer;
  position: relative;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 15px;
}
.faq-input:checked ~.faq-question{
      background: var(--primary-4-light);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease;}

.faq-answer-content {
    padding-left: 1rem;
  padding-bottom:2rem;

}

.faq-input:checked ~ .faq-answer {
  max-height: 500px; 
}

.faq-input:checked ~ .faq-question::after {
  content: "−";
}

.faq-answer-content a {
    color: var(--primary-1); 
    font-weight: var(--font-semibold);
    text-decoration: underline; 
    transition: color 0.2s ease-in-out;
}


.faq-answer-content a:hover {
    color: var(--primary-3); 
    transform: translateX(5px);
}






/*=== FOOTER ===*/
footer,
footer h4{
    background-color: var(--primary-2);

    color: var(--white);
}

.footer-bottom{
    border-top:1px solid var(--white);
}




/*=== MEDIAQUERRY ===*/

/* Ab Tablet/Desktop: 3 Spalten */
@media (min-width: 768px) {
.hero {
        display: grid;
        grid-template-columns: 4fr 6fr;
        /* Sorgt dafür, dass die Kinder (Bilder/Text) gleich hoch sind */
        align-items: stretch; 
    }

    .hero-img {
        height: 100%;
        width: auto;
        overflow: hidden;
        border-radius: var(--radius);
    }

    /* Die Figure muss ebenfalls 100% hoch sein */
    .hero-img figure {
        height: 100%;
        width: 100%;
        margin: 0; /* Entfernt Browser-Standardabstände */
    }

    /* Das Bild ist das Element, das "cover" benötigt */
    .hero-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* Verhindert kleine Abstände unter dem Bild */
    }


    .vorteile-grid,
    .bildungsangebot_card-grid,
    .standort_card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .bildungsangebot_card{
        max-height: 100%;
    }
    .bildungsangebot_card-icon{
        max-height: 30%;
}
    

    .termine_card-grid {
        display: grid;

        grid-template-columns: repeat(2, 1fr); /*2-Spalten Layput */
        gap: 1rem;
    }

    /* Erste Karte in voller Breite */
    .termine_card:first-child {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: 1fr 2fr; 
    }

    /* Weitere Karten halbe Breite */
    .termine_card:not(:first-child) {
        grid-column: span 1;
        display: flex;
        flex-direction: column;
    }

    .termine_card:first-child .termine-details-extra {
        display: block !important; /* Immer offen */
    }
    .termine_card:first-child .btn-more {
        display: none !important;
    }

    .termine_card:not(:first-child) .termine-details-extra {
        display: none; /* Standardmäßig zu */
    }
    .termine_card:not(:first-child) .termine-details-extra.is-open {
        display: block !important;
    }

    .termine_card:not(:first-child) .btn-more {
        display: block;
    }

    .termine_card-icon{
            height: 100%;
        object-fit: cover;
        overflow: hidden;
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--radius);
    }
    .termine_content{
        padding: 1rem;
        padding-left: 2rem;
    }



}