@charset "UTF-8";

@font-face {
    font-family: "Oswald ExtraLight";
    src: url("../fonts/Oswald/Oswald-ExtraLight.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Raleway";
    src: url("../fonts/Raleway/Raleway-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Raleway Light";
    src: url("../fonts/Raleway/Raleway-Light.ttf") format("truetype");
    font-display: swap;
}

/* ----- ANFANG: ALLGEMEINE STYLES ----- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a {
    text-decoration: none;
    outline: none;
    transition: color 0.3s ease-in-out;
}

body {
    font-family: "Oswald ExtraLight", "SansSerif", sans-serif;
    color: #000000;
    -webkit-text-size-adjust: none;
}

a:link,
a:visited {
    color: #000000;
}

a:focus,
a:hover,
a:active {
    color: #FF030B;
}

a#header-item-geld-zurueck-versprechen:link,
a#header-item-geld-zurueck-versprechen:visited {
    border: 1px solid #000000;
    transition: color 0.3s ease-in-out, border 0.3s ease-in-out;
}

a#header-item-geld-zurueck-versprechen:focus,
a#header-item-geld-zurueck-versprechen:hover,
a#header-item-geld-zurueck-versprechen:active {
    border: 1px solid #FF030B;
    transition: color 0.3s ease-in-out, border 0.3s ease-in-out;
}

h1,
h2,
h3 {
    font-weight: normal;
}

.link-berufe:after {
    content: "";
    display: block;
    position: absolute;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    border: 2px solid #000000;
}

.link-berufe-active:after {
    background: #000000;
    border: 2px solid #000000;
}

a.link-berufe:after {
    transition: all 0.3s ease-in-out;
}

a.link-berufe:hover:after {
    background: #FF030B;
    border: 2px solid #FF030B;
}

.nummer-berufe:after {
    font-family: "Raleway", "SansSerif", sans-serif;
    text-align: center;
    font-size: 1em;
    display: block;
    position: absolute;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    border: 2px solid transparent;
}

a.button {
    display: block;
    font-family: "Raleway", "SansSerif", sans-serif;
    font-size: 1rem;
    text-align: center;
    width: 9rem;
    padding: 0.7rem 0 0.7rem 0;
    transition: background 0.3s ease-in-out;
}

a.button:link,
a.button:visited,
a.button:focus {
    color: #FFFFFF;
    background: #000000;
}

a.button:hover {
    color: #FFFFFF;
    background: #FF030B;
}

a.button:active {
    color: #FFFFFF;
    background: #000000;
}

@media (min-width: 1000px) {

    .link-berufe:after {
        width: 1em;
        height: 1em;
    }

    .nummer-berufe:after {
        width: 1em;
        height: 1em;
    }
}

/* ----- ENDE: ALLGEMEINE STYLES ----- */

/* ----- ANFANG: HEADER UND FOOTER ----- */

.header {
    position: absolute;
    top: 0;
    margin-top: 5vh;
    right: 0;
}

.header-footer-item {
    font-family: "Raleway Light", "SansSerif", sans-serif;
    font-size: 1em;
}

.header-item {
    display: block;
    list-style: none;
    right: 10vw;
}

.header a.header-item:first-of-type {
    margin-right: 9em;
}

.header a.header-item:nth-of-type(2) {
    margin-right: 6em;
}

.header a.header-item:nth-of-type(3) {
    margin-right: 3em;
}

.footer-item {
    margin-left: 3em;
    float: left;
}

.logo {
    width: 90px;
    height: 90px;
    margin-top: 5vh;
    margin-left: 5vw;
}

@media (min-width: 500px) {

    .header-item {
        right: 8.5vw;
    }

    .header a.header-item:first-of-type {
        margin-right: 10.5em;
    }

    .header a.header-item:nth-of-type(2) {
        margin-right: 7em;
    }

    .header a.header-item:nth-of-type(3) {
        margin-right: 3.5em;
    }
}

@media (min-width: 700px) {

    .header-item {
        right: 10vw;
    }
}

@media (min-width: 800px) {

    .header {
        margin-top: calc(5vh + 2.3em);
    }

    .header-item {
        display: inline-block;
        position: relative;
        transform: none;
        margin-left: 3em;
        right: 5vw;
    }

    .header a.header-item:first-of-type {
        margin-right: 0;
    }

    .header a.header-item:nth-of-type(2) {
        margin-right: 0;
    }

    .header a.header-item:nth-of-type(3) {
        margin-right: 0;
    }

    .header a.header-item:nth-of-type(4) {
        margin-right: 3.5rem;
    }

    #header-item-geld-zurueck-versprechen {
        position: absolute;
        margin-top: calc(-5vh - 2.3em);
        padding: 0.5rem 1.5rem 0.5rem 1.5rem;
        transform: rotateZ(-90deg);
        transform-origin: right top;
    }

    .logo {
        width: 100px;
        height: 100px;
    }
}

@media (min-width: 1000px) {

    .header-footer-item {
        font-size: 1.1em;
    }
}

.footer {
    position: absolute;
    right: 0;
    margin-right: 7.5vw;
    margin-top: 10vh;
    padding-bottom: 10vh;
}

@media (min-width: 700px) {

    .footer {
        margin-right: 10vw;
    }
}

/* ----- ENDE: HEADER UND FOOTER ----- */

/* ----- ANFANG: TEXT / NOTIZ / DETAILS ----- */

.text {
    position: relative;
    font-size: 1.9em;
    line-height: 1.2em;
}

@media (min-width: 350px) {

    .text {
        font-size: 2em;
    }
}

@media (min-width: 450px) {

    .text {
        font-size: 2.5em;
    }
}

@media (min-width: 600px) {

    .text {
        font-size: 2.8em;
    }
}

@media (min-width: 700px) {

    .text {
        font-size: 2.2em;
    }
}

@media (min-width: 800px) {

    .text {
        font-size: 2.5em;
    }
}

@media (min-width: 900px) {

    .text {
        font-size: 2.7em;
    }
}

@media (min-width: 1000px) {

    .text {
        font-size: 3em;
    }
}

@media (min-width: 1200px) {

    .text {
        font-size: 3.5em;
    }
}

@media (min-width: 1400px) {

    .text {
        font-size: 4.2em;
    }
}

.notiz {
    font-family: "Raleway", "SansSerif", sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
}

@media (min-width: 400px) {

    .notiz {
        font-size: 1em;
    }
}

@media (min-width: 1000px) {

    .notiz {
        font-size: 1.1em;
    }
}

@media (min-width: 1400px) {

    .notiz {
        font-size: 1.2em;
    }
}

.details {
    font-family: "Raleway Light", "SansSerif", sans-serif;
    font-size: 0.9em;
    line-height: 1.6em;
}

@media (min-width: 450px) {

    .details {
        font-size: 1em;
        line-height: 1.7em;
    }
}

@media (min-width: 600px) {

    .details {
        font-size: 1.2em;
        line-height: 1.8em;
    }
}

/* ----- ENDE: TEXT / NOTIZ / DETAILS ----- */

/* ----- ANFANG: STUDIO ----- */

#studio {
    margin-top: 2.5vh;
}

