.validooo-homepage {
--validooo-blue: #0094ff;
--validooo-blue-dark: #0079d6;
--validooo-dark-blue: #063c63;
--validooo-text: #111820;
--validooo-text-muted: #52616d;
--validooo-surface-blue: #eef8ff;
--validooo-border: #e5e9ed;
--validooo-dark: #17232c;
overflow: hidden;
color: var(--validooo-text);
font-family: 'Open Sans', sans-serif;
background: #ffffff;
}

.validooo-homepage.zpBreakout {
width: 100vw !important;
max-width: none !important;
margin-right: calc(50% - 50vw) !important;
margin-left: calc(50% - 50vw) !important;
}

.validooo-homepage *,
.validooo-homepage *::before,
.validooo-homepage *::after {
box-sizing: border-box;
}

.validooo-container {
width: min(1540px, calc(100% - 8vw));
margin: 0 auto;
}

.validooo-homepage h1,
.validooo-homepage h1 *,
.validooo-homepage h2,
.validooo-homepage h2 *,
.validooo-homepage h3,
.validooo-homepage h3 * {
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
-webkit-hyphens: none !important;
text-wrap: balance;
}

.validooo-homepage h1,
.validooo-homepage h2,
.validooo-homepage h3,
.validooo-homepage p {
margin-top: 0;
}

.validooo-homepage h1 {
max-width: 820px;
margin-bottom: 25px;
color: #ffffff;
font-size: clamp(2.8rem, 4.2vw, 4.75rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.045em;
}

.validooo-homepage h2 {
margin-bottom: 0;
color: var(--validooo-text);
font-size: clamp(3.0rem, 4.5vw, 5rem);
line-height: 1.05;
letter-spacing: -0.045em;
}

.validooo-homepage h2 span {
padding: 0 0.08em;
background: linear-gradient(
    transparent 67%,
    rgb(0 148 255 / 24%) 67%,
    rgb(0 148 255 / 24%) 91%,
    transparent 91%
);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

.validooo-eyebrow {
margin-bottom: 18px;
color: var(--validooo-blue);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.validooo-section {
position: relative;
padding: 135px 0;
}

.validooo-section-heading {
display: grid;
grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
gap: 8vw;
align-items: center;
margin-bottom: 70px;
}

.validooo-section-heading h2 {
max-width: 720px;
}

.validooo-section-heading p {
max-width: 760px;
margin-bottom: 0;
color: var(--validooo-text-muted);
font-size: 1.13rem;
line-height: 1.65;
}

/* Buttons und Textlinks */
.validooo-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.validooo-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 14px 22px;
font-weight: 700;
text-decoration: none !important;
border: 1px solid transparent;
border-radius: 12px;
transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.validooo-button:hover,
.validooo-button:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgb(0 45 78 / 14%);
}

.validooo-button:focus-visible,
.validooo-text-link:focus-visible {
outline: 3px solid rgb(0 148 255 / 35%);
outline-offset: 3px;
}

.validooo-button--primaryblue {
color: #ffffff !important;
background: #0094ff;
}

.validooo-button--primaryblue:hover,
.validooo-button--primaryblue:focus-visible {
color: var(--validooo-blue) !important;
background: #ffffff;
border-color: var(--validooo-blue);
}

.validooo-button--secondarydark {
color: var(--validooo-text) !important;
background: #ffffff;
border-color: #ccd4da;
}

.validooo-button--secondarydark:hover,
.validooo-button--secondarydark:focus-visible {
color: #ffffff !important;
background: #17232c;
border-color: #ffffff;
}

.validooo-text-link {
display: inline-block;
margin-top: 8px;
color: var(--validooo-blue) !important;
font-weight: 700;
text-decoration: none !important;
transition: color 180ms ease;
}

.validooo-text-link:hover,
.validooo-text-link:focus-visible {
color: var(--validooo-dark-blue) !important;
text-decoration: underline !important;
text-underline-offset: 4px;
}

/* Hero */
.validooo-hero {
position: relative;
padding: 110px 0 150px;
color: #ffffff;
background: var(--validooo-blue);
}

.validooo-hero::after {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 245px;
background: #ffffff;
clip-path: ellipse(80% 72% at 50% 100%);
content: '';
}

.validooo-hero__layout {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 7vw;
align-items: center;
}

.validooo-hero .validooo-eyebrow {
color: #ffffff;
}

.validooo-hero__lead {
max-width: 720px;
margin-bottom: 30px;
color: rgb(255 255 255 / 88%);
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
line-height: 1.55;
word-break: normal !important;
hyphens: none !important;
-webkit-hyphens: none !important;
text-wrap: pretty;
}

.validooo-hero .validooo-button--primary {
color: #082a40 !important;
background: #ffffff;
}

.validooo-hero .validooo-button--primary:hover,
.validooo-hero .validooo-button--primary:focus-visible {
color: var(--validooo-blue-dark) !important;
background: var(--validooo-surface-blue);
}

.validooo-hero .validooo-button--secondary {
color: #ffffff !important;
background: transparent;
border-color: rgb(255 255 255 / 65%);
}

.validooo-hero .validooo-button--secondary:hover,
.validooo-hero .validooo-button--secondary:focus-visible {
color: var(--validooo-blue-dark) !important;
background: #ffffff;
border-color: #ffffff;
}

.validooo-hero .validooo-actions {
margin-bottom: 28px;
}

/* Vorher-/Nachher-Vergleich */
.validooo-comparison-shell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}

.validooo-comparison {
width: 100%;
max-width: 760px;
margin: 0;
}

.validooo-comparison__stage {
--comparison-position: 50%;
position: relative;
width: 100%;
overflow: hidden;
aspect-ratio: 16 / 11;
background: transparent;
border-radius: 0;
box-shadow: none;
}

.validooo-comparison__image {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
user-select: none;
}

.validooo-comparison__image--after {
z-index: 2;
clip-path: inset(0 0 0 var(--comparison-position));
}

.validooo-comparison__label {
position: absolute;
top: 14px;
z-index: 4;
padding: 7px 11px;
color: var(--validooo-text) !important;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
background: rgb(255 255 255 / 94%);
border: 1px solid rgb(17 24 32 / 10%);
border-radius: 999px;
box-shadow: 0 4px 14px rgb(0 0 0 / 10%);
text-shadow: none;
}

.validooo-comparison__label--before {
left: 14px;
}

.validooo-comparison__label--after {
right: 14px;
}

.validooo-comparison__range {
position: absolute;
inset: 0;
z-index: 6;
width: 100%;
height: 100%;
margin: 0;
cursor: ew-resize;
opacity: 0;
}

.validooo-comparison__divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--comparison-position);
z-index: 3;
width: 3px;
background: var(--validooo-blue);
transform: translateX(-50%);
pointer-events: none;
}

