/* Blatt für die Terminvergabe. Baut auf satz.css auf. */

.buchung {
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--rand) 0;
}

.buchung-hinweis {
    margin-top: 2rem;
    font-size: .92rem;
    color: var(--stein);
}

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

.schritte {
    list-style: none;
    display: flex;
    gap: .5rem;
    margin: 2.2rem 0 0;
    padding: 0;
    border-bottom: 1px solid var(--druck);
}

.schritte li {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .6rem .2rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--stein);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.schritte li span {
    font-family: var(--schrift-display);
    font-size: 1.25rem;
    line-height: 1;
}

.schritte li.aktiv { color: var(--druck); border-bottom-color: var(--kupfer); }
.schritte li.aktiv span { color: var(--kupfer); }
.schritte li.fertig { color: var(--druck); cursor: pointer; }
.schritte li.fertig span { color: var(--tanne); }
.schritte li.fertig:hover { color: var(--kupfer); }

/* ---- Tafel (Inhalt je Schritt) --------------------------------------- */

.tafel { min-height: 340px; padding-top: 1.8rem; }

.tafel .blatt { animation: blatt-auf .4s cubic-bezier(.25, 1, .3, 1) both; }

@keyframes blatt-auf {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.tafel-frage {
    font-family: var(--schrift-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin: 0 0 1.2rem;
}

/* Rubrik-Reiter in Schritt 1 */
.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem;
    margin-bottom: 1.4rem;
}

.reiter button {
    appearance: none;
    background: none;
    border: 0;
    padding: .35rem 0;
    font: inherit;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--stein);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.reiter button:hover { color: var(--kupfer); }
.reiter button.aktiv { color: var(--druck); border-bottom-color: var(--kupfer); }

/* Auswahllisten (Leistungen, Team) */
.wahl-liste { display: grid; gap: 0; }

.wahl {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 1px dotted rgba(20, 20, 20, .3);
    padding: .85rem .4rem;
    font: inherit;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-align: left;
    cursor: pointer;
    transition: background .2s, padding-left .2s;
}

.wahl:hover { background: var(--blatt); padding-left: .8rem; }

.wahl .wahl-name { font-size: 1rem; }
.wahl .wahl-name small { display: block; font-size: .74rem; color: var(--stein); margin-top: .1rem; }
.wahl .wahl-wert { font-weight: 500; white-space: nowrap; }

/* Tage und Uhrzeiten in Schritt 3 */
.tage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: .6rem;
    margin-bottom: 1.6rem;
}

.tag {
    appearance: none;
    font: inherit;
    background: none;
    border: 1px solid var(--druck);
    padding: .6rem .4rem;
    text-align: center;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.tag:hover:not(:disabled) { background: var(--blatt); }
.tag.aktiv { background: var(--druck); color: var(--papier); }
.tag:disabled { border-color: rgba(20, 20, 20, .2); color: var(--stein); cursor: not-allowed; }

.tag strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }
.tag span { font-size: .85rem; }
.tag small { display: block; font-size: .66rem; color: inherit; opacity: .7; }

.zeiten-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: .5rem;
}

.zeit {
    appearance: none;
    font: inherit;
    font-size: .92rem;
    background: none;
    border: 1px solid var(--druck);
    padding: .5rem .3rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.zeit:hover:not(:disabled) { background: var(--kupfer); border-color: var(--kupfer); color: var(--papier); }
.zeit:disabled { border-color: rgba(20, 20, 20, .15); color: rgba(20, 20, 20, .3); text-decoration: line-through; cursor: not-allowed; }

.zeiten-legende { margin-top: 1rem; font-size: .78rem; color: var(--stein); }

/* Schritt 4: Zusammenfassung + Formular */
.zusammenfassung {
    background: var(--blatt);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.6rem;
}

.zusammenfassung dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1.4rem;
}

.zusammenfassung dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--stein);
    align-self: baseline;
}

.zusammenfassung dd { margin: 0; }

.anfrage-form .knopf { width: 100%; margin-top: .4rem; }

/* Bestätigung */
.bestaetigung { text-align: center; padding: 2rem 0; }

.bestaetigung svg { width: 64px; height: 64px; margin-bottom: 1.2rem; }

.bestaetigung h2 {
    font-family: var(--schrift-display);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: .8rem;
}

.bestaetigung p { max-width: 30rem; margin: 0 auto .6rem; }

.bestaetigung .zusammenfassung {
    text-align: left;
    max-width: 26rem;
    margin: 1.6rem auto;
}

.bestaetigung .knopf { margin-top: .8rem; }

/* Zurück-Zeile unter jedem Schritt */
.tafel-nav { margin-top: 1.8rem; }

.zurueck {
    appearance: none;
    background: none;
    border: 0;
    font: inherit;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--stein);
    cursor: pointer;
    padding: .3rem 0;
}

.zurueck::before { content: '← '; }
.zurueck:hover { color: var(--kupfer); }

@media (max-width: 560px) {
    .schritte li { font-size: 0; gap: 0; }
    .schritte li span { font-size: 1.25rem; }
    .schritte li.aktiv { font-size: .72rem; gap: .45rem; }
}