/* ===============================================================================
Stylesheet für stritzke-online.de
Stand:  16. Februar 2021 v1.0
Datei:  /Stylsheets/bildschirm.css
Autor:  Holger Stritzke
Aufbau: 0. Variablen für Farben
        1. Kalibrierung und Restauration
        2. Allgemeine Styles
        3. Styles für Layoutbereiche
        4. Sonstige Styles
            - Skip-Link
            - Logo
            - Bild
            - Überschriften
            - Font Open Sans
=============================================================================== */

/* ===============================================================================
0. Variablen für Farben
=============================================================================== */
/* Textilschaden Nadel dunkel                                        #304454    */
/* selbst gemixt zu Nadel dunkel                                     #66756D    */
/* Braun Vorlage nature                                              #67522c    */
/* Dunkelrot aus Bild                                                #47060f    */
/* Endzustand blau aus Farbverlauf                                   #253a4b    */
/* Endzustand braun aus Farbverlauf                                  #211d1e    */

/* keine guten Farben ...                                                       */
/* Textilschaden blau                                                #7FAAD0    */
/* Textilschaden blau neu                                            #87C6EE    */

:root {
    --hintergrund: #304454;
    --vordergrund: #66756D;
    --akzent: #47060f;
}

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

* { padding: 0; margin: 0; }

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

body {
    background: #253a4b url(../Images/Hintergrund.png) repeat-x
}

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

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

div#wrapper {
    background-color: var(--hintergrund);
    width: 90%;
    height: 62em;
    margin: 0em auto 1em auto;
    border-radius: 0px 0px 15px 15px;
}

div#kopfbereich1-outside {
    float: left;
    padding-left: 2%;
    width: 98%; height: 5em;
    background: var(--hintergrund);
    color: white;
}

div#Textzelle1 {
    width: auto; height: 2.7em;
    color: #a0a0a0;
    font-size: 1.8em;
    font-style: italic;
    line-height: 1.2em;
}

div#Textzelle2 {
    position: absolute;
    top: 0.5em; left: 28%;
    width: auto; height: 2.7em;
    color: #a0a0a0;
    text-align: center;
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.2em;
}

div#Textzelle3 {
    position: absolute;
    top: 0.8em; right: 7%;
    width: auto; height: 3.2em;
    /* Textattribute unten bei Überschrift h1 !                               */
    }   

div#kopfbereich2-outside {
    float: left;
    width: 100%; height: 12em;
    background: black url(../Images/Header.png) no-repeat;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
    background-color: none;
}

div#navibereich-outside {
    position: absolute;
    top: 17em;
    width: 20%; height: 44em;
    background-color: var(--hintergrund);
    overflow: hidden;
}

div#textbereich-outside {
    position: absolute;
    top: 17em; left: 25%;
    width: 55%; height: 44em; 
    margin: 0em -0.5em 0em 0em;
    background-color: var(--hintergrund);
    overflow: hidden;
}

div#bildbereich-outside {
    position: absolute;
    top: 17em; left: 80%;
    width: 15%; height: 44em; 
    background-color: var(--hintergrund);
    overflow: hidden;
}

div#fussbereich-outside {
    position: absolute;
    top: 60em;
    width: 90%; height: 2em;     
    margin: 0.5em 0em 0.5em 0em;
    background-size: 100%;
    background-color: var(--vordergrund);
    border-radius: 0px 0px 15px 15px;
    text-align: right;
    padding-top: 0.8em;
    color: #a0a0a0;
}

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

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

    color: white; 
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6vw;
}

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

div#navibereich-outside ul {
    list-style-type: none;
    width: 90%; height: auto;
    margin: 0em 0em 0em 5%;         /* Abstand der Menüleiste zum linken Rand */
    text-decoration: none; text-align: left;
    font-family: "Open Sans"; font-style: normal;
    font-weight: 600; font-size: 1.6vw;
}

div#navibereich-outside li {
    margin: 1em 0em 0em 0em;        /* Abstand der Menüpunkte untereinander */
    width: 90%;
}

div#navibereich-outside a {
    display: block;
    color: white;
    text-decoration: none; 
}

div#navibereich-outside a:link
{
    width: 100%; height: auto;
    padding: 0.7em 0em 0.7em 1em;
    background-color: var(--vordergrund);
}

div#navibereich-outside a:visited
{
    background-color: var(--vordergrund);
}

div#navibereich-outside a:hover, div#navibereich a:focus {
    background-color: var(--vordergrund);
    width: 96%;
    border-left: 5px var(--akzent) solid;
}

div#navibereich-outside a:active {
    background-color: var(--vordergrund);
}

body#index #navi01 a, body#geschaeftskunden #navi02 a, body#privatkunden #navi03 a,
body#kontakt #navi04 a, body#impressum #navi05 a, body#datenschutz #navi06 a {
    color: white;
    background-color: var(--vordergrund);
    width: 96%;
    border-left: 5px var(--akzent) solid;
}

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

/* Style Kontaktformular -------------------------------------------------------*/

form {
    background-color: var(--vordergrund);
    width: 90%; height: 20em;
    padding: 20px;
    border: 0.1em solid #47060f;
    overflow: hidden;    
}

label { 
    display: block;
    cursor: pointer;
}

input#absender,

textarea {
    width: calc(100% - 5em); max-height: 11em;
    border: 1px solid #8c8c8c;
    padding: 1em 1em 1em 1em;
    margin-bottom: 1em;

    overflow-y: scroll;
    
    color: var(--hintergrund);
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4vw;    
}

input:focus,

textarea:focus {
    background-color: #d9d9d9;
}

/* ---   skiplink --------------------------------------------------------------*/

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

/* ---   Bild ------------------------------------------------------------------*/

img.bild {
    display: block;
    width: 85%; height: auto;
    margin: 1.5em auto 0em auto;
}

/* --- Animation ---------------------------------------------------------------*/

@keyframes einblenden {
    0% {
            transform: scale(0.1);
            opacity: 0;
	}
    100% {
            transform: scale(1);
            opacity: 1;
	}
}

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

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

h1 {
    font-family: "Open Sans"; font-style: normal;
    font-weight: 700; font-size: 1.5vw;
    line-height: 1em;
    font-style: italic;
    color: #a0a0a0;
    text-align: center;
    background-color: none;
    animation: einblenden 6s;
}

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.8vw;
}
h4 {
    font-family: "Open Sans"; font-style: normal;
    font-weight: 700; font-size: 1.8vw;
}

/* --- 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
=============================================================================== */