@import "tailwindcss";

@theme {
  /* Deine Farben - fest definiert damit nichts kaputt geht */
  --color-brand-light: #4D8F4E;
  --color-brand: #2E5F31;
  --color-brand-dark: #1e4b20;
  
  --color-copy: #333333;
  --color-copy-light: #4b5563;
  
  --color-page: #FFFFFF;
  --color-page-light: #F1F1F1;

  /* Deine Schriftart */
  --font-sans: "Inter", sans-serif;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter-v20-latin-800.woff2') format('woff2');
}

/* HIER ist der dunkle Hintergrund für dein Startbild */
/* Ich habe ihn auf 70% Dunkelheit (0.7) gestellt, damit der Text knallt */
.hero-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%);
    position: absolute;
    inset: 0;
    z-index: 10;
}