/* ==========================================================
   ENTWURF v2 · CFX-Sequenz, Der Kern, Referenzen, Stimmen,
   Fundament. Ergänzt /assets/styles.css (Design-Tokens).

   Motion-System:
   --dur-s 300ms Mikro · --dur-m 650ms Reveal · --dur-l 1100ms Szene
   Eine Kurve für alles Einfahrende: var(--ease) aus styles.css
   ========================================================== */

:root{
  --dur-s: .3s;
  --dur-m: .65s;
  --dur-l: 1.1s;
  --tinte-invers: #E9EEEF;
}

/* ---------- Atmosphäre: Korn + Lichtschein für dunkle Bühnen ---------- */
.grain{ position:relative; }
.grain > .wrap, .grain > .ref-rows{ position:relative; z-index:2; }
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}

/* ==========================================================
   0 · HERO: animierter Aufbau der Bildmarke statt Foto
   ========================================================== */
.hero-logo-wrap{ align-self:center; width:100%; justify-content:center; }
.hero-logo-wrap::after{ display:none; }
.hero-logo{ position:relative; width:min(82%,29rem); aspect-ratio:162/132; }
.hero-logo::before{
  content:""; position:absolute; inset:-16%;
  background:radial-gradient(closest-side, rgba(0,151,178,.17), transparent 72%);
}
.hlogo{
  position:relative; display:block; width:100%; height:auto; overflow:visible;
  animation:hlogo-float 7.5s ease-in-out infinite alternate;
}
@keyframes hlogo-float{ from{ transform:translateY(-6px); } to{ transform:translateY(8px); } }

.hl-ground{ opacity:0; transition:opacity .8s var(--ease) .2s; }
.hl-shadow{
  opacity:0; transform:translate(-6px,-6px);
  transition:opacity .7s var(--ease) 1.2s, transform .7s var(--ease) 1.2s;
}
.hl-frame{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s var(--ease) .3s;
}
.hl-bar{ transform:translateY(92px); transition:transform .9s cubic-bezier(.18,.9,.24,1.06); }
.hb1{ transition-delay:1.15s; } .hb2{ transition-delay:1.32s; } .hb3{ transition-delay:1.49s; }
.loaded .hl-ground{ opacity:1; }
.loaded .hl-shadow{ opacity:1; transform:none; }
.loaded .hl-frame{ stroke-dashoffset:0; }
.loaded .hl-bar{ transform:none; }

/* Wiederkehrende Tempo-Streifen, nachdem die Marke steht */
.hl-streaks line{ stroke-dasharray:.55 .45; stroke-dashoffset:.55; opacity:0; }
.loaded .hl-streaks line{ animation:hl-streak 7s linear 2.8s infinite; }
.hl-streaks line:nth-child(2){ animation-delay:3.1s !important; }
.hl-streaks line:nth-child(3){ animation-delay:3.4s !important; }
@keyframes hl-streak{
  0%  { stroke-dashoffset:1; opacity:0; }
  4%  { opacity:.85; }
  18% { stroke-dashoffset:-1; opacity:0; }
  100%{ stroke-dashoffset:-1; opacity:0; }
}
@media (max-width:920px){
  .hero-logo-wrap{ order:-1; max-height:none; margin:0 0 .5rem; }
  .hero-logo{ width:clamp(10rem,44vw,14rem); margin:0 auto; }
}

/* ==========================================================
   1 · CFX-SEQUENZ
   ========================================================== */
.cfx{
  background:
    radial-gradient(60rem 40rem at 12% 8%, rgba(0,151,178,.13), transparent 60%),
    radial-gradient(50rem 36rem at 88% 90%, rgba(0,151,178,.07), transparent 60%),
    var(--schwarz);
  color:var(--tinte-invers);
  padding:clamp(1.2rem,3vw,2.2rem) 0 0;
  overflow:clip;
}

/* Der Faden: zieht den Impuls aus dem Hero in die CFX-Sequenz */
.cfx-thread{
  width:2px; height:clamp(4rem,9vw,7rem);
  margin:0 auto clamp(1.8rem,3.5vw,2.8rem); position:relative;
  background:linear-gradient(to bottom, transparent, var(--petrol));
}
.cfx-thread::after{
  content:""; position:absolute; left:50%; bottom:-5px;
  width:11px; height:11px; transform:translateX(-50%); border-radius:50%;
  background:var(--petrol); box-shadow:0 0 18px var(--petrol-hell);
}
.cfx-thread.reveal{
  opacity:1; transform:scaleY(0); transform-origin:top;
  transition:transform var(--dur-l) var(--ease);
}
.cfx-thread.reveal.in{ transform:scaleY(1); }
.cfx-head{ text-align:center; margin-left:auto; margin-right:auto; }
.cfx-head .eyebrow,.voices-head .eyebrow{ justify-content:center; }
.cfx-head{ max-width:50rem; margin-bottom:clamp(1rem,3vw,2.5rem); }
.cfx-head h2{ font-size:clamp(1.9rem,4vw,2.9rem); color:#fff; }
.cfx .eyebrow{ color:var(--petrol-hell); }

.cfx-layout{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,5.5rem); align-items:start;
}

