/* ============================================================
   Wishalize MTI-Child · Design System
   ------------------------------------------------------------
   Universelle Komponenten + Utilities. Referenziert ausschliesslich
   Tokens aus design-tokens.css. KEINE Hex-Werte, KEINE Hardcodes.

   Inhalt:
     1. Reveal-Utilities (data-Attribute-API)      [Base]
     2. Marquee  (.wsh-marquee)                    [Base]
     3. Kästli   (.wsh-kaestli / .wsh-k)           [Base]
     4. Nav      (.wsh-nav-toggle + .wsh-nav-panel — Off-Canvas Mobile)
     5. NavDrill (.wsh-nav-drill — CSS-only Drill-Down für Sub-Menüs)

   Weitere Komponenten nach Bedarf aus dem R&C-Projekt übertragen
   (Chat, FAQ, Stat, Team, Coverflow, Lightbox …): Klassen + Tokens
   auf wsh-Prefix migrieren, JS-Modul in wsh-animations.js ergänzen.
   Pattern siehe MIGRATION.md in der Wishalize-Base.
   ============================================================ */


/* ============================================================
   1. REVEAL-UTILITIES
   ------------------------------------------------------------
   Verwendung im Markup:
     <div data-wsh-reveal="fade-up">…</div>
     <div data-wsh-reveal="fade-up" data-wsh-delay="200">…</div>

   Trigger: wsh-animations.js (IntersectionObserver).
   Respektiert prefers-reduced-motion automatisch.
   ============================================================ */

[data-wsh-reveal] {
  opacity: 0;
  transition: opacity var(--wsh-duration-slower) var(--wsh-ease-smooth),
              transform var(--wsh-duration-slower) var(--wsh-ease-smooth);
  will-change: opacity, transform;
}
[data-wsh-reveal="fade-up"]    { transform: translateY(24px); }
[data-wsh-reveal="fade-down"]  { transform: translateY(-24px); }
[data-wsh-reveal="fade-left"]  { transform: translateX(24px); }
[data-wsh-reveal="fade-right"] { transform: translateX(-24px); }
[data-wsh-reveal="scale"]      { transform: scale(0.96); }

[data-wsh-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-wsh-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ============================================================
   2. MARQUEE — Laufband
   ------------------------------------------------------------
   Markup-Beispiel:
     <div class="wsh-marquee" aria-label="…">
       <div class="wsh-marquee__track">
         <span class="wsh-marquee__item">Begriff A<i class="wsh-marquee__dot"></i></span>
         <span class="wsh-marquee__item">Begriff B<i class="wsh-marquee__dot"></i></span>
         …
       </div>
     </div>

   Hintergrund/Schrift via Tokens steuerbar:
     --wsh-marquee-bg, --wsh-marquee-item-color, --wsh-marquee-speed
   ============================================================ */

.wsh-marquee {
  background: var(--wsh-marquee-bg);
  overflow: hidden;
  padding: var(--wsh-space-6) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wsh-marquee__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: wsh-marquee-scroll var(--wsh-marquee-speed) linear infinite;
}
.wsh-marquee:hover .wsh-marquee__track,
.wsh-marquee.is-paused .wsh-marquee__track {
  animation-play-state: paused;
}
.wsh-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  font-family: var(--wsh-font-primary-family);
  font-size: var(--wsh-marquee-item-size);
  font-weight: 600;
  color: var(--wsh-marquee-item-color);
  letter-spacing: -0.01em;
}
.wsh-marquee__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--wsh-radius-pill);
  background: var(--wsh-complement);
  display: inline-block;
}
@keyframes wsh-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wsh-marquee__track { animation: none; }
}


