/* The website. Mobile first after "Landingpage Mobile" (a 440px column), from 900px on after
   "Landingpage Desktop". Elements only one layout has carry .only-mobile / .only-desktop. */
html { scroll-behavior: smooth; }
body { background: #dfe3d6; }
section[id] { scroll-margin-top: 66px; }

.page { max-width: 440px; margin: 0 auto; min-height: 100vh; background: var(--paper); position: relative; box-shadow: 0 0 0 1px rgba(47, 42, 34, .06), 0 30px 80px rgba(47, 42, 34, .12); }
.wrap { padding-left: 20px; padding-right: 20px; }
.only-desktop { display: none !important; }

/* ---------- shared bits ---------- */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.eyebrow-gold { color: #e2c49e; }
.head { display: flex; flex-direction: column; gap: 10px; }
h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -.01em; }
.split-head { display: flex; flex-direction: column; gap: 10px; }
.split-head p, .head p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-3); }

.btn { min-height: 52px; padding: 0 20px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px var(--sans); text-decoration: none; cursor: pointer; transition: background .15s; }
.btn-solid { background: var(--green); color: var(--paper); border: 0; }
.btn-solid:hover { background: var(--green-dark); color: var(--paper); }
.btn-line { background: transparent; border: 1.5px solid var(--green); color: var(--green); }
.btn-line:hover { background: var(--green-pale); color: var(--green); }

.pill { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status { background: var(--green-pale); color: var(--green); }
.status-dark { background: rgba(247, 242, 232, .12); color: var(--paper); padding: 8px 12px; font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #c0704a; }
.dot.open { background: #5fa05f; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 160, 95, .55); } 70% { box-shadow: 0 0 0 7px rgba(95, 160, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 160, 95, 0); } }

/* ---------- header + menu ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(247, 242, 232, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; padding-left: 18px; padding-right: 18px; }
.wordmark { text-decoration: none; color: var(--ink); font-family: var(--script); font-weight: 700; font-size: 28px; line-height: 1; white-space: nowrap; }
.wordmark:hover { color: var(--ink); }
.topnav { display: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.burger, .menu-close { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(47, 42, 34, .14); background: var(--card); cursor: pointer; padding: 0; color: var(--ink); }
.burger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }
.burger span + span { width: 12px; margin-left: 6px; }
.menu-close { font-size: 22px; }
.menu { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; background: rgba(47, 42, 34, .35); }
.menu-panel { width: 100%; max-width: 440px; align-self: flex-start; background: var(--paper); padding: 18px 22px 30px; display: flex; flex-direction: column; gap: 4px; border-radius: 0 0 24px 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, .2); }
.menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.menu-panel > a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; border-bottom: 1px solid rgba(138, 90, 52, .18); font-family: var(--serif); font-size: 24px; color: var(--ink); text-decoration: none; }
.menu-panel > a span { font-family: var(--sans); font-size: 18px; color: var(--brown); }

/* ---------- hero ---------- */
.hero { padding-top: 30px; padding-bottom: 34px; display: flex; flex-direction: column; gap: 22px; }
.hero-text { display: flex; flex-direction: column; gap: 14px; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hero-actions .btn-solid { flex: 1 1 150px; }
.hero-actions .btn-line { flex: 1 1 120px; }
.hero-media { position: relative; margin-top: 6px; }
.hero-photo { height: 230px; border-radius: 22px; background: url(/img/laedchen.jpg) center 40% / cover; box-shadow: 0 14px 30px rgba(74, 52, 30, .18); }
.sticker { position: absolute; right: -6px; top: -30px; width: 104px; height: 104px; border-radius: 50%; background: var(--brown); color: #fff8ec; display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(9deg); font-family: var(--script); font-weight: 700; font-size: 21px; line-height: 1; padding: 8px; box-shadow: 0 8px 18px rgba(74, 52, 30, .3); border: 3px dashed rgba(255, 248, 236, .5); outline: 4px solid var(--brown); }
.hero-photo-small { position: absolute; left: -32px; bottom: -40px; width: 220px; height: 165px; border-radius: 18px; background: url(/img/regal.jpg) 30% 55% / cover; border: 6px solid var(--card); transform: rotate(-4deg); box-shadow: 0 16px 34px rgba(74, 52, 30, .22); }

/* ---------- welcome letter ---------- */
.welcome { padding-top: 6px; padding-bottom: 40px; }
.letter { background: var(--card); border: 1px solid #d6b468; outline: 1px solid #d6b468; outline-offset: -8px; border-radius: 6px; padding: 30px 24px 26px; }
.letter-body { display: flex; flex-direction: column; gap: 16px; }
.letter h2 { font-family: var(--script); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: 0; }
.letter-text { display: flex; flex-direction: column; gap: 16px; }
.letter-text p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.signature { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.signature img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--card); outline: 1.5px solid #b5654a; }
.signature div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.signature-name { font-family: var(--script); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--ink); }
.letter-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; display: block; border: 5px solid var(--card); outline: 2px solid #b5654a; }
.partner { margin-top: 14px; padding: 16px; border-radius: 18px; background: var(--sand); display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.partner img { width: 88px; height: 88px; object-fit: contain; display: block; }
.partner strong { color: var(--ink); }

/* ---------- how it works ---------- */
.concept { background: var(--green); color: var(--paper); border-radius: 30px 30px 0 0; }
.concept-in { padding-top: 44px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 26px; }
.concept .split-head p { color: var(--green-text); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border-radius: 18px; background: rgba(247, 242, 232, .04); border: 1px solid rgba(247, 242, 232, .1); cursor: pointer; transition: background .25s, border-color .25s; outline: none; }
.step:focus-visible { box-shadow: 0 0 0 3px rgba(217, 184, 143, .6); }
.step.active { background: rgba(247, 242, 232, .12); border-color: rgba(217, 184, 143, .55); }
.step-n { width: 56px; height: 56px; border-radius: 50%; background: rgba(247, 242, 232, .12); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 26px; transition: background .25s; }
.step.active .step-n { background: var(--gold); color: var(--green); }
.step-body { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.step-title { font-size: 19px; font-weight: 700; color: #fff8ec; }
.step-text { font-size: 15px; line-height: 1.5; color: var(--green-text); }
.step-tip { display: none; margin-top: 8px; font-size: 14px; line-height: 1.45; color: #f3e4cc; font-style: italic; }
.step.active .step-tip { display: block; }
.question { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(247, 242, 232, .08); font-size: 15px; line-height: 1.45; color: var(--green-text); }
.question a { color: #fff8ec; font-weight: 600; }
.question-mark { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--green); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }

/* ---------- shelf photo (mobile only) ---------- */
.shelf { background: var(--green); }
.shelf-in { background: var(--paper); border-radius: 30px 30px 0 0; padding: 26px 20px 44px; }
.shelf figure { margin: 0; position: relative; }
.shelf-photo { height: 260px; border-radius: 22px; background: url(/img/regal.jpg) 30% 55% / cover; box-shadow: 0 14px 30px rgba(74, 52, 30, .16); }
.shelf figcaption { position: absolute; left: 14px; bottom: -16px; padding: 8px 14px 6px; background: var(--card); border-radius: 10px; transform: rotate(-2.5deg); font-family: var(--script); font-weight: 700; font-size: 20px; box-shadow: 0 6px 16px rgba(74, 52, 30, .18); }

/* ---------- news ---------- */
.news-in { padding: 44px 0 40px; display: flex; flex-direction: column; gap: 18px; }
.news-head { padding: 0 20px; }
.posts { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 8px; scroll-padding: 0 20px; scrollbar-width: none; }
.posts::-webkit-scrollbar { display: none; }
.post { flex: none; width: 272px; scroll-snap-align: start; background: var(--card); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(74, 52, 30, .06); display: flex; flex-direction: column; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; line-height: 1.2; }
.post-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sand) url(/img/logo-emblem-klein.png) center / 86% no-repeat; flex: none; }
.post-head div { display: flex; flex-direction: column; gap: 1px; }
.post-head strong { font-size: 14px; }
.post-head span { font-size: 12px; color: var(--muted); }
.post-img { aspect-ratio: 4 / 5; background-color: var(--sand); background-repeat: no-repeat; }
.post-img.no-img { background: var(--sand) url(/img/logo-emblem.webp) center / 70% no-repeat; }
.post-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-body p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-body a { margin-top: auto; font-size: 14px; font-weight: 600; }
.fb-follow.only-mobile { margin: 0 20px; }
.fb-f { width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: var(--paper); display: flex; align-items: center; justify-content: center; font: 700 15px var(--sans); }

/* ---------- events ---------- */
.events-section { background: var(--sand); }
.events-in { padding-top: 40px; padding-bottom: 44px; display: flex; flex-direction: column; gap: 20px; }
.events { display: flex; flex-direction: column; gap: 12px; }
.event { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; background: var(--card); border-radius: 20px; border: 1px solid var(--line); }
.date-box { width: 76px; min-height: 88px; border-radius: 14px; background: var(--sand); color: var(--brown-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 4px; text-align: center; align-self: start; }
.event.next .date-box { background: var(--brown); color: #fff8ec; }
.date-box-wd { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.date-box-day { font-family: var(--serif); font-size: 32px; line-height: 1; white-space: nowrap; }
.date-box-day.multi { font-size: 22px; }
.date-box-mon { font-size: 13px; font-weight: 600; }
.event-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.badge { align-self: flex-start; padding: 3px 9px; border-radius: 99px; background: var(--green-pale); color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.event h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.event-meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; }
.event-time { font-weight: 600; }
.event-place { color: var(--ink-2); }
.event-what { font-size: 14px; line-height: 1.45; color: var(--muted); }
.event-actions { display: flex; gap: 16px; margin-top: 4px; font-size: 14px; font-weight: 600; }
.no-events { padding: 20px; border-radius: 20px; background: var(--card); font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---------- wishes ---------- */
.wishes { padding-top: 44px; padding-bottom: 44px; }
.wishes-card { background: var(--card); border-radius: 24px; border: 1px solid var(--line); padding: 26px 22px; display: flex; flex-direction: column; gap: 18px; }
.wishes-main { display: flex; flex-direction: column; gap: 10px; }
.wishes h2 { font-size: 28px; line-height: 1.12; }
.wishes-text p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.wishes-text p + p { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips span { padding: 7px 13px; border-radius: 99px; background: var(--sand); font-size: 14px; font-weight: 600; color: var(--brown-dark); }
.wishes-contact { border-top: 1px dashed rgba(138, 90, 52, .3); padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.wishes-q { font-size: 17px; font-weight: 700; }
.wishes-q-text p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.wishes-q-text p + p { margin-top: 8px; }
.contact-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.contact-buttons .btn { flex: 1 1 120px; min-height: 50px; font-size: 15px; }
.contact-buttons .btn-solid { flex-basis: 140px; }

/* ---------- visit ---------- */
.visit { background: var(--sand); }
.visit-in { padding-top: 40px; padding-bottom: 44px; display: flex; flex-direction: column; gap: 20px; }
/* On phones the two columns dissolve so the big hours card can sit between heading and map. */
.visit-left, .visit-right { display: contents; }
.visit-head { order: 1; }
.big-hours { order: 2; }
.map-card { order: 3; }
.hours-list { order: 4; }
.hours-exceptions { order: 5; }
.big-hours { background: var(--green); color: var(--paper); border-radius: 22px; padding: 22px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.big-hours > div { display: flex; flex-direction: column; gap: 4px; }
.big-hours-n { font-family: var(--serif); font-size: 52px; line-height: 1; letter-spacing: -.02em; }
.big-hours-sub { font-size: 15px; color: var(--green-text); }
.map-card { background: var(--card); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.map { position: relative; height: 190px; background: #e3e8dc url(/img/karte.jpg) center / cover; }
.map-credit { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: var(--muted); background: rgba(255, 253, 248, .85); padding: 2px 6px; border-radius: 5px; }
.map-credit a { color: inherit; }
.pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-100% + 8px)); display: flex; flex-direction: column; align-items: center; }
.pin-label { padding: 6px 10px; border-radius: 10px; background: var(--brown); color: #fff8ec; font-family: var(--script); font-weight: 700; font-size: 19px; line-height: 1; white-space: nowrap; }
.pin-tip { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--brown); }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 3px solid var(--card); margin-top: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.map-info { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.address { display: flex; flex-direction: column; gap: 4px; }
.address strong { font-size: 18px; }
.address span { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.hours-list, .hours-exceptions { background: var(--card); border-radius: 22px; padding: 8px 18px; border: 1px solid var(--line); }
.hours-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.hours-row:last-child { border-bottom: 0; }
.hours-row.today { font-weight: 700; color: var(--ink); }
.hours-row > span:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hours-row > span:last-child { text-align: right; }
.hours-row .closed { color: var(--red); }
.today-badge { padding: 2px 8px; border-radius: 99px; background: var(--sand); font-size: 12px; color: var(--brown); font-weight: 700; }
.hours-note { font-size: 13px; font-weight: 600; color: var(--brown); }
.hours-exceptions { padding-top: 14px; }
.hours-exceptions-title { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brown); }
.hours-exceptions .hours-row { font-size: 15px; }

/* ---------- footer ---------- */
.footer { background: var(--brown-dark); color: #efe3d0; }
.footer-in { padding-top: 38px; padding-bottom: 30px; display: flex; flex-direction: column; gap: 22px; }
.footer-top { display: flex; flex-direction: column; gap: 22px; }
.footer-logo { width: 200px; height: auto; display: block; }
.footer-contact { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
.footer-contact a { color: #efe3d0; }
.footer-bottom { display: flex; gap: 18px; padding-top: 16px; border-top: 1px solid rgba(239, 227, 208, .18); font-size: 13px; }
.footer-bottom a { color: #d9c9b2; }
.footer-bottom > span { margin-left: auto; color: #b8a68c; }

/* =================== desktop =================== */
@media (min-width: 900px) {
  body { background: var(--paper); }
  section[id] { scroll-margin-top: 76px; }
  .page { max-width: none; box-shadow: none; }
  .wrap { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  .only-mobile { display: none !important; }
  .only-desktop { display: revert !important; }
  .hero-photo-small.only-desktop, .letter-photo.only-desktop { display: block !important; }
  .fb-follow.only-desktop, .btn.only-desktop, .event-actions.only-desktop { display: flex !important; }

  .eyebrow { font-size: 13px; letter-spacing: .16em; }
  h2 { font-size: 48px; line-height: 1.08; letter-spacing: -.015em; }
  .split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
  .head { gap: 12px; }
  .split-head p, .head p { font-size: 18px; line-height: 1.6; max-width: 460px; }

  .topbar-in { flex-wrap: wrap; gap: 10px 24px; min-height: 68px; padding-top: 12px; padding-bottom: 12px; padding-left: 40px; padding-right: 40px; }
  .wordmark { font-size: 34px; }
  .topnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
  .topnav a { padding: 8px 0; font-weight: 500; font-size: 16px; color: var(--ink); text-decoration: none; white-space: nowrap; }
  .topnav a:hover { color: var(--brown); }
  .burger { display: none; }
  .pill.status:not(.status-dark) { gap: 8px; padding: 8px 14px; font-size: 14px; }

  .hero { padding-top: 72px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
  .hero-text { gap: 22px; }
  .hero h1 { font-size: 62px; line-height: 1.03; letter-spacing: -.025em; }
  .lead { font-size: 19px; line-height: 1.6; max-width: 520px; }
  .hero-actions { gap: 12px; margin-top: 6px; flex-wrap: nowrap; }
  .hero-actions .btn { flex: none; min-height: 56px; padding: 0 28px; font-size: 17px; }
  .hero-media { margin-top: 0; }
  .hero-photo { height: 460px; border-radius: 28px; box-shadow: 0 24px 50px rgba(74, 52, 30, .18); }
  .sticker { right: -18px; top: -36px; width: 140px; height: 140px; font-size: 27px; padding: 12px; outline-width: 5px; box-shadow: 0 10px 22px rgba(74, 52, 30, .3); }

  .welcome { padding-top: 0; padding-bottom: 96px; }
  .letter { padding: 56px 64px; outline-offset: -12px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: center; justify-items: center; }
  .letter-body { gap: 18px; max-width: 640px; justify-self: start; }
  .letter h2 { font-size: 44px; line-height: 1.05; }
  .letter-text { gap: 18px; }
  .letter-text p { font-size: 18px; line-height: 1.65; }
  .signature div { font-size: 15px; }
  .signature-name { font-size: 32px; }
  .partner { margin-top: 20px; padding: 20px 28px; border-radius: 22px; display: flex; gap: 24px; font-size: 17px; line-height: 1.5; }
  .partner img { width: 110px; height: 110px; flex: none; }
  .partner span { max-width: 640px; }

  .concept { border-radius: 40px 40px 0 0; }
  .concept-in { padding-top: 88px; padding-bottom: 80px; gap: 44px; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .step { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 24px; min-height: 280px; }
  .step-n { width: 68px; height: 68px; font-size: 32px; }
  .step-body { gap: 8px; padding-top: 0; flex: 1; }
  .step-title { font-size: 22px; }
  .step-text { font-size: 16px; line-height: 1.55; }
  .step-tip { margin-top: auto; padding-top: 10px; font-size: 15px; line-height: 1.5; }
  .question { align-self: flex-start; gap: 16px; padding: 18px 22px; border-radius: 18px; font-size: 16px; }

  .news { background: var(--paper); border-radius: 40px 40px 0 0; margin-top: -40px; position: relative; }
  .news-in { padding: 88px 40px; gap: 32px; }
  .news-head { padding: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
  .news-head .head { max-width: 620px; }
  .news-head .head p { max-width: none; }
  .fb-follow { padding: 0 24px; }
  .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 0; }
  .post { width: auto; }

  .events-in { padding-top: 88px; padding-bottom: 88px; gap: 36px; }
  .events { background: var(--card); border-radius: 24px; border: 1px solid var(--line); padding: 4px 28px; gap: 0; }
  .events:empty { display: none; }
  .event { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 20px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .event:last-child { border-bottom: 0; }
  .date-box { width: 92px; min-height: 104px; }
  .event h3 { font-size: 23px; }
  .event-meta { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; font-size: 15px; }
  .event-what { font-size: 15px; }
  .event-actions { margin: 0; gap: 8px; }
  .event-actions a { min-height: 44px; padding: 0 16px; border-radius: 12px; display: flex; align-items: center; text-decoration: none; white-space: nowrap; border: 1.5px solid var(--green); color: var(--green); }
  .event-actions a:hover { background: var(--green-pale); color: var(--green); }
  .event-actions a.route { background: var(--green); color: var(--paper); }
  .event-actions a.route:hover { background: var(--green-dark); color: var(--paper); }

  .wishes { padding-top: 88px; padding-bottom: 96px; }
  .wishes-card { padding: 48px 52px; border-radius: 28px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .wishes-main { gap: 16px; }
  .wishes h2 { font-size: 42px; line-height: 1.1; }
  .wishes-text p { font-size: 18px; line-height: 1.6; }
  .chips { margin-top: 4px; }
  .chips span { padding: 8px 15px; font-size: 15px; }
  .wishes-contact { border-top: 0; padding-top: 0; padding-left: 48px; border-left: 1px dashed rgba(138, 90, 52, .3); gap: 18px; }
  .wishes-q { font-size: 22px; }
  .wishes-q-text p { font-size: 16px; line-height: 1.6; }
  .wishes-contact .contact-buttons { margin-top: 4px; }
  .contact-buttons .btn { flex: none; min-height: 52px; padding: 0 26px; font-size: 16px; }

  .visit-in { padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .visit-left, .visit-right { display: flex; flex-direction: column; gap: 24px; }
  .visit-head h2 { font-size: 40px; }
  .visit-right { gap: 20px; padding-top: 88px; }
  .big-hours { border-radius: 24px; padding: 28px; gap: 16px; }
  .big-hours > div { gap: 6px; }
  .big-hours-n { font-size: 72px; }
  .big-hours-sub { font-size: 16px; }
  .status-dark { gap: 8px; padding: 9px 14px; font-size: 14px; }
  .map-card { border-radius: 24px; }
  .map { height: 320px; }
  .pin-label { padding: 7px 12px; font-size: 22px; }
  .map-info { padding: 24px 26px 26px; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
  .address { gap: 6px; }
  .address strong { font-size: 20px; }
  .address span { font-size: 17px; }
  .map-info .contact-buttons { margin-top: 0; }
  .map-info .contact-buttons .btn { min-height: 50px; padding: 0 22px; font-size: 15px; }
  .hours-list, .hours-exceptions { border-radius: 24px; padding: 10px 26px; }
  .hours-row { padding: 13px 0; font-size: 17px; }
  .hours-exceptions { padding-top: 18px; }

  .footer-in { padding-top: 64px; padding-bottom: 36px; gap: 40px; }
  .footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .footer-logo { width: 125px; }
  .footer-contact { font-size: 16px; }
  .footer-bottom { gap: 24px; padding-top: 20px; font-size: 14px; }
}

/* Controls and decoration are not selectable, so tapping or double-clicking them does not
   highlight text. Content people might copy (address, phone, texts) stays selectable. */
.btn, .topbar, .menu, .burger, .pill, .sticker, .step, .chips, .pin, .map-credit, .date-box, .badge, .today-badge, .question-mark, .fb-f, .footer-bottom {
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
img, .hero-photo, .hero-photo-small, .shelf-photo { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }