/*!
 * Frame of the public website, design language 2.1, rule 6: the document ground,
 * the skip link, the pinned header with wordmark and the one link
 * "Erstgespräch", the content area and the footer. Loaded by _Layout.cshtml on
 * public pages only, after /components/tokens/website.css; the application keeps
 * site.css. Drawn in docs/Design/mockups/website/rahmen-und-kontakt.html.
 */

.website *,
.website *::before,
.website *::after {
  box-sizing: border-box;
}

html:has(> body.website) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The header is pinned: a field that scrolls into view by keyboard must not
     end up underneath it. */
  scroll-padding-top: calc(var(--website-frame-header-height) + 24px);
}

.website {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--website-color-room);
  color: var(--website-color-ink);
  font-family: var(--website-font-family);
  font-size: var(--website-font-size-text);
  font-weight: var(--website-font-weight-regular);
  line-height: var(--website-line-height-text);
  -webkit-font-smoothing: antialiased;
}

.website a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Focus: two pixels in the current text colour, four pixels away, the same in
   both modes. Elements whose text sits on the button ground (skip link, button)
   take the colour of that ground instead, see rule 6. */
.website :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Skip link: out of sight until it has the focus, then in the colours of the
   button. */
.website-skip-link {
  position: absolute;
  top: -80px;
  left: 12px;
  z-index: 40;
  padding: 10px 14px;
  border-radius: var(--website-radius);
  background: var(--website-color-button);
  color: var(--website-color-button-ink);
  font-weight: var(--website-font-weight-bold);
}

.website .website-skip-link {
  color: var(--website-color-button-ink);
  text-decoration: none;
}

.website-skip-link:focus {
  top: 12px;
}

.website .website-skip-link:focus-visible {
  outline-color: var(--website-color-button);
}

/* Header: pinned, ground room, no hairline, no shadow. */
.website-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--website-frame-header-height);
  padding: 0 var(--website-frame-edge);
  background: var(--website-color-room);
}

.website .website-header__brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--website-font-size-brand);
  font-weight: var(--website-font-weight-bold);
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}

.website-header__brand-addition {
  color: var(--website-color-ink-2);
  font-size: 11px;
  letter-spacing: var(--website-letter-spacing-label);
  text-transform: uppercase;
}

.website-header__nav {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
}

/* The one link: ink, underlined by a border of 1.5px two pixels below. */
.website .website-header__call {
  padding-bottom: 2px;
  border-bottom: 1.5px solid currentColor;
  font-size: var(--website-font-size-small);
  text-decoration: none;
}

@media (max-width: 759px) {
  .website-header__brand-addition {
    display: none;
  }
}

/* Content: 56px below the header, on the edges of the header instead of a
   centred column (rule 6, decided 17.09.2026), so wordmark, title and footer
   line up on one edge like the text column of the start page. */
.website-main {
  flex: 1 0 auto;
  padding: calc(var(--website-frame-header-height) + 56px) var(--website-frame-edge) 112px;
}

.website-main:focus {
  outline: none;
}

@media (max-width: 759px) {
  .website-main {
    padding-top: calc(var(--website-frame-header-height) + 40px);
    padding-bottom: 72px;
  }
}

/* A block that should not run across the whole width, for example the
   confirmation of the contact form or the page 404. */
.website-measure {
  max-width: 720px;
}

/* Footer: hairline, the brand line on the left, the two legal links on the
   right, both in ink 2; two lines when the space runs out. */
.website-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 var(--website-frame-edge);
  padding: 22px 0 40px;
  border-top: 1px solid var(--website-color-line);
  color: var(--website-color-ink-2);
  font-size: 14px;
}

.website-footer__links {
  display: flex;
  gap: 20px;
}

.website .website-footer__link {
  text-decoration: none;
}

.website .website-footer__link:hover,
.website .website-footer__link[aria-current="page"] {
  color: var(--website-color-ink);
}