/* HINWEIS: styles_events.css ist die "bessere" Fassung einer css-Datei */

/* ==================================================
   1. Variablen & Grundlegende Einstellungen
   ================================================== */
 /*:root {
  --primary-color: #0066cc;
  --text-color: #333333;
  --font-base: 'Segoe UI', system-ui, sans-serif;
}  */

/* Reset-Regel: Setzt Abstände zurück und vereinheitlicht das Box-Modell */


* {
  box-sizing: border-box;  /* die Maße des Elements entsprechen den width-Werten (ohne Ränder etc.) */
  margin: 0;               /* Abstand außerhalb eines Elements - "drueckt benachbarte Elemente weg" */ 
  padding: 0;              /* Abstand innerhalb eines Elements zwischen Inhalt (Text, Bild )und Rahmen */
}

/* ==================================================
   2. Basis-Stile
   ================================================== */

body {                              /* ohne Punkt, da body keine Klasse ist */
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color:       #a70808;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;            /* keine "Verzierungen" oder Link-Unterstriche */
 
  /*margin: 24px;     */
  background-color: #f0f2f5;        /* sollte immer angegeben werden */
  background-image: url('bilder/hintergr_bt1.jpg');
  background-size: cover;           /* Seite komplett gefuellt; ggflls abgeschnitten */
  background-position: center;      
  background-attachment: fixed;     /* Bild scrollt nicht mit */
}

/* ==================================================
   3. Typography / Texte
   ================================================== */

h1 {
  margin-bottom: 0 rem;
  color: #e33232;
  font-size: 2rem;
  text-align: center;
}

h2 {
  margin-bottom: 1rem;
  color: #e33232;
  font-size: 1rem;
  text-align: center;}
 
h3{
  margin-bottom: -1rem;
  color: #a70808;
  font-size: 0.9rem;
  text-align: left;}

a {                               /* Link */
  color: #a70808;                 /* Farbe wie Haupttext */
  text-decoration: none;          /* keine Link-Unterstriche */
}

 hr {                             /* horizontale Linie */
  border: 0;
  border-radius: 10px;
  height: 10px;
  background: linear-gradient(to right, #ccc, #7c2a2a, #ccc);
  margin: 25px 10%;
}


/* ==================================================
   4. Layout
   ================================================== */

/*header, main, footer {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}  */

/* ==================================================
   5. Komponenten (z.B. Buttons)
   ================================================== */

.button1 {                       /* Ruecksprung Startseite */
  background-color:#fb1515;
  border: none;
  color: white;
  width: 185px;	
  padding: 3px 13px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  margin: 10px 15px;
  border-radius: 12px;
  cursor: pointer;         
}

.button2 {                      /* kleiner Info-button */
  background-color: #fb1515;
  border: none;
  color: white;
  width: 13px;	
  padding: 5px 21px;
  text-align: center;
  font-size: 14px;
  margin: 0px 0px;
  border-radius: 13px;
  cursor: pointer; }   

.button1, .button2:hover {
  background-color: #fb1515; /* Background color changes on hover */
}

/* ==================================================
   6. Responsive Design (Media Queries)
   ================================================== */

 /* --- Grid Container Setup --- */ 
.grid-container {
  display: grid;
  gap: 13px;
  /* max-width: 1037px; */
  margin: 20px 5%;
  align-items: center;

  /* Standard für Mobile: Nur 1 Spalte (Elemente untereinander) */
  grid-template-columns: 1fr;               /* Standard; kann entfallen */
}

  /* Ab Tablet/Desktop (768px): Wechsel zu 3-spaltiger Liste, jeweils gleiche Spaltenbreite */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);  /* kann entfallen, wenn gleiche Breite definiert ist */
  }
}

/* Styling der einzelnen Boxen */
.grid-item {
  background: rgba(0, 0, 0, 0.05); /* Dunkler Kontrast zum Bild */
  backdrop-filter: blur(10px);
  padding: 7px 20px;
  font-family: 'Open Sans', sans-serif;
  color: #760707;
  text-align: center;
  border-radius: 13px;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
            
.grid-item-bild img {       /* ohne img funktioniert Klasse nicht  */
  width: 100%; 
  height: auto; 
}