@layer page {
  .datenschutz-main {
    background-color: var(--color-background);
  }

  /* Hero */
  .datenschutz-hero {
    background-color: var(--color-sand);
    padding-block: var(--space-3xl) var(--space-2xl);
    text-align: center;
  }

  .datenschutz-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    max-width: 50rem;
    margin-inline: auto;
  }

  .datenschutz-hero__title {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    font-weight: var(--text-h1-weight);
    color: var(--color-text);
    margin-block-end: 0;
    max-width: 65ch;
  }

  .datenschutz-hero__lead {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text);
    max-width: 65ch;
    margin-block-end: 0;
  }

  .datenschutz-hero__support {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text);
    max-width: 65ch;
    margin-block-end: 0;
  }

  /* Sections */
  .datenschutz-section {
    padding-block: var(--section-padding-desktop);
  }

  .datenschutz-section .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .datenschutz-section__title {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    color: var(--color-text);
    margin-block-end: 0;
    max-width: 70ch;
  }

  /* Cards */
  .datenschutz-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    border: var(--border-subtle);
    box-shadow: var(--shadow-soft);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 50rem;
  }

  .datenschutz-card--responsible {
    max-width: 37.5rem;
    margin-inline: auto;
  }

  .datenschutz-card__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    font-weight: var(--text-h3-weight);
    color: var(--color-text);
    margin-block-end: 0;
  }

  .datenschutz-card__intro,
  .datenschutz-card__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text);
    margin-block-end: 0;
    max-width: 70ch;
  }

  .datenschutz-contact-list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .datenschutz-contact-list__item {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text);
    margin-block-end: 0;
  }

  .datenschutz-contact-list__item a {
    color: var(--color-secondary);
    transition: color var(--transition-fast);
  }

  .datenschutz-contact-list__item a:hover {
    color: var(--color-primary);
  }

  /* Content blocks */
  .datenschutz-content-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 50rem;
  }

  .datenschutz-content-block--centered {
    max-width: 37.5rem;
    margin-inline: auto;
    text-align: center;
  }

  .datenschutz-content-block__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    font-weight: var(--text-h3-weight);
    color: var(--color-text);
    margin-block-end: 0;
  }

  .datenschutz-content-block__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text);
    margin-block-end: 0;
    max-width: 70ch;
  }

  .datenschutz-list {
    list-style: disc;
    padding-inline-start: var(--space-lg);
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .datenschutz-list__item {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text);
    margin-block-end: 0;
  }

  /* Google Play section */
  .datenschutz-googleplay {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 50rem;
  }

  .datenschutz-googleplay__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-aqua);
  }

  .datenschutz-googleplay__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
  }

  .datenschutz-googleplay__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    font-weight: var(--text-h3-weight);
    color: var(--color-text);
    margin-block-end: 0;
  }

  .datenschutz-googleplay__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text);
    margin-block-end: 0;
    max-width: 70ch;
  }

  .datenschutz-googleplay__text a {
    color: var(--color-secondary);
    transition: color var(--transition-fast);
  }

  .datenschutz-googleplay__text a:hover {
    color: var(--color-primary);
  }

  /* Tablet and desktop adjustments */
  @media (min-width: 768px) {
    .datenschutz-googleplay {
      flex-direction: row;
      align-items: flex-start;
    }

    .datenschutz-googleplay__icon {
      margin-block-start: 0.25rem;
    }
  }

  /* Mobile adjustments */
  @media (max-width: 767px) {
    .datenschutz-hero {
      padding-block: var(--space-2xl) var(--space-xl);
    }

    .datenschutz-section {
      padding-block: var(--space-xl);
    }

    .datenschutz-section .container {
      gap: var(--space-lg);
    }

    .datenschutz-card,
    .datenschutz-content-block,
    .datenschutz-googleplay {
      max-width: 100%;
    }

    .datenschutz-hero__inner {
      gap: var(--space-md);
    }

    .datenschutz-hero__title {
      font-size: var(--text-display-size);
      line-height: var(--text-display-line-height);
    }
  }
}