/* =============================
   360° RADIAL CONSULTING SECTION
============================= */

/* --- Variables & Base --- */
:root {
    /* Using colors from global.css where possible, defining specifics here */
    --rc-primary-blue: #05164d; /* Keep original blue for now */
    --rc-light-gray-bg: #f8f9fa;
    --rc-white: #ffffff;
    --rc-text-dark: #333;
    --rc-text-light: #555;
    --rc-accent-color: #007bff; /* Example accent, adjust as needed */
    --rc-border-radius: 8px;
    --rc-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    --rc-shadow-hover: 0 8px 25px rgba(5, 22, 77, 0.15);
    --rc-menu-size: 560px; /* Slightly larger */
    --rc-center-size: 160px;
    --rc-item-size: 100px;
    --rc-transition-speed: 0.35s;
}

.radial-consulting {
    padding: 65px 20px 50px 20px;
    /* Subtle background image */

    text-align: center;
    opacity: 0; /* Start hidden for fade-in animation */
    transform: translateY(20px); /* Start slightly lower for slide-in */
    animation: sectionFadeIn 0.8s ease-out forwards;
    animation-delay: 0.2s; /* Delay the section appearance slightly */
}

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


/* --- Intro Text --- */
.intro-text {
    max-width: 1200px;
    margin: 0 auto 60px auto;


}
.intro-text h2 {
    font-size: 2.6em;
    margin-bottom: 15px;
    color: var(--primary-blue);
    line-height: normal;
    margin-bottom: 20px;
}
.intro-text p {
    font-size: 1.2em;
    color: #05164d !important;
    line-height: 1.7;
    max-width: 1200px;
}

/* --- Radial Menu Wrapper (for centering details) --- */
.radial-menu-wrapper {
    display: flex;
    flex-direction: column; /* Stack menu and details vertically by default */
    align-items: center;
    gap: 40px; /* Space between menu and details */
    margin-bottom: 40px; /* Reduced space before CTA */
}

/* --- Radial Menu --- */
.radial-menu-container {
    position: relative;
    width: var(--rc-menu-size);
    height: var(--rc-menu-size);
    margin: 0 auto; /* Centered within its wrapper part */
    padding: 0;
    list-style: none;
    /* Add a subtle outer glow/border to contain the orbit */
}

.radial-menu-container_2 {
    position: absolute;
    top: 37px;
    left: 37px;
    width: 486px;
    height: 486px;
    /* Add a subtle outer glow/border to contain the orbit */
    border: 22px solid #05164d;
    border-radius: 50%;
}


.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--rc-center-size);
    height: var(--rc-center-size);
    background-color: var(--rc-primary-blue);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--rc-white);
    text-align: center;

    z-index: 10;
    border: 4px solid #05164d;

    /* animation: pulse 3s infinite ease-in-out; */ /* Pulse animation removed */
    transition: transform var(--rc-transition-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bounce effect */
}

/* @keyframes pulse { ... } */ /* Pulse animation removed */

.center-circle img {
    width: 40%;
    height: auto;
    margin-bottom: 8px;
    filter: brightness(0) invert(1);
    width: 90%; /* Make image slightly larger now text is gone */
    margin-bottom: 0; /* No margin needed below image */
}
/* Removed .center-circle span rule as span is removed */

/* Center circle reacts to item hover */
.radial-menu-container:has(.menu-item:hover) .center-circle {
    transform: translate(-50%, -50%) scale(1.08);
}

.menu-items {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 50%;
}

.menu-item {
    position: absolute; /* Base style for Desktop */
    top: 50%;
    left: 50%;
    width: var(--rc-item-size); /* Base style for Desktop */
    height: var(--rc-item-size); /* Base style for Desktop */
    margin: calc(-0.5 * var(--rc-item-size)); /* Base style for Desktop */
    transition: transform var(--rc-transition-speed) ease, opacity 0.5s ease; /* Combined transitions */
    opacity: 0;
    transform-origin: center center;
    z-index: 5;
    /* display: flex; /* Removed flex here, let children manage themselves */
    /* justify-content: center; */
    /* align-items: center; */
}



/* REMOVED connecting lines (.menu-item::before) */


/* Add 'visible' class via JS for entry animation */
.menu-item.visible {
    opacity: 1;
    /* Final transform set inline by JS for positioning */
    /* Transition for entry effect (opacity, scale) */
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Item itself does not need animation property here */
}

/* Apply orbit animation to the container */
.menu-items {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 50%;
    /* Orbit animation removed for stability */
}

/* Orbit Animation REMOVED */
/* @keyframes orbitAnimation { ... } */

/* Animation to keep content upright REMOVED */
/* @keyframes keepUprightAnimation { ... } */


/* Remove individual animation variations */


