/**
 * Frontend Stylesheet für TANZ-EVENT-MANAGER (Zentral gesteuert via CSS-Variablen)
 */

/* 1. Filter-Bar Styles */
.tem-filter-bar {
  background: var(--tem-light-bg, #f9fafb); /* Zentral gesteuert[cite: 12] */
  padding: 20px;
  border-radius: var(--tem-radius, 8px); /* Zentral gesteuert[cite: 12] */
  margin-bottom: 30px;
  border: 1px solid var(--tem-border-color, #e5e7eb); /* Zentral gesteuert[cite: 12] */
}
.tem-filter-form-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.tem-filter-field {
  flex: 1;
  min-width: 200px;
}
.tem-filter-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 14px;
}
.tem-filter-field select,
.tem-filter-field input[type="date"] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--tem-border-color, #e5e7eb); /* Zentral gesteuert[cite: 12] */
  border-radius: var(--tem-radius, 4px);
  background-color: #fff;
  box-sizing: border-box;
  height: 42px;
}

/* 2. Responsive Grid-Kartenlayout (Synchronisiert mit den PHP-Shortcodes) */
.tem-termin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}
.tem-termin-card {
  background: #fff;
  border: 1px solid var(--tem-border-color, #e5e7eb); /* Zentral gesteuert[cite: 12] */
  border-radius: var(--tem-radius, 8px); /* Zentral gesteuert[cite: 12] */
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.tem-termin-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.tem-termin-card h3 {
  font-size: 20px;
  margin: 0 0 12px 0;
  color: var(--tem-dark-bg, #111827); /* Zentral gesteuert[cite: 12] */
  font-weight: 700;
}
.tem-meta {
  margin-top: auto;
  background: var(--tem-light-bg, #f9fafb); /* Zentral gesteuert[cite: 12] */
  padding: 12px;
  border-radius: var(--tem-radius, 6px);
  font-size: 13.5px;
  margin-bottom: 15px;
}
.tem-meta p {
  margin: 4px 0;
  color: var(--tem-dark-bg, #111827);
}
.tem-content {
  font-size: 14px;
  color: var(--tem-text-muted, #6b7280); /* Zentral gesteuert[cite: 12] */
  line-height: 1.5;
  margin-bottom: 15px;
}
.tem-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--tem-dark-bg, #111827); /* Zentral gesteuert[cite: 12] */
  color: #fff !important;
  padding: 12px;
  border-radius: var(--tem-radius, 4px);
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s;
  box-sizing: border-box;
}
.tem-btn:hover {
  background: var(
    --tem-primary-color,
    #4f46e5
  ); /* Zentral gesteuert[cite: 12] */
}

/* 3. Anfragebox / Formular-Wrapper */
.tem-form-wrapper {
  background: #fff;
  padding: 25px;
  border: 1px solid var(--tem-border-color, #e5e7eb); /* Zentral gesteuert[cite: 12] */
  border-radius: var(--tem-radius, 8px); /* Zentral gesteuert[cite: 12] */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}
.tem-field {
  margin-bottom: 15px;
}
.tem-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 14px;
  color: var(--tem-dark-bg, #111827);
}
.tem-form-wrapper input[type="text"],
.tem-form-wrapper input[type="email"],
.tem-form-wrapper input[type="tel"],
.tem-form-wrapper input[type="number"],
.tem-form-wrapper textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--tem-border-color, #e5e7eb); /* Zentral gesteuert[cite: 12] */
  border-radius: var(--tem-radius, 4px);
  box-sizing: border-box;
  background: #fff;
  color: var(--tem-dark-bg, #111827);
}
.tem-btn-submit {
  background-color: var(
    --tem-primary-color,
    #4f46e5
  ); /* Zentral gesteuert[cite: 12] */
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-weight: bold;
  border-radius: var(--tem-radius, 4px);
  cursor: pointer;
  transition: background 0.2s;
}
.tem-btn-submit:hover {
  background-color: var(
    --tem-primary-hover,
    #4338ca
  ); /* Zentral gesteuert[cite: 12] */
}

/* Rückmeldungsmeldungen (Erfolg / Fehler) */
#tem-form-response {
  padding: 12px;
  border-radius: var(--tem-radius, 4px);
  margin-top: 15px;
  display: none;
  font-size: 14px;
}
.tem-msg-success {
  background: #dcfce7;
  color: #15803d;
  border-left: 4px solid #22c55e;
}
.tem-msg-error {
  background: #fee2e2;
  color: #b91c1c;
  border-left: 4px solid #ef4444;
}

/* 4. Filter-Buttons Funktionsebene */
.tem-filter-buttons-row {
  flex: 1 0 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-top: 15px !important;
  padding-top: 15px;
  border-top: 1px solid var(--tem-border-color, #e5e7eb); /* Zentral gesteuert[cite: 12] */
}
.tem-filter-buttons-row .tem-btn-reset {
  background-color: #e74c3c !important; /* Bewusstes Signal-Rot für "Löschen" beibehalten */
  color: #fff !important;
}
.tem-filter-buttons-row .tem-btn-reset:hover {
  background-color: #c0392b !important;
}

@media (max-width: 580px) {
  .tem-filter-buttons-row .tem-btn {
    width: 100% !important;
  }
}