/* ==========================================================================
   Wojciech Nakielski — Portfolio-Website
   Richtung "C — Warm Modern": Sora, violetter Akzent, weiche Radien.

   Struktur (Refactor 2026-08-21): Die Seite hat jetzt RHYTHMUS statt einer
   Kette gleich schwerer Abschnitte — abwechselnde Vollbreiten-Bänder
   (.band / .band-alt / .band-feature), ein asymmetrischer Hero, und eine
   Hierarchie in den Fokusbereichen (ein großes Panel + leichte Zeilen)
   statt eines 2x2-Rasters identischer Karten.
   .section bleibt der innere Container, damit Profil-/Artikelseiten
   unverändert weiterfunktionieren.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --bg: #0d0f13;
  --bg-alt: #12161e;
  --surface: #181d26;
  --surface-hover: #1f2632;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --text: #eef0f6;
  --text-muted: #9aa3b2;
  --text-dim: #6b7480;
  --accent: #9aa4ff;
  --accent-strong: #b9c0ff;
  --accent-soft: rgba(154, 164, 255, 0.13);
  --accent-line: rgba(154, 164, 255, 0.3);
  --accent-contrast: #12142b;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --content-w: 42rem;
  --page-w: 68rem;
  --gutter: 1.75rem;
}

/* ---- Reset --------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Klebende Kopfleiste: Sprungziele duerfen nicht darunter verschwinden. */
main [id] { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Dekorative Leuchtflächen dürfen nie horizontal scrollen lassen. */
html { overflow-x: clip; }
main > .hero { overflow-x: clip; }

/* Feines Korn über der ganzen Seite — nimmt dem Dunkel das Flache. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 2; }

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; margin: 0; letter-spacing: -0.022em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
::selection { background: var(--accent); color: var(--accent-contrast); }

@media (prefers-reduced-motion: no-preference) {
  a, .btn, .card, .project-card, .card-list-item, .focus-line { transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.6em 1em;
  z-index: 100;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 1rem; top: 1rem; }

.accent-text { color: var(--accent-strong); }

/* ---- Bänder: die Rhythmus-Mechanik ---------------------------------------- */
.band { position: relative; overflow-x: clip; }
.band-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}
.band-feature {
  background:
    radial-gradient(900px circle at 78% 12%, rgba(154, 164, 255, 0.13), transparent 62%),
    var(--bg-alt);
  border-block: 1px solid var(--border);
}

/* ---- Kicker / kleine Labels ----------------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 1.4em;
}
.kicker::before {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: var(--accent-line);
  flex-shrink: 0;
}
.meta { font-size: 0.92rem; color: var(--text-muted); }

/* ---- Header / Navigation --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 15, 19, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wordmark {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--accent);
  padding: 0.42em 0.85em;
  border-radius: var(--radius-pill);
}
.wordmark:hover { border-color: var(--accent); }
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.94rem;
  font-weight: 500;
}

/* .nav-links war ein <span> ohne eigenes Layout — die Links standen nur durch
   das eingeklappte Leerzeichen im Quelltext 3px auseinander und lasen sich als
   ein Block. Flex mit gap plus Innenabstand macht jeden Punkt als eigenes Ziel
   erkennbar und vergrößert die Klickfläche von 18px auf ~36px. */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.site-nav a {
  text-decoration: none;
  color: var(--text-muted);
  padding: 0.5em 0.75em;
  border-radius: var(--radius-pill);
  line-height: 1.25;
}
.site-nav a:hover {
  color: var(--text);
  background: var(--surface);
}

/* Trennt die Navigation sichtbar vom Sprachumschalter — sonst wirkt DE·EN wie
   ein weiterer Menüpunkt. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  padding-left: 1.1rem;
  border-left: 1px solid var(--border);
}
.lang-switch a { color: var(--text-muted); text-decoration: none; padding: 0.4em 0.45em; border-radius: var(--radius-sm); }
.lang-switch a:hover { color: var(--text); background: var(--surface); }
.lang-switch .current { color: var(--text); font-weight: 700; padding: 0.4em 0.45em; }

/* --- Mobil: Menü sichtbar statt ausgeblendet -------------------------------
   Das Menü war unter 700px komplett versteckt, ohne Ersatz. Statt eines
   Hamburger-Menüs (bräuchte JavaScript) rutscht die Navigation in eine zweite
   Zeile: alles sichtbar, keine Skripte, ein Fingertipp statt zwei.
   display:contents löst den <nav>-Kasten auf, damit Wortmarke und
   Sprachumschalter oben zusammenbleiben und nur die Links umbrechen. */
