/* ==========================================
   Basis & Variablen
   ========================================== */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
  /* ===== Layout / Typo ===== */
  --site-max: 1220px;   /* max. Seitenbreite */
  --text-max: 830px;    /* max. Textbreite */
  --base-font: 16px;    /* Grundschriftgröße */

  /* ===== Brand-Palette (einmalig zentral) ===== */
  --brand-blue:   #0a4c86; /* Primärblau (Hero-Tags, Links) */
  --brand-navy:   #083963; /* dunkleres Blau (optional für Akzente) */
  --brand-orange: #e46a2c; /* Features: Data/Equity etc. */
  --brand-green:  #2ba89c; /* Features: Quant */

  /* Öffentliche Aliase (für bestehende Stellen im CSS) */
  --brand:      var(--brand-blue); /* Hauptmarke */
  --brand-dark: var(--brand-navy);

  /* ===== Neutrals / UI ===== */
  --ink-1: #111;
  --ink-2: #222;
  --ink-3: #333;
  --muted: #6f777d;
  --line:  #d0d6dd; /* statt #c6ced7 oder #e0e3e8 oder #eee */

  /* Hero-Hintergrund */
  --hero-bg: #f7f7f7;

  /* ===== Mediengrößen Home/Contact ===== */
  --photo-col:     450px; /* Desktop-Bildspalte */
  --photo-col-sm:  280px; /* Tablet-Bildspalte */
  --photo-mobile:  320px; /* Bildbreite Phone */

  --header-h: 64px; /* ungefähre Höhe vom Masthead/Nav */
}

/* ==========================================
   Globale Container + Typografie
   ========================================== */
.page__content,
.initial-content,
.archive,
.splash .page__content {
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 24px);
  width: 100%;
}


body {
  font-size: var(--base-font);
  line-height: 1.6;
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


img { max-width: 100%; height: auto; display: block; }

.page__content a { color: var(--brand); }
.page__content a:hover { text-decoration: underline; }
:target { scroll-margin-top: 80px; }

/* Headlines */
.page__content h2 {
  font-size: 1.1rem !important;
  line-height: 1.35 !important;
  margin: 0 0 0.4rem !important;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ==========================================
   Startseite
   ========================================== */
.homepage-wrapper {
  display: flex;
  flex-wrap: wrap; /* <-- NEU: erlaubt Umbruch unter das Bild */
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

.homepage-photo { flex: 0 0 var(--photo-col); }
.homepage-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

.homepage-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.6;
  max-width: var(--text-max);
  display: flex;
  flex-direction: column;
}



/* Abstand zwischen Absätzen nur auf der Startseite anpassen */
.homepage-text p {
  margin-bottom: 0.6em; /* kleinerer Abstand */
}




/* ==========================================
   Footer
   ========================================== */
.page__footer,
.page__footer footer,
.footer {
  background: #111 !important;
  color: #6f777d !important;
  border: none !important;
}
.mein-footer-rechts {
  display: block;
  text-align: center;
  font-size: 0.8em;
  color: #6f777d;
  font-weight: 400;
  opacity: 0.92;
  padding: 8px 0;
}
.page__footer-copyright,
.page__footer .powered-by,
.page__footer-follow { display: none !important; }

/* ==========================================
   Research & Publications Wrapper + Typo
   ========================================== */
.research-wrapper,
.pubs-wrapper {
  max-width: var(--site-max);
  margin: 2rem auto;
  padding: 0 1.25rem 2rem;
  font-size: 16px;
  line-height: 1.6;
}
.research-intro,
.pubs-intro {
  max-width: var(--text-max);
  color: var(--ink-2);
  margin-bottom: 1.5rem;
}
.research-section { max-width: var(--text-max); margin: 2rem 0 2.5rem; }

/* Karten-Layout */
.research-grid,
.pubs-wrapper .research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem auto;
  max-width: var(--site-max);
}
.research-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.research-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.research-card h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.research-card p { font-size: 0.95rem; color: var(--ink-3); margin: 0.25rem 0 0; }

/* ==========================================
   Publications Listenformat
   ========================================== */
.pubs-list { list-style: none; padding-left: 0; margin: 0 0 1.2rem 0; }
.pub { margin: 0.4rem 0; }

/* hängender Einzug für Zitate */
.page--pubs .cite {
  display: block;
  padding-left: 1.3rem;
  text-indent: -1.3rem;
  line-height: 1.6;
}

/* Talks & Posters */
.page--pubs .pubs-list--tight { list-style: none; margin-left: 0; padding-left: 0; }
.page--pubs .pubs-list--tight li {
  display: block;
  padding-left: 1.3rem;
  text-indent: -1.3rem;
  line-height: 1.55;
  margin: 0.35rem 0;
}
.page--pubs .pub-year {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.1rem 0 0.4rem;
}

/* ==========================================
   CV
   ========================================== */
.cv-section {
  max-width: var(--site-max);
  margin: 2rem auto;
  padding: 0 1.25rem;
}
.cv-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
}
.cv-entry { display: flex; gap: 1rem; margin-bottom: 1rem; }
.cv-years { flex: 0 0 130px; font-weight: 600; color: var(--muted); }
.cv-details { flex: 1; }
.cv-details a { color: var(--brand); }
.cv-details a:hover { text-decoration: underline; }
.cv-section ul { margin: 0 0 1rem 1rem; padding: 0; }
.cv-section li { margin-bottom: 0.4rem; }
.cv-section .dl-btn {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.18rem 0.4rem;
  border-radius: 4px;
  background: #d9e9f7;
  border: 1px solid #b9d7ef;
  color: #064d77;
  text-decoration: none;
  font-weight: 500;
  margin-top: 1rem;
}
.cv-section .dl-btn:hover { background: #b9d7ef; }

/* ==========================================
   Teaching
   ========================================== */
.teaching-section {
  max-width: var(--site-max);
  margin: 2rem auto;
  padding: 0 1.25rem;
  line-height: 1.6;
}
.teaching-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
}
.teaching-entry { margin-bottom: 1.5rem; }
.teaching-years { font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; }
.teaching-section a { color: var(--brand); }
.teaching-section a:hover { text-decoration: underline; }
.teaching-section ul { margin: 0 0 1rem 1rem; padding: 0; }
.teaching-section li { margin-bottom: 0.4rem; }

/* ==========================================
   Contact – exakt wie Startseite (Foto links)
   ========================================== */

/* Splash-/Theme-Zentrierung sicher deaktivieren */
.page--contact .splash .page__content,
.page--contact .page__content,
.page--contact .initial-content { text-align: left !important; }

.page--contact .splash .page__inner-wrap { padding: 0 !important; }

.page--contact .contact-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
  max-width: var(--site-max);   /* wie Startseite */
  margin-left: auto;            /* zentriert – wie Home */
  margin-right: auto;           /* zentriert – wie Home */
  padding: 1rem;                /* wie Home */
}


/* Bildspalte IDENTISCH zu .homepage-photo */
.page--contact .contact-photo { flex: 0 0 var(--photo-col); }
.page--contact .contact-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Textspalte IDENTISCH zu .homepage-text */
.page--contact .contact-panel {
  flex: 1;
  max-width: var(--text-max);
}
.page--contact .contact-panel h2 {
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 0 0 .6rem;
  font-weight: 700;
}

