/* ============================================================
   RUB Inter — Ruhr-Universität Bochum corporate typeface (a customised
   Inter). Self-hosted woff2, converted from the official TTFs in
   static/fonts/260402_RUB-Inter/. Only the weights the site uses are
   shipped (400 / 700, upright + italic); add more @font-face rules here
   if a lighter heading weight (500/600) is introduced later.
   ============================================================ */
@font-face {
    font-family: "RUB Inter";
    src: url("fonts/rub-inter/RUBInter-Regular.80c5bc1314c6.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "RUB Inter";
    src: url("fonts/rub-inter/RUBInter-Italic.e9e81999323f.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "RUB Inter";
    src: url("fonts/rub-inter/RUBInter-Bold.1bf6d1349940.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "RUB Inter";
    src: url("fonts/rub-inter/RUBInter-BoldItalic.c56da1828507.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --tu_green: #639a00 ;
    --rub_green: #8dae10 ;
    --rub_blue: #17365c ;
    /* one site-wide type stack: RUB Inter, then plain Inter, then the OS UI face */
    --font-sans: "RUB Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* type scale — fixed rem steps off a 16px root (no unbounded vw growth).
       ratio ~1.27. --text-base is the body size. */
    --text-xs:   0.75rem;   /* 12 — fine print, form comments */
    --text-sm:   0.875rem;  /* 14 — captions, metadata, footer links, table heads */
    --text-base: 1.125rem;  /* 18 — body copy */
    --text-md:   1.375rem;  /* 22 — h4/h5, lead-ins */
    --text-lg:   1.75rem;   /* 28 — h3 */
    --text-xl:   2.25rem;   /* 36 — h2, page titles */
    --text-2xl:  2.875rem;  /* 46 — h1 */
    --leading-body: 1.6;
    --leading-heading: 1.2;

    /* spacing scale — one rhythm for section gaps, panel padding and the
       breathing room between blocks (rem, ~1.5x steps off a 16px root) */
    --space-1: 0.25rem;   /*  4 */
    --space-2: 0.5rem;    /*  8 */
    --space-3: 1rem;      /* 16 */
    --space-4: 1.5rem;    /* 24 */
    --space-5: 2.25rem;   /* 36 */
    --space-6: 3.5rem;    /* 56 */
    --space-7: 5rem;      /* 80 */

    /* one keyboard-focus ring for every interactive element (light on the
       dark UI; the light-theme block flips it dark) */
    --focus-ring-color: #eef1f5;

    /* Content surfaces are flat in both themes at every size (full-bleed
       bands, no shadow). Kept as a token so a subtle elevation can be
       reintroduced in one place if wanted. */
    --surface-shadow: none;
}

/* respect the browser's base font-size (user a11y setting) rather than
   w3.css's hard 15px */
html {
    font-size: 100%;
}

/* ============================================================
   Theme tokens. Dark is the default (and the JS-less fallback);
   [data-theme="light"] on <html> flips the palette. Every surface,
   text, link, table and button colour derives from these.
   ============================================================ */
:root,
:root[data-theme="dark"] {
    --veil: transparent;
    --surface: rgba(0, 0, 0, 0.738);
    --surface-solid: rgba(0, 0, 0, 0.828);
    --ink: #e9edf3;
    /* muted text — kept clearly softer than --ink but at ~8:1 on the dark
       surface so it still clears WCAG AA for body copy (0.594 alpha measured
       ~6.2:1, too close to the 4.5:1 floor once it sits on a photo) */
    --ink-soft: rgba(233, 237, 243, 0.68);
    --link: #d9a2b0;
    --link-hover: #f2c8d2;
    --wash: rgba(255, 255, 255, 0.09);
    --wash-strong: rgba(255, 255, 255, 0.162);
    --hairline: rgba(255, 255, 255, 0.126);
    --table-head: rgba(255, 255, 255, 0.063);
    --btn-bg: rgba(255, 255, 255, 0.108);
    --btn-bg-strong: rgba(255, 255, 255, 0.162);
    /* destructive action — stays in the wine/rose accent family (see --link) */
    --danger-line: #e0a3b0;
    --danger-solid: #b23a52;
    --danger-bg: rgba(178, 58, 82, 0.18);
    --danger-on: #ffffff;
    /* form controls */
    --field-bg: rgba(255, 255, 255, 0.05);
    --field-border: rgba(255, 255, 255, 0.24);
    --field-border-focus: rgba(255, 255, 255, 0.5);
    --field-disabled-bg: rgba(255, 255, 255, 0.03);
    --color-scheme: dark;
}

:root[data-theme="light"] {
    --veil: rgba(255, 255, 255, 0.0358);
    --surface: rgba(255, 255, 255, 0.8);
    --surface-solid: rgba(255, 255, 255, 0.882);
    --ink: #1e2a38;
    /* muted text — darkened from #55606e (~4.9:1, only just AA) to ~5.8:1 */
    --ink-soft: #4b5563;
    --link: #861f41;
    --link-hover: #5f142e;
    --wash: rgba(30, 42, 56, 0.063);
    --wash-strong: rgba(30, 42, 56, 0.117);
    --hairline: rgba(30, 42, 56, 0.126);
    --table-head: rgba(30, 42, 56, 0.054);
    --btn-bg: rgba(30, 42, 56, 0.072);
    --btn-bg-strong: rgba(30, 42, 56, 0.117);
    --danger-line: #9a2540;
    --danger-solid: #9a2540;
    --danger-bg: rgba(154, 37, 64, 0.1);
    --danger-on: #ffffff;
    /* form controls */
    --field-bg: rgba(255, 255, 255, 0.85);
    --field-border: rgba(30, 42, 56, 0.3);
    --field-border-focus: rgba(30, 42, 56, 0.6);
    --field-disabled-bg: rgba(30, 42, 56, 0.06);
    --color-scheme: light;
    --focus-ring-color: #1e2a38;
}

:not(body.logged-in) .create{
    display:none;
}

#internal .row{
    width:100%;
    margin:auto;
    margin-bottom:5vw;
}

#gradschool .sub-container, #imprint .sub-container, #project_detail .sub-container, #science .sub-container, #phd_guidelines .sub-container{
    width:100%;
    text-align: justify;
}

/* mouse / programmatic focus stays ringless; keyboard focus gets the ring below */
button:focus:not(:focus-visible) {
    outline: none;
}

/* one keyboard-focus ring for every interactive element */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.mega-btn:focus-visible,
.mega-panel a:focus-visible,
.tab button:focus-visible,
.theme-toggle:focus-visible,
.navbar-toggler:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
body div.dt-container .dt-paging .dt-paging-button:focus-visible {
    outline: 2px solid var(--focus-ring-color) !important;
    outline-offset: 2px;
}

.required_field:after {
  content:" *";
  color: var(--link);
}

.news_container {
    padding: 2vw;
    background-color: var(--surface);
    color: var(--ink);
    display: flex;
    box-shadow: var(--surface-shadow);
    top:0;
    margin:auto;
    margin-top:0;
    margin-bottom: var(--space-5);
    width:80%;
    min-width: 0;   /* grid/flex item: allow it to shrink below content size */
    scroll-margin-top: max(55px, 3.2vw);
}

#publicationsTable{
    scroll-margin-top: max(200px, 13.2vw);
}

.news_container h5{
    margin-top:0 !important;
    margin-bottom: 1vw;
}

.news{   /* <a class="news"> when the post links out, plain <span class="news"> when it doesn't */
    float:left;
    position:-webkit-sticky;
    position:sticky;
    width: 30%;
    min-width: 0;
    display: block;
    align-self: flex-start;
    top: max(40px, 4.5vw);
    margin-top:max(40px, 4.5vw);
}

.news_content {
    text-align:justify;
    padding: 3vw;
    padding-top:0;
    padding-right:1vw;
    width: 70%;
    min-width: 0;
    float: left;
}

/* news card with no image — the text spans the whole card instead of the
   70% column (used for the intro / summary blocks on the Paper of the Year
   and CIM-Fellows pages) */
.news_container--text .news_content {
    padding: clamp(20px, 3vw, 44px);
}
@media (min-width: 768px) {
    .news_container--text .news_content {
        width: 100%;
    }
}

/* RUB wordmark in the Diversity Events "General Diversity Offers" panel: the
   asset is a single dark-blue-on-transparent PNG. Keep the brand blue on the
   light surface; lift it to near-white on the dark surface so it stays legible
   against the dark panel. */
.eo-offers-logo {
    filter: brightness(0) invert(1);
}
:root[data-theme="light"] .eo-offers-logo {
    filter: none;
}

/* The container is an empty block that immediately follows the image in flow.
   Give it no height and lift its badge up onto the image's lower-right corner. */
.copyright_floating_container {
    position: relative;
    z-index: 2;
    height: 0;
    line-height: 0;
    text-align: right;
}

.copyright_floating {
    display: inline-block;
    transform: translateY(-100%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    font-size: 12px;
    line-height: normal;
    text-align: left;
}

/* media that a credit badge pins to: block-level (no inline baseline gap) and
   no stray bottom margin, so the badge lands on the real image edge */
.pic-hover-trans .w3-image,
.text-align-center .w3-image,
img.sticky {
    display: block;
}

.pic-hover-trans .w3-image,
.text-align-center .w3-image {
    margin-bottom: 0 !important;
}

.copyright_floating a {
    color: white;
    text-decoration: none;
}

/* ============================================================
   Content surface — one treatment for every page panel.
   .background-wrapper-white  the base_sub wrapper (most pages)
   .content-section           base_form / detail pages
   .page-surface              pages migrated to the explicit class

   Flat in both themes at every size: solid fill, no shadow, no border,
   no radius. A centred column on desktop; full-bleed on mobile (see the
   767.98px block).

   box-sizing stays border-box: Bootstrap sets `* { box-sizing: inherit }`,
   so forcing content-box here would leak content-box into every descendant
   (filters, form fields) and make `width:100%` + padding overflow.
   ============================================================ */
.background-wrapper-white,
.content-section,
.page-surface {
    box-sizing: border-box;
    background: var(--surface-solid);
    color: var(--ink);
    box-shadow: var(--surface-shadow);
    padding: clamp(var(--space-4), 3.5vw, var(--space-6));
}

.background-wrapper-white {
    width: 80%;
    margin: 0 auto var(--space-5);
    float: none;
    min-height: 600px;
}

.content-section,
.page-surface {
    width: 100%;
}

.inner-content, .content-section, .news_content, .inner-content a, .inner-content p, #imprint .sub-container, #science .sub-container{
    font-size: var(--text-base);
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: justify;
}


.word_break_all a{
    word-break:break-all;
}

.a{
    font-size:max(100px, 1.6vw);
}

.inner-content{
    margin-bottom:2vh;
    background-color: var(--surface);
    color: var(--ink);
    padding-left:1vw;
    padding-right:1vw;
    box-shadow: var(--surface-shadow);
}

.w3-image{
    height:auto;
    max-height:150%;
}


.btn {
    background-color: var(--btn-bg);
    border-color: transparent;
    color: var(--ink);
}

.btn:hover {
    background-color: var(--wash-strong);
    border-color: transparent;
    color: var(--ink);
}

/* Bootstrap's coloured button/alert variants, remapped onto the theme palette
   so they read correctly in both modes (the stock teal / cyan / pink are not
   theme-aware and clash on the dark surface).
   .active / :active are included so Bootstrap's deep state selectors don't
   win back the stock colours. */
.btn-outline-info,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-info:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    color: var(--ink);
    border-color: transparent;
    background-color: var(--btn-bg);
}

