/* styles.css */

/* 1. Fonts */
@font-face {
  font-family: 'Garet';
  src: url('fonts/Garet-Book.woff2') format('woff2'),
       url('fonts/Garet-Book.woff') format('woff');
}
@font-face {
  font-family: 'LT Afficher';
  src: url('fonts/LTAfficher-Display.woff2') format('woff2'),
       url('fonts/LTAfficher-Display.woff') format('woff');
}

/* 2. Farben */
:root {
  --rostrot: #b37250;
  --graublau: #a8b4b1;
  --beige:   #f0e5d1;
}

/* 3. Body: kein Scrollen, Vollbild */
* {
  margin: 0; padding: 0; box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;              /* kein Scrollen */
  background: var(--beige);
  display: flex;
  flex-direction: column;
  justify-content: center;       /* vertikal zentrieren */
  align-items: center;           /* horizontal zentrieren */
  font-family: 'Garet', sans-serif;
  color: var(--graublau);
}

/* 4. Animation für den Text */
@keyframes pulse {
  0%, 100%   { transform: scale(1); }
  50%        { transform: scale(1.05); }
}
.intro {
  text-align: center;
  font-size: 2rem;
  animation: pulse 5s ease-in-out infinite;  /* sanftes Pulsieren */
}

/* Highlight */
.highlight {
  font-family: 'LT Afficher', sans-serif;
  font-size: 2.5rem;
  color: var(--rostrot);
}

/* 5. Footer */
footer {
  position: absolute;
  bottom: 1rem;
  font-size: 0.8rem;
  color: var(--graublau);
}