/* ============================================================================
   sections.css — HORIZONTALE BÜHNE + Panel-Layouts
   ----------------------------------------------------------------------------
   Aufbau:
     .fe-stage      fixierte Bühne, 100 svh hoch, schneidet ab
       .fe-track    Flex-Reihe aller Panels, wird per translate3d gefahren
         .panel     eine volle Bildschirmhöhe, eigene Breite je Panel
     .fe-spacer     erzeugt die Dokumenthöhe = Fahrstrecke (von JS gesetzt)

   Unter 900 px kippt alles zurück in normales vertikales Stapeln.
   ========================================================================== */

/* ---------- Bühne ---------------------------------------------------------- */
.fe-stage{
  position:fixed;inset:0;z-index:var(--z-base);
  overflow:hidden;
  height:100svh;
}
.fe-track{
  display:flex;align-items:stretch;
  height:100svh;width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.fe-spacer{width:100%;pointer-events:none}

/* ---------- Panel ---------------------------------------------------------- */
.panel{
  position:relative;flex:0 0 auto;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(5.5rem,11vh,8rem) clamp(1.5rem,3.4vw,4.5rem) clamp(3.5rem,7vh,5rem);
  background:var(--bg);color:var(--fg);
  border-left:var(--hair) solid var(--line);
}
.panel:first-child{border-left:0}
.panel--w100{width:100vw}
.panel--w80 {width:80vw}
.panel--w70 {width:70vw}
.panel--w62 {width:62vw}
.panel--w54 {width:54vw}
.panel--w46 {width:46vw}
.panel--w38 {width:38vw}
.panel--w30 {width:30vw}
.panel--auto{width:auto}
.panel--pad0{padding-inline:0}
.panel--center{justify-content:center;align-items:center;text-align:center}

/* Bildpanels: der Rahmen bestimmt die Breite, nicht umgekehrt */
.panel--media{
  padding-block:clamp(4.5rem,9vh,7rem) clamp(3rem,6vh,4.5rem);
  justify-content:center;
}
.panel--media .fe-media{height:100%;display:flex;flex-direction:column}
.panel--media .fe-media__frame{flex:1 1 auto;aspect-ratio:auto;width:auto}
.panel--media .fe-media__frame img{height:100%}
/* Höhenrhythmus — nicht jedes Bild ist gleich groß, das erzeugt die Kante */
.panel--tall  .fe-media{height:82%}
.panel--mid   .fe-media{height:66%;align-self:center;margin-block:auto}
.panel--short .fe-media{height:52%;align-self:center;margin-block:auto}
.panel--tall  {width:clamp(280px,30vw,460px)}
.panel--mid   {width:clamp(240px,26vw,400px)}
.panel--short {width:clamp(220px,22vw,340px)}
.panel--wide  {width:clamp(360px,44vw,720px)}
.panel--wide .fe-media{height:64%;align-self:center;margin-block:auto}

/* ---------- Panelkopf ------------------------------------------------------ */
.p-head{display:flex;flex-direction:column;gap:var(--s-4);margin-bottom:clamp(1.2rem,2.4vh,2rem)}
.p-title{font-size:var(--fs-d2);margin:0}
.p-body{font-size:var(--fs-b1);color:var(--fg-body);max-width:46ch;line-height:1.6}
.p-small{font-size:var(--fs-b2);color:var(--fg-body);max-width:40ch;line-height:1.6}
.p-foot{margin-top:auto;padding-top:clamp(1rem,2.4vh,2rem)}
.p-no{
  font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:clamp(2.6rem,5.6vw,5.5rem);line-height:.8;color:transparent;
  -webkit-text-stroke:1px var(--line-strong);margin-bottom:var(--s-5);
}

/* ---------- 01 · HERO ------------------------------------------------------ */
/* Zwei Spalten: monumentale Typografie links, randabfallende Bildspalte rechts.
   Das ist der Auftakt — er muss ohne Scrollen alles sagen.                     */
.p-hero{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,27vw,480px);
  gap:clamp(1.5rem,3.5vw,4rem);align-items:stretch;
  padding-right:0;
}
.p-hero__col{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.p-hero__art{position:relative;height:100%;overflow:hidden;align-self:stretch}
.p-hero__art .fe-media,.p-hero__art .fe-media__frame{height:100%}
.p-hero__art .fe-media__frame{aspect-ratio:auto}
.p-hero__art .fe-media__img{
  transform:scale(1.08) translate3d(0,calc(var(--pc,0) * -2.5% * var(--parallax)),0);
}
.p-hero__art .fe-media__cap{
  position:absolute;left:.9rem;bottom:.9rem;margin:0;z-index:2;
  color:rgba(255,255,255,.72);
}
.p-hero__mono{font-size:var(--fs-d0)}
.p-hero__mono em{font-style:normal;color:var(--accent)}
.p-hero__meta{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-6);
  margin-top:clamp(1.4rem,3vh,2.6rem);padding-top:var(--s-5);border-top:var(--hair) solid var(--line);
}
.p-hero__claim{max-width:40ch;font-size:var(--fs-lead);line-height:1.45;color:var(--fg-body)}
.p-hero__stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem)}
.p-hero__stat b{display:block;font-family:var(--ff-display);font-weight:var(--fw-display);font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1}
.p-hero__stat span{display:block;margin-top:.35rem;font-family:var(--ff-caps);font-weight:var(--fw-caps);font-size:var(--fs-cap-s);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-muted)}

