html {
    scroll-behavior: smooth;
    /* Höhe deines Menübands + extra Puffer (z.B. 80px Menü + 20px Puffer) */
    scroll-padding-top: 85px; 
}

/* Container als Basis für alle Sektionen */
.container {
    max-width: 1100px; /* Oder dein individueller Wert */
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Anpassung der Sektionen */
section {
    padding: 80px 0;   /* Vertikaler Abstand zwischen Sektionen */
}

/* --- BASIS VARIABLEN --- */
:root {
    --vaha-teal: #2c7a7b;
    --vaha-teal-light: #e6fffa;
    --vaha-dark: #1a202c;
    --vaha-gray: #4a5568;
    --vaha-light: #f7fafc;
    --white: #ffffff;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--vaha-dark);
    background-color: var(--white);
    scroll-behavior: smooth;
}

h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
    text-align: left;
}

/* --- NAVIGATION --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 2000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo span {
    color: var(--vaha-teal);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

nav a {
    text-decoration: none;
    color: var(--vaha-dark);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--vaha-teal);
}

.cta-nav {
    background: var(--vaha-teal);
    color: var(--white) !important;
    padding: 8px 18px;
    border-radius: 50px;
}

/* --- HERO SECTION (Home) --- */
/* Gemeinsame Basis für alle Heros */
.hero-vaha { 
    height: 75vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--white); 
    text-align: center;
    
    /* Diese Kombination ist entscheidend */
    background-size: cover;
    background-position: center; /* Zentriert das Bild horizontal und vertikal */
    background-repeat: no-repeat;
}

/* Individuelle Bilder */
.hero-home {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?auto=format&fit=crop&q=80');
    background-size: cover;
    background-position: center center; 
    background-repeat: no-repeat;
}

.hero-about {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('portrait-bg.jpg');
}

.hero-services {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('Bilder/hero.jpg');
	background-size: cover;
	background-position: center 57%;
	background-repeat: no-repeat;
}

.hero-content h1 { font-size: 3.5rem; margin-bottom: 15px; }
.hero-content p { font-size: 1.2rem; margin-bottom: 30px; }

.btn-vaha { 
    display: inline-block;    /* Sorgt dafür, dass der Button nur so breit wie der Inhalt ist */
    width: auto;               /* Verhindert 100% Breite */
    background: var(--vaha-teal); 
    color: var(--white); 
    padding: 10px 20px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: bold; 
    transition: 0.3s;
    border: none;
    text-align: center;
}

.btn-vaha:hover {
    background: #235e5f;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-vaha-white { 
    display: inline-block;    /* Sorgt dafür, dass der Button nur so breit wie der Inhalt ist */
    width: auto;               /* Verhindert 100% Breite */
    background: var(--white); 
    color: var(--vaha-teal); 
    padding: 10px 20px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: bold; 
    transition: 0.3s;
    border: none;
    text-align: center;
}

.btn-vaha-white:hover {
    background: #e9e9e9;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* About-Wrapper auf volle Container-Breite bringen */
.about-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px; /* Erhöhter Abstand für mehr optische Ruhe */
    width: 100%;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 20px; /* Passend zu deinen USP-Boxen */
    box-shadow: var(--shadow); /* Dezenter Schatten für Tiefe */
}

/* Mobile Ansicht: Abstände anpassen */
@media (max-width: 850px) {
    .about-wrapper {
        flex-direction: column;
        gap: 40px;
        padding: 60px 20px;
    }
}

.profile-container {
    position: relative;
    flex: 1;
	width: 100%;
}

.profile-container, .career-text {
    flex: 1;
}

/* Das Bild darf die Spalte nicht künstlich verengen */
.profile-img {
    width: 100%; 
    height: auto;
    object-fit: cover;
    border-radius: 15px;
}

.profile-badge {
    position: absolute;
    bottom: -15px;
    right: -15px;
    background: var(--vaha-teal);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
}

.career-text { flex: 1.5; }
.career-text h2 { text-align: left; margin-bottom: 10px; }
.intro { color: var(--vaha-teal); font-weight: 600; margin-bottom: 25px; }

