/*
 * GermanFur Cyberpunk — Menu render styles.
 * Registered via theme.json `render_styles[menu]`. Scoped to their root
 * class so they don't bleed into other slots. Designs lean on the theme's
 * neon variables (--color-accent, --color-primary) so all three skins
 * (dark/midnight/sunset) work without per-skin overrides here.
 *
 * The shared .cyber-toggle button + [hidden] sub-list pattern is driven
 * by the JS in views/layouts/app.blade.php (click toggles `hidden`,
 * flips aria-expanded, and adds `.open` to .nav-item-dropdown for
 * dropdown styles).
 */

/* ─────────────────────────────────────────────────────────────
   GermanFur Logo widget (registered via theme.php). Sized so it
   fits the sidebar-header by default; data.size can shift.
   ───────────────────────────────────────────────────────────── */
.cyber-logo {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 8px 12px;
}
.cyber-logo__img {
    display: inline-block;
    margin: 0 auto;
    max-height: 120px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 12px rgba(var(--color-accent-rgb), 0.35));
    transition: filter 0.25s ease, transform 0.25s ease;
}
.cyber-logo:hover .cyber-logo__img {
    filter: drop-shadow(0 0 18px rgba(var(--color-accent-rgb), 0.6));
    transform: scale(1.02);
}
.cyber-logo--small .cyber-logo__img  { max-height: 70px; }
.cyber-logo--large .cyber-logo__img  { max-height: 180px; }

/* ─────────────────────────────────────────────────────────────
   Shared toggle button (used by all collapsible / dropdown styles).
   ───────────────────────────────────────────────────────────── */
.cyber-toggle {
    background: none; border: none;
    color: var(--color-accent);
    cursor: pointer;
    padding: 4px 10px;
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 0.18s ease, color 0.18s ease;
}
.cyber-toggle:hover { color: var(--color-primary); }
/* Click-driven Rotation (vertikale Collapsibles, klassisches a11y-Pattern). */
.cyber-toggle[aria-expanded="true"] { transform: rotate(180deg); }
/* Hover-driven Rotation (horizontale Dropdowns — kein Click, daher
   keine aria-expanded-Toggle, Rotation kommt von der Parent-:hover). */
.nav-item-dropdown:hover .cyber-toggle,
.nav-item-dropdown:focus-within .cyber-toggle,
.cyber-has-dropdown:hover .cyber-toggle,
.cyber-has-dropdown:focus-within .cyber-toggle {
    transform: rotate(180deg);
}
/* Hide native focus ring quirks; keep visible for keyboard users. */
.cyber-toggle:focus-visible {
    outline: 1px dashed var(--color-accent);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   Shared dropdown panel for horizontal styles (cyber-neon-tabs,
   cyber-glitch-pills, cyber-footer-blocks). Positioned absolutely
   below the parent on hover OR after click via shared JS.
   ───────────────────────────────────────────────────────────── */

/* base.css setzt `.site-header { overflow: hidden }` für die alten
   Hero-Dekorationen (`.header-top::before/::after` Glow + Claw-Rakes).
   Das clippt aber unsere Top-Nav-Dropdowns weg. Hier korrigieren wir
   die Vorgabe — Dekoration kann sich um die `.header-top`-Children
   selbst kümmern (die haben pointer-events:none + z-index:-1, klippen
   visuell auch ohne Container-overflow:hidden weil sie hinter dem
   restlichen Content liegen). */
.site-header { overflow: visible !important; }
.header-content { overflow: visible; }
.cyber-has-dropdown { position: relative; }
.cyber-dropdown-panel {
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: var(--color-surface, rgba(15,17,25,0.98));
    border: 1px solid rgba(var(--color-accent-rgb), 0.4);
    border-top: 2px solid var(--color-accent);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45),
                0 0 0 1px rgba(var(--color-accent-rgb), 0.15);
    padding: 6px 0;
    z-index: 1500;
    /* Slide-Animation: Default unsichtbar + leicht nach oben verschoben.
       Beim :hover/.open wechselt opacity+transform+visibility weich rein. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity   0.18s ease,
        transform 0.18s ease,
        visibility 0s linear 0.18s;
}
/* [hidden]-Attribut bleibt im Markup, soll aber nicht display:none erzwingen
   weil das die Opacity-Transition kappt. */
.cyber-dropdown-panel[hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
}
/* Hover-Bridge: kleine transparente Fläche zwischen Trigger und Panel,
   damit der Hover-State nicht abreißt wenn der Cursor das Lücken-Pixel
   zwischen Item-Border und Panel überquert. */
.cyber-has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 6px;
    z-index: 59;
}
/* Footer-style dropdown opens upward instead of downward. */
.cyber-dropdown-panel--up {
    top: auto; bottom: 100%;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.4);
    border-bottom: 2px solid var(--color-accent);
}
.cyber-has-dropdown:has(> .cyber-dropdown-panel--up)::after {
    top: auto; bottom: 100%;
}
.cyber-dropdown-panel a,
.cyber-dropdown-panel__label {
    display: block;
    padding: 8px 18px;
    color: var(--color-text); text-decoration: none;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    transition: background 0.15s ease, color 0.15s ease;
}
.cyber-dropdown-panel a:hover,
.cyber-dropdown-panel a.is-active {
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-primary);
}
.cyber-dropdown-panel__label {
    color: rgba(166,186,226,0.55);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 1px;
    pointer-events: none;
}
/* Visibility-Trigger: Panel slidet rein wenn der Container gehovered ist
   oder gefocused. Pure-Hover-UX (kein Click-Pin) — siehe shared JS in
   layouts/app.blade.php. */