/* ---------- 02 · MANIFEST -------------------------------------------------- */
.p-manifest__quote{
  font-size:clamp(1.5rem,3.1vw,3.1rem);line-height:1.1;letter-spacing:-.02em;font-weight:500;
}
.p-manifest__quote b{font-weight:500;color:var(--accent)}

/* ---------- 03 · ZAHLEN ---------------------------------------------------- */
.p-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;align-content:center;flex:1 1 auto}
.p-facts__cell{padding:clamp(1.2rem,3vh,2.4rem) clamp(1rem,2vw,2rem);border-top:var(--hair) solid var(--line)}
.p-facts__cell:nth-child(odd){padding-left:0}
.p-facts__cell:nth-child(-n+2){border-top:0}
.p-facts .fe-fact__num{font-size:clamp(2.4rem,4.6vw,4.4rem)}

/* ---------- 04 · ROSTER ---------------------------------------------------- */
.p-roster__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s-6);margin-bottom:clamp(1.2rem,3vh,2.4rem)}

/* ---------- 05 · MARKENKAPITEL --------------------------------------------- */
.p-chapter__facts{margin-top:clamp(1rem,2.6vh,2rem);border-top:var(--hair) solid var(--line)}
.p-chapter__fact{display:flex;justify-content:space-between;gap:var(--s-5);padding:var(--s-3) 0;border-bottom:var(--hair) solid var(--line);font-size:var(--fs-b2)}
.p-chapter__fact dt{color:var(--fg-muted);font-family:var(--ff-caps);font-weight:var(--fw-caps);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--fs-cap-s)}
.p-chapter__fact dd{margin:0;text-align:right}
.p-chapter__flag{display:flex;height:clamp(.3rem,.55vw,.5rem);width:100%;margin-block:var(--s-4) var(--s-5)}
.p-chapter__flag i{flex:1;transform:scaleY(0);transform-origin:top;transition:transform var(--t-l) var(--e-out) calc(var(--stagger) * var(--fe-i,0))}
.is-in .p-chapter__flag i{transform:scaleY(1)}

/* ---------- 06 · LEISTUNGEN ------------------------------------------------ */
.p-services{display:grid;grid-template-rows:repeat(3,auto);align-content:center;gap:0;flex:1 1 auto}
.p-services .fe-card{padding-block:clamp(.9rem,2.2vh,1.6rem)}
.p-services .fe-card__title{margin-top:var(--s-2);font-size:clamp(1.15rem,1.7vw,1.6rem)}
.p-services .fe-card__body{margin-top:var(--s-2);font-size:var(--fs-b2);max-width:40ch}

/* ---------- 07 · PROZESS-KARTE --------------------------------------------- */
.p-step .fe-media{height:52%;margin-bottom:var(--s-5)}
.p-step h3{font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;
  font-size:clamp(1.2rem,1.9vw,1.8rem);line-height:.98;margin-top:var(--s-4)}
.p-step p{margin-top:var(--s-3);font-size:var(--fs-b2);color:var(--fg-body);max-width:34ch;line-height:1.55}

/* ---------- 08 · ZITAT ----------------------------------------------------- */
.p-quote{overflow:hidden}
.p-quote__bg{position:absolute;inset:0;opacity:.26}
.p-quote__bg .fe-media,.p-quote__bg .fe-media__frame{height:100%}
.p-quote__bg .fe-media__frame{aspect-ratio:auto}
.p-quote blockquote{
  position:relative;z-index:var(--z-content);margin:0;max-width:20ch;
  font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;
  font-size:clamp(2rem,5.2vw,5rem);line-height:.94;letter-spacing:var(--tracking-display);
}
.p-quote cite{position:relative;z-index:var(--z-content);display:block;margin-top:var(--s-7);
  font-family:var(--ff-caps);font-weight:var(--fw-caps);font-style:normal;font-size:var(--fs-cap);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-muted)}

