@font-face {
    font-family: 'ubuntudemibold';
    src: url('font/ubuntu-demibold-webfont.woff2') format('woff2'),
         url('font/ubuntu-demibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntulight';
    src: url('font/ubuntu-light-webfont.woff2') format('woff2'),
         url('font/ubuntu-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntumedium';
    src: url('font/ubuntu-medium-webfont.woff2') format('woff2'),
         url('font/ubuntu-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntubook';
    src: url('font/ubuntu-regular-webfont.woff2') format('woff2'),
         url('font/ubuntu-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html{color:#000;background:#FFF;font-size: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}a:hover,a:active,a:focus {outline: 0;}#map_canvas img,.google-maps img {max-width: none;}button,input,select,textarea {margin: 0;font-size: 100%;vertical-align: middle;}button,input {*overflow: visible;line-height: normal;}button::-moz-focus-inner,input::-moz-focus-inner {padding: 0;border: 0;}button,html input[type="button"],input[type="reset"],input[type="submit"] {cursor: pointer;-webkit-appearance: button;}label,select,button,input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"] {cursor: pointer;}input[type="search"] {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;-webkit-appearance: textfield;}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;}textarea {overflow: auto;vertical-align: top;}.hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }audio, canvas,video {display: inline-block; *display: inline; *zoom: 1;}audio:not([controls]) { display: none; }.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix { *zoom: 1; }.clearfix:before,.clearfix:after { display: table; line-height: 0; content: ""; }.clearfix:after { clear: both; }

img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.hidden { display: none; visibility: hidden; }
.onlymobile { display: none; visibility: hidden; }

.group:before, .group:after { content: ""; display: table; }
.group:after { clear: both; }
.group { zoom: 1; }

/* main styles 
============================= */

html {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color: #d5d5d5;
}

body {
width: 100%;
height: 100%;
margin: 0 auto;
font-family: 'ubuntubook';
font-size: 16px;
line-height: 1.6em;
background-color: #f9db0e;
color: rgb(84,87,90);
height: auto !important;
min-height: 100%;
padding: 0 0 0 0;
ffea00}

#wrapper {
width: 100%;
height: 100%;
min-height: 100%;
margin: 0 auto;
padding: 0 0 0 0; 
height: auto !important;
max-width: 100%;
}

.wrapper-inner {
width: 100%;
max-width: 1024px;
height: 100%;
margin: auto;
padding: 0;
position: relative;
z-index: 0;
}

#pageheader { 
background: #fff; 
padding: 5px 30px 20px 30px;
border-top: 15px solid #333;
}


.bigimage {
border-top: 1px solid rgb(208,24,8,1.00);
border-bottom: 15px solid rgb(208,24,8,1.00);
}
.boxcontent { padding: 30px 30px 80px 30px; }

#headerlogo { text-align: right; padding: 30px 0 0 0; }
#headerlogo img { max-width: 350px; }

.bgGrey { background-color: rgb(230,230,230); }
.bgBlue {
    background-color: #c81423;
}

.textimage { max-width: 480px; margin: 20px 0 30px 0; }

.imagecontainer { max-width: 250px; margin: 20px 0 30px 0; }
.imagecontainer img { max-width: 150px; }

.imagecontainer.pull-left,
.textimage.pull-left { margin: 0 100px 10px 0; }
.imagecontainer.pull-right,
.textimage.pull-right { margin: 0 0 10px 50px; }

.pull-left { float: left; }
.pull-right { float: right; }

/* Typografie 
========================= */
h1 {
font-family: 'ubuntumedium';
font-size: 2.5em;
line-height: 1.4em;
color: rgb(84,87,90);
padding: 0 0 0 0;
margin: 0 0 10px 0;
}
h2, .h2 {
font-family: 'ubuntumedium';
font-size: 1.375em;
line-height: 1.4em;
color: rgb(84,87,90);
padding: 0 0 0 0;
margin: 20px 0 30px 0;
}
h3 {
font-family: 'ubuntumedium';
font-size: 1.375em;
line-height: 1.4em;
color: rgb(84,87,90);
padding: 0 0 0 0;
margin: 20px 0 5px 0;
}
p {
font-family: 'ubuntulight';
font-size: 1.125em;
line-height: 1.6em;
color: rgb(84,87,90);
margin-bottom: 16px;
}

a
{
    text-decoration: none;
    color: rgba(208,24,8,1.00);
}


.caption {
display: block;
font-family: 'ubuntubook';
font-size: 1.125em;
line-height: 1.2em;
color: rgb(84,87,90);
margin-top: 10px;
}

#footer p {
font-family: 'ubuntubook';
font-size: 1.0em;
line-height: 1.6em;
color: rgb(255,255,255);
text-align: center;
margin: 10px, 0px, 10px, 0px;
}

#footer a {
    text-decoration: none;
    color: #FFFFFF;
}

.typo-blue { color: rgb(208,24,8,1.00); }

/* Navigation 
========================= */
.topnav li {
display: inline-block;
*display: inline;
}
.topnav li a {
display: block;
padding: 3px 10px;
font-family: 'ubuntulight';
font-size: 1.0em;
line-height: 1.2em;
color: rgb(84,87,90);
text-decoration: none;
text-transform: none;
}
.topnav li.active a,
.topnav li a:hover { color: rgb(208,24,8,1.00); }

.btn-navbar {
display: none;
position: absolute;
top: 40px;
height: 20px;
color: rgb(84,87,90);
background-color: transparent;
border: 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
cursor: pointer;
}
.btn-navbar .icon-bar {
display: block;
width: 30px;
height: 4px;
background-color: rgb(84,87,90);
}
.btn-navbar .icon-bar + .icon-bar { margin-top: 5px; }

/* Listen 
========================= */
ul.liste {
list-style: none;
margin: 20px 0;
padding: 0 0 0 0;
position: relative;
left: 16px;
width: 90%;
}
ul.liste li {
display: block;
font-family: 'ubuntubook';
font-size: 1.125em;
line-height: 1.6em;
font-weight: 400;
color: rgb(84,87,90);
text-decoration: none;
margin-bottom: 5px;
padding: 0 0 0 0;
text-indent: -9px;
}
ul.liste li:before {
display: inline-block;
line-height: 20px;
font-size: 18px;
content: "•\a0\a0";
color: rgb(84,87,90);
}

ul.pfeilliste {
list-style: none;
margin: 20px 0;
padding: 0 0 0 0;
position: relative;
left: 25px;
width: 90%;
}
ul.pfeilliste li {
position: relative;
display: block;
font-family: 'ubuntubook';
font-size: 1.125em;
line-height: 28px;
font-weight: 400;
color: rgb(84,87,90);
text-decoration: none;
margin-bottom: 20px;
padding: 0 0 0 0;
}
ul.pfeilliste li:before {
position: absolute;
left: -25px;
display: block;
line-height: 28px;
font-size: 28px;
content: "»\a0\a0";
color: rgb(208,24,8,1.00);
}
ul.pfeilliste ul {
margin: 5px 0 20px 0;
}
ul.pfeilliste li li { 
left: 10px; 
margin-bottom: 5px;
}

ul.pfeilliste li li:before {
position: absolute;
left: -16px;
top: 5px;
display: block;
line-height: 20px;
font-size: 18px;
content: "•\a0\a0";
color: rgb(84,87,90);
}


/* 3 Spalten 
========================= */

.grid-3col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  align-items: start;
}

.imageblock {
  text-align: center;
}

.imageblock img {
  max-width: 100%;
  height: auto;
}

.textblock p {
  font-size: 1.125em;
  line-height: 1.6em;
  margin: 0;
}


/* 2 Spalten 
========================= */


.twocol-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.textblock {
  flex: 1 1 60%;
  min-width: 300px;
}

.imagecolumn {
  flex: 1 1 35%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.imageblock {
  max-width: 220px;
  width: 100%;
  margin: 0 auto;
}
.imageblock img {
  width: 100%;
  height: auto;
  display: block;
}

.titel {
  display: block;
  font-family: 'ubuntubook';
  font-size: 1.4em;
  line-height: 1.2em;
  color: rgb(84,87,90);
  margin-bottom: 20px;
  text-align: left;
}

.mb-abstand {
  margin-bottom: 60px;
}

.caption {
  display: block;
  font-family: 'ubuntubook';
  font-size: 1.1em;
  line-height: 1.2em;
  color: rgb(84,87,90);
  margin-top: 10px;
  text-align: center;
}



@media screen and (max-width: 200px) {
  .twocol-layout {
    flex-direction: column;
  }

  .textblock, .imagecolumn {
    width: 100%;
  }
}


/* Ende > 2 Spalten 
========================= */



/* Start > Video 2 Spalten 
========================= */

.videoblock {
  display: flex;
  flex-direction: column;
  gap: 50px;
}






/* Headline 1- Spalten TEST 
========================= */



.headline-section {
  width: 100%;
  background-color: rgb(230,230,230); /* oder eine passende Hintergrundfarbe */
  padding: 40px 20px;
  text-align: left;
}

.headline-inner {
  max-width: 1024px;
  margin: 0 auto;
}


/* Ende Headline 1- Spalten 
========================= */

@media screen and (max-width:680px) {
body { font-size: 14px; }
.btn-navbar { display: block; }
#mainnav { height: 0; overflow: visible; }
#headerlogo img {  max-width: 200px; }
#topnav { display: none; position: relative; top: 116px; left: -30px; width: 250px; background: #fff; padding: 15px; }
.topnav li { display: block; }
}

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

.textimage.pull-left,
.textimage.pull-right,
.imagecontainer.pull-left,
.imagecontainer.pull-right { float: none; clear: both; margin: 20px 0; }
}
