/* /ki-mitarbeiter-konfigurator: Layout der Kurzseite und des Konfigurators.
   Farben, Schriften, Dialog- und Formular-Basis kommen aus ki-mitarbeiter-varianten/shared.css. */
.page{position:relative;overflow-x:clip}
.nw{white-space:nowrap}
h1 em,h2 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--mint)}

/* Header */
/* Header steht oben normal; beim Scrollen weg, bis der Hero-CTA oben aus dem Bild ist, dann klebt er (konfigurator.js) */
.top{position:sticky;top:0;z-index:50;transition:transform .35s cubic-bezier(.2,.7,.2,1);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(16px,calc((100vw - 1200px)/2));background:rgba(12,17,18,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(186,232,232,.08)}
.top.is-hidden{transform:translateY(-110%)}
.top img{height:22px;width:auto}
.top-cta{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:var(--acc);color:#141414;font-size:14px;font-weight:700;transition:transform .2s}
.top-cta:hover{color:#141414;transform:translateY(-1px)}
.top-cta .ms{font-size:18px}

/* Haupt-CTA */
.cta-main{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:20px 28px;border-radius:16px;background:var(--acc);color:#141414;font-size:clamp(17px,1.6vw,19px);font-weight:800;letter-spacing:-.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 18px 44px -14px var(--acc-glow);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.cta-main:hover{color:#141414;transform:translateY(-2px)}
.cta-main:active{transform:scale(.98)}
.cta-main .ms{font-size:22px}
.cta-block{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.cta-note{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--mint)}
.cta-note .ms{font-size:19px}

/* Hero */
.hero{position:relative;padding:clamp(40px,6vw,88px) 16px clamp(56px,7vw,96px)}
.hero-glow{position:absolute;right:-10%;top:-10%;width:900px;max-width:120vw;height:700px;background:radial-gradient(closest-side,var(--mint-soft),transparent);pointer-events:none}
.hero-in{position:relative;max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:48px clamp(40px,6vw,96px)}
.hero-copy{flex:1 1 560px;min-width:0;max-width:720px}
/* Pre-Headline mit pulsierendem Punkt wie auf /ki-mitarbeiter */
.pre{margin:0 0 20px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--mint)}
.pre span{width:8px;height:8px;flex:none;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc);animation:rsPulse 2.2s ease-in-out infinite}
.hero h1{margin:0;font-size:clamp(44px,6.4vw,92px);line-height:.95;letter-spacing:-.045em;font-weight:800;text-wrap:balance}
.hero h1 em{display:block;margin-top:.08em;font-size:1.08em;line-height:1;color:var(--acc)}
.hero-how{margin:28px 0 0;font-size:clamp(20px,2vw,26px);line-height:1.3;letter-spacing:-.02em;font-weight:600;color:#E5F0F0;text-wrap:balance}
.hero-how strong{color:var(--acc)}
.hero-body{margin:16px 0 0;max-width:580px;font-size:clamp(16px,1.4vw,18px);line-height:1.65;color:rgba(229,240,240,.7);text-wrap:pretty}
.hero-body strong{color:#E5F0F0;font-weight:700}
.checks{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:rgba(229,240,240,.7)}
.checks li{display:flex;align-items:center;gap:7px}
.checks .ms{font-size:19px;color:var(--mint)}
/* Karte im Seitenverhältnis des Fotos (900×1593), also ohne Zuschnitt: Jonas' Fingerspitzen liegen
   immer bei 61,5 % der Höhe, der Play-Button sitzt mittig darunter (--play-y), über der Bildunterschrift. */
.hero-video{--play-y:.72;--ring:76px;--aw:220px;position:relative;flex:0 1 320px;min-width:0;width:100%;max-width:320px;margin:0 auto}
/* Hinweis links neben dem Video, Pfeilspitze endet links am Play-Button (Mitte bei 50 % / 62 %).
   Breit: Schrift komplett neben dem Video. Mittlere Breiten und mobil: kompakter, ragt ins Bild. */

.video-card{display:block;position:relative;width:100%;aspect-ratio:900/1593;border-radius:28px;overflow:hidden;background:#131B1C;border:1px solid rgba(220,240,240,.12);box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 80px -30px var(--mint-glow)}
.video-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.video-card:hover img{transform:scale(1.03)}
.video-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,17,18,.85) 72%,rgba(12,17,18,.97))}
.video-play{position:absolute;left:50%;top:calc(var(--play-y) * 100%);transform:translate(-50%,-50%);width:var(--ring);height:var(--ring);border-radius:50%;background:rgba(220,240,240,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(220,240,240,.25);display:flex;align-items:center;justify-content:center}
.video-play .ms{width:54px;height:54px;border-radius:50%;background:var(--acc);color:#141414;display:flex;align-items:center;justify-content:center;font-size:30px}
.video-cap{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;text-align:left}
.video-cap>span{font-family:'Instrument Serif',serif;font-size:24px;line-height:1.1;color:#fff}
.video-cap small{font-size:13px;color:rgba(255,255,255,.75)}
.video-cap strong{color:#fff;font-weight:600}

/* Abschnitte */
.tasks,.steps,.proof,.kunden,.fs{max-width:1200px;margin:0 auto;padding:clamp(64px,8vw,112px) 16px}
.tasks h2,.steps h2,.proof h2,.kunden h2{margin:0;max-width:880px;font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.045em;font-weight:800;text-wrap:balance}

.task-grid{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.task-grid li{display:flex;flex-direction:column;padding:10px 10px 20px;border-radius:24px;background:linear-gradient(180deg,#121a1b,#0f1617);border:1px solid rgba(186,232,232,.09)}
.task-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px}
.task-grid strong{margin:14px 10px 0;font-size:19px;letter-spacing:-.02em;font-weight:800}
.task-grid span{margin:6px 10px 0;font-size:15px;line-height:1.5;color:rgba(229,240,240,.66)}

.step-list{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);counter-reset:none}
.step-list>li{display:flex;flex-direction:column;gap:18px;padding-top:24px;border-top:1px solid rgba(186,232,232,.14)}
.step-n{font-family:'Instrument Serif',serif;font-size:clamp(64px,6vw,96px);line-height:.8;color:rgba(186,232,232,.4)}
.step-n.is-acc{color:var(--acc)}
.step-list h3{margin:0;font-size:clamp(22px,2vw,26px);line-height:1.15;letter-spacing:-.03em;font-weight:800}
.step-list p{margin:10px 0 0;font-size:16px;line-height:1.6;color:rgba(229,240,240,.66);text-wrap:pretty}
.channels{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.channels li{display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:12px;background:#162021;border:1px solid rgba(186,232,232,.1);box-shadow:inset 0 1px 0 rgba(186,232,232,.06);font-size:14px;font-weight:700;line-height:1;white-space:nowrap}
.channels img{width:30px;height:30px;flex:none;border-radius:8px;object-fit:cover}

.proof{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.proof-photo{margin:0;position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:#131B1C;border:1px solid rgba(186,232,232,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.proof-photo img{width:100%;height:100%;object-fit:cover;object-position:30% 20%}
.proof-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(12,17,18,.9))}
.proof-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:flex;flex-direction:column;gap:2px;font-size:13px;color:rgba(229,240,240,.75)}
.proof-photo figcaption strong{font-size:17px;color:#fff}
.proof-more{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:820px}
.proof-more li{height:44px;padding:9px 12px;border-radius:10px;background:rgba(186,232,232,.03);border:1px solid rgba(186,232,232,.07)}
.proof-more img{width:100%;height:100%;object-fit:contain;opacity:.55}
.proof-logos{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:820px}
.proof-logos li{height:92px;padding:20px 28px;border-radius:18px;background:linear-gradient(180deg,rgba(186,232,232,.08),rgba(186,232,232,.02));border:1px solid rgba(186,232,232,.14)}
.proof-logos img{width:100%;height:100%;object-fit:contain;opacity:.9}
.quote{margin:40px 0 0;max-width:760px}
.quote blockquote{margin:0;font-family:'Instrument Serif',serif;font-size:clamp(22px,2.4vw,32px);line-height:1.25}
.quote figcaption{margin-top:14px;font-size:14px;color:rgba(229,240,240,.66)}
.quote figcaption strong{color:#E5F0F0}

/* Kundenstimmen: 8 Karten als 4x2 bzw. 2x4 */
.t-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:899px){.t-grid{grid-template-columns:repeat(2,1fr);gap:10px} .t-grid .t-name{font-size:15px!important} .t-grid .t-co{font-size:12px!important}}

.final{padding:0 16px clamp(56px,7vw,96px)}
.final-in{max-width:1200px;margin:0 auto;padding:clamp(48px,8vw,104px) clamp(24px,6vw,80px);border-radius:40px;background:repeating-linear-gradient(135deg,rgba(0,0,0,.035) 0 1px,transparent 1px 14px),var(--acc);color:#141414;box-shadow:0 50px 100px -50px var(--acc-glow)}
.final h2{margin:0;max-width:820px;font-size:clamp(38px,5.6vw,84px);line-height:1.06;letter-spacing:-.05em;font-weight:800;text-wrap:balance}
.final p{margin:20px 0 0;max-width:560px;font-size:18px;line-height:1.55;color:rgba(20,20,20,.78)}
.cta-dark{margin-top:32px;display:inline-flex;align-items:center;gap:12px;padding:20px 28px;border-radius:16px;background:#141414;color:var(--acc);font-size:18px;font-weight:800;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);transition:transform .2s}
.cta-dark:hover{color:var(--acc);transform:translateY(-2px)}
.cta-dark .ms{font-size:22px}

.foot{max-width:1200px;margin:0 auto;padding:28px 16px 40px;border-top:1px solid rgba(186,232,232,.1);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.foot img{height:22px;width:auto}
.foot nav{display:flex;gap:24px;font-size:14px;color:rgba(229,240,240,.85)}
.foot nav a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(186,232,232,.3)}
.foot p{flex-basis:100%;margin:0;font-size:12px;line-height:1.5;color:rgba(229,240,240,.5)}

/* Mittlere Breiten: wenig Platz neben dem Video, Hinweis kompakter (ragt ins Bild) */
@media (min-width:960px) and (max-width:1180px){
  .hero-video{--aw:120px;--hint-size:26px}
}
@media (max-width:960px){
  .task-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .step-list{grid-template-columns:1fr}
}
@media (max-width:767px){
  /* Header mobil erst nach dem Hero-CTA, vorher weder sichtbar noch Platz belegend */
  .top{position:fixed;left:0;right:0}
  .top:not(.is-shown){transform:translateY(-110%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
  /* Mobil: kleinerer Ring und kompakte Bildunterschrift, damit der Button zwischen Fingerspitzen und Text passt */
  .hero-video{max-width:260px;--ring:64px;--aw:104px;--hint-size:23px;--play-y:.715}
  .video-play .ms{width:46px;height:46px;font-size:26px}
  .video-cap{left:14px;right:14px;bottom:14px;gap:6px}
  .video-cap>span{font-size:18px}
  .video-cap small{font-size:12px;line-height:1.25}
  .tasks,.steps,.proof,.kunden,.fs{padding-top:56px;padding-bottom:56px}
  .step-list{margin-top:32px;gap:20px}
  .step-list>li{flex-direction:row;gap:16px;padding-top:18px}
  .step-n{font-size:52px;flex:none;width:32px}
  .proof{grid-template-columns:1fr}
  .proof-photo{max-width:none;aspect-ratio:16/11}
  .proof-photo img{object-position:30% 18%}
  .proof-more{grid-template-columns:repeat(3,1fr)}
  .proof-more li{height:40px;padding:8px 10px}
}
@media (max-width:640px){
  .top-cta{padding:9px 12px;font-size:13px}
  .cta-main{width:100%}
  .cta-block{gap:10px}
  .task-grid li{padding:8px 8px 16px;border-radius:20px}
  .task-grid strong{margin:12px 6px 0;font-size:17px}
  .task-grid span{margin:4px 6px 0;font-size:14px}
  .proof-logos{gap:8px}
  .proof-logos li{height:64px;padding:12px;border-radius:14px}
  .final-in{border-radius:28px}
  .cta-dark{width:100%;justify-content:center;font-size:17px;padding:18px 20px}
}
@media (max-width:380px){.top-cta{font-size:0;gap:0;padding:9px}.top-cta .ms{font-size:20px}}

/* ---------- Konfigurator ---------- */
.cfg-dlg{width:min(100vw - 24px,760px)}
.cfg-bar{margin-top:12px;height:5px;border-radius:5px;background:rgba(186,232,232,.12);overflow:hidden}
.cfg-bar i{display:block;height:100%;width:0;border-radius:5px;background:var(--acc);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.cfg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cfg-grid.is-logos{grid-template-columns:repeat(3,1fr)}
.cfg-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 8px 14px;border-radius:18px;border:1.5px solid rgba(186,232,232,.12);background:rgba(186,232,232,.03);color:#E5F0F0;font:700 14px/1.25 'Manrope',sans-serif;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.cfg-card:hover{border-color:rgba(186,232,232,.3);background:rgba(186,232,232,.06)}
.cfg-card:active{transform:scale(.97)}
.cfg-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px}
.cfg-card.is-logo{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 42px 12px 14px;text-align:left}
.cfg-card.is-logo img,.cfg-card.is-logo .cfg-ic{width:40px;height:40px;flex:none;border-radius:11px;object-fit:contain}
.cfg-card.is-logo img.on-white{background:#fff;padding:6px}
.cfg-ic{display:flex;align-items:center;justify-content:center;background:rgba(186,232,232,.08);color:var(--mint);font-size:22px}
.cfg-card::after{content:'';position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(186,232,232,.35);background:rgba(12,17,18,.6);transition:background .2s,border-color .2s}
.cfg-card.is-logo::after{top:50%;margin-top:-11px}
.cfg-card[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-soft)}
.cfg-card[aria-pressed="true"]::after{content:'check';font-family:'Material Symbols Rounded';font-size:16px;line-height:19px;text-align:center;color:#141414;background:var(--acc);border-color:var(--acc)}
.cfg-other{margin-top:2px;width:100%;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border-radius:16px;border:1.5px dashed rgba(186,232,232,.22);background:transparent;color:#E5F0F0;font:700 15px 'Manrope',sans-serif;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.cfg-other .ms{width:32px;height:32px;flex:none;border-radius:10px;background:rgba(186,232,232,.08);color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:20px}
.cfg-other:hover{border-color:rgba(186,232,232,.4);background:rgba(186,232,232,.04)}
.cfg-other[aria-pressed="true"]{border-style:solid;border-color:var(--acc);background:var(--acc-soft)}
.cfg-other[aria-pressed="true"] .ms{background:var(--acc);color:#141414}
.cfg-other-field{margin-top:-2px}
.contact-grid .form-field.is-optional label span{font-weight:500;color:var(--alt-mute)}
.cfg-dlg .contact-grid .form-field:nth-child(n+3){grid-column:auto}
.cfg-dlg .contact-grid .form-field.is-wide{grid-column:1/-1}
@media (max-width:640px){
  .cfg-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .cfg-grid.is-logos{grid-template-columns:1fr 1fr}
  .cfg-card.is-logo{padding:10px 28px 10px 10px;gap:10px;font-size:13px}
  .cfg-card.is-logo img,.cfg-card.is-logo .cfg-ic{width:34px;height:34px}
  .cfg-card.is-logo::after{display:none}
  .cfg-card.is-logo[aria-pressed="true"]::after{display:block;width:18px;height:18px;margin-top:-9px;right:8px;font-size:13px;line-height:15px}
    .cfg-dlg .contact-grid{grid-template-columns:1fr}
}
/* shared.css blendet den Hilfetext im Kalenderschritt mobil aus. Im Konfigurator erklärt er,
   warum der Termin kommt (Konfiguration besprechen, einarbeiten, übergeben), deshalb kompakt sichtbar. */
@media (max-width:640px){.cfg-dlg.is-calendar .check-help{display:block;margin-top:6px;padding:0 8px;font-size:14px;line-height:1.45}}