#studio h1 {
    margin-left: 17.5vw;
    padding-top: 0.7em;
    font-size: 2.2em;
    line-height: 1.2em;
}

@media (min-width: 350px) {

    #studio h1 {
        font-size: 2.5em;
    }
}

@media (min-width: 450px) {

    #studio h1 {
        font-size: 2.8em;
    }
}

@media (min-width: 600px) {

    #studio h1 {
        font-size: 3em;
    }
}

@media (min-width: 700px) {

    #studio h1 {
        margin-left: 20vw;
        font-size: 3.2em;
    }
}

@media (min-width: 800px) {

    #studio h1 {
        font-size: 3.5em;
    }
}

@media (min-width: 1000px) {

    #studio h1 {
        font-size: 4em;
    }
}

@media (min-width: 1200px) {

    #studio h1 {
        font-size: 4.6em;
    }
}

@media (min-width: 1400px) {

    #studio h1 {
        font-size: 5em;
    }
}

#beruf-1  {
    height: 105vw;
    width: 75vw;
    margin-left: 17.5vw;
    background-image: url("../img/beruf-1_S.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
}

#studio .link-berufe:after {
    right: 7.5vw;
    margin-top: calc(-105vw - 2.5em);
}

#studio .link-beruf-1:after {
    margin-right: 8.5em;
}