.validooo-comparison__handle {
position: absolute;
top: 50%;
left: var(--comparison-position);
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #004a7f;
font-size: 22px;
background: #ffffff;
border: 3px solid var(--validooo-blue);
border-radius: 50%;
box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
transform: translate(-50%, -50%);
pointer-events: none;
}

.validooo-comparison__range:focus-visible ~ .validooo-comparison__handle {
outline: 4px solid rgb(255 255 255 / 80%);
outline-offset: 3px;
}

.validooo-comparison figcaption {
margin-top: 13px;
color: rgb(255 255 255 / 88%);
font-size: 0.88rem;
text-align: center;
}

/* Produktübersicht */
.validooo-product-grid {
display: grid;
grid-template-columns: 1.12fr 0.88fr;
grid-template-rows: auto auto;
gap: 28px;
}

.validooo-product-card {
position: relative;
min-height: 430px;
padding: 54px;
overflow: hidden;
background: #f5f7f8;
border-radius: 38px;
box-shadow: 0 1px 0 rgb(0 0 0 / 3%);
}

.validooo-product-card--wide {
display: grid;
grid-column: 1 / 3;
grid-template-columns: 1fr 1fr;
gap: 35px;
align-items: center;
min-height: 400px;
background: #f5f7f8;
}

.validooo-product-card h3 {
margin-bottom: 14px;
color: inherit;
font-size: clamp(1.55rem, 2.2vw, 2.45rem);
line-height: 1.2;
letter-spacing: -0.03em;
}

.validooo-product-card p {
max-width: 750px;
color: #667580;
font-size: 1.05rem;
line-height: 1.55;
}

.validooo-product-card__media {
margin-top: 30px;
text-align: center;
}

.validooo-product-card__media img {
max-width: 90%;
height: auto;
}

/* Ablauf */
.validooo-process {
padding-top: 150px;
padding-bottom: 150px;
background: #eef8ff;
}

.validooo-process::before,
.validooo-process::after,
.validooo-security::before,
.validooo-security::after,
.validooo-final::before,
.validooo-founder::before {
position: absolute;
right: 0;
left: 0;
background: #ffffff;
content: '';
}

