html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2 {
    text-align: center;
    font-family: 'Raleway', sans-serif;
}

h1 {
    color: #B7767D;
    font-size: 48px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0;
}

p {
    font-family: 'Lato', sans-serif;
    font-size: 18px
}

h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 32px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0;

}

header {
    height: 260px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    grid-column: 1/-1;
}

header img {
    max-height: 260px
}

nav {
    margin: 0 10px;
}

nav div.grid-item1 a img {
    height: 130px;
    margin: 0px;
    padding: 0;
}


nav .grid-item1 {
    background-color: #91B34F;
    grid-column: 1/3;
    max-height: 130px;
    margin: 0;
}

nav div.grid-item {
    grid-column: 3/-1;
    align-items: center;
    background-color: #91B34F;
    padding-right: 20px;
    margin: 0;
}


nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul.grid-item {
    background-color: #91B34F;
    margin: 20px 0px;
    grid-column: 1/-1;
}

nav ul li a {
    display: block;
    font-family: 'Raleway', sans-serif;
    padding: 20px;
    text-decoration: none;
    text-transform: uppercase;
    color: #727272;
    font-size: 22px;
}

nav ul li ul li a {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    color: #727272;
}

nav ul li a:hover {
    color: #F7F1DA;
}

nav ul li ul {
    background-color: #4BB4BF;
    margin-top: 0px;
}

nav ul li ul li {
    padding-left: 40px;
}

nav a.current {
    color: #F7F1DA
}


nav ul.grid-item {
    display: none;
}

nav div#menu:target ul.grid-item {
    display: block;
}

nav div.grid-item {
    display: flex;
    justify-content: flex-end;
}

nav div.grid-item a.close {
    display: none;
}

nav div#menu:target div.grid-item a.close {
    display: block;
}

nav div#menu:target div.grid-item a.open {
    display: none;
}


/* ------------------------------------ Start ------------------------------------- */


#start .grid-container {
    margin: 0 10px;
    grid-gap: 20px;
}

#start header {
    grid-column: span 4;
    height: 260px;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie galerie_phone.jpg")
}

#start header h1 {
    padding-top: 80px;
}

#start header h2 {
    display: none
}


#start div.icons {
    display: none;
}

#start div.grid-item {
    display: grid;
    grid-column: span 4;
    padding: 30px 0px;
}


#start div.grid-item a {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: black;
    text-align: center;
    padding: 10px;
    border: 1px solid #AFA9A9;
    margin-top: 10px
}

#start div.grid-item1 {
    grid-column: span 4;
}

#start div.grid-item2 {
    display: none;
}



#start div.angebote {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    grid-column: span 4;
    padding: 30px 0px;
}

#start h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    grid-column: 1/-1;
    font-weight: bold;
    text-align: center;
}


#start div.angebote img {
    grid-column: span 2;
}



/* ------------------------------------ Shoppen ----------------------------------- */

#shoppen header {
    height: 260px;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie Shopping _phone.jpg");
}


#shoppen header h1 {
    padding-top: 70px;
}

#shoppen h2 {
    display: none;
}




#shoppen a {
    grid-column: span 2;
    padding: 10px;
}

#shoppen form {
    grid-column: span 4;
    padding: 0px 10px;
    grid-gap: 0px;
}

#suche {
    border: 1px solid #AFA9A9;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-style: italic;
    height: 45px;
    width: 235px;
    padding: 20px 10px;
    transition: width 0.5s ease-in-out;
}

#suche:focus {
    font-size: 15px;
}

#shoppen button {
    border: none;
    background-color: #91B34F;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    height: 45px;
    width: 140px;
    color: white;
}



#shoppen fieldset.align {
    border: none;
    grid-column: 1/-1;
    padding: 0;
    margin: 0;
}

#shoppen label {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: bold;
}

#shoppen fieldset.align select {
    padding: 8px;
    box-sizing: content-box;
    width: 360px;
}

#shoppen option {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    width: 360px;
}


#shoppen option[value="bg"] {
    background-color: #F2908A;
}

#shoppen option[value="dl"] {
    background-color: #D8ABEF;
}

#shoppen option[value="gast"] {
    background-color: #89CDD9;
}

#shoppen option[value="hd"] {
    background-color: #908D8D;
}

#shoppen option[value="lg"] {
    background-color: #91B34F;
}

#shoppen option[value="ma"] {
    background-color: #DD979F;
}

#shoppen option[value="shf"] {
    background-color: #FAE69B;
}

#shoppen option[value="tf"] {
    background-color: #60A6B2;
}

#shoppen option[value="tt"] {
    background-color: #D0FC7C;
}

#shoppen option[value="gp"] {
    background-color: #3DDB60;
}




#shoppen.bg a {
    display: none;
}

#shoppen.bg a.bg {
    display: block;
}

#shoppen.bg #BG {
    border: 2px solid orange;
}



#shoppen.dl a {
    display: none;
}

#shoppen.dl a.dl {
    display: block;
}

#shoppen.dl #Dl {
    border: 2px solid orange;
}



#shoppen.gast a {
    display: none;
}

#shoppen.gast a.gast {
    display: block;
}

#shoppen.gast #Gast {
    border: 2px solid orange;
}



#shoppen.hd a {
    display: none;
}

#shoppen.hd a.hd {
    display: block;
}

#shoppen.hd #HD {
    border: 2px solid orange;
}



#shoppen.lg a {
    display: none;
}

#shoppen.lg a.lg {
    display: block;
}

#shoppen.lg #LG {
    border: 2px solid orange;
}



#shoppen.ma a {
    display: none;
}

#shoppen.ma a.ma {
    display: block;
}

#shoppen.ma #MA {
    border: 2px solid orange;
}



#shoppen.shf a {
    display: none;
}

#shoppen.shf a.shf {
    display: block;
}

#shoppen.shf #SHF {
    border: 2px solid orange;
}



#shoppen.tf a {
    display: none;
}

#shoppen.tf a.tf {
    display: block;
}

#shoppen.tf #TF {
    border: 2px solid orange;
}



#shoppen.tt a {
    display: none;
}

#shoppen.tt a.tt {
    display: block;
}

#shoppen.tt #TT {
    border: 2px solid orange;
}



#shoppen.gp a {
    display: none;
}

#shoppen.gp a.gp {
    display: block;
}

#shoppen.gp #GP {
    border: 2px solid orange;
}



/*------------------------------------ Shopseiten -----------------------------------------*/


#shops .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 0px;
}



#shops .grid-item {
    grid-column: span 4;
    padding: 5px;
    background-color: #E5E5E5;
    margin-top: 35px;
    margin-left: 10px;
    margin-right: 10px;
}

#shops .grid-item1 {
    grid-column: span 4;

    background-color: #E5E5E5;
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
}

#shops .grid-item1 p {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 24px;
}

#shops .grid-item2 {
    display: grid;
    grid-template-columns: 1fr 3fr;

    grid-column: span 4;
    margin-top: 15px;
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
}

#shops .grid-item2 p {

    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    padding-left: 15px;
    padding-top: 0px;
    margin-top: 0;
}

#shops .grid-item3 {
    grid-column: span 4;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid black;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #E5E5E5;
    margin-top: 35px;
}


#shops h2 {
    grid-column: 1/-1;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 36px;
    color: #B7767D;
    text-transform: uppercase;
}

#shops h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #B7767D;
    text-align: center;
}



#shops h4 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 26px;
    color: #91B34F;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 15px;
}

#shops .grid-item p {
    grid-column: span 4;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: 18px;

}

#shops a {
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    color: black;
    padding-left: 15px;
    padding-top: 0px;
    margin-top: 30px;
}

