/**
 * Healthcare Wheel – Frontend CSS
 */


/* =============================================================================
   CUSTOM PROPERTIES
   ============================================================================= */

:root {
    --hcw-red:   #e30613;
    --hcw-dark:  #474b4c;
    --hcw-white: #ffffff;
    --hcw-z:     999990;
}


/* =============================================================================
   FAB (FLOATING ACTION BUTTON)
   ============================================================================= */

.hcw-fab {
    position: fixed;
    bottom: 100px;
    right: 15px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #eeeeee;
    border: none;
    cursor: pointer;
    z-index: var(--hcw-z);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
    padding: 0;
    outline: none;
    user-select: none;
    overflow: hidden;
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1),
                box-shadow 220ms ease;
}

.hcw-fab--left {
    right: auto;
    left: 28px;
}

.hcw-fab:hover         { transform: scale(1.07); box-shadow: 0 6px 24px rgba(227, 6, 19, .28); }
.hcw-fab:focus-visible { outline: 3px solid var(--hcw-red); outline-offset: 4px; }

.hcw-fab__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

.hcw-fab__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    pointer-events: none;
}

.hcw-fab__text-top {
    font-size: 12px;
    font-weight: 800;
    color: var(--hcw-red);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hcw-fab__text-bot {
    font-size: 9px;
    font-weight: 600;
    color: var(--hcw-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
}


/* =============================================================================
   OVERLAY
   ============================================================================= */

.hcw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .97);
    z-index: calc(var(--hcw-z) + 5);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: circle(0% at calc(100% - 67px) calc(100% - 67px));
    transition: clip-path 480ms cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    visibility: hidden;
}

.hcw-overlay[hidden] { display: flex; }

.hcw-overlay.is-open {
    clip-path: circle(150% at calc(100% - 67px) calc(100% - 67px));
    pointer-events: all;
    visibility: visible;
}

.hcw-overlay--left         { clip-path: circle(0%   at 67px calc(100% - 67px)); }
.hcw-overlay--left.is-open { clip-path: circle(150% at 67px calc(100% - 67px)); }

.hcw-overlay__close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    font-size: 34px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 10;
    transition: color 160ms, background 160ms;
}

.hcw-overlay__close:hover        { color: #333; background: #f0f0f0; }
.hcw-overlay__close:focus-visible { outline: 2px solid var(--hcw-red); }


/* =============================================================================
   STAGE & CANVAS
   ============================================================================= */

.hcw-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
}

.hcw-canvas {
    position: relative;
    flex-shrink: 0;
    transform-origin: center;
}


/* =============================================================================
   HUB
   ============================================================================= */

.hcw-hub {
    position: absolute;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-sizing: border-box;
    background: transparent !important;
    overflow: visible;
}

.hcw-hub__inner {
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hcw-hub__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

.hcw-hub__text-top {
    font-size: 1em;
    font-weight: 800;
    color: var(--hcw-red);
    line-height: 1.1;
}

.hcw-hub__text-bot {
    font-size: .7em;
    font-weight: 600;
    color: #444;
    line-height: 1.2;
}


/* =============================================================================
   ICON CIRCLES
   ============================================================================= */

.hcw-icon {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #8a8889;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    outline: none;
    overflow: visible;
    opacity: 0;
    transform: scale(0.3);
    transition: border-color 220ms ease,
                background   220ms ease,
                transform    220ms cubic-bezier(.34, 1.56, .64, 1);
}

.hcw-icon:hover         { border-color: var(--hcw-red) !important; transform: scale(1.12) !important; z-index: 12; }
.hcw-icon:focus-visible { outline: 2px solid var(--hcw-red); outline-offset: 3px; }
.hcw-icon.is-active     { border-color: var(--hcw-red); }

.hcw-overlay.icons-in .hcw-icon {
    animation: hcwIconPop 350ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@keyframes hcwIconPop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1);   }
}


/* =============================================================================
   ICON IMAGE
   ============================================================================= */

