/* CMS extras: opening hours + events, styled to the site CI (style.css):
 * Poppins uppercase + letter-spacing for labels, Lora for body text, square corners, thick #252525 rules (.view-more, .image-frame),
 * orange #e67e22 only as accent fill/rule. Orange is never used for small text (2.9:1 on white); text on orange is #252525 (5.4:1). */
.cms-hours, .cms-events, .cms-dialog { --cms-ink: #252525; --cms-accent: #e67e22; --cms-line: #e5e5e5; --cms-muted: #595959; }

/* ---------- opening hours ---------- */
.cms-hours { max-width: 360px; margin: 0 auto; text-align: left; }
.cms-hours-status { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; margin: 0 0 16px; padding: 10px 14px;
  border: 3px solid var(--cms-ink); font: 600 12px/1.4 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--cms-ink); }
.cms-hours-status { text-wrap: balance; } /* two even lines instead of one word left over */
.cms-hours-status:empty { display: none; }
.cms-hours-status::before { content: ""; width: 10px; height: 10px; background: #9a9a9a; }
.cms-hours-status.is-open::before { background: #1e8449; }
.cms-hours-status.is-soon::before { background: var(--cms-accent); animation: cms-blink 1.4s ease-in-out infinite; }
.cms-hours-status.is-closed::before { background: #c0392b; }
.cms-hours-status small { grid-column: 2; font: italic 400 13px/1.5 Lora, serif; text-transform: none; letter-spacing: 0; color: var(--cms-muted); }
.cms-hours-note { font-size: 13px; font-style: italic; margin: 0 0 8px; color: var(--cms-muted); }
.cms-hours-closure { font-size: 14px; margin: 0 0 12px; padding: 10px 14px; border-left: 5px solid var(--cms-accent); background: #f4f4f4; }
.cms-hours-closure strong { font-family: Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.cms-hours-closure.is-active { border-left-color: #c0392b; }
.cms-hours-status:not(:empty) + .cms-hours-closure.is-active { display: none; } /* the status line already says it; the note stays as fallback without JS */
.cms-hours-table, .cms-hours-table th, .cms-hours-table td { border: 0; } /* reset the theme's boxed table borders */
.cms-hours-table { width: 100%; border-collapse: collapse; margin: 0; border-top: 3px solid var(--cms-ink); border-bottom: 3px solid var(--cms-ink); }
.cms-hours-table th, .cms-hours-table td { padding: 8px 10px; vertical-align: baseline; border-bottom: 1px solid var(--cms-line); }
.cms-hours-table tr:last-child th, .cms-hours-table tr:last-child td { border-bottom: 0; }
.cms-hours-table th { font: 600 12px/1.6 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; text-align: left; }
.cms-hours-table td { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.cms-hours-table small { display: block; font-size: 12px; font-style: italic; color: var(--cms-muted); }
.cms-hours-table tr.is-today th, .cms-hours-table tr.is-today td { background: var(--cms-ink); color: #fff; font-weight: 700; }
.cms-hours-table tr.is-today th { box-shadow: inset 5px 0 0 var(--cms-accent); padding-left: 15px; }
.cms-hours-table tr.is-today small { color: #d9d9d9; }
.cms-hours-table.is-paused { opacity: .5; }
.cms-hours-special { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; }
.cms-hours-special li { padding: 4px 0 4px 12px; border-left: 3px solid var(--cms-accent); margin-bottom: 4px; }
.cms-hours-section { padding-top: 54px; padding-bottom: 54px; }

/* ---------- events (sits in a right-aligned column next to .image-frame) ---------- */
.cms-events-intro { margin-bottom: 16px; }
.cms-events { list-style: none; padding: 0; margin: 0 0 0 auto; max-width: 480px; border-top: 3px solid var(--cms-ink); }
.cms-event { margin: 0; border-bottom: 1px solid var(--cms-line); }
.cms-event-btn { display: block; width: 100%; background: none; border: 0; padding: 14px 0 14px 16px; font: inherit; color: inherit; text-align: inherit; cursor: pointer;
  position: relative; transition: background-color .15s, padding .15s; }
.cms-event-btn::after { content: "Details +"; display: block; margin-top: 6px; font: 700 11px/1 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--cms-ink); }
.cms-event-btn::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 0; background: var(--cms-accent); transition: width .15s; }
.cms-event-btn:hover, .cms-event-btn:focus-visible { background: #f4f4f4; padding-right: 16px; }
.cms-event-btn:hover::before, .cms-event-btn:focus-visible::before { width: 5px; }
.cms-event-btn:focus-visible { outline: 3px solid var(--cms-ink); outline-offset: 2px; }
.cms-event-date { display: block; font: 600 12px/1.5 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--cms-muted); }
.cms-event-title { display: block; margin: 2px 0; font: 700 20px/1.3 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--cms-ink); }
.cms-event-summary { display: block; font-size: 15px; }
.cms-event-badge { display: inline-block; margin-bottom: 6px; padding: 3px 8px; font: 700 11px/1.3 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px;
  color: var(--cms-ink); background: var(--cms-accent); }
.cms-event-badge[hidden] { display: none; }
.cms-event.is-past .cms-event-btn { opacity: .55; }
.cms-event.is-past .cms-event-btn::after { content: none; }
.cms-event.is-past .cms-event-title, .cms-event.is-past .cms-event-date { text-decoration: line-through; }
.cms-event.is-past .cms-event-title { font-size: 16px; }
@media (max-width: 991px) { .cms-events { margin-top: 24px; } }

/* ---------- event popup (native <dialog>, styled) ---------- */
.cms-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); width: 100%; max-width: min(600px, calc(100vw - 32px));
  border: 0; border-top: 6px solid var(--cms-accent); border-radius: 0; padding: 0; color: var(--cms-ink); background: #fff; box-shadow: 18px 18px 0 var(--cms-ink); text-align: left; overflow: visible; }
.cms-dialog[open] { animation: cms-pop .2s ease-out; }
.cms-dialog::backdrop { background: rgba(21, 21, 21, .75); }
.cms-dialog-body { padding: 32px; max-height: calc(100vh - 38px); overflow-y: auto; }
.cms-dialog .cms-dialog-img { display: block; /* two classes: must beat ".home-widget img { max-width: 100% }" in style.css, which cut the right edge short */ width: calc(100% + 64px); max-width: none; margin: -32px -32px 24px; max-height: 300px; object-fit: cover; }
.cms-dialog-facts { display: grid; grid-template-columns: 3fr 2fr; gap: 0; margin: 0 0 20px; border: 3px solid var(--cms-ink); }
.cms-dialog-facts > div { padding: 14px 16px; }
.cms-dialog-facts > div + div { border-left: 3px solid var(--cms-ink); }
.cms-dialog-facts dt { display: inline-block; margin: 0 0 8px; padding: 2px 8px; background: var(--cms-accent); color: var(--cms-ink); font: 700 12px/1.4 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.cms-dialog-facts dd { margin: 0; font-size: 17px; line-height: 1.45; }
.cms-dialog-facts strong { display: block; font: 700 21px/1.3 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.cms-dialog-facts small { display: block; margin-top: 4px; font-size: 14px; font-style: italic; color: var(--cms-muted); }
.cms-dialog-title { margin: 0 0 16px; font: 700 28px/1.2 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.cms-dialog-summary { font-weight: 700; font-style: italic; }
.cms-dialog-info { margin-bottom: 8px; }
.cms-dialog-close { position: absolute; top: -6px; right: 0; width: 44px; height: 44px; border: 0; border-radius: 0; background: var(--cms-ink); color: #fff; font: 400 28px/1 Poppins, sans-serif; cursor: pointer; z-index: 1; transition: background-color .15s, color .15s; }
.cms-dialog-close:hover, .cms-dialog-close:focus-visible { background: var(--cms-accent); color: var(--cms-ink); }
.cms-dialog-close:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.cms-dialog-dates-title { margin: 20px 0 8px; padding-top: 16px; border-top: 3px solid var(--cms-ink); font-family: Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.cms-dialog-dates { list-style: none; padding: 0; margin: 0; columns: 2; font-size: 14px; }
.cms-dialog-dates li { padding: 3px 0 3px 10px; border-left: 3px solid var(--cms-accent); margin-bottom: 4px; break-inside: avoid; }
.cms-dialog-dates li.is-past { text-decoration: line-through; opacity: .5; border-left-color: var(--cms-line); }
.cms-dialog.is-past .cms-dialog-when dd { text-decoration: line-through; color: var(--cms-muted); }
.cms-dialog.is-past .cms-dialog-when dt { background: #d9d9d9; }
.cms-dialog.is-past @media (max-width: 480px) {
  .cms-dialog { box-shadow: 8px 8px 0 var(--cms-ink); max-width: calc(100vw - 24px); }
  .cms-dialog-body { padding: 24px 20px; }
  .cms-dialog-img { width: calc(100% + 40px); margin: -24px -20px 20px; }
  .cms-dialog-title { font-size: 22px; }
  .cms-dialog-facts { grid-template-columns: 1fr; }
  .cms-dialog-facts > div + div { border-left: 0; border-top: 3px solid var(--cms-ink); }
  .cms-dialog-dates { columns: 1; }
}

/* long event texts: the popup scrolls inside itself, the page behind stays put; dvh = visible height on phones (browser bars excluded) */
.cms-dialog { max-height: calc(100dvh - 32px); }
.cms-dialog-body { max-height: calc(100dvh - 38px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html:has(.cms-dialog[open]) { overflow: hidden; }

@keyframes cms-blink { 50% { opacity: .35; } }
@keyframes cms-pop { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .cms-hours-status.is-soon::before, .cms-dialog[open] { animation: none; } .cms-event-btn, .cms-event-btn::before { transition: none; } }

/* ---------- page fixes ---------- */
/* long URLs / big headings in page text (Impressum, AGB) must not push the page wider than the phone */
.custom-page-template { overflow-wrap: anywhere; }
.custom-page-template h1, .custom-page-template h2, .custom-page-template h3 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 767px) {
  .custom-page-template h1 { font-size: 34px; }
  .custom-page-template h2 { font-size: 28px; }
  .custom-page-template h3 { font-size: 24px; }
  /* offset photo frame: 30px offset would stick out past the 15px gutter */
  .image-frame::after { top: 12px; left: 12px; right: -12px; bottom: -12px; border-width: 3px; }
}

/* tap-to-call in the mobile header (desktop shows the "Reservierung" block instead) */
.cms-call { display: none; }
@media (max-width: 979px) {
  .cms-call { display: inline-flex; align-items: center; gap: 8px; position: absolute; top: 0; left: 15px; z-index: 5; min-height: 44px; padding: 0 14px;
    background: #252525; color: #fff; font: 700 12px/1 Poppins, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
  .cms-call:hover, .cms-call:focus { background: #e67e22; color: #252525; }
  .cms-call .fa { font-size: 16px; }
}
.footer-content a[href^="tel:"], .footer-content a[href^="mailto:"] { color: inherit; border-bottom: 1px solid #e67e22; }
.footer-content a[href^="tel:"]:hover, .footer-content a[href^="mailto:"]:hover { color: #e67e22; }