/*
 * ============================================================================
 * LINE DANCE CLUB - COUNTRY MEETS MODERN (STYLESHEET)
 * ============================================================================
 * 
 * @package     ldgroup
 * @module      Design / Styles
 * @component   myStyleNew
 * 
 * @description Generelle Styles. Hier machen wir weiter
 * 
 * @status      In Progress
 * @open        ueberarbeiten, was wird benoetigt, was nicht
 * @ticket      #90
 * @version     1.0.0
 * @created     2026-07-03
 * @last_change 2026-07-03
 * 
 * @export-to-schorsch
 * ============================================================================
 */


/* --- Mobile Optimierung --- */
.ldgroup-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    /* Abstand zum Header */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert den äußeren Scrollbalken komplett */
/*!!! Alt    height: 100vh; */

    /* WICHTIG: flex: 1 zwingt das Layout, den gesamten freien Platz 
       zwischen deinem Menü und dem Footer komplett auszufüllen! */
    flex: 1 0 auto;
    height: calc(100vh - 110px) !important;

    gap: 20px;              /* Abstand zwischen Header und Liste */

}

.ldgroup-layout a {
    color: var(--ldgroup-color-link) !important;
    text-decoration: underline;
}

.ldgroup-layout a:hover {
    color: var(--ldgroup-color-link-hover) !important;
    text-decoration: underline;
}

/* --- Überschrift (Analog zu .flyer-hero im VHS-Kursbuch) --- */
.ldgroup-layout .flyer-hero {
    flex: 0 0 auto;
    background: transparent !important;
    text-align: center;

/*
    padding: 10px 0;
    margin-bottom: 5px;
*/
    margin: 0;
    padding: 0;
}

.ldgroup-layout .flyer-hero h1 {
color: var(--ldgroup-color-dark) !important;
    font-size: 2.5rem;
    margin: 0; /* Wichtig: margin auf 0 setzen, um keine Lücken zu erzeugen */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


/* --- Generelle Anzeigeboxen flexibel deckeln --- */
.ldgroup-layout .box,
.ldgroup-layout .box_welcome,
.ldgroup-layout .box_login,
.ldgroup-layout .box_legal,
.ldgroup-layout .box_search,
.ldgroup-layout .box_error {
    position: relative; /* WICHTIG: Kein absolute, kein top: 50% mehr! */
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
    
    width: 100%;
    max-width: 450px;
    box-sizing: border-box;
    
    background: var(--ldgroup-glass-bg);
    backdrop-filter: var(--ldgroup-glass-blur);
    border: var(--ldgroup-border);
    border-radius: var(--ldgroup-border-radius);
    box-shadow: var(--ldgroup-shadow);
    text-align: center;

    /* NEU: Die Boxen dürfen wachsen, aber niemals das Layout sprengen */
    height: auto;
    max-height: 100% !important; 
    
    display: flex;
    flex-direction: column; /* Bereitet die Boxen auf inneres Scrollen vor */
    overflow: hidden;       /* Verhindert, dass die Glasbox selbst scrollt */
    flex: 0 1 auto;
    padding:20px;

    margin: 0px 0px 20px !important;
}


/* Spezifische Korrektur für Boxen, die noch fest im Raum fixiert waren */
.ldgroup-layout .box_welcome,
.ldgroup-layout .box_error,
.ldgroup-layout .box_error1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    max-height: 100% !important;
    word-wrap: anywhere;
    margin: auto !important;
    animation: ldgroupSlideUp 2s ease-out forwards;

}

/* Das Innere der Login-Box flexibel machen */
.ldgroup-layout .box_legal {
    width: 50% !important;
    max-width:100% !important;
}

/* Der innere, dunklere/hellgraue Block (Analog zur Musik-View) */
.ldgroup-layout .legal_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0px 0px 0px 20px;
    box-sizing: border-box;
    overflow: hidden;
/*    background: var(--ldgroup-glass-bg); */
    border-radius: var(--ldgroup-border-radius);
    border: var(--ldgroup-border);
    background: var(--ldgroup-card-bg) !important; /* Nutzt deine dunkle Kachel-Farbe */
    margin: auto !important;
}
.ldgroup-layout .legal_container h2 {
    text-align: left;
    color: var(--ldgroup-color-light) !important; */
    padding: 0px;
    margin: 10px 0px 10px;}

