/* --------------------------------------------------
   CONFIG – Farben, Typo, Timings
-------------------------------------------------- */

:root {
  --fg: #fff;
  --bg: #000;
  --overlay: rgba(0,0,0,0.0);
  --max-width: 900px;
  --text-shadow: 0 2px 6px rgba(0,0,0,0.55);
  --font-scale: 3.85;
  --shadow-rgb: 255, 255, 255; /* nur RGB */

  /* Timing */
  --t-bg:        10.0s; /* fading-time-bg */
  
  /* Timing intro ani*/
  --t-bg:        2.0s;
  --t-h1:        0.0s;
  --t-p1:        2.5s;
  --t-p2:        3.0s;
  --t-p3:        3.5s;
  --t-showcase-title: 4.5s;
  --t-s1:   5.0s;
  --t-s2:   5.5s;
  --t-s3:   6.0s;
  --t-s4:   6.5s;
  --t-net:  8.0s;
  --t-n1:   8.2s;
  --t-n2:   8.4s;
  --t-n3:   8.6s;
  --t-n4:   8.8s;
  --t-n5:   9.0s;


}

/* Fonts */
@font-face {
  font-family: "headlines";
  src: url("/inc/fonts/RubikVinyl-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "content";
  src: url("/inc/fonts/SyneMono-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Global Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "content", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-shadow: var(--text-shadow);
}

h1, h2, h3, h4 {
  letter-spacing: 0.5px;
  font-family: "headlines", sans-serif;
}

h1 {
  font-size: calc(3em * var(--font-scale));
}
@media (max-width: 600px) {
  h1 {
    font-size: calc(1.0em * var(--font-scale));
  }
}
h2, h3 {
  margin-bottom: 1rem;
  opacity: 0;
}
h4 {
  font-size: calc(0.5em * var(--font-scale));
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  h4 {
    font-size: calc(0.3em * var(--font-scale));
  }
}
a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }