/* Funktionsseite Website (fws): Header-Browser mit drei Kundenseiten, Onboarding-Call, Seiten im Dashboard, „Ist online.“ */
.fws-hero svg,.fws-s1 svg,.fws-s2 svg,.fws-s3 svg{display:block;flex:none}

/* ---------- HERO: schlichtes Browserfenster, drei echte Kundenseiten nacheinander ---------- */
.fws-hero{padding:calc(16 * var(--e)) calc(16 * var(--e)) calc(15 * var(--e))}
.fws-win{position:relative;border-radius:calc(10 * var(--e));overflow:hidden;background:#1C1C1F;box-shadow:0 0 0 1px rgba(244,243,240,.11),0 calc(20 * var(--e)) calc(44 * var(--e)) calc(-20 * var(--e)) rgba(0,0,0,.8)}
.fws-bar{position:relative;display:grid;grid-template-columns:calc(56 * var(--e)) minmax(0,1fr) calc(56 * var(--e));align-items:center;height:calc(30 * var(--e));padding:0 calc(11 * var(--e));background:#1C1C1F;border-bottom:1px solid rgba(244,243,240,.07)}
.fws-dots{display:flex;gap:calc(5 * var(--e))}
.fws-dots i{width:calc(8 * var(--e));height:calc(8 * var(--e));border-radius:50%;background:rgba(244,243,240,.16)}
.fws-adr{justify-self:center;display:flex;align-items:center;justify-content:center;gap:calc(5 * var(--e));width:100%;max-width:calc(250 * var(--e));height:calc(19 * var(--e));padding:0 calc(10 * var(--e));border-radius:calc(6 * var(--e));background:#111113;box-shadow:inset 0 0 0 1px rgba(244,243,240,.07);font-size:calc(9.5 * var(--e));font-weight:500;color:#D6D4CE}
.fws-adr svg{width:calc(9 * var(--e));height:calc(9 * var(--e));fill:none;stroke:#A9A7A1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fws-url{display:inline-grid;min-width:0}
.fws-url u{grid-area:1/1;text-decoration:none;white-space:nowrap;opacity:0;transition:opacity .3s ease}
.fws-url u.fws-an{opacity:1}
.fws-bar-r{justify-self:end;color:#6F6D68}
.fws-bar-r svg{width:calc(11 * var(--e));height:calc(11 * var(--e));fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fws-lade{position:absolute;left:0;bottom:-1px;width:100%;height:calc(2 * var(--e));background:#FF4800;transform:scaleX(0);transform-origin:left center;opacity:0}
.fws-hero.fws-laedt .fws-lade{opacity:1;transform:scaleX(.7);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .15s ease}
.fws-hero.fws-laedt.fws-fertig .fws-lade{opacity:0;transform:scaleX(1);transition:transform .25s ease,opacity .35s ease .2s}
.fws-bild{position:relative;aspect-ratio:1200/750;background:#0B0B0C;overflow:hidden}
.fws-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.fws-bild img.fws-alt{z-index:1;opacity:1;transition:none}
.fws-bild img.fws-an{z-index:2;opacity:1}
.fws-unter{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--e));margin-top:calc(13 * var(--e));padding:0 calc(2 * var(--e))}
.fws-wer{display:grid;min-width:0}
.fws-wer span{grid-area:1/1;display:flex;align-items:baseline;gap:calc(7 * var(--e));min-width:0;font-size:calc(10.5 * var(--e));line-height:1.35;color:#A9A7A1;white-space:nowrap;opacity:0;transition:opacity .45s ease}
.fws-wer span.fws-an{opacity:1}
.fws-wer b{font-weight:600;color:#F4F3F0}
.fws-chip{display:inline-flex;align-items:center;gap:calc(7 * var(--e));height:calc(25 * var(--e));padding:0 calc(12 * var(--e)) 0 calc(10 * var(--e));border-radius:999px;background:#141416;box-shadow:inset 0 0 0 1px rgba(244,243,240,.12);font-size:calc(10 * var(--e));font-weight:600;color:#F4F3F0;white-space:nowrap;flex:none}
.fws-chip i{width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;background:#FF4800;box-shadow:0 0 0 calc(3 * var(--e)) rgba(255,72,0,.18)}
@container (max-width:460px){
  .fws-hero{padding:calc(14 * var(--e)) calc(14 * var(--e)) calc(13 * var(--e))}
  .fws-bar{grid-template-columns:calc(40 * var(--e)) minmax(0,1fr) calc(40 * var(--e));height:calc(28 * var(--e));padding:0 calc(9 * var(--e))}
  .fws-dots{gap:calc(4 * var(--e))}
  .fws-dots i{width:calc(7 * var(--e));height:calc(7 * var(--e))}
  .fws-adr{height:calc(19 * var(--e));font-size:calc(10 * var(--e))}
  .fws-wer span{flex-direction:column;gap:calc(1 * var(--e));font-size:calc(11 * var(--e))}
  .fws-chip{font-size:calc(10.5 * var(--e));height:calc(26 * var(--e))}
}

/* ---------- S1: Onboarding-Call (Talqio-Call-Ansicht) und daneben der Kontakt mit Notiz ---------- */
.fws-s1{display:grid;grid-template-columns:calc(200 * var(--e)) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:calc(14 * var(--e));padding:calc(12 * var(--e)) calc(14 * var(--e)) calc(12 * var(--e)) calc(12 * var(--e))}
.fws-call{display:flex;flex-direction:column;min-height:0;padding:calc(8 * var(--e));border-radius:calc(13 * var(--e));background:#111113;box-shadow:inset 0 0 0 1px rgba(244,243,240,.08)}
.fws-top{display:flex;align-items:center;gap:calc(6 * var(--e));height:calc(22 * var(--e));padding:0 calc(2 * var(--e)) calc(7 * var(--e))}
.fws-mark{color:#FF4800}
.fws-mark svg{width:calc(11 * var(--e));height:calc(13 * var(--e))}
.fws-ct{flex:1;min-width:0;font:600 calc(10.5 * var(--e))/1.2 var(--display);letter-spacing:-.01em;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fws-pill{display:inline-flex;align-items:center;height:calc(18 * var(--e));padding:0 calc(7 * var(--e));border-radius:999px;background:rgba(244,243,240,.06);box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);font-size:calc(9.5 * var(--e));font-weight:500;color:#A9A7A1;font-variant-numeric:tabular-nums}
.fws-kachel{position:relative;flex:1;min-height:0;margin:0;border-radius:calc(9 * var(--e));overflow:hidden;background:#141416;box-shadow:0 0 0 calc(1.6 * var(--e)) #F4F3F0}
.fws-kachel img{display:block;width:100%;height:100%;object-fit:cover;object-position:47% 30%}
.fws-kachel figcaption{position:absolute;left:calc(6 * var(--e));bottom:calc(6 * var(--e));display:flex;align-items:center;gap:calc(4 * var(--e));max-width:calc(100% - calc(12 * var(--e)));height:calc(19 * var(--e));padding:0 calc(8 * var(--e)) 0 calc(6 * var(--e));border-radius:999px;background:rgba(11,11,12,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:calc(9.5 * var(--e));font-weight:500;color:#F4F3F0;white-space:nowrap}
.fws-kachel figcaption svg{width:calc(9 * var(--e));height:calc(9 * var(--e));fill:none;stroke:#FFB08A;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fws-ctl{display:flex;justify-content:center;gap:calc(6 * var(--e));padding-top:calc(9 * var(--e))}
.fws-ctl i{display:grid;place-items:center;width:calc(25 * var(--e));height:calc(25 * var(--e));border-radius:50%;background:rgba(244,243,240,.07);color:#F4F3F0}
.fws-ctl svg{width:calc(11 * var(--e));height:calc(11 * var(--e));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fws-ko{min-width:0;min-height:0;display:flex;flex-direction:column;margin-bottom:calc(-12 * var(--e));padding-top:calc(6 * var(--e));overflow:hidden}
.fws-ko>*{flex-shrink:0}  /* Verlauf darf unten aus der Karte laufen, wie in der echten App */
.fws-ko-kopf b{display:block;font:600 calc(15 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.fws-ko-kopf span{display:block;margin-top:calc(3 * var(--e));font-size:calc(9.5 * var(--e));color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fws-notiz{margin-top:calc(11 * var(--e));padding:calc(7 * var(--e))}
.fws-ta{position:relative;min-height:calc(68 * var(--e));margin:0;padding:calc(6 * var(--e)) calc(8 * var(--e));border-radius:calc(7 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09);font-size:calc(10 * var(--e));line-height:1.5;color:#F4F3F0;white-space:pre-line}
.fws-ph{position:absolute;left:calc(8 * var(--e));right:calc(8 * var(--e));top:calc(6 * var(--e));color:#6F6D68;transition:opacity .2s}
.fws-ta.fws-voll .fws-ph{opacity:0}
.fws-sp{display:flex;justify-content:flex-end;margin-top:calc(6 * var(--e))}
.fws-sp .d-btn{height:calc(21 * var(--e));padding:0 calc(10 * var(--e));font-size:calc(9.5 * var(--e))}
.fws-ko .d-tit{margin:calc(13 * var(--e)) 0 calc(8 * var(--e))}
.fws-vl{list-style:none;margin:0;padding:0}
.fws-v{position:relative;display:grid;grid-template-columns:calc(13 * var(--e)) minmax(0,1fr);gap:calc(7 * var(--e));padding-bottom:calc(11 * var(--e))}
.fws-v::before{content:"";position:absolute;left:calc(6 * var(--e));top:calc(13 * var(--e));bottom:calc(-1 * var(--e));width:1px;background:rgba(244,243,240,.16)}
.fws-bu::before{display:none}
.fws-pkt{width:calc(7 * var(--e));height:calc(7 * var(--e));margin:calc(4 * var(--e)) 0 0 calc(2.5 * var(--e));border-radius:50%;background:#F4F3F0;box-shadow:0 0 0 calc(2 * var(--e)) #0B0B0C}
.fws-bu .fws-pkt{background:#5B8DEF}
.fws-vk{display:flex;align-items:baseline;gap:calc(6 * var(--e));margin:0}
.fws-vk b{font-size:calc(10.5 * var(--e));font-weight:600;color:#F4F3F0}
.fws-vk span{font-size:calc(9 * var(--e));color:#6F6D68;white-space:nowrap}
.fws-vn{margin:calc(4 * var(--e)) 0 0;padding:calc(6 * var(--e)) calc(8 * var(--e));border-radius:calc(7 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.09);font-size:calc(10 * var(--e));line-height:1.5;color:#D6D4CE}
.fws-vt{margin:calc(2 * var(--e)) 0 0;font-size:calc(9.5 * var(--e));color:#A9A7A1}
.fws-s1 .d-toast{left:auto;right:calc(14 * var(--e))}

/* ---------- S2: Website im Dashboard, neue Seiten kommen dazu, Vorschau öffnet sich ---------- */
.fws-s2 .d-head{margin-bottom:calc(10 * var(--e))}
.fws-s2 .d-tit{margin-top:calc(2 * var(--e))}
.fws-s2 .d-r,.fws-s3 .d-r{min-height:calc(36 * var(--e));padding-top:calc(5 * var(--e));padding-bottom:calc(5 * var(--e))}
.fws-s2 .d-btn,.fws-s3 .d-btn{height:calc(21 * var(--e));padding:0 calc(9 * var(--e));font-size:calc(9.5 * var(--e))}
.fws-s2 .d-btn svg,.fws-s3 .d-btn svg{width:calc(10 * var(--e));height:calc(10 * var(--e));stroke:currentColor}
.fws-s2 .d-ic,.fws-s3 .d-ic{width:calc(22 * var(--e));height:calc(22 * var(--e))}
.fws-s2 .d-ic svg,.fws-s3 .d-ic svg{stroke:currentColor}
.fws-vor{position:absolute;z-index:3;left:calc(14 * var(--e));right:calc(14 * var(--e));top:calc(166 * var(--e));bottom:calc(14 * var(--e));display:flex;flex-direction:column;border-radius:calc(10 * var(--e));overflow:hidden;background:#F4EFE7;
  box-shadow:0 0 0 1px rgba(244,243,240,.18),0 calc(26 * var(--e)) calc(50 * var(--e)) calc(-12 * var(--e)) rgba(0,0,0,.85);opacity:0;transform:translateY(calc(18 * var(--e))) scale(.97);transform-origin:50% 100%;transition:opacity .35s ease,transform .7s var(--ease)}
.fws-vor.fws-zeig{opacity:1;transform:none}
.fws-vbar{display:flex;align-items:center;gap:calc(8 * var(--e));height:calc(22 * var(--e));padding:0 calc(9 * var(--e));background:#FFFFFF;border-bottom:1px solid rgba(19,37,35,.08);flex:none}
.fws-vbar .fws-dots{gap:calc(4 * var(--e))}
.fws-vbar .fws-dots i{width:calc(6 * var(--e));height:calc(6 * var(--e));background:rgba(11,11,12,.14)}
.fws-vadr{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:calc(4 * var(--e));height:calc(15 * var(--e));margin-right:calc(26 * var(--e));border-radius:calc(4 * var(--e));background:#F1EFEA;font-size:calc(8.5 * var(--e));color:#5A6663;white-space:nowrap;overflow:hidden}
.fws-vadr svg{width:calc(8 * var(--e));height:calc(8 * var(--e));fill:none;stroke:#8F8D87;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fws-kseite{flex:1;min-height:0;display:flex;flex-direction:column;font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;color:#132523;background:#F4EFE7}
.fws-knav{display:flex;align-items:center;gap:calc(8 * var(--e));height:calc(24 * var(--e));padding:0 calc(12 * var(--e));border-bottom:1px solid rgba(19,37,35,.07);flex:none}
.fws-klogo{display:flex;align-items:center;gap:calc(3 * var(--e));font-size:calc(9.5 * var(--e));letter-spacing:-.02em;color:#5A6663;white-space:nowrap}
.fws-klogo svg{width:calc(11 * var(--e));height:calc(10 * var(--e));color:#132523}
.fws-klogo b{font-weight:700;color:#132523}
.fws-klinks{display:flex;gap:calc(9 * var(--e));margin-left:auto;font-size:calc(7.5 * var(--e));color:#132523;opacity:.8;white-space:nowrap}
.fws-kbtn{display:inline-flex;align-items:center;height:calc(15 * var(--e));padding:0 calc(7 * var(--e));border-radius:999px;background:#17857D;color:#fff;font-size:calc(7 * var(--e));font-weight:600;white-space:nowrap}
.fws-kueber{flex:1;min-height:0;display:grid;grid-template-columns:calc(116 * var(--e)) minmax(0,1fr);gap:calc(16 * var(--e));align-items:center;padding:calc(11 * var(--e)) calc(16 * var(--e));background:#EAE2D6}
.fws-kueber img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:70% 40%;border-radius:calc(9 * var(--e))}
.fws-kueber b{display:block;font-size:calc(16 * var(--e));font-weight:700;line-height:1.05;letter-spacing:-.03em;color:#132523}
.fws-kueber p{margin:calc(6 * var(--e)) 0 0;font-size:calc(8.5 * var(--e));line-height:1.5;color:#5A6663}

/* ---------- S3: „Ist online.“, Adresse springt auf die eigene Domain ---------- */
.fws-s3 .d-head{margin-bottom:calc(8 * var(--e))}
.fws-s3 .d-tit{margin:calc(12 * var(--e)) 0 calc(7 * var(--e))}
.fws-s3 .d-tit:first-of-type{margin-top:calc(2 * var(--e))}
.fws-knoepfe{align-items:center}
.fws-pub{display:inline-grid;justify-items:end}
.fws-pub>*{grid-area:1/1;transition:opacity .3s ease}
.fws-status{display:inline-flex;align-items:center;gap:calc(6 * var(--e));height:calc(21 * var(--e));padding:0 calc(2 * var(--e)) 0 calc(4 * var(--e));font-size:calc(10 * var(--e));font-weight:500;color:#F4F3F0;white-space:nowrap;opacity:0}
.fws-status i{width:calc(6.5 * var(--e));height:calc(6.5 * var(--e));border-radius:50%;background:#FF4800}
.fws-live .fws-veroeff{opacity:0}
.fws-live .fws-status{opacity:1}
.fws-wechsel{display:grid}
.fws-wechsel>span{grid-area:1/1;min-width:0;margin:0;overflow:visible;white-space:normal;transition:opacity .45s ease}
.fws-wechsel>span>b,.fws-wechsel>span>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fws-wechsel>span>b{font-size:calc(10.5 * var(--e));font-weight:500;line-height:1.35;color:#F4F3F0}
.fws-wechsel>span>span{margin-top:calc(1 * var(--e));font-size:calc(9 * var(--e));line-height:1.4;color:#A9A7A1}
.fws-a1{transition-duration:.25s!important}
.fws-a2{opacity:0}
.fws-online .fws-a1{opacity:0}
.fws-online .fws-a2{opacity:1;transition-delay:.25s}  /* erst raus, dann rein, damit sich die Texte nie überlagern */
.fws-a2 b{display:flex!important;align-items:center;gap:calc(5 * var(--e))}
.fws-a2 b i{width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;background:#FF4800;flex:none}
.fws-adresse{transition:border-color .6s ease,box-shadow .6s ease}
.fws-adresse.fws-glow{border-color:rgba(255,72,0,.5);box-shadow:0 0 0 calc(3 * var(--e)) rgba(255,72,0,.1)}
.fws-oeffnen{gap:calc(5 * var(--e))}
.fws-oeffnen.fws-hov{background:#242428;box-shadow:inset 0 0 0 1px rgba(244,243,240,.16)}
.fws-s3 .fws-t3{left:calc(18 * var(--e));right:auto}

/* Handy: kleine UI-Schrift der Schritt-Karten etwas größer, damit sie bei 335 px Kartenbreite lesbar bleibt (ca. 8 px) */
@container (max-width:400px){
  .fws-s2 .d-sub,.fws-s3 .d-sub{font-size:calc(10.5 * var(--e))}
  .fws-s2 .d-rm b,.fws-s3 .d-rm b,.fws-wechsel>span>b{font-size:calc(11.5 * var(--e))}
  .fws-s2 .d-rm span,.fws-s3 .d-rm span,.fws-wechsel>span>span{font-size:calc(10 * var(--e))}
  .fws-s2 .d-btn,.fws-s3 .d-btn{height:calc(23 * var(--e));font-size:calc(10.5 * var(--e))}
  .fws-s2 .d-tag{font-size:calc(9.5 * var(--e))}
  .fws-s2 .d-tit,.fws-s3 .d-tit,.fws-ko .d-tit{font-size:calc(9.5 * var(--e))}
  .fws-status{font-size:calc(11 * var(--e))}
  .fws-pill,.fws-kachel figcaption{font-size:calc(10 * var(--e))}
  .fws-ko-kopf b{font-size:calc(16 * var(--e))}
  .fws-ko-kopf span{font-size:calc(10.5 * var(--e))}
  .fws-ta,.fws-vn{font-size:calc(10.5 * var(--e))}
  .fws-sp .d-btn{height:calc(23 * var(--e));font-size:calc(10.5 * var(--e))}
  .fws-vk b{font-size:calc(11.5 * var(--e))}
  .fws-vk span,.fws-vt{font-size:calc(10 * var(--e))}
  .fws-vadr{font-size:calc(9.5 * var(--e))}
}