#studio .link-beruf-2:after {
    margin-right: 6.8em;
}

#studio .link-beruf-3:after {
    margin-right: 5.1em;
}

#studio .link-beruf-4:after {
    margin-right: 3.4em;
}

#studio .link-beruf-5:after {
    margin-right: 1.7em;
}

#studio .nummer-berufe:after {
    content: "01";
    right: 7.5vw;
    margin-left: 8.5em;
    margin-top: calc(-105vw - 2.7em);
}

#studio-notiz {
    width: 18em;
    text-align: left;
    position: absolute;
    left: calc(8.75vw - 0.5em);
    transform: rotate(-90deg);
    transform-origin: left top;
}

@media (orientation: portrait) {

    #beruf-1  {
        margin-top: 15vh;
    }
}

@media (orientation: portrait) and (min-width: 700px) {

    #beruf-1  {
        margin-top: 5vh;
    }
}

@media (orientation: landscape) {

    #beruf-1  {
        margin-top: 40vh;
    }
}

@media (orientation: landscape) and (min-width: 700px) {

    #beruf-1  {
        margin-top: 10vh;
    }
}

@media (min-width: 400px) {

    #studio .link-berufe:after {
        margin-top: calc(-105vw - 3.2em);
    }

    #studio .nummer-berufe:after {
        margin-top: calc(-105vw - 3.4em);
    }
}

@media (min-width: 500px) {

    #studio .link-berufe:after {
        margin-top: calc(-105vw - 3.7em);
    }

    #studio .nummer-berufe:after {
        margin-top: calc(-105vw - 3.9em);
    }
}

@media (min-width: 640px) {

    #beruf-1 {
        background-image: url("../img/beruf-1_L.jpg");
    }
}

@media (min-width: 700px) {

    #beruf-1 {
        height: 43vw;
        width: 70vw;
        margin-left: 20vw;
    }

    #studio .link-berufe:after {
        right: 5vw;
        margin-right: 0;
    }

    #studio .link-beruf-1:after {
        margin-top: calc(-43vw - 0.2em);
    }

    #studio .link-beruf-2:after {
        margin-top: calc(-43vw + 1.8em);
    }

    #studio .link-beruf-3:after {
        margin-top: calc(-43vw + 3.8em);
    }

    #studio .link-beruf-4:after {
        margin-top: calc(-43vw + 5.8em);
    }

    #studio .link-beruf-5:after {
        margin-top: calc(-43vw + 7.8em);
    }

    #studio .nummer-berufe:after {
        right: 5vw;
        left: auto;
        margin-top: calc(-43vw + 9.8em);
    }

    #studio-notiz {
        position: relative;
        left: 0;
        margin-top: 2em;
        margin-left: 20vw;
        margin-right: auto;
        margin-bottom: 2.2em;
        transform: none;
    }
}

/* ----- ENDE: STUDIO ----- */

/* ----- ANFANG: BETRIEB ----- */

#betrieb {
    padding-top: 15vh;
}

#beruf-2  {
    height: 105vw;
    width: 75vw;
    margin-left: 7.5vw;
    background-image: url("../img/beruf-2_S.jpg");
    background-size: cover;
    position: relative;
}

