/* ============================================================
   Robin Smeyer — Bewerbung Engel & Völkers
   Design-System
   Farbwerte abgeleitet vom Live-Auftritt von Engel & Völkers:
   Markenrot #C80000, Anthrazit #0D0D0D, warmes Off-White #FCFAF5,
   Sekundär-Blaugrau #526E7A.
   Typografie: Newsreader (Serif-Headlines, analog E&V Head)
               Instrument Sans (Grotesk-Fließtext, analog E&V Text)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marke */
  --ev-red:        #C80000;
  --ev-red-hi:     #E60000;
  --ev-red-deep:   #9E0000;
  /* Aufgehellte Markenrot-Variante für kleine Schrift auf Anthrazit.
     #C80000 erreicht dort nur 2,4:1, #FF3B30 kommt auf 5,3:1 (WCAG AA). */
  --ev-red-light:  #FF3B30;

  /* Neutral */
  --ink:           #0D0D0D;
  --ink-2:         #262626;
  --graphite:      #404040;
  --stone:         #666666;
  --slate:         #526E7A;

  /* Flächen */
  --paper:         #FCFAF5;
  --snow:          #F6F6F4;
  --white:         #FFFFFF;

  /* Linien */
  --line:          rgba(13,13,13,.13);
  --line-soft:     rgba(13,13,13,.07);
  --line-light:    rgba(252,250,245,.18);
  --line-light-soft: rgba(252,250,245,.09);

  /* Typo */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Raum – Density 4/10 (großzügig, editorial) */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 9rem;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  /* Motion */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: 180ms;
  --t-mid: 320ms;

  --z-nav: 100;
  --z-mobilenav: 90;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Systemleiste ausblenden — die Fortschrittsanzeige unten rechts
     übernimmt ihre Aufgabe. Scrollen per Rad, Wischen und Tastatur
     bleibt unverändert. */
  scrollbar-width:none;         /* Firefox */
  -ms-overflow-style:none;      /* alte Edge/IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{        /* Chrome, Safari */
  width:0;
  height:0;
  display:none;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip statt hidden: hidden würde den Body zum Scroll-Container machen
     und position:sticky im Horizontal-Abschnitt aushebeln. */
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
strong{ font-weight:600; }
::selection{ background:var(--ev-red); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-size:.875rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{
  outline:2px solid var(--ev-red);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 3. Layout-Primitive ---------- */
/* Stapelordnung der Seite
   Ebene 6 (z-index:auto)  Abschnittsflächen und Hintergrundbilder
   Ebene 7 z-index:1       Partikelfläche
   Ebene 7 z-index:2       sämtliche Inhalte
   Ebene 7 z-index:90/100  Menü und Navigation
   Die Abschnitte dürfen deshalb keinen eigenen Stacking-Context
   aufmachen — also kein z-index, transform oder filter auf .section. */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:2;
}
.section{
  position:relative;
  padding-block:clamp(4.5rem, 10vw, var(--s-8));
}
.section--paper{ background:var(--paper); }
.section--snow{  background:var(--snow); }
.section--ink{   background:var(--ink); color:var(--paper); }
/* liegt auf dem dunklen Band und bringt keine eigene Fläche mit */
.section--ondark{ color:var(--paper); }

/* ---------- 3c. Bauzeichnungen als stille Struktur ----------
   Sehr schwach gesetzte Architekturzeichnungen geben den hellen
   Abschnitten Tiefe, ohne mit dem Text zu konkurrieren. Sie liegen
   auf Ebene 6 — also hinter Partikeln und Inhalt. */
#profil::before,
#qualifikationen::before,
#kompetenzen::before{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.07;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
#profil::before{
  background-image:url(../img/skizze-aufriss.svg);
  right:-4%; top:9%;
  width:min(40vw,540px); height:min(30vw,400px);
}
#qualifikationen::before{
  background-image:url(../img/skizze-entwurf.svg);
  left:-7%; bottom:5%;
  width:min(44vw,600px); height:min(33vw,450px);
  opacity:.055;
}
#kompetenzen::before{
  background-image:url(../img/skizze-grundriss.svg);
  right:-3%; bottom:7%;
  width:min(34vw,460px); height:min(34vw,460px);
}
@media (max-width:900px){
  #profil::before,
  #qualifikationen::before,
  #kompetenzen::before{ opacity:.045; }
}

/* ---------- 3b. Durchgehendes dunkles Band ---------- */
.darkband{
  position:relative;
  background:var(--ink);
  overflow:hidden;
}
.darkband__media{ position:absolute; inset:0; }
.darkband__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.6;
  /* Ober- und Unterkante laufen weich ins Anthrazit aus */
  -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%);
  transform:scale(1.12);
  will-change:transform;
}
.darkband__media::after{
  content:"";
  position:absolute; inset:0;
  /* hält den Text über den Karten sicher lesbar */
  background:linear-gradient(to bottom,
    rgba(13,13,13,.90) 0%,
    rgba(13,13,13,.80) 22%,
    rgba(13,13,13,.74) 55%,
    rgba(13,13,13,.82) 100%);
}

/* ---------- 4. Typografie ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ev-red);
  margin:0 0 var(--s-3);
  display:flex;
  align-items:center;
  gap:.75rem;
}
.eyebrow--light{ color:var(--ev-red-light); }
.eyebrow__num{
  font-variant-numeric:tabular-nums;
  color:var(--stone);
  padding-right:.75rem;
  border-right:1px solid currentColor;
}
.eyebrow--light .eyebrow__num{ color:rgba(252,250,245,.45); }

.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.1rem, 5.2vw, 4rem);
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--ink);
  margin:0;
}
.h2--light{ color:var(--paper); }

.h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.75rem;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 .35rem;
}

.lead{
  font-family:var(--serif);
  font-size:clamp(1.25rem, 2.1vw, 1.6rem);
  line-height:1.45;
  font-weight:300;
  letter-spacing:-.012em;
  color:var(--ink);
  margin-bottom:1.4rem;
}

/* Breiten in px/min(), nicht in ch: ch bezieht sich auf die kleine
   Basisschrift und würde die großen Serif-Headlines einschnüren. */
.secthead{ max-width:min(100%, 780px); margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.secthead--center{ margin-inline:auto; text-align:center; max-width:min(100%, 720px); }
.secthead--center .eyebrow{ justify-content:center; }
.secthead--sub{ margin-top:clamp(3.5rem,7vw,6rem); }
.secthead__sub{
  margin-top:1.5rem;
  font-size:1.0625rem;
  line-height:1.75;
  color:rgba(252,250,245,.68);
  max-width:56ch;
}
.secthead--center .secthead__sub{ margin-inline:auto; }
.secthead__sub--dark{ color:var(--graphite); }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:.9rem 2rem;
  font-family:var(--sans);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid transparent;
  transition:background var(--t-fast) var(--e-soft),
             color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft);
}
.btn--primary{ background:var(--ev-red); color:#fff; }
.btn--primary:hover{ background:var(--ev-red-hi); }
.btn--ghost{ border-color:rgba(252,250,245,.4); color:var(--paper); }
.btn--ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* ---------- 6. Navigation ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:var(--z-nav);
  transition:background var(--t-mid) var(--e-soft),
             border-color var(--t-mid) var(--e-soft),
             transform var(--t-mid) var(--e-soft);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:1.1rem var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; }
/* Monogramm: helle Fassung über dem dunklen Hero, dunkle sobald
   die Leiste auf Off-White umschaltet. */
.nav__mark{
  position:relative;
  width:38px; height:38px;
  display:block;
  flex:none;
}
.nav__mark img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  transition:opacity var(--t-mid) var(--e-soft);
}
.nav__mark--dunkel{ opacity:0; }
.nav.is-scrolled .nav__mark--hell{ opacity:0; }
.nav.is-scrolled .nav__mark--dunkel{ opacity:1; }
.nav__name{
  font-family:var(--serif);
  font-size:1.0625rem;
  letter-spacing:-.005em;
  color:var(--paper);
  transition:color var(--t-mid) var(--e-soft);
  white-space:nowrap;
}
.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.02em;
  color:rgba(252,250,245,.78);
  position:relative;
  padding:.35rem 0;
  transition:color var(--t-fast) var(--e-soft);
}
.nav__links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--ev-red);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform var(--t-mid) var(--e-out);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a[aria-current="true"]{ color:var(--paper); }

.nav__cta{
  border:1px solid rgba(252,250,245,.35);
  padding:.6rem 1.35rem !important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--ev-red); border-color:var(--ev-red); color:#fff !important; }

