/* Stylesheet der Multisoft GmbH */


/*################################################################################################################*/
/*                                          mobiles einspaltiges Layout                                           */
/*################################################################################################################*/

html {
    background-color: transparent;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-flow: column;
    max-width: none;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    padding: 0;
    margin: 0;
    background-color: #005f73; color: #001219;
}

/* <div class="inside"> befindet sich innerhalb von <header>, <nav>, <main>, <footer> */
.inside {
    max-width: 600px;   /* maximale Breite für das mobile layout */
    padding: 0 0.5rem;
    margin: 0 auto;
}

/*############################*/
/*     allgemeine Elemente    */
/*############################*/

*, 
*::before, 
*::after { 
  box-sizing: border-box;
}

/* collapsing Margins */
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote { margin-top: 0; }

h1, h3, h4, h5, h6, p, ul, ol, blockquote {padding-top: 0.5rem; }

h2 { padding-top: 1.25rem; }

hr { color: #fffffe; }

/*############################*/
/* Schrift- / Textgestaltung  */ 
/*############################*/

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.1rem;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 2.00rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; font-variant: small-caps; }

.site-footer {
    font-size: smaller;
}

.site-content { 
    line-height: 1.5;
}

/*############################*/
/*         Hyperlinks         */
/*############################*/

