/*
 * ITI website, styled after the new corporate design of the Universität zu Lübeck
 * (www2.uni-luebeck.de): white header with the seal logo and dark teal navigation,
 * teal headings, orange links, dark teal footer.
 *
 * Colours are CSS variables with a light and a dark set, switched by the
 * data-bs-theme attribute on <html> (set in base.html before the page renders).
 * Variables also reach into the shadow DOM of the custom elements, so the React
 * widgets follow the theme by using them.
 */

/* Source Sans 3 (SIL Open Font License, see ../fonts/SourceSans3-OFL.txt), a free
   sibling of the university's Myriad Pro. Self-hosted: no requests to Google. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-sans-3-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-sans-3-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-sans-3-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-sans-3-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */

:root,
[data-bs-theme=light] {
  --iti-font: 'Source Sans 3', 'Myriad Pro', 'Segoe UI', Arial, sans-serif;
  --iti-bg: #ffffff;
  --iti-surface: #f2f5f5;        /* panels, table stripes, hovered menu entries */
  --iti-card: #e9eeef;           /* tiles such as the staff cards */
  --iti-text: #353534;
  --iti-muted: #656565;
  --iti-heading: #336f7b;
  --iti-nav: #003840;
  --iti-link: #d64200;
  --iti-link-hover: #a33300;
  --iti-accent: #336f7b;         /* active menu entries, focus outlines */
  --iti-border: #cfdcdf;
  --iti-footer-bg: #004b5a;
  --iti-footer-bar: #2d626c;
  --iti-footer-text: #ffffff;
  --iti-footer-heading: #9dbdc4;
  --iti-shadow: 0 2px 10px rgba(0, 56, 64, .15);
  --iti-band: #336f7b;           /* coloured areas with white text: tile bands */

  --bs-body-font-family: var(--iti-font);
  --bs-body-bg: var(--iti-bg);
  --bs-body-color: var(--iti-text);
  --bs-emphasis-color: var(--iti-nav);
  --bs-secondary-color: var(--iti-muted);
  --bs-tertiary-bg: var(--iti-surface);
  --bs-border-color: var(--iti-border);
  --bs-link-color: var(--iti-link);
  --bs-link-color-rgb: 214, 66, 0;
  --bs-link-hover-color: var(--iti-link-hover);
  --bs-link-hover-color-rgb: 163, 51, 0;
  --bs-heading-color: var(--iti-heading);
  color-scheme: light;
}

[data-bs-theme=dark] {
  --iti-bg: #0e191c;
  --iti-surface: #15262a;
  --iti-card: #1c3136;
  --iti-text: #dde6e8;
  --iti-muted: #9fb2b6;
  --iti-heading: #82bfcb;
  --iti-nav: #d3e7ec;
  --iti-link: #ff9160;
  --iti-link-hover: #ffb893;
  --iti-accent: #82bfcb;
  --iti-border: #2b4248;
  --iti-footer-bg: #082a31;
  --iti-footer-bar: #0f3a43;
  --iti-footer-text: #e8f1f3;
  --iti-footer-heading: #82a9b1;
  --iti-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  --iti-band: #1f5561;

  --bs-body-bg: var(--iti-bg);
  --bs-body-color: var(--iti-text);
  --bs-emphasis-color: var(--iti-nav);
  --bs-secondary-color: var(--iti-muted);
  --bs-tertiary-bg: var(--iti-surface);
  --bs-border-color: var(--iti-border);
  --bs-link-color: var(--iti-link);
  --bs-link-color-rgb: 255, 145, 96;
  --bs-link-hover-color: var(--iti-link-hover);
  --bs-link-hover-color-rgb: 255, 184, 147;
  --bs-heading-color: var(--iti-heading);
  color-scheme: dark;
}

/* ----------------------------------------------------------------- base */

body {
  font-family: var(--iti-font);
  font-size: 1.0625rem;
  line-height: 1.55;
  background: var(--iti-bg);
  color: var(--iti-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--iti-font);
  color: var(--iti-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 1.2em 0 .5em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); margin-top: .4em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1.05rem; }

a { color: var(--iti-link); text-decoration: none; }
a:hover, a:focus { color: var(--iti-link-hover); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--iti-accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; }
hr { border-color: var(--iti-border); opacity: 1; }
table { color: inherit; }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 2000;
  padding: .5rem 1rem; background: var(--iti-nav); color: var(--iti-bg);
}
.skip-link:focus { top: 1rem; color: var(--iti-bg); }

/* ---------------------------------------------------------------- header */

/* The header and the breadcrumb stay at the top while the page scrolls; a picture banner
   between them scrolls away under the header, then the breadcrumb joins it. */
:root {
  --iti-top: 0px;                /* where the page starts: below the CMS toolbar in edit mode */
  --iti-header-height: 0px;      /* both measured by static/js/header.js */
  --iti-breadcrumb-height: 0px;
  /* below this line the page is free: for whatever else sticks, such as the team strip */
  --iti-sticky-bottom: calc(var(--iti-top) + var(--iti-header-height) + var(--iti-breadcrumb-height));
}
html.cms-toolbar-expanded, html.cms-toolbar-expanding { --iti-top: 46px; }
/* targets of links within the page stop below the bar, not behind it */
html { scroll-padding-top: calc(var(--iti-sticky-bottom) + 1rem); }

.site-header {
  position: sticky; top: var(--iti-top); z-index: 1030;
  background: var(--iti-bg);
  border-bottom: 1px solid var(--iti-border);
  transition: box-shadow .2s ease;
}
/* scrolled: a shadow under the bar, which the breadcrumb carries once it has joined */
.site-header.is-compact { box-shadow: var(--iti-shadow); }
.site-header.is-compact:has(~ .site-breadcrumb.is-stuck) { box-shadow: none; }
.site-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.site-logo { display: block; margin-right: auto; padding: .25rem 0; }
.site-logo img { display: block; height: 92px; width: auto; }
.site-logo__dark { display: none !important; }
[data-bs-theme=dark] .site-logo__light { display: none !important; }
[data-bs-theme=dark] .site-logo__dark { display: block !important; }

.site-nav { flex-direction: column; align-items: flex-end; }
@media (min-width: 992px) {
  .site-nav.navbar-collapse { display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; }
}

.site-meta {
  display: flex; align-items: center; gap: 1.25rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .95rem;
}
.site-meta .nav-item { list-style: none; }
.site-meta a, .site-meta .nav-link { color: var(--iti-nav); padding: 0; }
.site-meta a:hover { color: var(--iti-link); text-decoration: none; }

.site-languages { display: flex; align-items: center; }
.site-languages > * + *, .site-meta .site-languages > * + * { border-left: 1px solid var(--iti-nav); margin-left: .45rem; padding-left: .45rem; }
.site-languages__current { font-weight: 700; color: var(--iti-nav); }

.site-menu { gap: 1.9rem; margin: 0; }
.site-menu .nav-link {
  color: var(--iti-nav);
  font-size: 1.1rem;
  font-weight: 600;
  padding: .35rem 0;
  border-bottom: 3px solid transparent;
}
.site-menu .nav-link:hover { color: var(--iti-link); text-decoration: none; }
.site-menu .nav-link.active, .site-menu .ancestor > .nav-link {
  color: var(--iti-nav);
  border-bottom-color: var(--iti-link);
}
.site-menu .dropdown-menu {
  background: var(--iti-bg); border-color: var(--iti-border); box-shadow: var(--iti-shadow);
}
.site-menu .dropdown-item { color: var(--iti-nav); }
.site-menu .dropdown-item:hover { background: var(--iti-surface); color: var(--iti-link); }

.site-nav__toggle { border: 0; padding: .5rem; margin-left: 1rem; align-self: center; }
.site-nav__toggle:focus { box-shadow: none; }
.site-nav__toggle-bar { display: block; width: 28px; height: 3px; margin: 5px 0; background: var(--iti-nav); border-radius: 1px; }

/* scrolled: a smaller logo and one row, so the bar leaves more room for the page */
@media (min-width: 992px) {
  .site-header__inner { transition: padding .2s ease; }
  .site-logo img { transition: height .2s ease; }
  .site-header.is-compact .site-header__inner { padding-top: .5rem; padding-bottom: .45rem; align-items: center; }
  .site-header.is-compact .site-logo img { height: 52px; }
  .site-header.is-compact .site-nav.navbar-collapse { flex-direction: row-reverse; align-items: center; gap: 2rem; }
  .site-header.is-compact .site-menu { gap: 1.5rem; }
}
/* no room for the meta links beside the menu: they are at the top of the page and in the footer */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header.is-compact .site-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner, .site-logo img { transition: none; }
}

@media (max-width: 991.98px) {
  .site-header__inner { align-items: center; padding: .75rem 1rem; }
  .site-logo img { height: 52px; }
  .site-nav { align-items: stretch; width: 100%; }
  /* the open menu scrolls by itself: the header no longer scrolls away with the page */
  .site-nav.navbar-collapse { max-height: calc(100vh - var(--iti-top) - 5rem); max-height: calc(100dvh - var(--iti-top) - 5rem); overflow-y: auto; }
  .site-menu { gap: 0; padding: .5rem 0; }
  .site-menu .nav-link { padding: .6rem 0; border-bottom: 1px solid var(--iti-border); }
  .site-meta { order: 2; flex-wrap: wrap; padding: .75rem 0 .25rem; }
}

/* ------------------------------------------------------------ breadcrumb */

/* one pixel under the header, so nothing shows between the two */
.site-breadcrumb {
  position: sticky; top: calc(var(--iti-top) + var(--iti-header-height) - 1px); z-index: 1020;
  background: var(--iti-bg); font-size: 1rem;
  transition: box-shadow .2s ease;
}
.site-breadcrumb.is-stuck { box-shadow: var(--iti-shadow); }
.site-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; max-width: 1400px; margin: 0 auto; padding: .75rem 1.5rem .5rem; }
.site-breadcrumb li { color: var(--iti-muted); }
.site-breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: .45em; height: .45em;
  margin: 0 .6em .12em .45em;
  border-right: 2px solid var(--iti-muted);
  border-top: 2px solid var(--iti-muted);
  transform: rotate(45deg);
}
.site-breadcrumb a { color: var(--iti-muted); }
.site-breadcrumb a:hover { color: var(--iti-link); }
.site-breadcrumb [aria-current] { color: var(--iti-heading); }

/* ------------------------------------------------------------------ main */

.site-main { max-width: 1400px; margin: 0 auto; padding: .5rem 1.5rem 3.5rem; min-height: 40vh; }
@media (max-width: 991.98px) {
  .site-main, .site-breadcrumb ol { padding-left: 1rem; padding-right: 1rem; }
  /* the breadcrumb keeps to one line and scrolls sideways (header.js shows its end, the current page) */
  .site-breadcrumb ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .site-breadcrumb ol::-webkit-scrollbar { display: none; }
  .site-breadcrumb li { flex: none; }
}

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--iti-footer-bg); color: var(--iti-footer-text); margin-top: 2rem; }
.site-footer a { color: var(--iti-footer-text); letter-spacing: .02em; }
.site-footer a:hover { color: var(--iti-footer-text); text-decoration: underline; }
.site-footer__main {
  max-width: 1400px; margin: 0 auto; padding: 3rem 1.5rem 2.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem 3rem;
}
.site-footer h2 {
  color: var(--iti-footer-heading);
  font-size: 1.15rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 .45rem; }
.site-footer p { margin: 0; line-height: 1.8; }
.site-footer__col .row { margin: 0; }                 /* the grid plugins inside the footer alias */
.site-footer__col [class*=col] { width: 100%; max-width: none; margin: 0; padding: 0; flex: 0 0 100%; }
.site-footer__bar { background: var(--iti-footer-bar); }
.site-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2.5rem;
  padding: 1rem max(1.5rem, calc((100% - 1400px) / 2 + 1.5rem));
  font-size: .95rem;
}
.site-footer__bar ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }   /* wraps on small phones */
.site-footer__bar li { margin: 0; }
.site-footer__languages .site-languages > * + * { border-color: var(--iti-footer-text); }
.site-footer__languages .site-languages__current { color: var(--iti-footer-text); }
.site-footer__copyright { margin-left: auto !important; }

/* ------------------------------------------------ content from the CMS */

.site-main .table { --bs-table-bg: transparent; --bs-table-color: var(--iti-text); --bs-table-border-color: var(--iti-border); }
.site-main .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: var(--iti-surface); }
blockquote { border-left: 4px solid var(--iti-accent); padding-left: 1rem; color: var(--iti-muted); }
.post-detail { list-style: none; display: inline; padding: 0; color: var(--iti-muted); font-size: .85rem; text-transform: uppercase; }
.post-detail li { display: inline; margin-right: .75rem; }
.post-detail.tags li a { padding: .1rem .5rem; border: 1px solid var(--iti-accent); border-radius: 1rem; color: var(--iti-accent); }

/* ------------------------------------- sidebar menus of the React pages */

.vlist { margin-bottom: 2rem; }
.vlist ul { list-style: none; margin: 0; padding: 0; }
/* the section: a heading; its pages: a plain list with room between the entries (after the university's menus) */
.vlist > ul > li > a, .vlist > ul > li > strong {
  display: block; padding: 0 0 .9rem; font-size: 1.3rem; line-height: 1.25; font-weight: 700; color: var(--iti-nav);
}
.vlist ul ul li a, .vlist ul ul li strong {
  display: block; padding: .42rem 0; font-size: 1.05rem; line-height: 1.3; font-weight: 400; color: var(--iti-heading);
}
.vlist ul ul ul { margin: 0 0 1rem .9rem; }
/* room under each group (the list after its heading), about three times the space between entries */
.vlist > ul > li:has(> ul) { margin-bottom: 2.5rem; }
.vlist > ul > li:last-child { margin-bottom: 0; }
/* a current entry is marked with <strong> around or inside its link: keep the heading's or the list's colour */
.vlist li strong a, .vlist li a strong { color: inherit; font-weight: inherit; padding: 0; font-size: inherit; }
.vlist ul ul ul li a, .vlist ul ul ul li strong { padding: .28rem 0; font-size: .95rem; color: var(--iti-muted); }
.vlist li a:hover, .vlist li a:focus-visible { color: var(--iti-link); background: none; text-decoration: none; }
.vlist ul ul li strong, .vlist li.actives > a { color: var(--iti-link); font-weight: 600; background: none; }
.vlist > ul > li.actives > a, .vlist > ul > li.activep > a { color: var(--iti-nav); font-weight: 700; }
/* the roof picture of the old design above the menu is not part of the university's design */
.headImg2, .vlist > img:first-child { display: none; }

/* staff table (class name kept from the old TYPO3 directory) */
.tx-wtdirectory-pi1 table th { color: var(--iti-muted); font-weight: 600; }
.tx-wtdirectory-pi1 table th span { cursor: pointer; }
/* phone and room stay on one line, the columns take just the room they need */
.tx-wtdirectory-pi1 table .th-3, .tx-wtdirectory-pi1 table .td-3,
.tx-wtdirectory-pi1 table .th-4, .tx-wtdirectory-pi1 table .td-4 { width: 1%; white-space: nowrap; }
/* on narrow screens scroll the table sideways instead of squeezing it */
.tx-wtdirectory-pi1 { overflow-x: auto; }

/* loading animation: <div class="loader"></div> */
.loader { display: inline-grid; }
.loader:before, .loader:after {
  content: "";
  grid-area: 1/1;
  height: 30px;
  aspect-ratio: 6;
  --c: #0000 64%, var(--iti-accent) 66% 98%, #0000 101%;
  background: radial-gradient(35% 146% at 50% 159%, var(--c)) 0 0, radial-gradient(35% 146% at 50% -59%, var(--c)) 25% 100%;
  background-size: calc(100% / 3) 50%;
  background-repeat: repeat-x;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 15%, #0000 0 50%) 0 0 / 200%;
  mask: repeating-linear-gradient(90deg, #000 0 15%, #0000 0 50%) 0 0 / 200%;
  animation: l9 .8s infinite linear;
}
.loader:after { scale: 1 -1; animation-delay: -.2s; }
@keyframes l9 { 100% { -webkit-mask-position: -100% 0; mask-position: -100% 0; } }

/* separator inside the breadcrumb entry the page apps render (e.g. Team > name) */
.site-breadcrumb__chevron {
  display: inline-block;
  width: .45em; height: .45em;
  margin: 0 .6em .12em .45em;
  border-right: 2px solid var(--iti-muted);
  border-top: 2px solid var(--iti-muted);
  transform: rotate(45deg);
}

/* ------------------------------------------- site and floor plans (staff) */

:root { --iti-map-highlight: #d64200; }
.iti-map svg { display: block; width: 100%; height: auto; }
.iti-map .iti-map__current { fill: var(--iti-map-highlight) !important; }
/* The plans are drawings with their own colours: in dark mode flip their
   lightness but keep the hues, so the highlight stays orange-red. */
[data-bs-theme=dark] .iti-map svg { filter: invert(.92) hue-rotate(180deg); }

.iti-map-trigger {
  padding: 0; border: 0; background: none;
  color: var(--iti-link); font: inherit;
  text-decoration: underline dotted; text-underline-offset: .2em;
  cursor: pointer;
}
.iti-map-trigger:hover, .iti-map-trigger[aria-expanded=true] { color: var(--iti-link-hover); text-decoration-style: solid; }
.iti-map-popover {
  width: min(700px, calc(100vw - 2rem));
  padding: .5rem;
  background: var(--iti-bg);
  border: 1px solid var(--iti-border);
  box-shadow: var(--iti-shadow);
}

.iti-location { clear: both; margin-top: 2rem; }
/* person page: address and small maps side by side, the maps below the address on phones */
.staff-top { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start; }
.staff-top .vcard { flex: 1 1 260px; }
.iti-location--compact { clear: none; margin-top: .3rem; flex: 0 1 340px; }
.iti-location--compact h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--iti-muted); font-weight: 600; }
.iti-location--compact .iti-location__maps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.iti-location--compact figcaption { font-size: .8rem; line-height: 1.3; }
.iti-location__open { display: block; width: 100%; padding: 0; border: 1px solid var(--iti-border); background: var(--iti-bg); cursor: zoom-in; }
.iti-location__open:hover, .iti-location__open:focus-visible { border-color: var(--iti-accent); }
.iti-location__open .iti-map svg { display: block; width: 100%; height: 120px; }
@media (max-width: 700px) {
  .iti-location--compact { flex-basis: 100%; }
  .iti-location__open .iti-map svg { height: 100px; }
}
.iti-location__maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.iti-location figure { margin: 0; }
.iti-location figcaption { color: var(--iti-muted); font-size: .95rem; margin-top: .35rem; }

/* ---- picture banner between header and page (plugin "Picture banner", backend/templates/banner) ---- */
.iti-banner {
  position: relative;
  height: clamp(200px, 18.75vw, 320px);
  overflow: hidden;
  background: var(--iti-card);
}
.iti-banner__slides, .iti-banner__slide { position: absolute; inset: 0; margin: 0; }
.iti-banner__slide { opacity: 0; transition: opacity .7s ease; }
.iti-banner__slide.is-current { opacity: 1; z-index: 1; }
.iti-banner__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iti-banner__slide figcaption {
  position: absolute; left: 12px; bottom: 8px;
  color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.iti-banner button {
  position: absolute; z-index: 2; border: 0; padding: 0; cursor: pointer;
  color: var(--iti-heading); background: rgba(255, 255, 255, .72);
}
.iti-banner button:hover, .iti-banner button:focus-visible { background: rgba(255, 255, 255, .92); }
.iti-banner button:focus-visible { outline: 3px solid var(--iti-accent); outline-offset: -3px; }
.iti-banner button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iti-banner__prev, .iti-banner__next { top: calc(50% - 30px); width: 50px; height: 60px; }
.iti-banner__prev { left: 0; }
.iti-banner__next { right: 0; }
.iti-banner__prev svg, .iti-banner__next svg { padding: 14px 10px; }
.iti-banner__dots {
  position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%);
  display: flex; gap: 10px; padding: 11px 12px; background: rgba(255, 255, 255, .6);
}
.iti-banner__dots button { position: static; width: 10px; height: 10px; background: var(--iti-heading); }
.iti-banner__dots button[aria-current="true"] { background: var(--iti-link); }
.iti-banner__pause { right: 0; bottom: 0; width: 38px; height: 38px; }
.iti-banner__pause svg { padding: 10px; }
.iti-banner__pause .play { display: none; fill: currentColor; stroke: none; }
.iti-banner__pause.is-paused .play { display: inline; }
.iti-banner__pause.is-paused .pause { display: none; }
@media (max-width: 700px) {
  .iti-banner { height: 290px; }
  .iti-banner__dots { left: auto; right: 0; top: 0; bottom: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .iti-banner__slide { transition: none; } }
:root[data-bs-theme="dark"] .iti-banner button { background: rgba(14, 25, 28, .72); }
:root[data-bs-theme="dark"] .iti-banner button:hover { background: rgba(14, 25, 28, .92); }
:root[data-bs-theme="dark"] .iti-banner__dots { background: rgba(14, 25, 28, .55); }

/* ---- latest news in the side column (stories plugin, template "Seitenleiste") ---- */
.news-side { margin-bottom: 2.5rem; }
.news-side__title { margin: 0 0 .9rem; font-size: 1.3rem; line-height: 1.25; font-weight: 700; color: var(--iti-nav); }
.news-side ul { list-style: none; margin: 0; padding: 0; }
.news-side li a { display: block; padding: .5rem 0; color: var(--iti-heading); text-decoration: none; line-height: 1.3; }
.news-side li a:hover, .news-side li a:focus-visible { color: var(--iti-link); text-decoration: none; }
.news-side time { display: block; font-size: .85rem; color: var(--iti-muted); }
.news-side li a span { font-size: 1.05rem; }
.news-side__empty { color: var(--iti-muted); }
.news-side__all { display: inline-block; margin-top: .6rem; font-weight: 700; color: var(--iti-heading); }
.news-side__all:hover { color: var(--iti-link); text-decoration: none; }

/* ---- pictures in running text: beside the text on wide screens (class set in the text) ---- */
.iti-figure { margin: .4rem 0 1.4rem; }
.iti-figure img { display: block; width: 100%; height: auto; }
.iti-figure figcaption { margin-top: .4rem; font-size: .9rem; color: var(--iti-muted); }
@media (min-width: 900px) {
  .iti-figure--right { float: right; width: 42%; max-width: 440px; margin: .3rem 0 1.2rem 2rem; }
  .iti-figure--left { float: left; width: 42%; max-width: 440px; margin: .3rem 2rem 1.2rem 0; }
  .iti-figure + h2, .iti-figure + h3 { margin-top: 0; }
}
/* a section starts below a picture beside the text, except the section the picture belongs to */
main h2 { clear: both; }
main .iti-figure + h2 { clear: none; }

/* research structure: on phones it takes the whole width (its box in the text has a padding of 2em) */
@media (max-width: 700px) {
  div:has(> ancient-architecture) { padding: 1em 0 !important; }
}

/* site plan: the buildings in the university's teal, as the floor in the floor plans (the SVG itself uses orange) */
.iti-map [style*="fill:#f08269"], .iti-map [fill="#f08269"] { fill: #537e89 !important; }

/* person and project pages: the side column (photo, fields, groups) floats right with a fixed width;
   on phones it goes above the text at full width */
@media (max-width: 700px) {
  .col3 { float: none !important; width: auto !important; margin: 0 0 1rem !important; }
  .col3 .photo { margin-left: 0 !important; }
  /* person page on a phone: name, address with the maps, then photo and fields, then the rest */
  .staff-details { display: flex; flex-direction: column; }
  .staff-details > * { order: 3; }
  .staff-details > h5, .staff-details > h1 { order: 0; }
  .staff-details > .staff-top { order: 1; }
  .staff-details > .col3 { order: 2; margin-top: 1.5rem !important; }
}

/* a call to action in running text, like the university's outlined buttons */
.iti-button {
  display: inline-flex; align-items: center; gap: 1.2rem; margin: .4rem 0 .6rem; padding: .85rem 1.2rem;
  border: 1px solid var(--iti-border); color: var(--iti-text); font-weight: 700; text-decoration: none;
}
.iti-button::after { content: "→"; color: var(--iti-heading); font-size: 1.3rem; line-height: 1; }
.iti-button:hover, .iti-button:focus-visible { border-color: var(--iti-heading); color: var(--iti-text); text-decoration: none; }
/* the way to the admin under the title of a person's, project's, field's or group's page (contentpages/editing.py) */
.record-edit { margin: .25rem 0 1rem; }
.iti-offer--teal .record-edit .iti-button,
.iti-offer--teal .record-edit .iti-button:hover,
.iti-offer--teal .record-edit .iti-button:focus-visible { border-color: #fff; color: #fff; text-decoration: none; }
.iti-offer--teal .record-edit .iti-button::after { color: #fff; }

/* ---- an offer in running text (the positions on the Jobs page, the blocks of the home and
   Contact pages and the legal notice), after the university's text-and-picture sections:
   heading and introduction, the picture beside them, and a box with the details that
   reaches under the picture. The block is tinted, the picture stands out of its top;
   --teal colours it, --reverse puts the picture on the left, --plain has no picture.
   The layout follows the width of the column the block is in, not of the window: the
   home page has the news beside it. */
.site-main:has(.iti-offer), .site-main .col:has(.iti-offer) { container-type: inline-size; }

/* narrow: one column, the picture between the introduction and the box, nothing overlaps */
.iti-offer {
  --offer-out: 3.5rem;            /* how far the picture stands out of the block */
  --offer-under: 7rem;            /* how far the box reaches under the picture */
  margin: 2.5rem 0; padding: 1.5rem;
  background: var(--iti-surface);
}
.iti-offer__text h1, .iti-offer__text h2 { margin-top: 0; }
.iti-offer__text > :last-child { margin-bottom: 0; }
.iti-offer__picture { position: relative; z-index: 2; margin: 1.5rem 0 0; }
.iti-offer__picture a { display: block; }
.iti-offer__picture img, .iti-offer__picture .news-tile { display: block; width: 100%; height: clamp(200px, 50cqw, 320px); object-fit: cover; }
.iti-offer__picture figcaption {
  position: absolute; left: 12px; bottom: 8px; right: 12px;
  color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
/* shown whole, not cut to the block: a group photo, or a drawing such as a plan (on white, as drawn) */
.iti-offer .iti-offer__picture--whole img { height: auto; object-fit: contain; }
.iti-offer__picture--whole img[src$=".svg"] { padding: 1rem; background: #fff; }
.iti-offer__box {
  position: relative; z-index: 1; margin-top: 1.5rem; padding: 1.5rem;
  background: var(--iti-bg); color: var(--iti-text);
  border: 2px solid var(--iti-border); border-radius: 10px;
}
.iti-offer__box > :first-child { margin-top: 0; }
.iti-offer__box > :last-child, .iti-offer__box .iti-button { margin-bottom: 0; }
.iti-offer--teal { background: var(--iti-band); color: #fff; }
.iti-offer--teal .iti-offer__text h1, .iti-offer--teal .iti-offer__text h2, .iti-offer--teal .iti-offer__text a { color: #fff; }
.iti-offer--teal .iti-offer__text a { text-decoration: underline; }
@media (max-width: 600px) {
  .iti-offer { margin-left: -1rem; margin-right: -1rem; padding: 1.5rem 1rem; }   /* to the edges of the screen */
  .iti-offer__box { padding: 1.25rem 1rem; }
}

/* wide: text and picture side by side, the box under the text and partly under the picture */
@container (min-width: 900px) {
  .iti-offer {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
    margin: calc(var(--offer-out) + 3rem) 0 3rem; padding: 3rem;
  }
  .iti-offer__text { grid-column: 1; grid-row: 1; padding-right: 3rem; }
  .iti-offer__picture {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    margin: calc(-3rem - var(--offer-out)) 0 0;
  }
  .iti-offer__picture img, .iti-offer__picture .news-tile { height: min(460px, 40cqw); }
  .iti-offer__box {
    grid-column: 1; grid-row: 2; align-self: start;
    width: calc(100% + var(--offer-under)); margin-top: 2rem;
    padding: 2rem calc(var(--offer-under) + 2rem) 2rem 2rem;
  }
  .iti-offer--teal .iti-offer__box { border-color: transparent; }
  .iti-offer--reverse .iti-offer__text { grid-column: 2; padding: 0 0 0 3rem; }
  .iti-offer--reverse .iti-offer__picture { grid-column: 1; }
  .iti-offer--reverse .iti-offer__box {
    grid-column: 2; margin-left: calc(-1 * var(--offer-under));
    padding: 2rem 2rem 2rem calc(var(--offer-under) + 2rem);
  }
  /* without a picture: the box takes its place beside the text and stands out of the block */
  .iti-offer--plain .iti-offer__box, .iti-offer--plain.iti-offer--reverse .iti-offer__box {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    width: auto; margin: calc(-3rem - var(--offer-out)) 0 0; padding: 2rem;
    border-color: var(--iti-border);
  }
  .iti-offer--plain.iti-offer--reverse .iti-offer__box { grid-column: 1; }
}

/* ---- news (templates/djangocms_stories): the latest post as a block like the ones above,
   the others as cards; a post without a picture shows a tile with its date ---- */
.news-date { margin: 0 0 .5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--iti-muted); }
.iti-offer--teal .news-date { color: #fff; }
.news-subtitle { font-size: 1.2rem; color: var(--iti-muted); }
.news-abstract > :last-child { margin-bottom: 0; }
.news-lead h2 a, .news-card h3 a { color: var(--iti-heading); }
.news-lead h2 a:hover, .news-card h3 a:hover { color: var(--iti-link); text-decoration: none; }
.news-lead .iti-button { margin-top: 1.5rem; }
.news-tile {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  background: var(--iti-band); color: #fff;
}
.news-lead .news-tile, .news-card:nth-child(even) .news-tile { background: var(--iti-footer-bg); }
.news-tile__day { font-size: clamp(3.5rem, 12cqw, 6rem); font-weight: 700; line-height: 1; }
.news-tile__month { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2rem; margin: 3rem 0; }
.news-card { display: flex; flex-direction: column; background: var(--iti-surface); }
.news-card__picture { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.news-card__picture img, .news-card__picture .news-tile { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.news-card:hover .news-card__picture img { transform: scale(1.03); }
.news-card__text { padding: 1.25rem 1.5rem 1.5rem; }
.news-card h3 { margin: 0 0 .6rem; font-size: 1.3rem; line-height: 1.25; }
.news-pages { display: flex; gap: 1.5rem; align-items: center; margin: 2rem 0; }
.news-post .blog-content, .news-post .blog-visual { max-width: 52rem; }
.news-post .blog-content { font-size: 1.1rem; overflow-wrap: anywhere; }
.news-back { margin-top: 2.5rem; }
@media (prefers-reduced-motion: reduce) { .news-card__picture img { transition: none; } }

/* ---- what a person teaches, on their page (institute/person_detail.html) ---- */
.person-teaching h3 { margin: 1.2rem 0 .5rem; font-size: 1.05rem; color: var(--iti-muted); text-transform: uppercase; letter-spacing: .05em; }
.person-courses { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.person-courses a {
  display: inline-block; padding: .55rem .9rem; border: 2px solid var(--iti-border); border-radius: 10px;
  color: var(--iti-text); font-weight: 600; text-decoration: none;
}
.person-courses a:hover, .person-courses a:focus-visible { border-color: var(--iti-heading); color: var(--iti-link); }
.person-courses-earlier { margin-top: 1.5rem; }
.person-courses-earlier summary { cursor: pointer; font-weight: 600; color: var(--iti-heading); }
.person-courses-earlier dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 1rem 0 0; }
.person-courses-earlier dt { color: var(--iti-muted); font-weight: 600; }
.person-courses-earlier dd { margin: 0; }
@media (max-width: 600px) { .person-courses-earlier dl { grid-template-columns: 1fr; } .person-courses-earlier dd { margin-bottom: .6rem; } }