/*
  Designsystem v2 „Werkstatt“ – Design-Tokens
  Stand 02.11.2026 · Besitzer 03 · Vorgabe: build/design/designsystem_v2.md
  Gilt für die Website und das PDF des CV (WeasyPrint). Word übernimmt dieselben Werte aus Abschnitt 2.2 der Vorgabe.
  Schriften werden selbst gehostet bzw. eingebettet; @font-face steht im jeweiligen Stylesheet, nicht hier.
*/

:root {
  /* Farben – dunkler Kopf */
  --ink: #14181E;
  --band: #1D232B;
  --line-dark: #2C333C;
  --frame-dark: #39414B;
  --line-dark-strong: #5A636E;
  --on-dark: #FFFFFF;
  --on-dark-1: #E6EAEE;
  --on-dark-2: #C9D0D7;
  --on-dark-muted: #AEB7C1;
  --on-dark-label: #9AA4AE;

  /* Farben – heller Inhalt */
  --surface: #FFFFFF;
  --text: #1E242C;
  --text-2: #3A434D;
  --muted: #5E6873;
  --rule: #D6DBE0;
  --hairline: #E4E8EC;

  /* Signal: eine Farbe für alles. Alternativen aus dem Entwurf: #5BB7AC, #86A8E7, #E2876A.
     Nie als Schrift auf Weiß (2,2:1), nur auf ink/band oder als Zierfläche. */
  --signal: #E3A13B;

  /* Schriften */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-text: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  /* Website – Schriftgrade */
  --fs-brand: 16px;
  --fs-nav: 13px;
  --fs-kicker: 13px;
  --fs-claim: 52px;
  --fs-claim-fluid: clamp(32px, 7vw, 52px);
  --fs-tail: 20px;
  --fs-name: 22px;
  --fs-role: 15px;
  --fs-button: 15px;
  --fs-fact: 20px;
  --fs-section: 13px;
  --fs-lead: 19px;
  --fs-h3: 26px;
  --fs-h4: 22px;
  --fs-station: 18px;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-quote: 24px;
  --fs-email: 26px;
  --fs-subpage-h1: 32px;
  --fs-subpage-h2: 20px;
  --fs-label: 12px;

  /* Website – Zeilenhöhen */
  --lh-claim: 1.08;
  --lh-tail: 1.55;
  --lh-heading: 1.25;
  --lh-body: 1.6;
  --lh-fact: 1.3;
  --lh-quote: 1.5;

  /* Laufweiten der Mono-Labels und der Marke */
  --ls-kicker: 0.14em;
  --ls-section: 0.12em;
  --ls-fact-label: 0.12em;
  --ls-label: 0.1em;
  --ls-brand: 0.08em;
  --ls-meta: 0.06em;
  --ls-claim: -0.01em;

  /* Website – Maße */
  --content-max: 1200px;
  --gutter: 32px;
  --gutter-s: 20px;
  --section-gap: 72px;
  --block-gap: 36px;
  --grid-col-gap: 56px;
  --grid-min: 460px;
  --label-col: 150px;
  --skills-col: 220px;
  --contact-col: 160px;
  --text-max: 760px;
  --lead-max: 880px;
  --signal-rule: 3px;
  --square: 8px;
  --square-l: 9px;
  --button-h: 46px;
  --portrait-w: 260px;
  --portrait-h: 312px;
  --portrait-w-s: 200px;
  --portrait-h-s: 240px;
  --radius: 0;
  --focus-ring: 2px;

  /* Umbruchpunkte (Hinweis; in Media Queries als feste Werte schreiben) */
  /* 960px: Kopf untereinander, Fakten 2 Spalten · 720px: alles einspaltig, Labels über dem Text · 420px: Fakten 1 Spalte */

  /* CV – PDF über WeasyPrint (Word: gleiche Werte in pt bzw. mm) */
  --cv-margin-x: 15mm;
  --cv-margin-top: 15mm;
  --cv-margin-bottom: 20mm;
  --cv-band-pad-top: 9mm;
  --cv-band-pad-bottom: 7mm;
  --cv-photo-w: 32mm;
  --cv-photo-h: 39mm;
  --cv-photo-gap: 8mm;
  --cv-grid-gap: 9mm;
  --cv-skills-col: 42mm;
  --cv-field-col: 28mm;
  --cv-date-col: 34mm;
  --cv-facts-col: 34mm;
  --cv-fs-kicker: 9pt;
  --cv-fs-name: 27pt;
  --cv-fs-role: 10.5pt;
  --cv-fs-sub: 10pt;
  --cv-fs-statement: 10.5pt;
  --cv-fs-contact: 9pt;
  --cv-fs-fact: 11pt;
  --cv-fs-label: 9pt;
  --cv-fs-tile: 11pt;
  --cv-fs-case: 12pt;
  --cv-fs-body: 10pt;
  --cv-fs-note: 9pt;
  --cv-fs-quote: 10.5pt;
  --cv-lh-body: 14.5pt;
  --cv-signal-rule: 2.25pt;
  --cv-hairline: 0.75pt;
  --cv-square: 6pt;
}

/* tim-oehme.com – Designsystem v2 „Werkstatt" (build/design/designsystem_v2.md, Komponenten K1 bis K15).
   Die Werte stehen in build/design/tokens.css; build.py stellt sie beim Bauen vor dieses Stylesheet.
   Schriften selbst gehostet (assets/fonts, SIL OFL), nichts von fremden Servern. Eckig: keine Rundungen, Schatten,
   Verläufe, Übergänge oder Animationen. */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-latin-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--text);
  font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body);
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-2); }
/* K15 Fokus: auf Weiß Tinte, auf dunklem Grund Signal (Signal auf Weiß hätte nur 2,2:1) */
:focus-visible { outline: var(--focus-ring) solid var(--ink); outline-offset: 2px; }
.kopf :focus-visible, .kontaktbox :focus-visible { outline-color: var(--signal); }
.wrap { max-width: var(--content-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: 8px; z-index: 10; background: var(--signal); color: var(--ink); padding: 8px 14px; font-weight: 600; text-decoration: none; outline: none; }

/* Nur in der Vorschau: Hinweis und offene Stellen, Orange wie im ganzen Repository (FFB547) */
.preview-banner { background: #FFB547; color: #000; font-family: var(--font-mono); font-size: 13px; text-align: center; padding: 6px 12px; }
mark.ph { background: #FFB547; color: #000; padding: 0 3px; }

/* Quadrat: das Statuslicht, gezeichnet (die Schriften haben kein ■) */
.kicker::before, .fakten li:first-child .fakt-label::before, .feld.ergebnis dt::before {
  content: ""; flex: 0 0 auto; width: var(--square); height: var(--square); background: var(--signal);
}

/* K1 Kopf */
.kopf { background: var(--ink); color: var(--on-dark); }
.leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 22px; padding-bottom: 22px; }
.marke, .marke:hover {
  color: var(--on-dark); text-decoration: none;
  font-family: var(--font-display); font-size: var(--fs-brand); font-weight: 700; letter-spacing: var(--ls-brand); text-transform: uppercase;
}
.leiste ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px;
  font-family: var(--font-mono); font-size: var(--fs-nav); letter-spacing: var(--ls-meta); text-transform: uppercase;
}
.leiste ul a { color: var(--on-dark-muted); text-decoration: none; }
.leiste ul a:hover { color: var(--on-dark); }
.leiste ul a.sprache { display: inline-block; color: var(--on-dark); border: 1px solid var(--line-dark-strong); padding: 4px 9px; font-size: 12px; }

.hero { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; padding-top: 48px; padding-bottom: 60px; }
.hero-text { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.kicker {
  display: flex; align-items: center; gap: 10px; color: var(--signal);
  font-family: var(--font-mono); font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase;
}
.kicker::before { width: var(--square-l); height: var(--square-l); }
.claim {
  font-family: var(--font-display); font-size: var(--fs-claim); line-height: var(--lh-claim); font-weight: 700;
  letter-spacing: var(--ls-claim); color: var(--on-dark); text-wrap: balance;
}
.nachsatz { max-width: 700px; font-size: var(--fs-tail); line-height: var(--lh-tail); font-weight: 300; color: var(--on-dark-2); }
.person { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.person h1 { font-family: var(--font-display); font-size: var(--fs-name); line-height: var(--lh-heading); font-weight: 600; color: var(--on-dark); }
.funktion { font-size: var(--fs-role); line-height: 1.5; color: var(--on-dark-2); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.btn { display: inline-flex; align-items: center; min-height: var(--button-h); padding: 0 22px; font-size: var(--fs-button); line-height: 1.3; text-decoration: none; }
.btn-primary, .btn-primary:hover { background: var(--signal); color: var(--ink); font-weight: 600; }
.btn-secondary, .btn-secondary:hover { border: 1px solid var(--line-dark-strong); color: var(--on-dark); font-weight: 500; }
.portrait { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.portrait img { width: var(--portrait-w); height: var(--portrait-h); object-fit: cover; object-position: center top; border: 1px solid var(--frame-dark); }
.portrait figcaption {
  color: var(--on-dark-muted);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}

/* K2 Fakten-Leiste */
.band { background: var(--band); }
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fakten li { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-right: 1px solid var(--line-dark); }
.fakten li:first-child { padding-left: 0; }
.fakten li:last-child { border-right: 0; }
.fakt-label {
  display: flex; align-items: center; gap: 8px; color: var(--on-dark-label);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-fact-label); text-transform: uppercase;
}
.fakt-wert { font-size: var(--fs-fact); line-height: var(--lh-fact); color: var(--on-dark); }

/* Abschnitte; K3 Abschnittslabel „NN / Titel", Nummer per Zähler, damit sie nicht im Text der Überschrift steht */
main { counter-reset: abschnitt; }
.abschnitt { display: flex; flex-direction: column; gap: var(--block-gap); padding-top: var(--section-gap); padding-bottom: 16px; }
.block { display: flex; flex-direction: column; gap: 20px; }
h2.label {
  display: flex; align-items: center; gap: 18px; color: var(--text-2); white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-section); font-weight: 500; letter-spacing: var(--ls-section); text-transform: uppercase;
}
h2.label > span::before { counter-increment: abschnitt; content: counter(abschnitt, decimal-leading-zero) " / "; }
h2.label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); }
h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: 600; color: var(--ink); }
strong { font-weight: 600; color: var(--ink); }
.einstieg { max-width: var(--lead-max); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-2); text-wrap: pretty; }
.text { max-width: var(--text-max); color: var(--text-2); }
.intro { max-width: var(--text-max); color: var(--muted); }

