/* ===============================================================================
Stylesheet für Textilschaden.de
Stand:  05. Janaur 2024 v1.02
Datei:  /Stylsheets/bildschirm.css
Autor:  Holger Stritzke
Aufbau: 1. Kalibrierung und Restauration
        2. Allgemeine Styles
        3. Styles für Layoutbereiche
        4. Sonstige Styles
            - Skip-Link
            - Logo
            - Bilder
            - Überschriften
            - Font Open Sans
=============================================================================== */

/* ===============================================================================
1. Kalibrierung und Restauration
=============================================================================== */

* { padding: 0; margin: 0; }

html { 
    font-size: 1vw;
}
/* ===============================================================================
2. Allgemeine Styles
=============================================================================== */

body {
    background-color: #8c8c8c;  
/*    overflow: hidden; */
}

/* ===============================================================================
3. Styles für die Layoutbereiche
=============================================================================== */

/* Style der äußeren Bereiche --------------------------------------------------*/

div#wrapper {
    background-color: #73abd4;
    width: calc(100% - 10em);
    height: 52em;
    margin: 0em auto 1em auto;
}

div#kopfbereich-outside {
    float: left;
    width: 100%; height: 8em;
    background: white url(../Images/textilschaden-logo_rgb-internet-240.png) no-repeat;
    background-size: 100%;
}

div#navibereich-outside {
    float: left;
    /*    position: absolute;*/
    top: 8.5em; left: 5em;
    width: 20%; height: 40em;    
    background-color: #73abd4;
    overflow: hidden;    
}

div#textbereich-outside {
    position: absolute;
    top: 8.5em; left: calc(20% + 4.5em);
    width: calc(50% - 9em); height: 40em; 
    margin: 0em -0.5em 0em 0em;
    background-color: #73abd4;
    overflow: hidden;
}


div#bildbereich-outside {
    float: right;
    /*    position: absolute;*/
    top: 8.5em; left: calc(50% + 15.5em);
    width: calc(30% - 0.5em); height: 40em; 
    background-color: #73abd4;
    overflow: hidden;
}


div#fussbereich-outside {
    position: absolute;
    top: 48em;
    width: calc(100% - 10em); height: 4em;     
    margin: 0.5em 0em 0.5em 0em;
    background: white url(../Images/Leer.gif) no-repeat;
    background-size: 100%;
}

/* Style Textbereich -----------------------------------------------------------*/

div#textbereich {
    position: absolute;
    top: 0.5em; left: 1em;
    width: calc(100% - 0.5em); height: 30em;    
    padding-right: 4em;
    background-color: #73abd4;
    overflow-y: scroll;

    color: black; 
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.2vw;
}
div#textbereich ul {
    /* list-style-image: url('/Images/Nadel_und_Faden.jpg'); Pfad zum Aufzählungszeichenbild */
    padding-left: 20px; /* Abstand zwischen Aufzählungszeichen und dem Text */
}
div#textbereich-fussbereich {
    text-indent: calc(20% + 3em);
    margin: 0.5em 0em 0em 0em;
}

/* unvisited link */
div#textbereich-fussbereich a:link {    
    color: #73abd4;
    text-decoration: none;
}
/* visited link */
div#textbereich-fussbereich a:visited {    
    color: #73abd4;
}
/* mouse over link */
div#textbereich-fussbereich a:hover {    
    color: black;
}
/* selected link */
div#textbereich-fussbereich a:active {    
    color: black;
}

/* Style Navigation ------------------------------------------------------------*/

div#navibereich-outside ul {
    list-style-type: none;
    width: 90%; height: auto;
    margin: 0em auto 0em auto;
}

div#navibereich-outside a {
    display: block;
    width: 70%;
    margin: 1em auto 0em auto;
    color: black;
    text-decoration: none; text-align: left;
    font-family: "Open Sans"; font-style: normal;
    font-weight: 600; font-size: 1.2vw;
}

div#navibereich-outside a:link
{
    display: block;
    max-width: 100%; height: auto;
    padding: 1.5em 0em 0em 1em;
    background:#73abd4 url(../Images/Nadel_neu_transparent.gif) no-repeat;
    background-position-y: -1.3em; background-position-x: left;
    background-size: 70%; background-origin: content-box;
}

div#navibereich-outside a:visited
{
    background: #73abd4 url(../Images/Nadel_neu_transparent.gif) no-repeat;
    background-position-y: -1.3em; background-position-x: left;
    background-size: 70%; background-origin: content-box;
}

div#navibereich-outside a:hover, div#navibereich a:focus {
    background: #FFFFFF url(../Images/Nadel_neu_transparent.gif) no-repeat;
    background-position-y: -1.3em; background-position-x: left;
    background-size: 70%; background-origin: content-box;
    border-radius: 0vw 0vw 1vw 1vw;
}

div#navibereich-outside a:active {
    background: #FFFFFF url(../Images/Nadel_neu_transparent.gif) no-repeat;
    background-position-y: -1.3em; background-position-x: left;
    background-size: 70%; background-origin: content-box;
    border-radius: 0vw 0vw 1vw 1vw;
}

body#index #navi01 a, body#gutachten #navi02 a, body#kontakt #navi03 a,
body#kompetenz #navi04 a {
    color: black;
    background-color: #FFFFFF;
    border-radius: 0vw 0vw 1vw 1vw;
}

/* ===============================================================================
4. Sonstige Styles
=============================================================================== */

div.skiplink {
    position: absolute;
    top: -9999px; left: -9999px;
    width: 0; height: 0;
    font-size: 0;
    line-height: 0;
}

/* ---   Bilder ----------------------------------------------------------------*/

img.bild {
    display: block;
    width: 85%; height: auto;
    margin: 1.5em auto 0em auto;
}
img.bild_Schaden_Frottee {
    display: block;
    width: 70%; height: auto;
    margin: 1.5em auto 0em auto;
}
img.bild_Schaden_Wischbezug {
    display: block;
    width: 70%; height: auto;
    margin: 1.5em auto 0em auto;
}
img.bild_Mikroskop_Faseranalyse {
    display: block;
    width: 59%; height: auto;
    margin: 0.5em auto 0em auto;
}
img.bild_pH-Bestimmung {
    display: block;
    width: 59%; height: auto;
    margin: 1.0em auto 0em auto;
}
img.bild_Antoinette_Stritzke {
    display: block;
    width: 60%; height: auto;
    margin: 0.5em auto 0em auto;
}
img.bild_Buecher_Textilchemie {
    display: block;
    width: 60%; height: auto;
    margin: 1.0em auto 0em auto;
}
img.bild_Kontakt_Textilschaden {
    display: block;
    width: 80%; height: auto;
    margin: 0.5em auto 0em auto;
}

/* --- Überschriften -----------------------------------------------------------*/

h1, h2, h3, h4 { margin-bottom: 1em; }

h1 {
    font-family: "Open Sans"; font-style: normal;
    font-weight: 700; font-size: 2.5vw;
}
h2 {
    font-family: "Open Sans"; font-style: normal; 
    font-weight: 700; font-size: 2vw;
}
h3 {
    font-family: "Open Sans"; font-style: normal;
    font-weight: 700; font-size: 1.5vw;
}
h4 {
    font-family: "Open Sans"; font-style: normal;
    font-weight: 700; font-size: 1.5vw;
}
h5 {
    font-family: "Open Sans"; font-style: italic;
    font-weight: 700; font-size: 1vw;
}
/* --- Font Open Sans ----------------------------------------------------------*/

@font-face {                                                          /* normal */
    font-family: "Open Sans"; font-style: normal; font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"), 
        url("../Fonts/open-sans-v17-latin-regular.eot?#iefix") format("embedded-opentype"),
        url("../Fonts/open-sans-v17-latin-regular.woff2") format("woff2"),
        url("../Fonts/open-sans-v17-latin-regular.woff") format("woff"),
        url("../Fonts/open-sans-v17-latin-regular.ttf") format("truetype"),
        url("../Fonts/open-sans-v17-latin-regular.svg#OpenSans") format("svg");
}

@font-face {                                                   /* normal kursiv */
    font-family: "Open Sans"; font-style: italic; font-weight: 400;
    src: local("Open Sans Italic"), local("OpenSans-Italic"),      
        url("../Fonts/open-sans-v17-latin-italic.eot?#iefix") format("embedded-opentype"),
        url("../Fonts/open-sans-v17-latin-italic.woff2") format("woff2"),
        url("../Fonts/open-sans-v17-latin-italic.woff") format("woff"),
        url("../Fonts/open-sans-v17-latin-italic.ttf") format("truetype"),
        url("../Fonts/open-sans-v17-latin-italic.svg#OpenSans") format("svg");
}

@font-face {                                                            /* fett */
    font-family: "Open Sans"; font-style: normal; font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
        url("../Fonts/open-sans-v17-latin-600.eot?#iefix") format("embedded-opentype"),
        url("../Fonts/open-sans-v17-latin-600.woff2") format("woff2"),
        url("../Fonts/open-sans-v17-latin-600.woff") format("woff"),
        url("../Fonts/open-sans-v17-latin-600.ttf") format("truetype"),
        url("../Fonts/open-sans-v17-latin-600.svg#OpenSans") format("svg");
}

@font-face {                                                     /* fett kursiv */
    font-family: "Open Sans"; font-style: italic; font-weight: 600;
    src: local("Open Sans SemiBold Italic"), local("OpenSans-SemiBoldItalic"),
        url("../Fonts/open-sans-v17-latin-600italic.eot?#iefix") format("embedded-opentype"),
        url("../Fonts/open-sans-v17-latin-600italic.woff2") format("woff2"),
        url("../Fonts/open-sans-v17-latin-600italic.woff") format("woff"),
        url("../Fonts/open-sans-v17-latin-600italic.ttf") format("truetype"),
        url("../Fonts/open-sans-v17-latin-600italic.svg#OpenSans") format("svg");
}

@font-face {                                                      /* extra fett */
    font-family: "Open Sans"; font-style: normal; font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"),
        url("../Fonts/open-sans-v17-latin-700.eot?#iefix") format("embedded-opentype"),
        url("../Fonts/open-sans-v17-latin-700.woff2") format("woff2"),
        url("../Fonts/open-sans-v17-latin-700.woff") format("woff"),
        url("../Fonts/open-sans-v17-latin-700.ttf") format("truetype"),
        url("../Fonts/open-sans-v17-latin-700.svg#OpenSans") format("svg");
}

@font-face {                                               /* extra fett kursiv */
    font-family: "Open Sans"; font-style: italic; font-weight: 700;
    src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"),
        url("../Fonts/open-sans-v17-latin-700italic.eot?#iefix") format("embedded-opentype"),
        url("../Fonts/open-sans-v17-latin-700italic.woff2") format("woff2"),
        url("../Fonts/open-sans-v17-latin-700italic.woff") format("woff"),
        url("../Fonts/open-sans-v17-latin-700italic.ttf") format("truetype"),
        url("../Fonts/open-sans-v17-latin-700italic.svg#OpenSans") format("svg");
}

/* ===============================================================================
E N D E   D E S   S T Y L E S H E E T S
=============================================================================== */