/* ==========================================
   Radio Klötze
   ========================================== */

:root {

    --bg: #111111;
    --bg2: #1b1b1b;

    --white: #ffffff;
    --text: #d8d8d8;

    --accent: #d81b60;
    --accent-hover: #ff4081;

    --shadow: rgba(0,0,0,.45);

}


/* ==========================================
   Grundlayout
   ========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    color:var(--text);

    font-family:'Open Sans',sans-serif;

}


/* ==========================================
   Navigation
   ========================================== */

.navbar{

    padding:18px 0;

    background:rgba(0,0,0,.30);

    backdrop-filter:blur(10px);

    transition:.3s;

}

.navbar-brand img{

    height:46px;

}

.nav-link{

    color:white;

    margin-left:14px;

    padding-left:8px;
    padding-right:8px;

    font-weight:600;

    font-family:'Montserrat',sans-serif;

    white-space:nowrap;

}

.nav-link:hover{

    color:var(--accent);

}

/* Buchungsbutton in der Navigation */

.btn-booking-nav{

    display:inline-flex;
    align-items:center;

    white-space:nowrap;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.35);

    color:#fff;

    border-radius:30px;

    padding:8px 16px;

    font-size:.95rem;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.btn-booking-nav:hover{

    background:rgba(255,255,255,.18);

    color:#fff;

}

.heart{

    color:#d81b60;

    margin-right:6px;

}


/* ==========================================
   Hero
   ========================================== */

.hero{

    position:relative;

    min-height:100vh;

    background-image:url("../img/hero/hero.jpg");

    background-size:cover;

    background-position:center center;

}


.overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.45) 35%,
        rgba(0,0,0,.15) 100%
    );

}


.hero .container{

    position:relative;

    z-index:2;

}


.hero-text h1{

    color:white;

    font-size:4rem;

    font-weight:700;

    line-height:1.15;

    font-family:'Montserrat',sans-serif;

    margin-bottom:25px;

}


.hero-text h2{

    color:white;

    font-size:1.5rem;

    font-weight:400;

    margin-bottom:40px;

}


/* ==========================================
   Buttons
   ========================================== */

.btn-primary{

    background:var(--accent);

    border:none;

    padding:14px 34px;

    border-radius:50px;

    font-weight:600;

}


.btn-primary:hover{

    background:var(--accent-hover);

}


.btn-outline-light{

    padding:14px 40px;

    border-radius:50px;

}

.hero-buttons{

    display:flex;
    align-items:center;
    gap:24px;
    margin-top:40px;

}

.btn-booking{

    background:#d81b60;
    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.btn-booking:hover{

    background:#ff4081;
    color:#fff;

}


/* ==========================================
   Platzhalterbereiche
   ========================================== */

section{

    padding:120px 0;

}


/* ==========================================
   Responsive
   ========================================== */

@media(max-width:992px){

.hero-text h1{

    font-size:2.8rem;

}

.hero-text h2{

    font-size:1.2rem;

}

.navbar-brand img{

    height:38px;

}

}


@media(max-width:576px){

.hero-text{

    text-align:center;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.btn-outline-light{

    margin-left:0;

}

.hero-text h1{

    font-size:2.2rem;

}

}

/* Scroll-Hinweis */

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    text-decoration:none;

    text-align:center;

    z-index:3;

    font-size:.95rem;

    opacity:.85;

}

.arrow{

    font-size:2rem;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(10px);

    }

    60%{

        transform:translateY(5px);

    }

}

/* ==========================================
   Inhaltsbereiche
========================================== */

.content-section{

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:120px 0;


}

.section-dark{

    background:#161616;

}

.section-black{

    background:#111111;

}

.section-image{

    width:100%;
    height:620px;

    object-fit:cover;

    border-radius:16px;

    box-shadow:0 20px 40px rgba(0,0,0,.45);

}

.section-kicker{

    display:inline-block;

    color:#d81b60;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:15px;

}

