/* Browser inkl. CSS neu laden <strg>+F5 */

/* Grund-Einstellungen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}


body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 1.3rem;
}


a {
    text-decoration: none;
    transition: color 0.1s; /* Macht den Farbübergang weicher */
    text-decoration: underline; /* Schaltet Unterstreichung ein */
    text-decoration-thickness: 1px; /* Macht den Strich ganz dünn (1px) */
    text-underline-offset: 2px; /* Schafft etwas Platz zwischen Text und Unterstrich */
    text-decoration-color: rgba(200, 200, 200, 0.5); /* Optional: Strich etwas blasser/dezent machen */
}

a:link, a:visited {
    color: white;
    background-color: transparent;
}
a:hover {
    color: lightblue;
    text-decoration: underline;
}
a:active {
    color: black;
    background-color: lightblue;
}

h2 a:link, h2 a:visited {
    color: black;
}
h2 a:hover {
    color: darkblue;
}
h2 a:active {
    color: black;
}


/* Navbar Styling */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    z-index: 1000;
}

.logo{
    font-family: 'Dancing Script', cursive;
    font-weight: bold;
    font-size: 1.35em;
}
.nav-links {
    display: flex;
    list-style: none;
    font-size: 1.2em;
}

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

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Der Hamburger (Standardmäßig versteckt) */
#menu-toggle {
    display: none;
}

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    width: 30px;
    height: 4px;
    background: white;
    border-radius: 2px;
    transition: all 0.15s ease-in-out; /* NEU: Für sanfte X-Animation (doppelt so schnell) */
}



/* Abschnitte */

    /* Angenommen deine Navbar ist 56px hoch 
    #Geschenke {
       	padding-top: 56px;
    	height: 100vH;
    }*/

.panel {
    position: relative;
  	/* height: 100vH; */ /* Jeder Abschnitt ist genau so hoch wie der Bildschirm */
  	/* 100% der Bildschirmhöhe minus 56px für die Navbar */
  	height: calc(100vh - 56px);
    width: 100%;
    overflow: hidden; /* Verhindert, dass der Blur übersteht */
    display: flex;
    justify-content: center;
    align-items: center;
	scroll-margin-top: 56px;
}

/* Der verschwommene Hintergrund */
.blur-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.7); /* Verschwommen und etwas dunkler */
    transform: scale(1.1); /* Verhindert weiße Ränder durch den Blur */
    z-index: 1;
}

/* Container für das scharfe Bild und Text */
.content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;
}

/* NEU: Die "unsichtbare Blase" unter dem Bild auf schmalen Bildschirmen */
.content-wrapper::after {
    content: "";
    flex: 0.15; /* Nimmt einen kleinen Teil des leeren Platzes unter dem Bild ein und drückt das Bild sanft nach oben. (Wert kann z.B. auf 0.2 erhöht werden, wenn es noch weiter hoch soll) */
}

/* Das scharfe Bild im Vordergrund */
.foreground-img {
    width: 100%; /* Volle Breite erzwingen */
    height: auto; /* Höhe passt sich an die natürliche Bildgröße an */
    max-height: 65vh; /* Begrenzung, lässt Platz für den Text oben/unten */
    object-fit: contain; /* Bild wird nie beschnitten, immer ganz zu sehen */
    /* ÄNDERUNG: drop-shadow statt box-shadow, damit nur das Motiv und nicht die Kiste einen Schatten wirft */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); 
}

/* Text über dem Bild */
/* Standard für schmale Bildschirme (Seitenverhältnis unter 5/4) */
.text-overlay {
    position: relative; 
    width: 100%;        
    flex: 0.7; /* 1  ÄNDERUNG: Nimmt wieder den gesamten Platz oben ein, um vertikal zu zentrieren */
    display: flex; /* Flexbox an */
    flex-direction: column; /* Text untereinander */
    justify-content: center; /* Vertikal mitte/mitte */
    align-items: center; /* Horizontal mitte/mitte */
    z-index: 10;
    /* Sanfteres Weiß für den normalen Text und mehr Zeilenabstand */
    color: rgba(255, 255, 255, 0.95); 
    font-size: 1.1rem; 
    line-height: 1.4; /* Etwas kompakter */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); /* Weicherer Schatten */
    /* Mobil: Zentriert */
    text-align: center;
    padding: 10px 20px; /* Leichter Abstand */
}

