/* Sektion ueber: „Kein Callcenter. Kein Ticketsystem. Ich.“
   Desktop: gepinnte Bühne. Aus der Dunkelheit öffnet sich eine Iris auf Felix' Gesicht (radiale Maske mit weichem Rand).
   Das Porträt ist das echte Foto, groß rechts hinter der Typo, ohne Freistellung: weiche Verlaufsmasken lassen es
   in die Dunkelheit auslaufen, dazu langsamer Ken-Burns-Zug und feines Korn. Am Ende schließt sich die Iris
   wieder zu einem Lichtpunkt, der verglimmt (Übergang in #ki). */

.ub{position:relative;z-index:1;color:var(--ink);
  --ub-gx:max(48px,calc((100vw - 1280px)/2));
  --ub-h:max(100vh,640px);
  --ub-warm:#FFE6CF;
  --ub-ink-s:#F3E4D2;
  --ub-dark:7,6,8;
}
.ub__stage{position:relative;height:var(--ub-h);overflow:hidden;isolation:isolate}

/* Dunkelheit: leichte Vignette, die Hügel schimmern kaum durch */
.ub__veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 75% at 70% 42%,rgba(12,8,6,.66),rgba(5,5,7,.94) 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.ub--pin .ub__veil{-webkit-mask-image:none;mask-image:none}

/* ---------- Porträt: echtes Foto, groß und rechts angeschnitten ---------- */
/* Seitenverhältnis des Ausschnitts 830 × 1024 */
.ub-portrait{position:absolute;z-index:1;--ub-ph:calc(var(--ub-h) * 1.06);top:calc(var(--ub-h) * -.03);height:var(--ub-ph);width:calc(var(--ub-ph) * .8105);
  right:max(0px,calc((100vw - 1480px)/2));pointer-events:none}
.ub-iris{position:absolute;inset:0}
.ub-photo{position:absolute;inset:0;margin:0;overflow:hidden;
  /* weiche Ränder: links lang in die Typo-Dunkelheit, rechts kurz, unten unter die Leiste, oben unter die Navigation */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.62) 26%,#000 40%,#000 80%,rgba(0,0,0,.55) 91%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 13%,#000 56%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.18) 84%,transparent 95%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.62) 26%,#000 40%,#000 80%,rgba(0,0,0,.55) 91%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 13%,#000 56%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.18) 84%,transparent 95%);
  mask-composite:intersect}
.ub-kb{position:absolute;inset:0;transform-origin:59% 36%;will-change:transform}
.ub-kb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* Licht: ein warmer, sehr weicher Schein von rechts oben, nur auf dem Hintergrund (Gesicht bleibt frei) */
.ub-light{position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;opacity:.0;
  background:radial-gradient(38% 30% at 86% 14%,rgba(255,170,100,.22),rgba(255,140,70,.06) 55%,transparent 75%)}
/* feines Filmkorn, bewegt sich in Sprüngen nur bei sichtbarer Sektion */
.ub-grain{position:absolute;inset:-60px;pointer-events:none;opacity:.11;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;animation:ubGrain .9s steps(5) infinite}
.ub:not(.is-vis) .ub-grain{animation-play-state:paused}
@keyframes ubGrain{0%{transform:translate(0,0)}20%{transform:translate(-23px,14px)}40%{transform:translate(17px,-31px)}60%{transform:translate(-39px,-9px)}80%{transform:translate(29px,37px)}100%{transform:translate(0,0)}}
/* warmes Licht, das hinter dem Foto in den dunklen Raum fällt */
.ub-glow{position:absolute;left:59%;top:36%;width:165%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,170,104,.16),rgba(255,140,72,.065) 42%,rgba(255,120,60,.02) 66%,transparent 100%)}
.ub-spark{position:absolute;left:59%;top:36%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;opacity:0;pointer-events:none;
  box-shadow:0 0 8px 2px #fff,0 0 26px 8px rgba(255,214,170,.85),0 0 90px 30px rgba(255,160,90,.35)}
/* Abdunklung links, damit die Typo über Schulter und Hemd ruhig steht */
.ub__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--ub-dark),.82) 0,rgba(var(--ub-dark),.7) calc(var(--ub-gx) + 380px),rgba(var(--ub-dark),.32) calc(var(--ub-gx) + 640px),rgba(var(--ub-dark),0) calc(var(--ub-gx) + 820px)),
    linear-gradient(0deg,rgba(var(--ub-dark),.7) 0,rgba(var(--ub-dark),0) 26%)}

/* ---------- Copy ---------- */
.ub__copy{position:absolute;z-index:2;left:var(--ub-gx);top:0;bottom:clamp(128px,18vh,170px);width:min(720px,56vw);display:flex;flex-direction:column;justify-content:center;padding-top:72px}
.ub-tag{margin-bottom:clamp(18px,3vh,28px)}
.ub-title{margin:0;font-weight:500;font-size:clamp(44px,min(6vw,9.6vh),96px);line-height:.98;letter-spacing:-.045em}
.ub-l{display:block;white-space:nowrap}
.ub-w{display:inline-block}
.ub-l--ich{margin-top:.04em}
.ub-ich{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.55em;line-height:.86;letter-spacing:-.02em;padding-right:.08em;color:var(--ub-warm);
  text-shadow:0 0 28px rgba(255,170,100,.35),0 0 80px rgba(255,140,70,.22);transform-origin:0 80%}
