/* ============================================================
   Wishalize Base · Design System — OneExpatServices (OES)
   ------------------------------------------------------------
   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. 360° Perspektive (.wsh-p360)                  [OES]
     5. FAQ "Dossier" (.wsh-faq)                      [OES]
     6. Hero "Flug-Szene" (.wsh-pf)                   [OES]
     7. DL-Ablauf "vertikale Timeline" (.wsh-vt)      [OES]
     8. Testimonials (.wsh-ts)                        [OES]
     9. Text-Utilities (.wsh-balance / .wsh-hyphens)  [Base]
    10. Nav      (.wsh-nav-toggle + .wsh-nav-panel)   [Base]
    11. Nav-Drill (.wsh-nav-drill — CSS-only Sub-Menü)[Base]

   Pro Projekt nach Bedarf ergänzen:
     - Chat, FAQ, Stat, Spheres, Team etc. — aus dem R&C-Projekt
       (oder einem Vorgänger) übertragen, Klassen + Tokens auf
       wsh-Prefix prüfen, JS-Modul in wsh-animations.js ergänzen.
   ============================================================ */


/* ============================================================
   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. 360° PERSPEKTIVE — "Kompass der Perspektiven"
   ------------------------------------------------------------
   Dunkle, interaktive Radar-Sektion. Vier Rollen-Nodes um ein
   Zentrum; Auto-Tour + Klick/Tastatur. Markup siehe
   snippets-refactored/360-Perspektive.html — JS-Modul initP360()
   in wsh-animations.js. Farben/Schriften via Tokens; die
   Motion-Werte (Eases/Zeiten der Radar-Animation) sind bewusst
   komponenten-spezifisch.

   Laufzeit-Variablen (von JS gesetzt):
     --accent    aktive Akzentfarbe der Sektion
     --n-accent  Akzentfarbe pro Node
   ============================================================ */

.wsh-p360 {
  position: relative;
  background: transparent;   /* Hintergrund über die Elementor-Section/Container steuern */
  color: var(--wsh-p360-text);
  font-family: var(--wsh-font-text-family);
  overflow: hidden;
  padding: clamp(56px, 7vw, 110px) clamp(24px, 6vw, 96px);
  box-sizing: border-box;
}

.wsh-p360__inner {
  max-width: var(--wsh-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ---- Text-Spalte ---- */
.wsh-p360__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wsh-font-text-family);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wsh-secondary);
  margin-bottom: 26px;
}
.wsh-p360__kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--wsh-secondary);
  opacity: 0.7;
}

.wsh-p360__title {
  font-family: var(--wsh-font-primary-family);
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: var(--wsh-p360-text);
}
.wsh-p360__title em {
  font-style: italic;
  font-weight: 700;
  color: var(--wsh-secondary);
}

.wsh-p360__lead {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--wsh-p360-muted);
  max-width: 30em;
  margin: 0 0 38px;
}

/* ---- Dynamischer Detail-Block (wechselt mit aktiver Rolle) ---- */
.wsh-p360__detail {
  position: relative;
  padding: 26px 28px 26px 30px;
  background: var(--wsh-p360-surface);
  border: 1px solid var(--wsh-p360-hair);
  border-left: 3px solid var(--accent, var(--wsh-secondary));
  border-radius: var(--wsh-radius-sm);
  min-height: 150px;
  transition: border-left-color var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-p360__detail-index {
  font-family: var(--wsh-font-text-family);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent, var(--wsh-secondary));
  transition: color var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-p360__detail-role {
  display: block;
  font-family: var(--wsh-font-primary-family);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.01em;
  color: var(--wsh-p360-text);
  margin: 8px 0 12px;
}
.wsh-p360__detail-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--wsh-p360-muted);
  margin: 0;
}
.wsh-p360__detail .fade { transition: opacity 0.34s var(--wsh-ease-smooth); }
.wsh-p360__detail.is-swapping .fade { opacity: 0; }