/* --- Die Bühne (links, sticky) --- */
.cfx-stage{
  position:sticky; top:var(--header-h);
  height:calc(100vh - var(--header-h)); min-height:560px;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.8rem,3.2vw,3rem);
}
.cfx-ghost{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  font-weight:800; font-stretch:122%; line-height:1;
  font-size:clamp(20rem,34vw,34rem);
  color:transparent;
  -webkit-text-stroke:1px rgba(44,183,208,.16);
  user-select:none; pointer-events:none;
  transition:opacity var(--dur-m);
}
.cfx-ghost.swap{ animation:ghost-swap var(--dur-l) var(--ease); }
@keyframes ghost-swap{
  0%  { opacity:0; transform:translateY(-44%); }
  100%{ opacity:1; transform:translateY(-50%); }
}

/* Schwebende Partikel – nur im Change-Zustand */
.cfx-dust{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--petrol); filter:blur(1px); opacity:0;
  transition:opacity var(--dur-m);
}
.cfx-stage[data-step="c"] .cfx-dust{ opacity:.5; }
.cfx-dust.d1{ left:8%;  top:18%; animation:dust 11s ease-in-out infinite alternate; }
.cfx-dust.d2{ left:64%; top:12%; width:5px; height:5px; animation:dust 9s  ease-in-out -3s infinite alternate; }
.cfx-dust.d3{ left:30%; top:74%; width:4px; height:4px; animation:dust 13s ease-in-out -6s infinite alternate; }
.cfx-dust.d4{ left:78%; top:64%; animation:dust 10s ease-in-out -8s infinite alternate; }
@keyframes dust{
  from{ transform:translate(0,0); }
  to  { transform:translate(26px,-34px); }
}

/* --- Das aktive Wort --- */
.cfx-wordbox{ position:relative; height:clamp(3.4rem,6.4vw,6rem); }
.cfx-word{
  position:absolute; inset:0; margin:0;
  display:flex; align-items:baseline;
  font-size:clamp(3rem,5.8vw,5.4rem); font-weight:800; font-stretch:122%;
  line-height:1; letter-spacing:-.02em; color:#fff; white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity var(--dur-s), visibility 0s var(--dur-s);
}
.cfx-word.is-active{ opacity:1; visibility:visible; transition:opacity var(--dur-s); }
.cfx-word .ini{ color:var(--petrol); }
.cfx-word .tail{ display:inline-flex; perspective:720px; }
.cfx-word .g{ display:inline-block; transform-origin:50% 100%; }

/* C · Change: Buchstaben kippen der Reihe nach ein */
.cfx-word[data-w="c"].is-active .g{ animation:w-flip .7s var(--ease) both; animation-delay:calc(var(--i) * 60ms); }
@keyframes w-flip{
  0%  { opacity:0; transform:rotateX(-95deg) translateY(.14em); }
  60% { opacity:1; transform:rotateX(16deg); }
  100%{ opacity:1; transform:none; }
}
/* F · Focused: aus der Unschärfe scharf gestellt */
.cfx-word[data-w="f"].is-active .g{ animation:w-focus .85s var(--ease) both; animation-delay:calc(var(--i) * 45ms); }
@keyframes w-focus{
  0%  { opacity:0; filter:blur(16px); transform:scale(1.5); }
  100%{ opacity:1; filter:blur(0); transform:none; }
}
/* X · Xeleration: schießt mit Schräglage herein */
.cfx-word[data-w="x"].is-active .g{ animation:w-dash .4s cubic-bezier(.2,.9,.2,1) both; animation-delay:calc(var(--i) * 22ms); }
@keyframes w-dash{
  0%  { opacity:0; transform:translateX(-1.5em) skewX(-30deg); }
  70% { opacity:1; transform:translateX(.05em) skewX(-5deg); }
  100%{ opacity:1; transform:none; }
}
.cfx-word .streak{
  position:absolute; left:.55em; right:-8%; top:54%; height:.075em;
  background:linear-gradient(to right, transparent, var(--petrol-hell) 55%, transparent);
  transform:scaleX(0); transform-origin:left; opacity:0; pointer-events:none;
}
.cfx-word[data-w="x"].is-active .streak{ animation:w-streak .95s ease-out .1s both; }
@keyframes w-streak{
  0%  { transform:scaleX(0); opacity:.9; }
  55% { transform:scaleX(1); opacity:.9; }
  100%{ transform:scaleX(1) translateX(28%); opacity:0; }
}

/* --- Die Bildmarke (SVG): Chaos → Aufbau → Beschleunigung --- */
.cfx-mark{ width:min(44%,13.5rem); overflow:visible; }
.m-ground,.m-shadow{ opacity:0; transition:opacity var(--dur-l) var(--ease); }
.m-shadow{ transition-delay:.55s; }
.m-frame{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset var(--dur-l) var(--ease) .1s;
}
.m-bar{
  transform-box:fill-box; transform-origin:50% 50%;
  transition:transform var(--dur-l) var(--ease), opacity var(--dur-m);
}
.b1{ transition-delay:.22s; } .b2{ transition-delay:.34s; } .b3{ transition-delay:.46s; }

.cfx-stage[data-step="c"] .m-bar{ opacity:.4; }
.cfx-stage[data-step="c"] .b1{ transform:translate(-26px,-30px) rotate(-24deg); animation:drift1 5s ease-in-out infinite alternate; }
.cfx-stage[data-step="c"] .b2{ transform:translate(32px,20px) rotate(31deg);   animation:drift2 6s ease-in-out infinite alternate; }
.cfx-stage[data-step="c"] .b3{ transform:translate(-10px,36px) rotate(-40deg); animation:drift3 7s ease-in-out infinite alternate; }
@keyframes drift1{ from{ translate:0 0; } to{ translate:3px -4px; } }
@keyframes drift2{ from{ translate:0 0; } to{ translate:-4px 3px; } }
@keyframes drift3{ from{ translate:0 0; } to{ translate:2px 4px; } }

.cfx-stage[data-step="f"] .m-frame,
.cfx-stage[data-step="x"] .m-frame{ stroke-dashoffset:0; }
.cfx-stage[data-step="f"] .m-ground,
.cfx-stage[data-step="x"] .m-ground,
.cfx-stage[data-step="f"] .m-shadow,
.cfx-stage[data-step="x"] .m-shadow{ opacity:1; }
.cfx-stage[data-step="f"] .m-bar,
.cfx-stage[data-step="x"] .m-bar{ transform:none; opacity:1; }

.m-streaks line{
  stroke-dasharray:.55 .45; stroke-dashoffset:.55; opacity:0;
  transition:opacity var(--dur-s);
}
.cfx-stage[data-step="x"] .cfx-mark{ transform:skewX(-7deg); }
.cfx-mark{ transition:transform var(--dur-l) var(--ease); }
.cfx-stage[data-step="x"] .m-streaks line{ opacity:.85; animation:streak-run 1.1s linear infinite; }
.m-streaks line:nth-child(2){ animation-delay:-.35s !important; }
.m-streaks line:nth-child(3){ animation-delay:-.7s !important; }
@keyframes streak-run{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:-1; } }

/* --- Fortschritts-Schiene --- */
.cfx-rail{
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--grau-dunkel);
}
.cfx-rail .track{
  width:min(11rem,32vw); height:2px; background:var(--linie-dunkel);
  overflow:hidden; border-radius:2px;
}
.cfx-rail .track i{
  display:block; height:100%; background:var(--petrol);
  transform:scaleX(var(--p,0)); transform-origin:left;
}

/* --- Die drei Schritte (rechte Spalte) --- */
.cfx-step{ min-height:86vh; display:flex; flex-direction:column; justify-content:center; padding:2rem 0; }
.cfx-step:first-child{ min-height:66vh; }
.cfx-step:last-child{ min-height:96vh; }
.cfx-step .num{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--petrol-hell); margin:0 0 .6rem;
}
.cfx-step h3{ font-size:clamp(1.7rem,3.1vw,2.6rem); color:#fff; margin:0 0 1.1rem; }
.cfx-step .body{ color:var(--grau-dunkel); max-width:33rem; margin:0; }

/* Zeilen-Reveal: Text fährt aus einer Maske nach oben */
.lm{ display:inline-block; }
.js-cfx .num, .js-cfx .cfx-step h3{ overflow:hidden; }
.js-cfx .lm{
  transform:translateY(115%);
  transition:transform var(--dur-m) var(--ease);
}
.js-cfx .cfx-step h3 .lm{ transition-delay:.08s; }
.js-cfx .cfx-step .body{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--dur-m) var(--ease) .18s, transform var(--dur-m) var(--ease) .18s;
}
.js-cfx .cfx-step.is-active .lm{ transform:none; }
.js-cfx .cfx-step.is-active .body{ opacity:1; transform:none; }
.js-cfx .cfx-step{ opacity:.3; transition:opacity var(--dur-m); }
.js-cfx .cfx-step.is-active{ opacity:1; }

@media (max-width:920px){
  .cfx-layout{ grid-template-columns:minmax(0,1fr); gap:0; }
  .cfx-stage{
    top:var(--header-h); z-index:5; height:auto; min-height:0;
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:1rem; padding:.85rem 0;
    background:var(--kohle);
    border-bottom:1px solid var(--linie-dunkel);
  }
  .cfx-ghost,.cfx-dust,.cfx-rail{ display:none; }
  .cfx-wordbox{ height:2.6rem; flex:1; min-width:0; }
  .cfx-word{ font-size:clamp(1.5rem,7vw,2.2rem); }
  .cfx-mark{ width:5.2rem; flex:none; }
  .cfx-step{ min-height:58vh; }
  .cfx-step:first-child{ min-height:52vh; }
  .cfx-step:last-child{ min-height:72vh; }
}

/* ==========================================================
   2 · DER KERN
   ========================================================== */
