/* ── WEGNER Auction-App Landingpage ─────────────────────────────────────── */

/* Theme-Seitentitel (h1.entry-title) — diese CSS lädt nur auf dieser Seite,
   daher unbedenklich global zentriert. */
.entry-header .entry-title {
  text-align: center;
}

.wgn-aapp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 0 60px;
}

.wgn-aapp-title {
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a2e;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 18px;
}

/* Sanfter, einmaliger Blau-Puls über die zwei Satzteile beim Laden der Seite —
   dezente Mischfarbe aus Titel-Dunkelblau und dem Kunden-Login-Blau (#3060d0) */
@keyframes wgn-title-glow {
  0%, 100% { color: #1a1a2e; }
  50%      { color: #294b9f; }
}
.wgn-aapp-title-p1.is-glowing { animation: wgn-title-glow 1s ease-in-out; }
.wgn-aapp-title-p2.is-glowing { animation: wgn-title-glow 1.7s ease-in-out; }

/* .wgn-aapp-wrap-Präfix erhöht die Spezifität bewusst — das Theme (Astra) hat
   eine Regel ".entry-content p { margin-bottom: 1.6em; }" (Spezifität 0,1,1),
   die eine einfache Klasse (0,1,0) sonst zuverlässig überschreibt. */
.wgn-aapp-wrap .wgn-aapp-intro {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto 0;
  text-align: justify;
  text-align-last: left;
}

/* ── BODY TEXT, HEADINGS, LINKS ──────────────────────────────────────────
   Alle Textblöcke teilen dieselbe Spaltenbreite (760px, zentriert) wie die
   Content-Bilder — verhindert das "zerstückelte" Stufenbild entlang der Seite.
   Der 70px-Abstand zu Fotos/Grafiken wird bewusst von den Bild-Wrappern
   selbst getragen (margin oben+unten), Textelemente bleiben hier neutral. */

.wgn-aapp-h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: #1a1a2e;
  max-width: 760px;
  margin: 0 auto 14px;
  /* Verdoppelt den Abstand zum vorherigen Element (das meist selbst
     margin-bottom:70px trägt, 70px-Regel s. Spacing-System). padding-top statt
     margin-top, da Margins zwischen angrenzenden Block-Elementen sonst NICHT
     addiert würden, sondern auf den grösseren Wert kollabieren (CSS-Margin-
     Collapsing) — padding ist davon nicht betroffen, daher echte Verdopplung. */
  padding-top: 70px;
  transition: color 1.6s ease;
}
/* Fade to Blue — analog der aktiven Seitennavigation, sobald die Überschrift im Bild ist */
.wgn-aapp-h3.is-revealed { color: #3060d0; }

/* Erfolgsstory-Titel: 2 Zeilen, "Erfolgsstory:" als farblich invertiertes
   Schild (dunkler/blauer Grund, helle Schrift) gegenüber der 2. Zeile, die
   sich normal (helle Fläche, dunkle/blaue Schrift) wie jede andere H3 verhält
   — beide durchlaufen denselben Dunkel→Blau-Fade, nur gegengleich eingefärbt. */
.wgn-aapp-h3.wgn-story-h3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.wgn-story-h3-tag {
  display: inline-block;
  background: #1a1a2e;
  color: #f5f3ee;
  padding: 4px 14px;
  border-radius: 6px;
  transition: background 1.6s ease, color 1.6s ease;
}
.wgn-story-h3.is-revealed .wgn-story-h3-tag {
  background: #3060d0;
  color: #fff;
}

.wgn-aapp-wrap .wgn-aapp-body {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto 0;
  text-align: justify;
  text-align-last: left;
}
/* Leerzeile zwischen den beiden Erfolgsstory-Absätzen, statt wie sonst direkt
   aneinanderstossend — gibt dem längeren Fliesstext etwas Luft. */
.wgn-aapp-wrap .wgn-aapp-body.wgn-story-p-gap { margin-bottom: 0.875em; }

/* Äusserer Wrap bleibt IMMER unbeschnitten — wird vom IntersectionObserver beobachtet.
   Clip-path auf dem beobachteten Element selbst liefert in Chromium Intersection-Ratio 0
   (keine sichtbare Fläche mehr), der Observer würde dann nie ein zweites Mal feuern. */
.wgn-aapp-features-wrap {
  position: relative;
  margin: 8px auto 70px;
  max-width: 760px;
}

.wgn-aapp-features-clip.wgn-feat-armed {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.8s linear;
}
.wgn-aapp-features-clip.is-scanned { clip-path: inset(0 0 0% 0); }

.wgn-aapp-features {
  padding: 0 0 0 22px;
  color: #444;
  font-size: 1rem;
  line-height: 1.85;
  text-align: left;
}
.wgn-aapp-features li { margin-bottom: 4px; }
.wgn-aapp-features strong { color: #1a1a2e; }

/* Einzelne Scanlinie — wandert von oben nach unten, macht den Text dabei sichtbar */
.wgn-feat-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(48, 96, 208, 0.9), transparent);
  box-shadow: 0 0 10px 2px rgba(48, 96, 208, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: top 1.8s linear, opacity 0.25s ease;
}
.wgn-aapp-features-clip.is-scanned ~ .wgn-feat-scanline {
  top: 100%;
  opacity: 1;
}
.wgn-aapp-features-clip.is-scan-done ~ .wgn-feat-scanline { opacity: 0; }

.wgn-aapp-link {
  color: #8a7530;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(212, 188, 90, 0.5);
}
.wgn-aapp-link:hover { color: #d4bc5a; }

/* ── CONTENT-BILDER (Single / Pair / Platzhalter) ─────────────────────── */

.wgn-aapp-img-single {
  margin: 70px 0;
  display: flex;
  justify-content: center;
}
/* Für bewusst grosse Fotos: schmal/skaliert während des Scrollens, Zoom auf
   Originalgrösse beim Sichtbarwerden — analog Trio-Widget und Blur-/Trapez-Paaren. */
.wgn-aapp-img-single--zoom {
  transform: scale(0.78);
  transform-origin: center;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wgn-aapp-img-single--zoom.is-expanded { transform: scale(1); }
.wgn-aapp-img-single--zoom .wgn-aapp-cimg,
.wgn-aapp-img-single--zoom .wgn-aapp-cimg-ph {
  max-width: none;
}
/* Gedeckelte Variante: Zoom-Effekt bleibt, aber die Maximalgrösse ist exakt
   die Breite der Textspalte (760px) statt darüber hinauszuwachsen. */
.wgn-aapp-img-single--zoom-capped .wgn-aapp-cimg,
.wgn-aapp-img-single--zoom-capped .wgn-aapp-cimg-ph {
  max-width: 760px;
}

/* Welcome-Layout: animierte Kacheln auf schwarzer Editor-Fläche ("lebendiges" Foto) */
.wgn-welcome-canvas {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1574 / 1177;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.wgn-welcome-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.wgn-wl-tile {
  position: absolute;
  transition: left 1.5s ease-in-out, top 1.5s ease-in-out;
}
.wgn-wl-tile img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Datei-Upload: Foto-Fächer + CSV-Cursor demonstrieren den Massen-Upload */
.wgn-upload-canvas {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1788 / 1384;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  container-type: inline-size;
}
.wgn-upload-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.wgn-up-photo,
.wgn-up-field {
  position: absolute;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.wgn-up-photo.is-visible,
.wgn-up-field.is-visible { opacity: 1; }
.wgn-up-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.wgn-up-field {
  display: flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 2cqw;
  color: #3060d0;
  overflow: hidden;
  white-space: nowrap;
}

/* Fächer aus den 8 Foto-Kacheln — Phase 1, zieht zur Foto-Upload-Zone */
.wgn-up-fan {
  position: absolute;
  width: 16%;
  height: 18%;
  left: 50%;
  top: 88%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: left 1.6s cubic-bezier(0.4, 0, 0.2, 1),
              top 1.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
  pointer-events: none;
  z-index: 30;
}
.wgn-up-fan.is-active { opacity: 1; }
.wgn-up-fan-card {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 46%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--r));
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Eigener Rahmen/Schatten der Karte ausblenden, sonst bleibt nach dem Zerfall der
   Kacheln ein leerer weisser Kartenrahmen übrig — sieht aus wie ein Schnitt statt einer Auflösung. */
.wgn-up-fan-card.is-dissolving {
  border-color: transparent;
  box-shadow: none;
}
.wgn-up-fan-card img { display: block; width: 100%; height: auto; }

/* Pixel-Auflöse-Effekt: 3x3-Kachelraster, das beim Ablegen statt eines simplen
   Verblassens in einzelne Quadrate zerfällt (Fächer-Karten + CSV-Icon). */
.wgn-up-tile-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.wgn-up-tile {
  position: absolute;
  background-size: 500% 500%;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 0.45s ease-in, opacity 0.45s ease-in;
}
.wgn-up-fan-card.is-dissolving img { opacity: 0; }
.wgn-up-fan-card.is-dissolving .wgn-up-tile-grid,
.wgn-up-csv-icon.is-dissolving .wgn-up-tile-grid { opacity: 1; }
.wgn-up-csv-icon .wgn-up-tile { background: #d6e6fb; }
/* Verpixeln statt Zersplittern: jede Kachel schrumpft an Ort und Stelle weg
   (kein Wegfliegen/Rotieren), das wirkt wie ein digitales Pixel-Raster, das verschwindet. */
.wgn-up-tile.is-gone {
  transform: scale(0.05);
  opacity: 0;
}

.wgn-up-cursor {
  position: absolute;
  right: -8%;
  bottom: 8%;
  width: 22px;
  height: 22px;
  transform: scaleX(-1);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

/* CSV-Icon — Phase 2, zieht zur CSV-Upload-Zone */
.wgn-up-csv {
  position: absolute;
  width: 9%;
  height: 9%;
  left: 12.3%;
  top: 70%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: left 1.3s cubic-bezier(0.4, 0, 0.2, 1),
              top 1.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
  pointer-events: none;
  z-index: 30;
}
.wgn-up-csv.is-active { opacity: 1; }
.wgn-up-csv-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d6e6fb;
  border: 2px solid #3060d0;
  border-radius: 6px;
  font-size: 1.7cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3060d0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.3s ease;
}
/* Eigene Füllung/Rahmen ausblenden, sonst scheint nach dem Zerfall der Kacheln
   eine identisch blaue Fläche darunter durch — der Effekt wirkt dann wie ein Schnitt statt einer Auflösung. */
.wgn-up-csv-icon.is-dissolving {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: transparent;
}

.wgn-aapp-cimg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Monochrom-Reveal — Fotos/Grafiken scrollen entsättigt und leicht transparent,
   Farbe und volle Deckkraft blenden erst auf, sobald das Element vollständig
   im Bild ist (edler Effekt statt sofort alles bunt). */
.wgn-aapp-cimg,
.wgn-trio-thumb,
.wgn-aapp-img,
.wgn-wave-recorder,
.wgn-welcome-canvas,
.wgn-upload-canvas,
.wgn-bildmischer-canvas {
  filter: grayscale(1) brightness(0.94) contrast(0.97);
  opacity: 0.78;
  transition: filter 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wgn-aapp-cimg.is-revealed,
.wgn-trio-thumb.is-revealed,
.wgn-aapp-img.is-revealed,
.wgn-wave-recorder.is-revealed,
.wgn-welcome-canvas.is-revealed,
.wgn-upload-canvas.is-revealed,
.wgn-bildmischer-canvas.is-revealed {
  filter: grayscale(0) brightness(1) contrast(1);
  opacity: 1;
}

.wgn-aapp-cimg-ph {
  width: 100%;
  max-width: 760px;
  background: #eaecf0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.wgn-aapp-cimg-ph span {
  font-size: 0.85rem;
  color: #9a9aa8;
  font-style: italic;
  line-height: 1.6;
}
.wgn-aapp-cimg-ph code {
  font-style: normal;
  font-size: 0.78rem;
  color: #777;
}

.wgn-aapp-img-pair {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 70px auto;
  flex-wrap: wrap;
  transform: scale(0.78);
  transform-origin: center;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wgn-aapp-img-pair.is-expanded { transform: scale(1); }
.wgn-aapp-img-pair .wgn-aapp-cimg,
.wgn-aapp-img-pair .wgn-aapp-cimg-ph {
  flex: 1 1 320px;
  max-width: 480px;
}

/* Bildmischer: 3 Vollbild-Grafiken im Loop, harter Schnitt zwischen 1→2→3,
   sanftes Ausblenden am Ende von 3 vor dem Neustart. */
.wgn-bildmischer-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 2314 / 319;
  margin: 70px auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  /* Zoom-Reveal wie Blur-Filter/Trio-Widget: schmal+klein während des Scrollens,
     auf Originalgrösse beim Sichtbarwerden. Transition hier zusammengefasst
     (filter/opacity + transform), da diese spätere Regel sonst die geerbte
     filter/opacity-Transition aus dem Monochrom-Reveal überschreiben würde.
     KEIN max-width:760px — analog zur Grafikquelle (Panorama) darf die Grafik bei
     voller Skalierung über die schmale Textspalte hinaus auf die volle
     Containerbreite (~986px) wachsen, das ist hier explizit gewünscht. */
  transform: scale(0.78);
  transform-origin: center;
  transition: filter 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wgn-bildmischer-canvas.is-expanded { transform: scale(1); }
.wgn-bm-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* Standard-Dauer 0.6s = Crossfade zwischen 1→2 und 2→3. Das finale Ausblenden
     von Bildmischer3 überschreibt die Dauer per JS (transitionDuration) auf 1s. */
  transition: opacity 0.6s ease;
}
.wgn-bm-frame.is-shown { opacity: 1; z-index: 1; }
/* Während der Überblendung liegt das alte Bild OBEN drüber und blendet weg —
   das neue liegt darunter bereits bei voller Deckkraft. So ist die Bildfläche
   die ganze Zeit zu 100% gedeckt, nichts blitzt durch/dunkelt ab. */
.wgn-bm-frame.is-fading-out { z-index: 2; }
.wgn-bm-frame-ph {
  background: #eaecf0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wgn-bm-frame-ph span {
  font-size: 0.85rem;
  color: #9a9aa8;
  font-style: italic;
  line-height: 1.6;
}
.wgn-bm-frame-ph code { font-style: normal; font-size: 0.78rem; color: #777; }

/* ── ERFOLGSSTORY: Logo + Testimonial-Balken + Video, geschichtete Komposition ── */

.wgn-story-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 880;
  margin: 70px auto;
  /* Zoom-Reveal wie Grafikquelle/Blur-Filter: schmal+klein während des Scrollens,
     auf volle Wrap-Breite (~986px) beim Sichtbarwerden — bewusst KEIN max-width:760px,
     damit die Sektion genauso breit wird wie die anderen gezoomten Elemente. */
  transform: scale(0.78);
  transform-origin: center;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wgn-story-canvas.is-expanded { transform: scale(1); }

/* Logo: kein Hintergrund/Rahmen/Schatten mehr — nur die reine Grafik.
   Phase 1 (is-in): erscheint gross und mittig. Phase 2 (is-settled): wird
   kleiner und wandert auf seine eigene Zeile zwischen Text und Sprechblase/Video. */
.wgn-story-logo {
  position: absolute;
  /* Layout-Position ist IMMER schon die finale (settled) Stelle — die grosse,
     zentrierte Anfangserscheinung wird rein optisch per transform simuliert,
     siehe --logo-dx/--logo-dy (JS-berechnet, initStoryCanvas). Performance-
     Fix: top/left/width während des Einflugs zu animieren erzwingt auf JEDEM
     Frame ein echtes Browser-Layout (per CDP-Trace verifiziert: >1500
     Layout-Events während der Choreografie, das war die Ursache des
     gemeldeten Ruckelns) — transform/opacity laufen dagegen rein auf dem
     Compositor, ohne Reflow.
     WICHTIG: nur translate()+translateY() hier, KEIN scale() — die Grössen-
     änderung sitzt im Kind-Element .wgn-story-logo-inner. Kombiniert man
     Position (translate) und Grösse (scale) auf demselben Element, beein-
     flusst die sich ändernde Skalierung rechnerisch auch die linke Kante der
     Bounding-Box (da scale() um die eigene Mitte herum wirkt) — das erzeugte
     einen kurzen, sichtbaren Ausschlag nach rechts, bevor die Bewegung nach
     links einschwenkte. Mit Position und Grösse auf getrennten Elementen
     bewegt sich die äussere Box rein linear, ohne dieses Wechselspiel. */
  top: 12%;
  left: 10.8%;
  width: 21.6%;
  transform: translate(var(--logo-dx, 0px), var(--logo-dy, 0px)) translateY(-50%);
  opacity: 0;
  z-index: 1;
  /* Echtes, symmetrisches Ease-in-out (Soft-Start + Soft-Stopp): die
     vorherige Kurve (0.22,1,0.36,1) startete sofort mit voller Geschwindigkeit
     ("zackig"). Jetzt sanft anfahren, in der Mitte am schnellsten, sanft
     ausrollen. */
  transition: transform 2.6s cubic-bezier(0.35, 0, 0.65, 1),
              opacity 1.6s ease;
}
.wgn-story-logo.is-in { opacity: 1; }
.wgn-story-logo.is-video-active { opacity: 0; }
.wgn-story-logo.is-settled {
  /* translate(0px,0px) bewusst explizit (statt einfach weglassen) — sonst
     unterscheiden sich Basis- und Zielzustand wieder in der Anzahl der
     Transform-Funktionen, was den Ausschlag-Bug erneut auslöst (s.o.). */
  transform: translate(0px, 0px) translateY(-50%);
}
/* Grössenänderung (gross→klein) komplett getrennt von der Positionierung
   des Eltern-Elements, siehe Begründung oben. */
.wgn-story-logo-inner {
  transform: scale(var(--logo-scale, 1));
  transform-origin: center;
  transition: transform 2.6s cubic-bezier(0.35, 0, 0.65, 1);
}
.wgn-story-logo.is-settled .wgn-story-logo-inner {
  transform: scale(1);
}
.wgn-story-logo img { display: block; width: 100%; height: auto; }

.wgn-story-testimonial {
  position: absolute;
  /* Layout-Position ist IMMER schon die finale Stelle — der Einflug von oben
     links wird rein optisch per transform simuliert (--test-dx/--test-dy,
     JS-berechnet in initStoryCanvas). Performance-Fix: top/left zu animieren
     erzwingt pro Frame ein Layout/Reflow (auch für den enthaltenen Text —
     das war die Ursache des gemeldeten Ruckelns/Zuckens); transform läuft
     stattdessen rein auf dem Compositor. Höhe bleibt auto (Inhalt bestimmt
     sie), damit das spätere Aufklappen von Teil 2 die Box nur nach unten
     wachsen lässt. */
  top: 37.5%;
  left: 2%;
  width: 45%;
  height: auto;
  transform: translate(var(--test-dx, 0px), var(--test-dy, 0px));
  opacity: 0;
  z-index: 3;
  /* 86% Deckkraft statt vollem Weiss — wirkt leichter, weniger blockhaft. */
  background: rgba(255, 255, 255, 0.86);
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  padding: 22px 26px;
  /* Eigener Text-Container links/rechts von den beiden Anführungszeichen
     gerahmt (Bookends) — kein Anführungszeichen mehr inline im Fliesstext,
     das verursachte Überlappungen mit Buchstaben. */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Damit der diagonale Scan-Streifen (::before) an der abgerundeten Form
     der Sprechblase geclippt wird, statt über die Ecken hinauszuragen. */
  overflow: hidden;
  /* Weicher Auslauf (Soft-Stopp) — starke Verzögerung gegen Ende, kein Ruck.
     Tempo gedrosselt (2.3s→3.2s) auf Nutzerwunsch "langsamer einfliegen". */
  transition: transform 3.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.6s ease;
}
/* Diagonaler Scan-Streifen — gleicher blauer Glow-Stil wie bei den Features,
   läuft aber schräg statt horizontal einmal über die Sprechblase. */
.wgn-story-testimonial::before {
  content: '';
  position: absolute;
  top: -70%;
  /* Dünne Linie statt breitem Band — gleiche Stärke/Glow wie bei den
     Features (dort 2px), nur schräg statt horizontal. Start/Ziel mit viel
     Spielraum (-25%/+130%), weil die Drehung bei einer so langen (240%)
     Linie ein Ende je nach Richtung etwas nachhinken lässt — bei knapperen
     Werten blieb dadurch ein Rest sichtbar. */
  left: -25%;
  width: 2px;
  height: 240%;
  background: linear-gradient(180deg, transparent, rgba(48, 96, 208, 0.55), transparent);
  box-shadow: 0 0 10px 2px rgba(48, 96, 208, 0.32);
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 5;
  transition: left 1.4s ease-in-out;
}
.wgn-story-testimonial.is-scanned::before {
  left: 130%;
}
.wgn-story-testimonial.is-in {
  /* top/left sind bereits die Basiswerte (s.o.) — hier nur noch transform
     auf "angekommen" (0,0) und Opacity setzen. */
  transform: translate(0, 0);
  opacity: 1;
}
.wgn-story-testimonial.is-in.is-faded { opacity: 0; }
/* Gross, gelb, mit Schwung — als Bookends links/rechts vom Text-Container,
   nicht mehr inline im Fliesstext. */
.wgn-story-quote-open,
.wgn-story-quote-close {
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: #d4bc5a;
}
.wgn-story-quote-open { transform: rotate(-8deg); }
.wgn-story-quote-close { transform: rotate(7deg); }
.wgn-story-text {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  min-width: 0;
  flex: 1;
}
.wgn-story-text p {
  margin: 0;
  /* Etwas kleiner als zuvor. */
  font-size: 0.88rem;
  line-height: 1.55;
  color: #1a1a2e;
}
/* Dynamische Sprechblase: Teil 2 ist anfangs auf Höhe 0 geklappt (nicht nur
   unsichtbar) — die Blase ist dadurch wirklich kleiner, nicht nur der Text
   durchsichtig. Beim Aufklappen wächst sie sichtbar nach unten. */
.wgn-story-part2 {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}
.wgn-story-part2.is-shown { opacity: 1; }
.wgn-story-author {
  font-size: 0.8rem !important;
  font-weight: 700;
  color: #3060d0;
}

.wgn-story-video {
  position: absolute;
  /* Layout-Position ist IMMER schon die finale Stelle — der Einflug von oben
     rechts wird rein optisch per transform simuliert (--video-dx/--video-dy,
     JS-berechnet in initStoryCanvas), genau wie bei Logo/Testimonial.
     Performance-Fix: top/left zu animieren erzwingt pro Frame ein Layout
     (Ursache des gemeldeten Ruckelns); transform läuft stattdessen rein auf
     dem Compositor. Einflug-Tempo (3.2s, wie Testimonial) ist hier bewusst
     von der Klick-Vergrösserung entkoppelt: sobald der Nutzer einmal die
     Play-Taste klickt, bekommt das Element die Klasse .is-interacting (JS),
     die ab dann dauerhaft die schnellere 1s-Dauer für Position/Grösse setzt
     — Einflug und Klick-Interaktion teilen sich sonst dieselbe transform-
     Property und könnten sich nicht unabhängig timen. */
  top: 37.5%;
  left: 53%;
  width: 45%;
  aspect-ratio: 16 / 9;
  transform: translate(var(--video-dx, 0px), var(--video-dy, 0px)) translateY(-50%);
  opacity: 0;
  z-index: 2;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  background: #0e0e18;
  transition: opacity 1.6s ease,
              top 3.2s cubic-bezier(0.16, 1, 0.3, 1),
              left 3.2s cubic-bezier(0.16, 1, 0.3, 1),
              width 3.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 3.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 1s ease;
}
/* Ab dem ersten Klick auf Play gilt dauerhaft die schnellere Dauer für
   Position/Grösse (Klick-Vergrösserung UND das spätere Zurückschrumpfen
   bei Pause) — der langsame Einflug ist dann ohnehin längst abgeschlossen. */
.wgn-story-video.is-interacting {
  transition: opacity 1.6s ease,
              top 1s cubic-bezier(0.16, 1, 0.3, 1),
              left 1s cubic-bezier(0.16, 1, 0.3, 1),
              width 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 1s ease;
}
.wgn-story-video.is-in {
  /* top/left sind bereits die Basiswerte (s.o.) — hier nur noch transform
     auf "angekommen" (translateY(-50%), ohne Einflug-Versatz) und Opacity. */
  transform: translateY(-50%);
  opacity: 1;
}
/* Grosse Abspielgrösse: zentriert, deckt bei Bedarf den Testimonial-Riegel ab —
   das ist gewünscht (das Video soll im Fokus stehen). */
.wgn-story-video.is-big {
  left: 50%;
  top: 50%;
  width: 94%;
  transform: translate(-50%, -50%);
  z-index: 10;
  /* Noch eine Runde weicher: nochmals weniger Versatz, nochmals mehr
     Weichzeichnung, nochmals geringere Deckkraft. */
  box-shadow: 0 10px 100px rgba(0, 0, 0, 0.15);
}
.wgn-story-poster,
.wgn-story-videoel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wgn-story-videoel {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.wgn-story-videoel.is-active { opacity: 1; pointer-events: auto; }
/* Veredelte Umschaltung Thumbnail→Video (und beim Resume nach Pause): statt
   hartem Schnitt blendet eine schwarze Ebene über das Thumbnail, danach
   startet das Video darunter bereits — die Schwarz-Ebene blendet erst dann
   wieder weg und gibt den Blick aufs laufende Video frei. */
.wgn-story-blackout {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.6s ease;
}
.wgn-story-blackout.is-out { opacity: 1; }
.wgn-story-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22%;
  aspect-ratio: 1;
  min-width: 44px;
  max-width: 72px;
  /* Astra hat eine globale button{padding:17px 35px}-Regel, die diese Box sonst
     massiv aufbläst (Button-Element!) — hier explizit zurücksetzen. */
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  animation: wgn-story-pulse 2.4s ease-in-out infinite;
  transition: opacity 0.4s ease, transform 0.2s ease,
              width 0.4s ease, height 0.4s ease, border-radius 0.4s ease,
              background 0.4s ease, top 0.4s ease, left 0.4s ease, right 0.4s ease;
}
/* Während aktiver Wiedergabe: kleines, unauffälliges, sehr transparentes
   Quadrat oben rechts statt der zentralen Kreis-Taste — die soll während
   des Videos nicht stören. */
.wgn-story-video.is-big .wgn-story-play {
  top: 14px;
  left: auto;
  right: 14px;
  transform: none;
  width: 30px;
  height: 30px;
  min-width: 0;
  max-width: none;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: none;
}
.wgn-story-video.is-big .wgn-story-play:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.22);
}
.wgn-story-video.is-big .wgn-story-play svg { width: 11px; height: 11px; }
/* Theme-Reset (Astra setzt global svg-Breiten auf 0) gezielt überschreiben,
   sonst verschwindet das Play-Dreieck im Button. */
.wgn-story-play svg {
  /* Feste px-Werte statt %: Prozent-Grössen auf SVG in Flex-Containern können
     je nach Browser auf 0 kollabieren (bestätigter Rendering-Effekt, keine
     Fremd-CSS-Regel beteiligt — per CDP-Inspektion verifiziert). */
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: width 0.3s ease, height 0.3s ease;
}
.wgn-story-play:hover { transform: translate(-50%, -50%) scale(1.08); }
@keyframes wgn-story-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}
.wgn-story-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  font-style: italic;
  color: #9a9aa8;
  line-height: 1.6;
  padding: 8px;
}
.wgn-story-ph code { font-style: normal; font-size: 0.65rem; color: #777; }

@media (max-width: 700px) {
  .wgn-story-canvas { aspect-ratio: auto; height: auto; }
  .wgn-story-logo,
  .wgn-story-testimonial,
  .wgn-story-video {
    position: relative;
    top: auto; left: auto !important; transform: none !important;
    width: 100%; height: auto;
    margin-bottom: 16px;
    opacity: 1 !important;
  }
  .wgn-story-logo { max-width: 220px; margin: 0 auto 16px; }
  .wgn-story-video { aspect-ratio: 16/9; }
}

/* ── TRIO: WELCOME / PAUSE / GOODBYE ──────────────────────────────────── */

.wgn-trio-wrap {
  position: relative;
  display: flex;
  gap: 20px;
  margin: 70px auto 16px;
  transform: scale(0.78);
  transform-origin: center;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wgn-trio-wrap.is-expanded { transform: scale(1); }

.wgn-aapp-wrap .wgn-trio-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 70px;
  padding: 8px 18px;
  background: #f0f1f5;
  border-radius: 999px;
  color: #6b6b7d;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  animation: wgn-trio-hint-pulse 2.6s ease-in-out infinite;
  transition: color 3s ease;
}
.wgn-aapp-wrap .wgn-trio-hint.is-revealed { color: #3060d0; }

/* Sobald ein Tile gehovert wurde: Hinweis wird zur ruhigen Info-Notiz (kein Pulsieren, kein Punkt) */
.wgn-aapp-wrap .wgn-trio-hint.wgn-trio-hint--info {
  color: #1a1a2e;
  animation: none;
  transition: color 0.4s ease;
}
.wgn-aapp-wrap .wgn-trio-hint.wgn-trio-hint--info .wgn-trio-hint-dot { display: none; }

@keyframes wgn-trio-hint-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
.wgn-trio-hint-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a9aa8;
  margin-right: 9px;
  flex-shrink: 0;
}

.wgn-trio-tile {
  flex: 1;
  position: relative;
  aspect-ratio: 1260/740;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  background: #0e0e18;
}

.wgn-trio-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease,
              filter 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.wgn-trio-tile:hover .wgn-trio-thumb { transform: scale(1.04); }

.wgn-trio-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: border-color 0.25s ease;
  pointer-events: none;
  z-index: 2;
}
.wgn-trio-tile:hover::before { border-color: rgba(212, 188, 90, 0.85); }

/* Sobald eines der 3 Tiles gehovert wird: schwarzen Hintergrund der Fotos mit einem
   weissen Schleier aufhellen, damit die oben eingeblendete Animation (Welcome/Pause/
   Goodbye) zur Geltung kommt. Eigener Veil statt Bild-Opacity, da Text/Schrift im
   selben Bild eingebrannt ist — reine Opacity würde die Schrift mit abdunkeln statt
   nur den schwarzen Hintergrund aufzuhellen. Das gehoverte Foto bleibt fast unverändert. */
.wgn-trio-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.wgn-trio-wrap:has(.wgn-trio-tile:hover) .wgn-trio-tile::after { opacity: 0.6; }
.wgn-trio-wrap:has(.wgn-trio-tile:hover) .wgn-trio-tile:hover::after { opacity: 0.1; }

/* "Auction live"-Kachel zeigt ein echtes, helles Foto statt der dunklen
   Welcome/Pause/Goodbye-Grafiken — wirkt dadurch unpassend hell/bunt in der
   Reihe. Dunkles Overlay gleicht das an, blendet beim Hover weg (das Foto
   wird durch den ohnehin vorhandenen Hover-Effekt sowieso hell/voll sichtbar). */
.wgn-trio-tile--live {
  container-type: inline-size; /* für cqw-Einheit des "Auktion"-Schriftzugs */
}
.wgn-trio-live-veil {
  position: absolute;
  inset: 0;
  /* Vignette statt flacher Volltonfläche — Mitte des Fotos bleibt erkennbar,
     die Ecken dunkeln stark ab. Testweise, kann bei Bedarf wieder zurück auf
     eine flache Fläche oder in der Stärke angepasst werden. */
  background: radial-gradient(ellipse at center, transparent 21%, rgba(0, 0, 0, 0.95) 100%);
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.wgn-trio-tile--live:hover .wgn-trio-live-veil { opacity: 0; }

/* Schriftzug "Auktion" — gleiche Stelle/Grössenordnung wie "Willkommen" auf
   der Welcome-Kachel (oben rechts, fett, weiss). */
.wgn-trio-live-tag {
  position: absolute;
  left: calc(57.3% + 20px);
  top: calc(8.4% - 2px);
  z-index: 3;
  color: #e6e6e6;
  font-weight: 900;
  -webkit-text-stroke: 0.5px #e6e6e6; /* zusätzliche Schwärzung, da reines font-weight hier nicht "dick" genug wirkt */
  font-size: clamp(0.85rem, 3.2cqw, 1.3rem);
  line-height: 1;
  white-space: nowrap;
}

/* Komplett oberhalb der Dreierreihe verankert (Bottom-Anchor) — die 3 Tiles
   bleiben darunter immer vollständig sichtbar und anwählbar. */
#wgn-trio-info {
  left: 50%;
  top: 0;
  /* --trio-extra-shift (JS-berechnet, s. positionTrioTextInfo) verschiebt das
     Animationsfenster zusätzlich nach links, damit die GESAMTE Gruppe
     (Animationsfenster + Lücke + Text-Popup rechts daneben) als Ganzes
     mittenzentriert wirkt, statt nur das Animationsfenster allein. */
  transform: translate(calc(-50% + var(--trio-extra-shift, 0px)), calc(-100% - 16px)) scale(0.95);
}
#wgn-trio-info.is-visible   { transform: translate(calc(-50% + var(--trio-extra-shift, 0px)), calc(-100% - 16px)) scale(1); }
#wgn-trio-info.is-switching { transform: translate(calc(-50% + var(--trio-extra-shift, 0px)), calc(-100% - 16px)) scale(0.93); }

/* Zweites, schlichtes Info-Popup rechts neben #wgn-trio-info — gleiche Höhe,
   halbe Breite, erscheint 2s nach dem ersten Hover und bleibt danach stehen
   (wechselt nur den Inhalt beim Hover auf ein anderes Feld). Position/Breite
   werden in JS berechnet (s. positionTrioTextInfo()), da #wgn-trio-info
   selbst responsiv breiter/schmaler wird (min/max-width-Clamp) — pixelgenaue
   JS-Messung ist robuster als ein Versuch, das per CSS-Prozentrechnung
   nachzubilden. Optik bewusst wie die Sprechblase der Success-Story-Sektion
   (helle, halbtransparente Fläche, runde Ecken, weicher Schatten). */
.wgn-trio-text-info {
  position: absolute;
  z-index: 19;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  padding: 18px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.wgn-trio-text-info.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
.wgn-trio-text-info-body {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #1a1a2e;
}
.wgn-trio-text-info-body p {
  margin: 0 0 0.7em;
}
.wgn-trio-text-info-body p:last-child { margin-bottom: 0; }
/* Rolltext-Sätze (nur "Auction live"): blenden einzeln verzögert ein. */
.wgn-trio-text-info-body p.wgn-roll-line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.wgn-trio-text-info-body p.wgn-roll-line.is-in {
  opacity: 1;
  transform: translateY(0);
}
.wgn-trio-text-info-title {
  font-weight: 700;
  font-size: 1rem;
  color: #1a1a2e;
}
/* Blaue Einleitungszeile, nur bei "Auction live" — erscheint sofort mit dem
   Titel, ohne Rolltext-Verzögerung. */
.wgn-trio-text-info-intro {
  color: #3060d0;
  font-weight: 600;
}
/* Bulleyes — gleicher runde, marken-blaue Punkt wie bei der Angebotsliste vor
   dem Lead-Formular, nur kleiner (kompakteres Popup). Punkt (::before) und
   Text (.wgn-bullet-text) blenden UNABHÄNGIG voneinander ein: der Punkt des
   NÄCHSTEN Bulleyes blinkt schon (.is-next), bevor dessen Text erscheint —
   optisches Signal, dass noch mehr folgt. Das <p> selbst bleibt immer bei
   voller Deckkraft, nur Punkt/Text haben eigene Übergänge. */
.wgn-trio-text-info-bullet {
  position: relative;
  padding-left: 18px;
}
.wgn-trio-text-info-bullet::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3060d0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.wgn-trio-text-info-bullet.is-next::before {
  opacity: 1;
  animation: wgn-bullet-blink 1s ease-in-out infinite;
}
.wgn-trio-text-info-bullet.is-in::before {
  opacity: 1;
  animation: none;
}
@keyframes wgn-bullet-blink {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.wgn-bullet-text {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.wgn-trio-text-info-bullet.is-in .wgn-bullet-text {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 780px) {
  .wgn-trio-wrap { flex-direction: column; }
  /* Kein Platz für ein zweites Popup daneben auf kleinen Screens. */
  .wgn-trio-text-info { display: none !important; }
}

/* ── WAVE-RECORDER (Belegaufnahme) ────────────────────────────────────── */

.wgn-wave-recorder {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  margin: 70px auto;
  padding: 20px 24px 18px;
  background: #28284a;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
  /* Zoom-Reveal wie Trio-Widget/Bild-Paare: schmal+klein während des Scrollens,
     auf Originalgrösse beim Sichtbarwerden. Transition hier zusammengefasst
     (filter/opacity + transform), da diese spätere Regel sonst die geerbte
     filter/opacity-Transition aus dem Monochrom-Reveal überschreiben würde. */
  transform: scale(0.78);
  transform-origin: center;
  transition: filter 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wgn-wave-recorder.is-expanded { transform: scale(1); }

/* Endlos-Scroll: Track ist 2× das Wellenmuster breit, translateX(-50%) verschiebt
   um exakt eine Musterlänge — der Loop-Neustart ist dadurch unsichtbar. */
.wgn-wave-track {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 52px;
  width: max-content;
  animation: wgn-wave-scroll 18s linear infinite;
}

.wgn-wave-bar {
  flex: 0 0 3px;
  width: 3px;
  border-radius: 1.5px;
  background: linear-gradient(180deg, #d4bc5a, #8a7530);
}

@keyframes wgn-wave-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.wgn-wave-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(212, 188, 90, 0.15);
  padding-top: 10px;
}

.wgn-wave-label-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wgn-wave-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e23b3b;
  box-shadow: 0 0 6px rgba(226, 59, 59, 0.65);
  animation: wgn-live-blink 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

.wgn-wave-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(212, 188, 90, 0.85);
}

.wgn-wave-time {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #cfcfe0;
}
.wgn-wave-date {
  letter-spacing: 0.02em;
  color: rgba(207, 207, 224, 0.65);
}
.wgn-wave-clock {
  font-family: 'SF Mono', 'Courier New', Courier, monospace;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 9px;
}

/* ── HOTSPOT CONTAINER ─────────────────────────────────────────────────── */

.wgn-hs-container {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  margin: 70px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.25);
}

.wgn-aapp-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── HOTSPOTS ──────────────────────────────────────────────────────────── */

.wgn-hs {
  position: absolute;
  z-index: 2;
  cursor: default;
  overflow: hidden; /* clip für Scan-Licht */
}

.wgn-hs-nobg {
  overflow: visible; /* kein Clip auf dem Hintergrundfeld */
}

/* ── VARIANTE B: Scan-Licht ─────────────────────────────────────────────── */

.wgn-hs:not(.wgn-hs-nobg)::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(
    to right,
    transparent            0%,
    rgba(255,255,255,0.07) 35%,
    rgba(212,188,90, 0.30) 50%,
    rgba(255,255,255,0.07) 65%,
    transparent           100%
  );
  transform: translateX(-150%) skewX(-14deg);
  pointer-events: none;
}

.wgn-hs:not(.wgn-hs-nobg):hover::before {
  animation: wgn-scan 0.60s ease-out forwards;
}

@keyframes wgn-scan {
  from { transform: translateX(-150%) skewX(-14deg); }
  to   { transform: translateX( 320%) skewX(-14deg); }
}

/* ── VARIANTE C: Ziel-Brackets ─────────────────────────────────────────── */

.wgn-b {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #d4bc5a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease,
              transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wgn-b-tl { top: 0;    left: 0;  border-right: none; border-bottom: none; transform: translate( 8px,  8px); }
.wgn-b-tr { top: 0;    right: 0; border-left:  none; border-bottom: none; transform: translate(-8px,  8px); }
.wgn-b-bl { bottom: 0; left: 0;  border-right: none; border-top:    none; transform: translate( 8px, -8px); }
.wgn-b-br { bottom: 0; right: 0; border-left:  none; border-top:    none; transform: translate(-8px, -8px); }

.wgn-hs:hover .wgn-b {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── INFO-POPUP im Programm-Fenster ────────────────────────────────────── */
/*  Programm-Fenster: left 1.05 %, top 10.11 %, w 82.43 %, h 74.20 %      */
/*  Mittelpunkt horizontal: 1.05 + 82.43/2 = 42.27 %                       */
/*  Mittelpunkt vertikal:  10.11 + 74.20/2 = 47.21 %                       */

.wgn-app-info {
  position: absolute;
  left: 42.27%;
  top: 47.21%;
  --info-shift: 0px;
  --info-shift-y: 0px;
  transform: translate(calc(-50% + var(--info-shift)), calc(-50% + var(--info-shift-y))) scale(0.95);
  width: 33%;
  min-width: 230px;
  max-width: 370px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.45);
  z-index: 20;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.20s ease, transform 0.24s ease, visibility 0.20s ease;
}

.wgn-app-info.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% + var(--info-shift)), calc(-50% + var(--info-shift-y))) scale(1);
}

/* Schnelles Fade-out beim Wechsel (überschreibt transition-Dauer) */
.wgn-app-info.is-switching {
  opacity: 0;
  transform: translate(calc(-50% + var(--info-shift)), calc(-50% + var(--info-shift-y))) scale(0.93);
  transition: opacity 0.13s ease, transform 0.13s ease;
}

/* Bildfläche – Standard (Querformat 52%) */
.wgn-app-info-img {
  width: 100%;
  height: 0;
  padding-bottom: 52%;
  background: linear-gradient(135deg, #0e0e18 0%, #1e1e38 100%);
  position: relative;
  overflow: hidden;
}

.wgn-app-info-imgel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.wgn-app-info-imgph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(212, 188, 90, 0.40);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Grosse Popup-Varianten (Scroll, Slideshow, Large, Live) */
.wgn-app-info.is-scroll,
.wgn-app-info.is-slideshow,
.wgn-app-info.is-large,
.wgn-app-info.is-live {
  width: 56%;
  min-width: 390px;
  max-width: 630px;
}

/* Large: Bild im 16:9-Format (Vorbereitung für Video) */
.wgn-app-info.is-large .wgn-app-info-img {
  height: auto;
  aspect-ratio: 16 / 9;
  padding-bottom: 0;
}

/* ── LIVE-VARIANTE (Feld 18: Programm-Fenster) ─────────────────────────── */

/* Popup-Container: kein Hintergrund, nur Schatten als Rahmen-Glow */
.wgn-app-info.is-live {
  background: transparent;
}

/* Bildfläche: transparent mit rotem Kamera-Rahmen */
.wgn-app-info.is-live .wgn-app-info-img {
  height: auto;
  aspect-ratio: 16 / 9;
  padding-bottom: 0;
  background: transparent;
  border: 2px solid #cc1111;
  box-shadow: 0 0 12px rgba(204,17,17,0.35), inset 0 0 12px rgba(204,17,17,0.10);
  position: relative;
  overflow: hidden;
  cursor: default;
}

.wgn-app-info.is-live .wgn-app-info-imgel,
.wgn-app-info.is-live .wgn-app-info-imgph { display: none !important; }

/* Textbereich: weisser Hintergrund (nur hier) */
.wgn-app-info.is-live .wgn-app-info-body {
  background: #ffffff;
  border-radius: 0 0 12px 12px;
}

/* Live-Overlay: volle Bildfläche, pointer-events aus */
.wgn-live-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Oben links: blinkender Punkt + "LIVE" */
.wgn-live-indicator {
  position: absolute;
  top: 11px;
  left: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,0.42);
  padding: 4px 10px 4px 8px;
  border-radius: 4px;
}

.wgn-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dd1111;
  flex-shrink: 0;
  animation: wgn-live-blink 1.1s ease-in-out infinite;
}

.wgn-live-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff3333;
  text-transform: uppercase;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1;
}

/* Unten rechts: Stoppuhr */
.wgn-live-timer {
  position: absolute;
  bottom: 11px;
  right: 13px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: rgba(0,0,0,0.42);
  padding: 4px 9px;
  border-radius: 4px;
  line-height: 1;
}

@keyframes wgn-live-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.08; }
}