#shops img.logo {
    display: flex;
    margin: 0 auto;
    width: 280px;
    height: 280px;
}

#shops img.telefon {
    display: flex;
    width: 40px;
    height: 40px;
    padding-left: 60px;
    margin-bottom: 30px;
    margin: 0;
}

#shops img.erdkugel {
    display: flex;
    width: 40px;
    height: 40px;
    padding-left: 60px;
    padding-top: 25px
}

#shops img.lageplan {
    display: flex;
    margin: 0 auto;
    width: 360px;
    height: 340px;
}

#shops .grid-item4 {
    grid-column: span 4;

}


/*--------------------------------------- Events ---------------------------------------*/

#events .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 0px;
}

#events header {
    grid-column: span 4;
    height: 260px;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie events _phone.jpg");

    background-position: center;
    background-repeat: no-repeat;
}

#events header img {

    max-height: 260px;
    margin-left: 0px;
    margin-bottom: 35px;
    padding: 0;
}

#events header h1 {
    font-weight: 700;
    font-size: 48px;
    text-align: center;
    padding-top: 40px;
    color: #B7767D;
    text-transform: uppercase;
}

#events header h2 {
    display: none;
}

#events .grid-item {
    grid-column: span 4;

    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;

}

#events img {
    width: 280px;
    height: 220px;
}

#events h3 {
    color: #9ECF5F;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 24px;
    text-align: left;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 0px;
}

#events h4 {
    color: black;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 21px;
    text-align: left;
    padding: 5px;
    margin-top: 0;
    margin-bottom: 10px;
}



#events p {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 5px;
}

#events a {
    color: black;
    font-weight: 700;
    text-decoration: none;
}




/*------------------------------------------- News ----------------------------------*/

#news .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 0px;
}

#news header {
    grid-column: span 4;
    height: 260px;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie news_phone.jpg");

    background-position: center;
    background-repeat: no-repeat;
}

#news header img {

    max-height: 260px;
    margin-left: 0px;
    margin-bottom: 35px;
    padding: 0;
}

#news header h1 {
    font-weight: 700;
    font-size: 48px;
    text-align: center;
    padding-top: 60px;
    color: #B7767D;
    text-transform: uppercase;
}

#news header h2 {
    display: none;
}

#news .grid-item {
    grid-column: span 4;

    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;

}

#news img {
    width: 380px;
    height: 220px;
}

#news h3 {
    color: #9ECF5F;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 24px;
    text-align: left;
    padding: 5px;
}

#news p {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 5px;
}

#news a {
    color: black
}




/* -------------------------------------------------- Ueber Uns -------------------------------------------------- */

#ueber_uns img {
    max-width: 100%;
}

#ueber_uns header {
    height: 260px;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie Über Uns _phone.jpg");
    background-position: center;
    background-repeat: no-repeat;
}

#ueber_uns h1 {
    padding: 80px 40px;
}

#ueber_uns .grid-item {
    grid-column: span 4;
    border: 1px solid black;
    margin: 20px 10px;
}

#ueber_uns .grid-item img.tablet,
#ueber_uns .grid-item img.desktop {
    display: none;
}


#ueber_uns {
    text-align: center;
}


#ueber_uns img.gross {
    display: none;
}

#ueber_uns img.klein {
    grid-column: 1/-1;
    margin-left: 10px;
    margin-right: 10px;

}





/* ------------------------------------ Galerieplan ------------------------------- */

#galerieplan header {
    height: 260px;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie galerie_phone.jpg");
}


#galerieplan header h1 {
    padding-top: 100px;
}



#galerieplan .grid-item {
    grid-column: span 4;
    padding: 0px;
    margin:40px 10px;
}



#galerieplan .grid-item div {

    background-color: #E5E5E5;
    margin-bottom: 20px;
    padding-top: 10px;
}

#galerieplan div h3 {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 20px;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    font-size: 20px;
    background-color: #F7F1DB;
    text-align: right;
    margin: 0px 0px 0px 250px;
    padding: 0;
}

#galerieplan img {
    padding: 0px;
}

#galerieplan div.suche {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 20px;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
    font-size: 20px;
    background-color: #727272;
    color: #F7F1DA;
    padding: 10px;
}



/*-------------------------------------- Kontakt -------------------------------------*/

#kontakt .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 0px;
}

#kontakt header {
    grid-column: span 4;
    height: 260px;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie Kontakt_PHONE.jpg");


    background-position: center;
    background-repeat: no-repeat;
}

#kontakt header img {

    max-height: 260px;
    margin-left: 0px;
    margin-bottom: 35px;
    padding: 0;
}

#kontakt header h1 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 48px;
    text-align: center;
    padding-top: 100px;
    color: #B7767D;
    text-transform: uppercase;
}

#kontakt header h2 {
    display: none;
}

#kontakt h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 24px;
    text-align: left;
    padding-left: 30px;
}

#kontakt form {
    grid-column: span 4;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #E5E5E5;
    border-radius: 5px;
    margin-top: 10px;
}

#kontakt input,
textarea {
    margin-left: -5px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    border: 0px;
    box-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);
}

#kontakt input.radiobuttons {

    box-shadow: none;
}

#kontakt form label {
    display: grid;

    grid-column: span 4;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
    padding-top: 10px;
    align-items: baseline;
}

#kontakt form label.radiobuttons {
    padding-left: 50px;
    display: block;
}

#kontakt form label.radiobuttons_frau {
    display: block;
    padding-left: 46px;
}

#kontakt form label.radiobuttons span {
    padding-left: 20px;
    grid-column: 2;
    padding-right: 200px;
}

#kontakt form label.radiobuttons_frau span {
    padding-left: 20px;
}

#kontakt form label,
form button,
form textarea {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

#kontakt form button {
    grid-column: 2/span 2;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: #C4C4C4;
    margin-bottom: 50px;
    margin-left: 100px;
    box-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);
}

#kontakt form textarea {
    height: 270px;
    margin-bottom: 10px;
    border-radius: 5px;
}

#kontakt form label span {
    position: relative;
}

#kontakt form label span::before {
    position: absolute;
    content: "";

    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    top: 1px;

    left: -24px;
    box-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);
}

#kontakt form label span::after {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    background-color: #c4c4c4;
    ;
    border-radius: 50%;
    top: 5px;
    left: -21px;

    display: none;
}

#kontakt input[type="radio"]:checked + span::after {
    display: block;
}






/* ----------------------------------- Impressum -------------------------------------- */


#impressum {
    margin: 0 10px;
}

#impressum header {
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galeriel imp dat _phone.jpg");
}

#impressum header h1 {
    padding-top: 80px;
}


#impressum div.grid-container {

    background-color: #E5E5E5;

}

#impressum h3 {
    grid-column: 1/-1;
    font-weight: 600;
    padding: 0 10px;
}

#impressum p,
#impressum span {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    grid-column: 1/-1;
}

#impressum p {
    padding: 0 10px;
}

#impressum span {
    font-weight: bold;
}


/* ---------------------------------- Parken & Anreise ---------------------------------------- */



#parken header {
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie parken _phone.jpg");
}


#parken h1 {
    padding-top: 70px
}

#parken h3 {
    grid-column: 1/-1;
    font-weight: 600;
    text-align: center;
    padding: 10px;
}

#parken h4 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    grid-column: 1/-1;
    margin-top: 60px;
}


#parken p {
    text-align: center;
    grid-column: 1/-1;
    padding: 0 20px;
}

#parken span {
    text-decoration: underline;
}