/* Progress-Dots */
.wsh-p360__dots {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.wsh-p360__dot {
  height: 4px;
  width: 22px;
  border-radius: var(--wsh-radius-sm);
  background: rgba(255, 255, 255, 0.14);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--wsh-duration-slow) var(--wsh-ease-out),
              width var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-p360__dot.is-active { width: 40px; background: var(--accent, var(--wsh-secondary)); }

/* ---- Stage (kreisförmige Grafik) ---- */
/* Breite an der SPALTE messen (100%), nicht am Viewport (vw):
   vw kennt das Padding der Sektion nicht. Bei 390px Viewport ergab
   88vw = 343px bei 344px verfuegbarer Breite — die Stage klebte also
   randlos an beiden Kanten, ohne Luft fuer die Glow-Ringe der Nodes.
   Die 92% lassen bewusst etwas Rand fuer den Puls-Ring des aktiven Node. */
.wsh-p360__stage {
  position: relative;
  width: min(540px, 92%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  justify-self: center;
}

.wsh-p360__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Ambient rotierender Strich-Ring */
.wsh-p360__ring-rot {
  transform-box: fill-box;
  transform-origin: center;
  animation: wsh-p360-spin var(--wsh-p360-spin-speed) linear infinite;
}
@keyframes wsh-p360-spin { to { transform: rotate(360deg); } }

/* Radar-Sweep — per JS gedreht, synchron mit aktiver Rolle */
.wsh-p360__sweep {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent 288deg,
    color-mix(in srgb, var(--accent, var(--wsh-secondary)) 14%, transparent) 336deg,
    color-mix(in srgb, var(--accent, var(--wsh-secondary)) 40%, transparent) 360deg);
  -webkit-mask: radial-gradient(circle at center, transparent 38%, #000 39%, #000 100%);
          mask: radial-gradient(circle at center, transparent 38%, #000 39%, #000 100%);
  transform: rotate(0deg);
  transition: transform 1.05s cubic-bezier(.66, 0, .34, 1),
              background var(--wsh-duration-slow) var(--wsh-ease-out);
  pointer-events: none;
}

/* Connector-Strahl — verbindet Node mit Zentrum */
.wsh-p360__line {
  transition: stroke var(--wsh-duration-slow) var(--wsh-ease-out),
              stroke-opacity var(--wsh-duration-slow) var(--wsh-ease-out),
              stroke-width var(--wsh-duration-slow) var(--wsh-ease-out),
              filter var(--wsh-duration-slow) var(--wsh-ease-out);
}

/* Center-Hub */
.wsh-p360__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 33%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--wsh-p360-bg-2), var(--wsh-p360-bg) 78%);
  border: 1px solid var(--wsh-p360-hair);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.wsh-p360__hub-num {
  font-family: var(--wsh-font-primary-family);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wsh-p360-text);
}
.wsh-p360__hub-num span { color: var(--accent, var(--wsh-secondary)); transition: color var(--wsh-duration-slow) var(--wsh-ease-out); }
.wsh-p360__hub-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wsh-p360-muted);
  margin-top: 8px;
}
/* Play/Pause-Hinweisring — nur sichtbar, solange die Tour pausiert */
.wsh-p360__hub::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent, var(--wsh-secondary));
  opacity: 0;
  pointer-events: none;
}
.wsh-p360__hub.is-stopped::after { animation: wsh-p360-pulse 2.6s var(--wsh-ease-out) infinite; }

/* Rollen-Nodes */
.wsh-p360__node {
  position: absolute;
  width: 19%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, var(--wsh-p360-bg-2), var(--wsh-p360-bg) 88%);
  border: 1px solid var(--wsh-p360-hair);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  z-index: 4;
  transition: transform 0.5s cubic-bezier(.34, 1.4, .5, 1),
              border-color 0.45s var(--wsh-ease-out),
              background 0.45s var(--wsh-ease-out),
              box-shadow 0.45s var(--wsh-ease-out);
}
.wsh-p360__node[data-pos="top"]    { left: 50%;   top: 11.5%; }
.wsh-p360__node[data-pos="right"]  { left: 88.5%; top: 50%; }
.wsh-p360__node[data-pos="bottom"] { left: 50%;   top: 88.5%; }
.wsh-p360__node[data-pos="left"]   { left: 11.5%; top: 50%; }

.wsh-p360__node-num {
  font-family: var(--wsh-font-text-family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--wsh-p360-muted);
  transition: color 0.4s var(--wsh-ease-out);
}
.wsh-p360__node-label {
  font-family: var(--wsh-font-primary-family);
  font-weight: 700;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: -0.01em;
  color: var(--wsh-p360-text);
  margin-top: 3px;
  line-height: 1.1;
}

.wsh-p360__node:hover { border-color: var(--n-accent); }
.wsh-p360__node.is-active {
  transform: translate(-50%, -50%) scale(1.13);
  background:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    radial-gradient(circle at 50% 34%, var(--wsh-p360-bg-2), var(--wsh-p360-bg) 88%);
  border-color: var(--n-accent);
  box-shadow: 0 0 0 1px var(--n-accent), 0 0 34px -4px var(--n-accent);
}
.wsh-p360__node.is-active .wsh-p360__node-num { color: var(--n-accent); }

