@layer page {
  .kontakt-page {
    --kontakt-section-gap: var(--space-3xl);
    --kontakt-section-gap-tablet: var(--space-4xl);
    --kontakt-section-gap-desktop: var(--space-5xl);
    --kontakt-border: 1px solid var(--color-line-blue);
    --kontakt-copy-max: 68ch;
    --kontakt-copy-max-narrow: 60ch;
  }

  .kontakt-page .section {
    padding-block: var(--kontakt-section-gap);
  }

  @media (min-width: 768px) {
    .kontakt-page .section {
      padding-block: var(--kontakt-section-gap-tablet);
    }
  }

  @media (min-width: 1024px) {
    .kontakt-page .section {
      padding-block: var(--kontakt-section-gap-desktop);
    }
  }

  .kontakt-page .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
  }

  @media (min-width: 1024px) {
    .kontakt-page .container {
      padding-inline: var(--container-padding-desktop);
    }
  }

  /* Kontakt Hero */
  .kontakt-hero {
    background-color: var(--color-warm-white);
  }

  .kontakt-hero__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 100%;
    padding-block-end: var(--space-2xl);
    border-block-end: var(--kontakt-border);
  }

  .kontakt-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    font-weight: var(--text-h1-weight);
    letter-spacing: var(--text-h1-letter-spacing);
    color: var(--color-ultramarine);
    margin-block-end: 0;
  }

  .kontakt-hero__lead {
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line-height);
    font-weight: var(--text-body-lg-weight);
    letter-spacing: var(--text-body-lg-letter-spacing);
    color: var(--color-graphite);
    max-width: var(--kontakt-copy-max);
    margin-block-end: 0;
  }

  .kontakt-hero__support {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    font-weight: var(--text-body-weight);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite-soft);
    max-width: var(--kontakt-copy-max);
    margin-block-end: 0;
  }

  .kontakt-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    margin-block-start: var(--space-sm);
  }

  .kontakt-hero__meta-link {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    font-weight: 500;
    color: var(--color-ultramarine);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .kontakt-hero__meta-link:hover {
    color: var(--color-ultramarine-hover);
    text-decoration-thickness: 2px;
  }

  .kontakt-hero__meta-separator {
    width: 1px;
    height: 16px;
    background-color: var(--color-line-blue);
  }

  @media (min-width: 768px) {
    .kontakt-hero__content {
      max-width: calc(8 / 12 * 100%);
    }
  }

  @media (min-width: 1024px) {
    .kontakt-hero__content {
      max-width: calc(8 / 12 * 100%);
    }
  }

  /* Direkter Kontakt */
  .kontakt-direct {
    background-color: var(--color-warm-white);
  }

  .kontakt-direct__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-letter-spacing);
    color: var(--color-graphite);
    margin-block-end: var(--space-xl);
  }

  .kontakt-direct__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .kontakt-direct__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    padding-block-end: var(--space-xl);
    border-block-end: var(--kontakt-border);
  }

  .kontakt-direct__item:last-child {
    border-block-end: none;
    padding-block-end: 0;
  }

  .kontakt-direct__label {
    margin-block-end: 0;
  }

  .kontakt-direct__value {
    font-family: var(--font-heading);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    font-weight: var(--text-h3-weight);
    letter-spacing: var(--text-h3-letter-spacing);
    color: var(--color-graphite);
    max-width: var(--kontakt-copy-max-narrow);
    margin-block-end: 0;
  }

  .kontakt-direct__value--large {
    font-size: 20px;
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-letter-spacing);
    color: var(--color-ultramarine);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .kontakt-direct__value--large:hover {
    color: var(--color-ultramarine-hover);
    text-decoration-thickness: 2px;
  }

  .kontakt-direct__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    font-weight: var(--text-body-weight);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite-soft);
    max-width: var(--kontakt-copy-max-narrow);
    margin-block-end: 0;
  }

  @media (min-width: 768px) {
    .kontakt-direct__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-2xl);
    }

    .kontakt-direct__item {
      padding-block-end: 0;
      border-block-end: none;
      border-inline-end: var(--kontakt-border);
      padding-inline-end: var(--space-xl);
    }

    .kontakt-direct__item:last-child {
      border-inline-end: none;
      padding-inline-end: 0;
    }
  }

  /* Erreichbarkeit */
  .kontakt-hours {
    background-color: var(--color-warm-white);
  }

  .kontakt-hours__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-letter-spacing);
    color: var(--color-graphite);
    margin-block-end: var(--space-xl);
  }

  .kontakt-hours__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .kontakt-hours__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    padding-block-end: var(--space-xl);
    border-block-end: var(--kontakt-border);
  }

  .kontakt-hours__item:last-child {
    border-block-end: none;
    padding-block-end: 0;
  }

  .kontakt-hours__label {
    margin-block-end: 0;
  }

  .kontakt-hours__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    font-weight: var(--text-body-weight);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite);
    max-width: var(--kontakt-copy-max-narrow);
    margin-block-end: 0;
  }

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

  .kontakt-hours__list li {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite-soft);
    max-width: var(--kontakt-copy-max-narrow);
  }

  @media (min-width: 768px) {
    .kontakt-hours__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2xl);
    }

    .kontakt-hours__item {
      padding-block-end: 0;
      border-block-end: none;
      border-inline-end: var(--kontakt-border);
      padding-inline-end: var(--space-xl);
    }

    .kontakt-hours__item:last-child {
      border-inline-end: none;
      padding-inline-end: 0;
    }
  }

  /* Anfahrt */
  .kontakt-directions {
    background-color: var(--color-warm-white);
  }

  .kontakt-directions__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 100%;
    padding-block-end: var(--space-2xl);
    border-block-end: var(--kontakt-border);
  }

  .kontakt-directions__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-letter-spacing);
    color: var(--color-graphite);
    margin-block-end: 0;
  }

  .kontakt-directions__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    font-weight: var(--text-body-weight);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite);
    max-width: var(--kontakt-copy-max);
    margin-block-end: 0;
  }

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

  .kontakt-directions__list li {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite-soft);
    max-width: var(--kontakt-copy-max);
  }

  @media (min-width: 768px) {
    .kontakt-directions__content {
      max-width: calc(8 / 12 * 100%);
    }
  }

  /* Event anfragen CTA */
  .kontakt-cta {
    background-color: var(--color-warm-white);
  }

  .kontakt-cta__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    max-width: 100%;
    padding-block-end: var(--space-2xl);
    border-block-end: var(--kontakt-border);
  }

  .kontakt-cta__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-letter-spacing);
    color: var(--color-graphite);
    margin-block-end: 0;
  }

  .kontakt-cta__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    font-weight: var(--text-body-weight);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite);
    max-width: var(--kontakt-copy-max);
    margin-block-end: 0;
  }

  .kontakt-cta__button {
    width: 100%;
    max-width: 240px;
  }

  @media (min-width: 768px) {
    .kontakt-cta__content {
      max-width: calc(6 / 12 * 100%);
    }
  }

  /* FAQ */
  .kontakt-faq {
    background-color: var(--color-warm-white);
  }

  .kontakt-faq__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 100%;
    padding-block-end: var(--space-2xl);
    border-block-end: var(--kontakt-border);
  }

  .kontakt-faq__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-letter-spacing);
    color: var(--color-graphite);
    margin-block-end: 0;
  }

  .kontakt-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .kontakt-faq__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    padding-block-end: var(--space-xl);
    border-block-end: var(--kontakt-border);
  }

  .kontakt-faq__item:last-child {
    border-block-end: none;
    padding-block-end: 0;
  }

  .kontakt-faq__question {
    font-family: var(--font-heading);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    font-weight: var(--text-h3-weight);
    letter-spacing: var(--text-h3-letter-spacing);
    color: var(--color-graphite);
    margin-block-end: 0;
  }

  .kontakt-faq__answer {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    font-weight: var(--text-body-weight);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite-soft);
    max-width: var(--kontakt-copy-max);
    margin-block-end: 0;
  }

  @media (min-width: 768px) {
    .kontakt-faq__content {
      max-width: calc(8 / 12 * 100%);
    }
  }

  /* Abschließender Hinweis */
  .kontakt-note {
    background-color: var(--color-light-concrete);
  }

  .kontakt-note__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 100%;
  }

  .kontakt-note__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-letter-spacing);
    color: var(--color-graphite);
    margin-block-end: 0;
  }

  .kontakt-note__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    font-weight: var(--text-body-weight);
    letter-spacing: var(--text-body-letter-spacing);
    color: var(--color-graphite-soft);
    max-width: var(--kontakt-copy-max);
    margin-block-end: 0;
  }

  .kontakt-note__legal {
    font-size: var(--text-meta-size);
    line-height: var(--text-meta-line-height);
    font-weight: var(--text-meta-weight);
    letter-spacing: var(--text-meta-letter-spacing);
    text-transform: var(--text-meta-transform);
    color: var(--color-graphite-soft);
    max-width: var(--kontakt-copy-max);
    margin-block-end: 0;
  }

  .kontakt-note__legal a {
    color: var(--color-ultramarine);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .kontakt-note__legal a:hover {
    color: var(--color-ultramarine-hover);
    text-decoration-thickness: 2px;
  }

  @media (min-width: 768px) {
    .kontakt-note__content {
      max-width: calc(8 / 12 * 100%);
    }
  }

  @media (max-width: 389px) {
    .kontakt-hero__meta {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-xs);
    }

    .kontakt-hero__meta-separator {
      display: none;
    }
  }
}