/* "Swap & Krypto" am Lobby-ATM: kleiner Rundhotspot im Stil der Header-/Raumhotspots
   (Goldring laeuft beim Ueberfahren auf, Cremeflaeche oeffnet sich), Label mit Wisch. */
.bb-atm-swap{position:fixed;left:0;top:0;z-index:11;display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;cursor:pointer;color:#efe3cf;
  opacity:0;pointer-events:none;transition:opacity .45s ease;font-family:'Broche','Helvetica Neue',sans-serif;will-change:transform}
.bb-atm-swap[hidden]{display:none}
.bb-atm-swap.an{opacity:1;pointer-events:auto}
.bb-atm-swap .as-ring{position:relative;width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:rgba(18,16,14,.42);box-shadow:inset 0 0 0 1px rgba(209,173,105,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow:hidden;transition:background .55s cubic-bezier(.22,.8,.2,1)}
.bb-atm-swap .as-ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 60%,#fff6e6 0,#efe3cf 55%,#e7cf9f 100%);clip-path:circle(0% at 50% 50%);transition:clip-path .7s cubic-bezier(.22,.8,.2,1)}
.bb-atm-swap .as-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.bb-atm-swap .as-ring circle{fill:none;stroke:#d1ad69;stroke-width:1.3;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset .7s cubic-bezier(.22,.8,.2,1)}
.bb-atm-swap .as-symbol{position:absolute;left:0;top:0;width:46px;height:46px;display:grid;place-items:center;color:#efe3cf;transition:color .55s ease,transform .6s cubic-bezier(.22,.8,.2,1)}
.bb-atm-swap .as-symbol svg{width:20px;height:20px}
.bb-atm-swap .as-label{font-size:12px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;opacity:.9}
.bb-atm-swap .as-label .bb-wisch{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.45)}
.bb-atm-swap:is(:hover,:focus-visible) .as-ring::before{clip-path:circle(72% at 50% 50%)}
.bb-atm-swap:is(:hover,:focus-visible) .as-ring circle{stroke-dashoffset:0}
.bb-atm-swap:is(:hover,:focus-visible) .as-symbol{color:#15120f;transform:rotate(180deg)}
.bb-atm-swap:focus-visible{outline:none}
.bb-atm-swap:focus-visible .as-ring{box-shadow:inset 0 0 0 1px rgba(209,173,105,.7),0 0 0 3px rgba(239,227,207,.55)}
/* Klick: kurzer Puls nach aussen */
.bb-atm-swap.as-klick .as-ring{animation:as-puls .5s cubic-bezier(.22,.8,.2,1)}
@keyframes as-puls{0%{box-shadow:inset 0 0 0 1px rgba(209,173,105,.7),0 0 0 0 rgba(209,173,105,.55)}100%{box-shadow:inset 0 0 0 1px rgba(209,173,105,.7),0 0 0 18px rgba(209,173,105,0)}}
html.bb-atm-offen .bb-atm-swap{opacity:0!important;pointer-events:none!important}
html.bb-ruhig .bb-atm-swap *,html.bb-ruhig .bb-atm-swap{transition-duration:.01ms!important;animation:none!important}
html.bb-kontrast .bb-atm-swap .as-ring{background:rgba(0,0,0,.75);box-shadow:inset 0 0 0 2px #fff}
/* Infobereich: Kennzahl und eigener Abschnitt */
#bb-info .kennzahl{display:flex;align-items:baseline;gap:14px;margin:6px 0 24px;padding:16px 0;border-top:1px solid rgba(33,29,23,.14);border-bottom:1px solid rgba(33,29,23,.14)}
#bb-info .kennzahl strong{font-family:'Broche','Helvetica Neue',sans-serif;font-weight:400;font-size:clamp(30px,2.6vw,40px);letter-spacing:.04em;color:#9a7432;line-height:1}
#bb-info .kennzahl span{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;letter-spacing:.04em;color:#4d463c;line-height:1.35}
#bb-info .zusatz{margin-top:30px;padding-top:22px;border-top:1px solid rgba(33,29,23,.14)}
#bb-info .zusatz .kategorie{font-size:12px;margin-bottom:10px}
#bb-info .zusatz p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.55;color:#3a342c;margin:0 0 12px}
#bb-info[data-quelle="atm-swap"] .fakten{grid-template-columns:1fr;gap:4px 0}
#bb-info[data-quelle="atm-swap"] .fakten dt{font-weight:600;color:#1d1a15;margin-top:10px}
#bb-info[data-quelle="atm-swap"] .fakten dd{color:#3a342c;line-height:1.5}
@media (max-width:760px){.bb-atm-swap .as-label{font-size:11px;letter-spacing:.2em}}