#parken img {
    box-sizing: border-box;
    border-bottom: none;
    max-height: 100%;
    grid-column: 1/-1;
    margin-top: 40px;
    margin-bottom: 60px;
}

#parken div.parkplatz {
    grid-column: 1/-1;
    background-image: url("../Images/parken/Smartphone_parken.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 360px;
    margin-bottom: 50px;
}

#parken div.grid-item {
    grid-column: 1/-1;
    background-image: url("../Images/parken/freie Parkplätze_smartphone.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 340px;
}

#parken div.grid-item1,
#parken div.grid-item2 {
    grid-column: 1/-1;
}

#parken div.grid-item1 h4,
#parken div.grid-item1 p,
#parken p.bold {
    grid-column: 1/-1;
    text-align: left;
    padding: 0 20px;
}

/*-------------------------------------------------- Bildergalerie -----------------------------------------------*/

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
    margin-bottom: 40px;

}

#bildergalerie header {
    grid-column: span 4;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie Bildergalerie _phone.jpg");
    background-repeat: no-repeat;
    background-position: center;
    height: 260px;
    margin-bottom: 35px;
    margin-top: 0px;
}

#bildergalerie header img {

    max-height: 260px;
    margin-top: 0px;

    padding: 0;
}

#bildergalerie header h1 {
    grid-column: span 4;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 48px;
    text-align: center;
    padding-top: 110px;
    color: #B7767D;
    text-transform: uppercase;
    margin-top: 0px;
}

#bildergalerie h2 {
    grid-column: span 4;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    color: #91B34F;
    font-size: 32px;
    font-weight: 600;
    margin-top: 10px;
    border-bottom: solid #727272;
    padding-bottom: 3px;
    border-bottom-width: medium;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 15px;
}


#galerie-container img {
    width: 100%;
    display: block;

}


#zoomed-image,
#galerie-container #thumbnails {
    grid-column: span 4;
    margin-left: 10px;
    margin-right: 10px;
}

#zoomed-image img {
    height: 400px;
    object-fit: cover;
}

#zoomed-image {
    position: relative;
}




div#thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 380px;

    padding-right: 0px;
    grid-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 10px;
}

#thumbnails img {
    width: 70px;
    height: 70px;

    cursor: pointer;
    display: block;

    padding: 0px;
}



#thumbnails .current {
    outline: 5px solid black;
    outline-offset: -5px;
}


/*2. Galerie*/

#zoomed-image2,
#galerie-container #thumbnails2 {
    grid-column: span 4;
    margin-left: 10px;
    margin-right: 10px;
}

#zoomed-image2 img {
    height: 400px;
    object-fit: cover;
}

#zoomed-image2 {
    position: relative;
}



div#thumbnails2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 380px;
    padding-left: 0px;
    padding-right: 0px;
    grid-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 10px;
    margin-right: 10px;
}

#thumbnails2 img {
    width: 70px;
    height: 70px;

    cursor: pointer;
    display: block;

    padding: 0px;
}



#thumbnails2 .current {
    outline: 5px solid black;
    outline-offset: -5px;
}

/*3. Galerie*/

#zoomed-image3,
#galerie-container #thumbnails3 {
    grid-column: span 4;
    margin-left: 10px;
    margin-right: 10px;
}

#zoomed-image3 img {
    height: 400px;
    object-fit: cover;
}

#zoomed-image3 {
    position: relative;
}



div#thumbnails3 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 380px;
    padding-left: 0px;
    padding-right: 0px;
    grid-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 10px;
    margin-right: 10px;
}

#thumbnails3 img {
    width: 70px;
    height: 70px;

    cursor: pointer;
    display: block;

    padding: 0px;
}



#thumbnails3 .current {
    outline: 5px solid black;
    outline-offset: -5px;
}






/* ---------------------------------- Öffnungszeiten ----------------------------- */

#openingtimes header {
    height: 260px;
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie Öffnungszeiten _phone.jpg");
    background-position: center;
    background-repeat: no-repeat;
}

#openingtimes header img {
    max-height: 260px
}

#openingtimes header h1 {
    font-size: 36px;
    padding-top: 90px;
}

#openingtimes .grid-container {
    margin: 0 10px;
}

#openingtimes p {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: 600;
}

#openingtimes .grid-item {
    grid-template-columns: 1fr;
    text-align: center;
    padding-left: 10px;
}

#openingtimes .grid-item1 {
    grid-column: span 3;
    padding-left: 10px;
}

#openingtimes h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    color: #91B34F;
    grid-column: 1/-1;
    text-align: center;
}


/* ----------------------------------- Concierge phone ----------------------------------------- */

section#concierge .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 0px;
}

#concierge header {
    background-image: url("../Images/headers/phone 380 x 260/Header Tal Galerie Concierge_Phone.jpg");
    height: 260px;
    background-position: center;
    background-repeat: no-repeat;
}

#concierge header h2 {
    padding-top: 150px;
    text-align: center;
    color: #B7767D;
    font-family: 'Raleway', sans-serif;
    display: none;
}



section#concierge div.grid-item {
    margin-right: 10px;
    margin-left: 10px;
    grid-column: span 4;
}

section#concierge div.grid-item1 {
    margin-right: 10px;
    margin-left: 10px;
    grid-column: span 4;
}



section#concierge h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 10px;
    font-size: 32px;
    grid-column: 1/-1;
}

section#concierge img.logo {
    margin: 0 auto;
    width: 300px;
    height: 300px;
}

section#concierge p.p {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
}

section#concierge p {
    font-family: 'Lato', sans-serif;
    text-align: left;
    font-size: 18px;
    padding: 10px;
}


section#concierge div.grid-item {
    background-color: #E5E5E5;
}

section#concierge hr {
    margin-left: 70px;
    margin-top: 0px;
    margin-right: 10px;
}

section#concierge h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    color: #91B34F;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-column: span 4;
    padding-top: 10px;
    padding-left: 70px;
    padding-bottom: 0px;
    padding-right: 10px;
    margin-bottom: 5px;
    margin-top: 0px;
}




section#concierge img.icon {
    height: 25px;
    width: 25px;
    grid-column: 4;
    background-color: #c4c4c4;
    border: solid black 1px;
}



section#concierge img {
    width: 380px;
    height: 350px;
}




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

#footer div.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0px;
    margin-top: 120px;
}

#footer div.icon {
    padding: 0px 10px;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    grid-column: span 4;
}

#footer div.icon img {
    max-height: 100%;
}

#footer div.icon a {
    display: inline-grid;
    padding: 10px 0;
}



#footer div.grid-item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column: span 4;
    background-color: #91B34F;
    margin: 0;
    padding: 0;
}

#footer div.grid-item div.zahlung {
    grid-column: 1/-1;
    grid-column: 1fr 3fr;
}

#footer div.grid-item div.adresse {
    grid-column: 1/-1;
}


#footer h3 {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 20px;
    align-items: center;

    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 16px;
    padding-left: 10px;

}

#footer ul li a,
#footer dd,
#footer dt {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: black;
    padding: 10px 10px;

}

#footer div.adresse dd {
    margin: 0;
}

#footer div.adresse p {
    display: grid;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    grid-template-columns: auto 1fr;

    grid-gap: 20px;
    padding: 10px 20px;
    align-items: center;
}

#footer div.zahlung p {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    font-weight: 200;
    font-size: 18px;
    text-align: center;
    padding-bottom: 0;
}

#footer nav {
    display: flex;
    margin: auto;
    justify-content: space-around;
}

#footer nav a {
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 16px;
    padding: 20px 10px 20px 10px;
    color: black;
}

#footer nav a:focus,
#footer nav a:hover,
#footer nav a:active,
#footer nav a.current {
    color: #F7F1DA;
    border: none;
    outline: none;
}



