/* CSS Document */
:root {

  --color-text:#444;
  --color-link:#290;
  --color-hover:#6c1;
  --color-line:#666;
  --color-dark:#444;
  --color-normal:#888;
  --color-bright:#ccc;
  --color-light:#eee;
  --color-black:#000;
  --color-white:#fff;
  --color-green:#ad9;
  --shadow-small:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@font-face { font-family:'FiraSansBlack'; font-style: normal; font-weight: 400; src: local('FiraSansBlack'), url(../fonts/FiraSans-Black.ttf) format('truetype'), url(../fonts/FiraSans-Black.woff) format('woff'); }
@font-face { font-family:'FiraSansExtraBold'; font-style: normal; font-weight: 400; src: local('FiraSansExtraBold'), url(../fonts/FiraSans-ExtraBold.ttf) format('truetype'), url(../fonts/FiraSans-ExtraBold.woff) format('woff'); }
@font-face { font-family:'FiraSansBold'; font-style: normal; font-weight: 400; src: local('FiraSansBold'), url(../fonts/FiraSans-Bold.ttf) format('truetype'), url(../fonts/FiraSans-Bold.woff) format('woff'); }
@font-face { font-family:'FiraSansRegular'; font-style: normal; font-weight: 400; src: local('FiraSansRegular'), url(../fonts/FiraSans-Regular.ttf) format('truetype'), url(../fonts/FiraSans-Regular.woff) format('woff'); }
@font-face { font-family:'FiraSansThin'; font-style: normal; font-weight: 400; src: local('FiraSansThin'), url(../fonts/FiraSans-Thin.ttf) format('truetype'), url(../fonts/FiraSans-Thin.woff) format('woff'); }
@font-face { font-family:'FiraSansLight'; font-style: normal; font-weight: 400; src: local('FiraSansLight'), url(../fonts/FiraSans-Light.ttf) format('truetype'), url(../fonts/FiraSans-Light.woff) format('woff'); }
@font-face { font-family:'FiraSansExtraLight'; font-style: normal; font-weight: 400; src: local('FiraSansExtraLight'), url(../fonts/FiraSans-ExtraLight.ttf) format('truetype'), url(../fonts/FiraSans-ExtraLight.woff) format('woff'); }



* { margin:0; padding:0; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } /* Box Sizing */

html { height:100%; scroll-behavior:smooth; }
body { height:100%; font-family:"FiraSansLight"; color:#000; font-size:11px; animation:fadein 1.0s; -moz-animation:fadein 1.0s; -webkit-animation:fadein 1.0s; }

/* clearfix */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
/* Für IE 6/7 (löst hasLayout aus) */
.cf { zoom:1; }

/* ------------------------------
Allgemeine Definitionen
------------------------------ */

/* Tags mit dem Attribut onclick und data-url als Link anzeigen */
[onclick], [data-url] { cursor:pointer; }

/* Schrift-Layout */
/*
h1, h2, h3, h4, h5, h6 { margin:0; padding:.4em 0; }
h1 { font-size:1.6em; }
h2 { font-size:1.2em; }
h3 { font-size:1.1em; }
h4 { font-size:1em; }
h5 { font-size:.9em; }
h6 { font-size:.8em; }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { font-size:.8em; font-weight:normal; }
*/

/* color */
.o_c_white { color:#fff; }
.o_c_black { color:#000; }
.o_c_high { color:#ed0; }
.o_c_low { color:#a90; }
.o_c_light { color:#ccc; }
.o_c_grey { color:#999; }
.o_c_dark { color:#444; }
.o_c_attent { color:#f66; }
.o_c_green { color:#9f9; }

/* Hintergrundfarbe (color & background-color) */
.o_cb_white { color:#444; background-color:#fff;}
.o_cb_black { color:#fff; background-color:#000;}
.o_cb_high { color:#860; background-color:#ed0;}
.o_cb_dark { color:#fff; background-color:#999;}
.o_cb_light { color:#444; background-color:#eee;}
.o_cb_pale { color:#666; background-color:#f8f8f8;}
.o_cb_info { color:#444; background-color:#eee;}
.o_cb_attent { color:#fff; background-color:#f66;}
.o_cb_green { color:#060; background-color:#9f9;}


/* Hintergrundfarbe mit Hover-Effekt (color hover) */
.o_ch_blank { color:#000; }
.o_ch_blank:hover { background-color:#eee;}
.o_ch_white { background-color:#fff;}
.o_ch_white:hover { background-color:#eee;}
.o_ch_black { color:#fff; background-color:#000;}
.o_ch_black:hover { background-color:#444;}
.o_ch_high { background-color:#ed0;}
.o_ch_high:hover { background-color:#fe2;}
.o_ch_dark { color:#fff; background-color:#999;}
.o_ch_dark:hover { background-color:#ccc;}
.o_ch_attent { background-color:#f66;}
.o_ch_attent:hover { background-color:#f99;}
.o_ch_green { background-color:#9f9;}
.o_ch_green:hover { background-color:#cfc;}


/* text-align */
.o_tal { text-align:left; }
.o_tar { text-align:right; }
.o_tac { text-align:center; }
.o_taj { text-align:justify; }

/* vertical-align */
.o_vat { vertical-align:top; }
.o_vam { vertical-align:middle; }
.o_vab { vertical-align:bottom; }

/* float */
.o_fr { float:right; }
.o_fl { float:left; }
.o_cb { clear:both; }
.o_cl { clear:left; }
.o_cr { clear:right; }

/* font-size */
.o_fss { font-size:.8em; line-height:1.2em; }
.o_fsm { font-size:.9em; line-height:1.2em; }
.o_fsl { font-size:1.2em; }
.o_fsxl { font-size:1.4em; }
.o_fsxxl { font-size:2.4em; }

.o_fwb { font-weight:bold; }

/* display */
.o_db { display:block; }
.o_di { display:inline; }
.o_dib { display:inline-block; }
.o_dn { display:none!important; }

/* overflow */
.o_ofa { overflow:auto; }
.o_ofh { overflow:hidden; }
.o_ofs { overflow:scroll; }

/* width */
.o_w0 { width:0%; }
.o_w5 { width:5%; }
.o_w10 { width:10%; }
.o_w15 { width:15%; }
.o_w20 { width:20%; }
.o_w25 { width:25%; }
.o_w30 { width:30%; }
.o_w35 { width:35%; }
.o_w40 { width:40%; }
.o_w45 { width:45%; }
.o_w50 { width:50%; }
.o_w55 { width:55%; }
.o_w60 { width:60%; }
.o_w65 { width:65%; }
.o_w70 { width:70%; }
.o_w75 { width:75%; }
.o_w80 { width:80%; }
.o_w85 { width:85%; }
.o_w90 { width:90%; }
.o_w95 { width:95%; }
.o_w100 { width:100%; }


/* Absatz */
p { padding:.4em 0; }

/* Links */
a.o_href { padding:0 .4em; cursor:pointer; color:#f93; text-decoration:none; transition:all .5s ease-in-out; }
a.o_href:hover { color:#fff; background-color:#f93; }
a.o_link { padding:.2em; cursor:pointer; color:#fff; text-decoration:none; background-color:#f93; transition:all .5s ease-in-out; }
a.o_link:hover { color:#000; }

/* Rahmen */
.o_border { border:1px solid #ccc; }
.o_radius { border-radius:.4em; }

/* Image */
img.o_img { display:block; width:100%; height:auto; }
figure.o_img { position:relative; display:block; width:100%; height:auto; }
figure.o_img img { display:block; width:100%; height:auto; }
figure.o_img div { position:absolute; display:block; padding:.4em 1em; left:0; bottom:0; width:100%; height:auto; color:#000; background-color:rgba(255, 255, 255, .7); }


/* Flex */
/*
Flex 12-Column
definiert für die folgenden Viewports die Spaltenbreiten
a: kleiner 480px
b: min-width:480px
c: min-width:620px
d: min-width:960px
<div class="flx_row_start">
	<div class="a12 b3 c4 d2"><div class="flx_body">Lorem ipsum dolor sit amet</div></div>
	<div class="a12 b3 c4 d4"><div class="flx_body">Lorem ipsum dolor sit amet</div></div>
	<div class="a12 b6 c4 d6"><div class="flx_body">Lorem ipsum dolor sit amet</div></div>
</div>
*/
/* [class^="flx_row"] { display:flex; margin-bottom:1.6em; flex-flow:row wrap; gap:1.6em 2%; justify-content:flex-start; } */
[class^="flx_row"] { display:flex; flex-flow:row wrap; }
.flx_row.jc_start { justify-content:flex-start; }
.flx_row.jc_end { justify-content:flex-end; }
.flx_row.jc_center { justify-content:center; }

.flx_row.ai_start { align-items:start; }
.flx_row.ai_end { align-items:end; }
.flx_row.ai_center { align-items:center; }
.flx_row.ai_stretch { align-items:stretch; }


[class^="flx_row"] [class^="a"],
[class^="flx_row"] [class^="b"],
[class^="flx_row"] [class^="c"],
[class^="flx_row"] [class^="d"] { flex:1 1 auto; }

/* 
Berechnung flx_row col
1 = 100 % / (12/1) = 8.333333
2 = 100 % / (12/2) = 16.666666
3 = 7.4166 * 3 + 2 = 24.25
4 = 7.4166 * 4 + 3 = 32.6664
5 = 7.4166 * 5 + 4 = 41.083
6 = 7.4166 * 6 + 5 = 49.5
7 = 7.4166 * 7 + 6 = 57.9162
8 = 7.4166 * 8 + 7 = 66.3328
9 = 7.4166 * 9 + 8 = 74.7494
10 = 7.4166 * 10 + 9 = 83.166
11 = 7.4166 * 11 + 10 = 91.5826
12 = 7.4166 * 12 + 11 = 100
*/

[class^="flx_row"] .a1 { flex-basis:8.333333%; max-width:8.333333%; }
[class^="flx_row"] .a2 { flex-basis:16.666666%; max-width:16.666666%; }
[class^="flx_row"] .a3 { flex-basis:25%; max-width:25%; }
[class^="flx_row"] .a4 { flex-basis:33.333333%; max-width:33.333333%; }
[class^="flx_row"] .a5 { flex-basis:41.666666%; max-width:41.666666%; }
[class^="flx_row"] .a6 { flex-basis:50%; max-width:50%; }
[class^="flx_row"] .a7 { flex-basis:58.333333%; max-width:58.333333%; }
[class^="flx_row"] .a8 { flex-basis:66.666666%; max-width:66.666666%; }
[class^="flx_row"] .a9 { flex-basis:75%; max-width:75%; }
[class^="flx_row"] .a10 { flex-basis:83.333333%; max-width:83.333333%; }
[class^="flx_row"] .a11 { flex-basis:91.666666%; max-width:91.666666%; }
[class^="flx_row"] .a12 { flex-basis:100%; max-width:100%; }

/*
Flex Container Auto
die Spalten werden je nach Inhalt fexible breit sein
das Flex Element kann mit flx_width kombiniert werden
<div class="flx_auto">
	<div><div class="flx_body">Lorem ipsum dolor sit amet</div></div>
	<div><div class="flx_body">At vero eos et accusam et justo duo dolores et ea rebum.</div></div>
...
</div>
oder
<div class="flx_auto">
	<div class="flx_width_300"><div class="flx_body">Lorem ipsum dolor sit amet</div></div>
	<div class="flx_width_200"><div class="flx_body">At vero eos et accusam et justo duo dolores et ea rebum.</div></div>
</div>
*/
[class^="flx_auto"] { display:flex; flex-wrap:wrap; gap:10px 10px; justify-content:space-between; background-color:#9ff; }
[class^="flx_auto"] > div { flex:1 1 auto; align-content:flex-start; }


/*
Flex Container Optimal
es können gleich breite Spalten mit 20%, 25%, 33.333%, 50% und 100% Breite verwendet werden
entsprechend dem Viewport wird der Umbruch optimal durchgeführt
<div class="flx_optimal2">
	<div><div class="flx_body">Lorem ipsum dolor sit amet</div></div>
	<div><div class="flx_body">Feld 2</div></div>
</div>
*/
[class^="flx_optimal"] { display:flex; flex-flow:row wrap; gap:10px 10px; background-color:#f99; }
[class^="flx_optimal"] > div { flex-basis:100%; max-width:100%; }


/* Flex Basis-Breiten */
[class^="flx_width"] {  }
.flx_width_100 { flex-basis:100px; max-width:100px; }
.flx_width_150 { flex-basis:150px; max-width:150px;}
.flx_width_200 { flex-basis:200px; max-width:200px; }
.flx_width_250 { flex-basis:250px; max-width:250px; }
.flx_width_300 { flex-basis:300px; max-width:300px; }
.flx_width_350 { flex-basis:350px; max-width:350px; }
.flx_width_400 { flex-basis:400px; max-width:400px; }
.flx_width_max { flex-basis:100%; max-width:100%; }



/* Standard Body in Flex Element */
.flx_body { padding:1em; }






/* Header */
.o_header { position:relative; width:100%; padding:0; z-index:100; border-bottom:1px solid #ccc; background:var(--color-white); transition:all .3s ease-in-out; }
.o_header .o_logo { display:block; float:none; padding:.4rem 2rem; width:100%; }
.o_header .o_logo img { display:block; margin:0 auto; width:100%; max-width:10rem; height:auto; }
.o_header .o_info { display:block; float:none; padding:0; width:100%; height:2.2rem; padding:1rem 1rem 2rem 1rem; text-align:center; }
.o_header .o_nav { display:block; float:none; padding:0; width:100%; }

hr.o_top { height:0; border:0; }


/* Footer */
.o_footer { display:block; padding:0; width:100%; height:auto; color:#fff; background-color:#444; border-top:1em solid var(--color-dark); }
.o_footer h3.o_block_header { color:#fff; }
.o_footer .o_icon { display:inline-block; margin-right:.8em; width:3em; height:3em; -webkit-border-radius:50%; -moz-border-radius:50%; -khtml-border-radius:50%; border-radius:50%; transition:all .3s ease-in-out; }
.o_footer .o_icon:hover { background-color:#666; }
.o_footer .o_icon:hover img { opacity:1; }
.o_footer .o_icon img { display:block; width:100%; height:auto; opacity:.6; }
.o_footer .o_valuation { display:inline-block; margin-right:.4em; width:5em; }
.o_footer .o_valuation img { display:block; width:100%; height:auto; }
.o_footer .o_valuation div { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:10000; background-color:rgba(0, 0, 0, .6); -webkit-animation-name:fadeIn; -webkit-animation-duration:0.4s; animation-name:fadeIn; animation-duration:0.4s; }


/* Framework */
[class*="o_framework"] { position:relative; display:block; }
.o_framework { margin:0; padding:0 0 3em 0; width:100%; min-height:90%; }


/* Seitenbereiche */
.o_section1 { display:block; width:100%; padding:1em 0; }
.o_section1 .o_article { display:block; width:100%; min-height:100%; padding:1em; line-height:1.4em; }
.o_section2 { display:block; width:100%; }
.o_section2 .o_article { display:block; width:100%; min-height:100%; padding:2em 0; line-height:1.4em; }

.o_section3 { display:block; position:relative; width:100%; }
.o_section3 img.o_back { position:absolute; width:100%; height:200px; top:25%; z-index:-1; }
.o_section3 .o_article { display:block; width:100%; min-height:100%; line-height:1.4em; }
.o_section3 .o_linklist { display:block; padding:2em 4em; text-decoration:none; }
.o_section3 .o_linklist a { display:block; padding:1em; color:#666; text-decoration:none; transition:all 1s ease-in-out; }
.o_section3 .o_linklist a:hover { display:block; padding:1em; color:#fff; text-decoration:none; background-color:#f93; }

/* Sprechzeit */
.o_section4 { position:relative; display:block; width:100%; padding:2em 0; }
.o_section4 .o_info_top { display:inline-block; position:absolute; margin-left:-10em; padding:1em; top:-2em; left:50%; width:24em; z-index:1; color:#fff; font-size:.85em; background-color:#000;}




/* Seitenüberschrift */
h1.o_site_header { position:relative; display:block; width:100%; margin-bottom:.8em; padding-left:.6em; color:#000; line-height:1.3em; text-transform:uppercase; font-size:1.6em; }
h1.o_site_header span { display:block; line-height:1.2em; text-transform:none; font-size:.7em; font-weight:normal; }
h1.o_site_header em { position:absolute; display:inline-block; left:0; bottom:.3em; width:.4em; height:.6em; background-color:#f93; }

/* Bereichsüberschrift */
h2.o_section_header { position:relative; display:block; width:100%; margin-bottom:.8em; color:#000; line-height:1.3em; text-transform:uppercase; font-size:1.2em; }

/* Blocküberschrift */
h3.o_block_header { position:relative; display:block; width:100%; margin-bottom:.8em; color:#000; line-height:1.3em; text-transform:uppercase; font-size:1em; }
h3.o_block_header i { margin-right:.8em; color:#f93; font-weight:normal; }



/* Trennbereiche */
hr[class*="o_hr"] { height:1px; border:0; }
.o_hr_xs { margin:.4em 0; }
.o_hr_s { margin:.8em 0; }
.o_hr_m { margin:2em 0; }
.o_hr_l { margin:4em 0; }
.o_hr_xl { margin:8em 0; }

hr[class*="o_line"] { height:0; border:0; border-bottom:1px solid #ccc; }
.o_line_xs { margin:.4em 0; }
.o_line_s { margin:.8em 0; }
.o_line_m { margin:2em 0; }
.o_line_l { margin:4em 0; }


/* Top-Bilder */
.o_img_top { position:relative; display:block; margin-bottom:2em; width:100%; height:auto; }
.o_img_top img { display:block; width:100%; height:auto; }
.o_img_top .o_info_top { display:inline-block; position:absolute; margin-left:-14em; padding:1em; top:2em; left:50%; width:28em; z-index:1; color:#fff; text-align:center; background-color:rgba(0, 0, 0, .7); animation:fadeInfo 3s; }

@keyframes fadeInfo { 0% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: 1; } }



/* Preview */
.o_img_preview { position:relative; }
.o_img_preview img { display:block; width:100%; height:auto; }
.o_img_preview .o_cover { position:absolute; display:flex; left:0; top:0; width:100%; height:100%; z-index:1; text-decoration:none; text-align:center; justify-content:center; align-items:center; color:#fff; background-color:#f93; opacity:0; transition:opacity 1s ease; }
.o_img_preview .o_cover:hover { opacity:0.8; }
.o_img_preview .o_cover .o_label { display:block; padding:.4em; color:#fff; font-size:1.4em;  }
.o_img_preview .o_cover .o_plus { position:relative; display:inline-block; width:2px; height:40px; background:#fff; }
.o_img_preview .o_cover .o_plus:after { position:absolute; top:20px; width:40px; height:2px; left:-20px; content:""; background:#fff; }



.o_preview { position:relative; padding:1em; color:#444; text-decoration:none; transition:all .5s ease-in-out; }
.o_preview:hover { background-color:#eee; }
.o_preview img { display:block; margin-bottom:1em; width:100%; height:auto; }
.o_preview h3 { text-align:center; }
.o_preview .o_text { font-size:.9em; }



/* Service A-Z */
.o_az .flx_body strong { font-size:1.4em; color:#f93; }

/* Formular */
.o_button { display:inline-block; padding:.4em; cursor:pointer; line-height:1em; color:#fff; font-size:1em; text-decoration:none; text-align:center; border:1px solid #ccc; border-radius:.4em; background-color:#444; transition:0.5s; box-shadow:none; }
.o_button:hover { background-color:#666; }
.o_input { display:inline-block; width:70%; padding:.4em; color:#000; outline:none; border:1px solid #ccc; background-color:#fff; -moz-appearance:none; -webkit-appearance:none; appearance:none; /* Schatten in einigen Browsern */ }


/* List */
/* nummerierte Aufzählung */
ol[class*="o_list"] { padding:.4em 2em; }
ol[class*="o_list"] li { padding:.2em 0; }
/* unsortierte Aufzählung */
ul[class*="o_list"] { padding:.4em 2em; }
ul[class*="o_list"] li { padding:.2em 0; }
/* Aufzählungszeichen */
ul.o_listblank { list-style:none; }
ul.o_listdisc { list-style:disc; }
ul.o_listcircle { list-style:circle; }
ul.o_listsquare { list-style:square; }
ul.o_listcheck { list-style-image:url(../img/list-check.png); }
ul.o_listnet { list-style-image:url(../img/list-net.png); }


/* verdeckte Bereiche öffnen/schließen */
/*
<div class="o_toggle_more">
	<label class="o_label" for="ppMoreMenu">mehr lesen</label>
	<input type="checkbox" id="ppMoreMenu" class="o_switch">
	<div class="o_body">
		<p>Das ist mehr Text.</p>
	</div>
</div>
*/
.o_toggle_more { display:block; }
.o_toggle_more input.o_switch { display:none; }
.o_toggle_more .o_label { display:block; padding:.4em .1em; cursor:pointer; color:#000; }
.o_toggle_more input.o_switch[type=checkbox]:not(checked) ~ .o_body { display:none; }
.o_toggle_more input.o_switch[type=checkbox]:checked ~ .o_body { display:block; }



/* Video */
figure.o_video { display:block; position:relative; width:100%; height:auto; }
figure.o_video img.o_play { position:absolute; width:125px!important; height:auto; top:50%; left:50%; margin-top:-62px!important; margin-left:-62px!important; }
figure.o_video video { display:block; width:100%; height:auto; }
figure.o_video .o_timeline { display:block; left:0; bottom:0; width:100%; }
figure.o_video .o_timeline em { display:block; width:100%; height:8px; overflow:hidden; cursor:pointer; background-color:#444; }
figure.o_video .o_timeline em span { display:block; width:0px; height:100%; background-color:#dc0; transition:all 1s ease; }
figure.o_video .o_timeline .o_start { float:left; padding:.2em .4em .2em 0; cursor:pointer; }
figure.o_video .o_timeline .o_resize_full { float:left; padding:.2em 1em .2em 0; cursor:pointer; }
figure.o_video .o_timeline .o_current { float:left; padding:.2em 1em .2em 0; }
figure.o_video .o_timeline .o_duration { float:right; padding:.2em .2em .2em 1em; }

video.o_video { display:block; width:100%; height:auto; }
.o_frame_cover { position:fixed; display:flex; top:0; left:0; width:100%; height:100%; z-index:9999; align-items:center; justify-content:center; background-color:rgba(170, 68, 85, .6); }
.o_frame { width:80%; max-width:50em; height:auto; z-index:9999; background-color:var(--color-reoss); }

.o_frame_16_9, .o_frame_4_3 { display:block; position:relative; height:0; width:100%; overflow:hidden; }
.o_frame_16_9 { padding-bottom:56.25%; }
.o_frame_4_3 { padding-bottom:75%; }
.o_frame_16_9 div, .o_frame_4_3 div { position:absolute; top:0; left:0; width:100%; height:100%; border:0; background-color:#4ae; }




/* Bewegung beim Scrollen */
/* einblenden */
.o_scroll_fade { opacity:0; transition:all 1s ease-in-out; }
.o_scroll_fade_visible { opacity:1; }
/* von unten nach oben */
.o_scroll_yb { opacity:0; transform:translateY(200px); transition:all 1s ease-in-out; }
.o_scroll_yb_visible { opacity:1; transform:translateY(0); }
/* von links nach rechts */
.o_scroll_xl { opacity:0; transform:translateX(-300px); transition:all 1s ease-in-out; }
.o_scroll_xl_visible { opacity:1; transform:translateX(0); }
/* von rechts nach links */
.o_scroll_xr { opacity:0; transform:translateX(300px); transition:all 1s ease-in-out; }
.o_scroll_xr_visible { opacity:1; transform:translateX(0); }
/* Hintergrund rot/transparent */
.o_scroll_back { color:#fff; background-color:#369; transition:all .5s ease-in-out; }
.o_scroll_back_visible { color:inherit; background:none; }
/* unschärfe */
.o_scroll_blur { filter:gray blur(10px); -webkit-filter:grayscale(1) blur(10px); transform:scale(1.2); transition:all 1s ease-in-out; transition-delay:0.5s; }
.o_scroll_blur_visible { filter:none blur(0); -webkit-filter:grayscale(0) blur(0); transform:scale(1); }
/* sw / Farbe */
.o_scroll_gray { filter:gray; -webkit-filter:grayscale(1); transition:all 2s ease-in-out!important; transition-delay:1.5s!important; }
.o_scroll_gray_visible { filter:none; -webkit-filter:grayscale(0); }






/* ------------------------------
Anzeige in verschiedenen Media Queries
------------------------------ */
[class*="o_mq_show"] { display:none!important; }



@media screen and (min-width:480px) {

  body { font-size:12px; }

  /* Flex Container Optimal */
  .flx_optimal2 > div { flex-basis:calc(50% - 5px); max-width:50%; }
  .flx_optimal3 > div { flex-basis:calc(50% - 5px); max-width:50%; }
  
  /* Flex 12-Column */
  [class^="flx_row"] .b1 { flex-basis:8.333333%; max-width:8.333333%; }
  [class^="flx_row"] .b2 { flex-basis:16.666666%; max-width:16.666666%; }
  [class^="flx_row"] .b3 { flex-basis:25%; max-width:25%; }
  [class^="flx_row"] .b4 { flex-basis:33.333333%; max-width:33.333333%; }
  [class^="flx_row"] .b5 { flex-basis:41.666666%; max-width:41.666666%; }
  [class^="flx_row"] .b6 { flex-basis:50%; max-width:50%; }
  [class^="flx_row"] .b7 { flex-basis:58.333333%; max-width:58.333333%; }
  [class^="flx_row"] .b8 { flex-basis:66.666666%; max-width:66.666666%; }
  [class^="flx_row"] .b9 { flex-basis:75%; max-width:75%; }
  [class^="flx_row"] .b10 { flex-basis:83.333333%; max-width:83.333333%; }
  [class^="flx_row"] .b11 { flex-basis:91.666666%; max-width:91.666666%; }
  [class^="flx_row"] .b12 { flex-basis:100%; max-width:100%; }
    
  /* ------------------------------
  Anzeige in verschiedenen Media Queries
  ------------------------------ */
  .o_mq_show1 { display:inherit!important; }
  
  
  
  }
  
  
  
  
@media screen and (min-width:720px) {
  
  /* ------------------------------
  Seitenbereiche
  ------------------------------ */
  .o_header { position:fixed; }
  
  /* Flex Container Optimal */
  .flx_optimal5 > div { flex-basis:calc(33.333333333% - 6.8px); max-width:33.333333%; }
  
  /* Flex 12-Column */
  [class^="flx_row"] .c1 { flex-basis:8.333333%; max-width:8.333333%; }
  [class^="flx_row"] .c2 { flex-basis:16.666666%; max-width:16.666666%; }
  [class^="flx_row"] .c3 { flex-basis:25%; max-width:25%; }
  [class^="flx_row"] .c4 { flex-basis:33.333333%; max-width:33.333333%; }
  [class^="flx_row"] .c5 { flex-basis:41.666666%; max-width:41.666666%; }
  [class^="flx_row"] .c6 { flex-basis:50%; max-width:50%; }
  [class^="flx_row"] .c7 { flex-basis:58.333333%; max-width:58.333333%; }
  [class^="flx_row"] .c8 { flex-basis:66.666666%; max-width:66.666666%; }
  [class^="flx_row"] .c9 { flex-basis:75%; max-width:75%; }
  [class^="flx_row"] .c10 { flex-basis:83.333333%; max-width:83.333333%; }
  [class^="flx_row"] .c11 { flex-basis:91.666666%; max-width:91.666666%; }
  [class^="flx_row"] .c12 { flex-basis:100%; max-width:100%; }
  
  .o_header { position:fixed;  }
  .o_header .o_logo { float:left; width:28%; }
  .o_header .o_logo img { display:block; width:100%; height:auto; }
  .o_header .o_info { float:right; width:72%; height:4.2rem; padding:2rem 1rem 1rem 1rem; }
  .o_header .o_nav { float:right; width:72%; }

  hr.o_top { height:8.75rem; }




  
  /* ------------------------------
  Anzeige in verschiedenen Media Queries
  ------------------------------ */
  .o_mq_show2 { display:inline!important; }
  
  }
  
  
  
  @media screen and (min-width:800px) {
  
    body { font-size:14px; }
  
    /* Flex Container Optimal */
    .flx_optimal3 > div { flex-basis:calc(33.333333333% - 6.8px); max-width:33.333333%; }
    .flx_optimal4 > div { flex-basis:calc(25% - 7.5px); max-width:25%; }
    .flx_optimal5 > div { flex-basis:calc(20% - 8px); max-width:20%; }
  
  
        
  /* ------------------------------
  Anzeige in verschiedenen Media Queries
  ------------------------------ */
  .o_mq_show3 { display:inherit!important; }
  
  
  }
  
  
  
  @media screen and (min-width:960px) {
    
    body { font-size:15px; }

  /* ------------------------------
  Anzeige in verschiedenen Media Queries
  ------------------------------ */
  .o_mq_show4 { display:inherit!important; }
  
  
  /* Flex Container Auto */
  .flx_col4_auto { flex-basis:calc(33.333333% - 7px); max-width:calc(33.333333% - 6px); }
  
  /* Flex 12-Column */
  [class^="flx_row"] .d1 { flex-basis:8.333333%; max-width:8.333333%; }
  [class^="flx_row"] .d2 { flex-basis:16.666666%; max-width:16.666666%; }
  [class^="flx_row"] .d3 { flex-basis:25%; max-width:25%; }
  [class^="flx_row"] .d4 { flex-basis:33.333333%; max-width:33.333333%; }
  [class^="flx_row"] .d5 { flex-basis:41.666666%; max-width:41.666666%; }
  [class^="flx_row"] .d6 { flex-basis:50%; max-width:50%; }
  [class^="flx_row"] .d7 { flex-basis:58.333333%; max-width:58.333333%; }
  [class^="flx_row"] .d8 { flex-basis:66.666666%; max-width:66.666666%; }
  [class^="flx_row"] .d9 { flex-basis:75%; max-width:75%; }
  [class^="flx_row"] .d10 { flex-basis:83.333333%; max-width:83.333333%; }
  [class^="flx_row"] .d11 { flex-basis:91.666666%; max-width:91.666666%; }
  [class^="flx_row"] .d12 { flex-basis:100%; max-width:100%; }
  

  .o_section1 .o_article { margin:0 auto; max-width:960px; }
  .o_section2 .o_article { margin:0 auto; max-width:1920px; }
  .o_section3 .o_article { margin:0 auto; max-width:960px; }

  
  }
  
  
  
  @media screen and (min-width:1150px) {
  
  /* ------------------------------
  Anzeige in verschiedenen Media Queries
  ------------------------------ */
  .o_mq_show5 { display:inherit!important; }
  
  }
  
  
  
  @media screen and (min-width:1500px) {
  
  body { font-size:16px; }
  
  /* Flex Container Auto */
  .flx_col4_auto { flex-basis:calc(25% - 8px); max-width:25%; }
  
  
  /* ------------------------------
  Anzeige in verschiedenen Media Queries
  ------------------------------ */
  .o_mq_show6 { display:inherit!important; }
  
  
  }