/* Democode-Seiten /demo und /demo/{code} (Prompt 184). Farben nur aus dem Siegel (Variablen aus site.css). */
.dm-kopf{padding:clamp(40px,7vw,88px) 0 24px;background:radial-gradient(40% 60% at 88% 0%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 70%),radial-gradient(35% 50% at 0% 100%,color-mix(in srgb,var(--lila) 10%,transparent),transparent 70%),var(--bg)}
.dm-schmal{max-width:760px}
.dm-kopf h1{margin:10px 0 14px;font-size:clamp(38px,6vw,72px);overflow-wrap:anywhere}
.dm-kopf h1 em{font-style:normal;color:var(--lila)}
.dm-gruss{font-family:var(--f-display);font-size:clamp(22px,3vw,32px);color:var(--brass);margin:0 0 22px}

/* Countdown */
.dm-countdown{margin-top:8px;padding:18px 22px;border-radius:18px;background:var(--surface);border:2px solid var(--ok);border-left-width:10px;max-width:880px}
.dm-cd-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:clamp(18px,2.3vw,24px);line-height:1.35}
.dm-cd-rest{font-family:var(--f-display);font-size:clamp(28px,4.2vw,46px);font-weight:700;color:var(--ok);line-height:1.1}
.dm-cd-bald{margin-top:6px;font-weight:600;font-size:16px}
.dm-countdown.dm-warn{border-color:var(--orange-tief);background:color-mix(in srgb,var(--orange) 14%,var(--surface))}
.dm-warn .dm-cd-rest{color:var(--fg);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--orange) 55%,transparent) 62%)}

/* Gutschein */
.dm-gutschein-abschnitt{padding:12px 0 72px}
.dm-gutschein{margin:20px 0 28px;padding:24px 26px;border-radius:20px;background:var(--surface);border:2px dashed var(--gold-gross);position:relative;max-width:880px}
.dm-gutschein-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin-bottom:12px}
.dm-gutschein h2{font-size:clamp(26px,3.4vw,38px)}
.dm-nr{font-family:var(--f-mono);font-size:17px;color:var(--muted)}
.dm-nr b{color:var(--fg);letter-spacing:.04em}
.dm-zusagen{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dm-zusagen li{position:relative;padding-left:34px;font-size:clamp(18px,2vw,21px);line-height:1.35}
.dm-zusagen li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:var(--ok)}
.dm-zusagen li::after{content:"";position:absolute;left:7px;top:calc(.2em + 4px);width:7px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}

/* Knöpfe */
.dm-knoepfe{display:flex;flex-wrap:wrap;gap:12px 14px;margin:26px 0 0}
.dm-gross{min-height:56px;padding:0 28px;font-size:18px;text-align:center}
.dm-mehr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.dm-mehr-titel{font-weight:700;color:var(--fg)}
.dm-mehr a{color:var(--fg)}

/* Eingabe */
.dm-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:26px 0 8px}
.dm-feld{display:flex;flex-direction:column;gap:6px;flex:1 1 260px}
.dm-feld label{font-weight:700}
.dm-feld input{min-height:56px;padding:0 16px;font:inherit;font-size:22px;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--ink);border-radius:14px;background:var(--surface);color:var(--fg)}
.dm-feld input[aria-invalid="true"]{border-color:var(--warn)}
.dm-fehler{margin:14px 0 0;padding:12px 16px;border-left:6px solid var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface));border-radius:10px;font-weight:600}
.dm-hinweis{margin-top:18px;color:var(--muted);font-size:15.5px}
.dm-hinweis a{color:var(--fg)}
.dm-beispiel{font-family:var(--f-mono);letter-spacing:.04em}

@media (max-width:560px){
  .dm-countdown{padding:14px 16px;border-left-width:8px}
  .dm-gutschein{padding:18px 16px}
  .dm-knoepfe .btn{width:100%}
  .dm-form .btn{width:100%}
  .dm-cd-punkt{display:none}
}