.validooo-process::before,
.validooo-security::before,
.validooo-founder::before {
top: -1px;
height: 125px;
clip-path: ellipse(80% 72% at 50% 0%);
}

.validooo-process::after,
.validooo-security::after {
bottom: -1px;
height: 125px;
clip-path: ellipse(80% 72% at 50% 100%);
}

.validooo-process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}

.validooo-process-step {
min-height: 300px;
padding: 38px 18px 20px 0;
border-top: 2px solid rgb(0 148 255 / 22%);
}

.validooo-process-step h3 {
margin-bottom: 10px;
color: var(--validooo-text);
font-size: 1.55rem;
}

.validooo-process-step p {
margin-bottom: 0;
color: var(--validooo-text-muted);
line-height: 1.55;
}

.validooo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 22px;
border: 2px solid rgb(0 148 255 / 28%);
border-radius: 14px;
}

.validooo-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: var(--validooo-blue);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

/* Funktionsmerkmale */
.validooo-features {
padding: 150px 0;
}

.validooo-feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: stretch;
margin-bottom: 34px;
}

.validooo-feature-row:last-child {
margin-bottom: 0;
}

.validooo-feature-row__copy {
min-height: 560px;
border-radius: 42px;
}

.validooo-feature-row__copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 76px;
background: #f5f7f8;
}

