/* =====================================================================
   yogaraum.ganapati.ch

   Palette nach ganapati.ch: Petrol und Gold auf Weiss.
   Anpassen: nur die Werte im ersten Block.
   ===================================================================== */

:root {
  /* --- Ganapati-Farben --------------------------------------------- */
  --petrol:   #235f76;   /* Titel, Auswahl, Schaltflaechen  */
  --petrol-d: #184a5d;   /* Hover                           */
  --gold:     #e29a22;   /* Akzent, Hinweise                */
  --ink:      #363b3d;   /* Fliesstext                      */
  --muted:    #7d8589;   /* Sekundaertext                   */
  --line:     #e4e6e5;   /* Rahmen                          */
  --paper:    #fbfaf7;   /* Seitenhintergrund               */
  --surface:  #ffffff;   /* Karten                          */

  /* Auslastung eines Tages (gruen -> rot).
     Helle Flaeche, kraeftige Schrift: die Farbe soll das Raster
     gliedern, nicht dominieren. */
  --d0:   #4f9070;   --d0-bg: #e7f2ec;   /* viel frei  */
  --d1:   #6f8f43;   --d1-bg: #edf2e2;   /* frei       */
  --d2:   #b8871f;   --d2-bg: #faf1dc;   /* teils frei */
  --d3:   #c06a2c;   --d3-bg: #fbeade;   /* wenig frei */
  --d4:   #a94f42;   --d4-bg: #f8e4e1;   /* ausgebucht */

  /* Belegte Stunden in der Wochenansicht: kraeftig, nicht schraffiert.
     Bewusst NICHT gruen — in der Uebersicht bedeutet gruen "viel frei",
     dieselbe Farbe fuer "belegt" waere widerspruechlich. */
  --busy:   #4e8ba3;
  --pick:   #e29a22;

  /* Abgeleitet */
  --petrol-soft: color-mix(in srgb, var(--petrol) 12%, transparent);
  --blocked:     #9aa1a4;   /* vergangen / zu kurzfristig */

  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
a { color: var(--petrol); }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* ===== Kopf ========================================================= */

.masthead { margin-bottom: 1.75rem; }

.eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .75rem;
}
.eyebrow span { color: var(--muted); letter-spacing: .1em; }
.eyebrow span::before { content: " · "; }

.masthead h1 {
  color: var(--petrol);
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  letter-spacing: -.01em;
}

.intro { max-width: 46rem; }
.lede {
  margin: .9rem 0 .4rem; font-size: 1.12rem; font-weight: 600; color: var(--petrol);
}
.intro p { margin: .45rem 0; }

.pricebox {
  margin-top: 1.4rem; padding: 1rem 1.15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  max-width: 46rem;
}
.pricebox h2 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .6rem;
}
.pricebox dl { display: flex; flex-wrap: wrap; gap: .2rem 2.25rem; margin: 0; }
.pricebox dl div { display: flex; align-items: baseline; gap: .5rem; }
.pricebox dt { color: var(--muted); font-size: .9rem; }
.pricebox dd {
  margin: 0; font-weight: 700; color: var(--petrol); font-variant-numeric: tabular-nums;
}
.pricebox p { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }

/* ===== Aufteilung =================================================== */

.layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.1rem; align-items: start; }

@media (min-width: 62rem) {
  .layout { grid-template-columns: minmax(0,1fr) 20rem; }
  .side   { position: sticky; top: 1rem; }
}

.side { display: grid; gap: .8rem; align-content: start; }

.months { padding: .85rem .9rem 1rem; }
.months h2 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .6rem;
}
.months-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
  gap: .3rem;
}
.month-btn {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: .78rem; font-weight: 600;
  padding: .3rem .2rem; border-radius: 5px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.month-btn span { color: var(--muted); font-weight: 500; }
.month-btn:hover { border-color: var(--petrol); background: var(--petrol-soft); }
.month-btn.is-current {
  background: var(--petrol); border-color: var(--petrol); color: #fff;
}
.month-btn.is-current span { color: rgba(255,255,255,.7); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* ===== Legende ====================================================== */

.calendar-card { padding: .7rem; }

.hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .95rem;
  padding: .15rem .3rem .65rem; font-size: .8rem; color: var(--muted);
}
.tip { color: var(--petrol); font-weight: 500; }

.key { display: inline-flex; align-items: center; gap: .38rem; }
.key::before {
  content: ""; width: .8rem; height: .8rem; border-radius: 3px; border: 1px solid var(--line);
}
.key--busy::before { background: var(--busy); border-color: var(--busy); }
.key--pick::before { background: var(--pick); border-color: var(--pick); }

/* ===== Kalender ===================================================== */

#calendar { --fc-border-color: var(--line); }
.fc { font-family: var(--font-body); }

.fc .fc-toolbar { gap: .5rem; }
.fc .fc-toolbar-title { font-size: 1.05rem !important; font-weight: 600; color: var(--petrol); }

.fc .fc-button-primary {
  background: transparent; border-color: var(--line); color: var(--ink);
  font-size: .8rem; padding: .28rem .68rem; text-transform: none; box-shadow: none !important;
}
.fc .fc-button-primary:not(:disabled):hover {
  background: var(--petrol-soft); border-color: var(--petrol); color: var(--petrol-d);
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--petrol); border-color: var(--petrol); color: #fff;
}
.fc .fc-button-primary:disabled { opacity: .35; }