.section-title{

    color:#fff;

    font-family:'Montserrat',sans-serif;

    font-size:3rem;

    font-weight:700;

    margin-bottom:30px;

}

.content-section p{

    color:#d4d4d4;

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:22px;

}

.highlight{

    margin:40px 0;

    padding-left:25px;

    border-left:4px solid #d81b60;

    color:#fff;

    font-size:1.5rem;

    font-style:normal;

    font-weight:600;

    line-height:1.5;

}

.content-section .btn-booking{

    margin-top:20px;

}


/* ==========================================
   Responsive
========================================== */

@media (max-width:991px){

.section-image{

    height:420px;

}

.section-title{

    font-size:2.3rem;

}

.highlight{

    font-size:1.3rem;

}

}

.quote-author{
    display: block;
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 400;
    color: #aaa;
}

/* ==========================================
   Galerie
========================================== */

/* ==========================================
   Galerie
========================================== */

.gallery-section{
    min-height: 100vh;
    padding: 120px 0;
}

.gallery-heading{
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.gallery-heading p{
    color: #d4d4d4;
    font-size: 1.1rem;
}

/* Masonry-Galerie */

.gallery-masonry{
    columns: 4;
    column-gap: 14px;
}

.gallery-item{
    display: block;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 8px;
    break-inside: avoid;
}

.gallery-item img{
    display: block;
    width: 100%;
    height: auto;
    transition: transform .4s ease, opacity .4s ease;
}

.gallery-item:hover img{
    transform: scale(1.04);
    opacity: .85;
}

.gallery-button{
    margin-top: 45px;
    text-align: center;
}

/* Galerie auf Tablets */

@media (max-width: 991px){
    .gallery-masonry{
        columns: 2;
    }
}

/* Galerie auf Smartphones */

@media (max-width: 576px){
    .gallery-masonry{
        columns: 1;
    }
}

/* ==========================================
   Galerie - Korrektur
========================================== */

.gallery-section{
    min-height: 100vh;
    padding: 120px 0;
}

.gallery-heading{
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.gallery-heading p{
    color: #d4d4d4;
    font-size: 1.1rem;
}

/* Bildergalerie */

.gallery-masonry{
    width: 100%;
    columns: 4;
    column-gap: 14px;
}

.gallery-masonry .gallery-item{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 14px 0;
    overflow: hidden;
    border-radius: 8px;
    break-inside: avoid;
}

.gallery-masonry .gallery-item img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
}

.gallery-masonry .gallery-item:hover img{
    transform: scale(1.03);
}

.gallery-button{
    margin-top: 45px;
    text-align: center;
}

/* Tablet */

@media (max-width: 991px){
    .gallery-masonry{
        columns: 2;
    }
}

/* Smartphone */

@media (max-width: 576px){
    .gallery-masonry{
        columns: 1;
    }
}

/* ==========================================
   Komplette Galerieseite
========================================== */

.gallery-page{
    min-height: 100vh;
    padding: 150px 0 120px;
    background: #111111;
}

.gallery-page .gallery-heading{
    margin-bottom: 60px;
}

/* ==========================================
   Lightbox
========================================== */

.lightbox{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.95);
    z-index: 9999;
}

.lightbox.active{
    display: flex;
}

.lightbox img{
    max-width: 88vw;
    max-height: 88vh;
    object-fit: contain;
    box-shadow: 0 10px 50px rgba(0,0,0,.7);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
    position: absolute;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    z-index: 10000;
}

.lightbox-close{
    top: 20px;
    right: 30px;
    font-size: 3rem;
}

.lightbox-prev{
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
}

.lightbox-next{
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
    color: #d81b60;
}

/* ==========================================
   Kontakt
========================================== */

.contact-section{
    min-height: calc(100vh - 85px);
    display: flex;
    align-items: center;
    padding: 90px 0 60px;
}

.contact-heading{
    max-width: 800px;
    margin-bottom: 50px;
}

.contact-heading p{
    max-width: 700px;
    color: #d4d4d4;
    font-size: 1.1rem;
    line-height: 1.9;
}

