/* my.reesl.de/buchen – Direktbuchung im Look von reesl.de (BookingPanel, PriceSummary aus dem Design System). */
@import url("fonts.css");
@import url("colors.css");
@import url("typography.css");
@import url("spacing.css");
@import url("radius.css");
@import url("elevation.css");
@import url("motion.css");
@import url("base.css");

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
.icon{width:1.15em;height:1.15em;flex:none}
.wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(2rem,6vw,var(--section-y-tight))}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Kopf und Fuss */
.bh{position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--surface-page) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle);padding-top:env(safe-area-inset-top)}
.bh__in{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter);height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.bh__brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--text-strong)}
.bh__brand span{display:flex;flex-direction:column;line-height:1.1}
.bh__brand b{font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.25rem}
.bh__brand small{font-size:10px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent);font-weight:var(--weight-semibold)}
.bh__tel{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-strong);text-decoration:none;font-size:var(--text-sm);font-weight:var(--weight-medium)}
.bf{border-top:1px solid var(--border-subtle);background:var(--surface-sunken);font-size:var(--text-xs);color:var(--text-muted);padding-bottom:env(safe-area-inset-bottom)}
.bf__in{max-width:var(--content-max);margin:0 auto;padding:var(--space-6) var(--gutter);display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);justify-content:space-between}
.bf nav{display:flex;gap:var(--space-5);flex-wrap:wrap}
.bf a{color:var(--text-muted)}

/* Knoepfe wie auf reesl.de */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:44px;padding-inline:var(--space-5);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);line-height:1;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:var(--transition-control)}
.btn--lg{height:54px;padding-inline:var(--space-8);gap:var(--space-3);font-size:var(--text-base)}
.btn--full{display:flex;width:100%}
.btn--primary{background:var(--action-primary);color:var(--action-primary-text);box-shadow:var(--shadow-1)}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--action-primary-text)}
.btn--secondary{background:var(--action-secondary);color:var(--text-inverse)}
.btn--secondary:hover{background:var(--action-secondary-hover);color:var(--text-inverse)}
.btn--ghost{background:transparent;color:var(--text-body)}
.btn .icon{width:18px;height:18px}
.btn:disabled{opacity:.6;cursor:progress}
.eyebrow-rule{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-eyebrow);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.eyebrow-rule::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}

