/*
(Nummerierung der Optimierungsmaßnahmen gemäß Anlage 37/Ausbaustufe)
###########################################
#
# - Optimierung 1: Gesamte Webseite mittig anzeigen und Schriftgröße verringern
# - Optimierung 2: Grafische Anpassungen Header Startseite
# - Optimierung 3: Verbesserung Homepage Intro / Abteilungen
# - Optimierung 5: Anpassung News-Plugin
# - Optimierung 6: Hauptnavigation minimieren
# - Optimierung 8: Grafische Anpassung zwischen Intro und Content Abteilungsseiten
# - Optimierung 15: Minimal-Navigation auf allen Webseiten (und mitwandernde Minimal-Navigation in langen Publikationslisten auf den persönlichen Wissenschaftlerseiten)
# - Toggler Korrektur
# - Optimierung Logo / Header
# - Optimierung Startseite Fläche oben verringern
# - Optimierung Startseite Abteilungen deutlicher hervorheben
# - Optimierung Startseite Spalten responsive
# - Optimierung Mini-Navigation fixed (nur wenn Navi geschlossen)
#
# - Hochstellen für wissenschaftl. Texte
# - Forschungsaufenthalte: Welcome-Center
# - Optimierung Startseite Spalten responsive
# - Style Absendebutton Formular
# - Breadcrumb-Optimierung auf Seiten mit Header-Bild
# - Schriftgröße auf Home-Seite anpassen
# - Media Queries
# - Aufklappmarke Intro für mobil optimieren
# - Media Query Print
###########################################
*/


sub {
    vertical-align: sub;
    font-size: .7em !important;
    line-height: 1 !important;
}

sup {
    vertical-align: sup;
    font-size: .7em !important;
    line-height: 1 !important;
}


body #main > section.start-teaser {
    width: 100%;
    margin-left: -96px;
}

body * a:not(.back-to-top):focus, span.more:focus {
    border-bottom: 1px solid
}

body.start #content-wrap.background-image #main {
    margin-top: 300px !important;
}

svg {
    max-width: 100%;
    height: auto;
}

body.small #main > .wrap > .block.col-1-1.wide {
    width: 1066px;
    margin-left: -123px;
}

.ampm {
    font-family: georgia, serif;
}

#main > .wrap > .block.col-1-1, #main > .wrap > .block.columns2 {
    width: calc(100% - 10px);
}

#main > article.intro.closed > div {
    padding: 2rem 0 2rem;
}

a.internal-link-button-darkblue::before {
    background: transparent url('../img/internal-link.svg') no-repeat !important;
}

a.external-link-button-darkblue::before {
    background: transparent url('../img/external-link.svg') no-repeat !important;
}

#main :not(.start-teaser) :not(h2) a, #main > article.intro > .toggler * {
    text-decoration: none;
    color: rgb(95, 95, 95) !important;
}

#main h3.heading a {
    color: #333 !important;
}

#main .text, #main p:not(.color-persons), #main p span {
    color: #000 !important;
}

.news.open figcaption {
    max-width: 300px; /* Bildunterschrift soll nicht über Bildbreite herausragen */
}

.block.list > .item figure.list {
    margin-bottom: 0; /* Abstand raus, da zuviel in Listenansicht (Protokoll 17.10.18) */
}

#imagemap {
    margin-top: -110px;
}

.list.text-list > .item p {
    font-family: georgia, serif;
}

#main > article > div.heading:only-child {
    padding-bottom: 0 !important
}

/* Link-Symbole */

a.download::before {
    display: inline-block;
    height: 15px;
    width: 15px;
    overflow: hidden;
    margin: 0px 5px -1px 0px;
    background: transparent url('../img/download.png') no-repeat;
    background-size: 19px;
    content: " ";
    padding-right: 1em;
}

a.video::before {
    display: inline-block;
    overflow: hidden;
    margin: 0px 5px -5px 0px;
    background: transparent url('../img/video-camera.png') no-repeat;
    content: " ";
    width: 22px;
    height: 24px;
    background-size: 22px;
    padding-right: 1em;
}

