/* ===========================================================
   css-Regeln für index. und weitere Seiten
   =========================================================== */

/* Reset + Basis */
html, body { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
    scroll-behavior: smooth; /* ← NEU: ersetzt JS-Smoothscroll */
}
body {
    font-family: Arial, sans-serif; 
    color: #5c5c5c; 
    line-height: 1.6; 
    background: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
}
#navbar {
    position: fixed;       /* ← sticky → fixed WIEDER */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 1000;
}
/* =========================================================== */
/* ☰ HAMBURGER BUTTON */
/* =========================================================== */
.hamburger {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;  
    right: clamp(15px, 5vw, 30px);
    transform: translateY(-50%);
    width: clamp(38px, 9vw, 48px);
    height: clamp(38px, 9vw, 48px);
    align-items: center;
    justify-content: center;
    background: rgba(95, 86, 106, 0.3);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    gap: 3px;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
    z-index: 1001;
}
.hamburger span {
    height: 3px;
    width: 55%;
    background: white;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger:hover {
    background: rgba(95, 86, 106, 0.4) !important; 
}
.hamburger:hover span {
    width: 60%;      /* ← HOVER: LÄNGER */
}

/* ☰ → X ANIMATION -> */
.hamburger.active span:nth-child(1) { 
    transform: rotate(45deg) translate(2.5px, 6px);
    margin-left: 5px;
    position: relative;
}
.hamburger.active span:nth-child(2) { 
    opacity: 0;
}
.hamburger.active span:nth-child(3) { 
    transform: rotate(-45deg) translate(2.5px, -6px);
    margin-left: 5px;
    position: relative;
}
/* ========================= */
.nav-menu { 
    opacity: 0; 
    visibility: hidden;
    position: absolute; 
    top: 100%; 
    top: calc(100% + 5px);      /* ← Direkt unter Hamburger */
    right: clamp(15px, 5vw, 30px); /* ← gleicher right-Wert wie Hamburger */    flex-direction: column; 
    width: clamp(110px, 25vw, 130px) !important;
    min-width: 100px !important; 
    max-width: clamp(160px, 35vw, 180px); /* ← Responsive Obergrenze */
    background: rgba(95, 86, 106, 0.3);
    min-width: 180px; 
    padding: 25px; 
    margin: 0; 
    list-style: none;
    border-radius: 1px;
    z-index: 1000;
}
.nav-menu.active { 
    opacity: 1;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    visibility: visible;
    animation: slideDown 0.3s ease-out;
}
.nav-menu.active a { 
    color: white;
    padding: 12px 15px;
    display: block;
    text-decoration: none;  /* ← Unterstrich weg */
    transition: all 0.2s ease;
}
.nav-menu.active a:hover {
    background: rgba(95, 79, 111, 0.5);
    border-radius: 2px;
    margin: 2px 0;
}
/* =========================================================== */
/* Ende HAMBURGER BUTTON */
/* =========================================================== */

.nav-logo img { 
    height: clamp(35px, 8vw, 60px);
    width: auto; 
    margin-left: 30px;
    margin-top: 15px;
    position: relative;
    top: 10px;
}
/* =========================================================== */
/* Startbereich */

#start {
    background: url('berkhahn-startbildschirm3.jpg') center/cover;
    height: 100vh; 
    color: white;
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    position: relative;
}

/* Überschriften */
#start h1 { 
    letter-spacing: clamp(5px, 2vw, 10px); 
    font-size: clamp(1.8rem, 8vw, 3rem);
    opacity: 0; 
    transform: translateY(-100px);
    animation: slideDown 1.2s 0.3s ease-out forwards;
    text-align: center;
    max-width: 90vw;
}
#start h2 { 
    font-size: clamp(1.2rem, 5vw, 2rem);
    opacity: 0; 
    transform: translateY(100px);
    animation: slideUp 1.2s 1.0s ease-out forwards;
    margin-top: clamp(10px, 3vw, 20px);
    text-align: center;
    max-width: 90vw;
}
#start p {
    font-size: clamp(1.05rem, 3vw, 1.35rem);  /* Etwas größer */
    opacity: 0;
    transform: translateY(30px);  /* Von unten */
    transition: all 1s ease;
}
#start p.show {
    opacity: 1;
    transform: translateY(0);
}
/* ================== */
/* Typografie */
h1,h2,h3 {
    font-family: Arial, sans-serif;
    font-weight: 300; letter-spacing: clamp(0.5px, 1vw, 1px);
    margin: 0 0 clamp(0.5rem, 2vw, 1rem) 0;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); color: #444; }
