/* Dart Pfeil Hintergrund Animation */
.dart-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.dart-pfeil {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.3;
    animation: dart-fly 12s linear infinite;
    transform-origin: center;
    top: var(--start-top, 50%);
}

.dart-pfeil svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(38, 185, 154, 0.3));
    transform: rotate(221deg);
}

/* Farbvarianten je Pfeil */
.dart-pfeil:nth-child(1) svg { filter: drop-shadow(0 0 10px rgba(38,185,154,0.3)) hue-rotate(0deg) saturate(1.1); }
.dart-pfeil:nth-child(2) svg { filter: drop-shadow(0 0 10px rgba(38,185,154,0.3)) hue-rotate(90deg) saturate(1.1); }
.dart-pfeil:nth-child(3) svg { filter: drop-shadow(0 0 10px rgba(38,185,154,0.3)) hue-rotate(180deg) saturate(1.1); }
.dart-pfeil:nth-child(4) svg { filter: drop-shadow(0 0 10px rgba(38,185,154,0.3)) hue-rotate(270deg) saturate(1.1); }

/* Startpositionen und Größen */
.dart-pfeil:nth-child(1) {
    --start-top: 20%;
    top: var(--start-top);
    animation-delay: 0s;
    width: 50px;
    height: 50px;
}

.dart-pfeil:nth-child(2) {
    --start-top: 40%;
    top: var(--start-top);
    animation-delay: 2s;
    width: 65px;
    height: 65px;
}

.dart-pfeil:nth-child(3) {
    --start-top: 60%;
    top: var(--start-top);
    animation-delay: 4s;
    width: 80px;
    height: 80px;
}

.dart-pfeil:nth-child(4) {
    --start-top: 80%;
    top: var(--start-top);
    animation-delay: 6s;
    width: 90px;
    height: 90px;
}

/* Flug-Animation: Zusammenlauf rechts mittig und 3s Halt */
@keyframes dart-fly {
    0% {
        left: -120px;
        top: var(--start-top);
        opacity: 0;
        transform: rotate(0deg) scale(0.8);
    }
    10% {
        opacity: 0.3;
        transform: rotate(5deg) scale(1);
    }
    50% {
        left: calc(100vw - 80px);
        top: 50%;
        opacity: 0.5;
        transform: rotate(-2deg) scale(1.1);
    }
    80% {
        left: calc(100vw - 80px);
        top: 50%;
        opacity: 0.5;
        transform: rotate(3deg) scale(0.95);
    }
    99.9% {
        left: calc(100vw - 80px);
        top: 50%;
        opacity: 0;
        transform: rotate(0deg) scale(0.6);
    }
    100% {
        left: -120px;
        top: var(--start-top);
        opacity: 0;
        transform: rotate(0deg) scale(0.6);
    }
}

