/*
#################################
SUBSITE COLORS 
#################################
*/

:root 
{
    --blue1: rgba(24, 189, 242, 1);
    --red: rgba(242, 48, 100, 1);
    --green: rgba(2, 188, 169, 1);
    --blue2: rgba(0, 172, 214, 1);
    --yellow: rgba(255, 166, 61, 1);
    --violet: rgba(200, 116, 217, 1);

    --blue1-light: rgba(24, 189, 242, 0.4);
    --red-light: rgba(242, 48, 100, 0.4);
    --green-light: rgba(2, 188, 169, 0.4);
    --blue2-light: rgba(0, 172, 214, 0.4);
    --yellow-light: rgba(255, 166, 61, 0.4);
    --violet-light: rgba(200, 116, 217, 0.4);

    --blue1-accent: rgba(24, 189, 242, 0.6);
    --red-accent: rgba(242, 48, 100, 0.6);
    --green-accent: rgba(2, 188, 169, 0.6);
    --blue2-accent: rgba(0, 172, 214, 0.6);
    --yellow-accent: rgba(255, 166, 61, 0.6);
    --violet-accent: rgba(200, 116, 217, 0.6);

    --black: #1A1A1A;
    --white: #F7F7F7;
}
body, 
.card
{
    background-color: var(--white) !important;
}

.startseite
{
    --color: var(--blue1);
    --color-light: var(--blue1-light);
    --color-accent: var(--blue1-accent);
}
.vor-studium
{
    --color: var(--red);
    --color-light: var(--red-light);
    --color-accent: var(--red-accent);
}
.im-studium
{
    --color: var(--green);
    --color-light: var(--green-light);
    --color-accent: var(--green-accent);
}
.nach-studium
{
    --color: var(--yellow);
    --color-light: var(--yellow-light);
    --color-accent: var(--yellow-accent);
}
.schwerpunkteseite
{
    --color: var(--blue2);
    --color-light: var(--blue2-light);
    --color-accent: var(--blue2-accent);
}
.team-kontakt
{
    --color: var(--violet);
    --color-light: var(--violet-light);
    --color-accent: var(--violet-accent);
}


/*
#################################
TEXT STYLING 
#################################
*/

h1,
h2
{
    color: var(--color);
}
h3,
h4,
h5,
h6
{
    color: var(--black);
}
h3
{
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
}
h3::after
{
    content: "";
    width: 100%;
    height: 0.5em;
    display: block;
    margin-top: -0.5em;
    margin-bottom: 2em;
    background-color: var(--color-light);
}
h4
{
    font-family: Verdana;
    font-weight: bold;
    font-size: 16pt;
}
p
{
    font-family: Arial, sans-serif;
}
a
{
    color: var(--black);;
}
a:hover
{
    color: var(--black);;
}

.colored
{
    background-color: var(--color-light);
}

.quote
{
    border-left: 2em solid var(--color-light);
    padding-top: 2em;
    padding-bottom: 2em;
}

.cta
{
    transform: translateY(-30%);
}
.cta div
{
    color: var(--color);
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    font-size: 30pt;
    /* text-transform: uppercase; */
    margin-bottom: -10pt;
}
.cta div:nth-child(2n)
{
    margin-left: 2em;
}


/*
#################################
BUTTONS 
#################################
*/

.btn-eckig
{
    display: block;
    padding: 1em;
    padding-top: 2em;
    color: var(--black);;
    text-decoration: none;
    text-align: right;
    font-weight: bold;
    background-color: var(--color-light);
    transition: 0.3s;
}
.btn-eckig::before
{
    content: "↗";
    margin-right: 0.5em;
}
.btn-eckig:hover
{
    background-color: var(--color-accent);
}

.btn-rund
{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 150px;
    height: 150px;
    border: 5px solid var(--color-light);
    border-radius: 50%;
    color: var(--color);
    text-align: center;
    text-decoration: none;
    padding: 2em;
}
.btn-rund:hover
{
    background-color: var(--color-light);
    color: var(--color);
}


/*
#################################
CARDS 
#################################
*/

.card
{
    border: none;
    width: 80%;
}
.card img
{
    border-radius: 0;
}
.card iframe
{
    height: 400px;
}

.broken-bl
{
    transform: translateX(20%);
}
.broken-bl img,
.broken-bl iframe
{
    z-index: 2;
}
.broken-bl .card-body
{
    padding-top: 5em;
    transform: translate(-20%, -4em);
    background-color: var(--color-light);
}

