/* =====================================================================
   Wish To Rise — Polish-Ebene (additiv, nicht-destruktiv)
   Lädt NACH wtr-local-overrides.css. Verbessert behutsam:
   Buttons, Formular, fast-schwarzer Hintergrund mit Brand-Glows,
   Scrollbar, softer Cursor-Glow und Logo-Marquee.
   Brand: Midnight #05070A, Cyan #30B8D0, Teal #38C0C0, Motion #28B0E8, Fresh #40C0B8
   ===================================================================== */

:root{
  --wtr-cyan:#30B8D0;
  --wtr-teal:#38C0C0;
  --wtr-motion:#28B0E8;
  --wtr-fresh:#40C0B8;
  --wtr-cloud:#F5F7FA;
}

/* ---------------------------------------------------------------------
   1) BUTTONS — dunkle Glas-Basis + Brand-Akzent, weicher Hover-Glow,
      ruhiges Anheben. Text bleibt IMMER hell (nie schwarz) beim Hover.
   --------------------------------------------------------------------- */
a.elementor-button,
button.elementor-button,
.elementor-button-wrapper .elementor-button{
  position:relative;
  border-radius:12px !important;
  border:1px solid rgba(48,184,208,.28) !important;
  background-image:linear-gradient(180deg,rgba(48,184,208,.16),rgba(255,255,255,.02)) !important;
  background-color:rgba(10,14,19,.55) !important;
  box-shadow:0 8px 24px -14px rgba(40,176,232,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition:transform .35s cubic-bezier(.16,1,.3,1),
             box-shadow .35s ease,
             border-color .3s ease,
             background-color .3s ease !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  overflow:hidden;
}
/* sanfter Lichtreflex, der über den Button läuft */
a.elementor-button::after,
button.elementor-button::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

/* HOVER — Glas bleibt dunkel, Text + Icon bleiben hell (kein Schwarz!) */
body a.elementor-button:hover,
body button.elementor-button:hover,
body a.elementor-button:focus,
body button.elementor-button:focus,
body .elementor-button-wrapper .elementor-button:hover{
  transform:translateY(-2px) scale(1.02) !important;
  border-color:rgba(48,184,208,.7) !important;
  background-color:rgba(14,20,27,.82) !important;
  background-image:linear-gradient(180deg,rgba(48,184,208,.24),rgba(255,255,255,.02)) !important;
  box-shadow:0 16px 40px -14px rgba(40,176,232,.9), inset 0 1px 0 rgba(255,255,255,.1) !important;
  color:var(--wtr-cloud) !important;
  -webkit-text-fill-color:var(--wtr-cloud) !important;
}
/* auch verschachtelte Textknoten + Icons hell halten */
body .elementor-button:hover *,
body .elementor-button:focus *{
  color:var(--wtr-cloud) !important;
  -webkit-text-fill-color:var(--wtr-cloud) !important;
}
body a.elementor-button:hover::after,
body button.elementor-button:hover::after{transform:translateX(120%)}
body a.elementor-button:active,
body button.elementor-button:active{transform:translateY(0) scale(.99) !important}

/* SVG-Pfeil/Icon im Button: Cyan-Akzent beim Hover */
.elementor-button .cls-1{transition:fill .3s ease}
body .elementor-button:hover .cls-1{fill:var(--wtr-cyan) !important}

/* ---------------------------------------------------------------------
   1b) KONTAKTFORMULAR — Datenschutz-Link + Submit-Button in Brand-Farben
       (Theme-Default färbte Links #cc3366 / rötlich)
   --------------------------------------------------------------------- */
.wtr-consent a,
.wtr-form-actions a,
.wtr-contact-section a:not(.elementor-button){
  color:var(--wtr-cyan) !important;
  text-decoration:underline;
  text-decoration-color:rgba(48,184,208,.45);
  text-underline-offset:3px;
  transition:color .25s ease, text-decoration-color .25s ease;
}
.wtr-consent a:hover,
.wtr-form-actions a:hover,
.wtr-contact-section a:not(.elementor-button):hover{
  color:var(--wtr-fresh) !important;
  text-decoration-color:var(--wtr-fresh);
}

.wtr-contact-form button[type=submit]{
  border:1px solid rgba(48,184,208,.4) !important;
  background:linear-gradient(180deg,rgba(48,184,208,.2),rgba(255,255,255,.02)), rgba(10,14,19,.72) !important;
  color:var(--wtr-cloud) !important;
  box-shadow:0 14px 38px -12px rgba(40,176,232,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.wtr-contact-form button[type=submit]:hover{
  border-color:rgba(48,184,208,.75) !important;
  background:linear-gradient(180deg,rgba(48,184,208,.3),rgba(255,255,255,.03)), rgba(14,20,27,.85) !important;
  box-shadow:0 20px 52px -12px rgba(40,176,232,.85), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.wtr-contact-form button[type=submit]:disabled{
  opacity:.6;
  cursor:wait;
}

/* ---------------------------------------------------------------------
   2) FORMULAR — sauberere Felder + Cyan-Fokus
   --------------------------------------------------------------------- */
input[type=text],input[type=email],input[type=tel],input[type=date],
select,textarea{
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease !important;
}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,
input[type=date]:focus,select:focus,textarea:focus{
  border-color:var(--wtr-cyan) !important;
  box-shadow:0 0 0 3px rgba(48,184,208,.16) !important;
  outline:none !important;
}

/* ---------------------------------------------------------------------
   3) HINTERGRUND — durchgehend echtes Schwarz, ohne Naht. Die bläulichen
      Panels werden transparent, das schwarze html scheint einheitlich
      durch. Ein einziger sehr softer Brand-Glow sitzt nur oben am Hero
      und blendet nach unten komplett aus -> ab Abschnitt 2 reines Schwarz.
   --------------------------------------------------------------------- */
html{background-color:#000 !important}
body{background-color:#000 !important}
.wtr-darken{background-color:transparent !important}

.wtr-bg-aura{
  position:absolute;top:0;left:0;width:100%;height:130vh;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 46% at 50% 8%,  rgba(40,176,232,.10), transparent 62%),
    radial-gradient(44% 38% at 86% 2%,  rgba(56,192,192,.05), transparent 66%);
  -webkit-mask-image:linear-gradient(to bottom, #000 48%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 48%, transparent 92%);
}

/* Logo-Strip komplett von Rand zu Rand (aus der 1000px-Box ausbrechen)
   + etwas Abstand nach oben zum Text "Vertrauen von ..." */
.wtr-fullbleed{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:2.6rem !important;
}

/* ---------------------------------------------------------------------
   4) SCROLLBAR in Brand-Farbe (dezent)
   --------------------------------------------------------------------- */
@media (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:rgba(48,184,208,.45) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,rgba(40,176,232,.55),rgba(64,192,184,.55));
    border-radius:20px;border:2px solid rgba(5,7,10,.6);
  }
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(40,176,232,.85),rgba(64,192,184,.85))}
}

/* ---------------------------------------------------------------------
   5) CURSOR — ganz softer Brand-Glow (folgt dem Mauszeiger)
   --------------------------------------------------------------------- */
.wtr-cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;margin:-210px 0 0 -210px;
  border-radius:50%;pointer-events:none;z-index:9998;
  background:radial-gradient(circle,
    rgba(48,184,208,.11) 0%,
    rgba(56,192,192,.05) 42%,
    transparent 70%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .55s ease;
  will-change:transform;
}
@media (hover:none),(pointer:coarse){ .wtr-cursor-glow{display:none !important} }
@media (prefers-reduced-motion:reduce){
  .wtr-cursor-glow{display:none !important}
  a.elementor-button::after,button.elementor-button::after{display:none}
}

/* ---------------------------------------------------------------------
   6) LOGO-MARQUEE — langsam, komplett rechts->links, von Anfang an
      voll, nahtloser Loop. Slides werden in JS verdoppelt; hier
      ersetzen wir die Swiper-Animation durch eine saubere -50%-Schleife.
   --------------------------------------------------------------------- */
@keyframes wtr-logo-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.elementor-main-swiper .swiper-wrapper.wtr-logo-marquee,
.swiper .swiper-wrapper.wtr-logo-marquee,
.swiper-wrapper.wtr-logo-marquee{
  animation-name:wtr-logo-marquee !important;
  animation-duration:55s !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
  animation-direction:normal !important;
  animation-delay:0s !important;
  transition:none !important;
  width:max-content !important;
}
.swiper-wrapper.wtr-logo-marquee:hover{animation-play-state:paused !important}

/* ---------------------------------------------------------------------
   7) TIMELINE — Hintergrundbilder heller/sichtbarer, aber lokal dunkler
      um die Schrift herum (Lesbarkeit).
   --------------------------------------------------------------------- */
.wtr-timeline-section .wtr-process-card-bg{
  filter:brightness(.82) saturate(1.05) contrast(1.03) !important;
  opacity:.93 !important;
}
/* lokaler dunkler Halo direkt um Text + Zahl */
.wtr-process-card > span,
.wtr-process-card > h3,
.wtr-process-card > p{
  text-shadow:0 1px 3px rgba(0,0,0,.92), 0 2px 18px rgba(0,0,0,.7) !important;
}

/* ---------------------------------------------------------------------
   8) CONTENT-SYSTEM — Portfolio-Bilderwand (scattered Collage)
      Viele Bilder, bewusst "durcheinander", voll sichtbar, weiche Kanten.
      Hover hebt das jeweilige Bild gerade & nach vorne.
   --------------------------------------------------------------------- */
.wtr-asset-system__visual{
  min-height:clamp(440px, 50vw, 660px) !important;
}

/* Wand spannt das ganze Band, weiche Kanten lassen Bilder ins Schwarz auslaufen */
.wtr-asset-system__stack.wtr-portfolio-wall{
  position:absolute !important;
  inset:0 !important;
  left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  transform:none !important;
  z-index:2;
  pointer-events:none;
  overflow:visible;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Kachel-Basis: feste Größe, frei positioniert, voll sichtbar */
.wtr-portfolio-wall .wtr-asset-system__stack-img{
  position:absolute !important;
  inset:auto !important;
  left:var(--x) !important;
  top:var(--y) !important;
  width:var(--w, 168px) !important;
  height:auto !important;
  aspect-ratio:var(--ar, 4 / 5) !important;
  object-fit:cover !important;
  opacity:1 !important;
  filter:brightness(1.08) saturate(1.08) contrast(1.03) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:16px !important;
  box-shadow:0 20px 54px rgba(0,0,0,.5) !important;
  transform:rotate(var(--r, 0deg)) !important;
  transform-origin:center !important;
  pointer-events:auto;
  transition:transform .5s cubic-bezier(.18,.86,.22,1),
             box-shadow .5s ease, filter .5s ease, border-color .4s ease !important;
  will-change:transform;
}

/* Hover: gerade richten, anheben, nach vorne, Brand-Rand */
.wtr-portfolio-wall .wtr-asset-system__stack-img:hover{
  transform:rotate(0deg) scale(1.09) !important;
  z-index:60 !important;
  filter:brightness(1.14) saturate(1.14) contrast(1.04) !important;
  border-color:rgba(48,184,208,.6) !important;
  box-shadow:0 34px 80px rgba(0,0,0,.62),
             0 0 0 1px rgba(48,184,208,.5),
             0 0 40px -6px rgba(40,176,232,.55) !important;
}

/* Streuung: 13 Bilder (jedes einmal), gleichmäßig über die volle Breite.
   left(--x) / top(--y) in %, Breite(--w), Rotation(--r), Seitenv.(--ar) */
.wtr-asset-system__stack-img--one     { --x:1%;   --y:5%;  --r:-7deg; --w:clamp(120px,13vw,180px); --ar:4/5; }
.wtr-asset-system__stack-img--two     { --x:4%;   --y:40%; --r:5deg;  --w:clamp(130px,14vw,190px); --ar:1/1; }
.wtr-asset-system__stack-img--three   { --x:14%;  --y:66%; --r:-6deg; --w:clamp(105px,11vw,150px); --ar:4/5; }
.wtr-asset-system__stack-img--four    { --x:18%;  --y:6%;  --r:8deg;  --w:clamp(120px,13vw,175px); --ar:3/4; }
.wtr-asset-system__stack-img--five    { --x:24%;  --y:38%; --r:-5deg; --w:clamp(135px,15vw,200px); --ar:4/5; }
.wtr-asset-system__stack-img--six     { --x:36%;  --y:12%; --r:4deg;  --w:clamp(120px,13vw,170px); --ar:1/1; }
.wtr-asset-system__stack-img--seven   { --x:34%;  --y:60%; --r:9deg;  --w:clamp(105px,11vw,150px); --ar:4/5; }
.wtr-asset-system__stack-img--eight   { --x:48%;  --y:4%;  --r:-5deg; --w:clamp(120px,13vw,175px); --ar:4/5; }
.wtr-asset-system__stack-img--nine    { --x:46%;  --y:40%; --r:7deg;  --w:clamp(135px,15vw,195px); --ar:3/4; }
.wtr-asset-system__stack-img--ten     { --x:63%;  --y:14%; --r:5deg;  --w:clamp(125px,14vw,185px); --ar:4/5; }
.wtr-asset-system__stack-img--eleven  { --x:58%;  --y:54%; --r:-4deg; --w:clamp(115px,12vw,165px); --ar:1/1; }
.wtr-asset-system__stack-img--twelve  { --x:76%;  --y:50%; --r:-6deg; --w:clamp(135px,15vw,195px); --ar:4/5; }
.wtr-asset-system__stack-img--thirteen{ --x:80%;  --y:8%;  --r:8deg;  --w:clamp(110px,12vw,160px); --ar:4/5; }

/* Mobile: aus dem Streu-Modus ein sauberes, sichtbares Portfolio-Grid */
@media (max-width:767px){
  .wtr-asset-system__visual{ min-height:auto !important; }
  .wtr-asset-system__stack.wtr-portfolio-wall{
    display:grid !important;
    position:relative !important;
    inset:auto !important;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    height:auto !important;
    width:100% !important;
    margin-top:8px;
    pointer-events:auto;
    -webkit-mask-image:none; mask-image:none;
  }
  .wtr-portfolio-wall .wtr-asset-system__stack-img{
    position:relative !important;
    left:auto !important; top:auto !important;
    width:100% !important;
    aspect-ratio:1/1 !important;
    transform:none !important;
    border-radius:12px !important;
    box-shadow:0 10px 24px rgba(0,0,0,.4) !important;
  }
  /* 13 Bilder -> 13. raus, damit letzte Reihe volle 3er bleibt (nur Mobile) */
  .wtr-portfolio-wall .wtr-asset-system__stack-img--thirteen{ display:none !important; }
}

/* ---------------------------------------------------------------------
   12) MOBILES BURGER-MENÜ — eigenes Vollbreiten-Panel (in wtr-polish.js
       gebaut, da Elementors Dropdown per transform:scaleY(0) kollabiert)
   --------------------------------------------------------------------- */
.wtr-mobile-menu{
  position:fixed;
  top:64px; left:0; right:0;
  width:100vw;
  max-height:78vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  margin:0;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background:rgba(7,10,15,.97);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(48,184,208,.28);
  box-shadow:0 28px 64px rgba(0,0,0,.6);
  z-index:9990;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
  pointer-events:none;
}
.wtr-mobile-menu.wtr-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.wtr-mobile-menu__item{
  display:block;
  text-align:center;
  font-family:"General Sans", Sans-serif;
  font-size:19px;
  font-weight:600;
  letter-spacing:-0.01em;
  padding:17px 24px;
  color:var(--wtr-cloud);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.wtr-mobile-menu__item:last-child{ border-bottom:0; }
.wtr-mobile-menu__item:hover,
.wtr-mobile-menu__item:active{
  color:var(--wtr-cyan);
  background:rgba(48,184,208,.08);
}
/* Burger-Icon: aktiver Zustand dezent hervorheben */
.elementor-menu-toggle.elementor-active{ color:var(--wtr-cyan) !important; }
/* Body-Scroll sperren, solange Menü offen */
body.wtr-menu-is-open{ overflow:hidden !important; }
/* nur auf Desktop sicher ausgeblendet (Burger erscheint eh nur mobil/tablet) */
@media (min-width:1025px){ .wtr-mobile-menu{ display:none !important; } }
/* Elementors eigenes (kaputtes) Dropdown auf Mobile/Tablet komplett aus,
   da wir unser eigenes Panel nutzen — verhindert den Rest oben rechts. */
@media (max-width:1024px){
  .elementor-location-header .elementor-nav-menu--dropdown{ display:none !important; }
}

/* ---------------------------------------------------------------------
   11) MOBILE-HERO — Lesbarkeit: dunklerer Video-Scrim + Text-Schatten,
       damit die weiße Headline auf hellem Video klar lesbar ist.
   --------------------------------------------------------------------- */
@media (max-width:767px){
  /* Hero-Video etwas stärker abdunkeln */
  .elementor-element-51b29fb .elementor-background-video-hosted{
    filter:brightness(.55) blur(4px) !important;
  }
  /* Dunkler Verlauf direkt hinter dem Hero-Text */
  .elementor-element-51b29fb > .e-con-inner::before{
    content:"";
    position:absolute; inset:0; z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg,
      rgba(3,5,9,.55) 0%, rgba(3,5,9,.32) 38%,
      rgba(3,5,9,.5) 72%, rgba(3,5,9,.78) 100%);
  }
  /* Hero-Texte über dem Scrim + weicher Schatten für Kontrast */
  .elementor-element-51b29fb .elementor-element-56e7032{ position:relative; z-index:2; }
  .elementor-element-abe5e79 h1,
  .elementor-element-2c986b6 p{
    text-shadow:0 2px 10px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.85) !important;
  }
}

/* ---------------------------------------------------------------------
   10) REVEAL-FALLBACK — falls GSAP/ScrollTrigger (v.a. mobil mit Lenis)
       die fade-in-Elemente nicht einblendet, machen wir sie sichtbar.
       Wird per JS nur aktiviert, wenn der Original-Reveal versagt.
   --------------------------------------------------------------------- */
.wtr-reveal-heal .fade-in-up-animation,
.wtr-reveal-heal .fade-in,
.wtr-reveal-heal .fade-in-up-hero,
.wtr-reveal-heal .fade-in-hero,
.wtr-reveal-heal .header-animated,
.wtr-reveal-heal .header-line-animation,
.fade-in-up-animation.wtr-shown,
.fade-in.wtr-shown,
.fade-in-up-hero.wtr-shown,
.fade-in-hero.wtr-shown,
.header-animated.wtr-shown,
.header-line-animation.wtr-shown{
  opacity:1 !important;
  transform:none !important;
  translate:none !important;
  transition:opacity .6s ease, transform .6s ease !important;
}
/* SplitType-Spans (Wörter/Zeichen/Zeilen) der Headlines mit einblenden */
.wtr-shown .word, .wtr-shown .char, .wtr-shown .line,
.wtr-reveal-heal .word, .wtr-reveal-heal .char, .wtr-reveal-heal .line{
  opacity:1 !important;
  transform:none !important;
  translate:none !important;
}
/* Startzustand vor dem Einblenden: leicht abgesenkt + unsichtbar.
   .wtr-shown (mit !important) übernimmt dann -> sanftes Hochgleiten. */
.wtr-prep:not(.wtr-shown){
  opacity:0;
  transform:translateY(28px);
}

/* ---------------------------------------------------------------------
   9) BILDSCHUTZ — Bilder nicht ziehbar / nicht per Rechtsklick speicherbar
      (gilt für <img>, Hintergrundbilder, Logos, Portfolio-Kacheln).
      Verhindert das gängige Drag-auf-Desktop + Markieren; der harte Stop
      (contextmenu / dragstart) sitzt zusätzlich in wtr-polish.js.
   --------------------------------------------------------------------- */
img,
picture,
svg,
video,
[data-bg],
.elementor-carousel-image,
.wtr-asset-system__stack-img,
.wtr-process-card-bg,
[style*="background-image"]{
  -webkit-user-drag:none !important;
  -khtml-user-drag:none !important;
  -moz-user-drag:none !important;
  -o-user-drag:none !important;
  user-drag:none !important;
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important; /* iOS: Bild-per-Longpress-Speichern aus */
}

/* ---------------------------------------------------------------------
   13) MOBILE-FEINSCHLIFF — Abstände, Case-Zahlen, Footer
   --------------------------------------------------------------------- */
@media (max-width:767px){
  /* (3) Output-Karten: negativen Top-Margin aufheben -> Luft zum Intro-Text */
  .wtr-day-output__map{ margin-top:34px !important; }

  /* (5) Case-Study: die zwei Zahlen je Karte NEBENEINANDER statt untereinander */
  .wtr-case-stat-row article{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    column-gap:14px !important;
    row-gap:0 !important;
    align-items:start !important;
    min-height:0 !important;
    padding:20px !important;
  }
  .wtr-case-stat-row article > span{
    grid-column:1 / -1 !important;
    min-height:0 !important;
    margin-bottom:10px !important;
  }
  .wtr-case-stat-row article > div{ margin-top:6px !important; }
  .wtr-case-stat-row strong{ font-size:clamp(26px,8vw,38px) !important; }
  /* dekorativer Streifen unten raus -> ruhiger */
  .wtr-case-stat-row article::after{ display:none !important; }
  /* (5b) gleicher Abstand zu den Rändern */
  .wtr-case-stat-row{ padding-left:0 !important; padding-right:0 !important; }

  /* (6) Footer mittig statt linksbündig */
  .wtr-legal-footer__inner,
  .wtr-legal-footer nav{
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .wtr-legal-footer nav{ flex-wrap:wrap !important; }

  /* (4) Asset-Library-Flyer: die zwei Bilder fliegen in einer Endlos-
     Animation aus dem "Asset Library"-Ordner (unten links) hoch zu den
     Plattform-Karten Instagram/TikTok (oben rechts) und faden dort aus.
     Die scrollgetriebene Desktop-Logik wird hier von der CSS-Animation
     überstimmt (Animation > normale Deklaration). */
  .wtr-content-flyer{
    left:9% !important; right:auto !important;
    top:64% !important; bottom:auto !important;
    width:92px !important;
    transition:none !important;
    animation:wtr-fly-to-instagram 7.5s ease-in-out infinite;
  }
  .wtr-content-flyer--two{
    left:26% !important;
    top:68% !important;
    animation:wtr-fly-to-tiktok 7.5s ease-in-out 1.2s infinite;
  }
}
@keyframes wtr-fly-to-instagram{
  0%   { transform:translate(0,0) rotate(-9deg) scale(.96); opacity:0; }
  10%  { opacity:1; }
  58%  { opacity:1; }
  82%  { transform:translate(43vw,-300px) rotate(2deg) scale(.5); opacity:0; }
  100% { transform:translate(43vw,-300px) rotate(2deg) scale(.5); opacity:0; }
}
@keyframes wtr-fly-to-tiktok{
  0%   { transform:translate(0,0) rotate(8deg) scale(.96); opacity:0; }
  10%  { opacity:1; }
  58%  { opacity:1; }
  82%  { transform:translate(38vw,-150px) rotate(-2deg) scale(.5); opacity:0; }
  100% { transform:translate(38vw,-150px) rotate(-2deg) scale(.5); opacity:0; }
}

/* ---------------------------------------------------------------------
   14) VIRAL-CASE — Rugby Deutschland Beweis-Sektion (Phone-Screenshots)
   --------------------------------------------------------------------- */
.wtr-viral-section{ padding:clamp(72px,8vw,120px) 20px; }
.wtr-viral-layout{
  display:grid; grid-template-columns:minmax(320px,.9fr) minmax(340px,1fr);
  gap:clamp(32px,6vw,80px); align-items:center;
  width:min(1200px,100%); margin:0 auto;
}
.wtr-viral-copy h2{
  margin:0 0 26px; color:#fff; font-family:"General Sans",Sans-serif;
  font-size:clamp(34px,4.6vw,54px); font-weight:600; line-height:1.08em; letter-spacing:-0.03em;
}
.wtr-viral-stat{ margin:0 0 20px; }
.wtr-viral-stat span{
  display:block; color:rgba(255,255,255,.55); font-size:14px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px;
}
.wtr-viral-stat strong{
  color:var(--wtr-cyan); font-family:"General Sans",Sans-serif;
  font-size:clamp(26px,3.4vw,44px); font-weight:700; line-height:1.05em; letter-spacing:-0.02em;
}
.wtr-viral-note{
  margin:22px 0 0; padding:16px 20px; border-radius:14px;
  background:rgba(10,14,19,.6); border:1px solid rgba(48,184,208,.22);
  color:rgba(255,255,255,.72); font-size:16px; line-height:1.5em;
}
.wtr-viral-phones{ position:relative; min-height:520px; }
/* iPhone 17 Pro Rahmen */
.wtr-iphone{
  position:absolute; width:min(46%,250px);
  padding:11px;
  background:linear-gradient(145deg,#3a3f46,#17191d 45%,#2c3138);
  border-radius:52px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 0 5px #0b0d10,
    0 34px 90px rgba(0,0,0,.65),
    0 0 44px -8px rgba(40,176,232,.28);
}
.wtr-iphone::before{ /* Seitentaste */
  content:""; position:absolute; right:-3px; top:22%;
  width:3px; height:56px; border-radius:2px;
  background:#3a3f46;
}
.wtr-iphone::after{ /* Lautstärke */
  content:""; position:absolute; left:-3px; top:18%;
  width:3px; height:84px; border-radius:2px;
  background:#3a3f46;
}
.wtr-iphone img{
  display:block; width:100%;
  border-radius:42px;
}
.wtr-iphone__island{
  position:absolute; top:20px; left:50%;
  width:34%; height:13px; margin-left:-17%;
  background:#000; border-radius:999px;
  z-index:2;
}
.wtr-viral-phone--one{ left:4%; top:0; transform:rotate(-3deg); z-index:1; }
.wtr-viral-phone--two{ right:4%; top:60px; transform:rotate(3deg); z-index:2; }
.wtr-sponsor-roi{
  margin:26px 0 0; padding:16px 20px; border-left:3px solid var(--wtr-cyan);
  background:rgba(48,184,208,.07); border-radius:0 12px 12px 0;
  color:rgba(255,255,255,.78); font-size:16px; line-height:1.55em;
}
@media (max-width:767px){
  .wtr-viral-section{ padding:64px 20px; }
  .wtr-viral-layout{ grid-template-columns:1fr; gap:36px; }
  .wtr-viral-copy h2{ font-size:clamp(28px,8vw,36px); }
  .wtr-viral-stat strong{ font-size:clamp(24px,7.5vw,32px); }
  .wtr-viral-phones{ min-height:400px; }
  .wtr-iphone{ width:47%; padding:8px; border-radius:40px; }
  .wtr-iphone img{ border-radius:32px; }
  .wtr-iphone__island{ top:14px; height:10px; }
  .wtr-viral-phone--two{ top:44px; }
  .wtr-viral-note{ font-size:15px; }
  .wtr-sponsor-roi{ font-size:15px; padding:14px 16px; }
}