/* ==========================================================================
   Bilingual presentation + DE/EN toggle. Loaded by every page.

   Default (no class): German primary, small grey English echo — the live,
   approved look. With html.u-lang-en (header toggle, localStorage fc-lang):
   the two languages swap places EXACTLY — the promoted language inherits
   the container's original styling, the demoted one receives the literal
   echo values from the stylesheet, and paired blocks reverse order. The
   page must look identical in both modes, only the languages trade places.
   Buttons and one-line UI hints show only the active language.
   ========================================================================== */

/* --- header nav: German first, small English sublabel --- */

.u-nav-link span[lang="de"] {
  display: block;
  line-height: 1.2;
}

.u-nav-en {
  display: block;
  font-size: 0.68em;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: none;
  opacity: 0.7;
  line-height: 1.1;
  margin-top: 1px;
}

html.u-lang-en .u-nav-link span[lang="de"] {
  font-size: 0.68em;
  font-weight: 400;
  opacity: 0.7;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

html.u-lang-en .u-nav-link .u-nav-en {
  font-size: 1em;
  font-weight: inherit;
  opacity: 1;
  letter-spacing: inherit;
  line-height: 1.2;
}

/* keep the pair order mirrored too: active language on top */
html.u-lang-en .u-nav-link:has(> .u-nav-en) {
  display: flex;
  flex-direction: column-reverse;
}

/* --- language toggle: DE | EN segmented switch with little flags.
       The active language's segment is fully opaque with a filled pill;
       borders use currentColor so the switch works on the dark header
       AND the light mobile menu without separate colour sets. --- */

.u-fc-langswitch {
  display: inline-flex;
  align-items: center;
}

.u-fc-langbtn {
  border: 1.5px solid currentColor;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.55;
}

.u-fc-langbtn + .u-fc-langbtn {
  margin-left: 6px;
}

.u-fc-langbtn:hover {
  opacity: 1;
}

.u-fc-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  display: block;
  flex: 0 0 auto;
}

/* active language segment */
html:not(.u-lang-en) .u-fc-langbtn[data-fc-lang="de"],
html.u-lang-en .u-fc-langbtn[data-fc-lang="en"] {
  opacity: 1;
  background: rgba(128, 128, 128, 0.18);
}

.u-popupmenu-items .u-fc-langbtn {
  display: inline-flex;
  margin-top: 8px;
}

/* --- headings: <span lang="de"> + English echo (u-heading-en, u-hero-en,
       u-day-en, u-topic-en, u-svc-title em). Exact mirror of the echo
       styles defined in index.css / pages.css. --- */

html.u-lang-en :is(h1, h2, h3):has(> [lang="en"]) {
  display: flex;
  flex-direction: column-reverse;
}

html.u-lang-en :is(h1, h2, h3) > span[lang="de"] {
  display: block;
  font-weight: 400;
}

/* promoted English takes the heading's own styling */
html.u-lang-en .u-heading-en,
html.u-lang-en .u-hero-en,
html.u-lang-en .u-day-en,
html.u-lang-en .u-topic-en {
  font-size: 1em;
  font-weight: inherit;
  opacity: 1;
  color: inherit;
  letter-spacing: inherit;
  margin-top: 0;
}

/* demoted German receives the exact echo values */
html.u-lang-en h2:has(> .u-heading-en) > span[lang="de"] {
  font-size: 1.25rem;
  letter-spacing: 1px;
  opacity: 0.75;
  margin-top: 6px;
}

html.u-lang-en h1:has(> .u-hero-en) > span[lang="de"] {
  font-size: 1.375rem;
  letter-spacing: 1px;
  opacity: 0.85;
  margin-top: 8px;
}

