/* This file contains our own customizations, to adjust the templates to
 * the current AIP needs.
 *
 * Kristin Riebe, AIP, September 2020
 */


/* ul and ol margins: no margin-top in sublists (as is used in bootstrap as well */
ul ul, ul ol, ol ol, ol ul { margin: 0rem 0; }

@media (min-width: 576px) { ul ul, ul ol, ol ol, ol ul  { margin: 0rem 0; } }


/* heading sizes */
/* more consistent heading sizes over all devices; h1 should always be the largest */
h1 { font-size: 1.3rem; line-height: 1.33333; color: #002c57; }
@media (min-width: 576px) { h1 { font-size: 1.875rem; line-height: 1.34615; } }

h2 { font-size: 1.0rem; line-height: 1.25; color: #002c57; }
@media (min-width: 576px) { h2 { font-size: 1.525rem; line-height: 1.26667; } }

/* when changing h3, all h3 values in sidebars etc. need to be corrected as well */
/* h3 { font-size: 0.975rem; line-height: 1.14286; color: #002c57; }
@media (min-width: 576px) { h3 { font-size: 1.125rem; line-height: 1.16667; } }
*/



/* top margin for headings
 * -- use the same amount for all headings
 * -- use same top and bottom margin (as in editor)
 * -- use same margin as in p
 */
h2 { margin-top: 0.75rem; margin-bottom: 0.75rem;}
h3 { margin-top: 0.75rem; margin-bottom: 0.75rem;}
@media (min-width: 576px) {
    h2 { margin-top: 0.75rem; margin-bottom: 0.75rem;}
    h3 { margin-top: 0.75rem; margin-bottom: 0.75rem;}
}


/* increase small logo views and minimized AIP logo a bit */
.header__logo { position: relative; width: 6.875rem; align-self: center; }
@media (min-width: 576px) { .header__logo { width: 10.4625rem; } }
@media (min-width: 1200px) { .header__logo { grid-row: 1 / 3; width: 20.25rem; } }  /* needs to be repeated here */
@media (min-width: 1200px) { .header--minimized .header__logo { width: 14rem; padding-top: 5rem; } }



/* only in few cases, an h3 element is allowed within an contact item;
 * if the h3-item is the first one, suppress the top margin */
.intro__contact-item h3:first-child {
    margin-top: 0;
}


.intro__contact-item:not(:first-child) { margin-top: 1.125rem; }

@media (min-width: 576px) { .intro__contact-item:not(:first-child) { margin-top: 1.875rem; } }

.intro__contact-item-part:not(:first-child) { margin-top: 0.9375rem; }
@media (min-width: 576px) { .intro__contact-item-part:not(:first-child) { margin-top: 1.4625rem; } }



/* NOTE: color #8cbee6 should only be used on dark bg; for white background use #4675a3 instead */

#wrapper {
  overflow: auto;  /* do NOT hide overflowing content */
}


.header {
    z-index: auto;  /* no extra z-index required, since #header z-index is already set (40)! Needed to avoid covering of flyout menu! */
}

#aside {
    z-index: auto; /* set to auto, so quicklinks and flyout can have different z-index
    with respect to header; i.e.: quicklinks with lower z-index than header,
    flyout with higher z-index */
}

#aside .quick-links {
    z-index: 30;
}

#footer {
    z-index: 5;  /* so awesomplete menu at institute > team is visible above footer! */
}

/* less margin in flyout menu for quick links, so Intranet fits there without line breaks on small devices */
.flyout__quick-item { margin: 0 0.25rem; }
@media (min-width: 576px) { .flyout__quick-item { margin: 0 0.625rem; } }

/* cursor for close-sign */
.flyout__close {
    cursor: pointer;
}


/* mark external links: */
a[href].external-link:not([href*='www.aip.de']):not([href*='webapp.aip.de']):not([href*='public.aip.de']):not([href^='#']):not([href^='/']):after {
    content: '\f35d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-left: 5px;
}

/* same page anchors:
 * shift the actual anchor up, so the fixed header won't cover the content */
.anchor {
    position: relative;
}
.anchor a {
    position: absolute;
    left: 0px;
    top: -80px;
}

@media (min-width: 576px) {
  .anchor a {
    position: absolute;
    left: 0px;
    top: -126px;
  }
}

@media (min-width: 1200px) {
  .anchor a {
    position: absolute;
    left: 0px;
    /*top: -176px;*/
    top: -236px;
  }
}

.small {
    font-size: 0.75rem; /* may need to be adjusted for mobile/large desktop */
}
@media (min-width: 576px) { /* was: 920! */
    .small {
        font-size: 0.85rem;
    }
}

.child-p-margin-0 p:first-child {
    margin-top: 0px;
}

.awesomplete {
    color: #505050;
}

