/* ============================ UNTERSEITE UEBER UNS UND TEAM (06.10.) ============================
   Hero hell: Headline links, Imagefilm rechts. Danach die Collage nach Vorbild filmbot.com:
   verstreute Fotos ziehen nach oben, das Teamfoto waechst zum Vollbild, die dunkle Sektion
   schiebt sich darueber. Farben, Schriften, Abstaende aus styles.css. */

/* --- Bausteine --- */
.uh-register{margin:0 0 var(--r-24);font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:10px}
.uh-register .punkt{width:7px;height:7px;background:var(--rot-hell);display:inline-block}
.uh-register--hell{color:var(--text-2)}
.uh-register--hell .punkt{background:var(--rot)}
.uh-titel{max-width:none}
.uh-titel--hell{color:var(--tinte)}
.uh-titel .rot{color:var(--rot)}
.uh-zeile{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.uh-zeile > span{display:inline-block}
.uh-lead{margin:var(--r-24) 0 0;font-size:var(--t-lead);line-height:1.4;letter-spacing:-.02em;color:var(--text-2);max-width:34ch}
html.schrift-inter .uh-lead{line-height:1.5;letter-spacing:-.01em}

.uh-film-play{position:relative;display:inline-block;width:56px;height:56px;background:var(--rot);flex:none}
.uh-film-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-left:15px solid var(--weiss);border-top:9px solid transparent;border-bottom:9px solid transparent}
.uh-film-play--gross{width:clamp(64px,6vw,104px);height:clamp(64px,6vw,104px)}
.uh-film-play--gross::after{border-left-width:clamp(18px,1.7vw,28px);border-top-width:clamp(11px,1vw,17px);border-bottom-width:clamp(11px,1vw,17px)}

/* --- Hero nach filmbot: Film links randlos, Headline rechts zentriert --- */
/* Hoehe ergibt sich aus dem Filmkasten; er schliesst oben buendig an den Kopf an */
.uh-c{background:var(--papier);display:grid;align-items:center;padding:0}
/* Volle Fensterhoehe unter dem Kopf: der Film fuellt sie ganz, unten blitzt keine Folgesektion auf */
@media(min-width:1000px){.uh-c{grid-template-columns:47vw 1fr;height:calc(100vh - var(--kopf-hoehe));min-height:560px}
  .uh-c-film{height:100%;aspect-ratio:auto !important;max-height:none !important}}
/* 16:9-Standbild, links um ein Viertel angeschnitten: Kastenverhaeltnis = 0,75 x 1,83 */
.uh-c-film{position:relative;aspect-ratio:1.37;max-height:calc(100vh - var(--kopf-hoehe));overflow:hidden;background:var(--stein);border-radius:0 0 6px 0}
.uh-c-film img{width:100%;height:100%;object-fit:cover;object-position:74% 40%;display:block;transition:transform 1s cubic-bezier(.39,.52,0,1)}
.uh-c-film:hover img{transform:scale(1.04)}
.uh-c-film .uh-film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.uh-c-film-hinweis{position:absolute;right:var(--r-16);bottom:var(--r-16);padding:6px 10px;background:rgba(12,11,12,.72);
  font-family:var(--schrift-label);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--weiss)}
.uh-c-text{text-align:center;padding:clamp(40px,5vw,72px) clamp(24px,3vw,56px)}
.uh-c .uh-titel,.uh-c .uh-titel span{margin:0;font-family:var(--schrift-hl);color:var(--tinte);text-transform:uppercase}
.uh-c .uh-titel .rot{color:var(--rot)}
.uh-kicker{font-weight:600;font-size:clamp(20px,2.3vw,40px);letter-spacing:-.01em;line-height:1.1;margin-bottom:.45em}
.uh-gross{font-weight:700;font-size:clamp(48px,7vw,124px);letter-spacing:-.04em;line-height:.9}
html.schrift-inter .uh-gross{font-weight:700;letter-spacing:-.045em}
.uh-c .uh-lead{margin:clamp(24px,3vw,44px) auto 0;max-width:none;font-size:var(--t-lead);color:var(--tinte-weich)}
.uh-ort{justify-content:center;margin:clamp(28px,4vw,64px) 0 0}
@media(max-width:999px){
  .uh-c{min-height:0;padding-top:0}
  .uh-c-film{border-radius:0;aspect-ratio:16/10}
  .uh-c-film img{object-position:70% 50%}
}

