/* DLL Stylesheet v2020-06-09 */

/*
    header span {
        text-align: left;
        margin: 2px 4px;
    }

    header span img {
        width: 100px;
    }

    #dll-logo {
        float: left;
        margin-right: 300px;
    }

    #span-logo {
        width: 275px;
    }
*/

/* --- Allgemein --- */

/* -- Farbdefinitionen -- */

:root {
    --main-text-color: #4a4949;                 /* RGB 74,73,73 */
    --main-text-color-lighter: #868585;         /* RGB 134,133,133 */
    --DLL-assigned-color: #4D53B3;              /* RGB 77,83,179 */
    --university-main-color: #13306A;           /* RGB 19,48,106 */
    --university-main-color-lighter: #2B4882;   /* RGB 73,102,160 */
    --DLL-hellblau: #4D9CC2;                    /* RGB 77,156,194 */
    --DLL-kontrastfarbe: #E80;                  /* RGB 238,136,0 */
    --DLL-zusatzblau: #00446b;                  /* RGB 0,68,107 */
};

/* -- END Farbdefinitionen -- */

/* -- Vorwort zur mobilen Anpassung -- */

/* Im Gegensatz zu Bootstrap, ist die Webseite für GCMS für PC-Bildschirme mit einer Bildschirmgröße von 1440px * 900px optimiert. Kleinere Darstellungen müssen ggf. angepasst werden. Breakpoints bei Bootstrap sind 576px, 768px, 992px und 1200px. 

Bildschirme, die kleiner als bei Desktops sind, werden mithilfe des Entwicklertools von Firefox am iPad, Galaxy S9/9+ und iPhone X/XS getestet. Zusätzlich wurden zwei Desktop-Geräte definiert (1200px * 750px sowie 920px * 620px). 

Die Auswahl der folgenden Media Queries ist stark an https://getbootstrap.com/docs/3.3/css/#grid-media-queries angelehnt. Allerdings war es sinnvoll sie gemäß der obigen Beschreibung anzupassen. 
Für die meisten Elemente des Stylesheets ist gar keine Media Query notwendig. Bei manchen muss wiederum eine zusätzlich erfolgen. */

/* Extra small devices */
@media (max-width: 575px) {
}

/* Small devices (landscape phones, 576px and up ) */
@media (max-width: 767px) { 
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991px) { 
}

/* Large devices (desktops, 992px and up, getestet mit 620px Höhe) */
@media (max-width: 1199px) { 
}

/* 1200px and up, getestet mit 750px Höhe */
@media (max-width: 1439px) { 
}

/* -- END Vorwort zur mobilen Anpassung -- */

/* -- Erstes Inhaltselement mit "main.css" ausblenden -- */

#page-content article.col-sm-8 + h1.headline:first-of-type, #page-content article.col-sm-8 + h1.headline:first-of-type + p.text, #page-content article.col-sm-8 + h1.headline:first-of-type + p.text + h2, style + br, style + br + h2, style + br + h2 + br, style + br + h2 + br + h2, script + br, style + br + h2, script + br + h2 + br, script + br + h2 + br + h2 {
    display: none;
}

/* -- END Erstes Inhaltselement mit "main.css" ausblenden -- */

/* -- Breadcrumbs, Suche, Sprache -- */

/* Breadcrumbs sollen möglichst viel Platz bekommen, damit lange Bezeichnungen nicht abgekürzt werden. Die Suchoption und die Sprachauswahl benötigen eine Breite von mind. 18%, damit sie in der gleichen Zeile dargestellt werden.

Bug: Unabhängig wie der Selektor heißt, werden Anweisungen des ersten Selektors nicht angenommen. Daher wird hier #main als leerer Dummy eingefügt.  */

#main {

}

#breadcrumbs {
    width: 82%;
}

#search-lang-container {
    width: 18%;
} 

/* 1200px and up, getestet mit 750px Höhe */
@media (max-width: 1439px) { 
}

/* Large devices (desktops, 992px and up, getestet mit 620px Höhe) */
@media (max-width: 1199px) { 
    #breadcrumbs {
        width: 79%;
    }

    #search-lang-container {
        width: 21%;
    } 
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991px) { 
    #breadcrumbs {
        width: 73%;
    }

    #search-lang-container {
        width: 27%;
    } 
}

/* Small devices (landscape phones, 576px and up ) */
@media (max-width: 767px) { 
}

/* Extra small devices */
@media (max-width: 575px) {
    #breadcrumbs {
        width: initial;
    }

    #search-lang-container {
        width: initial;
    } 
}

/* -- END Breadcrumbs, Suche, Sprache -- */

/* -- Smooth-Scrolling -- */

#scrollable-area {
    scroll-behavior: smooth;
}

/* -- END Smooth-Scrolling -- */
/*--- END Allgemein ---*/


/* --- Überschriften --- */

h3, h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
    font-weight: bold;
}

h6 {
    font-size: 18px;
}

.untertitel {
    color: #888;
}

footer h3 { 
    /* Hier müssen die Footer-Überschriften des globalen Uni-Website-Designs "geschützt" werden */
    color: inherit;
    font-size: 18px; /* mit inherit tritt der gewünschte Effekt hier nicht ein. Aktuell beträgt die Schriftgröße 18px. Ggf. auf Änderungen achten... */
    font-weight: inherit;
    text-decoration: inherit;
}
/*--- END Überschriften ---*/


/* --- Grafiken --- */

img {
    max-width: 100%;
}

/* -- Grafiken (nicht für Fotos) -- */

figure {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    box-shadow: 0px 0px 10px 0px #bbb;
}

figure:first-child img {
    margin-top: initial;
}

figure:last-child img {
    margin-bottom: initial;
}

figure a, figcaption {
    font-size: 12px; 
}

figure.col-sm-4, figure.col-sm-6 {
    padding: 5px;
    margin-right: 15px;
}

#main figcaption a, figcaption{
    color: #bbb !important;
}

/* -- Mobile Anpassung -- */

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991px) { 
    figure.col-sm-4, figure.col-sm-6 {
        margin-right: initial;
    }
}

/* -- END Mobile Anpassung -- */
/*--- END Grafiken ---*/


/* --- Links --- */

.pseudo-id-element {
    margin-top: -46px; /* Entspricht der Nav-Höhe + 5px Abstand */
    margin-bottom: 61px; /* Gleicht Nav-Höhe und Abstand aus und addiert den Abstand zum nächsten Element (hier 15px) */
}

a img {
    transition: 0.2s;
    border: 3px solid white;
}

a img:hover {
    border-color: var(--university-main-color);
}

header a img, nav a img {
    border: initial;
}

/* -- Icons -- */
a[href^="mailto"]::after {
    font-family: "Font Awesome 5 Free";
    content: "\f0e0";
    margin-left: 5px;
}

.ansprechpartner-schildchen a[href^="mailto"]::after {
    content: initial;
    margin-left: initial;
}

a[target="_blank"]::after, a.externe-seite::after {
    font-family: "Font Awesome 5 Free";
    content: "\f35d";
    font-weight: 900;
    margin-left: 5px;
}

a[href$=".pdf"]::after, a.pdf-datei::after {
    font-family: "Font Awesome 5 Free";
    content: "\f1c1";
    font-weight: initial;
    margin-left: 5px;
}

a[href$=".mp4"]::after, a.video-datei::after {
    font-family: "Font Awesome 5 Free";
    content: "\f1c8";
    font-weight: initial;
    margin-left: 5px;
}

a.gleiche-seite-unten::after {
    font-family: "Font Awesome 5 Free";
    content: "\f358";
    font-weight: initial;
    margin-left: 5px;
}

a.gleiche-seite-oben::after {
    font-family: "Font Awesome 5 Free";
    content: "\f35b";
    font-weight: initial;
    margin-left: 5px;
}

a[href^="mailto"].img-link::after, a[target="_blank"].img-link::after, a.externe-seite.img-link::after {
    content: initial;
    margin-left: initial;
}

/* -- END Icons -- */
/* --- END Links --- */

/* --- Buttons --- */
/* Buttons in Formularen müssen extra angepasst werden */

button {
    transition: 0.2s;
}

.btn {
    font-size: initial;
    font-weight: bold;
    border-radius: 0px;
    border-width: 2px;
    background-color: transparent;
}

/* -- Primärer Button -- */
/* Aufbauend auf der Bootstrap-Klasse .btn-primary */

.btn-primary {
    color: white;
    background-color: var(--university-main-color);
    border: solid 2px var(--university-main-color);
}

.btn-primary:hover {
    color: var(--university-main-color);
    background-color: white;
    border-color: var(--university-main-color);
}

.btn-primary:active {
    border: solid 2px var(--main-text-color-lighter) !important;
    background-color: var(--main-text-color-lighter) !important;
    color: white;
}

.btn-primary:focus {
    color: white;
    background-color: var(--main-text-color);
    border-color: var(--main-text-color);
}

/* -- END Prämerer Button -- */

/* -- Sekundärer Button -- */

.btn-sekundaer {
    color: var(--DLL-hellblau);
}

.btn-sekundaer {
    color: white;
    background-color: var(--DLL-hellblau);
    border: solid 2px var(--DLL-hellblau);
}

.btn-sekundaer:hover {
    background-color: white;
    border-color: var(--DLL-hellblau);
    color: var(--DLL-hellblau);
}

.btn-sekundaer:active {
    border: solid 2px var(--main-text-color-lighter) !important;
    background-color: var(--main-text-color-lighter) !important;
    color: white;
}

.btn-sekundaer:focus {
    color: white;
    background-color: var(--main-text-color);
    border-color: var(--main-text-color);
}

/* -- END Sekundärer Button -- */
/* --- END Buttons --- */

/* --- Listen --- */

ul.listenebene-1, ul.listenebene-2 {
    list-style: none;
}

ul.listenebene-1 li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    position: absolute;
    text-align: center;
    left: 15px;
    width: 24px;
    font-weight: 900;
}

.listenebene-1 {
    padding: 0;
}

.listenebene-1 li {
    margin-left: 24px;
}

ol.listenebene-2 {
    list-style-type: lower-alpha;
}

ol.listenebene-2 li {
    margin-left: -24px; /* Abstand von .listenebene-1 nicht nochmal zusätzlich hinzufügen */
}

ol.listenebene-2 li::before {
    left: 30px;
}

