/* Verwaltung der Wunschliste (index.php) – baut auf /tools/buchung/buchung.css (muenzlein-Design: Kopf, Karten,
   Reiter, Dialoge, Schalter) auf; hier nur, was die Wunschliste zusätzlich braucht. */

/* Startseite: Attrappe einer Liste */
.wl-held-bild { position: relative; display: grid; justify-items: center; }
.wl-attrappe { width: min(100%, 380px); padding: 16px; border-radius: 24px; background: #fff; color: #1a1424; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; box-shadow: 0 40px 90px -30px rgba(219, 39, 119, .55), 0 0 0 1px rgba(255, 255, 255, .15); transform: rotate(2deg); animation: bu-schweben 7s ease-in-out infinite; }
.wl-attrappe-kopf { display: flex; align-items: center; gap: 12px; margin: -16px -16px 14px; padding: 18px 16px; border-radius: 24px 24px 0 0; background: linear-gradient(135deg, #db2777, #9333ea); color: #fff; }
.wl-attrappe-kopf > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .2); font-size: 24px; }
.wl-attrappe-kopf b { display: block; font-size: 15px; } .wl-attrappe-kopf small { opacity: .85; font-size: 12px; }
.wl-attrappe-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-a-karte { display: grid; gap: 3px; padding: 10px; border-radius: 14px; border: 1px solid #ebe7f0; font-size: 12px; }
.wl-a-karte > i { display: grid; place-items: center; height: 54px; border-radius: 10px; background: hsl(var(--h) 80% 94%); font-style: normal; font-size: 28px; }
.wl-a-karte b { font-size: 13px; } .wl-a-karte small { color: #9a93a8; }
.wl-a-karte span { margin-top: 4px; padding: 5px; border-radius: 8px; background: #f1eef5; color: #9a93a8; font-weight: 700; text-align: center; }
.wl-a-karte span.frei { background: #db2777; color: #fff; }
.wl-a-karte.vergeben > i { filter: grayscale(1); opacity: .5; }
.wl-a-karte em { display: block; height: 6px; margin-top: 6px; border-radius: 9px; background: #f1eef5; overflow: hidden; } .wl-a-karte em i { display: block; height: 100%; background: #db2777; }

/* Übersicht */
.wl-start { text-align: center; }
.wl-start-geschenk { display: inline-block; font-size: 56px; animation: wl-wippen 3s ease-in-out infinite; }
@keyframes wl-wippen { 50% { transform: translateY(-6px) rotate(-6deg); } }
.wl-anlaesse { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 1rem; }
.wl-anlaesse form { margin: 0; }
.wl-anlass { display: grid; justify-items: center; gap: .4rem; width: 100%; padding: 1rem .6rem; border: 0; border-radius: 18px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--rand); color: #fff; font: 600 15px 'Exo 2', sans-serif; cursor: pointer; transition: transform .25s var(--feder), box-shadow .2s, background .2s; }
.wl-anlass span { font-size: 34px; transition: transform .3s var(--feder); }
.wl-anlass:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--f) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--f); }
.wl-anlass:hover span { transform: scale(1.15) rotate(-6deg); }
.wl-anlaesse.klein { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); margin: 0 0 1rem; }
.wl-anlass-wahl { position: relative; cursor: pointer; }
.wl-anlass-wahl input { position: absolute; opacity: 0; }
.wl-anlass-wahl span { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; border-radius: 14px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--rand); color: var(--text-2); font-weight: 600; font-size: .88rem; transition: box-shadow .2s, background .2s; }
.wl-anlass-wahl i { font-style: normal; font-size: 1.3rem; }
.wl-anlass-wahl input:checked + span { background: color-mix(in srgb, var(--f) 20%, transparent); box-shadow: inset 0 0 0 2px var(--f); color: #fff; }
.wl-anlass-wahl input:focus-visible + span { outline: 2px solid var(--gelb); outline-offset: 2px; }
.wl-listen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.wl-listen-karte { position: relative; display: grid; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--rand); color: inherit !important; overflow: hidden; transition: transform .25s var(--kurve), border-color .2s, box-shadow .25s; }
.wl-listen-karte:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--f) 60%, transparent); box-shadow: 0 24px 44px -24px var(--f); }
.wl-listen-karte.pause { opacity: .6; }
.wl-listen-bild { position: relative; display: grid; place-items: center; height: 130px; background: linear-gradient(135deg, var(--f), color-mix(in srgb, var(--f) 55%, #7c3aed)); background-size: cover; background-position: center; }
.wl-listen-motiv { font-size: 52px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25)); transition: transform .35s var(--feder); }
.wl-listen-karte:hover .wl-listen-motiv { transform: scale(1.12) rotate(-6deg); }
.wl-listen-bild em { position: absolute; top: 10px; right: 10px; padding: .2rem .6rem; border-radius: 99px; background: rgba(0, 0, 0, .35); color: #fff; font-style: normal; font-size: .76rem; font-weight: 700; }
.wl-listen-text { display: grid; padding: 14px 44px 16px 16px; }
.wl-listen-text b { color: #fff; font-size: 1.08rem; } .wl-listen-text small { color: var(--text-3); }
.wl-listen-pfeil { position: absolute; right: 16px; bottom: 22px; color: var(--text-3); transition: transform .25s var(--kurve), color .2s; }
.wl-listen-karte:hover .wl-listen-pfeil { transform: translateX(4px); color: var(--gelb); }
.wl-listen-neu { display: grid; place-items: center; align-content: center; gap: .5rem; min-height: 200px; border: 2px dashed var(--rand-2); border-radius: 20px; background: transparent; color: var(--text-3); font: 600 15px 'Exo 2', sans-serif; cursor: pointer; transition: border-color .2s, color .2s; }
.wl-listen-neu i { font-size: 1.6rem; } .wl-listen-neu:hover { border-color: var(--gelb); color: #fff; }
.wl-schmal { max-width: 640px; }

/* Liste: Kopf */
.wl-liste-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin-bottom: 1.2rem; }
.wl-liste-kopf > div:nth-child(2) { flex: 1 1 280px; min-width: 0; }
.wl-liste-kopf h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); overflow-wrap: anywhere; }
.wl-liste-kopf .ueber { margin-bottom: .3rem; }
.wl-liste-motiv { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, var(--f), color-mix(in srgb, var(--f) 55%, #7c3aed)); font-size: 38px; box-shadow: 0 14px 30px -14px var(--f); }
.wl-zahlen { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .4rem 0 0; color: var(--text-2); font-size: .92rem; } .wl-zahlen b { color: #fff; }
.wl-pause { color: #fda4af; }

/* Wünsche */
.wl-wuensche { display: grid; gap: 10px; }
.wl-wunsch { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 10px 12px 10px 8px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--rand); transition: border-color .2s, opacity .2s, transform .2s; }
.wl-wunsch:hover { border-color: var(--rand-2); }
.wl-wunsch.zieht { opacity: .45; transform: scale(.98); }
.wl-wunsch.neu { animation: wl-neu .9s var(--feder) both; border-color: var(--gelb); }
@keyframes wl-neu { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.02); } }
.wl-griff { padding: .6rem .3rem; color: var(--text-3); cursor: grab; }
.wl-wunsch-bild { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #fff; overflow: hidden; color: #d1c4e9; font-size: 1.5rem; }
.wl-wunsch-bild img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.wl-wunsch-text { display: grid; gap: .15rem; min-width: 0; }
.wl-wunsch-text b { color: #fff; overflow-wrap: anywhere; } .wl-wunsch-text small { color: var(--text-3); }
.wl-marken { display: flex; flex-wrap: wrap; gap: .3rem; }
.wl-marke { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 99px; font-size: .74rem; font-weight: 700; background: var(--flaeche-2); color: var(--text-2); }
.wl-marke.herz { background: rgba(244, 63, 94, .16); color: #fda4af; }
.wl-marke.gruppe { background: rgba(255, 198, 26, .14); color: #ffe08a; }
.wl-marke.vergeben { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
.wl-marke.teil { background: rgba(251, 191, 36, .14); color: #fcd34d; }
.wl-wunsch-knoepfe { display: flex; gap: .3rem; }
.wl-wunsch-knoepfe .bu-icon-knopf.an { color: #fb7185; }
@media (max-width: 640px) {
    .wl-wunsch { grid-template-columns: 48px minmax(0, 1fr); padding: 10px; }
    .wl-griff { display: none; } .wl-wunsch-bild { width: 48px; height: 48px; }
    .wl-wunsch-knoepfe { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Wunsch-Dialog */
.wl-wunsch-dialog { width: min(620px, calc(100vw - 24px)); }
.wl-link-zeile { display: flex; align-items: flex-end; gap: .6rem; }
.wl-link-zeile .t-feld { flex: 1; margin-bottom: 0; }
.wl-link-zeile .t-knopf { margin-bottom: .1rem; white-space: nowrap; }
.wl-vorschau-status { margin: .5rem 0 0; } .wl-vorschau-status.gut { color: var(--gruen); } .wl-vorschau-status.fehler { color: var(--rot); }
.wl-wunsch-felder { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 520px) { .wl-wunsch-felder { grid-template-columns: minmax(0, 1fr); } .wl-link-zeile { flex-wrap: wrap; } }
.wl-bildwahl { display: grid; gap: .5rem; align-content: start; justify-items: center; }
.wl-bildwahl-bild { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 18px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--rand-2); color: var(--text-3); font-size: 2rem; overflow: hidden; }
.wl-bildwahl-bild.hat { background: #fff; } .wl-bildwahl-bild img { width: 100%; height: 100%; object-fit: contain; padding: 6px; animation: wl-neu .5s var(--feder) both; }
.bu-haken.klein { font-size: .8rem; margin: 0; }

/* Gestaltung */
.wl-gv { position: sticky; top: 84px; margin-bottom: 18px; }
.wl-gv-karte { display: grid; justify-items: center; gap: .3rem; padding: 0 20px 22px; border-radius: 22px; background: #fff; color: #1a1424; text-align: center; overflow: hidden; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); }
.wl-gv-cover { position: relative; display: grid; place-items: center; justify-self: stretch; height: 120px; margin: 0 -20px .6rem; background: linear-gradient(135deg, var(--f), color-mix(in srgb, var(--f) 55%, #7c3aed)); background-size: cover; background-position: center; transition: background .3s; }
.wl-gv-cover span { font-size: 48px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25)); }
.wl-gv-karte b { font-size: 1.2rem; overflow-wrap: anywhere; } .wl-gv-karte small { color: #9a93a8; } .wl-gv-karte p { margin: .2rem 0; color: #5b5468; font-size: .88rem; overflow-wrap: anywhere; }
.wl-gv-knopf { margin-top: .5rem; padding: .55rem 1.1rem; border-radius: 12px; background: var(--f); color: var(--auf-f, #fff); font-weight: 700; font-size: .9rem; }
.wl-cover-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.wl-speichern-seite { position: static; margin: 0 0 18px; padding: .6rem; }
@media (max-width: 900px) { .wl-gv { position: static; } }

/* Reservierungen */
.wl-geheim { text-align: center; max-width: 620px; margin: 0 auto; }
.wl-geheim-symbol { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 1rem; border-radius: 26px; background: linear-gradient(135deg, #ffd54a, #ff9f1a); color: #111; font-size: 2.2rem; animation: wl-wippen 2.6s ease-in-out infinite; box-shadow: 0 18px 40px -16px rgba(255, 198, 26, .7); }
.wl-geheim p { color: var(--text-2); }
.wl-danke { display: grid; gap: 10px; }
.wl-danke-karte { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: .9rem; padding: 12px 14px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--rand); }
.wl-danke-karte b { color: #fff; } .wl-danke-karte small { display: block; color: var(--text-3); }
.wl-danke-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #ffd54a, #ff9f1a); color: #111; font-weight: 800; }
@media (max-width: 560px) { .wl-danke-karte { grid-template-columns: 40px minmax(0, 1fr); } .wl-danke-karte > .wl-marke, .wl-danke-karte > form { grid-column: 2; justify-self: start; } }