/* ==========================================================================
   Zache Group — Quantum Simulation Theory
   Stilvorlage, ausgepackt aus dem Entwurf von Claude Design.
   Alle Klassen tragen das Präfix zg-, damit nichts mit Bootstrap oder
   Joomla kollidiert.
   Reihenfolge: Schriften – Farben/Maße – Grundlagen – Bausteine – Sektionen
   ========================================================================== */


/* --- Schrift: Archivo, variabel (Gewicht 100–900) ------------------------ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format('woff2');
  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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format('woff2');
  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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}


/* --- Farben, Abstände, Schriftrollen ------------------------------------- */

:root {
  /* Grundfarben */
  --zg-paper: #ffffff;
  --zg-ink: #201e1d;
  --zg-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Grauleiter */
  --zg-grey-300: #d7d3d3;
  --zg-grey-400: #bab6b6;
  --zg-grey-600: #7d7979;
  --zg-grey-700: #605d5d;
  --zg-grey-800: #444141;

  /* Grün — Leitfarbe, Sektionen Home und Research */
  --zg-green: #128a56;
  --zg-green-600: #0f7a4a;
  --zg-green-700: #0b5f3a;

  /* Blaugrün — Sektionen People und Get in touch */
  --zg-teal: #12718c;
  --zg-teal-100: #eaf5f8;
  --zg-teal-400: #4e9fb5;
  --zg-teal-700: #0c4f62;
  --zg-teal-800: #093a48;

  /* Ton — Sektionen Publications und Partner */
  --zg-clay: #b35a17;
  --zg-clay-100: #fbf2ea;
  --zg-clay-700: #7d3d0d;

  /* Schrift */
  --zg-font: "Archivo", system-ui, sans-serif;
  --zg-font-weight-heading: 800;

  /* Maße */
  --zg-page-width: 1280px;   /* Inhaltsbreite inklusive Rand */
  --zg-page-gutter: 48px;    /* seitlicher Rand */
  --zg-header-height: 64px;  /* Höhe der klebenden Kopfleiste */
}


/* --- Grundlagen ---------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zg-paper);
  color: var(--zg-ink);
  font-family: var(--zg-font);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4 {
  font-family: var(--zg-font);
  font-weight: var(--zg-font-weight-heading);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

p { margin: 0 0 12px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--zg-green-700); text-decoration: none; }
a:hover { color: var(--zg-green); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--zg-green); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--zg-green) 30%, transparent); }


/* --- Bausteine: Raster --------------------------------------------------- */

/* Inhaltsstreifen einer Sektion */
.zg-wrap {
  max-width: var(--zg-page-width);
  margin: 0 auto;
  padding: 72px var(--zg-page-gutter);
}

/* Zwei Spalten: schmale Titelspalte links, Inhalt rechts */
.zg-cols {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 64px;
  align-items: start;
}

/* Zwei Spalten im Verhältnis 5:7 — Bühne und Get in touch */
.zg-cols--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* Titelspalte bleibt beim Blättern stehen */
.zg-sticky { position: sticky; top: 96px; }


/* --- Bausteine: Textteile ------------------------------------------------ */

/* Kleine Vorzeile über einer Überschrift */
.zg-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zg-grey-600);
  margin-bottom: 8px;
}

/* Größere Vorzeile in der Bühne */
.zg-eyebrow--lg {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--zg-grey-700);
  margin-bottom: 18px;
}

/* Farbiger Strich unter der Sektionsüberschrift */
.zg-rule {
  width: 40px;
  height: 4px;
  background: var(--zg-green);
}
.zg-rule--lg { width: 56px; margin-bottom: 28px; }
.zg-rule--teal { background: var(--zg-teal); }
.zg-rule--clay { background: var(--zg-clay); }

.zg-section-title { font-size: 34px; letter-spacing: -0.02em; margin: 0 0 12px; }

/* Hinweiszeile unter der Titelspalte */
.zg-note { font-size: 13px; color: var(--zg-grey-600); margin: 0; }


/* --- Bausteine: Knöpfe --------------------------------------------------- */

