/* ============================================
   CLEAN BURGER MENU SYSTEM (FINAL VERSION)
============================================ */

/* --- Grundstil Burger Button (Desktop unsichtbar) --- */
.mobile-nav-toggle {
    display: none; /* Desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;

    width: 38px;
    height: 32px;

    background: none;
    border: none;
    cursor: pointer;

    z-index: 99999;
}

.mobile-nav-toggle span {
    width: 30px;
    height: 3px;
    background: #ffffff;
    transition: 0.3s ease;
    display: block;
}

/* --- Animation Burger → X --- */
.mobile-nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}
.mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.mobile-nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

/* --- BURGER NUR AUF MOBILE (≤ 900px) --- */
@media (max-width: 900px) {
    .main-nav {
        display: none !important; /* Desktop Menü ausblenden */
    }

    .mobile-nav-toggle {
        display: flex !important;
    }
}

/* ============================================
   MOBILE OVERLAY MENU
============================================ */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,10,11,0.95);
    backdrop-filter: blur(6px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 99998;
}

.mobile-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Close Button */
.mobile-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 42px;
    color: #ffffff;
    cursor: pointer;
}

/* Menüeinträge */
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;

    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mobile-nav-list a {
    color: #ffffff;
    font-size: 1.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.mobile-nav-list a:hover {
    color: #bd1e59;
    text-shadow: 0 0 12px rgba(189,30,89,1);
}

/* Scroll-Lock */
body.em-no-scroll {
    overflow: hidden !important;
}

/* =========================================
   0. RESET & BASE
========================================= */

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

html, body {
    height: 100%;
}

body {
    font-family: "Inter", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    background: #0e0e0f;
    color: #f1f1f1;
}

/* Links basic */
a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* =========================================
   1. LAYOUT: CONTAINER, SECTIONS, GRID
========================================= */

.container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}

.section {
    padding: 80px 0;
}

.section-dark {
    background: #141415;
}

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

.section-header h2 {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

.section-header p {
    color: #d4d4d4;
}

/* Grids */
.grid {
    display: grid;
    gap: 30px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 800px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   2. BUTTONS
========================================= */

.btn {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn-primary {
    background: #bd1e59;
    color: #fff;
}

.btn-outline {
    border: 2px solid #bd1e59;
    color: #bd1e59;
    background: transparent;
}

/* Neon hover effect */
.btn-primary:hover,
.btn-outline:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 10px rgba(189, 30, 89, 0.7),
        0 0 20px rgba(189, 30, 89, 0.6),
        0 0 35px rgba(189, 30, 89, 0.4);
}

.btn-primary:hover {
    background: #e6246d;
}

.btn-outline:hover {
    background: #bd1e59;
    color: #fff;
}
/* ============================================
   CLEAN HEADER (NEON + BORDER) — FINAL VERSION
============================================ */

.site-header {
    background: #0c0c0d;
    padding: 16px 0;
    border-bottom: 3px solid #bd1e59;
    position: sticky;
    top: 0;
    z-index: 5000 !important;

    overflow: visible !important;    /* ← WICHTIG */
    position: relative !important;   /* ← Gewährleistet stacking context */

    box-shadow:
        0 0 12px rgba(189,30,89,0.6),
        0 0 28px rgba(189,30,89,0.35);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.logo.animated-logo {
    position: relative;
    z-index: 10 !important;
}


/* ============================================
   SOCIAL ICONS – GLOBAL
============================================ */
.header-social-bar {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 50px;
    align-items: center;
    z-index: 99999; /* höher als Logo */
}

.header-social-bar img {
    width: 28px;
    height: 28px;
    filter: grayscale(100%) brightness(1.3);
    transition: 0.25s ease;
}

.header-social-bar img:hover {
    filter: grayscale(0%) brightness(2)
            drop-shadow(0 0 10px rgba(255,255,255,0.9));
    transform: scale(1.15);
}


/* ============================================
   DESKTOP – Icons etwas höher, größerer Abstand
============================================ */
@media (min-width: 769px) {
    .header-social-bar {
        top: -28px !important;
        gap: 50px !important;
    }

    .header-social-bar img {
        width: 26px;
        height: 26px;
    }
}

/* ============================================
   MOBILE – Icons bleiben oben korrekt sichtbar
============================================ */
@media (max-width: 768px) {
    .header-social-bar {
        top: 6px !important;
        gap: 18px !important;
    }
}



/* ============================================
   NAVIGATION FIX
============================================ */
.nav-list {
    list-style: none;
    display: flex;
    gap: 22px;
}

.nav-list a {
    color: #eaeaea;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: 0.25s ease;
}

.nav-list a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(189,30,89,.8);
}

/* ===============================
   DESKTOP DROPDOWN MENUS FIX
=============================== */

/* Submenu Container */
.nav-list li ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #111;
    border: 1px solid #bd1e59;
    padding: 10px 0;
    min-width: 200px;
    display: none; /* ausgeblendet bis Hover */
    z-index: 5000;
}

/* Submenu Items */
.nav-list li ul.sub-menu li {
    width: 100%;
    display: block !important;
}

/* Submenu Links */
.nav-list li ul.sub-menu a {
    display: block !important;
    padding: 10px 16px;
    font-size: 1rem;
    color: #f1f1f1;
    white-space: nowrap;
}

.nav-list li ul.sub-menu a:hover {
    background: #bd1e59;
    color: #fff;
}

/* SHOW DROPDOWN ON HOVER */
.nav-list li:hover > ul.sub-menu {
    display: block;
}

/* Parent LI muss relative sein */
.nav-list li {
    position: relative;
}
.post-sticky-hosting {
    position: sticky;
    bottom: 20px;
    text-align: center;
}

.desktop-nav {
  display: flex;
  justify-content: center; /* zentriert */
}



/* =========================================
   4. HERO (Startseite & Warum-Page Hero)
========================================= */

.hero {
    padding: 120px 0;
    background: linear-gradient(135deg, #141415, #0e0e0f);
}

.hero-inner {
    display: grid;
    gap: 40px;
    grid-template-columns: 1.2fr 1fr;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero-content p {
    margin-bottom: 20px;
    color: #d4d4d4;
}

.hero-cta {
    margin-bottom: 25px;
}

.hero-cta .btn {
    margin-right: 15px;
}

.hero-benefits {
    list-style: none;
    margin-top: 10px;
}

.hero-benefits li {
    margin: 6px 0;
    color: #cfcfcf;
}

.hero-aside .hero-card {
    background: #1c1c1e;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #2d2d2f;
}

.hero-logo img {
    animation: heroFloat 6s ease-in-out infinite alternate;
}

@keyframes heroFloat {
    0%   { transform: rotate(-3deg) scale(1); }
    100% { transform: rotate(3deg) scale(1.03); }
}


/* ============================================
   HERO RESPONSIVE FIX (Mobile)
============================================ */
@media (max-width: 900px) {

    .hero {
        padding: 80px 0;
    }

    .hero-inner {
        grid-template-columns: 1fr !important; /* Eine Spalte auf Mobile */
        text-align: center !important;
        gap: 40px !important;
    }

    .hero-content h1 {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }

    .hero-aside {
        width: 100% !important;
        max-width: 420px;
        margin: 0 auto;
    }

    .hero-card {
        padding: 24px !important;
    }

    .hero-logo img {
        width: 180px !important;
        margin: 0 auto !important;
        display: block !important;
    }
}


/* =========================================
   5. NEON TITLES & BASIC ANIMATIONS
========================================= */

.neon-shine,
.neon-title {
    background: linear-gradient(90deg, #bd1e59, #ff67a4, #bd1e59);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 300% 300%;
    animation: shineMove 5s ease infinite;
}

@keyframes shineMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Fade-in from bottom */
.fade-light {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeLight 0.9s ease forwards;
}

.fade-light-delay {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeLight 0.9s ease forwards 0.35s;
}

@keyframes fadeLight {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in left/right */

.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    animation: slideLeft 0.8s ease-out forwards;
}
@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    opacity: 0;
    transform: translateX(40px);
    animation: slideRight 0.8s ease-out forwards;
}
@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.hero h1 {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.1rem;
        line-height: 1.2;
    }

    .hero-inner {
        overflow-x: hidden !important;
    }

    .hero {
        overflow-x: hidden !important;
    }
}


/* =========================================
   6. CARDS & GENERISCHE ELEMENTE
========================================= */

.card {
    background: #1a1a1c;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #2e2e30;
    box-shadow: 0 0 16px rgba(0,0,0,0.25);
}

.card-highlight {
    background: #252526;
    border-color: #bd1e59;
}

.card-service--featured {
    border: 2px solid #bd1e59;
    position: relative;
}

.card-service--featured .badge {
    position: absolute;
    top: -12px;
    right: 15px;
    background: #bd1e59;
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Testimonials */
.card-testimonial {
    font-style: italic;
}

.testimonial-name {
    margin-top: 10px;
    font-weight: bold;
    color: #bd1e59;
}

/* Process list */
.process-list {
    list-style: none;
    counter-reset: process-counter;
}

.process-list li {
    padding: 20px 0;
    border-bottom: 1px solid #2d2d2f;
}

.process-step {
    font-size: 1.7rem;
    font-weight: bold;
    color: #bd1e59;
}

/* Portfolio placeholder */
.placeholder-thumb {
    height: 180px;
    background: #2b2b2b;
    border-radius: 10px;
    margin-bottom: 15px;
}

/* Contact */
.contact-grid {
    align-items: start;
}

.contact-form {
    background: #1a1a1b;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
}

.contact-note {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #b5b5b5;
}

/* =========================================
   7. FOOTER
========================================= */

.site-footer {
    padding: 60px 0;
    background: #0c0c0d;
    border-top: 1px solid #2f2f2f;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    gap: 40px;
}

.footer-menu {
    list-style: none;
}

.footer-menu a {
    color: #ccc;
    text-decoration: none;
}

.footer-menu a:hover {
    color: #ffffff;
}

.footer-logo img {
    width: 320px;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(189, 30, 89, 0.4));
    transition: transform 0.3s ease, filter 0.3s ease;
    transform-origin: center;
}

.footer-logo img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(189, 30, 89, 0.8));
}

.footer-left,
.footer-right {
    color: #ccc;
}

/* Footer legal links (AGB, Datenschutz, Impressum) */
.footer-legal {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.85;
}

.footer-legal a {
    color: #ccc;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: #fff;
}

@media (max-width: 800px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* =========================================
   8. TRUSTBAR (NEON, MIT GRÜNEN HAKEN)
========================================= */

.trustbar {
    background: #18181b;
    padding: 14px 0;
    border-top: 1px solid #bd1e59;
    border-bottom: 1px solid #38ff7c;
    box-shadow:
        0 0 10px rgba(189, 30, 89, 0.4),
        0 0 18px rgba(56, 255, 124, 0.3);

    position: sticky;
    top: 60px; /* unter dem Header */
    z-index: 888;

    transition: opacity .4s ease, transform .4s ease;
}

/* Standard sichtbar */
.trustbar-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glow wenn sticky aktiviert */
.sticky-active {
    box-shadow:
        0 0 14px rgba(189, 30, 89, 0.6),
        0 0 22px rgba(56, 255, 124, 0.4);
}

.trustbar-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    text-align: center;
}

.trustbar-inner div {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f1f1;
    white-space: nowrap;
}

/* Grüne Haken */
.trust-check {
    color: #38ff7c;
    font-size: 1.3rem;
    margin-right: 6px;
    text-shadow:
        0 0 6px rgba(56,255,124,0.9),
        0 0 12px rgba(56,255,124,0.7);
}

@media (max-width: 800px) {
    .trustbar-inner {
        flex-direction: column;
    }
    .trustbar-inner div {
        white-space: normal;
    }
}


/* =========================================
   10. PROBLEM–SOLUTION SECTION
========================================= */

.problem-solution .card {
    padding: 36px;
    border-radius: 14px;
    background: #1a1a1d;
    border: 1px solid #2d2d2f;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.25);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.glow-left {
    border-left: 3px solid #bd1e59;
    box-shadow: 0 0 16px rgba(189, 30, 89, 0.25);
}

.glow-right {
    border-left: 3px solid #38ff7c;
    box-shadow: 0 0 18px rgba(56,255,124,0.3);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow:
        0 0 25px rgba(189, 30, 89, 0.25),
        0 0 25px rgba(56,255,124,0.25);
}

/* kleine Header-Icons oben auf den Cards */
.ps-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
}

.ps-icon svg {
    width: 100%;
    height: 100%;
}

/* Listen schön links mit farbigen X / ✔ */

.ps-list {
    margin-top: 10px;
}

.ps-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 1.05rem;
    color: #d4d4d4;
    text-align: left;
}

/* ❌ rot */
.ps-x {
    color: #bd1e59;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ✔ grün */
.ps-v {
    color: #38ff7c;
    font-size: 1.25rem;
    flex-shrink: 0;
    text-shadow: 0 0 6px rgba(56,255,124,0.7);
}

/* =========================================
   11. WHY-EM-AGENCY SPEZIFISCH
========================================= */

.why-title {
    font-size: 3rem;
    margin-bottom: 20px;
}

.why-subtitle {
    max-width: 800px;
    margin: 0 auto;
    color: #d4d4d4;
    font-size: 1.2rem;
}

.why-btn-hero {
    margin-top: 30px;
}

/* =========================================
   12. MEDIA QUERIES EXTRA
========================================= */

@media (max-width: 600px) {
    .why-title {
        font-size: 2.3rem;
    }

    .section {
        padding: 60px 0;
    }

    .card {
        padding: 20px;
    }

    .problem-solution .card {
        padding: 24px;
    }
}

.hero {
    padding: 120px 0;
    background:
        linear-gradient(135deg, rgba(20,20,21,0.75), rgba(14,14,15,0.85)),
        url('/wp-content/themes/ErotikMediaAgentur/assets/images/hero-bg.jpg'); /* ← DEIN BILD */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ======================================================
   FORCE GRID FIX — 4 Spalten sauber anzeigen
====================================================== */

.package-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    margin-top: 40px;
}

/* Tablet 2 Spalten */
@media (max-width: 1100px) {
    .package-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile 1 Spalte */
@media (max-width: 700px) {
    .package-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ======================================================
   CARD FIX — sorgt für schönes Design & zentrierte Inhalte
====================================================== */

.package-card {
    display: block;
    background: #1a1a1d;
    padding: 32px;
    border-radius: 14px;
    border: 1px solid #2d2d2f;
    color: #f1f1f1;
    text-align: left;               /* ← WICHTIG */
    transition: transform .35s ease, box-shadow .35s ease;
    position: relative;
    min-height: 380px;
}

/* Hover Glow Effekt */
.package-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 0 14px rgba(189,30,89,.6),
        0 0 28px rgba(189,30,89,.4);
    border-color: #bd1e59;
}

/* Featured Karte */
.package-featured {
    border: 2px solid #bd1e59 !important;
    box-shadow:
        0 0 16px rgba(189,30,89,.5),
        0 0 32px rgba(189,30,89,.3);
}

/* Premium Karte (grün) */
.package-premium:hover {
    border-color: #38ff7c !important;
    box-shadow:
        0 0 18px rgba(56,255,124,.7),
        0 0 36px rgba(56,255,124,.4);
}

/* Badge */
.package-card .badge {
    position: absolute;
    top: -12px;
    right: 15px;
    background: #bd1e59;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: .8rem;
    font-weight: bold;
    color: #fff;
}

/* Preis-Style */
.package-price {
    font-size: 1.4rem;
    margin: 10px 0 20px;
    color: #ff66a9;
}

/* Liste */
.package-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

	
/* =========================================
   STICKY NEON GLOW BUTTON BAR
========================================= */

.sticky-glow-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(12, 12, 13, 0.9);
    padding: 20px 0;
    text-align: center;
    z-index: 9999;

    border-top: 2px solid #38ff7c;
    box-shadow:
        0 0 20px rgba(56,255,124,0.5),
        0 0 50px rgba(56,255,124,0.3);
}

.glow-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 48px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #0c0c0d;
    background: #38ff7c;
    border-radius: 12px;
    text-decoration: none;

    box-shadow:
        0 0 14px rgba(56,255,124,0.8),
        0 0 30px rgba(56,255,124,0.6),
        inset 0 0 10px rgba(0,0,0,0.3);

    animation: glowPulse 2.4s infinite ease-in-out,
               bounce 2.2s infinite ease-in-out;
}

/* Pfeil Animation */
.glow-arrow {
    font-size: 1.7rem;
    animation: arrowMove 1.4s infinite ease-in-out;
}

@keyframes arrowMove {
    0% { transform: translateX(0); }
    50% { transform: translateX(6px); }
    100% { transform: translateX(0); }
}

/* Glow-Pulse */
@keyframes glowPulse {
    0% { box-shadow: 0 0 12px rgba(56,255,124,0.4); }
    50% { box-shadow: 0 0 26px rgba(56,255,124,1); }
    100% { box-shadow: 0 0 12px rgba(56,255,124,0.4); }
}

/* BOUNCE */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ----------------------------------------
   GRÜNER STICKY BUTTON — ÜBERSCHREIBT ALLES
----------------------------------------- */

#greenStickyBtn {
    display: inline-block !important;
    padding: 14px 28px !important;       /* etwas kleiner */
    background: #38ff7c !important;
    color: #0c0c0d !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;       /* kleinere Schrift */
    border-radius: 10px !important;
    text-decoration: none !important;
    cursor: pointer !important;

    box-shadow:
        0 0 14px rgba(56,255,124,0.6),
        0 0 30px rgba(56,255,124,0.4),
        inset 0 0 10px rgba(0,0,0,0.3) !important;

    transition: 0.25s ease !important;

    animation:
        stickyBounce 2.8s ease-in-out infinite,
        stickyGlow 3.2s ease-in-out infinite;
}

/* HOVER → Neon Yellow */
#greenStickyBtn:hover {
    background: #ffe066 !important;            /* gelb */
    color: #0c0c0d !important;

    box-shadow:
        0 0 26px rgba(255,224,102,1),
        0 0 60px rgba(255,224,102,0.9),
        inset 0 0 16px rgba(0,0,0,0.4) !important;

    transform: scale(1.06) !important;
}
/* ======================================================
   SEXY PORTFOLIO – PREMIUM CLICKABLE VERSION
====================================================== */

.sexy-portfolio-grid {
    gap: 35px;
}

.sexy-portfolio-item {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #2d2d2f;
    background: #111;
    text-decoration: none;
    transition: transform .4s ease, box-shadow .4s ease;
}

.sexy-portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow:
        0 0 18px rgba(189,30,89,0.6),
        0 0 40px rgba(189,30,89,0.4);
    border-color: #bd1e59;
}

/* Thumbnail Zoom */
.sexy-portfolio-thumb img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform .5s ease;
}

.sexy-portfolio-item:hover .sexy-portfolio-thumb img {
    transform: scale(1.12);
}

/* Overlay */
.sexy-portfolio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 15px;
    text-align: center;
    transition: opacity .35s ease;
}

.sexy-portfolio-item:hover .sexy-portfolio-overlay {
    opacity: 1;
}

/* Title */
.sexy-portfolio-overlay h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 8px rgba(189,30,89,0.8);
}

/* Hint / Subtitle in Overlay */
.overlay-hint {
    color: #ff66a9;
    font-weight: 600;
    font-size: 1rem;
    opacity: 0.9;
}

/* ================================
   FOOTER NEWSLETTER WIDGET
================================ */

.newsletter-widget {
    text-align: left;
    color: #dcdcdc;
}

.newsletter-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff;
}

.newsletter-text {
    font-size: 0.95rem;
    margin-bottom: 18px;
    color: #cfcfcf;
}

/* Input */
.newsletter-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid #333;
    background: #141414;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 12px;
    outline: none;
    transition: border .3s ease, box-shadow .3s ease;
}

.newsletter-input:focus {
    border-color: #bd1e59;
    box-shadow: 0 0 10px rgba(189,30,89,0.4);
}

/* Button */
.newsletter-btn {
    width: 100%;
    padding: 12px 0;
    background: #bd1e59;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.newsletter-btn:hover {
    background: #ff2f7f;
    transform: scale(1.03);
    box-shadow:
        0 0 12px rgba(255, 47, 127, 0.8),
        0 0 25px rgba(255, 47, 127, 0.5);
}

/* Datenschutz */
.newsletter-privacy {
    font-size: 0.75rem;
    margin-top: 10px;
    color: #999;
}

.newsletter-privacy a {
    color: #ff66a9;
    text-decoration: none;
}

.newsletter-privacy a:hover {
    text-shadow: 0 0 6px rgba(255,102,169,0.8);
}