ul.listenebene-2 li {
    margin-left: -24px; /* Abstand von .listenebene-1 nicht nochmal zusätzlich hinzufügen */
}

ul.listenebene-2 li::before {
    left: 30px;
}

/* -- Listen in Akkordeons -- */

.panel-group ul.listenebene-1 li::before {
    left: 34px;
}

/* -- END Listen in Akkordeons -- */

/* -- Geordnete Listen zur Übersicht über Themenfelder -- */
.listen-katalog {
    box-shadow: 0px 0px 10px 0px #bbb;
    margin: 15px 0px;
    padding-bottom: 0px;
}

.listen-katalog .row {
    padding: 15px 30px;
}

.listen-katalog ol {
    text-align: left;
    margin-bottom: 10px;
}

.listen-katalog li {
    margin-bottom: 5px;
}

.listen-katalog li:last-child {
    margin-bottom: inherit;
}

.listen-katalog .col-sm-6 {
    padding: 0px;
}

.listen-katalog .listen-katalog-untertitel {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: #bbb !important;
    border-top: 1px solid #bbb;
    width: 100%;
    margin-left: 0px;
}
/* -- END Geordnete Listen zur Übersicht über Themenfelder -- */
/* --- END Listen --- */

/* --- Quellen und Fußnoten --- */

.quellen {
    margin-top: 50px;
}

.quellen .panel-body {
    padding: 0px 15px;
}
/* --- END Quellen und Fußnoten --- */

/* --- Tabellen --- */

table {
    width: 100%;
}

th, td {
    text-align: center;
    padding: 5px;
}

th {
    background-color: var(--university-main-color);
    color: white;
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #eee;
}

/* -- Mit Titel für die einzelnen Reihen in der ersten Spalte) */

table.reihentitel th {
    background-color: transparent;
    color: var(--university-main-color);
}

table.reihentitel th, table.reihentitel td {
    border-bottom: 1px solid #aaa;
}

table.reihentitel tr:first-child th {
    border-width: 2px; 
}

table.reihentitel td {
    border-right: 1px solid #aaa;
}

table.reihentitel td:first-child {
    border-bottom: none;
    background-color: white;
}

table.reihentitel th:first-child, table.reihentitel td:first-child {
    font-style: italic;
}
/* --- END Tabellen --- */

/* --- Carousel allgemein (aufbauend auf Bootstrap 3.3.7) --- */

.carousel-container {
    background-color: transparent;
    box-shadow: 0px 0px 10px 0px #bbb;
}

.carousel-container img {
    margin-bottom: initial;
}

.carousel-control{
    width: 7.5%;
    margin-bottom: 0px;
}

.carousel-indicators {
    margin-bottom: 15px;
}

/* -- START Überschrift und Beschreibung der Caption trennen -- */

.carousel-caption {
    box-shadow: initial;
    border-bottom: initial;
    background-color: initial !important;
}

.carousel-caption h3, .carousel-caption p {
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

.cc-ueberschrift {
    margin-bottom: 100px;
}

/* -- END Überschrift und Beschreibung der Caption trennen */

/* -- START Caption stylen -- */

.cc-ueberschrift {
    right: 70%;
    left: -57.5%;
}

.cc-beschreibung {
    right: -57.5%;
    left: -57.5%;
}

.carousel-caption h3, .carousel-caption p {
    padding: 10px;
    border-bottom: none;
    color: white;
}

.carousel-caption h3 {
    background-color: rgba(19, 48, 106, 0.9) !important; /* entspricht --university-main-color, Transparenz funktioniert aber nur mit rgba() */
}

.carousel-caption p {
    background-color: rgba(115, 135, 173, 0.9) !important; /* entspricht --DLL-hellblau, Transparenz funktioniert aber nur mit rgba() */
    text-transform: initial;
}

#main .carousel-caption a {
    color: white;
    font-style: italic;
}

/* -- END Caption stylen -- */

/* -- Mobile Anpassungen -- */

@media (max-width: 767px) { 
    .carousel-caption {
        position: absolute;
    }

    .carousel-caption h3 {
        font-size: 16px;
    }

    .carousel-caption h2, .carousel-caption p {
        font-size: 14px;
    }

    .carousel-caption {
        bottom: 0px !important;
    }

    .cc-ueberschrift {
        margin-bottom: 120px !important;
        right: -25px !important;
    }
}

@media (max-width: 1199px) { 
    .carousel-caption {
        bottom: 20px;
    }
    .cc-ueberschrift {
        right: 45px;
    }
    .cc-ueberschrift {
        margin-bottom: 140px;
    }
}

/* -- Mobile Anpassungen -- */
/* --- END Carousel allgemein (aufbauend auf Bootstrap 3.3.7) --- */

/* --- Toggleable / Dynamic Tabs --- */
.reiter h1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0px;
}

.reiter .nav-tabs > li > a {
    border-radius: 0px;
    margin-bottom: -1px; /* muss border-bottom überdecken */
    margin-right: 0px;
    border: 2px solid transparent;
}

.reiter .nav-tabs > li.active > a {
    border: 2px solid var(--university-main-color);
    border-bottom-color: transparent;
}

.reiter .nav-tabs {
    border-bottom: 2px solid var(--university-main-color);
}

