/* ===== MDiag Leistungs-Unterseiten — geteiltes Stylesheet ===== */
:root{
  --color-snow-canvas:#fcfcfc;
  --color-lavender-wash:#f0f4fe;
  --color-midnight-ink:#020520;
  --color-graphite-body:#14141e;
  --color-slate-caption:#374151;
  --color-ash-helper:#6b7280;
  --color-stone-divider:#e2e8f0;
  --color-fog-surface:#f1f5f9;
  --color-royal-signal:#145aff;
  --font-inter:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --shadow-sm:rgba(0,0,0,.1) 0px 0px 4px -2px;
  --shadow-feature:rgba(0,0,0,.082) 0px .36px 1.8px -1.4px, rgba(0,0,0,.07) 0px 1.37px 6.87px -2.8px, rgba(0,0,0,.016) 0px 6px 30px -4.25px;
  --shadow-glow:rgba(20,90,255,.1) 0px 0px 50px -28px, rgba(0,0,0,.18) 0px 0px 3px -1px;
  --page-max-width:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-inter);font-size:16px;line-height:1.63;
  color:var(--color-graphite-body);background:var(--color-snow-canvas);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--color-royal-signal);text-decoration:none}
.container{max-width:var(--page-max-width);margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{color:var(--color-midnight-ink);font-weight:600;line-height:1.08;
  overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
h1{font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,3.2vw,2.35rem);letter-spacing:-.026em;margin-bottom:16px}
h3{font-size:21px;line-height:1.4;letter-spacing:-.2px}
h1 .accent,h2 .accent{color:var(--color-royal-signal)}
.lead{font-size:18px;line-height:1.5;color:var(--color-slate-caption);max-width:760px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--color-graphite-body);margin-bottom:20px}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--color-royal-signal);flex:none}
.center{text-align:center}
.center .lead{margin:0 auto}
.center .kicker{justify-content:center}

/* Buttons */
.btn{display:inline-block;padding:14px 32px;border-radius:9999px;font-size:15px;font-weight:500;line-height:1.2;transition:background .2s ease,color .2s ease,box-shadow .2s ease;cursor:pointer}
.btn-primary{background:var(--color-snow-canvas);color:var(--color-royal-signal);border:1px solid var(--color-royal-signal);box-shadow:var(--shadow-glow)}
.btn-primary:hover{background:var(--color-royal-signal);color:#fff}
.btn-ghost{background:transparent;color:var(--color-graphite-body);border:1px solid var(--color-stone-divider)}
.btn-ghost:hover{border-color:var(--color-graphite-body)}
.btn-light{background:rgba(252,252,252,.92);color:var(--color-royal-signal);border:1px solid rgba(252,252,252,.92);backdrop-filter:blur(8px)}
.btn-light:hover{background:var(--color-royal-signal);color:#fff;border-color:var(--color-royal-signal)}
.btn-frost{background:rgba(252,252,252,.14);color:#fff;border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(8px)}
.btn-frost:hover{background:rgba(252,252,252,.28)}

/* Navigation */
header{position:sticky;top:0;z-index:50;background:rgba(252,252,252,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-stone-divider)}
.nav{display:flex;align-items:center;justify-content:flex-start;height:104px}
.nav-logo{margin-right:auto}
.nav-logo img{height:80px;width:auto}
/* Sprachumschalter (Languages-Aufklappmenü) */
.lang-switch{position:relative;margin-left:18px;flex:none}
.lang-toggle{background:none;border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--color-ash-helper);padding:6px 8px;border-radius:7px;line-height:1;display:inline-flex;align-items:center;gap:5px;transition:color .15s ease}
.lang-toggle::after{content:"☰";font-size:13px;opacity:.65}
.lang-toggle:hover{color:var(--color-royal-signal)}
.lang-menu{position:absolute;top:100%;right:0;margin-top:8px;min-width:158px;background:var(--color-snow-canvas);border:1px solid var(--color-stone-divider);border-radius:12px;box-shadow:var(--shadow-feature);padding:6px;list-style:none;display:none;z-index:60}
.lang-switch.open .lang-menu{display:block}
.lang-menu li{width:100%}
.lang-menu button{width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;font-size:14px;color:var(--color-graphite-body);padding:9px 12px;border-radius:8px;line-height:1.2}
.lang-menu button:hover{background:var(--color-fog-surface);color:var(--color-royal-signal)}
.lang-menu button.is-active{color:var(--color-royal-signal);font-weight:600;background:var(--color-lavender-wash)}
.nav-links{display:flex;gap:8px;align-items:center;list-style:none}
.nav-links a{font-size:15px;font-weight:500;color:var(--color-graphite-body);padding:8px 12px;border-radius:9999px}
.nav-links a:hover{color:var(--color-royal-signal)}
.nav-cta{color:var(--color-royal-signal) !important;border:1px solid var(--color-royal-signal);padding:9px 20px !important}
.nav-cta:hover{background:var(--color-royal-signal);color:#fff !important}
.nav-toggle{display:none;background:none;border:0;color:var(--color-midnight-ink);font-size:1.7rem;cursor:pointer}

/* Hero */
.subhero{position:relative;padding:0;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:url("hero-konferenzraum.webp") center/cover no-repeat}
.subhero.assessment-hero{background-image:url("hero-assessment-v2.jpg")}
.subhero.development-hero{background-image:url("hero-development-v2.jpg")}
.subhero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,5,32,.55) 0%, rgba(2,5,32,.35) 45%, rgba(2,5,32,.62) 100%)}
.subhero.development-hero::before{background:linear-gradient(90deg,rgba(2,5,32,.72) 0%,rgba(2,5,32,.58) 56%,rgba(2,5,32,.40) 100%)}
.subhero .container{position:relative;padding-top:88px;padding-bottom:72px}
.subhero .crumb{font-size:14px;color:rgba(255,255,255,.8);margin-bottom:22px}
.subhero .crumb a{color:rgba(255,255,255,.9)}
.subhero .crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.subhero .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(252,252,252,.14);border:1px solid rgba(255,255,255,.5);border-radius:9999px;padding:8px 18px;font-size:14px;font-weight:500;color:#fff;backdrop-filter:blur(8px);margin-bottom:24px}
.subhero .badge .dot{width:6px;height:6px;border-radius:50%;background:#fff}
.subhero h1{max-width:900px;color:#fff;margin-bottom:22px}
.subhero h1 .accent{color:#9db9ff}
.subhero .sub{font-size:18px;line-height:1.55;color:rgba(255,255,255,.9);max-width:720px;margin-bottom:34px}
.subhero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Full-Bleed-Bildband */
.bleed-band{padding:0}
.bleed-band img{width:100%;height:clamp(300px,52vh,560px);object-fit:cover;object-position:center}

/* Info-Karten (Für wen / Problem / Ergebnis) */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.info-card{background:#fff;border:1px solid var(--color-stone-divider);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow-sm)}
.info-card h2{font-size:19px;margin-bottom:12px}
.info-card p{font-size:15px;color:var(--color-slate-caption);line-height:1.55}

/* Bausteine */
.blocks{position:relative;background:url("blog-hintergrund.webp") center/cover no-repeat}
.blocks::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(252,252,252,.62) 0%, rgba(252,252,252,.5) 100%)}
.blocks .container{position:relative}
.block-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.block-card{background:#fff;border:1px solid var(--color-stone-divider);border-radius:20px;padding:34px 30px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease}
.block-card:hover{box-shadow:var(--shadow-feature)}
.block-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12px;font-weight:500;color:var(--color-ash-helper);background:var(--color-fog-surface);border-radius:9999px;padding:6px 14px;margin-bottom:16px}
.block-tag .dot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--color-royal-signal)}
.block-card h3{margin-bottom:12px}
.block-card p{color:var(--color-slate-caption);font-size:15px;line-height:1.55}

/* Prozess */
.process-sec{background:#fff}
.process-sec ol{list-style:none;counter-reset:step;margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.process-sec li{counter-increment:step;background:#fff;border:1px solid var(--color-stone-divider);border-radius:16px;padding:28px 24px;box-shadow:var(--shadow-sm)}
.process-sec li::before{content:counter(step,decimal-leading-zero);display:block;font-size:13px;font-weight:600;color:var(--color-royal-signal);letter-spacing:.04em;margin-bottom:12px}
.process-sec h3{font-size:18px;margin-bottom:8px}
.process-sec p{font-size:14px;color:var(--color-slate-caption);line-height:1.45}

/* Final CTA */
.final{position:relative;text-align:center;padding:110px 0;background:url("prozess-hintergrund.webp") center/cover no-repeat}
.final::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,5,32,.38), rgba(2,5,32,.50))}
.final .container{position:relative}
.final h2{max-width:720px;margin:0 auto 18px;color:#fff}
.final h2 .accent{color:#9db9ff}
.final p{color:rgba(255,255,255,.88);max-width:600px;margin:0 auto 36px;font-size:18px;line-height:1.5}
.final-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.final-contact{font-size:14px;color:rgba(255,255,255,.8)}
.final-contact a{color:#fff;font-weight:500}
.final-contact a:hover{text-decoration:underline;text-underline-offset:3px}

/* Footer */
footer{background:var(--color-midnight-ink);color:var(--color-ash-helper);padding:56px 0 36px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-grid h4{color:#fff;font-size:15px;font-weight:600;margin-bottom:12px}
.footer-grid p{line-height:1.6;margin-bottom:8px}
.footer-grid a{color:#c8d2e8;display:inline-block;margin-bottom:6px}
.footer-grid a:hover{color:#fff}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px}

/* Responsive */
@media (max-width:920px){
  section{padding:72px 0}
  .info-grid,.process-sec ol{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .subhero.assessment-hero{background-image:url("hero-assessment-v2-mobile.jpg")}
  .subhero.development-hero{background-image:url("hero-development-v2-mobile.jpg")}
  section{padding:56px 0}
  .subhero{min-height:82vh}
  h1{font-size:clamp(1.8rem,7.4vw,2.6rem);letter-spacing:-.022em;line-height:1.14}
  h2{font-size:clamp(1.55rem,6.2vw,2rem);line-height:1.16}
  .subhero .sub{font-size:16.5px}
  .nav{height:84px}
  .nav-logo img{height:60px}
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-snow-canvas);flex-direction:column;padding:24px;gap:14px;align-items:flex-start;border-bottom:1px solid var(--color-stone-divider)}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .info-grid,.block-grid,.process-sec ol{grid-template-columns:1fr}
  .subhero-ctas .btn,.final-ctas .btn{width:100%;text-align:center}
  .final{padding:80px 0}
  .footer-grid{grid-template-columns:1fr;gap:28px}
}

/* ===== Assessment-Seite: Rewrite-Komponenten ===== */
.tint{background:var(--color-lavender-wash)}
.prose{max-width:760px;margin:0 auto}
.prose p{font-size:17px;line-height:1.7;color:var(--color-graphite-body);margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.section-head{max-width:760px;margin:0 auto 8px}
.section-head.center{margin-left:auto;margin-right:auto}

/* MDiag-Leitsätze (Pull-Quotes) */
.leitsatz{max-width:820px;margin:38px auto;padding:28px 34px;background:#fff;border-left:4px solid var(--color-royal-signal);border-radius:0 16px 16px 0;box-shadow:var(--shadow-feature)}
.leitsatz p{font-size:20px;line-height:1.42;font-weight:600;color:var(--color-midnight-ink);letter-spacing:-.01em}
.leitsatz cite{display:block;margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-royal-signal);font-style:normal}

/* Stat-Callout (40 %) */
.stat-callout{max-width:760px;margin:0 auto;display:flex;gap:26px;align-items:center;background:#fff;border:1px solid var(--color-stone-divider);border-radius:20px;padding:28px 34px;box-shadow:var(--shadow-feature)}
.stat-callout .big{font-size:54px;font-weight:700;color:#e5342a;line-height:1;font-variant-numeric:tabular-nums;flex:none}
.stat-callout p{font-size:16px;line-height:1.5;color:var(--color-graphite-body)}
.source{font-size:12.5px;color:var(--color-ash-helper);line-height:1.5;max-width:760px;margin:16px auto 0}
.source a{color:var(--color-royal-signal);text-decoration:underline;text-underline-offset:2px}

/* Einsatzfelder */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:30px 44px;max-width:900px;margin:44px auto 0}
.fields-three{grid-template-columns:repeat(3,1fr);max-width:1000px}
.field-en{display:block;font-size:12px;letter-spacing:.03em;color:var(--color-ash-helper);margin-bottom:4px}
.field h3{font-size:18px;margin-bottom:10px}
.field p{font-size:15.5px;line-height:1.62;color:var(--color-slate-caption)}

/* Mandatssituationen statt Kartenkatalog */
.mandate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1000px;margin:46px auto 0}
.mandate-item{border-top:2px solid var(--color-royal-signal);padding-top:20px}
.mandate-item>span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--color-royal-signal);margin-bottom:14px}
.mandate-item h3{font-size:19px;margin-bottom:10px}
.mandate-item p{font-size:15.5px;line-height:1.62;color:var(--color-slate-caption)}

/* Auftraggeber- und Teilnehmerperspektive */
.audience-split{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:820px;margin:34px auto 0;border-top:1px solid var(--color-stone-divider);border-bottom:1px solid var(--color-stone-divider)}
.audience-split>div{padding:26px 30px}
.audience-split>div+div{border-left:1px solid var(--color-stone-divider)}
.audience-split h3{font-size:18px;margin-bottom:10px}
.audience-split p{font-size:15.5px;line-height:1.62;color:var(--color-slate-caption)}

/* Ergebnis-Liste */
.deliver-list{list-style:none;max-width:760px;margin:26px auto 0;display:grid;gap:11px}
.deliver-list li{position:relative;padding:13px 18px 13px 48px;background:#fff;border:1px solid var(--color-stone-divider);border-radius:13px;box-shadow:var(--shadow-sm);font-size:15px;line-height:1.5;color:var(--color-graphite-body)}
.deliver-list li::before{content:"✓";position:absolute;left:15px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--color-royal-signal);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dev-cta{text-align:center;margin-top:32px}

/* FAQ */
.faq-list{max-width:820px;margin:44px auto 0}
.faq-list details{background:#fff;border:1px solid var(--color-stone-divider);border-radius:14px;padding:2px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.faq-list summary{cursor:pointer;font-size:16px;font-weight:600;color:var(--color-midnight-ink);padding:17px 30px 17px 0;list-style:none;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--color-royal-signal)}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details p{font-size:15px;line-height:1.62;color:var(--color-slate-caption);padding:0 0 18px}

@media (max-width:680px){
  .fields,.fields-three,.mandate-grid,.audience-split{grid-template-columns:1fr}
  .stat-callout{flex-direction:column;text-align:center;gap:14px}
  .leitsatz{padding:24px 22px}
  .leitsatz p{font-size:18px}
  .audience-split>div+div{border-left:0;border-top:1px solid var(--color-stone-divider)}
}
@media (max-width:820px){
  .mandate-grid,.audience-split{grid-template-columns:1fr}
  .audience-split>div+div{border-left:0;border-top:1px solid var(--color-stone-divider)}
}

/* ===== Bilddramaturgie Leistungsseiten: Bild-/Neutralwechsel ===== */
.section-image{position:relative;background-position:center;background-size:cover;background-repeat:no-repeat}
.section-image::before{content:"";position:absolute;inset:0;background:rgba(250,249,246,.44)}
.section-image > .container{position:relative;z-index:2}
.img-blog{background-image:url("blog-hintergrund.webp")}
.img-cases{background-image:url("cases-hintergrund.webp")}
.img-prozess{background-image:url("prozess-hintergrund.webp")}
.img-warum{background-image:url("warum-konferenzraum.webp")}
/* Weiße Inhaltsfläche auf dem sichtbaren Bild */
.panel{background:#fff;border:1px solid var(--color-stone-divider);border-radius:18px;padding:48px 52px;box-shadow:var(--shadow-feature);max-width:940px;margin:0 auto}
.panel .section-head{margin-top:0}
.panel .fields{margin-top:34px}
.panel .stat-callout{box-shadow:none;border-color:var(--color-stone-divider);background:var(--color-fog-surface)}
@media (max-width:680px){
  .panel{padding:30px 22px;border-radius:20px}
  .section-image{background-position:center}
}
.panel .deliver-list li{background:var(--color-fog-surface);box-shadow:none}
.field-formats{font-size:13.5px;line-height:1.5;color:var(--color-ash-helper);margin-top:10px}
.field-formats strong{color:var(--color-graphite-body);font-weight:600}

/* ===== Einheitliche Pill-Navigation (konsistent, 20% weniger transparent) ===== */
header{position:fixed;top:0;left:0;right:0;z-index:80;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px 20px 0}
header.scrolled{background:transparent;box-shadow:none}
.nav{display:flex;align-items:center;gap:12px;max-width:1200px;margin:0 auto;height:auto;min-height:0;width:100%;
  background:rgba(255,255,255,.90);border-radius:100px;padding:6px 12px 6px 6px;
  box-shadow:rgba(75,68,57,.10) 0 12px 24px 0, rgba(75,68,57,.08) 0 44px 48px -26px;border:1px solid rgba(8,3,49,.05)}
.nav-logo{margin-right:auto;display:flex;align-items:center;padding:0}
.nav-logo img{height:62px;width:auto}
.nav-links{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links>li{list-style:none}
.nav-links a{color:#080331;font-family:inherit;font-weight:500;font-size:15px;padding:8px 13px;border-radius:9999px;text-decoration:none;transition:background .2s ease,color .2s ease;display:inline-block}
.nav-links a:hover{color:#4865ff;background:rgba(72,101,255,.09)}
.nav-cta{background:#4865ff !important;color:#fff !important;border:0 !important;border-radius:9999px;padding:9px 20px !important;box-shadow:rgba(72,101,255,.32) 0 10px 22px -8px!important}
.nav-cta:hover{background:#3550e6 !important;color:#fff !important}
.nav-item{position:relative}
.nav-item>a{display:inline-flex;align-items:center;gap:4px}
.nav-item>a .caret{font-size:11px}
.nav-dropdown{display:none;position:absolute;top:100%;left:0;min-width:252px;list-style:none;margin:10px 0 0;padding:8px;
  background:rgba(255,255,255,.98);border:1px solid rgba(8,3,49,.06);border-radius:16px;box-shadow:rgba(75,68,57,.16) 0 18px 40px -12px}
.nav-dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.nav-dropdown li{list-style:none}
.nav-dropdown a{display:block;padding:10px 14px;border-radius:10px;font-size:14px;color:#080331}
.nav-dropdown a:hover{background:rgba(72,101,255,.09);color:#4865ff}
.nav-item:hover .nav-dropdown,.nav-item.open .nav-dropdown{display:block}
.nav-toggle{display:none;background:none;border:0;color:#080331;font-size:1.6rem;cursor:pointer;line-height:1}
@media (max-width:820px){
  .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(255,255,255,.98);border:1px solid rgba(8,3,49,.06);border-radius:22px;padding:12px;display:none;box-shadow:rgba(75,68,57,.18) 0 18px 40px -12px}
  .nav-links.open{display:flex}
  .nav-links.open a{display:block}
  .nav-toggle{display:block}
  .nav-dropdown{position:static;display:block;box-shadow:none;border:0;padding:2px 0 6px 12px;margin:0;min-width:0;background:none}
  .nav-dropdown::before{display:none}
  .nav-item>a .caret{display:none}
}

.subhero .container{padding-top:104px}

.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-brand img{height:56px;width:auto}
.footer-brand h4{margin:0}

/* ===== MDiag Analytics-Dashboard (Drop-in) ===== */
/* =========================================================================
   MDiag · Kompetenz-Analytics
   Glas-Dashboard im Stil des Referenz-Screenshots, gefuellt mit den Inhalten
   einer Variante: Kompetenzmodell, Potenzial, Potenzial-Enabler,
   Verhaltensstil, Verlauf, Unternehmerprofil und Eignungsurteil.
   Alle Flaechen sind durchsichtig — ein beliebiges Hintergrundbild scheint
   durch. Drop-in: Markup .mdiag-an + dieses Stylesheet + der Skriptblock.
   ========================================================================= */
.mdiag-an{
  --ratio: 1720 / 1220;
  --r-out:34px;

  /* ---- Hintergrund: hier ein eigenes Bild einsetzen ----
     Beispiel:  --bg: url(img/buero.jpg) center/cover no-repeat;            */
  --bg: radial-gradient(124% 104% at 74% 4%, #5c5a63 0%, #3d3c44 46%, #2b2a30 100%);
  --bg-blur: 0px;

  /* ---- Glas ---- */
  --g1:.13;               /* Deckkraft der Karten-Oberkante  */
  --g2:.05;              /* Deckkraft der Kartenmitte       */
  --g-blur:30px;
  --g-sat:180%;

  --ink:#fff;
  --dim:rgba(255,255,255,.58);
  --dim2:rgba(255,255,255,.38);
  --acc:#f0a15e;
  --blue:#7fb4ff; --pink:#ef8bbe; --green:#7fd8a6; --amber:#f2c94c; --violet:#a78bfa;

  position:relative;width:100%;aspect-ratio:var(--ratio);
  overflow:hidden;border-radius:var(--r-out);background:#2b2a30;
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);
  isolation:isolate;-webkit-font-smoothing:antialiased;contain:paint;
}
.mdiag-an *,.mdiag-an *::before,.mdiag-an *::after{box-sizing:border-box;margin:0;padding:0}
.mdiag-an .bgl{position:absolute;inset:-2%;z-index:0;background:var(--bg);
  filter:blur(var(--bg-blur));transform:scale(1.02)}
.mdiag-an .glow{position:absolute;left:42%;top:0%;width:50%;height:64%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(244,158,86,.42) 0%, rgba(226,124,74,.18) 42%, transparent 72%);
  filter:blur(40px)}
.mdiag-an .glow2{position:absolute;left:4%;bottom:-10%;width:46%;height:48%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(140,150,240,.20) 0%, transparent 70%);filter:blur(48px)}
.mdiag-an .stage{position:absolute;left:50%;top:50%;width:1720px;height:1220px;z-index:1;
  transform-origin:50% 50%;transform:translate(-50%,-50%) scale(var(--k,1))}
.mdiag-an .app{position:absolute;inset:0;display:flex;gap:18px;padding:16px}
/* =====================  GLAS  ===================== */
.mdiag-an .glass{
  background:linear-gradient(150deg, rgba(255,255,255,var(--g1)) 0%,
                                     rgba(255,255,255,var(--g2)) 56%,
                                     rgba(255,255,255,calc(var(--g2)*1.6)) 100%);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
          backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1.5px 0 rgba(255,255,255,.20),
             0 28px 56px -34px rgba(0,0,0,.6);
}
/* ---------- Icon-Leiste ---------- */
.mdiag-an .rail{width:88px;flex:0 0 88px;border-radius:28px;padding:20px 0;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.mdiag-an .rail .mark{width:44px;height:44px;border-radius:14px;margin-bottom:18px;
  background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mdiag-an .rail .mark i{width:25px;height:25px;background:var(--mdiag-logo) center/contain no-repeat;
  filter:brightness(0) invert(1) opacity(.95);display:block}
.mdiag-an .rail button{width:48px;height:48px;border:0;border-radius:16px;background:transparent;
  color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;cursor:default}
.mdiag-an .rail button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mdiag-an .rail button.on{background:rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mdiag-an .rail .sp{flex:1}
.mdiag-an .rail .dot{position:relative}
.mdiag-an .rail .dot::after{content:"";position:absolute;top:10px;right:10px;width:7px;height:7px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 0 2.5px rgba(24,19,16,.75)}
/* ---------- Kopfzeile ---------- */
.mdiag-an .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.mdiag-an .topbar{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:14px}
.mdiag-an .topbar h1{font-family:'Poppins',sans-serif;font-size:34px;font-weight:700;letter-spacing:-1px;
  line-height:1;white-space:nowrap}
.mdiag-an .pills{display:flex;gap:6px;margin-left:14px}
.mdiag-an .pills span{font-size:12.5px;font-weight:500;padding:8px 15px;border-radius:99px;
  color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);white-space:nowrap}
.mdiag-an .pills span.on{background:rgba(255,255,255,.92);color:#191512;box-shadow:none;font-weight:600}
.mdiag-an .topbar .sp{flex:1}
.mdiag-an .iconbtn{width:44px;height:44px;border-radius:14px;border:0;background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;cursor:default;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.mdiag-an .iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mdiag-an .me{display:flex;align-items:center;gap:10px;padding:4px 4px 4px 15px;border-radius:99px;
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.mdiag-an .me div{text-align:right;line-height:1.2}
.mdiag-an .me b{display:block;font-size:12.5px;font-weight:600}
.mdiag-an .me s{display:block;text-decoration:none;font-size:10px;color:var(--dim2)}
.mdiag-an .me span{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:0 0 36px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.mdiag-an .me span img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
/* ---------- Raster ---------- */
.mdiag-an .grid{flex:1;min-height:0;display:grid;grid-template-rows:600px 1fr;gap:16px}
.mdiag-an .r1{display:grid;grid-template-columns:1.58fr 1fr;gap:16px;min-height:0}
.mdiag-an .rcol{display:grid;grid-template-rows:1.02fr 1fr;gap:16px;min-height:0}
.mdiag-an .split{display:grid;grid-template-columns:1.06fr 1fr;gap:16px;min-height:0}
.mdiag-an .r2{display:grid;grid-template-columns:1.52fr 1.02fr .86fr;gap:16px;min-height:0}
.mdiag-an .card{position:relative;border-radius:26px;overflow:hidden;
  opacity:0;transform:translate3d(0,18px,0) scale(.992);
  transition:opacity .7s cubic-bezier(.22,.68,.24,1), transform .82s cubic-bezier(.22,.68,.24,1)}
.mdiag-an .card.in{opacity:1;transform:none}
.mdiag-an .pad{position:relative;z-index:1;height:100%;padding:20px 22px;display:flex;flex-direction:column}
.mdiag-an .ch{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mdiag-an .ch h3{font-family:'Poppins',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.4px;white-space:nowrap}
.mdiag-an .ch .sp{flex:1}
.mdiag-an .tag{font-size:11px;font-weight:600;padding:4px 9px;border-radius:99px;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);white-space:nowrap}
/* ---------- Hero ---------- */
.mdiag-an .hero{position:relative;border-radius:26px;overflow:visible;
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .7s cubic-bezier(.22,.68,.24,1), transform .82s cubic-bezier(.22,.68,.24,1)}
.mdiag-an .hero.in{opacity:1;transform:none}
.mdiag-an .hero .bg{position:absolute;inset:0;border-radius:26px;overflow:hidden;z-index:0}
.mdiag-an .hero .txt{position:absolute;left:42px;top:58px;z-index:2;max-width:400px}
.mdiag-an .kicker{font-size:13px;font-weight:500;color:var(--dim);letter-spacing:.2px}
.mdiag-an .hero h2{font-family:'Poppins',sans-serif;font-size:50px;font-weight:600;letter-spacing:-1.9px;
  line-height:1.03;margin-top:12px}
.mdiag-an .sub{font-size:14px;color:var(--dim);margin-top:14px;line-height:1.5}
.mdiag-an .verd{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:9px 18px 9px 12px;
  border-radius:99px;background:rgba(127,216,166,.16);box-shadow:inset 0 0 0 1px rgba(127,216,166,.4)}
.mdiag-an .verd i{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px 1px rgba(127,216,166,.8);display:block}
.mdiag-an .verd b{font-size:14px;font-weight:600}
.mdiag-an .cta{margin-top:22px;display:inline-flex;align-items:center;justify-content:center;
  height:54px;padding:0 38px;border:0;border-radius:99px;background:#fff;color:#191512;cursor:default;
  font-family:'Poppins',sans-serif;font-size:15.5px;font-weight:600;letter-spacing:-.2px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.mdiag-an .person{position:absolute;left:39%;bottom:0;height:113%;z-index:2;pointer-events:none;
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.55));
  opacity:0;transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.22,.68,.24,1) .1s, transform 1s cubic-bezier(.22,.68,.24,1) .1s}
.mdiag-an .person.in{opacity:1;transform:none}
.mdiag-an .person img{height:100%;width:auto;display:block}
/* Kennzahlenleiste ueber der Person */
.mdiag-an .kpibar{position:absolute;left:24px;right:24px;bottom:24px;height:124px;z-index:3;
  border-radius:22px;display:flex;align-items:center;padding:0 22px;gap:6px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1.5px 0 rgba(255,255,255,.3),
             0 18px 40px -22px rgba(0,0,0,.6)}
.mdiag-an .kpi{flex:1;min-width:0}
.mdiag-an .kpi u{display:block;font-style:normal;text-decoration:none;font-family:'Poppins',sans-serif;
  font-size:40px;font-weight:600;letter-spacing:-1.6px;line-height:1;font-variant-numeric:tabular-nums}
.mdiag-an .kpi u i{font-style:normal}
.mdiag-an .kpi u small{font-size:.42em;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:0}
.mdiag-an .kpi .lab{display:flex;align-items:center;gap:6px;margin-top:9px}
.mdiag-an .kpi .lab b{width:17px;height:17px;border-radius:5px;flex:0 0 17px;display:block}
.mdiag-an .kpi .lab s{text-decoration:none;font-size:12px;color:rgba(255,255,255,.74);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdiag-an .kpi .ul{margin-top:9px;height:3px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.mdiag-an .kpi .ul i{display:block;height:100%;border-radius:99px;transform-origin:0 50%;transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.mdiag-an .next{width:54px;height:54px;flex:0 0 54px;border-radius:50%;border:0;background:#15110e;
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:default;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.9)}
.mdiag-an .next svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---------- Fieberkurve ---------- */
.mdiag-an .chartwrap{flex:1;min-height:0;position:relative;margin-top:6px}
.mdiag-an .chartwrap svg{width:100%;height:100%;display:block;overflow:visible}
.mdiag-an .gl{stroke:rgba(255,255,255,.1);stroke-width:1}
.mdiag-an .axt{font-family:'Inter',sans-serif;font-size:12px;fill:rgba(255,255,255,.44)}
.mdiag-an .ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1)}
.mdiag-an .ln.on{stroke-dashoffset:0}
.mdiag-an .lnf{opacity:0;transition:opacity .8s ease .5s}
.mdiag-an .lnf.on{opacity:1}
.mdiag-an .band{fill:rgba(255,255,255,.12)}
.mdiag-an .knob{fill:var(--amber);stroke:#1a1512;stroke-width:3;opacity:0;transition:opacity .5s ease .9s}
.mdiag-an .knob.on{opacity:1}
.mdiag-an .tip{position:absolute;transform:translate(-50%,-100%);padding:6px 14px;border-radius:99px;
  background:#15110e;font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.9);opacity:0;transition:opacity .5s ease .9s}
.mdiag-an .tip.on{opacity:1}
.mdiag-an .leg{display:flex;gap:16px;flex:0 0 auto;margin-top:4px}
.mdiag-an .leg span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim2)}
.mdiag-an .leg i{width:13px;height:3px;border-radius:2px;display:block}
/* ---------- Gesamtwert ---------- */
.mdiag-an .spark{flex:1;min-height:0;display:flex;align-items:center;gap:12px;margin:6px 0}
.mdiag-an .spark svg{flex:1;height:42px}
.mdiag-an .sl{fill:none;stroke:rgba(255,255,255,.78);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1)}
.mdiag-an .sl.on{stroke-dashoffset:0}
.mdiag-an .chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:99px;
  background:rgba(255,255,255,.11);font-size:12.5px;font-weight:600;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
.mdiag-an .chip s{text-decoration:none;color:var(--green);font-size:11px}
.mdiag-an .big{font-family:'Poppins',sans-serif;font-size:46px;font-weight:600;letter-spacing:-1.8px;
  line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.mdiag-an .big i{font-style:normal}
.mdiag-an .foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex:0 0 auto}
.mdiag-an .foot .ic{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.11);
  display:flex;align-items:center;justify-content:center;flex:0 0 36px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
.mdiag-an .foot .ic svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mdiag-an .foot span{font-size:12.5px;color:var(--dim);line-height:1.35}
/* ---------- Rose ---------- */
.mdiag-an .rose{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.mdiag-an .rose svg{max-width:100%;max-height:100%}
.mdiag-an .wg{opacity:0;transform-origin:50% 50%;transform:scale(.2);
  transition:opacity .5s ease, transform .9s cubic-bezier(.16,.84,.24,1)}
.mdiag-an .wg.on{opacity:.95;transform:none}
.mdiag-an .rt{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;fill:rgba(255,255,255,.64);
  opacity:0;transition:opacity .5s}
.mdiag-an .rt.on{opacity:1}
.mdiag-an .cap{text-align:center;font-size:12px;color:var(--dim);flex:0 0 auto;margin-top:4px}
/* ---------- Balkendiagramm Kompetenzmodell ---------- */
.mdiag-an .bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:0;margin-top:10px;position:relative}
.mdiag-an .bgrid{position:absolute;left:0;right:0;top:0;bottom:24px;pointer-events:none}
.mdiag-an .bgrid i{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.08)}
.mdiag-an .bgrid s{position:absolute;left:-4px;text-decoration:none;font-size:10.5px;color:var(--dim2);
  transform:translateY(-50%)}
.mdiag-an .bgroup{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  padding:0 6px;position:relative;min-width:0}
.mdiag-an .bset{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:calc(100% - 24px)}
.mdiag-an .bcol{width:17px;border-radius:6px 6px 3px 3px;transform-origin:50% 100%;transform:scaleY(0);
  transition:transform 1.05s cubic-bezier(.16,.84,.24,1);position:relative}
.mdiag-an .bcol.soll{background:rgba(255,255,255,.22) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.mdiag-an .blab{text-align:center;font-size:10.5px;color:var(--dim2);margin-top:9px;height:24px;
  line-height:1.15;overflow:hidden}
.mdiag-an .bcl{position:absolute;left:6px;right:6px;top:-2px;text-align:center;font-size:9.5px;
  font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.4)}
/* ---------- Halbkreise Potenzial ---------- */
.mdiag-an .halfs{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  align-content:center;margin-top:6px}
.mdiag-an .half{text-align:center;min-width:0;display:flex;flex-direction:column;justify-content:center}
.mdiag-an .half svg{width:100%;flex:1;min-height:0;display:block;overflow:visible}
.mdiag-an .hk{fill:none;stroke:rgba(255,255,255,.15);stroke-width:9;stroke-linecap:round}
.mdiag-an .hf{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:0 999;
  transition:stroke-dasharray 1.2s cubic-bezier(.16,.84,.24,1)}
.mdiag-an .half u{display:block;font-style:normal;text-decoration:none;font-family:'Poppins',sans-serif;
  font-size:19px;font-weight:600;letter-spacing:-.6px;margin-top:-14px;font-variant-numeric:tabular-nums}
.mdiag-an .half s{display:block;text-decoration:none;font-size:10.5px;color:var(--dim);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- Verhaltensstil-Liste ---------- */
.mdiag-an .rows{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;margin-top:4px}
.mdiag-an .rw{display:grid;grid-template-columns:96px 1fr 26px;align-items:center;gap:8px}
.mdiag-an .rw em{font-style:normal;font-size:11.5px;color:var(--dim);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdiag-an .rw b{font-size:11px;font-weight:700;color:rgba(255,255,255,.62);text-align:right;
  font-variant-numeric:tabular-nums}
.mdiag-an .trk{position:relative;height:7px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.mdiag-an .trk i{position:absolute;inset:0;border-radius:99px;transform-origin:0 50%;transform:scaleX(0);
  transition:transform 1.05s cubic-bezier(.16,.84,.24,1)}
.mdiag-an .trk u{position:absolute;top:-1px;bottom:-1px;width:2px;border-radius:2px;background:rgba(255,255,255,.8)}
.mdiag-an .sub2{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.9px;color:rgba(255,255,255,.42);margin:9px 0 3px;flex:0 0 auto}
/* ---------- Enabler-Streifen ---------- */
.mdiag-an .enab{display:flex;gap:8px;flex:0 0 auto;margin-top:10px}
.mdiag-an .en{flex:1;padding:9px 11px;border-radius:13px;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);min-width:0}
.mdiag-an .en s{display:block;text-decoration:none;font-size:10px;color:var(--dim2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdiag-an .en u{display:block;font-style:normal;text-decoration:none;font-family:'Poppins',sans-serif;
  font-size:20px;font-weight:600;letter-spacing:-.7px;margin-top:2px;font-variant-numeric:tabular-nums}
.mdiag-an .en u i{font-style:normal}
.mdiag-an .en .mini{margin-top:6px;height:3px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.mdiag-an .en .mini i{display:block;height:100%;border-radius:99px;transform-origin:0 50%;transform:scaleX(0);
  transition:transform 1.05s cubic-bezier(.16,.84,.24,1)}
@media (prefers-reduced-motion: reduce){
  .mdiag-an .card,.mdiag-an .hero,.mdiag-an .person,.mdiag-an .ln,.mdiag-an .lnf,.mdiag-an .sl,
  .mdiag-an .wg,.mdiag-an .rt,.mdiag-an .knob,.mdiag-an .tip,.mdiag-an .kpi .ul i,.mdiag-an .bcol,
  .mdiag-an .hf,.mdiag-an .trk i,.mdiag-an .en .mini i{transition:none !important}
}
@media (prefers-reduced-transparency: reduce){
  .mdiag-an{--g1:.9;--g2:.86}
  .mdiag-an .glass,.mdiag-an .kpibar{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* ---------- Logo oben rechts ---------- */
.mdiag-an .brandlogo{display:flex;align-items:center;gap:12px;margin-left:4px;flex:0 0 auto}
.mdiag-an .brandlogo .div{width:1px;height:34px;background:rgba(255,255,255,.16);display:block}
.mdiag-an .brandlogo i{display:block;width:42px;height:42px;
  background:var(--mdiag-logo) center/contain no-repeat;
  filter:brightness(0) invert(1) opacity(.95)}
.mdiag-an .brandlogo b{font-family:'Poppins',sans-serif;font-size:19px;font-weight:700;
  letter-spacing:-.5px;line-height:1}
.mdiag-an .brandlogo s{display:block;text-decoration:none;font-size:9px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--dim2);margin-top:3px}
/* ---------- Managementprofil (Scheibenmodell) ---------- */
.mdiag-an .disc{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.mdiag-an .disc svg{max-width:100%;max-height:100%;overflow:visible}
.mdiag-an .dbase{fill:rgba(255,255,255,.07)}
.mdiag-an .dl{font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;fill:#1f1e22;
  opacity:0;transition:opacity .45s}
.mdiag-an .dl.on{opacity:1}
.mdiag-an .dd{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;fill:rgba(255,255,255,.62);
  opacity:0;transition:opacity .45s}
.mdiag-an .dd.on{opacity:1}
.mdiag-an .disclg{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;flex:0 0 auto;margin-top:6px}
.mdiag-an .disclg span{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--dim2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdiag-an .disclg b{font-family:'Poppins',sans-serif;font-size:9.5px;font-weight:700;
  color:rgba(255,255,255,.72);flex:0 0 auto}

/* ===== Assessment-Dashboard (Ergebnis-Beleg) ===== */
.section-dashboard .container{max-width:1320px}
@media (min-width:901px){
  .section-dashboard .container{width:calc(100% - 24px);max-width:1600px;padding-left:0;padding-right:0}
}
.dash-figure{position:relative;display:grid;grid-template-columns:36% 64%;align-items:stretch;border-radius:24px;overflow:hidden;box-shadow:0 32px 70px -34px rgba(2,5,32,.46);background:#081132;isolation:isolate}
.dash-room-bg{position:absolute;top:0;right:0;bottom:0;left:36%;z-index:0;background:linear-gradient(rgba(4,8,30,.12),rgba(4,8,30,.28)),url("hero-konferenzraum.webp") center/cover no-repeat;filter:saturate(.78) brightness(.82);transform:scale(1.025);opacity:1;transition:opacity 1.65s cubic-bezier(.77,0,.175,1),filter 1.65s ease,transform 1.8s cubic-bezier(.23,1,.32,1)}
.dash-figure.is-assembling .dash-room-bg{opacity:0;filter:saturate(.45) brightness(.42);transform:scale(1.08)}
.dash-figure::after{content:"";position:absolute;top:0;right:0;bottom:0;left:36%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(2,5,32,.22) 0%,rgba(2,5,32,.08) 52%,rgba(2,5,32,.28) 100%);opacity:0;transition:opacity 1.2s ease 1.1s}
.dash-figure.is-assembling::after{opacity:1}
.dash-figure .mdiag-an{position:relative;grid-column:2;grid-row:1;z-index:1;display:block;width:100%;height:auto;border-radius:0;background:transparent;filter:blur(1.45px) brightness(.7) saturate(.76);transform:scale(1.018);transform-origin:center}
.dash-figure .mdiag-an .bgl,.dash-figure .mdiag-an .glow,.dash-figure .mdiag-an .glow2{opacity:0;transition:opacity 1.3s ease .08s}
.dash-figure.is-assembling .mdiag-an .bgl,.dash-figure.is-assembling .mdiag-an .glow,.dash-figure.is-assembling .mdiag-an .glow2{opacity:1}
.dash-figure .dashboard-piece{will-change:transform,opacity,filter;transition:opacity .92s ease,transform 1.24s cubic-bezier(.16,.84,.24,1),filter 1.05s ease!important}
.dash-figure .dashboard-piece:not(.in){opacity:0!important;filter:blur(12px);transform:translate3d(var(--entry-x,0),var(--entry-y,0),0) scale(.88)!important}
.dash-figure .dashboard-piece.in{opacity:1;filter:blur(0);transform:none!important}
.dash-copy{position:relative;grid-column:1;grid-row:1;z-index:3;display:flex;flex-direction:column;justify-content:center;width:100%;padding:40px 34px;color:#fff;background:#081132;opacity:1;transform:none;pointer-events:auto;text-shadow:none}
.dash-eyebrow{display:block;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#9db9ff;margin-bottom:13px}
.dash-copy h2{color:#fff;font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.12;letter-spacing:-.025em;margin-bottom:18px;max-width:18ch}
.dash-copy p{color:rgba(255,255,255,.91);font-size:clamp(13px,1.05vw,15px);line-height:1.55;margin-bottom:11px;max-width:42ch}
.dash-note{font-size:11px!important;color:rgba(255,255,255,.62)!important;margin-top:8px;margin-bottom:0!important;max-width:62ch!important}
@media (max-width:900px){
  .dash-figure{display:flex;flex-direction:column;aspect-ratio:auto;min-height:0;background:#081132}
  .dash-room-bg,.dash-figure::after{display:none}
  .dash-copy{position:relative;top:auto;left:auto;order:-1;width:100%;padding:28px 22px;background:#081132;opacity:1;transform:none;text-shadow:none;pointer-events:auto}
  .dash-copy h2,.dash-copy p,.dash-note{max-width:none}
  .dash-copy h2{font-size:clamp(1.75rem,7.5vw,2.5rem);margin-bottom:16px}
  .dash-figure .mdiag-an{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1720/1220;filter:blur(1.35px) brightness(.68) saturate(.74);transform:none}
  .dash-figure .dashboard-piece:not(.in){filter:none;transform:translate3d(0,18px,0) scale(.99)!important}
}
@media (prefers-reduced-motion:reduce){
  .dash-room-bg{opacity:0!important}
  .dash-figure::after{opacity:1!important}
  .dash-copy{opacity:1!important;transform:none!important}
  .dash-figure .dashboard-piece{transition:none!important}
}

/* Fotocollagen aus realen Arbeits- und Gesprächssituationen */
.photo-collage{display:grid;gap:8px;max-width:820px;height:300px;margin:30px auto 32px;overflow:hidden;border-radius:16px;background:var(--color-fog-surface)}
.photo-collage img{width:100%;height:100%;object-fit:cover;min-width:0;min-height:0}
.photo-collage-assessment{grid-template-columns:1fr 1fr}
.photo-collage-assessment img:first-child{object-position:center 30%}
.photo-collage-assessment img:nth-child(2){object-position:center 84%}
.photo-collage-development{grid-template-columns:1.3fr .9fr;grid-template-rows:1fr 1fr}
.photo-collage-development img:first-child{grid-row:1 / 3}
.photo-collage-development img:nth-child(2){object-position:center 38%}
.photo-collage-development img:nth-child(3){object-position:center 50%}
.panel-wide{max-width:1128px}
.panel-wide .photo-collage{max-width:980px;height:330px}
@media (max-width:680px){
  .photo-collage{height:260px;gap:5px;margin:24px auto 26px}
  .photo-collage-assessment{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:360px}
  .photo-collage-assessment img:first-child{object-position:center 30%}
  .photo-collage-assessment img:nth-child(2){object-position:center 84%}
  .photo-collage-development{grid-template-columns:1fr 1fr;grid-template-rows:1.15fr .85fr}
  .photo-collage-development img:first-child{grid-column:1 / 3;grid-row:auto}
  .panel-wide .photo-collage{height:260px}
}