/* Shared language switcher (extracted from index.html) */
.nav-language-wrap{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transform: translateX(var(--nav-icon-shift-x, 0px));
  /* Always keep the language UI above all page content when opened */
  z-index: 2147483646;
}

/* Controls containers */
.header-controls,
.container-controls{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Place controls in header (Downloads/Screenshots) */
body.lang-header-mode .header-inner{
  position: relative;
  padding-top: 22px !important;
  padding-bottom: 26px !important;
  padding-right: 170px !important; /* room for controls */
}

body.lang-header-mode .header-controls{
  position:absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

body.lang-header-mode .page{ padding-top: 64px !important; }

/* Place controls inside content containers (all other subpages) */
.container-controls{
  position:absolute;
  top: 10px;
  right: 18px;
  z-index: 20;
}

/* Reserve a clean top-right control area so the language/theme UI never covers headings or vice versa */
.card:has(> .container-controls),
.section:has(> .container-controls),
article.card:has(> .container-controls){
  padding-top: 42px;
  padding-right: clamp(172px, 18vw, 214px);
}

/* Ensure common container types can host absolute controls without changing layout */
.card,
.section,
article.card{
  position: relative;
}

@media (max-width: 760px){
  .container-controls{
    top: 8px;
    right: 12px;
  }

  .card:has(> .container-controls),
  .section:has(> .container-controls),
  article.card:has(> .container-controls){
    padding-top: 118px;
    padding-right: 28px;
  }
}

.nav-language-label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--text-muted);
  pointer-events:none;
}

/* Theme toggle button (Dark/Light) */
.theme-toggle{
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(148,163,184,0.9);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.86));
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.98);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}

.theme-toggle:hover{
  transform: scale(1.04);
  border-color: rgba(248, 250, 252, 0.95);
  filter: brightness(1.03);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 1);
}

.theme-toggle:focus-visible{
  outline:2px solid #22d3ee;
  outline-offset:2px;
}

.theme-toggle-icon{
  font-size: 1.25rem;
  line-height:1;
  color: rgba(249, 250, 251, 0.95);
}

/*  */
.language-info{ display:none; }

/* Hinweis komplett entfernen */
.language-info,
.nav-language-note{ display:none !important; }

.language-info-title{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-weight:600;
  color:var(--text);
  pointer-events:none;
}
.language-info-date{
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--text-muted);
  pointer-events:none;
}

.nav-language-globe{
  width:76px;
  height:76px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:0;
  border:1px solid rgba(148,163,184,0.9);
  background: radial-gradient(circle at 30% 0, #38bdf8, #0f172a 65%, #020617 100%);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.98), 0 0 40px rgba(56, 189, 248, 0.8);
  position:relative;
  cursor:pointer;
  transform:scale(1);
  transform-origin:center;
  will-change:transform;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}

.nav-language-globe::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:inherit;
  border:1px solid rgba(248, 250, 251, 0.18);
  pointer-events:none;
}

.nav-language-icon{
  position:relative;
  width:46px;
  height:46px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 20%, #e0f2fe 0, #38bdf8 34%, #0369a1 72%, #020617 100%);
  box-shadow: inset 0 3px 6px rgba(248, 250, 251, 0.4), 0 0 22px rgba(56, 189, 248, 0.9);
  overflow:hidden;
}

.nav-language-icon::before{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  border:1px solid rgba(15, 23, 42, 0.35);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35), 0 -2px 4px rgba(248, 250, 252, 0.3);
}

.nav-language-icon::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 26% 40%, rgba(21, 128, 61, 0.9) 0, transparent 30%),
    radial-gradient(circle at 50% 65%, rgba(34, 197, 94, 0.95) 0, transparent 28%),
    radial-gradient(circle at 70% 30%, rgba(22, 163, 74, 0.9) 0, transparent 24%);
  mix-blend-mode:screen;
  opacity:0.95;
}

.nav-language-menu{
  position:absolute;
  top:100%;
  right:0;
  margin-top:-22px;
  padding:40px 32px;
  border-radius:50px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94));
  border:1px solid rgba(148, 163, 184, 0.75);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.98), 0 0 34px rgba(56, 189, 248, 0.55);

  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px 22px;

  min-width:380px;
  min-height:480px;
  opacity:0;
  pointer-events:none;
  transform: translateY(-8px) scale(0.985);
  transition: opacity .18s ease-out, transform .18s ease-out;
  /* Must always be in the foreground (e.g. over product cards/headers) */
  z-index:2147483647;
  overflow:hidden;
}

.nav-language-option{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:9px 14px;
  border-radius:999px;
  background:transparent;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color: rgba(249, 250, 251, 0.96);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}

.nav-language-option::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background: linear-gradient(120deg, #22d3ee, #6366f1, #a855f7);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
  opacity:0.85;
  flex:0 0 auto;
}

.nav-language-option:hover{
  background: rgba(56, 189, 248, 0.18);
  transform: translateY(-1px);
}

.nav-language-option.is-active{
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(99, 102, 241, 0.18));
}

.nav-language-option[data-implemented="1"]::after{
  content:"✓";
  margin-left:auto;
  font-size:0.95rem;
  color:#22c55e;
  opacity:0.95;
}

/* active language keeps the same green check (no cyan-only selection) */
.nav-language-option.is-active::after{
  color:#22c55e;
}

