/* ==========================================
   Datei-Pfad: /assets/css/kcc-fm.css
   Beschreibung: Funnel-Menue (Paket FM, Wunsch N377) – PC: Aufklapper "Menue"; Handy / Tablet hochkant: Liste im Hamburger-Menue.
   NEU 22.10.2026. Gilt nur im Funnel (funnel/funnel.php), nur fuer die Klassen kfm-*.
   Die Umschaltstelle ist dieselbe wie im Funnel selbst: 992 px (darueber PC-Darstellung, darunter Hamburger).
   ========================================== */

/* ---------- PC (ab 993 px): Knopf "Menue" + Aufklapper ---------- */
.kfm-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.kfm-btn {
    display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px; box-sizing: border-box;
    border-radius: 999px; border: 1px solid rgba(233, 197, 106, .4); background: rgba(233, 197, 106, .06);
    color: #F3ECDD; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .2px; line-height: 1;
    cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; white-space: nowrap;
}
.kfm-btn i { color: #EBCB72; }
.kfm-btn:hover, .kfm-btn:focus-visible, .kfm-wrap.kfm-open .kfm-btn { border-color: #EBCB72; color: #EBCB72; background: rgba(233, 197, 106, .12); outline: none; }
.kfm-car { font-size: .68rem; transition: transform .2s ease; }
.kfm-wrap.kfm-open .kfm-car { transform: rotate(180deg); }
.kfm-pop {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 250px; box-sizing: border-box;
    max-height: calc(100vh - 110px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px; background: rgba(10, 8, 6, .99); border: 1px solid rgba(233, 197, 106, .35); border-radius: 14px;
    width: max-content; max-width: min(380px, calc(100vw - 32px)); overflow-x: hidden;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .75); z-index: 10001;
}
.kfm-wrap.kfm-open .kfm-pop { display: block; }
.kfm-i {
    display: block; padding: 10px 14px; border-radius: 9px; box-sizing: border-box;
    color: #B6A98E; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.35; text-decoration: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    transition: background .15s ease, color .15s ease;
}
.kfm-i:hover, .kfm-i:focus-visible, .kfm-i.kfm-on { background: rgba(233, 197, 106, .1); color: #EBCB72; outline: none; }
.kfm-i.kfm-on { font-weight: 700; }
.kfm-i[hidden], a[data-kfm-f][hidden] { display: none !important; }

/* Offenes Menue liegt immer ganz oben: die schwebenden Hilfen der Seite (Webinar-Karte, Chat-Knopf) verstecken sich, solange es offen ist (sonst decken sie Punkte, Sprache und Knoepfe zu) */
body.kfm-pop-open #kccWebPopup, body.kfm-pop-open #mblSupportWidget { display: none !important; }

/* ---------- Handy / Tablet hochkant (bis 992 px): Liste im Hamburger-Menue ---------- */
@media (max-width: 992px) {
    body.menu-open #kccWebPopup, body.menu-open #mblSupportWidget { display: none !important; }
    /* Sprachliste: im Menue steht die Sprache ganz unten (hinter der langen Liste) - die Auswahl klappt deshalb nach OBEN auf und passt sich der Hoehe an, sonst wuerde sie aus dem Bild ragen */
    #funnel-nav-menu .lang-dropdown { top: auto; bottom: calc(100% + 10px); left: 0; right: 0; min-width: 0; width: auto; }
    #funnel-nav-menu .lang-list { max-height: 250px; max-height: max(80px, min(250px, calc(100vh - 340px))); }
    /* Seitenmenue: Liste scrollt in der Mitte, Sprache + Knoepfe bleiben unten sichtbar */
    #funnel-nav-menu.funnel-nav-container {
        height: 100vh; height: 100dvh; width: min(320px, 86vw); box-sizing: border-box;
        padding: 64px 22px 22px; gap: 14px; align-items: stretch; overflow: visible;
    }
    #funnel-nav-menu .kfm-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; position: static; }
    #funnel-nav-menu .kfm-btn { display: none; }
    #funnel-nav-menu .kfm-pop {
        display: flex; flex-direction: column; position: static; flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%;
        max-height: none; overflow-y: auto; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
    }
    /* flex: 0 0 auto = die Punkte schrumpfen nie (auf niedrigen Bildschirmen scrollt die Liste, statt die Punkte zusammenzudruecken) */
    #funnel-nav-menu .kfm-i { flex: 0 0 auto; padding: 13px 4px; border-radius: 0; font-size: 15px; white-space: normal; border-bottom: 1px solid rgba(233, 197, 106, .12); }
    #funnel-nav-menu .kfm-i.kfm-on { background: transparent; color: #EBCB72; box-shadow: inset 3px 0 0 #EBCB72; padding-left: 12px; }
    #funnel-nav-menu .mbl-custom-lang-selector, #funnel-nav-menu > a.kc-nav-link, #funnel-nav-menu > a.kc-cta { flex: 0 0 auto; }
    /* Die Anpassungs-Automatik der Seite (kcc-gold.js) haelt das geschlossene Menue ausserhalb des Bildes fuer "zu breit" und stellt die Sprach-Taste um (Flagge riesig, Text darunter); beim Oeffnen blieb das teils sichtbar. overflow:hidden nimmt die Taste aus dieser Automatik heraus. */
    #funnel-nav-menu .lang-btn { overflow: hidden; }
    #funnel-nav-menu > a.kc-nav-link, #funnel-nav-menu > a.kc-cta { text-align: center; justify-content: center; box-sizing: border-box; width: 100%; }
}
/* niedrige Bildschirme (Handy quer): etwas enger, damit Sprache + Knoepfe nicht ueber den Rand rutschen */
@media (max-width: 992px) and (max-height: 520px) {
    #funnel-nav-menu.funnel-nav-container { padding-top: 54px; gap: 8px; }
    #funnel-nav-menu .kfm-i { padding: 9px 4px; font-size: 14px; }
    /* Sprache und die zwei Knoepfe unten etwas niedriger, damit mehr Platz fuer die Liste bleibt */
    #funnel-nav-menu .lang-btn { height: 38px; }
    #funnel-nav-menu > a.kc-nav-link, #funnel-nav-menu > a.kc-cta { height: 38px; min-height: 0; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; }
}