/* ============================================================================
   MF-Cornsnakes – Design System  (Redesign 2026-06)
   Logo-Farben bleiben. Kein Schwarz/Weiß. Scan-first statt Textwände.
   Tokens, Basis, Header/Footer/Mobile, Hero, und Komponenten (cs-*).
   ============================================================================ */

/* Selbst gehostete Display-Schrift (DSGVO: kein externer Request) */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cs-brown:      #463E31;  /* Marke dunkel: Header, Footer, Struktur     */
  --cs-brown-soft: #5A5040;  /* Hover / Borders auf Dunkel                 */
  --cs-sand:       #EACDA3;  /* heller Marken-Akzent, Text auf Dunkel      */
  --cs-paper:      #FAF5EA;  /* Seitenbasis – warmes Off-White (kein Weiß) */
  --cs-card:       #F3E7CF;  /* Karten / Kacheln                           */
  --cs-soft:       #F0DFC0;  /* sanfte Akzentbahn                          */
  --cs-rust:       #B5623A;  /* Hauptakzent – Kornnatter-Terrakotta        */
  --cs-rust-dark:  #9A4F2E;  /* Rust Hover                                 */
  --cs-sage:       #6F7B53;  /* Zweitakzent (Natur), sparsam              */
  --cs-ink:        #2C2416;  /* Fließtext – warmes Dunkelbraun (kein Schwarz) */
  --cs-line:       #E0CFB0;  /* dezente Linien auf hell                    */

  --cs-radius:     12px;
  --cs-shadow:     0 2px 14px rgba(70,62,49,0.10);
  --cs-shadow-lg:  0 8px 28px rgba(70,62,49,0.16);
  --cs-measure:    44rem;    /* Lesemaß für Fließtext                      */
  --cs-wide:       1060px;   /* max. Breite für Raster                     */

  --cs-font-head: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --cs-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===== Basis ===== */
body { background-color: var(--cs-paper); color: var(--cs-ink); font-family: var(--cs-font-body); }
a { color: var(--cs-rust); }
a:hover { color: var(--cs-rust-dark); }
h1, h2, h3, h4 { color: var(--cs-brown); font-family: var(--cs-font-head); font-weight: 600; }
h1, h2, h3 { text-align: center; }
body, p, li { color: var(--cs-ink); }
.button, button { background-color: var(--cs-brown) !important; color: var(--cs-sand) !important; border-color: var(--cs-brown); }

/* ===== Header / Brand ===== */
#header { background-color: var(--cs-brown) !important; }
nav { background-color: var(--cs-brown) !important; }
.navbar-brand img { height: 52px; width: auto; display: block; }
#header .navbar { display: flex; align-items: center; justify-content: space-between; }
#header .navbar-section.logo { flex: 0 0 auto; }
#header .navbar-section.desktop-menu { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
#header .navbar-section a { color: var(--cs-sand) !important; }
#header .dropmenu > ul { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
#header .dropmenu > ul > li > a { padding: 0.5rem 1rem; white-space: nowrap; }

/* ===== Footer ===== */
footer, #footer, .footer-wrapper { background-color: var(--cs-brown) !important; color: var(--cs-sand) !important; }
footer a, #footer a { color: var(--cs-sand) !important; text-decoration: none; }
footer a:hover, #footer a:hover { text-decoration: underline; }
#footer .container { padding: 1.5rem 1rem; text-align: center; }

/* Kein horizontaler Scroll durch Full-Bleed (50vw) */
html, body { overflow-x: hidden; }
#page-wrapper { overflow-x: hidden; }

/* Dropdown-Untermenü („Genetik") lesbar.
   Theme setzt `.header-dark #header:not(.scrolled) .dropmenu ul ul a { color:#454d5d !important }`
   (dunkles Blaugrau) mit hoher Spezifität → wir müssen sie mit gleichem Präfix + 1 Element schlagen.
   Literales Hex (kein var(): wird in :visited aus Datenschutzgründen nicht aufgelöst). */
.header-dark #header:not(.scrolled) .dropmenu ul ul li a,
.header-dark #header:not(.scrolled) .dropmenu ul ul li a:link,
.header-dark #header:not(.scrolled) .dropmenu ul ul li a:visited,
.header-dark #header:not(.scrolled) .dropmenu ul ul li a:active,
.header-dark #header:not(.scrolled) .dropmenu ul ul li a:focus,
#header nav.dropmenu ul ul li a,
#header nav.dropmenu ul ul li a:link,
#header nav.dropmenu ul ul li a:visited { color: #EACDA3 !important; }
.header-dark #header:not(.scrolled) .dropmenu ul ul li a:hover,
#header nav.dropmenu ul ul li a:hover { color: #ffffff !important; background: rgba(234,205,163,0.16) !important; }

/* ============================================================================
   HERO  (Home: .home-hero · Unterseiten: .page-hero · gemeinsame .hero-overlay)
   ============================================================================ */
.home-hero, .page-hero {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.home-hero { height: 82vh; min-height: 480px; }
.page-hero { height: 46vh; min-height: 320px; }
.hero-overlay {
  /* Verlauf statt flacher Maske → Text immer lesbar, Bild bleibt sichtbar */
  background: linear-gradient(180deg, rgba(30,24,16,0.30) 0%, rgba(30,24,16,0.58) 100%);
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
}
.hero-overlay h1 { color: var(--cs-sand) !important; font-size: 3.4rem; line-height: 1.05; margin-bottom: 0.4rem; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.hero-overlay h2 { color: var(--cs-sand) !important; font-family: var(--cs-font-body); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.9rem; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.hero-overlay h2 em { font-style: italic; opacity: 0.92; }
.hero-overlay p { color: var(--cs-sand); font-size: 1.08rem; letter-spacing: 0.04em; text-shadow: 0 1px 4px rgba(0,0,0,0.4); margin-bottom: 0; }
.page-hero .hero-overlay h1 { font-size: 2.7rem; }
.page-hero .hero-overlay h2 { font-size: 1.3rem; }

/* Hero-CTA */
.hero-overlay .cs-hero-cta { margin-top: 1.4rem; display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
.cs-btn, .hero-overlay .cs-btn {
  display: inline-block; padding: 0.7rem 1.6rem; border-radius: 8px;
  font-weight: 700; text-decoration: none !important; transition: transform .15s, background .15s, box-shadow .15s;
}
.cs-btn--primary { background: var(--cs-rust); color: #fff7ef !important; box-shadow: 0 4px 14px rgba(181,98,58,0.35); }
.cs-btn--primary:hover { background: var(--cs-rust-dark); color: #fff !important; transform: translateY(-2px); }
.cs-btn--ghost { background: rgba(250,245,234,0.12); color: var(--cs-sand) !important; border: 1.5px solid var(--cs-sand); }
.cs-btn--ghost:hover { background: rgba(234,205,163,0.18); transform: translateY(-2px); }

/* ============================================================================
   SECTIONS  (ruhige Papierfläche; Akzentbahnen gezielt statt Dauerwechsel)
   Neu: .cs-section  ·  Bestand bleibt: .page-section.light/dark/soft
   ============================================================================ */
.cs-section, .page-section {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 3.4rem 1.5rem;
}
.cs-section { background-color: var(--cs-paper); }
.cs-section.is-soft,    .page-section.soft  { background-color: var(--cs-soft) !important; }
.cs-section.is-sand,    .page-section.light { background-color: var(--cs-paper); }
.cs-section.is-feature { background-color: var(--cs-sand); }
.cs-section.is-dark,    .page-section.dark  { background-color: var(--cs-brown); color: var(--cs-sand); }

.cs-section .cs-inner, .page-section .section-inner { max-width: var(--cs-wide); margin: 0 auto; }
.cs-section .cs-inner.is-narrow { max-width: var(--cs-measure); }
.cs-section > .cs-inner > p, .cs-section > .cs-inner > ul, .cs-section > .cs-inner > ol { max-width: var(--cs-measure); margin-left: auto; margin-right: auto; }

/* Lesbarkeit: Fließtext links, ruhiger Zeilenabstand */
.cs-section p, .page-section .section-inner p { line-height: 1.7; margin: 0 auto 0.85rem; }
.cs-section li, .page-section .section-inner li { line-height: 1.6; }

/* Sektions-Eyebrow + Titel */
.cs-eyebrow { display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; color: var(--cs-rust); margin-bottom: 0.5rem; }
.cs-section.is-dark .cs-eyebrow { color: var(--cs-sand); }
.cs-lead { text-align: center; font-size: 1.18rem; line-height: 1.6; color: var(--cs-brown-soft); max-width: 42rem; margin: 0 auto 1.5rem; }
.cs-section.is-dark .cs-lead { color: var(--cs-sand); }

/* Dark-Section Lesbarkeit (Bestand) */
.cs-section.is-dark h2, .cs-section.is-dark h3, .page-section.dark h2, .page-section.dark h3 { color: var(--cs-sand) !important; }
.cs-section.is-dark p, .cs-section.is-dark li, .page-section.dark p, .page-section.dark li { color: var(--cs-sand); }
.cs-section.is-dark a, .page-section.dark a { color: #e7c79c; }

/* ============================================================================
   STECKBRIEF-STRIP  (.cs-facts)
   ============================================================================ */
.cs-facts {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: var(--cs-brown);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0;
  padding: 1.4rem 1rem;
}
.cs-fact { flex: 1 1 150px; min-width: 130px; max-width: 220px; text-align: center; padding: 0.4rem 0.9rem; border-right: 1px solid rgba(234,205,163,0.18); }
.cs-fact:last-child { border-right: none; }
.cs-fact .cs-fact__ico { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 0.35rem; }
.cs-fact .cs-fact__label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(234,205,163,0.7); margin-bottom: 0.15rem; }
.cs-fact .cs-fact__value { display: block; color: var(--cs-sand); font-weight: 700; font-size: 0.98rem; line-height: 1.25; }

/* ============================================================================
   KARTEN-RASTER  (.cs-grid / .cs-card)
   ============================================================================ */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin: 1.6rem auto 0; max-width: var(--cs-wide); }
.cs-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cs-card {
  background: var(--cs-card); border-radius: var(--cs-radius); padding: 1.4rem 1.45rem;
  box-shadow: var(--cs-shadow); border-top: 3px solid var(--cs-rust);
  transition: transform .18s, box-shadow .18s;
}
.cs-card:hover { transform: translateY(-3px); box-shadow: var(--cs-shadow-lg); }
.cs-card .cs-card__ico { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 0.55rem; }
.cs-card h3 { text-align: left; font-size: 1.08rem; margin: 0 0 0.45rem; }
.cs-card p { text-align: left; font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.4rem; }
.cs-card ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.cs-card li { text-align: left; font-size: 0.93rem; margin-bottom: 0.28rem; }
.cs-section.is-dark .cs-card { background: #3d3629; border-top-color: var(--cs-sand); }
.cs-section.is-dark .cs-card h3 { color: var(--cs-sand) !important; }

/* ============================================================================
   CALLOUTS  (.cs-callout  --rec | --tip | --important)
   ============================================================================ */
.cs-callout {
  max-width: var(--cs-measure); margin: 1.4rem auto; padding: 1.1rem 1.3rem 1.1rem 1.4rem;
  background: var(--cs-card); border-left: 5px solid var(--cs-rust); border-radius: 10px;
  box-shadow: var(--cs-shadow);
}
.cs-callout > :first-child { margin-top: 0; }
.cs-callout > :last-child { margin-bottom: 0; }
.cs-callout h3, .cs-callout h4 { text-align: left; margin: 0 0 0.4rem; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.cs-callout p, .cs-callout li { text-align: left; }
.cs-callout--rec       { border-left-color: var(--cs-rust); }
.cs-callout--tip       { border-left-color: var(--cs-sage); background: #eef0e4; }
.cs-callout--important { border-left-color: #C24B3A; background: #f6e3da; }
.cs-callout__ico { font-size: 1.2rem; }

/* ============================================================================
   DATENTABELLE  (.cs-table)
   ============================================================================ */
.cs-table-wrap { max-width: var(--cs-measure); margin: 1.3rem auto; overflow-x: auto; }
table.cs-table { width: 100%; border-collapse: collapse; background: var(--cs-card); border-radius: 10px; overflow: hidden; box-shadow: var(--cs-shadow); }
table.cs-table th { background: var(--cs-brown); color: var(--cs-sand); text-align: left; padding: 0.7rem 0.9rem; font-size: 0.9rem; }
table.cs-table td { padding: 0.62rem 0.9rem; border-top: 1px solid var(--cs-line); font-size: 0.94rem; }
table.cs-table tr:nth-child(even) td { background: rgba(70,62,49,0.04); }
/* Markdown-Tabellen in cs-sections automatisch hübsch */
.cs-section .cs-inner table { width: 100%; border-collapse: collapse; background: var(--cs-card); border-radius: 10px; overflow: hidden; box-shadow: var(--cs-shadow); margin: 1.2rem auto; }
.cs-section .cs-inner th { background: var(--cs-brown); color: var(--cs-sand); text-align: left; padding: 0.7rem 0.9rem; }
.cs-section .cs-inner td { padding: 0.62rem 0.9rem; border-top: 1px solid var(--cs-line); }

/* ============================================================================
   ON-PAGE-NAV  (.cs-toc)  – „Auf dieser Seite"
   ============================================================================ */
.cs-toc {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: var(--cs-soft); border-bottom: 1px solid var(--cs-line); border-top: 1px solid var(--cs-line);
}
.cs-toc ul { max-width: var(--cs-wide); margin: 0 auto; padding: 0.6rem 1rem; list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; justify-content: center; }
.cs-toc a { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.82rem; font-weight: 600; color: var(--cs-brown); text-decoration: none !important; }
.cs-toc a:hover { background: rgba(70,62,49,0.10); color: var(--cs-rust-dark); }
[id] { scroll-margin-top: 4.5rem; } /* Anker nicht unter sticky Nav */

/* ============================================================================
   KONTAKT / CTA-BLOCK  (.cs-contact)  – wiederverwendbar
   ============================================================================ */
.cs-contact .cs-inner { text-align: center; }
.cs-contact h2 { color: var(--cs-sand) !important; }
.cs-contact p { color: var(--cs-sand); max-width: 40rem; margin: 0 auto 1rem; }
.cs-contact .cs-channels { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin: 1.2rem 0 0.5rem; }
.cs-contact .cs-channels a {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.25rem; border-radius: 8px;
  background: var(--cs-sand); color: var(--cs-brown) !important; font-weight: 700; text-decoration: none !important;
  transition: transform .15s, background .15s;
}
.cs-contact .cs-channels a:hover { background: #f3ddb8; transform: translateY(-2px); }
.cs-contact .cs-channels a.is-rust { background: var(--cs-rust); color: #fff7ef !important; }
.cs-contact .cs-channels a.is-rust:hover { background: var(--cs-rust-dark); }
/* Heller Kontaktblock (für Seiten, die hell enden sollen) */
.cs-contact.is-light h2 { color: var(--cs-brown) !important; }
.cs-contact.is-light .cs-eyebrow { color: var(--cs-rust); }
.cs-contact.is-light p { color: var(--cs-ink); }
.cs-contact.is-light .cs-channels a { background: var(--cs-brown); color: var(--cs-sand) !important; }
.cs-contact.is-light .cs-channels a:hover { background: var(--cs-brown-soft); }
.cs-contact.is-light .cs-channels a.is-rust { background: var(--cs-rust); color: #fff7ef !important; }
.cs-contact.is-light .cs-channels a.is-rust:hover { background: var(--cs-rust-dark); }

/* ============================================================================
   „WUSSTEST DU?"  (.cs-dyk)
   ============================================================================ */
.cs-dyk { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; margin: 1.5rem auto 0; max-width: var(--cs-wide); }
.cs-dyk__item { background: var(--cs-card); border-radius: var(--cs-radius); padding: 1.25rem 1.35rem; box-shadow: var(--cs-shadow); position: relative; }
.cs-dyk__item::before { content: '💡'; position: absolute; top: -0.6rem; left: 1.1rem; background: var(--cs-soft); border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--cs-shadow); }
.cs-dyk__item h3 { text-align: left; font-size: 1rem; margin: 0.5rem 0 0.4rem; }
.cs-dyk__item p { text-align: left; font-size: 0.93rem; line-height: 1.55; margin: 0; }

/* ============================================================================
   HOME-spezifisch  (Bestand: Karten + App-Empfehlungen, an Tokens angeglichen)
   ============================================================================ */
.home-welcome { background: var(--cs-soft); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2.6rem 2rem; text-align: center; margin-bottom: 0; }
.home-welcome p { max-width: 700px; margin: 0 auto; font-size: 1.08rem; color: var(--cs-ink); line-height: 1.7; }

.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 1.4rem; margin: 1.6rem auto 0; max-width: var(--cs-wide); }
.home-card-link { text-decoration: none !important; color: inherit !important; display: block; }
.home-card { background: var(--cs-card); border-radius: var(--cs-radius); overflow: hidden; height: 100%; box-shadow: var(--cs-shadow); transition: transform .2s, box-shadow .2s; }
.home-card:hover { transform: translateY(-4px); box-shadow: var(--cs-shadow-lg); }
.home-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.home-card-body { padding: 1.2rem 1.3rem; }
.home-card-body h3 { text-align: left; color: var(--cs-brown); font-size: 1.12rem; margin-bottom: 0.5rem; line-height: 1.35; }
.home-card-body p { text-align: left; font-size: 0.94rem; color: var(--cs-ink); margin-bottom: 0.7rem; line-height: 1.55; }
.home-card-cta { color: var(--cs-rust); font-weight: 700; font-size: 0.92rem; }

.home-footer-note { text-align: center; margin: 2rem auto 0; color: var(--cs-brown-soft); font-style: italic; max-width: 40rem; }

/* App-Empfehlungen */
.home-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 1.5rem; max-width: var(--cs-wide); margin: 1.8rem auto 0; }
.home-rec-col { background: var(--cs-card); border-radius: var(--cs-radius); padding: 1.6rem 1.75rem; box-shadow: var(--cs-shadow); border-top: 3px solid var(--cs-rust); }
.home-rec-col h3 { text-align: left; margin-top: 0; color: var(--cs-brown); }
.home-rec-col p { text-align: left; font-size: 1rem; line-height: 1.6; color: var(--cs-ink); }
.home-rec-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.25rem; }
.home-rec-actions a { display: inline-block; padding: 0.55rem 1.3rem; background: var(--cs-brown); color: var(--cs-sand) !important; border-radius: 8px; text-decoration: none !important; font-weight: bold; transition: background .2s, transform .15s; }
.home-rec-actions a:hover { background: var(--cs-brown-soft); transform: translateY(-2px); }
.home-rec-actions a.is-rust { background: var(--cs-rust); color: #fff7ef !important; }
.home-rec-actions a.is-rust:hover { background: var(--cs-rust-dark); }

/* ===== Bestehende Buttons (page-section) ===== */
.btn-wrap { text-align: center; margin-top: 1.5rem; }
.page-section.dark .btn-wrap a, .page-section.dark a.page-btn, .cs-section.is-dark .btn-wrap a {
  display: inline-block; padding: 0.7rem 2rem; border: 2px solid var(--cs-sand); color: var(--cs-sand) !important; border-radius: 8px; text-decoration: none !important; font-weight: bold; transition: background .2s; }
.page-section.dark .btn-wrap a:hover { background: rgba(234,205,163,0.15); }
.page-section.light .btn-wrap a, .page-section.light a.page-btn, .cs-section .btn-wrap a {
  display: inline-block; padding: 0.7rem 2rem; background: var(--cs-rust); color: #fff7ef !important; border-radius: 8px; text-decoration: none !important; font-weight: bold; transition: background .2s, transform .15s; }
.page-section.light .btn-wrap a:hover, .cs-section .btn-wrap a:hover { background: var(--cs-rust-dark); transform: translateY(-2px); }

/* ===== Überschriften-Farben in Sektionen ===== */
.page-section.light h2, .page-section.light h3 { color: var(--cs-brown) !important; }
.page-section.dark h2, .page-section.dark h3 { color: var(--cs-sand) !important; }
.page-section.dark a { color: #e7c79c; }
.page-section.dark table { color: var(--cs-sand); }
.page-section.dark th { background-color: #3a3228; color: var(--cs-sand); }
.page-section.dark td { border-color: var(--cs-brown-soft); }
.page-section.dark hr { border-color: var(--cs-brown-soft); }
.section-inner p { margin-bottom: 0.75rem; }
.section-inner p:last-child { margin-bottom: 0; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .hero-overlay h1 { font-size: 2.2rem; }
  .hero-overlay h2 { font-size: 1.2rem; }
  .home-hero { height: 70vh; min-height: 420px; }
  .cs-section, .page-section { padding: 2.4rem 1.1rem; }
  .cs-fact { border-right: none; }
  .cs-toc { position: static; }
}

/* ============================================================================
   Mobile Hamburger / Overlay / LangSwitcher  (Bestand – unverändert in Funktion)
   ============================================================================ */
.mobile-menu .button_container span { background: var(--cs-sand) !important; }
.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .middle,
.mobile-menu .button_container.active .bottom { background: var(--cs-sand) !important; }
.overlay { background: #2a2318 !important; }
.overlay nav a, .overlay nav a:link, .overlay nav a:visited { color: var(--cs-sand) !important; }
.overlay nav a:hover { color: #fff !important; }
.overlay .tree li { border-color: rgba(234,205,163,0.15); }
.overlay .mobile-logo { padding: 1.5rem; }
.mobile-langswitcher ul.langswitcher li a { color: rgba(234,205,163,0.6) !important; }
.mobile-langswitcher ul.langswitcher li a.active,
.mobile-langswitcher ul.langswitcher li a:hover { color: var(--cs-sand) !important; }

ul.langswitcher { display: flex; list-style: none; margin: 0 0 0 1.5rem; padding: 0; align-items: center; gap: 0; }
ul.langswitcher li { display: flex; align-items: center; }
ul.langswitcher li + li::before { content: '|'; color: rgba(234,205,163,0.4); padding: 0 0.3rem; }
ul.langswitcher li a { color: rgba(234,205,163,0.5) !important; text-transform: uppercase; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-decoration: none !important; transition: color .2s; }
ul.langswitcher li a:hover, ul.langswitcher li a.active { color: var(--cs-sand) !important; }
.mobile-langswitcher { text-align: center; margin-top: 1.5rem; }
.mobile-langswitcher ul.langswitcher { justify-content: center; margin: 0; }

/* Nav: 6 Menüpunkte einzeilig (lange DE-Labels) */
#header .navbar { flex-wrap: nowrap; }
#header .navbar-section.desktop-menu { min-width: 0; }
#header .dropmenu > ul { gap: 0.1rem; flex-wrap: nowrap; }
#header .dropmenu > ul > li > a { padding: 0.5rem 0.55rem; }
ul.langswitcher { margin-left: 0.6rem; }
@media (max-width: 1150px) {
  #header .dropmenu > ul > li > a { padding: 0.5rem 0.4rem; font-size: 0.66rem; }
  ul.langswitcher { margin-left: 0.4rem; }
}