/*############################################################################*/
/*################### https://www.blc-ingenieure.de ##########################*/
/*############################################################################*/

/*
grün  = cmyk(41,0,0,60)
      = html(#2f6565)
      = rgb(47,101,101)   
margin, padding = top right bottom left
*/

/*############################################################################*/
/*######################################################### General Formating */
/*############################################################################*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Body */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

html {
    background:             rgba(47,101,101,0.2);
}

body {
    font-family:            Helvetica, Arial, Geneva, sans-serif;
    font-size:              1em;
    min-height:             100%;
    width:                  100%;
    max-width:              860px;
    background:             #ffffff;
    margin:                 0.5em auto 1em auto;
    padding:                0em 0em 0em 0em;
	display:                grid;
	gap:                    0.5em;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Header */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

header,
nav {
    background:             #ffffff;
}

header h1 {
    text-align:             left;
    font-size:              1.25em;
    color:                  #2f6565;
    background:             #ffffff;
    margin:                 0em 0em 0em 0em;
    padding:                1.3em 0em 0em 0em;
}

header h2 {
    text-align:             left;
    font-size:              0.8em;
    color:                  #2f6565;
    background:             #ffffff;
    margin:                 0em 0em 0em 0em;
    padding:                0em 0em 1.2em 0em;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Main */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

main h1 {
/*    font-family:            Georgia, Times;*/
    font-size:              1.5em;
    color:                  #2f6565;
    margin:                 0px 15px 0px 15px;
    padding:                1em 0em 0.5em 0em;
/*    border-bottom:          2px solid;
    border-color:           #2f6565;
  text-transform:         uppercase;*/
}

main h2 {
/*    font-family:            Georgia, Times;*/
    font-size:              1.25em;
    color:                  #000000;
    margin:                 0px 15px 0px 15px;
    padding:                1em 0em 0.5em 0em;
/*    border-bottom:          2px solid;
    border-color:           #2f6565;
  text-transform:         uppercase;*/
}

main h3 {
/*    font-family:            Georgia, Times;*/
    font-size:              1.1em;
    color:                  #000000;
    margin:                 0px 15px 0px 15px;
    padding:                1em 0em 0.5em 0em;
/*    border-bottom:          2px solid;
    border-color:           #2f6565;
  text-transform:         uppercase;*/
}

main p {
    font-size:              1em;
    text-align:             justify;
    -webkit-hyphens:        auto;     
    -moz-hyphens:           auto;     
    -ms-hyphens:            auto;     
    -o-hyphens:             auto;     
    hyphens:                auto;
    margin:                 0px 15px 1em 15px;
    padding:                0.5em 0em 0em 0em;
}

main iframe {
    margin:                 0px 15px 1em 15px;
}

aside h1 {
    font-size:              1em;
    margin:                 0px 10% 1em 10%;
}

aside p {
    font-size:              1em;
/*    text-align:             ce;*/
    margin:                 0px 10% 1em 10%;
}

main a:link,
aside a:link {
    text-decoration:        none;
    color:                  #2f6565;
}

main a:visited,
aside a:visited {
    text-decoration:        none;
    color:                  #000000;
}

main a:focus,
aside a:focus {
    text-decoration:        none;
    color:                  #2f6565;
}

main a:hover,
aside a:hover {
    text-decoration:        none;
    color:                  #000000;
    border-bottom:          0.1em solid #000000;
}

main a:active
aside a:active {
    text-decoration:        none;
    color:                  #000000;
}

main details,
aside details {
    overflow:               hidden;
    transition:             max-height 1s ease-in-out;
}

main details[open],
aside details[open] {
    max-height:             100%;
}


main details:not([open]),
aside details:not([open]) {
    max-height:             5em;
}


main details summary {
    list-style-position:    inside;
    font-size:              1.1em;
    font-weight:            bold;
    cursor:                 pointer;
    list-style:             none;
    position:               relative;
    margin:                 0em 0em 0em 0em;
    padding:                0.5em 0.5em 0.5em 2.5em;
}

main details summary::-webkit-details-marker {
    display:                none;
}

main details summary::before {
    content:                "+";
    color:                  #2f6565;
    font-size:              2em;
    position:               absolute;
    left:                   0.4em;
    bottom:                 0em;
    font-weight:            bold;
}

main details[open] summary::before {
    content:                "-";
    color:                  #2f6565;
    font-size:              2em;
    position:               absolute;
    left:                   0.5em;
    bottom:                 0em;
    font-weight:            bold;
}





aside details summary {
    list-style-position:    inside;
    font-size:              1.1em;
/*    font-weight:            bold;*/
    text-align:             center;
    cursor:                 pointer;
    list-style:             none;
    position:               center;
    margin:                 0.5em 0em 1em 0em;
    padding:                0em 0em 0em 0em;
}

aside details summary::-webkit-details-marker {
    display:                none;
}

aside details summary::before {
    content:                "+";
    color:                  #2f6565;
    font-size:              1.5em;
    position:               center;
    bottom:                 0em;
    font-weight:            bold;
}

aside details[open] summary::before {
    content:                "-";
    color:                  #2f6565;
    font-size:              1.5em;
    position:               center;
    bottom:                 0em;
    font-weight:            bold;
}













aside details ul {
     margin:                0em 25px 0em 25px;
}

main ul,
aside ul {
    list-style-type:        square;    // bei ul
}

main ul li::marker,
aside ul li::marker {
    font-size:              1.75em;
    color:                  #2f6565;
    line-height:            0.8;
}

main ul li,
aside ul li {
    margin-bottom:          10px;
}

main img {
    display:                absolute;
    vertical-align:         middle;
    margin:                 0.5em 0.5em 0.5em 0.6em;
}

figure {
    display:                block;
    position:               relative;
    width:                  100%;
    margin:                 0em 0em 3em 0em;
    padding:                0em 0em 0em 0em;
}


figure img {
    display:                block;
    position:               relative;
    margin:                 0em 0em 0em 0em;
    padding:                0em 0em 0em 0em;
    width:                  100%;
    border:                 none;
    background:             gray;
/*    z-index:                1;*/
}

/*
figure figcaption {
    position:               absolute;
    width:                  100%;
    bottom:                 0;
    font-size:              0.8em;
    text-align:             center;
    color:                  white;
    z-index:                2;
}
*/

aside figure img {
    display:                block;
    margin:                 0 auto -2em auto;
    padding:                0;
    width:                  80%;
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------- Hyperlink */
/*----------------------------------------------------------------------------*/


/* 2-spaltiges Layout für breitere Viewports */

@media (min-width: 711px) {
	body {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr min-content;
	}
}

header,
nav,
main,
footer {
	grid-column: 1 / -1;
}


header {
	background: #ffffff;
	border:0;	
	border-color: #ffffff;
/*	background: #F1F3F4;
	border-color: #d5d5d5;
	display: grid;
	grid-template-columns: min-content 1fr; */
}

main {
	background: #ffffff;
	border-color: #ffffff;
}

aside {
	background: #ffffff;
	border-color: #ffffff;
}

footer {
    color:                  #ffffff;
	margin: 0 auto;
	max-width: 60em;
	font-family: sans-serif;
}


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

/*============================================================================*/
/*================================================================ In General */
/*============================================================================*/
 
nav {
    margin:                 0 0 0 0;
    padding:                0 0 0 0;
    width:                  100%;
    height:                 4em;
    text-align:             right;
/*    color:                  #8a6872;*/
    position:               relative;
    background:             rgba(255, 255, 255, 1.0);
    border-bottom:          1px solid white;
}
 
nav ul {
    text-align:             center;
    margin:                 0;
    padding:                2.1em 0 0 0;
    height:                 100vh;
}
 
nav ul li {
    list-style:             none;
    margin:                 0;
    display:                inline;
}
 
nav ul li a {
    color:                  #2f6565;
    position:               relative;
    padding:                0em 0em 0.1em 0em;
    display:                inline-block;
    text-decoration:        none;
    text-transform:         uppercase;
}
 
nav ul.menu li a:hover {
    color:                  #000000;
    border-bottom:          2px solid #000000;
}

/*============================================================================*/
/*============================================================= Media Queries */
/*============================================================================*/

@media screen and (min-width: 711px) {
    nav ul.menu {
        max-height:         20px;
    }
    nav a#nav-m,
    nav a.close {
        display:            none;
    }
    nav ul li {
        margin:             0 7px 0 7px; /*0 15px 0 0*/
    }
}


@media screen and (max-width: 710px) {
    /*Formatierung Mobiles Menue*/
    nav ul {
        top:                4.5em;
        position:           absolute;
        background:         #ffffff;
        width:              100%;
        left:               -100%;

        list-style-type:    none;
        margin:             0;
        padding:            0;

        -webkit-transition: all 0.6s ease;
        -moz-transition:    all 0.6s ease;
        -o-transition:      all 0.6s ease;
        transition:         all 0.6s ease;

        z-index:            5;
    }

    nav ul li{
        display:            block;
        text-align:         left;
        padding:            0em 0.5em;
        border-bottom:      1px solid #2f6565;
    }

    nav ul li a {
        color:              #2f6565;
        padding:            1em 0;
    }

    nav ul.menu li a:hover {
        border-bottom:      0;
    }

    /*Hamburger-Icon*/
    nav a#nav-m img,
    nav a.close img {
        width:              30px;
        height:             auto;
        margin:             1.5em 30px 0em 0em;
    }

    nav > .close,
    nav a#nav-m:target {
        display:            none;
    }

    nav a:target ~ ul,
    nav a:target ~ .close {
        display:            inline-block;
    }

    nav a:target ~ .close {
        position:           absolute;
        margin-left:        -60px;
    }

    nav a:target ~ ul {
        left:               0;
    }

    .image {
        float:              none;
        display:            block;
        margin:             1em auto 0em auto;
        padding:            0em 0em 0em 0em;
        height:             234px;
    }
  
    header h1hide {
        display:            none;
    }
    
    header h2hide {
        display:            none;
    }
}