body a.external-link::before {
    display: inline-block;
    height: 15px;
    width: 15px;
    overflow: hidden;
    margin: 0px 5px -1px 0px;
    background-image: url('../img/external-link.png');
    background-repeat: no-repeat;
    background-size: 15px 15px;
    content: " ";
    padding-right: 1em;
}

body a.internal-link::before {
    display: inline-block;
    height: 15px;
    width: 15px;
    overflow: hidden;
    margin: 0px 5px -1px 0px;
    background-image: url('../img/internal-link.png');
    background-repeat: no-repeat;
    background-size: 15px 15px;
    content: " ";
    padding-right: 1em;
}


#nav-footer li.level-1 > a:focus,
#nav-footer li.level-2 > a:focus {
    border-bottom: 1px solid rgb(255, 255, 255) !important;
}

/* Optimierung der Projektseiten */
#navigation-wrap, #navigation-wrap .form, footer, footer form {
    background-color: rgb(128, 128, 128) !important;
}


.projects #main .heading2 {
    font-weight: normal !important;
    color: rgb(111, 111, 111) !important;
}


/* Links Projekte */

.projects #main a:not(.back-link):hover, .projects #main a:not(.back-link):focus {
    border-bottom: 1px solid rgb(51, 153, 102) !important;
}

.projects a.download::before {
    background: transparent url('../img/download_projects.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.projects a.internal-link::before {
    background: transparent url('../img/internal-link_projects.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.projects a.external-link::before {
    background: transparent url('../img/external-link_projects.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}


/* Links Institut */

.institute #main a:not(.back-link):hover, .research #main a:focus {
    border-bottom: 1px solid rgb(0, 102, 204) !important;
}

.institute a.download::before {
    background: transparent url('../img/download_institute.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.institute a.internal-link::before {
    background: transparent url('../img/internal-link_institute.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.institute a.external-link::before {
    background: transparent url('../img/external-link_institute.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

/* Links Forschung */

[class*='research'] #main a:not(.back-link):hover,
[class*='research'] #main a:focus {
    border-bottom: 1px solid rgb(0, 102, 204) !important;
}

[class*='research'] a.download::before {
    background: transparent url('../img/download_research.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

[class*='research'] a.internal-link::before {
    background: transparent url('../img/internal-link_research.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

[class*='research'] a.external-link::before {
    background: transparent url('../img/external-link_research.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

#main .wrap .research-field.active * {
    color: white !important;
}

/* Links Forschung IP */

.research1 #main a:not(.back-link):hover,
.research1 #main a:focus {
    border-bottom: 1px solid rgb(0, 149, 170) !important;
}

.research1 a.download::before {
    background: transparent url('../img/download_research_ip.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.research1 a.internal-link::before {
    background: transparent url('../img/internal-link_research_ip.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.research1 a.external-link::before {
    background: transparent url('../img/external-link_research_ip.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

/* Links Forschung IER */

.research2 #main a:not(.back-link):hover,
.research2 #main a:focus {
    border-bottom: 1px solid rgb(0, 115, 163) !important;
}

.research2 a.download::before {
    background: transparent url('../img/download_research_ier.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.research2 a.internal-link::before {
    background: transparent url('../img/internal-link_research_ier.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.research2 a.external-link::before {
    background: transparent url('../img/external-link_research_ier.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}


/* Links Publikationen */

.publications #main a:not(.back-link):hover, .publications #main a:focus {
    border-bottom: 1px solid rgb(142, 10, 95) !important;
}

.publications a.download::before {
    background: transparent url('../img/download_publications.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.publications a.internal-link::before {
    background: transparent url('../img/internal-link_publications.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.publications a.external-link::before {
    background: transparent url('../img/external-link_publications.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

/* Links Personen */

.persons #main a:not(.back-link):hover, .persons #main a:focus {
    border-bottom: 1px solid rgb(255, 144, 0) !important;
}

.persons a.download::before {
    background: transparent url('../img/download_persons.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.persons a.internal-link::before {
    background: transparent url('../img/internal-link_persons.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.persons a.external-link::before {
    background: transparent url('../img/external-link_persons.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}


/* Links Bibliothek */

.library #main a:not(.back-link):hover, .library #main a:focus {
    border-bottom: 1px solid rgb(51, 51, 51) !important;
}

.library a.download::before {
    background: transparent url('../img/download_library.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.library a.internal-link::before {
    background: transparent url('../img/internal-link_library.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}

.library a.external-link::before {
    background: transparent url('../img/external-link_library.png') no-repeat;
    content: " ";
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}


/*
Optimierung der Navigation hinsichtlich Barrierefreiheit
*/
a {
    border-bottom: 1px solid transparent !important;
}

header #breadcrumb a:focus, #sidebar-wrap #navigation-wrap a:focus, footer a:focus, a:focus,
#main a:focus, #main a:hover {
    border-bottom: 1px solid !important;
}

body *:not(input):focus {
    background-color: rgba(0, 0, 0, .2);
}

#language-wrap .language-switch,
#navigation-toggle,
#language-wrap .button-home {
    background-color: rgb(128, 128, 128) !important;
}


.block.list.accordeon > .item > .toggler,
.togglebox-header .toggler,
.research-field.active::before,
.research-focus.active::before {
    background-color: rgb(115, 115, 115) !important;
}


/* Listeneintrag (Vorträge etc.) analog zu händischem Eintrag */
.text-list > .item {
    border-bottom: 1px solid #ccc;
}


/*
###########################################
# - Link-Buttons (z.B. Stellenanzeigen
###########################################
*/

.button {
    font-weight: bold;
    background-color: rgb(0, 72, 153);
    padding: 1em;
    margin: 2em 0;
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif !important;
    display: block;
    max-width: 15em;

}

a.external-link.button::before {
    content: '\2713';
    background-image: none;
    line-height: 1;
    margin-right: .5em;
}


/*
###########################################
# - Optimierung 1: Gesamte Webseite mittig anzeigen und Schriftgröße verringern
###########################################
*/

#content-wrap {
    border-right: 1px solid #ccc;
}

#page-wrap {
    width: 1510px;
    margin: auto;
}

#page-wrap.open #content-wrap {
    margin-left: 230px !important;
}

/*
.start .main-wrap {
  background: rgb(255, 255, 255);
  padding-top: 1em;
  margin-top: -20px;
}
*/
/*
###########################################
# - Optimierung 2: Grafische Anpassungen Header Startseite
###########################################
*/

#logo {
    margin-top: -1px;
    margin-left: 106px;
}

#logo img {
    width: 410px;
    height: auto;
    margin-left: 0;
}

#main > section.start-teaser {
    top: 225px !important;
}

/*
###########################################
# - Optimierung 3: Verbesserung Homepage Intro / Abteilungen
###########################################
*/
.start #content-wrap.background-image {
    background-position: center -80px !important;
}

#content-wrap.background-image.transition {
    background-position: center -80px !important;
    position: static; /* wichtig: static und keine transition, da sonst Hintergrund auf iOS flackert */
    transition: none;
}

#page-wrap #main > section.start-teaser div.start-teaser h2, #page-wrap #main > section.start-teaser div.start-teaser h2 * {
    font-size: 1.25em;
    line-height: 1.15;
}

.start-teaser h2:nth-child(2)::before {
    content: 'Abteilung';
    display: block;
    font-size: .85em;
    font-family: georgia, "times new roman", sans-serif;
    font-weight: normal;
    font-style: italic;
}

.en .start-teaser h2:nth-child(2)::before {
    content: 'Department';
}

/*
###########################################
# - Optimierung 5: Anpassung News-Plugin
###########################################
*/
.news.open .accordeon-header > figure {
    /* display: none;*/
    visibility: hidden;
}

.transition-height {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

/*
###########################################
# - Optimierung 6: Hauptnavigation minimieren
###########################################
*/
#page-wrap:not(.open) #navigation-wrap, #page-wrap:not(.open) #navigation-wrap *, #page-wrap:not(.open) #navigation-wrap *:after {
    background-color: transparent;
    color: transparent;
    background-image: none;
    border: 0;
    margin-left: 0;
    transition: all 1s ease-out;
    display: none;
}

#page-wrap.open #navigation-wrap, #page-wrap.open #navigation-wrap *, #page-wrap.open #navigation-wrap *:after {
    transition: all .5s ease-in;
}

#page-wrap:not(.open) #navigation-wrap input {
    display: none;
}

#navigation-wrap {
    margin-left: -230px;
    width: 230px !important;
    position: relative;
}

#nav-main li.level-1 > a {
    font-size: 16px !important;
    line-height: 1.35 !important;
    padding: .8em !important;
}

#nav-main li.level-2 > a {
    font-size: 16px;
    font-size: 16px !important;
}

div.search.nav input.text {
    width: 155px !important;
}

/*
###########################################
# - Optimierung 8: Grafische Anpassung zwischen Intro und Content Abteilungsseiten
###########################################
*/
.research1 #main > .intro, .research2 #main > .intro {
    padding: 15px 15px 0 133px;
}

.research1 #main > .wrap > .block > h4, .research2 #main > .wrap > .block > h4 {
    margin: 20px 0px 10px 0;
}

/*
###########################################
- Optimierung 15: Minimal-Navigation auf allen Webseiten (und mitwandernde Minimal-Navigation in langen Publikationslisten auf den persönlichen Wissenschaftlerseiten)
###########################################
*/

#page-wrap .back-to-top {
    background-color: rgb(115, 115, 115);
    position: fixed;
    bottom: 20px;
    width: 32px;
    height: 32px;
    color: white;
    font-size: 1rem;
    border-radius: 50%;
    border: 1px solid #fff !important;
    left: calc(100vw - 50px);
}

.back-to-top img {
    width: 22px;
    margin-left: 4px;
    margin-top: 4px;
}

/*
###########################################
# - Forschungsaufenthalte
###########################################
*/

.nav-anchor li a {
    font-family: georgia, serif;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 1em;
    display: block;
}

.welcome-center {
    margin-top: -18px;
}

.welcome-center::after {
    content: url(fileadmin/ipmpg/content/forschungsfoerderung/welcome-center.png);
    padding-left: 10px;
}


/*
###########################################
# - Toggler Korrektur
###########################################
*/


@media screen and (max-width: 770px) {
    #main > article.intro .toggler {
        bottom: 7px;
    }
}

@media screen and (min-width: 771px) {
    #main > article.intro .toggler {
        bottom: -5px;
    }
}

/*
###########################################
# - Style Forschungsstrategie Juristen
###########################################
*/

body.research1 .research-field-content .accordeon h3.heading::before {
    content: 'Forschungsschwerpunkt ';
    font-family: Georgia, serif;
    font-weight: lighter;
    font-style: italic;
    color: #0095aa;
    float: left;
    width: 100%;
    display: block;
}

body.research1.en .research-field-content .accordeon h3.heading::before {
    content: 'Main Area of Research';
}


.research-field.research-field-1,
.research-field.research-field-2 {
    width: 33%;
}


/*
###########################################
# - Optimierung Mini-Navigation fixed (nur wenn Navi geschlossen)
###########################################
*/


.ps {
    overflow: hidden !important;
    z-index: 0;
}


#sidebar-wrap {
    width: 240px;
    height: 100vh;
    float: left;
    overflow-y: auto;
    position: fixed;
    z-index: 1000;
}

#page-wrap:not(.open) #sidebar-wrap {
    width: 60px;
}


#language-wrap {
    width: 100%;
    height: 1em;
    position: relative;
    float: left;

}

#navigation-wrap {
    width: 100%;
    position: relative;
}