.contact-options{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.contact-card{
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 130px;
    padding: 28px;
    background: #1b1b1b;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.contact-card:hover{
    transform: translateY(-5px);
    border-color: #d81b60;
    color: #fff;
}

.contact-card i{
    flex-shrink: 0;
    font-size: 2.2rem;
    color: #d81b60;
}

.contact-whatsapp i{
    color: #25D366;
}

.contact-label{
    display: block;
    margin-bottom: 5px;
    color: #aaa;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-card strong{
    display: block;
    font-size: 1.15rem;
}

.contact-hint{
    margin-top: 40px;
    color: #aaa;
    font-size: .95rem;
}


/* Kontakt auf kleineren Bildschirmen */

@media (max-width: 991px){

    .contact-options{
        grid-template-columns: 1fr;
    }

    .contact-card{
        min-height: auto;
    }

}

/* ==========================================
   Footer
========================================== */

.site-footer{
    padding: 22px 0;
    background: #080808;
    border-top: 1px solid rgba(255,255,255,.08);
}

.footer-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer-content p{
    margin: 0;
    color: #777;
    font-size: .9rem;
}

.footer-links{
    display: flex;
    gap: 25px;
}

.footer-links a{
    color: #aaa;
    text-decoration: none;
    font-size: .9rem;
    transition: .3s;
}

.footer-links a:hover{
    color: #d81b60;
}

@media (max-width: 576px){

    .footer-content{
        flex-direction: column;
        text-align: center;
    }

}

/* ==========================================
   Rechtliche Seiten
========================================== */

.legal-page{
    min-height: calc(100vh - 75px);
    padding: 160px 0 100px;
    background: #111111;
}

.legal-content{
    max-width: 750px;
}

.legal-content h2{
    margin-top: 40px;
    margin-bottom: 15px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
}

.legal-content p{
    color: #d4d4d4;
    font-size: 1.05rem;
    line-height: 1.8;
}

.legal-content a{
    color: #d81b60;
    text-decoration: none;
}

.legal-content a:hover{
    color: #ff4081;
}

/* ==========================================
   HOCHZEIT DETAILSEITE
========================================== */


/* HERO */

.wedding-detail-hero{
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #000;
}

.wedding-hero-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wedding-hero-overlay{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.42) 42%,
            rgba(0,0,0,.05) 75%
        );
}

.wedding-hero-content{
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}

.wedding-hero-content h1{
    max-width: 950px;
    margin: 15px 0 20px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 800;
    line-height: .98;
}

.wedding-hero-content p{
    max-width: 600px;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 1.25rem;
}

.wedding-back{
    display: inline-block;
    margin-bottom: 35px;
    color: rgba(255,255,255,.75);
    text-decoration: none;
}

.wedding-back:hover{
    color: #fff;
}


/* GEMEINSAME BEREICHE */

.wedding-story,
.wedding-feature,
.wedding-app,
.wedding-program,
.wedding-photo,
.wedding-final{
    padding: 110px 0;
}

.wedding-story,
.wedding-program,
.wedding-final{
    background: #101010;
}

.wedding-feature,
.wedding-photo{
    background: #171717;
}

.wedding-app{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 25% 50%,
            rgba(216,27,96,.16),
            transparent 35%
        ),
        #0b0b0b;
}

.wedding-story h2,
.wedding-feature h2,
.wedding-app h2,
.wedding-program h2,
.wedding-photo h2,
.wedding-final h2{
    margin: 12px 0 30px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
}

.wedding-story p,
.wedding-feature p,
.wedding-app p,
.wedding-program p,
.wedding-photo p,
.wedding-final p{
    color: #d4d4d4;
    font-size: 1.05rem;
    line-height: 1.85;
}


/* EINSTIEG */

.wedding-intro{
    max-width: 850px;
    margin: 0 auto;
}


/* BILDER */

.wedding-feature-image,
.wedding-photo-image{
    display: block;
    width: 100%;
    border-radius: 16px;
}


/* APP */

