/* JGR Theme – Global / Typography
   Enthält CSS-Custom-Properties, body-Basis und Links.
   Wird nach reset.css und VOR layout.css geladen. */

/* Google Fonts werden per @import geladen damit ClanSphere keinen
   zusätzlichen <link> braucht. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Condensed:wght@400;700&family=Inter:wght@400;500;700;800&display=swap');

/* ── CSS CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
    --sky:            #29B6F6;
    --skybright:      #81D4FA;
    --skydark:        #0277BD;
    --midnight:       #001A6E;
    --deep:           #001050;
    --gold:           #FFCC00;
    --goldlight:      #FFE566;
    --orange:         #FF8E44;
    --crimson:        #E53935;
    --tx1:            #FFFFFF;
    --tx2:            #C2E4FF;
    --tx3:            #7AAFCC;
    --glass:          rgba(255,255,255,0.10);
    --glass-hi:       rgba(255,255,255,0.18);
    --glass-border:   rgba(255,255,255,0.22);
    --glass-border-lo:rgba(255,255,255,0.10);
    --fh:             'Roboto Condensed', Arial Narrow, sans-serif;
    --fi:             'Inter', Arial, sans-serif;
    --radius:         10px;
    --card-shadow:    0 4px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* ── HTML / BODY ───────────────────────────────────────────────── */
html {
    background: #000d2e;
    scroll-behavior: smooth;
    color-scheme: dark;
}

body {
    color: var(--tx1);
    font-family: var(--fi);
    font-size: 13px;
    line-height: 1.5;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 12%  0%,  rgba(60,160,240,0.28)  0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 88%  5%,  rgba(100,190,255,0.16) 0%, transparent 55%),
        radial-gradient(ellipse 50% 35% at 50% 55%,  rgba(20,120,210,0.08)  0%, transparent 65%),
        radial-gradient(ellipse 70% 55% at 20% 100%, rgba(0,10,60,0.70)     0%, transparent 70%),
        linear-gradient(155deg, #004aaa 0%, #003890 18%, #001f6e 40%, #000e50 60%, #002880 80%, #0048a8 100%);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

/* ── LINKS ─────────────────────────────────────────────────────── */
a:link, a:visited {
    color: var(--tx2);
    text-decoration: none;
    outline: none;
}
a:hover { color: var(--gold); text-decoration: none; }

/* ── SELECTION ─────────────────────────────────────────────────── */
::selection        { background: var(--skydark); color: #fff; text-shadow: none; }
::-moz-selection   { background: var(--skydark); color: #fff; text-shadow: none; }

/* ── HEADINGS (Basis – werden in content.css überschrieben) ────── */
h1 { font-family: var(--fh); font-size: 2em;   font-weight: 700; color: var(--tx1); }
h2 { font-family: var(--fh); font-size: 1.5em;  font-weight: 700; color: var(--tx2); }
h3 { font-family: var(--fh); font-size: 1.25em; font-weight: 700; color: var(--tx2); }
h4 { font-family: var(--fh); font-size: 1.1em;  font-weight: 700; color: var(--tx2); }
h5, h6 { font-family: var(--fh); font-size: 1em; font-weight: 700; color: var(--tx3); }

/* ── CLEAR FLOAT HELPER ────────────────────────────────────────── */
.clear::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; }
.clear { display: block; }