/*  Buchungsdialog "Kostenloses Erstgespraech"
 *  Farben und Schriften stammen aus den Theme-Variablen in style.css,
 *  die Fallbacks halten den Dialog auch ohne diese Datei intakt.
 *  Praefix sb- = "sehnsucht booking".
 */

.sb-modal {
   --sb-primary: var(--theme-color1, #781f2f);
   --sb-accent:  var(--theme-color6, #FFAA18);
   --sb-cream:   var(--theme-color5, #f9f6f1);
   --sb-sand:    #f5f2e6;
   --sb-ink:     var(--headings-color, #1C1A1D);
   --sb-text:    var(--text-color, #707070);
   --sb-line:    #e7e1d8;
   --sb-title-font: var(--title-font, "Cormorant"), Georgia, serif;
   --sb-text-font:  var(--text-font, "Plus Jakarta Sans"), system-ui, sans-serif;
   --sb-style-font: var(--style-font, "Alex Brush"), cursive;

   position: fixed;
   inset: 0;
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   font-family: var(--sb-text-font);
   color: var(--sb-text);
}
.sb-modal[hidden] { display: none; }

.sb-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(28, 26, 29, .55);
   backdrop-filter: blur(3px);
   animation: sb-fade .25s ease;
}

.sb-dialog {
   position: relative;
   width: 100%;
   max-width: 880px;
   max-height: calc(100vh - 40px);
   overflow-y: auto;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0 30px 80px rgba(28, 26, 29, .3);
   animation: sb-rise .3s cubic-bezier(.2, .8, .3, 1);
}

@keyframes sb-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sb-rise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
   .sb-backdrop, .sb-dialog { animation: none; }
}

/* ---------------------------------------------------------------- Kopf */

.sb-head {
   padding: 40px 44px 28px;
   background: var(--sb-cream);
   border-bottom: 1px solid var(--sb-line);
   text-align: center;
}
.sb-eyebrow {
   display: block;
   font-family: var(--sb-style-font);
   font-size: 30px;
   line-height: 1;
   color: var(--sb-primary);
   margin-bottom: 10px;
}
.sb-title {
   font-family: var(--sb-title-font);
   font-weight: 500;
   font-size: 34px;
   line-height: 1.2;
   color: var(--sb-ink);
   margin: 0 0 12px;
}
.sb-lead {
   margin: 0 auto;
   max-width: 46ch;
   font-size: 15px;
   line-height: 1.75;
}
.sb-close {
   position: absolute;
   top: 14px;
   right: 16px;
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: var(--sb-ink);
   font-size: 26px;
   line-height: 1;
   cursor: pointer;
   transition: background .2s, transform .2s;
}
.sb-close:hover { background: rgba(28, 26, 29, .07); transform: rotate(90deg); }
.sb-close:focus-visible { outline: 2px solid var(--sb-primary); outline-offset: 2px; }

/* ------------------------------------------------------------- Schritte */

.sb-body { padding: 32px 44px 44px; }
.sb-step[hidden] { display: none; }

.sb-steps {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-bottom: 28px;
   font-size: 12px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #b3aca3;
}
.sb-steps span { display: flex; align-items: center; gap: 10px; }
.sb-steps span::after { content: ""; width: 24px; height: 1px; background: var(--sb-line); }
.sb-steps span:last-child::after { display: none; }
.sb-steps .is-active { color: var(--sb-primary); font-weight: 600; }

/* ------------------------------------------------------------- Kalender */

.sb-pick { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; }

.sb-cal-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
}
.sb-month {
   font-family: var(--sb-title-font);
   font-size: 22px;
   font-weight: 500;
   color: var(--sb-ink);
}
.sb-nav { display: flex; gap: 6px; }
.sb-nav button {
   width: 34px; height: 34px;
   border: 1px solid var(--sb-line);
   background: #fff;
   border-radius: 50%;
   cursor: pointer;
   color: var(--sb-ink);
   font-size: 15px;
   line-height: 1;
   transition: all .2s;
}
.sb-nav button:hover:not(:disabled) { border-color: var(--sb-primary); color: var(--sb-primary); }
.sb-nav button:disabled { opacity: .3; cursor: default; }

.sb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sb-dow {
   text-align: center;
   font-size: 11px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #b3aca3;
   padding-bottom: 8px;
}
.sb-day {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid transparent;
   border-radius: 50%;
   background: transparent;
   font: inherit;
   font-size: 14px;
   color: #cfc9c1;
   cursor: default;
   transition: all .18s;
}
.sb-day.is-free {
   color: var(--sb-ink);
   background: var(--sb-sand);
   cursor: pointer;
}
.sb-day.is-free:hover { background: var(--sb-primary); color: #fff; }
.sb-day.is-selected { background: var(--sb-primary); color: #fff; font-weight: 600; }
.sb-day:focus-visible { outline: 2px solid var(--sb-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- Zeiten */

.sb-times-title {
   font-family: var(--sb-title-font);
   font-size: 20px;
   font-weight: 500;
   color: var(--sb-ink);
   margin: 0 0 4px;
}
.sb-times-sub { font-size: 13px; margin: 0 0 18px; color: #a09890; }
.sb-times { display: flex; flex-direction: column; gap: 10px; }
.sb-time {
   width: 100%;
   padding: 14px 18px;
   border: 1px solid var(--sb-line);
   background: #fff;
   border-radius: 2px;
   font: inherit;
   font-size: 15px;
   color: var(--sb-ink);
   cursor: pointer;
   letter-spacing: .04em;
   transition: all .18s;
}
.sb-time:hover { border-color: var(--sb-primary); color: var(--sb-primary); }
.sb-time.is-selected { background: var(--sb-primary); border-color: var(--sb-primary); color: #fff; }
.sb-time:disabled { opacity: .35; cursor: default; text-decoration: line-through; }
.sb-time:focus-visible { outline: 2px solid var(--sb-primary); outline-offset: 2px; }
.sb-hint { font-size: 13px; color: #a09890; line-height: 1.7; }

/* --------------------------------------------------------------- Formular */

.sb-summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   background: var(--sb-sand);
   padding: 16px 20px;
   border-radius: 2px;
   margin-bottom: 26px;
}
.sb-summary strong { color: var(--sb-ink); font-weight: 600; }
.sb-change {
   background: none;
   border: 0;
   color: var(--sb-primary);
   text-decoration: underline;
   cursor: pointer;
   font: inherit;
   font-size: 14px;
   padding: 0;
}

.sb-field { margin-bottom: 18px; }
.sb-field label {
   display: block;
   font-size: 13px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--sb-ink);
   margin-bottom: 7px;
}
.sb-field input[type=text],
.sb-field input[type=email],
.sb-field textarea {
   width: 100%;
   padding: 13px 16px;
   border: 1px solid var(--sb-line);
   border-radius: 2px;
   background: #fff;
   font: inherit;
   font-size: 15px;
   color: var(--sb-ink);
   transition: border-color .2s;
}
.sb-field input:focus,
.sb-field textarea:focus { outline: none; border-color: var(--sb-primary); }
.sb-field textarea { resize: vertical; min-height: 92px; line-height: 1.7; }
.sb-field.has-error input,
.sb-field.has-error textarea { border-color: var(--sb-primary); background: #fdf7f8; }
.sb-error { display: block; color: var(--sb-primary); font-size: 13px; margin-top: 6px; }

.sb-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.65; }
.sb-consent input { margin-top: 3px; accent-color: var(--sb-primary); width: 16px; height: 16px; flex: none; }
.sb-consent a { color: var(--sb-primary); text-decoration: underline; }

.sb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sb-actions { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.sb-submit {
   background: var(--sb-primary);
   color: #fff;
   border: 0;
   padding: 15px 38px;
   border-radius: 2px;
   font: inherit;
   font-size: 13px;
   letter-spacing: .1em;
   text-transform: uppercase;
   cursor: pointer;
   transition: opacity .2s;
}
.sb-submit:hover:not(:disabled) { opacity: .88; }
.sb-submit:disabled { opacity: .5; cursor: default; }
.sb-back {
   background: none;
   border: 0;
   color: var(--sb-text);
   text-decoration: underline;
   cursor: pointer;
   font: inherit;
   font-size: 14px;
}
.sb-formerror {
   background: #fdf1f3;
   color: var(--sb-primary);
   padding: 13px 16px;
   border-radius: 2px;
   font-size: 14px;
   margin-bottom: 18px;
   line-height: 1.6;
}

/* ---------------------------------------------------------------- Erfolg */

.sb-done { text-align: center; padding: 8px 0 4px; }
.sb-check {
   width: 62px; height: 62px;
   margin: 0 auto 22px;
   border-radius: 50%;
   background: var(--sb-sand);
   color: var(--sb-primary);
   display: flex; align-items: center; justify-content: center;
   font-size: 30px;
}
.sb-done h3 {
   font-family: var(--sb-title-font);
   font-weight: 500;
   font-size: 28px;
   color: var(--sb-ink);
   margin: 0 0 12px;
}
.sb-when {
   font-size: 17px;
   color: var(--sb-ink);
   background: var(--sb-sand);
   padding: 15px 22px;
   border-radius: 2px;
   display: inline-block;
   margin: 6px 0 22px;
}
.sb-done p { line-height: 1.8; margin: 0 auto 20px; max-width: 46ch; font-size: 14.5px; }
.sb-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.sb-btn {
   display: inline-block;
   padding: 14px 30px;
   border-radius: 2px;
   font-size: 13px;
   letter-spacing: .1em;
   text-transform: uppercase;
   text-decoration: none;
   cursor: pointer;
   border: 1px solid var(--sb-primary);
   transition: opacity .2s;
}
.sb-btn-primary { background: var(--sb-primary); color: #fff; }
.sb-btn-ghost { background: #fff; color: var(--sb-primary); }
.sb-btn:hover { opacity: .85; }
.sb-smallprint { font-size: 12.5px; color: #a09890; line-height: 1.7; }

/* --------------------------------------------------------------- Zustaende */

.sb-loading, .sb-empty { text-align: center; padding: 50px 20px; color: #a09890; font-size: 14.5px; }
.sb-spinner {
   width: 26px; height: 26px;
   margin: 0 auto 14px;
   border: 2px solid var(--sb-line);
   border-top-color: var(--sb-primary);
   border-radius: 50%;
   animation: sb-spin .8s linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg) } }

/* ------------------------------------------------------------------ Mobil */

@media (max-width: 720px) {
   .sb-modal { padding: 0; }
   .sb-dialog { max-height: 100vh; height: 100%; border-radius: 0; }
   .sb-head { padding: 34px 22px 22px; }
   .sb-title { font-size: 27px; }
   .sb-eyebrow { font-size: 25px; }
   .sb-body { padding: 24px 22px 40px; }
   .sb-pick { grid-template-columns: 1fr; gap: 28px; }
   .sb-steps { font-size: 11px; gap: 6px; }
   .sb-steps span::after { width: 14px; }
}