@font-face {
    font-family: 'opensans'; /* Light */
    src: url('../fonts/opensans/OpenSans-Light.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Light.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Light Italic*/
    src: url('../fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-LightItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Normal */
    src: url('../fonts/opensans/OpenSans-Regular.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Regular.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Regular Italic */
    src: url('../fonts/opensans/OpenSans-Italic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Italic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Semi Bold */
    src: url('../fonts/opensans/OpenSans-Semibold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Semibold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Semi Bold Italic */
    src: url('../fonts/opensans/OpenSans-SemiboldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-SemiboldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Bold */
    src: url('../fonts/opensans/OpenSans-Bold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Bold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Bold Italic */
    src: url('../fonts/opensans/OpenSans-BoldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-BoldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Extra Bold */
    src: url('../fonts/opensans/OpenSans-ExtraBold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-ExtraBold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Extra Bold Italic */
    src: url('../fonts/opensans/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-ExtraBoldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}


/* VARIABLES */
:root {  --content-width01: 1000px;}
:root {  --menu-width: 200px;}

:root {  --colordark: #666666;}
:root {  --colorlight: #FFFFFF;}

:root {  --color-01: #006699;} /* BLAU */
:root {  --color-02: #E6E6E6;} /* GRAU */
:root {  --color-03: #999999;} /* GRAU 2 */

:root {  --space-below-00: 5px;} 
:root {  --space-below-01: 15px;} 
:root {  --space-below-02: 30px;} 
:root {  --space-below-03: 60px;} 
:root {  --side-space-01: 15px;} 
:root {  --gap01: 30px;} 
:root {  --animation-01: all 0.4s ease-in-out 0s;} 

:root {  --fontsize-s: 12px;}
:root {  --fontsize-m: 14px;} /* Font Size Default */
:root {  --fontsize-l: 21px;} 
:root {  --fontsize-xl: 30px;} 
:root {  --fontsize-xxl: 38px;} 
:root {  --lineheight-m: 1.4;} /* Line Height Default */
:root {  --lineheight-xxl: 1.2;} 

* {margin: 0;padding: 0;box-sizing: border-box;}
header, footer, section, article, nav {display: block;}

body {background: var(--color-02);color: var(--colordark);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;font-size: var(--fontsize-m); line-height: var(--lineheight-m);}

#wrapper {background: var(--colorlight);max-width: var(--content-width01);margin: 20px auto;padding: 20px 30px;}

h1 {font-size: var(--fontsize-xl); font-weight: 600;color: var(--colordark);margin-bottom: var(--space-below-02);}
h2 {font-size: var(--fontsize-l); font-weight: 400;color: var(--color-01);}
h3 {font-size: var(--fontsize-m); font-weight: 700;}

h2, p, ul, ol {margin-bottom: var(--space-below-01);}

a {color: var(--color-01); text-decoration: underline;}
a:hover {text-decoration: none;outline: 0;}
ul {list-style: none;}
img {border: none;max-width: 100%;height: auto;}
strong {font-weight: 700;}
hr {height: 1px;border: none;width: 100%;background: var(--color-01);margin-bottom: var(--space-below-00);}
table {border-collapse: collapse;border-spacing: 0;}

header ul {display: none;}
header {border-bottom: 2px solid var(--color-01);padding-bottom: var(--space-below-01);margin-bottom: var(--space-below-02);position: relative;overflow: visible;}
header > p > a {display: block;text-decoration: none;font-size: var(--fontsize-xxl);line-height: var(--lineheight-xxl);font-weight: 500;}
header p {margin-bottom: 0;}

header .extras {position: absolute;top: 0;right: 0;display: flex;gap: 10px;}
header .extras ul {display: flex;gap: 10px;}
header .extras li a {color: var(--color-01);font-size: var(--fontsize-s);text-decoration: none;text-transform: uppercase;}
header .extras li a:hover {text-decoration: underline;}
header .extras li a.active {color: var(--color-03);}

header :not(.extras) > ul {display: none;}
header #main-nav {position: relative;}
header #main-nav ul {display: block; position: absolute;top: calc( var(--space-below-01) + var(--space-below-02) );left: 0;width: var(--menu-width);z-index: 1;}
header #main-nav ul a {display: block;margin-bottom: var(--space-below-00);font-size: var(--fontsize-m);font-weight: 600;color: var(--color-01); text-decoration: none;}
header #main-nav ul a:is(:hover, :focus, .active) {color: var(--color-03);outline: 0;} 

#toggle-nav {display: none;}

main {padding: 0 0 var(--space-below-03) var(--menu-width);min-height: 200px;}
main p:has(img) {float: right;margin: 0 0 var(--space-below-01) var(--space-below-01);}
main ul {list-style: disc;padding-left: 40px;}
main li {margin-bottom: var(--space-below-01);}
main a::before {content: '[';}
main a::after {content: ']';}
main table {width: 100%;}
main table th,
main table td {text-align: left;border: none;min-width: 100px;vertical-align: top;padding-bottom: var(--space-below-01);}
main table tr > td:first-child {font-weight: 600;}

main .columns {display: grid;grid-template-rows: auto;gap: var(--gap-01);box-sizing: border-box;}
main .columns p:empty {display: none;}
main .columns,
main .columns.cols-50-50 {grid-template-columns: 1fr 1fr;}
main .columns.cols-33-66 {grid-template-columns: 1fr 2fr;}
main .columns.cols-66-33 {grid-template-columns: 2fr 1fr;}
main .columns.cols-33-33-33 {grid-template-columns: 1fr 1fr 1fr;}

footer {border-top: 2px solid var(--color-01);padding-top: var(--space-below-01);display: flex;justify-content: space-between;}
footer * {margin-bottom: 0;}
footer ul {display: flex;gap: 4px;}
footer a {text-decoration: none;}
footer a:is(:hover, :focus) {text-decoration: underline;}

@media screen and (max-width: 781px) {

    #wrapper {margin: 0;}

    header {padding-bottom: var(--space-below-00);}
    header .extras {position: static;}
    header > p > a {font-size: var(--fontsize-xl);}
    header p {border-bottom: 2px solid var(--color-01);margin-bottom: var(--space-below-00);padding-bottom: var(--space-below-01);}

    #toggle-nav {cursor: pointer;position: relative;display: block;border: none;background: none;padding: 0 0 0 4px;}
    html[lang="de"] #toggle-nav::after {content: 'Menü';}
    html[lang="en"] #toggle-nav::after {content: 'Menu';}
    #toggle-nav::after {content: '';position: absolute;left: 50px;top: 5px;font-size: var(--fontsize-l);color: var(--color-01);}
    #toggle-nav span {background: var(--color-01);display: block;width: 36px;height: 4px;margin: 6px 0;transition: var(--animation-01);}
    header.menu-active #toggle-nav span {opacity: 0;transform-origin: 4px center;}
    header.menu-active #toggle-nav span:first-child {opacity: 1;transform: rotate(45deg);}
    header.menu-active #toggle-nav span:last-child {opacity: 1;transform: rotate(-45deg);}

    header #main-nav ul {position: static;margin-bottom: 0;width:100%;}
    header #main-nav ul li {overflow: hidden;height: 0;transition: var(--animation-01);}
    header.menu-active #main-nav ul li {height: 30px!important;}

    main {padding-left: 0;}
    main p:has(img) {float: none;margin: 0 0 var(--space-below-01) 0;}

    main .columns {display: block;}

    footer {display: block;}
    footer ul {display: block;padding-top: var(--space-below-01);}

}