/* sprache.css — die Sprachwahl (layout.js sprachwahl()).
   Seit 03.10.2026 ein Drop-up im Fuss (Enrico: „kein Umschalter, sondern ein Drop-up-Menue, professionell passend“):
   ein Knopf mit Flagge, Sprache und Pfeil; darueber klappt die Liste auf, die aktive mit Haken. Es ist ein <details> —
   ohne JavaScript klappt es von selbst auf; app.js macht ein Menue daraus (Klick daneben/Esc schliesst, Pfeiltasten).
   Die Flaggen sind SVG (Emoji-Flaggen zeigt Windows nicht). Gleiche Sprache wie das Konto-Menue (web.css .ich-pop). */

.sw { position: relative; flex: none; }

.sw-knopf { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px 0 11px;
            border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,.025);
            font: 600 12.5px/1 var(--f-body); color: var(--txt-2); white-space: nowrap; user-select: none;
            transition: border-color var(--t), background var(--t), color var(--t); }
.sw-knopf:hover { border-color: var(--line-strong); background: rgba(255,255,255,.04); color: var(--txt); }
.menu-sum:focus-visible .sw-knopf { outline: 2px solid var(--blue-lite); outline-offset: 2px; }
.sw-pfeil { width: 13px; height: 13px; margin-left: 1px; color: var(--txt-3); transition: transform var(--t), color var(--t); }
.sw.open .sw-knopf, .sw[open] .sw-knopf { border-color: var(--line-strong); background: rgba(255,255,255,.05); color: var(--txt); }
.sw.open .sw-pfeil, .sw[open] .sw-pfeil { transform: rotate(180deg); color: var(--txt-2); }

/* Das Fenster klappt NACH OBEN auf (im Fuss ist darunter kein Platz). */
.sw[open] > .sw-pop, .sw.open > .sw-pop { display: block; }
.sw-pop { top: auto; bottom: calc(100% + 8px); right: 0; min-width: 212px; padding: 6px; border-radius: 12px;
          background: linear-gradient(180deg, #121d34 0%, #0d1629 100%); border: 1px solid rgba(255,255,255,.07);
          box-shadow: 0 -10px 40px -18px rgba(0,0,0,.85), 0 28px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(3,6,14,.7),
                      inset 0 1px 0 rgba(255,255,255,.05);
          transform-origin: bottom right; }
.sw.menu.open .sw-pop { animation: sw-ein .16s cubic-bezier(.2,.9,.3,1); }
@keyframes sw-ein { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.sw-titel { margin: 0; padding: 8px 10px 7px; font: 700 10.5px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase;
            color: var(--txt-4); }
.sw-pop .sw-eintrag { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: 8px;
                      font: 600 13.5px/1 var(--f-body); color: var(--txt-2); }
.sw-pop .sw-eintrag:hover, .sw-pop .sw-eintrag:focus-visible { background: rgba(95,169,255,.08); color: var(--txt); outline: none; }
.sw-pop .sw-eintrag.on { color: var(--txt); }
.sw-kurz { margin-left: auto; font: 700 10.5px/1 var(--f-head); letter-spacing: .08em; color: var(--txt-4); }
.sw-pop .sw-eintrag .sw-haken { width: 15px; height: 15px; margin-left: 2px; color: var(--blue-lite); visibility: hidden; }
.sw-pop .sw-eintrag.on .sw-haken { visibility: visible; }

/* Die Flagge: 3:2, feine helle Kante (auf Dunkel verschwindet sonst das Schwarz der deutschen), kleiner Schatten. */
.lx-flagge { display: block; flex: none; width: 20px; height: 13.5px; border-radius: 2.5px;
             background: center / cover no-repeat;
             box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.4); }
.sw-pop .sw-eintrag:not(.on) .lx-flagge { opacity: .78; filter: saturate(.8); transition: opacity var(--t), filter var(--t); }
.sw-pop .sw-eintrag:hover .lx-flagge, .sw-pop .sw-eintrag:focus-visible .lx-flagge { opacity: 1; filter: none; }

.lx-flagge-de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath fill='%23000' d='M0 0h5v1H0z'/%3E%3Cpath fill='%23DD0000' d='M0 1h5v1H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E"); }
.lx-flagge-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); }

/* Fuss: links neben dem Rechtlichen. Auf dem Handy steht der Knopf links — dort klappt das Fenster nach rechts auf. */
.ft-legal-r { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .ft-legal-r { width: 100%; justify-content: space-between; }
  .ft-sprache .sw-pop { right: auto; left: 0; transform-origin: bottom left; }
}