/* Bridge Advisory — Live-Landing. CI-Tokens 1:1 aus der Future-Website brand.css.
   Gestaltungsidee: die vier aufsteigenden Stufen der Bildmarke als durchgängige Geste —
   Logo-Blöcke, Headline und Chart-Säulen bauen sich beim Laden in derselben Bewegung auf. */
:root{
  --deep-navy:#0D1B2A; --navy-900:#0D1B2A; --navy-800:#16273A; --navy-700:#21384F; --navy-600:#2E4961;
  --slate:#53667A; --bridge:#3E7CB4; --teal-700:#275A86; --teal-600:#336B9C; --teal-400:#6699C6; --teal-300:#9DC0DD; --teal-100:#E8F0F7;
  --warm-mist:#F6F4EF; --canvas:#F6F4EF;
  --border:#E3E1D9; --border-cool:#DCE1E7;
  --text-primary:#16273A; --text-secondary:#53667A; --text-tertiary:#8A93A0; --on-dark-2:#AAB7C6;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Spectral",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --content-max:1180px;
  /* Chart-Skala: 184px Säulenraum : 5 Reifegrade = 36.8px pro Grad */
  --scale-unit:36.8px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.5;color:var(--text-primary);
  /* leiser Lichteinfall oben statt flacher Fläche */
  background:linear-gradient(180deg,#FBFAF6 0%,var(--canvas) 380px);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,blockquote{margin:0}
img,svg{max-width:100%}
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 44px}
.serif{font-family:var(--font-serif)}
.tabnum{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
::selection{background:var(--teal-300);color:var(--navy-900)}
:focus-visible{outline:2px solid var(--bridge);outline-offset:3px;border-radius:4px}

/* Auftakt-Choreografie: alles mit .intro steigt gestaffelt auf (Delay über --in) */
.intro{animation:rise .65s cubic-bezier(.22,.9,.35,1) var(--in,0s) backwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Logo-Lockup zentriert als Auftakt — bewusst groß, mit viel Luft darüber und darunter */
.masthead{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,38px);padding:clamp(84px,11vw,148px) 22px clamp(44px,8vw,104px)}
.masthead__mark{flex:none;width:auto;height:clamp(60px,10.5vw,112px);display:block;overflow:visible}
/* Die vier Stufen der Bildmarke steigen nacheinander auf — dieselbe Geste wie die Chart-Säulen */
.masthead__mark .step{transform-box:fill-box;animation:step-in .5s cubic-bezier(.22,.9,.35,1) backwards}
.masthead__mark .s1{animation-delay:.02s}
.masthead__mark .s2{animation-delay:.1s}
.masthead__mark .s3{animation-delay:.18s}
.masthead__mark .s4{animation-delay:.26s}
@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.masthead__word{margin:0;color:var(--deep-navy);font-weight:700;font-size:clamp(30px,5.8vw,66px);letter-spacing:.2em;line-height:1.05;animation:word-in .7s ease .15s backwards}
@keyframes word-in{from{opacity:0}to{opacity:1}}
@media (max-width:520px){.masthead__word{letter-spacing:.14em}}

/* ---- Kletter-Figur im Logo: steigt einmal beim Laden hoch, hebt den Pokal ---- */
/* Casing (dunkel, breit) + Kern (hell, dünn) → lesbar über hellem BG und über allen Stufenfarben */
.climber .cas{fill:none;stroke:#16273A;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.climber .core{fill:none;stroke:#F6F4EF;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
.climber .head{fill:#F6F4EF;stroke:#16273A;stroke-width:.42}
.climber .cup{fill:#3E7CB4;stroke:#16273A;stroke-width:.3;stroke-linejoin:round}
.climber .cup-handle{fill:none;stroke:#3E7CB4;stroke-width:.34;stroke-linecap:round}
.climber .spark{fill:none;stroke:#3E7CB4;stroke-width:.5;stroke-linecap:round}

/* Ruhezustand (= Endpose): Figur steht oben auf Stufe 4 und jubelt. Bei reduced-motion bleibt genau das. */
.climber{transform:translate(28px,0px)}
.climber__walk{opacity:0}
.climber__cheer{opacity:1}
.climber__spark{opacity:0;transform-box:fill-box;transform-origin:center}

/* Animierte Fassung */
.climber{animation:climb 1.6s cubic-bezier(.34,.02,.4,1) .55s both}
.climber__walk{animation:walk-out .3s ease 1.82s both}
.climber__cheer{animation:cheer-in .34s ease 1.9s both}
.climber__spark{animation:spark .7s ease 2.05s both}

/* Klettern: von Stufe 1 (unten) über Sprungbögen nach Stufe 4 (oben); Start mit kurzem Einblenden */
@keyframes climb{
  0%  {opacity:0;transform:translate(4px,18px)}
  6%  {opacity:1;transform:translate(4px,18px)}
  20% {transform:translate(8px,13.5px)}
  30% {transform:translate(12px,12px)}
  44% {transform:translate(16px,7.5px)}
  54% {transform:translate(20px,6px)}
  68% {transform:translate(24px,1.5px)}
  82% {transform:translate(28px,0px)}
  100%{transform:translate(28px,0px)}
}
@keyframes walk-out{from{opacity:1}to{opacity:0}}
@keyframes cheer-in{from{opacity:0}to{opacity:1}}
@keyframes spark{0%{opacity:0;transform:scale(.2)}45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

/* Eyebrow */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow .rule{width:34px;height:1.5px;background:var(--teal-600)}
.eyebrow .t{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-700)}

/* Hero */
.hero{padding-top:88px;padding-bottom:88px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
/* Headline in der Brand-Serif: editorialer Beratungston statt Sans-Bold */
.hero h1{font-family:var(--font-serif);font-size:clamp(38px,5.6vw,56px);font-weight:500;color:var(--navy-900);letter-spacing:-.012em;line-height:1.12}
.hero h1 em{font-style:italic;color:var(--teal-700)}
.hero .lead{font-size:18.5px;color:var(--navy-600);font-weight:500;margin-top:26px;max-width:460px;line-height:1.5}
.hero .sub{font-size:15px;color:var(--text-secondary);line-height:1.65;margin-top:18px;max-width:490px}

/* Purpose-Film neben dem Hero — Panel-Optik wie das Reifegradprofil, Klick startet mit Ton */
.hero-video{position:relative;margin:0;border-radius:20px;overflow:hidden;aspect-ratio:16/9;
  background:var(--deep-navy);border:1px solid rgba(255,255,255,.07);
  box-shadow:0 24px 56px rgba(13,27,42,.26),0 4px 14px rgba(13,27,42,.14)}
.hv-media{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer;background:var(--deep-navy)}
/* Großer Auftakt-Button (wird am Filmende zum Wiederhol-Symbol) */
.hv-big{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);background:rgba(13,27,42,.42);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .15s,border-color .15s,transform .15s,opacity .2s}
.hv-big:hover{background:var(--bridge);border-color:var(--bridge);transform:scale(1.06)}
.hv-big svg{width:30px;height:30px;fill:currentColor}
.hv-big .hv-ic-play{transform:translateX(2px)}
.hv-big .hv-ic-replay{display:none}
.hero-video[data-state="ended"] .hv-big .hv-ic-play{display:none}
.hero-video[data-state="ended"] .hv-big .hv-ic-replay{display:block}
.hero-video[data-state="playing"] .hv-big{opacity:0;pointer-events:none;transform:scale(.85)}
/* Steuerleiste unten: Pause/Weiter + Wiederholen */
.hv-controls{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:12px 14px;
  background:linear-gradient(to top,rgba(13,27,42,.72),rgba(13,27,42,0));
  opacity:0;pointer-events:none;transition:opacity .2s}
.hero-video[data-state="paused"] .hv-controls,
.hero-video[data-state="ended"] .hv-controls,
.hero-video[data-state="playing"]:hover .hv-controls,
.hero-video[data-state="playing"]:focus-within .hv-controls{opacity:1;pointer-events:auto}
.hv-btn{width:38px;height:38px;border-radius:9px;color:#fff;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.26);background:rgba(13,27,42,.55);
  transition:background .15s,border-color .15s}
.hv-btn:hover{background:var(--bridge);border-color:var(--bridge)}
.hv-btn svg{width:18px;height:18px;fill:currentColor}
.hv-toggle .hv-ic-play2{display:none}
.hero-video:not([data-state="playing"]) .hv-toggle .hv-ic-pause{display:none}
.hero-video:not([data-state="playing"]) .hv-toggle .hv-ic-play2{display:block}

/* Management-Cluster-Panel (statische Fassung des Reifegradprofils) */
.ba-panel{background:
    radial-gradient(120% 90% at 88% -12%,rgba(62,124,180,.30),transparent 62%),
    linear-gradient(165deg,var(--navy-800) 0%,var(--deep-navy) 58%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:28px;box-shadow:0 24px 56px rgba(13,27,42,.26),0 4px 14px rgba(13,27,42,.14);position:relative;overflow:hidden}
.ba-panel-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.ba-panel-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.ba-panel-sub{font-size:14px;color:var(--warm-mist);font-weight:600;margin-top:4px}
.ba-score{font-size:30px;font-weight:700;color:#fff;line-height:1;text-align:right}
.ba-score small{display:block;font-size:10px;color:rgba(255,255,255,.55);font-weight:400;margin-top:3px}
/* Gitterlinien je Reifegrad geben dem Panel Instrumenten-Charakter */
.ba-bars{position:relative;height:184px;display:flex;align-items:flex-end;gap:14px;border-bottom:1px solid rgba(255,255,255,.22);
  background:repeating-linear-gradient(to top,transparent 0,transparent calc(var(--scale-unit) - 1px),rgba(255,255,255,.09) calc(var(--scale-unit) - 1px),rgba(255,255,255,.09) var(--scale-unit))}
.ba-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.ba-bval{font-size:12px;font-weight:700;color:#fff;margin-bottom:7px;animation:ba-fadein .5s ease calc(var(--d) + .45s) backwards}
.ba-fill{width:100%;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--teal-400),var(--teal-600));box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transform-origin:bottom;animation:ba-grow .9s cubic-bezier(.22,.9,.35,1) var(--d) backwards}
/* Ziel-Linie bei 4,0 — zeichnet sich, nachdem die Säulen stehen */
.ba-goal{position:absolute;left:0;right:0;bottom:calc(4 * var(--scale-unit));border-top:1px dashed rgba(157,192,221,.6);transform-origin:left;animation:goal-in .7s ease 1.7s backwards}
.ba-goal i{position:absolute;right:0;top:-9px;font-style:normal;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--teal-300);background:var(--deep-navy);padding:2px 6px;border:1px solid rgba(157,192,221,.35);border-radius:99px;line-height:1}
@keyframes goal-in{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
.ba-labels{display:flex;gap:14px;margin-top:8px}
.ba-blabel{flex:1;font-size:10px;color:rgba(255,255,255,.68);text-align:center;line-height:1.35}
.ba-note{margin-top:14px;font-size:12px;color:var(--teal-100)}
/* Säulen wachsen gestaffelt von unten nach oben */
@keyframes ba-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ba-fadein{from{opacity:0}to{opacity:1}}

/* Standpunkt: Zitat + Säulen links, Reifegradprofil rechts daneben */
.standpunkt{padding-bottom:92px}
.standpunkt-grid{display:grid;grid-template-columns:1fr minmax(340px,400px);gap:48px;align-items:center;margin-top:6px}
.standpunkt blockquote{font-family:var(--font-serif);font-size:clamp(25px,3.5vw,34px);line-height:1.34;color:var(--navy-900);max-width:900px}
.standpunkt-grid .ba-panel{align-self:center}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px}
.pillars .p{border-top:2px solid var(--navy-900);padding-top:18px}
.pillars .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;color:var(--teal-700)}
.pillars h3{font-size:18px;font-weight:600;margin-top:8px;color:var(--navy-800);letter-spacing:-.01em}
.audience{margin-top:42px;font-size:15px;color:var(--text-secondary);max-width:620px}

/* CTA-Band */
.cta-band{padding-bottom:84px}
.cta-band .inner{position:relative;overflow:hidden;background:
    radial-gradient(120% 130% at 12% -30%,rgba(62,124,180,.26),transparent 58%),
    linear-gradient(165deg,var(--navy-800) 0%,var(--deep-navy) 60%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:48px 52px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;box-shadow:0 18px 44px rgba(13,27,42,.18)}
/* Bildmarke als Ghost-Motiv: die vier Stufen schließen die Seite markenseitig ab */
.cta-band .ghost-mark{position:absolute;right:-38px;bottom:-52px;width:210px;height:auto;fill:#fff;opacity:.05;pointer-events:none}
.cta-band h2{font-family:var(--font-serif);font-weight:500;font-size:29px;letter-spacing:-.01em;color:var(--warm-mist);position:relative}
.cta-band p{font-size:14.5px;color:var(--on-dark-2);margin-top:9px;max-width:540px;line-height:1.6;position:relative}
.btn{font-family:var(--font-sans);font-size:15px;font-weight:600;border-radius:8px;border:1px solid transparent;cursor:pointer;padding:14px 24px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .15s,transform .15s,box-shadow .15s;position:relative}
.btn-teal{background:var(--bridge);color:#fff}
.btn-teal:hover{background:var(--teal-600);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.28)}
.btn-teal:focus-visible{outline-color:var(--teal-300)}

/* Scroll-Reveals als Progressive Enhancement (ohne JS; Fallback: alles sichtbar) */
@supports (animation-timeline: view()){
  .standpunkt,.cta-band{animation:reveal both ease;animation-timeline:view();animation-range:entry 0% entry 42%}
  @keyframes reveal{from{opacity:.001;transform:translateY(26px)}to{opacity:1;transform:none}}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero{padding-top:64px}
  .standpunkt-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:760px){
  .wrap{padding-left:22px;padding-right:22px}
  .hero{padding-top:56px;padding-bottom:64px}
  .pillars{grid-template-columns:1fr;gap:24px}
  .cta-band .inner{padding:36px 28px}
  .cta-band .ghost-mark{width:170px;right:-20px;bottom:-26px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}