/* ==========================
   KONTAKT HERO SECTION
========================== */
.contact-hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #141415, #0e0e0f);
    text-align: center;
}

.contact-title {
    font-size: 3rem;
    margin-bottom: 10px;
}

.contact-subtitle {
    color: #d4d4d4;
    font-size: 1.2rem;
}

/* ==========================
   KONTAKT GRID
========================== */
.contact-section {
    padding: 80px 0;
}

.contact-grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* INFO */
.contact-info h2 {
    margin-bottom: 15px;
}

.contact-benefits {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.contact-benefits li {
    margin: 6px 0;
    font-size: 1rem;
}

.contact-note {
    font-size: 0.9rem;
    margin-top: 20px;
    color: #c8c8c8;
}

/* FORM */
.contact-form-wrapper {
    background: #1a1a1d;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #333;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    border: 1px solid #2d2d2f;
    background: #141415;
    color: #fff;
    font-size: 1rem;
    outline: none;
}

.contact-form textarea {
    height: 140px;
}

.contact-btn {
    width: 100%;
    padding: 14px;
    background: #bd1e59;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s ease;
}

.contact-btn:hover {
    background: #ff2f7f;
    box-shadow: 0 0 18px rgba(255,47,127,0.8);
}
/* ================================
   CONTACT INFO – TRANSPARENTE CARD
================================ */

.contact-section {
    position: relative;
}

.contact-info {
    background: rgba(20, 20, 20, 0.55);       /* halbtransparent */
    padding: 35px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);              /* GLAS-EFFEKT */
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.4),
        inset 0 0 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

.contact-info h2 {
    margin-bottom: 14px;
}

.contact-info p,
.contact-benefits li,
.contact-note {
    color: #e5e5e5;
}

/* NICE CHECKMARK COLOR */
.contact-benefits li::before {
    content: "✔";
    color: #38ff7c;
    margin-right: 6px;
}

/* Abstand zur Form */
.contact-form-wrapper {
    margin-top: 10px;
}

/* FOOTER LOGO – gleiche Animation wie Hero Logo */
.footer-logo img {
    width: 250px;
    animation: footerLogoSwing 4s ease-in-out infinite,
               footerGlowPulse 6s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 4px rgba(189,30,89,0.3));
}

/* leichte Links/Rechts-Drehung */
@keyframes footerLogoSwing {
    0%   { transform: rotate(-4deg); }
    50%  { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}

/* Glow-Pulse wie oben */
@keyframes footerGlowPulse {
    0% { filter: drop-shadow(0 0 4px rgba(189,30,89,0.3)); }
    50% { filter: drop-shadow(0 0 14px rgba(189,30,89,0.8)); }
    100% { filter: drop-shadow(0 0 4px rgba(189,30,89,0.3)); }
}

/* Hover-Effekt optional */
.footer-logo:hover img {
    transform: scale(1.05);
    filter:
        drop-shadow(0 0 12px rgba(189,30,89,0.8))
        drop-shadow(0 0 22px rgba(189,30,89,0.5));
}


/* Diese Elemente dürfen Sticky NICHT blockieren */
.hero,
.section,
.section-dark,
.section-services,
.section-why,
.section-portfolio,
.section-process {
    overflow: visible !important;
    z-index: auto !important;
    transform: none !important;
}

/* ============================================
   BLOG GRID / BLOG CARDS
============================================ */

.blog-section {
    padding-top: 100px;
}

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

@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    background: #1a1a1c;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2e2e30;
    transition: 0.35s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 14px rgba(189, 30, 89, .5),
        0 0 22px rgba(189, 30, 89, .3);
}

/* Thumbnail */
.blog-thumb-wrapper {
    display: block;
}

.blog-thumb {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* Content */
.blog-content {
    padding: 20px;
}

.blog-title a {
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 700;
}

.blog-title a:hover {
    color: #bd1e59;
}

.blog-meta {
    color: #a8a8a8;
    margin: 6px 0 14px;
    font-size: 0.9rem;
}

.blog-excerpt {
    color: #d0d0d0;
    margin-bottom: 20px;
}

.blog-readmore {
    color: #bd1e59;
    font-weight: 600;
    text-decoration: none;
}

.blog-readmore:hover {
    color: #ff6faf;
}
.single-post-section {
    padding-top: 120px;
}

.single-post-thumb img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin-bottom: 30px;
}

.single-post-title {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

.single-post-meta {
    color: #a8a8a8;
    margin-bottom: 25px;
}

.single-post-content {
    font-size: 1.15rem;
    color: #dcdcdc;
    line-height: 1.8;
}

.single-post-content p {
    margin-bottom: 18px;
}

.single-post-back a {
    display: inline-block;
    margin-top: 40px;
    color: #bd1e59;
    font-weight: 700;
    text-decoration: none;
}

.single-post-back a:hover {
    color: #ff6faf;
}
/* Sticky CTA – Close Button */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(12, 12, 13, 0.9);
    padding: 18px 20px;
    z-index: 9999;
    border-top: 2px solid #bd1e59;
    display: flex;
    justify-content: center;
    gap: 18px;
    align-items: center;
}

/* CLOSE BUTTON */
.sticky-cta-close {
    position: absolute;
    top: -12px;
    right: 15px;
    background: #000;
    color: #fff;
    border: 1px solid #bd1e59;
    width: 26px;
    height: 26px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;

    transition: 0.25s ease;
}

.sticky-cta-close:hover {
    background: #bd1e59;
    color: #fff;
    transform: scale(1.15);
}

/* Sticky CTA – Close Button */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(12, 12, 13, 0.9);
    padding: 18px 20px;
    z-index: 9999;
    border-top: 2px solid #bd1e59;
    display: flex;
    justify-content: center;
    gap: 18px;
    align-items: center;
}

/* CLOSE BUTTON */
.sticky-cta-close {
    position: absolute;
    top: -12px;
    right: 15px;
    background: #000;
    color: #fff;
    border: 2px solid #bd1e59;
    width: 36px;
    height: 36px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;

    transition: 0.25s ease;
}

.sticky-cta-close:hover {
    background: #bd1e59;
    color: #fff;
    transform: scale(1.15);
}

/* CTA HIDE ANIMATION */
.sticky-cta.hide {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}



/* ================================
   HOSTING HERO
================================ */
.hosting-hero {
    position: relative;
    padding: 160px 0;
    background: url('/wp-content/themes/ErotikMediaAgentur/assets/images/hosting-bg.jpg') center/cover no-repeat;
}

.hosting-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.85));
}

.hosting-hero-inner {
    position: relative;
    text-align: center;
    z-index: 10;
}

.hosting-title {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hosting-subtitle {
    color: #d6d6d6;
    max-width: 800px;
    margin: 0 auto 25px;
    font-size: 1.2rem;
}

.hosting-btn {
    margin-top: 15px;
}

/* BENEFITS */
.hosting-benefit-grid .card {
    text-align: center;
    padding: 30px;
}

/* ================================
   HOSTING – BLOG CTA SECTION
================================ */
.hosting-blog-cta {
    background: linear-gradient(135deg, #131313, #0b0b0c);
    padding: 80px 0;
    text-align: center;
    margin-top: 60px;
    border-top: 2px solid #bd1e59;
    box-shadow:
        0 0 18px rgba(189,30,89,0.4),
        inset 0 0 22px rgba(0,0,0,0.5);
}

.hosting-blog-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.hosting-blog-cta h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #fff;
}

.hosting-blog-cta p {
    color: #d4d4d4;
    font-size: 1.15rem;
    margin-bottom: 30px;
}

/* Button */
.hosting-blog-btn {
    display: inline-block;
    padding: 16px 38px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0d0d0d;
    background: #38ff7c;
    border-radius: 10px;
    text-decoration: none;

    box-shadow:
        0 0 14px rgba(56,255,124,0.6),
        0 0 30px rgba(56,255,124,0.4),
        inset 0 0 10px rgba(0,0,0,0.3);

    transition: 0.25s ease;
}

.hosting-blog-btn:hover {
    transform: scale(1.07);
    box-shadow:
        0 0 24px rgba(56,255,124,1),
        0 0 55px rgba(56,255,124,0.8),
        inset 0 0 14px rgba(0,0,0,0.4);
}

/* PACKAGES (nutzt deine bestehenden Styles) */
/* ================================
   FINAL HOSTING CTA SECTION
================================ */
.hosting-final-cta {
    position: relative;
    padding: 140px 0;
    text-align: center;
    background: url('/wp-content/themes/ErotikMediaAgentur/assets/images/hosting-final-bg1.jpg')
        center/cover no-repeat;
    overflow: hidden;
}

/* Nur Desktop: FIXED Background aktivieren */
@media (min-width: 1025px) {
    .hosting-final-cta {
        background-attachment: fixed;
    }
}


/* dunkle Overlay, damit Text gut lesbar bleibt */
.hosting-final-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(3px);
}

.hosting-final-inner {
    position: relative;
    z-index: 10;
    max-width: 850px;
    margin: 0 auto;
}

.hosting-final-text {
    color: #d6d6d6;
    font-size: 1.25rem;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* ================================
   ANIMIERTER NEON BUTTON
================================ */
.hosting-final-btn {
    display: inline-block;
    padding: 20px 48px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #0c0c0d;
    background: #38ff7c;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;

    /* Grundglow */
    box-shadow:
        0 0 16px rgba(56,255,124,0.7),
        0 0 36px rgba(56,255,124,0.5),
        inset 0 0 12px rgba(0,0,0,0.3);

    /* Animationen */
    animation:
        hostingPulse 2.4s infinite ease-in-out,
        hostingBounce 2.2s infinite ease-in-out;
    transition: 0.25s ease;
}

.hosting-final-btn:hover {
    transform: scale(1.08);
    box-shadow:
        0 0 28px rgba(56,255,124,1),
        0 0 60px rgba(56,255,124,0.9),
        inset 0 0 16px rgba(0,0,0,0.4);
}

/* Glow pulsieren */
@keyframes hostingPulse {
    0%   { box-shadow: 0 0 12px rgba(56,255,124,0.4); }
    50%  { box-shadow: 0 0 32px rgba(56,255,124,1); }
    100% { box-shadow: 0 0 12px rgba(56,255,124,0.4); }
}

/* Leichter Bounce */
@keyframes hostingBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}



