/* ==========================================================================
   Terminbuchung – ergänzt styles.css und verwendet ausschließlich
   deren Design-Tokens, damit die Optik der Website unverändert bleibt.
   ========================================================================== */

.booking-layout{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start;
}

/* ---------- Schritte ---------- */
.step-block{
  background:var(--cream);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.5rem,3vw,2.2rem);margin-bottom:1.4rem;
}
.step-block[data-state="done"]{background:var(--sand)}
.step-block[data-state="locked"]{opacity:.55}

.step-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.step-num{
  font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600;
  width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--teal);color:var(--gold-soft);
}
.step-block[data-state="locked"] .step-num{background:var(--line);color:var(--ink-soft)}
.step-head h2{font-size:1.5rem;color:var(--teal);margin:0;line-height:1.2}
.step-head .step-sub{font-size:.8rem;color:var(--ink-soft);display:block;margin-top:.1rem;font-family:'Jost',sans-serif}
.step-change{
  margin-left:auto;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);border-bottom:1px solid currentColor;padding-bottom:1px;
}
.step-change:hover{color:var(--teal)}

/* ---------- Anwendung wählen ---------- */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.pick-card{
  background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s;
}
.pick-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);background:var(--cream)}
.pick-card .icon{width:34px;height:34px;color:var(--teal)}
.pick-card h3{font-size:1.3rem;color:var(--teal);margin:.5rem 0 .3rem}
.pick-card p{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem;line-height:1.5}
.variant-list{display:flex;flex-direction:column;gap:.4rem}
.variant-chip{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;width:100%;
  background:var(--cream);border:1px solid var(--line);border-radius:100px;
  padding:.62em 1.1em;font-size:.85rem;color:var(--ink);cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:300;min-height:44px;
  transition:background .3s,border-color .3s,transform .4s var(--ease);
}
.variant-chip:hover{background:var(--teal);border-color:var(--teal);color:var(--cream);transform:translateX(3px)}
.variant-chip .amt{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;color:var(--terra)}
.variant-chip:hover .amt{color:var(--gold-soft)}
.variant-chip.partner .dur{color:var(--gold-ink)}
.variant-chip.partner:hover .dur{color:var(--gold-soft)}
.variant-chip[aria-current="true"]{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.variant-chip[aria-current="true"] .amt,.variant-chip[aria-current="true"] .dur{color:var(--gold-soft)}

/* ---------- Datum ---------- */
.day-strip{
  display:flex;gap:.55rem;overflow-x:auto;padding-bottom:.7rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.day-strip::-webkit-scrollbar{height:5px}
.day-strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px}
.day-btn{
  flex:none;scroll-snap-align:start;min-width:66px;padding:.7rem .4rem;
  background:var(--sand);border:1px solid var(--line);border-radius:14px;
  text-align:center;cursor:pointer;font-family:'Jost',sans-serif;
  transition:background .3s,border-color .3s,transform .4s var(--ease);
}
.day-btn:hover:not(:disabled){transform:translateY(-3px);background:var(--cream);border-color:var(--gold)}
.day-btn .dow{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.day-btn .dnum{display:block;font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--teal);line-height:1.1}
.day-btn .dmon{display:block;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.day-btn[aria-current="true"]{background:var(--teal);border-color:var(--teal)}
.day-btn[aria-current="true"] .dow,.day-btn[aria-current="true"] .dmon{color:rgba(250,246,239,.75)}
.day-btn[aria-current="true"] .dnum{color:var(--gold-soft)}
.day-btn:disabled{opacity:.34;cursor:not-allowed}
.day-btn:disabled .dnum{text-decoration:line-through}

/* ---------- Uhrzeit ---------- */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.55rem;margin-top:1.4rem}
/* Label + verstecktes Radio: funktioniert auch ohne JavaScript */
.slot-btn{
  position:relative;display:grid;place-items:center;
  background:var(--sand);border:1px solid var(--line);border-radius:100px;
  padding:.7em .4em;font-size:.92rem;color:var(--teal);cursor:pointer;text-align:center;
  font-family:'Jost',sans-serif;min-height:44px;
  transition:background .3s,border-color .3s,color .3s,transform .4s var(--ease);
}
.slot-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.slot-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--teal-deep);transform:translateY(-2px)}
.slot-btn:has(input:checked){background:var(--teal);border-color:var(--teal);color:var(--gold-soft);font-weight:500}
.slot-btn:has(input:focus-visible){outline:2px solid var(--gold-ink);outline-offset:3px}
.slot-empty{
  background:var(--sand);border:1px dashed var(--line);border-radius:14px;
  padding:1.6rem;text-align:center;color:var(--ink-soft);font-size:.9rem;margin-top:1.4rem;
}

