/* MD-Designworks · Website-Preisrechner (Popup, Kinetik-Look) */
.pr-trigger{margin-bottom:22px}
.pr-open{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;background:transparent;
  border:2px dashed var(--blue);color:var(--ink);padding:14px 18px;border-radius:1px;
  font-family:inherit;font-size:.98rem;text-align:left;transition:background .25s,color .25s,border-color .25s;min-height:44px}
.pr-open:hover{background:var(--blue);color:#fff;border-style:solid}
.pr-open .pr-tag{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:.03em;
  font-size:.8rem;background:var(--blue);color:#fff;padding:5px 10px;border-radius:1px;flex:none}
.pr-open:hover .pr-tag{background:var(--ink);color:var(--bg)}
.pr-open .pr-arrow{margin-left:auto;font-weight:600;flex:none}

dialog.pr-modal{width:min(620px,92vw);border:2px solid var(--ink);background:var(--bg-2);color:var(--ink);
  padding:0;border-radius:2px;max-height:90vh;overflow:hidden}
dialog.pr-modal::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.pr-inner{display:flex;flex-direction:column;max-height:90vh}
.pr-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px}
.pr-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--blue);font-weight:600}
.pr-close{background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--ink);
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:1px}
.pr-close:hover{color:var(--blue)}
.pr-progress{height:4px;background:var(--line);margin:0 24px}
.pr-progress span{display:block;height:100%;background:var(--blue);width:20%;transition:width .3s var(--ease)}
.pr-body{padding:20px 24px;overflow-y:auto;overscroll-behavior:contain}
.pr-q{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.4rem,4vw,2rem);line-height:1;margin-bottom:6px}
.pr-hint{color:var(--ink-2);font-size:.92rem;margin-bottom:18px}
.pr-opts{display:grid;gap:10px}
.pr-opt{display:flex;flex-direction:column;gap:3px;text-align:left;border:2px solid var(--ink);background:transparent;
  color:var(--ink);padding:14px 16px;border-radius:1px;cursor:pointer;font-family:inherit;min-height:44px;
  transition:background .2s,color .2s,border-color .2s}
.pr-opt .ol{font-weight:600;font-size:1rem}
.pr-opt .od{font-size:.85rem;color:var(--ink-2)}
.pr-opt:hover{border-color:var(--blue)}
.pr-opt[aria-pressed="true"]{background:var(--btn-blue);border-color:var(--btn-blue);color:#fff}
.pr-opt[aria-pressed="true"] .od{color:rgba(255,255,255,.85)}
.pr-foot{display:flex;gap:10px;justify-content:space-between;padding:16px 24px 22px;border-top:1px solid var(--line)}
.pr-back{background:none;border:2px solid var(--ink);color:var(--ink);padding:12px 20px;border-radius:1px;cursor:pointer;
  font-size:14px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;min-height:44px}
.pr-back[hidden]{display:none}
.pr-next{cursor:pointer}
.pr-next[hidden]{display:none}
.pr-next[disabled]{opacity:.5;cursor:not-allowed}

/* Ergebnis */
.pr-result{padding:6px 0}
.pr-price{font-family:"Anton",sans-serif;font-size:clamp(3rem,13vw,5rem);line-height:.9;color:var(--blue);text-align:center}
.pr-price small{display:block;font-family:"Space Grotesk",sans-serif;font-size:.85rem;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.pr-sum{margin:18px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:12px 0}
.pr-sum div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:.92rem}
.pr-sum div span:first-child{color:var(--ink-2)}
.pr-sum div span:last-child{font-weight:600;text-align:right}
.pr-disclaimer{background:var(--bg);border:2px solid var(--line);padding:14px 16px;font-size:.85rem;
  color:var(--ink-2);line-height:1.55;border-radius:1px;margin-bottom:16px}
.pr-actions{display:grid;gap:10px}
.pr-actions .btn{width:100%;justify-content:center}
.pr-restart{background:none;border:0;color:var(--blue);cursor:pointer;font-size:.9rem;text-decoration:underline;
  padding:8px;min-height:44px}
@media(max-width:560px){ .pr-foot{flex-direction:column-reverse} .pr-back,.pr-next{width:100%;justify-content:center} }