/* Avero Konfigurator – Styles (1:1 aus der React-Version)
   Jede Regel ist unter .cfg gescoped, damit das Theme/Elementor-Kit der
   Seite (globale Typografie/Button/Input-Styles) nicht hineinwirkt und
   umgekehrt nichts von hier auf die restliche Seite ausstrahlt.

   Isolation strategy (so this survives ANY host theme/page-builder kit,
   not just this site's): scoping under .cfg alone is not enough, because
   a host theme's global resets often target bare tags (button, a,
   input) directly — e.g. Hello Elementor's reset.css ships a plain
   `button:hover{background-color:...}` rule that matches every button
   on the page regardless of specificity tricks elsewhere. Two things
   fix that permanently:
     1. An explicit reset block for every native form/interactive tag
        right after .cfg, so nothing here ever depends on inheritance
        (inherited values always lose to a host rule that matches the
        element directly — see .zone-row / .tchip b below, which were
        exactly that gap).
     2. `!important` on every purely-visual property (color, background,
        border, shadow, outline, typography) throughout the file. Never
        on layout properties (display/flex/grid/gap/width/margin/...) —
        no host theme targets those, and keeping them plain keeps this
        file readable. Combined with the .cfg scope, this wins against
        a host rule regardless of that rule's specificity *or* whether
        it also uses !important at a lower specificity than ours. */

.cfg{--paper:#FFFFFF;--surface:#FFFFFF;--ink:#17171A;--muted:#6C6B64;--line:#E4E2DA;--line2:#D5D2C8;--stage:#FFFFFF;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;color:var(--ink)!important;background:var(--paper)!important;
  min-height:100%;width:100%;-webkit-font-smoothing:antialiased;line-height:normal!important;letter-spacing:normal!important;text-transform:none!important}
.cfg *{box-sizing:border-box}

/* Baseline reset for every native element the tool uses — font/decoration
   only, deliberately NOT color/background/border/radius.

   Why not those too: every component rule below (.solid, .ghost, .tchip,
   .zone-row, .step, .segbtn, .mini, .chip, form fields, ...) already
   declares its own explicit color/background/border/radius at
   .cfg + one more class = specificity (0,2,0), which safely beats a host
   theme's bare-tag rules (e.g. Hello Elementor's `button:hover` at
   (0,1,1)) on its own — confirmed by direct testing. An earlier version of
   this block also tried to reset color/background here as a second safety
   net, using `.cfg button:not(.chip)`. That was the bug: `:not(.chip)`
   itself carries the specificity of `.chip` (one class), which pushed
   this rule to (0,2,1) — one tick ABOVE every (0,2,0) component rule in
   the file, so this "safety net" started winning against the tool's own
   intentional styling (buttons losing their fill, radii flattening to 0,
   the tier-chip "reached" state losing its highlight). Keeping this block
   to only font-family/text-decoration/outline/margin/cursor — properties
   no component rule contests — makes that class of bug structurally
   impossible: there is nothing left here to outrank. */
.cfg button,
.cfg input,
.cfg select,
.cfg textarea,
.cfg a{
  font-family:inherit!important;text-decoration:none!important;text-transform:none!important;
  letter-spacing:normal!important;outline:none;margin:0;cursor:pointer}

