@charset "utf-8";
/* mywebsite.css --------------------------- */
/* Copyright (C) 2022 by Helmuth Hahn-Heinze */
/* Version Alpha 1.0 ----------------------- */

/* Import von Google Schriften 
Abril+Fatface,
Arvo,
Bodoni+Moda,
Catamaran,
DM+Serif,
Josefin+Sans,
Libre+Franklin,
Montserrat,
Nunito,
Playfair+Display,
Raleway,
Roboto,
Ubuntu */

/*@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Arvo:wght@400;700&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&family=Catamaran:wght@100;300;500;600;700;800;900&family=DM+Serif+Text:ital@0;1&family=Josefin+Sans:wght@700&family=Libre+Franklin:wght@100;200;300;400&family=Lobster&family=Montserrat:wght@300;700;900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Ubuntu+Condensed&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');*/

/* montserrat-regular - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v25-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v25-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* Farbdefinitionen ------------------- */
:root {
    --hgfarbe: #000;
    /* Schwarz */
}

/* Main part ------------------------------------ */

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* Setzen aller Abstaende auf 0 */
    padding: 0;
    margin: 0;
}

body {
    font-family: Verdana, Helvetica, "sans-serif";
    font-size: 100%;
    /* 16px; 
    color: black;
    /* Setzen des Abstandes auf 0 */
    background: var(--hgfarbe);
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    margin: auto;
    background: var(--hgfarbe);
    overflow: hidden;
}

/* Fonts --------------- */

#acht {
    /* 3D-Schrift, grau, Idee: H. H.-H. */
    font-family: 'Raleway', sans-serif;
    color: #bbb;
    /*font-size: 3em;*/
    text-shadow: -2px -2px 2px #eee, 2px -2px 0 #eee, -2px 2px 2px #000,
        2px 2px 0 #000, 5px 5px 5px #000, 4px 3px 10px #000;
}

#deffont {
    font-family: 'Raleway', sans-serif;
    color: #bbb;
}

.osw-head {
    font-family: 'Oswald';
    color: white;
    font-size: 40px;
    font-weight: 300;
}

.osw-txt-01 {
    font-family: 'Montserrat';
    font-size: 20px;
    font-stretch: expanded;
    line-height: 1.6;
    padding: 10px;
    text-align: left;
    color: rgba(199, 199, 199, 0.65);
}

.imp-fmt {
    font-family: 'Montserrat';
    font-size: 20px;
    font-stretch: expanded;
    line-height: 1.6;
    padding: 20px;
    text-align: left;
    color: rgba(199, 199, 199, 0.65);
    width: 500px;
    margin: auto;
    background: rgba(31, 31, 31, 0.58);
    box-shadow: 5px 5px 5px black;
}

.imp-fmt h1, h2 {
    color: rgba(234, 234, 234, 0.65);
    text-shadow: 3px 3px 5px black;
}

.imp-fmt p {
    text-shadow: 3px 3px 5px black;
}

.imp-fmt a {
    color: lightyellow;
    text-decoration: none;
    text-shadow: 3px 3px 5px black;
}

.imp-footer {
    text-align: center;    
}

.imp-footer a {
    color: lightgray;
    font-weight: bold;
    text-decoration: none;
}

.imp-fmt-sz {
    height: 100vh;
    overflow: auto;
}

.dats-fmt {
    font-family: 'Montserrat';
    font-size: 15px;
    font-stretch: expanded;
    line-height: 1.6;
    padding: 20px;
    text-align: left;
    color: rgba(199, 199, 199, 0.65);
    width: 900px;
    margin: auto;
    background: rgba(31, 31, 31, 0.73);
    box-shadow: 5px 5px 5px black;
}

.dats-fmt p {
    text-align: justify;
}

.ds-fmt {
    height: auto;
}

/* ------- header ----------------------------------------------------- */

.headerblockgrey {
    /* background-color: var(--hgfarbe); */
    width: 0 auto;
    border: 1px solid #000;
    color: black;
    margin: 0 auto;
    /*    padding-bottom: 25px;*/
    padding-bottom: 0px;
    height: 100px;
    /* 60px; but with box-sizing: border-box; size = 100px; */
    background:
        linear-gradient(transparent, #484848 100%),
        gray repeating-linear-gradient(135deg, transparent, transparent 35px,
            rgba(160, 160, 160, 0.5) 35px,
            rgba(36, 36, 36, 0.5) 70px);
    background-clip: padding-box;
    border-left: 1px solid black;
    /* border-radius: 10px; */
    border-top: 1px solid black;
    /* box-shadow: 0px 1px 3px 1px #969494; */
}

#titelzeile {
    width: 100%;
    padding: 0px 0px 0px 0px;
    background-color: var(--hgfarbe);
    text-align: left;
    font-size: 0, 75em;
}

