/* === CSS Variables & Theme Setup === */
:root {
    /* Dark Theme (Default) */
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --text-muted: #cbd5e1;
    --primary-color: #b81d18;
    --primary-hover: #8f1612;
    --secondary-color: rgba(255, 255, 255, 0.1);
    --secondary-hover: rgba(255, 255, 255, 0.2);
    
    /* Glassmorphism Variables */
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --card-bg: rgba(30, 41, 59, 0.7);
    
    --nav-height: 100px;
    --transition: all 0.3s ease;
}

[data-theme="light"] {
    --bg-color: #f8fafc;
    --text-color: #0f172a;
    --text-muted: #475569;
    --primary-color: #b81d18;
    --primary-hover: #8f1612;
    --secondary-color: rgba(0, 0, 0, 0.05);
    --secondary-hover: rgba(0, 0, 0, 0.1);
    
    /* Glassmorphism Variables */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --card-bg: rgba(255, 255, 255, 0.8);
}

/* === Reset & Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    background-color: transparent;
    color: var(--text-color);
    transition: color 0.4s ease;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.text-center { text-align: center; }
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === Glassmorphism Utilities === */
.glass-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 24px;
    padding: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* === Buttons === */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: scale(1.05);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
    background-color: var(--secondary-hover);
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.icon-btn:hover {
    background-color: var(--secondary-color);
}

/* === Navigation === */
.nav-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-logo {
    height: 70px;
    width: auto;
    border-radius: 8px; /* In case the logo has a background */
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    font-weight: 600;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    flex-direction: column;
    padding: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

.mobile-menu.active {
    display: flex;
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-link {
    padding: 15px 0;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid var(--glass-border);
}

.mobile-theme-btn {
    margin-top: 15px;
    width: auto;
    border-radius: 20px;
    padding: 10px 20px;
    background-color: var(--secondary-color);
}

/* === Sections General === */
.section {
    padding: 100px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* === Hero Section === */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    overflow: hidden;
}

.hero-bg-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.hero-bg-slideshow .slide {
    animation-play-state: paused;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    /* Hier stand ursprünglich zusätzlich transform: scale(1.15) - gedacht
       als Spielraum für eine Bewegung des Hintergrunds. Die Zeile war
       durch einen Schreibfehler seit jeher unwirksam, das Bild lief also
       nie vergrößert. Bewusst nicht reaktiviert, weil sich sonst das
       Aussehen der Startseite ändern würde. */
    background-position: center;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
}

.hero-bg-slideshow .slide.active {
    opacity: 1;
    animation-play-state: running;
}

/* Unterschiedliche Kamera-Fahrten für jedes Bild */
@keyframes pan1 { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes pan2 { 0% { background-position: 100% 0%; } 100% { background-position: 0% 100%; } }
@keyframes pan3 { 0% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } }
@keyframes pan4 { 0% { background-position: 0% 100%; } 100% { background-position: 100% 0%; } }
@keyframes pan5 { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Die Animation läuft PERMANENT im Hintergrund, auch wenn das Bild unsichtbar ist. So kann nichts springen! */
.hero-bg-slideshow .slide:nth-child(1) { animation: pan1 35s linear infinite alternate; }
.hero-bg-slideshow .slide:nth-child(2) { animation: pan2 35s linear infinite alternate; }
.hero-bg-slideshow .slide:nth-child(3) { animation: pan3 35s linear infinite alternate; }
.hero-bg-slideshow .slide:nth-child(4) { animation: pan4 35s linear infinite alternate; }
.hero-bg-slideshow .slide:nth-child(5) { animation: pan5 35s linear infinite alternate; }
.hero-bg-slideshow .slide:nth-child(6) { animation: pan2 35s linear infinite alternate; }

.hero-bg-slideshow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    opacity: 0.6;
    z-index: 1;
    transition: background-color 0.4s ease;
}

.hero-content {
    max-width: 800px;
    width: 100%;
    text-align: center;
    z-index: 1;
    margin-top: var(--nav-height);
}

.hero-glass {
    padding: 60px 40px;
    background: rgba(30, 41, 59, 0.4); /* slightly more transparent for hero */
}

[data-theme="light"] .hero-glass {
    background: rgba(255, 255, 255, 0.6);
}

.badge {
    display: inline-block;
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* === About Section === */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.about-text p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 20px;
}

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

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--secondary-color);
    border-radius: 12px;
}

