/* Weihnachtskino: Programmheft, Klassiker, Merkliste und Videotext */
.kino {
  max-width: 1000px;
  margin: auto;
  padding: 0 16px 20px;
}
.page-hero {
  text-align: center;
  padding: 6px 0 2px;
}
.page-hero h1 {
  font: clamp(32px, 6vw, 54px) var(--font-display);
  color: #ffdf9e;
  margin: 6px 0;
}
.page-hero p {
  margin: 0;
  color: var(--c-text-2);
}
.intro {
  max-width: 680px;
  margin: 10px auto 22px;
  text-align: center;
  color: var(--c-text-2);
}
.kino-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #13232a;
}
.tabs button {
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-text-2);
  font-weight: 600;
}
.tabs button:hover {
  background: #ffffff10;
}
.tabs button[aria-pressed="true"] {
  background: linear-gradient(#f2d39a, #c99b5c);
  color: #22343a;
}
.count-badge {
  display: inline-block;
  min-width: 22px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ffffff1f;
  font-size: 13px;
  text-align: center;
}
.tabs [aria-pressed="true"] .count-badge {
  background: #22343a26;
}
.view-toggle {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--c-brass);
  border-radius: 9px;
  background: #000;
  color: #ffe600;
  font: 700 15px var(--font-mono);
  letter-spacing: 0.03em;
}
.view-toggle:hover {
  background: #1d1d1d;
}
.view-toggle[aria-pressed="true"] {
  background: #ffe600;
  color: #000;
}
.moods {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 -4px 4px;
  padding: 2px 4px 8px;
}
.moods .chip {
  flex: none;
}
.stand {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--c-text-3);
}
.heading {
  font: 28px var(--font-display);
  color: #ffe1ac;
  margin: 22px 0 2px;
}
.count {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--c-text-3);
}

/* Programmheft */
.day {
  margin: 0 0 18px;
  border: 1px solid #577a78;
  border-radius: 12px;
  overflow: clip;
  background: #1f3940;
}
.day-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 16px;
  border-bottom: 2px solid var(--c-brass);
  background: linear-gradient(#3a3134, #2f2a2e);
  font: 22px var(--font-display);
  color: var(--c-gold);
}
.day-head small {
  font: 700 13px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-brass-hi);
}
.shows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.show {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: start;
  padding: 14px 16px;
  border-top: 1px solid #ffffff12;
}
.show:first-child {
  border-top: 0;
}
.show.now {
  background: linear-gradient(90deg, #a54b4940, transparent 70%);
}
.when {
  display: grid;
  gap: 5px;
  justify-items: start;
}
.when time {
  font: 700 26px/1 var(--font-display);
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}
.channel {
  display: inline-block;
  padding: 2px 7px;
  border: 1.5px solid #cfd8d3;
  border-radius: 6px;
  color: #e9f0ec;
  font: 700 12.5px var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.anytime {
  font: italic 16px var(--font-display);
  color: var(--c-brass-hi);
}
.info h3 {
  margin: 0 0 6px;
  font: 20px/1.25 var(--font-display);
  color: #ffe2ac;
}
.flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}
.flag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-red);
  color: var(--c-red-ink);
  font-size: 13px;
  font-weight: 700;
}
.flag.tonight {
  background: #c99b5c;
  color: #22343a;
}
.cliches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--c-text-2);
}
.cliches .label {
  color: var(--c-text-3);
}
.source {
  font-size: 14px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.act,
.cal summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--c-brass);
  border-radius: 9px;
  background: transparent;
  color: var(--c-text);
  font-size: 14.5px;
  white-space: nowrap;
  cursor: pointer;
}
.act:hover,
.cal summary:hover,
.cal[open] summary {
  background: #ffffff12;
}
.act[aria-pressed="true"] {
  background: #5a2f33;
  border-color: #f0ba89;
  color: #ffd9cc;
}
.cal {
  position: relative;
}
.cal summary {
  list-style: none;
}
.cal summary::-webkit-details-marker {
  display: none;
}
.cal-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  display: grid;
  gap: 6px;
  width: 240px;
  padding: 10px;
  border: 1px solid var(--c-brass);
  border-radius: 10px;
  background: var(--c-surface-2);
  box-shadow: 0 12px 30px #0009;
}
.cal-menu button,
.cal-menu a {
  display: block;
  min-height: 40px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: #ffffff0d;
  color: var(--c-text);
  font-size: 14.5px;
  text-align: left;
  text-decoration: none;
}
.cal-menu button:hover,
.cal-menu a:hover {
  background: #ffffff1c;
}
.cal-menu small {
  color: var(--c-text-3);
  font-size: 13px;
}
.more-btn {
  display: flex;
  width: 100%;
  margin: 4px 0 0;
}
.past-block {
  margin: 0 0 16px;
}
.past-list {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px dashed #577a78;
  border-radius: 12px;
  background: #13232a;
}
.past-title {
  margin: 0 0 10px;
  font: 20px var(--font-display);
  color: var(--c-text-2);
}
.past-list .day {
  opacity: 0.85;
}
.past-list .day-head {
  position: static;
  background: #2a2a2e;
  color: var(--c-text-2);
}
.show.past .when time {
  color: var(--c-text-2);
}
.empty {
  padding: 22px 18px;
  border: 1px dashed #c9a47a88;
  border-radius: 12px;
  color: var(--c-text-2);
}
.empty p {
  margin: 0 0 12px;
}
.note {
  margin: 20px 0;
  padding: 10px 14px;
  border-left: 3px solid #e6bc85;
  background: #294047;
  color: #cddcd4;
  font-size: 14px;
}
.soon-card {
  margin: 26px 0 0;
}

