/* ponytail: eine Datei, System-Fonts, kein JS, keine externen Requests.
   Farbgebung aus dem CV: Akzent #008bb4 (Petrol), schwarze Fetttitel,
   Quelle/Datum in Petrol ueber dem Titel, Akzentbalken als Fuss. */

:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --muted: #56565a;
  --bg: #ffffff;
  --rule: #e6e6e4;
  /* Blockfarbe = CV-Original. Fuer kleinen Text abgedunkelt, sonst nur 3.9:1 auf Weiss. */
  --accent: #008bb4;
  --accent-text: #00718f;
  --link: #00718f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e7e5e1;
    --muted: #a3a39f;
    --bg: #121517;
    --rule: #2b2f33;
    --accent: #008bb4;
    --accent-text: #35b6dd;
    --link: #59c3e5;
  }
}

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

body {
  margin: 0 auto;
  padding: 4rem 1.5rem 0;
  max-width: 46rem;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* ---------- Profil ---------- */

.profil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.75rem 2.5rem;
  align-items: start;
}

.identitaet {
  grid-column: 1;
  border-left: 10px solid var(--accent);
  padding-left: 1.5rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 8vw, 3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

h1 span { display: block; }

.qualifikation {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Ein Abschluss pro Zeile. Zusammenhaengend braeuchte der String rund 740 px, die
   Spalte neben dem Portrait hat etwa 450 px: ein Umbruch ist unvermeidlich, also
   liegt er bewusst zwischen den Abschluessen und nicht mitten im Namen. */
.qualifikation span { display: block; white-space: nowrap; }

.portrait {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 10.5rem;
  /* Hoehe aus dem intrinsischen Verhaeltnis: kein aspect-ratio, das mit der
     Datei auseinanderlaufen kann, kein Nachschneiden durch den Browser.
     Die width/height-Attribute im HTML reservieren den Platz (kein Layoutsprung). */
  height: auto;
  /* Kein background: der Hintergrund faerbt bei einem img auch die Padding-Flaeche
     und erzeugt zwischen Akzentlinie und Foto einen grauen Balken. */
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
}

.bio { grid-column: 1; padding-left: calc(10px + 1.5rem); }
.bio p { margin: 0 0 0.95rem; }
.bio p:last-child { margin-bottom: 0; }

/* Trennt Amt von Meinung. Steht als erste Zeile im Impressumblock, dort aber in
   Textfarbe statt Grau: der Rest des Fusses ist Boilerplate, diese Zeile nicht. */
.disclaimer { color: var(--fg); }

/* Unter 40rem: Porträt schmaler und unter den Namen, Sidebar-Regel weg. */
@media (max-width: 40rem) {
  .profil { grid-template-columns: minmax(0, 1fr); }
  .portrait {
    grid-column: 1;
    grid-row: auto;
    width: 8rem;
    border-left: 0;
    padding-left: 0;
    margin-left: calc(10px + 1.5rem);
  }
}

/* ---------- Abschnitte ---------- */

section {
  margin-top: 3.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}

h2 {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* ---------- Publikationen ---------- */

.publikationen, .kontakt { margin: 0; padding: 0; list-style: none; }
.publikationen > li + li { margin-top: 2.25rem; }

/* CV-Muster: Quelle und Datum in Petrol ueber dem schwarzen Fetttitel. */
.quelle {
  margin: 0 0 0.3rem;
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.publikationen h3 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}

.publikationen h3 a { color: var(--fg); text-decoration-color: var(--accent); }
.publikationen h3 a:hover { color: var(--accent-text); }

.teaser {
  margin: 0.45rem 0 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.volltext { margin: 0.5rem 0 0; font-size: 0.9375rem; }

/* ---------- Kontakt ---------- */

.kontakt > li + li { margin-top: 0.5rem; }
.kontakt a { font-weight: 600; }

/* ---------- Impressum ---------- */

footer {
  margin-top: 3.25rem;
  border-top: 6px solid var(--accent);
  padding: 2.25rem 0 4rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

footer h2 { color: var(--fg); }
footer p { margin: 0 0 0.85rem; }
footer p:last-child { margin-bottom: 0; }