/* the primary submit on a form gets a touch more weight than a plain .btn */
.btn-outline-info,
.btn-outline-primary {
    background-color: var(--btn-bg-strong);
}

.btn-outline-info:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active {
    background-color: var(--wash-strong);
}

/* destructive action — a real outline button in the accent family */
.btn-outline-danger,
.btn-outline-danger:focus {
    color: var(--danger-line);
    border-color: var(--danger-line);
    background-color: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    color: var(--danger-on);
    border-color: var(--danger-solid);
    background-color: var(--danger-solid);
}

/* Alerts: a flat callout that stays legible both inside an opaque panel and
   sitting directly on the background photo (login / password-reset pages).
   The wash is layered over an opaque surface so it reads on either ground. */
.alert,
.alert-info,
.alert-primary,
.alert-secondary,
.alert-warning,
.alert-light,
.alert-success {
    border: 1px solid var(--hairline);
    background-color: var(--surface-solid);
    background-image: linear-gradient(var(--wash), var(--wash));
    color: var(--ink);
}

.alert-danger {
    border: 1px solid var(--danger-line);
    background-color: var(--surface-solid);
    background-image: linear-gradient(var(--danger-bg), var(--danger-bg));
    color: var(--ink);
}

.alert a,
.alert .alert-link {
    color: var(--link);
    font-weight: 600;
}


body {
    /* full-viewport background photo — the image URLs are passed per-page as
       --bg-photo / --bg-photo-narrow on <body> (base_main.html) so they can
       go through {% static %}; black shows through before it loads */
    background-color: #000000;
    background-image: var(--bg-photo);
    background-position: center -440px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--ink);
    margin-top: 0rem;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    margin: 0;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* contain the full-bleed panels' margin-inline break-out — clip (not
       hidden) so position: sticky on the navbar keeps working */
    overflow-x: clip;
}

@media only screen and (max-width: 767.98px) {
    body {
        background-image: var(--bg-photo-narrow);
        background-size: 190%;
    }
}

a {
    color: var(--link);
}

.inline-block {
    display: inline-block;
}

a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

p {
    margin-bottom: 0rem !important;
}

h1, h2, h3, h4, h5, h6, h7 {
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: var(--leading-heading);
    text-wrap: balance;
    /* never inherit `justify` from a prose container — a wrapped, justified
       heading gets ugly word gaps (worst on mobile) */
    text-align: left;
}

/* monotonic scale off the type tokens (was a scrambled set where h6 > h1) */
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5 { font-size: 1.25rem; text-align: center; }
h6 { font-size: var(--text-base); text-align: center; }

/* keep headings centred where a wrapper explicitly centres its content
   (home cards, w3-center utilities, the .center pager wrapper) */
:is(.text-align-center, .w3-center, .center) :is(h1, h2, h3, h4) {
    text-align: center;
}

/* imprint page's parallel heading classes — same scale as h2/h3/h4 */
.impr_h1 { font-size: var(--text-xl); color: var(--ink); font-weight: 700; text-align: left; }
.impr_h2 { font-size: var(--text-lg); color: var(--ink); font-weight: 700; text-align: left; }
.impr_h3 { font-size: var(--text-md); color: var(--ink); font-weight: 700; text-align: left; }

ul {
    margin: 0;
}

.bg-steel {
    background-color: var(--rub_blue);
}

#internal .content-section {
    background-color: rgb(255, 255, 255, 0.0);
    box-shadow: none;
}

/* w3.css cards: same single soft shadow, no doubled drop shadow */
.w3-card-4 {
    box-shadow: var(--surface-shadow);
}

.article-title {
    color: var(--link);
    margin-top: 30px
}

a.article-title:hover {
    color: var(--link-hover);
    text-decoration: none;
}

.article-content {
    white-space: pre-line;
}

.article-img {
    height: 65px;
    width: 65px;
    margin-right: 16px;
}

.article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--hairline);
}

.article-metadata a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

.article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.account-img {
    height: max(30%,250px);
    width: min(30%,250px);
    margin-right: max(10%,20px);
    margin-bottom: max(5%,20px);;
}

.account-heading {
    text-align: left;
    font-size: var(--text-xl);
    overflow-wrap: anywhere;
    hyphens: auto;
}

.wrapper_header {
    float:right;
    margin: 0px auto 0px auto;
    width: 100%;
    height: auto;
    position: relative;
    display:flex;
    align-items: center;
    padding: 0.35rem 0 0.55rem;
}

.wrapper_main {
    margin: 0px auto 0px auto;
    width: 85%;
}

.container_video{
    width: 1920px;
    overflow: hidden;
    display: block;
    height: 1080px;
}

#ORM {
    position: fixed;
    right: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}


.header {
    display:block;
    height: auto;
    float:left;
    overflow:auto;
    /* var(--surface), not a literal: see the comment near the bottom of
       this file, right after the theme cross-fade rule, for why. */
    background-color: var(--surface) !important;
    padding-bottom: 0.35rem;
    width:100%;
}

.header-text {
    flex: 1;
    text-align: center;
    position: relative;
    width: 100%;
    z-index: 5;
    height: auto;
}

.header-text .site-title,
.header-text_768_992 .site-title {
    margin: 0;
    font-weight: 400;
    line-height: 1.2;
    font-size: max(min(2.3vw, 32px), 18px);
    text-align: center;
}

.header-text .site-title b,
.header-text_768_992 .site-title b {
    font-weight: 700;
}

#dfg_logo {
    max-width: 100%;
    opacity: 0.72;
    display: block;
    margin: auto;
}

/* .wrapper_logo removed — the home-linking logo now lives in the navbar brand
   (see the min-width:992px block near the end of this file). */

/* #navbar_top removed — its links moved to the account menu (navbar) and the
   footer link row. */

.navbar {
    /* var(--surface), matching .header -- see the comment on .header's
       own background-color above. */
    background-color: var(--surface);
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
    width:100%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.navbar_wrapper{
    display:block;
}

.navbar a {
    font-size: max(18px, 1.2vw);
    color: white;
    text-align: center;
    padding: 18px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown > a{
    padding: 0px 0px;
}

.navbar-collapse{
    text-align: right;
    flex-grow: 0 !important;
}

.nav_item{
    padding: 14px 0.2vw;
    margin: 0;
}

.dropdown .dropbtn {
    font-size: max(19px,1.2vw);
    border: none;
    outline: none;
    color: white;
    padding: 14px 10px;
    background-color: inherit;
    font-family: inherit;
    margin: auto;
}

.pagination {
    font-size: 135% !important;
}

.dropdown-content {
    white-space: nowrap;
    display: none;
    position: absolute;
    color: black !important;
    background-color: rgb(255, 255, 255, 0.75);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: auto;
    height: auto;
}

.dropdown-content a {
    color: black !important;
    padding: 12px 10px;
    text-decoration: none;
    display: block;
    text-align: right;
    background-color: rgba(192,192,192,0.65);
}

.dropdown-content a:hover {
    background-color: rgb(155, 155, 155, 1);
    color: black;
}

.dropdown:hover .dropdown-content, .dropdown:active .dropdown-content {
    display: block;
}

img.sticky {
    position:-webkit-sticky;
    position:sticky;
    width: 100%;
    max-width: 100%;
    height: auto;
    align-self: flex-start;
}

/* footer text/links: one colour for both themes (the footer sits on the
   background photo in either mode) */
.copyright {
    left: 0;
    bottom: 0;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding-top: 12px;
}

/* One continuous dark gradient behind the whole footer: eases in from the
   page background at the top, deepening to near-black at the very bottom.
   The two inner bands are transparent so this shows through seamlessly. */
.site-footer {
    width: 100%;
    padding-top: var(--space-5);
    /* no darkening gradient — the footer sits on the background photo directly,
       same as the page title / breadcrumbs, in both themes */
}

.footer_wrapper_copyright {
    overflow: hidden;
    left: 0;
    bottom: 0;
    width: 100%;
    background: transparent;
    color: white;
    text-align: center;
}

/* ---- participating-universities logo marquee ---- */
.footer_wrapper_uni_logos {
    width: 100%;
    overflow: hidden;
    background: transparent;
    padding: clamp(18px, 3vh, 34px) 0;
    color: white;
}

.uni-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.uni-marquee__track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: uni-marquee-scroll 65s linear infinite;
}

.uni-marquee:hover .uni-marquee__track {
    animation-play-state: paused;
}

.uni-marquee__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 clamp(24px, 4vw, 56px);
}

.uni-marquee__item img {
    display: block;
    height: clamp(32px, 4.2vw, 50px);
    width: auto;
    /* colour logos -> flat white silhouettes on the dark footer gradient */
    filter: brightness(0) invert(1);
    opacity: 0.775;
    transition: opacity 0.2s ease;
}

.uni-marquee__item:hover img {
    opacity: 1;
}

@keyframes uni-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .uni-marquee__track {
        animation: none;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 0;
    }
    .uni-marquee__track > .uni-marquee__item:nth-child(n+4) {
        display: none;
    }
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.title-padding{
    padding-top: var(--space-4);
    width:80%;
    margin:auto;
    /* the page's <h1>; its size comes from here, not the heading scale */
    font-size: var(--text-xl);
    text-align: center;
    /* sits on the background photo in both themes → one light colour */
    color: #eef1f5;
}

.main-container-inner {
    padding-top: 3.0vw;
    width: 80%;
    margin: 0 auto;
    float: none;
}

.main_container {
    max-width: 100%;
    
}

.text-align-center {
    text-align: center;
    background-color: rgb(0, 0, 0, 0.765);
}

.pic-hover-trans {
    opacity: 1;
}

.pic-hover-trans:hover .img-hover {
    transition: 0.7s ease;
    opacity: 0.45;
    
}

.home-content{
    margin-top:5vh;
}



.w3-row, .w3-col{
    font-size:0;
    padding:0;
}

#contact .w3-row, #contact .w3-col{
    font-size: var(--text-base);
    padding:0;
    margin-bottom:2vw;
}

#contact .w3-half{
    display: flex;
    height:100%;
}

#contact .w3-card-4{
    position:relative;
    background-color:var(--surface);
    height:100%;
    width:100%;
}

#contact p{
    text-align:left;
    padding-top:2.5vw;
}

#contact .w3-container h1{
    min-height: 20%;
    color:black;
    padding:2vw;
}

.footer-main {
    /* the single .site-footer gradient now carries the whole fade to black */
    background-image: none;
}

/* Fixed/sticky icon bar (vertically aligned 60% from the top of the screen) */
.icon-bar {
    position: fixed;
    top: 60%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
    display: block;
    text-align: center;
    padding: 1vh;
    transition: all 0.3s ease;
    color: white;
    font-size: var(--text-sm);
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
    background: #000;
    cursor:pointer;
}

.twitter:hover{
    background:rgb(30,30,30) !important
}

.facebook {
    background: #3B5998;
    color: white;
}

.twitter {
    background: rgb(0,0,0);
    color: white;
}

.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    color: white;
}

.linkedin {
    background: #0077B5;
    color: white;
}

.breadcrumb-wrapper{
    width: 80%;
    text-align: center;
    margin-left:10%;
    padding-top: var(--space-4);
}
/* Style the list */
/* breadcrumbs sit on the background photo in both themes → one light colour */
ul.breadcrumb {
    width: 80%;
    text-align: center;
    list-style: none;
    background-color: rgb(255, 255, 255, 0.0);
    margin-bottom: 0rem;
    color: #eef1f5;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: var(--text-base);
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    padding: 8px;
    color: rgba(238, 241, 245, 0.6);
    content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #eef1f5;
    text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.bottom-top-fade-container {
    /* grey bottom fade removed — every page now leads into the footer the same
       way: content ends on the page background, then the single .site-footer
       gradient carries the fade to black. */
    min-height: calc(100vh - 347.1px);
}

.top-bottom-fade {
    background-image: linear-gradient(to top, rgb(255, 255, 255, 0.0), rgb(155, 155, 155, 0.80)270px);
    width: 100%;
    min-height: 600px;
}

.sub-container {
    margin: auto;
    width: 100%;
    color: var(--ink);
    text-align: inherit;
    display: grid;
    /* single column that can't be widened past the container by a wide
       child (e.g. a grid/flex filter row) — the default `auto` track would */
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
}

/* table wrapper: fill the panel's content box (= 80% of the viewport, the
   one unified content width) instead of the old 90%/80% + right float */
.sub-container-outer {
    width: 100%;
    color: var(--ink);
    display: block;
    overflow: auto;
    float: none;
}

.members .center {
    width: 80%;
}

.clear {
    clear: both;
}

/* Table text: wrap at spaces, and break a word only as a last resort — when a
   single word is genuinely wider than its column. Auto table layout (below)
   then keeps every column at least as wide as its longest unbreakable token,
   so normal words (OrcID, dates, project codes, tag names, …) never break;
   only pathological strings (a bare DOI/URL) can. */
.table th, .table td,
table.dataTable th, table.dataTable td {
    vertical-align: middle !important;
    border-color: var(--hairline);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

.table-borderless > tbody > tr > td {
    border: none;
}

.table_head {
    background-color: var(--table-head);
    color: var(--ink);
    font-size: var(--text-sm);
}

.table-hover tbody tr:hover td:not(#no-bg-color), .table-hover tbody tr:hover th {
    background-color: var(--wash);
}

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0);
    /* Bootstrap 4.6 added `color:#212529` on the hover row — undo it so
       non-link cell text keeps the theme ink instead of going near-black. */
    color: var(--ink);
}

.table thead th {
    border-bottom: black;
    border-top: none;
    padding-top: 0.6vw;
    padding-bottom: 0.6vw;
}

div.container:not(.filter) {
    width: 80%;
}

.table {
    position:relative;
    margin:auto;
    margin-bottom: var(--space-5);
    width:100%;
    font-variant-numeric: tabular-nums;
}

/* People tables (members / PIs / boards / administration): fixed layout so the
   six columns keep the same proportions on every page regardless of content;
   the <colgroup> in includes/member_table.html sets the shares. Below ~44rem
   the table keeps its shape and .sub-container-outer scrolls it. */
.member-table {
    table-layout: fixed;
    min-width: 44rem;
}
/* short column labels should never wrap in the fixed grid (body cells still do) */
.member-table thead th {
    white-space: nowrap;
}

/* 400 / 403 / 404 error pages (they extend base_sub, so they sit on the panel) */
.error-page {
    overflow-wrap: anywhere;   /* let a long mailto:/URL wrap instead of overflowing */
}
.error-page .error-code {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 var(--space-2);
    color: var(--ink-soft);
    letter-spacing: 0.05em;
}
.error-page ul {
    margin: var(--space-2) 0 var(--space-3);
}

table.dataTable {
    position:relative;
    margin:auto;
    /* auto layout: columns grow to fit their content (so tokens never break)
       and share the width proportionally */
    table-layout: auto;
    margin-bottom: var(--space-5);
    width: 100%;
}

.action-column {
    width: 150px;  /* Set a specific width for the actions column */
    white-space: nowrap;  /* Prevent wrapping of the buttons */
}

/* edit/delete column (logged-in only): let the two icon buttons wrap, and
   below the layout breakpoint stack them so the narrow column never overflows */
td.width_1_9 {
    white-space: normal;
}
@media (max-width: 991.98px) {
    td.width_1_9 > a,
    td.width_1_9 > .btn {
        display: block;
    }
    td.width_1_9 .btn {
        width: 100%;
        min-width: 30px;
        margin: 3px 0;
        padding: 4px 0;
    }
}

/* Adjust button size to ensure they fit within the action column */
.action-column .btn {
    padding: 5px 10px;
    margin: 2px;
    font-size: 12px;
}

.meter{height:10px;background:var(--wash);border-radius:6px;overflow:hidden}

.meter>span{display:block;height:100%;width:0;background:var(--link);border-radius:6px}

/* ---- Internal dashboard ----------------------------------------------------
   The {% publications_dashboard %} partial is built from raw Bootstrap 4
   components (.card, .text-muted, utility classes) that default to a white
   surface and fixed greys. Remap them onto the theme tokens so the panel
   works in dark mode, and make every card fill its grid column so cards on
   the same row share the height of the tallest one. */
.card {
    background-color: var(--wash);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    color: var(--ink);
    box-shadow: var(--surface-shadow);
}

/* Bootstrap's .row is display:flex, so the columns already stretch to equal
   height; making the card fill its column propagates that to the cards, so
   every card on a row matches the tallest one. */
.row > [class*="col-"] > .card {
    height: 100%;
}

/* ORCID iD icon used in the member / board tables in place of the word "OrcID".
   The brand green reads on both the light and the dark surface, so no theme
   handling is needed. */
.orcid-link {
    display: inline-flex;
    align-items: center;
}
.orcid-icon {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
}

/* people tables: the portrait links to the profile just like the name does */
.table td a > img {
    display: block;
    border: 0;
    transition: opacity 0.12s ease;
}
.table td a:hover > img {
    opacity: 0.85;
}

/* the card is a flex column — cancel the global `.table { margin: auto }`
   that would otherwise float a short table to the card's vertical centre */
#internal .card .table {
    margin: 0;
}

#internal .card .text-muted,
#internal .tabcontent > .text-muted {
    color: var(--ink-soft) !important;
}

/* vertical breathing room when the card grid wraps (BS4 has no .g-* classes) */
#internal .row.g-3 > [class*="col-"],
#internal .row.g-4 > [class*="col-"] {
    margin-bottom: var(--space-3);
}

/* the dashboard sits inside the 75%-wide .tabcontent, so a 4-up stat row is
   too cramped (labels break mid-word) — show it two-up from the md breakpoint */
@media only screen and (min-width: 768px) {
    #internal #Dashboard .row.g-3 > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* Stacked bar: make the container actually take the cell's width */
.stacked-meter{
  display: flex;
  width: 100%;              /* take the whole column width */
  min-width: 16rem;         /* optional: keep the column readable */
  height: 12px;
  background: var(--wash);
  border-radius: 6px;
  overflow: hidden;
}

/* Each segment must honor its % width and not shrink away */
.stacked-meter .seg{
  flex: 0 0 auto;           /* do NOT shrink; use the given width% */
  height: 100%;
  display: block;
}
.ads-legend span{ margin-right: 1rem; font-size: .875rem; }
.ads-legend .swatch{
  display:inline-block; width:12px; height:12px; border-radius:3px;
  margin-right:.35rem; vertical-align:middle;
}
.header_expansion{
    visibility: hidden;
}

.pagination {
    display: inline-block;
}

.pagination a,
.pagination .active {   /* .active is a non-link <span> — the current page */
    color: var(--ink);
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.pagination .active {
    background-color: var(--wash-strong);
    color: var(--ink);
}

.pagination a:hover:not(.active) {
    background-color: var(--wash);
}

/* DataTables 2.x pager (publications / events archive): match the site
   paginator above — flat, token colours, no border, no grey/black gradient.
   dataTables.dataTables.css loads after main.css and marks its colours
   !important, so these overrides need both higher specificity (`body …`)
   and !important. */
body div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box;
    min-width: 1.5em;
    padding: 8px 16px;
    margin-left: 2px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--ink) !important;
    transition: background-color 0.3s;
}

body div.dt-container .dt-paging .dt-paging-button:hover,
body div.dt-container .dt-paging .dt-paging-button:active {
    background: var(--wash) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    outline: none;
}

body div.dt-container .dt-paging .dt-paging-button.current,
body div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--wash-strong) !important;
    color: var(--ink) !important;
}

body div.dt-container .dt-paging .dt-paging-button.disabled,
body div.dt-container .dt-paging .dt-paging-button.disabled:hover,
body div.dt-container .dt-paging .dt-paging-button.disabled:active {
    background: transparent !important;
    color: var(--ink-soft) !important;
}

.center {
    text-align: center;
    margin: auto;
}


/* search form: a full-width tinted band inside the panel, not an
   elevated card of its own */
.filter {
    background: var(--wash);
    color: var(--ink);
    padding: clamp(16px, 2vw, 22px);
    box-shadow: none;
    width: 100%;
    max-width: none;
    margin: 0 auto var(--space-4);
}

/* filter fields spread equally across the full width regardless of how many
   there are (overrides the fixed Bootstrap col-* widths); as many equal
   columns as fit at >=180px, wrapping below that */
.filter .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    gap: 12px 16px !important;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px !important;   /* gap before the Search / Reset buttons */
}
.filter .row > [class*="col-"] {
    flex: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
.filter .form-control {
    min-width: 0;
    max-width: 100%;
}

/* --- "choices" fields ---------------------------------------------------
   django-filter's ModelMultipleChoiceFilter (and the related-object multi
   selects on the create / update forms) render as a native <select multiple>
   listbox. Squeezed into a ~180px auto-fit grid column, long option text
   (project titles, full member names, affiliation names) is silently clipped
   with no way to read it. Give these boxes room instead. */
.filter .row > [class*="col-"]:has(select[multiple]) {
    /* a multi-select gets its own full-width row in the filter grid */
    grid-column: 1 / -1;
}
select[multiple].form-control,
select[multiple].custom-select {
    max-width: 42rem;      /* wide enough for the longest real option, no sprawl */
    min-height: 9.5rem;    /* ~6 rows visible instead of the native ~4 */
    max-height: 16rem;
    overflow: auto;        /* horizontal scroll as a last resort */
    resize: vertical;      /* let the user enlarge it */
}
select[multiple] option {
    padding: 3px 6px;
    white-space: nowrap;
}

/* ---- form + filter fields: theme-aware, replacing the Bootstrap 4 defaults
   (white field, #495057 text, #ced4da border, blue focus ring) ---- */
.form-control {
    background-color: var(--field-bg);
    color: var(--ink);
    border: 1px solid var(--field-border);
    border-radius: 0;
    /* native calendar picker, spin buttons, select popup follow the theme */
    color-scheme: var(--color-scheme);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    background-color: var(--field-bg);
    color: var(--ink);
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 0.2rem var(--wash-strong);
    outline: none;
}

.form-control::placeholder {
    color: var(--ink-soft);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--field-disabled-bg);
    color: var(--ink-soft);
}

/* <option> rows: transparent so an inline <select multiple> shows the field's
   own background instead of a dark block; the dropdown popup of a single
   <select> is themed by color-scheme on the control */
.form-control option {
    background-color: transparent;
    color: var(--ink);
}

/* checkboxes / radios (crispy .form-check-input) */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--link);
    color-scheme: var(--color-scheme);
}

/* Bootstrap's .text-muted / .text-secondary (#6c757d) is theme-unaware and
   too low-contrast on the dark surface — used for form help text, the email
   line on profile pages and the internal-dashboard captions. */
.form-group .form-text,
.text-muted,
.text-secondary {
    color: var(--ink-soft) !important;
}

/* Bootstrap's custom form controls (.custom-select / .custom-checkbox /
   .custom-radio). The publication form's crispy helper is not converted to
   use_custom_control = False, so its projects/members multi-selects render as
   .custom-select and miss the .form-control styling above. */
.custom-select {
    background-color: var(--field-bg);
    color: var(--ink);
    border: 1px solid var(--field-border);
    border-radius: 0;
    color-scheme: var(--color-scheme);
}

.custom-select:focus {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 0.2rem var(--wash-strong);
    outline: none;
}

.custom-select option {
    background-color: transparent;
    color: var(--ink);
}

.custom-select:disabled {
    background-color: var(--field-disabled-bg);
    color: var(--ink-soft);
}

/* custom checkbox / radio: the visual box is .custom-control-label::before */
.custom-control-label::before {
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--link);
    border-color: var(--link);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--wash-strong);
}

/* Style the tab */
.tab {
    float: left;
    width: 25%;
    padding-right: 1%;
}

#internal .btn {
    font-size: 1.1rem !important;
}
/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    color: var(--ink);
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
    font-size: var(--text-base);
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: var(--wash);
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: var(--wash-strong);
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 12px;
    width: 75%;
}

.tablinks {
    border-radius: 10px;
    font-size: var(--text-md);
    margin:auto;
}