.zg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14.4px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-family: var(--zg-font);
  font-weight: var(--zg-font-weight-heading);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zg-ink);
  cursor: pointer;
}
.zg-btn--primary { background: var(--zg-green); color: #ffffff; }
.zg-btn--primary:hover { background: var(--zg-green-600); color: #ffffff; }
.zg-btn--primary:active { background: var(--zg-green-700); }

/* Umrissener Knopf in Ton — „Open positions“ */
.zg-btn--outline {
  border: 2px solid var(--zg-clay);
  color: var(--zg-clay-700);
}
.zg-btn--outline:hover { background: var(--zg-clay-100); color: var(--zg-clay-700); }

/* Grauer Umriss — „All publications“ */
.zg-btn--quiet { border-color: var(--zg-divider); color: var(--zg-ink); }
.zg-btn--quiet:hover {
  background: color-mix(in srgb, var(--zg-ink) 7%, transparent);
  color: var(--zg-ink);
}

/* Weißer Knopf im blaugrünen Band */
.zg-btn--invert { background: #ffffff; color: var(--zg-teal-800); }
.zg-btn--invert:hover { background: var(--zg-teal-100); color: var(--zg-teal-800); }


/* --- Bausteine: Bildrahmen ----------------------------------------------- */

/* Rahmen hält das Seitenverhältnis, das Bild füllt ihn formatfüllend */
.zg-frame { position: relative; width: 100%; border: 1px solid var(--zg-grey-300); }
.zg-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zg-frame--16-10 { aspect-ratio: 16 / 10; }
.zg-frame--16-9 { aspect-ratio: 16 / 9; border-color: var(--zg-grey-400); }
.zg-frame--1-1 { aspect-ratio: 1 / 1; }

figcaption {
  font-size: 11px;
  margin-top: 4px;
  color: color-mix(in srgb, var(--zg-ink) 55%, transparent);
}


/* --- Kopfleiste und Navigation ------------------------------------------- */

.zg-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--zg-paper);
  border-bottom: 1px solid var(--zg-grey-300);
}
.zg-header__inner {
  max-width: var(--zg-page-width);
  margin: 0 auto;
  padding: 0 var(--zg-page-gutter);
  height: var(--zg-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zg-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zg-ink);
}
.zg-brand:hover { color: var(--zg-ink); }
.zg-brand::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--zg-green);
  display: block;
}

.zg-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 28px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.zg-nav a {
  display: flex;
  align-items: center;
  align-self: stretch;
  color: var(--zg-ink);
  border-bottom: 3px solid transparent;
}
/* Die Sektionsfarbe steckt am Menüpunkt, damit Hover und aktiver Zustand
   dieselbe Farbe benutzen; navspy.js setzt nur noch die Klasse. */
.zg-nav a { --zg-nav-color: var(--zg-green); }
.zg-nav a[href="#team"], .zg-nav a[href="#contact"] { --zg-nav-color: var(--zg-teal); }
.zg-nav a[href="#publications"], .zg-nav a[href="#partner"] { --zg-nav-color: var(--zg-clay); }
.zg-nav a:hover { color: var(--zg-nav-color); }
.zg-nav a.is-active { color: var(--zg-nav-color); border-bottom-color: var(--zg-nav-color); }


/* --- Sektionen: gemeinsam ------------------------------------------------ */

.zg-section {
  scroll-margin-top: var(--zg-header-height);
  border-top: 1px solid var(--zg-grey-300);
}
.zg-section--paper { background: var(--zg-paper); }
.zg-section--teal { background: var(--zg-teal-700); color: #ffffff; }


/* --- Bühne (Home) -------------------------------------------------------- */

.zg-hero {
  scroll-margin-top: var(--zg-header-height);
  max-width: var(--zg-page-width);
  margin: 0 auto;
  padding: 88px var(--zg-page-gutter) 72px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.zg-hero__title {
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 24ch;
  text-wrap: pretty;
}
.zg-hero__lead {
  font-size: 15px;
  color: var(--zg-grey-700);
  margin: 0 0 28px;
  max-width: 44ch;
  text-wrap: pretty;
}
.zg-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Eckdaten unter dem Gruppenbild */
.zg-facts {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  border-top: 1px solid var(--zg-grey-300);
  padding-top: 16px;
}
/* Im Entwurf sind das <div>, also normales Gewicht — nicht fett. */
.zg-fact__value { font-size: 26px; }
.zg-fact__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zg-grey-600);
}


/* --- Research ------------------------------------------------------------ */

/* Einleitung der Kategorie */
.zg-intro {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 70ch;
  text-wrap: pretty;
}
.zg-intro--secondary {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 48px;
  color: var(--zg-grey-800);
}

/* Ein Forschungsthema: Text links, Abbildung rechts */
.zg-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  border-top: 1px solid var(--zg-divider);
  padding: 28px 0 36px;
}
/* Erstes und letztes Thema begrenzen den Block nach außen */
.zg-topic:first-of-type { border-top-color: var(--zg-grey-300); }
.zg-topic:last-of-type { border-bottom: 1px solid var(--zg-grey-300); }

/* Thema ohne Abbildung: Text läuft über die volle Breite */
.zg-topic--wide { grid-template-columns: minmax(0, 1fr); }
.zg-topic--wide .zg-topic__text { max-width: 70ch; }

.zg-topic h3 { font-size: 24px; margin: 0 0 12px; }
.zg-topic p { margin: 0 0 12px; color: var(--zg-grey-800); text-wrap: pretty; }
.zg-topic p:last-child { margin-bottom: 0; }
.zg-topic__aside { font-size: 13px; color: var(--zg-grey-600); }


/* --- People -------------------------------------------------------------- */

/* Gruppenleitung, ganze Breite, größeres Porträt */
.zg-lead-person {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  border-bottom: 1px solid var(--zg-grey-300);
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.zg-lead-person__portrait {
  width: 120px;
  height: 150px;
  flex: none;
  position: relative;
  border: 1px solid var(--zg-grey-400);
  background: var(--zg-teal-100);
}
.zg-lead-person__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zg-lead-person__body { flex: 1; }
.zg-lead-person__name { font-size: 22px; margin-bottom: 2px; }
.zg-lead-person__role { font-size: 13px; color: var(--zg-grey-600); margin-bottom: 12px; }
.zg-lead-person__mail {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--zg-teal-700);
  border-bottom: 2px solid var(--zg-teal);
  padding-bottom: 2px;
}

/* Übrige Mitglieder, zwei Spalten */
.zg-people { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.zg-person {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--zg-divider);
}
.zg-person__portrait {
  width: 56px;
  height: 70px;
  flex: none;
  position: relative;
  background: var(--zg-teal-100);
  border-bottom: 3px solid var(--zg-teal-400);
}
.zg-person__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zg-person__body { flex: 1; }
.zg-person__name { font-weight: 700; }
.zg-person__role { font-size: 12px; color: var(--zg-grey-600); }
.zg-person__mail,
.zg-person__mail a { font-size: 12px; color: var(--zg-teal-700); }
.zg-lead-person__mail a { color: inherit; }


/* --- Publications -------------------------------------------------------- */

/* Verweisliste in der Titelspalte */
.zg-links { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.zg-pub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 24px;
  border-top: 1px solid var(--zg-divider);
  padding: 20px 0;
}
.zg-pub:first-of-type { border-top-color: var(--zg-grey-300); }
.zg-pub:last-of-type { border-bottom: 1px solid var(--zg-grey-300); }
.zg-pub__title { font-size: 18px; margin-bottom: 4px; }
.zg-pub__authors { font-size: 13px; color: var(--zg-grey-600); }
.zg-pub__ref {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--zg-clay-700);
  font-weight: 700;
  text-align: right;
}
.zg-pub-more { margin-top: 28px; }


/* --- Get in touch -------------------------------------------------------- */

.zg-cta__title { font-size: 40px; letter-spacing: -0.025em; margin: 0 0 16px; color: #ffffff; }
.zg-cta__lead {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 40ch;
  text-wrap: pretty;
}
.zg-cta__head {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 10px;
}
.zg-cta__item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 600;
}
.zg-cta__note {
  margin: 20px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 56ch;
  text-wrap: pretty;
}