/* --- GALERIE --- */
.gallery-section { padding: 60px 0; }

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    height: 250px;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gallery-item:hover img { transform: scale(1.1); }
.overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(44, 122, 123, 0.85); color: var(--white);
    padding: 15px; text-align: center;
    transform: translateY(100%); transition: 0.3s;
}
.gallery-item:hover .overlay { transform: translateY(0); }

/* --- KONTAKTFORMULAR --- */
.contact-section { background: var(--vaha-light); padding: 60px 0%; }

.vaha-form { display: flex; flex-direction: column; gap: 15px; }
.form-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #fff;
    /* Verhindert das Standard-Aussehen in manchen Browsern */
    appearance: none; 
    /* Ein dezent Pfeil-Icon als Hintergrund */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%232c7a7b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    cursor: pointer;
}

/* Styling für den Platzhalter im Dropdown */
select.form-input:invalid {
    color: #585858; /* Das gewünschte Grau */
}

/* Sobald eine Auswahl getroffen wurde, wird der Text dunkel */
select.form-input option {
    color: #333; /* Standard-Textfarbe für die echten Optionen */
}

/* Damit "Bitte wählen..." im ausgeklappten Menü nicht auch grau ist */
select.form-input option[value=""] {
    display: none;
}

.form-input:focus {
    outline: none;
    border-color: var(--vaha-teal);
}
.vaha-form input, .vaha-form textarea {
    padding: 15px; border: 1px solid #cbd5e0; border-radius: 8px; font-size: 1rem;
}
.vaha-form input:focus { outline: none; border-color: var(--vaha-teal); }

/* Responsive Fix für Mobilgeräte */
@media (max-width: 850px) {
    .about-wrapper {
        flex-direction: column;
        text-align: center;
    }
}

.vaha-grid-gallery {
    display: grid;
    /* Erzwingt exakt 3 Spalten auf Desktop */
    grid-template-columns: repeat(5, 1fr); 
    gap: 30px; /* Abstand zwischen den Bildern */
    margin-top: 30px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1 / 1; /* Macht die Bilder quadratisch für ein sauberes Grid */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 100%;
    height: 100%;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

/* Mobile Optimierung: 2 Spalten auf Tablet, 1 auf Handy */
@media (max-width: 900px) {
    .vaha-grid-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .vaha-grid-gallery { grid-template-columns: 1fr; }
}

/* Lightbox Hintergrund */
.lightbox {
    display: none; 
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    
    /* Wichtig für die vertikale Stapelung */
    flex-direction: column; 
    justify-content: center;
    align-items: center;
}

/* Schließen-Button */
.close-lightbox {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
}

@keyframes zoomIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#caption {
    margin-top: 0;           /* Direkt am Bild anliegend oder mit kleinem Versatz */
    background: rgba(44, 122, 123, 0.9); /* Original VAHA-Teal mit hoher Deckkraft */
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    width: 40%;              /* Gleiche Breite wie das Bild für Symmetrie */
    max-width: 85%;
    border-bottom-left-radius: 5px;  /* Abrundung passend zum Bild */
    border-bottom-right-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: fadeIn 0.4s ease;
}

/* Kleiner Fix für das Bild, damit es oben keine runden Ecken verliert */
.lightbox-content {
    max-width: 85%;
    max-height: 75%;         /* Etwas mehr Platz für die Unterschrift lassen */
    border-radius: 5px 5px 0 0; /* Nur oben abgerundet, da unten die Caption andockt */
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    user-select: none;
    transition: 0.3s;
    z-index: 2001;
}

.left-arrow { left: 20px; }
.right-arrow { right: 20px; }

.nav-arrow:hover {
    color: var(--vaha-teal);
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

/* Logo Styling */
.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 70px;       /* Justiere diese Höhe, bis es dir gefällt */
    width: auto;        /* Behält das Seitenverhältnis bei */
    display: block;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05); /* Dezenter Effekt beim Drüberfahren */
}

/* Anpassung für mobile Geräte */
@media (max-width: 600px) {
    .logo-img {
        height: 40px;   /* Etwas kleiner auf dem Handy */
    }
}

/* Hero-Anpassung für Unterseiten */
.small-hero {
    height: 40vh !important;
    min-height: 300px;
}

/* Service Box Layout */
.service-box {
    margin-bottom: 40px;
    animation: fadeIn 0.8s ease;
}

.service-text h2 {
    text-align: left;
    color: var(--vaha-teal);
    margin-bottom: 10px;
}