/* ── SLIDESHOW-VARIANTE (Felder 7, 9, 10) ──────────────────────────────── */

.wgn-app-info.is-slideshow .wgn-app-info-img {
  height: auto;             /* überschreibt height:0 der Basisklasse */
  aspect-ratio: 1260 / 740; /* Popup skaliert proportional mit der Breite */
  padding-bottom: 0;
  overflow: hidden;
  background: #000;
  position: relative;
  cursor: default;
}

/* Standard-Elemente im Slideshow-Modus ausblenden */
.wgn-app-info.is-slideshow .wgn-app-info-imgel,
.wgn-app-info.is-slideshow .wgn-app-info-imgph {
  display: none !important;
}

/* Universeller Wrapper pro gezeigter Funktion (Welcome/Pause/Goodbye/Auction
   live) — ermöglicht das Überblenden ZWISCHEN beliebigen Funktionen, statt nur
   beim Wechsel in/aus "Auction live". Neuer Inhalt erscheint sofort voll
   sichtbar UNTER dem alten (z-index:1); der alte bekommt .is-leaving (z-index
   2, blendet weg) und gibt den neuen darunter frei — gleiches Muster wie der
   Bildmischer-Crossfade, vermeidet jedes Durchblitzen. Die Dauer wird per JS
   inline gesetzt (TRIO_CROSSFADE_MS), damit sie nie von der Entfernungs-
   Verzögerung abweichen kann — der hier hinterlegte Wert ist nur ein Fallback. */