/* --- Partner ------------------------------------------------------------- */

.zg-partner { padding: 56px var(--zg-page-gutter); align-items: center; }
.zg-partner h3,
.zg-partner__title { font-size: 26px; letter-spacing: -0.015em; margin: 0; }
.zg-partner .zg-rule { margin-top: 14px; }
/* Spaltenzahl setzt das Partnermodul über --zg-logo-columns. */
.zg-logos {
  display: grid;
  grid-template-columns: repeat(var(--zg-logo-columns, 4), minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}
.zg-logo { position: relative; height: var(--zg-logo-height, 76px); }
.zg-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }


/* --- Fußzeile ------------------------------------------------------------ */

.zg-footer { border-top: 1px solid var(--zg-grey-300); }
.zg-footer__inner {
  max-width: var(--zg-page-width);
  margin: 0 auto;
  padding: 20px var(--zg-page-gutter);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--zg-grey-600);
}


/* --- Klappmenü (Knopf), auf großen Bildschirmen unsichtbar --------------- */

.zg-burger {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--zg-ink);
  font-family: var(--zg-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.zg-burger__bars,
.zg-burger__bars::before,
.zg-burger__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--zg-ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.zg-burger__bars { position: relative; }
.zg-burger__bars::before,
.zg-burger__bars::after { content: ""; position: absolute; left: 0; }
.zg-burger__bars::before { top: -7px; }
.zg-burger__bars::after { top: 7px; }

.zg-burger[aria-expanded="true"] .zg-burger__bars { background: transparent; }
.zg-burger[aria-expanded="true"] .zg-burger__bars::before { transform: translateY(7px) rotate(45deg); }
.zg-burger[aria-expanded="true"] .zg-burger__bars::after { transform: translateY(-7px) rotate(-45deg); }


/* --- Sprungmarke für die Tastatur --------------------------------------- */

.zg-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--zg-ink);
  color: #ffffff;
  padding: 12px 16px;
  font-size: 13px;
}
.zg-skip:focus { left: 0; color: #ffffff; }


/* --- Joomla: Einleitung der Kategorie ----------------------------------- */

/* Erster Absatz der Kategoriebeschreibung ist die Leadzeile,
   die weiteren laufen etwas kleiner und dunkelgrau. */
.zg-intro-block > p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 70ch;
  color: var(--zg-grey-800);
  text-wrap: pretty;
}
.zg-intro-block > p:first-child {
  font-size: 17px;
  line-height: 1.55;
  color: var(--zg-ink);
}
.zg-intro-block > p:last-child { margin-bottom: 48px; }

/* Abbildung vollständig zeigen statt formatfüllend */
.zg-frame--contain img { object-fit: contain; }
.zg-frame--contain { background: var(--zg-paper); }

/* Modulinhalt in der rechten Spalte */
.zg-module > *:last-child { margin-bottom: 0; }

.zg-pagination { margin-top: 32px; font-size: 13px; }


/* ==========================================================================
   Kleine Bildschirme
   Der Entwurf von Claude Design bringt keine Media Queries mit — dieser Block
   ist eine Ergänzung. Er ändert nichts an der Darstellung ab 1025 px.
   Haltepunkte: 1024 px (Tablet), 640 px (Telefon).
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --zg-page-gutter: 32px; }

  /* Alle zweispaltigen Sektionen werden einspaltig, Titel steht über dem Inhalt */
  .zg-cols,
  .zg-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .zg-sticky { position: static; }

  .zg-wrap { padding: 56px var(--zg-page-gutter); }
  .zg-hero { padding: 56px var(--zg-page-gutter) 48px; }
  .zg-partner { padding: 40px var(--zg-page-gutter); }

  /* Forschungsthema: Abbildung unter den Text */
  .zg-topic { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  /* Die Abschlusslinie des letzten Blocks fällt weg — sie stünde sonst nur
     56 px über der Trennlinie der nächsten Sektion und liest sich als
     doppelte Linie. Auf großen Bildschirmen sind es 108 px, dort bleibt sie. */
  .zg-topic:last-of-type { border-bottom: 0; }
  .zg-people .zg-person:last-child { border-bottom: 0; }
  .zg-module:has(> .people) > .people:last-child { border-bottom: 0; }

  .zg-logos { gap: 32px; }
}

