/* ============================================================
   Monats-Kalender [ah_kalender] — Design-Handoff v3 (#termine).
   Eigenständige Styles, Präfix .ahk-* (kollidiert nicht mit dem
   Theme). Werte nach v3-Tokens: Papier/Karten hell, Ränder
   #ECE6DA, Zellen-Radius 14px, Pills 999px, kein Blau.
   ============================================================ */

.ahk { max-width: 1200px; margin-inline: auto; }

.ahk :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #74B239;
}

/* ---------- Zielgruppen-Filter (Pills) ---------- */

.ahk-filter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  width: fit-content; max-width: 100%;
  margin: 0 auto 22px; padding: 6px;
  background: #EDE9D0; border-radius: 999px;
}
.ahk-pill {
  cursor: pointer; white-space: nowrap;
  min-height: 44px; padding: 10px 18px;
  border: none; border-radius: 999px;
  background: transparent; color: #7A6E5E;
  font-family: inherit; font-weight: 700; font-size: 14.5px;
  transition: background .12s, color .12s;
}
.ahk-pill.is-active {
  background: #894F21; color: #fff;
  box-shadow: 0 3px 10px rgba(44, 79, 23, .18);
}

/* ---------- Layout: Raster links, Panel rechts ---------- */

.ahk-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ahk-cal { flex: 1 1 440px; min-width: min(100%, 300px); }
.ahk-side { flex: 1 1 300px; min-width: min(100%, 280px); }

@media (max-width: 859px) {
  .ahk-layout { flex-direction: column; }
  .ahk-cal, .ahk-side { flex-basis: auto; width: 100%; }
}

/* ---------- Kalender-Karte ---------- */

.ahk-cal {
  background: #fff; border: 1px solid #ECE6DA; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(44, 79, 23, .08), 0 2px 6px rgba(44, 79, 23, .06);
  padding: clamp(16px, 2.6vw, 24px);
}