#betrieb .link-berufe:after {
    left: 7.5vw;
    margin-top: calc(-105vw - 2.5em);
}

#betrieb .link-beruf-2:after {
    margin-left: 1.7em;
}

#betrieb .link-beruf-3:after {
    margin-left: 3.4em;
}

#betrieb .link-beruf-4:after {
    margin-left: 5.1em;
}

#betrieb .link-beruf-5:after {
    margin-left: 6.8em;
}

#betrieb .nummer-berufe:after {
    content: "02";
    left: 7.5vw;
    margin-left: 8.5em;
    margin-top: calc(-105vw - 2.7em);
}

#betrieb-notiz {
    width: 18em;
    text-align: right;
    position: absolute;
    left: calc(91.25vw - 0.5em);
    margin-top: calc(-105vw + 18em);
    transform: rotate(-90deg);
    transform-origin: left top;
}

#betrieb .text {
    position: relative;
    text-align: right;
    margin-right: 7.5vw;
    margin-top: 7.5vh;
}

@media (orientation: portrait) {

    #betrieb  {
        margin-top: 15vh;
    }
}

@media (orientation: portrait) and (min-width: 700px) {

    #betrieb  {
        margin-top: 7.5vh;
    }
}

@media (orientation: landscape) {

    #betrieb  {
        margin-top: 50vh;
    }
}

@media (orientation: landscape) and (min-width: 700px) {

    #betrieb  {
        margin-top: 20vh;
    }
}

@media (min-width: 400px) {

    #betrieb .link-berufe:after {
        margin-top: calc(-105vw - 3.2em);
    }

    #betrieb .nummer-berufe:after {
        margin-top: calc(-105vw - 3.4em);
    }

    #betrieb-notiz {
        margin-top: calc(-105vw + 18em);
    }
}

@media (min-width: 500px) {

    #betrieb .link-berufe:after {
        margin-top: calc(-105vw - 3.7em);
    }

    #betrieb .nummer-berufe:after {
        margin-top: calc(-105vw - 3.9em);
    }
}

@media (min-width: 640px) {

    #beruf-2 {
        background-image: url("../img/beruf-2_L.jpg");
    }
}

@media (min-width: 700px) {

    #beruf-2  {
        height: 55vw;
        width: 40vw;
    }

    #betrieb-notiz {
        left: calc(47.5vw + 2em);
        margin-top: calc(-55vw + 18em);
    }

    #betrieb .link-berufe:after {
        margin-top: calc(-55vw - 3.3em);
    }

    #betrieb .nummer-berufe:after {
        margin-top: calc(-55vw - 3.5em);
    }

    #betrieb .text {
        text-align: right;
        margin-right: 7.5vw;
        margin-top: -12vw;
    }
}

@media (min-width: 1000px) {

    #betrieb .link-berufe:after {
        margin-top: calc(-55vw - 3.6em);
    }

    #betrieb .link-beruf-2:after {
        margin-left: 1.9em;
    }

    #betrieb .link-beruf-3:after {
        margin-left: 3.8em;
    }

    #betrieb .link-beruf-4:after {
        margin-left: 5.7em;
    }

    #betrieb .link-beruf-5:after {
        margin-left: 7.6em;
    }

    #betrieb .nummer-berufe:after {
        margin-top: calc(-55vw - 3.7em);
        margin-left: 9.5em;
    }
}

/* ----- ENDE: BETRIEB ----- */

/* ----- ANFANG: WEBSITE ----- */

#website .text {
    margin-left: 7.5vw;
}

@media (orientation: portrait) {

    #website .text  {
        margin-top: 10vh;
    }
}

@media (orientation: portrait) and (min-width: 700px) {

    #website .text  {
        margin-top: 5vh;
    }
}

@media (orientation: landscape) {

    #website .text  {
        margin-top: 25vh;
    }
}