@media (max-width: 640px) {
  :root { --zg-page-gutter: 20px; }

  /* Navigation klappt unter dem Kopf auf */
  .zg-burger { display: inline-flex; }
  .zg-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--zg-paper);
    border-bottom: 1px solid var(--zg-grey-300);
    padding: 8px var(--zg-page-gutter) 16px;
  }
  .zg-nav.is-open { display: flex; }
  .zg-header { position: sticky; }
  .zg-header__inner { position: relative; }
  .zg-nav a {
    align-self: stretch;
    padding: 14px 0;
    border-bottom: 1px solid var(--zg-divider);
    border-left: 3px solid transparent;
  }
  .zg-nav a.is-active {
    border-bottom-color: var(--zg-divider);
    border-left-color: var(--zg-nav-color);
    padding-left: 12px;
  }
  body.zg-nav-open { overflow: hidden; }

  .zg-hero__title { font-size: 32px; }
  .zg-section-title { font-size: 28px; }
  .zg-cta__title { font-size: 30px; }
  .zg-intro { font-size: 16px; }

  /* Personen einspaltig */
  .zg-people { grid-template-columns: minmax(0, 1fr); }

  /* Publikation: Kennung unter den Titel, linksbündig */
  .zg-pub { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .zg-pub__ref { text-align: left; }

  /* Eckdaten der Bühne bleiben in einer Reihe. Als Flex-Zeile mit 40 px
     Abstand brauchten sie 380 px und brachen bei 393 px um. */
  .zg-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  /* Partnerlogos zweispaltig. Die Höhe steigt, sonst wirkt ein quadratisches
     Logo neben den breiten verloren — die breiten füllen die Spalte, das
     quadratische wird von der Höhe begrenzt. */
  /* Spaltenzahl kommt aus dem Modul, dort auf drei gedeckelt. */
  .zg-logos {
    grid-template-columns: repeat(var(--zg-logo-columns-small, 2), minmax(0, 1fr));
    gap: 24px 20px;
  }
  .zg-logo { height: calc(var(--zg-logo-height, 76px) * 1.3); }

  /* Fußzeile gestapelt */
  .zg-footer__inner { flex-direction: column; gap: 4px; }
}


/* ==========================================================================
   Anpassung bestehender Module
   Diese Regeln greifen auf das Markup der Module, ohne sie zu verändern.
   ========================================================================== */

/* --- Personenmodul (IVA) ------------------------------------------------- */

/* Nur für das Standardlayout des Moduls, das blockquote-Karten ausgibt.
   Das Layout "zache" bringt eigenes Markup mit und wird davon nicht berührt. */
#team .zg-module:has(> .people) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}

#team .zg-module > .people {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--zg-divider);
}
#team .zg-module > .people img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  background: var(--zg-teal-100);
  border-bottom: 3px solid var(--zg-teal-400);
}
#team .zg-module > .people h4 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}
#team .zg-module > .people a { font-size: 12px; color: var(--zg-teal-700); }

/* Erste Karte ist die Gruppenleitung: volle Breite, größeres Porträt */
#team .zg-module > .people:first-child {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
  padding: 0 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--zg-grey-300);
}
#team .zg-module > .people:first-child img {
  width: 120px;
  height: 150px;
  border: 1px solid var(--zg-grey-400);
  border-bottom-width: 1px;
}
#team .zg-module > .people:first-child h4 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 2px;
}
#team .zg-module > .people:first-child > div { grid-column: 2; }
#team .zg-module > .people:first-child a {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--zg-teal-700);
  border-bottom: 2px solid var(--zg-teal);
  padding-bottom: 2px;
}

@media (max-width: 640px) {
  #team .zg-module:has(> .people) { grid-template-columns: minmax(0, 1fr); }
  #team .zg-module > .people:first-child { grid-column: auto; }
}

