/* =========================================================================
   PMKosova.eu — Stylesheet
   Farbsystem und Regeln nach "PMKosova Webcontent.docx", Abschnitt
   "Dizajni i uebfaqes / Webpage Design".
   Typografie: Manrope (variabel, 400–700), selbst gehostet.
   ========================================================================= */

/* ---------- 0. Schriftart ----------------------------------------------- */
/* Manrope v20 als variable Schrift: EINE Datei je Subset deckt die
   Schnitte 400 / 500 / 600 / 700 ab — keine zusätzlichen Anfragen.
   Selbst gehostet: keine Verbindung zu fonts.gstatic.com, kein CLS durch
   externe CSS-Anfrage, DSGVO-konform.                                     */

/* latin-ext — u. a. osteuropäische Diakritika */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin — enthält ë ç ä ö ü ß für SQ / DE / EN */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* Metrisch angeglichener Ersatz für die Swap-Phase.
   Gemessen: Manrope setzt 2 % breiter als Arial. Mit size-adjust nimmt der
   Ersatzsatz nahezu denselben Raum ein — beim Schriftwechsel entsteht
   dadurch praktisch kein Umbruch und kein Layoutsprung (CLS).            */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Roboto"), local("Helvetica");
  size-adjust: 102%;
  ascent-override: 100%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* ---------- 1. Farbpalette (verbindlich) ------------------------------- */
:root {
  /* Grundpalette */
  --black:        #0B0B0B;   /* Tiefschwarz — dunkler Hintergrund       */
  --white:        #FFFFFF;   /* Weiß                                     */
  --gold-strong:  #B08D2E;   /* Kräftiges Gold — Akzent auf Weiß         */
  --gold-soft:    #D6B56C;   /* Sanftes Gold  — Akzent auf Schwarz       */

  /* Unterstützende Neutraltöne (Farbsystem 19-09-2026) */
  --charcoal:     #1A1A1A;   /* Karten, sekundäre Flächen, Hover (dunkel) */
  --warm-ivory:   #F6F3EC;   /* Alternativer heller Hintergrund           */
  --sand-grey:    #E7E1D5;   /* Trennlinien, Kartenränder, Tabellen       */
  --warm-grey:    #A8A29A;   /* Metadaten, Datumsangaben, Labels          */

  /* Abgedunkeltes Warm Grey für Fließtext auf Weiß.
     #A8A29A erreicht auf Weiß nur 2,5:1 und verfehlt damit WCAG AA (4,5:1)
     deutlich. Der Ton bleibt warm, wird aber lesbar (5,4:1). #A8A29A bleibt
     für Metadaten auf dunklem Grund und für dekorative Zwecke erhalten.   */
  --warm-grey-ink: #6E6A62;

  /* Abgedunkeltes Dark Gold für KLEINE funktionale Texte auf hellem Grund
     (Links, Labels, Abschnittsmarken). #B08D2E erreicht auf Weiß nur
     3,14:1 — das genügt für große Überschriften (≥ 3:1), nicht aber für
     Fließtextgrößen (4,5:1). #856A22 erreicht 5,14:1 auf Weiß und 4,64:1
     auf Warm Ivory. Überschriften und Linien behalten #B08D2E.           */
  --gold-ink: #856A22;

  /* Alte Namen als Aliasse, damit bestehende Regeln weiter greifen */
  --grey-dark:    var(--charcoal);
  --grey-mid:     var(--warm-grey-ink);
  --grey-light:   var(--sand-grey);
  --off-white:    var(--warm-ivory);

  /* Nur für Diagramme, Dashboards und analytische Visualisierungen.
     Ausdrücklich NICHT für Logo, Navigation, Überschriften, CTAs oder
     dekorative Markenelemente verwenden.                                  */
  --viz-gold-dark:  #B08D2E;
  --viz-gold-soft:  #D6B56C;
  --viz-slate-blue: #40566A;
  --viz-sage:       #687866;
  --viz-burgundy:   #6E3038;
  --viz-neutral:    #A8A29A;

  /* ---- Typografie -------------------------------------------------------
     Eine einzige Schriftfamilie für die gesamte Seite. Die frühere
     Kombination aus Serifen-Display-Schrift (Iowan/Palatino/Georgia) und
     System-Sans-Schrift ist ersatzlos entfallen — ebenso die Variablen
     --font-display und --font-body.                                      */
  --font:         "Manrope", "Manrope Fallback", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fließende Größenstufen — skalieren stufenlos von Mobil bis Desktop.
     Zielwerte laut Typografievorgabe (Mobil → Desktop):                   */
  --fs-hero:      clamp(2.75rem, 1.15rem + 6.8vw, 7rem);      /* 44 → 112  */
  --fs-h1:        clamp(2.375rem, 1.7rem + 3.4vw, 4rem);      /* 38 → 64   */
  --fs-h2:        clamp(2.125rem, 1.4rem + 2.6vw, 4rem);      /* 34 → 64   */
  --fs-h3:        clamp(1.375rem, 1.15rem + 0.8vw, 2.125rem); /* 22 → 34   */
  --fs-body:      clamp(1rem, 0.955rem + 0.19vw, 1.125rem);   /* 16 → 18   */
  --fs-lead:      clamp(1.0625rem, 0.97rem + 0.42vw, 1.375rem);/* 17 → 22  */
  --fs-nav:       clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);/* 14 → 15   */
  --fs-btn:       clamp(0.875rem, 0.83rem + 0.19vw, 1rem);    /* 14 → 16   */
  --fs-label:     clamp(0.6875rem, 0.65rem + 0.16vw, 0.8125rem);/* 11 → 13 */
  --fs-meta:      clamp(0.8125rem, 0.79rem + 0.13vw, 0.9375rem);/* 13 → 15 */
  --fs-card:      clamp(1.375rem, 1.16rem + 0.75vw, 1.875rem);/* 22 → 30   */
  --fs-stat:      clamp(2.625rem, 1.6rem + 3.9vw, 5rem);      /* 42 → 80   */
  --fs-legal:     clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); /* 12 → 13   */

  /* Laufweite — Manrope läuft von Haus aus weit; große Grade brauchen
     eine deutliche negative Laufweite, damit sie ruhig wirken.            */
  --ls-hero:      -0.035em;
  --ls-h1:        -0.03em;
  --ls-h2:        -0.025em;
  --ls-h3:        -0.015em;
  --ls-body:      -0.004em;
  --ls-nav:       -0.01em;
  --ls-label:     0.12em;
  --ls-stat:      -0.03em;

  /* Raster */
  --max:          1180px;
  --max-text:     68ch;      /* ≈ 65–75 Zeichen je Zeile                   */
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --band-y:       clamp(4rem, 8.5vw, 8rem);
  --radius:       2px;

  /* Modusabhängige Variablen — Standard: Modus A (dunkel) */
  --bg:           var(--black);
  --fg:           var(--white);
  --fg-muted:     rgba(255, 255, 255, 0.76);
  --fg-faint:     rgba(255, 255, 255, 0.58);
  --heading:      var(--white);
  --accent:       var(--gold-soft);
  --accent-2:     var(--gold-strong);
  --rule:         rgba(214, 181, 108, 0.26);
  --rule-strong:  var(--gold-soft);
  --surface:      var(--grey-dark);
  --surface-line: rgba(255, 255, 255, 0.10);
  --shadow-lift:  0 8px 20px rgba(0, 0, 0, 0.38);
}

/* Modus A — dunkler Hintergrund
   Startseite, Einstiegsseiten, Übersichten, identitätsstiftende Bereiche */
.band--dark {
  --bg:           var(--black);
  --fg:           var(--white);
  --fg-muted:     rgba(255, 255, 255, 0.76);
  --fg-faint:     rgba(255, 255, 255, 0.58);
  --heading:      var(--white);
  --accent:       var(--gold-soft);
  --accent-2:     var(--gold-strong);
  --rule:         rgba(214, 181, 108, 0.26);
  --rule-strong:  var(--gold-soft);
  --surface:      var(--grey-dark);
  --surface-line: rgba(255, 255, 255, 0.10);
  --shadow-lift:  0 8px 20px rgba(0, 0, 0, 0.38);
}

/* Modus B — weißer Hintergrund
   Analysen, Artikel, Publikationen, methodische Hinweise, lange Texte */
.band--light,
.band--soft {
  --bg:           var(--white);
  --fg:           var(--black);
  --fg-muted:     var(--grey-mid);
  --fg-faint:     var(--grey-mid);
  --heading:      var(--gold-strong);   /* große Grade — 3,14:1 reicht    */
  --accent:       var(--gold-ink);      /* kleine Texte — AA-konform       */
  --accent-2:     var(--gold-soft);
  --rule:         var(--grey-light);
  /* Auf Weiß trägt das kräftige Gold Überschriften UND Trennlinien.
     Das sanfte Gold bleibt den dunklen Flächen vorbehalten. Linien sind
     kein Text und unterliegen keiner Kontrastanforderung.                */
  --rule-strong:  var(--gold-strong);
  --surface:      var(--off-white);
  --surface-line: var(--grey-light);
  --shadow-lift:  0 8px 18px rgba(11, 11, 11, 0.07);
}
/* Warm Ivory ist dunkler als Weiß: #B08D2E fällt dort auf 2,83:1 und
   verfehlt selbst die 3:1-Grenze für große Schrift. Auf dieser Fläche
   deshalb ein minimal tieferes Gold (3,56:1). Auf Weiß bleibt #B08D2E.  */
.band--soft {
  --bg: var(--off-white);
  --surface: var(--white);
  --heading: #9C7C28;
}

