/* wtf-calendar.css (aus index.php ausgelagert) */

/* ===== WTFuture CI Palette (Styleguide) ===== */
:root{
  --wtf-ci-red: #FF0000;   /* RGB 100/0/0 */
  --wtf-ci-purple: #B699F3; /* RGB 182/153/243 */
  --wtf-ci-green: #00FF81;  /* RGB 0/255/129 */
  --wtf-ci-yellow: #FFF200; /* RGB 255/242/0 */
  --wtf-ci-deeppurple: #6F00FF; /* RGB 111/0/255 */
  --wtf-ci-pink: #FF0062;   /* RGB 255/0/98 */
  --wtf-ci-violet: #B94FE7; /* RGB 185/79/231 */
  --wtf-ci-ink: #020202;
}

/* ===== FullCalendar: CI-konforme Farben ===== */

/* Ferien / Blackout / belegt (hellblau, optional schraffiert) */
.fc .ev-blackout,
.fc .ev-blocked {
  background-color: rgba(166, 216, 250, 0.45) !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(166, 216, 250, 0.60),
    rgba(166, 216, 250, 0.60) 6px,
    rgba(166, 216, 250, 0.26) 6px,
    rgba(166, 216, 250, 0.26) 12px
  ) !important;
  border: none !important;
}

/* Aufbau/Abbau (gelb schraffiert) */
.fc .ev-hatched {
  background-color: rgba(255, 242, 0, 0.28) !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 242, 0, 0.65),
    rgba(255, 242, 0, 0.65) 6px,
    rgba(255, 242, 0, 0.22) 6px,
    rgba(255, 242, 0, 0.22) 12px
  ) !important;
  border: none !important;
}

/* Mo/Fr auf Rückfrage (grün) – falls als Background-Event geliefert */
.fc .ev-conditional {
  background-color: rgba(0, 255, 129, 0.28) !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 255, 129, 0.45),
    rgba(0, 255, 129, 0.45) 7px,
    rgba(0, 255, 129, 0.18) 7px,
    rgba(0, 255, 129, 0.18) 14px
  ) !important;
  border: none !important;
}

/* Wochenende dezent */
.fc .ev-weekend { background-color: rgba(2, 2, 2, 0.05) !important; }

/* Auswahl (deep purple) */
.fc .ev-selected {
  background-color: rgba(111, 0, 255, 0.25) !important;
  outline: 2px solid var(--wtf-ci-deeppurple) !important;
  outline-offset: -2px;
}

/* ===== Toolbar Buttons ===== */

/* Prev/Next: CI Grün */
.fc .fc-prev-button,
.fc .fc-next-button {
  background-color: var(--wtf-ci-green) !important;
  border: none !important;
  color: var(--wtf-ci-ink) !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  min-width: 44px;
}
.fc .fc-prev-button:hover,
.fc .fc-next-button:hover {
  filter: brightness(0.95);
}

/* Heute: CI Gelb */
.fc .fc-today-button {
  background-color: var(--wtf-ci-yellow) !important;
  border: none !important;
  color: var(--wtf-ci-ink) !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
}
.fc .fc-today-button:hover { filter: brightness(0.95); }

.fc .fc-button:disabled { opacity: 0.45 !important; }

/* Kalender-Text bleibt schwarz (Barrierefreiheit) */
.fc, .fc a, .fc a:visited { color: var(--wtf-ci-ink) !important; }
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion,
.fc .fc-toolbar-title { color: var(--wtf-ci-ink) !important; font-weight: 700; }

/* Keine Titeltexte in Background-Events in Zellen anzeigen */
.fc .fc-bg-event .fc-event-title,
.fc .fc-bg-event .fc-event-time { display: none !important; }