/* ---------- 09 · SHOWROOM / AKKORDEON -------------------------------------- */
.p-showroom .fe-acc__btn{padding-block:clamp(.8rem,2vh,1.4rem);font-size:clamp(1.1rem,1.7vw,1.6rem)}
.p-showroom .fe-acc__panel p{padding-bottom:var(--s-5);font-size:var(--fs-b2)}

/* ---------- 10 · KONTAKT --------------------------------------------------- */
.p-contact__block+.p-contact__block{margin-top:var(--s-5);padding-top:var(--s-5);border-top:var(--hair) solid var(--line)}
.p-contact__block h3,.p-contact__block h4{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);margin-bottom:var(--s-2)}
.p-contact__big{font-family:var(--ff-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:clamp(1.1rem,1.9vw,1.7rem);line-height:1.05}
.p-form{display:flex;flex-direction:column;gap:0}
.p-form .fe-field{padding-top:var(--s-5)}

/* ---------- 11 · FOOTER ---------------------------------------------------- */
.p-footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,2.5rem);margin-bottom:clamp(1.2rem,3vh,2.2rem)}
.p-footer h3,.p-footer h4{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);margin-bottom:var(--s-3)}
.p-footer ul{list-style:none;margin:0;padding:0}
.p-footer li+li{margin-top:var(--s-2)}
.p-footer a{font-size:var(--fs-b2)}
.p-footer__wordmark{
  display:block;width:100%;font-family:var(--ff-display);font-weight:var(--fw-display);
  text-transform:uppercase;line-height:.8;letter-spacing:-.025em;white-space:nowrap;
  font-size:clamp(2rem,9vw,9rem);
  color:transparent;-webkit-text-stroke:1px var(--line-strong);
  transition:color var(--t-l) var(--e-out);
}
.p-footer__wordmark.is-in{color:color-mix(in srgb,var(--fg) 9%,transparent)}
.p-footer__legal{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;
  padding-top:var(--s-4);border-top:var(--hair) solid var(--line);font-size:var(--fs-cap-s);color:var(--fg-muted)}
.p-footer__legal a{font-size:inherit}
.p-tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:clamp(1rem,2.4vh,1.8rem)}

/* ---------- Kapitelmarke am Panelrand -------------------------------------- */
.p-edge{
  position:absolute;top:clamp(5.5rem,11vh,8rem);right:clamp(.6rem,1vw,1.2rem);
  writing-mode:vertical-rl;
  font-family:var(--ff-caps);font-weight:var(--fw-caps);font-size:var(--fs-cap-s);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-muted);
  opacity:.7;pointer-events:none;
}

/* ============================================================================
   STAPEL-MODUS  ≤ 900 px — die Seite wird wieder eine normale vertikale Seite
   ========================================================================== */
@media (max-width:900px){
  .fe-stage{position:static;overflow:visible;height:auto}
  .fe-track{display:block;width:100%;height:auto;transform:none!important;will-change:auto}
  .fe-spacer{display:none}

  .panel{
    width:100%!important;height:auto;min-height:auto;
    padding:clamp(3rem,9vh,5rem) var(--pad-x);
    border-left:0;border-top:var(--hair) solid var(--line);
  }
  .panel--media{padding-block:clamp(2rem,5vh,3rem)}
  .panel--media .fe-media{height:auto}
  .panel--media .fe-media__frame{aspect-ratio:var(--ratio-editorial);flex:none}
  .panel--tall .fe-media__frame{aspect-ratio:var(--ratio-portrait)}
  .panel--wide .fe-media__frame,.panel--short .fe-media__frame{aspect-ratio:var(--ratio-landscape)}
  .p-hero{display:flex;min-height:100svh;justify-content:flex-end;padding-top:clamp(6rem,14vh,9rem)}
  .p-hero__art{display:none}
  .p-facts{grid-template-columns:1fr 1fr}
  .p-footer__cols{grid-template-columns:1fr}
  .p-edge{display:none}
  .p-quote{min-height:70svh}
}
@media (max-width:560px){
  .p-hero__stats{width:100%;justify-content:space-between}
  .p-facts{grid-template-columns:1fr}
  .p-facts__cell{padding-left:0!important;border-top:var(--hair) solid var(--line)!important}
  .p-facts__cell:first-child{border-top:0!important}
}