.cfg .top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:22px 26px 18px;border-bottom:1px solid var(--line)!important;flex-wrap:wrap}
.cfg .brand{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cfg .wordmark{font-weight:700!important;font-size:26px;letter-spacing:3px!important;color:var(--ink)!important}
.cfg .eyebrow{font-size:11px;letter-spacing:2.5px!important;text-transform:uppercase!important;color:var(--muted)!important}
.cfg .top-right{display:flex;align-items:center;gap:16px}
.cfg .model{font-size:13px;letter-spacing:.5px!important;color:var(--ink)!important}
.cfg .model em{color:var(--muted)!important;font-style:normal}
.cfg .modelseg{display:inline-flex;border:1px solid var(--line2)!important;border-radius:9px;padding:3px;background:var(--paper)!important;gap:3px}
.cfg .segbtn{border:none!important;background:none!important;border-radius:6px;padding:7px 13px;font-size:12.5px;letter-spacing:.4px!important;
  color:var(--muted)!important;white-space:nowrap}
.cfg .segbtn:hover,.cfg .segbtn:focus{color:var(--ink)!important;background:none!important}
.cfg .segbtn.on{background:var(--ink)!important;color:#fff!important}
.cfg .segbtn.on:hover,.cfg .segbtn.on:focus{background:var(--ink)!important;color:#fff!important}
.cfg .modelbar{display:flex;align-items:baseline;gap:12px;padding:11px 26px;border-bottom:1px solid var(--line)!important;
  background:var(--surface)!important;flex-wrap:wrap}
.cfg .modelname{font-size:13px;font-weight:600!important;letter-spacing:.4px!important;color:var(--ink)!important}
.cfg .modelmeta{font-size:11.5px;color:var(--muted)!important;letter-spacing:.3px!important}

.cfg .grid{display:grid;grid-template-columns:1fr 392px;gap:0;align-items:start}
@media(max-width:980px){.cfg .grid{grid-template-columns:1fr}}

/* STAGE */
.cfg .stage{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;
  background:var(--stage)!important;min-height:calc(100vh - 78px)}
@media(max-width:980px){.cfg .stage{position:sticky;top:0;z-index:40;min-height:0;
  background:var(--stage)!important;box-shadow:0 8px 18px rgba(0,0,0,.08)!important}
  .cfg .stage-canvas{padding:12px 16px}
  .cfg .shoe{max-height:34vh;width:auto;max-width:100%}
  .cfg .stage-bar{padding:8px 16px}}
.cfg .stage-canvas{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 44px}
.cfg .shoe{width:100%;max-width:880px;height:auto;touch-action:none}
.cfg .stage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 26px;border-top:1px solid var(--line)!important;background:var(--paper)!important;flex-wrap:wrap}
.cfg .hint{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)!important}

/* RAIL */
.cfg .rail{border-left:1px solid var(--line)!important;background:var(--surface)!important;padding:4px 0}
@media(max-width:980px){.cfg .rail{border-left:none;border-top:1px solid var(--line)!important}}
.cfg .panel{padding:22px 24px;border-bottom:1px solid var(--line)!important}
.cfg .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cfg .panel-head h2{margin:0;font-size:11px;font-weight:700!important;letter-spacing:2.5px!important;text-transform:uppercase!important;color:var(--muted)!important}
.cfg .link{background:none!important;border:none!important;color:var(--ink)!important;font-size:11px;letter-spacing:.4px!important;text-decoration:underline!important;
  text-underline-offset:3px;padding:0;text-transform:uppercase!important}
.cfg .link:hover,.cfg .link:focus{color:var(--ink)!important;background:none!important;text-decoration:underline!important}

/* zones */
.cfg .zones{display:flex;flex-direction:column;gap:2px}
.cfg .zone{border:1px solid transparent!important;border-radius:7px}
.cfg .zone.on{border-color:var(--line2)!important;background:#FBFAF7!important}
.cfg .zone-row{width:100%;display:grid;grid-template-columns:26px 1fr auto 22px;align-items:center;gap:12px;
  background:none!important;border:none!important;padding:11px 10px;text-align:left;color:var(--ink)!important}
.cfg .zone-row:hover,.cfg .zone-row:focus,.cfg .zone-row:active{background:none!important;color:var(--ink)!important}
.cfg .no{font-size:10px;color:var(--muted)!important;font-variant-numeric:tabular-nums;letter-spacing:1px!important}
.cfg .zlabel{font-size:14px;letter-spacing:.2px!important;display:inline-flex;align-items:center;gap:7px;color:var(--ink)!important}
.cfg .row-lock{color:var(--muted)!important;opacity:.7;flex:0 0 auto}
.cfg .hex{font-family:ui-monospace,Menlo,monospace!important;font-size:11.5px;color:var(--muted)!important;letter-spacing:.5px!important}
.cfg .sw{width:22px;height:22px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)!important}
.cfg .editor{padding:4px 10px 14px}
.cfg .presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.cfg .chip{width:26px;height:26px;border-radius:6px;border:none!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)!important;
  display:flex;align-items:center;justify-content:center}
.cfg .chip:hover,.cfg .chip:focus,.cfg .chip:active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)!important}
.cfg .custom{display:flex;align-items:center;gap:11px}
.cfg .lock-note{display:flex;align-items:center;gap:7px;margin:2px 0 2px;font-size:11.5px;color:var(--muted)!important;letter-spacing:.2px!important}
.cfg .picker{position:relative;width:38px;height:38px;border-radius:7px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)!important;cursor:pointer;flex:0 0 auto}
.cfg .picker input{position:absolute;inset:-6px;width:50px;height:50px;border:none!important;padding:0;cursor:pointer;background:none!important}
.cfg .hexcol{display:flex;flex-direction:column;gap:5px;flex:1}
.cfg .hexlbl{font-size:10px;letter-spacing:1.2px!important;text-transform:uppercase!important;color:var(--muted)!important}
.cfg .hexwrap{display:flex;align-items:center;border:1px solid var(--line2)!important;border-radius:7px;background:var(--surface)!important;overflow:hidden}
.cfg .hexwrap:focus-within{outline:2px solid var(--ink)!important;outline-offset:-1px;border-color:var(--line2)!important;background:var(--surface)!important}
.cfg .hexhash{padding:0 2px 0 11px;font-family:ui-monospace,Menlo,monospace!important;font-size:13px;color:var(--muted)!important}
.cfg .hexin2{flex:1;border:none!important;background:none!important;outline:none;padding:9px 11px 9px 2px;
  font-family:ui-monospace,Menlo,monospace!important;font-size:13px;letter-spacing:2px!important;color:var(--ink)!important;text-transform:uppercase!important}