/* Buchungsseite */
.bp{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(2rem,5vw,4rem);align-items:start}
.bp > *{min-width:0}
.bp__aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:var(--space-4)}
.bp h1,.bp-msg h1,.bp-done h1{font-weight:var(--weight-display-light);font-size:var(--text-display);line-height:var(--text-display-lh);margin:var(--space-3) 0 var(--space-4)}
.lead{font-size:var(--text-lead);line-height:var(--text-lead-lh);color:var(--text-body);max-width:var(--measure-lead)}
.bp h2{font-size:var(--text-subtitle);margin:0 0 var(--space-5)}
.bp section{padding-top:var(--space-10)}
.bp-notice{display:flex;gap:var(--space-3);margin-top:var(--space-6);padding:var(--space-4);border-radius:var(--radius-sm);background:var(--state-alert-surface);color:var(--state-alert-text);font-size:var(--text-sm)}
.bp-trip{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);padding:var(--space-5);background:var(--surface-warm);border:1px solid var(--holz-200);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-body)}
.bp-trip span{display:inline-flex;align-items:center;gap:var(--space-2)}
.bp-trip .icon{width:16px;height:16px;color:var(--holz-700)}
.bp-trip a{margin-left:auto;font-weight:var(--weight-medium)}
.bp-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.bp-fields .full{grid-column:1 / -1}
.bp-field{display:flex;flex-direction:column;gap:var(--space-2)}
.bp-field > span{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-strong)}
.bp-field > span i{font-style:normal;color:var(--glut-600)}
.bp-field input,.bp-field textarea{font:inherit;font-size:var(--text-base);height:48px;padding:0 var(--space-4);color:var(--text-strong);background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);width:100%}
.bp-field textarea{height:auto;padding:var(--space-4);resize:vertical}
.bp-field input:focus,.bp-field textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.bp-field small{font-size:var(--text-xs);color:var(--text-muted)}
.bp-field.is-err input{border-color:var(--state-alert-text)}
.bp-err{color:var(--state-alert-text) !important;font-size:var(--text-xs)}
.bp-checks{display:flex;flex-direction:column;gap:var(--space-4)}
.bp-check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);color:var(--text-body);cursor:pointer}
.bp-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--tanne-700);flex:none}
.bp-check.is-err span{color:var(--state-alert-text)}
.bp-card{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
.bp-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md)}
.bk-title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.375rem;color:var(--text-strong);letter-spacing:var(--tracking-display)}
.bp-meta{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-body)}
.bp-meta span{display:flex;align-items:center;gap:var(--space-2)}
.bp-meta .icon{width:15px;height:15px;color:var(--holz-700)}
.bp-lock{display:flex;gap:var(--space-2);font-size:var(--text-xs);line-height:1.5;color:var(--text-muted)}
.bp-lock .icon{width:13px;height:13px;margin-top:2px}
.bp-pay{display:flex;flex-wrap:wrap;gap:6px}
.bp-pay span{font-size:11px;font-weight:var(--weight-semibold);padding:3px 8px;border-radius:6px;background:var(--surface-sunken);color:var(--text-body)}
.bp-msg{max-width:var(--content-narrow,720px)}
.bp-msg p{margin-top:var(--space-6)}
.bp-done{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.bp-done__text{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.bp-done__text h1{margin:0}
.bp-done__ok{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-pill);background:var(--state-ok-surface);color:var(--state-ok-text)}
.bp-done__ok.is-alert{background:var(--state-alert-surface);color:var(--state-alert-text)}
.bp-done__ok .icon{width:26px;height:26px}
.bp-done .bp-trip{flex-direction:column;align-items:flex-start}
.bp-done img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-photo,var(--radius-md))}
.bp-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Preisaufstellung, Storno, Bewertung (wie im Panel auf reesl.de) */
.bk-sum{display:flex;flex-direction:column;gap:var(--space-3)}
.bk-line{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-sm);color:var(--text-body)}
.bk-line span:first-child{display:flex;flex-direction:column}
.bk-line small{font-size:var(--text-xs);color:var(--text-muted)}
.bk-line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-line.is-credit span:last-child{color:var(--state-ok-text)}
.bk-total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4);margin-top:var(--space-1);border-top:1px solid var(--border-subtle)}
.bk-total span{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-strong)}
.bk-total strong{font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.75rem;line-height:1;color:var(--text-strong);font-variant-numeric:tabular-nums}
.bk-note{font-size:var(--text-xs);color:var(--text-muted)}
p.bk-note{margin-top:var(--space-4)}
.bk-tax{display:flex;gap:var(--space-3);align-items:flex-start;margin-top:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--state-info-surface);color:var(--state-info-text);border-radius:var(--radius-sm);font-size:var(--text-xs);line-height:1.45}
.bk-tax .icon{width:15px;height:15px;margin-top:1px}
.bk-cancel{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--surface-sunken);font-size:var(--text-sm);line-height:1.45;color:var(--text-body)}
.bk-cancel b{color:var(--text-strong);font-weight:var(--weight-semibold)}
.bk-rating{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--text-muted);background:var(--surface-raised)}
.bk-stars{font-family:var(--font-display);font-size:1.125rem;color:var(--text-strong);white-space:nowrap}

@media (max-width:900px){
  .bp,.bp-done{grid-template-columns:minmax(0,1fr)}
  .bp__aside{position:static}
}
@media (max-width:560px){
  .bp-fields{grid-template-columns:1fr}
  .bh__tel span{display:none}
}