@media (orientation: landscape) and (min-width: 700px) {

    #website .text  {
        margin-top: 10vh;
    }
}

/* ----- ENDE: WEBSITE ----- */

/* ----- ANFANG: UNSERE DIENSTLEISTUNG ----- */

#unsere-dienstleistung {
    padding-top: 15vh;
}

#beruf-3  {
    height: 105vw;
    width: 75vw;
    margin-left: 17.5vw;
    background-image: url("../img/beruf-3_S.jpg");
    background-size: cover;
    position: relative;
}

#unsere-dienstleistung .link-berufe:after {
    left: 7.5vw;
}

#unsere-dienstleistung .link-beruf-1:after {
    margin-top: calc(-105vw);
}

#unsere-dienstleistung .link-beruf-2:after {
    margin-top: calc(-105vw + 1.7em);
}

#unsere-dienstleistung .link-beruf-3:after {
    margin-top: calc(-105vw + 3.4em);
}

#unsere-dienstleistung .link-beruf-4:after {
    margin-top: calc(-105vw + 5.1em);
}

#unsere-dienstleistung .link-beruf-5:after {
    margin-top: calc(-105vw + 6.8em);
}

#unsere-dienstleistung .nummer-berufe:after {
    content: "03";
    left: 7.5vw;
    margin-top: calc(-105vw + 8.5em);
}

#unsere-dienstleistung-notiz {
    text-align: right;
    margin-right: 7.5vw;
    margin-bottom: 1.6em;
}

#unsere-dienstleistung #link-referenzen {
    font-family: "Raleway", "SansSerif", sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-left: 17.5vw;
    margin-top: 5em;
}

#unsere-dienstleistung .text {
    margin-left: 17.5vw;
    margin-top: 0.5em;
}

#unsere-dienstleistung .details {
    margin-left: 17.5vw;
    margin-right: 7.5vw;
    margin-top: 1.5em;
}

@media (orientation: portrait) {

    #unsere-dienstleistung  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 700px) {

    #unsere-dienstleistung  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #unsere-dienstleistung  {
        margin-top: 40vh;
    }
}

@media (orientation: landscape) and (min-width: 700px) {

    #unsere-dienstleistung  {
        margin-top: 15vh;
    }
}

@media (min-width: 400px) {

    #unsere-dienstleistung-notiz {
        margin-bottom: 2em;
    }

    #unsere-dienstleistung #link-referenzen {
        font-size: 1em;
    }
}

@media (min-width: 500px) {

    #unsere-dienstleistung-notiz {
        margin-bottom: 2.5em;
    }
}

@media (min-width: 640px) {

    #beruf-3 {
        background-image: url("../img/beruf-3_L.jpg");
    }
}

@media (min-width: 700px) {

    #beruf-3  {
        height: 43vw;
        width: 60vw;
        margin-left: 30vw;
    }

    #unsere-dienstleistung .link-berufe:after {
        right: 5vw;
        left: auto;
    }

    #unsere-dienstleistung .link-beruf-1:after {
        margin-top: calc(-43vw - 0.2em);
    }

    #unsere-dienstleistung .link-beruf-2:after {
        margin-top: calc(-43vw + 1.8em);
    }

    #unsere-dienstleistung .link-beruf-3:after {
        margin-top: calc(-43vw + 3.8em);
    }

    #unsere-dienstleistung .link-beruf-4:after {
        margin-top: calc(-43vw + 5.8em);
    }

    #unsere-dienstleistung .link-beruf-5:after {
        margin-top: calc(-43vw + 7.8em);
    }

    #unsere-dienstleistung .nummer-berufe:after {
        content: "03";
        right: 5vw;
        left: auto;
        margin-top: calc(-43vw + 9.8em);
    }

    #unsere-dienstleistung-notiz {
        text-align: left;
        margin-left: 30vw;
        margin-right: auto;
        margin-bottom: 2.2em;
    }

    #unsere-dienstleistung #link-referenzen {
        margin-left: 30vw;
        margin-top: 5em;
    }

    #unsere-dienstleistung .text {
        width: 8.6em;
        margin-left: 30vw;
    }

    #unsere-dienstleistung .details {
        margin-left: 30vw;
    }
}