.manifest{
  background:
    radial-gradient(46rem 34rem at 82% 12%, rgba(0,151,178,.10), transparent 60%),
    var(--schwarz);
  color:var(--tinte-invers);
  padding:clamp(4.5rem,9vw,7.5rem) 0;
}
.manifest-grid{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(2.2rem,5vw,5rem); align-items:center;
}
.manifest-photo{
  margin:0; position:relative; aspect-ratio:4/5; max-width:26rem;
}
.manifest-photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:contrast(1.04) saturate(1.05);
  border-radius:var(--radius);
}
.manifest-photo::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(165deg, rgba(0,151,178,.16), transparent 50%, rgba(5,6,7,.22));
  mix-blend-mode:soft-light;
}
.manifest-photo .corner{
  position:absolute; width:1.35rem; height:1.35rem;
  border:0 solid var(--petrol);
}
.corner.tl{ left:-.55rem; top:-.55rem;   border-left-width:3px; border-top-width:3px; }
.corner.tr{ right:-.55rem; top:-.55rem;  border-right-width:3px; border-top-width:3px; }
.corner.bl{ left:-.55rem; bottom:-.55rem; border-left-width:3px; border-bottom-width:3px; }
.corner.br{ right:-.55rem; bottom:-.55rem; border-right-width:3px; border-bottom-width:3px; }

