/* ============================================================
   joker8de.de — Varieté-Layer (2026-08-17)
   Донор — кабаре/варьете: сцена, афиша, ламповая вывеска, бархат.
   Слой подключается ПОСЛЕ style.css и перекрывает только то,
   что переосмыслено. Базовая сетка сайта не трогается.
   ============================================================ */

/* --- Гарнитуры: афишная антиква + плакатный гротеск, локально --- */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/bodoni-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/bodoni-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bebas-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bebas-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --jd-ink: #0B0410;          /* зал в темноте */
  --jd-velvet: #1C0A26;       /* бархат */
  --jd-velvet-hi: #2E1140;    /* бархат в свете */
  --jd-rouge: #AD2A52;        /* бренд */
  --jd-gilt: #F5C242;         /* золочёная рама */
  --jd-gaslight: #FFE9A8;     /* свет ламп */
  --jd-chalk: #F6F1E9;        /* афишная бумага */
  --jd-display: 'Bodoni Moda', Didot, 'Times New Roman', serif;
  --jd-poster: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --jd-lamp: 8px;
}

/* Афишная антиква вытесняет Poppins в заголовках — он был фолбэком
   генератора, а не решением по бренду. */
h1, h2, h3,
.jd-display { font-family: var(--jd-display); letter-spacing: -0.01em; }

h1 {
  font-weight: 800;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--jd-chalk) !important;
  text-wrap: balance;
}

/* ============================ HERO ============================ */

.jd-hero {
  position: relative;
  margin: 0 0 clamp(24px, 4vw, 44px);
  padding: clamp(6px, 1vw, 12px) 0 0;
}

/* Ламповая рама — единственный «громкий» элемент страницы.
   Лампы нарисованы двумя повторяющимися градиентами, без картинок. */
.jd-marquee {
  position: relative;
  border: 1px solid rgba(245, 194, 66, 0.35);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(173, 42, 82, 0.42), transparent 62%),
    radial-gradient(90% 80% at 92% 12%, rgba(245, 194, 66, 0.18), transparent 58%),
    linear-gradient(168deg, var(--jd-velvet-hi), var(--jd-velvet) 46%, var(--jd-ink));
  padding: clamp(22px, 3.4vw, 40px) clamp(18px, 3vw, 42px) clamp(20px, 3vw, 34px);
  overflow: hidden;
  isolation: isolate;
}

.jd-marquee::before,
.jd-marquee::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  height: var(--jd-lamp);
  /* Круг задаём радиусом в px: процентный радиус в ячейке 26×8 растягивал
     лампу в горизонтальный штрих. */
  background-image: radial-gradient(circle at 13px 4px, var(--jd-gaslight) 0 3.2px, transparent 3.6px);
  background-size: 26px var(--jd-lamp);
  background-repeat: repeat-x;
  opacity: 0.75;
  filter: drop-shadow(0 0 5px rgba(245, 194, 66, 0.75));
  animation: jd-lamps 3.6s ease-in-out infinite;
  pointer-events: none;
}
.jd-marquee::before { top: 8px; }
.jd-marquee::after  { bottom: 8px; animation-delay: 1.8s; }

@keyframes jd-lamps {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 0.34; }
}

.jd-eyebrow {
  font-family: var(--jd-poster);
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: 0.18em;
  color: var(--jd-gilt);
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.jd-eyebrow span { color: rgba(246, 241, 233, 0.62); }
.jd-eyebrow span::before { content: '·'; margin-right: 10px; }

.jd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 38px);
  align-items: center;
}

.jd-hero h1 {
  font-size: clamp(28px, 3.5vw, 50px);
  line-height: 1.06;
  margin: 0 0 14px;
}

.jd-hero__lede {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(246, 241, 233, 0.76);
  margin: 0;
  max-width: 54ch;
}

/* Билет главного номера: бонус подан как афишная строка, а не как баннер */
.jd-ticket {
  position: relative;
  border: 1px solid rgba(245, 194, 66, 0.42);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(173, 42, 82, 0.34), rgba(11, 4, 16, 0.86));
  padding: clamp(18px, 2.2vw, 26px);
  text-align: center;
  box-shadow: 0 22px 48px -26px rgba(0, 0, 0, 0.9);
}

.jd-ticket__label {
  font-family: var(--jd-poster);
  letter-spacing: 0.2em;
  font-size: 13px;
  color: var(--jd-gaslight);
  display: block;
  margin-bottom: 6px;
}

.jd-ticket__amount {
  font-family: var(--jd-poster);
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 0.92;
  color: var(--jd-chalk);
  margin: 0;
}
.jd-ticket__amount em {
  display: block;
  font-style: normal;
  font-size: clamp(17px, 1.9vw, 25px);
  color: var(--jd-gilt);
  margin-top: 6px;
}

.jd-ticket__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: clamp(14px, 1.8vw, 20px) 0 10px;
  padding: 14px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--jd-gilt);
  color: #2A0A16;
  font-family: var(--jd-poster);
  font-size: 20px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 10px 26px -12px rgba(245, 194, 66, 0.9);
}
.jd-ticket__cta:hover {
  background: var(--jd-gaslight);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(245, 194, 66, 0.95);
}
.jd-ticket__cta:focus-visible { outline: 3px solid var(--jd-gaslight); outline-offset: 3px; }