/* K5 Raster 2 × 2 */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr)); gap: var(--block-gap) var(--grid-col-gap); }
.raster article { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: var(--signal-rule) solid var(--signal); }
.raster h4 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.3; font-weight: 600; color: var(--ink); }
.raster p { color: var(--text-2); }

/* K6 Textblöcke: nebeneinander ab 1000 px */
.bloecke { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block-gap) var(--grid-col-gap); }
@media (min-width: 1000px) { .bloecke { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Zwei Stränge gleich gewichtet (Kernbotschaft v2): Amber-Linie wie das Raster, darunter die Verbindung */
.strang { gap: 12px; padding-top: 18px; border-top: var(--signal-rule) solid var(--signal); }
.verbindung { max-width: var(--text-max); color: var(--ink); font-weight: 500; }

/* K7 Kompetenzen */
.kompetenzen { width: 100%; border-collapse: collapse; }
.kompetenzen th {
  width: var(--skills-col); padding: 16px 16px 12px 0; text-align: left; vertical-align: top; font-weight: 400; color: var(--text-2);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.kompetenzen td { padding: 12px 0; color: var(--text-2); }
.kompetenzen tr + tr > * { border-top: 1px solid var(--hairline); }

/* K8 Case */
.case { display: flex; flex-direction: column; gap: 14px; }
.case + .case { padding-top: 28px; border-top: 1px solid var(--hairline); }
.case-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.meta { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-meta); }
.case dl { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.feld { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.feld dt {
  flex: 0 0 var(--label-col); display: flex; align-items: center; gap: 8px; align-self: flex-start; padding-top: 4px; color: var(--muted);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.feld dd { flex: 1 1 420px; min-width: 0; color: var(--text-2); }
.feld.ergebnis dt { color: var(--ink); }
.feld.ergebnis dd { color: var(--ink); font-weight: 600; }

/* K11 Zitat (nur nach B7) */
.zitat { display: flex; flex-direction: column; gap: 14px; }
.zitat blockquote { max-width: 900px; font-size: var(--fs-quote); line-height: var(--lh-quote); font-weight: 300; color: var(--ink); }
.zitat figcaption { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }

/* Kundenstimmen: drei Zitate untereinander, Haarlinie dazwischen */
.stimmen { padding-top: 28px; border-top: 1px solid var(--hairline); }
.stimmen .zitat + .zitat { padding-top: 20px; }

/* Häufige Fragen: Frage als h3, Antwort als Fließtext, Haarlinie dazwischen */
.fragen { display: flex; flex-direction: column; }
.frage { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; }
.frage + .frage { border-top: 1px solid var(--hairline); }

/* K9 Stationen */
.stationen li { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 16px 0; }
.stationen li + li { border-top: 1px solid var(--hairline); }
.stationen time { flex: 0 0 var(--label-col); padding-top: 5px; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-meta); }
.station { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.station .rolle { font-family: var(--font-display); font-size: var(--fs-station); line-height: 1.35; font-weight: 600; color: var(--ink); }
.station p + p { color: var(--text-2); }
.ausbildung { font-size: var(--fs-small); color: var(--muted); }

/* K12 Kontaktbox mit K10 Fakten-Liste */
.kontakt { padding-top: 64px; padding-bottom: 88px; }
.kontaktbox { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 48px; padding: 36px; background: var(--ink); color: var(--on-dark); }
.kontaktbox h2.label { flex: 0 0 var(--contact-col); color: var(--on-dark-muted); white-space: normal; }
.kontaktbox h2.label::after { content: none; }
.kontakt-inhalt { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.kontakt-inhalt .einleitung { font-size: 18px; line-height: 1.55; color: var(--on-dark-1); }
.kontaktbox a { color: var(--on-dark-1); }
.kontaktbox a.mail, .kontaktbox a.mail:hover { font-family: var(--font-display); font-size: var(--fs-email); line-height: 1.3; font-weight: 600; color: var(--signal); overflow-wrap: anywhere; }
.kontaktbox dl { display: flex; flex-direction: column; margin-top: 8px; }
.kontaktbox dl div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 10px 0; border-top: 1px solid var(--line-dark); }
.kontaktbox dt {
  flex: 0 0 var(--contact-col); padding-top: 4px; color: var(--on-dark-label);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.kontaktbox dd { flex: 1 1 260px; min-width: 0; color: var(--on-dark-1); }
.kontaktbox .hinweis { font-size: 14px; color: var(--on-dark-muted); }

/* K13 Fuß */
.fuss { border-top: 1px solid var(--hairline); }
.fuss .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 22px; color: var(--muted);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-meta);
}
.fuss nav { display: flex; gap: 20px; }
.fuss a { color: var(--muted); }

/* K14 Unterseiten: Impressum, Datenschutz, 404 */
.unterseite { padding-top: 48px; padding-bottom: var(--section-gap); }
.unterseite h1 { font-family: var(--font-display); font-size: var(--fs-subpage-h1); line-height: 1.2; font-weight: 600; color: var(--ink); margin-bottom: 24px; }
.unterseite h2 { font-family: var(--font-display); font-size: var(--fs-subpage-h2); line-height: 1.3; font-weight: 600; color: var(--ink); margin: 32px 0 8px; }
.unterseite p { max-width: var(--text-max); color: var(--text-2); margin-bottom: 12px; }

/* Umbrüche: 960 px Kopf untereinander, Fakten zweispaltig · 720 px alles einspaltig, Labels über dem Text · 420 px Fakten einspaltig */
@media (max-width: 959px) {
  .hero { flex-direction: column; }
  .hero-text { flex-basis: auto; }
  .portrait img { width: var(--portrait-w-s); height: var(--portrait-h-s); }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakten li:nth-child(2n) { border-right: 0; }
  .fakten li:nth-child(2n+1) { padding-left: 0; }
  .fakten li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}
@media (max-width: 719px) {
  .wrap { padding-left: var(--gutter-s); padding-right: var(--gutter-s); }
  .claim { font-size: var(--fs-claim-fluid); }
  .feld, .stationen li, .kontaktbox dl div { flex-direction: column; }
  .feld dt, .stationen time, .kontaktbox dt { flex-basis: auto; }
  .feld dd, .station, .kontaktbox dd { flex-basis: auto; }
  .kompetenzen, .kompetenzen tbody, .kompetenzen tr, .kompetenzen th, .kompetenzen td { display: block; width: auto; }
  .kompetenzen th { padding: 12px 0 4px; }
  .kompetenzen td { padding: 0 0 12px; }
  .kompetenzen tr + tr > td { border-top: 0; }
  .kontaktbox { padding: 24px; }
  .kontaktbox h2.label { flex-basis: auto; }
}
@media (max-width: 419px) {
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .fakten li, .fakten li:nth-child(2n+1) { padding: 18px 0; border-right: 0; }
  .fakten li + li { border-top: 1px solid var(--line-dark); }
}