@charset "UTF-8";

/* ============================================================
   FGK KALENDER – Frontend CSS
   Mobile-first · Touch-optimiert · Theme-adaptiv
   ============================================================ */

/* --- Design Tokens ----------------------------------------- */
:root {
  /* Primärfarbe: fest definiert – kann per Theme-CSS überschrieben werden:
     body { --fgk-primary: #IhreFarbe; --fgk-primary-dk: #DunklereVariante; } */
  --fgk-primary:     #0a6dad;
  --fgk-primary-dk:  #085a94;
  --fgk-text:        var(--wp--preset--color--contrast,   #1a1a1a);
  --fgk-border:      #dde1e7;
  --fgk-bg:          #ffffff;
  --fgk-bg-muted:    #f4f6f9;
  --fgk-radius-sm:   6px;
  --fgk-radius:      10px;
  --fgk-radius-lg:   16px;
  --fgk-shadow:      0 2px 12px rgba(0, 0, 0, 0.08);
  --fgk-shadow-md:   0 4px 24px rgba(0, 0, 0, 0.14);
  --fgk-input-h:     48px;
  --fgk-trans:       0.2s ease;
}

/* --- Haupt-Container --------------------------------------- */
#fgk-kalender-frontend {
  max-width: 900px;
  margin: 0 auto;
  font-family: inherit;
  color: inherit;
}

.fgk-kalender-frontend-container {
  padding: 20px;
  background: var(--fgk-bg);
  border-radius: var(--fgk-radius);
  margin-bottom: 30px;
  box-shadow: var(--fgk-shadow);
}

/* --- Slot-Raster ------------------------------------------- */
.fc .fc-timegrid-slot                          { height: 20px; }
body.fgk-slot-60min .fc .fc-timegrid-slot      { height: 40px !important; }

/* --- FullCalendar: Touch-freundliche Toolbar --------------- */
.fc .fc-button {
  min-height: 42px !important;
  min-width:  42px !important;
  padding: 6px 14px !important;
  font-size: 0.9rem !important;
  touch-action: manipulation;
  cursor: pointer;
}
.fc .fc-toolbar-title {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Heute-Hintergrund ausblenden */
#fgk-kalender-frontend .fc-day-today,
#fgk-kalender-frontend .fc-timegrid-col.fc-day-today {
  background-color: transparent !important;
}

/* Klient-Kalender: kompaktere Schrift */
#fgk-klient-calendar .fc-event-title,
#fgk-klient-calendar .fc-event-time,
#fgk-klient-calendar .fc-event-main { font-size: 11px !important; line-height: 1.2; }
#fgk-klient-calendar .fc             { font-size: 11px !important; }

/* --- Kalender-Legende -------------------------------------- */
.fgk-kalender-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.fgk-kalender-legende span {
  border-radius: 4px;
  padding: 2px 9px;
  font-size: 0.8rem;
}

/* --- Mitarbeiter-Auswahl ----------------------------------- */
#fgk_kalender_mitarbeiter { margin-bottom: 20px; }
#fgk_kalender_mitarbeiter select {
  height: var(--fgk-input-h);
  padding: 0 12px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--fgk-border);
  border-radius: var(--fgk-radius-sm);
  width: 100%;
  max-width: 380px;
  background: var(--fgk-bg);
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

/* --- Orte-Zeile -------------------------------------------- */
.fgk-mitarbeiter-orte {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #0c234b;
}

/* ============================================================
   MODAL  —  Bottom Sheet (Mobile) / Dialog (Desktop)
   ============================================================ */

.fgk-modal {
  display: none;
  position: fixed;
  inset: 0;
  /* Maximaler z-index – überschreibt Theme-Header, Footer, Admin-Bar */
  z-index: 2147483647;
}
.fgk-modal.fgk-modal-open { display: block; }

/* Hintergrundverdunklung */
.fgk-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  animation: fgk-fade-in var(--fgk-trans) both;
}

/* Sheet — Mobile: von unten einschieben */
.fgk-modal-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;   /* explizit weiß – kein var(), keine Transparenz */
  border-radius: var(--fgk-radius-lg) var(--fgk-radius-lg) 0 0;
  padding: 8px 18px 28px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.fgk-modal.fgk-modal-open .fgk-modal-sheet {
  transform: translateY(0);
}

/* Drag-Handle oben */
.fgk-modal-handle {
  width: 40px;
  height: 4px;
  background: var(--fgk-border);
  border-radius: 2px;
  margin: 0 auto 14px;
}

/* Schließen-Button — kompakt, überlappt nicht mit Content */
.fgk-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  background: #e8eaed;
  border: none;
  color: #333;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  flex-shrink: 0;
}
.fgk-modal-close:hover { background: #d0d4da; }

/* Modal-Body: Abstand nach oben, damit Inhalt nicht hinter dem X-Button liegt */
#fgk-buchung-modal-body {
  padding-top: 32px; /* mobile: X-Button endet bei ~38px, Sheet-Padding 8px → 8+32=40px Abstand */
}

/* Desktop: zentrierter Dialog mit Slide-in (kein Opacity-Fade → immer solide weiß) */
@media (min-width: 601px) {
  .fgk-modal-sheet {
    position: absolute;
    top: 4%;
    left: 50%;
    bottom: auto;
    right: auto;
    width: 92%;
    max-width: 540px;
    border-radius: var(--fgk-radius);
    padding: 28px 32px 32px;
    max-height: 90vh;
    max-height: 90dvh;
    transform: translateX(-50%) translateY(-18px);
    transition: transform var(--fgk-trans);
    /* KEIN opacity:0 — Sheet ist immer vollständig deckend weiß */
  }
  .fgk-modal.fgk-modal-open .fgk-modal-sheet {
    transform: translateX(-50%) translateY(0);
  }
  .fgk-modal-handle { display: none; }

  /* Desktop: Body-Abstand anpassen (Sheet hat 28px Padding oben) */
  #fgk-buchung-modal-body {
    padding-top: 14px; /* X-Button endet bei 38px, Sheet-Padding 28px → 28+14=42px > 38px ✓ */
  }
}

/* ============================================================
   BUCHUNGSFORMULAR
   ============================================================ */

#fgk-buchungsformular {
  font-size: 1rem;
  line-height: 1.5;
}

.fgk-buchung-datum {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 4px;
}
.fgk-pflichtfeld-info {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 14px;
}

.fgk-required { color: #c0392b; }

/* Formulargruppen */
.fgk-form-group { margin-bottom: 12px; }

.fgk-form-group > label,
#fgk-buchungsformular > div > label,
#fgk-buchungsformular label:not(.fgk-checkbox-label) {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

/* Inputs / Selects / Textarea */
#fgk-buchungsformular input:not([type="checkbox"]),
#fgk-buchungsformular select,
#fgk-buchungsformular textarea {
  display: block;
  width: 100%;
  min-height: var(--fgk-input-h);
  padding: 10px 14px;
  font-size: 1rem;       /* 16px – verhindert iOS Auto-Zoom */
  font-family: inherit;
  border: 1px solid var(--fgk-border);
  border-radius: var(--fgk-radius-sm);
  background: var(--fgk-bg);
  box-sizing: border-box;
  transition: border-color var(--fgk-trans), box-shadow var(--fgk-trans);
  -webkit-appearance: none;
  appearance: none;
  margin-bottom: 0 !important;
}
#fgk-buchungsformular input:not([type="checkbox"]):focus,
#fgk-buchungsformular select:focus,
#fgk-buchungsformular textarea:focus {
  outline: none;
  border-color: var(--fgk-primary);
  box-shadow: 0 0 0 3px rgba(10, 109, 173, 0.14);
}
#fgk-buchungsformular input[readonly] {
  background: var(--fgk-bg-muted);
  color: #666;
  border-color: #e0e0e0;
}
#fgk-buchungsformular textarea {
  min-height: 80px;
  resize: vertical;
}

/* Info-Boxen (Erstgespräch, Zoom-Hinweis) */
.fgk-info-box {
  background: var(--fgk-bg-muted);
  border-radius: var(--fgk-radius-sm);
  padding: 10px 14px;
  margin: 6px 0 10px;
  font-size: 0.9rem;
}
.fgk-info-box-warn {
  background: #fff9e6;
  border: 1px solid #ffe082;
  border-radius: var(--fgk-radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.83rem;
  line-height: 1.45;
}

/* === Checkbox-Zeile (Datenschutz / AGB) === */
.fgk-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.fgk-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: var(--fgk-primary);
  touch-action: manipulation;
}
.fgk-checkbox-label {
  display: block !important;
  font-size: 0.7rem !important;   /* ≈ 11px – kompakt für DSGVO/AGB/Storno-Texte */
  font-weight: 400 !important;
  line-height: 1.45;
  color: #666;
  margin-bottom: 0 !important;
}
.fgk-checkbox-label a { color: var(--fgk-primary); }
.fgk-checkbox-confirmed {
  display: block;
  font-size: 0.65rem;
  color: #999;
  margin-top: 3px;
  font-weight: 400 !important;
}
.fgk-pflichtfeld-hinweis {
  font-size: 0.72rem;
  color: #888;
  margin: 4px 0 10px;
}

/* === Submit-Button === */
/* !important auf background/color/border: schützt vor Theme-Overrides */
#fgk-buchungsformular button[type="submit"],
.fgk-btn-primary {
  display: block;
  width: 100%;
  box-sizing: border-box !important;
  min-height: 50px;
  padding: 12px 20px;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: inherit;
  background: #0a6dad !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--fgk-radius-sm) !important;
  cursor: pointer;
  margin-top: 16px;
  transition: background var(--fgk-trans), transform var(--fgk-trans);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none;
}
#fgk-buchungsformular button[type="submit"]:hover,
.fgk-btn-primary:hover  { background: #085a94 !important; }
#fgk-buchungsformular button[type="submit"]:active,
.fgk-btn-primary:active { transform: scale(0.98); }

/* Buchungs-Rückmeldung */
#fgk-buchung-info {
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 1.4em;
  margin: 0 0 4px;
}