.wgn-trio-content {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wgn-trio-content.is-leaving {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* Karten-Ebene (Hintergrund, volle Fläche) */
.wgn-sl-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wgn-sl-card {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0; /* JS setzt Karte 0 sofort auf 1 */
}

/* Foto-Ebene (Vordergrund, unten rechts, ¼ der Fläche) */
.wgn-sl-photos {
  position: absolute;
  bottom: 30px;
  right: 10px;
  width: 50%;
  height: 50%;
  background: #000;
  overflow: hidden;
  z-index: 2;
}

.wgn-sl-photos.is-small {
  width: 40%;
  height: 40%;
  bottom: 45px;
  right: 28px;
}

.wgn-sl-photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: wgn-photo-zoom linear infinite both;
}

.wgn-sl-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Keyframes: 3 Karten-Crossfade mit echter Überlappung
   Zykluslänge: 3 × 4.5 s = 13.5 s (unique slot = 6 s – 1.5 s Overlap)
   Fade-in  0 →  1.5 s = 0 % →  11.11 %
   Hold     1.5 →  4.5 s =  11.11 % →  33.33 %
   Fade-out 4.5 →  6.0 s =  33.33 % →  44.44 %
   Die Fade-out von Karte N überlappt mit Fade-in von Karte N+1 → kein Schwarz */
@keyframes wgn-card-fade {
  0%      { opacity: 0; }
  11.11%  { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100%    { opacity: 0; }
}

/* Keyframes: 5 Fotos mit Zoom-in + nahtlosem Loop (je 8 s Slot, Gesamt 35 s)
   Unique-Slot = 7 s (8 s – 1 s Overlap) → 5 × 7 = 35 s
   Fade-in  0 →  1 s =  0 % →  2.86 %
   Hold     1 →  7 s =  2.86 % → 20 %   (6 s reine Anzeigezeit)
   Fade-out 7 →  8 s = 20 % → 22.86 %
   Fade-out N überlappt Fade-in N+1 → kein Schwarz zwischen Fotos */
@keyframes wgn-photo-zoom {
  0%      { opacity: 0; transform: scale(1.00); }
  2.86%   { opacity: 1; transform: scale(1.00); }
  20%     { opacity: 1; transform: scale(1.08); }
  22.86%  { opacity: 0; transform: scale(1.10); }
  100%    { opacity: 0; transform: scale(1.00); }
}

/* ── TRIO 4. KACHEL "AUCTION LIVE" — bespoke Sequenz statt generischer Cards/Photos-Slideshow ──
   Ablauf: Crossfade auf Auktionssaal-Foto (Logo+Titel der vorherigen Kachel bleiben sichtbar) →
   Titel blendet bei 5s aus → Zoomfahrt (6s, sanft) + Logo blendet/zoomt aus (4s) →
   Bauchbinde faded 4s ein/stehen/aus → 1s später Lot-Grafik ein (bleibt stehen). */
.wgn-trio-thumb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(212, 188, 90, 0.55);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  padding: 10px;
}
.wgn-trio-thumb-ph code { font-style: normal; font-size: 9px; color: rgba(212, 188, 90, 0.4); }

.wgn-trio-live {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  overflow: hidden;
  container-type: inline-size; /* für cqw-Einheiten der Titel-Schrift */
}

/* Foto-Ebene: sofort sichtbar (die Überblendung von der vorherigen Funktion
   übernimmt der äussere .wgn-trio-content-Wrapper, s. retireTrioContent),
   später reine Zoomfahrt (transform). */
.wgn-trio-live-photo,
.wgn-trio-live-photo-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: scale(1);
  transform-origin: center center;
}
.wgn-trio-live-photo-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(212, 188, 90, 0.55);
  font-size: 13px;
  line-height: 1.7;
  background: #0e0e18;
}
.wgn-trio-live-photo-ph code { font-style: normal; font-size: 11px; color: rgba(212, 188, 90, 0.4); }
/* Zoomfahrt: eigene, lange Transition NUR für transform — sanftes An-/Abschwellen
   (gleiche symmetrische Kurve wie beim Logo-Einflug der Erfolgsstory-Sektion). */