/* Links/Chips (unverändert) */
.page--contact .email-link { font-weight: 600; color: var(--brand); text-decoration: none; }
.page--contact .email-link:hover { text-decoration: underline; }
.page--contact .contact-list { margin: .6rem 0 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.page--contact .contact-list li { list-style: none; }
.page--contact .contact-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .65rem .45rem .75rem;
  border-radius: 8px; text-decoration: none; background: #fff;
  border: 1px solid var(--line); color: var(--ink-2); font-weight: 500;
  position: relative; white-space: nowrap;
}
.page--contact .contact-chip::before {
  content: ""; width: 3px; height: 100%; border-radius: 8px 0 0 8px;
  position: absolute; left: 0; top: 0; background: var(--brand);
}
.page--contact .contact-chip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); transform: translateY(-1px); }

/* Breakpoints 1:1 wie Startseite -> gleiche Bildgröße auf Phone */
@media (max-width: 900px) {
  .page--contact .contact-photo { flex: 0 0 280px; }
}
@media (max-width: 600px) {
  .page--contact .contact-wrapper {
    flex-direction: column; align-items: center; gap: 1rem;
  }
  .page--contact .contact-photo {
    flex: none; max-width: 90vw; margin-bottom: 1rem;
  }
  .page--contact .contact-photo img {
    max-width: 320px; /* exakt wie .homepage-photo img */
    aspect-ratio: auto;
  }
  .page--contact .contact-panel { max-width: 95vw; }
}

/* ==========================================
   Responsive (Tablet & Mobile)
   ========================================== */

/* Tablet */
@media (max-width: 900px) {
  .homepage-photo,
  .page--contact .contact-photo {
    flex-basis: var(--photo-col-sm);
  }
}

/* Mobile – bis 700px */
@media (max-width: 700px) {
  /* Wrapper für Research & Publications angleichen */
  .research-wrapper,
  .pubs-wrapper {
    padding: 0 1rem 2rem;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Einspaltige Grids */
  .research-grid,
  .pubs-wrapper .research-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
  }

  /* Karten in Research & Publications */
  .research-card,
  .pubs-wrapper .research-grid > *,
  .pubs-wrapper .pub-card {
    box-sizing: border-box;
    max-width: 100%;
    padding: .9rem 1rem;
    overflow-wrap: anywhere;   /* lange Worte umbrechen */
    word-break: break-word;
  }

  /* Lange Listen / Texte in Publications */
  .pubs-wrapper .page__content {
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Tabellen oder Listen innerhalb halten */
  .pubs-wrapper table,
  .pubs-wrapper ul,
  .pubs-wrapper ol {
    max-width: 100%;
  }

  /* Sicherheit: kein horizontales Scrollen */
  body { overflow-x: hidden; }
}

/* Mobile Portrait & sehr kleine Geräte – bis 600px */
@media (max-width: 600px) {
  /* Home & Contact: gleicher Stack + Bildgröße */
  .homepage-wrapper,
  .page--contact .contact-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .homepage-photo,
  .page--contact .contact-photo {
    flex: none;
    max-width: 90vw;
    margin-bottom: 1rem;
  }

  .homepage-photo img,
  .page--contact .contact-photo img {
    width: min(var(--photo-mobile), 90vw);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 100%;
  }

  .homepage-text,
  .page--contact .contact-panel {
    max-width: 95vw;
    text-align: left;
  }

  /* CV: Years über Text */
  .cv-entry { flex-direction: column; gap: .2rem; }
  .cv-years { flex: none; }
  .cv-details { overflow-wrap: anywhere; }

  /* Lesbarkeit & Touch-Flächen */
  body { font-size: 17px; line-height: 1.7; }
  .page__content h2 { margin-bottom: .5rem; }
  .contact-chip { padding: .5rem .7rem; }
}

/* Tastaturfokus sichtbar (A11y) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* DOIs und lange Links umbrechen, damit kein Horizontal-Scroll entsteht */
.pubs-wrapper a {
  overflow-wrap: anywhere;  /* bricht den Link an jeder Stelle */
  word-break: break-word;   /* bricht notfalls mitten im Wort */
}




/* --- LANDSCAPE: Bild floaten, Text fließt daneben und danach darunter --- */
@media (orientation: landscape) and (max-width: 1100px) {
  /* Grid/Flex für diesen Breakpoint ausschalten und Float sauber „einfassen“ */
  .homepage-wrapper {
    display: flow-root;     /* eigener Blockformatierungskontext -> enthält Float */
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 1rem;
    gap: 0;                 /* sicherstellen, dass altes gap hier nicht stört */
  }

  /* Bild links als Float */
  .homepage-photo {
    float: left;
    width: var(--photo-col-sm);   /* z.B. 280px */
    margin: 0 1rem 1rem 0;        /* Abstand zum Text rechts + unten */
  }

  .homepage-photo img {
    width: 100%;
    height: auto;                 /* lässt die Bildhöhe natürlich laufen */
    aspect-ratio: auto;           /* nicht auf 1/1 fixieren im Float-Layout */
    object-fit: cover;
    border-radius: 8px;
  }

  /* Text als normaler Block: fließt neben dem Float, danach automatisch darunter */
  .homepage-text {
    display: block;               /* überschreibt display:flex aus oben */
    max-width: none;              /* keine zusätzliche Begrenzung */
  }
}

/* OPTIONAL: Landscape über 1100px – breitere Bildspalte */
@media (orientation: landscape) and (min-width: 1101px) {
  .homepage-wrapper {
    display: flow-root;           /* behält Float-Containment bei */
  }
  .homepage-photo {
    float: left;
    width: var(--photo-col);      /* z.B. 445px */
    margin: 0 1.25rem 1rem 0;
  }
  .homepage-photo img {
    aspect-ratio: auto;
  }
  .homepage-text {
    display: block;
    max-width: none;
  }
}

/* --- CONTACT: Landscape mit Float (Text fließt rechts & darunter) --- */
@media (orientation: landscape) and (max-width: 1100px) {
  .page--contact .contact-wrapper {
    display: flow-root;             /* Float sauber „einfassen“ */
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 1rem;
    gap: 0;
  }

  .page--contact .contact-photo {
    float: left;
    width: var(--photo-col-sm);     /* 280px – wie Home im Tablet/Landscape */
    margin: 0 1rem 1rem 0;          /* Abstand zum Text */
  }

  .page--contact .contact-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 8px;
  }

  .page--contact .contact-panel {
    display: block;                 /* kein Flex, damit Text normal fließt */
    max-width: none;
  }
}

/* --- CONTACT: Landscape >1100px (breitere Bildspalte) --- */
@media (orientation: landscape) and (min-width: 1101px) {
  .page--contact .contact-wrapper { display: flow-root; }
  .page--contact .contact-photo {
    float: left;
    width: var(--photo-col);        /* 445px – wie Home Desktop */
    margin: 0 1.25rem 1rem 0;
  }
  .page--contact .contact-photo img { aspect-ratio: auto; }
  .page--contact .contact-panel { display: block; max-width: none; }
}

.page--contact .contact-panel {

   
  max-width: none;   /* volle Breite nutzen */
}