.jd-ticket__terms {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(246, 241, 233, 0.6);
  margin: 0;
}

/* --- Программа вечера: ключевые числа --- */
.jd-facts {
  list-style: none;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.jd-facts li {
  background: rgba(28, 10, 38, 0.72);
  border: 1px solid rgba(245, 194, 66, 0.16);
  border-radius: 12px;
  padding: 13px 12px;
  text-align: center;
}
.jd-facts b {
  display: block;
  font-family: var(--jd-poster);
  font-size: clamp(20px, 2vw, 27px);
  color: var(--jd-gilt);
  line-height: 1.1;
  font-weight: 400;
}
.jd-facts span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(246, 241, 233, 0.62);
}

/* ===================== Секции слоя ===================== */

.jd-block {
  margin: clamp(34px, 5vw, 60px) 0;
}
.jd-block > h2 {
  font-size: clamp(23px, 2.5vw, 34px);
  color: var(--jd-chalk);
  margin: 0 0 6px;
}
.jd-block__note {
  font-size: 13.5px;
  color: rgba(246, 241, 233, 0.55);
  margin: 0 0 clamp(16px, 2vw, 24px);
}

/* --- Umsatzrechner: считает то, что обычно прячут в АГБ --- */
.jd-calc {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
  border: 1px solid rgba(245, 194, 66, 0.22);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(46, 17, 64, 0.7), rgba(11, 4, 16, 0.9));
  padding: clamp(18px, 2.4vw, 28px);
}
.jd-calc__control label {
  display: block;
  font-family: var(--jd-poster);
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--jd-gaslight);
  margin-bottom: 10px;
}
.jd-calc__value {
  font-family: var(--jd-poster);
  font-size: clamp(30px, 3.4vw, 44px);
  color: var(--jd-chalk);
  line-height: 1;
  margin-bottom: 12px;
}
.jd-calc input[type='range'] {
  width: 100%;
  accent-color: var(--jd-rouge);
  height: 26px;
}
.jd-calc__hint {
  font-size: 12.5px;
  color: rgba(246, 241, 233, 0.55);
  margin: 4px 0 0;
}
.jd-calc__out {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.jd-calc__out li {
  background: rgba(28, 10, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px;
}
.jd-calc__out b {
  display: block;
  font-family: var(--jd-poster);
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 28px);
  color: var(--jd-gilt);
  line-height: 1.1;
}
.jd-calc__out span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: rgba(246, 241, 233, 0.6);
  line-height: 1.4;
}

/* --- VIP как лестница на сцену: высота столбца = уровень --- */
.jd-stairs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.jd-stair {
  border: 1px solid rgba(245, 194, 66, 0.2);
  border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, rgba(173, 42, 82, 0.34), rgba(28, 10, 38, 0.9));
  padding: 16px 13px;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.jd-stair:nth-child(1) { padding-top: 20px; }
.jd-stair:nth-child(2) { padding-top: 34px; }
.jd-stair:nth-child(3) { padding-top: 48px; }
.jd-stair:nth-child(4) { padding-top: 62px; }
.jd-stair:nth-child(5) { padding-top: 76px; border-color: rgba(245, 194, 66, 0.55); }
.jd-stair:hover { transform: translateY(-4px); border-color: rgba(245, 194, 66, 0.6); }
.jd-stair__no {
  font-family: var(--jd-poster);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(246, 241, 233, 0.5);
}
.jd-stair__name {
  font-family: var(--jd-display);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--jd-chalk);
  margin: 2px 0 10px;
  line-height: 1.15;
}
.jd-stair dl { margin: 0; font-size: 12.5px; line-height: 1.5; }
.jd-stair dt { color: rgba(246, 241, 233, 0.52); }
.jd-stair dd { margin: 0 0 7px; color: var(--jd-gilt); font-weight: 600; }

/* --- Таблица платежей --- */
.jd-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); }
.jd-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.jd-table caption { text-align: left; padding: 12px 14px; color: rgba(246,241,233,0.55); font-size: 12.5px; }
.jd-table th, .jd-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.jd-table thead th {
  font-family: var(--jd-poster);
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--jd-gaslight);
  background: rgba(46, 17, 64, 0.6);
}
.jd-table tbody tr:hover { background: rgba(173, 42, 82, 0.12); }
.jd-table td:first-child { color: var(--jd-chalk); font-weight: 600; }

/* --- Хлебные крошки: компактнее, чтобы не съедать первый экран --- */
.joker-crumbs, .aad-joker-crumbs { font-size: 12.5px; opacity: 0.62; }

/* ===================== Адаптив ===================== */

@media (max-width: 1080px) {
  .jd-hero__grid { grid-template-columns: 1fr; }
  .jd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jd-calc { grid-template-columns: 1fr; }
  .jd-stairs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .jd-stair { padding-left: 9px; padding-right: 9px; }
  .jd-stair:nth-child(n) { padding-top: 16px; }
}

