/* =============================================================
   AquaMagis Kalender – Frontend-Stylesheet v1.2
   Präfix: aqm-   (keine Konflikte mit Theme oder anderen Plugins)

   Farb-System:
     Geöffnet     #2a9d5c  Grün
     Geschlossen  #c0392b  Rot
     Event        #183647  Dunkelblau (Navy)
     FWT          #e07b0a  Orange
     Akzent-Teal  #4c8aa3  (Navigation, Datum-Label)
     Schließen    #b30018  Rot (Button)

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

/* -----------------------------------------------------------------
   Box-Sizing (isoliert auf Kalender-Wrapper)
   ----------------------------------------------------------------- */
.aqm-calendar,
.aqm-calendar *,
.aqm-calendar *::before,
.aqm-calendar *::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------
   Kalender-Wrapper
   ----------------------------------------------------------------- */
.aqm-calendar {
  font-family: 'PT Sans Pro', 'PT Sans', 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(24, 54, 71, 0.12);
}

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

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

.aqm-prev:hover,
.aqm-next:hover {
  background: #183647;
  color: #fff;
  text-decoration: none;
}

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

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

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

/* Wochentag-Kopfzeile */
.aqm-wday {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  padding: 0 2px 12px;
  color: #183647;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;   /* verhindert Zeilenumbruch Mo → M / o */
  overflow: hidden;
}

.aqm-td {
  padding: 3px 2px;
  text-align: center;
}

.aqm-empty {
  background: transparent;
}

/* Subtile Trennlinie zwischen Wochen */
.aqm-table tbody tr + tr td {
  border-top: 1px solid rgba(24, 54, 71, 0.06);
}

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

/* -----------------------------------------------------------------
   Tages-Zahl – farbiger Kreis hinter JEDEM Tag
   ----------------------------------------------------------------- */
.aqm-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: #fde8ea;
  color: #c0392b;
}

/* Öffnungszeit-Hinweis */
.aqm-hint {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #2a9d5c;   /* Grün wie offene Tage */
}

/* -----------------------------------------------------------------
   Zustand: Geöffnet – grüner Kreis
   ----------------------------------------------------------------- */
.aqm-day.open .aqm-num {
  background: #d9f2e6;
  color: #1a7a42;
}

.aqm-day.open .aqm-hint {
  color: #1a7a42;
}

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

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

.aqm-day.open.aqm-clickable:hover .aqm-hint {
  color: #2a9d5c;
}

/* -----------------------------------------------------------------
   FWT-Tage: Sa/So mit Früheinlass – orangener Kreis
   Überschreibt den grünen open-Stil.
   ----------------------------------------------------------------- */
.aqm-day.open.aqm-has-fwt .aqm-num {
  background: #fde8cc;
  color: #9b5400;
}

.aqm-day.open.aqm-has-fwt .aqm-hint {
  color: #9b5400;
}

.aqm-day.open.aqm-has-fwt.aqm-clickable:hover .aqm-num {
  background: #e07b0a;
  color: #fff;
}

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

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

/* -----------------------------------------------------------------
   Zustand: Hat ein Event – dunkelblaues Kreis
   Überschreibt open/closed/FWT vollständig.
   ----------------------------------------------------------------- */
.aqm-day.aqm-has-event .aqm-num {
  background: #183647;
  color: #fff;
}

.aqm-day.aqm-has-event .aqm-hint {
  color: #4c8aa3;
}

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

.aqm-day.aqm-has-event:hover .aqm-num {
  background: #0f2535;
  color: #fff;
  transform: scale(1.08);
}

/* Event + FWT (Sa/So): Dunkelblauer Kreis mit orangenem Ring –
   zeigt gleichzeitig Event (blau) und Family Weekend Ticket (orange).
   Hint-Text bleibt orange, um das FWT-Angebot sichtbar zu halten. */