.validooo-feature-row__copy h3 {
margin-bottom: 20px;
color: var(--validooo-text);
font-size: clamp(2rem, 3vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.04em;
}

.validooo-feature-row__copy p {
max-width: 600px;
color: var(--validooo-text-muted);
font-size: 1.1rem;
line-height: 1.65;
}

.validooo-feature-row__media {
display: flex;
align-items: center;
justify-content: center;
}

.validooo-feature-row--wide {
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
min-height: 560px;
padding: 76px;
overflow: hidden;
background: #f5f7f8;
border-radius: 42px;
box-shadow: 0 1px 0 rgb(0 0 0 / 3%);
}

.validooo-feature-row.validooo-feature-row--wide .validooo-feature-row__copy,
.validooo-feature-row.validooo-feature-row--wide .validooo-feature-row__media {
order: initial;
min-height: auto;
padding: 0;
background: transparent;
border-radius: 0;
}

.validooo-feature-row--wide .validooo-feature-row__media {
overflow: visible;
}

.validooo-feature-row--wide .validooo-feature-row__media video {
width: 100%;
max-width: 90%;
max-height: 420px;
object-fit: contain;
}

/* Gründerzitat */
.validooo-founder {
position: relative;
padding: 145px 0 155px;
background: #eef8ff;
}

.validooo-founder__box {
max-width: 1120px;
margin: 0 auto;
padding: 55px 64px;
background: #ffffff;
border-left: 5px solid var(--validooo-blue);
border-radius: 0 34px 34px 0;
}

.validooo-founder__box > svg {
width: 42px;
height: 42px;
margin-bottom: 14px;
fill: var(--validooo-blue);
opacity: 0.18;
}

.validooo-founder blockquote {
margin: 0;
color: #174b70;
font-size: clamp(1.45rem, 2.4vw, 2.45rem);
font-weight: 300;
font-style: italic;
line-height: 1.35;
}

.validooo-founder p {
margin: 24px 0 0;
color: var(--validooo-blue);
font-weight: 700;
text-align: right;
}

.validooo-founder p span {
color: #6d7b85;
font-weight: 400;
}

/* Sicherheit */
.validooo-security {
padding-top: 155px;
padding-bottom: 155px;
overflow: hidden;
color: #ffffff;
background: var(--validooo-dark);
isolation: isolate;
}

.validooo-security h2 {
color: #ffffff;
}

.validooo-security h2 span {
padding: 0;
background: none;
}

.validooo-security .validooo-section-heading p {
color: #c2ccd2;
}

.validooo-security-cipher {
position: absolute;
inset: 30px 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.validooo-security-cipher::before {
position: absolute;
inset: 0;
z-index: 0;
background-image:
    radial-gradient(circle, rgb(0 148 255 / 3.5%) 0 1px, transparent 1.25px),
    linear-gradient(rgb(0 148 255 / 2.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 148 255 / 2.5%) 1px, transparent 1px);
background-position: 0 0, 0 0, 0 0;
background-size: 22px 22px, 66px 66px, 66px 66px;
content: '';
}

.validooo-security-cipher::after {
position: absolute;
inset: 0;
z-index: 3;
background:
    linear-gradient(90deg, #17232c 0%, transparent 10%, transparent 90%, #17232c 100%),
    radial-gradient(ellipse at 50% 47%, transparent 0%, rgb(23 35 44 / 10%) 40%, rgb(23 35 44 / 50%) 100%);
content: '';
}

.validooo-security-cipher__stream {
position: absolute;
right: 0;
left: 0;
z-index: 1;
height: 26px;
overflow: hidden;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: clamp(0.58rem, 0.7vw, 0.76rem);
font-weight: 600;
letter-spacing: 0.19em;
line-height: 26px;
white-space: nowrap;
mix-blend-mode: screen;
}

.validooo-security-cipher__track {
display: flex;
width: max-content;
will-change: transform;
animation: validooo-cipher-forward 52s linear infinite;
}

.validooo-security-cipher__track span {
flex: none;
min-width: 100vw;
padding-right: 3em;
color: rgb(77 187 255 / 21%);
text-align: justify;
text-align-last: justify;
text-shadow: 0 0 12px rgb(0 148 255 / 27%);
}

.validooo-security-cipher__stream--1 { top: 4%; opacity: 0.72; }
.validooo-security-cipher__stream--2 { top: 12%; opacity: 0.43; filter: blur(0.45px); }
.validooo-security-cipher__stream--3 { top: 20%; opacity: 0.68; }
.validooo-security-cipher__stream--4 { top: 28%; opacity: 0.36; filter: blur(0.7px); }
.validooo-security-cipher__stream--5 { top: 36%; opacity: 0.61; }
.validooo-security-cipher__stream--6 { top: 44%; opacity: 0.46; filter: blur(0.35px); }
.validooo-security-cipher__stream--7 { top: 52%; opacity: 0.75; }
.validooo-security-cipher__stream--8 { top: 60%; opacity: 0.4; filter: blur(0.6px); }
.validooo-security-cipher__stream--9 { top: 68%; opacity: 0.64; }
.validooo-security-cipher__stream--10 { top: 76%; opacity: 0.38; filter: blur(0.5px); }
.validooo-security-cipher__stream--11 { top: 84%; opacity: 0.7; }
.validooo-security-cipher__stream--12 { top: 92%; opacity: 0.45; filter: blur(0.35px); }

.validooo-security-cipher__stream:nth-child(even) .validooo-security-cipher__track {
animation-name: validooo-cipher-reverse;
animation-duration: 61s;
}

.validooo-security-cipher__stream:nth-child(3n) .validooo-security-cipher__track {
animation-duration: 43s;
}

.validooo-security-cipher__stream:nth-child(4n) .validooo-security-cipher__track {
animation-duration: 68s;
}

.validooo-security-cipher__stream:nth-child(5n) .validooo-security-cipher__track {
animation-duration: 57s;
}

.validooo-security-cipher__sweep {
position: absolute;
top: 0;
bottom: 0;
left: -30%;
z-index: 2;
width: 27%;
background: linear-gradient(90deg, transparent, rgb(0 148 255 / 10%), transparent);
filter: blur(9px);
transform: skewX(-12deg);
will-change: left;
animation: validooo-cipher-sweep 14s linear infinite;
}

@keyframes validooo-cipher-forward {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}

@keyframes validooo-cipher-reverse {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}

@keyframes validooo-cipher-sweep {
0%, 8% { left: -30%; }
92%, 100% { left: 110%; }
}

.validooo-security > .validooo-container {
position: relative;
z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
.validooo-security-cipher__track,
.validooo-security-cipher__sweep {
    animation: none;
    will-change: auto;
}
}

.validooo-security-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}

.validooo-security-card {
padding: 32px;
background: rgb(255 255 255 / 2.5%);
border: 1px solid #35434d;
border-radius: 24px;
}

.validooo-security-card .validooo-icon {
border-color: rgb(255 255 255 / 18%);
}

.validooo-security-card .validooo-icon svg {
stroke: #6d6d6d;
}

.validooo-security-card b {
display: block;
margin-bottom: 10px;
font-size: 1.15rem;
}

.validooo-security-card > span {
color: #b8c2c9;
line-height: 1.5;
}

.validooo-security__link {
margin-top: 34px;
}

/* Demo */
.validooo-demo {
padding: 145px 0;
background: linear-gradient(180deg, #ffffff 0%, #f4f9fc 52%, #ffffff 100%);
}

.validooo-demo__box {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 50px;
align-items: center;
padding: 82px;
background: var(--validooo-surface-blue);
border-radius: 44px;
}

.validooo-demo__box h2 {
margin-bottom: 18px;
}

.validooo-demo__box p {
color: var(--validooo-text-muted);
font-size: 1.1rem;
line-height: 1.6;
}

.validooo-demo .validooo-button--primary {
color: #ffffff !important;
background: var(--validooo-blue);
border-color: var(--validooo-blue);
}

.validooo-demo .validooo-button--primary:hover,
.validooo-demo .validooo-button--primary:focus-visible {
color: #ffffff !important;
background: var(--validooo-blue-dark);
border-color: var(--validooo-blue-dark);
}

.validooo-demo__credentials {
padding: 30px;
background: #ffffff;
border: 1px solid var(--validooo-border);
border-radius: 24px;
}

.validooo-demo__credentials dl {
margin: 0;
}

.validooo-demo__credentials dt {
margin-bottom: 5px;
color: #78858f;
font-size: 0.82rem;
font-weight: 400;
}

.validooo-demo__credentials dd {
margin: 0 0 17px;
color: var(--validooo-text);
font-size: 1.05rem;
font-weight: 700;
}

/* Abschluss-CTA */
.validooo-final {
position: relative;
padding: 135px 0 110px;
color: #ffffff;
text-align: center;
background: #0094ff;
}

.validooo-final::before {
top: -1px;
height: 115px;
clip-path: ellipse(80% 72% at 50% 0%);
}

.validooo-final h2 {
max-width: 900px;
margin: 0 auto 22px;
color: #ffffff;
}

.validooo-final .validooo-actions {
justify-content: center;
}

.validooo-final .validooo-button--secondary {
color: #ffffff !important;
background: transparent;
border-color: #ffffff;
}

.validooo-final .validooo-button--secondary:hover,
.validooo-final .validooo-button--secondary:focus-visible {
color: var(--validooo-blue-dark) !important;
background: #ffffff;
border-color: #ffffff;
}

@media (max-width: 900px) {
.validooo-container {
    width: min(100% - 34px, 1540px);
}

.validooo-security-cipher {
    inset: 24px 0;
}

.validooo-hero {
    padding: 72px 0 115px;
}

.validooo-hero::after {
    height: 75px;
}

.validooo-hero__layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.validooo-hero__content {
    order: 1;
}

.validooo-comparison-shell {
    order: 2;
    width: 100%;
    margin-top: 10px;
}

.validooo-section-heading,
.validooo-feature-row,
.validooo-demo__box {
    grid-template-columns: 1fr;
    gap: 28px;
}

.validooo-section-heading {
    gap: 22px;
    margin-bottom: 45px;
}

.validooo-section {
    padding: 95px 0;
}

.validooo-process,
.validooo-security {
    padding: 115px 0;
}

.validooo-process::before,
.validooo-process::after,
.validooo-security::before,
.validooo-security::after,
.validooo-final::before,
.validooo-founder::before {
    height: 70px;
}

.validooo-product-grid {
    grid-template-columns: 1fr;
}

.validooo-product-card {
    padding: 38px 30px;
    border-radius: 28px;
}

.validooo-product-card--wide {
    grid-column: auto;
    grid-template-columns: 1fr;
}

.validooo-process-grid,
.validooo-security-grid {
    grid-template-columns: 1fr 1fr;
}

.validooo-process-step {
    min-height: auto;
}

.validooo-features {
    padding: 100px 0;
}

.validooo-feature-row__copy {
    min-height: auto;
    border-radius: 28px;
}

.validooo-feature-row__copy {
    padding: 40px 30px;
}

.validooo-feature-row--wide {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 40px 30px;
    border-radius: 28px;
}

.validooo-founder {
    padding: 100px 0 110px;
}

.validooo-founder__box {
    padding: 38px 28px;
    border-radius: 0 24px 24px 0;
}

.validooo-founder p {
    text-align: left;
}

.validooo-demo {
    padding: 100px 0;
}

.validooo-demo__box {
    padding: 42px 30px;
    border-radius: 30px;
}
}

@media (max-width: 560px) {
.validooo-homepage h1 {
    font-size: 2.7rem;
}

.validooo-feature-row--wide {
    padding: 30px 24px;
}

.validooo-security-cipher {
    opacity: 0.86;
}

.validooo-security-cipher__stream {
    font-size: 0.55rem;
    letter-spacing: 0.14em;
}

.validooo-security-cipher::after {
    background:
        linear-gradient(90deg, #17232c 0%, transparent 4%, transparent 96%, #17232c 100%),
        radial-gradient(ellipse at 50% 47%, transparent 0%, rgb(23 35 44 / 14%) 38%, rgb(23 35 44 / 54%) 100%);
}

.validooo-process-grid,
.validooo-security-grid {
    grid-template-columns: 1fr;
}

.validooo-product-card {
    padding: 30px 24px;
}

.validooo-demo__box {
    padding: 35px 24px;
}

.validooo-comparison__label {
    top: 9px;
    padding: 5px 8px;
    font-size: 0.67rem;
}

.validooo-comparison__label--before {
    left: 9px;
}

.validooo-comparison__label--after {
    right: 9px;
}

.validooo-comparison__handle {
    width: 42px;
    height: 42px;
}
}

.validooo-scope {
    --validooo-scope-blue: #0094ff;
    --validooo-scope-text: #111820;
    --validooo-scope-grey-light: #f5f7f8;

    width: min(1540px, calc(100% - 8vw));
    margin: 0 auto;
    color: var(--validooo-scope-text);
    font-family: "Open Sans", Arial, sans-serif;
}

.validooo-scope *,
.validooo-scope *::before,
.validooo-scope *::after {
    box-sizing: border-box;
}

.validooo-scope__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 32px;
    align-items: stretch;
}

.validooo-scope__card {
    position: relative;
    min-width: 0;
    padding: 42px;
    overflow: hidden;
    background: var(--validooo-scope-grey-light);
    border: 1px solid rgb(0 148 255 / 12%);
    border-radius: 38px;
    box-shadow: 0 16px 42px rgb(17 24 32 / 5%);
}

.validooo-scope__card--documents {
    border-color: rgb(17 24 32 / 5%);
}

.validooo-scope__header {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 26px;
}

.validooo-scope__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--validooo-scope-blue);
    background: #ffffff;
    border: 1px solid rgb(0 148 255 / 16%);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgb(0 148 255 / 16%);
}

.validooo-scope__icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.validooo-scope__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--validooo-scope-blue);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.3;
    text-transform: uppercase;
}

