/* =============================================================
   Kaisergarten Kalender – Frontend-Stylesheet v1.0
   Präfix: kgc-

   Farbpalette (Corporate Design Kaisergarten):
     Grün       #2e4f40  Hauptfarbe Glut & Gloria / Restaurant (geöffnet)
     Dunkelrot  #9b1828  Hauptfarbe Festsaal (Events)
     Dunkelblau #00385c  Hauptfarbe Hotel (Navigation, Akzente)
     Beige      #d5bfa0  Akzentfarbe Kaisergarten (Tagesangebote)
     Schwarz    #000000  Logo

   Schrift: Source Sans Pro, Arial, sans-serif
   ============================================================= */

/* -----------------------------------------------------------------
   Box-Sizing
   ----------------------------------------------------------------- */
.kgc-calendar,
.kgc-calendar *,
.kgc-calendar *::before,
.kgc-calendar *::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------
   Kalender-Wrapper
   ----------------------------------------------------------------- */
.kgc-calendar {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 20px 16px 16px;
  box-shadow: 0 2px 20px rgba(0, 56, 92, 0.12);
}

/* -----------------------------------------------------------------
   Monatsnavigation
   ----------------------------------------------------------------- */
.kgc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 18px;
}

.kgc-prev,
.kgc-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #00385c;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
  color: #00385c;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.kgc-prev:hover,
.kgc-next:hover {
  background: #00385c;
  color: #fff;
  text-decoration: none;
}

.kgc-prev.kgc-disabled {
  opacity: 0.22;
  pointer-events: none;
  cursor: default;
}

.kgc-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #00385c;
  text-align: center;
  letter-spacing: 0.01em;
}

/* -----------------------------------------------------------------
   Kalender-Tabelle
   ----------------------------------------------------------------- */
.kgc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.kgc-wday {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  padding: 0 2px 12px;
  color: #00385c;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
}

.kgc-td {
  padding: 3px 2px;
  text-align: center;
  vertical-align: top;
}

.kgc-empty {
  background: transparent;
}

.kgc-table tbody tr + tr td {
  border-top: 1px solid rgba(0, 56, 92, 0.06);
}

/* -----------------------------------------------------------------
   Tag-Button – Grundform
   ----------------------------------------------------------------- */
.kgc-day {
  width: 100%;
  border: none;
  background: transparent;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 5px 2px 6px;
  border-radius: 8px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  min-height: 50px;
  position: relative;
  transition: background 0.12s;
}

/* -----------------------------------------------------------------
   Tages-Zahl – farbiger Kreis
   ----------------------------------------------------------------- */
.kgc-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.12s, color 0.12s, transform 0.12s;
  flex-shrink: 0;

  /* Standard: geschlossen – helles Rot */
  background: #f5d0d4;
  color: #9b1828;
}

/* Öffnungszeit-Hinweis */
.kgc-hint {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #2e4f40;
}

/* -----------------------------------------------------------------
   Zustand: Geöffnet – grüner Kreis
   ----------------------------------------------------------------- */
.kgc-day.open .kgc-num {
  background: #d4e5de;
  color: #2e4f40;
}

.kgc-day.open .kgc-hint {
  color: #2e4f40;
}

.kgc-day.open.kgc-clickable {
  cursor: pointer;
}

.kgc-day.open.kgc-clickable:hover .kgc-num {
  background: #2e4f40;
  color: #fff;
  transform: scale(1.08);
}

.kgc-day.open.kgc-clickable:hover .kgc-hint {
  color: #2e4f40;
}

/* -----------------------------------------------------------------
   Zustand: Geschlossener Tag (klickbar wenn Grund)
   ----------------------------------------------------------------- */
.kgc-day.closed.kgc-clickable {
  cursor: pointer;
}

.kgc-day.closed.kgc-clickable:hover .kgc-num {
  background: #9b1828;
  color: #fff;
  transform: scale(1.08);
}

/* -----------------------------------------------------------------
   Zustand: Event – dunkelroter Kreis (Festsaal-Farbe)
   ----------------------------------------------------------------- */
.kgc-day.kgc-has-event .kgc-num {
  background: #9b1828;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(155, 24, 40, 0.25);
}

.kgc-day.kgc-has-event .kgc-hint {
  color: #9b1828;
  font-weight: 800;
}

.kgc-day.kgc-has-event {
  cursor: pointer;
}

.kgc-day.kgc-has-event:hover .kgc-num {
  background: #7a1020;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(155, 24, 40, 0.35);
}

/* -----------------------------------------------------------------
   Zustand: Tagesangebot – beiger Kreis (überlagert Geöffnet-Grün)
   ----------------------------------------------------------------- */
