/* =====================================================
   FloatLink – Frontend CSS  v5.0.0
   © Pascal Fries – IT-Service · pfries.de
   ===================================================== */

/* ── Root (position:fixed, anfangs unsichtbar) ────── */
#sfb-root {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
    transition: opacity .4s cubic-bezier(.34,1.2,.64,1),
                transform .4s cubic-bezier(.34,1.56,.64,1);
    transform-origin: bottom right;
}
#sfb-root.sfb-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

/* ── Positions-Klassen: Alignment ───────────────────── */
#sfb-root.sfb-pos-top-left,
#sfb-root.sfb-pos-center-left,
#sfb-root.sfb-pos-bottom-left    { align-items: flex-start; }
#sfb-root.sfb-pos-top-right,
#sfb-root.sfb-pos-center-right,
#sfb-root.sfb-pos-bottom-right   { align-items: flex-end; }

/* Transform-Origin je Position */
#sfb-root.sfb-pos-top-left,
#sfb-root.sfb-pos-top-center,
#sfb-root.sfb-pos-top-right      { transform-origin: top center; }
#sfb-root.sfb-pos-center-left    { transform-origin: center left; }
#sfb-root.sfb-pos-center-right   { transform-origin: center right; }
#sfb-root.sfb-pos-bottom-left    { transform-origin: bottom left; }
#sfb-root.sfb-pos-bottom-right   { transform-origin: bottom right; }
#sfb-root.sfb-pos-bottom-center  { transform-origin: bottom center; }

/* Bei Top-Positionen: Children unter Button */
#sfb-root.sfb-pos-top-left .sfb-children,
#sfb-root.sfb-pos-top-center .sfb-children,
#sfb-root.sfb-pos-top-right .sfb-children  { order: 2; }
#sfb-root.sfb-pos-top-left .sfb-btn-row,
#sfb-root.sfb-pos-top-center .sfb-btn-row,
#sfb-root.sfb-pos-top-right .sfb-btn-row   { order: 1; }

/* ── Button-Row (Bubble + Hauptbutton nebeneinander) ── */
.sfb-btn-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
  HTML-Reihenfolge in .sfb-btn-row:  [bubble] [button]
  flex-direction: row         → visuell [bubble][button] → Button rechts (Rand), Bubble links
  flex-direction: row-reverse → visuell [button][bubble] → Button links (Rand), Bubble rechts

  Für rechts positionierte Buttons (root ist right-aligned):
    → row: Button ist rechts (am Rand), Bubble erstreckt sich nach links ✓

  Für links positionierte Buttons (root ist left-aligned):
    → row-reverse: Button ist links (am Rand), Bubble erstreckt sich nach rechts ✓
*/

/* AUTO-MODUS: Bubble auf der seitenabgewandten (innenliegenden) Seite */
#sfb-root.sfb-pos-top-right .sfb-btn-row,
#sfb-root.sfb-pos-center-right .sfb-btn-row,
#sfb-root.sfb-pos-bottom-right .sfb-btn-row,
#sfb-root.sfb-pos-top-center .sfb-btn-row,
#sfb-root.sfb-pos-bottom-center .sfb-btn-row { flex-direction: row; }

#sfb-root.sfb-pos-top-left .sfb-btn-row,
#sfb-root.sfb-pos-center-left .sfb-btn-row,
#sfb-root.sfb-pos-bottom-left .sfb-btn-row   { flex-direction: row-reverse; }

/* MANUELL: Bubble immer LINKS vom Button */
#sfb-root.sfb-bubble-left .sfb-btn-row { flex-direction: row !important; }

/* MANUELL: Bubble immer RECHTS vom Button */
#sfb-root.sfb-bubble-right .sfb-btn-row { flex-direction: row-reverse !important; }

/* ── Hauptbutton ─────────────────────────────────────── */
#sfb-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
    flex-shrink: 0;
    position: relative;
}
#sfb-main:hover  { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.32); }
#sfb-main:active { transform: scale(0.96); }

.sfb-main-icon, .sfb-main-close {
    position: absolute;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .2s ease, transform .2s ease;
}
.sfb-main-icon  { opacity: 1; transform: rotate(0deg); }
.sfb-main-close { opacity: 0; transform: rotate(-90deg); }
#sfb-root.sfb-open .sfb-main-icon  { opacity: 0; transform: rotate(90deg); }
#sfb-root.sfb-open .sfb-main-close { opacity: 1; transform: rotate(0deg); }
.sfb-main-icon svg, .sfb-main-close svg { width: 24px; height: 24px; }

/* ── Unterbuttons-Wrapper ────────────────────────────── */
.sfb-children {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: inherit;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: opacity .22s ease, transform .22s ease;
}
#sfb-root.sfb-open .sfb-children {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0) scale(1);
}
.sfb-child:nth-child(1) { transition-delay: 0ms; }
.sfb-child:nth-child(2) { transition-delay: 40ms; }
.sfb-child:nth-child(3) { transition-delay: 80ms; }
.sfb-child:nth-child(4) { transition-delay: 120ms; }
.sfb-child:nth-child(5) { transition-delay: 160ms; }
.sfb-child:nth-child(6) { transition-delay: 200ms; }
.sfb-child:nth-child(7) { transition-delay: 240ms; }
.sfb-child:nth-child(8) { transition-delay: 280ms; }

/* ── Einzelner Unterbutton ───────────────────────────── */
.sfb-child {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,0,0,.22);
    transition: transform .18s ease, box-shadow .18s ease;
    flex-shrink: 0;
    position: relative;
}
.sfb-child:hover  { transform: scale(1.12); box-shadow: 0 5px 18px rgba(0,0,0,.3); }
.sfb-child:active { transform: scale(0.96); }
.sfb-child-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sfb-child-icon svg { width: 20px; height: 20px; }

/* ── Tooltip ─────────────────────────────────────────── */
.sfb-tooltip {
    position: absolute;
    white-space: nowrap;
    background: rgba(15,23,42,.88);
    color: #f8fafc;
    font-size: 12px; font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    line-height: 1.4; z-index: 10;
}
.sfb-child:hover .sfb-tooltip { opacity: 1; }
.sfb-tooltip-left  .sfb-tooltip { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.sfb-tooltip-left  .sfb-tooltip::after { content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%); border:5px solid transparent; border-left-color:rgba(15,23,42,.88); }
.sfb-tooltip-right .sfb-tooltip { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.sfb-tooltip-right .sfb-tooltip::after { content:''; position:absolute; right:100%; top:50%; transform:translateY(-50%); border:5px solid transparent; border-right-color:rgba(15,23,42,.88); }

/* ── Callout ─────────────────────────────────────────── */
@keyframes sfb-bubble-in {
    0%   { opacity:0; transform: scale(0.5) translateY(10px); }
    70%  { transform: scale(1.04) translateY(-2px); }
    100% { opacity:1; transform: scale(1) translateY(0); }
}
@keyframes sfb-bubble-out {
    to { opacity:0; transform: scale(0.8) translateY(4px); pointer-events:none; }
}
@keyframes sfb-bubble-pulse {
    0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.16); }
    50%      { box-shadow: 0 4px 28px rgba(0,0,0,.28); }
}

.sfb-bubble {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 10px 10px 14px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
    font-size: 13px; font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap; position: relative;
    animation: sfb-bubble-in .55s cubic-bezier(.34,1.56,.64,1) both,
               sfb-bubble-pulse 2.5s ease-in-out 1s infinite;
    line-height: 1.3; cursor: default; pointer-events: all;
}
.sfb-bubble.sfb-bubble-hide {
    animation: sfb-bubble-out .22s ease forwards;
}

/* ── Callout-Pfeil: AUTO-Modus ───────────────────────── */
/* Bubble links vom Button → Pfeil zeigt nach RECHTS (→) */
#sfb-root.sfb-pos-top-right    .sfb-bubble::after,
#sfb-root.sfb-pos-center-right .sfb-bubble::after,
#sfb-root.sfb-pos-bottom-right .sfb-bubble::after,
#sfb-root.sfb-pos-top-center   .sfb-bubble::after,
#sfb-root.sfb-pos-bottom-center .sfb-bubble::after {
    content: ''; position: absolute;
    right: -8px; top: 50%; transform: translateY(-50%);
    border: 9px solid transparent; border-right: 0;
    border-left-color: inherit;
    filter: drop-shadow(1px 0 0 rgba(0,0,0,.06));
}
/* Bubble rechts vom Button → Pfeil zeigt nach LINKS (←) */
#sfb-root.sfb-pos-top-left    .sfb-bubble::after,
#sfb-root.sfb-pos-center-left .sfb-bubble::after,
#sfb-root.sfb-pos-bottom-left .sfb-bubble::after {
    content: ''; position: absolute;
    left: -8px; top: 50%; transform: translateY(-50%);
    border: 9px solid transparent; border-left: 0;
    border-right-color: inherit;
    filter: drop-shadow(-1px 0 0 rgba(0,0,0,.06));
}

/* ── Callout-Pfeil: MANUELLE Seite ──────────────────── */
/* Bubble manuell LINKS → Pfeil zeigt RECHTS */
#sfb-root.sfb-bubble-left .sfb-bubble::after {
    content: ''; position: absolute;
    right: -8px; left: auto; top: 50%; transform: translateY(-50%);
    border: 9px solid transparent; border-right: 0;
    border-left-color: inherit;
    filter: drop-shadow(1px 0 0 rgba(0,0,0,.06));
}
/* Bubble manuell RECHTS → Pfeil zeigt LINKS */
#sfb-root.sfb-bubble-right .sfb-bubble::after {
    content: ''; position: absolute;
    left: -8px; right: auto; top: 50%; transform: translateY(-50%);
    border: 9px solid transparent; border-left: 0;
    border-right-color: inherit;
    filter: drop-shadow(-1px 0 0 rgba(0,0,0,.06));
}

/* Schließen-Button */
.sfb-bubble-x {
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .15s; padding: 0;
}
.sfb-bubble-x:hover { background: rgba(255,255,255,.35); }
.sfb-bubble-x svg   { width: 12px; height: 12px; }

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 480px) {
    #sfb-main  { width: 50px; height: 50px; }
    .sfb-child { width: 40px; height: 40px; }
    .sfb-tooltip { display: none; }
    .sfb-bubble  { font-size: 12px; padding: 8px 8px 8px 12px; }
}