/* Variante von Modus A für die Abgrenzung aufeinanderfolgender
   dunkler Abschnitte (Dunkelgrau #1A1A1A als erhöhte Fläche). */
.band--dark-alt {
  --bg:           var(--grey-dark);
  --fg:           var(--white);
  --fg-muted:     rgba(255, 255, 255, 0.76);
  --fg-faint:     rgba(255, 255, 255, 0.58);
  --heading:      var(--white);
  --accent:       var(--gold-soft);
  --accent-2:     var(--gold-strong);
  --rule:         rgba(214, 181, 108, 0.22);
  --rule-strong:  var(--gold-soft);
  --surface:      var(--black);
  --surface-line: rgba(255, 255, 255, 0.10);
  --shadow-lift:  0 8px 20px rgba(0, 0, 0, 0.45);
}
.band--dark-alt .btn:hover {
  background: var(--gold-soft); color: var(--black); border-color: var(--gold-soft);
}
.band--dark-alt .btn--solid:hover { background: transparent; color: var(--gold-soft); }
.band--dark-alt .card__title,
.band--dark-alt .numbered h3,
.band--dark-alt .topic__title { color: var(--white); }

/* ---------- 2. Grundlagen ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: var(--ls-body);
  font-synthesis-weight: none;   /* keine künstlich fett gerechneten Schnitte */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* ---- Überschriften ------------------------------------------------------
   Bewusst zurückhaltende Strichstärken: 500 für die großen Grade, 600 erst
   ab H3. Große Grade mit 700 wirken plakativ statt architektonisch.       */
h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--heading);
  margin: 0 0 .55em;
  text-wrap: balance;
  /* Lange deutsche Komposita („Handlungsaufforderung",
     „Spezialisierungsbereiche") sprengen sonst auf schmalen Displays den
     Container. hyphens greift auf die Sprachmuster von <html lang> zu,
     die per Sprachumschalter mitgesetzt wird.                            */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: var(--ls-h1);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: var(--ls-h2);
  margin-bottom: .5em;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
}
h4 {
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

p { margin: 0 0 1.15em; max-width: var(--max-text); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .22em; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold-strong); color: var(--black);
  padding: .75rem 1.25rem;
  font-family: var(--font); font-size: var(--fs-nav); font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout --------------------------------------------------- */
.band {
  background: var(--bg);
  color: var(--fg);
  padding: var(--band-y) 0;
}
.band--flush { padding: 0; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--max-text) + 2 * var(--gutter)); }

.measure { max-width: var(--max-text); }

/* Abschnittsmarke / Eyebrow: Nummer bzw. Kurzlabel mit goldener Linie.
   Technisch-architektonische Anmutung durch kleine Versalien und weite
   Laufweite — bewusst der einzige Ort mit positiver Laufweite.           */
.kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.6rem;
  max-width: none;
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--fg-muted);
  max-width: 62ch;
}
.band--light .lead, .band--soft .lead { color: var(--grey-mid); }

.note {
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0;
  color: var(--fg-muted);
  border-left: 2px solid var(--rule-strong);
  padding-left: 1.15rem;
  margin-top: 1.6rem;
}

.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: clamp(2.5rem, 5vw, 4rem) 0;
}

/* ---------- 4. Kopfzeile / Navigation ----------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 1px solid rgba(214, 181, 108, 0.22);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

/* Wortmarke — halbfett, eng laufend, damit sie als Zeichen wirkt */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .05rem;
  font-family: var(--font);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand b { font-weight: 600; }
.brand span { color: var(--gold-soft); font-weight: 500; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.9rem);
  list-style: none;
  margin: 0; padding: 0;
}
/* Navigation: Medium, keine Versalien, ruhige Laufweite */
.nav__link {
  display: inline-block;
  padding: .4rem 0;
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-nav);
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid transparent;
}
.nav__link:hover { color: var(--white); text-decoration: none; border-bottom-color: var(--gold-soft); }
.nav__link[aria-current="page"] { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }

/* Sprachumschalter */
.lang {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-left: clamp(.6rem, 1.5vw, 1.4rem);
  padding-left: clamp(.6rem, 1.5vw, 1.4rem);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.lang__btn {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  padding: .35rem .5rem;
  cursor: pointer;
  border-radius: var(--radius);
}
.lang__btn:hover { color: var(--white); }
.lang__btn[aria-pressed="true"] { color: var(--gold-soft); border-color: rgba(214, 181, 108, 0.55); }

/* Menü-Umschalter (mobil) */
.nav-toggle {
  display: none;
  margin-left: auto;
  appearance: none;
  background: none;
  border: 1px solid rgba(214, 181, 108, 0.5);
  color: var(--gold-soft);
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: .55rem .9rem;
  cursor: pointer;
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: .5rem 0 1rem;
  }
  .site-header__inner { flex-wrap: wrap; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav__link { display: block; width: 100%; padding: .7rem 0; }
  .lang { margin-left: auto; padding-left: 0; border-left: 0; }
  .nav-toggle { margin-left: .6rem; }
}

/* ---------- 5. Hero ------------------------------------------------------ */
/* Bildschirmfüllender Hero: füllt genau die sichtbare Fläche unterhalb der
   Kopfzeile (72 px). svh statt vh, damit auf Mobilgeräten die ein- und
   ausblendende Browserleiste die Höhe nicht springen lässt.             */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 73 px = 72 px Mindesthöhe der Kopfzeile + 1 px Trennlinie */
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(3.25rem, 6vw, 5.5rem);
}
.hero > .wrap { width: 100%; position: relative; z-index: 1; }

/* Weich auslaufender schwarzer Balken hinter dem Hero-Text.
   Liegt nur hinter dem Textblock, nicht über dem ganzen Hero, und
   verschwindet nach rechts sowie nach oben und unten. 30 % Deckkraft —
   genug, um die Linien hinter der Schrift zu beruhigen, ohne die
   Silhouette zu verdecken.                                             */
.hero > .wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -2.5rem;
  bottom: -2.5rem;
  left: calc(var(--gutter) * -1 - 3rem);
  right: 16%;
  background: linear-gradient(to right,
    rgba(11, 11, 11, 0.30) 0%,
    rgba(11, 11, 11, 0.30) 58%,
    rgba(11, 11, 11, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
/* Schmale Geräte: Der Text nimmt die volle Breite ein, der Balken
   reicht entsprechend weiter nach rechts.                              */
@media (max-width: 860px) {
  .hero > .wrap::before {
    right: calc(var(--gutter) * -1 - 1rem);
    background: linear-gradient(to right,
      rgba(11, 11, 11, 0.30) 0%,
      rgba(11, 11, 11, 0.30) 78%,
      rgba(11, 11, 11, 0) 100%);
  }
}
/* Die Schlagzeile läuft über die volle Breite. Bei den geforderten Graden
   (bis 112 px) reicht eine Spalte nicht aus — der Satz bräche sonst in
   sehr viele kurze Zeilen um. Bausteine und Bild bleiben unverändert.    */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
}
.hero__title {
  color: var(--white);
  font-size: var(--fs-hero);
  font-weight: 500;
  /* 1.0 statt 0.95: bei mehrzeiligen deutschen Schlagzeilen kämen sonst
     Umlautpunkte und Oberlängen der Folgezeile einander zu nahe.        */
  line-height: 1.0;
  letter-spacing: var(--ls-hero);
  margin: 0 0 clamp(2.25rem, 4vw, 3.25rem);
  max-width: 17ch;               /* verhindert überlange Schlagzeilenzeilen */
  text-wrap: balance;
  /* Sicherheitsnetz: sehr lange deutsche Komposita dürfen den Container
     nicht sprengen, sondern werden notfalls getrennt.                    */
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero__title em {
  font-style: normal;
  color: var(--gold-soft);
}
/* Eyebrow unter der Schlagzeile */
.hero__tagline {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(214, 181, 108, 0.3);
  line-height: 1.85;
  max-width: none;
}
.hero__intro {
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* Prishtina-Silhouette als Grund des Hero.
   Unten verankert und über die volle Breite, damit die Skyline seitlich
   nicht beschnitten wird. Der schwarze Himmel oben wird vom overflow des
   Hero abgeschnitten — die erkennbare Stadtsilhouette bleibt vollständig.
   „lighten" blendet den schwarzen Bildgrund nahtlos in die Fläche ein,
   die Maske löst das Bild nach oben hin auf, sodass der Text frei steht. */
/* Die Illustration füllt den gesamten Hero.
   object-position 38 % schiebt das Bild so weit nach unten, dass die
   Hügelkette und der Horizont im Bild stehen — nicht nur der dichte
   Vordergrund. Beschnitten wird dadurch unten, wo ohnehin nur Stadt ist. */
.hero__skyline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
  /* Deckkraft ist kontrastgeprüft, siehe README.                        */
  opacity: .38;
  mix-blend-mode: lighten;
  pointer-events: none;
  user-select: none;
  /* Nur ein schmaler Verlauf an Ober- und Unterkante, damit das Bild in
     Kopfzeile und Folgeabschnitt übergeht. Der Horizont bleibt frei.    */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 88%, transparent 100%);
}
/* Inhalt liegt über der Illustration */
.hero > .wrap { position: relative; z-index: 1; }

/* Auf schmalen Geräten tritt die Silhouette weiter zurück. Sie bleibt
   sichtbar, weil sie im bildschirmfüllenden Hero das tragende Bildmotiv
   ist; beschnitten wird dort seitlich, der Horizont bleibt im Bild.     */
@media (max-width: 860px) { .hero__skyline { opacity: .30; } }
@media (max-width: 520px) { .hero__skyline { opacity: .24; } }

@media (prefers-reduced-motion: no-preference) {
  .hero__skyline { transition: opacity .4s ease; }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.5rem; }

/* Goldene Linienillustration auf schwarzem Grund.
   Die PNG-Dateien haben schwarzen Hintergrund; "lighten" blendet ihn
   sauber in die Seitenfläche ein, ohne Kanten. */
.artwork {
  mix-blend-mode: lighten;
  opacity: .95;
  filter: saturate(0.92);
}
.hero__art { justify-self: center; max-width: 380px; width: 100%; }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero__art { max-width: 260px; justify-self: start; }
  .hero__title { max-width: 14ch; }
}