.no-border {
    border: none;
}

.width_1_9 {
    width: 11.111%!important;
}

/* the trailing edit/delete column carries no buttons for logged-out visitors,
   so drop it and let the table use the full width. .width_1_9 / .header_expansion
   are used only on that column, so no table-class scoping is needed. (The
   publications / events-archive DataTables also omit the <th>/<td> in the
   template so DataTables never counts a phantom column.) */
body.is-anon th.width_1_9,
body.is-anon td.width_1_9,
body.is-anon th.header_expansion {
    display: none !important;
}

.width_11_27 {
    width: 40.740%!important;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: var(--ink);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: var(--link-hover);
    text-decoration: none;
    cursor: pointer;
}

.icon_text{
    font-size: var(--text-sm);
}

.no_padding_item {
    padding: 0px 3px;
}

.breadcrumb {
    padding: .75rem 0rem !important;
}

legend{
    font-size: var(--text-md);
    border-bottom: 1px solid lightgrey !important;
}


.board-text{
    width: 80%;
    margin: auto;
    margin-bottom: var(--space-6);
}


.board-text{
    width: 80%;
    margin: auto;
    margin-bottom: var(--space-6);
}

.project-img{
    width: 100%;
    /*object-fit:scale-down !important;*/
    position: relative !important;
    height: calc(19.5vw*2/3) !important;*/
}

.project-img .w3-image{
    position:relative !important;
    width: 100% !important;
    height: 100% !important;
}

.w3-quarter{
    padding: 1.2vw;
    padding-top: 2vh !important;
}

@media only screen and (max-width: 600.98px){
    .project-img{
        width: 100%;
        position: relative !important;
        height: calc(85vw*2/3) !important;*/
    }
}

/* News slideshow on home page */
.carousel{
    width: 100%;
    margin-top: 5vh;
    padding: 0.01em 16px;
    color: rgb(0,0,0);
}

.carousel .news_container,.carousel-inner {
    height: max(250px,20vh,15vw); /* keep only container height */
}

.carousel-inner{
    width: 100%;
}

.carousel .news_container{
    display: flex;
    align-items: center;
    /* matches the .page-surface--dark content surface (the carousel clips
       overflow, so the surface's drop shadow is omitted here) */
    background: rgba(0,0,0,0.72);
    min-height: 0;
    padding:0;
}

.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;        /* prevents flexbox from stretching the box */
}

.carousel .news_content{
    background: rgba(255,255,255,0) ;
    color: #e7ebf2;
    padding-right:2vw;
    padding-left:2vw;
    padding-top:1vw;
    padding-bottom:1vw;
    overflow: hidden;     /* hides anything beyond max height */
    display: flex;
    flex-direction: column;
    height: auto;                 /* let content size naturally */
    max-height: 100%; /* container height limit */
    margin: 0;
    position:relative;
}

.news_text_block, .line-clamp{
    min-height: 0;
}

.news_text_block {
    position: relative;
    overflow: hidden;

    /* Stronger fade at the very bottom */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 85%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 85%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.carousel img, .carousel a.news_slider{
    position: relative;
}

/* Frame is always fully filled: a blurred, scaled copy of the picture fills the
   empty area; the sharp copy sits on top, fitted whole ("YouTube Shorts" fill). */
.carousel img{
    display: block;
    padding: 0;
}

/* sharp picture — fitted whole, on top, untouched */
.carousel img.sticky{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* blurred backdrop — covers the frame so nothing is empty, behind */
.carousel img.carousel_image__bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px);
    transform: scale(1.15);
    z-index: 0;
}

.carousel a.news_slider{
    position: relative;
    float: none;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: max(250px, 20vh, 15vw);
    top: 0;
    margin-top: 0;
}

.carousel .news_container {
    padding: 0;
}

.carousel h5{
    font-size: var(--text-md);
    margin-top: 1vh;
    margin-bottom: 1vh;
    max-height:40%;
    color: #fafafa;
    max-width: 100%;
}

.carousel span{
    max-height: 10%;
    width: 100%;
}

.carousel p{
    width: 100%;
}

.carousel .news_text_block a{
    color: inherit;
    text-decoration-line: underline;
    /*font-weight: bold;*/
}

.carousel .news_text_block a:hover{
    color: rgba(255,255,255,0.63) !important;
}

.carousel-item {
    min-height: 0;
    overflow: hidden;
}


.carousel-indicators {
    /* sit dead-centre in the gap between the carousel and the first card row
       (.home-content adds margin-top: 5vh). 100% resolves to the carousel's own
       bottom edge, so this tracks the real rendered height at any viewport. */
    top: calc(100% + 2.5vh);
    bottom: auto;
    margin-bottom: 0;
    transform: translateY(-50%);
}

/* arrows + indicators: identical in both themes (white chevron/dot, explicit
   opacity, stronger active contrast) — the carousel is dark in either mode */
.carousel-control-next{
    width: 10%;
    justify-content: flex-start;
    opacity: 0.63;
}

.carousel-control-prev{
    width: 10%;
    justify-content: flex-end;
    opacity: 0.63;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-control-prev-icon {
    width: 2.5vw;
    height: 2.5vw;
    margin-right: 5%;
}

.carousel-control-next-icon {
    width: 2.5vw;
    height: 2.5vw;
    margin-left: 5%;
}

.carousel-indicators li{
    width:2.5vw;
    height:1.0vh;
    opacity: 0.27;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.carousel-indicators li.active{
    opacity: 1;
    transform: scaleY(1.8);
}

/* carousel: pin the badge to the bottom-right of .carousel_image (which
   wraps the picture and is position:relative) */
.carousel .copyright_floating_container{
    position: static;
    height: 0;
    line-height: 0;
}

.carousel .copyright_floating{
    position: absolute;
    right: 0;
    bottom: 0;
    transform: none;
    z-index: 3;
    font-size: 9px !important;
    line-height: normal;
}


.carousel_image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: 0;
}

.news_title{
    max-height: 25% !important;
    width:100%;
}

.news_date{
    max-height:15% !important;
    width:100%;
}

.news_content a.btn.read-more {
    color: rgba(0,0,0,0.63)!important;
    background-color:rgba(255,255,255,0.405)!important;
    border-color:transparent;
    bottom: 4vh;
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0.1rem 0.3rem;       /* smaller vertical & horizontal padding */
    font-size: calc(0.7*max(min(1.4vw, 25px), 17px));         /* slightly smaller text */
    border-radius: 999px;        /* full pill shape */
}

.news_content a.btn.read-more:hover {
    color: rgba(0,0,0,0.72)!important;
    background-color:rgba(255,255,255,0.54)!important;
}

.form_comment{
    font-size: var(--text-xs) !important;
}

.copyright a{
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.14s ease;
}

.copyright a:hover{
    color: #fff;
    text-decoration: underline;
}

#Archive{
    scroll-margin-top: max(55px, 3.2vw);
}

.cf_hr{
    margin-top: var(--space-6);
    border-width:1px;
    border-color:lightgray;
}

.unselectable {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

#internal ul{
    margin-top:1vh;
}

.custom-control-label::before{
    background-color:#fff;
}