/* Puls am aktiven Node */
.wsh-p360__node.is-active::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--n-accent);
  opacity: 0;
  animation: wsh-p360-pulse 2.4s var(--wsh-ease-out) infinite;
}
@keyframes wsh-p360-pulse {
  0%   { transform: scale(0.92); opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Rollen-Daten (im Markup, von JS gelesen) nicht anzeigen */
.wsh-p360__roles { display: none; }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .wsh-p360__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  /* Auf Mobile zuerst der Text (Kicker + Titel + Einleitung), danach der
     Radar. Vorher stand die Grafik oben — man sah eine abstrakte Scheibe,
     bevor klar war, worum es ueberhaupt geht. Der Titel raemt das ein,
     die Grafik belohnt danach. */
  .wsh-p360__text  { order: 1; }
  .wsh-p360__stage { order: 2; }
}

/* Aussenabstand auf Mobile — gleiche Logik wie bei der Testimonial-Karte:
   Die Sektion spannt sich ueber die volle Viewport-Breite (der dunkle Band
   soll randlos sein) und setzt ihr Innenpadding exakt auf den Standard-Token.
   Damit ist der Abstand unabhaengig davon, was ein Elementor-Container
   aussenherum an Padding mitbringt. */
@media (max-width: 640px) {
  .wsh-p360 {
    width: auto;
    max-width: none;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left:  var(--wsh-container-pad);
    padding-right: var(--wsh-container-pad);
  }
  /* Mehr Platz vorhanden -> die Grafik darf wieder etwas groesser werden. */
  .wsh-p360__stage { width: min(540px, 96%); }
}

@media (prefers-reduced-motion: reduce) {
  .wsh-p360__ring-rot { animation: none; }
  .wsh-p360__sweep { transition: none; }
  .wsh-p360__node.is-active::before,
  .wsh-p360__hub.is-stopped::after { animation: none; }
}


/* ============================================================
   5. FAQ — "Dossier" (Liste + Antwort-Panel)
   ------------------------------------------------------------
   Helle Sektion. Desktop: Fragenliste links / grosses Antwort-
   Panel rechts (sticky). Mobile: Inline-Expand unter der Frage.
   Markup: snippets-refactored/FAQ-hell.html — JS: initFaqs().
   Items + Inline-Antworten werden aus der Daten-Liste im Markup
   gebaut. Tokens: --wsh-faq-*. Akzent = Primary, Marker = Secondary.
   ============================================================ */

.wsh-faq {
  position: relative;
  background: transparent;   /* Hintergrund über die Elementor-Section steuern */
  color: var(--wsh-faq-text);
  font-family: var(--wsh-font-text-family);
  box-sizing: border-box;
}

.wsh-faq__inner { max-width: 1180px; margin: 0 auto; }

/* ---- Header ---- */
.wsh-faq__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: clamp(36px, 4vw, 56px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--wsh-faq-hair);
}
.wsh-faq__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wsh-primary-light);
  margin-bottom: 18px;
}
.wsh-faq__kicker::before { content: ""; width: 28px; height: 1px; background: var(--wsh-secondary); opacity: 0.85; }
.wsh-faq__title {
  font-family: var(--wsh-font-primary-family);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0;
}
.wsh-faq__title em { font-style: italic; color: var(--wsh-primary-light); }
.wsh-faq__head-note { font-size: 14px; color: var(--wsh-faq-muted); max-width: 24em; line-height: 1.6; }
.wsh-faq__head-note a { color: var(--wsh-primary); text-decoration: none; border-bottom: 1px solid rgba(81, 98, 36, 0.35); }

/* ---- Grid ---- */
.wsh-faq__grid {
  display: grid;
  /* minmax(0, …) statt blossem fr:
     Ein "1fr" ist in Wahrheit "minmax(auto, 1fr)". Das auto-Minimum verhindert,
     dass die Spalte unter ihre Inhaltsbreite schrumpft — die Spalte wird dann
     breiter als der Container und die Seite bekommt einen horizontalen Scroll. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

/* ---- Fragenliste ---- */
.wsh-faq__list { display: flex; flex-direction: column; min-width: 0; }
.wsh-faq__item { min-width: 0; }
.wsh-faq__item { position: relative; border-top: 1px solid var(--wsh-faq-hair); }
.wsh-faq__item:last-child { border-bottom: 1px solid var(--wsh-faq-hair); }

.wsh-faq__q {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: transparent !important;   /* kein fremder Button-Hintergrund (Theme/Elementor) */
  border: none;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 20px 4px;
  text-align: left;
  /* white-space MUSS explizit zurueckgesetzt werden: Hello/Elementor setzen
     auf <button> ein nowrap. Ohne das hier bleibt der Fragetext einzeilig,
     laeuft aus der Seite und erzeugt auf Mobile den Horizontal-Scroll. */
  white-space: normal;
  font-family: var(--wsh-font-primary-family);
  color: var(--wsh-faq-text);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--wsh-duration-slow) var(--wsh-ease-out),
              padding-left var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-faq__q:hover,
.wsh-faq__q:focus,
.wsh-faq__q:focus-visible,
.wsh-faq__q:active {
  background: transparent !important;
  background-color: transparent !important;   /* schlägt Hello reset.css (button:hover{background-color:#c36}) */
  box-shadow: none !important;
  color: var(--wsh-primary);                   /* schlägt reset.css (button:hover{color:#fff}) */
}
.wsh-faq__q:hover { padding-left: 10px; }
/* Fragetext: darf umbrechen und lange Komposita trennen
   ("Entsendungskoordination", "Sozialversicherungsabklaerungen"). */
.wsh-faq__q-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.wsh-faq__num {
  font-family: var(--wsh-font-text-family);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--wsh-faq-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-faq__chev {
  width: 18px;
  height: 18px;
  color: var(--wsh-faq-muted);
  flex: none;
  transition: transform var(--wsh-duration-slow) cubic-bezier(.5, 0, .2, 1),
              color var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-faq__item.is-active .wsh-faq__q { color: var(--wsh-primary); }
.wsh-faq__item.is-active .wsh-faq__num { color: var(--wsh-primary); }
.wsh-faq__item.is-active .wsh-faq__chev { color: var(--wsh-primary); transform: rotate(90deg); }

/* aktiver Marker im linken Gutter */
.wsh-faq__q::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 2px;
  height: 0;
  transform: translateY(-50%);
  background: var(--wsh-secondary);
  transition: height var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-faq__item.is-active .wsh-faq__q::before { height: 24px; }

/* Inline-Antwort (nur Mobile) */
.wsh-faq__inline {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s var(--wsh-ease-out), opacity var(--wsh-duration-slow) var(--wsh-ease-out);
}
.wsh-faq__inline-body {
  padding: 0 4px 24px 30px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wsh-faq-muted);
}

/* ---- Antwort-Panel (Desktop) ---- */
.wsh-faq__panel {
  position: sticky;
  top: 40px;
  background: var(--wsh-faq-surface);
  border: 1px solid var(--wsh-faq-hair);
  border-left: 3px solid var(--wsh-secondary);
  border-radius: var(--wsh-radius-sm);
  padding: clamp(28px, 3vw, 42px);
  min-height: 340px;
  box-shadow: 0 18px 50px -30px rgba(27, 33, 15, 0.4);
  display: flex;
  flex-direction: column;
}
.wsh-faq__panel-index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--wsh-primary-light);
  font-variant-numeric: tabular-nums;
}
.wsh-faq__panel-q {
  font-family: var(--wsh-font-primary-family);
  font-weight: 700;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--wsh-faq-text);
  margin: 14px 0 20px;
  text-wrap: balance;
}
.wsh-faq__panel-a { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.78; color: var(--wsh-faq-muted); margin: 0; }
/* Antworttexte duerfen nicht ausbrechen (lange Woerter, E-Mail-Adressen) */
.wsh-faq__panel,
.wsh-faq__panel-a,
.wsh-faq__inline,
.wsh-faq__inline-body { min-width: 0; overflow-wrap: break-word; }
/* Die Kopfnotiz enthaelt eine E-Mail-Adresse — die bricht sonst nirgends um. */
.wsh-faq__head-note { overflow-wrap: anywhere; }
.wsh-faq__panel .fade { transition: opacity var(--wsh-duration-slow) var(--wsh-ease-out); }
.wsh-faq__panel.is-swapping .fade { opacity: 0; }

