/* Base Variables & Scoping */
.poc-container {
    --poc-transition-speed: 0.3s;
    --poc-zindex: 99999;
    --poc-width: 320px;
    --poc-bg: #fff;
    --poc-color: #333;
    --poc-icon: #000;
}

/* Backdrop */
.poc-backdrop {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: var(--poc-zindex); opacity: 0; visibility: hidden;
    transition: opacity var(--poc-transition-speed) ease, visibility var(--poc-transition-speed);
}
.poc-backdrop.is-active { opacity: 1; visibility: visible; }
.poc-backdrop--dark { background: rgba(0,0,0,0.6); }
.poc-backdrop--blur { background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); }

/* Panel */
.poc-panel {
    position: fixed; background: var(--poc-bg); color: var(--poc-color);
    z-index: calc(var(--poc-zindex) + 1); display: flex; flex-direction: column; 
    transition: transform var(--poc-transition-speed) ease-in-out;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.poc-panel--left { top: 0; left: 0; height: 100vh; width: var(--poc-width); transform: translate3d(-100%, 0, 0); overflow-x: visible; }
.poc-panel--right { top: 0; right: 0; height: 100vh; width: var(--poc-width); transform: translate3d(100%, 0, 0); overflow-x: visible; }
.poc-panel--top { top: 0; left: 0; width: 100vw; height: 100vh; transform: translate3d(0, -100%, 0); }

.poc-container.is-open .poc-panel { transform: translate3d(0, 0, 0); }

/* Panel Header */
.poc-panel-header {
    position: relative;
    padding: 15px;
    display: flex;
    align-items: center;
}
.poc-dir--left .poc-panel-header { justify-content: flex-end; }
.poc-dir--right .poc-panel-header { justify-content: flex-start; }
.poc-dir--top .poc-panel-header { justify-content: flex-end; }

/* Hamburger Button Styling & Docking */
.poc-hamburger {
    background: var(--poc-bg);
    border: 0;
    cursor: pointer;
    padding: 12px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--poc-zindex) + 2);
    transition: background var(--poc-transition-speed);
}

/* Linkes Menü: Button klebt außen an der rechten Kante */
.poc-dir--left .poc-hamburger {
    position: absolute;
    right: -52px;
    top: 15px;
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 2px 10px rgba(0,0,0,0.15);
}

/* Rechtes Menü: Button klebt außen an der linken Kante */
.poc-dir--right .poc-hamburger {
    position: absolute;
    left: -52px;
    top: 15px;
    border-radius: 8px 0 0 8px;
    box-shadow: -4px 2px 10px rgba(0,0,0,0.15);
}

/* Top Menü */
.poc-dir--top .poc-hamburger {
    position: relative;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Hamburger Icon Design */
.poc-hamburger-box { width: 24px; height: 20px; display: inline-block; position: relative; }
.poc-hamburger-inner, .poc-hamburger-inner::before, .poc-hamburger-inner::after {
    width: 24px; height: 3px; background-color: var(--poc-icon);
    position: absolute; border-radius: 2px; 
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}
.poc-hamburger-inner { top: 50%; transform: translateY(-50%); }
.poc-hamburger-inner::before { content: ""; top: -8px; left: 0; }
.poc-hamburger-inner::after { content: ""; bottom: -8px; left: 0; }

/* Spin Animation to 'X' */
.poc-hamburger.hamburger--spin[aria-expanded="true"] .poc-hamburger-inner { 
    transform: rotate(225deg); 
}
.poc-hamburger.hamburger--spin[aria-expanded="true"] .poc-hamburger-inner::before { 
    top: 0; 
    opacity: 0; 
}
.poc-hamburger.hamburger--spin[aria-expanded="true"] .poc-hamburger-inner::after { 
    bottom: 0; 
    transform: rotate(-90deg); 
}

/* Menu & Accordion */
.poc-panel-body { 
    padding: 0; 
    overflow-y: auto; 
    flex-grow: 1; 
}
.poc-menu { list-style: none; padding: 0; margin: 0; }
.poc-item { border-bottom: 1px solid rgba(128,128,128,0.2); }
.poc-link { display: block; padding: 1rem 1.5rem; color: var(--poc-color); text-decoration: none; }
.poc-link:hover, .poc-link:focus { background: rgba(128,128,128,0.1); }
.poc-link.active { font-weight: bold; border-left: 4px solid var(--poc-color); padding-left: calc(1.5rem - 4px); }

.poc-submenu-wrapper { display: flex; justify-content: space-between; align-items: center; }
.poc-submenu-wrapper .poc-link { flex-grow: 1; }
.poc-submenu-toggle { background: none; border: none; padding: 1rem; cursor: pointer; color: var(--poc-color); transition: transform 0.3s ease; }
.poc-submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.poc-submenu-content { padding-left: 1.5rem; background: rgba(0,0,0,0.03); }