.datenschutz-page {
  background: var(--color-off-white);
}

.legal {
  padding-top: calc(var(--space-3xl) + 2rem);
  padding-bottom: var(--space-3xl);
  min-height: calc(100vh - 80px);
}

.legal .container {
  max-width: var(--container-narrow);
}

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

.legal__title {
  font-family: var(--font-headline);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-shark);
}

.legal__intro {
  margin-top: var(--space-sm);
  color: var(--color-shark-70);
  font-size: var(--text-lg);
  line-height: 1.65;
  max-width: 65ch;
}

.legal__updated {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-mid-gray);
}

.legal__toc {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.legal__toc h2 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-shark-50);
  margin-bottom: var(--space-sm);
}

.legal__toc ol {
  margin: 0;
  padding-left: 1.25rem;
  columns: 2;
  column-gap: var(--space-lg);
}

.legal__toc li {
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
  break-inside: avoid;
}

.legal__toc a {
  color: var(--color-shark-70);
  transition: color var(--transition-fast);
}

@media (hover: hover) { .legal__toc a:hover {
  color: var(--color-cobalt);
} }

.legal__block {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-shark-10);
  scroll-margin-top: 100px;
}

.legal__block h2 {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-shark);
  margin-bottom: var(--space-sm);
}

.legal__block h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-shark);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.legal__block p,
.legal__block address,
.legal__block li {
  font-style: normal;
  color: var(--color-shark-70);
  font-size: var(--text-base);
  line-height: 1.7;
}

.legal__block p + p {
  margin-top: var(--space-sm);
}

.legal__block ul {
  margin: var(--space-sm) 0;
  padding-left: 1.25rem;
}

.legal__block li {
  margin-bottom: 0.4rem;
}

.legal__block li::marker {
  color: var(--color-cobalt);
}

.legal__company {
  font-weight: 700;
  color: var(--color-shark);
}

.legal__block a {
  color: var(--color-cobalt);
  transition: color var(--transition-fast);
  text-decoration: none;
}

@media (hover: hover) { .legal__block a:hover {
  color: var(--color-cobalt-70);
  text-decoration: underline;
} }

@media (max-width: 768px) {
  .legal {
    padding-top: calc(var(--space-2xl) + 1rem);
    padding-bottom: var(--space-2xl);
  }

  .legal__toc ol {
    columns: 1;
  }
}


.datenschutz-page .header,
.datenschutz-page .header.header--init {
  background: rgba(248, 246, 243, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 30px rgba(37, 44, 55, 0.08) !important;
  padding-block: 0 !important;
}

.datenschutz-page .header__inner,
.datenschutz-page .header.header--init .header__inner {
  height: 68px !important;
}

.datenschutz-page .header__logo-img,
.datenschutz-page .header.header--init .header__logo-img {
  height: 56px !important;
}

.datenschutz-page .nav__link,
.datenschutz-page .nav__dropdown-trigger,
.datenschutz-page .header.header--init .nav__link,
.datenschutz-page .header.header--init .nav__dropdown-trigger {
  color: var(--color-shark-70) !important;
}

@media (hover: hover) { .datenschutz-page .nav__link:hover, .datenschutz-page .nav__dropdown-trigger:hover {
  color: var(--color-cobalt) !important;
  background: var(--color-cobalt-10) !important;
} }

.datenschutz-page .header__cta .btn--outline,
.datenschutz-page .header.header--init .header__cta .btn--outline {
  color: var(--color-shark) !important;
  border-color: var(--color-shark-20) !important;
}

@media (hover: hover) { .datenschutz-page .header__cta .btn--outline:hover, .datenschutz-page .header.header--init .header__cta .btn--outline:hover {
  background: var(--color-shark) !important;
  color: var(--color-white) !important;
  border-color: var(--color-shark) !important;
} }

.datenschutz-page .header__toggle span,
.datenschutz-page .header.header--init .header__toggle span {
  background: var(--color-shark) !important;
}