/**
 * WBCESipn – css/wbcesipn.css
 *
 * Design-Tokens 1:1 aus design_handoff_cms_template/README.md uebernommen
 * (Farben, Typografie, Spacing, Radius, Schatten, Motion). Dashboard-Inhalte
 * (Stat-Cards, Activity-Feed, Notification-Dropdown) sind bewusst NICHT
 * umgesetzt — das Karten-/Oberflaechen-Vokabular wird stattdessen fuer den
 * echten Seiteninhalt (page_content) wiederverwendet.
 *
 * Theming: CSS Custom Properties auf :root (Light = Default), Override per
 * [data-theme="dark"] (expliziter Toggle) sowie per prefers-color-scheme
 * (Systemvorgabe, solange kein expliziter Toggle gespeichert ist).
 *
 * @template  wbcesipn
 * @version   0.6.1
 * @author    WBCE Community
 * @license   GNU General Public License
 * @platform  WBCE 1.7.0+
 */

* { box-sizing: border-box; }

/* ── Theme-Tokens ─────────────────────────────────────────────────────── */
:root {
    --wbs-bg: #F6F5F1;
    --wbs-bg-rgb: 246, 245, 241;
    --wbs-surface: #FFFFFF;
    --wbs-surface-raised: #FFFFFF;
    --wbs-border: #E7E4DC;
    --wbs-text: #16151C;
    --wbs-muted: #6B6B75;
    --wbs-input-bg: #F0EEE7;
    --wbs-heading-dim: #A6A398;
    --wbs-logo-badge-bg: #F6F5F1;

    --wbs-accent: #6D5EF5;
    --wbs-accent-2: #9C8CFF;
    --wbs-lime: #B6FF3C;
    --wbs-success: #3FBF7F;
    --wbs-warning: #E0A93B;
    --wbs-info: #3FA9F5;

    --wbs-active-tab-bg: #EFEBFF;
    --wbs-shadow-btn: 0 8px 20px -6px rgba(109, 94, 245, 0.4);
    --wbs-shadow-dropdown: 0 20px 40px -12px rgba(0, 0, 0, 0.18);

    --wbs-font-display: 'Space Grotesk', sans-serif;
    --wbs-font-body: 'Manrope', sans-serif;
}

/* Systemvorgabe (nur solange kein expliziter Toggle in localStorage steht —
   dann setzt das Theme-Toggle-Skript data-theme="light" explizit). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --wbs-bg: #14141A;
        --wbs-bg-rgb: 20, 20, 26;
        --wbs-surface: #1C1D26;
        --wbs-surface-raised: #22232E;
        --wbs-border: #2C2D3A;
        --wbs-text: #F1F0F5;
        --wbs-muted: #9A98A8;
        --wbs-input-bg: #20212B;
        --wbs-heading-dim: #7A7886;
        --wbs-logo-badge-bg: #F6F5F1;

        --wbs-active-tab-bg: var(--wbs-surface-raised);
        --wbs-shadow-dropdown: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
    }
}

/* Expliziter Toggle gewinnt in beide Richtungen. */
:root[data-theme="dark"] {
    --wbs-bg: #14141A;
    --wbs-bg-rgb: 20, 20, 26;
    --wbs-surface: #1C1D26;
    --wbs-surface-raised: #22232E;
    --wbs-border: #2C2D3A;
    --wbs-text: #F1F0F5;
    --wbs-muted: #9A98A8;
    --wbs-input-bg: #20212B;
    --wbs-heading-dim: #7A7886;
    --wbs-logo-badge-bg: #F6F5F1;

    --wbs-active-tab-bg: var(--wbs-surface-raised);
    --wbs-shadow-dropdown: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}

/* ── Basis ────────────────────────────────────────────────────────────── */
body.wbs {
    margin: 0;
    background: var(--wbs-bg);
    color: var(--wbs-text);
    font-family: var(--wbs-font-body);
    transition: background 0.3s, color 0.3s;
}

.wbs a { color: inherit; }
.wbs ::selection { background: var(--wbs-accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .wbs, .wbs * { animation: none !important; transition: none !important; }
}

@keyframes wbsFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes wbsPopIn {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Skip-Link (Barrierefreiheit) ────────────────────────────────────── */
.wbs-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 40;
    background: var(--wbs-surface);
    color: var(--wbs-text);
    border: 1px solid var(--wbs-border);
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.15s ease;
}
.wbs-skip-link:focus { top: 12px; }

/* ── WBCE-Website-Kopfzeile (Settings -> Website -> "Kopfzeile") ─────────
   Frei editierbares HTML aus WEBSITE_HEADER (page_header()), z. B. ein
   Hinweisbanner. Bewusst schlicht/neutral, da der Inhalt beliebig sein
   kann — keine Card-Optik wie beim eigentlichen Seiteninhalt. */
.wbs-website-header {
    background: var(--wbs-input-bg);
    border-bottom: 1px solid var(--wbs-border);
    padding: 10px 40px;
    font-size: 13.5px;
    text-align: center;
}
.wbs-website-header :last-child { margin-bottom: 0; }
.wbs-website-header :first-child { margin-top: 0; }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.wbs-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px 40px;
    background: rgba(var(--wbs-bg-rgb), 0.65);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    backdrop-filter: blur(5px) saturate(180%);
    border-bottom: 1px solid var(--wbs-border);
}

.wbs-topbar-left {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}

.wbs-brand { display: flex; align-items: center; }
.wbs-logo-badge {
    display: inline-flex;
    align-items: center;
    background: var(--wbs-logo-badge-bg);
    border: 1px solid var(--wbs-border);
    border-radius: 8px;
    padding: 3px 8px;
}
.wbs-logo-badge img {
    display: block;
    height: 24px;
    width: auto;
}

.wbs-nav-tabs {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.wbs-nav-tabs > li,
.nav-item { display: flex; position: relative; }
.nav-tab {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--wbs-muted);
    font-family: var(--wbs-font-body);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.nav-tab:hover { color: var(--wbs-text); }
.nav-tab.menu-current {
    background: var(--wbs-active-tab-bg);
    color: var(--wbs-accent);
    font-weight: 700;
}

/* Tabs mit Untermenue — zwei gleichwertige Wege, sie zu erkennen:
   1) Ohne JS: reines CSS-Pfeilchen per ::after auf dem Link.
   2) Mit JS (js-nav-enhanced, siehe theme-toggle.js): ein echter
      <button class="nav-caret-btn"> wird neben den Link gesetzt (nicht
      hineingeschachtelt — <button> darf laut HTML nicht in <a> liegen)
      und macht das Untermenue per Klick erreichbar, auch auf Touch-
      Geraeten ohne Hover. Die ::after-Deko wird dann ausgeblendet, damit
      nicht zwei Pfeile nebeneinander stehen. */
.nav-tab.menu-expand::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.nav-item:hover > .nav-tab.menu-expand::after,
.nav-item:focus-within > .nav-tab.menu-expand::after {
    transform: rotate(225deg) translateY(1px);
}
.js-nav-enhanced .nav-tab.menu-expand::after { display: none; }

.nav-caret-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: -6px;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.js-nav-enhanced .nav-caret-btn { display: inline-flex; }
.nav-caret-btn svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.nav-caret-btn:hover { background: var(--wbs-input-bg); }
.nav-item.is-open > .nav-caret-btn svg,
.nav-item:hover > .nav-caret-btn svg,
.nav-item:focus-within > .nav-caret-btn svg {
    transform: rotate(180deg);
}

/* Dropdown (Level 1): per CSS-Hover/:focus-within (ohne JS) UND per
   .is-open-Klasse (mit JS, Klick auf .nav-caret-btn — noetig fuer Touch-
   Geraete ohne Hover) eingeblendet. */
.wbs-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--wbs-surface-raised);
    border: 1px solid var(--wbs-border);
    border-radius: 14px;
    box-shadow: var(--wbs-shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 30;
}
.nav-item:hover > .wbs-nav-dropdown,
.nav-item:focus-within > .wbs-nav-dropdown,
.nav-item.is-open > .wbs-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.wbs-nav-dropdown li { list-style: none; }
.nav-dropdown-link {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wbs-text);
    text-decoration: none;
    white-space: nowrap;
}
.nav-dropdown-link:hover { background: var(--wbs-input-bg); }
.nav-dropdown-link.menu-current { color: var(--wbs-accent); font-weight: 700; }

/* ── Mobiles Hamburger-Menü: Basiszustand (per Default verborgen) ─────
   Compound-Selektor (.wbs-icon-btn.wbs-nav-toggle statt nur .wbs-nav-toggle)
   noetig: .wbs-icon-btn selbst setzt display:flex unconditional — bei
   gleicher Spezifitaet (je 1 Klasse) haette sonst zuletzt im Stylesheet
   IMMER "flex" gewonnen, egal ob die Media Query unten aktiv ist oder
   nicht (der Button war dadurch permanent sichtbar, auch oberhalb 880px,
   und dort ohne Wirkung, da die Nav dort per Default schon offen ist). */