.validooo-scope__card h3 {
    margin: 0;
    color: var(--validooo-scope-text);
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

.validooo-scope__chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.validooo-scope__chip {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    color: #30404c !important;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none !important;
    background: #ffffff;
    border: 1px solid rgb(0 148 255 / 16%);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgb(17 24 32 / 3%);
    transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.validooo-scope__chip:hover,
.validooo-scope__chip:focus-visible,
.validooo-scope__chip:focus-within {
    color: #ffffff !important;
    background: var(--validooo-scope-blue);
    border-color: var(--validooo-scope-blue);
    box-shadow: 0 8px 20px rgb(0 148 255 / 18%);
    transform: translateY(-2px);
}

.validooo-scope__chip:focus-visible {
    outline: 3px solid rgb(0 148 255 / 28%);
    outline-offset: 3px;
}

/*
* Verhindert zusätzliche Punkte oder Symbole durch globale
* Zeta-Producer-Formatierungen.
*/
.validooo-scope__chip::before,
.validooo-scope__chip::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 900px) {
    .validooo-scope {
    width: min(100% - 34px, 1540px);
    }

    .validooo-scope__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    }

    .validooo-scope__card {
    padding: 36px 30px;
    border-radius: 28px;
    }
}

@media (max-width: 560px) {
    .validooo-scope__card {
    padding: 30px 24px;
    }

    .validooo-scope__header {
    align-items: flex-start;
    }

    .validooo-scope__icon {
    width: 48px;
    height: 48px;
    }

    .validooo-scope__chip {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 0.88rem;
    }
}

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('/assets/fonts/webfonts/open-sans-v40-latin-300.woff2') format('woff2');
}

@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('/assets/fonts/webfonts/open-sans-v40-latin-300italic.woff2') format('woff2');
}

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/webfonts/open-sans-v40-latin-regular.woff2') format('woff2');
}

@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/webfonts/open-sans-v40-latin-italic.woff2') format('woff2');
}

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/webfonts/open-sans-v40-latin-700.woff2') format('woff2');
}

@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/webfonts/open-sans-v40-latin-700italic.woff2') format('woff2');
}

/* Einheitliche Scrollübergänge */
.validooo-scroll-ready .validooo-scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.validooo-scroll-ready .validooo-scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .validooo-scroll-ready .validooo-scroll-reveal,
    .validooo-scroll-ready .validooo-scroll-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
