/* ============================================================
   Manuel C. Kathan — persoenliche Website
   Editorial-Layout, selbst gehostete Schriften, keine externen
   Requests. Diese Datei gilt fuer alle vier Seiten.
   Farben und Groessen stehen unten in :root.
   fonts.css wird in jeder Seite separat verlinkt.
   ============================================================ */

/* ---------- Designtokens ---------------------------------- */

:root {
  /* Papierton statt Reinweiss: nimmt dem Bildschirm die Haerte */
  --paper:      #fcfbf8;
  --paper-warm: #f5f2ec;
  --ink:        #16150f;
  --ink-soft:   #46443c;
  --ink-mute:   #7d7a70;
  --rule:       #e2ded4;
  --rule-soft:  #edeae2;
  --accent:     #14655a;
  --accent-tint:#14655a12;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --page:    68rem;   /* aeussere Begrenzung */
  --measure: 38rem;   /* Lesebreite (~72 Zeichen) */
  --gutter:  clamp(1.5rem, 5vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #12130f;
    --paper-warm: #1a1b16;
    --ink:        #eae7dd;
    --ink-soft:   #b8b4a8;
    --ink-mute:   #8a877c;
    --rule:       #2e2f28;
    --rule-soft:  #23241e;
    --accent:     #62b8a6;
    --accent-tint:#62b8a61a;
  }
}

/* ---------- Reset ----------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 99; font-family: var(--sans); font-size: 0.9rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Warming Stripes -------------------------------
   Erkennungszeichen oben (Ed Hawkins, showyourstripes.info).
   ZUM ENTFERNEN: <div class="stripes"> aus ALLEN VIER
   HTML-Dateien loeschen.
   ----------------------------------------------------------- */

.stripes {
  height: 5px;
  background: linear-gradient(to right,
    #08306b 0%,   #08306b 4%,   #2171b5 4%,   #2171b5 8%,
    #4292c6 8%,   #4292c6 12%,  #6baed6 12%,  #6baed6 16%,
    #9ecae1 16%,  #9ecae1 21%,  #c6dbef 21%,  #c6dbef 25%,
    #deebf7 25%,  #deebf7 29%,  #fee0d2 29%,  #fee0d2 33%,
    #fcbba1 33%,  #fcbba1 38%,  #fc9272 38%,  #fc9272 46%,
    #fb6a4a 46%,  #fb6a4a 54%,  #ef3b2c 54%,  #ef3b2c 63%,
    #cb181d 63%,  #cb181d 75%,  #a50f15 75%,  #a50f15 88%,
    #67000d 88%,  #67000d 100%);
}

/* ---------- Navigation -------------------------------------
   Steht identisch in allen vier HTML-Dateien. Wer einen
   Menuepunkt aendert, muss ihn in allen vier aendern.
   ----------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}

.nav__inner {
  max-width: var(--page); margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.6rem;
}

.nav__name {
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  margin-right: auto; text-decoration: none;
}

/* Monogramm ------------------------------------------------
   Als CSS-Maske eingebunden, nicht als <img>: in einem <img>
   wuerde currentColor NICHT von der Seite erben, das Zeichen
   waere in der Dunkelfassung schwarz auf schwarz. So faerbt
   es die Textfarbe - inklusive Hover und Dark Mode.
   Seitenverhaeltnis der Datei: 125 : 106.
   ----------------------------------------------------------- */

/* Das Zeichen steht einmal pro Seite als <symbol> direkt im HTML und
   wird per <use> zweimal verwendet. Bewusst NICHT als CSS-Maske oder
   <img> mit externer logo.svg: eine CSS-Maske blockiert der Browser
   beim lokalen Oeffnen per file://, und in einem <img> wuerde
   currentColor nicht von der Seite erben (dunkel auf dunkel). */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav__mark, .footer__mark { display: inline-block; fill: currentColor; }

.nav__mark {
  width: 1.71rem; height: 1.45rem;
  margin-right: 0.6rem; vertical-align: -0.34em;
}

.footer__mark {
  width: 2.95rem; height: 2.5rem;
  margin-right: 0.5rem; vertical-align: middle;
  opacity: 0.45;
}

.nav__link {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.015em; color: var(--ink-mute); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Seitengeruest --------------------------------- */

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

section { padding: 3.75rem 0 0; }

h1 {
  font-size: clamp(2.4rem, 6.5vw, 3.9rem);
  font-weight: 600; line-height: 1.04;
  letter-spacing: -0.026em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* Seitentitel der Unterseiten */
.pagehead { padding: clamp(2.75rem, 6vw, 4.25rem) 0 0; }
.pagehead h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 0.7rem; }
.pagehead .standfirst {
  font-size: 1.15rem; line-height: 1.5; color: var(--ink-soft);
  max-width: 36rem; margin: 0;
}

.section-label {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin: 0 0 1.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ink);
}

.subhead {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--accent);
  margin: 2.75rem 0 1.35rem;
}
.subhead:first-of-type { margin-top: 0; }

