/* Inter selbst gehostet statt von fonts.googleapis.com geladen (kein
   Drittanbieter-Request beim Seitenaufruf, kein DSGVO-Thema). Variable
   Font -- eine Datei deckt alle benoetigten Schnitte ab, nur der
   Latin-Subset (deckt auch deutsche Umlaute/scharfes S ab). Ueberschriften
   liefen zwischenzeitlich in Space Grotesk, das fiel im direkten Vergleich
   mit Navbar/Fliesstext (beide Inter) als Bruch auf -- jetzt einheitlich
   Inter ueberall, Abstufung nur noch ueber $headings-font-weight. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}

/* jolla-Vorlage: Icon-Reihe und Fliesstext (.content) sind von Quarto
   ungebremst auf die volle Spaltenbreite gesetzt -- auf Lesebreite
   begrenzen und mittig ausrichten. */
.quarto-about-jolla > .content {
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Fett im Fliesstext gedaempft statt schwarz -- dieselbe graue Tonlage,
   die Quarto schon fuer die about-Links verwendet, damit es nicht lauter
   wirkt als die Links selbst. Im Dark Mode ergibt dasselbe Grau nur
   ~2.65:1 Kontrast gegen den dunklen Hintergrund (WCAG-Minimum: 4.5:1) --
   dort ein helleres Grau, das denselben Kontrast wie im Light Mode gibt. */
.quarto-about-jolla > .content strong {
  color: rgb(80, 91, 102);
}
body.quarto-dark .quarto-about-jolla > .content strong {
  color: rgb(173, 181, 189);
}

/* Quartos eigene Zentrierung greift nur bei .description, unser
   subtitle: liefert aber .subtitle -- dieselbe Regel hier nachziehen. */
.quarto-about-jolla .quarto-title .subtitle {
  text-align: center;
}

/* Fliesstext-Links (Bootstrap-Default: text-decoration: underline) nur bei
   Hover unterstreichen, wie die Icon-Links darunter. */
.quarto-about-jolla > .content a {
  text-decoration: none;
}
.quarto-about-jolla > .content a:hover {
  text-decoration: underline;
}

div.quarto-about-jolla > .about-links {
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.4rem;
}

/* Social-Icons der About-Seite kommen aus Quartos eigenem .about-link
   (Bootstrap-Bundle) grau mit Blau-Hover -- dieselbe Inkonsistenz wie bei
   .pub-links, hier direkt gegen Bootstraps Regel ueberschrieben. Rahmen
   braucht keine eigene Farbe: "border: solid 1px" ohne border-color folgt
   automatisch der Textfarbe (currentColor). */
div.quarto-about-jolla .about-link {
  color: var(--bs-link-color);
  background-color: transparent;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
div.quarto-about-jolla .about-link:hover {
  background-color: var(--bs-link-color);
  color: var(--bs-body-bg);
}

/* Research-Listing: Quartos default-Listing setzt die Bildspalte auf nur
   30% der Zeilenbreite -- fuer ein einzelnes, praesent gezeigtes Projekt
   zu klein. Nur fuer das #projects-Listing (Research-Seite) vergroessern,
   Publications hat ohnehin keine Bilder. */
#projects .thumbnail {
  flex-basis: 45%;
}

/* Presentations-Listing: Quartos default-Listing setzt die Bildspalte auf
   30% der Zeilenbreite -- fuer die kleinen Vortrags-Vorschaubilder noch zu
   gross, daher weiter verkleinert. */
#listing-presentations .thumbnail {
  flex-basis: 18%;
}
/* Bild auf die Hoehe von zweizeiligem Titel + einzeiliger Description
   festlegen (statt an das eigene Seitenverhaeltnis strecken zu lassen --
   das haette die Zeile sonst hoeher gezogen, als der Text braucht).
   object-fit: contain statt Quartos Default (cover) -- die featured.png
   sind Konferenz-Logos/Banner mit stark unterschiedlichen Seitenverhaeltnissen
   (1.3:1 bis 4.2:1), cover haette sie angeschnitten. */
#listing-presentations .thumbnail img {
  height: 3.9rem;
  margin-top: 0;
  object-fit: contain;
}

/* Metadata-Spalte (Location/Datum) etwas schmaler, damit die Titelspalte
   breiter wird. Groesse ist bei Quarto mit 0.8em recht klein geraten, und
   ein margin-top von .2em laesst sie tiefer starten als den Titel -- beides
   hier korrigiert. Schriftgroesse wie Autoren/Venue bei Publications
   (0.92rem), damit Titel vs. Nebeninfos in beiden Listings gleich abgestuft
   sind. */