@media (min-width: 1000px) {

    #unsere-dienstleistung #link-referenzen {
        font-size: 1.1em;
    }
}

@media (min-width: 1200px) {

    #unsere-dienstleistung .details {
        width: 35em;
        margin-right: 0;
    }
}

@media (min-width: 1400px) {

    #unsere-dienstleistung #link-referenzen {
        font-size: 1.2em;
    }
}

/* ----- ENDE: UNSERE DIENSTLEISTUNG ----- */

/* ----- ANFANG: KONTAKT ----- */

#kontakt {
    padding-top: 15vh;
}

#beruf-4  {
    height: 105vw;
    width: 75vw;
    margin-left: 7.5vw;
    background-image: url("../img/beruf-4_S.jpg");
    background-size: cover;
}

#kontakt .link-berufe:after {
    left: 7.5vw;
    margin-top: calc(-105vw - 2.5em);
}

#kontakt .link-beruf-2:after {
    margin-left: 1.7em;
}

#kontakt .link-beruf-3:after {
    margin-left: 3.4em;
}

#kontakt .link-beruf-4:after {
    margin-left: 5.1em;
}

#kontakt .link-beruf-5:after {
    margin-left: 6.8em;
}

#kontakt .nummer-berufe:after {
    content: "04";
    left: 7.5vw;
    margin-left: 8.5em;
    margin-top: calc(-105vw - 2.7em);
}

#kontakt-notiz {
    width: 19em;
    text-align: right;
    position: absolute;
    left: calc(91.25vw - 0.5em);
    margin-top: calc(-105vw + 19em);
    transform: rotate(-90deg);
    transform-origin: left top;
}

#kontakt #link-kontakt {
    font-family: "Raleway", "SansSerif", sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-left: 7.5vw;
    margin-top: 5em;
}

#kontakt .text {
    margin-left: 7.5vw;
    margin-top: 0.5em;
}

#kontakt .details {
    width: 75vw;
    margin-left: 7.5vw;
    margin-right: 10vw;
    margin-top: 1.5em;
}

@media (orientation: portrait) {

    #kontakt  {
        margin-top: 10vh;
    }
}

@media (orientation: portrait) and (min-width: 700px) {

    #kontakt  {
        margin-top: 5vh;
    }
}

@media (orientation: landscape) {

    #kontakt  {
        margin-top: 40vh;
    }
}

@media (orientation: landscape) and (min-width: 700px) {

    #kontakt  {
        margin-top: 20vh;
    }
}

@media (min-width: 400px) {

    #kontakt .link-berufe:after {
        margin-top: calc(-105vw - 3.2em);
    }

    #kontakt .nummer-berufe:after {
        margin-top: calc(-105vw - 3.4em);
    }

    #kontakt-notiz {
        margin-top: calc(-105vw + 19em);
    }

    #kontakt #link-kontakt {
        font-size: 1em;
    }
}

@media (min-width: 500px) {

    #kontakt .link-berufe:after {
        margin-top: calc(-105vw - 3.7em);
    }

    #kontakt .nummer-berufe:after {
        margin-top: calc(-105vw - 3.9em);
    }

    #kontakt .details {
        width: 20em;
    }
}

@media (min-width: 640px) {

    #beruf-4 {
        background-image: url("../img/beruf-4_L.jpg");
    }
}