/* iPad PORTRAIT: Bild links floaten, Text fließt rechts & danach darunter */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 1024px) {
  .homepage-wrapper {
    display: flow-root;      /* eigener BFC: enthält den Float */
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 1rem;
    gap: 0;                  /* evtl. altes gap neutralisieren */
  }

  .homepage-photo {
    float: left;
    width: 320px;            /* angenehme Breite für iPad Portrait */
    margin: 0 1rem 1rem 0;   /* Abstand zum Text */
  }

  .homepage-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;      /* kein starres 1:1 im Float-Layout */
    object-fit: cover;
    border-radius: 8px;
  }

  .homepage-text {
    display: block;          /* Flex von oben überschreiben */
    max-width: none;         /* Text darf rechts & darunter laufen */
  }
}


/* ===== HERO-BAND (links, grau, mit innerem Schatten) ===== */
:root {
  --hero-bg: #f7f7f7; /* Hintergrund der Hero-Box */
}

.hero-band {
  background: var(--hero-bg);
  border-radius: 12px;
  margin: 1.25rem auto 0;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06); /* dezente innere Linie unten */
}

.hero-band__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: clamp(20px, 5vw, 48px) clamp(16px, 3vw, 24px);
  text-align: left; /* immer linksbündig */
}

/* ===== Typografie ===== */
.hero-title {
  /* kleiner als vorher + darf umbrechen (läuft nicht mehr über) */
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--ink-1);
  white-space: normal;  /* niemals nowrap erzwingen */
}

.hero-sub {
  margin: 0 0 .6rem;
  font-weight: 700;
  color: var(--ink-2);
  font-size: clamp(1.12rem, 1.7vw, 1.38rem); /* etwas größer als vorher */
  line-height: 1.3;
}

/* Tags: nur farbige Schrift, kein Button-Look */
.hero-tags {
  list-style: none;
  margin: .3rem 0 .9rem;
  padding: 0;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: clamp(0.75rem, 1vw, 0.85rem);
}
.hero-tags.plain li { color: var(--brand); font-weight: 600; }
.hero-tags.plain li:not(:last-child)::after { content: "·"; margin-left: .75rem; color: var(--muted); }

/* CTA kompakter */
.cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .75rem;
  border-radius: 8px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  font-size: 0.85rem; /* smaller text */
}

/* Add the colored bar on the left */
.cta::before {
  content: "";
  width: 3px;
  height: 100%;
  border-radius: 8px 0 0 8px;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--brand);
}

.cta:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* ===== Responsive Tweaks ===== */
/* Tablet (701–1099px): moderat kleiner, links bleibt links */
@media (max-width: 1099px) and (min-width: 701px) {
  .hero-title { font-size: clamp(1.28rem, 2.6vw, 1.7rem); line-height: 1.22; }
  .hero-sub   { font-size: clamp(1rem, 1.7vw, 1.2rem); }
}

/* Phone (<=700px): kleiner, weiterhin linksbündig */
@media (max-width: 700px) {
  .hero-title { font-size: clamp(1.2rem, 5.2vw, 1.5rem); line-height: 1.25; }
  .hero-sub   { font-size: clamp(.98rem, 3.6vw, 1.1rem); }
  .hero-tags  { gap: .5rem; font-size: .9rem; }
  /* Falls du Phone PORTRAIT lieber zentriert willst, optional:
     .hero-band__inner { text-align: center; } */
}


/* === FEATURES (3 hex icons) — FINAL === */

/* Layout: always 3-up; only drop to 1-up on small phones (≤600px) */
.features {
  max-width: var(--site-max);
  margin: 2rem auto 3rem;
  padding: 0 clamp(16px, 3vw, 24px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns by default */
  gap: clamp(16px, 2.5vw, 32px);
}

/* Card container with NO button feel */
.feature-card {
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 18px 14px 8px;
  box-shadow: none;
  transition: none;
}

/* No hover effects at all */
.feature-card:hover { box-shadow: none; transform: none; }

/* Title + text inside each card */
.feature-card h3 {
  margin: 0.75rem 0 0.35rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink-1);
}
.feature-card p {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.95rem;
  line-height: 1.45;
}

.feature-icon.hex {
  width: 72px;
  height: 72px;
  background: var(--brand-orange); /* default; wird von Farbklassen überschrieben */
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}


/* Color variants (your palette) */
.feature-icon.orange { background: var(--brand-orange); }
.feature-icon.blue   { background: var(--brand); }        /* = --brand-blue */
.feature-icon.green  { background: var(--brand-green); }


/* Responsive: only 1 column on small phones (portrait) */
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
}

/* Make stroke-based icons white inside the hex */
.feature-icon.hex svg {
  width: 42px;
  height: 42px;
  color: #fff;               /* <-- drives stroke="currentColor" */
  fill: none;
  stroke: currentColor;
  stroke-width: 32;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* (Optional) if strokes look too thin at your size, bump slightly: */
/* .feature-icon.hex svg { stroke-width: 36; } */


/* === Sticky Header (robust für Minimal Mistakes) === */

/* 1) Für alle möglichen Header-Container sticky aktivieren */
.masthead,
.site-header,
.masthead__inner-wrap {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 2000;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(8px);
}

/* 2) Sicherheitsnetz: Verhindere, dass ein Vorfahr sticky killt */
.layout--splash,
.initial-content,
.page,
.page-wrap,
.wrapper {
  overflow: visible !important;   /* falls Theme irgendwo overflow versteckt */
  transform: none !important;     /* transform auf Eltern killt sticky in einigen Browsern */
}


/* === Hero auf der Publications-Seite: ohne grauen Hintergrund === */
.page--pubs .hero-band {
  background: transparent;   /* kein Grau */
  box-shadow: none;          /* keine innere Linie */
  border-radius: 0;
  margin-top: 0;
}

/* Dezenter, seriöser Akzent links – kannst du weglassen, wenn du’s ultra-clean willst */
.page--pubs .hero-band__inner {
  padding: clamp(20px, 5vw, 40px) clamp(16px, 3vw, 24px);
}

/* Optional: minimal enger als Startseite */
@media (min-width: 701px) {
  .page--pubs .hero-title { letter-spacing: 0.1px; }
  .page--pubs .hero-sub   { margin-top: .2rem; }
}


/* Publications: oben 3/2/1 Spalten */
.page--pubs .pubs-wrapper > .research-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; /* etwas enger, damit 3 gut passen */
}

/* Tablet: 2 Spalten */
@media (max-width: 1000px) {
  .page--pubs .pubs-wrapper > .research-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone: 1 Spalte */
@media (max-width: 700px) {
  .page--pubs .pubs-wrapper > .research-grid {
    grid-template-columns: 1fr;
  }
}

/* Karten oben etwas kompakter, damit 3 Spalten sauber wirken */
.page--pubs .pubs-wrapper > .research-grid .research-card {
  padding: .9rem 1rem;
}
.page--pubs .pubs-wrapper > .research-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* === Hero auf der Research-Seite: ohne grauen Hintergrund === */
.hero--research {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: 0;
}
.hero--research .hero-band__inner {
  padding: clamp(20px, 5vw, 40px) clamp(16px, 3vw, 24px);
}
@media (min-width: 701px) {
  .page--research .hero-title { letter-spacing: 0.1px; }
  .page--research .hero-sub   { margin-top: .2rem; }
}


/* === Research: 3/2/1 Grid wie Publications === */
.page--research .research-wrapper > .research-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1000px) {
  .page--research .research-wrapper > .research-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .page--research .research-wrapper > .research-grid {
    grid-template-columns: 1fr;
  }
}