.broken-br
{
    transform: translateX(-20%);
}
.broken-br img,
.broken-br iframe
{
    z-index: 2;
}
.broken-br .card-body
{
    padding-top: 5em;
    transform: translate(20%, -4em);
    background-color: var(--color-light);
}
.col-12 .broken-br
{
    transform: none;
}

.broken-tl
{
    transform: translateX(20%);
}
.broken-tl img,
.broken-tl iframe
{
    z-index: 2;
    order: 2;
}
.broken-tl .card-body
{
    order: 1;
    padding-bottom: 5em;
    transform: translate(-20%, 4em);
    background-color: var(--color-light);
}

.broken-tr
{
    /*transform: translateX(-20%);*/
}
.broken-tr img,
.broken-tr iframe
{
    z-index: 2;
    order: 2;
}
.broken-tr .card-body
{
    order: 1;
    padding-bottom: 5em;
    transform: translate(20%, 4em);
    background-color: var(--color-light);
}


/*
################################# 
PERSON
#################################
*/

.person
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}
.person-text
{
    text-align: right;
    padding-right: 2em;
}
.person-reverse
{
    flex-direction: row-reverse;
    justify-content: start !important;
}
.person-reverse .person-text
{
    text-align: left;
    padding-right: 0;
    padding-left: 2em;
}
.person img
{
    width: 200px;
}


/*
################################# 
DIVIDOR
#################################
*/

.dividor
{
    background-color: var(--color-light);
    height: 5vh;
    width: 100%;
    margin: -2.5rem 0;
}

@media (max-width: 1200px)
{
    .dividor
    {
        height: 10vh;
    }
}


/*
################################# 
NAVBAR
#################################
*/

nav,
.dropdown-menu
{
    background-color: var(--color);
}
.nav-item,
.nav-link,
.dropdown-item
{
    color: white;
    text-transform: lowercase;
    font-size: 14pt;
}
.dropdown-item:focus
{
    background-color: transparent !important;
}
.nav-link:hover
{
    color: white;
}
.nav-link.active,
.dropdown-item.active
{
    color: white !important;
    background-color: transparent;
    font-weight: bold;
}
.dropdown-menu
{
    border: none;
    border-radius: 0;
    padding-top: 1.7em;
}
@media (max-width: 992px)
{
    .dropdown-menu
    {
        padding-top: 0;
    }
}
.navbar-nav li:hover > ul.dropdown-menu 
{
    display: block;
}
.dropdown-submenu 
{
    position:relative;
}
.dropdown-submenu > .dropdown-menu 
{
    top: 0;
    left: 100%;
    margin-top: -6px;
    padding-top: 0.5rem;
}
.dropdown-menu > li > a:hover:after 
{
    text-decoration: underline;
    transform: rotate(-90deg);
} 


/*
################################# 
HEADER
#################################
*/

header
{
    text-align: center;
}
header h1,
header h2
{
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    font-size: 26pt;
    text-transform: uppercase;
}
header h2
{
    font-weight: normal;
    font-size: 20pt;
}

/*
################################# 
FOOTER
#################################
*/

footer
{
    margin-top: 5em !important;
}

.footer-headings
{
    padding-top: 2em;
    padding-bottom: 0;
    background-color: var(--color);
}
.footer-headings .col-4 h4
{
    color: white !important;
}

footer > .row > .col-md-4
{
    text-align: center;
    margin-bottom: 2em;
}
@media (min-width: 768px)
{
    footer > .row > .col-md-4,
    footer > .row > .col-4
    {
        text-align: center;
    }
}

footer ul
{
    text-align: center;
}
footer ul li
{
    display: inline;
    padding: 0 2em;
    border-right: 1px solid var(--black);;
}
footer ul li:last-child
{
    border-right: none;
}

@media (max-width: 768px)
{
    footer
    {
        background-color: var(--color-light);
    }
    footer ul li
    {
        display: block;
        padding: 0.5em 0;
        border-right: none;
    }
}


/*
################################################################## 
STARTSEITE
################################################################## 
*/


/*
################################# 
STARTSEITE > DETAILS
#################################
*/

.details-card
{
    background-color: var(--color-light);
    padding: 3em;
}
.details-card > div
{
    margin: 1em 0;
}
.details-card p
{
    text-align: right;
}
.details-card p:first-child
{
    font-weight: bold;
    margin: 0;
}
.details-card img
{
    height: 4em;
    margin-left: 3em;
}