.feature-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.feature-item span {
    font-weight: 600;
}

/* === Classes Section === */
.classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.class-card {
    display: flex;
    flex-direction: column;
}

.class-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.class-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.class-card p {
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-grow: 1;
}

.class-list li {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--glass-border);
}

.class-list li span {
    font-weight: 800;
    color: var(--primary-color);
    width: 50px;
}

/* === Contact Section === */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;
}

.info-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    background: var(--secondary-color);
    padding: 15px;
    border-radius: 50%;
}

.info-item strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.info-item p, .info-item a {
    color: var(--text-muted);
}

.info-item a:hover {
    color: var(--primary-color);
}

.contact-map {
    padding: 0;
    overflow: hidden;
    min-height: 400px;
}

/* === Footer === */
.footer {
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
    padding: 40px 0;
    margin-top: 60px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 800;
    font-size: 1.2rem;
}

.footer-img {
    height: 30px;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: var(--text-muted);
    font-weight: 600;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.copyright {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* === Responsive === */
@media (max-width: 992px) {
    .hero h1 { font-size: 3rem; }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    .hero h1 { font-size: 2.5rem; }
    .hero-buttons { flex-direction: column; }
    .hero-glass { padding: 40px 20px; }
}

/* === Registration Modal === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.close-modal:hover {
    color: var(--primary-color);
}

.modal-header h2 {
    margin-bottom: 20px;
    text-align: center;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--secondary-color);
    border-radius: 4px;
    margin-bottom: 10px;
    /* Gehörte immer hierher, stand aber durch einen Schreibfehler
       außerhalb der Regel: sorgt dafür, dass der Fortschrittsbalken an
       den abgerundeten Ecken sauber abschneidet. */
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--primary-color);
    width: 33.33%;
    transition: width 0.4s ease;
}

#step-indicator {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.form-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--secondary-color);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group select option,
.form-group select optgroup {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Dark mode inputs override if needed */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    background: #fff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.btn-next, .btn-prev {
    display: flex;
    align-items: center;
    gap: 10px;
}

#submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* === Info Buttons & Info Modal === */
.info-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

[data-theme="light"] .info-btn {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.info-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.info-modal-body {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
    padding: 10px 0;
    max-height: 60vh;
    overflow-y: auto;
}

.privacy-content h2 { margin-top: 30px; margin-bottom: 15px; font-size: 1.5rem; color: var(--primary-color); }
.privacy-content h3 { margin-top: 20px; margin-bottom: 10px; font-size: 1.2rem; }
.privacy-content p, .privacy-content ul, .privacy-content li { line-height: 1.6; font-size: 1.1rem; color: var(--text-color); margin-bottom: 15px; }
.privacy-content ul { margin-left: 20px; }
.privacy-content li { margin-bottom: 8px; }




.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #128C7E;
    color: #FFF;
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 30px;
    }
}



.social-float.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-float.instagram:hover { filter: brightness(1.1); }

