/* ============================================================
   Watersoul · Bunker Club — Base
   Concrete + rivets + low water-light haze.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cormorant+Garamond:ital,wght@0,500;1,400;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    font-family: var(--ws-f-body, 'Inter', system-ui, sans-serif);
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    line-height: 1.55;
    overflow-x: hidden;
}

/* Bunker texture — concrete grain + water haze + stage spot */
body::before {
    content: ""; position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(circle at 0 0, rgba(232,228,216,0.04) 1px, transparent 2px) 0 0 / 48px 48px,
        radial-gradient(circle at 50% 50%, rgba(232,228,216,0.015) 0.5px, transparent 1.5px) 0 0 / 7px 7px,
        radial-gradient(ellipse 70% 50% at 15% 10%, var(--ws-glow-water, rgba(90,143,196,0.18)), transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 85%, var(--ws-glow-stage, rgba(255,46,136,0.10)), transparent 60%);
}

a { color: var(--color-link, var(--color-accent)); text-decoration: none; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; }

.fade-in { animation: wsFade 0.6s ease both; }
@keyframes wsFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }


/* ============================================================
   BUNKER LAYOUT — top beam + 3 cols + footer
   ============================================================ */
.ws-bunker {
    position: relative; z-index: 1;
    display: grid;
    min-height: 100vh;
    gap: 0;
    grid-template-areas:
        "beam beam beam"
        "side-l stage side-r"
        "foot foot foot";
    grid-template-columns: var(--ws-side-w, 280px) 1fr var(--ws-side-w-r, 320px);
    grid-template-rows: var(--ws-topbar-h, 76px) 1fr auto;
}
.ws-bunker--sb-l    { grid-template-columns: var(--ws-side-w, 280px) 1fr; grid-template-areas: "beam beam" "side-l stage" "foot foot"; }
.ws-bunker--sb-r    { grid-template-columns: 1fr var(--ws-side-w-r, 320px); grid-template-areas: "beam beam" "stage side-r" "foot foot"; }
.ws-bunker--sb-none { grid-template-columns: 1fr; grid-template-areas: "beam" "stage" "foot"; }

@media (max-width: 1200px) {
    .ws-bunker, .ws-bunker--sb-lr, .ws-bunker--sb-l, .ws-bunker--sb-r {
        grid-template-columns: var(--ws-side-w, 260px) 1fr;
        grid-template-areas: "beam beam" "side-l stage" "side-r side-r" "foot foot";
    }
    .ws-bunker__side--right { grid-area: side-r; }
}
@media (max-width: 820px) {
    .ws-bunker, .ws-bunker--sb-lr, .ws-bunker--sb-l, .ws-bunker--sb-r {
        grid-template-columns: 1fr;
        grid-template-areas: "beam" "side-l" "stage" "side-r" "foot";
    }
}

.ws-bunker__side--left  { grid-area: side-l; }
.ws-bunker__side--right { grid-area: side-r; }
.ws-bunker__stage       { grid-area: stage; }


/* ============================================================
   TOP BEAM
   ============================================================ */