/* Scrolled-Zustand: heller Balken */
.nav.is-scrolled{
  background:rgba(252,250,245,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav.is-scrolled .nav__name{ color:var(--ink); }
.nav.is-scrolled .nav__links a{ color:var(--graphite); }
.nav.is-scrolled .nav__links a:hover,
.nav.is-scrolled .nav__links a[aria-current="true"]{ color:var(--ink); }
.nav.is-scrolled .nav__cta{ border-color:var(--line); }
.nav.is-scrolled .nav__cta:hover{ color:#fff !important; }
.nav.is-hidden{ transform:translateY(-100%); }

/* Burger */
.nav__burger{
  display:none;
  width:48px; height:48px;
  background:none; border:0; cursor:pointer;
  padding:0;
  place-items:center;
  align-content:center;
  gap:6px;
}
.nav__burger span{
  display:block;
  width:24px; height:1.5px;
  background:var(--paper);
  transition:transform var(--t-mid) var(--e-out),
             opacity var(--t-fast) var(--e-soft),
             background var(--t-mid) var(--e-soft);
}
.nav.is-scrolled .nav__burger span{ background:var(--ink); }
.nav__burger[aria-expanded="true"] span{ background:var(--paper); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* Mobile-Overlay */
.mobilenav{
  position:fixed; inset:0;
  z-index:var(--z-mobilenav);
  background:var(--ink);
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-mid) var(--e-soft), visibility var(--t-mid);
}
.mobilenav.is-open{ opacity:1; visibility:visible; }
.mobilenav nav{ display:flex; flex-direction:column; gap:.25rem; padding:2rem; }
.mobilenav a{
  font-family:var(--serif);
  font-size:clamp(1.9rem,7vw,2.75rem);
  font-weight:300;
  line-height:1.35;
  color:var(--paper);
  display:flex;
  align-items:baseline;
  gap:1rem;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 420ms var(--e-out), transform 420ms var(--e-out), color var(--t-fast);
}
.mobilenav.is-open a{ opacity:1; transform:none; }
.mobilenav.is-open a:nth-child(1){ transition-delay:60ms; }
.mobilenav.is-open a:nth-child(2){ transition-delay:105ms; }
.mobilenav.is-open a:nth-child(3){ transition-delay:150ms; }
.mobilenav.is-open a:nth-child(4){ transition-delay:195ms; }
.mobilenav.is-open a:nth-child(5){ transition-delay:240ms; }
.mobilenav.is-open a:nth-child(6){ transition-delay:285ms; }
.mobilenav.is-open a:nth-child(7){ transition-delay:330ms; }
.mobilenav a:hover{ color:var(--ev-red-hi); }
.mobilenav__num{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--ev-red-light);
  font-variant-numeric:tabular-nums;
}

/* ---------- 7. Hero ---------- */
/* Band aus Hero und Kennzahlen mit gemeinsamem Motiv */
.heroband{
  position:relative;
  background:var(--ink);
  overflow:hidden;
}
.heroband__media{ position:absolute; inset:0; }
.heroband__media picture,
.heroband__media img{
  width:100%; height:100%;
  display:block;
}
.heroband__media img{
  object-fit:cover;
  object-position:center 42%;
  will-change:transform;
}
.heroband__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(13,13,13,.94) 0%, rgba(13,13,13,.80) 34%, rgba(13,13,13,.40) 62%, rgba(13,13,13,.60) 100%),
    /* unten dunkel genug für die Kennzahlen */
    linear-gradient(to top, rgba(13,13,13,.97) 0%, rgba(13,13,13,.93) 12%, rgba(13,13,13,.72) 24%, rgba(13,13,13,.25) 38%, rgba(13,13,13,0) 52%);
}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:6rem;
  padding-bottom:3rem;
}

