/* ============================================================
   ÜBER UNS — Seiten-Design „Atelier" (v16)
   Erbe der Atelier-Variante: Papier + Tinte + Gold,
   Playfair Display (Serif, kursive Akzente) + Inter.
   Signaturen: ① Gold-Kapitelfaden (klickbar, mit Fortschritt)
   ② Mask-Cursor „Taschenlampe" auf dem Prinzipien-Panel.
   Wird NACH base.css geladen. Helle Kopfleiste = Standard.
   ============================================================ */

:root{
  --papier:#FAF8F3;
  --tinte:#14181F;
  --seiten-muted:#616770;
  --gold-text:#7C5F1A;              /* AA auf Papier */
  --hairline:#E5E0D5;
  /* --font-display / --font-body kommen zentral aus base.css */

  --kopf-bg:rgba(250,248,243,.88);
  --kopf-ink:var(--tinte);
  --kopf-tag:var(--gold-text);
  --kopf-line:var(--hairline);
  --kopf-toggle:var(--tinte);
  --akzent-ink:var(--gold-text);
}

html{background:var(--papier)}   /* kein Farb-Blitz beim Seitenwechsel */
body{
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.04rem;
}
::selection{background:rgba(196,154,59,.25);color:var(--tinte)}

h1,h2,h3{
  font-family:var(--font-display);font-weight:500;line-height:1.12;color:var(--tinte);
  margin:0;text-wrap:balance;letter-spacing:-.01em;
}
h1{font-size:clamp(2.3rem,5vw + .4rem,4.2rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.3rem}
em{font-style:italic;color:var(--gold-text)}

.lead{font-size:clamp(1.06rem,1.5vw,1.26rem);line-height:1.65;color:var(--seiten-muted);max-width:46rem}
.muted{color:var(--seiten-muted)}
a{color:var(--gold-text)}
[data-todo]{outline-color:rgba(154,122,44,.5)}

.btn-outline{--fg:var(--tinte);--bd:var(--tinte)}
.btn-outline:hover{--bg:var(--tinte);--fg:var(--papier)}

/* ---------- Gold-Kapitelfaden (Desktop, links) ---------- */
.faden{
  position:fixed;left:max(18px,calc((100vw - var(--container)) / 2 - 74px));
  top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
}
.faden-track{
  position:absolute;left:5px;top:-14px;bottom:-14px;width:1.5px;
  background:var(--hairline);z-index:-1;
}
.faden-track .faden-fill{
  position:absolute;inset:0;background:linear-gradient(var(--gold-deep),var(--gold));
  transform:scaleY(0);transform-origin:top center;
}
/* Ohne JS gibt es keinen echten Füllstand — Füllung weglassen statt fälschlich 100 %.
   (Bei reduced-motion setzt motion.js den Stand direkt: Anzeige, keine Animation.) */
html.no-js .faden-track .faden-fill{display:none}
.faden-marke{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;color:var(--seiten-muted);
  transition:color .25s var(--ease-premium);
}
.faden-marke::before{
  content:"";flex:none;width:11px;height:11px;border-radius:50%;
  background:var(--papier);border:1.5px solid var(--hairline);margin-right:12px;
  transition:border-color .25s var(--ease-premium), background .25s var(--ease-premium);
}
/* Kompakt steht nur Punkt + Nummer in der Gasse (ragt nie in die Textspalte);
   das Wort klappt bei Hover/Fokus/aktivem Kapitel als lesbarer Papier-Chip aus. */
.faden-label{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transform:translateX(-4px);
  background:var(--papier);border:1px solid var(--hairline);border-radius:var(--r-pill);
  box-shadow:var(--sh-sm);padding:3px 0;
  transition:max-width .35s var(--ease-premium), opacity .3s var(--ease-premium),
             transform .35s var(--ease-premium), padding .35s var(--ease-premium),
             margin-left .35s var(--ease-premium);
}
.faden-marke:hover .faden-label,
.faden-marke:focus-visible .faden-label{
  max-width:110px;opacity:1;transform:none;padding:3px 10px;margin-left:10px;
}
.faden-marke:hover{color:var(--gold-text)}
.faden-marke.is--active{color:var(--gold-text)}
.faden-marke.is--active::before{border-color:var(--gold);background:var(--gold)}
@media (max-width:1340px){ .faden{display:none} }

/* ---------- Kapitel-Grundgerüst ---------- */
.kapitel{padding-block:clamp(4.5rem,9vw,7.5rem);border-top:1px solid var(--hairline)}
.hero + .kapitel{border-top:0}   /* erstes Kapitel ohne Trennlinie (first-of-type traf nie — .hero ist die erste section) */
.kap-kopf{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(28px,4vw,44px)}
.kap-nr{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.22em;color:var(--gold-text);
  display:inline-flex;align-items:center;gap:10px;flex:none;
}
.kap-nr::after{content:"";width:38px;height:1.5px;background:var(--gold)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(4.5rem,9vw,7.5rem) clamp(3.5rem,6vw,5rem)}
.hero .lead{margin-top:26px}
/* display:block ist Pflicht — als inline-span wurde die Linie nie gerendert */
.hero-linie{display:block;width:52px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:26px}
/* Mask-Split (Hero-H1): Zeilen gleiten aus unsichtbaren Masken (motion.js) */
.line-mask{overflow:hidden}

/* ---------- Kapitel 01: Team ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,72px);align-items:center}
.about-copy .muted{margin-top:18px}
.about-people{display:flex;flex-direction:column;gap:18px}
.person{
  display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:20px 24px;box-shadow:var(--sh-sm);
}
.avatar{
  flex:none;width:60px;height:60px;border-radius:50%;background:var(--navy);color:var(--gold-bright);
  display:grid;place-items:center;font-family:var(--font-display);font-size:1.2rem;
}
.person h3{font-size:1.15rem;margin-bottom:2px}
.person p{color:var(--seiten-muted);font-size:.94rem}

/* ---------- Kapitel 02: Prinzipien mit Mask-Cursor ---------- */
/* Hinweis nur, wenn der Effekt wirklich läuft: Motion aktiv (motion-ok) UND echter
   Zeiger — deckt reduced-motion, no-js, GSAP-Ausfall und Touch mit einer Regel ab */
.mask-hinweis{font-size:.88rem;color:var(--seiten-muted);margin-bottom:18px;font-style:italic;display:none}
@media (pointer:fine){ html.motion-ok .mask-hinweis{display:block} }
.maskpanel{
  position:relative;border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:#fff;overflow:hidden;box-shadow:var(--sh-sm);
}
.mask-ebene{padding:clamp(26px,3.5vw,46px)}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 44px}
.principle{display:flex;gap:16px;align-items:flex-start}
.principle .pn{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--gold-deep);flex:none;padding-top:3px;letter-spacing:.05em}
.principle strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.16rem;color:var(--tinte);margin-bottom:4px}
.principle p{color:var(--seiten-muted);font-size:.98rem;line-height:1.55}
/* Obere Ebene: identischer Inhalt, invertiert — nur im Maskenkreis sichtbar */
.mask-top{
  position:absolute;inset:0;--mx:50%;--my:50%;--r:0px;
  background:var(--navy);color:#EAF0FA;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 97%, transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 97%, transparent 100%);
}
.mask-top .principle .pn{color:var(--gold-bright)}
.mask-top .principle strong{color:#fff}
.mask-top .principle p{color:#C3CFE2}
@media (pointer:coarse){ .mask-top{display:none} }

/* ---------- Kapitel 03: Anspruch (Etappen-Tabelle aus v14) ---------- */
.vision-lead{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.62;color:var(--seiten-muted);margin-top:22px;max-width:68ch}
.etappen{display:flex;flex-direction:column;margin-top:clamp(40px,5vw,64px);border-bottom:1px solid var(--hairline)}
.etappe{
  display:grid;grid-template-columns:clamp(110px,15vw,190px) minmax(230px,.9fr) 1.5fr;
  gap:clamp(18px,4vw,64px);align-items:baseline;
  padding-block:clamp(20px,2.8vw,32px);border-top:1px solid var(--hairline);
}
.etappe.now{border-top:2px solid var(--gold)}
.etappe-label{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);margin:0}
.etappe h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2;margin:0}
.etappe p{color:var(--seiten-muted);font-size:1rem;line-height:1.6;margin:0}

/* ---------- Kapitel 04: CTA ---------- */
.cta-atelier{text-align:center;padding-block:clamp(3rem,5vw,4.5rem) clamp(4.5rem,8vw,7rem)}
.cta-atelier h2{max-width:24ch;margin:0 auto 18px}
.cta-atelier p{color:var(--seiten-muted);max-width:520px;margin:0 auto 30px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:40px}
  .principles{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  .etappe{grid-template-columns:1fr;gap:8px;padding-block:20px}
  .kap-kopf{flex-direction:column;gap:10px}
}