.service-text .intro {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.service-text p {
    margin-bottom: 15px;
    max-width: 800px; /* Bessere Lesbarkeit durch Zeilenbegrenzung */
}

/* Trennlinie im VAHA-Style */
.vaha-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, var(--vaha-teal), transparent);
    margin: 60px 0;
    opacity: 0.3;
}

/* Aktiver Link in der Nav */
nav a.active {
    color: var(--vaha-teal);
    border-bottom: 2px solid var(--vaha-teal);
}

/* Service Item Layout */
.service-item {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px; /* Mehr Platz zwischen den Leistungen */
}

/* Zick-Zack: Jedes zweite Item wird umgekehrt */
.service-item.reverse {
    flex-direction: row-reverse;
}

.service-text {
    flex: 1;
}

.service-image {
    flex: 1;
}

.service-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: var(--shadow);
    display: block;
}

/* Mobile Optimierung: Text und Bild untereinander */
@media (max-width: 850px) {
    /* Alle h2 innerhalb von Sektionen zentrieren */
    h2,h3,p, 
    .service-text h2, 
    .aboutme-header h2 {
        text-align: center !important;
        width: 100%;
        display: block;
    }

    .service-item, .service-item.reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
        text-align: center;
    }
}

.legal-text {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.legal-text h2, .legal-text h3 {
    text-align: left;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--vaha-teal);
}

.legal-text a {
    color: var(--vaha-teal);
    text-decoration: none;
}

.legal-text a:hover {
    text-decoration: underline;
}

/* USP Sektion */
.usp-section {
    background-color: var(--vaha-light);
    padding: 60px 0;
}

.usp-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 50px
}

.usp-box {
    flex: 1;
    background: var(--white);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
    border-top: 4px solid var(--vaha-teal);
}

.usp-box:hover {
    transform: translateY(-10px);
}

.usp-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.usp-box h3 {
    color: var(--vaha-teal);
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.usp-box p {
    color: var(--vaha-gray);
    font-size: 1rem;
    line-height: 1.5;
}

/* Mobile Optimierung */
@media (max-width: 850px) {
    .usp-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .usp-box {
        width: 100%;
        max-width: 400px;
    }
}

.vaha-divider-container {
    background-color: var(--vaha-light); /* Gleicher Hintergrund wie USP für nahtlosen Übergang */
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.section-divider {
    width: 60%;
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--vaha-teal), transparent);
    opacity: 0.4;
}

.contact-info-highlight {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrapped;
}

.info-item {
    background: var(--white);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    border-top: 3px solid var(--vaha-teal);
    transition: transform 0.3s ease;
}

.info-item:hover {
    transform: scale(1.05);
}

.info-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--vaha-gray);
    margin-bottom: 5px;
}

.info-link {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vaha-teal);
    text-decoration: none;
}

/* Mobile Optimierung */
@media (max-width: 600px) {
    .contact-info-highlight {
        flex-direction: column;
        gap: 20px;
    }
}

.contact-header {
    text-align: left;
    margin-bottom: 30px;
}

.contact-header h2 {
    color: var(--vaha-teal);
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-align: left;
}

.contact-header h3 {
    color: var(--vaha-gray);
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 0;
}

.usp-icon-svg {
    color: var(--vaha-teal); /* Deine Markenfarbe */
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease;
}

.usp-box:hover .usp-icon-svg {
    transform: scale(1.1); /* Leichte Animation beim Drüberfahren */
}

.usp-icon-svg svg {
    stroke-width: 1.25px; /* Dünnere Linien wirken oft eleganter */
}

.section-title {
    text-align: left;
    color: var(--vaha-teal);
    font-size: 2.5rem;
    margin-bottom: 0px;
}

/* Den Wrapper auf die volle Container-Breite zwingen */
.about-wrapper-three-cols {
    display: flex;
    width: 100%;
    max-width: 100%; /* Verhindert ungewollte Einrückungen */
    justify-content: space-between;
    align-items: stretch; /* Bringt alle Spalten auf gleiche Höhe */
    gap: 50px;
    margin: 40px 0;
    box-sizing: border-box;
}

/* Jede Spalte erhält exakt ein Drittel des Platzes */
.col-left, .col-middle, .col-right {
    flex: 1 1 0px; /* Erzwingt gleiche Basisbreite */
    width: 100%;
}