.cyber-has-dropdown:hover > .cyber-dropdown-panel,
.cyber-has-dropdown:focus-within > .cyber-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    /* Visibility-Delay weg im Open-State damit der :hover sofort greift. */
    transition:
        opacity   0.18s ease,
        transform 0.18s ease,
        visibility 0s linear 0s;
}

/* ─────────────────────────────────────────────────────────────
   1) cyber-nav-dropdown — top-nav with click-dropdowns.
      JS for the dropdown toggle lives in components/header.blade.php.
   ───────────────────────────────────────────────────────────── */
.cyber-navbar { width: 100%; }
.cyber-navbar__container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: stretch;
}
.cyber-navbar__link,
.cyber-navbar .nav-item-trigger > a,
.cyber-navbar .nav-item-trigger .nav-item-label {
    display: inline-flex;
    align-items: center;
    padding: 14px 18px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 2px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.cyber-navbar__link:hover,
.cyber-navbar__link.active,
.cyber-navbar .nav-item-trigger > a:hover,
.cyber-navbar .nav-item-trigger > a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.05);
}
.cyber-navbar .nav-item-dropdown {
    position: relative;
    display: inline-flex;
}
.cyber-navbar .nav-item-trigger {
    display: inline-flex;
    align-items: stretch;
}
.cyber-navbar .nav-chevron {
    background: none; border: none; color: var(--color-accent);
    cursor: pointer; padding: 14px 12px;
    font-size: 0.9rem; transition: transform 0.18s ease, color 0.18s ease;
}
.cyber-navbar .nav-chevron:hover { color: var(--color-primary); }
.cyber-navbar .nav-item-dropdown.open .nav-chevron { transform: rotate(180deg); }
.cyber-navbar .nav-dropdown {
    position: absolute; top: 100%; left: 0;
    min-width: 220px;
    background: var(--color-surface, rgba(15,17,25,0.98));
    border: 1px solid rgba(var(--color-accent-rgb), 0.4);
    border-top: 2px solid var(--color-accent);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45),
                0 0 0 1px rgba(var(--color-accent-rgb), 0.15);
    padding: 6px 0;
    z-index: 60;
}
/* hidden attribute (set by shared JS) is the source of truth for visibility.
   On hover OR when .open class is present, force visible regardless. */
.cyber-navbar .nav-item-dropdown.open .nav-dropdown { display: block !important; }
.cyber-navbar .nav-item-dropdown:hover .nav-dropdown { display: block; }
.cyber-navbar .nav-dropdown[hidden] {
    /* Browser default for hidden is display:none — keep it for non-hover. */
    display: none;
}
.cyber-navbar .nav-item-dropdown:hover .nav-dropdown[hidden] {
    /* Hover overrides hidden so admins still get hover-preview without click. */
    display: block;
}
.cyber-navbar .nav-dropdown a,
.cyber-navbar .nav-dropdown .nav-dropdown-label {
    display: block; padding: 10px 18px;
    color: var(--color-text); text-decoration: none;
    font-size: 0.9rem; letter-spacing: 0.5px;
}
.cyber-navbar .nav-dropdown a:hover {
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────
   2) cyber-neon-tabs — bold horizontal tabs with glowing underline.
   ───────────────────────────────────────────────────────────── */
.cyber-neon-tabs {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 2px;
    border-bottom: 2px solid rgba(var(--color-accent-rgb), 0.25);
}
.cyber-neon-tabs__item { display: inline-flex; }
.cyber-neon-tabs__link,
.cyber-neon-tabs__label {
    display: inline-block; padding: 14px 22px;
    color: var(--color-text); text-decoration: none;
    font-size: 0.95rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: -2px;
    border: 2px solid transparent;
    border-bottom: 4px solid transparent;
    transition: all 0.18s ease;
}
.cyber-neon-tabs__link:hover {
    color: var(--color-primary);
    border-color: rgba(var(--color-accent-rgb), 0.3);
    border-bottom-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.04);
    text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5);
}
.cyber-neon-tabs__link.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
    text-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.7);
}
.cyber-neon-tabs__row {
    display: inline-flex;
    align-items: stretch;
    margin-bottom: -2px;
    border-bottom: 4px solid transparent;
    transition: border-color 0.18s ease;
}
.cyber-has-dropdown:hover .cyber-neon-tabs__row,
.cyber-has-dropdown.open .cyber-neon-tabs__row {
    border-bottom-color: var(--color-accent);
}
.cyber-neon-tabs__row .cyber-neon-tabs__link {
    margin-bottom: 0;
    border-bottom: none;
}
.cyber-neon-tabs__row .cyber-toggle {
    padding: 14px 12px;
    font-size: 0.85rem;
}
.cyber-neon-tabs__label {
    /* Section text (no link) */
    display: inline-block;
    padding: 14px 22px;
    color: rgba(166,186,226,0.6);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ─────────────────────────────────────────────────────────────
   3) cyber-glitch-pills — rounded pill buttons with neon glow.
   ───────────────────────────────────────────────────────────── */
