/* ==========================================================================
   DigiFiles Homepage – Stylesheet
   ==========================================================================
   Structure:
   1. Design Tokens (CSS Variables)
   2. Reset & Base
   3. Keyframe Animations
   4. Layout Utilities
   5. Navigation
   6. Hero Section
   7. Cookie Banner
   8. Section Headers
   9. Scroll Reveal System
   10. Feature Cards
   11. Comparison Section
   12. Why Section
   13. DSGVO Section
   14. Footer
   15. Shared Components (social icons)
   16. Responsive – Tablet
   17. Responsive – Mobile
   18. Accessibility (reduced motion)

   Webfonts: siehe fonts.css (separat geladen, DSGVO-konform selbst gehostet)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    /* Backgrounds */
    --color-bg:            #ffffff;
    --color-bg-secondary:  #f8f9fb;
    --color-bg-card:       #2a3142;
    --color-bg-nav:        rgba(255, 255, 255, 0.95);

    /* Text */
    --color-text:          #111827;
    --color-text-white:    #000000;
    --color-text-muted:    rgba(90, 101, 119, 0.55);

    /* Accent */
    --color-accent:        #2d8cf0;
    --color-accent-bright: #1a6fd4;
    --color-link:          #1a6fd4;

    /* Borders & Shadows */
    --color-border:        rgba(0, 0, 0, 0.08);
    --color-border-glow:   rgba(45, 140, 240, 0.2);
    --shadow-card:         0 2px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);

    /* Layout */
    --max-width:           1200px;
    --nav-height:          44px;

    /* Easing */
    --ease-out:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring:         cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce:         cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }


/* ==========================================================================
   3. KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes fadeInUp    { from { opacity: 0; transform: translateY(40px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown  { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.9);       } to { opacity: 1; transform: scale(1);      } }

@keyframes phoneEntrance {
    0%   { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1);   }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0)    rotateX(2deg)  rotateY(-1deg); }
    50%      { transform: translateY(-10px) rotateX(-1deg) rotateY(2deg);  }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.08; transform: translate(-50%, -50%) scale(1);   }
    50%      { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes shimmer        { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes gradientShift  { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes borderGlow     { 0%, 100% { border-color: var(--color-border); } 50% { border-color: rgba(166,218,255,.2); } }
@keyframes slideNavIn     { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }

@keyframes lockBounce   { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-6px); } 50% { transform: translateY(0); } 75% { transform: translateY(-3px); } }
@keyframes shieldPulse  { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(91,184,245,.3)); } }

/* Documents fly from outside into the phone center, then disappear */
@keyframes docFly1 {
    0%   { transform: translate(-400px, -200px) rotate(-45deg) scale(0.8); opacity: 0; }
    10%  { opacity: .7; }
    60%  { opacity: .6; transform: translate(-30px, -15px) rotate(-8deg) scale(0.5); }
    85%  { opacity: .4; transform: translate(-5px, -3px) rotate(-2deg) scale(0.15); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
}
@keyframes docFly2 {
    0%   { transform: translate(400px, -180px) rotate(55deg) scale(0.7); opacity: 0; }
    10%  { opacity: .6; }
    60%  { opacity: .5; transform: translate(25px, -10px) rotate(8deg) scale(0.45); }
    85%  { opacity: .3; transform: translate(4px, -2px) rotate(2deg) scale(0.12); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
}
@keyframes docFly3 {
    0%   { transform: translate(-350px, 250px) rotate(60deg) scale(0.9); opacity: 0; }
    10%  { opacity: .5; }
    60%  { opacity: .5; transform: translate(-15px, 20px) rotate(8deg) scale(0.4); }
    85%  { opacity: .3; transform: translate(-3px, 4px) rotate(2deg) scale(0.1); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
}
@keyframes docFly4 {
    0%   { transform: translate(350px, 200px) rotate(-50deg) scale(0.7); opacity: 0; }
    10%  { opacity: .5; }
    60%  { opacity: .45; transform: translate(18px, 12px) rotate(-6deg) scale(0.45); }
    85%  { opacity: .3; transform: translate(3px, 2px) rotate(-1deg) scale(0.12); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
}
@keyframes docFly5 {
    0%   { transform: translate(300px, -300px) rotate(70deg) scale(0.6); opacity: 0; }
    10%  { opacity: .6; }
    60%  { opacity: .5; transform: translate(12px, -18px) rotate(6deg) scale(0.4); }
    85%  { opacity: .3; transform: translate(2px, -3px) rotate(1deg) scale(0.1); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
}
@keyframes docFly6 {
    0%   { transform: translate(-300px, -250px) rotate(-65deg) scale(0.8); opacity: 0; }
    10%  { opacity: .5; }
    60%  { opacity: .4; transform: translate(-12px, -8px) rotate(-5deg) scale(0.45); }
    85%  { opacity: .3; transform: translate(-2px, -1px) rotate(-1deg) scale(0.1); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
}



/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.section-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 40px;
}


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 44px;
    background: #0f1520;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: all .4s var(--ease-out);
    animation: slideNavIn .8s var(--ease-out) forwards;
}

.nav.is-scrolled {
    background: rgba(15,21,32,.97);
    box-shadow: 0 1px 10px rgba(0,0,0,.2);
    height: 64px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav__wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform .3s ease;
    text-decoration: none;
}
.nav__logo:hover { transform: scale(1.05); }

.nav__logo-img { height: 28px !important; width: auto !important; max-height: 28px; object-fit: contain; animation: fadeInScale .6s .3s ease both; }

.nav__logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1;
    animation: fadeInScale .6s .4s ease both;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 24px;
    border: 1px solid var(--color-border);
    border-radius: 50px;
    padding: 8px 28px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255,255,255,.1);
}

.nav__link {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    position: relative;
    transition: color .3s ease, transform .3s ease;
    animation: fadeInDown .5s ease both;
}
.nav__link:nth-child(1) { animation-delay: .5s; }
.nav__link:nth-child(2) { animation-delay: .6s; }
.nav__link:nth-child(3) { animation-delay: .7s; }
.nav__link:nth-child(4) { animation-delay: .8s; }
.nav__link:nth-child(5) { animation-delay: .9s; }

.nav__link:hover { color: #fff; transform: translateY(-1px); }

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 50%;
    width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    transition: width .4s var(--ease-out), left .4s var(--ease-out);
    border-radius: 2px;
}
.nav__link:hover::after { width: 100%; left: 0; }

.nav__link--active { color: #fff; }
.nav__link--active::after { width: 100%; left: 0; }

/* Hamburger (hidden on desktop) */
.nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}
.nav__hamburger span {
    display: block; width: 24px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all .4s var(--ease-bounce);
}
.nav__hamburger.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav panel */
.nav-mobile {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #0a0d14;
    z-index: 99;
    padding: 60px 40px 20px;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .4s var(--ease-out), opacity .4s ease;
}
.nav-mobile.is-open { transform: translateY(0); opacity: 1; }

.nav-mobile__link {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px; font-weight: 500;
    color: #fff;
    padding: 8px 0;
    transform: translateX(-20px);
    opacity: 0;
    transition: all .3s ease;
}
.nav-mobile.is-open .nav-mobile__link { transform: translateX(0); opacity: 1; }
.nav-mobile.is-open .nav-mobile__link:nth-child(1) { transition-delay: .1s;  }
.nav-mobile.is-open .nav-mobile__link:nth-child(2) { transition-delay: .15s; }
.nav-mobile.is-open .nav-mobile__link:nth-child(3) { transition-delay: .2s;  }
.nav-mobile.is-open .nav-mobile__link:nth-child(4) { transition-delay: .25s; }


/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 40px 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #d0d4db 0%, #ffffff 100%);
    min-height: auto;
}

/* Background video */
.hero__bg-video {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: -60px;
    z-index: 0;
    overflow: hidden;
}
.hero__bg-video video {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .12;
    filter: blur(1px) grayscale(100%);
}
.hero__bg-video::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
}

/* Ambient glow */
.hero__glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 600px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(166,218,255,.08) 0%, transparent 100%);
    pointer-events: none;
    animation: pulseGlow 4s ease-in-out infinite;
}


/* Floating document icons */
.hero__floating-docs {
    position: absolute;
    top: 15%; bottom: 5%; left: 12%; right: 12%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    border-radius: 20px;
}

.hero__doc {
    position: absolute;
    color: rgba(166,218,255,.35);
    opacity: 0;
}
.hero__doc svg { width: 100%; height: 100%; }

