/* =========================================================
   booyage.info – Gemeinsame Bild-Bausteine für Unterseiten
   Wird auf jeder Unterseite mit <body class="bv"> geladen.
   Grundsatz: Desktop-Hover ist nur Zugabe – mobil laufen alle
   Effekte beim Scrollen oder per Tippen.
   ========================================================= */

/* ---------- Basis ---------- */
.bv :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.bv .btn{transition:transform .18s ease,box-shadow .18s ease}
.bv .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(214,52,135,.26)}
.bv .site-header{transition:box-shadow .25s ease}
.bv .site-header.is-scrolled{box-shadow:0 8px 28px rgba(22,55,79,.07)}
.bv .scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(var(--sp,0));z-index:2}
.bv .icon svg,.bv .way-ic svg,.bv .ls-ic svg,.bv .lh-ic svg,.bv .bt-node svg,.bv .bt-mnode svg,.bv .hub-sat svg,.bv .dock-node svg,.bv .pm-btn svg,.bv .tile svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv .icon svg{width:22px;height:22px}
.bv .icon-card .icon{background:#eaf4fa;color:var(--blue)}

/* Überschriften Wort für Wort, gestaffeltes Auftauchen */
.bv .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.bv .w>span{display:inline-block}
.js-anim .bv [data-rise]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i,0) * 60ms)}
.js-anim .bv [data-rise].is-in{opacity:1;transform:none}

/* Spotlight (nur Maus) */
.bv .spot{position:relative;overflow:hidden}
.bv .spot:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(45,121,168,.09),transparent 45%)}
.bv .spot:hover:after{opacity:1}

/* ---------- Bild-Hero für Unterseiten ---------- */
.bv .page-hero.vh{padding:70px 0 64px;overflow:hidden;position:relative}
.bv .page-hero.vh .wrap{max-width:none}
.bv .vh-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center}
.bv .vh-copy h1{font-size:clamp(2.25rem,3.6vw,3.35rem)}
.bv .split p+p{margin-top:14px}
.bv .vh-copy h1 em{font-style:normal;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:no-preference){
 .bv .vh-copy>*{animation:bv-rise .9s cubic-bezier(.2,.7,.2,1) both}
 .bv .vh-copy>:nth-child(2){animation-delay:.08s}.bv .vh-copy>:nth-child(3){animation-delay:.16s}.bv .vh-copy>:nth-child(4){animation-delay:.28s}.bv .vh-copy>:nth-child(5){animation-delay:.4s}.bv .vh-copy>:nth-child(6){animation-delay:.52s}
}
@keyframes bv-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bv-draw{to{stroke-dashoffset:0}}
@keyframes bv-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes bv-spin{to{transform:rotate(360deg)}}