/* Dekoratives Motiv „Hyjnesha në Fron" als Hintergrundakzent */
.motif {
  position: absolute;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: lighten;
  opacity: .16;
}
.motif--right { right: -3rem; bottom: -6rem; width: min(30vw, 340px); }
@media (max-width: 900px) { .motif { display: none; } }

/* ---------- 6. Schaltflächen -------------------------------------------- */
/* Schaltflächen: Versalien bleiben Teil des bestehenden Systems, die
   Laufweite wird dafür leicht geöffnet. SemiBold statt Bold.            */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1rem 1.85rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { text-decoration: none; }

.band--dark .btn:hover, .hero .btn:hover {
  background: var(--gold-soft); color: var(--black); border-color: var(--gold-soft);
}
.band--light .btn:hover, .band--soft .btn:hover {
  background: var(--gold-strong); color: var(--white); border-color: var(--gold-strong);
}

.btn--solid {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--black);
}
.band--dark .btn--solid:hover, .hero .btn--solid:hover {
  background: transparent; color: var(--gold-soft);
}
.band--light .btn--solid, .band--soft .btn--solid {
  background: var(--gold-strong); border-color: var(--gold-strong); color: var(--white);
}
.band--light .btn--solid:hover, .band--soft .btn--solid:hover {
  background: transparent; color: var(--gold-strong);
}

.btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.btn--ghost:hover { border-color: var(--gold-soft); background: transparent; color: var(--gold-soft); }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}
.arrow-link::after { content: "\2192"; transition: transform .18s ease; }
.arrow-link:hover { text-decoration: none; }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- 7. Karten und Raster ---------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  transition: border-color .18s ease, transform .18s ease;
  height: 100%;
}
.card:where(a):hover { text-decoration: none; }
a.card:hover, .card--hover:hover { border-color: var(--rule-strong); transform: translateY(-2px); }

/* Karten — Titel in Medium/SemiBold, Metadaten deutlich leichter */
.card__num {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 1rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.card__title {
  font-family: var(--font);
  font-size: var(--fs-card);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: var(--ls-h3);
  color: var(--fg);
  margin: 0 0 .7rem;
  text-wrap: balance;
}
.band--light .card__title, .band--soft .card__title { color: var(--black); }
.card__text {
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0;
}

.card__badge {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .3rem .65rem;
}

/* Kompetenzliste — ohne Nummerierung, nur durch feine Linien getrennt */
.numbered { list-style: none; margin: 0; padding: 0; }
.numbered > li {
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}
.numbered > li:last-child { border-bottom: 1px solid var(--rule); }
.numbered h3 {
  margin: 0 0 .5rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  color: var(--fg);
}
.band--light .numbered h3, .band--soft .numbered h3 { color: var(--black); }
.numbered p { margin: 0; color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.65; }

/* Aufzählungen mit goldenem Marker */
.ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .7rem;
  max-width: var(--max-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-muted);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: .5rem; height: 1px;
  background: var(--rule-strong);
}
.ticks li:last-child { margin-bottom: 0; }

/* Fachgebiete als schlichte Liste */
.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
/* Auch Fließtextbausteine mit langen Fachbegriffen absichern */
.pill-list li, .timeline__text, .card__text, .ticks li, .topic__body p, .lead {
  overflow-wrap: break-word;
  hyphens: auto;
}

.pill-list li {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .7rem 1.1rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg);
}

/* ---------- 8. Tätigkeitsbereiche --------------------------------------- */
.area { padding-top: clamp(3rem, 6vw, 5rem); }
.area + .area { border-top: 1px solid var(--rule); margin-top: clamp(3rem, 6vw, 5rem); }
.area__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.area__title { color: var(--heading); max-width: 20ch; }

