/* ==========================================================================
   Designsprache Portfolio 2026 · Komponenten v0.1
   Jede Komponente ist ein Modul aus _context/02-design-patterns.md oder ein
   notwendiges UI-Element (Nav, Meta-Zeile, Link, Button, Feld). Keine Linien,
   keine Rahmen, keine Rundungen, keine Schatten – Struktur nur über Raster,
   Abstand und Skala.
   ========================================================================== */

/* --- Nav (oben, fest) ----------------------------------------------------
   Auf dem Hero trägt der Hero selbst den Namen; die Nav fährt erst danach
   ein (body.has-hero + .is-scrolled). Theme folgt der Section darunter. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--bar-h);
  background: var(--surface); color: var(--on-surface);
  transition: transform 360ms var(--ease-out), background var(--dur-micro), color var(--dur-micro);
}
.nav__inner {
  height: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-40);
  font-size: var(--fs-meta); line-height: var(--lh-meta);
}
.nav__links { display: flex; gap: var(--sp-40); }
.nav__links a { font-weight: var(--w-medium); }
.nav__links a[aria-current="page"] { font-weight: var(--w-medium); }
body.has-hero .nav { transform: translateY(-100%); }
body.has-hero.is-scrolled .nav { transform: none; }

/* --- Icons: nur zwei Glyphen, Strich ohne Fläche ------------------------
   ↳ Einstieg (links vor einem Absatz, nie allein)
   ↵ Gegengewicht (allein im freien Raum rechts, nie neben Text) */
.icon {
  width: clamp(40px, 4.792vw, 92px); height: auto;
  fill: none; stroke: currentColor; stroke-width: 7;
  stroke-linecap: butt; stroke-linejoin: miter;
  flex: none;
}
.icon--inline { width: 1.1em; stroke-width: 9; vertical-align: -0.1em; display: inline-block; }

/* --- Facts-Zeilen (L12): Label 40 + Wert 24, Standard-Abschluss ---------
   Client / Role / Result. Spaltenverhältnis per --facts-cols. ------------ */
.facts { display: grid; row-gap: var(--sp-52); }
.facts__row { display: grid; grid-template-columns: var(--facts-cols, 375fr 835fr); column-gap: var(--sp-40); align-items: start; }
.facts--stacked .facts__row { grid-template-columns: 1fr; row-gap: var(--sp-12); }
@media (max-width: 767.98px) {
  .facts { row-gap: var(--sp-40); }
  .facts__row { grid-template-columns: 1fr; row-gap: var(--sp-8); }
}

/* --- Drei Spalten (L5): Label 40 + Absatz 24 --------------------------- */
.cols { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); column-gap: var(--sp-40); row-gap: var(--sp-70); }
.cols > * { padding-right: 12%; min-width: 0; }
@media (max-width: 1023.98px) { .cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639.98px)  { .cols { grid-template-columns: 1fr; row-gap: var(--sp-52); } .cols > * { padding-right: 0; } }

/* --- Drei Begriffe (L4): 88 px + Satz 24 ------------------------------ */
.terms { display: grid; grid-template-columns: var(--terms-cols, 560fr 730fr 430fr); column-gap: var(--sp-40); row-gap: var(--sp-70); }
.terms > * { min-width: 0; }
@media (max-width: 1023.98px) { .terms { grid-template-columns: 1fr; row-gap: var(--sp-52); } }

/* --- Nummeriert vertikal (L7): „01" 40 px + Text 24 – ohne Achse ------- */
.numbered { display: grid; row-gap: var(--sp-40); counter-reset: item; }
.numbered__item { display: grid; grid-template-columns: 315fr 1405fr; column-gap: var(--sp-40); align-items: start; }
.numbered__item::before { counter-increment: item; content: counter(item, decimal-leading-zero); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .numbered__item { grid-template-columns: 1fr; row-gap: var(--sp-8); } }

/* --- Zeitstrahl (L8): Jahr 40 px + Text 24 ---------------------------- */
.timeline { display: grid; row-gap: var(--sp-52); }
.timeline__item { display: grid; grid-template-columns: 180fr 430fr; column-gap: var(--sp-40); align-items: start; }
.timeline__item dt { font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .timeline__item { grid-template-columns: 1fr; row-gap: var(--sp-8); } }

/* --- Kunden & Rollen (CV-Seite 4): zwei Spalten, spaltenweise gefüllt --- */
.clients { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-70); row-gap: var(--sp-40); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), auto); }
.clients__item { display: grid; grid-template-columns: 260fr 540fr; column-gap: var(--sp-24); align-items: start; }
.clients__item dd { font-variant-numeric: tabular-nums; }
@media (max-width: 1023.98px) { .clients { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } }
@media (max-width: 639.98px) { .clients__item { grid-template-columns: 1fr; row-gap: var(--sp-8); } }

/* --- Zahlen-Module (Z): Hero-Zahl + Label, Sekundärzahl + Label ---------- */
.stat { display: grid; row-gap: var(--sp-24); align-content: start; }
.stat--secondary { row-gap: var(--sp-52); }
.stat__value { font-variant-numeric: tabular-nums; }
.duo { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-40); }
@media (max-width: 639.98px) { .duo { grid-template-columns: 1fr; row-gap: var(--sp-52); } }

/* --- Bild-Module (B): rechteckige Flächen, Platzhalter immer --slot ----- */
.slot { background: var(--slot); aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; position: relative; }
.slot img, .slot video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.slot--b2  { --ratio: 720 / 810; }
.slot--b4  { --ratio: 720 / 380; }
.slot--b6  { --ratio: 1720 / 380; }
.slot--b7  { --ratio: 1920 / 455; }
.slot--b8  { --ratio: 385 / 360; }
.slot--b9  { --ratio: 700 / 800; }
.slot--b10 { --ratio: 265 / 520; }
.slot--square { --ratio: 1; }
.bleed { margin-inline: calc(-1 * var(--margin)); }        /* randlos über den Außenrand */
.portrait { filter: grayscale(1); }                         /* Portraits schwarz-weiß */

/* --- Moodboard: fünf Spalten à 323, Abstand 26/24 ---------------------- */
.moodboard { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: clamp(12px, 1.354vw, 26px); align-items: start; }
.moodboard__col { display: grid; row-gap: var(--sp-24); align-content: start; }
.moodboard__col--wide { grid-column: span 2; }
.moodboard__pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-24); }
@media (max-width: 1023.98px) { .moodboard { grid-template-columns: repeat(2, 1fr); } .moodboard__col--wide { grid-column: span 2; } }
@media (max-width: 479.98px)  { .moodboard { grid-template-columns: 1fr; } .moodboard__col--wide { grid-column: auto; } }

/* --- Links, CTA, Button, Feld ---------------------------------------------
   Links ohne Unterstreichung: Auszeichnung über Gewicht (Medium) und ↳. */
.link { font-weight: var(--w-medium); transition: opacity var(--dur-micro); }
.link:hover { opacity: 0.64; }
.cta { display: inline-flex; align-items: center; gap: var(--sp-20); font-weight: var(--w-medium); }
.cta .icon { width: 1.2em; stroke-width: 9; transition: transform var(--dur-micro) var(--ease-out); }
.cta:hover .icon { transform: translate(0.12em, 0.12em); }
.button {
  display: inline-block; padding: 0.75em 1.5em; cursor: pointer;
  background: var(--on-surface); color: var(--surface); font-weight: var(--w-medium);
  transition: opacity var(--dur-micro);
}
.button:hover { opacity: 0.84; }
.button:disabled { opacity: 0.4; cursor: not-allowed; }
.button--quiet { background: var(--field); color: var(--on-surface); }
.field { display: grid; row-gap: var(--sp-8); }
.field__label { font-size: var(--fs-body); font-weight: var(--w-medium); }
.field__input { width: 100%; padding: 0.75em 1em; background: var(--field); color: var(--on-surface); }
.field__input::placeholder { color: var(--on-surface); opacity: 0.48; }
.field__input:focus-visible { outline-offset: 0; }
textarea.field__input { min-height: 8em; resize: vertical; }
.field__hint { font-size: var(--fs-meta); line-height: var(--lh-meta); }

/* --- Code / Spezifikation (nur für die Systemdokumentation) ------------- */
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-meta); line-height: 1.6; background: var(--field); padding: var(--sp-20) var(--sp-24); overflow-x: auto; white-space: pre; }
.spec { font-size: var(--fs-meta); line-height: var(--lh-meta); display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); }

/* --- Farbfeld (Systemdokumentation) -------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-24); }
.swatch { aspect-ratio: 1; background: var(--c); color: var(--on); padding: var(--sp-20); display: grid; align-content: end; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.swatch b { font-weight: var(--w-medium); display: block; }

/* --- Rasterdemo (Systemdokumentation) ----------------------------------- */
.grid-demo > * { background: var(--field); padding: var(--sp-8); font-size: var(--fs-meta); line-height: var(--lh-meta); min-height: 4em; }
.grid-demo > :nth-child(even) { background: color-mix(in srgb, var(--on-surface) 14%, var(--surface)); }