h3 { font-size: clamp(1rem, 3vw, 1.2rem); }
/* ================== */
/* Keyframes */
@keyframes slideDown {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
}
/* ============================================= */
/* START: Scroll-Down-Button & nach-oben-Button */
/* ============================================= */
.scroll-down-btn, .back-to-top-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(28px, 7vw, 50px);
    color: white;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Nur transform smooth */
    transform: rotate(90deg) translateY(clamp(1px, 0.5vw, 2px)); /* Basis-Transform */
}
.scroll-down-btn {
    position: absolute;
    bottom: clamp(10px, 5vw, 30px);
    left: 50%;
    transform: translateX(-50%) rotate(90deg) translateY(clamp(1px, 0.5vw, 2px));
}
.scroll-down-btn:hover {
    transform: translateX(-50%) rotate(90deg) translateY(-2px) scale(1.4);
}
.back-to-top-btn:hover {
    transform: rotate(90deg) translateY(-1px) scale(1.4);
}
.back-to-top-btn {
    position: absolute;  /* ← STATT fixed */
    bottom: clamp(10px, 4vw, 20px); 
    right: clamp(20px, 4vw, 30px);
    transform: rotate(90deg) translateY(clamp(1px, 0.5vw, 2px)); /* ← Hinzufügen */
    z-index: 1000;
    visibility: visible; /* Bleibt - nur .show-btn macht sichtbar */
}
/* ============================================= */
/* ENDE: Scroll-Down-Button & nach-oben-Button */
/* ============================================= */
/* START: Sections */
/* ============================================= */

#kommherz { 
    background: #ffffff; 
    padding: clamp(30px, 8vw, 80px) clamp(50px, 15vw, 190px);
    text-align: center; max-width: 1200px; margin: 0 auto;
}
#bilder, #zitate, #kontakt {
    padding: clamp(30px, 8vw, 80px) clamp(20px, 8vw, 80px);
}
/* =========================================================== */

/* KONTAKT-SECTION */
#kontakt h1 { text-align: center; }
#kontakt h2 { text-align: center; }
#kontakt h3 { text-align: center; }
#kontakt {
    margin-bottom: clamp(40px, 8vw, 80px);  
}
#kontakt button:hover { 
    background-color: rgba(95, 79, 111, 0.4); /* Violett + 40% Alpha */
    transition: background-color 0.3s ease; /* sanfter Übergang */
}
.kontakt-inhalt {
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
}
.kontakt-grid {
    display: grid;
    grid-template-columns: clamp(140px, 22vw, 180px) clamp(300px, 40vw, 500px);
    gap: clamp(10px, 2vw, 15px);
    justify-content: center;  /* ← EINZIGE Zentrierung nötig */
    padding: 1rem;
}
.kontakt-person {
    display: flex; 
    flex-direction: column;
    align-items: flex-end;
}
.person-bild-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.person-bild {
    width: clamp(120px, 20vw, 180px); 
    height: clamp(180px, 25vw, 220px);
    object-fit: cover; border-radius: 0;
    margin: 0;
}
.kontaktform {
    display: flex; flex-direction: column; 
    gap: clamp(0.8rem, 2vw, 1rem);
}
.kontaktform input, .kontaktform textarea {
    padding: clamp(10px, 3vw, 15px); 
    border: 1px solid #ddd;
    border-radius: 0; background: transparent;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
}
.kontaktform button {
    padding: clamp(12px, 3vw, 15px); 
    background: rgba(95, 79, 111, 0.6);
    color: white; border: none; 
    border-radius: 2px;
    font-size: clamp(1rem, 3vw, 1.2rem); 
    cursor: pointer;
}
/* Überschrift-Abstand für Galerie-Seite */
.galerie-page .page-header {
    margin-top: clamp(40px, 7vw, 75px);
} /* Alternative = global: .page-header {margin-top: clamp(80px, 15vw, 150px);} */

@media (max-width: 768px) {
    .kontakt-grid {
        grid-template-columns: 35vw 65vw;
        place-items: center;          /* ← 1 Zeile = Bild+Form zentriert! */
        padding: 1rem;
    }
    .kontakt-form {
        width: 100%;
        min-width: 250px;
    }
    .kontakt-grid p {
        margin-top: -0.4rem;    /* ← DIREKT ÜBERSCHREIBT clamp() */
    }
}
/* =========================================================== */
/* Absatz-Trenner (mit dem Logo wie im Impresum) */
.absatz-trenner {
    display: block;           /* ← WICHTIG: Block-Element */
    width: 48px;  /* ← Responsive Breite */
    height: auto;                   /* ← Automatisch proportional zur width */
    margin: 1rem auto;        /* ← Zentriert + Abstand oben/unten */
}
/* Content Animationen */
.content-animate {
    opacity: 0; transform: translateX(100%);
    transition: all 0.8s ease;
}
.content-animate.show { opacity: 1; transform: translateX(0); 
}
/* ============================================= */
/* START: Horizontale Galerie*/
/* ============================================= */