/* --- Publikationsmodul (IVA) --------------------------------------------- */

/* Kennung rechts behält ihre Farbe, auch wenn sie ein Verweis ist. */
.zg-pub__ref a,
.zg-pub__title a { color: inherit; }
.zg-pub__ref a:hover,
.zg-pub__title a:hover { text-decoration: underline; }

/* Das Modul bringt sein eigenes Stylesheet mit (media/mod_iva_references/).
   Hier werden nur seine Variablen auf die Werte dieser Seite gestellt,
   damit auch das Standardlayout des Moduls zum Entwurf passt. */
#publications .mod-iva-references {
  --iva-ref-muted: var(--zg-grey-600);
  --iva-ref-rule: var(--zg-divider);
  --iva-ref-rule-strong: var(--zg-grey-300);
  --iva-ref-accent: var(--zg-clay-700);
  --iva-ref-title-size: 18px;
  --iva-ref-meta-size: 13px;
  --iva-ref-source-size: 12px;
}
#publications .mod-iva-references .reference .source { font-weight: 700; letter-spacing: 0.06em; }
#publications .mod-iva-references .reference-links a { color: var(--zg-green-700); }

/* Gruppenleitung: Porträt über beide Zeilen, Name und Mail bleiben oben.
   Ohne das rutscht die Mailzeile unter das Bild. */
#team .zg-module > .people:first-child { align-content: start; row-gap: 2px; }
#team .zg-module > .people:first-child img { grid-row: 1 / span 2; }

/* --- Fußzeile ------------------------------------------------------------ */

/* Links der Name der Gruppe (Template-Parameter), rechts das Fußzeilenmenü
   auf der Position footer. */
.zg-footer__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
}
.zg-footer__menu a { color: inherit; }
.zg-footer__menu a:hover { color: var(--zg-ink); text-decoration: underline; }

/* Mittelpunkt zwischen den Punkten, nicht vor dem ersten */
.zg-footer__menu a + a::before {
  content: "·";
  margin-right: 4px;
}

/* Steht statt des Menüs ein Custom-Modul in der Fußzeile, verteilt es
   seine Absätze selbst — sonst kleben beide Zeilen links zusammen. */
.zg-footer__inner > .mod-custom {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
}
.zg-footer__inner .mod-custom p { margin: 0; }
.zg-footer__inner .mod-custom a { color: inherit; }
.zg-footer__inner .mod-custom a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .zg-footer__inner > .mod-custom { flex-direction: column; }
}


/* ==========================================================================
   com_iva auf Unterseiten

   Die Komponente bringt eigene Stylesheets mit (media/com_iva/). Diese Datei
   wird nach ihnen geladen, die Regeln hier gewinnen also bei gleicher
   Gewichtung. Drei Stellen brauchen mehr Gewicht und sind unten vermerkt.
   Greift nur außerhalb der Startseite (body.zg-subpage).
   ========================================================================== */

.zg-subpage .zg-wrap > article > h1,
.zg-subpage #reflib_ptitle {
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

/* Jahres- und Zugehörigkeitsauswahl über der Liste.
   publications.css setzt hier float:right — hier wird daraus eine Zeile. */
.zg-subpage #year-select {
  display: flex;
  float: none;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding: 16px 0 24px;
  border-top: 4px solid var(--zg-clay);
  border-bottom: 1px solid var(--zg-grey-300);
  margin-top: 20px;
  font-size: 13px;
}
.zg-subpage #year-select > div { display: block; }

/* Sind Jahr und Zugehörigkeit im Menüpunkt abgeschaltet, bleibt der Kasten
   leer — dann sollen auch seine Striche verschwinden. */
.zg-subpage #year-select:not(:has(select)) {
  border: 0;
  padding: 0;
  margin: 0;
}
.zg-subpage #year-select select {
  font-family: var(--zg-font);
  font-size: 13px;
  color: var(--zg-ink);
  padding: 6px 8px;
  border: 1px solid var(--zg-grey-400);
  border-radius: 0;
  background: var(--zg-paper);
}