.wedding-app-phone{
    width: auto;
    max-width: 100%;
    max-height: 720px;
}

.wedding-app-note{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 35px;
    padding: 20px 24px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    color: #fff;
}

.wedding-app-note i{
    color: #d81b60;
    font-size: 2rem;
}


/* PROGRAMM */

.wedding-program-content{
    max-width: 850px;
}


/* ABSCHLUSS */

.wedding-final{
    text-align: center;
}

.wedding-final-content{
    max-width: 800px;
    margin: 0 auto;
}

.wedding-final-content .btn{
    margin-top: 25px;
}

.wedding-final-content .btn span{
    margin-right: 7px;
    color: #d81b60;
}


/* SMARTPHONE */

@media (max-width: 767px){

    .wedding-detail-hero{
        min-height: 70vh;
    }

    .wedding-hero-content{
        padding-bottom: 50px;
    }

    .wedding-story,
    .wedding-feature,
    .wedding-app,
    .wedding-program,
    .wedding-photo,
    .wedding-final{
        padding: 75px 0;
    }

    .wedding-app-phone{
        max-height: 560px;
    }

}

/* Zurück-Link am Ende der Hochzeitsseite */

.wedding-back-bottom{
    display: block;
    width: fit-content;
    margin: 35px auto 0;
}

/* Bilder Hochzeit: Überraschung und Brautstrauß */

.wedding-program-image{
    display: block;
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: 16px;
}

.wedding-bouquet{
    width: 100%;
    height: 55vh;
    min-height: 400px;
    overflow: hidden;
    background: #000;
}

.wedding-bouquet-image{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Smartphone */

@media (max-width: 767px){

    .wedding-bouquet{
        height: 50vh;
        min-height: 320px;
    }

}

.wedding-program h2{
    font-size: clamp(2.2rem, 3.5vw, 3.8rem);
}

.wedding-program-image{
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

/* ==========================================
   SEITENÜBERGANG DETAILSEITEN
========================================== */

/* Detailseite kommt von rechts herein */

body.detail-page{
    animation: detailSlideIn 0.6s ease forwards;
}

@keyframes detailSlideIn{

    from{
        transform: translateX(100%);
        opacity: 0.4;
    }

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

}


/* Beim Zurückgehen nach rechts hinaus */

body.detail-page.slide-out{
    animation: detailSlideOut 0.6s ease forwards;
}

@keyframes detailSlideOut{

    from{
        transform: translateX(0);
        opacity: 1;
    }

    to{
        transform: translateX(100%);
        opacity: 0.4;
    }

}

/* ==========================================
   PARTY DETAILSEITE
========================================== */


/* HERO */

.party-detail-hero{
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #000;
}

.party-hero-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.party-hero-overlay{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.45) 0%,
            rgba(0,0,0,.28) 45%,
            rgba(0,0,0,.05) 80%
        );
}

.party-hero-content{
    position: relative;
    z-index: 2;
    padding-left: 140px;
    padding-bottom: 35px;
}

.party-hero-content h1{
    max-width: 950px;
    margin: 15px 0 20px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 800;
    line-height: .98;
}

.party-hero-content p{
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 1.25rem;
}


/* ZURÜCK */

.party-back{
    display: inline-block;
    margin-bottom: 35px;
    color: rgba(255,255,255,.75);
    text-decoration: none;
}

.party-back:hover{
    color: #fff;
}

.party-back-bottom{
    display: block;
    width: fit-content;
    margin: 35px auto 0;
}


/* BEREICHE */

.party-experience,
.party-music,
.party-app,
.party-technology,
.party-photo,
.party-final{
    padding: 110px 0;
}

.party-experience,
.party-technology,
.party-final{
    background: #101010;
}

.party-music,
.party-photo{
    background: #171717;
}

.party-app{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 25% 50%,
            rgba(216,27,96,.16),
            transparent 35%
        ),
        #0b0b0b;
}


/* ÜBERSCHRIFTEN */

.party-experience h2,
.party-music h2,
.party-app h2,
.party-technology h2,
.party-photo h2,
.party-final h2{
    margin: 12px 0 30px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
}


