@charset "UTF-8";

/* CSS Document */
@media only screen and (min-width: 840px) {
    .desktop {
        visibility: visible;
    }

    .mobile {
        visibility: hidden;
        display: none;
    }

    body:not(.im_ds) {
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-clip: border-box;
        background-color: #5091f3;
        margin: 0;
        padding: 0;
    }

    body.im_ds {
        padding: 20vh 20vw;
    }

    .backback div {
        width: 100vw!important;
        height: 100vh!important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    a,
    a:link,
    a:visited {
        color: #637699;
        text-decoration: none;
    }

    a:hover {
        color: #fff;
        background: #680007;
    }

    .menu a:hover {
        color: #680007;
        background: #fff;
        padding-right: 6px!important;
    }

    a:active {
        color: #000000;
        text-decoration: underline;
    }

    #border {
        width: 800px;
        height: 600px;
        margin: 0px;
        padding: 0px;
        background: transparent;
        border: 20px solid white;
        box-shadow: 0px 0px 8px rgba(0,0,0,.3);
    }

    #topswf {
        width: 800px;
        height: 200px;
    }

    .menu {
        z-index: 95;
        position: absolute;
        width: 198px;
        background: rgba(255,255,255,0.7);
        -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
        -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
        box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
        backdrop-filter: blur(3px);
        color: #fff;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        text-align: left;
        margin-top: 67px;
        margin-left: 69px;
        padding: 4px;
    }

    .menu a {
        text-decoration: none;
        padding-left: 35px;
    }

    .menu li,
    ul {
        list-style-type: none;
    }

    .banner {
        background-image: url(../images/banner.png);
        background-repeat: repeat-y;
        height: 400px;
        margin-left: 95px;
        z-index: 1;
        position: relative;
    }

    .legende {
        bottom: 0;
        position: absolute;
    }

    #content {
        position: absolute;
        width: 519px;
        height: 394px;
        margin-left: 180px;
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        z-index: 3;
    }

    #content p {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #table {
        border-width: 1px;
        border-color: #680007;
        border-style: solid;
        text-align: center;
    }

    #table tr,
    td {
        padding: 4px 2px 4px 2px;
    }

    .preistabelle {
        width: 90%;
        border-width: 1px;
        border-color: #680007;
        border-style: solid;
        text-align: center;
        display: flex;
        flex-direction: row;
    }

    .pt-rahmen {
        width: 50%;
    }
    
    .pt-kopf {
        background-color: #eeeeee;
        padding: 4px 0;
    }

    .pt-inhalt {
        padding: 8px;
    }

    .pt-zusatz {
		background-color: #680007;
		border-radius: 0px 0px 10px 10px;
		padding: 5px 8px;
        line-height: 2;
		color: white;
    }

    .spaceholder {
        height: 100%!important;
        padding: 15px;
        background: white;
    }

    .belegungsframe {
        transform: scale(0.8);
    }

    #\31,
    #\32,
    #\33,
    #\34,
    #\35,
    #\36  {
        width: 120%;
        margin-left: -10%;
        transform: scale(0.8);
    }

	div#bilder {
		padding-top: 20px;
		padding-bottom: 200px;
	}

    .picgrid {
        display:grid;
        grid-template-columns: repeat(6, 1fr);
        grid-row-gap: 18px; 
        grid-template-areas:
        "A1 A1 A2 A2 A3 A3"
        "B1 B1 B1 B2 B2 B2";
    }

    .picgrid a:nth-of-type(1) {grid-area: A1;}
    .picgrid a:nth-of-type(2) {grid-area: A2;}
    .picgrid a:nth-of-type(3) {grid-area: A3;}
    .picgrid a:nth-of-type(4) {grid-area: B1;}
    .picgrid a:nth-of-type(5) {grid-area: B2;}

}