.site-content a[href^="http"]::after { content: " \2197"; } 
.links-external a[href^="http"]::after { content: ""; }
.site-content a:link { color: #003459; }
.site-content a:visited { color: #094067; }
.site-content a:hover { color: #ef4565; }
.site-content a:focus { color: #ef4565; }                                                      
.site-content a:active { color: #ef4565; }


/*############################*/
/*      nützliche Klassen     */
/*############################*/

.visually-hidden { 
    position: absolute;
    clip: rect(0, 0, 0, 0);
    width: 1px; 
    height: 1px; 
    padding: 0; 
    border: 0; 
    margin: -1px; 
    overflow: hidden;
}

/*############################*/
/*        site-header         */
/*############################*/

/* header - language-nav */
.language-nav a { 
    text-decoration: none;
    color: #fffffe;
}
.language-nav .current a { 
    background-color: #005f73; 
    color: #e9d8a6; 
}
.language-nav {
    padding-top: 1rem;
    padding-right: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.language-nav ul {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
}
.language-nav li {
    list-style: none;
    margin-right: 0;
    padding-right: 0.5rem;
    border-right: 2px solid #eee;
}
.language-nav li:last-child {
    border-right: none;
    padding-left: 0.5rem;
    padding-right: 0;
}

.site-header {
    padding-left: 0;
    padding-right: 0;
    background-color: #005f73;
    color: #fffffe;
    line-height: 2rem;
}
.site-header h1 {
    margin-bottom: 0;
}
.site-header p {
    margin-top: 0;
    margin-bottom: 0;
    color: #eee;
}

.inside-header {
    padding: 0 0.5rem;
    margin-bottom: 2rem;
}
.inside-header ul {
    max-height: none !important;
    display: flex;
    flex-direction: column;
    padding: 0; 
    margin: 0; 
    color: #fffffe; 
}
.inside-header li {
    list-style: none;
}
.inside-header h1 { 
    padding-left: 0;
    padding-bottom: 0;
}
.inside-header p { 
    padding-left: 0; 
    padding-bottom: 0rem;
}
.inside-header img { 
    padding-top: 0.5rem;
}

/*############################*/
/*          site-nav          */
/*############################*/

.site-nav {
    position: static; 
    padding: 0;
    background-color: #fffffe;
}

.nav-bar {
    background-color: #e9d8a6;
    max-width: 600px;
    margin: 0 auto;
    padding-right: 1rem;
}

/*############################*/
/*     mobile Navigation      */
/*############################*/

/* Schritt 1: Die grundlegende Gestaltung der Navigation */
.site-nav ul { 
    display: flex;
    flex-direction: column;
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.site-nav a {
    display: block;   /* macht links zu blockboxen damit sie bis an den Rand reichen */
    text-decoration: none;
    padding: 0.75rem 1rem;
    margin-right: -1rem;
    background: #fffffe; color: #001219;
}
.current a { background: #94d2bd; color: #001219; }
.site-nav a:hover, .site-nav a:focus { background: #94d2bd; color: #001219; }

/* Schritt 2: Das HTML für den Menübutton erstellen */
/* Schritt 3: Den Menübutton per CSS gestalten */
.menubutton { 
    display: flex;
    align-items: center;
    cursor: pointer;
    font: inherit; 
    text-align: center; 
    padding-bottom: 0.5rem; 
    padding-top: 0.5rem;
    border: 0; 
    margin: 0;
    padding-left: 0.75rem;
    background: inherit; color: #001219;
}
.menubutton::before {
    content: url(../bilder/menuburger.svg);
    width: 2rem; 
    height: 2rem; 
    margin-right: 0.5rem;
}
/* Schritt 4: Die Navigationsliste ausblenden */
.site-nav ul {
    max-height: 0;
    overflow: hidden;
    padding: 0; 
} 
/* Schritt 5: Die Navigationsliste einblenden */
.showmenu + ul {
    max-height: 100rem; 
    overflow: initial; 
    transition: max-height 500ms ease; 
}
.showmenu.menubutton::before {
    content: url(../bilder/menuclose.svg); 
}

/*############################*/
/*       main - sections      */
/*############################*/

.wrapper {
    padding: 0rem;
    margin: 0;
    background-color: #eee;
}

.site-content {
    flex: 1;
    padding: 0;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    max-width: 600px;
    background-color: #eee;
}

.content-intro {
    padding: 0 0.5rem;
}

.content-info { 
    color: #4fc4cf; 
}

.contact {
    padding: 0 0.5rem;
}

/*############################*/
/*       main - content       */
/*############################*/

address {
    font-style: normal;
    padding: 0.5rem;
    margin-bottom: 1rem;
    background-color: #fffffe;
    color: #001219;
}
.adresse p {
    padding: 1rem;
}
.address h2 { padding-top: 1.25rem; }

pre {
    max-width: 600px;
    max-height: 250px;
    overflow: auto;
    padding: 0.5rem;
    background-color: #fffffe;
}

code {
    font-size: smaller;
    color: #005f73;
}

/*############################*/
/*           pictures         */
/*############################*/

img {
    max-width: 100%;
}
figure {
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}

/*############################*/
/*           tables           */
/*############################*/

table {
    border-spacing: 1px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: none;
    width: 100%;
}
table h4 {
    font-size: 1.25;
    margin: 0;
}
table p {
    margin: 0;
}
thead { background-color: #005f73; color: #fffffe; } 
tbody { 
    background-color: #eee; 
    color: #001219; 
} 
tfoot { font-size: smaller; } 
td {
  padding: 0.5rem 1rem;
  text-align: left;
  vertical-align: top;
}
.highlight {
    background: #94d2bd;
    color: #001219;
}
th {
    padding: 0.5rem 1rem;
    text-align: left;
    vertical-align: top;
}

/*############################*/
/*           buttons          */
/*############################*/

button {
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: inherit;
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    padding: 1rem;
    margin: 1rem 0;
    margin-left: 1rem;
    background-color: #e9d8a6;
    color: #001219;
}

/*############################*/
/*            boxen           */
/*############################*/

.content-intro h2 {
    color: #001219;
}

.infobox1, .infobox2 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.infobox1, .infobox2 {
    display: none;
}
.infobox, .infobox-mobil, .infobox-mobil2 {
    text-align: left;
    padding: 1rem;
    margin: 1rem 0;
    background-color: #94d2bd; 
    color: #001219;
}
.infobox, .infobox-mobil, .infobox-mobil2 h3 { color: #001219; }
.infobox-mobil, .infobox-mobil2 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.inside-flex h4 { 
    padding-top: 1rem; 
    padding-left: 0.5rem;
}
.inside-flex p { padding: 0.5rem; }
.inside-flex ul { 
    max-height: none !important;
    display: flex;
    flex-direction: column;
    background: #eee; 
    color: #001219; 
    padding: 0; 
    margin: 0;        
}
.inside-flex li { 
    flex: 1;
    list-style: none;
    border-bottom: 15px solid #94d2bd;
}
.inside-flex li:last-child { border: none; }

.kunden {
    padding: 1rem;
    margin: 1rem 0;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    background-color: #fffffe;
}
.kunden h3 {
    color: #094067;
}

.profile {
    padding: 1rem 0;
    margin: 1rem 0;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    background-color: #fffffe;
}
.profile h3 {
    margin-left: 1rem;
}
.profile h4 {
    margin: 0;
}

.links-external {
    padding: 1rem;
    margin: 1rem 0;
    background-color: #fffffe;
}

.history {
    text-align: left;
    padding: 1rem;
    margin: 1rem 0;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    background-color: #fffffe;
}

.logo-multi {
    text-align: left;
    padding: 1rem;
    margin: 1rem 0;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    background-color: #fffffe;
    color: #001219;
}
.logo-multi ul { 
    max-height: none !important;
    display: flex;
    flex-direction: row;
    padding: 0; 
    margin: 0;        
}
.logo-multi li { 
    flex: 1;
    list-style: none;
    margin-right: 0.5rem;
}
.logo-multi li:last-child {
    margin-right: 0;
}

.links-external {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.linkbox {
    text-align: left;
    padding: 0.5rem;
    margin: 1rem 0;
    background-color: #fffffe; color: #094067;
}
.linkbox h4 {
    border-top: 1px solid #094067;
}

.linkbox ul { 
    max-height: none !important;
    display: flex;
    flex-direction: column;
    padding: 0; 
    margin: 0;        
}
.linkbox li { 
    flex: 1;
    list-style: none;
}

.tools {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.tools-text {
    background-color: #fffffe;
    padding: 1rem;
    margin: 1rem 0;
    margin-left: 0rem;
    margin-right: 0rem;
}
.tools-text p {
    margin-left: 0rem;
    margin-right: 0rem;
}
.tools-text h3 {
    margin-left: 0rem;
    margin-right: 0rem;
}

.screenshots { 
    background-color: #94d2bd; 
    margin-bottom: 1rem;
}
.screenshots h4 { 
    background: #005f73; 
    color: #fffffe; padding: 1rem; 
    margin-bottom: 0; 
}
.screenshots p {
    padding-left: 1rem;
    padding-right: 1rem;
}
.screenshots img { 
    padding: 0.5rem; 
}

.contact {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

/*############################*/
/*       content slider       */
/*############################*/

/* Slider - SAP Abap Development */

#slider {
    margin: 2rem auto;
    width: 600px;
    max-width: 100%;
    text-align: center;
    font-size: 1.15rem;
}
#slider input[type=radio] {
    display: none;
}
#slider label {
    cursor: pointer;
    text-decoration: none;
}
#slides {
    padding: 0px;
    border: 3px solid #fffffe;
    background: #fffffe;
    position: relative;
    z-index: 1;
}
#overflow {
    width: 100%;
    overflow: hidden;
}
#slide1:checked ~ #slides .inner {
    margin-left: 0;
}
#slide2:checked ~ #slides .inner {
    margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
    margin-left: -200%;
}
#slides .inner {
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 400%;
    line-height: 1.5rem;
    height: 400px;
}
#slides .inner h4 {
    line-height: 2rem;
}
#slides .inner p {
    padding: 0;
}
#slides .slide {
    width: 25%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
#slides .slide_1 {
    background: #0A9396;
}
#slides .slide_2 {
    background: #005f73;
}
#slides .slide_3 {
    background: #ca6702;
}
.slide-content {
    padding: 10px;
}
.info-button {
    margin-right: 1rem;
}
#controls {
    margin: -145px 0 0 0;
    width: 100%;
    height: 50px;
    z-index: 3;
    position: relative;
}
#controls label {
    transition: opacity 0.2s ease-out;
    display: none;
    width: 50px;
    height: 50px;
    opacity: .4;
}
#controls label:hover {
    opacity: 1;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(1) {
    background: url(../SVG/arrow_right.svg) no-repeat;
    float: right;
    margin: 0 -55px 0 0;
    display: block;
}
#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(3),
#slide3:checked ~ #controls label:nth-last-child(2) {
    background: url(../SVG/arrow_left.svg) no-repeat;
    float: left;
    margin: 0 0 0 -55px;
    display: block;
}
#bullets {
    margin: 125px 0 0;
    text-align: center;
}
#bullets label {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #fffffe;
    margin: 0 10px;
}
#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3) {
    background: #ae2012;
}
@media screen and (max-width: 700px) {
    #slide1:checked ~ #controls label:nth-child(2),
    #slide2:checked ~ #controls label:nth-child(3),
    #slide3:checked ~ #controls label:nth-child(1),
    #slide1:checked ~ #controls label:nth-last-child(1),
    #slide2:checked ~ #controls label:nth-last-child(3),
    #slide3:checked ~ #controls label:nth-last-child(2) {
        margin: 0px 0px;
        margin-top: 160px;
}
}

/* Slider - SAP Tools */

#slider1 {
    margin: 2rem auto;
    width: 600px;
    max-width: 100%;
    text-align: center;
    font-size: 1rem;
}
#slider1 input[type=radio] {
    display: none;
}
#slider1 label {
    cursor: pointer;
    text-decoration: none;
}
#tools {
    padding: 0px;
    border: 3px solid #fffffe;
    background: #fffffe;
    position: relative;
    z-index: 1;
}
#tool1:checked ~ #tools .inner {
    margin-left: 0;
}
#tool2:checked ~ #tools .inner {
    margin-left: -100%;
}
#tools .inner {
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 400%;
    line-height: 1.5rem;
    height: 400px;
}
#tools .inner h4 {
    line-height: 2rem;
}
#tools .inner p {
    padding: 0;
}
#tools .slide {
    width: 25%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
#tools .tool_1 {
    background: #005f73;
}
#tools .tool_2 {
    background: #0A9396;
}
#tool1:checked ~ #controls label:nth-child(2),
#tool2:checked ~ #controls label:nth-child(2) {
    background: url(../SVG/arrow_right.svg) no-repeat;
    float: right;
    margin: 0 -55px 0 0;
    display: block;
}
#tool1:checked ~ #controls label:nth-last-child(2),
#tool2:checked ~ #controls label:nth-last-child(2) {
    background: url(../SVG/arrow_left.svg) no-repeat;
    float: left;
    margin: 0 0 0 -55px;
    display: block;
}
#tool1:checked ~ #bullets label:nth-child(1),
#tool2:checked ~ #bullets label:nth-child(2) {
    background: #ae2012;
}
@media screen and (max-width: 700px) {
    #tool1:checked ~ #controls label:nth-child(2),
    #tool2:checked ~ #controls label:nth-child(1),
    #tool1:checked ~ #controls label:nth-last-child(2),
    #tool2:checked ~ #controls label:nth-last-child(1) {
        margin: 0px 0px;
        margin-top: 160px;
}
}