.cyber-glitch-pills {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
}
.cyber-glitch-pill {
    display: inline-flex; align-items: center;
    padding: 8px 18px;
    color: var(--color-text); text-decoration: none;
    font-size: 0.85rem; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
    border: 1px solid rgba(var(--color-accent-rgb), 0.4);
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.04);
    transition: all 0.2s ease;
    position: relative;
}
.cyber-glitch-pill:hover {
    color: var(--color-primary);
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.45),
                inset 0 0 6px rgba(var(--color-accent-rgb), 0.1);
    transform: translateY(-1px);
}
.cyber-glitch-pill.is-active {
    color: var(--color-primary);
    border-color: var(--color-accent);
    box-shadow: 0 0 14px rgba(var(--color-accent-rgb), 0.55);
}
.cyber-glitch-pill.is-label {
    background: transparent;
    border-color: rgba(var(--color-accent-rgb), 0.2);
    color: rgba(166,186,226,0.65);
    cursor: default;
}
.cyber-glitch-pills__row {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(var(--color-accent-rgb), 0.4);
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.04);
    transition: all 0.2s ease;
}
.cyber-glitch-pills__row .cyber-glitch-pill {
    border: none;
    background: transparent;
    box-shadow: none;
}
.cyber-glitch-pills__row:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.45);
}
.cyber-glitch-pills__chev {
    padding: 8px 14px 8px 4px;
    color: var(--color-accent);
}

/* ─────────────────────────────────────────────────────────────
   4) cyber-mini-strip — tight horizontal compact (header-ish).
   ───────────────────────────────────────────────────────────── */
.cyber-mini-strip {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 0;
    font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.5px;
}
.cyber-mini-strip li {
    display: inline-flex; align-items: center;
}
.cyber-mini-strip li:not(:last-child)::after {
    content: '◆';
    color: var(--color-accent);
    margin: 0 12px;
    font-size: 0.6em;
    opacity: 0.6;
}
.cyber-mini-strip a,
.cyber-mini-strip span {
    color: rgba(166,186,226,0.78);
    text-decoration: none;
    padding: 6px 2px;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}
.cyber-mini-strip a:hover {
    color: var(--color-primary);
    text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.45);
}
.cyber-mini-strip a.is-active { color: var(--color-primary); }

/* ─────────────────────────────────────────────────────────────
   5) cyber-claw-list — vertical with claw bullets (sidebar).
   ───────────────────────────────────────────────────────────── */
.cyber-claw-list {
    padding: 6px 0 12px;
}
.cyber-claw-list__title {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--color-accent);
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.2);
    margin-bottom: 4px;
}
.cyber-claw-list__claw {
    color: var(--color-primary);
    text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5);
}
.cyber-claw-list__list { list-style: none; margin: 0; padding: 0; }
.cyber-claw-list__list > li { margin: 0; }
.cyber-claw-list__row {
    display: flex; align-items: stretch;
    border-left: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cyber-claw-list__row:hover { background: rgba(var(--color-accent-rgb), 0.04); }
.cyber-claw-list__row > .cyber-claw-list__link { flex: 1; }
.cyber-claw-list__item.has-children .cyber-claw-list__row { padding-right: 4px; }
.cyber-claw-list__link,
.cyber-claw-list__sect {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    color: var(--color-text); text-decoration: none;
    font-size: 0.92rem;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
}
.cyber-claw-list__bullet {
    color: rgba(var(--color-accent-rgb), 0.5);
    font-weight: 700; width: 14px;
    transition: color 0.15s ease, text-shadow 0.15s ease, transform 0.15s ease;
}
.cyber-claw-list__link:hover,
.cyber-claw-list__link.is-active {
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-primary);
    border-left-color: var(--color-accent);
}
.cyber-claw-list__link:hover .cyber-claw-list__bullet,
.cyber-claw-list__link.is-active .cyber-claw-list__bullet {
    color: var(--color-accent);
    text-shadow: 0 0 8px var(--color-accent);
    transform: translateX(2px);
}
.cyber-claw-list__sect {
    color: rgba(166,186,226,0.45);
    text-transform: uppercase; font-size: 0.72rem;
    letter-spacing: 1.5px; pointer-events: none;
}
.cyber-claw-list__sub {
    list-style: none; margin: 0;
    padding: 4px 0 6px 30px;
    border-left: 1px dashed rgba(var(--color-accent-rgb), 0.2);
    margin-left: 22px;
    /* Slide-Open Animation: max-height + opacity transition. */
    overflow: hidden;
    max-height: 1500px;
    opacity: 1;
    transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.22s ease;
}
.cyber-claw-list__sub[hidden] {
    display: block;        /* Override UA display:none */
    max-height: 0;
    opacity: 0;
    padding-top: 0; padding-bottom: 0;
    pointer-events: none;
}
.cyber-claw-list__sub a, .cyber-claw-list__sub span {
    display: block; padding: 5px 14px;
    color: rgba(166,186,226,0.78); text-decoration: none;
    font-size: 0.85rem;
}
.cyber-claw-list__sub a:hover { color: var(--color-primary); }

/* ─────────────────────────────────────────────────────────────
   6) cyber-circuit-tree — vertical tree with circuit-line connectors.
   ───────────────────────────────────────────────────────────── */
.cyber-circuit-tree {
    padding: 8px 12px;
}
.cyber-circuit-tree__title {
    font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--color-accent);
    padding: 0 4px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.2);
}
.cyber-circuit-tree__list { list-style: none; margin: 0; padding: 0; }
.cyber-circuit-tree__node {
    position: relative;
    padding-left: 22px;
    line-height: 1.6;
}
.cyber-circuit-tree__row {
    display: flex; align-items: center; gap: 4px;
}
.cyber-circuit-tree__row > .cyber-circuit-tree__link { flex: 1; }
.cyber-circuit-tree__connector {
    position: absolute; left: 6px; top: 14px;
    width: 12px; height: 1px;
    background: var(--color-accent);
    box-shadow: 0 0 6px rgba(var(--color-accent-rgb), 0.4);
}
.cyber-circuit-tree__node::before {
    content: '';
    position: absolute; left: 6px; top: 0; bottom: 0;
    width: 1px;
    background: rgba(var(--color-accent-rgb), 0.25);
}
.cyber-circuit-tree__node:last-child::before {
    height: 14px;
}
.cyber-circuit-tree__link,
.cyber-circuit-tree__label {
    display: inline-block; padding: 4px 8px;
    color: var(--color-text); text-decoration: none;
    font-size: 0.88rem;
    font-family: 'Courier New', monospace;
    transition: color 0.15s ease, background 0.15s ease;
}
.cyber-circuit-tree__link:hover,
.cyber-circuit-tree__link.is-active {
    color: var(--color-primary);
    background: rgba(var(--color-accent-rgb), 0.08);
}
.cyber-circuit-tree__sub {
    list-style: none; margin: 4px 0 6px; padding: 0;
    overflow: hidden;
    max-height: 1500px;
    opacity: 1;
    transition: max-height 0.32s ease, opacity 0.22s ease, margin 0.22s ease;
}
.cyber-circuit-tree__sub[hidden] {
    display: block;
    max-height: 0;
    opacity: 0;
    margin-top: 0; margin-bottom: 0;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   7) cyber-stacked-glow — vertical big uppercase with glow.
   ───────────────────────────────────────────────────────────── */
.cyber-stacked-glow {
    padding: 8px 0 16px;
}
.cyber-stacked-glow__header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-accent);
    padding: 4px 18px 10px;
    border-bottom: 2px solid var(--color-accent);
    margin-bottom: 4px;
    box-shadow: 0 1px 12px rgba(var(--color-accent-rgb), 0.3);
}
.cyber-stacked-glow__list { list-style: none; margin: 0; padding: 0; }
.cyber-stacked-glow__row {
    display: flex; align-items: stretch;
}
.cyber-stacked-glow__row > .cyber-stacked-glow__link { flex: 1; }
.cyber-stacked-glow__sub {
    list-style: none; margin: 0;
    padding: 4px 0 8px 26px;
    background: rgba(var(--color-accent-rgb), 0.04);
    border-left: 2px solid var(--color-accent);
    overflow: hidden;
    max-height: 1500px;
    opacity: 1;
    transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.22s ease;
}
.cyber-stacked-glow__sub[hidden] {
    display: block;
    max-height: 0;
    opacity: 0;
    padding-top: 0; padding-bottom: 0;
    pointer-events: none;
}
.cyber-stacked-glow__sub a, .cyber-stacked-glow__sub span {
    display: block; padding: 8px 18px;
    color: rgba(166,186,226,0.8); text-decoration: none;
    font-size: 0.88rem;
    text-transform: uppercase; letter-spacing: 1px;
}
.cyber-stacked-glow__sub a:hover { color: var(--color-primary); }
.cyber-stacked-glow__link,
.cyber-stacked-glow__sect {
    display: block;
    padding: 12px 18px;
    color: var(--color-text); text-decoration: none;
    font-size: 1.02rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.1);
    transition: all 0.2s ease;
}
.cyber-stacked-glow__link:hover {
    color: var(--color-primary);
    background: rgba(var(--color-accent-rgb), 0.08);
    text-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.7);
    padding-left: 26px;
}
.cyber-stacked-glow__link.is-active {
    color: var(--color-primary);
    background: rgba(var(--color-accent-rgb), 0.12);
    text-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.6);
    padding-left: 26px;
}
.cyber-stacked-glow__sect {
    color: rgba(166,186,226,0.55);
    font-size: 0.82rem;
    letter-spacing: 2px;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   8) cyber-side-bar — vertical with magenta accent stripe per item.
   ───────────────────────────────────────────────────────────── */
.cyber-side-bar { padding: 6px 0; }
.cyber-side-bar__list { list-style: none; margin: 0; padding: 0; }
.cyber-side-bar__list > li { margin: 0; }
.cyber-side-bar__row {
    display: flex; align-items: stretch;
}
.cyber-side-bar__row > .cyber-side-bar__link { flex: 1; }
.cyber-side-bar__sub {
    list-style: none; margin: 0;
    padding: 4px 0 6px 32px;
    background: rgba(0,0,0,0.18);
    overflow: hidden;
    max-height: 1500px;
    opacity: 1;
    transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.22s ease;
}
.cyber-side-bar__sub[hidden] {
    display: block;
    max-height: 0;
    opacity: 0;
    padding-top: 0; padding-bottom: 0;
    pointer-events: none;
}
.cyber-side-bar__sub a, .cyber-side-bar__sub span {
    display: block; padding: 6px 14px;
    color: rgba(166,186,226,0.78); text-decoration: none;
    font-size: 0.85rem;
}
.cyber-side-bar__sub a:hover {
    color: var(--color-primary);
    background: rgba(var(--color-accent-rgb), 0.06);
}
.cyber-side-bar__link,
.cyber-side-bar__sect {
    display: flex; align-items: center;
    padding: 10px 16px;
    color: var(--color-text); text-decoration: none;
    font-size: 0.92rem;
    transition: all 0.18s ease;
    position: relative;
}
.cyber-side-bar__stripe {
    display: inline-block;
    width: 3px; height: 20px;
    margin-right: 14px;
    background: rgba(var(--color-accent-rgb), 0.18);
    transition: all 0.18s ease;
}
.cyber-side-bar__link:hover .cyber-side-bar__stripe,
.cyber-side-bar__link.is-active .cyber-side-bar__stripe {
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
    height: 24px;
}
.cyber-side-bar__link:hover {
    color: var(--color-primary);
    background: rgba(var(--color-accent-rgb), 0.05);
}
.cyber-side-bar__link.is-active {
    color: var(--color-primary);
    background: rgba(var(--color-accent-rgb), 0.08);
}
.cyber-side-bar__sect {
    color: rgba(166,186,226,0.5);
    text-transform: uppercase; font-size: 0.72rem;
    letter-spacing: 1.5px;
}

/* ─────────────────────────────────────────────────────────────
   9) cyber-footer-blocks — horizontal hard-edged blocks.
   ───────────────────────────────────────────────────────────── */
.cyber-footer-blocks {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0;
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    border-radius: 2px;
    overflow: hidden;
}
.cyber-footer-blocks__item {
    flex: 1 1 auto;
    border-right: 1px solid rgba(var(--color-accent-rgb), 0.2);
}
.cyber-footer-blocks__item:last-child { border-right: none; }
.cyber-footer-blocks__link,
.cyber-footer-blocks__item > span {
    display: block;
    padding: 12px 18px;
    color: var(--color-text); text-decoration: none;
    font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.5px;
    text-align: center;
    transition: all 0.18s ease;
}
.cyber-footer-blocks__link:hover {
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-primary);
    text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5);
}
.cyber-footer-blocks__link.is-active {
    background: rgba(var(--color-accent-rgb), 0.18);
    color: var(--color-primary);
}
.cyber-footer-blocks__row {
    display: flex;
    align-items: stretch;
}
.cyber-footer-blocks__row > .cyber-footer-blocks__link { flex: 1; }
.cyber-footer-blocks__row .cyber-toggle {
    padding: 12px 14px;
    color: var(--color-accent);
    border-left: 1px solid rgba(var(--color-accent-rgb), 0.2);
}
.cyber-footer-blocks__item.cyber-has-dropdown:hover {
    background: rgba(var(--color-accent-rgb), 0.08);
}

/* ═════════════════════════════════════════════════════════════
   GERMANFUR CYBERPUNK — WRAPPER-STILE (widget / block / page)
   ═════════════════════════════════════════════════════════════ */

/* ── widget:html.static ─────────────────────────────────────── */

/* cyber-frame — neon corner brackets, magenta glow */
.cyber-frame {
    position: relative;
    padding: 22px 24px;
    margin: 16px 0;
    background: rgba(var(--color-accent-rgb), 0.04);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}