.details .col-md-6:nth-child(2) .flex-row
{
    flex-direction: row-reverse !important;
}
.details .col-md-6:nth-child(2) p
{
    text-align: left;
}
.details .col-md-6:nth-child(2) img
{
    margin-left: 0;
    margin-right: 3em;
}
@media (max-width: 768px)
{
    .details-card
    {
        background-color: transparent;
        padding: 0;
    }
    .details .col-md-6 .flex-row
    {
        flex-direction: row-reverse !important;
    }
    .details .col-md-6 p
    {
        text-align: left;
    }
    .details .col-md-6 img
    {
        margin-left: 0;
        margin-right: 3em;
    }
}

.zulassungsvoraussetzungen .details-card
{
    background-color: transparent;
}
.zulassungsvoraussetzungen .details-card p
{
    text-align: left !important;
    margin-left: 2em;
}


/*
################################# 
STARTSEITE > SCHWERPUNKTE
#################################
*/

.startseite .schwerpunkte img
{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 1em;
}
.startseite .schwerpunkte h4
{
    height: 3em;
}


/*
################################# 
STARTSEITE > MASTERPROJEKTE
#################################
*/

.startseite .masterprojekte .row > img
{
    object-fit: cover;
    object-position: center;
}
.gallery img
{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}


/*
################################################################## 
STUDIENVERLAUF
################################################################## 
*/

.studienverlaufsplan
{
    position: relative;
}

.studienverlaufsplan h5
{
    font-family: Verdana, Arial, sans-serif;
    font-size: 30pt;
    white-space: nowrap;
    text-align: center;
}
.studienverlaufsplan > h5
{
    writing-mode: vertical-lr;
    transform-origin: center;
    transform: rotate(180deg);
    position: absolute;
    left: -3em;
}

.studienverlauf h6
{
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    margin-bottom: 1em;
    height: 3em;
}

.pflichtfach,
.wahlfach
{
    background-color: var(--color);
    margin-bottom: 1em;
    padding-top: 1em;
    min-height: 5em;
    opacity: 0.8;
}
.wahlfach
{
    background-color: var(--color-light);
    color: var(--black);;
}
.pflichtfach:hover
{
    background-color: var(--color);
    opacity: 1;
}
div.wahlfach:hover
{
    background-color: var(--color-light);
}
.wahlfachreferenz::before
{
    content: none;
}
.pf-icon,
.wf-icon
{
    padding: 0 0.25em;
    margin-right: 1em;
    background-color: var(--color);
    color: transparent;
}
.wf-icon
{
    background-color: var(--color-light);
}


/*
################################################################## 
ZULASSUNG
################################################################## 
*/

.kompetenzprofil h5
{
    font-family: Verdana, Arial, sans-serif;
    font-size: 20pt;
    writing-mode: vertical-lr;
    transform-origin: center;
    transform: rotate(180deg);
    padding: 0;
    margin: 0 2em 0 0;
}

.timeline
{
    width: 5px;
    height: 5em;
    background-color: var(--black);;
}
.zulassung ol li
{
    padding-left: 1em;
}


/*
################################################################## 
FAQ
################################################################## 
*/

.faq .btn-eckig
{
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 1em;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq .btn-eckig::before
{
    content: none;
}
.faq .btn-eckig::after
{
    content: "";
    background-image: url(assets/icons/Pfeil.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 1em;
    width: 5em;
    display: inline-block;
    transform: rotate(-90deg);
}


/*
################################################################## 
SCHWERPUNKTESEITE
################################################################## 
*/

.gallery-target
{
    height: 60vh;
    object-fit: cover;
}
.gallery-control
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gallery-control img
{
    width: 100%;
    transform: scale(0.4) scaleX(-1);
    cursor: pointer;
}
.gallery-control:nth-child(2) img
{
    transform: scale(0.4);
}

.schwerpunkteseite .gallery img
{
    cursor: pointer;
    transition: 0.2s;
    filter: opacity(60%);
}
.schwerpunkteseite .gallery img:hover,
.schwerpunkteseite .gallery img.active
{
    filter: none;
}

@media (max-width: 1400px)
{
    .schwerpunkteseite .gallery img
    {
        height: 250px;
    }
}
@media (max-width: 1200px)
{
    .schwerpunkteseite .gallery img
    {
        height: 200px;
    }
}
@media (max-width: 992px)
{
    .schwerpunkteseite .gallery img
    {
        height: 200px;
    }
}
@media (max-width: 768px)
{
    .schwerpunkteseite .gallery img
    {
        height: 150px;
    }
}
@media (max-width: 576px)
{
    .schwerpunkteseite .gallery img
    {
        height: 100px;
    }
}