/* Karten optisch wie bei Publications */
.page--research .research-wrapper > .research-grid .research-card {
  padding: .9rem 1rem;
}
.page--research .research-wrapper > .research-grid .research-card h3 {
  margin: 0 0 .25rem;
}
.page--research .research-wrapper > .research-grid .research-card p {
  font-size: 0.92rem;
  line-height: 1.45;
  margin: .15rem 0 0;
}

/* Hero-Sub in Blau nur auf Publications & Research */
.hero--pubs .hero-sub,
.hero--research .hero-sub {
  color: var(--brand); /* = dein #0a4c86 */
}

/* Teaching: Hero wie Publications/Research (ohne grauen BG) */
.hero--teaching { background: transparent; box-shadow: none; border-radius: 0; margin-top: 0; }
.hero--teaching .hero-band__inner { padding: clamp(20px, 5vw, 40px) clamp(16px, 3vw, 24px); }
/* Subline in Brand-Blau */
.hero--teaching .hero-sub { color: var(--brand); }

/* Teaching: Intro links bündig, nicht zentriert */
.page--teaching .teaching-intro {
  max-width: var(--text-max);
  margin: .6rem 0 1.25rem;   /* statt auto -> links bündig */
  text-align: left;
}
/* kleine, neutrale Caption direkt unter der Sub-Zeile */
.hero-caption {
  margin: .25rem 0 0;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.98rem;
}

/* 1) Subpage-Heros unten kompakter */
.hero--pubs .hero-band__inner,
.hero--research .hero-band__inner,
.hero--teaching .hero-band__inner {
  padding-block: clamp(14px, 3vw, 28px); /* top & bottom statt bis 48px */
}

/* 2) Doppelte Abstände vermeiden: nächster Block nach Hero enger */
.hero-band + .pubs-wrapper,
.hero-band + .research-wrapper,
.hero-band + .teaching-intro,
.hero-band + .teaching-section {
  margin-top: .75rem; /* statt 2rem */
}

/* Teaching: auch den Intro-Absatz etwas enger & begrenzen */
.teaching-intro {
  max-width: var(--text-max);
  margin: .75rem auto 1.25rem;
}

/* Optional: auf Phone etwas mehr Luft, damit es nicht gequetscht wirkt */
@media (max-width: 700px) {
  .hero-band + .pubs-wrapper,
  .hero-band + .research-wrapper,
  .hero-band + .teaching-intro,
  .hero-band + .teaching-section {
    margin-top: 1rem;
  }
}

/* CV- & Contact-Hero: clean wie andere Unterseiten */
.hero--cv,
.hero--contact {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: 0;
}

/* Sub in Blau (wie bei den anderen Unterseiten) */
.page--cv .hero-sub,
.page--contact .hero-sub {
  color: var(--brand);
}

/* Kompaktes Hero-Padding für ALLE Unterseiten vereinheitlichen */
.hero--pubs .hero-band__inner,
.hero--research .hero-band__inner,
.hero--teaching .hero-band__inner,
.hero--cv .hero-band__inner,
.hero--contact .hero-band__inner {
  /* inline lassen wir wie global, block machen wir kompakter */
  padding-inline: clamp(16px, 3vw, 24px);
  padding-block: clamp(14px, 3vw, 28px);
}

/* Abstand nach dem Hero – CV wie die anderen Seiten */
.hero-band + .cv-section { margin-top: .75rem; }
@media (max-width: 700px) {
  .hero-band + .cv-section { margin-top: 1rem; }
}

/* Contact: enger an den Inhalt anschließen */
.page--contact .hero-band { margin-bottom: .5rem; }
.page--contact .contact-wrapper { margin-top: .5rem; }

/* Publications: kompakte CTA-Style Download-Buttons */
.page--pubs .pubs-list .actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}

.page--pubs .pubs-list .actions .dl-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  position: relative;
  white-space: nowrap;
  text-decoration: none;

  /* compact wie gewünscht */
  font-size: .75rem;
  line-height: 1.2;
  padding: .22rem .55rem .22rem .7rem;
  border-radius: 6px;

  /* wie .cta */
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 500;
}

/* farbiger Balken links – wie .cta */
.page--pubs .pubs-list .actions .dl-btn::before {
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0; top: 0;
  border-radius: 6px 0 0 6px;
  background: var(--brand);
}

/* Hover wie .cta, aber dezent */
.page--pubs .pubs-list .actions .dl-btn:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Fokus sichtbar (falls globaler Fokus mal überschrieben wird) */
.page--pubs .pubs-list .actions .dl-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* === Publications – Clean typographic rail layout (works for Talks/Posters) === */

/* Einheitlicher vertikaler Rhythmus */
.page--pubs .pubs-list,
.page--pubs .pubs-list--tight {
  display: grid;
  gap: .9rem;
  margin: .6rem 0 1.4rem;
}

/* Eintrag: linke Brand-Leiste + Grid für Text (links) & Actions (rechts) */
.page--pubs .pub,
.page--pubs .pubs-list--tight li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;   /* Text links, Download rechts */
  align-items: start;
  gap: .5rem .8rem;
  padding: .35rem 0 .45rem 1rem;      /* Platz für die Leiste links */
  border-top: 1px solid var(--line);
}

/* Linke Brand-Leiste je Eintrag */
.page--pubs .pub::before,
.page--pubs .pubs-list--tight li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .45rem;
  width: 3px;
  border-radius: 2px;
  background: var(--brand);
  opacity: .6;
}

/* Ersten Eintrag in jeder Gruppe ohne obere Linie */
.page--pubs .pubs-list > .pub:first-child,
.page--pubs .pubs-list--tight > li:first-child {
  border-top: 0;
}
.page--pubs .pubs-list > .pub:first-child::before,
.page--pubs .pubs-list--tight > li:first-child::before {
  top: 0;
}

/* Zitat-Block */
.page--pubs .pub .cite {
  grid-column: 1;
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Download-/Action-Spalte rechts (falls vorhanden) */
.page--pubs .pub .actions {
  grid-column: 2;
  align-self: start;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* Mini-CTA wie deine Chips, nur klein */
.page--pubs .pub .actions .dl-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; position: relative;
  font-size: .75rem; line-height: 1.1; font-weight: 500;
  padding: .22rem .55rem .22rem .72rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.page--pubs .pub .actions .dl-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 8px 0 0 8px;
  background: var(--brand);
}
.page--pubs .pub .actions .dl-btn:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Mobile: Actions unter den Text stapeln */
@media (max-width: 700px) {
  .page--pubs .pub,
  .page--pubs .pubs-list--tight li {
    grid-template-columns: 1fr;   /* eine Spalte */
  }
  .page--pubs .pub .actions {
    grid-column: 1;
    margin-top: .3rem;
  }
}

/* === Publications – Clean typographic rail layout (works for Talks/Posters) === */

/* Einheitlicher vertikaler Rhythmus */
.page--pubs .pubs-list,
.page--pubs .pubs-list--tight {
  display: grid;
  gap: .9rem;
  margin: .6rem 0 1.4rem;
}

/* Eintrag: linke Brand-Leiste + Grid für Text (links) & Actions (rechts) */
.page--pubs .pub,
.page--pubs .pubs-list--tight li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;   /* Text links, Download rechts */
  align-items: start;
  gap: .5rem .8rem;
  padding: .35rem 0 .45rem 1rem;      /* Platz für die Leiste links */
  border-top: 1px solid var(--line);
}