#main .reiter .nav a, #main .reiter .nav a:hover, #main .reiter .nav a:visited {
    color: var(--university-main-color);
    font-weight: bold;
}

.reiter .nav > li > a:hover {
    background-color: #eee;
}

.reiter .nav > li > a:focus {
    background-color: white;
}
/*-- END Toggleable / Dynamic Tabs --- */

/* --- Akkordeon --- */

.panel {
    border: none;
    box-shadow: none;
}

.panel-group .panel {
    border-radius: 0px;
}

.panel-heading {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    margin-bottom: 8px;
}

.panel-group .panel-heading {
    border: 4px solid #13306a;
    background: white;
}

.panel-group h3 {
    background: #13306a;
    color: #fff;
    text-align: center;
    margin: 0 0 8px;
    padding: 8px 2px;
    font-weight: normal;
}

.panel-title a {
    color: #13306a !important;
    text-align: center;
    font-style: normal;
    font-weight: normal;
}

.panel-body {
    text-align: initial;
    font-size: initial;
    border-left: 4px solid #13306a;
    border-bottom: none;
    margin-bottom: 8px;
    text-align: justify;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}

.collapse-button:not(.transparent) {
    background: transparent;
}

.collapse-button::before {
    left: -5px;
    padding-top: 2px;
    background: var(--university-main-color);
}

.panel-kategorie {
    margin-bottom: 30px;
}
/* --- END Akkordeon --- */

/* --- Medien (außer Bilder) --- */

/* -- Videos -- */

video {
    box-shadow: 0px 0px 10px 0px #bbb;
}

/* -- END Videos -- */

/* -- iFrames -- */

iframe {
    display: block;
    width: 100%;
}

.iframe-video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.iframe-video {
    position: relative;
    padding-bottom: 56.25% !important;
}

.iframes {
    box-shadow: 0px 0px 10px 0px #bbb;
    margin: 15px 0px;
    padding-bottom: 0px;
}

#main .iframe-untertitel a, .iframe-untertitel {
    font-size: 12px;
    color: #bbb !important;
}

#main .iframe-untertitel a {
    font-weight: bold;
}

.iframe-untertitel {
    padding: 10px;
    text-align: center;
}

/* --- END Medien (außer Bilder) --- */

/* --- Übersichts-Seiten --- */

/* -- Übersichts-Seiten (allgemein) -- */

.katalog-spalten figure {
    border: initial;
    padding: initial;
    margin-top: 15px;
    box-shadow: initial;
}

.katalog-spalten h1 {
    font-family: Impact, Charcoal, sans-serif; /* Auswahl begrenzt; MUSS web-sicher sein */
    font-size: 26px;
    text-align: center;
    position: relative;
    bottom: 93px;
    margin-bottom: -80px;
    padding: 15px;
    background-color: rgba(77,156,194,0.75);
    color: white;
}

.katalog-spalten p {
    margin: 20px 0px;
}

.katalog-spalten .col-sm-6 {
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
    width: 47%;
    padding-bottom: 15px;
}

.katalog-spalten .col-sm-6:first-of-type {
    margin-right: 1%;
}

.katalog-spalten .col-sm-6:last-of-type {
    margin-left: 1%;
}

.katalog-spalten .platzhalter {
    width: 2%;
    padding-left: 0px;
    padding-right: 0px;
}

.katalog-spalten .col-sm-6.platzhalter {
    box-shadow: none;
}

/* - Höhenausgleich der Spalten - */

.katalog-spalten .row {
    display: table;
    margin-bottom: 15px;
}

.katalog-spalten .col-sm-6 {
    display: table-cell;
    float: none;
}

/* - END Höhenausgleich der Spalten - */

/* - Button am Ende der Spalte platzieren - */

.katalog-spalten p {
    padding-bottom: 35px;
}

.katalog-spalten button {
    position: absolute;
    bottom: 15px;
}

/* - END Button am Ende der Spalte platzieren - */

/* -- END Übersichts-Seiten (allgemein) -- */

/* -- Ansprechpartner () -- */

.ansprechpartner figure {
    margin: 0 -15px;
}

.ansprechpartner h1 {
    font-family: inherit;
    font-weight: bold;
    font-size: 32px;
    text-align: left;
    bottom: initial;
    margin-bottom: 10px;
    padding: initial;
    background-color: initial;
    color: var(--university-main-color);
}

.ansprechpartner h2, .ansprechpartner p {
    margin: 0 0 10px;
}

.ansprechpartner h2 {
    font-size: 18px;
    color: grey;
}

.ansprechpartner p {
    padding-bottom: initial;
}

.ansprechpartner button {
    position: initial;
    width: 100%;
}

/* - Ansprechpartner (Personen-ID) - */

.ansprechpartner-personen-id p {
    margin-top: 50px;
}

.ansprechpartner-personen-id p:first-of-type {
    margin-top: inherit;
}

.ansprechpartner-personen-id .row {
    width: 100%;
    margin-left: 0px;
}

.ansprechpartner-personen-id .col-sm-6:first-of-type, .ansprechpartner-personen-id .col-sm-6:last-of-type {
    width: 48%;
}

