/* Design "Inselbar" — beach bar on the Donauinsel. Loaded after style.css + cms.css only when chosen in Einstellungen → Design
 * (cms/views/header.php), so it overrides by source order and the classic design stays untouched.
 * Colours come from the mural, the umbrellas and the ochre interior. Contrast (WCAG): ink on sand 12.8, teal on sand 7.1,
 * coral on sand 4.7 (large text only), ink on sun 7.6, ink on turquoise 5.6, sun on ink 7.6.
 * Turquoise / sun are never used as text on a light background. */
:root {
  --sand: #FBF6EA; --ink: #12313A; --teal: #0B5C66; --turq: #1FB5C4; --sun: #F4B63F; --sun-deep: #C98F1F; --coral: #C2452D;
  --display: Fredoka, Poppins, sans-serif; --hand: Caveat, cursive; --body: Nunito, sans-serif; /* round sans: same family feel as Fredoka */
  /* sand above a wavy edge; flip with scaleY(-1) for a bottom edge */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v20c-100 20-200 20-300 0s-200-20-300 0-200 20-300 0S100 0 0 20z' fill='%23FBF6EA'/%3E%3C/svg%3E");
  /* turquoise squiggle under headings */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5q5-4 10 0t10 0 10 0 10 0' fill='none' stroke='%231FB5C4' stroke-width='3'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
body { background: var(--sand); color: var(--ink); font-family: var(--body); font-size: 17px; }
.cms-hours-status small { font-family: var(--body); } /* cms.css names Lora here */
h1, h2, h3, h4, h5, h6 { color: var(--ink); }
h1, h2, h3, h4, h5, h6, .menu-nav li, .view-more, .copyright,
.cms-hours-status, .cms-hours-closure strong, .cms-hours-table th, .cms-event-btn::after, .cms-event-date, .cms-event-title, .cms-event-badge,
.cms-dialog-facts dt, .cms-dialog-facts strong, .cms-dialog-title, .cms-dialog-close, .cms-dialog-dates-title, .cms-call { font-family: var(--display); }
a, a:hover, p a, p a:hover { color: var(--teal); }
p a { border-bottom: 1px solid var(--teal); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; } /* style.css removes focus outlines */

/* ---------- header ---------- */
#header-1 { padding-bottom: 40px; background: linear-gradient(rgba(18, 49, 58, .8), rgba(18, 49, 58, 0)); } /* scrim: address + phone readable on any photo */
.info-txt { font-size: 14px; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.book-now .info-txt:last-child { font-family: var(--display); font-weight: 600; font-size: 16px; }
.menu-nav li { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.menu-nav > li:hover > a, .menu-nav li.current-menu-item > a { color: var(--sun); }

/* ---------- buttons ---------- */
.view-more, .more-white { padding: 13px 30px; font-size: 15px; font-weight: 600; letter-spacing: .5px; text-transform: none; color: var(--ink);
  background: var(--sun); border: 0; border-radius: 999px; box-shadow: 0 4px 0 var(--sun-deep); transition: transform .15s, box-shadow .15s; }
.view-more:hover, .view-more:focus-visible { color: var(--ink); background: var(--sun); border: 0; transform: translateY(2px); box-shadow: 0 2px 0 var(--sun-deep); }

/* ---------- home hero ---------- */
.home-slider { background-color: var(--ink); }
.home-slider:after { background: linear-gradient(rgba(18, 49, 58, .25), rgba(18, 49, 58, .2) 45%, rgba(18, 49, 58, .65)); }
.intro-text .img-feature { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55)); }

/* ---------- headings: handwritten kicker, round title, water squiggle ---------- */
.home-subtitle { display: inline-block; font: 700 28px/1.1 var(--hand); text-transform: none; letter-spacing: 0; color: var(--coral); transform: rotate(-2deg); }
.home-title { display: block; width: fit-content; text-transform: none; letter-spacing: 0; font-weight: 600; }
.alignr .home-title { margin-left: auto; }
.alignc .home-title { margin-left: auto; margin-right: auto; }
.title-headline:before { display: none; }
.title-headline:after { height: 10px; bottom: -14px; background: var(--squiggle) repeat-x left center / 40px 10px; }
.small-feature-desc h5, .single-post-title { text-transform: none; }

/* ---------- features: white card that overlaps the hero ---------- */
.home-features { background: none; padding: 0 15px; position: relative; z-index: 3; }
.home-slider + .home-features { margin-top: -56px; }
.home-features > .container { background: #fff; border-radius: 24px; padding: 28px 24px 12px; box-shadow: 0 14px 40px rgba(18, 49, 58, .16); }
.small-feature { margin-bottom: 16px; }
.small-feature-icon { width: 64px; height: 64px; padding: 12px; border-radius: 50%; background: var(--turq); }
.small-feature-icon img { width: 40px; height: 40px; }
.col-md-4:nth-child(3n+2) .small-feature-icon { background: var(--sun); }
.col-md-4:nth-child(3n) .small-feature-icon { background: #FF8A6B; }
.small-feature-desc { margin-left: 80px; }
.small-feature-desc h5 { font-size: 22px; font-weight: 600; }

/* ---------- photos: rounded, on a tilted colour block instead of the black frame ---------- */
.image-frame img { border-radius: 20px; }
.image-frame::after { top: 14px; left: 14px; right: -14px; bottom: -14px; border: 0; border-radius: 24px; background: var(--turq); transform: rotate(2.5deg); }
#home-wine .image-frame::after { background: var(--sun); transform: rotate(-2.5deg); left: -14px; right: 14px; }

/* ---------- photo band ---------- */
.parallax { box-shadow: inset 0 0 0 2000px rgba(18, 49, 58, .55); }
.parallax::before, .parallax::after, .topSingleBkg::after, footer::before { content: ""; position: absolute; left: 0; right: 0; height: 28px; background: var(--wave) repeat-x center / 600px 100%; z-index: 5; }
.parallax::before, footer::before { top: -1px; }
.parallax::after, .topSingleBkg::after { bottom: -1px; transform: scaleY(-1); }
.parallax-content .home-subtitle { color: var(--sun); }
.parallax-content .home-title { font-size: 44px !important; } /* the template sets 36px inline */
.parallax-content .title-headline:after { background: var(--squiggle) repeat-x left center / 40px 10px; }

/* ---------- inner page header ---------- */
.item-img:before { background: linear-gradient(rgba(18, 49, 58, .55), rgba(18, 49, 58, .7)); }
.post-subtitle { opacity: 1; font-style: italic; font-size: 20px; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.single-post-title { font-weight: 600; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* ---------- events: cards ---------- */
.cms-hours, .cms-events, .cms-dialog { --cms-ink: var(--ink); --cms-accent: var(--sun); --cms-line: #E7DFCB; --cms-muted: #4D6268; }
.cms-events { border-top: 0; text-align: left; }
.cms-event { margin-bottom: 10px; border: 0; }
.cms-event-btn { padding: 14px 18px; background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(18, 49, 58, .08); overflow: hidden; }
.cms-event-btn:hover, .cms-event-btn:focus-visible { background: #fff; padding-right: 18px; box-shadow: 0 6px 18px rgba(18, 49, 58, .16); }
.cms-event-btn::before { left: 0; right: auto; background: var(--turq); }
.cms-event-btn::after { color: var(--teal); font-size: 13px; text-transform: none; letter-spacing: .3px; }
.cms-event-date { color: var(--teal); letter-spacing: .5px; }
.cms-event-title { text-transform: none; letter-spacing: 0; font-weight: 600; }
.cms-event-badge { border-radius: 999px; padding: 3px 10px; }
.cms-event.is-past .cms-event-btn { background: none; box-shadow: none; padding-top: 4px; padding-bottom: 4px; }

/* ---------- event popup: the page's own pieces — sand, squiggle title, white cards, handwritten labels, round yellow button ---------- */
.cms-dialog { border-top: 0; border-radius: 24px; background: var(--sand); box-shadow: 0 24px 60px rgba(18, 49, 58, .45); overflow: hidden; }
.cms-dialog::backdrop { background: rgba(18, 49, 58, .8); }
.cms-dialog-title { position: relative; width: fit-content; max-width: calc(100% - 52px); margin-bottom: 32px; font-size: 32px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.cms-dialog-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 10px; background: var(--squiggle) repeat-x left center / 40px 10px; }
.cms-dialog-facts { gap: 12px; border: 0; }
.cms-dialog-facts > div { background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(18, 49, 58, .08); }
.cms-dialog-facts > div + div { border-left: 0; }
.cms-dialog-facts dt, .cms-dialog.is-past .cms-dialog-when dt { margin-bottom: 2px; padding: 0; background: none; color: var(--coral); font: 700 24px/1.1 var(--hand); text-transform: none; letter-spacing: 0; transform: rotate(-2deg); }
.cms-dialog-facts strong { font-weight: 600; }
.cms-dialog-close { top: 12px; right: 12px; border-radius: 50%; background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--sun-deep); transition: transform .15s, box-shadow .15s; }
.cms-dialog-close:hover, .cms-dialog-close:focus-visible { background: var(--sun); color: var(--ink); transform: translateY(2px); box-shadow: 0 1px 0 var(--sun-deep); }
.cms-dialog-close:focus-visible { outline: 3px solid var(--turq); outline-offset: 2px; }
.cms-dialog-dates-title { border-top: 0; padding-top: 0; font-size: 16px; text-transform: none; letter-spacing: 0; }
.cms-dialog-dates li { border-left-color: var(--turq); }

/* ---------- text pages (Impressum, AGB): white card, calmer heading sizes ---------- */
.page-holder.custom-page-template { background: #fff; border-radius: 24px; padding: 40px 44px; box-shadow: 0 14px 40px rgba(18, 49, 58, .1); }
.custom-page-template h1 { font-size: 34px; font-weight: 600; }
.custom-page-template h2 { font-size: 28px; font-weight: 600; margin-top: 28px; }
.custom-page-template h3 { font-size: 22px; font-weight: 600; margin-top: 20px; }
.page-content strong, #home-content-2 strong { font-weight: 700; }

/* ---------- opening hours ---------- */
.cms-hours-status { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(18, 49, 58, .08); font-size: 13px; letter-spacing: .5px; }
.cms-hours-status::before { border-radius: 50%; }
.cms-hours-table { border-top: 0; border-bottom: 0; }
.cms-hours-table th { font-size: 13px; letter-spacing: .5px; }
.cms-hours-table tr.is-today th { border-radius: 12px 0 0 12px; box-shadow: none; padding-left: 14px; }
.cms-hours-table tr.is-today td { border-radius: 0 12px 12px 0; }
.cms-hours-closure { border-radius: 0 12px 12px 0; background: #fff; }

/* ---------- footer: lagoon band under a wave ---------- */
footer { position: relative; margin-top: 24px; padding-top: 84px; background: var(--ink); color: var(--sand); }
footer h5 { color: var(--sand); font-weight: 600; }
footer a, footer a:hover, footer p a { color: var(--sun); border-color: var(--sun); }
footer .footer-content a[href^="tel:"], footer .footer-content a[href^="mailto:"] { color: var(--sand); border-bottom-color: var(--sun); }
footer .footer-content a[href^="tel:"]:hover, footer .footer-content a[href^="mailto:"]:hover { color: var(--sun); }
.footer-social li a { width: 44px; height: 44px; line-height: 40px; font-size: 18px; color: var(--sand); border-color: rgba(251, 246, 234, .4); }
.footer-social li a:hover { color: var(--sun) !important; border-color: var(--sun); } /* style.css sets brand hover colours with !important */
.copyright { font-size: 13px; text-transform: none; letter-spacing: .3px; margin-top: 20px; }
footer .cms-hours { max-width: 400px; --cms-ink: var(--sand); --cms-line: rgba(251, 246, 234, .16); --cms-muted: #B9CDD0; }
footer .cms-hours-status { background: rgba(251, 246, 234, .1); box-shadow: none; font-size: 14px; }
footer .cms-hours-table th { font-size: 15px; }
footer .cms-hours-table td { font-size: 18px; }
footer .cms-hours-table small, footer .cms-hours-note, footer .cms-hours-special, footer .cms-hours-closure strong { font-size: 14px; }
footer .cms-hours-closure { font-size: 16px; }
footer .cms-hours-table th, footer .cms-hours-table td { padding-left: 6px; padding-right: 6px; }
footer .cms-hours-table tr.is-today th { padding-left: 10px; }
footer .cms-hours-table small { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199px) { footer .cms-hours-table td { font-size: 17px; } footer .cms-hours-table small { font-size: 13px; } } /* narrow footer column */
footer .cms-hours-closure { background: rgba(251, 246, 234, .1); }
footer .cms-hours-table tr.is-today th, footer .cms-hours-table tr.is-today td, footer .cms-hours-table tr.is-today small { background: var(--sun); color: var(--ink); }
.scrollup i { width: 44px; height: 44px; padding-top: 13px; background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--sun-deep); }

/* ---------- phones / tablets ---------- */
@media (max-width: 979px) {
  #header-1 { padding-top: 12px; }
  .cms-call { top: 12px; padding: 0 18px; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: .3px; color: var(--ink); background: var(--sun); border-radius: 999px; box-shadow: 0 3px 0 var(--sun-deep); }
  .cms-call:hover, .cms-call:focus { color: var(--ink); background: var(--sun); }
  .navbar-toggle-1 { top: 12px; width: 44px; height: 44px; padding: 0 10px; margin-right: 10px; } /* 44px tap target */
}
@media (max-width: 767px) {
  .nav-holder-1 { margin: 64px 15px 0; border-radius: 16px; background: var(--sand); box-shadow: 0 10px 30px rgba(18, 49, 58, .3); } /* opens below the call button instead of under it */
  .menu-nav-1 li a { color: var(--ink); padding: 12px 0; }
  .menu-nav > li:hover > a, .menu-nav li.current-menu-item > a { color: var(--teal); } /* sun yellow is unreadable on sand */
  .home-title { font-size: 40px; }
  .parallax-content .home-title { font-size: 34px !important; }
  .parallax-content { padding: 40px 0; }
  .image-frame::after, #home-wine .image-frame::after { top: 8px; left: 8px; right: -8px; bottom: -8px; transform: rotate(1.5deg); }
  .cms-events { margin-left: 0; max-width: none; }
  footer { margin-top: 16px; }
  .page-holder.custom-page-template { padding: 24px 20px; }
  .custom-page-template h1 { font-size: 28px; }
  .custom-page-template h2 { font-size: 24px; }
  .custom-page-template h3 { font-size: 20px; }
}
@media (max-width: 480px) { /* date and time stacked in the event popup */
  .cms-dialog-facts { grid-template-columns: 1fr; }
  .cms-dialog-dates { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { .view-more, .cms-dialog-close { transition: none; } }