.item-icon {
    width: 100%;
    height: 100%;
    background-color: #F6F9FC;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--rc-shadow);
    cursor: pointer;
    transition: transform var(--rc-transition-speed) ease, box-shadow var(--rc-transition-speed) ease, background-color var(--rc-transition-speed) ease;
    border: 3px solid transparent;
    position: relative; /* Needed for hover text */
}
.item-icon img {
    max-width: 55%;
    max-height: 55%;
    transition: transform var(--rc-transition-speed) ease;
}
.menu-item:hover .item-icon {
    transform: scale(1.15); /* Slightly larger hover scale */
    box-shadow: var(--rc-shadow-hover);
    background-color: #fff; /* Subtle background on hover */
    border-radius: 50%;
    border: solid 2px #05164d;
}
.menu-item:hover {
    /* Ensure hovered item is visually on top */
    z-index: 6;
}
.menu-item:hover .item-icon img {
    transform: scale(0.95);
}

/* Style for selected item */
.menu-item.selected .item-icon {
    border-color: #05164d;
    background-color: #fff; /* Light blue background */
    transform: scale(1.1); /* Make selected item slightly larger */
    box-shadow: 0 6px 20px rgba(5, 22, 77, 0.2); /* Stronger shadow for selected */
    transform: scale(1.25);
}

.menu-item.selected {
    z-index: 7; /* Ensure selected is on top */
}



/* --- Positioning (Calculated by JS now for animation) --- */
/* .item-1 { transform: rotate(0deg) translateY(calc(-0.5 * var(--rc-menu-size) + 0.5 * var(--rc-item-size))) rotate(0deg); } ... etc */


/* --- Detail Display Area --- */
.radial-details-container {
    background-color: #F6F9FC;
    padding: 30px;
    border-radius: var(--rc-border-radius);
    box-shadow: var(--rc-shadow);
    width: 100%;
    max-width: 600px; /* Limit width */
    text-align: left;
    min-height: 150px; /* Ensure it has some height even when empty */
    position: relative;
    overflow: hidden; /* Clip content during transitions */
}

.detail-content {
    position: absolute; /* Position all details on top of each other */
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px; /* Match container padding */
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px) scale(0.98); /* Start slightly lower and smaller */
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother cubic-bezier */
    pointer-events: none; /* Prevent interaction when hidden */
}

.detail-content.active {
    opacity: 1;
    transform: translateY(0) scale(1); /* Animate to normal position and size */
    position: relative; /* Take up space when active */
    pointer-events: auto; /* Allow interaction when active */
}

/* Animation for detail content elements */
@keyframes detailFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-content.active h3,
.detail-content.active p,
.detail-content.active .detail-link {
    opacity: 0; /* Start hidden */
    animation: detailFadeSlideIn 0.5s ease-out forwards;
}

/* Stagger the animation */
.detail-content.active p {
    animation-delay: 0.1s;
}
.detail-content.active .detail-link {
    animation-delay: 0.2s;
}


.detail-content h3 {
    color: var(--rc-primary-blue);
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 15px;
}

.detail-content p {
    color: var(--rc-text-light);
    line-height: 1.6;
    margin-bottom: 20px;
}

.detail-link {
    display: inline-block;
    color: var(--rc-accent-color);
    text-decoration: none;
    font-weight: bold;
    transition: color var(--rc-transition-speed) ease;
}
.detail-link:hover {
    color: var(--rc-primary-blue);
    text-decoration: underline;
}


/* --- CTA Button --- */
.cta-button-container {
    text-align: center;
    margin-top: 0; /* Adjusted margin due to wrapper */
    width: 100%; /* Ensure it takes full width for alignment */
}
.cta-button {
    display: inline-block;
    padding: 16px 45px;
    background-color: var(--rc-primary-blue);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: var(--rc-border-radius);
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 0.5px; /* Add letter spacing */
    transition: background-color var(--rc-transition-speed) ease, transform var(--rc-transition-speed) ease, box-shadow var(--rc-transition-speed) ease;
    box-shadow: 0 4px 10px rgba(5, 22, 77, 0.2);
}
.cta-button:hover {
    background-color: #03113a;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(5, 22, 77, 0.3);
}



/* --- Styling for the text inside the icon on hover --- */
.item-icon .icon-hover-text {
    display: none; /* Hide text by default */
    font-size: 0.65em; /* Adjust size as needed */
    font-weight: 600;
    color: var(--rc-primary-blue); /* Or another color */
    text-align: center;
    padding: 0 5px; /* Add some padding if needed */
    line-height: 1.2;
    /* Ensure it stays centered */
    position: absolute; /* Position relative to item-icon */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* Prevent text overflow */
}

/* --- Hover effects --- */
.menu-item:hover .item-icon img {
    display: none; /* Hide icon image on hover */
}

.menu-item:hover .item-icon .icon-hover-text {
    display: block; /* Show text on hover */
}


/* Adjust existing item-icon styles if needed to ensure centering works for text */
.item-icon {
    /* ... existing styles ... */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Needed for absolute positioning of text */
    /* ... existing styles ... */
}

@media (min-width: 592px) {
     .accordion-label {
  display: none;
}

}


/* --- Responsive Anpassungen --- */
@media (min-width: 1100px) {
    /* Side-by-side layout on larger screens */
    .radial-menu-wrapper {
        flex-direction: row; /* Menu and details side-by-side */
        align-items: flex-start; /* Align top */
        justify-content: center;
        gap: 120px;
    }
    .radial-menu-container {
        margin: 0; /* No auto margin needed */
    }
    .radial-details-container {
        margin-top: calc( (var(--rc-menu-size) - var(--rc-center-size)) / 2 - 124px); /* Align vertically better */
        max-width: 681px; /* Adjust width */
        border-top: 3px solid var(--rc-primary-blue); /* Add separator line on desktop */
        padding-top: 40px; /* Add padding above content */
    }
     .detail-content {
         padding: 0 30px 30px 30px; /* Adjust padding */
     }
     .cta-button-container {
        /* Align CTA container roughly under details on desktop */
        max-width: calc(var(--rc-menu-size) + 60px + 450px); /* Approx total width */
        margin-left: auto;
        margin-right: auto;
        padding-left: calc(var(--rc-menu-size) + 60px); /* Offset by menu width + gap */
        box-sizing: border-box;
        text-align: left; /* Align button left within its space */
     }
     .accordion-label {
  display: none;
}

.menu-item.visible {
    opacity: 1;
    /* Final transform set inline by JS for positioning */
    /* Transition for entry effect (opacity, scale) */
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Item itself does not need animation property here */
    border-radius: 50%;
    border: solid 3px #05164d;
}

}


@media (max-width: 768px) {
    :root {
        --rc-menu-size: 380px;
        --rc-center-size: 130px;
        --rc-item-size: 70px;
    }
    .intro-text h2 { font-size: 2em; }
    .intro-text p { font-size: 1em; }
    .radial-menu-wrapper { gap: 30px; }
    .radial-details-container { max-width: 500px; padding: 25px; }
    .detail-content { padding: 25px; }
    .detail-content h3 { font-size: 1.4em; }

    .item-label {
        width: 140px;
        bottom: -40px;
    }
     .menu-item:hover .item-label {
        bottom: -65px;
     }


}

/* ... existing styles ... */