.hero__doc--1 { width: 45px; top: 42%; left: 50%; margin-left: -22px; margin-top: -25px; animation: docFly1 4s 3s var(--ease-out) infinite;  }
.hero__doc--2 { width: 35px; top: 42%; left: 50%; margin-left: -17px; margin-top: -20px; animation: docFly2 4.5s 3.5s var(--ease-out) infinite;  }
.hero__doc--3 { width: 50px; top: 42%; left: 50%; margin-left: -25px; margin-top: -30px; animation: docFly3 5s 4s var(--ease-out) infinite; }
.hero__doc--4 { width: 30px; top: 42%; left: 50%; margin-left: -15px; margin-top: -18px; animation: docFly4 4.2s 4.5s var(--ease-out) infinite; }
.hero__doc--5 { width: 40px; top: 42%; left: 50%; margin-left: -20px; margin-top: -24px; animation: docFly5 4.8s 3.3s var(--ease-out) infinite;  }
.hero__doc--6 { width: 28px; top: 42%; left: 50%; margin-left: -14px; margin-top: -16px; animation: docFly6 5.2s 3.8s var(--ease-out) infinite;   }

/* Content */
.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 936px;
    width: 100%;
}

.hero__phone {
    position: relative;
    width: 100%;
    max-width: 560px;
    perspective: 1200px;
    margin-top: -200px;
    animation: fadeInUp 1s .2s var(--ease-out) both;
}
.hero__phone-img {
    width: 100%;
    opacity: 0;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
    animation: phoneEntrance 2.5s .3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards, floatSlow 6s 3s ease-in-out infinite;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.hero__social {
    display: flex;
    align-items: center;
    gap: 56px;
    margin-top: -350px;
    position: relative;
    z-index: 3;
    animation: fadeInUp .8s .8s ease both;
}


/* ==========================================================================
   7. COOKIE BANNER
   ========================================================================== */

.cookie {
    position: fixed;
    bottom: 60px; left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: 420px;
    max-width: calc(100% - 32px);
    animation: fadeInUp .5s 1.5s ease both;
}
.cookie__inner {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    color: #1a1a1a;
    box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05);
}
.cookie__title {
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}
.cookie__text {
    font-size: 13px; line-height: 1.5;
    color: #444;
    margin-bottom: 16px;
}
.cookie__text a { color: var(--color-link); text-decoration: underline; }