/* --- Collage --- */
/* Reihe 1 liegt in den ersten 46vw der Huelle, Reihe 2 beginnt mit der Buehne */
.uh-col{position:relative;background:var(--papier);margin-top:clamp(40px,6vh,80px);padding-top:46vw;--reihe2:calc(46vw + var(--kopf-hoehe))}
.uh-col-bild{position:absolute;left:var(--x);top:var(--y);width:var(--b);aspect-ratio:var(--r);margin:0;overflow:hidden;
  border-radius:4px;background:var(--stein);z-index:1;will-change:transform}
.uh-col-bild--reihe2{top:var(--y)}
.uh-col-bild img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block}
/* Buehne in Fensterhoehe; haftet bis zum Ende der Huelle, die dunkle Sektion zieht darueber */
.uh-col-buehne{position:sticky;top:0;height:100vh;z-index:2;pointer-events:none}
/* Teamfoto: feste Hoehe unterhalb der Navigation, nur die Breite waechst (ueberuns.js).
   Unter dem Kopf beginnt es erst, weil im Foto kaum Luft ueber den Koepfen ist. */
.uh-col-mitte{position:absolute;top:0;bottom:0;left:50%;width:44vw;transform:translateX(-50%);
  overflow:hidden;border-radius:4px;background:var(--stein)}
/* Im Foto ist kaum Luft ueber den Koepfen: sobald das Bild oben haftet und der Kopf durchsichtig
   wird, rutscht es um die Kopfhoehe nach unten und laeuft oben weich ins Dunkel aus */