.hcw-icon__img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hcw-icon__img-wrap svg { width: 100%; height: 100%; fill: #aaa; transition: fill 200ms; }
.hcw-icon__img-wrap img { width: 100%; height: 100%; object-fit: contain; transition: filter 200ms ease; }

.hcw-icon:hover .hcw-icon__img-wrap svg,
.hcw-icon.is-active .hcw-icon__img-wrap svg { fill: var(--hcw-red); }


/* =============================================================================
   ICON ARROWS

   Jeder Icon-Kreis hat ein ::before-Dreieck, das zur Hub-Mitte zeigt.
   --hcw-angle kommt per Inline-Style aus PHP und bestimmt die Grundrichtung.

   Für individuelle Feinjustierung pro Icon stehen drei CSS-Variablen bereit,
   die per [data-idx="N"] im Abschnitt unten überschrieben werden können:

     --hcw-arrow-rotate-extra   Zusätzliche Rotation in Grad (Standard: 0deg)
     --hcw-arrow-offset-x       Horizontale Verschiebung (Standard: 0px)
     --hcw-arrow-offset-y       Vertikale Verschiebung   (Standard: 0px)
   ============================================================================= */

.hcw-icon::before {
    content: '';
    position: absolute;

    /* CSS-Dreieck, Spitze zeigt nach unten */
    width: 0;
    height: 0;
    border-left:  7px solid transparent;
    border-right: 7px solid transparent;
    border-top:   10px solid #8a8889;

    /*
      Ausgangslage: zentriert am unteren Kreisrand.
      bottom = Pfeilhöhe (10px) + optionaler vertikaler Offset.
      left   = 50% minus halbe Pfeilbreite (7px) + optionaler horizontaler Offset.
    */
    bottom: calc(12px * -1 - var(--hcw-arrow-offset-y, 0px));
    left:   calc(50% - 7px + var(--hcw-arrow-offset-x, 0px));

    /*
      Rotationspunkt = Icon-Kreismittelpunkt.
        X: 7px  = halbe Pfeilbreite
        Y: -42px = Icon-Radius (42px) nach oben vom unteren Kreisrand
    */
    transform-origin: 7px -42px;

    /*
      Grundrotation aus PHP-Winkel + 90deg Dreieck-Korrektur
      + optionale Feinjustierung per --hcw-arrow-rotate-extra.
    */
    transform: rotate(calc(
        var(--hcw-angle, -90deg)
        + 90deg
        + var(--hcw-arrow-rotate-extra, 0deg)
    ));

    transition: border-top-color 220ms ease;
    z-index: 1;
    pointer-events: none;
}

.hcw-icon:hover::before,
.hcw-icon.is-active::before {
    border-top-color: var(--hcw-red);
}


/* -----------------------------------------------------------------------------
   PFEIL-FEINJUSTIERUNG PRO ICON
   Überschreibe hier bei Bedarf einzelne Pfeile:

     .hcw-icon[data-idx="N"] {
         --hcw-arrow-rotate-extra: 5deg;
         --hcw-arrow-offset-x:     2px;
         --hcw-arrow-offset-y:     0px;
     }

   data-idx entspricht der Reihenfolge der Icons im Admin (0 = erstes Icon).
   ----------------------------------------------------------------------------- */

.hcw-icon[data-idx="0"] { /* Projektmanagement              -- ~11 Uhr  */
    --hcw-arrow-rotate-extra: -5deg;
    --hcw-arrow-offset-x:      1px;
    --hcw-arrow-offset-y:      1px;
}
.hcw-icon[data-idx="1"] { /* Kontraktlogistik               -- ~1 Uhr   */
    --hcw-arrow-rotate-extra: 0deg;
    --hcw-arrow-offset-x:     2px;
    --hcw-arrow-offset-y:     2px;
}
.hcw-icon[data-idx="2"] { /* Verpackungslogistik            -- ~2 Uhr   */
    --hcw-arrow-rotate-extra: 0deg;
    --hcw-arrow-offset-x:     0px;
    --hcw-arrow-offset-y:     1px;
}
.hcw-icon[data-idx="3"] { /* Transport & Einbringung        -- ~3 Uhr   */
    --hcw-arrow-rotate-extra: 0deg;
    --hcw-arrow-offset-x:     1px;
    --hcw-arrow-offset-y:     3px;
}
.hcw-icon[data-idx="4"] { /* Montage & Installation         -- ~5 Uhr   */
    --hcw-arrow-rotate-extra: -4deg;
    --hcw-arrow-offset-x:     1px;
    --hcw-arrow-offset-y:     2px;
}
.hcw-icon[data-idx="5"] { /* Inbetriebnahme & Applikation   -- 6 Uhr    */
    --hcw-arrow-rotate-extra: 0deg;
    --hcw-arrow-offset-x:     0px;
    --hcw-arrow-offset-y:     2px;
}
.hcw-icon[data-idx="6"] { /* Wartung & Service              -- ~7 Uhr   */
    --hcw-arrow-rotate-extra: 0deg;
    --hcw-arrow-offset-x:     0px;
    --hcw-arrow-offset-y:     3px;
}
.hcw-icon[data-idx="7"] { /* Demontage, Aufbereitung & Recycling -- ~9 Uhr */
    --hcw-arrow-rotate-extra: -4deg;
    --hcw-arrow-offset-x:     -2px;
    --hcw-arrow-offset-y:     -2px;
}
/* Label für Icon 7: Zeilenumbruch erlauben, Breite begrenzen */
.hcw-icon[data-idx="7"] .hcw-icon__label {
    white-space: normal;
    max-width: 295px;  /* groß genug für "DEMONTAGE, AUFBEREITUNG &" in Zeile 1 */
    text-align: right;
    line-height: 1.3;
}
.hcw-icon[data-idx="8"] { /* Konstruktion & Fertigung       -- ~10 Uhr  */
    --hcw-arrow-rotate-extra: 0deg;
    --hcw-arrow-offset-x:     0px;
    --hcw-arrow-offset-y:     0px;
}


/* =============================================================================
   ICON LABELS
   ============================================================================= */

.hcw-icon__label {
    position: absolute;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 400;
    color: var(--hcw-dark);
    pointer-events: none;
    background: none;
    letter-spacing: .02em;
    text-transform: uppercase;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.hcw-icon__label--below { top: calc(100% + 18px);  bottom: auto; }
.hcw-icon__label--above { bottom: calc(100% + 18px); top: auto;  }

.hcw-icon__label--center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
}

.hcw-icon__label--left {
    left: 0;
    right: auto;
    transform: none;
    text-align: left;
}

.hcw-icon__label--right {
    right: 0;
    left: auto;
    transform: none;
    text-align: right;
}

.hcw-icon__label--beside-right {
    left: calc(100% + 18px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    text-align: left;
}

.hcw-icon__label--beside-left {
    right: calc(100% + 18px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    text-align: right;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 700px) {
    .hcw-stage     { padding: 16px; }
    .hcw-fab       { bottom: 16px; right: 16px; width: 62px; height: 62px; }
    .hcw-fab--left { right: auto; left: 16px; }
    .hcw-overlay        { clip-path: circle(0% at calc(100% - 47px) calc(100% - 47px)); }
    .hcw-overlay--left  { clip-path: circle(0% at 47px calc(100% - 47px)); }
}


/* =============================================================================
   SHORTCODE [healthcare_wheel]
   ============================================================================= */

.hcw-sc-wrap {
    display: block;
    position: relative;
    text-align: center;
}

.hcw-sc-wrap[style*="text-align:left"]   .hcw-sc-btn { margin-left: 0;    margin-right: auto; }
.hcw-sc-wrap[style*="text-align:center"] .hcw-sc-btn { margin-left: auto; margin-right: auto; }
.hcw-sc-wrap[style*="text-align:right"]  .hcw-sc-btn { margin-left: auto; margin-right: 0; }

.hcw-sc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #eeeeee;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    user-select: none;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
    position: relative;
    z-index: 1;
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1),
                box-shadow 220ms ease;
}

.hcw-sc-btn:hover        { transform: scale(1.07); box-shadow: 0 6px 24px rgba(227, 6, 19, .28); }
.hcw-sc-btn:focus-visible { outline: 3px solid var(--hcw-red); outline-offset: 4px; }

.hcw-sc-btn__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

.hcw-sc-btn__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    pointer-events: none;
}

.hcw-sc-btn__text-top {
    font-size: 12px;
    font-weight: 800;
    color: var(--hcw-red);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hcw-sc-btn__text-bot {
    font-size: 9px;
    font-weight: 600;
    color: var(--hcw-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Overlay-Ursprung wird per JS auf den Button-Mittelpunkt gesetzt */
.hcw-overlay--sc {
    clip-path: circle(0% at 50% 50%);
}


/* =============================================================================
   STATISCHER SHORTCODE [healthcare_wheel_static]
   ============================================================================= */

.hcw-static-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: visible;
}

.hcw-static-stage {
    display: inline-block;
    /* oben etwas mehr Padding wegen leichter Y-Asymmetrie der 9 Icons */
    padding: 55px 80px 45px;
    box-sizing: border-box;
    transform-origin: top center;
    transition: transform 200ms ease;
}

/* Ab 1290px: Grafik schrumpft proportional mit */
@media (max-width: 1290px) {
    .hcw-static-stage { transform: scale(0.95); }
}
@media (max-width: 1200px) {
    .hcw-static-stage { transform: scale(0.88); }
}
@media (max-width: 1100px) {
    .hcw-static-stage { transform: scale(0.82); }
}
@media (max-width: 1024px) {
    .hcw-static-stage { transform: scale(0.78); }
}

/* Ab 1000px: Labels ausblenden – nativer title-Tooltip übernimmt */
@media (max-width: 1000px) {
    .hcw-static-stage { transform: scale(0.75); }

    .hcw-static-canvas .hcw-icon__label {
        display: none;
    }
}

.hcw-static-canvas {
    position: relative !important;
}

.hcw-icon--static {
    opacity: 0;
    transform: scale(0.3);
    transition: opacity   350ms ease,
                transform 400ms cubic-bezier(.34, 1.56, .64, 1);
}

.hcw-icon--static.is-visible {
    opacity: 1;
    transform: scale(1);
    transition-delay: var(--hcw-scroll-delay, 0s);
}

.hcw-icon--static:hover {
    border-color: var(--hcw-red) !important;
    transform: scale(1.12) !important;
    z-index: 12;
}

.hcw-static-canvas .hcw-hub {
    opacity: 1 !important;
}