.wbs-icon-btn.wbs-nav-toggle { display: none; }
.wbs-nav-toggle .icon-close { display: none; }
.wbs-nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.wbs-nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ── Mobile Navigation ────────────────────────────────────────────────
   Eigener, fruehzeitiger Breakpoint fuer die Navigation (unabhaengig vom
   allgemeinen 720px-Breakpoint weiter unten) — mit Logo + Hamburger +
   Icons wird die Topbar schon bei mittleren Breiten eng. Unterhalb davon:
   Hamburger sichtbar, #wbs-primary-nav wird zum Dropdown-Panel unter der
   Topbar, Tabs stapeln sich vertikal, Untermenues werden zum Akkordeon
   (kein Hover auf Touch-Geraeten — Anzeige nur noch ueber .is-open bzw.
   :focus-within/Tastatur). */
@media (max-width: 880px) {
    .wbs-topbar-left { gap: 14px; }
    .wbs-icon-btn.wbs-nav-toggle { display: flex; }
    .wbs-search { width: 160px; }

    #wbs-primary-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        background: var(--wbs-surface);
        border-bottom: 1px solid var(--wbs-border);
        box-shadow: var(--wbs-shadow-dropdown);
        padding: 8px 20px 16px;
    }
    #wbs-primary-nav.is-open { display: block; }

    .wbs-nav-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    /* .nav-item ist per Default (Desktop) ein Flex-Row-Container (Link +
       Pfeil-Button + Dropdown nebeneinander, siehe oben — der Dropdown
       haengt dort per position:absolute darueber, sitzt also NICHT
       wirklich in der Reihe). Mobil wird .wbs-nav-dropdown auf
       position:static umgestellt (kein schwebendes Panel mehr) — ohne
       Grid wuerde er dadurch als drittes Flex-Item einfach NEBEN Link und
       Pfeil-Button einsortiert. Grid mit benannten Bereichen loest das
       sauber: Link + Pfeil-Button in einer Zeile, Dropdown in der Zeile
       darunter ueber die volle Breite (Reihenfolge im DOM ist bei
       grid-template-areas irrelevant). */
    /* Selektor .wbs-nav-tabs > .nav-item statt nur .nav-item: die Basis-
       Regel oben ist ".wbs-nav-tabs > li, .nav-item { display:flex; ... }"
       — "> li" hat durch das zusaetzliche Element hoehere Spezifitaet
       (Klasse+Element) als ".nav-item" allein (nur Klasse) und gewinnt
       sonst IMMER, unabhaengig von der Reihenfolge im Stylesheet bzw. ob
       die Media Query aktiv ist. ".wbs-nav-tabs > .nav-item" (Klasse+
       Klasse) hat wieder mehr Gewicht als "> li" und setzt sich durch. */
    .wbs-nav-tabs > .nav-item {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "link caret" "sub sub";
        align-items: center;
        width: 100%;
    }
    .nav-tab { grid-area: link; padding: 12px 10px; }
    .nav-caret-btn { grid-area: caret; }

    /* Untermenues: Akkordeon statt schwebendem Panel, mit Einzug, kein
       Hover-Trigger auf Touch-Geraeten — nur .is-open (Klick) bzw.
       :focus-within (Tastatur) blenden ein. */
    .wbs-nav-dropdown {
        grid-area: sub;
        display: none;
        position: static;
        min-width: 0;
        margin: 2px 0 4px 14px;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .nav-item.is-open > .wbs-nav-dropdown,
    .nav-item:focus-within > .wbs-nav-dropdown {
        display: block;
    }
    .nav-dropdown-link { padding: 10px 12px; }
}

.wbs-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Suche (nur wenn SHOW_SEARCH — Einstellungen -> Allgemein -> Suche) ── */
.wbs-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--wbs-input-bg);
    border-radius: 10px;
    padding: 8px 12px;
    width: 220px;
    color: var(--wbs-muted);
}
.wbs-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.wbs-search-submit svg { width: 15px; height: 15px; opacity: 0.6; }
.wbs-search-submit:hover svg { opacity: 1; }
.wbs-search-input {
    border: none;
    background: transparent;
    outline: none;
    color: var(--wbs-text);
    font-family: var(--wbs-font-body);
    font-size: 13.5px;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.wbs-search-input::placeholder { color: inherit; opacity: 0.6; }

/* ── Icon-Buttons (Theme-Toggle, Login/Profil) ───────────────────────── */
.wbs-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--wbs-border);
    background: var(--wbs-surface);
    color: var(--wbs-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.wbs-icon-btn svg { width: 17px; height: 17px; }

/* Theme-Toggle: Icon zeigt das Ziel-Theme (Sonne = "zu Hell wechseln" im
   Dark-Mode, Mond = "zu Dunkel wechseln" im Light-Mode). */
.wbs-theme-toggle .icon-sun { display: none; }
.wbs-theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .wbs-theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .wbs-theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wbs-theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .wbs-theme-toggle .icon-moon { display: none; }
}

