

/* Skin for card */
.border-0
{
    border: 1px solid transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
}
.accordion.border-0 .card
{
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-top: 1px solid #dedede;
    margin-bottom: 2px !important;
    padding-top: 6px !important;

}
/* Kann man das anders lösen? Hintergrund Farbe war doppelt deklariert */
/* https://mediadaten.kuebler.com/de/karriere/schueler-und-schulabgaenger/unsere-ausbildungsberufe */
.accordion.border-0 .card-header
{
    background-color: transparent !important;
}
.accordion.border-0 .card .card-header .btn.collapsed {
    background-color: transparent;
}

/* additional img Styles 4 accordion  */
.accordion img {
    height: auto;
    margin-left: 15px;
    margin-bottom: 15px;
    float: right;
}

@media (max-width: 575px) {
    .accordion img {
        width: 100% !important;
        max-width: 100% !important;
        float: none;
        margin-left: 0;
    }
}
@media (min-width: 575px)
{
    .accordion img {
        width: 50% !important;
        margin-left: 0 !important;
    }
}
@media (min-width: 960px)
{
    .accordion img {
        width: 50% !important;
        max-width: 350px !important;
        margin-left: 0 !important;
    }
}

/* refactor blockquote (html -> done) */
.blockquote-bg {
    background-image: url(/images/layout/bg-blockquote.svg) !important;
    width: 100% !important;
    background-color: #fff !important;
  }

/* hotfix */


