.buchung-wrap { padding: 80px 0; }
.buchung-inner { max-width: 920px; margin: 0 auto; padding: 0 32px; }
.buchung-card { background: white; border-radius: 24px; border: 1px solid #e2e8f0; padding: 56px; }

/* Rotating category-photo banner above the wizard card -- purely decorative, cycles
   through the same category banner photos used inside Step 2's detail view, crossfading
   from one to the next so the page doesn't read as empty before the customer starts
   interacting with the form. aspect-ratio (not a fixed height) matches the source
   photos' own native 1584x672 shape -- a fixed height forced object-fit:cover to crop
   much more aggressively than the photos were composed for, cutting off real content
   whenever the container was wider than that fixed height implied. */
.bk-hero-banner { position: relative; width: 100%; aspect-ratio: 1584 / 672; border-radius: 24px; overflow: hidden; margin-bottom: 28px; box-shadow: var(--cleany-shadow-card); }
.bk-hero-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.bk-hero-banner-img.active { opacity: 1; }

.bk-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.bk-step-dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; transition: background 0.2s; }
.bk-step-dot.active { background: #1e50a2; }
.bk-step-dot.done { background: #0284c7; }

.bk-step { display: none; }
.bk-step.active { display: block; }

.bk-title { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 28px; color: #0284c7; margin-bottom: 8px; }
.bk-sub { color: #64748b; font-size: 15px; margin-bottom: 28px; line-height: 1.6; }

/* Unified "capsule" search bar: the row itself is the pill, not just its input+button
   sitting side by side -- scoped to .bk-plz-row descendants so the shared .form-input
   class stays untouched everywhere else it's used (contact form, booking address step). */
.bk-plz-row { position: relative; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(30,80,162,0.15); border-radius: 9999px; padding: 6px 6px 6px 20px; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 8px 16px -4px rgba(27,46,94,0.08), inset 0px 1px 0px rgba(255,255,255,0.6); transition: all 0.3s ease; }
.bk-plz-row:focus-within { border-color: #3b82f6; box-shadow: 0px 0px 0px 4px rgba(59,130,246,0.15), 0px 1px 2px rgba(0,0,0,0.05); }
.bk-plz-row input { flex: 1; }
.bk-plz-row .form-input { border: none; background: transparent; box-shadow: none; padding: 10px 4px; }
.bk-plz-row .form-input:focus { border: none; }

/* Postal-code suggestion dropdown -- custom-built rather than a native <datalist>, which
   can't be restyled to match the page and shows every option immediately on focus
   regardless of how much has been typed (see bkFilterPlzSuggestions in buchung.js, which
   only populates/opens this once 2+ digits are typed). Same visual language as the
   time-slot picker's .bk-time-panel. */
.bk-plz-suggest { display: none; position: absolute; top: calc(100% + 8px); left: 20px; right: 6px; z-index: 40; background: white; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 28px rgba(10,25,47,0.14); max-height: 240px; overflow-y: auto; padding: 6px; }
.bk-plz-suggest.open { display: block; }
.bk-plz-suggest-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: none; background: none; border-radius: 8px; font-family: inherit; font-size: 14px; color: #1e293b; cursor: pointer; }
.bk-plz-suggest-option:hover { background: #f1f5fb; }
.bk-plz-suggest-plz { font-weight: 700; color: #0284c7; }
.bk-plz-suggest-district { font-size: 12px; color: #64748b; margin-left: 6px; }
.bk-plz-suggest-soon { flex-shrink: 0; font-size: 10px; font-weight: 700; color: #9a6a1a; background: #fdf3e0; border-radius: 9999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.02em; }

.bk-message { padding: 18px 20px; border-radius: 12px; font-size: 14px; line-height: 1.7; margin-top: 20px; }
.bk-message.ok { background: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; }
.bk-message.err { background: #f2dede; color: #a94442; border: 1px solid #ebccd1; }
/* Softer than .err -- for guidance like "not quite enough yet", not an actual failure. */
.bk-message.notice { background: #fdf3d8; color: #8a6d1d; border: 1px solid #f2e2ab; }

/* New-wizard-design trial (feature/new-wizard-design) -- tokens for the pieces of this
   file that adopt it, pulled from docs/brand/cleany24-style.css rather than re-deriving
   new hex values. Scoped to just what's actually used here, not the whole brand sheet. */
:root {
  --cleany-dark-panel: #11223d;
  --cleany-dark-panel-border: #1e3a5f;
  --cleany-blue-pale-text: #93c5fd;
  --cleany-blue-soft: #e0ecfb;
  --cleany-blue-soft-2: #c4ddf8;
  --cleany-shadow-card: 0px 1px 2px rgba(0,0,0,0.05), 0px 8px 16px -4px rgba(27,46,94,0.08);
}

/* Category grid (Step 2, landing view) -- one card per category, replacing the old
   horizontal tab strip. Clicking a card opens that category's detail view below. */
/* minmax(0, 1fr), not bare 1fr -- a bare `1fr` track's minimum width defaults to its
   content's min-content size, and a card's fixed 96px icon circle (plus padding) can
   need more room than an even split allows, which was silently growing the track (and
   the whole grid) past its container's width -- clipped/cut-off cards on mobile's
   narrower 2-column layout, not a real horizontal scrollbar, so it went unnoticed
   until an actual phone screenshot showed it. minmax(0, 1fr) forces every track to
   actually respect the equal split instead. */
.bk-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 8px; }
.bk-cat-card { border: 1px solid #e2e8f0; border-radius: 20px; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; cursor: pointer; background: white; transition: transform 0.15s, border-color 0.15s; }
.bk-cat-card:hover { transform: translateY(-3px); border-color: #1e50a2; }
/* The icon assets are already complete round graphics (a drawn circle + white
   background baked into the image itself) -- no extra gradient-circle chrome needed
   around them, just room to show them at real size. */
.bk-cat-icon-circle { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.bk-cat-icon-circle img { width: 100%; height: 100%; object-fit: contain; }
.bk-cat-name { font-weight: 800; font-size: 15px; color: #0284c7; }
.bk-cat-count-badge { font-size: 12px; padding: 5px 12px; }
.bk-cat-card-cart { font-size: 11px; font-weight: 700; color: #1e50a2; }

/* Category detail view (Step 2, after picking a category) */
.bk-cat-back { padding-left: 0; margin-bottom: 16px; font-weight: 600; }
.bk-cat-detail-title { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 24px; color: #0284c7; margin-bottom: 8px; }
.bk-cat-banner { width: 100%; height: 260px; margin-bottom: 20px; border-radius: 20px; overflow: hidden; box-shadow: var(--cleany-shadow-card); }
.bk-cat-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Top/right padding matches .bk-cat-pill-badge's negative offset (-6px each way) below --
   overflow-x:auto forces the vertical axis to clip too, so without this the badge's
   poking-out top edge (and a last-pill badge's right edge) get sliced off instead of
   scrolling into view. */
.bk-cat-pills { display: flex; gap: 10px; overflow-x: auto; padding: 10px 8px 6px 2px; margin-bottom: 24px; -webkit-overflow-scrolling: touch; }
.bk-cat-pill { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 9999px; border: 1px solid #e2e8f0; background: white; font-family: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; position: relative; }
.bk-cat-pill:hover { border-color: #1e50a2; }
/* Same reasoning as .bk-cat-icon-circle -- the icon assets are already complete round
   graphics, so no extra gradient-circle chrome, just show them bigger. */
.bk-cat-pill-icon { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.bk-cat-pill-icon img { width: 100%; height: 100%; object-fit: contain; }
.bk-cat-pill-badge { position: absolute; top: -6px; right: -6px; background: #1e50a2; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
/* The pill for whichever category's list is currently open -- it used to be left out
   of this row entirely, so there was nothing here marking where you are. Icon assets
   already carry their own white circular backing, so they stay legible on the blue
   fill without any extra styling. */
.bk-cat-pill.active { background: #1e50a2; border-color: #1e50a2; color: white; font-weight: 700; }
.bk-cat-pill.active .bk-cat-pill-badge { background: white; color: #1e50a2; }

/* Item rows (Step 2 detail view + search results) -- name/note/price + qty stepper,
   deliberately no per-item photo (the new design shows imagery at the category level
   only: the icon above and the banner in the detail view). */
.bk-item-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.bk-item-row { border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bk-item-row-body { flex: 1; min-width: 0; }
.bk-item-category { font-size: 11px; font-weight: 700; color: #1e50a2; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.bk-item-name { font-size: 15px; color: #1e293b; font-weight: 700; }
.bk-item-note { font-size: 12px; color: #94a3b8; margin-top: 1px; line-height: 1.3; }
.bk-item-price { font-size: 13px; color: #94a3b8; margin-top: 4px; }
.bk-qty { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bk-qty button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e2e8f0; background: white; font-size: 16px; cursor: pointer; line-height: 1; }
.bk-qty span { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; }

/* Sticky cart bar (Step 2) -- dark navy, tap the total to expand/collapse a per-line
   breakdown. Fixed to the bottom of the viewport so total + continue stay reachable
   without scrolling back down through a long category. */
.bk-total-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--cleany-dark-panel); box-shadow: 0 -8px 24px rgba(10,25,47,0.35); }
.bk-cart-summary { max-width: 920px; margin: 0 auto; max-height: 240px; overflow-y: auto; padding: 0 32px; border-bottom: 1px solid var(--cleany-dark-panel-border); }
.bk-cart-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cleany-dark-panel-border); }
.bk-cart-line:last-child { border-bottom: none; }
.bk-cart-line-name { color: white; font-size: 14px; font-weight: 600; }
.bk-cart-line-qty { opacity: 0.6; font-weight: 400; }
.bk-cart-line-cat { color: var(--cleany-blue-pale-text); font-size: 12px; margin-top: 2px; }
.bk-cart-line-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bk-cart-line-total { color: white; font-size: 14px; font-weight: 700; }
.bk-cart-line-remove { background: transparent; border: 1px solid var(--cleany-dark-panel-border); color: white; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 14px; cursor: pointer; }
.bk-cart-summary-empty { color: white; opacity: 0.7; font-size: 14px; padding: 16px 0; }
.bk-total-bar-inner { max-width: 920px; margin: 0 auto; padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.bk-total-bar-left { cursor: pointer; }
.bk-total-bar-row { display: flex; align-items: baseline; gap: 12px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 22px; color: white; }
.bk-cart-toggle-icon { font-size: 13px; font-weight: 600; color: var(--cleany-blue-pale-text); }
.bk-cart-progress { font-size: 11px; color: var(--cleany-blue-pale-text); margin-bottom: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.bk-cart-progress.ok { color: #86efac; font-weight: 600; }
/* Extra bottom padding on every step the persistent cart bar (position:fixed, now a
   sibling of these .bk-step divs -- see index.html) can appear over, so its own content
   -- including each step's own "Weiter" button -- never ends up hidden behind it. */
#bk-step-2, #bk-step-3, #bk-step-4 { padding-bottom: 110px; }
.bk-item-search { margin-bottom: 20px; }
/* #94a3b8 measured well under WCAG AA's 4.5:1 against the card's white background --
   confirmed by a live Lighthouse audit (color-contrast) against /buchung. #475569
   keeps this visibly de-emphasized relative to the page's real headings while
   actually passing, with real margin. */
.bk-step-label { text-align: center; font-size: 12px; color: #475569; margin-bottom: 30px; }

/* Step 3 layout: pickup (left) and return (right) side by side on wide screens, so
   changing the pickup date/time on the left and seeing its effect on the return side
   doesn't require scrolling back and forth -- stacks to one column on narrow screens
   (two ~7-column calendars don't fit side by side below ~860px). */
.bk-schedule-columns { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 860px) {
  .bk-schedule-columns { grid-template-columns: 1fr 1fr; }
}
.bk-schedule-col-title { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; font-size: 15px; color: #0284c7; margin-bottom: 12px; }

/* Calendar (Step 3) -- deliberately compact (smaller cells/padding than a standalone
   full-page calendar would use) since two of these plus their time pickers need to
   read comfortably as one step. */
.bk-calendar { border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; margin-bottom: 8px; }
.bk-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; font-size: 13px; color: #0284c7; }
.bk-cal-nav { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e2e8f0; background: white; cursor: pointer; font-size: 14px; line-height: 1; }
.bk-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.bk-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; margin-bottom: 6px; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 12px; cursor: pointer; border: 1.5px solid transparent; color: #1e293b; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.bk-cal-day.empty { visibility: hidden; }
.bk-cal-day.available { background: rgba(30,80,162,0.08); color: #0284c7; font-weight: 600; }
.bk-cal-day.available:hover { border-color: #1e50a2; }
.bk-cal-day.unavailable { color: #e2e8f0; cursor: not-allowed; }
.bk-cal-day.selected { background: #1e50a2; color: white; box-shadow: 0 0 0 3px rgba(30,80,162,0.25); }

/* Return date "tile" -- the return day is fixed (pickup + 7), so a small calendar-style
   card showing just that one day reads as the visual counterpart of the pickup
   calendar, without implying it's independently pickable the way pickup's is. */
.bk-return-date-tile { border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 14px; margin-bottom: 8px; text-align: center; background: rgba(30,80,162,0.04); }
.bk-return-date-weekday { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
.bk-return-date-num { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 28px; color: #0284c7; line-height: 1.3; }
.bk-return-date-month { font-size: 12px; color: #94a3b8; }

/* Openable, scrollable time picker: one tappable field (bk-time-trigger) that opens a
   scrollable dropdown (bk-time-panel) listing every slot, grouped by time-of-day --
   replaces a flat wall of 30 always-visible buttons with a single compact control. */
.bk-time-picker { position: relative; margin-top: 8px; }
.bk-time-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: white;
  font-size: 15px; color: #0284c7; cursor: pointer; text-align: left;
}
.bk-time-trigger:hover, .bk-time-trigger.open { border-color: #1e50a2; }
.bk-time-trigger-icon { font-size: 16px; opacity: 0.6; }
.bk-time-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(10,25,47,0.14); max-height: 280px; overflow-y: auto;
}
.bk-time-panel.open { display: block; }
.bk-time-panel-list { padding: 8px; }
.bk-time-group-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 10px 4px; }
.bk-time-option {
  display: block; width: 100%; text-align: left; padding: 11px 12px; border: none;
  background: none; border-radius: 8px; font-size: 14px; color: #1e293b; cursor: pointer;
}
.bk-time-option:hover:not(:disabled) { background: #f1f5fb; }
.bk-time-option.selected { background: rgba(30,80,162,0.1); color: #1e50a2; font-weight: 700; }
.bk-time-option:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.bk-time-suggested-tag { font-size: 10px; font-weight: 700; color: #1e50a2; background: rgba(30,80,162,0.1); border-radius: 9999px; padding: 2px 8px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.02em; }

.bk-return-note { font-size: 12px; color: #64748b; margin-top: 8px; }

.bk-summary-line { display: flex; justify-content: space-between; font-size: 14px; color: #64748b; padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
.bk-summary-total { display: flex; justify-content: space-between; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 20px; color: #0284c7; padding-top: 16px; margin-top: 8px; }

.bk-trust-lines { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.bk-trust-line { background: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; border-radius: 9999px; padding: 10px 18px; font-size: 13px; font-weight: 500; }

.bk-pay-choice { margin-top: 24px; }
.bk-freq-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; margin-bottom: 12px; }
.bk-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 24px; font-size: 14px; color: #1e293b; cursor: pointer; }

.bk-consent { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0; font-size: 13px; color: #64748b; line-height: 1.6; }
.bk-consent input { margin-top: 3px; }
.bk-consent a { color: #1e50a2; }

.bk-nav { display: flex; justify-content: space-between; margin-top: 32px; }

.bk-confirm { text-align: center; padding: 24px 0; }
.bk-confirm .checkmark { font-size: 48px; margin-bottom: 12px; color: #3c763d; }

.bk-confirm-box { background: #dff0d8; border: 1px solid #d6e9c6; border-radius: 16px; padding: 28px 32px; margin: 24px 0; text-align: left; }
.bk-confirm-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(60,118,61,0.15); font-size: 14px; color: #3c763d; }
.bk-confirm-row:last-child { border-bottom: none; }
.bk-confirm-row span:first-child { font-weight: 600; }
.bk-confirm-row.bk-confirm-total { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 18px; padding-top: 14px; }

.bk-confirm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

@media print {
  header, footer, .bk-steps, .bk-confirm-actions, #cc-banner { display: none !important; }
  body, .buchung-wrap { background: white !important; }
  .buchung-card { border: none !important; box-shadow: none !important; padding: 0 !important; }
}

@media (max-width: 640px) {
  .buchung-card { padding: 32px 24px; }
  /* .bk-plz-row is a "capsule" pill on desktop (border-radius: 9999px) sized for an
     input and button sitting SIDE BY SIDE -- switching only flex-direction to column
     left that same full pill shape wrapping input-above-button-below instead, which
     rendered as one giant oval with the actual (narrow, centered) input floating in a
     lot of dead space, not a normal-looking input box. Reshaping to a much less
     extreme radius plus align-items:stretch (so input/button both go full width) and
     resetting the input's row-oriented flex:1 (which otherwise sizes along the now-
     vertical main axis instead of the horizontal one) fixes the actual shape here. */
  .bk-plz-row {
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
    padding: 14px;
  }
  .bk-plz-row input { flex: none; }
  .bk-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-cat-banner { height: 180px; }
  .bk-cal-day { font-size: 12px; }
  .bk-confirm-box { padding: 20px; }
}