.ansprechpartner-personen-id .platzhalter {
    width: 4%;
}
/* - END Ansprechpartner (Personen-ID) - */
/* -- END Ansprechpartner -- */

/* -- Mobile Anpassungen -- */

@media (max-width: 767px) { 
    .katalog-spalten .col-sm-6 {
        width: 100% !important;
        float: inherit;
        display: block;
        padding-top: 1px; /* Bug: sollte eigentlich 15px sein, allerdings werden 15px bereits addiert, ab dem man hier 1px eingibt, während tatsächlich 0px angezeigt werden, wenn hier 0px steht */
    }

    .katalog-spalten .col-sm-6:last-of-type {
        margin-left: initial;
    }
}

@media (max-width: 991px) { 
    .katalog-spalten h1 {
        font-size: 19px;
        bottom: 85px;
    }
}

/* -- END Mobile Anpassungen -- */
/* --- END Übersichts-Seiten --- */

/* --- Übersichtsreihen --- */

.katalog-reihen .row {
    padding: 25px 0px;
}

.katalog-reihen .text-center img {
    width: 100%;
    max-width: 200px;
}

.katalog-reihen h1 {
    margin-bottom: 16px;
    font-weight: bold;
}

.katalog-reihen .listenebene-1 li {
    margin-bottom: 8px; /* 2x normaler Abstand */
    text-align: left;
}

.katalog-reihen .text-center {
    padding-top: 25px;
}

.katalog-reihen .text-center h1 {
    text-align: center;
    margin-top: -25px;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
}

.katalog-reihen h3:first-child {
    margin-top: 0px;
}

.katalog-reihen .row {
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
    margin: 15px 0;
}

/* -- END Alternative für Katalog-Reihen -- */



/* -- Katalog-Reihen für Archive -- */
.archiv h2, .archiv h3 {
    padding-left: 15px;
    padding-right: 15px;
}

.archiv h2 {
    font-size: 32px;
}

.archiv h3 {
    font-size: 26px;
    margin-top: 0px;
}

.archiv-datum {
    color: #aaa;
    margin-top: 15px;
}

.archiv .archiv-zeitraum {
    margin-bottom: 60px;
}

.archiv-titelbild-dummy {
    background-color: #777;
    padding: 33px 0;
    text-align: center;
    color: #ccc;
    font-size: 64px;
}
/* -- END Katalog-Reihen für Archive -- */

/* -- sollte generalisiert werden -- */

.status-standard {
    display: inline;
    /* opacity: 1; 
    transition: all 0.3s; */
}

.status-hover {
    display: none;
    /* opacity: 0; 
    transition: all 0.3s */
}

/* -- END sollte generalisiert werden -- */
/* --- END Übersichtsreihen --- */

/* --- Übersichtskacheln --- */

/* Bug: Wenn der Zeiger eine Sekunde über einer Kachel bleibt, ändert sich die Höhe leicht. In der alten Struktur trat dieses Problem nicht auf. */
    
.katalog-kacheln .col-xs-6 {
    padding: 0;
}

.katalog-kacheln a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    transition: 0.6s ease;
}

.katalog-kacheln .col-xs-6:hover a {
    opacity: 1;
}

/* -- Alternative-1 (nicht komplett als jpg) -- */

.katalog-kacheln.alternative-1 .row {
    margin-left: 0px;
    margin-right: 0px;
}

.katalog-kacheln.alternative-1 .col-sm-6 {
    padding: 5px;
    font-size: 20px;
    text-transform: uppercase;
    transition: 0.2s;
    text-align: left;
}

.katalog-kacheln.alternative-1 .col-sm-6:hover {
    box-shadow: 0px 0px 10px 0px #bbb;
}

.katalog-kacheln.alternative-1 a {
    position: initial;
    opacity: initial;
    color: var(--DLL-zusatzblau) !important;
}

.katalog-kacheln.alternative-1 img {
    width: 64px;
    margin-right: 10px;
}

.katalog-kacheln.alternative-1 img, .katalog-kacheln.alternative-1 span {
    display: inline-block;
    vertical-align: middle;
}

/* -- END Alternative-1 (nicht komplett als jpg) -- */

/* -- Alternative-2 -- */

.katalog-kacheln.alternative-2 .col-sm-6 {
    border: 3px solid white;
    border-radius: 15px;
    font-weight: bold;
    text-transform: initial;
}

.katalog-kacheln.alternative-2 .col-sm-6:hover {
    box-shadow: initial;
    border-color: var(--DLL-zusatzblau);
}

/* -- END Alternative-2 -- */
/* --- END Übersichtskacheln --- */

/* --- Alerts --- */

.meldungen {
    border: 2px solid var(--university-main-color);
}

.meldungen h1, .meldungen p {
    font-size: 18px;
}

.meldungen h1 {
    background-color: var(--university-main-color);
    color: white;
    margin-top: 0px;
    padding: 15px;
    font-weight: bold;
}

.meldungen.info h1::before {
    font-size: 23px;
    position: relative;
    top: 2px;
    line-height: 18px;
}

.meldungen.temporaer h1::before {
    font-size: 14px;
    font-family: "Font Awesome 5 Free";
    content: "\f017";
    margin-right: 5px;
}

.meldungen p {
    padding: 0 15px;
}

.meldungen.alternative-1 {
    border-color: var(--DLL-hellblau);
}

.meldungen.alternative-1 h1 {
    background-color: var(--DLL-hellblau);
}

/* -- Button zum Ausblenden -- */

.ausblenden-btn {
    color: white;
    float: right;
    font-size: 30px;
    cursor: pointer;
    position: relative;
    right: 15px;
    top: 5px;
    opacity: 1;
    transition: 0.3s;
}

.ausblenden-btn:hover {
    font-weight: bold;
}

/* -- END Button zum Ausblenden -- */

/* -- Info-Alerts -- */

.meldungen.info h1::before {
    content: "ⓘ ";
}

/* -- END Info-Alerts -- */

/* -- Störungsfälle -- */

.meldungen.stoerungsfall {
    width: 50%;
    margin-left: 25%;
    border-color: var(--DLL-kontrastfarbe);
}

.meldungen.stoerungsfall h1 {
    background-color: var(--DLL-kontrastfarbe);
}

/* -- END Störungsfälle -- */



/* -- Meldungen innerhalb von Akkordeons und der Sidebar -- */

.panel-body .meldungen {
    margin: 15px;
    margin-top: 5px;
}

aside .meldungen {
    margin-top: 5px;
    margin-bottom: 15px; 
}

.panel-body .meldungen h1, .panel-body .meldungen p, aside .meldungen h1, aside .meldungen p {
    font-size: 12px;
    color: var(--main-text-color);
}
.panel-body .meldungen h1, aside .meldungen h1 {
    background-color: transparent !important;
    padding: 10px 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid var(--DLL-hellblau);
    font-weight: initial;
}

.panel-body .meldungen p, aside .meldungen p {
    padding: 0 10px;
}

.panel-body .meldungen.info h1::before, aside .meldungen.info h1::before {
    font-size: 22px;
    line-height: 0px;
    top: 4px;
}

.panel-body .meldungen.temporaer h1, aside .meldungen.temporaer h1 {
    padding: 7px 5px;
} /* Aus irgendeinem Grund sind die Überschriften der Meldungen sonst unterschiedlich hoch */

.panel-body .meldungen.temporaer h1::before, aside .meldungen.temporaer h1::before {
    font-size: 14px;
    line-height: 18px;
    top: 0px;
}

/*.meldungen.ungeschuetzt h1::before {
    content: "? ";
    font-size: 16px;
    top: 0px;
}*/

.panel-body .ausblenden-btn, aside .ausblenden-btn {
    color: var(--main-text-color);
    font-size: 22px;
    top: 0px;
}

aside .ausblenden-btn {
    top: 2px;
    right: 7px;
}

/* -- END Meldungen innerhalb von Akkordeons -- */

/* -- Mobile Anpassungen -- */

@media (max-width: 767px) { 
    .meldungen.stoerungsfall {
        width: initial;
        margin-left: initial;
    }

    .meldungen.stoerungsfall .col-md-6 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .meldungen.stoerungsfall .col-md-3 {
        min-height: 0px;
    }
}

@media (min-width: 768px) { 
    .meldungen.stoerungsfall {
        border: none;
    }

    .meldungen.stoerungsfall .col-md-3 {
        display: none;
    }

    .meldungen.stoerungsfall .col-md-6 {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        border: 2px solid var(--DLL-kontrastfarbe);
        float: initial;
    }
}

/* -- END Mobile Anpassungen -- */
/* --- END Alerts --- */

/* --- Interviews --- */

.interview-frage {
    font-weight: bold;
}

.interview-disclaimer {
    font-style: italic;
    text-align: right;
}
/* --- END Interviews --- */

/* --- Popover --- */

/* Aktuell sind die Popover anhand der Ansprechpartner gestaltet. Es könnte sein, dass für andere Seiten bzw. Anwendungssituationen der Popover-Bereich im Stylesheet nochmal überarbeitet werden müsste. */

.popover {
    left: 13px !important;
    max-width: initial;
    margin-right: 13px;
    line-height: inherit;
    font-family: inherit;
    font-size: 14px;
    border: none;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
    z-index: 99; /* Verdeckt sonst die Navbar */
}
/* --- END Popover --- */

/* --- Sitemap / Menü-Erweiterung --- */

.nav-kategorie h3 {
    text-transform: uppercase;
    background-color: var(--DLL-assigned-color);
}

.nav-kategorie h3 {
    color: white;
    font-size: 20px;
    font-weight: normal;
    padding: 8px;
}

#dll-sitemap .nav-kategorie h3 a {
    color: white;
}

.subkategorie-container {
    margin-bottom: 20px;
}

.subkategorie-container:last-of-type {
    margin-bottom: 0px;
}

.subkategorie-container h4 {
    font-style: normal;
    color: var(--main-text-color);
    text-transform: uppercase;
    font-weight: normal;
}

.subkategorie-container a {
    font-size: 15px;
    text-align: left;
}

.subkategorie-container div {
    text-align: left;
    line-height: 0.8;
    margin-top: 5px;
}

.subkategorie-container {
    color: #aaa;
    font-size: 15px;
}
/* --- END Sitemap / Menü-Erweiterung --- */

/* --- Sidebar --- */

aside .abschnitt {
    margin-top: 25px;
}