/* ===== Legend Tags (CI) ===== */
.wtf-legend .tag { font-weight: 800; border-radius: 10px; }
.wtf-tag-blackout { background: var(--wtf-ci-red) !important; color: var(--wtf-ci-ink) !important; }
.wtf-tag-hatched  { background: var(--wtf-ci-yellow) !important; color: var(--wtf-ci-ink) !important; }
.wtf-tag-conditional { background: var(--wtf-ci-green) !important; color: var(--wtf-ci-ink) !important; }
.wtf-tag-weekend { background: rgba(2,2,2,0.12) !important; color: var(--wtf-ci-ink) !important; }
/* ===== WTF Hero Box ===== */
.wtf-hero-box {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Text bewusst schwarz (max. Lesbarkeit) */
.wtf-hero-box .title,
.wtf-hero-box .subtitle {
  color: #000 !important;
}

/* Keyvisual kontrolliert groß */
.wtf-hero-image {
  max-width: 520px;
  width: 100%;
  height: auto;
}

/* Zentrierung + bessere Lesbarkeit auf FullHD */
.wtf-section .container {
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

@media (min-width: 1216px) { /* desktop */
  .wtf-section .container { max-width: 1100px; }
}

@media (min-width: 1408px) { /* fullhd */
  .wtf-section .container { max-width: 1180px; }
}

/* ===== Formular KOMPAKT (deutlich sichtbar) ===== */

/* Bulma setzt: .field:not(:last-child){ margin-bottom: .75rem } */
#bookingForm .field:not(:last-child){
  margin-bottom: 0.45rem !important;
}

/* Labels dichter + etwas kleiner */
#bookingForm .label{
  margin-bottom: 0.15rem !important;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
}

/* Inputs: Höhe ist der Hebel (Bulma gibt standardmäßig ~2.5em) */
#bookingForm .input{
  height: 2.15em !important;
  padding: 0.35rem 0.65rem !important;
}

/* Textarea kompakter */
#bookingForm .textarea{
  padding: 0.45rem 0.65rem !important;
  min-height: 5.5rem !important;   /* vorher deutlich höher */
}

/* Help-Text dichter */
#bookingForm .help{
  margin-top: 0.4rem !important;
  line-height: 1.2;
}

/* Button-Block etwas weniger Abstand */
#bookingForm .field:last-of-type{
  margin-top: 0.6rem !important;
}


/* Ampel-Flächen */
.fc .ev-free { background-color: rgba(0, 200, 83, 0.18) !important; border:none !important; }

/* 1 Slot belegt: nur GELB als Hälfte (Rest bleibt weiß) */
.fc .ev-one {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(255, 235, 59, 0.95) 0 50%, rgba(255,255,255,0) 50% 100%) !important;
  border:none !important;
}

/* 2 Slots: ROT voll */
.fc .ev-two { background-color: rgba(255, 0, 0, 1) !important; border:none !important; }

/* Sonntag: grau + schraffiert */
.fc .ev-sunday {
  background-color: rgba(120, 120, 120, 0.10) !important;
  background-image: repeating-linear-gradient(45deg, rgba(120,120,120,0.25), rgba(120,120,120,0.25) 8px, rgba(120,120,120,0.10) 8px, rgba(120,120,120,0.10) 16px) !important;
  border:none !important;
}

/* Legende Tags */
.wtf-legend .tag { font-weight:800; border-radius:10px; }
.wtf-tag-green { background:#00C853 !important; color:#000 !important; }
.wtf-tag-yellow { background:#FFEB3B !important; color:#000 !important; }
.wtf-tag-red { background:#FF0000 !important; color:#fff !important; }
.wtf-tag-sunday { background: rgba(120,120,120,0.20) !important; color:#000 !important; }

/* ===== Booking Instructions (WTF CI) ===== */
.wtf-stepbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

.tag.wtf-ci-green  { background: var(--wtf-ci-green) !important;  color: var(--wtf-ci-ink) !important; font-weight: 900; }
.tag.wtf-ci-yellow { background: var(--wtf-ci-yellow) !important; color: var(--wtf-ci-ink) !important; font-weight: 900; }
.tag.wtf-ci-pink   { background: var(--wtf-ci-pink) !important;   color: #fff !important;            font-weight: 900; }
.tag.wtf-ci-purple { background: var(--wtf-ci-deeppurple) !important; color: #fff !important;        font-weight: 900; }

.wtf-ci-note {
  border: 2px solid var(--wtf-ci-deeppurple);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: rgba(111, 0, 255, 0.06); /* deep purple, sehr dezent */
}

.wtf-ci-note strong { color: var(--wtf-ci-ink); }

.wtf-ci-list li + li { margin-top: .35rem; }

@media (max-width: 768px){
  .wtf-step-head .title{
    font-size: 1.35rem;
    line-height: 1.25;
  }
}
@media (max-width: 768px){
  .wtf-step-tags .tag{
    font-size: 0.8rem;
  }
}