/* Cookie toggles */
.cookie__toggles {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    overflow: hidden;
}
.cookie__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: background .2s ease;
}
.cookie__toggle:last-child { border-bottom: none; }
.cookie__toggle:hover { background: rgba(0,0,0,.02); }
.cookie__toggle input { display: none; }
.cookie__toggle-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
.cookie__switch {
    width: 40px;
    height: 22px;
    background: #ccc;
    border-radius: 11px;
    position: relative;
    transition: background .3s ease;
    flex-shrink: 0;
}
.cookie__switch::after {
    content: '';
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform .3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cookie__toggle input:checked + .cookie__switch {
    background: var(--color-accent);
}
.cookie__toggle input:checked + .cookie__switch::after {
    transform: translateX(18px);
}
.cookie__switch--locked {
    background: var(--color-accent);
    opacity: .6;
}
.cookie__switch--locked::after {
    transform: translateX(18px);
}

.cookie__actions { display: flex; gap: 10px; }
.cookie__btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 600;
    cursor: pointer; border: none;
    transition: all .3s var(--ease-out);
}
.cookie__btn--reject { background: #f0f0f0; color: #333; }
.cookie__btn--reject:hover { background: #e0e0e0; transform: scale(1.03); }
.cookie__btn--accept { background: var(--color-accent); color: #fff; }
.cookie__btn--accept:hover { background: var(--color-accent-bright); transform: scale(1.03); box-shadow: 0 4px 15px rgba(45,140,240,.3); }


/* ==========================================================================
   8. SECTION HEADERS
   ========================================================================== */

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -.03em;
    color: #000;
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-header__title--italic {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -.03em;
    color: #000;
    line-height: 1.2;
}

.section-header__subtitle {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(0,0,0,.5);
}


/* ==========================================================================
   9. SCROLL REVEAL SYSTEM
   ========================================================================== */

.reveal       { opacity: 0; transform: translateY(40px);  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-left  { opacity: 0; transform: translateX(-50px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(50px);  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-scale { opacity: 0; transform: scale(.85);        transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   10. FEATURE CARDS
   ========================================================================== */

.features {
    max-width: var(--max-width);
    margin: 0 auto;
    /* Der Ueberlappungs-Effekt gilt nur, wenn dieser Abschnitt DIREKT auf den
       Hero folgt - siehe die Regel darunter. Frueher stand hier pauschal
       margin-top: -300px. Sobald am 16.09. Abschnitte zwischen Hero und
       Features kamen, zog sich dieser Block ueber deren Inhalt. */
    margin-top: 0;
    padding: 0 40px 100px;
    position: relative;
    z-index: 2;
}

/* Die Karten ragen bewusst in den Hero hinein - aber nur dort.
   Zwei Schreibweisen, weil live der Cookie-Hinweis zwischen Hero und
   Features im HTML steht. Nur "+ .features" traf dort nicht mehr, und die
   Ueberlappung fehlte live vom 15.09. abends bis zur Korrektur am 16.09.
   Die Preview liest dieses Stylesheet vom Live-Pfad - jede Regel hier muss
   also fuer beide Seitenfassungen stimmen. */
.hero + .features,
.hero + .cookie + .features {
    margin-top: -300px;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-card);
    min-height: 284px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all .4s var(--ease-out);
}

/* Gradient overlay on hover */
.card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(166,218,255,.03) 0%, transparent 50%, rgba(166,218,255,.02) 100%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

/* Bottom glow on hover */
.card::after {
    content: '';
    position: absolute;
    bottom: -60px; left: 50%;
    transform: translateX(-50%);
    width: 80%; height: 120px;
    background: radial-gradient(50% 50%, rgba(166,218,255,.12) 0%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: all .5s ease;
}

.card:hover {
    border-color: rgba(166,218,255,.2);
    transform: translateY(-6px);
    box-shadow: var(--shadow-card), 0 12px 40px rgba(0,0,0,.3), 0 0 30px rgba(166,218,255,.05);
}
.card:hover::before { opacity: 1; }
.card:hover::after  { opacity: 1; bottom: -40px; }

.card--wide {
    grid-column: 1 / -1;
    text-align: center;
    align-items: center;
}

/* ---- Security Card Animation ---- */
.card--security .card__icons { display: none; }

.security-anim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin-bottom: 24px;
    height: 160px;
}

/* Face ID */
.security-anim__faceid {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.security-anim__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.security-anim__corner {
    opacity: .5;
    transition: opacity .3s ease;
}
.card--security:hover .security-anim__corner {
    animation: faceidPulse 3s ease-in-out infinite;
}
.card--security:hover .security-anim__corner--tr { animation-delay: .15s; }
.card--security:hover .security-anim__corner--bl { animation-delay: .3s; }
.card--security:hover .security-anim__corner--br { animation-delay: .45s; }

.security-anim__face {
    width: 44px;
    height: 44px;
    color: #a6daff;
    opacity: .3;
}

.security-anim__scanline {
    position: absolute;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a6daff, transparent);
    border-radius: 2px;
    opacity: 0;
}

.security-anim__check {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: -2px;
    right: -2px;
    opacity: 0;
    transform: scale(0);
}

/* Lock */
.security-anim__lock {
    width: 60px;
    height: 72px;
}

.security-anim__lock-svg {
    width: 100%;
    height: 100%;
}

.security-anim__lock-body {
    transition: all .5s ease;
}

.security-anim__lock-shackle {
    transform-origin: 32px 24px;
    transition: transform .5s ease, stroke .5s ease;
}
.security-anim__lock-svg {
    overflow: visible;
}

.security-anim__lock-dot {
    transition: fill .5s ease;
}

/* Hover aktiviert alles */
.card--security:hover .security-anim__face {
    animation: faceAppear 4s ease infinite;
}
.card--security:hover .security-anim__scanline {
    animation: scanline 4s 0.5s ease-in-out infinite;
}
.card--security:hover .security-anim__check {
    animation: checkPop 4s 2.5s ease infinite;
}
.card--security:hover .security-anim__lock-shackle {
    animation: shackleOpen 4s 2.8s ease infinite;
}
.card--security:hover .security-anim__lock-dot {
    animation: lockDotGlow 4s 3s ease infinite;
}

/* Keyframes */
@keyframes faceidPulse {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}

@keyframes scanline {
    0% { top: 15%; opacity: 0; }
    5% { opacity: .8; }
    45% { top: 80%; opacity: .8; }
    50% { opacity: 0; }
    100% { opacity: 0; top: 80%; }
}

@keyframes faceAppear {
    0%, 10% { opacity: .3; }
    30%, 60% { opacity: .7; }
    75%, 100% { opacity: .3; }
}

@keyframes checkPop {
    0%, 2% { opacity: 0; transform: scale(0); }
    8% { opacity: 1; transform: scale(1.2); }
    12%, 50% { opacity: 1; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(0); }
}

@keyframes shackleOpen {
    0%, 2% { transform: translateY(0); stroke: #a6daff; }
    10% { transform: translateY(-8px); stroke: #22c55e; }
    50% { transform: translateY(-8px); stroke: #22c55e; }
    60%, 100% { transform: translateY(0); stroke: #a6daff; }
}

@keyframes lockDotGlow {
    0%, 2% { fill: #a6daff; }
    10%, 50% { fill: #22c55e; }
    60%, 100% { fill: #a6daff; }
}


.card__icons { display: flex; gap: 12px; margin-bottom: 24px; }
.card--wide .card__icons { justify-content: center; }

.card__icon-box {
    width: 48px; height: 48px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.08);
    transition: all .4s var(--ease-out);
}
.card:hover .card__icon-box {
    border-color: rgba(59,130,246,.4);
    background: rgba(59,130,246,.15);
    color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(166,218,255,.1);
}

.card__title {
    font-family: 'Inter', sans-serif;
    font-size: 18px; font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    transition: color .3s ease;
}
.card:hover .card__title {
    background: linear-gradient(90deg, #fff, var(--color-accent));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 2s linear infinite;
}

.card__desc {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,.5);
    line-height: 1.6;
    transition: color .3s ease;
}
.card:hover .card__desc { color: rgba(255,255,255,.7); }


/* ==========================================================================
   11. COMPARISON SECTION
   ========================================================================== */

.comparison {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 40px;
}

.comparison__wrapper {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 48px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: all .4s var(--ease-out);
}
.comparison__wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(166,218,255,.03) 0%, transparent 50%, rgba(166,218,255,.02) 100%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.comparison__wrapper::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 120px;
    background: radial-gradient(50% 50%, rgba(166,218,255,.12) 0%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: all .5s ease;
}
.comparison__wrapper:hover {
    border-color: rgba(166, 218, 255, .2);
    transform: translateY(-6px);
    box-shadow: var(--shadow-card), 0 12px 40px rgba(0,0,0,.3), 0 0 30px rgba(166,218,255,.05);
}
.comparison__wrapper:hover::before { opacity: 1; }
.comparison__wrapper:hover::after { opacity: 1; bottom: -40px; }

.comparison__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}
.comparison__logo-img {
    width: 240px;
    height: auto;
    transition: filter .5s ease, transform .5s ease;
}
.comparison__wrapper:hover .comparison__logo-img {
    filter: brightness(1.6) drop-shadow(0 0 20px rgba(166,218,255,.4));
    transform: scale(1.05);
}

.comparison__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.comparison__col {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all .4s ease;
}
.comparison__col:hover {
    border-color: var(--color-border-glow);
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

.comparison__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,.7);
    padding: 4px 0;
    transition: all .3s ease;
}
.comparison__item:hover { transform: translateX(6px); color: #fff; }

.comparison__check { width: 20px; height: 20px; flex-shrink: 0; }
.comparison__check path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset .6s ease;
}
.comparison__item.is-checked .comparison__check path { stroke-dashoffset: 0; }


/* ==========================================================================
   12. WHY SECTION
   ========================================================================== */

.why {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 40px;
}

.why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why__card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all .5s var(--ease-out);
}
.why__card:hover {
    border-color: rgba(166,218,255,.2);
    transform: translateY(-8px);
    box-shadow: var(--shadow-card), 0 20px 50px rgba(0,0,0,.3), 0 0 30px rgba(166,218,255,.05);
}

.why__card-visual {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.03);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.why__card-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px; font-weight: 600;
    color: #fff;
    padding: 24px 24px 8px;
    transition: color .3s ease;
}
.why__card:hover .why__card-title { color: var(--color-accent); }

.why__card-desc {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,.5);
    padding: 0 24px 24px;
    line-height: 1.6;
}

/* ---- TACHO ---- */
.tacho { display: flex; flex-direction: column; align-items: center; }
.tacho__svg { width: 200px; height: 130px; }
.tacho__arc {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tacho__needle {
    transform-origin: 100px 105px;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tacho__center {
    transition: fill .4s ease, box-shadow .4s ease;
}
.tacho__display {
    transition: fill .4s ease;
}
.why__card--tacho:hover .tacho__arc { stroke-dashoffset: 10; }
.why__card--tacho:hover .tacho__needle { transform: rotate(140deg); }
.why__card--tacho:hover .tacho__center { fill: #3b82f6; }
.why__card--tacho:hover .tacho__display { fill: #3b82f6; }

/* ---- GRIFF (Dashboard) ---- */
.griff-anim { display: flex; align-items: center; justify-content: center; }
.griff-anim__svg { width: 170px; height: 130px; }
.griff-anim__frame { transition: stroke .4s ease; }
.griff-anim__bar { transition: fill .4s ease, width .6s var(--ease-out); }
.griff-anim__tick { transition: stroke .3s ease; }
.griff-anim__progress { transition: width .8s var(--ease-out) .2s; }

.why__card--griff:hover .griff-anim__frame { stroke: rgba(59,130,246,.4); }
.why__card--griff:hover .griff-anim__bar--1 { fill: rgba(59,130,246,.25); }
.why__card--griff:hover .griff-anim__bar--2 { fill: rgba(59,130,246,.2); }
.why__card--griff:hover .griff-anim__bar--3 { fill: rgba(59,130,246,.3); }
.why__card--griff:hover .griff-anim__tick--1 { stroke: #3b82f6; animation: tickDraw .4s .2s ease forwards; }
.why__card--griff:hover .griff-anim__tick--2 { stroke: #3b82f6; animation: tickDraw .4s .4s ease forwards; }
.why__card--griff:hover .griff-anim__tick--3 { stroke: #3b82f6; animation: tickDraw .4s .6s ease forwards; }
.why__card--griff:hover .griff-anim__progress { width: 120px; }

@keyframes tickDraw {
    0% { opacity: .15; transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---- SHARE ---- */
.share-anim { display: flex; align-items: center; justify-content: center; }
.share-anim__svg { width: 170px; height: 120px; }
.share-anim__packet { opacity: 0; }
.share-anim__doc { transition: opacity .3s ease .4s; }
.share-anim__line { transition: opacity .3s ease; }

.share-anim__circle, .share-anim__person {
    transition: stroke .4s ease, fill .4s ease;
}
.why__card--share:hover .share-anim__circle { stroke: #3b82f6; fill: rgba(59,130,246,.1); }
.why__card--share:hover .share-anim__person { stroke: #3b82f6; }
.why__card--share:hover .share-anim__line { opacity: .6; stroke: #3b82f6; }
.why__card--share:hover .share-anim__doc { opacity: 1 !important; }
.why__card--share:hover .share-anim__packet--1 {
    animation: packetMove 1.5s .1s ease-in-out infinite;
}
.why__card--share:hover .share-anim__packet--2 {
    animation: packetMove 1.5s .5s ease-in-out infinite;
}
.why__card--share:hover .share-anim__packet--3 {
    animation: packetMove 1.5s .9s ease-in-out infinite;
}

@keyframes packetMove {
    0% { cx: 50; opacity: 0; }
    10% { opacity: .8; }
    90% { opacity: .8; }
    100% { cx: 130; opacity: 0; }
}

.share-anim__svg { width: 190px; height: 130px; }

/* ---- TOUCH: auto-play animations on scroll ---- */
.why__card--tacho.is-touch-active .tacho__arc { stroke-dashoffset: 10; }
.why__card--tacho.is-touch-active .tacho__needle { transform: rotate(140deg); }
.why__card--tacho.is-touch-active .tacho__center { fill: #3b82f6; }

.why__card--griff.is-touch-active .griff-anim__frame { stroke: rgba(59,130,246,.4); }
.why__card--griff.is-touch-active .griff-anim__bar--1 { fill: rgba(59,130,246,.25); }
.why__card--griff.is-touch-active .griff-anim__bar--2 { fill: rgba(59,130,246,.2); }
.why__card--griff.is-touch-active .griff-anim__bar--3 { fill: rgba(59,130,246,.3); }
.why__card--griff.is-touch-active .griff-anim__tick--1 { stroke: #3b82f6; animation: tickDraw .4s .2s ease forwards; }
.why__card--griff.is-touch-active .griff-anim__tick--2 { stroke: #3b82f6; animation: tickDraw .4s .4s ease forwards; }
.why__card--griff.is-touch-active .griff-anim__tick--3 { stroke: #3b82f6; animation: tickDraw .4s .6s ease forwards; }
.why__card--griff.is-touch-active .griff-anim__progress { width: 120px; }

.why__card--share.is-touch-active .share-anim__circle { stroke: #3b82f6; fill: rgba(59,130,246,.1); }
.why__card--share.is-touch-active .share-anim__person { stroke: #3b82f6; }
.why__card--share.is-touch-active .share-anim__line { opacity: .6; stroke: #3b82f6; }
.why__card--share.is-touch-active .share-anim__doc { opacity: 1 !important; }
.why__card--share.is-touch-active .share-anim__packet--1 { animation: packetMove 1.5s .1s ease-in-out infinite; }
.why__card--share.is-touch-active .share-anim__packet--2 { animation: packetMove 1.5s .5s ease-in-out infinite; }
.why__card--share.is-touch-active .share-anim__packet--3 { animation: packetMove 1.5s .9s ease-in-out infinite; }

/* Security card touch */
.card--security.is-touch-active .security-anim__corner { animation: faceidPulse 3s ease-in-out infinite; }
.card--security.is-touch-active .security-anim__face { animation: faceAppear 4s ease infinite; }
.card--security.is-touch-active .security-anim__scanline { animation: scanline 4s 0.5s ease-in-out infinite; }
.card--security.is-touch-active .security-anim__check { animation: checkPop 4s 2.5s ease infinite; }
.card--security.is-touch-active .security-anim__lock-shackle { animation: shackleOpen 4s 2.8s ease infinite; }
.card--security.is-touch-active .security-anim__lock-dot { animation: lockDotGlow 4s 3s ease infinite; }


/* ==========================================================================
   13. DSGVO SECTION
   ========================================================================== */

.dsgvo {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 40px;
}

.dsgvo__carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    perspective: 1200px;
}

.dsgvo__btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: 10;
    transition: all .3s var(--ease-out);
}
.dsgvo__btn:hover { border-color: var(--color-accent); color: var(--color-accent); transform: scale(1.1); box-shadow: 0 0 20px rgba(59,130,246,.15); }
.dsgvo__btn:active { transform: scale(.95); }

.dsgvo__track {
    position: relative;
    width: 420px;
    height: 420px;
    transform-style: preserve-3d;
}

.dsgvo__card {
    position: absolute;
    width: 380px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: all .6s var(--ease-out);
    opacity: 0;
}
.dsgvo__card[data-pos="center"] {
    transform: translate(-50%, -50%) translateZ(0) scale(1);
    opacity: 1;
    z-index: 3;
}
.dsgvo__card[data-pos="left"] {
    transform: translate(-115%, -50%) translateZ(-120px) rotateY(25deg) scale(0.85);
    opacity: 0.4;
    z-index: 1;
    filter: blur(1.5px);
}
.dsgvo__card[data-pos="right"] {
    transform: translate(15%, -50%) translateZ(-120px) rotateY(-25deg) scale(0.85);
    opacity: 0.4;
    z-index: 1;
    filter: blur(1.5px);
}
.dsgvo__card:hover { border-color: rgba(166,218,255,.2); box-shadow: var(--shadow-card), 0 12px 40px rgba(0,0,0,.3); }

.dsgvo__card-visual {
    height: 200px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}

/* Lock icons */
.dsgvo__locks { display: flex; align-items: flex-end; gap: 16px; }
.dsgvo__lock { transition: all .5s var(--ease-out); }
.dsgvo__lock svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(91,184,245,.2)); }
.dsgvo__lock--sm { width: 56px; height: 56px; opacity: .6; }
.dsgvo__lock--lg { width: 80px; height: 80px; }

.dsgvo__card:hover .dsgvo__lock--sm:first-child { animation: lockBounce .8s ease; transform: translateY(-8px); }
.dsgvo__card:hover .dsgvo__lock--lg { animation: lockBounce .8s .1s ease; transform: translateY(-12px); filter: drop-shadow(0 0 20px rgba(91,184,245,.4)); }
.dsgvo__card:hover .dsgvo__lock--sm:last-child  { animation: lockBounce .8s .2s ease; transform: translateY(-8px); }

/* Shield icons */
.dsgvo__shields { display: flex; align-items: center; gap: 24px; }
.dsgvo__shield { width: 80px; height: 80px; transition: all .5s var(--ease-out); }
.dsgvo__shield svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(91,184,245,.2)); }
.dsgvo__shield--dark { opacity: .7; }

.dsgvo__card:hover .dsgvo__shield:first-child      { animation: shieldPulse 1s ease; transform: scale(1.1); }
.dsgvo__card:hover .dsgvo__shield.dsgvo__shield--dark { animation: shieldPulse 1s .15s ease; transform: scale(1.05); opacity: .9; }

.dsgvo__card-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px; font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.dsgvo__card-desc {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,.5);
    line-height: 1.6;
}

.dsgvo__server {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.dsgvo__server-svg {
    width: 140px;
    height: 160px;
    transition: transform .5s var(--ease-out), filter .5s ease;
}
.dsgvo__server-svg rect {
    transition: stroke .4s ease;
}
.dsgvo__server-svg circle {
    transition: transform .3s ease, filter .3s ease;
}
.dsgvo__card:hover .dsgvo__server-svg {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(59,130,246,.3));
}
.dsgvo__card:hover .dsgvo__server-svg rect {
    stroke: #3b82f6;
}
.dsgvo__card:hover .dsgvo__server-svg circle {
    filter: drop-shadow(0 0 6px currentColor);
    animation: ledBlink 1s ease-in-out infinite;
}
.dsgvo__flag {
    font-size: 32px;
    transition: transform .4s ease;
}
.dsgvo__card:hover .dsgvo__flag {
    transform: scale(1.2);
}

@keyframes ledBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}


/* ==========================================================================
   14. PRICING SECTION
   ========================================================================== */

.pricing {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 40px;
}

.pricing__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 40px;
}
.pricing__toggle-label {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(0,0,0,.35);
    cursor: pointer;
    transition: color .3s ease;
}
.pricing__toggle-label--active {
    color: #000;
    font-weight: 600;
}
.pricing__toggle-save {
    font-size: 11px;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34,197,94,.1);
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 4px;
}
.pricing__toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    cursor: pointer;
}
.pricing__toggle-switch input { display: none; }
.pricing__toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.1);
    border-radius: 13px;
    transition: background .3s ease;
}
.pricing__toggle-slider::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .3s ease;
}
.pricing__toggle-switch input:checked + .pricing__toggle-slider {
    background: var(--color-accent);
}
.pricing__toggle-switch input:checked + .pricing__toggle-slider::after {
    transform: translateX(22px);
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.pricing__card {
    background: var(--color-bg-card);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all .4s var(--ease-out);
    display: flex;
    flex-direction: column;
}

.pricing__card .pricing__features { flex: 1; }
.pricing__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,.1);
    border-color: rgba(59,130,246,.2);
}

.pricing__card--popular {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent), 0 12px 40px rgba(59,130,246,.1);
}

.pricing__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--color-accent);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

.pricing__header {
    padding: 32px 28px 24px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.pricing__name {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    display: block;
    margin-bottom: 8px;
}

.pricing__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}

.pricing__amount {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
}
.pricing__amount--tbd {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,.3);
    letter-spacing: .02em;
}

.pricing__period {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,.4);
}

.pricing__docs {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    color: var(--color-accent);
    font-weight: 500;
}
.pricing__docs-num {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.pricing__features {
    padding: 20px 28px;
}

.pricing__group-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin: 16px 0 10px;
}
.pricing__group-label:first-child { margin-top: 0; }

.pricing__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    min-height: 48px;
}
.pricing__item svg { flex-shrink: 0; margin-top: 3px; }
.pricing__item--yes span { color: rgba(255,255,255,.8); }
.pricing__item--no span { color: rgba(255,255,255,.25); text-decoration: line-through; }
.pricing__item--hint span { color: #f59e0b; }

.pricing__btn {
    display: block;
    margin: 20px 28px 28px;
    padding: 14px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    transition: all .3s ease;
}
.pricing__btn:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.25);
}

.pricing__btn--popular {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.pricing__btn--popular:hover {
    background: var(--color-accent-bright);
    box-shadow: 0 4px 15px rgba(59,130,246,.3);
}

.pricing__btn--soon {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

.pricing__card--enterprise {
    border-color: rgba(255,255,255,.2);
    background: linear-gradient(145deg, #2a3142 0%, #1a1f2e 100%);
}

.pricing__btn--enterprise {
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}
.pricing__btn--enterprise:hover {
    background: var(--color-accent);
    color: #fff;
}

.pricing__addon {
    text-align: center;
    margin-top: 32px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Pricing responsive */
@media (max-width: 1199px) {
    .pricing__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .pricing__header { padding: 24px 20px 20px; }
    .pricing__features { padding: 16px 20px; }
    .pricing__amount { font-size: 30px; }
    .pricing__btn { margin: 16px 20px 24px; }
}

@media (max-width: 809px) {
    .pricing { padding: 60px 16px; }
    .pricing__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .pricing__card--popular { order: 0; }
}

@media (max-width: 390px) {
    .pricing { padding: 48px 14px; }
    .pricing__amount { font-size: 28px; }
    .pricing__item { font-size: 12px; }
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.footer {
    padding: 100px 40px 60px;
    border-top: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(50% 50%, rgba(166,218,255,.06) 0%, transparent 100%);
    pointer-events: none;
}

.footer__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

.footer__badge {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--color-accent);
    letter-spacing: .05em;
    padding: 6px 16px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: rgba(166,218,255,.05);
    transition: all .4s ease;
    animation: borderGlow 3s ease-in-out infinite;
}
.footer__badge:hover { background: rgba(166,218,255,.1); transform: scale(1.05); box-shadow: 0 0 20px rgba(166,218,255,.1); }

.footer__title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 40px;
    letter-spacing: -.03em;
    background: linear-gradient(161deg, rgb(213,219,230) 30%, rgb(4,7,13) 180%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    max-width: 600px;
    animation: gradientShift 6s ease infinite;
}

.footer__cta {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: var(--color-text-muted);
    transition: color .3s ease;
}
.footer__cta:hover { color: #fff; }

.footer__newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 460px;
    margin: 20px auto 0;
}
.footer__newsletter-row {
    display: flex;
    width: 100%;
    max-width: 440px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.15);
    background: #1a1f2e;
}
.footer__newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    color: #5a6577;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}
.footer__newsletter-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.footer__newsletter-consent a {
    color: var(--color-accent);
    text-decoration: underline;
}
.footer__newsletter-input {
    flex: 1;
    padding: 14px 18px;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
    -webkit-text-fill-color: #fff;
}
.footer__newsletter-input::placeholder { color: rgba(255,255,255,.4); -webkit-text-fill-color: rgba(255,255,255,.4); }
.footer__newsletter-input:focus { background: rgba(255,255,255,.05); }
.footer__newsletter-btn {
    padding: 14px 24px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease;
    white-space: nowrap;
}
.footer__newsletter-btn:hover { background: var(--color-accent-bright); }
.footer__newsletter-hint {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    color: #5a6577;
    margin-top: 10px;
}

.footer__social { display: flex; align-items: center; gap: 16px; margin-top: 20px; }

.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.footer__link {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    color: var(--color-text-muted);
    position: relative;
    transition: all .3s ease;
}
.footer__link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: var(--color-accent);
    transition: width .3s ease;
}
.footer__link:hover { color: var(--color-accent); }
.footer__link:hover::after { width: 100%; }


/* ==========================================================================
   15. SHARED COMPONENTS
   ========================================================================== */

.social-icon {
    color: var(--color-text-muted);
    display: flex; align-items: center;
    transition: all .3s var(--ease-out);
}
.social-icon:hover {
    color: var(--color-accent);
    transform: translateY(-3px) scale(1.15);
    filter: drop-shadow(0 4px 8px rgba(166,218,255,.3));
}

.social-icon__divider {
    color: rgba(255,255,255,.1);
    font-size: 20px;
    user-select: none;
}


/* ==========================================================================
   16. RESPONSIVE – TABLET (810px – 1199px)
   ========================================================================== */

@media (min-width: 810px) and (max-width: 1199px) {
    .features__grid   { grid-template-columns: repeat(2, 1fr); }
    .why__grid         { grid-template-columns: repeat(2, 1fr); }
    .why__card:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }

    .section-header__title { font-size: 32px; }
    .footer__title         { font-size: 34px; }

    .comparison__wrapper   { padding: 36px; }
    .comparison__columns   { gap: 20px; }
    .comparison__logo-img  { width: 200px; }

    .card                  { padding: 28px; }
    .why__card-title       { padding: 20px 20px 6px; }
    .why__card-desc        { padding: 0 20px 20px; }

    .dsgvo__track          { width: 360px; height: 380px; }
    .dsgvo__card           { width: 320px; padding: 32px; }

    .nav__links            { gap: 16px; padding: 8px 20px; }
    .nav__link             { font-size: 14px; }
    .hero__phone           { max-width: 380px; margin-top: -80px; }
    .hero__social          { margin-top: -200px; gap: 32px; }
    /* Nur direkt nach dem Hero - sonst schiebt sich der Block ueber den
       Abschnitt davor (seit dem 16.09. steht dort "Dokumente einlesen"). */
    .hero + .features,
    .hero + .cookie + .features { margin-top: -150px; }
}


/* ==========================================================================
   17. RESPONSIVE – MOBILE (< 810px)
   ========================================================================== */

/* Hide desktop nav on mobile */
.nav__hamburger { display: none; }

@media (max-width: 809px) {
    .nav__links      { display: none !important; }
    .nav__hamburger  { display: flex !important; }
    .nav-mobile      { display: flex; }

    .nav__wrapper { padding: 0 20px; }
    .nav__logo-img { height: 26px !important; max-height: 26px; }
    .nav__logo-text { font-size: 18px; }

    .hero { padding: 100px 20px 40px; }
    .hero__phone { max-width: 240px; margin-top: -60px; }
    .hero__doc { width: 20px !important; }
    .hero__glow { width: 400px; height: 300px; }
    .hero__social { margin-top: 0; gap: 24px; }

    .features { padding: 0 16px 60px; }
    .hero + .features,
    .hero + .cookie + .features { margin-top: -120px; }
    .comparison,
    .why,
    .dsgvo,
    .pricing,
    .footer { padding: 60px 16px; }

    .features__grid       { grid-template-columns: 1fr; gap: 16px; }
    .card                  { min-height: auto; padding: 24px; }
    .card:hover            { transform: translateY(-3px); }

    .section-header        { margin-bottom: 36px; }
    .section-header__title { font-size: 28px; }
    .section-header__subtitle { font-size: 14px; }

    .comparison__columns   { grid-template-columns: 1fr; gap: 16px; }
    .comparison__wrapper   { padding: 20px; }
    .comparison__logo      { margin-bottom: 24px; }
    .comparison__logo-img  { width: 160px; }
    .comparison__col       { padding: 20px; }
    .comparison__item      { font-size: 14px; padding: 10px 0; }

    .why__grid             { grid-template-columns: 1fr; gap: 16px; }
    .why__card:last-child  { max-width: 100%; }
    .why__card:hover       { transform: translateY(-4px); }
    .why__card-visual      { height: 160px; }
    .why__card-title       { font-size: 16px; padding: 16px 16px 6px; }
    .why__card-desc        { font-size: 13px; padding: 0 16px 16px; }
    .tacho__svg            { width: 160px; height: 104px; }
    .griff-anim__svg       { width: 140px; height: 110px; }
    .share-anim__svg       { width: 160px; height: 110px; }

    .security-anim         { gap: 32px; height: 100px; }
    .security-anim__faceid { width: 80px; height: 80px; }
    .security-anim__face   { width: 32px; height: 32px; }
    .security-anim__lock   { width: 40px; height: 48px; }

    .dsgvo__carousel       { perspective: none; gap: 0; }
    .dsgvo__track          { width: 100%; height: auto; transform-style: flat; display: flex; flex-direction: column; position: relative; }
    .dsgvo__card           { position: relative; width: 100%; top: auto; left: auto; transform: none !important; opacity: 1 !important; filter: none !important; padding: 28px 20px; margin-bottom: 16px; }
    .dsgvo__card[data-pos="left"],
    .dsgvo__card[data-pos="right"],
    .dsgvo__card[data-pos="center"] { transform: none !important; opacity: 1 !important; filter: none !important; z-index: auto; }
    .dsgvo__btn            { display: none; }
    .dsgvo__card-visual    { height: 140px; }
    .dsgvo__card-title     { font-size: 17px; }
    .dsgvo__card-desc      { font-size: 13px; }
    .dsgvo__locks          { gap: 12px; }
    .dsgvo__lock--lg       { width: 60px; height: 60px; }
    .dsgvo__lock--sm       { width: 40px; height: 40px; }
    .dsgvo__shield         { width: 60px; height: 60px; }
    .dsgvo__server-svg     { width: 100px; height: 120px; }
    .dsgvo__flag           { font-size: 24px; }

    .footer__title         { font-size: 24px; }
    .footer__badge         { font-size: 14px; }
    .footer__social        { gap: 16px; }
    .footer__cta           { font-size: 16px; }
    .hero__social          { gap: 12px; }

    .cookie {
        width: auto;
        left: 12px;
        right: 12px;
        bottom: 24px;
        transform: none;
    }
    .cookie__inner { padding: 20px; }
    .cookie__toggle-label { font-size: 13px; }
    .cookie__btn { font-size: 13px; padding: 11px 12px; }
}

/* Extra small phones (iPhone SE, etc.) */
@media (max-width: 390px) {
    .hero { padding: 90px 14px 30px; }
    .hero__phone { max-width: 200px; margin-top: -40px; }
    .hero__glow { width: 300px; height: 250px; }
    .hero__social { margin-top: 0; gap: 16px; }
    .nav__logo-img { height: 22px !important; max-height: 22px; }
    .nav__logo-text { font-size: 16px; }

    .features,
    .comparison,
    .why,
    .dsgvo,
    .footer { padding: 48px 14px; }

    .section-header__title { font-size: 24px; }

    .comparison__wrapper   { padding: 16px; }
    .comparison__col       { padding: 16px; }
    .comparison__item      { font-size: 13px; gap: 8px; }
    .comparison__logo-img  { width: 120px; }

    .card                  { padding: 20px; }
    .card__title           { font-size: 16px; }
    .card__desc            { font-size: 13px; }

    .why__card-visual      { height: 130px; }
    .tacho__svg            { width: 130px; height: 85px; }
    .griff-anim__svg       { width: 120px; height: 90px; }
    .share-anim__svg       { width: 140px; height: 95px; }
    .why__card-title       { font-size: 15px; padding: 14px 14px 6px; }
    .why__card-desc        { font-size: 12px; padding: 0 14px 14px; }

    .security-anim         { gap: 20px; height: 80px; }
    .security-anim__faceid { width: 64px; height: 64px; }
    .security-anim__face   { width: 26px; height: 26px; }
    .security-anim__lock   { width: 32px; height: 40px; }
    .security-anim__check  { width: 22px; height: 22px; }

    .dsgvo__card           { padding: 20px 16px; }
    .dsgvo__card-visual    { height: 110px; }
    .dsgvo__server-svg     { width: 80px; height: 100px; }

    .footer__title         { font-size: 20px; }
    .footer__cta           { font-size: 14px; }
    .footer__badge         { font-size: 12px; padding: 5px 12px; }
}


/* ==========================================================================
   18. ACCESSIBILITY – REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   ENTWURF DigiFiles — neue Abschnittsbausteine
   ==========================================================================
   Angelegt am 16.09.2026 fuer den Ausbau der DigiFiles-Produktseite.

   Warum HIER und nicht in der style.css im Wurzelverzeichnis: DigiFiles ist
   seit dem 15.09. ein eigenstaendiges Produkt und laedt seine eigene
   styles.css. Eine Ergaenzung im Wurzelverzeichnis wuerde diese Seiten gar
   nicht erreichen - genau das ist mir beim ersten Versuch passiert.

   Farben und Abstaende kommen weiterhin aus den Variablen des Hausstils,
   die in dieser Datei stehen. Es ist also kein eigenes Erscheinungsbild,
   nur ein eigener Ablageort.
   ========================================================================== */

/* --- Plattformzeile: drei Geraete, ein Konto ----------------------------- */

.df-plattformen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.df-plattform {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.df-plattform__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(45, 140, 240, 0.1);
    color: var(--color-accent-bright);
    display: grid;
    place-items: center;
    margin-bottom: 6px;
}

.df-plattform__name { font-weight: 650; font-size: 1rem; }
.df-plattform__text { font-size: .92rem; color: #5a6577; line-height: 1.6; margin: 0; }

.df-hinweis {
    margin-top: 22px;
    padding: 16px 20px;
    border-left: 2px solid var(--color-accent);
    background: rgba(45, 140, 240, 0.05);
    border-radius: 0 10px 10px 0;
    font-size: .95rem;
    line-height: 1.65;
}

/* --- Quellenraster: woher die Dokumente kommen -------------------------- */

.df-quellen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 32px;
}

.df-quelle {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
    font-weight: 550;
}

.df-quelle__punkt {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    flex: none;
}

/* --- Bereiche: die Trennung im Konto ------------------------------------ */

.df-bereiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 36px;
}

.df-bereich {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
}

.df-bereich__name { font-weight: 650; font-size: .98rem; }
.df-bereich__was { font-size: .88rem; color: #5a6577; line-height: 1.55; }

/* --- "Auch interessant für Sie" ----------------------------------------- */
/* Entspricht dem Baustein, den DiKita in produkte/dikita/styles.css hat -
   hier im Hausstil, damit ihn auch DigiFiles und kuenftige Produkte nutzen. */

.related-pages { background: var(--color-bg-secondary); }

.related-pages h2 {
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.1rem);
    margin: 0 0 28px;
}

.related-pages__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    max-width: 1180px;
}

.related-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px 26px 22px;
    text-decoration: none;
    color: inherit;
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
                border-color .22s var(--ease-out);
}

.related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(17, 24, 39, .08);
    border-color: var(--color-border-glow);
}

.related-card__icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(45, 140, 240, .1);
    color: var(--color-accent-bright);
    margin-bottom: 14px;
}

.related-card h3 {
    font-size: 1.02rem;
    font-weight: 650;
    margin: 0 0 6px;
    /* minmax(0,1fr) oben plus Umbruch hier: sonst sprengt ein langes Wort
       die Karte auf schmalen Geraeten. Genau der Fehler, der am 15.09. auf
       den DiKita-Seiten den seitlichen Ueberlauf verursacht hat. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.related-card p {
    font-size: .92rem;
    line-height: 1.6;
    color: #5a6577;
    margin: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.related-card__arrow {
    position: absolute;
    right: 22px;
    bottom: 20px;
    color: var(--color-accent);
    transition: transform .22s var(--ease-out);
}

.related-card:hover .related-card__arrow { transform: translateX(3px); }

@media (max-width: 820px) {
    .df-plattformen { grid-template-columns: 1fr; }
    .related-pages__grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
}

@media (prefers-reduced-motion: reduce) {
    .related-card, .related-card__arrow { transition: none; }
}

/* ==========================================================================
   ENTWURF DigiFiles — Hero mit Aussage
   ==========================================================================
   Vorher bestand der Hero nur aus dem Telefonbild. Wer auf die Seite kam,
   las kein Wort, bevor er scrollte. DiKita zieht mit Ueberschrift, einem
   Satz und einer Vertrauenszeile an - dieser Aufbau hier ist derselbe,
   in den DigiFiles-Farben.

   Die Regeln stehen am Dateiende und haengen an .hero--df. So ueberstimmen
   sie die alten .hero-Regeln samt deren Medienabfragen, ohne dass dort
   etwas geloescht werden muss.
   ========================================================================== */

/* Der Seitenkoerper haelt Platz fuer die fest stehende Navigationsleiste
   frei - genau wie bei DiKita. Dadurch beginnt der Hero auf beiden Seiten
   bei 44px statt unter der Leiste durchzulaufen, und die Innenabstaende
   sind auf beiden Seiten dieselben Zahlen (64 oben, 96 unten). */
body.df2 { padding-top: 44px; }

.hero--df {
    display: block;
    padding: 64px 40px 96px;
}

.hero--df .hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.hero__eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-bright);
    margin-bottom: 20px;
}