p { margin: 0 0 1.2rem; }
.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }

/* Weiterfuehrender Link ans Ende eines Abschnitts */
.more {
  display: inline-block; margin-top: 1.6rem;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500;
  color: var(--accent); text-decoration: none;
}
.more::after { content: " \2192"; }
.more:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Kopfbereich der Startseite --------------------- */

.hero { padding: clamp(3rem, 7vw, 5rem) 0 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.hero__kicker {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0 0 1.3rem;
}

.hero__lede {
  font-size: clamp(1.22rem, 2.1vw, 1.4rem);
  line-height: 1.48; color: var(--ink-soft);
  max-width: 33rem; margin: 0 0 1.3rem;
  text-wrap: pretty;
}

.hero__meta {
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.55;
  color: var(--ink-mute); max-width: 30rem; margin: 0 0 2.1rem;
}

/* Schlagwortzeile im Kopf. Derzeit nicht benutzt - die Regel bleibt
   stehen, damit sich die Zeile ohne Aufwand zurueckholen laesst
   (auskommentierter Block in index.html). */
.hero__interests {
  font-family: var(--sans); font-size: 0.84rem; line-height: 1.7;
  color: var(--ink-mute); max-width: 40rem;
  margin: 0 0 1.9rem; padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
}
.hero__interests b { color: var(--ink-soft); font-weight: 500; }

/* Portrait --------------------------------------------------
   Bild einsetzen: portrait.jpg in den Ordner legen, dann in
   index.html den Platzhalter loeschen und <img> aktivieren. */

.portrait { position: relative; margin: 0; }

.portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 2px; filter: grayscale(10%) contrast(1.02);
}

.portrait__placeholder {
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--rule);
  border-radius: 2px;
  display: grid; place-content: center; gap: 0.3rem;
  text-align: center; padding: 1rem;
  font-family: var(--sans); font-size: 0.68rem; line-height: 1.5;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
  opacity: 0.65;
}
.portrait__placeholder svg { width: 1.6rem; height: 1.6rem; margin: 0 auto 0.2rem; opacity: 0.4; }

/* ---------- Linkzeile und Knoepfe -------------------------- */

.links { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }

.links a {
  display: inline-block; text-decoration: none;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  padding: 0.36rem 0.85rem;
  border: 1px solid var(--rule); border-radius: 100px;
  color: var(--ink-soft);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.links a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }

.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500;
  padding: 0.6rem 1.3rem; border-radius: 100px;
  background: var(--accent); color: var(--paper);
  transition: opacity 0.18s ease;
}
.btn:hover { opacity: 0.85; color: var(--paper); }

/* ---------- Publikationsliste -----------------------------
   Zweispaltig: Jahr links, Eintrag rechts. Die eigene
   Jahresspalte erzeugt die ruhige vertikale Kante.
   ----------------------------------------------------------- */

.pub {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 2rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule-soft);
}
.pub:first-of-type { border-top: none; padding-top: 0.25rem; }

.pub__year {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-mute);
  padding-top: 0.42rem; white-space: nowrap;
}

