/* Teko eigens geladen: das Theme liefert Teko nicht auf allen Seiten (Kasse, Warenkorb, Konto ausgenommen). Lokales Asset des MU-Plugins. */
@font-face { font-family: gxTeko; src: url("/wp-content/mu-plugins/gcom360-schrift-teko/teko-semibold-latin-ext-v1.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* GCOM360 Sprachumschalter „Lights out“ (Betreiber-Wahl 31.10.2026, Richtung A).
   Weltkugel im Header öffnet eine Box am Icon: je freigegebener Sprache eine Ampelspalte mit zwei Lampen,
   Kürzel, Name in eigener Sprache und Flagge. Beim Öffnen zünden die Lampen Spalte für Spalte rot, gehen aus,
   die aktive Sprache leuchtet grün. Ab sieben Sprachen Liste mit Lampe als Statuspunkt. Mobil Bottom Sheet.
   Alle Klassen unter .gx-sprache, damit nichts in Theme oder Elementor ausläuft. */
html body .gx-sprache { --gx-flaeche-1: #1a1a1a; --gx-flaeche-2: #2a2a2a; --gx-akzent: #FF7500; --gx-text: #f2f2f2; --gx-text-2: #a8a8a8;
  --gx-glow: #FF5B05; --gx-ruhe: 0 0 25px -10px rgba(255,255,255,.47843137254901963); --gx-aktiv: 0 0 25px 0 #FF5B05; --gx-gruen: #2bd46b; --gx-rot: #ff2a1a; --gx-dauer-auf: 220ms; --gx-takt: 80ms;
  position: relative; display: inline-flex; color: var(--gx-text); font-family: Inter, system-ui, sans-serif; }
html body .gx-sprache *, html body .gx-sprache *::before, html body .gx-sprache *::after { box-sizing: border-box; }

/* Knopf: Weltkugel mit Kürzelschild (Mini-Flagge + Kürzel) */
html body .gx-sprache__knopf { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #0000007D; border-radius: 5px; background: #000; color: var(--gx-akzent); box-shadow: var(--gx-ruhe); cursor: pointer; transition: box-shadow 300ms ease; }
html body .gx-sprache__knopf svg { width: 30px; height: 30px; transition: color 160ms ease; }
/* gefüllte Symbole erben die Farbe; Umriss-Symbole (fill="none") behalten ihre Füllung und zeichnen mit stroke */
html body .gx-sprache__knopf svg:not([fill="none"]) { fill: currentColor; }
html body .gx-sprache__knopf svg[fill="none"] { stroke: currentColor; }
html body .gx-sprache__knopf:hover, html body .gx-sprache__knopf:active, html body .gx-sprache__knopf[aria-expanded="true"] { box-shadow: var(--gx-aktiv); }
html body .gx-sprache__knopf:focus-visible { outline: 2px solid var(--gx-akzent); outline-offset: 3px; }
html body .gx-sprache__schild { position: absolute; right: -16px; bottom: -4px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 1px 3px; border-radius: 3px; background: var(--gx-akzent); color: #111; font-family: gxTeko, Teko, Inter, system-ui, sans-serif; font-size: 15px; line-height: 1; letter-spacing: .02em; box-shadow: 0 1px 3px rgba(0,0,0,.45); pointer-events: none; }
html body .gx-sprache__schild .gx-sprache__flagge { width: 13px; height: 9px; border-radius: 1px; }
/* Pfeilspitze unter der Weltkugel, wenn offen (nur Desktop) */
html body .gx-sprache__knopf[aria-expanded="true"]::after { content: ''; position: absolute; left: 50%; bottom: -24px; width: 14px; height: 14px; background: #262626; transform: translateX(-50%) rotate(45deg); border-left: 1px solid rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08); z-index: 1001; }

/* Box */
html body .gx-sprache__box { position: absolute; z-index: 1000; top: calc(100% + 16px); right: -110px; width: min(540px, calc(100vw - 32px)); color: var(--gx-text);
  background: radial-gradient(120% 90% at 85% 0%, #2f2f2f 0%, var(--gx-flaeche-1) 55%, #121212 100%);
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4);
  clip-path: circle(0 at calc(100% - 130px) -10px); transition: clip-path var(--gx-dauer-auf) cubic-bezier(.22,1,.36,1); }
html body .gx-sprache__box[hidden] { display: none; }
html body .gx-sprache.ist-offen .gx-sprache__box { clip-path: circle(150% at calc(100% - 130px) -10px); }
html body .gx-sprache__kopf { display: flex; align-items: center; justify-content: space-between; padding: 33px 22px 0; }
html body .gx-sprache__titel { margin: 0; font-family: gxTeko, Teko, Inter, system-ui, sans-serif; font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--gx-text); }
html body .gx-sprache__titel b { color: var(--gx-akzent); font-weight: 600; }
html body .gx-sprache__zu { border: 1px solid #0000007D; border-radius: 5px; background: #000; color: var(--gx-akzent); box-shadow: var(--gx-ruhe); font: 600 11px/1 Inter, sans-serif; letter-spacing: .04em; padding: 6px 9px; cursor: pointer; transition: box-shadow 300ms ease; }
html body .gx-sprache__zu:hover, html body .gx-sprache__zu:active { box-shadow: var(--gx-aktiv); }
html body .gx-sprache__zu:focus-visible { outline: 2px solid var(--gx-akzent); outline-offset: 3px; box-shadow: var(--gx-aktiv); }

/* Ampel: eine Spalte je Sprache */
html body .gx-sprache__ampel { list-style: none; margin: 0; padding: 33px 22px 33px; display: grid; grid-template-columns: repeat(var(--gx-n, 5), minmax(0, 1fr)); gap: 10px; }
html body .gx-sprache__ampel li { margin: 0; padding: 0; }
html body .gx-sprache__wahl { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 12px; border: 1px solid #0000007D; border-radius: 5px; text-decoration: none; color: var(--gx-akzent); text-align: center;
  background: #000; box-shadow: var(--gx-ruhe); transition: box-shadow 300ms ease; }
html body .gx-sprache__wahl:hover, html body .gx-sprache__wahl:active { box-shadow: var(--gx-aktiv); }
html body .gx-sprache__wahl:focus-visible { outline: 2px solid var(--gx-akzent); outline-offset: 3px; }
html body .gx-sprache__lampen { display: grid; gap: 6px; justify-items: center; width: 100%; margin-bottom: 8px; padding: 8px 0; background: #0c0c0c; border-radius: 8px; box-shadow: inset 0 2px 6px rgba(0,0,0,.8); }
html body .gx-sprache__lampen i { display: block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3a3a, #141414 70%); box-shadow: inset 0 0 0 2px #050505; }
html body .gx-sprache__kz { font-family: gxTeko, Teko, Inter, system-ui, sans-serif; font-size: 34px; line-height: .9; letter-spacing: .02em; }
html body .gx-sprache__name { font-size: 12.5px; line-height: 1.2; color: var(--gx-akzent); }
html body .gx-sprache__flagge { display: inline-block; width: 24px; height: 16px; border-radius: 2px; background: #333 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
html body .gx-sprache__wahl .gx-sprache__flagge { margin-top: 6px; }
/* aktiv: grüne Lampen, grüne Kontur */
html body .gx-sprache__wahl[aria-checked="true"] { box-shadow: var(--gx-aktiv); }
html body .gx-sprache__wahl[aria-checked="true"] .gx-sprache__lampen i { background: radial-gradient(circle at 35% 30%, #b9ffd0, var(--gx-gruen) 45%, #0b6b2d 100%); box-shadow: 0 0 16px 4px rgba(43,212,107,.55), inset 0 0 0 2px #003a14; }
/* Lampenlauf beim Öffnen: Spalte i zündet nach i × Takt rot, alle gehen gemeinsam aus, danach grün für aktiv */
@keyframes gx-zuenden { 0%, 100% { background: radial-gradient(circle at 35% 30%, #ff9a8c, var(--gx-rot) 45%, #8a0d05 100%); box-shadow: 0 0 14px 3px rgba(255,42,26,.55), inset 0 0 0 2px #3a0000; } }
@keyframes gx-dunkel { 0%, 100% { background: radial-gradient(circle at 35% 30%, #3a3a3a, #141414 70%); box-shadow: inset 0 0 0 2px #050505; } }
/* Spalte i zündet bei Öffnen + i × Takt und bleibt rot, bis alle gemeinsam 300 ms nach der letzten ausgehen (fill none = danach Grundzustand) */
html body .gx-sprache.ist-start .gx-sprache__lampen i { animation: gx-zuenden calc((var(--gx-n) - 1 - var(--gx-i, 0)) * var(--gx-takt) + 300ms) step-end calc(var(--gx-dauer-auf) + var(--gx-i, 0) * var(--gx-takt)) 1 none; }
/* die aktive Spalte ist bis zu ihrem Zünden dunkel, danach rot, nach „Lights out“ grün */
html body .gx-sprache.ist-start .gx-sprache__wahl[aria-checked="true"] .gx-sprache__lampen i { animation: gx-dunkel calc(var(--gx-dauer-auf) + var(--gx-i, 0) * var(--gx-takt)) step-end 0ms 1 none, gx-zuenden calc((var(--gx-n) - 1 - var(--gx-i, 0)) * var(--gx-takt) + 300ms) step-end calc(var(--gx-dauer-auf) + var(--gx-i, 0) * var(--gx-takt)) 1 none; }
/* Wahl einer anderen Sprache: deren Lampen rot, dann grün */
html body .gx-sprache__wahl.ist-gewaehlt .gx-sprache__lampen i { animation: gx-zuenden 260ms step-end 0ms 1 none; background: radial-gradient(circle at 35% 30%, #b9ffd0, var(--gx-gruen) 45%, #0b6b2d 100%); box-shadow: 0 0 16px 4px rgba(43,212,107,.55), inset 0 0 0 2px #003a14; }
html body .gx-sprache__status { display: flex; align-items: center; gap: 10px; margin: 6px 22px 16px; padding: 10px 14px; border-radius: 8px; background: rgba(43,212,107,.08); border: 1px solid rgba(43,212,107,.25); font-size: 13px; line-height: 1.35; color: var(--gx-text); }
html body .gx-sprache__status b { font-family: gxTeko, Teko, Inter, system-ui, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: .06em; color: var(--gx-gruen); }
html body .gx-sprache__karo { height: 10px; background: conic-gradient(#e8e8e8 0 25%, #1a1a1a 0 50%, #e8e8e8 0 75%, #1a1a1a 0) 0 0 / 10px 10px; opacity: .9; }

/* Listenmodus ab sieben Sprachen: Zeilen mit Lampe als Statuspunkt */
html body .gx-sprache.ist-liste .gx-sprache__ampel { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
html body .gx-sprache.ist-liste .gx-sprache__wahl { grid-template-columns: 14px 44px 24px 1fr; justify-items: start; align-items: center; gap: 10px; padding: 9px 12px; text-align: left; }
html body .gx-sprache.ist-liste .gx-sprache__lampen { grid-row: 1; width: auto; margin: 0; padding: 0; background: none; box-shadow: none; }
html body .gx-sprache.ist-liste .gx-sprache__lampen i:nth-child(2) { display: none; }
html body .gx-sprache.ist-liste .gx-sprache__lampen i { width: 12px; height: 12px; }
html body .gx-sprache.ist-liste .gx-sprache__kz { font-size: 26px; }
html body .gx-sprache.ist-liste .gx-sprache__flagge { order: 0; margin: 0; grid-column: 3; grid-row: 1; }
html body .gx-sprache.ist-liste .gx-sprache__name { grid-column: 4; grid-row: 1; font-size: 14px; color: var(--gx-akzent); }

/* Schleier nur mobil */
html body .gx-sprache__schleier { display: none; }
html body .gx-sprache--portal { position: static; display: block; }
@media (max-width: 767px) {
  html body .gx-sprache__knopf[aria-expanded="true"]::after { display: none; }
  html body .gx-sprache__schleier { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.55); opacity: 0; transition: opacity var(--gx-dauer-auf) ease; }
  html body .gx-sprache.ist-offen .gx-sprache__schleier { display: block; opacity: 1; }
  html body .gx-sprache__box { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 85vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom);
    clip-path: none; transform: translateY(100%); transition: transform var(--gx-dauer-auf) cubic-bezier(.22,1,.36,1); }
  html body .gx-sprache.ist-offen .gx-sprache__box { clip-path: none; transform: none; }
  html body .gx-sprache__box::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: #4a4a4a; margin: 10px auto 0; }
  html body .gx-sprache__kopf { padding: 33px 16px 0; }
  html body .gx-sprache__ampel { padding: 33px 14px 33px; gap: 6px; }
  html body .gx-sprache__wahl { padding: 10px 2px; }
  html body .gx-sprache__lampen i { width: 18px; height: 18px; }
  html body .gx-sprache__kz { font-size: 28px; }
  html body .gx-sprache__name { font-size: 10.5px; }
  html body .gx-sprache__wahl .gx-sprache__flagge { width: 20px; height: 13px; }
  html body .gx-sprache__status { margin: 6px 14px 12px; }
  html body .gx-sprache.ist-liste .gx-sprache__ampel { grid-template-columns: 1fr; }
  html body .gx-sprache.ist-liste .gx-sprache__wahl { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .gx-sprache__box, html body .gx-sprache__schleier { transition: none; }
  html body .gx-sprache.ist-start .gx-sprache__lampen i, html body .gx-sprache__wahl.ist-gewaehlt .gx-sprache__lampen i { animation: none; }
  html body .gx-sprache__wahl, html body .gx-sprache__knopf, html body .gx-sprache__zu { transition: none; }
}
/* Flaggen als SVG (Betreiber-Nachtrag 31.10.2026: keine Emoji, die unter Windows als Buchstaben erscheinen).
   Zuordnung Sprache zu Flagge liefert der Server über data-flagge (en -> gb). nl/pl nur für die Vorschau des Listenmodus. */
html body .gx-sprache [data-flagge="de"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23000'/%3E%3Crect y='1' width='5' height='1' fill='%23DD0000'/%3E%3Crect y='2' width='5' height='1' fill='%23FFCE00'/%3E%3C/svg%3E"); }
html body .gx-sprache [data-flagge="gb"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url%28%23t%29' 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/svg%3E"); }
html body .gx-sprache [data-flagge="it"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E"); }
html body .gx-sprache [data-flagge="es"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23AA151B'/%3E%3Crect y='.5' width='3' height='1' fill='%23F1BF00'/%3E%3C/svg%3E"); }
html body .gx-sprache [data-flagge="fr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%230055A4'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23EF4135'/%3E%3C/svg%3E"); }
html body .gx-sprache [data-flagge="nl"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%2321468B'/%3E%3Crect width='3' height='1.333' fill='%23fff'/%3E%3Crect width='3' height='.667' fill='%23AE1C28'/%3E%3C/svg%3E"); }
html body .gx-sprache [data-flagge="pl"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Crect width='8' height='5' fill='%23DC143C'/%3E%3Crect width='8' height='2.5' fill='%23fff'/%3E%3C/svg%3E"); }
/* Randfall Vorschau einer nicht freigegebenen Sprache: Server liefert leere Flagge und „—“ als Kürzel; leere Flagge ausblenden */
html body .gx-sprache [data-flagge=""] { display: none; }

/* Designsystem GCOM360: Knöpfe bleiben in jedem Zustand schwarz mit Schrift #FF7500, ohne farbigen Rand; Theme-/Kit-Zustandsfarben (Hover, Fokus) werden überstimmt. */
html body .gx-sprache .gx-sprache__knopf,
html body .gx-sprache .gx-sprache__knopf:hover,
html body .gx-sprache .gx-sprache__knopf:focus,
html body .gx-sprache .gx-sprache__knopf:focus-visible,
html body .gx-sprache .gx-sprache__knopf:active,
html body .gx-sprache .gx-sprache__knopf[aria-expanded="true"] { background: #000; color: var(--gx-akzent); border: 1px solid #0000007D; border-radius: 5px; padding: 0; text-decoration: none; }
html body .gx-sprache .gx-sprache__zu,
html body .gx-sprache .gx-sprache__zu:hover,
html body .gx-sprache .gx-sprache__zu:focus,
html body .gx-sprache .gx-sprache__zu:focus-visible,
html body .gx-sprache .gx-sprache__zu:active { background: #000; color: var(--gx-akzent); border: 1px solid #0000007D; border-radius: 5px; padding: 6px 9px; text-decoration: none; }
html body .gx-sprache .gx-sprache__wahl,
html body .gx-sprache .gx-sprache__wahl:hover,
html body .gx-sprache .gx-sprache__wahl:focus,
html body .gx-sprache .gx-sprache__wahl:focus-visible,
html body .gx-sprache .gx-sprache__wahl:active,
html body .gx-sprache .gx-sprache__wahl[aria-checked="true"] { background: #000; color: var(--gx-akzent); border: 1px solid #0000007D; border-radius: 5px; text-decoration: none; }
html body .gx-sprache .gx-sprache__knopf:hover, html body .gx-sprache .gx-sprache__knopf:active, html body .gx-sprache .gx-sprache__knopf[aria-expanded="true"], html body .gx-sprache .gx-sprache__zu:hover, html body .gx-sprache .gx-sprache__zu:active, html body .gx-sprache .gx-sprache__zu:focus-visible, html body .gx-sprache .gx-sprache__wahl:hover, html body .gx-sprache .gx-sprache__wahl:active, html body .gx-sprache .gx-sprache__wahl[aria-checked="true"] { box-shadow: var(--gx-aktiv); }
html body .gx-sprache .gx-sprache__knopf:focus-visible, html body .gx-sprache .gx-sprache__zu:focus-visible, html body .gx-sprache .gx-sprache__wahl:focus-visible { outline: 2px solid var(--gx-akzent); outline-offset: 3px; }

/* Mobil-Header (bis 767 px): Der Sprachknopf sitzt im Elementor-Mobilheader direkt links vom Hamburger; das Kuerzelschild ragt 15 px ueber den Knopf hinaus
   und lag 21 px ueber dem Tipp-Bereich des Hamburgers. 54 px nach links ergibt 33 px Abstand (Designsystem), bei 767 px 22 px. */
@media (max-width: 767px) { html body .gx-sprache { left: -54px; } }