/* The hero is one ink box that fills the screen, carries a photograph, must never scroll and speaks in display type.  [docs/design-system.md] */

/* --------------------------------------------------------------------------
   1. PAGE FRAME
   -------------------------------------------------------------------------- */

/* A HEADER WITH NOTHING TO FOLD, and it was hiding a real bug. — docs/design-system.md */
.site-header--no-nav .lang-switch {
  display: flex;
}

.legal {
  padding-block: var(--space-8) var(--space-9);
}

.legal__doc {
  max-width: var(--container-text);
}

/* The "Rechtliches" / "Legal" eyebrow was removed on 2026-08-11 and… — docs/design-system.md */
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  /* Finger-sized without a min-height, so it stays correct if the label wraps.
     11px of label plus 12px of padding a side clears the 24px WCAG 2.5.8
     minimum comfortably. */
  padding-block: var(--space-3);
  transition: color var(--duration-base) var(--ease);
}

/* Rule 2 of this surface underlines links in running prose. This one is not
   prose — it is a control standing alone above the title. */
.legal a.legal__back {
  text-decoration: none;
}

.legal__back:hover {
  color: var(--color-text);
}

.legal__back-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease);
}

.legal__back:hover .legal__back-arrow {
  transform: translateX(-0.2em);
}

.legal__title {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h2);
}

/* The line of statutes under the title. — docs/design-system.md */
.legal__meta {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-text-muted);
}

.legal__lead {
  margin-top: var(--space-5);
}

/* 2. SECTIONS — docs/design-system.md */

.legal__section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}

/* No rule directly under the data card. — docs/design-system.md */
.legal__card + .legal__section {
  padding-top: 0;
  border-top: 0;
}

/* The data card's title shares this rule rather than having one of its… — docs/design-system.md */
.legal__section > h2,
.legal__card > h2 {
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: var(--tracking-h3);
}

.legal__section > * + * {
  margin-top: var(--space-4);
}

.legal p,
.legal li {
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* The measure again, one level down. A paragraph inside a 46rem column is
   already close to right; this stops the odd wide one from running past it. */
.legal p {
  max-width: 60ch;
}

/* ...but NOT the statute line, and the reason is a trap worth remembering: — docs/design-system.md */
.legal p.legal__meta {
  max-width: none;
}

/* core.css strips list markers globally, which is right for navigation and
   wrong for a document. Restored here, and only here. */
.legal ul {
  list-style: disc;
  padding-left: var(--space-5);
}

.legal ul li + li {
  margin-top: var(--space-2);
}

/* In running prose the underline IS the affordance — see rule 2 at the top. */
.legal a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--duration-base) var(--ease);
}

.legal a:hover {
  color: var(--color-text);
}

/* Do not copy this rule to prose links or to any text that is not a hover state.  [docs/design-system.md] */
.legal a.legal__link {
  text-decoration: none;
}

.legal a.legal__link:hover {
  color: var(--color-amber-deep);
}

/* 3. THE DATA CARD — one box, "Unternehmensdaten" — docs/design-system.md */

.legal__card {
  margin-top: var(--space-6);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--color-linen);
}

.legal__card > * + * {
  margin-top: var(--space-5);
}

/* Lavender or amber for the label was considered and is ruled out by design-system.md — both are surfaces, never light-surface text, at 1.64:1 and 1.44:1 on linen.  [docs/design-system.md] */
.legal__card p {
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* The subheading of a group — "Gewerbeberechtigte Person", "Kontakt". — docs/design-system.md */
.legal__card-sub {
  display: flex;
  margin-bottom: var(--space-1);
  line-height: var(--leading-normal);
}

/* If the booking link ships first, delete this block with the last placeholder it never got used for.  [docs/design-system.md] */

.legal-todo {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 1px dashed var(--color-amber-deep);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-text);
  background-color: var(--color-linen);
}

/* --------------------------------------------------------------------------
   5. FOOT OF THE DOCUMENT
   -------------------------------------------------------------------------- */

.legal__foot {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-text-muted);
}

.legal__foot a {
  text-decoration: none;
}

.legal__foot a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Narrow, the copyright is simply the last item in the wrapped stack. — docs/design-system.md */
@media (min-width: 34rem) {
  .legal__foot-end {
    margin-left: auto;
  }
}