/* File: fab | Version: 1.03.0 | Date: 2026-08-09 */
/* v1.03.0: .fab-sub-row/.fab-sub-label/.fab-sub-template ersetzt durch eine
   einzige .fab-pill (Icon + Titel-Ausschnitt in einem klickbaren Element,
   vorher zwei sich überlappende Elemente). */
/* File: fab | Version: 1.02.0 | Date: 2026-08-09 */
/* v1.02.0: .fab-sub-row/.fab-sub-label — sichtbares Titel-Label links neben
   jedem Favoriten-Schnellauswahl-Button (vorher nur per Hover-Title
   erkennbar, auf Mobile also gar nicht). */
/* File: fab | Version: 1.01.0 | Date: 2026-08-09 */
/* v1.01.0: .fab-sub-template (favorisierte Vorlagen-Schnellauswahl) etwas
   kleiner als der "Vorlagen"-Hauptbutton, damit die Hierarchie optisch
   klar bleibt (mehrere Sterne + 1 Bookmark-Button oberhalb des "+"). */
/* File: fab | Version: 1.00.0 | Date: 2026-08-09 */
/* v1.00.0: Sub-Button "Vorlagen" (.fab-sub) — initial versteckt, faehrt bei
   .fab-open am Wrapper per Transform/Opacity nach oben aus. Basis-Regeln
   (.fab, .fab-button, .fab-button:active) bleiben in style.css v1.08
   bestehen und werden hier nicht dupliziert; nur das Sub-Button-Delta. */

.fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.fab-sub {
    width: 44px;
    height: 44px;
    font-size: 20px;
    background-color: var(--primary, #547a8c);
    opacity: 0;
    transform: translateY(12px) scale(0.8);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fab.fab-open .fab-sub {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.fab-sub .material-symbols-outlined {
    font-size: 22px;
}

.fab-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background-color: var(--primary, #547a8c);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    align-self: flex-end;
    opacity: 0;
    transform: translateY(12px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fab.fab-open .fab-pill {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.fab-pill .material-symbols-outlined {
    font-size: 19px;
    flex-shrink: 0;
}

.fab-pill-label {
    font-size: 13px;
    font-weight: 500;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .fab selbst ist in style.css align-items:center — hier überschrieben,
   damit alle Buttons (auch die breitere Pille) rechtsbündig auf derselben
   vertikalen Linie bleiben. */
#avFab {
    align-items: flex-end;
}