/* ---------- Drei Wege zum Gast (lanes) ---------- */
.bv .lanes{position:relative;width:100%;aspect-ratio:520/380}
.bv .lanes-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bv .ln{fill:none;stroke-linecap:round}
.bv .ln-web{stroke:#9fb6c8;stroke-width:3}
.bv .ln-ota{stroke:#c3d2de;stroke-width:3;stroke-dasharray:2 9}
.bv .lanes-msvg{display:none}
.bv .ln-mboo{stroke:url(#lg-m);stroke-width:6}
.bv .lanes-msvg .ln{vector-effect:non-scaling-stroke}
.bv .ln-boo{stroke:url(#lg-b);stroke-width:8;filter:drop-shadow(0 6px 10px rgba(231,47,160,.25))}
.bv .ld-web{fill:#5f7f98}.bv .ld-ota{fill:#a9bccb}.bv .ld-boo{fill:#fff;stroke:#e72fa0;stroke-width:3}
.bv .lane-src,.bv .lane-hotel{position:absolute;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 26px rgba(22,55,79,.08);white-space:nowrap}
.bv .lane-src{translate:-100% -50%}
.bv .lane-src b,.bv .lane-hotel b{font:400 1rem/1.1 var(--serif);color:var(--ink)}
.bv .ls-ic,.bv .lh-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--soft2);color:var(--blue);flex:none}
.bv .ls-ic svg,.bv .lh-ic svg{width:19px;height:19px}
.bv .s-web{left:31%;top:18.4%}.bv .s-ota{left:31%;top:50%}.bv .s-boo{left:31%;top:81.6%;border-color:#f2c6d6}
.bv .s-boo .ls-ic{background:var(--brand);color:#fff}
.bv .lane-hotel{left:86%;top:50%;translate:-30% -50%;flex-direction:column;gap:6px;padding:14px 14px 10px;border-radius:18px}
.bv .lh-ic{width:52px;height:52px;border-radius:14px;background:var(--navy);color:#fff}
.bv .lh-ic svg{width:26px;height:26px}
.bv .lane-hotel b{font-size:.9rem}
.bv .lane-badge{position:absolute;left:62%;top:95%;translate:-50% -50%;background:var(--ink);color:#fff;font-size:.78rem;font-weight:750;padding:7px 12px;border-radius:999px;box-shadow:0 10px 22px rgba(13,36,56,.25);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
 .bv .lanes .lane-src,.bv .lanes .lane-hotel{animation:bv-pop .6s cubic-bezier(.2,.9,.2,1.2) both}
 .bv .lanes .s-web{animation-delay:.2s}.bv .lanes .s-ota{animation-delay:.35s}.bv .lanes .lane-hotel{animation-delay:.5s}.bv .lanes .s-boo{animation-delay:1.1s}
 .bv .ln-web,.bv .ln-ota{animation:bv-rise .6s ease .4s both}
 .bv .ln-boo{stroke-dasharray:1;stroke-dashoffset:1;animation:bv-draw 1.3s cubic-bezier(.65,0,.25,1) 1.2s forwards}
 .bv .ld-boo{opacity:0;animation:bv-rise .1s linear 2.2s forwards}
 .bv .lane-badge{animation:bv-pop .6s cubic-bezier(.2,.9,.2,1.4) 2.3s both}
}

/* ---------- Karten mit Icon / drei Wege ---------- */
.bv .ways .way{position:relative}
.bv .way-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--soft2);color:var(--blue);margin-bottom:16px}
.bv .way-ic svg{width:23px;height:23px}
.bv .way-ic img{width:20px;height:28px;object-fit:contain}
.bv .way-boo{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--brand) border-box;box-shadow:0 18px 40px rgba(214,52,135,.12)}
.bv .way-boo .way-ic{background:#fff0f6}

/* Mischungsbalken */
.bv .mix-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.bv .mix-bar{display:flex;height:22px;border-radius:12px;overflow:hidden;gap:3px}
.bv .mix-bar span{height:100%;transition:flex-basis 1.2s cubic-bezier(.4,0,.2,1);flex:0 0 var(--w,33%)}
.bv .m-web{background:#7f9bb1;--w:48%}.bv .m-ota{background:#c3d2de;--w:34%}.bv .m-boo{background:var(--brand);--w:18%}
.bv .mix-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:.8rem;color:var(--ink2)}
.bv .mix-legend span{display:inline-flex;align-items:center;gap:6px}
.bv .mix-legend span:before{content:"";width:10px;height:10px;border-radius:3px}
.bv .k-web:before{background:#7f9bb1}.bv .k-ota:before{background:#c3d2de}.bv .k-boo:before{background:var(--brand)}
.bv .mix-legend em{flex-basis:100%;font-style:normal;font-size:.72rem;color:var(--muted)}

/* ---------- Leistungskarten mit Bild ---------- */
.bv .offer .offer-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.bv .offer-visual{height:270px;position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(180deg,#f3f8fb,#fbfdfe)}
.bv .o-conc .offer-visual{background:radial-gradient(circle at 50% 110%,#ffe2d3 0%,rgba(255,226,211,0) 60%),linear-gradient(180deg,#fff7f2,#fffaf7)}
.bv .o-pass .offer-visual{background:radial-gradient(circle at 50% 60%,#e7defc 0%,rgba(231,222,252,0) 62%),linear-gradient(180deg,#f8f5ff,#fbf9ff)}
.bv .offer-body{padding:24px 25px 26px;border-top:1px solid rgba(0,0,0,.05)}
.bv .offer-body .meta{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-weight:800;margin-bottom:8px}
.bv .offer-body .checklist{margin-top:14px}
.bv .offer-body .checklist li{padding:9px 0 9px 26px;font-size:.9rem}
/* Profil-Vorschau */
.bv .profile-mock{width:min(270px,84%);background:#fff;border-radius:16px;box-shadow:0 22px 46px rgba(22,55,79,.16);overflow:hidden;border:1px solid var(--line)}
.bv .pm-bar{display:flex;gap:5px;padding:8px 10px;background:#f2f6f9}
.bv .pm-bar i{width:8px;height:8px;border-radius:50%;background:#d3dee7}
.bv .pm-img{height:96px;background:url('hero-rheinhessen.webp') 60% 55%/cover}
.bv .pm-body{padding:12px 14px 14px;display:grid;gap:8px}
.bv .pm-line{height:9px;border-radius:5px;background:#e6eef4}
.bv .pm-line.w70{width:70%;height:11px;background:#d5e2eb}.bv .pm-line.w45{width:45%}
.bv .pm-tags{display:flex;gap:5px;flex-wrap:wrap}
.bv .pm-tags span{font-size:.66rem;font-weight:700;color:var(--blue2);background:var(--soft2);padding:3px 7px;border-radius:6px}
.bv .pm-btn{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;color:#fff;background:var(--brand);padding:7px 12px;border-radius:9px;box-shadow:0 8px 16px rgba(214,52,135,.25)}
.bv .pm-btn svg{width:14px;height:14px}

/* Smartphone */
.bv .phone{position:absolute;left:50%;top:30px;width:216px;height:420px;margin-left:-108px;border-radius:36px;background:#0d2438;padding:9px;box-shadow:0 30px 60px rgba(13,36,56,.28),inset 0 0 0 2px #2a4a66}
.bv .phone-notch{position:absolute;left:50%;top:15px;width:66px;height:17px;margin-left:-33px;border-radius:12px;background:#0d2438;z-index:2}
.bv .phone-screen{height:100%;border-radius:28px;background:linear-gradient(180deg,#fff,#f6f9fc);padding:40px 12px 12px;overflow:hidden}
.bv .phone-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.bv .phone-top img{width:15px;height:21px;object-fit:contain}
.bv .phone-top span{font:400 1.04rem/1 var(--serif);color:var(--ink)}
.bv .phone-tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.bv .tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 9px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--blue);transition:background .35s ease,color .35s ease,transform .35s cubic-bezier(.2,.9,.2,1.4),box-shadow .35s ease}
.bv .tile svg{width:18px;height:18px}
.bv .tile b{font-size:.72rem;font-weight:700;color:var(--ink2)}
.bv .tile.is-tap{background:var(--brand);color:#fff;transform:scale(1.05);box-shadow:0 10px 22px rgba(214,52,135,.3)}
.bv .tile.is-tap b{color:#fff}
.bv .tile.is-tap:after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.55);animation:bv-tap .6s ease-out forwards}
@keyframes bv-tap{from{transform:scale(.2);opacity:1}to{transform:scale(2.4);opacity:0}}

/* HotelPass-Karte */
.bv .pass{width:min(300px,84%);aspect-ratio:1.586;border:0;padding:0;background:none;cursor:pointer;perspective:1200px;-webkit-tap-highlight-color:transparent}
.bv .pass-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.25,.4,1)}
.bv .pass.is-flipped .pass-inner{transform:rotateY(180deg)}
.bv .pass-face{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;text-align:left;box-shadow:0 26px 50px rgba(64,36,140,.25)}
.bv .pass-front{background:var(--navy);color:#fff;padding:20px}
.bv .pass-front:before{content:"";position:absolute;width:240px;height:240px;right:-80px;top:-100px;border-radius:50%;background:var(--brand);filter:blur(30px);opacity:.55}
.bv .pass-front img{position:relative;width:24px;height:34px;object-fit:contain}
.bv .pass-name{position:absolute;left:20px;bottom:40px;font:400 1.6rem/1 var(--serif)}
.bv .pass-sub{position:absolute;left:20px;bottom:20px;font-size:.7rem;letter-spacing:.04em;color:rgba(255,255,255,.65)}
.bv .pass-chip{position:absolute;right:22px;bottom:24px;width:40px;height:30px;border-radius:7px;background:linear-gradient(135deg,#f6d58a,#c99a3c)}
.bv .pass-back{transform:rotateY(180deg);background:#fff;border:1px solid #e6defa;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;gap:8px;color:var(--ink)}
.bv .pass-backhead{font:400 1.1rem/1 var(--serif);margin-bottom:3px}
.bv .tier{display:grid;grid-template-columns:58px 1fr 40px;align-items:center;gap:9px;font-size:.76rem}
.bv .tier i{height:8px;border-radius:8px;background:#efeafc;position:relative;overflow:hidden}
.bv .tier i:after{content:"";position:absolute;inset:0;width:var(--w);border-radius:8px;background:linear-gradient(90deg,#9c86f2,#6248e8)}
.bv .tier b{text-align:right}

/* ---------- Band mit Stationen (beliebig viele) ---------- */
.bv .band{position:relative}
.bv .bt-track{position:relative;height:48px;margin-bottom:18px}
.bv .bt-line{position:absolute;left:0;right:0;top:17px;height:14px;border-radius:8px;background:repeating-linear-gradient(135deg,#dfe7ee 0 10px,#d3dee7 10px 20px);overflow:hidden}
.bv .bt-fill{position:absolute;inset:0;background:var(--brand);transform-origin:left;transform:scaleX(var(--p,0));border-radius:8px}
.bv .bt-nodes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:10px}
.bv .bt-node,.bv .bt-mnode{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid #d6e5ef;display:grid;place-items:center;color:#9bb1c2;transition:border-color .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease}
.bv .bt-node{justify-self:center}
.bv .bt-node svg,.bv .bt-mnode svg{width:20px;height:20px}
.bv .bt-node.is-on,.bv .is-on>.bt-mnode{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 6px rgba(45,121,168,.1);transform:scale(1.04)}
.bv .bt-steps>*{position:relative;transition:border-color .35s ease,box-shadow .35s ease}
.bv .bt-steps>*:before{content:"";position:absolute;left:50%;top:-19px;height:18px;border-left:2px solid #d6e5ef;transition:border-color .35s ease}
.bv .bt-steps>.is-on{border-color:#b9d6e8;box-shadow:0 14px 34px rgba(22,55,79,.07)}
.bv .bt-steps>.is-on:before{border-left-color:var(--blue)}
.bv .bt-steps .flow-item:after{display:none}
.bv .flow.bt-steps{grid-template-columns:repeat(var(--n),1fr)}
.bv .bt-mnode,.bv .bt-vrail{display:none}

/* Datenquelle */
.bv .live-panel{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.bv .live{display:grid;gap:10px}
.bv .live-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:.82rem;font-weight:700}
.bv .lv-src{padding:8px 11px;border-radius:10px;background:var(--soft2);color:var(--ink2)}
.bv .live-row i{height:2px;background:repeating-linear-gradient(90deg,#b9cddb 0 6px,transparent 6px 11px);position:relative}
.bv .live-row.ok i{background:linear-gradient(90deg,#2d79a8,#2f9a62)}
.bv .lv-out{padding:8px 11px;border-radius:10px}
.bv .ok .lv-out{background:#ecf7f1;color:#21613f}
.bv .no .lv-out{background:#fff4e6;color:#8a5d23}

/* ---------- Profil-Ring & Abhaken ---------- */
.bv .pring{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 16px 10px 10px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 22px rgba(22,55,79,.06)}
.bv .pring svg{width:44px;height:44px;transform:rotate(-90deg)}
.bv .pring circle{fill:none;stroke:#e3ecf2;stroke-width:4}
.bv .pring .pr-fill{stroke:url(#none);stroke:#e72fa0;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--pct,0));transition:stroke-dashoffset .5s ease}
.bv .pring span{font:400 1.4rem/1 var(--serif);color:var(--ink)}
.bv .pring em{font-style:normal;font-size:.78rem;color:var(--muted)}

/* ---------- Informations-Hub ---------- */
.bv .hub{position:relative;aspect-ratio:300/200;margin:-6px -6px 18px}
.bv .hub-svg{position:absolute;inset:0;width:100%;height:100%}
.bv .hub-svg path{fill:none;stroke:#cfe0eb;stroke-width:2;stroke-dasharray:3 6}
.bv .hub-core{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(214,52,135,.2),0 0 0 8px rgba(255,255,255,.7);z-index:2}
.bv .hub-core img{width:26px;height:37px;object-fit:contain}
.bv .hub-sat{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;z-index:2}
.bv .hub-sat i{width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);box-shadow:0 8px 18px rgba(22,55,79,.08);transition:background .3s ease,color .3s ease}
.bv .hub-sat svg{width:20px;height:20px}
.bv .hub-sat b{font-size:.68rem;font-weight:750;color:var(--ink2);white-space:nowrap}
.bv .hs0{left:20%;top:20%}.bv .hs1{left:80%;top:20%}.bv .hs2{left:20%;top:80%}.bv .hs3{left:80%;top:80%}
.bv .hub-dot{fill:#e72fa0}
.bv .hub-sat.is-sync i{background:var(--brand);color:#fff;border-color:transparent}

/* ---------- Andocken ---------- */
.bv .dock{position:relative;margin:4px 0 26px}
.bv .dock-sys{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:16px 0;border-radius:16px;background:repeating-linear-gradient(135deg,#eef3f7 0 10px,#e8eff4 10px 20px);border:1px solid var(--line)}
.bv .dock-label{position:absolute;left:16px;top:-11px;font-size:.72rem;font-weight:750;color:var(--muted);background:var(--soft2);padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
.bv .section.sky .dock-label{background:#f1f8fb}
.bv .dock-node{justify-self:center;width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);box-shadow:0 8px 20px rgba(22,55,79,.07)}
.bv .dock-node svg{width:24px;height:24px}
.bv .dock-plugs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;height:30px}
.bv .dock-plugs i{justify-self:center;width:3px;height:100%;background:linear-gradient(180deg,#b9d6e8,#e72fa0);border-radius:3px;transform-origin:top;transition:transform .5s cubic-bezier(.2,.9,.2,1);}
.bv .dock-boo{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:16px;background:var(--brand);color:#fff;font-weight:800;box-shadow:0 16px 34px rgba(214,52,135,.25);transition:transform 1s cubic-bezier(.3,1.3,.4,1),opacity .5s ease}
.bv .dock-boo img{width:18px;height:26px;object-fit:contain;filter:brightness(0) invert(1)}
.bv .dock-plugs i:nth-child(2){--i:1}.bv .dock-plugs i:nth-child(3){--i:2}.bv .dock-plugs i:nth-child(4){--i:3}
.bv .dock-cards .card{position:relative}

/* ---------- Schaltpult ---------- */
.bv .ctrl{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.bv .ctrl-head{display:flex;align-items:center;gap:10px;padding:2px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.bv .ctrl-head img{width:18px;height:26px;object-fit:contain}
.bv .ctrl-head span{font:400 1.15rem/1 var(--serif);color:var(--ink)}
.bv .sw{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;border:0;background:none;padding:11px 4px;font-size:.88rem;color:var(--ink2);cursor:pointer;border-bottom:1px solid #eef3f7;text-align:left}
.bv .sw:last-child{border-bottom:0}
.bv .sw i{position:relative;width:44px;height:26px;border-radius:26px;background:#d6e2ea;flex:none;transition:background .3s ease}
.bv .sw i:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.bv .sw.is-on i{background:var(--brand)}
.bv .sw.is-on i:after{transform:translateX(18px)}
.bv .ctrl-stats{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);padding:6px 8px}
.bv .ctrl-stats .metric{border-bottom:0;padding:14px;border-left:1px solid #d8e6ee}
.bv .ctrl-stats .metric:first-child{border-left:0}
.bv .ctrl-stats .metric strong{font-size:1.4rem;margin-bottom:6px}
.bv .ctrl-stats .metric span{display:block;line-height:1.4}

/* ---------- Kostenverlauf ---------- */
.bv .costchart{position:relative;height:280px;margin:0 0 22px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.bv .costchart svg{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);overflow:visible}
.bv .costchart path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.bv .cc-grid{stroke:#d6e2ea;stroke-width:1.5}
.bv .cc-pct{stroke:#9fb6c8;stroke-width:3;stroke-dasharray:6 6}
.bv .cc-flat{stroke:url(#cc-g);stroke-width:5}
.js-anim .bv .costchart .cc-flat{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .2s}
.js-anim .bv .costchart.is-in .cc-flat{stroke-dashoffset:0}
.js-anim .bv .costchart .cc-pct{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.6,0,.2,1) .5s}
.js-anim .bv .costchart.is-in .cc-pct{clip-path:inset(0 0 0 0)}
.bv .cc-l{position:absolute;font-size:.8rem;font-weight:750;padding:5px 10px;border-radius:999px;white-space:nowrap}
.bv .l-pct{right:28px;top:22px;background:var(--soft2);color:var(--ink2)}
.bv .l-flat{right:28px;top:calc(20px + (100% - 40px) * .58 - 34px);background:var(--ink);color:#fff}
.bv .cc-ax{position:absolute;font-size:.72rem;color:var(--muted)}
.bv .ax-x{right:24px;bottom:4px}.bv .ax-y{left:24px;top:4px}
.js-anim .bv .cc-l{opacity:0;transform:translateY(8px);transition:opacity .5s ease 1.8s,transform .5s ease 1.8s}
.js-anim .bv .costchart.is-in .cc-l{opacity:1;transform:none}
.bv .cta-price{border:2px solid transparent;background:linear-gradient(135deg,#f2f9fc,#fff6f0) padding-box,var(--brand) border-box}

/* ---------- Prüfpunkte ---------- */
.bv .fit-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.bv .fit-chips{display:flex;flex-wrap:wrap;gap:8px}
.bv .fit-chips span{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;color:var(--ink2);background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(22,55,79,.05)}
.bv .fit-chips span:before{content:"✓";width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:var(--soft2);color:var(--blue)}

/* ---------- FAQ & Schluss ---------- */
.bv .sec-faq .faq{max-width:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px 26px}
.bv .sec-faq .faq details:last-child{border-bottom:0}
.bv .faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center}
.bv .faq summary:after{float:none;flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft2);display:grid;place-items:center;line-height:1;transition:background .3s ease,color .3s ease}
.bv .faq details[open] summary:after{background:var(--brand);color:#fff}
.bv .faq details[open] p{animation:bv-rise .35s ease}
.bv .cta-final{position:relative;overflow:hidden;background:var(--navy);border-color:var(--navy);color:#fff}
.bv .cta-final>div{position:relative;z-index:1}
.bv .cta-final h2{color:#fff}
.bv .cta-final p{color:rgba(255,255,255,.72)}
.bv .cta-final .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.bv .cta-ribbon{position:absolute;right:-40px;top:50%;width:250px;transform:translateY(-50%) rotate(-8deg);opacity:.35;overflow:visible;pointer-events:none}
.bv .cta-ribbon path{fill:none;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   Tablet & Handy
   ========================================================= */
@media(max-width:980px){
 .bv .vh-grid{grid-template-columns:1fr;gap:34px}
 .bv .vh-visual{max-width:560px;width:100%;margin:0 auto}
 .bv .mix-panel,.bv .live-panel,.bv .fit-panel{grid-template-columns:1fr;gap:22px}
 .bv .offer{grid-template-columns:1fr}
 .bv .offer .offer-card{display:grid;grid-template-columns:1fr 1fr}
 .bv .offer-visual{height:auto;min-height:280px}
 .bv .offer-body{border-top:0;border-left:1px solid rgba(0,0,0,.05)}
 .bv .cta-ribbon{display:none}
}
@media(max-width:820px){
 /* Band wird senkrecht */
 .bv .bt-track{display:none}
 .bv .band{padding-left:56px}
 .bv .bt-vrail{display:block;position:absolute;left:19px;top:10px;bottom:10px;width:10px;border-radius:8px;background:repeating-linear-gradient(135deg,#dfe7ee 0 8px,#d3dee7 8px 16px);overflow:hidden}
 .bv .bt-vrail span{position:absolute;inset:0;background:linear-gradient(180deg,#ffb23f,#ff5b75 34%,#e72fa0 63%,#6248e8);transform-origin:top;transform:scaleY(var(--p,0))}
 .bv .flow.bt-steps{grid-template-columns:1fr;gap:14px}
 .bv .bt-steps>*:before{display:none}
 .bv .bt-mnode{display:grid;position:absolute;left:-58px;top:14px;z-index:1}
 /* Andocken kompakt */
 .bv .dock-sys,.bv .dock-plugs{gap:8px}
 .bv .dock-node{width:44px;height:44px}
}
@media(max-width:640px){
 .bv .page-hero.vh{padding:48px 0 44px}
 .bv .vh-copy h1{font-size:2.15rem}
 /* Wege: auf dem Handy von oben nach unten zusammenlaufend */
 .bv .lanes{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;justify-items:center}
 .bv .lanes-svg{display:none}
 .bv .lanes-msvg{display:block;grid-column:1/-1;width:100%;height:64px;overflow:visible}
 .bv .lane-src,.bv .lane-hotel,.bv .lane-badge{position:relative;left:auto;top:auto;translate:none}
 .bv .lane-src{flex-direction:column;gap:6px;padding:10px 6px;width:100%;text-align:center;white-space:normal}
 .bv .lane-src b{font-size:.82rem}
 .bv .s-web{order:1}.bv .s-ota{order:2}.bv .s-boo{order:3}.bv .lanes-msvg{order:4}.bv .lane-hotel{order:5;grid-column:1/-1}.bv .lane-badge{order:6;grid-column:1/-1}
 .bv .lane-hotel{flex-direction:row;padding:10px 16px 10px 10px}
 .bv .lh-ic{width:40px;height:40px}
 .bv .offer .offer-card{grid-template-columns:1fr}
 .bv .offer-body{border-left:0;border-top:1px solid rgba(0,0,0,.05)}
 .bv .offer-visual{min-height:260px}
 .bv .ctrl-stats{grid-template-columns:1fr;padding:6px 18px}
 .bv .ctrl-stats .metric{border-left:0;border-top:1px solid #d8e6ee;padding:14px 0}
 .bv .ctrl-stats .metric:first-child{border-top:0}
 .bv .costchart{height:220px}
 .bv .l-pct{right:14px;top:16px}.bv .l-flat{right:14px}
 .bv .sec-faq .faq{padding:4px 18px}
 .bv .hub-sat b{font-size:.62rem}
 .bv .hub-sat i{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
 .bv *{transition:none!important;animation:none!important}
 .bv .bt-fill{transform:scaleX(1)}.bv .bt-vrail span{transform:scaleY(1)}
}

/* ---------- Ruhige Darstellung (Regel: Wow nur im Header + max. 2 Stellen) ---------- */
.bv .tile.is-pick{background:var(--brand);color:#fff;box-shadow:0 10px 22px rgba(214,52,135,.3)}
.bv .tile.is-pick b{color:#fff}
.bv .pass-flip{position:absolute;right:-12px;top:-12px;z-index:3;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #e6defa;display:grid;place-items:center;color:#6248e8;box-shadow:0 6px 16px rgba(64,36,140,.18);transition:transform .4s ease}
.bv .pass-flip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv .pass{position:relative}
.bv .pass:hover .pass-flip{transform:rotate(180deg)}
.bv .pass.is-flipped .pass-flip{transform:rotate(180deg)}

/* =========================================================
   Concierge-Bausteine
   ========================================================= */

/* ---------- Header: verteiltes Wissen → Gästemappe ---------- */
.bv .gather{position:relative;width:100%;height:calc(440px * var(--s,1))}
.bv .g-stage{position:absolute;left:0;top:0;width:520px;height:440px;transform:scale(var(--s,1));transform-origin:top left}
.bv .g-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bv .g-line{fill:none;stroke:#c9d9e5;stroke-width:2;stroke-dasharray:4 6}
.bv .g-dot{fill:#e72fa0;filter:drop-shadow(0 0 4px rgba(231,47,160,.6))}
.bv .g-src{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:.84rem;font-weight:700;color:var(--ink2);box-shadow:0 10px 24px rgba(22,55,79,.08);white-space:nowrap;translate:-50% -50%}
.bv .g-src i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--soft2);color:var(--blue)}
.bv .g-src svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv .g-src:nth-of-type(1){rotate:-4deg}.bv .g-src:nth-of-type(2){rotate:3deg}.bv .g-src:nth-of-type(3){rotate:-2deg}.bv .g-src:nth-of-type(4){rotate:4deg}.bv .g-src:nth-of-type(5){rotate:-3deg}
.bv .g-phone{left:300px;top:24px;margin-left:-112px;width:224px;height:400px;z-index:1}
.bv .g-src{z-index:2}
.bv .g-phone .phone-tiles{gap:6px}
.bv .g-phone .tile{padding:9px 8px;min-width:0}
.bv .g-phone .tile b{font-size:.68rem;overflow:hidden;text-overflow:ellipsis}
.bv .phone-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (prefers-reduced-motion:no-preference){
 .bv .g-phone{animation:bv-rise .9s cubic-bezier(.2,.7,.2,1) .1s both}
 .bv .g-src{animation:g-in .7s cubic-bezier(.2,.9,.2,1.2) both;animation-delay:calc(.35s + var(--i) * .12s)}
 .bv .g-line{stroke-dashoffset:1;animation:g-line 1s ease both;animation-delay:calc(1s + var(--i) * .2s)}
 .bv .g-phone .tile{animation:g-tile .5s ease both;animation-delay:calc(1.6s + var(--i) * .14s)}
}
@keyframes g-in{from{opacity:0;transform:scale(.7) translateY(12px)}to{opacity:1;transform:none}}
@keyframes g-line{from{opacity:0}to{opacity:1}}
@keyframes g-tile{0%{background:#fff}40%{background:#fde7f1;border-color:#f2c6d6}100%{background:#fff}}

/* ---------- Interaktive Gästemappe ---------- */
.bv .guide{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.bv .guide-phone-col{position:sticky;top:104px}
.bv .guide-phone{position:relative;left:auto;top:auto;margin:0 auto;width:236px;height:470px}
.bv .guide-phone .phone-screen{position:relative}
.bv .guide-phone .tile{cursor:pointer}
.bv .guide-phone .tile.is-pick{background:var(--brand);color:#fff;box-shadow:0 10px 22px rgba(214,52,135,.3)}
.bv .guide-phone .tile.is-pick b{color:#fff}
.bv .guide-sheet{position:absolute;left:8px;right:8px;bottom:8px;background:#fff;border-radius:18px 18px 20px 20px;box-shadow:0 -8px 26px rgba(22,55,79,.14);padding:10px 14px 16px;display:grid;gap:6px;transform:translateY(0);transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.bv .guide-sheet.is-swap{transform:translateY(110%)}
.bv .gs-grip{justify-self:center;width:34px;height:4px;border-radius:4px;background:#d6e2ea}
.bv .gs-title{font:400 1.02rem/1.2 var(--serif);color:var(--ink)}
.bv .gs-text{font-size:.74rem;line-height:1.45;color:var(--muted)}
.bv .guide-hint{text-align:center;font-size:.78rem;color:var(--muted);margin-top:14px}
.bv .guide-cards{grid-template-columns:repeat(2,1fr)}
.bv .guide-card{cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.bv .guide-card .icon{transition:background .25s ease,color .25s ease}
.bv .guide-card:hover{border-color:#cfe0eb}
.bv .guide-card.is-active{border-color:#f2c6d6;box-shadow:0 14px 30px rgba(214,52,135,.12)}
.bv .guide-card.is-active .icon{background:var(--brand);color:#fff}

/* ---------- Vergleich Website / Concierge ---------- */
.bv .compare{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden}
.bv .cmp-col{padding:26px}
.bv .cmp-web{background:#f6f9fb}
.bv .cmp-conc{background:#fff;border-left:1px solid var(--line);position:relative}
.bv .cmp-conc:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand)}
.bv .cmp-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bv .cmp-head i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#e7eff5;color:var(--blue)}
.bv .cmp-conc .cmp-head i{background:#fff0f6}
.bv .cmp-head svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv .cmp-head img{width:16px;height:23px;object-fit:contain}
.bv .cmp-head h3{margin:0}
.bv .compare .info-list li{font-size:.9rem}

/* ---------- Änderungen als Einträge ---------- */
.bv .change-list li{display:flex;align-items:center;gap:12px;padding:10px 0}
.bv .change-list li:before{display:none}
.bv .change-list i{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#fff0f6;color:#c7456f}
.bv .change-list svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv .icon-card .icon img{width:16px;height:23px;object-fit:contain}
.bv .icon-card.way-boo .icon{background:#fff0f6}

@media(max-width:980px){
 .bv .guide{grid-template-columns:1fr}
 .bv .guide-phone-col{position:static;margin-bottom:6px}
 .bv .guide-card{cursor:default}
 .bv .guide-card.is-active{border-color:var(--line);box-shadow:none}
 .bv .guide-card.is-active .icon{background:#eaf4fa;color:var(--blue)}
}
@media(max-width:640px){
 .bv .guide-cards{grid-template-columns:1fr}
 .bv .compare{grid-template-columns:1fr}
 .bv .cmp-conc{border-left:0;border-top:1px solid var(--line)}
 .bv .cmp-col{padding:22px 20px}
}

/* =========================================================
   Clara-Bausteine
   ========================================================= */
.bv .clara-demo svg,.bv .q-card .icon svg,.bv .cy-ic svg,.bv .pipeline .icon svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Header-Demo ---------- */
.bv .clara-demo{position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px 24px 20px;box-shadow:0 30px 70px rgba(22,55,79,.12);display:grid;gap:0;max-width:520px;margin-left:auto}
.bv .clara-demo:before{content:"";position:absolute;inset:-1px;border-radius:26px;padding:1px;background:linear-gradient(135deg,rgba(255,178,63,.5),rgba(231,47,160,.35),rgba(98,72,232,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.bv .clara-kb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bv .clara-kb span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:13px;background:var(--soft);border:1px solid var(--line);font-size:.76rem;font-weight:750;color:var(--ink2);transition:background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,opacity .3s ease}
.bv .clara-kb svg{width:19px;height:19px;color:var(--blue)}
.bv .clara-kb span.is-scan{border-color:#cfe0eb;background:#fff}
.bv .clara-kb span.is-hit{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(214,52,135,.28)}
.bv .clara-kb span.is-hit svg{color:#fff}
.bv .clara-kb span.is-miss{opacity:.45}
.bv .cd-link{height:30px;display:grid;place-items:center}
.bv .cd-link i{width:2px;height:100%;background:repeating-linear-gradient(180deg,#c9d9e5 0 4px,transparent 4px 8px);position:relative}
.bv .cd-link i:after{content:"";position:absolute;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#e72fa0;top:0;opacity:0}
.bv .clara-demo.p-scan .l1 i:after,.bv .clara-demo.p-out .l2 i:after{animation:cd-drop .5s ease-in forwards}
@keyframes cd-drop{0%{top:0;opacity:1}100%{top:calc(100% - 8px);opacity:1}}
.bv .cd-mid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.bv .clara-q{background:var(--soft2);border-radius:18px 18px 6px 18px;padding:13px 16px;font-size:.95rem;color:var(--ink);min-height:50px;display:flex;align-items:center}
.bv .clara-q .cq-text:after{content:"";display:inline-block;width:2px;height:1em;background:var(--blue);margin-left:3px;vertical-align:-2px;animation:caret-b 1s steps(1) infinite}
@keyframes caret-b{50%{opacity:0}}
.bv .clara-core{position:relative;width:118px;height:118px;border-radius:50%;background:#fff;display:grid;place-items:center;align-content:center;gap:2px;text-align:center;box-shadow:0 14px 34px rgba(214,52,135,.18),0 0 0 8px var(--soft)}
.bv .clara-core img{width:26px;height:36px;object-fit:contain}
.bv .clara-core strong{font:400 1.05rem/1 var(--serif);color:var(--ink)}
.bv .clara-core small{font-size:.6rem;color:var(--muted);max-width:90px;line-height:1.2}
.bv .cc-ring{position:absolute;inset:-6px;border-radius:50%;border:2.5px solid transparent;border-top-color:#e72fa0;border-right-color:#6248e8;opacity:0;transition:opacity .3s ease}
.bv .clara-demo.p-scan .cc-ring{opacity:1;animation:bv-spin .9s linear infinite}
.bv .clara-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bv .clara-outs span{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border-radius:12px;border:1.5px solid var(--line);font-size:.82rem;font-weight:750;color:var(--muted);background:#fff;transition:all .35s cubic-bezier(.2,.9,.2,1.2)}
.bv .clara-outs svg{width:17px;height:17px}
.bv .clara-outs span.is-on{transform:translateY(-3px)}
.bv .clara-outs span[data-o=ok].is-on{background:#ecf7f1;border-color:#9fd3b6;color:#21613f}
.bv .clara-outs span[data-o=ask].is-on{background:#eaf4fa;border-color:#a9cde3;color:var(--blue2)}
.bv .clara-outs span[data-o=contact].is-on{background:#fff4e6;border-color:#f0c88d;color:#8a5d23}
.bv .clara-rule{margin-top:14px;padding-top:12px;border-top:1px dashed #d6e2ea;text-align:center;font-size:.78rem;color:var(--muted);transition:color .3s ease}
.bv .clara-demo.r-contact .clara-rule{color:#8a5d23;font-weight:700}
@media (prefers-reduced-motion:no-preference){.bv .clara-demo{animation:bv-rise .9s cubic-bezier(.2,.7,.2,1) .2s both}}

/* ---------- Chatverlauf (spielt einmal) ---------- */
.bv .chat-panel{display:grid;gap:14px}
.bv .chat{display:grid;gap:10px;padding:16px;border-radius:16px;background:#f6f9fb;border:1px solid var(--line)}
.bv .msg{margin:0;max-width:88%;padding:12px 15px;font-size:.92rem;line-height:1.5}
.bv .msg-guest{justify-self:end;background:var(--blue);color:#fff;border-radius:16px 16px 4px 16px}
.bv .msg-guest strong{color:rgba(255,255,255,.75);font-weight:700}
.bv .msg-clara{justify-self:start;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;margin-top:0}
.bv .msg-clara strong{display:block;font-size:.76rem;color:var(--muted);margin-bottom:2px}
.bv .mc-av{width:30px;height:30px;border-radius:50%;background:var(--soft2);display:grid;place-items:center}
.bv .mc-av img{width:13px;height:19px;object-fit:contain}
.bv .msg-typing{justify-self:start;display:none;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px}
.bv .msg-typing i{width:7px;height:7px;border-radius:50%;background:#9bb1c2;animation:typing 1s ease-in-out infinite}
.bv .msg-typing i:nth-child(2){animation-delay:.15s}.bv .msg-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,100%{transform:none;opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.js-anim .bv .chat:not(.is-done) .msg-guest,.js-anim .bv .chat:not(.is-done) .msg-clara{opacity:0;transform:translateY(10px)}
.js-anim .bv .chat .msg{transition:opacity .45s ease,transform .5s cubic-bezier(.2,.9,.2,1.2)}
.js-anim .bv .chat.s1 .msg-guest{opacity:1;transform:none}
.js-anim .bv .chat.s2 .msg-typing{display:inline-flex}
.js-anim .bv .chat.s3 .msg-clara{opacity:1;transform:none}
.bv .chat-note{font-size:.88rem;color:var(--muted);margin:0}

/* ---------- Wissensausbau als Kreislauf (ruhig) ---------- */
.bv .cycle{position:relative}
.bv .cycle .card{position:relative}
.bv .cycle .card:not(:last-child):after{content:"→";position:absolute;right:-15px;top:28px;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:.8rem;color:var(--blue);z-index:2}
.bv .cy-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bv .cy-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eaf4fa;color:var(--blue)}
.bv .cy-ic svg{width:21px;height:21px}
.bv .cycle .card:nth-child(2) .cy-ic{background:#fff4e6;color:#b07a2d}
.bv .cycle .card:nth-child(4) .cy-ic{background:var(--brand);color:#fff}
.bv .cy-head .meta{margin:0;font:400 1.6rem/1 var(--serif);color:#c9d9e5}
.bv .cycle-back{height:34px;margin:0 12.5%;border:2px dashed #b9d6e8;border-top:0;border-radius:0 0 22px 22px;position:relative}
.bv .cycle-back:after{content:"";position:absolute;left:-7px;top:-4px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid #8fb6cf}

/* ---------- Architektur als Schichten (ruhig) ---------- */
.bv .pipeline .card{position:relative;border-top:3px solid #d6e5ef}
.bv .pipeline .card:nth-child(1){border-top-color:#ffb23f}.bv .pipeline .card:nth-child(2){border-top-color:#ff5b75}.bv .pipeline .card:nth-child(3){border-top-color:#e72fa0}.bv .pipeline .card:nth-child(4){border-top-color:#6248e8}
.bv .pipeline .card:not(:last-child):after{content:"";position:absolute;right:-13px;top:34px;width:14px;height:2px;background:#c9d9e5;z-index:2}
.bv .pipeline .icon,.bv .q-card .icon{background:#eaf4fa;color:var(--blue)}

@media(max-width:980px){
 .bv .clara-demo{margin:0 auto}
 .bv .cycle .card:after,.bv .pipeline .card:after{display:none}
 .bv .cycle-back{display:none}
}
@media(max-width:640px){
 .bv .clara-demo{padding:18px 14px 14px;border-radius:20px}
 .bv .clara-kb{gap:6px}
 .bv .clara-kb span{font-size:.66rem;padding:8px 2px}
 .bv .cd-mid{grid-template-columns:1fr 92px;gap:10px}
 .bv .clara-core{width:92px;height:92px}
 .bv .clara-core small{font-size:.54rem}
 .bv .clara-q{font-size:.84rem;padding:10px 12px}
 .bv .clara-outs span{font-size:.72rem;gap:4px;padding:9px 4px}
 .bv .clara-outs svg{width:14px;height:14px}
 .bv .msg{max-width:94%}
}