/* il Boccone – design system of the HTML prototype.
   HAND-WRITTEN SOURCE (not generated). Values measured on www.ilboccone.de (Joomla template
   "ilboccone": layout.css, customize.css, media-queries.css) at 1440 px and 390 px.
   Becomes the theme stylesheet in WordPress; every section class = one ACF layout. */

/* ---------------------------------------------------------------- fonts
   Avenir LT (Monotype web font, files as self-hosted by the old site).
   Three separate families as in the old template: <strong> in Light is a synthesised bold. */
@font-face { font-family: "Avenir Light"; font-display: swap;
  src: url("../fonts/0078f486-8e52-42c0-ad81-3c8d3d43f48e.woff2") format("woff2"), url("../fonts/908c4810-64db-4b46-bb8e-823eb41f68c0.woff") format("woff"); }
@font-face { font-family: "Avenir Medium"; font-display: swap;
  src: url("../fonts/17b90ef5-b63f-457b-a981-503bb7afe3c0.woff2") format("woff2"), url("../fonts/c9aeeabd-dd65-491d-b4be-3e0db9ae47a0.woff") format("woff"); }
@font-face { font-family: "Avenir Heavy"; font-display: swap;
  src: url("../fonts/d513e15e-8f35-4129-ad05-481815e52625.woff2") format("woff2"), url("../fonts/61bd362e-7162-46bd-b67e-28f366c4afbe.woff") format("woff"); }