/* ======================================
   HERO BUTTON – Neon Style
====================================== */
.hero .btn-primary {
    display: inline-block;
    padding: 16px 40px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0d0d0d;
    background: #38ff7c;
    border-radius: 10px;
    text-decoration: none;

    box-shadow:
        0 0 14px rgba(56,255,124,0.6),
        0 0 30px rgba(56,255,124,0.4),
        inset 0 0 10px rgba(0,0,0,0.3);

    transition: 0.25s ease;
}

.hero .btn-primary:hover {
    transform: scale(1.07);
    box-shadow:
        0 0 25px rgba(56,255,124,1),
        0 0 55px rgba(56,255,124,0.9),
        inset 0 0 14px rgba(0,0,0,0.45);
}
/* =========================================
   BOOKING PAGE DESIGN
========================================= */

/* Neon Title */
.booking-title {
    animation: neonPulse 3s infinite alternate;
}

@keyframes neonPulse {
    0% { text-shadow: 0 0 10px #bd1e59; }
    100% { text-shadow: 0 0 25px #bd1e59; }
}

/* Optional: Soft Glow */
.booking-section iframe {
    animation: glowFrame 5s ease-in-out infinite alternate;
}

@keyframes glowFrame {
    0% {
        box-shadow: 
            0 0 14px rgba(56,255,124,0.3),
            inset 0 0 12px rgba(0,0,0,0.5);
    }
    100% {
        box-shadow: 
            0 0 25px rgba(56,255,124,0.6),
            inset 0 0 18px rgba(0,0,0,0.7);
    }
}

.booking-btn {
    display: inline-block;
    padding: 16px 38px;
    margin-top: 20px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0d0d0d;
    background: #38ff7c;
    border-radius: 12px;
    text-decoration: none;

    /* Glow */
    box-shadow:
        0 0 14px rgba(56,255,124,0.6),
        0 0 30px rgba(56,255,124,0.4),
        inset 0 0 10px rgba(0,0,0,0.3);

    transition: 0.25s ease;
}

.booking-btn:hover {
    transform: scale(1.07);
    box-shadow:
        0 0 24px rgba(56,255,124,1),
        0 0 55px rgba(56,255,124,0.8),
        inset 0 0 14px rgba(0,0,0,0.4);
}
.contact-hero {
    padding: 22px 0 !important;
}



/* EINEN EINZIGEN BACKGROUND FÜR DIE GANZE SEITE */
.contact-background {
    background: url('/wp-content/themes/ErotikMediaAgentur/assets/images/kontakt-hintergrund2.jpg')
                center/cover no-repeat;
    padding-bottom: 120px;
}

/* SCHWARZER HERO-BLOCK OBEN */
.contact-hero-black {
    background: rgba(0,0,0,0.88);
    padding: 40px 0 80px 0;
    text-align: center;
    box-shadow:
        0 0 20px rgba(0,0,0,0.7),
        inset 0 0 40px rgba(0,0,0,0.7);
}

/* Formular- & Textbereich – schwebend über dem Bild */
.contact-section {
    background: transparent !important;
    padding: 80px 0;
}

/* Nur auf Desktop beim Hover anzeigen */
@media (min-width: 901px) {
    .nav-list li.menu-item-has-children:hover > .sub-menu {
        display: block;
    }
}


/* ================================
   FLOATING CONTAINER – FIX
================================ */
#ema-wp-floating-container {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 0 !important;
    height: 0 !important;
    z-index: 999999 !important;
    pointer-events: none; /* Container klickt nicht */
}

	/* ---------- NEON PINK LOGO HOVER (EM AGENCY) ---------- */

/* Grundzustand: leicht glühend */
.logo.animated-logo a img {
    filter: drop-shadow(0 0 4px rgba(255, 0, 153, 0.5)) !important;
    transition: filter 0.3s ease, transform 0.3s ease;
    will-change: filter, transform;
    cursor: pointer;
}

/* Hover: starkes Neon-Pink + leichtes Zoomen */
.logo.animated-logo:hover a img,
.logo.animated-logo a:hover img {
    filter:
        drop-shadow(0 0 10px rgba(255, 0, 180, 1))
        drop-shadow(0 0 22px rgba(255, 0, 153, 0.85))
        drop-shadow(0 0 35px rgba(255, 0, 153, 0.65)) !important;
    transform: scale(1.05);
}




/* ---------- NEON PINK LOGO HOVER (EM AGENCY) ---------- */

/* Grundzustand */
.logo.animated-logo img {
    filter: drop-shadow(0 0 6px rgba(255, 0, 153, 0.45));
    transition: filter 0.3s ease, transform 0.3s ease;
    will-change: filter, transform;
    cursor: pointer;
}

/* Hover (Desktop) */
@media (hover: hover) and (min-width: 901px) {
    .logo.animated-logo:hover img {
        filter:
            drop-shadow(0 0 10px rgba(255, 0, 180, 1))
            drop-shadow(0 0 22px rgba(255, 0, 153, 0.9))
            drop-shadow(0 0 35px rgba(255, 0, 153, 0.7));
        transform: scale(1.06);
    }
}

/* FIX: Mobile Menü darf nicht blockieren */
.mobile-menu-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Wenn geöffnet */
.mobile-menu-overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

/* =========================================
   BOOKING SECTION – Hintergrund + Overlay
========================================= */
.booking-section {
    position: relative;
    padding: 100px 0;
    background: url('/wp-content/themes/ErotikMediaAgentur/assets/images/booking-bg.jpg')
               center/cover no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

/* dunkles Overlay */
.booking-section .booking-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.68);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.booking-inner {
    position: relative;
    z-index: 5;
    text-align: center;
}

.booking-inner h2 {
    color: #ffffff;
    margin-bottom: 40px;
    font-size: 2.4rem;
    text-shadow: 0 0 14px rgba(56,255,124,0.5);
}

/* =========================================
   EMBED (Iframe)
========================================= */
.booking-embed {
    max-width: 900px;
    margin: 0 auto;
}

.booking-embed iframe {
    width: 100%;
    height: 900px;
    border: none;
    border-radius: 14px;

    box-shadow:
        0 0 16px rgba(56,255,124,0.4),
        0 0 36px rgba(56,255,124,0.25),
        inset 0 0 14px rgba(0,0,0,0.6);
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 768px) {
    .booking-section {
        padding: 60px 0;
        background-attachment: scroll;
    }

    .booking-inner h2 {
        font-size: 1.9rem;
    }

    .booking-embed iframe {
        height: 750px;
    }
}
/* =========================================
   CTA SECTION – Background + Pink Glow
========================================= */
.cta-section {
    position: relative;
    padding: 120px 0;
    background: url('/wp-content/themes/ErotikMediaAgentur/assets/images/cta-bg2.jpg')
                center/cover no-repeat;
    background-attachment: fixed;
    text-align: center;
    overflow: hidden;
}


.cta-inner {
    position: relative;
    z-index: 5;
}

.cta-inner h2 {
    color: #fff;
    font-size: 2.6rem;
    margin-bottom: 20px;

    /* Pink Glow */
    text-shadow:
        0 0 12px rgba(189,30,89,0.6),
        0 0 26px rgba(189,30,89,0.4);
}

.cta-inner p {
    color: #d4d4d4;
    font-size: 1.2rem;
    max-width: 750px;
    margin: 0 auto 35px;
}

/* CTA Button */
.cta-btn {
    font-size: 1.35rem !important;
    padding: 18px 52px !important;

    /* Pink Glow */
    box-shadow:
        0 0 14px rgba(189,30,89,0.7),
        0 0 28px rgba(189,30,89,0.5);
}

.cta-btn:hover {
    box-shadow:
        0 0 20px rgba(189,30,89,1),
        0 0 40px rgba(189,30,89,0.9);
    transform: scale(1.07);
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 768px) {

    .cta-section {
        padding: 80px 0;
        background-attachment: scroll;
    }

    .cta-inner h2 {
        font-size: 2rem;
    }

    .cta-inner p {
        font-size: 1rem;
    }

    .cta-btn {
        padding: 16px 40px !important;
        font-size: 1.2rem !important;
    }
}

/* ==========================================================
   EM AGENCY – PREMIUM PRICING CARDS (GLOBAL, WooCommerce kompatibel)
   Pink Glow, Green Premium Glow, Background Images optional
========================================================== */

/* GRID */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }

/* BASE CARD */
.pricing-card {
    position: relative;
    overflow: hidden;

    background: #1a1a1d;
    border-radius: 16px;
    border: 1px solid #2d2d2f;

    padding: 34px;
    min-height: 380px;

    color: #f1f1f1;
    text-align: left;

    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* BACKGROUND IMAGE (optional, per card-type) */
.pricing-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .22;         /* damit Text gut lesbar bleibt */
    pointer-events: none;
}

.pricing-card--basic::before {
    background-image: url('/wp-content/themes/ErotikMediaAgentur/assets/images/pricing-basic.jpg');
}
.pricing-card--premium::before {
    background-image: url('/wp-content/themes/ErotikMediaAgentur/assets/images/pricing-premium.jpg');
}
.pricing-card--gold::before {
    background-image: url('/wp-content/themes/ErotikMediaAgentur/assets/images/pricing-gold.jpg');
}
.pricing-card--platinum::before {
    background-image: url('/wp-content/themes/ErotikMediaAgentur/assets/images/pricing-platinum.jpg');
}

/* INNER WRAPPER */
.pricing-card-inner {
    position: relative;
    z-index: 10;
}

/* BADGE */
.pricing-tag {
    display: inline-block;
    padding: 6px 12px;
    background: #bd1e59;
    color: #fff;
    font-size: .75rem;
    border-radius: 4px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pricing-tag--hot {
    background: linear-gradient(135deg,#ff5fa1,#ffb86b);
}

/* TITLES */
.pricing-title {
    font-size: 1.45rem;
    margin-bottom: 4px;
}
.pricing-subtitle {
    font-size: .96rem;
    color: #d4d4d4;
    margin-bottom: 18px;
}

/* PRICE */
.pricing-price {
    margin-bottom: 20px;
}
.pricing-amount {
    font-size: 1.7rem;
    font-weight: 800;
}
.pricing-note {
    margin-left: 6px;
    color: #ff80c0;
}

/* LIST */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 26px 0;
}
.pricing-features li {
    margin-bottom: 7px;
    padding-left: 16px;
    position: relative;
}
.pricing-features li::before {
    content: "✹";
    position: absolute;
    left: 0;
    top: 0;
    font-size: .85rem;
    color: #38ff7c;
    text-shadow: 0 0 6px rgba(56,255,124,0.75);
}

/* ==========================================
   HOVER EFFECTS (wie alte unteren Pakete)
========================================== */

/* NORMAL GLOW */
.pricing-card:hover {
    transform: translateY(-8px);
    border-color: #bd1e59;
    box-shadow:
        0 0 14px rgba(189,30,89,.65),
        0 0 32px rgba(189,30,89,.35);
}

/* FEATURED ("BELIEBT") EXTRA GLOW */
.pricing-card--featured {
    border: 2px solid #bd1e59;
    box-shadow:
        0 0 18px rgba(189,30,89,.45),
        0 0 38px rgba(189,30,89,.25);
}

/* GREEN PREMIUM HOVER GLOW (wie dein altes teures Paket) */
.pricing-card--premium:hover,
.pricing-card--gold:hover,
.pricing-card--platinum:hover {
    border-color: #38ff7c;
    box-shadow:
        0 0 18px rgba(56,255,124,.75),
        0 0 46px rgba(56,255,124,.35);
}

/* ============================================
   BUTTON B – GLASS PINK LUXURY
============================================ */
.pricing-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;

    background: rgba(189,30,89,0.25);
    border: 1px solid rgba(255,120,170,0.5);
    backdrop-filter: blur(10px);

    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    text-align: center;

    transition: 0.3s ease;
}

