#hgsp-app {
  /* Standardwerte - werden durch die Admin-Einstellungen überschrieben */
  --hgsp-font: 'Albert Sans', sans-serif;
  --hgsp-text: #333333;
  --hgsp-heading: #222222;
  --hgsp-btn: #1d7f35;
  --hgsp-btn-hover: #156328;
  --hgsp-btn-text: #ffffff;

  width: 100%;
  max-width: 610px;
  margin: 0 auto;
  font-family: var(--hgsp-font);
  font-weight: 400;
  color: var(--hgsp-text);
  box-sizing: border-box;
  overflow-x: hidden;
}
/* Defensive Regeln gegen Theme-CSS, das Tabellen/Inputs verbreitert */
#hgsp-app table, #hgsp-app input, #hgsp-app select, #hgsp-app button {
  max-width: 100% !important;
  min-width: 0 !important;
}
#hgsp-app *, #hgsp-app *::before, #hgsp-app *::after { box-sizing: border-box; }
#hgsp-app h3 { color: var(--hgsp-heading); font-family: var(--hgsp-font); }

.hgsp-calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}
.hgsp-calendar-nav button {
  background: var(--hgsp-btn);
  color: var(--hgsp-btn-text);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--hgsp-font);
  font-size: 15px;
}
.hgsp-calendar-nav button:hover { background: var(--hgsp-btn-hover); }
#hgsp-month-label {
  flex: 1;
  text-align: center;
  font-weight: 600;
  background: transparent;
  color: var(--hgsp-heading);
  font-size: 17px;
}
#hgsp-month-label:hover { background: rgba(0,0,0,0.05); }