.topic {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(.75rem, 3vw, 2.75rem);
}
.topic:first-of-type { border-top: 1px solid var(--rule-strong); }
.topic__title {
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
.band--light .topic__title, .band--soft .topic__title { color: var(--black); }
.topic__body p {
  color: var(--fg-muted);
  font-size: var(--fs-body);
  line-height: 1.65;
  /* Kein margin hier: Die Abstände regelt der Fluss weiter unten. Ein
     margin an dieser Stelle hätte höhere Spezifität und würde ihn
     aushebeln — genau das war die Ursache der zu engen Abstände.        */
}
/* Einheitlicher vertikaler Rhythmus innerhalb eines Themenblocks.
   Zuvor setzte die Regel darüber alle Abstände auf 0, wodurch Listen
   direkt an den folgenden Absatz oder Hinweis stießen. Die Abstufung
   gilt gleichermaßen für Absatz→Liste, Liste→Absatz, Liste→Hinweis und
   Absatz→Hinweis. Nur auf der Expertise-Seite wirksam.                  */
.topic__body > * { margin-top: 0; margin-bottom: 0; }
.topic__body > * + * { margin-top: 1.75rem; }   /* 28 px */
/* minmax(0, 1fr) statt 1fr: „1fr" hat als Untergrenze min-content, wodurch
   lange deutsche Komposita die Spalte über den Container hinaus dehnen.  */
@media (max-width: 760px) { .topic { grid-template-columns: minmax(0, 1fr); gap: .75rem; } }

/* Ankernavigation für Tätigkeitsbereiche */
.anchor-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.anchor-nav a {
  font-family: var(--font);
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-nav);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .6rem 1.05rem;
  color: var(--fg);
}
.anchor-nav a:hover { border-color: var(--rule-strong); color: var(--accent); text-decoration: none; }

/* ---------- 9. Erfahrung — Zeitleiste ----------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(.5rem, 2.5vw, 2rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
/* Jahresangaben: Ziffern mit fester Breite, leichte Strichstärke und enge
   Laufweite — elegant statt schwer (siehe Regelwerk für Zahlensatz).     */
.timeline__period {
  font-family: var(--font);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.4;
  color: var(--accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timeline__text {
  color: var(--fg);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.008em;
  max-width: var(--max-text);
}
@media (max-width: 700px) {
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .timeline__period { white-space: normal; }
}

/* ---- Kennzahlen ---------------------------------------------------------
   Bestandteil des Typografiesystems für spätere Kennzahlenblöcke
   (z. B. „25+ Jahre Erfahrung"). Wird derzeit auf keiner Seite verwendet. */
.stat__value {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-stat);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-stat);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent);
}
.stat__label {
  display: block;
  margin-top: .85rem;
  font-family: var(--font);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--fg-muted);
}

