:root {
--qcb-btn-size:         52px;
--qcb-icon-size:        20px;
--qcb-font-size:        14px;
--qcb-font-family:      inherit;
--qcb-shadow:           0 4px 14px rgba(0, 0, 0, 0.28);
--qcb-border-w:         0px;
--qcb-border-col:       transparent;
--qcb-radius:           26px;
--qcb-offset:           50%;
--qcb-edge-offset:      12px;
--qcb-bg:               #333333;
--qcb-fg:               #ffffff;
--qcb-hover-fg:         var(--qcb-fg);
--qcb-hover-brightness: 110;
--qcb-trans-dur:        350ms;
--qcb-trans-ease:       cubic-bezier(0.4, 0, 0.2, 1);
} .qcb-wrapper {
position:       fixed;
top:            var(--qcb-offset);
transform:      translateY(-50%);
z-index:        9999;
display:        flex;
flex-direction: column;
gap:            8px;
pointer-events: none;
} .qcb-pos-right { align-items: flex-end; }
.qcb-pos-left  { align-items: flex-start; } .qcb-style-attached.qcb-pos-right { right: 0; }
.qcb-style-attached.qcb-pos-left  { left:  0; } .qcb-style-standalone.qcb-pos-right { right: var(--qcb-edge-offset); }
.qcb-style-standalone.qcb-pos-left  { left:  var(--qcb-edge-offset); } .qcb-btn {
display:          flex;
align-items:      center;
text-decoration:  none;
overflow:         hidden;
pointer-events:   all;
cursor:           pointer;
color:            var(--qcb-fg);
background-color: var(--qcb-bg);
box-shadow:       var(--qcb-shadow);
border:           var(--qcb-border-w) solid var(--qcb-border-col);
font-family:      var(--qcb-font-family);
font-size:        var(--qcb-font-size);
line-height:      1; transition:
filter     var(--qcb-trans-dur) var(--qcb-trans-ease),
box-shadow var(--qcb-trans-dur) var(--qcb-trans-ease),
color      var(--qcb-trans-dur) var(--qcb-trans-ease);
} .qcb-btn:hover,
.qcb-btn:focus-visible {
filter:    brightness(calc(var(--qcb-hover-brightness) / 100));
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
color:      var(--qcb-hover-fg);
} .qcb-btn:focus-visible {
outline:        3px solid currentColor;
outline-offset: -3px;
} .qcb-pos-right .qcb-btn { flex-direction: row; }
.qcb-pos-left  .qcb-btn { flex-direction: row-reverse; } .qcb-style-attached.qcb-pos-right .qcb-btn {
border-radius: var(--qcb-radius) 0 0 var(--qcb-radius); }
.qcb-style-attached.qcb-pos-left .qcb-btn {
border-radius: 0 var(--qcb-radius) var(--qcb-radius) 0; } .qcb-style-standalone.qcb-pos-right .qcb-btn {
border-radius: var(--qcb-radius); }
.qcb-style-standalone.qcb-pos-left .qcb-btn {
border-radius: var(--qcb-radius); } .qcb-icon {
display:         flex;
align-items:     center;
justify-content: center;
width:           var(--qcb-btn-size);
height:          var(--qcb-btn-size);
flex-shrink:     0;
font-size:       var(--qcb-icon-size);
color:           inherit;
} .qcb-label {
display:        block;
white-space:    nowrap;
color:          inherit;
font-weight:    600;
letter-spacing: 0.02em;
overflow:       hidden;
} .qcb-hover-slide .qcb-label {
max-width: 0;
padding:   0;
opacity:   1;
transition:
max-width var(--qcb-trans-dur) var(--qcb-trans-ease),
padding   var(--qcb-trans-dur) var(--qcb-trans-ease);
}
.qcb-hover-slide .qcb-btn:hover  .qcb-label,
.qcb-hover-slide .qcb-btn:focus  .qcb-label,
.qcb-hover-slide .qcb-btn.qcb-tapped .qcb-label {
max-width: 220px;
padding:   0 14px;
}
/* ═══════════════════════════════════════════════════════════════════
Hover-Verhalten: FADE
Label blendet bei fester Breite ein
═══════════════════════════════════════════════════════════