#listing-presentations .metadata {
  flex-basis: 20%;
  margin-top: 0;
  font-size: 0.92rem;
}

/* Description ebenfalls in der Publications-Nebeninfo-Groesse statt in
   Titelgroesse. */
#listing-presentations .listing-description {
  font-size: 0.92rem;
}

/* In der Metadata-Spalte soll die Location vor dem Datum stehen (Quarto
   rendert von sich aus immer erst das Datum). */
#listing-presentations .listing-location {
  order: 1;
}
#listing-presentations .listing-date {
  order: 2;
}

/* Titel wie bei Publications als Link in der Akzentfarbe, in Textgroesse
   statt h3 -- Quartos Default-Listing faerbt saemtliche Links (auch Titel)
   in der Fliesstextfarbe ein und rendert den Titel als grosse Ueberschrift. */
#listing-presentations .listing-title a {
  color: var(--bs-link-color);
  text-decoration: none;
}
#listing-presentations .listing-title a:hover {
  text-decoration: underline;
}
#listing-presentations .listing-title {
  font-size: 1rem;
}

/* Presentations-Detailseiten: Steckbrief-artige Fakten-Liste (Location,
   Abstract, Materials) als Pandoc-Definitionsliste statt Fliesstext mit
   Fettdruck und Gedankenstrich. */
#quarto-document-content dl dt {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgb(80, 91, 102);
  margin-top: 1.2em;
}
body.quarto-dark #quarto-document-content dl dt {
  color: rgb(173, 181, 189);
}
#quarto-document-content dl dd {
  margin-left: 0;
  margin-bottom: 0;
}

/* Publications: IEEE-artige Zitationsliste (eigenes ejs-Template
   pub-list.ejs.md statt Quartos Standard-Listing). Nummerierung zaehlt
   absteigend von der Gesamtzahl (counter-reset: pubnum <N> inline im
   Template) -- man sieht die Gesamtzahl der Publikationen sofort. */
.pub-search-input,
.listing-search-input {
  max-width: 22rem;
  margin-bottom: 1rem;
}

.pub-list {
  list-style: none;
  padding-left: 0;
  counter-reset: pubnum 0;
}
.pub-entry {
  counter-increment: pubnum -1;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0;
  line-height: 1.5;
}
/* Nummer in eigener, fest breiter Spalte statt text-indent-Trick --
   dadurch sitzen umgebrochene Zeilen exakt unter der ersten,
   unabhaengig davon wie breit "5." oder "12." tatsaechlich sind. */
.pub-num {
  flex: 0 0 1.8rem;
  text-align: right;
}
.pub-num::before {
  content: counter(pubnum) ".";
  font-variant-numeric: tabular-nums;
  color: rgb(80, 91, 102);
}
body.quarto-dark .pub-num::before { color: rgb(173, 181, 189); }
.pub-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Drei Zeilen pro Eintrag: Titel, Autoren+Jahr, Venue+Buttons -- Titel
   zuerst fuer Scanbarkeit. Titel dauerhaft in der Link-Akzentfarbe (wie
   auf der About-Seite), Zeile 2+3 normale Textfarbe. */
.pub-authors,
.pub-venue-line {
  font-size: 0.92rem;
}

.pub-title-line { margin: 0 0 0.1rem 0; }
.pub-title-link {
  text-decoration: none;
}
.pub-title-link:hover {
  text-decoration: underline;
}

/* Buttons im selben Stil wie die Icon-Links auf der About-Seite (Quartos
   eigenes .about-link): schmaler Rahmen in der Akzentfarbe statt separatem
   Grau -- Grau wirkte wie eine zweite, unkoordinierte Linkfarbe neben dem
   blauen Fliesstext-Link. Hover fuellt den Chip statt nur die Farbe zu
   wechseln. var(--bs-link-color)/var(--bs-body-bg) kommen aus Bootstrap
   und wechseln automatisch mit Light/Dark-Theme. */
.pub-links {
  display: inline-block;
  margin-left: 0.3rem;
}
.pub-links a {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.78rem;
  border: 1px solid var(--bs-link-color);
  border-radius: 3px;
  color: var(--bs-link-color);
  background-color: transparent;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.pub-links a:hover {
  background-color: var(--bs-link-color);
  color: var(--bs-body-bg);
}