/* landing.css */

:root {
    --bg-dark: #1b1b1f;
    --gold: #d4a017;
    --copper: #8b5e34;
    --text-light: #e8d8b5;
    --glass: rgba(58, 58, 65, 0.85);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: 'Garamond', serif;
    margin: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Floating Languages */
#floatingLang {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}
#floatingLang button {
    background: none;
    border: 2px solid var(--copper);
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#floatingLang img { width: 30px; border-radius: 50%; }
.active-lang { border-color: var(--gold) !important; box-shadow: 0 0 15px var(--gold); transform: scale(1.1); }

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* --- DER D20 HINTERGRUND (EINGELOGGT) --- */
.hero::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92vmin; 
    height: 92vmin;
    
    /* Geometrie ist fix. 
       ÄNDERUNG 1: Deckkraft massiv gesenkt (von 0.04 auf 0.015)
       für maximale Verschmelzung mit dem Hintergrund.
    */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='rgba(255, 255, 255, 0.015)' stroke-width='4' d='M256 16 L463.8 136 L463.8 376 L256 496 L48.2 376 L48.2 136 Z M256 96 L394.5 336 L117.5 336 Z M256 96 L256 16 M256 96 L463.8 136 M256 96 L48.2 136 M394.5 336 L463.8 136 M394.5 336 L463.8 376 M394.5 336 L256 496 M117.5 336 L256 496 M117.5 336 L48.2 376 M117.5 336 L48.2 136'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    pointer-events: none;
    
    /* Weicher Übergang für den Hover-Effekt */
    transition: background-image 0.4s ease-in-out;
}

/* --- HOVER-INTERAKTION: DUNKLES, MATTES KUPFER --- */
.hero:has(.btn-start:hover)::before {
    /* Farbe: #5a3e2b (Rustikales Bronze-Kupfer)
       Dieses Kupfer ist dunkler und weniger gesättigt, was den "matten" Look erzeugt.
    */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%235a3e2b' stroke-width='4' d='M256 16 L463.8 136 L463.8 376 L256 496 L48.2 376 L48.2 136 Z M256 96 L394.5 336 L117.5 336 Z M256 96 L256 16 M256 96 L463.8 136 M256 96 L48.2 136 M394.5 336 L463.8 136 M394.5 336 L463.8 376 M394.5 336 L256 496 M117.5 336 L256 496 M117.5 336 L48.2 376 M117.5 336 L48.2 136'/%3E%3C/svg%3E");
    opacity: 0.6; /* Durch Senken der Opazität des gesamten Elements wirkt die Farbe noch dezenter */
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 1; /* Text liegt über dem Würfel */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    line-height: 1;
    margin: 0;
    text-transform: none;
    letter-spacing: 2px;
    filter: drop-shadow(0 0 8px rgba(212, 160, 23, 0.4));
}
.gold-text { color: var(--gold); }
.motto-text {
    font-size: 1.3rem;
    font-style: italic;
    margin: 2px 0px 40px 0px;
    opacity: 0.8;
    text-align: center; /* Erzwungene Zentrierung */
    width: 100%;
}

/* Universe Selector */
.universe-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 50px;
}
#universeLabel {
    font-size: 1.1rem; /* Entspricht Standard-Textgröße */
    color: var(--text-light);
}
.dropdown-fancy {
    background: var(--bg-dark);
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 8px 20px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1.1rem;
}

/* CTA Area & Arrow */
.cta-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.btn-start {
    background: linear-gradient(145deg, var(--copper), #5a3d22);
    color: white;
    padding: 14px 60px;
    font-size: 1.4rem;
    font-weight: bold;
    border: 2px solid var(--gold);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-start:hover { transform: scale(1.05); box-shadow: 0 0 25px var(--gold); }

.scroll-indicator {
    font-size: 1.5rem;
    color: var(--gold);
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* Cards & Titles */
.info-section, .contact-section { padding: 80px 20px; display: flex; justify-content: center; }
.info-card, .contact-card {
    background: var(--glass);
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 50px;
    max-width: 550px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* NEU: Titel zentriert */
h2 { 
    color: var(--gold); 
    margin-top: 0; 
    font-size: 1.8rem; 
    text-align: center; 
}

p { line-height: 1.6; font-size: 1.1rem; margin-bottom: 25px; text-align: justify; }

.divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    margin: 30px 0;
}

/* NEU: Fußzeile schlicht (nicht fett, nicht kursiv) */
.highlight-text {
    color: var(--gold);
    font-weight: normal;
    font-style: normal;
    text-align: center;
    margin-top: 40px;
}

/* Contact Form - Zusammengefasst für absolute Einheitlichkeit */
.input-group { margin-bottom: 25px; text-align: left; }
.input-group label { display: block; margin-bottom: 8px; color: var(--gold); font-weight: bold; }

/* Alle Eingabefelder (jetzt inklusive Email) */
input[type="text"], 
input[type="email"], 
textarea {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--copper);
    color: var(--text-light);
    padding: 12px;
    border-radius: 4px;
    font-family: inherit; /* Vererbt 'Garamond' vom body */
    font-size: 1.1rem;    /* Feste Größe für den Text */
    box-sizing: border-box;
    display: block;
}

/* Fokus-Effekt für alle Felder */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--gold);
    outline: none;
    background: rgba(0,0,0,0.5);
}

