/* ==========================================================================
   Beastald — Language Switcher Variants
   5 distinct paradigms for the language selector in the cyan header.

   All rules scoped via .langv--vN body-class so they never leak into cyan
   or other testpolygon pages. Each variant block is self-contained:
   the header chrome (logo, nav, CTA, hamburger) is identical to cyan and
   ONLY the .lang-switcher slot differs.

   Variants:
     V1 — Two-letter pill kompakt    (DE · EN)    [pill-collapse]
     V2 — Vertical Stack             (DE over EN)  [stacked-flag]
     V3 — Globe-Icon + Dropdown      (🌐 ▼)       [dropdown-flag]
     V4 — Segmented Toggle           ([DE][EN])   [pill-toggle]
     V5 — Split-Button mit Caret     (Deutsch ▼)  [split-btn]

   Per A10 (TASK_PROTOCOL.md) each variant has a paradigm-appropriate
   active-state visualization (underline / arrow / checkmark / filled-bg /
   primary-color + caret rotation). Per A8 the hamburger menu is unchanged
   structurally AND visually. Per A9 all variants ship a11y baseline
   (aria-label / aria-current / tab order / <html lang>).
   ========================================================================== */


/* ==========================================================================
   V1 — Two-letter pill kompakt (DE · EN, hairline collapse)
   Pattern: keep the existing "DE · EN" pipe-separated switcher but compress
   it into a single rounded pill, drop the ::before divider, slightly tighten
   letter-spacing, and let the active language lift its letter weight.
   Lowest footprint of the 5 (~32px wide instead of ~58px); Master Edi's
   starting observation in the 2026-09-23 brief was "the language selector
   takes too much space" — this answers that first.
   ========================================================================== */
.langv--v1 .lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(7, 24, 39, 0.18);
  border-radius: 999px;
  background-color: rgba(252, 250, 246, 0.7);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-navy);
  white-space: nowrap;
  position: relative;
  /* override cyan's ::before divider so the pill has no extra chrome */
}

.langv--v1 .lang-switcher::before {
  display: none;
}

.langv--v1 .lang-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.langv--v1 .lang-switcher a:hover,
.langv--v1 .lang-switcher a:focus-visible {
  background-color: rgba(67, 154, 157, 0.10);
  color: var(--color-teal-hover);
  outline: none;
}

.langv--v1 .lang-switcher a.lang-switcher__active,
.langv--v1 .lang-switcher a[aria-current="true"] {
  background-color: var(--color-navy);
  color: var(--color-ivory);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.langv--v1 .lang-switcher span[aria-hidden="true"] {
  display: none; /* pipe collapsed into the pill chrome */
}

.langv--v1 .site-header__inner .lang-switcher {
  margin-left: 0;
  margin-right: var(--space-2);
}


/* ==========================================================================
   V2 — Vertical Stack (DE über EN)
   Pattern: stack the two languages vertically instead of horizontally.
   Each row carries the full language name (Deutsch / English), a small
   top-of-row dot indicates active state, inactive row sits muted.
   Trades header width for height (slightly taller header row).
   Master Edi's first preferred direction from his brief.
   ========================================================================== */
.langv--v2 .lang-switcher {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.125rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(7, 24, 39, 0.14);
  border-radius: var(--radius-md);
  background-color: rgba(252, 250, 246, 0.7);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--color-navy);
  white-space: nowrap;
  position: relative;
}

.langv--v2 .lang-switcher::before {
  display: none; /* divider absorbed into the box chrome */
}

.langv--v2 .lang-switcher a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.4rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}

.langv--v2 .lang-switcher a::before {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color var(--t-fast) var(--ease);
}

.langv--v2 .lang-switcher a:hover,
.langv--v2 .lang-switcher a:focus-visible {
  color: var(--color-teal-hover);
  background-color: rgba(67, 154, 157, 0.08);
  outline: none;
}

