/* NIKdesign · Seite »Über mich« (ueber.html)
   Gehört zu nikdesign.de, Stand 04.10.2026 (übernommen aus Entwurf D »Verzahnt«). Siehe dokumentation/TECHNIK.md */
.ud{padding-top:50px;overflow-x:clip}
.ud-rand{max-width:960px;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}

/* Auftakt: Foto links (4:5), Kopftext rechts; am Handy Foto randlos, Text darunter */
.ud-start{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.8rem,4.5vw,4rem);align-items:center;padding-top:1.4rem;padding-bottom:clamp(2.2rem,5vw,3.5rem)}
.ud-buehne{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;clip-path:inset(0 round var(--radius));background:var(--hell)}
.ud-buehne img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:50% 30%;transform:translate3d(0,calc(var(--p,0) * -12px),0)}
@media(max-width:760px){
  .ud-start{grid-template-columns:1fr;gap:0;padding-top:0;padding-bottom:clamp(2.2rem,6vw,3rem)}
  .ud-buehne{aspect-ratio:1;border-radius:0;margin-inline:calc(-1 * clamp(1.2rem,4vw,2.4rem));clip-path:none}
  .ud-buehne img{object-position:50% 18%}
}

/* Kopf */
.ud-kopf{padding-block:clamp(2rem,4vw,3rem) clamp(2.2rem,5vw,3.5rem)}
.ud-start .ud-kopf{padding-block:0}
@media(max-width:760px){.ud-start .ud-kopf{padding-block:clamp(2rem,6vw,3rem) 0}}
.ud-kopf h1{margin-top:.8rem;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.03em;font-variation-settings:"wdth" 92,"wght" 300;color:var(--grau)}
.ud-kopf h1 b{font-weight:inherit;font-variation-settings:"wdth" 92,"wght" 600;letter-spacing:-.01em}
.ud-kopf p{margin-top:1.4rem;max-width:44ch;font-size:clamp(1.12rem,1.8vw,1.35rem);line-height:1.5;color:var(--matt)}
.ud-kopf p.ud-name{margin-top:1.6rem;font-size:.95rem;color:var(--matt);max-width:none}
.ud-kopf p.ud-name b{font-weight:normal;color:var(--grau);font-variation-settings:"wdth" 96,"wght" 600}

/* Zwei Felder, verbunden durch ein Plus */
.ud-zwei{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;border-radius:var(--radius);overflow:hidden}
.ud-feld{padding:clamp(1.8rem,4vw,3rem);color:#fff;display:grid;align-content:end;gap:.5rem;min-height:clamp(220px,30vw,320px)}
.ud-feld.dunkel{background:linear-gradient(160deg,#4a5256,var(--grau))}
.ud-feld.petrol{background:linear-gradient(200deg,#6f8b95,var(--petrol))}
.ud-feld .label{color:rgba(255,255,255,.6)}
.ud-feld h2{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.02em;font-variation-settings:"wdth" 92,"wght" 500;color:#fff}
.ud-feld p{color:rgba(255,255,255,.82);max-width:30ch}
.ud-plus{display:grid;place-items:center;width:clamp(3.2rem,7vw,5.5rem);background:var(--orange);color:var(--grau);position:relative}
.ud-plus svg{width:50%;height:auto;transform:rotate(-135deg) scale(2.2);opacity:0;transition:transform 1.2s cubic-bezier(.2,1.25,.35,1),opacity .35s}
.ud-plus.sichtbar svg{transform:none;opacity:1}   /* dreht aus dem großen × ins Plus, sobald es im Lesebereich liegt und der Bildlauf ruht (Auslöser im JS) */
.ud-plus.sichtbar{animation:ud-klick 1.2s cubic-bezier(.2,1,.4,1)}
@keyframes ud-klick{0%{filter:brightness(1.25)}55%{filter:brightness(1.25)}100%{filter:brightness(1)}}
.ud-fazit{text-align:center;margin-top:clamp(1.6rem,4vw,2.6rem)}
.ud-fazit h3{font-size:clamp(1.4rem,2.8vw,2rem);font-variation-settings:"wdth" 92,"wght" 300;letter-spacing:-.02em;color:var(--grau)}
.ud-fazit p{margin-top:.4rem;color:var(--matt);max-width:40ch;margin-inline:auto}
@media(max-width:640px){.ud-zwei{grid-template-columns:1fr}.ud-plus{width:auto;height:3.4rem}.ud-plus svg{width:1.7rem}}

/* Bildband */
.ud-band{margin-top:clamp(2.6rem,6vw,4.5rem)}
.ud-band > div{position:relative;aspect-ratio:21/9;border-radius:var(--radius);overflow:hidden;background:var(--hell)}
.ud-band img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;transform:translate3d(0,calc(var(--p,0) * -18px),0)}
.ud-band figcaption{margin-top:.8rem}
@media(max-width:640px){.ud-band > div{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.ud-band img{transform:none}}

/* Arbeitsweise */
.ud-weise{padding-block:clamp(3rem,7vw,5.5rem)}
.ud-weise h2{margin-top:.8rem;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.1;letter-spacing:-.025em;font-variation-settings:"wdth" 92,"wght" 300;color:var(--grau);max-width:14ch}
.ud-weise > p{margin-top:1.2rem;max-width:56ch;color:var(--grau)}
.ud-schritte{list-style:none;margin-top:2rem;border-top:1px solid var(--linie)}
.ud-schritte li{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding-block:1.3rem;border-bottom:1px solid var(--linie)}
.ud-schritte .nr{color:var(--orange);font-variation-settings:"wdth" 88,"wght" 600;font-size:.95rem;padding-top:.25rem}
.ud-schritte h3{font-size:1.25rem;font-variation-settings:"wdth" 94,"wght" 600;letter-spacing:-.01em;color:var(--grau)}
.ud-schritte p{margin-top:.25rem;color:var(--matt);max-width:52ch}

/* Stationen */
.ud-stationen{padding-bottom:clamp(3rem,7vw,5.5rem)}
.ud-stationen dl{margin-top:1.4rem;display:grid;gap:1rem}
.ud-stationen dt{color:var(--petrol);font-variation-settings:"wdth" 92,"wght" 600;font-size:.95rem}
.ud-stationen dd{color:var(--grau)}
@media(min-width:721px){.ud-stationen dl{grid-template-columns:1fr 1fr;column-gap:3rem}}

/* Schluss */
.ud-schluss{background:var(--petrol-tief);color:var(--hell);padding-block:clamp(3rem,7vw,5rem)}
.ud-schluss .ud-rand{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.ud-schluss p{font-size:clamp(1.3rem,2.6vw,1.9rem);font-variation-settings:"wdth" 92,"wght" 300;letter-spacing:-.015em;max-width:26ch}
@media(max-width:640px){.ud-schluss .ud-rand{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--uebergang),transform .9s var(--uebergang)}
.reveal.sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.ud-plus svg{transform:none;opacity:1;transition:none}.ud-plus.sichtbar{animation:none}.ud-buehne img{transform:none!important}}