/* ============================================================================
   KRANZ — Inner pages (Leistungen, Projekte, Atelier, Legal, Kontakt)
   ============================================================================ */

/* ---------- Page hero (clears fixed nav) ---------- */
.phero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5.5rem));
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    background: var(--noir); color: var(--bone); overflow: hidden;
}
.phero.tone-light { background: var(--bone); color: var(--ink); }
.phero__media { position: absolute; inset: 0; z-index: 0; opacity: .42; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(14,13,12,.6), rgba(14,13,12,.85)); pointer-events: none; }
.phero.tone-light::after { display: none; }
.phero__inner { position: relative; z-index: 2; }
.phero__crumbs { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: var(--s5); display: flex; gap: .6rem; flex-wrap: wrap; }
.phero.tone-light .phero__crumbs { color: var(--brass-deep); }
.phero__crumbs a:hover { color: var(--bone); }
.phero.tone-light .phero__crumbs a:hover { color: var(--ink); }
.phero__title { font-family: var(--serif); font-weight: 500; font-size: var(--t-h1); line-height: 1; letter-spacing: -.015em; max-width: 18ch; }
.phero__title em { font-style: italic; color: var(--brass-soft); }
.phero.tone-light .phero__title em { color: var(--brass-deep); }
.phero__sub { margin-top: var(--s5); max-width: 56ch; font-size: var(--t-lead); font-weight: 300; color: var(--muted-dark); }
.phero.tone-light .phero__sub { color: var(--text-soft); }

/* ---------- Prose / legal ---------- */
.prose { max-width: 75ch; color: var(--text-soft); font-size: 1.02rem; line-height: 1.7; }
.prose h2 { font-family: var(--serif); font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 500; color: var(--ink); margin: var(--s8) 0 var(--s4); letter-spacing: -.01em; }
.prose h3 { font-family: var(--sans); font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: var(--s6) 0 var(--s3); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--s4); }
.prose ul { margin: var(--s4) 0; padding-left: 0; }
.prose li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
.prose li::before { content: "—"; position: absolute; left: 0; color: var(--brass-deep); }
.prose a { color: var(--brass-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .lead-block { font-family: var(--serif); font-size: clamp(1.3rem,2.5vw,1.8rem); line-height: 1.35; color: var(--ink); font-weight: 500; margin-bottom: var(--s6); }
.legal-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* contact card aside in legal */
.legal-grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem,5vw,5rem); align-items: start; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } }
.legal-card { background: var(--surface); border: 1px solid var(--line); padding: var(--s6); position: sticky; top: calc(var(--nav-h) + 1rem); }
.legal-card h4 { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: var(--s4); }
.legal-card p, .legal-card a { font-size: .9rem; color: var(--text-soft); display: block; padding: .15rem 0; }
.legal-card a:hover { color: var(--brass-deep); }

/* ---------- Leistungen detail ---------- */
.ldetail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; padding-block: var(--section); border-top: 1px solid var(--line); scroll-margin-top: var(--nav-h); }
.ldetail:nth-child(even) .ldetail__media { order: 2; }
@media (max-width: 880px) { .ldetail { grid-template-columns: 1fr; gap: 2rem; } .ldetail:nth-child(even) .ldetail__media { order: 0; } }
.ldetail__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.ldetail__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ldetail:hover .ldetail__media img { transform: scale(1.04); }
.ldetail__n { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; color: var(--brass-deep); }
.ldetail__t { font-family: var(--serif); font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 500; line-height: 1.05; margin: var(--s3) 0 var(--s4); letter-spacing: -.01em; }
.ldetail__claim { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--brass-deep); margin-bottom: var(--s4); }
.ldetail__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s5); }
.ldetail__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem; }

/* ---------- Contact form ---------- */
.cform { display: grid; gap: var(--s5); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 640px) { .cform__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
    font-family: var(--sans); font-size: 1rem; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: .95rem 1.1rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
    width: 100%;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-glow);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.kmsg { padding: 1rem 1.25rem; border-radius: var(--r-sm); font-size: .92rem; margin-bottom: var(--s5); border-left: 3px solid; }
.kmsg.success { background: rgba(168,137,92,.1); border-color: var(--brass); color: var(--brass-deep); }
.kmsg.error { background: #FBEAE7; border-color: #C0563E; color: #9B3F2C; }

/* contact split */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }
.contact-info dl { display: grid; gap: var(--s5); }
.contact-info dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .3rem; }
.contact-info dd { font-size: 1.05rem; color: var(--text); }
.contact-info dd a:hover { color: var(--brass-deep); }

/* empty state (blog) */
.empty { text-align: center; padding-block: var(--s9); }
.empty__mark { font-family: var(--serif); font-size: clamp(3rem,8vw,6rem); color: var(--line); line-height: 1; }

