/* ==========================================================================
   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 button --- */

.u-fc-langbtn {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1;
  align-self: center;
}

.u-fc-langbtn:hover {
  border-color: #ffffff;
}

.u-popupmenu-items .u-fc-langbtn {
  display: inline-block;
  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 > span[lang="de"] {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: none;
  color: #9a9a9a;
}

/* --- 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: -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;
}

/* --- 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; }