/* PLATZHALTER STYLING - Hier wird die Schriftart & Größe erzwungen */
::placeholder {
    font-family: 'Garamond', serif !important;
    font-size: 1.1rem;
    opacity: 0.5;
    color: var(--text-light);
}

/* Für Safari/Chrome */
::-webkit-input-placeholder {
    font-family: 'Garamond', serif !important;
    font-size: 1.1rem;
    color: var(--text-light);
}

/* Speziell für das Email-Feld, falls es unter dem Label steht */
input[type="email"] {
    margin-bottom: 5px;
}

textarea { height: 200px; resize: vertical; }

.btn-send {
    width: 100%;
    background-color: var(--copper);
    color: var(--text-light);
    padding: 16px;
    border: 1px solid var(--gold);
    border-radius: 4px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-send:hover { background-color: var(--gold); color: black; }

/* Styling für die Erfolgsnachricht */
#contactSuccessMessage {
    background: rgba(212, 160, 23, 0.1);
    border: 1px solid var(--gold);
    border-radius: 8px;
    margin-bottom: 20px;
}

#successText {
    color: var(--gold);
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    #floatingLang { top: auto; bottom: 20px; flex-direction: row; right: auto; left: 50%; transform: translateX(-50%); }
    .hero-content h1 { font-size: 2.8rem; }
}

/* =======================================================================
   MOBILE ANPASSUNGEN (index.html)
   ======================================================================= */

@media (max-width: 768px) {
    /* 1. Zweites Info-Textfeld ausblenden (für besseren Lesefluss) */
    #aboutText2 {
        display: none !important;
    }

    /* 2. Platzhalter-Styling für Kontaktformular (Betreff & Nachricht) */
    /* Verhindert zu große/kleine Schrift im Vergleich zum Tipp-Text */
    
    #subjectInput::placeholder, 
    #messageInput::placeholder {
        font-size: 1.1rem !important;
        opacity: 0.5 !important;
        line-height: normal !important;
        font-family: 'Garamond', serif !important;
    }

    /* Vendor-Prefixes für mobile Safari & Chrome (iOS/Android) */
    #subjectInput::-webkit-input-placeholder,
    #messageInput::-webkit-input-placeholder {
        font-size: 1.1rem !important;
        opacity: 0.5 !important;
    }

    #subjectInput::-moz-placeholder,
    #messageInput::-moz-placeholder {
        font-size: 1.1rem !important;
        opacity: 0.5 !important;
    }

    /* 3. Padding der Cards auf Mobile etwas reduzieren */
    .info-card, .contact-card {
        padding: 30px 20px !important;
    }

    /* 4. Hero Subtitle Abstände optimieren */
    .motto-text {
        font-size: 1.1rem;
        margin-bottom: 25px;
    }
}


/* Logo Container Styling */
.hero-logo-container {
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 0 15px rgba(212, 160, 23, 0.3)); /* Sanfter Gold-Glow um das Logo */
}

/* Das Logo selbst */
.hero-logo {
    width: 500px;         /* Standardbreite am PC */
    max-width: 80vw;      /* Verhindert Überlaufen am Rand */
    height: auto;         /* Proportionalität behalten */
    display: block;
    transition: transform 0.3s ease;
}

/* Kleiner Effekt: Logo hebt sich beim Hover des Start-Buttons leicht ab */
.hero:has(.btn-start:hover) .hero-logo {
    transform: scale(1.02);
    filter: drop-shadow(0 0 20px rgba(212, 160, 23, 0.5));
}

/* MOBILE ANPASSUNG */
@media (max-width: 768px) {
    .hero-logo {
        width: 280px;     /* Schmaler auf dem Handy */
    }
}