/* ==========================================================================
   1. RESET & GLOBALE STYLES
   ========================================================================== */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #050505;
    color: #e0dcd3;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    overflow-x: hidden;
}

/* Überschriften im Wikinger-Stil */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    color: #c5a059; /* Edles Gold */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
}

a {
    color: #c5a059;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Haupt-Wrapper mit dunklem, nebeligen Hintergrundverlauf */
.page-wrapper {
    background: radial-gradient(circle at top, #14120f 0%, #070605 100%);
    padding-bottom: 40px;
}

/* ==========================================================================
   2. NAVIGATION (HEADER)
   ========================================================================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: rgba(5, 5, 5, 0.95);
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

.navbar .logo h1 {
    font-size: 1.5rem;
    margin: 0;
    text-align: left;
}

.navbar .logo span {
    font-size: 0.7rem;
    display: block;
    color: #8c8475;
    letter-spacing: 0.2em;
}

.navbar nav {
    display: flex;
    gap: 25px;
}

.navbar nav a {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #b0a898;
}

.navbar nav a:hover {
    color: #c5a059;
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.6);
}

/* ==========================================================================
   3. HERO SECTION (OBERER BEREICH)
   ========================================================================== */
   .hero-section {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    min-height: 30vh;
    padding: 0px;
    position: relative;
    
    /* HIER WIRD DAS HINTERGRUNDBILD EINGEFÜGT: */
    background-image: url('../img/hero-banner.png'); 
    background-size: cover;       /* Sorgt dafür, dass das Bild den gesamten Bereich füllt */
    background-position: center;  /* Zentriert das Bild, damit der wichtigste Teil im Fokus bleibt */
    background-repeat: no-repeat; /* Verhindert, dass sich das Bild kachelt */
}

.hero-left, .hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.hero-flag {
    width: 100%;          /* Erlaubt dem Bild, den verfügbaren Platz einzunehmen */
    max-width: 350px;     /* Gewünschte maximale Breite auf dem Desktop (hier anpassen!) */
    height: auto;         /* Behält das proportionale Seitenverhältnis bei, verhindert Verzerrung */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7));
    display: block;       /* Verhindert unschöne Abstände unter dem Bild */
    margin: 0 auto;       /* Zentriert die Flagge in ihrer Spalte */
}

.hero-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-symbol {
    max-width: 90px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(197, 160, 89, 0.3));
}

.main-title {
    font-size: 3.5rem;
    margin-bottom: 5px;
}

.sub-title {
    font-size: 1.2rem;
    color: #a39986;
    margin-bottom: 25px;
}

.decorator-lines {
    width: 150px;
    height: 2px;
    background: linear-gradient(to right, transparent, #c5a059, transparent);
    margin-bottom: 25px;
}

.hero-credo {
    font-size: 1.1rem;
    color: #d1cbbd;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Rechte Requisiten-Anordnung im Hero */
.hero-right {
    position: relative;
}
.hero-bottle {
    width: 100%;          /* Erlaubt flexible Skalierung */
    max-width: 320px;     /* Vorher 160px – jetzt deutlich größer und präsenter auf dem Desktop */
    height: auto;         /* Verhindert Verzerrung */
    z-index: 2;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.8));
    display: block;
    margin: 0 auto;       /* Zentriert die Flasche in ihrer Spalte */
}

/* ==========================================================================
   4. THREE-COLUMN CONTENT GRID (HAUPTLAYOUT)
   ========================================================================== */
.content-grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 30px;
    padding: 0 40px;
    margin-top: 20px;
}

/* Die feinen Boxen (Legende, Braukunst, Über uns, Folge uns) */
.info-card {
    background-color: rgba(12, 11, 9, 0.7);
    border: 1px solid rgba(197, 160, 89, 0.2);
    padding: 25px 20px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
}

.info-card h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.1);
    padding-bottom: 10px;
}

.info-card p {
    font-size: 0.95rem;
    color: #bfae93;
    margin-bottom: 20px;
    text-align: justify;
    text-align-last: center;
}

/* Knöpfe */
.gold-button {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #c5a059;
    border: 1px solid #c5a059;
    padding: 8px 16px;
    background: transparent;
    transition: all 0.3s ease;
}

.gold-button:hover {
    background-color: #c5a059;
    color: #050505;
    box-shadow: 0 0 12px rgba(197, 160, 89, 0.5);
    font-weight: bold;
}

/* Styling für die Social Media Icons */
.social-icons-footer {
    display: flex;
    justify-content: center;
    gap: 25px;         /* Abstand zwischen den Icons */
    margin-top: 25px;
}

.social-icons-footer a {
    color: #c9a15b;     /* Dein Asennektar-Gold */
    font-size: 2rem;    /* Größe der Icons (ca. 32px) */
    transition: all 0.3s ease;
}