.ws-beam {
    grid-area: beam;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 var(--ws-gutter, 24px);
    background: linear-gradient(180deg, var(--ws-c-steel, #1a2842) 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 50;
    height: var(--ws-topbar-h, 76px);
    flex-wrap: wrap;
}
/* Visual order ist via CSS-`order`-Property festgelegt, damit Admin sich nicht
   um die Reihenfolge im Area-Admin kümmern muss. HTML-Reihenfolge ist egal. */
.ws-beam > *          { order: 50; }
.ws-beam > .ws-brand  { order:  1; margin-right: 8px; }
.ws-beam .ws-beam-nav { order:  2; }
.ws-beam .ws-status   { order: 80; margin-left: auto; }
.ws-beam .ws-btn--enter { order: 90; }
@media (max-width: 820px) {
    .ws-beam { padding: 0 14px; gap: 12px; }
    .ws-beam .ws-beam-nav, .ws-beam .ws-status { display: none; }
}

.ws-brand { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.ws-brand__img { width: 44px; height: 44px; object-fit: contain; }
.ws-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.ws-brand__name {
    font-family: var(--ws-f-display, 'Cinzel', serif);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 4px;
}
.ws-brand__sub {
    font-family: var(--ws-f-script, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--ws-c-water-hot, var(--color-accent));
    letter-spacing: 0.5px;
}

.ws-beam__nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

.ws-status {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ws-f-mono, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
}
.ws-status__pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ws-c-stage, #ff2e88);
    box-shadow: 0 0 12px var(--ws-c-stage, #ff2e88);
    animation: wsPulse 1.5s ease infinite;
}
@keyframes wsPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
.ws-status__label { color: var(--ws-c-stage-hot, var(--color-accent)); font-weight: 600; }
.ws-status__count { color: var(--ws-c-bone, var(--color-text)); }
.ws-status--off .ws-status__pulse { background: var(--color-text-muted); box-shadow: none; animation: none; }
.ws-status--off .ws-status__label { color: var(--color-text-muted); }

.ws-btn {
    display: inline-block;
    padding: 10px 22px;
    font-family: var(--ws-f-display, 'Cinzel', serif);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    color: var(--ws-c-bone, var(--color-text));
    background: transparent;
    transition: all 0.15s ease;
}
.ws-btn:hover { color: var(--ws-c-bone, var(--color-text)); }
.ws-btn--enter   { background: var(--ws-c-stage, #ff2e88); color: #fff; border-color: var(--ws-c-stage, #ff2e88); }
.ws-btn--enter:hover { background: var(--ws-c-stage-hot, #ff6bb0); color: #fff; }
.ws-btn--primary { background: var(--ws-c-water, #5a8fc4); color: var(--ws-c-deep, #0c1426); border-color: var(--ws-c-water-hot, #7fb8f0); }
.ws-btn--primary:hover { background: var(--ws-c-water-hot, #7fb8f0); color: var(--ws-c-deep, #0c1426); }
.ws-btn--ghost   { border-color: var(--ws-c-border-hot, rgba(122,184,232,0.35)); color: var(--ws-c-water-hot, var(--color-accent)); }
.ws-btn--ghost:hover { background: rgba(122,184,232,0.10); color: var(--ws-c-water-hot, var(--color-accent)); }


/* ============================================================
   SIDES (left + right)
   ============================================================ */
.ws-bunker__side {
    padding: 22px 18px;
    border-right: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--ws-c-deep, #0c1426) 0%, var(--ws-c-deeper, #060a14) 100%);
    overflow-y: auto;
    max-height: calc(100vh - var(--ws-topbar-h, 76px));
    position: sticky; top: var(--ws-topbar-h, 76px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.ws-bunker__side--right { border-right: none; border-left: 1px solid var(--color-border); }
@media (max-width: 820px) {
    .ws-bunker__side { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--color-border); }
    .ws-bunker__side--right { border-left: none; }
}

.ws-side-block { margin-bottom: 22px; }
.ws-side-block h3 {
    font-family: var(--ws-f-display, 'Cinzel', serif);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}
.ws-widget {
    background: var(--ws-c-steel-dim, rgba(26, 40, 66, 0.6));
    border: 1px solid var(--color-border);
    padding: 14px;
}


/* ============================================================
   STAGE (main column)
   ============================================================ */
.ws-bunker__stage {
    padding: 28px var(--ws-gutter, 28px) 50px;
    min-width: 0;
}
@media (max-width: 820px) { .ws-bunker__stage { padding: 22px 16px 40px; } }

.ws-notice-bar {
    grid-area: beam;
    padding: 10px 20px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--ws-f-mono, 'JetBrains Mono', monospace);
    font-size: 0.85rem;
    text-align: center;
}


/* ============================================================
   FOOTER
   ============================================================ */
.ws-foot {
    grid-area: foot;
    padding: 30px var(--ws-gutter, 24px) 24px;
    border-top: 1px solid var(--color-border);
    background: var(--ws-c-deeper, var(--color-bg));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
}
@media (max-width: 820px) { .ws-foot { grid-template-columns: 1fr; text-align: center; } }
.ws-foot__brand .ws-foot-brand__logo {
    font-family: var(--ws-f-display, 'Cinzel', serif);
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: 6px;
    color: var(--color-text);
}
.ws-foot__brand .ws-foot-brand__tag {
    font-family: var(--ws-f-script, 'Cormorant Garamond', serif);
    font-style: italic;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.ws-foot__nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.ws-foot__copy {
    grid-column: 1 / -1;
    border-top: 1px dashed var(--color-border);
    padding-top: 16px;
    margin-top: 6px;
    font-family: var(--ws-f-mono, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    text-align: center;
}