/* ==========================================================================
   GeoLAB, third design, second pass.

   One typeface. One blue. No rounded corners anywhere, because the mark is two
   squares with a square knocked out of them: a page full of soft radii was the
   clearest sign that the design had been laid on top of Bootstrap rather than
   drawn. Every block is a sharp rectangle divided by hairlines, every label is
   Lato in caps with tracking, and every section rule carries a short brick tick
   at its left end, the same red that marks the meeting point in the mark.

   Rendered with: quarto render --profile redesign   ->  _site-redesign/
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
body.quarto-light {
  --gl-paper: #ffffff;
  --gl-paper-2: #f4f6f7;
  --gl-paper-3: #e9edf0;
  --gl-rule: #dfe4e8;
  --gl-rule-strong: #33475b;
  --gl-ink: #1c242c;
  --gl-slate: #33475b;
  --gl-muted: #566878;
  --gl-faint: #7d8f9e;
  --gl-accent: #be3c44;
  --gl-accent-soft: rgba(190, 60, 68, .1);
  --gl-on-slate: #ffffff;
  --gl-ground: #ffffff;
  --gl-sheet-pad: clamp(1.25rem, 3vw, 3.25rem);
}
body.quarto-dark {
  --gl-paper: #12181e;
  --gl-paper-2: #19212a;
  --gl-paper-3: #212b35;
  --gl-rule: #2a343e;
  --gl-rule-strong: #9db3c6;
  --gl-ink: #e8eef3;
  --gl-slate: #9db3c6;
  --gl-muted: #9aabba;
  --gl-faint: #74869a;
  --gl-accent: #e2686f;
  --gl-accent-soft: rgba(226, 104, 111, .14);
  --gl-on-slate: #12181e;
  --gl-ground: #12181e;
  --gl-sheet-pad: clamp(1.25rem, 3vw, 3.25rem);
}
body.quarto-light, body.quarto-dark {
  --gl-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --gl-step: 1.5rem;
  --gl-section: 4rem;
  --gl-measure: 44rem;

  --bs-body-bg: var(--gl-paper);
  --bs-body-color: var(--gl-ink);
  --bs-emphasis-color: var(--gl-ink);
  --bs-secondary-color: var(--gl-muted);
  --bs-tertiary-bg: var(--gl-paper-2);
  --bs-border-color: var(--gl-rule);
  --bs-link-color: var(--gl-slate);
  --bs-link-hover-color: var(--gl-accent);
  --bs-heading-color: var(--gl-ink);
  --bs-code-color: var(--gl-slate);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-font-sans-serif: var(--gl-font);
}

/* ---------------------------------------------------------------- base */
/* One typeface for everything. Labels are the same Lato in caps with tracking,
   not a second family: two families on a page this small read as two designs. */
body, .navbar, .footer, input, button, select, textarea {
  font-family: var(--gl-font);
}
/* Scales with the display instead of staying at phone size on a wide screen. On the root, so
   that rem, and with it the text measure, scales along. */
html { font-size: clamp(17px, .3vw + 14.6px, 20px); }
body {
  background: var(--gl-ground);
  color: var(--gl-ink);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* Sharp corners, everywhere, including what Bootstrap and Quarto round by default. */
body :where(.card, .btn, .form-control, .form-select, .alert, .badge, .nav-link,
            .dropdown-menu, img, figure, table, input, button, select, textarea) {
  border-radius: 0;
}

/* One width for everything. The text used to sit in a narrower measure inside a
   wider column, so paragraphs were visibly thinner than the hero, the tiles and
   the tables above and below them. Instead of centring the text inside a wide
   column, the column itself is set to the readable measure: prose, headings,
   hero, tiles, figures strip and tables now share one left and one right edge,
   and the measure stays around ninety characters. */
body :where(main.content) :where(p, ul, ol, blockquote, dl,
                                 h1:not(.title), h2, h3, h4, h5) {
  max-width: none;
  margin-inline: 0;
}
main.content { padding-bottom: 1rem; }
/* full-column blocks */
main.content > :where(.gl-hero, .feature-grid, .stats-container, .finder-grid),
main.content :where(section) > :where(.feature-grid, .stats-container, .finder-grid),
main.content :where(figure, .quarto-figure, div:has(> table)) {
  max-width: none;
  margin-inline: 0;
}

h1, h2, h3, h4 { color: var(--gl-ink); text-wrap: balance; }

/* page title */
#title-block-header {
  padding-bottom: 1.1rem;
  /* Der Text stand vorher zu dicht unter der Linie des Titelblocks. */
  margin-bottom: 3.3rem;
  border-bottom: 2px solid var(--gl-rule-strong);
  position: relative;
}
#title-block-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 34px; height: 2px;
  background: var(--gl-accent);
}
.quarto-title h1.title {
  font-weight: 900;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0;
}

