/* ==========================================================================
   upclients · Über uns
   Hero mit «Ausgangspunkt»-Kette · Grundsätze · Wer dahinter steht · Früh dabei · Nachricht · Feierabend
   Klassen tragen das Präfix uu- (Formular: s-fcard aus seiten.css, Fragen-Akkordeon nicht verwendet).
   ========================================================================== */

@keyframes uuMarch{to{background-position:10px 0}}
@keyframes uuGlow{0%,60%,100%{filter:none}18%{filter:drop-shadow(0 0 14px rgba(154,190,255,.9)) brightness(1.25)}}

/* =====================================================================
   1 · HERO
   ===================================================================== */
.uu-hero{position:relative;color:#fff;overflow:clip;isolation:isolate;padding:calc(var(--hdr) + clamp(20px,5vh,56px)) 0 clamp(60px,9vh,100px)}
.uu-hero::before{content:"";position:absolute;left:50%;bottom:-6%;width:150vw;height:70vh;transform:translateX(-50%);background:radial-gradient(48% 40% at 50% 70%,rgba(121,164,242,.4),rgba(92,136,215,.14) 48%,rgba(92,136,215,0) 74%);pointer-events:none;z-index:-1;animation:dawn 9s ease-in-out infinite alternate}
.uu-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(28px,5vw,80px);align-items:center;min-height:min(76vh,740px)}
.uu-eb{color:var(--p200);letter-spacing:.2em}
.uu-title{margin-top:24px;font-size:clamp(34px,3.7vw,58px);line-height:1.03;letter-spacing:-.045em;font-weight:800;text-wrap:balance;opacity:0;animation:fadeUp 1.1s var(--ease) .1s forwards}
.uu-lead{margin-top:24px;max-width:46ch;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--p200);opacity:0;animation:fadeUp 1s var(--ease) .4s forwards}
.uu-ch{opacity:0;animation:fadeUp 1s var(--ease) .55s forwards}
.rm .uu-title,.rm .uu-lead,.rm .uu-plan,.rm .uu-ch{opacity:1}

/* Kette: die fünf Stationen, die von Anfang an dazugehören */
/* Schnitt durch ein Haus, der sich von Grund auf zeichnet: Keller, Wände, Decken, Treppe, Dach, Balkon; danach Elektro, Sanitär, Heizung, zuletzt die Masse (Aaron 21.10.: etwas Handwerkliches) */
.uu-plan{position:relative;max-width:560px;margin:0 auto;width:100%;opacity:0;animation:fadeIn .8s ease .2s forwards}
.uu-plan::before{content:"";position:absolute;inset:-6% -4%;background-image:linear-gradient(rgba(197,218,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(197,218,255,.06) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);pointer-events:none}
.uu-plan svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.uu-plan__l{fill:none;stroke:rgba(227,237,255,.85);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:uuDraw 1.1s var(--ease) forwards;animation-delay:var(--d)}
.uu-plan__l--fein{stroke:rgba(197,218,255,.55);stroke-width:1.1}
.uu-plan__h{fill:none;stroke:rgba(197,218,255,.28);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;animation:fadeIn .9s ease forwards;animation-delay:var(--d)}
.uu-plan__mass{opacity:0;animation:fadeIn 1s ease forwards;animation-delay:var(--d)}
.uu-plan__mass path{fill:none;stroke:rgba(154,190,255,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.uu-plan__mass text{fill:var(--p200);font-size:13px;font-weight:700;letter-spacing:.04em;text-anchor:middle}
.uu-plan__gw{opacity:0;animation:fadeIn 1s ease forwards;animation-delay:var(--d)}
.uu-plan__gw path,.uu-plan__gw circle{fill:none;stroke:var(--gw);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px var(--gw))}
.uu-plan__gw text{fill:var(--gw);text-anchor:start;font-size:10.5px;font-weight:800;letter-spacing:.12em}
.uu-plan__gw--el{--gw:rgba(245,203,27,.9)}
.uu-plan__gw--sa{--gw:rgba(124,196,255,.95)}
.uu-plan__gw--he{--gw:rgba(255,150,118,.92)}
.uu-plan__gw--ho{--gw:rgba(227,237,255,.75)}
.rm .uu-plan__gw{opacity:1;animation:none}
@keyframes uuDraw{to{stroke-dashoffset:0}}
.rm .uu-plan__l{stroke-dashoffset:0;animation:none}
.rm .uu-plan__h,.rm .uu-plan__mass{opacity:1;animation:none}

/* =====================================================================
   2 + 3 · HELLE ABSCHNITTE
   ===================================================================== */
.uu-sec{position:relative;padding:clamp(90px,12vh,140px) 0}
.uu-sec .sec-head{max-width:1000px}
.uu-sec .sec-head .h2{font-size:clamp(32px,4.1vw,60px)}
.uu-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(34px,5vh,56px)}
.uu-card{position:relative;padding:clamp(24px,2.6vw,34px);border-radius:26px;background:#fff;box-shadow:0 28px 60px -34px rgba(32,59,110,.45),inset 0 0 0 1px rgba(68,107,180,.12)}
.uu-card .gi{--s:56px}
.uu-card__n{position:absolute;right:clamp(20px,2.4vw,30px);top:clamp(14px,1.8vw,22px);font-size:clamp(46px,4.6vw,66px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--p100)}
.uu-card h3{margin-top:26px;font-size:clamp(22px,2vw,27px);font-weight:800;letter-spacing:-.03em}
.uu-card p{margin-top:12px;font-size:16px;line-height:1.7;color:var(--i800);text-wrap:pretty}

.uu-who__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(28px,6vw,90px);align-items:start}
.uu-who .sec-head .h2{font-size:clamp(30px,3.6vw,52px)}
.uu-who__text{padding-top:clamp(0px,1vh,10px)}
.uu-who__text p{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.75;color:var(--i800);text-wrap:pretty;max-width:60ch}
.uu-who__text p+p{margin-top:20px}

/* =====================================================================
   4 · FRÜH DABEI (dunkel)
   ===================================================================== */
.uu-early{position:relative;color:#fff;padding:clamp(90px,12vh,140px) 0 clamp(60px,9vh,100px)}
.uu-early .eyebrow{color:var(--p200)}
.uu-early .h2{font-size:clamp(32px,4.1vw,60px)}
.uu-gcard{padding:clamp(24px,2.6vw,34px);border-radius:24px}
.uu-gcard h3{font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.uu-gcard p{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--p200);text-wrap:pretty}

/* =====================================================================
   5 · FRAGEN? SCHREIB UNS (dunkel)
   ===================================================================== */
.uu-write{position:relative;color:#fff;padding:clamp(60px,9vh,100px) 0 clamp(100px,14vh,160px)}
.uu-write .eyebrow{color:var(--p200)}
.uu-write .lead{color:var(--p200)}
.uu-write .h2{font-size:clamp(32px,4.1vw,60px)}
.uu-write__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(28px,5vw,80px);align-items:center}

@media (max-width:1000px){
  .uu-hero__grid,.uu-who__grid,.uu-write__grid{grid-template-columns:minmax(0,1fr);row-gap:34px;min-height:0}
  .uu-three{grid-template-columns:minmax(0,1fr)}
  .uu-card h3{margin-top:22px}
}
@media (max-width:560px){
  .uu-plan{max-width:400px}
  .uu-plan__gw text{font-size:16px;letter-spacing:.07em}
  .uu-plan__mass text{font-size:18px}
}

/* Das Nachrichtenformular hat keinen Titel: Felder beginnen oben */
.uu-write .s-fields{margin-top:0}