/* Eigene Ergaenzungen zum Lagom-Stil "modern".
   Diese Datei wird von templates/lagom2/includes/head.tpl automatisch
   eingebunden, sobald sie existiert (Zweig "Custom"). Sie liegt damit unter
   core/ und wird von einem Theme-Update ueberschrieben - vor jedem Lagom-
   Update sichern und danach zurueckspielen. */

/* --- Landesvorwahl-Auswahl klappt nach oben auf ------------------------- */
/* Die Felder stehen fast immer am unteren Rand einer Karte oder in der
   letzten Tabellenzeile. Nach unten ragte die 200 Pixel hohe Liste 184 Pixel
   aus dem Kasten heraus (am 05.09.2026 auf der Geraeteseite gemessen) und lag
   je nach Scrollstand unter dem sichtbaren Bereich. Die Bibliothek klappt von
   selbst erst dann nach oben, wenn bereits das Browserfenster zu klein ist -
   das greift zu spaet. Gilt fuer alle Vorwahl-Auswahlen: Kundenbereich,
   Bestellweg, Registrierung. */
.intl-tel-input .country-list,
.iti .iti__country-list {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: -1px !important;
    /* Schatten nach oben, sonst wirkt die Liste losgeloest vom Feld. */
    box-shadow: 0 -8px 16px -6px rgba(0, 0, 0, .35) !important;
}

/* Das Dach zeigt nach oben, weil die Liste nach oben aufgeht.
   Geschlossen: Spitze oben. Geoeffnet (die Klasse .up setzt die Bibliothek
   selbst): Spitze unten, also "wieder zuklappen". Ohne diese Umkehr zeigte
   der Pfeil in die Richtung, in die gerade nichts passiert. */
.intl-tel-input .selected-flag .iti-arrow {
    border-top: none !important;
    border-bottom: 4px solid var(--ui-icon-color, #acafb9) !important;
}
.intl-tel-input .selected-flag .iti-arrow.up {
    border-bottom: none !important;
    border-top: 4px solid var(--ui-icon-color, #acafb9) !important;
}

/* Vorsorglich fuer die neuere Fassung der Bibliothek, falls eine Seite sie
   nachlaedt. Aktuell laeuft ueberall die aeltere mit den Klassen oben. */
.iti__selected-flag .iti__arrow {
    border-top: none !important;
    border-bottom: 4px solid var(--ui-icon-color, #acafb9) !important;
}
.iti__selected-flag .iti__arrow--up {
    border-bottom: none !important;
    border-top: 4px solid var(--ui-icon-color, #acafb9) !important;
}