/* section headings: a hairline with a brick tick at its left end, the same
   accent logic as the mark. about.qmd writes its sections as level one, so h1
   and h2 in the body have to be the same thing. */
body :where(main.content) :where(h1:not(.title), h2:not(.accordion-header)) {
  font-weight: 900;
  font-size: 1.62rem;
  letter-spacing: -.018em;
  margin: var(--gl-section) auto 1rem;
  padding-top: 1.4rem;
  padding-bottom: 0;
  border-top: 1px solid var(--gl-rule);
  border-bottom: 0;
  position: relative;
}
body :where(main.content) :where(h1:not(.title), h2:not(.accordion-header))::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 34px; height: 2px;
  background: var(--gl-accent);
}
body :where(main.content section:first-of-type) > :where(h2:first-child) { margin-top: 3rem; }
/* Bootstrap hängt den Knopf eines Akkordeons in eine h2. Der Leerraum um den
   Knopf erbt die Zeilenhöhe der Überschrift und lässt unter jeder Zeile einen
   toten Streifen stehen, deshalb trägt die Kopfzeile selbst keine Schriftmaße. */
main.content h2.accordion-header { font-size: 1rem; line-height: 0; padding: 0; margin: 0; }
#title-block-header + :where(h1:not(.title), h2:not(.accordion-header)),
#title-block-header + section > :where(h1:not(.title), h2:not(.accordion-header)):first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#title-block-header + :where(h1:not(.title), h2:not(.accordion-header))::before,
#title-block-header + section > :where(h1:not(.title), h2:not(.accordion-header)):first-child::before {
  display: none;
}
body :where(main.content) :where(h3) {
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -.01em;
  color: var(--gl-slate);
  margin: 2.4rem auto .55rem;
}
body :where(main.content) :where(h1:not(.title), h2, h3) + p { margin-top: 0; }

body :where(main.content) :where(a) {
  color: var(--gl-slate);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
body :where(main.content) :where(a):hover { color: var(--gl-accent); }
a:focus-visible, button:focus-visible, .btn:focus-visible, img:focus-visible {
  outline: 2px solid var(--gl-accent);
  outline-offset: 2px;
}
strong { font-weight: 700; color: var(--gl-ink); }
hr { border: 0; border-top: 1px solid var(--gl-rule); opacity: 1; margin: var(--gl-section) 0; }
body :where(main.content) :where(ul, ol) { padding-left: 1.3rem; }
body :where(main.content) :where(li) { margin: .28rem 0; }
body :where(main.content) :where(li)::marker { color: var(--gl-faint); }
blockquote {
  border-left: 2px solid var(--gl-accent);
  padding: .15rem 0 .15rem 1.1rem;
  margin: 1.75rem 0;
  color: var(--gl-muted);
}
code:not(pre code) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--gl-paper-2);
  border: 1px solid var(--gl-rule);
  padding: .06em .3em;
  color: var(--gl-slate);
}
::selection { background: var(--gl-accent-soft); }

/* the one label style, used for every eyebrow, column head and table head */
.gl-eyebrow, .hero-kicker, .finder-kicker, .stat-label,
.nav-footer-center strong, .nav-footer-right strong,
body :where(main.content) :where(thead th) {
  font-family: var(--gl-font);
  font-weight: 700;
  font-size: .71rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gl-faint);
}

/* ---------------------------------------------------------------- the sheet */
#quarto-content { background: transparent; }
main.content {
  background: transparent;
  border: 0;
  padding: var(--gl-sheet-pad);
  padding-bottom: calc(var(--gl-sheet-pad) * 1.5);
  margin-bottom: 0;
}
/* No block bleeds past the others any more: the hero, the tiles, the figures
   strip and the finder cards keep the same left and right edge as the text, so
   the page has one width from top to bottom. */
main.content > .gl-hero { margin-top: 0; }

/* ---------------------------------------------------------------- navbar */
/* Paper with a hairline, not a coloured slab: that slab was the loudest blue on
   the page. The Bootstrap icons are hidden here on purpose, they are a third
   visual language next to the hand-drawn illustrations and the geometric mark. */
body .navbar {
  background: var(--gl-paper) !important;
  border-bottom: 1px solid var(--gl-rule);
  padding: .5rem 0;
  box-shadow: none;
}
body .navbar .nav-link .bi,
body .navbar .menu-text + .bi { display: none !important; }
body .navbar .navbar-brand,
body .navbar .navbar-brand:hover {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--gl-ink);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -.025em;
}
body .navbar .navbar-brand img { height: 24px; width: auto; }
/* The site title is empty so that the browser tab is not "<page> – GeoLAB", which means Quarto
   draws the mark alone in the navbar. The wordmark comes back here. */
body .navbar .navbar-brand { margin-right: 1.1rem; }
body .navbar .navbar-brand::after {
  content: "GeoLAB";
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -.025em;
  color: var(--gl-ink);
  line-height: 1;
}
body.quarto-dark .navbar .navbar-brand img { content: url(../assets/brand/geolab-mark-invert.svg); }
body .navbar .nav-link {
  color: var(--gl-muted) !important;
  font-weight: 700;
  font-size: .92rem;
  padding: .5rem .75rem;
  border-bottom: 2px solid transparent;
}
body .navbar .nav-link:hover { color: var(--gl-ink) !important; border-bottom-color: var(--gl-rule); }
body .navbar .nav-link.active {
  color: var(--gl-ink) !important;
  border-bottom-color: var(--gl-accent);
}
body .navbar .quarto-navbar-tools a, body .navbar .aa-DetachedSearchButtonIcon { color: var(--gl-muted) !important; }

/* ---------------------------------------------------------------- hero */
.gl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin: 0 0 var(--gl-section);
  border-top: 2px solid var(--gl-rule-strong);
  border-bottom: 1px solid var(--gl-rule);
  background: var(--gl-paper);
  position: relative;
}
.gl-hero::before {
  content: "";
  position: absolute;
  left: 0; top: -2px;
  width: 34px; height: 2px;
  background: var(--gl-accent);
}
@media (max-width: 860px) { .gl-hero { grid-template-columns: 1fr; } }
.gl-hero .hero-text {
  padding: 2.5rem 2.5rem 2.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 860px) { .gl-hero .hero-text { padding: 2rem 0; } }
.gl-hero .hero-kicker { margin: 0 0 1rem; }
main.content .gl-hero h1 {
  font-weight: 900;
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  letter-spacing: -.025em;
  line-height: 1.02;
  margin: 0;
  padding: 0;
  border: 0;
}
main.content .gl-hero h1::before { display: none; }
main.content .gl-hero h1 .wm-suffix { color: var(--gl-slate); }
/* Kerstin's note, 2026-09-06: nobody can see why three of the six letters in the name are
   capitals. So the claim under the wordmark spells the acronym out and its three initials carry
   the same colour and weight as the LAB in the name above them, which is what ties the two
   together. */