.wgn-trio-live.is-zooming .wgn-trio-live-photo,
.wgn-trio-live.is-zooming .wgn-trio-live-photo-ph {
  /* Längere Dauer (9s statt 6s) bei gleicher Zielskalierung senkt die
     Höchstgeschwindigkeit in der Mitte der Bewegung — wirkt ruhiger. */
  transition: transform 9s cubic-bezier(0.35, 0, 0.65, 1);
  transform: scale(2.3);
}

/* Logo: bleibt von der vorherigen Kachel sichtbar stehen, blendet bei der Zoomfahrt
   mit Zoom-out (Verkleinern) weg. */
.wgn-trio-live-logo {
  position: absolute;
  left: 3.8%;
  top: 5.8%;
  width: 17.5%;
  z-index: 3;
  opacity: 0.86;
  transform: scale(1);
  transform-origin: center center;
  transition: opacity 4s ease, transform 4s ease;
}
.wgn-trio-live.is-zooming .wgn-trio-live-logo {
  opacity: 0;
  transform: scale(0.6);
}

/* Lot-Titel ("Schweizer Kunst"): wie das Logo direkt aus der Originalgrafik
   ausgeschnitten (gleiche Technik: Bbox vermessen, schwarzer Hintergrund per
   Flood-Fill transparent gemacht) statt mit CSS-Text nachgebaut — ein Font
   trifft Schriftart/-breite nie exakt genug. Exakt an derselben Stelle wie im
   Original (unten links). Blendet nach 2s aus. */
