/* Sprachumschalter in der Kopfzeile. Bewusst zurueckhaltend gehalten: das Gold der Marke nur beim Ueberfahren, damit der Umschalter die Hauptaktionen (Anmelden, Warenkorb) nicht ueberstrahlt. */ .lang-switch { position: relative; display: inline-flex; } .lang-current { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(209, 173, 100, .28); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .lang-current:hover, .lang-switch.is-open .lang-current { border-color: rgba(209, 173, 100, .6); background: rgba(209, 173, 100, .08); } .lang-current:focus-visible { outline: 2px solid #d1ad64; outline-offset: 2px; } .lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; /* haengt rechts, im RTL-Layout automatisch links */ z-index: 60; min-width: 172px; margin: 0; padding: 6px; list-style: none; border: 1px solid rgba(209, 173, 100, .22); border-radius: 10px; background: #111820; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; color: #c8ced8; font-size: 14px; text-decoration: none; white-space: nowrap; } .lang-menu a:hover, .lang-menu a:focus-visible { background: rgba(209, 173, 100, .12); color: #fff; } .lang-menu a.active { color: #d1ad64; font-weight: 600; } /* Silbentrennung in Ueberschriften. Noetig wegen des Deutschen: "Grosshandelskollektionen" passt in keine Spalte und wuerde sonst mitten im Wort umbrechen ("Grosshandelskollekti onen"). Der Browser trennt nur richtig, wenn die Sprache am Element bekannt ist - die steht im , das i18n.php setzt. Russisch und Persisch profitieren ebenso, das Tuerkische kaum. */ h1, h2, h3, .auth-panel h2, .hero-title { hyphens: auto; overflow-wrap: break-word; } /* Sprachwahl im mobilen Menue: dort ist kein Platz fuer ein Aufklappmenue, deshalb liegen alle sechs Sprachen offen untereinander. */ .mobile-lang { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); } .mobile-lang-label { display: block; margin-bottom: 8px; color: #8c95a3; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .mobile-lang-item { display: flex; align-items: center; gap: 9px; } .mobile-lang-item.active { color: #d1ad64; font-weight: 600; }