.gl-hero .hero-claim .wm-part b {
  color: var(--gl-slate);
  font-weight: 900;
}
/* Tried and dropped on 2026-09-07: the same emphasis in the navbar. ::first-letter needs the
   label to be a block box, a fixed colour disappears in one of the two themes, and weight alone
   is invisible because the navbar is already semibold. The claim under the wordmark carries the
   acronym instead; the navbar's real problem is that Benchmarking has no target at all. */
.gl-hero .hero-claim {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--gl-muted);
  max-width: 32ch;
  margin: 1.1rem 0 0;
}
.gl-hero .hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; }
main.content .gl-hero .hero-actions a {
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  padding: .6rem 1.1rem;
  border: 1px solid var(--gl-slate);
  background: var(--gl-slate);
  color: var(--gl-on-slate);
}
main.content .gl-hero .hero-actions a + a { background: transparent; color: var(--gl-slate); }
main.content .gl-hero .hero-actions a:hover {
  background: var(--gl-accent); border-color: var(--gl-accent); color: #fff;
}
main.content .gl-hero .hero-actions a + a:hover { background: var(--gl-accent-soft); color: var(--gl-accent); }
/* Dieselben Knöpfe wie im Heldenbild, aber auf jeder Seite verwendbar. */
/* Der Abstand nach unten muss hier stehen: die Überschriften erben ihren oberen Abstand aus
   der Abschnittsregel, und ein Abschnitt ohne Vorgänger-Abschnitt bekommt keinen. Ohne das
   klebt die nächste Trennlinie am Knopf. */
main.content .gl-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 3.4rem; }
main.content .gl-actions p { margin: 0; }
main.content .gl-actions a {
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  padding: .6rem 1.1rem;
  border: 1px solid var(--gl-slate);
  background: var(--gl-slate);
  color: var(--gl-on-slate);
  display: inline-block;
}
main.content .gl-actions a:hover {
  background: var(--gl-accent); border-color: var(--gl-accent); color: #fff;
}

/* contain, never cover: the drawing must not be cropped at any window size */
.gl-hero .hero-art {
  position: relative;
  min-height: 260px;
  background: var(--gl-paper-2);
  border-left: 1px solid var(--gl-rule);
}
@media (max-width: 860px) {
  .gl-hero .hero-art { border-left: 0; border-top: 1px solid var(--gl-rule); min-height: 220px; }
}
.gl-hero .hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: .5rem;
  border: 0;
  background: none;
}
body.quarto-light .gl-hero .art-dark,
body.quarto-dark .gl-hero .art-light { display: none; }

/* ---------------------------------------------------------------- tiles */
/* Filled panels divided by nothing but their own edges, no border box and no
   shadow: the page reads as one surface cut into fields. The illustrations sit
   on the panel itself now that their white ground has been taken out of the
   files, and the dark theme swaps in the recoloured cut, so the navy line art
   no longer disappears against a dark page. */
/* Six tiles, so three and three. auto-fit put five in the first row and left the
   sixth alone next to a wide empty field. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2rem 0 0;
  background: var(--gl-rule);
  border-top: 1px solid var(--gl-rule);
  border-bottom: 1px solid var(--gl-rule);
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gl-paper);
  padding: 1.5rem;
  transition: background .15s ease;
}
.feature-card:hover { background: var(--gl-paper-2); }
.feature-card > p:has(> .feature-icon) { margin: 0 0 1.15rem; }
.feature-card .feature-icon {
  display: block;
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: left center;
  margin: 0;
  border: 0;
  /* No plate. In the light theme a white plate is invisible on a white card and
     then appears as a white rectangle the moment the card darkens on hover. */
  background: none !important;
}
.feature-card p { max-width: none; }
.feature-card strong {
  display: block;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  color: var(--gl-ink);
  margin: 0 0 .35rem;
}
.feature-card p:not(:has(.feature-icon)):not(:has(.card-stretch)) {
  color: var(--gl-muted);
  font-size: .96rem;
  margin: 0;
}
main.content .feature-card .card-stretch {
  margin-top: auto;
  padding-top: 1.25rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--gl-slate);
  text-decoration: none;
}
.feature-card .card-stretch::after { content: ""; position: absolute; inset: 0; }
.feature-card:hover .card-stretch { color: var(--gl-accent); }
.feature-card.feature-highlight {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
}
.feature-card.feature-highlight .feature-icon { max-width: 150px; }
@media (max-width: 1020px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .feature-card.feature-highlight { grid-template-columns: 1fr; } }