.manifest .eyebrow{ color:var(--petrol-hell); }
.manifest-quote{ margin:0 0 2rem; }
.manifest-quote p{
  margin:0; font-size:clamp(1.55rem,3vw,2.55rem); font-weight:750; font-stretch:112%;
  line-height:1.28; letter-spacing:-.012em; color:#fff;
}
.js-manifest .manifest-quote .w{ color:rgba(233,238,239,.17); transition:color .32s; }
.js-manifest .manifest-quote .w.on{ color:#fff; }
.manifest-quote .hl{ font-style:normal; position:relative; white-space:nowrap; color:var(--petrol-hell); }
.js-manifest .manifest-quote .hl .w{ color:rgba(44,183,208,.28); }
.js-manifest .manifest-quote .hl .w.on{ color:var(--petrol-hell); }
.manifest-quote .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.09em;
  background:var(--petrol); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-m) var(--ease);
}
.manifest-quote .hl.lit::after{ transform:scaleX(1); }
.manifest-sig{ display:grid; gap:.15rem; padding-left:1.1rem; border-left:3px solid var(--petrol); }
.manifest-sig strong{ color:#fff; }
.manifest-sig span{ font-size:.9rem; color:var(--grau-dunkel); }

@media (max-width:920px){
  .manifest-grid{ grid-template-columns:minmax(0,1fr); }
  .manifest-photo{ max-width:17rem; }
}


/* ==========================================================
   2b · LÖSUNGEN (Flip-Kacheln)
   ========================================================== */
.sol{
  background:
    radial-gradient(52rem 36rem at 90% 6%, rgba(0,151,178,.08), transparent 60%),
    var(--kohle);
  color:var(--tinte-invers);
  border-top:1px solid var(--linie-dunkel);
  padding:clamp(4rem,8vw,6.5rem) 0;
}
.sol .eyebrow{ color:var(--petrol-hell); }
.sol-head{ max-width:52rem; margin-bottom:clamp(2rem,4vw,3rem); }
.sol-head h2{ font-size:clamp(1.9rem,4vw,2.9rem); color:#fff; }
.sol-lead{ color:var(--grau-dunkel); margin:0; }

.sol-grid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem; perspective:1500px;
}
.sol-card{
  display:block; aspect-ratio:3/4; text-decoration:none; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.sol-card:focus-visible{ outline:2px solid var(--petrol); outline-offset:4px; border-radius:var(--radius); }
.sol-inner{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .8s var(--ease);
}
.sol-card:hover .sol-inner,
.sol-card:focus-visible .sol-inner,
.sol-card.is-flipped .sol-inner{ transform:rotateY(180deg); }
.sol-face{
  position:absolute; inset:0; display:flex; flex-direction:column;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius); padding:1.4rem 1.3rem;
  border:1px solid var(--linie-dunkel);
}
.sol-front{
  background:linear-gradient(170deg,#181D1F,var(--anthrazit));
  justify-content:flex-end; gap:.45rem; overflow:hidden;
}
.sol-front::before{
  content:""; position:absolute; right:-32%; bottom:-38%; width:78%;
  aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(0,151,178,.24), transparent 70%);
}
.sol-num{
  position:absolute; top:1.15rem; left:1.3rem;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em;
  color:var(--petrol-hell);
}
.sol-front strong{
  position:relative; font-size:clamp(1.25rem,1.5vw,1.6rem); font-weight:800;
  font-stretch:118%; letter-spacing:-.015em; line-height:1.08; color:#fff;
}
.sol-meta{
  position:relative; font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grau-dunkel);
}
.sol-flip{
  position:absolute; top:1rem; right:1.05rem; width:1.9rem; height:1.9rem;
  display:grid; place-items:center; border:1px solid var(--linie-dunkel);
  border-radius:50%; color:var(--petrol-hell); font-size:1.05rem;
  transition:transform var(--dur-s) var(--ease), border-color var(--dur-s);
}
.sol-card:hover .sol-flip{ transform:rotate(-180deg); border-color:var(--petrol); }
.sol-back{
  background:linear-gradient(170deg,#0B3944,#07242B);
  border-color:rgba(44,183,208,.35);
  transform:rotateY(180deg);
  justify-content:space-between; gap:1rem;
}
.sol-back-body{ color:var(--tinte-invers); font-size:clamp(.78rem,.95vw,.9rem); line-height:1.5; }
.sol-more{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:#fff; }
.sol-more .chev{ color:var(--petrol-hell); transition:transform var(--dur-s); }
.sol-card:hover .sol-more .chev{ transform:translateX(4px); }

@media (max-width:1080px){
  .sol-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sol-card{ aspect-ratio:4/3; }
  .sol-card:last-child{ grid-column:1 / -1; aspect-ratio:2.3/1; }
  .sol-front strong{ font-size:clamp(1.35rem,2.4vw,1.6rem); }
  .sol-back-body{ font-size:.9rem; }
}
@media (max-width:560px){
  .sol-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .sol-card{ aspect-ratio:3/4; }
  .sol-card:last-child{ grid-column:1 / -1; aspect-ratio:2.1/1; }
  .sol-face{ padding:1rem .85rem; }
  .sol-num{ top:.9rem; left:.85rem; font-size:.62rem; }
  .sol-flip{ top:.75rem; right:.7rem; width:1.6rem; height:1.6rem; font-size:.9rem; }
  .sol-front strong{ font-size:1.12rem; }
  .sol-meta{ font-size:.5rem; }
  .sol-back-body{ font-size:.7rem; line-height:1.45; }
  .sol-more{ font-size:.78rem; }
}

/* ==========================================================
   3 · REFERENZEN (White-Label-Logowand)
   ========================================================== */
.refs{
  background:var(--kohle); color:var(--tinte-invers);
  padding:clamp(4rem,8vw,6rem) 0;
  border-top:1px solid var(--linie-dunkel);
  overflow:clip;
}
.refs .eyebrow{ color:var(--petrol-hell); }
.refs-head{ margin-bottom:clamp(2rem,4vw,3rem); }
.refs-head h2{ font-size:clamp(1.9rem,4vw,2.9rem); color:#fff; }
.refs-lead{ color:var(--grau-dunkel); max-width:34rem; margin:0; }

.ref-rows{
  display:grid; gap:clamp(1.6rem,3vw,2.4rem);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ref-row{ display:flex; overflow:hidden; }
.ref-track{
  display:flex; align-items:center; gap:clamp(2.6rem,5vw,4.5rem);
  margin:0; padding:0 clamp(1.3rem,2.5vw,2.25rem) 0 0; list-style:none; flex:none;
  animation:ref-scroll 64s linear infinite;
}
.ref-row.rev .ref-track{ animation-direction:reverse; animation-duration:74s; }
.ref-rows:hover .ref-track{ animation-play-state:paused; }
@keyframes ref-scroll{ to{ transform:translateX(-100%); } }

.ref{ flex:none; display:flex; align-items:center; opacity:.62; transition:opacity var(--dur-s); }
.ref:hover{ opacity:1; }
.ref-logo{ height:clamp(30px,3.4vw,46px); width:auto; }
.ref-logo[src*="landratsamt"], .ref-logo[src*="innfactory"], .ref-logo[src*="holzbau"],
.ref-logo[src*="hanns-seidel"], .ref-logo[src*="neubeuern"]{ height:clamp(34px,3.9vw,54px); }
.ref-logo[src*="forum"], .ref-logo[src*="akademie-herkert"], .ref-logo[src*="quadrate"]{ height:clamp(42px,4.6vw,64px); }
.ref-combo{ flex-direction:column; gap:.5rem; }
.ref-combo .ref-logo{ height:clamp(24px,2.7vw,36px); }
.ref-sub{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grau-dunkel); white-space:nowrap;
}
.ref-mark{
  font-weight:750; font-stretch:116%; text-transform:uppercase;
  font-size:clamp(.82rem,1.15vw,1.02rem); line-height:1.3; letter-spacing:.04em;
  color:#fff; text-align:center; white-space:nowrap;
}
.refs-kpis{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  padding-top:clamp(1.8rem,3.5vw,2.6rem);
  border-top:1px solid var(--linie-dunkel);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:1.8rem 2.2rem; align-items:center;
}
.kpi{ --kp:1; margin:0; display:grid; gap:.15rem; align-content:start; position:relative; padding-top:1rem; }
.kpi::before{
  content:""; position:absolute; left:0; top:0; width:3.2rem; height:2px;
  background:var(--petrol);
}
.kpi-num{
  font-weight:800; font-stretch:122%; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(2.6rem,4.8vw,4.4rem); color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden;
}
.kpi-num .sym{ color:var(--petrol-hell); }
.kpi-num b,.kpi-num .sym{ display:inline-block; }
.kpi-bar{
  display:block; width:min(9rem,82%); height:2px; margin:.7rem 0 .5rem;
  background:var(--linie-dunkel); position:relative; overflow:hidden;
}
.kpi-bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--petrol),var(--petrol-hell));
  transform:scaleX(var(--kp)); transform-origin:left;
}
.kpi-label{ color:var(--grau-dunkel); font-size:1rem; max-width:16rem; }
.kpi-cta{ justify-self:end; }

