@charset "utf-8";
/*
 * merkliste.css - page styles of merkliste.html (the saved places).  [V2] Added 2026-10-13.
 *
 * How it fits in: merkliste.html links this file after css/style.css. Colours, sizes and components
 * (panel, notice, place list, badge, block-code, swatch, button) come from css/style.css; this file
 * only arranges them for this page, like css/konto.css did for "Meine Orte". The elements are built
 * by js/merkliste-seite.js.
 *
 * Contents
 *  1. Notice, summary and buttons
 *  2. Groups (one panel per Quadrat) and places
 *  3. Hours of the week
 *  4. Print and PDF
 */


/* =========================================================================
   1. Notice, summary and buttons
   ========================================================================= */

.merkliste-mode {
  margin-bottom: var(--space-5);
}

.merkliste-tools {
  margin-bottom: var(--space-5);
}

.merkliste-tools__summary {
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.merkliste-tools__hint {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.merkliste-empty {
  max-width: 44rem;
}

.merkliste-empty h2 {
  font-size: var(--text-xl);
}

/* A small drawing above "Noch keine Orte gemerkt": a pin over an empty block (img/bilder/leer.svg, 2026-10-14). */
.merkliste-empty::before {
  content: "";
  display: block;
  width: 7.5rem;
  height: 5.625rem;
  margin-bottom: var(--space-3);
  background: url("../img/bilder/leer.svg") no-repeat center / contain;
}

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


/* =========================================================================
   2. Groups (one panel per Quadrat) and places
   ========================================================================= */

.merkliste-group {
  margin-bottom: var(--space-5);
}

.merkliste-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}

.merkliste-group__title .block-code {
  margin-bottom: 0;
}

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

/* The last place of a group needs no line below it: the panel edge closes the list. */
.merkliste-group .place:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Category, type and address below the name, side by side, wrapping when narrow. */
.merkliste-place__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
}

/* Category with its colour: the swatch reads --cat-3 from the class cat-essen ... */
.merkliste-place__category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: 600;
}

.merkliste-place__category .swatch {
  width: 0.75rem;
  height: 0.75rem;
}

/* Links "Auf der Karte" and "Route". */
.merkliste-place__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-1);
  font-size: var(--text-s);
}


/* =========================================================================
   3. Hours of the week: <details> with a list of 7 days (<dl>)
   ========================================================================= */

.merkliste-week {
  margin-top: var(--space-2);
  font-size: var(--text-s);
}

.merkliste-week summary {
  color: var(--color-link);
  cursor: pointer;
}

/* Day names left, hours right: a grid with two columns (dt, dd, dt, dd, ...). */
.merkliste-week__list {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0.125rem var(--space-4);
  margin: var(--space-2) 0 0;
}

.merkliste-week__list dd {
  margin: 0;
  font-family: var(--font-code);
}

/* Today in bold, so it can be found at a glance. */
.merkliste-week__today {
  font-weight: 700;
}


/* =========================================================================
   3a. "Treffen planen" (js/treffen.js, added 2026-10-13)
   ========================================================================= */

.meeting {
  max-width: 48rem;
  margin-bottom: var(--space-5);
}

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

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

.meeting__form {
  display: grid;
  gap: var(--space-4);
}

/* Day and time side by side, one below the other on phones. */
.meeting__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 30rem) {
  .meeting__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.meeting__preview-title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-m);
}

/* Heading, preview, note and buttons of "Treffen planen" in one box (since 2026-10-14), with the gaps of the form. */
.meeting__result {
  display: grid;
  gap: var(--space-4);
}

/* The invitation as it will be sent: plain text, line breaks kept, long lines wrapped. */
.meeting__preview {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-ground);
  border: 0.0625rem solid var(--color-ring);
  border-radius: var(--radius-block);
  font-family: inherit;
  font-size: var(--text-s);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.meeting__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.meeting__note:empty {
  display: none;
}


/* =========================================================================
   3b. "Tag planen" (js/tagesplaner.js, added 2026-10-13)
   Layout of the form from "Treffen planen" (class meeting); here the plan:
   a time line with a line on the left, the walks between the stops in grey.
   ========================================================================= */

.dayplan__stay {
  max-width: 14rem;
}

.dayplan__plan {
  margin-top: var(--space-4);
}

.dayplan__steps {
  margin: 0 0 var(--space-3);
  padding: 0 0 0 var(--space-4);
  list-style: none;
  border-left: 0.1875rem solid var(--color-ring);
}

.dayplan__step {
  padding: var(--space-1) 0 var(--space-3);
}

