/* style.css */

/* Roboto Regular */
@font-face {
  font-family: 'Roboto';
  /*src: url('./fonts/Roboto-Regular.woff2') format('woff2');*/
  src: url('./fonts/roboto-serif-v16-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto Bold */
@font-face {
  font-family: 'Roboto';
  /*src: url('./fonts/Roboto-Bold.woff2') format('woff2');*/
  src: url('./fonts/roboto-serif-v16-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.error-message {
	color: red;
  font-weight: bold;
}


body {
  font-family: 'Roboto', sans-serif;
  background: #ffffff;
  color: #1a1a1a;
}

header {
  background: #d32f2f;
  color: white;
  padding: 2rem 1rem;
  text-align: center;
}

/* style.css */

/* ... (Deine bestehenden CSS-Regeln) ... */

/* Stelle sicher, dass Überschriften, Paragraphen und die Card-Grid-Sektion
   innerhalb von <main> die volle Breite einnehmen */
main h2,
main p,
main section.card-grid, /* Die Sektion, die deine Karten enthält */
main section.gallery-grid { /* Auch für die Fotogalerie, wenn sie dieses Problem hat */
  grid-column: 1 / -1; /* Spanne von der ersten bis zur letzten verfügbaren Spalte */
}

/* Optional: Anpassungen für den Abstand nach den Überschriften und Paragraphen */
main h2 {
  margin-bottom: 0.5rem; /* Etwas Abstand unter der Überschrift */
}

main p {
  margin-bottom: 1.5rem; /* Etwas mehr Abstand unter dem Einleitungsparagraphen */
}

/* Entferne oder setze margin-top der card-grid und gallery-grid auf 0,
   damit die Abstände vom main-gap oder p-margin-bottom kontrolliert werden */
.card-grid {
  margin-top: 0; /* Wichtig, um doppelte Abstände zu vermeiden */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem; /* Abstand zwischen den Karten erhöht */
  /* margin-top bleibt bei 0 oder dem Wert, den du zuletzt gesetzt hast */	
}

.gallery-grid {
  margin-top: 0; /* Wichtig, um doppelte Abstände zu vermeiden */
  /* Die gap-Eigenschaft des 'main'-Elements sollte den Abstand zur vorherigen Zeile regeln */
}

/* ... (Der Rest deiner bestehenden CSS-Regeln) ... */
header h1 {
  font-size: 2rem;
}

header p {
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

.cta {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: white;
  color: #d32f2f;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
}



main {
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: auto;
}



.card-link {
  text-decoration: none;
  color: inherit;
}

.card {
  background: #03befc; /* Farbe hier geändert */
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: scale(1.03);
}

.card h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.card p {
  font-size: 0.95rem;
  color: #555;
}

.news-date {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 0.5rem; /* Abstand zwischen Datum und Text */
  display: block; /* Stellt sicher, dass es eine eigene Zeile einnimmt */
}

/* Anpassungen für Bilder in Karten (falls nicht schon allgemein definiert) */
.card img {
  width: 100%;
  height: auto; /* Oder feste Höhe mit object-fit: cover; wie im PHP-Code */
  border-radius: 8px;
  margin-bottom: 1rem;
}


footer {
  text-align: center;
  font-size: 0.9rem;
  padding: 1rem;
  color: #555;
}

footer a {
  color: #555;
  text-decoration: none;
  margin: 0 0.5rem;
}

footer a:hover {
  text-decoration: underline;
}

/* --- Responsive & Modern Styling for Dienstplan Table --- */

.dienstplan-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 15px;
}

.dienstplan-table {
  width: 100%;
  border-collapse: separate; /* Wichtig: borders not collapsed */
  border-spacing: 0 8px; /* Horizontaler Abstand 0, vertikaler Abstand 8px zwischen Zeilen */
  font-size: 0.9em;
  min-width: 100px;
}

.dienstplan-table th,
.dienstplan-table td {
  border: none; /* Keine individuellen Rahmen für Zellen */
  padding: 10px 8px;
  text-align: left;
}

.dienstplan-table th {
  background-color: #e0e0e0;
  color: #333;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid #c0c0c0; /* Eine Unterlinie für Header-Zellen */
}

/* Rahmen um jede Datenzeile und alternierende Zeilenfarben */
.dienstplan-table tbody .dienstplan-data-row { /* Selektor an neue Klasse angepasst */
  border: 1px solid #c0c0c0; /* Rahmen um die gesamte Zeile */
  border-radius: 4px; /* Optional: leicht abgerundete Ecken für die Zeilenrahmen */
  overflow: hidden; /* Stellt sicher, dass die border-radius korrekt angewendet wird */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Leichter Schatten, um die Zeilen zu "heben" */
  color: #000000;
}

.dienstplan-table tbody .dienstplan-data-row:nth-child(even) { /* Selektor an neue Klasse angepasst */
  background-color: #f2f2f2; /* Ein deutlicheres helles Grau für gerade Zeilen */
}

.dienstplan-table tbody .dienstplan-data-row:nth-child(odd) { /* Selektor an neue Klasse angepasst */
  background-color: #ffffff; /* Weiß für ungerade Zeilen */
}

.dienstplan-table tfoot .footer-row {
  background-color: #e6e6e6;
  color: #3f51b5;
  font-size: 1em;
  font-weight: bold;
}

.dienstplan-table tfoot .footer-row td {
    padding: 15px 8px;
    text-align: center;
    border-top: 1px solid #c0c0c0; /* Rahmen oben für Footer-Zellen */
}

/* Styling for the iFrame/Object within the main dienstplan.php content */
.dienstplan-content .dienstplan-container object,
.dienstplan-content .dienstplan-container iframe {
    max-width: 100%;
    height: 1000px;
    border: none;
}





/* style.css */

/* ... (bestehende CSS-Regeln, insbesondere die für .contact-form-container, input, textarea, etc.) ... */

/* --- Kontaktformular Styling --- */
.contact-form-container {
  max-width: 700px; /* Container etwas breiter machen für nebeneinander */
  margin: 2rem auto;
  padding: 2.5rem;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.contact-form .form-group {
  display: flex; /* Aktiviere Flexbox für die Gruppe */
  align-items: center; /* Zentriert Label und Input vertikal */
  margin-bottom: 1.5rem; /* Abstand zwischen den Formularfeldern */
}

.contact-form label {
  flex: 0 0 150px; /* Label nimmt feste Breite von 150px ein */
  margin-right: 1.5rem; /* Abstand zwischen Label und Input */
  margin-bottom: 0; /* Standard margin-bottom für labels auf 0 setzen, da Flexbox dies steuert */
  font-weight: bold;
  color: #333;
  font-size: 0.95rem;
  text-align: right; /* Label-Text rechtsbündig ausrichten */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  flex: 1; /* Eingabefelder nehmen den restlichen verfügbaren Platz ein */
  width: auto; /* width: 100% würde flex: 1 überschreiben */
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
  outline: none;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.submit-button {
  /* Bestehende Eigenschaften */
  display: block;
  width: 100%;
  padding: 1.2rem 2.0rem; /* Padding erhöht für mehr Höhe und Breite */
  background: #d32f2f; /* Feuerwehr-Rot */
  color: white;
  border: none;
  border-radius: 50px; /* Stark abgerundet für "runder" Effekt, kann auch 9999px sein */
  font-size: 1.2rem; /* Schriftgröße erhöht */
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; /* box-shadow hinzufügen */

  /* Zusätzliche Zentrierung und optionaler Max-Width */
  margin-left: auto;
  margin-right: auto;
  max-width: 350px; /* Optional: Button nicht zu breit machen, etwas erhöht */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Leichter Schatten für "Tiefe" */
}

.submit-button:hover {
  background-color: #b71c1c; /* Dunkleres Rot beim Hover */
  transform: translateY(-3px); /* Leichter "Heben"-Effekt, etwas stärker */
  box-shadow: 0 6px 12px rgba(0,0,0,0.3); /* Schatten beim Hover verstärken */
}

.required {
  color: #d32f2f;
  font-weight: bold;
}

.required-info {
    font-size: 0.85rem;
    color: #555;
    margin-top: 1rem;
    text-align: center; /* Info-Text auch zentrieren */
}


/* Anpassung für mobile Ansichten */
@media (max-width: 600px) {
  .contact-form .form-group {
    flex-direction: column; /* Staple Label und Input untereinander */
    align-items: flex-start; /* Labels linksbündig */
  }

  .contact-form label {
    flex: none; /* Keine feste Breite mehr */
    width: 100%; /* Label nimmt volle Breite ein */
    text-align: left; /* Labels linksbündig */
    margin-right: 0;
    margin-bottom: 0.5rem; /* Etwas Abstand unter dem Label */
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form textarea {
    width: 100%; /* Eingabefelder wieder volle Breite */
  }

  .submit-button {
    max-width: 100%; /* Button nimmt volle Breite auf kleinen Bildschirmen */
    font-size: 1.1rem; /* Schriftgröße auf Mobilgeräten etwas anpassen */
    padding: 1rem 1.5rem; /* Padding auf Mobilgeräten etwas anpassen */
  }
}

main .contact-form-container {
    grid-column: 1 / -1; /* Spanne über alle Grid-Spalten von main */
}



/* style.css */

/* ... (Alle deine bestehenden CSS-Regeln von oben) ... */

/* --- Neue Regeln für schönere List-Icons --- */

.members-list ul,
.report-list ul {
  list-style: none; /* Entfernt die Standard-Aufzählungszeichen */
  padding: 0; /* Entfernt den Standard-Padding der Liste */
  margin: 1.5rem 0; /* Optional: Abstand über und unter der Liste */
}

.members-list li,
.report-list li {
  padding-left: 35px; /* Platz für das Icon links des Textes */
  margin-bottom: 0.8rem; /* Abstand zwischen den Listenelementen */
  position: relative; /* Wichtig für die Positionierung des Icons */
  line-height: 1.5; /* Verbesserte Lesbarkeit */
  color: #333;
}

.members-list li::before,
.report-list li::before {
  content: ''; /* Erstellt ein Pseudo-Element für das Icon */
  position: absolute;
  left: 0; /* Positioniert das Icon ganz links */
  top: 50%; /* Vertikal zentriert */
  transform: translateY(-50%); /* Exakte vertikale Zentrierung */
  width: 25px; /* Breite des Icon-Bereichs */
  height: 25px; /* Höhe des Icon-Bereichs */
  background-image: url('fire_icon.png'); /* Pfad zu deinem Icon-Bild */
  background-size: contain; /* Passt das Bild an die Größe des Containers an */
  background-repeat: no-repeat; /* Verhindert Wiederholung */
  background-position: center; /* Zentriert das Bild im Bereich */
}

/* Optional: Anpassungen für Links innerhalb der Listen (z.B. bei Jahresberichten) */
.report-list li a {
  text-decoration: none;
  color: #d32f2f; /* Linkfarbe auf Feuerwehr-Rot setzen */
  font-weight: bold;
  transition: color 0.2s ease;
}

.report-list li a:hover {
  color: #b71c1c; /* Dunkleres Rot beim Hover */
  text-decoration: underline;
}

/* Stelle sicher, dass diese Listen auch die volle Breite im Grid einnehmen */
main .members-list,
main .report-list {
    grid-column: 1 / -1; /* Spanne über alle Grid-Spalten von main */
}

/* Optional: Anpassung für Überschrift vor den Listen */
main h3 {
    margin-top: 1.5rem; /* Etwas mehr Abstand über H3 */
    margin-bottom: 1rem; /* Abstand unter H3 */
    grid-column: 1 / -1; /* Auch H3 volle Breite im Grid */
}