/* Extra small devices (portrait phones, less than 576px) and Small devices (landscape phones, less than 768px)*/
@media only screen and (max-width: 767.98px) {
    .navbar-collapse{
        flex-grow: 1 !important;
    }



    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
        background-color: var(--wash);
    }

    td a.btn:hover,
    td a .btn:hover {
        background-color: var(--wash-strong);
    }
    
    .container{
        max-width:none;
    }
    
    .breadcrumb-wrapper{
        margin-left:5%;
    }
    
    .breadcrumb{
        padding:0;
        padding-left:3vw;
    }
    
    #ORM{
        display:none;
    }
    
    .header{
        padding-bottom: 0vw;
        /* was its own hardcoded rgb(0,0,0,0.765) -- same mistake as the
           base .header rule, same fix: the shared token. */
        background-color: var(--surface) !important;
    }
    
    #internal .col{
        margin-bottom:5vw;
    }
    
    #internal .row{
        width:100%;
        margin:auto;
        display:block;
        margin-bottom:5vw;
    }
    
    .tab button {
        display: flex;
        font-size: var(--text-md);
    }
    
    .profile .tab, #internal .tab{
        display:flex;
        float: none;
        width: 100%;
        margin:auto;
        padding-right: 0%;
    }
    
    .tabcontent {
        float: left;
        padding: 3vw;
        padding-top: 5vw;
        width: 100%;
    }
    
    .tablinks {
        display:flex;
        margin:auto;
        border-radius: 10px;
        align-items: center;
    }
    
    button i{
        position:relative;
        margin:auto;
    }
    
    .icon_text{
        display:none;
    }
    
    .w3-card-4{
        width: 100%;
        margin: auto;
    }
    
    .main-container-inner {
        width: 90%;
    }
    
    #gradschool .sub-container, #imprint .sub-container, #contact .sub-container, #project_detail .sub-container, #science .sub-container, #phd_guidelines .sub-container {
        width:100%;
    }
    
    #contact .w3-row, #contact .w3-col{
        margin-bottom:0;
    }
    
    #contact .w3-half{
        margin-bottom:5vw;
    }
    
    #contact .w3-container{
        padding:0;
    }
    
    #contact p{
        padding:5vw 5vw;
    }
    
    #contact .h-100{
        height:auto!important;
    }
    
    .form{
        width: 100%;
    }
    
    .sub-container-outer {
        width: 100%;
    }

    .members .center{
        width:100%;
    }

    .table{
        margin:auto;
        margin-top:2vw;
        margin-bottom:2vw;
        width:100%;
    }

    .dataTable{
        margin:auto;
        margin-top:2vw;
        margin-bottom:2vw;
        width:100%;
    }

    
    .header_expansion{
        display:block;
    }
    
    .icon-bar {
        display:none;
    }
    #home .icon-bar {
        display:block;
    }
    
    .header-text{
        display:none
    }
    .wrapper_logo{
        display:none
    }
    
    .navbar-brand .logo {
        display: grid;
        object-fit: contain;
    }
    
    .navbar {
        text-align: left;
        position: sticky;
        position:-webkit-sticky;
        align-items: center;
        justify-content: space-between;
    }
    
    .navbar-brand-wrapper{
        margin-left:5%;
        width:max(26.52%, 132.6px); /* +20%, then -15% for small screens */
    }

    .navbar-brand-wrapper img{
        width:100%;
        height:auto;
        object-fit: contain;
    }
    
    .navbar-toggler {
        border-color: rgb(0, 0, 0, 0) !important;
        margin-right: 5%;
        color: rgba(255, 255, 255, 1) !important;
        
    }
    
    .dropdown:hover .dropdown-content, .dropdown:active .dropdown-content {
        display: block;
        text-align: right;
        position: relative;
    }
    
    .dropdown-content{
        max-height:300px;
        overflow-y:scroll; max-height:300px;
    }
    
    .no_padding_item {
        padding: 0px 10px;
    }
    
    .title-padding{
        display: none;
        width:90%;
    }
    
    .news_container {
        width: 100%;
        padding: 0.0vw;
        top: 0;
        margin-bottom: 5vh;
        background-color: rgb(255, 255, 255, 0.0);
        display: block;
        box-shadow: 0 4px 10px 0 rgba(0,0,0,0),0 4px 20px 0 rgba(0,0,0,0);
        margin: auto;
        scroll-margin-top: max(105px, 16vw);
    }
    
    #publicationsTable{
        scroll-margin-top: max(210px, 13.2vw) !important;
    }
    
    .news_content {
        padding: var(--space-4) var(--space-3);
        width: 100%;
        float: none;
        display:block;
        background: var(--surface);
        color: var(--ink);
        margin: 0 0 2vh;
    }
    
    #science .sub-container {
        display: block;
    }
    
    .sub-container {
        margin: 0.0vw;
        padding-top:0.0vw;
        width: 100%;
        color: var(--ink);
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
    }

    /* mobile: the content panels go full-bleed (break out of any centred
       parent, keep only a small reading inset). Desktop keeps the centred
       column above. */
    .background-wrapper-white,
    .content-section,
    .page-surface {
        box-sizing: border-box;
        width: auto;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: var(--space-4) var(--space-3);
    }

    .background-wrapper-white{
        min-height: 600px;
        margin-bottom: 5vh;
        text-align: justify;
    }

    /* card / own-surface pages: no oversized empty panel on mobile either (G5) */
    .background-wrapper-white:has(.page-surface),
    .background-wrapper-white:has(.w3-card-4),
    .background-wrapper-white:has(.news_container){
        min-height: 0;
    }

    img.sticky > a{
        object-fit: cover;
        margin: auto;
    }
    
    .news{
        position: relative;
        float:none;
        margin:auto;
        width: 100%;
        top:0;
        overflow:hidden;

    }
    
    .board-text{
        width: 100%;
    }

    .carousel-inner {
        width: 90%;
        margin: auto;
    }

    .carousel h5 {
        font-size: var(--text-md);
        margin-top: 1vw;
        margin-bottom: 1vw;
    }

    .carousel .news_content {
        flex: 1 1 auto;
        min-height: 0;
    }

    .news_text_block {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .line-clamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 0;
    }

    .carousel img,
    .carousel a.news_slider {
        display: none;
    }

    .carousel-control-next {
        width: 5%;
        justify-content: flex-start;
    }

    .carousel-control-prev {
        width: 5%;
        justify-content: flex-end;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2.5vw;
        height: 2.5vw;
    }

    .carousel-indicators li {
        width: 2.5vw;
        height: 1.0vh;
    }
}

    

.header-text_768_992 {
    display: none;
}
/* Medium devices (tablets, less than 992px) */
@media only screen and (min-width:768.00px) and (max-width: 991.98px) {
    .navbar-collapse{
        flex-grow: 1 !important;
    }
    
    .header_expansion{
        visibility: hidden;
    }
    
    .container{
        max-width:none;
    }
    
    h6 {
        font-size: var(--text-md);
    }

    h3 {
        font-size: var(--text-md);
    }
    
    .header{
        padding-bottom: 0vw;
        /* was its own hardcoded rgb(0,0,0,0.765) -- same mistake as the
           base .header rule, same fix: the shared token. */
        background-color: var(--surface) !important;
    }
    
    .header-text {
        display: none;
    }
    
    .header-text_768_992 {
        display: block;
        margin-right: auto;
    }
    
    .wrapper_logo{
        display:none
    }
    
    .wrapper_header{
        justify-content: center;
        position: absolute;
        margin-top: 1.9rem
    }
    
    .navbar-brand .logo {
        display:grid;
        object-fit: contain;
    }
    
    .navbar-brand-wrapper{
        margin-left:5%;
        width:19.89%; /* +20%, then -15% for medium screens */
        height:auto;
        margin-right: auto;
    }
    
    .navbar-brand-wrapper img{
        width:100%;
        height:auto;
        object-fit: contain;
    }
    
    .navbar-toggler {
        border-color: rgb(0, 0, 0, 0) !important;
        margin-right: 5%;
        color: rgba(255, 255, 255, 1) !important;
        margin-left: auto;
        padding-left: -0.1rem !important;
    }
    
    .dropdown:hover .dropdown-content, .dropdown:active .dropdown-content {
        display: block;
        text-align: right;
        position: relative;
    }
    
    .no_padding_item {
        padding: 0px 10px;
    }
    
    .breadcrumb-wrapper {
        padding-top: 0rem;
    }
    
    .news_container{
        scroll-margin-top: max(100px, 12vw) !important;
    }
    
    #publicationsTable{
        scroll-margin-top: max(250px, 27vw) !important;
    }
}

/* Large devices (desktops, less than 1200px) */
@media only screen and (min-width:992.00px) and (max-width: 1199.98px) {
    
    .navbar-brand {
        display:none
    }
    
    .navbar {
        text-align: center;
        justify-content: center;
    }
    
    .navbar{
        padding:0;
        padding-left:15vw;
        padding-right:15vw;
    }
}