.pricing-btn:hover {
    background: rgba(189,30,89,0.45);
    border-color: #ff3e9d;
    box-shadow:
        0 0 20px rgba(189,30,89,0.8),
        0 0 40px rgba(189,30,89,0.6);
    transform: translateY(-3px);
}

/* ============================================
   BUTTON C – MINIMAL PINK CYBER GLOW
============================================ */
.pricing-btn {
    display: block;
    width: 100%;
    padding: 14px 22px;

    background: #111;
    color: #ff4fa1;
    border: 1px solid #bd1e59;

    border-radius: 10px;
    font-weight: 800;
    text-align: center;

    transition: .25s ease;
}

.pricing-btn:hover {
    color: #fff;
    box-shadow:
        0 0 14px rgba(189,30,89,0.9),
        0 0 28px rgba(189,30,89,0.4);
    transform: translateY(-4px);
}

/* BUTTON */
.pricing-btn {
    display: block;
    background: #bd1e59;
    color: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    transition: 0.25s ease;
}

.pricing-btn:hover {
    background: #e3246c;
    box-shadow: 0 0 18px rgba(189, 30, 89, 1);
}

/* Popular Card */
.pricing-card-popular {
    border: 1px solid #bd1e59;
    box-shadow: 0 0 18px rgba(189,30,89,0.6);
    transform: scale(1.05);
}

.popular-tag {
    background: #bd1e59;
    color: white;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-bottom: 10px;
    display: inline-block;
}

.video-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 0, 120, 0.6);
    box-shadow: 0 0 25px rgba(255, 0, 120, 0.4);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.video-wrapper:hover {
    box-shadow: 0 0 40px rgba(255, 0, 180, 0.7);
    border-color: rgba(255, 0, 180, 1);
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ===== Zentrierung ===== */
.section-process {
    text-align: center;
}

.process-list {
    list-style: none;
    padding: 0;
}

.process-list li {
    margin: 0 auto 40px auto;
    max-width: 700px;
    padding: 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* ===== Typografie ===== */
.process-list h3 {
    margin-bottom: 10px;
}

.process-list p {
    line-height: 1.6;
    opacity: 0.9;
}

/* ===== Hover Effekt (clean & sexy) ===== */
.process-list li:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ===== Step Nummer ===== */
.process-step {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
    opacity: 0.7;
}
/* ===== CARDS (breiter + Video-Glow Style) ===== */
.process-list li {
    margin: 0 auto 40px auto;
    max-width: 900px; /* ← breiter */
    padding: 24px;
    border-radius: 16px;

    border: 2px solid rgba(255, 0, 120, 0.3);
    box-shadow: 0 0 20px rgba(255, 0, 120, 0.2);

    transition: all 0.3s ease;
}


/* ===== Hover = gleich wie Video Glow ===== */
.process-list li:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 0, 180, 1);
    box-shadow: 0 0 40px rgba(255, 0, 180, 0.6);

    background: rgba(255, 255, 255, 0.03);
}


/* ===== Typografie ===== */
.process-list h3 {
    margin-bottom: 10px;
}

.process-list p {
    line-height: 1.6;
    opacity: 0.9;
}


/* ===== Step Nummer ===== */
.process-step {
    display: inline-block;
    margin-bottom: 12px;
    font-weight: bold;
    opacity: 0.7;
}
/* ===== Video Wrapper (Glow + Hover) ===== */
.video-wrapper{
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;

  border: 2px solid rgba(255, 0, 120, 0.6);
  box-shadow: 0 0 25px rgba(255, 0, 120, 0.4);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.video-wrapper:hover{
  box-shadow: 0 0 40px rgba(255, 0, 180, 0.7);
  border-color: rgba(255, 0, 180, 1);
}

.video-wrapper video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optischer Playbutton (nicht klickbar, blockiert nichts) */
.video-wrapper .custom-play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;

  width: 74px;
  height: 74px;
  border-radius: 999px;

  border: 2px solid rgba(255, 0, 120, 0.85);
  background: rgba(0,0,0,0.35);
  box-shadow: 0 0 25px rgba(255, 0, 120, 0.5);

  pointer-events: none;
}

/* Dreieck */
.video-wrapper .custom-play::before{
  content:"";
  position:absolute;
  top:50%;
  left:52%;
  transform:translate(-50%,-50%);
  width:0; height:0;
  border-left: 18px solid rgba(255,255,255,0.95);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* Hover (Glow) */
.video-wrapper .custom-play:hover{
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 40px rgba(255, 0, 180, 0.9);
  border-color: rgba(255, 0, 180, 1);
}

/* Erste Section */
.hero-main {
    background:
        linear-gradient(135deg, rgba(20,20,21,0.75), rgba(14,14,15,0.85)),
        url('/wp-content/themes/ErotikMediaAgentur/assets/images/hero-bg.jpg');
}

/* Zweite Section (z.B. dunkler / cleaner) */
.hero-support {
    background:
        linear-gradient(135deg, rgba(10,10,10,0.9), rgba(5,5,5,0.95)),
        url('/wp-content/themes/ErotikMediaAgentur/assets/images/atelier-bg.jpg');
}

/* CTA ULTRA GLOW BUTTON */
.btn-cta-glow {
    background: #bd1e59;
    color: #fff;
    border-radius: 8px;

    box-shadow: 
        0 0 8px rgba(189, 30, 89, 0.9),
        0 0 20px rgba(189, 30, 89, 0.8),
        0 0 40px rgba(189, 30, 89, 0.6),
        0 0 80px rgba(189, 30, 89, 0.4);

    animation: pulseGlowFast 1.2s infinite;
    
    transform: scale(1);
}

/* Hover = noch intensiver */
.btn-cta-glow:hover {
    transform: scale(1.07);
    box-shadow: 
        0 0 15px rgba(189, 30, 89, 1),
        0 0 35px rgba(189, 30, 89, 0.9),
        0 0 70px rgba(189, 30, 89, 0.7),
        0 0 120px rgba(189, 30, 89, 0.5);
}

/* Schneller & stärker Puls */
@keyframes pulseGlowFast {
    0% {
        box-shadow: 
            0 0 5px rgba(189, 30, 89, 0.9),
            0 0 15px rgba(189, 30, 89, 0.7),
            0 0 30px rgba(189, 30, 89, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(189, 30, 89, 1),
            0 0 50px rgba(189, 30, 89, 0.9),
            0 0 100px rgba(189, 30, 89, 0.6);
        transform: scale(1.04);
    }
    100% {
        box-shadow: 
            0 0 5px rgba(189, 30, 89, 0.9),
            0 0 15px rgba(189, 30, 89, 0.7),
            0 0 30px rgba(189, 30, 89, 0.5);
        transform: scale(1);
    }
}

.ps-list-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2025/11/Wir-sind-online-Die-EM-Agency-ist-live.jpg');
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    opacity: 0.18;
    filter: blur(3px);
    z-index: -1;
}

/* verhindert Scroll wenn Modal offen */
.no-scroll { overflow: hidden; }

.lang-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
  font-family: inherit;
}
.lang-modal.is-open { display: block; }

.lang-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

.lang-modal__panel {
  position: relative;
  width: min(520px, calc(100% - 28px));
  margin: 10vh auto 0;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15,15,18,.92), rgba(8,8,10,.92));
  border: 1px solid rgba(255, 0, 160, .35);
  box-shadow:
    0 0 22px rgba(255, 0, 160, .35),
    0 0 55px rgba(255, 0, 160, .18),
    inset 0 0 30px rgba(0,0,0,.55);
}

.lang-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lang-modal__title {
  margin: 0;
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 0, 160, .55);
}

.lang-modal__close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,0,160,.12);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255,0,160,.25);
}
.lang-modal__close:hover { background: rgba(255,0,160,.22); }

.lang-modal__subtitle {
  margin: 10px 0 16px;
  color: rgba(255,255,255,.78);
}

.lang-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: rgba(255,0,160,.10);
  border: 1px solid rgba(255,0,160,.35);
  box-shadow: 0 0 18px rgba(255,0,160,.20);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lang-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,0,160,.18);
  box-shadow: 0 0 26px rgba(255,0,160,.33);
}

.lang-btn__name { font-weight: 700; letter-spacing: .2px; }

.lang-modal__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: rgba(255,255,255,.78);
  user-select: none;
}

/* responsive: ab Tablet 2 Spalten */
@media (min-width: 520px) {
  .lang-modal__grid { grid-template-columns: 1fr 1fr; }
}

/* WPML Sprachumschalter NUR im Mobile-Menü verstecken */
#mobileMenuOverlay .wpml-ls,
#mobileMenuOverlay .wpml-ls-menu-item,
#mobileMenuOverlay .wpml-ls-item,
#mobileMenuOverlay .menu-item-language,
#mobileMenuOverlay li[class*="wpml-ls"]{
  display: none !important;
}

.lang-btn{
  gap:10px;
}

.lang-flag{
  width:22px;
  height:22px;
  object-fit:contain;
  filter: drop-shadow(0 0 8px rgba(255,0,160,.25));
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-cart {
    margin-left: auto;
}

.cart-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    background: #111;
    font-weight: 600;
    transition: 0.3s ease;
}

.cart-button:hover {
    background: #333;
}

.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   EM AGENCY ABOUT PAGE – FINAL STYLE
   ========================================================= */

:root{
  --brand-pink:#ff3f8e;
  --brand-pink-soft:rgba(255,63,142,.22);
  --brand-pink-glow:rgba(255,63,142,.35);
}

/* HERO */

.em-about-hero{
  padding:90px 0 60px;
  position:relative;
}

.em-about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,63,142,.18), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(255,63,142,.12), transparent 32%);
  pointer-events:none;
}

.em-about-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
}


/* GLASS CARDS */

.glass-card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--brand-pink-soft);
  border-radius:22px;
  padding:28px;
  backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 18px rgba(255,63,142,.12),
    0 0 36px rgba(255,63,142,.08),
    0 0 50px rgba(0,0,0,.25);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


/* Glow Layer */

.glass-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(
    circle,
    rgba(255,63,142,.12) 0%,
    rgba(255,63,142,.05) 30%,
    transparent 70%
  );
  opacity:0;
  transform:scale(.9);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}


/* HOVER EFFECT */

.glass-card:hover{
  transform:translateY(-6px) scale(1.01);

  border-color:rgba(255,63,142,.55);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 28px rgba(255,63,142,.28),
    0 0 60px rgba(255,63,142,.18),
    0 0 90px rgba(255,63,142,.12),
    0 0 60px rgba(0,0,0,.35);
}

.glass-card:hover::before{
  opacity:1;
  transform:scale(1);
}


/* HERO IMAGE */

.em-about-hero-image-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:520px;
}

.em-about-hero-image{
  width:100%;
  max-width:430px;
  border-radius:18px;
  object-fit:cover;

  box-shadow:
    0 0 35px rgba(255,63,142,.25),
    0 0 70px rgba(0,0,0,.45);
}


/* STATS */

.em-about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:24px;
}

.stat-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:16px;
  text-align:center;
}

.stat-card strong{
  display:block;
  font-size:26px;
  color:#fff;
  text-shadow:0 0 14px rgba(255,63,142,.25);
}

.stat-card span{
  display:block;
  color:#cfcfcf;
  font-size:13px;
  margin-top:4px;
}


/* SECTION HEAD */

.section-head{
  margin-bottom:24px;
}

.section-head.center{
  text-align:center;
}

.section-head h2{
  font-size:clamp(28px,4vw,46px);
  margin:0 0 10px;
  color:#fff;
}

.section-head p{
  color:#d0d0d0;
  max-width:820px;
  margin:0 auto;
}


/* LOGO GRID */

.em-logo-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}

.em-logo-card{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:16px;

  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);

  color:#f4f4f4;
  font-weight:700;
  letter-spacing:.02em;

  transition:all .3s ease;
}

.em-logo-card:hover{
  border-color:var(--brand-pink);
  box-shadow:0 0 24px rgba(255,63,142,.35);
}


/* ABOUT SECTIONS */

.em-about-section{
  padding:40px 0;
}

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

.em-about-grid h2,
.full-card h2{
  color:#fff;
}

.em-about-grid p,
.full-card p{
  color:#d7d7d7;
}


/* SPECIAL CARDS */

.em-special-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:24px;
}

.special-card{
  min-height:220px;
}

.special-card h3{
  color:#fff;
  margin-bottom:10px;
  text-shadow:0 0 16px rgba(255,63,142,.25);
}

.special-card p{
  color:#d7d7d7;
}


/* KICKER */

.em-about-kicker{
  display:inline-block;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-pink);
  margin-bottom:14px;
  font-weight:700;
  text-shadow:0 0 14px rgba(255,63,142,.25);
}


/* RESPONSIVE */

@media(max-width:1100px){

  .em-about-hero-grid,
  .em-about-grid,
  .em-special-grid,
  .em-logo-grid{
    grid-template-columns:1fr 1fr;
  }

  .em-about-stats{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){

  .em-about-hero-grid,
  .em-about-grid,
  .em-special-grid,
  .em-logo-grid{
    grid-template-columns:1fr;
  }

  .glass-card{
    padding:22px;
  }

}

/* ============================================
   ABOUT – REFERENCE LOGO MARQUEE
   ============================================ */

.em-reference-marquee-wrap {
  margin-top: 28px;
  position: relative;
}

.em-reference-marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.em-reference-track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  animation: emReferenceScroll 28s linear infinite;
}

.em-reference-item {
  flex: 0 0 auto;
  width: 180px;         /* Größe pro Logo-Card */
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255, 63, 142, 0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 18px rgba(255,63,142,0.08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.em-reference-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 63, 142, 0.45);
  box-shadow:
    0 0 24px rgba(255,63,142,0.18),
    0 0 40px rgba(255,63,142,0.12);
}

.em-reference-item img {
  max-width: 75%;
  max-height: 46px;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.15) opacity(0.88);
  transition: filter .3s ease, transform .3s ease;
}

.em-reference-item:hover img {
  filter: grayscale(0%) brightness(1.05) opacity(1);
  transform: scale(1.03);
}

@keyframes emReferenceScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Pause beim Hover */
.em-reference-marquee:hover .em-reference-track {
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 900px) {
  .em-reference-item {
    width: 150px;
    height: 84px;
  }
}

@media (max-width: 600px) {
  .em-reference-item {
    width: 130px;
    height: 76px;
  }

  .em-reference-track {
    gap: 12px;
    animation-duration: 22s;
  }
}
/* ============================================
   FINAL FLOATING IMAGE
   ============================================ */

.em-floating-image-wrap {
  position: relative;
  width: 100%;
  margin: 28px 0 42px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible;
  pointer-events: none;
}

.em-floating-image-wrap::before,
.em-floating-image-wrap::after {
  content: none !important;
  display: none !important;
}

.em-floating-image {
  width: min(520px, 72%);
  height: auto;
  display: block;
  object-fit: contain;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  position: relative;
  z-index: 2;
  will-change: transform;
}


@media (max-width: 760px) {
  .em-floating-image-wrap {
    justify-content: center;
    margin: 20px 0 28px;
  }

  .em-floating-image {
    width: 86%;
  }
}

.em-floating-image-wrap {
  position: relative;
  width: 100%;
  margin: -20px 0 -20px; 
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible;
  pointer-events: none;
}
/* ============================================
   ABOUT PAGE – FINAL SECTION
   ============================================ */

.em-about-closing{
  max-width: 820px;
  margin: 60px auto 120px;
  text-align: center;
  padding: 0 20px;
}

.em-about-closing h2{
  font-size: 38px;
  margin-bottom: 24px;
  color: #fff;
}

.em-closing-text{
  font-size: 18px;
  line-height: 1.7;
  color: #d8d8d8;
  margin-bottom: 18px;
}

.em-closing-cta{
  margin-top: 32px;
}

/* Abschlussbereich */

.em-about-closing{
  max-width:820px;
  margin:60px auto 120px;
  text-align:center;
  padding:0 20px;
}

.em-about-closing h2{
  font-size:38px;
  margin-bottom:24px;
  color:#fff;
}

.em-closing-text{
  font-size:18px;
  line-height:1.7;
  color:#d8d8d8;
  margin-bottom:18px;
}

/* GIF */

.em-closing-gif{
  margin:40px auto 30px;
}

.em-closing-gif img{
  max-width:220px;
  height:auto;
  display:block;
  margin:0 auto;

  filter: drop-shadow(0 0 12px rgba(255,63,142,.35));
}

/* Button */

.em-closing-cta{
  margin-top:20px;
}

/* Nur im HAUPTPUNKT (oben) bei der aktuellen Sprache Text ausblenden */
li.wpml-ls-current-language > a > .wpml-ls-native,
li.wpml-ls-current-language > a > .wpml-ls-display {
  display: none !important;
}

/* Im Dropdown alle Sprachtexte wieder anzeigen */
li.wpml-ls-item ul.sub-menu .wpml-ls-native,
li.wpml-ls-item ul.sub-menu .wpml-ls-display,
li.wpml-ls-item ul.wpml-ls-sub-menu .wpml-ls-native,
li.wpml-ls-item ul.wpml-ls-sub-menu .wpml-ls-display {
  display: inline !important;
}

/* Optional: schöner Abstand zwischen Flagge und Text im Dropdown */
li.wpml-ls-item ul.sub-menu a,
li.wpml-ls-item ul.wpml-ls-sub-menu a {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* Pulsierender About-CTA */
.em-pulse-btn {
  animation: emPulseGrow 2.2s ease-in-out infinite;
  transform-origin: center;
  display: inline-flex;
}

@keyframes emPulseGrow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 63, 142, 0);
  }
  50% {
    transform: scale(1.07);
    box-shadow:
      0 0 12px rgba(255, 63, 142, 0.28),
      0 0 24px rgba(255, 63, 142, 0.14);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 63, 142, 0);
  }
}
.pricing-section-wrapper {
  width: 100%;
}

.pricing-grid {
  width: 100%;
}

#em-cart-next-step.em-cart-next-step {
  display: none;
  width: 100%;
  max-width: none !important;
  margin: 42px 0 0 !important;
  clear: both;
  grid-column: 1 / -1;
  flex-basis: 100%;
}

#em-cart-next-step .em-cart-next-step-inner {
  width: 100%;
  max-width: none !important;
  padding: 42px 46px;
  border-radius: 30px;
  text-align: center;

  background:
    linear-gradient(135deg, rgba(189,30,89,0.18) 0%, rgba(189,30,89,0.08) 42%, rgba(255,255,255,0.02) 100%),
    rgba(255,255,255,0.025);

  border: 1px solid rgba(189,30,89,0.20);

  box-shadow:
    0 0 0 1px rgba(189,30,89,0.08),
    0 0 70px rgba(189,30,89,0.18),
    0 34px 90px rgba(0,0,0,0.38);
}

#em-cart-next-step .em-cart-next-step-eyebrow {
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #f3c86a;
  margin-bottom: 14px;
  font-weight: 800;
}

#em-cart-next-step h3 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  line-height: 1.02;
  color: #fff;
  letter-spacing: -0.04em;
}

#em-cart-next-step p {
  margin: 0 auto;
  max-width: 980px;
  color: #c2c6d1;
  line-height: 1.8;
  font-size: 1.06rem;
}

#em-cart-next-step .em-cart-next-step-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.em-btn-checkout {
  width: min(720px, 100%);
  min-height: 72px;
  padding: 20px 34px;
  font-size: 18px;
  font-weight: 900;
  border-radius: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;

  background: linear-gradient(135deg, #bd1e59, #d92d6c);
  color: #fff !important;
  text-decoration: none;

  border: 1px solid rgba(189,30,89,0.48);

  box-shadow:
    0 0 0 1px rgba(189,30,89,0.18),
    0 0 34px rgba(189,30,89,0.32),
    0 20px 54px rgba(189,30,89,0.28);
}