/* ============================================================
   3. KÄSTLI — Hover-Karten-Grid
   ------------------------------------------------------------
   Markup-Beispiel:
     <div class="wsh-kaestli">
       <article class="wsh-k wsh-k--primary">
         <span class="wsh-k__circle" aria-hidden="true"></span>
         <span class="wsh-k__num">01</span>
         <div class="wsh-k__body">
           <h3 class="wsh-k__line">Titel</h3>
           <p class="wsh-k__sub">Sub-Zeile</p>
         </div>
       </article>
       …
     </div>

   Farbvarianten (Modifier): --primary, --secondary
   Weitere Varianten per Modifier in DIESEM File ergänzen.

   Responsives Grid: 4 → 2 → 1.
   ============================================================ */

.wsh-kaestli {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wsh-space-5);
  font-family: var(--wsh-font-text-family);
}
@media (max-width: 1024px) { .wsh-kaestli { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .wsh-kaestli { grid-template-columns: 1fr; } }

.wsh-k {
  position: relative;
  overflow: hidden;
  background: var(--wsh-k-bg, var(--wsh-primary));
  color: var(--wsh-white);
  border-radius: var(--wsh-radius-lg);
  padding: var(--wsh-space-6);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--wsh-shadow-sm);
  transition: transform var(--wsh-duration-base) var(--wsh-ease-out),
              box-shadow var(--wsh-duration-base) var(--wsh-ease-out);
}
.wsh-k:hover {
  transform: translateY(-6px);
  box-shadow: var(--wsh-shadow-hover);
}
.wsh-k--primary   { --wsh-k-bg: var(--wsh-primary);   --wsh-k-num: var(--wsh-accent); }
.wsh-k--secondary { --wsh-k-bg: var(--wsh-secondary); --wsh-k-num: rgba(255,255,255,.7); }

.wsh-k__circle {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: var(--wsh-radius-pill);
  background: rgba(255, 255, 255, 0.07);
  transition: transform var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-k:hover .wsh-k__circle { transform: scale(1.5); }

.wsh-k__num {
  position: relative;
  font-family: var(--wsh-font-mono-family);
  font-size: 13px;
  color: var(--wsh-k-num, rgba(255, 255, 255, 0.7));
}
.wsh-k__body { position: relative; }
.wsh-k__line {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.wsh-k__sub {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}


/* ============================================================
   4. NAV — Off-Canvas Mobile Navigation
   ------------------------------------------------------------
   Verwendung: siehe snippets-refactored/nav-hamburger.html

   Drei Teile:
     - .wsh-nav-toggle    (Hamburger-Button — als HTML-Widget im Header)
     - .wsh-nav-panel     (Off-Canvas Container — Elementor-Section/Container
                           mit dieser CSS-Klasse + Menü-Inhalt)
     - .wsh-nav-overlay   (Backdrop — wird vom JS erzeugt, kein Markup nötig)

   Verhalten:
     - Klick auf Toggle: Panel slidet von rechts rein
     - Toggle morpht NICHT zu X — der × kommt als Close-Button im Panel
       (wird vom JS automatisch injiziert)
     - ESC-Taste, Overlay-Klick, Link-Klick im Panel: schliessen
     - Focus-Return zum Toggle nach Schliessen
     - Ab 1025px (Desktop) automatisch ausgeblendet
   ============================================================ */

/* ===== Toggle (Hamburger-Button) =====
   Sitzt im Header und bleibt dort. margin-left: auto sorgt dafür,
   dass der Toggle in einem flex-Container (z.B. Top-Bar) automatisch
   nach rechts rückt. */
.wsh-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--wsh-nav-toggle-gap);
  width: 44px;
  height: 44px;
  padding: 8px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: var(--wsh-nav-z-toggle);
}
/* Mit !important die WordPress/Elementor-Default-Button-Styles erschlagen
   (sonst kommt z.B. ein Theme-Hover-Hintergrund durch). */
.wsh-nav-toggle,
.wsh-nav-toggle:hover,
.wsh-nav-toggle:focus,
.wsh-nav-toggle:active,
.wsh-nav-toggle:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.wsh-nav-toggle:focus-visible {
  outline: 2px solid var(--wsh-nav-accent) !important;
  outline-offset: 2px;
  border-radius: var(--wsh-radius-sm);
}
.wsh-nav-toggle__line {
  display: block;
  width: var(--wsh-nav-toggle-line-width);
  height: var(--wsh-nav-toggle-line-height);
  background-color: var(--wsh-nav-toggle-color);
  border-radius: 2px;
  transition: background-color var(--wsh-duration-base) ease,
              transform var(--wsh-duration-base) var(--wsh-ease-out);
  transform-origin: center;
}

/* Hover/Focus: Striche wechseln auf Secondary */
.wsh-nav-toggle:hover .wsh-nav-toggle__line,
.wsh-nav-toggle:focus-visible .wsh-nav-toggle__line,
.wsh-nav-toggle:active .wsh-nav-toggle__line {
  background-color: var(--wsh-nav-accent);
}

/* Beim Klick (is-active wird vom JS gesetzt): subtiler Pulse. Kein Morph. */
.wsh-nav-toggle.is-active .wsh-nav-toggle__line {
  animation: wsh-nav-toggle-pulse 0.3s var(--wsh-ease-out);
}
@keyframes wsh-nav-toggle-pulse {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(0.6); }
  100% { transform: scaleX(1); }
}
.wsh-nav-toggle.is-active .wsh-nav-toggle__line:nth-child(2) { animation-delay: 0.04s; }
.wsh-nav-toggle.is-active .wsh-nav-toggle__line:nth-child(3) { animation-delay: 0.08s; }


/* ===== Close-Button (×) — INNERHALB des Panels =====
   Der eigentliche Schliess-Trigger im offenen Zustand. Wird vom JS
   erzeugt und verdrahtet — kein Markup im Snippet nötig.
   !important auch hier, gleicher Grund wie beim Toggle. */
.wsh-nav-close,
.wsh-nav-close:hover,
.wsh-nav-close:focus,
.wsh-nav-close:active,
.wsh-nav-close:focus-visible {
  position: absolute !important;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--wsh-nav-toggle-color);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: block;
  z-index: var(--wsh-nav-z-close);
  transition: color var(--wsh-duration-base) ease;
}
.wsh-nav-close:hover,
.wsh-nav-close:focus-visible,
.wsh-nav-close:active {
  color: var(--wsh-nav-accent);
}
.wsh-nav-close:focus-visible {
  outline: 2px solid var(--wsh-nav-accent) !important;
  outline-offset: 2px;
  border-radius: var(--wsh-radius-sm);
}


/* ===== Panel (Off-Canvas) ===== */
.wsh-nav-panel {
  position: fixed !important;
  top: 0;
  right: 0;
  width: var(--wsh-nav-panel-width);
  height: 100vh !important;
  height: 100dvh !important;
  overflow-y: auto;
  background: var(--wsh-nav-panel-bg);
  box-shadow: var(--wsh-nav-panel-shadow);
  z-index: var(--wsh-nav-z-panel);
  padding: 80px 30px 40px 30px;
  transform: translateX(100%);
  visibility: hidden;
  /* Beim Schliessen: visibility-Verzögerung erst nach Slide-Out */
  transition:
    transform  var(--wsh-duration-slow) var(--wsh-ease-slide),
    visibility 0s linear var(--wsh-duration-slow);
}
.wsh-nav-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  /* Beim Öffnen: visibility sofort, sonst startet Slide erst nach 0.4s */
  transition:
    transform  var(--wsh-duration-slow) var(--wsh-ease-slide),
    visibility 0s linear 0s;
}


/* ===== Overlay (Backdrop) ===== */
.wsh-nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--wsh-nav-overlay-bg);
  z-index: var(--wsh-nav-z-overlay);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition:
    opacity    var(--wsh-duration-slow) ease,
    visibility var(--wsh-duration-slow) ease;
}
.wsh-nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}


/* ===== Body Scroll Lock ===== */
body.wsh-nav-locked {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}


/* ===== Desktop: alles ausblenden ab Breakpoint ===== */
@media (min-width: 1025px) {
  .wsh-nav-toggle,
  .wsh-nav-panel { display: none !important; }
}