/* ---------- Booking slots ---------- */
.slots { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 52px; align-content: flex-start; }
.slots-hint { font-size: .85rem; color: var(--muted); padding: .9rem 0; }
.slot {
    font-family: var(--mono); font-size: .82rem; letter-spacing: .04em;
    padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.slot:hover { border-color: var(--brass); }
.slot.is-sel { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.book .field select { appearance: none; background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }

/* Booking time picker: progressive enhancement. Without JS the native <select>
   fallback is shown; with JS the slot-buttons drive a hidden select. */
html:not(.js) #t-slots { display: none; }
html.js .book-time-fallback { display: none; }
.slot:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.slot.is-sel:hover { border-color: var(--ink); }

/* ============================================================================
   Premium booking wizard (.bookx) — 3 steps: Leistung · Termin · Kontakt.
   Progressive enhancement: with JS it's a stepped wizard with a custom calendar,
   service cards and a live summary; without JS the plain stacked form remains.
   ============================================================================ */
/* progress rail */
.bookx__rail { display: flex; align-items: center; gap: .55rem; margin-bottom: var(--s7); flex-wrap: wrap; }
.bookx__rail-i { display: flex; align-items: center; gap: .6rem; color: var(--muted);
    font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.bookx__rail-i:not(:last-child)::after { content: ""; width: clamp(18px, 5vw, 56px); height: 1px; background: var(--line); margin-left: .55rem; }
.bookx__rail-n { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line);
    display: grid; place-items: center; font-size: .8rem; transition: all var(--dur-fast) var(--ease); }
.bookx__rail-i.is-on { color: var(--text); }
.bookx__rail-i.is-on .bookx__rail-n { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.bookx__rail-i.is-done .bookx__rail-n { background: var(--brass); color: var(--noir); border-color: var(--brass); }
@media (max-width: 540px) { .bookx__rail-l { display: none; } }

/* step shells */
.bookx__sh { margin-bottom: var(--s6); }
.bookx__st { font-family: var(--serif); font-weight: 500; font-size: clamp(1.55rem, 1rem + 2.4vw, 2.5rem);
    line-height: 1.08; letter-spacing: -.012em; margin-top: .5rem; outline: none; max-width: 22ch; }
.bookx__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: var(--s7); }
.bookx__nav-sp { flex: 1; }
.bookx .btn:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.bookx__legal { font-size: .78rem; color: var(--muted); margin-top: var(--s4); max-width: 58ch; }
.bookx__legal a { color: var(--brass-deep); text-decoration: underline; }

/* service cards */
.svcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.svc { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left;
    padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); font-weight: 500; min-height: 60px;
    transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.svc:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.svc__tick { color: var(--brass-deep); opacity: 0; transform: scale(.5); transition: all var(--dur-fast) var(--ease); }
.svc.is-sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.svc.is-sel .svc__tick { opacity: 1; transform: scale(1); }

/* calendar + slots layout */
.bookx__pick { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 760px) { .bookx__pick { grid-template-columns: 1fr; } }

.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(1rem, 3vw, 1.5rem); box-shadow: var(--shadow-sm); }
.cal__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.cal__title { font-family: var(--serif); font-size: 1.3rem; letter-spacing: -.01em; }
.cal__nav { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
    display: grid; place-items: center; font-size: 1.25rem; line-height: 0; color: var(--text);
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cal__nav:hover:not(:disabled) { border-color: var(--brass); color: var(--brass-deep); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin-bottom: .35rem; }
.cal__dow span { text-align: center; font-family: var(--mono); font-size: .58rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); padding: .25rem 0; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal__day { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-md);
    font-size: .92rem; color: var(--text); border: 1px solid transparent; background: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cal__day--blank { visibility: hidden; }
.cal__day--off { color: var(--muted); opacity: .35; }
.cal__day--today { font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.cal__day--free { cursor: pointer; }
.cal__day--free:hover { background: var(--surface-2); border-color: var(--brass); }
.cal__day.is-sel { background: var(--ink); color: var(--bone); border-color: var(--ink); box-shadow: none; }
.cal__hint { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin-top: var(--s4); text-align: center; }

.bookx__times-h { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: var(--s4); font-weight: 400; }
.bookx__times .slots { gap: .55rem; }
.bookx__times .slot { padding: .8rem 1.05rem; }

/* step 3: live summary + fields */
.bookx__confirm { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 760px) { .bookx__confirm { grid-template-columns: 1fr; } }
.bookx__summary { background: var(--ink); color: var(--bone); border-radius: var(--r-lg);
    padding: clamp(1.4rem, 4vw, 2rem); position: sticky; top: calc(var(--nav-h) + 1rem); }
.bookx__summary-h { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--bone); margin-bottom: var(--s5); }
.bookx__summary dl { display: grid; }
.bookx__summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line-dark); }
.bookx__summary dt { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.bookx__summary dd { text-align: right; color: var(--bone); font-weight: 500; }
.bookx__edit { margin-top: var(--s5); color: var(--brass-soft); font-size: .8rem; }
.bookx__fields { display: grid; gap: var(--s5); }

/* progressive-enhancement gating */
html.js .bookx__nojs { display: none; }
html:not(.js) .bookx__rail,
html:not(.js) .bookx [data-next],
html:not(.js) .bookx [data-prev],
html:not(.js) .bookx__pick,
html:not(.js) .svcgrid,
html:not(.js) .bookx__summary,
html:not(.js) .bookx__edit,
html:not(.js) .bookx__jserr { display: none; }
html:not(.js) .bookx__confirm { grid-template-columns: 1fr; }
html:not(.js) .bookx__step + .bookx__step { margin-top: var(--s8); }
/* under JS only the active step shows (step 1 carries .is-active in markup → no flash) */
html.js .bookx__step { display: none; }
html.js .bookx__step.is-active { display: block; animation: bookxIn .5s var(--ease-out); }
@keyframes bookxIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .bookx__step.is-active { animation: none; } }