/* ==========================================================================
   LEGAL PAGES (Impressum / Datenschutz) – sauber, passend zur Site
   ========================================================================== */

.legal-page{
  background: var(--bg-page, #f6f3ec);
}

.legal{
  padding: 84px 0 96px;
}

.legal-inner{
  max-width: 1040px;
}

.legal-hero{
  text-align: center;
  margin: 0 auto 28px;
  max-width: 880px;
}

.legal-hero h1{
  margin: 0 0 10px;
  font-size: clamp(34px, 4.6vw, 52px);
  letter-spacing: -0.02em;
  color: #203547;
}

.legal-lead{
  margin: 0 auto;
  max-width: 70ch;
  color: rgba(32,53,71,0.78);
  font-weight: 600;
}

.legal-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  margin: 16px 0;
}

.legal-card h2{
  margin: 0 0 12px;
  color: #203547;
  font-size: 20px;
}

.legal-card h3{
  margin: 18px 0 8px;
  color: #203547;
  font-size: 16px;
}

.legal-card p{
  margin: 0 0 10px;
  line-height: 1.65;
  color: rgba(32,53,71,0.82);
}

.legal-card a{
  color: #203547;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(242,183,5,0.55);
}

.legal-card a:hover{
  border-bottom-color: rgba(242,183,5,0.95);
}

.legal-note{
  font-size: 13px;
  opacity: 0.85;
  margin-top: 10px;
}

.legal-foot{
  text-align: center;
  margin-top: 18px;
  color: rgba(32,53,71,0.55);
  font-size: 13px;
}

/* Mobile */
@media (max-width: 820px){
  .legal{ padding: 72px 0 84px; }
  .legal-card{ padding: 18px 18px; }
}