@charset "utf-8";
/*
 * events.css - page styles of events.html.  [V2] Added 2026-10-13.
 *
 * How it fits in: events.html links this file after css/style.css. Colours, sizes and components
 * (panel, notice, field, badge) come from css/style.css; this file arranges the filter row, the
 * highlighted entries ("Anzeige"), the days with their events and the box for organisers.
 * The entries are built by js/events-seite.js; css/gerade-offen.css reuses nothing from here.
 */

.events-notice {
  margin-bottom: var(--space-5);
}

/* Filter row: "Zeitraum", "Art" and the status line, wrapping on phones. */
.events-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.events-tools[hidden] {
  display: none;
}

.events-tools__field {
  flex: 0 1 14rem;
}

.events-tools__status {
  margin: 0;
  min-height: var(--target);
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.events-section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}

/* --- Highlighted (paid) entries: cards side by side, with the sand colour of "current" things --- */

.events-highlight {
  margin-bottom: var(--space-6);
}

.events-cards {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .events-cards {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}

/* Colours per kind of event (added 2026-10-13): --art is a dark ink (stripe, calendar sheet, label text),
   --art-bg a light tint (label background). Food, culture and shopping take the category colours of the
   map; the other kinds have colours of their own. All inks keep a contrast of at least 4.5:1 with white. */
.event--art-musik   { --art: #AD1457;          --art-bg: #FCE4EC; }
.event--art-kultur  { --art: var(--kultur-4);  --art-bg: var(--kultur-1); }
.event--art-markt   { --art: #2E7D32;          --art-bg: #E8F5E9; }
.event--art-party   { --art: #303F9F;          --art-bg: #E8EAF6; }
.event--art-familie { --art: #A04A06;          --art-bg: #FFF1DE; }
.event--art-essen   { --art: var(--essen-4);   --art-bg: var(--essen-1); }
.event--art-shoppen { --art: var(--shoppen-4); --art-bg: var(--shoppen-1); }

/* A card on top: calendar sheet on the left, the text next to it; sand edge on top as before. */
.events-cards .event {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-paper);
  border: 0.0625rem solid var(--color-sand-line);
  border-radius: var(--radius-panel);
  box-shadow: inset 0 0.25rem 0 var(--color-sand);   /* sand edge on top: stands out without shouting */
}

.event__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Days: one panel per day, headed by a calendar sheet with the date next to it --- */

.events-day {
  margin-bottom: var(--space-4);
}

.events-day__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-l);
}

.events-day__label {
  display: grid;
  line-height: 1.25;
}

.events-day__date {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  font-weight: 400;
}

.events-day__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* An event in the day list: a stripe on the left in the colour of its kind. */
.events-day__list .event {
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-top: 0.0625rem solid var(--color-ring);
  box-shadow: inset 0.25rem 0 0 var(--art, var(--color-ring));
}

/* --- Calendar sheet (js/events-seite.js, calendarSheet): month band, big day, day of the week --- */

.cal {
  display: inline-grid;
  flex: 0 0 auto;
  width: 3.25rem;
  overflow: hidden;
  text-align: center;
  line-height: 1;
  background: var(--color-paper);
  border: 0.0625rem solid var(--color-ring);
  border-radius: var(--radius-block);
  box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06);
}

/* the band on top: in the colour of the event's kind, dark for the day headings */
.cal__month {
  padding: 0.25rem 0;
  background: var(--art, var(--color-roof));
  color: var(--color-text-on-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cal__day {
  padding-top: 0.3125rem;
  font-size: 1.375rem;
  font-weight: 700;
}

.cal__weekday {
  padding: 0.125rem 0 0.375rem;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* --- One event --- */

.event p {
  margin: 0;
}

.event__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.event__time {
  font-family: var(--font-code);
  font-size: var(--text-s);
}

/* "Anzeige": small, framed, always visible text, so the ad is recognisable (also without colours). */
.event__ad-label {
  padding: 0 var(--space-2);
  color: var(--color-sand-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0.0625rem solid var(--color-sand-line);
  border-radius: var(--radius-block);
}

.event__title {
  margin: var(--space-1) 0 0;
  font-size: var(--text-m);
}

.event__kind,
.event__sponsor {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.event__place {
  font-size: var(--text-s);
}

/* Two classes, so it wins over ".event p { margin: 0 }" above. */
.event .event__text {
  margin-top: var(--space-1);
}

.events-empty {
  color: var(--color-text-muted);
}

/* A small drawing above "keine passenden Events" (img/bilder/leer.svg, 2026-10-14). */
.events-empty::before {
  content: "";
  display: block;
  width: 6rem;
  height: 4.5rem;
  margin-bottom: var(--space-2);
  background: url("../img/bilder/leer.svg") no-repeat center / contain;
}

/* A small drawing in front of the kind of an event ("Musik", "Markt" ...), our own icons in img/icons/
   (2026-10-14). Essen, Kultur and Shoppen use the icons of the categories of the map. */
.event__art {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.event__art::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.event--art-musik .event__art::before   { background-image: url("../img/icons/musik.svg"); }
.event--art-kultur .event__art::before  { background-image: url("../img/icons/kultur.svg"); }
.event--art-markt .event__art::before   { background-image: url("../img/icons/markt.svg"); }
.event--art-party .event__art::before   { background-image: url("../img/icons/party.svg"); }
.event--art-familie .event__art::before { background-image: url("../img/icons/familie.svg"); }
.event--art-essen .event__art::before   { background-image: url("../img/icons/essen.svg"); }
.event--art-shoppen .event__art::before { background-image: url("../img/icons/shoppen.svg"); }

/* "Deine Meldung – noch nicht geprüft": an event reported in this browser (event-melden.html). */
.event__report-label {
  padding: 0 var(--space-2);
  color: var(--color-info);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 0.0625rem dashed var(--color-info);
  border-radius: var(--radius-block);
}

/* The kind of the event as a small coloured label ("Musik"), then "jeden Donnerstag" (added 2026-10-13). */
.event .event__kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}

.event__art {
  padding: 0.0625rem var(--space-2);
  background: var(--art-bg, var(--color-plaza));
  color: var(--art, var(--color-text));
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-pill);
}

/* "Merken" and, for own reports, "Meldung löschen" in one row under the text. */
.event__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.event__actions:empty {
  display: none;
}

.event__actions .button {
  margin-bottom: 0;
}

/* "Merken" pressed: sand colour and a tick, as in the profile on the map. */
.event__save[aria-pressed="true"] {
  background: var(--color-sand);
}

.event__save[aria-pressed="true"]::before {
  content: "✓ ";
}

/* --- Search and view (added 2026-10-13): "Liste | Monat" as a segmented control like the weekdays of the map --- */

.events-tools__view {
  flex: 0 0 auto;
  min-width: 10rem;
}

.events-tools__search {
  flex: 1 1 14rem;
  max-width: 20rem;
}

/* --- Month view (js/events-seite.js, added 2026-10-13): a calendar table, one button per day --- */

.events-month {
  margin-bottom: var(--space-5);
}

.events-month__head,
.events-month__grid {
  max-width: 42rem;
}

/* "‹  Oktober 2026  ›" */
.events-month__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.events-month__title {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
}

/* Seven equal columns with small gaps between the days. */
.events-month__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0.25rem;
}

.events-month__grid th {
  padding: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

.events-month__grid td {
  padding: 0;
  vertical-align: top;
}

/* One day: the number on top, the dots below; white like the cards. */
.events-month__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.375rem 0.125rem;
  background: var(--color-paper);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-s);
  border: 0.0625rem solid var(--color-ring);
  border-radius: 0.5rem;
  cursor: pointer;
}

.events-month__day:hover {
  border-color: var(--color-control-line);
}

/* A day without events cannot be chosen: grey and without a frame. */
.events-month__day:disabled {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  cursor: default;
}

/* Today: a dark ring; the chosen day: the sand colour of "current" things. */
.events-month__day--today {
  box-shadow: inset 0 0 0 0.125rem var(--color-roof);
  font-weight: 700;
}

.events-month__day[aria-pressed="true"] {
  background: var(--color-sand);
  border-color: var(--color-sand-line);
}

/* Days that are over: a little paler. */
.events-month__day--past {
  opacity: 0.6;
}

.events-month__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.125rem;
}

/* One dot per event in the colour of its kind (--art comes from the class event--art-...). */
.events-month__dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--art);
  border-radius: 50%;
}

/* More than four events on one day: "+3" instead of more dots. */
.events-month__more {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 0.5rem;
}

#events-monat-liste {
  margin-top: var(--space-4);
}

/* --- Form "Event melden" (event-melden.html, added 2026-10-13) --- */

.event-form {
  max-width: 40rem;
}

.event-form__notice {
  max-width: 40rem;
  margin-bottom: var(--space-5);
}

/* Beginn and Ende (time sliders, js/zeitregler.js) side by side from 40rem, one below the other on phones. */
.event-form__times {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40rem) {
  .event-form__times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* A tick with its text: the box on the left, the text wraps next to it. */
.event-form__check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
}

.event-form__check input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--color-roof);
}

/* "Wiederholung" (added 2026-10-13): two choices one below the other, without the frame of a fieldset. */
.event-form__repeat {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- Box for organisers and source line --- */

.events-organiser {
  max-width: 44rem;
  margin-top: var(--space-6);
}

.events-organiser h2 {
  font-size: var(--text-xl);
}

.events-source {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-s);
}