.em-btn-checkout:hover {
  background: linear-gradient(135deg, #f3c86a, #ffd97d);
  color: #1a1206 !important;
  border-color: rgba(243,200,106,0.60);

  box-shadow:
    0 0 0 1px rgba(243,200,106,0.24),
    0 0 36px rgba(243,200,106,0.30),
    0 20px 54px rgba(243,200,106,0.26);
}

.em-btn-checkout-icon,
.em-btn-checkout-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 20px;
}

.em-btn-checkout-arrow {
  font-size: 22px;
}

.em-btn-checkout-glow {
  animation: emCheckoutPulse 1.8s ease-in-out infinite;
}

@keyframes emCheckoutPulse {
  0% {
    box-shadow:
      0 0 0 1px rgba(189,30,89,0.18),
      0 0 18px rgba(189,30,89,0.20),
      0 18px 46px rgba(189,30,89,0.20);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(189,30,89,0.26),
      0 0 42px rgba(189,30,89,0.40),
      0 22px 56px rgba(189,30,89,0.30);
    transform: scale(1.01);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(189,30,89,0.18),
      0 0 18px rgba(189,30,89,0.20),
      0 18px 46px rgba(189,30,89,0.20);
    transform: scale(1);
  }
}

/* Standard WooCommerce "Warenkorb anzeigen" ausblenden */
.added_to_cart.wc-forward {
  display: none !important;
}

@media (max-width: 767px) {
  #em-cart-next-step .em-cart-next-step-inner {
    padding: 28px 20px;
    border-radius: 22px;
  }

  #em-cart-next-step h3 {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
  }

  .em-btn-checkout {
    width: 100%;
    min-height: 66px;
    padding: 18px 20px;
    font-size: 16px;
    gap: 10px;
  }

  .em-btn-checkout-icon,
  .em-btn-checkout-arrow {
    font-size: 18px;
  }
}
.em-modal-code-preview {
  margin: 18px 0 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(189,30,89,0.18);
  text-align: left;
}

.em-modal-code-placeholder {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  user-select: none;
}

.em-offer-form {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.em-offer-input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #fff;
  outline: none;
  font-size: 15px;
}

.em-offer-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.em-offer-input:focus {
  border-color: rgba(189,30,89,0.45);
  box-shadow: 0 0 0 3px rgba(189,30,89,0.12);
}

.em-offer-submit {
  width: 100%;
  min-height: 58px;
  font-size: 16px;
}

.em-offer-note {
  margin: 12px 0 0;
  color: var(--muted-2);
  font-size: 0.92rem;
  line-height: 1.6;
}
/* ===== FINAL STICKY CTA ===== */

.sticky-cta-bar {
  position: fixed !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  width: min(899px, calc(100% - 18px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 17px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background: rgba(10, 10, 14, 0.92) !important;
  border: 1px solid #b12559 !important;
  backdrop-filter: blur(12px) !important;
  box-shadow:
    0 0 0 1px rgba(56,255,124,0.10),
    0 0 22px rgba(56,255,124,0.18),
    0 18px 40px rgba(0,0,0,0.30) !important;
  z-index: 9999 !important;
}

/* entfernt alte Labels wie "Beliebt" */
.sticky-btn-right::before,
.sticky-btn-left::before {
  content: none !important;
  display: none !important;
}

.sticky-btn-left, .sticky-btn-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    background: linear-gradient(135deg, #ff66bb, #52ff8f) !important;
    color: #08110d !important;
    box-shadow: 0 0 14px #ad7187, 0 6px 14px rgba(56, 255, 124, 0.12) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

.sticky-btn-left:hover,
.sticky-btn-right:hover {
  transform: translateY(-1px) !important;
}

/* DESKTOP */
.sticky-btn-left {
  flex: 0 0 31% !important;
  min-height: 42px !important;
  padding: 3px 12px !important;
  font-size: 14px !important;
}

.sticky-btn-right {
  flex: 0 0 57% !important;
  min-height: 53px !important;
  padding: 5px 16px !important;
  font-size: 15px !important;
}

/* CLOSE BUTTON */
.sticky-cta-close {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10001 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* MOBILE */
@media (max-width: 767px) {
  .sticky-cta-bar {
    width: calc(100% - 12px) !important;
    bottom: 8px !important;
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 20px !important;
  }

  .sticky-btn-left {
    flex: 0 0 35% !important;
    min-height: 54px !important;
    padding: 1px 8px !important;
    font-size: 12px !important;
  }

  .sticky-btn-right {
    flex: 0 0 62% !important;
    min-height: 64px !important;
    padding: 3px 10px !important;
    font-size: 14px !important;
  }

  .sticky-cta-close {
    top: 4px !important;
    right: 4px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 24px !important;
  }
}

/* =========================================
   Pricing Packages 2
   ========================================= */

.pricing2-section {
    margin: 40px 0;
}

.pricing2-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.pricing2-card {
    position: relative;
    min-height: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    background-color: #17171c;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.pricing2-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 14, 0.58);
    z-index: 1;
    pointer-events: none;
}

.pricing2-card:hover {
    transform: translateY(-4px);
    border-color: #39ff88;
    box-shadow:
        0 0 0 1px rgba(57,255,136,0.20),
        0 0 18px rgba(57,255,136,0.16),
        0 12px 28px rgba(0,0,0,0.22);
}

.pricing2-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 22px 20px;
}

.pricing2-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0 0 14px;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.12);
}

.pricing2-tag--hot {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
}

.pricing2-title {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}

.pricing2-subtitle {
    margin: 0 0 18px;
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    line-height: 1.45;
}

.pricing2-price {
    margin: 0 0 18px;
}

.pricing2-amount {
    display: block;
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
}

.pricing2-note {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    line-height: 1.35;
}

.pricing2-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pricing2-features li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 18px;
    color: rgba(255,255,255,0.92);
    font-size: 14px;
    line-height: 1.45;
    transition: color .2s ease, text-shadow .2s ease;
}

.pricing2-features li:last-child {
    margin-bottom: 0;
}

.pricing2-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #39ff88;
    text-shadow: 0 0 8px rgba(57,255,136,0.28);
}

.pricing2-card:hover .pricing2-features li {
    color: #9fffc3;
    text-shadow: 0 0 8px rgba(57,255,136,0.10);
}

.pricing2-cta {
    margin-top: auto;
    padding-top: 18px;
}

