/* Artcore — Popup „Demo anfordern“ auf der Startseite (18.09.2026).
   Natives <dialog> mit showModal(): Hintergrund wird inert, ESC schließt.
   Farben nur über die Tokens aus artcore-front.css, also Hell und Dunkel automatisch. */

.dm{--err:#a8281a;
  width:min(560px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;
  margin:auto;padding:0;border:0;border-radius:24px;color:var(--ink);background:var(--panel);
  box-shadow:12px 12px 32px var(--sh-dark),-8px -8px 24px var(--sh-light)}
:root[data-theme="dark"] .dm{--err:#ff8a7a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dm{--err:#ff8a7a}}
.dm::backdrop{background:rgba(10,12,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html:has(.dm[open]){overflow:hidden}

.dm[open]{animation:dmIn .22s ease-out}
.dm[open]::backdrop{animation:dmFade .22s ease-out}
@keyframes dmIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dmFade{from{opacity:0}to{opacity:1}}

.dm-form{position:relative;padding:34px 34px 30px}
@media(max-width:560px){.dm-form{padding:28px 20px 22px}}
.dm-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  font-size:24px;line-height:1;color:var(--dim);background:var(--panel);
  box-shadow:3px 3px 8px var(--sh-dark),-3px -3px 8px var(--sh-light)}
.dm-x:hover,.dm-x:focus{color:var(--accent-ink);background:var(--panel)}
.dm-x:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dm .eyebrow{margin:0}
.dm-h{font-family:var(--display);font-size:clamp(1.4rem,4vw,1.9rem);line-height:1.1;margin:.35em 0 .3em;padding-right:36px}
.dm-lead{margin:0 0 22px;color:var(--dim);line-height:1.55}

.dm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media(max-width:560px){.dm-row{grid-template-columns:minmax(0,1fr);gap:0}}
.dm-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.dm-field>span{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.dm-field small{font-size:inherit;text-transform:none;letter-spacing:.04em}
.dm-field em,.dm-check em{font-style:normal;color:var(--accent-ink)}
.dm-field input,.dm-field select,.dm-field textarea{font:inherit;font-size:1rem;color:var(--ink);
  background:var(--panel);border:0;border-radius:14px;padding:13px 16px;width:100%;box-sizing:border-box;
  box-shadow:inset 3px 3px 7px var(--sh-dark),inset -3px -3px 7px var(--sh-light);
  -webkit-appearance:none;appearance:none}
.dm-field select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.dm-field input,.dm-field select{height:48px;line-height:1.25}
.dm-field textarea{resize:vertical;min-height:88px;line-height:1.5}
.dm-field textarea::placeholder{color:var(--mute)}
.dm-field input:focus,.dm-field select:focus,.dm-field textarea:focus{outline:none;
  box-shadow:inset 3px 3px 7px var(--sh-dark),inset -3px -3px 7px var(--sh-light),0 0 0 2px var(--accent)}
.dm-field [aria-invalid="true"]{box-shadow:inset 3px 3px 7px var(--sh-dark),inset -3px -3px 7px var(--sh-light),0 0 0 2px var(--err)}

.dm-check{display:flex;gap:12px;align-items:flex-start;margin:2px 0 14px;color:var(--dim);font-size:.93rem;line-height:1.5;cursor:pointer}
.dm-check input{width:20px;height:20px;margin:2px 0 0;flex-shrink:0;accent-color:var(--accent)}
.dm-check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dm-check[aria-invalid="true"]{color:var(--err)}
.dm-check a{color:var(--ink);border-bottom:1px solid var(--accent);text-decoration:none}
.dm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.dm-msg{margin:0 0 14px;font-size:.96rem;line-height:1.5;min-height:1.5em}
.dm-msg.is-success{color:var(--ink);padding:12px 16px;border-radius:14px;border-left:3px solid var(--accent);
  box-shadow:inset 3px 3px 7px var(--sh-dark),inset -3px -3px 7px var(--sh-light)}
.dm-msg.is-error{color:var(--err)}
.dm-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.dm-actions .btn{border:0;cursor:pointer;white-space:normal}
.dm-actions .btn-solid:hover,.dm-actions .btn-solid:focus{background:var(--deep);color:var(--bg)}
.dm-actions .btn-ghost:hover,.dm-actions .btn-ghost:focus{background:var(--panel)}
.dm-actions .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dm-actions .btn[disabled]{opacity:.6;cursor:progress}

@media (prefers-reduced-motion:reduce){.dm[open],.dm[open]::backdrop{animation:none}}