.langv--v2 .lang-switcher a.lang-switcher__active,
.langv--v2 .lang-switcher a[aria-current="true"] {
  color: var(--color-navy);
  font-weight: var(--fw-semibold);
  background-color: transparent;
}

.langv--v2 .lang-switcher a.lang-switcher__active::before,
.langv--v2 .lang-switcher a[aria-current="true"]::before {
  background-color: var(--color-teal); /* arrow-equivalent: filled dot */
}

.langv--v2 .lang-switcher span[aria-hidden="true"] {
  display: none;
}

.langv--v2 .site-header__inner .lang-switcher {
  margin-left: 0;
  margin-right: var(--space-2);
}


/* ==========================================================================
   V3 — Globe-Icon mit Dropdown
   Pattern: a single globe icon button (🌐) opens a small dropdown menu with
   the two languages; current language listed with a checkmark (✓) on the
   right. Outside-click closes via document listener. Keyboard fully supported
   (Escape, Tab, Arrow keys for menu navigation per ARIA menu pattern).
   Closes to ~28px width when collapsed — the most compact of the 5.
   Master Edi's second preferred direction from his brief.
   ========================================================================== */
.langv--v3 .lang-switcher {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  white-space: nowrap;
}

.langv--v3 .lang-switcher::before {
  display: none;
}

.langv--v3 .lang-switcher__trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(7, 24, 39, 0.20);
  border-radius: 999px;
  background-color: rgba(252, 250, 246, 0.7);
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.langv--v3 .lang-switcher__trigger:hover,
.langv--v3 .lang-switcher__trigger:focus-visible {
  border-color: var(--color-teal);
  color: var(--color-teal-hover);
  background-color: rgba(67, 154, 157, 0.08);
  outline: none;
}

.langv--v3 .lang-switcher__trigger[aria-expanded="true"] {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-ivory);
}

.langv--v3 .lang-switcher__trigger-icon {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 1.05rem;
  line-height: 1;
}

.langv--v3 .lang-switcher__trigger-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.langv--v3 .lang-switcher__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 10rem;
  padding: 0.35rem;
  margin: 0;
  list-style: none;
  background-color: var(--color-paper-white);
  border: 1px solid rgba(7, 24, 39, 0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(7, 24, 39, 0.14),
              0 2px 8px rgba(7, 24, 39, 0.06);
  z-index: 50;
  display: none;
}

.langv--v3 .lang-switcher__trigger[aria-expanded="true"] + .lang-switcher__menu {
  display: block;
}

.langv--v3 .lang-switcher__menu li {
  margin: 0;
  padding: 0;
}

.langv--v3 .lang-switcher__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-navy);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.langv--v3 .lang-switcher__menu a:hover,
.langv--v3 .lang-switcher__menu a:focus-visible {
  background-color: rgba(67, 154, 157, 0.10);
  color: var(--color-teal-hover);
  outline: none;
}