.hgsp-month-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.hgsp-month-chip {
  background: #f0f0f0;
  color: var(--hgsp-text);
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 3px 11px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: var(--hgsp-font);
}
.hgsp-month-chip:hover { background: #e2e2e2; }
.hgsp-chip-active {
  background: var(--hgsp-btn);
  color: var(--hgsp-btn-text);
  border-color: var(--hgsp-btn);
}
.hgsp-chip-active:hover { background: var(--hgsp-btn-hover); }

/* Transponierter Kalender: Tage als Zeilen, Plätze als Spalten -
   passt ohne horizontales Scrollen in jede Seitenbreite */
.hgsp-table {
  border-collapse: collapse !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  font-size: 12px;
  font-family: var(--hgsp-font);
  margin: 0 0 6px 0 !important;
  display: table !important;
}
.hgsp-table th, .hgsp-table td {
  border: 1px solid #ddd;
  text-align: center;
  padding: 3px 2px !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 24px;
  width: auto !important;
  min-width: 0 !important;
}
.hgsp-table thead th {
  background: #f7f7f7;
  font-weight: 600;
  font-size: 12px;
  color: var(--hgsp-heading);
}
.hgsp-daycol {
  width: 56px !important;
  text-align: left !important;
  padding-left: 6px !important;
  font-weight: 600;
  background: #fafafa;
}
tr.hgsp-weekend .hgsp-daycol { background: #f0ede5; }
tr.hgsp-today td { border-top: 2px solid var(--hgsp-btn); border-bottom: 2px solid var(--hgsp-btn); }
td.hgsp-free { background: #e6f4e1; }
td.hgsp-booked { background: #e57373; }
/* Anreisetag: untere rechte Hälfte rot (wie U+25E2) */
td.hgsp-arr { background: linear-gradient(135deg, #e6f4e1 50%, #e57373 50%); }
/* Abreisetag: obere linke Hälfte rot (wie U+25E4) */
td.hgsp-dep { background: linear-gradient(135deg, #e57373 50%, #e6f4e1 50%); }

/* Klickbare Zellen */
td[data-spot] { cursor: pointer; }
td[data-spot]:hover { outline: 2px solid var(--hgsp-btn); outline-offset: -2px; }
td.hgsp-past { cursor: default; opacity: 0.45; }

/* Auswahl des Nutzers (in Button-Farbe), kombinierbar mit belegten Halbtagen */
td.hgsp-sel-full { background: var(--hgsp-btn) !important; }
td.hgsp-sel-arr { background: linear-gradient(135deg, #e6f4e1 50%, var(--hgsp-btn) 50%) !important; }
td.hgsp-dep.hgsp-sel-arr { background: linear-gradient(135deg, #e57373 50%, var(--hgsp-btn) 50%) !important; }
td.hgsp-sel-dep { background: linear-gradient(135deg, var(--hgsp-btn) 50%, #e6f4e1 50%) !important; }
td.hgsp-arr.hgsp-sel-dep { background: linear-gradient(135deg, var(--hgsp-btn) 50%, #e57373 50%) !important; }
.hgsp-legend { margin-bottom: 6px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.hgsp-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid #ccc;
}
.hgsp-legend .hgsp-free { background: #e6f4e1; }
.hgsp-legend .hgsp-booked { background: #e57373; }
.hgsp-legend .hgsp-arr { background: linear-gradient(135deg, #e6f4e1 50%, #e57373 50%); }
.hgsp-legend .hgsp-dep { background: linear-gradient(135deg, #e57373 50%, #e6f4e1 50%); }
.hgsp-legend .hgsp-sel { background: var(--hgsp-btn); }

.hgsp-form { border-top: 2px solid #eee; padding-top: 8px; margin-top: 0; }
.hgsp-field {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 12px;
}
.hgsp-field-block { flex-direction: column; gap: 6px; }
.hgsp-field label { flex: 1 1 140px; min-width: 0; font-size: 14px; }
.hgsp-label { font-size: 14px; }
.hgsp-field input, .hgsp-field select {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--hgsp-font);
  font-size: 14px;
  color: var(--hgsp-text);
}
.hgsp-spot-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.hgsp-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  min-width: auto !important;
  flex: 0 0 auto !important;
}
.hgsp-checkbox input { width: auto !important; margin: 0 !important; }
.hgsp-checkbox-hint { font-size: 13px; color: #b26a00; min-height: 17px; }
.hgsp-hint-ok { color: #2e7d32; }

.hgsp-hp { display: none !important; }
.hgsp-form button[type="submit"] {
  background: var(--hgsp-btn);
  color: var(--hgsp-btn-text);
  border: none;
  padding: 11px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  font-family: var(--hgsp-font);
}
.hgsp-form button[type="submit"]:hover { background: var(--hgsp-btn-hover); }
.hgsp-form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
#hgsp-message {
  margin-top: 12px;
  font-size: 14px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.hgsp-success { color: #2e7d32; }
.hgsp-error { color: #c62828; }

@media (max-width: 600px) {
  .hgsp-field label { min-width: 100%; }
}

.hgsp-howto {
  background: #f4f7f2;
  border-left: 4px solid var(--hgsp-btn);
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 10px;
  border-radius: 0 4px 4px 0;
}
#hgsp-select-hint {
  font-size: 13.5px;
  color: #b26a00;
  margin: 0 0 4px 0;
}
#hgsp-select-hint:empty { display: none; }
.hgsp-summary {
  font-size: 14px;
  margin-bottom: 8px;
  margin-top: 0;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.hgsp-sel-list { margin: 6px 0 0 0; padding-left: 20px; }
.hgsp-sel-list li { margin-bottom: 4px; }
.hgsp-remove {
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 22px; height: 22px;
  line-height: 1;
  cursor: pointer;
  color: #c62828;
  font-size: 14px;
  padding: 0;
  vertical-align: middle;
}
.hgsp-remove:hover { background: #fbe9e7; border-color: #c62828; }
.hgsp-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hgsp-form button.hgsp-secondary {
  background: transparent;
  color: var(--hgsp-text);
  border: 1px solid #bbb;
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--hgsp-font);
}
.hgsp-form button.hgsp-secondary:hover { background: #f0f0f0; }
/* Etwas höhere Zeilen als Tippfläche auf dem Smartphone */
.hgsp-table th, .hgsp-table td { height: 27px; }

.hgsp-howto { margin: 0 0 10px 0; }
.hgsp-form h3 { margin: 0 0 10px 0; }
.hgsp-field { margin-bottom: 10px; }
#hgsp-app p, #hgsp-app div { margin-top: 0; }

/* ---------- Responsive: Smartphone Hochformat ---------- */
@media (max-width: 520px) {
  .hgsp-howto { font-size: 13px; padding: 8px 10px; }
  .hgsp-calendar-nav button { padding: 7px 12px; font-size: 14px; }
  #hgsp-month-label { font-size: 15px; }
  .hgsp-month-chip { padding: 4px 9px; font-size: 11.5px; }
  .hgsp-table { font-size: 10.5px; }
  .hgsp-table thead th { font-size: 10px; padding: 3px 1px !important; }
  .hgsp-daycol { width: 44px !important; font-size: 10.5px; padding-left: 4px !important; }
  /* grössere Tippfläche für die Auswahl per Finger */
  .hgsp-table th, .hgsp-table td { height: 32px; }
  .hgsp-legend { font-size: 12px; gap: 4px 10px; }
  .hgsp-summary { font-size: 13px; padding: 8px 10px; }
  .hgsp-sel-list { padding-left: 16px; }
  /* Formularfelder untereinander in voller Breite */
  .hgsp-field { gap: 8px; }
  .hgsp-field label { flex-basis: 100%; }
  .hgsp-actions { gap: 8px; }
  .hgsp-actions button { flex: 1 1 auto; }
}

.hgsp-summary *, #hgsp-select-hint, #hgsp-message, .hgsp-howto, .hgsp-howto * {
  white-space: normal !important;
  overflow-wrap: break-word;
}