/*############################*/
/*     footer / meta-nav      */
/*############################*/

.site-footer {
    text-align: right;
    padding: 0 0.5rem;
    margin-top: auto;
    background-color: #005f73; 
    color: #fffffe;
}

.site-footer a { 
    text-decoration: none;
    color: #fffffe;
}
.meta-nav {
    padding-top: 0.5rem;
}
.meta-nav ul {
    display: flex;
    padding: 0;
    margin: 0;
}
.meta-nav li {
    list-style: none;
    margin-right: 0;
    padding-left: 0.5rem;
    border-left: 2px solid #eee;
}
.meta-nav li:first-child {
    border-left: none;
    padding-left: 0;
    padding-right: 0.5rem;
}
.meta-nav li:last-child {
    margin-left: auto;
    margin-right: 0;
    border-left: none;
    padding-right: 0;
}
.copyright {
    text-align: left;
}

/*################################################################################################################*/
/*                                       ab hier mehrspaltiges Layout                                             */
/*################################################################################################################*/

/*############################*/
/* media queries - landscape  */
/*############################*/

@media screen and (min-width: 550px) {
    
    @supports (display:grid) {  
        .header-background, .logo, .inside, .nav-bar, .site-content {
            max-width: 750px;
        }
    }  /* Ende @supports */

    .inside-header ul {
        flex-direction: row;
    }
    .inside-header h1 { 
        padding-left: 1rem;
    }
    .inside-header p { 
        padding-left: 1rem;
    }

    .language-nav {
        margin-bottom: 5rem;
    }

    /* horizontale Navigation */
    .menubutton {
        display: none !important;
    }
    .nav-bar {
        padding: 0;
        margin: 0 auto;
        background: #eee;
    }
    .site-nav {
        position: sticky;
        top: 0;
        z-index: 30;
        box-shadow: 0 2px 6px rgba(51,51,51,0.3);
        background-color: #eee;
    }  
    .site-nav ul { 
        max-height: none !important; 
        flex-direction: row;
        padding: 0; 
    }
    .site-nav li {
        flex: 1;
        max-width: 20rem;
        text-align: center; 
        margin: 0;
        border-right: 2px solid #ccc;
    }
    .site-nav li:last-child {
        border-right: none;
    }
    .site-nav li:last-child {
        margin: 0;
    }
    .site-nav a {
        margin-right: 0; 
    }

    pre {
        max-width: 702px;
        border: 2px solid #ccc;
    }

    .linkbox ul {
        flex-direction: row;
    }
    .linkbox li:first-child {
        margin-right: 2rem;
    }

    .profile {
        padding: 1rem 0.5rem;
    }
    .profile h3 {
        margin-left: 0.5rem;
    }

    #slider1 {
        font-size: 1.15rem;
    }

}   /* Ende von media query - landscape */

/*############################*/
/*   media queries - tablet   */
/*############################*/

