#languages .lang-grid { list-style:none; padding:0; margin:0; }
#languages .lang-chip { display:flex; align-items:center; gap:.5rem; }

/* Flag aus Sprite schneiden – Variablen kommen vom <li> */
/* Flag aus Sprite schneiden – Variablen kommen vom <li> */
#languages .lang-flag{
  /* Gesamtgröße des ursprünglichen Sprite-Sheets */
  --sheet-w: 573px;
  --sheet-h: 588px;

  /* Sichtbare Flag-Größe (einfach anpassen, z. B. 24×18) */
  --fw: 20px;
  --fh: 15px;

  /* Skalierung des verwendeten Sprite-Bildes:
     1   = Originalgröße
     0.5 = Du nutzt ein halb so großes exportiertes Sprite */
  --scale: 0.5;

  /* Offsets --x/--y kommen pro <li> als px, z. B. "--x:246px; --y:186px;" */
  display: inline-block;
  width: var(--fw);
  height: var(--fh);
  background-image: url("/images/flag_spritesheet.png"); /* Pfad prüfen */
  background-repeat: no-repeat;

  /* WICHTIG: scale in size & position einbeziehen */
  background-size:
    calc(var(--sheet-w) * var(--scale))
    calc(var(--sheet-h) * var(--scale));

  background-position:
    calc(-1 * var(--x, 0px) * var(--scale))
    calc(-1 * var(--y, 0px) * var(--scale));
}

/* Offsets aus deinem flagsprites.json – nur für die 20 genutzten Codes */
.lang-chip[data-code="ae"] .lang-flag{ --x:0px;   --y:31px;  --fw:40px; --fh:30px; }
.lang-chip[data-code="cn"] .lang-flag{ --x:205px; --y:217px; --fw:40px; --fh:30px; }
.lang-chip[data-code="de"] .lang-flag{ --x:246px; --y:186px; --fw:40px; --fh:30px; }
.lang-chip[data-code="us"] .lang-flag{ --x:533px; --y:93px;  --fw:40px; --fh:30px; }
.lang-chip[data-code="es"] .lang-flag{ --x:164px; --y:279px; --fw:40px; --fh:30px; }
.lang-chip[data-code="fi"] .lang-flag{ --x:246px; --y:279px; --fw:40px; --fh:30px; }
.lang-chip[data-code="fr"] .lang-flag{ --x:287px; --y:155px; --fw:40px; --fh:30px; }
.lang-chip[data-code="gr"] .lang-flag{ --x:328px; --y:155px; --fw:40px; --fh:30px; }
.lang-chip[data-code="id"] .lang-flag{ --x:287px; --y:341px; --fw:40px; --fh:30px; }
.lang-chip[data-code="it"] .lang-flag{ --x:246px; --y:372px; --fw:40px; --fh:30px; }
.lang-chip[data-code="jp"] .lang-flag{ --x:369px; --y:31px;  --fw:40px; --fh:30px; }
.lang-chip[data-code="kr"] .lang-flag{ --x:369px; --y:279px; --fw:40px; --fh:30px; }
.lang-chip[data-code="nl"] .lang-flag{ --x:451px; --y:155px; --fw:40px; --fh:30px; }
.lang-chip[data-code="pl"] .lang-flag{ --x:123px; --y:465px; --fw:40px; --fh:30px; }
.lang-chip[data-code="pt"] .lang-flag{ --x:328px; --y:465px; --fw:40px; --fh:30px; }
.lang-chip[data-code="ro"] .lang-flag{ --x:0px;   --y:496px; --fw:40px; --fh:30px; }
.lang-chip[data-code="ru"] .lang-flag{ --x:123px; --y:496px; --fw:40px; --fh:30px; }
.lang-chip[data-code="se"] .lang-flag{ --x:369px; --y:496px; --fw:40px; --fh:30px; }
.lang-chip[data-code="th"] .lang-flag{ --x:41px;  --y:527px; --fw:40px; --fh:30px; }
.lang-chip[data-code="vn"] .lang-flag{ --x:533px; --y:341px; --fw:40px; --fh:30px; }