h1.rahmen-blau {
    border: 1px solid transparent;
}

.header1-ueberschrift-links {
    font-family: 'Raleway', sans-serif;
    font-size: 1, 125em;
    /* 18px , 18 / 16px = 1,125; */

    font-weight: 900px;
    border: 1px solid;
    background-color: var(--hgfarbe);
    padding: 1em;
    border-color: transparent;
    border-style: solid;
    width: 12em;
    text-align: center;
    float: left;
}

.zusatztext_im_header_rechts {
    font-size: 10px;
    border: 1px solid;
    border-color: transparent;
    vertical-align: top;
    float: right;
}

.header_h2_mark {
    color: red;
}

/* ------- Logo ----------------------------------------------------- */
.logo {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 40px;
    margin-right: 0px;
    margin-top: 5px;
    /* if you want it vertically middle of the navbar. */
    margin-bottom: 5px;
}

/* ----------------------------------------------------------------- */
/* ------- nav ----------------------------------------------------- */
/* ----------------------------------------------------------------- */

nav {
    padding-left: 0;
}

/* --------------------------------------------------------------------- */
#nav2 {
    display: none;
    /* Menue button und klapp-menue nicht anzeigen */
}

/* --------------------------------------------------------------------- */
a.nv {
    color: white;
    box-shadow: inset 0 -0.3em gray;
    padding-bottom: 5px;
}

ul.nv {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--hgfarbe);
}

li.nv {
    float: right;
    border-right: 1px solid transparent;
}

li.nv a.nv {
    display: block;
    font-size: 12px;
    /*    color: #ebebeb;*/
    text-align: center;
    padding: 5px 15px;
    text-decoration: none;
    border-top-left-radius: 0px;
    /* 20px;, old = 100%; */
    border-top-right-radius: 0px;
    /* 20px;, old = 100%; */
}

