/* Das Anfrageformular (Website /buchen und Backend «Termin eintragen»).
   Alles wirkt nur innerhalb von .anfrage-bereich, damit es auf beiden Seiten gleich aussieht. */

@font-face { font-family: "Caveat Brush"; src: url("../schrift/caveatbrush.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../schrift/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../schrift/dmsans.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: "DM Sans"; src: url("../schrift/dmsans-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F; }

.anfrage-bereich {
  --papier: #f6f1e8; --karte: #fbf6ee; --tinte: #2a2230; --violett: #45344f; --leise: #6d6175;
  --petrol: #1e6b66; --wein: #7b2230; --gold: #94690a; --filz: #255845;
  --hand: "Caveat Brush", "Bradley Hand", cursive;
  --satz: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font: 17px/1.55 var(--satz); color: var(--tinte);
}
.anfrage-bereich *, .anfrage-bereich *::before, .anfrage-bereich *::after { box-sizing: border-box; }
.anfrage-bereich p, .anfrage-bereich ul, .anfrage-bereich dl, .anfrage-bereich dd, .anfrage-bereich h2, .anfrage-bereich ol { margin: 0; padding: 0; }
.anfrage-bereich ul, .anfrage-bereich ol { list-style: none; }
.anfrage-bereich button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.anfrage-bereich img { display: block; max-width: 100%; height: auto; }

.anfrage-bereich .bogen { background: var(--karte); border-radius: 16px; padding: 28px 22px; position: relative;
                          box-shadow: 0 22px 34px -24px rgba(50, 30, 40, .55), 0 1px 2px rgba(50, 30, 40, .15); }

/* Knöpfe wie auf der Website */
.anfrage-bereich .knopf { display: inline-block; text-decoration: none; text-align: center; font: 600 16px/1.2 var(--sans); min-height: 0;
                          padding: 15px 24px; border-radius: 12px; background: var(--karte); color: var(--tinte);
                          box-shadow: inset 0 0 0 2px var(--violett), inset 0 0 0 5px var(--karte), inset 0 0 0 6.5px var(--violett), 0 8px 14px -8px rgba(20, 12, 20, .6);
                          transition: transform .18s ease; }
.anfrage-bereich .knopf:hover { transform: translateY(-2px) rotate(-.6deg); }
.anfrage-bereich .knopf:active { transform: scale(.97); }
.anfrage-bereich .knopf.dunkel { background: var(--violett); color: var(--karte);
                                 box-shadow: inset 0 0 0 2px var(--violett), inset 0 0 0 5px var(--violett), inset 0 0 0 6.5px rgba(251, 246, 238, .7), 0 8px 14px -8px rgba(20, 12, 20, .6); }
.anfrage-bereich .knopf[disabled] { opacity: .55; cursor: wait; transform: none; }
.anfrage-bereich .pfeil { display: inline-flex; align-items: center; gap: 8px; font: 600 15.5px/1.2 var(--sans); text-decoration: none; padding-bottom: 4px;
                          border-bottom: 1.5px solid rgba(42, 34, 48, .3); color: var(--tinte); }
.anfrage-bereich .pfeil svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.anfrage-bereich .pfeil.zurueck svg { transform: rotate(180deg); }

/* Schritte */
.anfrage-bereich .schritte { display: flex; gap: 6px; margin: 0 0 18px; font: 600 12.5px/1.2 var(--sans); color: var(--leise); }
.anfrage-bereich .schritte li { flex: 1; padding-top: 9px; border-top: 4px solid rgba(69, 52, 79, .18); transition: border-color .3s, color .3s; }
.anfrage-bereich .schritte li.an { color: var(--violett); border-top-color: var(--violett); }
.anfrage-bereich .schritte li.fertig { border-top-color: var(--petrol); }
.anfrage-bereich fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.anfrage-bereich legend { padding: 0; font: 400 clamp(32px, 7.4vw, 44px)/1.05 var(--hand); color: var(--violett); margin: 0 0 6px; letter-spacing: 0; text-transform: none; }
.anfrage-bereich .legende-unter { color: var(--leise); margin-bottom: 18px; font-size: 16px; }
.anfrage-bereich .schritt:not([hidden]) { animation: schritt-rein .35s ease; }
@keyframes schritt-rein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* Felder */
.anfrage-bereich .feld { display: grid; gap: 6px; margin-bottom: 16px; }
.anfrage-bereich .feld > label, .anfrage-bereich .feld > span { font: 600 14.5px/1.3 var(--sans); }
.anfrage-bereich .feld small { font: 400 13px/1.4 var(--sans); color: var(--leise); }
.anfrage-bereich .pflicht { color: var(--wein); }
.anfrage-bereich input[type="text"], .anfrage-bereich input[type="email"], .anfrage-bereich input[type="tel"], .anfrage-bereich input[type="date"],
.anfrage-bereich input[type="time"], .anfrage-bereich input[type="number"], .anfrage-bereich textarea {
  width: 100%; font: 400 17px/1.3 var(--sans); color: var(--tinte); background: #fff; border: 0; border-radius: 12px; padding: 13px 14px; min-height: 52px;
  box-shadow: inset 0 0 0 1.5px rgba(69, 52, 79, .25); -webkit-appearance: none; appearance: none; transition: box-shadow .15s; }
.anfrage-bereich input[type="date"], .anfrage-bereich input[type="time"] { display: block; text-align: left; }
.anfrage-bereich textarea { min-height: 130px; resize: vertical; line-height: 1.45; }
.anfrage-bereich input:focus, .anfrage-bereich textarea:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--violett); }
.anfrage-bereich .feld.fehler input, .anfrage-bereich .feld.fehler textarea { box-shadow: inset 0 0 0 2.5px var(--wein); }
.anfrage-bereich .fehlertext { display: block; font: 600 13.5px/1.35 var(--sans); color: var(--wein); animation: schritt-rein .25s ease; }
.anfrage-bereich .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.anfrage-bereich .plz-ort { display: grid; grid-template-columns: 7.5em 1fr; gap: 0 12px; }

