/* ========================================= */
/* FallenAngels - style.css                  */
/* ========================================= */


/* ========================================= */
/* Grundeinstellungen                        */
/* ========================================= */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#000;
    color:#ddd;

    font-family:Georgia, serif;

    line-height:1.6;

}


/* ========================================= */
/* Startseite                                */
/* ========================================= */

.homepage-container{

    position:relative;

    width:100%;
    max-width:1600px;

    margin:0 auto;

}

.homepage{

    display:block;

    width:100%;
    height:auto;

}


/* ========================================= */
/* Klickbereiche                             */
/* ========================================= */

.link{

    position:absolute;
    display:block;

    transition:
        background .30s,
        box-shadow .30s,
        transform .25s;

}

/* Musik */

.musik{

    left:6.5%;
    top:54%;

    width:20%;
    height:34%;

}

/* Über uns */

.ueberuns{

    left:28.5%;
    top:54%;

    width:20%;
    height:34%;

}

/* Galerie */

.galerie{

    left:50.5%;
    top:54%;

    width:20%;
    height:34%;

}

/* Gästebuch */

.gaestebuch{

    left:72.5%;
    top:54%;

    width:20%;
    height:34%;

}


/* Hover */

.link:hover{

    background:rgba(139,0,0,.16);

    box-shadow:
        inset 0 0 20px rgba(139,0,0,.35),
        0 0 20px rgba(139,0,0,.18);

}


/* ========================================= */
/* Besucherbereich                           */
/* ========================================= */

.visitor-area{

    text-align:center;

    margin:55px auto 70px;

}


/* Logo */

.fa-logo{

    display:block;

    width:175px;
    height:auto;

    margin:0 auto 30px;

}


/* Grabstein */

.grave-container{

    position:relative;

    display:inline-block;

}

.grave{

    display:block;

    width:470px;
    height:auto;

}


/* Besucherzahl */

.visitor-number{

    position:absolute;

    top:46%;
    left:50%;

    transform:translate(-50%,-50%);

    font-family:"Courier New", monospace;

    font-size:28px;

    letter-spacing:4px;

    color:#f2f2f2;

    text-shadow:
        0 0 8px rgba(255,255,255,.15);

}


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

footer{

    text-align:center;

    color:#777;

    font-size:15px;

    margin:60px 0 30px;

}
/* ========================================= */
/* Musikseite                                */
/* ========================================= */

.seite{

    max-width:1300px;

    margin:60px auto;

    padding:20px;

    text-align:center;

}


/* Banner */

.banner{

    display:block;

    width:70%;

    max-width:760px;

    height:auto;

    margin:20px auto 60px;

}


/* Überschrift */

h1{

    font-family:"Cinzel", serif;

    font-size:46px;

    color:#ececec;

    letter-spacing:2px;

    margin-bottom:20px;

}


/* Einleitung */

.text{

    font-family:"Cormorant Garamond", serif;

    font-size:30px;

    font-style:italic;

    color:#d6d6d6;

    margin-bottom:70px;

}


/* ========================================= */
/* Albumbereich                              */
/* ========================================= */

.song-grid{

    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:40px;
    flex-wrap:wrap;

}

/* Albumkarte */

.karte{

    width:430px;

    min-height:700px;

    padding:22px;

    border-radius:15px;

   background:linear-gradient(
    180deg,
    #232323,
    #141414
);

    border:1px solid #353535;

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

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

.karte:hover{

    transform:translateY(-10px);

    border-color:#8b0000;

    box-shadow:
        0 0 30px rgba(139,0,0,.35);

}


/* Albumcover */

.cover{

    display:block;

    width:100%;
    max-width:395px;

    margin:0 auto 28px;

    border-radius:10px;

    border:2px solid #444;

    box-shadow:
        0 0 15px rgba(0,0,0,.6);

    transition:.35s;
    cursor:pointer;
}

.karte:hover .cover{

    border-color:#8b0000;

    box-shadow:
        0 0 25px rgba(139,0,0,.45);
    transform:scale(1.03);
}


/* Albumtitel */

.karte h3{

    font-family:"Cinzel", serif;

    font-size:34px;

    color:#f0f0f0;

    margin-bottom:18px;

    letter-spacing:1px;

}


/* rote Linie */

.karte h3::after{

    content:"";
    display:block;
    width:140px;
    height:2px;
    background:#8b0000;
    margin:14px auto 20px;

}

/* Beschreibung */

.karte p{

    font-family:"Cormorant Garamond", serif;

    font-size:26px;

    font-style:italic;

    color:#e5e5e5;

    line-height:1.7;

    text-align:center;

}


/* ========================================= */
/* Button                                    */
/* ========================================= */

.button{

    display:inline-block;
    margin-top:70px;
    padding:15px 35px;

    color:#fff;
    text-decoration:none;

    border:1px solid #8b0000;
    border-radius:6px;

    font-family:"Cinzel", serif;
    font-size:18px;
    letter-spacing:1px;

    transition:.35s;

}

.button:hover{

    background:#8b0000;

    box-shadow:
        0 0 15px rgba(139,0,0,.45);

}
/* ========================================= */
/* Responsive Design                         */
/* ========================================= */

@media (max-width: 900px){

    /* Startseite */

    .homepage-container{
        width:100%;
    }

    /* Besucherbereich */

    .fa-logo{
        width:140px;
    }

    .grave{
        width:340px;
    }

    .visitor-number{
        font-size:22px;
        letter-spacing:3px;
    }

    /* Musikseite */

    .banner{
        width:92%;
        max-width:600px;
    }

    h1{
        font-size:34px;
    }

    .text{
        font-size:24px;
        margin-bottom:50px;
    }

    .song-grid{
        flex-direction:column;
        align-items:center;
        gap:40px;
    }

    .karte{
        width:92%;
        max-width:430px;
        min-height:auto;
        padding:20px;
    }

    .cover{
        width:100%;
        max-width:100%;
    }

    .karte h3{
        font-size:28px;
    }

    .karte p{
        font-size:22px;
    }

    .button{
        width:90%;
        max-width:320px;
        padding:16px;
    }

}
/* ========================================= */
/* Albumseite                                */
/* ========================================= */

.album-seite{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.album-seite .cover{
    display:block;
    width:100%;
    max-width:600px;
    margin:0 auto 50px;
}


/* ========================================= */
/* Musik-Player                              */
/* ========================================= */

.musik-player{

    max-width:700px;

    margin:0 auto 35px;

    padding:25px;

    background:linear-gradient(
        180deg,
        #232323,
        #141414
    );

    border:1px solid #353535;

    border-radius:12px;

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

}

.musik-player h2,
.musik-link h2{

    font-family:"Cinzel", serif;

    font-size:25px;

    color:#eeeeee;

    margin-bottom:18px;

}

.musik-player audio{

    width:100%;

}


/* ========================================= */
/* YouTube / SoundCloud                      */
/* ========================================= */

.musik-link{

    max-width:700px;

    margin:0 auto 25px;

    padding:22px;

    background:#161616;

    border:1px solid #353535;

    border-radius:12px;

    transition:.3s;

}

.musik-link:hover{

    border-color:#8b0000;

    box-shadow:
        0 0 20px rgba(139,0,0,.25);

}

.musik-link a{

    display:inline-block;

    padding:10px 25px;

    color:#eeeeee;

    text-decoration:none;

    border:1px solid #8b0000;

    border-radius:6px;

    font-family:"Cinzel", serif;

    font-size:17px;

    letter-spacing:1px;

    transition:.3s;

}

.musik-link a:hover{

    background:#8b0000;

    box-shadow:
        0 0 15px rgba(139,0,0,.45);

}
.album-titel{
    font-family:"Cinzel", serif;
    font-size:58px;
    font-weight:700;
    letter-spacing:4px;
    color:#e8e8e8;
    text-shadow:0 0 10px rgba(139,0,0,.35);
}
/* ========================================= */
/* FallenAngels Radio                        */
/* ========================================= */

.radio-box{

    max-width:700px;

    margin:0 auto 70px;

    padding:28px;

    background:linear-gradient(
        180deg,
        #232323,
        #141414
    );

    border:1px solid #353535;

    border-radius:12px;

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

    text-align:center;

}


.radio-box h2{

    font-family:"Cinzel", serif;

    font-size:28px;

    color:#eeeeee;

    margin-bottom:22px;

    letter-spacing:1px;

}


.radio-button{

    display:inline-block;

    padding:12px 30px;

    color:#eeeeee;

    text-decoration:none;

    border:1px solid #8b0000;

    border-radius:6px;

    font-family:"Cinzel", serif;

    font-size:17px;

    letter-spacing:1px;

    transition:.35s;

}


.radio-button:hover{

    background:#8b0000;

    box-shadow:
        0 0 15px rgba(139,0,0,.45);

}
/* ========================================= */
/* Über-uns-Seite                            */
/* ========================================= */

.ueberuns-inhalt{

    max-width:850px;

    margin:0 auto;

    padding:35px 40px;

    background:linear-gradient(
        180deg,
        #232323,
        #141414
    );

    border:1px solid #353535;

    border-radius:12px;

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

}

.ueberuns-inhalt p{

    font-family:"Cormorant Garamond", serif;

    font-size:25px;

    line-height:1.8;

    color:#e2e2e2;

    margin-bottom:25px;

}

.ueberuns-inhalt p:last-child{

    margin-bottom:0;

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

.galerie-grid{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:40px;

    max-width:900px;

    margin:0 auto 70px;

}


.galerie-bild{

    width:100%;

    height:auto;

    display:block;

    border:1px solid #353535;

    border-radius:10px;

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

    transition:
        transform .35s,
        border-color .35s,
        box-shadow .35s;

}


.galerie-bild:hover{

    transform:scale(1.03);

    border-color:#8b0000;

    box-shadow:
        0 0 25px rgba(139,0,0,.4);

}


/* Galerie auf Handy */

@media (max-width: 700px){

    .galerie-grid{

        grid-template-columns:1fr;

        gap:30px;

        width:92%;

    }

}
/* ========================================= */
/* Einzelbild Galerie                        */
/* ========================================= */

.galerie-einzelbild{

    display:flex;

    justify-content:center;

    margin:20px auto 50px;

}


.galerie-gross{

    display:block;

    width:100%;

   max-width:450px;

    height:auto;

    border-radius:10px;

    border:2px solid #444;

    box-shadow:
        0 0 25px rgba(0,0,0,.7);

}
/* =========================================
GÄSTEBUCH
========================================= */

.gaestebuch-bereich {

width: 90%;

max-width: 900px;

margin: 0 auto 45px;

text-align: center;

}

/* =========================================
ÜBERSCHRIFT
========================================= */

.gaestebuch-bereich h1 {

font-family: "Cinzel", serif;

font-size: 42px;

color: #ececec;

letter-spacing: 2px;

margin-bottom: 18px;

}

/* =========================================
EINLEITUNG
========================================= */

.gaestebuch-bereich .text {

font-family: "Cormorant Garamond", serif;

font-size: 25px;

font-style: italic;

color: #d6d6d6;

margin-bottom: 35px;

}

/* =========================================
ATABOOK
========================================= */

.atabook-frame {

display: block;

width: 100%;

max-width: 250px;

height: 250px;

margin: 0 auto;

border: 1px solid #353535;

border-radius: 10px;

background: #111;

box-shadow:
    0 0 25px rgba(0,0,0,.7);

}

/* =========================================
BUTTON
========================================= */

.button {

display: inline-block;

padding: 13px 28px;

color: #fff;

background: transparent;

text-decoration: none;

border: 1px solid #8b0000;

border-radius: 6px;

font-family: "Cinzel", serif;

font-size: 16px;

letter-spacing: 1px;

transition: .35s;

}

.button {

background: #8b0000;

box-shadow:
    0 0 15px rgba(139,0,0,.45);

}

/* =========================================
FOOTER
========================================= */

footer {

text-align: center;

color: #777;

font-size: 15px;

margin: 50px 0 30px;

}

/* =========================================
MOBILE
========================================= */

@media (max-width: 900px) {

.gaestebuch-bereich {

    width: 94%;

}


.gaestebuch-bereich h1 {

    font-size: 32px;

}


.gaestebuch-bereich .text {

    font-size: 21px;

}


.atabook-frame {

    height: 400px;

}

}