/* ============================================================================
   components.css — wiederverwendbare Bausteine
   ========================================================================== */

/* ---------- Eyebrow / Sektionsmarke -------------------------------------- */
.fe-eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--ff-caps);font-weight:var(--fw-caps);font-size:var(--fs-cap);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);
  color:var(--fg-muted);
}
.fe-eyebrow::before{
  content:"";width:2.25rem;height:var(--hair);background:var(--accent);
  transform-origin:left center;
}
.fe-eyebrow--accent{color:var(--accent)}
.fe-index{font-family:var(--ff-mono);font-size:var(--fs-cap-s);color:var(--fg-muted);letter-spacing:.12em}

/* ---------- Links & Buttons ---------------------------------------------- */
.fe-link{
  position:relative;display:inline-block;
  padding-bottom:2px;color:inherit;
}
.fe-link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:var(--hair);
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform var(--t-s) var(--e-out);
}
.fe-link:hover::after,.fe-link:focus-visible::after{transform:scaleX(1);transform-origin:left center}

.fe-cta{
  --cta-fg:var(--fg); --cta-line:currentColor;
  display:inline-flex;align-items:center;gap:var(--s-4);
  font-family:var(--ff-caps);font-weight:var(--fw-caps);
  font-size:0.9375rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--cta-fg);padding-bottom:var(--s-3);
  border-bottom:var(--rule) solid var(--cta-line);
  transition:gap var(--t-s) var(--e-out),color var(--t-s) var(--e-out);
}
.fe-cta__arrow{
  width:1.25rem;height:1.25rem;flex:none;
  transition:transform var(--t-s) var(--e-out);
}
.fe-cta:hover{gap:var(--s-6);color:var(--accent)}
.fe-cta:hover .fe-cta__arrow{transform:translateX(3px)}

.fe-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
  padding:1.05rem 2rem;border-radius:var(--r-pill);
  background:var(--fg);color:var(--bg);
  font-family:var(--ff-caps);font-weight:var(--fw-caps);font-size:var(--fs-cap);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--t-s) var(--e-out);
}
.fe-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform var(--t-m) var(--e-out);
}
.fe-btn:hover::before{transform:translateY(0)}
.fe-btn:hover{color:#fff}
.fe-btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 var(--hair) var(--line-strong)}
.fe-btn--ghost:hover{color:#fff}

.fe-pill{
  display:inline-flex;align-items:center;
  font-family:var(--ff-caps);font-weight:var(--fw-caps);
  font-size:var(--fs-cap-s);text-transform:uppercase;letter-spacing:var(--tracking-caps);
  color:var(--fg-muted);border:var(--hair) solid var(--line);
  padding:.45rem .85rem;border-radius:var(--r-pill);
  transition:border-color var(--t-s) var(--e-out),color var(--t-s) var(--e-out);
}
.fe-pill:hover{color:var(--fg);border-color:var(--line-strong)}

/* ============================================================================
   MEDIA — Bildrahmen mit Parallax-Maske und Editorial-Platzhalter
   Solange keine echte Datei unter assets/img/ liegt, rendert ein
   gestalteter Platzhalter. Datei ablegen ⇒ Bild erscheint automatisch.
   ========================================================================== */
.fe-media{position:relative;margin:0;--ph-a:#1b1b1e;--ph-b:#4a4a52;--ph-tilt:0deg}
.fe-media__frame{
  position:relative;overflow:hidden;background:var(--c-paper-3);
  aspect-ratio:var(--ratio-editorial);
  clip-path:inset(0 0 0 0);
}
.fe-media[data-ratio="portrait"]  .fe-media__frame{aspect-ratio:var(--ratio-portrait)}
.fe-media[data-ratio="landscape"] .fe-media__frame{aspect-ratio:var(--ratio-landscape)}
.fe-media[data-ratio="cinema"]    .fe-media__frame{aspect-ratio:var(--ratio-cinema)}
.fe-media[data-ratio="square"]    .fe-media__frame{aspect-ratio:1}
.fe-media[data-ratio="free"]      .fe-media__frame{aspect-ratio:auto;height:100%}

.fe-media__img{
  width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%);
  transform:scale(var(--media-scale)) translate3d(0,calc(var(--pc,0) * -3.2% * var(--parallax)),0);
  transition:transform var(--t-m) var(--e-soft),opacity var(--t-m) var(--e-out);
  will-change:transform;
}
.fe-media:not(.has-img) .fe-media__img{opacity:0}
.fe-media.has-img .fe-media__ph{opacity:0;visibility:hidden}

/* --- Platzhalter --- */
/* Der Platzhalter bekommt bewusst KEINE Parallax-Transformation: er ist ein
   Verlauf ohne fotografische Tiefe, und die Ecken-Labels muessen im Rahmen bleiben. */
.fe-media__ph{
  position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(135% 115% at 46% 4%, transparent 34%, rgba(0,0,0,.5) 100%),
    radial-gradient(72% 58% at 94% 98%, color-mix(in srgb,var(--accent) 20%, transparent) 0%, transparent 72%),
    linear-gradient(155deg,
      var(--ph-a) 0%,
      color-mix(in srgb, var(--ph-a) 42%, var(--ph-b)) 54%,
      var(--ph-b) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:opacity var(--t-m) var(--e-out);
}
/* Halbton-Punktraster — Druckerzeugnis statt Bildschirm */
.fe-media__ph::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at center, rgba(255,255,255,.13) .9px, transparent 1px);
  background-size:6px 6px;
  transform:rotate(var(--ph-tilt,0deg)) scale(1.5);
  -webkit-mask-image:radial-gradient(120% 100% at 30% 10%, #000 0%, transparent 74%);
          mask-image:radial-gradient(120% 100% at 30% 10%, #000 0%, transparent 74%);
}
/* Lichtstreif, vom Scroll-Fortschritt getrieben */
.fe-media__ph::after{
  content:"";position:absolute;inset:-10%;
  background:linear-gradient(102deg,transparent 36%,rgba(255,255,255,.10) 48%,transparent 58%);
  transform:translateX(calc(var(--p,0) * 46% - 23%));
}
.fe-media__ph-type{
  position:relative;z-index:1;
  font-family:var(--ff-display);font-weight:var(--fw-display);
  text-transform:uppercase;letter-spacing:-.02em;line-height:.84;text-align:center;
  font-size:clamp(1.8rem,5vw,4rem);
  color:rgba(255,255,255,.15);
  -webkit-text-stroke:1px rgba(255,255,255,.10);
  padding-inline:1rem;
}
.fe-media__ph-meta{
  position:absolute;left:.9rem;bottom:.8rem;z-index:1;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.fe-media__ph-slot{
  position:absolute;right:.9rem;top:.8rem;z-index:1;
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.08em;
  color:rgba(255,255,255,.30);
}

/* --- Bildunterschrift --- */
.fe-media__cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  margin-top:var(--s-3);color:var(--fg-muted);font-size:var(--fs-cap-s);
}
.fe-media__cap span:last-child{font-family:var(--ff-mono);opacity:.7}
.fe-media--vcap .fe-media__cap{
  position:absolute;left:auto;right:calc(100% + .8rem);bottom:0;margin:0;
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
}

/* Hover-Zoom für verlinkte Medien */
a.fe-media:hover .fe-media__img,a .fe-media:hover .fe-media__img{transform:scale(calc(var(--media-scale) + .05))}

/* ---------- Brand Row (Roster) ------------------------------------------- */
.fe-roster{border-top:var(--hair) solid var(--line)}
.fe-brandrow{
  position:relative;display:grid;align-items:center;gap:var(--s-4);
  grid-template-columns:auto 1fr auto auto;
  padding:clamp(1.1rem,2.4vw,2.1rem) 0;
  border-bottom:var(--hair) solid var(--line);
  isolation:isolate;
}
.fe-brandrow__no{font-family:var(--ff-mono);font-size:var(--fs-cap-s);color:var(--fg-muted)}
.fe-brandrow__name{
  font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;
  font-size:clamp(1.75rem,4.6vw,4.25rem);line-height:.92;letter-spacing:var(--tracking-display);
  transition:transform var(--t-m) var(--e-out),color var(--t-m) var(--e-out);
}
.fe-brandrow__meta{font-size:var(--fs-cap-s);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);text-align:right}
.fe-brandrow__arrow{width:1.4rem;height:1.4rem;opacity:.25;transition:opacity var(--t-s) var(--e-out),transform var(--t-s) var(--e-out)}
.fe-brandrow:hover .fe-brandrow__name{transform:translateX(var(--s-5));color:var(--accent)}
.fe-brandrow:hover .fe-brandrow__arrow{opacity:1;transform:translateX(6px)}
@media (max-width:700px){
  .fe-brandrow{grid-template-columns:auto 1fr auto}
  .fe-brandrow__meta{display:none}
}
/* Bildvorschau, die dem Cursor folgt */
.fe-preview{
  position:fixed;top:0;left:0;z-index:var(--z-sticky);
  width:clamp(180px,17vw,260px);aspect-ratio:var(--ratio-portrait);
  pointer-events:none;opacity:0;
  transform:translate3d(var(--px,0),var(--py,0),0) translate(-50%,-50%) scale(.9) rotate(-3deg);
  transition:opacity var(--t-s) var(--e-out),transform var(--t-m) var(--e-out);
  overflow:hidden;
}
.fe-preview.is-on{opacity:1;transform:translate3d(var(--px,0),var(--py,0),0) translate(-50%,-50%) scale(1) rotate(-2deg)}
.fe-preview .fe-media__ph-type{font-size:clamp(.9rem,1.15vw,1.25rem);letter-spacing:0}
.fe-preview .fe-media__ph-slot,.fe-preview .fe-media__ph-meta{display:none}
@media (max-width:900px),(hover:none){ .fe-preview{display:none} }

/* ---------- Karten -------------------------------------------------------- */
.fe-card{
  position:relative;padding:var(--s-7) 0 var(--s-6);
  border-top:var(--hair) solid var(--line);
}
.fe-card__no{font-family:var(--ff-mono);font-size:var(--fs-cap-s);color:var(--accent-text);letter-spacing:.14em}
.fe-card__title{
  font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;
  font-size:var(--fs-d4);line-height:.95;margin-top:var(--s-4);
}
.fe-card__body{margin-top:var(--s-4);font-size:var(--fs-b2);color:var(--fg-body);line-height:1.6}
.fe-card__line{
  position:absolute;top:0;left:0;height:var(--rule);width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--t-m) var(--e-out);
}
.fe-card:hover .fe-card__line{transform:scaleX(1)}