/* refactor: feature box is not a stlye / remove all visal styles */
.bg-grey-light {
    background-image: url(/images/layout/bg-feature-box-light.jpg);
    border: 1px solid #eeeeee;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bg-dark {
    background-image: url(/images/layout/bg-feature-box-dark.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #efefef;
}

.paragraph.bg-dark,
.paragraph.bg-grey-light
{
    padding: 15px;
}

.bg-orange {
    background-image: none;
    background-color: #ff6400;
    color: #ffffff;
}

/* will nont work - _reboot.scss ?? */
.bg-orange. a {
    color: #973e04 !important;
}

.bg-dark strong, .bg-dark .text-muted, .bg-orange strong, .orange .text-muted
{
    color: #eeeeee !important;


}
b, strong, .font-weight-bold {
    font-weight: 600 !important;

}

/* accordion - animation caret delete  */
.accordion .card .card-header .btn .kuebler {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
    -webkit-transition-duration: unset;
    transition-duration: 0s;
}
.accordion a.btn-primary {
    color: #ffffff !important;
}

.accordion a.orange
{
    color: #ff6400 !important;
}



.accordion a.btn.btn-outline-primary  {
    color: #ff6400 !important;
}
.accordion a.btn.btn-outline-primary:hover {
    color: #ffffff !important;
}


/* refactor - .interface into .logo-small */
img.logo-small
{
    max-height: 22px;
    float: left;
    margin-right: 10px;
}

/* refactor - list bullet into light version for dark background */
.bg-dark .list li
{
    background-image:  url(../images/list-square-light.svg);
    background-position: 2px 9px;
}
.bg-dark hr
{
    border-top: 1px solid #455866 ;
    border-bottom: 1px solid #263139;;

}

/* .hero @ mobile device */
@media (max-width:1199.98px) {
     .page-hero {
        min-height: 365px;
    }

}

@media (max-width: 767.98px) {
    .hero-grid {
        padding: 0px 15px 0px 15px;
        min-height: 250px;
    }
    .page-hero {
        min-height: 185px;

    }

}

.page-hero.hero-extended .hero-grid {
    position: relative;
    margin-top: -260px;
}

.page-hero.hero-extended, .page-hero.hero-540
{
    /* Page Hero musst be 540 pixel */
    min-height: 570px !important;

}
.page-hero.hero-4-finder
{
    /* Page Hero musst be 630 pixel */
    min-height: 630px !important;
    border: 1px solid green;
}

.product-finder .kForm-textarea
{
    border: 1px solid #aaaaaa
}

.product-finder .kForm-textarea:focus
{
    border: 1px solid transparent;
    border-bottom: 1px solid #ff6400;
}

.productfinder-bar
{
    background-color: #263139;
}

.product-category ul li a div.image img
{
    width: 190px !important;
}
.products-list ul li a div.image img
{
    width: 70px !important;
}


#productfinderDropdownButton .dropdown-menu.show,
ul.dropdown-menu.show, ul.dropdown-menu.show:Hover
{
    top: -37px !important;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

 
/* refactor main navigation  */
.nav-tabs .nav-link
{
    font-size: 1rem !important;
}

.card.border-0:hover {
    -webkit-box-shadow: unset;
    box-shadow: unset;

}

.card .card-img-top {
    border-bottom: 1px solid transparent;
}

.focus-box
{
    width: 100%;
}

/* prevent page jumping  */
html
{
    overflow-y: scroll;
}

/* product list box - product finder  */

.product-list .caret-box dd p{
    font-size: 0.8rem !important;
}
.logo-big
{
    height: 60px;
    width: auto;
}

/* PAGINATION FIX*/
.page-link:focus {
    z-index: 2;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.alert{
    border: 1px solid rgb(34,53,68);
    color: rgb(34,53,68) !important;
    border-left: 3px solid rgb(34,53,68);
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    background: rgba(243,249,249,0.95);
    margin-top:10px;
}

.alert-error {
    border: 1px solid red;
    color: red !important;
    border-left: 3px solid red;
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
     box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    background: rgba(255,223,213,0.05);
    margin-top:10px;
    z-index: 999999999999999;
}

.language-selector .country-item .language
{
    color: #ff6400;
}
.language-selector .country-item .name:hover
{
    color: #ff6400;
}
.language-selector .countryFilter input:focus {
    outline: none;
    border: 1px solid transparent;
    border-bottom: 1px solid #ff6400;
}

/*
* depreaed: kuebler-language
 */

.flag-icon-global::before {
    font-family: "kuebler" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    content: "\e90f";
    color: #ff6400 !important;
}

.language-selector .country-item .flag-icon.flag-icon-global {
    -webkit-box-shadow: unset;
    box-shadow: unset;
}


.service-footer-social-nav .nav-item
{
    font-size: 3rem;
}

.nav-link
{
    max-height: none !important;
}

.main-nav
{
    min-height: 55px;
}

#main
{
    margin-top: 55px !important;
}
/* -fix hover with <a hef="" >   for icon-card */
.icon-card-link:hover  {
    text-decoration: none !important;
}
.icon-card-link .icon-card-icon, .icon-card-descr
{
    color: #232323 !important;

}
.icon-card span
{
    width: 100%;
}

.btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled):focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
    /* -webkit-box-shadow: 0 0  0.2rem rgba(0, 0, 0, 0.4);
    box-shadow: 0 0  0.2rem rgba(0, 0, 0, 0.34); */
}

.tooltip-inner {
    max-width: 220px;
    padding: 0.25rem 0.5rem;
    color: #232323;
    text-align: center;
    background-color: #ffffff;
    border-radius: 0.25rem;
    border: 1px solid #aaaaaa;
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
    font-size: 0.75rem
}

    .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before
    {
        border-bottom-color: #898989;
    }

.separated-list .btn  {
    min-width: 2.0rem !important;
    font-size: 0.725rem !important;
}


.protected-content
{
    background-color: #transparent;
    color: #ff6400;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 3px;
    right: 30px;
    font-size: 0.85rem;
    -webkit-border-radius: 1px 1px 1px 1px;
    -moz-border-radius: 1px 1px 1px 1px;
     border-radius: 1px 1px 1px 1px;
}
.protected-content:after
{
    font-family: "kuebler" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    content: "\e913";
    padding-left: 3px;
}

.edit-doc
{
    color: #454545;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 5px;
    right: 3px;
    font-size: 0.8rem;
    -webkit-border-radius: 1px 1px 1px 1px;
    -moz-border-radius: 1px 1px 1px 1px;
     border-radius: 1px 1px 1px 1px;
}



@media (min-width: 1024px) {
    #main {
        min-height: 850px;

    }
}

table td{
    vertical-align: top !important;
 }
.table.documen-list td{
    border-top: none !important;
    border-bottom: none !important;
}
.table.documen-list tr{
    border-bottom: 1px solid #dedede !important;
}
.table.documen-list p {
    color: #000000;
    text-shadow: 0 0 1px rgba(0,0,0,0.05);
}
.table.documen-list small {
    color: #676767 !important;
}
.table.documen-list th
{
    border-bottom: 1px solid transparent !important;
}

.accordion .btn.btn-link span{

    font-weight: 700 !important;
}
.accordion .btn.btn-link.collapsed span{

    font-weight: 300 !important;
}

.opacity-30
{
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

.pointer
{
    cursor: pointer;
}
x-small, .x-small {
    font-size: 0.675rem;
}
a.strg-hashtag
{
    color: #ffffff !important;


    width: 0px;
    height: 0px;
    overflow: visible;
    position: relative;
    top: -10px;
    left: -40px;
    float: left;
    background-color: green !important;
}

a.anchor
{
    position: relative;
    top: -65px;
    left: 35px;
}

.separated-list .no-img .kuebler-icon-link
{
    font-size: 1.8rem;
}

.separated-list .no-img {
    font-size: 2.55rem;
    color: #ff6400;
    background: url('/images/content/downloads/DocDummy_002.jpg');
    background-size: 100% 100%;
}

.separated-list .kuebler-new-button, .download-shelf.kuebler-new-button,
.separated-list .kicon-newbutton, .download-shelf.kicon-newbutton
{
    position: absolute;
    top: -12px;
    left: 3px;
    color: #ff6400;
    font-size: 1.75rem;
    z-index: 99;

}

.product-list .icon-discontinued-001,
.separated-list .icon-discontinued-001
{
    position: absolute;
    top: -5px;
    left: 5px;
    color: #ff6400;
    font-size: 1.75rem;
    z-index: 99;
    height: 30px;
    width: 30px;
    border: 1px solid transparent;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}


.document-teaser .document-teaser-header img,
.document-teaser .document-teaser-header img:hover {
    border: 1px solid #cdcdcd;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    max-height: 172px;
}

.card img.sbx-new-button,
.image-2 img.sbx-new-button,
.image-1 img.sbx-new-button,
.sbx-pic img.sbx-new-button,
.product-list img.new-button,
.prod-details img.new-button
{
    height: 44px;
    width:44px;
    top: 10px;
    left: 10px;
    position: absolute;
    color: #ff6400;
    background-color: transparent !important;
    background: transparent !important;
}

.product-list img.new-button
{
    height: 30px;
    width: 30px;
}
.prod-details img.new-button
{
    height: 65px;
    width: 65px;
}
.document-teaser .new-button
{
    border: 1px solid transparent !important;
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0) !important;
    box-shadow: 0px 0px 0px rgba(0,0,0,0) !important;
    height: 30px;
    width: 30px;
    top: -7px;
    left: -5px;
    position: absolute;
    color: #ff6400;
    background-color: transparent !important;
    background: transparent !important;
}




.document-teaser .document-teaser-footer {

    height: 62px;

}

@font-face {
    /*
    font-family: 'icomoon';
    src: url("../fonts/icomoon/icomoon.eot?iwq3ah");
    src: url("../fonts/icomoon/icomoon.eot?iwq3ah#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?iwq3ah") format("truetype"), url("../fonts/icomoon/icomoon.woff?iwq3ah") format("woff"), url("../fonts/icomoon/icomoon.svg?iwq3ah#icomoon") format("svg");
    font-weight: normal;
    font-style: normal; */
}