.hero__text { animation: fadeInUp .9s .15s var(--ease-out) both; }

.hero__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2.3rem, 1.2rem + 3.2vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: #0f1520;
    margin: 0 0 26px;
}

.hero__accent {
    position: relative;
    display: inline-block;
    color: var(--color-accent-bright);
    white-space: nowrap;
}

/* Handgezeichneter Strich wie bei DiKita - hier zeichnet er sich einmal. */
.hero__underline {
    position: absolute;
    left: 0; right: 0;
    bottom: -0.14em;
    width: 100%;
    height: 0.3em;
    color: var(--color-accent);
    overflow: visible;
    pointer-events: none;
}
.hero__underline path {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: dfStrich 1s .9s var(--ease-out) forwards;
}
@keyframes dfStrich { to { stroke-dashoffset: 0; } }

.hero__lead {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.14rem;
    line-height: 1.65;
    color: #4b5565;
    max-width: 540px;
    margin: 0 0 32px;
}

.hero__trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    font-size: 0.88rem;
    color: #5a6577;
}
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { color: var(--color-accent-bright); flex: none; }

/* --- Bildseite ------------------------------------------------------------
   Das Telefonbild hat oben und unten viel transparente Flaeche. Statt mit
   negativen Abstaenden zu schieben, liegt es in einer festen Buehne und wird
   dort mittig ausgerichtet. Die Flaeche ausserhalb schneidet der Hero ab. */