/* Zahlen-Overlay */
.numbers-overlay {
    position: fixed;
    left: calc(100vw - 80px - 5cm);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    font-family: Arial, sans-serif;
    font-weight: 800;
    text-align: center;
}
.numbers-overlay .value {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0.6);
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255,255,255,0.65), 0 6px 18px rgba(0,0,0,0.25);
    font-size: 96px;
    line-height: 1;
    opacity: 0;
    filter: drop-shadow(0 0 16px rgba(255,255,255,0.5));
}
.numbers-overlay .value.show {
    animation: number-pop var(--pop-duration, 900ms) ease-out forwards;
}
@keyframes number-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(var(--pop-scale, 1.25)); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(var(--pop-scale, 1.25)); }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .dart-pfeil {
        width: 40px;
        height: 40px;
    }
    
    .dart-pfeil:nth-child(4),
    .dart-pfeil:nth-child(5),
    .dart-pfeil:nth-child(6) {
        display: none;
    }
    
    /* Tabellen responsive machen - Verstärkte Regeln */
    * {
        box-sizing: border-box !important;
    }
    
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .site-content, .entry-content, .page-content, .post-content {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    table, .wp-block-table table, .entry-content table, .post-content table, .page-content table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        table-layout: auto !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-x: auto !important;
        display: table !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Container für horizontales Scrollen */
    .table-wrapper, .wp-block-table, .entry-content, .post-content, .page-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    table thead,
    table tbody,
    table tr {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    table th,
    table td {
        width: auto !important;
        min-width: 120px !important;
        max-width: none !important;
        text-align: left !important;
        padding: 8px !important;
        border: 1px solid #ddd !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    
    table th {
        background-color: #f5f5f5 !important;
        font-weight: bold !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
}

@media (max-width: 480px) {
    .dart-pfeil {
        width: 30px;
        height: 30px;
    }
    
    .dart-pfeil:nth-child(3),
    .dart-pfeil:nth-child(4),
    .dart-pfeil:nth-child(5),
    .dart-pfeil:nth-child(6) {
        display: none;
    }
    
    /* Kleinere Bildschirme: Tabellen als Karten */
    table {
        border: none !important;
    }
    
    table thead {
        display: none !important;
    }
    
    table tr {
        display: block !important;
        margin-bottom: 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        padding: 10px !important;
        background: #f9f9f9 !important;
    }
    
    table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 5px 0 !important;
        position: relative !important;
        padding-left: 50% !important;
    }
    
    table td:before {
        content: attr(data-label) !important;
        position: absolute !important;
        left: 6px !important;
        width: 45% !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
        font-weight: bold !important;
        color: #333 !important;
    }
}

/* Zusätzliche responsive Tabellen-Regeln */
@media (max-width: 768px) {
    /* Alle möglichen Container die Tabellen beschnitten könnten */
    .container, .wrap, .main, .content, .site-main, .site-content, 
    .entry-content, .post-content, .page-content, .single-content,
    .woocommerce, .woocommerce-page, .shop-container,
    .wp-block-group, .wp-block-column, .wp-block-columns,
    .elementor-section, .elementor-container, .elementor-widget,
    .vc_row, .vc_column, .wpb_wrapper {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* WordPress-spezifische Tabellen-Klassen */
    .wp-block-table,
    .wp-block-table table,
    .entry-content table,
    .post-content table,
    .page-content table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        display: table !important;
        table-layout: auto !important;
    }
    
    /* Gutenberg Tabellen */
    .wp-block-table__wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Allgemeine Container für Tabellen */
    .table-container,
    .data-table-container,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Verhindere Beschnitt durch Parent-Container */
    .wp-block-group__inner-container,
    .elementor-container,
    .vc_row-fluid {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* WordPress-spezifische Tabellen-Klassen für kleine Bildschirme */
    .wp-block-table,
    .wp-block-table table,
    .entry-content table,
    .post-content table,
    .page-content table {
        border: none !important;
    }
    
    .wp-block-table thead,
    .entry-content table thead,
    .post-content table thead,
    .page-content table thead {
        display: none !important;
    }
    
    .wp-block-table tr,
    .entry-content table tr,
    .post-content table tr,
    .page-content table tr {
        display: block !important;
        margin-bottom: 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        padding: 10px !important;
        background: #f9f9f9 !important;
    }
    
    .wp-block-table td,
    .entry-content table td,
    .post-content table td,
    .page-content table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 5px 0 !important;
        position: relative !important;
        padding-left: 50% !important;
    }
    
    .wp-block-table td:before,
    .entry-content table td:before,
    .post-content table td:before,
    .page-content table td:before {
        content: attr(data-label) !important;
        position: absolute !important;
        left: 6px !important;
        width: 45% !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
        font-weight: bold !important;
        color: #333 !important;
    }
}

/* Höchste Priorität: Verhindere Tabellen-Beschnitt */
@media (max-width: 768px) {
    /* Überschreibe alle möglichen Beschnitt-Regeln */
    *[style*="overflow"] {
        overflow-x: visible !important;
    }
    
    /* Spezielle Regeln für Tabellen-Container */
    div:has(table), 
    section:has(table), 
    article:has(table),
    .wp-block-group:has(table),
    .elementor-widget:has(table) {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fallback für ältere Browser ohne :has() */
    .has-table {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Pause Animation bei Hover über Content */
body:hover .dart-animation-container {
    animation-play-state: paused;
}