.pub__title {
  font-size: 1.22rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.011em; margin: 0 0 0.35rem;
  text-wrap: pretty;
}
.pub__title a { text-decoration: none; }
.pub__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.pub__authors { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-mute); margin: 0 0 0.28rem; }

.pub__venue { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 0.55rem; }
.pub__venue em { font-family: var(--serif); font-size: 0.96rem; font-style: italic; color: var(--ink); }

.pub__note { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 34rem; }

/* Abbildung neben einem Paper -------------------------------
   Auf breiten Bildschirmen rechts neben dem Text, darunter
   ueber die volle Spaltenbreite. Die Grafiken sind Inline-SVG
   und erben ueber currentColor die Textfarbe, funktionieren
   also in heller wie dunkler Fassung.
   ----------------------------------------------------------- */

.pub > div:last-child { display: flow-root; }

.pub__figure { margin: 1.1rem 0 0; max-width: 23rem; }

@media (min-width: 62rem) {
  .pub__figure { float: right; width: 20rem; margin: 0.1rem 0 0.9rem 2.5rem; }
}

.pub__figure svg { width: 100%; height: auto; display: block; }

.pub__figure figcaption {
  font-family: var(--sans); font-size: 0.74rem; line-height: 1.5;
  color: var(--ink-mute); margin-top: 0.65rem;
}

/* Bestandteile der Diagramme */
.g-axis  { stroke: var(--rule); stroke-width: 1; }
.g-zero  { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 2 3; }
.g-dot   { fill: var(--accent); }
.g-label { font-family: var(--sans); font-size: 9px; fill: var(--ink-soft); }
.g-value { font-family: var(--sans); font-size: 9px; font-weight: 600; fill: var(--accent); font-variant-numeric: tabular-nums; }
.g-tick  { font-family: var(--sans); font-size: 9px; fill: var(--ink-mute); font-variant-numeric: tabular-nums; }
.g-bar   { fill: var(--accent); }

/* Aufklappbares Abstract -----------------------------------
   Reines HTML ueber <details>/<summary>, kein JavaScript.
   Der sichtbare Kurzbefund in .pub__note bleibt darueber
   stehen; das Abstract ist der Volltext dahinter.
   ----------------------------------------------------------- */

.pub details { margin-top: 0.85rem; }

.pub summary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.01em; color: var(--accent);
  cursor: pointer; list-style: none;
  padding: 0.1rem 0;
}
.pub summary::-webkit-details-marker { display: none; }
.pub summary::marker { content: ""; }

/* kleines Dreieck, das sich beim Aufklappen dreht */
.pub summary::before {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.pub details[open] summary::before { transform: rotate(90deg); }
.pub summary:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.pub .abstract {
  margin: 0.7rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  font-size: 0.97rem; line-height: 1.55;
  color: var(--ink-soft); max-width: 34rem;
}

.pub__tag {
  display: inline-block; vertical-align: 0.12em;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent); background: var(--accent-tint);
  border-radius: 3px; padding: 0.16rem 0.45rem; margin-left: 0.5rem;
}

/* ---------- Auszeichnungen -------------------------------- */

.awards { margin: 0; padding: 0; list-style: none; max-width: 46rem; }

.awards li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 2rem; padding: 1rem 0;
  border-top: 1px solid var(--rule-soft);
}
.awards li:first-child { border-top: none; padding-top: 0.25rem; }

.awards time {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-mute); padding-top: 0.2rem;
}
.awards strong { display: block; font-weight: 600; font-size: 1.08rem; margin-bottom: 0.12rem; }
.awards span { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-mute); }

/* ---------- Lehre ----------------------------------------- */

.courses { margin: 0; padding: 0; list-style: none; max-width: 44rem; }

/* Drei Spalten, damit Niveau und Zeitraum je eine eigene Kante haben.
   Rechtsbuendig allein wuerde "Bachelor" und "Master" versetzt beginnen. */
.courses li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.75rem 9.5rem;
  gap: 0.15rem 1.25rem; align-items: baseline;
  padding: 0.7rem 0; border-top: 1px solid var(--rule-soft);
}
.courses li:first-child { border-top: none; }

