* { box-sizing: border-box; }
    body {
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      margin: 0;
      background: #355D77;
      isolation: isolate;
      color: #fff;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      text-align: center;
    }
    img { max-width: 100%; height: auto; }
    main, footer { position: relative; z-index: 1; }
    main { padding: 0 24px; }
    .app-store-download { margin: 32px 0 48px; display: flex; justify-content: center; }
    .app-store-download a { display: inline-block; }
    .app-store-download img { display: block; width: 180px; height: auto; }
    .product-description { max-width: 48rem; margin: 0 auto; padding-bottom: 64px; text-align: left; line-height: 1.65; }
    .product-intro { font-size: 1.2rem; margin: 0 0 40px; }
    .product-feature + .product-feature { margin-top: 32px; }
    .product-feature h2 { font-size: 1rem; line-height: 1.4; margin: 0 0 8px; }
    .product-feature p { margin: 0; overflow-wrap: anywhere; }
    footer { margin-top: auto; width: 100%; padding: 32px 24px; font-size: 14px; line-height: 1.4; }
    footer p { margin: 0 0 14px; }
    footer a { color: inherit; }

    a { color: inherit; text-underline-offset: .2em; }
    .site-nav {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      gap: clamp(12px, 4vw, 48px);
      padding: 12px 24px;
      background: #355D77;
      border-bottom: 1px solid rgb(255 255 255 / 24%);
    }
    .site-nav a { font-weight: 600; text-decoration: none; padding: 4px 0; }
    .site-nav a:hover { text-decoration: underline; }
    a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
    section { scroll-margin-top: 88px; }
    .home { padding-top: 40px; min-height: calc(100svh - 74px); }
    .legal { max-width: 48rem; margin: 0 auto; padding: 48px 0; text-align: left; line-height: 1.55; overflow-wrap: break-word; }
    .legal + .legal { border-top: 1px solid rgb(255 255 255 / 24%); }
    .legal h2 { font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.15; margin: 0 0 .7rem; }
    .legal h3 { font-size: 1.1rem; margin: 2.2rem 0 .6rem; line-height: 1.3; }
    .legal p, .legal li { margin: .5rem 0 1rem; }
    .legal .meta { margin-bottom: 2rem; }

    /* Show only the selected section; Home is the default. */
    main > section { display: none; }
    main > #home { display: block; }
    main:has(> #impressum:target, > #terms:target, > #privacy:target, > #faq:target) > #home { display: none; }
    main > #impressum:target, main > #terms:target, main > #privacy:target, main > #faq:target { display: block; }
    .legal + .legal { border-top: 0; }
    body:not(:has(#impressum:target, #terms:target, #privacy:target, #faq:target)) .site-nav a[href="#home"],
    body:has(#impressum:target) .site-nav a[href="#impressum"],
    body:has(#terms:target) .site-nav a[href="#terms"],
    body:has(#privacy:target) .site-nav a[href="#privacy"],
    body:has(#faq:target) .site-nav a[href="#faq"] { text-decoration: underline; }

.site-nav a { text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* Language choices stay at the right-hand end of the navigation. */
.site-nav { gap: 16px; align-items: center; }
.site-nav .nav-home { flex: 0 0 auto; padding: 0; }
.nav-home img { display: block; width: 40px; height: 40px; }
.nav-links { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: clamp(10px, 3vw, 40px); margin-left: auto; }
.language-switch { display: inline-flex; gap: 12px; }
.site-nav .language-option { font-size: .875rem; text-decoration: none; }
.site-nav .language-option[aria-current="true"] { text-decoration: underline; }
@media (max-width: 480px) {
  .site-nav { font-size: .875rem; padding-inline: 10px; gap: 12px; }
  .nav-links { gap: 10px; }
  .language-switch { gap: 8px; }
}

.language-switch .language-option { display: none; }
body:not(:has(#impressum:target, #terms:target, #privacy:target, #faq:target)) .language-switch .lang-home,
body:has(#impressum:target) .language-switch .lang-impressum,
body:has(#terms:target) .language-switch .lang-terms,
body:has(#privacy:target) .language-switch .lang-privacy,
body:has(#faq:target) .language-switch .lang-faq { display: inline; }

/* Swipeable screenshot gallery above the product description. */
.screenshot-gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 24px;
  margin-inline: -24px;
}
.screenshot-gallery::-webkit-scrollbar { display: none; }
.screenshot-gallery img {
  flex: 0 0 auto;
  height: clamp(320px, 55svh, 560px);
  width: auto;
  max-width: none;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 16px;
  scroll-snap-align: center;
}
.screenshot-gallery:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (min-width: 1800px) {
  .screenshot-gallery { justify-content: safe center; }
}

/* Native FAQ disclosure controls work without scripts. */
.faq details { border-bottom: 1px solid rgb(255 255 255 / 24%); }
.faq summary { padding: 18px 24px 18px 0; cursor: pointer; font-weight: 600; line-height: 1.5; }
.faq summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.faq-answer { padding: 0 0 12px; }
.faq details[open] summary { color: #fff; }