/* PYUR-Eisenhuettenstadt.de – ein Stylesheet, keine externen Fonts (schnell + DSGVO) */
:root{
  /* Helles Grunddesign – dunkel nur Header, Hero, Footer (wie Original) */
  --bg:#f5f7fc; --bg2:#eef1f9; --card:#fff; --line:#dfe4f0;
  --txt:#1b1f4b; --mute:#5c6285; --pink:#e6007e; --cyan:#009e96; --wa:#25d366;
  --grad:linear-gradient(100deg,#ff2d88,#00e0d0);
  --shadow:0 10px 30px -12px rgba(27,31,75,.18);
  --r:14px; --w:1180px;
  --font:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
/* Dunkle Bereiche */
.site-header,.hero,.site-footer,.quickbar{
  --bg:#07070c; --bg2:#12121c; --card:#171722; --line:#2a2a40;
  --txt:#f1f1f6; --mute:#a9a9c0; --pink:#ff2d88; --cyan:#00e0d0;
  color:var(--txt);
}
.hero{background-color:#0b0b16}
.site-footer{background:#0b0b16!important}
h2{color:var(--txt)}
.card,.tcard{box-shadow:var(--shadow)}
.sec:nth-of-type(even){background:#fff}
img{background:#e4e8f3}
.hero img{background:#171722}
.seg input:checked+span,.tb{color:#fff}
.tb2{background:var(--cyan)}
.tabs [aria-selected=true]{color:#fff}
.chat-bubble{background:#fff}
.msg.me{color:#fff}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:17px/1.6 var(--font);padding-bottom:70px}
img{max-width:100%;height:auto;display:block;border-radius:var(--r);background:var(--bg2)}
a{color:var(--cyan)} a:hover{color:#fff}
h1,h2,h3{line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,6vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800}
h3{font-size:1.2rem}
p{margin:0 0 1em;max-width:68ch}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.sr,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--pink);color:#fff;padding:.6em 1em;z-index:99}.skip:focus{left:8px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}.narrow{max-width:820px}.center{text-align:center}.center p{margin-inline:auto}
.sec{padding:clamp(48px,8vw,96px) 0}
.page-head{padding-bottom:0}.lead{font-size:1.2rem;color:var(--mute)}
.kicker{color:var(--cyan);font-weight:700;margin-bottom:.4em}
.hint{color:var(--mute);font-size:.92rem}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border:0;border-radius:999px;padding:.8em 1.5em;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;text-align:center;line-height:1.2;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-pink{background:var(--pink);color:#fff;box-shadow:0 6px 24px -6px rgba(255,45,136,.7)}.btn-pink:hover{color:#fff;box-shadow:0 8px 30px -4px rgba(255,45,136,.9)}
.btn-ghost{background:transparent;color:var(--txt);border:2px solid var(--line)}.btn-ghost:hover{border-color:var(--cyan)}
.btn-wa{background:var(--wa);color:#04210f}.btn-lg{padding:1em 2em;font-size:1.08rem}
.linkbtn{background:none;border:0;color:var(--cyan);font:inherit;padding:0;cursor:pointer;text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,7,12,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;color:var(--txt);text-decoration:none}
.logo img{background:none;border-radius:10px}.logo strong{display:block;font-size:1.05rem}.logo small{display:block;color:var(--mute);font-size:.75rem}
.mainnav{display:flex;align-items:center;gap:18px}
.mainnav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.mainnav ul a{color:var(--txt);text-decoration:none;padding:.5em .7em;border-radius:8px;font-weight:600;font-size:.95rem}
.mainnav ul a:hover,.mainnav a[aria-current]{background:var(--bg2);color:var(--cyan)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:10px;width:24px;height:2px;background:var(--txt);transition:.2s;content:""}
.burger span{top:21px}.burger span::before{top:-7px;left:0}.burger span::after{top:7px;left:0}
.burger[aria-expanded=true] span{background:transparent}.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1060px){
  .burger{display:block}
  .mainnav{position:fixed;inset:70px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:24px;gap:20px;transform:translateX(100%);transition:transform .25s;overflow:auto}
  .mainnav.open{transform:none}
  .mainnav ul{flex-direction:column}.mainnav ul a{display:block;font-size:1.2rem;padding:.7em}
}

/* Hero: das eine laute Element – der Geschwindigkeitsring */
.hero{padding:clamp(32px,6vw,72px) 0 40px;background-color:#0b0b16;background-image:radial-gradient(60% 60% at 85% 20%,rgba(0,224,208,.14),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(255,45,136,.16),transparent 70%)}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:1.25rem;color:var(--mute)}
.pill{display:inline-block;border:1px solid var(--pink);color:var(--pink);border-radius:999px;padding:.25em .9em;font-weight:700;font-size:.85rem}
.meter{display:grid;grid-template-columns:130px auto;gap:6px 20px;align-items:center;margin:24px 0;position:relative}
.meter svg{width:130px;height:130px;transform:rotate(-90deg);grid-row:span 2}
.meter circle{fill:none;stroke-width:10}.m-bg{stroke:var(--line)}
.m-fg{stroke:var(--pink);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:calc(327 - 327 * var(--p) / 100);animation:fill 1.4s cubic-bezier(.2,.8,.2,1)}
@keyframes fill{from{stroke-dashoffset:327}}
.meter>div{position:absolute;left:0;top:0;width:130px;height:130px;display:grid;place-content:center;text-align:center}
.meter>div strong{font-size:2rem;line-height:1}.meter>div span{font-size:.72rem;color:var(--mute)}
.meter-price{margin:0;font-size:1.05rem}.meter-price strong{font-size:2.6rem;color:#fff;line-height:1}
.save{color:var(--cyan);font-weight:700}
s{color:var(--mute)}
.hero-img img{aspect-ratio:8/9;object-fit:cover;width:100%;box-shadow:0 30px 80px -30px rgba(255,45,136,.5)}
.tiles3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px!important}
.tiles3 li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;font-weight:700;display:flex;gap:10px;align-items:center}
@media (max-width:860px){.hero-in{grid-template-columns:1fr}.hero-img{order:-1}.hero-img img{aspect-ratio:16/10}.tiles3{grid-template-columns:1fr}}

.check{list-style:none;padding:0;margin:0 0 1.4em}
.check li{padding-left:1.7em;position:relative;margin:.35em 0}
.check li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:800}
.plain{list-style:none;padding:0}

.feat4{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--line)}
.feat4 li{padding:24px 20px 0 0}.feat4 li+li{padding-left:20px;border-left:1px solid var(--line)}.feat4 p{color:var(--mute);margin:0}
@media (max-width:860px){.feat4{grid-template-columns:1fr 1fr}.feat4 li:nth-child(3){border-left:0;padding-left:0}}
.intro{background:var(--bg2)}
.trust{list-style:none;padding:0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.trust li{border:1px solid var(--cyan);color:var(--cyan);padding:.35em 1em;border-radius:999px;font-weight:700}

/* Karten/Formulare */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px)}
.form{display:grid;gap:16px;margin-top:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-weight:600;font-size:.93rem}
input,select,textarea{font:inherit;color:var(--txt);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:.75em .9em;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);outline:none}
input:disabled,select:disabled{opacity:.45}
.invalid{border-color:var(--pink)!important}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}.chk input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--pink)}
.status:empty{display:none}.status{margin:0;padding:12px 16px;border-radius:10px;background:rgba(0,224,208,.12);border:1px solid var(--cyan)}
.status.err{background:rgba(255,45,136,.12);border-color:var(--pink)}
.warn,.note{border-left:4px solid var(--pink);background:rgba(255,45,136,.08);padding:12px 16px;border-radius:0 10px 10px 0;max-width:none}
.note{border-color:var(--cyan);background:rgba(0,224,208,.07)}
.seg{border:0;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}.seg legend{font-weight:700;margin-bottom:8px}
.seg label{display:block}.seg input{position:absolute;opacity:0;width:1px}
.seg span{display:block;padding:.55em 1.2em;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;font-weight:700}
.seg input:checked+span{background:var(--grad);color:#07070c;border-color:transparent}.seg input:focus-visible+span{outline:3px solid var(--cyan)}
.live{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--pink);margin:0 0 8px}
.live span{width:10px;height:10px;border-radius:50%;background:var(--pink);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.sec-check{background:linear-gradient(180deg,var(--bg),var(--bg2))}

/* Tarife */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin:12px 0 20px}
.tabs button{flex:none;font:inherit;font-weight:700;color:var(--txt);background:var(--card);border:1.5px solid var(--line);padding:.55em 1.2em;border-radius:999px;cursor:pointer}
.tabs [aria-selected=true]{background:var(--pink);border-color:var(--pink)}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:min(320px,84%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px}
.tcard{scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column}
.tcard[hidden]{display:none}
.tbadges{display:flex;gap:6px;margin:0 0 10px}.tb{background:var(--grad);color:#07070c;font-weight:800;font-size:.78rem;padding:.25em .7em;border-radius:6px}.tb2{background:var(--cyan)}
.tcard h3{font-size:1.6rem}
.tprice{margin:0}.tprice strong{font-size:2.2rem;line-height:1.1}.tprice strong.small{font-size:1.15rem}
.told{font-size:.9rem;margin:.2em 0}.tmeta{font-size:.82rem;color:var(--mute);border-block:1px solid var(--line);padding:8px 0;margin:10px 0}
.tact{margin-top:auto;display:grid;gap:8px}.tact .btn{width:100%;padding:.7em 1em}
.swipe{text-align:center;color:var(--mute);font-size:.88rem}
.wa-box{margin-top:32px;border:1px solid var(--wa);border-radius:var(--r);padding:24px;background:rgba(37,211,102,.06);display:grid;gap:8px;justify-items:start}
.wa-box p{margin:0}.wa-box small{color:var(--mute)}

/* Split-Sektionen */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.split+.split{margin-top:clamp(48px,7vw,88px)}
.split img{width:100%;aspect-ratio:16/11;object-fit:cover}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.rev img{order:-1}}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media (max-width:860px){.cols3{grid-template-columns:1fr}}
.teaser{color:var(--txt);text-decoration:none;display:flex;flex-direction:column}.teaser:hover{border-color:var(--pink);color:var(--txt)}
.teaser .check{font-size:.93rem}.more{margin-top:auto;color:var(--pink);font-weight:700}

.video,.map{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg2);border:1px solid var(--line);margin:24px 0;aspect-ratio:16/9;display:grid;place-items:center;text-align:center}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;border-radius:0}
.video p,.map p{position:relative;font-size:.85rem;color:var(--mute);margin:0 16px}
.play{position:relative;width:80px;height:80px;border-radius:50%;border:0;background:var(--pink);color:#fff;font-size:1.8rem;cursor:pointer}
.video iframe,.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map{aspect-ratio:21/9;align-content:center;gap:12px}
.stars{display:inline-block;margin-top:12px;color:var(--txt);text-decoration:none}.stars span{color:#ffc93c;letter-spacing:2px}
.loc{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px}.loc address{font-style:normal;font-size:1.1rem;margin-bottom:12px}
@media (max-width:640px){.loc{grid-template-columns:1fr}}
.dl{list-style:none;padding:0;display:grid;gap:8px}.dl a{display:block;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:10px;text-decoration:none}
.legal h2{font-size:1.2rem;margin-top:1.6em}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:var(--bg2);padding:56px 0 24px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.site-footer h2{font-size:1rem;color:var(--mute)}.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.site-footer nav a{color:var(--txt);text-decoration:none}.site-footer nav a:hover{color:var(--cyan)}
.site-footer p{color:var(--mute);margin-top:1em}
.foot-tel{font-size:1.6rem;font-weight:800;color:var(--txt);text-decoration:none}
.social{display:flex!important;gap:8px}.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--txt);text-decoration:none;font-size:.8rem;font-weight:700}
.copy{font-size:.8rem;color:var(--mute);margin-top:32px;border-top:1px solid var(--line);padding-top:20px;max-width:var(--w)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* Floating-Elemente */
.quickbar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:none;grid-template-columns:repeat(4,1fr);background:rgba(16,16,25,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.quickbar a,.quickbar button{display:grid;justify-items:center;gap:2px;padding:8px 0;color:var(--txt);text-decoration:none;font:600 .72rem var(--font);background:none;border:0;cursor:pointer}
.quickbar span{font-size:1.25rem;color:var(--cyan)}
@media (max-width:760px){.quickbar{display:grid}}
@media (min-width:761px){body{padding-bottom:0}}
.fab-wa{position:fixed;left:18px;bottom:84px;z-index:45;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.6)}
@media (min-width:761px){.fab-wa{bottom:24px}}
.chat{position:fixed;right:18px;bottom:84px;z-index:46}
@media (min-width:761px){.chat{bottom:24px}}
.chat-bubble{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--pink);color:var(--txt);border-radius:999px;padding:6px 16px 6px 6px;font:600 .88rem var(--font);cursor:pointer;box-shadow:0 8px 30px -8px rgba(255,45,136,.6)}
.chat-dot{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#07070c;font-weight:800}
@media (max-width:520px){.chat-teaser{display:none}.chat-bubble{padding:6px}}
.chat-win{position:absolute;right:0;bottom:60px;width:min(360px,calc(100vw - 36px));height:min(480px,70vh);background:var(--bg2);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;overflow:hidden}
.chat-win[hidden]{display:none}
.chat-win header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.chat-win header strong{flex:1}.chat-win header button{background:none;border:0;color:var(--mute);font:inherit;font-size:.8rem;cursor:pointer}
.chat-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:9px 13px;border-radius:14px;font-size:.92rem;line-height:1.45}
.msg.bot{background:var(--card);align-self:flex-start}.msg.me{background:var(--pink);align-self:flex-end}
.msg a{color:var(--cyan)}.msg.me a{color:#fff}
.chat-form{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}.chat-form .btn{padding:.6em 1em}
.chat-foot{font-size:.72rem;color:var(--mute);padding:0 12px 10px;margin:0}

.dlg{background:var(--bg2);color:var(--txt);border:1px solid var(--line);border-radius:18px;padding:28px;max-width:min(520px,92vw);width:100%}
.dlg::backdrop{background:rgba(0,0,0,.7)}
#calldlg{display:none}#calldlg[open]{display:grid;gap:12px}
.dlg-x{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--txt);font-size:1.2rem;cursor:pointer}
.dlg-pib h3{font-size:1rem;color:var(--cyan);margin-top:1.2em}.dlg-pib{max-height:88vh;overflow:auto}
.cookie{position:fixed;left:12px;right:12px;bottom:84px;z-index:60;max-width:560px;margin:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cookie div{display:flex;gap:8px;flex-wrap:wrap}.cookie p{font-size:.9rem}
@media (min-width:761px){.cookie{bottom:24px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== v4: Hero-Bild automatisch skalieren + Mobile-Optimierung ===== */
html,body{overflow-x:hidden}
.hero-img{margin:0;display:flex;justify-content:center;align-items:center}
.hero-img img{width:100%;height:auto;max-height:560px;aspect-ratio:auto;object-fit:contain;background:transparent;box-shadow:none;filter:drop-shadow(0 30px 50px rgba(255,45,136,.35))}
@media (max-width:860px){
  .hero-in{gap:20px}
  .hero-img{order:0}
  .hero-img img{aspect-ratio:auto;max-height:340px}
  .hero-txt{text-align:left}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .sec{padding:44px 0}
  h1{font-size:clamp(2rem,9vw,2.6rem)}
  h2{font-size:clamp(1.5rem,6.5vw,1.9rem)}
  .hero{padding-top:24px}
  .hero-sub{font-size:1.05rem}
  .meter{grid-template-columns:100px 1fr;gap:4px 14px}
  .meter svg,.meter>div{width:100px;height:100px}
  .meter>div strong{font-size:1.5rem}
  .meter-price strong{font-size:2rem}
  .hero .btn-lg{width:100%}
  .tiles3{margin-top:24px!important;gap:8px}
  .tiles3 li{padding:12px 14px}
  .feat4{grid-template-columns:1fr}
  .feat4 li,.feat4 li+li{padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}
  .logo small{display:none}
  .logo strong{font-size:.95rem}
  .card{padding:18px}
  .form .btn-lg,.tact .btn{width:100%}
  .row .btn{flex:1 1 100%}
  .carousel{grid-auto-columns:86%;margin-right:-16px;padding-right:16px}
  .tcard{padding:20px}
  .tprice strong{font-size:1.9rem}
  .split img{aspect-ratio:16/10}
  .loc{gap:16px}
  .map{aspect-ratio:4/3}
  .foot-tel{font-size:1.35rem}
  .dlg{padding:22px 18px}
  .cookie{left:8px;right:8px}
  .cookie div .btn{flex:1}
  input,select,textarea{font-size:16px} /* verhindert Zoom auf iPhone */
}
/* Floating-Buttons überlappen keine Inhalte */
@media (max-width:760px){
  .fab-wa{width:50px;height:50px;left:12px;bottom:78px}
  .chat{right:12px;bottom:78px}
  .chat-dot{width:38px;height:38px}
  .chat-win{position:fixed;left:8px;right:8px;bottom:136px;width:auto;height:min(460px,60vh)}
  .site-footer{padding-bottom:90px}
}
@media (min-width:861px){ .chat-teaser{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} }

/* ===== v5: Alle Bilder vollständig + automatisch skaliert, fehlende ausgeblendet ===== */
main img{width:100%;height:auto;max-width:100%;aspect-ratio:auto!important;object-fit:contain!important;background:transparent}
.split img{max-height:520px}
.split.noimg,.hero-in.noimg{grid-template-columns:1fr}
.split.noimg>div,.hero-in.noimg .hero-txt{max-width:760px}
.img-gone{display:none!important}
.video img{object-fit:cover!important;height:100%}

/* Bestandskunden-Pop-up */
.dlg-promo{text-align:center;max-width:min(460px,92vw);border:0;padding:0;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.dlg-promo .promo-top{background:#0b0b16;color:#fff;padding:28px 24px 22px;position:relative}
.dlg-promo .promo-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
.dlg-promo .promo-amount{display:block;font-size:3.4rem;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0}
.dlg-promo h2{color:#fff;font-size:1.45rem;margin:0}
.dlg-promo .promo-body{padding:20px 24px 24px;display:grid;gap:10px}
.dlg-promo .promo-body p{margin:0 auto 6px;color:var(--mute)}
.dlg-promo .btn{width:100%}
.dlg-promo .dlg-x{color:#fff}
.dlg-promo small{color:var(--mute);font-size:.75rem}
.bk-hint{border-left:4px solid var(--pink);background:rgba(230,0,126,.07);padding:12px 16px;border-radius:0 10px 10px 0;margin:0 0 16px}