/* TEXT */

.party-experience p,
.party-music p,
.party-app p,
.party-technology p,
.party-photo p,
.party-final p{
    color: #d4d4d4;
    font-size: 1.05rem;
    line-height: 1.85;
}


/* BILDER */

.party-section-image{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}


/* WUNSCH-APP */

.party-app-phone{
    width: auto;
    max-width: 100%;
    max-height: 720px;
}

.party-app-note{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 35px;
    padding: 20px 24px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    color: #fff;
}

.party-app-note i{
    flex-shrink: 0;
    color: #d81b60;
    font-size: 2rem;
}


/* TECHNIK */

.party-technology-content{
    max-width: 900px;
    margin: 0 auto;
}


/* ABSCHLUSS */

.party-final{
    text-align: center;
}

.party-final-content{
    max-width: 800px;
    margin: 0 auto;
}

.party-final-content .btn{
    margin-top: 25px;
}

.party-final-content .btn span{
    margin-right: 7px;
    color: #fff;
}


/* SMARTPHONE */

@media (max-width: 767px){

    .party-detail-hero{
        min-height: 70vh;
    }

    .party-hero-content{
        padding-bottom: 50px;
    }

    .party-experience,
    .party-music,
    .party-app,
    .party-technology,
    .party-photo,
    .party-final{
        padding: 75px 0;
    }

    .party-app-phone{
        max-height: 560px;
    }
    .party-hero-content{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
}

}

/* ==========================================
   FOTOGRAFIE DETAILSEITE
========================================== */


/* HERO */

.photo-detail-hero{
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #000;
}

.photo-hero-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-hero-overlay{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.32) 42%,
            rgba(0,0,0,.03) 75%
        );
}

.photo-hero-content{
    position: relative;
    z-index: 2;
    padding-left: 40px;
    padding-bottom: 55px;
}

.photo-hero-content h1{
    max-width: 900px;
    margin: 15px 0 20px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 800;
    line-height: .98;
}

.photo-hero-content p{
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: 1.25rem;
}

.photo-hero-content .photo-back{
    margin-right: 20px;
}

.photo-hero-content .section-kicker{
    margin-left: 5px;
}
/* ZURÜCK */

.photo-back{
    display: inline-block;
    margin-bottom: 35px;
    color: rgba(255,255,255,.75);
    text-decoration: none;
}

.photo-back:hover{
    color: #fff;
}

.photo-back-bottom{
    display: block;
    width: fit-content;
    margin: 35px auto 0;
}


/* BEREICHE */

.photo-story,
.photo-passion,
.photo-music,
.photo-perspectives,
.photo-possibilities,
.photo-final{
    padding: 110px 0;
}

.photo-story,
.photo-music,
.photo-possibilities,
.photo-final{
    background: #101010;
}

.photo-passion,
.photo-perspectives{
    background: #171717;
}


/* BREITER TEXTBLOCK */

.photo-text-wide{
    max-width: 950px;
    margin: 0 auto;
}


/* ÜBERSCHRIFTEN */

.photo-story h2,
.photo-passion h2,
.photo-music h2,
.photo-perspectives h2,
.photo-possibilities h2,
.photo-final h2{
    margin: 12px 0 30px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
}


/* TEXT */

.photo-story p,
.photo-passion p,
.photo-music p,
.photo-perspectives p,
.photo-possibilities p,
.photo-final p{
    color: #d4d4d4;
    font-size: 1.05rem;
    line-height: 1.85;
}


/* HERVORHEBUNGEN */

.photo-highlight{
    margin: 35px 0;
    padding: 8px 0 8px 25px;
    border-left: 3px solid #d81b60;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
}

.photo-highlight-center{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-left: 0;
    border-bottom: 3px solid #d81b60;
    padding: 15px 20px;
}

.photo-story-jump{
    margin-top: 35px;
}

.photo-emotion{
    margin-top: 35px;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem !important;
    font-weight: 600;
}


