* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Weiches Scrollen bei Klick auf Anker-Links */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #444;
    background-color: #fcfcfc;
    line-height: 1.8;
}

.hero {
    background: linear-gradient(135deg, #f8eddc 0%, #ecc08d 100%);
    padding: 80px 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.hero h1 {
    font-size: 2.8rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* Übersicht */
.services-wrapper {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.service-box {
    background: #fff;
    flex: 1;
    min-width: 300px;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    border-top: 5px solid transparent;
}

.coaching { border-top-color: #3498db; }
.therapie { border-top-color: #27ae60; }

.header-icon { font-size: 3.5rem; margin-bottom: 20px; }
h2 { font-size: 2rem; color: #333; margin-bottom: 15px; }
.subtitle { font-style: italic; color: #7f8c8d; margin-bottom: 25px; }

.service-list { list-style: none; margin-bottom: 30px; text-align: left; }
.service-list li { padding: 8px 0; border-bottom: 1px dashed #eee; }
.service-list li::before { content: "✓ "; color: #27ae60; font-weight: bold; }

.btn {
    display: inline-block;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s;
    font-weight: bold;
    color: white;
}
.coaching .btn { background: #3498db; }
.therapie .btn { background: #27ae60; }
.btn:hover { transform: scale(1.05); opacity: 0.9; }

/* Detail-Sektionen */
.detail-section {
    padding-top: 60px;
    margin-top: 40px;
}

.content-card {
    background: #fff;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 50px;
}

.coaching-card h2 { border-left: 5px solid #3498db; padding-left: 15px; }
.therapie-card h2 { border-left: 5px solid #27ae60; padding-left: 15px; }

.content-card h3 { margin: 30px 0 10px 0; color: #2c3e50; }
.intro-text { font-size: 1.1rem; color: #555; margin-bottom: 30px; }

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.info-item { background: #f9fbfc; padding: 20px; border-radius: 8px; border: 1px solid #eef2f7; }
.info-item h4 { color: #3498db; margin-bottom: 8px; }

.highlight-box {
    background: #f0f9f4;
    padding: 20px;
    border-left: 4px solid #27ae60;
    margin-top: 25px;
}

/* Container für Text und Bild */
.badge-container {
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    gap: 20px;           /* Abstand zwischen Text und Bild */
    background: #e8f4fd;
    padding: 15px 25px;
    border-radius: 8px;
    margin-top: 25px;
    display: inline-flex; /* Damit der Container nur so breit wie der Inhalt ist */
    flex-wrap: wrap;      /* Für Mobilgeräte */
}

.badge-text {
    color: #2980b9;
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0;           /* Entfernt Standard-Abstände */
    line-height: 1.4;
}

.badge-logo {
    height: 100px;        /* Hier kannst du die Größe des Logos anpassen */
    width: auto;
    object-fit: contain;
}

/* Optimierung für kleine Bildschirme */
@media (max-width: 600px) {
    .badge-container {
        justify-content: center;
        text-align: center;
    }
}

.divider { border: 0; border-top: 1px solid #eee; margin: 40px 0; }

footer { text-align: center; padding: 40px; color: #999; }