/* ═══════════════════════════════════════════
   PROFIX – LEGAL.CSS
   Rechtsseiten (Impressum/Datenschutz) im
   neuen Design: feste Kopfleiste, Kapitel-Look.
   Lädt nach pages.css und site.css.
═══════════════════════════════════════════ */

/* Kopfleiste immer sichtbar (auch Desktop) */
.mtop.legal-top { display: flex; }
body { padding-top: 58px; }
.page-progress { left: 0; top: 58px; }

.back-link {
  margin-left: 1.1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  transition: color .2s, transform .3s var(--ease-out);
}
.back-link:hover { color: var(--red); transform: translateX(-3px); }

/* Hero im Kapitel-Look */
.page-hero { padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(1.8rem, 3.5vw, 2.6rem); }
.page-label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--red);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  background: none;
  border: 0;
  padding: 0;
}
.page-label::before { content: ''; width: 26px; height: 2px; background: var(--red); }
.page-hero h1 {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.page-hero .page-sub { color: var(--gray); margin-top: .8rem; }
.page-hero .page-hero-watermark {
  font-family: var(--font-condensed);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
}

/* Inhalt & Kapitel-Nummern angleichen */
.legal { padding-left: var(--pad); padding-right: var(--pad); }
.legal h2 { border-bottom: 2px solid var(--border); }
.legal h2 .num {
  background: none;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(224, 26, 26, .75);
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: 1.6em;
  line-height: .8;
  padding: 0;
  margin-right: .6rem;
  border: 0;
  border-radius: 0;
  min-width: 0;
}

@media (max-width: 720px) {
  .back-link { display: none; }
}