/* ---------- 10. Kontaktformular ----------------------------------------- */
.form { display: grid; gap: 1.1rem; margin-top: 2.25rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field input, .field textarea {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  width: 100%;
}
.band--light .field input, .band--light .field textarea,
.band--soft .field input, .band--soft .field textarea {
  background: var(--white);
  border-color: var(--grey-light);
}
.field input:focus, .field textarea:focus { border-color: var(--rule-strong); outline: none; }
.field textarea { min-height: 9rem; resize: vertical; }
.form__note { font-size: var(--fs-meta); color: var(--fg-muted); margin: 0; }

.contact-direct {
  display: inline-flex;
  align-items: baseline;
  gap: .85rem;
  margin-top: 1.75rem;
  font-family: var(--font);
  font-size: clamp(1.25rem, 1.05rem + .95vw, 1.875rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--accent);
}
.contact-direct small {
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- 11. Fußzeile ------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.66);
  border-top: 1px solid rgba(214, 181, 108, 0.25);
  padding: clamp(3.5rem, 6.5vw, 5rem) 0 2rem;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.site-footer h4 {
  color: var(--gold-soft);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin: 0 0 1.15rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
/* Fußzeilennavigation: 14–15 px, Medium */
.site-footer li a {
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: var(--ls-nav);
}
.site-footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover { color: var(--gold-soft); }
.site-footer__brand {
  font-family: var(--font);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}
.site-footer__brand span { color: var(--gold-soft); font-weight: 500; }
.site-footer__tagline {
  margin-top: .9rem;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.site-footer__bottom {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--fs-legal);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.45);
}

/* Ersteller-Angabe — bewusst so zurückhaltend wie der Copyright-Hinweis */
.site-footer__credit a {
  color: rgba(255, 255, 255, 0.62);
  border-bottom: 1px solid rgba(214, 181, 108, 0.35);
}
.site-footer__credit a:hover {
  color: var(--gold-soft);
  border-bottom-color: var(--gold-soft);
  text-decoration: none;
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 12. Seiten-Kopfbereich (Unterseiten) ------------------------- */
.page-head {
  position: relative;
  background: var(--black);
  color: var(--white);
  padding: clamp(4rem, 7.5vw, 7rem) 0 clamp(3.25rem, 5.5vw, 5rem);
  overflow: hidden;
}
.page-head h1 { color: var(--white); max-width: 18ch; margin-bottom: .45em; }
.page-head .lead { color: rgba(255, 255, 255, 0.7); max-width: 62ch; }
.page-head .kicker { color: var(--gold-soft); }
.page-head .kicker::after { background: rgba(214, 181, 108, 0.35); }

/* ---------- 13. Zwei-Spalten-Textblock ---------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}
.split + .split {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule);
}
/* Blocküberschriften eine Stufe unter H2 — sonst dominieren sie die Seite */
.split__title {
  margin: 0;
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
@media (max-width: 800px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 14. Porträt-Abschnitt --------------------------------------- */
.portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.portrait__img { max-width: 520px; width: 100%; justify-self: center; }
@media (max-width: 820px) { .portrait { grid-template-columns: minmax(0, 1fr); } }

/* Echtes Porträtfoto (About). Das Bild ist auf weißem Grund freigestellt
   und steht deshalb im hellen Modus — auf Schwarz ergäbe es einen Kasten. */
.portrait--photo {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  align-items: center;
}
.portrait__photo {
  width: 100%;
  max-width: 340px;
  justify-self: start;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
}
@media (max-width: 820px) {
  .portrait--photo { grid-template-columns: minmax(0, 1fr); }
  .portrait__photo { max-width: 240px; }
}

/* ---------- 15. Hilfsklassen --------------------------------------------- */
.stack-sm > * + * { margin-top: 1rem; }
.stack   > * + * { margin-top: 1.75rem; }
.mt-lg { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.mt-md { margin-top: 1.75rem; }
.center { text-align: center; }
.center .kicker { justify-content: center; }
.center .measure, .center p, .center .lead { margin-inline: auto; }
.center h2 { margin-inline: auto; max-width: 18ch; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 16. Personenkennung (Hero / Seitenkopf) --------------------- */
.identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.1rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(214, 181, 108, 0.28);
  max-width: none;
}
.identity__name {
  font-family: var(--font);
  font-size: clamp(1.25rem, 1.05rem + .85vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--white);
}
.identity__role {
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--gold-soft);
  max-width: 44ch;
}
.band--light .identity, .band--soft .identity { border-bottom-color: var(--grey-light); }
.band--light .identity__name, .band--soft .identity__name { color: var(--black); }
.band--light .identity__role, .band--soft .identity__role { color: var(--gold-strong); }

/* ---------- 17. Projekt- und Erfahrungskarten --------------------------- */
.projects {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.project {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-left: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  height: 100%;
}
.project__period {
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: 0 0 .85rem;
  max-width: none;
}
.project__title {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: var(--ls-h3);
  color: var(--fg);
  margin: 0 0 .7rem;
}
.band--light .project__title, .band--soft .project__title { color: var(--black); }
.project__summary {
  font-size: var(--fs-meta);
  line-height: 1.62;
  color: var(--fg-muted);
  margin: 0;
}

/* Ausführliche Darstellung auf der Erfahrungsseite */
.projects--detailed { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

/* Faktenliste — zeigt nur gepflegte Felder */
.factlist { margin: 1.35rem 0 0; padding: 1.15rem 0 0; border-top: 1px solid var(--rule); }
.factlist__row {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: .35rem 1rem;
  padding: .4rem 0;
}
.factlist dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0;
}
.factlist dd {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--fg);
}
.factlist__note { color: var(--fg-muted); }
@media (max-width: 560px) { .factlist__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 18. Si punoj / How I Work ------------------------------------
   Vier Grundsätze, gleichrangig nebeneinander. Bewusst ohne Nummern.     */
.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.principle {
  border-top: 2px solid var(--rule-strong);
  padding-top: 1.25rem;
}
.principle__title {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--ls-h3);
  color: var(--fg);
  margin: 0 0 .6rem;
}
.band--light .principle__title, .band--soft .principle__title { color: var(--black); }
.principle__text {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.62;
  color: var(--fg-muted);
}

/* ---------- 19. Beitragskarten (Wissenszentrum 5.1) ---------------------
   Desktop drei, Tablet zwei, Telefon eine Karte je Reihe. Gleich hohe
   Karten, Schaltflächen bündig am unteren Rand.                          */
.articles {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) { .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .articles { grid-template-columns: minmax(0, 1fr); } }

.article {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
}
.article__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  border-bottom: 1px solid var(--surface-line);
}
.article__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .85rem;
  margin: 0 0 .75rem;
  max-width: none;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.article__category { color: var(--accent); }
.article__meta time {
  color: var(--fg-faint);
  font-weight: 500;
  letter-spacing: .06em;
}
.article__title {
  font-size: clamp(1.0625rem, .98rem + .45vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--ls-h3);
  color: var(--fg);
  margin: 0 0 .7rem;
  text-wrap: balance;
}
.band--light .article__title, .band--soft .article__title { color: var(--black); }
.article__text {
  font-size: var(--fs-meta);
  line-height: 1.62;
  color: var(--fg-muted);
  margin: 0 0 1.35rem;
  max-width: none;
}
/* Fuß bündig unten, damit die Schaltflächen auf einer Linie liegen */
.article__foot { margin-top: auto; }

/* Übersetzungshinweis — kleiner als der Beitragstext (Vorgabe) */
.article__notice {
  margin: .9rem 0 0;
  max-width: none;
  font-size: var(--fs-legal);
  line-height: 1.55;
  color: var(--fg-faint);
}
.article__help { margin-top: .45rem; }
.article__help summary {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  cursor: pointer;
  font-size: var(--fs-legal);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  list-style: none;
}
.article__help summary::-webkit-details-marker { display: none; }
.article__help summary::before {
  content: "\24D8";              /* kleines Info-Zeichen */
  font-size: 1em;
}
.article__help summary:hover { text-decoration: underline; text-underline-offset: .22em; }
.article__help[open] summary { margin-bottom: .5rem; }
.article__help p {
  margin: 0;
  max-width: none;
  font-size: var(--fs-legal);
  line-height: 1.6;
  color: var(--fg-muted);
  border-left: 1px solid var(--rule);
  padding-left: .85rem;
}

/* Kompakte Schaltfläche für die Karten */
.btn--small {
  padding: .7rem 1.15rem;
  font-size: var(--fs-label);
  letter-spacing: .08em;
}

/* ---------- 20. Abschnittsindex und Nebenblöcke (Expertise) -------------- */
.anchor-nav a.is-active {
  border-color: var(--rule-strong);
  color: var(--accent);
}

/* Klebender Index auf breiten Fenstern */
.section-index {
  position: sticky;
  top: 88px;
  z-index: 5;
  background: var(--bg);
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1rem, 2vw, 2rem);
}
.section-index .anchor-nav { margin-top: 0; }
@media (max-width: 760px) { .section-index { position: static; } }

.area__aside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.typical, .related {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.typical__title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}
.typical__list { list-style: none; margin: 0; padding: 0; }
.typical__list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .5rem;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--fg-muted);
}
.typical__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: .4rem; height: 1px;
  background: var(--rule-strong);
}
.typical__list li:last-child { margin-bottom: 0; }
.related__period { color: var(--fg-faint); white-space: nowrap; }

