/* --- ALLGEMEINE STILE (für die ganze Webseite) --- */
h2 {color: #333333 !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: 1.5px !important;}
h3 {color: #D9006C !important;}
h4 {color: #333333 !important;}
a {color: #D9006C !important;}

/* --- GLOBALES KACHEL-DESIGN (für Homepage, Kursseiten etc.) --- */
.kachel-container {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
.kachel {flex: 0 1 300px; background-color: #FFFFFF; padding: 1.5em; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;}
.kachel h3 {min-height: 72px; display: flex; align-items: center; justify-content: center;}

/* --- NEU: Macht die gesamte Kurs-Kachel klickbar --- */
.kachel .kachel-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* --- ZUSATZ FÜR KOMPAKTERE KACHELN --- */
/* Diese Klasse reduziert die Abstände für spezifische Boxen */
.kachel-kompakt {
    padding: 1.2em;
}
.kachel-kompakt h3 {
    margin-bottom: 0.5em;
    min-height: auto !important; /* DIESE ZEILE IST NEU UND ENTSCHEIDEND */
}
.kachel-kompakt p {
    margin-top: 0;
}
.kachel-kompakt .termin-zeit {
    margin-top: 0.5em;
    margin-bottom: 0.2em;
}

/* --- STILE FÜR INHALTSELEMENTE (z.B. Testimonials) --- */
.kachel blockquote p {
    line-height: 1.6; /* Erhöht den Zeilenabstand für bessere Lesbarkeit */
}

/* --- STILE FÜR INFO-BOX ("Auf einen Blick") --- */
.info-box {background-color: #f7f7f7; padding: 1.5em; border-radius: 8px; margin: 2em 0; border: 1px solid #e0e0e0;}
.info-box h3 {margin-top: 0 !important; color: #333333 !important; text-align: center;}
.info-box ul {list-style: none; padding-left: 0; text-align: center; font-size: 16px; margin-bottom: 0;}
.info-box li {display: flex; align-items: center; justify-content: center; margin-bottom: 0.7em;}
.info-box li:last-child {margin-bottom: 0;}
.info-box img {width: 18px; height: 18px; vertical-align: middle; margin-right: 8px;}

/* --- SPEZIFISCHE STILE NUR FÜR DIE PREISSEITE --- */
#nk-preis-container .accordion {background-color: #D9006C; color: #FFFFFF; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 1.2em; font-weight: bold; transition: 0.4s; margin-top: 10px; border-radius: 5px;}
#nk-preis-container .active, #nk-preis-container .accordion:hover {background-color: #b30059;}
#nk-preis-container .accordion:after {content: '\002B'; color: #FFFFFF; font-weight: bold; float: right; margin-left: 5px;}
#nk-preis-container .active:after {content: "\2212";}
#nk-preis-container .panel {padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;}
#nk-preis-container .preiskarten-container {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 2em 0;}
#nk-preis-container .preiskarte {flex: 0 1 280px; background-color: #FFFFFF; padding: 1.5em; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;}
#nk-preis-container .preiskarte h3 {margin-top: 0;}
#nk-preis-container .preiskarte .preis {font-size: 2.5em; font-weight: bold; color: #D9006C; margin: 0.5em 0;}
#nk-preis-container .preiskarte .notiz {color: #666;}
#nk-preis-container .preiskarte .notiz-klein {text-align: center; margin-top: 1em; padding-bottom: 1em; color: #555;}
#nk-preis-container .preiskarte.schnupper-karte {border: 2px solid #28a745;}
#nk-preis-container .preiskarte.schnupper-karte .preis {color: #28a745;}
#nk-preis-container .preiskarte.bestseller-karte {border: 2px solid #D9006C;}
#nk-preis-container .bester-preis-banderole {position: absolute; top: 12px; right: -28px; background: #28a745; color: white; padding: 5px 30px; transform: rotate(45deg); font-size: 0.8em; font-weight: bold;}
#nk-preis-container .kachel-button {display: inline-block; color: #FFFFFF !important; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; margin-top: 1.5em;}
#nk-preis-container .kachel-button.gruen {background-color: #28a745;}
#nk-preis-container .kachel-button.pink {background-color: #D9006C;}

/* --- STILE FÜR "SO STARTEST DU"-SEKTION --- */
.schritt-box {background-color: #FFFFFF; padding: 1.5em; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-top: 1.5em;}
.schritt-box h3 {margin-top: 0; color: #333333 !important; display: flex; align-items: center; font-size: 1.3em;}
.schritt-box .nummer {color: white; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 1em; font-weight: bold; margin-right: 15px; flex-shrink: 0;}
.schritt-box .schritt-titel {flex: 1;}
.schritt-box .nummer.gruen { background-color: #28a745; }
.schritt-box .nummer.pink { background-color: #D9006C; }
.schritt-box .nummer.dunkel { background-color: #333; }