.wgn-trio-live-title {
  position: absolute;
  left: 3.97%;
  top: 79.19%;
  width: 44.37%;
  z-index: 3;
  opacity: 1;
  transition: opacity 2.5s ease;
}
.wgn-trio-live.is-title-out .wgn-trio-live-title { opacity: 0; }

/* Bauchbinde: blendet von unten ein, steht, blendet wieder aus. */
.wgn-trio-live-bauchbinde,
.wgn-trio-live-bauchbinde-ph {
  position: absolute;
  left: 50%;
  bottom: calc(6% + 20px);
  width: 43.5%;
  max-width: 43.65%;
  z-index: 4;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.wgn-trio-live-bauchbinde-ph {
  height: 13.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(212, 188, 90, 0.6);
  font-size: 11px;
  line-height: 1.6;
  background: rgba(20, 20, 30, 0.85);
  border-radius: 6px;
}
.wgn-trio-live-bauchbinde-ph code { font-style: normal; font-size: 9px; color: rgba(212, 188, 90, 0.45); }
.wgn-trio-live.is-bb-in .wgn-trio-live-bauchbinde,
.wgn-trio-live.is-bb-in .wgn-trio-live-bauchbinde-ph {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Lot-Grafik: blendet oben rechts ein und bleibt stehen. */
.wgn-trio-live-lot,
.wgn-trio-live-lot-ph {
  position: absolute;
  right: calc(4% - 10px);
  top: 5%;
  width: 11%;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.wgn-trio-live-lot-ph {
  aspect-ratio: 280 / 130;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(212, 188, 90, 0.6);
  font-size: 9.5px;
  line-height: 1.5;
  background: rgba(20, 20, 30, 0.85);
  border-radius: 6px;
}
.wgn-trio-live-lot-ph code { font-style: normal; font-size: 8px; color: rgba(212, 188, 90, 0.45); }
.wgn-trio-live.is-lot-in .wgn-trio-live-lot,
.wgn-trio-live.is-lot-in .wgn-trio-live-lot-ph { opacity: 1; }

/* Bildfläche – Scroll-Variante (hohes Bild, z.B. Feld 5) */
.wgn-app-info.is-scroll .wgn-app-info-img {
  height: 370px;
  padding-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;   /* Firefox */
  cursor: ns-resize;
}
.wgn-app-info.is-scroll .wgn-app-info-img::-webkit-scrollbar {
  display: none;
}
.wgn-app-info.is-scroll .wgn-app-info-imgel {
  position: static;
  inset: unset;
  width: 100%;
  height: auto;
  object-fit: unset;
  display: block;
}

/* Textbereich */
.wgn-app-info-body {
  padding: 16px 18px 18px;
}

.wgn-app-info-title {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #d4bc5a;
  margin-bottom: 6px;
}

.wgn-app-info-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #333;
}

/* ── DISCOVERY PING ──────────────────────────────────────────────────────── */

/* Hotspot: Zoom-Puls wenn pingt */
.wgn-hs.is-scan-ping {
  animation: wgn-hs-ping 0.45s ease-out forwards;
}

@keyframes wgn-hs-ping {
  0%   { transform: scale(1.00); }
  28%  { transform: scale(1.06); }
  100% { transform: scale(1.00); }
}

/* Dicke leuchtende Ecken beim Ping */
.wgn-hs.is-scan-ping .wgn-b {
  opacity: 1;
  transform: translate(0, 0);
  border-width: 3px;
  filter: drop-shadow(0 0 5px rgba(212,188,90,0.95));
}

/* Scan-Licht auch beim Ping */
.wgn-hs.is-scan-ping:not(.wgn-hs-nobg)::before {
  animation: wgn-scan 0.60s ease-out forwards;
}

/* Discover-Chip — Popup-Stil, zentriert im Programm-Fenster */
.wgn-discover-chip {
  position: absolute;
  left: 42.27%;
  top: calc(47.21% + 30px);
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.45);
  min-width: 300px;
  max-width: 400px;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  animation: wgn-chip-in 1.8s ease forwards, wgn-chip-pulse 3s ease-in-out 1.8s infinite;
}

.wgn-disc-body {
  padding: 16px 20px 18px;
  text-align: left;
}

.wgn-disc-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
}