/* A dot on the line for every stop, at the height of its time; events get the sand colour. */
.dayplan__line::before {
  content: "";
  position: absolute;
  top: 0.375rem;
  left: calc(-1 * var(--space-4) - 0.4375rem);
  width: 0.6875rem;
  height: 0.6875rem;
  background: var(--cat-3, var(--color-roof));     /* colour of the category of the place (2026-10-14) */
  border: 0.125rem solid var(--color-paper);
  border-radius: 50%;
}

.dayplan__step--event .dayplan__line::before {
  background: var(--color-sand-line);
}

.dayplan__line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: 0;
}

.dayplan__time {
  font-family: var(--font-code);
  font-size: var(--text-s);
  font-weight: 600;
}

.dayplan__name {
  font-weight: 600;
}

.dayplan__details,
.dayplan__walk,
.dayplan__gap,
.dayplan__end,
.dayplan__note,
.dayplan__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

/* "ca. 5 Min. zu Fuß" and "freie Zeit bis 20:00" stand above the stop they lead to. */
.dayplan__walk,
.dayplan__gap {
  font-size: var(--text-xs);
  font-style: italic;
}

.dayplan__route {
  margin-top: var(--space-3);
}

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

.dayplan__skipped {
  margin: 0 0 var(--space-3);
  font-size: var(--text-s);
}

.dayplan__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}


/* =========================================================================
   4. Print and PDF ("Als PDF speichern oder drucken" opens the print dialog)
   Buttons and links do nothing on paper; the date line appears only here.
   ========================================================================= */

.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
    color: var(--color-text-muted);
  }

  /* The PDF of the Merkliste holds only the saved events and places (changed 2026-10-14):
     "Tag planen" and "Treffen planen" stay off the paper. */
  body:not(.print-dayplan) .meeting {
    display: none;
  }

  /* "Plan als PDF" (js/tagesplaner.js) sets the class print-dayplan on <body>: then only the plan
     goes on paper, with its title and the OpenStreetMap source line (licence); the list, "Treffen planen"
     and the fields stay off. */
  .print-dayplan #merkliste-inhalt,
  .print-dayplan #treffen,
  .print-dayplan .page-intro .lead {
    display: none;
  }

  /* Fields and buttons never go on paper. */
  .meeting__intro,
  .meeting .field,
  .meeting__row,
  .meeting__preview-title,
  .meeting__note,
  .meeting__buttons,
  .dayplan__route,
  .merkliste-mode,
  .merkliste-tools__buttons,
  .merkliste-tools__hint,
  .merkliste-place__links,
  .merkliste-place__remove {
    display: none;
  }

  /* No arrow in front of "Öffnungszeiten der Woche": the hours are unfolded anyway. */
  .merkliste-week summary {
    color: var(--color-text);
    list-style: none;
  }

  .merkliste-week summary::-webkit-details-marker {
    display: none;
  }

  /* A place is not cut in two between two pages. */
  .merkliste-group .place {
    break-inside: avoid;
  }

  .merkliste-group {
    border: 0.0625rem solid #cccccc;
    box-shadow: none;
  }

  /* The header sticks to the top on screen (style.css). On paper it would come back on every page
     or lie over the text, and its blur does not print: here it is a normal block without effects. */
  .site-header {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Browsers leave out background colours when printing (to save ink). The Quadrat code ("G2") is
     white on black and would vanish: on paper it is black on white with a black frame. */
  .block-code {
    background: none;
    color: #000000;
    border: 0.125rem solid #000000;
  }

  /* The category colours and the state badges carry information: print their colours anyway. */
  .swatch,
  .badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* =========================================================================
   5. Order on wide screens (added 2026-10-14)
   Saved events with their calendar side by side, the places in two columns. "Tag planen" and
   "Treffen planen" one below the other over the whole width, each with a colour of its own; inside,
   the fields stand side by side. On phones everything stays one below the other.
   ========================================================================= */

.merkliste-events-row,
.merkliste-places,
.merkliste-planning {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

.merkliste-events-row > .merkliste-group,
.merkliste-places > .merkliste-group,
.merkliste-planning > .meeting {
  margin-bottom: 0;
}

/* The two planners: a coloured line on top, the colour fading out into white, and a round icon before the
   title. --plan-tint and --plan-accent are set per planner below (warm for the day, green-blue for meeting). */
.merkliste-planning > .meeting {
  --plan-tint: #fff1de;
  --plan-accent: #c77a1c;
  max-width: none;
  border-top: 0.375rem solid var(--plan-accent);
  background: linear-gradient(180deg, var(--plan-tint), var(--color-paper) 12rem);
}

.merkliste-planning > .meeting--treffen {
  --plan-tint: #e0f2f1;
  --plan-accent: #23857a;
}

.merkliste-planning .meeting__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.meeting__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-paper);
  background: var(--plan-accent, var(--color-roof));
  border-radius: 50%;
}

