/*
 *  * Theme Name: 2025 Child Blocksystem
 *   * Version: 49.0.0 - FORCE STATIC SERVICES (Cache Buster)
 *    */

/* ============================================================================
 *  * 1. ACCESSIBILITY
 *   * ============================================================================ */
.skip-to-content {
    position: absolute; top: -9999px; left: 0;
    background: #fb923c; color: white; padding: 15px 20px; z-index: 9999999;
    font-weight: bold; text-decoration: none; border-radius: 0 0 10px 0;
}
.skip-to-content:focus { top: 0; left: 0; outline: 3px solid #1e40af; }
*:focus-visible { outline: 3px solid #fb923c !important; outline-offset: 2px !important; }

/* ============================================================================
 *  * 2. HEADER BUTTON (RAKETE STABIL + BLINKEND)
 *   * ============================================================================ */
.cta-button-header {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    padding: 8px 30px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    white-space: nowrap !important;
    min-height: 50px !important;
    min-width: 300px !important;
    transform: none !important; 
    /* animation: none !important;  <-- ENTFERNT: Button darf atmen */
}

.cta-button-header:hover {
    transform: none !important; 
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.7) !important;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
}

.cta-text-container {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    text-align: center !important; line-height: 1.2 !important;
    background: transparent !important;
}

.cta-text-line1 {
    font-size: 0.9rem !important; font-weight: 900 !important;
    display: block !important; letter-spacing: 0.5px !important;
    background: transparent !important; color: white !important;
}

.cta-text-line2 {
    font-size: 0.75rem !important; font-weight: 600 !important;
    opacity: 1 !important; display: block !important;
    background: transparent !important; color: #fff7ed !important;
    margin-top: 2px !important;
}

/* RAKETEN FIX - DARF SICH BEWEGEN */
.rocket-icon { 
    font-size: 1.8rem !important; 
    background: transparent !important; 
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -2px !important; 
    transform-origin: center center !important;
    transform: none !important;
}

/* DER BLINKENDE PUNKT */
.rocket-icon::before {
    content: '●' !important;
    position: absolute !important;
    top: -3px !important;
    right: 1px !important;
    font-size: 0.5rem !important;
    color: #fef08a !important; 
    animation: rocketBlink 1.5s ease-in-out infinite !important;
    z-index: 10 !important;
    filter: blur(0.5px) !important;
}

@keyframes rocketBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.4); }
}

/* Animation der Rakete selbst beim Hover (Wackeln) */
.cta-button-header:hover .rocket-icon {
    animation: rocketLockWiggle 0.6s ease-in-out infinite alternate !important;
}

@keyframes rocketLockWiggle {
    0% { transform: translate3d(0,0,0) rotate(-6deg); }
    100% { transform: translate3d(0,0,0) rotate(6deg); }
}

/* ============================================================================
 *  * 3. GLOBAL BUTTONS
 *   * ============================================================================ */
.wp-block-button__link, .wpcf7-submit, 
a[href*="/kontakt"]:not(.cta-button-header) {
    display: inline-block !important;
    padding: 15px 35px !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    text-align: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
.wp-block-button__link.has-background, .wpcf7-submit, 
a[href="/kontakt"]:not(.cta-button-header) {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
    color: white !important;
    box-shadow: 0 10px 25px rgba(251, 146, 60, 0.4) !important;
}
.wp-block-button__link:hover, .wpcf7-submit:hover, 
a[href="/kontakt"]:not(.cta-button-header):hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(251, 146, 60, 0.5) !important;
}

/* ============================================================================
 *  * 4. FORM INPUTS & SELECTS - TRUE DARK MODE
 *   * ============================================================================ */
.wpcf7 input:not([type="checkbox"]), .wpcf7 select, .wpcf7 textarea {
    -webkit-appearance: none !important; appearance: none !important;
    border-radius: 8px !important; outline: none !important;
    font-size: 1rem !important; padding: 12px 15px !important;
    width: 100% !important; box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}