.social-float.facebook { background-color: #1877F2; }
.social-float.facebook:hover { background-color: #166FE5; }

@media (max-width: 768px) {
    .social-floats {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    .social-float {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
    .social-float.whatsapp { font-size: 30px; }
}



.social-fab-main {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-color, #e63946);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
}

.social-fab-container:hover .social-fab-main {
    transform: rotate(135deg);
    background: #333;
}

.social-fab-item {
    position: absolute;
    bottom: 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    transform: translateY(0) scale(0.5);
}

.social-fab-container:hover .social-fab-item {
    opacity: 1;
    pointer-events: auto;
}

/* Individual positions on hover */
.social-fab-container:hover .social-fab-item.whatsapp {
    transform: translateY(-70px) scale(1);
}
.social-fab-container:hover .social-fab-item.whatsapp:hover {
    transform: translateY(-70px) scale(1.1);
}

.social-fab-container:hover .social-fab-item.instagram {
    transform: translateY(-130px) scale(1);
}
.social-fab-container:hover .social-fab-item.instagram:hover {
    transform: translateY(-130px) scale(1.1);
}

.social-fab-container:hover .social-fab-item.facebook {
    transform: translateY(-190px) scale(1);
}
.social-fab-container:hover .social-fab-item.facebook:hover {
    transform: translateY(-190px) scale(1.1);
}

.social-fab-item.whatsapp { background-color: #25d366; }
.social-fab-item.whatsapp:hover { background-color: #128C7E; }

.social-fab-item.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-fab-item.instagram:hover { filter: brightness(1.1); }

.social-fab-item.facebook { background-color: #1877F2; }
.social-fab-item.facebook:hover { background-color: #166FE5; }

@media (max-width: 768px) {
    .social-fab-container {
        bottom: 20px;
        right: 20px;
    }
}

/* Floating Social Buttons */
.social-floats {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}
.social-float {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}
.social-float:hover {
    transform: scale(1.1);
    color: #FFF;
}
.social-float.whatsapp { background-color: #25d366; font-size: 35px; }
.social-float.whatsapp:hover { background-color: #128C7E; }

.social-float.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-float.instagram:hover { filter: brightness(1.1); }

.social-float.facebook { background-color: #1877F2; }
.social-float.facebook:hover { background-color: #166FE5; }

@media (max-width: 768px) {
    .social-floats {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    .social-float {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
    .social-float.whatsapp { font-size: 30px; }
}


/* === Mobile Optimizations === */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.2rem;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    .section-title {
        font-size: 1.8rem;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .glass-card {
        padding: 20px;
    }
    
    .hero-glass {
        padding: 30px 20px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem;
    }
}

/* === Google Translate Floating Widget === */
#google_translate_element {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 5px 10px;
    box-shadow: var(--glass-shadow);
}
.goog-te-combo {
    background: transparent;
    color: var(--text-color);
    border: none;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    cursor: pointer;
}
.goog-te-combo option {
    background: var(--bg-color);
    color: var(--text-color);
}
.goog-logo-link {
    display: none !important;
}
.goog-te-gadget {
    color: transparent !important;
    font-size: 0px !important;
}
.goog-te-banner-frame {
    display: none !important;
}
body {
    top: 0 !important;
}
/* === Google Translate Floating Widget === */
#google_translate_element {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background: var(--primary-color);
    border-radius: 30px;
    padding: 8px 15px 8px 15px;
    box-shadow: 0 4px 15px rgba(227, 27, 35, 0.4);
    display: flex;
    align-items: center;
    transition: var(--transition);
    overflow: hidden;
}

#google_translate_element:hover {
    transform: scale(1.05);
}

/* Pseudo element for Globe Icon */
#google_translate_element::before {
    content: '\f0ac';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    font-size: 1.2rem;
    margin-right: 8px;
    pointer-events: none;
}

/* Styling the Google dropdown */
.goog-te-combo {
    background: transparent !important;
    color: white !important;
    border: none !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 20px !important;
    margin: 0 !important;
}

.goog-te-combo option {
    background: var(--bg-color);
    color: var(--text-color);
}

/* Custom Dropdown Arrow */
#google_translate_element::after {
    content: '\f0d7';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    position: absolute;
    right: 15px;
    pointer-events: none;
}

/* Hide annoying google text & logos */
.goog-logo-link, .goog-te-gadget span {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
    font-size: 0px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Absolutely eradicate all Google logos and text */
.goog-te-gadget img,
.goog-logo-link,
.goog-te-gadget span,
.goog-te-gadget a {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.goog-te-gadget {
    color: transparent !important;
    font-size: 0px !important;
}

.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure the background of the translation popup is gone */
iframe.goog-te-banner-frame {
    display: none !important;
}






/* =====================================================================
   Bewertungen
   Es werden ausschliesslich echte, woertlich uebernommene Bewertungen
   angezeigt. Solange keine hinterlegt sind, bleibt das Raster leer und
   es steht nur der Verweis auf das Google-Profil.
   ===================================================================== */
.bewertungen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    /* Alle Karten einer Reihe gleich hoch. Der Text wird per
       "Mehr anzeigen" eingeklappt, steht aber vollstaendig im Quelltext. */
    align-items: stretch;
}

.bewertungen-grid:has(.bewertung) {
    margin-bottom: 40px;
}

.bewertung {
    position: relative;
    margin: 0;
    padding: 25px;
}

.bewertung-kopf {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.bewertung-initial {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2em;
}

.bewertung-name {
    display: block;
    font-weight: 600;
    font-size: 1.05em;
}

.bewertung-sterne {
    display: block;
    margin-top: 3px;
    color: #facc15;
    font-size: 0.9em;
}

.bewertung-quelle {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 1.4em;
    color: #4285F4;
}

.bewertung p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.6;
    font-style: italic;
}

.bewertung p + p {
    margin-top: 0.85em;
}

.bewertung p + p {
    margin-top: 0.85em;
}



/* --- Bewertungen ein- und ausklappen ------------------------------------
   Die Klasse "ist-gekuerzt" setzt erst das Skript. Ohne JavaScript bleibt
   der volle Text sichtbar - nichts wird versteckt, was nicht wieder
   aufklappbar waere. Suchmaschinen sehen ohnehin immer den ganzen Text. */

.bewertung {
    display: flex;
    flex-direction: column;
}

.bewertung-text {
    position: relative;
}

.bewertung.ist-gekuerzt .bewertung-text {
    max-height: 15em;
    overflow: hidden;
}

/* Weicher Auslauf statt harter Kante am unteren Rand */
.bewertung.ist-gekuerzt .bewertung-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.5em;
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0), var(--card-bg));
    pointer-events: none;
}

[data-theme="light"] .bewertung.ist-gekuerzt .bewertung-text::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card-bg));
}

.bewertung-mehr {
    align-self: flex-start;
    margin-top: 14px;
    padding: 4px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92em;
    font-style: normal;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bewertung-mehr:hover {
    text-decoration: underline;
}

.bewertung-mehr:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: 4px;
}

.bewertung-mehr i {
    font-size: 0.8em;
}

/* Herkunftsangabe unter den Bewertungen (Pflicht nach § 5b Abs. 3 UWG) */
.bewertungen-quelle {
    margin: 28px auto 0;
    max-width: 62ch;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.bewertungen-quelle i {
    color: #4285F4;
    margin-right: 6px;
}

.bewertungen-quelle a {
    color: var(--primary-color);
    text-decoration: underline;
}
/* =====================================================================
   Standortkarten
   Bilder vom eigenen Server (aus OpenStreetMap-Kacheln erzeugt). Ein
   Klick öffnet Google Maps in einem neuen Tab - vorher geht keine
   einzige Anfrage nach draußen.
   ===================================================================== */
.contact-map {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Hebt die Altregel weiter oben auf: die stammt aus der Zeit, als hier
       eine Glaskarte mit fester Mindesthoehe stand. Ohne diese Zeilen
       schneidet der Rahmen die leichte Anhebung beim Ueberfahren ab. */
    overflow: visible;
    min-height: 0;
}

.karte-link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.karte-link:hover,
.karte-link:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.karte-link:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.karte-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 460;
    object-fit: cover;
}

.karte-beschriftung {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0));
    color: #fff;
}

.karte-beschriftung > i:first-child {
    font-size: 1.3rem;
    color: #ff5a52;
    flex: 0 0 auto;
}

.karte-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.karte-text strong {
    font-size: 1.05rem;
}

.karte-text span {
    font-size: 0.82rem;
    opacity: 0.85;
}

.karte-beschriftung > i:last-child {
    margin-left: auto;
    font-size: 0.9rem;
    opacity: 0.8;
    flex: 0 0 auto;
}

.karte-quelle {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

@media (max-width: 600px) {
    .karte-text strong { font-size: 0.95rem; }
    .karte-text span   { font-size: 0.75rem; }
}
/* Videos in der Hintergrund-Diaschau.
   Sie legen sich deckungsgleich ueber das Standbild des Platzes - laedt
   das Video nicht, bleibt schlicht das Bild stehen. */
.hero-bg-slideshow .slide video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}