.wsh-faq__panel-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--wsh-faq-hair);
  display: flex;
  align-items: center;
  gap: 12px;
}
.wsh-faq__panel-foot span { font-size: 14px; color: var(--wsh-faq-muted); }
.wsh-faq__panel-foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wsh-primary);
  text-decoration: none;
  transition: gap var(--wsh-duration-base) var(--wsh-ease-out);
}
.wsh-faq__panel-foot a:hover { gap: 12px; }

/* Daten-Liste (im Markup, von JS gelesen) nicht anzeigen */
.wsh-faq__data { display: none; }

/* ---- Responsive ---- */
/* ≤1024px (Elementor Tablet) → Akkordeon; ≥1025px → Seiten-Panel */
@media (max-width: 1024px) {
  .wsh-faq__head { grid-template-columns: 1fr; align-items: start; }
  .wsh-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .wsh-faq__panel { display: none; }              /* mobile → Inline-Akkordeon */
  .wsh-faq__item.is-active .wsh-faq__inline { max-height: 360px; opacity: 1; }
  .wsh-faq__chev { display: block; }
}
@media (min-width: 1025px) {
  .wsh-faq__inline { display: none; }             /* desktop → Seiten-Panel */
  .wsh-faq__chev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wsh-faq__chev,
  .wsh-faq__inline,
  .wsh-faq__q,
  .wsh-faq__panel .fade { transition: none; }
}


/* ============================================================
   6. HERO — "Flug-Szene" (Flat-Design)
   ------------------------------------------------------------
   Selbst-enthaltene, animierte Hero-Karte: schwebendes Flugzeug
   (Seitenansicht), flache Wolken mit hartem Offset-Schatten
   (rechts→links), Story-Bubbles erscheinen nacheinander oberhalb.
   Markup: snippets-refactored/Hero-Flug-Szene.html — JS: initHeroFlight().
   Wolken/Streaks werden vom JS erzeugt; Story-Stationen aus dem
   Markup gelesen. Tokens: --wsh-pf-*. Guard-Flag: data-wsh-pf-ready.
   ============================================================ */

.wsh-pf {
  position: relative;
  width: min(680px, 94vw);
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  background: var(--wsh-pf-sky);
  border-radius: var(--wsh-radius-lg);
  overflow: hidden;
  font-family: var(--wsh-font-text-family);
}

/* Wolken */
.wsh-pf__cloud { position: absolute; will-change: transform; animation: wsh-pf-cloud linear infinite; }
.wsh-pf__cloud i {
  position: absolute;
  background: var(--wsh-white);
  border-radius: var(--wsh-radius-pill);
  filter: drop-shadow(7px 9px 0 var(--wsh-pf-cloud-shadow));
}
@keyframes wsh-pf-cloud { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 760px)); } }

