/* ====================================
   CIRCLE TEMPLATE - Modern Infographic Style
   Kreisförmiges Layout mit bunten Segmenten
   Inspiriert von modernen Infografiken
   ==================================== */

.links-container.template-circle {
    position: relative !important;
    width: 100% !important;
    max-width: 550px !important;
    height: 600px !important;
    min-height: 600px !important;
    display: block !important;
    margin: 40px auto !important;
    padding: 0 !important;
}

/* ====================================
   LINK SEGMENTS - Perfekte Kreise
   Dynamische Größe basierend auf Anzahl
   ==================================== */
.links-container.template-circle .link-item {
    position: absolute !important;
    background: white !important;
    width: 140px !important;
    height: 140px !important;
    min-width: 140px !important;
    min-height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
    aspect-ratio: 1 !important;
    border-radius: 50% !important; /* Perfekter Kreis */
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    z-index: 1 !important;
    opacity: 1 !important;
    animation: segmentFadeIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    overflow: hidden !important;
}

/* Dynamische Größen basierend auf Anzahl der Links - JETZT VIA JAVASCRIPT GESTEUERT */
/* JavaScript berechnet die optimale Größe automatisch basierend auf der Anzahl der Links */
/* Dies verhindert Überlappungen auch bei sehr vielen Links (20+) */