#page-wrap:not(.open) #language-wrap {
    position: fixed !important;
    z-index: 1000;
}

#page-wrap:.open #language-wrap {
    position: relative !important;
    z-index: 100;
}

body #language-wrap .language-switch,
body #navigation-toggle,
body #language-wrap .button-home {
    position: absolute;
    display: block;
    color: transparent;
    left: 0px;
    height: 46px;
    width: 46px;
    overflow: hidden;
    background: transparent url('../img/icons-46px.png') 0px 0px no-repeat;
    background-size: 46px 230px;
    cursor: pointer;
    z-index: 10;
}


body #language-wrap .button-home {
    background-position: 0px -184px;
}

#language-wrap .language-switch.en {
    background: transparent url('../img/icons-46px.png') 0px -92px no-repeat;
    background-size: 46px 230px;
}


/*
###########################################
- Hochstellen für wissenschaftl. Texte
###########################################
*/

.block.list > .item p sup {
    font-size: .75em;
    line-height: 1;
    vertical-align: top;
}

/*
###########################################
# - Optimierung Startseite Spalten responsive
###########################################
*/

/*
#main > .wrap > .block.col-1-3 {
  width: calc(100% / 3 - 30px);
}
#main > .wrap > .block.col-2-3 {
  width: calc(100% / 1.5 - 30px);
}
*/
/*
###########################################
# - Style Absendebutton Formular
###########################################
*/

