:root {
--color-background-01: #ffffff;
--color-background-button: rgba(255,255,255,0.2);
--color-background-button-hover: rgba(255,255,255,0.9);
--color-link-content-normal:#ffffff;
--color-link-content-hover:#ff0000;
--color-nav-main-normal:#ffffff;
--color-nav-main-active:#ff0000;
--color-nav-main-hover:#ff0000;
--color-nav-main-normal:#ffffff;
--color-pure-black: #000000;
--color-pure-white: #ffffff;
--color-shadow-01: #333333;
--font-color-standard: #ffffff;
--font-handwriting: "caveat", Helvetica, sans-serif;
--font-standard: "open sans", Helvetica, sans-serif;
--font-size-m: 1.1rem;
--font-size-l: 1.5rem;
--font-size-xl: 2rem;
--font-size-xxl: 2.5rem;
--font-size-s: 0.9rem;
--font-size-xs: 0.8rem;
--font-weight-normal: 300;
--font-weight-thin: 100;
--font-weight-bold: 900;
--margin-normal: 1rem;
--margin-narrow: 0.5rem;
--margin-wide: 2rem;
--margin-extra-wide: 3rem;
--padding-normal: 1rem;
--padding-narrow: 0.5rem;
--padding-wide: 2rem;
--radius-normal: 1rem;
--radius-narrow: 0.5rem;
--transition-time-normal: 0.5s;
--transition-time-long: 1s;
--transition-time-short: 0.2s;
}

@viewport {
width: device-width;
zoom:1;
}

@font-face {
    font-family: "caveat";
    font-style: normal;
    font-display: swap;
    src: url(caveat-v17-latin-regular.woff) format("woff");
}
@font-face {
    font-family: "open sans";
    font-style: normal;
    font-display: swap;
    src: url(open-sans-v34-latin-regular.woff) format("woff");
}