/* Locked / coming-soon language: show 🔒 on the right */
.nav-language-option[data-implemented="0"]::after{
  content:"\1F512"; /* 🔒 */
  margin-left:auto;
  font-size:0.95rem;
  opacity:0.85;
  color: rgba(249, 250, 251, 0.92);
}
.nav-language-option[data-implemented="0"].is-active::after{
  color: rgba(249, 250, 251, 0.92);
}

/* Coming-soon languages: visible but not clickable */
.nav-language-option:disabled,
.nav-language-option[aria-disabled="true"],
.nav-language-option[data-implemented="0"]{
  opacity:0.45;
  cursor:not-allowed;
  transform:none !important;
}

.nav-language-option:disabled:hover,
.nav-language-option[aria-disabled="true"]:hover,
.nav-language-option[data-implemented="0"]:hover{
  background:transparent;
}


.nav-language-option:focus-visible{
  outline:2px solid #22d3ee;
  outline-offset:2px;
}

.nav-language-wrap:hover .nav-language-globe,
.nav-language-wrap.is-open .nav-language-globe{
  transform: scale(1.05);
  filter: brightness(1.03);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 1), 0 0 70px rgba(56, 189, 248, 0.95);
  border-color: rgba(248, 250, 252, 0.95);
}

.nav-language-wrap.is-open .nav-language-menu{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0) scale(1);
}

/* Light mode */
body.light-mode .nav-language-globe{
  background: radial-gradient(circle at 30% 0, #dbeafe, #60a5fa 52%, #1d4ed8 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22), 0 0 18px rgba(96, 165, 250, 0.22);
  border-color: rgba(96, 165, 250, 0.38);
}
body.light-mode .nav-language-menu{
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
}
body.light-mode .nav-language-option{ color:#111827; }
body.light-mode .nav-language-option:hover{ background: rgba(37, 99, 235, 0.10); }
body.light-mode .nav-language-option.is-active{ background: rgba(37, 99, 235, 0.12); }
body.light-mode .nav-language-option.is-active::after{ color:#2563eb; }
body.light-mode .nav-language-label{ color:#4b5563; }

/* Mobile width only: menu centered and not wider than viewport */
@media (max-width: 520px){
  .nav-language-menu,
  .nav-language-wrap.is-open .nav-language-menu{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: fit-content !important;
    inline-size: fit-content !important;
    max-width: calc(100vw - 24px) !important;

    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* Clean mobile language menu */
@media (max-width: 768px){
  .nav-language-wrap,
  .nav-language-wrap.is-open{
    transform:none;
  }

  .nav-language-menu{
    position: fixed;
    left: 0;
    top: 90px;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr;
  }
}

/* =======================================================================
   Mobile-only layout fixes
   - Artikel/Technik-Unterseiten: Theme + Sprache dürfen den Back-Button
     nicht überdecken.
   - Downloads/Screenshots: Controls dürfen auf Mobile nicht mit Header/Nav
     kollidieren (kein absolutes Überlappen).
   Desktop bleibt unverändert.
   ======================================================================= */

@media (max-width: 820px){
  /* In-Content Controls (alle Unterseiten mit .container-controls) */
  body:not(.lang-header-mode) .container-controls{
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 10px;
    margin: 0 0 14px 0;
  }

  /* Downloads/Screenshots: Controls im Header in den normalen Flow holen */
  body.lang-header-mode .header-inner{
    padding-right: 18px !important; /* remove reserved room for absolute controls */
  }
  body.lang-header-mode .header-controls{
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: auto;
  }

  /* Anchor-Sections sollen nicht unter dem sticky Header verschwinden */
  body.lang-header-mode #downloads,
  body.lang-header-mode #screenshots{
    scroll-margin-top: 220px;
  }
}


/* =======================================================================
   Mobile fixes (ONLY mobile) – keep Desktop unchanged
   - Prevent Theme/Language controls from being clipped or overlaying content
   - Keep Dark/Light LEFT next to Language (no vertical stacking)
   - Improve mobile performance (disable background-attachment: fixed)
   ======================================================================= */
@media (max-width: 820px){
  /* Performance: fixed backgrounds are expensive on mobile */
  body{ background-attachment: scroll !important; }

  /* Subpages (default): controls sit inside the card flow, not absolutely */
  .container-controls{
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    padding-top: 6px;
    margin-bottom: 8px;
    z-index: 20;
  }

  /* Downloads/Screenshots (header-mode): do NOT overlay the header */
  body.lang-header-mode .header-inner{
    padding-right: 18px !important; /* remove hard reserved space on mobile */
  }
  body.lang-header-mode .header-controls{
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 10px;
    z-index: 20;
  }
}

/* Very small screens: keep Theme + Language SIDE-BY-SIDE (Theme left of Language) */
@media (max-width: 480px){
  .container-controls,
  body.lang-header-mode .header-controls{
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  /* Make the controls smaller so they always fit on one line */
  .theme-toggle{ width:48px; height:48px; }
  .nav-language-globe{ width:64px; height:64px; }
  .nav-language-icon{ width:38px; height:38px; }

  .nav-language-wrap{
    align-items: center;
    transform: none !important;
  }
  .nav-language-label{ font-size:0.62rem; letter-spacing:0.16em; }
}