/* ---------------------------------------------------------------Tablet ------------------------------------------------ */


@media (min-width:600px) {

    .grid-container {
        grid-template-columns: repeat(8, 1fr);
    }

    nav ul.grid-item {
        grid-column: 5/-1;
    }

    nav div.grid-item1 a img {
        height: 160px;
        margin: 0px;
        padding: 0;
    }

    nav div.grid-item1 {
        max-height: 160px;
    }

    nav ul li a:hover {
        color: #F7F1DA;
    }

    /* ------------------------------------ Start ------------------------------------- */

    #start header {
        grid-column: span 8;
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie galerie_tablet.jpg")
    }

    #start header h1 {
        padding-top: 50px;
    }

    #start header h2 {
        display: block;
        font-size: 18px;
        padding: 0 10px;
    }



    #start div.grid-item {
        display: grid;
        grid-column: span 4;

    }


    #start div.grid-item a {
        font-family: 'Raleway', sans-serif;
        font-size: 24px;
        font-weight: bold;
        text-decoration: none;
        color: black;
        text-align: center;
        padding: 20px;
        border: 1px solid #AFA9A9;
        margin-top: 10px
    }


    #start h4 {
        font-family: 'Raleway', sans-serif;
        font-size: 24px;

        font-weight: bold;
        text-align: center;
    }

    #start div.grid-item1 {
        display: none;
    }

    #start div.grid-item2 {
        display: block;
        padding: 10px 30px;
        grid-column: span 8;
    }



    #start div.angebote {
        margin: 0;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 20px;
        grid-column: span 8;

    }

    #start div.angebote img {
        grid-column: span 3;
        padding: 0;
        margin: 0;
    }

    #start div.angebote img.img1,
    #start div.angebote img.img3 {
        grid-column: 2/span 3;
    }




    /* ------------------------------------ Shoppen ----------------------------------- */

    #shoppen header {
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie shopping_tablet.jpg");
    }


    #shoppen header h1 {
        padding-top: 50px;
    }

    #shoppen h2 {
        display: block;
        color: black;
        font-size: 18px;
        font-weight: bold;
        padding: 0 20px;
        margin: auto;
    }

    #shoppen form {
        grid-column: 2/8;
        padding: 0px 10px;
        font-family: 'Raleway', sans-serif;
        font-weight: bold;
        font-size: 14px;
    }

    #suche {
        width: 435px;
    }

    #shoppen fieldset.align {
        grid-column: 2/8
    }

    #shoppen fieldset.align select {
        width: 560px;
    }


    /*---------------------------------------------------------- Shopseiten -----------------------------------------*/


    #shops .grid-container {
        grid-template-columns: repeat(8, 1fr);
    }

    #shops .grid-item {
        grid-column: span 8;
        padding: 5px;
        background-color: #E5E5E5;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 35px;
    }

    #shops .grid-item1 {
        grid-column: 2/span 6;
        background-color: #E5E5E5;
        margin: 0;
        margin-top: 40px
    }

    #shops .grid-item1 p {
        font-family: 'Raleway', sans-serif;
        text-align: center;
        font-size: 24px;
    }

    #shops .grid-item2 {
        display: grid;
        grid-template-columns: 1fr 3fr;

        grid-column: span 4;
        margin-top: 15px;
        margin-bottom: 0;
        margin-left: 10px;
        margin-right: 10px;
    }

    #shops .grid-item2 p {
        font-family: 'Raleway', sans-serif;
        font-size: 24px;
        padding-left: 15px;
        padding-top: 70px;
        margin-top: 0;
    }

    #shops .grid-item3 {
        grid-column: span 8;

        padding-top: 10px;
        padding-bottom: 10px;
        border: 1px solid black;
        margin-left: 10px;
        margin-right: 10px;
        background-color: #E5E5E5;
        margin-top: 35px;
    }


    #shops h4 {
        margin-top: 70px;
    }


    #shops .grid-item p.letztes {
        padding-bottom: 70px;
    }


    #shops a {
        text-decoration: none;
        font-family: 'Raleway', sans-serif;
        font-size: 24px;
        color: black;
        padding-left: 15px;
        padding-bottom: 10px;

    }

    #shops img.logo {
        width: 280px;
        display: flex;
        margin: 0 auto;

    }

    #shops img.telefon {
        display: flex;
        width: 40px;
        height: 40px;
        padding-left: 50px;
        padding-top: 70px;
        margin-bottom: 30px;
        margin: 0;
    }

    #shops img.erdkugel {
        display: flex;
        width: 40px;
        height: 40px;
        padding-left: 50px;
        padding-bottom: 50px
    }

    #shops img.lageplan {
        display: flex;
        margin: 0 auto;
        width: 580px;
        height: 530px;
    }

    #shops .grid-item4 {
        grid-column: 2/span 3;

    }


    /*--------------------------------------- Events -----------------------------------*/

    #events .grid-container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 20px;
        grid-row-gap: 0px;
        padding: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }



    #events header {
        grid-column: span 8;
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie events_tablet.jpg");

        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 35px;
    }

    #events header img {
        max-height: 320px;
        margin-left: 0px;
        margin-bottom: 35px;

    }

    #events header h1 {
        font-weight: 700;
        font-size: 48px;
        text-align: center;
        padding-top: 25px;
        color: #B7767D;
        text-transform: uppercase;
    }

    #events header h2 {
        display: block;
        color: black;

        font-family: 'Raleway', sans-serif;
        font-weight: 700;
        font-size: 36px;
        text-align: center;
    }

    #events .grid-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column: span 8;
        margin-right: 0px;
    }



    #events img {
        grid-column: span 1;
        width: 380px;
        height: 370px;
        margin-right: 0px;
    }

    #events div.klang {
        grid-column: 1;
        grid-row: 1;
        margin-top: 5px;
    }

    #events h3 {
        margin-top: 5px;
    }

    #events p {
        padding: 5px;
    }

    #events div.klang p {
        text-align: right;
        padding-right: 10px;
    }

    #events div.klang h3 {
        text-align: right;
        padding-right: 10px;
    }

    #events div.klang h4 {
        text-align: right;
        padding-right: 10px;
    }

    /* --------------------------------------- Galerieplan ------------------------------------- */

    #galerieplan .grid-item {
        grid-column: span 8;
    }


    #galerieplan div h3 {
        padding: 10px 80px 10px 0px;
        margin-left: 500px;
    }

    /*---------------------------------------- News ----------------------------------*/

    #news .grid-container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 20px;
        grid-row-gap: 0px;
        padding: 0px;
        margin-left: 10px;
        margin-right: 10px;
    }



    #news header {
        grid-column: span 8;
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie news_tablet.jpg");

        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 35px;
    }

    #news header img {

        max-height: 320px;
        margin-left: 0px;
        margin-bottom: 35px;
    }

    #news header h1 {
        font-weight: 700;
        font-size: 48px;
        text-align: center;
        padding-top: 25px;
        color: #B7767D;
        text-transform: uppercase;
    }

    #news header h2 {
        display: block;
        color: black;

        font-family: 'Raleway', sans-serif;
        font-weight: 700;
        font-size: 36px;
        text-align: center;
    }

    #news .grid-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column: span 8;

        margin: 0px;
        padding: 0;
    }



    #news img {
        grid-column: span 1;
        width: 380px;
        height: 370px;
    }

    #news div.monstera {
        grid-column: 1;
        grid-row: 1;
        margin-top: 5px;
    }

    #news h3 {
        margin-top: 5px;
    }

    #news p {
        padding: 5px;
    }



    /* -------------------------------------Ueber Uns -------------------------------- */

    #ueber_uns header {
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie Über Uns_tablet.jpg");
    }

    #ueber_uns h1 {
        padding-top: 140px;
    }


    #ueber_uns .grid-item {
        grid-column: span 8;
    }

    #ueber_uns .grid-item img.tablet {
        display: block;
    }

    #ueber_uns .grid-item img.phone,
    #ueber_uns .grid-item img.desktop {
        display: none;
    }

    #ueber_uns img.gross {
        display: block;
        width: 780px;
        grid-column: span 8;
        margin-left: 10px;
        margin-right: 10px;
    }

    #ueber_uns img.klein {
        display: none;
    }


    /* ------------------------------------ Galerieplan ------------------------------- */

    #galerieplan header {
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie galerie_tablet.jpg")
    }

    #galerieplan header h1 {
        padding-top: 140px;
    }





    /*-------------------------------------- Kontakt -----------------------------------*/

    #kontakt .grid-container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 20px;
        padding: 0px;
    }

    #kontakt header {
        grid-column: span 8;
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie kontakt_tablet.jpg");


        background-position: center;
        background-repeat: no-repeat;
    }

    #kontakt header img {

        max-height: 320px;
        margin-left: 0px;
        margin-bottom: 35px;
        padding: 0;
    }

    #kontakt header h1 {
        font-weight: 700;
        font-size: 48px;
        text-align: center;
        padding-top: 60px;
        color: #B7767D;
        text-transform: uppercase;
    }

    #kontakt header h2 {
        display: block;
        font-family: 'Raleway', sans-serif;
        font-size: 36px;
        color: black;
    }

    #kontakt h3 {
        grid-column: 1;
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
        font-size: 32px;
        text-align: left;
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 5px;
    }

    #kontakt form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column: span 8;
        margin-left: 10px;
        margin-right: 10px;
        background-color: #E5E5E5;
        border-radius: 5px;
        margin-top: 45px;
    }






    #kontakt form label {


        grid-column: 1;
        padding-left: 30px;
        padding-right: 60px;
        padding-bottom: 15px;
        padding-top: 10px;
        align-items: baseline;
    }

    #kontakt form label.spalte2 {
        grid-column: 2;
    }

   
    #kontakt form label.radiobuttons {
        padding-left: 55px;

    }

    #kontakt form label.radiobuttons_frau {
        display: block;
        padding-left: 50px;
    }

    #kontakt form label.radiobuttons span {
        padding-left: 20px;
        grid-column: 2;

    }

    #kontakt form label.radiobuttons_frau span {
        padding-left: 20px;
    }



    #kontakt form label.betreff {
        grid-column: span 8;
        margin-left: 0px;
        margin-right: 5px;

    }

    #kontakt form label,
    form button,
    form textarea {
        font-family: 'Lato', sans-serif;
        font-size: 20px;
    }

    #kontakt form button {
        grid-column: 1/span 1;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        border: 1px solid black;
        border-radius: 5px;
        background-color: #C4C4C4;
        margin-bottom: 50px;
        margin-left: 25px;
        margin-right: 115px
    }

    #kontakt form label.feedback {
        grid-column: span 8;
        margin-left: 0px;
        margin-right: 5px;
    }

    #kontakt form textarea {
        height: 220px;

    }

    #kontakt form label span {
        position: relative;
    }

    #kontakt form label span::before {
        position: absolute;
        content: "";

        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
        top: 2px;

        left: -19px;
        box-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);

    }

    #kontakt form label span::after {
        position: absolute;
        content: "";
        width: 12px;
        height: 12px;
        background-color: #c4c4c4;

        border-radius: 50%;
        top: 6px;
        left: -16px;

        display: none;
    }

    #kontakt input [type="radio"]:checked + span::after {
        display: block;

    }


    /* -------------------------------- Impressum ------------------------------- */

    #impressum header {
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie Imp Daten_tablet.jpg");
    }

    #impressum header img {
        max-height: 320px;

    }

    #impressum header h1 {
        padding-top: 130px;
    }

    #impressum div.grid-container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 20px;
    }

    #impressum h3 {
        font-size: 36px;
        padding: 0 100px;
    }

    #impressum p,
    #i mpressum span {

        padding: 0 100px;
    }


    /* ---------------------------------- Parken & Anreise ---------------------------- */


    #parken header {
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x340/Header Tal Galerie parken _tablet.jpg");
        background-position: center;
        background-repeat: no-repeat;
    }

    #parken header img {
        max-height: 320px
    }

    #parken h1 {
        padding-top: 120px
    }

    #parken h3 {
        padding: 40px;
    }

    #parken div.parkplatz {
        grid-column: 1/-1;
        background-image: url("../Images/parken/Tablet_parken.png");
        background-position: center;
        background-repeat: no-repeat;
        height: 770px;
    }

    #parken div.grid-item {
        grid-column: 1/-1;
        background-image: url("../Images/parken/Freie Parkplätze_Tablet.png");
        background-position: center;
        background-repeat: no-repeat;
        height: 370px;
        margin: 0;
        padding: 80px 0;
    }

    #parken div.grid-item1 h4,
    #parken div.grid-item1 p,
    #parken div.grid-item2 p {
        padding: 0 110px;
    }


    /*----------------------------------------------- Bildergalerie --------------------------------------*/

    .grid {
        grid-template-columns: repeat(8, 1fr);
        margin-bottom: 40px;
    }

    #bildergalerie header {
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie bildergalerie_tablet.jpg");

        background-repeat: no-repeat;
        background-position: center;
        height: 320px;

        margin-top: 0px;
    }

    #bildergalerie header img {
        grid-column: span 8;
        max-height: 320px;
        margin-left: 0px;
        margin-top: 0px;
        padding: 0;
    }

    #bildergalerie header h1 {
        grid-column: span 8;
        font-family: 'Raleway', sans-serif;
        font-weight: 700;
        font-size: 48px;
        text-align: center;
        padding-top: 140px;
        color: #B7767D;
        text-transform: uppercase;
    }

    #bildergalerie h2 {
        grid-column: span 8;
        text-align: center;


        margin-left: 250px;
        margin-right: 250px;
        margin-bottom: 20px;
    }

    #zoomed-image,
    #galerie-container #thumbnails {
        grid-column: span 8;
        margin-left: 10px;
        margin-right: 10px;
    }

    #zoomed-image img {
        height: 480px;
        width: 480px;
        object-fit: cover;
        padding-left: 160px;
    }

    #zoomed-image {
        position: relative;
    }



    div#thumbnails {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-column: 2/span 6;
        grid-row: 3;
        width: 480px;
        padding-left: 160px;
        grid-gap: 20px;
        margin-top: 10px;
    }

    #thumbnails img {
        width: 80px;
        height: 80px;

        cursor: pointer;
        display: block;

        padding: 0px;
    }



    #thumbnails .current {
        outline: 5px solid black;
        outline-offset: -5px;
    }


    div.controls {
        width: 480px;
    }

    .controls img#back {
        padding-left: 160px;
        width: 25px;
        height: 40px;
    }

    .controls img#next {
        padding-right: 160px;
        width: 25px;
        height: 40px;
    }

    /* ab hier für 2. Galerie*/

    #zoomed-image2,
    #galerie-container #thumbnails2 {
        grid-column: span 8;
        margin-left: 10px;
        margin-right: 10px;
    }

    #zoomed-image2 img {
        height: 480px;
        width: 480px;
        object-fit: cover;
        padding-left: 160px;
    }

    #zoomed-image2 {
        position: relative;
    }



    div#thumbnails2 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-column: 2/span 6;
        grid-row: 3;
        width: 480px;
        padding-left: 160px;
        grid-gap: 20px;
        margin-top: 10px;
    }

    #thumbnails2 img {
        width: 80px;
        height: 80px;

        cursor: pointer;
        display: block;

        padding: 0px;
    }



    #thumbnails2 .current {
        outline: 5px solid black;
        outline-offset: -5px;
    }

    /* ab hier für 3. Galerie*/

    #zoomed-image3,
    #galerie-container #thumbnails3 {
        grid-column: span 8;
        margin-left: 10px;
        margin-right: 10px;
    }

    #zoomed-image3 img {
        height: 480px;
        width: 480px;
        object-fit: cover;
        padding-left: 160px;
    }

    #zoomed-image3 {
        position: relative;
    }



    div#thumbnails3 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-column: 2/span 6;
        grid-row: 3;
        width: 480px;
        padding-left: 160px;
        grid-gap: 20px;
        margin-top: 10px;
    }

    #thumbnails3 img {
        width: 80px;
        height: 80px;

        cursor: pointer;
        display: block;

        padding: 0px;
    }



    #thumbnails3 .current {
        outline: 5px solid black;
        outline-offset: -5px;
    }








    /* ---------------------------------- Öffnungszeiten ----------------------------- */

    #openingtimes header {
        height: 320px;
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie Öffnungszeiten_tablet.jpg");
        background-position: center;
        background-repeat: no-repeat;
    }

    #openingtimes header img {
        max-height: 320px
    }

    #openingtimes header h1 {
        font-size: 48px;
        padding-top: 130px;
    }

    #openingtimes .grid-item {
        grid-column: 2/4;
        text-align: center;
        padding-left: 30px;
        padding-top: 30px;
    }

    #openingtimes .grid-item1 {
        grid-column: 4/8;
        padding-left: 30px;
        padding-top: 30px;
    }

    #openingtimes p {
        font-family: 'Raleway', sans-serif;
        font-size: 24px;
    }



    /* ----------------------------------- Concierge tablet----------------------------------------- */

    section#concierge .grid-container {
        grid-row-gap: 0px;
    }

    section#concierge header {
        background-image: url("../Images/headers/header tablet 780x320/Header Tal Galerie concierge_tablet.jpg");
        height: 320px;
        background-position: center;
        background-repeat: no-repeat;
        margin-top: 0px;
    }

    section#concierge header h2 {
        padding-top: 220px;
        text-align: center;
        color: #B7767D;
        font-family: 'Raleway', sans-serif;
        font-size: 32px;
        font-weight: bold;
        display: block;
        margin-top: 0px;
    }

    section#concierge div.grid-item1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column: span 8;
    }

    section#concierge div.grid-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column: span 8;
        grid-gap: 0px;
        margin-top: 0px;
    }

    section#concierge div.grid-item div {
        border: solid black 1px;
    }

    section#concierge h3 {
        grid-column: span 8;
    }

    section#concierge p.p {
        grid-column: 1;
        grid-row: 1;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 24px;
    }

    section#concierge img.logo {
        grid-column: 2;
        grid-row: 1;
        padding-top: 40px;
    }

    section#concierge div.info {
        grid-column: 1;
        grid-row: 1;
    }

    section#concierge img.icon {
        width: 30px;
        height: 30px;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    section#concierge div.info img.icon {
        grid-column: 1;
        grid-row: 1;
    }

    section#concierge h4 {
        font-size: 28px;
        padding-bottom: 0px;
        padding-top: 10px;
    }

    section#concierge div.info h4 {
        padding-right: 70px;
        padding-left: 10px;
        padding-bottom: 0px;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    section#concierge div.info hr {
        margin-left: 10px;
        margin-top: 0px;
        margin-right: 70px;
    }

    section#concierge img {
        width: 390px;
        height: 390px;
    }

    section#concierge p {
        text-align: left;
        padding-top: 40px;
    }

    section#concierge div.info p {
        text-align: right;
        padding-top: 40px,
    }

    section#concierge div.info p.br {
        padding-top: 80px;
    }





    /* ---------------------------------- footer ------------------------------- */


    #footer div.grid-container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        padding: 0px;
    }

    #footer div.icon {
        padding: 0px;
        margin: 0;
        grid-column: 4/8;
    }



    #footer h3 {
        font-size: 24px;
        padding-left: 20px;

    }

    #footer ul li a,
    #footer dd,
    #footer dt {
        font-size: 24px;
        color: black;
        padding: 20px;
    }



    #footer div.grid-item {
        grid-template-columns: repeat(8, 1fr);
        grid-column: span 8;
        background-color: #91B34F;
        grid-gap: 20px;
        margin: 0;
        padding: 0;
    }

    #footer div.grid-item div.zahlung {
        grid-column: span 4;
    }

    #footer div.grid-item div.adresse {
        grid-column: span 4;
        padding-left: 80px
    }

    #footer div.adresse p {
        font-size: 24px;
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    #footer nav {
        grid-column: 1/-1;
    }

    #footer nav a {

        font-weight: 400;
        font-size: 24px;
        padding-left: 30px;
        padding-right: 30px;
        justify-content: space-around;
        color: black;
    }













}






