/* ä */

/* Anpassung der mitgelieferten Styles von externen Plugins */
/* jquery-ui.css: */
.ui-accordion .ui-accordion-header { padding: .75em .75em .75em 2.2em; text-transform: uppercase; border: none; border-bottom: .05rem solid #196AB1; color: #196AB1; }

ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br, .ui-corner-left, .ui-corner-bl, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-left, .ui-corner-tl { border-radius: 0; }

.ui-helper-reset { line-height: inherit; font-size: inherit; }

.ui-widget { font-family: inherit; font-size: inherit; }

.ui-widget-content { background: inherit; color: inherit; border: none; }
.ui-widget-content a { color: inherit; }

html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active { color: #FFF; }

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border-bottom: thin solid #196AB1;
	color: inherit;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button { color: #196AB1; }

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: thin dotted #CCC;
	background: transparent;
	color: #2B2B2B;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2B2B2B;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: inherit;
	color: inherit;
}

.ui-icon { width: auto; height: auto; margin-right: 0.5em; margin-left: -2.2em; text-indent: 0; }

.ui-icon,
.ui-widget-content .ui-icon { background-image: none; }

.ui-icon-triangle-1-n::before { font-family: "FontAwesome"; content: "\f106"; padding: .25em .5em; background-color: #196AB1; color: #FFF; }
.ui-icon-triangle-1-s::before { font-family: "FontAwesome"; content: "\f107"; padding: .25em .5em; background-color: #196AB1; color: #FFF; }

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon { background-image: none; }

.ui-state-active .ui-icon,
.ui-button:active .ui-icon { background-image: none; }


/* Flexslider Standard-Einstellungen überschreiben */
.flexslider { margin: 0; border-width: 0; border-radius: 0; }
.flex-control-nav { display: none; }
.flex-direction-nav a { text-shadow: none; width: auto; height: auto; padding: .25em; }
.flex-direction-nav a:before { font-family: "FontAwesome"; content: '\f100'; font-size: 3rem; font-weight: 900; color: #196AB1; text-shadow: 0 0 .25px #FFF; }
.flex-direction-nav a.flex-next:before { content: '\f101'; }
.flexslider:hover .flex-direction-nav .flex-prev,
.flexslider:hover .flex-direction-nav .flex-next { opacity: 1; }
.slides > li { position: relative; }
.flex-caption { position: absolute; color: #FFFFFF; top: 20%; right: 9%; z-index:10; }
.flexslider:hover .flex-direction-nav .flex-prev { left: 2em; }
.flexslider:hover .flex-direction-nav .flex-next { right: 2em; }

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 0; }
  .flex-direction-nav .flex-next { opacity: 0; }
}


/* FontAwesome-Fonts sollen die Farbe übernehmen */
.fa { color: inherit; }


/* Slick Carousel */
.carousel { padding: 0 1rem; }
.slick-arrow-container { padding: 0 1.5rem; text-align: center; }
.slick-arrow { margin: 1rem .5rem; padding: .5rem 1.25rem; font-size: 2rem; color: #FFF; background-color: #196AB1; border: thin solid #FFF; z-index: 1020; cursor: pointer; }
.slick-arrow i { font-weight: 900; }
.slick-dots-container { padding: 0 1.5rem; text-align: center; }
.slick-dots { padding: 0; margin: 0!important; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 1rem; height: 1rem; margin: 0 .5rem; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }
.slick-dots li.slick-active button::before { opacity: .75; color: #000; }
.slick-dots li button::before { font-size: medium; position: absolute; top: 0; left: 0; content: '•'; text-align: center; opacity: .25; color: #000; } /* ● */


/* DataTable */
table.dataTable thead .sorting { background-image: none !important; }
table.dataTable thead .sorting_asc { background-image: none !important; }
table.dataTable thead .sorting_desc { background-image: none !important; }
table.dataTable thead .sorting_asc_disabled { background-image: none !important; }
table.dataTable thead .sorting_desc_disabled { background-image: none !important; }



/* Ab hier STOCKO-eigene Styles */

* { box-sizing: border-box; outline: none; }
a { color: inherit; text-decoration: none; border: none; }
a.text { text-decoration: underline; }
a[href^="tel:"] { text-decoration: none; }
a[href^="mailto:"] { text-decoration: underline; }
p { margin-top: 0; }
p:last-child { margin-bottom: 0; }
img { border: 0; vertical-align: bottom; }
figure { margin: 0; }

input, textarea, select, option { font-family: inherit; color: inherit; font-size: inherit; width: 100%; background-color: #DDD; border: thin solid #666;}
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label::before { float: left; width: 1.15rem; height: 1.15rem; margin-left: -2.5rem; padding: .15rem .15rem .15rem .15rem; font-size: 1.5rem; line-height: 80%; border: thin solid #636363; content: ""; background-color: #DDD; }
input[type="checkbox"]:checked + label::before { content: "✓"; }
input[type="submit"] { width: auto; padding: .5rem 1.5rem; }
input[name="lf"], label[for="lf"], input[name="BewLf"], label[for="BewLf"], input[name="MesseLf"], label[for="MesseLf"] { display: none !important; }
label { white-space: pre-line; }

.form-error   { display: block; margin-bottom: 2rem; padding: 1rem; font-weight: bold; text-align: left; background-color: #FF6E6E; border: thin solid #666; }
.form-success { display: block; margin-bottom: 2rem; padding: 1rem; font-weight: bold; text-align: center; background-color: #A6FFAA; border: thin solid #666; }

.download-button { display: inline-block; padding: .6rem; color: #FFF; text-transform: uppercase; background-color: #196AB1; cursor: pointer; }
.download-button.mit-rand { margin-right: 1rem; }
.download-button .fa { font-weight: normal; vertical-align: baseline; color: #FFF!important; }

.acc-block { position: relative; margin-bottom: 1rem; overflow: hidden; }
.acc-schalter { margin-top: 1rem; text-align: center; cursor: pointer; }
.acc-schalter-mehr { display: block; }
.acc-schalter-weniger { display: none; }
.acc-schalter .fa { font-size: inherit; }


html, body { height: 100%; margin: 0; padding: 0; color: #333; background-color: #FFF; }
html { font-size: 16px; }
body { margin: 0 auto; padding-top: 210px; font-size: 1.25rem; }


/* Animationen */

/* Texte auf Slidern elastisch reinfallen lassen */
.anim { animation-duration: 1.5s; animation-fill-mode: both; }

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

  0%   { opacity: 0; transform: translate3d(0, -3000px, 0); }
  60%  { opacity: 1; transform: translate3d(0, 25px, 0); }
  75%  { transform: translate3d(0, -10px, 0); }
  90%  { transform: translate3d(0, 5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.bounceInDown { animation-name: bounceInDown; }
.durchsichtig { opacity: 0; }


/* Elemente schnell ausblenden und langsam einblenden */
@keyframes zoomOutIn {
  0    { opacity: 1; transform: scale(1); }
	1%   { opacity: 0; transform: scale(.1); }
  100% { opacity: 1; transform: scale(1); }
}
.image-container .zoom-elem { transform: scale(1); }
.image-container:hover .zoom-elem { animation: zoomOutIn .5s; animation-delay: .5s; }


/* Animation für Referenzen auf Startseite */
@keyframes zoomBigToNormal {
  0    { opacity: 0; transform: scale(1.2); z-index: 0; }
  3%   { opacity: 1; transform: scale(1); z-index: 1; }
  50%  { opacity: 1; transform: scale(1); z-index: 1; }
  53%  { opacity: 0; transform: scale(1.2); z-index: 0; }
  100% { opacity: 0; transform: scale(1.2); z-index: 0; }
}
.zoomBigToNormal { animation: zoomBigToNormal 12s linear 1s infinite normal; animation-fill-mode: both; }

#ref-anim { position: relative; padding: 5em 0; overflow: hidden; }
#ref-anim .keep-ratio { position: relative; width: 100%; padding-top: 37.5%; }
#ref-anim .ref-image-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
#ref-anim .flex-container { height: calc(100% / 4); padding: 0;  justify-content: center; align-items: stretch; }
#ref-anim .flex-item { width: 20%; height: 100%; padding: 1rem 0; background-color: #FFF; }
#ref-anim .flex-item .zelle { margin: .5rem 2rem; padding: 0; height: 100%; max-width: 300px; max-height: 100px; background-size: contain; background-repeat: no-repeat; background-position: center; }
#ref-anim .ref-anzeigen { opacity: 1 !important; transform: scale(1) !important; }
#ref-anim .ref-ausblenden { opacity: 0 !important; transform: scale(1) !important; }



/* */
@keyframes fadeBgColor {
  from { background-color: inherit; }
  to   { background-color: #DDD; }
}
.fadeBgColor:hover { animation: fadeBgColor .5s forwards; }


/* Seiteninhalte */
.arbeitsbereich { position: relative; margin: 0 auto; /* max-width: 1920px; */ }
/*
.arbeitsbereich a[name] { text-decoration: none; }
.arbeitsbereich a[href] { text-decoration: underline; }
*/


/* flex-container hat nichts mit Flexslider zu tun! */
.flex-container { display: flex; }

#overlay-container { position: fixed; top: -100%; right: 0; bottom: 100%; left: 0; padding-top: 100px; background-image: url(b/weiss-90-transparenz.png); background-repeat: repeat; transition: top .5s, bottom .5s; overflow: hidden; z-index: 1000; }
.overlay-container-aktiv { top: 0 !important; bottom: 0 !important; }

#overlay-menu { position: fixed; top: 2rem; right: 2rem; z-index: 1020; }
#overlay-menu div { margin-left: .5rem; padding: .5rem; font-size: 2rem; color: #FFF; background-color: #196AB1; border: thin solid #FFF; cursor: pointer; }

#container-mini-steuerung { position: absolute; right: 0; width: 3rem; height: 3.25rem; background-color: transparent; overflow: hidden; z-index: 500; transition: width .5s, height .5s; }
.container-mini-steuerung-hover { width: 30rem !important; height: 14rem !important; }

#mini-steuerung-kontaktdaten { display: block; position: relative; left: 3rem; width: 28rem; padding: 0 .5em; color: #FFF; line-height: 175%; background-color: #196AB1; border: thin solid #FFF; transition: margin-right 1s; z-index: 510; }
#mini-steuerung-kontaktdaten #hoerer { position: absolute; top: -1px; left: -3rem; width: 3rem; height: 3rem; padding: .5rem; font-size: 2rem; color: inherit; background-color: #196AB1; border: thin solid #FFF; border-right: none; z-index: 490; }

.blaue-box { margin: 3rem 0; padding: 2rem; color: #FFF; background-color: #196AB1; }


.nobreak { white-space: nowrap; }
.manuell { display: none; } /* wird in <br /> als Klasse mitgegeben, wenn dort ein manueller Zeilenumbruch möglich sein soll */

.hochgestellt { font-size: 10px; vertical-align : 5px; }
.kleinbuchstaben { text-transform: lowercase; }
.klein { font-size: 90%; }
.kleiner { font-size: 80%; }

.bild { width: 100%; text-align: inherit; }
.bild img { width: 100%; }
.fehlt { background-image: url(b/bild-fehlt.gif); background-repeat: no-repeat; background-position: 50% 50%; border: thin solid #D3D3D3; }
.mitrand { border: thin solid #000000; }
.lfluss { float: left; margin: 0 15px 15px 0; }
.rfluss { float: right; margin: 0 0 15px 15px; }

.clearleft { clear: left; }
.clearright { clear: right; }
.clearboth { clear: both; }

.trenner { height: .4rem; margin-bottom: 1rem; background-color: #196AB1; }
.stdabstand { height: 3rem; }
.abstand6em { height: 6rem; }
.abstand12em { height: 12rem; }

.abstandunten0 { margin-bottom: 0; }

hr { margin: 4rem 0; border: none; border-top: thin solid #666; }

ul.vornebuendig, .sb ul.sys.vornebuendig { padding-left: 20px; }

.svg { width: 100%; height: 100%; overflow: hidden; resize: both; border: thin solid #888888; background-position: 50% 50%; background-repeat: no-repeat; }

table { border-collapse: collapse; empty-cells: show; }

.table { display: table; width: 100%; height: 100%; }
.tr { display: table-row; }
.th { display: table-cell; }
.td { display: table-cell; vertical-align: middle; text-align: center; }

.sm-logos { display: inline-block; }
.sm-logos i { margin: 0 .75rem; color: #333 !important; }


#ScrollToTopButton { position: fixed; bottom: 0; right: 0; background-color: #196AB1; border: thin solid #FFF; z-index: 1; opacity: 0; }
#ScrollToTopButton i { color: #FFF; padding: .5em; }

#kopfbereich { position: fixed; width: 100%; height: 100px; top: 0; /* max-width: 1920px; */ background-color: #FFF; border-bottom: thin solid #EEE; z-index: 600; }
#kopfbereich .flex-container { height: 100px; padding: 0; }

#logo-container { height: 99px; background-color: #FFF; border-right: thin solid #EEE; }
#stocko-logo { width: 210px; height: 197px; background-color: #FFF; overflow: hidden; background-image: url("b/stocko-contact-logo-mit-zwei-claims.jpg"); background-repeat: no-repeat; background-size: 462px; background-position: 0 0; }

#kopf { margin: 0 auto; padding-top: 10px; background-color: #FFF; z-index: 500; }

#kopf-slider-container { position: relative; margin: -110px 0 3rem 0; padding-top: 46.875%; }
#kopf-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; line-height: normal; }
#kopf-slider .flex-caption h1 { margin-bottom: 1vw; font-size: 2.25vw; font-weight: 900; text-shadow: 0 0 1px #000; }
#kopf-slider .flex-caption p { font-size: 2.5vw; font-weight: 900; animation-delay: .5s; text-shadow: 0 0 1px #000;  }
#kopf-slider .flex-caption .lnk { animation-delay: 1s; }
#kopf-slider .flex-caption .lnk a { font-size: 1.5vw; font-weight: 900; text-align: center; background-color: #196AB1; }
#kopf-slider .but { display: inline-block; width: 10vw; line-height: 200%; text-transform: uppercase; }
@keyframes sliderbutton {
  0% { width: 10vw; font-size: 1.5vw; }
  100% { width: 100%; font-size: 2vw; }
}
#kopf-slider .but:hover { animation-name: sliderbutton; animation-duration: .5s; animation-fill-mode: both; }

.ref-carousel-container { margin: 6rem 0 8rem 0; }
.ref-carousel .slick-slide div { padding: 0 1.5rem; vertical-align: middle; }
.ref-carousel .slick-slide div br { line-height: 300%; }
.ref-carousel .slick-slide div img { width: 100%; }


.steuerung { display: block; margin: 0; padding: 0; color: #333; list-style-type: none; }
.steuerung.st_li { position: absolute; }
.steuerung.st_re { position: absolute; right: 0; }
.steuerung ul { list-style-type: none; margin: 0; padding: 0; }
.steuerung li.ebene1 { display: inline-block; position: relative; }
.steuerung li.ebene1:last-child { margin-right: 0; }
.steuerung li.ebene1 a { display: block; padding: .5rem 1rem; }
.steuerung .fa { font-size: 2rem; color: #196AB1; }

.steuerung .sub { display: none; position: absolute; left: 0; color: #666; background-color: #FFF; opacity: 0; border-top: thin solid #DDD; z-index: 30000; }
.steuerung .sub li { display: block; background-color: #FFF; white-space: nowrap; }
.steuerung .sub li:hover { color: #000; background-color: #EEE; }
.steuerung .sub a { display: block; padding: 1rem 1.5rem; }

.steuerung.st_re .sub { left: auto; right: 0; }

.steuerung #mp-sprache img { height: 1.1rem; vertical-align: baseline; border: thin solid #999; }
.menue-video { display: block; margin: 0 auto; }

#mobilmenue, .slicknav_menu { display: none; }
#mobilmenue { position: absolute; right: 0; top: 0; z-index: 700; }
#mobilmenue img { height: 1.5em; }
#mobilmenue .menue-video { display: none; }

/* .breadcrumb { position: absolute; top: 180px; margin-left: 12px; } */
/*
.breadcrumb { display: block; padding: 14.5vw 1rem .25rem 1rem; font-size: .8rem; background-color: #FFF; border-bottom: .1rem solid #999; }
.breadcrumb a:last-child { color: #196AB1; }
 */





#inhalt { max-width: 1920px; margin: 0 auto; padding: 0 2rem 6rem 2rem; }

.flex-container { flex-wrap: wrap; padding: .5rem 1.5rem; }
.flex-container > .flex-item { width: 25%; }
.flex-container > .flex-item > .zelle { display: block; padding: .75rem; }
.flex-container h2 { margin: 1rem 0 .75rem 0; font-size: 2.25rem; font-weight: 300; text-transform: uppercase; text-align: inherit; }
.image-container { position: relative; max-height: 20vw; width: 100%; padding-top: 46.72%; }
.image-container img { display: block; height: 100%; border: thin solid #AAA; }
.image-item { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-position: 50% 0; background-size: contain; }
.flex-container .fa { font-weight: 700; }

.carousel h2 { margin: 1rem 0 .75rem 0; font-size: 1.75rem; font-weight: 300; text-transform: uppercase; text-align: inherit; }

.intro-block { margin: 0; }
.intro-block h1 { margin: 0; padding: 1.25rem 2.5rem; font-size: 2.75rem; font-weight: 300; text-transform: uppercase; border-top: thin solid #DDD; border-bottom: thin solid #DDD; }
.intro-block h1 { padding-left: 5.5rem; }
.intro-block h2 { padding-left: 3.5rem; }
.intro-block h1::first-line { padding-left: 0; }
.intro-block h2::first-line { padding-left: 0; }
.intro-block h1.ohne-pictogramm { padding-left: 2rem; }
.intro-block h2.ohne-pictogramm { padding-left: 0; }
.intro-block h1 .fa,
.intro-block h2 .fa { width: 3rem; margin-left: -3.5rem; padding-right: .25rem; color: #196AB1; }

.blauerbalken { margin: 3rem 0; padding: 1rem; font-size: large; font-weight: normal; text-transform: uppercase; background-color: #196AB1; color: #FFF;}
.blau { color: #196AB1; }

#branchen .flex-container figcaption { margin: 1rem 0; padding: 1rem .5rem; border-top: thin solid #EEE; border-bottom: thin solid #EEE; transition: background-color .5s linear; background-color: #FFF; }
#branchen .flex-container figcaption .fa { font-size: 2rem; color: #196AB1; }


#zielgruppe .flex-item { width: 100%; text-align: center; line-height: 200%; }
#zielgruppe .inhalt { padding: 0; border: none; transition: none; }
#zielgruppe .inhalt:hover { background-color: inherit; }
#zielgruppe .inhalt p { max-width: 34rem; margin: 0 auto 1rem auto; text-align: center; line-height: 160%; }
#produkt-counter { font-size: 2em; line-height: normal; }

#digital-lifestyle { margin: 5em 0 0 0; }
#digital-lifestyle .flex-item { width: 33.33%; line-height: 175%; }
#digital-lifestyle .inhalt { padding: 2rem 0; transition: none; border: none; }
#digital-lifestyle .inhalt:hover { background-color: inherit; }
#digital-lifestyle .inhalt h2 { line-height: normal; margin-bottom: 1rem; }
#digital-lifestyle .inhalt p { padding-left: 3.75rem; max-width: 50rem; }

#produkte-overlay .flex-item { width: 25%; margin-bottom: 100px; }
#produkte-overlay figcaption { text-align: center; }
#produkte-overlay figcaption .fa { color: #196AB1; }

#download-overlay .flex-item { margin-bottom: 100px; }
#download-overlay .flex-container .image-container .image-item { background-position: 0 0; }
.katalog-download h2 { font-size: 1.25rem; }

#branchen-overview-overlay .flex-item { width: 25%; margin-bottom: 100px; }
#branchen-overview-overlay figcaption { text-align: center; }
#branchen-overview-overlay figcaption .fa { color: #196AB1; }

#branchen-overlay .flex-item { width: 50%; }
#branchen-overlay .zelle { margin-bottom: 3rem; }
#branchen-overlay h2 { font-size: 2rem; }
#branchen-overlay .image-container img { margin: 0 auto; border: thin solid #AAA; }

#branchen-overlay .branchen-pikto-container { position: relative; width: 100%; padding-top: 56%; background-repeat: no-repeat; background-size: contain; }
#branchen-overlay .branchen-pikto-container img { position: absolute; top: 0; left: 0; height: 18%; cursor: pointer; }

#branchen-overlay .pikto-liste-container h3 { margin: .5rem 0 1rem 0; border-bottom: thin solid #196AB1; }
#branchen-overlay .pikto-liste-container img { max-height: 50px; vertical-align: bottom; }
#branchen-overlay .pikto-liste-container .fa { color: #196AB1; }
#branchen-overlay .pikto-liste-container a { display: block; margin: .25rem 0; }
#branchen-overlay .pikto-liste-container .acc-block { margin-bottom: 0; }
#branchen-overlay .pikto-liste-container .acc-block-ende { margin-bottom: 1rem; }

#news-aktuelles-overlay .slick-slide { width: 33.33%; padding: 1.5rem; }
#news-aktuelles-overlay .image-container { width: 100%; padding-top: 75%; }
#news-aktuelles-overlay .image-item { position: absolute; top: 0; left: 0; width: 100%; border: thin solid #666; background-size: cover; }

#news-messen-overlay .flex-item { width: 33.33%; }
#news-messen-overlay .flex-item .zelle { padding: 1.5rem; }
#news-messen-overlay .slick-slide { width: 33.33%; padding: 1rem; }
#news-messen-overlay .image-container { width: 100%; padding-top: 25.86%; }
#news-messen-overlay .image-item { position: absolute; top: 0; left: 0; width: 100%; border: thin solid #666; background-size: cover; }
.messebild { width: 100%; margin: 1em 0; }

#firmenprofil-overlay .flex-item { width: 33.33%; }
#firmenprofil-overlay .flex-item .zelle { padding: 1.5rem; }
#firmenprofil-overlay .slick-slide { width: 33.33%; padding: 1.5rem; }
#firmenprofil-overlay .image-container { width: 100%; padding-top: 31.25%;}
#firmenprofil-overlay .image-item { position: absolute; top: 0; left: 0; width: 100%; border: thin solid #666; background-size: cover; }
#firmenprofil-overlay ul { margin: 0; }
#firmenprofil-overlay .pfeil_li { float: left;  font-size: 2rem; color: #196AB1; }
#firmenprofil-overlay .pfeil_re { float: right; font-size: 2rem; color: #196AB1; text-align: right; }
#firmenprofil-overlay .pfeil_li i, #firmenprofil-overlay .pfeil_re i { padding: 0 1.5rem; }
#firmenprofil-overlay .hist-text .jahr { line-height: 225%; text-align: center; }
.history-fader { position: relative; background-color: transparent; }
.history-fader ul { margin: 0; padding: 0; }
.history-fader li { display: none; position: absolute; top: 0; margin: 0; opacity: 0; }
.history-fader img { width: 100%; }
.history-fader .hist-aktiv   { opacity: 1; transition: opacity .5s; }
.history-fader .hist-inaktiv { opacity: 0; transition: opacity .5s; }

#kontakt-overlay .flex-item { width: 25%; }
#kontakt-overlay .flex-item .image-container { margin-top: 3rem; padding-top: 40%; }
#kontakt-overlay .adresse td, #kontakt-overlay .adresse th { text-align: left; font-weight: normal; vertical-align: top; }
#kontakt-overlay .adresse th { padding-right: 1rem; }

#partner-overlay-zh .slick-slide { width: 33.33%; padding: 1.5rem; }

#verhaltenskodex-overlay .flex-item { width: 50%; padding-right: 1.5rem; }
#verhaltenskodex-overlay .flex-item:nth-child(2) { padding-left: 1.5rem; }
#verhaltenskodex-overlay h2 { font-size: 1.75rem; text-transform: uppercase; }
#verhaltenskodex-overlay p { margin-bottom: 3rem; }

#carbon-footprint-overlay .flex-item { width: 50%; padding-right: 1.5rem; }
#carbon-footprint-overlay .flex-item:nth-child(2) { padding-left: 1.5rem; }
#carbon-footprint-overlay h2 { font-size: 1.75rem; text-transform: uppercase; }
#carbon-footprint-overlay p { margin-bottom: 3rem; }

#hinweisgebersystem-overlay .flex-item { width: 50%; padding-right: 1.5rem; }
#hinweisgebersystem-overlay .flex-item:nth-child(2) { padding-left: 1.5rem; }
#hinweisgebersystem-overlay h2 { font-size: 1.75rem; text-transform: uppercase; }
#hinweisgebersystem-overlay p { margin-bottom: 2rem; }

#stellenangebote-overlay .flex-item { width: 33.33%; margin-bottom: 100px; }
#stellenangebote-overlay .slick-slide { width: 33.33%; padding: 1.5rem; }
#stellenangebote-overlay .image-container { width: 100%; padding-top: 27.5%; }
#stellenangebote-overlay .image-item { position: absolute; top: 0; left: 0; width: 100%; border: thin solid #666; background-size: cover; }
#stellenangebote-overlay h3 { margin-top: 3rem; padding-top: 1.5rem; font-size: 1.25rem; text-transform: uppercase; color: #196AB1; border-top: thin solid #196AB1; }
#stellenangebote-overlay h4 { margin: 5rem 0 0 0; font-size: 1.1rem; text-transform: uppercase; }
#stellenangebote-overlay ul { margin-top: .5rem; }

#ausbildungsangebote-overlay .flex-item { width: 33.33%; margin-bottom: 100px; }
#ausbildungsangebote-overlay .image-container { width: 100%; padding-top: 50%; }
#ausbildungsangebote-overlay .image-item { position: absolute; top: 0; left: 0; width: 100%; border: thin solid #666; background-size: cover; }
#ausbildungsangebote-overlay h3 { margin-top: 3rem; padding-top: 1.5rem; font-size: 1.25rem; text-transform: uppercase; color: #196AB1; border-top: thin solid #196AB1; }
#ausbildungsangebote-overlay h3.erster { margin-top: 0; border-top: none; }
#ausbildungsangebote-overlay h4 { margin: 2rem 0 0 0; font-size: 1rem; text-transform: uppercase; }
#ausbildungsangebote-overlay h5 { margin: 2rem 0 .5rem 0; font-size: 1rem; text-transform: uppercase; }
#ausbildungsangebote-overlay ul { margin-top: .5rem; }
#ausbildungsangebote #accordion1 h1 + div { margin-bottom: 3rem; padding-left: 2.4rem; padding-right: 0; border: none; }

.stellen-block { margin: 3rem 0; }
.aktuelles-block, .firmenprofil-block { height: 23rem; }
.terminwunsch-block, .stellen-block { height: 10rem; }
html:lang(de) .stellen-block { height: auto; }
.pikto-block { height: 0; }

.stellen-block .download-button { width: 100%; text-align: center; }

.resp-vid { position: relative; height: 0; padding-top: 0; overflow: hidden; }
.resp-vid.ratio-16-9 { padding-bottom: 56.25%; }
.resp-vid iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.html5-video-player { background-color: #FFF !important; }

#google-map-iframe { display: block; position: absolute; top: 220px; left: 1rem; width: calc(100% - 2rem); height: calc(100% - 220px - 1rem); }

#impressum-overlay .flex-item , #datenschutz-overlay .flex-item { width: 50%; padding-right: 1.5rem; }
#impressum-overlay .flex-item:nth-child(2), #datenschutz-overlay .flex-item:nth-child(2) { padding-left: 1.5rem; }
#impressum-overlay h2, #datenschutz-overlay h2 { font-size: 1.75rem; text-transform: uppercase; }
#impressum-overlay p, #datenschutz-overlay p { margin-bottom: 3rem; }

.slogan { max-width: 62rem; margin: 0 auto; text-align: center; font-size: 2.25rem; font-weight: bold; line-height: 160%; }

#fuss-steuerung > a, #fuss-steuerung > div { display: block; margin: 1.25rem 1.25rem 1.75rem 1.25rem; padding: 1.25rem; font-size: 2.25rem; font-weight: 300;  border-bottom: thin solid #DDD; text-transform: uppercase; }
#fuss-steuerung > a .fa, #fuss-steuerung > div .fa { color: #196AB1; padding-right: .25rem; }
#fuss-steuerung > a .fa, #fuss-steuerung > div .fa { width: 2.5rem; }

#katalogauswahl .flex-item, #personendaten .flex-item { width: 33.33%; }
#katalogauswahl .flex-item .zelle { min-height: 6rem; }



#suchformular { max-width: 25rem; margin: 0 auto; vertical-align: middle; }
#suchbegriff { margin: .5rem auto; max-width: 20rem; font-size: inherit; }
#suchformular #sucheabsenden { font-family: "FontAwesome"; padding: 0 .5rem; font-size: 1.75rem; color: #196AB1; background-color: transparent; border: none; cursor: pointer; }
.dateiname { font-size: 85%; color: #999999; }

.a360grad-container { position: relative; padding: 0 0 1em 0; overflow: hidden; }
.a360grad-container .keep-ratio { position: relative; width: 100%; padding-top: 56.3%; }
.a360grad-container .keep-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: thin solid #000; z-index: 0; }

.arbeitsbereich .bildsteuerung a { display: inline-block; text-decoration: none; }
.bildsteuerung { margin: 0 -25px; }
.bildsteuerung h1 { margin: 0 25px 1em 25px; font-size: 1.5em; font-weight: normal; text-align: left; color: #196AB1; text-transform: uppercase; }
.bildsteuerung h1 .hochgestellt { color: #196AB1; }
.bildsteuerung h1 .kleinbuchstaben { font-style: italic; }
.bildsteuerung div { display: inline-block; text-align: center; vertical-align: top; margin: 1.5em 21px; }
.bildsteuerung div.artikel { margin: 1.25em 11px; text-align: left; }
.bildsteuerung img { width: 100%; max-width: 275px; max-height: 275px; background-color: #FFF; border: 1px solid #FFF; box-shadow: 0 0 12px #666; vertical-align: bottom; }
.bildsteuerung img:hover { border: 1px solid #000; }
.bildsteuerung div.artikel img { background-color: #FFF; }
.bildsteuerung div.artikel h2 { margin: 1em 0; font-size: 100%; }
.bildsteuerung div.artikel h2 .hochgestellt { color: #196AB1; }
.bildsteuerung div.artikel h2 .kleinbuchstaben { font-style: italic; }
.bildsteuerung p { color: #4A5662; text-align: inherit; text-transform: uppercase; }
.bildsteuerung p.text { text-transform: none; }
.bildsteuerung div.artikel p { margin-bottom: 0; text-align: inherit; text-transform: none; }
.bildsteuerung div.artikel p .manuell { display: inline; }

.bildsteuerung div.doppeltebreite { position: relative; width: 100%; max-width: 593px; height: 265px; background-repeat: no-repeat; border: 1px solid #FFF; box-shadow: 0 0 12px #666; }
.bildsteuerung div.doppeltebreite:hover { border: 1px solid #000; }
.bildsteuerung div.doppeltebreite .txt { position: absolute; right: 20px; top: 0; bottom: 0; width: 220px; margin: 0; padding: 10px; font-size: .75em; text-align: left; line-height: normal; background: url(b/hint-intro-news.png) 0 0 repeat; }
.bildsteuerung div.doppeltebreite .txt p { text-align: left; }
.bildsteuerung div.doppeltebreite .txt h2 { text-transform: uppercase; font-size: medium; font-weight: normal; }

.zwei { text-align: left; margin: 0; }
.zwei div { width: 50%; margin: 0; padding: 0 0 0 25px; }
.zwei div:first-child { margin: 0; padding: 0 25px 0 0; }
.zwei div img { max-width: 600px; margin: 0; }
.zwei h2 { font-size: medium; font-weight: normal; }

.fuenf { text-align: left; margin-left: -10px; margin-right: -10px; }
.fuenf div { width: 210px; margin-left: 12px; margin-right: 13px; }
.fuenf img { max-width: 210px; max-height: 210px; }
.fuenf h2 { font-size: medium; font-weight: normal; }


.download-block { float: right; margin-top: 60px; }
.download-block h3 { display: inline; font-size: 110%; color: #196AB1; font-weight: normal; }
.button { display: inline-block; position: relative; width: 100%; padding: 1em; color: #FFF; background-color: #196AB1; } 
.button:hover { background-color: #A0AAB4; } 
.button.mitpdf { padding-right: 3.5em; }
.button .pdf { display: inline-block; position: absolute; right: 0; top: 0; padding: 0 .5em; color: #FFF; background-color: #000; }
.arbeitsbereich .button { color: #FFF; text-decoration: none !important; font-size: inherit; }

#accordion1 h1 .hochgestellt { text-transform: none; }
#accordion1 h1 .kleinbuchstaben { font-style: italic; }


.steckverbinder-kopf { }
.steckverbinder-kopf .grauverlauf { height: 255px; background: url(b/hint-grauverlauf.jpg) 0 0 repeat-x; background-size: 100% 255px; box-shadow: 0 0 6px 6px #DDD; }
.steckverbinder-kopf .grauverlauf-schatten { background: url(b/hint-grauverlauf-schatten.jpg) 0 0 repeat-x; }
.steckverbinder-kopf .arbeitsbereich { height: 100%; }

.steckverbinder-kopf .artikelbild { display: inline-block; width: 275px; height: 275px; }
.steckverbinder-kopf .artikelbild img { width: 275px; height: 275px; vertical-align: bottom; border: 1px solid #FFF; box-shadow: 0 0 12px #666; }

.steckverbinder-kopf .raster-angabe { display: inline-block; margin-bottom: 10px; padding: .25em 1em; vertical-align: bottom; font-size: 90%; color: #FFF; background-color: #0071BC; }
.steckverbinder-kopf .raster-angabe-dummy { display: inline-block; margin-bottom: 10px; padding: .25em 1em; width: 100px; }

.steckverbinder-kopf .ueberschrift { display: inline-block; vertical-align: top; margin-right: 20px; }
.steckverbinder-kopf .ueberschrift h1 { margin: 1em .25em 0 .25em; color: #666; font-size: medium; font-weight: normal; text-transform: uppercase; }
.steckverbinder-kopf .ueberschrift h2 { margin: 0 0 .65em 0; font-size: medium; font-weight: 300; line-height: normal; white-space: nowrap; }
.steckverbinder-kopf .ueberschrift h2:first-line { font-size: 48px; }

.steckverbinder-kopf .artikelinfo { float: right; width: 16em; margin-top: 16px; }
.steckverbinder-kopf .artikelinfo a { text-decoration: none; }
.steckverbinder-kopf .artikelinfo .button { padding: .5em 1em; }
.steckverbinder-kopf .artikelinfo .pdf { padding: 0 .5em; font-size: .8em; font-weight: bold; line-height: 1.5em; background-color: #19202E; color: #FFF; text-shadow: none; vertical-align: top; }

.steckverbinder-kopf .artikelinfo .download-block { float: none; margin: 5px 0; }
.endeartikelinfos { clear: both; height: 3em; }

.vpe { display: inline-block; vertical-align: top; margin-right: 40px; }
.vpe .bild, .vpe .grafik { margin-bottom: 20px; /* padding: 10px; */ max-width: 200px; }
.vpe .bild { border: 1px solid #000000; background-color: #FFF; }
.vpe img { max-width: 100%; max-height: 100%; }
.stdtab.vpe { margin-right: 0; }

.sb h2 { margin-bottom: .5em; font-size: 100%; font-weight: bold; }
.sb ul.sys { list-style-type: disc; margin-bottom: 1.5em; padding-left: 2em; }

.produkt-freigaben img, .produkt-freigaben p { display: inline-block; margin: 0 1.5em 0 0; vertical-align: middle; }
.sb .produkt-freigaben { margin: 0 .75em; padding-left: .75em; }

.sb .techdata, .techdata2 { margin: 1em 0; width: 100%; }
.sb .techdata.auto-breite, .techdata2.autobreite { width: auto; }
.sb .techdata th, .techdata td, .techdata2 th, .techdata2 td { padding: .25em .5em; text-align: left; vertical-align: top; background-color: #FFF; border: thin solid #A9A9A9; }
.sb .techdata2 th, .techdata2 td { border: none; padding-top: 0; padding-bottom: 0; }
.sb .techdata2 th { padding-left: 0; }
.sb .techdata th { background-color: #C1C1C1; text-shadow: none; }
.sb .techdata td.leerzeile, .techdata2 td.leerzeile { padding: .05em; border-left: none !important; border-right: none !important; background-color: #F1F1F1; }

.sb .katalogbox { float: left; width: 22em; min-height: 12em; margin: 1em 1em 1em 0; }
.sb .katalogbox img { float: left; border: 1px solid #999; }
.sb .katalogbox div { margin: 0 0 0 120px; }
.sb .katalogbox h2 { margin: 0 0 1em 0; font-size: 1em; font-weight: normal; }

.derating { display: inline-block; margin: 1em 0; padding: 1em; background-color: #FFF; border: thin solid #888888; }
.derating img { width: 100%; }

.ui-accordion h2 { font-size: large; }
.ui-accordion h2 a { text-decoration: inherit; }

/* externe Tabellen (z. B. bei Crimpkontakten und lötfreien Verbindern */
.extern h1 { padding: .5em 0; font-size: large; font-weight: normal; text-align: left; }
.extern h1, .extern h2 { padding: .5em 0; font-size: large; font-weight: bold; text-align: left; }
.extern table { min-width: 100%; }

.qualitaet th, .qualitaet td { padding-top: 10px; padding-bottom: 10px; }

.resize-img { position: absolute; width: 100px; height: 150px; /* 100px; */ background-color: #FFF; border: 1px solid #A9A9A9; background-repeat: no-repeat; background-position: center center; background-size: contain; }
.resize-img.ui-widget-content .ui-icon { background-image: none; /* url("jquery-ui/images/ui-icons_777777_256x240.png"); */ }


.mehrspaltig .bildsteuerung { display: inline-block; margin-right: 50px; vertical-align: top; }
.mehrspaltig .bild-spalte { display: inline-block; margin: 20px 30px 10px 0; vertical-align: top; }
.mehrspaltig .bild-spalte img { width: 100%; max-width: 275px; max-height: 275px; background-color: #FFF; border: 1px solid #FFF; box-shadow: 0 0 12px #666; vertical-align: bottom; }
.mehrspaltig .bild-spalte img:hover { border: 1px solid #000; }
.mehrspaltig .bild-spalte h2 { margin: 1em 0; font-size: large; font-weight: normal; text-align: center; }
.mehrspaltig .info-spalte { display: inline-block; width: 99%; max-width: 620px; vertical-align: top; }
.mehrspaltig .info-spalte h2 { margin: 15px auto 15px 15px; color: inherit; font-size: medium; font-weight: normal; text-transform: uppercase; }
.mehrspaltig .info-spalte h2:first-line { color: inherit; font-size: larger; }
.mehrspaltig .info-spalte h3 { margin-bottom: 0; color: #196AB1; font-size: medium; font-weight: normal; text-transform: uppercase; }
.mehrspaltig .info-spalte ul { margin-top: 0; }
.mehrspaltig .info-spalte .floater { float: left; width: 100%; max-width: 280px; padding: 0 15px; }
.mehrspaltig .rechte-spalte { float: right; margin-top: 20px; }
.mehrspaltig .rechte-spalte img { width: 150px; margin-left: 12px; border: 1px solid #AAA; box-shadow: 4px 4px 6px #DDD; }
.ende-floater { clear: left; }
.ende-rechte-spalte { clear: right; }


.news-block .arbeitsbereich a[href] { text-decoration: none; }
.news-block .bild-spalte { display: inline-block; width: 50%; text-align:right; vertical-align: top; padding: 0 20px; }
.news-block .bild-spalte .duo { display: inline-block; width: 50%; vertical-align: top; }
.news-block .bild-spalte .duo img { max-width: 275px; }
.news-block .bild-spalte .duo:first-child { text-align: left; }
.news-block .bild-spalte .duo:last-child { text-align: right; padding: 0 }
.news-block .bild-spalte .duo .li { padding: 0 20px 0 0; }
.news-block .bild-spalte .duo .re { padding: 0 0 0 20px; }
.news-block .bild-spalte img { width: 100%; max-height: 275px; border: 1px solid #FFF; vertical-align: bottom; box-shadow: 0 0 5px #666; }
.news-block .text-spalte { display: inline-block; width: 50%; vertical-align: top; padding: 30px 60px 0 60px; }
.news-block .text-spalte h2 { margin: 0 0 1em 0; color: #196AB1; font-size: medium; font-weight: normal; text-transform: uppercase; }

.aktuelles-kopf { padding: 30px 0 15px 0; }
.aktuelles-kopf .img-block { display: inline-block; width: 100%; margin: 0 15px 15px 0; vertical-align: top; }
.aktuelles-kopf .img-block p { margin-bottom: 0; }
.aktuelles-kopf img { width: 100%; border: 1px solid #FFF; box-shadow: 0 0 10px #666; }
.aktuelles-kopf img:last-child { margin-right: 0; }

.aktuelles-block h1 { margin: 0 0 20px 0; color: #196AB1; font-size: larger; font-weight: normal; text-transform: uppercase; }

.spaltenfluss { text-align: justify; column-count: 3; column-gap: 2em; hyphens: auto; }
.spaltenfluss p { margin: 0 0 1em 0; }

.messe-block .arbeitsbereich a[href] { text-decoration: none; }
.messe-block .logo-spalte { display: inline-block; width: 23%; vertical-align: top; }
.messe-block .logo-spalte img { width: 100%; max-width: 275px; max-height: 275px; border: 1px solid #FFF; vertical-align: bottom; box-shadow: 0 0 5px #666; }
.messe-block .text-spalte { display: inline-block; width: 27%; vertical-align: top; padding: 40px 30px 0 30px; }
.messe-block .text-spalte h2 { margin: 0 0 1em 0; color: #196AB1; font-size: medium; font-weight: normal; text-transform: uppercase; }
.messe-block .text-spalte .url { color: #196AB1; font-size: 13px; }
.messe-block .bild-spalte { display: inline-block; width: 50%; vertical-align: top; }
.messe-block .bild-spalte img { width: 100%; max-height: 275px; border: 1px solid #FFF; vertical-align: bottom; box-shadow: 0 0 5px #666; }

.produktvideo-container { float: right; max-width: 600px; margin: 0 -2.2em 2em 2em; border: thin solid #000; }
.produktvideo-container.news { float: none; margin: 0 0 1em 0; }
.produktvideo-container video { width: 100%; vertical-align: bottom; z-index: -1; }

/* Formularfelder für Filter der docfiles */
.docfiles-tab tbody tr { cursor: pointer; }
.docfiles-tab tbody tr td { border-bottom: thin solid #EEE; vertical-align: top; }
.docfiles-tab tbody tr:hover { background-color: #EEE; }
#docfiles-filter { margin: 2em 0; }
#docfiles-filter fieldset { padding-bottom: 0; font-weight: bold; border: thin solid #333;}
#docfiles-filter fieldset .eingabefeld { width: 10em; margin: 0; padding: .25em; border: thin solid #999; }
#docfiles-filter fieldset select.eingabefeld { width: auto; }
#docfiles-filter fieldset .table { width: auto; }
#docfiles-filter fieldset .th { padding-right: .5em; white-space: nowrap; vertical-align: middle; }
#docfiles-filter fieldset input[type=submit] { padding: .1em .5em; }
#tbl_dateiliste_filter { display: none; }

/* Fußbereich */
#seitenfuss { margin: 5rem 0 3rem 0; padding: 1em 0; border-top: thin solid #EEE; border-bottom: thin solid #EEE; }
#seitenfuss .flex-item { width: 20%; }
#seitenfuss .inhalt { padding: 1rem 0; border: none; text-align: center; }


@media screen and (min-width: 1921px) {
	.breadcrumb { padding-top: 280px; }

	#kopf-slider .flex-caption h1 { margin-bottom: 1em; font-size: 2em; }
	#kopf-slider .flex-caption p { font-size: 2.5em; }
	#kopf-slider .flex-caption .lnk a { font-size: 1.5em; }
}


@media screen and (max-width: 1600px) {
	#kontakt-overlay .flex-item { width: 50%; }
}


@media screen and (max-width: 1440px) {
	#branchen .flex-container .flex-item { width: 50%; }
}


@media screen and (max-width: 1280px) {
	html { font-size: 15px; }

	#stocko-logo { width: 296px !important; height: 80px !important; background-size: 296px 120px !important; }
	.steuerung { display: none; }

	#mobilmenue, .slicknav_menu { display: block; background-color: transparent; }
	#mobilmenue div.schatten, #mobilmenue .sub div.ohneschatten { display: none; }
	.slicknav_btn { position: fixed; top: .5em; right: .5em; width: 2em; height: 2em; margin: 0; padding: .6em 0.45em; border-radius: 0; background-color: #196AB1; }
	.slicknav_menu { padding: 0; }
	.slicknav_menu .slicknav_menutxt { text-shadow: none; }
	.slicknav_nav { position: absolute; top: 4rem; right: 1rem; min-width: 15rem; background-color: #333; z-index: 100; }
	.slicknav_nav form { margin-left: 15px; }
	#mobilmenue .sub .fa { display: none; }

	a[href^="tel:"] { text-decoration: underline; }
	.mehrspaltig .rechte-spalte { float: none; }
	.ende-rechte-spalte { clear: none; }

	.intro-block h1 { font-size: 2.5rem; }
	.intro-block h2 { font-size: 2rem; }

	#branchen .flex-container figcaption p a { padding: .25rem 0; line-height: 175%; }


	#branchen-overlay .flex-item { width: 100%; }

	#news-messen-overlay .flex-item,
	#download-overlay .flex-item,
	#produkte-overlay .flex-item,
	#stellenangebote-overlay .flex-item,
	#ausbildungsangebote-overlay .flex-item { width: 50%; }

	#katalogauswahl .flex-item, #personendaten .flex-item { width: 50%; }

	.news-block .aktuelles-kopf-seite h1 { max-width: none; }
}


@media screen and (max-width: 1120px) {
	#ueberschrift { top: 0; width: auto; margin-top: 0; text-align: center; }

	.messe-block .logo-spalte { width: auto; }
	.messe-block .text-spalte { width: auto; }
	.messe-block .bild-spalte { display: block; width: auto; max-width: 600px; margin-top: 30px; }
}


@media screen and (max-width:1023px) {
	.techdata th, .techdata td { display: block; font-size: inherit; border-top: none; text-shadow: none; }
	.techdata th:nth-child(1), .techdata td:nth-child(1) { padding-left: 1em; background-color: #C9C9C9; }
	.techdata th:nth-child(2), .techdata td:nth-child(2) { padding-left: 2em; background-color: #E1E1E1; }
	.techdata th:nth-child(3), .techdata td:nth-child(3) { padding-left: 3em; background-color: #E9E9E9; }
	.techdata th:nth-child(4), .techdata td:nth-child(4) { padding-left: 4em; background-color: #F1F1F1; }
	.techdata td.leerzeile { background-color: inherit; }

	.spaltenfluss { text-align: justify; column-count: 2; column-gap: 2em; hyphens: auto; }

	#digital-lifestyle .flex-item { width: 100%; }

	#branchen-overview-overlay .flex-item { width: 50%;}
	
	.produktvideo-container { float: none; margin: 0 0 2em 0; }

}


@media screen and (max-width: 960px) {
	.flex-caption { top: 10%; }

	html { font-size: 14px; }
	.arbeitsbereich { padding-top: 0; }
	
	#kopf { opacity: 1; }

	#kopf-slider .flex-caption h1 { margin-bottom: 1rem; font-size: 1.75rem; }
	#kopf-slider .flex-caption p { font-size: 2rem; }
	#kopf-slider .flex-caption .lnk a { font-size: 1.5rem; }
	#kopf-slider .but { width: 12rem; }
	@keyframes sliderbutton {
		0% { width: 12rem; font-size: 1.5rem; }
		100% { width: 100%; font-size: 2rem; }
	}

	.flex-container { flex-wrap: wrap; }
	.intro-block { margin-top: 2rem; }
	.intro-block .flex-item,
	#seitenfuss .flex-item { width: 50%; }

	#verhaltenskodex-overlay .flex-item { width: 100%; padding: 0; }
	#verhaltenskodex-overlay .flex-item:nth-child(2) { padding: 0; }

	#hinweisgebersystem-overlay .flex-item { width: 100%; padding: 0; }
	#hinweisgebersystem-overlay .flex-item:nth-child(2) { padding: 0; }

	.video-0960 { display: block; }
	.video-1920, .video-0480 { display: none; }

	#impressum-overlay .flex-item, #datenschutz-overlay .flex-item { width: 100%; padding: 0; }
	#impressum-overlay .flex-item:nth-child(2), #datenschutz-overlay .flex-item:nth-child(2) { padding: 0; }

	.slogan { font-size: 2rem; }

	.breadcrumb { padding-top: 0; }

	#sitemap #fuss-kontakt { float: none; display: block; width: 100%; max-width: 480px; min-height: 520px; }
	#endefuss-kontakt { clear: right; }

	#sitemap .rubrik { width: 50%; line-height: 200%; }
}


@media screen and (max-width:800px) {
	#ref-anim .keep-ratio { padding-top: 75%; }
	#ref-anim .flex-container { height: calc(100% / 5); }
	#ref-anim .flex-item { width: 25%; }

	#download-overlay .flex-item,
	#katalogauswahl .flex-item, #personendaten .flex-item,
	#stellenangebote-overlay .flex-item,
	#ausbildungsangebote-overlay .flex-item { width: 100%; }
	#branchen-overlay .pikto-liste-container a { padding: .25rem 0; }
	#kontakt-overlay .flex-item { width: 100%; }

	.news-block .bild-spalte { display: block; width: 100%; padding: 0; text-align: left; }
	.news-block .text-spalte { display: block; width: 100%; padding: 30px 10px 10px 10px; }
	.news-block .bild-spalte .duo { display: inline-block; }

	.azubibild { display: block; width: auto; padding-right: 0; }
	.azubibildlegende { display: block; width: auto; }
	.azubibildlegende p { margin: 1em 0; }
}


@media screen and (max-width:679px) {
	#branchen-overview-overlay .flex-item { width: 100%;}

	.bildsteuerung div.doppeltebreite { display: block; width: auto; }

	#artikelbild { float: none; }
	#artikelinfo { float: none; }	

	.spaltenfluss { text-align: justify; column-count: 1; column-gap: 2em; hyphens: auto; }
}


@media screen and (max-width: 640px) {
	html { font-size: 12px; }

	#kopf-slider .flex-caption h1 { margin-bottom: 1rem; font-size: 1.5rem; }
	#kopf-slider .flex-caption p { font-size: 1.75rem; }
	#kopf-slider .flex-caption .lnk a { font-size: 1.25rem; }
	#kopf-slider .but { width: 10rem; }
	@keyframes sliderbutton {
		0% { width: 10rem; font-size: 1.25rem; }
		100% { width: 100%; font-size: 1.75rem; }
	}

	.intro-block .flex-container .flex-item,

	#branchen .flex-container .flex-item { width: 100%; }

	#seitenfuss .flex-item,
	#news-messen-overlay .flex-item,
	#produkte-overlay .flex-item,
	#branchen-overlay #produkte-overlay.intro-block .flex-container .flex-item { width: 100%; }

	#seitenfuss.intro-block .flex-container .flex-item .zelle .inhalt { margin: 0; }
	.slogan { font-size: 1.5rem; }


	.steckverbinder-kopf .raster-angabe { display: block; width: 275px; }
	.steckverbinder-kopf .ueberschrift { display: block; }
	.steckverbinder-kopf .ueberschrift h2:first-line { font-size: 30px; }
	.steckverbinder-kopf .artikelinfo { float: none; margin-top: 2.5em; }
}


@media screen and (max-width: 480px) {
	.video-0480 { display: block; }
	.video-1920, .video-0960 { display: none; }
}

@media screen and (max-width: 430px) {
	#kopf-slider .flex-caption h1 { margin-bottom: 1rem; font-size: 1.25rem; }
	#kopf-slider .flex-caption p { font-size: 1.5rem; }
	#kopf-slider .flex-caption .lnk a { font-size: 1rem; }
	#kopf-slider .but { width: 8rem; }
	@keyframes sliderbutton {
		0% { width: 8rem; font-size: 1.25rem; }
		100% { width: 100%; font-size: 1.75rem; }
	}

	.intro-block .flex-container .flex-item { width: 100%; }
	.intro-block .flex-container .flex-item .zelle { margin-bottom: 2rem; }

	#sitemap .rubrik { width: 100%; }
}