/* =====================================================================
   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;
  }
}

/* ---------------------------------------------------------------------
   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 */
}