.hero__grid{
  position:relative;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  align-items:center;
  gap:clamp(1rem,4vw,4rem);
  flex:1;
}
.hero__copy{ max-width:min(100%, 620px); }
.hero__name{
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(3.4rem, 10.5vw, 8.5rem);
  line-height:.9;
  letter-spacing:-.035em;
  color:var(--paper);
  margin:0 0 var(--s-4);
}
.hero__rule{
  width:88px; height:2px;
  background:var(--ev-red);
  margin-bottom:var(--s-4);
}
.hero__lead{
  font-size:1.0625rem;
  line-height:1.75;
  color:rgba(252,250,245,.8);
  max-width:44ch;
  margin-bottom:var(--s-4);
}
.hero__lead strong{ color:var(--paper); font-weight:600; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

.hero__portrait{
  position:relative;
  justify-self:end;
  align-self:end;
  width:100%;
  max-width:440px;
}
.hero__portrait img{
  width:100%;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
/* roter Anschnitt hinter dem Porträt */
.hero__portrait::before{
  content:"";
  position:absolute;
  left:6%; right:20%;
  bottom:0; top:16%;
  background:linear-gradient(to bottom, rgba(200,0,0,0) 0%, rgba(200,0,0,.22) 100%);
  z-index:-1;
}

.hero__meta{
  position:relative;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.9rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(252,250,245,.55);
  padding-top:var(--s-4);
}
.dot{ width:3px; height:3px; background:var(--ev-red); border-radius:50%; flex:none; }

  60%  { transform:translateY(100%); }
  100% { transform:translateY(100%); }
}

/* ---------- 8. Kennzahlen ---------- */
.stats{ position:relative; color:var(--paper); padding-block:clamp(3rem,6vw,5rem); }
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,3rem);
}
.stat{ border-top:1px solid var(--line-light); padding-top:1.5rem; }
.stat__value{
  display:block;
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(3rem,6vw,4.75rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
  margin-bottom:.85rem;
}
.stat__value--text{ color:var(--ev-red-hi); }
.stat__label{
  display:block;
  font-size:.875rem;
  line-height:1.55;
  color:rgba(252,250,245,.72);
}
.stat__label em{
  display:block;
  font-style:normal;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(252,250,245,.58);
  margin-top:.5rem;
}

/* ---------- 9. Profil ---------- */
.profil{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.profil__figure{ margin:0; position:relative; }
.profil__figure img{ width:100%; filter:grayscale(.15) contrast(1.02); }
.profil__figure::after{
  content:"";
  position:absolute;
  left:-14px; bottom:-14px;
  width:96px; height:96px;
  border-left:2px solid var(--ev-red);
  border-bottom:2px solid var(--ev-red);
  pointer-events:none;
}
.profil__figure figcaption{
  margin-top:1rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone);
}
.profil__text p{ color:var(--graphite); max-width:56ch; }
.profil__text .lead{ color:var(--ink); }

.factlist{
  margin:var(--s-5) 0 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.75rem 2rem;
  border-top:1px solid var(--line);
  padding-top:var(--s-4);
}
.factlist dt{
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:.45rem;
}
.factlist dd{
  margin:0;
  font-size:1rem;
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
}
.factlist a{ border-bottom:1px solid var(--line); transition:border-color var(--t-fast), color var(--t-fast); }
.factlist a:hover{ color:var(--ev-red); border-color:var(--ev-red); }

/* ---------- 10. Stärken-Karten ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-light-soft);
  border:1px solid var(--line-light-soft);
}
.card{
  /* durchscheinend, damit das Motiv des Bandes dahinter lesbar bleibt */
  background:rgba(13,13,13,.52);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:clamp(1.75rem,3vw,2.75rem);
  position:relative;
  transition:background var(--t-mid) var(--e-soft);
}
.card:hover{ background:rgba(13,13,13,.72); }
.card__num{
  display:block;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--ev-red-light);
  font-variant-numeric:tabular-nums;
  margin-bottom:1.5rem;
}
.card h3{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.012em;
  color:var(--paper);
  margin-bottom:.85rem;
  hyphens:auto;
}
.card p{
  font-size:.9375rem;
  line-height:1.7;
  color:rgba(252,250,245,.62);
  margin:0;
}

/* ---------- 11. Zitat ---------- */
.quote{
  position:relative;
  padding-block:clamp(5rem,12vw,10rem);
  /* Fläche und Motiv kommen vom umgebenden .darkband */
}
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(1.6rem,3.6vw,2.9rem);
  line-height:1.28;
  letter-spacing:-.022em;
  color:var(--paper);
  /* em statt ch: skaliert mit der Display-Größe und hält das Satzmaß */
  max-width:15em;
  margin-bottom:2rem;
}
.quote blockquote::before{
  content:"";
  display:block;
  width:56px; height:2px;
  background:var(--ev-red);
  margin-bottom:2rem;
}
.quote cite{
  font-style:normal;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(252,250,245,.55);
}