/* PLATZHALTER FÜR DIE NOCH FEHLENDEN BILDER */

.photo-placeholder{
    min-height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.45);
    text-align: center;
}

.photo-placeholder i{
    color: #d81b60;
    font-size: 3rem;
}

.photo-placeholder-wide{
    min-height: 380px;
}


/* ABSCHLUSS */

.photo-final{
    text-align: center;
}

.photo-final-content{
    max-width: 850px;
    margin: 0 auto;
}

.photo-final-content .btn{
    margin-top: 25px;
}


/* SMARTPHONE */

@media (max-width: 767px){

    .photo-detail-hero{
        min-height: 70vh;
    }

    .photo-hero-content{
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 35px;
    }

    .photo-story,
    .photo-passion,
    .photo-music,
    .photo-perspectives,
    .photo-possibilities,
    .photo-final{
        padding: 75px 0;
    }

    .photo-placeholder{
        min-height: 300px;
    }

}

.photo-section-image{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.photo-drone-image{
    width: 100%;
    height: 520px;
    object-fit: cover;
}

/* ==========================================
   ÜBER MICH DETAILSEITE
========================================== */


/* HERO */

.about-detail-hero{
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #000;
}

.about-hero-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero-overlay{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.35) 45%,
            rgba(0,0,0,.05) 78%
        );
}

.about-hero-content{
    position: relative;
    z-index: 2;
    padding-left: 40px;
    padding-bottom: 55px;
}

.about-hero-content h1{
    max-width: 900px;
    margin: 15px 0 20px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 800;
    line-height: .98;
}

.about-hero-content p{
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: 1.25rem;
}


/* ZURÜCK */

.about-back{
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 35px;
    color: rgba(255,255,255,.75);
    text-decoration: none;
}

.about-back:hover{
    color: #fff;
}

.about-back-bottom{
    display: block;
    width: fit-content;
    margin: 35px auto 0;
}


/* STATIONEN */

.about-station,
.about-newspaper,
.about-final{
    padding: 110px 0;
}

.about-station-dark{
    background: #101010;
}

.about-station-light{
    background: #171717;
}


/* ÜBERSCHRIFTEN */

.about-station h2,
.about-newspaper h2,
.about-final h2{
    margin: 12px 0 30px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
}


/* TEXT */

.about-station p,
.about-newspaper p,
.about-final p{
    color: #d4d4d4;
    font-size: 1.05rem;
    line-height: 1.85;
}


/* BILDER */

.about-section-image{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}


/* HERVORHEBUNG */

.about-highlight{
    margin: 35px 0;
    padding: 8px 0 8px 25px;
    border-left: 3px solid #d81b60;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.5;
}


/* MEHR-ERFAHREN-LINK */

.about-more{
    display: inline-block;
    margin-top: 15px;
    color: #d81b60;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-decoration: none;
}

.about-more:hover{
    color: #fff;
}


/* ZEITUNGSARTIKEL */

.about-newspaper{
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(216,27,96,.10),
            transparent 40%
        ),
        #0b0b0b;
    text-align: center;
}

.about-newspaper-content{
    max-width: 850px;
    margin: 0 auto;
}

.about-newspaper-content > i{
    display: block;
    margin-bottom: 25px;
    color: #d81b60;
    font-size: 3rem;
}

.about-newspaper-button{
    margin-top: 25px;
    padding: 13px 25px;
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    background: transparent;
}

.about-newspaper-button:hover{
    border-color: #d81b60;
    color: #fff;
    background: #d81b60;
}

.about-newspaper-button i{
    margin-right: 8px;
}


/* ABSCHLUSS */

.about-final{
    background: #101010;
    text-align: center;
}

.about-final-content{
    max-width: 850px;
    margin: 0 auto;
}


/* SMARTPHONE */

@media (max-width: 767px){

    .about-detail-hero{
        min-height: 70vh;
    }

    .about-hero-content{
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 35px;
    }

    .about-station,
    .about-newspaper,
    .about-final{
        padding: 75px 0;
    }

}