/*--------- Laden der Fonts vom eigenen Server ---------*/
/* italianno-400 - latin */
@font-face {
      font-family: 'Italianno';
      font-style: regular;
      font-weight: 400;
      src: url('../fonts/Italianno-Regular.ttf'); /* IE9 Compat Modes */
    }

/* Red Hat - regular */
@font-face {
      font-family: 'RedHat';
      font-style: regular;
      font-weight: 400;
      src: url('../fonts/RedHatText-Regular.ttf'); /* IE9 Compat Modes */
    }

/* versieht Anker-Links mit einem Offset */
/*:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
/*margin:0px 0 0; /* negative fixed header height */
/* } */

/*-------------------- General Style ----------------------*/ 
html {
    height:100%;
    scroll-behavior: smooth;
    }
* {
    box-sizing:border-box;
    }
body {
    width:100%; 
    max-width:1920px;
    height:100%;
    margin:auto;
    font-size:28px;
    font-family: 'RedHat', regular;
    /*color:#606060;*/
    color:#ffffff;
    padding:0;
    text-align:center;
    background-color:#343434;
    background-image: url("../grafics/headerbild_1.jpg");
	background-repeat: no-repeat;
    background-size:cover;
	background-position:center;
    /*background-attachment: fixed;*/
    }
/*--------- h-Tags ---------*/
h1 {
    font-size:60px;
    /*font-weight:100;*/
    margin:0;
    padding-bottom:2%;
    text-align:center;
    font-family: 'Italianno';
}
h2 {
    font-size:60px;
    /*font-weight:100;*/
    margin:0;
    padding-bottom:2%;
    text-align:center;
    font-family: 'Italianno';
    }
/*--------- h-Tags Ende ---------*/
p {
    line-height:1.5em;
    margin:0;
    padding:1.25em;
    }
ul {
    margin:0;
    padding:0;
    }
li {
    margin:0;
    margin-bottom:1em;
    padding:0;
    list-style-type:none;
    }
img {
    max-width:100%;
    height:auto;
    }
a {
    text-decoration:none;
    color:#ffffff;
    }
a:hover {
    color:#c2092a;
    }
a:focus {
    outline:none;
    }
/* ------------------ General Style Ende -------------- */ 
#datenschutz h2, #impressum h2 {
    font-size:34px;
}
#datenschutz, #impressum {
    font-size:16px;
}
/*-------------- Header ---------------------*/
header {
    width:100%;
    max-width:1920px;
    height:100%;
}
#navi {
    height:10%;
    width:100%;
    font-family: 'Italianno', sans-serif;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:right;
    background-color: rgba(0, 0, 0, 0.8);
    position:fixed;
    top:0;
    left:0;
    z-index:20;
}
.navi_inner {
    margin-right:10%;
}
.navi_item {
    display:inline-block;
    padding:10px;
}
.social_links {
    width:100px;
    background:green;
    display:block;
    text-align:left;
    position:relative;
    top:0;
    left:0;
}
.social_icon {
    display:inline-block;
}
#block_header{
    width:50%;
    height:90%;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding:0 0 5% 0;
}
#logo {
    width:80%;
    height:auto; 
    position:relative;
    top:80px;
}
.text_headerbild {
    color:white;
    font-size:48px;
    width:100%;
    margin-top:auto;
    background-color:rgba (0, 0, 0 0.9);
}
.text {
    display:inline-block;
    font-size:40px;
    font-family: 'Italianno', sans-serif;
}
.trenner {
    display:inline-block;
    background:white;
    width:6px;
    padding:0;
}
/* ###########################  1024   ##################### Media Query ### */
@media screen and (max-width:1024px) {
    body {
        background-image: url("../grafics/headerbild_1_4.jpg");
        background-attachment: scroll !important;
        /*background-position:right center;*/
        margin:0;
    }
    #block_header{
        width:100%;
        padding:1% 0 2% 0;
    }
    #logo {
        width:50%;
    }
    .text_headerbild {
        font-size:48px;
        margin-top:28%;
        background:rgba(0, 0, 0, 0.4);
    }  
}
/* ################################################ Media Query ### */
/* ###########################  900   ##################### Media Query ### */
@media screen and (max-width:900px) {
    body {
        background-image: url("../grafics/headerbild_1_1.jpg");
        background-attachment: scroll !important;
    }
    #block_header{
        padding:1% 0 15% 0;
    }
    #logo {
        width:50%;
    } 
    .text_headerbild {
        margin-top:50%;
    }  
}
/* ################################################ Media Query ### */
/* ###########################  425   ##################### Media Query ### */

@media screen and (max-width:425px) {
    body {
        background-image: url("../grafics/headerbild_1_2.jpg");
        font-size:22px;
    }
    #block_header{
        padding:10% 0 35% 0;
    }
    #logo {
        width:100%;
        top:40px;
    }
    .text_headerbild {
        padding:0 2% 0 2%;
        margin-top:30%;
    }
        .text {
    font-size:36px;
    }
}
/* ################################################ Media Query ### */
/* ###########################  375   ##################### Media Query ### */

@media screen and (max-width:375px) {
    /*body {
        background-position:right -200px center;
    }*/
    #block_header{
        padding:10% 0 35% 0;
    }
    #logo {
        width:100%;
        top:80px;
    }
    .text_headerbild {
        padding:0 2% 0 2%;
        margin-top:50%;
    }
}
/* ################################################ Media Query ### */
/*--------------------------- Header Ende ------------------*/
/*--------------------------------------- Sections -------*/
section {
    margin:0;
    min-height:100%;
    display: grid;
    grid-gap:12px;
    grid-column-gap:10%;
    justify-items: center;
    align-content:center;
    padding:0% 10%;
}
.titelzeile {
    grid-column:1 / 3;
    text-align:left;
    width:100%;
    padding-bottom:10px;
    padding-top:4%;
}

.titelzeile h2 {
    text-align:left;
    padding:0;
}

/*-------------- Section Band ----------------*/

.band { 
    grid-template-columns: 1fr 1fr;
    background-image: url("../grafics/headerbild_2.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.guests { 
    grid-template-columns: 1fr 1fr;
    background-color: rgba(0, 0, 0, 0.8);
}
.band .titelzeile, .guests .titelzeile {
    grid-column: 1 / span 2;
    grid-row:1;
    text-align-last: center;
}
.text_band {
    grid-column:1 / span 2;
    grid-row:2;
    padding:1% 2% 4% 2%;
    width:80%;
}

#band_members, #guests_members {
    grid-column:1 / span 2;
    grid-row:3;
    width:100%;
}
.joergie, .tommy, .ole, .lo {
    text-align: center;
    display:inline-block;
    position:relative;
    width:45%;
    margin-left:2%;
    margin-right:2%;
}
.bild {
    /*text-align:right;*/
    display:inline-block;
    width:80%;
    z-index:1;
    padding:3%;
    border:1px solid grey;
    background-color: rgba(0, 0, 0, 0.9);
}
.joergie h2, .tommy h2, .ole h2, .lo h2 {
    text-align:left;
}
.name {
    background-color: rgba(0, 0, 0, 0.8);
    border:1px solid grey;
    position:absolute;
    left:0;
    top:60%;
    width:70%;
    padding:2% 8%;
    z-index:3;
    font-size:24px;
}
.name h2 {
    font-size:40px;
}

/* ################################################ Media Query ### */
/* ###########################  900   ##################### Media Query ### */
@media screen and (max-width:900px) {
    .joergie, .tommy, .ole, .lo {
        width:80%;
        margin-top:2%;
        margin-bottom:2%;
    }
}
/* ###########################  425   ##################### Media Query ### */
@media screen and (max-width:425px) {
    .joergie, .tommy, .ole, .lo {
        width:100%;
        margin-top:2%;
        margin-bottom:2%;
        margin-left:0;
        margin-right:0;
    }
    section {
        padding:0% 2%;
    }
    .text_band {
        padding:2% 0 4% 0;
    }
    .name {
        top:60%;
        width:80%;
        padding:2% 8%;
        font-size:20px;
    }
    .name h2 {
        font-size:32px;
    }
}
/*-------------- Section Band Ende ----------------*/

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

/*-------------------- Footer ----*/

footer {
    padding:1% 0%;
    display:block;
    background:#000000;
}
.footer_nav {
    display:block;
    width:auto;
    height:auto;
    padding:0 2%;
    margin-bottom:2em;
    font-size:18px;
    text-align:center;
}
.footer_nav li {
    display:inline-block;
    margin:0 20px;
}
.footer_nav a {
    color:white;
}

footer li {
    background-image:none;
    margin:0;
    padding:0;
}

.copyright {
    display:block;
    font-size:16px;
    /*font-size:0.9vw;*/
    bottom:10px;
    width:100%;
    text-align:center;
    color:white;
}
/*-------------------- Footer ----*/