/* ---------- 12. Timeline ---------- */
.timeline{ border-top:1px solid var(--line); }
.tl{
  display:grid;
  grid-template-columns:minmax(200px,270px) 1fr;
  gap:clamp(1rem,4vw,3rem);
  padding:1.75rem 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background var(--t-mid) var(--e-soft);
}
.tl::before{
  content:"";
  position:absolute;
  left:calc(var(--gutter) * -1);
  right:calc(var(--gutter) * -1);
  top:0; bottom:0;
  background:var(--white);
  opacity:0;
  transition:opacity var(--t-mid) var(--e-soft);
  z-index:0;
  pointer-events:none;
}
.tl:hover::before{ opacity:.6; }
.tl__date,.tl__body{ position:relative; z-index:1; }
.tag{
  display:inline-block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--stone);
  font-variant-numeric:tabular-nums;
  padding-top:.3rem;
}
.tag--now{
  color:var(--ev-red);
  position:relative;
  padding-left:1.15rem;
}
.tag--now::before{
  content:"";
  position:absolute;
  left:0; top:.85rem;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ev-red);
  box-shadow:0 0 0 0 rgba(200,0,0,.5);
  animation:pulse 2.4s var(--e-soft) infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(200,0,0,.45); }
  70%  { box-shadow:0 0 0 9px rgba(200,0,0,0); }
  100% { box-shadow:0 0 0 0 rgba(200,0,0,0); }
}
.tl__body h3{
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.014em;
  margin-bottom:.25rem;
}
.tl__org{ margin:0; color:var(--graphite); font-size:1rem; }
.tl__note{ margin:.2rem 0 0; color:var(--stone); font-size:.9375rem; }

/* ---------- 13. Qualifikationen ---------- */
.quals{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,5vw,4rem); }
.qual{ border-top:2px solid var(--ink); padding-top:var(--s-3); }
.qual__year span{
  font-family:var(--serif);
  font-size:clamp(2.4rem,4.5vw,3.5rem);
  font-weight:200;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ev-red);
  font-variant-numeric:tabular-nums;
  display:block;
  margin-bottom:var(--s-3);
}
.qual__list li{
  padding:.9rem 0 .9rem 1.75rem;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--ink);
}
.qual__list li:last-child{ border-bottom:0; }
.qual__list li::before{
  content:"";
  position:absolute;
  left:0; top:1.45rem;
  width:8px; height:1px;
  background:var(--ev-red);
}
.qual__sub{
  display:block;
  margin-top:.3rem;
  font-size:.875rem;
  color:var(--stone);
}

/* Praxis-Beleg unterhalb der Lehrgänge */
.practice{
  margin-top:clamp(2.5rem,5vw,4rem);
  background:var(--ink);
  color:var(--paper);
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.75rem,3.5vw,3rem);
  border-left:3px solid var(--ev-red);
}
.practice__mark{
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(3.5rem,8vw,6.5rem);
  line-height:.85;
  letter-spacing:-.04em;
  color:var(--ev-red-hi);
  font-variant-numeric:tabular-nums;
}
.practice__body h3{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  font-weight:400;
  letter-spacing:-.012em;
  margin-bottom:.6rem;
}
.practice__body p{
  margin:0;
  font-size:1rem;
  line-height:1.7;
  color:rgba(252,250,245,.72);
  max-width:62ch;
}
.practice__body strong{ color:var(--paper); font-weight:600; }

/* ---------- 14. Kompetenzen ---------- */
.skills{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  margin-bottom:clamp(3rem,7vw,6rem);
}
.skill{ border-top:1px solid var(--line); padding-top:var(--s-3); }
.skill__title{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ev-red);
  margin-bottom:var(--s-2);
}
.skill__list li{
  padding:.7rem 0;
  border-bottom:1px solid var(--line-soft);
}
.skill__list li:last-child{ border-bottom:0; }
.skill__list span{ display:block; font-size:1.0625rem; font-weight:500; color:var(--ink); }
.skill__list em{
  display:block;
  font-style:normal;
  font-size:.8125rem;
  color:var(--stone);
  margin-top:.15rem;
}