.hero--df .hero__visual {
    position: relative;
    /* Hoehe in denselben Stufen wie DiKitas Foto, damit der Hero auf beiden
       Seiten gleich hoch ist. Werte gemessen: DiKita-Hero minus die 160px
       Innenabstand - 1600+ 887, 1440 817, 1200-1280 737, 960-1024 728.
       DiKitas Foto waechst in Stufen, nicht gleichmaessig; deshalb Stufen
       und keine Formel. */
    height: 727px;
}

@media (max-width: 1599px) { .hero--df .hero__visual { height: 657px; } }
@media (max-width: 1280px) { .hero--df .hero__visual { height: 577px; } }
@media (max-width: 1024px) { .hero--df .hero__visual { height: 568px; } }

.hero--df .hero__stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 560px;
    transform: translate(-50%, -44%);
}

.hero--df .hero__phone {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* --- Ablauf-Leiste unter "Was DigiFiles fuer dich erledigt" ------------- */

.df-ablauf {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 4px;
    /* Breit genug, dass am Desktop alle acht Schritte in eine Zeile passen -
       bei 920px rutschte "Fristen verfolgen" allein in die zweite. */
    max-width: 1100px;
    margin: -28px auto 48px;
}
.df-ablauf li { display: inline-flex; align-items: center; }
.df-ablauf span {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-bright);
    background: rgba(45, 140, 240, .08);
    border-radius: 999px;
    padding: 7px 14px;
}
.df-ablauf li:not(:last-child)::after {
    content: '→';
    margin: 0 6px 0 10px;
    color: rgba(15, 21, 32, .25);
}

