/* Mobile: horizontale Trennlinien zwischen den drei Bereichen */
.home-feature:not(:last-child) {
  border-block-end: 0.0625rem solid rgb(255 255 255 / 30%);
  border-inline-end: 0;
}


/* Tablets und größere Ansichten */
@media (min-width: 48rem) {

  .container {
    width: min(
      calc(100% - var(--space-6) - var(--space-6)),
      var(--content-width)
    );
 }


  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }


  .site-title {
    width: 10rem;
  }


  .site-navigation {
    width: auto;
  }


  .navigation-list {
    justify-content: flex-end;
  }


  .hero,
  .page-intro {
    padding-block: var(--space-8);
  }


  .hero-logo {
    width: 21rem;
  }


  .content-section,
  .legal-section,
  .profile-section {
    padding-block: var(--space-8);
  }


  .content-panel,
  .legal-content {
    padding: var(--space-7);
  }


  .footer-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }


  .footer-navigation-list {
    justify-content: flex-end;
  }


  .profile-content p {
    margin-block-end: var(--space-6);
    font-size: 1.0625rem;
  }


  .home-hero-inner {
    padding-block: var(--space-8);
  }


  .home-hero {
    background-position: center;
  }


  .home-features {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
  }


  /* Auf größeren Displays werden die Trennlinien vertikal */
  .home-feature:not(:last-child) {
    border-block-end: 0;
    border-inline-end: 0.0625rem solid rgb(255 255 255 / 30%);
  }
}



/* Große Desktop-Ansichten */
@media (min-width: 64rem) {
  .hero-logo {
    width: 26rem;
  }
}


/* Bewegungen reduzieren, wenn dies im Betriebssystem gewünscht ist. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Zusätzliche Orientierung bei einem vom Betriebssystem gewünschten Kontrast. */
@media (prefers-contrast: more) {
  a:focus-visible {
    outline-width: 0.25rem;
  }


  .home-hero::before {
    background: rgb(1 21 47 / 88%);
  }
}


/* Erhält die Tastaturmarkierung auch in Windows-Hochkontrastmodi. */
@media (forced-colors: active) {
  a:focus-visible {
    outline: 0.1875rem solid Highlight;
    outline-offset: 0.25rem;
  }
}


/* Druckansicht für die rechtlichen Seiten */
@media print {
  body {
    color: #000000;
    background: #ffffff;
  }


  .skip-link,
  .site-header,
  .site-footer {
    display: none;
  }


  .page-intro,
  .legal-section {
    padding-block: 1.5rem;
    border: 0;
    background: none;
  }


  .legal-content {
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}