/* The dark theme uses the recoloured cut of each illustration: navy becomes a
   warm off-white, the brick red is lifted. One rule per file, because CSS
   cannot derive the sibling path from the src on its own. */
body.quarto-dark .feature-icon[src$="why-geodata_1.png"]      { content: url(../assets/icons/dark/why-geodata_1.png); }
body.quarto-dark .feature-icon[src$="explore_3.png"]          { content: url(../assets/icons/dark/explore_3.png); }
body.quarto-dark .feature-icon[src$="linking-data.png"]       { content: url(../assets/icons/dark/linking-data.png); }
body.quarto-dark .feature-icon[src$="accessing-data.png"]     { content: url(../assets/icons/dark/accessing-data.png); }
body.quarto-dark .feature-icon[src$="best-practices_2.png"]   { content: url(../assets/icons/dark/best-practices_2.png); }
body.quarto-dark .feature-icon[src$="best-practices.png"]     { content: url(../assets/icons/dark/best-practices.png); }
body.quarto-dark .feature-icon[src$="software-toolbox_2.png"] { content: url(../assets/icons/dark/software-toolbox_2.png); }
body.quarto-dark .feature-icon[src$="software-toolbox.png"]   { content: url(../assets/icons/dark/software-toolbox.png); }
body.quarto-dark .feature-icon[src$="geodata-finder.svg"]     { filter: invert(1) hue-rotate(180deg); }

/* ---------------------------------------------------------------- figures strip */
.stats-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2rem 0 0;
  background: var(--gl-rule);
  border-top: 1px solid var(--gl-rule);
  border-bottom: 1px solid var(--gl-rule);
}
.stats-container .stat-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.35rem 1.35rem 1.5rem;
  background: var(--gl-paper);
  text-decoration: none;
  transition: background .15s ease;
}
.stats-container .stat-card:hover { background: var(--gl-paper-2); }
@media (max-width: 720px) { .stats-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats-container .stat-number {
  font-weight: 900;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gl-ink);
  font-variant-numeric: tabular-nums;
}
.stats-container .stat-card:hover .stat-number { color: var(--gl-accent); }

/* ---------------------------------------------------------------- finder cards */
.finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1px;
  margin: 2.25rem 0 0;
  background: var(--gl-rule);
  border-top: 2px solid var(--gl-rule-strong);
  border-bottom: 1px solid var(--gl-rule);
}
.finder-card {
  display: flex;
  flex-direction: column;
  background: var(--gl-paper);
  padding: 1.75rem;
}
.finder-card p { max-width: none; }
main.content .finder-card h3 {
  margin: .3rem 0 .9rem;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: -.028em;
  color: var(--gl-ink);
}
.finder-kicker { display: block; }
.finder-meta {
  display: block;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .01em;
  color: var(--gl-slate);
  background: var(--gl-paper-2);
  border-left: 2px solid var(--gl-accent);
  padding: .55rem .75rem;
  margin: .3rem 0 1.1rem;
  font-variant-numeric: tabular-nums;
}
.finder-example {
  display: block;
  font-size: .92rem;
  color: var(--gl-muted);
  border-top: 1px solid var(--gl-rule);
  padding-top: .9rem;
  margin-top: .3rem;
}
.finder-card > section { display: flex; flex-direction: column; flex: 1 1 auto; }
.finder-card :where(p):has(> .finder-cta) { margin-top: auto; margin-bottom: 0; }
.finder-cta { display: block; padding-top: 1.4rem; }
main.content .finder-cta a {
  display: inline-block;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  padding: .6rem 1.1rem;
  background: var(--gl-slate);
  color: var(--gl-on-slate);
  border: 1px solid var(--gl-slate);
}
main.content .finder-cta a:hover { background: var(--gl-accent); border-color: var(--gl-accent); color: #fff; }

/* ---------------------------------------------------------------- tables */
body :where(main.content) :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  margin: 1.75rem 0;
}
body :where(main.content) :where(thead th) {
  text-align: left;
  border-bottom: 2px solid var(--gl-rule-strong);
  padding: .55rem .75rem;
  background: transparent;
}
body :where(main.content) :where(tbody td) {
  border-bottom: 1px solid var(--gl-rule);
  padding: .7rem .75rem;
  vertical-align: top;
  color: var(--gl-muted);
}
body :where(main.content) :where(tbody tr):hover :where(td) { background: var(--gl-paper-2); }
body :where(main.content) :where(tbody td):first-child { color: var(--gl-ink); }
main.content td[align="right"], main.content th[align="right"] { font-variant-numeric: tabular-nums; }
main.content div:has(> table) { overflow-x: auto; }

