/* UTECH HumanCheck™ – Theme „REY DEL MAR“ (Präsentation, keine Sicherheitslogik)
   Grundlage: finale Master-Grafik (1672 × 940). Maße in Master-Pixeln × --s (Skalierung, von theme-reydelmar.js gesetzt).
   .hcr-wide  = Komposition der Master-Grafik (Desktop)   ·   .hcr-stack = gestapelt (Mobile / Hochformat) */
.hc-theme-rey{--hc-bg:#fdfbf6;--hc-ink:#141210;--hc-muted:#8a857f;--hc-accent:#c9913f;--hc-error:#b3322a;
  --rey-brown:#79471e;--rey-utech:#72401a;--rey-gold:#e6aa51;--rey-red:#b3322a;--btn-ink:#fdfbf6;
  background:#fdfbf6;overflow-x:hidden}
.hcr{position:relative;width:100%}
.hcr-layer{position:absolute;pointer-events:none}
.hcr-layer picture,.hcr-layer img{display:block;width:100%;height:100%}
.hcr-layer img{opacity:0;transition:opacity .45s ease}
.hcr-layer img.is-loaded{opacity:1}

/* Bildebenen laufen weich in den Ivory-Grund aus – keine sichtbaren Bildkanten */
.hcr-figure img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 84%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 84%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 100%);
  mask-composite:intersect}
.hcr-coast img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 95%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 95%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 93%,transparent 100%);
  mask-composite:intersect}
.hcr-petal img{-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}

/* Kopf: REY DEL MAR · Ornament · Claim */
.hcr-head{position:relative;z-index:3;text-align:center}
.hcr-brandname{margin:0;font:500 48px/1 var(--f-display,"Cormorant Garamond",Georgia,serif);letter-spacing:.17em;padding-left:.17em;color:var(--rey-brown)}
.hcr-orn{display:block;position:relative;width:244px;height:10px;margin:0 auto;
  background:linear-gradient(90deg,transparent,rgba(158,104,49,.75) 30%,rgba(158,104,49,.75) 45.5%,transparent 45.6%,transparent 54.4%,rgba(158,104,49,.75) 54.5%,rgba(158,104,49,.75) 70%,transparent) center/100% 1px no-repeat}
.hcr-orn::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#9e6831;transform:translate(-50%,-50%)}
.hcr-claim{margin:0;font:500 17px/1 var(--f-text,Inter,system-ui,sans-serif);letter-spacing:.52em;padding-left:.52em;text-transform:uppercase;color:var(--hc-ink)}