.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-daygrid-day-number {
  color: var(--muted); font-size: .78rem; font-weight: 500; text-decoration: none;
}

/* Eine Zeile je Stunde statt je Viertelstunde. Ausgewaehlt wird
   trotzdem in 15-Minuten-Schritten (snapDuration). */
.fc .fc-timegrid-slot { height: 1.5rem; }
.fc .fc-timegrid-slot-label { font-size: .7rem; }
.fc .fc-timegrid-slot-label-cushion { padding: 0 .3rem; white-space: nowrap; }

/* Heute: in der Wochenansicht nur die Kopfzeile hervorheben, nicht die
   Stundenspalte — sonst konkurriert die Flaeche mit den Belegungen. */
.fc .fc-timegrid .fc-day-today { background: transparent; }
.fc .fc-timegrid .fc-col-header-cell.fc-day-today {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}
.fc .fc-timegrid .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
  color: var(--ink); font-weight: 700;
}

/* In der Uebersicht bleibt der heutige Tag flaechig gelb. */
.fc .fc-daygrid .fc-day-today { background: color-mix(in srgb, var(--gold) 16%, transparent); }

.fc .fc-timegrid-col-frame { cursor: crosshair; }
.fc .fc-day-past .fc-timegrid-col-frame { cursor: default; }

/* Belegt: flaechig und kraeftig, so markant wie die eigene Auswahl */
.fc .busy-slot {
  background: var(--busy) !important;
  opacity: 1 !important;
  border-radius: 3px;
}

/* Vergangen und zu kurzfristig: dunkelgrau */
.fc .closed-slot { background: var(--blocked) !important; opacity: .85 !important; }

