/* Site glue on top of the design system (zr.css). Replaces the inline styles the design boards used,
   so the CSP can forbid inline styles entirely. */
html { background: var(--bg); }
body { margin: 0; background: var(--bg); }
.zr { min-height: 100vh; font-family: var(--font-sans); color: var(--ink); background: var(--bg); }
.zr .site-ink { color: var(--ink); }
.site-footer-brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer-brand p { font-size: 15px; }
.zr .site-footer-home { align-self: flex-start; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer-hours { min-height: 44px; display: flex; align-items: center; color: var(--on-band); }
.site-cta-band { background: var(--bg); padding-top: 120px; padding-bottom: 24px; }
@media (max-width: 720px) { .site-cta-band { padding-top: 72px; } }

/* Mobile menu (zr-menu in zr.css) as a native popover in the top layer, dropping down from the top. */
.zr-menu[popover] { position: fixed; inset: 0 0 auto 0; margin: 0; border: 0; width: 100%; max-width: none;
  max-height: 100dvh; overflow: auto;
  transition: transform 0.22s ease, opacity 0.22s ease, overlay 0.22s allow-discrete, display 0.22s allow-discrete; }
.zr-menu[popover]:not(:popover-open) { display: none; transform: translateY(-12px); opacity: 0; }
@starting-style { .zr-menu[popover]:popover-open { transform: translateY(-12px); opacity: 0; } }
.zr-menu[popover]::backdrop { background: rgba(19, 34, 28, 0.45); }
@media (prefers-reduced-motion: reduce) { .zr-menu[popover] { transition: none; } }
@media (min-width: 901px) { .zr-menu[popover] { display: none; } }

/* Skip link */
.site-skip { position: absolute; left: 16px; top: -100px; z-index: 10; }
.site-skip:focus { top: 12px; }

/* Calculator island host (was the board's root) */
.calc-host { display: flex; justify-content: center; }
.zr .calc-equals { font-size: 40px; }
.zr .tax-lcd { min-height: 0; padding: 12px 20px; }
.zr .tax-lcd__num { font-size: 56px; }

/* Kontakt (from the contact board's own styles) */
.ct { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.f2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 960px) { .ct { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 560px) { .f2 { grid-template-columns: minmax(0, 1fr); } }

/* Booking form without JavaScript: radio buttons look like the design's chips. */
.booking { padding: 32px; }
@media (max-width: 600px) { .booking { padding: 22px 18px; } }
.booking__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.booking__set > legend { padding: 0; margin-bottom: 14px; width: 100%; }
.booking__meta { margin-left: auto; }
.booking__wide { grid-column: 1 / -1; }
.zr .booking__opt { font-weight: 400; }
.booking__chip { display: inline-flex; align-items: center; cursor: pointer; color: var(--ink); }
.booking__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.zr .booking__chip:has(input:checked) { background: var(--mint); color: var(--on-mint); box-shadow: 0 4px 0 var(--mint-edge); }
.booking__chip:has(input:focus-visible) { outline: 3px solid var(--mint-ink); outline-offset: 3px; }
.booking__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }