/* Sprachwahl: Kopfzeile (details/summary, funktioniert ohne JavaScript) und Menüliste. */
.lang { position: relative; display: flex; align-items: center; margin-inline-start: auto; }
.lang-menu { position: relative; }
.lang-menu summary {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; min-width: 44px; padding: 0 0.7rem;
  border: 1px solid var(--line, #d9d6cf); border-radius: 999px; background: transparent; color: var(--ink, #1d2b25);
  font: inherit; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; list-style: none; white-space: nowrap;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { border-color: var(--green-dark, #407323); }
.lang-menu summary:focus-visible, .lang-menu a:focus-visible, .menue-sprachen a:focus-visible { outline: 3px solid var(--green-dark, #407323); outline-offset: 2px; }
.lang-menu[open] summary { border-color: var(--green-dark, #407323); background: var(--green-tint, #ecf5e3); }
.lang-menu ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 60; margin: 0; padding: 0.4rem; list-style: none;
  min-width: 11.5rem; background: var(--white, #fff); border: 1px solid var(--line, #d9d6cf); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(14, 38, 41, 0.16);
}
.lang-menu li a {
  display: flex; align-items: center; min-height: 44px; padding: 0 0.85rem; border-radius: 10px; color: var(--ink, #1d2b25);
  text-decoration: none; font-size: 0.98rem; white-space: nowrap;
}
.lang-menu li a:hover { background: var(--green-tint, #ecf5e3); }
.lang-menu li a[aria-current="true"] { font-weight: 700; color: var(--green-deep, #33591d); }
.lang-menu li a[aria-current="true"]::after { content: "✓"; margin-inline-start: auto; padding-inline-start: 0.8rem; }
.menue-sprachen { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(22, 56, 60, 0.14); }
.menue-sprachen p { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.menue-sprachen ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.menue-sprachen a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(22, 56, 60, 0.25);
  border-radius: 999px; color: inherit; text-decoration: none; font-size: 0.98rem;
}
.menue-sprachen a[aria-current="true"] { background: var(--green-tint, #ecf5e3); border-color: var(--green-dark, #407323); font-weight: 700; }
.i18n-note { margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; border-radius: 10px; background: var(--petrol-tint, #e7efee); color: var(--petrol, #16383c); font-size: 0.95rem; max-width: none; }
/* Kopfzeile: die Sprachwahl bleibt neben dem Burger, die Navigation darf in Ruhe umbrechen. */
@media (max-width: 1099px) { .lang { margin-inline-start: auto; } .lang + .burger { margin-inline-start: 0.4rem; } }
@media (min-width: 1100px) { .lang { margin-inline-start: 0.4rem; } }
/* Schmale Handys: Logo etwas kleiner, Sprachwahl nur als Symbol, damit Logo, Sprache und Burger in 320 px passen. */
@media (max-width: 479px) {
  .site-header .bar { gap: 8px; }
  .site-header .logo { min-width: 0; flex: 0 1 auto; }
  .site-header .logo img { height: 50px; max-width: 100%; object-fit: contain; object-position: left center; }
  .lang-menu summary { padding: 0; width: 44px; justify-content: center; }
  .lang-menu summary span { display: none; }
}
/* Kleine Laptops und Tablets quer: die Navigation ist hier ohnehin am Limit. Sprachwahl nur als Symbol, Abstände und Pillen etwas enger. */
@media (min-width: 1100px) and (max-width: 1299px) {
  .site-header .bar { gap: 12px; }
  .main-nav { gap: 16px; }
  .nav-wege { gap: 0.4rem; margin-inline-start: 0.4rem; }
  .nav-weg { padding-inline: 0.85rem; font-size: 0.93rem; }
  .lang { margin-inline-start: 0; }
  .lang-menu summary { padding: 0; width: 44px; justify-content: center; }
  .lang-menu summary span { display: none; }
}
/* Die Navigation darf in der Kopfzeile nicht unter ihre natürliche Breite schrumpfen (sonst fällt bei Bruchteilen von Pixeln eine Pille in eine zweite Zeile). */
@media (min-width: 1100px) { .site-header .main-nav { flex-shrink: 0; } .site-header .logo { flex-shrink: 1; min-width: 0; } }