form .field.checkbox.dataprotection, .field.checkbox span.dataprotection {
    display: block;
    margin-left: 42px;
    line-height: 1.35 !important;
}

form[name="newSubscriber"] .tx-eventmanager-form-submit, form[name="signOutCheck"] .tx-eventmanager-form-submit, form#formMailing .tx-eventmanager-form-submit {
    margin-top: 397px;
    padding: 10px;
}

form#formMailing .field.submit {
    margin-top: 0;
    padding: 10px;
    float: right;
}

form[name="newSubscriber"] .field.first.left.std, form#formMailing .field.first.left.std {
    margin-top: -60px;
}

form[name="newSubscriber"] .field.checkbox > label > input[type="checkbox"]:checked + span.checkbox::before, form[name="signOutCheck"] .field.checkbox > label > input[type="checkbox"]:checked + span.checkbox::before, form#formMailing .field.checkbox > label > input[type="checkbox"]:checked + span.checkbox::before, form[name="newSubscriber"] .field.checkbox > label > input[type="checkbox"]:checked + span.checkbox:hover::before, form[name="signOutCheck"] .field.checkbox > label > input[type="checkbox"]:checked + span.checkbox:hover::before, form#formMailing .field.checkbox > label > input[type="checkbox"]:checked + span.checkbox:hover::before {
    background-position: 0px -160px;
}