/* Choreografie (nur mit JS und ohne Reduced Motion aktiv) */
.js-kpis .kpi::before{ transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .1s; }
.js-kpis .kpi.in::before{ transform:scaleX(1); }
.js-kpis .kpi-num b{ transform:translateY(115%); transition:transform .8s var(--ease) .25s; }
.js-kpis .kpi.in .kpi-num b{ transform:none; }
.js-kpis .kpi-num .sym{
  opacity:0; transform:translateX(-.9em) skewX(-18deg);
  transition:transform .55s cubic-bezier(.2,.9,.25,1) .75s, opacity .4s ease .75s;
}
.js-kpis .kpi.in .kpi-num .sym{ opacity:1; transform:none; }
.js-kpis .kpi-label{
  opacity:0; transform:translateY(10px);
  transition:opacity .6s var(--ease) .85s, transform .6s var(--ease) .85s;
}
.js-kpis .kpi.in .kpi-label{ opacity:1; transform:none; }
.js-kpis .kpi-cta .btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  animation:cta-pulse 3.8s ease-out 2.4s infinite;
}
.kpi-cta .btn{ position:relative; }
@keyframes cta-pulse{
  0%  { box-shadow:0 0 0 0 rgba(0,151,178,.45); }
  55% { box-shadow:0 0 0 16px rgba(0,151,178,0); }
  100%{ box-shadow:0 0 0 16px rgba(0,151,178,0); }
}
@media (max-width:820px){
  .refs-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem 1.2rem; }
  .kpi-cta{ grid-column:1 / -1; justify-self:stretch; }
  .kpi-cta .btn{ width:100%; justify-content:center; }
}
@media (max-width:560px){
  .kpi-num{ font-size:2.15rem; }
  .kpi-label{ font-size:.88rem; }
}

/* ==========================================================
   4 · STIMMEN (rotierende Einzelstimme)
   ========================================================== */