.kgc-day.kgc-has-offer .kgc-num {
  background: #d5bfa0;
  color: #5a4a30;
}

.kgc-day.kgc-has-offer .kgc-hint {
  color: #7a6040;
}

.kgc-day.kgc-has-offer.kgc-clickable:hover .kgc-num {
  background: #b8a080;
  color: #3a2a10;
  transform: scale(1.08);
}

/* -----------------------------------------------------------------
   Heute – immer Dunkelblau (außer Event)
   ----------------------------------------------------------------- */
.kgc-day.kgc-today:not(.kgc-has-event) .kgc-num {
  background: #00385c;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 56, 92, 0.40);
}

/* -----------------------------------------------------------------
   Vergangene Tage
   ----------------------------------------------------------------- */
.kgc-day.past {
  opacity: 0.30;
  cursor: default;
  pointer-events: none;
}

.kgc-day.past.kgc-has-event {
  opacity: 0.45;
  pointer-events: auto;
  cursor: pointer;
}

/* -----------------------------------------------------------------
   Legende
   ----------------------------------------------------------------- */
.kgc-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 4px 2px;
  font-size: 0.82rem;
}

.kgc-leg {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #333;
  font-weight: 600;
}

.kgc-leg::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kgc-leg--open::before   { background: #2e4f40; }
.kgc-leg--closed::before { background: #f5d0d4; border: 2px solid #9b1828; }
.kgc-leg--event::before  { background: #9b1828; box-shadow: 0 0 0 2px rgba(155,24,40,0.3); }
.kgc-leg--offer::before  { background: #d5bfa0; }

/* -----------------------------------------------------------------
   Lade-Zustand (AJAX)
   ----------------------------------------------------------------- */
.kgc-calendar.kgc-loading {
  opacity: 0.55;
  pointer-events: none;
}

/* -----------------------------------------------------------------
   Modal-Overlay
   ----------------------------------------------------------------- */
.kgc-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 56, 92, 0.55);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* -----------------------------------------------------------------
   Modal-Box
   ----------------------------------------------------------------- */
.kgc-modal-inner {
  background: #fff;
  border-radius: 12px;
  padding: 30px 28px 26px;
  width: 100%;
  max-width: 420px;
  position: relative;
  border-top: 5px solid #00385c;
  box-shadow: 0 16px 56px rgba(0, 56, 92, 0.30);
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.kgc-modal-inner.kgc-accent--open   { border-top-color: #2e4f40; }
.kgc-modal-inner.kgc-accent--closed { border-top-color: #9b1828; }
.kgc-modal-inner.kgc-accent--event  { border-top-color: #9b1828; }

/* -----------------------------------------------------------------
   Schließen-Button
   ----------------------------------------------------------------- */
.kgc-modal-close {
  position: absolute;
  top: -15px;
  right: -15px;
  background: #9b1828;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(155, 24, 40, 0.40);
  transition: background 0.15s;
}

.kgc-modal-close:hover {
  background: #7a1020;
}

/* -----------------------------------------------------------------
   Modal-Inhalte
   ----------------------------------------------------------------- */
.kgc-modal-date {
  font-size: 0.82rem;
  color: #00385c;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

/* -----------------------------------------------------------------
   Zeitfenster-Liste
   ----------------------------------------------------------------- */
.kgc-modal-slots {
  margin: 0 0 12px;
}

.kgc-slot-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 56, 92, 0.08);
  gap: 12px;
}

.kgc-slot-item:last-child {
  border-bottom: none;
}

.kgc-slot-label {
  font-size: 0.9rem;
  color: #555;
  font-weight: 600;
  flex: 1;
}

.kgc-slot-label:empty {
  display: none;
}

.kgc-slot-time {
  font-size: 1rem;
  color: #2e4f40;
  font-weight: 700;
  white-space: nowrap;
}

/* -----------------------------------------------------------------
   Küchenzeiten-Zeile
   ----------------------------------------------------------------- */
.kgc-kitchen-row {
  background: #f0f5f3;
  border-left: 3px solid #2e4f40;
  padding: 7px 12px;
  border-radius: 0 6px 6px 0;
  margin: 6px 0;
}

.kgc-modal-kitchen {
  font-size: 0.88rem;
  color: #2e4f40;
  font-weight: 600;
  margin: 0;
}

.kgc-modal-kitchen::before {
  content: '🍽 Küche: ';
}

/* -----------------------------------------------------------------
   Tagesangebot-Box
   ----------------------------------------------------------------- */
.kgc-offer-row {
  background: #faf5ee;
  border-left: 4px solid #d5bfa0;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin: 8px 0 8px;
}

.kgc-modal-offer {
  font-size: 0.92rem;
  font-weight: 700;
  color: #5a4a30;
  margin: 0;
}

.kgc-modal-offer::before {
  content: 'Unser Angebot: ';
  font-weight: 400;
  color: #8a7050;
}

/* -----------------------------------------------------------------
   Biergarten-Box
   ----------------------------------------------------------------- */
.kgc-biergarten-row {
  background: #f0f5f3;
  border-left: 3px solid #2e4f40;
  padding: 7px 12px;
  border-radius: 0 6px 6px 0;
  margin: 6px 0;
}

.kgc-modal-biergarten {
  font-size: 0.86rem;
  color: #2e4f40;
  font-weight: 600;
  margin: 0;
}

.kgc-modal-biergarten::before {
  content: '🌿 Biergarten: ';
}

/* -----------------------------------------------------------------
   Event-Panel: Veranstaltungs-Block
   ----------------------------------------------------------------- */
.kgc-event-info-block {
  padding-bottom: 16px;
}

.kgc-event-type-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(155, 24, 40, 0.65);
  margin: 0 0 4px;
}

/* Event-Titel */
.kgc-modal-event-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #9b1828;
  margin: 0 0 6px;
  line-height: 1.35;
}

/* Event-Zeit */
.kgc-modal-event-time {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px;
}

/* "Mehr erfahren" als dezenter Text-Link */
.kgc-event-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #9b1828;
  text-decoration: none;
  border-bottom: 1px solid rgba(155, 24, 40, 0.4);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.kgc-event-link::after {
  content: ' →';
}
.kgc-event-link:hover {
  color: #7a1020;
  border-color: #7a1020;
  text-decoration: none;
}

/* Event-Panel: Öffnungszeiten-Bereich (Trennlinie + Restaurant-Abschnitt) */
.kgc-event-hours {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 56, 92, 0.1);
}

.kgc-event-hours-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0, 56, 92, 0.55);
  margin: 0 0 10px;
}

/* -----------------------------------------------------------------
   Geschlossen-Panel
   ----------------------------------------------------------------- */
.kgc-modal-closed-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #9b1828;
  margin: 0 0 6px;
}