/* Linke Brand-Leiste je Eintrag */
.page--pubs .pub::before,
.page--pubs .pubs-list--tight li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .45rem;
  width: 3px;
  border-radius: 2px;
  background: var(--brand);
  opacity: .6;
}

/* Ersten Eintrag in jeder Gruppe ohne obere Linie */
.page--pubs .pubs-list > .pub:first-child,
.page--pubs .pubs-list--tight > li:first-child {
  border-top: 0;
}
.page--pubs .pubs-list > .pub:first-child::before,
.page--pubs .pubs-list--tight > li:first-child::before {
  top: 0;
}

/* Zitat-Block */
.page--pubs .pub .cite {
  grid-column: 1;
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Download-/Action-Spalte rechts (falls vorhanden) */
.page--pubs .pub .actions {
  grid-column: 2;
  align-self: start;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* Mini-CTA wie deine Chips, nur klein */
.page--pubs .pub .actions .dl-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; position: relative;
  font-size: .75rem; line-height: 1.1; font-weight: 500;
  padding: .22rem .55rem .22rem .72rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.page--pubs .pub .actions .dl-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 8px 0 0 8px;
  background: var(--brand);
}
.page--pubs .pub .actions .dl-btn:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Mobile: Actions unter den Text stapeln */
@media (max-width: 700px) {
  .page--pubs .pub,
  .page--pubs .pubs-list--tight li {
    grid-template-columns: 1fr;   /* eine Spalte */
  }
  .page--pubs .pub .actions {
    grid-column: 1;
    margin-top: .3rem;
  }
}

/* === Publications – Clean typographic rail layout (works for Talks/Posters) === */

/* Einheitlicher vertikaler Rhythmus */
.page--pubs .pubs-list,
.page--pubs .pubs-list--tight {
  display: grid;
  gap: .9rem;
  margin: .6rem 0 1.4rem;
}

/* Eintrag: linke Brand-Leiste + Grid für Text (links) & Actions (rechts) */
.page--pubs .pub,
.page--pubs .pubs-list--tight li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;   /* Text links, Download rechts */
  align-items: start;
  gap: .5rem .8rem;
  padding: .35rem 0 .45rem 1rem;      /* Platz für die Leiste links */
  border-top: 1px solid var(--line);
}

/* Linke Brand-Leiste je Eintrag */
.page--pubs .pub::before,
.page--pubs .pubs-list--tight li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .45rem;
  width: 3px;
  border-radius: 2px;
  background: var(--brand);
  opacity: .6;
}

/* Ersten Eintrag in jeder Gruppe ohne obere Linie */
.page--pubs .pubs-list > .pub:first-child,
.page--pubs .pubs-list--tight > li:first-child {
  border-top: 0;
}
.page--pubs .pubs-list > .pub:first-child::before,
.page--pubs .pubs-list--tight > li:first-child::before {
  top: 0;
}

/* Zitat-Block */
.page--pubs .pub .cite {
  grid-column: 1;
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Download-/Action-Spalte rechts (falls vorhanden) */
.page--pubs .pub .actions {
  grid-column: 2;
  align-self: start;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* Mini-CTA wie deine Chips, nur klein */
.page--pubs .pub .actions .dl-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; position: relative;
  font-size: .75rem; line-height: 1.1; font-weight: 500;
  padding: .22rem .55rem .22rem .72rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.page--pubs .pub .actions .dl-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 8px 0 0 8px;
  background: var(--brand);
}
.page--pubs .pub .actions .dl-btn:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Mobile: Actions unter den Text stapeln */
@media (max-width: 700px) {
  .page--pubs .pub,
  .page--pubs .pubs-list--tight li {
    grid-template-columns: 1fr;   /* eine Spalte */
  }
  .page--pubs .pub .actions {
    grid-column: 1;
    margin-top: .3rem;
  }
}

/* Sektionstitel mit dezenter Trennung oben – macht Blöcke klarer lesbar */
.page--pubs h2 {
  margin: 1.4rem 0 .4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
}

/* === FIX: Talks & Posters im gleichen Rail-Layout wie die restlichen Pubs === */
.page--pubs .pubs-list--tight {
  list-style: none;
  padding-left: 0;
  margin: .6rem 0 1.4rem;
  display: grid;
  gap: .9rem;
}

.page--pubs .pubs-list--tight li {
  /* altes Hanging-Indent neutralisieren */
  text-indent: 0 !important;
  margin: 0 !important;

  /* gleiche Optik wie .pub */
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .5rem .8rem;
  padding: .35rem 0 .45rem 1rem !important; /* Platz für linke Leiste */
  border-top: 1px solid var(--line);
}

.page--pubs .pubs-list--tight li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .45rem;
  width: 3px;
  border-radius: 2px;
  background: var(--brand);
  opacity: .6;
}

.page--pubs .pubs-list--tight > li:first-child { border-top: 0; }
.page--pubs .pubs-list--tight > li:first-child::before { top: 0; }

/* Falls es Actions/Buttons gäbe, rechts ausrichten – sonst egal */
.page--pubs .pubs-list--tight li .actions { 
  grid-column: 2; 
  align-self: start; 
  display: flex; 
  gap: .4rem; 
  flex-wrap: wrap; 
}

@media (max-width: 700px) {
  .page--pubs .pubs-list--tight li { grid-template-columns: 1fr; }
  .page--pubs .pubs-list--tight li .actions { grid-column: 1; margin-top: .3rem; }
}

/* Talks & Posters: eine Spalte erzwingen, damit <b>/<em>-Inline-Elemente nicht zerrissen werden */
.page--pubs .pubs-list--tight li {
  grid-template-columns: 1fr !important;
}

/* Actions rechts: Buttons untereinander (Download oben, Read darunter) */
.page--pubs .pub .actions {
  grid-column: 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}

/* Read-Button nutzt exakt den gleichen Stil wie Download */
.page--pubs .pub .actions .dl-btn--read { /* keine Abweichung nötig */ }

/* Optional: kleine Unterscheidung (anders brauchst du nix) */
/* .page--pubs .pub .actions .dl-btn--read::before { background: #6f777d; } */

/* Einheitliche Breite für die rechte Button-Spalte */
.page--pubs { --pub-actions-w: 112px; }

/* Listen: durchgängiger vertikaler Rhythmus */
.page--pubs .pubs-list,
.page--pubs .pubs-list--tight {
  display: grid;
  gap: .9rem;
  margin: .6rem 0 1.4rem;
}

/* Grundstil je Eintrag – erstmal KEIN Grid (volle Breite für den Text) */
.page--pubs .pub,
.page--pubs .pubs-list--tight li {
  position: relative;
  padding: .35rem 0 .45rem 1rem;  /* Platz für linke Brand-Leiste */
  border-top: 1px solid var(--line);
}

/* Linke Brand-Leiste */
.page--pubs .pub::before,
.page--pubs .pubs-list--tight li::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem; bottom: .45rem;
  width: 3px; border-radius: 2px;
  background: var(--brand);
  opacity: .6;
}
.page--pubs .pubs-list > .pub:first-child,
.page--pubs .pubs-list--tight > li:first-child { border-top: 0; }
.page--pubs .pubs-list > .pub:first-child::before,
.page--pubs .pubs-list--tight > li:first-child::before { top: 0; }

