/* ==========================================================================
   Formulare (Reservierung & Kontakt)
   ========================================================================== */
.form { position: relative; }
.form-title { font: 300 clamp(1.8rem, 3vw, 2.4rem) var(--serif); margin: 0 0 22px; color: var(--paper); }
.form-fields { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.field { position: relative; }
.field input, .field textarea, .field select { width: 100%; padding: 26px 16px 10px; font: 400 1rem var(--sans); border: 1px solid transparent; border-bottom: 1px solid currentColor; border-radius: 6px 6px 0 0; background: transparent; color: inherit; outline: 0; appearance: none; -webkit-appearance: none; transition: border-color .35s, background .35s, box-shadow .35s; }
.field textarea { resize: vertical; min-height: 110px; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field label { position: absolute; left: 16px; top: 19px; font: 400 .98rem var(--sans); pointer-events: none; opacity: .75; transform-origin: left top; transition: transform .35s var(--ease), opacity .3s, color .3s; }
.field input:focus + label, .field textarea:focus + label, .field select + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label,
.field--static label { transform: translateY(-13px) scale(.76); opacity: 1; }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); pointer-events: none; }
.field:focus-within::after { transform: scaleX(1); }
.check { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-size: .86rem; line-height: 1.55; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--gold); border-radius: 4px; display: grid; place-items: center; transition: background .3s, box-shadow .3s; }
.check .box svg { width: 14px; height: 14px; stroke: var(--g900); stroke-width: 2.6; fill: none; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease); }
.check input:checked + .box { background: var(--gold); }
.check input:checked + .box svg { opacity: 1; transform: none; }
.check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(201, 163, 53, .45); }
.check a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.form-note { margin: 0; font-size: .8rem; opacity: .7; text-align: center; }

/* Dunkle Variante (Reservierung) */
.form--dark { padding: clamp(26px, 4vw, 48px); border: 1px solid rgba(201, 163, 53, .35); border-radius: 16px; color: var(--paper); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.form--dark .field input, .form--dark .field textarea, .form--dark .field select { border-bottom-color: rgba(201, 163, 53, .55); background-color: rgba(255, 255, 255, .05); color-scheme: dark; }
.form--dark .field:focus-within input, .form--dark .field:focus-within textarea { background-color: rgba(255, 255, 255, .09); }
.form--dark .field label { color: var(--gold-l); }
.form--dark .field select option { color: #111; background: #fff; }
.form--dark .check a { color: var(--gold-l); }

/* Helle Variante (Kontakt) */
.form--light { color: var(--ink); }
.form--light .field input, .form--light .field textarea, .form--light .field select { border-bottom-color: rgba(138, 108, 22, .5); background-color: rgba(255, 255, 255, .7); }
.form--light .field:focus-within input, .form--light .field:focus-within textarea { background-color: #fff; box-shadow: 0 14px 30px -22px rgba(18, 36, 13, .6); }
.form--light .field label { color: var(--g600); }
.form--light .check .box { border-color: var(--gold-d); }
.form--light .check a { color: var(--g600); }

/* Zustände */
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: #c0392b; }
.notice, .form-error { padding: 14px 18px; border-radius: 8px; font-size: .92rem; margin: 0 0 18px; }
.notice--ok { background: rgba(88, 160, 70, .16); border: 1px solid rgba(88, 160, 70, .55); }
.notice--err, .form-error { background: rgba(192, 57, 43, .14); border: 1px solid rgba(192, 57, 43, .6); }
.form-error { margin: 18px 0 0; }
.form--dark .notice--ok, .form--dark .form-error { color: var(--paper); }
.btn-spin { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.form.is-loading .btn-spin { display: inline-block; }
.form.is-loading button[type="submit"] { pointer-events: none; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { text-align: center; padding: clamp(30px, 6vw, 70px) 10px; animation: successIn 1s var(--ease) both; }
.form-success[hidden] { display: none; }
.form-success h3 { font: 300 clamp(2rem, 4vw, 2.8rem) var(--serif); margin: 22px 0 10px; }
.form--dark .form-success h3 { color: var(--paper); }
.success-ico { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); position: relative; }
.success-ico::before { content: ""; position: absolute; inset: -9px; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; animation: ring 1.8s var(--ease) .3s infinite; }
.success-ico svg { width: 38px; height: 38px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .9s var(--ease) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes successIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.form.is-done .form-fields, .form.is-done .form-title, .form.is-done .notice, .form.is-done .form-error { display: none; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }