/* =========================================================
   Quiz-Modal: Auswahlkarten, Kaffee-Balken, Stempel-Ladeanimation
   ========================================================= */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(30,18,14,.6);backdrop-filter:blur(6px)}
.modal.open{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.dlg{position:relative;width:min(720px,100%);max-height:94vh;overflow:auto;background:var(--bg);padding:36px 40px 34px;box-shadow:0 50px 100px -30px rgba(0,0,0,.6);animation:pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{transform:translateY(24px) scale(.97);opacity:0}}
.mx{position:absolute;top:14px;right:14px;width:40px;height:40px;background:var(--cream);font-size:18px;display:grid;place-items:center;transition:opacity .2s}
.mx:disabled{opacity:.35;cursor:not-allowed}

/* Kaffee-Balken (bleibt) */
.prow{display:flex;align-items:center;gap:14px;margin:0 46px 28px 0}
.mini{width:38px;flex:none}
.mini .liq{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bar{flex:1;height:6px;background:rgba(85,53,42,.14);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8A6A5C,#55352A);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.cnt{font-size:14px;color:var(--taupe);font-weight:600;letter-spacing:.04em;min-width:44px;text-align:right}
.liq{transform:translateY(62px)}

.dlg h3{font-size:clamp(28px,4vw,38px);margin-bottom:10px;letter-spacing:-.025em;outline:0}
.dlg .sub{color:var(--taupe);margin-bottom:26px;font-size:17px}
.stp{display:none}.stp.on{display:block;animation:slide .45s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{opacity:0;transform:translateX(18px)}}
.dlg .btn:disabled{opacity:.35;pointer-events:none}
.dlg .btn.full{width:100%;justify-content:center}
.back{margin-top:14px;font-size:15px;color:var(--taupe);text-decoration:underline;text-underline-offset:4px;padding:6px 2px}

/* Quadratische Auswahlkarten */
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:10px}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:1/1;width:100%;padding:14px 10px;text-align:center;background:var(--cream);border:2px solid transparent;color:var(--brown);transition:border-color .25s,background .25s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.opt .oi{display:grid;place-items:center;width:clamp(40px,8vw,52px);aspect-ratio:1;color:var(--brown);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.opt .oi svg{width:100%;height:100%}
.opt .ol{font-size:clamp(14px,2vw,16px);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.opt:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:0 18px 30px -22px rgba(85,53,42,.6)}
.opt:hover .oi{transform:scale(1.08)}
.opt:focus-visible{outline:3px solid var(--brown);outline-offset:3px}
.opt.sel,.opt[aria-checked="true"]{border-color:var(--brown);background:#fff}
.opt .ok{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);transition:.25s}
.opt.sel .ok,.opt[aria-checked="true"] .ok{background:var(--brown) var(--ic-check-c) center/14px no-repeat;border-color:var(--brown)}

/* Kontaktschritt */
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form label{display:block;margin-bottom:12px}
form label>span{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--taupe);margin-bottom:6px}
form input{width:100%;font:inherit;font-size:17px;padding:14px 16px;border:2px solid transparent;background:var(--cream);color:var(--brown);outline:0;transition:border-color .25s}
form input:focus{border-color:var(--brown)}
form input[aria-invalid="true"]{border-color:var(--red)}
form label>span.err{display:block;margin:6px 0 0;font-size:14px;font-weight:600;letter-spacing:0;color:var(--red)}
form label>span.err:empty{display:none}
.tr{display:flex;gap:10px 18px;flex-wrap:wrap;justify-content:center;margin:20px 0 4px;font-size:15px;font-weight:600}
.tr span{display:inline-flex;align-items:center;gap:8px}
.tr span::before{content:"";width:16px;height:16px;background:var(--ic-check-g) center/contain no-repeat}
.mf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--taupe)}
.mf .sigs{gap:16px;flex:none}.mf .sig{font-size:27px}

/* Ladezustand: Stempel setzt einen Abdruck – nur während des echten Sendens */
.load{text-align:center;padding:18px 0 22px}
.load h3{margin-bottom:6px}
.load p{margin-top:8px;font-size:18px;color:var(--taupe);min-height:3.1em}
.stampload{width:176px;height:auto;margin:0 auto;overflow:visible}
.sl-paper{fill:rgba(85,53,42,.14)}
.sl-imp{fill:none;stroke:var(--brown);stroke-width:2.4}
.sl-imp2{fill:none;stroke:var(--brown);stroke-width:1.2;stroke-dasharray:3 3.5}
.sl-dot{fill:var(--brown)}
.sl-shadow{fill:rgba(85,53,42,.18)}
@media(prefers-reduced-motion:no-preference){
  .stp.on .sl-stamp{animation:slPress 2s cubic-bezier(.5,0,.3,1) infinite}
  .stp.on .sl-imprint{animation:slInk 2s ease-out infinite}
  .stp.on .sl-shadow{animation:slShadow 2s cubic-bezier(.5,0,.3,1) infinite;transform-origin:80px 114px}
  @keyframes slPress{0%,8%{transform:translateY(-44px)}34%,46%{transform:translateY(0)}78%,100%{transform:translateY(-44px)}}
  @keyframes slInk{0%,34%{opacity:0;transform:scale(.9)}40%{opacity:1;transform:scale(1)}82%{opacity:.85}100%{opacity:0}}
  @keyframes slShadow{0%,8%{transform:scaleX(.6);opacity:.4}34%,46%{transform:scaleX(1);opacity:1}78%,100%{transform:scaleX(.6);opacity:.4}}
  .sl-imprint{transform-box:fill-box;transform-origin:center}
}

.errbox{text-align:left}
.errbox .eico{width:56px;height:56px;margin-bottom:20px;display:grid;place-items:center;background:rgba(168,72,58,.14) var(--ic-x-r) center/26px no-repeat}
.errbox .msg{color:var(--taupe);font-size:18px;margin-bottom:24px}
.errbox .acts{display:flex;flex-direction:column;gap:6px}
.done{text-align:center;padding:20px 0}
.done .big{width:76px;height:76px;margin:0 auto 22px;background:var(--green) var(--ic-check-w) center/40px no-repeat}
.done .btn{margin-top:26px}

@media(max-width:960px){
  .modal{padding:12px}
  .dlg{padding:30px 20px 26px}
  .prow{margin-right:44px}
  .opts{gap:10px}
  .opt{gap:10px;padding:10px 8px;aspect-ratio:1/.86}
  form .row{grid-template-columns:1fr}
}

@media(min-width:961px){.opts{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}