/* ---------- 20. Kontaktseite und Formularmeldungen ---------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-grid .factlist { border-top: 0; margin-top: 0; padding-top: 0; }

.field--invalid input, .field--invalid textarea { border-color: #B3261E; }
.field__error {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #B3261E;
}
.form__status {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 500;
  min-height: 1.5em;
}
.form__status--error { color: #B3261E; }
.form__status--ok { color: var(--accent); }
.form__status--pending { color: var(--fg-muted); }

/* reCAPTCHA-Widget. Leer, solange es noch nicht geladen ist — daher keine
   Mindesthöhe, damit vor der ersten Eingabe keine Lücke entsteht.       */
.recaptcha:empty { display: none; }
.recaptcha { max-width: 100%; }

.form__privacy a {
  color: var(--accent);
  white-space: nowrap;
}
button[type="submit"]:disabled { opacity: .6; cursor: progress; }
.form__privacy {
  margin: 0;
  font-size: var(--fs-legal);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 62ch;
}

.cv {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.cv__title { margin: 0 0 .6rem; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-h3); color: var(--fg); }
.band--light .cv__title, .band--soft .cv__title { color: var(--black); }

.pill-list__meta { color: var(--fg-muted); font-weight: 400; }

/* ---------- 21. Bewegung: Karten ----------------------------------------
   Zwei zurückhaltende Effekte. Die Vergrößerung bleibt bewusst unter 2 %:
   Alles darüber wirkt unruhig und macht den Text beim Skalieren weich.   */

/* Beim Überfahren — nur bei echten Zeigegeräten, nicht auf Touch */
.project, .article, .card--hover {
  transition: transform .34s cubic-bezier(.22, .61, .24, 1),
              box-shadow .34s cubic-bezier(.22, .61, .24, 1),
              border-color .34s ease;
}
@media (hover: hover) and (pointer: fine) {
  .project:hover, .article:hover, .card--hover:hover {
    transform: scale(1.015);
    box-shadow: var(--shadow-lift);
    border-color: var(--rule-strong);
    position: relative;
    z-index: 1;
  }
}

/* Beim Einscrollen — die Klasse .js-reveal setzt erst das Skript.
   Ohne JavaScript bleibt damit alles sichtbar.                           */
.js-reveal .reveal {
  opacity: 0;
  transform: scale(.985) translateY(14px);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s cubic-bezier(.22, .61, .24, 1),
              transform .62s cubic-bezier(.22, .61, .24, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Wer weniger Bewegung wünscht, bekommt gar keine */
@media (prefers-reduced-motion: reduce) {
  .project, .article, .card--hover { transition: none; }
  .project:hover, .article:hover, .card--hover:hover { transform: none; box-shadow: none; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal.is-in { transition: none; transition-delay: 0ms; }
}

/* ---------- 22. Druck ---------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .lang, .motif, .btn { display: none !important; }
  body, .band { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; }
}