/* --- KI-Assistent ------------------------------------------------------- */

.df-chat { background: var(--color-bg-secondary); }

.df-chat__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.df-chat__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #000;
    margin: 0 0 18px;
}

.df-chat__text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: #4b5565;
    margin: 0 0 24px;
}

.df-chat__fragen {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}
.df-chat__fragen li {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    color: #111827;
}
.df-chat__fragen li::before { content: '„'; color: var(--color-accent); }
.df-chat__fragen li::after  { content: '“'; color: var(--color-accent); }

.df-chat__fenster {
    background: #1a1f2e;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, .18);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.df-chat__kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    font-weight: 600;
}
.df-chat__kopf small { margin-left: auto; color: rgba(255, 255, 255, .45); font-size: 12px; font-weight: 500; }
.df-chat__punkt { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

.df-chat__verlauf {
    padding: 22px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.df-chat__frage {
    align-self: flex-end;
    max-width: 85%;
    margin: 0;
    background: var(--color-accent);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    padding: 10px 14px;
    font-size: 14px;
}

.df-chat__antwort {
    align-self: flex-start;
    max-width: 94%;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .88);
    border-radius: 16px 16px 16px 4px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
}
.df-chat__antwort ul { list-style: none; margin: 10px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.df-chat__antwort li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
}
.df-chat__antwort b  { color: #fff; font-weight: 600; }
.df-chat__antwort em { font-style: normal; color: #a6daff; font-size: 13px; }
.df-chat__quellen { font-size: 12px; color: rgba(255, 255, 255, .45); }

.df-chat__aktion {
    align-self: flex-start;
    border: 1px solid rgba(166, 218, 255, .35);
    color: #a6daff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
}

/* --- Tablet und Telefon ------------------------------------------------- */

@media (max-width: 860px) {
    /* Telefonwerte ebenfalls von DiKita: 40px oben, 64px unten - die 44px
       fuer die Navigationsleiste stehen im Seitenkoerper. */
    .hero--df { padding: 40px 24px 64px; }
    .hero--df .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* Gestapelt. Hoehe = DiKitas Hero-Hoehe minus 104px Innenabstand minus
       der hier gemessenen Texthoehe:
         768px: 1245 - 104 - 360 = 781
         600px: 1213 - 104 - 331 = 778
         480px: 1188 - 104 - 385 = 699
         390px: 1228 - 104 - 448 = 676
       Die Texthoehe springt mit den Zeilenumbruechen, deshalb stimmen die
       Werte genau an diesen Breiten und dazwischen auf wenige Pixel. */
    .hero--df .hero__visual { height: 781px; }
    .hero--df .hero__stage { width: 520px; }

    .df-chat__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 809px) {
    .df-ablauf { margin: -12px auto 32px; }
}

@media (max-width: 600px) {
    .hero--df .hero__visual { height: 778px; }
    .hero--df .hero__stage { width: 470px; }
}

@media (max-width: 480px) {
    .hero--df { padding: 40px 16px 64px; }
    .hero__eyebrow { font-size: 0.72rem; letter-spacing: 0.09em; }
    .hero__lead { font-size: 1.02rem; }
    .hero__trust { gap: 10px 18px; font-size: 0.84rem; }

    .hero--df .hero__visual { height: 699px; }
    .hero--df .hero__stage { width: 390px; }

    .df-ablauf span { font-size: 12px; padding: 6px 11px; }
    /* Sonst bricht die Kopfzeile des Chatfensters zweizeilig um. */
    .df-chat__kopf small { display: none; }
    .df-chat__fragen li { font-size: 13px; }
}

@media (max-width: 400px) {
    .hero--df .hero__visual { height: 676px; }
    .hero--df .hero__stage { width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__underline path { stroke-dashoffset: 0; }
}

/* ==========================================================================
   ENTWURF DigiFiles — Tarife und DigiTokens
   ==========================================================================
   Seit der Umstellung auf Grundpreis plus DigiTokens gibt es zwei Tarife
   statt vier. Die alten .pricing-Regeln bleiben fuer die Live-Seite stehen
   (die Preview liest dieses Stylesheet vom Live-Pfad); alles Neue haengt an
   .pricing--df und .df-tokens.
   ========================================================================== */

.pricing--df .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin: 0 auto;
}

.pricing--df .pricing__price { margin-bottom: 4px; }
.pricing--df .pricing__period { margin-left: 4px; }
.pricing__jahr {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    color: var(--color-accent);
}

/* Die alte Mindesthoehe war fuer lange, zweizeilige Merkmallisten gedacht. */
.pricing--df .pricing__item { min-height: 0; }
.pricing--df .pricing__item b { color: #fff; font-weight: 600; }

.pricing__kostenlos {
    max-width: 820px;
    margin: 28px auto 0;
    padding: 16px 20px;
    border: 1px dashed rgba(15, 21, 32, .18);
    border-radius: 14px;
    text-align: center;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #4b5565;
}
.pricing__kostenlos b { color: #111827; }

/* --- DigiTokens ---------------------------------------------------------- */

.df-tokens { background: var(--color-bg-secondary); }

.df-tokens__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px;
}

.df-tokens__karte {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 26px 28px;
}

.df-tokens__karte h3,
.df-tokens__zwischen {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 650;
    color: #111827;
    margin: 0 0 14px;
}

.df-tokens__tabelle { width: 100%; border-collapse: collapse; }
.df-tokens__tabelle th,
.df-tokens__tabelle td {
    padding: 11px 0;
    border-top: 1px solid var(--color-border);
    vertical-align: top;
    font-size: 14.5px;
}
.df-tokens__tabelle tr:first-child th,
.df-tokens__tabelle tr:first-child td { border-top: 0; }
.df-tokens__tabelle th { text-align: left; font-weight: 500; color: #374151; padding-right: 16px; }
.df-tokens__tabelle td { text-align: right; font-weight: 650; color: var(--color-accent-bright); white-space: nowrap; }
.df-tokens__tabelle small { display: block; font-size: 12px; font-weight: 500; color: #6b7280; }

.df-tokens__frei {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.df-tokens__frei li {
    font-size: 13.5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .1);
    color: #166534;
}

.df-tokens__regel { font-size: 14px; line-height: 1.6; color: #5a6577; margin: 0; }

.df-tokens__zwischen { margin: 40px 0 14px; }

.df-pakete {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.df-paket {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.df-paket__menge { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.25rem; color: #111827; }
.df-paket__preis { font-weight: 650; color: var(--color-accent-bright); }
.df-paket__was   { font-size: 13px; color: #6b7280; }

@media (max-width: 809px) {
    .pricing--df .pricing__grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
    .df-tokens__grid { grid-template-columns: minmax(0, 1fr); }
    .df-pakete { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .df-tokens__karte { padding: 20px 18px; }
    .df-tokens__tabelle th, .df-tokens__tabelle td { font-size: 13.5px; }
    /* Bei 320px war die Tabelle 61px zu breit: die Kostenspalte bricht
       bewusst nicht um. Hier stehen Aktion und Kosten deshalb untereinander. */
    .df-tokens__tabelle tr { display: block; padding: 10px 0; border-top: 1px solid var(--color-border); }
    .df-tokens__tabelle tr:first-child { border-top: 0; }
    .df-tokens__tabelle th,
    .df-tokens__tabelle td { display: block; padding: 0; border-top: 0; text-align: left; white-space: normal; }
    .pricing__kostenlos { font-size: 14px; }
}


/* ==========================================================================
   ENTWURF DigiFiles — gemeinsames Schriftgroessen-Raster
   ==========================================================================
   H1 48 · H2 32 · H3 20 · Lead 18 · Body 16, auf Telefonen H1 34 · H2 26 ·
   H3 18. Das ist kein neuer Einfall, sondern das Raster, das in
   produkte/dikita/prodocs-nav.css unter "Typo-Harmonisierung (Raster mit
   DigiFiles)" steht. DiKita haelt sich daran, DigiFiles bisher nicht: die
   Hero-Ueberschrift lag bei 60,8px gegenueber 48px bei DiKita - gemessen,
   nicht geschaetzt. Beide Produktseiten duerfen unterschiedlich aufgebaut
   sein, aber nicht unterschiedlich gross schreiben.

   Alles haengt an .df2 (siehe <body> in index.html): Die Preview liest
   dieses Stylesheet vom Live-Pfad, und die dort noch liegende alte Fassung
   soll ihre Groessen nicht mitaendern.
   ========================================================================== */

/* Die Funktionskarten stehen seit dem 16.09. direkt hinter dem Hero. Die
   alte Regel zieht sie dann 300px nach oben ins Bild - das war fuer den
   frueheren Hero gedacht, der nur aus dem Telefonfoto bestand. Der neue
   Hero endet mit Text und Knoepfen, dort gehoert normaler Abstand hin.
   Die Live-Fassung behaelt die Ueberlappung, deshalb nur unter .df2. */
.df2 .hero + .features,
.df2 .hero + .cookie + .features {
    margin-top: 0;
    /* 96px unter dem Hero + 64px hier = 160px, genau wie bei DiKita
       (dort: Hero padding-bottom 96, #funktionen padding-top 64). */
    padding-top: 64px;
}

/* Auf Telefonen ist DiKita enger: 64px unter dem Hero + 44px hier = 108px. */
@media (max-width: 720px) {
    .df2 .hero + .features,
    .df2 .hero + .cookie + .features { padding-top: 44px; }
}

.df2 .hero__title { font-size: clamp(2.125rem, 1.1rem + 2.6vw, 3rem); }
.df2 .hero__eyebrow { font-size: 0.85rem; }
.df2 .hero__lead { font-size: 18px; }

.df2 .section-header__title,
.df2 .df-chat__title,
.df2 .related-pages h2,
.df2 .footer__title { font-size: 32px; }

.df2 .section-header__subtitle,
.df2 .df-chat__text { font-size: 18px; }

.df2 .card__title,
.df2 .why__card-title,
.df2 .dsgvo__card-title,
.df2 .related-card h3,
.df2 .df-tokens__karte h3,
.df2 .df-tokens__zwischen { font-size: 20px; }

.df2 .card__desc,
.df2 .why__card-desc,
.df2 .dsgvo__card-desc,
.df2 .related-card p,
.df2 .df-tokens__regel { font-size: 16px; line-height: 1.6; }

/* Die alten Stufen (28px/24px bei 809 und 390) weichen vom Raster ab. */
@media (max-width: 809px) {
    .df2 .section-header__title { font-size: 32px; }
    .df2 .section-header__subtitle { font-size: 18px; }
}

@media (max-width: 720px) {
    .df2 .section-header__title,
    .df2 .df-chat__title,
    .df2 .related-pages h2,
    .df2 .footer__title { font-size: 26px; }

    .df2 .section-header__subtitle,
    .df2 .hero__lead,
    .df2 .df-chat__text { font-size: 16px; }

    .df2 .card__title,
    .df2 .why__card-title,
    .df2 .dsgvo__card-title,
    .df2 .related-card h3,
    .df2 .df-tokens__karte h3,
    .df2 .df-tokens__zwischen { font-size: 18px; }
}

@media (max-width: 390px) {
    .df2 .section-header__title { font-size: 26px; }
}

/* ==========================================================================
   ENTWURF DigiFiles — Zeitvergleich
   ==========================================================================
   Zwei Balken je Aufgabe. Grau ist keine zweite Produktfarbe, sondern der
   zurueckhaltende Vergleichswert - hervorgehoben wird nur DigiFiles. Damit
   die Aussage nicht allein an der Farbe haengt, traegt jeder Balken seinen
   Wert als Text und es gibt eine Legende. Geprueft mit dem Farbpruefer der
   dataviz-Anleitung: Unterscheidbarkeit auch bei Farbsehschwaeche in
   Ordnung (dE 17), Kontrast zur Flaeche ueber 3:1.
   ========================================================================== */

.df-zeit { background: var(--color-bg-secondary); }

.df-zeit__legende {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #4b5565;
    margin-bottom: 18px;
}
.df-zeit__punkt {
    width: 10px; height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.df-zeit__punkt--app { margin-left: 18px; }
.df-zeit__punkt--hand { background: #6b7280; }
.df-zeit__punkt--app { background: var(--color-accent); }

.df-zeit__tabelle { width: 100%; border-collapse: collapse; }
.df-zeit__caption {
    caption-side: top;
    text-align: left;
    font-size: 13px;
    color: #6b7280;
    padding-bottom: 10px;
}

.df-zeit__tabelle th {
    width: 34%;
    text-align: left;
    vertical-align: middle;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    padding: 16px 20px 16px 0;
    border-top: 1px solid var(--color-border);
}
.df-zeit__tabelle th small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
}
.df-zeit__tabelle td {
    padding: 16px 0;
    border-top: 1px solid var(--color-border);
}
.df-zeit__tabelle tr:first-child th,
.df-zeit__tabelle tr:first-child td { border-top: 0; }

.df-zeit__zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 6px Abstand zwischen den beiden Balken - kein Rahmen, nur Flaeche. */
    margin-bottom: 6px;
}
.df-zeit__zeile:last-child { margin-bottom: 0; }

/* Die Spur nimmt den Platz, der nach dem Wert uebrig bleibt; der Balken ist
   ein Anteil DAVON. Vorher war die Balkenbreite ein Anteil der ganzen Zeile,
   zusammen mit dem Wert stand sie dadurch 13px ueber dem Rand. */
.df-zeit__spur {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.df-zeit__bar {
    display: block;
    height: 12px;
    border-radius: 0 4px 4px 0;
    min-width: 3px;
}
.df-zeit__bar--hand { background: #6b7280; }
.df-zeit__bar--app  { background: var(--color-accent); }

.df-zeit__wert {
    flex: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #4b5565;
    white-space: nowrap;
}

.df-zeit__summe {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
}
.df-zeit__summe-zahl strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-accent-bright);
}
.df-zeit__summe-zahl span { font-size: 14px; color: #6b7280; }
.df-zeit__summe-text {
    flex: 1 1 260px;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #4b5565;
}
.df-zeit__summe-text b { color: #111827; font-weight: 650; }

@media (max-width: 600px) {
    .df-zeit__tabelle tr { display: block; padding: 14px 0; border-top: 1px solid var(--color-border); }
    .df-zeit__tabelle tr:first-child { border-top: 0; }
    .df-zeit__tabelle th,
    .df-zeit__tabelle td { display: block; width: auto; padding: 0; border-top: 0; }
    .df-zeit__tabelle th { margin-bottom: 10px; }
    .df-zeit__summe { gap: 14px; padding: 20px; }
    .df-zeit__summe-zahl strong { font-size: 28px; }
}

/* Newsletter-Feld im Fuss: Eingabe und Knopf nebeneinander sprengen sehr
   schmale Geraete (bei 320px 13px zu breit). Auf .df2 begrenzt, damit sich
   die noch alte Live-Fassung nicht mit aendert. */
@media (max-width: 420px) {
    .df2 .footer__newsletter-row { flex-wrap: wrap; }
    .df2 .footer__newsletter-input,
    .df2 .footer__newsletter-btn { flex: 1 1 100%; }
}


/* ==========================================================================
   ENTWURF DigiFiles — Trennlinien zwischen den Abschnitten
   ==========================================================================
   Wortgleich uebernommen aus produkte/dikita/styles.css, Abschnitt "Dezente
   Trennlinien zwischen Sections": ein feiner dunkler Verlauf ueber die
   Breite, darauf ein blauer Lichtpunkt, der in 15 Sekunden einmal
   durchwandert. DiKita hatte diesen Uebergang, DigiFiles nicht.

   Zwei Unterschiede zur Vorlage, beide zwingend:
   1. DiKita adressiert "main > section + section". DigiFiles hat kein
      <main>, und zwischen Hero und Funktionen steht der Cookie-Hinweis -
      "+" (direkt danach) traefe den Uebergang also nicht. "~" trifft jeden
      Abschnitt ausser dem ersten, das entspricht der Vorlage.
   2. Eigener Animationsname, damit er sich mit nichts beisst.

   Dazu endet der bewegte Hero-Hintergrund jetzt exakt an dieser Linie
   (vorher ragte er 60px darueber hinaus). Damit faellt sein Ende nicht mehr
   auf - es liegt genau unter der Trennlinie.
   ========================================================================== */

.df2 .hero__bg-video { bottom: 0; }

body.df2 > section { position: relative; }

body.df2 > section ~ section::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    /* An das FENSTER gebunden, nicht an den Abschnitt. Bei DiKita gehen die
       Abschnitte ueber die volle Breite, dort sind "100%" also der ganze
       Bildschirm. Bei DigiFiles ist z. B. .features auf 1200px begrenzt -
       mit "100%" waere die Linie dort kuerzer als bei DiKita und kuerzer
       als in den Abschnitten mit voller Breite. Der Seitenkoerper hat
       overflow-x: hidden, 100vw erzeugt also keinen Querbalken. */
    width: min(100vw, 1800px);
    height: 21px;
    pointer-events: none;
    z-index: 3;
    background-image:
        radial-gradient(
            ellipse 180px 2px at 50% 50%,
            rgba(45, 140, 240, 0.5) 0%,
            rgba(45, 140, 240, 0.35) 35%,
            rgba(45, 140, 240, 0.18) 65%,
            rgba(45, 140, 240, 0.06) 85%,
            rgba(45, 140, 240, 0) 100%
        ),
        linear-gradient(
            to right,
            rgba(27, 36, 52, 0) 0%,
            rgba(27, 36, 52, 0.14) 12%,
            rgba(27, 36, 52, 0.18) 50%,
            rgba(27, 36, 52, 0.14) 88%,
            rgba(27, 36, 52, 0) 100%
        );
    background-repeat: no-repeat, no-repeat;
    background-size: 360px 5px, 100% 2px;
    background-position: -360px 50%, 50% 50%;
    filter: drop-shadow(0 0 5px rgba(45, 140, 240, 0.22));
    animation: df-trennlinie 15s ease-in-out infinite alternate;
}

@keyframes df-trennlinie {
    0%   { background-position: -360px 50%, 50% 50%; }
    100% { background-position: calc(100% + 360px) 50%, 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    body.df2 > section ~ section::before {
        animation: none;
        background-position: 50% 50%, 50% 50%;
    }
}

@media (max-width: 720px) {
    body.df2 > section ~ section::before { width: 86vw; }
}