.kontakt-page {
  overflow: hidden;
}

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

.kontakt-page .eyebrow {
  margin: 0;
}

.kontakt-hero {
  padding-block-start: clamp(4rem, 7vw, 8rem);
}

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

.kontakt-hero__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.kontakt-hero__content > * {
  margin: 0;
}

.kontakt-hero__content h1 {
  max-width: 11.5ch;
}

.kontakt-hero__lead {
  max-width: 58ch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.kontakt-hero__support {
  max-width: 52ch;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.kontakt-hero__rule {
  width: 7rem;
  height: 1px;
  background: var(--color-clay);
}

.kontakt-hero__actions {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kontakt-hero__actions > * {
  min-width: 0;
}

.kontakt-hero__ceramic {
  display: none;
}

.kontakt-intents__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.kontakt-intents__intro > * {
  margin: 0;
}

.kontakt-intents__intro h2,
.kontakt-details__intro h2 {
  max-width: 13ch;
}

.kontakt-intents__intro p:last-child {
  max-width: 54ch;
}

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

.kontakt-intent-card {
  display: flex;
  min-width: 0;
  min-height: 10.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.kontakt-intent-card > * {
  margin: 0;
}

.kontakt-intent-card h3 {
  max-width: 18ch;
}

.kontakt-intent-card p {
  max-width: 36ch;
}

.kontakt-intent-card .text-link {
  margin-block-start: auto;
}

.kontakt-intent-card__number {
  color: var(--color-brass);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1;
}

.kontakt-intent-card--private {
  border-radius: var(--radius-organic);
  background: var(--color-surface-muted);
}

.kontakt-intent-card--restaurant .kontakt-intent-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-sage);
  color: var(--color-ink);
  padding-inline: var(--space-2);
}

.kontakt-intent-card--evening {
  border-color: transparent;
  background: var(--color-felt-green);
  color: var(--color-porcelain);
}

.kontakt-intent-card--evening h3,
.kontakt-intent-card--evening .text-link {
  color: var(--color-porcelain);
}

.kontakt-intent-card:hover {
  border-color: var(--color-brass);
  transform: translateY(-2px);
}

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

.kontakt-preparation__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kontakt-preparation__intro > * {
  margin: 0;
}

.kontakt-preparation__intro h2 {
  max-width: 12ch;
}

.kontakt-preparation__intro p:last-child {
  max-width: 42ch;
}

.kontakt-preparation__list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kontakt-preparation__list > li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  padding-block: var(--space-5);
  border-top: var(--border-brass);
}

.kontakt-preparation__list > li:nth-child(2) {
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.kontakt-preparation__list > li > div {
  min-width: 0;
}

.kontakt-preparation__list h3 {
  max-width: 26ch;
}

.kontakt-preparation__list p {
  max-width: 55ch;
}

.kontakt-preparation__number {
  color: var(--color-clay);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.kontakt-form-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.kontakt-form-panel__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kontakt-form-panel__intro > * {
  margin: 0;
}

.kontakt-form-panel__intro h2 {
  max-width: 14ch;
}

.kontakt-form-panel__intro p:last-child {
  max-width: 55ch;
}

.kontakt-form {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-6);
}

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

.kontakt-form__field {
  min-width: 0;
}

.kontakt-form__field label {
  margin: 0 0 var(--space-2);
}

.kontakt-form__optional {
  color: color-mix(in srgb, var(--color-ink) 65%, transparent);
  font-weight: var(--weight-regular);
}

.kontakt-form__field small {
  display: block;
  margin-block-start: var(--space-2);
}

.kontakt-form__error {
  display: none;
  margin: var(--space-2) 0 0;
  color: var(--color-error);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: var(--leading-small);
}

.kontakt-form__field.is-invalid .kontakt-form__error,
.kontakt-form__privacy.is-invalid .kontakt-form__error {
  display: block;
}

.kontakt-form__field.is-invalid :is(input, select, textarea),
.kontakt-form__privacy.is-invalid .kontakt-form__check {
  border-color: var(--color-error);
}

.kontakt-form__privacy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.kontakt-form__check {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-small);
}

.kontakt-form__check input {
  flex: 0 0 1.125rem;
  margin-block-start: 0.15rem;
}

.kontakt-form__check span {
  min-width: 0;
}

.kontakt-form__submit-wrap {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.kontakt-form__note {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.kontakt-form__status {
  display: none;
  margin: 0;
  padding: var(--space-4);
  border-inline-start: 3px solid var(--color-success);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-porcelain));
}

.kontakt-form__status.is-visible {
  display: block;
}

.kontakt-form__status.is-error {
  border-inline-start-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-porcelain));
}

.kontakt-private__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.kontakt-private__intro > * {
  margin: 0;
}

.kontakt-private__intro h2 {
  max-width: 14ch;
}

.kontakt-private__intro p:last-child {
  max-width: 54ch;
}

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

.kontakt-private-card {
  display: flex;
  min-width: 0;
  min-height: 15rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border);
  background: var(--color-surface);
}

.kontakt-private-card > * {
  margin: 0;
}

.kontakt-private-card span {
  color: var(--color-brass);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: 1;
}

.kontakt-private-card h3 {
  max-width: 20ch;
}

.kontakt-private-card p {
  max-width: 38ch;
}

.kontakt-private-card--one {
  border-radius: var(--radius-organic);
}

.kontakt-private-card--two {
  border-color: transparent;
  border-radius: var(--radius-lg);
  background: var(--color-dusty-blue);
}

.kontakt-private-card--three {
  border-top: 2px solid var(--color-burgundy);
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-lg) var(--radius-md);
}

.kontakt-private__action {
  margin-block-start: var(--space-6);
}

.kontakt-evenings__panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-felt-green);
  color: var(--color-porcelain);
}

.kontakt-evenings__panel > * {
  margin: 0;
}

.kontakt-evenings__panel .eyebrow {
  color: var(--color-brass);
}

.kontakt-evenings__panel h2,
.kontakt-evenings__panel h3 {
  color: var(--color-porcelain);
}

.kontakt-evenings__panel h2 {
  max-width: 15ch;
}

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

.kontakt-evenings__context,
.kontakt-evenings__clarification {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kontakt-evenings__context > *,
.kontakt-evenings__clarification > * {
  margin: 0;
}

.kontakt-evenings__context p {
  max-width: 52ch;
}

.kontakt-evenings__number {
  color: var(--color-brass);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: 1;
}

.kontakt-evenings__clarification {
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--color-burgundy);
}

.kontakt-evenings__clarification p {
  max-width: 48ch;
}

.kontakt-evenings__clarification .text-link {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  color: var(--color-porcelain);
}

.kontakt-details__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.kontakt-details__intro > * {
  margin: 0;
}

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

.kontakt-details-card {
  display: flex;
  min-width: 0;
  min-height: 8.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.kontakt-details-card > * {
  margin: 0;
}

.kontakt-details-card h3 {
  max-width: 18ch;
}

.kontakt-details-card p:not(.eyebrow):not(.kontakt-details-card__placeholder) {
  max-width: 42ch;
}

.kontakt-details-card--muted {
  background: var(--color-surface-muted);
}

.kontakt-details-card__placeholder {
  max-width: 100%;
  color: var(--color-clay);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h4);
  overflow-wrap: anywhere;
}

.kontakt-closing__panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-organic);
  background: var(--color-dusty-blue);
}

.kontakt-closing__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kontakt-closing__content > * {
  margin: 0;
}

.kontakt-closing__content h2 {
  max-width: 16ch;
}

.kontakt-closing__content p:last-child {
  max-width: 52ch;
}

.kontakt-closing__action {
  width: 100%;
}

@media (min-width: 30rem) {
  .kontakt-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .kontakt-closing__action {
    width: auto;
  }
}

@media (min-width: 40rem) {
  .kontakt-details__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kontakt-details-card:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 48rem) {
  .kontakt-intents__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .kontakt-form-panel,
  .kontakt-evenings__panel,
  .kontakt-closing__panel {
    padding: var(--space-7);
  }

  .kontakt-form__privacy {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, auto);
    align-items: end;
  }

  .kontakt-form__check,
  .kontakt-form__privacy > .kontakt-form__error {
    grid-column: 1 / -1;
  }

  .kontakt-form__submit-wrap {
    align-items: flex-end;
  }

  .kontakt-private__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kontakt-private-card--three {
    grid-column: 1 / -1;
  }
}

@media (min-width: 51.25rem) {
  .kontakt-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }

  .kontakt-form__field--full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 56.25rem) {
  .kontakt-preparation__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-7);
  }

  .kontakt-evenings__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: calc(var(--space-7) + var(--space-3));
  }
}

@media (min-width: 60rem) {
  .kontakt-details__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kontakt-details-card:nth-child(3) {
    grid-column: auto;
  }
}

@media (min-width: 64rem) {
  .kontakt-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: center;
  }

  .kontakt-hero__content {
    grid-column: 1 / span 6;
  }

  .kontakt-hero__ceramic {
    position: relative;
    display: block;
    grid-column: 8 / span 5;
    min-width: 0;
    min-height: 27rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-dusty-blue) 80%, var(--color-line));
    border-radius: var(--radius-organic);
    background: var(--color-dusty-blue);
  }

  .kontakt-hero__ceramic::before,
  .kontakt-hero__ceramic::after {
    position: absolute;
    content: "";
    border: 1px solid color-mix(in srgb, var(--color-porcelain) 65%, transparent);
    border-radius: 50%;
  }

  .kontakt-hero__ceramic::before {
    width: 18rem;
    height: 18rem;
    right: -4rem;
    bottom: -5rem;
  }

  .kontakt-hero__ceramic::after {
    width: 12rem;
    height: 12rem;
    top: 2.5rem;
    left: -3rem;
  }

  .kontakt-hero__ceramic-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13rem;
    height: 13rem;
    border: 1px solid var(--color-porcelain);
    border-radius: 44% 56% 46% 54%;
    transform: translate(-50%, -50%) rotate(-18deg);
  }

  .kontakt-hero__ceramic-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5rem;
    height: 5rem;
    border: 1px solid var(--color-clay);
    border-radius: 52% 48% 60% 40%;
    transform: translate(-18%, -20%) rotate(28deg);
  }

  .kontakt-intents__intro {
    width: calc((100% - (var(--space-5) * 11)) / 12 * 4 + (var(--space-5) * 3));
  }

  .kontakt-form-panel {
    width: calc((100% - (var(--space-5) * 11)) / 12 * 10 + (var(--space-5) * 9));
    margin-inline: auto;
  }

  .kontakt-private__grid {
    grid-template-columns: 4fr 3fr 4fr;
    gap: var(--space-5);
    align-items: start;
  }

  .kontakt-private-card--two {
    grid-column: 2;
    margin-block-start: var(--space-7);
  }

  .kontakt-private-card--three {
    grid-column: 3;
  }

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

  .kontakt-closing__content {
    flex: 0 1 58.333%;
  }

  .kontakt-closing__action {
    flex: 0 0 auto;
    width: auto;
  }
}

@media (max-width: 29.999rem) {
  .kontakt-hero__actions .button,
  .kontakt-private__action,
  .kontakt-closing__action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-intent-card {
    transition: none;
  }

  .kontakt-intent-card:hover {
    transform: none;
  }
}