/* Die großen Überschriften im Overlay */
.text-overlay h1 {
    /* Edle Serifenschrift (fällt auf Standard-Serifen zurück, wenn nichts anderes da ist) */
    font-family: 'Playfair Display', 'Didot', 'Garamond', 'Times New Roman', serif;
    font-size: 2.2rem; /* Viel größer und selbstbewusster! */
    font-weight: normal; /* Zu fett wirkt oft plump, 'normal' ist edler */
    color: #fdf6e3; /* Ein extrem zartes Champagner/Gold-Weiß */
    letter-spacing: 2px; /* Buchstaben etwas auseinanderziehen */
    line-height: 1.1; /* Deutlich kompakter */
    margin-bottom: 5px; /* 5px Weniger Abstand zum Text darunter */
    margin-top: 0; /* Weniger Abstand nach oben */
}

/* Aufzählungen im Overlay (wie bei "Schmuck") eleganter machen */
.text-overlay ul {
    list-style-type: none; /* Normale Punkte weg */
    padding: 0;
    margin-top: 5px; /* Kompakter */
}

.text-overlay ul li {
    margin-bottom: 6px; /* 6px */
    font-size: 1rem;  /* 1.05rem; */
}

/* Elegante Spiegelstrich-Alternative */
.text-overlay ul li::before {
    content: "✦ "; /* Ein kleiner Stern/Diamant statt ödem Punkt */
    color: #8d641d; /* In deinem Goldton */
}

/* Größere Schrift für Tablets/Desktops */
@media (min-width: 580px) {
    .text-overlay h1 {
        font-size: 3rem; /* Auf großen Bildschirmen richtig wirken lassen */
        letter-spacing: 3px;
    }
    .text-overlay {
        font-size: 1.25rem;
    }
}

/* Ab breitem 5/4 Seitenverhältnis: Kein Overlay mehr, sondern Text links neben dem Bild */
@media (min-aspect-ratio: 5/4) {

    /* Angenommen deine Navbar ist 56px hoch */
    #Gold {
       	padding-top: 56px;
    	height: 100vH;
    }

    .content-wrapper {
        flex-direction: row; /* Elemente nebeneinander statt untereinander */
        padding: 0 40px; /* Etwas Abstand zu den Bildschirmrändern */
        gap: 20px; /* Spalt zwischen Textfeld und Bild */
        
        /* ÄNDERUNG: Wieder mittig zentrieren für das Bild! */
        align-items: center;
    }
    
    /* Unsichtbare Blase auf Desktop GARANTIERT killen */
    .content-wrapper::after {
        display: none !important;
        content: none !important;
        flex: 0 !important;
    }
    
    .text-overlay {
        position: relative; /* Komplett gelöst vom Bild */
        top: auto;          
        left: auto;         
        flex: none; /* Hebt das flex: 1 vom schmalen View auf */
        width: 35%; /* Textbereich nimmt 35% der Bildschirmbreite ein */
        text-align: left; /* Text linksbündig */
        
        /* NEU: Nur den Text nach oben schieben! */
        align-self: flex-start; 
        
        display: flex; /* Bleibt Flexbox für innere Ausrichtung */
        justify-content: flex-start;
    }
    
    .foreground-img {
        width: 60%; /* Bildbereich nimmt den restlichen Platz ein (etwas schmäler wegen dem 20px Gap) */
        height: 100%; /* ÄNDERUNG: Nimmt jetzt die volle Höhe der Sektion ein */
        max-height: 100%; /* Begrenzung aufgehoben */
        object-fit: contain; /* Wird nicht beschnitten */
    }
}


/* ######################## */
/* Galerie */

/* Container-Styling */
.gallery-container-g {
    padding: 30px 20px;
    background-color: #f9f9f9;
    text-align: center;
   height: auto;
}

.section-header-g h2 {
    margin-bottom: 25px;
    color: #333;
}

/* Das Raster-System */
.image-grid-g {
    display: flex;
    flex-wrap: wrap;  
    gap: 20px;
    justify-content: center; /* Das zentriert das gesamte Raster-Paket */
    margin: 0 auto 30px auto;
    max-width: 1200px; /* Begrenzt die Gesamtbreite für bessere Lesbarkeit auf Riesen-Monitoren */
}

/* Einzelnes Bild-Element */
.image-item-g {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Bilder im Rasterplatz */
    /* Erzeugt so viele Spalten wie Platz ist, mindestens 162px breit */
    width: 162px; /* NEU: Da das Grid weg ist, geben wir dem Element hier seine Breite */
}

/* Feste Bildgröße erzwingen */
.small-thumb-g {
    object-fit: cover; /* Verhindert Verzerrung, falls Bild nicht quadratisch */
    border-radius: 4px;
    border: 0px solid #ccc;
		max-width: 100%; height: auto;
}

.caption-g {
    margin-top: 8px;
    color: #666;
}

/* Fußzeile der Sektion */
.section-footer-g {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    /* font-style: italic; */
    /*color: #dcf7fd; */
    font-size: 1.3rem;
}