.fc .pick-slot {
  background: var(--pick) !important; border: none !important;
  border-radius: 4px !important; cursor: pointer; min-height: 1.05rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.fc .pick-slot .fc-event-main { color: #fff; font-size: .7rem; font-weight: 600; padding: 0 3px; }
.fc .pick-slot::after {
  content: "×"; position: absolute; top: 0; right: 3px;
  color: #fff; font-size: .9rem; line-height: 1.1; opacity: .8;
}
.fc .pick-slot:hover { background: color-mix(in srgb, var(--pick) 85%, black) !important; }
.fc .fc-highlight { background: var(--petrol-soft); }

/* Monatsansicht */
/* Zweizeilige Kaestchen: Datum oben, Auslastung unten.
   Feste Hoehe, weil FullCalendar die Zeilen sonst auf die Hoehe des
   Scrollbereichs streckt und ueberall Leerraum entsteht. */
.fc .fc-daygrid-day-frame {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .1rem;
  height: 2.5rem;
  min-height: 0;
  padding: .15rem .25rem;
  overflow: hidden;
}

.fc .fc-daygrid-day-events,
.fc .fc-daygrid-day-bg,
.fc .fc-daygrid-day-bottom { display: none; }

/* Zeile 1: Tageszahl, bei Monatsbeginn plus Monatsmarke */
.fc .fc-daygrid-day-top {
  padding: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
}
.fc .fc-daygrid-day-number {
  padding: 0; font-size: .68rem; line-height: 1.2;
  min-width: 1rem; text-align: left;
}

/* Zeilen nicht strecken */
.fc .fc-daygrid-body tr,
.fc .fc-daygrid-day { height: auto; }

/* Monate abwechselnd hinterlegen: im durchgehenden Raster ist das die
   einzige Struktur, an der sich das Auge orientieren kann.
   Gerade Monate weiss, ungerade hellblau. */
.fc .yr-m-even { background: var(--surface); }
.fc .yr-m-odd  { background: #eef4f7; }

/* Monatsmarke am Monatsersten */
.fc .yr-month-tag {
  flex: 0 0 auto;
  font-size: .56rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--petrol);
  background: color-mix(in srgb, var(--gold) 28%, transparent);
  padding: 0 .22rem; border-radius: 3px;
  line-height: 1.35; pointer-events: none;
}

/* Zeile 2: Auslastung, volle Breite */
.fc .day-load {
  flex: 0 0 auto;
  display: block; width: 100%;
  margin: 0; padding: .02rem .2rem;
  border-radius: 3px; font-size: .63rem; font-weight: 700;
  text-align: center; letter-spacing: -.01em;
  line-height: 1.4; white-space: nowrap; overflow: hidden;
}
.fc .day-load--0 { background: var(--d0-bg); color: var(--d0); }
.fc .day-load--1 { background: var(--d1-bg); color: var(--d1); }
.fc .day-load--2 { background: var(--d2-bg); color: var(--d2); }
.fc .day-load--3 { background: var(--d3-bg); color: var(--d3); }
.fc .day-load--4 { background: var(--d4-bg); color: var(--d4); }

.fc .fc-day-past .fc-daygrid-day-frame { cursor: default; opacity: .5; }

/* Zu kurzfristig: vor Ablauf des Vorlaufs, aber noch nicht vergangen */
.fc .yr-too-soon .fc-daygrid-day-frame { cursor: default; }
.fc .yr-too-soon .fc-daygrid-day-frame:hover { background: transparent; }
.fc .yr-too-soon .fc-daygrid-day-number { opacity: .55; }
.fc .yr-too-soon .fc-timegrid-col-frame { cursor: default; }
.fc .yr-too-soon-head .fc-col-header-cell-cushion { opacity: .5; }

/* ===== Auswahlpanel ================================================= */

.panel { padding: 1rem 1.1rem 1.15rem; }
.panel h2 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem;
}
.empty { color: var(--muted); font-size: .88rem; margin: 0; }

.ledger-day + .ledger-day {
  border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem;
}
.ledger-date {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .82rem; font-weight: 700; color: var(--petrol);
}
.ledger-date span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.ledger-times { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .84rem; color: var(--muted); }
.ledger-times li {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .1rem 0; font-variant-numeric: tabular-nums;
}

.remove {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 .15rem; border-radius: 3px;
}
.remove:hover { color: var(--gold); }

.hours { font-size: .78rem; color: var(--muted); margin-top: .15rem; }

.capped {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem;
  font-size: .74rem; color: var(--gold); font-weight: 600;
}
.capped::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--gold); }

.total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .9rem; padding-top: .8rem; border-top: 2px solid var(--petrol);
}
.total span:first-child { font-size: .82rem; color: var(--muted); }
.total strong {
  font-size: 1.4rem; font-weight: 700; color: var(--petrol); font-variant-numeric: tabular-nums;
}

.note { margin: .5rem 0 0; font-size: .75rem; color: var(--muted); line-height: 1.45; }

.errors {
  margin: .8rem 0 0; padding: .6rem .75rem; border-radius: 6px;
  background: color-mix(in srgb, #a3302a 7%, transparent);
  border: 1px solid color-mix(in srgb, #a3302a 22%, transparent);
  color: #7d241f; font-size: .82rem;
}
.errors ul { margin: 0; padding-left: 1.1rem; }

.btn {
  display: block; width: 100%; margin-top: .9rem; padding: .72rem 1rem;
  border: 0; border-radius: 7px; background: var(--petrol); color: #fff;
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: background .15s ease;
}
.btn:hover:not(:disabled) { background: var(--petrol-d); }
.btn:disabled {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--muted); cursor: not-allowed;
}

.btn-clear {
  display: block; width: 100%; margin-top: .45rem; padding: .35rem;
  border: 0; background: none; color: var(--muted); font: inherit;
  font-size: .8rem; cursor: pointer; border-radius: 5px;
}
.btn-clear:hover { color: var(--gold); }

/* ===== Fuss ========================================================= */

.foot {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--muted);
}
.foot p { margin: .25rem 0; }

/* ===== Mobil ======================================================== */

@media (max-width: 61.99rem) {
  .wrap { padding: 1.1rem .9rem 2rem; }
  .panel { position: sticky; bottom: .5rem; z-index: 5;
           box-shadow: 0 -2px 20px -8px rgba(35,95,118,.35); }
  .fc .fc-toolbar { flex-wrap: wrap; }
  .fc .fc-toolbar-chunk { display: flex; gap: .25rem; }
  .fc .fc-timegrid-slot { height: .8rem; }
  .fc .fc-daygrid-day-frame { height: 2.3rem; padding: .1rem .15rem; }
  .fc .day-load { font-size: .55rem; padding: .02rem .1rem; }
  .fc .fc-daygrid-day-number { font-size: .62rem; }
  .side { position: static; }
  .months-list { grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}