/* =========================================
das ist meine index.css

   1) BASE & TOKENS
   ========================================= */

/* Design Tokens */
:root {
  --header-height: 150px;
  --accent: rgba(255, 155, 0, 1);
  --accent-2: rgba(205, 85, 0, 1);
  /* --text-accent: rgba(255, 105, 0, 1); */
  --text-accent: rgba(238, 238, 238, 1);
  --text-accent_headlines: rgba(255, 184, 69, 1);
  --bg-dark: rgba(60, 60, 60, 1);
  --bg-light: rgba(255, 245, 225, 1);
  --content-gap-top: 16px;
  --content-gap-bottom: 16px;
  
  /* NEU: Footer-Höhe (anpassbar) */
  --footer-height: 56px;
}

/* Basis-Reset */
html, body {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
/* height: 100%; */
}

/* Farbmodi */
body.light {
  background-color: var(--bg-light);
  color: var(--text-accent);
}
body.dark {
  background-color: var(--bg-dark);
  color: var(--text-accent);
}
body.dark h1,
body.dark h2,
body.dark h3 {
  color: var(--text-accent_headlines);
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Platz nach unten, damit der fixed Footer nichts überdeckt */
#content {

  padding-top: var(--content-gap-top);
  padding-bottom: calc(var(--footer-height) + var(--content-gap-bottom));

}