/* Speed-Streaks (hinter dem Flugzeug) */
.wsh-pf__streaks { position: absolute; inset: 0; }
.wsh-pf__streak {
  position: absolute;
  height: 5px;
  border-radius: 5px;
  background: var(--wsh-white);
  opacity: 0;
  box-shadow: 0 1px 0 var(--wsh-pf-cloud-shadow);
  animation: wsh-pf-streak linear infinite;
}
@keyframes wsh-pf-streak {
  0%   { transform: translateX(60px) scaleX(0.4); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { transform: translateX(-220px) scaleX(1); opacity: 0; }
}

/* Flugzeug */
.wsh-pf__plane {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 42%;
  max-width: 300px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation: wsh-pf-float 5.2s ease-in-out infinite;
  will-change: transform;
}
.wsh-pf__plane svg { display: block; width: 100%; height: auto; filter: drop-shadow(10px 26px 0 rgba(74, 90, 34, 0.13)); }
@keyframes wsh-pf-float {
  0%, 100% { transform: translate(-52%, -47%) rotate(-1.5deg); }
  50%      { transform: translate(-48%, -56%) rotate(1.5deg); }
}

/* Story-Bubble (eine, wird wiederverwendet) */
.wsh-pf__bubble {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.8);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: var(--wsh-white);
  border-radius: var(--wsh-radius-pill);
  box-shadow: 6px 8px 0 var(--wsh-pf-cloud-shadow);
  font-size: 14px;
  font-weight: 600;
  color: var(--wsh-pf-text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s var(--wsh-ease-out), transform 0.5s cubic-bezier(.34, 1.4, .5, 1);
  z-index: 6;
  pointer-events: none;
}
.wsh-pf__bubble.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wsh-pf__bubble b { font-family: var(--wsh-font-primary-family); font-weight: 700; }
.wsh-pf__bub-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(157, 195, 60, 0.2);
  color: var(--wsh-primary);
}
.wsh-pf__bub-ico svg { width: 16px; height: 16px; }
.wsh-pf__bub-ico--terra { background: rgba(196, 114, 58, 0.18); color: var(--wsh-accent); }
/* kleiner Verbindungs-Punkt unter der Bubble Richtung Flugzeug */
.wsh-pf__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--wsh-white);
  box-shadow: 3px 4px 0 var(--wsh-pf-cloud-shadow);
}

/* Story-Daten (im Markup, von JS gelesen) nicht anzeigen */
.wsh-pf__story { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wsh-pf__cloud,
  .wsh-pf__streak,
  .wsh-pf__plane { animation: none; }
  .wsh-pf__bubble { transition: none; }
}


/* ============================================================
   7. DL-ABLAUF — vertikale Timeline
   ------------------------------------------------------------
   Helle Sektion ohne Überschrift (kommt aus Elementor). Linie
   links zeichnet sich beim Reveal, Phasen fliegen gestaffelt ein.
   Markup: snippets-refactored/DL-Ablauf-vertikal.html — JS:
   initTimeline() (Guard-Flag data-wsh-vt-ready). Inhalt steht im
   Markup. Tokens: --wsh-vt-*; Linie/Node = Secondary, Zahl = Primary.
   ============================================================ */

.wsh-vt {
  font-family: var(--wsh-font-text-family);
  color: var(--wsh-vt-text);
  max-width: 760px;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

.wsh-vt__track { position: relative; }

/* durchgehende Linie links (zeichnet sich beim Reveal) */
.wsh-vt__track::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--wsh-secondary), var(--wsh-primary-light));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.3s cubic-bezier(.5, 0, .2, 1);
}
.wsh-vt__track.is-in::before { transform: scaleY(1); }

.wsh-vt__phase {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 0 0 34px 0;
  align-items: start;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--wsh-ease-out), transform 0.6s cubic-bezier(.3, 1.1, .5, 1);
}
.wsh-vt__track.is-in .wsh-vt__phase { opacity: 1; transform: none; }
.wsh-vt__phase:last-child { padding-bottom: 4px; }

.wsh-vt__node {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wsh-white);
  border: 2px solid var(--wsh-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wsh-font-primary-family);
  font-weight: 800;
  font-size: 18px;
  color: var(--wsh-primary);
  box-shadow: 0 6px 18px -10px rgba(81, 98, 36, 0.55);
}

.wsh-vt__body { padding-top: 3px; }
.wsh-vt__phase-title {
  font-family: var(--wsh-font-primary-family);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 20px);
  letter-spacing: -0.01em;
  color: var(--wsh-vt-text);
  margin: 0 0 6px;
  line-height: 1.2;
}
.wsh-vt__phase-desc { font-size: 14.5px; line-height: 1.55; color: var(--wsh-vt-muted); margin: 0 0 12px; }
.wsh-vt__tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 8px; }
.wsh-vt__tasks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--wsh-vt-hair);
  border-radius: var(--wsh-radius-pill);
  font-size: 12.5px;
  color: var(--wsh-vt-muted);
  background: rgba(157, 195, 60, 0.06);
}
.wsh-vt__tasks li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wsh-primary-light); flex: none; }

@media (max-width: 520px) {
  .wsh-vt__phase { grid-template-columns: 48px 1fr; gap: 16px; }
  .wsh-vt__node { width: 48px; height: 48px; font-size: 16px; }
  .wsh-vt__track::before { left: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .wsh-vt__track::before { transition: none; transform: scaleY(1); }
  .wsh-vt__phase { transition: none; opacity: 1; transform: none; }
}


/* ============================================================
   8. TESTIMONIALS — Featured-Zitat + Auswahl-Avatare
   ------------------------------------------------------------
   Helle Sektion ohne Überschrift (kommt aus Elementor). Grosses
   Zitat mit Crossfade, Avatar-Picker unten, Auto-Rotation (stoppt
   nach Klick). Markup: snippets-refactored/Testimonials.html — JS:
   initTestimonials() (Guard-Flag data-wsh-ts-ready). Zitate stehen
   im Markup. Tokens: --wsh-ts-*. Akzent = Primary, Kante = Secondary.
   Avatar-Farbe pro Stimme via data-color im Markup.
   ============================================================ */

.wsh-ts {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  font-family: var(--wsh-font-text-family);
  color: var(--wsh-ts-text);
}

.wsh-ts__card {
  position: relative;
  background: var(--wsh-white);
  border: 1px solid var(--wsh-ts-hair);
  border-radius: var(--wsh-radius-sm);
  padding: clamp(32px, 4.5vw, 60px);
  box-shadow: 0 26px 60px -40px rgba(27, 33, 15, 0.5);
  overflow: hidden;
}
/* grosses Anführungszeichen als Deko */
.wsh-ts__mark {
  position: absolute;
  top: -18px;
  right: 24px;
  font-family: var(--wsh-font-primary-family);
  font-weight: 800;
  font-size: 200px;
  line-height: 1;
  color: var(--wsh-secondary);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}
/* Akzentkante links */
.wsh-ts__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--wsh-secondary), var(--wsh-primary-light));
}

.wsh-ts__quote {
  font-family: var(--wsh-font-primary-family);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--wsh-ts-text);
  margin: 0;
  max-width: 30em;
  text-wrap: balance;
  transition: opacity 0.4s var(--wsh-ease-out), transform 0.4s var(--wsh-ease-out);
}

/* ---- Laengen-adaptive Zitatgroesse ----------------------------------
   Das JS misst die Zeichenzahl und setzt data-wsh-ts-len. Kurze Zitate
   duerfen gross und plakativ stehen; lange muessen kleiner und ruhiger
   werden, sonst erschlagen sie die Karte (siehe Victorinox-Zitat).

   Zusaetzlich kippt text-wrap ab "long" von balance auf pretty:
   balance ist fuer Headlines gedacht, greift browserseitig nur bis
   ca. 6 Zeilen und ist bei langem Text teuer.
   -------------------------------------------------------------------- */
.wsh-ts__quote[data-wsh-ts-len="mid"] {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.42;
  max-width: 34em;
}
.wsh-ts__quote[data-wsh-ts-len="long"] {
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 42em;
  text-wrap: pretty;
}
.wsh-ts__quote[data-wsh-ts-len="xl"] {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0;
  max-width: 46em;
  text-wrap: pretty;
}
.wsh-ts__quote em { font-style: italic; color: var(--wsh-primary-light); }

.wsh-ts__author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  transition: opacity 0.4s var(--wsh-ease-out), transform 0.4s var(--wsh-ease-out);
}
.wsh-ts__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wsh-font-primary-family);
  font-weight: 700;
  font-size: 19px;
  color: var(--wsh-white);
  box-shadow: 0 4px 14px -6px rgba(81, 98, 36, 0.6);
}
.wsh-ts__who b { display: block; font-family: var(--wsh-font-primary-family); font-weight: 700; font-size: 16px; color: var(--wsh-ts-text); }
.wsh-ts__who span { font-size: 13.5px; color: var(--wsh-ts-muted); }

.wsh-ts__card.is-swapping .wsh-ts__quote,
.wsh-ts__card.is-swapping .wsh-ts__author { opacity: 0; transform: translateY(8px); }

/* ---- Auswahlzeile ---------------------------------------------------
   Frueher flex + wrap -> die Pills brachen ungleichmaessig um (2-2-1)
   und wirkten zufaellig. Jetzt ein Grid mit gleich breiten Spalten:
   die Pills stehen sauber untereinander, egal wie viele es sind.
   -------------------------------------------------------------------- */
.wsh-ts__select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 8px;
  margin-top: 26px;
}
.wsh-ts__pick {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 10px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--wsh-ts-hair);
  border-radius: var(--wsh-radius-pill);
  padding: 6px 14px 6px 6px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--wsh-duration-base) var(--wsh-ease-out),
              background var(--wsh-duration-base) var(--wsh-ease-out),
              transform var(--wsh-duration-base) var(--wsh-ease-out);
}
.wsh-ts__pick:hover { transform: translateY(-2px); border-color: rgba(81, 98, 36, 0.35); }
/* fremden Button-Hintergrund (Hello reset.css button:hover) neutralisieren */
.wsh-ts__pick:hover,
.wsh-ts__pick:focus,
.wsh-ts__pick:focus-visible,
.wsh-ts__pick:active { background-color: transparent !important; box-shadow: none !important; }
.wsh-ts__pick.is-active { border-color: var(--wsh-primary); background-color: rgba(157, 195, 60, 0.12) !important; }
.wsh-ts__pick-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wsh-font-primary-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--wsh-white);
}
.wsh-ts__pick-name { font-size: 13px; font-weight: 600; color: var(--wsh-ts-text); }
.wsh-ts__pick-role { font-size: 11.5px; color: var(--wsh-ts-muted); }
.wsh-ts__pick-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
  min-width: 0;              /* erlaubt dem Text, im Grid zu schrumpfen */
}
/* Lange Rollen (z.B. "HR & Communication Director, Lagardère Travel Retail")
   abschneiden statt umbrechen — sonst werden die Pills unterschiedlich hoch. */
