/* =============================================================
   SWISSVIVO  ·  theme-navy.css
   Die Farbwelt der Landeseite (Navy, Koralle, kühles Grau) über die
   ganze Site gelegt: eine Schicht nach style.css und luxe.css, nur
   Farben und Knöpfe, keine Layouts. Wer sie entfernt, hat das Gold
   wieder. Schrift, Abstände und Bilder bleiben, wie sie sind.
   ============================================================= */
:root, body.luxe {
  /* Navy als Primärfarbe, in Stufen */
  --navy: #2b52c2; --navy-deep: #1a3689; --navy-soft: #e9eefc; --navy-line: #c6d3f7;
  --coral: #f4694e; --coral-deep: #dc5840; --coral-soft: #fbe7e5; --coral-light: #f7a08c;
  --cool: #f3f5fa; --cool-2: #e9edf5;

  /* Was bisher Gold war */
  --gold-900: #0f2252; --gold-800: #1a3689; --gold-700: #2b52c2; --gold-600: #2b52c2; --gold-500: #2a4ea8;
  --gold-400: #6b84b8; --gold-300: #a9b9e0; --gold-200: #d4ddf2; --gold-100: #e9eefc; --gold-50: #f3f5fa;
  --grad-gold: linear-gradient(135deg, #2a4ea8 0%, #2b52c2 55%, #1a3689 100%);
  --grad-gold-soft: linear-gradient(135deg, #f3f5fa 0%, #e9eefc 100%);
  --sh-gold: 0 16px 40px rgba(43, 82, 194, 0.22);
  --tx-onGold: #ffffff;
  --paper-50: #fbfbfd; --paper-100: #f3f5fa; --paper-150: #eef1f8; --paper-200: #e9edf5; --paper-300: #dde3ee;
  --grad-cream: linear-gradient(180deg, #ffffff 0%, #f3f5fa 100%);
  --sand-100: #eef1f8; --sand-200: #dde3ee;

  --lx-paper-2: #f3f5fa; --lx-mint: #e9eefc;
  --lx-gold: #2b52c2; --lx-gold-rich: #2b52c2; --lx-gold-deep: #1a3689; --lx-gold-light: #f7a08c;
  --lx-hair: rgba(43, 82, 194, 0.16); --lx-hair-soft: rgba(43, 82, 194, 0.08);
  --lx-ink: #15192b; --lx-ink-80: rgba(21, 25, 43, 0.84); --lx-ink-60: rgba(21, 25, 43, 0.64); --lx-ink-45: rgba(21, 25, 43, 0.48); --lx-ink-30: rgba(21, 25, 43, 0.34);
  --lx-navy: #1a3689; --lx-navy-2: #2b52c2;
  --mz-coral: #f4694e; --mz-coral-deep: #dc5840; --mz-teal: #2b52c2; --mz-blue: #2b52c2;
}

/* Grund und Kopf */
body, body.luxe { background: #ffffff; color: #3a4259; }
body.luxe .site-header { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(43, 82, 194, 0.08); }
body.luxe .section--white { background: #ffffff; }
.section--mist, body.luxe .section--mist, .section--cream, body.luxe .section--cream { background: var(--cool); }

/* Knöpfe: Navy, ruhig, 12 px Radius wie auf der Landeseite */
body.luxe .lx-btn.solid, body.luxe .btn-primary, .btn-primary, .lx-btn.solid {
  background: var(--navy) !important; color: #ffffff !important; border-color: var(--navy) !important;
  box-shadow: 0 10px 26px rgba(43, 82, 194, 0.22) !important; border-radius: 12px !important; text-shadow: none !important;
}
body.luxe .lx-btn.solid:hover, body.luxe .btn-primary:hover, .btn-primary:hover, .lx-btn.solid:hover { background: var(--navy-deep) !important; border-color: var(--navy) !important; }
body.luxe .lx-btn.solid svg, body.luxe .btn-primary svg, .btn-primary svg { color: #ffffff !important; }
body.luxe .site-header .nav-actions .btn-primary { border-radius: 12px !important; }
.btn-ghost, body.luxe .btn-ghost, .lx-btn.ghost, body.luxe .lx-btn.ghost { color: var(--navy); border-color: var(--navy-line); }
.btn-ghost:hover, body.luxe .btn-ghost:hover { background: var(--navy-soft); }

/* Kleine Überschriften, Punkte, Linien: Koralle als Akzent, nie als Fläche */
.cx-kicker, body.luxe .cx-kicker, .kicker, .eyebrow, .lx-kicker { color: var(--coral) !important; }
body.luxe .cx-hero-copy > .cx-kicker, body.luxe .page-hero--img .cx-kicker { color: var(--coral-light) !important; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55); }
.cx-kicker::before, .kicker .k-line, .lx-kicker::before { background: var(--coral) !important; }
.cx-h1 .it, body.luxe .cx-h1 .it, .lx-h1 .it, h1 .it, h2 .it { color: var(--coral-light) !important; }
.scroll-progress { background: var(--coral) !important; box-shadow: none !important; }
.cx-meta .dot, .dot { background: var(--coral) !important; }

/* Überschriften und Links */
h1, h2, h3, .cx-h1, .lx-h1, .lx-h2 { color: var(--lx-ink); }
body.luxe .cx-hero .cx-h1, body.luxe .page-hero--img h1 { color: #ffffff; }
a { color: var(--navy); }
.site-nav a.is-active, .site-nav a:hover, body.luxe .site-nav a.is-active { color: var(--navy) !important; }
.site-nav a.is-active::after { background: var(--navy) !important; }

/* Zahlenleiste, Karten, Chips */
.cx-strip-num, body.luxe .cx-strip-num { color: var(--navy); }
.cx-strip-num .u { color: var(--coral); }
.lang-dd-btn, body.luxe .lang-dd-btn { border-color: var(--navy-line); color: var(--navy); }
.cx-dot.is-active, body.luxe .cx-dot.is-active { background: #ffffff; }
.sv-film__ring { color: var(--navy); }

/* Fusszeile und Chat behalten Navy; der Chat-Knopf war Gold */
.lc-launcher, body.luxe .lc-launcher, .chat-launcher { background: var(--navy) !important; color: #ffffff !important; box-shadow: 0 10px 26px rgba(43, 82, 194, 0.3) !important; }
body.luxe .site-footer { border-top-color: rgba(255, 255, 255, 0.08) !important; }
.site-footer a:hover { color: var(--coral-light) !important; }

/* Formulare wie auf der Landeseite */
input[type="text"], input[type="tel"], input[type="email"], select, textarea { border-color: #dfe3ee; border-radius: 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.form-ok { background: #e8f4ec; color: #1f6b3a; }
.form-err { background: var(--coral-soft); color: #a23a2a; }

/* Unterseiten-Hero: statt Türkis und Blau eine Navy-Fläche, Koralle nur als Punkt */
body.luxe .page-hero.page-hero--teal, body.luxe .page-hero--teal,
body.luxe .page-hero.page-hero--blue, body.luxe .page-hero--blue,
body.luxe .page-hero.page-hero--coral, body.luxe .page-hero--coral {
  background: linear-gradient(140deg, #2a4ea8 0%, #2b52c2 55%, #1a3689 100%) !important;
}
body.luxe .page-hero .btn-primary, body.luxe .page-hero .lx-btn.solid { background: var(--coral) !important; border-color: var(--coral) !important; box-shadow: 0 10px 26px rgba(244, 105, 78, 0.35) !important; }
body.luxe .page-hero .btn-primary:hover, body.luxe .page-hero .lx-btn.solid:hover { background: var(--coral-deep) !important; border-color: var(--coral-deep) !important; }

/* Der Chat-Knopf war Gold */
.lc-toggle, body.luxe .lc-toggle { background: var(--navy) !important; color: #ffffff !important; box-shadow: 0 10px 26px rgba(43, 82, 194, 0.3) !important; }
.lc-toggle:hover, body.luxe .lc-toggle:hover { background: var(--navy-deep) !important; }
.lc-head, body.luxe .lc-head { background: var(--navy) !important; }

/* Auf dunklen Flächen sind Links hell, nicht Navy auf Navy */
.page-hero a, body.luxe .page-hero a, .site-footer a, .cx-hero a, .lx-band a { color: rgba(255, 255, 255, 0.78); }
.page-hero a:hover, body.luxe .page-hero a:hover { color: #ffffff; }
.page-hero .breadcrumb span, body.luxe .page-hero .breadcrumb span { color: #ffffff; }

/* Das goldene Akzentwort in Überschriften: auf Weiss Navy, auf Dunkel helle Koralle */
.mz-h2 .g, .lx-h2 .g, h2 .g, h1 .g, body.luxe .mz-h2 .g { color: var(--navy) !important; }
.lx-quote .g, body.luxe .lx-quote .g, .lx-band .g, .cx-hero .g { color: var(--coral-light) !important; }

/* Fusszeile: Spaltentitel waren Gold und wurden auf Navy unsichtbar */
.footer-col h4, body.luxe .footer-col h4 { color: var(--coral-light) !important; }
.site-footer, body.luxe .site-footer { color: rgba(226, 232, 240, 0.78); }
.site-footer .social a, body.luxe .site-footer .social a { border-color: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* Runde Pfeilknöpfe: auf Navy immer ein weisser Pfeil, nie ein dunkler */
.tma-arrow, .ll-arrow, .ir-arrow, .lx-arrow, .svc-arrow, .cx-c-arrow,
body.luxe .tma-arrow, body.luxe .ll-arrow, body.luxe .index-row .ir-arrow, body.luxe .lx-row .lx-arrow { color: #ffffff !important; }
.tma-arrow, .ll-arrow, body.luxe .tma-arrow, body.luxe .ll-arrow { background: var(--navy) !important; border-color: var(--navy) !important; }
.tma-arrow svg, .ll-arrow svg, .ir-arrow svg, .lx-arrow svg { color: #ffffff !important; stroke: #ffffff; }
body.luxe .index-row:hover .ir-arrow, body.luxe .lx-row:hover .lx-arrow { background: var(--navy) !important; color: #ffffff !important; }
.mz-go, body.luxe .mz-go { color: var(--navy) !important; }

/* Akzentwort: auf Weiss Navy, nur auf dunklen Flächen helle Koralle */
.lx-display .it, .lx-statement .it, .section--white h2 .it, .section .it, body.luxe .lx-display .it, body.luxe .lx-statement .it { color: var(--navy) !important; }
.cx-hero .cx-h1 .it, body.luxe .cx-hero .cx-h1 .it, .page-hero .it, .lx-band .it, .section--ink .it, .site-footer .it, .cx-quote .it, .lx-quote .it { color: var(--coral-light) !important; }
body.luxe .cta-final .btn-ghost:hover { color: #ffffff !important; background: var(--navy) !important; }

/* Chat: Kopf Navy mit weisser Schrift, Avatar weiss mit Navy-Kürzel */
.lc-head, body.luxe .lc-head { background: var(--navy) !important; color: #ffffff !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; }
.lc-title, .lc-head .lc-title, body.luxe .lc-title { color: #ffffff !important; }
.lc-sub, .lc-head .lc-sub, .lc-status { color: rgba(255, 255, 255, 0.78) !important; }
.lc-avatar, body.luxe .lc-avatar { background: #ffffff !important; color: var(--navy) !important; }
.lc-msg, .lc-bubble { background: var(--navy-soft) !important; color: var(--lx-ink) !important; }

/* =============================================================
   LAYOUT: eine Ordnung für alle Seiten
   Schmale Aussenränder, grosse abgerundete Blöcke, eine Schriftfamilie,
   ein Raster für Abstände und Radien. Textbreiten bleiben begrenzt.
   ============================================================= */
:root, body.luxe {
  --f-serif: "Bricolage Grotesque", "Inter", system-ui, sans-serif;   /* kein Serif mehr, eine Familie */
  --lx-serif: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --radius-lg: 28px; --radius: 18px; --radius-sm: 12px;
  --lx-gutter: clamp(16px, 2.5vw, 44px);
  --gutter: clamp(16px, 2.5vw, 44px);
}
.lx-container, body.luxe .lx-container { max-width: 1680px; padding-inline: clamp(16px, 2.5vw, 44px); }
.container, body.luxe .container, .container-ed { max-width: 1680px; }
body.luxe .cx-hero, body.luxe .page-hero.page-hero--img, body.luxe .lx-band, body.luxe .site-footer, .cx-stats-strip, body.luxe .cx-stats-strip { border-radius: 28px; }
body.luxe .cx-hero { margin-top: 12px; }
body.luxe .site-header .nav { border-radius: 20px; }

/* Abstände: ein Takt */
.section, body.luxe .section, .lx-section, body.luxe .lx-section, .sv-film, .mz-section, .cx-section { padding-top: clamp(56px, 7vw, 112px); padding-bottom: clamp(56px, 7vw, 112px); }

/* Typografie: eine Skala, enge Zeilen, leicht verdichtet wie die Vorlage */
body.luxe h1, body.luxe .cx-h1, body.luxe .lx-display, body.luxe .page-hero--img h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; }
body.luxe .cx-h1 { font-size: clamp(3.2rem, 7.4vw, 7.8rem); }
body.luxe .page-hero--img h1 { font-size: clamp(2.8rem, 5.6vw, 5.6rem); }
body.luxe h2, body.luxe .lx-display, body.luxe .mz-h2, body.luxe .sv-film__h { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(2.1rem, 4.4vw, 4.2rem); }
body.luxe h3 { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.015em; }
body.luxe .cx-lead, body.luxe .lx-body, body.luxe p { font-family: "Inter", system-ui, sans-serif; }
.cx-kicker, .kicker, .eyebrow, .lx-kicker, .footer-col h4 { font-family: "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.14em; font-size: 0.72rem; text-transform: uppercase; }

/* Alle kleinen Vorzeilen gleich: Inter, Versalien, Koralle, mit kurzer Linie */
.lx-label, .wz-eyebrow, .calc-eyebrow, body.luxe .lx-label { color: var(--coral) !important; font-family: "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.14em; font-size: 0.72rem; text-transform: uppercase; }
.lx-label::before, body.luxe .lx-label::before { background: var(--coral) !important; }
.section--ink .lx-label, .lx-band .lx-label, .cx-hero .lx-label { color: var(--coral-light) !important; }

/* Die Themenliste auf der Startseite: grosse Navy-Titel, Koralle erst beim Zeigen; sie ist kein Vorzeiler */
body.luxe .tma-label { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.02em !important; text-transform: none !important; font-size: clamp(1.5rem, 3.1vw, 2.5rem) !important; color: var(--lx-ink) !important; line-height: 1.1 !important; }
body.luxe .tma-list a:hover .tma-label, body.luxe .tma-list a:focus-visible .tma-label { color: var(--navy) !important; }
body.luxe .tma-list li { border-color: rgba(43, 82, 194, 0.14); }
body.luxe .tma-list a:hover { background: #ffffff; }

/* Die Zahlenleiste als Block wie der Hero: kühles Grau, gleicher Radius, gleicher Rand */
body.luxe .cx-stats-strip { background: var(--cool); border-bottom: 0 !important; margin: 12px clamp(16px, 2.5vw, 44px) 0; border-radius: 28px; padding: clamp(28px, 3.6vw, 48px) 0; }
body.luxe .cx-stats-strip .lx-container { padding-inline: clamp(20px, 3vw, 56px); }

/* Der Film so breit wie der Hero */
.sv-film__frame { max-width: none; }
.sv-film__head { max-width: 760px; }

/* Symbolkacheln in Listen und Karten: eine Farbe, Navy auf hellem Navy; kein Türkis, keine Koralle als Fläche */
:root, body.luxe { --mz-teal: #2b52c2; --mz-blue: #2b52c2; }
.mz-ico, .mz-svc .mz-ico, .mz-card .mz-ico, body.luxe .mz-ico, .svc-ico, .ct-ico, .cta-top-inner .ct-ico, body.luxe .cta-band--top .cta-top-inner .ct-ico, .check-list .ck, body.luxe .check-list .ck, .step .step-n, .mz-fig .mz-ico {
  background: var(--navy-soft) !important; color: var(--navy) !important; border-color: transparent !important; box-shadow: none !important;
}
.mz-ico svg, .svc-ico svg, .ct-ico svg, .check-list .ck svg { color: var(--navy) !important; stroke: var(--navy); }
.mz-svc:hover .mz-ico, .mz-card:hover .mz-ico { background: var(--navy) !important; color: #ffffff !important; }
.mz-svc:hover .mz-ico svg, .mz-card:hover .mz-ico svg { color: #ffffff !important; stroke: #ffffff; }
.mz-svc:hover .mz-go, .mz-svc:hover h3, .mz-card:hover h3 { color: var(--navy) !important; }

/* Navigation: Navy-Karte mit weissem Logo, weisse Links, Koralle als Hauptknopf */
body.luxe .site-header .nav { background: var(--navy) !important; border-color: var(--navy) !important; box-shadow: 0 14px 40px rgba(26, 54, 137, 0.25) !important; }
.site-header .brand img, body.luxe .site-header .brand img, .site-header.on-hero .brand img, .site-header.on-hero.scrolled .brand img { filter: none !important; }
.site-nav a, body.luxe .site-nav a, .site-nav li > a, .site-nav .has-sub > a, .site-nav button { color: rgba(255, 255, 255, 0.86) !important; }
.site-nav a:hover, .site-nav a.is-active, body.luxe .site-nav a.is-active, body.luxe .site-nav a:hover { color: #ffffff !important; }
.site-nav a.is-active::after, body.luxe .site-nav a.is-active::after { background: var(--coral-light) !important; }
.lang-dd-btn, body.luxe .lang-dd-btn { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.35) !important; background: transparent !important; }
.nav-toggle, body.luxe .nav-toggle { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.35) !important; }
body.luxe .site-header .nav-actions .btn-primary { background: var(--coral) !important; border-color: var(--coral) !important; color: #ffffff !important; box-shadow: none !important; }
body.luxe .site-header .nav-actions .btn-primary:hover { background: var(--coral-deep) !important; border-color: var(--coral-deep) !important; }
.site-nav .sub, .site-nav .dropdown, .lang-dd-menu { color: var(--lx-ink); }
.site-nav .sub a, .site-nav .dropdown a { color: var(--lx-ink) !important; }

/* Ein Aussenrand für alle grossen Blöcke, auch auf Unterseiten; der Film so breit wie der Hero */
body.luxe .cx-hero, body.luxe .page-hero.page-hero--img, body.luxe .lx-band, body.luxe .site-footer, body.luxe .cx-stats-strip { width: auto !important; max-width: none !important; }
.sv-film__frame, body.luxe .sv-film__frame { max-width: none !important; }
body.luxe .cta-final, body.luxe .cta-band--top { border-radius: 28px !important; }

/* Unterseiten: Hero, Band und Fusszeile bekommen denselben Aussenrand wie auf der Startseite */
:root, body.luxe { --rand: clamp(18px, 3vw, 56px); }
body.luxe .page-hero.page-hero--img, body.luxe .site-footer, body.luxe .lx-band, body.luxe .cx-hero, body.luxe .cx-stats-strip { margin-left: var(--rand) !important; margin-right: var(--rand) !important; }
body.luxe .page-hero.page-hero--img { margin-top: 12px !important; }
@media (max-width: 640px) { :root, body.luxe { --rand: 12px; } }

/* Kontaktseite: das Formular lief aus dem Raster; Spalten dürfen schrumpfen */
.contact-grid, body.luxe .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; gap: clamp(24px, 4vw, 64px) !important; }
.form-card, body.luxe .form-card, .contact-grid > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
@media (max-width: 900px) { .contact-grid, body.luxe .contact-grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* Die Navigation bleibt beim Rollen stehen, direkt unter der Leiste */
body.luxe .site-header, .site-header { position: relative !important; top: auto !important; z-index: 100; }  /* die Navigation rollt mit; nur die Leiste bleibt stehen */
body.luxe .site-header .header-inner { padding-top: 10px; padding-bottom: 10px; }

/* Navigation: Links weiss (alle Anker in der Karte ausser Knopf), Karte so breit wie der Hero, Kopf klebt (overflow: clip statt hidden) */
html, body.luxe, body { overflow-x: clip !important; }
body.luxe .site-header .nav a:not(.btn-primary):not(.brand), body.luxe .site-header .nav li > a, body.luxe .site-header .nav button:not(.btn-primary) { color: rgba(255, 255, 255, 0.86) !important; }
body.luxe .site-header .nav a:not(.btn-primary):hover, body.luxe .site-header .nav a.is-active:not(.btn-primary) { color: #ffffff !important; }
body.luxe .site-header .nav .lang-dd-menu a, body.luxe .site-header .nav .lang-dd-menu button { color: var(--lx-ink) !important; }
body.luxe .site-header .header-inner { max-width: none !important; width: auto !important; margin: 0 !important; padding-left: var(--rand) !important; padding-right: var(--rand) !important; }
body.luxe .site-header .nav { width: auto !important; max-width: none !important; margin: 0 !important; }

/* Sprachwahl: auch der Pfeil weiss */
.lang-dd-btn svg, body.luxe .lang-dd-btn svg, .lang-dd-btn *, .site-header .nav .lang-dd-btn { color: #ffffff !important; stroke: #ffffff; fill: none; }
.site-header .nav svg:not(.btn-primary svg) { color: inherit; }

/* =============================================================
   UNTERSEITEN-HERO: Foto statt Farbfläche
   Jede Seite hatte ihr Foto, versteckt unter einem Farbverlauf. Jetzt
   liegt das Foto wieder frei, mit einem Navy-Schleier von links, damit
   der Text steht; rechts bleibt das Bild sichtbar. Seiten ohne Foto
   bekommen die Navy-Fläche.
   ============================================================= */
body.luxe .page-hero.page-hero--img { background: linear-gradient(140deg, #2a4ea8 0%, #2b52c2 55%, #1a3689 100%) !important; min-height: min(64vh, 640px); display: flex; align-items: flex-end; padding-bottom: clamp(44px, 5vw, 72px) !important; }
body.luxe .page-hero--img .page-hero-media { display: block !important; opacity: 1 !important; filter: saturate(0.92) !important; background-attachment: scroll !important; background-position: center 40% !important; z-index: -3; }
body.luxe .page-hero--img .page-hero-scrim { display: block !important; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(26, 54, 137, 0.96) 0%, rgba(26, 54, 137, 0.88) 38%, rgba(26, 54, 137, 0.45) 68%, rgba(26, 54, 137, 0.15) 100%), linear-gradient(0deg, rgba(26, 54, 137, 0.55) 0%, rgba(26, 54, 137, 0) 50%) !important; }
body.luxe .page-hero .container { position: relative; z-index: 1; }
body.luxe .page-hero .breadcrumb, body.luxe .page-hero .breadcrumb a { color: rgba(255, 255, 255, 0.72) !important; }
body.luxe .page-hero .breadcrumb .cur { color: #ffffff !important; }
body.luxe .page-hero .kicker { color: var(--coral-light) !important; }
body.luxe .page-hero .kicker .k-num { display: none !important; }
body.luxe .page-hero .kicker .k-line { background: var(--coral-light) !important; }
body.luxe .page-hero h1 { color: #ffffff !important; max-width: 14ch; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.25); }
body.luxe .page-hero .lead, body.luxe .page-hero p { color: rgba(255, 255, 255, 0.9) !important; max-width: 56ch; }
body.luxe .page-hero .btn-ghost, body.luxe .page-hero .lx-btn.ghost { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.5) !important; }
body.luxe .page-hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.12) !important; }

/* Leistungen und 404: derselbe Navy-Hero wie überall, auch ohne Foto */
body.luxe .dl-hero, body.luxe .page-hero:not(.page-hero--img) { background: linear-gradient(140deg, #2a4ea8 0%, #2b52c2 55%, #1a3689 100%) !important; border-radius: 28px; margin: 12px var(--rand) 0 !important; padding: clamp(44px, 6vh, 72px) 0 clamp(40px, 5vw, 64px) !important; color: #ffffff; }
body.luxe .dl-hero h1, body.luxe .page-hero:not(.page-hero--img) h1, body.luxe .dl-hero h2 { color: #ffffff !important; }
body.luxe .dl-hero h1 .it, body.luxe .dl-hero .it, body.luxe .page-hero:not(.page-hero--img) .it { color: var(--coral-light) !important; }
body.luxe .dl-hero p, body.luxe .dl-hero .lead, body.luxe .page-hero:not(.page-hero--img) p { color: rgba(255, 255, 255, 0.9) !important; max-width: 56ch; }
body.luxe .dl-hero .breadcrumb, body.luxe .dl-hero .breadcrumb a, body.luxe .page-hero:not(.page-hero--img) .breadcrumb a { color: rgba(255, 255, 255, 0.72) !important; }
body.luxe .dl-hero .breadcrumb .cur { color: #ffffff !important; }
body.luxe .dl-hero .kicker, body.luxe .dl-hero .lx-label { color: var(--coral-light) !important; }
body.luxe .dl-hero .kicker .k-line, body.luxe .dl-hero .lx-label::before { background: var(--coral-light) !important; }
body.luxe .dl-hero .seg, body.luxe .dl-hero .dl-switch { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); }
body.luxe .dl-hero .seg button, body.luxe .dl-hero .dl-switch button { color: #ffffff; }
body.luxe .dl-hero .seg button.is-active, body.luxe .dl-hero .dl-switch button.is-active, body.luxe .dl-hero .seg .is-active { background: #ffffff !important; color: var(--navy) !important; }

/* Letzte Korallenflächen: Kategorie-Symbole, Kennzahlkarten, Abzeichen; Koralle bleibt Schrift und Knopf */
.dl-cat-ic, body.luxe .dl-cat-ic, .vc-ico, body.luxe .vc-ico, body.luxe .grid.cols-4 > .value-card:nth-child(4n+1) .vc-ico, body.luxe .grid.cols-3 > *:nth-child(3n+1) .svc-ico, .mz-card:nth-child(1) .mz-ico { background: var(--navy-soft) !important; color: var(--navy) !important; box-shadow: none !important; }
.dl-cat-ic svg, .vc-ico svg { color: var(--navy) !important; stroke: var(--navy); }
.mz-fig:nth-child(1), .mz-fig:nth-child(2), .mz-fig:nth-child(3), .mz-fig:nth-child(4), body.luxe .mz-fig { background: var(--navy) !important; color: #ffffff !important; }
.mz-badge, body.luxe .mz-badge { background: var(--navy-soft) !important; color: var(--navy) !important; }
body.luxe .dl-hero + .dl-seg, body.luxe .dl-seg.is-active { padding-top: clamp(40px, 5vw, 72px) !important; }

/* Navigation schlanker: 64 px hoch, Logo 22 px */
body.luxe .site-header .nav { height: 64px !important; padding: 0 10px 0 20px !important; border-radius: 16px !important; }
body.luxe .site-header .brand img, .site-header .brand img { height: 22px !important; width: auto !important; }
body.luxe .site-header .nav-actions .btn-primary { height: 42px !important; padding: 0 20px !important; font-size: 0.78rem !important; }
body.luxe .lang-dd-btn { height: 38px; padding: 0 12px; }
body.luxe { --nav-h: 88px; }
body.luxe .site-header .header-inner { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 640px) { body.luxe .site-header .nav { height: 56px !important; } body.luxe .site-header .brand img { height: 20px !important; } }

/* Navigation hell und schlank: weisse Karte, Navy-Logo, Navy-Links, 56 px */
body.luxe .site-header .nav { background: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(43, 82, 194, 0.1) !important; box-shadow: 0 8px 28px rgba(26, 54, 137, 0.1) !important; height: 56px !important; border-radius: 14px !important; }
body.luxe .site-header .brand img, .site-header .brand img { height: 20px !important; }
body.luxe .site-header .nav a:not(.btn-primary):not(.brand), body.luxe .site-header .nav li > a, body.luxe .site-header .nav button:not(.btn-primary) { color: var(--lx-ink) !important; }
body.luxe .site-header .nav a:not(.btn-primary):hover, body.luxe .site-header .nav a.is-active:not(.btn-primary) { color: var(--navy) !important; }
.site-nav a.is-active::after, body.luxe .site-nav a.is-active::after { background: var(--navy) !important; }
.lang-dd-btn, body.luxe .lang-dd-btn { color: var(--navy) !important; border-color: var(--navy-line) !important; }
.lang-dd-btn svg, body.luxe .lang-dd-btn svg, .lang-dd-btn *, .site-header .nav .lang-dd-btn { color: var(--navy) !important; stroke: var(--navy); }
.nav-toggle, body.luxe .nav-toggle { color: var(--navy) !important; border-color: var(--navy-line) !important; }
body.luxe .site-header .nav-actions .btn-primary { background: var(--navy) !important; border-color: var(--navy) !important; height: 38px !important; padding: 0 18px !important; font-size: 0.74rem !important; }
body.luxe .site-header .nav-actions .btn-primary:hover { background: var(--navy-deep) !important; border-color: var(--navy) !important; }
body.luxe { --nav-h: 76px; }
@media (max-width: 640px) { body.luxe .site-header .nav { height: 50px !important; } body.luxe .site-header .brand img { height: 18px !important; } }

/* Beim Zeigen wird die Kachel Navy und das Symbol weiss, nicht umgekehrt */
body.luxe .mz-card:hover .mz-ico, body.luxe .mz-svc:hover .mz-ico, .mz-card:hover .mz-ico, .mz-svc:hover .mz-ico,
body.luxe .mz-card:nth-child(n):hover .mz-ico, body.luxe .mz-svc:nth-child(n):hover .mz-ico { background: var(--navy) !important; color: #ffffff !important; transform: none !important; }
body.luxe .mz-card:hover .mz-ico svg, body.luxe .mz-svc:hover .mz-ico svg, .mz-card:hover .mz-ico svg, .mz-svc:hover .mz-ico svg { color: #ffffff !important; stroke: #ffffff !important; }
body.luxe .mz-card:hover, body.luxe .mz-svc:hover { border-color: var(--navy-line) !important; }

/* Dunkle Karten: alles Weiss darauf. Helle Säulen-Karten: kühles Grau mit Navy-Titel */
body.luxe .pillar.p1 { background: var(--cool) !important; color: var(--lx-ink) !important; }
body.luxe .pillar.p2 { background: var(--navy-soft) !important; color: var(--lx-ink) !important; }
body.luxe .pillar.p3 { background: linear-gradient(180deg, #2a4ea8, #1a3689) !important; color: #ffffff !important; }
body.luxe .pillar.p1 h3, body.luxe .pillar.p2 h3, body.luxe .pillar.p1 .pl-tag, body.luxe .pillar.p2 .pl-tag { color: var(--navy) !important; }
.pillar.p3, .mz-block, .section--ink, .compare-col.is-us, .dl-thumb, .pb-thumb, .lx-band, .cx-quote, .lx-quote, .mz-fig, .is-dark, .card--dark, .card.dark, [class*="--dark"], [class*="--navy"], [class*="--ink"] {
  color: #ffffff;
}
:is(.pillar.p3, .mz-block, .section--ink, .compare-col.is-us, .dl-thumb, .pb-thumb, .lx-band, .cx-quote, .lx-quote, .mz-fig, .is-dark, .card--dark, .card.dark, [class*="--dark"], [class*="--navy"], [class*="--ink"]) :is(h1, h2, h3, h4, h5, p, li, blockquote, .pl-tag, .num, strong) { color: #ffffff !important; }
:is(.pillar.p3, .mz-block, .section--ink, .lx-band, .cx-quote, .lx-quote, .is-dark, [class*="--dark"], [class*="--navy"], [class*="--ink"]) :is(.kicker, .lx-label, .eyebrow, .pl-tag) { color: var(--coral-light) !important; }
:is(.pillar.p3, .mz-block, .section--ink, .lx-band, .is-dark, [class*="--dark"], [class*="--navy"], [class*="--ink"]) p { color: rgba(255, 255, 255, 0.86) !important; }

/* Navigation: graue Karte */
body.luxe .site-header .nav { background: rgba(243, 245, 250, 0.96) !important; border-color: rgba(43, 82, 194, 0.08) !important; }

/* Abstände zwischen Abschnitten enger: ein Takt von 40 bis 80 px, keine doppelten Polster */
.section, body.luxe .section, .lx-section, body.luxe .lx-section, .sv-film, .mz-section, .cx-section, body.luxe .section-sm { padding-top: clamp(40px, 5vw, 80px) !important; padding-bottom: clamp(40px, 5vw, 80px) !important; }
body.luxe .lx-statement .lx-display, body.luxe .lx-statement .lx-body { margin-top: 18px; margin-bottom: 0; }
body.luxe .section > .container > .lx-statement, body.luxe .lx-statement { padding-bottom: 0; }
body.luxe .team-group-title, body.luxe .tg-title { margin-top: clamp(24px, 3vw, 44px); }

/* Navigation wieder Navy mit weissem Logo (Entscheid vom Nachmittag), schlank wie zuletzt */
body.luxe .site-header .nav { background: var(--navy) !important; border-color: var(--navy) !important; box-shadow: 0 10px 30px rgba(26, 54, 137, 0.22) !important; }
body.luxe .site-header .nav a:not(.btn-primary):not(.brand), body.luxe .site-header .nav li > a, body.luxe .site-header .nav button:not(.btn-primary) { color: rgba(255, 255, 255, 0.88) !important; }
body.luxe .site-header .nav a:not(.btn-primary):hover, body.luxe .site-header .nav a.is-active:not(.btn-primary) { color: #ffffff !important; }
.site-nav a.is-active::after, body.luxe .site-nav a.is-active::after { background: var(--coral-light) !important; }
.lang-dd-btn, body.luxe .lang-dd-btn, .lang-dd-btn svg, body.luxe .lang-dd-btn svg, .lang-dd-btn * { color: #ffffff !important; stroke: #ffffff; border-color: rgba(255, 255, 255, 0.35) !important; }
.nav-toggle, body.luxe .nav-toggle { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.35) !important; }
body.luxe .site-header .nav-actions .btn-primary { background: var(--coral) !important; border-color: var(--coral) !important; }
body.luxe .site-header .nav-actions .btn-primary:hover { background: var(--coral-deep) !important; border-color: var(--coral-deep) !important; }
body.luxe .site-header .nav .lang-dd-menu a, body.luxe .site-header .nav .lang-dd-menu button { color: var(--lx-ink) !important; }

/* »Was uns leitet«: der dunkle Abschnitt ist wieder dunkel (Navy-Block), die weissen Karten darin behalten dunkle Schrift */
body.luxe .section--ink, .section--ink { background: linear-gradient(140deg, #2a4ea8 0%, #2b52c2 55%, #1a3689 100%) !important; border-radius: 28px; margin-left: var(--rand); margin-right: var(--rand); }
.section--ink :is(.value-card, .card, .mz-card, .svc-card, .stat-card) :is(h1, h2, h3, h4, h5, p, li, span, strong, .num) { color: var(--lx-ink) !important; }
.section--ink :is(.value-card, .card, .mz-card) p { color: var(--tx-soft, #566072) !important; }
.section--ink :is(.value-card, .card, .mz-card) .vc-num, .section--ink .value-card .num { color: var(--tx-faint, #8b93a1) !important; }

/* Hero-Fotos weniger beschnitten: flacherer Block, keine Vergrösserung der Bildebene, Bild oben angesetzt */
body.luxe .page-hero.page-hero--img { min-height: min(54vh, 560px) !important; }
body.luxe .page-hero--img .page-hero-media { inset: 0 !important; transform: none !important; background-size: cover !important; background-position: center 30% !important; will-change: auto; }
@media (max-width: 900px) { body.luxe .page-hero.page-hero--img { min-height: 0 !important; } }

/* Kein Leuchten: Abzeichen, Hero-Blöcke und Karten ohne farbigen Schattenschein */
.mz-badge, body.luxe .mz-badge, .cx-badge, .lx-badge { box-shadow: none !important; }
body.luxe .page-hero, body.luxe .page-hero.page-hero--img, body.luxe .cx-hero, body.luxe .lx-hero, body.luxe .dl-hero, body.luxe .lx-band, body.luxe .section--ink, body.luxe .cx-stats-strip { box-shadow: none !important; }
.lx-hero-glow, .lx-hero-veil, .hero-ring, .hero-particle, .blob { display: none !important; }
body.luxe .page-hero::before, body.luxe .page-hero::after, body.luxe .cx-hero::after { box-shadow: none !important; filter: none !important; }

/* Leistungsliste (pb-ico): eine Kachelfarbe, Navy-Symbol auf hellem Navy, beim Zeigen Navy mit weissem Symbol */
body.luxe .pb-ico, .pb-ico, body.luxe .pb-item .pb-ico, body.luxe .pb-item:nth-child(n) .pb-ico { background: var(--navy-soft) !important; color: var(--navy) !important; box-shadow: none !important; }
body.luxe .pb-ico svg, .pb-ico svg { color: var(--navy) !important; stroke: var(--navy); }
body.luxe .pb-item:hover .pb-ico, body.luxe a:hover > .pb-ico, body.luxe .pb-row:hover .pb-ico { background: var(--navy) !important; color: #ffffff !important; }
body.luxe .pb-item:hover .pb-ico svg, body.luxe a:hover > .pb-ico svg, body.luxe .pb-row:hover .pb-ico svg { color: #ffffff !important; stroke: #ffffff; }

/* Knöpfe ohne Schein, überall */
body.luxe .page-hero .btn-primary, body.luxe .page-hero .lx-btn.solid, body.luxe .btn-primary, body.luxe .lx-btn.solid, .btn-primary, .lx-btn.solid, body.luxe .site-header .nav-actions .btn-primary, .kk-banner__b, .lc-toggle, body.luxe .lc-toggle { box-shadow: none !important; }

/* Textblöcke füllen die Breite: zwei Spalten über den ganzen Container, nicht links geparkt */
body.luxe .svc-body, .svc-body { max-width: none !important; }
body.luxe .svc-body.two-col, body.luxe .svc-body .two-col, .svc-body[class*="col"], body.luxe .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); max-width: none !important; }
body.luxe .svc-body p { max-width: 62ch; }
@media (max-width: 800px) { body.luxe .two-col, body.luxe .svc-body.two-col { grid-template-columns: 1fr; } }

/* Fragen und Antworten: offene Frage bleibt weiss mit dunkler Schrift, auch im dunklen Abschnitt */
.acc-item, body.luxe .acc-item, .acc-item.open, body.luxe .acc-item.open, .section--ink .acc-item, .section--ink .acc-item.open { background: #ffffff !important; border: 1px solid var(--navy-line) !important; box-shadow: none !important; }
.acc-item :is(h3, h4, .acc-q, .acc-title, summary, button), .section--ink .acc-item :is(h3, h4, .acc-q, .acc-title, summary, button) { color: var(--lx-ink) !important; }
.acc-item :is(p, .acc-a, .acc-body, li), .section--ink .acc-item :is(p, .acc-a, .acc-body, li) { color: var(--tx-soft, #566072) !important; }
.acc-item .acc-ico, .acc-item .acc-toggle, .acc-item .ai-ico, .section--ink .acc-item .acc-ico { background: var(--navy-soft) !important; color: var(--navy) !important; border-color: transparent !important; }
.acc-item.open .acc-ico, .acc-item.open .acc-toggle, .acc-item.open .ai-ico { background: var(--navy) !important; color: #ffffff !important; }

/* Schluss-Aufruf: Karte sichtbar auf kühlem Grau, kein leerer Raum */
body.luxe .cta-band--bottom, .cta-band--bottom { background: var(--cool) !important; padding: clamp(40px, 5vw, 80px) 0 !important; }
body.luxe .cta-final, .cta-final { background: #ffffff !important; border: 1px solid var(--navy-line) !important; border-radius: 28px !important; padding: clamp(32px, 4vw, 56px) !important; box-shadow: none !important; margin: 0 auto; max-width: 1100px; text-align: center; }
body.luxe .cta-final :is(h2, h3) { color: var(--lx-ink) !important; margin-top: 0; }
body.luxe .cta-final p { color: var(--tx-soft, #566072) !important; margin-left: auto; margin-right: auto; }
body.luxe .cta-final .btn-ghost { color: var(--navy) !important; border-color: var(--navy-line) !important; }

/* Gründerzitat: ruhiger gesetzt, nicht kursiv, Navy-Anführung, Name und Rolle als Zeile */
body.luxe .founder { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
body.luxe .founder-photo { border-radius: 28px !important; overflow: hidden; box-shadow: none !important; }
body.luxe .founder-photo img { display: block; width: 100%; height: auto; }
body.luxe .founder-mark { color: var(--coral) !important; width: 40px; height: 40px; opacity: 1; }
body.luxe .founder-quote { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif !important; font-style: normal !important; font-weight: 500 !important; font-size: clamp(1.25rem, 2vw, 1.75rem) !important; line-height: 1.4 !important; letter-spacing: -0.01em; color: var(--lx-ink) !important; max-width: 36ch; margin: 14px 0 24px; }
body.luxe .founder-by { display: flex; align-items: center; gap: 12px; }
body.luxe .founder-by::before { content: ""; width: 32px; height: 2px; background: var(--coral); flex: none; }
body.luxe .founder-by b { font-family: "Inter", system-ui, sans-serif !important; font-weight: 700; color: var(--lx-ink) !important; display: block; }
body.luxe .founder-by span { color: var(--coral) !important; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
@media (max-width: 800px) { body.luxe .founder { grid-template-columns: 1fr; } }

/* Berührungsziele mindestens 24 px; Punkte bleiben klein, die Fläche wächst */
.cx-dot, body.luxe .cx-dot { min-width: 24px !important; min-height: 24px !important; padding: 8px !important; background-clip: content-box !important; box-sizing: border-box; }
.brand, body.luxe .brand { min-height: 28px; }
.lx-link, body.luxe .lx-link, .site-footer a, .breadcrumb a { min-height: 24px; display: inline-flex; align-items: center; }

/* Der Hero steht sofort: kein Einblenden, damit der Browser ein erstes grosses Element findet */
body.luxe .cx-hero [data-reveal], body.luxe .cx-hero .cx-hero-copy, body.luxe .cx-hero .cx-h1, body.luxe .cx-hero .cx-lead { opacity: 1 !important; transform: none !important; transition: none !important; }
.cx-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.footer-col h3.fc-h, body.luxe .footer-col h3.fc-h { font-family: "Inter", system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-light) !important; margin: 0 0 14px; font-weight: 700; }

/* Nur die Navigation einen Hauch dunkler als die übrigen Navy-Flächen */
body.luxe .site-header .nav { background: #2b52c2 !important; border-color: #2b52c2 !important; }

/* Sprachliste: die gewählte Sprache ist Navy mit weisser Schrift */
.lang-opt.is-active, body.luxe .lang-opt.is-active, body.luxe .lang-dd-menu .lang-opt.is-active, body.luxe .mobile-lang .lang-opt.is-active,
body.luxe .site-header .nav .lang-dd-menu .lang-opt.is-active { background: var(--navy) !important; color: #ffffff !important; box-shadow: none !important; }
.lang-opt, body.luxe .lang-opt, body.luxe .site-header .nav .lang-dd-menu .lang-opt { color: var(--lx-ink) !important; }
.lang-opt:hover, body.luxe .lang-opt:hover { background: var(--navy-soft) !important; color: var(--navy) !important; }
.lang-opt.is-active:hover, body.luxe .lang-opt.is-active:hover { background: var(--navy-deep) !important; color: #ffffff !important; }


/* =============================================================
   LEBENDIGER AKZENT: Teal (#14B8A6) neben Navy und Koralle.
   Sparsam, als Signal: aktive Linie in der Navigation, der Strich vor
   Vorzeilen, Haken, Zahlen-Einheiten, der Fortschrittsbalken, Punkte.
   Flächen bleiben Navy, Knöpfe bleiben Navy und Koralle.
   ============================================================= */
:root, body.luxe { --vivid: #f4694e; --vivid-deep: #dc5840; --vivid-soft: #fbe7e5; }
.site-nav a.is-active::after, body.luxe .site-nav a.is-active::after { background: var(--vivid) !important; height: 3px; border-radius: 2px; }
.scroll-progress { background: linear-gradient(90deg, var(--vivid), var(--coral)) !important; }
.cx-kicker::before, .kicker .k-line, .lx-kicker::before, .lx-label::before, body.luxe .lx-label::before { background: var(--vivid) !important; }
.cx-meta .dot, .dot, .kk-banner__dot { background: var(--vivid) !important; box-shadow: 0 0 0 3px rgba(244, 105, 78, .22) !important; }
.cx-strip-num .u { color: var(--vivid) !important; }
.check-list .ck, body.luxe .check-list .ck, .svc-check, .ev-check .on, .diff-list .ck { background: var(--vivid-soft) !important; color: var(--vivid-deep) !important; border-color: transparent !important; }
.check-list .ck svg, body.luxe .check-list .ck svg { color: var(--vivid-deep) !important; stroke: var(--vivid-deep); }
.mz-svc:hover .mz-ico, .mz-card:hover .mz-ico, body.luxe .mz-card:hover .mz-ico, body.luxe .mz-svc:hover .mz-ico, body.luxe .mz-card:nth-child(n):hover .mz-ico, body.luxe .mz-svc:nth-child(n):hover .mz-ico { background: var(--vivid) !important; }
.tma-list a:hover .tma-arrow, body.luxe .tma-list a:hover .tma-arrow, .ll-card:hover .ll-arrow { background: var(--vivid) !important; border-color: var(--vivid) !important; }
body.luxe .cx-stats-strip { border-top: 0 !important; }
.sv-film__ring { color: var(--vivid-deep); }
.sv-film__play:hover .sv-film__ring { background: var(--vivid-soft); }
.lc-toggle, body.luxe .lc-toggle { background: var(--vivid-deep) !important; }
.lc-toggle:hover, body.luxe .lc-toggle:hover { background: var(--vivid) !important; }
body.luxe .founder-by::before, body.luxe .founder-mark { color: var(--vivid) !important; background: var(--vivid); }
body.luxe .founder-mark { background: transparent; }
body.luxe .cx-hero .lx-btn.solid:hover, body.luxe .btn-primary:hover, .btn-primary:hover, body.luxe .lx-btn.solid:hover { background: var(--navy-deep) !important; box-shadow: 0 0 0 3px var(--vivid-soft) !important; }

/* Chat in Koralle */
.lc-toggle, body.luxe .lc-toggle { background: var(--coral) !important; color: #ffffff !important; }
.lc-toggle:hover, body.luxe .lc-toggle:hover { background: var(--coral-deep) !important; }
.lc-head, body.luxe .lc-head { background: var(--coral) !important; }
.lc-avatar, body.luxe .lc-avatar { color: var(--coral-deep) !important; }

/* ---- 2026-10-11: Leiste etwas hoeher, Reiter groesser ---- */
body.luxe .site-header .nav { height: 54px !important; padding: 0 8px 0 20px !important; }
body.luxe .site-header .brand img, .site-header .brand img { height: 20px !important; }
body.luxe .site-header .nav .site-nav a, body.luxe .site-header .nav .site-nav li > a, body.luxe .site-header .nav .site-nav button:not(.btn-primary) { font-size: 1.12rem !important; letter-spacing: 0 !important; }
body.luxe .site-header .nav-actions .btn-primary { height: 38px !important; font-size: 0.82rem !important; }
@media (max-width: 640px) { body.luxe .site-header .nav { height: 54px !important; } body.luxe .site-header .brand img { height: 19px !important; } }

/* ---- 2026-10-11: duenner Schleier ueber den Startseiten-Bildern, damit der Text steht ---- */
body.luxe .cx-slide { position: absolute; }
body.luxe .cx-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* derselbe blaue Schleier wie auf den Unterseiten (.page-hero-scrim) */
  background: linear-gradient(90deg, rgba(8, 12, 24, 0.55) 0%, rgba(8, 12, 24, 0.38) 40%, rgba(8, 12, 24, 0.16) 70%, rgba(8, 12, 24, 0.06) 100%), linear-gradient(0deg, rgba(8, 12, 24, 0.30) 0%, rgba(8, 12, 24, 0) 50%); }
body.luxe .cx-hero { min-height: calc(100vh - var(--kk-h, 0px) - 90px) !important; align-items: center !important; padding-bottom: 0 !important; }
body.luxe .cx-slide-img { filter: saturate(0.92); }
body.luxe .cx-hero-copy { position: relative; z-index: 2; }
body.luxe .cx-hero .cx-meta, body.luxe .cx-carousel-ui, body.luxe .cx-hero .cx-dots { z-index: 2; }

/* ---- 2026-10-11: Leiste und Fusszeile mit Verlauf von Blau nach Navy ---- */
body.luxe .site-header .nav { background: linear-gradient(90deg, #2b52c2 0%, #1f3f9c 60%, #1b3a8a 100%) !important; border-color: #1f3f9c !important; }
body.luxe .site-footer, .site-footer { background: linear-gradient(180deg, #2b52c2 0%, #1d3d98 55%, #16327a 100%) !important; }

/* ---- 2026-10-11: Koralle-Flaechen mit Verlauf zu dunklerem Orange ---- */
body.luxe .site-header .nav-actions .btn-primary, body.luxe .page-hero .btn-primary, body.luxe .page-hero .lx-btn.solid,
.lc-toggle, body.luxe .lc-toggle, .lc-head, body.luxe .lc-head, .cx-stats-strip .badge, .lx-pill.coral, body.luxe .lx-pill.coral {
  background: linear-gradient(135deg, #f4694e 0%, #e85a3f 60%, #d04d34 100%) !important; border-color: #e85a3f !important; }
body.luxe .site-header .nav-actions .btn-primary:hover, body.luxe .page-hero .btn-primary:hover, body.luxe .page-hero .lx-btn.solid:hover, .lc-toggle:hover, body.luxe .lc-toggle:hover {
  background: linear-gradient(135deg, #e85a3f 0%, #d04d34 100%) !important; }

/* ---- 2026-10-11: kein schwarzer Schleier mehr auf der Startseite, der blaue reicht ---- */
body.luxe .cx-scrim, .cx-scrim { display: none !important; opacity: 0 !important; }
body.luxe .cx-hero { background: #0d1b2e !important; }

/* ---- 2026-10-11: Akzente aus der kuratierten Palette, sparsam eingestreut ----
   Fresh Green fuer Status, Vivid Blue fuer Zahlen und Link-Hover, Deep Navy fuer den
   untersten Fussstreifen, Cool Mist als Seitengrund. Gold und Teal bleiben draussen. */
:root, body.luxe { --cool: #f4f6f9; --gruen: #43d17f; --gruen-tief: #2a9d5c; --gruen-hell: #e6f8ee; --blau-hell: #3a6ff0; --navy-tief: #0d1b2e; }
html, body, body.luxe { background: #f4f6f9 !important; }
.cx-meta .dot, .dot, .kk-banner__dot { background: var(--gruen) !important; box-shadow: 0 0 0 3px rgba(67, 209, 127, .22) !important; }
.check-list .ck, body.luxe .check-list .ck, .svc-check, .ev-check .on, .diff-list .ck { background: var(--gruen-hell) !important; color: var(--gruen-tief) !important; }
.check-list .ck svg, body.luxe .check-list .ck svg { color: var(--gruen-tief) !important; stroke: var(--gruen-tief); }
.cx-strip-num, body.luxe .cx-strip-num, .chmap-stats .num, .chmap-stats b, .chmap-stats strong { color: var(--blau-hell) !important; }
.cx-strip-num .u { color: var(--coral) !important; }
body.luxe main p a:not([class]):hover, body.luxe .tma-list a:hover, body.luxe .ll-card:hover h3, body.luxe .mz-card:hover h3, body.luxe .mz-svc:hover h3 { color: var(--blau-hell) !important; }
body.luxe .site-footer .footer-bottom, .site-footer .footer-bottom { background: var(--navy-tief) !important; margin: 28px calc(-1 * var(--rand, 24px)) 0; padding: 18px var(--rand, 24px); border-radius: 0 0 28px 28px; }

/* ---- 2026-10-11: Akzente zurueckhaltend ----
   Gruen nur dort, wo es Status bedeutet (Punkte, Haekchen, »Anmeldung offen«); die dunklen
   Abschnitte und das Fussende in Deep Navy; die Kennzahlen im helleren Blau. Sonst nichts. */
.cx-strip-num .u, .chmap-stats .u, .chmap-stats sup, .chmap-stats .plus { color: var(--navy) !important; }
.scroll-progress { background: var(--navy) !important; }
.mz-svc:hover .mz-ico, .mz-card:hover .mz-ico, body.luxe .mz-card:hover .mz-ico, body.luxe .mz-svc:hover .mz-ico, body.luxe .mz-card:nth-child(n):hover .mz-ico, body.luxe .mz-svc:nth-child(n):hover .mz-ico { background: var(--navy) !important; color: #ffffff !important; }
.tma-list a:hover .tma-arrow, body.luxe .tma-list a:hover .tma-arrow, .ll-card:hover .ll-arrow { background: var(--navy) !important; border-color: var(--navy) !important; }
body.luxe .section--ink, .section--ink { background: linear-gradient(140deg, #13253f 0%, #0d1b2e 60%, #0a1526 100%) !important; }
body.luxe .site-footer, .site-footer { background: linear-gradient(180deg, #2b52c2 0%, #1a3689 45%, #0d1b2e 100%) !important; }
.cx-meta .dot, .dot, .kk-banner__dot { background: var(--gruen-tief) !important; box-shadow: 0 0 0 3px rgba(42, 157, 92, .18) !important; }

/* ---- 2026-10-11: 404 und jede Seite ohne body.luxe: der Hero ohne Bild bleibt blau, Text weiss ---- */
.page-hero:not(.page-hero--img) { background: linear-gradient(140deg, #2a4ea8 0%, #2b52c2 55%, #1a3689 100%) !important; border-radius: 28px; margin: 12px var(--rand) 0 !important; color: #ffffff; }
.page-hero:not(.page-hero--img) h1, .page-hero:not(.page-hero--img) p, .page-hero:not(.page-hero--img) .lead, .page-hero:not(.page-hero--img) a:not(.btn-primary):not(.lx-btn) { color: #ffffff !important; }
.page-hero:not(.page-hero--img) .nf-grid, .page-hero:not(.page-hero--img)::before, .page-hero:not(.page-hero--img)::after { display: none !important; }

/* ---- 2026-10-11: Leiste und Fusszeile dunkel: Verlauf von Blau nach Navy, weisses Logo; Fusszeile enger gesetzt ---- */
body.luxe .site-header .nav { background: linear-gradient(90deg, #2b52c2 0%, #1f3f9c 60%, #1b3a8a 100%) !important; border-color: #1f3f9c !important; box-shadow: 0 10px 30px rgba(13, 27, 46, 0.18) !important; }
body.luxe .site-header .brand img, .site-header .brand img { filter: none !important; }
body.luxe .site-footer, .site-footer { background: linear-gradient(180deg, #2b52c2 0%, #1a3689 45%, #0d1b2e 100%) !important; border: 0 !important; color: rgba(226, 232, 240, 0.78) !important; padding: clamp(36px, 4vw, 52px) 0 0 !important; overflow: hidden !important; }
.site-footer::before, body.luxe .site-footer::before { display: none !important; }
.site-footer .footer-top, body.luxe .site-footer .footer-top { gap: clamp(24px, 3vw, 40px) !important; padding-bottom: clamp(28px, 3.5vw, 44px) !important; }
.site-footer .footer-brand img, body.luxe .site-footer .footer-brand img { height: 24px !important; width: auto !important; margin-bottom: 14px; filter: none !important; }
.site-footer .footer-brand p, body.luxe .site-footer .footer-brand p { max-width: 34ch; line-height: 1.6; font-size: 0.92rem; color: rgba(226, 232, 240, 0.72) !important; }
.site-footer .footer-socials, body.luxe .site-footer .footer-socials { margin-top: 16px; }
.site-footer .footer-col ul, body.luxe .site-footer .footer-col ul { display: grid; gap: 8px; }
.site-footer .footer-col a, body.luxe .site-footer .footer-col a { font-size: 0.95rem; min-height: 0 !important; color: rgba(255, 255, 255, 0.88) !important; }
.site-footer a:hover, body.luxe .site-footer a:hover { color: var(--coral-light) !important; }
.footer-col h3.fc-h, body.luxe .footer-col h3.fc-h, .site-footer .fc-h, body.luxe .site-footer .fc-h { color: var(--coral-light) !important; margin-bottom: 12px !important; }
.site-footer .footer-contact, body.luxe .site-footer .footer-contact, .site-footer .footer-contact a { color: rgba(226, 232, 240, 0.82) !important; }
.site-footer .footer-socials a, body.luxe .site-footer .footer-socials a, .site-footer .social a, body.luxe .site-footer .social a { border-color: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; background: transparent !important; }
body.luxe .site-footer .footer-bottom, .site-footer .footer-bottom { background: #0d1b2e !important; margin: 0 calc(-1 * var(--rand)) 0 !important; padding: 16px var(--rand) 16px !important; padding-right: calc(var(--rand) + 120px) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 0 !important; font-size: 0.82rem; color: rgba(180, 190, 205, 0.7) !important; }
body.luxe .site-footer .footer-bottom a, .site-footer .footer-bottom a { color: rgba(226, 232, 240, 0.78) !important; }
body.luxe .site-footer .footer-bottom a:hover, .site-footer .footer-bottom a:hover { color: #ffffff !important; }
@media (max-width: 760px) { body.luxe .site-footer .footer-bottom, .site-footer .footer-bottom { padding-right: var(--rand) !important; padding-bottom: 72px !important; } }

/* ---- 2026-10-11: blaue Texte und Kennzahlen im alten dunklen Navy; Flaechen bleiben blau ---- */
:root, body.luxe { --navy-text: #1b3a8a; }
a { color: var(--navy-text); }
.cx-strip-num, body.luxe .cx-strip-num, .chmap-stats .num, .chmap-stats b, .chmap-stats strong, .cx-strip-num .u, .chmap-stats .u, .chmap-stats sup, .chmap-stats .plus { color: var(--navy-text) !important; }
.mz-h2 .g, .lx-h2 .g, h2 .g, h1 .g, body.luxe .mz-h2 .g, .lx-display .it, .lx-statement .it, .section--white h2 .it, .section .it, body.luxe .lx-display .it, body.luxe .lx-statement .it { color: var(--navy-text) !important; }
.mz-go, body.luxe .mz-go, body.luxe .pillar.p1 h3, body.luxe .pillar.p2 h3, body.luxe .pillar.p1 .pl-tag, body.luxe .pillar.p2 .pl-tag, .mz-badge, body.luxe .mz-badge, .lx-link, body.luxe .lx-link, .breadcrumb a { color: var(--navy-text) !important; }
body.luxe main p a:not([class]):hover, body.luxe .tma-list a:hover, body.luxe .ll-card:hover h3, body.luxe .mz-card:hover h3, body.luxe .mz-svc:hover h3 { color: var(--navy-text) !important; }
.mz-ico svg, .svc-ico svg, .ct-ico svg, .dl-cat-ic svg, .vc-ico svg, body.luxe .pb-ico svg, .pb-ico svg, .acc-item .acc-ico, .acc-item .acc-toggle, .acc-item .ai-ico { color: var(--navy-text) !important; stroke: var(--navy-text); }
h1, h2, h3, .lx-h2, .mz-h2, body.luxe h1, body.luxe h2, body.luxe h3 { color: #12285f; }
.page-hero h1, .page-hero h2, .page-hero h3, .cx-hero h1, .cx-hero h2, .section--ink h1, .section--ink h2, .section--ink h3, .lx-band h2, .site-footer h3, .pc-foot h2, body.luxe .page-hero h1, body.luxe .cx-hero h1, body.luxe .section--ink h2, body.luxe .section--ink h3, body.luxe .lx-band h2, .acc-item h3, .mz-card h3, .mz-svc h3, .ll-card h3, .value-card h3, .pillar h3, .tm-card h3, .founder-quote h2 { color: inherit; }

/* ---- 2026-10-11: Fusszeile duenn, dunkles Navy mit leichtem Blauschimmer, Texte klarer ---- */
body.luxe .site-footer, .site-footer { background: linear-gradient(160deg, #16327a 0%, #0f2254 45%, #0d1b2e 100%) !important; padding: clamp(26px, 3vw, 36px) 0 0 !important; color: rgba(226, 232, 240, 0.9) !important; }
.site-footer .footer-top, body.luxe .site-footer .footer-top { gap: clamp(20px, 2.5vw, 32px) !important; padding-bottom: clamp(20px, 2.5vw, 28px) !important; }
.site-footer .footer-brand img, body.luxe .site-footer .footer-brand img { height: 22px !important; margin-bottom: 10px; }
.site-footer .footer-brand p, body.luxe .site-footer .footer-brand p { font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86) !important; }
.site-footer .footer-socials, body.luxe .site-footer .footer-socials { margin-top: 12px; }
.site-footer .footer-socials a, body.luxe .site-footer .footer-socials a, .site-footer .social a, body.luxe .site-footer .social a { width: 36px !important; height: 36px !important; }
.footer-col h3.fc-h, body.luxe .footer-col h3.fc-h, .site-footer .fc-h, body.luxe .site-footer .fc-h { color: #ffffff !important; margin-bottom: 10px !important; font-size: 0.74rem; letter-spacing: 0.14em; }
.site-footer .footer-col ul, body.luxe .site-footer .footer-col ul { gap: 6px; }
.site-footer .footer-col a, body.luxe .site-footer .footer-col a { font-size: 0.93rem; color: #ffffff !important; opacity: 0.94; }
.site-footer .footer-contact, body.luxe .site-footer .footer-contact, .site-footer .footer-contact a, .site-footer .footer-contact li, .site-footer address { color: #ffffff !important; font-size: 0.93rem; }
.site-footer .footer-contact svg, body.luxe .site-footer .footer-contact svg { color: rgba(255, 255, 255, 0.7) !important; }
.site-footer a:hover, body.luxe .site-footer a:hover { color: var(--coral-light) !important; opacity: 1; }
body.luxe .site-footer .footer-bottom, .site-footer .footer-bottom { background: rgba(0, 0, 0, 0.22) !important; padding-top: 12px !important; padding-bottom: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.72) !important; font-size: 0.8rem; }
body.luxe .site-footer .footer-bottom a, .site-footer .footer-bottom a { color: rgba(255, 255, 255, 0.82) !important; }