/* Videoaufnahme: Karten nachgebaut aus Talqio (konto.css: vk-Karten, vk-stat, rk-Rekorder, ko-v Verlauf; Videoseite im Branding der Kundin), {n} = n Einheiten der Kartenbreite */

/* Bildschirm im Video: Startseite von Kessler Coaching mit Kamera-Kreis. Eigener Container, darin nur --s (400 Einheiten Bildschirmbreite), nie {n} */
.fva-bs{position:relative;container-type:inline-size;aspect-ratio:16/9;overflow:hidden;background:#F7F6F2}
.fva-bs>*{--s:calc(100cqw / 400)}
.fva-seite{position:absolute;inset:0;padding:calc(12 * var(--s)) calc(16 * var(--s));font-family:var(--body);color:#2B2A28;text-align:left}
.fva-nav{display:flex;align-items:center;gap:calc(14 * var(--s));font-size:calc(8.5 * var(--s));line-height:1;color:#5F5D58;white-space:nowrap}
.fva-nav b{margin-right:auto;font:600 calc(11 * var(--s))/1 var(--display);letter-spacing:-.01em;color:#0B0B0C}
.fva-nav i{font-style:normal;padding:calc(5 * var(--s)) calc(9 * var(--s));border-radius:999px;background:#17857D;color:#fff;font-weight:600}
.fva-held{display:grid;grid-template-columns:1fr 1fr;gap:calc(18 * var(--s));align-items:center;margin-top:calc(16 * var(--s))}
.fva-held img{display:block;width:100%;aspect-ratio:4/3.25;object-fit:cover;object-position:62% 40%;border-radius:calc(8 * var(--s))}
.fva-held b{display:block;font:600 calc(21 * var(--s))/1.08 var(--display);letter-spacing:-.025em;color:#0B0B0C}
.fva-held p{margin-top:calc(8 * var(--s));font-size:calc(8.5 * var(--s));line-height:1.5;color:#5F5D58}
.fva-held i{display:inline-flex;margin-top:calc(10 * var(--s));padding:calc(6 * var(--s)) calc(11 * var(--s));border-radius:999px;background:#17857D;color:#fff;font-style:normal;font-size:calc(8.5 * var(--s));font-weight:600}
.fva-kreis{position:absolute;left:4%;bottom:6%;width:24%;aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 calc(2.5 * var(--s)) rgba(244,243,240,.95),0 calc(10 * var(--s)) calc(24 * var(--s)) calc(-6 * var(--s)) rgba(0,0,0,.55)}

/* Gemeinsam: Status-Zeile wie .vk-stat (grauer Punkt, angesehen = grün) */
.fva-rec{width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;background:currentColor;flex:none}
.fva-stat{display:flex;align-items:flex-start;gap:calc(6 * var(--e));font-size:calc(9 * var(--e));line-height:1.45;color:#A9A7A1;transition:color .4s ease}
.fva-stat i{flex:none;width:calc(5 * var(--e));height:calc(5 * var(--e));margin-top:calc(4.5 * var(--e));border-radius:50%;background:#6F6D68;transition:background .4s ease}
.fva-stat.an{color:#D6D4CE}
.fva-stat.an i{background:#3DD68C}
.fva-dauer,.fva-cta{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:calc(5 * var(--e));height:calc(17 * var(--e));padding:0 calc(7 * var(--e));border-radius:999px;background:rgba(11,11,12,.88);color:#F4F3F0;font-size:calc(8.5 * var(--e));font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fva-dauer{right:calc(7 * var(--e));bottom:calc(7 * var(--e))}
.fva-cta{left:calc(7 * var(--e));top:calc(7 * var(--e))}
.fva-cta::before{content:"";width:calc(5 * var(--e));height:calc(5 * var(--e));border-radius:50%;background:#FF4800}

/* HERO: Seite „Videos“ mit Video-Karten */
.fva-hero{display:flex;flex-direction:column;aspect-ratio:500/352}
.fva-hero .d-btn svg{stroke:currentColor}
.fva-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10 * var(--e))}
.fva-vk{display:flex;flex-direction:column;min-width:0;border-radius:calc(12 * var(--e));overflow:hidden;background:#141416;border:1px solid rgba(244,243,240,.09)}
.fva-bild{position:relative;aspect-ratio:16/9;flex:none;background:linear-gradient(180deg,#1A1A1D,#101012);border-bottom:1px solid rgba(244,243,240,.09);overflow:hidden}
.fva-bild>.fva-bs{position:absolute;inset:0;aspect-ratio:auto}
.fva-kam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.fva-text{display:grid;gap:calc(4 * var(--e));padding:calc(11 * var(--e)) calc(12 * var(--e)) calc(2 * var(--e));min-width:0}
.fva-datum{font-size:calc(9 * var(--e));color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fva-titel{font-size:calc(11.5 * var(--e));font-weight:600;line-height:1.35;color:#F4F3F0}
.fva-kn{display:flex;gap:calc(6 * var(--e));margin-top:auto;padding:calc(10 * var(--e)) calc(12 * var(--e)) calc(12 * var(--e))}
.fva-kn span{flex:1;display:flex;align-items:center;justify-content:center;height:calc(24 * var(--e));border-radius:999px;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);font-size:calc(9.5 * var(--e));font-weight:500;color:#F4F3F0;white-space:nowrap}

/* S1: Rekorder: Bühne 16:9, darunter die Leiste (Einrichten, Aufnahme läuft, fertig) */
.fva-buehne{position:relative;aspect-ratio:16/9;border-radius:calc(12 * var(--e));overflow:hidden;background:linear-gradient(180deg,#161618,#0D0D0F);box-shadow:0 0 0 1px rgba(244,243,240,.09)}
.fva-leer{position:absolute;inset:0;display:grid;place-items:center;padding:calc(20 * var(--e));font-size:calc(10 * var(--e));color:#6F6D68;text-align:center;transition:opacity .3s ease}
.fva-kam-vor{position:absolute;left:4%;bottom:6%;width:24%;aspect-ratio:1;border-radius:50%;object-fit:cover;transform:scaleX(-1);
  box-shadow:0 0 0 calc(2.5 * var(--e)) rgba(244,243,240,.9),0 calc(14 * var(--e)) calc(30 * var(--e)) calc(-10 * var(--e)) rgba(0,0,0,.7);transition:opacity .3s ease}
.fva-live{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.fva-live>.fva-bs{position:absolute;inset:0;aspect-ratio:auto}
.fva-zaehler{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(11,11,12,.55);color:#fff;font:600 calc(64 * var(--e))/1 var(--display);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s ease}
.zaehlt .fva-live,.laeuft .fva-live,.fertig .fva-live,.zaehlt .fva-zaehler{opacity:1}
.zaehlt .fva-leer,.laeuft .fva-leer,.fertig .fva-leer,.zaehlt .fva-kam-vor,.laeuft .fva-kam-vor,.fertig .fva-kam-vor{opacity:0}
.fva-pan{position:absolute;left:calc(18 * var(--e));right:calc(18 * var(--e));bottom:calc(18 * var(--e));height:calc(46 * var(--e));display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--e));opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.fva-s1:not(.zaehlt):not(.laeuft):not(.fertig) .fva-p1,.zaehlt .fva-p2,.laeuft .fva-p2,.fertig .fva-p3{opacity:1;visibility:visible;transition:opacity .3s ease .1s}
.fva-wahl small{display:block;margin-bottom:calc(5 * var(--e));font-size:calc(9.5 * var(--e));font-weight:500;color:#A9A7A1}
.fva-wahl .fn-pills span{height:calc(21 * var(--e));font-size:calc(9.5 * var(--e))}
.fva-start,.fva-kn2 .d-btn{height:calc(29 * var(--e));padding:0 calc(14 * var(--e));font-size:calc(10.5 * var(--e))}
.fva-uhr{display:flex;align-items:center;gap:calc(12 * var(--e));min-width:0}
.fva-zeit{display:flex;align-items:center;gap:calc(7 * var(--e))}
.fva-zeit i{width:calc(7 * var(--e));height:calc(7 * var(--e));border-radius:50%;background:#FF4800}
.fva-zeit b{font:600 calc(21 * var(--e))/1 var(--display);letter-spacing:-.01em;color:#F4F3F0;font-variant-numeric:tabular-nums}
.fva-status{font-size:calc(9.5 * var(--e));line-height:1.35;color:#A9A7A1}
.fva-kn2{display:flex;gap:calc(6 * var(--e));flex:none}
.fva-notice{width:100%;padding:calc(11 * var(--e)) calc(13 * var(--e));border-radius:calc(10 * var(--e));background:#1C1C1F;border:1px solid rgba(61,214,140,.4);font-size:calc(10.5 * var(--e));line-height:1.4;color:#D6D4CE}
.fva-notice b{font-weight:600;color:#F4F3F0}

/* S2: Videoseite im Branding der Kundin, ab 1:30 Text und Button darunter */
.fva-s2{padding:calc(16 * var(--e)) calc(20 * var(--e)) 0;background:#F4F3F0}
.fva-s2>:not(.d-cur){max-width:calc(326 * var(--e));margin-left:auto;margin-right:auto}
.fva-bn{display:block;font:600 calc(11 * var(--e))/1 var(--display);letter-spacing:-.01em;color:#0B0B0C}
.fva-h{display:block;margin-top:calc(13 * var(--e));font:600 calc(16 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#0B0B0C}
.fva-stage{margin-top:calc(10 * var(--e));padding:calc(4 * var(--e));border-radius:calc(12 * var(--e));background:linear-gradient(180deg,#FFFFFF,#EDEBE6);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(11,11,12,.1)}
.fva-screen{position:relative;border-radius:calc(8 * var(--e));overflow:hidden;background:#000}
.fva-ctl{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:calc(8 * var(--e));padding:calc(16 * var(--e)) calc(10 * var(--e)) calc(7 * var(--e));background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));color:#fff}
.fva-ctl svg{width:calc(9 * var(--e));height:calc(9 * var(--e));fill:#fff;flex:none}
.fva-t{font-size:calc(8.5 * var(--e));font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.fva-bar{flex:1;height:calc(3 * var(--e));border-radius:999px;background:rgba(255,255,255,.35);overflow:hidden}
.fva-bar i{display:block;width:var(--p,42%);height:100%;border-radius:inherit;background:#fff;transition:width .95s linear}
.fva-ctabox{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.fva-ctabox>div{min-height:0;overflow:hidden}
.fva-s2.cta .fva-ctabox{grid-template-rows:1fr}
.fva-ctain{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--e));margin-top:calc(9 * var(--e));padding:calc(10 * var(--e)) calc(10 * var(--e)) calc(10 * var(--e)) calc(14 * var(--e));border-radius:calc(12 * var(--e));background:linear-gradient(180deg,#FFFFFF,#EDEBE6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(11,11,12,.1);opacity:0;transform:translateY(calc(6 * var(--e)));transition:opacity .45s ease .12s,transform .5s var(--ease) .12s}
.fva-s2.cta .fva-ctain{opacity:1;transform:none}
.fva-ctain p{font-size:calc(10.5 * var(--e));line-height:1.45;color:#0B0B0C}
.fva-ctab{flex:none;display:inline-flex;align-items:center;gap:calc(6 * var(--e));height:calc(28 * var(--e));padding:0 calc(13 * var(--e));border-radius:999px;background:#17857D;color:#fff;font-size:calc(10.5 * var(--e));font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 calc(10 * var(--e)) calc(20 * var(--e)) calc(-10 * var(--e)) rgba(23,133,125,.8);transition:transform .14s ease,filter .2s}
.fva-ctab svg{width:calc(11 * var(--e));height:calc(11 * var(--e));stroke:currentColor}
.fva-ctab.druck{transform:scale(.94);filter:brightness(1.1)}

/* S3: Verlauf des Kontakts (ko-v), Video mit Status, Termin gebucht */
.fva-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10 * var(--e));margin-bottom:calc(12 * var(--e))}
.fva-kopf>div{min-width:0}
.fva-name{display:block;font:600 calc(17 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.fva-lead{display:block;margin-top:calc(4 * var(--e));font-size:calc(10.5 * var(--e));line-height:1.4;color:#A9A7A1}
.fva-phase{display:inline-flex;align-items:center;gap:calc(5 * var(--e));height:calc(21 * var(--e));margin-top:calc(1 * var(--e));padding:0 calc(8 * var(--e));border-radius:999px;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);font-size:calc(10 * var(--e));font-weight:500;line-height:1;color:#F4F3F0;white-space:nowrap;flex:none}
.fva-phase::before{content:"";width:calc(5.5 * var(--e));height:calc(5.5 * var(--e));border-radius:50%;background:#FF4800;flex:none;transition:background .3s}
.fva-phase[data-art=termin]::before{background:#5B8DEF}
.fva-tit{margin:calc(14 * var(--e)) 0 calc(9 * var(--e));font-size:calc(9 * var(--e));font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#F4F3F0}
.fva-vl{list-style:none;margin:0;padding:0}
.fva-v{position:relative;display:grid;grid-template-columns:calc(16 * var(--e)) minmax(0,1fr);gap:calc(8 * var(--e));padding-bottom:calc(12 * var(--e))}
.fva-v::before{content:"";position:absolute;left:calc(7.5 * var(--e));top:calc(14 * var(--e));bottom:calc(-1 * var(--e));width:1px;background:rgba(244,243,240,.16)}
.fva-vl>li:last-child .fva-v::before{display:none}
.fva-pkt{width:calc(8.5 * var(--e));height:calc(8.5 * var(--e));margin:calc(4 * var(--e)) 0 0 calc(3.5 * var(--e));border-radius:50%;box-shadow:0 0 0 calc(2.5 * var(--e)) #0B0B0C}
.fva-v[data-art=video] .fva-pkt{background:#3DD68C}
.fva-v[data-art=buchung] .fva-pkt{background:#5B8DEF}
.fva-vi{min-width:0}
.fva-vk2{display:flex;align-items:baseline;gap:calc(7 * var(--e))}
.fva-vk2 b{font-size:calc(11 * var(--e));font-weight:600;line-height:1.3;color:#F4F3F0;white-space:nowrap}
.fva-vk2 span{font-size:calc(9.5 * var(--e));color:#6F6D68;white-space:nowrap}
.fva-vi p{margin-top:calc(2 * var(--e));font-size:calc(10.5 * var(--e));line-height:1.45;color:#D6D4CE}
.fva-mini{display:flex;align-items:center;gap:calc(11 * var(--e));margin-top:calc(6 * var(--e));padding:calc(7 * var(--e));border-radius:calc(10 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.09)}
.fva-mbild{position:relative;width:calc(112 * var(--e));flex:none;border-radius:calc(6 * var(--e));overflow:hidden}
.fva-mbild .fva-dauer{right:calc(4 * var(--e));bottom:calc(4 * var(--e));height:calc(14 * var(--e));padding:0 calc(5 * var(--e));font-size:calc(7.5 * var(--e))}
.fva-mtext{display:grid;gap:calc(3 * var(--e));min-width:0;padding-right:calc(6 * var(--e))}
.fva-mtext b{font-size:calc(11 * var(--e));font-weight:600;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Handy: Header-Karte mit 350 Einheiten, nur das eine Video, eine Spalte wie in der echten App */
@container (max-width:460px){
  .fva-hero{aspect-ratio:350/400}
  .fva-hero .fva-weg,.fva-zwei{display:none}
  .fva-grid{grid-template-columns:minmax(0,1fr)}
  .fva-titel{font-size:calc(12.5 * var(--e))}
  .fva-hero .fva-stat,.fva-datum{font-size:calc(10 * var(--e))}
  .fva-kn span{height:calc(28 * var(--e));font-size:calc(10.5 * var(--e))}
  .fva-hero .fva-dauer,.fva-hero .fva-cta{height:calc(19 * var(--e));font-size:calc(9.5 * var(--e))}
  .fva-hero .d-toast{left:calc(14 * var(--e))}
}
@media (prefers-reduced-motion:reduce){.fva-stat,.fva-stat i,.fva-leer,.fva-kam-vor,.fva-live,.fva-zaehler,.fva-pan,.fva-bar i,.fva-ctabox,.fva-ctain,.fva-phase::before{transition:none!important}}