/* ==========================================================================
   Schoolbird Multilingual – Frontend & Admin Styles
   Version 4.2.0

   Kontrastwerte (WCAG 2.1 / BITV 2.0):
     Text normal   #111418 auf #ffffff  = 18,5:1  (AAA)
     Text hover    #111418 auf #e3e9f0  = 15,1:1  (AAA)
     Text aktiv    #111418 auf #dce4ee  = 14,4:1  (AAA)
     Rahmen        #5a6470 auf #ffffff  =  6,0:1  (AA, UI-Element)
     Fokusring     #0b3d91 auf #ffffff  = 10,0:1  (AAA)

   Hinweis: Farb-, Hintergrund- und Rahmeneigenschaften sind mit !important
   abgesichert. Themes wie Hello/Elementor definieren globale button-Styles,
   die den Umschalter sonst unleserlich machen.
   ========================================================================== */

.sb-floating {
    --sb-bg: #ffffff;
    --sb-fg: #111418;
    --sb-border: #5a6470;
    --sb-hover: #e3e9f0;
    --sb-active: #dce4ee;
    --sb-focus: #0b3d91;
    --sb-shadow: 0 4px 18px rgba(0, 0, 0, .22);
    --sb-radius: 10px;

    position: fixed;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
}

/* --- Positionen ---------------------------------------------------------- */
.sb-floating.sb-pos-bottom-right { bottom: 20px; right: 20px; }
.sb-floating.sb-pos-bottom-left  { bottom: 20px; left: 20px; }
.sb-floating.sb-pos-top-right    { top: 20px; right: 20px; flex-direction: column-reverse; }
.sb-floating.sb-pos-top-left     { top: 20px; left: 20px; flex-direction: column-reverse; }

/* --- Button -------------------------------------------------------------- */
.sb-floating .sb-btn,
.sb-floating button.sb-btn {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 11px 17px !important;
    min-height: 46px;
    background: var(--sb-bg) !important;
    background-image: none !important;
    color: var(--sb-fg) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius) !important;
    box-shadow: var(--sb-shadow);
    cursor: pointer;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    white-space: nowrap;
    opacity: 1 !important;
    transition: background-color .15s ease, border-color .15s ease;
}

/* Kindelemente erben zwingend die Textfarbe des Buttons */
.sb-floating .sb-btn *,
.sb-floating .sb-item * {
    color: inherit !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.sb-floating .sb-btn:hover,
.sb-floating button.sb-btn:hover,
.sb-floating .sb-btn:focus,
.sb-floating .sb-btn:focus-visible,
.sb-floating .sb-btn:active {
    background: var(--sb-hover) !important;
    color: var(--sb-fg) !important;
    border-color: var(--sb-focus) !important;
}

.sb-floating .sb-btn:focus-visible {
    outline: 3px solid var(--sb-focus) !important;
    outline-offset: 2px;
}

/* Fallback fuer aeltere Browser ohne :focus-visible */
.sb-floating .sb-btn:focus:not(:focus-visible) {
    outline: 3px solid var(--sb-focus) !important;
    outline-offset: 2px;
}

.sb-floating .sb-icon { flex: 0 0 auto; display: block; }
.sb-floating .sb-text { font-weight: 500; }

/* --- Flaggen ------------------------------------------------------------- */
/* Groesser dargestellt, damit die Laender auch bei kleinen Emoji-Fonts
   erkennbar bleiben. Windows rendert Flaggen-Emojis teils als Laendercode
   (z.B. "TR") - deshalb sollte im Backend der Modus "Flaggen & Namen"
   aktiv sein, damit immer der Klartextname sichtbar ist. */
.sb-floating .sb-flag-main {
    font-size: 22px !important;
    line-height: 1 !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
    flex: 0 0 auto;
}

.sb-floating .sb-flag {
    font-size: 20px !important;
    line-height: 1 !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
    flex: 0 0 auto;
    width: 26px;
    text-align: center;
}

/* --- Menue --------------------------------------------------------------- */
.sb-floating .sb-menu {
    display: none;
    flex-direction: column;
    margin-bottom: 10px;
    padding: 6px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sb-bg) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
}

.sb-floating.sb-pos-top-right .sb-menu,
.sb-floating.sb-pos-top-left .sb-menu {
    margin-bottom: 0;
    margin-top: 10px;
}

.sb-floating.sb-open .sb-menu { display: flex; }

.sb-floating.sb-pos-bottom-right .sb-menu,
.sb-floating.sb-pos-top-right .sb-menu { align-self: flex-end; min-width: 100%; }
.sb-floating.sb-pos-bottom-left .sb-menu,
.sb-floating.sb-pos-top-left .sb-menu { align-self: flex-start; min-width: 100%; }

/* --- Menuepunkte --------------------------------------------------------- */
.sb-floating .sb-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 14px !important;
    min-height: 46px;
    box-sizing: border-box;
    background: transparent !important;
    color: var(--sb-fg) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.sb-floating .sb-item:hover,
.sb-floating .sb-item:focus,
.sb-floating .sb-item:focus-visible {
    background: var(--sb-hover) !important;
    color: var(--sb-fg) !important;
}

.sb-floating .sb-item:focus-visible {
    outline: 3px solid var(--sb-focus) !important;
    outline-offset: -3px;
}

.sb-floating .sb-item[aria-current="true"] {
    background: var(--sb-active) !important;
    font-weight: 600 !important;
}

/* Aktive Sprache nicht nur ueber Farbe kennzeichnen (BITV 1.4.1) */
.sb-floating .sb-item[aria-current="true"]::after {
    content: "\2713";
    margin-left: auto;
    padding-left: 12px;
    font-weight: 700;
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 600px) {
    .sb-floating { font-size: 16px; }
    .sb-floating .sb-btn { font-size: 16px !important; }
    .sb-floating .sb-item { font-size: 16px !important; }
    .sb-floating.sb-pos-bottom-right,
    .sb-floating.sb-pos-bottom-left { bottom: 14px; }
    .sb-floating .sb-menu { max-height: 50vh; }
}

/* --- Barrierefreiheit ---------------------------------------------------- */
@media (prefers-contrast: more) {
    .sb-floating {
        --sb-border: #000000;
        --sb-hover: #d3dbe6;
    }
    .sb-floating .sb-btn { border-width: 2px !important; }
}

/* Windows-Kontrastmodus: Systemfarben erzwingen */
@media (forced-colors: active) {
    .sb-floating .sb-btn,
    .sb-floating .sb-menu {
        border: 2px solid ButtonText !important;
        forced-color-adjust: none;
        background: ButtonFace !important;
        color: ButtonText !important;
    }
    .sb-floating .sb-item:hover,
    .sb-floating .sb-item:focus-visible {
        background: Highlight !important;
        color: HighlightText !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb-floating .sb-btn { transition: none !important; }
}

@media print {
    .sb-floating { display: none !important; }
}

/* ==========================================================================
   Admin-Bereich (Manueller Editor – Sprachauswahl)
   ========================================================================== */

.sb-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
    max-width: 1100px;
}

.sb-lang-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    text-decoration: none;
    color: #1d2327;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sb-lang-card:hover,
.sb-lang-card:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    color: #2271b1;
}