/* ---------------------------------------------------------------- figures */
figure, .quarto-figure { margin: 2.25rem 0; }
figure img, .figure img, main.content p > img:not(.feature-icon) {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--gl-rule);
  background: #ffffff;
}
figcaption, .figure-caption, .quarto-figure figcaption {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gl-muted);
  margin-top: .8rem;
  padding-left: .9rem;
  border-left: 2px solid var(--gl-accent);
}
.lightbox, a.lightbox { cursor: zoom-in; }

/* ---------------------------------------------------------------- footer */
/* Quarto emits <footer class="footer"> with .nav-footer inside. The old
   stylesheet addressed .page-footer, which exists nowhere in the output, so the
   footer had never been styled in any version: the column heads read as bold
   body text and the links carried no colour, which is why they did not look
   like links at all. */
footer.footer {
  margin-top: 0;
  padding: 2.75rem 0 3.5rem;
  border-top: 1px solid var(--gl-rule);
  background: var(--gl-paper);
  color: var(--gl-muted);
  font-size: .95rem;
}
footer.footer .nav-footer {
  display: block !important;
  padding: 0;
}
/* The two slots Quarto fills with a space when only one is used. */
footer.footer .nav-footer-left,
footer.footer .nav-footer-right { display: none; }
footer.footer .nav-footer-center {
  /* The footer sits outside Quarto's content grid and would run the full window width, so it is
     held to the same measure as everything above it. The two !important are against Quarto's own
     .nav-footer-center, which caps a footer column at 320px: the whole footer lives in this one
     column now, so that cap squeezed the marks into a stack. */
  width: 100% !important;
  max-width: 1040px !important;
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 3vw, 3.25rem);
  text-align: left;
  flex: none;
}
/* Quarto ships the footer text at one per cent opacity, which is invisible on any ground: the
   sentence under the name simply was not there. The measure applies to the paragraphs only; when
   it applied to every div in the footer it also capped the row of marks and the column grid at
   40ch, which is what kept them stacked in a narrow strip. */
footer.footer .nav-footer p,
footer.footer .nav-footer div {
  color: var(--gl-muted);
  line-height: 1.6;
}
footer.footer .nav-footer p { margin: 0; max-width: 40ch; }
footer.footer .nav-footer strong { display: block; margin-bottom: .7rem; }
/* The name itself stays a wordmark; only the other column heads are labels. */
footer.footer .gl-footer-cols > div:first-child strong {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--gl-ink);
  margin-bottom: .5rem;
}
footer.footer .nav-footer a {
  display: inline-block;
  color: var(--gl-slate);
  text-decoration: none;
  border-bottom: 1px solid var(--gl-rule);
  padding: .1rem 0;
  margin: .12rem 0;
}
footer.footer .nav-footer a:hover { color: var(--gl-accent); border-bottom-color: var(--gl-accent); }
/* The mark sits above the first column, so the foot of every page carries the
   identity instead of ending in unmarked text. */