aside .abschnitt:first-of-type {
    margin-top: initial;
}

.abschnitt h1 {
    font-size: 16px;
    font-weight: bold;
    margin-top: initial;
}

.abschnitt h2 {
    font-size: 16px;
}

aside p.text {
    margin: 0px;
} /* Höhe des Paragraphen neutralisieren, der zu Beginn der ersten Box automatisch von GCMS eingefügt wird */ 

#foerderungen img {
    max-height: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* -- Mobile Anpassung -- */

@media (max-width: 767px) { 
    .separator img {
        max-width: 310px;
    }

    .side-image {
        max-width: 370px;
    }
}

/* -- END Mobile Anpassung -- */

/* -- Ansprechpartner-Schildchen -- */

/* - Ansprechpartner-Schildchen allgemein - */

.ansprechpartner-schildchen {
    background-color: white;
    border-radius: 30px;
    font-size: 14px;
    margin-top: 15px;
}

.ansprechpartner-schildchen:first-of-type {
    margin-top: initial;
}

.ansprechpartner-schildchen img {
    border-radius: 50%;
    width: 60px;
    float: left;
    margin-right: 15px;
}

.ansprechpartner-schildchen .ansprechpartner-text {
    min-height: 60px;
    border-radius: 5px;
    padding-top: 4px;
}

/* - END Ansprechpartner-Schildchen allgemein - */

/* - Ansprechpartner-Erweiterung - */
.ansprechpartner-bild {
    position: relative;
}

.ansprechpartner-bild img {
    opacity: 1;
    display: block;
    height: auto;
    transition: 0.4s ease;
    backface-visibility: hidden;
}

.ansprechpartner-bild:hover img {
    opacity: 0.3;
}

.ansprechpartner-bild:hover .plus-zeichen-container {
    opacity: 0.5;
}

.plus-zeichen-container {
    transition: 0.4s ease;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    left: 30px;
    top: 30px;
}

.plus-zeichen {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: var(--DLL-hellblau);
    position: relative;
}
.plus-zeichen::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: #fff;
    height: 6px;
    margin-top: -3px;
    left: 12px;
    right: 12px;
    top: 50%;
}
.plus-zeichen::before {
    content: " ";
    position: absolute;
    display: block;
    background-color: #fff;
    width: 6px;
    margin-left: -3px;
    top: 12px;
    bottom: 12px;
    left: 50%;
}

.modal-content {
    position: absolute;
    padding: 10px;
}

.modal-dialog {
    width: 400px;
    margin: 0px auto;
}

.modal-dialog-centered {
    /* 1:1 aus Bootstrap 4 übernommen */
    min-height: calc(100% - 3.5rem);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal.ansprechpartner .modal-content {
    border-radius: 0px;
    border: none;
}

.modal.ansprechpartner .modal-header {
    border: none;
    padding-bottom: 0px;
}

.modal .ansprechpartner button {
    padding-left: 15px;
    padding-right: 15px;
}

.modal.katalog-spalten.ansprechpartner button.close {
    position: relative;
    float: inherit;
    top: 0px;
    left: 335px;
    padding-right: 5px;
    padding-left: 15px;
    width: 30px;
}

.modal.ansprechpartner h1 {
    margin-top: -20px;
    margin-bottom: 5px;
}

.modal.ansprechpartner h2 {
    margin: 0px;
}

.modal.ansprechpartner figure {
    margin: inherit;
}

.modal.ansprechpartner table {
    margin-top: 15px;
    margin-bottom: 15px;
}

.modal.ansprechpartner td {
    text-align: left;
    padding: 0px;
}

.modal.ansprechpartner .fa {
    margin-right: 5px;
}

.modal.ansprechpartner, .modal.ansprechpartner .btn-primary {
    font-size: 16px;
    cursor: inherit;
}

.modal.ansprechpartner .btn-primary:hover, .modal.ansprechpartner .btn-primary:active, .modal.ansprechpartner .btn-primary:focus {
    color: white;
    background-color: var(--university-main-color) !important;
    border: solid 2px var(--university-main-color) !important;
}

.modal.ansprechpartner .btn-primary {
    margin-bottom: 5px;
}

.modal.ansprechpartner p {
    color: var(--main-text-color-lighter);
    font-size: 10px;
    margin-top: 15px;
    margin-bottom: 0px;
    text-align: justify;
}
/* - END Ansprechpartner-Erweiterung - */

/* - Tabs (aus Bootstrap 3.3.7) umstylen - */

.ansprechpartner-schildchen .nav-tabs > li {
    margin-right: 5px;
    cursor: pointer;
}

.ansprechpartner-schildchen .nav-tabs {
    border-bottom: initial;
}

.ansprechpartner-schildchen .nav-tabs > li > a, .ansprechpartner-schildchen .nav-tabs > li > a:focus, .ansprechpartner-schildchen .nav-tabs > li > a:hover {
    border: initial;
}

.ansprechpartner-schildchen .nav > li > a {
    padding: initial;
}

#main .ansprechpartner-schildchen li:not(.active) a, #main .ansprechpartner-schildchen li:not(.active) a:hover, #main .ansprechpartner-schildchen li:not(.active) a:visited {
    color: var(--main-text-color);
}

