/* Umsatzprofis Bausteine – Stile der eigenen Elementor-Widgets.
   Alles, was Redakteure ändern sollen, steuern die Widget-Regler über CSS-Variablen. */

/* ---------- Überschrift mit Akzent ---------- */
.up-ueberschrift {
  margin: 0;
  text-wrap: balance;
}
.up-akzent {
  background: linear-gradient(2deg, var(--up-akzent-1, #000f29) 0%, var(--up-akzent-2, #00b7d1) 55%, var(--up-akzent-3, #4be3f5) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Kundenvideo ---------- */
.up-video {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: var(--up-video-format, 16 / 9);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--up-video-radius, 16px);
  background:
    radial-gradient(55% 60% at 50% 48%, rgb(0 183 209 / .18), transparent 70%) padding-box,
    linear-gradient(165deg, #070b0e 0%, #020304 100%) padding-box,
    linear-gradient(150deg, rgb(0 183 209 / .55), rgb(255 255 255 / .07) 32%, rgb(255 255 255 / .03) 62%, rgb(0 183 209 / .3)) border-box;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .06),
    0 30px 60px -30px rgb(0 0 0 / .95),
    0 0 60px -24px rgb(0 183 209 / .18);
}
/* Vorschaubild per Luminanz auf der Rahmenfläche, darüber ein Navy-Schleier */
.up-video::before,
.up-video::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.up-video::before {
  z-index: -2;
  background: var(--up-video-poster, none) var(--up-video-ort, center 35%) / cover no-repeat;
  mix-blend-mode: luminosity;
  opacity: var(--up-video-bild, .5);
}
.up-video::after {
  z-index: -1;
  background: linear-gradient(2deg, rgb(0 15 41 / var(--up-video-schleier, .42)) 0%, rgb(0 15 41 / calc(var(--up-video-schleier, .42) * .86)) 60%, rgb(0 183 209 / .14) 100%);
}
.up-video__raster {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 1px 1px, rgb(141 180 196 / .4) 1px, transparent 1.5px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
          mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
}
/* button.… schlägt die Button-Stile von Theme und Kit */
.up-video button.up-video__play,
.up-video button.up-video__play:hover,
.up-video button.up-video__play:focus {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--up-video-play, 72px);
  height: var(--up-video-play, 72px);
  margin: 0;
  padding: 0;
  border: 1px solid rgb(126 239 255 / .6);
  border-radius: 50%;
  background: linear-gradient(135deg, #020e28, #00b7d1);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .25),
    0 0 0 8px rgb(0 183 209 / .1),
    0 14px 40px -8px rgb(0 183 209 / .7);
  color: #fff;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s;
}
.up-video button.up-video__play:hover,
.up-video button.up-video__play:focus-visible {
  transform: scale(1.07);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .3),
    0 0 0 10px rgb(0 183 209 / .14),
    0 18px 50px -8px rgb(0 183 209 / .9);
}
.up-video button.up-video__play:focus-visible { outline: 2px solid #29daff; outline-offset: 6px; }
.up-video button.up-video__play:disabled { cursor: default; opacity: .6; }
.up-video__play svg { width: 36%; height: 36%; margin-left: 5%; fill: currentColor; }
.up-video__play::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgb(126 239 255 / .55);
  border-radius: 50%;
  animation: up-welle 2.6s ease-out infinite;
}
@keyframes up-welle {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(1.8); opacity: 0; }
}
.up-video__medium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: calc(var(--up-video-radius, 16px) - 1px);
  background: #000;
  object-fit: contain;
}
.up-video.spielt::before,
.up-video.spielt::after,
.up-video.spielt :is(.up-video__play, .up-video__raster) { display: none; }

/* ---------- Trust-Zeile ---------- */
.up-trust {
  --up-trust-kopf: 36px;
  --up-trust-ueberlappung: 11px;
  --up-trust-rand: #08090b;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  font: 400 11px/1.35 Roboto, sans-serif;
  color: #c4cdd3;
  text-decoration: none;
}
a.up-trust:hover .up-trust__text strong { text-decoration: underline; }
.up-trust__koepfe { display: flex; flex: none; }
.up-trust__kopf {
  display: block;
  flex: none;
  width: var(--up-trust-kopf);
  height: var(--up-trust-kopf);
  overflow: hidden;
  border: 2px solid var(--up-trust-rand);
  border-radius: 50%;
  background: #0b1a1d;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .12);
}
.up-trust__kopf + .up-trust__kopf { margin-left: calc(var(--up-trust-ueberlappung) * -1); }
.up-trust__kopf img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}
.up-trust__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.up-trust__sterne { display: block; width: 78px; height: auto; }
.up-trust__text { color: #c4cdd3; }
.up-trust__text strong { color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .up-video__play::before { animation: none; visibility: hidden; }
}

/* ---------- Linien-Animation ---------- */
.up-linien canvas {
  display: block;
  width: 100%;
  height: 130px;
}
.up-linien--auslauf canvas {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ---------- Presse-Leiste ---------- */
.up-presse {
  --up-presse-deckkraft: .55;
  --up-presse-hover: .9;
  --up-presse-skala: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Astra setzt .entry-content ul { padding-left: 20px } und schöbe die Leiste sonst 10 px aus der Mitte */
.entry-content .up-presse { padding: 0; }
.up-presse li { margin: 0; padding: 0; list-style: none; }
.up-presse a { display: block; }
.up-presse img {
  display: block;
  width: auto;
  max-width: none;
  height: calc(var(--up-presse-h, 26px) * var(--up-presse-skala));
  opacity: var(--up-presse-deckkraft);
  transition: opacity .3s ease;
}
/* Logos sind eng zugeschnitten: kein Eckenradius (übersteuert den globalen Bildradius des Kits) */
.up-presse li img { border-radius: 0; }
.up-presse li:hover img { opacity: var(--up-presse-hover); }
.up-presse--weiss img { filter: brightness(0) invert(1); }
.up-presse--grau img { filter: grayscale(1); }