.gl-footer-mark { display: block; width: 26px; height: auto; margin-bottom: .8rem; }
body.quarto-dark .gl-footer-mark { content: url(../assets/brand/geolab-mark-invert.svg); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* The landing page carries its own hero with its own h1, so Quarto's title
   block would repeat the name. :has() keeps this to pages that have a hero. */
main.content:has(.gl-hero) > #title-block-header { display: none; }

/* Pandoc wraps each raw <a class="stat-card"> in a paragraph, so the grid cell is
   that paragraph, not the link: the cells inherited the prose measure and the
   centring and floated at different heights inside the strip. */
.stats-container > p {
  margin: 0;
  max-width: none;
  display: flex;
}
.stats-container > p > .stat-card { flex: 1; }

/* ---------------------------------------------------------------- partner marks */
/* The strip of institutional marks above the footer, the same set the finders carry. Two
   techniques, because the marks are two kinds of file: the monochrome SVGs are CSS masks filled
   with the page's own ink, which is what keeps them legible in both themes without a second file
   per logo (an <img> renders the SVG in its own document, where fill: currentColor resolves to
   black and the mark disappears on a dark page); the two multi-colour rasters keep their colours
   and get a light plate on the dark theme instead. */
.gl-footer { display: grid; gap: 2.5rem; }
.gl-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  align-items: start;
  padding-top: 2.25rem;
  border-top: 1px solid var(--gl-rule);
}
.gl-footer-cols p { margin: 0; max-width: 40ch; line-height: 1.6; }
.gl-footer-cols strong { display: block; margin-bottom: .7rem; }
.gl-partners { margin: 0; }
.gl-partners-label {
  font-family: var(--gl-font);
  font-weight: 700;
  font-size: .71rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gl-faint);
  margin: 0 0 1.1rem;
}
/* Pandoc wraps the five links in a paragraph of its own, and that paragraph inherited the
   footer's 40ch measure, which is where the row broke after the third mark. The paragraph is the
   row now, and its measure is lifted. */
footer.footer .gl-partners-row,
footer.footer .gl-partners-row > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem 2.5rem;
  margin: 0;
  max-width: none;
}
footer.footer .gl-partners .gl-partners-label { max-width: none; }
footer.footer .gl-partners-row a {
  display: inline-flex;
  align-items: center;
  /* The masked marks are painted in this colour, so it has to carry them: muted at 80 per cent
     left the DIW and Leibniz marks barely legible on the dark ground. */
  color: var(--gl-slate);
  text-decoration: none;
  border-bottom: 0;
  opacity: .9;
  padding: 0;
  margin: 0;
  transition: opacity .15s ease, color .15s ease;
}
footer.footer .gl-partners-row a:hover { opacity: 1; color: var(--gl-ink); }
.pm { display: block; width: auto; }
.pm-mask {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.pm-uni {
  height: 27px;
  aspect-ratio: 190 / 45;
  -webkit-mask-image: url(../assets/brand/partners/uni-bielefeld.svg);
  mask-image: url(../assets/brand/partners/uni-bielefeld.svg);
}
.pm-leibniz {
  height: 36px;
  aspect-ratio: 100 / 79;
  -webkit-mask-image: url(../assets/brand/partners/leibniz.svg);
  mask-image: url(../assets/brand/partners/leibniz.svg);
}
/* The two multi-colour rasters. They used to sit on a white plate in the dark theme, which made
   them the only boxed marks in the row. Instead their lightness is inverted while the hue is kept:
   invert flips dark to light but also turns every hue into its complement, and the hue-rotate turns
   it back, so the dark lettering lifts off the dark ground and the coloured parts stay themselves.
   The transparent ground is untouched, filters do not change alpha. */
.pm-regiohub { height: 44px; }
body.quarto-dark .pm-regiohub {
  background: none;
  padding: 0;
  filter: invert(1) hue-rotate(180deg);
}
/* Die kombinierte DIW-SOEP-Marke bekommt bewusst KEINEN Filter. Sie trägt ihre Schrift schon weiß
   in einem türkisen Block, steht also auf dunklem Grund von sich aus richtig; der Filter, der die
   beiden Marken oben rettet, würde hier das Weiß in Schwarz drehen. Auf beiden Gründen gerendert
   und verglichen am 9. September. Das äußere Weiß der Vorlage ist freigestellt, das eingeschlossene
   Weiß der Buchstaben nicht. */
.pm-diwsoep { height: 30px; }
@media (max-width: 640px) {
  .gl-partners-row { gap: 1.25rem 1.75rem; }
  .pm-regiohub { height: 36px; }
  .pm-leibniz { height: 31px; }
}

/* ---------------------------------------------------------------- team cards
   Same idiom as the finder cards: one hairline grid, square corners, a caps label
   layer. The photos are landscape press portraits, so they sit in a fixed 4:3 box
   with object-position tuned per image, which keeps the face in frame without
   cropping the files. Konstantin asked for no portrait of himself, so his card
   carries the mark instead, which keeps the row even instead of leaving a hole. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin: 2.25rem 0 0;
  background: var(--gl-rule);
  border-top: 2px solid var(--gl-rule-strong);
  border-bottom: 1px solid var(--gl-rule);
}
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--gl-paper);
  padding: 1.5rem 1.5rem 1.25rem;
}
.team-card > section { display: flex; flex-direction: column; flex: 1 1 auto; }
main.content .team-card :where(figure, p:has(> img)) { margin: 0 0 1.1rem; }
main.content .team-card img.team-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--gl-paper-2);
}
/* Kerstin's portrait is centred, Simon stands to the right of his frame. */
main.content .team-card img[src*="kerstin"] { object-position: 50% 18%; }
main.content .team-card img[src*="simon"] { object-position: 62% 20%; }
main.content .team-card img.team-mark {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 2.2rem;
  background: var(--gl-paper-2);
}
main.content .team-card h3 {
  margin: 0 0 .5rem;
  font-weight: 900;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  line-height: 1.3;
}
/* Der Verweis erbt das Gewicht der Überschrift, sonst standen die Namen in Normalschrift,
   weil die allgemeine Verweisregel 400 setzt. */
main.content .team-card h3 a { color: var(--gl-ink); text-decoration: none; font-weight: inherit; }
main.content .team-card h3 a:hover { color: var(--gl-accent); }
.team-role {
  display: block;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--gl-muted);
  margin-bottom: 1rem;
}
/* The link row sits at the bottom of every card, so the buttons line up across the row. */
.team-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
}
main.content a.team-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .6rem;
  border: 1px solid var(--gl-rule);
  color: var(--gl-slate);
  background: var(--gl-paper);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  line-height: 1;
}
main.content a.team-link i { font-size: 1rem; }
main.content a.team-link:hover {
  background: var(--gl-slate);
  border-color: var(--gl-slate);
  color: var(--gl-on-slate);
}
main.content a.team-link:focus-visible { outline: 2px solid var(--gl-accent); outline-offset: 2px; }
@media (max-width: 560px) {
  main.content a.team-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* Pandoc wraps the anchor row in a paragraph, which would add its own margins and break the
   flex row; the paragraph becomes the row instead. */
main.content .team-links > p {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  max-width: none;
}
/* Die Marke steht auf Konstantins Karte statt eines Porträts, und in der Dunkelfassung ging das
   dunkle Marineblau im dunklen Grund unter. Getauscht wird sie wie in der Navigationsleiste. */
body.quarto-dark main.content .team-card img.team-mark {
  content: url(../assets/brand/geolab-mark-invert.svg);
}

/* ---------------------------------------------------------------- two-column list */
/* A long list of links reads badly as one tall stack; .gl-cols sets it in two and
   keeps each item unbroken. Falls back to one column on narrow screens. */
.gl-cols ul { column-count: 2; column-gap: 2.5rem; }
.gl-cols ul li { break-inside: avoid; }
@media (max-width: 720px) { .gl-cols ul { column-count: 1; } }