.gallery-wrapper {
    position: relative; 
    max-width: 1200px;
    margin: clamp(20px, 5vw, 40px) auto; 
    padding: clamp(35px, 6vw, 50px) clamp(20px, 10vw, 90px);  /* ← LINKS + SEITEN */
}
.gallery-container {
    display: flex; 
    overflow-x: auto;
    scroll-snap-type: x mandatory; 
    gap: clamp(70px, 20vw, 140px);
    scrollbar-width: none;
}
.gallery-container::-webkit-scrollbar { 
    display: none; 
}
.gallery-item:hover { 
    transform: scale(1.05); 
}
.gallery-item { 
    flex: 0 0 clamp(230px, 30vw, 240px); 
    scroll-snap-align: start;
    display: flex;        /* ← zentriert Bild */
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.gallery-item img {
    width: 100%;
    height: 60%;
    object-fit: contain;
    margin: clamp(12px, 1vw, 8px) 0;  
    transform-origin: center center;  /* ← MITTE! */
    transition: all 0.3s ease;
}
.gallery-item:hover img {
    margin: 0;
    transform: scale(1.02);
}
.gallery-btn {
    position: absolute; 
    top: 30%;
    transform: translateY(0);
    width: clamp(80px, 17vw, 90px); 
    height: clamp(80px, 17vw, 90px);
    border-radius: 50%;
    border: none; 
    background: none; 
    color: #6b6b6b;
    font-size: clamp(32px, 7vw, 48px);
    cursor: pointer; z-index: 10;
    transition: all 0.3s ease;
}
.gallery-btn:hover {
    transform: scale(1.2);  /* ← scale für Hover */
}
.prev-btn { left: clamp(5px, 2vw, 10px); }
.next-btn { right: clamp(5px, 2vw, 10px); }

#bilder p {
    text-align: center;
}

/* ============================ */
/* Footer - RESPONSIV */
/* ========================== */

footer {
    text-align: center; 
    padding: clamp(10px, 8vw, 20px) clamp(15px, 5vw, 20px);
    background: url('ugru-navi.jpg') center/cover;
    color: white;
    position: relative;
}
footer > * { position: relative; z-index: 2; 
}
footer a {
    text-decoration: none;  /* Unterstrich WEG */
    color: white;           /* Farbe WEISS */
}
footer a:hover {
    color: #ddd;  /* Hellgrau */
}

/* =========================================================== */
/* GALERIE-SEITE */
/* =========================================================== */
.galerie-page main { 
    padding-top: clamp(60px, 15vw, 80px);
    padding-bottom: clamp(30px, 7vw, 40px); 
    text-align: center;
}
#bilderseite { 
    padding: clamp(30px, 8vw, 80px) clamp(50px, 15vw, 190px);
    max-width: 620px; 
    margin: 0 auto;
}
.bild1 {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 0px;
}
.bild {
    width: 100%;
    height: auto;
    display: block;
    margin-top: clamp(90px, 8vw, 120px);
}

.preis {
    text-align: left;
    font-weight: bold;
}
.bildertitel {
    text-align: left;
    font-weight: bold;
}
.poesie {
    text-align: left;
}
/* =========================================================== */
/* ENDE GALERIE-SEITE*/
/* =========================================================== */
/* START MOBILE BREAKPOINTS */
/* =========================================================== */
@media (max-width: 768px) {
    .page-title {
        order: 1; 
        padding-top: 0; 
        margin-bottom: clamp(20px, 6vw, 40px);
        text-align: center;
    }
    .kontakt-grid { 
        grid-template-columns: 1fr; 
        gap: clamp(15px, 5vw, 20px);
    }
    .person-bild { 
        margin-right: 0; 
        margin-bottom: clamp(15px, 4vw, 20px);
        align-self: center;
    }
    .mobile-gallery {    /* Gallery: 1 großes Bild MITTE */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding: 1rem 0;
        justify-content: center;     /* ← BILDER IMMER MITTE! */
    }    
    .mobile-gallery .gallery-item {
        flex: 0 0 80vw;               /* ← 880vw = Größen-Maßeinheit */
        max-width: 85vw;
        scroll-snap-align: center;
    }
    .mobile-gallery img {
        width: 100%;       /* ← Bilder füllen geamten Container (100%) */
        height: auto;
        transition: transform 0.3s ease;
    }
}
/* ========================= */
@media (max-width: 480px) {
    #start h1 { letter-spacing: clamp(2px, 4vw, 6px); }
}
/* =========================================================== */
/* ENDE MOBILE BREAKPOINTS */
/* =========================================================== */