/* =========================================================
   booyage.info – Seitenspezifisch: clara.html
   Clara – die Assistentin im Booyage-Portal (warme Farbwelt)
   ========================================================= */
.cl svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cl{--cl1:#ffb23f;--cl2:#e72fa0;--cl3:#6248e8}

/* ---------- Hero: Clara läuft durch die Gästereise ---------- */
.cl .cl-hero{background:radial-gradient(circle at 85% 10%,rgba(255,178,63,.16),transparent 40%),radial-gradient(circle at 70% 90%,rgba(98,72,232,.10),transparent 45%),linear-gradient(180deg,#fff,#fff8fb)}
.cl .ch{display:grid;gap:16px}
.cl .ch-stage{position:relative;width:100%;aspect-ratio:840/280}
.cl .ch-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cl .ch-track{fill:none;stroke:#f1dde7;stroke-width:14;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cl .ch-line{fill:none;stroke:url(#ch-g);stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cl .ch-node{position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:6px;z-index:2}
.cl .ch-node i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #f1d4e2;color:#c7356f;box-shadow:0 10px 24px rgba(214,52,135,.12);transition:transform .35s cubic-bezier(.2,.9,.2,1.5),background .35s ease,color .35s ease,border-color .35s ease}
.cl .ch-node svg{width:22px;height:22px}
.cl .ch-node b{font-size:.74rem;font-weight:800;color:var(--ink2);background:rgba(255,255,255,.92);padding:2px 8px;border-radius:999px;white-space:nowrap}
.cl .ch-node.is-on i{background:var(--brand);color:#fff;border-color:transparent;transform:scale(1.14)}
.cl .ch-dot{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(231,47,160,.18),0 10px 26px rgba(214,52,135,.35);z-index:3;opacity:0;transition:opacity .4s ease}
.cl .ch-dot img{width:15px;height:21px;object-fit:contain}
.cl .ch.is-live .ch-dot{opacity:1}
.cl .ch-chat{max-width:440px;margin-left:auto;background:#fff;border:1px solid #f1dde7;border-radius:20px;padding:16px;box-shadow:0 24px 54px rgba(214,52,135,.12)}
.cl .cc-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.cl .cc-av{width:30px;height:30px;border-radius:50%;background:#fff0f6;display:grid;place-items:center}
.cl .cc-av img{width:12px;height:17px;object-fit:contain}
.cl .cc-head b{font:400 1.05rem/1 var(--serif);color:var(--ink)}
.cl .cc-st{margin-left:auto;font-size:.7rem;font-weight:800;color:#c7356f;background:#fff0f6;padding:3px 9px;border-radius:999px}
.cl .cc-g,.cl .cc-c{margin:0;font-size:.86rem;line-height:1.5;padding:9px 12px;transition:opacity .35s ease,transform .4s cubic-bezier(.2,.9,.2,1.2)}
.cl .cc-g{justify-self:end;margin-left:18%;background:var(--navy);color:#fff;border-radius:14px 14px 4px 14px}
.cl .cc-c{margin-top:8px;margin-right:10%;background:#fff6fa;color:var(--ink2);border:1px solid #f6dbe8;border-radius:14px 14px 14px 4px;min-height:3em}
.cl .ch-chat.is-swap .cc-g,.cl .ch-chat.is-swap .cc-c{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:no-preference){
 .cl .ch-line{stroke-dasharray:1;stroke-dashoffset:1;animation:bv-draw 1.6s cubic-bezier(.65,0,.25,1) .3s forwards}
 .cl .ch-node{animation:bv-pop .5s cubic-bezier(.2,.9,.2,1.4) both}
 .cl .ch-node:nth-of-type(1){animation-delay:.4s}.cl .ch-node:nth-of-type(2){animation-delay:.65s}.cl .ch-node:nth-of-type(3){animation-delay:.9s}.cl .ch-node:nth-of-type(4){animation-delay:1.15s}.cl .ch-node:nth-of-type(5){animation-delay:1.4s}
 .cl .ch-chat{animation:bv-rise .8s cubic-bezier(.2,.7,.2,1) 1.2s both}
}

/* ---------- Leiste unter dem Hero ---------- */
.cl .cl-strip{padding:0 0 10px;margin-top:-18px;position:relative;z-index:2}
.cl .cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.cl .cs-item{display:flex;gap:12px;align-items:flex-start;padding:6px 8px}
.cl .cs-item>svg{flex:none;width:36px;height:36px;padding:8px;border-radius:11px;background:#fff0f6;color:#c7356f}
.cl .cs-item b{display:block;font-size:.92rem;color:var(--ink)}
.cl .cs-item span{font-size:.82rem;color:var(--muted)}

/* ---------- Gästereise interaktiv ---------- */
.cl .reise{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start}
.cl .rt-list{display:grid;gap:8px;position:relative}
.cl .rt-list:before{content:"";position:absolute;left:27px;top:24px;bottom:24px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--cl1),var(--cl2),var(--cl3));opacity:.35}
.cl .rt{position:relative;display:flex;align-items:center;gap:12px;border:1px solid transparent;background:none;border-radius:16px;padding:8px 12px 8px 8px;text-align:left;cursor:pointer;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.cl .rt i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #f1d4e2;color:#c7356f;z-index:1;transition:all .3s ease}
.cl .rt svg{width:19px;height:19px}
.cl .rt span{display:grid;font-weight:750;color:var(--ink2);font-size:.95rem}
.cl .rt em{font-style:normal;font-size:.68rem;font-weight:800;color:var(--muted);letter-spacing:.06em}
.cl .rt:hover{background:#fff}
.cl .rt[aria-selected="true"]{background:#fff;border-color:#f2c6d6;box-shadow:0 12px 28px rgba(214,52,135,.12)}
.cl .rt[aria-selected="true"] i{background:var(--brand);color:#fff;border-color:transparent}
.cl .rp-wrap{position:relative}
.cl .rp{display:none;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
.cl .rp.is-on{display:grid;animation:bv-rise .45s ease}
.cl .rp-phone{background:#0d2438;border-radius:34px;padding:9px;box-shadow:0 30px 60px rgba(13,36,56,.25);max-width:340px;width:100%;justify-self:center}
.cl .rpp-top{display:flex;align-items:center;gap:8px;padding:12px 14px;color:#fff}
.cl .rpp-top img{width:14px;height:20px;object-fit:contain}
.cl .rpp-top b{font:400 1rem/1 var(--serif)}
.cl .rpp-top span{margin-left:auto;font-size:.68rem;color:rgba(255,255,255,.6)}
.cl .rpp-body{background:linear-gradient(180deg,#fff,#fbf6fa);border-radius:26px;padding:16px 14px;display:grid;gap:10px;min-height:300px;align-content:start}
.cl .m-g{margin:0;justify-self:end;max-width:88%;background:var(--navy);color:#fff;padding:10px 13px;border-radius:15px 15px 4px 15px;font-size:.85rem;line-height:1.5}
.cl .m-c{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;max-width:94%}
.cl .m-av{width:28px;height:28px;border-radius:50%;background:#fff0f6;display:grid;place-items:center}
.cl .m-av img{width:11px;height:16px;object-fit:contain}
.cl .m-c p{margin:0;background:#fff;border:1px solid #f1dde7;padding:10px 12px;border-radius:15px 15px 15px 4px;font-size:.85rem;line-height:1.5;color:var(--ink2)}
.cl .m-chips{display:flex;flex-wrap:wrap;gap:6px;margin-left:36px}
.cl .m-chips span{font-size:.74rem;font-weight:800;padding:6px 11px;border-radius:999px;background:var(--brand);color:#fff}
.cl .m-chips span+span{background:#fff;color:#c7356f;border:1px solid #f2c6d6}
.cl .rp.is-on .m-g{animation:bv-rise .4s ease .05s both}.cl .rp.is-on .m-c{animation:bv-rise .4s ease .45s both}.cl .rp.is-on .m-chips{animation:bv-rise .4s ease .8s both}
.cl .rp-ben{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);border-top:4px solid #e72fa0}
.cl .rp-ben h3{font-size:1.5rem;margin:4px 0 10px}
.cl .rp-ben p:last-child{color:var(--muted);margin:0}
.cl .cl-note{margin-top:18px}

/* ---------- Warum ---------- */
.cl .why-grid .icon{background:#fff0f6;color:#c7356f}

/* ---------- Wissen ---------- */
.cl .cl-know{align-items:center}
.cl .cl-limits li:before{content:"✕";color:#c7356f}
.cl .kn{display:grid;grid-template-columns:1fr 60px 150px;align-items:center;gap:0}
.cl .kn-srcs{display:grid;gap:10px}
.cl .kn-src{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 20px rgba(22,55,79,.05)}
.cl .kn-src i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eaf4fa;color:var(--blue)}
.cl .kn-src svg{width:17px;height:17px}
.cl .kn-src b{display:block;font-size:.88rem;color:var(--ink)}
.cl .kn-src span{font-size:.76rem;color:var(--muted)}
.cl .kn-flow{display:grid;gap:44px;justify-items:center}
.cl .kn-flow i{width:100%;height:2px;background:linear-gradient(90deg,#cfe0eb,#e72fa0);position:relative}
.cl .kn-flow i:after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid #e72fa0;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cl .kn-core{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:2px;text-align:center;background:var(--navy);color:#fff;box-shadow:0 0 0 10px #fde7f1,0 20px 40px rgba(13,36,56,.25)}
.cl .kn-core img{width:26px;height:36px;object-fit:contain}
.cl .kn-core b{font:400 1.2rem/1 var(--serif)}
.cl .kn-core span{font-size:.7rem;color:rgba(255,255,255,.7);max-width:110px}

/* ---------- Was Sie tun ---------- */
.cl .todo{position:relative}
.cl .td-n{position:absolute;right:20px;top:16px;font:400 2.2rem/1 var(--serif);color:#f3d6e3}
.cl .todo .icon{background:#fff0f6;color:#c7356f}

/* ---------- Abgrenzung ---------- */
.cl .vs{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch}
.cl .vs-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column}
.cl .vs-card.is-here{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--brand) border-box;box-shadow:0 20px 44px rgba(214,52,135,.14)}
.cl .vs-here{position:absolute;right:20px;top:-12px;font-size:.7rem;font-weight:800;color:#fff;background:var(--brand);padding:4px 10px;border-radius:999px}
.cl .vs-head{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.cl .vs-head i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff0f6}
.cl .vs-head i img{width:17px;height:24px;object-fit:contain}
.cl .vs-head .dl-i{background:#e6f6f7;color:#0e8a96}
.cl .vs-head .dl-i svg{width:22px;height:22px}
.cl .vs-head h3{margin:0;font-size:1.5rem}
.cl .vs-head span{font-size:.8rem;color:var(--muted)}
.cl .vs dl{display:grid;grid-template-columns:110px 1fr;gap:10px 14px;margin:0}
.cl .vs dt{font-size:.74rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.cl .vs dd{margin:0;font-size:.92rem;color:var(--ink2)}
.cl .vs-dl{opacity:.92}
.cl .vs-dl .link{margin-top:auto;padding-top:16px;color:#0e8a96}

/* ---------- Technik ---------- */
.cl .cl-tech{background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 24px}
.cl .cl-tech summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none;padding:16px 0}
.cl .cl-tech summary::-webkit-details-marker{display:none}
.cl .cl-tech summary .eyebrow{margin:0 0 4px}
.cl .cl-tech summary b{font:400 1.25rem/1.3 var(--serif);color:var(--ink)}
.cl .cl-tech summary i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--soft2);font-style:normal;font-weight:800;transition:transform .3s ease}
.cl .cl-tech[open] summary i{transform:rotate(45deg)}
.cl .ct-body{padding:4px 0 22px}
.cl .ct-body>p{color:var(--muted);max-width:820px}
.cl .ct-body .grid-4{margin:16px 0}
.cl .ct-body .card{border-top:3px solid #f1d4e2}
.cl .ct-note{font-size:.86rem;color:var(--muted);margin:0}

@media(max-width:980px){
 .cl .ch-chat{margin:0 auto}
 .cl .reise{grid-template-columns:1fr}
 .cl .rt-list{grid-template-columns:repeat(5,1fr);gap:6px}
 .cl .rt-list:before{left:24px;right:24px;top:27px;bottom:auto;width:auto;height:3px;background:linear-gradient(90deg,var(--cl1),var(--cl2),var(--cl3))}
 .cl .rt{flex-direction:column;padding:6px 2px;text-align:center;gap:6px}
 .cl .rt span{font-size:.72rem}
 .cl .rt em{display:none}
 .cl .rp{grid-template-columns:1fr}
 .cl .cl-know{grid-template-columns:1fr}
 .cl .vs{grid-template-columns:1fr}
}
@media(max-width:640px){
 .cl .ch-stage{aspect-ratio:auto;height:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px 0}
 .cl .ch-svg,.cl .ch-dot{display:none}
 .cl .ch-node{position:relative;left:auto!important;top:auto!important;translate:none}
 .cl .ch-node i{width:42px;height:42px}
 .cl .ch-node b{font-size:.6rem;white-space:normal;text-align:center;padding:0;background:none}
 .cl .cs-grid{grid-template-columns:1fr;gap:4px}
 .cl .rt-list{grid-template-columns:repeat(5,1fr)}
 .cl .rt i{width:38px;height:38px}
 .cl .rt span{font-size:.62rem;line-height:1.2}
 .cl .kn{grid-template-columns:1fr;gap:14px;justify-items:center}
 .cl .kn-srcs{width:100%}
 .cl .kn-flow{display:none}
 .cl .vs dl{grid-template-columns:1fr;gap:2px 0}
 .cl .vs dd{margin-bottom:8px}
 .cl .cl-tech{padding:4px 16px}
}