/* Extra large devices (large desktops)*/
@media only screen and (min-width:1200.00px) and (min-width: 1200.00px) {
    
    .navbar{
        padding:0;
        padding-left:15vw;
        padding-right:15vw;
    }
    
    .navbar-brand {
        display:none
    }
    
    .navbar {
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================
   Mega menu — navbar redesign (branch 159-design-update)
   Reuses the existing navbar palette only: rgba(0,0,0,.85)
   surface, white text, rgb(255,255,255,.75)+black hover.
   ============================================================ */

/* trigger row — kept as a plain nav_item; no positioning so the
   panel resolves against the sticky .navbar and spans its width */
.mega-item {
    position: static;
}

.mega-btn {
    font-size: max(19px, 1.2vw);
    font-family: inherit;
    border: none;
    outline: none;
    background-color: inherit;
    color: white;
    /* horizontal padding scales with the viewport so the spacing
       between top-level items grows on wider screens */
    padding: 14px clamp(12px, 1vw, 24px);
    margin: auto;
    cursor: pointer;
    white-space: nowrap;
}

/* active trigger while its panel is open — subtle, no bright fill */
.mega-item:hover > .mega-btn,
.mega-item:focus-within > .mega-btn {
    background-color: rgba(255, 255, 255, 0.108);
    color: #fff;
    box-shadow: inset 0 -2px 0 #fff;
}

.mega-panel {
    /* laid out but hidden via visibility (transitionable, unlike display).
       On close the visibility flip is delayed, so the panel stays open — and
       interactive — while the cursor travels from the trigger down to it. */
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1030;
    /* the bar's own colour, nudged more opaque so page content
       does not bleed through the open panel */
    background-color: rgba(0, 0, 0, 0.828);
    border-top: 1px solid rgba(255, 255, 255, 0.108);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
    padding: 28px max(5vw, 32px) 34px;
    gap: 8px 40px;
    visibility: hidden;
    opacity: 0;
    /* ~300 ms grace period before it closes, so the cursor can reach it */
    transition: opacity 0.15s ease 0.3s, visibility 0s linear 0.45s;
}

.mega-item:hover > .mega-panel,
.mega-item:focus-within > .mega-panel {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;   /* open with no delay */
}

.mega-col {
    text-align: left;
    min-width: 0;
}

.mega-head {
    display: block;
    font-size: max(13px, 0.8vw);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    padding: 0 0 8px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.108);
}

.mega-panel a {
    display: block;
    color: #fff;
    /* .navbar a sets text-align:center; the sub-items must line up with the
       left-aligned mega-head instead */
    text-align: left;
    font-size: max(15px, 0.95vw);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: normal;
}

.mega-panel a:hover,
.mega-panel a:focus {
    background-color: rgba(255, 255, 255, 0.108);
    color: #fff;
}

/* ---- collapsed navbar (< lg / 992px): tap-to-expand accordions ---- */
@media only screen and (max-width: 991.98px) {
    .mega-item {
        width: 100%;
        padding: 0;
    }

    .mega-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: 100%;
        text-align: right;
        padding: 12px 5%;
    }

    /* CSS chevron (mobile only) so the accordion still reads as expandable */
    .mega-btn::after {
        content: "";
        flex: none;
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-bottom: 3px;
        transition: transform 0.15s ease;
    }
    .mega-item.mega-open .mega-btn::after {
        transform: rotate(225deg);
        margin-bottom: -3px;
    }

    /* hover / focus never open a panel on mobile — only the .mega-open class does */
    .mega-panel,
    .mega-item:hover > .mega-panel,
    .mega-item:focus-within > .mega-panel {
        display: none;
    }

    /* accordion open: no desktop close-delay / fade */
    .mega-item.mega-open > .mega-panel,
    .navbar-account.mega-open > .mega-panel {
        visibility: visible;
        opacity: 1;
        transition: none;
    }

    .mega-item.mega-open > .mega-panel {
        display: block;
        position: static;
        z-index: auto;
        background-color: rgb(255, 255, 255, 0.036);
        border-top: none;
        box-shadow: none;
        padding: 4px 5% 12px;
    }

    .mega-head {
        text-align: right;
        padding-left: 0;
    }

    .mega-panel a {
        text-align: right;
    }

    /* keep the closed trigger looking like a plain nav row */
    .mega-item:hover > .mega-btn,
    .mega-item:focus-within > .mega-btn {
        background-color: inherit;
        color: white;
        box-shadow: none;
    }
    .mega-item.mega-open > .mega-btn {
        background-color: rgba(255, 255, 255, 0.108);
        color: #fff;
    }
}

/* ---- desktop: the logo is the first of the centered top-level items ---- */
@media only screen and (min-width: 992px) {
    /* logo + the four mega menus on the left, account menu pushed to the right */
    .navbar {
        justify-content: flex-start;
        padding-left: max(16px, 2vw);
        padding-right: max(16px, 2vw);
    }

    .navbar .navbar-collapse {
        text-align: left;
    }

    .navbar .navbar-right {
        margin-left: auto;
    }

    /* outer rhythm identical to a .nav_item / .mega-item */
    .navbar .navbar-brand-wrapper {
        display: flex;
        align-items: center;
        padding: 14px 0.2vw;
        margin: 0;
    }

    /* the whole padded box is the link to home; horizontal spacing
       matches .mega-btn so the logo reads as another top-level item */
    .navbar a.navbar-brand {
        display: flex;
        align-items: center;
        padding: 0 clamp(12px, 1vw, 24px);
        margin: 0;
    }

    .navbar .navbar-brand .logo {
        display: flex;
        align-items: center;
        position: static;
    }

    .navbar .navbar-brand .logo img {
        display: block;
        height: 52.8px; /* +20% */
        width: auto;
        margin: 0;
    }
}

/* ============================================================
   Account menu (right side of the navbar) + footer link row
   ============================================================ */
/* stays position: static (like every other .mega-item) so its dropdown
   anchors to the .navbar and `top: 100%` lands on the navbar's bottom edge,
   not on the shorter account button (which caused the panel to overlap the bar) */
.navbar-account {
    position: static;
}

/* wrapper holding the theme toggle + the account menu. It is NOT a .mega-item,
   so hovering the toggle does not open the account dropdown. */
.navbar-right {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.4vw, 8px);
}

.navbar-account .account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* theme toggle — icon-only button just left of the account icon */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: max(17px, 1.05vw);
    line-height: 1;
    padding: 14px 6px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.12s ease, opacity 0.12s ease;
}
.theme-toggle:hover {
    opacity: 0.72;
}
.theme-toggle svg {
    width: 1.15em;
    height: 1.15em;
    display: block;
}
.theme-toggle .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-light { display: block; }

.navbar-account .account-btn .account-name {
    font-size: 0.72em;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* compact, right-aligned dropdown instead of the full-width mega panel */
.navbar-account .mega-panel {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 180px;
    padding: 8px;
}

.navbar-account .mega-panel a {
    text-align: left;
    white-space: nowrap;
}

/* collapsed navbar: keep the account as a small floating dropdown by the
   hamburger, not a full-width accordion row */
@media only screen and (max-width: 991.98px) {
    .header-text_768_992 {
        margin-right: 0;
    }

    .navbar-right {
        margin-left: auto;
    }

    .navbar-account.mega-item {
        width: auto;
        padding: 0;
    }

    .navbar-account .mega-btn {
        width: auto;
        padding: 12px 10px;
    }

    .navbar-account .mega-btn::after {
        content: none;
    }

    .navbar-account .mega-panel,
    .navbar-account.mega-open > .mega-panel {
        position: absolute;
        left: auto;
        right: 6px;
        width: max-content;
        min-width: 170px;
        padding: 6px;
        background-color: rgba(0, 0, 0, 0.855);
        text-align: left;
    }

    .navbar-account .mega-panel {
        display: none;
    }

    .navbar-account.mega-open > .mega-panel {
        display: grid;
    }

    .navbar-account .mega-panel a {
        text-align: left;
    }
}

/* ---- footer link row (Funding / Imprint / Contact) ---- */
.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 22px;
    padding: 6px 16px 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color 0.14s ease;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Collapse the outer base_sub wrapper whenever the page's content already
   brings its own surface(s): an explicit .page-surface (science, grad school,
   members …), a .w3-card-4 grid (contact, central tasks, research areas), or
   .news_container blocks. Otherwise (prose pages: imprint, PhD guidelines,
   project detail; table pages: publications, theses, events …) the wrapper
   stays and is the reading surface. This replaces the per-page #contact hack
   and removes the 600px min-height that left big empty panels on sparse card
   pages (audit G5). */
.background-wrapper-white:has(.page-surface),
.background-wrapper-white:has(.w3-card-4),
.background-wrapper-white:has(.news_container) {
    background: transparent;
    box-shadow: none;
    min-height: 0;
    padding: min(40px, 8vh) 0 0;
}

/* content-surface extras — theme-agnostic via tokens
   (.page-surface--dark is gone; the token palette handles light/dark) */
hr {
    border-top-color: var(--hairline);
}

/* small italic kicker line (news / award / list dates) — replaces the old
   inline `color: grey` so it adapts to the theme */
.meta-note {
    font-style: italic;
    color: var(--ink-soft);
}

/* inline form-field error text (hand-rolled profile forms) */
.field-error {
    color: var(--danger-solid);
    font-size: var(--text-sm);
}

.table_head th {
    border-bottom: 2px solid var(--hairline);
}

/* Bootstrap forces .table { color:#212529 } — keep cell text on the token */
.table,
.page-surface .table {
    color: var(--ink);
}

/* mobile navbar: swap the hamburger for an X while the menu is open,
   align the toggler with the account icon, and space out stacked mega-heads */
/* animated hamburger <-> X (Bootstrap flips aria-expanded on the toggler) */
.navbar-toggler .burger {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}

.navbar-toggler .burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform 0.25s ease, opacity 0.15s ease, top 0.25s ease;
}

.navbar-toggler .burger span:nth-child(1) { top: 0; }
.navbar-toggler .burger span:nth-child(2) { top: 7px; }
.navbar-toggler .burger span:nth-child(3) { top: 14px; }

.navbar-toggler[aria-expanded="true"] .burger span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(2) {
    opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .navbar-toggler .burger span { transition: none; }
}

@media only screen and (max-width: 991.98px) {
    /* fixed footprint so the icon never nudges the account icon / title */
    .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        padding: 12px 0;
    }

    /* the expanded menu wraps onto its own row; brand + account + X stay put
       on the top row */
    .navbar-collapse {
        order: 1;
    }

    /* separate each column's heading from the previous group's links */
    .mega-item.mega-open .mega-col + .mega-col .mega-head {
        margin-top: 20px;
    }
}