.cyber-frame__corner {
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}
.cyber-frame__corner--tl { top: -2px; left: -2px;  border-right: none; border-bottom: none; }
.cyber-frame__corner--tr { top: -2px; right: -2px; border-left: none;  border-bottom: none; }
.cyber-frame__corner--bl { bottom: -2px; left: -2px;  border-right: none; border-top: none; }
.cyber-frame__corner--br { bottom: -2px; right: -2px; border-left: none;  border-top: none; }
.cyber-frame__body > :first-child { margin-top: 0; }
.cyber-frame__body > :last-child  { margin-bottom: 0; }

/* cyber-warning — diagonal yellow/black warning stripes */
.cyber-warning {
    margin: 16px 0;
    background: rgba(0,0,0,0.4);
}
.cyber-warning__stripe-top,
.cyber-warning__stripe-bottom {
    height: 8px;
    background: repeating-linear-gradient(45deg,
        #ffb800 0 12px, #1a1b1f 12px 24px);
}
.cyber-warning__body {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 20px;
    background: rgba(255,184,0,0.08);
    border-left: 4px solid #ffb800;
    border-right: 4px solid #ffb800;
}
.cyber-warning__icon {
    font-size: 1.8rem;
    color: #ffb800;
    flex: 0 0 auto;
    text-shadow: 0 0 10px #ffb800;
    line-height: 1;
}
.cyber-warning__text > :first-child { margin-top: 0; }
.cyber-warning__text > :last-child  { margin-bottom: 0; }

/* cyber-data — cyan technical block with scanline */
.cyber-data {
    margin: 16px 0;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(0,200,255,0.4);
    border-radius: 2px;
    box-shadow: inset 0 0 24px rgba(0,200,255,0.08);
    font-family: 'Courier New', 'Lucida Console', monospace;
    overflow: hidden;
}
.cyber-data__header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: rgba(0,200,255,0.12);
    border-bottom: 1px solid rgba(0,200,255,0.3);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00c8ff;
    text-shadow: 0 0 6px rgba(0,200,255,0.5);
}
.cyber-data__pulse {
    width: 8px; height: 8px;
    background: #00c8ff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00c8ff;
    animation: cyber-data-pulse 2s ease-in-out infinite;
}
@keyframes cyber-data-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.7); }
}
.cyber-data__body {
    padding: 14px 18px;
    color: #b8e8ff;
    background: linear-gradient(rgba(0,200,255,0.04) 50%, transparent 50%);
    background-size: 100% 4px;
}
.cyber-data__body > :first-child { margin-top: 0; }
.cyber-data__body > :last-child  { margin-bottom: 0; }

/* cyber-claw — magenta claw-bite corners */
.cyber-claw {
    position: relative;
    padding: 24px 28px;
    margin: 18px 0;
    background: rgba(247,37,133,0.06);
    border: 2px solid rgba(247,37,133,0.4);
}
.cyber-claw__bite {
    position: absolute;
    color: #f72585;
    font-size: 1.6rem;
    line-height: 1;
    text-shadow: 0 0 10px #f72585;
    pointer-events: none;
}
.cyber-claw__bite--tl { top: -10px; left: -10px;  }
.cyber-claw__bite--tr { top: -10px; right: -10px; }
.cyber-claw__bite--bl { bottom: -10px; left: -10px; }
.cyber-claw__bite--br { bottom: -10px; right: -10px; }
.cyber-claw__body > :first-child { margin-top: 0; }
.cyber-claw__body > :last-child  { margin-bottom: 0; }

/* cyber-card — dark card with neon header */
.cyber-card {
    margin: 16px 0;
    background: linear-gradient(135deg, rgba(15,17,25,0.95), rgba(25,17,35,0.95));
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4),
                0 0 0 1px rgba(var(--color-accent-rgb), 0.08);
}
.cyber-card__header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.18),
        rgba(var(--color-accent-rgb), 0.04));
    border-bottom: 2px solid var(--color-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary);
}
.cyber-card__icon {
    color: var(--color-accent);
    text-shadow: 0 0 8px var(--color-accent);
    font-size: 1.1rem;
}
.cyber-card__title { font-weight: 700; }
.cyber-card__body { padding: 18px; }
.cyber-card__body > :first-child { margin-top: 0; }
.cyber-card__body > :last-child  { margin-bottom: 0; }

/* ── block:wysiwyg ──────────────────────────────────────────── */

/* cyber-callout — magenta accent bar */
.cyber-callout {
    display: flex; gap: 14px;
    margin: 18px 0;
    padding: 16px 18px;
    background: rgba(247,37,133,0.06);
    border-radius: 0 6px 6px 0;
}
.cyber-callout__bar {
    flex: 0 0 4px;
    background: var(--color-accent);
    border-radius: 2px;
    box-shadow: 0 0 12px var(--color-accent);
}
.cyber-callout__body { flex: 1; }
.cyber-callout__body > :first-child { margin-top: 0; }
.cyber-callout__body > :last-child  { margin-bottom: 0; }

