/* The frame of the public website (website mockup 99): header, phone menu,
   footer, page head. Colours come from the app's tokens (static/css/input.css);
   the public site is light only. Page content keeps its own styles in
   public.css. */

.site {
  --site-ink2: var(--color-secondary-text);
  --site-float: 0 12px 32px -16px rgb(41 37 36 / .28);
  --site-serif: var(--font-heading);
  line-height: 1.6;
}
.site-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 640px) {
  .site-wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}
.site :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.site ::selection { background: var(--color-primary-subtle-bg); color: var(--color-primary-subtle-text); }

/* Skip link: out of sight until it gets keyboard focus. */
.site-skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--color-primary); color: var(--color-primary-foreground);
  border-radius: var(--radius-button); padding: 10px 14px; font-weight: 600; font-size: 14px; text-decoration: none;
}
.site-skip:focus { top: 12px; }

.site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 20px; border-radius: var(--radius-button); border: 1px solid var(--color-primary);
  background: var(--color-primary); color: var(--color-primary-foreground);
  font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.site-btn:hover { opacity: .9; }

/* ---------- Header ---------- */
.site-hdr {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: var(--color-surface-page); border-bottom: 1px solid var(--color-border);
}
.site-hdr-in { display: flex; align-items: center; gap: 22px; height: 68px; }
.site-brand { display: inline-flex; align-items: center; color: var(--color-text); text-decoration: none; flex: none; border-radius: 4px; }
.site-nav { display: flex; gap: 2px; margin-right: auto; min-width: 0; }
.site-nav a {
  color: var(--color-text-muted); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--radius-button); white-space: nowrap;
}
.site-nav a:hover { color: var(--color-text); background: var(--color-surface-subtle); }
.site-nav a[aria-current="page"] { color: var(--color-primary-subtle-text); background: var(--color-primary-subtle-bg); }
.site-tools { display: flex; align-items: center; gap: 14px; flex: none; }
.site-lang { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--color-text-muted); }
.site-lang form { margin: 0; }
.site-lang button { background: none; border: 0; font: inherit; color: var(--color-text-muted); padding: 6px; border-radius: 4px; cursor: pointer; }
.site-lang button[aria-pressed="true"] { color: var(--color-text); font-weight: 600; }
.site-lang button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.site-flag { width: 20px; height: 13px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgb(41 37 36 / .14); opacity: .6; transition: opacity .15s ease; }
.site-lang button:hover .site-flag, .site-lang button[aria-pressed="true"] .site-flag { opacity: 1; }
.site-lang span { color: var(--color-border-strong); }
.site-login { color: var(--color-text); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 6px; }
.site-login:hover { text-decoration: underline; }
.site-menu-btn {
  display: none; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;
  background: var(--color-surface-card); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-button); color: var(--color-text); font: 500 14px/1 inherit; cursor: pointer;
}
.site-mnav { display: none; }
/* Lines while the menu is closed, a cross while it is open. */
.site-menu-close, .site-menu-btn[aria-expanded="true"] .site-menu-open { display: none; }
.site-menu-btn[aria-expanded="true"] .site-menu-close { display: block; }

@media (max-width: 899px) {
  .site-nav, .site-login, .site-cta { display: none; }
  .site-hdr-in { height: 58px; gap: 12px; }
  .site-tools { margin-left: auto; }
  .site-menu-btn { display: inline-flex; }
  .site-mnav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-surface-card); border-bottom: 1px solid var(--color-border); box-shadow: var(--site-float);
    padding: 6px 0 18px; max-height: calc(100vh - 58px); overflow-y: auto;
  }
  .site-mnav[hidden] { display: none; }
  .site-mnav a { display: block; padding: 11px 0; color: var(--color-text); text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--color-border); }
  .site-mnav-cta { display: grid; gap: 10px; margin: 14px 0 0; }
  .site-mnav-cta a { border: 1px solid var(--color-border-strong); border-radius: var(--radius-button); text-align: center; padding: 11px; font-weight: 600; }
  .site-mnav-cta a.site-btn { color: var(--color-primary-foreground); border-color: var(--color-primary); }
}
/* Small phones (320-389px): the brand, DE | EN and the menu button must fit one
   row, so the flags go and the menu button shows its icon only. Its word stays
   for screen readers. */
@media (max-width: 389px) {
  .site-hdr-in { gap: 10px; }
  .site-tools { gap: 8px; }
  .site-flag { display: none; }
  .site-menu-btn { padding: 6px 10px; }
  .site-menu-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Page head (pages built from the mockup) ---------- */
.site-page-head { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(40px, 6vw, 72px); }
.site-h-page {
  font-family: var(--site-serif); font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(2rem, 4.4vw, 3rem); text-wrap: balance; margin: 0;
}
.site-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; color: var(--site-ink2); max-width: 62ch; margin: 16px 0 0; }

/* ---------- Imprint ---------- */
.site-imprint dl { display: grid; grid-template-columns: 220px minmax(0, 1fr); margin: 28px 0 0; max-width: 720px; }
.site-imprint dt, .site-imprint dd { padding: 12px 0; border-top: 1px solid var(--color-border); margin: 0; min-width: 0; }
.site-imprint dt { font-weight: 600; font-size: 15px; padding-right: 16px; }
.site-imprint a { color: var(--color-primary); text-underline-offset: 3px; }
@media (max-width: 560px) {
  .site-imprint dl { grid-template-columns: minmax(0, 1fr); }
  .site-imprint dd { border-top: 0; padding-top: 0; }
}

/* ---------- Legal texts (terms, privacy) ----------
   Read pages: the page title like every other page, serif section headings,
   16px body at about 68 characters a line, and a contents list for the
   long texts. Section headings stop below the sticky header when jumped to. */
.site-legal { max-width: 720px; }
/* Long German titles (Datenschutzerklärung) hyphenate rather than run off a small phone. */
.site-legal .site-h-page { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.site-legal-date { margin: 14px 0 0; font-size: 14px; color: var(--color-text-muted); }
.site-legal-summary {
  margin: 28px 0 0; padding: 18px 22px; max-width: 68ch;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.site-legal .site-legal-summary p { margin: 0; }
.site-legal-toc { margin: 32px 0 8px; padding: 16px 0 0; border-top: 1px solid var(--color-border); }
.site-legal-toc ol { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 32px; }
.site-legal .site-legal-toc li { break-inside: avoid; margin: 0; padding: 3px 0; font-size: 15px; line-height: 1.45; }
.site-legal .site-legal-toc a { color: var(--site-ink2); text-decoration: none; display: inline-block; padding: 3px 0; }
.site-legal .site-legal-toc a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.site-legal h2 {
  font-family: var(--site-serif); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; margin: 48px 0 10px;
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 69px + 20px);
}
.site-legal p, .site-legal li { font-size: 16px; line-height: 1.7; max-width: 68ch; }
.site-legal p { margin: 0 0 14px; }
.site-legal ul { list-style: disc; margin: 0 0 14px; padding-left: 22px; }
.site-legal li { margin: 0 0 6px; }
.site-legal a { color: var(--color-primary); text-underline-offset: 3px; }
.site-legal hr { border: 0; border-top: 1px solid var(--color-border); margin: 40px 0; }
.site-legal p.site-legal-fine { font-size: 14px; color: var(--color-text-muted); }

/* ---------- Footer ---------- */
.site-ftr {
  border-top: 1px solid var(--color-border); background: var(--color-surface-sidebar);
  padding: 48px 0 calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 14.5px;
}
.site-ftr-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.site-ftr-in > * { min-width: 0; }
.site-ftr h2 { font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 10px; }
.site-ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
/* Each link is at least 24px tall to tap (WCAG 2.5.8); the padding keeps the old rhythm. */
.site-ftr li a { display: inline-block; padding-block: 2px; }
.site-ftr a { color: var(--site-ink2); text-decoration: none; }
.site-ftr a:hover { text-decoration: underline; color: var(--color-text); }
.site-ftr-brand p { margin: 10px 0 0; color: var(--color-text-muted); max-width: 36ch; }
.site-ftr-brand .site-tagline { font-family: var(--site-serif); font-size: 17px; color: var(--color-text); margin-top: 12px; }
.site-ftr-fine {
  grid-column: 1 / -1; border-top: 1px solid var(--color-border); padding-top: 18px;
  color: var(--color-text-muted); font-size: 13.5px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
}
.site-ftr-fine p { margin: 0; }
@media (max-width: 760px) {
  .site-ftr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-ftr-brand { grid-column: 1 / -1; }
}