/* Der scrollbare Bereich innerhalb des Blocks */
.ldgroup-layout .legal_container_content {
    overflow-y: auto;
/*    max-height: 45vh; */
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--ldgroup-color-light) transparent;
    flex-direction: column;
    text-align: left;
}

/* Zwischenüberschriften im inneren Block */
.ldgroup-layout .legal_container_content h3 {
    color: var(--ldgroup-orange) !important; /* Orange hebt sich auf Dunkel super ab */
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

/* Textabsätze im inneren Block (Jetzt in hellem Text für perfekte Lesbarkeit!) */
.ldgroup-layout .legal_container_content p {
    font-weight: 400;
    color: var(--ldgroup-text-light) !important; /* Weißer/heller Text auf dunklem Grund */
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1rem;
}

.ldgroup-layout .legal_container_content p strong {
    color: var(--ldgroup-color-light) !important; */
    font-weight: 800;
}

/* Link-Styling im Text */
.ldgroup-layout .legal_container_content a {
    color: var(--ldgroup-color-link) !important;
    text-decoration: underline !important;
}

.ldgroup-layout .legal_container_content a:hover {
    color: var(--ldgroup-color-link-hover) !important;
}
/* --- Eingabefelder als dunkle Kacheln --- */
.ldgroup-layout .form-group {
    /* background: var(--ld-bg-kachel) !important; */
    border-radius: 6px;
    padding: 15px !important;
    margin-bottom: 20px !important;
    text-align: left;
    display: flex !important;
    flex-direction: column !important;
    background: var(--ldgroup-card-bg) !important;
    border-left: var(--ldgroup-card-border-top) !important;
}

.ldgroup-layout .form-group label {
    color: var(--ldgroup-color-light) !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 5px;
    background: none !important;
}

.ldgroup-layout .form-group input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    width: 100% !important;
    font-size: 1.1rem;
    padding: 5px 0;
    outline: none;
}