.cfg .hexin2:hover,.cfg .hexin2:focus,.cfg .hexin2:active{background:none!important;color:var(--ink)!important}
.cfg .hexin{display:none}
.cfg .logo-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cfg .logo-thumb{width:52px;height:52px;border:1px solid var(--line2)!important;border-radius:9px;
  background:conic-gradient(from 45deg,#f1f0ec 0 25%,#fff 0 50%,#f1f0ec 0 75%,#fff 0)!important;background-size:14px 14px!important;background-position:0 0!important;
  padding:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cfg .logo-thumb:hover,.cfg .logo-thumb:focus,.cfg .logo-thumb:active{border-color:var(--line2)!important}
.cfg .logo-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.cfg .logo-thumb.on{border-color:var(--ink)!important;box-shadow:0 0 0 2px var(--ink) inset!important}
.cfg .logo-thumb.on:hover,.cfg .logo-thumb.on:focus{border-color:var(--ink)!important;box-shadow:0 0 0 2px var(--ink) inset!important}
.cfg .logo-edit{margin-top:13px;padding-top:13px;border-top:1px dashed var(--line2)!important;display:flex;flex-direction:column;gap:11px}
.cfg .sval{font-size:11px;color:var(--muted)!important;font-variant-numeric:tabular-nums;width:34px;text-align:right}

/* branding */
.cfg .field{margin-bottom:18px}
.cfg .field:last-child{margin-bottom:0}
.cfg .flabel{display:block;font-size:12px;color:var(--muted)!important;margin-bottom:9px;letter-spacing:.3px!important}
.cfg .logo-ctl{display:flex;gap:8px;flex-wrap:wrap}
.cfg .textrow{display:flex;gap:6px;align-items:center;margin-bottom:8px;border-radius:8px;padding:2px}
.cfg .textrow.on .textin{border-color:var(--ink)!important}
.cfg .mini{flex:0 0 auto;width:34px;height:38px;border:1px solid var(--line2)!important;border-radius:8px;background:var(--surface)!important;
  color:var(--ink)!important;cursor:pointer;font-size:14px;line-height:1}
.cfg .mini:hover,.cfg .mini:focus{border-color:var(--ink)!important;background:var(--surface)!important;color:var(--ink)!important}
.cfg .textin{width:100%;padding:10px 12px;border:1px solid var(--line2)!important;border-radius:8px;background:var(--surface)!important;
  font-size:14px;letter-spacing:2px!important;color:var(--ink)!important;text-transform:uppercase!important}
.cfg .textin:focus{outline:2px solid var(--ink)!important;outline-offset:-1px;border-color:var(--line2)!important;background:var(--surface)!important;color:var(--ink)!important}
.cfg .slider{display:flex;align-items:center;gap:12px;margin-top:11px}
.cfg .slider span{font-size:11px;color:var(--muted)!important;width:42px}
.cfg .slider input[type=range]{flex:1;accent-color:var(--ink)!important;height:2px;background:transparent!important}

/* qty + price */
.cfg .qty{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.cfg .step{display:inline-flex;align-items:center;justify-content:center;padding:0;
  width:36px;height:36px;border:1px solid var(--line2)!important;background:var(--surface)!important;border-radius:8px;
  font-size:18px;line-height:1;color:var(--ink)!important}
.cfg .step:hover,.cfg .step:focus{border-color:var(--ink)!important;background:var(--surface)!important;color:var(--ink)!important}
.cfg .qtyin{width:84px;height:36px;text-align:center;border:1px solid var(--line2)!important;border-radius:8px;
  font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)!important;background:var(--surface)!important}
.cfg .qtyin:focus{outline:2px solid var(--ink)!important;outline-offset:-1px;border-color:var(--line2)!important;background:var(--surface)!important;color:var(--ink)!important}
.cfg .qsuffix{font-size:11px;color:var(--muted)!important;letter-spacing:.3px!important}

.cfg .tier-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}
.cfg .tchip{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border:1px solid var(--line)!important;
  border-radius:7px;background:var(--surface)!important;color:var(--ink)!important}
.cfg .tchip b{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)!important;font-weight:700!important}
.cfg .tchip span{font-size:10.5px;color:var(--muted)!important}
.cfg .tchip.reached{border-color:var(--ink)!important;background:#FBFAF7!important}
.cfg .tchip:hover,.cfg .tchip:focus{border-color:var(--ink)!important;background:var(--surface)!important;color:var(--ink)!important}
.cfg .tchip.reached:hover,.cfg .tchip.reached:focus{border-color:var(--ink)!important;background:#FBFAF7!important}

.cfg .price{display:flex;gap:10px}
.cfg .pp{flex:1;border:1px solid var(--line)!important;border-radius:9px;padding:13px 14px}
.cfg .pp.total{background:var(--ink)!important}
.cfg .plabel{display:block;font-size:10.5px;letter-spacing:1.5px!important;text-transform:uppercase!important;color:var(--muted)!important;margin-bottom:6px}
.cfg .pp.total .plabel{color:#A9A8A0!important}
.cfg .pval{font-size:21px;font-weight:700!important;font-variant-numeric:tabular-nums;letter-spacing:.3px!important;color:var(--ink)!important}
.cfg .pp.total .pval{color:#fff!important}
.cfg .nudge{margin:11px 0 0;font-size:12px;color:var(--ink)!important}
.cfg .nudge em{color:var(--muted)!important;font-style:normal}
.cfg .fineprint{margin:9px 0 0;font-size:11px;color:var(--muted)!important;line-height:1.5}

/* contact + consent */
.cfg .contact{padding:20px 24px;border-top:1px solid var(--line)!important;display:flex;flex-direction:column;gap:10px}
.cfg .contact-title{font-size:11px;font-weight:700!important;letter-spacing:2.5px!important;text-transform:uppercase!important;color:var(--muted)!important;margin:0 0 4px}
.cfg .forminput{width:100%;padding:10px 12px;border:1px solid var(--line2)!important;border-radius:8px;background:var(--surface)!important;
  font-size:13.5px;color:var(--ink)!important}
.cfg .forminput::placeholder{color:var(--muted)!important}
.cfg .forminput:focus{outline:2px solid var(--ink)!important;outline-offset:-1px;border-color:var(--line2)!important;background:var(--surface)!important;color:var(--ink)!important}
.cfg .forminput.err{border-color:#B3261E!important}
.cfg .consent{display:flex;align-items:flex-start;gap:9px;margin-top:2px}
.cfg .consent input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;margin-top:2px;accent-color:var(--ink)!important;background:none!important}
.cfg .consent label{font-size:11.5px;line-height:1.5;color:var(--muted)!important}
.cfg .consent a{color:var(--ink)!important;text-decoration:underline!important;text-underline-offset:2px}
.cfg .consent a:hover,.cfg .consent a:focus{color:var(--ink)!important;text-decoration:underline!important}
.cfg .fallback-row{display:flex;justify-content:center;margin-top:2px}
.cfg .fallback-row .link{font-size:10.5px}

/* success screen — replaces the request button in place, no reload */
.cfg .success{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid var(--line2)!important;
  border-radius:8px;background:var(--surface)!important}
.cfg .success svg{flex:0 0 auto;margin-top:1px}
.cfg .success-msg{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)!important}

/* cta + buttons */
.cfg .cta{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.cfg .solid{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink)!important;color:#fff!important;
  border:1px solid var(--ink)!important;border-radius:8px;padding:10px 14px;font-size:13px;letter-spacing:.3px!important}
.cfg .solid:hover,.cfg .solid:focus{background:#000!important;color:#fff!important;border-color:#000!important}
.cfg .solid.sm{padding:8px 12px;font-size:12px}
.cfg .solid.big{padding:14px 16px;font-size:14px;font-weight:600!important}
.cfg .solid:disabled,.cfg .solid[disabled]{opacity:.6;cursor:default}
.cfg .ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--line2)!important;border-radius:8px;padding:9px 13px;font-size:12.5px;letter-spacing:.3px!important}
.cfg .ghost:hover,.cfg .ghost:focus{border-color:var(--ink)!important;background:var(--surface)!important;color:var(--ink)!important}
.cfg .ghost.sm{padding:8px 11px;font-size:12px}
.cfg .ghost.big{padding:13px 16px;font-size:13.5px}
.cfg .stage-actions{display:flex;gap:8px}

.cfg .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink)!important;color:#fff!important;
  display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:10px;font-size:13px;
  box-shadow:0 8px 30px rgba(0,0,0,.18)!important;z-index:50}
/* Bug fix: an author-origin `display` declaration always beats the
   user-agent's own [hidden]{display:none} default, regardless of
   specificity — so .toast was visible on page load (empty, before any
   flash() call) despite carrying the hidden attribute. This restores the
   attribute's actual effect. */
.cfg .toast[hidden]{display:none!important}

@media(prefers-reduced-motion:reduce){.cfg *{transition:none!important;animation:none!important}}
.cfg :focus-visible{outline:2px solid var(--ink)!important;outline-offset:2px}
.cfg input[type=number]::-webkit-inner-spin-button{opacity:.4}