/* Nur WENN Actions existieren → zweispaltiges Layout mit fester Aktionsbreite */
.page--pubs .pub:has(.actions),
.page--pubs .pubs-list--tight li:has(.actions) {
  display: grid;
  grid-template-columns: 1fr var(--pub-actions-w);
  align-items: start;
  gap: .5rem .8rem;
}

/* Zitat-/Textblock */
.page--pubs .pub .cite { margin: 0; color: var(--ink-2); line-height: 1.55; }

/* Rechte Aktionsspalte (gleich breit überall) */
.page--pubs .pub .actions,
.page--pubs .pubs-list--tight li .actions {
  grid-column: 2;
  width: var(--pub-actions-w);
  justify-self: end;             /* klebt rechts */
  display: flex;
  flex-direction: column;        /* Download über Read */
  gap: .35rem;
}

/* Mini-CTA-Buttons (Download & Read teilen sich die Klasse) */
.page--pubs .pub .actions .dl-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; position: relative;
  font-size: .75rem; line-height: 1.1; font-weight: 500;
  padding: .22rem .55rem .22rem .72rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
}
.page--pubs .pub .actions .dl-btn::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 8px 0 0 8px; background: var(--brand);
}
.page--pubs .pub .actions .dl-btn:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Mobile: auf eine Spalte; Buttons neben­einander */
@media (max-width: 700px) {
  .page--pubs .pub:has(.actions),
  .page--pubs .pubs-list--tight li:has(.actions) {
    grid-template-columns: 1fr;
  }
  .page--pubs .pub .actions,
  .page--pubs .pubs-list--tight li .actions {
    width: auto;
    justify-self: start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .3rem;
  }
}


/* Phone PORTRAIT: Buttons unter dem Zitat, nebeneinander */
@media (max-width: 700px) and (orientation: portrait) {
  .page--pubs .pub,
  .page--pubs .pubs-list--tight li { 
    display: block !important;
  }
  .page--pubs .pub .actions,
  .page--pubs .pubs-list--tight li .actions {
    width: auto !important;
    justify-self: start !important;
    margin-top: .35rem !important;
    display: flex !important;
    flex-direction: row;              /* nebeneinander */
    flex-wrap: wrap;
    gap: .4rem;
  }
}


/* TEACHING – Polishes */

/* Kursliste klarer trennen + angenehme Vertikalabstände */
.page--teaching .teaching-entry ul { 
  list-style: disc;
  padding-left: 1.1rem;
  margin: .4rem 0 0;
}
.page--teaching .teaching-entry li {
  padding: .35rem 0 .6rem;
  border-bottom: 1px solid var(--line);
}
.page--teaching .teaching-entry li:last-child { border-bottom: 0; }

/* Institutionszeile etwas typografischer */
.page--teaching .teaching-years {
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .2px;
  margin: 1.2rem 0 .35rem;
}

/* Course language in Brand-Blau */
.teaching-section .course-lang {
  display: block;
  color: var(--brand);    /* dein Blau */
  font-weight: 600;       /* leicht betont */
  font-style: normal;     /* nicht kursiv */
  margin-top: .15rem;
}

/* Eigener Name in den Publikationen blau einfärben */
.page--pubs .pub .cite b,
.page--pubs .pub .cite strong,
.page--pubs .pubs-list--tight b,
.page--pubs .pubs-list--tight strong {
  color: var(--brand);   /* dein Blau #0a4c86 */
  font-weight: 700;      /* bleibt fett */
}

/* === Legal Notice (Mentions légales) === */
.hero--legal { background: transparent; box-shadow: none; border-radius: 0; margin-top: 0; }
.hero--legal .hero-band__inner { padding: clamp(20px, 5vw, 40px) clamp(16px, 3vw, 24px); }
.page--legal .hero-sub { color: var(--brand); }

/* Seitenlayout & Typo */
.page--legal .splash .page__content,
.page--legal .page__content,
.page--legal .initial-content { text-align: left !important; }

.page--legal .hero-band__inner { text-align: left; }

.legal-wrapper {
  max-width: var(--text-max);
  margin: .75rem auto 2rem;
  padding: 0 clamp(16px, 3vw, 24px);
  line-height: 1.65;
}

/* Überschriften angenehm absetzen */
.page--legal h2 { margin: 1.4rem 0 .4rem; padding-top: .6rem; border-top: 1px solid var(--line); }

/* Anker-/Permalink-Icon bei Überschriften ausblenden */
.page--legal .header-link { display: none !important; }

/* Links im Text */
.page--legal a { color: var(--brand); word-break: break-word; }

/* Abstand nach dem Hero */
.hero-band + .legal-wrapper { margin-top: .75rem; }

/* Legal hero uses text column width so edges align */
.hero--legal .hero-band__inner { max-width: var(--text-max); }

/* Mentions légales: Header/ Footer wie auf allen anderen Seiten (muted grau) */
.page--legal .masthead .site-title,
.page--legal .masthead .site-title a,
.page--legal .masthead .site-nav a,
.page--legal .masthead a {
  color: var(--muted) !important;   /* = #6f777d */
}

.page--legal .masthead .site-title a:hover,
.page--legal .masthead .site-nav a:hover,
.page--legal .masthead a:hover {
  color: var(--muted) !important;   /* kein Blau auf Hover */
  text-decoration: none;
}

/* Footer-Link ebenfalls neutral und ohne Farbwechsel */
.page--legal .mein-footer-rechts a {
  color: var(--muted) !important;
  text-decoration: none;
}
.page--legal .mein-footer-rechts a:hover {
  color: var(--muted) !important;
  text-decoration: underline;       /* optional: nur Unterstreichung */
}

/* Legal so breit wie die anderen Unterseiten */
.legal-wrapper { max-width: var(--site-max); }
.hero--legal .hero-band__inner { max-width: var(--site-max); } /* oder Regel ganz löschen */



/* ===============================
   Section-Divider (einheitlich)
   =============================== */

/* Standard-Linie über jedem Abschnittstitel */
.page--cv .cv-section h2,
.page--research .research-section > h2,
.page--teaching .teaching-section h2,
.page--pubs .pubs-wrapper h2 {
  margin: 1.4rem 0 .4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
}

/* Beim ERSTEN Abschnitt keine Linie */
.page--cv .cv-section h2:first-of-type,
.page--teaching .teaching-section h2:first-of-type,
.page--pubs .pubs-wrapper h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Research: wenn oben die Card-Grid steht, dann
   NUR die erste Section danach ohne Linie */
.page--research .research-grid + .research-section > h2 {
  border-top: 0;
  padding-top: 0;
}

/* Research-Fallback: falls KEIN Grid davor steht und die
   Wrapper direkt mit einer Section beginnt */
.page--research .research-wrapper > .research-section:first-child > h2 {
  border-top: 0;
  padding-top: 0;
}

/* ===============================
   Contact: nie Trenner anzeigen
   =============================== */
.page--contact .contact-panel h2 { border-top: 0 !important; padding-top: 0 !important; }
.page--contact .contact-panel hr { display: none !important; }
.page--contact .header-link { display: none !important; }
.page--contact .contact-panel h2 + * { border-top: 0 !important; }