/* Fix gegen das gelbe Autocomplete/Aufhellen beim Tippen */
.ldgroup-layout input:-webkit-autofill,
.ldgroup-layout input:-webkit-autofill:hover,
.ldgroup-layout input:-webkit-autofill:focus {
    -webkit-text-fill-color: white !important;
    /* -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset !important; */
    -webkit-box-shadow: 0 0 0px 1000px #5c5a51 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- Globale Checkbox-Styles --- */
.ldgroup-layout .checkbox-group {
    margin: 20px 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ldgroup-layout .checkbox-row {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.ldgroup-layout .checkbox-row input[type="checkbox"] {
    margin: 0 12px 0 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--ldgroup-color-light);
    /* Haken wird orange */
}

.ldgroup-layout .checkbox-row label {
    /* Ein dunkles Anthrazit für maximalen Kontrast auf dem hellen Glas */
    color: var(--ldgroup-color-dark) !important;
    font-size: 0.95rem;
    font-weight: 600;
    /* Etwas dicker für bessere Lesbarkeit */
    cursor: pointer;
    text-transform: none !important;
    user-select: none;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ldgroup-layout .checkbox-row:hover label {
    color: var(--ldgroup-color-light) !important;
    transition: color 0.2s ease;
}

/* --- Button (Kursbuch-Stil: Zurück-Button Look) --- */
.ldgroup-layout button[type="submit"] {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--ldgroup-color-light) !important;
    color: var(--ldgroup-color-light) !important;
    padding: 12px 24px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
    width: fit-content;
    margin: 20px auto 0 auto;
    /* Mittig platziert */
}

.ldgroup-layout button[type="submit"]:hover {
    background: var(--ldgroup-color-light) !important;
    color: white !important;
}

/* --- Footer-Bereich (Links wie Registrieren) --- */
.ldgroup-layout .form-footer {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.ldgroup-layout .form-footer a {
    color: var(--ldgroup-color-light);
    text-decoration: none;
    font-weight: bold;
}

.ldgroup-layout .form-footer a:hover {
    text-decoration: underline;
}

/* --- Fehlermeldungen --- */
.ldgroup-layout .error-msg {
    /* Dein Branding-Orange */
    color: var(--ldgroup-color-error) !important;
    font-weight: 700;
    letter-spacing: 1px;
}



}

/* Hauptüberschrift */
.ldgroup-layout .ldgroup-fade-in {
    font-size: 2.5rem;
    color: #000000;
    margin-bottom: 5px;
}

/* Das kleine "beim" */
.ldgroup-layout .ldgroup-welcome-sub {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333333;
    margin: 5px 0;
}

/* HIGHLIGHT: Line Dance Club in deinem Orange mit dezentem Puls-Effekt */
.ldgroup-layout .ldgroup-brand-highlight {
    font-size: 2.8rem;
    color: var(--ldgroup-orange);
    font-weight: 800;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
/*    animation: ldgroupPulse 3s ease-in-out infinite alternate; */
    animation: ldgroupPulse 3s linear infinite alternate;
}

/* Zusatzbeschreibung (Country Meets Modern) */
.ldgroup-layout .ldgroup-brand-sub {
    font-size: 1.8rem;
    color: #000000;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 20px;
    animation: ldgroupPulse2 3s linear infinite  alternate;
}

/* Eingeloggter Benutzername */
.ldgroup-layout .ldgroup-user-welcome {
    font-size: 2.2rem;
    color: #000000;
    font-weight: 700;
    margin: 15px 0;
}

/* Allgemeine Textabsätze in der Box */
.ldgroup-layout .ldgroup-welcome-text {
    font-size: 1.2rem;
    color: #222222;
    margin: 15px 0;
}

/* CSS für die Login/Register Bereiche innerhalb der Testumgebung */
.ldgroup-layout .ldgroup-action-section {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ldgroup-layout .ldgroup-action-section h2 {
    font-size: 1.4rem;
    color: #000000;
    margin-bottom: 10px;
}


/* --- ANIMATIONEN (Keyframes) --- */

/* Sanftes Hochfahren & Einblenden der Box */
@keyframes ldgroupSlideUp {
    0% {
        opacity: 0;
/*        transform: translateY(30px); */
    }
    100% {
        opacity: 1;
/*        transform: translateY(50%); */
    }
/*    transform: translate(-50%, -50%); */


}

/* Eleganter, ganz feiner Puls-Effekt für das Club-Orange */
@keyframes ldgroupPulsexx {
    0% {
        text-shadow: 0 0 0px rgba(230, 126, 34, 0);
    }
    100% {
        text-shadow: 0 0 8px rgba(230, 126, 34, 0.4); /* Erzeugt ein edles, oranges Leuchten */
    }
}
@keyframes ldgroupPulse {
    0% {
        transform: scale(1);
        color: black;
        text-shadow: 0 0 20px rgba(145, 191, 66, 0.0);
        transform: rotatex(90deg);
    }
    100% {
        transform: scale(1.1); /* Text wird spürbar größer */
        color: var(--ldgroup-orange-hover);
        text-shadow: 0 0 20px rgba(145, 191, 66, 0.5);
        /* text-shadow: 0 0 20px rgba(230, 126, 34, 0.4); Erzeugt ein edles, oranges Leuchten */
        transform: rotatex(0deg);

    }
}
@keyframes ldgroupPulse2 {
    0% {
        transform: scale(1.1); /* Text wird spürbar größer */
        color: var(--ldgroup-orange-hover);
        text-shadow: 0 0 20px rgba(145, 191, 66, 0.5);
        transform: rotatex(0deg);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(145, 191, 66, 0.0);
        color: black;
        transform: rotatex(90deg);

    }
}
    /* --- Animation: Sanftes Blinken (Ein- und Ausblenden) --- */
    @keyframes ldgroupBlinkEffect {
        0% {
            opacity: 1.0; /* Volle Sichtbarkeit */
        }
        50% {
            opacity: 0.1; /* Fast unsichtbar */
        }
        100% {
            opacity: 1.0; /* Wieder voll sichtbar */
        }
    }

    @keyframes ldgroupNeonBlink {
        0%, 100% {
            opacity: 1;
            text-shadow: 0 0 10px var(--ldgroup-orange), 0 0 20px var(--ldgroup-orange);
        }
        45%, 55% {
            opacity: 1;
            text-shadow: 0 0 10px var(--ldgroup-orange), 0 0 20px var(--ldgroup-orange);
        }
        50% {
            opacity: 0.3;
            text-shadow: none; /* Licht geht kurz aus */
        }
    }
    /* --- Die Klasse für deine Überschrift --- */
    .ldgroup-layout .ldgroup-blink {
        color: var(--ldgroup-error) !important;
        text-transform: uppercase;
        font-size: 2.2rem;
        margin-bottom: 5px;
        
        /* Hier aktivieren wir das Blinken: 
        1.5s = Dauer eines Blink-Zyklus
        infinite = unendlich oft wiederholen
        ease-in-out = sanfter Übergang beim Wechsel */
        animation: ldgroupBlinkEffect 2s ease-in-out infinite;
    }
/* --- Die Klasse für deine Überschrift --- */
    .ldgroup-layout .ldgroup-neon-blink {
        color: var(--ldgroup-orange) !important;
        text-transform: uppercase;
        font-size: 2.2rem;
        margin-bottom: 5px;
        
        /* Hier aktivieren wir das Blinken: 
        1.5s = Dauer eines Blink-Zyklus
        infinite = unendlich oft wiederholen
        ease-in-out = sanfter Übergang beim Wechsel */
        /* animation: ldgroupBlinkEffect 2s ease-in-out infinite; */
        animation: ldgroupNeonBlink 2s linear infinite;
    }

    /* --- Ergänzung für das mehrzeilige Textfeld im Kontaktformular --- */
.ldgroup-layout .form-group textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    width: 100% !important;
    font-size: 1.1rem;
    padding: 5px 0;
    outline: none;
    font-family: var(--ldgroup-font-family), sans-serif;
    resize: none; /* Verhindert, dass der User die Box unschön verzieht */
}

/* Fokus-Effekt, wenn man in das Textfeld klickt */
.ldgroup-layout .form-group textarea:focus,
.ldgroup-layout .form-group input:focus {
    border-bottom: 1px solid var(--ldgroup-orange) !important; /* Untere Linie wird beim Tippen orange */
    transition: border-color 0.3s ease;
}
/* --- Styling für den Kontakt-Button im Impressum --- */
/* --- Styling für den Kontakt-Link im Impressum (Exakter Login-Button-Look) --- */
.ldgroup-layout .ldgroup-submit-link-btn {
    display: block !important; /* Zwingt das <a>-Tag sich wie eine Box zu verhalten */
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--ldgroup-color-light) !important;
    color: var(--ldgroup-color-light) !important;
    padding: 12px 24px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s ease;
    width: fit-content;
    margin: 20px auto 0 auto; /* Zentriert den Button exakt wie beim Login-Formular */
    text-decoration: none !important; /* Entfernt das klassische Unterstreichen von Links */
    font-size: 1rem;
}
/* --- Zentrierte Domainliste im Datenschutz --- */
.ldgroup-layout .legal_domains {
    text-align: center !important;
    margin: 20px 0 !important;
}

.ldgroup-layout .legal_domain_item {
    display: block !important; /* Lässt jede Domain in einer neuen Zeile beginnen */
    color: var(--ldgroup-color-link) !important; /* Dein edles Gold/Orange */
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.8; /* Angenehmer Zeilenabstand zwischen den Domains */
    text-align: center !important;
}
/* Hover-Effekt: Exakt wie bei button[type="submit"]:hover */
.ldgroup-layout .ldgroup-submit-link-btn:hover {
    background: var(--ldgroup-color-light) !important;
    color: white !important;
}
@media (max-width: 1200px) {
    .ldgroup-layout .box_legal {
        width: 80% !important;
        max-width:80% !important;
    }   

}
/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 1024px) {
    .ldgroup-layout .box_legal {
        width: 100% !important;
        max-width:100% !important;
    }   

}
/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 768px) {
    body {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100vh;
    }


    .ldgroup-layout {
        padding: 10px; /* Auf Desktop wieder großzügiger */
    }

    .ldgroup-layout .box {
/*        max-width: 300px !important; */
/*        margin: 0px; */
    }

    .ldgroup-layout .box_legal {
        width: 100% !important;
        max-width:100% !important;
    }   
    /* --- Überschrift (Analog zu .flyer-hero im VHS-Kursbuch) --- */
    .ldgroup-layout .flyer-hero {
        padding: 0;
    }

    .ldgroup-layout .flyer-hero h1 {
    color: var(--ldgroup-color-dark) !important;
        font-size: 2rem;
        margin: 0; /* Wichtig: margin auf 0 setzen, um keine Lücken zu erzeugen */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .ldgroup-layout .legal_container_content {
        font-size: 0.5rem;
    }
    .ldgroup-layout .legal_container h2 {
        font-size: 1.2rem;
    }

}