/* =========================================================
   booyage.info – Seitenspezifisch: index.html (Ergänzung zu home.css)
   Wird nur von index.html geladen, nach home.css.
   ========================================================= */

/* Gästereise-Karten: Modulzeile + Link */
.home .journey-step{display:flex;flex-direction:column}
.home .journey-step .js-meta{display:block;margin-top:auto;padding-top:12px;font-size:.78rem;color:var(--muted)}
.home .journey-step .js-link{margin-top:10px}

/* Gästefragen als ruhige, stehende Wolke statt Laufband */
.home .q-stream.q-static{-webkit-mask:none;mask:none;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.home .q-stream.q-static .q-row{display:contents}
.home .q-stream.q-static .q-track{display:contents;animation:none}
.home .q-stream.q-static .q{white-space:normal}
.js-anim .home .q-stream.q-static .q{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.2,1.3)}
.js-anim .home .q-stream.q-static.is-on .q{opacity:1;transform:none}

/* Vertrauenszeile: drei kompakte Fakten (nur ab Tablet, mobil greift home.css) */
@media(min-width:641px){.home .trust-row{grid-template-columns:auto 1.25fr 1fr}}

@media(max-width:640px){
 .home .q-stream.q-static{justify-content:flex-start;gap:8px}
 .home .hv-chip .hv-txt small{display:none}
}

/* ---------- Angleichung Hero an die Unterseiten (Schrift, Grafik) ---------- */
.home .hero h1{font-size:clamp(2.35rem,3.6vw,3.24rem);line-height:1.08;letter-spacing:-.02em}
.home .hero h1 em{font-style:normal;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.home .hv-stage{height:clamp(370px,34vw,470px)}
@media(max-width:980px){.home .hv-stage{height:420px}}
@media(max-width:640px){.home .hv-stage{height:320px}.home .hero h1{font-size:2.35rem}}
/* Vertrauenszeile: drei gleich breite Spalten (funktioniert auch mit längeren Texten) */
@media(min-width:641px){.home .trust-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}.home .trust-item:first-child strong{font-size:1.32rem;line-height:1.2}}

/* ---------- Hero: weniger Abstand oben, Grafik höher, Vertrauenszeile über die ganze Breite ---------- */
.home .hero{padding-top:44px;padding-bottom:70px}
.home .hero-grid{align-items:start}
.home .hero .hv{margin-top:-6px}
.home .hero-trust{position:relative;z-index:1;margin-top:34px}
.home .hero-trust .trust-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0;margin:0;padding:22px 0 0;border-top:1px solid var(--line)}
.home .hero-trust .trust-item{padding:0 28px;border-left:1px solid var(--line)}
.home .hero-trust .trust-item:first-child{padding-left:0;border-left:0}
.home .hero-trust .trust-item strong{font:400 1.45rem/1.15 var(--serif)!important;color:var(--ink)!important;background:none!important;-webkit-text-fill-color:currentColor;margin-bottom:6px}
.home .hero-trust .trust-item span{max-width:340px;line-height:1.5}
@media(max-width:980px){.home .hero{padding-top:36px}}
@media(max-width:640px){
 .home .hero-trust{margin-top:22px}
 .home .hero-trust .trust-row{grid-template-columns:1fr!important;gap:14px}
 .home .hero-trust .trust-item{padding:0;border-left:0}
}

