/* =========================================================================
   FOKALiS – Startseite (Sektionen, die es nur hier gibt)
   Wiederverwendbare Bausteine stehen in fokalis.css.
   ========================================================================= */

/* ---------- HERO: Fokus-Blende ---------------------------------------- */
.hero{--fx:70%;--fy:40%;--fr:220px;position:relative;min-height:100vh;min-height:100svh;background:var(--black);
  color:var(--on-dark);overflow:hidden;isolation:isolate}
.hero-stage{position:absolute;inset:0;z-index:0}
/* Beide Ebenen sind 40px größer als der Hero, damit der Unschärferand nicht sichtbar wird */
.hero-layer{position:absolute;inset:-40px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
/* will-change: Die Unschärfe wird einmal berechnet und dann nur noch zusammengesetzt (nicht bei jeder Mausbewegung neu) */
.hero-layer--blur{filter:blur(12px) brightness(.55) saturate(.8);will-change:transform}
.hero-layer--sharp{filter:brightness(1.08) contrast(1.05)}
/* Performance (13.10.): Die scharfe Ebene liegt in einem runden „Fenster“ (focus-hero.js baut es). Fenster und Ebene werden
   nur gegeneinander verschoben (transform) – die Grafikkarte setzt zusammen, nichts wird je Bild neu gezeichnet.
   Weicher Rand wie vorher: voll bis 70 % des Radius, dann auslaufend. */
.hero-window{position:absolute;left:0;top:0;width:calc(var(--fr) * 2);height:calc(var(--fr) * 2);overflow:hidden;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 70%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:transform}
.hero-window .hero-layer--sharp{inset:auto;left:-40px;top:-40px;width:var(--hw,100vw);height:var(--hh,100vh);will-change:transform}
.no-lens .hero-layer--sharp,.no-lens .hero-window{display:none}

/* Zeitfresser im Bild */
.hero-tasks{list-style:none;position:absolute;inset:40px}
.hero-tasks li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  font-family:var(--font-head);font-weight:300;text-transform:uppercase;letter-spacing:.04em;line-height:1;
  font-size:calc(clamp(14px,1.7vw,28px) * var(--s,1));color:rgba(255,255,255,.82);white-space:nowrap}
.hero-tasks li{transform:translate(calc(-50% + var(--shift,0px)),-50%)}
.task-what{position:relative;display:block}
.task-done{position:absolute;left:0;top:calc(100% + .7em);display:flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-size:max(11px,.42em);font-weight:600;letter-spacing:.16em;color:var(--gold);visibility:hidden}
.task-done::before{content:"";width:.9em;height:.5em;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(-45deg)}
.hero-layer--sharp .hero-tasks li{color:var(--white)}
.hero-layer--sharp .task-what{text-decoration:line-through;text-decoration-color:var(--gold);text-decoration-thickness:2px}
.hero-layer--sharp .task-done{visibility:visible}
.hero-tasks li:nth-child(1){--x:12%;--y:18%;--s:1.1}
.hero-tasks li:nth-child(2){--x:36%;--y:11%;--s:.8}
.hero-tasks li:nth-child(3){--x:60%;--y:20%;--s:1.35}
.hero-tasks li:nth-child(4){--x:82%;--y:12%;--s:.9}
.hero-tasks li:nth-child(5){--x:72%;--y:35%;--s:1.6}
.hero-tasks li:nth-child(6){--x:13%;--y:calc(100% - clamp(72px,12vh,140px) + 24px);--s:.85} /* unten links, im freien Streifen unter den Buttons */
.hero-tasks li:nth-child(7){--x:84%;--y:52%;--s:1}
.hero-tasks li:nth-child(8){--x:70%;--y:66%;--s:1.2}
.hero-tasks li:nth-child(9){--x:86%;--y:80%;--s:.8}
.hero-tasks li:nth-child(10){--x:16%;--y:34%;--s:.75}
.hero-tasks li:nth-child(n+11){display:none}
/* Große Bildschirme: links neben dem Titel ist Platz – dort ist der Post gut sichtbar */
@media (min-width:1880px){.hero-tasks li:nth-child(6){--x:calc(25% - 295px);--y:58%;--s:.72}}
@media (max-width:1020px){
  .hero-tasks li:nth-child(6),.hero-tasks li:nth-child(10){display:none}
}
@media (max-width:760px){
  .hero-tasks li:nth-child(n+7){display:none}
  .hero-tasks li:nth-child(6){display:block}
  .hero-tasks li:nth-child(1){--x:32%;--y:12%;--s:1.05}
  .hero-tasks li:nth-child(2){--x:70%;--y:18%;--s:.9}
  .hero-tasks li:nth-child(3){--x:34%;--y:24%;--s:1.15}
  .hero-tasks li:nth-child(4){--x:68%;--y:30%;--s:.95}
  .hero-tasks li:nth-child(5){--x:30%;--y:36%;--s:1}
  .hero-tasks li:nth-child(6){--x:72%;--y:7%;--s:.8}
}

.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 65% 40%,transparent 40%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(10,10,10,.7) 0,transparent 22%,transparent 50%,rgba(10,10,10,.92) 100%)}

/* Die Blende */
.hero-lens{position:absolute;left:0;top:0;z-index:2;width:calc(var(--fr) * 2);height:calc(var(--fr) * 2);
  pointer-events:none;will-change:transform;opacity:0;transition:opacity .8s}
.lens-ready .hero-lens{opacity:1;transition:opacity 2s}
.no-lens .hero-lens{display:none}
.hero-lens svg{width:100%;height:100%;overflow:visible}
.lens-ring{fill:none;stroke:rgba(236,176,20,.55);stroke-width:1}
.lens-ticks{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1;transform-origin:50% 50%;animation:lens-spin 140s linear infinite}
.lens-arc{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;transform-origin:50% 50%;animation:lens-spin 70s linear infinite reverse}
.lens-dot{fill:var(--gold)}
.lens-label{font-family:var(--font-body);font-size:5px;font-weight:600;letter-spacing:.2em;fill:rgba(255,255,255,.7)}
@keyframes lens-spin{to{transform:rotate(360deg)}}

/* Sucher-Rahmen (HUD) */
.hero-hud{position:absolute;inset:calc(var(--header-h) + 12px) var(--gutter) 28px;z-index:2;pointer-events:none;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hud-corner{position:absolute;width:22px;height:22px;border-color:rgba(255,255,255,.35);border-style:solid;border-width:0}
.hud-corner--tl{left:0;top:0;border-left-width:1px;border-top-width:1px}
.hud-corner--tr{right:0;top:0;border-right-width:1px;border-top-width:1px}
.hud-corner--bl{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.hud-corner--br{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.hud-top{position:absolute;left:36px;right:36px;top:4px;display:flex;justify-content:space-between;gap:16px}
.hud-rec::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:10px;vertical-align:1px;animation:blink 4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.hud-timecode{font-variant-numeric:tabular-nums}
@media (max-width:760px){.hud-top .hud-hide-sm{display:none}}

.hero-content{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:grid;align-content:end;gap:28px;
  padding-top:calc(var(--header-h) + 40px);padding-bottom:clamp(72px,12vh,140px);pointer-events:none}
.hero-content a,.hero-content p{pointer-events:auto}
.hero-title{font-size:min(var(--fs-display),16.5vh);font-weight:200;text-transform:uppercase;line-height:.96;letter-spacing:-.005em;margin-left:-.04em}
.hero-title .line{display:block;will-change:transform}
.hero-title .line--2{padding-left:1.1em;margin-top:.24em;font-weight:200;color:var(--on-dark-muted)}
.hero-title .line--3{font-weight:500;display:inline-block;white-space:nowrap}
.hero-title .gold-dot{width:.15em;height:.15em}
.hero-sub{max-width:52ch;font-size:var(--fs-lead);line-height:1.6;color:#CFCFCF}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.hero-hint{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(170px,19vh,200px);display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);max-width:300px;text-align:right;line-height:1.6}
.hero-hint::after{content:"";width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--gold);
  background:radial-gradient(circle,var(--gold) 0 3px,transparent 4px)}
.hint-touch{display:none}
@media (hover:none){.hint-mouse{display:none}.hint-touch{display:inline}}
@media (max-width:1279px){.hero-hint{display:none}}

/* Einstiegs-Animation (Titel fährt wie ein Vorspann auf) */
.js .hero-title .line>span,.js .hero-intro{opacity:0;transform:translateY(24%);animation:title-in 2.2s var(--ease-glide) forwards}
.js .hero-title .line--2>span{animation-delay:.25s}
.js .hero-title .line--3>span{animation-delay:.5s}
.js .hero-intro{transform:translateY(14px);animation-delay:.9s}
.js .hero-intro--late{animation-delay:1.2s}
@keyframes title-in{to{opacity:1;transform:none}}
.hero-title .line>span{display:inline-block}

/* ---------- SÄULEN ---------------------------------------------------- */
.pillars{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-light)}
.pillar{position:relative;display:flex;flex-direction:column;gap:22px;padding:40px clamp(20px,2.6vw,40px) 44px;border-right:1px solid var(--line-light);
  transition:background-color .5s var(--ease-out)}
.pillar:first-child{padding-left:0}
.pillar:last-child{border-right:0;padding-right:0}
.pillar::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--anth);transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease-cine)}
.pillar:hover::before,.pillar:focus-within::before{transform:scaleX(1)}
.pillar-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pillar-num{font-family:var(--font-head);font-weight:200;font-size:clamp(64px,7vw,112px);line-height:.8;color:var(--anth)}
.pillar h3{font-size:clamp(26px,2.5vw,38px);font-weight:400;text-transform:uppercase;line-height:1.02;letter-spacing:.01em}
.pillar-claim{font-family:var(--font-head);font-size:18px;font-weight:400;letter-spacing:.02em;color:var(--anth)}
.pillar-text{color:var(--on-light-muted)}
.pillar-points ul{list-style:none;display:grid;gap:0;border-top:1px solid var(--line-light)}
.pillar-points li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line-light);position:relative;font-size:15px;line-height:1.5}
.pillar-points li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;border:1px solid var(--anth)}
.pillar-news{display:grid;gap:8px;padding:20px;background:var(--anth);color:var(--on-dark);border-radius:var(--radius)}
.pillar-news .tag{justify-self:start}
.pillar-news p{font-size:14.5px;line-height:1.55;color:#DADADA}
.pillar .link-arrow{margin-top:auto;align-self:flex-start;color:var(--anth)}
@media (max-width:980px){
  .pillars{grid-template-columns:1fr}
  .pillar,.pillar:first-child,.pillar:last-child{padding:40px 0;border-right:0;border-bottom:1px solid var(--line-light)}
}

/* ---------- ZEIT ZURÜCK ---------------------------------------------- */
.timeback{overflow:hidden}
.timeback .drift-word{position:absolute;top:clamp(40px,6vw,80px);left:0}
.timeback .section-head{position:relative;padding-top:clamp(80px,12vw,200px)}
.tb-legend{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;padding-bottom:16px;border-bottom:1px solid var(--line-dark);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.tb-list{list-style:none;counter-reset:tb}
.tb-row{counter-increment:tb;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px 32px;align-items:center;
  padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line-dark)}
.tb-problem{position:relative;justify-self:start;text-wrap:balance;font-family:var(--font-head);font-weight:300;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,46px);line-height:1.18;color:var(--on-dark)}
.tb-problem::before{content:counter(tb,decimal-leading-zero);display:block;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--on-dark-muted);margin-bottom:10px}
.tb-problem>span{background:linear-gradient(var(--gold),var(--gold)) 0 58%/0% 3px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1.6s var(--ease-cine) .5s}
.tb-row.is-in .tb-problem>span,.no-js .tb-problem>span{background-size:100% 3px}
.tb-row.is-in .tb-problem{color:var(--on-dark-muted);transition:color 1.2s 1.4s}
.tb-solution{display:grid;gap:6px;padding-left:32px;border-left:1px solid var(--line-dark)}
.tb-solution h3{font-family:var(--font-head);font-size:clamp(20px,1.8vw,26px);font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--gold)}
.tb-solution p{color:#CFCFCF;max-width:48ch}
.js .tb-solution{opacity:0;transform:translateX(16px);transition:opacity 1.4s var(--ease-glide) 1s,transform 1.4s var(--ease-glide) 1s}
.js .tb-row.is-in .tb-solution{opacity:1;transform:none}
.tb-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(48px,6vw,80px)}
.tb-cta p{font-family:var(--font-head);font-size:clamp(22px,2.4vw,32px);font-weight:300;text-transform:uppercase;max-width:28ch;line-height:1.15}
@media (max-width:760px){
  .tb-legend{display:none}
  .tb-row{grid-template-columns:1fr}
  .tb-solution{padding-left:18px}
}

/* ---------- ABLAUF ---------------------------------------------------- */
.steps{--p:0;list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.steps::before,.steps::after{content:"";position:absolute;left:0;top:0;height:1px;background:var(--line-light);width:100%}
.steps::after{height:3px;top:-1px;background:var(--gold);width:calc(var(--p) * 100%)}
.no-js .steps::after{width:100%}
.step{position:relative;display:grid;gap:14px;align-content:start;padding-top:36px}
.step::before{content:"";position:absolute;left:0;top:-6px;width:13px;height:13px;border-radius:50%;background:var(--white);border:1px solid var(--anth);
  transition:background-color .4s}
.step.is-in::before{background:var(--anth)}
.step-scene{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.step-num{font-family:var(--font-head);font-weight:200;font-size:clamp(64px,6vw,96px);line-height:.85;color:var(--anth)}
.step h3{font-size:clamp(17px,1.35vw,19px);font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.step p{font-size:15px;line-height:1.6;color:var(--on-light-muted)}
@media (max-width:1199px){.steps{grid-template-columns:1fr 1fr}.steps::before,.steps::after{display:none}.step{border-top:1px solid var(--line-light)}}
@media (max-width:560px){.steps{grid-template-columns:1fr;gap:8px}.step{grid-template-columns:clamp(64px,20vw,76px) minmax(0,1fr);column-gap:22px}.step-num{grid-row:span 3}}

/* ---------- KENNZAHLEN ------------------------------------------------ */
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{display:grid;gap:14px;align-content:start;padding:0 clamp(16px,3vw,48px);border-left:1px solid var(--line-dark)}
.stat:first-child{border-left:0;padding-left:0}
.stat-value{display:flex;align-items:flex-start;font-family:var(--font-head);font-weight:200;line-height:.8;
  font-size:clamp(72px,11.5vw,220px);letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums}
.stat-unit{font-size:.36em;font-weight:300;color:var(--gold);margin-left:.08em;line-height:1}
.stat-label{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.stats-note{margin-top:clamp(48px,6vw,80px);color:var(--on-dark-muted);max-width:60ch}
@media (max-width:760px){
  .stats{grid-template-columns:1fr;gap:48px}
  .stat,.stat:first-child{border-left:0;padding:0 0 32px;border-bottom:1px solid var(--line-dark)}
}

/* ---------- REGIE + KI-TEAM ------------------------------------------ */
.director{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center;margin-bottom:clamp(96px,12vw,180px)}
.director-figure{position:relative;margin:0}
.director-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;border-radius:var(--radius)}
.clapper{position:absolute;left:-1px;right:-1px;top:-1px;height:30px;border-radius:var(--radius) var(--radius) 0 0;
  background:repeating-linear-gradient(-55deg,var(--anth) 0 26px,#F3F3F3 26px 52px)}
.director-badges{position:absolute;left:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:8px}
.badge-human{background:var(--white);color:var(--anth)}
.director-text{display:grid;gap:28px}
.director-quote{margin:0;font-family:var(--font-head);font-weight:300;font-size:clamp(26px,3vw,44px);line-height:1.18;text-transform:none;
  padding-left:clamp(20px,2.4vw,36px);border-left:3px solid var(--gold);color:var(--white)}
.director-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.director-name strong{font-family:var(--font-head);font-weight:500;font-size:24px;text-transform:uppercase;letter-spacing:.04em;color:var(--white)}
.director-name span{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.director-body{display:grid;gap:14px;color:#CFCFCF;max-width:60ch}
@media (max-width:900px){.director{grid-template-columns:1fr}.director-figure{max-width:440px}}

.team-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.team-head p{color:#CFCFCF}
@media (max-width:900px){.team-head{grid-template-columns:1fr}}

.team{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.agent{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;position:relative;border-radius:var(--radius);overflow:hidden;background:#151515;outline-offset:6px;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform 1.2s var(--ease-glide)}
.agent img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  filter:grayscale(1) blur(3px) brightness(.5);transform:scale(1.04);transition:filter 1.6s var(--ease-glide),transform 2s var(--ease-glide)}
.agent::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(236,176,20,.18),transparent 45%),linear-gradient(180deg,transparent 40%,rgba(10,10,10,.92) 100%);
  opacity:.9;transition:opacity .6s}
.agent-status{position:absolute;left:16px;top:16px;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.agent-state{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:rgba(10,10,10,.65);color:var(--on-dark-muted)}
.agent-state::before{content:"";width:6px;height:6px;border-radius:50%;background:#6B6B6B;transition:background-color .4s}
.agent-state .on{display:none}
.agent-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;display:grid;gap:6px}
.agent-role{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.agent h3{font-size:clamp(24px,2.2vw,32px);font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:var(--white)}
.agent-quote{font-family:var(--font-head);font-weight:300;font-size:17px;line-height:1.3;color:var(--gold);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease-glide) .2s;min-height:2.6em}
.agent-model{font-size:12px;color:var(--on-dark-muted);letter-spacing:.06em}
/* erwacht */
.agent:hover img,.agent:focus-within img,.agent:focus img,.agent.is-awake img{filter:none;transform:scale(1)}
.agent:hover .agent-quote,.agent:focus .agent-quote,.agent.is-awake .agent-quote{clip-path:inset(0 0 0 0)}
.agent:hover .agent-state,.agent:focus .agent-state,.agent.is-awake .agent-state{color:var(--white)}
.agent:hover .agent-state::before,.agent:focus .agent-state::before,.agent.is-awake .agent-state::before{background:var(--gold);box-shadow:0 0 0 4px rgba(236,176,20,.25);animation:pulse 3s ease-in-out infinite}
.agent:hover .agent-state .on,.agent:focus .agent-state .on,.agent.is-awake .agent-state .on{display:inline}
.agent:hover .agent-state .off,.agent:focus .agent-state .off,.agent.is-awake .agent-state .off{display:none}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(236,176,20,0)}}
.team-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line-dark);color:var(--on-dark-muted);font-size:14.5px}
.team-foot p{max-width:62ch}
@media (max-width:1020px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .team{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;padding-bottom:4px}
  .team::-webkit-scrollbar{display:none}
  .agent{scroll-snap-align:center}
  .agent h3{font-size:clamp(20px,6.4vw,26px)}
}
@media (hover:none){.agent-quote{clip-path:inset(0 0 0 0)}}

/* ---------- SOFTWARE -------------------------------------------------- */
.software{list-style:none;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(16px,2vw,28px)}
.product{display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius);overflow:hidden;
  transition:transform 1.2s var(--ease-glide),box-shadow 1.2s var(--ease-glide)}
.product:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(34,35,35,.35)}
.product:first-child{grid-row:span 2}
.product img{width:100%;aspect-ratio:3/2;object-fit:cover}
.product:not(:first-child) img{aspect-ratio:16/7}
.product-body{display:grid;gap:12px;padding:clamp(22px,2.4vw,36px);align-content:start;flex:1}
.product-meta{display:flex;flex-wrap:wrap;gap:8px}
.product h3{font-size:clamp(28px,3vw,44px);font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.product:not(:first-child) h3{font-size:clamp(22px,2vw,28px)}
.product p{color:var(--on-light-muted)}
.software-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:clamp(40px,5vw,64px)}
.software-cta p{color:var(--on-light-muted);max-width:56ch;font-size:15px}
@media (max-width:860px){.software{grid-template-columns:1fr}.product:first-child{grid-row:auto}}
/* Vier Produkte: groß links, rechts drei flache Karten (Bild links, Text rechts); 861–1100 px als 2 × 2 */
@media (min-width:1101px){
  .software:has(>.product:nth-child(4)){grid-template-rows:repeat(3,auto)}
  .software:has(>.product:nth-child(4)) .product:first-child{grid-row:span 3}
  .software:has(>.product:nth-child(4)) .product:not(:first-child){flex-direction:row}
  .software:has(>.product:nth-child(4)) .product:not(:first-child) img{flex:none;width:40%;height:auto;min-height:170px;aspect-ratio:auto;align-self:stretch;object-fit:cover;object-position:left top}
  .software:has(>.product:nth-child(4)) .product:not(:first-child) .product-body{padding:clamp(18px,1.8vw,26px)}
  .software:has(>.product:nth-child(4)) .product:not(:first-child) p{font-size:15px;line-height:1.6}
}
@media (min-width:861px) and (max-width:1100px){
  .software:has(>.product:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .software:has(>.product:nth-child(4)) .product:first-child{grid-row:auto}
  .software:has(>.product:nth-child(4)) .product img{aspect-ratio:3/2}
  .software:has(>.product:nth-child(4)) .product h3{font-size:clamp(22px,2.6vw,28px)}
}

/* ---------- TESTIMONIALS --------------------------------------------- */
.quotes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.quote{margin:0;display:flex;flex-direction:column;gap:28px;padding-top:28px;border-top:1px solid var(--line-dark)}
.quote::before{content:"“";display:block;font-family:var(--font-head);font-weight:500;font-size:88px;line-height:1;height:.5em;color:var(--gold)}
.quote blockquote{margin:0;font-family:var(--font-head);font-weight:300;font-size:clamp(24px,2.3vw,34px);line-height:1.2;color:var(--white)}
.quote figcaption{margin-top:auto;display:grid;gap:2px}
.quote-name{font-weight:600;color:var(--white)}
.quote-firm{font-size:14px;color:var(--on-dark-muted)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* ---------- LOGO-LAUFBAND -------------------------------------------- */
.clients{padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--line-dark);overflow:hidden}
.clients .eyebrow{margin-bottom:36px}
.marquee{--speed:160s;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee+.marquee{margin-top:10px}
.marquee-track{display:flex;width:max-content;animation:marquee var(--speed) linear infinite}
.marquee--reverse .marquee-track{animation-direction:reverse}
.clients:hover .marquee-track,.clients:focus-within .marquee-track{animation-play-state:paused}
.client-list{list-style:none;display:flex;flex:none}
.client-list li{display:flex;align-items:center;gap:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);
  font-family:var(--font-head);font-weight:300;text-transform:uppercase;font-size:clamp(26px,3.4vw,52px);letter-spacing:.02em;
  color:#8E8E8E;white-space:nowrap;transition:color .8s}
.client-list li::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.client-list li:hover{color:var(--white)}
.marquee--reverse .client-list li{font-weight:200;color:#5E5E5E}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:auto}
  .client-list{flex-wrap:wrap}
  .client-list[aria-hidden="true"],.marquee--reverse{display:none}
}

/* ---------- KONTAKT-CTA: Iris öffnet sich in Gold ------------------- */
.cta{--p:1;position:relative;background:var(--black);padding:0;overflow:hidden}
.cta-iris{position:relative;background:var(--gold);color:var(--anth);
  clip-path:circle(calc(var(--p) * 110%) at 50% 55%);padding-block:clamp(120px,16vw,240px)}
.cta-inner{display:grid;gap:36px;justify-items:start}
.cta h2{font-size:clamp(38px,8vw,140px);font-weight:300;text-transform:uppercase;line-height:1.1;max-width:14ch}
.cta h2 strong{font-weight:600}
.cta-text{font-size:var(--fs-lead);max-width:54ch;color:#2E2E2E}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.cta-direct{display:flex;flex-wrap:wrap;gap:10px 36px;padding-top:28px;border-top:1px solid rgba(34,35,35,.25);width:100%;font-size:15px}
.cta-direct a{text-decoration:none;font-weight:600;border-bottom:1px solid rgba(34,35,35,.35)}
.cta-direct a:hover{border-bottom-color:var(--anth)}
.cta-direct span{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:2px}


/* ---------- Zusammenspiel Scroll-Kino + Hover ------------------------ */
.js .agent[data-reveal].is-in{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.js .product[data-reveal].is-in:hover{transform:translateY(-4px)}
.on-gold .eyebrow::before{background:var(--anth)}

/* ---------- Hero auf dem Handy (steht am Ende, damit es die Grundregeln überschreibt) */
@media (max-width:760px){
  .hud-top,.lens-label{display:none}
  .hero-content{padding-top:34vh;padding-top:34svh;padding-bottom:40px;gap:20px}
  .hero-sub{font-size:15px}
  .hero-actions .btn{min-height:50px;padding:13px 22px;font-size:12.5px}
  .hero-actions .btn--gold{width:calc(100% - 64px);justify-content:space-between} /* rechts Platz für den runden Chat-Knopf */
}

/* Wisch-Hinweis für das Team-Karussell auf dem Handy */
.team-swipe{display:none}
@media (max-width:640px){
  .team-swipe{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
  .team-swipe::after{content:"";width:40px;height:1px;background:var(--gold)}
}

/* Niedrige Handys (z. B. 320×568): weniger schwebende Wörter, Inhalt höher – Mobil-Prüfung 13.10. */
@media (max-width:760px) and (max-height:700px){
  .hero-tasks{display:none} /* kein Platz: Wörter lägen auf Dachzeile und Titel – die Linse bleibt */
  .hero-content{padding-top:26svh}
}