.kgc-modal-reason {
  font-size: 0.92rem;
  color: #666;
  margin: 4px 0 0;
  font-style: italic;
}

/* -----------------------------------------------------------------
   Modal-Button-Zeile
   ----------------------------------------------------------------- */
.kgc-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* -----------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------- */
.kgc-btn {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 5px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
  border: 2px solid transparent;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  width: 100%;
}

/* Primär: Dunkelblau – Reservierung */
.kgc-btn--primary {
  background: #00385c;
  color: #fff;
  border-color: #00385c;
}
.kgc-btn--primary:hover,
.kgc-btn--primary:focus {
  background: #002840;
  border-color: #002840;
  color: #fff;
  text-decoration: none;
}

/* -----------------------------------------------------------------
   Wrapper: Kalender + Event-Liste nebeneinander
   ----------------------------------------------------------------- */
.kgc-wrap {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 28px;
  align-items: start;
}

/* -----------------------------------------------------------------
   Event-Liste
   ----------------------------------------------------------------- */
.kgc-eventlist {
  min-width: 0;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.kgc-eventlist h2.kgc-eventlist-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #00385c;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 2px solid #00385c;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

.kgc-eventlist-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kgc-eventlist-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 56, 92, 0.08);
}

.kgc-eventlist-item:last-child {
  border-bottom: none;
}

.kgc-eventlist-date {
  font-weight: 700;
  color: #00385c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.kgc-eventlist-time {
  font-weight: 600;
  color: #666;
  line-height: 1.3;
}

.kgc-eventlist-name {
  display: block;
  font-weight: 700;
  color: #9b1828;
  text-decoration: none;
  line-height: 1.4;
  margin-top: 2px;
  transition: color 0.12s;
}

.kgc-eventlist-name:hover {
  color: #7a1020;
  text-decoration: underline;
}

.kgc-eventlist-name--nolink {
  display: block;
  font-weight: 700;
  color: #9b1828;
  line-height: 1.4;
  margin-top: 2px;
}

.kgc-eventlist-empty {
  color: #888;
  font-style: italic;
  margin: 6px 0 0;
  line-height: 1.4;
}

/* -----------------------------------------------------------------
   Responsive: ab ≤ 768 px untereinander
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  .kgc-wrap {
    grid-template-columns: 1fr;
  }
}