.wsh-ts__pick-name,
.wsh-ts__pick-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Falls die Rollen im Picker zu unruhig wirken: diese Zeile aktivieren.
   Die Rolle steht ohnehin gross unter dem aktiven Zitat.
   .wsh-ts__pick-role { display: none; } */

/* Daten-Liste (im Markup, von JS gelesen) nicht anzeigen */
.wsh-ts__data { display: none; }

/* ---- Mobile ---------------------------------------------------------
   Frueher wurde hier die komplette Meta ausgeblendet (.wsh-ts__pick-meta
   { display: none }). Das passte zum alten Flex-Layout mit schmalen Pills.
   Seit die Pills volle Breite haben, blieben sie dadurch leer — nur noch
   ein Avatar in einer langen Huelse.

   Jetzt: Die Pille zeigt die FUNKTION statt des Namens. Der Name steckt
   ohnehin in den Initialen des Avatars, und beim Auswaehlen ist die Rolle
   die nuetzlichere Information ("Head of People" sagt mehr als "S. K.").
   Zwei Zeilen sind erlaubt, damit lange Titel nicht abgeschnitten werden.
   Zusaetzlich weniger Innenabstand — die Karte nutzt so die Breite besser.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Aussenabstand zum Bildschirmrand:
     Der kam bisher aus dem Elementor-Container und war auf Mobile zu
     gross — die Karte wirkte eingequetscht. Hier bricht die Komponente
     kontrolliert aus dem Container-Padding aus und setzt exakt
     --wsh-container-pad (20px) zum Rand. Die Rechnung "50% - 50vw"
     verschiebt die Karte bis an die Viewport-Kante, das + Padding holt
     sie um genau einen Standardabstand wieder herein.

     Vorteil: unabhaengig davon, was im Elementor-Container steht.
     Wer den Abstand aendern will, aendert den Token — nicht 5 Container. */
  .wsh-ts {
    width: auto;
    max-width: none;
    margin-left:  calc(50% - 50vw + var(--wsh-container-pad));
    margin-right: calc(50% - 50vw + var(--wsh-container-pad));
  }

  .wsh-ts__card { padding: 26px 20px 24px; }
  .wsh-ts__mark { font-size: 130px; top: -10px; right: 12px; }

  .wsh-ts__avatar { width: 46px; height: 46px; font-size: 17px; }
  .wsh-ts__author { gap: 12px; margin-top: 22px; }

  .wsh-ts__select { grid-template-columns: 1fr; gap: 6px; }
  .wsh-ts__pick { padding: 8px 12px 8px 8px; }

  .wsh-ts__pick-name { display: none; }
  .wsh-ts__pick-role {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wsh-ts-text);
    white-space: normal;          /* darf umbrechen … */
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* … aber hoechstens auf zwei Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wsh-ts__quote, .wsh-ts__author { transition: none; }
}


/* ============================================================
   9. TEXT-UTILITIES — Umbruch & Silbentrennung
   ------------------------------------------------------------
   Helfer, die in Elementor direkt als CSS-Klasse auf ein Widget
   (Überschrift, Text, Container) gelegt werden.

   .wsh-balance   → verteilt Titel gleichmässig auf die Zeilen
                    (verhindert einzelne "Waisen"-Wörter).
                    NUR für Headlines/kurze Texte — text-wrap:balance
                    greift browserseitig nur bis ca. 6 Zeilen.

   .wsh-pretty    → für Fliesstext: verhindert Schusterjungen am
                    Absatzende, ohne die Kosten von balance.

   .wsh-hyphens   → aktiviert die Silbentrennung. Wichtig für
                    Deutsch (Komposita wie "Komplettkoordination"
                    oder "Mobilitätsprogrammen" brechen sonst hässlich).

   ACHTUNG Silbentrennung: hyphens:auto greift in Chrome/Safari nur,
   wenn die Sprache am <html>-Tag gesetzt ist (<html lang="de-CH">).
   WordPress macht das über die Site-Sprache automatisch — bei WPML
   pro Sprachversion prüfen (EN-Seiten brauchen lang="en-…").
   ============================================================ */

.wsh-balance {
  text-wrap: balance;
  -webkit-text-wrap: balance;
}

/* Alias — semantisch für Headings, identisches Verhalten. */
.wsh-heading-balance { text-wrap: balance; }

/* Fliesstext: nur die letzte Zeile wird optimiert (günstiger als balance). */
.wsh-pretty { text-wrap: pretty; }

.wsh-hyphens {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;   /* Fallback: bricht überlange Wörter hart */
  word-wrap: break-word;       /* Legacy */
}


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

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

   Verhalten:
     - Klick auf Toggle: Panel slidet von rechts rein
     - Der Hamburger morpht NICHT zu ×; das × sitzt als eigener
       Close-Button im Panel (per JS injiziert)
     - ESC, Overlay-Klick, Link-Klick im Panel: schliessen
     - Focus-Return zum Toggle nach dem Schliessen
     - Ab 1025px (Elementor-Desktop) automatisch ausgeblendet
   ============================================================ */