@media (min-width: 700px) {

    #beruf-4  {
        height: 55vw;
        width: 40vw;
    }

    #kontakt .link-berufe:after {
        margin-top: calc(-55vw - 3.3em);
    }

    #kontakt .nummer-berufe:after {
        margin-top: calc(-55vw - 3.5em);
    }

    #kontakt-notiz {
        left: calc(47.5vw + 2em);
        margin-top: calc(-55vw + 19em);
    }

    #kontakt #link-kontakt {
        text-align: right;
        margin-right: 7.5vw;
        margin-top: -5vh;
    }

    #kontakt .text {
        text-align: right;
        margin-right: 7.5vw;
    }

    #kontakt .details {
        text-align: right;
        margin-left: calc(92.5vw - 20em);
        margin-top: 1.5em;
    }
}

@media (min-width: 800px) {

    #kontakt #link-kontakt {
        margin-top: -10vh;
    }
}

@media (min-width: 1000px) {

    #kontakt .link-berufe:after {
        margin-top: calc(-55vw - 3.6em);
    }

    #kontakt .link-beruf-2:after {
        margin-left: 1.9em;
    }

    #kontakt .link-beruf-3:after {
        margin-left: 3.8em;
    }

    #kontakt .link-beruf-4:after {
        margin-left: 5.7em;
    }

    #kontakt .link-beruf-5:after {
        margin-left: 7.6em;
    }

    #kontakt .nummer-berufe:after {
        margin-top: calc(-55vw - 3.7em);
        margin-left: 9.5em;
    }

    #kontakt #link-kontakt {
        font-size: 1.1em;
        margin-top: -15vh;
    }
}

@media (min-width: 1200px) {

    #kontakt #link-kontakt {
        margin-top: -20vh;
    }
}

@media (min-width: 1400px) {

    #kontakt #link-kontakt {
        font-size: 1.2em;
        margin-top: -25vh;
    }
}

#kontakt #kontakt-daten {
    font-family: "Raleway", "SansSerif", sans-serif;
    text-transform: uppercase;
    text-align: right;
    font-size: 0.9em;
    margin-right: 7.5vw;
    padding-top: 10vh;
}

#kontakt #kontakt-daten-details {
    text-align: right;
    margin-right: 7.5vw;
}


@media (orientation: portrait) {

    #kontakt #kontakt-daten  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 700px) {

    #kontakt #kontakt-daten  {
        margin-top: 0;
    }
}

@media (orientation: landscape) {

    #kontakt #kontakt-daten  {
        margin-top: 15vh;
    }
}

@media (orientation: landscape) and (min-width: 700px) {

    #kontakt #kontakt-daten  {
        margin-top: 5vh;
    }
}

@media (min-width: 400px) {

    #kontakt #kontakt-daten {
        font-size: 1em;
    }
}

@media (min-width: 700px) {

    #kontakt #kontakt-daten {
        text-align: left;
        margin-left: 7.5vw;
    }

    #kontakt #kontakt-daten-details {
        text-align: left;
        margin-left: 7.5vw;
    }
}

@media (min-width: 1000px) {

    #kontakt #kontakt-daten {
        font-size: 1.1em;
    }
}

@media (min-width: 1400px) {

    #kontakt #kontakt-daten {
        font-size: 1.2em;
    }
}

/* ----- ENDE: KONTAKT ----- */

/* ----- ANFANG: ABSCHLUSS ----- */

#abschluss {
    padding-top: 15vh;
}

#beruf-5  {
    height: 105vw;
    width: 75vw;
    margin-left: 17.5vw;
    background-image: url("../img/beruf-5_S.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
}

#abschluss .link-berufe:after {
    left: 17.5vw;
    margin-top: calc(-105vw - 2.5em);
}

#abschluss .link-beruf-2:after {
    margin-left: 1.7em;
}

#abschluss .link-beruf-3:after {
    margin-left: 3.4em;
}

#abschluss .link-beruf-4:after {
    margin-left: 5.1em;
}

#abschluss .link-beruf-5:after {
    margin-left: 6.8em;
}

#abschluss .nummer-berufe:after {
    content: "05";
    left: 17.5vw;
    margin-left: 8.5em;
    margin-top: calc(-105vw - 2.7em);
}

#abschluss-notiz {
    width: 18em;
    text-align: left;
    position: absolute;
    left: calc(8.75vw - 0.5em);
    margin-top: 105vw;
    transform: rotate(-90deg);
    transform-origin: left top;
}

@media (orientation: portrait) {

    #abschluss  {
        margin-top: 12.5vh;
    }
}

@media (orientation: portrait) and (min-width: 700px) {

    #abschluss  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #abschluss  {
        margin-top: 40vh;
    }
}

@media (orientation: landscape) and (min-width: 700px) {

    #abschluss  {
        margin-top: 15vh;
    }
}

@media (min-width: 400px) {

    #abschluss .link-berufe:after {
        margin-top: calc(-105vw - 3.2em);
    }

    #abschluss .nummer-berufe:after {
        margin-top: calc(-105vw - 3.4em);
    }
}

@media (min-width: 500px) {

    #abschluss .link-berufe:after {
        margin-top: calc(-105vw - 3.7em);
    }

    #abschluss .nummer-berufe:after {
        margin-top: calc(-105vw - 3.9em);
    }
}

@media (min-width: 640px) {

    #beruf-5 {
        background-image: url("../img/beruf-5_L.jpg");
    }
}

@media (min-width: 700px) {

    #beruf-5 {
        height: 43vw;
        width: 60vw;
        margin-left: 30vw;
    }

    #abschluss .link-berufe:after {
        right: 5vw;
        left: auto;
    }

    #abschluss .link-beruf-1:after {
        margin-top: calc(-43vw - 0.2em);
    }

    #abschluss .link-beruf-2:after {
        margin-top: calc(-43vw + 1.8em);
    }

    #abschluss .link-beruf-3:after {
        margin-top: calc(-43vw + 3.8em);
    }

    #abschluss .link-beruf-4:after {
        margin-top: calc(-43vw + 5.8em);
    }

    #abschluss .link-beruf-5:after {
        margin-top: calc(-43vw + 7.8em);
    }

    #abschluss .nummer-berufe:after {
        right: 5vw;
        left: auto;
        margin-top: calc(-43vw + 9.8em);
    }

    #abschluss-notiz {
        position: relative;
        left: 0;
        margin-top: 0;
        margin-left: 30vw;
        margin-right: auto;
        margin-bottom: 2.2em;
        transform: none;
    }
}

/* ----- ENDE: ABSCHLUSS ----- */

.statement {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

.statement h1 {
    font-size: 48px;
    text-align: center;
}

.statement p {
    font-size: 24px;
    text-align: center;
}

.statement a {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
}

@media (min-width: 1024px) {
    .statement {
        max-width: 50vw;
    }
}

@media (min-height: 768px) {
    .statement {
        margin-top: 10rem;
    }

    .statement a {
        margin-top: 5rem;
    }
}

/* region 404 */

#p404 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
    width: 90vw;
    max-width: 960px;
    text-align: center;
}

#p404 h1 {
    font-size: 2.2em;
    line-height: 1.2em;
}

#p404 p {
    margin-top: 5rem;
}

@media (min-width: 350px) {

    #p404 h1 {
        font-size: 2.5em;
    }
}

@media (min-width: 450px) {

    #p404 h1 {
        font-size: 2.8em;
    }
}

@media (min-width: 600px) {

    #p404 h1 {
        font-size: 3em;
    }
}

@media (min-width: 700px) {

    #p404 h1 {
        font-size: 3.2em;
    }
}

@media (min-width: 800px) {

    #p404 h1 {
        font-size: 3.5em;
    }
}

@media (min-width: 1000px) {

    #p404 h1 {
        font-size: 4em;
    }
}

@media (min-width: 1200px) {

    #p404 h1 {
        font-size: 4.6em;
    }
}

@media (min-width: 1400px) {

    #p404 h1 {
        font-size: 5em;
    }
}

/* endregion */