.col-middle h3, .col-right h3 {
    color: var(--vaha-teal);
    font-size: 1.4rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--vaha-light);
    padding-bottom: 10px;
}

.career-list {
    list-style: none;
	width: 100%;
    margin: 0;
    padding: 0;
}

.career-list li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    line-height: 1.4;
}

.career-list li::before {
    content: "●";
    color: var(--vaha-teal);
    position: absolute;
    left: 0;
    font-size: 0.8rem;
    top: 2px;
}

/* Mobile Optimierung */
@media (max-width: 900px) {
    .about-wrapper-three-cols {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .career-list li {
        padding-left: 0;
    }
    
    .career-list li::before {
        display: none;
    }
}

.course-alert-badge {
    background-color: var(--vaha-teal);
    color: white;
    padding: 12px 0;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1000; /* Sicherstellen, dass es über allem liegt */
}

.course-alert-badge strong {
    text-transform: uppercase;
    margin-right: 5px;
}

.badge-link {
    color: white;
    text-decoration: underline;
    font-weight: 700;
    margin-left: 15px;
    transition: opacity 0.3s ease;
}

.badge-link:hover {
    opacity: 0.8;
}

.badge-icon {
    margin-right: 8px;
}

.course-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.course-card {
    background: var(--white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 4px solid var(--vaha-teal);
    flex: 1;
    min-width: 300px;
    max-width: 350px;
}

.course-card h3 {
    color: var(--vaha-teal);
    margin-bottom: 15px;
}

.course-card p {
    margin: 8px 0;
    font-size: 1.1rem;
}

.course-status {
    display: inline-block;
    margin-top: 15px;
    padding: 5px 12px;
    background: var(--vaha-light);
    color: var(--vaha-teal);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.course-details {
    background: var(--vaha-light);
    padding: 60px 0;
    width: 100%;
}

.course-details .section-title {
    margin-bottom: 60px; /* Genügend Platz zur Überschrift */
}

.table-heading {
    color: var(--vaha-teal);
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.vaha-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.vaha-table th, .vaha-table td {
    padding: 18px 25px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.vaha-table th {
    background-color: var(--vaha-teal);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.vaha-table tr:last-child td {
    border-bottom: none;
}

.vaha-table tr:hover {
    background-color: #f9f9f9; /* Dezenter Hover-Effekt */
}

.storno-box {
    margin-top: 50px;
    background: #fff5f5; /* Ganz sanftes Rot für Aufmerksamkeit */
    border-left: 5px solid #e53e3e; /* Kräftige Signalfarbe links */
    padding: 30px;
    border-radius: 12px;
}

.storno-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.storno-icon {
    font-size: 2rem;
}

.storno-text h3 {
    color: #c53030;
    margin-top: 0;
    margin-bottom: 10px;
}

.storno-text p {
    margin: 0 0 10px 0;
    line-height: 1.6;
    color: #4a5568;
}

.storno-highlight {
    font-weight: 700;
    color: #2d3748;
}

/* Mobile Ansicht */
@media (max-width: 600px) {
    .storno-content {
        flex-direction: column;
        text-align: center;
    }
    .storno-icon {
        margin: 0 auto 10px;
    }
}

.aboutme-header {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Zwingt Flex-Inhalte nach links */
}

.aboutme-header h2 {
    color: var(--vaha-teal);
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-align: left; /* Überschreibt globale Zentrierungen */
    width: 100%;
}

.aboutme-header h3 {
    color: var(--vaha-gray);
    font-size: 1.2rem;
    font-weight: 400;
    text-align: left; /* Sicherungskopie für Unterüberschrift */
    width: 100%;
}

.price-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.price-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.price-tag.trial {
    background-color: var(--vaha-light);
    color: var(--vaha-teal);
    border: 1px solid var(--vaha-teal);
}

.price-tag.bundle {
    background-color: #f1f5f9;
    color: #475569;
}

.price-tag.bundle-small {
    font-size: 0.8rem;
    color: var(--vaha-gray);
}


.course-card:hover {
    transform: translateY(-5px);
}

.course-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.course-icon-svg {
    color: var(--vaha-teal);
    background: var(--vaha-light);
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-card h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--vaha-teal);
}

.info-group {
    margin-bottom: 15px;
}

.location-text {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 400;
}

.location-text.bundle {
    background-color: #f1f5f9;
    color: #475569;
}

.course-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.course-status-badge {
    background: #f8fafc;
    color: #64748b;
    font-size: 1rem;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

/* --- OPTIMIERTE MOBILE ANSICHT (Unter 850px) --- */
@media (max-width: 850px) {
    /* Navigation & Logo */
    nav {
        flex-direction: column;
        padding: 15px 20px;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 15px;
        text-align: center;
    }

    nav a {
        display: block;
        padding: 10px;
        background: var(--vaha-light);
        border-radius: 8px;
    }

    /* Hero Sektion */
    .hero-content h1 {
        font-size: 2.2rem;
    }

    /* Über mich & Services (Zick-Zack Fix) */
    .about-wrapper, 
    .about-wrapper-three-cols,
    .service-item, 
    .service-item.reverse {
        flex-direction: column !important;
        text-align: center;
        gap: 30px;
    }

    .col-left, .col-middle, .col-right,
    .service-text, .service-image {
        width: 100%;
        flex: none;
    }

    .form-group {
        grid-template-columns: 1fr; /* Vorname/Nachname untereinander */
    }

    /* Kurs-Karten */
    .course-grid {
        flex-direction: column;
        align-items: center;
    }

    .course-card {
        width: 100%;
        max-width: 100%;
    }

    /* Tabellen-Scroll-Fix (verhindert das Zerschießen des Layouts) */
    .vaha-table {
        display: block; 
        overflow-x: auto;
        white-space: nowrap;
    }

    .vaha-table th, .vaha-table td {
        padding: 12px 15px;
        font-size: 0.9rem;
    }

    /* Verhindert Zeilenumbrüche innerhalb der Preis-Badges */
    .price-tag {
        white-space: nowrap;
        display: inline-block;
    }

    .gallery-item {
        height: auto; /* Hebt feste Höhen auf */
        aspect-ratio: 1 / 1; /* Hält das quadratische Format mobil bei */
        width: 100%;
    }
    .h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
    text-align: left;
    }
    .contact-info-highlight {
    flex-direction: column;
    gap: 20px;
    }
}



/* Spezifisch für sehr kleine Handys (Unter 480px) */
@media (max-width: 480px) {
    section {
        padding: 40px 0;
    }

    .hero-vaha {
        height: 60vh;
    }

    .btn-vaha {
        width: 100%;
        padding: 12px 20px;
    }
    .btn-vaha-white {
    width: 100%;
    padding: 12px 20px;
    }
}

@media (max-width: 850px) {
    .btn-vaha {
        width: auto; /* Oder width: fit-content; */
        display: inline-block;
        margin: 0 auto; /* Zentriert den Button, falls das Elternelement text-align: center hat */
    }
    .btn-vaha-white {
    width: auto; /* Oder width: fit-content; */
    display: inline-block;
    margin: 0 auto; /* Zentriert den Button, falls das Elternelement text-align: center hat */
    }
}

/* --- BURGER MENU LOGIK --- */
.menu-toggle {
    display: none; /* Desktop: versteckt */
    align-items: center;
    gap: 12px;
    cursor: pointer;
    z-index: 2001;
}

.menu-text {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--vaha-teal);
    letter-spacing: 1px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--vaha-teal);
    margin: 5px 0;
    transition: 0.3s;
    border-radius: 3px;
}

@media (max-width: 850px) {
    .menu-toggle {
        display: flex; /* Mobil: sichtbar */
        z-index: 3001;
    }

    .nav-links {
        position: fixed;
        right: -100%;
        top: 0;
        flex-direction: column;
        background: var(--white);
        width: 80%; /* Menü nimmt 80% der Breite ein */
        height: 100vh;
        justify-content: center;
        align-items: center;
        transition: 0.4s ease-in-out;
        box-shadow: -10px 0 30px rgba(0,0,0,0.1);
        z-index: 3000;
    }

    .nav-links.active {
        right: 0; /* Menü fährt von rechts ein */
    }

    .nav-links li {
        margin: 20px 0;
    }

    /* Animation zum X */
    .menu-toggle.active .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .menu-toggle.active .hamburger span:nth-child(2) { opacity: 0; }
    .menu-toggle.active .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -7px); }
}