/* ---------- Zahlen / Facts ----------------------------------------------- */
.fe-fact__num{
  font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:clamp(3rem,7vw,7rem);line-height:.85;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.fe-fact__label{
  margin-top:var(--s-4);font-family:var(--ff-caps);font-weight:var(--fw-caps);
  font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:var(--tracking-caps);
  color:var(--fg-muted);
}

/* ---------- Navigation ---------------------------------------------------- */
.fe-nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding:clamp(.9rem,1.6vw,1.6rem) var(--pad-x);
  pointer-events:none;
  transition:transform var(--t-m) var(--e-out),background-color var(--t-m) var(--e-out),
             backdrop-filter var(--t-m) var(--e-out),border-color var(--t-m) var(--e-out);
  border-bottom:var(--hair) solid transparent;
  mix-blend-mode:normal;
}
.fe-nav.is-stuck{
  background:color-mix(in srgb,var(--bg) 80%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
/* Die Navigation uebernimmt das Theme der Sektion, ueber der sie gerade liegt
   (wird von app.js gesetzt) — dadurch verschwindet sie nie in einer hellen Leiste. */
.fe-nav[data-theme]{background:transparent;color:var(--fg)}
.fe-nav[data-theme].is-stuck{background:color-mix(in srgb,var(--bg) 80%, transparent)}
.fe-nav.is-hidden{transform:translateY(-105%)}   /* nur im Stapelmodus genutzt */
.fe-nav>*{pointer-events:auto}

.fe-logo{display:inline-flex;flex-direction:column;line-height:1}
.fe-logo__mark{
  font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.4rem);letter-spacing:.005em;
}
.fe-logo__sub{
  margin-top:.28rem;font-family:var(--ff-caps);font-weight:500;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-muted);
}
.fe-navlinks{display:flex;align-items:center;gap:clamp(1rem,1.9vw,2.1rem)}
.fe-navlinks a{
  position:relative;font-family:var(--ff-caps);font-weight:var(--fw-caps);
  font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:var(--tracking-caps);
  padding-block:.3rem;
}
.fe-navlinks a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:var(--hair);background:currentColor;
  transform:scaleX(0);transform-origin:right center;transition:transform var(--t-s) var(--e-out);
}
.fe-navlinks a:hover::after,.fe-navlinks a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left center}
.fe-navlinks a[aria-current="true"]{color:var(--accent-text)}
@media (max-width:900px){ .fe-navlinks{display:none} }