/* ---------------------------------------------------------------- tokens */
:root {
  --f-light: "Avenir Light", Arial, Helvetica, sans-serif;
  --f-medium: "Avenir Medium", Arial, Helvetica, sans-serif;
  --f-heavy: "Avenir Heavy", Arial, Helvetica, sans-serif;

  --c-text: #000;
  --c-page: #242424;        /* outside the 1260 px frame */
  --c-bg: #fff;
  --c-link: #826c4b;        /* links, h3 */
  --c-kicker: #6e4235;      /* subline under headings */
  --c-kicker-alt: #866346;  /* subline on Kontakt / Impressum */
  --c-nav-active: #8d734a;
  --c-nav-hover: #f5cd5b;
  --c-event-cat: #753b2f;
  --c-event-fact: #a67d5d;
  --c-mobile-nav: #808080;

  --frame: 1260px;          /* .wrapperall */
  --pad: 76px;              /* .padtype1 */
  --topbar-h: 35px;
  --header-h: 100px;
  --col-pad: 57px;          /* .ColumnTextPad margin */
  --lh: 20px;               /* div line-height 1.25em of 16 px, inherited as px */
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: none; text-size-adjust: none; }
body { margin: 0; background: var(--c-page); color: var(--c-text); font: 16px/var(--lh) var(--f-light); overflow-x: hidden; }
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--c-link); text-decoration: none; transition: all .2s; }
a:hover { text-decoration: underline; }
strong, b { font-weight: bold; }
h1, h2, h3, h4 { font-family: var(--f-light); font-weight: normal; line-height: normal; margin: 8px 0 10px; color: #000; text-align: left; }
p, ul, ol { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 10000001; background: #000; color: #fff; padding: 8px 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--c-nav-hover); outline-offset: 2px; }

.site { position: relative; max-width: var(--frame); margin: 0 auto; background: var(--c-bg); }
.wrap { padding: 0 var(--pad); }
.s { display: flow-root; }   /* keep heading margins inside their section */

/* ---------------------------------------------------------------- top bar (.infoblockdiv) */
.topbar { position: relative; z-index: 1000000; height: var(--topbar-h); background: #000; color: #fff;
  font: 12px/15px var(--f-heavy); text-align: center; }
.topbar__list { display: flex; justify-content: center; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.topbar__list li { padding: 0 25px 0 0; background: none; }
.topbar__list a { color: #fff; text-decoration: none; }
.topbar__addr img { vertical-align: middle; margin: -4px 12px 0 0; }
.topbar__hours { text-transform: uppercase; }

/* live opening status (site.js, from the opening hours in the website options) */
.hours-status.is-open::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%;
  background: #5fcf86; vertical-align: middle; }

/* ---------------------------------------------------------------- header + main navigation */
.header { position: absolute; top: var(--topbar-h); left: 0; right: 0; z-index: 100000; height: var(--header-h); background: #000; }
.header__bar { height: 100%; }
.header__logo, .nav-toggle { display: none; }
.nav { display: flex; justify-content: center; align-items: flex-start; height: 100%; font: 15px/18px var(--f-light); text-transform: uppercase; }
.nav__list { display: flex; margin: 24px 0 0; padding: 0; list-style: none; }
.nav__list li { margin: 0; padding: 0; background: none; }
.nav__list a { display: block; padding: 19px 25px 17px; color: #fff; text-decoration: none; transition: all .2s; }
.nav__list a:hover { color: var(--c-nav-hover); text-decoration: none; }
.nav__list a[aria-current="page"] { color: var(--c-nav-active); }
.nav__home { display: none; }
.nav__logo { display: block; margin: 20px 0 0 110px; padding: 0 25px; }
.nav__logo img { display: block; width: 241px; }
.nav__mobile { display: none; }

/* sticky state after 250 px scroll (core.js styleType2) */
.is-sticky .topbar { position: fixed; top: 0; left: 0; right: 0; max-width: var(--frame); margin: 0 auto; }
.is-sticky .header { position: fixed; top: var(--topbar-h); height: auto; max-width: var(--frame); margin: 0 auto; box-shadow: 0 -2px 38px -7px rgba(0,0,0,.45); }
.is-sticky .nav { align-items: center; }
.is-sticky .nav__list { margin: 0; }
.is-sticky .nav__list a { padding: 7px 26px 8px; font-size: 14px; }
.is-sticky .nav__logo { margin: 0 0 0 110px; padding: 7px 26px 9px; }   /* below the top bar, not under it (old site: top 30 px cut the logo) */
.is-sticky .nav__logo img { width: 120px; }
.is-sticky .site { padding-top: var(--topbar-h); }

/* ---------------------------------------------------------------- main frame */
.main { display: flow-root; padding-top: var(--header-h); }
.main > .s:first-child:not(.s--hero-slider):not(.s--banner) { padding-top: 80px; }
.main > .s--banner + .s { padding-top: 87px; }
.page--home .main { padding-bottom: 65px; }
.main { padding-bottom: 80px; }
.main > .s--image:last-child { padding-bottom: 0; margin-bottom: -80px; }   /* .FullWidthLast: image meets the footer */
.main > .s--split:last-child { padding-bottom: 85px; }
.main > .s--gallery:last-child { padding-bottom: 0; }

/* ---------------------------------------------------------------- headings */
.h-page { font-size: 63px; line-height: 1em; margin: 0 0 17px; }
.main > .s:first-child .h-page { margin-top: 0; }
.h-col { font-size: 61px; line-height: normal; }
.h-center { font-size: 50px; line-height: normal; }
.h-plain { font-size: 50px; line-height: normal; }
.is-center, .is-center .h-center { text-align: center; }
.kicker { color: var(--c-kicker); margin: 0 0 20px; }
.kicker--alt { color: var(--c-kicker-alt); }

/* ---------------------------------------------------------------- rich text */
.txt { line-height: var(--lh); }
.txt p, .txt ul, .txt ol { margin: 0 0 20px; }
.txt > :last-child { margin-bottom: 0; }
.txt .lg, .txt p.lg { font-size: 14pt; }
.txt ul { padding: 0; list-style: none; margin-top: 10px; margin-bottom: 10px; }
.txt ul li { padding: 2px 0 5px 20px; background: url(../img/ulli.png) no-repeat left 7px; }
.txt ol li { margin-left: 30px; padding: 2px 0 0 3px; }
.txt h2 { font-size: 29px; }
.txt h3 { font-size: 26px; color: var(--c-link); }
.txt h4 { font-size: 23px; }
.txt p + h2, .txt p + h3, .txt p + h4 { margin-top: 28px; }        /* blank line + heading margin as on the old site */
.txt.is-compact p { margin-bottom: 0; }                               /* field "Absätze ohne Abstand" (Datenschutz) */
.txt.is-compact p + h2, .txt.is-compact p + h3 { margin-top: 8px; }

/* ---------------------------------------------------------------- buttons (.Button a) */
.btns { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 20px; }
.is-center .btns { justify-content: center; }
.btn { display: inline-block; box-sizing: content-box; min-width: 117px; padding: 9px 12px; background: #000; color: #fff; border: 0;
  font: 14px/20px var(--f-medium); letter-spacing: 2px; text-transform: uppercase; text-align: center; cursor: pointer; }
.btn:hover { opacity: .7; text-decoration: none; }

/* ---------------------------------------------------------------- layout: hero_slider (.slideshowdiv) */
.slider { position: relative; overflow: hidden; }
.slider__track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform 1.5s ease; }
.slider__slide { flex: 0 0 100%; padding: 0; background: none; }
.slider__slide img, .s--banner img { display: block; width: 100%; min-width: 460px; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 25px; display: flex; justify-content: center; gap: 10px; }
.slider__dots button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.slider__dots button[aria-current="true"] { background: #fff; }

/* ---------------------------------------------------------------- layout: text (.FullWidthCenter / article body) */
.s--text { padding: 20px 0 140px; }
.s--text.is-narrow .txt { max-width: 720px; margin: 0 auto; padding: 0 10px; }
.page--home .s--text { padding: 0; }
.page--home .s--text .h-page { margin-top: 115px; }

/* larger lead text (text field "Schriftgröße: Groß") - home intro */
.txt--lg { font-size: 19px; line-height: 30px; }
.txt--lg p { margin-bottom: 12px; }

/* home intro: one size, one rhythm - heading, greeting, button, hours, tagline (Wunsch Kunde 04.10.2026) */
.page--home .s--text .h-page { margin: 75px 0 22px; }
.page--home .s--text .btns { margin-top: 24px; }
.page--home .s--opening-hours { padding: 50px 0 0; }
.page--home .s--opening-hours + .s--text { padding-top: 50px; }
.page--home .teasers { padding-top: 40px; }

/* ---------------------------------------------------------------- layout: opening_hours */
.s--opening-hours { padding: 0 0 40px; }
.hours { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 90px; text-align: center; }
.hours__col { flex: 0 1 360px; }
.hours__title { margin: 0 0 8px; color: var(--c-kicker); font: 17px/30px var(--f-medium); letter-spacing: 2px; text-align: center;
  text-transform: uppercase; }
.hours__list { margin: 0; padding: 0; list-style: none; font-size: 19px; line-height: 30px; }
.hours__list li { padding: 0; background: none; }
.hours__day { font-family: var(--f-medium); }
.page--datenschutzerklaerung .s--text, .page--job .s--text, .page--impressum .s--text { padding: 0; }

/* ---------------------------------------------------------------- layout: page_title (h1.ArticleHeading) */
.s--page-title { padding-bottom: 0; }
.s--page-title .h-page { margin: 0 0 17px; }
.s--page-title .h-plain { margin: 0 0 10px; }

/* ---------------------------------------------------------------- layout: split (.ColumnPicture + .ColumnText) */
.split { display: flex; align-items: flex-start; }
.split > * { flex: 0 0 50%; min-width: 0; }
.split__img { padding-top: 20px; }
.split__img img { display: block; }
.split__txt { padding: 0 var(--col-pad); }
.s--split { padding-bottom: 105px; }

/* ---------------------------------------------------------------- layout: columns (Impressum) */
.cols { display: flex; align-items: flex-start; }
.cols__col { flex: 0 0 50%; min-width: 0; padding-top: 20px; }
.cols__col:first-child { padding-right: 20px; }
.cols__col + .cols__col { padding-top: 60px; }
.s--columns { padding-bottom: 0; }

/* ---------------------------------------------------------------- layout: image (.FullWidth) */
.s--image { padding-bottom: 85px; }
.s--image img { display: block; width: 100%; }
.s--image-contained .wrap > div { max-width: var(--w); }
.s--image-contained img { width: 100%; }

/* ---------------------------------------------------------------- layout: gallery (unite gallery, tiles justified) */
.s--gallery { padding-bottom: 80px; }
.s--gallery-full .wrap { padding: 0; }
.s--gallery:has(+ .s--gallery) { padding-bottom: 0; }   /* galleries stack without gap (Galleria) */
.gal { display: flex; flex-wrap: wrap; gap: var(--gap); }
.gal__item { display: block; flex: 1 1 calc(var(--ar) * var(--rh)); aspect-ratio: var(--ar); overflow: hidden; }
.gal__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gal__item:hover img { transform: scale(1.03); }
.gal.is-justified { position: relative; display: block; }
.gal.is-justified .gal__item { position: absolute; aspect-ratio: auto; }
.gal__title { font-size: 29px; }

.lightbox { position: fixed; inset: 0; z-index: 20000000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.92); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 80px); width: auto; height: auto; }
.lightbox button { position: absolute; border: 0; background: none; color: #fff; font: 40px/1 var(--f-light); cursor: pointer; padding: 16px; }
.lightbox__close { top: 10px; right: 14px; }
.lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #ccc; font-size: 13px; }

/* ---------------------------------------------------------------- reservation overlay (aleno, site.js) */
.resmodal { position: fixed; inset: 0; z-index: 20000000; display: flex; align-items: center; justify-content: center;
  padding: 56px 24px 24px; background: rgba(0,0,0,.78); }
.resmodal[hidden] { display: none; }
.resmodal__box { position: relative; width: 100%; max-width: 520px; height: min(760px, 100%); background: #fff;
  box-shadow: 0 12px 48px rgba(0,0,0,.45); }
.resmodal__frame { display: block; width: 100%; height: 100%; border: 0; }
.resmodal__close { position: absolute; top: -48px; right: -6px; width: 44px; height: 44px; padding: 0; border: 0;
  background: none; color: #fff; font: 40px/44px var(--f-light); cursor: pointer; }
.resmodal__close:hover { color: var(--c-nav-hover); }

/* ---------------------------------------------------------------- layout: teasers (.frontlinks) */
.s--teasers { padding: 0 0 40px; }
.page--home .main { padding-bottom: 0; }
.teasers { display: flex; flex-wrap: wrap; margin: 0; padding: 85px 0 0; list-style: none; }
.teaser { flex: 0 0 50%; margin: 0 0 10px; padding: 20px 15px 0 0; background: none; transition: opacity .2s; }
.teaser:nth-child(even) { padding: 20px 0 0 15px; }
.teaser:hover { opacity: .8; }
.teaser__link { display: block; text-decoration: none !important; }
.teaser__link img { display: block; width: 100%; margin-bottom: -1px; }
.teaser__title { display: block; padding: 22px 0; background: #000; color: #fff; font-size: 30px; line-height: 36px; text-transform: uppercase; text-align: center; }

/* ---------------------------------------------------------------- layout: events (Arte / blogNew2) */
.s--events { padding-bottom: 0; }
.event { position: relative; border-bottom: 1px solid #000; margin: 0 0 50px; }
.event { scroll-margin-top: 120px; }   /* deep link #event-… lands below the fixed header */
.event__head { display: flex; align-items: flex-start; padding-bottom: 50px; }
.event__date { flex: 0 0 15%; margin: 0; color: #000; font-weight: bold; font-size: 130%; line-height: 1.25em; }
.event__day { display: block; margin: 0 0 7px; font-size: 70%; font-weight: normal; text-decoration: underline; }
.event__date time { display: block; }
.event__name { flex: 0 0 35%; color: var(--c-event-cat); }
.event__title { margin: 0; padding: 0; font-size: 29px; text-transform: uppercase; color: #000; }
.event__cat { margin: 0; }
.event__teaser { flex: 0 0 50%; padding: 0 calc(100px + var(--col-pad)) 0 var(--col-pad); }   /* 340 px text as .EventCol3 */
.event__teaser p { margin: 0; }
.event__toggle { position: absolute; top: 0; right: 0; width: 54px; height: 56px; padding: 0; border: 0; cursor: pointer;
  background: url(../img/trig.png) no-repeat left top; }
.event__toggle[aria-expanded="true"] { background-position: left -153px; }
.event__more { display: flex; align-items: flex-start; padding-bottom: 80px; }
.event__more[hidden] { display: none; }
.event__more > * { flex: 0 0 50%; min-width: 0; }
.event__img img { display: block; }
.event__body { padding: 0 0 0 var(--col-pad); }
.event__facts { margin-top: 20px; color: var(--c-event-fact); }
.event__facts .event__time { color: #000; }
.event__ticket { margin-top: 10px; }

/* ---------------------------------------------------------------- layout: jobs */
.s--jobs { padding-bottom: 0; }
.jobs .h-page { margin: 0 0 17px; }
.jobs__intro .txt { padding-top: 40px; }
.jobs__list { padding: 0 0 0 0; }
.jobs__list .h-page { margin-bottom: 44px; }
.joblist { margin: 0; padding: 0; list-style: none; }
.joblist li { padding: 0; margin: 0 0 10px; background: none; }
.btn--job { min-width: 270px; font-size: 12px; line-height: 14px; text-transform: none; }

/* ---------------------------------------------------------------- layout: contact */
.s--contact { padding-bottom: 105px; }
.map { position: relative; margin: 20px var(--col-pad) 0 0; aspect-ratio: 600 / 390; background: #f2f0ec;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; }
.map__note { max-width: 320px; font-size: 14px; }
.map__ext { font-size: 14px; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- job ad */
.page--job .s--text { padding-top: 20px; }
.txt--job ul { margin: 10px 0 40px; }
.txt--job p:has(+ ul) { margin-bottom: 0; }
.page--job .main { padding-bottom: 80px; }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; padding: 40px 0; background: #000; color: #fff; text-transform: uppercase; line-height: 24px; }
.footer a { color: #fff; }
.footer__inner { display: flex; padding: 0 77px; }
.footer__brand { flex: 0 0 365px; }
.footer__logo { display: block; width: 210px; margin: 0 0 81px; }
.footer__res { display: block; margin-bottom: 22px; }
.footer__social { display: flex; }
.footer__social img { display: block; }
.footer__menu { flex: 0 0 245px; margin: 0; padding: 0; list-style: none; }
.footer__menu li { padding: 0 0 12px; background: none; }

/* ---------------------------------------------------------------- per-section spacing override
   ACF number fields "Abstand oben" / "Abstand unten" (px, optional) on every layout. Empty = defaults above.
   Used where the old site had extra blank lines; desktop only, mobile keeps the defaults. */
@media (min-width: 942px) {
  .s.s[style*="--st:"] { padding-top: var(--st); }
  .s.s[style*="--sb:"] { padding-bottom: var(--sb); }
}
.page--home .s.s--text[style*="--st:"] { padding-top: var(--st); }

/* ================================================================ responsive (media-queries.css) */
@media (max-width: 1150px) {
  :root { --pad: 20px; --col-pad: 20px; }
  .h-col { font-size: 43px; }
  .nav__list a { padding: 19px 5px 17px; font-size: 14px; }
  .is-sticky .nav__list a { padding: 7px 10px 8px; }
  .footer__inner { padding: 0 20px; }
}

@media (max-width: 941px) {
  h1 { font-size: 35px; } h2 { font-size: 25px; } h3 { font-size: 21px; } h4 { font-size: 18px; }
  .h-page { font-size: 43px; }
  .h-center, .h-plain { font-size: 35px; }
  .page--home .s--text .h-page { margin-top: 50px; }
  .s--page-title .h-page, .jobs .h-page { margin-top: -20px; }
  .teaser__title { font-size: 33px; }
  .s--split, .s--image { padding-bottom: 40px; }
  .s--text { padding-bottom: 40px; }
  .event__date { flex-basis: 20%; font-size: 110%; }
  .event__name { flex-basis: 30%; }
}

/* mobile header + off-canvas navigation (< 920 px) */
@media (max-width: 920px) {
  .topbar { display: none; }
  .header, .is-sticky .header { position: fixed; top: 0; left: 0; right: 0; height: 50px; max-width: none; box-shadow: none; }
  .header__logo { display: block; position: absolute; left: 15px; top: 10px; width: 120px; }
  .header__logo img { display: block; width: 120px; }
  .nav-toggle { display: block; position: absolute; z-index: 2; top: 5px; right: 10px; width: 42px; height: 42px; padding: 0; border: 0; cursor: pointer;
    background: transparent url(../img/mobmen.png) no-repeat center top; }
  .nav-toggle[aria-expanded="true"] { background-position: center bottom; }
  /* full-screen panel: large links, two big buttons (reserve / call), contact lines (Wunsch Kunde 04.10.2026).
     Fits 360 x 560 (small phone with browser bars) without scrolling; the link spacing shrinks with the height. */
  .header__logo { z-index: 2; }
  .nav { position: fixed; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: stretch; width: auto; height: auto;
    padding: 58px 22px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background: #0d0d0d; text-transform: uppercase; visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .nav-open .nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  body.nav-open { overflow: hidden; }
  .nav__logo, .is-sticky .nav__logo { display: none; }
  .nav__list, .is-sticky .nav__list { display: block; margin: 0; }
  .nav__home { display: block; }
  .nav__list a, .is-sticky .nav__list a { margin: 0; padding: clamp(7px, 1.45vh, 12px) 0; border-top: 1px solid rgba(255,255,255,.14);
    color: #fff; font: 21px/24px var(--f-light); letter-spacing: 1.5px; }
  .nav__list--left li:first-child a { border-top: 0; }
  .nav__list a[aria-current="page"] { color: var(--c-nav-hover); }
  .nav__list a:hover { color: var(--c-nav-hover); text-decoration: none; }
  .nav__mobile { display: block; margin-top: auto; padding-top: 20px; }
  .nav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .nav__btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 0 10px; border-radius: 6px;
    font: 15px/1 var(--f-heavy); letter-spacing: 1.5px; text-decoration: none; }
  .nav__btn:hover { text-decoration: none; opacity: .85; }
  .nav__btn--res { background: var(--c-nav-hover); color: #000; }
  .nav__btn--tel { border: 2px solid #fff; color: #fff; }
  .nav__btn svg, .nav__meta svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
  .nav__btn svg { width: 21px; height: 21px; stroke-width: 1.8; }
  .nav__meta { margin: 16px 0 0; padding: 0; list-style: none; color: #c8c8c8; font: 12px/16px var(--f-heavy); letter-spacing: 1px; }
  .nav__meta li { display: flex; align-items: center; gap: 10px; padding: 4px 0; background: none; }
  .nav__meta a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
  .nav__meta a[href^="mailto:"] { text-transform: none; letter-spacing: .5px; }
  .nav__meta svg { width: 17px; height: 17px; stroke-width: 1.6; }
  .main { padding-top: 50px; }
  .event { scroll-margin-top: 70px; }
  .is-sticky .site { padding-top: 0; }
  .main > .s:first-child:not(.s--hero-slider):not(.s--banner) { padding-top: 30px; }
  .slider__slide img, .s--banner img { margin-left: min(0px, calc((100vw - 460px) / 2)); }
  .footer { padding: 25px 0 10px; }
  .footer__inner { flex-wrap: wrap; }
  .footer__brand { flex-basis: 100%; padding-bottom: 30px; }
  .footer__menu { flex-basis: 140px; }
}

@media (max-width: 630px) {
  :root { --pad: 15px; --col-pad: 0px; }
  .h-page, .h-col, .h-center, .h-plain { font-size: 35px; }
  .page--home .s--text .h-page { margin: 40px 0 16px; }
  .txt--lg, .hours__list { font-size: 17px; line-height: 26px; }
  .page--home .s--opening-hours { padding-top: 34px; }
  .page--home .s--opening-hours + .s--text { padding-top: 34px; }
  .page--home .teasers { padding-top: 25px; }
  .hours { gap: 22px; }
  .split, .cols { display: block; }
  /* measured on Prodotti / Recevimenti at 390 px: image first -> 43 px to the heading,
     text first -> 60 px to the image, section end -> 60 px (text last) / 55 px (image last) */
  .split__txt { padding: 0; }
  .split__img { padding: 20px 0 35px; }
  .split--img-right .split__txt { padding-bottom: 40px; }
  .s--split { padding-bottom: 60px; }
  .s--split:has(.split--img-right) { padding-bottom: 20px; }
  .s--image { padding-bottom: 30px; }
  .teasers { padding-top: 60px; }
  .teaser, .teaser:nth-child(even) { flex-basis: 100%; padding: 20px 0 0; margin-bottom: 30px; }
  .teaser__title { font-size: 27px; }
  .cols__col:first-child { padding-right: 0; }
  .event__head { display: block; padding-bottom: 30px; }
  .event__name { padding: 15px 0; }
  .event__teaser { padding: 0; }
  .event__toggle { position: relative; display: block; margin: 20px auto 0; }
  .event__more { display: block; }
  .event__body { padding: 20px 0 0; }
  .jobs__list { padding-top: 30px; }
  .map { margin-right: 0; }
  .resmodal { padding: 0; }
  .resmodal__box { max-width: none; height: 100%; }
  .resmodal__close { top: 6px; right: 6px; z-index: 1; color: #000; background: rgba(255,255,255,.92); border-radius: 50%; }
  .footer__inner { padding: 0 15px; }
}