.aqm-day.open.aqm-has-fwt.aqm-has-event .aqm-num {
  background: #183647;
  color: #fff;
  box-shadow: 0 0 0 3px #e07b0a;
}

.aqm-day.open.aqm-has-fwt.aqm-has-event .aqm-hint {
  color: #9b5400;   /* orange – FWT-Signal */
}

.aqm-day.open.aqm-has-fwt.aqm-has-event:hover .aqm-num {
  background: #0f2535;
  color: #fff;
  box-shadow: 0 0 0 3px #c96000;
}

/* -----------------------------------------------------------------
   Heute – immer Dunkelgrün (außer Event, um Verwechslung zu vermeiden)
   ----------------------------------------------------------------- */
.aqm-day.aqm-today:not(.aqm-has-event) .aqm-num {
  background: #1a5c35;
  color: #fff;
  box-shadow: 0 2px 10px rgba(26, 92, 53, 0.40);
}

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

/* Vergangene Events können geklickt werden */
.aqm-day.past.aqm-has-event {
  opacity: 0.45;
  pointer-events: auto;
  cursor: pointer;
}

/* -----------------------------------------------------------------
   Legende – farbige Kreise, klar unterscheidbar
   ----------------------------------------------------------------- */
.aqm-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 4px 2px;
  font-size: 0.82rem;
}

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

