/* ============================================================
   hw-configurator.css — v8
   Design: 1:1 handwertig.com | Keine Preise | Cards | NLP/NLS
   ============================================================ */

/* ── Basis ─────────────────────────────────────────────────── */
.hw-configurator-wrapper {
  margin: 0 auto;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 1rem; line-height: 1.7; color: #101112;
}
.hw-configurator { background: none; }
.hw-cfg-price-bar,.hw-cfg-price-hidden { display:none!important; }

/* ── Progress ─────────────────────────────────────────────── */
.hw-cfg-progress { height:8px; background:rgb(235,235,235); }
.hw-cfg-progress-bar { height:100%; background:var(--c-yellow, #e22278); transition:width .35s ease; }

/* ── Header ───────────────────────────────────────────────── */
.hw-cfg-header { padding:28px 0 16px; }
.hw-cfg-step-label { font-size:.7rem; color:var(--c-yellow, #e22278); font-weight:700; text-transform:uppercase; letter-spacing:.15em; margin-bottom:8px; font-family:'Montserrat',inherit; }
.hw-cfg-title { font-size:clamp(1.35rem, 2.5vw, 2rem); font-weight:700; color:#101112; margin:0 0 6px; line-height:1.3; letter-spacing:-.01em; text-transform:uppercase; }
.hw-cfg-subtitle { font-size:clamp(1.07rem, 1.5vw, 1.2rem); color:#666; margin:0; font-weight:400; line-height:1.4; }

/* ── Body ─────────────────────────────────────────────────── */
.hw-cfg-body { padding:28px 0; min-height:200px; }
.hw-cfg-optional { font-size:.75rem; color:#aaa; font-weight:400; margin-left:6px; text-transform:none; letter-spacing:0; }
.hw-cfg-section-title {
  display:block; font-size:1.2rem; font-weight:700; color:#101112; font-family:'Montserrat',inherit;
  margin:22px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--c-yellow, #e22278);
}

/* ── SCHRITT 1 — OBJEKTTYP ───────────────────────────────── */
.hw-cfg-objekttyp { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hw-cfg-obj-card { border:1px solid #d8d8d8; background:#fff; cursor:pointer; transition:border-color .15s; display:flex; flex-direction:column; }
.hw-cfg-obj-card:hover { border-color:var(--c-yellow, #e22278); }
.hw-cfg-obj-card-head { background:#f4f4f4; padding:16px 14px 14px; border-bottom:1px solid #d8d8d8; text-align:center; }
.hw-cfg-obj-card-icon { width:48px; height:48px; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; }
.hw-cfg-obj-card-icon svg { width:40px; height:40px; fill:none; stroke:#101112; stroke-width:1.5; }
.hw-cfg-obj-card-name { font-size:.85rem; font-weight:700; color:#101112; text-transform:uppercase; letter-spacing:.08em; }
.hw-cfg-obj-card-options { display:flex; flex-direction:column; flex:1; }
.hw-cfg-obj-option { flex:1; padding:12px 14px; border:none; border-top:1px solid #e8e8e8; background:#fff; cursor:pointer; font-size:1rem; font-weight:500; color:#444; font-family:inherit; text-align:left; transition:background .12s,color .12s; display:flex; align-items:center; gap:10px; }
.hw-cfg-obj-option:first-child { border-top:none; }
.hw-cfg-obj-option:hover { background:var(--c-yellow-tint, #fef2f7); color:var(--c-yellow, #e22278); }
.hw-cfg-obj-option.selected { background:var(--c-yellow, #e22278); color:#fff; font-weight:700; }
.hw-cfg-obj-option-marker { width:14px; height:14px; border:1.5px solid currentColor; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.hw-cfg-obj-option.selected .hw-cfg-obj-option-marker::after { content:''; width:6px; height:6px; border-radius:50%; background:#fff; display:block; }

/* ── SCHRITT 2 — GEWERKE ─────────────────────────────────── */
.hw-cfg-gewerke-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.hw-cfg-gewerk-card { border:none; background:#fff; padding:18px 10px 14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; position:relative; transition:border-color .12s,background .12s; }
.hw-cfg-gewerk-card:hover { border-color:var(--c-yellow, #e22278); }
.hw-cfg-gewerk-card.selected { border:2px solid var(--c-yellow, #e22278); background:var(--c-yellow-tint, #fef2f7); }
.hw-cfg-gewerk-svg { width:44px; height:44px; object-fit:contain; }
.hw-cfg-gewerk-label { font-size:.85rem; font-weight:600; color:#101112; line-height:1.4; letter-spacing:.03em; text-transform:uppercase; }
.hw-cfg-gewerk-card.selected .hw-cfg-gewerk-label { color:var(--c-yellow, #e22278); }
.hw-cfg-gewerk-check { position:absolute; top:5px; right:7px; font-size:.75rem; font-weight:800; color:var(--c-yellow, #e22278); line-height:1; }
.hw-cfg-zustand-block { margin-top:22px; }
.hw-cfg-zustand-title { font-size:1.2rem; font-weight:700; color:#101112; margin-bottom:14px; }
.hw-cfg-detail-group { padding:14px 0; border-bottom:1px solid #ebebeb; }
.hw-cfg-detail-group:last-child { border-bottom:none; }
.hw-cfg-detail-group-title { font-size:1.2rem; font-weight:700; color:#101112; margin-bottom:10px; }
.hw-cfg-detail-frage { font-size:1rem; color:#000; margin-bottom:10px; }
.hw-cfg-detail-optionen { display:flex; flex-wrap:wrap; gap:7px; }
.hw-cfg-detail-opt { padding:7px 16px; border:1px solid #d0d0d0; background:#fff; font-size:1rem; font-weight:500; color:#444; cursor:pointer; font-family:inherit; transition:border-color .1s,background .1s,color .1s; white-space:nowrap; }
.hw-cfg-detail-opt:hover { border-color:var(--c-yellow, #e22278); color:var(--c-yellow, #e22278); }
.hw-cfg-detail-opt.active { border-color:var(--c-yellow, #e22278); background:var(--c-yellow, #e22278); color:#fff; font-weight:600; }
.hw-cfg-detail-textfelder { display:flex; gap:16px; flex-wrap:wrap; }
.hw-cfg-detail-textfeld-wrap { display:flex; flex-direction:column; gap:5px; }
.hw-cfg-detail-textfeld-label { font-size:.9rem; font-weight:600; color:#555; }
.hw-cfg-detail-textfeld { width:130px; padding:9px 12px; border:1px solid #d0d0d0; font-size:.95rem; font-weight:600; color:#101112; font-family:inherit; background:#fff; }
.hw-cfg-detail-textfeld:focus { outline:none; border-color:var(--c-yellow, #e22278); }
.hw-cfg-sqm-block { margin-top:18px; padding-top:18px; border-top:1px solid #ebebeb; }
.hw-cfg-sqm-label { display:block; font-size:1rem; font-weight:700; color:#101112; margin-bottom:10px; }
.hw-cfg-sqm-input-wrap { display:flex; align-items:center; gap:10px; }
.hw-cfg-sqm-input { width:150px; padding:9px 14px; border:1px solid #d0d0d0; font-size:1rem; font-weight:600; color:#101112; font-family:inherit; background:#fff; }
.hw-cfg-sqm-input:focus { outline:none; border-color:var(--c-yellow, #e22278); }
.hw-cfg-sqm-unit { font-size:.95rem; font-weight:600; color:#444; }
.hw-cfg-objektdaten-title { font-size:1.2rem; font-weight:700; color:#101112; margin-bottom:12px; }
.hw-cfg-objektdaten-row { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; }
.hw-cfg-objektdaten-field { display:flex; flex-direction:column; gap:6px; }

/* ── SCHRITT 3 — PROJEKTPROFIL ───────────────────────────── */
.hw-cfg-projektprofil { display:flex; flex-direction:column; gap:24px; }
.hw-cfg-profil-group-title { font-size:1rem; font-weight:700; color:var(--c-yellow, #e22278); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.hw-cfg-profil-options { display:flex; gap:12px; flex-wrap:wrap; }
.hw-cfg-profil-card { flex:1; min-width:200px; border:1px solid #d8d8d8; background:#fff; padding:18px 20px; cursor:pointer; display:flex; flex-direction:column; gap:6px; text-align:left; transition:border-color .12s,background .12s; position:relative; }
.hw-cfg-profil-card:hover { border-color:var(--c-yellow, #e22278); }
.hw-cfg-profil-card.selected { border-color:var(--c-yellow, #e22278); background:var(--c-yellow-tint, #fef2f7); }
.hw-cfg-profil-card-label { font-size:clamp(.9rem, 1.2vw, 1rem); font-weight:700; color:#101112; line-height:1.3; text-transform:uppercase; letter-spacing:.04em; }
.hw-cfg-profil-card-desc { font-size:.95rem; color:#777; line-height:1.6; }
.hw-cfg-profil-card-check { position:absolute; top:10px; right:12px; width:18px; height:18px; border:1.5px solid var(--c-yellow, #e22278); align-items:center; justify-content:center; display:none; }
.hw-cfg-profil-card.selected .hw-cfg-profil-card-check { display:flex; }
.hw-cfg-profil-card-check::after { content:''; width:5px; height:9px; border:2px solid var(--c-yellow, #e22278); border-top:none; border-left:none; transform:rotate(45deg) translateY(-1px); display:block; }

/* ── SCHRITT 4 — PROJEKTDATEN ────────────────────────────── */
.hw-cfg-form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.hw-cfg-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.hw-cfg-label { font-size:1.2rem; font-weight:600; color:#101112; font-family:'Montserrat',inherit; }
.hw-cfg-input,.hw-cfg-textarea { width:100%; padding:9px 14px; border:1px solid #d0d0d0; font-size:clamp(1.07rem, 1.3vw, 1.1rem); color:#101112; background:#fff; transition:border-color .12s; box-sizing:border-box; font-family:'Montserrat',inherit; line-height:1.4; }
.hw-cfg-input:focus,.hw-cfg-textarea:focus { outline:none; border-color:var(--c-yellow, #e22278); }
.hw-cfg-input.error,.hw-cfg-textarea.error { border-color:#dc3545; }
.hw-cfg-textarea { resize:vertical; min-height:90px; }
.hw-cfg-error-msg { font-size:.9rem; color:#dc3545; margin-top:3px; }
.col-sm-3 { max-width:110px; }
.col-sm-4 { max-width:140px; }
.hw-cfg-upload-zone { border:1.5px dashed #c8c8c8; padding:22px; text-align:center; cursor:pointer; background:#fafafa; margin-bottom:10px; transition:border-color .12s,background .12s; }
.hw-cfg-upload-zone:hover,.hw-cfg-upload-zone.drag-over { border-color:var(--c-yellow, #e22278); background:var(--c-yellow-tint, #fef2f7); }
.hw-cfg-upload-zone input[type="file"] { display:none; }
.hw-cfg-upload-text { font-size:1rem; color:#555; margin-bottom:4px; }
.hw-cfg-upload-hint { font-size:1rem; color:#aaa; }
.hw-cfg-file-list { display:flex; flex-direction:column; gap:5px; }
.hw-cfg-file-item { display:flex; align-items:center; gap:8px; background:#f2f2f2; padding:7px 12px; font-size:.95rem; color:#444; }
.hw-cfg-file-remove { margin-left:auto; background:none; border:none; cursor:pointer; color:#aaa; font-size:1rem; line-height:1; }
.hw-cfg-file-remove:hover { color:#dc3545; }
.hw-cfg-checkbox-wrap { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.hw-cfg-checkbox-wrap input[type="checkbox"] { width:16px; height:16px; accent-color:var(--c-yellow, #e22278); margin-top:3px; flex-shrink:0; cursor:pointer; }
.hw-cfg-checkbox-label { font-size:1rem; color:#444; line-height:1.7; cursor:pointer; }
.hw-cfg-checkbox-label a { color:var(--c-yellow, #e22278); text-decoration:underline; }
.hw-cfg-re-adresse { padding:14px; background:#f8f8f8; border-left:2px solid #e8e8e8; margin-bottom:14px; }

/* ── SCHRITT 5 — BUCHUNGSWAHL / KONTAKT ──────────────────── */
.hw-cfg-booking-title { font-size:1rem; font-weight:700; color:#101112; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.hw-cfg-booking-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.hw-cfg-booking-card { border:1px solid #d8d8d8; background:#fff; padding:22px 20px; cursor:pointer; text-align:left; position:relative; transition:border-color .12s,background .12s; }
.hw-cfg-booking-card:hover { border-color:var(--c-yellow, #e22278); }
.hw-cfg-booking-card.selected { border-color:var(--c-yellow, #e22278); background:var(--c-yellow-tint, #fef2f7); }
.hw-booking-recommended { border-color:#d8d8d8; border-width:1px; }
.hw-booking-recommended.selected { border-color:var(--c-yellow, #e22278); border-width:2px; }
.hw-cfg-booking-badge-recommended { position:absolute; top:-1px; right:16px; background:var(--c-yellow, #e22278); color:#fff; font-size:.65rem; font-weight:700; padding:3px 10px; text-transform:uppercase; letter-spacing:.1em; }
/* Badge-Row über dem Header (v9): Empfohlen-Badge als eigene Zeile */
.hw-cfg-bc-badge-row { display:none; }
.hw-cfg-bc-empfohlen { font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#fff; }
.hw-cfg-booking-card-title { font-size:clamp(1.07rem, 1.5vw, 1.2rem); font-weight:700; color:#101112; margin-bottom:6px; line-height:1.3; text-transform:uppercase; letter-spacing:.04em; }
.hw-cfg-booking-card-price { font-size:1.15rem; font-weight:800; color:var(--c-yellow, #e22278); margin-bottom:8px; }
.hw-cfg-booking-card-desc { font-size:1rem; color:#555; line-height:1.7; }
.hw-cfg-booking-badge { display:inline-block; background:#f0fdf4; color:#166534; font-size:.65rem; font-weight:700; padding:3px 10px; margin-top:10px; border:1px solid #bbf7d0; text-transform:uppercase; letter-spacing:.08em; }

/* NLP/NLS Box */
.hw-cfg-nlp-box {
  padding:16px 20px; margin-bottom:22px;
  font-size:1rem; line-height:1.75; color:#333;
  border-left:3px solid var(--c-yellow, #e22278); background:#fafafa;
}
.hw-cfg-nlp-box p { margin:0 0 8px; }
.hw-cfg-nlp-box p:last-child { margin-bottom:0; }
.hw-cfg-nlp-box strong { font-weight:700; color:#101112; }
.hw-cfg-nlp-box em { font-style:italic; }

/* Zusammenfassung */
.hw-cfg-summary { background:#f6f6f6; border-left:3px solid var(--c-yellow, #e22278); padding:14px 18px; margin-bottom:20px; }
.hw-cfg-summary-title { font-size:.95rem; font-weight:700; color:#101112; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; font-family:'Montserrat',inherit; }
.hw-cfg-summary-row { display:flex; justify-content:space-between; font-size:1rem; padding:4px 0; border-bottom:1px solid #e8e8e8; line-height:1.7; }
.hw-cfg-summary-row:last-child { border-bottom:none; }
.hw-cfg-summary-key { color:#777; }
.hw-cfg-summary-val { font-weight:700; color:#101112; text-align:right; max-width:55%; }

/* Begehungs-Kostenpflicht Hinweis */
.hw-cfg-begehung-info-box {
  background:#fffbeb; border:1px solid #fcd34d;
  padding:16px 20px; margin-bottom:20px;
  font-size:1rem; color:#444; line-height:1.75;
}
.hw-cfg-begehung-info-box strong { color:#101112; font-weight:700; }
.hw-cfg-begehung-info-box em { font-style:italic; }

/* ── Footer / Buttons ─────────────────────────────────────── */
.hw-cfg-footer { padding:16px 0 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hw-cfg-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:.6rem 1.4rem; font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; font-family:'Montserrat',inherit; transition:all .2s ease-in-out; white-space:nowrap; }
.hw-cfg-btn-back { background:transparent; color:#555; border:1px solid #c0c0c0; }
.hw-cfg-btn-back:hover { border-color:#101112; color:#101112; background:transparent; }
.hw-cfg-btn-next,.hw-cfg-btn-submit { background-color:var(--c-yellow, #e22278); border:0; color:#fff; position:relative; z-index:1; overflow:hidden; }
.hw-cfg-btn-next::before,.hw-cfg-btn-submit::before { content:''; left:0; top:0; position:absolute; width:100%; height:0; background:#fff; z-index:-1; transition:all .3s; }
.hw-cfg-btn-next:hover,.hw-cfg-btn-submit:hover { color:var(--c-yellow, #e22278); background:#fff; border:1px solid var(--c-yellow, #e22278); }
.hw-cfg-btn-next:hover::before,.hw-cfg-btn-submit:hover::before { height:100%; top:auto; bottom:0; }
.hw-cfg-btn-next:disabled,.hw-cfg-btn-submit:disabled { opacity:.35; cursor:not-allowed; }
.hw-cfg-btn-submit { flex:1; }
/* Kostenpflichtiger Button: dunkel statt pink */
.hw-cfg-btn-submit.hw-btn-kostenpflichtig { background-color:#101112; }
.hw-cfg-btn-submit.hw-btn-kostenpflichtig:hover { background:#fff; color:#101112; border:1px solid #101112; }

/* Dots */
.hw-cfg-step-dots { display:flex; gap:5px; align-items:center; }
.hw-cfg-dot { width:6px; height:6px; background:#d0d0d0; transition:all .2s; }
.hw-cfg-dot.active { background:var(--c-yellow, #e22278); width:16px; }
.hw-cfg-dot.done { background:var(--c-yellow, #e22278); }

/* ── Badges (Fallback) ────────────────────────────────────── */
.hw-cfg-badges { display:flex; flex-wrap:wrap; gap:10px; }
.hw-cfg-badge { padding:10px 20px; border:1px solid #d0d0d0; background:#fff; font-size:1rem; font-weight:500; color:#444; cursor:pointer; font-family:inherit; transition:border-color .1s,background .1s,color .1s; }
.hw-cfg-badge:hover { border-color:var(--c-yellow, #e22278); color:var(--c-yellow, #e22278); }
.hw-cfg-badge.selected { border-color:var(--c-yellow, #e22278); background:var(--c-yellow, #e22278); color:#fff; font-weight:700; }

/* ── Erfolg ───────────────────────────────────────────────── */
.hw-cfg-success { text-align:center; padding:52px 32px; }
.hw-cfg-success-check { width:60px; height:60px; border:2px solid var(--c-yellow, #e22278); margin:0 auto 20px; display:flex; align-items:center; justify-content:center; }
.hw-cfg-success-check::after { content:''; width:14px; height:24px; border:3px solid var(--c-yellow, #e22278); border-top:none; border-left:none; transform:rotate(45deg) translateY(-4px); display:block; }
.hw-cfg-success-title { font-size:clamp(1.35rem, 2.5vw, 2rem); font-weight:700; color:#101112; margin-bottom:12px; text-transform:uppercase; letter-spacing:.04em; line-height:1.3; }
.hw-cfg-success-text { font-size:1rem; color:#555; line-height:1.6; max-width:480px; margin:0 auto; }

/* ── Inline-Fehler ────────────────────────────────────────── */
.hw-cfg-step-error { display:flex; align-items:center; gap:10px; margin:0 24px 0; padding:12px 16px; background:#fff3cd; border:1px solid #ffc107; color:#856404; font-size:1rem; font-weight:500; line-height:1.4; animation:hw-shake .3s ease; }
.hw-cfg-step-error::before { content:'⚠'; font-size:1rem; flex-shrink:0; }
@keyframes hw-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ── Google Maps Autocomplete ─────────────────────────────── */
.pac-container { box-shadow:0 4px 16px rgba(0,0,0,.12)!important; font-family:'Montserrat',system-ui,sans-serif!important; }
.pac-item { padding:8px 14px!important; font-size:1rem!important; cursor:pointer!important; }
.pac-item:hover { background:var(--c-yellow-tint, #fef2f7)!important; }
/* Fehler-Icon (API-Key Referrer-Restriction) unterdrücken */
#hw-address-autocomplete { background-image:none!important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:700px) {
  .hw-cfg-header { padding:20px 18px 14px; }
  .hw-cfg-body   { padding:18px; }
  .hw-cfg-footer { padding:14px 18px 20px; }
  .hw-cfg-objekttyp { grid-template-columns:1fr; }
  .hw-cfg-gewerke-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .hw-cfg-booking-options { grid-template-columns:1fr; }
  .hw-cfg-form-row { grid-template-columns:1fr; }
  .hw-cfg-profil-options { flex-direction:column; }
  .hw-cfg-btn { letter-spacing:.08rem; padding:.6rem 1rem; }
}

/* ── Legal Block (Datenschutz + AGB in Schritt 5) ──────────── */
.hw-cfg-legal-block { padding-top:18px; border-top:1px solid #ebebeb; margin-top:6px; }

/* ── KV-Info (Kontaktdaten Hinweis) ─────────────────────────── */
.hw-cfg-kv-info   { font-size:1rem; color:#666; margin-bottom:16px; line-height:1.7; }
.hw-cfg-input-hint { font-size:.95rem; color:#888; margin-top:5px; line-height:1.6; }

/* ── v8 Patch: NLP-Hint, Upload-Button, ABW-Adresse ──────── */
.hw-cfg-nlp-hint {
  font-size:1rem; color:#777; line-height:1.65;
  margin-bottom:10px; font-style:italic;
}
.hw-cfg-upload-btn {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px; padding:9px 20px;
  background:#101112; color:#fff; border:none;
  font-size:1rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .15s;
}
.hw-cfg-upload-btn:hover { background:var(--c-yellow, #e22278); }
.hw-cfg-upload-btn svg { flex-shrink:0; }

/* Abweichende Rechnungsadresse Toggle */
.hw-cfg-abw-toggle-wrap {
  display:flex; align-items:center; gap:0;
  margin-bottom:16px;
}
.hw-cfg-abw-checkbox { display:none; }
.hw-cfg-abw-label {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border:1.5px solid #d0d0d0;
  cursor:pointer; font-size:1rem; font-weight:500; color:#555;
  transition:border-color .15s, background .15s, color .15s;
  width:100%; user-select:none;
}
.hw-cfg-abw-label:hover { border-color:var(--c-yellow, #e22278); color:var(--c-yellow, #e22278); }
.hw-cfg-abw-checkbox:checked + .hw-cfg-abw-label {
  border-color:var(--c-yellow, #e22278); background:var(--c-yellow-tint, #fef2f7); color:var(--c-yellow, #e22278); font-weight:600;
}
.hw-cfg-abw-icon { flex-shrink:0; display:flex; }
.hw-cfg-abw-icon svg { width:16px; height:16px; }

/* Block für abweichende Adresse */
.hw-cfg-re-adresse-block {
  border-left:3px solid var(--c-yellow, #e22278); padding-left:16px;
  margin-bottom:16px; animation:hw-slide-in .2s ease;
}
@keyframes hw-slide-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── SCHRITT 5 v9 — Hero + Receipt + Buchungsoptionen v2 ──── */

.hw-cfg-s5-hero { text-align:center; padding:28px 0 24px; margin-bottom:22px; }
.hw-cfg-s5-hero-check { width:52px; height:52px; border:2px solid var(--c-yellow, #e22278); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.hw-cfg-s5-hero-check svg { width:24px; height:24px; stroke:var(--c-yellow, #e22278); }
.hw-cfg-s5-hero-title { font-size:clamp(1.2rem, 2.5vw, 1.75rem); font-weight:700; color:#101112; text-transform:uppercase; letter-spacing:.04em; line-height:1.3; margin-bottom:10px; font-family:'Montserrat',inherit; }
.hw-cfg-s5-hero-sub { font-size:1rem; color:#666; line-height:1.6; }

/* ── Kassenbonzettel v11 ─────────────────────────────────────
   Seite: #fafafa  |  Bon: #fff
   Outer-Wrapper erzeugt Zacken: #fff Dreiecke auf #fafafa Bg
   → sicherer als mask-image (kein Chrome-Rendering-Bug)
   ─────────────────────────────────────────────────────────── */
.hw-cfg-receipt-outer {
  position: relative;
  margin: 0 0 32px;
}
/* Abriss-Kante oben: SPITZE V-Form (kein Kasten), 18×18px, doppelte Größe */
.hw-cfg-receipt-outer::before {
  content: '';
  display: block;
  height: 18px;
  /* Zwei diagonale Gradienten ergeben ein V/Sägezahn — spitze Zacken */
  background:
    linear-gradient(135deg, #fafafa 50%, transparent 50%) 0 0,
    linear-gradient(-135deg, #fafafa 50%, transparent 50%) 9px 0;
  background-size: 18px 18px;
  background-repeat: repeat-x;
  background-color: #fff;
}
/* Abriss-Kante unten: gespiegeltes V */
.hw-cfg-receipt-outer::after {
  content: '';
  display: block;
  height: 18px;
  background:
    linear-gradient(-45deg, #fafafa 50%, transparent 50%) 0 0,
    linear-gradient(45deg, #fafafa 50%, transparent 50%) 9px 0;
  background-size: 18px 18px;
  background-repeat: repeat-x;
  background-color: #fff;
}
.hw-cfg-receipt {
  background: #fff;
}
.hw-cfg-receipt::before,
.hw-cfg-receipt::after { display: none; content: none; }
/* Kassenbonzettel-Header: Firmennamen zentriert, Monospace-Style */
.hw-cfg-receipt-paper-header {
  text-align: center;
  padding: 18px 20px 12px;
  border-bottom: 1px dashed #d8d8d8;
}
.hw-cfg-receipt-logo {
  font-family: 'Courier New', Courier, monospace;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #101112;
}
.hw-cfg-receipt-sep {
  margin: 8px auto;
  border: none;
  border-top: 1px dashed #bbb;
  width: 80%;
}
.hw-cfg-receipt-subtitle {
  font-family: 'Courier New', Courier, monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #101112;
}
.hw-cfg-receipt-rows { padding: 6px 22px 6px; }
.hw-cfg-receipt-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px dashed #d8d8d8;
  gap: 2px;
  font-family: 'Courier New', Courier, monospace;
}
.hw-cfg-receipt-row:last-child { border-bottom: none; }
.hw-cfg-receipt-key {
  font-size: .68rem;
  color: #101112;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.hw-cfg-receipt-val {
  font-size: .88rem;
  font-weight: 700;
  color: #101112;
  text-align: left;
  line-height: 1.4;
}


.hw-cfg-s5-booking-label { font-size:1rem; font-weight:700; color:#101112; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }

/* Buchungskarte v2 */
.hw-cfg-bc-v2 { padding:0!important; overflow:hidden; display:flex!important; flex-direction:column; }
.hw-cfg-bc-header { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:#f6f6f6; border-bottom:1px solid #e8e8e8; gap:10px; min-height:54px; flex-shrink:0; }
.hw-cfg-bc-v2.selected .hw-cfg-bc-header { background:var(--c-yellow-tint, #fef2f7); }
.hw-cfg-bc-price { font-size:.78rem; font-weight:700; line-height:1.4; text-align:center; }
.hw-cfg-bc-price.free { background:#101112; color:#fff; padding:8px 16px; font-size:1rem; letter-spacing:.06em; display:flex; flex-direction:column; align-items:center; }
.hw-cfg-bc-price.paid { background:var(--c-yellow, #e22278); color:#fff; padding:8px 16px; font-size:1rem; line-height:1.5; display:flex; flex-direction:column; align-items:center; }
.hw-cfg-bc-price.paid strong { display:block; font-size:1.1rem; font-weight:800; letter-spacing:-.01em; }
.hw-cfg-bc-title { font-size:.95rem; font-weight:700; color:#101112; text-transform:uppercase; letter-spacing:.04em; line-height:1.4; padding:14px 18px 6px; }
.hw-cfg-bc-desc { font-size:1rem; color:#555; line-height:1.7; padding:0 18px 10px; }
.hw-cfg-bc-anrechnung { margin:0 18px 14px; padding:7px 12px; background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; font-size:.78rem; font-weight:600; line-height:1.5; }

/* Zahlungshinweis subtle (details/summary) */
.hw-cfg-payment-subtle { border:none; margin-bottom:18px; }
.hw-cfg-payment-subtle-sum { font-size:.78rem; color:#bbb; cursor:pointer; display:flex; align-items:center; gap:5px; padding:5px 0; list-style:none; user-select:none; }
.hw-cfg-payment-subtle-sum:hover { color:#888; }
.hw-cfg-payment-subtle-sum svg { flex-shrink:0; }
.hw-cfg-payment-subtle-text { font-size:.83rem; color:#666; line-height:1.65; margin:6px 0 0; padding:10px 14px; background:#f8f8f8; border-left:2px solid #d0d0d0; }

@media (max-width:700px) {
  .hw-cfg-s5-hero-title { font-size:1.15rem; }
  .hw-cfg-bc-header { flex-wrap:wrap; }
}

/* ── Booking Cards v24 — klare aktiv/inaktiv Unterscheidung ── */
.hw-cfg-bc-v2 { cursor:pointer; transition:border-color .15s, background .15s, transform .1s; }
.hw-cfg-bc-v2:not(.selected) { opacity:.82; }
.hw-cfg-bc-v2:not(.selected):hover { opacity:1; border-color:#bbb !important; transform:translateY(-1px); }
.hw-cfg-bc-v2.selected { border:2px solid var(--c-yellow, #e22278) !important; background:#fff !important; opacity:1; transform:translateY(-2px); box-shadow:0 4px 20px rgba(226,34,120,.18); }
.hw-cfg-bc-v2.selected .hw-cfg-bc-header { background:var(--c-yellow-tint, #fef2f7); }
/* Preis-Badge Struktur */
.hw-cfg-bc-price-tag { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; opacity:.85; }
.hw-cfg-bc-price-sub { font-size:1.1rem; font-weight:800; margin-top:1px; }
.hw-cfg-bc-price.free .hw-cfg-bc-price-sub { font-size:1.1rem; font-weight:800; }
/* Checkliste */
.hw-cfg-bc-checklist { padding:0 18px 14px; }
.hw-cfg-bc-check-item { font-size:.88rem; color:#444; line-height:1.7; padding:1px 0; }
.hw-cfg-bc-check-item::first-letter { color:var(--c-yellow, #e22278); }
/* receipt-row mit top-border als Divider */
.hw-cfg-receipt-row--divider { border-top:1px dashed #d0d0d0; margin-top:4px; padding-top:8px !important; }
/* payment text paragraphs */
.hw-cfg-payment-subtle-text p { margin:0 0 6px; font-size:.83rem; color:#666; line-height:1.65; }
.hw-cfg-payment-subtle-text p:last-child { margin-bottom:0; }