@charset "UTF-8";
.box-shadow-light {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.box-shadow-dark,
.desktop-nav {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.3);
}

.box-shadow-inset,
.sidenav-level-0 ul {
    -webkit-box-shadow: inset 2px 4px 4px -2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 2px 4px 4px -2px rgba(0, 0, 0, 0.3);
}

.box-shadow-sidenav,
.sidenav-wrapper {
    -webkit-box-shadow: 4px 2px 4px -4px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 2px 4px -4px rgba(0, 0, 0, 0.3);
}

.all-news:not(.loading):active,
.box-shadow-button {
    -webkit-box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

@font-face {
    font-family: LinotypeUniversW01-Light;
    src: url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/df87702f-a933-4d3a-b9d9-4ae72506ae9d.eot?#iefix);
    src: url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/df87702f-a933-4d3a-b9d9-4ae72506ae9d.eot?#iefix) format("eot"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/a84a4c95-eec7-4dda-b4f9-eef86c2f79b6.woff2) format("woff2"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/e4ae19e7-c510-4127-837d-8f218498da93.woff) format("woff"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/6fdd43a7-c877-42cb-8a63-d81872f46de8.ttf) format("truetype"), url(http://www.cuno2.de./typo3conf/ext/cuno_settings/Resources/Public/fonts/9da52489-293c-462c-b4c9-1fd1b464c454.svg#9da52489-293c-462c-b4c9-1fd1b464c454) format("svg");
}

@font-face {
    font-family: LinotypeUniversW01-Regular;
    src: url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/c14b251f-80d3-4415-8d21-b2868dea7a9b.eot?#iefix);
    src: url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/c14b251f-80d3-4415-8d21-b2868dea7a9b.eot?#iefix) format("eot"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/9c805799-5196-4294-93d5-2cb1ee50a286.woff2) format("woff2"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/78c7a8d2-8a85-47a5-8c13-049c7b18c9c0.woff) format("woff"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/02e005e1-ac11-49f9-b290-ee01bad12606.ttf) format("truetype"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/c37183cf-3e94-42b3-a71b-75ba616287d7.svg#c37183cf-3e94-42b3-a71b-75ba616287d7) format("svg");
}

@font-face {
    font-family: LinotypeUniversW01-Medium;
    src: url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/48a42ae4-2dae-4819-a76c-c4a39ba76875.eot?#iefix);
    src: url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/48a42ae4-2dae-4819-a76c-c4a39ba76875.eot?#iefix) format("eot"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/194b06cf-7326-4c18-9a5a-937865061822.woff2) format("woff2"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/d7cf6a30-fb6a-4725-9c93-2372d9f4bb8d.woff) format("woff"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/fb6dd99b-78b9-4459-b787-00d3f0fc0c9f.ttf) format("truetype"), url(http://www.cuno2.de/typo3conf/ext/cuno_settings/Resources/Public/fonts/4bed78d0-7a4f-46bf-b802-29f04d1d2e11.svg#4bed78d0-7a4f-46bf-b802-29f04d1d2e11) format("svg");
}

body,
body.content-color-home .content-headline {
    font-family: LinotypeUniversW01-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.content-headline,
b,
strong {
    font-family: LinotypeUniversW01-Regular, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    color: #323232;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.8px;
}

@media (min-width: 769px) {
    body {
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 1px;
    }
}

.content-headline span,
.font-news-date {
    font-size: 16px;
    line-height: 36px;
    letter-spacing: 0.8px;
}

@media (min-width: 769px) {
    .content-headline span,
    .font-news-date {
        font-size: 18px;
        line-height: 38px;
        letter-spacing: 1px;
    }
}

.content-headline,
.font-news-headline {
    color: #323232;
    font-size: 20px;
    line-height: 34px;
    letter-spacing: 0.8px;
}

@media (min-width: 769px) {
    .content-headline,
    .font-news-headline {
        font-size: 24px;
        line-height: 38px;
        letter-spacing: 1px;
    }
}

.content-wrapper .breadcrumb a,
.font-breadcrumb {
    color: #323232 !important;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0.8px;
}

.content-headline body.content-color-home span,
body.content-color-home .content-headline span,
body.content-color-home .font-news-date {
    color: #ffa07a;
}

body.content-color-home .wrapper a,
body.content-color-home footer p a {
    color: #ffa07a;
}

body.content-color-neutral .sidenav-wrapper {
    border-color: #999;
    background: #ccc;
}

body.content-color-neutral .sidenav-level-0>ul {
    background: #eee;
}

body.content-color-neutral .content-headline {
    color: #555;
}

body.content-color-neutral .wrapper a,
body.content-color-neutral footer p a {
    color: #555;
}

body.content-color-1 .sidenav-wrapper {
    border-color: #a5d6e5;
    background: #c5e4ee;
}

body.content-color-1 .sidenav-level-0 a:hover {
    background: #e6f3f7;
}

body.content-color-1 .sidenav-level-0>ul {
    background: #e6f3f7;
}

body.content-color-1 .content-headline {
    color: #96c3d1;
}

body.content-color-1 .wrapper a,
body.content-color-1 footer p a {
    color: #96c3d1;
}

body.content-color-2 .sidenav-wrapper {
    border-color: #91b627;
    background: #b9d075;
}

body.content-color-2 .sidenav-level-0 a:hover {
    background: #e1ebc4;
}

body.content-color-2 .sidenav-level-0>ul {
    background: #e1ebc4;
}

body.content-color-2 .content-headline {
    color: #84a624;
}

body.content-color-2 .wrapper a,
body.content-color-2 footer p a {
    color: #84a624;
}

body.content-color-3 .sidenav-wrapper {
    border-color: #f4d283;
    background: #f8e2b0;
}

body.content-color-3 .sidenav-level-0 a:hover {
    background: #fcf2dd;
}

body.content-color-3 .sidenav-level-0>ul {
    background: #fcf2dd;
}

body.content-color-3 .content-headline {
    color: #debf78;
}

body.content-color-3 .wrapper a,
body.content-color-3 footer p a {
    color: #debf78;
}

body.content-color-4 .sidenav-wrapper {
    border-color: #e88443;
    background: #f0b087;
}

body.content-color-4 .sidenav-level-0 a:hover {
    background: #f8ddcb;
}

body.content-color-4 .sidenav-level-0>ul {
    background: #f8ddcb;
}

body.content-color-4 .content-headline {
    color: #d3783d;
}

body.content-color-4 .wrapper a,
body.content-color-4 footer p a {
    color: #d3783d;
}

body.content-color-5 .sidenav-wrapper {
    border-color: #e5432c;
    background: #ee8778;
}

body.content-color-5 .sidenav-level-0 a:hover {
    background: #f7cbc5;
}

body.content-color-5 .sidenav-level-0>ul {
    background: #f7cbc5;
}

body.content-color-5 .content-headline {
    color: #d13d28;
}

body.content-color-5 .wrapper a,
body.content-color-5 footer p a {
    color: #d13d28;
}

body.content-color-6 .sidenav-wrapper {
    border-color: #e2b8a5;
    background: #ecd1c5;
}

body.content-color-6 .sidenav-level-0 a:hover {
    background: #f7ebe6;
}

body.content-color-6 .sidenav-level-0>ul {
    background: #f7ebe6;
}

body.content-color-6 .content-headline {
    color: #cea896;
}

body.content-color-6 .wrapper a,
body.content-color-6 footer p a {
    color: #cea896;
}

header {
    position: relative;
    margin: 0 auto;
    max-width: 1440px;
    height: 150px;
    padding-top: 20px;
    background: #fff;
}

.logo {
    display: block;
    width: 202px;
    height: 90px;
    background: url(img/cuno-spriteset.png) no-repeat -50px 0;
    background-size: 252px auto;
}

@media (min-width: 769px) {
    .logo {
        width: 232px;
        background-position: -20px 0;
    }
}

@media (min-width: 1024px) {
    .logo {
        width: 252px;
        background-position: 0 0;
    }
}


/*ANFANG Inhalt*/

.news-container {
    background: #fff;
    margin: 2em;
    width: calc((100% - 4em));
}

.news-container .news-text {
    padding: 24px 24px 38px 24px;
}


/*ENDE Inhalt*/

.background-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    display: flex;
    flex-flow: row nowrap;
}

.background-element {
    height: 100%;
    background: red;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

@media (min-width: 769px) {
    .background-element:first-child,
    .background-element:last-child {
        -webkit-flex-basis: 12px;
        flex-basis: 12px;
    }
}

@media (min-width: 1025px) {
    .background-element:first-child,
    .background-element:last-child {
        -webkit-flex-basis: 18px;
        flex-basis: 18px;
    }
}

.background-element-color-1 {
    background: #a5d6e5;
}

.background-element-color-2 {
    background: #91b627;
}

.background-element-color-3 {
    background: #f4d283;
}

.background-element-color-4 {
    background: #e88443;
}

.background-element-color-5 {
    background: #e5432c;
}

.background-element-color-6 {
    background: #e2b8a5;
}

body:not(.content-color-home) .wrapper {
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
}

.content-wrapper {
    flex: 1 1 auto;
    width: 100%;
    -webkit-flex: 1 1 auto;
    padding-bottom: 80px;
    background: #fff;
}

@media (min-width: 1024px) {
    .content-wrapper {
        width: calc(100% - ((100% + 30px) / 4));
    }
}

.content-wrapper .image-text-width,
.content-wrapper .video-container,
.content-wrapper p {
    margin-top: 28px;
}

@media (min-width: 1024px) {
    .content-wrapper .image-text-width,
    .content-wrapper .video-container,
    .content-wrapper p {
        margin-top: 30px;
    }
}

.content-headline {
    margin-top: 56px;
}

@media (min-width: 1024px) {
    .content-headline {
        margin-top: 76px;
    }
}

.content-headline:first-child {
    margin-top: 6px;
}

.content-headline span {
    margin-left: 24px;
    float: right;
}

header .search-box p {
    display: none;
}

.content-color-neutral .content-wrapper .tx-indexedsearch-browsebox p {
    margin-top: 30px;
}

.content-color-neutral .content-wrapper .tx-indexedsearch-searchbox {
    display: none;
}

.content-color-neutral .content-wrapper .tx-indexedsearch-res p {
    margin-top: 0;
}


/*ANFANG Footer*/

footer {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 18px 60px 18px;
    -webkit-box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.5);
    background: #fff;
}

@media (min-width: 769px) {
    footer {
        padding: 32px 24px;
    }
}

@media (min-width: 1024px) {
    footer {
        padding: 0 30px 32px 30px;
    }
}

footer p {
    margin-top: 26px;
    float: left;
    clear: both;
}

@media (min-width: 481px) {
    footer p {
        clear: none;
        margin-right: 48px;
    }
}

@media (min-width: 1024px) {
    footer p {
        margin-top: 50px;
    }
}

footer ul {
    list-style-type: none;
    float: left;
    clear: both;
    margin-top: 40px;
}

@media (min-width: 481px) {
    footer ul {
        margin-top: 0;
    }
}

@media (min-width: 1281px) {
    footer ul {
        float: right;
        clear: none;
    }
}

footer ul li {
    margin-top: 20px;
}

@media (min-width: 481px) {
    footer ul li {
        float: left;
        margin-top: 30px;
        margin-left: 48px;
    }
}

@media (min-width: 1281px) {
    footer ul li {
        margin-top: 180px;
    }
}

footer ul li:first-child {
    margin-left: 0;
}

footer ul li a {
    color: #323232;
    text-decoration: none;
}

footer ul li a:hover {
    text-decoration: underline;
}


/*ENDE Footer*/


/*ANFANG EU-Logo*/

.eu-school {
    width: 106px;
    height: 66px;
    margin-top: 60px;
    clear: both;
    background: url(img/cuno-spriteset.png) no-repeat 0 -90px;
}

@media (min-width: 481px) {
    .eu-school {
        clear: left;
    }
}

@media (min-width: 1024px) {
    .eu-school {
        margin-top: 50px;
        clear: none;
    }
}


/*ENDE EU-Logo*/


/*ANFANG Hagener Berufskollegs*/

.hagen-school {
    margin-top: 26px;
    width: 118px;
    height: 38px;
    clear: both;
    background: url(img/cuno-spriteset.png) no-repeat -106px -90px;
}

@media (min-width: 481px) {
    .hagen-school {
        margin-top: 88px;
        clear: none;
    }
}

@media (min-width: 1024px) {
    .hagen-school {
        margin-top: 60px;
    }
}


/*ENDE Hagener Berufskolleg*/

.footer-logo {
    float: left;
    margin-right: 48px;
    background-size: 252px auto;
}

* {
    text-rendering: geometricPrecision;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

body {
    -webkit-text-size-adjust: 100%;
    background: #f5f5f5;
}

body,
p,
ul {
    margin: 0;
    padding: 0;
}

img,
video {
    vertical-align: bottom;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 400;
}

a {
    color: #000;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

img {
    width: 100%;
}

.wrapper {
    position: relative;
    max-width: 1440px;
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}

.info-wrapper {
    padding: 0 6px 120px 6px;
}

@media (min-width: 769px) {
    .info-wrapper {
        padding: 0 12px 120px 12px;
    }
}

@media (min-width: 1025px) {
    .info-wrapper {
        padding: 0 18px 120px 18px;
    }
}

.clearfix::after {
    display: block;
    height: 0;
    clear: both;
    font-size: 0;
    content: " ";
    visibility: hidden;
}


/*ANFANG Infoboxen*/

@media screen and (min-width: 1024px) {
    .infoboxen {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
    }
}

.infobox {
    display: flex;
    flex-flow: column;
    text-align: center;
    background-color: whitesmoke;
    padding: 1rem;
    margin: 1rem 0;
}

.infobox img {
    height: 4rem;
    width: auto;
}


/*ENDE Infoboxen */


/*ANFANG Formulargestaltung*/

form>div {
    display: flex;
    flex-flow: wrap;
    margin-bottom: 1em;
}

label {
    display: block;
    cursor: pointer;
    flex: 0 0 7rem;
}

.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular input[type="tel"] {
    flex: 1;
    font-size: inherit;
    font-family: inherit;
    width: 16rem;
    padding: 0.25rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
}


/*Checkbox*/

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    font-size: 1em;
    width: 100%
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked) {
    background: transparent;
    position: relative;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

input[type='checkbox']:checked+label::before,
input[type='checkbox']:not(:checked)+label::before {
    content: ' ';
    display: inline-block;
    width: 17px;
    height: 17px;
    position: relative;
    top: 4px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, .1);
}

input[type='checkbox']:hover+label::before {
    background: #ddd;
    box-shadow: inset 0 0 0 2px white;
}

input[type='checkbox']:checked+label::before {
    background: black;
    box-shadow: inset 0 0 0 2px white;
}


/*ENDE Checkbox*/

.vorinfos {
    display: inline-block;
    margin: 1rem 0;
}


/*ANFANG Select*/

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    width: 100%;
}


/* styling */

select {
    width: 16rem;
    border: 1px solid #bbb;
    padding: .75em 1em .5em 1em;
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    background-color: white;
}

select:hover {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}


/*ENDE Select*/

.terminbox p {
    margin-top: 1rem;
}

.terminbox h4,
section>h4 {
    font-weight: 800;
    margin-top: 1rem;
}

.terminbox {
    text-align: left;
    background-color: whitesmoke;
    padding: 0 1rem 1rem 1rem;
    margin: 1rem 0;
    border: 1px solid rgba(0, 0, 0, .1);
}

.kontaktformular button {
    flex: 1;
    font-size: inherit;
    font-family: inherit;
    letter-spacing: 1px;
    cursor: pointer;
    background: #0b74b8;
    color: white;
    margin-top: 2rem;
    padding: 1rem;
    border: none;
    border-radius: 0.25rem;
}

.kontaktformular button:hover,
.kontaktformular button:focus {
    background: #f5662e;
}

.kontaktformular button:active {
    background: #d90000;
}