/* LIGHT MODE */
body:not(.dark-mode) .wpcf7 input:not([type="checkbox"]),
body:not(.dark-mode) .wpcf7 select,
body:not(.dark-mode) .wpcf7 textarea {
    background: #ffffff !important; color: #1e293b !important; border: 2px solid #cbd5e1 !important;
}
/* DARK MODE */
body.dark-mode .wpcf7 input[type="text"], body.dark-mode .wpcf7 input[type="email"],
body.dark-mode .wpcf7 input[type="tel"], body.dark-mode .wpcf7 input[type="number"],
body.dark-mode .wpcf7 textarea, body.dark-mode .wpcf7 select {
    background-color: #1e293b !important; color: #ffffff !important;
    border: 2px solid #475569 !important; -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}
body.dark-mode .wpcf7 input:focus, body.dark-mode .wpcf7 select:focus, body.dark-mode .wpcf7 textarea:focus {
    border-color: #fb923c !important; background-color: #0f172a !important;
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.3) !important;
}
body.dark-mode .wpcf7 select option { background-color: #1e293b !important; color: #ffffff !important; }
body.dark-mode ::placeholder { color: #94a3b8 !important; opacity: 1 !important; }
body.dark-mode input.wpcf7-submit[type="submit"] {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
    color: #ffffff !important; border: none !important; -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================================
 *  * 5. CHECKBOX & PRIVACY
 *   * ============================================================================ */
p:has(.wpcf7-acceptance) {
    display: flex !important; align-items: center !important;
    background: rgba(30, 64, 175, 0.05) !important; padding: 15px !important;
    border-radius: 8px !important; border: 1px solid #e5e7eb !important;
    margin-bottom: 20px !important; line-height: 1.5 !important; font-size: 0.9rem !important;
}
.wpcf7-acceptance input[type="checkbox"] {
    display: inline-block !important; width: 20px !important; height: 20px !important;
    margin-right: 6px !important; vertical-align: middle !important;
    cursor: pointer !important; accent-color: #fb923c !important; margin-top: 0 !important;
}
.wpcf7-acceptance label { margin: 0 !important; padding: 0 !important; display: inline !important; }
body.dark-mode p:has(.wpcf7-acceptance) {
    background: #1e293b !important; border-color: #475569 !important; color: #e2e8f0 !important;
}
body.dark-mode .wpcf7-acceptance input[type="checkbox"] {
    background-color: #0f172a !important; border: 1px solid #fb923c !important;
}

/* ============================================================================
 *  * 6. DARK MODE GENERAL
 *   * ============================================================================ */
body.dark-mode .business-header-pro { background: #0f1419 !important; border-bottom: 1px solid #1e293b !important; }
body.dark-mode .logo-text h1 { 
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important; 
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; 
}
body.dark-mode .desktop-nav a { color: #e2e8f0 !important; }
body.dark-mode .desktop-nav a:hover { color: #60a5fa !important; }
body.dark-mode, body.dark-mode .wp-site-blocks, body.dark-mode main { background-color: #0a0f14 !important; color: #f1f5f9 !important; }
body.dark-mode .sales-card, body.dark-mode .pain-point-item { background-color: #151b23 !important; border: 1px solid #334155 !important; color: #f1f5f9 !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: #ffffff !important; }

/* ============================================================================
 *  * 7. STANDARD
 *   * ============================================================================ */
img, .wp-block-image img { border-radius: 12px !important; }
.logo-container img { border-radius: 50% !important; }
.easybell-logo-inline img { border-radius: 0 !important; }
.desktop-nav a { text-decoration: none !important; font-weight: 700 !important; color: #1e293b; padding-bottom: 5px; }
.desktop-nav a:hover { color: #1e40af; border-bottom: 2px solid #1e40af; }
.mobile-menu-toggle { display: none !important; }
@media (max-width: 950px) { .desktop-nav { display: none !important; } .mobile-menu-toggle { display: block !important; } }
@media print { #ki-badge-corner, #cookie-banner, #acquisition-popup, .skip-to-content { display: none !important; } }

/* ============================================================================
 *  * 8. LAYOUT & KARTEN (DER FINAL KILLER)
 *   * ============================================================================ */

/* 1. RESET FÜR ALLE "FULL WIDTH" BOXEN */
div[style*="margin"][style*="-999px"],
main > .wp-block-group.has-background {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 94% !important; 
    max-width: 1200px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}

/* 2. MEHR PLATZ FÜR DEN TEXT IN DEN BOXEN */
.service-content,
.wp-block-group.has-background > div {
    flex: 1 !important; 
    min-width: 300px !important;
    width: auto !important; 
}

/* 3. ANIMATION - NUR BILDER IN SERVICE KARTEN - DEAKTIVIERT */
div:has(.service-container) img {
    animation: none !important; /* Hier haben wir floatIcon gekillt */
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* 4. PAIN POINTS & EMOJIS */
/* Nur .pain-point-item darf schweben */
.pain-point-item { 
    animation: floatIcon 8s ease-in-out infinite !important;
}

/* HIER IST DAS VERBOT: Alles, was .service-icon ist, muss stehen bleiben */
.service-icon, 
.service-icon div,
.service-container div {
    animation: none !important; 
    transform: none !important;
}

.pain-point-item { border-radius: 12px !important; overflow: hidden !important; }

/* 5. DARK MODE TOGGLE - RUHE BITTE */
.dark-mode-toggle, .dark-mode-toggle * {
    animation: none !important; transform: none !important; 
}
.dark-mode-toggle:hover { transform: scale(1.08) !important; }

/* ============================================================================
 * 9. STARTSEITE LAYOUT & BUTTONS (NEBENEINANDER FIX)
 *  * ============================================================================ */

/* Der Button Style global */
.gradient-btn {
    display: inline-block !important; 
    background: linear-gradient(135deg, #fb923c, #f97316) !important; 
    color: white !important; 
    padding: 16px 40px !important; 
    font-weight: 900 !important; 
    font-size: 1.1rem !important; 
    border-radius: 50px !important; 
    text-decoration: none !important; 
    box-shadow: 0 8px 25px rgba(251, 146, 60, 0.4) !important; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: none !important;
    cursor: pointer !important;
}
.gradient-btn:hover { 
    transform: translateY(-3px) scale(1.05) !important; 
    box-shadow: 0 15px 40px rgba(251, 146, 60, 0.6) !important; 
}

/* Das Grid System */
.tk-grid-container {
    display: grid !important;
    gap: 40px !important;
    width: 100% !important;
    grid-template-columns: 1fr !important; /* Standard: Untereinander (Mobile) */
}

/* AB 1000px Breite: ZWINGEND NEBENEINANDER */
@media (min-width: 1000px) {
    .tk-grid-3 {
        grid-template-columns: 1fr 1fr 1fr !important; /* 3 Spalten hart erzwungen */
    }
    .tk-grid-2 {
        grid-template-columns: 1fr 1fr !important; /* 2 Spalten hart erzwungen */
    }
}