.wgn-disc-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d4bc5a;
  flex-shrink: 0;
  animation: wgn-live-blink 1.6s ease-in-out infinite;
}

.wgn-disc-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #d4bc5a;
  line-height: 1;
}

.wgn-disc-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #333;
}

/* Aktueller Hotspot-Titel — Typewriter, erscheint unter dem Text */
.wgn-disc-current {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(212,188,90,0.28);
}

.wgn-disc-current-title {
  display: block;
  min-height: 44px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: #333;
  text-align: left;
  line-height: 1.65;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wgn-disc-current.is-visible .wgn-disc-current-title {
  opacity: 1;
}

@keyframes wgn-chip-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes wgn-chip-pulse {
  0%, 100% { box-shadow: 0 12px 50px rgba(0,0,0,0.45), 0 0 0 0   rgba(212,188,90,0); }
  50%       { box-shadow: 0 12px 50px rgba(0,0,0,0.45), 0 0 0 5px rgba(212,188,90,0.18); }
}

.wgn-discover-chip.is-dissolving {
  animation: wgn-chip-out 0.6s ease forwards !important;
}

@keyframes wgn-chip-out {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to   { opacity: 0; transform: translate(-50%, calc(-50% - 8px)); }
}

/* ── SEITENNAVIGATION (rechter Rand, läuft mit) ───────────────────────── */

.wgn-aapp-sidenav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
}
.wgn-aapp-sidenav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-right: 2px solid #e4e4ec;
}
.wgn-aapp-sidenav li { margin: 0; }
.wgn-aapp-sidenav a {
  display: block;
  position: relative;
  padding: 7px 20px 7px 0;
  font-size: 0.76rem;
  color: #9a9aa8;
  text-decoration: none;
  text-align: right;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}