html.u-lang-en h3:has(> .u-day-en) > span[lang="de"] {
  font-size: 0.875rem;
  color: #8a8a8a;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

html.u-lang-en h3:has(> .u-topic-en) > span[lang="de"] {
  font-size: 0.875rem;
  color: #8a8a8a;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Was-wir-bieten titles: em[lang=en] ↔ span[lang=de] */
html.u-lang-en .u-svc-title em {
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: inherit;
  margin-left: 0;
}

html.u-lang-en .u-svc-title {
  display: flex;
  flex-direction: column;
}

html.u-lang-en .u-svc-title em {
  order: -1;
  margin: 0;
}

html.u-lang-en .u-svc-title > span[lang="de"] {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: none;
  color: #9a9a9a;
  display: block;
  margin: 3px 0 0;
}

/* --- country pills: SÜDAFRIKA ↔ South Africa --- */

html.u-lang-en .u-country-pill .u-name-en {
  font-size: 1em;
  font-weight: inherit;
  opacity: 1;
}

html.u-lang-en .u-country-pill h3 > span[lang="de"] {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 2px;
  opacity: 0.75;
}

/* --- destination rows: DE span ↔ .u-dest-en, order flipped --- */

html.u-lang-en .u-dest-text p:has(> .u-dest-en) {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 0.9em;
}

html.u-lang-en .u-dest-text p:has(> .u-dest-en) br {
  display: none;
}

html.u-lang-en .u-dest-text .u-dest-en {
  font-size: inherit;
  color: inherit;
}

html.u-lang-en .u-dest-text p:has(> .u-dest-en) > span[lang="de"] {
  font-size: 0.9375rem;
  color: #6d6d6d;
}

/* --- Was wir bieten paragraphs --- */

html.u-lang-en .u-svc-body {
  display: flex;
  flex-direction: column;
}

html.u-lang-en .u-svc-de {
  order: 2;
  font-size: 0.8125rem;
  color: #9a9a9a;
  line-height: 1.5;
  margin: 4px 0 0;
}

html.u-lang-en .u-svc-en {
  font-size: inherit;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 10px 0 0;
}


/* --- Wann wohin --- */

html.u-lang-en .u-ss-sub {
  display: flex;
  flex-direction: column-reverse;
}

html.u-lang-en .u-ss-sub > span[lang="en"] {
  font-size: inherit;
  color: inherit;
  margin-top: 0;
}

html.u-lang-en .u-ss-sub > span[lang="de"] {
  display: block;
  font-size: 0.875rem;
  color: #9a9a9a;
  margin-top: 8px;
}

html.u-lang-en .u-ss-body {
  display: flex;
  flex-direction: column;
}

html.u-lang-en .u-ss-card .u-ss-country { order: 0; }

html.u-lang-en .u-ss-why {
  order: 2;
  font-size: 0.8125rem;
  color: #9a9a9a;
  line-height: 1.5;
  margin-top: 4px;
}

html.u-lang-en .u-ss-why-en {
  order: 1;
  font-size: inherit;
  color: #4a4a4a;
  line-height: 1.6;
  margin-top: 6px;
}

/* --- Beispielreise pages: day texts --- */

html.u-lang-en .u-day {
  display: flex;
  flex-direction: column;
}

html.u-lang-en .u-day > h3 { order: -3; }
html.u-lang-en .u-day > .u-stage { order: -2; }

html.u-lang-en .u-day > .u-en-block {
  order: -1;
  font-size: inherit;
  color: #4a4a4a;
  border-left: 0;
  padding-left: 0;
  line-height: 1.8;
  margin: 14px 0 0;
}

html.u-lang-en .u-day > p:not(.u-en-block) {
  font-size: 0.9375rem;
  color: #6d6d6d;
  border-left: 2px solid #ececec;
  padding-left: 18px;
  line-height: 1.7;
  margin: 18px 0 0;
}

html.u-lang-en .u-page-intro {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 0.9em;
}

html.u-lang-en .u-page-intro br { display: none; }

/* --- callout: paired lists, only the active language's list is shown --- */

.u-callout ul[lang="en"] { display: none; }
html.u-lang-en .u-callout ul[lang="de"] { display: none; }
html.u-lang-en .u-callout ul[lang="en"] { display: block; }

/* --- contact paragraph (index) --- */

html.u-lang-en .u-text-2:has(> span[lang="en"]) {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 0.9em;
}

html.u-lang-en .u-text-2:has(> span[lang="en"]) br { display: none; }

/* --- buttons + one-line UI hints: only the active language is shown --- */

.u-fc-mailbtn span[lang="en"],
.u-pdf-btn-en {
  display: none;
}

html.u-lang-en .u-fc-mailbtn span[lang="en"] { display: inline; }
html.u-lang-en .u-fc-mailbtn span[lang="de"] { display: none; }

html.u-lang-en .u-pdf-btn-en { display: inline-block; }
html.u-lang-en .u-pdf-btn-de { display: none; }

html.u-lang-en .u-map-hint span[lang="de"],
html.u-lang-en .u-map-note span[lang="de"],
html.u-lang-en .u-hero-note span[lang="de"],
html.u-lang-en .u-page-figure figcaption span[lang="de"] {
  display: none;
}

/* stage rows, their key line, the closing wish and the Beispielreisen
   dropdown entries: one-liners, only the active language is shown */
.u-stage span[lang="en"],
.u-stage-key span[lang="en"],
.u-closing span[lang="en"],
.u-fc-dropdown span[lang="en"] {
  display: none;
}

html.u-lang-en .u-stage span[lang="de"],
html.u-lang-en .u-stage-key span[lang="de"],
html.u-lang-en .u-closing span[lang="de"],
html.u-lang-en .u-fc-dropdown span[lang="de"] {
  display: none;
}

html.u-lang-en .u-stage span[lang="en"],
html.u-lang-en .u-stage-key span[lang="en"],
html.u-lang-en .u-closing span[lang="en"],
html.u-lang-en .u-fc-dropdown span[lang="en"] {
  display: inline;
}

/* --- Beispielreise closing CTA: order flip in EN mode --- */

html.u-lang-en .u-page-cta p:has(> span[lang="en"]) {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 0.9em;
}

html.u-lang-en .u-page-cta p:has(> span[lang="en"]) br { display: none; }

/* --- Wann-wohin month pills: only the active language's abbreviation --- */

.u-ss-month span[lang="en"] { display: none; }
html.u-lang-en .u-ss-month span[lang="de"] { display: none; }
html.u-lang-en .u-ss-month span[lang="en"] { display: inline; }