/* ==========================================================================
   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.
   ========================================================================== */

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

.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__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.hero__btn--primary { background: var(--color-accent); color: #fff; }
.hero__btn--primary:hover {
    background: var(--color-accent-bright);
    box-shadow: 0 8px 22px rgba(45, 140, 240, .3);
    transform: translateY(-1px);
}
.hero__btn--ghost {
    background: #fff;
    color: #111827;
    border: 1px solid rgba(15, 21, 32, .14);
}
.hero__btn--ghost:hover { border-color: var(--color-accent); transform: translateY(-1px); }

.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;
    height: 560px;
}

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

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

.hero__chip {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 16px 10px 10px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .13), 0 0 0 1px rgba(15, 23, 42, .04);
    font-family: 'Inter', sans-serif;
    opacity: 0;
    animation: dfChipIn .8s var(--ease-spring) both, dfSchweben 7s ease-in-out infinite;
}
.hero__chip strong { display: block; font-size: 13px; font-weight: 600; color: #111827; line-height: 1.3; white-space: nowrap; }
.hero__chip-sub { display: block; font-size: 12px; color: #5a6577; line-height: 1.35; white-space: nowrap; }

.hero__chip-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    background: rgba(45, 140, 240, .12);
    color: var(--color-accent-bright);
}
.hero__chip-icon--ok    { background: rgba(34, 197, 94, .13); color: #15803d; }
.hero__chip-icon--frist { background: rgba(245, 158, 11, .15); color: #b45309; }

/* Nacheinander: erfasst -> erkannt -> Frist gefunden. */
.hero__chip--1 { top: 12%;   left: 2%;   animation-delay: 1.4s, 2.4s; }
.hero__chip--2 { top: 42%;   right: -2%; animation-delay: 2.1s, 3.6s; }
.hero__chip--3 { bottom: 12%; left: 6%;  animation-delay: 2.8s, 4.8s; }

@keyframes dfChipIn {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes dfSchweben {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* --- 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: 960px) {
    .hero--df { padding: 88px 24px 32px; }
    .hero--df .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hero--df .hero__visual { height: 460px; }
    .hero--df .hero__stage { width: 420px; }
    .hero__chip--1 { left: 4%; }
    .hero__chip--2 { right: 2%; }

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

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

@media (max-width: 480px) {
    .hero--df { padding: 80px 16px 24px; }
    .hero__eyebrow { font-size: 0.72rem; letter-spacing: 0.09em; }
    .hero__lead { font-size: 1.02rem; }
    .hero__ctas .hero__btn { flex: 1 1 100%; }
    .hero__trust { gap: 10px 18px; font-size: 0.84rem; }

    .hero--df .hero__visual { height: 380px; }
    .hero--df .hero__stage { width: 340px; }
    .hero__chip { padding: 8px 12px 8px 8px; gap: 8px; }
    .hero__chip-icon { width: 30px; height: 30px; }
    .hero__chip strong { font-size: 12px; }
    .hero__chip-sub { font-size: 11px; }
    .hero__chip--1 { top: 8%;  left: 0; }
    .hero__chip--2 { top: 44%; right: 0; }
    .hero__chip--3 { bottom: 8%; left: 2%; }

    .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 (prefers-reduced-motion: reduce) {
    .hero__chip { opacity: 1; }
    .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; }
}