.flag{
  /* Gesamtgröße des ursprünglichen Sprite-Sheets */
  --sheet-w: 573px;
  --sheet-h: 588px;

  /* Sichtbare Flag-Größe (einfach anpassen, z. B. 24×18) */
  --fw: 20px;
  --fh: 15px;

  /* Skalierung des verwendeten Sprite-Bildes:
     1   = Originalgröße
     0.5 = Du nutzt ein halb so großes exportiertes Sprite */
  --scale: 0.5;

  /* Offsets --x/--y kommen pro <li> als px, z. B. "--x:246px; --y:186px;" */
  display: inline-block;
  width: var(--fw);
  height: var(--fh);
  background-image: url("/images/flag_spritesheet.png"); /* Pfad prüfen */
  background-repeat: no-repeat;

  /* WICHTIG: scale in size & position einbeziehen */
  background-size:
    calc(var(--sheet-w) * var(--scale))
    calc(var(--sheet-h) * var(--scale));

  background-position:
    calc(-1 * var(--x, 0px) * var(--scale))
    calc(-1 * var(--y, 0px) * var(--scale));
}

.flag--is { --x:   0px; --y: 372px; } /* Island */
.flag--jp { --x: 369px; --y:  31px; } /* Japan  */
.flag--us { --x: 533px; --y:  93px; } /* USA    */
.flag--no { --x: 451px; --y: 186px; } /* Norwegen */
.flag--pt { --x: 328px; --y: 465px; } /* Portugal */
.flag--ch { --x: 287px; --y: 186px; } /* Schweiz  */
.flag--za { --x:   0px; --y: 558px; } /* Südafrika */
.flag--au { --x:   0px; --y: 124px; } /* Australien */
.flag--ca { --x: 205px; --y:  62px; } /* Kanada */
.flag--es { --x: 164px; --y: 279px; } /* Spanien */
.flag--fr { --x: 287px; --y: 155px; } /* Frankreich */
.flag--it { --x: 246px; --y: 372px; } /* Italien */
.flag--de { --x: 246px; --y: 186px; } /* Deutschland */
.flag--at { --x:  82px; --y:  93px; } /* Österreich */
.flag--nl { --x: 451px; --y: 155px; } /* Niederlande */
.flag--be { --x: 164px; --y: 155px; } /* Belgien */
.flag--dk { --x: 246px; --y: 155px; } /* Dänemark */
.flag--se { --x: 369px; --y: 496px; } /* Schweden */
.flag--fi { --x: 246px; --y: 279px; } /* Finnland */
.flag--pl { --x: 123px; --y: 465px; } /* Polen */
.flag--cz { --x: 246px; --y:   0px; } /* Tschechien */
.flag--hu { --x: 164px; --y: 496px; } /* Ungarn */
.flag--gr { --x: 328px; --y: 155px; } /* Griechenland */
.flag--tr { --x: 328px; --y: 527px; } /* Türkei */
.flag--hr { --x:  82px; --y: 341px; } /* Kroatien */
.flag--si { --x: 492px; --y:   0px; } /* Slowenien */
.flag--gb { --x:  41px; --y: 310px; } /* Vereinigtes Königreich */
.flag--ie { --x: 246px; --y: 341px; } /* Irland */
.flag--ua { --x: 533px; --y:   0px; } /* Ukraine */
.flag--ro { --x:   0px; --y: 496px; } /* Rumänien */
.flag--bg { --x:  41px; --y: 155px; } /* Bulgarien */
.flag--cn { --x: 205px; --y: 217px; } /* China */
.flag--kr { --x: 369px; --y: 279px; } /* Südkorea */
.flag--tw { --x: 451px; --y: 527px; } /* Taiwan */
.flag--th { --x:  41px; --y: 527px; } /* Thailand */
.flag--vn { --x: 533px; --y: 341px; } /* Vietnam */
.flag--id { --x: 287px; --y: 341px; } /* Indonesien */
.flag--my { --x: 328px; --y: 434px; } /* Malaysia */
.flag--sg { --x: 410px; --y: 496px; } /* Singapur */
.flag--ph { --x:  41px; --y: 465px; } /* Philippinen */
.flag--in { --x:  41px; --y: 372px; } /* Indien */
.flag--lk { --x: 164px; --y: 403px; } /* Sri Lanka */
.flag--ae { --x:   0px; --y:  31px; } /* VAE */
.flag--il { --x: 328px; --y: 341px; } /* Israel */
.flag--ma { --x: 410px; --y: 155px; } /* Marokko */
.flag--eg { --x:  41px; --y: 279px; } /* Ägypten */
.flag--ke { --x: 369px; --y: 186px; } /* Kenia */
.flag--mx { --x: 287px; --y: 434px; } /* Mexiko */
.flag--br { --x:   0px; --y: 186px; } /* Brasilien */
.flag--ar { --x:   0px; --y:  93px; } /* Argentinien */