.ahk-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ahk-month {
  font-family: "Bricolage Grotesque", inherit;
  font-weight: 700; font-size: clamp(19px, 2.6vw, 24px); color: #894F21;
}
.ahk-nav {
  cursor: pointer; width: 44px; height: 44px;
  border: 1px solid #E4DAC8; border-radius: 12px;
  background: #fff; color: #894F21; font-size: 18px; line-height: 1;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.ahk-nav:not(:disabled):hover { border-color: #894F21; }
.ahk-nav:disabled { cursor: default; background: #F5F0E6; color: #CBC3B4; }

/* Wochentags-Zeile */
.ahk-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-bottom: 6px;
  text-align: center; font-weight: 800; font-size: 11px;
  letter-spacing: .05em; color: #A98F68;
}
.ahk-dow span { padding: 4px 0; }
.ahk-dow-sun { color: #C0806B; }

/* Monatsraster */
.ahk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ahk-cell {
  min-height: clamp(50px, 8.5vw, 68px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 4px;
  border: 2px solid #ECE6DA; border-radius: 14px;
  background: #fff; cursor: pointer; font-family: inherit;
}
.ahk-cellnum {
  font-family: "Bricolage Grotesque", inherit;
  font-weight: 700; font-size: clamp(15px, 2.3vw, 17px);
  line-height: 1; color: #484848;
}
/* Vergangen / Ruhetag / kein passender Termin */
.ahk-cell-off, .ahk-cell-blank {
  cursor: default; background: transparent; border-color: transparent;
}
.ahk-cell-off .ahk-cellnum { color: #C9C1B0; }
/* Ausgebucht: Karte bleibt sichtbar, nur nicht klickbar */
.ahk-cell-full { cursor: default; }
/* Ausgewählter Tag: grün */
.ahk-cell.is-selected { background: #E7EFC9; border-color: #74B239; }
.ahk-cell.is-selected .ahk-cellnum { color: #2C4F17; }

/* Verfügbarkeits-Punkt + Mini-Label in der Zelle */
.ahk-cellstate {
  display: flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700;
}
.ahk-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  display: inline-block;
}
.ahk-dot-free { background: #74B239; }
.ahk-dot-low { background: #FF3B5F; }
.ahk-dot-full { background: #C9C1B0; }
.ahk-dot-free + span { color: #3E6D1E; }
.ahk-dot-low + span { color: #C22143; }
.ahk-dot-full + span { color: #9A9284; }

/* Legende */
.ahk-legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px;
  font-weight: 700; font-size: 12px; color: #7A6E5E;
}
.ahk-legend span { display: flex; align-items: center; gap: 6px; }
.ahk-legend .ahk-dot { width: 9px; height: 9px; }

/* ---------- Slot-Panel ---------- */

.ahk-panel {
  background: #fff; border: 1px solid #ECE6DA; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(44, 79, 23, .08), 0 2px 6px rgba(44, 79, 23, .06);
  padding: clamp(18px, 2.6vw, 26px);
}
.ahk-panel-kicker {
  font-weight: 800; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: #57893E; margin-bottom: 6px;
}
.ahk-panel-title {
  font-family: "Bricolage Grotesque", inherit;
  font-weight: 700; font-size: 24px; color: #894F21;
  margin: 0 0 18px;
}
.ahk-slots { display: flex; flex-direction: column; gap: 10px; }
.ahk-slot {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #ECE6DA; border-radius: 16px;
  padding: 12px 14px; background: #fff;
}
.ahk-slot-off { background: #F7F4EE; }
.ahk-slot-time {
  font-family: "Bricolage Grotesque", inherit;
  font-weight: 700; font-size: 19px; color: #484848; flex-shrink: 0;
}
.ahk-slot-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ahk-slot-end { font-weight: 700; font-size: 12px; color: #9A9284; }
.ahk-slot-seats {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13px;
}
.ahk-seats-free { color: #3E6D1E; }
.ahk-seats-low { color: #C22143; }
.ahk-seats-full { color: #9A9284; }
.ahk-soldout { flex-shrink: 0; font-weight: 700; font-size: 12.5px; color: #9A9284; }

/* Buchen → rote Pill */
.ahk-book {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 10px 16px;
  border-radius: 999px; background: #FF3B5F; color: #fff;
  text-decoration: none;
  font-family: "Bricolage Grotesque", inherit;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 3px 10px rgba(44, 79, 23, .14);
  transition: background .12s, color .12s;
}
.ahk-book:hover { background: #ED2E52; color: #fff; }

.ahk-panel-note { font-size: 12.5px; color: #9A9284; margin: 14px 0 0; line-height: 1.5; }

/* Leerer Zustand (kein wählbarer Tag im Monat) */
.ahk-empty {
  background: #EDE9D0; border-radius: 22px;
  padding: 28px 24px; text-align: center;
}
.ahk-empty-title {
  font-family: "Bricolage Grotesque", inherit;
  font-weight: 700; font-size: 19px; color: #894F21; margin-bottom: 8px;
}
.ahk-empty p { font-size: 14px; color: #5C5348; line-height: 1.5; margin: 0; }

/* Freundlicher Leer-Zustand für Monate ohne einen einzigen angelegten
   Slot (statt Grau-Wüste) — liegt IM Raster, deshalb volle Breite */
.ahk-empty-month { grid-column: 1 / -1; min-height: 180px; display: grid; place-content: center; gap: 8px; }

/* Telefon-Fallback */
.ahk-phonebox {
  background: #FFF4EE; border: 1px solid #F3D9CC; border-radius: 18px;
  padding: 18px 20px; margin-top: 14px; text-align: center;
}
.ahk-phonebox-title { font-weight: 700; font-size: 13.5px; color: #894F21; margin-bottom: 12px; }
.ahk-phonebtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 12px 22px;
  border: 2px solid #E0D9CB; border-radius: 999px;
  background: #fff; color: #484848; text-decoration: none;
  font-family: "Bricolage Grotesque", inherit;
  font-weight: 700; font-size: 15px;
  transition: border-color .12s, color .12s;
}
.ahk-phonebtn:hover { border-color: #74B239; color: #2C4F17; }

/* Hinweise (Fehler / noscript) + Laden */
.ahk-note {
  grid-column: 1 / -1;
  background: #FFF4EE; border: 1px solid #F3D9CC; border-radius: 14px;
  padding: 14px 16px; font-size: 14.5px; color: #4A3B2C; line-height: 1.5;
}
.ahk-loading {
  grid-column: 1 / -1; min-height: 120px;
  display: grid; place-items: center;
  color: #9A9284; font-weight: 700; font-size: 13.5px;
}

/* Einheitliches Button-Motion-System (zentral definiert in
   ah-design.css des Child-Themes — Werte hier EXAKT gespiegelt):
   Hover hebt ab (translateY(-2px) scale(1.02), Overshoot-Kurve),
   Active drückt (scale(.98), schnell, auch auf Touch). Bewegung nur
   ohne Reduced-Motion; Hover-Lift nur auf echten Hover-Geräten.
   Disabled hebt nie ab (:not(:disabled)-Guards). */
@media (prefers-reduced-motion: no-preference) {
  .ahk-pill, .ahk-nav, .ahk-book, .ahk-phonebtn {
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
      box-shadow .18s ease,
      background .12s, color .12s, border-color .12s;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ahk-pill:hover, .ahk-nav:not(:disabled):hover,
  .ahk-book:hover, .ahk-phonebtn:hover {
    transform: translateY(-2px) scale(1.02);
  }
  .ahk-book:hover, .ahk-phonebtn:hover {
    box-shadow: 0 8px 18px rgba(20, 40, 10, .18);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ahk-pill:active, .ahk-nav:not(:disabled):active,
  .ahk-book:active, .ahk-phonebtn:active {
    transform: translateY(0) scale(.98);
    transition-duration: .08s;
  }
  .ahk-book:active, .ahk-phonebtn:active {
    box-shadow: 0 2px 6px rgba(20, 40, 10, .16);
  }
}