/* Qardo Marken-Zeichen der Website (UX-9) -- static/css/marketing.css
   Die App ist ruhig und ohne Zierde. Website und Scan-Seite behalten genau
   zwei Markenzeichen: die Webkante und den roten Versatzschatten am
   Primaerknopf. Laedt NACH tokens.css und marketing-layout.css; unter
   body.m-page gescopt. */

/* Webkante: 4px hohe Kante aus quadratischen Modulen in QR-Modulgroesse.
   Zitiert das Produkt, dekoriert nicht. */
.m-page .sel {
  width: 100%;
  height: 4px;
  margin-bottom: var(--space-3);
  background-image: repeating-linear-gradient(90deg, var(--text) 0 6px, transparent 6px 12px);
  opacity: .5;
}

/* Primaerknopf der Website: derselbe Knopf wie in der App, dazu der rote
   Versatzschatten im Rotgarn der Kleidungsetiketten. Bewegt sich beim
   Ueberfahren/Druecken mit, damit der Knopf greifbar wirkt. */
.m-page .btn-primary {
  border-width: 1.5px;
  box-shadow: 3px 3px 0 var(--accent);
}
.m-page .btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--accent); }
.m-page .btn-primary:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--accent); }
.m-page .btn-primary:focus-visible { box-shadow: 3px 3px 0 var(--accent), var(--focus-ring); }
.m-page .btn-primary[aria-disabled="true"] { transform: none; box-shadow: 3px 3px 0 var(--accent); opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .m-page .btn-primary:hover, .m-page .btn-primary:active { transform: none; }
}