.wgn-aapp-sidenav a::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: #3060d0;
  transition: height 0.25s ease;
}
.wgn-aapp-sidenav a:hover { color: #3060d0; }
.wgn-aapp-sidenav a.is-active {
  color: #3060d0;
  font-weight: 700;
}
.wgn-aapp-sidenav a.is-active::after { height: 18px; }

@media (max-width: 1340px) {
  .wgn-aapp-sidenav { display: none; }
}

/* ── KONTAKTFORMULAR ───────────────────────────────────────────────────── */

#sec-lead {
  margin-bottom: 70px;
}

.wgn-aapp-wrap .wgn-lead-offer-intro {
  font-weight: 700;
  color: #1a1a2e;
  margin-top: 56px;
  margin-bottom: 0;
}

/* Gleicher luftiger Abstand wie bei der Angebotspalette-Einleitung oben,
   jetzt für den Kontakt-Satz NACH den Bulleyes. */
.wgn-aapp-wrap .wgn-lead-contact-prompt {
  margin-top: 56px;
  margin-bottom: 0;
}

/* Eigene, luftige Bullet-Liste fürs Angebot — grosszügiger Zeilenabstand
   zwischen den Punkten statt der knappen Standard-Aufzählung, runde
   Marken-blaue Punkte statt der Browser-Default-Bullets. */
.wgn-lead-offer-list {
  list-style: none;
  max-width: 760px;
  margin: 22px auto 44px;
  padding: 0;
}
.wgn-lead-offer-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 20px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #555;
}
.wgn-lead-offer-list li:last-child { margin-bottom: 0; }
.wgn-lead-offer-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3060d0;
  /* Start gedimmt — wird erst per .is-lit (JS, gestaffelt von oben nach
     unten) "aufgeleuchtet", siehe @keyframes wgn-bullet-light. */
  opacity: 0.32;
  transform: scale(0.6);
  box-shadow: 0 0 0 4px rgba(48, 96, 208, 0.14);
}
@keyframes wgn-bullet-light {
  0%   { opacity: 0.32; transform: scale(0.6); box-shadow: 0 0 0 4px rgba(48, 96, 208, 0.14); }
  55%  { opacity: 1;    transform: scale(1.3); box-shadow: 0 0 10px 3px rgba(48, 96, 208, 0.65); }
  100% { opacity: 1;    transform: scale(1);   box-shadow: 0 0 0 4px rgba(48, 96, 208, 0.14); }
}
.wgn-lead-offer-list li.is-lit::before {
  animation: wgn-bullet-light 0.6s ease forwards;
}

.wgn-lead-form {
  max-width: 760px;
  margin: 70px auto 0;
}

.wgn-lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-bottom: 8px;
}

.wgn-lead-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wgn-lead-field--full { grid-column: 1 / -1; }

.wgn-lead-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.01em;
}

.wgn-lead-field input,
.wgn-lead-field select,
.wgn-lead-field textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 14px;
  border: 1px solid #d8d8e0;
  border-radius: 8px;
  background: #fff;
  color: #1a1a2e;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wgn-lead-field input:focus,
.wgn-lead-field select:focus,
.wgn-lead-field textarea:focus {
  outline: none;
  border-color: #3060d0;
  box-shadow: 0 0 0 3px rgba(48, 96, 208, 0.18);
}
.wgn-lead-field textarea { resize: vertical; min-height: 90px; }

.wgn-lead-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 28px 0 8px;
  padding: 18px 20px;
  background: #f7f7fa;
  border-radius: 12px;
}
.wgn-lead-checks-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-right: 4px;
}
.wgn-lead-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #444;
}
.wgn-lead-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3060d0;
  cursor: pointer;
}

.wgn-lead-extra {
  margin: 8px 0 20px;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #ececf2;
  border-radius: 12px;
  overflow: hidden;
  animation: wgn-lead-extra-in 0.35s ease;
}
@keyframes wgn-lead-extra-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wgn-lead-submit-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}

.wgn-lead-submit {
  background: linear-gradient(135deg, #3060d0, #1c3872);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 36px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 20px rgba(48, 96, 208, 0.35);
}
.wgn-lead-submit:hover  { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(48, 96, 208, 0.45); }
.wgn-lead-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.wgn-lead-status {
  font-size: 0.88rem;
  font-weight: 600;
}
.wgn-lead-status.is-success { color: #2e7d4f; }
.wgn-lead-status.is-error   { color: #c0392b; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .wgn-aapp-wrap {
    padding: 0 0 40px;
  }

  .wgn-app-info {
    width: 55%;
    min-width: 180px;
  }

  .wgn-app-info-body {
    padding: 12px 14px 14px;
  }

  .wgn-app-info-text {
    font-size: 11.5px;
  }

  .wgn-lead-grid {
    grid-template-columns: 1fr;
  }

  .wgn-lead-checks {
    flex-direction: column;
    align-items: flex-start;
  }
}