/* Kontakt & Anreise (and its English page, which loads this file too): only what these pages add to ../site.css and
   ../pages.css: their three ways to reach them as cards that are the link (the icon in its circle, the name, the
   address or number), and the line to Wissenswertes under the arrival rows. */

.way { align-content: start; gap: 8px; }
.way .row__icon { margin-bottom: 6px; background: var(--paper-2); }
.way h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); }
.way p { color: var(--ink); overflow-wrap: anywhere; }
.way p span { color: var(--ink-2); }
.row .more { margin-top: 2px; }
.know { margin-top: clamp(32px, 5vw, 56px); color: var(--ink-2); text-align: center; text-wrap: balance; }
.know a { color: var(--accent-ink); }

/* the contact form (/contact.js): the booking page's fields in one card under the welcome; a ring turns in the button
   while it sends; a green thank-you takes its place */
.contact { display: grid; gap: 14px; max-width: 760px; }
.contact .fields { box-shadow: 0 18px 40px -28px rgb(61 52 24 / 0.35); }
.contact .fl--area { background: none; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; }
.contact__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.contact__wa { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.95rem; text-decoration: none; }
.contact__wa:hover { color: var(--accent-ink); }
.contact__wa .mark { width: 18px; height: 18px; color: var(--accent-ink); }
[data-contact-send] { gap: 10px; }
[data-contact-send].is-sending { cursor: progress; opacity: 0.92; }
.contact__ring { display: inline-flex; }
.contact__ring .mark { width: 18px; height: 18px; animation: contact-spin 900ms linear infinite; }
@keyframes contact-spin { to { rotate: 360deg; } }
.contact--done { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 22px 24px; border-radius: var(--r); background: color-mix(in srgb, #2b7d47 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #2b7d47 28%, transparent); animation: contact-in 420ms var(--ease) both; }
.contact--done b { display: block; font: 400 1.3rem/1.25 var(--head); color: var(--head-ink); }
.contact--done p { margin: 4px 0 0; color: var(--ink-2); }
.contact__check .mark { width: 26px; height: 26px; color: #2b7d47; }
@keyframes contact-in { from { opacity: 0; translate: 0 8px; } }
.contact.is-shake { animation: contact-shake 420ms var(--ease); }
@keyframes contact-shake { 0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
@media (max-width: 640px) {
  .contact .fields__row { grid-template-columns: minmax(0, 1fr); }
  .contact .fields__row .fl + .fl { border-left: 0; border-top: 1px solid var(--line); }
  .contact__foot .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .contact__ring .mark, .contact--done, .contact.is-shake { animation: none; } }