/* ===== Elementor-Editor: Panel als normaler Block sichtbar machen ===== */
body.elementor-editor-active .wsh-nav-panel {
  position: relative !important;
  transform: none !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  box-shadow: none !important;
  border: 2px dashed var(--wsh-nav-accent) !important;
  padding-top: 20px !important;
}


/* ============================================================
   5. NAV-DRILL — CSS-only Sub-Menü (Drill-Down mit Zurück)
   ------------------------------------------------------------
   Pattern: versteckte <input type="radio"> als State-Container,
   <label for="…"> als Klick-Trigger. Selektor :checked ~ panel
   blendet das richtige Panel ein.

   Implementation: CSS-Grid-Stack (alle Panels in einer Grid-Cell)
   → Container ist automatisch so hoch wie das längste Panel.
   Keine hardcoded min-height nötig.

   Vorteile:
     - 0 KB JS, funktioniert auch ohne JS
     - smooth Slide-In/Out via CSS-Transition
     - color: inherit → adaptiert sich an den Panel-Hintergrund

   Verwendung: siehe snippets-refactored/nav-drill-menu.html

   AKTUELL FÜR MTI KONFIGURIERT: treuhand + immobilien.
   Neues Sub-Panel → beide Selektor-Blöcke unten ergänzen.
   ============================================================ */

.wsh-nav-drill {
  display: grid;
  grid-template-areas: "stack";
  font-family: var(--wsh-font-text-family);
  color: inherit;
}

/* Radios visually hidden — aber KEIN left:-9999 (Focus-Ring beibehalten) */
.wsh-nav-drill > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Panels überlagern sich in derselben Grid-Cell */
.wsh-nav-drill__panel {
  grid-area: stack;
  opacity: 0;
  transform: translateX(var(--wsh-nav-drill-slide-distance));
  transition:
    transform var(--wsh-duration-base) var(--wsh-ease-slide),
    opacity   var(--wsh-duration-base) var(--wsh-ease-slide);
  pointer-events: none;
}

/* Root-Panel ist IMMER Default sichtbar (Fallback ohne Selection) */
.wsh-nav-drill__panel--root {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* === DRILL-SET-DEFINITIONEN ===
   Pro Sub-Panel zwei Selektor-Zeilen ergänzen:
     A) im "Sub-sichtbar"-Block:  eigene Zeile für sein Panel
     B) im "Root-raus"-Block:     eigene Zeile mit --root
   (Beispiel für ein neues Set "vorsorge":
      #wsh-drill-vorsorge:checked ~ .wsh-nav-drill__panel--vorsorge
      #wsh-drill-vorsorge:checked ~ .wsh-nav-drill__panel--root
   ) ----------------------------------------- */

/* A) Sub-Panel sichtbar bei seinem Radio */
#wsh-drill-treuhand:checked   ~ .wsh-nav-drill__panel--treuhand,
#wsh-drill-immobilien:checked ~ .wsh-nav-drill__panel--immobilien {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* B) Root-Panel raus, sobald irgendein Sub aktiv ist */
#wsh-drill-treuhand:checked   ~ .wsh-nav-drill__panel--root,
#wsh-drill-immobilien:checked ~ .wsh-nav-drill__panel--root {
  opacity: 0;
  transform: translateX(calc(var(--wsh-nav-drill-slide-distance) * -1));
  pointer-events: none;
}


/* === INHALTS-STYLES === */

.wsh-nav-drill__title {
  font-family: var(--wsh-font-primary-family);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 var(--wsh-space-4);
}

.wsh-nav-drill__item,
.wsh-nav-drill__back {
  display: flex;
  align-items: center;
  gap: var(--wsh-space-2);
  cursor: pointer;
  user-select: none;
  /* Gleicher Abstand-Rhythmus wie .wsh-nav-link → konsistente Optik */
  margin: 0;
  padding: var(--wsh-space-3) 0;
  font-family: var(--wsh-font-primary-family);
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  transition: color var(--wsh-duration-base) var(--wsh-ease-out);
}

/* Drill-Trigger (Root → Sub): Text links, "→" Icon rechts (Apple-Style) */
.wsh-nav-drill__item {
  font-size: 20px;
  justify-content: space-between;
}

.wsh-nav-drill__back {
  font-size: 16px;
  opacity: 0.75;
  margin-bottom: var(--wsh-space-3);
}

.wsh-nav-drill__item:hover,
.wsh-nav-drill__back:hover {
  color: var(--wsh-nav-drill-link-color-hover);
}

.wsh-nav-drill__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* === HELPER für Mobile-Menü-Komposition (Drill + Flat zusammen) === */

/* Einheitlicher Link-Style — in Drill-Panels UND als Flat-Link */
.wsh-nav-link {
  display: block;
  margin: 0;
  padding: var(--wsh-space-3) 0;
  font-family: var(--wsh-font-primary-family);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  transition: color var(--wsh-duration-base) var(--wsh-ease-out);
}
/* Kleinere Variante für Sub-Items (Leistungs-Listen etc.) */
.wsh-nav-link--sub {
  font-size: 17px;
  font-weight: 500;
}
.wsh-nav-link:hover {
  color: var(--wsh-nav-drill-link-color-hover);
}

/* Trennlinie zwischen Drill- und Flat-Bereich.
   Bei dunklem Panel: --wsh-nav-divider-color überschreiben. */
.wsh-nav-divider {
  border: 0;
  border-top: 1px solid var(--wsh-nav-divider-color);
  margin: var(--wsh-space-5) 0;
}


/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .wsh-nav-drill__panel { transition: opacity var(--wsh-duration-fast) ease; transform: none; }
  .wsh-nav-drill__panel--root,
  #wsh-drill-treuhand:checked   ~ .wsh-nav-drill__panel--treuhand,
  #wsh-drill-treuhand:checked   ~ .wsh-nav-drill__panel--root,
  #wsh-drill-immobilien:checked ~ .wsh-nav-drill__panel--immobilien,
  #wsh-drill-immobilien:checked ~ .wsh-nav-drill__panel--root {
    transform: none;
  }
}


/* === SPARTEN-EINFÄRBUNG (MTI) ===
   Die beiden Drill-Trigger im Root tragen ihre Sparten-Farbe schon
   im geschlossenen Zustand als schmalen Indikator, und färben den
   Text beim Hover entsprechend ein. Innerhalb eines Sub-Panels gilt
   die Sparten-Farbe für alle Links — dadurch ist beim Scrollen im
   Sub-Menü jederzeit sichtbar, in welcher Welt man sich befindet. */

.wsh-nav-drill__item--treuhand,
.wsh-nav-drill__item--immobilien {
  padding-left: var(--wsh-space-3);
  border-left: 3px solid transparent;
  transition: color       var(--wsh-duration-base) var(--wsh-ease-out),
              border-color var(--wsh-duration-base) var(--wsh-ease-out);
}
.wsh-nav-drill__item--treuhand   { border-left-color: var(--wsh-treuhand); }
.wsh-nav-drill__item--immobilien { border-left-color: var(--wsh-immobilien); }

.wsh-nav-drill__item--treuhand:hover   { color: var(--wsh-treuhand); }
.wsh-nav-drill__item--immobilien:hover { color: var(--wsh-immobilien); }

/* Sub-Panels: Hover-Farbe pro Sparte überschreiben */
.wsh-nav-drill__panel--treuhand {
  --wsh-nav-drill-link-color-hover: var(--wsh-treuhand);
}
.wsh-nav-drill__panel--immobilien {
  --wsh-nav-drill-link-color-hover: var(--wsh-immobilien);
}

/* Sparten-Titel im Sub-Panel farbig */
.wsh-nav-drill__panel--treuhand   .wsh-nav-drill__title { color: var(--wsh-treuhand); }
.wsh-nav-drill__panel--immobilien .wsh-nav-drill__title { color: var(--wsh-immobilien); }