/*  base.css  */


/* =====================================================================
   =============================== Fonts ================================
   ===================================================================== */

/* ======== Webfonts von google ======== (Quelle: https://fonts.googleapis.com/css2) */
/* Press Start 2P für 80er Arcade, VT323 für retro Terminal-Look */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* ======== Lokale font: Mittelalter ======== */
/* MordredBold -> mittelalterliche serif schrift (Rom + Mittelalter epochen) */
@font-face {
    font-family: "MordredBold";
    src: url("../fonts/mordred.bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

/* ======== Lokale font: 20er ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/@font-face/font-display) */
/* Momstypewriter -> typewriter look für die goldenen 20er */
@font-face {
    font-family: "Momstypewriter";
    src: url("../fonts/Momstypewriter.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* zeigt text sofort, font kommt später nach */
}


/* =====================================================================
   ============================= Root-Basis =============================
   ===================================================================== */

/* ======== CSS variablen (custom properties) ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/--*) */
/* globale design tokens -> sorgt für konsistentes theming über alle komponenten hinweg */
:root {
    /* font stack für typewriter (20er epoche) */
    --typewriter-stack: "Momstypewriter", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* header höhe -> wird für scroll offset berechnungen gebraucht (Quelle: https://www.w3schools.com/cssref/func_clamp.php) */
    --header-h: clamp(70px, 12vw, 108px);

    /* brand farben (türkis, gold, schwarz, beige) */
    --brand-turquoise: #6ef5ff;
    --brand-gold: #d8b46a;
    --brand-gold-2: #f1d79a;
    --brand-ink: #0f1012;
    --brand-ink-2: #15171a;
    --brand-paper: #f6f0e2;

    /* ui akzent farbe (standard türkis, wird per data-epoche überschrieben) */
    --ui-accent: var(--brand-turquoise);
    --ui-accent-soft: color-mix(in srgb, var(--brand-turquoise) 28%, transparent);

    /* text farben mit opacity -> macht hierarchie sichtbar */
    --text-primary: rgba(255,255,255,0.92);
    --text-secondary: rgba(255,255,255,0.72); /* gedimmt */
    --text: #fefefe;
    --muted: #b7c2d1; /* für hints + labels */

    /* globaler accent (pager buttons, zukunft epoche etc.) */
    --accent: #28c0ff;

    /* pager button farben (werden per data-epoche überschrieben) */
    --pager-accent: var(--accent);
    --pager-accent-soft: color-mix(in srgb, var(--accent) 35%, transparent);

    /* panel borders (cards, overlays) */
    --panel-border: rgba(255, 255, 255, 0.12);
    --border-soft: color-mix(in srgb, var(--ui-accent) 28%, transparent);

    /* radius, schatten, transitions */
    --shadow-soft: 0 18px 55px rgba(0,0,0,0.55);
    --shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
    --radius-soft: 16px;
    --radius-pill: 999px;
    --radius-xl: 32px;
    --transition: 250ms ease;

    /* epochen background (wird per epoche überschrieben) */
    --epoch-bg: none;

    /* padding buffer zwischen epochen (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/clamp) */
    --epoch-buffer: clamp(260px, 50vh, 620px);

    /* native form controls im dark mode (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/color-scheme) */
    color-scheme: dark;
}


/* =====================================================================
   ============================== HTML/Body =============================
   ===================================================================== */

/* ======== Volle höhe + smooth scroll ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior) */
/* smooth scroll für anchor links, overflow-x hidden verhindert horizontales scrollen auf mobile */
html, body {
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}


/* =====================================================================
   ================================ Reset ===============================
   ===================================================================== */

/* ======== Box sizing + mindestbreite ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/box-sizing) */
/* border-box für alle elemente -> padding/border zählt mit in width/height */
* {
    box-sizing: border-box;
    min-width: 0; /* verhindert overflow bei flex/grid children */
}

/* ======== Media standard ======== */
/* responsive images (max 100% breit), block für bessere margin kontrolle */
img {
    max-width: 100%;
    display: block;
}

/* ======== Forms: schrift + farbe ======== */
/* forms erben body font statt browser standard */
button,
input,
textarea {
    font: inherit;
    color: inherit;
}


/* =====================================================================
   ================================ Body ================================
   ===================================================================== */

/* ======== Body: farbe + text ======== */
/* schwarzer hintergrund, helle schrift, Inter als standard font */
body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
    background: #000;
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    transition: background 400ms ease, color 250ms ease;
    position: relative;
}

/* ======== Überschriften ======== */
/* serif font für headlines (Cormorant Garamond) statt body font */
h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ======== Links ======== */
/* türkiser link color, kein underline (kommt bei hover/focus) */
a {
    color: var(--accent);
    text-decoration: none;
}