.social-icons-footer a:hover {
    color: #ffffff;     /* Icons leuchten weiß auf beim Drüberfahren */
    transform: scale(1.15); /* Kleiner, eleganter Vergrößerungs-Effekt */
    filter: drop-shadow(0 0 8px rgba(197, 160, 89, 0.6)); /* Goldener Schimmer */
}

/* ==========================================================================
   5. MITTLERES PRODUKT-GRID (8 FLASCHEN)
   ========================================================================== */
.grid-center-products {
    border-top: 1px solid rgba(197, 160, 89, 0.3);
    padding-top: 10px;
}

.section-title-container h2 {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Exakt 4 Spalten */
    gap: 20px;
}

.product-card {
    text-align: center;
    transition: transform 0.3s ease;
    padding: 10px;
}

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

.product-card img {
    max-width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.7));
    margin-bottom: 15px;
    transition: filter 0.3s ease;
}

.product-card:hover img {
    filter: drop-shadow(0 0 20px rgba(197, 160, 89, 0.4));
}

.product-card h4 {
    font-size: 0.95rem;
    margin-bottom: 8px;
    min-height: 40px; /* Hält Text auf gleicher Höhe */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Individuelle Farbakzente für bestimmte Flaschen-Texte (wie auf deinem Bild) */
.product-card:nth-child(1) h4 { color: #750728; } /* BLUT DES ALLVATERS */
.product-card:nth-child(3) h4 { color: #a30736; } /* SANG DER ASEN */
.product-card:nth-child(4) h4 { color: #50b942; } /* SEGEN DER ASEN */
.product-card:nth-child(5) h4 { color: #7c2841; } /* FREYAS SEGEN */
.product-card:nth-child(6) h4 { color: #8a6c09; } /* ZORN DES FENRIS */
.product-card:nth-child(7) h4 { color: #426cb9; } /* NEBEL VON NIFLHEIM */
.product-card:nth-child(8) h4 { color: #8be480; } /* MET DER WALKÜREN */

.product-card p {
    font-size: 0.8rem;
    color: #8c8475;
    line-height: 1.3;
}

/* ==========================================================================
   6. VALUE BAR (UNTERE GOLD-ICONS)
   ========================================================================== */
.value-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Spalten */
    border-top: 1px solid rgba(197, 160, 89, 0.3);
    margin: 40px 40px 0 40px;
    padding-top: 30px;
    gap: 15px;
    align-items: center;
}

.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
}

.value-item img {
    max-width: 45px;
    height: auto;
    margin-bottom: 12px;
    filter: sepia(0.5) saturate(2) brightness(0.9);
}

.value-item h5 {
    font-size: 0.99rem;
    margin-bottom: 5px;
}

.value-item p {
    font-size: 0.99rem;
    color: #8c8475;
    max-width: 180px;
}

/* Das mittlere Siegel */
.central-seal img {
    max-width: 100px;
}
.central-seal h4 {
    font-size: 0.99rem;
    color: #c5a059;
}

/* ==========================================================================
   7. RESPONSIVE DESIGN (SMARTPHONE-FREUNDLICH)
   ========================================================================== */
@media (max-width: 1200px) {
    .content-grid {
        grid-template-columns: 1fr; /* Stapelt Boxen auf Tablets untereinander */
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Flaschen nebeneinander */
    }
    .value-bar {
        grid-template-columns: 1fr; /* Unten alles untereinander */
        gap: 30px;
    }
    .hero-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
    }
    .navbar nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .products-grid {
        grid-template-columns: 1fr; /* 1 Flasche auf Smartphones */
    }
    .main-title {
        font-size: 2.5rem;
    }
    .hero-flag {
        max-width: 320px;
        margin-bottom: 20px;
    }

    .hero-bottle {
        max-width: 320px; /* Schont den Platz auf dem Handy-Display */
        margin-top: 20px;  /* Bringt etwas Abstand zum Text darüber */
    }
    
}

/* ==========================================================================
   OPTIMIERTES LAYOUT: BRAUKUNST (FLIESSENDER TEXT MIT NORMALEN LÜCKEN)
   ========================================================================== */

   .braukunst-split {
    display: flex;
    flex-direction: column;
    gap: 20px;            
    grid-column: 1 / 3;   
    background: #111111;
    border: 1px solid #3b2a15;
    padding: 25px;        
}

/* Die Überschrift ganz oben */
.braukunst-split h3 {
    text-align: center;   
    font-size: 1.2rem;    
    color: #c9a15b;
    font-family: 'Cinzel', serif;
    margin-bottom: 5px;   
    width: 100%;          
}

/* Die mittlere Reihe für Bild und Text */
.braukunst-top-row {
    display: flex;
    align-items: center;  
    gap: 20px;            
    width: 100%;
}

/* Linke Seite: Das Icon/Bild */
.braukunst-image {
    flex: 1;
    max-width: 35%;       
    display: flex;        
    justify-content: center;
    align-items: center;
}

.braukunst-image img {
    width: 100%;          
    max-width: 110px;     
    height: auto;
    display: block;
    border: none;         
    box-shadow: none;     
    object-fit: contain;  
}

/* Rechte Seite: Der Textbereich (HIER REPARIERT) */
.braukunst-text {
    flex: 2;              
}

.braukunst-text p {
    margin-bottom: 0;
    text-align: left;         /* ÄNDERUNG: Erzwingt normalen Linkssatz statt Blocksatz */
    text-align-last: left;    /* Verhindert das Auseinanderziehen der letzten Zeile */
    letter-spacing: normal;   /* ÄNDERUNG: Setzt den Abstand zwischen Buchstaben auf Standard */
    word-spacing: normal;     /* ÄNDERUNG: Setzt den Abstand zwischen Wörtern auf Standard */
    line-height: 1.5;         /* Angenehmer, natürlicher Lese-Abstand der Zeilen */
    font-size: 1.1rem;   
}

/* Untere Reihe für den Button */
.braukunst-bottom-row {
    display: flex;
    justify-content: center; 
    width: 100%;
    margin-top: 5px;      
}

/* REAKTIONSFÄHIGKEIT (Mobil-Anpassung) */
@media (max-width: 1400px) {
    .braukunst-top-row {
        flex-direction: column; 
        text-align: center;
        gap: 15px;
    }
    
    .braukunst-split {
        grid-column: auto;      
    }
    
    .braukunst-image {
        max-width: 100%;
    }
    
    .braukunst-text p {
        text-align: center;   /* Auf Mobilgeräten liest es sich zentriert oft schöner */
    }
}

/* ==========================================================================
   COMING SOON: SCHRÄGES BANNER (KOMPAKT & SAUBER BEGRENZT)
   ========================================================================== */

/* Die Produktkarte schneidet jetzt alles ab, was über ihren Rand ragt */
.product-card.coming-soon {
    position: relative;
    overflow: hidden; /* Wichtig: Verhindert, dass das schräge Banner links/rechts rausguckt */
}

/* Die Flasche selbst */
.product-card.coming-soon img {
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.6)) grayscale(0.1) brightness(0.9);
    transition: all 0.4s ease;
}

/* Das schräge "In Reifung" Banner – Jetzt schlank und kompakt */
.coming-soon-badge {
    position: absolute;
    
    /* Positionierung: Im oberen Drittel der Karte */
    top: 20px;            
    left: -35px;          /* Schiebt den Startpunkt nach links außen */
    
    /* Die Drehung */
    transform: rotate(-35deg); /* Steilerer Winkel, wie eine klassische Ecken-Banderole */
    
    /* Look & Feel: Schlank und elegant */
    width: 140px;         /* Feste, kompakte Breite für die Ecke */
    background: linear-gradient(135deg, #c9a15b 0%, #825f2a 100%); /* Dein Asennektar-Gold */
    color: #0a0a0a;       /* Dunkle Schrift */
    
    /* Schrift-Styling: Kleiner und feiner */
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;   /* Kleinere Schriftgröße */
    font-weight: bold;
    text-align: center;
    padding: 5px 0;       /* Schmalerer Streifen */
    letter-spacing: 1px;
    text-transform: uppercase;
    
    /* Effekte */
    box-shadow: 0 3px 8px rgba(0,0,0,0.5); 
    z-index: 10;          
    pointer-events: none; 
}

/* Der "Bald verfügbar" Text unter der Flasche bleibt dezent */
.status-text {
    display: inline-block;
    margin-top: 5px;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #c9a15b;
    letter-spacing: 1px;
}

/* Markiert den aktuell aktiven Menüpunkt auf Unterseiten */
nav a.active, 
nav a:hover {
    color: white;
    border-bottom: 2px solid #c9a15b;
    padding-bottom: 5px;
}

/* ==========================================================================
   FINALER BRAND-FOOTER (COPY & RECHTLICHE LINKS)
   ========================================================================== */

   footer {
    background: #0a0a0a;             /* Tiefes, edles Schwarz */
    border-top: 1px solid #3b2a15;   /* Rustikale, dunkelgoldene Trennlinie */
    padding: 30px 20px;
    text-align: center;
    width: 100%;
    margin-top: 60px;                /* Abstand zum Inhalt darüber */
}

/* Der Urheberrechtshinweis (Copy) */
footer p {
    font-family: 'Cinzel', serif;
    color: #c9a15b;                  /* Dein unverkennbares Asennektar-Gold */
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 15px;             /* Platz zu den rechtlichen Links */
}

/* Die Box für Impressum, Datenschutz & AGB */
.footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 25px;                       /* Abstand zwischen den Links */
    flex-wrap: wrap;                 /* Bricht auf Handys sauber um */
}

/* Styling der rechtlichen Links */
.footer-legal-links a {
    font-family: 'Cormorant Garamond', serif;
    color: rgba(201, 161, 91, 0.7);  /* Leicht dezenteres Gold, damit es edel wirkt */
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

/* Hover-Effekt für die Links */
.footer-legal-links a:hover {
    color: #ffffff;                  /* Leuchtet weiß auf beim Drüberfahren */
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.6);
}

/* ==========================================================================
   FINALER BRAND-FOOTER (REPARIERT FÜR ALLE SEITEN)
   ========================================================================== */

   footer {
    background: #0a0a0a !important;   /* Erzwingt das tiefe, edle Schwarz */
    border-top: 1px solid #3b2a15;   /* Rustikale, dunkelgoldene Trennlinie */
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    margin-top: 80px;                /* Sorgt für ordentlich Abstand zum Inhalt darüber */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Der Urheberrechtshinweis (Copy) */
footer p {
    font-family: 'Cinzel', serif;
    color: #c9a15b !important;        /* Garantiert dein Asennektar-Gold */
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin: 0;
}

/* Die Box für Impressum, Datenschutz & AGB */
.footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 25px;                       /* Abstand zwischen den drei Links */
    flex-wrap: wrap;                 /* Bricht auf Handys sauber um */
    margin-top: 5px;
}

/* Styling der rechtlichen Links */
.footer-legal-links a {
    font-family: 'Cormorant Garamond', serif;
    color: rgba(201, 161, 91, 0.7) !important; /* Leicht dezenteres Gold für edlen Look */
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Hover-Effekt für die Links */
.footer-legal-links a:hover {
    color: #ffffff !important;        /* Leuchtet weiß auf beim Drüberfahren */
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.8);
}

/* Newsletter-Feld Fokus-Effekt */
.newsletter-section input[type="email"]:focus {
    border-color: #c9a15b !important;
    box-shadow: 0 0 10px rgba(201, 161, 91, 0.2);
}

/* FAQ Details Styling */
details[open] {
    border-color: #c9a15b !important;
}
details[open] summary {
    border-bottom: 1px solid #3b2a15;
    padding-bottom: 10px;
}
details summary::-webkit-details-marker {
    display: none; /* Versteckt den Standard-Pfeil in Safari/Chrome */
}

/* ======================================
   ASENNEKTAR LOADER
====================================== */

#loader{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    background:#050505;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transition:opacity 1.5s ease, visibility 1.5s ease;
}

.loader-overlay{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(214,179,106,0.08),
    transparent 70%);

    animation:pulseGlow 4s infinite;
}

.loader-content{
    position:relative;
    text-align:center;
    z-index:2;

    animation:fadeIn 2s ease;
}

.loader-logo{
    width:140px;
    margin-bottom:25px;

    filter:
    drop-shadow(0 0 10px rgba(214,179,106,0.25))
    drop-shadow(0 0 25px rgba(214,179,106,0.15));

    animation:logoFloat 4s ease-in-out infinite;
}

.loader-content h1{
    font-size:5rem;
    font-family:'Cinzel', serif;
    letter-spacing:4px;
    color:#d6b36a;
    margin-bottom:10px;
}

.loader-content p{
    font-size:1.2rem;
    color:#b9985d;
    letter-spacing:3px;
    margin-bottom:40px;
}

.loader-content small{
    display:block;
    margin-top:25px;
    color:#8f7647;
    letter-spacing:2px;
    font-size:0.85rem;
}


/* ======================================
   GOLD LINE
====================================== */

.loader-line{
    width:320px;
    height:2px;
    background:rgba(214,179,106,0.15);
    margin:auto;
    overflow:hidden;
    position:relative;
}

.loader-line span{
    position:absolute;
    left:-40%;
    width:40%;
    height:100%;
    background:#d6b36a;

    box-shadow:
    0 0 10px #d6b36a,
    0 0 20px rgba(214,179,106,0.5);

    animation:loadingLine 2s infinite ease;
}


/* ======================================
   ANIMATIONS
====================================== */

@keyframes loadingLine{

    0%{
        left:-40%;
    }

    100%{
        left:120%;
    }

}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes pulseGlow{

    0%{
        opacity:0.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.3;
    }

}

@keyframes logoFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}


/* ======================================
   LOADER HIDDEN
====================================== */

.loader-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}