*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f4f1ec;min-height:100vh}
.proto{max-width:480px;margin:0 auto;padding:25px}
.screen{display:none;flex-direction:column;gap:16px}
.screen.active{display:flex}
.logo{font-size:18px;font-weight:500;color:#a69674;letter-spacing:-0.5px;padding-bottom:8px;border-bottom:1px solid #e0d8cc}
.logo span{color:#888;font-weight:400;font-size:13px;margin-left:8px}
.card{background:#fff;border:1px solid #e0d8cc;border-radius:12px;padding:20px}
.lbl{font-size:13px;color:#666;margin-bottom:6px}
.ttl{font-size:16px;font-weight:500;color:#1a1a1a;margin-bottom:4px}
.sub{font-size:14px;color:#666}
.btn{display:block;width:100%;padding:10px 16px;border:1px solid #bbb;border-radius:8px;background:#fff;font-size:14px;cursor:pointer;text-align:center;color:#1a1a1a;font-family:inherit}
.btn:hover{background:#f7f4f0}
.btn-primary{background:#a69674;color:#fff;border-color:#a69674;font-weight:500}
.btn-primary:hover{background:#8f7e62}
.btn-disabled{opacity:0.38;cursor:not-allowed;pointer-events:none}
.btn-muted{margin-top:8px;color:#888;border-color:#ddd}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.alert{border-radius:8px;padding:12px 14px;font-size:14px}
.alert-warn{background:#fdf6ec;color:#5a3e10;border:1px solid #d4b896}
.alert-info{background:#f5f0e8;color:#4a3520;border:1px solid #c8b89a}
.alert-danger{background:#fdf0f0;color:#5a1a1a;border:1px solid #d4a0a0}
.set-tag{background:#f9f7f4;border:1px solid #e0d8cc;border-radius:8px;padding:8px 12px;font-size:13px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.set-tag:hover{background:#f1ece4}
.price-box{background:#f5f0e8;border:1px solid #c8b89a;border-radius:8px;padding:12px 14px}
.price{font-size:22px;font-weight:500;color:#6b4e20}
.price-lbl{font-size:12px;color:#8a6c3e}
.step-bar{display:flex;gap:4px}
.step-dot{height:3px;flex:1;border-radius:2px;background:#e0d8cc}
.step-dot.done{background:#a69674}
.rrow{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#1a1a1a;cursor:pointer;padding:10px 12px;border:1px solid #ddd;border-radius:8px;background:#fff}
.rrow:has(input:checked){border-color:#a69674;background:#faf7f3}
.rrow input{margin-top:2px;width:16px;height:16px;cursor:pointer;accent-color:#a69674;flex-shrink:0}
.crow{display:flex;align-items:center;gap:8px;font-size:14px;color:#1a1a1a;cursor:pointer}
.rrow-wrap{display:flex;align-items:center;gap:6px}
.rrow-wrap>.rrow,.rrow-wrap>.crow{flex:1}

/* addon: fuses the "?" onto the right edge of a button/radio-option (Bootstrap input-group-append look) – shared border, no gap.
   scoped to .popover-host (only present while the popover text is non-empty) so an empty template cleanly reverts
   the control to its normal, fully-bordered look instead of leaving a border-less open edge on the right */
.rrow-wrap.addon.popover-host{gap:0;align-items:stretch}
.rrow-wrap.addon.popover-host>.btn,
.rrow-wrap.addon.popover-host>.rrow{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}

/* the addon always tracks the current border-color of the control it's attached to (default/primary/checked) via
   a CSS variable set on the shared wrapper, so it never drifts out of sync when that control's own state changes */
.rrow-wrap.addon{--addon-border:#ddd;--addon-bg:#f9f7f4}
.rrow-wrap.addon:has(>.btn){--addon-border:#bbb}
.rrow-wrap.addon:has(>.btn-primary){--addon-border:#a69674}
.rrow-wrap.addon:has(>.rrow input:checked){--addon-border:#a69674;--addon-bg:#faf7f3}
.rrow-wrap.addon.popover-host .info-icon{
	width:auto;height:auto;min-width:42px;padding:0 12px;
	border-radius:0 8px 8px 0;
	background:var(--addon-bg);color:#a69674;
	border:1px solid var(--addon-border);
	}

/* on real hover-capable pointers, the element a "?" icon belongs to (row/label/title) shows the same popover on hover;
   the icon itself becomes inert there so the hover doesn't also fire the icon's own (touch-oriented) tippy instance */
@media (hover:hover) and (pointer:fine){
	.popover-host{cursor:help}
	.popover-host .info-icon{pointer-events:none}
	}
input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#a69674}
.divider{border:none;border-top:1px solid #e0d8cc;margin:16px 0}
.qty-btn{width:32px;height:32px;border:1px solid #bbb;border-radius:8px;background:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#1a1a1a;font-family:inherit}
.qty-val{font-size:16px;font-weight:500;min-width:24px;text-align:center;color:#1a1a1a}
.qty-row{display:flex;align-items:center;gap:12px;margin-top:4px}
.hint{font-size:12px;color:#999}
.total-row{display:flex;justify-content:space-between;align-items:center}
.sec-lbl{font-size:11px;font-weight:500;color:#a69674;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.radio-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.check-group{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.opt-title{font-size:14px;font-weight:500;color:#1a1a1a}
.opt-sub{font-size:12px;color:#777;margin-top:2px}
.success-icon{font-size:32px;margin-bottom:12px;color:#a69674}
input[type=text],input[type=email],input[type=tel]{color:#1a1a1a;background:#fff;border:1px solid #ccc;border-radius:8px;padding:8px 10px;font-size:14px;font-family:inherit;width:100%;display:block}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus{outline:none;border-color:#a69674}
#user_daten_abfrage input[type=text],#user_daten_abfrage input[type=email],#user_daten_abfrage input[type=tel]{margin-bottom:12px}
textarea{color:#1a1a1a;background:#fff;border:1px solid #ccc;border-radius:8px;padding:8px 10px;font-size:14px;font-family:inherit;width:100%;height:80px;resize:vertical;display:block}
textarea:focus{outline:none;border-color:#a69674}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:-2px;margin-right:6px}
.btn .spinner{border-color:rgba(166,150,116,0.3);border-top-color:#a69674}
@keyframes spin{to{transform:rotate(360deg)}}
.cond-hint{display:none;font-size:13px;color:#a05a1a;text-align:center;margin-bottom:8px}
.cond-hint.flash{display:block;animation:condHintFlash 0.8s ease-in-out 3}
@keyframes condHintFlash{0%,100%{opacity:1}50%{opacity:0.4}}
.typeahead-list{border-color:#e0d8cc;right:0}
.typeahead-item:hover,.typeahead-item.active{background:#f9f7f4}
.typeahead-wrap{margin-bottom:16px}
#btn-submit{margin-top:16px}
#offer-list{display:flex;flex-direction:column;gap:8px}
#offer-total{font-size:20px;font-weight:500;color:#1a1a1a}

/* Tippy.js speech-bubble popovers (light-border theme), hover on desktop / tap on mobile via [data-tippy-content] */
.info-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#a69674;color:#fff;font-size:14px;font-weight:700;font-style:normal;cursor:pointer;flex-shrink:0;vertical-align:middle;-webkit-tap-highlight-color:transparent}
.info-icon:hover{background:#8f7e62}