@media screen {

    .headerlogo {
        float: left;
    }

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

    a:hover, a:active {
        text-decoration: underline;
    }

    address	{
        font-style: normal;
        margin: 30px 0 0 0;
        padding: 0 10px 0 20px;
    }
    body {
        margin: 0;
        padding: 0;
        color:	#999;
        background-color:	#000;
        font-family:	Geneva, Tahoma, sans-serif;
        font-size: 100%;
    }

    div.img {
        margin: 110px 0 0 18px;
        padding: 0;
        height: auto;
        width: 20%;
        display: inline-block;
        text-align: center;
        overflow: hidden;
    }
    div.desci {
    text-align: center;
    margin: 5px;
    }
    figure {
        padding-top: 50px;
    }
    footer {
        background-color:	#000;
        color: #fff;
        font-size: 90%;
        padding: 17px;
        margin: 30px 0;
    }
    footer .links {
        float: left;
    }
    footer .rechts {
        float: right;
    }
    footer .rechts li {
        display: inline;
        margin: 0 0 0 20px;
        font-size: 90%;
    }
            /* pure red for better contrast */
    footer .rechts li.active {
        color: #ff0000;
    }
    form.mailform fieldset {
        border:	1px solid silver;
    }
    header {
        height: 237px;
        text-align: right;
        margin: 0;
        border-bottom: 1px solid silver;
    }
    legend {
        padding:	0 7px;
    }

    /**** LINKS+ ****************/
    footer a {
        color: #fff;
        text-decoration: none;
    }


    nav a:link, a.backlink {
        color: #000;
        text-decoration: none;
    }
    nav a:visited {
        color: gray;
    }
    .lang a:link, .lang a:visited {
        color: #00f;
        text-decoration: none;
    }
    nav a:hover, .lang a:hover{
        color: #cf0000;
    }
    .navshadow a {
        color: #fff;
        text-decoration: none;
    }
    /**** -LINKS ****************/

                    /* darker red for better contrast */
    nav .active {
        color: #cf0000;
    }
    nav ul {
        list-style-type: 	none;
    }
    nav li, .navshadow li {
        display:	inline;
        padding:	0 0 0 30px;
    }
    span.rechts
        {
            display: block;
        text-align:	right;
            font-size:	small;
    }
    td {
        vertical-align:	top;
        padding: 0 15px 0 0;
    }
    td.jahr	{
        white-space:	nowrap;
    }
    ul {
        list-style-type: 	none;
    }
    #flip_nav, #flip_top {
        display: none;
    }
    #comment {
                background-color: #fff;
                color: #000;
                font-size: 90%;
                font-family: "Lucida Console", Monaco, monospace;
                text-align: justify;
                padding: 10px 0 0 0;
    }
    #content {
        position: relative;
        margin:	0;
        padding: 10px 0;
        min-height:  580px;
    }
    #outer
        {
            color: #000;
        margin:	30px auto;
        background-color: #fff;
        max-width:	1300px;
    }
    #rahmen {
        padding:	30px;
        background-color:	#fff;
        min-height: 300px;
    }
    #pf_versenkung {
        display:	none;
    }

    /* kontakt, contact */
    #vcard {
        width: 250px;
    }

    #vcard figcaption {
        margin: 0;
        text-align: center;
    }

    .artikel{
        margin: 110px 0 0 350px;
        width: 40em;
    }

    .artikel h2 {
        font-size: 1.4em;
    }

    .circle {
        list-style-type: circle;
    }

    .center {
        text-align: center;
    }

    .datenschutzerklaerung li:before {
        content: "- ";
    }
            .datenschutzerklaerung li {
                text-indent: -11px;
            }
            .datenschutzerklaerung dl {
                counter-reset: dtcount;
            }
            .datenschutzerklaerung dt {
                counter-increment: dtcount;
            }
    .datenschutzerklaerung dt:before {
        content: counter(dtcount, lower-latin) ") ";
    }
            .datenschutzerklaerung li {
                text-indent: -11px;
            }

    .headerkontakt, .lang {
        display: inline-block;
        margin: 27px 0;
    }
    .headerkontakt a:link {
        text-decoration: none;
    }
    .impressum div.rahmen {
        background: url(/grafik/kontakt_header_img_1001.jpg);
        background-repeat: no-repeat;
        background-size: 1240px 268px;
        margin: 0;
        padding: 185px 0 0 0;
    }
    .impressum {
        margin: 100px 0 30px 0;
    }
    .kontakt div.rahmen {
        background: url(/grafik/kontakt_header_img_1001.jpg);
        background-repeat: no-repeat;
        background-size: 1240px 268px;
        margin: 0;
        padding: 185px 0 0 0;
    }
    .kontakt h1 {
        margin: 100px 0 30px 30px
    }
    .kontaktbox {
        float: left;
        width: 25%;
        margin: 0 20px 0 0;
        border: 1px solid #000;
        height: 500px;
        background-color: ivory;
    }
    .kontaktbox h1 {
        background-color: #000;
        color: #fff;
        padding: 50px 30px;
        text-align: center;
        margin: 0;
    }
    .kontaktbox p {
        margin: 30px 0;
        padding: 0 10px 0 20px;
    }
        
    .leistungen h1 {
        float: left;
        background-color: #000;
        color: #fff;
        padding: 50px 30px;
        width: 20%;
        text-align: center;
    }
    .links3
        {
        text-align:	left; /* default */
        float:	left;
        width:	45%;
            display: block;
    }
    div.leistung_top {
        background: url(/grafik/leistungen_header_img_7036.1.jpg);
        background-repeat: no-repeat;
        background-size: 1240px 268px;
        overflow: hidden;
        margin: 0;
        padding: 185px 0 0 0;
    }
    div.reparatur {
        background: url(/grafik/reparatur_header.jpg);
        background-repeat: no-repeat;
        background-size: 1240px 268px;
        margin: 0;
        padding: 185px 0 0 0;
    }
    div.intonation	{
        background: url(/grafik/intonation_header.jpg);
        background-repeat: no-repeat;
        background-size: 1240px 268px;
        margin: 0;
        padding: 185px 0 0 0;
    }
    div.beratung {
        background: url(/grafik/leistungen_1_mg_5350.jpg);
        background-repeat: no-repeat;
        background-size: 1240px 268px;
        margin: 0;
        padding: 185px 0 0 0;
    }
    h2.count
        {
        counter-increment:	hcount;
    }
    .count:before {
        content:	counter(hcount) ". ";
    }

    .face {
        background: url(/grafik/slide_1_mg_5317.jpg);
        background-repeat: no-repeat;
        background-size: 1390px 600px;
        margin: 0;
        padding: 250px 0 0 500px;
        min-height: 250px;
    }

    .mail {
        font-size: 120%;
    }
    .navshadow {
        margin: 48px 0;
        font-size: 50%;
        letter-spacing: 4.6px;
    }
    .navshadow .active span {
        background-color: #000;
        color: #000;
    }

    .pf_meldung li, .pf_meldung {
        color:	#f00;
        background-color: #fff;
        padding: 20px;
    }
    .rechts3
        {
        text-align:	right;
        float:	right;
        width:	45%;
    }

    .rotate {
        background-color: #ff0;
        color: #000;
        font-size: 100%;
        font-weight: 600;
        margin: 0;
        padding: 20px 60px;
        position: absolute;
        top: 110px;
        left: 32%;
        width: 230px;
        transform: rotate(340deg);
        z-index: 3;
    }

    .sale_overview {
        display: grid;
        grid-template-columns: 50% auto;
    }

    .sale_overview figure img {
        width: 400px;
    }
    
    .sn form, .sn p {
        max-width: 600px;
    }
    
    .sn td {
        padding: 5px 10px;

    }
    
    .start p.untertitel, .start h1 {
        background-color: #111111;
        opacity: 0.9;
        color: 	#ffffff;
        margin: 0 0 15px 0;
        padding: 15px;
        max-width: 300px;
    }
    .ueber div {
        background: url(/grafik/ueber_mich_header_img_5334.jpg);
        background-repeat: no-repeat;
        background-size: 1240px 268px;
        margin: 0;
        padding: 185px 0 0 0;
    }
    .ueber h1{
        float: left;
        background-color: #000;
        color: #fff;
        padding: 50px 30px;
        width: 20%;
        text-align: center;
    }
    .ueber p {
        margin: 100px 0 30px 30%;
    }
    .ueber table {
        margin: 30px 0 0 30%;
    }
    .verkauf .logo img{
        width: 100%;
        margin: 0 0 30px;
        padding: 0;
    }

    .verkauf .logo img {
        width: 100%;
    }

    .verkauf h2,
    .verkauf h3,
    .verkauf p,
    .verkauf ul,
    .verkauf .sliderm_container {
        margin: 30px 130px 0;
        max-width: 800px;
    }

    figcaption {
        margin: 30px auto;
    }
    figcaption a {
        display: inline-block;
        margin: 0 50px;
        font-size: x-large;
    }
    /**********************
    * Tabelle .baujahr
    **********************/
    .baujahrlimit {
        width: 300px;
        max-height: 500px;
        overflow-y: scroll;
        margin: 50px 100px;
        border-collapse: collapse;
        
    }
    .baujahr{
        text-align: center;
        width: 100%;
    }
    .baujahr caption {
        padding: 30px;
        font-weight: bold;
        color: #fff;
        background-color: darkblue;
        border-bottom: 2px solid #fff;
    }
    .baujahr thead, .baujahr tfoot {
        position: sticky;
        top: 0;
        color: #eee;
        background-color: darkblue;

    }
    .baujahr th {
        padding: 10px;
    }
    .baujahr tr:nth-child(even) {
        background-color: #ECECEC;
    }
    /***********************
    * Ende Tabelle .baujahr
    *********************/
}
/*-------------------------------------
Ende media screen
-------------------------------------*/
@media screen and (max-width:800px) {

    /**********************
    Navigation max-width: 800px
    ********************/
    #linkliste {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        transition: .5s;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        text-align: left;
    }
    #linkliste:target, #linkliste:target a:link, #linkliste:target a:visited {
        opacity: 1;
        visibility: visible;
        z-index: 50;
        width: 50%;
        border: none;
        color: #fff;
        background: #000;
    }
    #linkliste:target a:hover {
        color: #cf0000;
    }
    #flip_nav {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        margin: 0;
        z-index: 50;
        background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
    }
    .flip_hilfe {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 0;
        padding-top: 40px;
        overflow: hidden;
        border: 1px solid #ccc;
        background: white 10px 10px / 20px 20px no-repeat;
    }
    #linkliste #flip_top{
        visibility: visible;
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 0px;
        padding: 40px 0 0 0;
        overflow: hidden;
        border: 1px solid #ccc;
        background: white 10px 10px / 20px 20px no-repeat;
        background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
    }
    /***********************/

    div.img {
        margin: 0;
        padding: 0;
        width: initial;
        display: block;
        text-align: center;
    }
        footer li a, footer li span {
            display: block;
            min-height: 10px;
            padding: 5px;
            margin: 0;
        }

    header {
        height: initial;
        padding: 0 5px 20px 0;
    }
    nav li, nav ul{
        display:	block;
        padding:	0 5px;
        margin: 5px 0;
        width: initial;
        max-width: initial;
        min-width: initial;
    }
    #comment {
                font-family: "Lucida Console", Monaco, monospace;
                padding: 10px;
    }

    #content {
        margin:	0;
        padding: 5px;
        min-height: initial;
    }

    #outer
        {
        margin:	0;
    }
    #rahmen {
        padding:	1px;
        min-height: initial;
    }

    .headerkontakt, .lang {
        display: block;
        margin: 0;
        clear: left;
    }
    h1.impressum {
        margin: 15px 0;
    }
    div.reparatur,
    div.intonation,
    div.beratung,
    div.leistung_top.rahmen,
    .ueber div,
    .impressum div.rahmen,
    .kontakt div.rahmen  {
        background-size: 400px;
        padding: 100px 0;
    }
    figure {
        width: 100%;
        margin: 0;
    }
    figure img {
        width: 100%;
    }
    figcaption a {
        display: block;
        margin: 10px auto;
    }
    .kontakt h2 {
        margin: 30px 0;
    }
    .kontaktbox {
        float: none;
        width: initial;
        margin: 0;
        border: none;
        height: initial;
        background-color: #fff;
    }
    form td input, form td textarea  {
        max-width: 80%;
    }

    .kontaktbox p {
        margin: 0;
        padding: 0;
    }

    address {
        margin: 0;
        padding: 0 0 15px 0;
    }

    .artikel {
        margin: 0;
        width: initial;
    }

    .logo {
        margin:	1115px;
    }

    .mailform {
        max-width: 100%;
    }

    .navshadow {
        display: none;
    }

    .sale_overview {
        display: initial;
    }

    .start div {
        margin: 3px;
        padding: 160px 0 80px;
        min-height: initial;
    }
    .start p.untertitel, .start h2 {
        background-color: #fff;
        opacity: 1;
        color: 	#000;
        margin: 0;
        padding: 3px;
    }

    .rotate {
        margin: 0;
        padding: 20px 60px;
        position: relative;
        top: 0;
        left: 0;
        width: initial;
        transform: none;
        z-index: 3;
    }

    .ueber h1, .verkauf h1, .leistungen h1, .kontaktbox h1 {
        float: none;
        background-color: #fff;
        color: #000;
        padding: 30px 0;
        width: initial;
        text-align: left;
    }
    .ueber p, .verkauf p, .verkauf ul {
        margin: 0;
        padding: 0;
        width: initial;
    }
    .ueber table {
        margin: 0;
    }

    .verkauf .logo {
        width: initial;
        margin: 0;
    }

    .verkauf h2, .verkauf h3, .verkauf p, .verkauf .sliderm_container {
        margin: 30px 10px;
        width: initial;
    }

}
/*-------------------------------------
Ende media handheld
-------------------------------------*/