.ansprechpartner-schildchen .nav > li > a:focus, .ansprechpartner-schildchen .nav > li > a:hover {
    background-color: initial;
}

/* - END Tabs (aus Bootstrap 3.3.7) umstylen - */

/* - Externe Ansprechpartner - */

#kontakt-extern {
    margin-top: 15px;
}

#kontakt-extern .ansprechpartner-schildchen {
    border-radius: 5px;
}

#kontakt-extern .ansprechpartner-schildchen .ansprechpartner-text {
    padding: 5px 10px;
}

/* - Mobile Anpassung - */

.ansprechpartner-schildchen td {
    text-align: left;
    padding: 1px;
}

.ansprechpartner-schildchen table {
    margin-top: 5px;
}

@media screen and (max-width: 1199px) {
    .ansprechpartner-schildchen {
        padding-left: 10px;
        border-radius: 5px !important;
    }

    .ansprechpartner-schildchen img {
        display: none !important;
    }

    .plus-zeichen-container {
        display: none;
    }
}

/* Small devices (landscape phones, 576px and up ) */
@media (max-width: 767px) { 
    .ansprechpartner-schildchen .ansprechpartner-text {
        min-height: 46px;
    }

    .ansprechpartner-schildchen {
        max-width: 310px;
    }
}

/* - END Mobile Anpassung - */


/* -- END Ansprechpartner-Schildchen -- */

/* -- Bildnachweise -- */

#bildnachweise p {
    font-size: 10px;
}

/* -- END Bildnachweise -- */

/* -- Förderungen -- */

#foerderungen img {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* -- END Förderungen -- */
/* --- END Sidebar --- */

/* --- Formulare --- */

form th, form td {
    text-align: left;
}

form .radio {
    margin-left: 40px;
    font-weight: normal;
}

form {
    margin-top: -60px;
}

#lethe_eshgbu68o09-form form {
    margin-top: initial;
}

font.ueberschrift {
    display: none; /* alternativ: block */
}

p.text .ueberschrift {
    display: none;
}

.radio-reihe input {
    margin-left: 20px;
}

.radio-reihe input:first-of-type {
    margin-left: initial;
}

#recaptcha_image img {
    width:90%;
} /* Lethe Newsletter Style */

/* -- Elemente, die über das GCMS-Formular-Modul zugewiesen werden müssen -- */

form h4 {
    /* h4 muss im GCMS-Formular-Modul zugewiesen werden */
    font-weight: bold;
    font-size: 18px;
    color: var(--main-text-color);
}

form h5 {
    font-size: 18px;
    text-decoration: underline;
    margin-top: 25px;
}

label.check {
    font-weight: normal;
}

/* -- END Elemente, die über das GCMS-Formular-Modul zugewiesen werden müssen -- */

/* Grundsätzlich kann man Klassen über das GCMS-Formular-Modul zwar zuweisen, allerdings sind einige Elemente (z.B. Inputfelder) davon ausgeschlossen. I.d.R. sollten Klassen daher über JavaScript zugewiesen werden. Für solche Elemente, für die manche Eigenschaften einer Klasse nicht passen, aber trotzdem diese Klasse über JavaScript bekommen, weil der Selektor der gleiche ist, wäre es sinnvoll ihnen Klassen direkt über das GCMS-Formular-Modul zuzuweisen - sofern dies möglich ist. 

WICHTIG: Wenn man Klassen über das GCMS-Formular-Modul zuweist, DARF dies NICHT mit normalen (doppelten) Anführungsstrichen "" geschehen, SONDER MUSS mit einfach Anführungsstrichen '' passieren! (Problem: Selbst mit dieser Lösung ändert dies etwas an der Benutzeroberfläche des GCMS-Formular-Moduls, wenn die Klasse über ein div- oder span-Element zugewiesen wird. Zumindest bei einem h4-Element tritt dieser Effekt nicht auf.) */

/* -- Neue Klassen, die anschließend mit JavaScript zugewiesen werden -- */

.verlinkung {
    text-decoration: none;
}

.formular-textarea-u-input-bezeichnung {
    font-weight: normal;
    color: var(--main-text-color-lighter);
    font-size: 14px;
}

.formular-textarea-u-input-eingabe {
    border-color: var(--main-text-color-lighter);
    color: var(--main-text-color);
    height: inherit;
    font-size: inherit;
    padding: 6px !important;
}

/* -- END Neue Klassen, die anschließend mit JavaScript zugewiesen werden -- */

/* -- Klassen, die anschließend mit JavaScript zugewiesen werden, aber bereits anderweitig im Stylesheet definiert sind -- */

form .btn {
    width: initial !important;
}

form .form-control:focus {
    border-color: var(--university-main-color);
}

/* -- END Klassen, die anschließend mit JavaScript zugewiesen werden, aber bereits anderweitig im Stylesheet verwendet werden -- */

/* -- Neue Klassen, die über das GCMS-Formular-Modul zugewiesen werden -- */

.formular-gruppen-ueberschrift {
    border-top: 4px solid #eee;
    padding-top: 20px;
    margin-top: 25px;
}

/* -- END Neue Klassen, die über das GCMS-Formular-Modul zugewiesen werden -- */
/* --- END Formulare --- */