/* Saite */
.hcr-string{position:absolute;overflow:visible;pointer-events:none;z-index:1}
.hcr-base{fill:none;stroke:#e2b064;stroke-width:1.4;opacity:.5;vector-effect:non-scaling-stroke}
.hcr-lit,.hcr-bad{fill:none;stroke-width:calc(3px / var(--s,1));stroke-linecap:round} /* ohne non-scaling-stroke: Strichmuster muss in Pfad-Einheiten bleiben */
.hcr-lit{stroke:#f7b650;filter:drop-shadow(0 0 3px rgba(255,200,110,.95)) drop-shadow(0 0 10px rgba(240,150,50,.55))}
.hcr-bad{stroke:#c0392b;opacity:0;filter:drop-shadow(0 0 4px rgba(192,57,43,.6))}
.hcr.is-failed .hcr-bad{opacity:1}
.hcr-spark{opacity:0;transition:opacity .25s;transform-box:fill-box;transform-origin:center}
.hcr.is-moving .hcr-spark,.hcr.is-waiting .hcr-spark{opacity:1}
.hcr.is-waiting .hcr-spark{animation:hcr-breathe 1.3s ease-in-out infinite}

/* Akkordkreise – deckungsgleich über den Kreisen der Master-Grafik */
.hcr-chords{list-style:none;margin:0;padding:0}
.hcr-chord{position:absolute;z-index:2;width:max(52px,calc(var(--s,1) * 106px));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:max(4px,calc(var(--s,1) * 8px));
  background:#fffdf9;border:1.5px solid #ecd2a4;color:#673c19;
  box-shadow:0 0 calc(var(--s,1) * 10px) rgba(236,190,120,.25);
  transition:border-color .35s,box-shadow .5s,transform .35s}
.hcr-name{font:500 max(1.15rem,calc(var(--s,1) * 40px))/1 var(--f-display,"Cormorant Garamond",Georgia,serif);margin-top:max(2px,calc(var(--s,1) * 4px))}
.hcr-dot{width:max(5px,calc(var(--s,1) * 9px));aspect-ratio:1;border-radius:50%;background:#dfbd8c;transition:background .35s}
.hcr-chord.is-on{border-color:var(--rey-gold);box-shadow:0 0 0 1px rgba(246,196,120,.35),0 0 calc(var(--s,1) * 22px) calc(var(--s,1) * 3px) rgba(242,168,70,.42)}
.hcr-chord.is-on .hcr-dot{background:#cd9040}
.hcr-chord.is-current{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 0 1px rgba(246,196,120,.5),0 0 calc(var(--s,1) * 30px) calc(var(--s,1) * 6px) rgba(245,170,70,.55)}
.hcr.is-resolved .hcr-chord{border-color:var(--rey-gold)}
.hcr-chord.is-wrong{border-color:var(--rey-red);color:var(--rey-red);border-width:2px;
  box-shadow:0 0 0 1px rgba(179,50,42,.25),0 0 calc(var(--s,1) * 22px) calc(var(--s,1) * 3px) rgba(179,50,42,.38);animation:hcr-wrong .45s cubic-bezier(.36,.07,.19,.97) both}
.hcr-chord.is-wrong .hcr-dot{background:var(--rey-red)}
.hcr-arrow{position:absolute;z-index:2;transform:translate(-50%,-55%);font:400 max(15px,calc(var(--s,1) * 27px))/1 var(--f-text,Inter,system-ui,sans-serif);font-style:normal;color:#1d1a17}

/* Panel (Core): HUMAN CHECK · Status · Aktionen · Protected by UTECH HumanCheck™ */
.hc-theme-rey .hc-panel{position:relative;z-index:3;gap:.5rem}
.hc-theme-rey .hc-title{font:500 34px/1.15 var(--f-display,"Cormorant Garamond",Georgia,serif);letter-spacing:.3em;padding-left:.3em;color:var(--hc-ink);align-self:flex-start;position:relative;left:50%;width:max-content;max-width:none;transform:translateX(-50%)}
.hc-overlay.hc-theme-rey.is-verified .hc-title{letter-spacing:.3em;color:var(--rey-brown)}
.hc-theme-rey .hc-status{font:400 15px/1.35 var(--f-text,Inter,system-ui,sans-serif);color:var(--hc-muted);min-height:1.35em;align-self:flex-start;position:relative;left:50%;width:max-content;max-width:calc(100vw - 2rem);transform:translateX(-50%)}
.hc-theme-rey.is-failed .hc-status{color:var(--rey-red)}
.hc-theme-rey .hc-actions{flex-direction:column;gap:.35rem;margin-top:.2rem}
.hc-theme-rey .hc-retry{background:var(--rey-utech);border-color:var(--rey-utech);color:#fdfbf6;min-height:44px}
.hc-theme-rey .hc-retry:hover{background:#5b3314}
.hc-theme-rey .hc-cancel{color:#6f675e}
.hc-theme-rey .hc-brand{margin-top:.6rem;gap:12px;font:400 18px/1 var(--f-text,Inter,system-ui,sans-serif);letter-spacing:.02em;color:var(--hc-muted)}
.hc-theme-rey .hc-brand strong{color:var(--rey-utech);font-size:1.18em;font-weight:700;letter-spacing:.03em}
.hc-theme-rey .hc-shield{width:33px;height:43px;color:#141210;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 43'%3E%3Cpath d='M16.5 2.5 30 8v11c0 9.6-5.8 17.4-13.5 21.3C8.8 36.4 3 28.6 3 19V8z' fill='none' stroke='black' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m10.5 21.5 4.3 4.3 8-8.6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 43'%3E%3Cpath d='M16.5 2.5 30 8v11c0 9.6-5.8 17.4-13.5 21.3C8.8 36.4 3 28.6 3 19V8z' fill='none' stroke='black' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m10.5 21.5 4.3 4.3 8-8.6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- Wide: Komposition der Master-Grafik ---------- */
.hcr-wide.hc-theme-rey{padding:0;display:block}
.hcr-wide .hc-stage{position:absolute;inset:0;width:auto}
.hcr-wide .hcr{position:absolute}
.hcr-wide .hcr-scene{position:absolute;inset:0}
.hcr-wide .hcr-head{position:absolute;left:0;right:0;top:calc(var(--s) * 19px)}
.hcr-wide .hcr-brandname{font-size:calc(var(--s) * 48px)}
.hcr-wide .hcr-orn{width:calc(var(--s) * 244px);height:calc(var(--s) * 10px);margin:calc(var(--s) * 5px) auto calc(var(--s) * 7px)}
.hcr-wide .hcr-orn::after{width:calc(var(--s) * 10px);height:calc(var(--s) * 10px)}
.hcr-wide .hcr-claim{font-size:max(10px,calc(var(--s) * 17px))}
.hcr-wide .hc-panel{position:absolute;left:0;right:0;margin:0;top:calc(var(--oy) + var(--s) * 757px);gap:calc(var(--s) * 6px)}
.hcr-wide.is-failed .hc-panel{transform:translateY(calc(var(--s) * -30px))}
.hcr-wide .hc-title{font-size:max(1rem,calc(var(--s) * 34px))}
.hcr-wide .hc-status{font-size:max(.8rem,calc(var(--s) * 16px))}
.hcr-wide .hc-brand{position:absolute;left:0;right:0;justify-content:center;top:calc(var(--s) * 72px);margin:0;font-size:max(.75rem,calc(var(--s) * 18px));gap:calc(var(--s) * 12px)}
.hcr-wide .hc-shield{width:calc(var(--s) * 33px);height:calc(var(--s) * 43px)}

/* ---------- Stack: Mobile / Hochformat ---------- */
.hcr-stack.hc-theme-rey{justify-content:flex-start;padding-top:max(1.6rem,env(safe-area-inset-top))}
.hcr-stack .hcr{display:flex;flex-direction:column;align-items:center}
.hcr-stack .hcr-brandname{font-size:clamp(1.9rem,8.6vw,3rem)}
.hcr-stack .hcr-orn{width:clamp(150px,40vw,244px);margin:.5rem auto .6rem}
.hcr-stack .hcr-claim{font-size:clamp(.6rem,2.65vw,.85rem);letter-spacing:.34em;padding-left:.34em}
.hcr-stack .hcr-scene{position:relative;width:100vw;margin-top:.4rem;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 96%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 96%,transparent 100%)}
.hcr-stack .hcr-scene{mix-blend-mode:multiply}
.hcr-stack .hcr-figure img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 84%,transparent 100%)}
.hcr-stack .hcr-petal{display:none}
.hcr-stack .hcr-coast{top:clamp(4.5rem,24vw,7rem);right:-1rem;width:min(44vw,320px);aspect-ratio:492/890;opacity:.55}
.hcr-stack .hcr-coast img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40%),linear-gradient(to bottom,transparent 0,#000 12%,#000 45%,transparent 70%);
  mask-image:linear-gradient(to right,transparent 0,#000 40%),linear-gradient(to bottom,transparent 0,#000 12%,#000 45%,transparent 70%)}
.hcr-stack .hc-stage{margin-top:auto}
.hcr-stack .hc-panel{margin-top:.2rem;margin-bottom:auto;align-self:stretch}
/* Fehler-Aktionen liegen absolut unter dem Status (Position per JS) – sie erscheinen ohne Layout-Verschiebung */
.hcr-stack .hc-actions,.hcr-stack .hc-alt{position:absolute;left:0;right:0}
.hcr-stack .hc-title{font-size:clamp(1.25rem,5.4vw,1.9rem)}
.hcr-stack .hc-status{font-size:.9rem}
.hcr-stack .hc-brand{margin-top:1rem;font-size:.82rem;gap:.6rem}
.hcr-stack .hc-shield{width:22px;height:29px}

@keyframes hcr-breathe{50%{transform:scale(1.45);opacity:.7}}
@keyframes hcr-wrong{20%{transform:translate(calc(-50% - 6px),-50%)}40%{transform:translate(calc(-50% + 5px),-50%)}60%{transform:translate(calc(-50% - 3px),-50%)}80%{transform:translate(calc(-50% + 2px),-50%)}}

@media (prefers-reduced-motion:reduce){
  .hcr *,.hcr *::before,.hcr *::after{transition:none!important;animation:none!important}
  .hcr-spark{display:none}
  .hcr-chord.is-current{transform:translate(-50%,-50%)}
}