/* ═══ V19c Team (Abspann) & Kontakt (David 10./11.10.: "Team noch geiler, Kontakt mit Motion" → "Seite laggt, Kontakt nicht geil") ═══
   Leistung zuerst (gemessen mit qa/perf_tc.mjs, CPU 4x gebremst): KEINE dauernd laufenden Animationen auf grossen Flächen,
   KEIN filter:blur / backdrop-filter / maskierte Verläufe, die sich jedes Bild neu zeichnen. Bewegt wird nur transform/opacity,
   einmalig beim Einblenden oder auf Zeiger/Fokus. Logik: src/story/tc.js. Wird nach v19.css geladen. */

/* Kontakt: Filmbild (PCFOX-Arbeitsplatz am Abend) als Kulisse – der Film endet wieder am Schreibtisch */
.contact2.tc{position:relative;isolation:isolate;overflow:clip;padding-top:clamp(140px,22vh,240px)}
.tc-stage{position:absolute;inset:0 0 auto;height:min(100vh,940px);z-index:-1;overflow:hidden;pointer-events:none}
.tc-stage img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;opacity:.5;transform:scale(1.08);transition:transform 2.4s cubic-bezier(.16,1,.3,1),opacity 1.6s ease}
.tc-live .tc-stage img{transform:none;opacity:.8}
.tc-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050507 0%,rgba(5,5,7,.22) 20%,rgba(5,5,7,.3) 50%,rgba(5,5,7,.9) 82%,#050507 100%),
  linear-gradient(90deg,rgba(5,5,7,.86) 0%,rgba(5,5,7,.55) 45%,rgba(5,5,7,.12) 85%)}
.contact2.tc .contact2__head h2 > span:not(.w),.contact2.tc .contact2__head h1 > span:not(.w){color:rgba(245,245,247,.66)}
.contact2.tc .contact2__head h2,.contact2.tc .contact2__head h1{font-size:clamp(44px,5.6vw,104px)}
.contact2.tc .contact2__head .lede{max-width:26em}
/* drei Kacheln in einer Reihe */
.tc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(36px,6vh,64px)}
.tc-tiles .bubbles{display:contents}
.tc-tiles .bubble-wrap{min-width:0}
.tc-tiles .bubble,.tc-tiles .addr{width:100%;height:100%;min-height:132px;margin:0;padding:24px 24px 22px;border-radius:24px;align-content:space-between;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03)),rgba(12,9,18,.72);border:1px solid rgba(255,255,255,.12)}
.tc .bubble small,.tc .addr small{text-transform:none;letter-spacing:-.004em;font-size:14px;font-weight:600;color:#c9b8ff}
.tc-tiles .bubble strong,.tc-tiles .addr strong{font-size:clamp(19px,1.55vw,24px);font-weight:620;letter-spacing:-.02em}
.tc-tiles .addr span{grid-column:1;grid-row:auto;font-size:14px;color:rgba(245,245,247,.6)}
.tc-glow{position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s ease}
.tc-glow::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(138,92,255,.22),transparent 65%)}
.tc-glow:hover::after,.tc-glow:focus-visible::after{opacity:1}
.tc-glow:hover{transform:translate3d(0,-4px,0);border-color:rgba(195,178,255,.42)}
.tc-glow:active{transform:scale(.985);transition-duration:.12s}
.tc .addr{position:relative}
.tc-pin{position:absolute;right:24px;top:24px;width:10px;height:10px;border-radius:50%;background:#b9a2ff;box-shadow:0 0 12px rgba(185,162,255,.9)}
.tc-pin i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(185,162,255,.8);opacity:0}
.tc-live .tc-pin i{animation:tcPing 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes tcPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.tc-stagger > *{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.tc-tiles.tc-stagger > *,.tc-tiles.tc-stagger .bubbles > *{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.tc-stagger.is-in > *,.tc-tiles.tc-stagger.is-in .bubbles > *{opacity:1;transform:none}
.tc-tiles.tc-stagger.is-in .bubbles > :nth-child(2){transition-delay:.09s}.tc-tiles.tc-stagger.is-in > .addr{transition-delay:.18s}
.contact2__info.tc-stagger.is-in > :nth-child(2){transition-delay:.1s}
.contact2.tc .contact2__grid{margin-top:clamp(40px,7vh,72px)}
/* Ablauf: Linie wächst mit dem Scrollen, Nummern leuchten nacheinander auf */
.tc-steps{position:relative;margin-top:0}
.tc-steps .eyebrow{text-transform:none;letter-spacing:-.004em;font-size:17px;color:#c9b8ff}
.tc-line{position:absolute;left:17px;top:var(--lt,90px);height:var(--lh,120px);width:2px;border-radius:2px;background:rgba(255,255,255,.08);z-index:0}
.tc-line i{display:block;height:100%;border-radius:2px;transform-origin:top;transform:scaleY(0);background:linear-gradient(#e4dcff,#8a5cff)}
.tc-steps li{position:relative;z-index:1;border-top-color:transparent!important;padding:18px 0}
.tc-steps li strong{font-size:18px;transition:color .5s ease}
.tc-steps li span{font-size:15px}
.tc-steps li b{transition:background .5s ease,color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.tc-steps li.is-lit b{background:linear-gradient(135deg,#b9a2ff,#7c5cff);color:#fff;box-shadow:0 0 24px rgba(138,92,255,.55);transform:scale(1.08)}
.tc-steps li:not(.is-lit) strong{color:rgba(245,245,247,.6)}
/* Formular: ruhiges Glas (ohne Unschärfe), Kante leuchtet beim Ausfüllen */
.tc-formwrap .form{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),rgba(12,9,18,.82);border-color:rgba(255,255,255,.12);transition:border-color .5s ease,box-shadow .6s ease}
.tc-formwrap .form:focus-within{border-color:rgba(195,178,255,.5);box-shadow:0 30px 80px -40px rgba(138,92,255,.6)}
.tc-form .field input:focus,.tc-form .field textarea:focus{border-color:rgba(205,190,255,.7);box-shadow:0 0 0 4px rgba(138,92,255,.18)}
.tc-form .field label{transition:color .3s ease}
.tc-form .field:focus-within label{color:#d6c9ff}
.tc .topics span{transition:color .3s ease,background .3s ease,border-color .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.tc .topics input:checked + span{transform:scale(1.05)}
.tc-send{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;transition:transform .2s ease}
.tc-send i{font-style:normal;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.tc-send:hover i{transform:translateX(5px)}
.tc-send::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.tc-send:hover::after{transform:translateX(130%)}
.tc-send:active{transform:scale(.97)}
.tc .sent:not([hidden]){animation:tcPop .7s cubic-bezier(.16,1,.3,1) both}
@keyframes tcPop{from{opacity:0;transform:translate3d(0,24px,0) scale(.97)}to{opacity:1;transform:none}}

/* Tablet/Handy */
@media (max-width:980px){
  .tc-tiles{grid-template-columns:1fr 1fr}
  .tc-tiles .addr{grid-column:1 / -1}
}
@media (max-width:860px){
  .contact2.tc{padding-top:clamp(110px,16vh,150px)}
  .tc-stage{height:78svh}
  .tc-stage img{object-position:58% 40%}
  .tc-stage::after{background:linear-gradient(180deg,#050507 0%,rgba(5,5,7,.4) 18%,rgba(5,5,7,.55) 48%,rgba(5,5,7,.94) 80%,#050507 100%)}
  .contact2.tc .contact2__head h2,.contact2.tc .contact2__head h1{font-size:clamp(36px,10vw,48px)}
  .tc-tiles{grid-template-columns:1fr;gap:12px}
  .tc-tiles .bubble,.tc-tiles .addr{min-height:0;padding:20px 22px}
}
@media (prefers-reduced-motion:reduce){
  .tc-live .tc-pin i{animation:none}
  .tc-stagger > *,.tc-tiles.tc-stagger .bubbles > *{opacity:1;transform:none;transition:none}
  .tc-stage img{transform:none;transition:none}
}

/* ═══ V19d Team als Abspann mit Animation (David 11.10.: "komplett neu", "Originalfarbe", "mit Animation, damit es geiler aussieht") ═══
   Beim Scrollen gehört der Bildschirm je einer Person. Bewegung nur über transform/opacity (+ einmal clip-path beim Bildwechsel):
   – Name: Buchstaben gleiten einzeln aus einer Kante (tc.js zerlegt in .ch), beim Weiterscrollen nach oben weg
   – Porträt: neues Bild wischt von unten über das alte und zoomt dabei aus der Nähe heraus, danach langsames Heranfahren (--lp)
   – Hintergrund: riesiger Vorname als zarter Umriss gleitet seitlich mit; leuchtender Ring dreht sich hinter dem Porträt (nur sichtbar)
   – Maus: Porträt neigt sich mit, Glanzlicht folgt dem Zeiger. Logik: src/story/tc.js (data-crew). */
.crew{position:relative;overflow:clip;background:radial-gradient(55% 45% at 78% 55%,rgba(138,92,255,.14),transparent 70%)}
.crew__intro{padding:clamp(120px,18vh,200px) 0 0}
.crew__intro .lede{max-width:30em}
.crew__track{position:relative;height:calc(var(--n,4) * 92svh + 8svh)}
.crew__stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,90px);
  width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}

/* riesiger Vorname im Hintergrund */
.crew__ghosts{position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;display:grid;align-items:center;overflow:hidden}
.crew__ghost{grid-area:1/1;white-space:nowrap;font-size:clamp(160px,26vw,460px);font-weight:700;letter-spacing:-.06em;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(205,190,255,.09);opacity:0;transform:translate3d(8vw,0,0);transition:opacity .9s ease}
.crew__ghost.is-on{opacity:1}

/* Porträts */
.crew__pics{position:relative;order:2;justify-self:end;height:min(78svh,780px);aspect-ratio:3/4;max-width:100%;perspective:1400px}
.crew__ring{position:absolute;left:50%;top:50%;width:122%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;opacity:.55;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(195,178,255,.0) 40deg,rgba(195,178,255,.55) 80deg,rgba(138,92,255,0) 130deg,transparent 200deg,rgba(110,150,255,.35) 260deg,transparent 320deg);
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 65%,#000 66%,transparent 67%);mask:radial-gradient(circle,transparent 64%,#000 65%,#000 66%,transparent 67%)}
.crew.is-live .crew__ring{animation:crewSpin 14s linear infinite}
@keyframes crewSpin{to{transform:rotate(360deg)}}
.crew__pic{position:absolute;inset:0;z-index:1;margin:0;border-radius:34px;overflow:hidden;background:#0d0a12;box-shadow:0 60px 120px -60px rgba(0,0,0,.9);
  clip-path:inset(100% 0 0 0 round 34px);transition:clip-path 1.05s cubic-bezier(.77,0,.18,1);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.crew__pic.is-on{z-index:3;clip-path:inset(0 0 0 0 round 34px)}
.crew__pic.is-prev{z-index:2;clip-path:inset(0 0 0 0 round 34px);transition:none}
.crew__pics.is-back .crew__pic{clip-path:inset(0 0 100% 0 round 34px)}
.crew__pics.is-back .crew__pic.is-on,.crew__pics.is-back .crew__pic.is-prev{clip-path:inset(0 0 0 0 round 34px)}
.crew__zoom{position:absolute;inset:0;display:block;transform:scale(1.22);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.crew__pic.is-on .crew__zoom,.crew__pic.is-prev .crew__zoom{transform:none}
.crew__zoom img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.07)}
.crew__pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);pointer-events:none}
.crew__glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.16),transparent 48%)}
.crew__pics:hover .crew__glare{opacity:1}
.crew__pic--mono .crew__zoom{display:grid;place-items:center;background:radial-gradient(70% 55% at 50% 38%,rgba(138,92,255,.34),transparent 70%),linear-gradient(180deg,#16111f,#08060c)}
.crew__mono{font-size:clamp(110px,13vw,240px);font-weight:620;letter-spacing:-.06em;color:#d9cfff;text-shadow:0 0 60px rgba(138,92,255,.35)}

/* Text */
.crew__text{order:1;display:grid;gap:clamp(18px,3vh,30px);position:relative;z-index:2}
.crew__count{font-size:15px;font-weight:600;letter-spacing:.02em;color:rgba(245,245,247,.45);font-variant-numeric:tabular-nums;display:flex;gap:2px}
.crew__count b{color:#c9b8ff;font-weight:650;display:inline-block;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.crew__count b.is-flip{transform:translate3d(0,-60%,0);opacity:0;transition:none}
.crew__names{display:grid;margin:0;padding:0;list-style:none}
.crew__name{grid-area:1/1;pointer-events:none;visibility:hidden;transition:visibility 0s linear .9s}
.crew__name.is-on{visibility:visible;pointer-events:auto;transition:none}
.crew__name h3{margin:0;font-size:clamp(58px,7.2vw,136px);font-weight:650;line-height:.98;letter-spacing:-.045em;color:#f5f5f7}
.crew__line{display:block;overflow:hidden;padding:.04em 0 .1em;margin:-.04em 0 -.1em}
.crew__line + .crew__line{color:rgba(245,245,247,.42)}
.crew__line .ch{display:inline-block;transform:translate3d(0,112%,0);transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--c,0) * 24ms + var(--r,0) * 90ms)}
.crew__name.is-on .ch{transform:none}
.crew__name.is-past .ch{transform:translate3d(0,-112%,0);transition-duration:.6s;transition-delay:calc(var(--c,0) * 12ms)}
.crew__name p{margin-top:clamp(14px,2.2vh,24px);font-size:clamp(18px,1.6vw,26px);font-weight:600;letter-spacing:-.012em;color:#c9b8ff;
  opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.crew__name.is-on p{opacity:1;transform:none;transition-delay:.35s}
.crew__bars{display:flex;gap:8px}
.crew__bars i{position:relative;width:56px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.crew__bars b{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#e4dcff,#8a5cff);transform-origin:left;transform:scaleX(0)}   /* tc.js setzt transform direkt (keine Variable → keine Stil-Neuberechnung im ganzen Bereich) */

@media (max-width:860px){
  .crew__intro{padding-top:clamp(100px,14vh,140px)}
  .crew__track{height:calc(var(--n,4) * 88svh + 12svh)}
  .crew__stage{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:22px;padding-top:72px}
  .crew__pics{order:0;justify-self:center;height:54svh}
  .crew__pic{border-radius:26px}
  .crew__ghost{font-size:46vw;top:-18svh;position:relative}
  .crew__text{gap:14px}
  .crew__name h3{font-size:clamp(42px,12.5vw,60px)}
  .crew__name p{font-size:17px;margin-top:10px}
  .crew__bars i{width:40px}
}
@media (prefers-reduced-motion:reduce){
  .crew__track{height:auto}
  .crew__stage{position:static;height:auto;display:block}
  .crew__ghosts,.crew__ring{display:none}
  .crew__pics,.crew__names{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;height:auto;aspect-ratio:auto;width:100%}
  .crew__pic,.crew__name{position:relative;grid-area:auto;clip-path:none;visibility:visible;aspect-ratio:3/4;transform:none}
  .crew__pic .crew__zoom{transform:none}
  .crew__name{aspect-ratio:auto}.crew__name h3{font-size:22px}.crew__line .ch,.crew__name p{transform:none;opacity:1}
  .crew__count,.crew__bars{display:none}
}

/* V23 Visitenkarte auf der Rückseite der Porträts (David 14.10.) – Drehung nur per transform */
.crew__flip{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:perspective(1800px) rotateY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.crew__pic.is-flipped .crew__flip{transform:perspective(1800px) rotateY(180deg)}
.crew__front,.crew__card{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.crew__front{cursor:pointer}
.crew__card{transform:rotateY(180deg);display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px);padding:clamp(22px,3.2vh,40px) clamp(20px,2.4vw,38px);
  background:radial-gradient(90% 60% at 100% 0%,rgba(138,92,255,.28),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(90,120,255,.14),transparent 60%),linear-gradient(160deg,#17121f,#0a080e);
  color:#f5f5f7;cursor:default;text-align:left}
.crew__card::before{content:"";position:absolute;inset:10px;border-radius:26px;border:1px solid rgba(201,184,255,.18);pointer-events:none}
.crew__cardtop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:auto}
.crew__logo{width:clamp(96px,9vw,140px);height:auto;opacity:.95}
.crew__face{flex:none;width:clamp(74px,8vw,112px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(201,184,255,.55);background:#140f1c;display:grid;place-items:center}
.crew__face img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}   /* V26 (David 16.10.: Avatar wirkte albern): Kopf und Schultern statt angeschnittener Grossaufnahme */
.crew__face span{font-size:clamp(26px,2.6vw,40px);font-weight:650;letter-spacing:-.04em;color:#d9cfff}
.crew__cname{font-size:clamp(28px,2.7vw,44px);font-weight:650;letter-spacing:-.035em;line-height:1.02;color:rgba(245,245,247,.5)}
.crew__cname b{display:block;color:#f5f5f7;font-weight:650}
.crew__crole{font-size:clamp(15px,1.15vw,18px);font-weight:600;color:#c9b8ff;margin-top:-4px}
.crew__clines{display:grid;gap:10px;margin-top:6px;padding-top:clamp(12px,2vh,20px);border-top:1px solid rgba(255,255,255,.1)}
.crew__clines a,.crew__clines span{display:flex;align-items:center;gap:12px;font-size:clamp(14px,1.05vw,17px);color:#e9e6f2;text-decoration:none;word-break:break-all}
.crew__clines span{color:rgba(233,230,242,.6);font-size:clamp(12px,.9vw,14px);word-break:normal}
.crew__clines i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;background:rgba(138,92,255,.22);color:#e4dcff}
.crew__clines a:hover{color:#fff}
.crew__clines a:hover i{background:rgba(138,92,255,.45)}
.crew__cact{display:flex;align-items:center;gap:10px;margin-top:clamp(6px,1.4vh,14px)}
.crew__save{flex:1;display:flex;align-items:center;justify-content:center;height:44px;border-radius:999px;background:#f5f5f7;color:#0b0b10;font-size:14px;font-weight:650;text-decoration:none}
.crew__save:hover{background:#fff}
.crew__back{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#f5f5f7;font-size:18px;cursor:pointer}
.crew__card a:focus-visible,.crew__card button:focus-visible,.crew__vk:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.crew__vk{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(14px,2vh,22px);padding:10px 18px;border-radius:999px;border:1px solid rgba(201,184,255,.35);
  color:#efe9ff;font-size:15px;font-weight:600;text-decoration:none;background:rgba(138,92,255,.12);transition:background .25s ease,border-color .25s ease}
.crew__vk:hover{background:rgba(138,92,255,.26);border-color:rgba(201,184,255,.6)}
.crew__vk i{font-style:normal;font-size:16px}
.crew__name .crew__vk{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),background .25s ease}
.crew__name.is-on .crew__vk{opacity:1;transform:none;transition-delay:.5s,.5s,0s}
@media (max-width:860px){
  .crew__card{padding:20px 18px;gap:8px}
  .crew__card::before{inset:7px;border-radius:20px}
  .crew__cname{font-size:26px}
  .crew__crole{font-size:14px}
  .crew__clines{gap:7px}
  .crew__clines a{font-size:13.5px}
  .crew__clines span{display:none}
  .crew__save,.crew__back{height:40px}
  .crew__back{width:40px}
  .crew__vk{margin-top:10px;padding:9px 16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.crew__flip{transition:none}.crew__name .crew__vk{opacity:1;transform:none}}