.split{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(2rem,5vw,4rem);
  border-top:1px solid var(--line);
  padding-top:clamp(2rem,4vw,3.5rem);
}
.split__org{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:var(--s-3);
}
.bullets li{
  padding:.7rem 0 .7rem 1.75rem;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  color:var(--graphite);
}
.bullets li:last-child{ border-bottom:0; }
.bullets li::before{
  content:"";
  position:absolute; left:0; top:1.2rem;
  width:8px; height:1px; background:var(--ev-red);
}
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--s-3); }
.chips li{
  padding:.5rem 1.15rem;
  border:1px solid var(--line);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
  transition:border-color var(--t-fast), color var(--t-fast);
}
.chips li:hover{ border-color:var(--ev-red); color:var(--ev-red); }
.split__note{ color:var(--stone); font-size:.9375rem; max-width:42ch; margin:0; }

/* ---------- 15. Horizontale Strecke / Region ----------
   Standard: normaler Wischbereich mit Einrasten.
   Mit .hscroll--gepinnt (Maus, ab 901px): Der Abschnitt bleibt stehen,
   während die Spur seitlich läuft — die Höhe setzt main.js. */
.hscroll{
  position:relative;
  z-index:2;                     /* über der Partikelfläche */
  margin-block:clamp(2rem,5vw,4rem);
}
.hscroll__stage{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hscroll__stage::-webkit-scrollbar{ display:none; }

.hscroll--gepinnt .hscroll__stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  scroll-snap-type:none;
}

.hscroll__track{
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.4vw,2.5rem);
  padding-inline:var(--gutter);
  width:max-content;
  will-change:transform;
}

.hpanel{
  flex:none;
  margin:0;
  width:clamp(260px, 38vw, 540px);
  scroll-snap-align:center;
}
.hpanel img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}
.hpanel--hoch{ width:clamp(220px, 26vw, 380px); }
.hpanel--hoch img{ aspect-ratio:3/4; }
.hpanel figcaption{
  margin-top:1rem;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--stone);
  display:flex;
  gap:.75rem;
}
.hpanel__num{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--ev-red);
  font-variant-numeric:tabular-nums;
  flex:none;
  padding-top:.15rem;
}
.hpanel--text{
  width:clamp(260px, 30vw, 420px);
  border-left:2px solid var(--ev-red);
  padding-left:clamp(1.25rem,2.5vw,2rem);
}
.hpanel__lead{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:1rem;
}
.hpanel--text p:last-child{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-weight:300;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}

/* Fortschrittslinie, gespeist aus --fortschritt */
.hscroll__balken{
  position:relative;
  height:2px;
  margin:clamp(1.5rem,3vw,2.5rem) var(--gutter) 0;
  background:var(--line);
  display:none;
}
.hscroll--gepinnt .hscroll__balken{
  display:block;
  position:sticky;
  bottom:clamp(2rem,5vh,4rem);
  margin-top:calc(clamp(1.5rem,3vw,2.5rem) - 100svh);
  z-index:3;
}
.hscroll__balken span{
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--fortschritt, 0) * 100%);
  background:var(--ev-red);
}
.disclaimer{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
  font-size:.75rem;
  line-height:1.6;
  color:var(--stone);
  max-width:60ch;
}

/* ---------- 16. Kontakt ---------- */
.contact{ background:var(--ink); color:var(--paper); overflow:hidden; }
.contact__media{ position:absolute; inset:0; }
.contact__media img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.contact__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(13,13,13,.97) 0%, rgba(13,13,13,.88) 45%, rgba(13,13,13,.6) 100%);
}
.contact__inner{ position:relative; }
.contact__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-light-soft);
  border:1px solid var(--line-light-soft);
}
.contact__card{
  background:rgba(13,13,13,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1.25rem;
  position:relative;
  transition:background var(--t-mid) var(--e-soft);
}
a.contact__card:hover{ background:var(--ev-red); }
.contact__label{
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(252,250,245,.6);
  transition:color var(--t-mid);
}
a.contact__card:hover .contact__label{ color:rgba(255,255,255,.8); }
.contact__value{
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--paper);
}
.contact__arrow{
  position:absolute;
  right:clamp(1.5rem,2.6vw,2.25rem);
  bottom:clamp(1.5rem,2.6vw,2.25rem);
  font-size:1.1rem;
  color:var(--ev-red-light);
  transition:transform var(--t-mid) var(--e-out), color var(--t-mid);
}
a.contact__card:hover .contact__arrow{ color:#fff; transform:translateX(5px); }

/* ---------- 17. Footer ---------- */
.footer{ background:var(--ink); color:rgba(252,250,245,.56); padding-block:var(--s-4); border-top:1px solid var(--line-light-soft); }
.footer__inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem 2rem;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.footer p{ margin:0; }
.footer__right{ text-align:right; max-width:44ch; }
.footer__hint{
  display:block;
  margin-top:.6rem;
  font-size:.625rem;
  letter-spacing:.04em;
  text-transform:none;
  line-height:1.6;
  color:rgba(252,250,245,.5);
}

/* ---------- 17b. Partikel-Ebene ----------
   Eine einzige fixierte Fläche über der gesamten Seite. Die Partikel
   wechseln je nach Abschnitt darunter zwischen hell und dunkel, damit
   sie auf Anthrazit wie auf Off-White sichtbar bleiben. */
.particles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  /* über den Abschnittsflächen und Hintergrundbildern (z-index:auto),
     aber unter allen Inhalten (z-index:2) — die Partikel ziehen also
     hinter Schrift und Porträt vorbei, nicht davor. */
  z-index:1;
}
/* Hero benutzt kein .wrap — seine Inhalte brauchen die Ebene separat */
.hero__grid,
.hero__meta,

@media (prefers-reduced-motion: reduce){
  .particles{ display:none; }
}

/* ---------- 17c. Eigener Zeiger ----------
   Wird per JS nur auf Geräten mit Maus/Trackpad aktiviert. Solange
   .cursor-aktiv gesetzt ist, verschwindet der Systemzeiger vollständig
   — auch über Links, Buttons und Textfeldern. */
.cursor{
  position:fixed;
  top:0; left:0;
  z-index:200;
  pointer-events:none;
  opacity:0;
  transition:opacity 220ms var(--e-soft);
}
body.cursor-aktiv .cursor{ opacity:1; }

body.cursor-aktiv,
body.cursor-aktiv *,
body.cursor-aktiv *::before,
body.cursor-aktiv *::after{ cursor:none !important; }