/* 404 search part style */
.search-results li {
    margin-bottom: 0.5rem;
}
.search__breadcrumbs-list { display: inline; font-size: 85%; margin: 0; padding: 0;}
.search__breadcrumbs-list li { display: inline; }
.search__breadcrumbs-list li:not(:first-child)::before { content: '»'; }
.search__breadcrumbs-list li a { color: #505050; }
.night-theme .search__breadcrumbs-list li a { color: #fff; }

.search-results-pagination-navigation {
    margin-top: 2rem;
    text-align: center;
}
.search-pagination-num {
    display: inline;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.search-pagination-num.current-pagination-num {
    font-weight: bold;
}

/* Grid layout additions for 2 + 1 layout */
.intro__twocol {
    grid-column: 1 / 3;
    order: 1;
}

@media (min-width: 992px) {
    .intro__twocol {
        grid-column: 1 / 3;
        order: 1;
    }
}



/* if intro__copy text needs to stretch two columns,
 * keep it at order 1 even on small displays */
.intro__copy__twocol {
    grid-column: 1 / 2;
    order: 1;
}

@media (min-width: 992px) {
    .intro__copy__twocol {
        grid-column: 1 / 3;
        order: 1;
    }
}

/* no extra margin at beginning of twocol, e.g. on standard page */
/* there is a div for the anchor just before each headline, therefore look for
 * a headline as 2. child (do not want the first of type h2 etc., but really only the very first headline */

.intro__twocol .section-publications-list h2:nth-child(2),
.intro__twocol .section-publications-list h3:nth-child(2) {
    margin-top: 0;
}

/* and on standard page, if the page starts with a text block with headline */
/* was: .intro__twocol .block-text:first-child h3:nth-child(2), etc. */
/* problem is: sometimes want to align text + image or whatever, thus rather remove
 * extra headline margin at beginning of each text block */

.intro__twocol .block-text h2:nth-child(2),
.intro__twocol .block-text h3:nth-child(2),
.intro__twocol .block-text h4:nth-child(2),
.intro__twocol .block-text h5:nth-child(2) {
    margin-top: 0;
}

/* sometimes there may be first an image block or something else, then the text block,
 * so take care of this as well */
/*.intro__twocol section:not(.block-text):first-child + section.block-text h2:nth-child(2),
.intro__twocol section:not(.block-text):first-child + section.block-text h3:nth-child(2) {
    */
/* if restricting only to the very first block + text block, then text blocks cannot be correctly aligned
 * with images. */
/* it is easier to add some line breaks at the end of a section; removing whitespace is not possible for the editor. */
/*.intro__twocol section:not(.block-text) + section.block-text h2:nth-child(2),
.intro__twocol section:not(.block-text) + section.block-text h3:nth-child(2) {
    margin-top: 0;
}*/

.intro__twocol .block-text:first-of-type h2:nth-child(2) {
    margin-top: 0;
}

/* section publications page is special, because it may contain empty blocks before the first
 * h2 */
.intro__twocol.section-publications  h2:first-of-type {
    margin-top: 0;
}



.intro__contact-navi {
    margin-top: 1.875rem;
}

/* For intro-twocol + sidebar, the contact-sidebar moves below the main content
 * and thus can span the same range (2 columns, 1+2 of 3) */
.intro__contact.no-sidebar-border {
    border: 0;
    padding-left: 0;
    grid-column: 1 / 3;
}

/* On larger display, the contact-sidebar is in the 3. column. */
@media (min-width: 992px) {
  .intro__contact.no-sidebar-border {
    grid-column: 3 / 3;
  }
}

.sidebar-border {
    border-top: 0;
    padding-top: 0;
    border-left: 0.125rem solid #d0d4d7;
    padding-left: 1.875rem;
}


.intro__contact_items_navi.sidebar-border {
    border-top: 0.125rem solid #d0d4d7;
    padding-top: 0.625rem;
    border-left: 0;
    padding-left: 0;
}

@media (min-width: 576px) {
    .intro__contact_items_navi.sidebar-border {
        padding-top: 1.875rem;
    }
}
@media (min-width: 992px) {
    .intro__contact_items_navi.sidebar-border {
        border-top: 0;
        padding-top: 0;
        border-left: 0.125rem solid #d0d4d7;
        padding-left: 1.875rem;
    }
}

/* less margin at intro contact copy (contact items at news in sidebar) */
.intro__contact-copy { margin: 0.46875rem 0 0; }

@media (min-width: 576px) { .intro__contact-copy { margin: 0.59375rem 0 0; } }

/* suppress hyphenation in contact names */
.intro__contact-title {
    -webkit-hyphens: none; -ms-hyphens: none; hyphens: none;
}


/* projects: no margin for first contact-item or footer */

.intro__contact-body > div:first-child {
    margin-top: 0;
}

.text-p-margin {
   margin-top: 0.75rem;*/
}





/* rewrite intro_body grid template to include image+contact and the text, used for newspage */
.intro__image_contact_text { display: grid; grid-column-gap: 0.9375rem; grid-template-columns: minmax(0, 22.5rem) 10.625rem; justify-content: space-between; }

@media (min-width: 576px) { .intro__image_contact_text { grid-column-gap: 1.875rem; grid-template-columns: minmax(0, 28rem) 15.625rem; } }

@media (min-width: 992px) { .intro__image_contact_text { grid-template-columns: minmax(0, 22.5rem) 22.5rem 15.625rem; } }

@media (min-width: 992px) { .intro--large .intro__image_contact_text { grid-template-columns: minmax(0, 52.5rem) minmax(12.5rem, 15.625rem); } }

.intro__image_contact_text .intro__image { order: 1; grid-column: 1 / span 1; grid-row: 1 / span 1; }

/*.intro__image img { display: block; width: 100%; height: auto; }*/

.intro__image_contact_text .intro__contact { order: 2; grid-column: 2 / span 1; grid-row: 1 / span 1; }
@media (min-width: 992px) {
    .intro__image_contact_text .intro__contact {
        grid-column: 2 / span 1; grid-row: 1 / span 2; }
}
.intro__image_contact_text .intro__contact .intro__contact-body { flex: none; }

.intro__image_contact_text .intro__text { order: 3; position: relative; margin-top: 1.875rem; margin-bottom: 1.875rem;
    grid-column: 1 / span 2; grid-row: 2 / span 1;
}
@media (min-width: 992px) {
    .intro__image_contact_text .intro__text {
        grid-column: 1 / span 1; grid-row: 2 / span 1;
    }
}
@media (min-width: 576px) { .intro__text { margin-top: 2.25rem; margin-bottom: 2.25rem; } }
@media (min-width: 768px) { .intro__text { margin-top: 3.75rem; margin-bottom: 3.75rem; } }


/* alternative grid template for newspage, old news style with text floating around image;
 * actually, only the rule for > 992px counts, because below that should switch back to the default layout */
.intro__image_contact_text_alternative { display: none; grid-column-gap: 0.9375rem; grid-template-columns: minmax(0, 28rem) 10.625rem; justify-content: space-between; }
@media (min-width: 576px) { .intro__image_contact_text_alternative { display: none; grid-column-gap: 1.875rem; grid-template-columns: minmax(0, 28rem) 15.625rem; } }
@media (min-width: 992px) { .intro__image_contact_text_alternative { display: grid; grid-template-columns: minmax(0, 56rem) minmax(12.5rem, 15.625rem); } }
@media (min-width: 992px) { .intro--large .intro__image_contact_text_alternative { display: grid; grid-template-columns: minmax(0, 56rem) minmax(12.5rem, 15.625rem); } }

.alternative_mobileversion {
    display: grid;
}
@media (min-width: 992px) {
    .alternative_mobileversion {
        display: none;
    }
}

.intro__head__news { position: relative; margin-bottom: 1.875rem; }

@media (min-width: 576px) { .intro__head__news { margin-bottom: 2.8125rem; } }

@media (min-width: 1200px) { .intro--large .intro__head__news { /*max-width: 56rem; margin-right: 17.5rem;*/ } }


/* Configure language switch button, to look like a link */
.header__language-linkbutton {
    background: none !important;
    border: none;
    padding: 0 !important;
    color: inherit; text-decoration: none; transition: color 0.6s;
    font-family: 'PT Sans', sans-serif;
    cursor: pointer;
}

.header__language-linkbutton:hover {
    color: #8cbee6; text-decoration: none; transition: color 0.2s;
}

/* Links that have the main color of a headline */
.headlink {
    color: #002c57;
}

.headlink:hover {
    color: #8cbee6;
}

.night-theme .headlink {
    color: white;
}


.hide {
    display: none;
}

.show {
    display: block;
}

/* Increase line-height */
body {
    line-height: 1.4;
}

.icon-navigation__link-title {
    line-height: 1.25;
}

.night-theme a.icon-navigation__link {
    color: white;
}

/* Adjust line-height and color for intro-text ("Welcome") on landing page */
/* Only needed for larger sizes, because mobile view has a dark background image */
@media (min-width: 576px) {
    .hero-slider__intro-copy { color: #002c57; line-height: 1.25; }
    .night-theme .hero-slider__intro-copy { color: white;}
}

/* Improve contrast when using light blue for text */
.blue-light { color: #2b74ae; } /*#0478d5; */  /* was: #8cbee6; */

/* Increase font size of figure captions */
figcaption {
    font-size: 0.75rem; /* was: 0.625rem; */
    margin-bottom: 0.75rem;
}
/* Decrease margin in figcaption -- better leave it as it is. */
/*figcaption {
    margin-top: 0.25rem;
}*/
figcaption p {
    margin: 0.75rem 0;
}

figcaption p:last-child {
    margin-bottom: 0;
}


.intro__blue {
    color: #002c57;
    margin-bottom: 0.75rem;
}
.night-theme .intro__blue {
    color: white;
}

/* Use inline for paragraphs inside the news introduction, so there is no line break between
 * date and intro; usually there is only paragraph, but we may have more, so add trailing space
 * after inline-<p>, just in case. */
.intro__blue p {
    display: inline;
}
.intro__blue p:after {
    content: ' ';
}

/* Decrease p margin (was: 1.1875rem, 0.9375rem) */
p {
    margin: 0.75rem 0;
}

.child-p-no-margins p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Even further decrease p margin in fig captions */
.img-caption p {
    margin-bottom: 0rem;
}

/* Remove top margin of p in intro__copy and intro__twocol for better top alignment (woith respect to sidebar) */
.intro__copy p:first-child {
    margin-top: 0;
}
.intro__twocol p:first-child {
    margin-top: 0;
}
.intro__copy__twocol p:first-child {
    margin-top: 0;
}
.text-image__copy p:first-child {
    margin-top: 0;
}

.topic-grid .text-col p:first-child {
    margin-top: 0;
}

.employees__item-assignments p {
    margin: 0 0;
}

.block-text p:first-child {
    margin-top: 0;
}

/* Additional space before interim headline */
.head-with-space {
    margin-top: 4rem;
}

.module--space-top-half{ margin-top: 0.9375rem; }
@media (min-width: 576px) { .module--space-top-half { margin-top: 1.875rem; } }

.module--space-bottom-half{ margin-bottom: 0.9375rem; }
@media (min-width: 576px) { .module--space-bottom-half { margin-bottom: 1.875rem; } }


.module--space-top-single { margin-top: 1.875rem; }
@media (min-width: 576px) { .module--space-top-single { margin-top: 3.75rem; } }

.module--space-bottom-single { margin-bottom: 1.875rem; }
@media (min-width: 576px) { .module--space-bottom-single { margin-bottom: 3.75rem; } }

.module-mt-0 {
    margin-top: 0;
}

.module-mb-0 {
    margin-bottom: 0;
}

.module-my-0 {
    margin-top: 0;
    margin-bottom: 0;
}


/* headline adjustments */
.employees h2 {
    position: left;
}


h3.employees-category {
    margin-top: 1.8rem;
    font-size: 0.9rem;
    line-height: 1.1667;
}
@media (min-width: 576px) {
  h3.employees-category {
    margin-top: 2.5rem;
    font-size: 1.25rem;
    line-height: 1.2;
  }
}
/* Remove top space for first h3 employees category for better alignment */
/* -> not needed anymore because first category has no name anymore and is therefore not shown */
/* h3.employees-category:first-of-type {
    margin-top: 0;
} */

.line-spacing-0 {
    margin-top: 0rem; /* default: 0.75rem; if there is some text above (p-margin) */
}
.line-spacing-1 {
    margin-top: 1.5rem;
}
.line-spacing-2 {
    margin-top: 2.25rem;
}
.line-spacing-3 {
    margin-top: 3.0rem;
}
.line-spacing-4 {
    margin-top: 3.75rem;
}
.line-spacing-5 {
    margin-top: 4.5rem;
}

@media (min-width: 576px) {
  .line-spacing-0 {
    margin-top: 0rem;
  }
  .line-spacing-1 {
    margin-top: 1.875rem;
  }
  .line-spacing-2 {
    margin-top: 2.8125rem;
  }
  .line-spacing-3 {
    margin-top: 3.75rem;
  }
  .line-spacing-4 {
    margin-top: 4.6875rem;
  }
  .line-spacing-5 {
    margin-top: 5.625rem;
  }
}

/* clear fix: stop floating after element with this class */
.clear-float::after {
    content: "";
    clear: both;
    display: table;
}

/* Table styles (from bootstrap) */
table {
    border-collapse: collapse;
}

th {
    text-align: inherit;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}
.table td, .table th {
    padding: .75rem;
}

.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
}

.table-striped tr.odd {
    background-color: rgba(0,0,0,.05);
    color: #404040;
}
.night-theme .table-striped tr.odd {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.table-striped tr.even {
    background-color: rgba(0,0,0,0);
}

/* distancing rules */

.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mb-4 {
  margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
  .mb-1 {
    margin-bottom: 0.375rem;
  }
  .mt-2 {
    margin-bottom: 0.75rem;
  }
  .mb-2 {
    margin-bottom: 0.75rem;
  }
  .ml-2 {
    margin-left: 0.75rem;
  }
  .mb-4 {
    margin-bottom: 1.5rem;
  }
}



/* Subheading for projects */
.subheading1 {
  font-family: 'PT Sans', sans-serif;
  font-size: 100%;
  display: block;
}

.publication-headline {
  font-size: 0.75rem;
}

@media (min-width: 576px) {
  .publication-headline {
    font-size: 1rem;
  }
}


/* input search (same as type=text in main.css) */
input[type="search"] {
    display: inline-block;
    border: 1px solid;
    height: 1.75rem;
    border-radius: 0.1875rem;
    padding: 0.3375rem 0.625rem;
    background: transparent;
    box-sizing: border-box;
    font-size: 0.725rem;
    line-height: 1.2;
    color: #002c57;
    background-color: white;
    width: 12.5rem;
    max-width: 100%;
}

input[type="search"]::-webkit-input-placeholder { color: #505050; }

input[type="search"]::-moz-placeholder { color: #505050; }

input[type="search"]:-ms-input-placeholder { color: #505050; }

input[type="search"]::-ms-input-placeholder { color: #505050; }

input[type="search"]::placeholder { color: #505050; }

.aip-btn {
    display: inline-block;
    height: 1.75rem;
    border-radius: 0.1875rem;
    padding: 0.3375rem 0.625rem;
    background: transparent;
    box-sizing: border-box;
    font-size: 0.725rem;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid;
    color: #002c57;
    background-color: white;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.aip-btn:hover {
     background: #d0d4d7;
}

.night-theme .aip-btn {
    background: #002c57;
    border: 1px solid white;
    color: white;
}
.night-theme .aip-btn:hover {
    color: #707070;
     background: white;
}


/* no uppercase in navigation link by default; only enable again for level 1 and 2*/
.header__navigation-link {
    text-transform: none;
}
.header__navigation-link.header__navigation-link--level-1,
.header__navigation-link.header__navigation-link--level-2 {
    text-transform: uppercase;
}

/* replace filter: drop-shadow by box-shadow for header and flyout class (caused black box with Google Chrome on Ubuntu 16.04) */
.header {
    -webkit-filter: none;
    filter: none;
    box-shadow: 0 0.125rem 0.375rem #0000005C;
}


.header__quick-item {
    margin: 0 0.9375rem;
}


.flyout {
    -webkit-filter: none;
    filter: none;
    box-shadow: -0.125rem 0 0.375rem #0000005C;
}

/* Custom research menu classes */
.research-1 {
}


.header__navigation-link.header__navigation-link--level-2.research-2 {
    text-transform: none;
    font-weight: normal;
}

.header__navigation-link.header__navigation-link--level-2.research-3 {
    text-transform: none;
    margin-left: 1.5rem;
    font-weight: normal;
}

.header__navigation-link.header__navigation-link--level-2.research-4 {
    text-transform: none;
    margin-left: 2.5rem;
    font-weight: normal;
    border: 1px solid red;
}

/*
.header__navigation-list--level-2.research-2, .header__navigation-list--level-2.research-3 {
    padding-bottom: 0;
    padding-top: 0;
}
*/

/*
ul.has_children {
    padding-bottom: 0;
}
*/

/* Use dropdown menu where no megamenu is needed */
.header__navigation-level--level-2.dropdown {
    left: auto;
    right: auto;
}


/* make sure that the rightmost element's dropdown list is fully visible by setting its
 * right-value; make sure it does not cover or is covered by the icons */

.header__navigation-item.header__navigation-item--level-1:last-child .header__navigation-level--level-2.dropdown {
    right: 0;
    /* This would not work on large screens and icons may cover the dropdown menu;
     * however menu is in burger-menu form at sizes < 1200px anyway */
}
@media (min-width: 1200px) {
    .header__navigation-item.header__navigation-item--level-1:last-child .header__navigation-level--level-2.dropdown {
        right: 4.6875rem;
    }
}

@media (min-width: 84.375rem) {
    .header__navigation-item.header__navigation-item--level-1:last-child .header__navigation-level--level-2.dropdown {
        right: calc(50% - 600px);
    }
}
@media (min-width: 90rem) {
    .header__navigation-item.header__navigation-item--level-1:last-child .header__navigation-level--level-2.dropdown {
        right: calc(50% - 600px);
    }
}



.header__navigation-list--level-2.dropdown {
    grid-template-columns: none;
}
@media (min-width: 768px) {
    .header__navigation-list--level-2.dropdown {
        padding-left: 1.875rem;
        padding-right: 1.875rem;
    }
}

/* do not show subpages in dropdown menus */
.dropdown div.header__navigation-level.header__navigation-level--level-3 {
    display: none;
}


/* no uppercase in subitems */
.dropdown li a.header__navigation-link.header__navigation-link--level-2 {
    text-transform: none;
}
.dropdown li a.header__navigation-link.header__navigation-link--level-2.header__navigation-link--level-2-parent {
    text-transform: uppercase;
    font-weight: bold;
}

/* decrease the size of the arrow for the mega/dropdown menu */
.header__navigation-link--level-1::after {
    border-right: 0.5rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 0.5rem solid transparent;
}

/* more margin for research menu items with no sub menu */
.header__navigation-item.header__navigation-item--level-2.research-1.research-1-add-margin {
    margin-top: 2.5rem;
}


/* do not show submenu entries, except for research menu */
.flyout__navigation-list.flyout__navigation-list--level-3 {
    display: none;
}


/* flyout menu adjustments for research menu */
.flyout__navigation-link.flyout__navigation-link--level-2.research-1 {
    text-transform: uppercase;
    font-weight: bold;
}


.research-1 ul.flyout__navigation-list.flyout__navigation-list--level-3 {
    margin-left: 0;
    padding-left: 0;
    display: block;
}

/* margin before level 2 navi items in burger menu */
.flyout__navigation-item.flyout__navigation-item--level-2.research-1{
    margin-top: 0.5rem;
}


/* decrease padding of flyout-wrapper to avoid many line breaks */
.flyout__wrapper {
    padding: 2.5rem;
}

button.flyout__navigation-toggler {
    cursor: pointer;
}

button.flyout__navigation-toggler:hover {
    color: #8cbee6;
}

button.header__burger {
    cursor: pointer;
}
button.header__burger:hover {
    color: #8cbee6;
}

/* try a fade-in effect for menu
 * -- requires to set display: block also when the menu is hidden,
 * may not be a good idea on old browser that don't support opacity ...*/
/*.header__navigation-level--level-2 {
    display: block;
    opacity: 0.0;
}
.header__navigation-item--level-1:hover .header__navigation-level--level-2 {
    display: block;
    transition: opacity 500ms ease-in;
    opacity: 1.0;
}
*/

/* define styles for level 4, copy from main.css, because there is no level 4 defined so far */
.header__navigation-list--level-4 { color: white; }

.header__navigation-link--level-4 { font-size: 0.875rem; line-height: 1.42857; font-weight: 400; }

a.header__navigation-link--level-4:hover { color: #002c57; }

.header__navigation-link--level-4.header__navigation-link--active, .header__navigation-link--level-4.header__navigation-link--trail { color: #002c57; }

/* leave some left margin for level 4 list items */
.header__navigation-list--level-4 {
    margin-left: 1rem;
}


/* define 'active' style for menu -- same as ...--trailing classes */
a.header__navigation-link.header__navigation-link--level-1.active,
a.header__navigation-link.header__navigation-link--level-1.ancestor {
    color: #8cbee6;
}


a.header__navigation-link.header__navigation-link--level-2.active {
    color: #002c57;
}
a.header__navigation-link.header__navigation-link--level-2.ancestor {
    color: #002c57;
}
a.header__navigation-link.header__navigation-link--level-3.active,
a.header__navigation-link.header__navigation-link--level-3.ancestor {
    color: #002c57;
}
a.header__navigation-link.header__navigation-link--level-4.active,
a.header__navigation-link.header__navigation-link--level-4.ancestor {
    color: #002c57;
}

/* fix footer contact: need a small margin to ensure that contact is not hidden behind footer background
 * (if there are only a few sitemap items) */
.footer__contact {
    margin-bottom: 1.25rem;
}

.footer__top {
    justify-content: flex-start;

}

/* nicer footer on mobile/medium device: distribute address into 3 cols etc. */

.footer__contact_alone {
    max-width: 100%;
    width: 100%;
    display: block;
}

.footer__contact_distribute {
    max-width: 100%;
    width: 100%;
    display: none;
}
.footer__contact_block {
    display: none;
}

.footer__contact_flexwrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.footer__contact {
    max-width: 100%; /*was: 8.375rem; */
}

.footer__contact_distribute {
    display: none;
}

@media (min-width: 576px) {
    .footer__contact_block {
        display: none;
    }
    .footer__contact_alone {
        display: none;
    }
    .footer__contact_distribute {
        display: block;
    }
}
@media (min-width: 1200px) {
    .footer__contact_block {
        display: block;
    }
    .footer__contact_alone {
        display: none;
    }
    .footer__contact_distribute {
        display: none;
    }
}

/* always have at least small margin around contact body */
.footer__contact-body {
    margin: 0.45rem 0;
}

/* no right padding on small displays */
.footer__contact-info {
    padding-right: 0;
}
@media (min-width: 576px) {
    .footer__contact-info {
        padding-right: 2.5rem;
    }
}

/* styles for footer impressum and data protection - try within the dark blue area */
.footer__bottom {
    align-items: end;  /* was: center */
}
.footer__further {
    padding-left: 2rem;
    height: 27px;
    z-index: 300;
/*  position: relative;
    bottom: 0px;
    right: 0px;
    */
    display: none; /*flex;*/
    align-items: flex-end;

    font-size: 0.625rem;
    color: white;
    float: right;
    text-align: right;
/*  width: 100%; -- causes logos to be much smaller! */
}
.footer__further div {
    display: inline;
    padding-left: 1rem;
}
.footer__further  a {
    color: white;
}

.footer__further a:hover {
    text-decoration: underline;
}
@media (min-width: 576px) {
    .footer__further {
        font-size: 0.75rem;
        height: 40px;
    }
}
@media (min-width: 768px) {
    .footer__further {
        font-size: 0.75rem;
        height: 40px;
    }
}

@media (min-width: 992px) {
    .footer__further {
        font-size: 0.80rem;
        height: 40px;
    }
}

@media (min-width: 1200px) {
    .footer__further {
        font-size: 0.80rem;
        height: 86px;
    }
}


/* style for supage list (block) */
ul.subpage-list {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}
ul.subpage-list li {
    font-size: 0.875rem;
    line-height: 1.14286;
    padding-bottom: 0.5rem;
}

@media (min-width: 576px) {
    ul.subpage-list li {
        font-size: 1.125rem;
        line-height: 1.1667;
        padding-bottom: 0.5rem;
    }
}

.subpage-list-description {
    padding-top: 0.25rem;
}


/* custom news style at landing page (avoid auto-load of twitter) */
.news-custom {
    display: grid;
    grid-template-columns: minmax(0, 30rem);
    justify-content: space-around;
    grid-gap: 3.125rem 0.9375rem;
}

@media (min-width: 576px) {
  .news-custom {
    grid-gap: 6.25rem 1.875rem;
  }
}

@media (min-width: 992px) {
  .news-custom {
    grid-template-columns: minmax(0, 37.5rem) minmax(0, 30rem);
  }
}

/* news twitter button styles, activate button, placeholder etc. */

a.twitter-button {
  border: 1px solid #1b95e0; border-radius: 4px; padding: 5px;
  background-color: #1b95e0; color: white;
  font-size: 0.75rem;
}
a.twitter-button:hover {
  background-color: #0c7abf; text-decoration: none;
}
button#activate-twitter {
  font-family: 'PT Sans', sans-serif;
  padding: 10px 10px;
  cursor: pointer;
  background-color: rgba(255,255,255,1);
  border: 1px solid #505050;
  border-radius: 4px;

}
button#activate-twitter:hover {
  background-color: rgba(109,114,119, 1);
  color: white;
  /*transition: background-color 0.4s ease-in-out;*/
}

.night-theme button#activate-twitter {
  background-color: #002c57;
  border: 1px solid white;
  color: white;
}

.night-theme button#activate-twitter:hover {
  background-color: #4f8fcc;
  border: 1px solid #4f8fcc;
}
.twitter-consent-info {
  font-size: 0.875rem;
}

.twitter-consent-label {
  color: #505050;
  margin-left: 1.5rem;
  font-size: 0.875rem;
}

.night-theme .twitter-consent-label {
  color: white;
}

@media(min-width: 576px) {
  .twitter-consent-label, .twitter-consent-info {
    font-size: 0.9375rem;
  }
}

#twitter-placeholder {
  width: 100%;
  height: 373px; /* 370,  373 also works */
  text-align: center;
  position: relative;
  border: 1px solid silver;
  background: linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25)), url("/static/img/twitter-screenshot2-blur.8ca56b6f95e8.png");
  background-size: cover;
}
.night-theme #twitter-placeholder {
  background-image: url("/static/img/twitter-screenshot-dark-blur.bda176e0d11c.png");
}

/* youtube plugin styles */
.youtube-wrapper {
  color: white;
  /* put background style into youtube-block-template,
   * because background image may be adjusted by editor */
  /* background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.7));
     background-size: cover; */

  /* justify the content, also vertically */
  display: flex;
  align-items: center;
  justify-content: center;

}

/* use pseudo elements to expand the fixed aspect ratio box in case the
 * placeholder text is too long; use here the padding-bottom trick for fixed
 * aspect ratios */
.youtube-wrapper::before {
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    padding-bottom: 56.25%;
}

.youtube-wrapper::after {
  /* clear the float */
  content: "";
  display: table;
  clear: both;
}


.youtube-wrapper a {
    color: #8cbee6;
}

.youtube-consent-info {
  font-size: 0.875rem;
  color: white;
}

input.youtube-consent { margin-top: 1px; }


.youtube-consent-label {
  color: white;
  margin-left: 1.5rem;
  font-size: 0.75rem;
}

.night-theme .youtube-consent-label {
  color: white;
}

@media(min-width: 576px) {
  .youtube-consent-label, .youtube-consent-info {
    font-size: 0.875rem;
  }
}
.youtube-placeholder {
  width: 100%;
  height: 100%;
/*
  text-align: center;
  position: absolute;
*/
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9;
}
.night-theme .youtube-placeholder {
}

.youtube-placeholder-inner {
    width: 90%;
    text-align: left;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;

}

.youtube-placeholder::before {
    content: '\f144';
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    z-index: -1;
    color: rgba(255,255,255,0.2);
    font-size: 120px;
    line-height: 120px;
    width: 120px;
    height: 120px;
}


/* styles for more button (news, projects, ... */
.endless_container {
}
a.more-button {
    padding: 10px;
    background-color: #002c57;
    color: white;
    border-radius: 4px;
    display: block;  /* stretches until 100% width; inside the first grid column; cannot align it on the page */
    text-align: center;
}

a.more-button:hover {
    text-decoration: none;
    background-color: #4675a3;
}

.night-theme a.more-button {
    background-color: #4675a3;
    color: white;
}
.night-theme a.more-button:hover {
    background-color: #fff;
    color: #505050;
}

/* additional styles for news page */
.news-end {
    border-top: 0.125rem solid #d0d4d7;
    padding-top: 1rem;
    border-bottom: 0.125rem solid #d0d4d7;
    padding-bottom: 1rem;
}

.gallery-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.gallery-item {
    max-width: 100%;
    padding-bottom: 1rem;
}
/*576, 768, 992, 1200*/
@media (min-width: 576px) {
    .gallery-item {
        width: 40%;
        /*float: left;*/
        padding-right: 10%;
    }
}
@media (min-width: 992px) {
    .gallery-item {
        width: 28%;
        /*float: left;*/
        padding-right: 5%;
    }
}

.gallery-item-image {
    width: auto;
    height: auto;
    margin: auto;
    max-width: 100%;
}

.gallery-item-video, .gallery-item-audio {
    width: auto;
    height: auto;
    margin: auto;
    max-width: 100%;
}


.other-news-item {
    padding-bottom: 1rem;

    width: 40%;
    float: left;
    padding-right: 10%;
}

@media (min-width: 576px) {
    .other-news-item {
        width: 40%;
        float: left;
        padding-right: 10%;
    }
}

@media (min-width: 992px) {
    .other-news-item {
        width: 28%;
        float: left;
        padding-right: 5%;
    }
}


.section-news-teaser-image {
    float: left;
    width: 40%;
    margin-right: 5%;  /* 1 - 3 rem */
    margin-bottom: 1rem;
}
@media (min-width: 576px) {
    .section-news-teaser-image {
        width: 30%;
        margin-right: 5%;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 992px) {
    .section-news-teaser-image {
        width: 20%;
        margin-right: 5%;
        margin-bottom: 3rem;
    }
}

.section__teaser__item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2rem;
    margin-bottom: 2.5rem;
}

.section__teaser__image {
    grid-column: 1 / 2;
}

.section__teaser__content {
    grid-column: 2 / 5;
}


.section__teaser__content .teaser__head {
    margin-top: 0;
    margin-bottom: 0;
}

/* section news listing without images (no grid display needed) */
.section__teaser__noimages__item {
  margin-bottom: 2.5rem;
}
.section__teaser__noimages__content {
  display: block;
}



/*.intro__contact-copy*/


.slick-dots li button {
    cursor: pointer;
}


.no-hyphens {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

ul.no-list-bullet {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* sidebar, navigation menu */


a.sidebar-navi.active {
    text-decoration: underline;
}

/* Add small padding in sublists in sidebar, especially needed to distinguish page levels (more padding for deeper levels) */
li ul.sidebar-navi-list {
    padding-left: 0.5em;
    font-size: 0.75rem;
}
@media(min-width: 576px) {
  li ul.sidebar-navi-list {
    padding-left: 0.5em;
    font-size: 0.875rem;
  }
}
/* different link color for subitems - does not look that good (not looking like a link!) */
/*
ul.sidebar-navi-list li ul.sidebar-navi-list a {
    color: #505050;
}
*/

/* style such that only children of active page or its ancestors are shown */
ul.sidebar-navi-list {
    display: none;
}

ul.sidebar-navi-list.active, ul.sidebar-navi-list.active-ancestor {
    display: block;
}

/* always show top level children - should just work */
/*ul.sidebar-navi-list-first {
    display: block;
}
*/


/* pagination page links */
ul.pagination {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul.pagination li {
    display: inline;
}

/* image block styles */

/* default, = xs */

.adv-image {
    margin-bottom: 1rem;
    max-width: 100%;
    height: auto;
}

.adv-image-left {
    float: left;
    margin-right: 4%; /*0.625rem;*/
}
.adv-image-right {
    float: right;
    margin-left: 4%; /*0.625rem;*/
}
.adv-image-center {
    margin-left: auto;
    margin-right: auto;
}
.adv-image-thumbnail {
    width: 16%;
}

.adv-image-x-small {
    width: 46%;
}

.adv-image-small {
    width: 46%;
}

.adv-image-medium {
    width: 100%;
}

.adv-image-large {
    width: 100%;
}

.adv-image-fullwidth, .full-width {
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
}

.adv-image-news-small {
    width: 100%;
}

/* sm */
@media (min-width: 576px) {
    .adv-image-thumbnail {width: 17%;}
    .adv-image-x-small {width: 22%;}
    .adv-image-small {width: 30%;}
    .adv-image-medium {width: 47%;}
    .adv-image-large {width: 63.6%; }
    .adv-image-left {margin-right: 3%; /*1rem;*/}
    .adv-image-right {margin-left: 3%; /*1rem;*/}
    .adv-image-news-small { width: 100%; }
}

/* md */
@media (min-width: 768px) {
    .adv-image-thumbnail {width: 16%;}
    .adv-image-x-small {width: 21%;}
    .adv-image-small {width: 29%;}
    .adv-image-medium {width: 46%;}
    .adv-image-large {width: 62.6%;}
    .adv-image-left {margin-right: 4%; /*2rem;*/}
    .adv-image-right {margin-left: 4%; /*2rem;*/}
    .adv-image-news-small { width: 100%; }
}

@media (min-width: 992px) {
    .adv-image-news-small { width: 40%; }
}


/* image gallery styles */

.adv-image-gallery {
    display: grid;
    column-gap: 0.75rem; row-gap: 0.75rem;
    /* Note: use fixed values instead of percent, especially for row-gap, because otherwise following elements may overlap! */
    margin-bottom: 1.5rem;
}

/* reduce bottom margin below image and figure caption */
.adv-image-gallery .adv-image, .adv-image-gallery .adv-image figcaption {
    margin-bottom: 0;
}

/* mobile/very small devices */
.gallery-grid-thumbnail {
    grid-template-columns: repeat(5, 1fr);
}
.gallery-grid-x-small {
    grid-template-columns: repeat(2, 1fr);
}
.gallery-grid-small {
    grid-template-columns: repeat(2, 1fr);
}
.gallery-grid-medium {
    grid-template-columns: repeat(1, 1fr);
}
.gallery-grid-fullwidth {
    grid-template-columns: repeat(1, 1fr);
}

/* sm */
@media (min-width: 576px) {
    .adv-image-gallery {
        column-gap: 1rem; row-gap: 1rem;
    }
    .gallery-grid-thumbnail {
        grid-template-columns: repeat(5, 1fr);
    }
    .gallery-grid-x-small {
        grid-template-columns: repeat(4, 1fr);
    }
    .gallery-grid-small {
        grid-template-columns: repeat(3, 1fr);
    }
    .gallery-grid-medium {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* md */
@media (min-width: 768px) {
    .adv-image-gallery {
        column-gap: 1.5rem; row-gap: 1.5rem;
    }
}

/* lg */
@media (min-width: 992px) {
    .adv-image-gallery {
        column-gap: 2rem; row-gap: 2rem;
    }
}



/* profile image on members index page - table */

.profile-image {
  /*-webkit-filter: saturate(50%);
  filter: saturate(50%);
  */
  /*border: 1px solid #333;*/
  border-radius: 50%;
  width: 100px;
  height: 100px; /* needed even when using object-fit: contain, for top alignment of img */
  margin: auto;
  background: no-repeat center;
  background-size: cover;
}

.profile-image-inline {
  /*-webkit-filter: saturate(0%);
  filter: saturate(0%);
  */
  /*border: 1px solid #333;*/
  border-radius: 50%;
  width: 100px;
  height: 100px; /* needed even when using object-fit: contain, for top alignment of img */
  background: no-repeat center;
  background-size: cover;
  display: inline;
}

.profile-image-icon {
    font-size: 250px;
    line-height: 250px;
}
@media (min-width: 576px) {
  .profile-image-icon {
    font-size: 240px;
    line-height: 240px;
  }
}

.teaser--circle .teaser__image {
    width: 80%;
    /* margin: auto; */ /* center the image */
}

/* adjust teaser circle elements for public outreach page */
.teaser--circle-pr .teaser__image {
    width: 85%;
}
.teaser--circle-pr .teaser__list { grid-template-columns: repeat(2, minmax(0, 280px)); }

@media (min-width: 768px) {
 .teaser--circle-pr .teaser__list { grid-template-columns: repeat(3, minmax(0, 240px)); }
}

.teaser--circle-pr .teaser__image { border-radius: 50%; overflow: hidden; }


.fancybox-image-profile {
  /*-webkit-filter: saturate(0%);
  filter: saturate(0%);
  */
  /* Problem: if using border-radius: circles and ellipses in all sizes and size ratios
   * if using max-height or max-width: images are not centered anymore */
  /*border-radius: 50%;*/
  /* Problem: These styles should only be used for profile images!!! */
  display: inline-block;
  max-height: 70%;
  vertical-align: middle;
  width: auto;
  margin: auto;
  position: relative;
}

.fancybox-slide {
  text-align: center;
}

.fancybox-content {
  text-align: center;
  margin: auto;
  white-space: nowrap;
}

.profile-image-square {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.profile-image-circle {
    width: 240p;
    height: 240px;
}

.employees__item-assignments {
    padding-top: 0.5rem;
}



/* nice hover effect on bubble navi icons of section overview page */
.circle-navigation__label {
    background-color: rgba(0, 44, 87, 0.52);
}


.circle-navigation__link:hover .circle-navigation__label {
    background-color: rgba(0, 44, 87, 0.7);
    transition: background-color 200ms ease-in-out;
}

a.circle-navigation__mainlink,
a.circle-navigation__sublink {
    color: white;
    cursor: pointer;
}
a.circle-navigation__mainlink:hover,
a.circle-navigation__sublink:hover {
    text-decoration: none;
}
a.circle-navigation__sublink:hover {
    color: #ccc;
}

a.circle-navigation__sublink {
    z-index: 1;
    font-size: 90%;
    text-transform: none;
}
/* expand the main link so it covers the whole circle area */
a.circle-navigation__mainlink {
    position: static;
}
a.circle-navigation__mainlink::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

.circle-navigation__mainlink__has_sublinks {
    margin-top: 0.75rem;
}

@media (min-width: 576px) {
    .circle-navigation__mainlink__has_sublinks {
        margin-top: 1rem;
    }
}
.circle-navigation__divider {
    width: 50%;
    height: 2px;
    border-top: 1px solid white;
    margin-top: 0.375rem;
    margin-bottom: 0.25rem;
}
@media (min-width: 576px) {
    .circle-navigation__divider {
        margin-top: 0.5rem;
        margin-bottom: 0.375rem;
    }
}

/* proper link coverage for hero slider items */
/* expand the main link so it covers the whole circle area */
/* -> gives the same problems as if the link surrounds the picture */
/* a.hero-slider__link {
    position: static;
    display: block;
}
a.hero-slider__link::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
} */

/* hover transition effect */
/* This is not affecting the right-most element for some reason. */
/*.hero-slider__planets-decorator {
    opacity: 1;
}
.hero-slider__planets-decorator:hover {
    opacity: 0.8;
    transition: opacity 200ms ease-in-out;
}
*/

/* in case something needs to be flipped horizontally (used for phone icon) */
.flip {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

/* defs for additional icons */
.svg-icon-warehouse-block { display: block; font-size: 4.75rem; width: 1.07895em; height: 1em; }
.svg-icon-warehouse { display: inline-block; font-size: 4.75rem; width: 1.07895em; height: 1em; }
.svg-icon-network-simple { display: inline-block; font-size: 4.75rem; width: 1.07895em; height: 1em; }
.svg-icon-global-network-block { display: block; font-size: 4.75rem; width: 1.07895em; height: 1em; }
.svg-icon-global-network { display: inline-block; font-size: 4.75rem; width: 1.07895em; height: 1em; }

/* more social media icons */
.svg-icon-twitter-circle { display: inline-block; font-size: 4.75rem; width: 1.23684em; height: 1em; }
.svg-icon-facebook { display: inline-block; font-size: 4.75rem; width: 1.23684em; height: 1em; }
.svg-icon-mastodon { display: inline-block; font-size: 4.75rem; width: 1.23684em; height: 1em; }
.svg-icon-instagram { display: inline-block; font-size: 4.75rem; width: 1.23684em; height: 1em; }
.svg-icon-x { color: black; display: inline-block; font-size: 4.75rem; width: 1.23684em; height: 1em; }
.night-theme .svg-icon-x {color: white;}
.footer__social__item .svg-icon-x { color: none; }

a.share-via:hover {
    text-decoration: none;
    color: #8cbee6;
}

.night-theme a.share-via:hover  {
    color: white;
}

.share-text {
    color: #002c57;
}

.night-theme .share-text {
    color: white;
}


.img-caption {
  color: inherit;
}

.last-update {
    color: #505050;
    text-align: right;
    font-size: 90%;
    margin-bottom: 1.25em;
    margin-top: 2.5rem;
}

.night-theme .last-update {
    color: #b9b9b9;
}

ul.search-result-list {
    margin: 0;
    margin-top: 2rem;
    list-style-type: none;
    padding: 0;
}
ul.search-result-list li {
    padding-top: 0;
}
ul.search-result-list li h4 {
    margin-bottom: 0px;
}
ul.search-result-list li p {
    margin-top: 0.25rem;
}
.night-theme ul.search-result-list a {
    /* is link color by default, keep it for now */
}



/* master thesis projects and topics */
.richtext-no-padding p {
  padding: 0;
  margin: 0;
}
.richtext-no-inner-padding p {
  padding: 0;
  margin: 0;
}
.richtext-no-inner-padding {
    margin: 0.75rem 0;
}

/* conferences appearance - fix disappearance of 3. item; not 100% width if only 1 item */
.conferences-list .teaser__item:last-child:not(:nth-child(even)) { display: flex; }
/* ah: happens, if switching from desktop to mobile view -> only 2 instead of 3 news items shall be visible!
 * -> this is ok for news, but not for conferences; also is a problem for projects! */

/* fix disappearance of last, not even item in any list (also for projects list!) */
.teaser__item:last-child:not(:nth-child(even)) { display: initial; }

/* except for Latest News on landing page: here the 3. item should disappear on small devices */
.teaser--latest .teaser__item:last-child:not(:nth-child(even)) { display: none; }
@media (min-width: 992px) {.teaser--latest .teaser__item:last-child:not(:nth-child(even)) { display: initial; } }

/* fix line-height for news on landing page */
.teaser--latest .teaser__list--content .teaser__copy {
    line-height: 1.4;
}
.teaser--latest .teaser__list--content .teaser__date {
    line-height: 1.75;
}

/* project page */
.project-list-image {
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 100%;
    position: relative;">
}
.project-list-image-lg {
    background-size: cover;
}
.project-list-image-sm {
    background-size: 70%;  /* compromise, so e.g. small logo images are not scaled up too much; image should not be larger than 100%, but should also not be scaled up by too much */
}

@media (min-width: 576px) {
  .project-list-image-sm {
    background-size: auto;  /* image may still be cut at the edges */
  }
}

.project-page-teaser-image {
    width: auto;
}

.text-section { margin-bottom: 0.9375rem; }

.text-section > *:first-child { margin-top: 0; }

.text-section > *:last-child { margin-bottom: 0; }

@media (min-width: 576px) { .text-section { margin-bottom: 1.875rem; } }


.text-intro > *:first-child { margin-top: 0; }


/* research page - topic styles: 2 columns, 1 image, 1 text column; for home/topic block */
/* mobile view: float text around 1/2 width image */
.block-topic h2 {
  margin-top: 0px;
}


.topic-grid {
  display: block;
}

.topic-grid.image-left .image-col {
  width: 45%;
  margin-right: 5%;
  float: left;
}

.topic-grid.image-right .image-col {
  width: 45%;
  margin-left: 5%;
  float: right;
}


@media (min-width: 576px) {
  .topic-grid {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 31% 31% 31%;
  }

  .sectionpage .topic-grid {
    grid-gap: 1.875rem;
    grid-template-columns: minmax(0, 22.5rem) 15.625rem;
  }

  /* image first */
  .topic-grid.image-left .image-col {
    grid-column: 1 / 2;
    order: 1;
    width: 100%;
  }

  .topic-grid.image-left .text-col {
    grid-column: 2 / 4;
    order: 2;
  }

  /* text first */
  .topic-grid.image-right .image-col {
    grid-column: 3 / 4;
    order: 2;
    width: 100%;
  }

  .topic-grid.image-right .text-col {
    grid-column: 1 / 3;
    order: 1;
  }

}

@media (min-width: 992px) {
  .sectionpage .topic-grid {
    grid-template-columns: minmax(0, 22.5rem) 22.5rem 15.625rem;
  }
}


/* fix general checkbox appearance */
input[type="checkbox"] { position: absolute; display: block; width: auto; height: auto; opacity: 1; }

/* restore original from design templates, but only if extra class 'aip-switch' is given */
input[type="checkbox"].aip-switch { position: absolute; display: block; width: 1px; height: 1px; opacity: 0.01; }


/* styles needed when bootstrap is loaded first (at calendar page) */
.headline__text {
    font-weight: bold;
}

.footer__logo {
    box-sizing: initial;  /* instead of bootstrap's border-box; need in footer for logo size  */
}

/* responsive embeds of richtext editor */
.responsive-object {
    position: relative;
}

.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* night and day theme logos for projects */
.image-day { display: block; }
.image-night { display: none; }
.night-theme .image-day { display: none; }
.night-theme .image-night { display: block; }

/* bootstrap styles for calendar - bootstrap styles are now fully included on calendar page */
/*.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
}

.justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

.calendar-message .toast {
    margin-bottom: 0px;
}

.toast {
    max-width: 350px;
    overflow: hidden;
    font-size: .875rem;
    background-color: rgba(255,255,255,.85);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    border-radius: .25rem;
}

.toast:not(:last-child) {
    margin-bottom: .75rem;
}
*/





/* styles needed when bootstrap is loaded first */


/* additional calendar styles for new design */

/* month name in upper case */
.fc th {
  text-align: center;
  text-transform: uppercase;
}
.fc th a {
  color: inherit;
}

.night-theme .fc-col-header {
  background-color: #002c57;
}
.night-theme .fc-daygrid-day-number {
  color: white;
}

.calendar-message {
    z-index: 9999; /* not working .... */
}

.calendar__teaser--internal-events::before { background-color: #002c57; }
.night-theme .calendar__teaser--internal-events::before { background-color: white; }

.calendar__teaser--public-events::before { background-color: #4675a3; }

.calendar__teaser--scientific::before { background-color: #fbba00; }

.calendar__legend-entry--internal-events::before { background-color: #002c57; }
.night-theme .calendar__legend-entry--internal-events::before { background-color: white; }

.calendar__legend-entry--public-events::before { background-color: #4675a3; }

.calendar__legend-entry--scientific::before { background-color: #fbba00; }

.calendar__legend-entry--holidays::before { background-color: #339933; }

.popover-event-list {
  padding-left: 1.5rem;
  position: relative;
}
.popover-event-list::before {
  width: 0.75rem;
  height: 0.75rem;
  content: '';
  position: absolute;
  display: block;
  top: 4px;
  left: 0;
  border-radius: 50%;
  background-color: white;
}
.popover-category-internal-events::before { background-color: #002c57; }
.night-theme .popover-category-internal-events::before { background-color: white; }
.popover-category-public-events::before { background-color: #4675a3; }
.popover-category-scientific::before { background-color: #fbba00; }
.popover-category-holidays::before { background-color: #339933; }

.label-internal-events { color: #002c57; }
.night-theme .label-internal-events { color: white; }
.label-public-events { color: #4675a3; }
.night-theme .label-public-events { color: #8cbee6; }
.label-scientific { color: #fbba00; }
.label-holidays { color: #339933; }


/* appearance of events in week view etc. */

.fc-h-event.category-internal-events,
.fc-v-event.category-internal-events {
  background-color: #002c57;
  border-color: #002c57;
  color: white;
}
.night-theme .fc-h-event.category-internal-events,
.night-theme .fc-v-event.category-internal-events {
  background-color: white;
  border-color: white;
  color: #002c57;
}
.night-theme .fc-h-event.category-internal-events .fc-event-main,
.night-theme .fc-v-event.category-internal-events .fc-event-main {
  color: #002c57;
}

.fc-h-event.category-public-events,
.fc-v-event.category-public-events {
  background-color: #4675a3;
  border-color: #4675a3;
  color: white;
}

.fc-h-event.category-scientific,
.fc-v-event.category-scientific {
  background-color: #fbba00;
  border-color: #fbba00;
  color: #505050;
}
.fc-h-event.category-scientific .fc-event-main,
.fc-v-event.category-scientific .fc-event-main {
  color: #505050;
}
.night-theme .fc-h-event.category-scientific .fc-event-main,
.night-theme .fc-v-event.category-scientific .fc-event-main  {
  color: #002c57;
}

.fc-h-event.category-holidays,
.fc-v-event.category-holidays  {
  background-color: #339933;
  border-color: #339933;
}

/* list view specific corrections */
.night-theme .fc .fc-cell-shaded, .night-theme .fc .fc-day-disabled {
  background-color: rgba(0,44,87,0.85);
}

.night-theme .fc .fc-list-event:hover td {
  background-color: rgba(55,78,100,0.85);
}

/* - dots before event title in correct colors; also in month view */
.fc .category-holidays .fc-list-event-dot,
.category-holidays .fc-daygrid-event-dot {
  border-color: #339933;
}

.fc .category-internal-events .fc-list-event-dot,
.category-internal-events .fc-daygrid-event-dot {
  border-color: #002c57;
}
.night-theme .fc .category-internal-events .fc-list-event-dot,
.night-theme .category-internal-events .fc-daygrid-event-dot {
  border-color: white;
}

.fc .category-public-events .fc-list-event-dot,
.category-public-events .fc-daygrid-event-dot {
  border-color: #4675a3;
}

.fc .category-scientific .fc-list-event-dot,
.category-scientific .fc-daygrid-event-dot {
  border-color: #fbba00;
}

.fc .fc-daygrid-week-number {
  background-color: rgba(120,120,120,0.15) !important;
  color: #909090 !important;
}
.night-theme .fc .fc-daygrid-week-number {
  background-color: rgba(120,120,120,0.6) !important;
  color: #ccc !important;
}


/* richtext elements */
.night-theme .alert-block {
  padding: 0.5rem;
  margin: 0.5rem 0;
  background-color: #c88e89; /*#530e08;*/
  /*color: #79170d;*/
  color: #590800;  /*#f0a097;*/
  border-radius: 5px;
}

/* AIP forms on the website, e.g. a registration form for an event */


.aip-form input[type="file"].form-control {
    background-color: inherit;
    border: none;
    padding-left: 0;
}

.aip-form input[type="text"], .aip-form input[type="email"], .aip-form input[type="url"] {
  display: inline-block;
  border: 1px solid;
  height: 1.75rem;
  border-radius: 0.1875rem;
  padding: 0.4375rem 0.625rem;
  background: transparent; box-sizing: border-box;
  font-size: 0.85rem;
  line-height: 1.2;
  color: #505050;
  background-color: white;
  width: 12.5rem; max-width: 100%;
}

.aip-form textarea {
  /* do not fix height and width! */
  border: 1px solid;
  border-radius: 0.1875rem;
  padding: 0.4375rem 0.625rem;
  background: transparent; box-sizing: border-box;
  font-size: 0.85rem;
  line-height: 1.2;
  color: #505050;
  background-color: white;
  max-width: 100%;
}

.night-theme .aip-form input[type="text"], .night-theme .aip-form input[type="email"], .night-theme .aip-form input[type="url"], .night-theme .aip-form textarea {
 color: white; background-color: #002c57;
}

.aip-form button, .aip-form input {
  border: 1px solid;
  border-radius: 0.1875rem;
  color: #002c57;
  font-size: 0.85rem;
  line-height: 1.2;

}

.aip-form button.submit {
  height: 2rem;
}

.aip-form button, .aip-form input, .aip-form optgroup, .aip-form select, .aip-form textarea {
  font-family: 'PT Sans', sans-serif;
/*  font-size: 0.85rem;*/
  line-height: 1.2;
}

.aip-form button {
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #4675a3;
  color: white;
  border-color: #002c57;
}
.night-theme .aip-form button {
  background-color: #8cbee6;
  color: #002c57;
  border-color: #4675a3;
}

.aip-form button:hover {
  background-color: #002c57;
  color: white;
  border-color: #002c57;
}
.night-theme .aip-form button:hover {
  border-color: white;
}

.aip-form input[type="number"] {
  text-align: right;
}

.aip-form select {
  font-size: 0.85rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.aip-form .has-error {
  color: red;
}

.aip-form .small {
  font-size: 0.7rem;
}

.aip-form .required::after {
  content: '*';
  color: #ff0000;
}

.night-theme .aip-form .required::after {
  content: '*';
  color: #ff9090;
}

.aip-form .required {
  font-weight: bold
}


/* styles for cookie bar */
.cookie-bar {
  position: fixed;
  width: 100%;
  bottom: 0;
  text-align: left;
  background: #222;
  color: #ddd;
  z-index: 2000;
  font-size: 0.875rem;
  display: none;
}

.cookie-bar-inner {
  margin: 1.5rem 1.5rem;
}

@media(min-width: 768px) {
  .cookie-bar-inner {
    margin: 1.5rem 5rem;
  }
}

.cookie-bar form {
  display: grid;
  grid-template-columns: 1fr;
}

@media(min-width: 576px) {
  .cookie-bar form {
    grid-template-columns: 1fr 1fr;
  }
}


.cookie-bar label {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  font-size: 0.875rem;
  color: #ddd;
}

.cookie-bar a {
  color: #8cbee6;
}


.cookie-bar button {
  font-family: 'PT Sans', sans-serif;
  padding: 7px 7px;
  cursor: pointer;
  border: 1px solid #8cbee6; /*#fbba00;*/ /* #8cbee6;*/
  border-radius: 4px;
  background-color: rgba(0,0,0,0);
  color: #ddd;
  color: #8cbee6; /*#ffeb72;*/
  width: 12.5rem;

  display: block;
}

.cookie-bar button:hover {
  /*background-color: rgba(0,44,87, 1);
  color: white;
  */
  background-color: #4675a3;
  color: #fff;  /*#222*/
  transition: background-color 0.25s ease-in-out;
}

.cookie-bar input {
  margin-top: 1px;
}


.cookie-bar .inputs {
  text-align: left;
  margin: auto;
}

.cookie-bar .buttons {
  text-align: center;
  margin: auto;
  margin-top: 1.5rem;
  display: block;
}

.cookie-bar-last-button {
  margin-left: 0;
  margin-top: 1rem;
}

.cookie-bar .input-item {
  display: block;
  padding: 0px 7px ;
}

@media(min-width: 576px) {
  .cookie-bar form {
    grid-template-columns: 1fr;
  }

  .cookie-bar .inputs {
    text-align: left;
  }

  .cookie-bar .input-item {
    display: inline-block;
  }
  .cookie-bar .buttons {
    margin-top: 1.5rem;
    display: inline-block;
  }
  .cookie-bar button {
    display: inline;
  }
  .cookie-bar-last-button {
    margin-top: 0;
    margin-left: 1rem;
  }

}


@media(min-width: 1200px) {
  .cookie-bar form {
    grid-template-columns: 1fr 1fr;
  }

  .cookie-bar .inputs {
    text-align: left;
    /*margin-left: 3rem;*/
  }
  .cookie-bar .buttons {
    text-align: right;
    /*margin-right: 3rem;*/
    margin-top: 0rem;
    display: inline-block;
  }
}

/* font sizes */
@media(min-width: 576px) {
  .cookie-bar, .cookie-bar label{
    font-size: 1rem;
  }
  .cookie-bar input {
    margin-top: 4px;
  }

}


/* placeholder for conference images */
.conference-image-placeholder {
  width: 75px;
}

@media (min-width: 576px) {
  .conference-image-placeholder {
    width: 120px;
  }
}


.header__background { position: relative; background-color: #002c57; color: white; -webkit-filter: drop-shadow(0 0.125rem 0.375rem #0000005C); filter: drop-shadow(0 0.125rem 0.375rem #0000005C); z-index: 2; }

@media (min-width: 1200px) { @supports ((-webkit-clip-path: url("#svg-mask-header")) or (clip-path: url("#svg-mask-header"))) { .header__background { background-color: transparent; }
    .header__background::before { content: ''; position: absolute; display: block; top: 0; right: 0; bottom: -7.5rem; left: 0; background-color: #002c57; -webkit-clip-path: url("#svg-mask-header"); clip-path: url("#svg-mask-header"); } } }





/* social icons on landing page, news page and on any page ('small') */
.news-social-icons {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  line-height: 4;
  margin-bottom: 2rem;
  
}
.social-icon-item {
  height: 2.5rem;
}

.social-icon {
  height: 2rem;
  width: 2rem;
  vertical-align: middle; 
  margin-right: 2rem;
}

.social-icon-small {
  height: 2rem;
  width: 2rem;
  vertical-align: middle; 
  margin-right: 2rem;
}

@media (min-width: 768px) {
  .social-icon {
    height: 4rem;
    width: 4rem;
    margin-right: 2rem;
  }

  .social-icon-item {
    height: 4.5rem;
  }

  .news-social-icons {
    gap: 1.5rem;
  }

  .social-icon-small {
    height: 3rem;
    width: 3rem;
  }
}


/* social media icons in footer */
/*.footer__social { width: 1.5625rem; position: relative; padding: 0 0.625rem;}    */



.footer__social { position: relative; padding: 0 0 0 0.625rem;}

.footer__social__item {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
}

@media (min-width: 576px) {
  .footer__social__item {
    width: 1.375rem;
    height: 1.375rem;
    padding: 0.5rem;
  }

  .footer__social {
    padding-left: 1.25rem;
  }
}
@media (min-width: 768px) {
  .footer__social__item {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5rem;
  }
}


@media (min-width: 1200px) {
  .footer__social__item {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
  }
}



.social-icon-footer {
  width: 100%; height: 100%;
  color: white;
}

.night-theme .social-icon-footer {
  color:rgba(0, 44, 87);
}

/*
@media (min-width: 576px) { .footer__social{ width: 2.3125rem; } }

@media (min-width: 1200px) { .footer__social { width: 4.875rem; } }
*/
/*.footer__logo--social a { padding-bottom: 117.94872%; background-image: url("../assets/footer/logo_equality_light.4215c148b5fa.png"); }

.night-theme .footer__logo--social a { background-image: url("../assets/footer/logo_equality_dark.f3de56599623.png"); }
*/