/* the time line of the plan takes the colour of its planner */
.merkliste-planning .dayplan__steps {
  border-left-color: var(--plan-tint);
}

/* The preview of the invitation on a light tint of its planner. */
.merkliste-planning .meeting__preview {
  background: var(--plan-tint);
  border-color: transparent;
}

@media (min-width: 64rem) {
  .merkliste-events-row {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  .merkliste-places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merkliste-planning > .meeting {
    padding: var(--space-5) var(--space-6);
  }

  /* Inside the planners two columns: on the left the form, on the right the result (the plan of the day, the
     preview of the invitation). .form of css/style.css is at most 40rem wide; here it may fill its column. */
  .merkliste-planning .meeting__form {
    max-width: none;
  }

  .merkliste-planning .dayplan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    align-items: start;
  }

  .merkliste-planning .dayplan > .meeting__title,
  .merkliste-planning .dayplan > .meeting__intro {
    grid-column: 1 / -1;
  }

  .merkliste-planning .dayplan > .meeting__form {
    grid-column: 1;
    grid-row: 3 / span 3;
  }

  .merkliste-planning .dayplan > .dayplan__plan,
  .merkliste-planning .dayplan > .meeting__buttons,
  .merkliste-planning .dayplan > .meeting__note {
    grid-column: 2;
  }

  .merkliste-planning .dayplan__plan {
    margin-top: 0;
  }

  .merkliste-planning .dayplan__stay {
    max-width: 14rem;
  }

  /* "Treffen planen": the fields on the left, one below the other; the result (heading, preview, note and
     buttons, div.meeting__result) on the right, from the first row down */
  .merkliste-planning .meeting--treffen .meeting__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    align-items: start;
  }

  .meeting--treffen .meeting__form > .meeting__row,
  .meeting--treffen .meeting__form > .field {
    grid-column: 1;
  }

  .meeting--treffen .meeting__result {
    grid-column: 2;
    grid-row: 1 / span 5;
  }

  .meeting--treffen .meeting__preview-title {
    margin-top: 0;
  }
}

/* --- Calendar of the saved events (js/merkliste-seite.js, eventsCalendar) --- */

.merkliste-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.merkliste-calendar__head .button {
  margin-bottom: 0;
}

.merkliste-calendar__title {
  margin: 0;
  font-size: var(--text-l);
}

.merkliste-calendar__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0.125rem;
  margin: 0;
}

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

.merkliste-calendar__grid td {
  padding: 0;
}

/* One day: number, under it the dots; a day with events is a button with a frame. */
.merkliste-calendar__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.25rem 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-s);
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
}

button.merkliste-calendar__day {
  background: var(--color-paper);
  color: var(--color-text);
  font-weight: 600;
  border-color: var(--color-ring);
  cursor: pointer;
}

button.merkliste-calendar__day:hover {
  border-color: var(--color-control-line);
}

.merkliste-calendar__day--today {
  box-shadow: inset 0 0 0 0.125rem var(--color-roof);
  color: var(--color-text);
}

.merkliste-calendar__dots {
  display: flex;
  gap: 0.125rem;
}

.merkliste-calendar__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--color-roof);
}

/* the colours of the kinds of event (the same as in css/events.css) */
.merkliste-calendar__dot.event--art-musik   { background: #AD1457; }
.merkliste-calendar__dot.event--art-kultur  { background: var(--kultur-4); }
.merkliste-calendar__dot.event--art-markt   { background: #2E7D32; }
.merkliste-calendar__dot.event--art-party   { background: #303F9F; }
.merkliste-calendar__dot.event--art-familie { background: #A04A06; }
.merkliste-calendar__dot.event--art-essen   { background: var(--essen-4); }
.merkliste-calendar__dot.event--art-shoppen { background: var(--shoppen-4); }

/* The event that a click in the calendar points to lights up for a moment. */
.merkliste-events .place.is-highlighted {
  background: var(--color-selected-soft);
  transition: background-color 0.3s ease;
}

/* "nur dieser Termin" or "alle Termine" next to the title of a saved event (added 2026-10-14) */
.merkliste-event__single {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  color: var(--color-sand-ink);
  background: var(--color-sand);
  border-radius: 1rem;
  font-size: var(--text-xs);
  font-weight: 600;
  vertical-align: 0.1em;
}

@media print {
  .merkliste-calendar {
    display: none;
  }

  .merkliste-events-row,
  .merkliste-places,
  .merkliste-planning {
    display: block;
  }
}