.cursor__ring,
.cursor__dot{
  position:absolute;
  top:0; left:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.cursor__ring{
  width:34px; height:34px;
  border:1px solid rgba(252,250,245,.55);
  transition:width 260ms var(--e-out), height 260ms var(--e-out),
             border-color 260ms var(--e-soft), background 260ms var(--e-soft);
}
.cursor__dot{
  width:5px; height:5px;
  background:var(--ev-red);
}
/* über hellen Abschnitten dunkler Ring */
.cursor.is-hell .cursor__ring{ border-color:rgba(13,13,13,.42); }

/* über anklickbaren Elementen */
.cursor.is-aktiv .cursor__ring{
  width:60px; height:60px;
  border-color:var(--ev-red);
  background:rgba(200,0,0,.10);
}
.cursor.is-aktiv .cursor__dot{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .cursor{ display:none; }
  body.cursor-aktiv,
  body.cursor-aktiv *{ cursor:auto !important; }
}

/* ---------- 17d. Scroll-Anzeige ----------
   Ring unten rechts, der sich über einen Seitendurchlauf füllt und
   danach wieder bei null beginnt. Umfang bei r=21 sind 131.95. */
.scrollring{
  position:fixed;
  right:clamp(1.25rem, 3vw, 2.75rem);
  bottom:clamp(1.25rem, 3vw, 2.75rem);
  z-index:120;
  width:48px; height:48px;
  pointer-events:none;
  opacity:0;
  transform:scale(.85);
  transition:opacity 400ms var(--e-soft), transform 400ms var(--e-out);
}
.scrollring.is-sichtbar{ opacity:1; transform:none; }

.scrollring svg{
  width:100%; height:100%;
  transform:rotate(-90deg);      /* Start oben */
  overflow:visible;
}
.scrollring circle{
  fill:none;
  stroke-width:1.5;
}
.scrollring__spur{ stroke:rgba(252,250,245,.22); }
.scrollring__wert{
  stroke:var(--ev-red-light);
  stroke-linecap:round;
  stroke-dasharray:131.95;
  stroke-dashoffset:calc(131.95 * (1 - var(--fortschritt, 0)));
}
/* über hellen Abschnitten */
.scrollring.is-hell .scrollring__spur{ stroke:rgba(13,13,13,.16); }
.scrollring.is-hell .scrollring__wert{ stroke:var(--ev-red); }

.scrollring__pfeil{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.scrollring__pfeil::before{
  content:"";
  width:7px; height:7px;
  border-right:1.5px solid rgba(252,250,245,.7);
  border-bottom:1.5px solid rgba(252,250,245,.7);
  transform:translateY(-2px) rotate(45deg);
  animation:ringpfeil 2s var(--e-soft) infinite;
}
.scrollring.is-hell .scrollring__pfeil::before{
  border-color:rgba(13,13,13,.55);
}
@keyframes ringpfeil{
  0%,100% { transform:translateY(-3px) rotate(45deg); opacity:.55; }
  50%     { transform:translateY(1px)  rotate(45deg); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .scrollring__pfeil::before{ animation:none; }
}
@media (max-width:620px){
  .scrollring{ width:40px; height:40px; }
}

/* ---------- 18. Scroll-Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 700ms var(--e-out), transform 700ms var(--e-out);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--d1.is-in{ transition-delay:90ms; }
.reveal--d2.is-in{ transition-delay:180ms; }
.reveal--d3.is-in{ transition-delay:270ms; }
.reveal--d4.is-in{ transition-delay:360ms; }

/* ============================================================
   19. Responsive
   ============================================================ */
@media (max-width:1080px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .contact__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__burger{ display:grid; }

  .hero{ min-height:auto; padding-top:7rem; padding-bottom:3rem; }
  .hero__grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .hero__copy{ max-width:100%; }
  .hero__portrait{
    justify-self:center;
    max-width:min(300px, 58vw);
    order:-1;
  }
  .hero__portrait::before{ display:none; }
  /* Hochformat: der Verlauf muss senkrecht abdunkeln, sonst steht der
     Name über den hellen Fensterflächen des Motivs. */
  .heroband__scrim{
    background:linear-gradient(to bottom,
      rgba(13,13,13,.72) 0%,
      rgba(13,13,13,.58) 26%,
      rgba(13,13,13,.90) 52%,
      rgba(13,13,13,.97) 78%,
      rgba(13,13,13,.99) 100%);
  }
  .heroband__media img{ object-position:center 34%; }
    .hero__meta{ padding-top:2.25rem; }

  .profil{ grid-template-columns:1fr; }
  .profil__figure{ max-width:420px; }
  .quals{ grid-template-columns:1fr; }
  .skills{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; gap:2.5rem; }

  .tl{ grid-template-columns:1fr; gap:.5rem; padding:1.5rem 0; }
  .tl::before{ display:none; }

  .footer__inner{ flex-direction:column; }
  .footer__right{ text-align:left; }
}

@media (max-width:620px){
  .stats__grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .factlist{ grid-template-columns:1fr; }
  .hero__actions .btn{ flex:1 1 100%; }
  /* Trennpunkte weglassen, sonst hängt ein Punkt am Zeilenende */
  .hero__meta{ flex-direction:column; align-items:flex-start; gap:.45rem; }
  .hero__meta .dot{ display:none; }
  .practice{ grid-template-columns:1fr; gap:1rem; }
  .secthead{ max-width:100%; }
  .quote blockquote p br{ display:none; }
  .h2 br{ display:none; }
  .hero__name br{ display:block; }
}

/* ---------- 20. Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .mobilenav a{ opacity:1; transform:none; }
  .heroband__media img,
  .darkband__media img{ transform:none !important; }
}

/* ---------- 21. Druck ---------- */
@media print{
  .nav,.mobilenav,.scrollring,.cursor,.heroband__media,.darkband__media,.contact__media,
  .hero__actions,.particles{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section--ink,.section--ondark,.stats,.heroband,.darkband,.quote,.contact,.hero,.footer{
    background:#fff !important; color:#000 !important;
  }
  .h2--light,.hero__name,.stat__value,.card h3,.contact__value,.quote blockquote p{ color:#000 !important; }
  .card p,.stat__label,.secthead__sub{ color:#333 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .tl,.cards,.contact__grid{ break-inside:avoid; }
}