.ub-mani{margin:clamp(20px,3.4vh,32px) 0 0;max-width:min(40em,100%);font-size:clamp(16px,min(1.3vw,2.1vh),19px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.ub-ln{display:block;overflow:hidden;padding-bottom:.08em}
.ub-ln>span{display:block}
.ub-sign{margin-top:clamp(18px,3.2vh,30px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 40px}
.ub-sig{display:grid;gap:2px}
.ub-sig svg{display:block;width:clamp(180px,17vw,236px);height:auto;overflow:visible;stroke:var(--ub-ink-s);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,186,130,.35))}
.ub-sig small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);padding-left:4px}
.ub-cta{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:20px}
.ub-cta .btn{height:46px;padding:0 20px;font-size:14.5px}

/* ---------- Leiste: drei Fakten + Ort ---------- */
.ub-bar{position:absolute;z-index:4;left:var(--ub-gx);right:var(--ub-gx);bottom:clamp(22px,4.2vh,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 48px;padding-top:clamp(16px,2.6vh,24px)}
.ub-bar__line{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.12) 60%,rgba(255,255,255,0));transform-origin:0 50%}
.ub-facts{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ub-facts li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--muted)}
.ub-facts li+li{border-left:1px solid var(--line);padding-left:20px}
.ub-facts svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--ub-warm);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.ub-facts b{display:block;font-weight:500;color:var(--ink);font-size:15.5px;letter-spacing:-.01em}
.ub-loc{display:flex;align-items:center;gap:14px}
.ub-map{display:block;width:240px;height:120px;margin-block:-34px;overflow:visible;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.ub-map__dots circle{fill:#EDE6DE}
.ub-map__lines path{fill:none;stroke:rgba(255,236,220,.22);stroke-width:.6}
.ub-map__lines .ub-map__grat{stroke:rgba(255,255,255,.08);stroke-dasharray:1.5 2.5}
.ub-map__lines .ub-map__orbit{stroke:rgba(245,138,72,.35);stroke-dasharray:1 2.2}
.ub-map__core{fill:#F58A48;filter:drop-shadow(0 0 3px rgba(245,138,72,.9))}
.ub-map__ring{fill:none;stroke:#F58A48;stroke-width:.8;transform-box:fill-box;transform-origin:center;animation:ubPulse 2.6s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.ub-map__ring--2{animation-delay:1.3s}
.ub:not(.is-vis) .ub-map__ring{animation-play-state:paused}
@keyframes ubPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(6);opacity:0}}
.ub-loc__txt{display:grid;gap:2px}
.ub-loc__coord{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2)}
.ub-loc__txt b{font-weight:500;font-size:19px;letter-spacing:-.02em}
.ub-loc__sub{white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}

/* Desktop mit wenig Höhe: Manifest etwas kompakter */
@media (min-width:861px) and (max-height:760px){
  .ub-sig small{display:none}
}

/* ---------- Mobil: Porträt oben, Text darunter, kein langer Pin ---------- */
@media (max-width:860px){
  .ub__stage{height:auto;display:flex;flex-direction:column;padding:88px 0 80px}
  .ub-portrait{position:relative;top:auto;right:auto;height:auto;width:min(100%,520px);aspect-ratio:830/1024;margin:0 auto}
  .ub-glow{width:140%}
  .ub-photo{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.3) 9%,rgba(0,0,0,.75) 18%,#000 27%,#000 56%,rgba(0,0,0,.5) 72%,transparent 94%);
    mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.3) 9%,rgba(0,0,0,.75) 18%,#000 27%,#000 56%,rgba(0,0,0,.5) 72%,transparent 94%)}
  .ub__shade{display:none}
  .ub__copy{position:relative;z-index:4;left:auto;top:auto;bottom:auto;width:auto;padding:0 24px;margin-top:-26%;display:block}
  .ub-title{font-size:min(10.4vw,60px)}
  .ub-l{white-space:normal}
  .ub-ich{font-size:1.5em}
  .ub-mani{font-size:16.5px}
  .ub-sign{flex-direction:column;align-items:flex-start;gap:22px}
  .ub-cta{padding-bottom:0}
  .ub-bar{position:relative;left:auto;right:auto;bottom:auto;margin:44px 24px 0;grid-template-columns:1fr;gap:24px;padding-top:6px}
  .ub-facts{grid-template-columns:1fr;gap:0}
  .ub-facts li{padding:14px 0;border-bottom:1px solid var(--line)}
  .ub-facts li+li{border-left:0;padding-left:0}
  .ub-loc{gap:12px}
  .ub-map{width:160px;height:80px;margin-block:-8px}
}
@media (max-width:380px){.ub-cta .btn{width:100%;justify-content:center}}

@media (prefers-reduced-motion:reduce){
  .ub-spark{display:none}
  .ub-grain{animation:none}
  .ub-map__ring{animation:none;opacity:.5;transform:scale(2.2)}
}