body {
font-family: var(--font-standard);
margin: 0;
background-image: url(../media/layout/background-laterne-001.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
color: var(--font-color-standard);
}

div.box_header {
overflow: hidden;
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #ffffff;
border-image: linear-gradient(to right, transparent 0%, #ffffff 30%, #ffffff 90%, transparent 100%);
border-image-slice: 1;
}
div.box_header_left {
margin-left: 10%;
width: 20%;
float: left;
}
div.box_header_left img {
height: 10rem;
width: auto;
}
div.box_header_right {
font-family: var(--font-handwriting);
font-size: var(--font-size-xxl);
font-weight: var(--font-weight-bold);
width: 60%;
margin-right: 10%;
height: 10rem;
float: left;
display: table;
}
div.box_header_right span {
display: table-cell;
vertical-align: middle;
}
div.box_content {
margin-left: auto;
margin-right: auto;
clear: both;
}
div.box_content_left {
margin-left: 10%;
width: 25%;
float: left;
padding-bottom: 5rem;
}
div.box_content_right {
width: 55%;
margin-right: 10%;
float: left;
padding-bottom: 5rem;
}
div.box_content_right a {
text-decoration: underline;
color: var(--color-link-content-normal);
transition: var(--transition-time-normal);
}
div.box_content_right a:hover {
color: var(--color-link-content-hover);
transition: var(--transition-time-normal);
}
div.box_content_right a::after {
content: " \27A4";//\2799";//\293B";//\2197";
}

div.box_content_right a.link_button {
border: 1px solid white;
text-decoration: none;
padding: var(--padding-narrow);
border-radius: var(--radius-narrow);
color: var(--color-link-content-normal);
background-color: var(--color-background-button);
transition: var(--transition-time-normal);
}
div.box_content_right a.link_button:hover {
border: 1px solid white;
color: var(--color-link-content-hover);
background-color: var(--color-background-button-hover);
transition: var(--transition-time-normal);
}

div.box_content_right a.link_download::after {
content: ' \2935';//\21E9';
}
div.box_content_right a.link_image::after {
content: '';
}
div.box_content_right a.link_mail::after {
content: ' \2710';
}
div.box_content_right a.link_phone::after {
content: ' \260E';
}

div.box_content_right img {
max-width: 100%;
height: auto;
}
div.box_footer {
clear: both;
width: 100%;
border-top: 1px solid #ffffff;
border-image: linear-gradient(to right, transparent 0%, #ffffff 30%, #ffffff 90%, transparent 100%);
border-image-slice: 1;
text-align: center;
position: fixed;
bottom: 0;
backdrop-filter: blur(10px) brightness(0.75);
}
div.box_footer a,
div.box_footer a.placeholder {
text-decoration: none;
color: var(--color-nav-main-normal);
transition: var(--transition-time-normal);
cursor: pointer;
}
div.box_footer a:hover,
div.box_footer a.placeholder:hover {
color: var(--color-nav-main-hover);
transition: var(--transition-time-normal);
}


div.box_content_right p {
font-size: var(--font-size-m);
padding-bottom: var(--padding-normal);
}
div.box_content_right blockquote {
font-size: var(--font-size-l);
padding-left: var(--padding-normal);
}
div.box_content_right blockquote p::before {
content: '\275D\00a0';
}
div.box_content_right blockquote p::after {
content: ' \275E';
}
div.box_content_right .handwriting {
font-family: var(--font-handwriting);
font-size: var(--font-size-l);
}

h1 {
font-family: var(--font-handwriting);
font-size: var(--font-size-xxl);
}
h2 {
font-family: var(--font-handwriting);
font-size: var(--font-size-xl);
}
h3	 {
font-family: var(--font-handwriting);
font-size: var(--font-size-l);
}

img.width_30p {
width: 30%;
height: auto;
}
img.width_50p {
width: 50%;
height: auto;
}
img.width_30p_float_right {
width: 30%;
height: auto;
float: right;
padding-left: var(--padding-normal);
}
img.width_50p_float_right {
width: 50%;
height: auto;
float: right;
padding-left: var(--padding-normal);
}

div.box_content_right ul,
div.box_content_right ol {
padding-left: var(--padding-normal);
}

table {
}
table th {
text-align: left;
}

video {
background-color: var(--color-pure-black);
}



/* box navigation begin */
div.box_navigation_main {
position: relative;
padding-top: 2rem;
}
div.navigation_main_show_hide {
display: none;
cursor: pointer;
color: var(--color-nav-main-normal);
text-align: right;
font-size: var(--font-size-xxl);
transition: var(--transition-time-normal);
}
div.navigation_main_show_hide:hover {
color: var(--color-nav-main-hover);
transition: var(--transition-time-normal);
}
/* box navigation end */


/*+++++ navigation_vertical - begin +++++*/
ul.nav_level_shown {
}
ul.nav_level_hidden {
display: non;
}
ul.nav_level_1 {
margin-top: 0rem;
padding-left: 0rem;
}
ul.nav_level_2,
ul.nav_level_3,
ul.nav_level_4 {
padding-left: 1rem;
}
ul.nav_level_1 li {
list-style-type: none;
text-align: left;
font-size: var(--font-size-xl);
}
ul.nav_level_2 li {
font-size: var(--font-size-l);
}

div.navigation_vertical {
font-family: var(--font-handwriting);
}

div.navigation_vertical .active {
color: var(--color-nav-main-active);
font-weight: var(--font-weight-bold);
}
div.navigation_vertical a {
color: var(--color-nav-main-normal);
font-weight: var(--font-weight-normal);
text-decoration: none;
margin-left: 0rem;
margin-right: 1rem;
transition: var(--transition-time-normal);
}
div.navigation_vertical a:hover {
color: var(--color-nav-main-hover);
margin-left: 0.3rem;
margin-right: 0.7rem;
transition: var(--transition-time-normal);
}
span.navigation_vertical_show_more {
color: var(--color-nav-main-normal);
transition: var(--transition-time-normal);
}
span.navigation_vertical_show_more:hover {
cursor: pointer;
color: var(--color-nav-main-hover);
transition: var(--transition-time-normal);
}
/*+++++ navigation_vertical - end +++++*/




/*+++++ additional feature - table of contents - begin +++++*/
div.box_table_of_contents {
backdrop-filter: blur(10px) brightness(0.75);
padding: var(--padding-normal);
}
div.box_table_of_contents span.table_of_contents_headline {
font-weight: var(--font-weight-bold);
border-bottom: 1px solid #ffffff;
border-image: linear-gradient(to right, #ffffff 0%, #ffffff 80%, transparent 100%);
border-image-slice: 1;
display: block;
}
div.box_table_of_contents ul {
padding-left: 0;
margin-bottom: 0;
}
div.box_table_of_contents li {
list-style-type: none;
padding-bottom: var(--padding-normal);
}
div.box_table_of_contents ul li.H3 {
padding-left: var(--padding-normal);
}
div.box_table_of_contents li span {
text-decoration: none;
font-weight: var(--font-weight-thin);
cursor: pointer;
transition: var(--transition-time-normal);
}
div.box_table_of_contents li span:hover {
color: var(--color-nav-main-hover);
}
/*+++++ additional feature - table of contents - end +++++*/



/*#############################*/
@media only screen and (max-width: 62em) {
div.box_header_left {
margin-left: 5%;
width: 25%;
}
div.box_header_left img {
height: 8rem;
}
div.box_header_right {
font-size: var(--font-size-l);
width: 65%;
margin-right: 5%;
height: 8rem;
}
div.box_content_left {
margin-left: 5%;
width: 30%;
}
div.box_content_right {
width: 60%;
margin-right: 5%;
}

ul.nav_level_1 li {
font-size: var(--font-size-l);
}
ul.nav_level_2 li {
font-size: var(--font-size-m);
}

img.width_30p,
img.width_30p_float_right {
width: 50%;
}
}





/*#############################*/
@media only screen and (max-width: 39em) {
#navigation_main_show_hide {
position: fixed;
top: 3%;
right: 3%;
z-index: 10000;
display: block;
}
div.box_navigation_main {
display: none;
backdrop-filter: blur(10px) brightness(0.75);
width: 94%;
height: 100%;
padding: 3%;
padding-top: 6%;
position: fixed;
right: 0% ;
top: 0;
z-index: 1000;
overflow: auto;
}
ul.nav_level_1 li {
font-size: var(--font-size-xxl);
}
ul.nav_level_2 li {
font-size: var(--font-size-xl);
}
div.box_header_left img {
height: 6rem;
}
div.box_header_right {
height: 6rem;
width: 55%;
margin-left: 5%;
margin-right: 10%;
font-size: var(--font-size-m);
}
div.box_content_right {
clear: both;
width: 94%;
margin-left: 3%;
margin-right: 3%;
}

img.width_30p_float_right,
img.width_50p_float_right {
float: left;
width: 80%;
padding-left: 0;
margin-right: 20%;
margin-bottom: var(--margin-normal);
}
}