/* cyber-terminal — green-on-black terminal */
.cyber-terminal {
    margin: 18px 0; padding: 0;
    background: #050a0a;
    border: 1px solid #1a3a3a;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 0.88rem;
    box-shadow: inset 0 0 30px rgba(0,255,150,0.1);
    color: #5fff8f;
    white-space: pre-wrap;
    line-height: 1.55;
}
.cyber-terminal__header {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #1a1f1a;
    border-bottom: 1px solid #1a3a3a;
}
.cyber-terminal__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.cyber-terminal__dot--r { background: #ff5f56; }
.cyber-terminal__dot--y { background: #ffbd2e; }
.cyber-terminal__dot--g { background: #27c93f; }
.cyber-terminal__path {
    color: #5fff8f;
    font-size: 0.78rem;
    margin-left: auto;
    opacity: 0.7;
}
.cyber-terminal__body {
    padding: 14px 18px;
    background: linear-gradient(transparent 50%, rgba(95,255,143,0.03) 50%);
    background-size: 100% 4px;
}
.cyber-terminal__body > :first-child { margin-top: 0; }
.cyber-terminal__body > :last-child  { margin-bottom: 0; }
.cyber-terminal__body * { color: inherit !important; }
.cyber-terminal__body a { color: #00c8ff !important; text-decoration: underline; }

/* cyber-warning-block — yellow alert */
.cyber-warning-block {
    display: flex; align-items: flex-start; gap: 14px;
    margin: 18px 0;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(255,184,0,0.18), rgba(255,184,0,0.06));
    border: 1px solid rgba(255,184,0,0.5);
    border-left: 5px solid #ffb800;
    border-radius: 4px;
}
.cyber-warning-block__icon {
    flex: 0 0 auto;
    font-size: 1.4rem;
    color: #ffb800;
    text-shadow: 0 0 10px #ffb800;
}
.cyber-warning-block__body { flex: 1; }
.cyber-warning-block__body > :first-child { margin-top: 0; }
.cyber-warning-block__body > :last-child  { margin-bottom: 0; }

/* cyber-quote — neon pull quote */
.cyber-quote {
    position: relative;
    margin: 24px 0;
    padding: 28px 60px;
    border-top: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    font-size: 1.2rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.3);
}
.cyber-quote__mark {
    position: absolute;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.7;
    text-shadow: 0 0 12px var(--color-accent);
    pointer-events: none;
}
.cyber-quote__mark--open  { top: 18px; left: 16px; }
.cyber-quote__mark--close { bottom: 18px; right: 16px; }
.cyber-quote__body > :first-child { margin-top: 0; }
.cyber-quote__body > :last-child  { margin-bottom: 0; }

/* cyber-info — cyan info card */
.cyber-info {
    display: flex; align-items: flex-start; gap: 14px;
    margin: 18px 0;
    padding: 16px 20px;
    background: rgba(0,200,255,0.08);
    border: 1px solid rgba(0,200,255,0.35);
    border-left: 4px solid #00c8ff;
    border-radius: 4px;
}
.cyber-info__icon {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: #00c8ff;
    text-shadow: 0 0 10px #00c8ff;
    line-height: 1;
}
.cyber-info__body { flex: 1; color: #b8e8ff; }
.cyber-info__body > :first-child { margin-top: 0; }
.cyber-info__body > :last-child  { margin-bottom: 0; }

/* ── page (Page-Body Wrapper) ───────────────────────────────── */

.cyber-page { /* Standard-Container, dezent. */ }

/* page · arena — full neon frame mit Title-Header */
.cyber-page--arena {
    position: relative;
    max-width: 940px;
    margin: 30px auto;
    padding: 36px 40px;
    background: linear-gradient(135deg, rgba(15,17,25,0.92), rgba(25,17,35,0.94));
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 40px rgba(var(--color-accent-rgb), 0.35),
                inset 0 0 50px rgba(var(--color-accent-rgb), 0.06);
}
.cyber-page__corner {
    position: absolute;
    width: 22px; height: 22px;
    border: 3px solid var(--color-accent);
    box-shadow: 0 0 12px var(--color-accent);
}
.cyber-page__corner--tl { top: -3px; left: -3px;  border-right: none; border-bottom: none; }
.cyber-page__corner--tr { top: -3px; right: -3px; border-left: none;  border-bottom: none; }
.cyber-page__corner--bl { bottom: -3px; left: -3px;  border-right: none; border-top: none; }
.cyber-page__corner--br { bottom: -3px; right: -3px; border-left: none;  border-top: none; }
.cyber-page-arena__header {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 18px;
    margin-bottom: 28px;
}
.cyber-page-arena__sigil {
    color: var(--color-accent);
    font-size: 1.6rem;
    text-shadow: 0 0 10px var(--color-accent);
}
.cyber-page-arena__title {
    margin: 0;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--color-primary);
    text-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.5);
}

/* page · terminal */
.cyber-page--terminal {
    max-width: 880px;
    margin: 30px auto;
    background: #050a0a;
    border: 1px solid #1a3a3a;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Courier New', 'Lucida Console', monospace;
    color: #5fff8f;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5),
                inset 0 0 50px rgba(0,255,150,0.08);
}
.cyber-page-terminal__header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: #1a1f1a;
    border-bottom: 1px solid #1a3a3a;
}
.cyber-page-terminal__dot {
    width: 12px; height: 12px;
    border-radius: 50%;
}
.cyber-page-terminal__dot--r { background: #ff5f56; }
.cyber-page-terminal__dot--y { background: #ffbd2e; }
.cyber-page-terminal__dot--g { background: #27c93f; }
.cyber-page-terminal__path {
    color: #5fff8f;
    font-size: 0.82rem;
    opacity: 0.8;
    margin-left: 8px;
}
.cyber-page-terminal__title {
    padding: 16px 22px 6px;
    margin: 0;
    color: #5fff8f;
    font-size: 1.1rem;
    font-weight: normal;
    text-shadow: 0 0 8px rgba(95,255,143,0.5);
}
.cyber-page-terminal__title::before { content: ""; }
.cyber-page-terminal__body {
    padding: 14px 22px 28px;
    background: linear-gradient(transparent 50%, rgba(95,255,143,0.03) 50%);
    background-size: 100% 4px;
}
.cyber-page-terminal__body * { color: #c8ffd8; }
.cyber-page-terminal__body a { color: #00c8ff !important; }
.cyber-page-terminal__body h1, .cyber-page-terminal__body h2, .cyber-page-terminal__body h3 {
    color: #5fff8f !important;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(95,255,143,0.4);
}

/* page · zine — fanzine bold uppercase */
.cyber-page--zine {
    max-width: 880px;
    margin: 30px auto;
    padding: 32px 40px;
    background: rgba(15,17,25,0.85);
}
.cyber-page-zine__header {
    text-align: center;
    border-top: 4px solid var(--color-accent);
    border-bottom: 4px solid var(--color-accent);
    padding: 22px 0;
    margin-bottom: 30px;
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.08),
        rgba(var(--color-accent-rgb), 0.02));
}
.cyber-page-zine__kicker {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--color-accent);
    margin-bottom: 10px;
    text-shadow: 0 0 8px var(--color-accent);
}
.cyber-page-zine__title {
    margin: 0 0 8px;
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: var(--color-primary);
    text-shadow: 0 0 25px rgba(var(--color-accent-rgb), 0.55),
                 2px 2px 0 rgba(var(--color-accent-rgb), 0.25);
    line-height: 1;
}
.cyber-page-zine__meta {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(166,186,226,0.7);
}

/* page · glitch — RGB-split title */
.cyber-page--glitch {
    max-width: 920px;
    margin: 30px auto;
    padding: 30px 40px;
}
.cyber-page-glitch__header {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.25);
}
.cyber-page-glitch__title {
    position: relative;
    margin: 0;
    font-size: 2.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: var(--color-primary);
    line-height: 1.05;
}
.cyber-page-glitch__title::before,
.cyber-page-glitch__title::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.cyber-page-glitch__title::before {
    color: #00c8ff;
    transform: translate(-2px, 0);
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: cyber-glitch-shift 3s infinite steps(1);
}
.cyber-page-glitch__title::after {
    color: #f72585;
    transform: translate(2px, 0);
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: cyber-glitch-shift 2.6s infinite steps(1) reverse;
}
@keyframes cyber-glitch-shift {
    0%,100% { transform: translate(-2px, 0); }
    20%     { transform: translate(2px, 1px); }
    40%     { transform: translate(-1px, -1px); }
    60%     { transform: translate(0, 0); }
    80%     { transform: translate(-2px, 0); }
}

/* page · claw — wild-Look mit Klauen-Biten */
.cyber-page--claw {
    position: relative;
    max-width: 880px;
    margin: 30px auto;
    padding: 36px 38px;
    background: linear-gradient(135deg, rgba(35,15,25,0.85), rgba(15,17,25,0.95));
    border: 1px solid rgba(247,37,133,0.4);
    border-radius: 6px;
}
.cyber-page-claw__bite {
    position: absolute;
    color: #f72585;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 0 14px #f72585;
    pointer-events: none;
    opacity: 0.95;
}
.cyber-page-claw__bite--tl { top: -14px; left: -8px; }
.cyber-page-claw__bite--tr { top: -14px; right: -8px; }
.cyber-page-claw__bite--bl { bottom: -14px; left: -8px; }
.cyber-page-claw__bite--br { bottom: -14px; right: -8px; }
.cyber-page-claw__header {
    display: flex; align-items: center; gap: 14px;
    border-bottom: 2px dashed rgba(247,37,133,0.4);
    padding-bottom: 16px;
    margin-bottom: 24px;
}
.cyber-page-claw__paw {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 10px rgba(247,37,133,0.6));
}
.cyber-page-claw__title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1px;
}