/* ---------- Formular ---------- */
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);font-weight:500;
}
.field .hint{font-size:.78rem;color:var(--ink-soft)}
.field input,.field textarea{
  font-family:'Jost',sans-serif;font-size:1rem;font-weight:300;color:var(--ink);
  background:var(--cream);border:1px solid rgba(44,38,32,.28);border-radius:12px;
  padding:.85em 1em;width:100%;transition:border-color .3s,box-shadow .3s;
}
.field input::placeholder,.field textarea::placeholder{color:#7a7166}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,74,69,.14);
}
.field textarea{resize:vertical;min-height:96px;line-height:1.6}
.field .err{font-size:.82rem;color:#a3341c;font-weight:400}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#a3341c}

.check{display:flex;gap:.75rem;align-items:flex-start;margin:1.4rem 0}
.check input{
  width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--teal);cursor:pointer;
}
.check label{
  font-size:.88rem;color:var(--ink-soft);text-transform:none;letter-spacing:0;
  font-weight:300;line-height:1.55;cursor:pointer;
}
.check a{color:var(--terra);text-decoration:underline;text-underline-offset:3px}
.check a:hover{color:var(--teal)}

/* Honeypot: nur für Bots sichtbar */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Zusammenfassung ---------- */
.summary{
  background:var(--teal);color:var(--cream);border-radius:22px;
  padding:clamp(1.5rem,3vw,2.1rem);position:sticky;top:100px;
  box-shadow:var(--shadow);overflow:hidden;
}
.summary::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 90% 0%,rgba(195,154,90,.26),transparent 55%);
  pointer-events:none;
}
.summary>*{position:relative}
.summary h2{font-size:1.5rem;color:var(--gold-soft);margin-bottom:1.2rem}
.sum-row{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.75rem 0;border-bottom:1px solid rgba(250,246,239,.14);font-size:.92rem;
}
.sum-row:last-of-type{border-bottom:0}
.sum-row .k{color:rgba(250,246,239,.68);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.sum-row .v{text-align:right;color:var(--cream)}
.sum-row .v.big{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--gold-soft);font-weight:600}
.sum-empty{color:rgba(250,246,239,.7);font-size:.9rem;line-height:1.6}
.summary .btn{width:100%;justify-content:center;margin-top:1.4rem}
.summary .btn[disabled]{opacity:.4;pointer-events:none}
.sum-note{margin-top:1.1rem;font-size:.78rem;color:rgba(250,246,239,.6);line-height:1.55}

/* ---------- Meldungen ---------- */
.alert{border-radius:14px;padding:1rem 1.2rem;font-size:.9rem;margin-bottom:1.4rem;line-height:1.55}
.alert-error{background:rgba(163,52,28,.09);border:1px solid rgba(163,52,28,.4);color:#8d2c17}
.alert-error ul{margin:.4rem 0 0;padding-left:1.1rem}
.alert-info{background:rgba(195,154,90,.12);border:1px solid rgba(195,154,90,.4);color:var(--gold-ink)}

/* ---------- Bestätigung ---------- */
.confirm-card{
  background:var(--cream);border:1px solid var(--line);border-radius:22px;
  padding:clamp(1.8rem,4vw,3rem);max-width:620px;margin-inline:auto;text-align:center;
  box-shadow:var(--shadow);
}
.confirm-mark{
  width:66px;height:66px;border-radius:50%;background:var(--teal);color:var(--gold-soft);
  display:grid;place-items:center;margin:0 auto 1.4rem;
}
.confirm-mark svg{width:32px;height:32px}
.confirm-card h1{font-size:clamp(1.9rem,4vw,2.6rem);color:var(--teal);margin-bottom:.7rem}
.confirm-card>p{color:var(--ink-soft);margin-bottom:1.8rem}
.confirm-rows{text-align:left;background:var(--sand);border-radius:16px;padding:1.4rem 1.6rem;margin-bottom:1.8rem}
.confirm-rows .sum-row{border-color:var(--line)}
.confirm-rows .sum-row .k{color:var(--gold-ink)}
.confirm-rows .sum-row .v{color:var(--ink)}
.confirm-rows .sum-row .v.big{color:var(--terra)}
.confirm-ref{
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--teal);
  letter-spacing:.06em;
}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .booking-layout{grid-template-columns:1fr}
  .summary{position:static;order:-1}
}
@media(max-width:560px){
  .field-row{grid-template-columns:1fr}
  .pick-grid{grid-template-columns:1fr}
  .slot-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .pick-card,.variant-chip,.day-btn,.slot-btn{transition:none}
  .pick-card:hover,.variant-chip:hover,.day-btn:hover,.slot-btn:hover{transform:none}
}