:root { --bg: #f8f7f4; --bg-translucent: rgba(248, 247, 244, 0.85); --text: #1a1c20; --muted: #6b7280; --accent: #2563eb; --accent-2: #0d9488; --rule: #e5e2dc; --max: 48rem; } @media (prefers-color-scheme: dark) { :root { --bg: #101216; --bg-translucent: rgba(16, 18, 22, 0.85); --text: #e8eaed; --muted: #98a1ad; --accent: #7ab3f5; --accent-2: #4fd1c5; --rule: #272b32; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: #fff; } .hero, .nav-inner, main { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; } /* Nav — ganz oben, sticky */ nav { position: sticky; top: 0; z-index: 10; background: var(--bg-translucent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); } .nav-inner { padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 1.02rem; white-space: nowrap; overflow-x: auto; } nav a { margin-right: 1.4rem; color: var(--text); font-weight: 550; text-decoration: none; transition: color 0.15s ease; } nav a:hover { color: var(--accent); } /* Header */ .hero { display: flex; align-items: center; gap: 1.75rem; padding-top: 3.5rem; padding-bottom: 1rem; } .portrait { width: 160px; height: 160px; object-fit: cover; border-radius: 22px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--rule), 0 8px 24px rgba(0, 0, 0, 0.1); } h1 { margin: 0; font-size: 2rem; font-weight: 750; letter-spacing: -0.03em; background: linear-gradient(100deg, var(--text) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tagline { margin: 0.3rem 0 0.7rem; color: var(--text); font-size: 1.02rem; } .links { margin: 0; font-size: 0.95rem; } .links a { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.1rem; color: var(--text); font-weight: 500; text-decoration: none; transition: color 0.15s ease; } .links a svg { width: 1em; height: 1em; flex-shrink: 0; } .links a:hover { color: var(--accent); } /* Content */ main { padding-bottom: 4rem; } section { padding-top: 2.75rem; } section + section { margin-top: 2.75rem; border-top: 1px solid var(--rule); } h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.1rem; } h4 { font-size: 0.95rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 2rem 0 0.75rem; } a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: color-mix(in srgb, var(--accent) 70%, var(--text)); } /* Flattersatz. text-wrap: pretty verteilt die Zeilen so, dass kein einzelnes Wort allein auf der letzten Zeile landet. */ main p, main li { text-wrap: pretty; } /* Erklär-Tooltip an fettem Fachbegriff (Hover am Desktop, Tap/Fokus mobil) */ .tip { border-bottom: 1px dotted color-mix(in srgb, var(--muted) 70%, transparent); outline: none; } /* Der Tooltip ist ein einzelnes Element am , das per Skript an die tatsächlich überfahrene Zeile gesetzt wird. Nötig, weil ein Begriff über zwei Zeilen umbrechen kann: ein ::after würde immer am ersten Fragment kleben, also an der falschen Zeile. */ .tip-pop { position: fixed; top: 0; left: 0; z-index: 50; max-width: 17rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 0.82rem; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; } .tip-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .tip-pop::after { content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--text); } /* Kein Platz oben? Dann sitzt der Tooltip unter dem Wort und der Pfeil dreht. */ .tip-pop.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); } ul { padding-left: 1.25rem; } li { margin-bottom: 0.4rem; } li::marker { color: var(--accent); } /* Publikationen: Titel (blau) / Autoren (grau, eigener Name dunkel) / Venue (dunkel, kursiv) */ #publications p { margin: 0 0 0.9rem; padding: 0.15rem 0 0.15rem 0.9rem; border-left: 2px solid var(--rule); } #publications p:first-of-type { border-left: none; padding-left: 0; } #publications p a:first-child { font-weight: 600; } #publications em { font-size: 0.94em; color: color-mix(in srgb, var(--muted) 60%, var(--text)); } @media (max-width: 540px) { .hero { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-top: 2.5rem; } h1 { font-size: 1.75rem; } }