@media (max-width: 576px) {
    /* --- Accordion Styles for Mobile --- */


    /* Remove grid layout from the items container */
    .menu-items {
        display: block; /* Change from grid */
        width: 100%;
        max-width: none; /* Allow full width */
        gap: 0; /* Remove gap */
        animation: none; /* Ensure no animation */
    }

    .menu-item {
        position: static; /* Ensure static positioning */
        transform: none !important; /* Override any transforms */
        width: 100%;
        height: auto;
        margin: 0 0 10px 0; /* Add margin between items */
        display: block; /* Change from flex */
        background: var(--rc-white);
        padding: 0; /* Remove padding, handle in header */
        border-radius: var(--rc-border-radius);
        box-shadow: var(--rc-shadow);
        transition: background-color 0.2s ease, margin 0.35s ease-out; /* Added margin transition */
        opacity: 1;
        cursor: pointer;
        border-left: none; /* Remove selected border */
        overflow: hidden; /* Needed for max-height transition */
    }

    /* Remove hover effects specific to the old list view */
    .menu-item:hover {
        background-color: var(--rc-white); /* Keep background standard */
        transform: none;
    }
    .menu-item.selected {
         background-color: var(--rc-white); /* Keep background standard */
         border-left: none;
    }

    /* Style the clickable header area */
    .menu-item .accordion-header { /* Add this div in HTML or style item-icon container */
        display: flex;
        align-items: center;
        padding: 12px 15px;
        position: relative; /* For the indicator */
    }

    /* Keep icon styles */
    .menu-item .item-icon {
        position: static;
        width: 40px; /* Slightly smaller */
        height: 40px;
        margin-right: 15px;
        flex-shrink: 0;
        box-shadow: none;
        border: none;
        background-color: transparent;
        /* Ensure hover text is hidden */
        display: flex; /* Keep flex for centering image */
        justify-content: center;
        align-items: center;
    }
    .menu-item .item-icon img {
        max-width: 100%;
        max-height: 100%;
        display: block !important; /* Ensure image is always visible */
    }
    .menu-item .item-icon .icon-hover-text {
        display: none !important; /* Hide hover text */
    }

    /* Remove hover effects on icon */
     .menu-item:hover .item-icon { transform: none; box-shadow: none; }
     .menu-item:hover .item-icon img { transform: none; }
     .menu-item.selected .item-icon { background-color: transparent; }

    /* Style the label text */
    .menu-item .accordion-label { /* Add this span in HTML */
        font-weight: 600;
        color: var(--rc-text-dark);
    }

    /* Remove the old ::after pseudo-element label */
    .menu-item::after {
        content: none;
    }

    /* Add expand/collapse indicator */
    .menu-item .accordion-header::after {
        content: '+';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.8em;
        font-weight: 300;
        color: var(--rc-primary-blue);
        transition: transform 0.3s ease;
    }

    .menu-item.active .accordion-header::after {
        /* content: '-'; */ /* Use transform for smoother animation */
        transform: translateY(-50%) rotate(45deg);
    }

    /* Style the detail content for accordion */
    .detail-content {
        /* Keep original position: absolute, opacity: 0 etc. for desktop */
        /* Mobile overrides: */
        position: relative; /* Change from absolute */
        opacity: 1; /* Make visible */
        transform: none; /* Reset transform */
        max-height: 0; /* Start collapsed */
        overflow: hidden;
        padding: 0 15px; /* Remove padding when collapsed */
        margin: 0;
        transition: max-height 0.35s ease-out, padding 0.35s ease-out, margin 0.35s ease-out;
        pointer-events: auto; /* Allow interaction */
        background-color: #f8f9fa; /* Slight background tint */
        border-top: 1px solid #eee; /* Separator line */
    }

    .detail-content.active {
        /* Keep original active styles for desktop */
        /* Mobile overrides: */
        max-height: 500px; /* Set a max-height sufficient for content */
        padding: 20px 15px; /* Restore padding */
        margin-bottom: 10px; /* Add margin when open */
        position: relative; /* Ensure it stays relative */
        opacity: 1;
        transform: none;
    }

    /* Reset animation styles within details for mobile */
    .detail-content.active h3,
    .detail-content.active p,
    .detail-content.active .detail-link {
        opacity: 1;
        animation: none;
    }

    /* Adjust detail content text sizes for mobile */
    .detail-content h3 { font-size: 1.2em; }
    .detail-content p { font-size: 0.9em; line-height: 1.5; }

    /* Adjust CTA button container margin */
    .cta-button-container { margin-top: 30px; }
    .cta-button { padding: 12px 30px; font-size: 1em; }

    /* Hide elements not needed in mobile accordion */
    .center-circle,
    .radial-menu-container_2 {
        display: none;
    }

    .radial-menu-container {
        margin-bottom: 150px;
    }
}

@media (min-width: 577px) { /* Or your desktop breakpoint */
    .menu-item > .accordion-header {
        display: contents;
    }
    .menu-item > .accordion-label {
        display: none;
    }
    .menu-item > .detail-content {
        display: none;
    }
     /* Ensure mobile overrides for item-icon are NOT active */
     .menu-item .item-icon {
        /* Reset any mobile overrides if necessary, e.g., size */
        width: 100%;
        height: 100%;
        box-shadow: var(--rc-shadow); /* Restore shadow if overridden */
        /* ... other desktop styles ... */
     }
}

/* Ensure mobile styles are correctly scoped */
@media (max-width: 576px) {
    /* ... existing mobile styles ... */

    .menu-item .item-icon {
        /* Mobile specific overrides */
        width: 40px !important;
        height: 40px !important;
        box-shadow: none !important;
        /* ... */
    }
.menu-item:hover .item-icon {
    border: solid 0px #05164d;
}
}

    /* Style the detail content for accordion */
    .menu-item .detail-content { /* Target detail-content inside menu-item */
        /* Mobile overrides: */
        position: relative; /* Change from absolute */
        opacity: 1; /* Make visible */
        transform: none; /* Reset transform */
        max-height: 0; /* Start collapsed */
        overflow: hidden;
        padding: 0 15px; /* Remove padding when collapsed */
        margin: 0;
        transition: max-height 0.35s ease-out, padding 0.35s ease-out, margin 0.35s ease-out;
        pointer-events: auto; /* Allow interaction */
        background-color: #f8f9fa; /* Slight background tint */
        border-top: 1px solid #eee; /* Separator line */
    }

    .menu-item.active .detail-content { /* Target active detail-content inside active menu-item */
        /* Mobile overrides: */
        max-height: 500px; /* Set a max-height sufficient for content */
        padding: 20px 15px; /* Restore padding */
        /* margin-bottom: 10px; */ /* Add margin when open - maybe not needed if item margin exists */
        position: relative; /* Ensure it stays relative */
        opacity: 1;
        transform: none;
    }

/* --- End Accordion Styles --- */