/* === Loading-Overlay (Fullscreen während Submit) === */
#fgk-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 11060000;
}
.fgk-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--fgk-border);
  border-top-color: var(--fgk-primary);
  border-radius: 50%;
  animation: fgk-spin 0.8s linear infinite;
}
#fgk-loading-overlay p {
  color: #444;
  margin-top: 12px;
  font-size: 0.95rem;
}

/* ============================================================
   ANMELDUNGS-FORMULARE (Veranstaltungen / Kurse)
   ============================================================ */

.fgk-anmeldung-wrap       { max-width: 600px; }
.fgk-anmeldung-wrap h3    { margin-top: 0; margin-bottom: 12px; }

.fgk-form-row { margin-bottom: 12px; }
.fgk-form-row > label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

/* Input-Klasse für VA/Kurs Formulare */
.fgk-form-input {
  display: block;
  width: 100%;
  min-height: var(--fgk-input-h);
  padding: 10px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--fgk-border);
  border-radius: var(--fgk-radius-sm);
  box-sizing: border-box;
  background: var(--fgk-bg);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--fgk-trans);
}
.fgk-form-input:focus {
  outline: none;
  border-color: var(--fgk-primary);
  box-shadow: 0 0 0 3px rgba(10, 109, 173, 0.14);
}
.fgk-form-input--ta {
  min-height: 88px;
  resize: vertical;
}

/* Konto-Anlegen Hinweistext */
.fgk-konto-hint {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
}

/* Anmelden- / Wartelisten-Button */
.fgk-anmeldung-wrap button[type="submit"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--fgk-primary);
  color: #fff;
  border: none;
  border-radius: var(--fgk-radius-sm);
  cursor: pointer;
  margin-top: 12px;
  transition: background var(--fgk-trans);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.fgk-anmeldung-wrap button[type="submit"]:hover { background: var(--fgk-primary-dk); }

/* Feedback-Meldungen */
.fgk-msg-ok  { color: #2e7d32; font-weight: 600; font-size: 0.95rem; }
.fgk-msg-err { color: #c62828; font-weight: 600; font-size: 0.95rem; }

/* ============================================================
   KURS / VERANSTALTUNGS KARTEN
   ============================================================ */

.fgk-karte {
  border: 1px solid var(--fgk-border);
  border-radius: var(--fgk-radius);
  padding: 20px;
  margin-bottom: 24px;
  background: var(--fgk-bg);
  box-shadow: var(--fgk-shadow);
  transition: box-shadow var(--fgk-trans);
}
.fgk-karte:hover { box-shadow: var(--fgk-shadow-md); }

.fgk-karte-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--fgk-bg-muted);
  border-radius: 4px;
  padding: 2px 9px;
  margin-bottom: 6px;
  color: #666;
}

.fgk-karte h3 { margin: 4px 0 12px; font-size: 1.15rem; }

/* Details/Summary in Karten */
.fgk-karte details > summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fgk-primary);
  padding: 8px 0;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.fgk-karte details > summary::-webkit-details-marker { display: none; }
.fgk-karte details[open] > summary { margin-bottom: 8px; }

/* Ausgebucht */
.fgk-ausgebucht {
  color: #c62828;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 8px 0;
}

/* Anmelde-Message in Karte */
.fgk-msg-box { min-height: 1.4em; margin: 8px 0; font-size: 0.9rem; }

/* ============================================================
   LOGIN / REGISTER WRAP
   ============================================================ */

.fgk-login-wrap,
.fgk-register-wrap {
  max-width: 420px;
  background: var(--fgk-bg);
  border-radius: var(--fgk-radius);
  padding: 28px 24px;
  box-shadow: var(--fgk-shadow);
}

/* ============================================================
   MOBILE BREAKPOINTS
   ============================================================ */

/* Kleines Smartphone (< 480px) */
@media (max-width: 480px) {
  .fgk-kalender-frontend-container  { padding: 12px; }
  .fgk-modal-sheet                  { padding: 8px 14px 24px; }
  .fc .fc-toolbar                   { flex-wrap: wrap; gap: 4px; }
  .fc .fc-toolbar-title             { font-size: 0.95rem; }
  .fc .fc-button {
    padding: 5px 10px !important;
    font-size: 0.82rem !important;
    min-width: 36px !important;
  }
  .fgk-login-wrap,
  .fgk-register-wrap { padding: 20px 16px; box-shadow: none; }
}

/* Smartphone (< 640px) */
@media (max-width: 640px) {
  .fgk-kalender-legende      { font-size: 0.8rem; }
  .fgk-kalender-legende span { font-size: 0.75rem; padding: 2px 7px; }
  .fgk-karte                 { padding: 16px; }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes fgk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fgk-spin {
  to { transform: rotate(360deg); }
}
/* Spinner-Kompatibilität für Overlay im Modal-Partial */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}