/* ===== Sprachumschalter DE / EN / EL =====
   Das Markup wird von assets/i18n.js erzeugt, damit alle Seiten dieselbe
   Umschaltung bekommen, ohne dass jede Datei einzeln angefasst werden muss.
   Desktop: dezentes Sprachkürzel rechts außerhalb des zentrierten Menübands.
   Mobil:   kompaktes Sprachkürzel direkt links neben dem Menü-Button.        */

header>.nav{min-width:0}

/* Wörter werden nur an Leerzeichen umgebrochen. Browserseitige Silbentrennung
   und Trennungen mitten im Wort bleiben in allen drei Sprachen ausgeschaltet. */
body :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,dt,dd,th,td,a,button,label,span,strong,em){
  -webkit-hyphens:none!important;hyphens:none!important;
  word-break:normal!important;overflow-wrap:normal!important;
}

.lang-switch{position:relative;flex:none;font-family:inherit}
.lang-switch .lang-toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.90);border:1px solid rgba(8,3,49,.06);
  box-shadow:rgba(75,68,57,.12) 0 12px 24px 0, rgba(75,68,57,.10) 0 44px 48px -26px;
  border-radius:9999px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;
  color:#080331;padding:11px 17px;line-height:1;transition:color .18s ease,background .18s ease;
}
.lang-switch .lang-toggle::after{
  content:"";width:0;height:0;margin-left:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.55;transition:transform .18s ease;
}
.lang-switch.open .lang-toggle::after{transform:rotate(180deg)}
.lang-switch .lang-toggle:hover{color:#4865ff;background:#fff}

.lang-menu{
  position:absolute;top:100%;right:0;margin-top:8px;min-width:172px;
  background:rgba(255,255,255,.98);border:1px solid rgba(8,3,49,.06);
  border-radius:16px;box-shadow:rgba(75,68,57,.18) 0 18px 40px -12px;
  padding:8px;list-style:none;display:none;z-index:200;
}
.lang-switch.open .lang-menu{display:block}
.lang-menu li{list-style:none;width:100%}
.lang-menu button{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:14.5px;color:#080331;padding:10px 14px;border-radius:10px;line-height:1.25;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.lang-menu button span{font-size:11px;font-weight:700;letter-spacing:.07em;color:#9aa3b8}
.lang-menu button:hover{background:rgba(72,101,255,.09);color:#4865ff}
.lang-menu button.is-active{color:#4865ff;font-weight:600;background:rgba(72,101,255,.09)}
.lang-menu button.is-active span{color:#4865ff}

/* Mobile Variante: schlichtes Kürzel neben dem Menü-Button */
.lang-switch--mobile{display:none}
.lang-switch--mobile .lang-toggle{
  padding:0 6px;min-width:34px;width:auto;height:44px;justify-content:center;gap:0;
  border-radius:0;font-size:10px;font-weight:650;letter-spacing:.035em;box-shadow:none;
  background:transparent;border:0;
}
.lang-switch--mobile .lang-toggle::after{display:none}

/* Tablet und Mobil: bis 1024px gilt das Orbit-Menü (siehe mobile-orbit-menu.css),
   deshalb muss hier dieselbe Grenze stehen. Lag sie bei 820px, blieb auf dem iPad
   das Desktop-Menüband stehen, während der Sprachschalter schon mobil war, und
   die längeren englischen und griechischen Menütexte sprengten die Leiste.       */
@media (max-width:1024px){
  .lang-switch--desktop{display:none}
  .lang-switch--mobile{display:block;z-index:151}
  .lang-menu{min-width:158px;border-radius:14px}
}

/* Desktop: Das Menüband bleibt unabhängig von Logo und Sprachwahl mittig.
   Der Sprachschalter liegt separat rechts im Header und hat bewusst keine Pille. */
@media (min-width:1025px){
  header>.nav{
    width:calc(100% - 72px);max-width:1200px;margin-left:auto;margin-right:auto;
    flex-wrap:nowrap;
  }
  .lang-switch--desktop{
    position:absolute;top:50%;right:clamp(12px,1.6vw,24px);z-index:151;
    margin:0;transform:translateY(-50%);
  }
  .lang-switch--desktop .lang-toggle{
    padding:8px 3px;border:0;border-radius:0;background:transparent;box-shadow:none;
    color:rgba(255,255,255,.82);font-size:10px;font-weight:650;letter-spacing:.12em;
    text-shadow:0 1px 8px rgba(2,5,32,.5);
  }
  .lang-switch--desktop .lang-toggle::after{
    margin-left:1px;border-left-width:3px;border-right-width:3px;border-top-width:4px;
    opacity:.7;
  }
  .lang-switch--desktop .lang-toggle:hover,
  .lang-switch--desktop .lang-toggle:focus-visible{
    color:#fff;background:transparent;
  }
  .lang-switch--desktop .lang-toggle:focus-visible{
    outline:1px solid rgba(255,255,255,.7);outline-offset:3px;
  }
  .nav-links{flex-wrap:nowrap}
  .nav-links>li>a{white-space:nowrap}
}
@media (min-width:1025px) and (max-width:1240px){
  .nav-links a{padding-left:10px;padding-right:10px;font-size:14.5px}
  .nav-cta{padding-left:16px!important;padding-right:16px!important}
}

@media (prefers-reduced-motion:reduce){
  .lang-switch .lang-toggle,.lang-switch .lang-toggle::after{transition:none}
}