.langv--v3 .lang-switcher__menu a.lang-switcher__active,
.langv--v3 .lang-switcher__menu a[aria-current="true"] {
  background-color: transparent;
  color: var(--color-navy);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.langv--v3 .lang-switcher__menu a { text-transform: none; }
.langv--v3 .lang-switcher__menu a.lang-switcher__active::after,
.langv--v3 .lang-switcher__menu a[aria-current="true"]::after {
  content: "✓";
  display: inline-block;
  color: var(--color-teal);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  line-height: 1;
}

.langv--v3 .site-header__inner .lang-switcher {
  margin-left: 0;
  margin-right: var(--space-2);
}


/* ==========================================================================
   V4 — Segmented Toggle [DE][EN]
   Pattern: classic iOS-style segmented control. Two short round-edged
   segments sharing a single border. The active segment fills with navy,
   the inactive stays transparent. Hover lifts the inactive one.
   Adds visual weight but communicates the toggle mechanic at a glance.
   ========================================================================== */
.langv--v4 .lang-switcher {
  display: inline-flex;
  align-items: stretch;
  padding: 2px;
  border: 1px solid rgba(7, 24, 39, 0.20);
  border-radius: 999px;
  background-color: rgba(252, 250, 246, 0.7);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  white-space: nowrap;
  position: relative;
}

.langv--v4 .lang-switcher::before {
  display: none;
}

.langv--v4 .lang-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.langv--v4 .lang-switcher a:hover,
.langv--v4 .lang-switcher a:focus-visible {
  color: var(--color-teal-hover);
  outline: none;
}

.langv--v4 .lang-switcher a.lang-switcher__active,
.langv--v4 .lang-switcher a[aria-current="true"] {
  background-color: var(--color-navy);
  color: var(--color-ivory);
  font-weight: var(--fw-bold);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(7, 24, 39, 0.18);
}

.langv--v4 .lang-switcher span[aria-hidden="true"] {
  display: none; /* no separator on a segmented control */
}

.langv--v4 .site-header__inner .lang-switcher {
  margin-left: 0;
  margin-right: var(--space-2);
}


/* ==========================================================================
   V5 — Split-Button mit Caret (Deutsch ▼)
   Pattern: a single primary action button that reads the active language
   in full ("Deutsch" or "English") with a caret suffix. Clicking opens a
   small popup listing both languages with a checkmark next to the active
   one. Compact width (≈72px closed) because the trigger is label-driven,
   not pair-driven. Caret rotates 180° when expanded.
   ========================================================================== */
.langv--v5 .lang-switcher {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  white-space: nowrap;
}

.langv--v5 .lang-switcher::before {
  display: none;
}

.langv--v5 .lang-switcher__trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  height: 36px;
  padding: 0 0.7rem 0 0.85rem;
  border: 1px solid rgba(7, 24, 39, 0.18);
  border-radius: var(--radius-md);
  background-color: rgba(252, 250, 246, 0.85);
  color: var(--color-navy);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.langv--v5 .lang-switcher__trigger:hover,
.langv--v5 .lang-switcher__trigger:focus-visible {
  border-color: var(--color-teal);
  color: var(--color-teal-hover);
  background-color: rgba(67, 154, 157, 0.06);
  outline: none;
}

.langv--v5 .lang-switcher__trigger[aria-expanded="true"] {
  border-color: var(--color-teal);
  color: var(--color-teal-hover);
  background-color: var(--color-paper-white);
}

.langv--v5 .lang-switcher__trigger-caret {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--t-fast) var(--ease);
}

.langv--v5 .lang-switcher__trigger[aria-expanded="true"] .lang-switcher__trigger-caret {
  transform: rotate(225deg);
}

.langv--v5 .lang-switcher__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 9rem;
  padding: 0.35rem;
  margin: 0;
  list-style: none;
  background-color: var(--color-paper-white);
  border: 1px solid rgba(7, 24, 39, 0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(7, 24, 39, 0.14),
              0 2px 8px rgba(7, 24, 39, 0.06);
  z-index: 50;
  display: none;
}

.langv--v5 .lang-switcher__trigger[aria-expanded="true"] + .lang-switcher__menu {
  display: block;
}

.langv--v5 .lang-switcher__menu li {
  margin: 0;
  padding: 0;
}

.langv--v5 .lang-switcher__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-navy);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.langv--v5 .lang-switcher__menu a:hover,
.langv--v5 .lang-switcher__menu a:focus-visible {
  background-color: rgba(67, 154, 157, 0.10);
  color: var(--color-teal-hover);
  outline: none;
}

.langv--v5 .lang-switcher__menu a.lang-switcher__active,
.langv--v5 .lang-switcher__menu a[aria-current="true"] {
  background-color: transparent;
  color: var(--color-navy);
  font-weight: var(--fw-semibold);
}