/* Base Button – klein & elegant */
.pricing2-section .ema-pricing2-cart-btn,
.pricing2-section .ema-pricing2-cart-fallback,
.pricing2-section .add_to_cart_button,
.pricing2-section a.button,
.pricing2-section .single_add_to_cart_button {

    display: inline-flex !important;
    justify-content: center;
    align-items: center;

    width: auto !important;          /* WICHTIG */
    margin: 0 auto;                  /* zentriert */

    padding: 8px 16px;
    min-height: 36px;

    border-radius: 8px;
    border: 0 !important;

    font-size: 12px;
    font-weight: 600;

    line-height: 1;
    text-decoration: none !important;

    box-sizing: border-box;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

.pricing2-card--starter .add_to_cart_button {
    background: linear-gradient(90deg, #d12969 0%, #bd1e59 100%);
    color: #fff !important;

    box-shadow:
        0 0 10px rgba(189, 30, 89, 0.25),
        0 0 18px rgba(189, 30, 89, 0.15);
}

/* =========================================
   HINTERGRUNDBILDER + FARBEN
   Bildpfade bitte ersetzen
   ========================================= */

/* Link Me = pink */
.pricing2-card--linkme {
    background-image:
        linear-gradient(rgba(255, 90, 170, 0.12), rgba(255, 90, 170, 0.12)),
        url('/wp-content/uploads/2025/03/linkme-bg.jpg');
    border-color: rgba(255, 90, 170, 0.30);
}

.pricing2-card--linkme .pricing2-tag {
    background: rgba(255, 90, 170, 0.12);
    border-color: rgba(255, 90, 170, 0.26);
    color: #ff9bc8;
}

.pricing2-card--linkme .pricing2-amount {
    color: #ff5faa;
}

.pricing2-card--linkme .ema-pricing2-cart-btn,
.pricing2-card--linkme .ema-pricing2-cart-fallback,
.pricing2-card--linkme .add_to_cart_button,
.pricing2-card--linkme a.button,
.pricing2-card--linkme .single_add_to_cart_button,
.pricing2-card--linkme .woocommerce a.button {
    background: linear-gradient(90deg, #ff64ad 0%, #ff3f92 100%);
    color: #ffffff !important;
}

/* Starter = empfohlen / #bd1e59 */
.pricing2-card--starter {
    background-image:
        linear-gradient(rgba(189, 30, 89, 0.14), rgba(189, 30, 89, 0.14)),
        url('/wp-content/uploads/2026/03/starter-webdesign.jpg');
    border-color: #bd1e59;
}

.pricing2-card--starter .pricing2-tag {
    background: rgba(189, 30, 89, 0.14);
    border-color: rgba(189, 30, 89, 0.30);
    color: #ff9dbc;
}

.pricing2-card--starter .pricing2-amount {
    color: #bd1e59;
}

.pricing2-card--starter .ema-pricing2-cart-btn,
.pricing2-card--starter .ema-pricing2-cart-fallback,
.pricing2-card--starter .add_to_cart_button,
.pricing2-card--starter a.button,
.pricing2-card--starter .single_add_to_cart_button,
.pricing2-card--starter .woocommerce a.button {
    background: linear-gradient(90deg, #d12969 0%, #bd1e59 100%);
    color: #ffffff !important;
}

/* STARTER – echtes Neon Glow */
.pricing2-card--starter {
    border-color: #bd1e59 !important;

    box-shadow:
        0 0 0 1px rgba(189, 30, 89, 0.18),
        0 0 14px rgba(189, 30, 89, 0.35),
        0 0 28px rgba(189, 30, 89, 0.25),
        0 0 60px rgba(189, 30, 89, 0.18) !important;
}

/* zusätzlicher Glow Layer */
.pricing2-card--starter::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    pointer-events: none;

    box-shadow:
        0 0 20px rgba(189, 30, 89, 0.35),
        0 0 40px rgba(189, 30, 89, 0.25);
}

.pricing2-card--starter .pricing2-amount {
    color: #bd1e59;

    text-shadow:
        0 0 8px rgba(189, 30, 89, 0.6),
        0 0 18px rgba(189, 30, 89, 0.35),
        0 0 30px rgba(189, 30, 89, 0.2);
}

/* Silver = beliebt / silber */
.pricing2-card--silver {
    background-image:
        linear-gradient(rgba(230, 235, 240, 0.10), rgba(230, 235, 240, 0.10)),
        url('/wp-content/uploads/2026/03/silver-webdesign.jpg');
    border-color: rgba(200, 206, 214, 0.52);
}

.pricing2-card--silver .pricing2-tag {
    background: rgba(220,225,232,0.16);
    border-color: rgba(220,225,232,0.26);
    color: #f4f7fa;
}

.pricing2-card--silver .pricing2-tag--hot {
    background: linear-gradient(180deg, #f7f8fa 0%, #d8dde3 100%);
    color: #222831;
    border-color: rgba(255,255,255,0.5);
}

.pricing2-card--silver .pricing2-amount {
    color: #dce1e7;
}

.pricing2-card--silver .ema-pricing2-cart-btn,
.pricing2-card--silver .ema-pricing2-cart-fallback,
.pricing2-card--silver .add_to_cart_button,
.pricing2-card--silver a.button,
.pricing2-card--silver .single_add_to_cart_button,
.pricing2-card--silver .woocommerce a.button {
    background: linear-gradient(90deg, #edf1f5 0%, #c2c9d1 100%);
    color: #20242a !important;
}

/* Tube = orange */
.pricing2-card--tube {
    background-image:
        linear-gradient(rgba(255,153,0,0.14), rgba(255,153,0,0.14)),
        url('/wp-content/uploads/2026/03/tube-webdesign.jpg');
    border-color: rgba(255,153,0,0.50);
}

.pricing2-card--tube .pricing2-tag {
    background: rgba(255,153,0,0.14);
    border-color: rgba(255,153,0,0.24);
    color: #ffc266;
}

.pricing2-card--tube .pricing2-amount {
    color: #ff9f1a;
}

.pricing2-card--tube .ema-pricing2-cart-btn,
.pricing2-card--tube .ema-pricing2-cart-fallback,
.pricing2-card--tube .add_to_cart_button,
.pricing2-card--tube a.button,
.pricing2-card--tube .single_add_to_cart_button,
.pricing2-card--tube .woocommerce a.button {
    background: linear-gradient(90deg, #ffb000 0%, #ff8c00 100%);
    color: #111111 !important;
}

/* Responsive */
@media (max-width: 1180px) {
    .pricing2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .pricing2-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pricing2-card-inner {
        padding: 20px 18px;
    }

    .pricing2-title {
        font-size: 20px;
    }

    .pricing2-amount {
        font-size: 28px;
    }
}

.linkme-theme-preview{
  --nl-bg1:#08111f;
  --nl-bg2:#2563eb;
  --nl-text:#fff;
  --nl-card:rgba(255,255,255,.12);
  --nl-border:rgba(255,255,255,.18);
  --nl-button:#fff;
  --nl-button-text:#0f172a;
  margin:0;
  color:var(--nl-text);
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.12),transparent 32%),
    radial-gradient(circle at top right,rgba(255,255,255,.08),transparent 26%),
    linear-gradient(135deg,var(--nl-bg1),var(--nl-bg2));
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100%;
  padding:34px 18px 24px;
}
.neonlink-theme.theme-blue-neon{--nl-bg1:#020617;--nl-bg2:#2563eb}
.neonlink-theme.theme-electric-cyan{--nl-bg1:#031525;--nl-bg2:#00d4ff}
.neonlink-theme.theme-aqua-lime{--nl-bg1:#05a4c7;--nl-bg2:#8cff2f}
.neonlink-theme.theme-ice-mint{--nl-bg1:#38bdf8;--nl-bg2:#22c55e}
.neonlink-theme.theme-purple-glow{--nl-bg1:#16072f;--nl-bg2:#a855f7}
.neonlink-theme.theme-violet-shock{--nl-bg1:#2a0b57;--nl-bg2:#ff4fd8}
.neonlink-theme.theme-red-heat{--nl-bg1:#39040c;--nl-bg2:#ff3b30}
.neonlink-theme.theme-sunset-pop{--nl-bg1:#7c2d12;--nl-bg2:#ff5ea8}
.neonlink-theme.theme-orange-flare{--nl-bg1:#5b2100;--nl-bg2:#ff7a00}
.neonlink-theme.theme-gold-luxury{--nl-bg1:#3a2500;--nl-bg2:#f7c948}
.neonlink-theme.theme-green-matrix{--nl-bg1:#012f1c;--nl-bg2:#11ff7a}
.neonlink-theme.theme-toxic-lime{--nl-bg1:#163300;--nl-bg2:#c7ff00}
.neonlink-theme.theme-teal-wave{--nl-bg1:#003b46;--nl-bg2:#00f5d4}
.neonlink-theme.theme-ocean-glow{--nl-bg1:#081936;--nl-bg2:#00b4ff}
.neonlink-theme.theme-gradient-mix{--nl-bg1:#1d4ed8;--nl-bg2:#ff2d95}
.neonlink-theme.theme-ice-blue{--nl-bg1:#0f172a;--nl-bg2:#67e8f9}
.neonlink-theme.theme-rose-candy{--nl-bg1:#6d0d3f;--nl-bg2:#ff6fd8}
.neonlink-theme.theme-lilac-dream{--nl-bg1:#3b0764;--nl-bg2:#d8b4fe}
.neonlink-theme.theme-carbon-steel{--nl-bg1:#111827;--nl-bg2:#64748b}
.neonlink-theme.theme-midnight-rose{--nl-bg1:#14081f;--nl-bg2:#e11d48}
.neonlink-theme.theme-midnight-aqua{--nl-bg1:#05111e;--nl-bg2:#14b8a6}
.neonlink-theme.theme-dark-minimal{--nl-bg1:#020617;--nl-bg2:#1f2937}

.nl-profile-hub{text-align:center}
.nl-avatar-swap{
  position:relative;
  width:148px;height:148px;
  margin:0 auto 22px;
  border-radius:999px;overflow:hidden;
  border:3px solid rgba(255,255,255,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.32),0 0 0 8px rgba(255,255,255,.05);
  backdrop-filter:blur(8px)
}
.nl-avatar-swap img{width:100%;height:100%;object-fit:cover;display:block}
.nl-title{
  font-size:clamp(1.8rem, 4vw, 3rem);
  line-height:1.03;
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:-.03em;
  text-shadow:0 10px 30px rgba(0,0,0,.18)
}
.nl-subtitle{
  max-width:560px;
  margin:0 auto 14px;
  font-size:1rem;
  line-height:1.6;
  color:rgba(255,255,255,.93)
}
.nl-mini-note{
  display:inline-block;
  margin:0 0 22px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid var(--nl-border);
  font-size:.92rem
}

.nl-social-stack{display:grid;gap:12px;margin:10px auto 0;max-width:420px}
.nl-social-button{
  display:flex;align-items:center;gap:12px;justify-content:center;
  text-decoration:none;color:#fff;
  border-radius:999px;padding:14px 18px;min-height:54px;font-weight:700;font-size:.98rem;
  box-shadow:0 18px 40px rgba(0,0,0,.2);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  max-width:420px;width:100%;margin:0 auto;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14)
}
.nl-social-button:hover{transform:translateY(-1px);box-shadow:0 24px 52px rgba(0,0,0,.25)}
.nl-social-label{line-height:1}

.nl-platform-instagram{background:linear-gradient(135deg,#f58529 0%,#dd2a7b 45%,#8134af 75%,#515bd4 100%)}
.nl-platform-x{background:#000;color:#fff}
.nl-platform-onlyfans{background:#00aff0;color:#fff}
.nl-platform-whatsapp{background:#25d366;color:#fff}
.nl-platform-telegram{background:#229ED9;color:#fff}
.nl-platform-tiktok{background:linear-gradient(135deg,#111827 0%,#25F4EE 45%,#FE2C55 100%);color:#fff}
.nl-platform-website{background:#0f172a;color:#fff}

.nl-gallery-shell{max-width:1120px;padding-top:18px;padding-bottom:12px}
.nl-gallery-header{text-align:center;margin-bottom:14px}
.nl-gallery-title{margin:0;font-size:1.1rem;font-weight:800;letter-spacing:-.02em}
.nl-gallery-marquee{position:relative;overflow:hidden;padding:6px 0}
.nl-gallery-marquee::before,.nl-gallery-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:42px;z-index:2;pointer-events:none
}
.nl-gallery-marquee::before{left:0;background:linear-gradient(90deg,rgba(8,17,31,.85),transparent)}
.nl-gallery-marquee::after{right:0;background:linear-gradient(270deg,rgba(8,17,31,.85),transparent)}
.nl-gallery-track{display:flex;gap:14px;width:max-content;animation:nlGalleryScroll 28s linear infinite}
.nl-gallery-speed-normal .nl-gallery-track{animation-duration:28s}
.nl-gallery-card{
  width:170px;height:240px;border-radius:22px;overflow:hidden;flex:0 0 auto;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 40px rgba(0,0,0,.24)
}
.nl-gallery-card img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes nlGalleryScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}

@media (max-width:768px){
  .linkme-theme-preview{padding:26px 14px 20px}
  .nl-social-stack{max-width:100%}
  .nl-social-button{max-width:420px;padding:14px 16px;min-height:52px}
  .nl-gallery-card{width:140px;height:200px;border-radius:18px}
  .nl-gallery-marquee::before,.nl-gallery-marquee::after{width:24px}
}

.wp-block-button__link {
    color: #fff;
    background-color: #bd1e59;
    border-radius: 9999px;
    text-decoration: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
    font-size: 1.125em;

    /* Glow Effekt */
    box-shadow: 0 0 12px rgba(189, 30, 89, 0.6), 
                0 0 28px rgba(189, 30, 89, 0.35);

    transition: all 0.3s ease;
}

/* Hover Effekt */
.wp-block-button__link:hover {
    background-color: #38ff7c;

    box-shadow: 0 0 14px rgba(56, 255, 124, 0.6), 
                0 0 30px rgba(56, 255, 124, 0.4), 
                inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

.wpml-ls-legacy-list-horizontal a {
    display: block;
    text-decoration: none;
    padding: 5px 3px 6px;
    line-height: 1;
}