/* Tage als Karten nebeneinander (Karussell); die heutige steht beim Öffnen in der Mitte. */
.days { display: grid; gap: 18px; width: min(100%, 38rem); min-width: 0; }
.days-head { display: grid; gap: 10px; }
.days .eyebrow { color: var(--on-page); opacity: 0.8; }
.days .greeting { color: var(--on-page); }
.muted { color: var(--ink-soft); }

.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: start;
  padding: 6px 8% 22px;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  outline: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 84%; scroll-snap-align: center; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s; }
.rail > .side { transform: scale(0.94); opacity: 0.7; }
.rail:focus-visible { outline: 2px solid var(--on-page); outline-offset: -2px; }

.daycard {
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 34px -20px rgba(90, 20, 0, 0.6), 0 2px 6px rgba(90, 20, 0, 0.12);
}
.band {
  padding: 14px 18px 12px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--band);
}
.band .day { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1; background: var(--badge); color: var(--badge-ink); padding: 4px 10px 6px; border-radius: 4px; }
.band .date { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(253, 238, 233, 0.85); padding: 2px 8px; border-radius: 3px; }
.band .new { margin-left: auto; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); background: var(--accent); border-radius: 999px; padding: 3px 10px; }
.card-body { padding: 18px 20px 24px; display: grid; gap: 1em; }
.card-body p { margin: 0; }
.card-body blockquote { margin: 0; padding: 0.2em 0 0.2em 0.9em; font-size: 1.12rem; }

.sealed {
  border-radius: 10px;
  min-height: 13rem;
  padding: 18px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  background: var(--sealed);
  box-shadow: 0 10px 20px -14px rgba(90, 20, 0, 0.7);
}
.sealed .tag { background: var(--paper); color: var(--ink); border-radius: 6px; padding: 10px 14px; display: grid; gap: 2px; }
.sealed strong { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; }
.sealed span { font-size: 0.9rem; color: var(--ink-soft); }
.seal {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--paper);
  background: radial-gradient(circle at 35% 30%, #fff0bf, var(--accent) 60%, var(--ink));
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(90, 20, 0, 0.3);
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(3deg); } }

.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.chip {
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid var(--on-page);
  background: transparent;
  color: var(--on-page);
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
}
.chip[aria-current="true"] { background: var(--on-page); color: var(--page); }
.chip:disabled { border-style: dashed; opacity: 0.55; cursor: default; }
.chip:focus-visible { outline: 2px solid var(--on-page); outline-offset: 2px; }

.closing {
  margin: 0;
  color: var(--on-page);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  white-space: pre-line;
  text-align: center;
}
.privacy { margin: 0; font-size: 0.8rem; color: var(--on-page); opacity: 0.75; text-align: center; }

.preview-bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  margin: -12px auto 20px;
  max-width: 38rem;
  text-align: center;
  font-size: 0.85rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 0.4em 1em;
}

@media (min-width: 900px) {
  .rail { margin-inline: 0; padding-inline: 6%; }
}

/* ---------- Home-Bildschirm ---------- */
.install { display: flex; justify-content: center; }
.install p { margin: 0; color: var(--ink); background: var(--paper) !important; max-width: 30rem; text-align: center; font-size: 0.88rem; background: rgba(253, 238, 233, 0.75); border-radius: 10px; padding: 8px 14px; }
.install-button {
  font: inherit;
  font-size: 0.92rem;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
}
.install-button:focus-visible { outline: 2px solid var(--on-page); outline-offset: 3px; }

/* ---------- Stapel ---------- */
.stack { display: grid; gap: 16px; outline: none; }
.stack:focus-visible { outline: 2px solid var(--on-page); outline-offset: 4px; border-radius: 10px; }
.pile { display: grid; align-items: start; padding-bottom: 36px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pile > .daycard {
  grid-area: 1 / 1;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s;
  will-change: transform;
}
.pile > .daycard.top { cursor: grab; }
.pile > .daycard.behind { overflow: hidden; }
.pile > .daycard.dragging { transition: none; cursor: grabbing; }
.pile > .daycard.behind .card-body,
.pile > .daycard.behind .band > * { visibility: hidden; }
.ctrl { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -14px; }
.ctrl button {
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid var(--on-page);
  background: transparent;
  color: var(--on-page);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.ctrl button:disabled { opacity: 0.35; cursor: default; }
.ctrl button:focus-visible { outline: 2px solid var(--on-page); outline-offset: 2px; }
.ctrl .where { font-size: 0.9rem; text-align: center; color: var(--on-page); }

/* ---------- Kartei ---------- */
.file { display: grid; outline: none; }
.file > .sealed { min-height: 0; padding: 14px 16px 30px; margin-bottom: -16px; transform: scale(0.96); grid-auto-flow: column; place-content: center start; text-align: left; }
.file > .daycard { position: relative; }
.file > .daycard + .daycard { margin-top: -10px; }
.file > .daycard.open { z-index: 2; }
.file > .daycard.closed { cursor: pointer; }
.file > .daycard.closed .card-body { display: none; }
.file > .daycard.closed .band { padding-bottom: 22px; }
.file > .daycard.closed .band::after {
  content: attr(data-title);
  flex-basis: 100%;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-display);
  font-size: 1.05rem;
  background: rgba(253, 238, 233, 0.85);
  padding: 2px 8px;
  border-radius: 3px;
}
.file > .daycard:focus-visible { outline: 2px solid var(--on-page); outline-offset: 2px; }