/* Auswahl-Karten */
.anfrage-bereich .wahl-liste { display: grid; gap: 10px; margin-bottom: 18px; }
.anfrage-bereich .wahl-karte { position: relative; }
.anfrage-bereich .wahl { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; height: 100%;
                         padding: 12px 50px 12px 14px; border-radius: 12px; background: #fff; cursor: pointer;
                         box-shadow: inset 0 0 0 1.5px rgba(69, 52, 79, .22); transition: box-shadow .2s, transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.anfrage-bereich .wahl:has(.haken) { padding-bottom: 34px; }
.anfrage-bereich .wahl.ankreuzen { grid-template-columns: 1fr; padding-bottom: 12px; }
.anfrage-bereich .wahl input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.anfrage-bereich .wahl img { width: 44px; transform: rotate(-5deg); filter: drop-shadow(1px 3px 3px rgba(20, 15, 25, .3)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.anfrage-bereich .wahl:has(input:checked) img { transform: rotate(4deg) scale(1.06); }
.anfrage-bereich .wahl b { display: block; font: 600 16.5px/1.25 var(--sans); }
.anfrage-bereich .wahl small { display: block; font: 400 14px/1.35 var(--sans); color: var(--leise); margin-top: 2px; }
.anfrage-bereich .wahl:has(input:checked) { box-shadow: inset 0 0 0 3px var(--f, var(--violett)); transform: translateX(3px); }
.anfrage-bereich .wahl:has(input:focus-visible) { outline: 3px solid #f0c419; outline-offset: 2px; }
.anfrage-bereich .haken { position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
                          box-shadow: inset 0 0 0 2px rgba(69, 52, 79, .3); transition: background .2s, box-shadow .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.anfrage-bereich .wahl:has(input:checked) .haken { background: var(--f, var(--violett)); box-shadow: none; transform: scale(1.08); }
.anfrage-bereich .wahl:has(input:checked) .haken::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.anfrage-bereich .zwischentitel { font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin: 22px 0 10px; }
.anfrage-bereich .was-ist-das { position: absolute; left: 72px; bottom: 9px; font: 600 13.5px/1 var(--sans); color: var(--f, var(--violett)); padding: 4px 0; border-bottom: 1.5px solid currentColor; }
.anfrage-bereich .wahl-karte:has(.ankreuzen) .was-ist-das { display: none; }

/* Pakete als Abkürzung */
.anfrage-bereich .paket-tipps { display: grid; gap: 10px; margin: 4px 0 18px; }
.anfrage-bereich .paket-tipp { position: relative; display: block; padding: 14px 16px 14px 18px; border-radius: 12px; text-decoration: none; color: var(--tinte); background: #fffaf0;
                               box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px #fffaf0, inset 0 0 0 6.5px rgba(148, 105, 10, .45); transition: transform .2s, background .2s; }
.anfrage-bereich .paket-tipp b { display: block; font: 400 26px/1.05 var(--hand); color: var(--violett); padding-right: 70px; }
.anfrage-bereich .paket-tipp small { display: block; font: 500 14px/1.35 var(--sans); color: var(--leise); margin-top: 3px; }
.anfrage-bereich .paket-marke { position: absolute; top: 12px; right: 12px; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; background: var(--gold); color: #fff; }
.anfrage-bereich .paket-tipp[aria-pressed="true"] { background: #fbefc9; transform: translateX(3px); }
.anfrage-bereich .paket-tipp[aria-pressed="true"] .paket-marke::before { content: "✓ "; }
.anfrage-bereich .paket-hinweis { min-height: 1.3em; margin: -8px 0 12px; font: 400 23px/1.2 var(--hand); color: var(--gold); }

/* Chips statt Klappmenü (z. B. Anlass, Status) */
.anfrage-bereich .chips-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.anfrage-bereich .chips-wahl label { position: relative; cursor: pointer; }
.anfrage-bereich .chips-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anfrage-bereich .chips-wahl span { display: inline-block; padding: 10px 14px; border-radius: 999px; background: #fff; font: 600 14.5px/1 var(--sans); color: var(--tinte);
                                     box-shadow: inset 0 0 0 1.5px rgba(69, 52, 79, .22); transition: background .2s, color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.anfrage-bereich .chips-wahl input:checked + span { background: var(--violett); color: #fff; box-shadow: none; transform: rotate(-2deg) scale(1.04); }
.anfrage-bereich .chips-wahl input:focus-visible + span { outline: 3px solid #f0c419; outline-offset: 2px; }

/* Häkchen (Datum flexibel, Datenschutz, Mail an Kunden) – gezeichnet statt nativ */
.anfrage-bereich .haekchen { position: relative; display: flex; gap: 12px; align-items: flex-start; font: 400 15.5px/1.45 var(--sans); margin: 4px 0 16px; cursor: pointer; }
.anfrage-bereich .haekchen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anfrage-bereich .haekchen::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 2px rgba(69, 52, 79, .3); margin-top: 0;
                                      transition: background .2s, box-shadow .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.anfrage-bereich .haekchen:has(input:checked)::before { background: var(--violett); box-shadow: none; transform: rotate(-6deg); }
.anfrage-bereich .haekchen:has(input:checked)::after { content: ""; position: absolute; left: 9px; top: 4px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.anfrage-bereich .haekchen:has(input:focus-visible)::before { outline: 3px solid #f0c419; outline-offset: 2px; }
.anfrage-bereich .haekchen a { color: var(--violett); }
.anfrage-bereich .freiwillig { color: var(--leise); font: 400 13.5px/1.4 var(--sans); }
.anfrage-bereich small.freiwillig { margin-left: 6px; }

.anfrage-bereich .weiter-zurueck { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; margin-top: 22px; }
.anfrage-bereich .ueberblick { background: var(--papier); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; font: 400 15.5px/1.5 var(--sans); }
.anfrage-bereich .ueberblick dt { font-weight: 700; color: var(--leise); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; }
.anfrage-bereich .ueberblick dt:first-child { margin-top: 0; }
.anfrage-bereich .honig { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.anfrage-bereich .meldung { padding: 14px 16px; border-radius: 10px; font: 500 15.5px/1.45 var(--sans); margin-bottom: 18px; background: #f8e3e3; color: #6d1f1f; }
.anfrage-bereich .nur-willi { margin-top: 10px; padding: 16px 18px 4px; border-radius: 14px; background: #eef4ef; box-shadow: inset 0 0 0 1.5px rgba(37, 88, 69, .2); }
.anfrage-bereich .nur-willi .zwischentitel { margin-top: 0; color: var(--filz); }

/* Info-Karte («Was ist das?») */
.anfrage-bereich .info-karte { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 18px; background: var(--karte); color: var(--tinte); overflow: auto;
                               box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.anfrage-bereich .info-karte[open] { animation: karte-auf .35s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes karte-auf { from { opacity: 0; transform: translateY(30px) rotate(-2deg) scale(.96); } to { opacity: 1; transform: none; } }
.anfrage-bereich .info-karte::backdrop { background: rgba(20, 30, 25, .55); }
.anfrage-bereich .info-karte article { display: grid; }
.anfrage-bereich .info-bild { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
.anfrage-bereich .info-text { padding: 20px 22px 6px; }
.anfrage-bereich .info-text h2 { font: 620 28px/1.1 var(--satz); color: var(--f); }
.anfrage-bereich .info-text .kurz { font: 400 24px/1.1 var(--hand); color: var(--violett); margin: 6px 0 12px; }
.anfrage-bereich .info-text p { margin-bottom: 12px; font-size: 16px; }
.anfrage-bereich .leistungen { display: grid; gap: 8px; margin-bottom: 8px; font: 400 15.5px/1.35 var(--sans); }
.anfrage-bereich .leistungen li { display: grid; grid-template-columns: 15px 1fr; gap: 9px; align-items: baseline; }
.anfrage-bereich .leistungen svg { width: 12px; height: 12px; fill: var(--f); transform: translateY(1px); }
.anfrage-bereich .info-knoepfe { position: sticky; bottom: 0; display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 14px 22px 18px; background: var(--karte); border-top: 1px solid #ebe2d2; }

@media (min-width: 560px) { .anfrage-bereich .bogen { padding: 40px 40px; } }
@media (min-width: 760px) { .anfrage-bereich .wahl-liste.zweispaltig { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .anfrage-bereich .bogen { padding: 50px 56px; } }
@media (prefers-reduced-motion: reduce) {
  .anfrage-bereich *, .anfrage-bereich *::before { transition: none !important; animation: none !important; }
}