/* ===== Toggle (Hamburger) =====
   margin-left:auto schiebt ihn in einem Flex-Header automatisch
   nach rechts. */
.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);
}

/* !important, um die Button-Defaults von WordPress/Elementor/Hello
   zu erschlagen (sonst kommt z.B. der Theme-Hover 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-secondary) !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;
  transform-origin: center;
  transition: background-color var(--wsh-duration-base) ease,
              transform        var(--wsh-duration-base) var(--wsh-ease-out);
}

/* Hover/Focus: Striche wechseln auf Lime (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-secondary);
}

/* Klick-Feedback: kurzer Puls der Striche (is-active setzt das JS) */
.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 (×) — im Panel =====
   Wird vom JS erzeugt und verdrahtet; muss nicht ins Snippet. */
.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-secondary);
}
.wsh-nav-close:focus-visible {
  outline: 2px solid var(--wsh-secondary) !important;
  outline-offset: 2px;
  border-radius: var(--wsh-radius-sm);
}


/* ===== Panel (Off-Canvas) ===== */
.wsh-nav-panel {
  position: fixed !important;
  top: 0;
  right: 0;
  /* !important, weil Elementor die Container-Breite ueber die eigene
     Variable --width steuert (.e-con { width: var(--width) }) und pro
     Element/Breakpoint Regeln mit HOEHERER Spezifitaet ausgibt. Ohne
     !important gewinnt Elementor auf Mobile -> Panel kollabiert zu
     einem schmalen Streifen und der Inhalt laeuft seitlich raus. */
  width: var(--wsh-nav-panel-width) !important;
  max-width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;   /* dvh: korrekte Höhe trotz Mobile-Browserleiste */
  overflow-y: auto;
  overflow-x: hidden;          /* nichts darf seitlich ausbrechen */
  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;   /* oben Platz für das × */
  transform: translateX(100%);
  visibility: hidden;
  /* Schliessen: visibility erst NACH dem Slide-Out umschalten */
  transition:
    transform  var(--wsh-duration-slow) var(--wsh-ease-slide),
    visibility 0s linear var(--wsh-duration-slow);
}
/* Elementor "Boxed"-Container legt den Inhalt in einen inneren Wrapper
   (.e-con-inner) mit eigener max-width/content-width. Der darf die
   Panel-Breite nicht sprengen, sonst wird der Inhalt abgeschnitten.
   Tipp: In Elementor den Container auf "Full Width" stellen — dann
   entfaellt dieser Wrapper ganz. Diese Regel deckt beide Faelle ab. */
.wsh-nav-panel > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
}

.wsh-nav-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  /* Öffnen: visibility sofort, sonst startet der Slide erst verzögert */
  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: Mobile-Nav komplett ausblenden ===== */
@media (min-width: 1025px) {
  .wsh-nav-toggle,
  .wsh-nav-panel { display: none !important; }
}


/* ===== Elementor-Editor: Panel als normalen Block sichtbar machen =====
   Sonst wäre der Off-Canvas-Container im Editor unsichtbar und
   liesse sich nicht bearbeiten. */
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-secondary) !important;
  padding-top: 20px !important;
}


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

   Implementation: CSS-Grid-Stack (alle Panels in DERSELBEN Grid-Zelle)
   → der Container ist automatisch so hoch wie das längste Panel,
   keine hardcoded min-height nötig.

   Vorteile:
     - 0 KB JS, funktioniert auch ohne JS (Root-Panel bleibt sichtbar)
     - smoother Slide via CSS-Transition
     - color: inherit → passt sich dem Panel automatisch an

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

   AKTUELL FÜR OES KONFIGURIERT: 1 Drill-Set ("services").
   Neues Sub-Panel ergänzen → BEIDE Blöcke (A und B) unten erweitern.
   ============================================================ */

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

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

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

/* Root ist Default sichtbar (= Fallback, falls JS/CSS-State fehlt) */
.wsh-nav-drill__panel--root {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* === DRILL-SET-DEFINITIONEN ===
   Pro Sub-Panel je eine Zeile in BEIDEN Blöcken ergänzen.
   Beispiel für ein künftiges Sub-Panel "insights":
     A)  #wsh-drill-insights:checked ~ .wsh-nav-drill__panel--insights
     B)  #wsh-drill-insights:checked ~ .wsh-nav-drill__panel--root
   --------------------------------------------------------- */

/* A) Sub-Panel einblenden, wenn sein Radio aktiv ist */
#wsh-drill-services:checked ~ .wsh-nav-drill__panel--services {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* B) Root ausblenden, sobald irgendein Sub aktiv ist */
#wsh-drill-services: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;
  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, "→" 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 die Menü-Komposition (Drill + flache Links) === */

/* Einheitlicher Link-Style — funktioniert im Drill-Panel 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 (Leistungen-Liste) */
.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 */
.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-services:checked ~ .wsh-nav-drill__panel--services,
  #wsh-drill-services:checked ~ .wsh-nav-drill__panel--root {
    transform: none;
  }
  .wsh-nav-panel,
  .wsh-nav-overlay { transition: none; }
}