/**
 * Quick Contact Buttons – Frontend-Stile v1.2.0
 *
 * Hover: reines CSS :hover auf .qcb-btn – kein JavaScript.
 * Animation: max-width + padding auf dem LABEL (explizite Zahlen → smooth).
 *
 * Layout:
 *   Rechts – flex-direction: row         → [label LINKS][icon RECHTS am Rand]
 *   Links  – flex-direction: row-reverse → [icon LINKS am Rand][label RECHTS]
 */

/* ═══════════════════════════════════════════════════════════════════
   CSS Custom Properties – Fallbacks
   ═══════════════════════════════════════════════════════════════════ */
: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);
}

/* ═══════════════════════════════════════════════════════════════════
   Container
   ═══════════════════════════════════════════════════════════════════ */
.qcb-wrapper {
    position:       fixed;
    top:            var(--qcb-offset);
    transform:      translateY(-50%);
    z-index:        9999;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;   /* links: jeder Button nur eigene Breite */
    gap:            8px;
    pointer-events: none;
}

/* Rechts: Buttons bündig am rechten Rand ausrichten */
.qcb-pos-right { align-items: flex-end; }

.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); }

/* ═══════════════════════════════════════════════════════════════════
   Button – Basis
   ═══════════════════════════════════════════════════════════════════ */
.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);
}

/* Visuelles Feedback beim Hover */
.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);
    outline:    none;
}

.qcb-btn:focus-visible {
    outline:        3px solid currentColor;
    outline-offset: -3px;
}

/* ═══════════════════════════════════════════════════════════════════
   Richtung + Border-Radius
   row         → Label LINKS,  Icon RECHTS (rechte Seite)
   row-reverse → Icon LINKS,   Label RECHTS (linke Seite)
   ═══════════════════════════════════════════════════════════════════ */
.qcb-style-attached.qcb-pos-right .qcb-btn,
.qcb-style-standalone.qcb-pos-right .qcb-btn {
    flex-direction: row;
}

.qcb-style-attached.qcb-pos-left .qcb-btn,
.qcb-style-standalone.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,
.qcb-style-standalone.qcb-pos-left  .qcb-btn { border-radius: var(--qcb-radius); }

/* ═══════════════════════════════════════════════════════════════════
   Icon – feste Größe, kein Schrumpfen
   ═══════════════════════════════════════════════════════════════════ */
.qcb-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--qcb-btn-size);
    height:          var(--qcb-btn-size);
    flex-shrink:     0;          /* Icon schrumpft nie */
    font-size:       var(--qcb-icon-size);
    color:           inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   Label – Basis (kein Padding, kein max-width: modes steuern das)
   ═══════════════════════════════════════════════════════════════════ */
.qcb-label {
    display:        block;
    white-space:    nowrap;
    overflow:       hidden;
    min-width:      0;
    color:          inherit;
    font-weight:    600;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════
   SLIDE-Modus
   Ausgangszustand: Label 0px breit (unsichtbar), Icon füllt Button.
   Hover: Label gleitet auf 220px + bekommt Innenabstand.
   ═══════════════════════════════════════════════════════════════════ */
.qcb-hover-slide .qcb-label {
    max-width: 0;
    padding:   0;
    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-visible .qcb-label {
    max-width: 220px;
    padding:   0 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   FADE-Modus
   ═══════════════════════════════════════════════════════════════════ */
.qcb-hover-fade .qcb-label {
    padding:    0 14px;
    opacity:    0;
    transition: opacity var(--qcb-trans-dur) var(--qcb-trans-ease);
}

.qcb-hover-fade .qcb-btn:hover .qcb-label,
.qcb-hover-fade .qcb-btn:focus-visible .qcb-label {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .qcb-wrapper { gap: 6px; }
    .qcb-icon {
        width:     calc(var(--qcb-btn-size) * 0.88);
        height:    calc(var(--qcb-btn-size) * 0.88);
        font-size: calc(var(--qcb-icon-size) * 0.88);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Barrierefreiheit: Reduzierte Bewegung
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .qcb-btn,
    .qcb-label { transition: none !important; }
}