.voices{
  background:
    radial-gradient(44rem 30rem at 14% 88%, rgba(0,151,178,.09), transparent 60%),
    var(--schwarz);
  color:var(--tinte-invers);
  padding:clamp(4rem,8vw,6.5rem) 0;
}
.voices{ text-align:center; }
.voices .wrap{ position:relative; }
.voices .eyebrow{ color:var(--petrol-hell); }
.voices-head{ margin:0 auto clamp(2.4rem,4.5vw,3.4rem); }
.voices-head h2{ font-size:clamp(1.9rem,4vw,2.9rem); color:#fff; }

/* Riesiges Anführungszeichen als Wasserzeichen */
.voice-mark{
  position:absolute; right:clamp(-1rem,2vw,2rem); top:-4.5rem;
  font-size:clamp(11rem,20vw,18rem); font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(44,183,208,.15);
  pointer-events:none; user-select:none;
}

.voice-stage{ position:relative; max-width:52rem; margin:0 auto; }
.voice{ margin:0; padding:0; position:relative; }
.voice blockquote{ margin:0; }
.voice p{
  margin:0; font-size:clamp(1.35rem,2.7vw,2.1rem); font-weight:750; font-stretch:112%;
  line-height:1.4; color:#fff; letter-spacing:-.012em;
}
/* Ohne JavaScript: alle Stimmen untereinander; mit JS: eine große Bühne */
.voice + .voice{ margin-top:2rem; }
.js-voices .voice + .voice{ margin-top:0; }
.js-voices .voice-stage{ min-height:var(--vh,11rem); display:grid; align-items:center; }
.js-voices .voice{
  grid-area:1/1;
  opacity:0; visibility:hidden; filter:blur(12px); transform:translateY(18px) scale(.985);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease),
             filter var(--dur-m) var(--ease), visibility 0s var(--dur-m);
}
.js-voices .voice.is-active{
  opacity:1; visibility:visible; filter:blur(0); transform:none;
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), filter var(--dur-m) var(--ease);
}
.voice-nav{
  display:none; justify-content:center; align-items:center;
  gap:1.1rem; margin-top:clamp(2rem,3.5vw,2.8rem);
}
.js-voices .voice-nav{ display:flex; }
.voice-btn{
  width:2.9rem; height:2.9rem; border-radius:50%;
  border:1px solid var(--linie-dunkel); background:transparent;
  color:var(--tinte-invers); font-size:1.15rem; line-height:1; cursor:pointer;
  transition:border-color var(--dur-s), color var(--dur-s), transform var(--dur-s);
}
.voice-btn:hover{ border-color:var(--petrol); color:var(--petrol-hell); transform:scale(1.06); }
.voice-btn:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; }
.voice-count{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.18em;
  color:var(--grau-dunkel); min-width:4.6rem; font-variant-numeric:tabular-nums;
}
.voice-count b{ color:#fff; font-weight:600; }
.voice-count i{ font-style:normal; margin:0 .35rem; color:var(--petrol-hell); }

/* ==========================================================
   5 · FUNDAMENT (akademische Referenzen)
   ========================================================== */
.edu{
  background:var(--kohle); color:var(--tinte-invers);
  border-top:1px solid var(--linie-dunkel);
  padding:clamp(4rem,8vw,6rem) 0;
}
.edu .eyebrow{ color:var(--petrol-hell); }
.edu-head{ max-width:52rem; margin-bottom:clamp(2rem,4vw,3rem); }
.edu-head h2{ font-size:clamp(1.9rem,4vw,2.9rem); color:#fff; }
.edu-lead{ color:var(--grau-dunkel); margin:0; }
.edu-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem;
}
.edu-grid li{
  position:relative; padding:2rem 0 .8rem;
  border-top:1px solid var(--linie-dunkel);
  display:flex; align-items:center;
}
.edu-grid li::before{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:4.5rem;
  background:var(--petrol); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-l) var(--ease) .15s;
}
.edu-grid li.in::before{ transform:scaleX(1); }
.edu-grid h3{ font-size:1.22rem; color:#fff; margin:0 0 .35rem; }
.edu-logo{
  height:clamp(3.2rem,4.6vw,4.2rem); width:auto; margin:0;
  opacity:.92;
}
.edu-logo-ebs{ height:clamp(4rem,5.6vw,5.2rem); }
@media (max-width:820px){ .edu-grid{ grid-template-columns:minmax(0,1fr); } }


/* ==========================================================
   6 · KONTAKT: Formular im dunklen CI
   ========================================================== */
.contact form{
  background:linear-gradient(170deg,#15191B,#0B0E0F);
  color:var(--tinte-invers);
  border:1px solid var(--linie-dunkel);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  color-scheme:dark;
}
.contact label{ color:var(--tinte-invers); }
.contact label .req{ color:var(--petrol-hell); }
.contact input,.contact select,.contact textarea{
  color:#fff; background:#0A0D0E; border-color:#2A3134;
}
.contact input:focus,.contact select:focus,.contact textarea:focus{
  background:#0E1314; border-color:var(--petrol);
  box-shadow:0 0 0 3px rgba(0,151,178,.24);
}
.contact input:-webkit-autofill,
.contact select:-webkit-autofill,
.contact textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #0A0D0E inset;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}
.contact select{
  appearance:none; -webkit-appearance:none;
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232CB7D0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.contact select option{ background:#0B0E0F; color:#fff; }
.contact .hint{ color:var(--grau-dunkel); }
.contact .error-msg{ color:#FF8A70; }
.contact .field.invalid input,.contact .field.invalid textarea{ border-color:#FF8A70; }
.contact .consent-field .consent{ color:var(--grau-dunkel); }
.contact .consent-field a{ color:var(--petrol-hell); }
.contact .consent-field.invalid .consent{ color:#FF8A70; }
.contact .btn-solid{ background:var(--petrol); color:#fff; }
.contact .btn-solid:hover{ background:var(--petrol-hell); }
.contact .form-status{ color:var(--petrol-hell); }

/* ==========================================================
   7 · MOBIL: zentrierte Komposition, ruhiger Rhythmus
   ========================================================== */
.hint-touch{ display:none; }
@media (hover:none){ .hint-desk{ display:none; } .hint-touch{ display:inline; } }

/* Zentrierte Köpfe: Unterstrich mittig unter dem Titel */
.cfx-head .h-line::after,
.voices-head .h-line::after{ left:calc(50% - 2.25rem); transform-origin:center; }

@media (max-width:600px){
  /* --- Gemeinsame Zentrierung der Abschnittsköpfe --- */
  .hero-grid > div:first-child,
  .manifest-body,
  .sol-head, .refs-head, .edu-head,
  .foto-band .wrap > .eyebrow, .foto-band .wrap > h2,
  .process .wrap > .eyebrow, .process .wrap > h2, .process-intro,
  .contact-grid > div:first-child{ text-align:center; }

  .hero-grid > div:first-child .eyebrow,
  .manifest-body .eyebrow,
  .sol-head .eyebrow, .refs-head .eyebrow, .edu-head .eyebrow,
  .foto-band .wrap > .eyebrow, .process .wrap > .eyebrow,
  .contact-grid > div:first-child .eyebrow,
  .cfx-head .eyebrow, .voices-head .eyebrow{
    display:block; text-align:center; line-height:1.7;
  }
  .eyebrow::before{ margin-right:.55rem; }

  .sol-head .h-line::after, .refs-head .h-line::after, .edu-head .h-line::after,
  .foto-band .h-line::after, .process .h-line::after,
  .contact-grid > div:first-child .h-line::after{
    left:calc(50% - 2.25rem); transform-origin:center;
  }
  .sol-lead, .refs-lead, .edu-lead, .process-intro, .contact-note{
    margin-left:auto; margin-right:auto;
  }

  /* --- Hero --- */
  .hero-grid{ padding-top:1.6rem; }
  .hero-logo{ width:clamp(9.5rem,42vw,12.5rem); }
  .hero h1{ font-size:min(2.5rem, 8.7vw); line-height:1.08; }
  .hero-lead{ font-size:1rem; max-width:22rem; margin-left:auto; margin-right:auto; }
  .hero-claim{ letter-spacing:.12em; line-height:1.8; }
  .btn-row{ max-width:22rem; margin:0 auto; }

  /* --- CFX-Sequenz: Schritte ruhiger --- */
  .cfx-thread{ height:3.4rem; margin-bottom:1.6rem; }
  .cfx-step{ text-align:left; }

  /* --- Der Kern --- */
  .manifest-grid{ gap:2.4rem; }
  .manifest-photo{ max-width:18.5rem; width:78%; margin:0 auto; }
  .manifest-quote p{ font-size:1.42rem; line-height:1.32; }
  .manifest-sig{
    border-left:0; padding-left:0; padding-top:1.1rem;
    justify-items:center; position:relative;
  }
  .manifest-sig::before{
    content:""; position:absolute; top:0; left:calc(50% - 1.6rem);
    width:3.2rem; height:3px; background:var(--petrol);
  }

  /* --- Lösungen --- */
  .sol-grid{ gap:.65rem; }

  /* --- KPI-Band: gestapelt, mittig, mit Trennlinien --- */
  .refs-kpis{
    grid-template-columns:minmax(0,1fr); gap:0;
    text-align:center; padding-top:.4rem;
  }
  .kpi{ justify-items:center; padding:2.5rem 0 1.4rem; border-bottom:1px solid var(--linie-dunkel); }
  .kpi:nth-last-child(2){ border-bottom:0; }
  .kpi::before{ left:calc(50% - 1.6rem); top:1.5rem; }
  .js-kpis .kpi::before{ transform-origin:center; }
  .kpi-num{ font-size:2.7rem; }
  .kpi-bar{ margin:.65rem auto .5rem; width:7.5rem; }
  .kpi-bar::after{ transform-origin:center; }
  .kpi-label{ max-width:none; font-size:.95rem; }
  .kpi-cta{ margin-top:.8rem; }

  /* --- Stimmen --- */
  .voice-mark{ right:50%; transform:translateX(50%); top:-3.6rem; font-size:9rem; }
  .voice p{ font-size:1.3rem; }

  /* --- Fundament: Logos mittig --- */
  .edu-grid{ gap:0; }
  .edu-grid li{ justify-content:center; padding:1.9rem 0 1.5rem; }
  .edu-grid li::before{ left:calc(50% - 2.25rem); transform-origin:center; }
  .edu-logo{ height:3.4rem; }
  .edu-logo-ebs{ height:4.4rem; }

  /* --- Einblicke / Vorgehen --- */
  .foto-grid{ margin-top:1.6rem; }
  .steps{ gap:0; }
  .steps li{ text-align:center; padding:1.5rem 0 1.6rem; }
  .steps li::before{ left:calc(50% - 2.25rem); width:4.5rem; transform-origin:center; }
  .steps li p{ max-width:21rem; margin-left:auto; margin-right:auto; }

  /* --- Kontakt --- */
  .contact-note.promise{ display:flex; justify-content:center; }
  .contact-figure{ margin-top:1.4rem; }
  .contact form{ padding:1.3rem 1.1rem; }

  /* --- Footer --- */
  .footer-grid{ flex-direction:column; text-align:center; gap:1.4rem; }
  .footer-brand{ flex-direction:column; gap:.8rem; }
  .footer-legal{ line-height:1.9; }
}

/* ==========================================================
   Reduzierte Bewegung: alles sofort sichtbar, nichts bewegt sich
   ========================================================== */
@media (prefers-reduced-motion: reduce){
  .cfx-word{ position:static; opacity:1; visibility:visible; }
  .cfx-wordbox{ height:auto; display:grid; gap:.4rem; }
  .cfx-word .g{ animation:none !important; }
  .cfx-word .streak,.cfx-dust,.cfx-ghost{ display:none; }
  .m-frame{ stroke-dashoffset:0; transition:none; }
  .m-ground,.m-shadow{ opacity:1; transition:none; }
  .hlogo{ animation:none; }
  .hl-ground,.hl-shadow{ opacity:1; transform:none; transition:none; }
  .hl-frame{ stroke-dashoffset:0; transition:none; }
  .hl-bar{ transform:none; transition:none; }
  .hl-streaks line{ animation:none !important; }
  .cfx-thread.reveal{ transform:none; transition:none; }
  .sol-inner{ transition:none; }
  .m-bar{ transform:none !important; opacity:1 !important; animation:none !important; transition:none; }
  .m-streaks line{ animation:none !important; }
  .cfx-mark{ transform:none !important; }
  .js-cfx .cfx-step{ opacity:1; }
  .js-cfx .lm{ transform:none; }
  .js-cfx .cfx-step .body{ opacity:1; transform:none; }
  .ref-track{ animation:none; }
  .ref-track[aria-hidden="true"]{ display:none; }
  .ref-row{ flex-wrap:wrap; }
  .ref-track{ flex-wrap:wrap; padding:0; }
  .ref-rows{ -webkit-mask-image:none; mask-image:none; padding:0 clamp(1.1rem,4vw,2.5rem); }
  .js-voices .voice{ transition:none; }
  .js-kpis .kpi::before{ transform:none; transition:none; }
  .js-kpis .kpi-num b,.js-kpis .kpi-num .sym,.js-kpis .kpi-label{ opacity:1; transform:none; transition:none; }
  .js-kpis .kpi-cta .btn::after{ animation:none; }
}