/* ============================================================
   PROTOTYPE — "all light" theme, home page only (activated by
   [data-theme="light"] on <html>; see home.html). Keeps the fixed
   star-field behind a constant white veil. One harmonised palette:
   slate-blue ink, RUB-blue links, neutrals tinted toward the ink.
   Delete this block (and the toggle block) to revert.
   ============================================================ */
/* legacy aliases — the light-mode rules below still reference --lm-*; they now
   resolve to the unified tokens */
:root[data-theme="light"] {
    --lm-ink: var(--ink);
    --lm-ink-soft: var(--ink-soft);
    --lm-link: var(--link);
    --lm-link-hover: var(--link-hover);
    --lm-surface: var(--surface);
    --lm-surface-solid: var(--surface-solid);
    --lm-veil: var(--veil);
    --lm-wash: var(--wash);
    --lm-wash-strong: var(--wash-strong);
    --lm-hair: var(--hairline);
}

/* No page veil in light mode — the fixed background photo shows through
   directly (as in dark mode). Everything that sits on the photo rather than
   on an opaque panel (page title, breadcrumbs, footer, logo marquee) is
   therefore light-coloured below, matching dark mode. */
:root[data-theme="light"] a:hover {
    color: var(--lm-ink);
}

/* page title and breadcrumbs: no theme override — the base rules are already
   the shared light colour (they sit on the background photo in both modes) */

/* ---- header ---- */
/* background-color needs no override here any more -- .header's own rule
   now reads var(--surface) directly, which already resolves per-theme
   (see the comment on .header's background-color declaration). */

:root[data-theme="light"] .header-text .site-title,
:root[data-theme="light"] .header-text_768_992 .site-title {
    color: var(--lm-ink);
}

/* ---- navbar ---- */
:root[data-theme="light"] .navbar {
    border-bottom: 1px solid var(--lm-hair);
}

:root[data-theme="light"] .navbar .mega-btn,
:root[data-theme="light"] .navbar a,
:root[data-theme="light"] .navbar .theme-toggle,
:root[data-theme="light"] .navbar-toggler {
    color: var(--lm-ink) !important;
}

/* logo: white wordmark on dark, full-colour wordmark (SFB1491_Farbe_Web) on light.
   Selectors are 4 classes deep so they beat the .navbar .navbar-brand .logo img
   sizing rule that also sets display. */
.navbar .navbar-brand .logo .logo-img--light {
    display: none;
}
:root[data-theme="light"] .navbar .navbar-brand .logo .logo-img--dark {
    display: none;
}
:root[data-theme="light"] .navbar .navbar-brand .logo .logo-img--light {
    display: block;
}

:root[data-theme="light"] .mega-item:hover > .mega-btn,
:root[data-theme="light"] .mega-item:focus-within > .mega-btn,
:root[data-theme="light"] .mega-item.mega-open > .mega-btn {
    background-color: var(--lm-wash);
    color: var(--lm-ink) !important;
    box-shadow: inset 0 -2px 0 var(--lm-ink);
}

:root[data-theme="light"] .mega-panel,
:root[data-theme="light"] .navbar-account .mega-panel {
    background-color: var(--lm-surface-solid);
    border-top-color: var(--lm-hair);
    box-shadow: 0 14px 28px rgba(30, 42, 56, 0.16);
}

:root[data-theme="light"] .mega-panel a {
    color: var(--lm-ink);
}

:root[data-theme="light"] .mega-head {
    color: var(--lm-ink);
    border-bottom-color: var(--lm-hair);
}

:root[data-theme="light"] .mega-panel a:hover,
:root[data-theme="light"] .mega-panel a:focus {
    background-color: var(--lm-wash);
    color: var(--lm-ink);
}

/* ---- footer ---- */
/* nothing theme-specific: the footer (dark fade, light text, white logo
   marquee) is identical in both modes — it sits on the background photo
   either way. See the base .copyright / .footer-links / .uni-marquee rules. */

/* ---- carousel ---- */
:root[data-theme="light"] .carousel .news_container {
    background: var(--lm-surface);
}

:root[data-theme="light"] .carousel .news_content,
:root[data-theme="light"] .carousel h5,
:root[data-theme="light"] .carousel p,
:root[data-theme="light"] .carousel span {
    color: var(--lm-ink);
}

:root[data-theme="light"] .news_date span {
    color: var(--lm-ink-soft) !important;
}

/* prose links only (running text): wine, no underline; darkens + underlines on hover */
:root[data-theme="light"] .carousel .news_text_block a {
    color: var(--lm-link);
    text-decoration: none;
}

:root[data-theme="light"] .carousel .news_text_block a:hover {
    color: var(--lm-link-hover) !important;
    text-decoration: underline;
}

:root[data-theme="light"] .news_content a.btn.read-more {
    background-color: var(--lm-wash) !important;
    color: var(--lm-ink) !important;
}

:root[data-theme="light"] .news_content a.btn.read-more:hover {
    background-color: var(--lm-wash-strong) !important;
}

/* carousel arrows + indicators: no theme override — the base white
   chevron/dot + opacity apply in light mode too (the carousel is dark) */

/* ---- home cards (Science / Events / Research Areas) ---- */
:root[data-theme="light"] .text-align-center {
    background-color: var(--lm-surface);
}

:root[data-theme="light"] .text-align-center h3,
:root[data-theme="light"] .home-content h3 {
    color: var(--lm-ink);
}

/* ============================================================
   DARK theme (home) — ports the refinements made for light mode.
   Scoped to [data-theme="dark"] (set by home.html), so the rest
   of the site is untouched.
   ============================================================ */
:root[data-theme="dark"] {
    --dm-ink: var(--ink);
    --dm-ink-soft: var(--ink-soft);
    --dm-link: var(--link);
    --dm-link-hover: var(--link-hover);
    --dm-surface: var(--surface);
    --dm-surface-solid: var(--surface-solid);
    --dm-wash: var(--wash);
    --dm-wash-strong: var(--wash-strong);
    --dm-hair: var(--hairline);
}

/* neutral hover instead of the site-wide acid green */
:root[data-theme="dark"] a:hover {
    color: var(--dm-ink);
}

/* .header and .navbar need no background-color override here any more --
   their own base rules read var(--surface) directly (see the comment on
   .header's background-color declaration near the top of this file),
   which already resolves correctly for both themes. */
:root[data-theme="dark"] .navbar {
    border-bottom: 1px solid var(--dm-hair);   /* navbar hairline */
}

:root[data-theme="dark"] .carousel .news_container,
:root[data-theme="dark"] .text-align-center {
    background-color: var(--dm-surface);
}

/* prose links (running text): distinct colour, no resting underline,
   lightens + underlines on hover */
:root[data-theme="dark"] .carousel .news_text_block a {
    color: var(--dm-link);
    text-decoration: none;
}

:root[data-theme="dark"] .carousel .news_text_block a:hover {
    color: var(--dm-link-hover) !important;
    text-decoration: underline;
}

/* read-more: subtle wash instead of the translucent-white pill */
:root[data-theme="dark"] .news_content a.btn.read-more {
    background-color: var(--dm-wash) !important;
    color: var(--dm-ink) !important;
}

:root[data-theme="dark"] .news_content a.btn.read-more:hover {
    background-color: var(--dm-wash-strong) !important;
}

/* carousel arrows + indicators: see the base rules — same in both themes */


/* Smooth colour cross-fade while the theme swaps, via the native View
   Transitions API (see toggle() in templates/includes/head.html): the
   browser snapshots the page before and after the swap and cross-fades
   the two snapshots itself, as a single operation.

   This replaced an approach that gave every individually-themed element
   on the page (identified by walking this file for color/background/
   border declarations referencing a var(--...) token) its own CSS
   transition. That worked, but with two real problems neither of several
   rounds of fixes solved: no guarantee any two of those elements actually
   finished in step with each other (confirmed on recorded video: a
   consistent gap between adjacent elements in Chrome, inconsistent
   stutter in Safari -- both survived GPU-layer promotion attempts, a CSS
   specificity fix, and a JS trigger-timing fix), and a real performance
   cost that scaled with how much themed content was on the page (~1300
   individually-transitioning elements on /members/, enough to measurably
   drop frames). A single page-level snapshot has neither problem:
   nothing is animating independently, so nothing can drift out of sync,
   and the cost doesn't grow with page content.

   Browsers without support (Safari <18, Firefox <144, pre-2023 Chrome/
   Edge) get an instant, unanimated swap instead -- handled in the JS via
   a straight feature check, not here. */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.3s;
        animation-timing-function: ease;
    }
}

/* .header and .navbar used to independently hardcode their own dark-mode
   background-color (0.63 alpha vs 0.765 alpha -- never equal to begin
   with) and only light mode went through the shared --lm-surface/--surface
   token, unlike every other themed colour in this file, which is defined
   symmetrically for both themes via :root, :root[data-theme="dark"] /
   :root[data-theme="light"] (see the token block near the top of this
   file). Routing both through var(--surface) directly (their
   declarations, above) gives them the same symmetric, already-correct
   structure as everything else, instead of a bespoke one-off that could
   drift out of sync with itself. */