/* ######################## */

.stern {
  font-size: 1.85rem;
  color: #8d641d; /* Färbt den Stern gold */
  margin: 0 10px; /* Abstand links/rechts vom Stern */
  display: inline-block; /* Sorgt für korrekte Ausrichtung */
}


/* RESPONSIVE DESIGN (Mobile) */
/* Das Design greift, wenn max-width 1100px ODER max-aspect-ratio 3/4 ist */
@media (max-width: 1100px), (max-aspect-ratio: 3/4){    
    .hamburger {
        display: flex; /* Hamburger anzeigen */
    }

    .nav-links {
        display: flex; /* Geändert: Von 'none' auf 'flex' für Animation */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Schließt nahtlos an die Navbar an */
        right: 0;
        background: rgba(0, 0, 0, 0.8); /* Etwas transparenter */
        backdrop-filter: blur(10px); /* NEU: Eleganter Blur-Hintergrund */
        width: max-content; /* Passt sich automatisch dem breitesten Text an */
        text-align: center;
        padding: 20px 40px; /* Großzügiger seitlicher Platz */
        
        /* NEU: Animation-Setup (versteckt) */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px); /* Leicht nach oben verschoben für Dropdown-Effekt */
        transition: all 0.15s ease-in-out; /* doppelt so schnell */
    }

    /* Wenn Checkbox geklickt, Menü anzeigen */
    #menu-toggle:checked ~ .nav-links {
        opacity: 1; /* Sichtbar machen */
        visibility: visible;
        transform: translateY(0); /* An finale Position gleiten */
    }
    
    /* NEU: Hamburger zum X animieren */
    #menu-toggle:checked + .hamburger span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    #menu-toggle:checked + .hamburger span:nth-child(2) {
        opacity: 0; /* Mittlerer Strich verschwindet */
    }
    #menu-toggle:checked + .hamburger span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

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

footer {
    text-align: center;
    padding: 20px;
    background: #0000ff;
    background: #222;
    color: white;
}

/* ### Bilder beim klicken vergrößern ## */

/* Das Modal-Hintergrunddesign */

.modal {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    z-index: 5000; /* Erhöht, damit es sicher über der Navbar liegt */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(250,250,250,0.4); 
}

/* Zeigt das Modal, wenn die ID in der URL aufgerufen wird */
.modal:target {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bereich um das Bild herum zum Schließen */
.modal-close-area {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
}

/* Container für Bild und Button */
.modal-content {
    position: relative; /* Wichtig für die Positionierung des X am Bildrand */
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 95vw; /* Maximal 95% der Bildschirmbreite */
    max-height: 95vh;
}


.modal-content img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain; /* Bild wird nie verzerrt und passt immer ins Fenster */
    border: 2px solid white;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    cursor: zoom-in; /* Zeigt dem User, dass er klicken kann */
    transition: transform 0.3s ease; /* Weicher Übergang beim Zoomen */
}

/* Einfacher CSS-Zoom beim Anklicken des Bildes */
.modal-content img:active {
    transform: scale(1.5); /* Vergrößert das Bild, solange man die Maustaste drückt */
    cursor: zoom-out;
}

/* Das goldene Schließen-X */
.close-btn {
    position: absolute;
    /* Positioniert das X auf die Ecke des Bildes */
    top: -15px;
    right: -15px;
    
    background: #8d641d; /* Dein Gold-Ton */
    color: white;
    width: 40px;
    height: 40px;
    line-height: 36px; /* Zentriert das X vertikal */
    text-align: center;
    border-radius: 50%;
    font-size: 28px;
    font-weight: bold;
    z-index: 5100;
    text-decoration: none;
    border: 2px solid white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.close-btn:hover {
    background: #b08d44; /* Etwas helleres Gold beim Drüberfahren */
    transform: scale(1.1);
}

.gold-outline {
    /* Grunddesign des Textes */
    font-family: 'Arial Black', sans-serif; /* Eine fette Schriftart wählen */
    font-style: italic; 
    font-size: 80px;
    color: white;
    text-transform: lowercase;
    letter-spacing: -2px; /* Buchstaben etwas zusammenrücken wie im Bild */
    
    /* Der goldgelbe Rand durch Schatten in alle 8 Richtungen */
    text-shadow: 
      3px  3px 0 #b38f00,
     -3px -3px 0 #b38f00,  
      3px -3px 0 #b38f00,
     -3px  3px 0 #b38f00,
      3px  0   0 #b38f00,
     -3px  0   0 #b38f00,
      0    3px 0 #b38f00,
      0   -3px 0 #b38f00;
  }

/* SEO-Texte für Suchmaschinen sichtbar, für User unsichtbar */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
}