/************************************
*   Modernes Theme - Kalender + Form
************************************/

/* Grundschrift – neutral, modern */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 12px;
  color: #1f2933;
  background-color: transparent;
}

/* Links */
a:link,
a:visited {
  color: #2563eb;
  text-decoration: none;
}

a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* ---------------------------------
   KALENDER (#calendar)
   --------------------------------- */

#calendar {
  font-size: 11px;
  color: #1f2933;
  line-height: 1.4;
  padding: 10px 0;
  text-align: center;
  margin: 0 auto;
}

/* Kalender-Tabelle */
#calendar table {
  margin: 0 auto;
  border-collapse: collapse;
  max-width: 900px;
  width: 100%;
}

/* Zellen */
#calendar th,
#calendar td {
  padding: 3px 4px;
  border: 1px solid #e5e7eb;
  text-align: center;
}

/* Kopf */
#calendar th {
  font-weight: 600;
  background: #f9fafb;
  color: #374151;
}

/* Jahresanzeige */
#calendar .calyear {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

/* Wochentage */
#calendar td.weekday {
  font-weight: 600;
  color: #4b5563;
  background-color: #f3f4f6;
}

/* Freie Tage */
#calendar td.free_day {
  background-color: #ecfdf3;
  color: #166534;
}

/* Heute frei */
#calendar td.current_day {
  background-color: #22c55e;
  color: #ffffff;
  font-weight: 600;
}

/* BELEGT (alle Varianten) */
#calendar td.occupied_day,
#calendar td.occupied_today,
#calendar td.occupied_start_today,
#calendar td.occupied_end_today,
#calendar td.occupied_startday,
#calendar td.occupied_endday,
#calendar td.change_day,
#calendar td.shift_occupied_preoccupied {
  background-color: #f97373;
  color: #ffffff;
}

/* VORRESERVIERT (alle Varianten) */
#calendar td.preoccupied_day,
#calendar td.preoccupied_today,
#calendar td.preoccupied_start_today,
#calendar td.preoccupied_end_today,
#calendar td.preoccupied_startday,
#calendar td.preoccupied_endday,
#calendar td.preoccupied_change_day,
#calendar td.shift_preoccupied_occupied {
  background-color: #facc15;
  color: #78350f;
}

/* Ferien (frei) */
#calendar td.vacation_day,
#calendar td.vacation_today {
  background-color: #dbeafe;
  color: #1d4ed8;
}

/* Belegt + Ferien */
#calendar td.occupied_vacation_day,
#calendar td.occupied_vacation_startday,
#calendar td.occupied_vacation_endday {
  background-color: #f97373;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #60a5fa;
}

/* Vorreserviert + Ferien */
#calendar td.preoccupied_vacation_day,
#calendar td.preoccupied_vacation_startday,
#calendar td.preoccupied_vacation_endday {
  background-color: #facc15;
  color: #78350f;
  box-shadow: inset 0 0 0 1px #60a5fa;
}

/* Vergangene Tage */
.pastday {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Legende unten */
#calendar tfoot td {
  border-top: none;
  font-size: 11px;
  color: #6b7280;
}

/* ---------------------------------
   FORMULAR (Buchungsanfrage)
   gleiche Datei wie Kalender
   --------------------------------- */

/* Oberste Formular-Tabelle in ein 2-Spalten-Grid verwandeln */
body > table {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: separate !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px;
  padding: 16px 18px;
  box-sizing: border-box;
}

/* Zeilen „auflösen“ */
body > table tr {
  display: contents !important;
}

/* Kopfzeile (Titel) über volle Breite */
body > table tr:first-child td {
  grid-column: 1 / -1 !important;
  padding: 0 0 12px 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827;
  background: transparent !important;
  border: none !important;
}

/* Label-Zelle (erste Spalte) */
body > table td:first-child {
  text-align: left !important;
  padding: 0 0 4px 0 !important;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

/* Input-Zelle (zweite Spalte) */
body > table td:last-child {
  padding: 0 0 8px 0 !important;
}

/* Eingabefelder */
body > table input[type="text"],
body > table input[type="email"],
body > table input[type="tel"],
body > table input[type="password"],
body > table select,
body > table textarea {
  width: 100% !important;
  max-width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: #111827;
  box-sizing: border-box;
}

/* Textarea */
body > table textarea {
  min-height: 80px;
  resize: vertical;
}

/* Checkbox */
body > table input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
  transform: translateY(1px);
}

/* Checkbox-/Datenschutz-Zeilen über volle Breite */
body > table td[colspan] {
  grid-column: 1 / -1 !important;
}

/* Datenschutztext etwas kleiner */
body > table td[colspan] {
  font-size: 12px;
  line-height: 1.4;
  color: #4b5563;
}

/* Button-Zeile über volle Breite, zentriert */
body > table tr:last-child td {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding-top: 8px !important;
}

/* Submit-Button */
input[type="submit"],
button[type="submit"] {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #2563eb;
  color: #ffffff;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #1d4ed8;
}

input[type="submit"]:active,
button[type="submit"]:active {
  transform: translateY(1px);
}

/* Hinweis unten ("Belegungsplan und Buchungsformular…") */
body > p,
body > div.footer {
  margin-top: 8px;
  font-size: 11px;
  color: #6b7280;
  text-align: center;
}

/* ---------------------------------
   RESPONSIVE – TABLET & MOBILE
   --------------------------------- */

/* Tablet: Kalender leicht runter skalieren, Formular bleibt 2-spaltig */
@media (max-width: 1024px) {
  #calendar {
    transform: scale(0.9);
    transform-origin: top center;
  }
}

/* Handy: Kalender noch etwas kleiner, Formular 1-spaltig */
@media (max-width: 700px) {
  /* Kalender-Skalierung */
  #calendar {
    transform: scale(0.8);
    transform-origin: top center;
  }

  /* Formular einspaltig */
  body > table {
    grid-template-columns: 1fr !important;
    padding: 14px 14px;
  }

  body > table td:first-child {
    padding-bottom: 4px !important;
  }

  body > table td:last-child {
    padding-bottom: 12px !important;
  }

  body > table tr:last-child td {
    text-align: center !important;
  }
}

/* Sehr schmale Phones */
@media (max-width: 420px) {
  #calendar {
    transform: scale(0.75);
    transform-origin: top center;
  }
}