.fe-burger{display:none;width:2.4rem;height:2.4rem;position:relative}
.fe-burger span{position:absolute;left:.35rem;right:.35rem;height:1.5px;background:currentColor;transition:transform var(--t-s) var(--e-out),opacity var(--t-xs) linear}
.fe-burger span:nth-child(1){top:.85rem}
.fe-burger span:nth-child(2){bottom:.85rem}
.fe-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.32rem) rotate(45deg)}
.fe-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-.32rem) rotate(-45deg)}
@media (max-width:900px){ .fe-burger{display:block} }

.fe-menu{
  position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);
  background:var(--c-noir);color:var(--c-chalk);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s-4);
  padding:6rem var(--pad-x) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--t-l) var(--e-in-out);
  visibility:hidden;
}
.fe-menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.fe-menu a{
  font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;
  font-size:clamp(2.2rem,10vw,4rem);line-height:1;
  opacity:0;transform:translateY(1.2rem);
  transition:opacity var(--t-m) var(--e-out) calc(60ms * var(--fe-i,0)),transform var(--t-m) var(--e-out) calc(60ms * var(--fe-i,0));
}
.fe-menu.is-open a{opacity:1;transform:none}
.fe-menu__foot{margin-top:var(--s-8);font-size:var(--fs-b2);color:var(--c-chalk-2)}

/* ---------- Scroll-Fortschritt ------------------------------------------- */
.fe-progress{
  position:fixed;left:0;right:0;bottom:0;height:2px;z-index:var(--z-nav);
  background:var(--line);
}
.fe-progress__bar{
  height:100%;background:var(--accent);
  transform:scaleX(var(--sp,0));transform-origin:left center;
}

/* ---------- Scroll-Hinweis ------------------------------------------------ */
.fe-scrollcue{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--ff-caps);font-weight:var(--fw-caps);font-size:var(--fs-cap-s);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-muted);
}
/* Horizontale Seite = horizontaler Hinweis. Der Balken laeuft nach rechts. */
.fe-scrollcue__rail{position:relative;display:block;width:4.5rem;height:1px;background:var(--line-strong);overflow:hidden}
.fe-scrollcue__rail i{position:absolute;inset-block:0;width:45%;background:var(--accent);animation:fe-cue-x 2s var(--e-in-out) infinite}
@keyframes fe-cue-x{0%{transform:translateX(-110%)}60%,100%{transform:translateX(240%)}}
/* Vertikale Variante (Stapelmodus / andere Seiten) */
.fe-scrollcue__line{position:relative;display:block;width:1px;height:3rem;background:var(--line-strong);overflow:hidden}
.fe-scrollcue__line::after{
  content:"";position:absolute;inset-inline:0;height:45%;background:var(--accent);
  animation:fe-cue 2s var(--e-in-out) infinite;
}
@keyframes fe-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(240%)}}
@media (max-width:900px){
  .fe-scrollcue__rail{width:1px;height:3rem}
  .fe-scrollcue__rail i{inset-inline:0;inset-block:auto;width:auto;height:45%;animation:fe-cue 2s var(--e-in-out) infinite}
}
@media (prefers-reduced-motion: reduce){ .fe-scrollcue__line::after,.fe-scrollcue__rail i{animation:none} }

/* ---------- Cursor -------------------------------------------------------- */
.fe-cursor{
  position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;
  width:12px;height:12px;border-radius:50%;background:var(--accent);
  transform:translate3d(var(--cx,-50px),var(--cy,-50px),0) translate(-50%,-50%) scale(var(--cs,1));
  transition:width var(--t-s) var(--e-out),height var(--t-s) var(--e-out),
             background-color var(--t-s) var(--e-out),opacity var(--t-s) linear;
  mix-blend-mode:difference;
}
.fe-cursor.is-hover{width:64px;height:64px;background:var(--c-chalk)}
.fe-cursor.is-hidden{opacity:0}
@media (hover:none),(max-width:900px){ .fe-cursor{display:none} }