/*
###########################################
# - Breadcrumb-Optimierung auf Seiten mit Header-Bild
###########################################
*/


body .background-image header .breadcrumb li, body .background-image header .breadcrumb li a, body .background-image header .breadcrumb li::after {
    color: rgb(255, 255, 255);
    text-shadow: 1px 0 2px rgb(0, 0, 0);
}

body.hell .background-image header .breadcrumb li a,
body.hell .background-image header .breadcrumb li::after {
    color: black;
    text-shadow: 0 0 5px white;
}


/*
###########################################
# - Schriftgröße auf Home-Seite anpassen
###########################################
*/
.start .block.list.teaser > .item p,
.start .block.list.teaser > .item p * {
    font-size: 20px;
    line-height: 1.35;

}

.start .block.list.teaser > .item .heading,
.start .block.list.teaser > .item .heading * {
    font-size: 20px;
    line-height: 1.35;
}

/*
###########################################
# - Media Queries
###########################################
*/

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

    #page-wrap {
        margin: auto;
        width: 1440px;
    }

    #page-wrap:not(.open) {
        width: 1280px;
    }

    body #page-wrap.open #main > section.start-teaser div.start-teaser {
        width: calc(50% - 154px) !important;
        float: left;
    }

}

@media screen and (max-width: 1585px) {
    #content-wrap.background-image {
        background-size: contain;
    }

    #navigation-wrap {
        margin-left: -200px;
        width: 200px;
    }


}


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

    #page-wrap:not(.open) .back-to-top {
        left: auto;
        right: calc(50vw - 615px);
    }

    #page-wrap.open .back-to-top {
        right: calc(50vw - 710px + 30px);
        left: auto;
    }

}

@media screen and (max-width: 1279px) {
    #logo img {
        width: 358px;
        margin-left: -22px;
    }

    #page-wrap:not(.open) .back-to-top {
        left: auto;
        right: 20px;
    }

    #main {
        width: 90% !important;
    }

    body #main > .wrap > .block.col-1-3 {
        width: calc((33.3333% * .9) - 20px);
    }

    body #main > .wrap > .block.col-2-3 {
        width: calc((66.6666% * .9) - 20px);
    }

    body #main > .wrap > .block.col-1-1,
    body #main > .wrap > .block.columns2 {
        width: calc(90% - 40px);
    }

}

@media screen and (max-width: 1023px) {

    body #page-wrap * {
        font-size: calc(14px + (22 - 14) * (100vw - 320px) / (1280 - 320));
        line-height: 1.5;
    }

    #logo img {
        width: 320px;
    }

    body #logo {
        margin-left: 91px;
    }


    #content-wrap.background-image {
        background-size: contain;
    }

    body #main {
        margin-left: auto;
        padding: 30px 20px;
        width: 90%;
    }

    #main > .wrap {
        width: 100% !important;
    }

    body #main > .wrap > .block.col-1-3,
    body #main > .wrap > .block.col-2-3 {
        width: calc(50% - 20px);
    }

    body #main > .wrap > .block.col-1-1,
    body #main > .wrap > .block.columns2 {
        width: calc(100% - 40px);
    }

    #main h1, #main h1 *, #main .like-h1 * {
        font-size: calc(16px * 1.8);
        line-height: 1.35;
    }

    #main > article.intro > div p, #main > article.intro > div p *, .block.list.teaser > .item .heading, .block.list.teaser > .item .heading *, .block.list.teaser > .item p, .block.list.teaser > .item p * {
        font-size: calc(16px * 1.2) !important;
        line-height: 1.35 !important;
    }

    body .block.list > .item p, body .block.list > .item p *, body .block.list.teaser-list > .item p, body .block.list.teaser-list > .item p * {
        line-height: 1.35;
        font-size: calc(16px * .9);
    }

    body .select-wrap select {
        width: calc(100% + 30px);
    }

}

@media screen and (max-width: 767px) {

    #content-wrap {
        hyphens: auto;
    }

    .research2 #page-wrap h1 {
        hyphens: none !important;
    }


    body #logo img {
        margin-left: 0px !important;
        width: 270px;
        max-width: 80vw;
    }

    body #logo {
        margin-left: 47px;
    }

    .start-teaser.aligncenter:first-child::after {
        left: calc(50% - 0.35em);
        top: 0.15em;
        font-size: 4em;
        float: left;
    }

    .start .plugin.teaser:last-child .item > .heading + p {
        display: none;
    }

    body #main {
        width: 90%;
    }

    .research1 #main > .intro, .research2 #main > .intro {
        padding: 30px 0px !important;
    }

    #main > section.start-teaser {
        top: 100px !important;
    }

    #page-wrap #main > section.start-teaser div.start-teaser h2.solo {
        margin-bottom: 1em;
    }

    body #main > .wrap > .block.col-1-2,
    body #main > .wrap > .block.col-1-3,
    body #main > .wrap > .block.col-2-3,
    body.small #main > .wrap > .block.col-1-1,
    body.small #main > .wrap > .block.columns2,
    body.small .news-content > .block.col-1-1,
    body.small .news-content > .block.columns2 {
        width: 100% !important;
    }

    .research-field.research-field-1,
    .research-field.research-field-2 {
        width: 50%;
        margin-top: 2em;
    }

    body .block.list.teaser-list > .item .heading,
    body .block.list.teaser-list > .item .heading * {
        font-size: 1em;
        line-height: 1.35;
    }

    /*
    #     - Aufklappmarke Intro für mobil optimieren
    */
    #main > article.intro.closed > div {
        padding-bottom: 2rem;
    }

    #main > article.intro.toggle:not(.closed) > .toggle-content {
        padding-bottom: 4rem;
    }

    #imagemap {
        margin-top: -80px;
        width: 100vw;
        margin-left: -45px;
    }


}