@media screen and (min-width: 750px) {
    
    @supports (display:grid) {  
        .header-background, .logo, .inside, .nav-bar, .site-content {
            max-width: 750px;
        }
    }  /* Ende @supports */

    .site-nav li {
        max-width: 10rem;
    }
    .site-nav li:first-child {
        margin: 0;
        border-left: 2px solid #ccc;
    }
    .site-nav li:last-child {
        border-right: 2px solid #ccc;
    }

    .text-spalten p {
        column-count: 2;
        column-gap: 4rem; 
        column-rule: 2px solid #90b4ce; 
    }

    .wrapper {
        background-color: #eee;
    }

    .site-content {
        background: #eee;
    }

}   /* Ende von media query - tablet */

/*############################*/
/*   media queries - laptop   */
/*############################*/

@media screen and (min-width: 960px) {  
    
    @supports (display:grid) {  
        .header-background, .logo, .inside, .nav-bar, .site-content {
            max-width: 960px;
        }
    }  /* Ende @supports */

    /* main grid layout */
    .site-home .content > .inside-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
        grid-template-areas: "intro intro intro intro intro intro"
                             "info1 info1 info1 info1 info1 info1"
                             "info2 info2 info2 info2 info2 info2"
                             "kunden kunden kunden kunden kunden kunden"
                             "profil profil profil profil links links"
                             "history history history logo logo logo"
    }
    .content-intro { grid-area: intro; }
    .infobox1 { grid-area: info1; }
    .infobox2 { grid-area: info2; }
    .history { grid-area: history; }
    .profile { grid-area: profil; }
    .kunden { grid-area: kunden; }
    .logo-multi { grid-area: logo; }
    .links-external { grid-area: links; }

    .site-tools .content > .inside-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
        grid-template-areas: "intro intro intro intro intro intro"
                             "abap abap abap abap abap abap";
    }
    .site-tools .content-intro { grid-area: intro; }
    .site-tools .tools { grid-area: abap; }

    .site-contact .content > .inside-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
        grid-template-areas: "intro intro intro intro abap abap";
    }
    .site-contact .contact { grid-area: intro; }
    .site-contact .address { grid-area: abap; }

    /* Außenabstände */
    .history { 
        margin-left: 0;
        margin-right: 0;
    }
    .profile { 
        margin-left: 0;
        margin-right: 0; 
    }
    .kunden { 
        margin-left: 0;
        margin-right: 0; 
    }
    .logo-multi { 
        margin-left: 0;
        margin-right: 0; 
    }
    .links-external { 
        margin-left: 0;
        margin-right: 0; 
    }
    .tools {
        margin-left: 0;
        margin-right: 0; 
    }
    .contact {
        margin-left: 0;
        margin-right: 0; 
    }

    /* infobox mobil */

    .infobox-mobil, .infobox-mobil2 {
        display: none;
    }
    .infobox1, .infobox2 {
        display: block;
    }
    #info1 li {
        background: coral;
    }
 
    /* flexbox inside of grid items */

    .infobox1, .infobox2 {
        margin-left: 0;
        margin-right: 0;
    }
    .infobox {
        text-align: left;
        padding: 1rem;
        margin: 1rem 0;
        
    }
    .inside-flex ul {
        flex-direction: row;      
    }
    .inside-flex li { 
        flex: 1;
        list-style: none;
        border-right: 15px solid #94d2bd;
    }
    .inside-flex li:last-child { border: none; }
    .inside-flex li { border-bottom: none; }
    
    pre {
        max-width: 432px;
    }

    .linkbox ul {
        flex-direction: column;
    }
    .linkbox li:first-child {
        margin-right: 0;
    }

}   /* Ende von media query - laptop */

/*############################*/
/*  media queries - desktop   */
/*############################*/

@media screen and (min-width: 1200px) {

    @supports (display:grid) {  
        .header-background, .logo, .inside, .nav-bar, .site-content {
            max-width: 1100px;
        }
    }

    pre {
        max-width: 502px;
    }

    .screenshots img { 
        padding: 1rem; 
    }
    .screenshots button {
        margin-right: 2rem;
    }

}  /* Ende von media query - desktop */

/*################################################################################################################*/
/*                                                 Druckversion                                                   */
/*################################################################################################################*/

/*############################*/
/*    media queries - print   */
/*############################*/

@media print {
    * { 
        box-shadow: none !important; 
        text-shadow: none !important;
    }

   html { 
       background-color: white; 
       color: black; 
    }

   .site-nav, .site-footer, .content-intro, .sidebar { display: none; }

}   /* Ende von media query - print */