/* Jahr als Kapitelmarke, Publikationsart darunter */
.zg-subpage #reflib_citebody h2 {
  font-size: 26px;
  margin: 48px 0 4px;
  padding-top: 24px;
  border-top: 1px solid var(--zg-grey-300);
}
.zg-subpage #reflib_citebody h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 32px;
}
.zg-subpage #reflib_citebody h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zg-clay-700);
  margin: 28px 0 0;
  padding: 0;
}

/* Eine Publikation je Zeile, getrennt von Haarlinien */
.zg-subpage .reflib_citelist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zg-subpage .reflib_citelist > li {
  padding: 16px 0;
  border-top: 1px solid var(--zg-divider);
  max-width: 90ch;
}
.zg-subpage .reflib_citelist > li:first-child { border-top-color: var(--zg-grey-300); }

/* publications.css färbt jede zweite Zeile grau. Der Selektor dort wiegt
   so viel wie einer mit zwei Klassen, deshalb hier drei. */
.zg-subpage .reflib_citelist > li:nth-child(odd) { background: none; }

/* Ebenfalls aus publications.css: der Titel steht dort fett. */
.zg-subpage .reflib_citation span.title {
  display: block;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 2px;
}
.zg-subpage .reflib_citation span.author {
  display: block;
  font-size: 13px;
  color: var(--zg-grey-600);
  margin-bottom: 6px;
}
.zg-subpage .reflib_citation a { color: var(--zg-clay-700); }


/* --- Personengruppe (Tabelle) -------------------------------------------- */

.zg-subpage #iva-stafflist { width: 100%; border-collapse: collapse; margin: 0; }
.zg-subpage #iva-stafflist td {
  padding: 20px 0;
  border-top: 1px solid var(--zg-divider);
  vertical-align: top;
}
.zg-subpage #iva-stafflist td:first-child:not([colspan='2']) {
  width: 132px;
  padding-right: 24px;
}
.zg-subpage #iva-stafflist img { max-width: 108px; height: auto; box-shadow: none; }
.zg-subpage #iva-stafflist h3 { font-size: 20px; margin: 32px 0 0; }
.zg-subpage .iva-staff-function {
  display: block;
  font-size: 13px;
  color: var(--zg-grey-600);
  margin: 2px 0 8px;
}
.zg-subpage #iva-stafflist .projectgroups h4 {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--zg-grey-600);
}


/* --- Personenverzeichnis (Kartenliste) ----------------------------------- */

/* stafflist.css setzt Lato und ein Blau, das hier nicht vorkommt. */
.zg-subpage .staff-letter {
  font: 700 12px/1 var(--zg-font);
  letter-spacing: 0.14em;
  color: var(--zg-teal-700);
  border-bottom-color: var(--zg-teal);
}
.zg-subpage .staff-item { border-bottom-color: var(--zg-divider); }
.zg-subpage .staff-name { font: 700 16px/1.35 var(--zg-font); color: var(--zg-ink); }
.zg-subpage .staff-role { font: 400 13px/1.35 var(--zg-font); color: var(--zg-grey-600); }
.zg-subpage .staff-tel,
.zg-subpage .staff-mail,
.zg-subpage .staff-contact joomla-hidden-mail a {
  font: 400 14px/1.3 var(--zg-font);
  color: var(--zg-teal-700);
}
.zg-subpage .staff-search__label,
.zg-subpage .staff-search__status { font: 400 13px/1.4 var(--zg-font); color: var(--zg-grey-600); }
.zg-subpage .staff-search__input {
  font: 400 15px/1.4 var(--zg-font);
  border: 1px solid var(--zg-grey-400);
  border-radius: 0;
  color: var(--zg-ink);
}
.zg-subpage .staff-search__input:focus {
  outline: 2px solid var(--zg-teal);
  border-color: var(--zg-teal);
}


/* --- Einzelne Person ----------------------------------------------------- */

.zg-subpage #staff img { box-shadow: none; border: 1px solid var(--zg-grey-300); }
.zg-subpage .btn-back { padding-left: 0; color: var(--zg-teal-700); }