@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0.55rem; padding-bottom: 0.7rem; }
  .site-nav { display: contents; }
  .lang-switch { order: 1; padding-left: 0; border-left: none; }
  .nav-links {
    order: 2;
    width: 100%;
    gap: 0.12rem;
    font-size: 0.85rem;
    justify-content: space-between;
  }
  /* Waagerecht knapp, damit alle fünf Punkte in eine Zeile passen (sonst wird
     der Kopf 149px hoch); senkrecht großzügig für die Fingerfläche.
     flex-wrap bleibt als Sicherheitsnetz aktiv, falls es doch nicht reicht. */
  .site-nav a { padding: 0.85em 0.5em; }
}

/* ---- Abschnitte (innerer Container) ---------------------------------------- */
main { display: block; }
.section {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 6rem var(--gutter);
  border-bottom: 1px solid var(--border);
}
.section:last-of-type { border-bottom: none; }
/* Innerhalb eines Bandes trennt das Band selbst — dann keine zweite Linie. */
.band > .section { border-bottom: none; }
.section > .kicker { max-width: var(--content-w); }
.section h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.1;
  max-width: 22ch;
  margin-bottom: 0.55em;
}
.section-intro {
  max-width: var(--content-w);
  color: var(--text-muted);
  font-size: 1.06rem;
  margin-bottom: 2.6rem;
}

/* ---- Hero: asymmetrisch, große Type, Foto als Bildelement ------------------- */
.hero {
  position: relative;
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 7rem var(--gutter) 5.5rem;
  isolation: isolate;
}
/* Lichtschein: bewusst innerhalb des Hero geklippt, damit er nie eine
   horizontale Scrollleiste erzeugt. */
.hero::before {
  content: "";
  position: absolute;
  top: -18rem;
  right: -8rem;
  width: 44rem;
  height: 44rem;
  max-width: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 164, 255, 0.2), transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 4rem; }
}
.hero-photo {
  width: 100%;
  max-width: 24rem;
  /* height:auto ist nötig, damit aspect-ratio das height-Attribut des
     <img> überstimmt — sonst wird das Porträt hochkant verzerrt. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 28px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  filter: grayscale(1) contrast(1.06);
  box-shadow:
    0 40px 80px -32px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(154, 164, 255, 0.12);
}
@media (min-width: 900px) {
  .hero-photo { max-width: none; transform: translateY(0.5rem); }
}
.hero h1 {
  font-size: clamp(3rem, 2rem + 5.4vw, 5.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.038em;
  margin-bottom: 0.42em;
}
.hero .subline {
  font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem);
  line-height: 1.36;
  color: var(--text);
  max-width: 26ch;
  margin-bottom: 1.1em;
  text-wrap: balance;
}
.hero .bio {
  max-width: 52ch;
  color: var(--text-muted);
  font-size: 1.03rem;
}
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }

/* ---- Kennzahlen-Band -------------------------------------------------------- */
.stat-band { border-block: 1px solid var(--border); background: var(--bg-alt); }
.stat-strip {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 2.6rem var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat-value {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-label { font-size: 0.86rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: 1fr; gap: 1.3rem; }
}

/* ---- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.85em 1.5em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  line-height: 1;
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 12px 32px -12px rgba(154, 164, 255, 0.62); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-2px); } }

/* ---- Karten-Grundform -------------------------------------------------------- */
.card, .focus-item, .feature-card, .project-card, .card-list-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---- Fokusbereiche: ein großes Panel + leichte Zeilen (Hierarchie!) --------- */
.focus-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 880px) {
  .focus-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
}
.focus-lead {
  background: linear-gradient(158deg, var(--surface) 0%, var(--surface) 58%, rgba(154, 164, 255, 0.1) 145%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 2.4rem;
}
.focus-lead .meta { display: block; font-weight: 600; color: var(--accent-strong); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.1em; }
.focus-lead h3 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 0.5em; }
.focus-lead p { color: var(--text-muted); font-size: 1.01rem; margin: 0; }

.focus-rest { display: flex; flex-direction: column; }
.focus-line { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.focus-line:first-child { border-top: none; padding-top: 0; }
.focus-line:last-child { padding-bottom: 0; }
.focus-line .meta { display: block; font-weight: 600; color: var(--text-dim); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5em; }
.focus-line h3 { font-size: 1.14rem; margin-bottom: 0.35em; }
.focus-line p { color: var(--text-muted); font-size: 0.97rem; margin: 0; }

/* Altes 2x2-Raster bleibt für die Profilseite bestehen. */
.focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.focus-item { padding: 1.9rem; }
.focus-item .meta { display: block; font-weight: 600; color: var(--text-muted); margin-bottom: 0.8em; }
.focus-item h3 { font-size: 1.15rem; margin-bottom: 0.45em; }
.focus-item p { color: var(--text-muted); font-size: 0.98rem; margin-bottom: 0; }
@media (max-width: 640px) { .focus-grid { grid-template-columns: 1fr; } }

/* ---- Architektur-Signatur (Homepage) ---------------------------------------- */
.signature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .signature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; }
}
.layer-stack { display: flex; flex-direction: column; gap: 0.8rem; }
.layer-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.4rem;
}
.layer-row .tag { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; color: var(--accent-strong); }
.layer-row p { margin: 0; font-size: 0.94rem; color: var(--text-muted); }
@media (max-width: 560px) {
  .layer-row { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ---- Artikel-Feature-Karte ---------------------------------------------------- */
.feature-card {
  padding: 2.6rem;
  max-width: var(--content-w);
  border-color: var(--border-strong);
  background: linear-gradient(158deg, var(--surface) 0%, var(--surface) 58%, rgba(154, 164, 255, 0.1) 150%);
}
.feature-card h3 { font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem); line-height: 1.18; margin-bottom: 0.5em; }
.feature-card .dek { color: var(--text-muted); font-size: 1.02rem; margin-bottom: 1.3em; }
.feature-card .meta { display: block; font-weight: 600; color: var(--accent-strong); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.3em; }
.feature-card .btn { margin-top: 0.2em; }

/* ---- Projektkarten ------------------------------------------------------------ */
.project-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.project-card { padding: 2rem; display: block; text-decoration: none; color: var(--text); }
.project-card:hover { border-color: var(--accent-line); background: var(--surface-hover); }
@media (prefers-reduced-motion: no-preference) { .project-card:hover { transform: translateY(-3px); } }
.project-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.2em; }
.project-card h3 { font-size: 1.2rem; font-weight: 700; }
.project-card p { color: var(--text-muted); margin: 0.6em 0 0; font-size: 0.97rem; }
.project-card .meta { font-size: 0.82rem; color: var(--text-dim); font-weight: 500; }
.projects-more { margin-top: 2rem; }

