/* ============================================================
   LEGAL.CSS — Das 5. Element v2
   Impressum · Datenschutz
   ============================================================ */

/* ------------------------------------------------------------
   1. SECTION
   ------------------------------------------------------------ */
.legal-section {
  padding-block: var(--space-xl);
  min-height: calc(100vh - var(--header-total));
}

.legal-header {
  margin-bottom: var(--space-lg);
}

.legal-title {
  font-family:    var(--font-display);
  font-size:      clamp(56px, 8vw, 120px);
  line-height:    0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color:          var(--white);
  margin-bottom:  var(--space-md);
  word-break:     keep-all;
  hyphens:        none;
}

.divider {
  width:      48px;
  height:     2px;
  background: var(--pink);
  margin-top: var(--space-sm);
}

/* ------------------------------------------------------------
   2. BODY
   ------------------------------------------------------------ */
.legal-body {
  max-width: 720px;
  display:   flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ------------------------------------------------------------
   3. BLOCKS
   ------------------------------------------------------------ */
.legal-block {
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
}

.legal-block--highlight {
  border-color: var(--pink-border);
  background:   var(--pink-soft);
  padding:      var(--space-md);
}

.legal-heading {
  font-family:    var(--font-display);
  font-size:      clamp(22px, 3vw, 32px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--white);
  margin-bottom:  var(--space-sm);
  word-break:     keep-all;
  hyphens:        none;
}

.legal-subheading {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--pink);
  margin-bottom:  var(--space-xs);
}

.legal-body p {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  font-weight: 300;
  color:       var(--white-dim);
  line-height: 1.65;
  max-width:   none;
}

.legal-label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--white-dim);
}

.legal-body a {
  color:           var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:      color var(--dur-fast) var(--ease);
}

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

/* Spacing utilities used in legal pages */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }

/* ------------------------------------------------------------
   4. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .legal-section {
    padding-block: var(--space-lg);
  }

  .legal-block--highlight {
    padding: var(--space-sm);
  }
}