.courses .course { font-size: 1.06rem; }
.courses .level { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-mute); white-space: nowrap; }

/* Linksbuendig statt rechtsbuendig: bei gemischten Formaten ("2025" neben
   "from Winter 2026/27") gibt eine gemeinsame Startkante das ruhigere Bild,
   und die Anfangsjahre der Zeitraeume fluchten. tabular-nums sorgt dafuer,
   dass die Ziffern exakt untereinander stehen. */
.courses .when {
  font-family: var(--sans); font-size: 0.8rem; color: var(--ink-mute);
  white-space: nowrap; text-align: left;
  font-variant-numeric: tabular-nums;
}

/* ---------- Werdegang, Vortraege, Service ------------------ */

.yearlist { margin: 0; padding: 0; list-style: none; max-width: 46rem; }

.yearlist li {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 2rem; padding: 0.85rem 0;
  border-top: 1px solid var(--rule-soft);
}
.yearlist li:first-child { border-top: none; padding-top: 0.25rem; }

.yearlist .when {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-mute);
  padding-top: 0.3rem; white-space: nowrap;
}
.yearlist .what { font-size: 1.06rem; line-height: 1.45; }
.yearlist .what strong { font-weight: 600; }
.yearlist .sub {
  display: block; font-family: var(--sans); font-size: 0.85rem;
  color: var(--ink-mute); margin-top: 0.1rem; line-height: 1.5;
}

.yearlist--tight li { padding: 0.6rem 0; }
.yearlist--tight .what { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Fuss mit Kontakt ------------------------------
   Steht identisch in allen vier HTML-Dateien.
   ----------------------------------------------------------- */

footer {
  margin-top: 5rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
}

.footer__inner {
  max-width: var(--page); margin: 0 auto;
  padding: 3rem var(--gutter) 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.25rem;
}

.footer__inner h2 {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-mute); margin: 0 0 0.7rem;
}
.footer__inner p { font-size: 0.97rem; line-height: 1.6; margin: 0; color: var(--ink-soft); }
.footer__inner a { color: var(--ink-soft); }
.footer__inner a:hover { color: var(--accent); }

.footer__links { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.875rem; line-height: 1.9; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.footer__base {
  max-width: var(--page); margin: 0 auto;
  padding: 0 var(--gutter) 2.5rem;
  font-family: var(--sans); font-size: 0.78rem; color: var(--ink-mute);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
}
.footer__base a { text-decoration: none; }
.footer__base .spacer { margin-left: auto; }

/* ---------- Mobil ----------------------------------------- */

@media (max-width: 52rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .portrait { max-width: 12rem; order: -1; }
}

@media (max-width: 34rem) {
  body { font-size: 1.0625rem; }
  .nav__name { width: 100%; margin-right: 0; margin-bottom: 0.15rem; }
  .nav__inner { gap: 0.25rem 1.15rem; }
  section { padding-top: 2.75rem; }

  /* Jahresspalten ueber den Eintrag statt daneben */
  .pub, .awards li, .yearlist li { grid-template-columns: 1fr; gap: 0.28rem 0; }
  .pub__year, .awards time, .yearlist .when { padding-top: 0; }
  /* Kursliste auf schmalen Displays einspaltig, Niveau und Zeitraum untereinander */
  .courses li { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .courses .level, .courses .when { white-space: normal; }
}

/* ---------- Druck / PDF ----------------------------------- */

@media print {
  .nav, .stripes, .links, .portrait, .more, .btn, footer { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .wrap { max-width: none; padding: 0; }
  section { padding-top: 1.5rem; }
  .pub, .awards li, .courses li, .yearlist li { break-inside: avoid; }
  .section-label { border-bottom-color: #000; }
  a { text-decoration: none; color: #000; }

  /* Abstracts im Ausdruck immer ausklappen, Aufklapp-Zeile weg */
  .pub details > summary { display: none; }
  .pub details > *:not(summary) { display: block !important; }
}