/* ===========================================================================
   KMP.digital – Über uns  (Namespace: ub9-)
   Formsprache der Startseite: zentrierte Blöcke, wechselnde Hintergründe,
   20px-Karten mit weichem Schatten, Icon-Kacheln, gestaffelte Reveals.
   Tokens: #0D0B2E · #534AB7 · #7F77DD · #F0EFFE · #F5F5F7
   =========================================================================== */

.ub9{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; overflow-x:clip; }
.ub9 *,.ub9 *::before,.ub9 *::after{ box-sizing:border-box; }

/* ---------- Grundraster ---------- */
.ub9-sec{ padding:80px 30px; }
.ub9-sec--grey{ background:#F5F5F7; }
.ub9-sec--white{ background:#fff; }
.ub9-sec--dark{ background:linear-gradient(135deg,#0D0B2E 0%,#534AB7 100%); }
.ub9-in{ max-width:1100px; margin:0 auto; text-align:center; }

.ub9-eyebrow{ color:#7F77DD; font-size:13px; font-weight:700; letter-spacing:4px; text-transform:uppercase; margin:0 0 16px; }
.ub9-h2{ color:#0D0B2E; font-size:clamp(2rem,5vw,2.8rem); font-weight:800; line-height:1.2; margin:0 0 16px; }
.ub9-h2 .ub9-dot{ color:#7F77DD; }
.ub9-sub{ color:#666; font-size:18px; line-height:1.7; margin:0 auto 60px; max-width:680px; }

.ub9-sec--dark .ub9-eyebrow{ color:rgba(255,255,255,.6); }
.ub9-sec--dark .ub9-h2{ color:#fff; }
.ub9-sec--dark .ub9-h2 .ub9-dot{ color:rgba(255,255,255,.45); }
.ub9-sec--dark .ub9-sub{ color:rgba(255,255,255,.7); }

/* ---------- Reveal ---------- */
.ub9-rev{ opacity:0; transform:translateY(34px); transition:opacity .6s ease, transform .6s cubic-bezier(.25,.46,.45,.94); }
.ub9-rev.is-in{ opacity:1; transform:none; }

/* ===========================================================================
   1 · Hero
   =========================================================================== */
@keyframes ub9-rise{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none;} }

.ub9-hero{
  position:relative; overflow:hidden;
  padding:110px 30px 104px;
  background:linear-gradient(135deg,#0D0B2E 0%,#534AB7 100%);
  text-align:center;
}
.ub9-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 78% 35%, rgba(127,119,221,.28) 0%, transparent 70%);
}
.ub9-hero__in{ position:relative; z-index:1; max-width:860px; margin:0 auto; }

.ub9-hero__label{ color:rgba(255,255,255,.55); font-size:13px; font-weight:700; letter-spacing:6px; text-transform:uppercase; margin:0 0 28px;
  opacity:0; animation:ub9-rise .8s cubic-bezier(.25,.46,.45,.94) .10s forwards; }
.ub9-hero__h1{ color:#fff; font-size:clamp(1.9rem,5.6vw,3.4rem); font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:0 0 14px;
  opacity:0; animation:ub9-rise .8s cubic-bezier(.25,.46,.45,.94) .22s forwards; }
.ub9-hero__h1 .ub9-dot{ color:#9C95F0; }
.ub9-hero__text{ color:rgba(255,255,255,.78); font-size:clamp(1rem,2vw,1.12rem); line-height:1.8; max-width:660px; margin:0 auto 16px;
  opacity:0; animation:ub9-rise .8s cubic-bezier(.25,.46,.45,.94) .40s forwards; }
.ub9-hero__text:last-of-type{ margin-bottom:38px; }
.ub9-hero__text b{ color:#fff; font-weight:700; }

.ub9-hero__cta{ display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap;
  opacity:0; animation:ub9-rise .8s cubic-bezier(.25,.46,.45,.94) .58s forwards; }
.ub9-btn{ background:#fff; color:#0D0B2E; padding:17px 36px; border-radius:12px; font-size:16px; font-weight:700;
  text-decoration:none; display:inline-block; transition:transform .3s ease, box-shadow .3s ease; }
.ub9-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.32); color:#0D0B2E; }
.ub9-btn2{ color:rgba(255,255,255,.9); font-size:15px; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; padding:14px 2px; }
.ub9-btn2 span{ position:relative; }
.ub9-btn2 span::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:rgba(255,255,255,.55);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.ub9-btn2:hover{ color:#fff; }
.ub9-btn2:hover span::after{ transform:scaleX(1); }
.ub9-btn2 em{ font-style:normal; transition:transform .25s ease; }
.ub9-btn2:hover em{ transform:translateX(4px); }

/* ===========================================================================
   2 · Fakten
   =========================================================================== */
.ub9-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.ub9-fact{ flex:0 1 calc(33.333% - 16px); min-width:250px;
  background:#fff; border-radius:20px; padding:38px 26px; box-shadow:0 4px 24px rgba(0,0,0,.07);
  transition:transform .4s ease, box-shadow .4s ease;
}
.ub9-fact:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(127,119,221,.2); }
.ub9-fact__v{ display:block; color:#0D0B2E; font-size:clamp(2rem,4vw,2.9rem); font-weight:800; line-height:1.05; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.ub9-num{ font-variant-numeric:tabular-nums; }
.ub9-fact__v--word{ font-size:clamp(1.35rem,2.6vw,1.85rem); }
.ub9-fact__v small{ font-size:.5em; font-weight:700; color:#7F77DD; }
.ub9-fact__k{ display:block; color:#0D0B2E; font-size:16px; font-weight:700; margin-top:14px; }
.ub9-fact__s{ display:block; color:#8a88a3; font-size:14px; margin-top:6px; line-height:1.5; }

/* ===========================================================================
   Firmenverbund
   =========================================================================== */
.ub9-verbund{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.ub9-verbund--2{ grid-template-columns:repeat(2,1fr); max-width:820px; margin:0 auto; }
.ub9-vcard{
  background:#fff; border-radius:20px; padding:40px 30px; box-shadow:0 4px 24px rgba(0,0,0,.07);
  position:relative; overflow:hidden; text-align:left;
  transition:transform .4s ease, box-shadow .4s ease;
}
.ub9-vcard::before{ content:''; position:absolute; left:0; top:0; right:0; height:4px;
  background:linear-gradient(90deg,#7F77DD,#534AB7); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94); }
.ub9-vcard.is-in::before{ transform:scaleX(1); }
.ub9-vcard:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(127,119,221,.2); }
.ub9-vcard__ic{ width:60px; height:60px; background:#F0EFFE; border-radius:16px; margin:0 0 22px;
  display:flex; align-items:center; justify-content:center; transition:transform .4s ease; }
.ub9-vcard:hover .ub9-vcard__ic{ transform:scale(1.08) rotate(-4deg); }
.ub9-vcard h3{ color:#0D0B2E; font-size:22px; font-weight:800; margin:0 0 4px; }
.ub9-vcard__role{ display:block; color:#7F77DD; font-size:13px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; margin-bottom:14px; }
.ub9-vcard p{ color:#888; font-size:15px; line-height:1.75; margin:0; }

/* ===========================================================================
   Historie – schmaler Streifen
   =========================================================================== */
.ub9-hist{ position:relative; list-style:none; margin:0; padding:0 0 0 30px; max-width:760px;
  margin-inline:auto; text-align:left; }
.ub9-hist__rail{ position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:rgba(13,11,46,.10); border-radius:2px; overflow:hidden; }
.ub9-hist__fill{ display:block; width:100%; height:0; background:linear-gradient(180deg,#7F77DD,#534AB7);
  transition:height 1.3s cubic-bezier(.4,0,.2,1) .2s; }
.ub9-hist.is-revealed .ub9-hist__fill{ height:100%; }

.ub9-hist__item{ position:relative; display:flex; align-items:baseline; gap:18px; padding:11px 0;
  opacity:0; transform:translateX(-14px); transition:opacity .5s ease, transform .5s ease; }
.ub9-hist.is-revealed .ub9-hist__item{ opacity:1; transform:none; }
.ub9-hist.is-revealed .ub9-hist__item:nth-child(3){ transition-delay:.09s; }
.ub9-hist.is-revealed .ub9-hist__item:nth-child(4){ transition-delay:.18s; }
.ub9-hist.is-revealed .ub9-hist__item:nth-child(5){ transition-delay:.27s; }
.ub9-hist.is-revealed .ub9-hist__item:nth-child(6){ transition-delay:.36s; }
.ub9-hist__item::before{ content:''; position:absolute; left:-30px; top:17px; width:12px; height:12px;
  border-radius:50%; background:#fff; border:3px solid #7F77DD; margin-left:-1px; }
.ub9-hist__y{ flex:0 0 74px; color:#534AB7; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.ub9-hist__t{ color:#666; font-size:15.5px; line-height:1.7; }

/* ===========================================================================
   4 · Substanz (dunkel, Icon-Karten)
   =========================================================================== */
.ub9-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ub9-gcard{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:34px 24px;
  transition:transform .4s ease, background .4s ease, border-color .4s ease;
}
.ub9-gcard:hover{ transform:translateY(-8px); background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.26); }
.ub9-gcard__ic{ width:60px; height:60px; background:rgba(255,255,255,.15); border-radius:16px; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center; }
.ub9-gcard h3{ color:#fff; font-size:17px; font-weight:700; margin:0 0 12px; line-height:1.35; }
.ub9-gcard p{ color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.7; margin:0; }

/* ===========================================================================
   5 · Portfolio
   =========================================================================== */
.ub9-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.ub9-card{
  background:#fff; border-radius:20px; padding:40px 28px; box-shadow:0 4px 24px rgba(0,0,0,.07);
  text-decoration:none; display:block; transition:transform .4s ease, box-shadow .4s ease;
}
.ub9-card:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(127,119,221,.2); }
.ub9-card__ic{ width:64px; height:64px; background:#F0EFFE; border-radius:16px; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center; transition:transform .4s ease; }
.ub9-card:hover .ub9-card__ic{ transform:scale(1.08) rotate(-4deg); }
.ub9-card__role{ display:inline-block; background:#F0EFFE; color:#534AB7; font-size:11.5px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; padding:5px 11px; border-radius:999px; margin-bottom:14px; }
.ub9-card h3{ color:#0D0B2E; font-size:20px; font-weight:800; margin:0 0 10px; }
.ub9-card p{ color:#888; font-size:15px; line-height:1.7; margin:0; }
.ub9-card__more{ display:inline-block; margin-top:16px; color:#7F77DD; font-size:14px; font-weight:700; }
.ub9-card__more em{ font-style:normal; display:inline-block; transition:transform .25s ease; }
.ub9-card:hover .ub9-card__more em{ transform:translateX(4px); }

/* ===========================================================================
   6 · Team
   =========================================================================== */
.ub9-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.ub9-person{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.07);
  transition:transform .4s ease, box-shadow .4s ease; }
.ub9-person:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(127,119,221,.2); }
.ub9-person__media{ aspect-ratio:4/3; background:#F0EFFE; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ub9-person__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ub9-person:hover .ub9-person__media img{ transform:scale(1.04); }
.ub9-person__ini{ font-size:2.6rem; font-weight:800; color:#7F77DD; letter-spacing:.04em; }
.ub9-person__body{ padding:26px 24px 30px; }
.ub9-person__body h3{ color:#0D0B2E; font-size:18px; font-weight:700; margin:0 0 4px; }
.ub9-person__role{ color:#7F77DD; font-size:14px; font-weight:700; margin:0 0 12px; }
.ub9-person__skills{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.ub9-person__skills li{ background:#F0EFFE; color:#534AB7; font-size:12.5px; font-weight:700;
  padding:5px 11px; border-radius:8px; line-height:1.3; }
.ub9-person__mail{ color:#534AB7; font-size:14.5px; font-weight:600; text-decoration:none; word-break:break-word; }
.ub9-person__mail:hover{ text-decoration:underline; }

/* ===========================================================================
   Anspruch
   =========================================================================== */
.ub9-claim{ background:#fff; border-radius:20px; padding:52px 48px; box-shadow:0 4px 24px rgba(0,0,0,.07);
  max-width:860px; margin:0 auto; text-align:left; position:relative; overflow:hidden; }
.ub9-claim::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,#7F77DD,#534AB7); }
.ub9-claim__ic{ width:56px; height:56px; background:#F0EFFE; border-radius:14px; margin:0 0 22px;
  display:flex; align-items:center; justify-content:center; }
.ub9-claim .ub9-h2{ font-size:clamp(1.6rem,3.4vw,2.1rem); margin-bottom:20px; }
.ub9-claim p{ color:#666; font-size:16.5px; line-height:1.85; margin:0 0 16px; }
.ub9-claim p:last-child{ margin-bottom:0; }

/* ===========================================================================
   8 · Abschluss-CTA
   =========================================================================== */
.ub9-final{ text-align:center; }
.ub9-final__ic{ width:56px; height:56px; background:rgba(255,255,255,.15); border-radius:14px; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center; }
.ub9-final h2{ color:#fff; font-size:clamp(1.8rem,4vw,2.5rem); font-weight:800; margin:0 0 16px; }
.ub9-final p{ color:rgba(255,255,255,.82); font-size:17px; line-height:1.8; max-width:620px; margin:0 auto 38px; }
.ub9-final__row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:960px){
  .ub9-grid4{ grid-template-columns:repeat(2,1fr); }
  .ub9-verbund,.ub9-verbund--2{ grid-template-columns:repeat(2,1fr); }
  .ub9-fact{ flex:0 1 calc(50% - 12px); }
  .ub9-grid3,.ub9-team{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .ub9-sec{ padding:60px 22px; }
  .ub9-hero{ padding:80px 22px 72px; }
  .ub9-sub{ margin-bottom:42px; }
  .ub9-grid3,.ub9-team,.ub9-grid4{ grid-template-columns:1fr; }
  .ub9-fact{ flex:1 1 100%; min-width:0; }
  .ub9-verbund,.ub9-verbund--2{ grid-template-columns:1fr; }
  .ub9-btn,.ub9-btn2{ width:100%; justify-content:center; }

  .ub9-hist__item{ flex-direction:column; gap:3px; padding:9px 0; }
  .ub9-hist__y{ flex:none; }
  .ub9-claim{ padding:32px 24px; }
}

@media (prefers-reduced-motion:reduce){
  .ub9 *{ animation:none !important; transition:none !important; }
  .ub9-rev,.ub9-hist__item{ opacity:1 !important; transform:none !important; }
  .ub9-vcard::before{ transform:scaleX(1) !important; }
  .ub9-hero__label,.ub9-hero__h1,.ub9-hero__text,.ub9-hero__cta{ opacity:1 !important; transform:none !important; }
  .ub9-hist__fill{ height:100% !important; }
}