/* ==========================================================================
   base.css — reset, page layout, typography, shared utilities.
   Requires theme.css.
   ========================================================================== */

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-lighter) 100%);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: var(--font-base);
    line-height: var(--line-height-base);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flow-root;   /* keeps main's top margin inside body, so absolutely positioned
                             elements (language switch) are measured from the page top */
}

/* ── Page layout ── */
main {
    position: relative;
    z-index: 1;
    max-width: var(--page-width);
    margin: var(--page-margin-y) auto;
    padding: 0 var(--page-gutter);
}

/* ── Typography ── */
h1 {
    font-size: var(--font-h1);
    font-weight: 700;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
    line-height: 1;
    padding-bottom: 0.2em;
}
h2 {
    font-size: var(--font-h2);
    font-weight: 600;
    color: var(--text-main);
}
p, li, a, code { font-size: var(--font-base); color: var(--text-dim); }
p { margin-bottom: var(--space-xs); }

a {
    color: var(--accent);
    text-decoration: none;
    transition: text-shadow var(--duration-fast) ease;
}
a:hover { text-shadow: 0 0 30px var(--accent); }

ul { list-style-type: none; margin-bottom: var(--space-lg); }
li { position: relative; padding-left: var(--space-lg); }
li::before { content: "▹"; position: absolute; left: 0; color: var(--accent); }

/* ── Utilities ── */
.illuminated {
    color: var(--accent);
    text-shadow: var(--text-glow);
    font-weight: 600;
}
.illuminated-bold {
    color: var(--accent);
    text-shadow: var(--text-glow);
    font-weight: 700;
}

/* Small mono label above headings, e.g. "// Anbieterkennzeichnung" */
.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-small);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    opacity: 0.75;
    margin-bottom: 0.6rem;
}