/* =====================================================================
   JUNGES OSTALLGÄU — ÜBER UNS
   Sparkle-Hero (Navy/Blau) + Editorial-Sektionen.
   Baut auf site.css auf. DSGVO-safe: keine externen Requests.
   ===================================================================== */

/* ---------- SPARKLE HERO (1:1 an Properus „Über uns", OAL-Navy + Blau) ---------- */
.uhero{
  position:relative;
  overflow:hidden;
  min-height:calc(100svh - var(--nav-h));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--nav-h) var(--pad) 0;
  /* blau, aber nicht zu krass: ruhiges OAL-Navy mit dezentem Schimmer oben */
  background:
    radial-gradient(120% 75% at 50% -10%, #16306a 0%, transparent 58%),
    #0E2148;
  color:#fff;
}
.uhero__inner{position:relative;z-index:20;width:100%;display:flex;flex-direction:column;align-items:center}

/* title — eine Zeile, füllt die Breite wie PROPERUS */
.uhero__title{
  font-weight:800;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.3rem,9.2vw,10.5rem);
  white-space:nowrap;text-transform:uppercase;
  margin:0;color:#fff;
  position:relative;z-index:20;
  will-change:transform,opacity;
}
.uhero__title-line{display:inline;will-change:transform,opacity}
.uhero__title-line--1{color:#fff}
.uhero__title-line--accent{color:#fff}
/* Schutz vor Überlauf auf sehr schmalen Geräten */
@media(max-width:520px){.uhero__title{font-size:clamp(1.2rem,8.2vw,3rem);letter-spacing:-.025em}}

/* sparkles band — Lichtlinien + Canvas + Radial-Maske, blendet in den Navy-Grund (kein Kasten). Die Lichtlinie liegt direkt unter dem letzten Untertitel-Satz (wie bei Properus). */
.uhero__sparkles{
  position:relative;width:min(42rem,92vw);height:10rem;margin-top:.5em;
}
.uhero__canvas{position:absolute;inset:0;width:100%;height:100%}
.sg-line{position:absolute;top:0;left:50%;transform:translateX(-50%);pointer-events:none}
.sg-line--1{width:70%;height:2px;background:linear-gradient(90deg,transparent,#7ea1ec,transparent);filter:blur(1px)}
.sg-line--2{width:70%;height:1px;background:linear-gradient(90deg,transparent,#7ea1ec,transparent)}
.sg-line--3{width:28%;height:5px;background:linear-gradient(90deg,transparent,#aecbf5,transparent);filter:blur(2px)}
.sg-line--4{width:28%;height:1px;background:linear-gradient(90deg,transparent,#aecbf5,transparent)}
.uhero__sparkles-mask{
  position:absolute;inset:0;background:#0E2148;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 380px 200px at top center, transparent 20%, #000 80%);
  mask-image:radial-gradient(ellipse 380px 200px at top center, transparent 20%, #000 80%);
}

/* subtitle — jeder Satz einzeln, Größen exakt wie Properus. Folgt direkt auf den Titel. */
.uhero__sub{
  display:flex;flex-direction:column;align-items:center;gap:.35em;
  max-width:min(52rem,90vw);margin:clamp(1.1rem,2.6vw,1.7rem) auto 0;
  position:relative;z-index:20;
}
.uhero__sub-line{
  display:block;will-change:transform,opacity;
  font-size:clamp(.9rem,2vw,1.15rem);line-height:1.65;font-weight:300;
  letter-spacing:.025em;color:rgba(255,255,255,.65);
}
.uhero__sub-line--1{color:rgba(255,255,255,.88);font-weight:400}
.uhero__sub-line--lead{margin-top:.7em}

.uhero__scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center}
.uhero__scroll span{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.35);font-weight:400;margin-bottom:.85rem}
.uhero__scroll-line{width:1px;height:3.5rem;background:linear-gradient(180deg,transparent,#7ea1ec 40%,transparent);animation:uScroll 2.2s cubic-bezier(.16,1,.3,1) 1.4s infinite}
@keyframes uScroll{0%{transform:scaleY(0) translateY(-100%);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:scaleY(1) translateY(0);opacity:0}}
@media (max-height:680px){.uhero__scroll{display:none}}

/* entrance — progressive enhancement.
   Default = fully visible (works with no JS / reduced motion).
   JS adds .anim (hide) then .anim.in (transition to visible). */
.uhero.anim .uhero__title,
.uhero.anim .uhero__sparkles,
.uhero.anim .uhero__sub-line,
.uhero.anim .uhero__scroll span{opacity:0}
.uhero.anim .uhero__title,
.uhero.anim .uhero__sub-line{transform:translateY(34px)}
.uhero.anim.in .uhero__title,
.uhero.anim.in .uhero__sparkles,
.uhero.anim.in .uhero__sub-line,
.uhero.anim.in .uhero__scroll span{opacity:1;transform:none}
.uhero.anim .uhero__title{transition:opacity 1.1s var(--ease) .15s,transform 1.1s var(--ease) .15s}
.uhero.anim .uhero__sub-line--1{transition:opacity .9s var(--ease) .55s,transform .9s var(--ease) .55s}
.uhero.anim .uhero__sub-line--2{transition:opacity .9s var(--ease) .7s,transform .9s var(--ease) .7s}
.uhero.anim .uhero__sub-line--3{transition:opacity .9s var(--ease) .85s,transform .9s var(--ease) .85s}
.uhero.anim .uhero__sub-line--4{transition:opacity .9s var(--ease) 1s,transform .9s var(--ease) 1s}
.uhero.anim .uhero__sparkles{transition:opacity 1.4s var(--ease) 1.15s}
.uhero.anim .uhero__scroll span{transition:opacity .9s var(--ease) 1.5s}

/* ---------- MISSION (editorial quote) ---------- */
.umiss__quote{
  font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:800;line-height:1.18;letter-spacing:-.02em;
  color:var(--ink);border-left:4px solid var(--blue-600);padding-left:clamp(1.2rem,3vw,2rem);
  margin:1.4rem 0 2rem;max-width:20ch;text-wrap:balance;
}
.umiss__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);max-width:880px}
@media(max-width:760px){.umiss__body{grid-template-columns:1fr}}
.umiss__body p{color:var(--muted);font-size:1.05rem;line-height:1.75}
.umiss__body p strong{color:var(--text)}

/* ---------- VALUES ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.6rem}
@media(max-width:920px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vgrid{grid-template-columns:1fr}}
.vcard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.9rem 1.7rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  overflow:hidden;
}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.vcard__icon{width:50px;height:50px;border-radius:13px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;margin-bottom:1.15rem}
.vcard__icon svg{width:25px;height:25px}
.vcard h3{font-size:1.22rem;margin-bottom:.5rem}
.vcard p{color:var(--muted);font-size:.96rem;line-height:1.6}
@media(max-width:480px){.vcard{padding:1.5rem 1.3rem}}
/* highlighted (key messages) */
.vcard--key{background:linear-gradient(160deg,#fff, var(--blue-50));border-color:var(--blue-100)}
.vcard--key .vcard__icon{background:var(--blue-600);color:#fff}
.vcard__tag{position:absolute;top:1.15rem;right:1.15rem;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);background:#fff;border:1px solid var(--blue-100);padding:.28rem .55rem;border-radius:var(--r-full)}

/* ---------- HALTUNG (statement band) ---------- */
.stand{position:relative;overflow:hidden;background:var(--navy);color:#fff;text-align:center;padding:clamp(3.5rem,8vw,6.5rem) 0}
.stand__glow{position:absolute;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(46,99,216,.4),transparent 70%);filter:blur(50px);top:-260px;left:50%;transform:translateX(-50%);pointer-events:none}
.stand__inner{position:relative;max-width:840px;margin-inline:auto}
.stand__statement{font-size:clamp(1.5rem,3.2vw,2.45rem);font-weight:800;line-height:1.22;letter-spacing:-.02em;margin:1rem 0 1.2rem;text-wrap:balance}
.stand__statement em{font-style:normal;color:#8fb0f0}
.stand__lead{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65;color:#bccbe8;max-width:60ch;margin:0 auto}

/* ---------- CONTRAST (was uns unterscheidet) ---------- */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.6rem}
@media(max-width:760px){.contrast{grid-template-columns:1fr}}
.cpanel{border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.3rem);border:1px solid var(--line)}
.cpanel--them{background:var(--paper)}
.cpanel--us{background:var(--navy);color:#fff;border-color:transparent;box-shadow:var(--shadow-blue)}
.cpanel__label{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem;display:inline-flex;align-items:center;gap:.55rem}
.cpanel--them .cpanel__label{color:var(--muted-2)}
.cpanel--us .cpanel__label{color:#8fb0f0}
.cpanel h3{font-size:1.45rem;margin-bottom:1.2rem;letter-spacing:-.01em}
.cpanel--us h3{color:#fff}
.clist{display:grid;gap:.95rem}
.clist li{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem;line-height:1.5}
.clist--them li{color:var(--muted)}
.clist--us li{color:#dbe5f7}
.clist li svg{width:21px;height:21px;flex-shrink:0;margin-top:1px}
.clist--them li svg{color:var(--muted-2)}
.clist--us li svg{color:#5fd59a}

/* ---------- HOW WE WORK (steps) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.6rem;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:2rem 1.7rem 1.8rem}
.step__no{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--blue-600);color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:1.1rem}
.step h3{font-size:1.2rem;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.97rem;line-height:1.65}

/* ---------- GENERATIONS ---------- */
.gen{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.6rem}
@media(max-width:760px){.gen{grid-template-columns:1fr}}
.gcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.7rem,3vw,2.4rem);background:#fff}
.gcard__eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-600);display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.gcard h3{font-size:1.55rem;margin-bottom:.8rem;letter-spacing:-.01em}
.gcard p{color:var(--muted);font-size:1rem;line-height:1.7}
.gbridge{margin-top:1.5rem;text-align:center;font-size:1.1rem;color:var(--text);font-weight:600;max-width:60ch;margin-inline:auto}
.gbridge b{color:var(--blue-600)}

/* team photo band */
.teamband{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-top:2.6rem;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.teamband img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:600px){.teamband img{aspect-ratio:4/3}}
.teamband__cap{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem clamp(1.4rem,3vw,2.4rem) 1.4rem;
  background:linear-gradient(0deg,rgba(10,23,51,.82),transparent);
  color:#fff;font-size:.95rem;font-weight:500;letter-spacing:.01em;
  display:flex;align-items:center;gap:.6rem;
}
.teamband__cap svg{width:18px;height:18px;flex-shrink:0;color:#9db9f0}