.langv--v5 .lang-switcher__menu a { text-transform: none; }
.langv--v5 .lang-switcher__menu a.lang-switcher__active::after,
.langv--v5 .lang-switcher__menu a[aria-current="true"]::after {
  content: "✓";
  color: var(--color-teal);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  line-height: 1;
}

.langv--v5 .site-header__inner .lang-switcher {
  margin-left: 0;
  margin-right: var(--space-2);
}


/* ==========================================================================
   Mobile (≤ 959px) — keep all switchers compact and reachable beside the
   hamburger toggle; none of the variants collapse to icon-only or hide
   (Master Edi constraint: hamburger menu is unchanged, but the switcher
   stays visible at every viewport so users can always change language
   without opening the burger).
   ========================================================================== */
@media (max-width: 959px) {
  .langv--v1 .lang-switcher,
  .langv--v2 .lang-switcher,
  .langv--v4 .lang-switcher {
    /* keep the pill/stack/segmented compact enough to not push the menu-toggle off-screen */
    font-size: 0.6875rem;
  }

  .langv--v2 .lang-switcher {
    padding: 0.15rem 0.35rem;
  }

  .langv--v2 .lang-switcher a {
    padding: 0.1rem 0.3rem;
  }

  .langv--v5 .lang-switcher__trigger {
    min-height: 36px;
    padding: 0 0.55rem 0 0.65rem;
    font-size: 0.75rem;
  }

  .langv--v3 .lang-switcher__trigger {
    min-width: 40px;
    min-height: 40px;
    width: 2rem;
    height: 2rem;
  }
}


/* ==========================================================================
   Testpolygon page chrome (banner, nav, footer, body explanation block)
   — same convention as hero-a.html / faq-variants v*.html on
   website.tests.beastald.com. Pure testpolygon page chrome, no overlap
   with cyan header rules.
   ========================================================================== */
.polygon-banner {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-paper-white);
  padding: 0.5rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid rgba(7, 24, 39, 0.12);
}
.polygon-banner strong { color: var(--color-teal); }

.polygon-nav {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-slate);
  border-bottom: 1px solid rgba(7, 24, 39, 0.08);
}
.polygon-nav a { color: var(--color-navy); text-decoration: none; }
.polygon-nav a:hover { text-decoration: underline; text-decoration-color: var(--color-teal); }

.langv-intro {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(7, 24, 39, 0.08);
}
.langv-intro__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 0.5rem;
  display: inline-block;
}
.langv-intro__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--color-navy);
  margin: 0 0 0.75rem;
}
.langv-intro__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-slate);
  margin: 0;
  max-width: 42rem;
}
.langv-intro__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-slate);
  margin-top: 1rem;
}

.langv-rationale {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  border-bottom: 1px solid rgba(7, 24, 39, 0.08);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .langv-rationale {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2rem;
  }
}
.langv-rationale__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 0.4rem;
}
.langv-rationale__what {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}
.langv-rationale__why {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-slate);
  margin: 0;
}

/* The hero section below is a faithful cyan hero so Master Edi sees the
   switcher inside the real page chrome it will live in. */
.langv-hero {
  max-width: 56rem;
  margin: 0 auto;
  padding: 4rem 1.25rem 5rem;
}
.langv-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 1rem;
  display: inline-block;
}
.langv-hero__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--color-navy);
  margin: 0 0 1.25rem;
  max-width: 18ch;
}
.langv-hero__sub {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-slate);
  margin: 0 0 1.75rem;
  max-width: 38rem;
}
.langv-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  background-color: var(--color-navy);
  color: var(--color-ivory);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.langv-hero__cta:hover {
  background-color: var(--color-teal-hover);
  color: var(--color-paper-white);
  text-decoration: none;
  transform: translateY(-1px);
}

.polygon-footer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  border-top: 1px solid rgba(7, 24, 39, 0.08);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-slate);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.polygon-footer a { color: var(--color-navy); text-decoration: none; }
.polygon-footer a:hover { text-decoration: underline; text-decoration-color: var(--color-teal); }