/* Datums- und Uhrzeit-Auswahl (picker.js). Erbt die Schrift der Seite. */
.ff-pick, .ff-pick button, .ff-pick input, .ff-pick select, .ff-pop { font-family: inherit; }
.ff-pick { position: relative; }
.ff-pick__input { padding-right: 3.2rem !important; }
.ff-pick__btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--pk-red, var(--red)); cursor: pointer; display: grid; place-items: center; }
.ff-pick__btn svg { width: 22px; height: 22px; }
.ff-pick__btn:hover, .ff-pick__btn[aria-expanded="true"] { background: #ffe5e5; }
.ff-pop { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: min(21rem, calc(100vw - 2.5rem)); background: #fff; border: 1px solid #e4e4e4; border-radius: 18px; box-shadow: 0 18px 44px rgba(0,0,0,.2); padding: 14px; animation: ffpop .14s ease-out; }
.ff-pop[hidden] { display: none; }
@keyframes ffpop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.ff-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.ff-cal__title { font-weight: 900; font-size: 1.25rem; line-height: 1; text-transform: uppercase; }
.ff-cal__nav { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f3f3f3; font-size: 1.5rem; line-height: 1; cursor: pointer; flex: none; }
.ff-cal__nav:hover:not([disabled]) { background: var(--pk-red, var(--red)); color: #fff; }
.ff-cal__nav[disabled] { opacity: .3; cursor: default; }
.ff-cal__sel { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; font-weight: 700; font-size: 1.05rem; padding: .5em 1.9em .5em .8em; border: 2px solid #e1e1e1; border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8em center / .7em; cursor: pointer; }
.ff-cal__sel:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
.ff-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.ff-cal__grid b { font-weight: 700; font-size: .8rem; line-height: 2; color: #888; text-transform: uppercase; }
.ff-cal__day { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; font-weight: 700; font-size: 1rem; color: var(--pk-ink, var(--ink)); cursor: pointer; }
.ff-cal__day:hover:not([disabled]) { background: #ffe5e5; }
.ff-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--pk-red, var(--red)); }
.ff-cal__day.is-sel { background: var(--pk-red, var(--red)); color: #fff; }
.ff-cal__day[disabled] { color: #c8c8c8; cursor: default; }
.ff-cal__foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee; }
.ff-cal__link { border: 0; background: none; color: var(--pk-red, var(--red)); font-weight: 700; font-size: 1rem; cursor: pointer; padding: .3em .2em; }
.ff-time { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ff-time > div > span { display: block; font-weight: 700; font-size: .8rem; line-height: 2; color: #888; text-transform: uppercase; text-align: center; }
.ff-time__col { display: grid; gap: 4px; max-height: 14rem; overflow-y: auto; padding-right: 2px; position: relative; }
.ff-time__col--min { max-height: none; }
.ff-time__col button { border: 0; border-radius: 10px; background: #f6f6f6; font-weight: 700; font-size: 1.1rem; padding: .5em; cursor: pointer; }
.ff-time__col button:hover { background: #ffe5e5; }
.ff-time__col button.is-sel { background: var(--pk-red, var(--red)); color: #fff; }