/* ==========================================================================
   iappear.at – global.css
   CSS-Variablen, Reset, Typografie, Basisfarben
   ========================================================================== */

/* --- Schrift selbst hosten (kein Google Fonts -> DSGVO + Performance) ---
   Variable Font deckt alle Gewichte 100..900 in einer Datei ab. */
@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Variable.ttf") format("truetype-variations"),
       url("../assets/fonts/Roboto-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Variable-Italic.ttf") format("truetype-variations"),
       url("../assets/fonts/Roboto-Variable-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* TheSerif (LucasFonts) — selbst gehostet, DSGVO-konform.
   Wir laden nur 3 Schnitte, das reicht fuer alle Headlines:
   - HP5 Plain   = Regular (400)  -> H3, H4, kleinere Headlines
   - HP6 SemiBld = SemiBold (600) -> H2, Sektions-Ueberschriften
   - HP9 Black   = Black (900)    -> H1, Hero-Claim, fette Akzente
   Mehr Schnitte siehe assets/fonts-source/ — bei Bedarf nachladen. */
@font-face {
  font-family: "TheSerif";
  src: url("../assets/fonts/TheSerif-HP5Plain.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TheSerif";
  src: url("../assets/fonts/TheSerif-HP5PlainIT.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TheSerif";
  src: url("../assets/fonts/TheSerif-HP6SeBld.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TheSerif";
  src: url("../assets/fonts/TheSerif-HP9Blk.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --c-bg: #000000;
  --c-text: #ffffff;
  --c-text-muted: #bfbfbf;
  --c-border: #ffffff;
  --c-history: #D3A54A;   /* Gelb/Gold */
  --c-dentity: #769CA2;   /* Blau */
  --c-grow:    #8E9F6A;   /* Grün */

  /* Typografie */
  --f-sans: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --f-serif: "TheSerif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* Abstände */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;

  /* Layout */
  --maxw: 1280px;
  --radius: 999px;          /* für Outline-Pillen-Buttons */
  --radius-card: 18px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Glassy-Look — zentrale Stellschrauben fuer alle Glas-Komponenten
     (Buttons, Chips, Tags). Hier drehen = ueberall aendern. */
  --glass-bg: rgba(255,255,255,.06);           /* Hintergrund-Schimmer */
  --glass-border: rgba(255,255,255,.25);        /* Stroke-Transparenz (weiss) */
  --glass-shadow-top: rgba(0,0,0,.35);          /* Inner-Shadow oben (Tiefe) */
  --glass-shadow-bottom: rgba(0,0,0,.2);        /* Inner-Shadow unten */
  --glass-highlight: rgba(255,255,255,.12);     /* Licht-Kante oben am Stroke */
  --glass-glow: rgba(255,255,255,.04);          /* aeusserer Glow */
  --glass-blur: 12px;                           /* Backdrop-Blur */
  /* Hover-Zustand */
  --glass-bg-hover: rgba(255,255,255,.12);
  --glass-border-hover: rgba(255,255,255,.4);
  --glass-shadow-top-hover: rgba(0,0,0,.4);
  --glass-shadow-bottom-hover: rgba(0,0,0,.25);
  --glass-highlight-hover: rgba(255,255,255,.2);
  --glass-glow-hover: rgba(255,255,255,.08);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* Basis */
html { scroll-behavior: smooth; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typografie
   Headlines = TheSerif (LucasFonts), Body = Roboto.
   Weight-Mapping: H1=900 (Black), H2=600 (SemiBold), H3/H4=400 (Plain). */
h1, h2, h3, h4 { font-family: var(--f-serif); line-height: 1.15; margin: 0 0 var(--sp-2); }
h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 600; letter-spacing: .01em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }
h4 { font-weight: 400; }
p  { margin: 0 0 var(--sp-2); color: var(--c-text); }

.eyebrow { font-style: italic; color: var(--c-text-muted); font-size: .95rem; letter-spacing: .02em; }
.section-title { text-transform: uppercase; letter-spacing: .15em; }

/* Links in Prosa */
.prose a { border-bottom: 1px solid var(--c-text); }

/* Utility */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-3); }
.stack > * + * { margin-top: var(--sp-2); }
.muted { color: var(--c-text-muted); }
.center { text-align: center; }
.screen-reader-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Farb-Akzente */
.c-history { color: var(--c-history); }
.c-dentity { color: var(--c-dentity); }
.c-grow    { color: var(--c-grow); }