a.nv:any-link {
    background: linear-gradient(#a0a0a0, #333333);
}

a.nv.active {
    background: linear-gradient(#d3d3d3, #626262);
    color: black;
    /* box-shadow: inset 0 0 0.5em blue; */
    box-shadow: inset 0 -0.3em orange;
}

li.nv a.nv:hover {
    background: linear-gradient(#797979, #000000);
    color: #c7c7c7;
    /* color: #edf; */
    box-shadow: inset 0 -0.3em red;
}

/* ------- main ----------------------------------------------------- */

main {
    background: white;
    height: auto;
    /* margin-left: 20px;
    padding-left: 10px;    */
    border: 1px solid transparent;
    padding: 20px;
}

/*
h1.main {
    padding-top: 20px;
}
*/

.padding_top_p {
    padding-top: 20px;
}

.li-padding-left {
    padding-left: 40px;
}

.padding-bottom-style {
    padding-bottom: 50px;
}

a {
    color: red;
}

/* ------ footer ------------------------------------------------------*/
footer {
    padding-top: 5px;
    padding-bottom: 15px;
    height: 180px;
    /*margin-top: -10px;*/
    /*background: repeating-linear-gradient(to left, gray 2px, lightgray 20px, darkgray 50px);*/
}

p.special_padding_top {
    padding-top: 2em;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    /*font-size: 18px;*/
    font-size: 18px;
    border: none;
    outline: none;
    background-color: rgba(195, 195, 195, 0.34);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    /* 4px; */
    transition: width 2s;
}

#myBtn:hover {
    background-color: rgba(85, 85, 85, 0.51);
}

/* -------------------- fieldset email dialog ------------------------------------ */
/*.form_style input[type="mail"] {
    width: 100px;
    background-color: lightgrey;
    overflow: hidden;
}*/

/* ----------------------------------------------------------------------------------- */
/* ---------------------------------- Breakpoints ------------------------------------ */
/* ----------------------------------------------------------------------------------- */

/* ------------------ Desktop -------------------------------------------------------- */
@media screen and (max-width: 1920px)

/* 1920px = Full-HD,
    4K = 3840px,
    max is 8K = 7680px */
    {

    /* ------------------------------------------------------------ */
    #nav2 {
        display: none;
        /* Menue button und klapp-menue */
    }

    /* ------------------------------------------------------------ */
    ul.nv {
        list-style-type: none;
        font-size: 1em;
        margin: 0;
        padding: 0;
        padding-left: 20px;
        overflow: hidden;
        /*        background: linear-gradient(rgb(193, 96, 0),rgb(59, 29, 0));*/
        /*        background: linear-gradient(black, darkgray);*/
        border-color: black;
        border-style: solid;
        background: linear-gradient(#989898, #000000);
    }

    .hh {
        font-size: 80px;
    }

    .wdesign {
        font-size: 60px;
    }

    /* Font-Size fuer Werbung */
    .fntsize_def01 {
        font-size: 30px;
    }

    main {
        height: 4000px; /* 5700px; */
        /*  height: 400px; = standard size */
        /*        background: linear-gradient(to left top, blue, red);*/
        /*        background: #f4f4f4;*/

        background: -webkit-linear-gradient(transparent, #484848 100%),
            gray repeating-linear-gradient(45deg, transparent, transparent 35px,
                rgba(160, 160, 160, 0.5) 35px,
                rgba(36, 36, 36, 0.5) 70px);
        background: -o-linear-gradient(transparent, #484848 100%),
            gray repeating-linear-gradient(45deg, transparent, transparent 35px,
                rgba(160, 160, 160, 0.5) 35px,
                rgba(36, 36, 36, 0.5) 70px);
        background: linear-gradient(transparent, #484848 100%),
            gray repeating-linear-gradient(45deg, transparent, transparent 35px,
                rgba(160, 160, 160, 0.5) 35px,
                rgba(36, 36, 36, 0.5) 70px);
        border-bottom: 2px solid #000;

        /*        background-clip: padding-box;*/

        /*    
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 1px 3px 1px #969494;
*/
        padding-left: 20px;
        padding-top: 20px;
    }

    /*main::first-line {
        font-size: 50px;
    }*/

    main h1 {
        font-size: 50px;
    }

    /*h1:after {
        content: " D";
    }*/

    .slidersize {
        width: 800px;
    }

    fieldset {
        width: 80px;
        background-color: #ffffff;
        /* object-fit: scale-down; */
        /* width: auto;*/
    }

    footer {
        font-size: 0.875em;
        /* 0.75 */
        padding-left: 0px;
        line-height: 1.5;
        background: -webkit-linear-gradient(transparent, #484848 100%),
            gray repeating-linear-gradient(135deg, transparent, transparent 35px,
                rgba(160, 160, 160, 0.5) 35px,
                rgba(36, 36, 36, 0.5) 70px);
        background: -o-linear-gradient(transparent, #484848 100%),
            gray repeating-linear-gradient(135deg, transparent, transparent 35px,
                rgba(160, 160, 160, 0.5) 35px,
                rgba(36, 36, 36, 0.5) 70px);
        background: linear-gradient(transparent, #484848 100%),
            gray repeating-linear-gradient(135deg, transparent, transparent 35px,
                rgba(160, 160, 160, 0.5) 35px,
                rgba(36, 36, 36, 0.5) 70px);
        border-top: 2px solid #000;

        /*
    background-clip: padding-box;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 1px 3px 1px #969494;
*/
    }
}

/* ------------------ Tablets -------------------------------------------------------- */

@media screen and (max-width: 1024px)

/* and (orientation: portrait) */
    {

    /* ------------------------------------------------------------------------------- */
    #nav2 {
        display: none;
        /* Menue button und klapp-menue */
    }

    /* ------------------------------------------------------------------------------- */

    ul.nv {
        list-style-type: none;
        font-size: 1em;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: linear-gradient(#989898, #000000);
    }

    /* main ------------------------ */
    /* Schriftgroessen ------------- */
    .hh {
        font-size: 50px;
    }

    .wdesign {
        font-size: 30px;
    }

    /* Font-Size fuer Werbung */
    .fntsize_def01 {
        font-size: 20px;
    }

    main {
        height: 2700px;
        /*  height: 400px; = standard size */
    }

    /*main::first-line {
        font-size: 40px;
    }*/

    main h1 {
        font-size: 40px;
    }

    /*h1:after {
        content: " T";
    }*/

    .slidersize {
        width: 500px;
    }

    fieldset {
        width: 80px;
        background-color: #ffffff;
        /* object-fit: scale-down; 
        width: auto;*/
    }

    footer {
        font-size: 0.875em;
        /* 0.75 */
        padding-left: 0px;
        line-height: 1.5;
    }
}

/* ------------------- Mobile -------------------------------------------------------- */

@media screen and (max-width: 720px)

/*and (orientation: portrait) */
    {

    body {
        min-width: 350px;
    }

    .column {
        width: 100%;
    }

    .header1-ueberschrift-links {
        font-size: 12px;
        /* 14px , 14 / 16px = 0.875; */
    }

    nav {
        display: none;
        /* keine standard-tabs (ersetzt durch menue-button und klapp-menue) */
    }

    /* --------- klapp- menue --------------------------------------------------------- */

    /* ul und li Abbstaende fuer das Klapppmenue zuruecksetzen  ----------------------- */
    ul,
    li {
        margin: 0;
        padding: 0;
    }

    /* -------- Button und Klapp-Menue ------------------------------------------------ */

    #nav2 {
        display: block;
        /* Menue button und klapp-menue anzeigen */
    }

    #nav2 {
        border-bottom: 1px solid #ededed;
        /* Hintergrund-Farbe Menue-Band */
        background: linear-gradient(#797979, #000000);
        /* darkgray */
        /* #a0969d; */
        /*        border-radius: 4px 4px 0px 0px;*/
        /*        padding: 1px;*/
        border: 1px solid black;
    }

    #nav2 li {
        list-style: none;
        display: inline-block;
        background-color: darkgray;
        /* #43373f; */
        /* Farbe Hintergrund-Klapp-Menue */

        list-style: none;
        display: inline-block;
        background-color: darkgray;
    }

    #nav2 a {
        text-decoration: none;
        display: block;
        padding: 1.5em 15% 0.75em;
        color: #000;
        /* Schriftfarbe */
        /*background: linear-gradient(lightgray, gray);*/
        /* Klapp-Menue-Baender linear vert. grau schattiert */
        /* Muss noch verbessert werden, insbesondere im Zusammenhang mit der Hover-Farbe */
        /* Standard ist flaches graues Menue mit hellgrauen Trennlinien */
    }

    #nav2 a:hover {
        background-color: #111;
        color: #edf;
        background: linear-gradient(#b4b4b4, #4a4a4a);
    }

    /* Menü-Buttons normalerweise ausblenden */
    .menu-toggle {
        display: none;
    }

    /* Hamburger-Menue ---------- */
    .js .menu-toggle {
        display: block;
        cursor: pointer;
        color: #000000;
        border-radius: 20%;
        /* background-color: darkgrey; */
        /* #645360; */
        /* Button-Color */
        background: linear-gradient(#9b9b9b, #434343);
        width: 2.5em;
        height: 2.5em;
        margin: 5px auto;
        /* Rand um Button */
        text-align: center;
        line-height: 2.20em;
        border: 1px solid #010101;
        font-weight: normal;
        /*-webkit-box-shadow: 2px 2px 1px #222;*/
        box-shadow: 2px 2px 1px #222;
        /*  transition: all 2s  */
    }

    /*#nav2 .menu-toggle:hover {
        color: #e8e8e8;
    }*/

    #nav2 li {
        /*-webkit-box-shadow: 0 3px 3px rgba(245, 245, 245, 0.75) inset;*/
        box-shadow: 0 3px 3px rgba(245, 245, 245, 0.75) inset;
    }

    .js #nav2 ul {
        display: none;
    }

    #nav2 ul.toggled-on {
        display: block;
        text-align: center;
    }

    #nav2 ul.toggled-on li {
        display: block;
    }

    /* Hamburger-Menue Button --------------- */
    [char-button]:before {
        content: attr(char-button);
        speak: none;
        display: inline-block;
        font-size: 200%;
    }

    /* nav - 1 - eigentlich ausgeblendet */
    ul.nv {
        list-style-type: none;
        font-size: 0.75em;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: darkgray;
    }

    /* ------------- main -------------------------------------------------- */

    .hh {
        font-size: 30px;
    }

    .wdesign {
        font-size: 20px;
    }

    /* Font-Size fuer Werbung */
    .fntsize_def01 {
        font-size: 2.5vw;
    }

    main {
        height: 3620px;
        /*  height: 400px; = standard size */
        background-color: inherit;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 0.75em;
    }

    /*h1:after {
        content: " M";
    }*/

    /*main::first-line {
        font-size: 30px;
    }*/

    main h1 {
        font-size: 30px;
    }

    .slidersize {
        width: 400px;
    }

    /* ------------- Kontaktformular --------------------------------------- */
    fieldset {
        width: 50px;
        background-color: lightgrey;
        width: auto;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: -5px;
        margin-right: -10px;
    }

    /* ------------- footer ------------------------------------------------ */
    footer {
        font-size: 12px;
        /* 0.75 */
        padding-left: 0px;
        color: black;
        line-height: 1.5;
    }
}