/* acropolistickets.net - one stylesheet for every page.
   Values are taken from the computed styles of the former WordPress/Elementor
   site so the static pages look the same. Breakpoints follow the old theme:
   921px (mobile header), 1024px (tablet), 767px (mobile layout). */

:root {
  --ink: #000026;
  --gold: #a08700;
  --sand: #f5f3e5;
  --sand-2: #ece7cc;
  --sand-3: #e2dbb2;
  --slate: #334155;
  --page-w: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 100%; }
/* the old theme shrank the root font to 91.2% between 545px and 921px */
@media (min-width: 545px) and (max-width: 921px) { html { font-size: 91.2%; } }
body {
  margin: 0;
  font: 400 16px/1.65 var(--font);
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--gold); text-decoration: none; }
a:hover, a:focus { color: var(--ink); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; font-weight: 600; color: var(--ink); line-height: 1.3; }
h1 { font-size: 40px; line-height: 1.4; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
p { margin: 0 0 1.6em; }
ul, ol { margin: 1rem 0; padding: 0 0 0 20px; }
li > ul, li > ol { margin: 0; }
strong, b { font-weight: 700; }
iframe { border: 0; }
hr { height: 1px; border: 0; background-color: #ccc; margin: 0 0 1.5em; }

.sr-only, .skip-link {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  clip: auto; width: auto; height: auto; z-index: 100000; top: 6px; left: 6px;
  padding: 15px 23px 14px; background: #f1f1f1; color: #21759b; font-size: 14px; font-weight: 700;
}

/* ---------------------------------------------------------------- header */
.hd { position: relative; z-index: 99; background: #fff; border-bottom: 1px solid var(--sand); }
.hd__in {
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; min-height: 70px;
}
.hd__logo { display: block; line-height: 0; margin-right: auto; padding-right: 1em; }
.hd__logo img { width: 240px; max-width: 240px; }
.hd__menu { display: flex; align-items: center; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; height: 60px; padding: 0 16px;
  color: var(--ink); font-size: 16px; line-height: 60px;
}
.nav__item.is-current > .nav__link, .nav__link:hover, .nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link { color: var(--gold); }
.nav__link .arrow { width: .625em; height: auto; margin-left: 10px; fill: currentColor; }
.nav__toggle { display: none; }
.nav__sub {
  list-style: none; margin: 0; padding: 0; position: absolute; top: 60px; left: 0;
  width: 240px; background: #fff; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .1);
  border-top: 2px solid var(--gold);
  opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 99;
}
.nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; }
.nav__sub a { display: block; padding: 14.4px 16px; color: var(--ink); line-height: 23.2px; }
.nav__subitem.is-current > a, .nav__sub a:hover, .nav__sub a:focus { color: var(--gold); }
.hd__btn {
  display: block; margin-left: 20px; padding: 16px 26px; border: 2px solid var(--gold); border-radius: 6px;
  background: var(--gold); color: #fff; font-size: 16px; font-weight: 600; line-height: 16px;
}
.hd__btn:hover, .hd__btn:focus { background: #fff; color: var(--gold); }
.hd__burger {
  display: none; margin-left: 10px; padding: 12px; border: 0; border-radius: 2px;
  background: none; color: var(--gold); cursor: pointer; line-height: 0;
}
.hd__burger svg { fill: currentColor; }
.hd__burger .i-close { display: none; }

.nav__chev { display: none; }
@media (max-width: 921px) {
  /* old mobile header: 71px at a 16px root, 68px at the 91.2% root */
  .hd__in { flex-wrap: wrap; padding: 0 20px; min-height: calc(2.13rem + 35.9px); }
  .hd__burger {
    display: flex; align-items: center; justify-content: center;
    width: calc(1.5rem + 20px); height: calc(1.5rem + 20px); padding: 0;
  }
  .hd__burger svg { width: 20px; height: auto; }
  /* the menu drops over the page, like the old theme's */
  .hd__menu {
    display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: #fff;
  }
  .hd.is-open .hd__menu { display: flex; }
  .hd.is-open .i-open { display: none; }
  .hd.is-open .i-close { display: block; }
  .hd__btn { display: none; }
  .nav__list { flex-direction: column; }
  .nav__link {
    display: block; height: auto; padding: 0 20px; line-height: 48px; color: var(--ink); background: #fff;
  }
  .nav__item.is-current > .nav__link, .nav__item.is-open > .nav__link,
  .nav__link:hover, .nav__item:hover > .nav__link, .nav__item:focus-within > .nav__link { color: var(--ink); }
  .nav__item.is-current > .nav__link, .nav__item.is-open > .nav__link { background: var(--sand); }
  .nav__link .arrow { display: none; }
  .nav__toggle {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 20px;
    width: 54px; height: 48px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  }
  .nav__item.is-current > .nav__toggle, .nav__item.is-open > .nav__toggle { background: var(--sand); }
  .nav__toggle .arrow { width: 15px; height: auto; fill: currentColor; }
  .nav__sub {
    position: static; width: auto; box-shadow: none; border: 0;
    opacity: 1; visibility: visible; display: none;
  }
  .nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub { display: none; }
  .nav__item.is-open > .nav__sub { display: block; }
  .nav__sub a { display: flex; align-items: center; padding: 0 20px 0 30px; line-height: 48px; color: var(--ink); background: #fff; }
  .nav__chev { display: inline-flex; margin-right: 5px; }
  .nav__chev .arrow { width: 9px; height: auto; fill: currentColor; transform: rotate(-90deg); }
}

/* -------------------------------------------------------------- layout
   Sections (.s), their inner wrap (.s__in) and boxes (.c) are flex
   containers whose measured values arrive as custom properties on the
   element (written by build/generate.py from the old site's computed
   styles): --dir, --wrap, --jc, --ai, --gap, --pad, --mar, --bg, --bw, --bc,
   --rad, --ord, --as, --wd. Tablet values carry a --t- prefix, mobile values
   --m-; each level falls back to the one above. Widgets (.W) use --mar,
   --ord, --as, --wd; images also --irad, --fit, --ih. */
.main { display: block; }
.L {
  display: flex;
  flex-direction: var(--dir, column);
  flex-wrap: var(--wrap, nowrap);
  justify-content: var(--jc, normal);
  align-items: var(--ai, normal);
  gap: var(--gap, 0px);
  padding: var(--pad, 0px);
  background-color: var(--bg, transparent);
  border: 0 solid var(--bc, transparent);
  border-width: var(--bw, 0px);
  border-radius: var(--rad, 0px);
}
.W { padding: var(--pad, 0px); }
.L, .W {
  margin: var(--mar, 0px);
  order: var(--ord, 0);
  align-self: var(--as, auto);
  width: var(--wd, auto);
  max-width: 100%;
  flex-shrink: 0;
}
/* custom properties inherit; every element starts clean, its layout class
   (generated at the end of this file, so it wins) sets what it needs */
.L, .W {
  --dir: initial; --wrap: initial; --jc: initial; --ai: initial; --gap: initial; --pad: initial; --mar: initial; --bg: initial; --bw: initial; --bc: initial; --rad: initial; --ord: initial; --as: initial; --wd: initial; --irad: initial; --fit: initial; --ih: initial; --iw: initial; --t-dir: initial; --t-wrap: initial; --t-jc: initial; --t-ai: initial; --t-gap: initial; --t-pad: initial; --t-mar: initial; --t-bg: initial; --t-bw: initial; --t-bc: initial; --t-rad: initial; --t-ord: initial; --t-as: initial; --t-wd: initial; --t-irad: initial; --t-fit: initial; --t-ih: initial; --t-iw: initial; --m-dir: initial; --m-wrap: initial; --m-jc: initial; --m-ai: initial; --m-gap: initial; --m-pad: initial; --m-mar: initial; --m-bg: initial; --m-bw: initial; --m-bc: initial; --m-rad: initial; --m-ord: initial; --m-as: initial; --m-wd: initial; --m-irad: initial; --m-fit: initial; --m-ih: initial; --m-iw: initial;
}
.s { width: 100%; }
.s__in { width: 100%; max-width: var(--page-w); margin: 0 auto; }
.c { min-width: 0; }
@media (max-width: 1024px) {
  .L {
    flex-direction: var(--t-dir, var(--dir, column));
    flex-wrap: var(--t-wrap, var(--wrap, nowrap));
    justify-content: var(--t-jc, var(--jc, normal));
    align-items: var(--t-ai, var(--ai, normal));
    gap: var(--t-gap, var(--gap, 0px));
    padding: var(--t-pad, var(--pad, 0px));
    background-color: var(--t-bg, var(--bg, transparent));
    border-width: var(--t-bw, var(--bw, 0px));
    border-radius: var(--t-rad, var(--rad, 0px));
  }
  .W { padding: var(--t-pad, var(--pad, 0px)); }
  .L, .W {
    margin: var(--t-mar, var(--mar, 0px));
    order: var(--t-ord, var(--ord, 0));
    align-self: var(--t-as, var(--as, auto));
    width: var(--t-wd, var(--wd, auto));
  }
  .s, .s__in { width: 100%; }
  .s__in { margin: 0 auto; }
}
@media (max-width: 767px) {
  .L {
    flex-direction: var(--m-dir, var(--t-dir, var(--dir, column)));
    flex-wrap: var(--m-wrap, var(--t-wrap, var(--wrap, nowrap)));
    justify-content: var(--m-jc, var(--t-jc, var(--jc, normal)));
    align-items: var(--m-ai, var(--t-ai, var(--ai, normal)));
    gap: var(--m-gap, var(--t-gap, var(--gap, 0px)));
    padding: var(--m-pad, var(--t-pad, var(--pad, 0px)));
    background-color: var(--m-bg, var(--t-bg, var(--bg, transparent)));
    border-width: var(--m-bw, var(--t-bw, var(--bw, 0px)));
    border-radius: var(--m-rad, var(--t-rad, var(--rad, 0px)));
  }
  .W { padding: var(--m-pad, var(--t-pad, var(--pad, 0px))); }
  .L, .W {
    margin: var(--m-mar, var(--t-mar, var(--mar, 0px)));
    order: var(--m-ord, var(--t-ord, var(--ord, 0)));
    align-self: var(--m-as, var(--t-as, var(--as, auto)));
    width: var(--m-wd, var(--t-wd, var(--wd, auto)));
  }
  .s, .s__in { width: 100%; }
  .s__in { margin: 0 auto; }
}

/* headings, text, buttons, images */
.center { text-align: center; }
h2.ttl, h3.ttl { font-weight: 700; }
h1.ttl { font-size: 40px; line-height: 56px; font-weight: 600; }
h2.ttl { font-size: 30px; line-height: 39px; }

.tx.lede { font-size: 20px; line-height: 33px; }
.tx.lede p { margin-bottom: 32px; }
.tx h2 strong, .tx h3 strong { font-weight: 700; }
/* links inside text look like the text (only underlined): gold is reserved
   for the buttons, so the eye goes to the CTAs */
.tx a, .hw a:not(.btn), .legal__body a, .faq__a a {
  color: inherit; font-weight: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tx a strong, .tx a b, .hw a:not(.btn) strong, .legal__body a strong { font-weight: inherit; }
.tx a:hover, .hw a:not(.btn):hover, .legal__body a:hover, .faq__a a:hover { color: inherit; text-decoration-thickness: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 15px 30px; border-radius: 3px; background: var(--gold); color: #fff;
  font-size: 16px; font-weight: 500; line-height: 16px; transition: all .3s;
}
.btn:hover, .btn:focus { background: var(--ink); color: #fff; }
.btn__icon { display: flex; }
.btn__icon svg { width: 1em; height: 1em; fill: currentColor; }
.bt.justify .btn { display: flex; width: 100%; }
.bt.outline .btn {
  padding: 16px 26px; border: 2px solid var(--gold); border-radius: 6px;
  background: #fff; color: var(--gold); font-size: 17px; font-weight: 700; line-height: 17px;
}
.bt.outline .btn:hover, .bt.outline .btn:focus { background: var(--gold); color: #fff; }

.im { text-align: center; line-height: 0; }
.im img {
  width: var(--iw, 100%); border-radius: var(--irad, 0px); object-fit: var(--fit, fill); height: var(--ih, auto);
}
@media (max-width: 1024px) {
  .im img { width: var(--t-iw, var(--iw, 100%)); border-radius: var(--t-irad, var(--irad, 0px)); object-fit: var(--t-fit, var(--fit, fill)); height: var(--t-ih, var(--ih, auto)); }
}
@media (max-width: 767px) {
  .im img {
    width: var(--m-iw, var(--t-iw, var(--iw, 100%)));
    border-radius: var(--m-irad, var(--t-irad, var(--irad, 0px)));
    object-fit: var(--m-fit, var(--t-fit, var(--fit, fill)));
    height: var(--m-ih, var(--t-ih, var(--ih, auto)));
  }
  .btn { padding: 12px 24px; }
  .bt.outline .btn { padding: 16px 26px; }
}
.mp { width: 100%; }
.mp iframe { width: 100%; height: 300px; display: block; }
.mp .mp__embed { line-height: 0; }

/* ------------------------------------------------------------------ tabs */
.tabs__head {
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 100px;
  border-bottom: 2px solid var(--gold); margin-bottom: 20px;
}
.tabs__btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 15px 35px; border: 0; background: var(--sand); color: var(--ink);
  font: 700 20px/1rem var(--font); cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.tabs__btn[aria-selected="true"] { color: var(--gold); }
.tabs__btn[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--gold);
}
.tabs__panel { display: none; }
.tabs__panel.is-on { display: block; }

/* ------------------------------------------------------------------- faq
   The original rounded sand boxes with numbers; behaviour as on
   athens-museums.com: all closed on load, every item opens on its own,
   round +/x control on the right. */
.faq__item { background: var(--sand); border-radius: 20px; margin-bottom: 16px; }
.faq__item:last-child { margin-bottom: 0; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 22px; border: 1px solid var(--sand); border-radius: 20px; cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__item[open] .faq__q { border-radius: 20px 20px 0 0; }
.faq__qt { display: flex; gap: 16px; align-items: center; font-size: 18px; font-weight: 700; line-height: 26px; }
.faq__pm {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1; color: var(--ink);
  transition: transform .2s;
}
.faq__pm::before { content: "+"; }
.faq__item[open] .faq__pm { transform: rotate(45deg); }
.faq__a { display: block; }
@media (max-width: 767px) {
  .faq__qt .num { display: none; }
  .faq__q { padding: 20px; }
}

/* ----------------------------------------------------------- html widgets */
.hw { width: 100%; }
/* former theme "Additional CSS": step counter, cards, interactive map */
.process-container { margin: 0 auto; }
.step { display: flex; gap: 20px; margin-bottom: 0; }
.step-number {
  flex-shrink: 0; width: 50px; height: 50px; background: #a08700; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600;
}
.step-content { flex: 1; padding-top: 5px; }
.step-title { font-size: 20px; font-weight: 600; color: #000026; margin: 0 0 10px; }
.step-text { color: #000026; line-height: 1.6; margin: 0 0 1.6em; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.card { background: #fff; overflow: hidden; border-radius: 20px; }
.card-image { position: relative; border-radius: 20px; overflow: hidden; }
.card-image img { width: 100%; height: 100%; max-height: 250px; object-fit: cover; }
.card-title {
  position: absolute; bottom: 12px; right: 12px; background: #a08700; color: #fff;
  padding: 8px 20px; border-radius: 6px; font-size: 1.1rem;
}
.dif-title { padding: 12px 20px; margin-bottom: -24px; font-size: 1.1rem; }
.card-content { padding: 24px 12px 0 18px; }
.card-content p { color: #000026; font-size: .95rem; line-height: 1.7; }
.cite-link { font-size: 8px; padding: 12px 12px 0 18px; display: block; }

.acropolis-map-container {
  width: min(1200px, 100vw) !important; position: relative; left: 50%; transform: translateX(-50%);
  padding: 0; margin: 0; overflow: hidden;
}
.acropolis-map-header { text-align: center; padding: 1.5rem 1rem 1rem; background: #faf7f2; }
.acropolis-map-wrapper {
  position: relative; width: 100%; background: #fff;
  border-top: 1px solid #e8e2d9; border-bottom: 1px solid #e8e2d9; overflow: hidden;
}
.acropolis-map-svg-container { width: 100%; position: relative; background: #e8e4d8; overflow: hidden; }
.acropolis-map-svg-container svg { display: block; width: 100%; height: auto; }
.marker-group { cursor: pointer; }
.marker-group:hover .marker-circle { filter: brightness(1.15); }
.marker-group:hover .marker-label { font-weight: 700; }
.marker-circle { transition: filter .2s; }
.marker-pulse { animation: acropolis-pulse 2s ease-out infinite; transform-origin: center; }
@keyframes acropolis-pulse { 0% { opacity: .6; r: 12; } 100% { opacity: 0; r: 22; } }
.acropolis-info-panel {
  background: #fff; border-top: 1px solid #e8e2d9; padding: 1.25rem 1.5rem; min-height: 120px;
  transition: all .3s ease; max-width: 960px; margin: 0 auto;
}
.acropolis-info-panel.empty { display: flex; align-items: center; justify-content: center; min-height: 80px; }
.acropolis-info-panel .empty-text { color: #7a746d; font-size: .9rem; text-align: center; }
.acropolis-info-panel .poi-title { font-size: 1.25rem; font-weight: 700; color: #1a1714; margin-bottom: .15rem; }
.acropolis-info-panel .poi-date { font-size: .82rem; color: #b8860b; font-weight: 600; margin-bottom: .5rem; letter-spacing: .03em; }
.acropolis-info-panel .poi-desc { font-size: .92rem; color: #2c2926; line-height: 1.7; }
.acropolis-info-panel .poi-close {
  float: right; background: none; border: none; font-size: 1.4rem; color: #7a746d;
  cursor: pointer; padding: 0 .3rem; line-height: 1;
}
.acropolis-info-panel .poi-close:hover { color: #1a1714; }
.acropolis-route-toggle {
  display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem;
  border-top: 1px solid #e8e2d9; font-size: .85rem; color: #2c2926; background: #faf7f2;
}
.acropolis-route-toggle label { cursor: pointer; user-select: none; }
.toggle-switch {
  position: relative; width: 42px; height: 23px; background: #e8e2d9; border-radius: 12px;
  cursor: pointer; transition: background .2s;
}
.toggle-switch.active { background: #b8860b; }
.toggle-switch .toggle-knob {
  position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; background: #fff;
  border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.toggle-switch.active .toggle-knob { transform: translateX(19px); }
.acropolis-map-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; padding: .8rem 1.25rem;
  border-top: 1px solid #e8e2d9; background: #fff8e7; font-size: .8rem; color: #7a746d;
}
.legend-item { display: flex; align-items: center; gap: .35rem; }
.legend-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 600px) {
  .acropolis-map-legend { gap: .5rem .9rem; font-size: .72rem; padding: .6rem .75rem; }
  .acropolis-info-panel { padding: 1rem; min-height: 100px; }
  .acropolis-info-panel .poi-title { font-size: 1.1rem; }
  .acropolis-info-panel .poi-desc { font-size: .85rem; }
  .acropolis-map-header h2 { font-size: 1.3rem; }
}
@media (max-width: 768px) { .acropolis-map-container { width: 100vw !important; } }

/* list with gold dots (opening hours) */
ul.dots { list-style: none; margin: 0 0 1.5em; padding: 0; }
.dots li { position: relative; padding: .25em 0 .25em 2em; line-height: 1.3em; }
.dots li::before {
  content: ""; position: absolute; left: .22em; top: .5em; width: .857em; height: .857em;
  border-radius: 50%; background: var(--gold);
}

/* opening hours tool (/opening-hours/): status for today or a picked date,
   season table, closed and free days. site.js fills the status and
   marks the season row. */
.oh { margin: 0 0 2.5em; font-variant-numeric: tabular-nums; }
.oh__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
.oh__now { flex: 1 1 340px; }
.oh__now p { margin: 0; }
.oh__status { font-size: 14px; font-weight: 600; }
.oh__status::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%;
  background: var(--sand-3); vertical-align: 1px;
}
.oh__status.is-open { color: #23663f; }
.oh__status.is-open::before { background: #2e7d4f; box-shadow: 0 0 0 4px rgba(46, 125, 79, .15); }
.oh__status.is-closed { color: #9b1c12; }
.oh__status.is-closed::before { background: #b42318; }
.oh__big { margin: 4px 0 2px !important; font-size: 24px; line-height: 1.3; font-weight: 700; }
.oh__sub { color: var(--slate); }
.oh__pick { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--slate); }
.oh__pick input {
  font: inherit; font-size: 16px; color: var(--ink); padding: 2px 0 4px; background: transparent;
  border: 0; border-bottom: 2px solid var(--gold); border-radius: 0; font-variant-numeric: tabular-nums;
}
.oh__pick input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.oh__table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.oh__table th, .oh__table td { padding: 7px 12px; text-align: left; border: 0; }
.oh__table td + td, .oh__table th { white-space: nowrap; }
/* cells are padded for the highlighted row; pull the table out so its text lines up */
.oh__table { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; }
@media (max-width: 1239px) { .oh { padding: 0 12px; } }
.oh__table th { font-size: 13px; font-weight: 600; color: var(--slate); }
.oh__table tr.is-now td { font-weight: 700; background: var(--sand); }

.oh__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.oh .oh__notes h3 { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.oh__notes p { margin: 0; font-size: 15px; }
.oh__fine { margin: 16px 0 0; font-size: 13px; color: var(--slate); }
@media (max-width: 767px) {
  .oh { padding: 0 8px; }
  .oh__table { width: calc(100% + 16px); margin-left: -8px; margin-right: -8px; }
  .oh__big { font-size: 22px; }
  .oh__notes { grid-template-columns: 1fr; }
  .oh__table { font-size: 14px; }
  .oh__table th, .oh__table td { padding: 7px 8px; }
}

/* ---------------------------------------------- site design (v2)
   Rolled out from /opening-hours/ to every content page: pill buttons, the
   tickets as one sand band with white cards (section id "tickets"), calmer
   reading text and FAQ cards (section id "faq"). Ids beat the generated
   layout classes on purpose. */
.bt:not(.outline) .btn { border-radius: 99px; padding: 12px 24px; font-weight: 600; }

#tickets { background: var(--sand); margin: 64px 0 0; padding: 64px 24px; }
#tickets > section { margin: 0; padding: 0; }
#tickets > section > .s__in { max-width: 1180px; margin: 0 auto; padding: 0; }
#tickets > section + section { margin-top: 16px; }
#tickets .tx > h2, #tickets .tx > p.center { text-align: left; }
#tickets .tx > h2 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
#tickets .tx > p.center { max-width: 70ch; }
#tickets .ttl { text-align: left; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; }
#tickets .l-3bbb4 {
  background: #fff; border: 0; border-radius: 24px; padding: 14px; margin: 0; width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 38, .04);
}
#tickets .l-2c8ad { padding: 0; gap: 28px; }
#tickets .im img { border-radius: 16px; }
#tickets .tx h3 { font-size: 22px; line-height: 1.3; }
#tickets .tx p { font-size: 16px; line-height: 1.65; margin: 0 0 1.6em; }
#tickets .tx p, #tickets .tx li { color: rgba(0, 0, 38, .8); }

/* direct paragraphs only, so widgets inside text blocks (hours card) keep their sizes */
main .tx:not(.lede) > p { font-size: 17px; line-height: 1.7; margin: 0 0 1em; }
main .tx h2 { font-size: 26px; margin: 36px 0 14px; }
main .tx h2:first-child { margin-top: 0; }

/* one heading style: every section title left-aligned */
main .tx h2.center, main .tx p.center { text-align: left; }
main h2.ttl { text-align: left; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
/* content boxes were filled sand / beige (measured WordPress classes, so
   these names change if a box gets new layout values). Text next to an image
   now stands on the page without a frame, centred on the image; sand is
   reserved for the ticket band */
main .l-2dfa2, main .l-897c3, main .l-9400b, main .l-fef50 {
  --bg: transparent; --bw: 0px; --pad: 0px 8px; --t-pad: 0px 8px; --m-pad: 0px; align-self: center;
}
/* the full-width box holds long reading text: no frame, text on the page edge line */
main .l-5f9bb { --bg: transparent; --bw: 0px; --pad: 0px; --t-pad: 0px; --m-pad: 0px; --m-mar: 0px; }
/* tabs (all pages): no second sand band, no frame, no indent (tab row and
   text start on the heading line). Tabs look like buttons so it is obvious
   they can be clicked: sand pills, the active one ink */
main .l-6a27f { --bg: transparent; }
main .tabs { --pad: 0px; --t-pad: 0px; --m-pad: 0px; }
.tabs__panel > .L { --pad: 0px; --t-pad: 0px; --m-pad: 0px; }
.tabs__head {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding: 0 0 20px;
  margin: 0 0 24px; border: 0; border-bottom: 1px solid var(--sand-2); border-radius: 0; background: none;
}
.tabs__btn {
  position: relative; padding: 11px 20px; border: 0; border-radius: 99px; background: var(--sand); box-shadow: none;
  font: 600 16px/1.2 var(--font); color: var(--ink); cursor: pointer; transition: background .15s, color .15s;
}
.tabs__btn:hover { background: var(--sand-3); }
.tabs__btn[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.tabs__btn[aria-selected="true"]::after { display: none; }
.tabs__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* one content edge on desktop/tablet: some old section containers had no side
   padding (content 10px left of the hero text); give them the same 10px */
@media (min-width: 768px) {
  main .l-47db7, main .l-5641b, main .l-64655, main .l-c31f5, main .l-89df4,
  body:not(.skin-v2) main .l-3bdb3 { padding-left: 10px; padding-right: 10px; }
  main .l-c31f5 > .l-2fa52 { padding-left: 0; padding-right: 0; }
}
/* below the 1200px container the sections had no side padding at all */
@media (min-width: 768px) and (max-width: 1199px) {
  body:not(.skin-v2) main > section:not(:first-child):not(#tickets) { padding-left: 10px; padding-right: 10px; }
  #tickets { padding-left: 20px; padding-right: 20px; }
}
/* the percentage-sized hero image ended 1px past the viewport at some widths */
main { overflow-x: clip; }
#faq .ttl { text-align: left; margin: 0 0 24px; }
.faq__item { background: #fff; border: 1px solid var(--sand-2); border-radius: 16px; margin-bottom: 10px; }
.faq__q { border: 0; padding: 18px 22px; }
.faq__qt { font-size: 17px; font-weight: 600; }
.faq__qt .num { color: var(--gold); font-variant-numeric: tabular-nums; }
.faq__pm { background: var(--sand); width: 30px; height: 30px; }
.faq__a .L { border: 0; }

@media (max-width: 767px) {
  #tickets { margin-top: 44px; padding: 56px 12px; }
  #tickets .ttl, main h2.ttl, #tickets .tx > h2 { font-size: 26px; }
  /* section titles sat flush on the screen edge (no side padding in the old layout) */
  main h2.ttl { padding-left: 20px; padding-right: 20px; }
  main section.l-aa1a0, main section.l-6a27f { padding-left: 20px; padding-right: 20px; }
  /* nested rows/columns each added 10px on the side: one 20px edge for all content */
  main .l-2fa52, main .l-d2c00, main .l-6bbaa, main .l-ad39d { --m-pad: 10px 0px; }
  main .l-2dfa2, main .l-897c3, main .l-9400b, main .l-fef50 { --m-mar: 0px; }
  main .l-db3f4 h2.ttl, main section.l-aa1a0 h2.ttl, main section.l-6a27f h2.ttl { padding-left: 0; padding-right: 0; }
  #tickets .ttl, #tickets .tx > h2, #tickets .tx > p { padding-left: 8px; padding-right: 8px; }
  .skin-v2 main > section:not(:first-child) h2.ttl { padding-left: 0; padding-right: 0; }
  .tabs__head { gap: 8px; }
  .tabs__btn { font-size: 15px; padding: 10px 16px; }
  #tickets .l-3bbb4 { padding: 10px; }
  .faq__q { padding: 16px 18px; }
  .faq__qt { font-size: 16px; }
}

/* ------------------------------------------------ page design "v2"
   Test on /opening-hours/ (content JSON "skin": "v2" -> body.skin-v2).
   Page-only parts: section rhythm, live status card, hours grid, the two
   short cards. Tickets, buttons, text and FAQ are site-wide (block above).
   Ids beat the generated layout classes on purpose. */
.skin-v2 { --v2-w: 1180px; --v2-gap: 64px; --v2-r: 20px; }
.skin-v2 main > section:not(:first-child) { margin: 0; padding: var(--v2-gap) 24px 0; }
.skin-v2 main > section:not(:first-child) > .s__in { max-width: var(--v2-w); margin: 0 auto; padding: 0; }
.skin-v2 main h2, .skin-v2 main .ttl.center { text-align: left; }
.skin-v2 main h2, .skin-v2 main h2.ttl { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 0 0 24px; }
.skin-v2 main h2 strong { font-weight: 600; }

/* live status card, first row of the hours grid */
.skin-v2 .oh__top {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: var(--v2-r); background: #fff; border: 1px solid var(--sand-2);
  font-variant-numeric: tabular-nums;
}
.skin-v2 .oh__now p { margin: 0; }
.skin-v2 .oh__big { font-size: 30px; margin: 6px 0 2px !important; }
.skin-v2 .oh__sub { color: var(--slate); }
.skin-v2 .oh__pick { width: 260px; }
.skin-v2 .oh__pick input { width: 100%; padding: 9px 14px; border: 1px solid var(--sand-3); border-radius: 99px; background: #fff; }
.skin-v2 .oh__pick input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.skin-v2 .oh__next { list-style: none; margin: 14px 0 0; padding: 0; font-size: 14px; color: var(--slate); }
.skin-v2 .oh__next[hidden] { display: none; }
.skin-v2 .oh__next li { position: relative; padding-left: 16px; line-height: 1.65; }
.skin-v2 .oh__next li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
/* hours: table card + notes beside it */
.skin-v2 #hours-sec .tx > h2 { margin-bottom: 24px; }
.skin-v2 .oh { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; }
.skin-v2 .oh__table { align-self: start; }
.skin-v2 .oh__table {
  width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; padding: 10px;
  background: #fff; border: 1px solid var(--sand-2); border-radius: var(--v2-r); font-size: 15px;
}
.skin-v2 .oh__table th, .skin-v2 .oh__table td { padding: 10px 14px; border: 0; }
.skin-v2 .oh__table tr.is-now td { background: var(--sand); }
.skin-v2 .oh__table tr.is-now td:first-child { border-radius: 12px 0 0 12px; }
.skin-v2 .oh__table tr.is-now td:last-child { border-radius: 0 12px 12px 0; }
.skin-v2 .oh__notes { display: flex; flex-direction: column; gap: 20px; }
.skin-v2 .oh__notes > div { flex: 1; padding: 22px 24px; border-radius: var(--v2-r); background: var(--sand); }
.skin-v2 .oh .oh__notes h3 { font-size: 16px; margin: 0 0 6px; }
.skin-v2 .oh__notes p { font-size: 15px; line-height: 1.6; color: rgba(0, 0, 38, .85); }
.skin-v2 .oh__fine { grid-column: 1 / -1; margin: 0; }

/* reading */
.skin-v2 #read .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 40px; }
.skin-v2 #read .duo > div { padding: 28px 30px; border-radius: var(--v2-r); background: #fff; border: 1px solid var(--sand-2); }
.skin-v2 #read .duo h2 { font-size: 22px; margin: 0 0 10px; }
.skin-v2 #read .duo p { margin: 0; color: rgba(0, 0, 38, .8); }

@media (max-width: 1024px) {
  .skin-v2 { --v2-gap: 56px; }
  .skin-v2 main > section:not(:first-child) { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 767px) {
  .skin-v2 { --v2-gap: 44px; }
  .skin-v2 main > section:not(:first-child) { padding-left: 20px; padding-right: 20px; }
  .skin-v2 main h2, .skin-v2 main h2.ttl { font-size: 26px; }
  .skin-v2 #faq .faq { --m-pad: 0px 0px 50px 0px; }
  .skin-v2 .oh { grid-template-columns: 1fr; }
  .skin-v2 .oh__pick { width: 100%; }
  .skin-v2 .oh__big { font-size: 24px; }
  .skin-v2 .oh__table { padding: 4px; font-size: 13.5px; }
  .skin-v2 .oh__table th, .skin-v2 .oh__table td { padding: 8px 7px; }
  .skin-v2 #read .duo { grid-template-columns: 1fr; }
  .skin-v2 #read .duo > div { padding: 22px; }
}

/* ----------------------------------------------------------------- legal */
.legal { max-width: 1240px; margin: 60px auto; padding: 0 20px; }
.legal__title { font-size: 32px; line-height: 38.4px; margin: 0 0 1.5rem; }
.legal__body > :last-child { margin-bottom: 0; }
@media (max-width: 1199px) { .legal { margin: 0 auto; } }

/* ---------------------------------------------------------------- footer */
/* Footer in the layout of the sister sites (jungfraujochtickets.org):
   brand + one column per menu group + legal, then copyright and language. */
.ft { background: var(--sand); color: var(--ink); margin-top: 40px; }
.ft__wrap { max-width: 1240px; margin: 0 auto; padding: 60px 20px 40px; }
.ft__top, .ft__mid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 24px; }
.ft__top { align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--sand-3); }
.ft__brand { display: inline-block; line-height: 0; }
.ft__brand img { width: 200px; height: auto; }
.ft__h { margin: 0; font-size: .95rem; color: #5d6773; }
.ft__h--m { display: none; }
.ft__mid { padding-top: 26px; }
.ft__about { margin: 0; max-width: 34ch; font-size: .95rem; color: #5d6773; }
.ft__mid ul { list-style: none; margin: 0; padding: 0; }
.ft__mid li { margin: 0 0 10px; line-height: 1.5; }
.ft__mid a { color: var(--ink); }
.ft__mid a:hover, .ft__mid a[aria-current] { color: var(--gold); }
.ft__legal {
  margin-top: 56px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .85rem; color: #5d6773;
}
.ft__lang { display: flex; gap: 10px; }
.ft__lang a { color: #5d6773; }
.ft__lang a[aria-current] { color: var(--ink); }
.ft__lang a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 921px) {
  .ft__top, .ft__mid { grid-template-columns: 1fr 1fr; }
  .ft__top .ft__h { display: none; }
  .ft__top { grid-template-columns: 1fr; }
  .ft__h--m { display: block; margin-bottom: 10px; }
  .ft__about { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 544px) {
  .ft__wrap { padding: 40px 20px 30px; }
  .ft__legal { margin-top: 36px; }
}

.to-top {
  position: fixed; right: 30px; bottom: 30px; z-index: 99; width: 31.5px; height: 31.5px;
  display: flex; align-items: center; justify-content: center; border-radius: 2px;
  background: var(--gold); color: #fff; font-size: 15px;
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.to-top.is-on { opacity: 1; visibility: visible; }
.to-top svg { fill: currentColor; }

/* ---------------------------------------------------------- tablet/mobile */
/* theme typography below 922px: rem based (scaled by the root size above) */
@media (max-width: 921px) {
  body { font-size: 1rem; }
  h2, h2.ttl, .tx h2 { font-size: 1.5625rem; line-height: 1.3; }
  h3, .tx h3 { font-size: 1.25rem; line-height: 1.3; }
  .legal__title { font-size: 2rem; line-height: 1.2; }
  .nav__link, .nav__sub a { font-size: 1rem; }
}
@media (max-width: 767px) {
  h1.ttl { font-size: 30px; line-height: 42px; }
  .tabs__head { flex-wrap: wrap; gap: 0; margin-bottom: 0; }
}

/* ---- generated by build/generate.py: layout classes - do not edit below ---- */
.l-047c1 { --gap:20px;--pad:10px 0px; }
.l-05b2c { --pad:0px 25px;--m-pad:0px 20px; }
.l-0a067 { --dir:row;--gap:20px;--pad:10px;--m-wrap:wrap;--m-ord:2; }
.l-0a3fb { --gap:20px; }
.l-1138d { --irad:20px; }
.l-1612e { --irad:25px 0px 0px 25px;--m-irad:25px 25px 0px 0px;--m-fit:cover;--m-ih:175px; }
.l-1ab4e { --gap:20px;--pad:10px;--m-ord:1; }
.l-24f6f { --t-wd:100%; }
.l-24ff1 { --gap:20px;--pad:10px;--wd:68.753%;--t-wd:68.488%;--m-wd:100%; }
.l-27537 { --gap:normal;--pad:0px 10px; }
.l-2c8ad { --dir:row;--gap:20px;--pad:10px;--m-wrap:wrap; }
.l-2d6c8 { --pad:0px 0px 25px 0px;--m-pad:0px 20px 50px 20px; }
.l-2dfa2 { --gap:20px;--pad:50px 50px 25px 50px;--bg:rgb(236, 231, 204);--rad:20px;--wd:50.968%;--t-wd:51.164%;--m-pad:25px;--m-mar:0px 10px;--m-ord:99999;--m-wd:94.595%; }
.l-2f9e1 { --mar:0px 0px 25px 0px;--m-mar:0px; }
.l-2fa52 { --dir:row;--gap:20px;--pad:10px;--mar:-20px 0px 0px 0px;--m-wrap:wrap; }
.l-34559 { --gap:20px;--pad:10px;--m-ord:3; }
.l-3b7d7 { --dir:row;--pad:10px 0px;--m-wrap:wrap; }
.l-3bbb4 { --gap:20px;--pad:0px 20px;--bg:rgb(255, 255, 255);--bw:3px;--bc:rgb(245, 243, 229);--rad:20px;--t-wd:100%;--m-pad:0px;--m-mar:0px 10px;--m-wd:94.595%; }
.l-3bdb3 { --gap:20px;--pad:50px 0px;--m-pad:25px 0px 0px 0px; }
.l-3c2e6 { --gap:20px;--pad:75px 0px 0px 0px;--m-pad:0px; }
.l-43864 { --mar:0px 0px -75px 0px; }
.l-47db7 { --gap:20px;--pad:50px 0px;--m-pad:25px 0px; }
.l-4e83c { --dir:row;--gap:20px;--pad:10px 0px;--m-wrap:wrap; }
.l-5641b { --gap:20px;--pad:50px 0px 25px 0px;--m-pad:0px; }
.l-5f9bb { --gap:20px;--pad:50px 50px 25px 50px;--bg:rgb(245, 243, 229);--rad:20px;--t-wd:100%;--m-pad:25px;--m-mar:0px 10px;--m-wd:94.595%; }
.l-64655 { --gap:20px;--pad:50px 0px 25px 0px;--m-pad:50px 0px 0px 0px; }
.l-651c6 { --as:flex-end;--wd:auto; }
.l-6a27f { --gap:normal;--bg:rgb(245, 243, 229); }
.l-6b510 { --gap:20px;--t-pad:0px 0px 24px 0px;--m-pad:5px 0px 20px 0px; }
.l-6b71b { --gap:20px;--mar:0px 0px 0px 50px;--wd:47.882%;--t-wd:47.458%;--m-mar:0px;--m-ord:-99999;--m-wd:100%; }
.l-6bbaa { --gap:20px;--pad:10px;--t-wd:100%; }
.l-76850 { --gap:normal;--pad:0px 10px;--mar:25px 0px 0px 0px; }
.l-7bac2 { --gap:normal; }
.l-7d57e { --gap:20px;--pad:0px 86px 0px 60px;--bw:0px 1px 1px 1px;--bc:rgb(245, 243, 229);--rad:0px 0px 22px 22px;--t-pad:0px 60px 24px 64px;--m-pad:5px 20px 20px 20px; }
.l-7de2a { --gap:normal;--pad:0px 86px 0px 60px;--bw:0px 1px 1px 1px;--bc:rgb(245, 243, 229);--rad:0px 0px 22px 22px;--t-pad:0px 60px 0px 64px;--m-pad:0px 20px; }
.l-7e5c3 { --gap:20px;--pad:10px;--wd:39.277%;--t-wd:39.14%;--m-wd:100%; }
.l-802e8 { --mar:0px 0px 25px 0px; }
.l-8156d { --gap:normal;--mar:0px 0px -50px 0px;--m-mar:50px 0px -25px 0px; }
.l-897c3 { --gap:20px;--pad:50px 50px 25px 50px;--bg:rgb(245, 243, 229);--rad:20px;--wd:59.028%;--t-wd:58.868%;--m-pad:25px;--m-mar:0px 10px;--m-wd:94.595%; }
.l-89df4 { --gap:20px;--pad:25px 0px 50px 0px;--m-pad:25px 0px 0px 0px; }
.l-8c06b { --irad:20px;--iw:67%; }
.l-8d871 { --dir:row;--gap:20px;--pad:25px 0px 50px 0px;--m-wrap:wrap;--m-pad:0px 0px 25px 0px; }
.l-9400b { --gap:20px;--pad:50px 50px 25px 50px;--bg:rgb(226, 219, 178);--rad:20px;--wd:50.968%;--t-wd:51.164%;--m-pad:25px;--m-mar:0px 10px;--m-wd:94.595%; }
.l-9b91d { --gap:normal;--pad:0px 10px;--mar:50px 0px 0px 0px; }
.l-aa1a0 { --gap:normal;--m-mar:25px 0px; }
.l-ad39d { --gap:20px;--pad:10px;--wd:47.337%;--t-wd:46.844%;--m-wd:100%; }
.l-ae21a { --gap:20px;--mar:-15px 0px 0px 0px; }
.l-b1c9a { --mar:-15px 150px 0px 0px;--wd:auto;--m-mar:-25px 0px 0px 0px;--m-ord:99999; }
.l-b5d7b { --mar:-15px 150px 0px 0px;--wd:auto;--m-mar:-25px 0px 0px 0px; }
.l-bcce9 { --irad:26px; }
.l-c31f5 { --gap:20px;--pad:50px 0px;--m-pad:0px; }
.l-c6bf3 { --gap:normal;--mar:-15px 0px 0px 0px; }
.l-d2c00 { --dir:row;--gap:20px;--pad:10px;--m-wrap:wrap;--m-mar:-20px 0px 0px 0px; }
.l-d7195 { --gap:normal;--pad:0px 10px;--mar:25px 0px 0px 0px;--m-mar:50px 0px 0px 0px; }
.l-d7a9c { --gap:20px;--pad:25px 0px 0px 0px;--m-pad:0px; }
.l-db3f4 { --gap:normal;--m-pad:0px 20px; }
.l-f2594 { --gap:20px;--pad:10px;--wd:29.483%;--t-wd:29.38%;--m-wd:100%; }
.l-f3ce8 { --gap:20px;--pad:10px;--mar:30px 0px 0px 0px;--wd:47.952%;--t-wd:47.562%;--m-wd:100%; }
.l-fef50 { --gap:20px;--pad:50px 50px 25px 50px;--bg:rgb(245, 243, 229);--rad:20px;--wd:50.968%;--t-wd:51.164%;--m-pad:25px;--m-mar:0px 10px;--m-wd:94.595%; }