/* CONTACT: nie Linien unter H2 */
.page--contact h2 { 
  border-top: 0 !important; 
  padding-top: 0 !important; 
}

/* falls irgendein Element nach dem H2 die Linie trägt */
.page--contact h2 + * { 
  border-top: 0 !important; 
}

/* evtl. vorhandene <hr> verstecken */
.page--contact hr { 
  display: none !important; 
}
/* ===============================
   CONTACT: alle Divider-Linien weg
   =============================== */

/* Keine Linien an Überschriften auf Contact */
.page--contact :is(h1,h2,h3,h4,h5,h6) {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Und auch nicht am ersten Block NACH der Überschrift */
.page--contact :is(h1,h2,h3,h4,h5,h6) + * {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Falls ein Theme Pseudo-Elemente nutzt */
.page--contact :is(h1,h2,h3,h4,h5,h6)::before,
.page--contact :is(h1,h2,h3,h4,h5,h6)::after {
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Klassische <hr> auch ausblenden */
.page--contact hr { display: none !important; }


/* Research: Divider an den Abschnitt, nicht ans h2 */
.page--research .research-section {
  border-top: 1px solid var(--line);
  padding-top: .6rem;
}

/* h2 selbst bekommt KEINE Linie */
.page--research .research-section > h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Optional: falls du die allererste Section OHNE Linie willst, entkommentieren
.page--research .research-section:first-of-type {
  border-top: 0 !important;
  padding-top: 0 !important;
}
*/

/* Research: Abschnitte nicht auf 830px begrenzen */
.page--research .research-section {
  max-width: 100%;                 /* füllt die Wrapper-Breite */
  border-top: 1px solid var(--line);
  padding-top: .6rem;
}

/* h2 selbst ohne Linie (wir setzen sie am Container) */
.page--research .research-section > h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
}



/* kleine Subheads in Research-Abschnitten */
.page--research .research-section h3 {
  font-size: 1rem;
  margin: .6rem 0 .2rem;
  font-weight: 700;
}
.page--research .research-section ul { margin: .2rem 0 .6rem 1.1rem; }

/* Compact list label + bullets (Research) */
.page--research .list-label { margin: .6rem 0 0; font-weight: 700; }
.page--research .list-tight { margin: 0 0 .6rem 1.1rem; } /* top=0 -> kein Gap */


/* === Research: erster Abschnitt nach den Cards OHNE Divider === */
.page--research .research-grid + .research-section {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Fallback: falls der Wrapper direkt mit einer Section beginnt */
.page--research .research-wrapper > .research-section:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}


/* Blau für alle "Why it matters"-Absätze */
.why-it-matters {
  color: var(--brand); /* dein Blau (#0a4c86) */
}


/* Research: Why-it-matters – blau + linke Brand-Leiste */
.page--research .why-it-matters {
  position: relative;
  color: var(--brand);               /* Text in deinem Blau */
  padding-left: 1rem;                /* Platz für den Strich */
  margin-top: .6rem;
}

.page--research .why-it-matters::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;                        /* kleine Luft oben/unten */
  bottom: .15em;
  width: 3px;
  background: var(--brand);
  border-radius: 2px;
  opacity: .6;
}

@media (max-width: 700px) {
  .page--research .why-it-matters { padding-left: .8rem; }
  .page--research .why-it-matters::before { width: 2px; }
}



/* Research: H2-Unterstrich erzwingen in --line */
.page--research .research-section > h2 {
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;         /* Theme-Schatten neutralisieren */
  padding-bottom: .35rem;
  margin-bottom: .5rem;
}

/* Sicherstellen, dass NICHT zusätzlich das Folge-Element eine Linie bekommt */
.page--research .research-section > h2 + * {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* === Einheitliche H2-Unterlinie auf CV / Pubs / Teaching / Legal === */
.page--cv .cv-section h2,
.page--pubs .pubs-wrapper h2,
.page--teaching .teaching-section h2,
.page--legal h2 {
  border-bottom: 1px solid var(--line) !important; /* gleiche Stärke/Farbe wie oben */
  box-shadow: none !important;                      /* Theme-Schatten aus */
  background: none !important;
  padding-bottom: .35rem;
  margin-bottom: .5rem;
}

/* Falls das Theme die Linie am Folge-Element setzt → neutralisieren */
.page--cv .cv-section h2 + *,
.page--pubs .pubs-wrapper h2 + *,
.page--teaching .teaching-section h2 + *,
.page--legal h2 + * {
  border-top: 0 !important;
  box-shadow: none !important;
}


/* Header: nur eine durchgehende Linie, keine Doppel-Linie in der Mitte */
.site-header,
.masthead__inner-wrap { border-bottom: 0 !important; }

.masthead { border-bottom: 1px solid var(--line) !important; }

/* ===== Research: Text+Bild Layout in jeder Section ===== */
.page--research .section-body {
  display: grid;
  grid-template-columns: 1fr min(38%, 360px);     /* Text links, Bild rechts */
  grid-template-areas: "text media";
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
  margin-top: .25rem;                              /* etwas Luft unter dem H2 */
}

.page--research .section-text  { grid-area: text; }
.page--research .section-media { grid-area: media; }

.page--research .section-media img {
  width: 100%;
  height: auto;               /* kein Zwangs-Aspect-Ratio -> kein Zuschnitt */
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;           /* falls SVG mit transparentem Rand */
}

/* Mobile/Tablet: Bild oben, Text darunter, volle Breite */
@media (max-width: 900px) {
  .page--research .section-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "text";
  }
}

/* Optional: minimales Caption-Styling, falls du später <figcaption> nutzt */
.page--research .section-media figcaption {
  margin-top: .35rem;
  color: var(--muted);
  font-size: .9rem;
}

/* Why it matters – linke Brand-Leiste beibehalten (deine Regeln existieren schon) */
/* nichts weiter nötig */




/* RESEARCH: zurück ohne Karten-Rahmen, aber mit H2-Unterlinie */
.page--research .research-section {
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  max-width: 100%;              /* wieder volle Wrapper-Breite */
  padding: 0 !important;        /* Karten-Innenabstand zurücknehmen */
  border-top: 0 !important;     /* kein Container-Divider oben */
}

/* angenehmer Abstand zwischen Abschnitten */
.page--research .research-section + .research-section { margin-top: 1.75rem; }

/* H2: nur Unterlinie lassen */
.page--research .research-section > h2 {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: .35rem;
  margin: 0 0 .6rem !important;
  border-top: 0 !important;
}

/* Text + Bild: Float-Layout (Bild rechts, Text fließt unten weiter) */
.page--research .section-body { display: flow-root; }  /* enthält den Float */
.page--research .section-media {
  float: right;
  width: min(38%, 360px);
  margin: .2rem 0 .6rem 1rem;
}
.page--research .section-media img {
  width: 100%; height: auto; display: block;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
.page--research .section-media figcaption {
  margin-top: .35rem; color: var(--muted);
  font-size: .9rem; line-height: 1.4;
}
@media (max-width: 900px) {
  .page--research .section-media { float: none; width: 100%; margin: 0 0 .6rem 0; }
}

/* Why it matters: hellblauer Callout mit linker Brand-Leiste */
.page--research .why-it-matters {
  position: relative;
  color: var(--ink-2) !important;    /* dunkler Text */
  background: #eaf2fb;               /* hellblau */
  border: 1px solid #cfe0f3;
  border-radius: 10px;
  padding: .6rem .75rem .6rem 1rem;
  margin-top: .65rem;
}
.page--research .why-it-matters::before {
  content: "";
  position: absolute;
  left: .5rem; top: .5rem; bottom: .5rem;
  width: 3px; background: var(--brand); border-radius: 2px; opacity: .8;
}
.page--research .why-it-matters strong { color: inherit; } /* fett bleibt, aber nicht blau */



/* === RESEARCH: H2 mit Top-Divider (außer beim ersten Abschnitt) === */
.page--research .research-section > h2 {
  /* unten keine Linie */
  border-bottom: 0 !important;
  padding-bottom: 0;

  /* oben Linie wie früher */
  border-top: 1px solid var(--line);
  padding-top: .6rem;
  margin: 0 0 .5rem !important;
}

/* Sonderfälle: erster Abschnitt bekommt KEINE obere Linie */
.page--research .research-grid + .research-section > h2,
.page--research .research-wrapper > .research-section:first-child > h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* === RESEARCH: Bildunterschrift kleiner & dezenter === */
.page--research .section-media figcaption {
  font-size: .82rem;      /* vorher ~0.9rem */
  line-height: 1.4;
  color: var(--muted);



   /* === FINAL OVERRIDE: Research-H2 mit Top-Divider (außer beim ersten) === */
.page--research .research-section > h2 {
  /* nix unten */
  border-bottom: 0 !important;
  padding-bottom: 0 !important;

  /* Linie oben wieder einschalten */
  border-top: 1px solid var(--line) !important;
  padding-top: .6rem !important;
  margin: 0 0 .5rem !important;
}

/* Erster Abschnitt nach den Cards bzw. erster Abschnitt: KEINE obere Linie */
.page--research .research-grid + .research-section > h2,
.page--research .research-wrapper > .research-section:first-child > h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Bildunterschrift kleiner & dezenter */
.page--research .section-media figcaption {
  font-size: .78rem !important;   /* kleiner als vorher */
  line-height: 1.35;
  color: var(--muted);
  margin-top: .3rem;
}

  margin-top: .35rem;
}

/* === FIX: figcaption sauber schließen & kleiner setzen === */
.page--research .section-media figcaption {
  font-size: .80rem !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  margin-top: .30rem !important;
}

/* === RESEARCH: H2 mit Top-Divider (außer beim ersten Abschnitt) === */
/* Container selbst bekommt KEINEN Divider oben */
.page--research .research-section {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Alle H2: Linie OBEN, keine Linie unten */
.page--research .research-section > h2 {
  border-top: 1px solid var(--line) !important;
  padding-top: .6rem !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 0 .5rem !important;
}

/* Der ERSTE Abschnitt (direkt nach den Cards bzw. erster im Wrapper): KEINE obere Linie */
.page--research .research-grid + .research-section > h2,
.page--research .research-wrapper > .research-section:first-child > h2,
.page--research .research-wrapper > .research-section:first-of-type > h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
}


/* === RESEARCH: H2 oben + unten; erster Abschnitt nur unten === */
.page--research .research-section > h2 {
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  padding-top: .6rem !important;
  padding-bottom: .35rem !important;
  margin: 0 0 .6rem !important;
}

/* Erster Abschnitt: kein oberer Border, unterer bleibt */
.page--research .research-grid + .research-section > h2,
.page--research .research-wrapper > .research-section:first-child > h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: .35rem !important;
}


/* === Research: Phone/Tablet LANDSCAPE -> Bild links, Text rechts (nebeneinander) === */
@media (orientation: landscape) and (max-width: 900px) {
  .page--research .section-body {
    display: flow-root; /* enthält den Float, Text fließt darunter weiter */
  }
  .page--research .section-media {
    float: left;                              /* wie auf der Startseite */
    width: clamp(240px, 40vw, 360px);         /* responsive Breite */
    margin: .2rem 1rem .6rem 0;               /* Abstand zum Text rechts */
  }
  .page--research .section-text { 
    overflow: hidden;                         /* kleine Layout-Sauberkeit */
  }
}


/* === RESEARCH · PHONE PORTRAIT: Bild rechts, Text läuft daneben & darunter === */
@media (max-width: 700px) and (orientation: portrait) {
  .page--research .section-body { 
    display: flow-root;            /* enthält den Float -> Text fließt darunter weiter */
  }
  .page--research .section-media {
    float: right;                   /* Bild rechts */
    width: clamp(180px, 52vw, 360px);
    margin: .2rem 0 .6rem 1rem;     /* Abstand links zum Text */
  }
  .page--research .section-text { overflow: hidden; } /* kleine Layout-Sauberkeit */
}

/* === RESEARCH · PHONE/TABLET LANDSCAPE: ebenfalls Bild rechts === */
@media (orientation: landscape) and (max-width: 900px) {
  .page--research .section-body { display: flow-root; }
  .page--research .section-media {
    float: right;
    width: clamp(220px, 40vw, 360px);
    margin: .2rem 0 .6rem 1rem;
  }
}

/* Sicherheitsnetz für ultrakleine Breiten: wieder stapeln */
@media (max-width: 360px) {
  .page--research .section-media { 
    float: none; width: 100%; margin: 0 0 .6rem 0;
  }
}


/* === RESEARCH: Floats korrekt umfließen lassen === */
.page--research .section-body { 
  display: flow-root !important;    /* enthält den Float */
}
.page--research .section-text { 
  overflow: visible !important;     /* BFC ausschalten -> Text darf unter das Bild laufen */
}

/* Default (>=900px): Bild rechts, Text fließt daneben & darunter */
.page--research .section-media {
  float: right;
  width: min(38%, 360px);
  margin: .2rem 0 .6rem 1rem;
}

/* Phone PORTRAIT: Bild oben, volle Breite (Stack wie Home) */
@media (max-width: 700px) and (orientation: portrait) {
  .page--research .section-media {
    float: none !important;
    width: 100% !important;
    margin: 0 0 .6rem 0 !important;
  }
}

/* Phone/Tablet LANDSCAPE: Bild rechts, Text läuft neben & unter dem Bild */
@media (orientation: landscape) and (max-width: 1100px) {
  .page--research .section-body { display: flow-root !important; }
  .page--research .section-media {
    float: right !important;
    width: clamp(220px, 40vw, 360px);
    margin: .2rem 0 .6rem 1rem;
  }
}

/* Sicherheitsnetz: ultraklein -> wieder stacken */
@media (max-width: 360px) {
  .page--research .section-media { 
    float: none !important; 
    width: 100% !important; 
    margin: 0 0 .6rem 0 !important;
  }
}


/* Desktop/Laptop: Captions kleiner (Phone & iPad bleiben unverändert) */
@media (min-width: 1101px) {
  .page--research .section-media figcaption {
    font-size: 0.72rem !important;   /* nach Bedarf z.B. 0.70–0.76rem */
    line-height: 1.35 !important;
  }
}
/* Captions: gleiche Schrift wie der Fließtext */
figure figcaption {
  font-family: inherit !important;
  font-style: normal !important;  /* kein Kursiv */
  font-weight: 400 !important;
}