/* ---------- Gästefragen wieder als zweizeiliges Laufband ---------- */
.home .q-stream.q-marquee{display:grid;gap:12px;margin:-4px 0 34px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.home .q-marquee .q-row{overflow:hidden}
.home .q-marquee .q-track{display:flex;gap:12px;width:max-content;animation:q-run 48s linear infinite}
.home .q-marquee .q-row.is-rev .q-track{animation-direction:reverse;animation-duration:54s}
.home .q-marquee .q-dup{display:flex;gap:12px}
.home .q-marquee:hover .q-track{animation-play-state:paused}
.home .q-marquee .q{white-space:nowrap;opacity:1;transform:none}
@keyframes q-run{to{transform:translateX(calc(-50% - 6px))}}
@media(max-width:640px){.home .q-marquee .q{font-size:.84rem}}
@media(prefers-reduced-motion:reduce){.home .q-marquee .q-track{animation:none;flex-wrap:wrap;width:auto}.home .q-marquee .q-dup{display:none}.home .q-stream.q-marquee{-webkit-mask:none;mask:none}}


/* =========================================================
   Neue Startseite: Problem → Lösung → Rechnung → Einstieg
   ========================================================= */
.home .hero-sub{margin:-4px 0 18px;font:400 1.35rem/1.35 var(--serif);color:var(--ink)}
.home svg.x{display:none}
.home .sc-cards svg,.home .answers svg,.home .an-extra svg,.home .gr svg,.home .stay svg,.home .sc-result svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 2 · Selbstcheck ---------- */
.home .pc-check{position:relative;cursor:pointer;display:block;padding-right:38px!important;transition:background .25s ease,border-color .25s ease}
.home .pc-check .pc-in{position:absolute;opacity:0;pointer-events:none}
.home .pc-box{position:absolute;right:4px;top:20px;width:26px;height:26px;border-radius:8px;border:2px solid #e8c3cf;background:#fff;display:grid;place-items:center;color:#fff;transition:all .25s cubic-bezier(.2,.9,.2,1.4)}
.home .pc-box svg{width:15px;height:15px;stroke-width:3;opacity:0;transform:scale(.4);transition:all .25s cubic-bezier(.2,.9,.2,1.6)}
.home .pc-hint{display:inline-flex;margin-top:12px;font-size:.76rem;font-weight:800;color:#c7356f;opacity:.75}
.home .pc-check:hover .pc-box{border-color:#e26482}
.home .pc-check .pc-in:focus-visible~.pc-box{outline:2px solid var(--blue);outline-offset:3px}
.home .pc-check.is-on{background:linear-gradient(180deg,#fff2f6,rgba(255,242,246,0))!important;border-top-color:#e26482!important}
.home .pc-check.is-on .pc-box{background:var(--brand);border-color:transparent}
.home .pc-check.is-on .pc-box svg{opacity:1;transform:none}
.home .pc-check.is-on .pc-hint{opacity:1}
.home .pc-check.is-on .pc-hint:before{content:"✓ "}
.home .sc-result{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px;padding:20px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.home .sc-meter{display:grid;grid-template-columns:repeat(4,22px);gap:5px}
.home .sc-meter i{height:22px;border-radius:6px;background:#f1e3e9;transition:background .35s ease,transform .35s cubic-bezier(.2,.9,.2,1.5)}
.home .sc-meter i.is-on{background:var(--brand);transform:scale(1.08)}
.home .sc-text{margin:0;flex:1;min-width:240px;font-size:1rem;color:var(--ink2)}
.home .sc-text b{color:var(--ink)}
.home .sc-go{opacity:.35;pointer-events:none;transition:opacity .3s ease}
.home .sc-result.has-pick .sc-go{opacity:1;pointer-events:auto}

/* ---------- 3 · Gästereise ---------- */
.home .gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end}
.home .gap-grid h2{font-size:clamp(2rem,3.4vw,3rem)}
.home .gap-copy p{color:var(--muted)}
.home .gap-copy p strong{color:var(--ink);font-size:1.05rem}
.home .gr{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:44px;padding-top:6px}
.home .gr-line{position:absolute;left:10%;right:10%;top:30px;height:8px;border-radius:8px;background:repeating-linear-gradient(135deg,#dfe7ee 0 10px,#d3dee7 10px 20px);overflow:hidden}
.home .gr-fill{position:absolute;inset:0;background:var(--brand);transform-origin:left;transform:scaleX(0);transition:transform 2.2s cubic-bezier(.5,0,.2,1) .2s}
.home .gr.is-in .gr-fill{transform:scaleX(1)}
.home .gr-st{position:relative;display:grid;justify-items:center;gap:10px;text-align:center}
.home .gr-st i{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #d6e5ef;color:#9bb1c2;transition:all .4s ease;transition-delay:calc(.35s + var(--i) * .42s)}
.home .gr-st svg{width:24px;height:24px}
.home .gr-st b{font-size:.95rem;color:var(--ink2)}
.home .gr.is-in .gr-st i{border-color:transparent;background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(214,52,135,.25)}

/* ---------- 4 · Antworten ---------- */
.home .answers{display:grid;gap:14px}
.home .an-row{display:grid;grid-template-columns:290px 56px 1fr;align-items:stretch;gap:0;transition:transform .3s ease}
.home .an-prob{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:18px 0 0 18px;background:#f6f2f4;border:1px solid #efe1e7;border-right:0;color:#8a6070;font-weight:700;font-size:.95rem}
.home .an-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#c7556d}
.home .an-ic svg{width:20px;height:20px}
.home .an-arrow{display:grid;place-items:center;background:linear-gradient(90deg,#f6f2f4,#fff);border-top:1px solid #efe1e7;border-bottom:1px solid var(--line);color:#c7356f}
.home .an-arrow svg{width:22px;height:22px}
.home .an-sol{padding:20px 26px;border-radius:0 18px 18px 0;background:#fff;border:1px solid var(--line);border-left:0;box-shadow:var(--shadow)}
.home .an-sol h3{font-size:1.35rem;margin:0 0 6px}
.home .an-sol p{margin:0;color:var(--muted)}
.home .an-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.home .an-row.is-hit .an-prob{background:#fde9f0;border-color:#f2c6d6;color:#b8456a}
.home .an-row.is-hit .an-sol{border-color:#f2c6d6;box-shadow:0 16px 36px rgba(214,52,135,.12)}
.home .an-row.is-hit .an-sol h3:after{content:" ✓";color:#c7356f;font-size:.9em}
.home .an-extra{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 18px;border-radius:14px;border:1px dashed #cfdde7;background:rgba(255,255,255,.6)}
.home .an-extra .an-ic{color:var(--blue);background:#eaf4fa}
.home .an-extra p{margin:0;flex:1;font-size:.92rem;color:var(--ink2)}

/* ---------- 5 · Rechnung (Kostenvergleich) ---------- */
/* =========================================================
   booyage.info – Seitenspezifisch: booyage.html
   Abschnitt „Wirtschaftlichkeit“ (Kostenvergleich)
   ========================================================= */
.home .ec{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(22,55,79,.1)}
/* Eingaben */
.home .ec-in{padding:30px 30px 26px;display:grid;gap:20px;align-content:start}
.home .ec-in-head h3{font-size:1.5rem;margin:0 0 6px}
.home .ec-in-head p{margin:0;font-size:.86rem;color:var(--muted)}
.home .ec-field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px;font-size:.84rem;font-weight:750;color:var(--ink2)}
.home .ec-field output{font:400 1.35rem/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.home .ec input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--blue) 0 var(--fill,50%),#dfe8ef var(--fill,50%) 100%)}
.home .ec input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 3px 10px rgba(22,55,79,.18);cursor:pointer}
.home .ec input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--blue);cursor:pointer}
.home .ec input[type=range]:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.home .ec-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:-6px}
.home .ec-tiers span{display:grid;gap:1px;padding:8px 6px;border-radius:10px;background:var(--soft);text-align:center;transition:background .3s ease,color .3s ease,transform .3s ease}
.home .ec-tiers b{font-size:.7rem;font-weight:750;color:var(--muted)}
.home .ec-tiers em{font-style:normal;font-size:.82rem;font-weight:800;color:var(--ink2)}
.home .ec-tiers span.is-on{background:var(--navy);transform:translateY(-2px)}
.home .ec-tiers span.is-on b{color:rgba(255,255,255,.7)}.home .ec-tiers span.is-on em{color:#fff}
.home .ec-link{justify-self:start;font-size:.86rem}
/* Ergebnis */
.home .ec-out{position:relative;overflow:hidden;padding:30px;background:var(--navy);color:#fff;display:grid;gap:22px;align-content:center}
.home .ec-out:before{content:"";position:absolute;width:360px;height:360px;right:-140px;top:-170px;border-radius:50%;background:var(--brand);filter:blur(50px);opacity:.38}
.home .ec-out>*{position:relative}
.home .ec-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.home .ec-col{padding:16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:grid;gap:6px}
.home .ec-col span{font-size:.74rem;color:rgba(255,255,255,.7);line-height:1.35;min-height:2.7em}
.home .ec-col b{font:400 2.2rem/1 var(--serif);font-variant-numeric:tabular-nums}
.home .c-boo{background:rgba(231,47,160,.14);border-color:rgba(231,47,160,.35)}
.home .ec-bar{display:block;height:8px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:4px}
.home .ec-bar i{display:block;height:100%;width:var(--w,0%);border-radius:8px;background:#9fb6c8;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.home .c-boo .ec-bar i{background:var(--brand)}
/* Gedeckt-ab-Skala */
.home .es-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.74rem;color:rgba(255,255,255,.7);margin-bottom:10px}
.home .es-legend{display:inline-flex;align-items:center;gap:6px}
.home .es-legend b{color:#fff}
.home .lg-be{width:10px;height:10px;border-radius:2px;background:linear-gradient(90deg,#ffb23f,#e72fa0)}
.home .es-track{position:relative;height:10px;border-radius:10px;background:rgba(255,255,255,.12)}
.home .es-zone{position:absolute;top:0;bottom:0;right:0;left:var(--be,7%);border-radius:0 10px 10px 0;background:linear-gradient(90deg,rgba(255,178,63,.75),rgba(231,47,160,.75));transition:left .5s cubic-bezier(.2,.8,.2,1)}
.home .es-be{position:absolute;top:-5px;bottom:-5px;left:var(--be,7%);width:2px;background:#fff;transition:left .5s cubic-bezier(.2,.8,.2,1)}
.home .es-you{position:absolute;top:50%;left:var(--you,7%);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;border:3px solid #0d2438;box-shadow:0 0 0 3px #fff;transition:left .5s cubic-bezier(.2,.8,.2,1)}
.home .es-you em{position:absolute;top:22px;left:9px;transform:translateX(calc(var(--you,7%) * -1));white-space:nowrap;font-style:normal;font-size:.66rem;font-weight:800;color:#fff;background:rgba(255,255,255,.14);padding:2px 7px;border-radius:999px}
.home .es-ticks{display:flex;justify-content:space-between;margin-top:28px;font-size:.64rem;color:rgba(255,255,255,.5)}
.home .ec-result{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.9)}
.home .ec-result strong{color:#fff}
/* Fußnoten & Staffel */
.home .ec-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.home .ec-notes p{display:flex;gap:10px;margin:0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:.78rem;line-height:1.5;color:var(--muted)}
.home .ec-notes svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.home .ec-details{margin-top:12px}
.home .ec-details summary{cursor:pointer;font-size:.84rem;font-weight:750;color:var(--blue);list-style:none;display:inline-flex;align-items:center;gap:6px}
.home .ec-details summary::-webkit-details-marker{display:none}
.home .ec-details summary:after{content:"+";font-weight:800}
.home .ec-details[open] summary:after{content:"–"}
.home .ec-details .checklist{margin-top:8px;max-width:640px}

@media(max-width:980px){
 .home .ec{grid-template-columns:1fr}
 .home .ec-notes{grid-template-columns:1fr}
}
@media(max-width:640px){
 .home .ec-in,.home .ec-out{padding:22px 18px}
 .home .ec-tiers{gap:4px}
 .home .ec-tiers b{font-size:.6rem}.home .ec-tiers em{font-size:.72rem}
 .home .ec-col b{font-size:1.8rem}
 .home .ec input[type=range]::-webkit-slider-thumb{width:28px;height:28px}
}

.home .ec-headline{margin:0;font:400 1.5rem/1.3 var(--serif);color:#fff}
.home .ec-headline b{font-weight:400;background:linear-gradient(90deg,#ffd29a,#ff8fb3);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.25em}
.home .ec-note{margin:14px 0 0;font-size:.82rem;color:var(--muted)}

/* ---------- 6 · Was bleibt ---------- */
.home .stay-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.home .stay-grid h2{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:14px}
.home .stay-grid p{color:var(--muted)}
.home .stay-sys{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.home .st-node{position:relative;display:grid;justify-items:center;gap:8px;padding:16px 6px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px rgba(22,55,79,.05);text-align:center}
.home .st-node i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eaf4fa;color:var(--blue)}
.home .st-node i svg{width:20px;height:20px}
.home .st-node b{font-size:.76rem;color:var(--ink2)}
.home .st-ok{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#2f9a62;color:#fff}
.home .st-ok svg{width:12px;height:12px;stroke-width:3}
.home .stay-plugs{display:grid;grid-template-columns:repeat(5,1fr);height:34px}
.home .stay-plugs i{justify-self:center;width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,#b9d6e8,#e72fa0);transform-origin:top;transition:transform .5s ease}
.home .stay-boo{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;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}
.home .stay-boo img{width:18px;height:26px;object-fit:contain;filter:brightness(0) invert(1)}
.js-anim .home .stay:not(.is-in) .stay-boo{transform:translateY(50px);opacity:0}
.js-anim .home .stay:not(.is-in) .stay-plugs i{transform:scaleY(0)}
.js-anim .home .stay.is-in .stay-plugs i{transition-delay:.8s}

/* ---------- 7 · Einstieg ---------- */
.home .start-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.home .start-grid h2{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:14px}
.home .start-terms{display:grid;gap:12px}
.home .stt{display:flex;align-items:baseline;gap:16px;padding:18px 22px;border-radius:16px;background:#fff;border:1px solid #f1ddd1;box-shadow:0 10px 26px rgba(150,80,40,.06)}
.home .stt b{min-width:120px;font:400 2rem/1 var(--serif);background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.home .stt span{color:var(--ink2);font-size:.95rem}
.home .cta-final{position:relative;overflow:hidden;background:var(--navy);border-color:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.home .cta-final>div{position:relative;z-index:1;max-width:640px}
.home .cta-final h2{color:#fff}
.home .cta-final p{color:rgba(255,255,255,.72)}
.home .cta-final .eyebrow{color:#ffb98f}
.home .cta-final .btns{position:relative;z-index:1;margin:0}
.home .cta-final .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.home .cta-ribbon{position:absolute;right:-40px;top:50%;width:250px;transform:translateY(-50%) rotate(-8deg);opacity:.3;pointer-events:none}
.home .cta-ribbon path{fill:none;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:980px){
 .home .gap-grid,.home .stay-grid,.home .start-grid{grid-template-columns:1fr;gap:24px}
 .home .an-row{grid-template-columns:1fr}
 .home .an-prob{border-radius:18px 18px 0 0;border-right:1px solid #efe1e7;border-bottom:0}
 .home .an-arrow{display:none}
 .home .an-sol{border-radius:0 0 18px 18px;border-left:1px solid var(--line)}
 .home .cta-ribbon{display:none}
}
@media(max-width:640px){
 .home .hero-sub{font-size:1.15rem}
 .home .gr{grid-template-columns:1fr;gap:14px;justify-items:start;padding-left:4px}
 .home .gr-line{left:31px;right:auto;top:20px;bottom:20px;width:6px;height:auto}
 .home .gr-fill{transform-origin:top;transform:scaleY(0)}
 .home .gr.is-in .gr-fill{transform:scaleY(1)}
 .home .gr-st{grid-template-columns:56px 1fr;justify-items:start;align-items:center;text-align:left;gap:14px}
 .home .stay-sys{grid-template-columns:repeat(3,1fr)}
 .home .stay-plugs{display:none}
 .home .stay-boo{margin-top:12px}
 .home .sc-result{padding:16px}
 .home .stt b{min-width:96px;font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){.home .gr-fill{transform:none!important}.home .gr-st i{border-color:transparent;background:var(--brand);color:#fff}}

/* Handy: Einflug-Animation der Ankreuz-Karten darf keinen seitlichen Scroll erzeugen */
.home .sec-dilemma{overflow-x:clip}

/* =========================================================
   NEU: Hero-Variante C – Booyage-Gesicht mit umlaufendem Strich
   Rückweg zum B-Band: Markup aus assets/hero-b-band.snippet.html einsetzen.
   ========================================================= */

/* Gesicht */
.home .hf-svg{position:absolute;left:50%;top:50%;width:min(72%,400px);height:auto;transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 14px 22px rgba(231,47,160,.16))}
.home .hf-ring,.home .hf-tail,.home .hf-smile{fill:none;stroke:url(#hff);stroke-width:5.5;stroke-linecap:round}
.home .hf-pupil{fill:#0d2438;transition:transform .5s cubic-bezier(.2,.9,.25,1.1)}
.home .hf-svg.is-track .hf-pupil{transition:transform .14s linear}
.home .hf-eye{transform-box:fill-box;transform-origin:50% 50%}
.home .hf-mouth{transform-box:fill-box;transform-origin:50% 0}
.home .hf-svg.is-blink .hf-eye{animation:hf-blink .26s ease-in-out}
.home .hf-svg.is-wink .hf-eye-r{animation:hf-blink .42s ease-in-out}
.home .hf-svg.is-wink .hf-mouth{animation:hf-grin .8s ease-in-out}
@keyframes hf-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
@keyframes hf-grin{0%,100%{transform:scale(1)}45%{transform:scale(1.14,1.25)}}

/* Umlaufender Strich (Bahn wird per JS passend zur Bühne berechnet) */
.home .hf-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.home .hf-orbit path{fill:none;stroke-linecap:round}
.home .hf-o-comet{stroke-width:10;stroke-dasharray:.16 .84;stroke-dashoffset:.16;opacity:0;filter:drop-shadow(0 4px 10px rgba(231,47,160,.35))}
.home .hf-o-trail{stroke-width:4;stroke-dasharray:.34 .66;stroke-dashoffset:.34;opacity:0}
.home .hf-o-dot{fill:#fff;opacity:0;stroke:#ff5b75;stroke-width:3;filter:drop-shadow(0 0 8px rgba(255,91,117,.85))}
@media(max-width:640px){.home .hf-o-comet{stroke-width:8}.home .hf-o-trail{stroke-width:3}.home .hf-o-dot{r:6}.home .hf-svg{width:min(70%,270px)}}

/* Aufbau beim Laden */
html.js-anim .home .hf-ring,html.js-anim .home .hf-tail,html.js-anim .home .hf-smile{stroke-dasharray:1;stroke-dashoffset:1;animation:hf-draw .9s cubic-bezier(.65,0,.25,1) forwards}
html.js-anim .home .hf-eye-l .hf-ring{animation-delay:calc(var(--d0) + .35s)}
html.js-anim .home .hf-eye-r .hf-ring{animation-delay:calc(var(--d0) + .6s)}
html.js-anim .home .hf-tail{animation-delay:calc(var(--d0) + 1.15s);animation-duration:.45s}
html.js-anim .home .hf-smile{animation-delay:calc(var(--d0) + 1.3s);animation-duration:.7s}
html.js-anim .home .hf-pupil{opacity:0;animation:hf-fade .5s ease calc(var(--d0) + 1.55s) forwards}
@keyframes hf-draw{to{stroke-dashoffset:0}}
@keyframes hf-fade{to{opacity:1}}

/* Stationen sitzen auf der Bahn (Position per JS) */
.home .hf-chips{pointer-events:none}
.home .hf-chips .hv-chip{pointer-events:auto}
@media(hover:none){.home .hf-chips .hv-chip{cursor:pointer}}
@media(prefers-reduced-motion:reduce){.home .hf-pupil{transition:none}}

/* NEU: Intro mit Augen-Logo statt B */
.home .intro-mark{aspect-ratio:74/60;width:clamp(120px,13vw,170px)}
.home .intro-mark svg path{stroke-width:5.5}
.home .intro-wm{display:block;height:clamp(30px,3.4vw,40px);width:auto;margin:0 auto}
.home .cta-ribbon.cta-face{width:230px;right:-10px}
.home .cta-ribbon.cta-face path{stroke-width:5.5}

/* NEU: Intro länger sichtbar – Zeichnen, kurz stehen lassen, dann ausblenden */
html.has-intro{--d0:4.2s}
.home.has-intro .intro,.has-intro .home .intro,html.has-intro .intro{animation:intro-out .8s cubic-bezier(.75,0,.2,1) 4.1s forwards}
html.has-intro .intro.is-skip{animation:intro-out .45s cubic-bezier(.75,0,.2,1) 0s forwards!important}
.home .intro-mark svg path{animation-duration:1.6s;animation-delay:.2s}
.home .intro-mark svg{animation:intro-fadeout .5s ease 1.9s forwards}
.home .intro-mark img{animation:intro-logo .6s cubic-bezier(.2,.7,.2,1) 1.7s forwards}
.home .intro-word{animation:h-rise .8s cubic-bezier(.2,.7,.2,1) 2s forwards}

/* ===== NEU: Produktansichten im Abschnitt #antworten (Beispielansichten, fiktives Hotel) ===== */
.home .an-demo{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 22px 50px rgba(22,55,79,.12);overflow:hidden;font-size:.82rem;line-height:1.35;color:var(--ink);text-align:left}
.home .an-demo svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home .dm-bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-bottom:1px solid var(--line);background:#fbfcfd}
.home .dm-bar img{width:24px;height:auto}
.home .dm-bar b{font-size:.8rem;color:var(--ink)}
.home .dm-bar span{margin-left:auto;font-size:.7rem;color:var(--muted)}
.home .dm-bar.is-web i{width:8px;height:8px;border-radius:50%;background:#e2e9ef}
.home .dm-bar.is-web b{margin-left:6px;font-weight:650;color:var(--muted)}
.home .dm-body{display:grid;gap:10px;padding:14px}
.home .dm-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border-radius:9px;background:var(--blue2);color:#fff;font-weight:750;font-size:.76rem;white-space:nowrap}
.home .dm-pic{height:84px;background:linear-gradient(135deg,#ffcf8a,#ff8aa0 48%,#b08cf2)}
.home .dm-pic svg{display:block;width:100%;height:100%}
.home .dm-pic.is-small{flex:none;width:72px;height:56px;border-radius:10px}
/* Portal */
.home .dm-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.74rem}
.home .dm-search svg{flex:none;width:15px;height:15px;color:var(--blue2)}
.home .dm-hotel{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.home .dm-hinfo{padding:9px 12px}
.home .dm-hinfo b,.home .dm-pass b,.home .dm-list b{display:block;font-size:.86rem;color:var(--ink)}
.home .dm-hinfo span,.home .dm-pass span,.home .dm-list span{font-size:.72rem;color:var(--muted)}
.home .dm-clara{display:flex;align-items:flex-start;gap:8px;padding:8px 11px;border-radius:12px;background:var(--violet)}
.home .dm-clara img{flex:none;width:20px;margin-top:1px}
.home .dm-clara p{margin:0;font-size:.75rem;color:var(--ink2)}
.home .dm-price{display:flex;align-items:center;justify-content:space-between;gap:10px}
.home .dm-price span{display:block;font-size:.72rem;color:var(--muted)}
.home .dm-price b{font-size:1.15rem}
.home .dm-fee{display:grid;gap:4px;padding:8px;border:1px dashed #cfdde7;border-radius:12px}
.home .dm-fee-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 6px;font-size:.72rem;color:var(--muted)}
.home .dm-fee-row.is-new{padding:7px 8px;border-radius:9px;background:var(--rose);color:#8a4a64;font-weight:700}
.home .dm-fee-row.is-new b{font-size:1.1rem;color:#c7356f;white-space:nowrap}
/* DirektLotse */
.home .dm-site{display:grid;gap:7px}
.home .dm-site span{display:block;border-radius:6px;background:#eef3f7}
.home .dm-site .s1{height:46px;border-radius:10px;background:linear-gradient(120deg,#e3eff7,#f4f8fb)}
.home .dm-site .s2{height:8px;width:72%}
.home .dm-site .s3{height:8px;width:46%}
.home .dm-chat{display:grid;grid-template-areas:"h" "q" "a" "g";gap:8px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fcfdfe}
.home .dm-chat-head{grid-area:h;display:flex;align-items:center;gap:7px}
.home .dm-chat-head img{width:20px}
.home .dm-chat-head b{font-size:.78rem}
.home .dm-q{grid-area:q;justify-self:end;max-width:84%;margin:0;padding:8px 11px;border-radius:13px 13px 4px 13px;background:#e9f2f8;color:var(--ink)}
.home .dm-a{grid-area:a;justify-self:start;max-width:90%;margin:0;padding:8px 11px;border-radius:13px 13px 13px 4px;background:#fff;border:1px solid var(--line)}
.home .dm-a small{display:block;margin-top:4px;font-size:.66rem;color:#2e8a62;font-weight:700}
.home .dm-typing{grid-area:a;justify-self:start;display:none;gap:4px;margin:0;padding:11px 12px;border-radius:13px;background:#fff;border:1px solid var(--line)}
.home .dm-typing i{width:6px;height:6px;border-radius:50%;background:#9db1c1}
.home .dm-go{grid-area:g;display:grid;gap:4px;margin-top:2px}
.home .dm-go .dm-btn{width:100%}
.home .dm-go small{text-align:center;font-size:.66rem;color:var(--muted)}
/* Concierge */
.home .dm-day b{display:block;font-size:.95rem}
.home .dm-day span{font-size:.72rem;color:var(--muted)}
.home .dm-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.home .dm-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.home .dm-list li>i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--soft2);color:var(--blue2)}
.home .dm-list li>i svg{width:17px;height:17px}
.home .dm-list li>div{min-width:0}
.home .dm-list li.is-offer{background:#fff8fb;border-color:#f6d7e3}
.home .dm-list li.is-offer>i{background:#fde9f0;color:#c7356f}
.home .dm-list em{margin-left:auto;font-style:normal;font-size:.68rem;font-weight:750;color:#c7356f;border:1px solid #f2c6d6;border-radius:999px;padding:3px 9px;background:#fff}
.home .dm-tabs{display:flex;flex-wrap:wrap;gap:6px}
.home .dm-tabs span{font-size:.68rem;padding:4px 9px;border-radius:999px;background:#f1f5f8;color:var(--muted)}
.home .dm-tabs .on{background:var(--blue2);color:#fff}
/* HotelPass & Points */
.home .dm-pass{display:flex;align-items:center;gap:11px;padding:8px;border:1px solid var(--line);border-radius:14px}
.home .dm-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.home .dm-tiers span{display:block;text-align:center;padding:6px 2px;border:1px solid var(--line);border-radius:10px;font-size:.66rem;color:var(--muted)}
.home .dm-tiers b{display:block;font-size:.86rem;color:var(--ink)}
.home .dm-tiers .on{background:var(--brand);border-color:transparent;color:#fff}
.home .dm-tiers .on b{color:#fff}
.home .dm-pp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:var(--rose)}
.home .dm-pp>span{font-size:.72rem;color:#8a4a64;font-weight:650}
.home .dm-pp s{margin-right:6px;font-size:.78rem;color:var(--muted)}
.home .dm-pp b{font-size:1.25rem;color:#c7356f}
.home .dm-points{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(120deg,var(--ink),var(--blue2));color:#fff}
.home .dm-points img{width:28px}
.home .dm-points b{display:block;font-size:.9rem}
.home .dm-points span{font-size:.7rem;opacity:.82}
.home .av-note{margin:10px 0 0;text-align:center;font-size:.72rem;color:var(--muted)}

/* Einmaliger Aufbau (nur mit js-anim, also nicht bei „Bewegung reduzieren“) */
@keyframes dmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dmType{0%{opacity:0}12%{opacity:1}82%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes dmDot{0%,100%{transform:none;opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.js-anim .home .an-demo:not(.is-played) .dm-in,.js-anim .home .an-demo:not(.is-played) .dm-a{opacity:0}
.js-anim .home .an-demo.is-played .dm-in{animation:dmIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .12s + .1s)}
.js-anim .home .an-demo.is-played .dm-typing{display:inline-flex;animation:dmType 1.15s .45s both}
.js-anim .home .an-demo.is-played .dm-typing i{animation:dmDot .5s 2 ease-in-out}
.js-anim .home .an-demo.is-played .dm-typing i:nth-child(2){animation-delay:.15s}
.js-anim .home .an-demo.is-played .dm-typing i:nth-child(3){animation-delay:.3s}
.js-anim .home .an-demo.is-played .dm-a{animation:dmIn .45s 1.55s both}

/* Desktop: Antworten links, mitlaufende Ansicht rechts */
.home .an-view{display:none}
@media (min-width:1100px){
 .home .an-stage{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:30px;align-items:start}
 .home .an-stage .an-row{grid-template-columns:200px 42px 1fr;cursor:pointer}
 .home .an-stage .an-prob{padding:18px 16px;font-size:.9rem}
 .home .an-stage .an-sol{padding:18px 22px}
 .home .an-stage .an-sol h3{font-size:1.2rem}
 .home .an-view{display:block;align-self:stretch}
 .home .av-sticky{position:sticky;top:96px}
 .home .av-frame{position:relative;height:476px}
 .home .av-frame .an-demo{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);transition:opacity .35s ease,transform .35s ease,visibility .35s}
 .home .av-frame .an-demo.is-on{opacity:1;visibility:visible;transform:none}
 .home .an-stage .an-row.is-view .an-sol{border-color:#b9d4e6;box-shadow:0 18px 40px rgba(30,95,138,.14)}
 .home .an-stage .an-row.is-view .an-arrow{color:var(--blue2)}
 .home .an-stage .an-row.is-hit.is-view .an-sol{border-color:#f2c6d6}
}
/* Handy und Tablet: Ansicht direkt unter der jeweiligen Antwort */
@media (max-width:1099.98px){
 .home .an-row .an-demo{grid-column:1/-1;width:100%;max-width:440px;margin:14px auto 6px}
 .home .an-row .an-demo:after{content:"Beispielansicht · fiktives Hotel · Beispielwerte";display:block;padding:8px 14px;border-top:1px solid var(--line);background:#fbfcfd;text-align:center;font-size:.68rem;color:var(--muted)}
}
/* Korrekturen Produktansichten */
.home .an-demo .dm-pic svg path{stroke:none}
.home .dm-price .dm-btn{display:inline-flex;color:#fff;font-size:.76rem}
.home .dm-pp>span{flex:1 1 auto;min-width:0}
.home .dm-pp>div{flex:none;white-space:nowrap}
@media (min-width:1100px){
 .home .an-stage .an-row{grid-template-columns:228px 40px 1fr}
 .home .an-stage .an-prob{gap:11px;padding:16px 14px;font-size:.88rem;hyphens:auto;overflow-wrap:break-word}
 .home .an-stage .an-prob>span:last-child{min-width:0}
}

/* NEU: Fußnoten und Hinweise */
.fn{font-size:.62em;line-height:0;vertical-align:super;margin-left:2px;font-family:var(--sans);font-weight:700}
.fn a{color:var(--blue2);text-decoration:none;padding:0 2px;border-radius:4px}
.fn a:hover,.fn a:focus-visible{background:var(--soft2);text-decoration:underline}
.home .fn-sec{padding:34px 0 46px;border-top:1px solid var(--line)}
.home .fn-h{font-family:var(--sans);font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.home .fn-list{margin:0;padding-left:20px;display:grid;gap:6px;max-width:880px}
.home .fn-list li{font-size:.8rem;line-height:1.55;color:var(--muted)}
.home .fn-list li:target{color:var(--ink);background:var(--soft2);border-radius:6px;outline:6px solid var(--soft2)}
html{scroll-padding-top:90px}
.home .stt b{flex:none;white-space:nowrap}
.home .sc-check{display:inline-block;margin-top:12px;font-size:.9rem}