/* ── Login/Profil-Dropdown (nur bei FRONTEND_LOGIN) ──────────────────── */
.wbs-profile-wrap { position: relative; }
.wbs-avatar-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.wbs-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--wbs-accent), var(--wbs-accent-2));
    color: #fff;
    font-family: var(--wbs-font-display);
    font-weight: 700;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wbs-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    min-width: 190px;
    background: var(--wbs-surface-raised);
    border: 1px solid var(--wbs-border);
    border-radius: 14px;
    box-shadow: var(--wbs-shadow-dropdown);
    padding: 6px;
    animation: wbsPopIn 0.16s ease both;
    z-index: 30;
}
.wbs-dropdown[hidden] { display: none; }
.wbs-dropdown-header {
    padding: 10px 12px 8px;
}
.wbs-dropdown-header strong { display: block; font-size: 13px; font-weight: 700; }
.wbs-dropdown-header span { display: block; font-size: 12px; color: var(--wbs-muted); margin-top: 2px; }
.wbs-dropdown-divider { height: 1px; background: var(--wbs-border); margin: 4px 0; }
.wbs-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--wbs-text);
    cursor: pointer;
}
.wbs-dropdown-link:hover { background: var(--wbs-input-bg); }

/* ── Hauptinhalt ──────────────────────────────────────────────────────── */
.wbs-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 40px 80px;
}

.wbs-page-header {
    margin-bottom: 32px;
    animation: wbsFadeUp 0.5s ease both;
}
.wbs-eyebrow {
    color: var(--wbs-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.wbs-h1 {
    font-family: var(--wbs-font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.wbs-content-card {
    background: var(--wbs-surface);
    border: 1px solid var(--wbs-border);
    border-radius: 20px;
    padding: 28px 30px;
    animation: wbsFadeUp 0.6s ease both;
}
.wbs-content-card :first-child { margin-top: 0; }
.wbs-content-card :last-child { margin-bottom: 0; }
.wbs-content-card h2 {
    font-family: var(--wbs-font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.wbs-content-card a { color: var(--wbs-accent); font-weight: 600; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.wbs-footer {
    border-top: 1px solid var(--wbs-border);
    margin-top: 24px;
}
.wbs-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 40px 32px;
}
.wbs-footer-top {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 40px;
}
.wbs-footer-brand { max-width: 280px; }
.wbs-footer-brand .wbs-brand { margin-bottom: 14px; }
/* Block 2 (Footer-Text): WYSIWYG-Inhalt statt reinem Text, siehe index.php
   — kann mehrere Absaetze/Links enthalten, daher generische Kind-Regeln
   statt fixer Text-Formatierung. */
.wbs-footer-desc {
    color: var(--wbs-muted);
    font-size: 13.5px;
    line-height: 1.6;
}
.wbs-footer-desc :first-child { margin-top: 0; }
.wbs-footer-desc :last-child { margin-bottom: 0; }
.wbs-footer-desc a { color: var(--wbs-muted); text-decoration: underline; }
.wbs-footer-desc a:hover { color: var(--wbs-text); }
/* .wbs-social-row ist ein <ul> (show_menu2-Ausgabe, Menü 4), keine <div>
   mehr — list-style/margin/padding daher explizit zurueckgesetzt. */
.wbs-social-row {
    display: flex;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.wbs-social-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--wbs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--wbs-muted);
    text-decoration: none;
}
.wbs-social-btn:hover { color: var(--wbs-accent); border-color: var(--wbs-accent); }

/* Footer-Linkspalten: von show_menu2($aMenu=2) erzeugt (Top-Level = Spalten-
   Ueberschrift, 1 Ebene Kinder = Links) — siehe index.php. */
.wbs-footer-cols {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wbs-footer-col { list-style: none; }

.wbs-footer-heading {
    display: block;
    font-family: var(--wbs-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--wbs-heading-dim);
}
.wbs-footer-links {
    display: flex;
    flex-direction: column;
    gap: 11px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wbs-footer-links li { list-style: none; }
.wbs-footer-links a {
    color: var(--wbs-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.wbs-footer-links a:hover { color: var(--wbs-text); }

.wbs-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--wbs-border);
}
.wbs-copyright { color: var(--wbs-muted); font-size: 12.5px; margin: 0; }
.wbs-legal-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.wbs-legal-links a {
    color: var(--wbs-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.wbs-legal-links a:hover { color: var(--wbs-text); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .wbs-website-header { padding: 10px 20px; }
    .wbs-topbar { padding: 14px 20px; }
    .wbs-search { width: 120px; }
    .wbs-main { padding: 32px 20px 56px; }
    .wbs-footer-inner { padding: 40px 20px 24px; }
    .wbs-content-card { padding: 22px 20px; }
    .wbs-h1 { font-size: 26px; }
}