/* ============================================================
   Kalender am Handy

   WICHTIG: frontend.css des Plugins bleibt unangetastet und
   byteidentisch zum Original. Alles hier ist eine Schicht DARÜBER,
   geladen nach frontend.css und nur auf der Seite „Mieten & Termine".
   Wer den Kalender aktualisiert, überschreibt diese Datei nicht.

   Zwei Dinge waren am Telefon kaputt:

   1. Das Raster lief über den rechten Rand hinaus, die Spalte Sonntag
      war abgeschnitten. Ursache ist `repeat(7, 1fr)`: 1fr heißt
      `minmax(auto, 1fr)`, und `auto` als Mindestwert ist die
      Mindestbreite des Inhalts. Ein unteilbares Wort wie
      „Öffentliches" ist breiter als ein Siebtel von 390 Pixeln — also
      wuchs die Spalte, und das Raster sprengte seinen Kasten.
      `minmax(0, 1fr)` erlaubt den Spalten, schmaler zu werden.

   2. In eine 50 Pixel breite Zelle passt kein Termintext. „Öffentliches
      Schießen 10:00:00" wurde zu „Öffentli… Schieße… 10:00:0…" — das
      liest niemand. Am Telefon wird aus jedem Eintrag deshalb ein
      farbiger Balken: Man sieht auf einen Blick, an welchen Tagen etwas
      los ist und in welchem Zustand. Was genau, steht darunter in der
      Terminliste, in ganzen Worten und mit lesbaren Zeiten.

   Die Bedienung bleibt, wie sie war: ein freier Tag ist anklickbar und
   öffnet die Anfrage.
   ============================================================ */

/* Gilt überall: Spalten dürfen schmaler werden als ihr Inhalt. */
.sv-booking-calendar__grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.sv-booking-calendar__event,
.sv-booking-calendar__day-title,
.sv-booking-calendar__day-times {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Auf großen Bildschirmen überflüssig — dort steht der Text in den
   Zellen. Diese Regel MUSS vor dem Media-Query stehen: bei gleicher
   Spezifität gewinnt die spätere, und dann bliebe der Hinweis auch am
   Telefon verborgen. */
.kalender-mobilhinweis { display: none; }

@media (max-width: 640px) {

  /* ---- Kopf: Monat und Pfeile in eine Zeile ---- */
  .sv-booking-calendar__header {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 0.2rem;
  }
  .sv-booking-calendar__title {
    font-size: 1.15rem;
    margin: 0;
    order: 0;
  }
  .sv-booking-calendar__nav {
    display: flex;
    gap: 0.4rem;
    order: 1;
  }
  .sv-booking-calendar__nav-btn {
    width: 2.75rem;
    height: 2.75rem;      /* Daumengroß, nicht fingerspitzengroß. */
    display: grid;
    place-items: center;
  }

  /* ---- Wochentage: zwei Buchstaben reichen ---- */
  .sv-booking-calendar__weekday {
    padding: 0.45rem 0.1rem !important;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }

  /* ---- Tageszellen ---- */
  .sv-booking-calendar__day {
    min-height: 3.1rem !important;
    padding: 0.3rem 0.2rem !important;
    align-items: stretch;
    gap: 0;
  }
  .sv-booking-calendar__day-number {
    font-size: 0.95rem !important;
    text-align: center;
    line-height: 1.2;
  }

  /* ---- Aus dem Termintext wird ein Balken ----
     Die Hintergrundfarbe steht als Inline-Stil am Element und trägt die
     Bedeutung (angefragt, bestätigt, gesperrt, Sonstiges). Sie bleibt
     erhalten; nur der Text verschwindet. font-size:0 wirkt auch auf die
     beiden Kindelemente, die keine eigene Größe mitbringen. */
  .sv-booking-calendar__event {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin-top: 3px !important;
    height: 6px;
    min-height: 6px;
    border-radius: 3px !important;
    overflow: hidden;
  }
  .sv-booking-calendar__day-title,
  .sv-booking-calendar__day-times {
    display: none !important;
  }

  /* Mehr als drei Balken sprengen die Zelle. */
  .sv-booking-calendar__event:nth-of-type(n + 4) { display: none !important; }

  /* ---- Legende untereinander statt nebeneinander ---- */
  .sv-booking-calendar__legend-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.8rem !important;
  }
  .sv-booking-calendar__legend-item { font-size: 0.8rem; }

  /* ---- Der Hinweis auf die Liste darunter ---- */
  .kalender-mobilhinweis {
    display: block;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.9rem;
    background: var(--papier-2, #EDE9DC);
    border-left: 4px solid var(--gold, #D9A62E);
    border-radius: 9px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft, #4C5B4F);
  }
}


/* ---- Sehr schmale Geräte ---- */
@media (max-width: 380px) {
  .sv-booking-calendar__day { min-height: 2.8rem !important; }
  .sv-booking-calendar__day-number { font-size: 0.88rem !important; }
  .sv-booking-calendar__legend-items { grid-template-columns: 1fr; }
}