/* Black-Week-Querverweise: Balken, VPS-Block, Produkt-Hinweis (resources/views/black-friday/{bar,vps-notice,product-hint}).
   Präfix bf-. Eigenständig, wird ohne black-friday.css geladen. Schwarz im hellen und im dunklen Theme. */
.bf-bar,.bf-vps-notice,.bf-hint{--bf-y:var(--ui-y,#ffcc02);--bf-black:#000;--bf-mute:#9a9a9a;font-family:var(--ui-font,inherit)}
.bf-bar[hidden]{display:none}
.bf-bar{display:flex;align-items:stretch;background:var(--bf-black);border-bottom:1px solid #1d1d1d;font-size:.8125rem;line-height:1.4}
.bf-bar-link{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px 8px 18px;color:#fff;text-decoration:none}
.bf-bar-link b{color:var(--bf-y);font-weight:600}
.bf-bar-link i{color:var(--bf-y);font-size:.75em;flex:none;transition:transform .15s ease}
.bf-bar-link:hover,.bf-bar-link:focus-visible{color:#fff}
.bf-bar-link:hover i,.bf-bar-link:focus-visible i{transform:translateX(3px)}
.bf-bar-link:focus-visible,.bf-bar-close:focus-visible,.bf-notice-btn:focus-visible,.bf-hint a:focus-visible{outline:2px solid var(--bf-y);outline-offset:-2px}
.bf-bar-close{flex:none;min-width:44px;min-height:40px;border:0;background:transparent;color:#8a8a8a;cursor:pointer;transition:color .15s ease}
.bf-bar-close:hover,.bf-bar-close:focus-visible{color:#fff}

/* VPS-Block: überlappt den unteren Rand des Hero (der hat 130px Polster); die Klassen-Karten rücken darunter */
.bf-vps-notice{position:relative;z-index:3;margin-top:-72px}
.bf-notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;border-radius:14px;padding:22px 26px;color:#fff;border:1px solid #262626;box-shadow:0 14px 36px rgba(0,0,0,.28);background:radial-gradient(420px 220px at 92% 40%,rgba(255,204,2,.30),transparent 70%),var(--bf-black)}
.bf-notice-title{margin:0 0 4px;font-size:1.25rem;font-weight:700;color:#fff}
.bf-notice-text{margin:0;max-width:620px;color:#c4c4c4;font-size:.95rem;line-height:1.5}
.bf-notice-btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--bf-y);color:#000;font-weight:600;border-radius:10px;padding:.6rem 1.2rem;text-decoration:none;white-space:nowrap;box-shadow:0 8px 28px rgba(255,204,2,.35);transition:transform .15s ease,box-shadow .15s ease}
.bf-notice-btn:hover,.bf-notice-btn:focus-visible{color:#000;transform:translateY(-1px);box-shadow:0 10px 32px rgba(255,204,2,.5)}
.bf-notice-btn:focus-visible{outline-color:#fff}
.bf-vps-notice + .vps-classes{margin-top:24px}

/* Produkt-Hinweis */
.bf-hint{margin:18px auto;border-radius:8px;padding:10px 14px;font-size:.875rem;line-height:1.5;background:var(--bf-black);color:#fff;border-left:5px solid var(--bf-y)}
.bf-hint b{color:var(--bf-y);font-weight:600}
.bf-hint a{color:var(--bf-y);font-weight:600;text-decoration:none;white-space:nowrap}
.bf-hint a:hover,.bf-hint a:focus-visible{color:#fff}
.bf-hint a i{font-size:.8em}
@media (max-width:575.98px){.bf-bar-link{padding-left:14px}.bf-notice{padding:18px}.bf-notice-btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.bf-bar-link i,.bf-notice-btn{transition:none}}