/* Videotext: Tafel 333 */
.videotext {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px clamp(10px, 3vw, 24px) 18px;
  border: 10px solid #2b2b2b;
  border-radius: 18px;
  background: #000;
  color: #fff;
  font: 700 clamp(13px, 2.4vw, 18px) / 1.4 var(--font-mono);
  box-shadow:
    inset 0 0 40px #ffffff14,
    0 18px 40px #000a;
}
.vt-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.vt-head .p {
  color: #fff;
}
.vt-head .s,
.vt-head .clock {
  color: #ffe600;
}
.vt-banner {
  margin: 8px 0 10px;
  padding: 6px 10px;
  background: #0020c8;
  color: #ffe600;
  font-size: 1.3em;
  letter-spacing: 0.08em;
  text-align: center;
}
.vt-day {
  margin: 12px 0 2px;
  color: #00e5ff;
}
.vt-row {
  display: grid;
  grid-template-columns: 6ch 11ch minmax(0, 1fr);
  gap: 0 1ch;
}
.vt-row .t {
  color: #ffe600;
}
.vt-row .c {
  color: #00e5ff;
}
.vt-row .n {
  color: #fff;
}
.vt-row.now .n::after {
  content: " ◀ JETZT";
  color: #ff4d4d;
}
.vt-empty {
  color: #ff6b6b;
}
.vt-foot {
  margin: 14px 0 0;
  color: #9a9a9a;
}
.vt-fast {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.vt-fast button {
  min-height: 42px;
  border: 0;
  color: #000;
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
}
.vt-fast .r {
  background: #ff3b30;
}
.vt-fast .g {
  background: #00d84a;
}
.vt-fast .y {
  background: #ffe600;
}
.vt-fast .b {
  background: #00b7ff;
}

@media (max-width: 640px) {
  .kino {
    padding: 0 10px 16px;
  }
  .kino-bar {
    gap: 8px;
  }
  .tabs {
    flex: 1 1 100%;
  }
  /* Am Handy eine wischbare Reihe statt vieler Zeilen */
  .moods {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tabs button {
    flex: 1;
    padding: 8px 6px;
    font-size: 14.5px;
  }
  .show {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 6px 12px;
    padding: 12px;
  }
  .actions {
    grid-column: 2;
  }
  .when time {
    font-size: 22px;
  }
  .channel {
    font-size: 11.5px;
    padding: 2px 5px;
  }
  .info h3 {
    font-size: 18px;
  }
  .cal-menu {
    width: min(240px, calc(100vw - 40px));
  }
  .vt-row {
    grid-template-columns: 6ch minmax(0, 1fr);
  }
  .vt-row .c {
    grid-column: 2;
  }
  .vt-row .n {
    grid-column: 1 / -1;
    padding-left: 7ch;
  }
}