/* ----------------------------------------------------------desktop ------------------------------------------ */

@media (min-width:1200px) {

    /* ------------------------------------- nav --------------------------------- */
    .grid-container {
        grid-template-columns: repeat(12, 1fr);
        max-width: 1180px;
        margin: auto;
    }

    nav div#menu {
        align-items: center;
        background-color: #91B34F;
        height: 210px;
    }

    nav div#menu.grid-container ul.grid-item {
        display: flex;

    }

    nav ul.grid-item {
        grid-column: 3/-1;
        position: relative;
    }


    nav ul li a {
        text-align: center;
        padding: 0 35px;
        font-size: 32px
    }

    nav ul li ul {
        display: none;
        position: absolute;

        padding: 20px;
        box-sizing: border-box;
    }

    nav ul li ul li {
        padding: 20px;
    }

    nav ul li ul li a {
        padding: 10px 35px;
        font-size: 26px;
    }

    nav ul li:hover ul {
        display: block;
    }

    nav div.grid-item {
        display: none;
    }


    /* ------------------------------------ Start ------------------------------------- */

    #start .grid-container {
        margin: auto;
    }

    #start header {
        grid-column: span 12;
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/header Tal Galerie galerie.jpg");
    }

    #start header h1 {
        padding-top: 90px;
    }

    #start header h2 {
        display: block;
        font-size: 20px;
        padding: 0 140px;
        margin: auto;
    }

    #start div.icons {
        padding: 20px 10px;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 20px;
        grid-column: 5/9;
    }

    #start div.icons img {
        max-height: 100%;
    }

    #start div.icons a {
        display: inline-grid;

        padding: 10px 0;
    }

    #start div.grid-item {
        grid-column: span 6;
        padding: 10px 10px;
    }


    #start div.grid-item a {
        padding: 30px;
    }


    #start div.grid-item2 {

        padding: 10px 230px;
        grid-column: span 12;
    }


    #start div.angebote {
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        grid-column: span 12;
        padding: 30px 0px;
    }

    #start div.angebote img {
        padding: 0;
        margin: 0;
    }

    #start div.angebote img.img1 {
        grid-column: 1/span 3;
    }

    #start div.angebote img.img2 {
        grid-column: 4/span 3;
    }

    #start div.angebote img.img3 {
        grid-column: 7/span 3;
    }

    #start div.angebote img.img4 {
        grid-column: 10/span 3;
    }


    /* ------------------------------------ Shoppen ----------------------------------- */

    #shoppen header {
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/header Tal Galerie shopping.jpg");
    }


    #shoppen header h1 {
        padding-top: 100px;
    }

    #shoppen h2 {
        font-size: 24px;
        padding: 0 130px;
    }

    #shoppen div.grid-container a {
        grid-column: span 3;
        padding: 10px;
    }

    #shoppen form {
        grid-column: 2/-1;
    }

    #suche {
        width: 535px;
    }

    #shoppen fieldset.align {
        grid-column: 2/-1;
    }

    #shoppen fieldset.align select {
        width: 660px;
    }


    /*---------------------------------------- Shopseiten ----------------------------*/

    #shops .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        max-width: 1180px;
        margin: auto;
        padding: 0;
    }

    #shops .grid-item {
        grid-column: 2/span 10;

        padding: 5px;
        background-color: #E5E5E5;
        margin-top: 35px;
        margin-left: 0px;
        margin-right: 0px;

    }

    #shops .grid-item1 {
        grid-column: 4/span 6;
        background-color: #E5E5E5;
        margin: 0;
        margin-top: 40px
    }

    #shops .grid-item2 {
        display: grid;
        grid-template-columns: 1fr 3fr;

        grid-column: span 4;
        margin-top: 15px;
        margin-bottom: 0;
        margin-left: 10px;
        margin-right: 10px;
    }

    #shops .grid-item2 p {
        font-family: 'Raleway', sans-serif;
        font-size: 24px;
        padding-left: 60px;
        padding-top: 70px;
        margin-top: 0;
    }

    #shops .grid-item3 {
        grid-column: 2/span 10;

        padding-top: 10px;
        padding-bottom: 10px;
        border: 1px solid black;
        margin-left: 0px;
        margin-right: 0px;
        background-color: #E5E5E5;
        margin-top: 35px;
    }

    #shops .grid-item p.letztes {
        padding-bottom: 70px;
    }

    #shops a {
        text-decoration: none;
        font-family: 'Raleway', sans-serif;
        font-size: 24px;
        color: black;
        padding-left: 60px;
        padding-bottom: 10px;
    }

    #shops img.telefon {
        display: flex;
        width: 40px;
        height: 40px;
        padding-left: 100px;
        padding-top: 70px;
        margin-bottom: 30px;
        margin: 0;
    }

    #shops img.erdkugel {
        display: flex;
        width: 40px;
        height: 40px;
        padding-left: 100px;
        padding-bottom: 50px
    }

    #shops .grid-item4 {
        grid-column: 3/span 3;
    }


    /* --------------------------------------- Events ---------------------------------- */

    #events .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        max-width: 1180px;
        margin: auto;
        padding: 0;
    }


    #events header {
        grid-column: span 12;
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/Header Tal Galerie Events.jpg");
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 35px;
    }

    #events header img {
        max-height: 420px;
        margin-left: 0px;
    }

    #events header h1 {
        padding-top: 80px
    }

    #events header h2 {
        text-align: center;
        padding-left: 100px;
        padding-right: 100px;
    }



    #events .grid-item {
        grid-column: span 12;
        grid-gap: 20px;
        margin: 0;
    }


    #events img {
        width: 580px;
        height: 540px;
    }

    #events div.klang {
        margin-top: 5px;
    }



    #events p {
        padding: 5px;
    }

    /* --------------------------------------- Galerieplan -------------------------------------- */

    #galerieplan .grid-item {
        grid-column: 2/12;
       padding: 40px 0px;
    }


    #galerieplan div h3 {
        margin-left: 820px;
        padding: 10px 0;
    }


    /*------------------------------------- News ------------------------------------*/

    #news .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        max-width: 1180px;
        margin: auto;
        padding: 0;
    }


    #news header {
        grid-column: span 12;
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/header Tal Galerie news.jpg");
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 35px;
    }

    #news header img {
        max-height: 420px;
        margin-left: 0px;

    }

    #news header h1 {
        padding-top: 80px
    }

    #news .grid-item {
        grid-column: span 12;
        margin: 0px;
    }

    #news img {
        width: 580px;
        height: 540px;
    }

    #news div.monstera {
        margin-top: 5px;
    }

    #news p {
        padding: 10px;
    }


    /* ----------------------------------- Ueber Uns ------------------------------------ */

    #ueber_uns header {
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/Header Tal Galerie Über Uns.jpg");
    }

    #ueber_uns h1 {
        padding-top: 180px;
    }

    #ueber_uns .grid-item {
        grid-column: span 12;
        margin: 20px 0px;
    }

    #ueber_uns .grid-item img.desktop {
        display: block;
    }

    #ueber_uns .grid-item img.phone,
    #ueber_uns .grid-item img.tablet {
        display: none;
    }

    #ueber_uns img.gross {
        display: block;
        grid-column: span 12;
        width: 1180px;

        margin-left: 0px;
        margin-right: 0px;
    }


    /* ------------------------------------ Galerieplan ------------------------------- */

    #galerieplan header {
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/header Tal Galerie galerie.jpg")
    }

    #galerieplan header h1 {
        padding-top: 180px;
    }



    /*---------------------------------------------------- Kontakt ---------------------------------------------*/

    #kontakt .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        padding: 0px;
    }

    #kontakt header {
        grid-column: span 12;
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/Header Tal Galerie Kontakt.jpg");


        background-position: center;
        background-repeat: no-repeat;
    }

    #kontakt header img {

        max-height: 420px;
        margin-left: 0px;
        margin-bottom: 35px;
        padding: 0;
    }

    #kontakt header h1 {

        padding-top: 100px;

    }

    #kontakt header h2 {
        display: block;
        font-family: 'Raleway', sans-serif;
        font-size: 36px;
        color: black;
        padding-top: 20px;
    }

    #kontakt h3 {
        margin-left: 60px;
        padding-right: 100px;
    }

    #kontakt form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        grid-column: span 12;
        margin-left: 0px;
        margin-right: 0px;
        background-color: #E5E5E5;
        border-radius: 5px;
        border: 1px solid black;
    }

    #kontakt form label,
    form button,
    form textarea {
        font-family: 'Lato', sans-serif;
        font-size: 20px;
    }




    #kontakt form label {


        grid-column: 1;
        padding-left: 170px;
        padding-right: 150px;
        padding-bottom: 15px;
        padding-top: 10px;
        align-items: baseline;
        margin-left: -75px
    }

    #kontakt form label.spalte2 {
        grid-column: 2;
        margin-left: -200px;
        margin-right: 130px;

    }



    #kontakt form label.radiobuttons {
        padding-left: 190px;

    }

    #kontakt form label.radiobuttons_frau {

        padding-left: 185px;
    }

    #kontakt form label.radiobuttons span {
        padding-right: 0px;
        padding-left: 40px;
        grid-column: 2;

    }

    #kontakt form label.radiobuttons_frau span {
        padding-left: 40px;
    }




    #kontakt form label.betreff {
        grid-column: span 8;
        margin-left: -75px;
        margin-right: -15px;

    }



    #kontakt form button {
        grid-column: 1/span 1;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
        padding-right: 15px;
        border: 1px solid black;
        border-radius: 5px;
        background-color: #C4C4C4;
        margin-bottom: 50px;
        margin-left: 90px;
        width: 230px;
    }

    #kontakt form label.feedback {
        grid-column: span 8;
        margin-left: -75px;
        margin-right: -15px;
    }

    #kontakt form textarea {
        height: 240px;

    }



    #kontakt form label span {
        position: relative;
    }

    #kontakt form label span::before {
        position: absolute;
        content: "";

        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
        top: 2px;

        left: -23px;
        box-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);
    }

    #kontakt form label span::after {
        position: absolute;
        content: "";
        width: 12px;
        height: 12px;
        background-color: #c4c4c4;
        border-radius: 50%;
        top: 6px;
        left: -19px;

        display: none;
    }

    #kontakt input [type="radio"]:checked + span::after {
        display: block;
    }





    /* ------------------------------------ Impressum --------------------------------- */

    #impressum {
        margin 0;
    }

    #impressum header {
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/Header Tal Galerie Impressum Daten.jpg");
        margin: 0;
    }

    #impressum header img {
        max-height: 420px
    }

    #impressum header h1 {
        padding-top: 140px;
    }

    #impressum div.grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
    }


    /* --------------------------------- Parken & Anreise -------------------------------- */


    #parken header {
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/Header Tal Galerie Parken.jpg");
        background-position: center;
        background-repeat: no-repeat;
    }

    #parken header img {
        max-height: 420px
    }

    #parken h1 {
        padding-top: 180px;
    }

    #parken div.parkplatz {
        grid-column: 1/-1;
        background-image: url("../Images/parken/Desktop_parken.png");
        background-position: center;
        background-repeat: no-repeat;
        height: 780px;
        margin-bottom: 0;
    }

    #parken div.grid-item {
        grid-column: 1/-1;
        background-image: url("../Images/parken/Freie Parkplätze_Desktop.png");
        background-position: center;
        background-repeat: no-repeat;
        height: 370px;
        margin: 0;
        padding: 80px 0;
    }

    #parken div.grid-item1,
    #parken div.grid-item2 {
        grid-column: span 6;
    }


    #parken div.grid-item1 h4,
    #parken div.grid-item1 p {
        grid-column: 1/6;
        text-align: left;
        padding: 0 20px;
    }

    #parken div.grid-container h4 {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    #parken div.grid-container p {
        margin-bottom: 50px;
    }

    #parken p.bold {
        font-weight: bold;
        grid-column: 7/-1;
        padding-top: 20px;
        margin-top: 40px
    }



    /*----------------------------------------- Bildergalerie ------------------------------------------*/

    .grid {
        grid-template-columns: repeat(12, 1fr);
        max-width: 1180px;
        margin: 0 auto;
        grid-gap: 20px;
        margin-bottom: 40px;
    }

    #bildergalerie header {
        background-image: url("../Images/headers/Header desktop 1180 x420/Header Tal Galerie Bildergalerie.jpg");

        background-repeat: no-repeat;
        background-position: center;
        height: 420px;

        margin-top: 0px;
    }

    #bildergalerie header img {
        grid-column: span 12;
        max-height: 420px;
    }

    #bildergalerie header h1 {
        grid-column: span 12;

        padding-top: 180px;
    }


    #bildergalerie h2 {
        grid-column: span 12;
        text-align: center;


        margin-left: 350px;
        margin-right: 350px;
        margin-bottom: 5px;
    }



    #zoomed-image,
    #galerie-container #thumbnails {
        grid-column: span 12;
    }

    #zoomed-image img {
        width: 980px;
        height: 970px;
        padding-left: 100px;
        padding-right: 100px;
    }





    div#thumbnails {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        width: 980px;
        padding-left: 100px;
        grid-gap: 20px;
        margin-top: 10px;
    }

    /*ab hier für 2. Galerie*/

    #zoomed-image2,
    #galerie-container #thumbnails2 {
        grid-column: span 12;
    }

    #zoomed-image2 img {
        width: 980px;
        height: 970px;
        padding-left: 100px;
        padding-right: 100px;
    }





    div#thumbnails2 {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        width: 980px;
        padding-left: 100px;
        grid-gap: 20px;
        margin-top: 10px;
    }


    /*ab hier für 3. Galerie*/

    #zoomed-image3,
    #galerie-container #thumbnails3 {
        grid-column: span 12;
    }

    #zoomed-image3 img {
        width: 980px;
        height: 970px;
        padding-left: 100px;
        padding-right: 100px;
    }





    div#thumbnails3 {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        width: 980px;
        padding-left: 100px;
        grid-gap: 20px;
        margin-top: 10px;
    }






    /* ---------------------------------- Öffnungszeiten ----------------------------- */

    #openingtimes .grid-container {
        grid-template-columns: repeat(12, 1fr);
        max-width: 1180px;
        margin: auto;
    }

    #openingtimes header {
        height: 420px;
        background-image: url("../Images/headers/Header desktop 1180 x420/Header Tal Galerie Öffnungszeiten.jpg");
        background-position: center;
        background-repeat: no-repeat;
    }

    #openingtimes header img {
        max-height: 420px
    }

    #openingtimes header h1 {
        padding-top: 180px;
    }

    #openingtimes .grid-item {
        grid-column: 3/6;
        text-align: center;
        padding-left: 90px;
        padding-top: 50px;
    }

    #openingtimes .grid-item1 {
        grid-column: 6/10;
        padding-left: 60px;
        padding-top: 50px;
    }



    /* ----------------------------------- Concierge desktop----------------------------------------- */


    section#concierge header {
        background-image: url("../Images/headers/Header desktop 1180 x420/header Tal Galerie Concierge.jpg");
        height: 420px;
        background-position: center;
        background-repeat: no-repeat;
        grid-column: span 12;
    }

    section#concierge header h2 {
        padding-top: 280px;
    }


    section#concierge div.grid-item1 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column: span 12;
        margin-bottom: 60px;
    }

    section#concierge div.grid-item {
        grid-column: span 12;
        margin-bottom: 0px;
    }


    section#concierge h3 {
        grid-column: span 12;
    }

    section#concierge p.p {
        grid-column: 3 / span 5;
        grid-row: 1;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 24px;
    }

    section#concierge img.logo {
        grid-column: 8/ span 3;
        grid-row: 1;
        padding-top: 15px;
        padding-left: 40px;
    }


    section#concierge img.icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0px;
        margin-top: 0px;
        margin-left: 20px;
        margin-right: 20px;
    }


    section#concierge h4 {
        font-size: 36px;
        padding-bottom: 0px;
        padding-top: 20px;
    }

    section#concierge div.info h4 {
        padding-right: 70px;
        padding-left: 10px;
        padding-bottom: 0px;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    section#concierge div.info hr {
        margin-left: 10px;
        margin-top: 0px;
        margin-right: 70px;
    }

    section#concierge img {
        width: 590px;
        height: 590px;
    }

    section#concierge p {
        text-align: left;
        padding-top: 80px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 50px;
    }

    section#concierge div.info p {
        text-align: left;
    }

    section#concierge div.info p.br {
        padding-top: 160px;
    }




    /* -------------------------------------- footer ------------------------------------ */


    #footer div.grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        padding: 0px;
    }

    #footer div.icon {
        padding: 0px;
        margin: 0;
        grid-column: 8/12;
    }

    #footer h3 {
        padding-top: 30px
    }

    #footer ul li a,
    #footer dd,
    #footer dt {
        font-family: 'Raleway', sans-serif;
        font-size: 24px;
        color: black;
        padding: 10px;
    }



    #footer div.grid-item {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column: span 12;
        grid-row: span 2;
        background-color: #91B34F;
        grid-gap: 20px;
        margin: 0;
        padding: 0;
    }

    #footer div.grid-item div.zahlung {
        grid-column: span 4;
        grid-row: 1;
    }

    #footer div.grid-item div.adresse {
        grid-column: 9/-1;
        grid-row: span 2;
        padding-left: 80px;
        padding-bottom: 20px;
    }

    #footer nav {
        grid-column: 1/8;
        grid-row: 2;
        padding-bottom: 20px
    }
































}