/* SchwimmPlan Wissens-Hub — shared design tokens & base styles.
   Same blue "swim" palette as the main landing page (index.html). */
:root{
  --al-lime-50:#eff6fb; --al-lime-100:#dcecf6; --al-lime-200:#bcdcef; --al-lime-300:#8ec5e6;
  --al-lime-400:#4c99c7; --al-lime-500:#3f88b5; --al-lime-600:#2b7fb0; --al-lime-700:#1f5f86;
  --al-navy-50:#eaeff3; --al-navy-100:#c7d4de; --al-navy-300:#6f8aa1; --al-navy-500:#3d5d78;
  --al-navy-700:#294762; --al-navy-900:#16273a;
  --al-ink-900:#0c0e10; --al-ink-800:#1a1d21; --al-ink-700:#2b2f35; --al-ink-500:#5c636c;
  --al-ink-400:#828a93; --al-ink-300:#aab0b8; --al-ink-200:#d6dade; --al-ink-100:#e9ebed; --al-ink-50:#f4f5f6;
  --al-white:#ffffff;

  --surface-page:var(--al-white); --surface-raised:var(--al-white); --surface-sunken:var(--al-ink-50);
  --surface-ink:var(--al-ink-900); --surface-navy:var(--al-navy-700); --surface-lime:#4c99c7;

  --text-strong:var(--al-ink-900); --text-body:var(--al-ink-700); --text-muted:var(--al-ink-500);
  --text-faint:var(--al-ink-400); --text-on-dark:var(--al-white); --text-on-lime:var(--al-ink-900);
  --text-accent:#2b7fb0;

  --border-subtle:var(--al-ink-100); --border-default:var(--al-ink-200); --border-strong:var(--al-ink-900);
  --border-lime:#4c99c7;

  --accent:#4c99c7; --accent-hover:#3f88b5; --accent-press:#2b7fb0; --accent-contrast:var(--al-ink-900);

  --status-success:#4f9d4a; --status-warning:#e0a325; --status-error:#d2483b; --status-info:var(--al-navy-500);

  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:'Inter', system-ui, sans-serif;

  --fs-overline:12px;
  --ls-display:-0.04em; --ls-heading:-0.02em; --ls-body:0em; --ls-overline:0.14em;

  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(12,14,16,0.06);
  --shadow-sm:0 2px 6px rgba(12,14,16,0.08);
  --shadow-md:0 8px 20px rgba(12,14,16,0.10);
  --shadow-lg:0 18px 40px rgba(12,14,16,0.14);
  --ring:0 0 0 3px rgba(76,153,199,0.45);

  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast:120ms; --dur:200ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);color:var(--text-body);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--al-navy-700);text-decoration:none}
a:hover{color:var(--accent-press)}
::selection{background:var(--al-lime-200);color:var(--al-ink-900)}

/* ---------- shared header/footer ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.site-header-inner{max-width:1200px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:22px}
.site-logo{display:flex;align-items:center;gap:11px}
.site-wordmark{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-0.04em;color:var(--al-ink-900)}
.site-wordmark span{color:var(--al-lime-600)}
.site-nav{display:flex;gap:22px;margin-left:14px}
.site-nav a{font-size:14px;font-weight:600;color:var(--text-body)}
.site-nav a.current{font-weight:700;color:var(--text-strong)}
.site-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (max-width:960px){.site-nav{display:none !important}}
@media (max-width:480px){.site-cta a:not(.btn){display:none !important}}
@media (max-width:400px){.site-header-inner{padding-left:14px;padding-right:14px}.site-cta{gap:0}}
@media (max-width:340px){.site-wordmark{font-size:16px}}

.site-footer{background:#16273a;color:#c7d4de}
.site-footer-inner{max-width:1200px;margin:0 auto;padding:56px 24px 32px}
.site-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.site-footer-col-title{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.site-footer-links{display:flex;flex-direction:column;gap:9px;font-size:14px}
.site-footer-links a{color:#c7d4de}
.site-footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;font-size:13px;color:#8ea6bd}

/* ---------- buttons / labels ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:700;letter-spacing:-0.01em;line-height:1;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-contrast);border:2px solid var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-contrast)}
.btn-secondary{background:transparent;color:var(--text-strong);border:2px solid var(--border-strong)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent-press)}
.btn-sm{padding:8px 14px;font-size:13px;height:36px;gap:6px}
.btn-md{padding:11px 18px;font-size:14.5px;height:44px;gap:8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:var(--fs-overline);font-weight:700;letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-accent)}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;display:inline-block}
.breadcrumb{font-size:13px;color:var(--text-faint)}
.breadcrumb a{color:var(--text-muted);font-weight:600}

/* ---------- feature list ---------- */
.hub-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.hub-list li{position:relative;padding-left:18px;font-size:15px;line-height:1.55;color:var(--text-body)}
.hub-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hub-list strong{color:var(--text-strong)}

/* ---------- hub index cards ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.hub-card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.hub-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.hub-card-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--al-lime-100);color:var(--al-lime-700);display:flex;align-items:center;justify-content:center}
.hub-card h3{margin:0;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-0.02em;color:var(--text-strong)}
.hub-card p{margin:0;font-size:14px;line-height:1.55;color:var(--text-muted)}
.hub-card-link{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--text-accent);display:inline-flex;align-items:center;gap:5px}

/* ---------- mockup shell (frames the example visuals) ---------- */
.mock-shell{background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:20px}
.mock-window{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.mock-titlebar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--al-ink-50);border-bottom:1px solid var(--border-subtle)}
.mock-dot{width:8px;height:8px;border-radius:50%}

/* ---------- prev/next footer nav ---------- */
.pagenav{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:32px;border-top:1px solid var(--border-subtle)}
.pagenav a{display:flex;flex-direction:column;gap:4px;max-width:45%;padding:14px 18px;border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.pagenav a:hover{border-color:var(--accent)}
.pagenav .dir{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint)}
.pagenav .label{font-size:14.5px;font-weight:700;color:var(--text-strong)}
.pagenav .next{margin-left:auto;text-align:right;align-items:flex-end}