/* Kreise: gefüllt, solid, klar sichtbar */
.aqm-leg::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.aqm-leg--open::before   { background: #2a9d5c; }  /* Grün   */
.aqm-leg--closed::before { background: #c0392b; }  /* Rot    */
.aqm-leg--event::before  { background: #183647; }  /* Dunkelblau */
.aqm-leg--fwt::before    { background: #e07b0a; }  /* Orange */

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

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

/* -----------------------------------------------------------------
   Modal-Box
   ----------------------------------------------------------------- */
.aqm-modal-inner {
  background: #fff;
  border-radius: 12px;
  padding: 30px 28px 26px;
  width: 100%;
  max-width: 400px;
  position: relative;
  border-top: 5px solid #4c8aa3;
  box-shadow: 0 16px 56px rgba(24, 54, 71, 0.30);
  font-family: 'PT Sans Pro', 'PT Sans', Arial, sans-serif;
}

/* Akzentfarbe je Panel-Typ */
.aqm-modal-inner.aqm-accent--open   { border-top-color: #2a9d5c; }
.aqm-modal-inner.aqm-accent--closed { border-top-color: #c0392b; }
.aqm-modal-inner.aqm-accent--event  { border-top-color: #183647; }

/* -----------------------------------------------------------------
   Schließen-Button X (oben rechts außen)
   ----------------------------------------------------------------- */
.aqm-modal-close {
  position: absolute;
  top: -15px;
  right: -15px;
  background: #b30018;
  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(179, 0, 24, 0.40);
  transition: background 0.15s;
}

.aqm-modal-close:hover {
  background: #8a0012;
}

/* -----------------------------------------------------------------
   Modal-Inhalte
   ----------------------------------------------------------------- */
.aqm-modal-date {
  font-size: 0.82rem;
  color: #4c8aa3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}

.aqm-modal-hours,
.aqm-modal-event-hours {
  font-size: 1rem;
  color: #183647;
  font-weight: 600;
  margin: 0 0 8px;
}

.aqm-modal-event-hours {
  color: #555;
  font-size: 0.9rem;
  border-top: 1px solid #eee;
  padding-top: 8px;
  margin-top: 4px;
}

.aqm-modal-reason {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 6px;
  font-style: italic;
}

.aqm-modal-closed-label {
  font-size: 1.3rem;
  font-weight: 700;
  color: #183647;
  margin: 0 0 6px;
}

/* Event-Titel: kontrollierte Größe, keine Theme-Überschreibung durch <p> */
.aqm-modal-event-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #183647;
  margin: 0 0 8px;
  line-height: 1.3;
}

.aqm-modal-event-time {
  font-size: 1rem;
  font-weight: 700;
  color: #183647;
  margin: 0 0 6px;
}

/* -----------------------------------------------------------------
   Family Weekend Ticket-Zeile
   ----------------------------------------------------------------- */
.aqm-fwt-row {
  background: #fff8ee;
  border-left: 4px solid #e07b0a;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 12px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aqm-fwt-hours {
  font-size: 0.92rem;
  font-weight: 600;
  color: #183647;
  margin: 0;
}

/* -----------------------------------------------------------------
   Modal-Button-Zeile
   ----------------------------------------------------------------- */
.aqm-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  align-items: center;
}

/* -----------------------------------------------------------------
   Buttons – immer Großbuchstaben
   ----------------------------------------------------------------- */
.aqm-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 5px;
  font-family: 'PT Sans Pro', 'PT Sans', Arial, sans-serif;
  font-size: 0.88rem;
  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.05em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Primär: Rot – Hauptaktion */
.aqm-btn--primary {
  background: #b30018;
  color: #fff;
  border-color: #b30018;
}
.aqm-btn--primary:hover,
.aqm-btn--primary:focus {
  background: #8a0012;
  border-color: #8a0012;
  color: #fff;
  text-decoration: none;
}

/* Sekundär: Navy-Outline (nicht mehr im Modal, aber in CSS belassen) */
.aqm-btn--secondary {
  background: transparent;
  color: #183647;
  border-color: #183647;
}
.aqm-btn--secondary:hover,
.aqm-btn--secondary:focus {
  background: #183647;
  color: #fff;
  text-decoration: none;
}

/* Outline: Orange (Family Weekend Ticket) */
.aqm-btn--outline {
  background: transparent;
  color: #9b5400;
  border-color: #e07b0a;
}
.aqm-btn--outline:hover,
.aqm-btn--outline:focus {
  background: #e07b0a;
  color: #fff;
  text-decoration: none;
}

/* -----------------------------------------------------------------
   Wrapper: Kalender + Event-Liste nebeneinander (CSS Grid)
   Erste Spalte: Kalender (300–420 px), zweite Spalte: Rest
   ----------------------------------------------------------------- */
.aqm-wrap {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 28px;
  align-items: start;
}

/* -----------------------------------------------------------------
   Event-Liste
   ----------------------------------------------------------------- */
.aqm-eventlist {
  min-width: 0;   /* verhindert Overflow in Grid-Zellen */
  font-family: 'PT Sans Pro', 'PT Sans', Arial, sans-serif;
}

/* H2-Überschrift: hohe Spezifität, damit Divi-h2-Styles überschrieben
   werden (Divi nutzt oft .et_pb_text h2 mit Spezifität 0,1,1) */
.aqm-eventlist h2.aqm-eventlist-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #183647;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 2px solid #183647;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

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

.aqm-eventlist-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(24, 54, 71, 0.08);
}

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

/* Datum: Teal, Großbuchstaben – keine feste Schriftgröße */
.aqm-eventlist-date {
  font-weight: 700;
  color: #4c8aa3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Uhrzeit: grau – keine feste Schriftgröße */
.aqm-eventlist-time {
  font-weight: 600;
  color: #666;
  line-height: 1.3;
}

/* Event-Name als Link – keine feste Schriftgröße */
.aqm-eventlist-name {
  display: block;
  font-weight: 700;
  color: #183647;
  text-decoration: none;
  line-height: 1.4;
  margin-top: 2px;
  transition: color 0.12s;
}

.aqm-eventlist-name:hover {
  color: #2a9d5c;
  text-decoration: underline;
}

/* Event-Name ohne Link */
.aqm-eventlist-name--nolink {
  display: block;
  font-weight: 700;
  color: #183647;
  line-height: 1.4;
  margin-top: 2px;
}

/* Leer-Hinweis */
.aqm-eventlist-empty {
  color: #888;
  font-style: italic;
  margin: 6px 0 0;
  line-height: 1.4;
}

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