/* ---- Themen (Kontaktband) ------------------------------------------------------ */
.topics-heading {
  margin: 3.2rem 0 1.7rem;
  padding-top: 2.8rem;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.8rem 2.5rem;
  margin: 0;
}
.topic-group h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.9em;
}
.topic-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.topic-group li {
  font-size: 0.87rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.35em 0.85em;
  line-height: 1.3;
}

/* ---- Kontakt: Abschluss-Band --------------------------------------------------- */
.contact-links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  /* Lange E-Mail-Adressen sprengen sonst die Pillenform und werden auf
     schmalen Displays abgeschnitten — dort ist die Adresse dann unlesbar. */
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.85em 1.4em;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 1rem;
  font-weight: 500;
}
.contact-links a:hover { color: var(--accent-strong); border-color: var(--accent-line); background: var(--surface-hover); }
@media (prefers-reduced-motion: no-preference) { .contact-links a:hover { transform: translateY(-2px); } }
.contact-links .arrow { color: var(--text-dim); }

/* ---- Footer --------------------------------------------------------------------- */
.site-footer {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ============================================================================
   Profil-/Lebenslaufseite
   ============================================================================ */
.timeline { position: relative; max-width: var(--page-w); }
.timeline-item { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; padding: 1.9rem 0; border-bottom: 1px solid var(--border); position: relative; }
.timeline-item:first-child { padding-top: 0; }
.timeline-item:last-child { border-bottom: none; }
.timeline-item .years { font-size: 0.92rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; padding-top: 0.3em; font-variant-numeric: tabular-nums; }
.timeline-item .role { margin: 0 0 0.25em; font-size: 1.2rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.timeline-item .org { display: block; font-size: 0.92rem; font-weight: 600; color: var(--accent-strong); margin-bottom: 0.6em; }
.timeline-item p { color: var(--text-muted); font-size: 0.97rem; margin: 0; }
.timeline-teaser { max-width: var(--content-w); margin-bottom: 2rem; }
.timeline-teaser .timeline-item { grid-template-columns: 7rem 1fr; padding: 1.35rem 0; }

@media (min-width: 641px) {
  .timeline::before {
    content: "";
    position: absolute;
    left: calc(8rem + 0.75rem - 0.5px);
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: linear-gradient(to bottom, var(--accent-line), var(--border) 55%, transparent);
  }
  .timeline-item::after {
    content: "";
    position: absolute;
    left: calc(8rem + 0.75rem - 4px);
    top: 2.3rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .timeline-item:first-child::after { top: 0.45rem; }
  .timeline-teaser::before { left: calc(7rem + 0.75rem - 0.5px); }
  .timeline-teaser .timeline-item::after { left: calc(7rem + 0.75rem - 4px); top: 1.75rem; }
  .timeline-teaser .timeline-item:first-child::after { top: 0.4rem; }
}
@media (max-width: 640px) {
  .timeline-item, .timeline-teaser .timeline-item { grid-template-columns: 1fr; gap: 0.35rem; }
}

.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; max-width: var(--page-w); }
.card-list-item { padding: 1.4rem 1.6rem; }
.card-list-item .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.card-list-item h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.card-list-item p { color: var(--text-muted); margin: 0.45em 0 0; font-size: 0.94rem; }

.subsection-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 3rem 0 1.2rem;
}
.subsection-title:first-of-type { margin-top: 0; }

/* ============================================================================
   Artikelübersicht und Themenseiten
   ============================================================================ */
.article-index-header {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 4.5rem var(--gutter) 3rem;
}
.article-index-header .back-link {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 2.4rem;
}
.article-index-header .back-link:hover { color: var(--text); }
.article-index-header h1 {
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
  margin-bottom: 0.4em;
}
.article-index-header .dek {
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--content-w);
  margin: 0;
  text-wrap: pretty;
}

.topic-bar-section { padding-block: 2.6rem; }
.topic-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.topic-bar a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.42em 0.95em;
}
.topic-bar a:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.topic-bar a.is-active {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.topic-bar .count { font-size: 0.8rem; opacity: 0.65; font-variant-numeric: tabular-nums; }

.article-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.article-row {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
}
.article-row:hover { border-color: var(--accent-line); background: var(--surface-hover); }
@media (prefers-reduced-motion: no-preference) {
  .article-row { transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
  .article-row:hover { transform: translateY(-2px); }
}
.article-row .meta { display: block; font-size: 0.86rem; color: var(--text-dim); margin-bottom: 0.7em; }
.article-row h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.2;
  margin-bottom: 0.4em;
  max-width: 30ch;
}
.article-row p { color: var(--text-muted); font-size: 1rem; margin: 0; max-width: 58ch; }
.article-row .row-tags {
  display: block;
  margin-top: 1.1em;
  font-size: 0.84rem;
  color: var(--accent-strong);
  font-weight: 500;
}

/* ============================================================================
   Artikelseite
   ============================================================================ */
.article-header {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 4.5rem var(--gutter) 1rem;
}
.article-header .back-link { display: inline-block; font-size: 0.92rem; font-weight: 600; color: var(--text-muted); text-decoration: none; margin-bottom: 2.4rem; }
.article-header .back-link:hover { color: var(--text); }
.article-header h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem); line-height: 1.08; letter-spacing: -0.032em; margin-bottom: 0.5em; }
.article-header .dek { font-weight: 400; font-size: 1.22rem; line-height: 1.5; color: var(--text-muted); margin-bottom: 1.2em; text-wrap: balance; }

.prose { max-width: var(--content-w); margin: 0 auto; padding: 1rem var(--gutter) 2rem; }
.prose h2 { font-size: 1.55rem; margin-top: 2.5em; margin-bottom: 0.6em; }
.prose p { margin-bottom: 1.2em; color: var(--text); }
.prose p.lede { font-size: 1.2rem; font-weight: 400; line-height: 1.6; color: var(--text); }
.prose a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent); }

.diagram { display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr)); gap: 1rem; margin: 2.6rem 0; }
.diagram .layer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.3rem 1.4rem; }
.diagram .layer .tag { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 500; color: var(--accent-strong); display: block; margin-bottom: 0.6em; }
.diagram .layer p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }
@media (max-width: 640px) { .diagram { grid-template-columns: 1fr; } }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 2.6rem 0 0; padding: 0; }
.tags li { font-size: 0.85rem; font-weight: 500; color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.tags li:hover { border-color: var(--accent-line); }
.tags li a { display: block; padding: 0.4em 0.95em; color: inherit; text-decoration: none; border-radius: inherit; }
.tags li a:hover { color: var(--accent-strong); }

.article-cta {
  max-width: var(--content-w);
  margin: 1.5rem auto 0;
  padding: 2.6rem var(--gutter) 4.5rem;
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}

/* Dezenter Hinweis über den Kontaktwegen — bewusst kein Angebotsblock:
   Zusammenarbeit wird im Gespräch geklärt, nicht auf der Seite verhandelt. */
.contact-note {
  max-width: var(--content-w);
  margin: 0 0 1.4rem;
  color: var(--text-muted);
  font-size: 0.98rem;
}