/* ---------- Loader -------------------------------------------------------- */
.fe-loader{
  position:fixed;inset:0;z-index:var(--z-loader);
  background:var(--c-noir);color:var(--c-chalk);
  display:grid;place-items:center;
  transition:clip-path var(--t-l) var(--e-in-out),visibility 0s linear var(--t-l);
  clip-path:inset(0 0 0 0);
}
body.is-loaded .fe-loader{clip-path:inset(0 0 100% 0);visibility:hidden}
.fe-loader__inner{text-align:center}
.fe-loader__mark{
  font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;
  font-size:clamp(2rem,7vw,5rem);line-height:.9;letter-spacing:-.01em;
  overflow:hidden;
}
.fe-loader__mark span{display:inline-block;transform:translateY(105%);animation:fe-rise .9s var(--e-out) forwards}
@keyframes fe-rise{to{transform:translateY(0)}}
.fe-loader__bar{width:min(46vw,320px);height:1px;background:rgba(255,255,255,.2);margin:var(--s-6) auto 0;overflow:hidden}
.fe-loader__bar i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(var(--lp,0));transform-origin:left}
.fe-loader__pct{margin-top:var(--s-4);font-family:var(--ff-mono);font-size:var(--fs-cap-s);color:var(--c-chalk-2)}

/* ---------- Akkordeon ----------------------------------------------------- */
.fe-acc{border-top:var(--hair) solid var(--line)}
.fe-acc__item{border-bottom:var(--hair) solid var(--line)}
.fe-acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding:var(--s-6) 0;text-align:left;
  font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;
  font-size:var(--fs-d4);line-height:1;
  transition:color var(--t-s) var(--e-out);
}
.fe-acc__btn:hover{color:var(--accent)}
.fe-acc__sign{position:relative;width:1.1rem;height:1.1rem;flex:none}
.fe-acc__sign::before,.fe-acc__sign::after{content:"";position:absolute;background:currentColor;transition:transform var(--t-s) var(--e-out)}
.fe-acc__sign::before{left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%)}
.fe-acc__sign::after{top:0;bottom:0;left:50%;width:1.5px;transform:translateX(-50%)}
.fe-acc__btn[aria-expanded="true"] .fe-acc__sign::after{transform:translateX(-50%) scaleY(0)}
.fe-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-m) var(--e-in-out)}
.fe-acc__panel[data-open="true"]{grid-template-rows:1fr}
/* Zugeklappte Inhalte muessen auch aus dem Vorlesebaum verschwinden, sonst
   liest ein Screenreader Text vor, den der Schalter als eingeklappt meldet. */
.fe-acc__panel>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--t-m)}
.fe-acc__panel[data-open="true"]>div{visibility:visible;transition-delay:0s}
.fe-acc__panel p{padding-bottom:var(--s-6);max-width:var(--maxw-text);color:var(--fg-body);font-size:var(--fs-b2)}

/* ---------- Formularfelder ----------------------------------------------- */
.fe-field{position:relative;border-bottom:var(--hair) solid var(--line);padding-top:var(--s-6)}
.fe-field input,.fe-field textarea{
  width:100%;background:none;border:0;padding:0 0 var(--s-4);
  font-size:var(--fs-b1);color:var(--fg);resize:vertical;
}
.fe-field input:focus,.fe-field textarea:focus{outline:none}
.fe-field label{
  position:absolute;left:0;top:var(--s-6);pointer-events:none;
  font-family:var(--ff-caps);font-weight:var(--fw-caps);font-size:var(--fs-cap);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-muted);
  transition:transform var(--t-s) var(--e-out),color var(--t-s) var(--e-out);
}
.fe-field input:focus+label,.fe-field textarea:focus+label,
.fe-field input:not(:placeholder-shown)+label,.fe-field textarea:not(:placeholder-shown)+label{
  transform:translateY(-1.5rem) scale(.86);transform-origin:left center;color:var(--accent);
}
.fe-field::after{
  content:"";position:absolute;left:0;bottom:-1px;height:var(--rule);width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-s) var(--e-out);
}
.fe-field:focus-within::after{transform:scaleX(1)}