@keyframes segmentFadeIn {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-45deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* ====================================
   PLATFORM-SPECIFIC COLORS
   ==================================== */
.links-container.template-circle .link-item.instagram {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

.links-container.template-circle .link-item.youtube {
    background: #FF0000 !important;
}

.links-container.template-circle .link-item.tiktok {
    background: #000000 !important;
}

.links-container.template-circle .link-item.discord {
    background: #5865F2 !important;
}

.links-container.template-circle .link-item.twitch {
    background: #9146FF !important;
}

.links-container.template-circle .link-item.facebook {
    background: #1877F2 !important;
}

.links-container.template-circle .link-item.twitter {
    background: #1DA1F2 !important;
}

.links-container.template-circle .link-item.x {
    background: #000000 !important;
}

.links-container.template-circle .link-item.linkedin {
    background: #0A66C2 !important;
}

.links-container.template-circle .link-item.github {
    background: #333 !important;
}

.links-container.template-circle .link-item.website {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.links-container.template-circle .link-item.email {
    background: #EA4335 !important;
}

.links-container.template-circle .link-item.whatsapp {
    background: #25D366 !important;
}

.links-container.template-circle .link-item.snapchat {
    background: #FFFC00 !important;
}

.links-container.template-circle .link-item.snapchat .link-title {
    color: #000 !important;
}

.links-container.template-circle .link-item.snapchat .link-icon svg,
.links-container.template-circle .link-item.snapchat .link-icon svg path {
    fill: #000 !important;
}

.links-container.template-circle .link-item.pinterest {
    background: #E60023 !important;
}

.links-container.template-circle .link-item.reddit {
    background: #FF4500 !important;
}

.links-container.template-circle .link-item.spotify {
    background: #1DB954 !important;
}

.links-container.template-circle .link-item.telegram {
    background: #26A5E4 !important;
}

.links-container.template-circle .link-item.phone {
    background: #34A853 !important;
}

.links-container.template-circle .link-item.onlyfans {
    background: #00AFF0 !important;
}

.links-container.template-circle .link-item.patreon {
    background: #FF424D !important;
}

.links-container.template-circle .link-item.substack {
    background: #FF6719 !important;
}

.links-container.template-circle .link-item.medium {
    background: #000000 !important;
}

.links-container.template-circle .link-item.soundcloud {
    background: #FF5500 !important;
}

.links-container.template-circle .link-item.apple-music {
    background: #FA243C !important;
}

.links-container.template-circle .link-item.youtube-music {
    background: #FF0000 !important;
}

.links-container.template-circle .link-item.amazon {
    background: #FF9900 !important;
}

.links-container.template-circle .link-item.etsy {
    background: #F56400 !important;
}

.links-container.template-circle .link-item.shopify {
    background: #96BF48 !important;
}

.links-container.template-circle .link-item.signal {
    background: #3A76F0 !important;
}

.links-container.template-circle .link-item.behance {
    background: #1769FF !important;
}

.links-container.template-circle .link-item.dribbble {
    background: #EA4C89 !important;
}

.links-container.template-circle .link-item.kofi {
    background: #FF5E5B !important;
}

/* Für Links ohne spezifische Plattform - Fallback Farben */
.links-container.template-circle .link-item:not([class*="instagram"]):not([class*="youtube"]):not([class*="tiktok"]):not([class*="discord"]):not([class*="twitch"]):not([class*="facebook"]):not([class*="twitter"]):not([class*="x"]):not([class*="linkedin"]):not([class*="github"]):not([class*="website"]):not([class*="email"]):not([class*="whatsapp"]):not([class*="snapchat"]):not([class*="pinterest"]):not([class*="reddit"]):not([class*="spotify"]):not([class*="telegram"]):not([class*="phone"]):not([class*="onlyfans"]):not([class*="patreon"]):not([class*="substack"]):not([class*="medium"]):not([class*="soundcloud"]):not([class*="apple-music"]):not([class*="youtube-music"]):not([class*="amazon"]):not([class*="etsy"]):not([class*="shopify"]):not([class*="signal"]):not([class*="behance"]):not([class*="dribbble"]) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Custom icons with dominant color - use CSS variable for background */
.links-container.template-circle .link-item[style*="--dominant-color"] {
    background: var(--dominant-color) !important;
}

/* ====================================
   HOVER EFFEKTE
   ==================================== */
.links-container.template-circle .link-item:hover {
    transform: scale(1.15) translateZ(20px) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
    z-index: 10 !important;
    filter: brightness(1.1) !important;
}

/* Pulsierender Effekt beim Hover */
.links-container.template-circle .link-item:hover::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: rgba(255, 255, 255, 0.2) !important;
    animation: pulse 2s infinite !important;
}

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

/* ====================================
   ICON STYLING
   ==================================== */
.links-container.template-circle .link-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    aspect-ratio: 1 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

/* Icon sizes werden jetzt via JavaScript dynamisch angepasst */

.links-container.template-circle .link-item:hover .link-icon {
    transform: rotate(360deg) scale(1.15) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Default platform icons - white filter */
.links-container.template-circle .link-icon img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important; /* Weißes Icon */
}

/* Custom icons - no filter */
.links-container.template-circle .link-icon img[src*="/uploads/icons/"] {
    filter: none !important;
}

/* Custom icons - stretch mode fills entire icon circle */
.links-container.template-circle .link-icon img.custom-icon-stretch {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Remove background for stretch mode icons in circle */
.links-container.template-circle .link-icon:has(img.custom-icon-stretch) {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Fallback positioning */
.links-container.template-circle .link-icon {
    position: relative !important;
}

/* Custom icons - centered mode with padding */
.links-container.template-circle .link-icon img.custom-icon-centered {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

.links-container.template-circle .link-icon svg {
    width: 30px !important;
    height: 30px !important;
    fill: white !important;
}

/* ====================================
   TEXT STYLING
   ==================================== */
.links-container.template-circle .link-content {
    text-align: center !important;
    color: white !important;
    z-index: 1 !important;
}

.links-container.template-circle .link-title {
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: white !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Subtle Description Text (falls vorhanden) */
.links-container.template-circle .link-description {
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}

.links-container.template-circle .link-item:hover .link-description {
    opacity: 1 !important;
}

/* ====================================
   RESPONSIVE DESIGN
   ==================================== */
@media (max-width: 768px) {
    .links-container.template-circle {
        max-width: 380px !important;
        height: 450px !important;
        min-height: 450px !important;
        margin: 30px auto !important;
        padding: 0 !important;
    }

    .links-container.template-circle .link-item {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        min-height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        aspect-ratio: 1 !important;
        padding: 0 !important;
        gap: 0.3rem !important;
    }

    .links-container.template-circle .link-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        aspect-ratio: 1 !important;
        font-size: 1.2rem !important;
    }

    .links-container.template-circle .link-icon img,
    .links-container.template-circle .link-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Custom icons - stretch mode mobile */
    .links-container.template-circle .link-icon img.custom-icon-stretch {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }

    /* Custom icons - centered mode mobile */
    .links-container.template-circle .link-icon img.custom-icon-centered {
        width: 24px !important;
        height: 24px !important;
    }

    .links-container.template-circle .link-title {
        font-size: 0.65rem !important;
        max-width: 75px !important;
        letter-spacing: 0.3px !important;
    }
}

@media (max-width: 480px) {
    .links-container.template-circle {
        max-width: 300px !important;
        height: 360px !important;
        min-height: 360px !important;
        margin: 20px auto !important;
        padding: 0 !important;
    }

    .links-container.template-circle .link-item {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
        aspect-ratio: 1 !important;
        padding: 0 !important;
        gap: 0.25rem !important;
    }

    .links-container.template-circle .link-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        aspect-ratio: 1 !important;
        font-size: 1rem !important;
        border-width: 2px !important;
    }

    .links-container.template-circle .link-icon img,
    .links-container.template-circle .link-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Custom icons - stretch mode small mobile */
    .links-container.template-circle .link-icon img.custom-icon-stretch {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }

    /* Custom icons - centered mode small mobile */
    .links-container.template-circle .link-icon img.custom-icon-centered {
        width: 18px !important;
        height: 18px !important;
    }

    .links-container.template-circle .link-title {
        font-size: 0.55rem !important;
        max-width: 60px !important;
        letter-spacing: 0.2px !important;
    }
}

/* ====================================
   ANIMATIONS & EFFECTS
   ==================================== */

/* Dezenter Glanz-Effekt */
.links-container.template-circle .link-item::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(255,255,255,0.1) 100%) !important;
    pointer-events: none !important;
}

/* Stagger Animation für mehrere Links */
.links-container.template-circle .link-item:nth-child(1) { animation-delay: 0.1s !important; }
.links-container.template-circle .link-item:nth-child(2) { animation-delay: 0.2s !important; }
.links-container.template-circle .link-item:nth-child(3) { animation-delay: 0.3s !important; }
.links-container.template-circle .link-item:nth-child(4) { animation-delay: 0.4s !important; }
.links-container.template-circle .link-item:nth-child(5) { animation-delay: 0.5s !important; }
.links-container.template-circle .link-item:nth-child(6) { animation-delay: 0.6s !important; }
.links-container.template-circle .link-item:nth-child(7) { animation-delay: 0.7s !important; }
.links-container.template-circle .link-item:nth-child(8) { animation-delay: 0.8s !important; }

/* Accessibility - Focus States */
.links-container.template-circle .link-item:focus {
    outline: 3px solid rgba(255, 255, 255, 0.8) !important;
    outline-offset: 4px !important;
}

/* Smooth Transitions für alle Kinder */
.links-container.template-circle * {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}