.uh-col-mitte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 0;display:block}
.uh-col-luft{height:90vh}
/* Die dunkle Sektion: oben durchsichtig, unten volles Anthrazit -- das Bild versinkt darin */
.uh-dunkel{position:relative;z-index:3;color:var(--weiss);padding:0 0 clamp(120px,18vh,220px);
  background:linear-gradient(180deg,rgba(26,25,23,0) 0,rgba(26,25,23,.55) 38vh,rgba(26,25,23,.92) 85vh,#1a1917 110vh)}
.uh-dunkel-inhalt{padding-top:42vh;text-align:center}
.uh-dunkel-titel{margin:0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(34px,5.2vw,86px);line-height:1.04;letter-spacing:-.03em}
html.schrift-inter .uh-dunkel-titel{font-size:clamp(2.3rem,5.4vw,4.7rem);font-weight:600;letter-spacing:-.025em}
.uh-dunkel-titel .rot-hell{color:var(--rot-hell)}
.uh-dunkel-text{margin:var(--r-24) auto 0;max-width:40ch;font-size:var(--t-lead);line-height:1.45;color:rgba(255,255,255,.88)}


/* --- Ohne Scroll-Animation (mobil, reduzierte Bewegung): ruhige Fassung --- */
.uh-col--statisch{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 var(--rand)}
.uh-col.uh-col--statisch{padding-top:0}
.uh-col--statisch .uh-col-bild{position:relative;left:auto;top:auto;width:auto;aspect-ratio:4/5}
.uh-col--statisch .uh-col-buehne{position:relative;height:auto;grid-column:1/-1;order:-1}
.uh-col--statisch .uh-col-mitte{position:relative;left:auto;top:auto;bottom:auto;transform:none;width:100%;height:auto;aspect-ratio:4/3}
.uh-col--statisch .uh-col-mitte img{position:static;height:100%;object-position:50% 0;-webkit-mask-image:none;mask-image:none}
.uh-col--statisch .uh-col-luft{display:none}
.uh-col--statisch .uh-dunkel{grid-column:1/-1;margin:0 calc(-1 * var(--rand));background:#1a1917}
.uh-col--statisch .uh-dunkel-inhalt{padding-top:clamp(64px,10vh,120px);text-align:left}

@media(max-width:760px){
  .uh-c{padding-top:clamp(32px,6vh,56px)}
}

/* Waehrend das Teamfoto die Buehne fuellt, faehrt der Kopf ganz aus dem Bild (Feedback 06.10.);
   er kommt mit weissem Balken zurueck, sobald der Text darunter heraufgezogen ist. */
.kopf.kopf--aus{transform:translateY(-100%);transition:transform .45s cubic-bezier(.39,.52,0,1)}

/* --- Aussage vor den Einblicken (filmbot) --- */
.uh-satz{background:var(--papier);padding:clamp(110px,18vh,220px) 0 0}
.uh-satz-text{margin:0;max-width:34ch;font-family:var(--schrift-hl);font-weight:500;font-size:clamp(28px,3.4vw,62px);
  line-height:1.08;letter-spacing:-.03em;color:#8E8A80}
.uh-satz-dunkel{color:var(--tinte)}
.uh-satz-zitat{margin:0}
.uh-satz-wer{margin-top:clamp(28px,3vw,44px);display:flex;align-items:center;gap:12px;font-family:var(--schrift-label);
  font-size:var(--t-15);letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-weich)}
.uh-satz-wer .punkt{width:28px;height:2px;background:var(--rot);display:inline-block}
.uh-satz-klein{margin:clamp(64px,11vh,140px) 0 0;font-size:var(--t-18);line-height:1.4;color:var(--tinte-weich)}

/* --- Dunkel weiter: Rollenraster --- */
.uh-rollen{background:#1a1917;color:var(--weiss);padding:clamp(40px,6vh,80px) 0 clamp(90px,14vh,170px)}
.uh-rollen-rahmen{max-width:1240px}
.uh-rollen-titel{margin:0;position:relative;text-align:center;border-bottom:1px solid rgba(255,255,255,.22)}
.uh-rollen-titel span{display:inline-block;padding:10px 16px;background:var(--rot);font-family:var(--schrift-label);
  font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--weiss);transform:translateY(50%)}
/* Drei Werte nebeneinander, getrennt durch feine Linien; grosse Nummer in Rot */
.uh-werte{list-style:none;margin:clamp(72px,8vw,120px) 0 0;padding:0;display:grid;gap:clamp(36px,4vw,56px)}
@media(min-width:900px){.uh-werte{grid-template-columns:repeat(3,1fr);gap:0}
  .uh-werte li{padding:0 clamp(24px,3vw,48px)}
  .uh-werte li+li{border-left:1px solid rgba(255,255,255,.16)}
  .uh-werte li:first-child{padding-left:0}.uh-werte li:last-child{padding-right:0}}
.uh-werte li{display:flex;flex-direction:column}
.uh-werte-nr{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(44px,4.4vw,72px);line-height:1;letter-spacing:-.04em;color:var(--rot-hell)}
.uh-werte b{margin-top:clamp(20px,2vw,32px);font-family:var(--schrift-hl);font-weight:600;font-size:clamp(22px,1.8vw,30px);line-height:1.15;letter-spacing:-.02em}
.uh-werte p{margin:var(--r-12) 0 0;font-size:var(--t-18);line-height:1.55;letter-spacing:-.01em;color:rgba(255,255,255,.74)}

/* --- Bekannt aus: Band laeuft von rechts nach links, haelt bei Zeiger, Fokus oder Knopf --- */
.uh-presse{margin-top:clamp(90px,13vh,160px);text-align:center}
.uh-presse-titel{margin:0 0 var(--r-24);font-family:var(--schrift-label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.uh-presse-band{overflow:hidden;max-width:1240px;margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.uh-presse-spur{list-style:none;margin:0;padding:0;display:flex;gap:14px;width:max-content;animation:uh-presse 32s linear infinite}
.uh-presse-band:hover .uh-presse-spur{animation-play-state:paused}
.uh-presse-spur li{flex:0 0 clamp(220px,19vw,300px);height:clamp(120px,10vw,150px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#232120;border-radius:4px}
.uh-presse-spur b{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(22px,1.9vw,30px);letter-spacing:-.02em;color:rgba(255,255,255,.88)}
.uh-presse-spur span{font-family:var(--schrift-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.uh-presse-spur .offen b{color:rgba(255,255,255,.55)}
@keyframes uh-presse{to{transform:translateX(calc(-50% - 7px))}}
@media(prefers-reduced-motion:reduce){.uh-presse-spur{animation:none}}

/* --- Team nach Vorbild kononenkogroup.com: grosser Titel, vier Spalten Portraets --- */
.uh-team{background:#1a1917;color:var(--weiss);padding:clamp(40px,6vh,80px) 0 clamp(110px,16vh,200px)}
.uh-team-kopf{text-align:center;padding:0 var(--rand)}
.uh-team-titel{margin:0;font-family:var(--schrift-hl);font-weight:500;font-size:clamp(64px,10vw,180px);line-height:.92;letter-spacing:-.045em}
.uh-team-spalten{margin:clamp(36px,4vw,64px) auto 0;max-width:640px;display:grid;gap:var(--r-16);text-align:center}
@media(min-width:760px){.uh-team-spalten{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px)}}
.uh-team-spalten p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.72);letter-spacing:0}
/* Raster bis fast an den Rand, vier Spalten mit versetztem Start */
.uh-team-raster{margin-top:clamp(56px,7vw,110px);padding:0 clamp(16px,1.6vw,24px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.05vw,16px)}
@media(min-width:900px){.uh-team-raster{grid-template-columns:repeat(4,1fr)}
  .uh-team-spalte:nth-child(2){margin-top:clamp(24px,2.6vw,40px)}
  .uh-team-spalte:nth-child(3){margin-top:clamp(50px,5.6vw,84px)}
  .uh-team-spalte:nth-child(4){margin-top:clamp(14px,1.6vw,24px)}}
.uh-team-spalte{display:flex;flex-direction:column;gap:clamp(56px,7vw,110px);will-change:transform}
.uh-team-karte{margin:0}
.uh-team-bild{aspect-ratio:5/7;overflow:hidden;background:#fff;transform:translateZ(0);backface-visibility:hidden}
.uh-team-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
  transition:transform 1s cubic-bezier(.39,.52,0,1)}
.uh-team-karte:hover .uh-team-bild img{transform:scale(1.04)}
.uh-team-karte figcaption{margin-top:12px;display:flex;justify-content:space-between;gap:12px;font-size:15px;letter-spacing:0}
.uh-team-karte figcaption span:first-child{color:var(--weiss)}
.uh-team-karte figcaption span:last-child{color:rgba(255,255,255,.6)}
@media(max-width:899px){.uh-team-spalte{display:contents}}
.uh-team .uh-presse{margin-top:clamp(110px,15vh,190px)}
.uh-rollen{padding-bottom:clamp(60px,9vh,110px)}

/* Zitat: Zeilen gleiten aus einer Maske nach oben (wie der Wechseltext der Startseite) */
.uh-satz-text .line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.uh-satz-text .line-in{display:inline-block}

/* --- Karriere: rote Flaeche, Worte fuellen sich, freie Kachel zeichnet sich --- */
.uh-karriere{background:var(--rot);color:var(--weiss);overflow:hidden}
.uh-karriere-innen{min-height:100vh;display:grid;align-items:center;gap:clamp(40px,6vw,110px);padding-top:calc(var(--kopf-hoehe) + clamp(70px,10vh,130px));padding-bottom:clamp(90px,12vh,140px)}
@media(min-width:900px){.uh-karriere-innen{grid-template-columns:1.35fr 1fr}}
.uh-karriere .uh-register{color:rgba(255,255,255,.9)}
.uh-karriere .uh-register .punkt{background:var(--weiss)}
.uh-karriere-titel{margin:0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(52px,7.4vw,132px);line-height:.95;letter-spacing:-.045em}
.uh-karriere-titel .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.uh-karriere-titel .w-in{display:inline-block}
.uh-karriere-lead{margin:clamp(28px,3vw,44px) 0 0;max-width:34ch;font-size:var(--t-lead);line-height:1.45;color:rgba(255,255,255,.92)}
.uh-karriere-knopf{margin-top:clamp(28px,3vw,40px);display:inline-flex;align-items:center;gap:var(--r-16);min-height:56px;padding:0 var(--r-24);
  background:var(--weiss);color:var(--rot);font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-18);letter-spacing:.06em;text-decoration:none;
  transition:background .3s,color .3s}
.uh-karriere-knopf:hover{background:var(--tinte);color:var(--weiss)}
.uh-karriere-knopf svg{transition:transform .4s cubic-bezier(.39,.52,0,1)}
.uh-karriere-knopf:hover svg{transform:translate(3px,-3px)}
/* Die freie Kachel im Format der Teamportraets */
.uh-karriere-kachel{display:block;color:inherit;text-decoration:none;max-width:420px;width:100%;justify-self:center}
.uh-karriere-rahmen{position:relative;display:grid;place-items:center;aspect-ratio:5/7;background:rgba(255,255,255,.06);transition:background .4s}
.uh-karriere-kachel:hover .uh-karriere-rahmen{background:rgba(255,255,255,.14)}
.uh-karriere-linie{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.uh-karriere-linie rect{fill:none;stroke:var(--weiss);stroke-width:2;stroke-dasharray:14 10;vector-effect:non-scaling-stroke}
.uh-karriere-plus{position:relative;width:clamp(64px,6vw,96px);height:clamp(64px,6vw,96px)}
.uh-karriere-plus::before,.uh-karriere-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--weiss);transform:translate(-50%,-50%)}
.uh-karriere-plus::before{width:100%;height:3px}.uh-karriere-plus::after{width:3px;height:100%}
.uh-karriere-frage{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:var(--schrift-label);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.uh-karriere-unter{margin-top:12px;display:flex;justify-content:space-between;font-size:15px;letter-spacing:0}
.uh-karriere-unter span:last-child{color:rgba(255,255,255,.75)}
@media(max-width:899px){.uh-karriere-innen{min-height:0}.uh-karriere-kachel{max-width:300px}}
/* Abschluss auf Ueber uns: gleicher Baustein wie auf der Verkaufsseite */
.uh-abschluss{background:var(--papier)}