.kForm-checkbox > input:checked + .kForm-checkbox-status {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'kuebler' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.kuebler-icon-pdf:before {
    content: "\e800"; }

.kuebler-icon-doc:before,
.kuebler-icon-dotx:before {
    content: "\e801"; }

.kuebler-icon-world:before {
    content: "\e802"; }

.kuebler-icon-xls:before,
.kuebler-icon-xlsx:before {
    content: "\e803"; }

.kuebler-icon-jpg:before {
    content: "\e804"; }

.kuebler-icon-link:before {
    content: "\e805"; }

.kuebler-icon-ppt:before,
.kuebler-icon-pptx:before {
    content: "\e806"; }

.kuebler-icon-calender:before {
    content: "\e807"; }

.kuebler-icon-book-open:before {
    content: "\e808"; }

.kuebler-icon-diploma:before {
    content: "\e809"; }

.kuebler-icon-doc-list:before {
    content: "\e80A"; }

.kuebler-icon-minus:before {
    content: "\e80B";
    color: #ec641c; }

.kuebler-icon-plus:before {
    content: "\e80C";
    color: #ec641c; }

.kuebler-trash:before {
    content: "\e80F";
}

.kuebler-icon-checkbox:before, .kForm-checkbox > input:checked + .kForm-checkbox-status:before {
    content: "\e80D";
    color: #ec641c; }

.kuebler-new-button:before {
    content: "\e833"; }

.product-list .kuebler-new-button,
.product-list .kicon-newbutton
{
    font-size: 1.75rem;
    position: absolute;
    top: 5px;
    left: 15px;
}

.product-list .row:hover
{
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.nav-tabs {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}

.prod-details .nav-tabs .nav-item,
.next-fair-box .nav-tabs .nav-item
{
    margin-right: 25px;
}


.nav-tabs .nav-item
{
    margin-right: 5px;
}

.kuebler-new-button.prod-detail,
.kicon-newbutton.prod-detail
{
    color: #ff6400;
    font-size: 4.0rem;
    position: absolute;
    top: -4px;
    left: 4px;
}

/* caret down at select */
.kForm-select.chosen-container.chosen-container-single.chosen-select a div b::before{
    content: "";
}

.pull-right
{
    float: right;
}

.footer .service-footer .service-footer-social-nav .nav-item
{
    margin-right: unset;

}

.service-footer-social-nav .nav-item
{
    font-size: 2.25rem;
}

.modal-backdrop.show {
    opacity: 0.4;
}

.modal-content
{
    -webkit-box-shadow: 2px 7px 17px rgba(0,0,0,0.45);
    -moz-box-shadow: 2px 7px 17px rgba(0,0,0,0.45);
     box-shadow: 2px 7px 17px rgba(0,0,0,0.45);
}

.separated-list p.subline, .separated-list span.subline {
    font-size: 0.84rem;
}


.header .mobile-overlay .mobile-meta-nav .nav-item .nav-link
{
    color: #fefefe !important;
    font-size: 0.75rem;
    padding: 0.7rem 0.3rem;

}
.header .mobile-overlay .mobile-meta-nav
{
    background: #22313b url("/templates/storch1/images/menu_background.png") no-repeat;
    background-color: #22313b;
    background: #22313b url("/templates/storch1/images/menu_background.png") no-repeat;
    background-color: #22313b;
    padding: 6px 6px 6px 6px;
    background: #22313b url("/templates/storch1/images/menu_background.png") no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: 100%;
    background-position: 100% 100%;
    color: #efefef;

}
.header .mobile-overlay .mobile-meta-nav .flag-icon
{
    -webkit-box-shadow: 0px 0px 4px rgba(135,165,188,1);
    -moz-box-shadow:  0px 0px 4px rgba(135,165,188,1);
     box-shadow:  0px 0px 4px rgba(135,165,188,1);
    margin-top: 4px;
}
.header .mobile-overlay .mobile-meta-nav .flag-icon.flag-icon-global
{
    -webkit-box-shadow: unset !important;
    -moz-box-shadow:  unset !important;
     box-shadow:  unset !important;
}

.language-selector .selected-continent-heading {
    padding-top: 5px;

}
.mobile-overlay.mobile-overlay-language-next .language-selector .scrollable-outer::before
{
    -webkit-box-shadow: 0 0px 25px 20px transparent;
    box-shadow: 0 0px 25px 20px transparent;
    padding-bottom: 100px;
}
.mobile-overlay .language-selector .language-selector-body {
    height: calc(100% - 1px);
    margin-bottom: 85px;
}
.language-selector .scrollable-outer
{
    padding-bottom: 100px;
}







/* Kuebler CheckBox CLASS */
input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label {
    cursor: pointer;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
}

input[type="checkbox"] + label:Hover {
    color: #000000;
}

input[type="checkbox"] + label i {
    display: inline-block;
    font: normal normal normal 17px/1 "kuebler" !important;
    font-family: "kuebler" !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    cursor: pointer;
    font-size: 1.3rem;
    width: 22px;
    margin-left: -1px;
    position: relative;
}
input[type="checkbox"] + label.right i { float: right; }

input[type="checkbox"] + label i:before {
    content: "\e821";
    color: #999999;
}

input[type="checkbox"]:checked + label  {
    color: #ff6400;
}



input[type="checkbox"]:checked + label i:before {
    content: "\e822";
    color: #ff6400;
}




/* Kuebler CheckBox CLASS overwrite for TAG Class*/
input[type="checkbox"].kuebler-tag + label i:before {


    color: #cdcdcd;
}

input[type="checkbox"].kuebler-tag:checked + label i:before {


    color: #343434;
}






.bg-light-fx
{
    background:  url('/images/layout/bg-light-fx.jpg');

    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}






.overlay {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition: background-color  0.4s; /* Safari prior 6.1 */
    transition: background-color  0.4s;
    cursor: pointer;
}
.overlay-body
{
    position: absolute;
    bottom: 0px;
    min-height: 10px;
    max-height: 100% !important;
    width: 100%;
    border: 1px solid transparent;
    padding: 1.25rem;
    overflow: hidden;
}
.overlay-body p
{
    font-size: 1.25rem;
    position: relative;

    top: -250px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition: top 0.4s; /* Safari prior 6.1 */
    transition: top  0.4s;
}
.card:hover .card-body.overlay .overlay-body p
{
    top: 0px;
    text-shadow: 0 1px 3px rgba(0,0,0,1);
}
.card:hover .card-body.overlay
{
    background-color: rgba(0,0,0,0.4);
}

.card:hover .card-body.overlay.light
{
    background-color: rgba(255,255,255,0.8);
    color: #020202 !important;
}

.card:hover .card-body.overlay.light p
{
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
    color: #000000 !important;
}

.contact-item
{
    flex-wrap: unset;
}

.contact-item-logo img {
    width: 100px;
    max-width: 100px;
    height: auto;
}

.contact-item-content-col
{
    padding-right: 15px;
}


a.prod-fav,
.prod-fav .span
{
    color: #232323 !important;
}

a.prod-fav.enabled,
a.prod-fav:hover

{
    color: #ff6400 !important;
}

#content_zone
{
    min-height: 25vh !important;
}

.big-bage-version .card-footer
{
    padding: 0;
}

.force-select
{
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

#system-message-container
{

}

.img-vertical
{
    display: none;
}
 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px)
 {
     .img-vertical
     {
         display: inline-block;
     }
     .img-landscape
     {
         display: none;
     }
 }




/* new visual link hover effect 2024 - arrow bouncing, example: <div class='modern-arrow bounce'></div>  */
.modern-arrow.modern-arrow-bounce:hover
{
    animation: bounce 2s infinite;
}

.modern-arrow
{
    position: relative;
    display: inline-block;
    padding-left: 35px;
    margin-left: 10px;
    height: 20px;
    width: 26px;
    top: 10px;
    border: 1px solid transparent;
    background-image: url("https://www.kuebler.com/images/layout/hero-list-arrow-right.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
@keyframes modern-arrow-bounce {
    0%, 30%, 60%, 100% {
        transform: translatey(0);
    }
    10%, 40% {
        transform: translateX(15px);
    }

}
/* END / new visual link hover effect 2024 - arrow bouncing, example: <div class='modern-arrow bounce'></div>  */
























