@media (max-width: 640px) {
  .jd-marquee { padding: 26px 15px 22px; border-radius: 14px; }
  .jd-marquee::before, .jd-marquee::after { left: 9px; right: 9px; background-size: 20px var(--jd-lamp); }
  .jd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jd-stairs { grid-template-columns: 1fr; }
  .jd-stair { border-radius: 12px; }
  .jd-ticket__amount { font-size: 42px; }
  .jd-hero h1 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .jd-marquee::before, .jd-marquee::after { animation: none; opacity: 0.6; }
  .jd-ticket__cta, .jd-stair { transition: none; }
}

/* --- Vorteile / Nachteile: две колонки, знак несёт смысл, не декор --- */
.jd-pros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.jd-pros__col {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 22px);
  background: rgba(28, 10, 38, 0.6);
}
.jd-pros__col--plus  { border-top: 3px solid var(--jd-gilt); }
.jd-pros__col--minus { border-top: 3px solid var(--jd-rouge); }
.jd-pros__col h3 {
  font-family: var(--jd-poster);
  letter-spacing: 0.14em;
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--jd-chalk);
  font-weight: 400;
}
.jd-pros__col ul { list-style: none; margin: 0; padding: 0; }
.jd-pros__col li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(246, 241, 233, 0.8);
}
.jd-pros__col li::before {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--jd-poster);
  font-size: 17px;
  line-height: 1.35;
}
.jd-pros__col--plus  li::before { content: '+'; color: var(--jd-gilt); }
.jd-pros__col--minus li::before { content: '–'; color: var(--jd-primary, #d1507b); }
.jd-pros__col li em { font-style: normal; color: var(--jd-gilt); }

/* --- Немецкий рамочный блок: три колонки-карточки --- */
.jd-frame { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); }
.jd-frame__item {
  border: 1px solid rgba(245, 194, 66, 0.18);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 22px);
  background: linear-gradient(170deg, rgba(46, 17, 64, 0.55), rgba(11, 4, 16, 0.85));
}
.jd-frame__item h3 {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--jd-gilt);
  margin: 0 0 10px;
  line-height: 1.25;
}
.jd-frame__item p { font-size: 14px; line-height: 1.6; color: rgba(246, 241, 233, 0.78); margin: 0; }
.jd-frame__item strong { color: var(--jd-chalk); }

/* --- Оглавление --- */
.jd-toc { border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 16px 18px; background: rgba(28,10,38,0.5); }
.jd-toc h2 { font-family: var(--jd-poster); font-size: 15px; letter-spacing: 0.16em; margin: 0 0 10px; color: var(--jd-gaslight); font-weight: 400; }
.jd-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 26px; }
.jd-toc li { break-inside: avoid; margin-bottom: 7px; font-size: 14px; counter-increment: jdtoc; }
.jd-toc a { color: rgba(246,241,233,0.78); text-decoration: none; border-bottom: 1px solid transparent; }
.jd-toc a:hover, .jd-toc a:focus-visible { color: var(--jd-gilt); border-bottom-color: currentColor; }

@media (max-width: 1080px) {
  .jd-frame { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .jd-pros { grid-template-columns: 1fr; }
  .jd-toc ol { columns: 1; }
}

/* Мобильный первый экран: до афиши было 262 px пустоты — шапка, крошки и
   отступы контейнера. Ужимаем всё, кроме шапки. */
@media (max-width: 640px) {
  main { padding-top: 8px !important; }
  .jd-hero { padding-top: 0; margin-bottom: 22px; }
  .joker-crumbs, .aad-joker-crumbs, nav[aria-label="Breadcrumb"] { margin-bottom: 6px; font-size: 12px; }
  .jd-eyebrow { font-size: 11.5px; letter-spacing: 0.14em; margin-bottom: 10px; }
  .jd-hero h1 { font-size: 25px; line-height: 1.1; }
  .jd-hero__lede { font-size: 14px; }
  .jd-marquee { padding-top: 20px; }
}

/* --- Критерии оценки (страница Erfahrungen) --- */
.jd-crits { display: grid; gap: 14px; }
.jd-crit {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: clamp(14px, 1.8vw, 20px);
  background: rgba(28, 10, 38, 0.6);
}
.jd-crit__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.jd-crit__name { font-family: var(--jd-display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; color: var(--jd-chalk); }
.jd-crit__score { font-family: var(--jd-poster); font-size: clamp(22px, 2.2vw, 30px); color: var(--jd-gilt); line-height: 1; }
.jd-crit__bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin: 10px 0 12px; overflow: hidden; }
.jd-crit__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--jd-rouge), var(--jd-gilt)); }
.jd-crit p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(246,241,233,0.78); }
.jd-crit em { font-style: normal; color: var(--jd-gilt); }
.jd-block p a { color: var(--jd-gilt); }

/* --- Скриншоты донора: рамка-паспарту, как у афиши в фойе --- */
.jd-shot { margin: 0 0 clamp(16px, 2vw, 22px); }
.jd-shot picture { display: block; }
.jd-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(245, 194, 66, 0.22);
  background: var(--jd-velvet);
}
.jd-shot figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(246, 241, 233, 0.55);
}