@media screen and (max-width: 479px) {


    .start .plugin:last-child .item p:not(.heading) {
        display: none;
    }


    #logo {
        width: calc(100% - 75px) !important;
    }

    #logo img {
        margin-left: -7px !important;
        width: 100% !important;
    }

    #content-wrap.background-image #main {
        margin-top: 200px !important;
        width: 90%;
        max-width: 400px;
    }

    #page-wrap #main > section.start-teaser div.start-teaser h2, #page-wrap #main > section.start-teaser div.start-teaser h2 * {
        font-size: 1em;
    }

    #main > .wrap > .block.col-1-3, #main > .wrap > .block.col-2-3, #main > .wrap > .block.col-1-1, #main > .wrap > .block.columns2 {
        width: calc(100% - 20px) !important;
    }

    body #main > section.start-teaser {
        width: calc(100% - 48px);
        margin: auto;
    }

    .list .news.calendar .legend:nth-child(2) {
        display: block;
    }

    body .block.list.accordeon > .item .accordeon-header, body .togglebox-header > .heading {
        padding-right: 50px;
    }

    .research-field.research-field-1,
    .research-field.research-field-2 {
        width: 100%;
        margin-top: 2em;
    }
}

/*
###########################################
# - Media Query Print
###########################################
*/

@media print {
    html * {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 16pt !important;
        color: #000;
        height: auto;
        width: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        min-height: 0;
        box-sizing: border-box;
        line-height: 1.5 !important;
    }

    body {
        margin: auto;
        height: auto;
        min-height: 0;
        background-image: none;
        background-color: #fff;
    }

    #page-wrap:not(.open) {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #logo, .breadcrumb {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    #logo img {
        max-width: 33%;
        height: auto;
    }

    #content-wrap {
        border: 0 solid transparent !important;
    }

    #main {
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        background-color: #fff;
    }

    #main > article.intro {
        border-top: 0 none white;
        padding: 1em 0 !important;
        margin: 0 !important;
        width: 100% !important;
        font-size: 1.5em !important;
    }

    #main > article.intro h1 {
        font-size: 2em !important;
    }

    body.small #main > .wrap {
        width: 100% !important;
        margin: 0 !important;
    }

    body.small #main > .wrap > .block.col-1-1.wide {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.small #main > .wrap > .block.col-1-1, body.small #main > .wrap > .block.columns2, body.small .news-content > .block.col-1-1, body.small .news-content > .block.columns2 {
        width: 100% !important;
        margin: 0;
    }

    #main > article.intro > div.heading {
        padding-bottom: 0 !important;
    }

    .research-field, .research-field.active::before, .research-focus.active::before, .research-field.active::after, .research-focus.active::after, #page-wrap .back-to-top, .research1 #main > .wrap > .block > h4, .research1 #main > .wrap > .block > p, .research2 #main > .wrap > .block > h4, .research2 #main > .wrap > .block > p {
        display: none !important;
    }

    .block.list.accordeon > .item > .toggler, .togglebox-header .toggler, .research-field.active::before, .research-focus.active::before {
        background-image: none !important;
        background-color: transparent !important;
    }

    .research-field-content, .research-focus-content {
        margin: 0 !important;
        padding: 0 !important;
        border-top: 0 none #fff !important;
        width: 100%;
    }

    .research-field.active *, .research-field.active .heading span, .research-field.active a.item-link {
        text-align: left;
        line-height: 1.5;
        padding: 1em 0 !important;
        margin: 0 !important;
    }

    .research-field.active .heading {
        font-size: 1.2rem !important;
        font-weight: bold !important;
    }

    .research-field.active .heading span {
        font-weight: normal !important;
    }

    .research1 .research-field.active *, .research1 .research-field.active .heading span, .research1 .research-field.active a.item-link {
        color: #0095AA !important;
    }

    .research2 .research-field.active *, .research2 .research-field.active .heading span, .research2 .research-field.active a.item-link {
        color: #0073A3 !important;
    }

    .research-field.active, .research-focus.active {
        background-image: none;
        display: block !important;
        font-size: 1em !important;
        padding: 0 !important;
        font-weight: bold;
        width: 100%;
        display: block;
        padding: 0;
        background-color: transparent !important;
        color: black !important;
        height: 100%;
        min-height: 0;
    }

    body[class^='research'] .research-field.active .heading {
        width: 100%;
        display: block;
        float: none;
    }

    .block.list.accordeon > .item {
        margin-top: 2em;
    }

    .block.list.accordeon > .item .accordeon-body, .togglebox-body {
        overflow: visible !important;
        max-height: 100% !important;
    }

    body #main > .wrap > .block.border, .news-content > .block.border {
        border-top: 0 solid transparent !important;
    }

    /* Ende Print*/
}